見出し画像

CIID Week13-14: Physical Computing

Kosuke Machida

最近の2週間は、Physical Computingというクラスを実施していました。Arduinoという、マイコンボードを使ってインタフェースを作る授業になります。CIIDのクラスの中でも人気が高く、またInteraction Designの文脈でも大きな役割を果たす要素なのですが、クラスが始まる前は、この分野に苦手意識を感じていました。というのも、中学校の技術の授業では、自分でTangibleなモノを作ることができなかったからです。その後受験の影響もあり、数学や英語といった理論的なモノに逃げていき、モノづくりからは離れてきました。

クラス期間中は辛い時期もありましたが、最終的には苦手意識を払拭しつつ、ちゃんと動くモノを作ることができました。今回もこれまでと同様に実際のプロセスに沿ってポイントを解説していきたいと思います。

また先立って作成したコンセプトビデオも掲載しておきます。自分で言うのも憚れますが、理解しやすいコンセプトと思うので、是非先も読み進めていただければと思います。

なぜPhysical Computingが必要なのか

コンセプトをTangibleな形で表現できる
Physical Computingと聞いて、明確なイメージが湧かない方も多いと思いますが、要するに、コンピュータにセンサー等を接続して、物理的(Physical)な世界とコンピュータをつなぐことで、新たなモノを作り出すことです。最近は工学系の分野だけではなく、アートやデザインの文脈でも用いられることが多くなってきています。

ソフトウェアの世界では、ユーザー側のアクション（クリック等）に対して、スクリーン上にフィードバックを返すことが基本ですが、Physical Computingの世界では、ユーザー側が取れるアクションは無数に存在し、またフィードバックも単純なスクリーンだけではないため、何か新たなプロダクトを作るといった文脈で重宝されています。デザインシンキングのプロセスで得られたアイディアやコンセプトを形にする段階では必要不可欠になるわけです。

またInteraction Designの文脈になると、Physical Computingの重要性はより増してきます。文字通り、Interaction Designは人とモノのInteractionを考えることに他ならず、人とシステムのInteractionを考えるPhysical Computingは、切り離せない関係になっています。

一方で、複雑性も増します。ユーザー側のアクションをどのように検知するか、検知した信号をどのような形でコンピューターに返すか、コンピューター内部の処理をどのように設計するか、最後にどのようなフィードバックをユーザー側に返すか、など考えることが格段に増してきます。

IoTの台頭
IoTは注目されて久しい概念ですが、まだまだ発展途上であり、接続可能なモノの数から類推すると、今後もこの概念から多くのビジネスチャンスが生み出されるはずです。Physical Computingのように、物理的な環境から読み取った信号を、コンピュータ内で処理し、ユーザーに何らかの形でアウトプットを示すことは、広義の意味で、IoTに他なりません。

日常的に自分が思っていることをPhysical Computingを用いて表現するだけで、もしかしたら、大きなビジネスに繋がるかもしれない…と考えると、Physical Computingは日本でもっと広まってもいい概念だと思います。

Step0: Project Brief

最初の3日間は、Arduinoというマイコンボードの基礎学習を行いましたが、残りの7日間は、4人1組でプロジェクトを行いました。プロジェクトのテーマは、以下のようなものです。

Reinvent an ordinary object by adding a new, or reimagining its existing, interactivity that considers a beyond-the-user scale

要するに、「身の回りにある製品を捉え直して、人間の影響範囲を超えた、新たなプロダクトとして作り直せ」ということです。非常に抽象度が高いテーマとなりましたが、その分発想の幅も広がりそうでした。

Step1: Ideate Concept

Crazy 8 + Different Angle

画像1

抽象度の高いテーマかつArduinoの知識に限りがあったこともあり、今回は少し異なるブレインストーミングを実施しました。短い時間でアイディアを考えることはこれまでと同様なのですが、実際にArduinoで使えるセンサーや部品を見ながら、アイディアを考える点がこれまでと異なります。そしてセンサーや部品を5分毎に変えて、常に異なる視点でブレインストーミングを行なっていきました。

結果的には、Arduinoを使ってできることを抽象的に想像しながら、実際に「実現できそうなアイディア」をいくつも考えることができたので、今後もこの方法は活用していきたいと思います。

Define Key Interaction

画像2

