__[デザイン戦略（インタラクション） / オープンデザイン実践](https://hackmd.io/s/HJVVNqnpZ)__ >
# Remote CHIRIMEN

* branded url: https://urls.jp/remotechirimen
* すぐ試したい方: 下記のチュートリアルのリンク先をお試しください

Remote CHIRIMEN では PC やスマートフォンのウェブブラウザと Raspberry Pi 3 (以下 RPi3) を接続し、ブラウザ上の HTML/CSS/JavaScript だけでバーチャルなグラフィカル画面とリアルなデバイスの両方を連携させたデバイスを開発できるようにします。

W3C や CHIRIMEN のコミュニティが提案している低レベル API を使い、既存のウェブ開発の知識やツールなどをそのまま活かして簡単に IoT プロトタイピングが可能です。

### CHIRIMEN について
[CHIRIMEN](https://chirimen.org/) とは、さまざまなモノがコンピュータネットワークで繋がる未来の社会においてもヒトは重要な存在であり、ヒトとモノがウェブを介して互いに協調しあえる環境がウェブブラウザを核として作られていくという考えの元、ウェブブラウザの JavaScript から直接モノを操作する API を実現している環境であり、そのコミュニティです。

具体的には、[WebGPIO](https://rawgit.com/browserobo/WebGPIO/master/), [WebI2C](https://rawgit.com/browserobo/WebI2C/master/) などモノを制御する低レベル Web API を提案し、それをウェブページで操作できるようにブラウザや Polyfill ライブラリ (と接続先のバックエンド) を開発、公開しています。詳しくは [CHIRIMEN のサイト](https://chirimen.org/) をご覧ください。

### CHIRIMEN for Raspberry Pi 3 について

[CHIRIMEN for Raspberry Pi 3 (以下 CHIRIMEN RPi3)](https://github.com/chirimen-oh/chirimen-raspi3) は、CHIRIMEN の活動のうち、安価で入手性もありブラウザの動作に必要なパフォーマンスも備えた RPi3 上で CHIRIMEN の環境 (WebGPIO, WebI2C の polyfill 実装) を実装したものです。詳しくはプロジェクトの[リポジトリ](https://github.com/chirimen-oh/chirimen-raspi3)をご覧ください。

Remote CHIRIMEN では [CHIRIMEN RPi3](https://github.com/chirimen-oh/chirimen-raspi3) をベースとして、ローカルのデバイスではなくリモート接続先のデバイスを制御するようにしています。

## 基本手順

Remote CHIRIMEN の使い方やコードの書き方は基本的に通常の [CHIRIMEN RPi3](https://github.com/chirimen-oh/chirimen-raspi3) と同じです。

CHIRIMEN RPi3 では RPi3 上のブラウザからローカル Node ブリッジサーバに接続しますが、Remote CHIRIMEN では PC やスマートフォンから RPi3 の Node サーバに接続してリモートからモノを制御します。そのため最初に接続先 RPi3 を指定する必要があります。

1. [Remote CHIRIMEN 用の polyfill](https://github.com/akkyie/polyfill) を利用する
* サンプルコードや jsfiddle で読み込む polyfill を入れ替える必要があります
2. JavaScript で WebGPIO, WebI2C を利用する前に接続先のサーバを切り替える
* PC やスマホと RPi3 が Web Socket 通信できるよう、同一ネットワークに接続させる必要があります
* polyfill.js 冒頭でデフォルト接続先を RPi3 の IP に書き換えるか、利用するプログラム側でデバイス操作をする前にサーバの URL を指定する必要があります

詳しくは次のチュートリアルをご覧ください。

## チュートリアル

まずはこちらのチュートリアルを試してみてください。

* **Raspberry Pi 3 の IP 確認と SSH 接続手順**
* Mac編: https://hackmd.io/s/SJtZJwr0Z
* Windows編: (準備中)
* PC と RPi3 にネットワーク共有によって接続し、RPi3 の IP アドレスを確認したり SSH 接続して RPi3 の操作をする手順を説明しています
* **REMOTE CHIRIMEN チュートリアル**
* https://hackmd.io/s/BJAZphXRZ
* 同一ネットワークに接続した RPi3 のデバイスを PC やスマホから操作する手順を説明します。
* **REMOTE CHIRIMEN デモ解説**
* https://hackmd.io/s/Bk1oqD0CW
* チュートリアルの最後に動作させるサンプルコード集の説明です
* サンプルとしては L チカ、ボタンなどの GPIO デバイスの扱いと、光センサーや温度センサーなど I2C デバイスを扱い、それらを A-Frame で実装した VR　の画面と連携させるデモがあります
* チュートリアル＆デモのコード
* https://github.com/akkyie/chirimen-raspi3/
* チュートリアルとデモ解説ページに従ってご利用ください

## Remote CHIRIMEN (with jsffidle) チュートリアル

PC やスマホ側のブラウザ画面で表示する HTML に [A-Frame](https://aframe.io/) を利用することで、容易に VR の世界とリアルな世界を組み合わせてインタラクションを行うことができるようになります。

具体的には次のチュートリアルをご覧ください。

* CHIRIMEN x A-Frame チュートリアル (GUI 編)
* https://hackmd.io/s/Bk45dTXnZ
* jsfiddle で編集したコードを読み込んで L チカするチュートリアルです。**RPi3 用に HDMI ディスプレイとキーボードとマウスを用意している場合**のみこちらを参照ください
* CHIRIMEN x A-Frame チュートリアル (CUI 編)
* https://hackmd.io/s/B1Yx9jsT-
* jsfiddle で編集したコードを読み込んで L チカするチュートリアルです。HDMI ディスプレイなどがない場合でも **PC と RPi3 を有線 LAN で接続して制御する手順**です。
* 同一ネットワークに接続すること、RPi3 の IP アドレスを確認して jsffidle の JS コードの `setPolyfillServerURL` でその IP アドレスを指定するよう書き換えることをお忘れ無く！

## 関連リファレンス

関連プロジェクトなど、より詳しく知りたい方へ

### Remote CHIRIMEN 関連
* Remote CHIRIMEN チュートリアル
* 上記を参照してください
* Remote CHIRIMEN 用 polyfill 実装
* https://github.com/akkyie/polyfill
* https://github.com/akkyie/gc-vr

### CHIRIMEN 一般 (Remote CHIRIMEN 用以外)
* CHIRIMEN コミュニティ
* https://chirimen.org/
* CHIRIMEN RPi3
* https://github.com/chirimen-oh/chirimen-raspi3
* CHIRIMEN RPi3 のチュートリアル集
* https://github.com/chirimen-oh/chirimen-raspi3/wiki/Tutorial
* こちらは CHIRIMEN RPi3 に HDMI ディスプレイ、マウス、キーボードを接続して操作する前提のチュートリアルであることに注意してください。Remote CHIRIMEN　で同一の操作を行う場合、チュートリアル中に出てくる画面は表示されないし、jsbin/jsffidle のサンプルは RPi3 接続先が localhost:33330 である前提になっているためそのままでは動作しません。Remote CHIRIMEN 用の環境で、コード部分だけ参考にして同じことをする必要があります (Remote CHIRIMEH 用にコピーして書き直してくれる人募集中)

### A-Frame 関連
* A-Frame
* https://aframe.io/
* 基本的なサンプル
* [Hello World](https://aframe.io/examples/showcase/helloworld/)
* [視点を合わせてリンクしていくサンプル](https://aframe.io/examples/showcase/360-image-gallery/)
* [Theta などの全天球動画埋め込み](https://aframe.io/examples/showcase/videosphere/)
* ドキュメント
* [イントロ](https://aframe.io/docs/0.7.0/introduction/)
* [インストール](https://aframe.io/docs/0.7.0/introduction/installation.html)
* 基本的な書き方
* [HTML と基本要素](https://aframe.io/docs/0.7.0/introduction/html-and-primitives.html)
* [基本的なシーンの作り方](https://aframe.io/docs/0.7.0/guides/building-a-basic-scene.html)
* [全天球画像ギャラリー](https://aframe.io/docs/0.7.0/guides/building-a-360-image-gallery.html)

## トラブルシューティング
Remote CHIRIMEN を使用する上でよくあるトラブルと解決策を以下にまとめます:

### RPi3 にネットワーク共有ができない

PC/Mac から RPi3 にネットワーク共有できない原因はいくつか考えられます。次のことを確認してください。

#### RPi3 に電源が供給されていること
RPi3 の microUSB 端子に電源を供給してください。電源を入れると RPi3 ボード上の LED が光ります。様々なデバイスを接続しても電力不足になったりパフォーマンス低下しないよう、専用の 3A 対応 AC アダプタを強く推奨しますが、簡単な処理だけなら PC などの USB ポートからの電源供給でもある程度は動作します。

#### RPi3 に microSD カードが挿入されていること
カードが挿されていなければ OS もサーバも起動しないので忘れないようにしてください

#### ケーブルが奥まで接続されていること
RPi3 の LAN ポートの LED ランプが点灯することや、ネットワーク共有する OS 側の設定画面でケーブルが繋がっていないというエラーが出ていないか確認してください。

#### PC/Mac で USB LAN アダプタが正常に認識されていること
アダプタによっては OS 標準搭載のドライバでは利用できず、ドライバのダウンロードが必要になることがあります。

#### RPi3 を先に起動していること
RPi3 は自動的にネットワークの共有を検出して接続しますが、起動後に共有を開始した場合、すぐに上手く認識しないことがあります。その場合は RPi3 の電源を入れ直せば起動時には必ずネットワーク接続をしようとするので解決します。

#### 上流 (Internet 側) のネットワーク接続が共有可能なものであること
例えば、慶應義塾大学の CNS や世界中の大学でローミング接続する eduroam や企業内ネットワークなど、ユーザ認証や Mac アドレス登録を行って接続するネットワークではネットワーク共有ができない場合があります。そのような場合 PC/Mac を共有可能な WiFi ネットワークに接続して RPi3 に共有するか、RPi3 と両方を同一の WiFi ネットワーク (接続端末間での通信を許可しているもの) に接続してください。

### RPi3 の IP アドレスが分からない
こちらのチュートリアルに従って IP アドレスを調べてください: https://hackmd.io/s/SJtZJwr0Z

### RPi3 に SSH 接続ができない
RPi3 上でサーバのリセットを行ったり RPi3 の WiFi 設定を書き換えたり、i2cdetect コマンドで I2C デバイスのアドレスを確認するする場合などには RPi3 に ssh 接続して操作が必要になります。ssh が上手くいかない場合は次のことを確認してください：

#### パスワード `raspberry` でログインできない
Remote CHIRIMEN 用のイメージでは pi ユーザのパスワードを RPi3 デフォルトの `raspberry` ではなく `rasp` に変更しています。

#### `ssh 192.168.2.2` のように SSH 接続しようとしたらパスワードに `rasp` と入力しても `Permission denied, please try again.` と表示される

RPi3 に接続するときにはユーザ名 `pi` を指定する必要があります。 `ssh pi@192.168.2.2` のように、RPi3 の IP アドレスの前に `pi@` とユーザ名を指定して接続してください。IP アドレスとの間に空白は不要です。

#### SSH 接続しようとしたら WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! と表示される

SSH は初回接続時に端末のホスト ID を記録し、同じドメイン名や IP アドレスに接続するときには前回と同じホスト ID かどうか検証し、異なる場合にはこのような警告を表示して接続を中断します。

毎回同じ RPi3 ボードと SD カードイメージを利用していればこの問題は生じませんが、入れ替えてしまった場合には PC/Mac に記録されているホスト ID リストを削除する必要があります。`ssh-keygen -R` コマンドで削除したいホスト名を指定してから、再度 ssh 接続してください。

ssh-keygen -R 192.168.2.2
ssh pi@192.168.2.2

ホスト ID が記録されているファイル (~/.ssh/known_hosts) から該当する行を直接削除するなどしても構いません。

### RPi3 側の挙動がおかしい場合

#### RPi3 のブリッジサーバ側の挙動がおかしい気がするので再起動したい

サーバ側のリセットを行いたい場合は ssh ログインして `_gc/srv/reset.sh` スクリプトを実行してください。

pi@raspberrypi:~ $ _gc/srv/reset.sh
info:    Forever stopped process:
    uid  command             script forever pid id logfile                  uptime
[0] 1Val /usr/local/bin/node srv.js 612     702    /home/pi/_gc/srv/srv.log 0:0:0:19.456
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: ./srv.js

それでも解決しない場合は電源のオンオフで再起動してください。

#### ssh 接続した RPi3 上で ls コマンドすら動かない

RPi3 が熱暴走か何かの原因で不安定になっていると考えられます。`sudo reboot` もしくはそれも動作しない場合は microUSB ケーブルの抜き差しで電源をオンオフして再起動してください。

### PC/Mac の Node サーバ起動に関して

#### git, node, npm などのコマンドが使えない
チュートリアル https://hackmd.io/s/BJAZphXRZ の手順に従ってインストールしてください。環境が汚れるのがいやな場合は brew などアンインストールできる環境でインストールをし、Remote CHIRIMEN の利用終了後にアンインストールしてください。

なお、これらのコマンドは今時の Web 開発では必ず使えるようになる必要にがある一般的なものですので、Remote CHIRIMEN に限らず Web で何かするならインストールしておいて損はありません。

#### ローカルマシンにサーバを起動しっぱなしにするなんてヤダ
本チュートリアルでは常時起動するサーバは立てません。`npm run start` などの実行時のみ起動するモノで、コマンドを終了したらサーバも終了するので安心してください。

#### Mac で `npm run start` したら `アプリケーション"node"へのネットワーク受信接続を許可しますか` というダイアログが表示される

ネットワーク接続を受け付けるサーバアプリケーションを初回起動時に確認されるダイアログです。許可しなければブラウザからファイルが読み込めずに動作しないので許可してください。

### ブラウザのコンソールにエラーが表示される
開発中に上手く動かないことがある場合はまず、ブラウザの開発ツールを開いてエラーコンソールのメッセージを確認してください。セキュリティ、ネットワーク、JavaScript などのエラーはすべてそこに表示されます。以下、典型的なエラーメッセージとその対応を書いているので参考にしてください。

#### (Firefox/Chrome のエラーコンソール) TypeError: navigator.setPolyfillServerURL is not a function

ブラウザ上の JavaScript でハードを直接操作する WebGPIO や WebI2C API が (あたかも) 実装されているかのように API の追加を行ういわゆる polyfill スクリプトが読み込まれていない場合に表示されます。Mixed Content の読み込み許可をしているか確認してください。

#### (Chrome のエラーコンソール) polyfill-mod.js:9 WebSocket connection to 'ws://127.0.0.1/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

手元の RPi3 の IP アドレスを調べてそのアドレスの 33330 番ポートに接続するようにしてください。例えば IP が 192.168.2.3 であれば
`navigator.setPolyfillServerURL('ws://192.168.2.3:33330');` のようにします。

#### (Firefox のエラーコンソール) SecurityError: The operation is insecure.

Firefox で HTTPS のページから RPi3 に接続しようとするときには上記のエラーがコンソールに表示されます。これは HTTPS のページ (jsfiddle など) から RPi3 のサーバ (HTTPS ではない) に接続しようとするとき、暗号化されているページに暗号化されていないスクリプトが混在することでセキュリティレベルが下がること (混在コンテンツ) を禁止するためのものです。

Firefox で混在コンテンツの実行を許可するには `about:config` ページを開き `security.mixed_content.block_active_content` 設定値を `true` から `false` に切り替えてください。これは Firefox のセキュリティレベルを下げる設定となるため、Remote CHIRIMEN を利用するときだけ一時的に、もしくは開発専用のプロファイルを用意して行ってください。通常利用の Firefox の場合は必ず設定を元に戻すことをお忘れ無く！

Chrome を利用する場合も同様のセキュリティ制限がありますが、実行時にサイト単位でセキュリティ制限の解除が可能です。HTTPS の Web ページで実行したい場合は Chrome を使って[チュートリアル](https://hackmd.io/s/Bk45dTXnZ)通りに接続許可してください。

なお、Firefox で Chrome のような特定サイトだけを対象に混在コンテンツを許可するホワイトリストを実装する予定はありません ([see bug 873349](https://bugzilla.mozilla.org/show_bug.cgi?id=873349))。

#### (Chrome のエラーコンソール) Mixed Content: The page at 'https://fiddle.jshell.net/...' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://192.168.2.2:33330/'. This request has been blocked; this endpoint must be available over WSS.

Chrome で HTTPS のページから RPi3 に接続しようとするときには上記のエラーがコンソールに表示されます。
これは HTTPS のページ (jsfiddle など) から RPi3 のサーバ (HTTPS ではない) に接続しようとするとき、暗号化されているページに暗号化されていないスクリプトが混在することでセキュリティレベルが下がること (混在コンテンツ) を禁止するためのものです。

アドレスバーに表示されている盾アイコンをクリックし、`安全でないスクリプトを読み込む` をクリックしてセキュリティ制限を解除することで接続可能になります。詳しくは[チュートリアル](https://hackmd.io/s/Bk45dTXnZ9) の手順を参照してください。

### FAQ
Remote CHIRIMEN に関するよくある質問です

#### RPi3 じゃないと動かないの？
Remote CHIRIMEN に限らず CHRIMEN RPi3 全般に言えることですが、原理的には同じモノがいろいろなボード上で動作します。但し、ボードによって提供されている OS 環境が異なること、ボード固有のピン番号の配列が異なること、パフォーマンスの違いなどがあるため、必ずしもすべてそのまま動作するわけではありません。