ThimbleからGlitchへ移行する方法と注意点！+ Glitchってどんなサービス？【ざっくりまとめ】

![migration_from_thimble_to_glitch.png](https://qiita-image-store.s3.amazonaws.com/0/253921/e30f34c7-66f3-d85b-455c-601ce9b5efbb.png)

<table><td>
おしながき
<ul>
  <li><a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#%E3%81%95%E3%82%88%E3%81%86%E3%81%AA%E3%82%89thimble%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86thimble">　経緯　</a></li>
  <li><a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#glitch%E3%81%A3%E3%81%A6%E3%81%A9%E3%82%93%E3%81%AA%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AA%E3%81%AE">　Glitchについて　</a></li>
  <li>
    <a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E7%A7%BB%E8%A1%8C%E3%81%99%E3%82%8B%E3%81%AE">　Glitchへの移行手順　</a>
    <ul>
      <li><a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#%E6%B3%A8%E6%84%8F%E7%82%B9">　注意点　</a></li>
      <li><a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#%E6%AD%A3%E3%81%97%E3%81%84%E3%82%84%E3%82%8A%E6%96%B9">　正攻法（TL;DR）　</a></li>
    </ul>
  </li>
  <li><a href="https://qiita.com/liveasnotes/private/f52d357a24c26267abd0#glitch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%8B%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%84">　Glitchの使用例　</a></li>
</ul>
</td></table>

# さようならThimble，ありがとうThimble

それは突然のことでした．
去年の12月からずっと更新が止まっていたThimbleのTwitterアカウントが先日久しぶりに更新されたのですが...

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">We&#39;re moving: Thimble users should migrate their Thimble projects to <a href="https://twitter.com/glitch?ref_src=twsrc%5Etfw">@glitch</a> in the next few months. Get the details: <a href="https://t.co/iyCD1DEsBL">https://t.co/iyCD1DEsBL</a></p>&mdash; Mozilla Thimble (@codewiththimble) <a href="https://twitter.com/codewiththimble/status/1075608013946454016?ref_src=twsrc%5Etfw">December 20, 2018</a></blockquote>

なんとThimbleはサービスを終了することになったそうなのです！

それに伴い，Glitchと連携してThimble上のプロジェクトデータをGlitchへ移行できるようしたので，必要に応じてそうしてください．ということのよう．

しかし，Glitchは日本語表記をサポートしていませんし，Thimble側の説明も全部英語です．私みたいに英語を読むのが苦手な人は，そこで躓いて，スヴァラしいオンラインエディタと出会うチャンスを自ら逃してしまうかもしれません．

そこでそんな方たち向けに，Glitchとは**どのようなサービスなのか**，そして**どのように移行すれば良いのか**について，ここにまとめておきたいと思います．

<table><td>脳内翻訳は雰囲気で行っているので，原文と意味が異なる表記を見つけましたら，ご指摘お願いします
m(_ _)m</td></table>

# Glitchってどんなサービスなの？

## Thimbleと同じところ
- JSFiddleみたいに手軽にデモやWebアプリケーションなどを公開できる
- Remix機能がある（Githubのフォークみたいなもの）
- 無料
- 常時HTTPS

## Thimbleにはなかった機能！
https://glitch.com/about/features/

- Githubと連携できる！
- 共同編集ができる！
- サーバサイド開発できる！（しかも，セッティング不要！）
- 素材を自動でCDNから配信！（つまり速い！）
- 視覚的な更新履歴！（分かりやすい！）
- 作成したWebアプリを他のページに埋め込める！

などなど
```//（Glitchの詳細はまた別の機会にまとめます）```

## そのほかの仕様など
- 公式サポートされているのはNode.jsのみ
    - [Which languages and frameworks are supported?](https://glitch.com/help/languages/)
- しかし，実際にはいろいろ動くらしい
    - @yhatt [Glitch で Node 以外のアプリを書く裏技](https://qiita.com/yhatt/items/8e14ccefbec8bf9fe407)
    - jarcane, [Language support on Glitch: a list](https://support.glitch.com/t/language-support-on-glitch-a-list/5466)
- 機能制限など  
  https://glitch.com/help/restrictions/
    - 匿名ユーザが作ったプロジェクトは**5日**で消える(expire)
    - 使われていないプロジェクトは**5分後**にスリープ  
    - **12時間**以上動いてるプロジェクトも終了される(stopped)  
    アクセスがあればまた動く(wake again)
    - プロジェクトのコンテナの容量(disk space)は**200MB**（Thimbleは5MB）  
    ただし，`/tmp`(tmpディレクトリ)に置かれる分はカウントしない  
        - Node.jsモジュールも同様
        - 512MBの追加的なasset storage space（?）も同様
    - プロジェクトが使えるRAMは**512MB**まで
    - アクセスの上限は**4000**回/時  
    その先は「429 "Too Many Requests"」を返す
    - <table><td>ちなみにスリープの場合は5秒、停止の場合は25秒ほど復帰に時間がかかる  
     @midoribi [24時間完全無料！Glitchでクロスドメイン回避](https://qiita.com/midoribi/items/0cbe0c98249d784a8f69)</td></table>
- Glitch（旧Fog Creek Software）という会社が運営している
    - Trelloというタスク管理ツール（Atlassianが買収）を開発したところ
    - Stack Overflowという技術系質問サイトを運営しているところでもある

Thimbleでは（ほかの多くのエディタと同様に）フロントエンドまでの開発しかできませんでした．
Glitchではサーバサイドも含めて無料で出来るとのことなので大変魅力的です．

まだちゃんと使ったことがないのですが

- 小規模のプロジェクト
- デモ・プロトタイプ

などには特に向いていると思います

# どうやって移行するの？

とりあえず，公式のお知らせを見てみましょう

- [A Note About Thimble](https://medium.com/read-write-participate/a-note-about-thimble-b8ba0a51b8fd) | Mozilla via Medium
- [Thimble Migration Intro](https://glitch.com/help/thimble-migration-intro/) | Glitch Help Center
- [Welcoming Thimble to Glitch](https://medium.com/glitch/welcoming-thimble-to-glitch-f2097394d6c2) | Glitch via Medium

うーん，英語ばっかり（苦笑）
慣れてないと読む気にならないですよね

全部を翻訳していくのも面倒ですし，私がどうしたのか，スクショを見せつつ適当に翻訳しながら順番に説明していきます

Thimbleにアクセスすると，まずこんなモーダルウィンドウが出てきます．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/53454f60-eb07-70a9-3b7c-a14cc3e99329.png)
さっそく移行を勧めているようですが，右上のボタンでカードを閉じてしまっても問題ありません

以下のように移行用のボタンが各プロジェクト毎に出てくるからです（笑）
<img src="https://qiita-image-store.s3.amazonaws.com/0/253921/7f2c568b-9d8e-a46a-5e5f-c371340c2596.png" width="49%"> <img src="https://qiita-image-store.s3.amazonaws.com/0/253921/537dbb62-e34f-4a13-c4e7-83a892a1a0b3.png" width="49%">

## 注意点

さて，各プロジェクトについているミント色のボタンを押すと，このようにモーダルウィンドウが表示されます．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/ea6dcb0d-c826-be83-1090-169a54e4ac7f.png)
何かいっぱい**注意書き**が書いてありますね

さすがにこれはちゃんと読んだ方が良さそうです
1つ1つ要約を載せます

1. Glitchのプロジェクトは全部自動でPublicになるけどOK？(編集権限は別)
2. Glitch側に**ログインしないと移行したデータ消える**から注意！（cf. 5日ルール）
3. 他の場所に張ったThimbleの公開プロジェクトのリンクはGlitchのやつに直しとこう
4. Glitchは英語版しかないよ
5. Glitchへの**移行ができるのは1回のみ**

特に2と5はクリティカルな問題ですね！（>。<）
確認しといてよかった...

念のため，やらかしたときにどうなるかも見ておきましょう

Glitchへのログインをしないまま，Thimbleでダミー用のプロジェクトを作成してみます
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/5c82caee-9c71-cca7-2660-20c20ed7a2ba.png)
上部のミント色のボタンから移行を始めると...
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/1d3b108c-a7d4-9525-69d0-801c7e780ea8.png)
おや？さっきと何となくモーダルの雰囲気が違う？

選択肢を見てください．さっきは2つ．今回は1つだけです
<img src="https://qiita-image-store.s3.amazonaws.com/0/253921/ea6dcb0d-c826-be83-1090-169a54e4ac7f.png" width="49%"> <img src="https://qiita-image-store.s3.amazonaws.com/0/253921/1d3b108c-a7d4-9525-69d0-801c7e780ea8.png" width="49%">
これは，Glitchへログインしているかどうかではなく，Thimble側で既にプロジェクトを公開しているかどうかで変わってきます．

既に公開リンクを発行しているプロジェクトでは，公開リンクで公開されているもの(Published)か，未公開の最新版(Unpublished, 編集中のもの)か，どちらをGlitchに移すのかを選べるのです．
もちろん，どちらを選択しても，Glitch上では自動で公開されます．
今回のダミープロジェクトの場合，今さっき作ったばかりなので，選択肢は1つ(未公開の最新版のみ)でした．

ミントのボタンをクリックすると，再度あの注意書きが出てくるので，確認した上で「Click here to finish exporting」を押下してください．
その下のプライバシーポリシーを読むかどうかは自己判断でお願いします

少し待つとGlitch側の画面が表示されました．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/fadde249-0f50-ef34-a0d6-b2044430650c.png)
Glitchにログインしない状態で移行作業を行ったので，無事Anonymous(匿名)で作成されてしまいました
きっと**5日後には消えてなくなっている**はず...

さらに！
上部にあったバナーからも**移行用のボタンが消えています**...
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253921/7364baf6-6556-06ad-db68-03bdf8767501.png)
もし失敗してしまった場合，手動で一つひとつコピペしていくことに...

え？面倒？
実は**プロジェクトが消えるまでのあいだならまだ間に合います**．
先ほどのGlitchの画面を見てください．Anonymousのアイコンの下に```Sign In```/```Sign up```があるではありませんか！ログインorアカウント作成すれば，プロジェクトが消えずに済みます．
<table><td><img src="https://qiita-image-store.s3.amazonaws.com/0/253921/3327813a-40d6-cb33-0e2f-0776e7c4d2c4.png">
```（さっき移行させた謎プロジェクト．ちゃんと登録し直されている）```</td></table>


## 正しいやり方

似たようなスクリーンショットはもう見たくないかもしれないので，リストにしました

1. Glitchのアカウントを作成 → **予めログインしておく**
2. Thimbleトップページのミント色ボタン or Your Projectsから，プロジェクト一覧を表示
3. 移行したいプロジェクトについているボタンから移行を始める
4. **公開済み** or **未公開最新版**のどちらを移行するか選ぶ → 移行

これを，移行させたいプロジェクト毎にやっていきます
※移行ボタンは各プロジェクトにつき1回しか使えないので注意

案外簡単ですね！

とはいえ手作業で1つ1つやるとなると，沢山のプロジェクトを抱えるThimblerの方々は大変でしょう．

残念ながら，一括してすべてのプロジェクトを移行するオプションは私の観測範囲内では見つかりませんでした．もし知っている方，見つけた方，スクリプトを作ってくれた方がいれば，コメント欄からよろしくお願いいたします．

ちなみに，移行した後のGlitch側のプロジェクトには，Thmble側のものと関係なく，ランダムな名前が付与されるようです．
<table><td><img src="https://qiita-image-store.s3.amazonaws.com/0/253921/cb53922a-06a6-fc3e-2630-09b7da4775ba.png">
```（単語を2つ繋げて名前を自動生成する仕様らしい）```</td></table>

プロジェクト名はこんなふうに，後から自分で直しておきましょう
![20181223_.gif](https://qiita-image-store.s3.amazonaws.com/0/253921/25582cae-54b1-a9c9-fa23-ca161e58da87.gif)
（説明書きも編集可能です）


# Glitchを使って何かしてみたい！

以下の記事が参考になるかもしれません

- [[Node.js] 無料で簡単にウェブアプリを公開できるサービス「Glitch」を使ってみた！](https://qiita.com/yonedaco/items/569bcc442872a1f9a03d) | @yonedaco via Qiita
- [プログラミングを知らない人でもOK！カスタム Slack アプリを開発する方法](https://slackhq.com/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%92%E7%9F%A5%E3%82%89%E3%81%AA%E3%81%84%E4%BA%BA%E3%81%A7%E3%82%82ok%EF%BC%81%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0-slack-%E3%82%A2) | Slack Blog
- [Glitchで無料でNode.jsのWebアプリをオンライン運用してみた](http://blog.ariafloat.com/article/glitch/) | Ariafloat Blog ‐ 一人旅好きITエンジニア
- [Glitch × GitHub で簡単にアプリを公開](https://medium.com/@samyamashita/glitch-github-%E3%81%A7%E7%B0%A1%E5%8D%98%E3%81%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E5%85%AC%E9%96%8B-b75af068ec46) | Sam Yamashita via Medium

---

Cloud9がAmazonに買収され，AWS版では新規アカウント作成にクレジットカードが必要になってしまいました．
Githubからオンプレ版Cloud9を降ろして使う（※1）ほどの知識はないので，Glitchのようなサーバレス系はとっても嬉しいですね！ぜひ使っていきましょう！

# おまけ

※1

> 会員登録したくない！でもCloud9を使いたい！という場合、**Cloud9はオープンソースとして公開されている**ので、gitをダウンロードしてインストールシェルを実行すれば自分の環境内でCloud9のUIを使った開発が可能になります。
[「cloud9の登録がうまくいかない」ベストアンサー](https://teratail.com/questions/104723#reply-161329) | teratail

cf.

<table><td>Cloud9を<strong>ローカル</strong>で動かしたい人向け</td></table>
- [Running Cloud9 Desktop](https://cloud9-sdk.readme.io/docs/running-cloud9-desktop) | Cloud9 Blog
- [Cloud9を自サーバにインストールしてどこでもコーディング](https://kijtra.com/article/cloud9-install/) | きじとら

<table><td>Cloud9を<strong>Herokuに</strong>置いて動かしたい人向け</td></table>
- [オンラインIDEを無料で作ろう](https://qiita.com/Utree/items/658b76f17e5511d3ccc4) by @Utree