javascript / Drkcore

Interactive Data Visualization for the Web

Tue, 05 Jun 2018 01:22:29 +0919

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

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

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

AngularJSなかなか面白い

Sat, 14 Jun 2014 17:36:31 +0919

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

@tomofエライ！

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

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

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

Wed, 11 Jun 2014 20:36:51 +0919

来週末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でHandlebarsを扱う

Fri, 31 May 2013 20:07:57 +0919

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 )

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

Wed, 29 May 2013 18:17:49 +0919

ぼくも日本酒にちなんだフレームワークをつくりたいなーと思っていたので、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のセッションが超気になるんだけど、吉原祇園祭と被っているのでかなり参加は厳しい。

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

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

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

Sun, 19 May 2013 06:33:06 +0919

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を使って更新時にブラウザをリロードする

Tue, 02 Apr 2013 20:24:31 +0919

日本語の入門書は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)

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

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

Fri, 08 Mar 2013 05:34:50 +0919

つい先日にリリースされた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クックブック

Tue, 26 Feb 2013 05:52:54 +0919

一応クックブックという体裁をとっているんだけど、ストーリー性があるし、細かい点はミニレシピという形で記述されているので、ノードでサーバー立ててプロダクションまでもっていくというような内容になっている。もちろんクックブックなので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でスクレイピングするのがいいのかわるいのか？

Sun, 17 Feb 2013 17:37:09 +0919

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

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

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

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

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

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