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/details?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/

素材たち 使わせて頂き、ありがとうございます！

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