More than 5 years have passed since last update.

CHIRIMEN for Raspberry Pi 3 Hello World

Last updated at 2018-11-22Posted at 2017-10-11

本記事は、CHIRIMEN for Raspberry Pi Ver.2018/03/08以前のVersionに対応しています。
新しいCHIRIMEN for Raspberry Piをお使いの方は、新しいCHIRIMENチュートリアルを参照ください。

1. 今回のゴール

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

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

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に接続した電子パーツを直接制御することができます。

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

用意するもの

基本ハードウエア

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

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チカ」を実施するには下記パーツも追加で必要です。

ブレッドボード × 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とは異なるSDカードで起動された可能性があります。
その場合は、もう一度 SDカードへCHIRIMEN for Raspberry Pi 3 環境を構築するをご確認ください。

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

WIFIの設定

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

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

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

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

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

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

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

参考：LED（発行ダイオード）

配線してみよう

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

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

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

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

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

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

exampleを実行してみる

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

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

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

ブラウザ画面

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 を選んでアクセスしてください。

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

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

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

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

GPIOとは

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

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

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 チュートリアル一覧

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up