オンラインで Web アプリの開発・共有ができる Glitch（グリッチ）についてまとめています。

単に静的な Web サイト（ホームページ）の公開にも使用できます。
独自ドメインも設定可能です。
2020年4月より有料サービスがはじまっていますが、引き続き無料でも使用できます。

---

目次

---

公式サイト

• 🎏 Glitch - 公式サイト
•  DEV
•  Status - 稼働状況
•  Support - サポート掲示板
•  Help Center - ヘルプ

---

注意 (2021年5月現在)

Glitch プロジェクトで提供されている OS が古くなっています。
OS の期限切れを迎えていますが、Glitch はまだ OS を更新していないため、
OS が更新されるまでパッケージは更新されず、セキュリティ的な懸念が生じます。
OS パッケージを用いず直接ダウンロードしている場合は懸念が少なく、
HTML などのみにして STATIC SITE で公開している場合は
公開方法が変化するので（Amazon S3 で直接公開）この懸念はなくなると思われます。

---

特徴

Glitch は次の特徴があります。

 Q&A / 独自ドメインはどのように設定するのですか？

---

アカウント作成・ログイン手段

ログインせずにプロジェクト作成もできますが、5 日間有効です。
まともに使用したい場合はアカウントを作成して下さい。

次に対応しています。

認証のためのパスワード発行・所有はしません。

---

New Project

ログイン後右上の New Project、
ファイル編集画面では左上のアカウント名から New Project を選択します。
次の選択肢になりますので、目的に近いプロジェクトを選びます。
2021年4月より項目が変わりました。

Git リポジトリは https のアドレスを入れます。
プライベートリポジトリの場合は
https://ユーザー:パスワード@gitプロバイダ.com/～/リポジトリ名.git で可能です。

glitch.new を参照すると、Node.js アプリの新規プロジェクトで作成されます。
素早く新規作成したい時、アドレスの直接入力が可能なので便利です。

---

ファイル編集画面

左に構成ファイルの一覧、右に選択されているファイルのソースが出ています。
2020年3月より、左下の表示に変更が入り、機能が追加されました。

---

Glitch 特有のファイル

Glitch 特有のファイルは次が存在します。

README.md

説明ファイル。プロジェクトページを開いた時、存在していると表示されます。
GitHub などでも使われていて、インポートした場合はそのまま表示できます。

glitch.json

起動アプリを入れ、任意の起動が可能です。項目は省略できます。

複数起動する場合は && 指定したり、bash 実行ファイル.sh を使えます。

環境変数 PORT（ポート 3000 または 8080）に listen させる事で、
アプリを実行させるようにできます。

watch.json

ファイルの参照範囲、適用待ち時間を設定します。

※ 正規表現。\ は \\ 指定。ファイル requirements.txt は "^requirements\\.txt$"。

assets

ファイル一覧にある assets は画像などを入れる場所です。
ここにアップロードした場合、CDN エッジサーバで公開されます。
（厳密には AWS CloudFront。日本では東京と大阪にサーバがあります）
ただし、アップロードされたファイルは URL が分かる限り、誰でも参照でき、
このファイルは物理的に削除ができなくなります。 ご注意下さい。

.env

データベースのアカウント（ユーザー名・パスワード）など、
公開したくない内容を環境変数として保存できます。
これは Remix した場合でもコピーの対象になりません。

---

アカウントページ

アカウント部分をクリックすると、アカウント表示になります。

アカウントの枠は編集できます。

Recent Projects にプロジェクトが表示されています。
その枠右上  より次が選択できます。

---

プロジェクトページ

アカウント画面などから Edit Project または プロジェクト名 を選ぶと、
そのプロジェクトの詳細画面にできます。

この時プロジェクトが表示されている枠内は次の動作になります。

更に下へスクロールし、表示画面の下に移動すると、右下に次のボタンがあります。

---

無料・有料の違い

🎏 Unlock more magic | Glitch
 What technical restrictions are in place? | Glitch Help Center

2020年4月より有料サービスが開始されました。月 $10 または年 $96（月 $8 相当）です。
無料と有料の違いは次となっています。

