Glitch（glitch.com・glitch.me）
オンラインで Web アプリの開発・共有ができる Glitch（グリッチ）についてまとめています。
単に静的な Web サイト（ホームページ）の公開にも使用できます。
独自ドメインも設定可能です。
2020年4月より有料サービスがはじまっていますが、引き続き無料でも使用できます。
公式サイト
- 🎏 Glitch - 公式サイト
- DEV
- Status - 稼働状況
- Support - サポート掲示板
- Help Center - ヘルプ
特徴
Glitch は次の特徴があります。
- Web ブラウザ上でファイルの生成・編集ができます。アップロードも可能です。
- 完成した Web アプリは
サブドメイン.glitch.meで公開でき、共有もできます。 - 独自ドメインを設定し、公開する事も可能です。
- 複数人でプロジェクト共有できます。編集はリアルタイムで反映されます。
- Git リポジトリからのインポート・エクスポートも可能です。
アカウント作成・ログイン手段
ログインせずにプロジェクト作成もできますが、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 で可能です。
glitch.new を参照すると、Node.js アプリの新規プロジェクトで作成されます。
素早く新規作成したい時、アドレスの直接入力が可能なので便利です。
ファイル編集画面
左に構成ファイルの一覧、右に選択されているファイルのソースが出ています。
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 相当）です。
無料と有料の違いは次となっています。
| プロジェクト毎 | 無料 | 有料 |
|---|---|---|
| プロジェクト時間 ★ | 4000 時間 | 5 プロジェクトまで対象外 |
| スリープ | 5 分 | 5 プロジェクトまで無停止可能 |
| 動作停止 | 12 時間後 | 5 プロジェクトまで無停止可能 |
| 参照数制限 | 1 時間 4000 リクエスト | 無制限 |
| メモリ | 512MB | 2GB |
| ディスク容量 ☆ | 200MB | 400MB |
★ 静的サイトを除く利用者の参照および編集時に消費されます。
4000 時間は 2020年8月 からで、2020年7月 までは 1000 時間 でした。
☆ 次の要領は別領域になっています。
- Node.js モジュール ディスク容量 1GB
- assets ストレージ 512MB
ファイル一覧の assets からアップロードできます。
画像などテキスト編集する必要がないファイルを入れます。
その他、ログインせずにプロジェクトを生成した場合、プロジェクトは 120 時間（＝5 日間）有効です。
Q&A
単なるホームページ（Web サイト）の公開場所として使用できますか？
はい。可能です。HTML・CSS・JavaScript ファイルは Web 上で編集できます。
2020年8月より、この場合は静的サイト（Static Sites）扱いとなり、
動作可能時間 4000 時間の対象外となります。
プロジェクト数に制限はありますか？
無制限で作成可能のようです。
2020年8月より、ユーザー別に動作可能時間 4000 時間の制限があります。
ただし上項目にある通り、静的サイトは対象外ですし、
動的であっても、動作時間が多くなるまでは気にする必要ないでしょう。
日本語を使用できますか？
はい。文字コード 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] へ連絡して下さい。
英語の必要があります。また返信に数日要する場合があります。
独自ドメインはどのように設定するのですか？
エディタ表示左下の Tools - Custom Domain を選択し、
設定するドメイン名を入力して下さい。
するとネームサーバの CNAME レコードで設定する値が表示されます。
このレコードはこの時一度だけの表示で、ページ移動後再度表示する事はできないので、
この表示時点でネームサーバにレコードを設定・反映して下さい。
サブドメインを付けない場合は ANAME・ALIAS で設定するか、
IP アドレスを調べた上で A レコードで設定します。\
How do I add a custom domain, a CNAME, or A record for my custom domain? | Glitch Help Center
Let’s Encrypt の証明書が発行され、SSL も有効になります。
🎈 Let’s Encrypt | ふうせん🎈 Fu-seh.
なお、以前は独自ドメインを設定するために
2 つ以上の Thanks をもらう必要がありましたが、これが必要なくなり、
どのプロジェクトも設定可能になっています。
独自ドメインを削除して、別のプロジェクトに使いたいのですが、設定できません。
独自ドメインを設定していたプロジェクトを削除しても、
その独自ドメインを再度プロジェクトに割り当てる事ができません。
サポート へ独自ドメインを削除するよう依頼して下さい。
英語の必要があります。また返信に数日要する場合があります。
急にサスペンド状態になりました！ 全く使用できません。
何か問題のあるプロジェクトがあって、Glitch によって停止させたようです。
サポート へ連絡を行う事で復旧を行えます。
英語の必要があります。また返信に数日要する場合があります。