【初心者でも1時間でできる！】撮った写真をAR化していつでもどこでもｲｯﾇといっしょ🐶

## ｲｯﾇを会社に連れてって
私には**ｲｯﾇ**という友達がいます。
<img width="200" alt="いぬいんざずぼん.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/58a52ecb-4978-14ab-e70f-fc5d12d4edcf.jpeg">
ｲｯﾇと私は一心同体。一緒にお出かけしたり、チームを組んでハッカソンに出たりしています。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">もいせん賞！　イッヌ！<br><br> <a href="https://twitter.com/hashtag/%E3%82%82%E3%81%84%E3%81%9B%E3%82%93%E3%83%8F%E3%83%83%E3%82%AB%E3%82%BD%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#もいせんハッカソン</a> <a href="https://t.co/8CqTqvFoC9">pic.twitter.com/8CqTqvFoC9</a></p>&mdash; 菅原のびすけ （プロトアウト9期募集中) (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1652606845075472385?ref_src=twsrc%5Etfw">April 30, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

家でもいつも一緒:house:
在宅勤務の時は、いつもそばで励ましてくれます。
<img width="300" alt="FxBmVXnakAchn01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/26a28651-8922-9738-40f2-d73fc290b1ab.jpeg">

**そんな可愛いｲｯﾇを会社にも連れていきたい**！

しかし、**築き上げたデキる女のイメージ**:lipstick:を守るためにも、ｲｯﾇを会社に連れていくわけにはいかない:scream:

**そこで！**

ARの技術を使い、**どんなときでもｲｯﾇといっしょにいられるWebアプリ**を作りました！

## ｲｯﾇといっしょ！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【ｲｯﾇ in AR🐶】<br>ｲｯﾇがARで登場するWebアプリ「ｲｯﾇといっしょ！」がやっとのことで完成しました✨これで大好きなｲｯﾇといつでもどこでもいっしょにいられる🥹<br>ﾅﾃﾞﾅﾃﾞﾅﾃﾞﾅﾃﾞ…<a href="https://twitter.com/hashtag/ARjs?src=hash&amp;ref_src=twsrc%5Etfw">#ARjs</a> <a href="https://twitter.com/hashtag/HTML?src=hash&amp;ref_src=twsrc%5Etfw">#HTML</a> <a href="https://twitter.com/hashtag/%EF%BD%B2%EF%BD%AF%EF%BE%87?src=hash&amp;ref_src=twsrc%5Etfw">#ｲｯﾇ</a> <a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/OhSepx5ied">pic.twitter.com/OhSepx5ied</a></p>&mdash; 🐶ちーろってぃ🐶 (@chiiirotty) <a href="https://twitter.com/chiiirotty/status/1662449437338378240?ref_src=twsrc%5Etfw">May 27, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## つくりかた
この記事通りの手順で、**あなたが撮った写真をARで表示**することができるようになります！
**所要時間：1時間**
さあ、やってみましょう:information_desk_person_tone1:

