fujlog

Check Catalan number

// code
catalan :: Integer -> Integer
catalan n
	| n > 0 = sum [(catalan i) * (catalan (n - 1 - i)) | i <- [0 .. (n - 1)]]
	| otherwise = 1

Simply :)

Introduction

巷では、とりわけ日本では終わってる感の強い RIA (Rich Internet Application) の中で、WPF (Silverlight) や AIR よりもさらにマイナーかつ注目度の低い JavaFX を皆さんご存知でしょうか？
じつは私も先週知りました。
JavaFX 1.0 から 2.0 への方針変更でますます人気ないみたいですね。

そんなの何がいいんだよ HTML5 だろ今更興味ないよと言われそうですが、ちょっとはいいトコもあるんだョ。
・Declarative Syntax
・WebKit使える
・JVMで動く
って感じで、触らないのも勿体無い気がしてきませんか？
そしてJVMだからScalaからもいけちゃうんです。そこで率先して(?)試してみました。

こちらの手順+αなので、詳しくはこちらを参照して下さい。
DeveloperGettingStarted

動作環境

私が試したのは以下の環境です。
なんと、あろうことか JavaFX 2.0 は Windows しか正式リリースされておらず、 Mac はインストーラもない Beta で Linux はまだないというアーリーアダプターに冷たい状況となっています。

Windows XP
JDK 1.7 (1.6の方が面倒がないかも、、、)
Scala 2.9.1
JavaFX 2.0
IntelliJ IDEA
Mercurial

インストール

まず、上記一式をインストールします。
次に、scalafx を落としてきます。

scalafx

Downloads を開いても何もないよ、なんて言わないでください。ソースをチェックアウトしましょう。

hg clone https://code.google.com/p/scalafx/

そして、環境変数を通します。

JAVA_HOME
SCALA_HOME
JAVAFX_HOME

反映するため、一旦ログインし直します。 (IntelliJ関係のどこかにそう書いてあった。)

IntelliJのセットアップ

さて、ここからは IntelliJ です。
こちらを参考にしつつ IntelliJ Scala plugin をインストールします。
Getting Started with IntelliJ IDEA Scala Plugin

IntelliJ の Preference Plugins から scala で検索してダウンロードできます。

この時点で、scalafx のプロジェクトを開けばいいはずなんですが、もしかしたらコンパイラが見つからなくて怒られるかもしれません。その場合は、適宜設定を変えてみたり、空の scala のプロジェクトを作ってみるなどしてください。

ビルドとデモの実行

設定できたら、 All Tests の右の三角を押してテストがパスすることを確認します。
私の環境では、JFXApp.scala でコンパイルエラーが出たので、以下のように修正しました。

// before
javafx.application.Application.launch(classOf[AppHelper], args:_*)

を

// after
javafx.application.Application.launch(classOf[AppHelper], args)

配列を展開しなくてよくなったんでしょうか？コンパイラの言うがままに変更しただけですが、動いたので深く考えないことにします。
そこまで行ったら、任意のデモを開いて、クラスの辺りを右クリックして Run main を選ぶとデモが実行されます。

まとめ

結局、なぜ ScalaFX かという話ですが、デモを見れば分かる通り yield でアニメーションすれば楽だよね〜、というのが一つ。アルゴリズムの可視化なんていうのも簡単にできそうです。あとは、宣言的にUIを作れるよね〜、など。

JavaFX とか別に興味なくても、Scala でサラッと書いたら絵が出てアニメーションするのっていい感じじゃないですか。
Scalaに興味があったら是非お試しあれ。

昨日、遅ればせながら Heroku を使ってみました。
それはおいおい書くとして、deploy するには git push する必要があって、そのコマンドがふと気になったのでメモ。

ちなみに、私は git はたまに使う程度です。

Heroku に push するコマンド

Heroku に push するコマンドは、
公式サイトの説明
にもあるように、以下のコマンドを使う。

git push heroku master

確かにうまくいきます。
でも、 heroku と master って誰が決めたんでしょうか。プロジェクトが複数あってもそれぞれ heroku で push できるのはどういうこと ?

これは Git の References と Remotes というものでした。

Pro Git - Pro Git 9.3 Git Internals Git References

本来、 Git のリポジトリは URL とハッシュ値で管理しているところを、『ローカルコピーごとに』エイリアスが付けられているんだなぁ、というお話でした。

