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
93
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
230
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
170
Other Decks in Technology
See All in Technology
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.7k
プロダクトエンジニア構想を立ち上げ、プロダクト志向な組織への成長を続けている話 / grow into a product-oriented organization
hiro_torii
1
290
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
180
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
130
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
510
短縮URLをお手軽に導入しよう
nakasho
0
110
Culture Deck
optfit
0
470
データマネジメントのトレードオフに立ち向かう
ikkimiyazaki
6
1.2k
RSNA2024振り返り
nanachi
0
620
Active Directory攻防
cryptopeg
PRO
7
4.4k
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Automating Front-end Workflow
addyosmani
1368
200k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Faster Mobile Websites
deanohume
306
31k
Music & Morning Musume
bryan
46
6.3k
Docker and Python
trallard
44
3.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The Cult of Friendly URLs
andyhume
78
6.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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
の前提知識はかなり必要なのでひたすらキャッチアップをしていく 必要があってそれが大変
ご清聴ありがとうございました