10時間で個人アプリを開発しないと死んでしまう場合の対処法

（ニジボックス アドベントカレンダー2016　22日目の記事です）


ある日のこと

:smiling_imp: あくま:「10時間で、個人でアプリを企画して開発せよ」
:smiling_imp: あくま:「ちゃんと役に立つアプリでよろ。「Hello World」出すだけとかすぐ死んでもらうからな」

なんともまぁ困りました。
でも大丈夫。こんな状況に陥った場合の対処法を書いていきます。

# この記事でカバーしている範囲
- 個人でアプリ開発する際の案出し〜機能定義〜調査〜実装の進め方
- 個人でアプリを完成させるまでに意識したいこと
- 開発プラットフォームは、アプリを簡単に作れる[monaca](https://ja.monaca.io/)を使います
- 深い技術的な話・ストア提出・アプリ周知については書いてないので、その領域に詳しい人の記事を見よう！

# Step1 テーマを決める
アプリを作ろう！というモチベーションから行動しはじめると、
「テーマを決める」ことが大きな壁になることが多いです。

しかし、ここで躓くと何も始まらないので、
まずは自分自身が思うアレあったらいいなー、最近困ってるんだよなーを書き出してみます。

参考までに、最近「[妻が一人で開発したアプリの売上が順調に伸びていてうらやましい](
http://sakahara.hatenablog.jp/entry/2016/12/11/190824)」という記事がありました。
一部分を引用させてもらいますが、
>妻自身が子育て中に授乳のことなどで苦労した経験を活かし、授乳記録を簡単にできてもっとデザインのよいアプリを作りたいという思いをそのまま形にしています。

この方も「これあったらいいな」をアプリ化しています。
自分が困っていることは、アプリで実現したいビジョンがはっきりするので手がつけやすく、
またユーザ層（ペルソナ）が明確になればなるほど的確な広告を配信出来るので、
広告のクリック率・成約率が高くなる＝収益につながるので美味しいですね。

どうしても困りごとが思い浮かばない場合は、
「Yahoo知恵袋」を覗いてみるとヒントがあるかもしれません。
世の中にはこんな悩みがあるのか…と自分の悩みがちっぽけに思えるくらい、無数の悩みが転がっています。

## さて何を作るか
今回は、「車の比較が出来るアプリ」をテーマにすることにします。
数年前に免許を取った時、「移動手段として小さめな車が欲しい」と思ったんですが、

- どのメーカーがどんな車を出しているかわからない
- トヨタのHPにはトヨタの車、ホンダのHPにはホンダの車しか載っていない（当たり前）

という状態で、「小さめの車」という分類での情報収集がしづらい…と思った経験から、
コンパクトカーならコンパクトカー、SUVならSUVを比較出来るような、
自動車メーカーを横断した検索機能を持たせます。

# Step2 機能を洗い出す
テーマが決まったら、どんな機能を付けたいかを洗い出します。
技術的にどうやるんだろう…？っていうのは一旦無視し、
あったら嬉しい、ちょー便利！の妄想を繰り広げ、紙なりテキストエディタに殴り書きしていきます。
ここはダラダラやっても仕方ないので、30分程度集中してやります。
その後に低・中・高でざっくり優先度付けし、まずは「高」に分類された機能実装に専念します。
全部やろうとすると、モチベーションが続かなくてお蔵入りする可能性高しです。
ミニマリストになりましょう。

## 車比較アプリの場合
「小さめの車」というカテゴライズで検索したいことに加え、
この予算感で買える車を把握したり、使うシーン別でオススメの車を把握できたらいいなと思い、
こんな感じで機能を書き出して優先度付けをしました。

- 1.車の形で検索（優先度：高）
- 2.予算で検索（優先度：中）
- 3.利用シーンで検索（優先度：中）
- 4.気に入った車をお気に入りに入れる（優先度：高）
- 5.気に入った新車／中古車の見積もり（優先度：低）


# Step3 画面イメージを書いてみる
Step2の「優先度：高」の機能をベースに、画面イメージを書いていきます。
画面イメージで書き出したいことは、

- 1.大体の画面レイアウト
- 2.画面の遷移フロー
- 3.各画面で表示する項目

この3つをざっくり把握し、完成イメージをより明確にしていきます。
大体1時間くらい紙に書き出していけば、それなりの形になっていきます。
書き終えると、画面数や表示したい項目が見えてくる＝開発の大変さがぼんやり見えてきます。
大変そうや…と思ったら、思い切って画面を減らすなり表示項目を減らして、
これならイケる！と思うラインまで開発内容を削ぎ落としましょう。

# Step4 技術調査
Step3の画面書き出しで、大体の完成イメージが見えてきたので、
つぎに技術観点でどう実装していくか？を調査・検証していきます。
調査しているうちに難しそうだ…と思ったら、やり方を変えたり、いっそのこと機能を削っちゃいましょう。

見た目はmonacaでスタンダードに使えるonsenuiとbootstrapを使うと割り切り、
機能をどう実現するかにフォーカスして調査を進めます。
UI、UXは大事なものの、深みにハマるとアプリの完成が遠のくので、あえて触れないでおきます。

## 車比較アプリの場合
今回作りたいアプリは、車の情報をどう引っ張ってくるかが鍵となります。
そんな中見つけたのが、リクルートが提供している[カーセンサーのAPI](https://webservice.recruit.co.jp/carsensor/reference.html)。
カーセンサーはリクルートが運営する中古車サイトで、
各地域にある中古車情報のAPI、車の情報がAPIで提供されています。

これが使えそうだ！と検証したわけですが、まぁ困りました。
例えばホンダの車情報をAPIで問い合わせた場合、
「フィット 13G Fパッケージ」
「フィット 13G Gパッケージ」
「フィット ハイブリッド Fパッケージ」
「フィット ハイブリッド Lパッケージ」
oh...同じモデルのエディション違いがめっちゃ出てくる。
欲しいのは「フィット」や「ステップワゴン」という車種の名前だけなんですが、
そのまま使うことが出来ないので、少しデータ加工が必要そうです。
早くもデータ加工面倒だな…とテンション下がる気がしたので、
暫定で代表的な車をググって、20台分のデータをソースにべた書きすることにしました。
ダサいなぁと思いながらも後で直せば良い部分なので、なるべく時間を掛けず、ミニマムでの完成を目指します。

# Step5 実装
冒頭で述べた通り、今回は[monaca](https://ja.monaca.io/)を使って実装を進めていきます。
monacaはhtml、css、javascriptで書いた1つのソースで、
Android版、iOS版にそれぞれビルド出来るハイブリッドアプリを作れるプラットフォームです。
PCでのプレビューはもちろん、スマホ端末でのプレビューも爆速で出来てめっちゃ便利。
使い方の説明は割愛しますが、アプリ制作の技術的な敷居は大幅に下がります。

monacaでひたすら機能面（ページ遷移、ボタン押下時の処理まわり）を作り込みます。
レイアウトは全部onsenuiに任せて、フォントサイズを少し調整してあげれば見栄えはそこそこ良くなります。

# まとめ
全体的に「無理だと思ったら機能を削る・別の方法を考える」と書いてきましたが、
個人アプリはいかに早い段階で動くものを作り、モチベーションを維持するかがカギだと思っています。
タイトルの「10時間」という数字にそこまで意味は無いですが、時間制限を設けた上で、

- 何をやらないか決めること
- やろうとしていたことを捨てる勇気

この点を意識してアプリのベースを作ってしまい、その後に機能の肉付けをしていく作戦が個人的には気に入っています。
文中の車比較アプリは上記ステップを踏みつつ、大体10時間で企画〜ミニマムの機能実装をしていて、
年末年始にもう少しだけ手を加えてリリースする予定です、

みなさまも、よい個人開発ライフを！