CanvasとDataURLのちょっと賢い使い方
有限会社 来栖川電算 山口陽平
html5nagoya 2013.9.10
ラ ジ オ 体 操 ア プ リ

 自己紹介
 １日で作るパラパラ漫画 in 毎朝体操
 どんなアプリ？
 そもそもなぜパラパラ漫画
 シーングラフDSL
 宣伝
 参考文献
あじぇんだ


自己紹介
手短に


 必要なら何でも徹底的にやる研究者
 プログラミング言語・データベース・分散
 アルゴリズム・機械学習・ＣＶ・自然言語
 名古屋工業大学出身・未踏ソフトウェア経験
 世界を美しく記述することを夢見る３５歳
 人を驚かせるのが好き
 ハードリアルタイムJavaVM
 1000台越え構成のペタバイト分散DB
 秒間1000万クエリ処理できるKVS
 超多クラス対応の超高速物体認識エンジン
山 口 陽 平
@melleo1978
※あくまでもイメージです。
実物に髪の毛はありません。


 概要：１０周年！
 名古屋工業大学発ベンチャー（2003年）
 目的：ロボの頭脳を作る
 知的インターフェイスによる社会の変革
 ソフトウェアの品質・生産性の向上
 スタッフ：３０人
 役員３人，正社員１０人，見習い１０人
 データ作成６人，家政婦１人
 IPA未踏ソフトウェア経験者多数
 社風：難しことを楽しく
 職人，挑戦，自由，昼食・夕食・飲み会は無料
来栖川電算
http://kurusugawa.jp/
弊社が目指すロボ
※写真はあくまでもイメージです。


 スマホ，リストバンド，
時計，メガネ，指輪，
服，車，家，…
事業戦略
知的インターフェイスで、よりユーザの傍へ。


1日で作るパラパラ漫画
in 毎朝体操
CanvasとDataURLのちょっと賢い使い方
ラ ジ オ 体 操 ア プ リ


 モーション認識×ゲーミフィ
ケーションで楽しく健康に
 スマホを持ってラジオ体操
すると採点してくれる！
 素敵なレポートを友達と見
せ合って競い合おう！
 対応機種
 Android 2.3以降
 加速度センサ必須
 GPS推奨
どんなアプリ？
http://maiasa.jp/

 ガイド音声付き（社員）
 ラジオ体操第２も追加！
毎週機能追加！
みんなのデータで徐々に賢く


 毎朝体操リリース前：最終試験をするスタッフ
機能追加の舞台裏


 ダウンロードペース・インストール率が上昇中！
人気上昇中！
GooglePlay 健康＆フィットネス 45位
Facebook 5605いいね！


 都会で人気（特に千代田区）
 離島にもいた！！！
 中高年に人気（若者カモン！）
 夏休みが終わっても減らないというか、
むしろ増えた。ドワンゴさん？
 朝と夜に利用するケースが多い
日本全国で利用されてる
おばんちゃんから電話で相談がくるレベル


そもそもなぜ
パラパラ漫画
～リリース直後～
このアプリ、ラジオ体操の楽曲ないと人に勧められないよね？
やばぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃ！！！


 かんぽ様の審査が厳しい。
 ラジオ体操と特定の商品が結びつ
くような表現はダメ。
 広告ダメ・関連商品販売ダメ
 イメージに合ってないとダメ。
 ダイエットを煽るのもダメ
 プリキ○アと並べたらダメ
 ラジオ体操もどきを広めてはダメ。
 手に持たせてはダメ
 腕だけで採点してはダメ
 採点するなら一級ラジオ体操指導
士（愛知に数人？）の監修を
 マネタイズの道が失われる・・・
 使わずに何とかしよう！！！
なぜ楽曲が入ってない？
ラジオ体操のCD
問い合わせたら、タダで貰えた。
かんぽ様、太っ腹、ありがとう！


 練習モード
 楽曲なしで体操 ⇒ 認識したモーション認識を表示
 各モーションを特徴づけるアイコンがコミカルに動く
 たまに物凄い速さで動く！！！（ブラウザの振る舞い）
