高さの異なる画像を2列で美しく並べる—Rork の Expo アプリで壁紙ギャラリーを段組みにする
縦横比のばらつく画像を numColumns では美しく並べられない理由から、列の高さを見て振り分ける段組みアルゴリズム、FlashList の masonry での仮想化、依存を増やさない実装まで、壁紙ギャラリーを実コードで組みます。
アイコンのバッジが「3」のまま消えない — Expoアプリのバッジ数をSource of Truthで作り直す
Expoアプリのアイコンバッジが実際の未読と食い違い、消えなくなる原因を突き止め、バッジ数を状態から再計算して同期するSource of Truth設計を、動くコードと実運用の落とし穴つきで整理します。
クラウド同期フォルダでアプリ開発するとビルドが壊れる — 生成物を同期から外して根治した話
Dropbox や iCloud Drive に置いたプロジェクトで、ある朝ビルドが通らなくなりました。原因は同期がビルド生成物に割り込んで作る競合コピー。node_modules や Pods を同期対象から外して再発を止めるまでの手順を、個人開発の実体験としてまとめます。
ワンタイムコードの入力欄をExpoで作る — SMS自動入力とセグメント表示を両立させる
6桁の確認コードを入れる画面は、見た目こそ単純ですが、SMSの自動入力・貼り付け・1文字ずつの削除まで含めると意外と作り込みが必要です。iOSとAndroidの自動入力を最初に押さえ、単一のTextInputで崩れにくいセグメント表示を組む実装をまとめました。
「続きを読む」を出すべきか、テキストの実測で決める — Rork(Expo)の折りたたみ表示設計
商品説明やレビュー本文を3行で畳み「続きを読む」を出す実装で、短い文にまでトグルが付いてしまう問題を解決します。onTextLayout で実際の行数を測り、はみ出す時だけトグルを出す設計を、iOS と Android の差、展開アニメーション、文字サイズ拡大への配慮まで動くコードでまとめます。
ユーザー投稿画像を表示前に端末内で判定する — SensitiveContentAnalysis 実装メモ
AI 生成画像やユーザー投稿を扱うアプリで、不適切な画像を表示前に端末内で弾くための実装メモです。Apple の SensitiveContentAnalysis フレームワークを Swift で呼び、Rork Max が生成したネイティブコードや Expo のネイティブモジュールへ組み込むところまでを、実際にハマった点を添えて解説します。
Rork アプリにホーム画面長押しのクイックアクションを足す — 動的項目とコールド起動の取りこぼしを防ぐ
アイコン長押しで出るクイックアクションを Rork(Expo)アプリに実装する設計です。静的・動的項目の使い分け、iOS と Android の差、そしてコールド起動でアクションがルーター準備前に届いて取りこぼす問題を、保留と再生で防ぐ実装手順までまとめます。
Rork アプリでファイルを「その場で見せる」— Quick Look をアプリから安全に呼ぶ設計
PDF や画像、Office 文書をアプリの外に出さずにその場で見せる、Quick Look(QLPreviewController)をRork(Expo)から呼ぶ設計です。リモートファイルの事前ダウンロード、ローカル URL の条件、Android の FileProvider 代替、共有ボタンの扱いまで実装手順でまとめます。
Rork のテキスト入力にキーボード上のツールバーを足す — iOS の InputAccessoryView と Android の自前バーを1つの部品に揃える
Rork が生成した React Native アプリのテキスト入力に、キーボードの上へ固定する「完了」やクイック挿入ボタンのツールバーを足す方法です。iOS の InputAccessoryView と、Android で自前に組むバーを、1つの再利用コンポーネントへ畳む実装を実コードで残します。
クリップボード連携のUXを整える — iOSのペースト許可バナーを増やさずに「コピー」と「貼り付け」を成立させる
expo-clipboard で「コピー」と「貼り付け」を実装するとき、iOS のペースト許可バナーが頻発して使い勝手を損なうことがあります。バナーの発生条件を押さえ、hasStringAsync で内容を読まずにボタンを出し分ける設計をまとめました。
写真の「選択した項目だけ許可」に正しく向き合う設計
iOS の写真ライブラリ限定アクセス(選択した項目だけ許可)に Rork(Expo)アプリで正しく対応します。フルアクセス・限定・拒否の3状態の判定、選んだ写真だけを扱う前提の画面設計、追加選択を促す導線までを実装コードとともに整理します。
従量制回線と低データモードを尊重して先読みを止める通信設計
画像中心の Rork(Expo)アプリで、従量制回線や低データモードのときに先読みを抑える通信設計を扱います。NetInfo の details から回線の性質を読み、画質を落とし、プリフェッチを遅延させる適応ロジックを実装コードとともに整理します。