エイプリルフールお疲れ様でした！（今更）
そんなわけで、今年の僕の4月バカはパズドラ風ゲームでした。
【 サガドル - 探して&どRuごんず （2013年エイプリルフール） ― はじむどっとこむ 】
今回はその舞台裏と、開発に使ったライブラリのArctic.jsについて
メモメモしていきたいと思います。すごい鳥小屋.txtっぽい！
要件定義（ではない
- パズドラのパロディゲーにする
- パッと見で誰もがネタを理解できそうなくらい旬！！
- 去年はドリランドのパロディサイトだったので今度は遊べるものがいいな
- ブラウザゲーにする
- エイプリルフールのためにわざわざアプリを落とす人はいないでしょう……
- というかアウアウすぎて、こんなのマーケット出せない
- iOS対応したいのでFlashはお休み
- とりあえず遊べる
- 別にパーティ作ったりとかはできなくてもいいや
- あくまでエイプリルフールネタなので……
こんな感じ。
これを実現するためにどーっすっかなー、ふっふーん。
ブラウザ上でFlashじゃない方法で動かすためには、
こう「エッチテーエムエル、ファイッヴ！」*1的な方法をとることになります。
有名どころのenchant.jsとかを使えばいいんだと思いますが、
enchant.jsって元々DOMを操作して云々っていうのがあったので、
今はcanvas使うようになってるけど、
ちょっぴり中途半端な感じになってたりでちょっと……
というか、僕が個人的にそんな好きじゃないだけですが！＞＜；
ぐりぐり自前でcanvas操作やってもいいんですが、
それを始めちゃうと時間がかかって間に合わないので、
DeNAが公開しているArctic.jsを使ってみることにしました。初めてのArctic.js。
Arctic.jsにした理由はCanvas使うライブラリで、パッと見た感じわかりやすそう、
そして何より「前、炎上してたのが面白かったから」です（
【参考】モバゲーのDeNAのクローズドなオープンソースが話題に - Togetter
……ただ、Arctic.jsとか割とマジで「誰が使ってんの？」みたいな感じがしますが。
全然更新されてないし、修正のPullRequest放置されてるし……
DeNAの人も使ってないんだろうなぁ。
disりまくってたら4/14くらいに更新されてました！ごめんなさい！
まずArctic.jsを魔改造する（
互換性とか糞くらえなので魔改造して使いやすく僕好みにします！
画面を中央に寄せる
enchant.jsにしてもArctic.jsにしてもそうなんですけど、
画面サイズに合わせて縦横比崩さずに最大化してくれるのはいいんですが、
なぜかゲーム画面を左上ぴったりに持っていこうとするんですよね。
そうすると画面の下部分 or 右部分に空白ができることに。
下部分はまだしも、右に空白開くのは気持ち悪すぎる……！
なので、画面を中央に寄せるように変更。
画面サイズとcanvasのサイズをもとにposition: absolute;で中央に設置するように。
ついでにタッチ位置の座標取得するやつ、なんか式が変な気がするので修正。
もしかしたら昔のAndroidバージョンとかのために
こういう式になっているのかもしれないけど、
古いAndroidの入った端末に人権はないので大丈夫です（
加算合成増やす
別に加算合成に限った話じゃないですが。
エフェクトとか表示するのにはやっぱり加算合成あると便利です！かっこいい！
canvasのcontextのglobalCompositeOperationを設定してあげれば、
加算合成とか減算合成とかいろいろできるので、設定できるように変更。
getter / setter の他に adder（？）を増やす
「hoge.setHoge(hoge.getHoge() + 1)」とか面倒すぎる……！
というわけで「hoge.addHoge(1);」みたいなやつを増やすことに。
細かい謎挙動の修正
Androidの標準ブラウザでアクセスしたら途中で画面が縮んだり、
画面回転させたらぶっ壊れたりしたので、その辺りを修正。
修正っていうか、画面回転認識させないようにしただけですが！
現実から目を背けるのも時には必要だよね……Chrome使え（
魔改造はこの辺りかな？
よくよく考えたら公式のほうに送られてるPullRequestとかも
取り込んでおけばよかったですね。時間に追われて頭回ってなかった。
いじったやつは、サガドルで使ったやつを直接見てください。
packするの忘れてて、そのまま上がってました＞＜；
【 http://hazimu.com/special/sagadru/js/arctic.js 】
「Ruたん」で文字列検索しよう！コメント入れ忘れ多くて意味ないけど！
CoffeeScriptでガリガリ
JavaScriptをそのまま書くのは大変なのでCoffeeScriptを使いました。
が、別にCoffeeScriptを使ったところで、
結局はJavaScript的な困る部分もいろいろあったりしたので、
（例：このthisどこやねん！）
あんまり嬉しくなかったかもしれません。直接書くよりははるかにマシだけど。
次やるときはTypeScriptとかみたいに型付きのやつでやりたいなー。
何より入力補間が欲しい。FlashDevelopが恋しい。
iOSのWebアプリモード的なもの（※間に合わなかった）
ここから先は4/1に間に合わなくて、
エイプリルフール終わってからぶっこみましたｗ
iOSはWebページをホーム画面に設置する機能があるんですよね。
サガドルをiOSで動かしてみたらAndroid信者のRuたんが
まじでビビるくらい、ちょーなめらかに動いていたので、
これをうまいこと使ってあげて、アプリみたいにしたいですね！
<meta name="apple-mobile-web-app-capable" content="yes">
これを指定してあげればホームに追加した際に、
Safariのタブとは別アプリのように、しかもフルスクリーンで表示できるそうです。
ついでにHTML5にはmanifestっていう機能があって、
htmlとかjsとか画像とかを
ローカルにキャッシュしてオフラインでも動くようにすることができるので、
その設定も入れてあげることにします。
僕が持ってるのはiPhoneじゃなくてiPod touchなので
オフラインで動かないと不便ですし。
やった！ RuたんiOSアプリつくった！！（
おわりに
HTML5でゲームとかどうなん？っていう感じが僕の中にはあったんですが、
今回ちゃんと作ってみて「あ、これは思った以上にイケますわ！」と思いました！
僕の思っていた以上になめらかに動いてたし。
ただ、Arctic.jsの将来はちょっと心配なので、
普通の人はenchant.jsを使うことをおすすめします！！１（
あと友人から「俺のGalaxyで動かんぞｺﾞﾙｧ」という
大変ありがたいご指摘を受けているので
きちんとしたデバッグ環境を作った方がいいかな、と思いました。
Android上でのテストがロクにできてなくてひどい……
リモートWebインスペクタとか使えるようにしたほうがいいなぁ、絶対。
そんなことより何より、もっと早く準備し始めたかったです！（
＼(^o^)／余裕ぶっかました結果がコレだよ！！！！！１１
*1:HTML5をバカにする意図はありません。HTML5なら何でもできるよヒャッハーみたいなのはバカにしてます（