何とかしてみた
今回はここの話
毎朝体操のレポートはHTML


Illustratorで試し描き⇒数値計算の方が楽かも
だからシーングラフDSL
僅か61行の言語処理系で高い生産性と安定した品質を目指す
CanvasとDataURLのおかげで超楽ちん！
DSLやりたいなら関数型言語やるとよいよ（名古屋だし）

 標準ポーズのシーングラフからの変更箇所
 腰の高さ：1個，関節の半径：0個，関節の角度：11個
 手間がかからず安定品質！
 角度以外の調整はほぼ不要
 15度刻みでもわりとＯＫ
シーングラフDSL
シーングラフ
対
応
関
係
ポ
ー
ズ


 できるだけ簡潔に記述できるように工夫
DSL構文


 旋回と移動だけを行う（何も描画しない）ノード
 進行方向から相対角度aAngleの方向へ旋回
 現在位置から相対距離aRadiusの位置へ移動
DSL仕組：MoveNode


 現在位置から移動先まで線を描画するノード
DSL仕組：LineNode


 現在位置で円を描画するノード
 現在位置に半径aRadiusの円を塗りつぶし描画
DSL仕組：CircleNode
HTML5には便利な描画機能がたくさんある
moveTo(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(), arc(), rect()
HTML5には便利な装飾機能もたくさんある
strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineWidth, lineCap,
lineJoin, miterLimit, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur


 IMGタグのSRC属性にDataURLを格納するだけ
 表示もできて、画像を右クリックで保存もできる
 DataURL（Base64化されたPNG）をデコード&保存す
るコードを書けば楽（ライブラリを使えば10行程度）
DSL仕組：画像保存


 スクリプトによる抽象化でパーツを共有
 テキストエディタの機能でスピーディに編集
DSL成果：74ポーズ／人日
「毎朝体操」をインストールして成果を見よう！


 CSSのrounded-cornerが働かないブラウザがある
 Galaxy S2はダメだった ⇒ CircleNode導入
 Canvasが異様に遅い端末がある
 JavaScriptによるアニメーション ⇒ GIFアニメ
 アルファが１色なのでジャギが出る ⇒ 高解像度化
 パラパラ漫画にして良かった
 ポーズごとだと微妙でもパラパラ漫画ならイケル
 1ポーズだけで運動を特徴づけるより遥かに易しい
 イラストレータがいなくても何とかなった
 制約が強いので誰がやってもそこそこの品質になる
やって分かったこと


宣伝
時間があれば


 いろいろ話すよ！
 来栖川電算のこと
 認識技術のこと
 ビッグデータのこと
 毎朝体操のこと
 みんな来てね！
名古屋IT飲み会


 ビッグデータに関するアンカンファレンスするよ！
 名古屋からも多数参加！（来栖川電算の名前が！）
JAWS FESTA
Kansai 2013


 使いたい人は問い合わせてね！
物体認識クラウドサービス
1000sors.com


 毎朝体操の開発を通して学べるよ！
 機械学習の基礎
 各種アルゴリズムの実装と実験
 時系列データからの特徴抽出手法
 仮説検証
 結果とデータ・特徴・アルゴリズムの関係
 機械学習を使った分析
 成功へ導くための計画
 人間と機械の協調の設計
 自動的な教師の収集
 適切な目標設定
データサイエンティスト
養成カリキュラムあるぞ


 気軽にオフィスへ遊びに来てね！
 連絡があれば、見学できて、ご飯も食べれて、泊まれる。
スタッフ募集中！
UI・UXが分かる人、今すぐ来て！
名古屋本社（2013年フロア増設）
イオン千種・名大病院・名工大の近く
上野支社（2012年開設）
入谷駅・鶯谷駅・上野駅の近く


参考文献
リンクとか


 来栖川電算
 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/
参考文献

 天候アイコン
 http://wunderground.com/
 変ゼミのロゴジェネレータ
 http://bkaclub.web.fc2.com/henzemi_gen.html
 ICON HOIHOI
 http://iconhoihoi.oops.jp/
素材たち
使わせて頂き、ありがとうございます！


ご清聴ありがとうございました