クリスマスカードや年賀状にピッタリ!?始めようお手軽AR – 公益財団法人 九州先端科学技術研究所

クリスマスカードや年賀状にピッタリ!?始めようお手軽AR

0.はじめに

オープンイノベーション・ラボ 吉永です。
現実空間にCGなどのデジタル情報を重ねることで世の中を便利にするAR(Augmented Reality)技術は、昨年話題になったポケモンGoはもちろんゲームや販売促進などで多く利用され、いつでも体験できる身近な技術になりました。
さらに、ARコンテンツの開発に関しても最近は様々な支援ツールが登場したことでプログラミングの知識がなくても始めることが出来ます。
そこで今回は誰でも簡単にスマホ対応のARコンテンツを無料で作ることができるZappar(ザッパー)というツールをご紹介します。ARを使ったグリーティングカードやパンフレットなどをサクッと作るのに丁度よい手軽さなので興味のある方はぜひお試しください。

※同様の記事を昨年も弊所の旧ブログに投稿しましたが、最新の内容にアップデートして再掲しています。

1.まずは体験

ARコンテンツを利用するにはまずスマートフォンにZapparというアプリケーションを事前にインストールする必要があります。
Android用→Download
iOS用→Download

インストールが済んだらZapparを起動しましょう。初回起動時は使い方の解説など表示されますが、GET STARTED等をタップして読み飛ばしてください。
問題なくインストールされているとカメラの映像が画面に表示されますので、以下の風景画の右上にあるZapcode(丸いマーク)を撮影しましょう。

アプリがうまくZapcodeを認識してくれるとコンテンツの読み込みが始まりますので少し待ちます。
それが終わったらマーカー(風景画)にスマホをかざしてみましょう。動画や写真がマーカー上に現れるはずです。さらに写真の方はアルバムになっていてタップすると複数の写真をスワイプで切り替えながら見ることができます。

このようなコンテンツをプログラミング無しでボタンクリックだけで作れてしまうのがZapparです。

2.アカウントの作成

Zappar対応コンテンツを作るにはまず、アカウントの作成が必要です。
登録サイトにアクセスし、facebook、google、メールアドレスのいずれかを使って登録します。なお、メールアドレスでの登録の際にはパスワードと生年月日も入力してAGREE AND REGISTERをクリックします。
すると料金プランの選択画面が表示されるのでPersonalの枠内のチェックボックスにチェックを入れ、CREATE A PERSONAL ACCOUNTを選択します。
※メールアドレスで登録をした方は確認メールが届くのでそちらに記載されたリンクまたはボタンをクリックすると下記のページが表示されます。

続いてNew Personal Accountというページが表示されるのでID名(自分の名前やニックネーム)の入力と属性(開発者とか学生とか)の選択を行い、CONTINUE TO ZAPWORKSをクリックします。

そして下記のようなページが表示されればアカウント作成は成功です。
ちなみにこの画面は作ったコンテンツの一覧やチュートリアル動画を見ることが出来るダッシュボードです。また右上には5という数字が表示されていますが、これは無料で作ることができるコンテンツの数です。
※5個作ってしまった場合は不要なコンテンツを編集して再利用することが可能です。また1.5$/個を支払えばコンテンツを増やすことも可能です。

3.ARコンテンツ作成

この記事では先ほど体験したコンテンツの作り方について紹介します。
まず初めにこの演習で使用する素材が入ったzipファイルをダウンロードし、どこか分かり易い場所に解凍してください。
→こちらからDownload

ではコンテンツを作る方法を紹介しますが、ここからはシンプルに手順を箇条書きで記述してきます。

3.1 マーカーの作成と登録

・ダッシュボード左上のMAKE A NEW ZAPCODEをクリック
・コンテンツ名のを半角で入力
・Zapcodeの形(丸or四角)を選択
CONTINUEをクリックします

・ツール選択ダイアログでdesignerを選択し、CREATE ZAPCODEをクリック
・ダッシュボードにコンテンツへのリンクが生成されたことを確認
CLICK TO EDITをクリックして詳細ページを開く

