<h1 id="%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B">
<a class="header-anchor-link" href="#%E8%87%AA%E5%B7%B1%E7%B4%B9%E4%BB%8B" aria-hidden="true"></a> 自己紹介</h1>
<p>4年間スマホショップに関わる仕事をしており、学生時代も含めプログラミングとは無縁な人間でした。<br>
自分も誰かを幸せにしたりワクワクさせたり、楽しませたりするようなサービスを生み出したい。そんな思いでプログラミングに興味を持ちました。<br>
独学でプログラミングを学び始めるが全く身にならず。<br>
本気でプログラミングを学びたいと思い仕事を辞め、<a href="https://gsacademy.jp/?utm_source=google&amp;utm_medium=cpc&amp;utm_campaign=GoogleAd_TYO_SRCH_AT-Brand_2021-03-07" target="_blank" rel="nofollow noopener noreferrer">G'sACADEMYTokyo</a>という起業家・エンジニア養成学校に通いました。<br>
その中での経験とモバイルアプリをリリースした話です。</p>
<h2 id="g'sacademytokyo">
<a class="header-anchor-link" href="#g'sacademytokyo" aria-hidden="true"></a> G'sACADEMYTokyo</h2>
<p><a href="https://gsacademy.jp/labcourse" target="_blank" rel="nofollow noopener noreferrer">フルタイム総合LABコース</a>という6ヵ月1000時間のカリキュラムで、プログラミングにフルコミットするコースに入りました。<br>
3日間に1回?オリジナルプロダクトの課題がでる、結構スパルタな感じでした。<br>
この半年間は本当にずっとコードを書いていました。<br>
本当にくだらない物を含め半年間で、20個以上のプロダクトを作りました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/d38034727666-20221110.png" alt loading="lazy" class="md-img"><br>
卒業時に開催される、採用担当の方や投資家の方が集まる<a href="https://gsacademy.jp/gga/" target="_blank" rel="nofollow noopener noreferrer">ピッチイベントGGA</a>にて、今回リリースしたアプリで三位入賞することができた。</p>
<h1 id="%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9" aria-hidden="true"></a> リリース</h1>
<p>この学校に入学した時から、モバイルアプリを作りたい。という思いがあり、入学してから約一ヶ月?たった頃にFlutterを勝手に触り始めた。(Flutterの授業は無い)<br>
<strong>・Flutterを触り始めて約一ヶ月後に「ルーレットアプリ」をPlayStoreにリリース。<br>
・半年間の集大成の卒業制作として、「BMX特化型MapSNSアプリ」をAppStoreにリリース。</strong></p>
<h2 id="%E2%93%B5%E3%83%81%E3%83%BC%E3%83%88%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88(android)">
<a class="header-anchor-link" href="#%E2%93%B5%E3%83%81%E3%83%BC%E3%83%88%E3%83%AB%E3%83%BC%E3%83%AC%E3%83%83%E3%83%88(android)" aria-hidden="true"></a> ⓵チートルーレット(Android)</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__64f9fe6a278af" src="https://embed.zenn.studio/card#zenn-embedded__64f9fe6a278af" data-content="https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dcom.tatsuki.roulette_app" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://play.google.com/store/apps/details?id=com.tatsuki.roulette_app" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://play.google.com/store/apps/details?id=com.tatsuki.roulette_app</a></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/517b71d3e4a7-20221110.png" alt loading="lazy" class="md-img"></p>
<h3 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 作った経緯</h3>
<p>完全にただの悪ふざけ<br>
呑み会とかで、ルーレットの結果をいじって、呑ませたい人に呑ませられたらいいなーと思ったのがきっかけ。笑<br>
JavaScriptの課題で、同じ機能の物を作っていたが、モバイルアプリで作りたかったので作った。<br>
せっかく作ったので、リリースしてみたかったのでリリースした。<br>
Androidは持っていなかったが、Apple Developerに登録するお金が無かったのでAndroidでリリースした。笑</p>
<h3 id="%E5%88%B6%E4%BD%9C%E6%9C%9F%E9%96%93">
<a class="header-anchor-link" href="#%E5%88%B6%E4%BD%9C%E6%9C%9F%E9%96%93" aria-hidden="true"></a> 制作期間</h3>
<p>リリースまでで半月くらい？</p>
<h3 id="%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93" aria-hidden="true"></a> 使用技術</h3>
<p>・Flutter</p>
<h3 id="%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 機能</h3>
<p>一見普通のルーレットアプリだが、隠しボタンを押すと「チート画面」に移動する。<br>
そこに、当選させたい人の名前を入力すると、その人が100%当選する、チート機能付きルーレットアプリ</p>
<h3 id="%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A" aria-hidden="true"></a> こだわり</h3>
<p>・この時<a href="https://www.blender.org/" target="_blank" rel="nofollow noopener noreferrer">blender</a>という3DCGツールにもハマっており、そのblenderでオリジナルキャラクターを作った(名前募集中)<br>
かわいいキャラクターで女子の警戒心を下げようなんて、よこしまな気持ちはありません。。。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/24412c359732-20221110.png" alt loading="lazy" class="md-img"><br>
・ルーレットが回っている時に効果音を入れた。(すぐできると思ったが、ループさせたりとかが意外と難しかった。)<br>
・バレないように、チート設定をしてから一度ルーレットを回すと、設定はリセットされ通常のルーレットに戻る。</p>
<h2 id="%E2%93%B6wavy'smap(ios)">
<a class="header-anchor-link" href="#%E2%93%B6wavy'smap(ios)" aria-hidden="true"></a> ⓶Wavy'sMap(ios)</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a725085fad5cf" src="https://embed.zenn.studio/card#zenn-embedded__a725085fad5cf" data-content="https%3A%2F%2Fapps.apple.com%2Fjp%2Fapp%2Fwavys-map%2Fid6443888444" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://apps.apple.com/jp/app/wavys-map/id6443888444" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://apps.apple.com/jp/app/wavys-map/id6443888444</a></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c18e32c4f45a-20221111.png" alt loading="lazy" class="md-img"></p>
<p>【コンセプト】<br>
ショート動画で世界を広げる、BMX特化型MapSNSアプリ<br>
リリース完了後リンクとスクショを貼る</p>
<h3 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF-1">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF-1" aria-hidden="true"></a> 作った経緯</h3>
<p>BMX🚲というスポーツ(スケボーの自転車版のようなもの)を趣味でやっており、その中で感じたBMXの課題を解決する為に作った。<br>
課題：同じ趣味の仲間ができない。<br>
原因：<br>
⓵人口がめちゃ少ない(日本の人口だと一万人に一人しかいない)<br>
⓶BMXがOKの専門施設(Park)の数が少なくて、出会いの場がない。地元のプレイヤー達の集まる場所が分からない<br>
解決策：プレイヤーの個々の練習場所が分かるアプリがあればいいんじゃね？？</p>
<h3 id="%E5%88%B6%E4%BD%9C%E6%9C%9F%E9%96%93-1">
<a class="header-anchor-link" href="#%E5%88%B6%E4%BD%9C%E6%9C%9F%E9%96%93-1" aria-hidden="true"></a> 制作期間</h3>
<p>制作：一ヶ月弱<br>
リリース:半月くらい？(審査に落ちまくった)</p>
<h3 id="%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93-1">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93-1" aria-hidden="true"></a> 使用技術</h3>
<ul>
<li>Flutter</li>
<li><a href="https://www.mapbox.jp/" target="_blank" rel="nofollow noopener noreferrer">MapBox</a></li>
<li><a href="https://cloud.google.com/functions?hl=ja" target="_blank" rel="nofollow noopener noreferrer">CloudFunctions(Node.js)</a></li>
<li><a href="https://cloud.google.com/video-intelligence?hl=ja" target="_blank" rel="nofollow noopener noreferrer">VideoIntelligenceAPI</a></li>
<li>Firebase<br>
<img src="https://storage.googleapis.com/zenn-user-upload/6803cc5d41fd-20221111.png" alt loading="lazy" class="md-img">
</li>
</ul>
<h3 id="%E6%A9%9F%E8%83%BD-1">
<a class="header-anchor-link" href="#%E6%A9%9F%E8%83%BD-1" aria-hidden="true"></a> 機能</h3>
<p><strong>①動画</strong></p>
<ul>
<li>投稿された練習動画を、TikTokのような感じで縦スクロールで見ることができる。</li>
<li>いいね、コメント、位置情報の確認、フォロー(検索可能)ができる</li>
<li>自動トリミング機能で、手間なく動画投稿が可能</li>
<li>動画編集機能<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ffa9df7705d2-20221110.gif" alt loading="lazy" class="md-img">
</li>
</ul>
<p>【参考】<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/4E4V9F3cbp4?start=3" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=4E4V9F3cbp4&amp;t=3s" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=4E4V9F3cbp4&amp;t=3s</a></p>
<p><strong>②Map</strong></p>
<ul>
<li>投稿された動画は、投稿した位置情報と紐づいており、Map上でプレイヤーの練習場所が一目で分かる。</li>
<li>画面上部のカルーセルが連動している</li>
<li>カルーセルをタップすると動画の再生も可能<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2b8a155c5218-20221110.gif" alt loading="lazy" class="md-img">
</li>
</ul>
<p>【参考】<br style="display:none">
<span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/oFDx6tLipmw?start=314" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=oFDx6tLipmw&amp;t=314s" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=oFDx6tLipmw&amp;t=314s</a></p>
<p><strong>③掲示板</strong></p>
<ul>
<li>掲示板を立てて、直接仲間を募集できる</li>
<li>スタンプ一つで簡単に参加できる</li>
<li>検索機能<br>
(容量オーバーの為写真)<br>
<img src="https://storage.googleapis.com/zenn-user-upload/16d2078e2c93-20221111.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p><strong>④プロフィール</strong></p>
<ul>
<li>投稿した動画は、練習履歴として残っていく</li>
<li>タップすると動画を再生できる</li>
<li>投稿の総いいね数がカウントされる</li>
<li>動画投稿時にサムネイル画像を生成しており、それを表示させている<br>
<img src="https://storage.googleapis.com/zenn-user-upload/71a25a46bbaf-20221111.gif" alt loading="lazy" class="md-img">
</li>
</ul>
<p><strong>⑤認証</strong></p>
<ul>
<li>メールアドレスとパスワード認証</li>
<li>ログアウトするまで、自動で認証通過する</li>
</ul>
<h3 id="%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A-1">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A-1" aria-hidden="true"></a> こだわり</h3>
<ul>
<li>公園やPark、インスタでユーザーヒアリングをめっちゃして、機能を考えた。</li>
<li>目玉機能として、動画の自動トリミング機能を実装(詳細は別記事)<br>
<a href="https://zenn.dev/tatukane/articles/51a9e4cfb3446b" target="_blank">https://zenn.dev/tatukane/articles/51a9e4cfb3446b</a>
</li>
<li>「イケてないと使ってもらえない」というコンセプトのもとデザインにこだわった。</li>
<li>アートのようにPOPで使いやすいMapを作るためにGoogleマップではなくMapBoxを利用した</li>
<li>Map上のPINはランダムで入れ替わるようにしている</li>
<li>動画を投稿する際に圧縮の処理を入れた</li>
<li>飽きさせないようローディングに、POPなアニメーションを活用した(<a href="https://airbnb.design/lottie/" target="_blank" rel="nofollow noopener noreferrer">Lottie</a>を利用)</li>
<li>現在位置と各PINとの移動距離を計算し、Map画面のカルーセルを並び替えた。(リリースの関係でコメントアウト中)</li>
</ul>
<h3 id="%E5%A4%A7%E5%A4%89%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8">
<a class="header-anchor-link" href="#%E5%A4%A7%E5%A4%89%E3%81%A0%E3%81%A3%E3%81%9F%E3%81%93%E3%81%A8" aria-hidden="true"></a> 大変だったこと</h3>
<p><strong>・審査</strong><br>
AppStoreへのリリースがめちゃ苦戦した。10回以上リジェクトされた。w<br>
投稿機能のあるSNSだった為、「ユーザーブロック機能」「不適切な動画の報告機能」「アカウント削除機能」「利用規約同意」等等が必要なのを初回りジェクト時に知り、急いで実装した。<br>
ユーザーの位置情報を取得しているのだが、アップルの審査が海外で行われ、日本国内では全く問題なく動いていたのに、海外の位置情報ではエラーになった。<br>
色々試した後に、ダメ元で位置情報取得に使っていたパッケージを「<a href="https://pub.dev/packages/location" target="_blank" rel="nofollow noopener noreferrer">location</a>」から「<a href="https://pub.dev/packages/geolocator" target="_blank" rel="nofollow noopener noreferrer">geolocator</a>」に変更したらバグが解消され審査に通った。。。。<br>
リジェクトされまくると、アップル様が電話で助けてくれる事が判明(あんまり解決には繋がらなかった..)<br>
<strong>・結合</strong><br>
動画自動トリミング機能、Map画面、その他の三つに分けてい開発しており、その三つを結合させるのが結構大変だった。<br>
<strong>・自動トリミング機能の開発</strong><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7deca17c606d1" src="https://embed.zenn.studio/card#zenn-embedded__7deca17c606d1" data-content="https%3A%2F%2Fzenn.dev%2Ftatukane%2Farticles%2F51a9e4cfb3446b" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/tatukane/articles/51a9e4cfb3446b" style="display:none" target="_blank">https://zenn.dev/tatukane/articles/51a9e4cfb3446b</a></p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A" aria-hidden="true"></a> おわり</h1>
<p>リリースしたアプリを、しっかり使ってもらえるように、宣伝や継続的なアップデートしていきたいと思います！<br>
日常的に使ってくれる人ができたら最高だなーと思っています<br>
Twitterでも情報発信しておりますので、ぜひフォローお願い致します!<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__93aade92c6359" src="https://embed.zenn.studio/card#zenn-embedded__93aade92c6359" data-content="https%3A%2F%2Fmobile.twitter.com%2Ftatsuki_kt" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://mobile.twitter.com/tatsuki_kt" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://mobile.twitter.com/tatsuki_kt</a></p>


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

Discussion