Flutter製個人アプリをリリースした!
今思えば長い道のりだった!
2022年の9月始めにFlutter3で個人アプリをたったの3日で開発してリリースしました!
iOS版
2022年の9月15日に最新申請したAndroid版も審査に通りました!
AppBarのTextが左端によってしまうAndroid特有の問題を解消しました!
Andriod版
アプリをリリースするまでにやったこと
Flutterは1年以上勉強していましたが、最初はレシピアプリを作ろうかなと思ったが、既に世の中に素晴らしいアプリがあったので、やめました😇
で、今度は動物系のアプリを作ろうとしたのですが、アイディアが形にならずに断念しました😭
まずは、手持ちの技術でアプリを作ることにしました!
- 毎日技術を学びながら、Zennの記事を書いてoutputしていましたね。
- デザインツールについて学びながら申請用のスクリーンショットを作りました!
- 用件定義->デザイン->コーディングですが、頭の中に設計図があったので、開発から始めました
- アプリ完成させてAppStoreとGooglePlayに申請しました!
使った技術とサービス
iPhoneの端末のスクリーンショットはこちらを使いましたね!
これすごいですよ!、おすすめです💙
Androidはモックがなかったので、以前のように画像を加工するサービスを使いました。
やり方は、白い背景の上にAndroidのエミュレーターを持ってきて、スクリーンショットを撮って、こちらのサービスを利用して背景を削除して、Android端末を操作している加工された画像を作成しました!
デザインがWebブラウザでできるサービス
美しいスクリーンショットが簡単に作れます。以前はKeyNoteで作りましたが、こっちの方がやりやすかったですね。無料の画像素材も使えますし!
Dartのpackageはこちらを使いました
-
firebase_auth: ^3.4.2
メールアドレスとパスワードログインで使用。退会機能もないとリジェクトされるとのことで、再認証をさせてユーザーを削除する機能をつけて対策をしました! -
cloud_firestore: ^3.3.0
Firebaseにデータを保存するのに使いました。グラフに表示するデータはこちらから読み込んできています! -
flutter_hooks: ^0.18.5+1
initStateと似た機能を使えるuseEffectメソッドを使用するために使用しました。
useTextEditingControllerには、Stateを破棄してくれる機能があるらしい?、知らずに使ってました! -
hooks_riverpod: ^1.0.4
状態管理はこちらのライブラリを使いました。流行りというのありますが、情報が多かったので個人開発で使用しました。 -
fl_chart: ^0.55.1
折れ線グラフを使用するために使いました。何を参考にしたかというと、ブログの記事ですが、公式ドキュメントを日本語翻訳しながら、ダミーのデータを描画できる綺麗な折れ線グラフを作ってから、Firebaseと連携させましたね。 -
app_tracking_transparency: ^2.0.2+4
iOS14以降はATTなるものに対しての対策が必要で、xmlとSwiftのコードを書いて設定しないと審査を通してくれなくなりました😇
以前、Swiftでアプリを2個リリースしたときに躓きましたね!
FlutterだとDartのライブラリと決まったコードを書くだけで簡単に設定できました!
あとは、initStateでアプリが起動したときに、呼び出すだけですね🧑💻
SwiftではATTはこんなふうに対策した!
info.pilist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>SKAdNetworkItems</key>
<array>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cstr6suwn9.skadnetwork</string>
</dict>
</array>
<key>NSUserTrackingUsageDescription</key>
<string>「許可」するとお客様に最適化された広告が表示されます</string>
<key>UIApplicationSceneManifest</key>
<dict>
<key>UIApplicationSupportsMultipleScenes</key>
<false/>
<key>UISceneConfigurations</key>
<dict>
<key>UIWindowSceneSessionRoleApplication</key>
<array>
<dict>
<key>UISceneConfigurationName</key>
<string>Default Configuration</string>
<key>UISceneDelegateClassName</key>
<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
<key>UISceneStoryboardFile</key>
<string>Main</string>
</dict>
</array>
</dict>
</dict>
</dict>
</plist>
//
// AppDelegate.swift
// MyHomeStocker
//
// Created by 橋本純一 on 2022/02/12.
//
import UIKit
import RealmSwift
import AppTrackingTransparency
import AdSupport
import GoogleMobileAds
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// print(Realm.Configuration.defaultConfiguration.fileURL)
do {
let realm = try Realm()
} catch {
print("Error initialising new realm, \(error)")
}
if #available(iOS 14, *) {
ATTrackingManager.requestTrackingAuthorization(completionHandler: { status in
GADMobileAds.sharedInstance().start(completionHandler: nil)
})
} else {
// Fallback on earlier versions
GADMobileAds.sharedInstance().start(completionHandler: nil)
}
return true
}
func applicationWillTerminate(_ application: UIApplication) {
}
}
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'MyHomeStocker' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
pod 'RealmSwift'
pod 'SwipeCellKit'
pod 'Google-Mobile-Ads-SDK'
# Pods for MyHomeStocker
target 'MyHomeStockerTests' do
inherit! :search_paths
# Pods for testing
end
target 'MyHomeStockerUITests' do
# Pods for testing
end
end
6日ぐらいで目的を達成できた!
開発と申請に3日使いついに、AppStoreで審査が通ってアプリをリリースできました!
自分の作ったアプリがStoreに並んで、自分のスマートフォンにインストールできたときの喜びは人生で最高の瞬間でしたね!
とても嬉しかったです。
また何か、自分が作ってみたいと思ったアプリを作りたいですね。
Discussion