木木木

Swift / Ruby on Railsなどの学習メモ。


react-native 0.60系にアップグレードする

0.5X系から 0.60系にアップグレードするのはなかなか大変な作業である。 大きな変更点としては

  • autolinking
  • Android X
  • cocoapodsがデフォルト

ちなみにこの記事書いてる時点で早くも0.61のRCが来ている。早い。

作業手順忘れそうなのでメモ。

Upgrade Helper

基本的にはこれに沿ってアップグレードすればよい。

react-native-community.github.io

が、それだけだとビルドできる状態まで持っていけない。

ネイティブ依存している各種ライブラリを最新版に上げる

0.60対応してないものもあるが、メジャーなものは対応済な印象。

iOS

upgrade-helperで見た際、project.pbxprojファイルの差分を読み取るのは無理ゲーなので、以下手順をXcode上でやる。

Target選択 => Build Phases => Link Binary With Libraries
  • libPods-[ProjectName].a 以外を削除
  • sentry使ってる場合はlibz.tbd も一応残しておく

f:id:device_me:20190828123144p:plain

参考: [0.60.0] Build failed after upgrading from 0.59.9 to 0.60 · Issue #25572 · facebook/react-native · GitHub

Project Navigator でLibrariesの中身削除

Project Navigator (Xcode左のファイル一覧) で Librariesからすべて選択し、削除(Move to trash) f:id:device_me:20190828123435p:plain

参考:

React Native 0.60.0 `xcodeproj` upgrade · Issue #47 · react-native-community/upgrade-helper · GitHub

その他トラブルシューティング

ライブラリがSwift使ってる場合はBridgingHeaderが必要。 Xcodeで Project Navigatorで右クリック => Add New Fileし、 Swiftファイルを作成すると、「ブリッジングヘッダー作る?」 みたいなこと聞かれるのでYESに。 BridgingHeaderファイルが勝手に作られる。 ダミーのSwiftファイルは消してもいいかも。

Android

jetifierにやってもらう

yarn add jetifier
yarn jetifier

packages.jsonでpostinstallとかに定義しとくといいかも

"postinstall": "yarn jetifier"

MainApplication.javaで自身で明示的に追加するものとしないもの

autolinkingのおかげでAndroidに使用パッケージを記述する必要がなくなった。
しかし依然として自分で追加しないといけないものもある。

 protected List<ReactPackage> getPackages() {
            @SuppressWarnings("UnnecessaryLocalVariable")
            List<ReactPackage> packages = new PackageList(this).getPackages();

            packages.add(new RNFirebaseAnalyticsPackage());
            packages.add(new RNFirebaseCrashlyticsPackage());
            packages.add(new RNFirebasePerformancePackage());

            return packages;
        }

自分で追加しないといけないパッケージかどうかはどうやって判別すればいいかというと、以下のファイルに列挙されていなければ自分で追加するということになる。

android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java

autolinkingの機能により自動で作成される追加パッケージ定義ファイル。

その他注意

react-native-firebaseは5.X系だとメインのコアライブラリはauto linking対応しているが例えばanalyticsとかperformanceライブラリはautolinking対応してないっぽい?

ここだけmanual追加で対応。

Apple Developerプログラムのsigning certificateについての公式のまとめページ

Apple Developerプログラムのsigning certificateについての公式のまとめページです。 いつもよくわからなくなってググるのですが、公式の説明ページが一番分かりやすかった。。 忘れないようにメモです。

https://help.apple.com/xcode/mac/current/#/dev3a05256b8

GastbyJSでGoogle Fontsやセルフホステッドフォントを使う

Google FontsやTypeKitはプラグインがサクッとやってくれる。

www.gatsbyjs.org

しかし自分で用意したフォントを導入するのはなかなか入れるのに手こずった。
自分用にメモ。

$ yarn add gatsby-plugin-web-font-loader

gatsby-config.js

{
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Noto Sans JP'],
        }
      },
    },

これでGoogle Fontsは入る。楽。

自分で用意したフォントを導入

rootフォルダ/staticフォルダに入れて対応した。

ほんとはできるだけjsの管理下にしておいたほうがよいのだけれど、自分の理解不足のせいかフォントが導入できないため、static管理下に。

static/fonts.css

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff') format('woff');
}

gatsby-config.js

{
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Noto Sans JP'],
        },
        custom: {
          families: ['MyFont'],
          urls: [`fonts.css`],
        },
      },
    },

で、static/以下に MyFont.woff を入れる。

ちなみになぜかttf形式だとchromeで以下のエラーが出てフォントが表示できなかった。 理由は不明。

Failed to decode downloaded font: OTS parsing error: incorrect entrySelector for table directory

ttf => woffに変換するサービスを利用してことなきをえた。

Apache 2.0 License の ボーントラッキングライブラリ Open Pose Plus

センサー無し、画像のみで骨格や顔、手のトラッキングができる Open Pose。
しかし商用利用は$25,000 / 年 と高い。

しかし、調べているうちにOpen Pose Plus というライブラリがApache 2.0で公開されているのを見つけた。

github.com

まだ動作確認などできてないけど、これはひょっとして胸熱。。

qiita.com

Firebase + iOSでCrashlyticsのクラッシュレポートが送信されない場合

iPhoneアプリにCrashlytics入れてたら、consoleでクラッシュが反映されなかったのでメモ。

公式ドキュメントのように、一度デバッガーからのアプリの実行を止め、
ホーム画面からアプリを起動してクラッシュさせると、意図通りレポートが送信される。

Firebase Crashlytics 実装をテストする  |  Firebase

Macで自分のipアドレスを調べる

WiFi利用の際のIPアドレスはとりあえずこのコマンドで表示される。

$ ipconfig getifaddr en0

Macではen0 (イーサネット0の略)というインターフェイスWiFiに割り当てられているので、このコマンド一発で表示される。

ネットワークサービスの一覧を表示

$ networksetup -listallhardwareports

すべてのネットワーク設定を見たい場合

$ ifconfig

Android Studio を立ち上げずにAVDエミュレーターをローンチする

以前は重くて使い物にならないと感じていたAVD。
開発のときはもっぱらGenyMotionを使用していた。

しかし、最近はAVDの方が動作が軽い!
ので、AVDを使いたいが、FlutterやReact Nativeで開発している時にいちいちAndroid Studio を立ち上げるのが面倒。
以下の方法でコマンドから一発で立ち上げることができた。

まずは、デバイス名を調べる

$ ~/Library/Android/sdk/emulator/emulator -list-avds

これが必要なのは最初の一回だけ。 出てきたデバイス名をメモる。

そしたら、次回からはこちらで一発起動が可能。

$ ~/Library/Android/sdk/emulator/emulator -avd デバイス名