Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

typewriter / takuya

April 16, 2021
Tweet

More Decks by typewriter / takuya

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. よかったこと

    ハマったこと
    13

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide