Glitch（glitch.com・glitch.me）
オンラインで Web アプリの開発・共有ができる Glitch（グリッチ）についてまとめています。
単に静的な Web サイト（ホームページ）の公開にも使用できます。
独自ドメインも設定可能です。
2020年4月より有料サービスがはじまっていますが、引き続き無料でも使用できます。
公式サイト
- 🎏 Glitch - 公式サイト
- DEV
- Status - 稼働状況
- Support - サポート掲示板
- [email protected] - メールサポート
特徴
Glitch は次の特徴があります。
- Web ブラウザ上でファイルの生成・編集ができます。アップロードも可能です。
- 完成した Web アプリは
サブドメイン.glitch.meで公開でき、共有もできます。※ - 複数人でプロジェクト共有できます。編集はリアルタイムで反映されます。
- Git リポジトリからのインポート・エクスポートも可能です。
※ Thanks を 2 つ以上もらうと、独自ドメインの設定もできます。
アカウント作成・ログイン手段
ログインせずにプロジェクト作成もできますが、5 日間有効です。
まともに使用したい場合はアカウントを作成して下さい。
次に対応しています。
- GitHub
- Email Magic Link - メールに認証コードを送り、ログインします。
認証のためのパスワード発行・所有はしません。
New Project
ログイン後右上の New Project、
ファイル編集画面では左上のアカウント名から New Project を選択します。
次の選択肢になりますので、目的に近いプロジェクトを選びます。
- hello-webpage Web ページ
- hello-express Node.js アプリ
- hello-sqlite Node.js＋SQLite データベースアプリ
- Clone from Git Repo Git リポジトリからクローン
Git リポジトリは https のアドレスを入れます。
プライベートリポジトリの場合は
https://ユーザー:パスワード@gitプロバイダ.com/～/リポジトリ名.git で可能です。
ファイル編集画面
左に構成ファイルの一覧、右に選択されているファイルのソースが出ています。
2020年3月より、左下の表示に変更が入り、機能が追加されました。
- New File でファイルを追加・アップロードできます。
- ファイルの右 より Rename・Duplicate・Delete が選べます。
- ソースの上 Formar This File で形式チェックをしながら、空白を整えてくれます。
- 参加者アイコンの右 Share より共有できます。
- Project Page プロジェクトページのアドレス
- Live App Web・Web アプリの公開アドレス
- Code 編集画面を表示 env 値は表示されない
- Invite Others to Edit 他の参加者が参加し編集できる URL
- Embed This Project 別の Web・ブログ内へ貼り付けるコード
- Share Buttons ソース表示・共同編集のボタンを表示するコード
- Show で Web 画面を表示します。（別タブまたはソースの右）
- 左下 App Status でコンテナの使用量（メモリ・ディスク容量など）を参照します。
- 左下 Tools より次が選べます。
- Rewind 編集状況を表示します。
ここからの選択で、その時点のファイル状態に戻す事ができます。 - Logs 画面下にログを表示します。Debugger も表示できます。
- Terminal 下にターミナルを表示します。
Full Page Terminal → で別タブ・全画面表示にできます。 - Import and Export Git リポジトリのインポート・エキスポートを行います。
Download Project で .tgz 形式によるダウンロードができます。 - Custom Domain 独自ドメインを設定します。
Q&A/独自ドメインはどのように設定するのですか？
- Rewind 編集状況を表示します。
Glitch 特有のファイル
Glitch 特有のファイルは次が存在します。
README.md
説明ファイル。プロジェクトページを開いた時、存在していると表示されます。
GitHub などでも使われていて、インポートした場合はそのまま表示できます。
glitch.json
起動アプリを入れ、任意の起動が可能です。項目は省略できます。
- install インストールコマンド
- start 起動コマンド
- watch 下記
watch.jsonの項目を記載可能
複数起動する場合は && 指定したり、bash 実行ファイル.sh を使えます。
環境変数 PORT（ポート 3000 または 8080）に listen させる事で、
アプリを実行させるようにできます。
watch.json
ファイルの参照範囲、適用待ち時間を設定します。
- install
- include
installコマンドを実行する対象ファイル ※
- include
- restart
- exclude コンテナ再起動対象から外すディレクトリ・ファイル ※
- include コンテナを再起動する対象ファイル ※
- throttle 変更から適用するまでの待ち時間（ミリ秒）
※ 正規表現。\ は \\ 指定。ファイル requirements.txt は "^requirements\\.txt$"。
アカウントページ
アカウント部分をクリックすると、アカウント表示になります。
アカウントの枠は編集できます。
- Upload Avatar で画像をアップロードできます。
- 名前・アカウント名・説明を編集できます。
アカウント名は英数ですが、他は日本語も使用可能です。
Recent Projects にプロジェクトが表示されています。
その枠右上 より次が選択できます。
- Feauire アカウント表示時に大きく Web 画面を表示します。
- Pin Feauire の下に表示されます。特に参照してほしいプロジェクトに付けます。
- Add to Collections Collections に追加します。他の人のプロジェクトを追加できます。
コレクション＝ブックマーク・お気に入りと考えてもらって良いでしょう。 - Delete Project プロジェクトを削除します。
プロジェクトページ
アカウント画面などから Edit Project または プロジェクト名 を選ぶと、
そのプロジェクトの詳細画面にできます。
この時プロジェクトが表示されている枠内は次の動作になります。
- Upload Avatar よりプロジェクト画像をアップロードします。
- プロジェクト名と説明を編集できます。
プロジェクト名は英語、説明は日本語や絵文字なども使えます。 - 右上 の ・ で Collection への追加・削除になります。
- で不特定多数への公開・非公開を切り替えます。
- Show で別画面で Web 画面を表示します。
- Edit Project でファイル編集画面になります。
更に下へスクロールし、表示画面の下に移動すると、右下に次のボタンがあります。
- Add to Collection Collection へ追加します。
- Remix This 自分のプロジェクトへコピーし、編集できるようにします。
コピーされるので、コピー元は影響ありません。
無料・有料の違い
🎏 Unlock more magic | Glitch
What technical restrictions are in place? | Glitch Help Center
2020年4月より有料サービスが開始されました。月 $10 または年 $96（月 $8 相当）です。
無料と有料の違いは次となっています。
| プロジェクト毎 | 無料 | 有料 |
|---|---|---|
| スリープ | 5 分 | 5 プロジェクトまで無停止可能 |
| 動作停止 | 12 時間後 | 5 プロジェクトまで無停止可能 |
| 参照数制限 | 1 時間 4000 リクエスト | 無制限 |
| メモリ | 512MB | 2GB |
| ディスク容量 ※ | 200MB | 400MB |
※ 次の要領は別領域になっています。
- Node.js モジュール ディスク容量 1GB
- assets ストレージ 512MB
ファイル一覧の assets からアップロードできます。
画像などテキスト編集する必要がないファイルを入れます。
その他、ログインせずにプロジェクトを生成した場合、プロジェクトは 5 日有効です。
Q&A
単なるホームページ（Web サイト）の公開場所として使用できますか？
はい。可能です。HTML・CSS・JavaScript ファイルは Web 上で編集できます。
日本語を使用できますか？
はい。文字コード UTF-8 で日本語も編集・表示できます。
Web 上での基本的な表示やサポートは完全に英語です。
サーバはどこにありますか？
Amazon Web Services（AWS）を使用しています。
Glitch の会社はアメリカにあるので、アメリカ内のリージョンと思われます。
スリープ・停止とは何ですか？
5 分参照がない場合のスリープにより、その後参照された場合は、再起動します。
この再起動は数秒要します。Web 参照時はその間専用の表示があります。
継続して何かサーバ動作していた場合、12 時間で強制的にシャットダウンされます。
スリープしないようにする事はできますか？
2020年4月より有料サービスがはじまり、
公式にスリープ・停止しない状態にする事ができるようになっています。・
無料で行う場合、参照が 5 分なければスリープに入るので、
それより少ない間隔で参照し続ければ良いです。
例えば次のサービスがあります。
- cron-job.org - 最短 1 分おき
- Freshping | Freshworks - 1 分または 5 分おき
上記のサービスは 1 分おきで参照する事ができます。
数が少なければ、直接各プロジェクトを追加しても良いでしょう。
Awake! は Glitch プロジェクトで作られています。
そのまま登録する事もできますが、登録数が多いと見られるため、
Remix して自分のプロジェクトに入れると良いでしょう。
ただし、Glitch の仕様により 12 時間で停止してしまいます。
そこで上に紹介しているサービスで Awake! の Live アドレスを参照し、
Awake! から各プロジェクトなどを参照するようにします。
これにより制限なくプロジェクトをスリープさせずに動作させる事ができます。
Uptime Robot は 5 分おきですが、実際にはより長い間隔で参照が発生します。
数時間空いて参照される場合もあります。スリープが発生してしまいますので、おすすめできません。
その他、契約しているサーバから cron で curl 参照させる方法も使えます。
OK などの単純なテキストで cronjob・freshping・awake・cron などの
参照専用にファイル名を生成し、そのファイルを参照するように設定すると、
ログで判別しやすいです。
なお、 多くのプロジェクトを稼働させたままにするのは規約違反行為で、
プロジェクトが止められる可能性があります。
故意に多数のプロジェクトを常時動作させるようにしない方が良いでしょう。
Node.js 以外の言語実行もできるでしょうか？
Language support on Glitch: a list | Glitch Support
Glitch は Node.js 向けに最適化されてありますが、
他のプログラミング言語やサーバなどを起動できます。
git があるので、git clone など、
curl があるので、ファイルのダウンロードが可能です。
これにより最新バージョンやインストールされていない実行ファイルを
ダウンロードして、実行する事もできます。
実際に Web サーバ Caddy と Caddy＋PHP の例をブログに入れています。
🎈 Web サーバ Caddy をすばやく使おう。Glitch で。| ふうせん🎈 Fu-wen.
🎈 Caddy | ふうせん🎈 Fu-sen.
メモリが 512MB なので、実行ファイルによっては起動に時間を要する場合があります。
これで問題が発生する場合は sleep で起動順を調整するなどして下さい。
PHP は動きますか？
PHP work on Glitch? | Glitch Support
動く事が確認されています。
サイト運営者が最小限で動作できるプロジェクト phpmin を作成・公開しています。
すでに存在するプロジェクトでもファイルを追加して使用可能です。
🎈 PHP の ビルトイン Web サーバー を採用していますが、
Glitch レベルでサブドメイン名に参照が制限されるため、特別攻撃が多くなる恐れはありません。
Apache と MySQL を起動して、PHP の使用を可能にしています。
Apache と MySQL の設定ファイルが /app 内にあります。
Console より起動時のディレクトリ /app で ls -al を行い、
.apache2 および .mysql がある場合に使用可能です。
確実なのは lamp-doc を含め、関連しているプロジェクトから Remix します。
オリジナルの lamp-poc は Apache ログをファイルを保存していて、
これによって空き容量をなくす問題があるので、
サイト運営者が起動および refresh 実行時にログを削除するよう修正しました。
なお、2020年3月現在、入っている PHP が PHP 7.0 で、
PHP 側では期限切れバージョンが維持されている事に注意を要します。
OS パッケージそのままなので、OS 側でセキュリティ考慮されていると思われます。
Cannot use php in glitch 内コメント | Glitch Support
OS の更新によって PHP も更新する事を検討しているようです。
コンソールを操作してファイルを編集しましたが、反映されません。
ファイル編集環境とコンソールは別領域で、リアルタイムには反映されません。
コンソールから refresh と入力する事で同期します。
ファイルを変更して、起動するファイルを変更しましたが、サーバの再起動はどうするのですか？
コンソールから refresh と入力するとサーバの再起動が可能です。
もちろん kill を用いてプロセスを削除する事も可能です。
バイナリーファイルをエディタで表示されないようにする事はできますか？
実行ファイルなどバイナリーファイルを直接置いている場合、
ファイル .gitignore を生成し、
ここに表示したくないファイル名を行毎に記載して下さい。
ブラウザの再読み込みでファイル一覧から非表示になっている事を確認できます。`
エディターでバイナリーファイルを参照しようとすると
しばらくレスポンスを失う場合があるため、この対応は推奨されます。
Google などで検索結果に表示されますか？
サブドメイン.glitch.me はデフォルトでは検索結果にでてきます。
検索結果に表示したくなくない場合や参照を減らしたい場合は
次を入れた robots.txt ファイルを生成して下さい。
User-agent: *
Disallow: /
プロジェクトを見せないようにできますか？
いくつかの対応で分かりにくくする事ができます。
- 上項目の robots.txt を生成し、Google などの検索結果に出ないようにします。
- プロジェクトを Private にして、Glitch 内でプロジェクトが表示されないようにします。
- プロジェクト名をわかりにくい名称にし、直接参照されにくくします。
- サーバサイドで処理している場合は、参照時ログを出力するようにします。
もし他から参照されている可能性を確認した場合はプロジェクト名を変えます。
オンラインエディタを使わずに使用・公開できますか？
Git リポジトリに入れておけば、Glitch にインポートして公開が可能です。
静的サイトジェネータを用いた公開や Web ブラウザ上でファイル生成したい場合は
Git リポジトリ経由で使用できる事になります。
ただし git push する度にインポートするか、
コンソールから git clone などでファイルを反映させ、
refresh する事になり、手間になります。
編集したファイルが反映されません。
I can’t edit my project - it just refreshes and doesn’t save any changes | Glitch Help Center
通常はプロジェクト内のストレージ容量不足によって発生します。
上のリンクに記載されている内容で解決を行って下さい。
この方法で解決できない場合はメール [email protected] へ連絡して下さい。
英語の必要があります。また返信に数日要する場合があります。
独自ドメインはどのように設定するのですか？
独自ドメインを設定するためには 2 つ以上の Thanks をもらう必要があります。
この Thanks は Support ではなく、プロジェクトの Thanks です。
利用がある程度得られないと実現は難しいと思われます。
How do I add a custom domain, a CNAME, or A record for my custom domain? | Glitch Help Center
Support にはこれを用いず外部サービス Fly 経由で有効にする方法が出ていますが、
Fly（fly.io）の仕様が変わり、現在この操作は困難になっているため、
公式な設定手段が事実上確実となります。
独自ドメインを削除して、別のプロジェクトに使いたいのですが、設定できません。
メール [email protected] へ独自ドメインを削除するよう依頼して下さい。
英語の必要があります。また返信に数日要する場合があります。
急にサスペンド状態になりました！ 全く使用できません。
何か問題のあるプロジェクトがあって、Glitch によって停止させたようです。
メール [email protected] へ連絡を行う事で復旧を行えます。
英語の必要があります。また返信に数日要する場合があります。