18012013 javascript Backbone.js

Backbone.jsのソースコードを読んだ

日本語のアノテーションがついているソースコードを読んだので、ちょっとわかりにくかったあたりをメモっておく。

コールバックリスト(107行目)

リスト構造にしてあんのかなと思ったがtailってなんだろうと思ったら最後尾を常に指すようにしているらしい。

while (event = events.shift()) {
  list = calls[event];
  node = list ? list.tail : {};
  node.next = tail = {};
  node.context = context;
  node.callback = callback;
  calls[event] = {tail: tail, next: list ? list.next : node};
}

これは最後尾のobjectのnextとtailが同じ物を指すようにしているのでさくっと最後に空のオブジェクトの参照を保持している。全てのコールバックを実行するのはnextでたどればいいようになっている。Spine.jsは普通に配列使っていたけどリストにするメリットはなんかあるのかなぁ。

実際の動きはこんな感じ。

> node = {}
{}
> node.next = tail = {}
{}
> node.context = "ctx1"
'ctx1'
> node.callback = "callback1"
'callback1'
> calls = {tail: tail, next: node}
{ tail: {},
  next: 
   { next: {},
     context: 'ctx1',
     callback: 'callback1' } }
> list = calls
{ tail: {},
  next: 
   { next: {},
     context: 'ctx1',
     callback: 'callback1' } }
> node = list.tail
{}
> node.next = tail = {}
{}
> node.context = "ctx2"
'ctx2'
> node.callback = "callback2"
'callback2'
> calls = {tail: tail, next: list.next}
{ tail: {},
  next: 
   { next: 
      { next: {},
        context: 'ctx2',
        callback: 'callback2' },
     context: 'ctx1',
     callback: 'callback1' } }

tailとnextは同じ空のオブジェクトを指しているので、常に次の参照を保持したまま大きくなっていく。

void 0 (283行目)

void 0はundefinedになる。

> void 0
undefined

success = option.success (342行目)

if (success) success(model, resp);って何やっているのかなぁと思ったのだが、opttion.successを上書きしてしまうので、元々のoption.successを残しておいてコールバックで呼び出しているだけだった。

var model = this;
var success = options.success;
options.success = function(resp, status, xhr) {
  if (!model.set(model.parse(resp, xhr), options)) return false;
  if (success) success(model, resp);
};
options.error = Backbone.wrapError(options.error, model, options);
return (this.sync || Backbone.sync).call(this, 'read', this, options);

},

element (1190行目)

$elとelが存在する。

this.$el = (element instanceof $) ? element : $(element);
this.el = this.$el[0];

ステートフルJavascriptを読んであればそんなに難しくないので、コードリーディングにちょうどいいかも

ProductName ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理
Alex MacCaw
オライリージャパン / 2940円 ( 2012-06-09 )


17012013 Python javascript Flask

FlaskでRESTful

ちょっと色々あってSpine.jsからBackbone.jsに乗り換えることにした。で、REST-APIが使いたかったので、Flask-RESTfulで書いてみた。

from flask import Flask, request
from flask.ext.restful import Resource, Api

app = Flask(__name__)
api = Api(app)

todos = {}
i = 0

class TodoSimple(Resource):

    def get(self, tid):
        return {"tid": tid, "todo": todos[tid]}

    def put(self):
        global i
        tid = i
        i = i + 1
        todos[tid] = request.form['data']
        return {"tid": tid, "todo": todos[tid]}

    def post(self, tid):
        todos[tid] = request.form['data']
        return {"todo": todos[tid]}

    def delete(self, tid):
        deldata = todos[tid]
        del(todos[tid])
        return {"tid": tid, "todo": deldata}

api.add_resource(TodoSimple, '/', '/<int:tid>')

if __name__ == '__main__':
    app.run(debug=True)

curlで確かめた。

$ curl http://localhost:5000/ -d "data=Remember the Flask" -X PUT
{"tid": 0, "todo": "Remember the Flask"}
$ curl http://localhost:5000/ -d "data=Remember the Python" -X PUT
{"tid": 1, "todo": "Remember the Python"}
$ curl http://localhost:5000/0
{"tid": 0, "todo": "Remember the Flask"}
$ curl http://localhost:5000/0 -d "data=Remember the Sphinx" -X POST
{"todo": "Remember the Sphinx"}
$ curl http://localhost:5000/0
{"tid": 0, "todo": "Remember the Sphinx"}
$ curl http://localhost:5000/0 -X DELETE
{"tid": 0, "todo": "Remember the Sphinx"}
$ curl http://localhost:5000/0
{"status": 500, "message": "Internal Server Error"}

今回はMongoDBを使いたかったので Flask-RESTfulを検討しているのだけど、SQLAlchemyでいいんだったらFlask-RESTlessでいいかもしれない。メソッド自分で書かなくていいし。

16012013 life

Think Simple

先月の広島出張の行きの新幹線のなかで4冊読んだけど、これが一番面白かった。

ProductName Think Simple―アップルを生みだす熱狂的哲学
ケン・シーガル
NHK出版 / 1680円 ( 2012-05-23 )


特に会議の考え方がすごかった。

プロジェクトの成果の質は、そこにかかわる人間の多さに反比例する

というように、意思決定に必要ない人間は徹底的に排除するというのは、会議が4W1Hを決めるために存在すると考えるのであれば合理的だなと思った。報告というのは意思決定をするためのおまけみたいなものだからな。

16012013 家庭菜園

ブロッコリーとカリフラワーを畑とベランダで育てているが成長が全然違った

久しぶりに畑にいって、ブロッコリーとカリフラワーの成長具合を見に行ったけど、全然育ってなかった。

1358145667

しかも茎があかっぽくなってるし。

まったくおなじポット苗からベランダのプランターで育てているのは順調に大きくなっている。たまにハイポネックス与えたりしてるし、日当たりがいいからだろうなぁ。

1358145669

来期はベランダ菜園も併用したほうが楽しめるかもしれないなぁ。

1358145670

畑は来年の契約が終ったら再抽選になるので、当選するかどうかわからんし、ベランダ菜園の比重も増やしておこうっと。

14012013 life

ジグソーパズルで精神が削られた

娘と息子がジグソーパズルをやりたがって買ってきたのだけど、子供たちは予想通り途中で飽きてしまい、同時進行していた僕の苦行にしかならなかった。

こびとづかんシリーズのホトケアカバネ。鳩の餌が大好物らしい。

1358145162

娘のワンピースは難易度低め（顔とか図柄がわかりやすい）。

1358145164

やるならラージピースのほうがいいな。

ProductName こびとづかん 300ラージピース こびとの採集2 300-L338

エンスカイ / 1527円 ( 2012-04-28 )


14012013 music javascript

C言語ではじめる音のプログラミング

ひと通り読んだので、javascriptで何か作ってみたい。

ProductName C言語ではじめる音のプログラミング―サウンドエフェクトの信号処理
青木 直史
オーム社 / 2730円 ( 2008-12 )


13012013 life

macbookをクリーンインストールして娘に贈呈した

MBAに買い換えたらMacbook(2008 early@Lion)を娘にあげる約束をしていた。

今日は時間があったのでクリーンインストールしてから娘に贈ろうとしたら、バッテリーがイカれていたので、安いやつを探して発注しておいた。

ProductName MacBook 13MA25*.699.700.MB*の A1185 対応バッテリー

ロワジャパン / 3880円 ( )


クリーンインストールは簡単で、optionを押しながら起動してディスクユーティリティからHDDのデータを削除した後、再インストールをすればいいだけ。

最近とびだせどうぶつの森を手に入れてドット絵職人の道を歩きはじめたので、Pixenを入れてやったのと、ポケモングローバルリンクのブックマークを追加しておいてやった

あとはScratchとGimpを入れといてやらなきゃいけないなぁ。

13012013 javascript Ti

AlloyでiPhoneのカメラを扱う

カメラで写真を取ってデータベースに格納するアプリを作ってみた。スクロールビューで画像が入れ替わるのがよくわからんがひと通りできた。

alloy camera

スキャフォールドはこことかここを参照。

controllers/index.coffee

カメラ用のボタンを押したら内蔵カメラを起動して、写真をファイルに保存したら、パスをデータベースに保存する。

pts = Alloy.Collections.photo

cameraButton = Ti.UI.createButton
  systemButton: Ti.UI.iPhone.SystemButton.CAMERA

$.win1.rightNavButton = cameraButton

