Flutterウィークリーとは？

FlutterファンによるFlutterファンのためのニュースレター
https://flutterweekly.net/

この記事は#77の日本語訳です
https://mailchi.mp/flutterweekly/flutter-weekly-77

※Google翻訳を使って自動翻訳を行っています。翻訳に問題がある箇所を発見しましたら編集リクエストを送っていただければ幸いです。

読み物＆チュートリアル

Geolocatorプラグインを使用してユーザーの位置を取得する

https://alligator.io/flutter/geolocator-plugin/

Paul HallidayによるFlutterのgeolocatorプラグインの使用の簡単な紹介

Flutter Google Mapsのマーカーアイコンとしてネットワーク画像を使用する

https://coletiv.com/blog/use-network-images-as-marker-icons-flutter-google-maps/

AntónioValenteが、Googleマップでカスタムアイコンをマーカーとして使用する方法を説明します

ナビゲーションドロワーを使用したマテリアルデザインを使用したレスポンシブFlutterアプリケーションの作成

https://dexterx.dev/creating-a-responsive-flutter-application-with-a-navigation-drawer/

Michael Buiが、 Flutterレスポンシブナビゲーションドロワーを作成する方法を紹介します。

FFIを使用してDartからRust関数を呼び出す方法

https://itnext.io/how-to-call-a-rust-function-from-dart-using-ffi-f48f3ea3af2c

FlutterからRustコードを呼び出すSacha Arbonelによるこのチュートリアルのおかげで、 DartコードからFFIを呼び出す新しい機能について学びます。

Flutterゲームでエレガントなストップウォッチを作成する

https://javipacheco.net/creating-an-elegant-stopwatch-on-flutter-game/

Javi Pachecoによる特定の目的のための複雑なウィジェットの作成方法の例。

Dart 2.5＆ Flutter 1.9バージョン：このGoogleリリースの新機能

https://medium.com/flutter-community/dart-2-5-flutter-1-9-version-what-new-about-this-google-release-ab61f4f6d20e

Matt Fitzgeraldは、 Flutter and Dart最新バージョンに追加されたすべての新しくて光沢のあるものを再開します。

Flutterルートのプレフィックスに「/」を使用しないでください！

https://medium.com/flutterpub/dont-use-to-prefix-your-routes-in-flutter-f3844ce1fdd5

Flutterアプリでルートにプレフィックスを付けるためにスラッシュを使用することについて知っておくと便利なトリック。

CustomPainterによるフラッターコミュニティアイコンの描画

https://medium.com/flutter-community/draw-flutter-community-icon-by-custompainter-97298eda4674

CustomPainterを使用してロゴを描くのがいかに簡単かについてのChris Chenの例。

Flutter — dartコードジェネレーター

https://medium.com/@bitsydarel/flutter-dart-code-generator-c86df03b09dc

Darel Bitsyは、ボイラープレートを回避するためにDartコードを生成する方法を紹介します。

Flutterクリッパー

https://medium.com/@mg55851/flutter-clippers-1fa3666f2bef

Mustafa GamalによるFlutter Clipクラスの非常に詳細な紹介

flutter_blocを使用したBLoCパターンの実装

https://medium.com/flutter-community/implementing-bloc-pattern-using-flutter-bloc-62a62e0319b5

それでもflutter_blocライブラリの使用に苦労している場合は、この記事Piyush Sinhaを使用して、簡単に使用する方法を説明してください。

プロパティ変更通知機能の紹介

https://medium.com/flutter-nyc/introducing-property-change-notifier-10e6d27080a3

Martin Rybakが、ChangeNotifierをさらに制御できるようにするウィジェットであるPropertyChangeNotifierについて説明します。

Flutterプラットフォーム対応ウィジェット

https://www.raywenderlich.com/4968762-platform-aware-widgets-in-flutter

Kevin Mooreは、flutter_platform_widgetsライブラリを使用してウィジェットプラットフォームを認識させる方法を説明します。

ビデオ＆メディア

Flutter PhotoView（今週のパッケージ）

https://www.youtube.com/watch?v=YV7D8XEQoYs&feature=youtu.be

PhotoViewパッケージを使用して、画像とコンテンツがズーム可能な機能を持つようにします。

Flutter分離とマルチスレッド（The Boring Flutter Development Show、Ep。30）

https://www.youtube.com/watch?v=qrFTt1NZed8&list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl&index=40&linkId=74395943

この退屈なショーのエピソードでは、フィリップにアンドリューが加わりました。 Dart分離とマルチスレッド化についてDartます。

Flutterのジャックスパロウのコンパスのライブコーディング

https://www.youtube.com/watch?v=nrU_mEAJQow&feature=youtu.be

MarcinSzałekはFlutter Europe Conference向けにこの楽しいコンパスアプリを作成しました。このビデオでは、彼は開発プロセスを共有しています。

