yeoman + bower + grunt

最近流行の環境を作って使うことにした. 情報自体はいっぱいあるのであまりN/S比を悪化させたくない. 自分用メモとありがちなのとちょっと違う部分にふれておく. たとえば

• Bower + Grunt + Yeomanでつくるフロントエンド・ワークフロー (Qiita)
• grunt bower yeoman入門記事
• 以下たくさん

今回の利用目的はcraftyで作っているshogi用のjsの開発. 500行を超えてそろそろいろいろ辛くなってきて, 一方でtestとか書いてもモチベーションを維持できそうな確信が持てたからである.

主にほしいと思ったメリット:

• パッケージのフォーマット
• パッケージングの自動化
• Testのツール
• Testの自動化
• コード圧縮ツール
• あたらしいものさわりたい

といったところ. 想定していなかったけど良かったのはjshintとかかな.

どんな感じでインストールしたか? というと, 環境がScientific Linux(CentOSみたいなもん) なのでsudo yum install npmでまずnpmを入れた. 次にnpmでインストールするのだが, -gは身の毛がよだつようなオプションに感じたので使わないことに. やはり開発環境になにが入っているかはっきりしている方が気分がいい. --saveをいちいち書かないといけないのはどうなのか.

npm i yo yeomanをいれ、 npm i generator-craftyと craftyの開発のテンプレートを生成するgeneratorを入れます. ./node_modules/yo/cli.js craft ./node_modules/yo/cli.js crafty:scene MyScene ./node_modules/yo/cli.js underscore などとたどたどしく入力. これでappの下にbower_componentsとしてcraftyなど依存したモノがインストールされた.

知っている人は「何やってんねん」だろうし, 知らない人は「なんでそんなにタイプするの？面倒じゃない」だろう. npm -gしないのが悪い!という説もあるけど、そこは譲るつもりがない. PATHを通せばよいのです. というわけでpythonのvirtualenvからactivateのスクリプトを持ってきて手を入れました. 部分的に抜き出すとこんな感じ.

deactivate nondestructive

VIRTUAL_ENV="略/shogi-js/node_modules"
export VIRTUAL_ENV
_OLD_VIRTUAL_PATH="$PATH"
PATH="$VIRTUAL_ENV/.bin/:$PATH"
export PATH

# unset PYTHONHOME if set

なにも難しいことはしていません. node_modules/.binにいろいろある、ということです. これでめでたく$ gruntとか実行できるようになりました. 特定のnode_modules/.binしか見ないのですっきりです.

.jshintrcを書く. 最終的に こうなった. .jshintrcはjsonではないらしいです. 仕様がよくわかりません. なにはともあれ、コメントを入れるときに困るので, jsonで書いてjqで処理したモノを.jshintrcとして置いておき, 原本にコメントを一杯入れる方針にしました.
あのさーgeneratorが吐くGruntfile.jsがボコボコなんですけど... ぼこぼこすぎてjshintが途中でさじ投げます. 弱小generatorだと叩く人が少ないからこんなもんなんでしょうか. jshintの勉強だと思って少しずつ直していきたいと思います.

修正後のindex.html 最初は改行コードが統一して無くて吐きそうになった. 弱小テンプレートはよくない. webappだったらあり得ない話でしょう. 無より良いくらいで頑張っていきたいと思います. srcに入っているbower_componentsのpathはもうちょっとすっきりさせる方法が あるらしいのですがまだやってないです. この辺はwebappで作っても同じはず. 構造的にindex.htmlしかなくて, そこでCrafty.initしてsceneを走らせる点では 全く同じでそれ以外作りようがないのでこの辺は迷う余地がなかったです.

ipython notebook

世の中本当に良くなった.

発端はこのtweetを見かけたことから