今回のクラスでは、これまでのクラスと比較して、人間とプロダクトのInteractionをより考えることが求められていました。これまでは何となくIdeaとそのContext考えるのみで、あまりInteractionを考えることが求められてこなかったこともあり、どのチームも苦戦しているようでした。

また実際にPhysicalの世界で機能を実装する必要もあったため、「想像する理想の機能」と「3日程度で実装できそうな機能」に解離があり、コンセプトの形でまとめ切ることが非常に難しかったです。

ここで自分たちのグループがとった手法は、着目するInteractionとそれに準ずる機能を一つに絞ることです。時間を有効に使いつつ、特定のユーザーに対して成立するプロダクトの作成を目指しました。これにより、結果的には着目した機能を深掘りすることに繋がり、さらにプロダクトが使われる状況が明確になりました。

そして自分たちのアイディアは以下のようになりました。これもすぐに決まったわけではなく、実際にモノを作りながら、試行錯誤してプロダクトを使う状況やその機能を明確にしていきました。まさにプロトタイピングの力ですね。

・ユーザー: 4-7歳の子供
・概要: 子供が自分の周囲に存在する動物や昆虫に気づけるように、動物や昆虫がデバイスの前を過ぎ去ったらカメラのシャッターを切り、それを子供に知らせて、目に見える形でミニプリンターから出力する
・実装する機能1: モーションに応じてカメラのシャッターを切る
・実装する機能2: 撮影した写真をクラウド上に保存する (クラウド上からミニプリンターに送信する)
・実装する機能3: 送信されてきた写真をミニプリンターで印刷する

Step2: Design Physical Shape

Step2とStep3は同時並行に進めて、デザインとエンジニアリングの両側面からプロダクトを設計していきました。便宜上、二つの側面をStepに分けて解説しています。

1st Prototype

画像3

この段階では、プロダクトの形は愚か、どのように機能を実装するかも決まっていなかったのですが、まずは理想型を作ろうということで、プロダクトの最終形をレーザーカッターを用いて作成してみました。

実際にTangibleな形にして、Bodystorming（実際の状況に即して演じてみる）することで、「子供にはおそらく何らかの指示がないと使ってくれないだろう」「LEDの点滅で撮影した写真の数を知らせよう」等といった小さいですが、Interactionを完全にするために必要な要素がいくつも発見されました。やはりTangibleなモノにして議論することは重要ですね。

2nd Prototype

画像4

この段階では、ハードウェアの設計上、カメラ部分（右）とプリンター部分（左）を分ける必要があることが分かってきました。また子供用デバイスということで、イラストも可愛くデザインすることも求められました。

プロトタイピングとしてスマホカメラを使うこと、プリンターはThermal Printerを使うことが分かっていたので、この時は、カメラの穴をどこにおくか、プリンターから出る電源コードをどの位置から出すか、など具体的な物理的制約から実際のプロダクトの形をデザインしていきました。

Final Prototype

スクリーンショット 2020-06-07 15.22.18

最終的には、物理的な制約を一つずつ潰しながら、写真のような3点セットを一つのキットにしようとなりました。カメラ・プリンターの機能がワークすることはもちろん、実際に塗料を用いてペイントすることで、より本物らしいプロトタイプに仕上げました。

Step3: Design Function

Bluetooth Based Camera
Arduinoには、実はESP32 Cameraというカメラモジュールが存在し、それをMotion Sensorと接続するだけでカメラの機能は実現できるのかなと考えていたのですが、そんなに簡単に事は運びませんでした（笑）。

画像6

サイズ的にも最適でぜひ活用したかったのですが、ハードウェア側に問題があったようで、1日かけても機能を実装する事はできませんでした。この時間帯は非常に辛かったです…。

そこでアナログですが、セルフィースティックなどに使われているBluetooth Shutterとスマホカメラ、Motion Sensorを接続することで、機能の実装を図ったところ、これが非常に良く作動したので、プロダクトの設計上スマホは少し大きいですが、スマホカメラを取り入れることにしました。

実際に動いている写真を見せたかったのですが、感動のあまり撮り忘れていたため、同じ原理で動いているカメラのYoutubeを掲載しておきます。

Thermal Printer

画像7

次にプリンターに取りかかったわけですが、テキストを印刷する事はそれほど難しくありませんでした。一方でThermal Printerではjpegイメージを印刷することができないようで、壁に当たってしまいました。

