CanvasとDataURLのちょっと賢い使い方
有限会社 来栖川電算 山口陽平
html5nagoya 2013.9.10
ラ ジ オ 体 操 ア プ リ
 自己紹介
 1日で作るパラパラ漫画 in 毎朝体操
 どんなアプリ?
 そもそもなぜパラパラ漫画
 シーングラフDSL
 宣伝
 参考文献
あじぇんだ

自己紹介
手短に

 必要なら何でも徹底的にやる研究者
 プログラミング言語・データベース・分散
 アルゴリズム・機械学習・CV・自然言語
 名古屋工業大学出身・未踏ソフトウェア経験
 世界を美しく記述することを夢見る35歳
 人を驚かせるのが好き...

 概要:10周年!
 名古屋工業大学発ベンチャー(2003年)
 目的:ロボの頭脳を作る
 知的インターフェイスによる社会の変革
 ソフトウェアの品質・生産性の向上
 スタッフ:30人
 役員3人,正社員10人,見習い10人
...

 スマホ,リストバンド,
時計,メガネ,指輪,
服,車,家,…
事業戦略
知的インターフェイスで、よりユーザの傍へ。

1日で作るパラパラ漫画
in 毎朝体操
CanvasとDataURLのちょっと賢い使い方
ラ ジ オ 体 操 ア プ リ

 モーション認識×ゲーミフィ
ケーションで楽しく健康に
 スマホを持ってラジオ体操
すると採点してくれる!
 素敵なレポートを友達と見
せ合って競い合おう!
 対応機種
 Android 2.3以降
 加速度センサ必須
 GP...
 ガイド音声付き(社員)
 ラジオ体操第2も追加!
毎週機能追加!
みんなのデータで徐々に賢く

 毎朝体操リリース前:最終試験をするスタッフ
機能追加の舞台裏

 ダウンロードペース・インストール率が上昇中!
人気上昇中!
GooglePlay 健康&フィットネス 45位
Facebook 5605いいね!

 都会で人気(特に千代田区)
 離島にもいた!!!
 中高年に人気(若者カモン!)
 夏休みが終わっても減らないというか、
むしろ増えた。ドワンゴさん?
 朝と夜に利用するケースが多い
日本全国で利用されてる
おばんちゃんから電話...

そもそもなぜ
パラパラ漫画
~リリース直後~
このアプリ、ラジオ体操の楽曲ないと人に勧められないよね?
やばぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃ!!!

 かんぽ様の審査が厳しい。
 ラジオ体操と特定の商品が結びつ
くような表現はダメ。
 広告ダメ・関連商品販売ダメ
 イメージに合ってないとダメ。
 ダイエットを煽るのもダメ
 プリキ○アと並べたらダメ
 ラジオ体操もどきを広め...

 練習モード
 楽曲なしで体操 ⇒ 認識したモーション認識を表示
 各モーションを特徴づけるアイコンがコミカルに動く
 たまに物凄い速さで動く!!!(ブラウザの振る舞い)
何とかしてみた
今回はここの話
毎朝体操のレポートはHTML

