ShopifyでARを実装する方法(2020/12版)

# Shopify Multipass Login 基本編
という手を抜いた記事でお茶を濁そうと思っていましたが、
めちゃくちゃ濃厚な記事を12/3にJimbaさんが上げてくださったので、もうMultipassやSSO関係はこれ以上ないと思います。ありがとうございました。
https://qiita.com/djjimba/items/4946c73742728003e5f5
あ、一個だけ庶民のための豆知識を置いておきます。MultiPass Loginのテストは、
Shopify Plusが無くても出来ますよ。Partnerアカウントで公開前のストアでしたらだれでも試せますので、皆様気軽にお試しください。

そして書くことがなくなったので・・

# 2020/12現在、ShopifyでAR(Quick Look)をやる方法
という、またライトなことを書きたいと思います。ShopifyとAR、2018年くらいにかなり注目をされていた記憶があります。
Shopify × ARのショッピング機能を公開！iOS 12でオンラインショッピングの新しいカタチを体験
https://www.shopify.jp/blog/introducing-shopify-ar
今すぐ参考にできる！ARを活用したShopifyストア11選
https://www.shopify.jp/blog/shopify-ar-examples
この記事も2019年1月ですね。
Shopifyのこの手のやつはすごい簡単に出来て楽ですねーで安請け合いしたため
眠れぬ夜を過ごしたお話をします。

# Shopify x ARの記事をたぐると
ShopifyのARページ
https://www.shopify.jp/ar
商品のメディアページ
https://help.shopify.com/ja//manual/products/product-media?shpxid=2ed5c29d-EDB4-4B7F-1418-37854470F15C
3D WarehouseによるShopify AR
https://help.shopify.com/ja/manual/products/product-media/3d-warehouse
にたどり着きます。

はーい、この通りにLiquid調整したら良いんすねー。

うんうん、簡単簡単。

ん・・・？何か先頭に書いてあったな・・？

![スクリーンショット 2020-12-05 2.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73553/93cd69cc-fc6f-a9d7-9e95-16c206a975b1.png)

あーなるほど。アプリは禁止にされてて、
直接商品画像にアップロードするのね。ふんふん。

![スクリーンショット 2020-12-05 2.43.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73553/fd6e19d5-3296-9fd7-693a-e0877daff3f6.png)

ん？usdzが上がらない・・？3Dモデルはglbだけ・・？

んーーー、え？てことは・・

基本的に独自実装するしかないってことかー！

# 2020年12月現在でShopifyでARを実装する方法(課題と解決）

その後本腰が入らずに解決に数日かけましたが、グダグダになりすぎるので、至った答えを書きます。
もっと良い方法がある気がするので、良い解決策がありましたら、是非教えてください。

## usdzファイル設置先の確保
AR Quick Lookを適切に表示するには、「usdzファイルを設置して、適切にMIMEを設定する」必要があります。
usdzの設置だけでしたら、Shopify Theme内、もしくはメディア内にも設置可能です。
ですが、MIMEが設定されていないと、ブラウザが適切にファイルを認識できないため、一度３Dデータが表示
される画面を挟む形で表示され適切とは言えないです。

usdzファイルの設置先としておすすめなのは、AWSのS3です。高負荷にも耐えられますし、MIME(Content Type)も簡単に設定できます。

## liquidをいじってAR Quick Lookへのリンクボタンを作成する
この時、いくつかのトラップがあります。
```
<div>
    <a rel="ar" href="/assets/models/my-model.usdz">
        <img src="/assets/models/my-model-thumbnail.jpg">
    </a>
</div>
```
この形で、rel="ar"がついてたら良いんやろ？というサンプルが多いですが、
1.リンク要素内を画像(img)にしないと、3D画面をはさみます
2.画像にはARっぽいアイコンが勝手に乗ります
これに対応する方法として、pictureタグを空で設置し、backgroundで対応で現時点は解決できます

# テーマのトランジションやJavascriptを疑いまくる

すいません、ここだけ具体的にかけないのですが、私がはまりまくったのはこの件でした。
テーマにページ変更時のトランジションが入っている場合、上記1-3が適切でも3D画面が表示されることがあります。
どうしても3D画面が消えない方は、一度トランジションを外してみてください。

私が行ったテストとしては、
1.手元のプレーンHTMLで動作確認
2.Debutで動作確認
3.対象テーマで動作確認
の順で行い、3でどうしても動かなくて、一パーツずつ削除していって問題を特定しました

#締めくくり
AR Quick Look自体すごい楽しいもんですが、思いの外苦労しました。
何度も書いてすいませんが、何か別の良い方法がある気もするので、あったら教えてください・・！
＆誰かアプリ作って欲しいです

#宣伝させてくださいー！
2020/12/16(水) に、日本初のShopify本をフォレスト出版より発売いたします！
「ネットショッピングどのシステムではじめると良いのかしら・・？」な方などいらっしゃったら、是非オススメを頂けると幸いです。
<a target="_blank"  href="https://www.amazon.co.jp/gp/product/486680114X/ref=as_li_tl?ie=UTF8&camp=247&creative=1211&creativeASIN=486680114X&linkCode=as2&tag=mkakuma08-22&linkId=c8e7dfa43a4eb554d1abd17d89971b4c"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN=486680114X&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=mkakuma08-22" ></a><img src="//ir-jp.amazon-adsystem.com/e/ir?t=mkakuma08-22&l=am2&o=9&a=486680114X" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />