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