1. Google CardbordとLeapMotion
〜お手軽VR〜
2015 MVP Community Camp～福岡編～
2015/01/31＠麻生情報ビジネス専門学校
JAWS-UG北九州代表 藤崎 優

2. 自己紹介
藤崎 優 @youukkari
・AWS 認定ソリューションアーキテクト – アソシエイト
・JAWS−UG北九州支部長
・AWSにこだわらず北九州で勉強会開催（ARとか）
・いろいろやってます
インフラ構築(DR構築とかクラウドとか）
訪問介護事業者向けサービス開発(JAVA)
小規模Webサービス開発(おもにCakePHP)
小倉・秘密基地：親善大使

3. 北九州でのコミュニティ活動でASCIIに
掲載されました！！！

4. 本日の内容
・VRについて
・CardBordについて
・CardBordでみるコンテンツについて
・CardBordのコンテンツの作り方について
・LeapMotionについて

5. 【最初に】
体感しないとわからない話
が続くので、終わったあと
にぜひ声をかけてください。
お見せします！！

6. VRってなんだろう？

7. バーチャルリアリティ(英: Virtual Reality, 英語発音:
[ˈvəːrʧuəl riˈæləti] ヴァーチュァル・リアラティ)とは、
実際の形はしていないか、形は異なるかも知れないが、
機能としての本質は同じであるような環境を、ユーザ
の感覚を刺激することにより理工学的に作り出す技術
およびその体系。略語としてVRとも。
仮想現実。
「バーチャルリアリティ」『フリー百科事典 ウィキペディア日本語版』より。
最終更新 2015年1月17日 (土) 23:44 UTC
URL: http://ja.wikipedia.org/wiki/%E3%83%90%E3%83%BC%E3%83%81%E3%83%A
3%E3%83%AB%E3%83%AA%E3%82%A2%E3%83%AA%E3%83%86%E3%82%A3

8. VRって
何に使わてるんだろう？

9. 航空機のシミュレーション訓練用
「フライトシミュレーション市場リポート、販売開始 英調査会社」『AviationWire』より。
最終更新 2015年1月9日 08:30 JST
URL:http://www.aviationwire.jp/archives/53142

10. 手術のシミュレーション訓練
「ムーグが開発する最先端バーチャルリアリティ眼科手術シミュレータで、慈善団体「ヘルプ・
ミー・シー」が世界中の白内障による失明の根絶を目指す」『日本ムーグ』より。
最終更新 2013年7月10日
URL:http://info.moog.com/press_release/2013710--117YM-2414ID.html

11. 高くて一般人には遠い存在
だった・・・
うん千万・・・

12. そこにOculus登場

13. Oculus VR
・米Oculus VR社が開発したバーチャルリアリティ用ヘッドマウントディスプレ
イ（HMD、頭部搭載型ディスプレイ）
・バーチャルリアリティに使用するのを第一目的として開発されている
・頭の動きに高速で追随するセンサーを内蔵している
・３５０ドルで買える

14. Oculus VRで
なにが変わった？

15. VRの技術を個人が実際に触ってみることで
きるようになった！

16. その結果・・・日本では

17. 初音ミクと
握手してみたり
添い寝してみたり
キスしてみたり・・・・

18. DMM.co.jp
が、エロいかんじのものがはじめたり・・・

19. 楽しそうでしょう？！
でも、また開発者用で手に
入りづらい。

20. でも・・・
使えるかわからないものに
約４万円は高い・・・
かな？

21. そんなあなたにGoogle CardBord

22. ・2014年のGoogle I/O開幕キーノートの最後で突然配布された、
Androidスマートフォンを挿入して使う即席バーチャルリアリティ・ヘッドセット
・『Cardboard』の製作に必要な素材リストや型紙ファイル、アプリなどを無償で公開
https://www.google.com/get/cardboard/manufacturers.html
・カメラ機能、センサー機能をスマホでやることで、段ボールでヘッドマウント
のVR体験を実現した！
・初代Oculusくらいの性能あるっぽい（スマホのスペックによります）
・ケーブルレスなので、Oculusと違って歩きながら使えるなど行動の自由度が高い
→鑑賞以外の使い方もできそう
CardBordとは？

23. ①段ボール（Amazonからいっぱい届くアレ）
CardBordの素材

24. CardBordの素材
②レンズ（100円ショップのルーペ））

25. CardBordの素材
③磁石（１００円ショップの20個入り)

26. CardBordの素材
総額２１６円

27. これでOculusで見たかったあれ
これを見ることができる！！

28. 見たい人！！！

29. 作り方
・根性でカッターで切る（８時間位かかった）

30. 作り方
・レーザーカッターで切る（博多図工室とかヨカラボ）

31. 作らずに買う
・お金で解決（Amazonで売ってる）

32. iPhoneでも見れます

33. CardBordが用意できたら
体感してみましょう！！

