lecture:インタラクションデザイン演習実習i:2023 [Design Workshop]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 2023年度インタラクションデザイン演習実習Ⅰ ======
<WRAP center round important 60%>
このページは東京都立大学にて開講している、2023年度インタラクションデザイン演習実習Ⅰにおける授業補助教材です。
</WRAP>

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

====== 論文読解１：The smart floor： a mechanism for natural user identification and tracking ======

[[http://www.cc.gatech.edu/fce/pubs/floor-short.pdf|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参考ページ：[[http://tetsuakibaba.jp/workshop/PatternRecognition4InteractionDesign/main.html|インタラクションデザインの為のパターン認識入門]]

====== 論文読解２：手軽な指文字学習支援のためのブラウザゲーム：ゆびもじタイピング ======

  * {{ :lecture:インタラクションデザイン演習実習i:aac2023_02.pdf |}}
  * https://ipsj.ixsq.nii.ac.jp/ej/index.php?active_action=repository_view_main_item_detail&page_id=13&block_id=8&item_id=225341&item_no=1

>宮崎 優子 馬場 哲晃
>概要
>>聴覚障がい者のコミュニケーションツールには，単語を手の形や位置，動きで表現する手話と，日 本語かなを手の形や動きに対応させた指文字がある.指文字は手話表現にない固有名詞や名前を表現する ときに使われ，手話初心者にとって手話を覚えていなくても指文字を覚えれば単語を綴ることができる. したがって，指文字をスムーズに綴れることは，手話初心者にとって聴覚障がい者との円滑なコミュニ ケーションへの第一歩と言える.手話の学習方法としては対面で講師から学ぶ方法が主であるが，これは 学習者にとって時間的・金銭的コストがかかる.一方で，学習者が単独で手話を学ぶには，本や DVD を 使った方法があるが，これらは指文字を一字ずつ覚えることはできても，実際に指文字を使うときのよう な単語を綴りながらの指文字練習は紙面やコンテンツ数の制約により，限界があった.そこで本研究では 学習者に単語を提示し，学習者がその単語を指文字で綴ることで指文字学習定着および技能向上を目的と するタイピングゲームを制作する.このゲームはブラウザゲームとして実装・公開することによって，イ ンターネット環境と Web カメラの搭載された PC のみで学習者の手軽な指文字学習を可能にする.


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

====== 論文読解3： 学習者の匿名音声干渉を利用したオンライン授業の実施と考察 ======
  * https://cir.nii.ac.jp/crid/1390575661587795840
  * 論文データ：{{ :lecture:インタラクションデザイン演習実習i:11_13.pdf |}}
  * 著者：馬場哲晃
  * Covid-19によって，多くの教育機関がオンライン授業への対応を余儀なくされた．対面授業とオンライン授業の比較は多くの研究がなされる一方で，オンライン授業では様々なデジタルツールの活用がなされる等，多様な取り組み方法が継続的に実践・検討されている．本稿では，著者が2020年度から開発を開始した音声リアクション・コメント読み上げ共有システムCommentableに対し，学習者による匿名の音声干渉（本稿では特に音声による学生と教員間のインタラクションを指す）機能を利用することで，一部授業では音声なしよりも音声付き投稿が多用されたことや，投稿ログとアンケート結果から授業への参画度向上が示されたことを報告する．一方で，音声干渉機能は200人規模の授業には不向きであるほか，小規模，中規模授業であっても教師および学習者同士が協調し本機能を活用する必要があることがアンケート結果から示された．
====== NeuralNet Challenge======
ここではまずは実際にNeuralNetを自分でコーディングし，その振る舞いを理解した後に楽しいサンプルを触っていきます．

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

===== ml5.js =====
機械学習をjsで利用可能なライブラリml5に関してDanielがいくつかの動画を挙げてくれています。
  * 【例】ビデオ画像を10x10のサイズに小さくして、実際に画像識別を実装するDaniel
    * https://www.youtube.com/watch?v=UaKab6h9Z0I
  * [[https://thecodingtrain.com/learning/ml5/index.html|ML5 Beginners Guide: The Coding Train]]（Danielによるml5jsの実践動画集）

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

===== Teachable Machine =====
実際に自分でニューラルネットを設計して実装していくのもよいですが、すでにGoogleによって超すごいフレームワークが提供されています。その名はTeachable Machineです。まずは以下の動画で実際になにを行うかをみて、自分でもやってみます。先で述べたml5.jsライブラリを利用して、training自体を簡単にできるようにまとめたものだと思ってください。
  * Teachable Machine: https://teachablemachine.withgoogle.com
  * Image Classification: https://www.youtube.com/watch?v=kwcillcWOg0
    * 雛形：https://editor.p5js.org/tetsuakibaba/sketches/8GGwXeKxf
  * Snake Game: https://www.youtube.com/watch?v=UPgxnGC8oBU&list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y&index=13
  * Sound Classification: https://www.youtube.com/watch?v=TOrVsLklltM

===== Reference =====
Deep Learningに興味をもって基本的なことや背景などをもう少し知りたい人には下記の書籍をオススメします
  * [[https://www.amazon.co.jp/機械学習と深層学習-《C言語によるシミュレーション》-小高知宏-ebook/dp/B01MY06QN1/ref=sr_1_3?__mk_ja_JP=カタカナ&dchild=1&keywords=機械学習と深層学習&qid=1594168723&sr=8-3|機械学習と深層学習（c言語によるシミュレーション）]]
  * [[https://www.amazon.co.jp/機械学習と深層学習-Pythonによるシミュレーション-小高-知宏/dp/4274222268/ref=sr_1_1?__mk_ja_JP=カタカナ&dchild=1&keywords=機械学習と深層学習&qid=1594168723&sr=8-1|機械学習と深層学習（pythonによるシミュレーション）]]
  * [[https://www.amazon.co.jp/ゼロから作るDeep-Learning-―Pythonで学ぶディープラーニングの理論と実装-斎藤-康毅/dp/4873117585/ref=sr_1_1?__mk_ja_JP=カタカナ&crid=31BG8KRUJBMU8&dchild=1&keywords=ゼロから作るdeep+learning&qid=1594168847&sprefix=ゼロから作る%2Caps%2C251&sr=8-1|ゼロから作るDeep Learning]]
  * [[https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YPSwT06y_AEYTqIwbeam3y|Beginners Guide to Machine Learning in JavaScript by Daniel Shiffman]]

===== jsを少し詳しく学ぼう =====
この回では、jsを利用して最終課題をコーディングしていく際、もう少しプログラミングそのものに焦点を充てて学習をしておいたほうが良いかと思います。基本的なjsの文法をさらったのち、実用的なプログラミングで役立つ機能を学習します。
  * [[p5js:08.jsの文法基礎|JavaScriptの基礎]]