この記事ではSTYLY MobileでQRコードを使用したロケーションマーカーの作り方を解説します。
STYLYマーカーの種類
2021年8月現在、STYLY Mobileで使用できるSTYLYマーカー(QRコード)には2種類あります。
それぞれ「シーンマーカー」と「ロケーションマーカー」に分かれていて特性が異なります。
シーンマーカー
「シーンマーカー」はシーンのURLのみを含んだQRコードを読み取るSTYLYマーカーです。STYLY StudioでARシーンを作成すると必ず「シーンマーカー」が発行されます。シーンマーカーは平面検知を行い、ユーザーが自ら配置する場所を変えることができます。
シーンマーカーの例
シーンマーカーの平面検知
ロケーションマーカー
シーンマーカーとは別に「ロケーションマーカー」というものがあります。これはロケーションベースのARを作成する際に必要なマーカーです。渋谷PARCOで常設展示されているデジタルインスタレーション作品「Worlds end supernova」はこのロケーションマーカーを使用しています。
設置されているロケーションマーカー
ロケーションマーカーを使用すると画像のように現実空間にピッタリ合ったARオブジェクトを配置できます。
ロケーションマーカーを用いることで、現実空間でのシーン位置を指定することができるようになります。ロケーションマーカーを使うには、Studioで「AR Scene Template (with Location Marker)」というテンプレートを使ってシーンを制作してください。シーン内の「Location Marker」の位置と向きが、実空間のマーカーと対応しています。
ロケーションマーカーの制作方法
ロケーション用のシーンをつくる
まずはロケーション用のシーンを実際に作ってみましょう。まずはSTYLY StudioにアクセスしCreateから「AR Scene Template (with Location Marker)」を選択します。
選択するとStudioの画面が切り替わり、このような画面になります。
そのままAR空間を作成しましょう。シーン上に「Location Marker」というオブジェクトがありますが、こちらの位置や向きを変えることで現実世界に設置するロケーションマーカーの位置や向きと同期するようになっています。(※例えば印刷したロケーションマーカーを壁に貼る場合、シーン内の「Location Marker」を垂直に配置します)
シーンが完成したら左上のボタンからシーンをパブリッシュします。Proアカウントではシーンを公開/非公開のどちらかを選べます。公開したくない場合はUnlistedを選択しましょう。
ARシーンが完成したら左上の公開ボタンを選択します
シーンの設定を行います。FeaturedTagsの「AR」タグが選択されているか確認しましょう。こちらのタグを選択しておくとGalleryからシーンマーカーが表示されるようになります(※Galleryで表示されるマーカーはロケーションマーカーではないので注意)
「Public」「Unlisted」「Private」から選びます。Publicは一般公開でStudioSTYLYのGalleryに表示されます。UnlistedはシーンのURLを知っている人だけがアクセスできGalleryには表示されません。Privateはユーザーがシーンを読み込むこと自体が不可になります。
シーン設定を終えたら右上の「Open in Gallery」ボタンからGalleryページに飛びます。すると新しいタブが開きシーンのGalleryページが開きます。このページのURLをコピーします。
シーンIDからロケーションIDを作成する
Proアカウントの方は、STYLY Pro / Pro Unlimited お問い合わせフォームからロケーションID発行依頼をお願いいたします。
Pro Unlimitedアカウントの方は、以下手順からロケーションIDを発行します。
下記URLからロケーションページにアクセス後、「新規ロケーション」ボタンをクリックします。
https://gallery.styly.cc/location
新規ロケーション
ページ右側に「ロケーション名」「説明」「シーン」の3項目を設定します。
3項目を設定
①ロケーション名
ロケーションの名前です。体験時にユーザー画面に表示されるので分かりやすい名称を設定しましょう。
②説明
ロケーションの説明欄です。どのようなロケーションARなのか分かりやすい名前に設定しましょう。
③シーン
この項目にシーンURLかシーンの名前を入力します。
シーンのURLを入力
シーン名検索も可能
入力するとシーンの候補が表示されるのでロケーションを設定したいシーンをクリックしてリストに追加します。
シーンをクリックしてリストに追加
ここまで入力できたら右下の「保存」ボタンを押します。するとロケーションページの項目に作成したロケーションIDが表示されますのでこちらをコピーします。
ロケーションIDをコピー
ロケーションIDからロケーションマーカーを作成する
次はロケーションIDを使用しロケーションマーカーの制作に入りますが、印刷時の原寸大のロケーションマーカーの大きさを事前に決めておく必要があります。
印刷時のロケーションマーカーの原寸大の大きさとは、下記画像のように実際に印刷した際のマーカー部分の縦横の長さ(m)です。
(※①と②の比率は必ず1:1である必要があります)
ロケーションマーカーではこの縦横の実寸大の情報(cm)を後ほど生成するQRコード内に含む必要があります。内部的にはこの情報をもとにStudioのシーンスケールを調整しています。(※例えば10cm×10cmの情報をもったロケーションマーカーを原寸大30cm×30cmで刷してしまうとシーン内のスケールが狂います)
ではロケーションマーカーを作成しましょう。
①ロケーションIDを下記の赤文字の部分と置き換えます
https://styly.cc/ja/mobile/?location={ロケーションID}
(例:https://styly.cc/ja/mobile/?location=734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e)
②ロケーションIDの後に印刷時のロケーションマーカーの実寸大の大きさを入力します(cm)
https://styly.cc/ja/mobile/?location={ロケーションGUID}&size={印刷時のサイズ}
(20cm×20cmの場合:https://styly.cc/ja/mobile/?location=734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e&size=0.2)
③作成した文字列を下記のサイトでエンコードします。
https://www.tagindex.com/tool/url.html
黒枠内に先程の文字列を入力。左下のエンコードボタンをクリックします
すると【 https%3A%2F%2Fstyly.cc%2Fja%2Fmobile%2F%3Flocation%3D734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e%26size%3D0.2】 といった文字列が生成されます。
④生成された文字列を下の赤文字と入れ替えます。
https://stylymr.page.link/?link=https://STYLY_REPLACE&apn=com.psychicvrlab.stylymr&isi=1477168256&ibi=com.psychicvrlab.stylymr
(例:https://stylymr.page.link/?link=https%3A%2F%2Fstyly.cc%2Fja%2Fmobile%2F%3Flocation%3D734f73ca-4eb7-4d3f-8c4b-14cf1c99af5e%26size%3D0.2&apn=com.psychicvrlab.stylymr&isi=1477168256&ibi=com.psychicvrlab.stylymr)
⑤上記の文字列を下記サイトを使用してQRコードへ変換します
https://qr.quel.jp/form_bsc_msg.php
「テキスト」部分に文字列を入力します
(文字列を入力します)
生成されたQRコードを画像ファイルとしてローカルドライブ等に保存します
(QRコードのサイズ等は印刷する大きさによって適正値が変わるので状況に応じて変更してください)
⑥QRコードとロケーションマーカーを合成する。
画像編集ソフト等で生成したQRコードとロケーションマーカーを組み合わせます。
ロケーションマーカーのaiファイルはこちら https://drive.google.com/file/d/1hGpowVQjRLTKsoMqtMt6YpAaPvZFj7RT/view?usp=sharing
マーカー生成に関するレギュレーション等はこちら https://drive.google.com/file/d/1n42VhofeRKecKskMgmT4RNu4zDkeepS8/view?usp=sharing
上記のレギュレーションは厳守してください。利用者がARコンテンツを体験できない場合があります。
以上でロケーションマーカーの作成は終了です。
Q＆A
Q.1 既にロケーションマーカーを大量に印刷してしまいました。印刷時の実寸大の大きさ部分だけを変更できますか？
現状できません。過去に「STYLYマーカーの実寸大の大きさの設定値を間違えたQRコードを複数枚印刷してしまいコンテンツ側でどうにかならないか」という状況が起こりました。この場合、残念ながら正しい原寸大の大きさを設定したQRコードを再度印刷するしか方法がありません。ですので印刷時の原寸大の大きさの確認は入念にお願いいたします。