読者です 読者をやめる 読者になる 読者になる

炎上ブロガーのブログから火を噴かせるARアプリを作ってみた!!

プログラミング

スポンサーリンク


f:id:McG:20170314223133j:plain

先週から受講している,TechAcademyのUnityコースのカリキュラムも全て完了しました.

ということで,これからオリジナルアプリ開発を行っていくのですが,その前に!!

ちょっと練習がてらネタのARアプリを作ってみたいと思います!!

iPhoneで炎上ブロガーのブログを映せばそのブログから火が噴き出るというアプリです.

完成品がこちら!! ※動きます

https://i.gyazo.com/26586336b997f9aad99de5744de5d5b2.gif

完成までの流れも書いておきます.めちゃめちゃ簡単なので,初心者でも出来ると思います!!

作ろうと思った経緯

以前も少し触れましたが,私がTechAcademyで勉強したゲームエンジンのUnityは,あの有名なポケモンGoを作ったソフトです.

http://news-navi.xyz/wp-content/uploads/2017/02/508800-pokemon-go.jpg

ポケモンGoのメイン機能は何と言っても,現実社会にポケモンを映し出せるということ

現実世界と情報工学の融合である「拡張現実」,Unityを使えば簡単に実装できると聞いたらワクワクが止まりません.

迫

なんか拡張現実ってかっこいいし,やってみたいなー!!

そうだ,炎上しているブログから火を噴かせよう!!

とりあえず炎上ブロガーを探そう!!

という唐突な思いつきで,炎上してそうなブロガーさんを探しました.

炎上ブログとして有名な,宮森はやとさんの「今日はどんな本音を語ろう」にたどりつき,検索してみると…

なんと,彼のブログのトップページには,27個もの「炎上」という単語が散りばめられていました

f:id:McG:20170308233803p:plain

迫

これはすごい!!!!

このブログから火を噴かせたいぃぃぃぃ!!

でもさすがに失礼か...

そこで,宮森さんにFacebookでコンタクトをとると,なんとあっさり了承

f:id:McG:20170308234020p:plain:h300

という経緯で,宮森さんの炎上ブログをiPhoneの画面ごしに見ると火を噴くアプリを作ることになりました

vuforiaに登録・設定

今回,ARライブラリとしては最も有名なVuforiaというライブラリを使います.

Vuforiaの開発者用サイトから登録を行います.

ページ上部の Registerから登録ができます

f:id:McG:20170308160115p:plain

メールアドレスの認証後, Add License Keyを押し,ライセンスキーの取得を行います.

アプリ名などを入力するだけなので簡単です.

f:id:McG:20170308171148p:plain

確認画面に飛ぶので,入力内容を確認して次へ進みます

f:id:McG:20170308171231p:plain

指定したアプリ名が追加されてたらOKです.

f:id:McG:20170308171422p:plain

次にデータベースを作成します. Add Targetタブを選び,その後 Add Databaseを選択します.

f:id:McG:20170308173303p:plain

そして,必要事項を入力してデータベースを作成します.

f:id:McG:20170308173510p:plain

作成したデータベースをクリックすると以下の画面が現れるはずです. Add Targetから必要情報を登録していきます.

f:id:McG:20170308174041p:plain

ARマーカーに使用する画像などを登録していきます.

f:id:McG:20170308174445p:plain

ここで,ARマーカーとして宮森はやとさんの「今日はどんな本音を語ろう」のバナーのスクリーンショットを使用しました.

f:id:McG:20170308174431p:plain

ここで使用する画像をかえれば,さまざまな炎上ブログを素材にすることが出来ます.

データベースを作成できたら, Download Database(All)をクリックしてダウンロードします.

f:id:McG:20170308174544p:plain

Unityを使うので, Unity Editorを選択しましょう

f:id:McG:20170308174718p:plain

そしてもう一つ必要なものが開発キットです.

Vuforiaの開発者用サイトから DownloadタブDownload for Unityを選択します.

f:id:McG:20170308174926p:plain

ダウンロードした2つをUnityへと取り込んでいきます

f:id:McG:20170308175209p:plain

UnityでARを使い準備

まず,Unityを起動します.

そして, Assets→Import Package→Custom Packageから,先ほどダウンロードした2つをインポートします.

f:id:McG:20170308230309p:plain

インポートに成功すると,以下のようにプロジェクトビューに追加されているはずです.

f:id:McG:20170308230434p:plain

ヒエラルキービューに ARCameraImageTargetを追加します.

f:id:McG:20170308230658p:plain

Unityでプロジェクト作成時にはじめから入っている Main CameraImage Targetの2つは削除してもらって大丈夫です.

ARCameraを選択した状態で,インスペクタビューの Datasetsにある以下の2つにチェックを入れます.

f:id:McG:20170308230942p:plain

このARCameraを使うには,Vuforiaの開発者用サイトで先程取得したライセンスキーを使います.

f:id:McG:20170308231547p:plain

これで,ARCameraの設定は完了です.

先程追加した Image Targetの設定も必要なので, Image Target Behavior(Script)DataBaseImage Targetの2つをEmptyから自分が設定したものに変更しましょう.

f:id:McG:20170308231750p:plain

これで,ARを行う準備は完了です.

設定した画像を検知することが出来るようになりました.

検知したら炎を出すようにしてみる

画像の検知が出来るようになったので,あとは画像を検知したら炎上させるだけ.

Assets→Import Package→Particle Systemsを選択し,パーティクルをインポートします.

f:id:McG:20170308232145p:plain

先程のImage Targetを選択して, Add Componentから Effect→Particle Systemを選択します.

f:id:McG:20170308232328p:plain

Image Targetを選択したまま,インスペクタビューの Particle SystemからRendrrerの中の Materialのところを見つけ,先程インポートした炎のマテリアルを選択します.

f:id:McG:20170308232547p:plain

実行すると以下のように,みやもさんのブログを検出し,炎上させてくれます ※動きます

https://i.gyazo.com/26586336b997f9aad99de5744de5d5b2.gif

まとめ!!

と,Unityを初めてわずか1週間の僕が30分でARを実装できてしまいました.

ほんと,数年前までは実装するのがめちゃめちゃ大変だった技術も,今は簡単に実装できるようになっています

こんなに楽しいし,敷居も低くなっているのに,プログラミングやらないなんてもったいない!!

こういうのをさくっと作るの,すっごい面白いので,みなさんも是非やってみてください!!

あと,僕のネタに対して嫌な顔ひとつせずOKしてくれた炎上ブロガーみやもさんはたぶんめっちゃいい人です.

© 2016 Yuki Sako.