https://docs.com/jun-kato/9050/f3js-js-board-shibuya-6-lt

1. Form Follows Function()
http://f3js.org

2. 加藤 淳
• 統合開発環境（プログラマ向けユーザインタフェース）の研究をしています
• プログラミング体験研究会 http://sigpx.org 設立に向け暗躍中です
• Intel Edison好きです!!（jsupmにコミットしてみたり）
• 最近作っているJavaScript向け開発環境を紹介します
http://junkato.jp/jaarcatdmz
PicodeDejaVu VisionSketch TextAlive
…

3. プロトタイピング楽しいですね！

4. プロトタイピング楽しいですね！
ところで、ケース（筐体）
どうしてますか？

5. 筐体設計難しいです（´・ω・｀）
きのこ美味しいです(^q^)

6. 筐体設計難しいです（´・ω・｀）
無印良品の箱 + カッター
きのこ美味しいです(^q^)

7. 筐体設計難しいです（´・ω・｀）

8. 筐体設計難しいです（´・ω・｀）
Illustrator + レーザーカッター

9. 筐体設計難しいです（´・ω・｀）

10. 筐体設計難しいです（´・ω・｀）
MakerCase
www.makercase.com

11. 思い出せ！俺たちはプログラマだ!!!
画像: NetBeans GUI Builder https://en.wikipedia.org/wiki/NetBeans

12. 思い出せ！俺たちはプログラマだ!!!
画像: NetBeans GUI Builder https://en.wikipedia.org/wiki/NetBeans
懐かしのGUIプログラミング
jPanel.add(new JButton(), …);

13. f3.drawRectangle(20, 30, 200, 50)

14. f3.drawRectangle(20, 30, 200, 50)
板が切り出せたぞ！

15. rect.add(button, 100, 40)

16. rect.add(button, 100, 40)
ボタン設置用の穴が
開いたぞ！

17. rect.extrude(60)
※直方体モデルの展開図ができ、接着する部分のギザギザが生成されます。

18. rect.extrude(60)
※直方体モデルの展開図ができ、接着する部分のギザギザが生成されます。
板を押し出したら
直方体になったぞ！

19. f3.js: こんな人に使ってほしい！
• Node.jsベースのマイコン、IoTデバイス用開発環境
• 動作要件: npmでドライバをインストールできること
• その他: 各ドライバに対応したレイアウト情報が必要（GitHubで管理予定）
• （とりあえずIntel Edison, Raspberry Pi + 各種Groveモジュールに対応）
• f3js.orgへ行けばブラウザで動作する予定（Electron版も? 配布予定）
• 一部ツールはGitHubでオープンソース化予定
• 一部ツールはnpmでインストールできるようにする予定
まだ開発中！
ですがデモできます

20. f3.js: 筐体設計までできる統合開発環境
• ソースコード上は var f3 = require(‘fff-print’) を書き足すだけ
• f3pdf “source.js” -o “output.pdf” のようにして印刷用PDFを出力可
• ブラウザ上またはf3pdf環境でのみPDFを出力する
• マイコン上のインタプリタでは何も出力せずそのまま普通に動作する
ポイント①
これまでJavaScriptで書いていたコードはそのまま動く

21. f3.js: 筐体設計までできる統合開発環境
• var jg = require(‘jsupm_grove’), button = new jg.GroveButton(2);
button.getValue(); と同じスコープで f3.add(button); と書ける！
• ブラウザ上またはf3pdf環境ではダミードライバが読み込まれる
ポイント②
npmで読み込んだドライバのインスタンスを渡せば、
そのセンサ・アクチュエータに適した穴が開く

22. f3.js: どうやって動いているの？
Intel Edisonなどのマイコン
Node.js
JavaScriptのソースコード

23. f3.js: どうやって動いているの？
Intel Edisonなどのマイコン
Node.js
JavaScriptのソースコード
なんちゃってJSインタプリタ
EaselJS
Webブラウザ
jspdf
レーザーカッター

24. f3.js: どんなものが作れるの？

25. f3.js: こういうことがしたい
• 安い初期投資で、プラモデルのように作れるIoTを実現したい
• モジュール同士ははんだ付け不要でGroveなどの標準コネクタだけで繋げる
• 筐体は｛厚紙 | アクリル板｝、（レーザー）カッターと接着剤だけあれば組める
• ユーザがハード・ソフト両面をカスタマイズできるIoTを実現したい
誰でもIoT！

26. Form Follows Function()
http://f3js.org
3月にα版公開予定
で鋭意開発中！