スマホ版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)
   

   View Slide

2. すき：京都、百合
   個人開発の話です
   スマホアプリ開発は初心者レベルです
   たいぷらいた～ (@no_clock)
   2
   

   View Slide

3. ゴール
   「個人開発おもしろそう」と思ってもらう
   3
   個人開発沼
   

   View Slide

4. P2P地震情報
   ● ユーザの「揺れた！」を共有
   ＋気象庁 地震情報も配信
   ● 2004/12 サービス開始
   ● 混沌とした技術スタック
   P2P地震情報
   https://www.p2pquake.net/
   Ruby/Sinatra
   C#
   Kotlin
   Swift
   Gin
   4
   

   View Slide

5. アクティブユーザ数
   Android / iOS 版
   2021/03/20
   宮城県沖 (最大震度5強)
   2021/02/13
   福島県沖 (最大震度6強)
   Windows 版
   

   View Slide

6. Android 派
   Android robot by Google (CC BY 3.0)
   Android 版リリース 🎉
   iOS 版リリース 🎉
   でも…
   6
   

   View Slide

7. Android 派なので iOS 版開発意欲ない問題
   ● バージョン 0.1.0
   (2 年前)
   ● 一部機能未実装
   ● ★★★★★
   今後に期待です！
   (2 年前)
   7
   

   View Slide

8. Android 版そろそろ更新したい問題
   ● 最新版 (2 年前)
   ● 見やすくない
   ● UI が古い
   そうだ
   クロスプラットフォーム、
   しよう。
   8
   

   View Slide

9. ● Google 発のクロスプラット
   フォーム UI ツールキット
   ● 基本的に Dart 言語で書く
   Flutter architectural overview - Flutter
   https://flutter.dev/docs/resources/architectural-overview 9
   

   View Slide

10. 作り方: のんびりコードを書きます💻
    typewriter (typewriter / takuya)
    https://github.com/typewriter 10
    

    View Slide

11. 作り方: リリースします🎉
    Before After
    11
    

    View Slide

12. 作り方: エゴサします👀
    ● よさそう 🥳🥳🥳
    ● 片っ端から いいね (like)
    12
    

    View Slide

13. よかったこと
    と
    ハマったこと
    13
    

    View Slide

14. プラットフォーム依存コードはほとんど書いていない
    ストア提出、そのためのスクリーンショット等は相変わらず必要
    良かった: 機能はリッチに、コードはスリムに
    Dart Java, Kotlin Swift
    iOS 版 431 行
    Android 版 3,251 行
    Flutter 版 3,396 行 106 行 22 行
    

    View Slide

15. 便利だった: 設定の移行
    ネイティブ版 (?) の設定を移行したい
    ● native_shared_preferences パッケージ
    ○ Dart コードから SharedPreferences (Android), UserDefaults
    (iOS) にアクセスできる
    15
    

    View Slide

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
    

    View Slide

17. Flutter とは無関係に
    ハマった: OpenAPI Generator (5.0.0-beta3)
    AUTO-GENERATED FILE, DO NOT MODIFY!
    ● ただしコンパイルエラー (2 割くらい書き換えた)
    ● anyOf: 複数あるスキーマ定義のどれか 1 個以上
    Futuren,Userquake,UserquakeEvaluation>>> historyGet
    Future> historyGet
    17
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

21. ● macOS Big Sur になった → びっくり
    ● Xcode インストールしてなかった → もたもた…
    ● 古い iOS 10.3.1 の Simulator でも動作確認したろ！
    Flutter とは無関係に
    ハマった: 久々に起動した Mac mini
    21
    

    View Slide

22. 今後の課題
    ● Windows 版そろそろ更新したい問題
    ○ かれこれ 5 回くらい書き直している
    ○ 最後のリリース、いつだっけ…？
    22
    

    View Slide

23. スマホ版
    P2P地震情報を
    Flutterで作り直した
    2021/04/16
    Takuya Yamaguchi / たいぷらいた～ (@no_clock)
    

    View Slide