プログラミング

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

こんにちは,学生エンジニアの迫佑樹(@yuki_99_s)です.

先週から受講している,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を使えば簡単に実装できると聞いたらワクワクが止まりません.

[voice icon=”https://cdn-ak.f.st-hatena.com/images/fotolife/M/McG/20180616/20180616133321.png” name=”迫” type=”l”]
なんか拡張現実ってかっこいいし,やってみたいなー!!
そうだ,炎上しているブログから火を噴かせよう!!
とりあえず炎上ブロガーを探そう!!
[/voice]

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

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

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

f:id:McG:20170308233803p:plain

[voice icon=”https://cdn-ak.f.st-hatena.com/images/fotolife/M/McG/20180616/20180616133321.png” name=”迫” type=”l”]
これはすごい!!!!
このブログから火を噴かせたいぃぃぃぃ!!
でもさすがに失礼か…
[/voice]

そこで,宮森さんに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してくれた炎上ブロガーみやもさんはたぶんめっちゃいい人です.

公式LINEに登録してビジネスを学ぼう
無料LINEマガジンへの登録で、5つの豪華特典をプレゼント!
  1. 日本一わかりやすい「経済的自立を果たす人生攻略の10ステップ」(33分23秒)
  2. 見るだけで売上3倍は確実。「時給10円から年商10億」に至るまでの全ての道のり(39分15秒)
  3. 有料講演会の内容を公開。最短最速で0→1を立ち上げる起業術(1時間08分35秒)
  4. 起業初心者へ向けた即金で10万円を稼ぐ具体マニュアル(PDF24ページ)
  5. 資本主義社会においてお金持ちになる5つのルール(17分36秒)
その他、有益なコラムを完全無料で閲覧し放題!
\豪華特典を今すぐゲット/