東大UI ’16

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

講義資料

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

連絡事項（2016/9/1更新）

更新履歴

9/1 講義資料を掲載
7/14 アンケートへのリンクをページ末尾に追加
6/29 色付き板を注文した旨を追記
6/24 見出しを整理、使い方ページ(1. Intel Edisonのセットアップ、2. f3.jsによるIoTコンテンツ開発)に動画を追加
6/23 Spreadsheetへのリンクなどを整備

f3.jsについて

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

もし欲しいモジュールがある場合は、GoogleSpreadsheetのGroveモジュールシートを見て、メールで igarashi.lab@gmail.com に問い合わせる。（在庫がない場合は時間がかかるので注意）
モジュールのドライバとその利用例はまずIntel公式のリポジトリを探してみるとよい。
在庫からモジュールを持っていった場合は、Google SpreadsheetのGroveモジュールシートに記入すること。（先着順）
レーザーカッターを利用する際はGoogle Spreadsheetの予約表シートに名前を記入すること。（先着順）
6/29現在アクリル板は透明なものしかないが、カラー透明（カナセライト）を注文した。届いたら好きな色を使ってよい。
- オレンジクリア1351
- カーマイン1390
- ラベンダー1375
- スカイブルー1393
- サマーグリーン1371

スケジュール

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など）を使ってもらっても構わないが、使い勝手の評価を行ってもらうため、壊れやすかったり不安定なユーザインタフェースは避けること。（例: ブレッドボードとジャンパワイヤだけでマイコンとモジュールを繋げたものなど。）

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

Run and jump – キャラクター「○」を操作して横スクロールしてくる障害物「×」をよけるゲーム。振動センサでゲームオーバーのフィードバックを返す。
YouTubeでPhysical Computing, Prototyping, Arduino, Grove, Gameなどのキーワードで検索するといろいろ出てくる。

機材

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

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

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

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

レーザーカッター

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

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

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

FabCafe Tokyo （渋谷）Drop-in利用 10分800円-
東急ハンズ（池袋, 渋谷）面積毎に課金500円-
DMM.make AKIBA（秋葉原） Drop-in利用 12時間5000+2800円-
TechShop Tokyo （六本木）
アクリル板通販はざいやレーザー加工例
その他、NAVERまとめも参照のこと

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

ユーザテスト

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 に提出する。