jQuery Mobile 1.0 RC1 を使って Twitter ビューワー作ってみた。

jqmtwi

Trends や入力キーワードの検索結果を5秒ごとに更新しながら表示します。トップページの上の検索ボックスにキーワードを入力するか、Trends を選択して下さい。
細かいところはテキトーな作りです。

以下技術的な話。

jQuery Mobile を使ったページから、別サーバー (Twitter) の API を呼んでページをレンダリングする。楽勝だろうと思って作ってみたら、意外とここが jQuery Mobile の弱点っぽい感じがしたので説明したい。

まず、jQuery Mobile には page という概念があって、一つの DOM に複数の page を抱えることができる。
それぞれの page には、hash が割り当てられ、hash を指定した a タグのタップか、changePage によって遷移する。
上記ビューワーでも、ページ遷移で url バーの # 以降が変わることが分かると思う。

page から page への遷移は、DOM に遷移先の page が読み込まれていれば url の hash を変更してすぐにトランジションする。読み込まれていなかったら、 Ajax リクエストで page を取得する。（この間、ローディングアイコンが出る）
一枚の HTML ファイルに複数の page がある構成を、 Multi-page という。

さて、ここで二つ問題があって、

何かの Web API が返す JSON を元にページをレンダリングしたい

かつ、

Multi-page 構成にしたい

場合はどうすればいいだろう？
REST API で取得した一覧を元にレンダリングして、リストアイテムの ID を元に別の REST API を呼ぶというのは、一般的によくあるケースだ。
しかし、Multi-page では hash でページ遷移するのに、パラメータはどうすればいいのだろう？
この問題について、本家ドキュメントには hash からパラメータ部分を取り出して preventDefault する例がある。

jQuery Mobile and Dynamic Page Generation

この説明の中で出てくる、

.../index.html#item.html?id=1898432

というのは uri として valid なの？というあたりが気になる。後述するが実はこれはブラウザの history に入らないため問題ない。
本家フォーラムでも議論になっているものの、sessionStorage や localStorage を使うと言う話まで出ている。

Passing Parameters Between Pages

どうせHTML1枚の中で閉じた話だし、ここを真面目にやっても、という感じもするので、シンプルに hidden の input に値をセットしてから遷移するという手もありそうだ。
(追記 10/22) すいませんやっぱこれだめでした。page enhancement が終わっていないとselectorで選択できない。 <input type="search" name="foo" /> を $(input[name="foo"]) とやっても取れないから。

長々と書いてあるが、公式ドキュメントの例でキーになるのは、

- toPage がまだ文字列の時点でトラップする
- パラメータを含む hash から、除去した hash に書き換える
- 直接 $.page() を呼んで page enhancement をやってしまう
- page を移動する前にコンテンツ生成を完了する

というあたりだ。
特に、パラメータを含む hash はイベントの中で解釈されて URL バーには入らない。
サンプルでは別の関数でコンテンツ生成して changePage しているが、個人的に $.widget が大好きなのでこちらがオススメ。 $.widget についてはそのうち書く。

ソースコードは github 参照。
fpt/jqmtwi

触ってみると気付くと思うが、トランジションのアニメーションの後に内容が表示されるので少し違和感が残る。

いずれにせよ、やっぱりurlにIDが入った方がいいと思うし、個人的にこんなことするくらいなら Multi-page を使わないで複数ページにして、サーバーサイドで API を呼んだ方が jQuery Mobile の正しい使い方だろう。
jQuery Mobile で HTML5 な Web アプリと言っても、HTML 1枚で JS で動けば OK なんてことはなくて、むしろ逆に hash や DOM キャッシュを考慮したサイト設計が必要になってくるのではないだろうか。

つぶやきデスク

もよろしく

参考
URI schema

Javascript (ECMAScript) には変なところがたくさんある。
ここでは、クロージャーやプロトタイプチェーンといった大きいところではなくてもっと細かい変なところをまとめたい。
以前、自分がパーザーや制御文を実装していたためその辺りが多いかも。

ECMA 262 5th

Completion value

Completion value というのは、

//
100; // line. 1
200; // line. 2

とあった時に、line. 1を実行するとCompletion valueが100になり、line. 2を実行すると200になる、というものである。
まあ、 Perl の return を省略した場合の戻り値ようなものだ。