今更ながらIPython notebookの良さを知った。これは確かにSphinxにインテグレートしたくなるね(去年PyConTWで質問されて答えられなかった

— Takayuki Shimizukawa (@shimizukawa) 2014, 4月 7

pythonでデータを持ってきて加工してGoogle mapsで表示とか. データの加工とかad-hocなやったりやり直しがあったりと, インタラクティブにやりたいことが多い. 一方でグラフとか画像とか表示するので, terminal/editorとviewerの切り替わりが煩わしい. ipython notebookならipythonの使いやすさそのままにブラウザに埋め込み.

ブラウザなので当然JavaScriptを使うことができる. つまりgoogle mapsとかもいけるわけだ. shellなので動的なページ自体を公開できないが, マーカーはhoverで高度を表示する. 頑張ればJavascriptだけでもいけるだろうが少々面倒だと思う.

ローカルのデータをブラウザ上でJavaScriptを用いてレンダリングするとかの作業がはかどりそうです.

この辺を参考にした.

listing componets of Crafty.js and so on.

JavaScriptとhtmlでボードゲームを実装しようと思って, 記事で列挙されていたモノの中からCrafty.jsを選んで読んでいる. いまのところ3Dを使うつもりが無かったのと複雑なモノは明らかにいらないので Crafty.jsを選んだわけだ.

Documentはあるのだが、肝心のComponent一覧がない. なのでソースをあさってみた. grepすればいいという単純なことに気づくのに 時間がかかってしまった. 良くないね.

$ grep '^Crafty.c("' crafty.js 
Crafty.c("2D", {
Crafty.c("Gravity", {
Crafty.c("DOM", {
Crafty.c("DebugCanvas", {
Crafty.c("DebugRectangle", {
Crafty.c("VisibleMBR", {
Crafty.c("DebugPolygon", {
Crafty.c("WiredHitBox", {
Crafty.c("SolidHitBox", {
Crafty.c("Tween", {
Crafty.c("Canvas", {
Crafty.c("Collision", {
Crafty.c("Mouse", {
Crafty.c("Draggable", {
Crafty.c("Keyboard", {
Crafty.c("Multiway", {
Crafty.c("Fourway", {
Crafty.c("Twoway", {
Crafty.c("Color", {
Crafty.c("Tint", {
Crafty.c("Image", {
Crafty.c("HTML", {
Crafty.c("Particles", {
Crafty.c("SpriteAnimation", {
Crafty.c("Sprite", {
Crafty.c("Text", {
Crafty.c("Delay", {
Crafty.c("TestSquare", {
Crafty.c("TestSquareWhite", {
Crafty.c("TestColor", {
Crafty.c("GLSprite", {
Crafty.c("WebGL", {

ほかに斜め読みしたところで目が止まった点を紹介しておく.

L3605 タッチディスプレーにも対応できそう.

        if (e.type === "touchstart") type = "mousedown";
        else if (e.type === "touchmove") type = "mousemove";
        else if (e.type === "touchend") type = "mouseup";
        else if (e.type === "touchcancel") type = "mouseup";
        else if (e.type === "touchleave") type = "mouseup";

L5607 Crafty.e("Hoge, Fuga")ってなんなのさ？への答え.

    e: function () {
        var id = UID(),
            craft;

        entities[id] = null; //register the space
        entities[id] = craft = Crafty(id);

        if (arguments.length > 0) {
            craft.addComponent.apply(craft, arguments);
        }
        craft.setName('Entity #' + id); //set default entity human readable name
        craft.addComponent("obj"); //every entity automatically assumes obj

        Crafty.trigger("NewEntity", {
            id: id
        });

        return craft;

L7293 component間には依存関係があり、それはCrafty側で解決して満たしてくれるのだろう...

    init: function () {
        this.requires('2D, DOM');
    },

私にとって今回の調査, 最大の収穫はDraggableの存在を発見できたことかな. ボードゲーム作るという用途では非常に価値があります. これを実行するとマウスでつかんで動かせる赤い四角が黒い背景上に現れます.

$(document).ready(function() {
        Crafty.init(640, 480);
        Crafty.canvas.init();
        Crafty.background("black");
        var piece = Crafty.e("2D, DOM, Color, Draggable");
        piece.attr({x:0, y:0, w:100, h:100}).color("red");
})