🔥

【Flutter】プログラミング歴半年で、モバイルアプリを2個リリースした話

2022/11/11に公開

自己紹介

4年間スマホショップに関わる仕事をしており、学生時代も含めプログラミングとは無縁な人間でした。
自分も誰かを幸せにしたりワクワクさせたり、楽しませたりするようなサービスを生み出したい。そんな思いでプログラミングに興味を持ちました。
独学でプログラミングを学び始めるが全く身にならず。
本気でプログラミングを学びたいと思い仕事を辞め、G'sACADEMYTokyoという起業家・エンジニア養成学校に通いました。
その中での経験とモバイルアプリをリリースした話です。

G'sACADEMYTokyo

フルタイム総合LABコースという6ヵ月1000時間のカリキュラムで、プログラミングにフルコミットするコースに入りました。
3日間に1回?オリジナルプロダクトの課題がでる、結構スパルタな感じでした。
この半年間は本当にずっとコードを書いていました。
本当にくだらない物を含め半年間で、20個以上のプロダクトを作りました。

卒業時に開催される、採用担当の方や投資家の方が集まるピッチイベントGGAにて、今回リリースしたアプリで三位入賞することができた。

リリース

この学校に入学した時から、モバイルアプリを作りたい。という思いがあり、入学してから約一ヶ月?たった頃にFlutterを勝手に触り始めた。(Flutterの授業は無い)
・Flutterを触り始めて約一ヶ月後に「ルーレットアプリ」をPlayStoreにリリース。
・半年間の集大成の卒業制作として、「BMX特化型MapSNSアプリ」をAppStoreにリリース。

⓵チートルーレット(Android)

https://play.google.com/store/apps/details?id=com.tatsuki.roulette_app

作った経緯

完全にただの悪ふざけ
呑み会とかで、ルーレットの結果をいじって、呑ませたい人に呑ませられたらいいなーと思ったのがきっかけ。笑
JavaScriptの課題で、同じ機能の物を作っていたが、モバイルアプリで作りたかったので作った。
せっかく作ったので、リリースしてみたかったのでリリースした。
Androidは持っていなかったが、Apple Developerに登録するお金が無かったのでAndroidでリリースした。笑

制作期間

リリースまでで半月くらい?

使用技術

・Flutter

機能

一見普通のルーレットアプリだが、隠しボタンを押すと「チート画面」に移動する。
そこに、当選させたい人の名前を入力すると、その人が100%当選する、チート機能付きルーレットアプリ

こだわり

・この時blenderという3DCGツールにもハマっており、そのblenderでオリジナルキャラクターを作った(名前募集中)
かわいいキャラクターで女子の警戒心を下げようなんて、よこしまな気持ちはありません。。。

・ルーレットが回っている時に効果音を入れた。(すぐできると思ったが、ループさせたりとかが意外と難しかった。)
・バレないように、チート設定をしてから一度ルーレットを回すと、設定はリセットされ通常のルーレットに戻る。

⓶Wavy'sMap(ios)

https://apps.apple.com/jp/app/wavys-map/id6443888444

【コンセプト】
ショート動画で世界を広げる、BMX特化型MapSNSアプリ
リリース完了後リンクとスクショを貼る

作った経緯

BMX🚲というスポーツ(スケボーの自転車版のようなもの)を趣味でやっており、その中で感じたBMXの課題を解決する為に作った。
課題:同じ趣味の仲間ができない。
原因:
⓵人口がめちゃ少ない(日本の人口だと一万人に一人しかいない)
⓶BMXがOKの専門施設(Park)の数が少なくて、出会いの場がない。地元のプレイヤー達の集まる場所が分からない
解決策:プレイヤーの個々の練習場所が分かるアプリがあればいいんじゃね??

制作期間

制作:一ヶ月弱
リリース:半月くらい?(審査に落ちまくった)

使用技術

機能

①動画

  • 投稿された練習動画を、TikTokのような感じで縦スクロールで見ることができる。
  • いいね、コメント、位置情報の確認、フォロー(検索可能)ができる
  • 自動トリミング機能で、手間なく動画投稿が可能
  • 動画編集機能

【参考】
https://www.youtube.com/watch?v=4E4V9F3cbp4&t=3s

②Map

  • 投稿された動画は、投稿した位置情報と紐づいており、Map上でプレイヤーの練習場所が一目で分かる。
  • 画面上部のカルーセルが連動している
  • カルーセルをタップすると動画の再生も可能

【参考】
https://www.youtube.com/watch?v=oFDx6tLipmw&t=314s

③掲示板

  • 掲示板を立てて、直接仲間を募集できる
  • スタンプ一つで簡単に参加できる
  • 検索機能
    (容量オーバーの為写真)

④プロフィール

  • 投稿した動画は、練習履歴として残っていく
  • タップすると動画を再生できる
  • 投稿の総いいね数がカウントされる
  • 動画投稿時にサムネイル画像を生成しており、それを表示させている

⑤認証

  • メールアドレスとパスワード認証
  • ログアウトするまで、自動で認証通過する

こだわり

  • 公園やPark、インスタでユーザーヒアリングをめっちゃして、機能を考えた。
  • 目玉機能として、動画の自動トリミング機能を実装(詳細は別記事)
    https://zenn.dev/tatukane/articles/51a9e4cfb3446b
  • 「イケてないと使ってもらえない」というコンセプトのもとデザインにこだわった。
  • アートのようにPOPで使いやすいMapを作るためにGoogleマップではなくMapBoxを利用した
  • Map上のPINはランダムで入れ替わるようにしている
  • 動画を投稿する際に圧縮の処理を入れた
  • 飽きさせないようローディングに、POPなアニメーションを活用した(Lottieを利用)
  • 現在位置と各PINとの移動距離を計算し、Map画面のカルーセルを並び替えた。(リリースの関係でコメントアウト中)

大変だったこと

・審査
AppStoreへのリリースがめちゃ苦戦した。10回以上リジェクトされた。w
投稿機能のあるSNSだった為、「ユーザーブロック機能」「不適切な動画の報告機能」「アカウント削除機能」「利用規約同意」等等が必要なのを初回りジェクト時に知り、急いで実装した。
ユーザーの位置情報を取得しているのだが、アップルの審査が海外で行われ、日本国内では全く問題なく動いていたのに、海外の位置情報ではエラーになった。
色々試した後に、ダメ元で位置情報取得に使っていたパッケージを「location」から「geolocator」に変更したらバグが解消され審査に通った。。。。
リジェクトされまくると、アップル様が電話で助けてくれる事が判明(あんまり解決には繋がらなかった..)
・結合
動画自動トリミング機能、Map画面、その他の三つに分けてい開発しており、その三つを結合させるのが結構大変だった。
・自動トリミング機能の開発
https://zenn.dev/tatukane/articles/51a9e4cfb3446b

おわり

リリースしたアプリを、しっかり使ってもらえるように、宣伝や継続的なアップデートしていきたいと思います!
日常的に使ってくれる人ができたら最高だなーと思っています
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
https://mobile.twitter.com/tatsuki_kt

Discussion