5年前の本の書評のドラフト。

なんも書いてないけどこの本は良かった。

Interactive Data Visualization for the Web
Scott Murray
Oreilly & Associates Inc / 2997円 ( 2013-04-02 )

AngularJSのチュートリアルをやって、日本語リファレンスを読んでいた。

@tomofエライ！

あとはtodoサンプルコードでも読んだら、なんか作ってみる。

Learn to build an application using Angular.jsというのもあって結構力入れてるなぁと思った。

来週末vue.jsのもくもく会が静岡であるのねと、vue.jsの調べ物をしていたはずがいつの間にかAngularJSのサンプルコードを読んだりしていたｗ

また、仕事の関係でちょっとFullCalendarを扱う案件を手がけようとしていて、立派なスパゲッティ職人になろうか悩んでいた(jQuery的に)となっていたという事情もあり、おもむろに「FullCalendar AngularJS」でググったらUI Calendarを発見したので、明日からスパゲッティ職の内定は辞退してAngular使いを目指すことになりました。

AngularJSアプリケーション開発ガイド
Brad Green
オライリージャパン / 2592円 ( 2014-04-18 )

キユーピー あえるパスタソース6種 [カルボナーラ1袋(2食入)、たらこ1袋(2食入)、ミートソース フォン・ド・ヴォー1袋(2食入)、バジル1袋(2食入)、ツナマヨ1袋(2食入)、きのこの醤油バター1袋(2食入)]

キユーピー / 1459円 ( 2013-07-20 )

PythonScriptでhtmlテンプレートを使いたいなぁと思ったのでHandlebarsを使ってみた。

index.jade

!!! 5
html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width')
    title Handlebars demo
    link(rel='stylesheet', href='stylesheets/app.css')
    script(src='javascripts/vendor/custom.modernizr.js')
  body
    .row
      .large-12
        h2 PythonScript with Handlebars
        hr
    script(src='javascripts/jquery.js')
    script(src='javascripts/handlebars.js')
    script(src='javascripts/pythonscript.js')
    script(src='javascripts/jquery.py.js')
    script(src='javascripts/app.py.js')
    script(src='javascripts/foundation/foundation.js')
    script
      $(document).foundation();

app.py

テンプレートをhtmlのscriptから取れなかったのでベタ書きした。あと",'の扱いが0.7.4でおかしくなってる。

source = "<h3>{{title}}</h3><div>{{body}}</div>"

template =  JS("Handlebars.compile(source)")
title = "ひげひげひげ"
body = "セクシーコマンドー外伝"
data = JS("template({title:title,body:body})")
J("body .row ").append(data)

ちょっと試した感じではラップすればjavascriptを意識せずに使えそう。scriptタグでテンプレートが読み込めない問題は困るが。

セクシーコマンド外伝 すごいよ!!マサルさん(1) [DVD]

バンダイビジュアル / 3243円 ( 2001-01-25 )

ぼくも日本酒にちなんだフレームワークをつくりたいなーと思っていたので、Zen of PythonScriptでSpineインスパイアなHakuinというPythonのフロントエンドM(VC)フレームワークを作って遊んでいる(韻を踏むかは個人的に超重要)。

• hakuintodo

ちなみに0.6.1では動くけれど0.7.4では動かないので、これから対応していく。今のとこ

• クラスメソッドがうまくうごかない
• シングルトンの作り方がわからないのでグローバル
• e.preventdefault()が使えない
• importのやり方がわからないので、とりあえずベタ書き

というあたりの制約があるため、ほぼ100%トイプログラミングなのだけどtodoくらいなら動く。それから上記1番目の理由でSpineインスパイアなのにCollectionモデルを取り入れている。

次回のShizuoka.pyで話す予定

以下の日本語注釈付きソースは参考になった。backbone.jsのほうは次回の「TalkNote × Frontrend（フロントレンド）」の演者の人が管理されているようなので、興味があれば参加するといいと思う。個人的にはSASS/Compassのセッションが超気になるんだけど、吉原祇園祭と被っているのでかなり参加は厳しい。

• Spineの注釈付きソースコード
• Backbone.jsの注釈付きソースコード

