SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
CanvasとDataURLのちょっと賢い使い方
有限会社 来栖川電算 山口陽平
html5nagoya 2013.9.10
ラ ジ オ 体 操 ア プ リ
 自己紹介
 1日で作るパラパラ漫画 in 毎朝体操
 どんなアプリ?
 そもそもなぜパラパラ漫画
 シーングラフDSL
 宣伝
 参考文献
あじぇんだ

自己紹介
手短に

 必要なら何でも徹底的にやる研究者
 プログラミング言語・データベース・分散
 アルゴリズム・機械学習・CV・自然言語
 名古屋工業大学出身・未踏ソフトウェア経験
 世界を美しく記述することを夢見る35歳
 人を驚かせるのが好き
 ハードリアルタイムJavaVM
 1000台越え構成のペタバイト分散DB
 秒間1000万クエリ処理できるKVS
 超多クラス対応の超高速物体認識エンジン
山 口 陽 平
@melleo1978
※あくまでもイメージです。
実物に髪の毛はありません。

 概要:10周年!
 名古屋工業大学発ベンチャー(2003年)
 目的:ロボの頭脳を作る
 知的インターフェイスによる社会の変革
 ソフトウェアの品質・生産性の向上
 スタッフ:30人
 役員3人,正社員10人,見習い10人
 データ作成6人,家政婦1人
 IPA未踏ソフトウェア経験者多数
 社風:難しことを楽しく
 職人,挑戦,自由,昼食・夕食・飲み会は無料
来栖川電算
http://kurusugawa.jp/
弊社が目指すロボ
※写真はあくまでもイメージです。

 スマホ,リストバンド,
時計,メガネ,指輪,
服,車,家,…
事業戦略
知的インターフェイスで、よりユーザの傍へ。

1日で作るパラパラ漫画
in 毎朝体操
CanvasとDataURLのちょっと賢い使い方
ラ ジ オ 体 操 ア プ リ

 モーション認識×ゲーミフィ
ケーションで楽しく健康に
 スマホを持ってラジオ体操
すると採点してくれる!
 素敵なレポートを友達と見
せ合って競い合おう!
 対応機種
 Android 2.3以降
 加速度センサ必須
 GPS推奨
どんなアプリ?
http://maiasa.jp/
 ガイド音声付き(社員)
 ラジオ体操第2も追加!
毎週機能追加!
みんなのデータで徐々に賢く

 毎朝体操リリース前:最終試験をするスタッフ
機能追加の舞台裏

 ダウンロードペース・インストール率が上昇中!
人気上昇中!
GooglePlay 健康&フィットネス 45位
Facebook 5605いいね!

 都会で人気(特に千代田区)
 離島にもいた!!!
 中高年に人気(若者カモン!)
 夏休みが終わっても減らないというか、
むしろ増えた。ドワンゴさん?
 朝と夜に利用するケースが多い
日本全国で利用されてる
おばんちゃんから電話で相談がくるレベル

そもそもなぜ
パラパラ漫画
~リリース直後~
このアプリ、ラジオ体操の楽曲ないと人に勧められないよね?
やばぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃぃ!!!

 かんぽ様の審査が厳しい。
 ラジオ体操と特定の商品が結びつ
くような表現はダメ。
 広告ダメ・関連商品販売ダメ
 イメージに合ってないとダメ。
 ダイエットを煽るのもダメ
 プリキ○アと並べたらダメ
 ラジオ体操もどきを広めてはダメ。
 手に持たせてはダメ
 腕だけで採点してはダメ
 採点するなら一級ラジオ体操指導
士(愛知に数人?)の監修を
 マネタイズの道が失われる・・・
 使わずに何とかしよう!!!
なぜ楽曲が入ってない?
ラジオ体操のCD
問い合わせたら、タダで貰えた。
かんぽ様、太っ腹、ありがとう!

 練習モード
 楽曲なしで体操 ⇒ 認識したモーション認識を表示
 各モーションを特徴づけるアイコンがコミカルに動く
 たまに物凄い速さで動く!!!(ブラウザの振る舞い)
