Open9

expo

masa4tmasa4t

コマンド
npx expo prebuild: ネイティブのコードを操作できる。iosとandroidディレクトリができる。

npx expo install: プロジェクトと互換性のあるライブラリバージョンを選択してインストールしてくれる。

masa4tmasa4t

expoでアンドロイドの挙動に注意が必要
デフォルトではkeyboardが出てきたらkeyboard分の範囲を自動的にpaddingを調整するresizeモード、
keyboardが出てきたらその範囲を自動的に押し上げる。panモードしかないchatアプリなどを作っているとこの挙動が困ることがある。

完全に自分でキーボードの動作を制御したい場合はデフォルトの挙動をまず無効にしたい。

react-native-keyboard-controllerこれをつかえばいける。

expoではサポートされていないandroidのadjustNothingを適用する関数を作成するyou know?

import { useCallback } from "react";
import { useFocusEffect } from "@react-navigation/native";
import {
  KeyboardController,
  AndroidSoftInputModes,
  useKeyboardContext,
} from "react-native-keyboard-controller";

function useKeyboardAnimation() {
  useFocusEffect(
    useCallback(() => {
      // adjustNothing を設定
      KeyboardController.setInputMode(
        AndroidSoftInputModes.SOFT_INPUT_ADJUST_NOTHING
      );

      return () => KeyboardController.setDefaultMode();
    }, [])
  );

  const context = useKeyboardContext();

  return context.animated;
}

export default useKeyboardAnimation;

そして作成した関数をkeyboardの挙動を無効化したい対象のところで使う。

eas buildのみ確認可能

masa4tmasa4t

eas についてreact native のアプリをクラウド上でビルドでき面倒な作業を代わりに行ってくれるサービス

cliをインストールする。

npm install -g eas-cli

そしたらログイン

eas login

設定ファイルを作成する下記のコマンドを実行するとeas.jsonがプロジェクトに作成される。このファイルにビルド設定を書いていく

eas build:configure

{
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {}
  }
}

デフォルト設定
"developmentClient": true　はデバックビルドにしますよのフラグ
"distribution": "internal"　はQRを出してくれてダウンロードできますよのフラグアプリストアに出す以外に入れておくもの

ビルドコマンド
// --previewをつけてeas.jsonの設定を参照すればdevelopment preview productionを分けてビルドできる。

eas build --platform android 
eas build --platform ios
eas build --platform all --preview preview

Androidでは特に気にすることなく生成されたQRでアプリを配布できる。

iosではAppleのセキュリティのためにad hoc provisioning profileが必要
iosのデバイスを登録するコマンド下記のコマンドはビルド前にして登録しておくこと

eas device:create

このコマンドを実行するとApp developerで登録しなくてもeasがやってくれる。

eas device:delete
#消すとき
eas device:list
#一覧見るとき

そしてios16以降を使ってインストールしたい場合はビルドする前に
設定からiPhoneの設定から開発者モードをonにしておく必要がある

そしてcredentials.jsonに
資格情報を設定してからビルドする。

ここむずい

masa4tmasa4t

android証明書周りわからん

Google では、すべての Android アプリをデバイスにインストールまたは更新する前に、証明書でデジタル署名することを義務付けています。

masa4tmasa4t

まずReactNativeとはJSの一番人気なフレームワークのReactでスマホアプリも作れるようにしたものです。

現在のReact Nativeでは、まずは ExpoのManaged Workflow（マネージドワークフロー） を使って開発をスタートし、
途中でネイティブ機能が必要になったときに Bare Workflow（ベアワークフロー） に切り替える、という流れが一般的です。

🚀 Expo(Managed Workflow)の説明
Expo は、React Nativeの開発をもっと簡単・スピーディーにしてくれるフレームワークです。
・ネイティブコードを書かなくても JavaScript だけでアプリ開発が可能
・ビルド不要で実機確認ができる
・クラウド（EAS Build）でネイティブアプリのビルド・共有・デプロイができる
・環境構築が非常に簡単

🔧 開発の始め方
まずは以下のコマンドでプロジェクトを作成します：

npx create-expo-app@latest
#環境構築コマンド

上記のコマンドを実行後にプロンプトの指示に従って進めると環境構築完了です。
プロジェクト作成後にルートディレクトリに移動して

npx expo start

すると、以下のように QRコードが表示されます。

📱 実機での動作確認
・Android：Expo Go アプリでQRコードを読み込む
・iOS：iPhoneのカメラアプリでQRコードを読み込む

すぐにスマホ上でExpo Goアプリが立ち上がり動作の確認できます。
※確認の条件：
・ネイティブコードを含まない（＝Expo対応のライブラリのみ）
・Expo GoとSDKバージョンが一致している
・スマホとPCが同じWi-Fiネットワークに接続されている

Windows PCを使っていても iOS 実機での確認が可能です！

🖥️ エミュレーターでの確認
Windows → コマンド実行後に a キーを押すとAndroidエミュレーターが起動

macOS → i キーを押すとiOSエミュレーターが起動(a　キーでAndroidの確認も可能)

エミュレーター上でもExpo Goアプリが立ち上がり動作の確認ができます。

以上が Expo(Managed Workflow)の説明です。

Bare Workflowの説明

Bare Workflow（ベアワークフロー） は、次のような場合に使います：
・カメラ制御や決済SDKなど、Expoだけでは対応できないネイティブ機能を使いたいとき
・AndroidやiOSの ネイティブコード（Objective-C / Swift / Java / Kotlin） を自分で編集・追加したいとき
・React Native標準のネイティブモジュール（例：react-native-keyboard-controller
）を使いたいとき
・ Expo Goの制限を受けずに、自由にネイティブアプリを構成したいとき

