スマホ版P2P地震情報をFlutterで作り直した

2021/04/16(Fri) 社内 LT 会で発表した内容です。

P2P地震情報
- https://www.p2pquake.net/

P2P地震情報 モバイル
- Android: https://play.google.com/store/apps/details?id=com.p2pquake.mobile
- iOS: https://apps.apple.com/jp/app/p2p%E5%9C%B0%E9%9C%87%E6%83%85%E5%A0%B1/id1457443047

Transcript

1. スマホ版 P2P地震情報を Flutterで作り直した 2021/04/16 Takuya Yamaguchi / たいぷらいた～ (@no_clock)
2. すき：京都、百合 個人開発の話です スマホアプリ開発は初心者レベルです たいぷらいた～ (@no_clock) 2
3. ゴール 「個人開発おもしろそう」と思ってもらう 3 個人開発沼
4. P2P地震情報 • ユーザの「揺れた！」を共有 ＋気象庁 地震情報も配信 • 2004/12 サービス開始 • 混沌とした技術スタック P2P地震情報 https://www.p2pquake.net/ Ruby/Sinatra C# Kotlin Swift Gin 4
5. アクティブユーザ数 Android / iOS 版 2021/03/20 宮城県沖 (最大震度5強) 2021/02/13 福島県沖 (最大震度6強) Windows 版
6. Android 派 Android robot by Google (CC BY 3.0) Android 版リリース 🎉 iOS 版リリース 🎉 でも… 6
7. Android 派なので iOS 版開発意欲ない問題 • バージョン 0.1.0 (2 年前) • 一部機能未実装 • ★★★★★ 今後に期待です！ (2 年前) 7
8. Android 版そろそろ更新したい問題 • 最新版 (2 年前) • 見やすくない • UI が古い そうだ クロスプラットフォーム、 しよう。 8
9. • Google 発のクロスプラット フォーム UI ツールキット • 基本的に Dart 言語で書く Flutter architectural overview - Flutter https://flutter.dev/docs/resources/architectural-overview 9
10. 作り方: のんびりコードを書きます💻 typewriter (typewriter / takuya) https://github.com/typewriter 10
11. 作り方: リリースします🎉 Before After 11
12. 作り方: エゴサします👀 • よさそう 🥳🥳🥳 • 片っ端から いいね (like) 12
13. よかったこと と ハマったこと 13
14. プラットフォーム依存コードはほとんど書いていない ストア提出、そのためのスクリーンショット等は相変わらず必要 良かった: 機能はリッチに、コードはスリムに Dart Java, Kotlin Swift iOS 版 431 行 Android 版 3,251 行 Flutter 版 3,396 行 106 行 22 行
15. 便利だった: 設定の移行 ネイティブ版 (?) の設定を移行したい • native_shared_preferences パッケージ ◦ Dart コードから SharedPreferences (Android), UserDefaults (iOS) にアクセスできる 15
16. 面白かった: プッシュ通知への画像指定 画像を指定するとどうなる？ • 各端末からリクエストが来る (当然) 56 time:05/Apr/2021:06:26:17 +0900 87 time:05/Apr/2021:06:26:18 +0900 157 time:05/Apr/2021:06:26:19 +0900 151 time:05/Apr/2021:06:26:20 +0900 82 time:05/Apr/2021:06:26:21 +0900 26 time:05/Apr/2021:06:26:22 +0900 7 time:05/Apr/2021:06:26:23 +0900 16
17. Flutter とは無関係に ハマった: OpenAPI Generator (5.0.0-beta3) AUTO-GENERATED FILE, DO NOT MODIFY! • ただしコンパイルエラー (2 割くらい書き換えた) • anyOf: 複数あるスキーマ定義のどれか 1 個以上 Future<List<AnyOf<JMAQuake,JMATsunami,Areapeers,EEWDetectio n,Userquake,UserquakeEvaluation>>> historyGet Future<List<BasicData>> historyGet 17
18. ハマった: Flutter 2 登場 (2021/03/03) 知らないまま firebase_messaging パッケージの 最新版を指定 pub get failed (1; Because p2pquake_flutter depends on firebase_messaging >=9.0.0-1.0.nullsafety.0 which requires SDK version >=2.12.0-0 <3.0.0, version solving failed. • Stable version なのに 依存する Dart SDK が dev 🤔 • 気づいた firebase_messaging package - All Versions https://pub.dev/packages/firebase_messaging/versions 18
19. ハマった: FCM (Firebase Cloud Messaging) プッシュ通知のデータ構造 Flutter だし同じ構造になってるはず（思い込み） On Android, the message contains an additional field data containing the data. On iOS, the data is directly appended to the message and the additional data-field is omitted. firebase_messaging 7.0.3 | Flutter Package https://pub.dev/packages/firebase_messaging/versions/7.0.3 { “data”: { “type”: “earthquake” } } { “type”: “earthquake” } Android iOS 19
20. レビュー「通知音が鳴らない」 Flutter とは無関係に ハマった: FCM でのプッシュ通知音 REST Resource: projects.messages | Firebase https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages?hl=en#androidnotification Fields sound string The sound to play when the device receives the notification. Supports "default" or ... • FCM への送信時に設定しないと鳴らない（不具合） ◦ ちなみに Android / iOS それぞれ固有パラメタ 20
21. • macOS Big Sur になった → びっくり • Xcode インストールしてなかった → もたもた… • 古い iOS 10.3.1 の Simulator でも動作確認したろ！ Flutter とは無関係に ハマった: 久々に起動した Mac mini 21
22. 今後の課題 • Windows 版そろそろ更新したい問題 ◦ かれこれ 5 回くらい書き直している ◦ 最後のリリース、いつだっけ…？ 22
23. スマホ版 P2P地震情報を Flutterで作り直した 2021/04/16 Takuya Yamaguchi / たいぷらいた～ (@no_clock)