簡単便利なARブラウザのZappar対応コンテンツ作成の基礎。(2017年5月5日改訂版)

1. ARコンテンツ作成勉強会
#AR_Fukuoka
Webブラウザで簡単作成！スマホAR

2. 実際にARを体験しよう (1/2)
ARブラウザZapparの導入
① まずGoole play (Android)またはApp Store(iPhone,iPad)にアクセス
② 「zappar」と検索してアプリをダウンロード・インストールを実行
・ もちろん無料！
【利用環境】
•iPhone, iPad
(iOS 5.1.1以降)
•Android端末
(2.3以降)

3. 実際にARを体験しよう (2/2)
ARブラウザzapparの利用手順
① スキャンボタン
③ 読み込み
④ 絵(マーカー)に
スマホをかざす
② Zapcodeを撮影

4. サンプルコンテンツ
コンテンツ① コンテンツ②
基本的にZapcodeとマーカー画像の組み合わせでできている

5. Zappar利用時の処理の流れ
1.Zappar を起動
2.スマホをかざしてZapcode をスキャン
3.コード に対応するコンテンツをダウンロード
※QRコードみたいなものだと考えてください
4.マーカー画像にスマホをかざす
i. 画像処理でマーカを見つける
ii. マーカーの位置・姿勢を推定
iii. コンテンツを重ね合わせてAR

6. 本日作成するコンテンツ

7. 演習素材
こちらからsample.zipをダウンロードし、
分かりやすいディレクトリに解凍してください
https://goo.gl/mqPpNn

8. アカウントを作成しよう (1/5)
 登録サイト(https://my.zap.works/register/)にアクセス
 facebook / google+ / e-mailでアカウントを作成

9. 補足：メールの場合
届いたメール内に表示される確認用ボタンをクリック
クリック

10. アカウントを作成しよう (2/5)
【個人用】
コンテンツを1つ無料で作れる。(1個追加あたり1.5$)
【ビジネス用】
月額45$(Basic)、135$(Pro)で無制限にコンテンツ作成。
30日間有効なコンテンツを作れる無料トライアルあり。
個人用 ビジネス用 教育用

11. アカウントを作成しよう (3/5)
色々と試したい場合は、ビジネス用の無料トライアルがお勧め
※ あとから個人用アカウントを作れる(同じ登録情報でOK)
個人用 ビジネス用 教育用

12. アカウントを作成しよう (4/5)
Account name (Zapparでのユーザー名)、
電話番号、会社名、部署を入力して
[START USING ZAPWORKS]をクリック
ユーザー名 電話番号
会社名 部門

13. アカウントを作成しよう (5/5)
コンテンツ管理画面が表示されたら準備完了

14. コンテンツ作成を始めよう
画面左上の[MAKE A NEW ZAPCODE]をクリック
クリック

15. コンテンツ名の設定とZapcodeの作成
 Make Your Zapcodeでコンテンツ名を記入
 Zapcodeのデザイン(丸or四角)を選択
① コンテンツ名
② CONTINUE

16. エディタを選択
[designer]を選択して[CREATE ZAPCODE]をクリック
① 選択
② クリック

17. コンテンツを開く
管理画面にコンテンツに追加されたコンテンツをクリック
クリック

18. コンテンツを開く
EDIT ZAPCODE CONTENTをクリック
EDIT ZAPCODE CONTENT

19. マーカーの登録 (1/4)
DOWNLOAD YOUR ZAPCODEをクリック
クリック

20. マーカーの登録 (2/4)
zapcodeのデザインを選んでダウンロードし、[CONTINUE]をクリック
③ Continue
① デザインを選択
② ダウンロード

21. 補足：マーカー画像の作成
画像編集ソフトなどを使用し、マーカーとして
使用したい画像にzapcodeを埋め込む(今回は割愛)
これを埋め込む

22. マーカーの登録 (3/4)
[UPLOAD TRACKING IMAGE]をクリックしてmarker.jpgをアップロード
※ 通常はマーカー画像にzapcodeを挿入するが今回は省略
クリック

23. マーカーの登録 (4/4)
[USE THIS TRACKING IMAGE]をクリック
クリック
マーカーとして適しているかをチェック
緑：最適、黄色：ふつう、赤：不向き

24. マーカーに適した画像と適さない画像
多くの特徴点
マーカーに向いた画像
特徴が少ない
マーカーに向かない画像
濃淡や境界がはっきりした複雑な画像がマーカーに向いている

25. コンテンツ編集画面
ここに表示したい
オブジェクトを配置
表示オブジェクトのリスト

26. 表示する画像を追加
IMAGEをクリック
→ 01.jpgを選択

27. 位置・サイズの調整
クリックして選択
回転
中をドラッグ
して移動
端をドラッグ
して拡大縮小

28. 動作確認
① PREVIEW
② Zapparで読み込み
PREVIEWボタンをクリックしZapcodeを発行し動作を確認
注) PREVIEWで発行されたzapcodeの有効期間は5分程度なので
コンテンツを外部に公開する場合はPUBLISHを用いること

