サイトアイコン しらかわるーむ

ドラマのちえさん作「歴がちゃ」がAndroidにやってきた|引き継ぎ移植レポート

こんにちは、しらかわるーむの白川秋です。

いつも一緒にアプリを作っているドラマのちえさんが、iOS向けに「歴がちゃ」という日本史カードコレクションアプリを作っていました。それを僕がAndroid版として引き継ぎ、先日Google Playに提出するところまで持っていけました。実装の手を動かしたのは主にClaude(AI)で、僕はファイルを渡して方針を決めて、出てきたものを実機で確認する役回りでした。

今回は「歴がちゃってどんなアプリ?」という紹介と、「引き継ぎって大変じゃないの?」という開発側の話を、両方まとめてお届けします。先に結論を言うと、ちえさんのiOS版があまりに綺麗に作られていたこと、そしてClaudeがその設計を正確に読み取って淡々と差分を積んでくれたこと、この2つが揃ったおかげで、Android移植は拍子抜けするくらい楽でした。

スポンサーリンク

この記事のポイント

  1. 1日10回のガチャで日本史カードを集め、図鑑とクイズで学べるアプリ
  2. ちえさんの引き継ぎ書とコードが優秀で、Android移植は差分を足すだけ
  3. 実装はClaudeに任せ、iOS版の見た目を変えないルールで進めた
\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング

歴がちゃってどんなアプリ?

一言でいうと「ガチャで日本史カードを集めるコレクションアプリ」です。原始時代から現代まで、道具・人物・建物・文化といった日本史の名場面がカードになっています。

ガチャを引く

1日10回までガチャが引けます。カードにはコモン・レア・超レアの3段階のレア度があって、出現率はコモン70%・レア25%・超レア5%。超レアが出たときの演出はちえさんのこだわりポイントで、初めて出たときは思わず声が出ました。

図鑑で眺める

引いたカードは図鑑に記録されます。カード1枚ごとに分かりやすい解説がついているので、パラパラ眺めているだけでも歴史の流れがつかめます。「教科書の太字」がそのままカードになっているイメージです。

毎日の歴史クイズ

1日1回、3択クイズに挑戦できます。正解するとボーナスガチャ。クイズは300問以上あるので、しばらくネタ切れの心配はありません。「今日の1問」を解いてからガチャを引く、というのが毎朝のルーティンになります。

超レアをシェア

引き当てた超レアカードは画像として保存・シェアできます。Xで「出た!」と自慢するための機能です。

追加パック(アプリ内課金)

基本機能はすべて無料。もっと深く遊びたい人向けに、買い切り300円の追加パックが5つあります。

パック内容
鎌倉・室町パックカード20種+クイズ100問
戦国パックカード30種+クイズ60問
江戸パックカード30種+クイズ60問
近代パックカード30種+クイズ60問
難問クイズパック全時代の歯ごたえある難問

和紙と金箔をイメージしたデザインで、カードをめくる感触が気持ちいいアプリです。通信は一切行わず、データは端末内だけに保存されるので、お子さんに渡しても安心です。

引き継ぎのはじまり

ちえさんから届いたのは、引き継ぎ書(Markdown)と、App.tsx(5,349行)、カードデータ、クイズデータ、効果音、アイコンなどのアセット一式でした。

正直、5,000行超えの他人のコードを見た瞬間は「これ何日かかるかな」と身構えました。ところが引き継ぎ書とApp.tsxをまとめてClaudeに渡したら、数分で「フォント指定72箇所はStyleSheetに集中しているので定数1つで一括置換できる」「Platform.OSの分岐はゼロ」「課金はライブラリの推奨どおりなので追加は数行」と現状分析が返ってきて、その不安はすぐに消えました。

引き継ぎ書が「Android側でやること」を全部書いてくれていた

ちえさんの引き継ぎ書は7章構成で、「Androidで必ず引っかかる箇所」が先回りして書かれていました。

特に最後の権限の話は、iOSしか触っていない人が気づける内容ではありません。expo-audioが自動で付けてしまうRECORD_AUDIOなどの権限を、ちえさんはちゃんと「このアプリには不要」と見抜いて書き残してくれていました。これがあるとないとでは審査の通りやすさが全然違います。

コードが「移植前提」で書かれていた

Claudeの分析で一番感心したのは、Platform.OSの分岐がゼロだったことです。