基本的に参照する方法もないし、言語実装の内部的なものなのでどうでもいいようなものだが、実は eval が返す値のことだったりする。
eval("return 10;"); がエラーになるのは、evalは文字列をjsファイルのトップレベルとして評価するためだが、 eval("10;"); で 10 が帰るのはプログラムを実行した最後のCompletion valueを返しているのだ。

厄介なのが、DOMのイベントのIE時代にトラディショナルなコードで、
<button onclick="false;" />
など書いて動いていた（今ではjQueryのbind, live, delegateを使う）が、これは、

// ex.
function (event) {
    false;
}

と書いてあるのと同じことで、この関数の戻り値はundefinedでありfalseではない。
結局、コードがソースコードのどういう構文要素なのかを考えないと誤りに気付きにくい。

参考:
6.1.6.1 Event handlers

Type conversion

Javascriptでは特に型を考慮する必要はないが、内部的には上記の型がある。

// Clearly, 'a' contains a string primitive value.
var a = "string";

しかし、演算子や組み込み関数の中には内部的な型変換を呼ぶものがあるため、definePropertyなどしてあるとカオスなことができる。

今度書く

Regular Expression Literals

人間が見ても割り算やコメントと区別が付きづらいが、それはパーザーにとっても同じだったりする。

// ex.
/=/==/=/;

の実行結果は false だ。これは == の左右の正規表現オブジェクトの比較となり、同一のオブジェクトではないためこのようになる。

しかし、以下の2つはどうだろうか？

// ex.
/=//==/=/; // case 1
/=//=/=/; // case 2

これらをFirefox と Chormeで試すと、Firefoxでは両方同じエラーになるが、Chromeではそれぞれ異なる。

# result (Firefox)
>> Exception: ReferenceError: invalid assignment left-hand side
>> Exception: ReferenceError: invalid assignment left-hand side

# result (Chrome)
>> Exception: SyntaxError: Unexpected token =
>> Exception: ReferenceError: Invalid left-hand side in assignment

Firefox は、 /=//= までパーズして、 /= の左辺がオブジェクトだから代入できないということで ReferenceError を出している。一方、Chrome は /=//= までパーズして、次の@=@が受理できずに SyntaxError となっている。

どちらが正しいということはないが、case 1 の方は JS の構文として誤りなので、異なるエラーが出た方がいい気もする。パーザーのアルゴリズムには LL, LALR などあるが、その違いにより異なっているのだろう。

Automatic Semicolon Insertion

今度書く

Labelled Statements

JSには Labelled Statement というものがある。
これがどういうものかというと、

// example
foo:
for(;;) {
    for(;;) {
        print("hello.");
        break foo;
    }
    print("ouch!");
}

で、内側のbreakで外のループも抜けるというものだ。これも perl から借りてきたような感じがする。 C プログラマには違和感があるし、特に使っているコードを見た覚えがない。いろいろあると思うが、関数を分けてreturnするとか、例外を投げることが多いような気がする。

実は continue でも使える。ちょっと見てみよう。

// example
foo:
for(var i = 0; i < 3; i++) {
    for(;;) {
        print("hello.");
        continue foo;
    }
    print("ouch!");
}

実行すると、

bc.
hello.
hello.
hello.

となる。これくらいだったらまあ分かると思うが、もっと大きいループでこれをやられると悪夢ではないだろうか。

ところで、ちょっとした間違いで LabelledStatement になってしまって混乱することもある。一番ありそうなのは、

// example
{ a: 1 }

というJSONを括弧で囲まないまま eval して戻り値が 1 になって首をかしげることではないかと思う。
この場合、外側の { } はコードブロックを表し a というラベルが付いた 1 というステートメントが実行され、その Completion Value である 1 が返る。

Object Literal

IE6 では、 ObjectLiteral の最後にカンマがあるとパーズエラーになってしまう。
特に jQuery では options に Object Literal を渡すことが多いので気をつけたほうが良い。
こういうのはツールでチェックするべきだろう。

// example
{
    foo: 100,
    bar: 200, // <- Causes parse error in IE6
}

DOM

Event handler

スコープに上の要素が入る。

今度書く

The window object

今度書く

その他

XBMCを使っていたAspire Revo H3610のHDDが飛んだ (x_x)
結局、元々使っていたWindows 7 Media Center に戻ってしまったが、これはこれで悪くない。

