【Flutter】プログラミング歴半年で、モバイルアプリを2個リリースした話
自己紹介
4年間スマホショップに関わる仕事をしており、学生時代も含めプログラミングとは無縁な人間でした。
自分も誰かを幸せにしたりワクワクさせたり、楽しませたりするようなサービスを生み出したい。そんな思いでプログラミングに興味を持ちました。
独学でプログラミングを学び始めるが全く身にならず。
本気でプログラミングを学びたいと思い仕事を辞め、G'sACADEMYTokyoという起業家・エンジニア養成学校に通いました。
その中での経験とモバイルアプリをリリースした話です。
G'sACADEMYTokyo
フルタイム総合LABコースという6ヵ月1000時間のカリキュラムで、プログラミングにフルコミットするコースに入りました。
3日間に1回?オリジナルプロダクトの課題がでる、結構スパルタな感じでした。
この半年間は本当にずっとコードを書いていました。
本当にくだらない物を含め半年間で、20個以上のプロダクトを作りました。
卒業時に開催される、採用担当の方や投資家の方が集まるピッチイベントGGAにて、今回リリースしたアプリで三位入賞することができた。
リリース
この学校に入学した時から、モバイルアプリを作りたい。という思いがあり、入学してから約一ヶ月?たった頃にFlutterを勝手に触り始めた。(Flutterの授業は無い)
・Flutterを触り始めて約一ヶ月後に「ルーレットアプリ」をPlayStoreにリリース。
・半年間の集大成の卒業制作として、「BMX特化型MapSNSアプリ」をAppStoreにリリース。
⓵チートルーレット(Android)
作った経緯
完全にただの悪ふざけ
呑み会とかで、ルーレットの結果をいじって、呑ませたい人に呑ませられたらいいなーと思ったのがきっかけ。笑
JavaScriptの課題で、同じ機能の物を作っていたが、モバイルアプリで作りたかったので作った。
せっかく作ったので、リリースしてみたかったのでリリースした。
Androidは持っていなかったが、Apple Developerに登録するお金が無かったのでAndroidでリリースした。笑
制作期間
リリースまでで半月くらい？
使用技術
・Flutter
機能
一見普通のルーレットアプリだが、隠しボタンを押すと「チート画面」に移動する。
そこに、当選させたい人の名前を入力すると、その人が100%当選する、チート機能付きルーレットアプリ
こだわり
・この時blenderという3DCGツールにもハマっており、そのblenderでオリジナルキャラクターを作った(名前募集中)
かわいいキャラクターで女子の警戒心を下げようなんて、よこしまな気持ちはありません。。。
・ルーレットが回っている時に効果音を入れた。(すぐできると思ったが、ループさせたりとかが意外と難しかった。)
・バレないように、チート設定をしてから一度ルーレットを回すと、設定はリセットされ通常のルーレットに戻る。
⓶Wavy'sMap(ios)
【コンセプト】
ショート動画で世界を広げる、BMX特化型MapSNSアプリ
リリース完了後リンクとスクショを貼る
作った経緯
BMX🚲というスポーツ(スケボーの自転車版のようなもの)を趣味でやっており、その中で感じたBMXの課題を解決する為に作った。
課題：同じ趣味の仲間ができない。
原因：
⓵人口がめちゃ少ない(日本の人口だと一万人に一人しかいない)
⓶BMXがOKの専門施設(Park)の数が少なくて、出会いの場がない。地元のプレイヤー達の集まる場所が分からない
解決策：プレイヤーの個々の練習場所が分かるアプリがあればいいんじゃね？？
制作期間
制作：一ヶ月弱
リリース:半月くらい？(審査に落ちまくった)
使用技術
- Flutter
- MapBox
- CloudFunctions(Node.js)
- VideoIntelligenceAPI
- Firebase
機能
①動画
- 投稿された練習動画を、TikTokのような感じで縦スクロールで見ることができる。
- いいね、コメント、位置情報の確認、フォロー(検索可能)ができる
- 自動トリミング機能で、手間なく動画投稿が可能
- 動画編集機能
【参考】
②Map
- 投稿された動画は、投稿した位置情報と紐づいており、Map上でプレイヤーの練習場所が一目で分かる。
- 画面上部のカルーセルが連動している
- カルーセルをタップすると動画の再生も可能
【参考】
③掲示板
- 掲示板を立てて、直接仲間を募集できる
- スタンプ一つで簡単に参加できる
- 検索機能
(容量オーバーの為写真)
④プロフィール
- 投稿した動画は、練習履歴として残っていく
- タップすると動画を再生できる
- 投稿の総いいね数がカウントされる
- 動画投稿時にサムネイル画像を生成しており、それを表示させている
⑤認証
- メールアドレスとパスワード認証
- ログアウトするまで、自動で認証通過する
こだわり
- 公園やPark、インスタでユーザーヒアリングをめっちゃして、機能を考えた。
- 目玉機能として、動画の自動トリミング機能を実装(詳細は別記事)
https://zenn.dev/tatukane/articles/51a9e4cfb3446b - 「イケてないと使ってもらえない」というコンセプトのもとデザインにこだわった。
- アートのようにPOPで使いやすいMapを作るためにGoogleマップではなくMapBoxを利用した
- Map上のPINはランダムで入れ替わるようにしている
- 動画を投稿する際に圧縮の処理を入れた
- 飽きさせないようローディングに、POPなアニメーションを活用した(Lottieを利用)
- 現在位置と各PINとの移動距離を計算し、Map画面のカルーセルを並び替えた。(リリースの関係でコメントアウト中)
大変だったこと
・審査
AppStoreへのリリースがめちゃ苦戦した。10回以上リジェクトされた。w
投稿機能のあるSNSだった為、「ユーザーブロック機能」「不適切な動画の報告機能」「アカウント削除機能」「利用規約同意」等等が必要なのを初回りジェクト時に知り、急いで実装した。
ユーザーの位置情報を取得しているのだが、アップルの審査が海外で行われ、日本国内では全く問題なく動いていたのに、海外の位置情報ではエラーになった。
色々試した後に、ダメ元で位置情報取得に使っていたパッケージを「location」から「geolocator」に変更したらバグが解消され審査に通った。。。。
リジェクトされまくると、アップル様が電話で助けてくれる事が判明(あんまり解決には繋がらなかった..)
・結合
動画自動トリミング機能、Map画面、その他の三つに分けてい開発しており、その三つを結合させるのが結構大変だった。
・自動トリミング機能の開発
おわり
リリースしたアプリを、しっかり使ってもらえるように、宣伝や継続的なアップデートしていきたいと思います！
日常的に使ってくれる人ができたら最高だなーと思っています
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!
Discussion