Rhino.Computeの環境構築手順（ローカルでGrasshopperをWebアプリと連携する）

## はじめに
Rhino.Compute は Rhino + Grasshopper を Webアプリと連携させる強力な仕組みです。
この記事では、ローカル環境で Rhino.Compute を起動し、McNeel公式のJavaScriptサンプルが正しく動くところまでの手順をまとめます。

## 動作環境
* OS：Windows 11
* Rhino 8 
* Python（3.x）
* Visual Studio 2022

## Step1: ローカルマシンでのRhino.Computeのセットアップ
こちらを参考に

https://developer.rhino3d.com/guides/compute/development/

### リポジトリをクローン
* [github](URL"https://github.com/mcneel/compute.rhino3d")にアクセス
* 左上のドロップダウンから、Rhinoのバージョンに合わせて8.x or 7.x　を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/d8cb1315-8223-4faf-9ebf-26e11616535d.png)
* 緑の`<>code`のボタンを押して、URLをコピー
* リポジトリをクローンするフォルダでコマンドプロンプトを開き、下記を実行
```
git clone https://github.com/mcneel/compute.rhino3d.git
```
→`compute.rhino3d`というフォルダがクローンされる

### ソリューションをコンパイル
* `C:\Users\"ユーザー名"\compute.rhino3d\src`のフォルダ内の、`compute.sln`をvisual studioで開く
* 画面上左のドロップダウンが`Debug`になってる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/49273124-2fb6-445c-9045-e24c5a1f1355.png)
* ファイルメニューの”ビルド”→”ソリューションのビルド”
* →compute.geometry, rhino.computeがビルドされる
* ソリューションエクスプローラーパネルで、rhino.computeプロジェクトを右クリック→「スタートアッププロジェクトに設定」を選択
* ソリューションエクスプローラーでrhino.computeを選択し、上の三角マーク＋rhino.computeのところを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/d0aebce4-1be4-4c9c-96df-9099f03744b1.png)
* →rhino.computeが立ち上がる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/60624bf1-dab5-4fc4-aedc-d3402e2f2dba.png)


## Step2: GitHubからサンプルを取得
公式のサンプルリポジトリ：
🔗 https://github.com/mcneel/rhino-developer-samples

### ダウンロード方法：
* 上記URLを開き、ブランチを 8 に切り替える
* 緑の「Code」ボタン → 「Download ZIP」
* ZIPを解凍後、以下のディレクトリを開く：`compute/js/SampleGHText/`




## Step3: ローカルサーバーを立てる（Python）
今回はSampleGHTextというサンプルファイルを動かしてみる。
* ターミナルでSampleGHTextのフォルダに行き、ローカルサーバーをたてる

``` 
cd rhino-developer-samples\compute\js\SampleGHText
python -m http.server 8000
```

* →成功すると、下記のように出る
```
Serving HTTP on :: port 8000 ...
```

* ブラウザで以下を開く：
```
http://localhost:8000/
```

* →RhinoCompute Server URLが要求される。
* ここに、`http://localhost:5000/`といれる。（最後に"/"が必要！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/9c407de8-5b45-40a6-834b-95c7dcdca65f.png)
* 最後の数字の部分はrhino.computeのコンソールで`Now listening on: http://localhost:5000`のようにでている数字に合わせる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/7f1f4183-643e-46ba-8cfd-9d3d95d6b77a.png)


サンプルが立ち上がった！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/fb88374e-cedd-40b5-808e-720a313c0f44.png)
* 上部のスライダーで文字の高さを操作
* テキストボックスに入れたテキストがモデルに反映される
* downloadボタンから3dmファイルをダウンロードできる

## トラブルシュート
**問題： ブラウザでローカルサーバー（`http://localhost:8000`）にアクセスしてもポップアップが表示されない**
解決策：　ブラウザのローカルストレージに保存されたcompute_urlを削除して再読み込み
* ブラウザでF12をおしてデベロッパーツールを表示
* 上部の`Application`タブ（なければ右の>>を押せば出てくる）の`Local Strage`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4106006/43821def-b9e4-4d41-92e2-d5f2a4c1934b.png)
* keyの`RHINO_COMPUTE_URL`を右クリックしてDelete
* もしくは、ここのValueを書き換える（最後の`/`抜けてないか？）



**問題：ローカルサーバー`http://localhost:8000`でファイルAを開いた後、同じローカルサーバーでファイルBを開こうとしてもファイルAが表示されてしまう**
解決策：`Ctrl + Shift + R`でリロード。キャッシュを無効化