プロジェクト毎	無料	有料
プロジェクト時間 ★	1000 時間	5 プロジェクトまで対象外
スリープ	5 分	5 プロジェクトまで無停止可能
動作停止	12 時間後	5 プロジェクトまで無停止可能
参照数制限	1 時間 4000 リクエスト	無制限
ソースの非公開 ◆	不可能	可能
メモリ	512MB	2GB
ディスク容量 ☆	200MB	400MB

★ 静的サイトを除く利用者の参照および編集時に消費されます。

◆ 有料サービス開始前は無料でも非公開に設定可能でした。
設定されていたプロジェクトは非公開のまま維持されています。
再度公開に変更する事はできますが、その後は無料の場合非公開にできなくなります。

☆ 次の要領は別領域になっています。

ファイル一覧の assets からアップロードできます。
画像などテキスト編集する必要がないファイルを入れます。
この assets にファイルをアップロードすると、CDN が有効になり、
日本では東京・大阪のサーバから配信されるので、表示がはやくなります。

その他、ログインせずにプロジェクトを生成した場合、
プロジェクトは 120 時間（＝5 日間）有効です。

---

Q&A

単なるホームページ（Web サイト）の公開場所として使用できますか？

はい。可能です。HTML・CSS・JavaScript ファイルは Web 上で編集できます。

2020年8月より、この場合は静的サイト（Static Sites）扱いとなり、
Web 表示は起動時以外動作可能時間 1000 時間の対象外となります。

Glitch では静的サイトジェネータの動作も可能ですが、
公開向けの場合はビルドした HTML などのみ入れた方が良い事になります。
ビルド環境は別にプロジェクトを用意するなどします。

単に静的ファイルのみで公開され、Web 上から編集できる Web サービスであれば、
独自ドメインでなくても良ければ 🎈 Neocities が
HTML なども含めて CDN から配信するようになり、レスポンスが良くなります。

2021年4月より package.json に次が含まれている場合も
静的サイト（Static Sites）扱いとなり、消費しなくなりました。

"glitch": {
    "projectType": "generated_static"
}

プロジェクト数に制限はありますか？

無制限で作成可能のようです。

ユーザー別に動作可能時間 1000 時間の制限がありますが、
上項目にある通り、静的サイトの Web 参照は対象外となり、
動的であっても、動作時間が多くなるまでは気にする必要ないでしょう。

日本語を使用できますか？

はい。文字コード UTF-8 で日本語も編集・表示できます。

Web 上での基本的な表示やサポートは完全に英語です。

サーバはどこにありますか？

Glitch はシステム全体で Amazon Web Services（AWS）を使用しています。

Glitch の会社はアメリカにあるので、アメリカ内のリージョンと思われます。
サブドメイン.glitch.me および独自ドメインでの使用は
動的ファイルのサーバ動作をメインとしているため、CDN が効いていませんが、
静的ファイルのみをアップロードして Static Site 動作になった場合でも
これは変化がないようで、レスポンスはそれなりに遅延があります。

編集画面でファイル一覧にある assets からファイルをアップロードした時は
cdn.glitch.com のドメインで割り当てますが、
この場合は CloudFront を用いた CDN エッジサーバにキャッシュされます。
CloudFront は日本の場合、東京と大阪にサーバがあります。
なので、こちらのレスポンスは比較的素早い表示を実現します。

スリープ・停止とは何ですか？

5 分参照がない場合のスリープにより、その後参照された場合は、再起動します。
この再起動は数秒要します。Web 参照時はその間専用の表示があります。

継続して何かサーバ動作していた場合、12 時間で強制的にシャットダウンされます。

スリープしないようにする事はできますか？

2020年4月より有料サービスがはじまり、
公式にスリープ・停止しない状態にする事ができるようになっています。
また、無料アカウントでも静的ファイルではすぐにスリープ状態となりません。

外部のサーバの crun や 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-SEN
🎈 Caddy | ふうせん🎈 FU-SEN

メモリが 512MB なので、実行ファイルによっては起動に時間を要する場合があります。
これで問題が発生する場合は sleep で起動順を調整するなどして下さい。

