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昼夜切り替えウィジェット。

概要

Androidで暗号化して保存する仕組みを自前で実装するのが大変でしたが、JetpackのSecurityにEncryptedSharedPreferencesという便利なものが登場したので触ってみました。
まだ2019/10月時点でalpha版なので使えるのは少し先になりそうです。
KeyStoreで色々と苦労したのでもっと早く出てきてほしかったです。

使ってみる

ライブラリを入れる。現時点で1.0.0−alpha02です。

build.gradle

def security_version = "1.0.0-alpha02"
implementation "androidx.security:security-crypto:$security_version"

保存する

MainActivity.kt

val masterKeyAlias = MasterKeys.getOrCreate(MasterKeys.AES256_GCM_SPEC)
val preferences = EncryptedSharedPreferences.create(
    "secret_shared_prefs",
    masterKeyAlias,
    applicationContext,
    EncryptedSharedPreferences.PrefKeyEncryptionScheme.AES256_SIV,
    EncryptedSharedPreferences.PrefValueEncryptionScheme.AES256_GCM
)

val editor = preferences.edit()
editor.putString("hoge", "hoge")
editor.apply()

SharedPreferencesと同じ実装なのですごく使いやすいです。

minSDK23以下で利用する場合はOS6系未満のときに独自に暗号化などするする必要があります。また、そのときは5系のOSが6にアップデートしたときにデータ移行なども考えないとデータが消えてしまいます（現時点でどれくらいアップデートユーザがいるかは不明ですが）

AndroidManifestt.xml

 <uses-sdk tools:overrideLibrary="androidx.security" />

MainActivity.kt

private fun getEncryptedSharedPreferences() = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    val masterKeyAlias = MasterKeys.getOrCreate(MasterKeys.AES256_GCM_SPEC)
    EncryptedSharedPreferences.create(
        "secret_shared_prefs",
        masterKeyAlias,
        applicationContext,
        EncryptedSharedPreferences.PrefKeyEncryptionScheme.AES256_SIV,
        EncryptedSharedPreferences.PrefValueEncryptionScheme.AES256_GCM
    )
} else {
    // Android5系以下では利用できないので独自に暗号化が必要(ここでは単にSharedPreferencesを利用)
    getSharedPreferences(
        "secret_shared_prefs",
        Context.MODE_PRIVATE
    )
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val preferences = getEncryptedSharedPreferences()
    val editor = preferences.edit()
    editor.putString("hoge", "hoge")
    editor.apply()
}

なお、バックアップでの利用は不可になります。

リンク

Developers
動作確認用リポジトリ

デバック方法の覚書です。

前提

• firebaseのアカウントが存在し、アクセスできる
• firebaseへのイベントやログ送信機構が実装されている

準備

Android Debug Bridge（adb）のインストール

公式資料を見ると、adbを使うので予め用意しておく。
adbに関しては、こちらを参考に。

• Android Debug Bridgeとは？Android開発のデバッグツールのインストールと初期設定

手順

1. package_nameの確認

package_name は、AndroidManifest.xmlのpackage部分に記述されています。
コマンド実行時に利用するので控えておきます。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="jp.co.eversense.ninaru">

...
...

2. Android Studioのデバッグオプションの有効化

下記のコマンドを実行します。

# 今接続している端末 or 
# 複数端末があるとエラーとなる
adb shell setprop debug.firebase.analytics.app {package_name}

確認

1. firabaseのdebug viewにアクセス

2. ビルドした端末を選択する

3. androidでいろいろと操作する

適当に操作します

4. ログが飛ぶので中身をいろいろと見てみる

トラブルシューティング

adb shell を叩いたときに error: no devices/emulators found エラーとなる

• 複数端末をつないでいる状態だと、どのデバイスに対しての命令かわからないのでエラーとなる
• 起動中のAVDをすべて停止させ、端末を一つつなぐと解決する
• あるいは、デバイスをコマンドで指定する

# デバイスのリストを確認する
$ adb devices -l
List of devices attached
8AWX10Z52              device usb:336723968X product:blueline model:Pixel_3 device:blueline transport_id:7
ZY322BTNHM             device usb:336658432X product:montana_n model:Moto_G__5S_ device:montana_n transport_id:8


