目次

4. GPIO/I2C のまとめ

概要

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

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

前回までのおさらい

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

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

今回つくるもの

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

1. GPIO の使い方 で使った MOSFET + ちびギアモータと 2. I2C 基本編(ADT7410 温度センサー) で使った温度センサーがあればできそうですね。

1.準備

用意するもの

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

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

利用部品の写真

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

a. 部品と配線について

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

回路図

注意! 上記の配線図は GND 配線が不足しています。図を差し替えるまでは こちらの画像 を参照して GND も配線した状態で動かしてください。

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 を使って「楽しい作品」を仕上げるための Tips をいくつか書いてこのチュートリアルを締めくくりたいと思います。

a. 全画面表示

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

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

Jsbin や Jsfiddle と似たサービスとして、Code Sandbox (以下 CSB) がありますが、こちらは実行結果画面を別タブとして開くことができるのでおすすめです (但し、上記 2 サービスと比べて CSB は多くのリソースを必要とするため、Raspberry Pi 3 以前の RasPi での動作は難があるかもしれません)。

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

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

chromium --kiosk

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

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

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

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

c. github の活用

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

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

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

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

Raspberry Pi は非常に使いやすい SBC(シングルボードコンピュータ)ですが、一般的な PC と比べるとやはり非力です。(※Raspi4 ではだいぶ改善されました!)

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

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

さいごに

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

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

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

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

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