デザイン戦略（インタラクション） / オープンデザイン実践 > REMOTE CHIRIMEN >

Remote CHIRIMEN チュートリアルスマホ編

このチュートリアルでは、Raspberry Pi 3 (以後 RPi3) と PC、スマートフォンを接続し、Web から異なるホストを経由して GPIO や I2C 接続したデバイスにアクセスする手順を説明します。

最終的には次のように、スマホと PC と RPi3 を同一の Wifi に接続し、スマホで PC の HTTP サーバからウェブページを読み込み、RPi3 を経由して GPIO/I2C デバイスを操作します:

Raspberry Pi 3 との接続

まずは Raspberry Pi 3 の IP 確認と SSH 接続手順ページを参考に、インターネット共有による有線接続を通して RPi3 にアクセスできるようにしてください。

この時点では次の図のように PC から RPi3 にインターネット共有し、PC 上のブラウザから RPi3 上の Node ブリッジサーバを経由して GPIO/I2C デバイスを制御できるようになっています。

Raspberry Pi 3 を Wi-Fi に接続する

次に、RPi3 を Wi-Fi に接続します。PC 上のブラウザから RPi3 を操作する場合はネットワーク共有で同一ネットワークに繋いで通信できますが、スマホなど他の端末から RPi3 を制御したい場合 RPi3 をスマホなどと同じ Wi-Fi に接続する必要があります(スマホでの動作確認をせず PC のブラウザで開発を進める時は不要です。スマホで動作確認するときだけ行えば十分です)。

注意: Wi-Fiについての全ての設定が上書きされます

SSH接続でRPi3に接続し、以下のコマンドを実行してください。コマンド中の<SSID>と<PASSPHRASE>はそれぞれ、Wi-FiのSSIDとパスフレーズを指定してください。


# Raspbery Piで
$ sudo sh -c 'printf "country=JP\nctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev\nupdate_config=1\n$(wpa_passphrase od2017 opendesign)" > /etc/wpa_supplicant/wpa_supplicant.conf'

既存のWi-Fi設定を残したい場合などは、/etc/wpa_supplicant/wpa_supplicant.conf ファイルをnanoやviなどで開き、wpa_passphrase <SSID> <PASSPHRASE>コマンドの結果を直接追記してください。

Network Manager を用いれば GUI ツールでの WiFi 接続の設定も可能です。詳しくはこちらの解説をご覧ください。

Node.jsのインストール

Node.jsは、ブラウザ外でJavaScriptを実行するための環境です。以下のURLを参考に、Node.jsをインストールしてください。

https://nodejs.org/ja/

「LTS」（≒安定版）と「最新版」の二つのバージョンがあります。
このチュートリアルではどちらを選択しても構いませんが、よく分からない場合は「LTS」を選択しておくことをオススメします。

エディタの用意

今後の手順でソースコードを編集する際は、macOS標準のテキストエディットやWindows標準のメモ帳を使わず、以下のようなエディタを使用することを強く推奨します（テキストエディットやメモ帳で編集した場合、うまく動かない場合があります）。

特にターミナルでの操作に慣れていない場合は、GUIエディタのいずれかを使用するといいでしょう。

GUIエディタ
CUIエディタ
- nano
- Vim
- Emacs

ソースコードのダウンロード

いずれかの方法で、必要なソースコードをダウンロードしてください:

下のURLからzipでダウンロードして展開する
- https://github.com/akkyie/chirimen-raspi3/archive/master.zip
ターミナルで git clone (推奨)
- git clone https://github.com/akkyie/chirimen-raspi3.git
- 注意： RPi3 に ssh 接続したターミナルではなく Mac のターミナル上で実行してください。参考: Raspberry Pi 3 の IP 確認と SSH 接続手順 (Mac 編)#RPi3から出る（Macに戻る）

接続先の編集

ダウンロードしたファイル中の、env/gc/polyfill/polyfill.js ファイルを開いて接続先を書き換えます。

冒頭のserverURLに書いてあるIPアドレスを、次のように RPi3 を接続した際に確認した RPi3 のIPアドレスに変更してください。

var serverURL = "ws://<Raspbery PiのIPアドレス>:33330/"

注意: RPi3 の IP アドレスには、ネットワーク共有で付与される IP アドレスと、Wi-Fi 接続で付与される 2 つの IP アドレスがあるので注意してください

有線 LAN の IP アドレスを指定する場合、PC 上のブラウザからしか RPi3 には接続できません (1:1 でネットワーク共有している有線 LAN ゲーブルの両端で閉じたネットワークとなっているためです。ブリッジによるネットワーク共有を行う場合は別ですがここでは割愛します)。

無線 LAN（Wi-Fi）接続の IP アドレスを指定する場合、RPi3 を接続した Wi-Fi と同一ネットワークにある PC, スマホなど任意のデバイスのブラウザから RPi3 を制御できるようになります。但し、同一 Wi-Fi に接続した端末間の通信を許可していない環境 (無料 Wi-Fi や大学などのネットワークでは一般的) では動きません。

Mac でサーバを起動

Mac のターミナル（端末エミュレータ）を開いて、ダウンロードしたソースコードの中のenv/gc ディレクトリに移動してください。


# PCで
$ cd <ダウンロードした場所>/chirimen-raspi3/env/gc

macOSの場合は、Finderからターミナルにcommand⌘キーを押しながらドラッグ&ドロップするとコマンドを使わず簡単に移動できます。

pwdを実行すると、現在開いているディレクトリを確認できます。
env/gcの中にいることを確認してください（下の例と完全に一致している必要はありません）。

# PCで
$ pwd
/Users/aky/Downloads/chirimen-raspi3/env/gc

次に、サーバを起動するために必要なパッケージをインストールします。ターミナルで以下を実行してください。

# PCで
$ npm install

npmはパッケージマネージャと呼ばれる、外部のパッケージをインストールするためのツールです。どのパッケージをインストールするかはpackage.jsonというファイルに事前に記してあるため、ここで指定する必要はありません。

必要なパッケージがインストールできたら、サーバを起動します。

# PCで
$ npm run start

> gc@1.0.0 start /Users/aky/Downloads/chirimen-raspi3/env/gc
> live-server

Serving "/Users/aky/Downloads/chirimen-raspi3/env/gc" at http://127.0.0.1:8080
Ready for changes

ブラウザで http://127.0.0.1:8080 を開いてください（通常は自動的に開かれます）。以下のように表示されていれば、正常に起動できています。

このうち、gpio, i2c ディレクトリにはそれぞれの方式で接続するデバイスを利用するための配線図とサンプルコードが、vr ディレクトリには A-Frame による VR コンテンツと GPIO もしくは I2C 接続するデバイスとを組み合わせるサンプルコードが納められています。

スマートフォンから接続

スマートフォンを、PCと同じネットワーク（Wi-Fiなら同じSSID、Ethernetなら同じルーターなど）に接続してください。

PC の IP アドレスを確認します。macOSの場合は、システム環境設定の「ネットワーク」から確認してください:

確認したIPアドレスにポート番号8080をつけて、スマートフォンのWebブラウザからアクセスしてください。
先ほどPCから開いたものと同じファイルリストが表示されます。

gpioやi2cディレクトリに、各種センサー・アクチュエータのデモが入っています。

また、vr ディレクトリにはVRを用いて各種センサーを使うデモが入っています。

各種デモの接続・実行手順については Remote CHIRIMEN デモ解説ページを参照してください。

トラブルシューティング

Remote CHIRIMEN　ページ末尾のトラブルシューティングを参照してください: https://hackmd.io/s/rkSDscnab

Remote CHIRIMEN チュートリアル スマホ編