さて、ここらで Media Center (MC) なソフトについて比較してみたい。
特に、代表的なXBMC と Windows 7 Media Center について。

• XBMC
  • Pros.
    - 非力なマシンでも動く
    - 機能とアドオンが豊富
    - 無料
    - 割とかっこいい
  • Cons.
    - プラットフォームによってアドオンが使えたり使えなかったりする (radikoとか)
    - 日本語のScraperがないのでライブラリ構築が困難
    - プラットフォームの制約でビデオアクセラレーションがそれなり

• Windows 7 Media Center
  • Pros.
    - Mikinho さんの Mount Image などを使えば簡単にメディアライブラリが構築できる
    - Windows ドライバの豊富なビデオアクセラレーションでDVDもきれい
    - 地デジも見られる
  • Cons.
    - ハードウェアの要求が高い
    - カスタマイズが困難
    - マイナーである
    - Mount Image がたまに再生に失敗することがある

• FrontRow
  - これで何とかできるとか。
  DVD Assist

• Apple TV2
  - 母艦となるPCでiTunesが動いていないとライブラリが参照できない。(DAAP機能付きのNASのライブラリは見られない)
  - こういうのもある。
  Apple TV 2でフルHD動画の再生を可能にするARM版XBMC登場

よくXBMCは無料で使えて簡単に動いていろいろできてすごい、みたいな話があるけれど、使い込む上で重要なのは手持ちメディアのライブラリ化ではないだろうか。
もちろん、日本でもHuluのようにサービスが始まってBoxeeのような商業的に成立するMCが登場するのが一番うれしいのだが。

一方で、ホームサーバーとして機能するソフトもある。

• PlayOn
• PS3 Media Server
• Transcode 360

これらは PC にソフトをインストールしてトランスコードなどのサービスを動かすことで、 LAN につながったデバイスでコンテンツを再生するというものだ。
再生する側では特別なセットアップが不要というメリットがあるものの、動画のシークが困難であるとか、トランスコードにPCのスペックを要求するという根本的な問題がある。
技術的には一定の説得力があるので、将来的にある程度残っていくかもしれない。

- 自分用メモ

PC Media Center を使う上で NAS を選ぶポイント

- Java が動く
- HDD 4 台以上

iつみきで使っているライブラリのプロジェクトファイルはCMakeにこんな感じオプションを指定して作っています。
BULLET_PHYSICS.xcodeprojを開いて、LinearMath, BulletCollision, BulletDynamics あたりをビルドします。
できたライブラリは src/BulletDynamics/Debug などから適当にコピーして使います。

#
$ cmake -DBUILD_SHARED_LIBS=OFF -DFRAMEWORK=OFF \
    -DCMAKE_INSTALL_PREFIX=/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS4.3.sdk/System/Library/Frameworks \
    -DCMAKE_INSTALL_NAME_DIR=/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.0.sdk/System/Library/Frameworks \
    -DCMAKE_C_COMPILER=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/llvm-gcc-4.2 \
    -DCMAKE_CXX_COMPILER=/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/llvm-g++-4.2 \
    -DCMAKE_OSX_SYSROOT=/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS5.0.sdk/ \
    -DCMAKE_OSX_ARCHITECTURES='armv6;armv7' \
    -DCMAKE_BUILD_TYPE=RelWithDebugInfo \
    -DCMAKE_CROSSCOMPILING=ON \
    -DBUILD_DEMOS=OFF \
    -DBUILD_EXTRAS=OFF \
    -DBUILD_UNIT_TESTS=OFF \
    -DUSE_GLUT=OFF \
    -G Xcode

iOS5 でもビルドできることは確認しました。
なんかいらなさげなオプションも一応つけたままにしています。ちなみにiPadだとarmv6のライブラリだと警告が出ます。

なるべくなら手動で操作するところを減らしたいので Framework にしたいところですが、 iOS では shared library が使えないため、今のところ static library を使っています。
iOSのバージョンが変わった場合が気になる人は Base SDK を Latest iOS に設定する良いかもしれません。

関連情報
- http://stackoverflow.com/questions/794137/how-to-set-up-cmake-to-build-a-library-for-the-iphone
- http://stackoverflow.com/questions/822404/how-to-set-up-cmake-to-build-an-app-for-the-iphone
- http://discussions.apple.com/thread.jspa?threadID=1549084
- http://www.cmake.org/pipermail/cmake/2009-October/032661.html