つまり、ExpoのManaged Workflowではできないことをしたい場合に途中から「より自由な開発モード」に切り替えるのが Bare Workflow です。

※Bare Workflowに移行すると、アプリがカスタムネイティブコードを含むため、
Expo Goでは起動できなくなります。

Bare Workflowでの開発の方法
まずexpo dev clientというものを入れる必要があります。これはネイティブコートを含んだアプリでExpo Goの開発体験(QRコードで即デバッグができる)ができるようにしてくれるライブラリです。

npx expo install expo-dev-client

インストール後に

npx expo prebuild

上記コマンドを実行後プロジェクトのapp.jsonというネイティブを生成する設定ファイルを見て android/・ios/ ディレクトリが生成され、ネイティブ構成に切り替わります。
app.json は、Expoがどんなネイティブ機能を含めるかを定義する設定ファイルです。
ライブラリによっては「app.jsonに以下の設定を追加してください」と書かれていることがあります。

この設定があることで、expo prebuild は適切なネイティブコードを含む android/・ios/ ディレクトリを生成します。
この状態からネイティブコードをカスタマイズすることができます。

その後、開発用クライアントをビルドして端末にインストールします

npx expo run:android
# または
npx expo run:ios

上記のコマンドを実行すると、PCに接続されている 実機 または起動中の エミュレーター に デバッグビルド（Debug Build） がインストールされます。

ここからは ネイティブコードを含んでいてもデバッグビルドがインストールされていればExpo(Managed Workflow)と同じように

npx expo start

上記コマンド実行後に上の Expo(Managed Workflow)で説明したものと同じようにQRコードで読み取って実機で動作確認、aまたはiを押してエミュレーターで動作確認ができます。
※Windows環境では、iOS向けのデバッグビルドは作成できません。
そのため、Bare WorkflowでiOSアプリを動かすには 一度Macを使って expo run:ios をして、iOS実機にインストールする必要があります。
いったん開発用クライアントが iOS 実機に入ってしまえば、
その後は Windows PCから npx expo start でQRコードを出し、iOS 実機で読み取って動作確認を続けることができます。

以上が Bare Workflowの説明です。

まとめ

  1. Expoで開発をスタート
  2. 可能であれば、Expo環境（JavaScriptオンリー）でアプリを完成させる
  3. ネイティブコードをいじらないとアプリができない。。。
  4. Bare Workflowに移行して、ネイティブコードを追加しながらアプリを仕上げる

最初は手軽に、必要になったら本格的にというかんじです。

参考URL
https://docs.expo.dev/
https://reactnative.dev/docs/environment-setup
https://2024.stateofjs.com/en-US/libraries/front-end-frameworks/

npx expo run:android --variant release
npx expo run:ios --configuration Release

ちなみにリリースビルドをプレビルド後に入れたい場合のコマンド

masa4tmasa4t

EAS Update
EAS UpdateはスタンドアローンサービスでJSの単純な変更をサポートしています。ネイティブレイヤー以外の更新がstoreを返さないで可能です。（WebViewのような機能）

アップデートの種類は
・Channel(ビルドの種類の識別子)
・RunTime (versionアプリのバージョン)
・Platform(ios, android)
で分けることができる。

アプリを公開する時にExpoのサーバーと紐づける設定をする。
(expoのサーバーでビルドしたものを公開しなくても紐づけておくだけでいい。)
・チャンネルの名前
・バージョン
の登録をしておくこと。内部配布用storeリリース用で分けることも可能

eas update --channel [channel-name] --message "[message]"

上記コマンドをするとdistがつくられてそこにJSバンドルができてそれがExpoのサーバーにアップロードされる。そのDistがアップデート対象となり配信さる。
ネイティブコードを変更したものを更新したらクラッシュするから単純なJSを変更したものだけ更新をかけるようにする。
ネイティブを変えたらGooglePlay AppStoreで更新をする

いったんpreview版で更新してみてうまくいってそうなら本番用も更新する感じがよさそうです。
一応ロールバックの仕方

eas update:rollback

https://docs.expo.dev/eas-update/introduction/

便利なので導入したほうがいいと思いました。

末尾に--clear-cacheをつけないと環境変数が読み込まれないことがある。

masa4tmasa4t

料金
EAS BUILD 月30回まで無料（ios android 各15回）
超過した場合の料金

マシンタイプを指定しなけれがデフォルトでmediumになる。

EAS Updateの料金は「2つ」で決まる
月間アクティブユーザー数（MAU）

  1. 月間アクティブユーザー（MAU）とは？
    ・その月に1回でもアップデートを受け取ったユーザー（端末）
    ・1人が何回受け取っても「1回分のカウント」だけ！
    ・アプリをインストールしている端末の数と考えればOK

  2. Global Edge Bandwidth（通信量）とは？
    ・アップデートを配信する時の通信総量
    ・送るたびにどんどんカウントされる

Free / On-demandプラン
→ 毎月1000人までMAU無料
→ 毎月100 GiBまで通信無料

人気アプリではない限りほぼ超えない感じ

https://docs.expo.dev/billing/usage-based-pricing/

masa4tmasa4t

https://docs.expo.dev/accounts/account-types/
権限について組織アカウントと個人アカウントがあります。
ロールで権限を分けられます

ロール: 権限の内容
Owner: すべての操作が可能（プロジェクトの削除・アカウント設定含む）
Admin: メンバー管理・課金設定・APIキー管理など、ほぼ全権限（削除以外）
Developer: プロジェクト作成・ビルド・更新・証明書管理が可能（管理者権限なし）
Viewer: Expo Goでの閲覧のみ可能（変更は一切不可）