ExpoとReact Nativeで作成したアプリのAPKを作成する

作成中のマストドンクライアントアプリの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 プロジェクトを構成するためにコマンドを実行する。...

投稿日 · 2024-12-28 · 更新日 · 2024-12-28 · 4 分 · nove-b

React NativeでMastodon認証を実装した

Mastodonnのクラインアント用ネイティブアプリをReact NativeとExpoで作成している。 バージョンは下記の通り。 "expo": "~52.0.11", "react-native": "0.76.3", 実装自体はできたんだけれど、正直いろいろと理解が足りていないので、整理してみる。 インストールしたPackage "expo-auth-session": "^6.0.1", "expo-secure-store": "^14.0.0" expo-auth-session ブラウザベースの認証を処理するための API 最初は認証時にWebViewを開いて認証に成功したらリダイレクトURIを用いてアプリ画面に戻すという仕組みを実装しようとしたんだけれど、そもそもリダイレクトURIがわからない。Expoの開発用URLを指定してみたけど、 java.io.IOException: Remote update request not successful という謎のエラーが出てアプリ側に戻らない。 そしてタスク管理でアプリに戻ると認証が成功しているという謎の現象が発生した。 色々悩んでいたけどexpo-auth-session を使用したらリダイレクトURIの作成をいい感じにやってくれた。 Expo AuthSessionにはexpo-crypto と一緒にインストールする必要があるって書いてあったけど、インストールしていない。今のところ問題はないので気にしないでおく。 expo-secure-store Expo SecureStore Expo用のローカルストレージ。 // 保存 await SecureStore.setItemAsync("key", value); // 参照 await SecureStore.getItemAsync("key"); // 削除 await SecureStore.deleteItemAsync("kye"); で、一通りの作業ができる。 認証に用いたMastodon API ${instanceUrl}/api/v1/apps クライアント アプリケーションを登録 ${instanceUrl}/oauth/authorize? OAuth トークンを生成および管理 ${instanceUrl}/oauth/token API 呼び出し中に使用するアクセス トークンを取得 認証までのフロー アプリケーションを登録 クライアント アプリケーションを登録APIを叩く。 Bodyにclient_name、redirect_uris、scopes、websiteが必要になる。 client_nameはアプリ名を指定し、redirect_urisはexpo-auth-sessionを使用し作成する。 redirect_uris: AuthSession.makeRedirectUri({ native: "{APPNAME}://redirect", }), scopesは権限を指定し、websiteはアプリのウェブサイトをインプットする。...

投稿日 · 2024-12-20 · 更新日 · 2024-12-20 · 1 分 · nove-b

Expoアプリの+not-found.tsxファイルの正体と「+」の意味

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

投稿日 · 2024-12-07 · 更新日 · 2024-12-07 · 1 分 · nove-b

2024年12月時点でのReact Native開発環境の構築手順

毎回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!...

投稿日 · 2024-12-01 · 更新日 · 2024-12-01 · 3 分 · nove-b

【2024年11月】2024年の目標はきっと無理

