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

f3.js 本サイトに戻る

東大UI ’16

このページでは、東京大学の2016年度「ユーザインタフェース」講義で使用した資料や、課題内容の紹介などのアーカイブを掲載しています。課題で制作されたプロジェクトは別ページ「東大UI ’16 プロジェクト」に掲載されています。

講義資料

Programming Environments – 東京大学「ユーザインタフェース」講義資料Jun Kato

連絡事項(2016/9/1更新)

更新履歴

f3.jsについて

  • アンケートに答えてください!
  • #ui16f3js でも情報を流します & 質問に答えます!
  • f3.jsはログインしてから利用すること。
  • f3.jsにアカウントを作れない人(Twitter/GitHubアカウントを連携させたくない人)はログイン用のトークンを付与するので i@junkato.jp に問い合わせる。
  • f3.jsモジュール一覧に使いたいモジュールの物理レイアウトが掲載されていない場合は自力で実装するか i@junkato.jp に問い合わせる。
  • Groveモジュールとレーザーカッターの利用について

スケジュール

  • 6/16 “Programming Environments” 講義、機材の配布、出題
  • 6/23 構想発表、f3.js利用法説明、レーザーカッター実演
    • A4×1枚 図入りの概要プリントを1部印刷して持参
    • 1チーム数分で紹介
  • 6/28, 30, 7/5, 7/7 レーザーカッター利用日
  • 7/14 成果発表
  • 7/19 レポート提出〆切

課題内容

物理的なインタラクションを有するゲームや玩具をデザインし、実装する。さらに、その使い勝手を被験者2人以上に評価してもらうユーザテストを行う。(五十嵐研の講義ページはこちら。)

簡単のため、JavaScriptでセンサやアクチュエータを直接コントロールできる小さなコンピュータ「Intel Edison」と、はんだ付け不要でセンサやアクチュエータを接続できるツールキット「GROVEモジュール」、レーザーカッターで切断したアクリル板を組み合わせてモジュールをネジ止め可能な筐体を作れる開発環境「f3.js」を提供する。

他のPhysical Computing用ツールキットや開発環境(例: Arduino, littleBits, LEGO Mindstorms, Sony MESHなど)を使ってもらっても構わないが、使い勝手の評価を行ってもらうため、壊れやすかったり不安定なユーザインタフェースは避けること。(例: ブレッドボードとジャンパワイヤだけでマイコンとモジュールを繋げたものなど。)

作品の例を以下に挙げるが、これ以外の独創的なものを歓迎する。(遊び方のルールはもちろんのこと、使うセンサやアクチュエータの種類や配置に独自の工夫を行ってほしい。)

機材

開発用の機材として以下のものを貸与する。(講義参加者全体に10セットなので、グループを作ってシェアする。)

なお、GROVEスターターキットにはさまざまなモジュールが含まれている。ほかにもGroveシステム公式Wikiに掲載がある通り多くのモジュールが販売されているが、Intel Edisonから簡単に使えるものはGitHub上のIntel Edisonのサンプルコード一覧に載っているもののうちgroveでファイル名が始まるもの、またはコミットログにgroveの記載があるもののみであると考えたほうがよい。(ページ内検索すると効率的に見つかる)

もし欲しいモジュールがある場合は、メールで igarashi.lab@gmail.com に問い合わせる。

また、以下の消耗品を使ってよい。(レーザーカッターの近くに置き場を作り、シェアする。)

レーザーカッター

透明アクリル板の切断には、五十嵐研究室のレーザーカッターを利用してよい。レーザーカッターを利用する際は次の手順に従うこと。

  1. Google Spreadsheetの予約表シートに名前を記入する。(先着順)
  2. 希望時間帯にPDFファイルを持参してレーザーカッターの部屋へ行く。
  3. 切断されたアクリル板を持ち帰る。必要に応じて接着剤で接着したり、ネジやナットでセンサなどを留める。

また、以下の場所でもレーザーカッターを利用できる可能性がある。

レーザーカッターが利用できなかった場合には、空き箱や厚紙などで代用してもよい。

ユーザテスト

2人以上の開発者以外のユーザに、ゲームを実際にプレイしてもらい、その様子を観察する。また、思考発話を促し、コメントを集める。ユーザインタフェースのよかった点、改善すべき点をまとめる。(参考1, 参考2

可能なら複数のバリエーションを作って比較検討する。その際はf3.js上にカスタマイズ用ユーザインタフェースを用意してさまざまなバリエーションを出力できるようにする。

ユーザテストには準備などに時間がかかるので、十分余裕をもって実装を終わらせること。

もし他チームのユーザテストに参加した際は、f3.js上の当該プロジェクトのページで改善できそうな点などをカスタマイズ項目として提案するとよい。

レポートの提出方法(提出期限: 7/19 深夜24:00)

各グループにつき一つレポートを提出する。レポートの内容は以下の通り。f3.jsアンケート(Google Form)は各自提出する。

  • 開発したユーザインタフェースで遊ぶ様子が分かる動画(MP4, YouTubeなど, 30秒~1分程度)
  • 開発内容やユーザテストの結果をまとめたレポート(グループの場合は各自の担当を明記する)
  • プログラムのソースコード(f3.js上にアップロード; そもそもJavaScriptでないなど、不可能な場合はメールに添付)

以上(f3.jsアンケートとソースコード以外)をまとめてZIPファイルにしてダウンロードできる場所に置き、そのURLをメールで igarashi.lab@gmail.com に提出する。

記事投稿者: ( )