Flutter初心者 & モバイルアプリ開発初心者の心得

**皆さんアプリ開発楽しんでますかー？？**

どうも初めまして、[oke](https://twitter.com/oke331)と申します。

この度、Flutterで初めての個人アプリリリース、
そしてSwiftで２度目の個人アプリリリースを二つ合わせて1ヶ月程度で行いました。

私は最近「個人開発」というものにハマっております！！とても楽しい！

しかしながら、これまでアプリのリリースは一度も行ったことはなかったため、
いざ自分のアプリを世に出そうとした時に、

**「早くこの情報知りたかった…」**

という泣きたくなる出来事が山ほどありました。


特に私はモバイルアプリ開発をFlutterから入ったため、
SwiftやKotlinというネイティブ側の知識に乏しく、
Flutterの記事で時々見かける、

**「ここはいつものネイティブの開発のように…」**

の「いつも」がわからない状態でした。


しかしながら私のように、
Flutter人気も上昇してきて、ネイティブを触らずにFlutterからアプリ開発に入る方もいらっしゃるかと思います。

この記事では、
リリース手順やFlutterの基礎をまとめているわけではなく（他に良い記事はごまんとあるので）、
モバイル開発 & Flutter初心者の私がリリースに至るまでの失敗を元に、
皆さんが私の二の舞とならぬよう、
アプリ開発を始める前に知っておきたかった情報を書いております！！
（長文ですので、ゆったりと腰掛けてご覧ください！）

第1章　アプリ開発・リリースが初めての方へ
第2章　Flutterでの開発をこれから始める方へ
という構成で進めて参ります！！

# 対象読者
- Flutterからモバイルアプリ開発に入った方
- モバイルアプリ開発が初めての方
- これからスマホアプリを開発していきたい方

# 第１章 アプリ開発・リリースが初めての方へ

## アプリ開発を始める前に…
皆さん、App StoreやGoogle Playの「ガイドライン」って読みましたか？？
読んでいないなら、開発を始める前に読んでください！！！

というのも…

私が作成したアプリ「Lyrics（リリックス）」は、
**"音量ボタンの制御を奪って、歌詞のスクロールに使用する"**
という発想から成るものでした。

Bluetoothシャッターを使えば音量ボタンが作用して「足でもスクロールできる」ことを思いつき、

Bluetoothとか良く知らないけど、何となくできそうだし、、

**「とりあえず作ってみるか！」**

と意気込み、Flutterで実装をしていきました！！

そして1週間半後、なんとか形になりました！！

そしてリリース前に、
**「リリースするし、一応ストアのガイドラインでも読んでおくかなー」**

と、「近所のスーパーに行く」くらい気楽な気持ちで読み始めました。


そして、、、

ガイドラインを見た私は唖然としました。

**音量を上げる/下げる、サウンドオン/オフといった標準スイッチの機能、および他のネイティブユーザーインターフェイスの要素やその挙動を変更または無効にするAppは却下されます。**

**「　おいおい……　まってくれよ…　」**

音量ボタン操作ありきの開発だったので、頭が真っ白になりました。
音量ボタンが使えないと、初心者本によく載っている「ただのメモアプリ」と化します。

今までのアプリ開発をしてきた２週間が走馬灯のように駆け巡りました（？）。


**「でもせっかく作ったアプリだし！」**

と思って、

ダメ元で審査に提出したら…

**「通ったーー！！！！」**

きちんとApp Reviewのメモにも

「音量アップボタンを使用してスクロールするようにしています。
そのため、音量アップボタンが使用できませんが、注意事項としてその旨を記載しています。」

と記載していた上で通ったので、大丈夫だったのだと思います。
（よくよく考えてみたら、カメラアプリとかも音量ボタンで撮影できますもんね…。）

結果としてリリースはできたのでよかったのですが、

ガイドラインを見た瞬間は、まじで超焦りました(汗)

１週間ちょいだったからまだしも、長期に渡って開発をしていたら、、、
と考えたらゾッとします（怖）。

今回に関しては大丈夫でしたが、
アプリを制作する前に、きちんと目を通して確認しておくべきだと感じました…。




ここでの心得、、

**" 時間を無駄にしたくない若者よ、まずはガイドラインじゃ"**


[Apple  App Store Review ガイドライン](https://developer.apple.com/jp/app-store/review/guidelines/)
[Google Play  デベロッパーポリシーセンター](https://play.google.com/intl/ja/about/developer-content-policy/)

## AndroidとiOSをリリースするときはアイコンにも気をつけて！！
FlutterだとAndroidとiOSを両方一気に作成でき、超便利。

で、デザインに疎い私は、
意気揚々と友達にアイコンの案を伝えて、
デザインしてもらいました。

それがこちら。
<img width="400" alt="lyrics_logo.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638388/34a71ddb-3638-120b-36f5-66c141f29850.png">

どうですか？まあまあ良くないですか？

それで、これをflutterの便利パッケージを使用して反映！！！
[https://pub.dev/packages/flutter_launcher_icons](https://pub.dev/packages/flutter_launcher_icons)

iPhoneで確認したら…

良い感じ！！！

この調子で、またまた意気揚々とAndroidのアイコンを確認したら…

**「Google Pixelのアイコンは丸型…だと…」**

アイコンは四角く作るものと思っていた私はこれまた唖然。

**「めちゃくちゃにちいせぇ…。」**

<img width="400" alt="IMG_20200510_161205.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638388/14a215c1-89fa-f94d-a1fb-a6e348ef1c8c.jpeg">
(驚きすぎてスマホですぐ写真を撮りました)

そこでアイコンについて調べていると（はじめに調べとけというご意見、ごもっともです）
「アダプティブアイコン」なるものが！！！

[3分で分かる？Android OのAdaptive Iconに対応しよう](https://qiita.com/takahirom/items/696fb5ecaa230fa8f75)

これでいける！と思い、早速試してみると、

**「めちゃくちゃにでけぇ…」**

![IMG_20200510_153530.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/638388/bfb084ae-073f-2002-6449-b4d193acea46.jpeg)
(驚きすぎてスマホですぐ写真を撮りました part2)

まあ、元が四角の前提で作っている時点でだめですよね…。

友達に深く謝り、再度アイコンを作り直してもらい、
なんとか上手くいきました。
（友よ、すまぬ！！）

しかし、これまた初めに確認しておけばよかった…
と大変後悔しました。。

ここでの心得、、

**"アイコンはアプリの顔。 イケメンかどうかよく確認するのじゃ！"**


## ストアの申請って結構めんどくさい
アプリが無事完成しました！
ってなったら、いよいよApp StoreやGoogle Playへの申請ですよね？？

で、申請しようと思った時にふと、
**「Webサイトでよく見るプライバシーポリシーみたいなんっていらんのかな？」**
と思いました。

でも、私のアプリはローカルで完結する、言ってしまえばただの「メモアプリ」であり、
さすがにいらんだろうなーと思いつつ、Twitterに呟いてみると、
親切なことに、返信がきました！！（kazumatさんありがとうございます！！！）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ローカル完結も利用規約入りますよー！<br>私が初めて作っ時は、必要なスクリーンショットの多さと、利用規約ページ作成にびっくりしました。<br>私はgithub pagesを使って利用規約書いてます〜</p>&mdash; kazumat@Flutter (@kzmat2) <a href="https://twitter.com/kzmat2/status/1258863632407883776?ref_src=twsrc%5Etfw">May 8, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

**「なぬーーーーー！？」**

ローカルしか使ってないのにいるのか…。

調べてみると、iOSはプライバシーポリシー必須とのこと…。
以下、Appleの公式文章抜粋です。
>プライバシーポリシー：すべてのAppには、App Store Connectのメタデータフィールドと各App内にアクセスしやす>い形で、プライバシーポリシーへのリンクを必ず含める必要があります。プライバシーポリシーはわかりやすく明確なもの>である必要があります。
>[https://developer.apple.com/jp/app-store/review/guidelines/](https://developer.apple.com/jp/app-store/review/guidelines/)

そこで、GitHub Pagesを使用して、プライバシーポリシーページを作成しました。
テンプレートも多くあり、ものの３０分で完成しました！！
[https://pages.github.com/](https://pages.github.com/)


肝心の内容ですが、、

広告（Admob）を使用していたため、その旨を記載したら、
審査に通りました！！

下記の記事の文言そのまま記載しました。
[AdMob, Firebase付きAndroidアプリのプライバシーポリシー、こうしてみました(要経過観察)](https://qiita.com/agajo/items/e886afb7f5408141d1fc)






プライバシーポリシーを書いて一件落着と思ったのも束の間、

**「スクリーンショットもこんなにたくさん撮らないといけないの…」**

という感じでした。。

AndroidとiOS用にそれぞれ作成しないといけないのですが、
作らないといけないサイズの種類が多いこと…。

Androidの方はある程度自由がききます。
サイズとしては、
1辺の最小の長さ: 320px
1辺の最大の長さ: 3840px
であれば良いようです。(2020年５月現在)

しかし、フィーチャーグラフィックなるものを作成する必要があるようで、Android用に作成しました…。
こちらは
横 1024 x 縦 500
であれば良いようです。(2020年５月現在)


iOSの用意するサイズは下記のサイトが参考になりました。
[https://r-abo.com/2019/11/05/aso018/](https://r-abo.com/2019/11/05/aso018/)

また、サイズ変更は下のサイトが便利でした！
https://bulkresizephotos.com/ja?preserve_aspect_ratio=true&resize_type=exact&resize_value=1242&secondary_resize_value=2688


そーやってやっとの思いで申請を行ったのですが、
iOSの方だけリジェクトされました（泣）

内容を読んでみると、タイトルがだめというご意見。

当時私は
「Lyrics -歌詞メモを見やすく便利に」
というタイトルにしていたのですが、
調べてみると、どうやらサブタイトルのようなものをタイトルにするのはダメな模様…。
https://cocoamix.jp/archives/7706

ということで、
「Lyrics（リリックス）」
に修正し、ハイフン以下をサブタイトルに移動すると…、

審査が通りました！！


晴れてストアに私のアプリが並ぶことができました！！！

個人開発だとなかなかに作業量が多く、
アプリは完成しているのにリリースできない、
もどかしい時間が長く続きます。。

ここでの心得、、

**"アプリリリースまでが開発。根気よく頑張るのじゃ！"**

# 第２章　Flutterでの開発をこれから始める人へ
## Flutterだけでは実現できないこともある！
私はFlutterを万能なツールだと思ってました。

**「iOSもAndroidも両方一気に作れるじゃん？」**
**「マジで超最高じゃん？」**

そんなイキってた時期もありました。

しかし、音量ボタンでスライドする機能を作成する過程で、

**「音量ボタンでスライドはできるけど、音量ゲージが表示されるじゃん…」**
という状況に陥りました。

でもFlutterは最強だと思っていた私は、

**「誰かパッケージ出してるっしょ！！」**

と、そんなミルクティーよりも甘い気持ちでいました。

しかし、、

**探しても探しても見つからない！！！**

めちゃくちゃ時間を費やしました。
しかし、見つかりませんでした。
悲しかった。全俺が泣いた。

でも1つの突破口は知っていました。
検索していたらたくさん出てきました。

**「ネイティブ言語で実装」**

目を背けていました。

Flutterは一気にiOSとAndroidのアプリできて最高だぜって友達に自慢してた俺。
SwiftとかKotlin？ 時代はFlutterだぜとか意味わからないことを思っていた俺。

全て桜のようにはかなく散っていきました。

そして、藁にもすがる思いでSwiftとKotlinを勉強し、実装した結果…

**「できたーーーー！！」　（よかったーー！）**

音量ゲージを表示せずに、画面をスライドすることができるようになりました！



Flutterだけで全て完結できると思っているFlutter初心者諸君への心得、、

**"Flutterで完結できることもある。でも、できないこともある。"**

因みに、今回はネイティブ側からFlutterへの通知のみ行ったので、
EventChannelというものを使用して、実装しました。
[Flutter EventChannel APIの使い方](https://qiita.com/kurun_pan/items/6d63ebf1e894d3620b20)

## パッケージってすっごく便利！！
Flutter初心者の方、下記のサイトは見ていますか？？
https://pub.dev/

もうね、先人たちがものすごくいいパッケージをたくさん作ってくれてるんです。

アニメーションとかも簡単に実装出来たり、
チュートリアル画面も簡単に実装出来ちゃったり、
アラート画面をいいー感じにしてくれたりするんです！！

下記の記事を見ると、
**「こんなことが簡単にできちゃうのー！？」**
ってなります。
[【Flutter】アプリ開発_初心者のアプリをプロっぽくする最強のpackageを紹介](https://qiita.com/kazumaz/items/876e162cf429014661d8)
[アプリをおしゃれにデコレーションする Flutter パッケージ](https://qiita.com/kurararara/items/46e1e092bd6029593634)

「なんかいいー感じにできないかなー」
って思ったときは、パッケージを探してみてください！！楽しいですよ！！

因みに、「Lyrics(リリックス)」では下記のパッケージを使用しているページがあります。
背景が炭酸水みたいになって面白いです。良かったら探してみてください！
超絶簡単に実装できました。
https://pub.dev/packages/animated_background

ここでの心得、、

**"便利かついい感じにしてくれる最強パッケージを見逃すでない！！"**

## SNSを大いに活用しよう！！
わざわざ書くほどのことでは無いかもしれませんが、私自身が助けられたので記載します。

Flutterの記事はまだまだ多いというわけではなく、
不足している情報や、理解できない情報もあると思います。

そんなときに役に立つのが、
**「Twitter!!!!」**

Flutterについて詳しい方々が、
最新の情報や、
便利と思った情報を投稿してくださります。
その情報を参考に、自分の実装を考えることも多かったです。

Flutterで検索して、日本人で記事を書いている方はだいたいTwitterをやっています（偏見です）。
その方々をフォローするとともに、自分自身も参考になった情報等を発信していきましょう！！

そうすることで、少しずつフォロワーが増え、
先ほど書いたプライバシーポリシーの件のように、
自分の疑問に答えてくださる方もいらっしゃいます。

是非活用していきましょう！！！

ここでの心得、、

**"便利なツールはどんどん使っていくのじゃ！！"**


# 最後に
ここまで読んでいただき、ありがとうございました。

アプリ開発は楽しく、やりがいをもってできる最高の娯楽だと思ってます。（私だけでしょうか笑）

そんな娯楽ライフをさらに有意義なものにするため、
少しでも皆さんのお役に立てればと思っています。

これからも何か得た知見等あれば発信していくので、よろしくお願いします！！
[@oke331](https://twitter.com/oke331)

（因みに今回作成したアプリはCMも作成しました。良かったらご覧ください。）
↓Swiftで開発
[MOJI PIC（モジピク）  CM](https://youtu.be/WPZ_tNPVh1c)
[App Store](https://apps.apple.com/us/app/moji-pic-%E3%83%A2%E3%82%B8%E3%83%94%E3%82%AF/id1513584019)

↓Flutterで開発
[Lyrics（リリックス） CM  〜自称シンガー編〜](https://youtu.be/8UGNqt6-W4s)
[Google Play](
https://play.google.com/store/apps/details?id=com.team.provider.application.lyrics_for_singers)
[App Store](https://apps.apple.com/us/app/lyrics-%E3%83%AA%E3%83%AA%E3%83%83%E3%82%AF%E3%82%B9/id1512575926)