アプリ

作成中のマストドンクライアントアプリの1つの機能が完成したので実機で活用したいという思いが生まれ、apkを作成することにした。 最初のビルドを作成するを参考にして進めていき、無事にapkを作成することに成功した。 EAS CLIをインストール ドキュメントが充実しているので、問題なくできるだろうと踏んでいたのだが、最初で壁にぶつかった。 npm install -g eas-cli というコマンドでEAS CLIをインストールするのだが、なぜうまくインストールされない。 なんかVoltaの権限でうまく入らなかったので、 "C:\\Program Files\\Volta\\npm.exe" install -g eas-cli を管理者権限で実行したら成功した。 C:\Windows\System32>eas --version eas-cli/14.2.0 win32-x64 node-v20.15.0 npm install -g eas-cli npm install -g eas-cliではシステムのPATHにあるデフォルトのnpmを使うけど、"C:\\Program Files\\Volta\\npm.exe" install -g eas-cliはVoltaで管理しているnpmを使用するという違いがあるらしい。 ログインする PS C:\dev\appname> eas login Log in to EAS with email or username (exit and run eas login --help to see other login options) √ Email or username ... email √ Password ... ******** Logged in プロジェクトを構成する AS Build 用に Android または iOS プロジェクトを構成するためにコマンドを実行する。...

Expoでreact nativeのアプリを作成する時、インストール時のディレクトリ構成で+not-found.tsxとかいう謎のファイルがあった。たぶんというか確実に404ページではあるんだろうけれど、+が付いている。 Expoアプリのファイルにある「+」の意味 Not found routesのように公式には、 Expo Router は、404 のルートを処理するために使用される特別なファイル+not-found.tsxを提供します。このルート ファイルは、ネストされたレベルからのすべての一致しないルートと一致します。 一致しないルートとは、アプリのルーティング構成で定義されていないURLやパスにユーザーがアクセスした場合、そのアクセスに対応するページが見つからない状態のことを言うらしい。 つまり+は404ページのためにあるようなものと言っても過言じゃない？ 過言かもしれないけれど、今はその理解で満足することにする。

毎回React Nativeの環境構築に苦労するので、2024年現時点でしっくりした環境構築の方法を残しておく。 立ち上げるアプリの環境 "expo": "~52.0.11", "react-native": "0.76.3", "eslint": "^8.57.0", "eslint-config-expo": "~8.0.1", Expoでアプリを立ち上げる npx create-expo-app@latest でプロジェクトを作成すると、 Creating an Expo project using the default template. To choose from all available templates pass in the --template arg: $ npx create-expo-app --template To choose from all available examples pass in the --example arg: $ npx create-expo-app --example √ What is your app named? ... my-app ✔ Downloaded and extracted project files. のようにデフォルトで作成される。 しばらくすると ✅ Your project is ready!...

過去にReact Nativeの環境構築はしたことがあるが(react native でアプリを作る環境構築をやってみるよ⚡)、それから随分と経つので、再度0からやってみる。 Expo Goの利用 モバイル開発が初めての場合はExpo Goの仕様が推奨されているので、それにならうことにする。 必要なのは、最新バージョンのNode.jsとスマホまたはエミュレータ。 React Native CLI という環境もあるが、Xcode またはAndroid Studioになるとのこと。 また初めてであれば環境構築に1時間を要することになる。 ということで、迷うことなくExpo Goを採用した。 開発サーバーの起動まではとてもシンプルで下記コマンドを実行する。 npx create-expo-app AwesomeProject cd AwesomeProject npx expo start 既存ディレクトリへの展開 ただ今回はリポジトリ作成済みでディレクトリが存在していたので、 npx create-expo-app $(pwd) 上記コマンドで現ディレクトリにAppを展開した。 そのうえで開発環境PCとエミュレータスマホを同一のWi-Fiに接続し、 npx expo start 上記コマンドで開発サーバーを立ち上げた。 エミュレータスマホでApp.jsに書かれた、Open up App.js to start working on your app!が表示されれば、立ち上げが成功している。 Hello World ! 次に、 <Text>Open up App.js to start working on your app!</Text> を <Text>Hello World!</Text> に変更すれば、当然、Hello World!が表示される。 これでReact Nativeでスマホを開発するスタート地点に立った。

前回は環境構築したので、今回のゴールは簡単なアプリっぽいものを立ち上げるまでとする⚔️ sampleProjectという名前のサンプルプロジェクトを作成するために下記コマンドを叩く。 と、沢山の選択肢が示される。 $ expo init sampleProject ? Choose a template: » - Use arrow-keys. Return to submit. ----- Managed workflow ----- // Expo のサポート下で開発できる（簡単） blank a minimal app as clean as an empty canvas // １番シンプルな状態で blank (TypeScript) same as blank but with TypeScript configuration // １ページからスタート > tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript // 複数の画面遷移ができる状態に ----- Bare workflow ----- // Expo なしでの開発に近く、カスタマイズ性は上がる（難しい） minimal bare and minimal, just the essentials to get you started 今回は勉強なので、１番しっかりしてそうな「複数の画面遷移ができる状態に」を選択。...