そして白隠正宗ではなく臥龍梅を飲み始めた。この純米吟醸まじ美味い。緑のラベルの超辛口ってのもあったんだけど、酒屋の奥さんのすすめの通り赤いラベルが正解だな。(さらに奥さん情報によると袋しぼりがメチャウマだったらしいんだけど、売り切れたらしい。)

そのうちこんや銘酒館で日本酒を飲みながら、日本酒フレームワークハッカソンでもやりたい。

PythonScriptではクラスがどういうjavascriptにトランスレートされるのか気になったので。

class C():
    def __init__(self, x, y):
        self.x = x
        self.y = y

c1 = C(1, 2)
c2 = C(3, 4)

print c1.x, c2.y

これは以下のjavascriptに変換される

C = {};
parents = create_array();
var C____init__ = function(args, kwargs) {
    var signature = {"kwargs": {}, "args": create_array("self", "x", "y")};
    var arguments = get_arguments(signature, args, kwargs);
    var self = arguments["self"];
    var x = arguments["x"];
    var y = arguments["y"];
    set_attribute(self, "x", x);
    set_attribute(self, "y", y);
}

C.__init__ = C____init__;
C = create_class("C", parents, C);
c1 = get_attribute(C, "__call__")(create_array(1, 2), {});
c2 = get_attribute(C, "__call__")(create_array(3, 4), {});
console.log(get_attribute(c1, "x"), get_attribute(c2, "y"));

create_array, get_arguments, create_class, get_attribute, set_attributeはpythonscript.jsのほうに定義されている。create_classは次のように定義されている

var create_class = function(class_name, parents, attrs) {
    if(attrs.__metaclass__) {
        var metaclass;
        metaclass = attrs.__metaclass__;
        attrs.__metaclass__ = undefined;
        return metaclass([class_name, parents, attrs]);
    }
    else {

    }

    var klass;
    klass = {};
    klass.bases = parents;
    klass.__name__ = class_name;
    klass.__dict__ = attrs;
    var __call__ = function() {
        var object;
        object = {};
        object.__class__ = klass;
        object.__dict__ = {};
        var init;
        init = get_attribute(object, "__init__");
        if(init) {
            init.apply(undefined, arguments);
        }
        else {

        }

        return object;
    }

    klass.__call__ = __call__;
    return klass;
}

日本語の入門書はD3をはじめようがあるけど、ほんのさわりだけなので、日本語の簡単なチュートリアルが読みたいというヒト以外には積極的に読む必要性を感じないかな。ただ、あのイディオム(selectAll().data().enter()ってやつ)とメソッドチェインに慣れてないのだったら読んだほうがいいのかなぁ。日本語のほうがわかりやすいしなぁ。

ちゃんと読むつもりならInteractive Data Visualization for the Webのほうが良いと思う(まだ書評かいてないけど)。

Interactive Data Visualization for the Web
Scott Murray
Oreilly & Associates Inc / 2997円 ( 2013-04-02 )

javascriptを書き写すだけなのはつまらなかったのでcoffeescriptで書いたのと、coffee --watchだとコンパイル時にブラウザリロードしないのでlivereloadを使った。

Guardfileはこんな感じ。更新されたファイル名をfuncに渡せないのでハードコードしている。

#!/usr/bin/env python

from livereload.task import Task
import logging

def coffee():
    from subprocess import Popen, PIPE
    argv = ["/Users/kzfm/.nvm/v0.8.10/bin/coffee", "-c", "-m", "js/mean.coffee"]
    p = Popen(argv, stdin=PIPE, stdout=PIPE, stderr=PIPE)
    stdout, stderr = p.communicate()
    if stderr:
        logging.error(stderr)

Task.add('js/mean.coffee', coffee)

あとは編集してセーブすると自動コンパイルして、ブラウザもリロードしてくれる。

• LiveReload(Python)で更新検知させてCompassでコンパイル、ついでにブラウザもリロードする
• CoffeeScriptでSourceMapを使うとデバッグがかなりラクになるかも
• CoffeeLintでflymakeするように設定した

