ARアプリを作ろう（WebViewAR＋ARマーカー）

AR(拡張現実)とは「Augmented Reality」の略で、現実空間に、まるでそこにあるかのようなバーチャルオブジェクトを表示させる手法です。
一口にARアプリと言ってもさまざまな種類がありますが、今回この教材では「サクッと手軽にARアプリ」が作れて、作ったARを、友達や職場の人、大好きな人に、気軽に見てもらえるように、ブラウザで体験できる「WebViewAR＋ARマーカー」でARアプリを作ります。

Web ARとは、専用のアプリをインストールせずに、URLにアクセスするだけで簡単にARが楽しめます。
SNSやメール、QRコードでURLを送信し受け取った相手はURLにアクセスするだけでブラウザが立ち上がりARが登場します。

学習内容

• ARの基本である、画像表示や３Dモデル、アニメーションをARマーカー上にAR表示できるようになります。
• 教材で学んだ事を応用して、自分の書いた絵や写真、３Dモデルなど、好きなように、AR表示できるようになります。

受講における必要条件

• HTMLの知識があれば。なくても可。
• サーバーにファイルをアップロードできる知識があれば。なくても可。

この教材の対象者

• ARに興味はあるけど、どうやって作ったらいいのか？わからない人。
• 初めてARアプリを作る人。
• 初めてWebARアプリ（WebViewAR＋ARマーカー）を作る人。

学ばないこと

AR表示する３Dモデルの作り方については、この教材では説明しません。
教材で使用するpng画像や３Dモデルは、ダウンロードできます。

作成するアプリケーションのイメージをつかもう

ARマーカー上に、「にゃんこ」png画像を表示する。
いろんなサイズのARマーカーで試してみる
!video CatWebAR 動画

ARマーカー上に、3Dモデルを表示してみる
!video DountWebAR 動画

ARマーカー上に、3Dモデルのアニメーション表示してみる
!video CakeAnimationWebAR 動画

オリジナルのARマーカー上に３Dモデルを表示してみる
!video QRWebAR 動画

画面をTapしてリンク先に移動してみる
!video TapWebAR 動画

目次

0章 はじめに

本教材を進める上での概要説明、開発環境と動作環境を解説していきます。

1章　ARマーカー上に、「にゃんこ」png画像を表示してみよう

表示に必要なARマーカーとA-frameの実装を解説します。

2章　ARマーカー上に、3Dモデルを表示してみよう

3Dモデルを使って、AR表示する実装を解説します。

3章　ARマーカー上に、3Dモデルのアニメーション表示してみよう

3Dモデルのアニメーション表示する実装を解説します。

4章　オリジナルのARマーカーを作成する

QRコードを作成し、オリジナルのARマーカーを作成する解説をします。

5章　オリジナルのARマーカーに３Dモデルを表示する

オリジナルのARマーカー上に３Dモデルを表示する実装を解説します。

6章　画面をTapしてリンク先に移動する

画面をTapしてリンク先に移動する実装を解説します。