どうやらjpegをドットで表現する必要があるようで、その処理をコンピュータ上で開発する必要がありました。自分はProcessingを活用して、jpegを.h拡張子の形に変換するプログラムを作成し、手動ではありますが、Thermal Printerが印刷できる形に変換することを可能としました。

実際のProcessingのコードは、ここに掲載しておきます。印刷したイメージは上記画像になります。なかなかレトロでセンスがあるような気がします。

void setup() {
 // Select and load image
 selectInput("Select image file to convert:", "processImage");
}

void processImage(File image) {
 String      filename, basename;
 PImage      img;
 PrintWriter output;
 int         pixelNum, byteNum, bytesOnLine = 99,
             x, y, b, rowBytes, totalBytes, lastBit, sum;
 println("Loading image...");
 filename = image.getPath();
 img      = loadImage(image.getPath());

 // Morph filename into output filename and base name for data
 x = filename.lastIndexOf('.');
 if(x > 0) filename = filename.substring(0, x);  // Strip current extension
 x = filename.lastIndexOf('/');
 if(x > 0) basename = filename.substring(x + 1); // Strip path
 else      basename = filename;
 filename += ".h"; // Append '.h' to output filename
 println("Writing output to " + filename);

 // Calculate output size
 rowBytes   = (img.width + 7) / 8;
 totalBytes = rowBytes * img.height;
 // Convert image to B&W, make pixels readable
 img.filter(THRESHOLD);
 img.loadPixels();

 // Open header file for output (NOTE: WILL CLOBBER EXISTING .H FILE, if any)
 output = createWriter(filename); 

 // Write image dimensions and beginning of array
 output.println("#ifndef _" + basename + "_h_");
 output.println("#define _" + basename + "_h_");
 output.println();
 output.println("#define " + basename + "_width  " + img.width);
 output.println("#define " + basename + "_height " + img.height);
 output.println();
 output.print("static const uint8_t PROGMEM " + basename + "_data[] = {");

 // Generate body of array
 for(pixelNum=byteNum=y=0; y<img.height; y++) { // Each row...
   for(x=0; x<rowBytes; x++) { // Each 8-pixel block within row...
     lastBit = (x < rowBytes - 1) ? 1 : (1 << (rowBytes * 8 - img.width));
     sum     = 0; // Clear accumulated 8 bits
     for(b=128; b>=lastBit; b >>= 1) { // Each pixel within block...
       if((img.pixels[pixelNum++] & 1) == 0) sum |= b; // If black pixel, set bit
     }
     if(++bytesOnLine >= 10) { // Wrap nicely
         output.print("\n ");
         bytesOnLine = 0;
     }
     output.format(" 0x%02X", sum); // Write accumulated bits
     if(++byteNum < totalBytes) output.print(',');
   }
 }

 // End array, close file, exit program
 output.println();
 output.println("};");
 output.println();
 output.println("#endif // _" + basename + "_h_");
 output.flush();
 output.close();
 println("Done!");
 exit();
}

また時間的な制約上、当初予定していた、「機能2: 撮影した写真をクラウド上に保存する (クラウド上からミニプリンターに送信する) 」を実装することができなかったので、その部分は手動で実施しました。

最後に

最終的には、プロダクトショットとコンセプトビデオまで作成するという、なかなか見栄えの良いプロジェクトにすることができました。コンセプトビデオの撮影では、地元の子供に出演してもらっています。撮影と編集は自分が担当していますが、チームにArt Directorがいたこともあり、こちらも大きな学びになりました。

より多くの学びがあり、タフでしたが、満足度の高いクラスとなりました。このクラスでは、実際にTangibleな形でモノを表現することで、議論が進みやすくなるとともに、Interactionをより高いレベルでデザインするためには必要不可欠な要素なのだと感じました。

またハードウェアを伴ったプロダクトの重要性にも気づくことができたと思います。このデジタル時代では、サービス開発となるとスマホアプリを連想しがちですが、Physicalな形でデザインするからこそ、ユーザーが満足することもあると思います。今後のプロジェクトでは、実際にコンセプトをPhysicalな形でデザインするためには、どのようにすれば良いか、ということも考えていきたいと思います。

町田

この記事が気に入ったらサポートをしてみませんか？