### ◎つかうもの
まずは以下の3つのツールをアカウント登録orインストールしましょう！
すべて無料で使えます:ok_hand:
- [CodePen](https://codepen.io/your-work)：HTMLの開発環境なので必須ではないが、開発中スマホでAR表示を確認するのに便利
- [ペイント 3D](https://apps.microsoft.com/store/detail/%E3%83%9A%E3%82%A4%E3%83%B3%E3%83%88-3d/9NBLGGH5FV99?hl=ja-jp&gl=jp)：写真を3Dモデルに変換できるアプリ
:::note warn
ペイント3Dは**Windows専用**のアプリです。
:::
- [Firebase](https://firebase.google.com/?hl=ja)：このサービスに3Dモデルをアップロードし、取得したURLをHTMLコードに埋め込んでAR表示する。無料版でOK。

### ◎手順
#### ①写真を撮る
<img width="200" alt="イッヌ赤椅子.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/5809e653-023c-c65b-ac7e-a72c5e29e345.jpeg">

:::note info
背景を消して写っているものを切り出したい場合は、[切り抜きAC](https://clipping-ac.com/)を使うと簡単にできます。1日当たりの使用回数に制限はありますが、登録なども特に必要なく利用できます。
:::

#### ②ペイント3Dで写真をglbファイルに変換する
**ペイント3D**で、「メニュー」⇒「開く」から3Dモデル化したい写真を選択します。

こうして・・・
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/9c89eaca-5d22-ab1a-ca9e-7a468a22568f.png">
こうして・・・
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/3b321df3-17b2-a6cc-586b-9294c9453078.png">
**こうじゃ！！！**
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/5b119fda-8dc1-08d3-554b-95e05e2c614b.png">


画像は「名前を付けて保存」⇒「3Dモデル」から保存します。
ファイルの拡張子が**glb**になっていることを確認しましょう！
<img width="400" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/88c98930-6ad9-c1da-fd75-770c30a6c9a8.png">
<img width="100" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/bbfebab8-2b91-66c0-e9dc-c166d7569e33.png">

#### ③Firebaseにglbファイルをアップロードする
- 「プロジェクトを追加」からテキトーな名前のプロジェクトを作成する
- 「構築」⇒「Storage」を選択する
<img width="250" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/6e341f54-ef9e-2e11-ba17-651b64bf552e.png">

- 「ファイルをアップロード」で先ほど作成した**glbファイル**を選択し、アップロード
- アップロードしたファイルを選択し、リンクになっている箇所の上で右クリック⇒「リンクのアドレスをコピー」：https[:]//firebasestorage.googleapis.com～といった長いURLがコピーされていればOK:ok_woman_tone1: URLは次の手順で使います:point_down:
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/f70b16c5-14a9-28b5-8bcc-c725a838b163.png">


#### ④CodePenでコーディング！
といっても、私が既に作ったアプリを**Fork**して、3Dモデルファイルへのリンクをあなたが作った3DモデルのURLに変えるだけです:ok_hand:

- まずは以下のリンクを開いてください。
[ｲｯﾇといっしょ！ -CodePen](https://codepen.io/blttsxag-the-solid/pen/ZEqPXOY)

- 右下の**Fork**を押すと、あなたのワークとしてコピーされます。**Save**することをお忘れなく～
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/9c74b3d8-e2a0-1766-4e6e-3feacf2efe63.png)

<details><summary>CodePenを使わない方はこのHTMLコードをコピーして使ってください</summary>

```HTML:HTML
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>ｲｯﾇといっしょ！</title>
</head>
<body style="margin : 0px; overflow: hidden;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ar.js/2.2.2/aframe-ar.min.js"></script>
  <a-scene embedded arjs>
    <a-marker preset="hiro">
       <a-entity
          position="0 -2 -2"
          scale="10.5 10.5 10.5"
          rotation="0 0 180"
          height="-1"
          gltf-model="https://cors-anywhere.herokuapp.com/https://firebasestorage.googleapis.com/v0/b/[あなたの3DモデルのURL]">
      </a-entity>
    </a-marker>
      <a-entity camera></a-entity>
  </a-scene>
</body>
</html>
```
</details>

- **a-entity**タグ内の**gltf-model**のURLを先ほどコピーした3DモデルのURLに書き換えます。ちょっと変なURLに感じますが、「https[:]//cors-anywhere.herokuapp.com/」以降をまるっと書き換えてください。

```HTML:HTML
<a-entity
          position="0 -2 -2"
          scale="10.5 10.5 10.5"
          rotation="0 0 180"
          height="-1"
          gltf-model="https://cors-anywhere.herokuapp.com/https://firebasestorage.googleapis.com/v0/b/[あなたの3DモデルのURL]">
</a-entity>
```

以上で手順は終了です！お疲れさまでした:beers:

## つかってみよう！
CodePenのURLをLINEで送るなどして、スマホで開いてください:iphone:
私は**iPhone**を使用し、**Chrome**で開いています。

今回は時間の都合上オリジナルのARマーカーではなく、ARの手始めに非常によく利用される**hiroマーカー**を使います。スマホで開いたCodePen上のカメラで、以下の**hiroマーカー**を映してみてください！
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2122199/ae221d2e-aa81-d6a7-a9f5-a5fbe4e70b72.png">

以下のようにあなたが撮った写真が表示できたら成功です:clap:
<img width="300" alt="S__38723588.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/4d04e4cd-33d5-9af0-6304-052ae48282c4.jpeg">

## （おまけ１）Netlifyにデプロイ
今回作成したWebアプリは[Netlify](https://www.netlify.com/)という**静的サイトを無料でホスティングできるサービス**にデプロイしています。
[ｲｯﾇといっしょ！ -Netlify](https://withinnu.netlify.app/)

Netlifyにデプロイするときは、CodePen上のコードを少し改変する必要があります。
まずはCodePen右下の「Export」⇒「Export .zip」でコードをエクスポートしてください。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/6e98259a-134c-7762-d73e-27415046f941.png">

ダウンロードしたzipファイルを展開すると、**distフォルダ**の中にindex.htmlがあります。同じ階層に、**glbファイル**を配置してください。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2958610/34b76678-f87c-87f9-ddf0-079edaddf1a9.png">

コードは、**a-marker**タグ内の**gltf-model**のURLを以下のように書き換えます。
```HTML:HTML
<a-marker preset="hiro">
       <a-entity
          position="0 -2 -2"
          scale="10.5 10.5 10.5"
          rotation="0 0 180"
          height="-1"
          gltf-model="./innu.glb">
      </a-entity>
</a-marker>
```

Netlifyの詳しい使い方は割愛しますが、上記の状態で**distフォルダを丸ごとアップロード**するとうまくいきます:ok_woman_tone1:

## （おまけ２）トラブルシューティング
### ◎画像が表示されない！
HTML上で、**gltf-modelのURL**が間違っていないか確認しましょう！
httpsが2回繰り返されるので違和感がありますが、問題ありません。
Firebaseからのコピーミスなどもないか確認しましょう:point_up:
```
gltf-model="https://cors-anywhere.herokuapp.com/https://firebasestorage.googleapis.com/v0/b/[あなたの3DモデルのURL]"
```

### ◎画像が反転している！
**a-marker**タグ内の**rotation**の値をいじってみてください！
3つの数字は**x軸・y軸・z軸**を表し、各軸をもとに**何度回転させるか**を指定します。

### ◎画像のサイズがおかしい！
**a-marker**タグ内の**scale**の値をいじってみてください！

### ◎画像の位置がおかしい！
**a-marker**タグ内の**position**の値をいじってみてください！

その他うまくいかないことがあれば、コメント欄で教えてください:pray:
可能な限りいっしょに考えます！

## あとがき
今回ｲｯﾇの2D画像をARで表示しよう！と決意してから参考情報をいろいろ探したのですが、なかなか見つかりませんでした:sweat:

[Qiita質問](https://qiita.com/chiiirotty/questions/728a697a558532862c1f)を含めた各所で質問した結果、参考記事や代替案を提案してくださったり、コードが動かない原因を丁寧に教えてくださった方がたくさんいらっしゃいました。

また以下記事は、記事を書いたご本人から直接ご連絡をいただき、大変参考になりました。当記事は、以下記事の情報を**2023年5月現在の最新版**にアップデートした内容になっております。
- [【推しを愛でるプロジェクト第2弾】バイクと推しキャラをWeb上ARカメラで立体表示してみた #推し活 #バイク好き](https://qiita.com/yui-kouy/items/e25c40d5c007cadfdcc2)

助けてくださった皆様に、この場を借りて御礼申し上げます:pray: