幸せになり隊

幸せってなに?どうやったら幸せになれるの?そんな思いを密かに燃えたぎらせる人たちの試行錯誤の記録。

誰でも出来るARバースデーカードの作り方

友人の誕生日のお祝いにAR(拡張現実)バースデーカードを作ってみました。

スマホの「Junaio」というアプリで見ることができるARになります。

ARの部分だけなら10分くらいで無料で簡単に作れます
※台紙を作ったりアナログ作業のほうが大変

完成品

表紙

※この表紙にもこっそりARが仕込んであったりします。

f:id:wbhappy:20141222110421j:plain

中身

f:id:wbhappy:20141222133211j:plain

Junaioを使ってARを表示

 

画像では分かりませんが、オルゴールの「Happy Birthday to you」がBGMで流れています♪

 

ちょっとしたサプライズになったみたいで喜んでもらえました。

 

ちなみに、きのこは彼の好物です。

 

f:id:wbhappy:20141222110432p:plain

 

 

作り方

  1. インストール
  2. マーカーの追加
  3. ARコンテンツの追加
  4. Metaioクラウドにアップロード(チャネルの作成)
  5. テスト

 

1. インストール

Metaio Creatorをインストールします。
Metaioのクラウドサービスも利用するのでアカウント登録が必要になります。

このサイトからアカウントを登録してMetaio Creatorをダウンロードしてください。

ファイルがダウンロードできたらインストールしてください。

f:id:wbhappy:20141222113333p:plain
ダウンロードと同時にメールが送られてきているので、そのメールからサインアップのページを開きます。 f:id:wbhappy:20141222113337p:plain

必要事項を入力してサインアップしてください。

これでソフトウェアの準備は完了です。

f:id:wbhappy:20141222113426p:plain

 

 

2. マーカーの追加

ARを表示させるためのマーカーを追加します。

なんでもいいのですが、マーカーにしやすい画像というものがあり、上下左右の区別が付きやすい画像が好ましいようです。

f:id:wbhappy:20141222120612p:plain

 Metaio Creatorを起動して、画面下の「+」ボタンをクリック

f:id:wbhappy:20141222120810p:plain

ダイアログが表示されるので、一番左の「Image Tracking」を選択します。

f:id:wbhappy:20141222120831p:plain

画像の選択ダイアログが表示されるので、マーカーにしたい画像を選択します。

これでマーカーの追加は完了です。

 

選んだマーカの下に星が3つ表示されますが、これが「マーカーとしての良さ」を表しています。この例だと☆が2つでしたが、特に問題なく使えました。

f:id:wbhappy:20141222121131p:plain

 

3. ARコンテンツの追加

ARで表示させたいコンテンツを追加します。

画面右の「Image」ボタンをクリックして、ARで表示する画像を選択します。

 

3Dオブジェクトや音楽、動画などを追加したい場合はそれぞれ違うボタンをクリックして追加していってください。

 

無料枠では1チャネルにつき5個までが限界のようです。 チャネルについては後述。

f:id:wbhappy:20141222121928p:plain

 追加した画像がマーカーの上に表示されるので、配置などをドラッグして調整していきます。

 

f:id:wbhappy:20141222121944p:plain

視点の変更や、3次元の位置調整、大きさの変更などはそれぞれ画面左のボタンをクリックするとできるようになります。

 

調整が終わったらARコンテンツの追加は完了です。

 

f:id:wbhappy:20141222122418p:plain

 

4. Metaioクラウドにアップロード(チャネルの作成)

画面右下の「Upload to Metaio Cloud」というところに、「Sign In」ボタンがあるので、それをクリックしてサインインします。 

f:id:wbhappy:20141222124433p:plain

 

サインインすると「チャンネル」選択用のドロップダウンと、「Create」ボタンが出てきます。

まずは「Create」ボタンをクリックして「チャンネル」を作成します。

 

※チャンネルというのは、自分のAR配信用のサーバのようなものです。

ユーザはまずこのチャンネルにアクセスすることで、ARを見ることができるようになります。

 

f:id:wbhappy:20141222125019p:plain

チャネルを選択していると、「Create」ではなく「Upload」に表示名が変わっているはずです。

「Upload」ボタンをクリックすると、作成中のプロジェクトがクラウド上のチャンネルにアップロードされます。

 

アップロードが完了するとQRコードが発行されます。このQRコードをJunaioというアプリでスキャンすると、作成したチャネルにアクセスできます。

 

f:id:wbhappy:20141222130005p:plain

 

5. テスト 

  1. スマホに「Junaio」というアプリをインストール
  2. Junaioを起動
  3. 右上の「scan」をタップして、さきほどのQRコードを読み込みチャンネルにアクセスする
  4. チャンネル名が表示されたらそのままマーカを見る
  5. ARが表示されたらOKです!
    ※PC画面上の画像だと角度によってはマーカーが認識しづらかったのですが、印刷したらかなり改善しました。

   f:id:wbhappy:20141222110432p:plain

 

 

無料枠だと追加できるコンテンツ数などに制限がありますが、ちょっとしたものであれば全然問題なく作れます。

 

クリスマスが近いことですし、ARでクリスマスカードを作成してみてもいいかもしれませんね。ちょっとしたサプライズになると思います!

 

おわり