目次

4. GPIO/I2C 編 まとめ

概要

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

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

前回までのおさらい

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

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

今回つくるもの

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

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

1.準備

用意するもの

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

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

parts-1

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

a. 部品と配線について

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

schematic

b. 接続確認

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

c.コードを書いてみる

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

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

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

HTML

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

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

JavaScript

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

  1. Web GPIO API の初期化 (navigator.requestGPIOAccess()でGPIOAccessインタフェースの取得)

  2. GPIOAccessのports.get()で 26 番ポートのportオブジェクトを取得

  3. 26 番ポートを「出力モード」に設定

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

  5. I2CAccessのports.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. 全画面表示

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

このため、プログラミングを進める時は 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 で利用可能な他の手段を簡単にいくつか紹介しておきます。

Note: これらのAPIは Feature Policy の制限（iframe 内からは埋め込み側で明示許可されていない API は利用不可）により、jsbin では動作しません。ローカルで実行してください。

※ブラウザ上でプログラムが書ける jsfiddle では各種 API が利用可能となっていますが、まだ動作確認ができていません。近日中に動作確認を行う予定です。

また、将来的には 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 と比べるとやはり非力です。

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

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

さいごに

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

ここまでのチュートリアルでは一連の流れを通して GPIO, I2C のデバイスを使ってプロトタイピングを行うための基礎知識を広く学習してきました。ここから先は各自の興味関心や開発したいデバイスやサービスに応じて学習を深めていってください。本チュートリアルではこれ以降も「発展編」としていろいろな技術・題材を扱ったものを拡充していきますが、何をどのように学んでいくかは皆さんが何をしたいか、何を出来るようになりたいか次第です。

本チュートリアルをスタートとして、それぞれの目指す方向に合わせて技術習得を進めていって頂ければ幸いです。

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

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