ReactNativeでAndroid対応する話

前提

ReactNativeでiOS版のアプリをリリースしていて、Android版をリリースする話

トラブルシューティング

Build.VERSION_CODES.Q が存在しないエラー

compileSdkVersionを29以上にすると解決

メモリー足りないエラー

Execution failed for task ':app:mergeExtDexDebug'.

> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade

   > java.lang.OutOfMemoryError (no error message)

コメントアウトを解除した

org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

64K問題？

Cannot fit requested classes in a single dex file (# methods: 154819 > 65536 ; # fields: 126457 > 65536)

multiDexEnabled trueを追加

facebook sdkのエラー

The SDK has not been initialized, make sure to call FacebookSdk.sdkInitialize() first.

確かにまだ設定してないからなー。

FirebaseのAuthentication使ってるからそこら変の設定がもろもろ足りない。

React Native Firebase

https://rnfirebase.io/

Twitterの設定

https://rnfirebase.io/auth/social-auth#twitter

中で使ってるライブラリーはこれ

https://github.com/GoldenOwlAsia/react-native-twitter-signin

react-native0.62.2使ってるから、gradleの追加や、MainApplication.javaへの追加は不要

Appleでログイン

使っているライブラリーはこちら

https://github.com/invertase/react-native-apple-authentication

iOS開発時は1.0.0。Android対応は2.0.0からので、バージョンを最新にする（2.1.0）

  const response = await appleAuthAndroid.signIn();

ドキュメント通り実装しても、responseで取得できるのはid_tokenだけ。

{nonce: "XXXXXXXXX", state: "XXXXXXXXXXXX", id_token: "XXXXXXXXX", code: "XXXXXXXXXXX"} 

id_tokenはJWTなので、decodeすると、（便利なサイト https://jwt.io/)

{

  "iss": "https://appleid.apple.com",

  "aud": "xxxxxxxxxxxxxxxxxxxxxx",

  "exp": 1607694557,

  "iat": 1607608157,

  "sub": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

  "nonce": "xxxxxxxxxxxxxxxxxxxxxxxxxxxx",

  "c_hash": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

  "email": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",

  "email_verified": "true",

  "is_private_email": "true",

  "auth_time": 1607608157,

  "nonce_supported": true

}

こんな感じ

で？

Firebaseの本家の（ReactNativeじゃないほう）のAndroidのドキュメントをみてみる

https://firebase.google.com/docs/auth/android/apple

始めの方はSDK使えば簡単にできるようなことが書いてある。

「高度: 手動によるログインフローの処理」ここが参考になるかも

https://firebase.google.com/docs/auth/android/apple#advanced_handle_the_sign-in_flow_manually

AuthCredential credential =  OAuthProvider.newCredentialBuilder("apple.com")

    .setIdTokenWithRawNonce(appleIdToken, rawUnhashedNonce)

    .build();

mAuth.signInWithCredential(credential)

appleIdTokenとか書いてあるので、それ渡せば良い？ appleIdTokenはAppAuthから取得する？んー。これも違うような。

Web版をみてみる。

https://firebase.google.com/docs/auth/web/apple

続きはまた明日・・・ 

 

DataStoreの辛いところ

# DataStoreの限界 FacebookやインスタグラムのようなSNSで、投稿、公開範囲、お気に入りなどの機能をDataStoreで実現しようとするとどうしても辛くなる。 ## DataStoreで実現可能？ - users - id - feeds - id - user_id - favorites - user_id - feed_id - friends - user_id - follow_id が存在する ### 投稿が削除された場合、お気に入りから削除 favoritesからfeed_idの物を削除すればOK ### フォロー解除した場合、相互フォローのみの投稿をお気に入りから削除 アクセスユーザーとフォローしていたユーザーのお気に入り一覧から、公開範囲が相互フォローの投稿を取得して削除する。 この場合、favoritesにfeed情報を保持していないため、user_idで絞り込んだfeedを全部取得する必要がある。 DataStoreはfavoritesにfeedの構造体を保存できるが、feedが更新された場合にfavoritesのfeedまで更新しないといけないため現実的ではない。 # RDSで行う場合 同じデータ構造でOK ## 取得する場合に毎回joinして取得する select * from favorites fav inner join feeds on fav.feed_id=feeds.id left join friends on friends.user_id=feeds.user_id where fav.user_id=? and ( (feeds.enabled=有効) (feeds.publish_type=公開) or (feeds.publish_type=フォローワーのみ公開 and friends.user_id is null) or (feeds.user_id=自分) ) # まとめ DataStoreを使うってことは、前もってデータを作って置いてアクセスしやすい状態を担保するところでもある気がする。 更新のタイミングはデータの作り変えで複雑になるけど、検索はシンプルで良い。

Cloud Funcsionsを個別に呼び出す（リトライ処理）

# 概要

Cloud FunctionsをGCSに保存したタイミングで、画像データを変更してもう一度GCSにアップロードしたい。

## WebUIから実行

関数をテストから実行する

dataで必要なパラメータを指定。
今回はbucketとfileを使っていたのでその2つを指定する

以下は実際に読んでるコード

```
exports.helloWorld = (event, callback) => {
  const object = event.datat;
  console.log(`Bucket: ${object.bucket} File: ${object.name}`);
```

## コマンドラインからの実行

関数名、リージョンを指定して呼び出す

```
gcloud --project [PROJECT-NAME] beta functions call helloWorld --region asia-northeast1 --data '{"bucket":"hogehoge","name":foo.png"}'
```

Cloud Functionsを使ってImageMagickを使って画像変換してみる

JSからImageMagickを使う

nodeでImageMagickを使うライブラリがある

gm https://github.com/aheckmann/gm

こちらを使って行う

const gm = require("gm").subClass({ imageMagick: true });

gm('image.png')

  .colorspace("cmyk")

  .write('image.tif')

GCSからダウンロード

渡された引数にGCSのオブジェクトが渡されるのでそれを使ってダウンロードする

const object = event.data;

const file = storage.bucket(object.bucket).file(object.name);

const tempLocalPath = `/tmp/${path.parse(file.name).base}`;

file.download({ destination: tempLocalPath })

  .catch(err => {

    console.error("Failed to download file.", err);

    return Promise.reject(err);

  })

  .then(() => {

    console.log(`Image ${file.name} has been downloaded to ${tempLocalPath}.`);

  })

GCSへアップロード

ダウンロードの続きでbucketに対してuploadを行う

const newFileName = file.name.replace(".png", ".tif");

file.bucket

        .upload(tempLocalPath, {

          destination: newFileName,

          metadata: { contentType: "image/tiff" }

        })

        .catch(err => {

          console.error("Failed to upload cmyk image.", err);

          return Promise.reject(err);

        });

デプロイ

プロジェクトの指定

--project [PROJECT NAME]

regionの指定

--region asia-northeast1

デフォルトだとus-central1になる

実際のコマンドは以下

gcloud --project [PROJECT] beta functions deploy pngToCMYKConverter --region asia-northeast1 --trigger-resource sheet-yournail-staging --trigger-event google.storage.object.finalize

他のリージョンにDeployしてモジュールを削除

gcloud --project [PROJECT] beta functions deploy pngToCMYKConverter

参考
https://cloud.google.com/functions/docs/tutorials/imagemagick?hl=ja

.mitmproxyを使ってHTTPSの通信を確認

公式のドキュメント https://docs.mitmproxy.org/stable/ # install ## mac ``` $ brew install mitmproxy ``` ## iPhone ### 証明書 セキュアな通信を傍受するために、プロファイルのインストールを行う ``` http://mitm.it ``` その後、「設定」> 「一般」> 「情報」> 「証明書信頼設定」 "ルート証明書を全面的に信頼する"にチェックを入れる そうするとhttpsの通信も閲覧できるようになる <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JgOuweZN9-9e3I2jl-YjDg9nrj1EUfYEufTLUDVdjltI1u3TBqBchX4JGZ9pOyxdJnRHpSr01WngsZLBxqOGVoGyjeNj6zxLY_2CTdUC0m4n0t4ia-aVzTEB2hvXyOG0hBYVTbdIidA/s1600/IMG_0490.PNG" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JgOuweZN9-9e3I2jl-YjDg9nrj1EUfYEufTLUDVdjltI1u3TBqBchX4JGZ9pOyxdJnRHpSr01WngsZLBxqOGVoGyjeNj6zxLY_2CTdUC0m4n0t4ia-aVzTEB2hvXyOG0hBYVTbdIidA/s320/IMG_0490.PNG" width="148" height="320" data-original-width="739" data-original-height="1600" /></a> ### プロキシ設定 wifiのプロキシ設定で、PCのアドレス、port 8080にする # 使い方 ``` $ mitmproxy ``` ## Flows通信一覧が表示 ``` d 1行削除 z 全行削除 ```

Firebase Functionsの登録

Cloud Storageに保存した画像をCloud Functionsを使って、サムネイル画像を生成する # 公式ドキュメント https://firebase.google.com/docs/functions/gcp-storage-events?authuser=1 ## インストール ``` $ npm install -g firebase-tools # ブラウザが起動して認証する $ firebase login # 初期設定 $ firebase init or $ firebase init functions ``` ## ディレクトリ構成 ``` $ tree -L 2 . ├── firebase.json └── functions ├── index.js ├── node_modules └── package.json ``` ## 利用するパッケージを追加 ``` # Cloud Storage への再アップロード用 $ npm install --save @google-cloud/storage # 外部プロセス実行用 $ npm install --save child-process-promise ``` ## index.js ここの中身をそのままコピー https://github.com/firebase/functions-samples/blob/90ac6c8083122cedae19141f8ac8cb124ec8f321/quickstarts/thumbnails/functions/index.js#L60-L83 ## 特定のパケットをトリガーにする 特に指定しなければ、デフォルトのバケットが使われる コード上で指定できる ``` # デフォルトを使う場合 functions.storage.object() # 特定のバケットの場合 functions.storage.bucket('バケット名').object() ``` ## Deploy ``` $ firebase deploy --only functions ```

ReactNativeのリリース自動化、CodePush x CircleCI

# CodePushのアクセスキーを作成 ``` $ code-push access-key add "CircleCI" Successfully created the "CircleCI" access key: XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX Make sure to save this key value somewhere safe, since you won't be able to view it from the CLI again! ```