個人ブログキュレーション開発進捗：技術編

以下で書いた通り、モバイルアプリを作っています。

アプリ名は、"こぶりー" と仮の名前を決めました。

現時点での開発進捗をまとめようと思います。

成果物

スクリーンショットは載せませんが、どこまで作ったかを書いていきます。

• Android アプリのみ対象
• 記事を読む、個人ブログを探す の2ページ
  • "記事を読む"は、新着記事の無限スクロール読み（WebView）
  • "個人ブログを探す"は、個人ブログ一覧と詳細
• 個人ブログのデータ取得バッチ
  • 差分更新 と 全件更新
• ロゴ制作
  • Adobe Express を使ってみた

上記開発をする前に、実現可能かどうか MVP として開発済みです。
以下については実現可能ですが、詳細は未定の状態です。

• 個人ブログの購読と通知

また、MVPでアプリ体験すると "記事を読む" でダラダラと記事を読み沼るのが一番でした。
なので、そこを中心としてそれ以外の余分なものを削っていこうと思ってます。

技術

React Native と Expo SDK 55 をベースとして開発しています。
技術選定は、 Expo Docs 推奨を基準として悩まずに進めます。
特に、MCPやSkillを公開されているライブラリを優先しているため、それらへのキャッチアップを楽にします。

また、npm script で機械的にチェックするコマンド（ci:fix）を用意しています。
このコマンドは、pre commit 時に走る様にしています。
コマンド内容は、以下になります。

1. 直列で各コマンドを実行して、失敗したらNG
2. タスク
   • knip で未使用コードのチェック
   • i18n ファイル（ja.json）の未使用箇所のチェック
   • expo-doctor の実行
   • prettier のフォーマット
   • typecheck の型チェック
   • lint の実行
     • eslint-config-expo
     • eslint-plugin-i18next
     • eslint-plugin-perfectionist
     • eslint-plugin-storybook
   • test の実行

私は主に、Codex の力を借りて実装しています。
Codex でバリバリ実装したものをレビューする際に 指摘した内容をできる限り仕組み化を徹している と上記の構成となりました。
例えば、以下の考えで入れています。

• knip があれば、試行錯誤の未参照コードを消せる
• i18n があれば、ユーザへ見せるテキストを一元管理でき、表記揺れをなくせる
• expo-doctor があれば、expo 関連のNGパターンを検知できる
• prettier, typecheck は言わずもがな
• lint があれば、適宜指摘した内容を機械的に治せる

他にも、Codemod 等で1ファイル内の構成を統制させたいなども検討しましたが、断念しました。
その代わり、 AGENTS.md にルールを随時追記していきます。
フォルダ構成はああだ、命名はこうだ、テストはこうだ、みたいな雑なテキストを残しておきます。
Codex はこれらの情報を汲み取ってくれるので、意外とうまく行っています。

テスト

またこれまでは、個人開発ではとにかくテストコードを書かせるように過去していたのですが、
AI に書かせるテストはただの プロダクトコードの写し でしかなく（指示が粗いのが悪い）良さがありませんでした。
テストを直す時間だけ増えるのですが、ただそれだけでした。
（仕事の場合はちゃんと見るのですが、個人だと手を抜きがち）
今回、データ取得のバッチ処理は処理が複雑でかつ実行時間が長いため、 そこだけテストコードを徹底して書く様にしました。
手動テストがどうしても難しいところだからです。

データ取得

アプリの肝は、データです。
個人ブログデータは、RSSフィードを元に取得しています。
ざっと数千の個人ブログのRSSフィードを用意していて、ブログに紐づく記事データもあります。
さらに、個人ブログのアイコンと記事のサムネイルも取得しています。
そうすると、愚直に直列に対応すると 全件走査に2時間以上かかりました。
それでも構わないのですが、できれば新鮮な状態で記事の通知が欲しいので、
差分更新する方法を選びました。
差分なので、全件に比べると極端に早く10分程度で済みます。
ただ今は開発中でバグっている可能性が高いため、全件更新する方法も残しています。

その他に、微調整するために並列化する方法を採用したのですが、
コードの複雑さが増すだけで速度は数%ぐらいしか早くならないので、
コスパ悪いため却下しました。

自作しない

XMLのパースや、データ取得スクリプトのコマンドライン制御など、
小さくやるなら自作しちゃうのが手っ取り早いのですが、
たぶんうまくいかないことが多いです。
そのため、汎用性が高い機能は ライブラリを調べて取り込む様にしています。
念の為、成熟度の確認や自動スクリプト無効化などのものは入れています。

UI

当初は、StyleSheet で書こうかなと思ったのですが、直接のトークン指定（色やスペースなど）が困りました。
デザイントークンが整っている、tailwind っぽい Nativewind を使ってUI開発していました。
データ増減などでUIを逐次細かく確認する作業を効率化するためには、Storybook は欠かせません。
積極的にUI開発では、Storybook上で見ながら実装しました。
ただゼロからコンポーネント群を準備するのは骨が折れるので、HeroUIを入れておきました。
入れておいてなんですが、使っているコンポーネントがボタンとチップだけなので、外すかもしれません。

終わりに

毎日、開発しているアプリをプレビュー版として使っています。
もう既にどっぷりと沼っていて、個人ブログって個性があって面白いし、参考になることもあるし、何かへのﾖｲｼｮｯもないし、
めちゃ気に入っています。

-

読者になる

|

シェアする

|

ブログを応援する

この記事がよかったら、お布施という形で応援してもらえるとうれしいです。

おふせぼたん

← ブログ一覧へ