Illustratorで試し描き⇒数値計算の方が楽かも
だからシーングラフDSL
僅か61行の言語処理系で高い生産性と安定した品質を目指す
CanvasとDataURLのおかげで超楽ちん!
DSLやりたいなら関数型言語やるとよいよ(名古屋だ...
 標準ポーズのシーングラフからの変更箇所
 腰の高さ:1個,関節の半径:0個,関節の角度:11個
 手間がかからず安定品質!
 角度以外の調整はほぼ不要
 15度刻みでもわりとOK
シーングラフDSL
シーングラフ
対
応
関
係
...

 できるだけ簡潔に記述できるように工夫
DSL構文

 旋回と移動だけを行う(何も描画しない)ノード
 進行方向から相対角度aAngleの方向へ旋回
 現在位置から相対距離aRadiusの位置へ移動
DSL仕組:MoveNode

 現在位置から移動先まで線を描画するノード
DSL仕組:LineNode

 現在位置で円を描画するノード
 現在位置に半径aRadiusの円を塗りつぶし描画
DSL仕組:CircleNode
HTML5には便利な描画機能がたくさんある
moveTo(), lineTo(), quadraticCurveTo(...

 IMGタグのSRC属性にDataURLを格納するだけ
 表示もできて、画像を右クリックで保存もできる
 DataURL(Base64化されたPNG)をデコード&保存す
るコードを書けば楽(ライブラリを使えば10行程度)
DSL仕組:...

 スクリプトによる抽象化でパーツを共有
 テキストエディタの機能でスピーディに編集
DSL成果:74ポーズ/人日
「毎朝体操」をインストールして成果を見よう!

 CSSのrounded-cornerが働かないブラウザがある
 Galaxy S2はダメだった ⇒ CircleNode導入
 Canvasが異様に遅い端末がある
 JavaScriptによるアニメーション ⇒ GIFアニメ
 ...

宣伝
時間があれば

 いろいろ話すよ!
 来栖川電算のこと
 認識技術のこと
 ビッグデータのこと
 毎朝体操のこと
 みんな来てね!
名古屋IT飲み会

 ビッグデータに関するアンカンファレンスするよ!
 名古屋からも多数参加!(来栖川電算の名前が!)
JAWS FESTA
Kansai 2013

 使いたい人は問い合わせてね!
物体認識クラウドサービス
1000sors.com

 毎朝体操の開発を通して学べるよ!
 機械学習の基礎
 各種アルゴリズムの実装と実験
 時系列データからの特徴抽出手法
 仮説検証
 結果とデータ・特徴・アルゴリズムの関係
 機械学習を使った分析
 成功へ導くための計画
...

 気軽にオフィスへ遊びに来てね!
 連絡があれば、見学できて、ご飯も食べれて、泊まれる。
スタッフ募集中!
UI・UXが分かる人、今すぐ来て!
名古屋本社(2013年フロア増設)
イオン千種・名大病院・名工大の近く
上野支社(2012年...

参考文献
リンクとか

 来栖川電算
 http://kurusugawa.jp/
 タンゴチュウ(情景画像文字認識)のキャラ
 http://tangochu.jp/
 1000sors.com(物体認識)
 http://1000sors.com/...
 天候アイコン
 http://wunderground.com/
 変ゼミのロゴジェネレータ
 http://bkaclub.web.fc2.com/henzemi_gen.html
 ICON HOIHOI
 http://i...

ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

Html5nagoya20130910

1,703 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,703
On SlideShare
0
From Embeds
0
Number of Embeds
263
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5nagoya20130910

  1. 1. CanvasとDataURLのちょっと賢い使い方 有限会社 来栖川電算 山口陽平 html5nagoya 2013.9.10 ラ ジ オ 体 操 ア プ リ
  2. 2.  自己紹介  1日で作るパラパラ漫画 in 毎朝体操  どんなアプリ?  そもそもなぜパラパラ漫画  シーングラフDSL  宣伝  参考文献 あじぇんだ
  3. 3.  自己紹介 手短に
  4. 4.   必要なら何でも徹底的にやる研究者  プログラミング言語・データベース・分散  アルゴリズム・機械学習・CV・自然言語  名古屋工業大学出身・未踏ソフトウェア経験  世界を美しく記述することを夢見る35歳  人を驚かせるのが好き  ハードリアルタイムJavaVM  1000台越え構成のペタバイト分散DB  秒間1000万クエリ処理できるKVS  超多クラス対応の超高速物体認識エンジン 山 口 陽 平 @melleo1978 ※あくまでもイメージです。 実物に髪の毛はありません。
  5. 5.   概要:10周年!  名古屋工業大学発ベンチャー(2003年)  目的:ロボの頭脳を作る  知的インターフェイスによる社会の変革  ソフトウェアの品質・生産性の向上  スタッフ:30人  役員3人,正社員10人,見習い10人  データ作成6人,家政婦1人  IPA未踏ソフトウェア経験者多数  社風:難しことを楽しく  職人,挑戦,自由,昼食・夕食・飲み会は無料 来栖川電算 http://kurusugawa.jp/ 弊社が目指すロボ ※写真はあくまでもイメージです。
  6. 6.   スマホ,リストバンド, 時計,メガネ,指輪, 服,車,家,… 事業戦略 知的インターフェイスで、よりユーザの傍へ。
  7. 7.  1日で作るパラパラ漫画 in 毎朝体操 CanvasとDataURLのちょっと賢い使い方 ラ ジ オ 体 操 ア プ リ
  8. 8.   モーション認識×ゲーミフィ ケーションで楽しく健康に  スマホを持ってラジオ体操 すると採点してくれる!  素敵なレポートを友達と見 せ合って競い合おう!  対応機種  Android 2.3以降  加速度センサ必須  GPS推奨 どんなアプリ? http://maiasa.jp/
  9. 9.  ガイド音声付き(社員)  ラジオ体操第2も追加! 毎週機能追加! みんなのデータで徐々に賢く
  10. 10.   毎朝体操リリース前:最終試験をするスタッフ 機能追加の舞台裏
  11. 11.   ダウンロードペース・インストール率が上昇中! 人気上昇中! GooglePlay 健康&フィットネス 45位 Facebook 5605いいね!
  12. 12.   都会で人気(特に千代田区)  離島にもいた!!!  中高年に人気(若者カモン!)  夏休みが終わっても減らないというか、 むしろ増えた。ドワンゴさん?  朝と夜に利用するケースが多い 日本全国で利用されてる おばんちゃんから電話で相談がくるレベル
  13. 13.  そもそもなぜ パラパラ漫画 ~リリース直後~ このアプリ、ラジオ体操の楽曲ないと人に勧められないよね? やばぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃ!!!
  14. 14.   かんぽ様の審査が厳しい。  ラジオ体操と特定の商品が結びつ くような表現はダメ。  広告ダメ・関連商品販売ダメ  イメージに合ってないとダメ。  ダイエットを煽るのもダメ  プリキ○アと並べたらダメ  ラジオ体操もどきを広めてはダメ。  手に持たせてはダメ  腕だけで採点してはダメ  採点するなら一級ラジオ体操指導 士(愛知に数人?)の監修を  マネタイズの道が失われる・・・  使わずに何とかしよう!!! なぜ楽曲が入ってない? ラジオ体操のCD 問い合わせたら、タダで貰えた。 かんぽ様、太っ腹、ありがとう!
  15. 15.   練習モード  楽曲なしで体操 ⇒ 認識したモーション認識を表示  各モーションを特徴づけるアイコンがコミカルに動く  たまに物凄い速さで動く!!!(ブラウザの振る舞い) 何とかしてみた 今回はここの話 毎朝体操のレポートはHTML
  16. 16.  Illustratorで試し描き⇒数値計算の方が楽かも だからシーングラフDSL 僅か61行の言語処理系で高い生産性と安定した品質を目指す CanvasとDataURLのおかげで超楽ちん! DSLやりたいなら関数型言語やるとよいよ(名古屋だし)
  17. 17.  標準ポーズのシーングラフからの変更箇所  腰の高さ:1個,関節の半径:0個,関節の角度:11個  手間がかからず安定品質!  角度以外の調整はほぼ不要  15度刻みでもわりとOK シーングラフDSL シーングラフ 対 応 関 係 ポ ー ズ
  18. 18.   できるだけ簡潔に記述できるように工夫 DSL構文
  19. 19.   旋回と移動だけを行う(何も描画しない)ノード  進行方向から相対角度aAngleの方向へ旋回  現在位置から相対距離aRadiusの位置へ移動 DSL仕組:MoveNode
  20. 20.   現在位置から移動先まで線を描画するノード DSL仕組:LineNode
  21. 21.   現在位置で円を描画するノード  現在位置に半径aRadiusの円を塗りつぶし描画 DSL仕組:CircleNode HTML5には便利な描画機能がたくさんある moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(), arc(), rect() HTML5には便利な装飾機能もたくさんある strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineWidth, lineCap, lineJoin, miterLimit, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur
  22. 22.   IMGタグのSRC属性にDataURLを格納するだけ  表示もできて、画像を右クリックで保存もできる  DataURL(Base64化されたPNG)をデコード&保存す るコードを書けば楽(ライブラリを使えば10行程度) DSL仕組:画像保存
  23. 23.   スクリプトによる抽象化でパーツを共有  テキストエディタの機能でスピーディに編集 DSL成果:74ポーズ/人日 「毎朝体操」をインストールして成果を見よう!
  24. 24.   CSSのrounded-cornerが働かないブラウザがある  Galaxy S2はダメだった ⇒ CircleNode導入  Canvasが異様に遅い端末がある  JavaScriptによるアニメーション ⇒ GIFアニメ  アルファが1色なのでジャギが出る ⇒ 高解像度化  パラパラ漫画にして良かった  ポーズごとだと微妙でもパラパラ漫画ならイケル  1ポーズだけで運動を特徴づけるより遥かに易しい  イラストレータがいなくても何とかなった  制約が強いので誰がやってもそこそこの品質になる やって分かったこと
  25. 25.  宣伝 時間があれば
  26. 26.   いろいろ話すよ!  来栖川電算のこと  認識技術のこと  ビッグデータのこと  毎朝体操のこと  みんな来てね! 名古屋IT飲み会
  27. 27.   ビッグデータに関するアンカンファレンスするよ!  名古屋からも多数参加!(来栖川電算の名前が!) JAWS FESTA Kansai 2013
  28. 28.   使いたい人は問い合わせてね! 物体認識クラウドサービス 1000sors.com
  29. 29.   毎朝体操の開発を通して学べるよ!  機械学習の基礎  各種アルゴリズムの実装と実験  時系列データからの特徴抽出手法  仮説検証  結果とデータ・特徴・アルゴリズムの関係  機械学習を使った分析  成功へ導くための計画  人間と機械の協調の設計  自動的な教師の収集  適切な目標設定 データサイエンティスト 養成カリキュラムあるぞ
  30. 30.   気軽にオフィスへ遊びに来てね!  連絡があれば、見学できて、ご飯も食べれて、泊まれる。 スタッフ募集中! UI・UXが分かる人、今すぐ来て! 名古屋本社(2013年フロア増設) イオン千種・名大病院・名工大の近く 上野支社(2012年開設) 入谷駅・鶯谷駅・上野駅の近く
  31. 31.  参考文献 リンクとか
  32. 32.   来栖川電算  http://kurusugawa.jp/  タンゴチュウ(情景画像文字認識)のキャラ  http://tangochu.jp/  1000sors.com(物体認識)  http://1000sors.com/  毎朝体操(モーション認識)  https://play.google.com/store/apps/detai ls?id=jp.kurusugawa.teamR.maiasa  株式会社簡保生命保険  http://www.jp-life.japanpost.jp/ 参考文献
  33. 33.  天候アイコン  http://wunderground.com/  変ゼミのロゴジェネレータ  http://bkaclub.web.fc2.com/henzemi_gen.html  ICON HOIHOI  http://iconhoihoi.oops.jp/ 素材たち 使わせて頂き、ありがとうございます!
  34. 34.  ご清聴ありがとうございました

×