ShieldI2Cについての基礎知識I2Cデバイスの制御を行っていく前にI2Cについて簡単に説明します。I2Cとは?I2Cとはシリアルデータ通信の方式で。I2CまたはIICと標記し、「アイ・スクエア・シー、アイ・ツー・シー」などと読む。GND、VCC(電源3.3v/5v)とSDA、SCLという二つの信号線の計4本で接続する。異なるアドレスを持つI2Cデバイスであれば、一つのI2Cポートに複数のデバイスを接続することができる。(最大112個)0/1の信号だけだはなく、アドレスとデータを指定したデータ通信を行うことができる。WikipediaI2Cデバイス温度センサ、加速度センサ、気圧センサなど様々なセンサや、液晶モジュール、モータドライバなど、I2Cインターフェースに対応した様々なデバイスが販売されている。GND、VCC、SDA、SCL端子をつなぐことで制御できる。接続方法は共通なので簡単にI2Cデバイスを接続するためのコネクタも存在する。systemなど)CHIRIMENはWebアプリからのI2C通信の読み書きに対応しているため、I2Cに対応したデバイスを制御することができる。part2の続きとなります。Part2が終了していない方はそちらから実施をお願いします。距離センサによる画面スクロールこれまでのウェブページではマウス操作やタッチ操作によって画面のスクロール操作を行っていました。CHIRIMENではI2Cという信号規格を制御することで、様々なセンサーを直接扱うことができます。ここでは、距離センサーで取得できる人とサイネージの距離によって画面スクロールを制御する処理を追加します。Shieldを使用します。SRF02という印字のある場所に図のように距離センサ(SRF02)を接続してください。sensorを参考にして回路を準備してください。I2Cの初期化処理I2C接続の距離センサを扱うために必要なI2Cの初期化処理を記述していきます。I2Cへのアクセサを取得I2Cへアクセスするためのアクセサを取得します。spawn関数の中に以下の行を追加してください。取得したI2Cアクセサを利用して、使用するI2Cポートオブジェクトを取得します。0番ポートを距離センサ用のポートとして使用しますので、以下のように0を指定した1行を追加します。accessor.ports.get(0);CHIRIMENには0番と2番の2つのI2Cポートがあります。距離センサの値を取得する処理を記述していきます。I2Cのread/writeI2Cデバイスは、slaveオブジェクトのread/writeメソッドを使用して、データを読み書きすることにより制御します。以下のようにwrite8メソッドを使用してアドレスとデータを指定するとデータの書き込みが行えます。<データ>);以下のようにreadメソッドを使用してアドレスを指定するとデータの読み込みが行えます。true);どのようにデータを読み書きすればデバイスを制御できるかは、デバイスの種類によって異なります。距離センサを読み込む処理はgetDistance関数にまとめてあります。jsの最後に追記してください。初期化したI2Cポートオブジェクトと距離センサのアドレス(0x70)を指定して、距離センサの取得処理を記述します。以下の1行を追加してください。getDistance(port,0x70);distance変数に取得した距離の値(cm)が格納されます。取得した距離をコンソールとウェブ画面上に表示します。以下の2行を追加してください。distance;htmlの#contents要素の後に以下の1行を追加してください。id="distance"></div>1秒毎に距離を取得する。このままでは一度しか距離を取得できないので、1秒間隔で距離を取得します。以下のように距離センサの取得処理をループ処理で囲ってください。()=>{spawn(function(){//距離センサの取得処理});},1000);これまでのjsコードこれまでのjsコードはWoTsignage:距離センサの値を取得するまでのようになります。距離によるスクロールセンサで取得した距離によって画面スクロールする処理を記述していきます。与えた値に応じてスクロールする関数を作成していきます。jsの最後にscroll関数を追記してください。この関数は、第一引数にスクロール位置、第二引数に一番下へスクロールする時の値、第三引数に一番上へスクロールする時の値を指定します。距離による画面スクロール距離(distance)の取得後に以下の1行を追加してください。scroll(distance,15,50);距離が15cm以下の場合に一番下へスクロールし、距離が50cmの場合に一番上へスクロールします。距離が50cmより大きい場合はその場に留まります。jqueryを使用したアニメーションこのままでは、スクロール位置まで瞬時に飛んでしまうため、ライブラリを使用してアニメーションさせてみましょう。jqueryの読み込みjsの様々な記述を簡単にするライブラリとしてjqueryというライブラリが知られています。jqueryを読み込むため、htmlの<head>タグに以下の1行を追加してください。src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>スクロールアニメーションscroll関数内の指定の座標までスクロールをさせる処理を以下の1行に書き換えてください。'swing');これにより、スクロールする時、なめらかにアニメーションするようになります。これまでのjsコードこれまでに作成した全体のjsがこちらのdistanceのmain.jsのようになります。うまく作成できていれば、距離センサで取得した距離に応じて画面がスクロールするようになっているはずです。APIと組み合わせてウェブコンテンツを切り替える処理を追加していきます。part4に移動してください。