html5

Node.js[2]-EaselJSとsoket.ioでタッチ共有

前回のエントリでsoket.ioにだいたい慣れたので、次は以前作ったEaselJSのスタディを少しいじって、soket.ioでつなぎタッチの可視化共有してみた。
今回作ってみた物を以下に置いておく。ただVPSサーバーの構成変更を行う予定なので、いつまでこの形でおいておくかは分からない。

co-touch

できればiPhoneとmacとかiPhoneとiPadとかで見ていただけると、一方のタッチがリアルタイムに伝わる様が見えるだろう。もちろんブラウザウィンドウ2枚立ち上げでも何が起きるか把握できる。

Read more »

EaselJS[1]-iPhone/iPad対応や画像など

今回はEaselJSをある程度いろいろといじってみた。
以下に作ってみた物を置いてある。
EaselJS Study 01
EaselJS Study 02

Read more »

EaselJS[0]-スタートポイント作成

EaselJSはCANVASをactionscriptに似た感じで扱えるようにするjavascriptライブラリだ。
ライブラリの作者はフラッシュ開発者として有名なGrant Skinner氏である。またadobeのFlashプロダクトマネージャで、最近モバイルブラウザー向けFlash Player開発中止についての詳細説明をしていたMike Chambers氏も、その開発に協力しており、将来的にはフラッシュとの連携がありそうだと言われている。
つい先ごろ0.4が公開された。ここのところバージョンアップが無かったので開発が続くのか少々不安だったのだけど、これで継続することがはっきりとしたので、いじりはじめてみることにした。
今回はhello worldとプロジェクトのスタートポイント作成を行った。

Read more »

Sencha Touch2[5]-MVC[1]-構築とlocalstorageのバグ

引き続きMVCパターンで具体的なアプリ構築に入っていく。
それと構築途中で判明したlocalstorageのバグにも触れる。
今回作成した物とそのソースファイルを以下に置いておく。
MemoApp
memoMVC.zip

Read more »

Sencha Touch2[4]-MVC[0]-パターンとスタートポイント

ドキュメントにあるExamplesのApplication ExamplesあたりはMVCパターンに沿って作られている。
今回はこのSencha Touch 2でのMVCパターンを調べてみた結果を書いていく。

Read more »

Sencha Touch2[3]-イベント関連、あと開発ツール[2]

前回のエントリで、困ったらインスペクタのConsoleでオブジェクトダンプして色々と取ればなんとなく大丈夫そうだと分かった。今回は、それも使いつつイベントの書き方色々を説明していくことにする。

Read more »

Sencha Touch2[2]-イベント関連、あと開発ツール[1]

引き続きSencha Touch2、今回は本題であるイベント周りを記述する。
前回使っていたevent 01だと3ページ分のスクリプトが入り交じっていて少しゴチャッとしているので、各ページごとに3つに分けて説明をしていくことにする。
またしても長くなったので、もう1エントリ続ける。

Read more »

Sencha Touch2[1]-イベント関連、あと開発ツール[0]

Sencha Touch2を引き続きで、今回はイベント周りを調査した。
イベント関連はコンフィグオプションでhandlerとして設定する方法や、リスナー登録する方法、コントローラで処理する方法など、色々と出てきた。
今回作成分はWebKitの開発ツールであるWeb InspectorのConsoleで見ることが前提となっており、ドキュメントに載っていない情報や取得したいプロパティなどの確認方法も解説していく。
まず今回はWeb Inspectorの使い方、次回にイベント周りの説明とする。

Read more »

Sencha Touch2[0]-バージョン選択や基本の書き方。

スマートフォンでのwebアプリ開発で評判のよさげなSencha Touchをいじってみた。
わりとクセがあるけれども、結構面白いし色々とできそうなので、これも覚えていこうとおもう。
つい最近-2011/11/10-に開発者向けSencha Touch2.0.0が出ている。
Sencha Touch 2 Developer Preview
Sencha Touch1.1の場合は、日本語サイトからもダウンロードできる。
Sencha Touch 1.1
Read more »

Three.js[3]-パーティクル系、それとリサジュー曲線とか立体視とか

今回はパーティクル系で3本作成+立体視用にちょっといじった。
パーティクル
three.js:study07
three.js:study06
three.js:study05
立体視
three.js:study07b
three.js:study05b
three.js:study02b

Read more »