Edited at

CHIRIMEN for Raspberry Pi 3 Hello World

本記事は、CHIRIMEN for Raspberry Pi Ver.2018/03/08以前のVersionに対応しています。

新しいCHIRIMEN for Raspberry Piをお使いの方は、新しいCHIRIMENチュートリアルを参照ください。


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)や、Web I2C API (Draft)といったAPIを活用したプログラミングにより、WebアプリからRaspi3に接続した電子パーツを直接制御することができます。

CHIRIMEN for Raspberry Pi 3 の活用イメージ


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


用意するもの


基本ハードウエア

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

Raspi3 の起動に必要なハードウエア一覧



  • Raspberry Pi 3 Model B × 1

  • ACアダプタ + micro B USB電源ケーブル(例えばコレなど) × 1

  • HDMIケーブル (モニタ側の端子と合うものを選んでください) × 1

  • HDMI入力つきのモニタ(720Pの解像度に対応したもの) × 1

  • USBマウス × 1

  • USBキーボード (日本語入力に対応したもの) × 1

  • micro SDカード (Class 10以上の性能を持ち、8Gbyte以上の容量を持つもの) × 1


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

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

Lチカに必要なパーツ一覧


  • ブレッドボード × 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 環境を構築する を参照してください。


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


接続方法

材料が集まったら、いよいよRaspi3を接続して起動してみましょう。

基本ハードウエアを下図のように接続してください。(Raspi3への電源ケーブルの接続は最後にしましょう)

接続方法

もしよくわからない場合には、Raspberry Pi Hardware Guide なども参照してみると良いでしょう。

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


起動確認

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

CHIRIMEN for Raspberry Pi 3 desktop画面


残念ながら上記画面が表示されなかった!?

もし、違う画面が表示される場合には、CHIRIMEN for Raspberry Pi 3とは異なるSDカードで起動された可能性があります。

その場合は、もう一度 SDカードへCHIRIMEN for Raspberry Pi 3 環境を構築する をご確認ください。

また、電源を入れても何も画面に映らないような場合には、配線が誤っている可能性があります。

接続方法を再度確認してみましょう。正しく接続しているはずなのに、Raspi3の赤いLEDが点灯していない場合、ACアダプタまで電気が来ていない可能性もあります。


WIFIの設定

デスクトップ画面が表示されたら、さっそくWIFIを設定して、インターネットに繋げてみましょう。

CHIRIMEN for Raspberry Pi 3 では、ネットワークに繋がなくてもローカルファイルを使ったプログラミングが一応可能ですが、JS BinJSFiddleなどのWeb上のエディタを活用することで、より便利にプログラミングが進められるようになります。

また、CHIRIMEN for Raspberry Pi 3 に関する情報も今後インターネット上で充実していく予定です。

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

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

wifi設定


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

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


そもそも「Lチカ」って何?

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


配線してみよう

LEDを点けたり消したりするためには、Raspi3と正しく配線する必要があります。

LEDは2本のリード線が出ていますが、長い方がアノード(+側)、短い側がカソード(-側)です。

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

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

example-files

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

example: LEDblink の配線図

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

(図のLEDの下側の方がアノード(+側))

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

配線してみました


exampleを実行してみる

配線がうまくできたら、さっそく動かしてみましょう。

Lチカのためのサンプルコードは先ほどの配線図と同じフォルダに格納されています。

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

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

ブラウザ画面

browser

Lチカの様子

Lチカ成功

Lチカに成功しましたか?!


うまくいかなかったら?

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

まずは、CHIRIMEN for Raspberry Pi 3 におけるセキュリティーエラーへの対処方法 をご確認のうえ、セキュリティーエラーが発生している場合には対処をお願いします。


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です)

ブラウザの再起動


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

それでは、さっそくオンラインのexampleを実行してみます。

配線は、さきほどのままでOKです。

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

bookmark

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

JS BinでのLチカexample画面

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


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.jsWeb GPIO APIと、Web I2C APIというW3Cでドラフト提案中の2つのAPIへのPolyfillとなっています。


JavaScript

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 を使い、gpioAccessというGPIOにアクセスするためのインタフェースを取得しています。

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


GPIOとは

GPIOは、「General-purpose input/output」の略で汎用的な入出力インタフェースのことです。


Raspi3に実装されている40本のピンヘッダからGPIOを利用することができます。(40本全てのピンがGPIOとして利用できるわけではありません)

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

Raspi3 PIN配置図


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になったときに消灯を繰り返すことになります。

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

シーケンス


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編』ではGPIOの入力方法についてチュートリアルを進める予定です。


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