# -s オプションでデバイスを指定して実行する
$ adb -s 8AWX10Z52 shell setprop debug.firebase.analytics.app {package_name}

FirebaseDebugViewについて

• ときどき、パラメータは欠損することがある（Debug viewの仕様っぽい）
• そこまでリアルタイム反映ではない

参考

• Android Debug Bridge (adb)
• イベントのデバック

はじめに

ボタンの表示/非表示を切り替える際の状態としてVISIBLE、INVISIBLE、GONEがあります。
それらを分けるとVISIBLEは表示、INVISIBLEとGONEは非表示に分けられます。
それでは、INVISIBLEとGONEのどこが違うのでしょうか？

違うところ

INVISIBLEとGONEのどちらとも見えなくなることは同じですが、見えなくなった後のレイアウトに違いがあります。

INVISIBLEの場合

下記のような状態のボタンがあります。

真ん中の"INVISIBLE"ボタンをタップすると次のようになります。

GONEの場合

次に、"INVISIBLE"ボタンと"GONE"ボタンを入れ替えた場合、次のようになります。

まとめ

INVISIBLEの場合、非表示になっても空白部分はそのままの状態になり、GONEの場合、非表示になると空白部分を詰めるように配置されます。

また、それぞれの日本語の意味を調べてみました。
・INVISIBLE：目に見えない等、そこにはあるけど見えないといった意味で使用されています。
・GONE：消える等、そこにはいないといった意味で使用されています。
日本語で覚えるとわかりやすいかもしれないです！

はじめに

TextInputLayoutとは、Android Design Support Libraryに含まれているテキスト入力機能を提供するViewです。MaterialDesignのTextFieldsを実現するために用いられます。今回はこのTextInputLayoutについて勉強したので、ぜひ参考にしていただければ幸いです。

導入

レイアウトのxmlを作成

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:counterEnabled="true"
            app:counterMaxLength="20"
            app:errorEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="hint" 
                android:inputType="numberPassword"/>

    </com.google.android.material.textfield.TextInputLayout>

親ViewにTextInputLayout、子ViewにTextInputEditTextを用いることで、カッコいいデザインを実装することができます。style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"によりテキストフィールドへの枠線表示が可能になっています。

親View(TextInputLayout)

app:counterEnabledをtrue、app:counterMaxLengthに文字数を設定することで、入力できる文字数の上限を決めることができます。
app:errorEnabledをtrueにすると、エラーメッセージの表示を行うことができます。

子View(TextInputEditText)

android:hintで入力のヒントを表示したり、android:inputTypeで入力の文字列のタイプを変更することができます。

ソースコード

今回作成したxmlの全体になります。アプリを立ち上げた際に表示されるようなログイン画面を意識して作成しました。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/username"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="395dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            app:boxCornerRadiusBottomEnd="10dp"
            app:boxCornerRadiusBottomStart="10dp"
            app:boxCornerRadiusTopEnd="10dp"
            app:boxCornerRadiusTopStart="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/passView">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/usernameEdit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="ユーザ名" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/pass"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="395dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            app:boxCornerRadiusBottomEnd="10dp"
            app:boxCornerRadiusBottomStart="10dp"
            app:boxCornerRadiusTopEnd="10dp"
            app:boxCornerRadiusTopStart="10dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/username">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/passEdit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="numberPassword"
                android:hint="パスワード" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
            android:id="@+id/login"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            android:layout_marginTop="64dp"
            android:text="ログイン"
            app:layout_constraintStart_toStartOf="@+id/pass"
            app:layout_constraintTop_toBottomOf="@+id/pass" />

    <Button
            android:id="@+id/setting"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="72dp"
            android:text="設定"
            app:layout_constraintStart_toEndOf="@+id/login"
            app:layout_constraintTop_toTopOf="@+id/login" />

    <TextView
            android:id="@+id/passView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:textSize="20sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

最後に

今回は主に導入方法をメインに説明しました。TextInputLayoutは通常のEditTextに比べ、アニメーションがあったりとレイアウトやデザインが非常に良くなると思います。また今回は軽い説明でしたが、エラーメッセージを表示させたりできる点も強みだと感じます。簡単に実装できると思うので、皆さんもぜひ試してみてください。

