ソフトウェアエンジニアが CIID の IDP コース（11, 12週目）に参加して学んだことをゆるりと共有します。今回（5/11~5/22）はプログラミングの勉強でした。本当はプログラミングしてみて四苦八苦したことを書きたいですが、僕にとってはそんなに詰まるところはありませんでした。なので、内容が薄めです。あと、僕の感想と経験が多めです。
10週目の記事もあるので良かったら読んでみてください。
Day 46 ~ 50: Play with programing
プログラミング初心者がほとんどであるため、最初の１週間はプログラミングの基礎の授業でした。先週も使った JavaScript のライブラリー P5.js を学びました。この章ではプログラミングの説明はしません。プログラミングに興味ある方は下記のリンクのサンプル集で勉強すると良いと思います。
後は、僕がこの週に作った宿題を載せて終わりにします。あと、今週は一人の作業です。
初日はお絵描きの宿題だったので、ゲームキューブコントローラーとニンテンドースイッチを作りました。画面を押したらスイッチが起動します。
2日目は forを使ってパターンを作る宿題だったので、常用漢字とひらがなで日本語の小説っぽいプログラムを作りました。
3日目は食に関するものを作る宿題だったので、日本の回転寿司を作って、最後に食器洗いをするプログラムを作りました。
4日目はアニメーションの宿題だったので、ピカチュウを捕まえた後にモンスターボールがコロコロするプログラムを作りました。
5日目は、週末に休めるように宿題がありませんでした。
Day 51: Think about programing
この日は、この授業の最終発表の課題が渡されてチームで作業する日でした。課題は「プログラミングを使って、コロナによって分断されている最近の生活を繋げるソリューションを作る」でした。これに更に「マルチプレイ」「API のデータ連携」「ツール」という、条件を各チームが選んでデザインする方式でした。僕たちのチームは「マルチプレイ」を選択してゲームを作ることになりました。
Make interaction simple
チームメイトがプログラミングが初心者ということもありインタラクションがシンプルなコンセプトを選ぶように言われました。更に、初心者にはそんなにインタラクションは必要なく、スコープを小さくしてゴールを目指すべきとアドバイスされました。これは、僕にとってとても納得できるアドバスでした。前回の機械学習の授業の前までは、どちらかというと議論の比重が大きく、重厚長大なコンセプトを作ることが多かったと思います。しかし、実際にものづくりをするとなると、1つのことを確実に達成することが出来るようにすることが優先だと思っています。
なので、まずはコンセプトをシンプルにして、作るものの優先順位をつけることが最初の一歩だと思っています。そして、その優先順位をもとに MVP を意識して作る。その後に、テストして改善する。このサイクルが重要なのかなと思います。正直、後から複雑なものにすることは簡単なので、ものづくりのスタートはシンプルであるべきだと思います。
Day 52: Start programing
この日は、前日に考えたコンセプトを実装して行く日でした。僕たちのチームは、僕がちょっと難しそうな箇所のコードを書いて、それをチームメイトが書いているコードにマージしてもらうという方法で実装して行きまた。この章では講師に言われて、プログラミンする際に改めて大事だなと思ったこと共有しようと思います。
Break down
「最初に機能のブレークダウンをしなさい」とこの日の授業の最初に言われました。日本で僕がものづくりをする時に、このアドバイスは無意識的にやっていたことだと思いました。普段、ソフトウェアでものづくりをする時はストーリーボードを書いて、ユーザーとのタッチポイント洗い出して、実装のイメージが付くレベルまで機能を分解して Github の issue に落とし込んでいきます。その際に、must have と nice to have の機能に分けて、実装するべきフェーズを分けます。どのフェーズまでが MVP かをチームメイトと合意をとって、時間とタスクの配分を行います。そして、フェーズをクリアするたびに時間があれば次に進むと言った感じで改善を加えます。
僕たちのチームはフェーズを3つ用意して、フェーズ2まで実装できれば MVP となるように計画しました。そして、チームメイトは初心者だったので、簡単なものから実装を進めるようにタスクの分担をお願いしました。初心者にとっては、「とりあえず実装できてる感」が一番大事だと思っているので、簡単なタスクでプログラミングを楽しいと思ってくれたら嬉しいと思っていました。僕たちのチームは、この日中にフェーズ1を完成させました。
Day 53: Make minimum viable product
今日は自分たちのコンセプトの MVP（Minimum Viable Product）を完成させる日でした。幸運なことに僕たちのチームは技術的な問題もなく MVP にたどり着くことができました。それを察した講師が僕たちのチームに新たな課題を出して来ました。それについて少し共有しようと思います。
More fun
僕たちのチームはコロナからアイディエーションして、ソーシャルディスタンスをコンセプトにしたゲームを作りました。それは p5.js と Firebase を使って、リアルタイムに複数人でゲームに参加し、ソーシャルディスタンスを保ちながら目的地を目指すゲームです。
夕方ぐらいには MVP に必要なフェーズ2の機能は完成していました。そして、夕方の講師とのレビューで、「早く終わってるならもっと面白いゲームになるように考えてみなよ！」と助言をもらいました。これをきっかけに実際に逃げるような動作でソーシャルディスタンスを保ちながら目的地を目指すというアイディアを考えました。
プレイヤーの移動に矢印のキーボードを使っていたのですが、先週の機械学習の授業を応用して、ウェブカメラで顔をトラッキングする操作法を考案しました。その顔の位置でプレイヤーの進む方向を決めるようにプログラムを変更しました。簡単なインタラクションを加えただけでしたけど、実際に自分の体を使ってプレーするというのは、自分が作ったゲームでも楽しかったです。画面とボタンだけのインタラクションだけでなくて、体全体を使ったインタラクションは更に面白くなるなと感じた日でした。
これはゲームだけでなくて、デザイン全般に言えると思います。なにかインタラクションに一工夫入れたくなったら、違った方法のインタラクションを考えることは効果的だなと思いました。
少し技術的な話になりますが、Firebase は便利とても便利だなと思いました。今回の複数人のリアルタイムに Firebase Realtime Database を使ってみたのですが、とても簡単に実装できました。データをしっかりデータベースする場合はもう少し時間がかかりますが、今回の様に別にデータベースに保存する必要ないワンタイムのデータのために Firebase Realtime Database を使うのはかなり効果的でした。これからも使っていきたいと思います。興味ある人は下記にリンクで詳細を見てみてください。
Day 54: Polish details
今日は翌日の発表に向けて MVP の完成度をあげるためにフェーズ3を実装する日でした。チームメイトがゲームのデザイン経験者だったので、チームメイトのデザインをもとにして効果音やフィードバックの詳細を詰めて行きました。この章ではチームメイトから学んだことを共有しようと思います。
God is in the details
ゲームのインタラクションは明確に保つための変更をしようとチームメイトに言われました。議題に上がったのは、機械学習と顔を使った操作でした。最初は、顔が画面の右側にあったらプレイヤーが右に移動して、顔が画面の上側にあったら上に移動するというような操作でした。これが少し分かりにくいと指摘されたので、顔の画面の位置をそのままプレイヤーの位置に使うように変更した。そのことでプレイヤーの移動と自分の顔の移動をより明確にリンクできました。
また、フィードバックは細かく正確に行うように指摘されました。ゲームのルールで、プレイヤー同士が衝突したら5秒間停止するというルールがあります。最初は、プレイヤー同士が衝突したら画面全体が震えるようなフィードバックを作っていました。しかし、そうしたらタイマーの時間が見づらい可能性があるとチームメイトに指摘されました。僕はそんなに気にならないと思っていました。しかし、実際にクラスメートの一人プレーしてもらったら、本当に読みづらいと言われました。なので、画面を振動させるフィードバックは取り除きました。
また、色の関連性を指摘されました。同じ意味の要素は同じ色にまとめる必要があると言われ、色の統一を行いました。更に、効果音の追加も行いました。文字や画像のフィードバックでは不十分な可能性があるので、音を使ってそれぞれのプレイヤーのインタラクションに対してフィードバックした方が良いと言われました。音のフィードバックは、単純フィードバックする役割の他に雰囲気作りでも大きな役割を果たしたと思っています。
上記のようにチームメイトから細かい点をたくさん指摘されていました。基本的には「プレイヤーにとって簡単に操作できること」と「プレイヤーにとってフィードバックが見やすく分かりやすいこと」の2点を常に言われていました。僕からしたら些末な問題だと思うことも真剣な表情で重要性を説かれました。彼の姿勢から「神は細部に宿る」という言葉を思い出しました。
正直、本格的なテスト前のサービスでここまでやる必要があったのかわかりません。テスト後に大きくコンセプトや機能が変わる可能性は全然あると思います。しかし、デザイナーとして小さいことに拘ってものづくりするというのはとても参考になりました。（ぼくは雑に作りがちなので。。。）
Day 55: Presentation
この日は今週のプロジェクトの発表の日でした。僕たちは「Human crosing」というゲームを作りました。その発表資料を下記に載せておきます。
今週はプログラミングの授業だったので内容自体はそんなに苦労しませんでした。どちらかというと、授業後にプログラミングをクラスメートやチームメイト教える方が苦労しました。また、今週の講師は実際にソフトウェアのエンジニアなので、僕とのものづくりのやり方ととても近かったのでとてもやりやすかったです。Firebase の API key があるのでそのまま公開できないですが、最後に今回かいた P5.js のコードを共有します。チームメイト用になるべく関数を使わないようにインラインで書いています。あと、コメントが多いです。
来週からはフィジカルコンピューティングの授業で、僕のやりたかった IoT に近づいているので今からとても楽しみです。
13, 14週目の記事もあるので良かったら読んでみてください。