WebAR(AR.js)で使用するホスティングサービスNetlifyを使う


環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️iPhone7(IOS 12.1)
⭐️Blender v2.79.6
⭐️Mac Book
⭐️ブラウザ　safari

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🌸WebAR🌸やってみたよぉ🤩<br>（●＾o＾●）ｖ<br>WebブラウザでARマーカーを読み込んでみました🏖️<br>（マーカー式）<br>くるくるしてるハートは☀️Blender☀️のアニメーション を表示。<br>❤️ハート❤️をTapすると🎁Qiitaページへ🌈ジャンプ‼️作ってみたよぉ<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/WxJlDZckKm">pic.twitter.com/WxJlDZckKm</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110160511671263232?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



１.Netlifyのサイトに登録する
GitHubや、Bitbucketで、ログインできます。
https://app.netlify.com/
<img width="850" alt="スクリーンショット 2019-03-26 20.09.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/c4a6df24-882c-f653-b112-23bd7c33f8cb.png">

2.ファイルごとにUPできる
<img width="1156" alt="スクリーンショット 2019-03-26 20.21.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/4fc15442-e1be-df75-f26d-83244f77d077.png">

3.ソースを変更して、更新する場合、一旦、ファイルを削除する
<img width="1105" alt="スクリーンショット 2019-03-26 20.22.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/63dc2007-e0d9-2698-f20b-1079d7a91a25.png">

<img width="634" alt="スクリーンショット 2019-03-26 20.24.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/8bcc4d90-67fa-52fc-0cc1-f99da6bdefe8.png">


４.ファイルをDropする
https://app.netlify.com/drop
<img width="1164" alt="スクリーンショット 2019-03-26 20.16.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/64b68c77-986d-5c45-e0f2-60f98fb34aaa.png">

5.URLのアドレスを変更する
<img width="784" alt="スクリーンショット 2019-03-26 20.26.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/e4aa5085-9297-45e1-e9da-c58fe22ccf8d.png">


<img width="730" alt="スクリーンショット 2019-03-26 20.27.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/93155/4a8e7024-b94c-dc8c-b52b-409cfe289a42.png">


これで、完了！！



<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">💎WebAR💎<br>Inkscapeで書いた絵を🎊png🎊出力して表示してみたよぉ。<br>ARマーカーに近づけたり、遠ざけたりしてみたよぉ🤩<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/8GMhhy6Ths">pic.twitter.com/8GMhhy6Ths</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110180591343812608?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🚩WebAR🚩<br>Blenderで出力した３Dモデルは🐱pngに比べて表示がちょっと重いみたい🐷<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/AR%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ARマーカー</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/Bs76WIWu1X">pic.twitter.com/Bs76WIWu1X</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110183471064866832?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">🎂WebAR🎂<br>Blenderで作ったアニメーション 「Walk」🍭を出力して表示してみた。<a href="https://twitter.com/hashtag/WebAR?src=hash&amp;ref_src=twsrc%5Etfw">#WebAR</a> <a href="https://twitter.com/hashtag/AR%E3%83%9E%E3%83%BC%E3%82%AB%E3%83%BC?src=hash&amp;ref_src=twsrc%5Etfw">#ARマーカー</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://twitter.com/hashtag/XRMTG?src=hash&amp;ref_src=twsrc%5Etfw">#XRMTG</a> <a href="https://t.co/cibKbmLw10">pic.twitter.com/cibKbmLw10</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1110185243879702529?ref_src=twsrc%5Etfw">2019年3月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


類似記事
【WebVR】360度全天球を試してみた。A-FrameでWebVR 表示してみたよぉ。
https://qiita.com/nonkapibara/items/1419e55bae2c4c611523