Android 字畫辨識應用

https://gitlab.com/kangyueluo/Android_Pic.Info

1. 準備辨識字畫放入 Drawable
2. 在 string.xml 設定，字畫的資訊
3. 設定圖片過濾器
4. 設定handler顯示文字資訊

Android Debug Bridgeとは？

• windowsやmacといった開発端末から、android端末の操作を行えるようにするためのコマンドラインツール
• Android SDK Platform-Tools package に同梱されている
• コマンドは、全てadbで始まる

環境

• macOS Mojave
• Android Studio 3.5
• zsh

前提条件

• Android Studioセットアップ済み
• SDK Managerで何かしらのversionのsdkがインストールされている

インストールの前に

terminalで、コマンドが見つかればすでにインストールされているのでこの記事を読む必要はありません。

# adbがない or adbへのパスがとおっていない場合
$ adb
zsh: command not found: adb

# adbが利用可能な場合
$ adb --version

Android Debug Bridge version 1.0.41
Version 29.0.4-5871666
Installed as /Users/TomoakiTANAKA/Library/Android/sdk/platform-tools/adb

インストール

1. SDK Managerを開き、パスを確認する

SDK Managerを開いて、Android SDK のインストールパスを確認します。
SDKがインストールされていれば、adbは同梱されているので、パスを通すだけでOKです。

2. adbのパスを通す

ユーザ名 の部分は、1. で確認したパスを参考にしてください。

$ export PATH=$PATH:/Users/<ユーザー名>/Library/Android/sdk/platform-tools

3. 動作確認

adb コマンドを打ち込んで、結果がでればOKです。

$ adb --version

Android Debug Bridge version 1.0.41
Version 29.0.4-5871666
Installed as /Users/TomoakiTANAKA/Library/Android/sdk/platform-tools/adb

4. （オプション）rcファイルへのパスを書き込む

exportコマンドを毎回実行するのはめんどくさいので、設定ファイルに記述しておきます。

vi ~/.zshrc

ユーザ名 の部分は、1. で確認したパスを参考にしてください。
.zshrcに下記の記述を追加

.zshrc

export PATH=$PATH:/Users/<ユーザー名>/Library/Android/sdk/platform-tools

source ~/.zshrc

おわりに

adbをコマンドラインから利用できるようになりました。
adbを使うと、firebaseにログを送信しつつ、firebaseのdebugViewでログの確認をできたりします。

参考

• MacにAndroid Studioを入れて、adbを使える状態にする
• Android Debug Bridge (adb)

はじめに

「Ok Google, 体重は〇〇kgと記録して」
をやりたくて仕組みを考えました。

本来であればGoogleFitのREST APIを使って
直接記録するのがいいのだと思いますが、
調べていくうちに面倒になってしまったので
プログラミングせずにアプリを使うことにしました。

フロー

Google Assistant
　↓(IFTTT)
Fitbit
　↓(FitToFit)
GoogleFit

IFTTTからGoogleFitには直接記録出来ないのですが
Fitbitへは直接記録出来るレシピが用意されているため
まずFitbitに記録してそれをFitToFitというアプリで
GoogleFitに同期します。
GoogleFitへは即時の反映とはなりませんが
FitToFitでは30分〜24時間毎に自動同期が出来るので
実用的な範囲かと思います。

体脂肪率を記録するのも可能ですが
もう少し厄介です。

FitToFit
https://play.google.com/store/apps/details?id=fitapp.fittofit

おわりに

やり方を詳しく書こうと思ったのですが
普通にIFTTTとFitToFitを使うだけなので
不要かと思いやめました。
もし要望があれば書こうと思います。

WithingsやS Healthなども検討して
Fitbit経由が良さそうだという経験と
FitToFitという便利なアプリの紹介でした。

はじめまして、最近個人開発で収益を得ようと奔走しているushijiroです。初投稿なのでお手柔らかにお願いします(*´ω｀*)

