AngularJSなかなか面白い

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

@tomofエライ!

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

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

AngularJSを使ってみようかと思う

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

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

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


PythonScriptでHandlebarsを扱う

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

pythonscript with 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タグでテンプレートが読み込めない問題は困るが。

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

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


Hakuin: PythonのフロントエンドM(VC)フレームワーク

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

hakuin

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

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

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

次回のShizuoka.pyで話す予定

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

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

1369817478

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

PythonScriptのクラスシステムを読んでみた

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をはじめようを快適に写経するためにlivereloadを使って更新時にブラウザをリロードする

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

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

ProductName 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_coffee

CoffeeScriptでSourceMapを使うとデバッグがかなりラクになるかも

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

sourcemap

Chromeの設定

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

sourcemap

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

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

coffee -c -m sample.coffee

まとめ

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

Nodeクックブック

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

1361792675

本書は、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と違ってすぐに手を入れたくなるだろうから、あんまりフルスタックすぎるのもどうなのかなぁと思ったりもする。いじるのが前提でミニマルで拡張しやすいほうがいいんじゃないかなぁと。

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


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

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


PhantomJSでスクレイピングするのがいいのかわるいのか?

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

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

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

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

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

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

Node.jsでSQLiteを使ってみる

Node.jsのときはMongoばかりなので実は使ってないことに気づいた。

sqlite3 = require('sqlite3').verbose()

db = new sqlite3.Database('/tmp/blog.db')

readAllRows = ->
  db.all "SELECT perma,title FROM entries", (err, rows) ->
    rows.forEach (row) -> console.log("#{row.perma}: #{row.title}")
    closeDb()

closeDb = ->
  console.log "closeDb"
  db.close

出力

1355998432: PersistentのMigrationが便利そうだ
1356131853: カタカナのしりとりの圏
1356162470: ScottyはHaskellのSinatraクローン
1356235849: 本棚オーバーフロー
1356333890: virthualenvwrapperをつくった
1356341787: ブロッコリーとカリフラワーを畑とベランダで育てている
1356429473: yesod-tutorialがわかりやすい
1356515387: 24 Days of Hackage
1356521203: snapでさくっと作るウェブサーバー
closeDb