いくつかの言語は OS パッケージを使用していますが、
OS が古くなり、期限切れを迎えているので、ご注意下さい。

PHP は動きますか？

Glitch で動作可能な PHP は OS パッケージが採用されています。
しかし採用している OS が更新されずに期限切れを迎えています。
ここではセキュリティ的な懸念から PHP 関連の記載を一時的に削除しています。
OS の更新により、セキュリティの懸念が解消したところで再掲載する予定です。

コンソールを操作してファイルを編集しましたが、反映されません。

 Files I created or edited via the console or with code aren’t appearing or updating in the editor. Why!? | Glitch Help Center

ファイル編集環境とコンソールは別領域で、リアルタイムには反映されません。
コンソールから refresh と入力する事で同期します。

ファイルを変更して、起動するファイルを変更しましたが、サーバの再起動はどうするのですか？

コンソールから refresh と入力するとサーバの再起動が可能です。
もちろん kill を用いてプロセスを削除する事も可能です。

バイナリーファイルをエディタで表示されないようにする事はできますか？

実行ファイルなどバイナリーファイルを直接置いている場合、
ファイル .gitignore を生成し、
ここに表示したくないファイル名を行毎に記載して下さい。
ブラウザの再読み込みでファイル一覧から非表示になっている事を確認できます。`

エディターでバイナリーファイルを参照しようとすると
しばらくレスポンスを失う場合があるため、この対応は推奨されます。

Remix ボタンはどこで作成できますか？

そのためのプロジェクトが公開されています。

🎏 Remix on Glitch Button

次のコードで生成していますので、直接入れても構いません。
Markdown:

[![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/remix/プロジェクト名)

HTML:

<a href="https://glitch.com/edit/#!/remix/プロジェクト名"><img src="https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg" alt="Remix on Glitch" /></a>

また、GitHub プロジェクトを Glitch へインポートするボタンもあります。

🎏 Import from GitHub Button

Markdown:

[![Remix on Glitch](https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg)](https://glitch.com/edit/#!/import/github/name/project)

HTML:

<a href="https://glitch.com/edit/#!/import/github/name/project"><img src="https://cdn.glitch.com/2703baf2-b643-4da7-ab91-7ee2a2d00b5b%2Fremix-button.svg" alt="Remix on Glitch" /></a>

Google などで検索結果に表示されますか？

 Google site:glitch.me 検索結果

サブドメイン.glitch.me はデフォルトでは検索結果にでてきます。
検索結果に表示したくなくない場合や参照を減らしたい場合は
次を入れた robots.txt ファイルを生成して下さい。

User-agent: *
Disallow: /

プロジェクトを見せないようにできますか？

いくつかの対応で分かりにくくする事ができます。 公開したくない個人的な使用に使えます。

なお、Web 動作だけではなく、ターミナルを起動してシェル操作できるので、
その点でもメリットを感じるかもしれません。

assets 内のファイルは URL が分かると参照できます。

オンラインエディタを使わずに使用・公開できますか？

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

通常はプロジェクト内のストレージ容量不足によって発生します。
上のリンクに記載されている内容で解決を行って下さい。
この方法で解決できない場合は  サポート へ連絡して下さい。
英語の必要があります。また返信に数日要する場合があります。

独自ドメインはどのように設定するのですか？

エディタ表示左下の 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-SEN

なお、以前は独自ドメインを設定するために
2 つ以上の Thanks をもらう必要がありましたが、これが必要なくなり、
どのプロジェクトも設定可能になっています。

独自ドメインを削除して、別のプロジェクトに使いたいのですが、設定できません。

独自ドメインを設定していたプロジェクトを削除しても、
その独自ドメインを再度プロジェクトに割り当てる事ができません。

 サポート へ独自ドメインを削除するよう依頼して下さい。
英語の必要があります。また返信に数日要する場合があります。

急にサスペンド状態になりました！ 全く使用できません。

何か問題のあるプロジェクトがあったり、規約違反の操作を多数行って
Glitch によって停止されたようです。
 サポート へ連絡を行う事で復旧を行えます。
英語の必要があります。また返信に数日要する場合があります。