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

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


目次


公式サイト


注意 (2021年5月現在)

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


特徴

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

  • Web ブラウザ上でファイルの生成・編集ができます。アップロードも可能です。
  • 完成した Web アプリは サブドメイン.glitch.me で公開でき、共有もできます。
  • 独自ドメインを設定し、公開する事も可能です。
  • 複数人でプロジェクト共有できます。編集はリアルタイムで反映されます。
  • Git リポジトリからのインポート・エクスポートも可能です。

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


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

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

次に対応しています。

  • Google
  • GitHub
  • Facebook
  • Email Magic Link - メールに認証コードを送り、ログインします。

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


New Project

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

  • glitch-hello-website Web ページ
  • glitch-hellp-node Node.js アプリ
  • glitch-hello-react React アプリ
  • glitch-hello-eleventy Eleventy アプリ
  • Import from GitHub GitHub からクーロン

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/独自ドメインはどのように設定するのですか?

Glitch 特有のファイル

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

README.md

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

glitch.json

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

  • install インストールコマンド
  • start 起動コマンド
  • watch 下記 watch.json の項目を記載可能

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

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

watch.json

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

  • install
    • include install コマンドを実行する対象ファイル ※
  • restart
    • exclude コンテナ再起動対象から外すディレクトリ・ファイル ※
    • include コンテナを再起動する対象ファイル ※
  • throttle 変更から適用するまでの待ち時間(ミリ秒)

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

assets

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

.env

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


アカウントページ

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

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

  • 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 相当)です。
無料と有料の違いは次となっています。

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

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

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

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

  • Node.js モジュール ディスク容量 - 1GB
  • assets ストレージ - 512MB

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

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


Q&A

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

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

2020年8月より、この場合は静的サイト(Static Sites)扱いとなり、
Web 表示は起動・編集時以外動作可能時間 1000 時間の対象外となりました。
一度生成された後は編集されるまで、再度ビルドされる事もなくなります。
バックエンドではダイレクトに Amazon S3 で出力されるようになっています。

2021年4月より package.json に次が含まれている場合
Generated Static Site 扱いとなり、
一度生成した後 12 時間はそのまま維持されるようになりました。
静的サイトジェネレータにおすすめです。

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

ただし、ビルドコマンドは package.json に記載する必要があります。
追加したファイルによって Generated Static Site 扱いが無効化されます。

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

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

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

日本語ドメインで公開できますか?

Punycode(xn-- ではじまる英数)のプロジェクト名にする事で
日本語.glitch.me で公開できる事は確認できています。

🎈🎏 Code - xn--ck8h | Glitch

他言語はもちろん、絵文字も使用可能です。
ページ運営者が実際に 🎈.glitch.me を使用しています。

カスタムドメインも Punycode で設定して使用できると思われますが、未確認です。

ソースで日本語を使用できますか?

はい。文字コード 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: /

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

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

  • 上項目の robots.txt を生成し、Google などの検索結果に出ないようにします。
  • プロジェクトを  Private にして、Glitch 内でプロジェクトが表示されないようにします。
  • プロジェクト名をわかりにくい名称にし、直接参照されにくくします。
  • Web 参照する場合は index などを使用せず、分かりにくいファイル名にして、
    index は仮で何かを表示するようにします。
  • しばらく使用しない場合は Archive💤 で、他の人が参照できないようにします。
    Dashboard の「Archived」から Reactivate✨ でいつでも使用できるようにできます。
  • サーバサイドで処理している場合は、参照時ログを出力するようにします。
    もし他から参照されている可能性を確認した場合はプロジェクト名を変えます。

なお、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 によって停止されたようです。
 サポート へ連絡を行う事で復旧を行えます。
英語の必要があります。また返信に数日要する場合があります。