Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選
Search
Ichiki
October 04, 2024
Technology
0
130
React Native 製アプリで Android 版をリリースする際にハマったポイント 2 選
React Native Meetup #18 ft. CureApp 登壇資料
https://react-native-meetup.connpass.com/event/329486/
Ichiki
October 04, 2024
Tweet
Share
More Decks by Ichiki
See All by Ichiki
一度 Expo の採用を断念したけど、 再度 Expo の導入を検討している話
ichiki1023
1
560
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
290
Other Decks in Technology
See All in Technology
自動テストのコストと向き合ってみた
qa
0
210
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
230
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
100
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
230
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
160
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
120
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
570
Developer Advocate / Community Managerなるには?
tsho
0
110
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
200
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
160
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
1.1k
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
200
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Why Our Code Smells
bkeepers
PRO
339
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Being A Developer After 40
akosma
91
590k
Faster Mobile Websites
deanohume
310
31k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
The Invisible Side of Design
smashingmag
301
51k
For a Future-Friendly Web
brad_frost
180
9.9k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Gamification - CAS2011
davidbonilla
81
5.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
React Native 製アプリで Android 版をリリースする際 にハマったポイント 2 選 Ichiki Sato
(@ichiki1023)
自己紹介 Ichiki Sato (@ichiki1023) 株式会社マイベスト (2024 年 4 月から! )
現在育休中の 2 児の父 React Native は 3 年のブランクを経て 4 月から 奮闘中 経験としては iOS/Web のみで Android は未経験
マイベスト - 商品比較サービス
今日のおはなし iOS Only だった React Native 製 のアプリで Android 版をリリースするまでに特にハマ
ったポイントが 2 つあったのでそのお話をさせてください!
ハマったポイント 1. テキストの高さがズレる問題 2. 画像周りのパーミッション問題
はじめに ビルドを通すために色々設定した やったことの例 環境変数の設定 モジュールのアップデート React Native Firebase の Android
対応
思っていたよりもすぐに起動できた
ただよく見ると。 。
None
なんかズレてる。 。
ハマったポイント 1. テキストの高さがズレる問題
分かったこと Android のデフォルトのフォントは日本語だと NotoSansCJKJP 上記だと lineHeight が大きめに勝手に設定されている (っぽい ) 調査した感じだとおおよそ
10~15% フォントそのものに includeFontPadding も効いてなさそう フォント上部の方が余白が大きいので下にズレて見える デフォルトではなくフォントをダウンロードして NotoSansJP にしても変わらなか った 参考 : Android アプリで Line Height を 設定するときに注意したいこと 1. テキストの高さがズレる問題
対策 Android のみ lineHeight を 1.1 で割り縮小することでデフォルトで加わっている余 分差をなくす (1.1 ~
1.15 を比較 & 計算した結果最適な値を設定 ) マイベストでは基本的に lineHeight まで細かくデザインシステムで管理しているため、 縮小することで本来の期待するデザインに力技で合わせにいく 1. テキストの高さがズレる問題
改善後 1. テキストの高さがズレる問題
ハマったポイント 2. 画像周りのパーミッション問題
(iOS での経験上 ) パーミッションをしっかりと定義しておかないと ストアの審査で Reject を受ける可能性が高いので、追加しておく 2. 画像周りのパーミッション問題
画像周りの権限追加 マイベストのアプリで取得していた主な権限 写真 (プロフィール写真用 ) カメラ (プロフィール写真用 ) android/app/src/main/AndroidManifest.xml に画像周りで必要な権限を追加しておく
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> 2. 画像周りのパーミッション問題
ただ、使用しているライブラリにこんな一文が ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1
権限不要。 。 。? プロフィール画像の写真選択 & 撮影をするのに権限不要 ? react-native-image-picker を使用していたが、 Android
の場合権限は不要なことが 判明。 ref: https://github.com/react-native-image-picker/react-native-image-picker? tab=readme-ov-file#android-1 2. 画像周りのパーミッション問題
なぜ? 2. 画像周りのパーミッション問題
権限が不要な理由の深堀り ① react-native-image-picker の内部実装を見てみる if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if
(isSingleSelect && (isPhoto || isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } https://github.com/react-native-image-picker/react-native-image- picker/.../ImagePickerModuleImpl.java#L128C1-L137C10 2. 画像周りのパーミッション問題
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.TIRAMISU) { if (isSingleSelect && (isPhoto ||
isVideo)) { libraryIntent = new Intent(Intent.ACTION_PICK); } else { libraryIntent = new Intent(Intent.ACTION_GET_CONTENT); libraryIntent.addCategory(Intent.CATEGORY_OPENABLE); } } else { libraryIntent = new Intent(MediaStore.ACTION_PICK_IMAGES); } Intent というものが使われていて、バージョンと画像の選択数によって使用するアクシ ョンを分けているみたい。
権限が不要な理由の深堀り ② 先ほどのコードを訳すとこんな感じ 13 未満かつ単一の選択 : Intent.ACTION_PICK を使用する 13 未満かつ複数の選択
: Intent.ACTION_GET_CONTENT を使用する 13 以降 : MediaStore.ACTION_PICK_IMAGES (PhotoPicker)を使用する 2. 画像周りのパーミッション問題
Intent とは? https://developer.android.com/guide/components/intents-filters?hl=ja Intent は、アクションのリクエストに使用できるメッセージ オブジェクト 別のア プリ コンポーネントから。 2.
画像周りのパーミッション問題
。 。 。 。 。 。 。 2. 画像周りのパーミッション問題
色々調べた結果 アクションを指定すると、それを実行できる端末上のアプリが起動されるものらし い。 2. 画像周りのパーミッション問題
つまり react-native-image-picker では Intent が使用されている Intent はアクション(動作)を指定して、それを実行できる端末上のアプリを起動 する仕組み Intent を使用して画像の選択を
PhotoPicker 含めて外部アプリに任せると個別のア プリ側では権限取得は不要になる ということらしい 2. 画像周りのパーミッション問題
なるほど! 2. 画像周りのパーミッション問題
不必要なパーミッションは削除しておく 不要なことが判明したので追加していた権限を AndroidManifest.xml から削除する 2. 画像周りのパーミッション問題
その後無事 2024/09/25 に 1st リリース公開完了 権限周りも問題なかった!
まとめ iOS 版でアプリケーションとしての形はできていたので、コードを直接修正するの はごくわずかで済んだ (React Native 最高 ) ただし Android
の前提知識はかなり必要なのでひたすらキャッチアップをしていく 必要があってそれが大変
ご清聴ありがとうございました