Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

面白かった: プッシュ通知への画像指定 画像を指定するとどうなる？ ● 各端末からリクエストが来る (当然) 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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

ハマった: 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

Slide 19

Slide 19 text

ハマった: 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

Slide 20

Slide 20 text

レビュー「通知音が鳴らない」 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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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