====== プロトタイピング基礎 ======
プロトタイピングとは即ち実働する試作のことであるが，実働試作物の他，ビデオプロトタイピングやペーパープロトタイピングなど，ユーザ経験価値を創出するためのいくつかの種類がある．ユーザ・インタフェースデザイン（UIデザイン）において，プロトタイプを作成し，そこから得られるユーザフィードバックを基にさらにUIデザインを改善する手法は一般的である．この授業ではフィジカルコンピューティングやデジタルファブリケーションといった近年のものづくり変革を学習することで，新たな製品価値を創出するための基礎的なプロトタイピング知識と技術習得を目的とする．

===== 招待講義 =====
  * 6月26日：http://tetsuakibaba.jp/event/PrototypingPerformance/

===== Paper Prototyping課題（ユーザビリティ評価とペーパープロトタイピング） =====
  * [[https://www.dropbox.com/s/lnvxwebxoe8kqwu/sevencafe_example.ai?dl=0|課題用データ（Adobe Illustrator形式）]]
  * [[https://www.dropbox.com/s/axbfyltswea4ks1/sevencafe.ai?dl=0 | 課題サンプルデータ（PDF形式）]]
  * [[https://www.dropbox.com/s/1ks5qnsrqopor9x/sevencafe4handwritten.pdf?dl=0 | 手書き提出用課題データ（PDF形式）]]

===== ソフトウェアプロトタイピング =====
ここではソフトウェアによるプロトタイピングについて学ぶ．今回は具体的にProcessingを利用し，簡単なUIを作成し，その評価を行う． ペーパープロトタイピングと同様の内容を今度はソフトウェアの実装を通じ，どのような箇所がペーパープロトタイピングと比較して有効であるか等のメリットやデメリットを体験することが目的． 実際にシンプルなボタンデザインをソフトウェアにて実装してみるが，それに先立ち「[[http://www.marlin-arms.com/support/100things/links.html|インタフェースデザインの心理学]]」からいくつかのトピックを紹介する．

Processingを利用して「ボタンを押す」という動作やボタン形状・色に様々な補助的情報を不可してみる．具体的にはマウスが乗っているとき，ボタンを押した時に関して，ユーザにフィードバックを提供し，ユーザビリティやユーザエクスペリエンスを向上させることを意識してみる．

<code>
// ボタン画像を表示するプログラム
PImage img_button;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);
}

void draw()
{
  background(50, 50, 50);

  tint(255, 255, 255);
  image(img_button, width/2, height/2);

</code>

{{:lecture:pasted:20180526-034226.png|レギュラーボタン}}
  
<code>
// 通常は凹状態から，クリックした時のみ凸状態にボタンを変更する
PImage img_button;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);
}

void draw()
{
  background(50, 50, 50);

  if(width/2 - img_button.width/2 < mouseX &&  mouseX < width/2 + img_button.width/2 &&
    height/2 - img_button.height/2 < mouseY && mouseY < height/2 + img_button.height/2 &&
    mousePressed == true ) {
     tint(0, 0, 0);
    image(img_button, width/2, height/2-2);
  }
   else{
    tint(0, 0, 0);
    image(img_button, width/2, height/2+2);
   }

  tint(100, 100, 100);
  image(img_button, width/2, height/2);
}
</code>

==== セブンカフェUIをつくる ====
Paper Prototypingの回ではセブンカフェUIを題材に実際に紙面上にUIを構成し，簡単なユーザアンケートを行ってみました． 今回はソフトウェアプロトタイピングを利用し，ユーザビリティ評価だけでなく動作感も体験可能なプロトタイプを作成してみます． まずはプログラムファイルをProcessing上にコピー＆ペーストし，6点の画像ファイルもProcessing作業フォルダにコピーして実行してみましょう．

<code>
// セブンカフェUIをソフトウェア画面上で配置する
PImage img_hot_regular;
PImage img_hot_large;
PImage img_cold_regular;
PImage img_cold_large;
PImage img_info_hot;
PImage img_info_cold;

void setup()
{
  size(1000,600);
  img_hot_regular = loadImage("button_regular.png");
  img_cold_regular = loadImage("button_regular.png");
  img_hot_large = loadImage("button_large.png");
  img_cold_large = loadImage("button_large.png");
  img_info_hot = loadImage("info_hot.png");
  img_info_cold = loadImage("info_cold.png");
  imageMode(CENTER);
}

void draw()
{
  background(100,100,100);

  tint(0, 0, 0, 255);  
  image(img_hot_regular, 400, 200);
  image(img_hot_large,   600, 200);
  image(img_cold_regular, 400,450);
  image(img_cold_large,  600, 450);
  
  image(img_info_hot, 500, 100);
  image(img_info_cold, 500, 350);
}
</code>
  * {{ :images.zip |}}


<code>
//下記プログラムを参考にして，各ボタンを押したら赤色／青色になるようにプログラムを変更してください．

PImage img_hot_regular;
PImage img_hot_large;
PImage img_cold_regular;
PImage img_cold_large;
PImage img_info_hot;
PImage img_info_cold;

int x_hot_regular = 400;
int y_hot_regular = 200;
int x_hot_large = 600;
int y_hot_large = 200;

int x_cold_regular = 400;
int y_cold_regular = 450;
int x_cold_large = 600;
int y_cold_large = 450;

int x_info_hot = 500;
int y_info_hot = 100;
int x_info_cold = 500;
int y_info_cold = 350;

void setup()
{
  size(1000, 600);
  img_hot_regular = loadImage("button_regular.png");
  img_cold_regular = loadImage("button_regular.png");
  img_hot_large = loadImage("button_large.png");
  img_cold_large = loadImage("button_large.png");
  img_info_hot = loadImage("info_hot.png");
  img_info_cold = loadImage("info_cold.png");
  imageMode(CENTER);
}

void draw()
{
  background(10, 15, 17);

 
  if (x_hot_regular - img_hot_regular.width/2 < mouseX && mouseX < x_hot_regular + img_hot_regular.width/2 &&
    y_hot_regular - img_hot_regular.height/2  < mouseY && mouseY < y_hot_regular + img_hot_regular.height/2 &&
    mousePressed == true ) {
    tint(250, 130, 140, 255);
  }
  else{
    tint(255, 255, 255, 255);
  }
  image(img_hot_regular, x_hot_regular, y_hot_regular);
  
  tint(255, 255, 255, 255);  
  image(img_hot_large, x_hot_large, y_hot_large);
  image(img_cold_regular, x_cold_regular, y_cold_regular);
  image(img_cold_large, x_cold_large, y_cold_large);

  image(img_info_hot, x_info_hot, y_info_hot);
  image(img_info_cold, x_info_cold, y_info_cold);

  
}

</code>

===== ハードウェアプロトタイピング =====
ここではArduinoを利用して電子工作入門を兼ねて，ハードウェアプロトタイピングを体験します．
==== Arduinoの準備 ====
==== LEDを点滅させる ====
<code c blink.ino>
void setup()
{
  pinMode(13, OUTPUT);
}
void loop()
{
  digitalWrite(13, HIGH);
  delay(1000);
  digitalWrite(13, LOW);
  delay(1000);
</code>


==== 音を鳴らす ====
PINのHIGH/LOWだけで，スクエア波を作り，音を鳴らしてみます．LEDのチカチカと同じやり方でスピーカーに
つないでみましょう．
<code c speaker01.ino>
void setup()
{
  pinMode(10, OUTPUT);
}
void loop()
{
  digitalWrite(10, HIGH);
  delay(10);
  digitalWirte(10, LOW);
  delay(10);
}
</code>
上記のコードを理解して，特定の周波数を鳴らすにはどうしたらよいか考えてみる．なお，Arduinoにはtoneという関数が用意されているので，
下記の関数を利用して簡単に任意の周波数を鳴らすことができます((http://www.musashinodenpa.com/arduino/ref/index.php?f=0&pos=2484))．
  *構文
    * tone(pin, frequency) 
    * tone(pin, frequency, duration) 
  * パラメータ
    * pin: トーンを出力するピン 
    * frequency: 周波数(Hz) 
    * duration: 出力する時間をミリ秒で指定できます(オプション) 



=== 周波数と音程の関係 ===
鍵盤の12音階と周波数の関係はすでに下記の方程式によって定義されています．
440[Hz]を基準とした場合，12平均律では音程は2のべき乗で計算される．
$$
 f = 440 \times 2^{(\frac{n-69}{12})}
$$

上記を利用して，$n$ を求めると $$ n = 12 \times \frac{ \log{e}{f} - \log{e}{440} }{\log{e}{2}} + 69 $$ になることを計算して
確かめましょう．
上記式をarduino上で関数として記述することで，ノート番号を渡すとその音高を鳴らすプログラムを作成してみましょう．なお自然対数eのlogはArduinoでは log(double value) として計算ができます((https://www.arduino.cc/en/Reference/MathHeader))．
==== センサの値を読み取る ====
CDSという，光の当たり方によって抵抗値が変化する素子を利用して，その変化量をArduinoで読み取ってみます．
==== サーボモータを動かす ====
==== シリアルLEDを使う ====
  * [[arduino:出力基礎:led]]を参照してください．

====== 最終課題 ======
二人一組のペアを組んで，課題を実施します．
  * <wrap em> 課題概要：お互いにデザイン指示書を作成し，お互いがその指示書をもとに時計ソフトウェアを作成する．</wrap>
  * プログラムの雛形：https://www.dropbox.com/sh/rq8nm2t1ut7qba7/AABUHROwJ18W-WjPAh0NOVZ6a?dl=0
  * デザイン指示書（サンプル）{{:lecture:設計指示書.png?nolink&600|}}

この課題は
  * 7月9日（月）17:00　迄にデザイン指示書を提出
  * 8月2日（木）17:00　迄にソフトウェア及びデザイン指示書を提出+アンケート

の２つあります．最初の提出を忘れないように注意してください．
  
==== 7月9日（月）17:00　迄にデザイン指示書を提出 ====
7月10日の授業最終日ではデザイン指示書を発表してもらうので，そのために予めデータを提出してもらいます．

提出物及び提出形式
  * 提出物：デザイン指示書（見本：{{:lecture:設計指示書.png?linkonly|}}）1枚（複数ページもしくは複数枚の画像はNGです）画面に表示した画像一枚でデザイン指示が伝わるように記述してください．
  * 提出方法：縦横いずれかが1,500px以上の画像ファイルをkibacoを通じてアップロードする．画像のファイル形式はpngまたはjpg形式とする．
  * 提出リンク：kibacoの「最終課題その１」に提出してください．

===== 8月2日（木）17:00 迄にデザイン指示書及び開発した時計ソフトウェアの提出＋アンケート =====
平成30年7月9日に提出した設計指示書をそのままペアとなった学生に渡して，ソフトウェア開発を依頼してください．同様にペアとなった相手から
デザイン指示書をもらい，プログラム作成を開始してください．デザイン指示書で不明な点があれば，その都度ペアとなっている相手に連絡をとり，
どのようにすべきかを指示を仰いでください．プログラマー側が指示書に書いてないことを勝手に制作してはいけません．デザイン指示書に情報が不足して
いた等の理由で，当初の指示書に追記・修正が必要となった場合，必ずデザイン指示書を修正して，再度ペアとなった相手に提出してください．なお，
デザイン指示書を修正するたびに，デザイン指示書v.1.png，デザイン指示書v.2.pngという具合に全てのバージョン情報をファイル名に付与し，まとめて
おきます．

==== 提出物 ====
提出物は下記の通りです．
  * Processing プログラム本体（kibacoとデザイン指示書を出したペアの相手にも送ります）
  * 相手から送られてきたデザイン指示書（修正・追記等でVersionの違いがある場合は，上記で記述した通り，デザイン指示書v.1.pngという具合にVersion情報をファイル名に付与してください．）
  * 自分が作成したデザイン指示書（修正・追記等でVersionの違いがある場合は，上記で記述した通り，デザイン指示書v.1.pngという具合にVersion情報をファイル名に付与してください．）
  * アンケート
    * デザイン指示書及び，制作されたプログラムに関するアンケートをとります．こちらはkibacoでの提出ではなく，馬場が用意するGoogleのアンケートフォームによってペアとなった相手の評価を提出してもらいます．相手のデザイン指示書ややり取りに関する評価項目と，相手が提出したプログラムがどの程度意図通りであったかを評価するアンケートになっています．
    * [[https://docs.google.com/forms/d/e/1FAIpQLSfZWUaSRgyjy321ji3MtnjxUtKnfmSxv0hbwVKHh6OiJGs1rw/viewform?usp=sf_link | アンケートのページへ進む]]

<WRAP center round important 60%>
アンケートも最終課題同様に8月2日17:00迄に締め切られます．アンケートは相手から提出されたプログラムを評価する項目もあるので，ギリギリにプログラムを提出した場合，アンケート評価が間に合わない場合があるので，早めにプログラムを完成させるように十分に注意してください．
</WRAP>
==== 提出方法 ====
下記の1,2,3をzipファイルに圧縮してkibacoに提出します．具体的には制作したプログラムがテンプレートのままのCloclTemplateだとした場合，提出されるファイル構成は次のものになります．
  * スクリーンショット 2018-07-10 11.33.43.png{{:lecture:pasted:20180710-113424.png}}
  * 実際にzipに圧縮したサンプル（サンプルの為，デザイン指示書のpngファイルの画像はダミーです）：{{ :lecture:0123456馬場哲晃.zip |}}
=== 1. プログラム本体 ===
Processingで作成したプログラムの本体のことです．例えばこちらから提供しているClockTemplateの修正し，プログラムを制作した場合，下に閉める階層構造のClockTemplateフォルダのことです．
<code>
ClockTemplate
├── ClockTemplate.pde
└── data
    └── HelveticaNeue-UltraLight.otf
</code>

===2. 相手から送られてきたデザイン指示書===
相手からのデザイン指示書というフォルダにファイルを保存してください．デザイン指示書の画像ファイルには，デザイン指示書という名前をつけ，追記修正が生じた場合はVersionごとに保存してください．例えば実際にやり取りを行い，３度の修正があった場合，次のようなファイル構成になります．

  * スクリーンショット 2018-07-10 11.27.38.png{{:lecture:pasted:20180710-112810.png}}

===3. 自分が作成したデザイン指示書===
自分からのデザイン指示書というフォルダにファイルを保存してください．デザイン指示書の画像ファイル名には，デザイン指示書という名前をつけ，追記修正が生じた場合はVersionごとに保存してください．例えば実際にやり取りを行い，3度修正があった場合，次のようなファイル構成になります．

  * スクリーンショット 2018-07-10 11.30.46.png{{:lecture:pasted:20180710-113058.png}}