・詳細ページ内のEDIT ZAPCODE CONTENTをクリック
・コンテンツ開発方法の紹介動画は無視してDOWNLOAD YOUR ZAPCODEをクリック

・マーカー画像上に貼り付けたいデザインのZapcodeを選ぶ
DOWNLOAD PNGをクリックして分かり易い場所に保存
・画像編集ソフト等でsampleフォルダ内のmarker.jpgを開く
・その上にダウンロードしたZapcodeの画像を埋め込んで保存
 ※この資料ではmarker.jpgという名前で上書き保存
CONTINUEをクリックして次に進む

UPLOAD TRACKING IMAGEをクリック
・先ほどの手順で作成したZapcodeが埋め込まれたマーカー画像(marker.jpg)を選択
・アップロードが終わるまで待つ
・スマホをかざした時のマーカーの認識しやすさを評価した結果が表示される
※全体的に緑がかっていればOK。赤が多い場合は別の画像を使用してください
・問題がなければUSE THIS TRACKING IMAGEをクリック

 

3.2 表示するコンテンツの登録

先ほどの操作が上手くいくと背景にマーカーが描かれたエディタが表示されます。この節ではエディタ画面上でマーカーの上に表示するコンテンツを選んで位置やサイズの調整等を行い、最終的にスマートフォンでARを体験するまでの手順について解説します。

まずは動画の追加。
・画面右側のコンテンツリストからVIDEOをクリック
Uploadボタンをクリックし、sampleフォルダ内のmovie.mp4を選択
・アップロードが終わると画面の中心に動画が追加される
・下記を参考にマウス操作で動画を好きな位置/サイズ/向きに調整

ここで一旦、動作確認をしましょう
・エディタ画面右上のPREVIEWをクリック
・動作確認用に一時的に発行されたZapcodeとマーカー画像が表示される
・スマホにインストールしたZapparを起動して動作確認
・マーカー上に動画が表示され、タップしたら再生すれば成功
・動作を確認出来たらPC画面に表示されたZapcode Previewを閉じる

続いて複数の写真を一括で表示するPhoto Albumを登録しましょう
・エディタ右側のコンテンツリスト内のPHOTO ALBUMをクリック
UPLOAD IMAGESをクリック
・sampleフォルダ内の01.jpg~07.jpgを一括アップロード
※過去にzapparでコンテンツを作ったことがある人は、Recently Uploaded Imagesにアップロード済みの画像が表示されるのでそれを利用することもできます。
・sampleフォルダ内の01.jpg~07.jpgを一括アップロード
・画面中央に複数の写真が重なったような画像が現れる
・先ほどと同様、位置/サイズ/向きを好きなように調整
・再びPREVIEWをクリックしたあとスマホで動作確認
・フォトアルバムをタップして複数の画像を閲覧できればOK

次はコンテンツ登場の際のアニメーションを設定します
・画面下方のSCENE TRANSITIONSをクリック
Transition In側のコンボボックスから好きなアニメーションを選択
※この資料ではScale up with fade
・Lengthの下のテキストボックスにアニメーションにかける時間入力
※この資料では1秒
・あとはこれまでと同様に動作確認をし、CGが表示される際にアニメーションがかかればOK

ここまでで大体完成となります。ただし、現段階ではプレビューをクリックしたときにしかARコンテンツを体験できず、他の人に体験してもらうことができません

必ず最後に画面右上のPUBLISHをクリックして公開しましょう。

ARコンテンツは公開後も編集することができますが、そのあとも必ずPUBLISHすることを忘れずに気を付けましょう。

あと、他の人に見てもらう場合には以下のように使い方ガイドもあると親切だと思います。

4.まとめ

ご紹介したようにZapparを使えばプログラミングを一切することなくスマホ対応のARコンテンツを作ることができます。さらにフォトアルバムでの写真の切り替えに便利なスワイプ操作や、今回は紹介しませんでしたがボタンを押したときの様々な挙動もノンプログラミングで実現することが可能です。いろいろと遊んでみてください。
この記事を実践してみて分からないことや、他のツールを使ったコンテンツ開発など、ARに関して気になることがございましたら気軽にお尋ねください。