11月に読んだ本 読書はそれなにできた気がする。 読んだ本は下記の通り。 新装版 タイム・リープ〈上〉 あしたはきのう (メディアワークス文庫) 新装版 タイム・リープ〈下〉 あしたはきのう (メディアワークス文庫) タイムリープものの金字塔らしく、新装版が出るのも納得できた。 オカシナ記念病院 (角川文庫) 現代医療をブラックユーモアで切った作品。主張しなく、最後も意外な終わり方でよかった。 聖なる怠け者の冒険 (朝日文庫) 再読、ほとんど忘れてた。主人公がほとんどぐうたらしている稀有な小説。 君が夏を走らせる(新潮文庫) これは泣く。子どもできてから子ども可愛くて仕方ない。 ある男 絶賛読んでいる途中で面白い。 キンドルアンリミテッドが980円なので相当得していることになる。サブスクって損することが多い気がするけどアンリミテッドは有効活用できている。最近読みたいと思える本がアンリミテッドになってくれて嬉しい。 保活Done! さて、ついに保活が終了した。 入れるか入れないかはさておき、とりあえず申し込みはした。申し込み後に申し込み状況を電話で教えてくれる制度があり、活用してみた結果、2人(たぶん)の募集に対して4人の応募があったらしい。うちは双子なので厳しい戦いになる。さらに、聞いた日の消印有効なのでさらに増えている可能性もある。 落ちたらたぶん、第2希望はさらに厳しそうだったので、第3志望の幼稚園になる。 そうするとお金がきつい。幼稚園は高い。教材費とかなんとか色々とかさむ。 とは言えもうできることはないので待つしかない。悶々と1月中旬まで待ち続ける。 資料とかいろいろ読み込み、保育課に何度も電話してくれた妻には感謝しかない。 秋の終わりに そんな事をしているうちに秋が終わった。葉が色づいて、車が凍るようになった。今年の秋は一瞬だった。意識しないと秋に気が付かないくらい暖かく、急に寒くなった。 せっかくなので紅葉が綺麗な昭和記念公園に行った。子どもの成長は凄まじく、ボールを蹴って遊んでたし、ふわふわドームでジャンプをしていた。自分はどんどん衰えているのに、子どもはどんどん成長していく。その事実がうれしくもあり、少し怖い。 冬の訪れ 冬の訪れとともにクリスマスがやってくる。昨年、てんやわんやして買ったクリスマスツリーを出した。毎年少しづつオーナメントを買っていく。昨年寒そうだったツリーもだいぶ賑やかになった。今年は子どもたちが喧嘩しながら飾り付けをしてくれた。何度も言うようだけど、子どもの成長はすごい。昨年買いそびれた念願のツリートップを飾り付け、あとはクリスマスを待つのみになった。 クリスマスが来ると正月がくる。そうすると当然、今年が終わり来年になる。それは避けられない事実でどんなに首を振っても強制的に来年になる。 散々な結果に終わりそうな2024年の目標 さて、じゃ今年の目標はどうだったというと、4件たてた目標のうち現時点で1件しか達成できていない。はたして、取り組みが悪いのか、あるいは目標の立て方が悪いのか。 そんななか、残り3つのうち1つであるネイティブアプリをリリースする、という目標に遅ればせながら着手した。 mastodonのクライアントをreact nativeで作成することにする。作りたいものはすでに頭の中にあるので、あとはそれを形にしていく作業になる。 ただ形にする時間があまりにも少ない。時間が全く足りない。みんなが勉強したり、何かを作っている事実に焦りを感じる。 そこで、朝早起きをして勉強をすることにした。ただ冬の早起きは誰もが知るように辛い。実際11月は起きれない日が続いたし、何回か遅刻しかけた。そんな中、sleep as androidというアプリにであった。 これが自分ニーズとぴったりとハマった。 目覚ましアプリに求めていたのは スマートウォッチのバイブが活用できる スマホ自体は音が鳴らない 起きれるまで止まらない そしてこれのニーズに答えてくれたのがsleep as android。 これの設定でCAPTCHAをQRコードにして、スヌーズをオフにすると、朝起きてスマホでQRコードを読み取るまでスマートウォッチが振動し続ける。 QRコードを洗面室の鏡の裏に貼り付けたので、寝室を出なくちゃいけなく、そのまま顔を洗い、目覚めるといった非人間的行動を強制される。 最初は3問の計算問題を解かないと止まらない四則演算にしていたが、計算を終え満足して二度寝することが多発したので、プライドを捨ててQRコードにした。結果、起きれるようになった。 たぶん、これが続けば朝活できるようになり、少しは時間を使えるようになる気がする。 そこで少しでも開発できればいいなって明るい12月を思い描いている。

投稿日 · 2024-11-27 · 更新日 · 2024-11-27 · 1 分 · nove-b