未来を創る、テックコミュニティー

プロトタイピング開発事例紹介〜簡易アプリができるまでの流れ

おおのしょうへい
2020/10/31

こんにちは。エンジニア兼ライターの大野です。

今回の記事では、シンギュラリティ・ラボ(シンラボ)で進行中のプロジェクトで開発したプロトタイプについて紹介していきます。短期間で”まず動くものを作ってみる”ことの実践例となりますので、何かしらのアプリ開発に取り組んでみたいという方は参考にしてみてください。

アプリ開発までの経緯は以前作成した記事に書いていますのでこちらもご覧ください。

開発したプロトタイプの概要

今回開発したプロトタイプは、作ったものを簡単に共有できて、かつ動きはイメージできるアプリという前提で作成しています。イメージ的には下記の画像のように、画面上に異なる画像が描かれたボタンが表示され、同じ画像ペアのボタンを押すと正解となり画像が消えるというアプリです。

利用端末はタブレット端末が主となる想定ですが、共有が簡単にできるようにWebブラウザで動くアプリとして構築しました。Webブラウザで動くアプリとして構築する場合、一般的にはフロントエンドとサーバサイドの両方を構築するのですが、プロトタイピングということでフロントエンド側のHTML・CSS・Javascriptだけで作成しています。企業などでしっかりとしたシステム開発を行う際にも、動作確認用にフロントエンド側だけのアプリを作成して画面の挙動を確認するということはよくありますので、今回はそのさらに簡易版というイメージです。

プロトタイプの構成(技術者向け)

プロトタイプの構成と利用したライブラリも紹介しておきます。
少しだけエンジニア向けの内容になりますので、自分でアプリ開発はやらないぞ、という方は読み飛ばしてもらえればと思います。

利用した言語

・HTML/CSS
画面の構築とデザイン面の設定に利用。一般的なWEBページもHTML/CSSを書けるようになれば見た目だけは再現できることが多いです。

・Javascript
ボタンを押した時の挙動、ボタンに表示する画像の制御など、ロジック部分の作成に利用。

利用したライブラリ

・Bootstrap
画面レイアウトのベースを整えるために活用。画面レイアウトを簡単に作成できるため、手っ取り早くアプリを作る際によく使われるライブラリです。

・JQuery
webアプリなどでJavascriptを利用する際に必要な機能をまとめたライブラリです。ないと開発ができない、というものではありませんが開発を効率化できるため採用しました。

構成

今回作成したファイルの構成は以下のとおりです。
ロジック部分はmain.jsにほぼ記載し、elements.jsとpattern.jsはボタン表示される要素とパターンをまとめたソースとなっています。

※ 注:本来ならJSONファイルなどで読み込んでも良かったのですが、ローカルで実行すると環境によっては読み込めない場合もあるためJSファイルとして作成

・index.html
・src
– main.js
– main.css
– elements.js
– pattern.js
・data
– img
– …(ボタンに表示する画像データを格納)
– voice
– …(ボタン押下時に再生する音声データを格納)

プロトタイピングの流れ

プロトタイピングを行う際には、まず作成目的と作りたい物のイメージを確認します。
誰が利用する想定のアプリか?どんな挙動のアプリにしたいか?実装するべき要素は何か?など発案者と事前に意識合わせを行います。
今回は作成目的や作りたい物のイメージは固まっていたので、この辺りは発案者の方から資料などを共有してもらい確認していきました。

次に作成物のイメージを設計書として資料化します。
一人で作るなら設計書の作成は飛ばしていきなりソースコードを書いても良いのですが、作ったソースコードを誰かに引き継いだりプロトタイプを元に本格版のアプリを開発する際にも利用する可能性があったため簡易の設計書を作っておきました。
とはいえ、設計書作成にあまり時間を使うのももったいないので「画面イメージ」「データ構成」「処理内容」程度のざっくりイメージで作成しました。エンジニアの中にはソースコードが設計書だ!という方もいらっしゃいますが、あとから引き継ぐ方のスキルに依存する部分ができてしまうため、簡単にでも良いので設計書があるといいのではないかと思います。

資料化を行ったあとは、こちらをベースにソースコードの開発を行います。
開発中に様々な課題や制約が出てくることもありますが、その辺りは気合でなおしていきます。機会があれば開発中の課題や制約の解決についても記事かできればと思っていますので、気長にお待ちいただければと思います。

ソースコードの開発が終われば、最低限の動作確認を行いチームメンバにできあがったアプリを共有します。
なお、しっかりしたシステム開発であればここでシステムテストと呼ばれる開発したアプリが正しくできていることを確認するフェーズがあります。感覚的には開発よりもテストに時間がかかることの方が多かったりしますので、スケジュールを立てる際には気をつけておくと良いかと思います。

以上のような流れでプロトタイピングを行い、簡易のWebアプリを作成しました。

プロトタイピングで苦労したところ

今回のプロトタイプ開発では、共有を簡単にするためフロントエンドのみで完結する構成として作りました。
画面上に表示されるボタンの画像や表示順のパターンは当初JSONファイルで読み込み、外部ファイルとして扱えるように作成していました。

ですが、ローカル環境に置いたファイルを読み込もうとした際にChromeの仕様でうまく読み込めないという問題が発生しました。このように、事前にしっかり調べていたり知識があればわかる課題もプロトタイプ開発ではよく出てきます。
一般的な課題であれば、ネット上でエラー文を検索すれば解決策が書かれていたりしますので、最近は何か起きた際にもすぐ解決できるようにはなってきているかと思います。
ちなみに今回の課題は、読み込み予定だったJSONファイルの内容をJavascriptとして記載して回避しました。

そのほかiOSで実行した時だけ画面切り替えのタイミングで遅延が発生したりといった問題も発生しました。この問題はiOSでのAudioの扱いに起因する問題で、PCで試験していた範囲ではわからないものでした。

プロトタイピングということもあり、発生した問題に対してどこまで割り切るかという議論はありますが、開発したアプリを試す際にどうしても外せない要素であれば修正が必要になってきます。こういった場合には、一緒に開発しているメンバがいれば課題事項を共有していくことで何かしらの解決策を知っているということもあるのではないでしょうか。

まとめ

今回の記事ではシンラボのプロジェクトとして実施したプロトタイピングの事例を紹介してきました。

プロトタイプ開発は、作成目的や作りたい物の規模などでやり方が変わってきます。
今回の例では、作成目的や作りたい物のイメージは固まっており、規模も比較的小規模なアプリという前提で進めました。作成目的が決まっていない場合は、いきなりアプリ開発ではなくプロトタイピングツールなどを利用してより高速にブラッシュアップを進めていく方が良い場合も多いですので、あくまで一例としてみていただければと思います。

シンラボでは今回の例以外にも様々なプロトタイプ開発が進められています。
プロトタイピングなどアプリ開発の経験を積んでみたいという方は、ぜひ一緒に開発などできればと思います。
もちろん、作ってみたいアプリがある方の参加もお待ちしています。

最後までお読みいただきありがとうございました。

この記事を書いた人
おおのしょうへい
エディター