cameraButton.addEventListener 'click', ->
  Ti.Media.showCamera
    success: (event) ->
      now = (new Date).getTime()
      file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,
              String.format("%d-%d", now, Math.floor(Math.random() * 1000)))
      file.write(event.media)
      photo = Alloy.createModel('photo', { path: file.nativePath })
      photo.save()
      Alloy.Collections.photo.add photo
      return
    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

pts.fetch()

$.index.open()

models/photo.js

モデルの定義

exports.definition = {
  config: {
    "columns": {
      "path": "string"
    },
    "adapter": {
      "type": "sql",
      "collection_name": "photo"
    }
  }
}

views/index.xml

コレクションの定義をしておく

<Alloy>
    <Collection src="photo"/>
    <TabGroup>
        <Tab id="tab1" title="写真" icon="dark_book.png">
      <Window id="win1" title="写真">
            <ScrollView id="scroll" dataCollection="photo">
              <Require src="photo"/>
            </ScrollView>
      </Window>
        </Tab>
        <Tab id="tab2">
      <Window id="win2">
      </Window>
        </Tab>
    </TabGroup>
</Alloy>

views/photo.xml

個々の画像

<Alloy>
  <ImageView image="{path}" width="100%">
  </ImageView>
</Alloy>

13012013 javascript coffeescript Ti

AlloyのCollectionが見つからない

黒い本の写真アプリをAlloyで作っている。

app/models/photo.jsに

exports.definition = {
    config: {
        "columns": {
            "path": "text"
        },
        "adapter": {
            "type": "sql",
            "collection_name": "photo"
        }
    }
}

とモデルとコレクションを定義しておいて、index.jsで

cameraButton = Ti.UI.createButton
  systemButton: Ti.UI.iPhone.SystemButton.CAMERA

$.win1.rightNavButton = cameraButton

cameraButton.addEventListener 'click', ->
  Ti.Media.showCamera
    success: (event) ->
      now = (new Date).getTime()
      file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory,
              String.format("%d-%d", now, Math.floor(Math.random() * 1000)))
      file.write(event.media)
      photo = Alloy.createModel('photo', { path: file.nativePath })
      photo.save()
      Alloy.Collections.photo.add photo
      return
    mediaTypes:[Ti.Media.MEDIA_TYPE_PHOTO]

で、写真の撮影は出来てセーブするときにAlloy.Collections.photo.addメソッドがない（というかAlloy.Collections.photoがundefined）というエラーに悩まされている。

130113 追記

index.xmlにCollectionタグを追加したり、なんかごちゃごちゃやってたらうまくいくようになった。エラーの原因は結局わかってない。

11012013 javascript

d3.jsでインタラクティブでよりよい分析体験を

年末、長野に遊びに行くのに本がないと不安なので勢いでd3.jsの電子書籍を購入して読んだ。内容は初歩の初歩でちょっと物足りなかったが、d3の世界に足を踏み入れるきっかけには十分だった。

1357684337

個人的によく使うのはggplot2(R)とSpotfireの2つ。

基本的に画像を描くためだけのライブラリを選択するのはあかんやろと考えているので統計処理とそれを見やすい形で表示するRは便利だと思っている。Spotfireは、デモを見れば分かる通り、フィルタリングがインタラクティブなのと、ビジュアライズ間の値の対応がとれているといったあたりが動的だ。ただし、散布図行列のような一つのウィンドウに複数の点を対応させるようなプロットは描けないのが不満だったりする。フィルタリングは右側のスライダーなんかでまとめて操作するようになっているのでデスクトップでマウスで操作するのが前提のデザインだったりする。

これに対してd3はより上の2つよりもさらにインタラクティブ性が高いビジュアライゼーションが可能となっているのだと思う。タブレットなんかで使えば触れるグラフとなってよりよい分析体験を与えるんだろうなと。

例えば、Rを勉強すれば必ず目にするirisの散布図行列なんかは選択すると対応する部分がハイライトされる。

motion chartもわかりやすい。市場予測とかプロジェクトのプロパティーの変遷なんかをこれで動かせるようにしておくと動きが上手くとらえられてイイかもしれない。

動かせるForce-Diarected Graphとかこれなんかもヨサゲ。

クラスターを円形に表現するレイアウトも素敵

mbostock’s blocks見てて飽きないわ。

職場で導入しようと思ったら必須ブラウザのIE8では動かないということに気づいて、ガッカリ感が半端無かった。