AR.jsを使って雑にサクッとAR名刺を作った話

こんにちは，しまさん（@shimasan0x00）です．

• 学会やエンジニアのイベントで名刺配るとして，少し印象付けたいな
• 最近WebARが流行ってるから触りの触りくらいはやりたいかな

…そうだ，WebARの技術を使ってとりあえず雑にAR名刺作ろう！！ってなったので作りました．

非常に雑にシンプルに作成しているがゆえに使用している画像を差し替えるだけで誰でもAR名刺ができるようになっているので興味ある方は是非使ってみてください．

完成形

このARマーカーをかざせば上記のように動きます．

作成手順

1. 以下のレポジトリをとりあえずclone(or fork)する．
2. 自分のリポジトリを作成し，GitHub Pagesを有効にする
   1. リポジトリのページ -> Settings -> 下にスクロール -> GitHub Pages -> Sourceをmaster brunchにする
3. 先程作成したGitHub PagesのURLを元にQRコードを生成
4. QRコードの写真を使いAR Markerを作成
5. pptxファイルのテンプレートを編集して文字や画像を用意する
6. index.htmlの該当部分を4.，5.で作成したものの名前に変更する

1. GitHubのSrc

GitHub

あわせて読みたい

GitHub - Villager-B/Simple_AR_CARD: AR.jsとA-Frameを使ってサクッとAR名刺を作るレポジトリ

2. 使う技術(AR.jsとA-Frame)

GitHub

あわせて読みたい

GitHub - jeromeetienne/AR.js: Efficient Augmented Reality for the Web - 60fps on mobile!

ブラウザ上でお手軽にARを試せる軽量な素晴らしいライブラリです．

A-Frame

あわせて読みたい

Introduction – A-Frame

A-Frameは仮想現実（VR）を構築するためのWebフレームワークで，HTMLライクに書けるので非常にわかりやすいです．Documentがしっかりしててありがてぇ．

せっかくA-Frameを使うので<a-text>を使おうと思ったのですが，日本語が表示されなかったので今回は<a-image>を使用することで誤魔化し運用してます．

3. QRコード作成

手順の1と2の説明はここでは省略させていただきます．

とりあえずGitHub Pagesへ飛ぶためのリンクを含んだQRコードを生成します．

ぱっと思いつく方法では３つあります．

• 特定画像を使って作成(CuteRを使用する．ただ精度はいいとはいえない)
• リポジトリに用意したPythonプログラムを実行して作成する
• Webからサクッと作成する

特定の画像を使用しつつQRコードを作成したい場合はCuteRを使用します．

以下のようなQRコードができます.

# Install
pip install CuteR

# Useage

# Color画像生成
CuteR -C -o sample_output.png sample_input.png http://www.example.com

# 私の場合(例)
CuteR -C -o img/qr_profile.png img/profile.jpg https://villager-b.github.io/Simple_AR_card/

２つ目の方法はリポジトリにあるPythonプログラムを使用することです．

プログラム中にあるリンクの文字列を書き換えることでimg以下にQRコードが生成されます．

3つ目の方法が１番シンプルでしょう．

QRコード作成｜QRの解析｜クーポン発行 無料

あわせて読みたい

QRコード作成｜QRの解析｜クーポン発行 無料｜商用利用可｜クルクル マネージャー

上記のサイトで「URL」もしくは「テキスト」を選択して自分のGitHub Pagesのリンクを入れたらサクッとQRコードができます．

4.ARマーカーの作成

QRコードを作成したら次はARマーカーを作成しましょう．

jeromeetienne.github.io

あわせて読みたい

AR.js Marker Training

UPLOADで先程作成したQRコードのファイルを選択して，パターンファイルとARマーカー画像を保存してください．

5. テンプレートの編集

次はレポジトリにあるパワポのファイルを編集していきます．

ICON，名前，プロフィール，連絡先その他の構成になっています．

既存のものから書き換えて，要素を右クリックから図として保存でリポジトリのimg以下に保存しましょう．

あくまでテンプレートなので自分の好きなようにしていただいて結構です．

最終的な位置調整をするだけで再現可能ですので．

6. index.htmlの編集

あとは先程作成した画像とパターンファイルの名前でindex.htmlを書き換えるだけで完了です．

それぞれのコンポーネントのサイズを変更したいならwidthとheight，位置の変更をしたいならpositionを変更すればOKです．

さいごに

今回は雑ではありますがAR名刺ができました．

私は後はA-Frameのアニメーションを使用して各コンポーネントに少し動きをつけてとりあえずは終わりたいと思います．

A-Frame

あわせて読みたい

Animation – A-Frame

数行書くだけでAR体験できる時代になったんだなぁ．

shimasan0x00

Data Engineer

XYouTube

高専→大学編入→大学院→データエンジニア

専攻は計算社会科学，ウェブマイニング
趣味でSNSやVTuberのデータ集めたり分析しながら生活している