Plunkerでゲームをつくってブログに貼るよ

できあがったゲーム

tiny艦隊clicker！　これのために作った！（保存できません）

言いたいこと

コードのサンプルはPlunkerとか使って動かせる形にしたほうがわかりやすいし楽しい。

まえおき

前のAngularJSのエントリでPlunkerの埋め込みページを使った。
このページではPlunkerでゲームをざっくり書いて、それをこのブログに貼るまでを説明する。ちなみにゲームそのものの作り方とか内容には触れない。どうせクソゲーだね。

類似サービスの比較

PlunkerはHTML・JavaScript・CSSなんかをWebアプリ上で作成して、公開できるサービス。競合としてはJSFiddle、Plunker、CodePenとか。ざっくりと比較するとこんな感じ。

JSFiddle
Githubなんかでもバグ報告するとバグが再現するfiddleでくれとか言われるのを見かける。とにかく一番メジャー。
ただ、コード全部を単純に書くことが出来るわけじゃなくて、メニューからJavaScriptのロード位置を設定したり、読み込みライブラリも別途指定したりという感じで、最初は多少戸惑うかもしれない。慣れれば別にって程度ではある。

CodePen
見た目がかっこいいしさくっと動く。
コード全体を書けないのはJSFiddle譲りだけど、今風にJavaScriptにCoffeeScriptつかったりLiveScriptつかったり、CSSにSassとかScssとかLESSとか使ったり出来る。普通にこれが一番良いな！　と思ったんだけど無料プランだと外部ライブラリが一個しか読めないとか書いてあって使ってない。使い方あるなら是非使いたい。
でも使ってる人はあんまり見たことない。

Plunker
二番手な感じながら、上の二つとは違って、普通のHTMLとかJavaScriptを書く感じで使えるサービス。つまり普通にファイル作ってそこにプログラムを分割できる。ので、そこそこのサイズのプログラムでも作れる。外部ライブラリ云々とかもHTMLから書けるので気にする必要は無い。というか新規作成時に有名なライブラリを一覧にしてくれて、クリックで挿入してくれたりするのが結構嬉しい。
あとエディタのテーマ変えられるのも良い。難点としてはなんか、実際の動作速度なのかデザイン上の問題なのか、なんとなくもっさりした印象があるところ（個人の感想です）。
こっちもPlunkerでくれとか言う人をわりあいと見かける。

というわけで、私はPlunkerを使う。

Plunkerの使い方

というほど詳細な話はしない。だいたいのことは触れば分かる。

Ctrl+Sを押せば保存もできるし、その履歴も残る。

自分が作ったPlunkじゃなければ保存は出来ないけどForkして自分のページに取り込んで編集することができる。左側がファイルとタイトル・概要、右側がプレビュー、外部ライブラリの検索とインポート（別に使わないでも取り込むことは可能）、右側の一番下が設定でエディタの色とハイライトのテーマとか、タブサイズとか、更新の間隔やオンオフを切り替えられる。

作ったものは冒頭の例のようにiframeでブログなどに埋め込み可能だ。

tiny艦隊Clickerについて

好きにForkして改変等してもらってOK。
ただ画像はAmazon S3上に置いてあるので、呼び出し量が増えてお金がかかるようになったりするとこっちの都合で消したり差し替えたりDropboxに置き直したりする可能性がある。そのためフォークしてどこかに公開するなら差し替えたほうが良いと思う（個人で改変したり実験したりする分にはそのまま使ってもらって全然ＯＫです）。
あともしどっかに公開したりするときはこの記事にリンクしてくれると嬉しい。

てなわけで、コードを公開するときにPlunkerとか使って実際に動いていじれるようにしてくれると色々楽しいと思った。