f3.js
For those who create Internet of Things by code.

f3.jsについて

Arduinoなどのプロトタイピング用ツールキットが普及したことで、マイコン・小型コンピュータをプログラミングしてセンサやアクチュエータを動作させることは容易になりました。最近では、Intel EdisonのようにJavaScriptでプログラミングできるマイコンも増えてきています。 しかしながら、実用的なIoTアプリケーションを開発しようとするとき、ソフトウェアエンジニアが必ずぶつかる壁があります。それが筐体設計です。

プロトタイピング用ツールキットはブレッドボードなどで簡易な配線をして利用することが多いですが、これだけではIoTアプリケーションの使い勝手は評価できません。なぜなら、センサやアクチュエータをどのように配置するかによって、手で持ったときの感覚や、設置場所での動作がまったく変わってきてしまうためです。そこで、センサやアクチュエータを固定できる筐体を設計する必要が生じるのです。

f3.jsは、通常のマイコンプログラミングをしながら、同じソースコードで筐体設計までできる統合開発環境です。形状が関数によって定義されるため、「Form follows function() for JavaScript」──略してf3.js(エフスリー)と呼びます。また、IoTアプリケーションの制作に必要なすべての情報(マイコン・小型コンピュータのプログラムと筐体の形状情報)を合わせてIoTコンテンツと呼びます。f3.jsは、IoTコンテンツを手軽に制作できるウェブベースの統合開発環境(WIDEです。

動作環境

開発環境

f3.jsは、JavaScriptが有効な最新のブラウザで動作するように設計されています。以下の環境で動作確認しています。

  • Windows 10: Microsoft Edge 25
  • Windows 7 & 8.1: Internet Explorer 11, Chrome 49
  • Mac OS X: Safari 8, Chrome 49

さらに、マイコン・小型コンピュータへアプリケーションを転送するためにはf3.js IDEを動作させるPC(Windows 7, 8.1, 10)またはMac(Mac OS X)が必要になります。

対応ハードウェア

f3.jsは、以下のマイコン・小型コンピュータ用のアプリケーション開発に利用できます。

筐体設計時に利用できるモジュール(センサやアクチュエータ)はドライバがnpmパッケージで提供されているものに限られます。現在、f3.jsに情報が登録されているモジュール0 個 です。

筐体出力用プリンタ

f3.jsが出力するPDFは以下のレーザーカッターで切断加工できることを確認しています。

開発体制

産総研 f3.js Projectでは、プログラマ、デザイナをはじめ、さまざまな人がIoTコンテンツを利活用できる技術の研究開発に取り組んでいます。

発表文献

  • [Full paper] Jun Kato and Masataka Goto, "f3.js: A Parametric Design Tool for Physical Computing Devices for Both Interaction Designers and End-users", In Proc. of DIS'17 pp.1099-1110. PDF
  • [Demo] Jun Kato and Masataka Goto, "Form Follows Function(): An IDE to Create Laser-cut Interfaces and Microcontroller Programs from Single Code Base", In Proc. of UIST'15 Adjunct Proceedings pp.43-44. PDF
  • 加藤 淳, 後藤 真孝, "IoTアプリケーションのソフトウェア・ハードウェアを単一コードベースで開発できる統合開発環境f3.js", 第20回一般社団法人情報処理学会シンポジウム インタラクション2016 pp.132-139. 2016年3月.PDF

注意事項

  • 本ウェブサイトの機能・情報を用いると実際に印刷して利活用できるIoTコンテンツを出力できますが、このようなIoTコンテンツの利活用を含め、本サイトの機能・情報を用いたことによる損害に対していかなる責任も負いません。
  • 本ウェブサイトは研究目的での実証実験中であり、申し訳ありませんが、メンテナンスのための停止や動作に不具合がある可能性があります。動作不具合(バグ)に関しては @f3jsorg 宛てにご連絡いただければ修正できることもあります。
  • 研究及びシステム改善のために、利用ログをGoogle Analyticsおよびf3.jsサーバにて収集しております。収集したログの一部や集計結果を研究発表等で公表することがあります。個人が特定される形での公表はしません。
  • 本技術等の商用利用にご興味のある方はf3.js Project <f3js-ml@aist.go.jp>にご相談下さい。

謝辞

f3.jsは主にTypeScriptと以下のライブラリ・ツールを利用して開発されています。開発者の皆様に感謝します。

f3.js サーバ

  • Visual Studio Code + Grunt (開発環境)
  • Node.js (Webサーバ)
  • Express 4 (フレームワーク)
  • Pug (HTMLレンダリングエンジン (旧名Jade))
  • MySQL (データベースサーバ)

f3.js クライアント

  • jQuery - Write Less, Do More. (MIT License)
  • Semantic UI - スタイルシート (MIT License)
  • EaselJS (Canvasレンダラ)
  • Acorn + JS-Interpreter (JavaScriptインタプリタ)
  • Ace (JavaScriptエディタ)