Webアプリを、全プラットフォームで配信しました。
Webを起点に、iOS、Android、Windows、Mac。
あれこれ試行錯誤していたら、2年半経っていました。
なにを作った?
Webアプリをたくさん作り、見込みがありそうなものをスマホ・デスクトップと、別のプラットフォームに移植していきました。
作ったものと実績
- Webサイト(2つ): 1,744,395 PV
- iOSアプリ(6つ): 4990 DL
- Androidアプリ(5つ): 221 DL
数字は2年半の累計のPV(ページビュー)とDL(ダウンロード)です。他にWindowsアプリとMacアプリも1つづつ作りました。
おまけで便利ツールを OSSプロジェクト として 3つ 切り出しました。
作ったアプリとOSSは記事の中で詳しく紹介していきます。
3700コミット
気づいたら、2年半で3,700回以上コミットしていました。
プライベートなリポジトリなので、もちろんコミットの粒度は適当です。1ファイルしか更新してないようなコミットも沢山あります。
それでも、沢山試行錯誤してきた証にはなると思っています。
知見をまとめた
2年半経ってノウハウが大分貯まってきたので、まとめることにしました。
以下、目次です。とても長いです。興味のあるところから読んでもらって大丈夫です。
目次
2年半で作ったもの
作ったアプリ、OSSプロジェクトを紹介していきます。
ポモドーロツリー
このアプリはタスク管理テクニックのポモドーロテクニックとTODOアプリを合体させたアプリです。
Web、スマホ、デスクトップ全てのプラットフォームでリリースしています。
ひらめき開発
ツールアプリを沢山配信しているサイトです。その中で見込みのありそうなものをスマホ・デスクトップに移植するパターンで開発していきました。そうすると、Webページから自然な形でストアページに誘導できます。
元々は当時、興味のあった心理学(ひらめき)と、プログラミング(開発)のツールを配信するサイトでした。
今思うと小っ恥ずかしいネーミングです。笑 しかも心理学のツールは全く伸びなかったので全部削除してしまいました。
月間のPVはピーク時で8万PVくらいでした。
スマホアプリ
上で紹介したひらめき開発で作ったWebアプリの中で数字の良かったものを、スマホアプリに移植しました。
クロスプラットフォームで開発するために、フレームワークはCapacitorを採用しました。そうすることでiOS、Android両対応でリリースしています。
OSSプロジェクト
開発していく中で作った便利ツールや共通化できるコードはOSSプロジェクトとして切り出していきました。
- ESLint Plugin Pattern Rules: ESLint のプラグインです。禁止ワードと必須ワードを正規表現で設定できる 🌐 💻
- Hono Firebase Functions: Firebase Functions の中で Hono を使うためのアダプタ 💻
- Vanilla Vue UI: Vue + Tailwind の UI ライブラリ 🌐 💻
- JapanJS: 日本に関連する処理をツール化して詰め合わせたライブラリ 💻
詳しくはこちらの記事に書きました。
アーキテクチャ
アプリをたくさん作るために、アプリを柔軟に開発・配信できる基盤をゼロから作りました。
以下はメイン部分の大まかな構成図です。
Vueコンポーネントを使い倒す戦略
基本的にVueでアプリケーションを作って使い倒す戦略です。
採用したフレームワーク
- Web: Nuxt
- スマホ: Capacitor
- デスクトップ: Electron
Capacitor、ElectronもWebViewを使って描画するフレームワークなので、Vueのコンポーネントを変更することなく動かすことができました。
ロジック部分はTypeScriptで書いています。
Reactでも同じことができるはず
私は仕事でVueやNuxtをよく使うのでVueを使いましたが、Reactでも同じことができるはずです。
CapacitorもElectronもReactに対応しています。
コードの共通化
GitHub Packagesでプライベートコードの共通化
公開したくないけど、共通化したいコードはGitHub Packagesから配信しています。npmでプライベートパッケージを配信しようとすると課金する必要があります。一方、GitHub Packagesは無料で始められるのでオススメです。
共通UIライブラリ
共通で使えるUIライブラリを作ってnpmで公開しています。
また、UIコンポーネントはStorybookで管理していて、ダッシュボードを公開しています。
作ったときの記事はこちら。
UIライブラリを開発するにあたっては、以前Vuetifyを使い込んでいた経験がとても役に立ちました。使いやすい汎用的なインターフェースを考えて実装しました。
バックエンド戦略
バックエンドで使用しているクラウドサービス
バックエンドは、興味のあるサービスや、仕事で使うサービスを勉強も兼ねて採用したので統一されていません。
- Cloudflare Workers
- Firebase Functions
- AWS Lambda
- Cloud Run
バックエンドにHonoを使ってみる
バックエンドのAPIは用途によって、いくつかのサービスを使って構築しています。
そんな中、「NextのバックエンドにHonoを使う」という記事を読みました。Nextで出来るのであれば、Nuxtでもできるのでは?と思いやってみました。
HonoでAPIを作っておけば、かなり簡単にインフラサービスを移動できるので安心です。
キャッシュ戦略
開発フロー
モノレポで全コードを一つのリポジトリで管理
基本的にコードをモノレポで管理しています。
モノレポとはプロジェクトに関するコードを全て一つのGitリポジトリで管理する方法です。
フロントエンド、バックエンド、スマホ、デスクトップの全コードと一つのGitベースで管理しています。モノレポで管理するとそのアプリに関するコードが一つにまとまっているのでコードが迷子になることがなくて便利でした。
repository
├── backend
├── desktop
├── frontend
└── mobile
こんな感じのディレクトリ構成になります。
ステージング環境で確認してから本番環境へ
変更したコードはまず、stagingブランチにコミットします。その後、pushするとGitHub Actionsでステージング環境にデプロイされます。
ステージング環境で確認して問題なければ、mainブランチにマージします。そうするとまたGitHub Actionsが走って本番環境にデプロイされます。
必ずステージング環境を経てから本番環境にデプロイすることでバグが入り込むのをできるだけ防いでいました。
コードは小さく変更する
Gitのブランチ戦略である トランクベース開発 を参考に、コードを小さい単位で変更しています。GitHub Actionsで自動デプロイを組むことですぐに本番環境に変更を反映します。
コミット履歴を確認してみると2年半で3,600回コミットしていました。モノレポなのも相まってとてもたくさんコミットしていました。
私は今回の開発で、このコードデリバリーの仕組みを考えるのがとても好きになりました。
ソフトウェア開発の生産性について研究しているDORAのサイトには他にもたくさん、生産性向上のヒントが載っているのでオススメです。DORAはGoogle Cloudが母体なので信頼性の高い実用的な情報が手に入ります。
改善活動
Lighthouseのスコア改善
ある程度、アクセス数が増えてきてから、Lighthouseのスコア改善に取り組みました。
アクセス数の多いページから改善していくことでコスパ良く改善していきます。 その甲斐あって、アクセス数の多いページはさらに大きなキーワードで1位を取れるようになりました。
Lighthouseのスコア自体は検索順位に影響しないですが、体験が良くなった結果検索順位も向上したのだと思います。
最近はNuxtのパフォーマンスのチューニングを頑張っています pic.twitter.com/qw9S6AAt7L
— かい (@takasqr) October 11, 2025
スマホアプリ化
Webサイトのアプリ部分をコンポーネントに切り出して、スマホアプリにしてリリースしました。iOS、Android両方のプラットフォームでリリースしています。
Capacitorという、WebViewを使うタイプのフレームワークを使っています。Vueコンポーネントがスマホアプリとして動いているのは面白かったです。
詳しくはこちらの記事に書きました。
開発知識はZennに
他にも開発する中で溜まった知見はZennに書いています。よかったら覗いてみてください。
確認したら記事が178本ありました。
うまくいかなったこと・やらなかったこと
うまくいかなったこと、やらなかったことも書いておきます。
- 多言語対応
- ダークモード対応
この2つはうまくいきませんでした。
20もの言語に対応させたけどうまくいかなかった多言語対応
多言語対応は「作ってるアプリはツールアプリが大半だし、生成AIも登場して精度もすごく良くなってきているから行けるんじゃないか」と思ってやり始めました。
ちょうどGhatGPTが出てきて、その翻訳精度の高さが騒がれていた時です。
日本語から英語に翻訳して、英語からその他の言語に変換するという方法でWebアプリの多言語対応を進めていきました。
対応させた言語は、日本語も含めてなんと20言語。世界中のかなりの人をカバーできる数です。
ですが、ほとんどアクセスを集めることができずに日本語のみに戻してしまいました。定かではありませんが、やっぱり微妙に違和感がある翻訳になってしまっていたのではないかと思います。
また、私は英語以外の言語は全く読めないので、日本語に逆翻訳してチェックしていたのですが、調子に乗って20言語にも対応させてしまったので作業負担が大き過ぎました。
ただ、今ならClaude Codeなどのバイブコーディングツールもあるし、生成AIの翻訳精度もさらに向上しているので、また違った結果になるかも知れません。
労力の割にメリットが少ないダークモード対応
ダークモード対応もうまくいきませんでした。
これも多言語対応と同じく、労力にメリットが見合わないと感じてしまい断念しました。
かなりたくさん作ってしまた後に作業を始めたのが失敗でした。
ダークモード対応させるなら初めから対応させるべきだったと学びました。
色々やってみることでスキルアップに繋がる
2年半、完全に独学、自力でここまで色々できたことは自分の中で自信につながりました。これからも手を動かしていきたいと思います。
私は普段から仕事で使う技術をプライベートで遊んでみるようにしています。そうすることで躓きポイントや全体的な雰囲気を事前に知っておくことができるのでオススメです。
More Stories
紅白もちのひみつ『めっきらもっきら どおん どん』
奥さんに言われて「はっ」としました。もんもんびゃっこ達は赤いおもちを食べていて、かんたは白いおもち。これはなんらかの意味がこめられてるのでは？と思い考えてみました。
星空写真をAndroid Pixelでキレイに撮る
キャンプ場での夜空はやっぱりキレイでした。星がよく見れます。肉眼で見れるこのキレイな星空を写真に残せたら嬉しいなーと思いながら、タイマーが終わるのを待ちます。
メモは脳の排水
紙、デジタルどちらでもなんでもメモに書き出します。書き出すことで考えが整理され、ネタ帳になってくれるので重宝しています。この「脳の排水」という言葉にグッときました。
リアル書店の選書体験
今回で改めて書店の良さに気付けたのが良かったです。ただ、ネット通販や電子書籍には手軽に買えるなど別の良さがあると思ってます。なのでうまく使い分けていきたいです。