スピードリーダーニュースアプリケーション

https://www.youtube.com/playlist?list=PLAzsruk_2prlBrdTCzG3kfisOIQHpntcC

Flutterアプリをゼロから作成する方法を示す興味深いビデオのプレイリスト。

ライブラリ＆コード

flutterkit / zerker

https://github.com/flutterkit/zerker

Zerkerは、軽量で強力なフラッターキャンバスグラフィックアニメーションライブラリです。

housmart / flutter_selectable_autolink_text

https://github.com/housmart/flutter_selectable_autolink_text

Flutterテキストで選択、クリック、長押しできるインラインリンクを生成する

divyanshub024 / day_night_switch

https://github.com/divyanshub024/day_night_switch

Flutter昼夜切り替えウィジェット。

はじめに

SwiftUIが登場して話題になっているXCode11
そんな中に埋もれていたSceneDelegateが地味に厄介だったので対処法を書き置きします。

SceneDelegateって？

正直何者なのかは分かっていませんが、アプリを複数表示させるためにSceneという概念が導入されてそれがゴニョゴニョしてるみたいなことなのでしょうか

詳しいことは参考にさせていただいた記事に書いてありますので、そちらか別の記事を見てください
参考はこちら

対処法

プロジェクトを新規で作成し、targetのOSをiOS12以下にすると、大量にエラーが出るかと思います。
大体は、↓のようなavailableの設定をしろ的なのがSceneDelegate.swiftとAppDelegate.swiftに表示されました。

'ConnectionOptions' is only available in iOS 13.0 or newer
'UIScene' is only available in iOS 13.0 or newer

というわけで、SceneDelegateにはクラスごと、AppDelegateにはUISceneSession LifecycleのMARKコメントが付けられている箇所から下のメソッドにavailableを付与します。

AppDelegate.swift

// MARK: UISceneSession Lifecycle

@available(iOS 13.0, *)
func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
    // Called when a new scene session is being created.
    // Use this method to select a configuration to create the new scene with.
    return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
}

@available(iOS 13.0, *)
func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
    // Called when the user discards a scene session.
    // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
    // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
}

SceneDelegate.swift

@available(iOS 13.0, *)
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).
        guard let _ = (scene as? UIWindowScene) else { return }
    }

    ~ 以下略 ~

さあこれでエラーもなくなったし大丈夫！
iOS12の実機で確認だ！っと意気込んで実行すると、なんと画面が真っ暗のまま動きません

どうしたのでしょうかとコンソールを覗いてみると、こんなメッセージが表示されていました

[Application] The app delegate must implement the window property if it wants to use a main storyboard file.

(翻訳)
[Application]Main.storyboardを使用する場合、AppDelegateはwindowプロパティを実装する必要があります。

なんのこっちゃ！ということで調べてみると、どうやら今まであったwindowプロパティが作られなくなっていたようで、それが原因で表示されないみたいでした。

というわけで、過去のプロジェクトを参考に、下記のように修正

AppDelegate.swift

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow? // これを追加

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }

これでXcode11で作成したプロジェクトもiOS12以下でビルドが通るようになります！

終わりに

SwiftUIも出てXCodeを使う人が増えればな〜と思いますが、こんな序盤でつまずきポイントがあったとは...
この記事をみて解決した方は、今後の励みになりますので、ぜひいいねを押していただけると嬉しいです！

はじめに

xibで View などの色にColor Assetの色を指定している場合、コードで色を変更すると想定外の挙動をすることがあります。

環境

• Xcode 10.3
• swift 5.0

準備

1. Assets.xcassetsにColor Assetを作成する
   適当に下記のように色を作成。
2. xibでViewControllerを作成し、Color Assetの色を指定する
   下記のように作成(赤色がColor Asset)。Labelの背景色はwhiteを指定。
   
3. xibでTableViewCellを作成し、Color Assetの色を指定する
   Labelを一つ置き、textColorにColor Assetを指定。
   
4. コードで色を変更する
   下記のように viewDidload と cellForRowAt で色を変更。
   

override func viewDidLoad() {
  super.viewDidLoad()

  // Do any additional setup after loading the view.
  label.textColor = .blue
  colorView.backgroundColor = .blue
  label.backgroundColor = .green
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "ColorTableViewCell", for: indexPath) as! ColorTableViewCell
  cell.label.text = "Test \(indexPath.row)"
  cell.label.textColor = .blue
  cell.label.backgroundColor = .green
  return cell
}

問題点

上記の準備をしたものを実行する。

期待値

期待値としては下記のような表示。

結果

しかし、結果は下記のような表示。

Color Assetの色を指定していないLabelの背景色は変更されていますが、Color Assetの色を指定した部分は色が変わっていない！！

解決策

無難な解決策としてはxibの色指定をColor Assetをやめて Custom を設定すること！！

