4. GPIO/I2C編 まとめ

概要

CHIRIMEN for Raspberry Pi 3(以下 「CHIRIMEN Raspi3」) を使ったプログラミングを通じて、Web GPIO APIWeb I2C API の使い方を学ぶチュートリアルです。

今回は、Web GPIO API と Web I2C API を組み合わせたWebアプリを作ってみます。

(※1) CHIRIMEN for Raspberry Pi 3とは

Raspberry Pi 3(以下「Raspi3」)上に構築したIoTプログラミング環境です。

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

CHIRIMEN Open Hardware コミュニティにより開発が進められています。

前回までのおさらい

本チュートリアルを進める前に前回までのチュートリアルを進めておいてください。

前回までのチュートリアルで学んだことは下記のとおりです。

今回つくるもの

シンプルに下記のような基本仕様にしてみます。

1. GPIO編 で MOSFET+DC ファンと2. I2C 基本編(ADT7410温度センサー) で使った温度センサーがあればできそうですね。

1.準備

用意するもの

このチュートリアル全体で必要になるハードウエア・部品は下記の通りです。

今回用意するものが多いですが、これまでのチュートリアルで使ったことがあるものばかりですので、ご安心ください。

parts-1

2.まずは仕様通りにつくる

a. 部品と配線について

Raspberry Pi 3との接続方法については、下記回路図を参照ください。

schematic

b. 接続確認

今回の回路用のコードはまだ書いていませんので、下記方法で配線の確認をおこなっておきましょう。

c.コードを書いてみる

jsfiddle を使ってコードを書いていきましょう。

今回は「あえて」記事中にコードを掲載しません!

これまでのチュートリアルで実施してきたことの復習です。頑張ってください!

HTML

jsfiddleHTMLペインには下記内容のコードを記載してください。

  1. Web GPIO API / Web I2C API の polyfill を読み込むコード
  2. ADT7410のドライバーライブラリを読み込むコード ※任意。以前の記事 を参考に、ドライバーを使わずに書いても良いです。
  3. 温度表示用の要素 (DIVタグなど)

JavaScript

続いてJavaScriptペインには下記内容のコードを記載します。

  1. Web GPIO API の初期化 (navigator.requestGPIOAccess()GPIOAccessインタフェースの取得)
  2. GPIOAccessports.get()で 26番ポートのportオブジェクトを取得
  3. 26番ポートを「出力モード」に設定

  4. Web I2C API の初期化 (navigator.requestI2CAccess()I2CAccessインタフェースの取得)

  5. I2CAccessports.get()で、1番のI2CポートのI2CPortオブジェクトを取得

  6. ADT7410のインスタンスを生成し、init()による初期化を行なっておく

ここまでを実施しておきましょう。

Note: 非同期処理の関数の呼び出しに関してはそれぞれawait を付け、「3. 26番ポートを「出力モード」に設定」が終わってから、「4. Web I2C API の初期化」を開始するように書いてあることを確認しましょう。

1.〜 6. までの処理が全て終わってから、以降の処理が行われるように書いていきます。

Note: ここでも同様に非同期処理の関数の呼び出しに関してはそれぞれawait を忘れずに。温度の読み取りが終わってから、その値に応じてファンを制御します。

ここまでできたら動くはずです!

3.完成度を上げるために

ここまでのチュートリアルで Web GPIO APIや Web I2C APIの使い方はもうお腹いっぱい!という状況かと思います。おつかれさまでした!

最後に、CHIRIMEN for Raspberry Pi 3を使って「楽しい作品」を仕上げるためのTipsをいくつか書いてこのチュートリアルを締めくくりたいと思います。

a. 全画面表示

jsbinjsfiddleはコードの学習を進める上では便利なサービスですが、各サービスのメニューやコードが常に表示されてしまい「画面だけを表示する」ということが できません。

このため、プログラミングを進める時はjsfiddleなどで進め、ある程度コードが固まって来たら index.htmlファイルなどに保存して、ブラウザで直接 index.htmlを表示する方が良いでしょう。

さらに、サイネージのような作品の場合、ブラウザのメニューやタスクバーすらも表示せずに全画面表示にしたいケースもあるでしょう。

Raspberry Pi 3 の Chromium Browserで全画面表示を行うには、コマンドラインから下記のように入力します。

chromium --kiosk

全画面表示を終了するには、ctrl + F4 を押します。

b. Web GPIO API / Web I2C API 以外のIoT向け機能

今回は、CHIRIMEN for Raspberry Pi 3 で拡張を行った Web GPIO API と Web I2C API の利用方法を学習してきましたが、他の方法でもブラウザと外部デバイスがコミュニケーションする方法がありますので、CHIRIMEN for Raspberry Pi 3で利用可能な他の手段を簡単にいくつか紹介しておきます。

また、将来的にはUSB機器が直接ブラウザから制御可能になる Web USB API なども利用可能になる可能性がありますが、残念ながら現在のバージョンの CHIRIMEN for Raspberry Pi 3 環境で利用している Chromium Browserでは利用できません。

c. githubの活用

現状の CHIRIMEN for Raspberry Pi 3 には標準では Webサーバが含まれていません。 最近のセキュアドメイン からの実行でないと許可されない Web APIも増えています。

index.htmlなどのファイルができたら、GitHub pagesなどを使って公開すると良いでしょう。

GitHub Pagesの使い方は、下記記事が参考になります。

d. Raspberry Pi で使えなかった機能 (WIP)

Raspberry Pi 3 は非常に使いやすいSBC(シングルボードコンピュータ)ですが、一般的なPCと比べるとやはり非力です。

筆者が試してダメだー!ってなったポイントを書いてみたいと思います。(今後も追記予定)

他にもいろいろあると思うのでコメントいただけたら嬉しいです!

さいごに

このチュートリアルでは 下記について学びました。

Web GPIO APIと Web I2C APIを組み合わせたプログラミング

また、CHIRIMEN for Raspberry Piはまだ生まれたばかりです。いろいろと至らない点も多く、今後もオープンソースを前提にどんどん洗練していかなければなりません。課題は山積みです。

どうか、様々なご支援をいただきたく、よろしくお願いいたします。