オンラむンで Web アプリの開発・共有ができる Glitchグリッチに぀いおたずめおいたす。

単に静的な Web サむトホヌムペヌゞの公開にも䜿甚できたす。
独自ドメむンも蚭定可胜です。
2020幎4月より有料サヌビスがはじたっおいたすが、匕き続き無料でも䜿甚できたす。


目次


公匏サむト


特城

Glitch は次の特城がありたす。

  • Web ブラりザ䞊でファむルの生成・線集ができたす。アップロヌドも可胜です。
  • 完成した Web アプリは サブドメむン.glitch.me で公開でき、共有もできたす。
  • 独自ドメむンを蚭定し、公開する事も可胜です。
  • 耇数人でプロゞェクト共有できたす。線集はリアルタむムで反映されたす。
  • Git リポゞトリからのむンポヌト・゚クスポヌトも可胜です。

Q&A / 独自ドメむンはどのように蚭定するのですか


アカりント䜜成・ログむン手段

ログむンせずにプロゞェクト䜜成もできたすが、5 日間有効です。
たずもに䜿甚したい堎合はアカりントを䜜成しお䞋さい。

次に察応しおいたす。

  • Google
  • GitHub
  • Facebook
  • 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/独自ドメむンはどのように蚭定するのですか

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$"。


アカりントペヌゞ

アカりント郚分をクリックするず、アカりント衚瀺になりたす。

アカりントの枠は線集できたす。

  • 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 分なければスリヌプに入るので、
それより少ない間隔で参照し続ければ良いです。

䟋えば次のサヌビスがありたす。

䞊蚘のサヌビスは 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-SEN
🎈 Caddy | ふうせん🎈 FU-SEN

メモリが 512MB なので、実行ファむルによっおは起動に時間を芁する堎合がありたす。
これで問題が発生する堎合は sleep で起動順を調敎するなどしお䞋さい。

PHP は動きたすか

PHP work on Glitch? | Glitch Support

動く事が確認されおいたす。

🎏 phpmin | Glitch

サむト運営者が最小限で動䜜できるプロゞェクト phpmin を䜜成・公開しおいたす。
すでに存圚するプロゞェクトでもファむルを远加しお䜿甚可胜です。
🎈 PHP の ビルトむン Web サヌバヌ を採甚しおいたすが、
Glitch レベルでサブドメむン名に参照が制限されるため、特別攻撃が倚くなる恐れはありたせん。

🎏 lampdoc | 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 も曎新する事を怜蚎しおいるようです。

コン゜ヌルを操䜜しおファむルを線集したしたが、反映されたせん。

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 を生成し、
ここに衚瀺したくないファむル名を行毎に蚘茉しお䞋さい。
ブラりザの再読み蟌みでファむル䞀芧から非衚瀺になっおいる事を確認できたす。`

゚ディタヌでバむナリヌファむルを参照しようずするず
しばらくレスポンスを倱う堎合があるため、この察応は掚奚されたす。

Google などで怜玢結果に衚瀺されたすか

Google site:glitch.me 怜玢結果

サブドメむン.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

通垞はプロゞェクト内のストレヌゞ容量䞍足によっお発生したす。
䞊のリンクに蚘茉されおいる内容で解決を行っお䞋さい。
この方法で解決できない堎合は サポヌト ぞ連絡しお䞋さい。
英語の必芁がありたす。たた返信に数日芁する堎合がありたす。

独自ドメむンはどのように蚭定するのですか

゚ディタ衚瀺巊䞋の 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 によっお停止させたようです。
サポヌト ぞ連絡を行う事で埩旧を行えたす。
英語の必芁がありたす。たた返信に数日芁する堎合がありたす。