Color Assetの色を指定しているとxibが読み込まれた後に再度色が設定されるらしい...

とりあえず viewDidload viewWillAppear はダメで viewDidAppear で設定すると期待通り設定できました。
セルの場合 awakeFromNib で設定してもダメでした。

さいごに

セルのラベルの色を条件によって変えようと思ったら初期表示のときに色が変わらない!!というのに直面し色々調べた結果、Color Assetが原因なのに気づきました。

Color Assetは便利だけど思わぬ挙動があるので気をつけましょう

2019/10/01時点

罠だらけだったので少しまとめます。
申し訳ありませんが全体的に自信薄なので裏を取ってほしいです。
ググったらすぐ出ることはあまり書きません。

iOS13からで、Xcode11必須

Xcode11必須ということは、Macのアップデートも必須。
はい。

ソーシャルログインのみのアプリは必須（リジェクト対象）

ソーシャルログインってどこまで？みたいな話が6月ころにあったらしいですが、ガイドラインは改定され、概ね「全部だよ全部！」みたいな雰囲気です。
まだ判例が出ないと何とも言えないですけど。

iOS12はどうすればいいの？

ボタンを出さない対応で良いのではないか、という意見が多いです。

iOS12やAndroidやWebでも使いたかったらどうすれば良いのか

Sign in with Apple JSというものがあるそうです。
それでアプリから連携できるのかは未検証です。

iCloudに繋がっていないと使えない

「Apple IDでサインインしてください」というダイアログが出てきます。

1回認証したら、最初のメールアドレス共有／非共有の画面が出せなくなった

設定＞Apple ID＞パスワードとセキュリティ＞Apple IDを使用中のApp＞Stop Using Apple ID で完全にリセットできます。
https://support.apple.com/ja-jp/HT210426

あとは管理側からユーザーを削除できるらしいです（がまだ試せていません）

（ところでこのボタン、ユーザーが押したら以降ログインできなくなるんですよね？）

emailやfullNameが取得できるのは初回だけ

ASAuthorizationAppleIDProviderを使って、[.fullName, .email]と指定しても取れないようです　ココ↓
https://forums.developer.apple.com/thread/119826
https://forums.developer.apple.com/thread/121496
Simulatorなら違う反応になるという声もありますね。

これはアプリを削除して再インストールしても変わらないので、keychainかなんかに保存しておかなきゃならないってことでしょうか？
もちろんuser識別子は取れます。でもuser識別子も変わるよって書いてるんですが?

メールアドレスが変わったらどうなるのか？　→　不明

メールアドレスに依存するな、って言われてる感じがしますねこれ。ユーザーが非共有を設定したらダミーが返ってくるわけですし。

所感

必須ではないアプリは少し情報が出揃うまで待ったほうがいいかもしれません。
問題は必須になるアプリですね。
新規で出すものは既に必須ですし、継続のものも2020年4月までに必要です。
閃いたんですが、メール認証機能を入れたらSign in with Apple回避できるんじゃないですかね？！

ユーザー目線での使い勝手は良さそうです。ボタンを押すだけなので。
また特にSNSをあまりやってない人の存在を無視しなくて良くなります。

個人的メモです。

https://github.com/flutter/flutter/wiki/Obfuscating-Dart-Code
まずこのページをみると難読化の方法が書いてある。

が、build aotってどこや。

xcode_backend.shを開く。
で、だいたい180行目ぐらいのところにbuild aotが出てくる。ここや。
わからなければ、エディタかなんか使って検索する。
その一番下に追加する。

...
      ${local_engine_flag}                                                  \
      ${bitcode_flag}                                                       \
      ${extra_gen_snapshot_options_or_none}

こんな感じ。bitcode_flagの行の最後の\を忘れるとNo such file or directoryとかcommand not foundとか言われるので注意。

あと、extra_gen_snapshot_options_or_noneは変数なのでbuild aotの前に

...
local extra_gen_snapshot_options_or_none=""
if [[ -n "$EXTRA_GEN_SNAPSHOT_OPTIONS" ]]; then
  extra_gen_snapshot_options_or_none="--extra-gen-snapshot-options=$EXTRA_GEN_SNAPSHOT_OPTIONS"
fi

RunCommand "${FLUTTER_ROOT}/bin/flutter" --suppress-analytics           \
  ${verbose_flag}                                                       \
  build aot                                                             \
...

こちらをお忘れなく。

難読化後も読めるように

Release.xcconfigには

EXTRA_GEN_SNAPSHOT_OPTIONS=--obfuscate

だけでなく

EXTRA_GEN_SNAPSHOT_OPTIONS=--obfuscate,--save-obfuscation-map=build/ios_dart_symbols_${FLUTTER_BUILD_NUMBER}.json

と書く。

