Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node canvas

4,563 views

Published on

Published in: Technology
  • Be the first to comment

Node canvas

  1. 1. node.js を使って flash にも描き込む お絵描きチャット iPhone からも描き込めるよ 2012/02/04 F-site
  2. 2. 自己紹介 <ul><li>プログラマー </li></ul><ul><li>Flash, JavaScript, iOS, Android の </li></ul><ul><li>アプリなどをプログラムしています。 </li></ul><ul><li>ブログ www.kuma-de.com </li></ul><ul><li>Twitter @kinkuma_design </li></ul>
  3. 3. Jsfl を便利にするパネル <ul><li>jsflEdit </li></ul><ul><li>Flash の IDE の中で、手軽に </li></ul><ul><li>Jsfl の作成・編集・実行が </li></ul><ul><li>可能になる拡張パネル </li></ul><ul><li>SparkProject にて公開中 </li></ul><ul><li>http://www.libspark.org/wiki/jsflEdit </li></ul>
  4. 4. ここから本題
  5. 5. みんなで Flash にお絵描きしたい! <ul><li>ブラウザから描き込んだ絵が、同時に接続している人にもリアルタイムで描き込まれる。 </li></ul><ul><li>さらに Flash のステージ上にも描き込まれる。 </li></ul><ul><li>WebSocket を使っているので、 iPhone からも描き込めるよ。 </li></ul><ul><li>フレームをまたがって描き込んだものを swiffy でパブリッシュすれば、 iPhone からもアニメーションが見られるよ。 </li></ul>
  6. 6. 準備 1 <ul><li>サーバーを起動 </li></ul><ul><li>WebSocket サーバー、 Socket サーバー、 </li></ul><ul><li>http サーバーが立ち上がる </li></ul><ul><li>Flash の拡張パネルから Socket サーバーに接続 </li></ul>
  7. 7. 準備 2 <ul><li>node.js の htpp サーバーからページをもらってきて、同時に websocket にもアクセスする。 </li></ul><ul><li>iPhone はネイティブアプリでなく、 Web アプリ用のブックマークで立ち上げるとこうなります。 </li></ul>各ブラウザからサーバーに接続。
  8. 8. 描いてみる <ul><li>描いたものがリアルタイムに、同時に接続している人のブラウザに反映される。 </li></ul>
  9. 9. 描いてみる 2 <ul><li>さらに Flash のステージ上にも同じものが描き込まれる。 </li></ul><ul><li>このときは、ストロークごとに反映 </li></ul>
  10. 10. 描いてみる 3 <ul><li>各フレームに描きこむ </li></ul><ul><li>画面左下のボタンからパブリッシュする </li></ul><ul><li>サーバー経由で Flash に命令が届き </li></ul><ul><li>swiffy のコマンドを起動 </li></ul>
  11. 11. Swiffy でパブリッシュ <ul><li>パブリッシュ後に各ブラウザが swfiffy で書き出されたページに変更される。 </li></ul><ul><li>フレームアニメーションが見られる </li></ul>
  12. 12. 仕組み node.js でつくるサーバーたち http サーバー WebSocket サーバー Socket サーバー Web ブラウザたち リクエスト 接続 レスポンス Flash 内拡張パネル データのやりとり 接続 Flash ステージ Jsfl で命令 (今回のテーマ!)

×