【Flutter】Flutter大学女子部でプレゼントおすすめするアプリを作った話💖
本記事はFlutter大学アドベントカレンダー23日目の記事です。
こんにちは！先日、Flutter大学の女子メンバーで共同開発アプリ第一弾をリリースしました🕺🏻✨
Flutter大学女子メンバー＋デザイナーさんの7人で作り上げた
プレゼントおすすめアプリ「レコメンだー」です💖
レコメンだー
クリスマスシーズン、女性へのプレゼント選びをお手伝いするアプリです🎁
- Flutter女子部のみんなで女性目線で本当に欲しいものをピックアップいたしました！
（みんなが本当に欲しいものにしたら思ったより価格が..🤫ご了承ください🙇🏻♀️） - 「ランダム」を押して進むと、サンタさんが箱を開けておすすめプレゼントを選んでくれます！
- 商品のリンクページに飛ぶことができるので、ぜひそこからプレゼントしてみてください✌🏻
- さらに、おすすめしてくれたメンバーのコメント付きなので、参考になるはずです！
- 「条件で絞る」機能はComming soon..!（現在女子部でわいわい開発中です✨）
女性へのプレゼント選びで迷った時はどうぞお使いください＾＾
👇🏻 こちらから試せます！
Fluttet大学女子部とは
Flutterコミュニティ 『Flutter大学』 にいる数少ない女子メンバーグループです💫
女性エンジニアはとっても少ないので、そんな中で運命的に出会えた女子たちはかけがえのない存在になっています〜。アプリを作ってみたい、Flutterを触ってみたいという気持ちから集まってきた方が多くて、年代や職業もバラバラで個性的なメンバーが揃っています！週１くらいでgatherに集まって、雑談しながら開発を進めています〜🕺🏻🕺🏻どんどん女子メンバーが増えてきてめちゃくちゃ嬉しいし、楽しいです！新メンバーもお待ちしてます🫰🏻🎀
今回のレコメンだーアプリの開発参加メンバーはこちらです👇🏻
なぜ作ったのか
月に1回開催される女子会で「Flutter女子を盛り上げたい」という話や、「Flutter大学内の共同開発に参加してみたいけどついていけるか心配」という声が上がっていたことから、Flutter女子の共同開発を提案してみたことがきっかけです💙実際に私も、共同開発は参加してみたい気持ちはあったのですが、ひよって参加を逃していたので、自分の中でもチャンスだな〜と思ったので声をかけていきました！（yui）
yuiさんが「みんなでアプリを作りたい！」と提案してくれたことでかなり盛り上がり、「女子ならではのアプリがいいね。」「もう少しでクリスマスだしね。」とトントン拍子でここまで来ました😆女子部のノリと勢いが最高です✌🏻
どうやって作ったのか
開発期間
開発期間は約1ヶ月半です。
11月初に開発がスタートし、週１で集まって進捗の確認や相談しながら開発を進めました！
まずはGooglePlayStoreやAppStoreへのリリースはせず、webでの公開だったので
そこまで複雑な工程はなく、スムーズに進められました！
gatherMTGの様子♡
使った技術・パッケージ
- Flutter
- Firebase
- Firestore
- Storage
- Hosting （FlutterWebで公開）
- url_launcher https://pub.dev/packages/url_launcher
- cached_network_image https://pub.dev/packages/cached_network_image
- hexcolor https://pub.dev/packages/hexcolor
- figma
デザイン
レコメンだーがとっても可愛いアプリになったのは、yuiさんのご友人デザイナーのばやりんさんのおかげです🙏🏻一度、MTGを開いてこういうものを作りたいという相談したら、想像以上のものを作り上げてくれました！✨figmaを使用して、アニメーションのところなども細かくデザインしてくれました！さらに、おすすめ商品画像もも著作権が心配だと話したら、それぞれのイラストも用意してくれました！感謝しきれないです🙇♀️
開発について
実際の開発については各メンバーが担当した部分を説明してくれました〜🙌🏻
■ PM・取りまとめ
💫 自己紹介
Flutter女子共同開発にて取りまとめ役を任せていただきましたyuiです！
普段は、Web エンジニアとして働いてます。Flutter 歴は半年くらい前からがっつり勉強を始めたところです。今回の共同開発では、起案と仕様や設計を決めたり、タスク管理の部分を主に任せていただきました！
✊🏻 やったこと
初期
- 仕様策定
- Firebase使うかどうかなどの選定まわり
- 運用の決め
- スケジュール管理
Firebaseを使ってみたり、アニメーションを取り入れたりとメンバーが技術的に挑戦できるタスクも用意しちゃお、みたいな考えで仕様を決めたりしました。
開発フェーズ
- 週１でのミーティング + もくもく会
- タスク管理
- レビュー/フォロー等
共同開発経験者のメンバーもいたので、運用面からレビューやフォローまでスムーズに進めることができてとても助かりました🙏🏻
👀 感想
今回の開発の一番の目的は、共同開発を経験してみることや、Flutterを使って何かアプリを完成させることでした。なのでアプリのアイディアは、Flutter大学のコミュニティ内でうければ良いかな〜くらいに思っていたのですが、想像以上の反応やフィードバックなどももらえて、今後のアップデートするにおいてもっといいものを作っていきたいといったモチベーションにもつながりました✨
また、第一弾目ということだったので、ゆるめにやっていければと思って始めたのですが、参加メンバーの意欲、Git/Githubを使った共同開発の順応力、タスクの消化スピード等の勢いがすごかったので、今後もみんなで開発を続けられるともっともっといいものが作れるようになるだろうなーと思いました。
何より共同開発を通して、女子のメンバーと話せる機会にもなって、開発以外のプライベートの話や趣味の話ができるくらい仲良くなれたのは本当に嬉しかったです！
■ Launchページ
💫 自己紹介
ローンチページをやりました。まゆみです！
本業：データセンターのIR担当、ちょっとだけスタートアップのアクセラレーター
副業：大学の事業とかESGコンサルの手伝い
Flutterは初心者。
flutter大学の動画４周目して、同じアプリ作ってやっとわかってきたような・・ぐらい・・
共同開発初めて！
✊🏻 やったこと
- ローンチページの背景色設定
- 画面遷移
- 画像配置
👀 気づいたこと、思ったこと
- Githubの使い方忘れたくない→本業でのエンジニアとのコミュニケーションができそう
- Widgetを理解し始めたらコード読むのが楽になった（気がする）
- やっぱり誰かと一緒させてもらうのが楽しい！（1人きびい）
実装したコードはこちら💁♀️
■ Selectページ&Resultページ
💫 自己紹介
ランダムページを実装したAnnaです！
このパートを書いてる人はこんな人↓
- Flutterは超初心者、Widgetとは？がなんとか分かるレベル
- 共同開発初めて
- 部署異動で夏からフロントエンドエンジニアの端くれに
✊🏻 やったこと
Flutter女子自身が欲しいクリスマスプレゼントをランダムで表示させるページのUIを担当しました。
- SelectPageのUI作成
- ResultPageのUI作成
✨ こだわったこと
最初は独力で調べてやってみる、を意識してました(とはいえ、何がわからないかわからないYOなレベルなことも多かった)
👀 気づいたこと、思ったこと
色々やらかし、そして気づく
初心者が故のやらかしも色々あるわけで、
- オブジェクト間の余白をどう実装すれば良いかわからず、大量のContainerを作ってしまった
- pubspec.yaml内のインデントをミスったため、画像が表示されずに一日中進捗がない
などなど色々課題もありました。
ただ、レビューやアドバイスを受けていくうちに、「ここならWidgetをまとめられそう」と規模は小さくとも最終的に自分でリファクタリングできる段階まで進めたのは、チーム開発ならではの収穫です！
実装したコードはこちら💁♀️
■ Animationページ&商品リンク機能
こちらはどんぐりさんが担当してくれました！そして、既にアニメーションについて記事を書いてくれているのでぜひ参考にしてみてください〜！
✊🏻 気づいたこと、思ったこと
公式の共同開発みたいな投票ないしFUTも付かないけど、発表と同時に期待以上に盛り上がって、オフ会でも話題にしてもらえて、「勝った」感しかない。楽しかったね〜、またやりましょう。
実装したコードはこちら💁♀️
■ Firebaseロジック
💫 自己紹介
裏のロジック周りを実装したminnです！
早くつよつよになりたい、未熟者Flutterエンジニア。
✊🏻 やったこと
- Firestoreで管理しているプレゼントデータを取得して表示させるロジック
- レビュー
- yuiさんのアシスタント
👀 気づいたこと、思ったこと
唯一Flutterエンジニアをしているのが私だったので意気込んでたんですが、みなさん優秀すぎてむしろ私の方が助けられたような共同開発でした✌🏻レビューしたり、他者に説明するのって本当に難しいことだなと思いましたが、しごできな女子部のおかげでそれどころじゃない感じで、結局楽しんでいました！（LGTM画像探すの楽しい😆）女子部最高です🫰🏻
👇 Githubはこちらです。
今後について
ひと段落しましたが、女子部はまだまだ終わらず、現在は絞り込み機能の開発を進めています！ゆくゆくはクリスマスシーズンに限らず、ユーザさんにおすすめプレゼントを登録してもらう機能や女性だけでなく男性目線のおすすめプレゼントも追加していきたいなと考えております！修正が必要そうな箇所もあるので随時アップデートしてしていく予定なので引き続きよろしくお願いいたします！🤩
最後に
まずFlutter大学内で公開した時はみんなが使ってくれて盛り上げてくれて感極まりました！やっぱりこういうのがアプリ開発の醍醐味かなと感じたので、この楽しさをいろんな方に経験してほしいなと思いました。Flutter大学は最高のコミュニティだと思っています🫰🏻
これからも女子部の活動は続いていくので、もしFlutterや開発に興味のある女性の方はとーてもお待ちしております！🎀
ながながと最後までお読みいただきありがとうございました！
良いクリスマスを！メリークリスマス🎅🎄💖✨
Discussion