何とかしてみた
今回はここの話
毎朝体操のレポートは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(), 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色なのでジャギが出る ⇒ 高解像度化
 パラパラ漫画にして良かった
 ポーズごとだと微妙でもパラパラ漫画ならイケル
 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/
素材たち
使わせて頂き、ありがとうございます!

ご清聴ありがとうございました

Contenu connexe

Similaire à Html5nagoya20130910

Tokai radical20131128
Tokai radical20131128Tokai radical20131128
Tokai radical20131128陽平 山口
 
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWS
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWSJAWS-UG Nagoya 20130406 物体認識システムを支えるAWS
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWS陽平 山口
 
JAWS-UG TOKAIDO 20140627
JAWS-UG TOKAIDO 20140627JAWS-UG TOKAIDO 20140627
JAWS-UG TOKAIDO 20140627陽平 山口
 
フレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBCフレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBCKazuma Kimura
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Tokuhiro Matsuno
 
Realmについて
RealmについてRealmについて
RealmについてYuki Asano
 
Rubyの会社でPythonistaが3ヶ月生き延びた話
Rubyの会社でPythonistaが3ヶ月生き延びた話Rubyの会社でPythonistaが3ヶ月生き延びた話
Rubyの会社でPythonistaが3ヶ月生き延びた話Tokoroten Nakayama
 
