狠狠撸

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

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

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

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

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

本日作成するコンテンツ

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

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

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

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

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

Account name (Zapparでのユーザー名)、
電話番号、会社名、部署を入力して
[START USING ZAPWORKS]をクリック
ユーザー名電話番号
会社名部門

コンテンツ管理画面が表示されたら準備完了

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

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

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

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

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

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

zapcodeのデザインを選んでダウンロードし、[CONTINUE]をクリック
③ Continue
① デザインを選択
② ダウンロード

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

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

[USE THIS TRACKING IMAGE]をクリック
クリック
マーカーとして適しているかをチェック
緑：最適、黄色：ふつう、赤：不向き

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

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

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

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

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

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

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

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

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

UPLOAD IMAGES
[UPLOAD IMAGES]をクリックして
残りの画像(02.jpg～07.jpg)をアップロード

USE SELECTED IMAGES
USE SELECTED IMAGESをクリック

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

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

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

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

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

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

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

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

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

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

① Actions
② Go to scene ? Scene 1

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

② BUTTONをクリック
① Scene1
? ムービー
④ Actions
? Go to scene → Scene 2

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

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

参考
参考
? 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

狠狠撸

础搁コンテンツ作成勉强会：奥别产ブラウザで简単作成！スマホ础搁(窜补辫辫补谤编)

More Related Content

础搁コンテンツ作成勉强会：奥别产ブラウザで简単作成！スマホ础搁(窜补辫辫补谤编)