for what it's worth

しばらく放置していたMilkyTrackerのNaClポートを少し更新してローカルディスクからファイルを読み込めるようにしてみました。

機能としては単純なものなのですが、これがなかなか一筋縄には行かず、ハマりにハマりまくったのでポイントを整理して晒しておきます。(JavaScriptは簡単のためにjQueryベースで書きます)

PostMessageは64kbが上限

まずアプローチとしてNaClは基本的にJavaScriptに許される範囲内のインターフェースしか持たないため、ローカルのファイルにアクセスするためにはHTML5で定義されているFileReaderを使うことが考えられます。JavaScriptで読み込んだらそれをBase64形式でNaClにPostMessageしてやればデータの受け渡しができます。コードはこんな感じです。

$("#file").change(function(ev) {
  var reader = new FileReader();
  reader.onloadend = function(e) {
    e.target.result.match(/.*base64,(.*)$/);
    module.postMessage("import:" + ev.target.files[0].name + "," + RegExp.$1);
  };
  reader.readAsDataURL(ev.target.files[0]);
};

しかし、ドキュメントに書かれていなかったので実装してから分かったのですが、PostMessageに渡すことの出来るデータサイズには64kbの制限が有り、これを越えるデータを渡すとエラーが発生します。MilkyTrackerの場合は読み込むデータソースが64kbに収まらない事のほうが多いと思いますので、その場合はデータを64kb単位で細切れにして送らなければいけません。いけてません。

createObjectURLで取得したアドレスをNaClから直接ダウンロード

FileReaderによる64kb分割送信大作戦は、そもそもバイナリーデータをbase64エンコードしている時点でデータサイズが膨らんでいる上に、分割してオーバーヘッドが発生しまくるという点であまり格好良くありません。そこでもっとスマートにできる方法を見つけました。

window.URL.createObjectURL を使います。このAPIにFileオブジェクトやBlobオブジェクトを渡すと、”blob:(URIエンコードされた一時的なローカルファイルを指すURI)”というようなURIが取得できます。このURIは、例えば画像ファイルのURIを取得してJavaScriptでimgタグのsrcにセットするだけで画像が表示されたりするもので、ブラウザ内ではサーバー上のファイルを指すURIと同じように使うことが出来ます。このURIをNaClのpp::URLLoaderで(NaCl内に)ダウンロードします。コードはこんな感じです。(Chromeではwindow.webkitURL.createObjectURLになる)

$("#file").change(function(ev) {
  var url = window.webkitURL.createObjectURL(ev.target.files[0]);
  module.postMessage("import_url:" + ev.target.files[0].name + "," + url);
};

NaCl側のコードは長いので割愛させて頂きますが、NaCl-Quakeのソースが参考になります。これはサーバー上からゲームアセットをダウンロードするためにURLLoaderを使用していますが、同じ手法でcreateObjectURLによって生成されたURIを使用してローカルファイルをダウンロード出来ます。

これでバイナリデータを直接NaCl内に取り込むことが出きるようになりました。PostMessageはコマンドとURIを受け渡すためだけに使われます。恐らく現時点ではこれが一番よい方法かとおもいます。

JavaScriptからファイル選択ボックスを表示したい

あと一点だけ触れておきたいのが「ファイルを開く」ダイアログボックスをどうやって表示するかです。実はこれに一番ハマりました。結論を先に言っておくと、NaClには現状そのようなインターフェースはありませんし、NaClからJavaScriptのメッセージングを駆使してJavaScriptに表示させることも出来ませんでした。

HTML/JavaScriptのレイヤではファイル選択ボックスはHTMLタグで<input type=”file”/>で定義されたボタンをユーザーがクリックした時に表示されます。これはかなり厳しい制約で、例えばJavaScriptから$(“#file”).click();と呼び出してユーザーのクリックを偽装しようとしてもダメです。このファイル選択ボックスはJavaScriptがローカルディスクのファイルにアクセスする唯一の方法ですので、自由にスクリプトからユーザーに表示出来るとセキュリティ的によろしくないということでしょう。

しかし、このブラウザ標準のボタンは装飾が地味で、必ずしもページのデザインに馴染まないということで、いろいろな裏技が開発されています。

1. invisibleなinput要素を見せたいデザインのdiv要素に重ねる
2. $(“#file”).show().focus().click().hide();

この二つ目に注目です。先ほどJavaScriptからinputオブジェクトのclickイベントを偽装することは出来ないと書きましたが、オブジェクトが表示状態に有り、かつフォーカスを持っている状態で、かつ「JavaScriptで捕捉した他のオブジェクトのclickイベント内」であれば可能みたいです。(自分で試しただけなので正確ではないかもしれません)

これを使えるのではないかと期待しましたが残念ながら無理でした。「他のオブジェクトのclickイベント内」というのがポイントで、あくまでこのトリックはボタンの外見をカスタマイズするためにわざわざブラウザに実装されたもののようで、例えばsetTimeoutやmousemoveやonload等他のハンドラで呼び出してもファイル選択ボックスは表示されません。

念のため、NaClオブジェクトのmessageハンドラから呼び出してみましたが、やっぱりダメでした。

セキュリティのためとはいえ、描画を完全にNaCl内で完結するMilkyTrackerのようなアプリの場合、NaClコンテナ内でのイベント(例えば[LOAD]ボタンをクリック)をトリガーとしてファイル選択ボックスを表示することが出来ないと言うのは悲しすぎます。ファイルを選択するだけであればブラウザに対するドラッグ＆ドロップは一つの打開策ではありますが、やはりファイルを選ばせるというUIは捨てがたいです。

NaCl内でもマウスがクリックされた時の特別なハンドラが提供され、そこからであればJavaScriptと同じようにファイル選択ボックスを表示できる、というロジックであれば現状のセキュリティレベルを落とすことなくNaClアプリをもっとええ感じに出きそう。

1の方法をNaClの埋め込みオブジェクト上でやるというのはまだ試してないけどひょっとしたらうまく行くのかも。どなたか他によい方法があればご教示下さいませ。

ここ数日ちょっと暇を見つけてNaClにMilkyTrackerを移植して遊んでいるのですが、クロスプラットフォーム向けにデザインされている事もあってコアの移植自体はもう殆ど出来てしまっています。しかし、サンドボックスに閉じ込められた環境でファイルIOをどう実装するかについて色々迷っています。

と言うのも、オリジナルのMilkyTrackerは当然ローカルのディスクに対してデータの読み書きを行いますが、ブラウザに移植した時点でデータはクラウドに持っていくのが筋なのではないかと思うからです。

もちろんNaClBoxのようにブラウザの中でスタンドアロンに動くだけでも、十分おもしろいのですが、アプリをインストールしないでも動くというのと(これは結構大きいか)、ChromeOSで動くというくらいしか有り難味がなく、ポテンシャルが活かしきれていません。

ローカルのファイルを読み書きする

NaClのセキュリティモデルでは、ブラウザ内で許されていることしかできないので。OSのAPIも呼べなければローカルのファイルシステムへの自由なアクセスも出来ません。

• HTML5のアプリ固有の仮想ファイルシステムをLocalDatabase or WebDatabaseで実装する
• HTML5のローカルファイルアクセス機能(FileReader and FileWriter)を使う

前者は作成したファイルに他から一切アクセスできないのでいまいちだと思いますし、後者もファイルの一覧などを取得することは出来ず、あくまでブラウザにドロップされたりinputで選択されたりしたファイルを読み込むものです。また書き込みについてもブラウザの対応状況がいまいちだったりします。

単純にスタンドアロンアプリを移植する、という観点からあえて選ぶと後者のFileReader / FileWriterを使った実装がよいと思います。

クラウド上でファイルを読み書きする

折角ブラウザ上で動いていて常にサーバーと通信できる状態にあるのに、無理してローカルのストレージにこだわるのも微妙です。クラウドをストレージ代わりに使うような実装をすれば、ログイン処理こそ必要なものの、ブラウザさえあればどのマシンからでも自分の曲データにアクセスできますし、バージョン管理やバックアップの心配もいりません。

また、サーバー側でそのまま楽曲を共有させたりと、ソーシャルな要素を付け加えようと考えたりするともう夢が膨らんでしまいます。特にMilkyTrackerの場合はwww.modarchive.comのコミュニティーと密接に繋がっていますのでおもしろい事がいろいろ出来そうです。

問題点は、大したことではないですが、セキュリティモデル上ドメインの制限があるのと、オリジナルのUIをできるだけ保ったままうまく実装する方法を見つけるということぐらいでしょうか。

万華鏡シミュレーターカレイド卿をちょこっと更新しました(Android版のみ)。これまでのバージョンは鏡を三角に向かい合わせた万華鏡をシミュレートしたものだったのですが、他の形状にするとどうなるのだろうという個人的な好奇心から色々試してみました。

上のキャプチャ画像は三角柱上の万華鏡のスクリーンショットなのですが、これを四角柱、五角柱、六角柱にしたらこんな感じになりました。

では皆さん、これが円柱だったらどのように見えるでしょう？

答えは是非アプリでお試しください！w 

※ヒント：以下三角形から18角形までのuvマップです

週末にNaClを遂に触ってみた。三年前に論文が出たときからコードは読んでいたんだけど、ハマりどころが多そうで実際にNaCl上で動くコードを書く気にはなかなかなれなかった。今ではChromeに標準搭載されていたりと、大分落ち着いてきたっぽいので手遅れにならないうちにと思ってやってみた。

やるからにはビジュアル的にいけてて音も出る派手な奴がいいと思ったけど、QuakeやDosboxという先行者たちがいたのでゲームはやめてMilkyTrackerにした。DemoScene好きなら誰もが知っているModトラッカーFastTrackerのクローンだ。MilkyTrackerはマルチプラットフォーム対応のオープンソースなので移植しやすいように綺麗にコードも整理されている。

やってみたのがこれ　→　SaltyTracker

ファイル回りは当然そのままでは動かないのでオンメモリの簡単なファイルシステムをやっつけで実装して、[Load]ボタンを押したら決め打ちでデモの曲が読み込まれるようになっている。Enterキーで再生が始まる。

Linuxで開発したが、この件でLinux版のChromeはNaClが標準で無効になっている。ここの手順で有効にしないといけない。UbuntuとChromeOSとMacOSXでは動いた。動かせなかった人のために一応スクリーンキャストも。

コードを綺麗にしたら作者にパッチを送る予定。( patch will be released as soon as it’s polished )

NaClはあらゆる面で素晴らしい。以前は仕事でよくActiveXのオブジェクトを作ったりもしたけど、同じブラウザ上で動くプログラムといってもこれは全く別物だわ。あえて言うと既存のアプリを移植するという観点ではネットワーク回りが無いのが厳しいかな。パケットをカプセル化してWebSocket経由でプロキシさせるsocketレイヤでも書いたらみんな使ってくれるだろうか。サーバーを立てないといけないのとセキュリティが課題だな。

こんなコードが同僚から送られてきた。

#include <iostream>
 
int a[] = {1, 12, 13,2};
int b[] = {2, 12, 23,2};
 
int main()
{
  int c = 3[b][a];
  std::cout << c;
  return 0;
}

結果が気になる人はこちらcode pad

以下ダンプ

.globl a
        .data
        .align 4
        .type   a, @object
        .size   a, 16
a:
        .long   1
        .long   12
        .long   13
        .long   2
.globl b
        .align 4
        .type   b, @object
        .size   b, 16
b:
        .long   2
        .long   12
        .long   23
        .long   2
        .text
.globl main
        .type   main, @function
main:
.LFB963:
        .cfi_startproc
        pushl   %ebp
        .cfi_def_cfa_offset 8
        movl    %esp, %ebp
        .cfi_offset 5, -8
        .cfi_def_cfa_register 5
        andl    $-16, %esp
        subl    $32, %esp
        movl    b+8, %eax
        movl    a(,%eax,4), %eax
        movl    %eax, 28(%esp)
        movl    28(%esp), %eax
        movl    %eax, 4(%esp)
        movl    $_ZSt4cout, (%esp)
        call    _ZNSolsEi
        movl    $0, %eax
        leave
        .cfi_restore 5
        .cfi_def_cfa 4, 4
        ret
        .cfi_endproc