29. 2つめの画像を追加 (1/2)
travel.pngを選択
IMAGEをクリックからtravel.pngをアップロード

30. 2つめの画像を追加 (2/2)
背景透過PNG
Zapparでは背景透過のPNG画像を利用できる

31. 動作確認
透過を確認

32. オブジェクトの削除
クリックして選択
→ [Delete]キー

33. フォトアルバム (1/3)
PHOTO ALBUM

34. フォトアルバム (2/3)
UPLOAD IMAGES
[UPLOAD IMAGES]をクリックして
残りの画像(02.jpg～07.jpg)をアップロード

35. フォトアルバム (3/3)
USE SELECTED IMAGES
USE SELECTED IMAGESをクリック

36. 見た目を整えて動作確認
② PREVIEW
① 位置・大きさを調整

37. 動作確認
スワイプで画像の切り替えが可能

38. シーンの追加
＋ボタンをクリック

39. 動画のアップロード (1/2)
① VIDEO
Scene2が追加される
新たに作成されたScene2に動画を追加

40. 動画のアップロード (2/2)
② Upload
→ movie.mp4
自分でアップロードした動画やYouTube, Vimeoも利用可能。
今回はsampleフォルダ内のmovie.mp4を使用。

41. 見た目を調整して動作確認
Propertiesで動画の挙動を設定

42. 動作確認
動画でなくフォトアルバムが表示されてしまう・・・

43. シーンの優先度を変更
Scene1をScene2の右に移動

44. 動作確認
今度は動画が表示される

45. シーンの遷移 (Scene2→Scene1)
① BUTTONをクリック
② 画面下方に移動
Scene2からScene1へ移動するためのボタンを作成
➂ アルバムへと入力

46. シーンの遷移 (Scene2→Scene1)
① Actions
② Go to scene ➂ Scene 1

47. 動作確認
zapworksのバグにより画面遷移が動作しないことがあります。
その場合は一度、トップ画面に戻ってから再度コンテンツ
作成画面に入り、Go to sceneの設定をしてみてください
① zapcodes
② クリック

48. シーンの遷移 (Scene1→Scene2)
② BUTTONをクリック
① Scene1
➂ ムービー
④ Actions
➄ Go to scene → Scene 2

49. シーンの遷移時のエフェクト
① SCENE TRANSITION
② Fade in
➂ 継続時間

50. コンテンツを世界に公開
PUBLISH

51. 参考
参考
• Zapcode creatorのページ
https://zapcode.it/
• 個人ブログ
http://tks-yoshinaga.hatenablog.com/
• designerモードの使い方 (by 吉永)
http://www.slideshare.net/ssuserc0d7fb/ar0webar
• widgetsモードの使い方 (by 松本)
http://www.slideshare.net/yusukematsumotogibson/ar-
65158599