34. GoogleCardBord対応アプリ (Android)

35. GoogleCardBord対応アプリ (iOS)
※Durovis Dive対応アプリ

36. Youtube・ニコニコ動画(3D
サイドバイサイド動画)
https://www.youtube.com/watch?v=Ya5eQ_QfAog
【攻殻機動隊の公式3D動画】

37. 見るものがなくなってきたら
コンテンツを作ってみよう！！

38. Google CardBord
コンテンツの作り方
(コードをあまりかかずに）

39. RICOH THETA
・１回のシャッターで360°の写真が撮れる
・ 最大3分間の360°の動画撮影（音声付）
・youtubeなどにアップできる
・￥34,700くらい

40. タオ360でTHETAで撮ったコンテンツを
CardBordでみることができます
http://taovisor.com/tao360/

41. もうちょっと凝ったことをしてみた
い人にはMetaio CreatorでAR!

42. ARとは？
拡張現実（かくちょうげんじつ、英: Augmented
Reality、AR）とは、人が知覚する現実環境をコン
ピュータにより拡張する技術、およびコンピュータに
より拡張された現実環境そのものを指す言葉

43. ARとはこんなもの
【使い方】
Scanしたモノの上にARコンテンツを表示する
０）JunaioブラウザをDLする
１）JunaioブラウザでQRコード読み込み
２）ARコンテンツを表示させたいものをスキャン

44. metaio Creatorでできること
・プログラミング不要でCG・映像をAR技術で配信することができる
・マーカーにARブラウザをかざすことで画像認識を行い、３DのCGや
動画を表示することができる
・Junaio（ARブラウザでみる）またはAndroid．iPhoneアプリに
書き出すことができる
※最近ARアプリ多すぎてAppStoreの審査は通らない！
・無料だとマーカー、モデルに制限あり
・無料だとアプリにロゴが必ずはいる
・配信サーバを100Mまでは無料で使える

45. metaio Creator＋CardBordでできること
・Oculusだと別途カメラをつけないといけないが、スマホのカメラが
使えるのでCardBord単体でARが実現できる
・VR＋ARでMR=Mixed Reality=複合現実を作ることができる
・MRとは？
CGなどで作った仮想現実を現実世界に反映(拡張)し、それを体験する
・Websocketでつながり、javascriptで使えるハード
ならVR・ARコンテンツと繋げられる

46. metaio creatorでのARの作り方は
吉永さん(九州先端科学技術研究所)
のブログへ！！
http://vizyoshinaga.sblo.jp/article/67725578.html

47. metaio CreatorをCardBord対応するには？
・AREL Sript-Global scriptに下記一行追加するだけ
arel.Scene.setStereoRendering(true);

48. metaio(AR)はHTML5Javascriptで
作ったアプリ・サイトを表示できる
今までのWeb技術でのコ
ンテンツを作成できる！

49. VR、ARという仮想現実の
没入感を更に高めたい

50. そんなときはLeapMotion!!

51. LeapMotionとは？
・手のジェスチャーでパソコンを操作できるデバイス
・本体をPCかMacにUSB接続することで動作する。
・９８００円くらい
・各言語のSDKが用意おり、Javascriptを利用して
ブラウザで利用することも可能
https://developer.leapmotion.com/gallery/chrome-draw

52. CardBordでARの仮想現実世界をのぞき、そ
の中のコンテンツをLeapMotionで操作するこ
とができる
複合現実のなかのものに触ることができる
CardBord+LeapMotion+metaio(AR)

53. 自分で3Dモデルを動かしてみたい！！

54. そんなときはUnity

55. Unityとは？
・Windows、MacOSXで利用できるゲーム開発環境
・Win、OSX、Linux、iOS、Androidへのアプリの
出力が無料で行える
・３Dだけでなく２Dも強化されてきている
・Asset Storeで自分がつくれないものは買って追加
（プログラム、３Dモデル、BGM、サウンド）
自分のできるものだけやり、他はAssetを組み合わせて
一つのアプリを作成

56. Unityとは？
自分のできるものだけやり、他はAssetを
組み合わせて一つのアプリを作成！！

57. Unityで無料で３Dモデル配布してます

58. Unityちゃんコンテンツを
GoogleCardBorｄで動かそう
準備するところまでは下記に藤崎がまと
めてます！
http://qiita.com/youukkari/items/c12a34cb7238de813080
http://qiita.com/youukkari/items/bd348b939d33f2260300

59. MMDも使えます
(MikuMikuDance)

60. GoogleCardBord対応はカメラを
追加するのみ

61. サンプルを改造しながら
いろいろ弄ってみよう！

62. 本日の振り返り
・CardBord楽しもう
・CardBordでコンテンツ作る方法について
RICOH THETA
metaio creator
Unity
・LeapMotionについて

63. 好きなモノを動かしてみる
と、楽しみながら色々覚えら
れるよ！！
触ってみよう！