これはありがたい記事がこちらにあります。ありがとうございます。
https://qiita.com/waytoa/items/afea190f6bcbf97c1551

以上、個人的メモでした。

背景

Bitrise + Deploygate でいままではiOSの開発環境アプリの配布をしていたのですが、Deploygateはそこそこコストが掛かるので移行することにしました。
Bitrise + App Distribution の記事がみつからず苦労したので知見として残します。

前提

• iOS プロジェクトにFatlaneを導入していること
• Bitriseを利用していること
  • Distribution証明書の用意などができていてBitriseに設定できていること
• Firebaseを利用していること
• Slackを利用している(配布通知が必要なければいらない)

Firebase 側でアプリ配布用のグループを作成する

Firebase Console から App Distributionを選択します。
初めて開くと開始ボタンがあるとおもいますのでそちらを押下して次に進みます。

テスターとグループタブを開いてグループを追加を押下します。
任意の名前でiOSアプリを配布するグループを作成してください。

あとは、グループに招待したい人のメールアドレスを追加するだけです。

Fastlaneの設定

Fastlaneを採用しているプロジェクトディレクトリで以下を実行します。
App Distributionのプラグインを導入できるようです。

fastlane add_plugin firebase_app_distribution

Bitriseでfirebaseを利用できるようにするためにtokenを取得します。
ここで取得したtokenはのちにBitriseで設定するのでメモしておいてください。

firebase login:ci

Fastfileに配布用のlaneを追加します。

  platform :ios do
      desc "StagingアプリをFirebase経由で配布"
      lane :distribute do
        build_ios_app(...) # gymなどでipaを作る処理をしてください
        firebase_app_distribution(
            app: "Firebase App ID をここにペースト",
            groups: "Firebaseで作成したグループ名をここにペースト",
            release_notes: last_git_commit[:message],
            firebase_cli_path: "./node_modules/.bin/firebase"
        )
      end
  end

Firese App IDはFirebase Consoleの Settings > 全般 > マイアプリ > アプリ ID で確認することができます。
groupsには作成したグループ名を指定します。

Bitriseで設定

以下のようなワークフローを作成しました。
今回主要な部分としては赤線を引いた部分になります。

Script step に書くこと

以下を記述してFirebase CLIを利用できるようにします。
Bitriseは元からnpm使えるみたいでしたので別途Node.jsのインストールは不要です。

## firebase tools DL
npm install firebase-tools

fastlane に書くこと

fastlane laneに実行したいlaneを記述します。今回はFastfileの方にdistributeというlaneを作成したので、
ios distributeと記述します。
ローカルでlaneを叩くときはfastlane distributeと叩いて動いていたのですが、iosをつけないと動作しないみたいでした。

Send a Slack message に書くこと

Slack Webhook URL (Webhook or API token is required)に Slackで生成したWebhook URLを設定します。(次のセクションで詳細書きます)

Target Slack channel, group or usernameで投稿したいチャンネルを指定します。形式は#generalのような形で通知できました。
Slackへの通知メッセージをText of the message to send.で設定しても良いかもしれません。

Firebase token を設定する

BitriseのアプリページからWorkflow > Env varsタブを開いて対象のworkflowの環境変数にFirebase tokenを設定します

Slack側でWebhook URLを生成する

Slackアプリを作成します
任意のアプリ名と追加したいワークスペースと指定すると作成完了です。

作成できたらIncoming Webhooksという項目があるのでそちらに遷移します。
Webhook URLが生成されているのでコピーしてBitriseのSlack Webhook URL (Webhook or API token is required)に設定します。

fastfileを設定したブランチをpushしてbitriseでビルドすれば配布ができると思います。

参考

Firebase App Distribution
[iOS] Firebase App Distributionを使用してiOSアプリを配布する
CircleCI + fastlane で Firebase App Distribution に ipa をアップロードする

Xcode 11に更新後、既存のReact Nativeアプリが実行時エラーで起動しなくなりましたが、以下の方法で対処して起動できました。

以下のエラーが出た場合

Synchronous remote object proxy returned error: Error Domain=NSCocoaErrorDomain Code=4099 "The connection to service on pid 0 named com.apple.commcenter.coretelephony.xpc was invalidated."

以下のコマンドで、シミュレータの設定をする。

xcrun simctl spawn booted log config --mode "level:off"  --subsystem com.apple.CoreTelephony

情報源はこちら。

以下のエラーが出た場合

[error][tid:main][RCTModuleMethod.mm:375] Unknown argument type '__attribute__' in method -[RCTAppState getCurrentAppState:error:]. Extend RCTConvert to support this type.

react-nativeを0.59.9以上に更新する。

react-nativeを更新したくない場合は、以下のファイルをこちらの通り直接書き換える。

node_modules/react-native/React/Base/RCTModuleMethod.mm

情報源はこちら。