一見「iOSベタ書きじゃないか」と思うかもしれませんが、逆です。中途半端にAndroid対応が混ざっていないおかげで、「どこを変えるべきか」が完全に僕の判断だけで決められました。中途半端な分岐があると、それが正しいのか間違っているのかを一つひとつ検証しないといけないので、実はゼロのほうがずっと楽なんです。

さらに、フォント指定は72箇所ありましたが、すべてStyleSheetの中に集約されていました。つまり先頭に定数を1つ置いて一括置換すれば終わり。課金処理も復元処理も、ライブラリの推奨パターンどおりに書かれていたので、Android側で追加すべきコードはほんの数行でした。

「他人のコードを引き継ぐ」というより「設計図どおりに組み立てる」感覚に近かったです。そして組み立て役はClaudeだったので、僕の仕事は「どう組み立てるか」を決めることだけでした。

Android版で実際にやったこと

方針は最初から一つだけ決めていました。

iOS版の見た目は一切変えない。すべての変更は「Androidならこの値、iOSなら元の値」という形で書く。

ちえさんが積み上げたデザインを勝手に崩さないための、僕とClaudeへのルールです。Claudeにはこのルールを最初に伝えて、Androidだけ違う値にするときも必ずiOS側の元の値を明示して書いてもらいました。

やったことを並べるとこんな感じです。

  1. app.json — android.package、versionCode、アダプティブアイコン(藍色)、不要権限の除去
  2. フォント — Noto Serif JPをバンドルして、ヒラギノ明朝と切り替える定数を1つ用意
  3. 戻るボタン — モーダル3つ+クイズ中・ガチャ演出中の画面状態を戻すuseEffectを1つ追加
  4. アプリ内課金 — expo-iapのAndroid対応。保留中の購入状態のガードを追加
  5. シェア機能 — Androidでは画像と文字を1タップで両方渡せないライブラリの制約があったので、「本文をクリップボードにコピー→画像を共有シートへ」という形に落ち着けた
  6. セーフエリア — SafeAreaViewをuseSafeAreaInsetsに置き換え(Androidのナビゲーションバー対策)
  7. レイアウト微調整 — フォントの行の高さがiOSと違うので、余白やボタン位置をAndroidだけ数ピクセル調整

一番手間がかかったのは、意外にも7番のレイアウト調整です。同じ数値を指定しても、iOSとAndroidでフォントの行の高さが違うので、見た目が微妙にずれます。「paddingを変えても見た目が変わらない」現象の正体がこれで、Claudeが原因を突き止めてくれてからは、僕が実機を見て「ここ2ピクセル上」と言い、Claudeが直す、の往復で地味に潰していきました。正直この往復で意図が伝わらずイラッとした場面もありましたが、最終的には全部きれいに収まりました。

シェア機能は3つの方式をClaudeと一緒に試して、どれもライブラリのバグかOSの仕様で潰れたので、上の形が現実解です。将来ライブラリ側が直れば1タップに戻せます。

ビルドはクラウドを使わずローカルで

EASのクラウドビルドは使わず、ローカルでprebuild→Gradleでビルドする流れにしました。keystoreの管理やversionCodeの更新も自分の手元で完結するので、細かい調整を繰り返す今回のようなケースには向いています。

引き継ぎがうまくいった理由

振り返ると、楽だった理由は4つに集約されます。

4つ目は正直、寄るところがでかいです。綺麗なコードと明確な引き継ぎ書があっても、それを読んで理解して手を動かす時間は本来かかります。そこをClaudeが引き受けてくれたので、僕は「判断」と「実機確認」に集中できました。ちえさんの丁寧な仕事と、Claudeの頑張りの合わせ技です。

とくに1つ目は、自分が誰かに引き継ぐときにも真似したいポイントです。「今どうなっているか」より「次に何をすべきか」を書くほうが、受け取る側は圧倒的に助かります。

まとめ

ちえさん、素晴らしいベースをありがとうございました。そしてClaude、細かい注文に付き合ってくれてありがとう。Android版はGoogle Playに提出済みなので、公開され次第このブログとXでお知らせします。ぜひ日本史カードをコンプしてみてください!

▶ iOS版はちえさんのApp Storeからどうぞ
▶ ご意見・不具合報告はXのDMまたはニコ生でお気軽にどうぞ

\楽天ポイント4倍セール!/
楽天市場
\ポイント5%還元!/
Yahooショッピング
モバイルバージョンを終了