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
120
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
470
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
250
Other Decks in Technology
See All in Technology
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
150
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
GitHub Copilot の概要
tomokusaba
1
130
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
210
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
340
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
1.5k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
生成AIでwebアプリケーションを作ってみた
tajimon
2
150
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Speed Design
sergeychernyshev
32
1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to train your dragon (web standard)
notwaldorf
93
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
GraphQLとの向き合い方2022年版
quramy
48
14k
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
の前提知識はかなり必要なのでひたすらキャッチアップをしていく 必要があってそれが大変
ご清聴ありがとうございました