Mac OSX用
$ rm CMakeCache.txt $ cmake -DBUILD_SHARED_LIBS=ON -DFRAMEWORK=ON \ -DCMAKE_INSTALL_PREFIX=/Library/Frameworks \ -DCMAKE_INSTALL_NAME_DIR=/Library/Frameworks \ -DCMAKE_OSX_ARCHITECTURES='i386;x86_64' \ -DCMAKE_BUILD_TYPE=RelWithDebugInfo \ -G "Unix Makefiles" $ make $ make install chmod install_manifest.txt
- BulletDynamics
- BulletCollision
- LinearMath
をビルドする

XBMCのScraperを作ろうとして、まあ動かなくもないものはできたものの、どうもすっきりしない感じでした。

XBMCの主要な機能の一つにメディアライブラリがありますが、利用するにはScraperと呼ばれるメディア情報を取得するアドオンの設定が必要です。
Scraperは、メディアの情報を何らかのWeb検索を通じて取得します。
機能すれば便利そうなのですが、今のところ日本語の情報を取得するアドオンがないようです。

それなら作ってみようかと思い、以下のWikiページを参考に作り始めました。

Scrapers - XBMC

How-to:Writing Media info scrapers

XBMCのScraperは、正規表現パターンとキャプチャでWebサイトを解析します。
Scraper自体はXMLファイル一つというDSLのような構成になっています。
以下画像直リンク。

とりあえずシンプルに作ってみたものの、どうも動かない。動作確認をするためのScrapというツールでは動くのに。
仕方がないのでリポジトリを見ると、Scrapは既に削除されてobsoleteになった様子。
他のScraperを見ると、CreateSearchUrl が返す文字列はXMLに変更されたようで、 url タグで囲むとXBMC本体でも動きました。
また、配置も xbmc/system/scrapers/videoではなく、addonに移ってaddon.xmlが必要になったようです。

さて、とりあえず動いたものの文字化けしていてタイトルが読めない状況だったので、xml の encoding を指定してみるもうまくいかず。
再びリポジトリの xbmc/addon/Scrapers.cpp を見ると、ASCIIとUTF-8しか考慮してなさそうなコードだったので、一旦諦めて保留することに。
また、別のサイト向けのを作れないか見ていると、文字コードはもんだいないものの製品タイトルの文字列が character entity reference になっていて挫折。

あ、でもそのままXMLに入れれば動いたのかもしれない。
いずれにしても、ファイル名でWeb検索してDBに登録するという方法はあまり良くない気がする。普通は素直に NFO ファイル作った方がいいか。

いろいろと難しいものです。

追記

それにしても、正規表現でscrapingするというのはもはや古いアイデアだけど、かといってBeautifulSoupやその他であらゆるサイトに対応できるかというとそれも難しそうだ。
本来は、xbmcのようなメディアセンター自体でこういうことをするべきでなく、外部のWeb APIを参照するだけの方がシステム的にはいい気がする。でもWebサイトの利用規約の関係もあるので私は作りたくないな。。。

正規表現で文字クラスを扱えて便利な XRegExp ですが、IE8 で jQuery と組み合わせて使うと問題が起きました。

jQuery の $.animate で、パラメータの value が数値の場合に XRegExp.exec の中で例外が発生しました。
だいたいこんな感じ。

// example
$("#block").animate({ 
    scrollTop: 100 // <- Bad! must be "100px"
}, 1500 );

value を文字列にして解決。
型がないのも良し悪しですね。というか標準の RegExp を置き換えないオプションが XRegExp に欲しいです。

メモ

http://blog.programmableweb.com/2010/08/30/twitter-api-adds-retweet-count-and-more/

自分でやってみたところ、retweet_count は確認できたけど、retweetedはよく分からなかった。

Twitter公式のドキュメントに書かれていないオプションが必要になることもある。

include_my_retweet

http://code.google.com/p/twitter-api/issues/detail?id=1891

これがないと、自分のタイムラインに表示されるフォロワーのツイートをリツイートしたかどうか分からない。

apiチェッカー

https://apigee.com/console/twitter

エディットボックス左側のカギアイコンを押すとOAuthのメニューが出てくる。
# それになかなか気付かず5分くらい首を傾げてしまった。
左のリストにない API でも、URL で入力すれば呼ぶことができる。