Rubyの会社でPythonistaが三ヶ月生き延びた話
Rubyの会社でPythonistaが三ヶ月生き延びた話Rubyの会社でPythonistaが三ヶ月生き延びた話
Rubyの会社でPythonistaが三ヶ月生き延びた話Drecom Co., Ltd.
 
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ![Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!Takuya Tachibana
 
Appresso x LUXIAR
Appresso x LUXIARAppresso x LUXIAR
Appresso x LUXIARlalha
 
CVPR2016 reading - 特徴量学習とクロスモーダル転移について
CVPR2016 reading - 特徴量学習とクロスモーダル転移についてCVPR2016 reading - 特徴量学習とクロスモーダル転移について
CVPR2016 reading - 特徴量学習とクロスモーダル転移についてAkisato Kimura
 
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3irof N
 
えぇ!?マッハでテレワーク環境を!?
えぇ!?マッハでテレワーク環境を!?えぇ!?マッハでテレワーク環境を!?
えぇ!?マッハでテレワーク環境を!?ssuser868e2d
 
TDD BootCamp in JJUG CCC - レガシーコード対策編 -
TDD BootCamp in JJUG CCC - レガシーコード対策編 -TDD BootCamp in JJUG CCC - レガシーコード対策編 -
TDD BootCamp in JJUG CCC - レガシーコード対策編 -Shuji Watanabe
 
クラウドのご紹介
クラウドのご紹介クラウドのご紹介
クラウドのご紹介Junpei Nakada
 
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解するこれで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解するHajime Ogushi
 

Similaire à Html5nagoya20130910 (20)

Tokai radical20131128
Tokai radical20131128Tokai radical20131128
Tokai radical20131128
 
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWS
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWSJAWS-UG Nagoya 20130406 物体認識システムを支えるAWS
JAWS-UG Nagoya 20130406 物体認識システムを支えるAWS
 
JAWS-UG TOKAIDO 20140627
JAWS-UG TOKAIDO 20140627JAWS-UG TOKAIDO 20140627
JAWS-UG TOKAIDO 20140627
 
DevLOVE20140823
DevLOVE20140823DevLOVE20140823
DevLOVE20140823
 
フレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBCフレームワークの良さを教えてやろう SAStruts + S2JDBC
フレームワークの良さを教えてやろう SAStruts + S2JDBC
 
apasec001-kawai
apasec001-kawaiapasec001-kawai
apasec001-kawai
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
 
kamatte(かまって)
kamatte(かまって)kamatte(かまって)
kamatte(かまって)
 
Realmについて
RealmについてRealmについて
Realmについて
 
Rubyの会社でPythonistaが3ヶ月生き延びた話
Rubyの会社でPythonistaが3ヶ月生き延びた話Rubyの会社でPythonistaが3ヶ月生き延びた話
Rubyの会社でPythonistaが3ヶ月生き延びた話
 
Rubyの会社でPythonistaが三ヶ月生き延びた話
Rubyの会社でPythonistaが三ヶ月生き延びた話Rubyの会社でPythonistaが三ヶ月生き延びた話
Rubyの会社でPythonistaが三ヶ月生き延びた話
 
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ![Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!
[Jaws re:Mote2015]田舎ならt2インスタンスを使いこなせ!
 
Appresso x LUXIAR
Appresso x LUXIARAppresso x LUXIAR
Appresso x LUXIAR
 
CVPR2016 reading - 特徴量学習とクロスモーダル転移について
CVPR2016 reading - 特徴量学習とクロスモーダル転移についてCVPR2016 reading - 特徴量学習とクロスモーダル転移について
CVPR2016 reading - 特徴量学習とクロスモーダル転移について
 
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
よくある業務開発の自動化事情 #jjug_ccc #ccc_cd3
 
えぇ!?マッハでテレワーク環境を!?
えぇ!?マッハでテレワーク環境を!?えぇ!?マッハでテレワーク環境を!?
えぇ!?マッハでテレワーク環境を!?
 
TDD BootCamp in JJUG CCC - レガシーコード対策編 -
TDD BootCamp in JJUG CCC - レガシーコード対策編 -TDD BootCamp in JJUG CCC - レガシーコード対策編 -
TDD BootCamp in JJUG CCC - レガシーコード対策編 -
 
クラウドのご紹介
クラウドのご紹介クラウドのご紹介
クラウドのご紹介
 
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解するこれで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
 
Database smells
Database smellsDatabase smells
Database smells
 

Plus de 陽平 山口

Plus de 陽平 山口 (20)

NGK2023S ChatGPT
NGK2023S ChatGPTNGK2023S ChatGPT
NGK2023S ChatGPT
 
JAWS DAYS 2022
JAWS DAYS 2022JAWS DAYS 2022
JAWS DAYS 2022
 
NGK2022S
NGK2022SNGK2022S
NGK2022S
 
KCI PROFILE 2021-10-07
KCI PROFILE 2021-10-07KCI PROFILE 2021-10-07
KCI PROFILE 2021-10-07
 
JAWSUG 20210128
JAWSUG 20210128JAWSUG 20210128
JAWSUG 20210128
 
AWS Webinar 20201224
AWS Webinar 20201224AWS Webinar 20201224
AWS Webinar 20201224
 
SIAI2020
SIAI2020SIAI2020
SIAI2020
 
MISO20200530
MISO20200530MISO20200530
MISO20200530
 
ML@Loft 20200430
ML@Loft 20200430ML@Loft 20200430
ML@Loft 20200430
 
JAWS FESTA 20191102
JAWS FESTA 20191102JAWS FESTA 20191102
JAWS FESTA 20191102
 
JAWSUG 20191028 (modified)
JAWSUG 20191028 (modified)JAWSUG 20191028 (modified)
JAWSUG 20191028 (modified)
 
JAWSUG 20191028
JAWSUG 20191028JAWSUG 20191028
JAWSUG 20191028
 
JAWSUG 20190828
JAWSUG 20190828JAWSUG 20190828
JAWSUG 20190828
 
AI Utilization Seminar 20190709
AI Utilization Seminar 20190709AI Utilization Seminar 20190709
AI Utilization Seminar 20190709
 
JAWSUG 20190620
JAWSUG 20190620JAWSUG 20190620
JAWSUG 20190620
 
JAWS DAYS 2019
JAWS DAYS 2019JAWS DAYS 2019
JAWS DAYS 2019
 
JAWS FESTA 2018 OSAKA AHAB
JAWS FESTA 2018 OSAKA AHABJAWS FESTA 2018 OSAKA AHAB
JAWS FESTA 2018 OSAKA AHAB
 
JAWS FESTA 2018 OSAKA KCI SESSION
JAWS FESTA 2018 OSAKA KCI SESSIONJAWS FESTA 2018 OSAKA KCI SESSION
JAWS FESTA 2018 OSAKA KCI SESSION
 
NAGOSUTA 20181020
NAGOSUTA 20181020NAGOSUTA 20181020
NAGOSUTA 20181020
 
JAWSUG20180925
JAWSUG20180925JAWSUG20180925
JAWSUG20180925
 

Html5nagoya20130910