2. f3.jsによるIoTコンテンツ開発

この記事を読み終えると、f3.jsを使ってIoTコンテンツ(Intel Edisonのファームウェアと筐体)を開発できるようになります。

2-1. 既存コンテンツのカスタマイズ

Intel Edison用アプリケーションのカウントダウン機能付きカメラを例に取って説明する。

カスタマイズ用ユーザインタフェース

リンク先で「カスタマイズ」と書いてある欄をマウスで操作すると、カメラアプリケーションの見た目や機能をカスタマイズできる。

カスタマイズ後、ページ下部の「レイアウト」「PDFのダウンロード」をクリックするとPDFファイルが、「プログラム」「プログラムのダウンロード」をクリックすると圧縮ファイルがダウンロードされる。また、組み立てるのに必要なモジュールの種類と個数が一覧表示される。

レイアウト

PDFファイルは選択したレーザーカッターに直接送信でき、これによりアクリル板を切断すると、アプリケーションの筐体を組み立てるためのパーツが手に入る。

プログラム

圧縮ファイルはIntel Edisonに転送して展開すると、nodeコマンドにより実行することができる。

組み立てに必要なモジュール

カスタマイズした結果に応じて、必要なモジュールの種類は変わってくる。これを過不足なく揃えてIntel EdisonのGrove Shieldに接続することで、アプリケーションが正しく動作する。

次の動画はプログラムをダウンロードする様子のスクリーンキャスト。

このあとIntel Edison上でプログラムを実行する様子。

2-2. カスタマイズ項目の提案

カスタマイズしたいがユーザインタフェースが用意されていない場合、「カスタマイズ」欄右上の「プラス(+)マーク」をクリックすることで新しい項目を提案できる。これはあくまで提案であって、実際にカスタマイズが可能になるかどうかは当該IoTコンテンツを開発しているプログラマ次第である。

提案した内容は、新たに現れる「雲(☁)マーク」をクリックすることで保存され、プログラマなど、他の人も見られるようになる。

2-3. 既存コンテンツの編集

リンク先の画面右上で「鉛筆マーク」をクリックすると、編集ページが開き、カメラアプリケーションの見た目や機能をさらに編集できる。

ソースコード編集中にも、ページ下部の「PDFのダウンロード」「プログラムのダウンロード」などのボタンを利用して、PDFファイルを確認したり、Intel Edisonに転送するための圧縮ファイルを取得できる。

編集が終わったらページ最下部の「更新する」ボタンをクリックして、編集内容を保存できる。

f3.js API

ソースコード中では var f3js = require('f3js'); のようにすることで、f3.jsのAPIを利用できる。APIリファレンスはこちらを参照

カスタマイズ用ユーザインタフェース

変数宣言にコメントをつけることで、その初期値を編集できるユーザインタフェースが「カスタマイズ」下に現れる。これにより、変数値をいろいろ変えたときの筐体の様子などを確認しやすくなるほか、プログラマでなくてもIoTコンテンツをカスタマイズできるようになる。

var useCountdown = true; // カウントダウン機能をつける
var height = 100; // 箱の高さ [0, 100]

なお、2-2.で提案されたカスタマイズ項目は、ソースコード最下部に// *proposed* …というようなコメントが付された変数宣言として追加されている。この変数はそのままでは全く意味をなさないが、 *proposed* を削除し、変数宣言の値を参照するコードを書けば、実際に利用できるカスタマイズ項目とすることができる。

2-4. 新しいIoTコンテンツの作成

プロジェクトの一覧で、画面右上の「プラス(+)マーク」をクリックすると、新しいIoTコンテンツの作成ページが開き、全く新しいアプリケーションを作成できる。

編集が終わったらページ最下部の「作成する」ボタンをクリックして、編集内容を保存できる。