カテゴリー
サインイン 新規登録
学習時間 3時間
難易度 初級
質問投稿
価格 ¥1,480
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

【WebAR】ARアプリを作ろう(WebViewAR+ARマーカー)

WebARはブラウザ上でAR体験できる技術。URLにアクセスするだけで楽しめるアプリインストール不要のAR開発を学ぶ。

5
最終更新 2020/7
non@nonnonkapibara

学習内容

アプリインストール不要でARが体験できるWebAR開発を学びます。

QRコード、ARマーカーを使って、画像表示や3Dモデル、アニメーションのAR表示ができるようになります。

この教材の対象者

ARに興味はあるけど、どうやって作ったらいいのか?わからない方や、初めてARやWebAR(WebViewAR+ARマーカー)を作る方向けです。

受講における必須条件

HTMLやJavaScriptの知識があると好ましいですが、全く分からなくても大丈夫です。サーバーにファイルをアップロードできる知識がある方。初めての方はNetlifyネットリファイ(無料) でのアップロードの方法を教材で説明しています。

この教材を学ぶことで身につくスキル

教材で学んだ技術を応用して、オリジナルのARを作る事ができます。例えば、QRコード付きの名刺にAR表示させたり、お友達のお誕生日にARマーカー付きのバースデーカードを送ることもできます。

この教材で学ばないこと

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

なぜこの教材を作ろうと思ったか

この教材で「ARって簡単に作れる!!とっても楽しい♪」という事を体験していただいて、自分だけのオリジナルなARをたくさん作っていただければと思います。

本教材で質問対応可能なOSや環境

  • Mac OS
  • Windows OS

カリキュラム

Section 0 はじめに
Section 1 ARマーカー上に、「にゃんこ」png画像を表示してみよう
  • 1-1 1章の目標物
  • 1-2 ARマーカーを準備する
  • 1-3 png画像を用意する
  • 1-4 ファイル構成
  • 1-5 htmlのテンプレート
  • 1-6 headエリアの説明
  • 1-7 bodyエリアの説明
  • 1-8 1章で使用したソース
  • 1-9 サーバーにアップロードしてみよう
  • 1-10 AR表示してみよう
  • 1-11 ゴーグル表示してみよう
Section 2 ARマーカー上に、3Dモデルを表示してみよう
  • 2-1 2章の目標物
  • 2-2 ARマーカーを準備する
  • 2-3 3Dモデリングを用意する
  • 2-4 ファイル構成
  • 2-5 htmlのテンプレート
  • 2-6 headエリアの説明
  • 2-7 a-markerエリアの説明
  • 2-8 a-obj-modelエリアの説明
  • 2-9 カメラ位置
  • 2-10 第2章で使用したソース
  • 2-11 サーバーにアップロードしてみよう
  • 2-12 AR表示してみよう
  • 2-13 いろんな3DモデルをAR表示してみよう

講師のプロフィール

教材のレビュー

5.0
1件の評価
100%
0%
0%
0%
0%
横川 惠 6ヶ月以上前
AR名刺を作りたいと思っていましたが、YOUTUBE を見ても全くのAR初心者(web site は作ったことがあります。)には良い教材がなくどうしたもんかと思っていたところ、偶然この教材を見つけました。  プログラムは、最初はコピペすればいいと思っていたのですが、それでは覚えられないと思い1行ずつ書いていきました。  間違えながらサンプルコードと見比べ作っていきました。  おかげさまで、ウ もっと見る