つい先日にリリースされたcoffeescript-1.6.1からSourceMapがサポートされたので早速使っているけど、デベロッパーツールでcoffeescriptのソース上にエラーが表示されるのでかなり便利。

Chromeの設定

デベロッパーツールのギアアイコンをクリックすると設定画面が出るので「Enable souce maps」にチェックを入れる。

coffeescriptでmapファイルを出力する

コンパイルするときに-mオプションを渡すと、.jsファイルの他に.mapが作成されるのでsoucemap対応のブラウザで読めばいい。

coffee -c -m sample.coffee

まとめ

これからraphael使う予定なのでcoffeescriptの開発環境が改善されるのは素敵だ。

CoffeeScriptファーストガイド モダンJavaScriptによるアプリケーション開発 (NEXTーONE)
飯塚 直
翔泳社 / 2940円 ( 2012-05-26 )

一応クックブックという体裁をとっているんだけど、ストーリー性があるし、細かい点はミニレシピという形で記述されているので、ノードでサーバー立ててプロダクションまでもっていくというような内容になっている。もちろんクックブックなのでNodeの基礎的な事柄は知っているという前提。

本書は、Node.jsを使っての簡単なWebサーバの構築にはじまり、Webアプリケーションやコマンドラインアプリケーションの構築、そして自作Nodeモジュールの開発までをスムーズに学習できるように構成しています。 MySQLやMongoDB、CouchDB、Redisといった各種データベースとのインタフェイスや、WebSocketの組み込み方、SMTPなどのプロトコルとのインタフェイスといった基本的な事項を学びます。 さらにデータストリームの処理方法やセキュリティを考慮した実装、そして開発したアプリケーションを本番環境で動作させるまでのさまざまなレシピを掲載しています。

Expressでウェブサービスを作りたいのであれば買いだと思う。Node.jsだけでウェブサーバーを実装する方法(1,2章)は丁寧に解説されていてわかり易かったし、4章のデータベース接続もMySQL,MongoDB,Couch,Redisの説明がひと通りされているし、5章ではwebsocketも軽く触れられいてる（今は開発の止まっているnowjsも）。

やはり6,7章のExpressとセキュリティの話題が一番おもしろくて、どういったあたりに気を使えばいいのかが丁寧に解説されていて良かった。

いまメインで使っているFlaskでなぜかセッションが入れ替わるという問題を解決できなくて悩んでいるので、次にサービス作るんだったら　Expressでもいいかなぁと思い始めている。YesodとかSnapという選択肢もあるんだけど、Stylus+nibとかSass+Compassみたいなフレームワーク使いたいので悩んでいる。

LESSというよりbootstrapは乗っかっている時にはスイスイ進むんだけど流儀から外れることをやろうとすると途端に牙をむく感じだしなぁ。CSSとかHTMLのフレームワークはRoRみたいなWAFと違ってすぐに手を入れたくなるだろうから、あんまりフルスタックすぎるのもどうなのかなぁと思ったりもする。いじるのが前提でミニマルで拡張しやすいほうがいいんじゃないかなぁと。

Nodeクックブック
David Mark Clements
オライリージャパン / 3570円 ( 2013-02-23 )

ちなみに9章のテストの話はいまいちだった。今読んでいるtestable javascriptのほうが楽しい。

Testable JavaScript
Mark Ethan Trostler
Oreilly & Associates Inc / 2640円 ( 2013-01-31 )

PhantomJSを触ってみたけど、スクレイピングというか自動化するならWWW::Mechanize::Firefoxのが使いやすいなぁと思った。

CasperJSを使うのがよさそうなんだけど、node.jsから使えないしなぁ。

例えばデータベースからurlリストを引っ張ってきて次々にアクセスしたいといった用途の場合、PhantomJSだったらphantomjs-nodeを使うらしいんだけどCasperJSはそういうことができるんだろうか？

と思って調べたら、SpookyJSというものを見つけたんだが、PhantomJSが1.8からwebdriverをサポートするようになったからそっち使えみたいな感じになっている。

結局pythonでselenium使うのが正解なのか？

ていうかseleniumでいいじゃんみたいな気分になっている。