2022年度インタラクションデザイン演習実習Ⅰ

文書の過去の版を表示しています。

このページは東京都立大学にて開講している、2023年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。

ユーザとモノをつなぐ対話設計であるインタラクションデザインに関する体系的知識及び実践的基礎技術を身に付けることを目標とする．近年の論文からいくつかのトピックを議論し，最先端の研究分野をフォローできるための知識を獲得し，それらを実際に再現するために必要な技術要素を同時に身に付けることを目標とする．

Short Paper

Robert J. Orr and Gregory D. Abowd. 2000. The smart floor a mechanism for natural user identification and tracking. In CHI '00 Extended Abstracts on Human Factors in Computing Systems (CHI EA '00). ACM, New York, NY, USA, 275-276. DOI=10.1145/633292.633453 http://doi.acm.org/10.1145/633292.633453

２ページの英文ショートペーパーです．ロードセルを利用したシンプルなユーザ識別装置に関する報告です．識別にはユークリッド距離を利用しています．なお，ウェブで検索をするとフルペーパーも見つかるので，詳細はそっちで確認することをおすすめします．ユーザが歩いた際における圧力や時間，力の分散などを特徴量として学習済みの特徴量をf，入力データをf'（ダッシュ）とした場合，次のような計算で距離を求めると，様々な学習済みデータとどの程度入力データがことなるのかを計算できるようになります．本講義でのもっとも基本的で重要な考え方なので，しっかり理解しましょう．

* Nearest Neighbor参考ページ：インタラクションデザインの為のパターン認識入門

WISS2011 Paper

辻田眸、暦本純一（東京大学）
概要
高齢化など様々な要因で，独居生活を選択あるいは余儀なくされている人は少なくない.孤独な生活により感情状態が悪化し，うつ病や心の病にかかるなど深刻な問題である.一方，心理学者ウィリアム・ジェイムズの言説で，「人は幸福であるが故に笑うのではなく，笑うが故に幸福である」という考え方がある.これは笑顔形成が感情状態を向上させる可能性を示唆している.そこで本論文では，日常生活のなかで積極的に笑顔をつくることを促進し，感情状態の向上を支援するシステム「HappinessCounter」を提案する.笑顔促進のために，ユーザが日常的に行う作業時に笑顔形成を促し，フィードバックを与えたり，ソーシャルネットワークサービスなどと連携させることで，より積極的に笑顔形成を支援し，感情状態の向上を目指す.さらに試作したシステムを実際の日常生活で利用してもらい評価実験を行った.その実験結果を示し，今後の展望を述べる.

この論文ではユーザの笑顔形成を促すシステムを提案していますが、笑顔を認識できることで可能となるシステムサービスの一例をプロトタイピングから示し、実際に被験者実験（アンケート調査、インタビュー）を行っています。デバイス周りの実装はこの授業では扱いませんが、笑顔を検出するシステムを実際に制作してみたいと思います。

まず、この回では p5.jsを利用して実装を進めて行きます。DOM（html上のオブジェクトを利用すること）は使用しないので、基本的にはProcessingと同じような文法になりますが、まずは下記リンクを参照して、Processingとp5.jsを比較します。

続いて、次のサンプルを利用してまずは手っ取り早く、FaceTrackerしてみます。以降はブラウザを必ずChromeにて実行してください．

https://editor.p5js.org/tetsuakibaba/sketches/EQiqK-GgI

上記サンプルの元になっているのが，https://github.com/auduno/clmtrackr です．こちらのサンプルでは単純なfacetrackerの他にマスク，サブスティチューション，表情認識等のデモを確認することができます．まずは各頂点情報を参照して，顔の各パーツを扱えるようにプログラムを工夫していきます．すでにexampleでは口の横の長さで笑顔度を計算する記述も含まれているので，うまく利用してみましょう．これまではclmtrackrを利用して授業を進めてきましたが、googleが提供するfacemeshが精度、速度ともに上回っているのでそちらを使うことにします。

まずは https://github.com/TetsuakiBaba/p5_facemeshからひな形をダウンロードしてください。以後はVSCodeを利用していきますので、VSCodeの環境準備も合わせて行います。環境準備については p5.jsの開発環境のVSCodeのページを参考にしながら進めます。

なお，複数のカメラデバイスが存在しており，任意のカメラだけをオープンしたい場合は以下のページを参照してください．

複数カメラの読込

授業を通じて，笑顔を認識するアルゴリズムからコーディングまで実装します．

この授業用の特別教材を準備しました．笑顔認識ができるようになったので，表情を認識させることができるようになりました．先の論文では冷蔵庫の開閉にインタラクションをデザインしていましたが，これをゲーム操作インタフェースとして応用してみます．スーパーマリオブラザーズを模したp5jsのコードをベースにして，表情認識でマリオを操作してみます．

https://www.nintendo.co.jp/networkservice_guideline/ja/index.html
https://tetsuakibaba.jp/ws/doku.php?id=p5js:xx.faceapi
https://editor.p5js.org/tetsuakibaba/sketches/NfnWBTMGs
レース用の雛形（タイマーの下にフレームカウントがついています）：https://editor.p5js.org/tetsuakibaba/sketches/VsRdt5pDr

https://cir.nii.ac.jp/crid/1390575661587795840
Covid-19によって，多くの教育機関がオンライン授業への対応を余儀なくされた．対面授業とオンライン授業の比較は多くの研究がなされる一方で，オンライン授業では様々なデジタルツールの活用がなされる等，多様な取り組み方法が継続的に実践・検討されている．本稿では，著者が2020年度から開発を開始した音声リアクション・コメント読み上げ共有システムCommentableに対し，学習者による匿名の音声干渉（本稿では特に音声による学生と教員間のインタラクションを指す）機能を利用することで，一部授業では音声なしよりも音声付き投稿が多用されたことや，投稿ログとアンケート結果から授業への参画度向上が示されたことを報告する．一方で，音声干渉機能は200人規模の授業には不向きであるほか，小規模，中規模授業であっても教師および学習者同士が協調し本機能を活用する必要があることがアンケート結果から示された．

ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます．

【お薦め】ニューロンを位置からコーディングして、一つのニューロンからなるパーセプトロンを自分で実装してみるDaniel
- https://www.youtube.com/watch?v=ntKn5TPHHAk&list=PLRqwX-V7Uu6aCibgK1PTWWu9by6XFdCfh&index=3&t=0s

機械学習をjsで利用可能なライブラリml5に関してDanielがいくつかの動画を挙げてくれています。

【例】ビデオ画像を10×10のサイズに小さくして、実際に画像識別を実装するDaniel
- https://www.youtube.com/watch?v=UaKab6h9Z0I
ML5 Beginners Guide: The Coding Train（Danielによるml5jsの実践動画集）

授業では１つ目の動画を実際にたどりながらニューラルネットの基本原則を理解します。

実際に自分でニューラルネットを設計して実装していくのもよいですが、すでにGoogleによって超すごいフレームワークが提供されています。その名はTeachable Machineです。まずは以下の動画で実際になにを行うかをみて、自分でもやってみます。先で述べたml5.jsライブラリを利用して、training自体を簡単にできるようにまとめたものだと思ってください。