Flutterを広めたいって言う思いで記事を書き始めましたが、ついでにハッカソンなどで、いつもやっているアイデアから実装までの手順の整理などもまとめました。

FlutterCreateって？

Flutterを使用して作成したアプリの大会です。
1位には100万円のiMacProが与えられます。

ルールなどまとめ（日本語訳）

Flutterって？

Googleによって開発されたフレームワークです。
普通はAndroidとiOSのアプリは別々に作らないといけないのですが、Flutterを使って1つ作れば、AndroidとiOS両方で配信できる優れものです。

以下、制作の振り返りになります。

アイデアの軸を決める

まずはアイデアを考えます。
そのためにルールの要点をまとめます。

今回の要点
・ソースコードの合計が5120B以下
・Flutterの大会であること

これが現状であり、規定です。もう少しアイデアを出しやすくするために自分なりに解釈をしていきます。

今回の要点
・ソースコードの合計が5120B以下
→　小規模アプリである
→　1つのアクションに1つ反応を返すのが限界
・Flutterの大会であること
→　Flutterを前面に出したアプリを作りたい
→　プラグインを一切入れないで作ってみよう

解釈をすることで自分なりのテーマが決まりました。
僕の中では「1つのアクションに1つ反応を返すのが限界」が実現できる枠になり、「プラグインを一切入れないで作ってみよう」が意思の枠になります。
実現の枠でアイデアを自由に出して、意思の枠で絞っていきます。
以下、出したアイデアの概要です。

・モンスターズインク的なドアを開いていく知育系
・幾何学的な図形をタップして形や色が変化する不思議系
・ひたすらタイムアタックしていくゲーム系
・画像をふんだんに使った絵本系
・チュートリアルアプリのようなシンプル系

個人的には絵本が一番ユーザーが使う場面が想像できたのですが、今回はFlutterらしさを重視して「チュートリアルアプリのようなシンプル系」にしました。

アイデアを具体化する

軸が「チュートリアルアプリのようなシンプル系」に決まったので、具体化していきます。
自分はよく軸の要素を書き出すところから始めます。

チュートリアルアプリの要素
・ユーザーがアクションをして、その変化がアプリ上でわかりやすい
・コードの状態の変化が追いやすい、コードが読みやすい
・触っていて楽しい
・シンプルなレイアウト

要素を書き出せたら同じく解釈をしていきます。

チュートリアルアプリの要素
・ユーザーがアクションをして、その変化がアプリ上でわかりやすい
→　文字の変化　＜　形の変化　=＜　色の変化
・コードの状態の変化が追いやすい、コードが読みやすい
→　少ないState変数、少ないネスト
・触っていて楽しい
→　機能的なアプリでなく、ゲーム的なアプリ
・シンプルなレイアウト
→　対照的なレイアウトの利用
→　正方形や、正円の利用

自分は解釈をした後に優先順位もつけています。
今回は「色の変化」「ゲーム的なアプリ」が重要な要素です。
この2つを優先して決定した最終的アイデアがこちらです。

色あわせゲーム
・お題の色がでる
・お題の色になるようボタンを押してRGBを設定する
・結果を確認する
・結果を表示しても色は操作できる

アイデアを実装に落とし込む

アイデアができてもいきなり実装に入ると後悔することになります。
まずは頭の中にあるアプリをユーザー視点で何ができればいいかを書き出します。

1.　アプリを起動する
2.　お題の色とヒントの最大の色が表示される
3.　赤、緑、青ボタンを押してそれぞれ3段階で設定する
4.　ボタンを押して結果を表示する
5.　結果はユーザーの設定した値から生成した色と結果の文字列
6.　ボタンを押して、次のお題が表示される

これをさらに細かく要件を具体化していきます。

1.　アプリを起動する
2.　お題の色とヒントの最大の色が表示される
　　L　色は正円で表示
　　L　ヒントの文字色はお題の色にする
3.　赤、緑、青ボタンを押してそれぞれ3段階で設定する
　　L　ボタンはそれぞれ段階がわかるように段階でボタンの色を変える
　　L　255 / 3 なので、段階は[0, 85, 170, 255]となる（実質4段階）
　　L　ボタンの文字色は白
4.　ボタンを押して結果を表示する
　　L　結果の要素が現れる
5.　結果はユーザーの設定した値から生成した色と結果の文字列。
　　L　結果はお題のレイアウトと同じ
　　L　結果表示中でも、ボタンを押せば結果は変わるようにする
6.　ボタンを押して、次のお題が表示される
　　L　ボタンの段階はリセットされる
　　L　結果は非表示になる

ここまでくればコードに落とし込むのは楽です。
上記を満たすように機能だけ作ってしまいます。
レイアウトは後です。
ここまでで、重要な要素の「色の変化」「ゲーム的なアプリ」が実現できました。

デザインを調整する

残りの要素で次に重要な「シンプルなレイアウト」を実現していきます。
今回はFlutterらしさを前面にだしたいのと、要素が少ない簡単なアプリなのでシンプルなルールだけ決めました。

・中央寄せ
・文字サイズはいじらない
・ボタンサイズもいじらない
・各パーツの間は10にする
・ボタンは3つ横に並べる

これをコードに落とし込みます。
これで「Flutterらしさ」「シンプルなレイアウト」が実現できました。

コードを調整する

あとは、残りの要素「コードの状態の変化が追いやすい、コードが読みやすい」を実現していきます。
ここでもルールを設定します。

・変数名、関数名が直感で理解できる
・共通化は最低限でベタガキでもいいので分岐を増やさない
・分岐、反復も基本的なif, forを優先して使う
・状態管理の変数には"_"を先頭につけて区別をする

が、ここで問題が！
大会のルールの「ソースコードを5000B以内に収める」の関係で結果として以下のようになりました。

・変数名、関数名が直感で理解できる
→　・_red            →　_r
　　・_green       →　_g
　　・_blue         →　_b
　　・_answer    →　_ans
・共通化は最低限でベタガキでもいいので分岐を増やさない
・分岐、反復も基本的なif, forを優先して使う
→　三項演算子を多用しました。
・状態管理の変数には"_"を先頭につけて区別をする

結果としては、とても読みやすい！というコードではなくなってしまいました。
しかし、ソースコードを圧縮しないという目標は達成できたので満足です。
ここまでで実現したいことが全て実現できました。
今回のアプリの作成にかかった時間はアイデア→実装まで含めて90分でした。

まとめ

ここまで、アイデア→実装→調整と流れを踏んできましたがやっていることはどれも「要点の洗い出し（調査）→日本語で設計→実装→調整」です。
この流れの仕組みは少し調整を加えるだけで仕事でも使えると思います。
実際、自分がこの仕組みを得たのは実務の中でした。
また、今回はハッカソンと違い時間制限がなかったのですが、ハッカソンの時も同じです。（最低限実装したい部分の整理が追加されるくらい）

最後に

ここまでお付き合いくださりありがとうございます。
今回、提出したアプリはストアでリリースをしていますので是非インストールして触ってみてください。
5000Bでここまでできる！っていうのを体験してください。
また、気に入りましたらレビューもお願いします。

ソースコードはこちら