[NeosVR] Logixを用いた外部データの取得と活用（パンツパッチから）[HTTP GET String]

#はじめに

この記事は「NeosVR reso Advent Calendar 2020」の3日目です。
昨日は、@FLICKさんの「[【NeosVR】回る20ルピー【基礎練習】](https://qiita.com/FRICK/items/5ba9c07c31df844f84c7)」でした。

#対象&わかる人向けの説明

Neosで外部から情報を取りたい、という人向けです。

一例としてパンツ画像のガチャAPIから画像番号をJSONで取得後人力で番号を取り出し、
取得した番号を用いてパンツテクスチャのURLを生成します。Neosで使用できるAPIにはヘッダーを噛ませることができないため、Authorizationやcookieなどは扱いづらいです。

#Logixについて(始めたばかりの人向け)
Neosでは内部で機能を表す板のようなもの同士を、線をつなげることによりこちらが思うような動きをさせることができます。
一例で言えば、「表情を変えたいのだけどどうしたらいい？」というのに対して、下の様に流れを考えることができます。
「動かしたい人の取得」ー「コントローラの動きの取得」ー「シェイプキーに割り当て」

考えることができたら、あとはそれぞれを機能を表す板に変換していき、
それぞれをつないであげれば動かすことができます。
![Photo in Home handgesture.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/37f94fe0-d3ae-aecb-7255-6947f2d0f7ac.png)


#HTTP を利用したデータのやり取り
ブラウザの仕組みから話をしようとしましたがよくよく考えたらもっと丁寧に解説している人がたくさんいそうなのでそちらに投げることにします。良かったら[ここらへん](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/How_the_Web_works#So_what_happens_exactly)読んでみてください。今回やるのはこの文章の中の1-3までです。Neosでは組み立てる部分は自分で行う必要があります。

## 今回使用するAPI
話は変わりますが、TenTEEEさんと呼ばれる方が過去380枚ほどキッシュちゃん用のパンツ画像を作成しては、毎日投稿していたタイミングがあり、その後も時々イベントがあるたびにパンツ画像を作成しています。
また、pythonの画像処理を用いて、本当に様々なキャラクターに対してパンツを変換して下さっています。すごいですね。その上、それらファイルについての参考情報をWeb上から取得できるようにしてくれています。
また、それら取得できるものについても特に取得制限などは設けず、優しく使ってね、と非常に緩めに設定してくれています。

API: https://labten.net/pantie-patch/api/
GitHub: https://github.com/TenteEEEE/quiche_pantie_patch
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/0c1bcdcc-9c31-fdeb-9bb6-6b7e63b63f4b.png)

そのため、今回はこのAPIを使用し、無作為に画像を選択してくれるAPIを用いて画像のURLを生成することを最終目標としました。本当はPostも扱いたかったのですが、よさげなAPIがなかったので…

#実装例
今回考えるものは上に書いている通り、「無作為に画像を選択してくれるAPIを用いて画像のURLを生成する」ことです。ここからやりたい大まかなロジックとしては次の通りです.

1. 「ガチャガチャAPIにアクセスする」
1. 「取得できた番号から画像のURLを作る」
2. 「画像を取得する」

そのため、ざっくりとそれぞれに分解してみました。

今回の肝となるのはあくまでGETなので、整形の部分についてはざっくりとだけ。
今回のAPIですが、まずそのままアクセスすると次のように返されます。

```json:/
{
  "apps": [
    "dream",
    "convert",
    "suggest",
    "gacha",
    "zip"
  ]
}
```

今回使用するのはこのうち"gacha"になります。

```json:/gacha/
[
  "10ren",
  "1ren"
]
```

1renを回してみましょう。

```json:/gacha/1ren
[
  "0130.png"
]
```

画像のファイル名が取得できました（ランダムなので恐らく手元で取得したタイミングごとに番号が変わります）。あとはこのURLをそのままNeos上でも同じように取得する感じです。
Neos上では、[Get String]と呼ばれる板（「ノード」とよびます）を中心として、ざっくりとこんな感じにつないでいきます。![Photo in Home PicSend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/8fc1a0c4-fa29-4e0c-cf21-2e58cfad8b76.png)

後はこんな感じに整形して…（多分もっとまともな方法ありますが、今回はこれで行いました。
![Photo in Home parsing.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/f3ee5883-5d70-5e5b-8d51-2091897948c1.png)
画像URLとしてひっつけてあげれば完成です。
![Photo in Home attachURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/9d546b99-120d-e578-0940-44c061a02b90.png)
最初の取得する際にタイマーで周期的に取得すると指定した周期で画像が変わるようになります。
![Photo in Home timerset.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147334/2afbbd18-0ed0-74bb-b507-f5dfe90c557a.png)

#おわりに
記事にすると長いですが、手組してると5分コースになったりします。皆さんもぜひ外部からNeosへとデータをもってきて動かしてみてください。あとパンツ変えれるの楽しいよ。
今回の投稿で撮影・作成したノードが収録されているフォルダのURLです。インポートできる方は見てみてください。
neosrec:///U-kazu/R-597d3468-1397-4204-bb79-2daf4ab039ad

また、Neos内で聞いてくれれば実演しますので、もし見かけたら声かけてください。喜びます。

では。