CHIRIMEN for Raspberry Pi 3 Hello World

本記事は、[CHIRIMEN for Raspberry Pi Ver.2018/03/08](https://github.com/chirimen-oh/chirimen-raspi3/releases/tag/20180308)以前のVersionに対応しています。
新しいCHIRIMEN for Raspberry Piをお使いの方は、[新しいCHIRIMENチュートリアル](https://tutorial.chirimen.org/)を参照ください。


## 1. 今回のゴール

CHIRIMEN for Raspberry Pi 3 の使い方をおぼえて、Webアプリから「Lチカ」（LEDをつけたりけしたり）するプログラミングをやってみよう。

1. 今回のゴール
2. 準備
3. CHIRIMEN for Raspberry Pi 3 を起動してみよう
4. Lチカをやってみよう
5. コードを眺めてみよう

### CHIRIMEN for Raspberry Pi 3 とは

CHIRIMEN for Raspberry Pi 3 は、Raspberry Pi 3（以下「Raspi3」）上に構築したIoTプログラミング環境です。    
[Web GPIO API (Draft)](https://rawgit.com/browserobo/WebGPIO/master/index.html)や、[Web I2C API (Draft)](https://rawgit.com/browserobo/WebI2C/master/index.html)といったAPIを活用したプログラミングにより、WebアプリからRaspi3に接続した電子パーツを直接制御することができます。    

![CHIRIMEN for Raspberry Pi 3 の活用イメージ](http://gc.dfm.lrv.jp/0.helloworld/browserobo.png)

## 2. 準備（準備が終わってる場合は読み飛ばしてください）

### 用意するもの

#### 基本ハードウエア

下記がCHIRIMEN for Raspberry Pi 3 の起動に最低限必要となる基本ハードウエアです。

![Raspi3 の起動に必要なハードウエア一覧](http://gc.dfm.lrv.jp/0.helloworld/materials.png)

- [Raspberry Pi 3 Model B](https://www.raspberrypi.org/products/raspberry-pi-3-model-b/) × 1
- ACアダプタ + micro B USB電源ケーブル[(例えばコレなど)](https://www.amazon.co.jp/Raspberry-Pi%E7%94%A8%E9%9B%BB%E6%BA%90%E3%82%BB%E3%83%83%E3%83%88-5V-3-0A-%EF%BC%8DPi3%E3%83%95%E3%83%AB%E8%B2%A0%E8%8D%B7%E6%A4%9C%E8%A8%BC%E6%B8%88/dp/B01N8ZIJL8/ref=pd_lpo_vtph_23_bs_t_1?_encoding=UTF8&psc=1&refRID=E7GEMC00PP38161QE2A9) × 1
- HDMIケーブル (モニタ側の端子と合うものを選んでください) × 1
- HDMI入力つきのモニタ（720Pの解像度に対応したもの） × 1
- USBマウス × 1
- USBキーボード (日本語入力に対応したもの) × 1
- micro SDカード (Class 10以上の性能を持ち、8Gbyte以上の容量を持つもの) × 1


#### Lチカに必要となるパーツ

基本ハードウエアに加え「Lチカ」を実施するには下記パーツも追加で必要です。    

![Lチカに必要なパーツ一覧](http://gc.dfm.lrv.jp/0.helloworld/parts.png)

- ブレッドボード × 1
- リード付きLED × 1
- リード付き抵抗器 (150-470Ω ※お使いのLEDにより) × 1
- ジャンパーワイヤー (オス-メス) x 2

### SDカードへCHIRIMEN for Raspberry Pi 3 環境を書き込む

起動する前に、SDカードへCHIRIMEN for Raspberry Pi 3 環境（imageファイル）を書き込んでおく必要があります。    
手順は、[SDカードへCHIRIMEN for Raspberry Pi 3 環境を構築する](https://gist.github.com/tadfmac/527b31a463df0c9de8c30a598872344d) を参照してください。    

## 3. CHIRIMEN for Raspberry Pi 3 を起動してみよう

### 接続方法

材料が集まったら、いよいよRaspi3を接続して起動してみましょう。
基本ハードウエアを下図のように接続してください。(Raspi3への電源ケーブルの接続は最後にしましょう)

![接続方法](http://gc.dfm.lrv.jp/0.helloworld/connect.png)

もしよくわからない場合には、[Raspberry Pi Hardware Guide](https://www.raspberrypi.org/learning/hardware-guide/) なども参照してみると良いでしょう。

電源ケーブルの接続、あるいは、スイッチ付きケーブルの場合はスイッチのONによりRaspi3が起動します。

### 起動確認

Raspi3の起動後、下記のようなデスクトップ画面が表示されたら CHIRIMEN for Raspberry Pi 3 の起動に成功しています。おめでとうございます。

![CHIRIMEN for Raspberry Pi 3 desktop画面](http://gc.dfm.lrv.jp/0.helloworld/desktop.png#1)

#### 残念ながら上記画面が表示されなかった！？

もし、違う画面が表示される場合には、CHIRIMEN for Raspberry Pi 3とは異なるSDカードで起動された可能性があります。
その場合は、もう一度 [SDカードへCHIRIMEN for Raspberry Pi 3 環境を構築する](https://gist.github.com/tadfmac/527b31a463df0c9de8c30a598872344d) をご確認ください。

また、電源を入れても何も画面に映らないような場合には、配線が誤っている可能性があります。
接続方法を再度確認してみましょう。正しく接続しているはずなのに、Raspi3の赤いLEDが点灯していない場合、ACアダプタまで電気が来ていない可能性もあります。

### WIFIの設定

デスクトップ画面が表示されたら、さっそくWIFIを設定して、インターネットに繋げてみましょう。
CHIRIMEN for Raspberry Pi 3 では、ネットワークに繋がなくてもローカルファイルを使ったプログラミングが一応可能ですが、[JS Bin](http://jsbin.com/)や[JSFiddle](https://jsfiddle.net/)などのWeb上のエディタを活用することで、より便利にプログラミングが進められるようになります。
また、CHIRIMEN for Raspberry Pi 3 に関する情報も今後インターネット上で充実していく予定です。

ぜひ、最初にインターネット接続環境を整えておきましょう。

WIFIの設定は、タスクバーの右上のWIFIアイコンから行えます。

![wifi設定](http://gc.dfm.lrv.jp/0.helloworld/wifi.png)

## 4. Lチカをやってみよう

無事、Raspi3の起動とWIFIの設定が行えたら、いよいよLチカに挑戦してみましょう。

### そもそも「Lチカ」って何？

「Lチカ」とは、LEDを点けたり消したりすることで、チカチカさせることです。今回は「LEDを点ける」「LEDを消す」をプログラムで繰り返し実行することで実現します。

- 参考：[LED（発行ダイオード）](https://ja.wikipedia.org/wiki/%E7%99%BA%E5%85%89%E3%83%80%E3%82%A4%E3%82%AA%E3%83%BC%E3%83%89)

### 配線してみよう

LEDを点けたり消したりするためには、Raspi3と正しく配線する必要があります。
LEDは2本のリード線が出ていますが、長い方がアノード（+側）、短い側がカソード（-側）です。

Lチカのための配線図は、基本的な作例（examples）と一緒に、下記にプリインストールされています。

/home/pi/Desktop/gc/gpio/LEDblink/schematic.png

![example-files](http://gc.dfm.lrv.jp/0.helloworld/example-files.png)

それでは、まず先に schematic.png をダブルクリックして見てみましょう。

![example: LEDblink の配線図](http://gc.dfm.lrv.jp/0.helloworld/blink-schematic.png)

LEDのリード線の方向に注意しながら、この図の通りにジャンパー線やブレッドボードを使って配線してみましょう。
(図のLEDの下側の方がアノード(+側))

実際に配線してみると、こんな感じになりました。

![配線してみました](http://gc.dfm.lrv.jp/0.helloworld/routing.jpg)

### exampleを実行してみる

配線がうまくできたら、さっそく動かしてみましょう。
Lチカのためのサンプルコードは先ほどの配線図と同じフォルダに格納されています。

/home/pi/Desktop/gc/gpio/LEDblink/index.html


index.htmlをダブルクリックすると、ブラウザが起動し、先ほど配線したLEDが点滅しているはずです！

**ブラウザ画面**
![browser](http://gc.dfm.lrv.jp/0.helloworld/browser.png)

**Lチカの様子**
![Lチカ成功](http://gc.dfm.lrv.jp/0.helloworld/blink.gif)

Lチカに成功しましたか？！

#### うまくいかなかったら?

セキュリティーエラーが発生している可能性があります。

まずは、[CHIRIMEN for Raspberry Pi 3 におけるセキュリティーエラーへの対処方法](https://qiita.com/tadfmac/items/2d7929fe3560c77fe867) をご確認のうえ、セキュリティーエラーが発生している場合には対処をお願いします。

> ToDo: https://localhost:33330 のブックマーク箇所のスクリーンショットを貼る

## 5. コードを眺めてみよう

さきほどは、Lチカをデスクトップにあるexampleから実行してみました。
実は、CHIRIMEN for Raspberry Pi 3にはもうひとつ、「オンラインのexample」が用意されています。
こちらを利用することで、コードを書き換えながら学習を進めることができます。

今度はオンラインのexampleからさきほどと同じLチカを実行してコードを眺めてみましょう。

その前に。***オンラインのexampleを起動する前に、必ず先ほど実行した `file:///home/pi/Desktop/gc/gpio/LEDblink/index.html`のブラウザWindowは閉じるようお願いします。Windowを閉じておかないと、これから実行するサンプルが正常に動作しなくなります。***

上記に記載したWindowを確実に閉じるには、一度ブラウザを閉じてから、再度ブラウザを起動すると確実です。(タブだけ消してももちろんOKです)

![ブラウザの再起動](http://gc.dfm.lrv.jp/0.helloworld/re-start.png)

### ブラウザのブックマークから、JS Binのexampleを起動

それでは、さっそくオンラインのexampleを実行してみます。
配線は、さきほどのままでOKです。

ブラウザを起動後、ブックマークバーから`examples > GPIO > GPIO-Blink - JS Bin` を選んでアクセスしてください。

![bookmark](http://gc.dfm.lrv.jp/0.helloworld/bookmark.png)

そのまま起動すると下記のような画面になります。(下記スクリーンショットはアクセス直後の画面からJS Binのタイトルバー部の「Output」タブを1回押して非表示にしています)

![JS BinでのLチカexample画面](http://gc.dfm.lrv.jp/0.helloworld/jsbin.png)

それでは、コードを眺めてみましょう。

#### HTML

```.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>GPIO-Blink</title>
</head>
<body>
<script src="https://mz4u.net/libs/gc2/polyfill.js"></script>
</body>
</html>
```

HTMLでは`polyfill.js`というJavaScriptライブラリを読み込んでいます。
`polyfill.js`は[Web GPIO API]()と、[Web I2C API]()というW3Cでドラフト提案中の2つのAPIへのPolyfillとなっています。

#### JavaScript

```.js
navigator.requestGPIOAccess().then(gpioAccess=>{
  var port = gpioAccess.ports.get(26);
  var v = 0;
  return port.export("out").then(()=>{
    setInterval(function(){
      v ^= 1;
      port.write(v);
    },1000);
  });
});
```
JavaScriptファイルで、最初に出てくるコードが`navigator.requestGPIOAccess()`です。
ここで先ほど出て来た[Web GPIO API](https://rawgit.com/browserobo/WebGPIO/master/index.html) を使い、`gpioAccess`というGPIOにアクセスするためのインタフェースを取得しています。

コードを読み進める前に、ここで少し`GPIO`について記載しておきたいと思います。

##### GPIOとは

[GPIO](https://ja.wikipedia.org/wiki/GPIO)は、「General-purpose input/output」の略で汎用的な入出力インタフェースのことです。    
Raspi3に実装されている40本のピンヘッダからGPIOを利用することができます。（40本全てのピンがGPIOとして利用できるわけではありません）    

CHIRIMEN for Raspberry Pi 3ではRaspi3が提供する40本のピンヘッダのうち、下記緑色のピンをWebアプリから利用可能なGPIOとして設定しています。    

![Raspi3 PIN配置図](http://gc.dfm.lrv.jp/0.helloworld/Raspberry-Pi-3-Model-B-PIN.png)

##### GPIOPortの処理

さて、コードに戻りましょう。    

`var port = gpioAccess.ports.get(26);`という部分で、`GPIOの26番ポートにアクセスするためのオブジェクト` を取得しています。    
続いて、`port.export("out")` で、GPIOの26番を「出力設定」にしています。これによりLEDへの電圧の切り替えが可能になっています。    
最後に 1000msごとに `port.write(1)` と `port.write(0)` を交互に呼び出すことで、GPIO 26番に対する電圧を 3.3V→0V→3.3V→0Vと繰り返し設定しています。    

LEDは一定以上の電圧 (赤LEDだと概ね1.8V程度、青LEDだと3.1V程度) 以上になると点灯する性質を持っていますので、3.3Vになったときに点灯、0Vになったときに消灯を繰り返すことになります。    

まとめると下図のような流れになります。

![シーケンス](http://gc.dfm.lrv.jp/0.helloworld/sequence.png)

### exampleを修正してみよう

JS BinのJavaScriptのペインにカーソルを当てればコード修正が可能です。
試しにいろいろ変えてみましょう。

- 点滅を早くしたり遅くしたりしてみる
- GPIOポートを他のポートに変えてみる (指定したGPIOへジャンパーを付け替える必要があります)
- index.htmlにボタンなどのインターフェースを作ってみて、押すとLEDが反応するよう変えてみる

## まとめ

このチュートリアルでは、下記を実践してみました。

- CHIRIMEN for Raspberry Pi 3の起動
- Lチカのサンプルを動かしてみた
- JS BinでLチカのコードを変更してみた

[次回『CHIRIMEN for Raspberry Pi 3 チュートリアル 1. GPIO編』](https://qiita.com/tadfmac/items/ebd01cfe46e30de70f3d)ではGPIOの入力方法についてチュートリアルを進める予定です。

### CHIRIMEN for Raspberry Pi 3 チュートリアル一覧

- [CHIRIMEN for Raspberry Pi 3 Hello World](https://qiita.com/tadfmac/items/82817476615fdc7394b3)
- [CHIRIMEN for Raspberry Pi 3 チュートリアル 1. GPIO編](https://qiita.com/tadfmac/items/ebd01cfe46e30de70f3d)
- [CHIRIMEN for Raspberry Pi 3 チュートリアル 2. I2C　基本編（ADT7410温度センサー）](https://qiita.com/tadfmac/items/36d5467f79b6fd3114fb)
- [CHIRIMEN for Raspberry Pi 3 チュートリアル 3. I2C　応用編（その他のセンサー）](https://qiita.com/tadfmac/items/b17d8c6a35b31c495a36)
- [CHIRIMEN for Raspberry Pi 3 チュートリアル 4. GPIO/I2C編　まとめ](https://qiita.com/tadfmac/items/d627f8d2fec3c5f8711b)
- [CHIRIMEN for Raspberry Pi 3 チュートリアル 5. WebBluetooth編](https://qiita.com/g200kg/items/28b3cc8c058bb49673a2)