先日Chick Jumpというアプリをリリースしました。内容はUnityを用いて開発したシンプルなミニゲームで、以前デベロッパー登録して放置していたGoogleアカウントがあったので、AndroidアプリとしてPlayStoreからリリースしました。

ミニゲームということもあり、ゲーム自体は3日間で完成したのですが、それ以外の部分は初めての連続でなかなか苦戦しました。そこでこの記事では、詰まったところをまとめておこうと思います。

あと、もしよかったら遊んでみてください。未だにダウンロード数が0なので…(ヽ´ω`) こちらからダウンロードできます。

環境

• OS: Windows 10
• Unity: Unity 2019.2.6f1
• AdMob: GoogleMobileAds-v4.0.0
• GPGS: GooglePlayGamesPlugin-0.9.64

JDKやAndroid Studioを自分でインストールする必要はない

インストールする際にAndroid Build Support、Android SDK & NDK Toods、Open JDKにチェックを入れておくと、特に何もしなくてもAndroidアプリをビルドできるようになります。すでにUnityをインストールしている場合、Unity Hubからモジュールを追加できます。

Play Services ResolverがGradle failed to fetch dependencies.で止まる

恐らくJAVA_HOMEという環境変数が設定されていません。ビルドインのJDKはC:\Program Files\Unity\Hub\Editor\Unityのバージョン\Editor\Data\PlaybackEngines\AndroidPlayer\Tools\OpenJDK\Windowsにあるので、システム環境変数にJAVA_HOMEという名前でパスを通しておきましょう。

ビルド時にNeither AdManager nor AdMob is enabled yet.というエラーが出る

GoogleMobileAdsSettingsのAdMob App IDが設定されていない可能性があります。GoogleMobileAdsSettingsは、Assets > Google Mobile Ads > Settings...から開くことができます。

実装に問題はなさそうなのにGPGSが動かない

プレイストア経由でないと動作しないようです。テストする際は内部テスト版としてリリースしましょう。

アプリの署名で求められるSHA1フィンガープリントをどうやって調べるのかわからない

内部テスト版でも良いのでストアにアプリをアップロードすると、SHA1が入力された状態になるので楽ちんです。

どうしても自分で調べたい場合、コマンドライン上から先程のビルドインJDKのディレクトリに移動し、以下のようなコマンドを入力するとSHA1を確認できます。

bin\keytool.exe -v -list -keystore キーストアの場所

アプリを64ビット要件に準拠していないと言われる

Project SettingsのConfigurationからScripting BackendをIL2CPPに変更し、Target ArchitecturesのARM64にチェックを入れることで64ビットに対応したアプリをビルドできます。

APKが最適化されていないと言われる

Build Settings画面のBuild App Bundle（Google Play）にチェックを入れておくと、アプリをAndroid App Bundleとしてビルドできます。生成された.aabという拡張子のファイルをアップロードしましょう。同時に生成されるzipファイルの方はよくわかりません(；´∀｀)

version codeをすでに使っていると言われる

Project SettingsのOther Settingsの中にあるBundle Version Codeを変えましょう。更新するたびに一つずつ加算していけば良いと思われます。

You device dose not match the hardware requirements of this application

実機で動かした際このような警告が出て、構わずContinueするとクラッシュしたり画面がピンクになる場合、Project SettingsのOther SettingsにあるAuto Grapics APIにチェックを入れると直るかもしれません。

どうやらここにチェックが入っていると下にあるGraphics APIの中から選ばれるようで、デフォルトではVulkan等ごっつい面々が揃い踏みしており、最新の端末でしか動きそうにありません。

プライバシーポリシーをどう書けばいいかわからない

App Privacy Policy Generatorという素敵なサービスがあります。私はこのツールで生成したプライバシーポリシーをGitHub Pagesを使って公開しました。アプリをリリースして間もないので、正直問題ないか定かではありませんが、審査はパスし、今の所削除もされていません。

最後に

勉強目的かつ短期間で作ったミニゲームとはいえ、全くダウンロードされず、アプリ開発の厳しさをまざまざと思い知らされる結果となりました。評価云々以前に存在しら認識されないというのはなかなか応えますね…(´・ω・`) やはり最初から宣伝込みで独創的なアプリを作るべきと感じました。