このページは個人開発の記録です。
要件
この要件は随時更新します。
- 既存の無料で読める（合法）漫画サイトをクローリングしてデータを集める。
- クローリングしたデータを取得出来るAPIを準備する。
- APIからブラウザに更新情報として表示する。
この要件をそれぞれ別リポジトリにして、独立した形にしたいと思います。もし人気が出てきたりした場合等、バックエンドはAPIにしておきたいと思います。その場合、フロントはVue.jsで初SPAにしたいと思います。Vue Routerを使用予定です。最終的にはアプリ版もリリースしたい為、バックエンドはAPIにしました。
また、AWSの知見もたまってきていますので、なるべくAWSを使用したスケーラブルな環境で立ち上げたいと思います。費用はかかりますが、これはもう必要経費として計上してガチでやっていこうかと思います。
→いろいろ試してFirebase+GCP(CloudRun+CloudSQL)構成となりました。
3.の細かいところとしては、
- お気に入りの漫画の更新情報を見れる
- お気に入りの漫画の更新情報の通知を受け取れる（LINE、メール
- 盛り上がりグラフ（Googleトレンドのグラフを反映
- 盛り上がりグラフ（twitterでタイトル検索して前日の件数を記録しておき、グラフを反映
- TOPに月間人気ランキング、週刊人気ランキングを出せる
- Amazonの人気ランキングを出す
- 他プラットフォームの電子書籍ランキングを出す
ハードル上げすぎかもしれませんがとりあえずやってみます！
それではよろしくお願いいたします。
(2025/10/25更新)
2020/10/24～2020/12/3の開発記録
どのようなサービスにするか、競合分析をして、実現出来そうなイメージをふんわり固めました。
概要設計の１つとしてDB設計をしました。ER図を描いて必要なテーブルと項目を洗い出しました。クロールログテーブルがかなりふわっとしてしまいました。ひたすら溜め込むログなので、とりあえず突っ込むテーブルになりました。他、コミックテーブル、ユーザテーブル、メディアテーブル等はきっちり描けるところなので細かい項目まで洗い出せました。
このフェーズが一番わくわくしますね。このプロジェクトは自分でやりますが、今後流れに乗って来たら概要設計だけやって外注してみたいです。
どのような技術で構成するかについても少し検討しました。
今回AWSをなるべく駆使してスケーラブルで安定稼働出来る構成を作っておきたいと思っていますので、クローラーはLambda(Python)にしました。Goも対応しているのですが、まだ経験がない為今回入れると時間取られそうな為外しました。今回はきっちりと集客・売上を上げる為に、改善を積み重ねられる状況を大事にしたいと思った為です。
LambdaはCloudWatchEventでスケジューリングします。AWS Batchもありますが、簡単なLambdaにしました。
DBは最初からAWS RDSのAuroraを選択します。（高そう）クローリングログはS3に入れてストリーミングとか考えましたが、ログだけに開発時間がとられるのもモチベーションが沸かないので、最初はDBに入れる方向で進めます。
APIはAWS API Gatewayを選択します。EC2にLaravelを入れようか迷いましたが、スケーラブル方針なので思い切ってAPI Gatewayにしました。（高そう
ドメインはRoute53で取得します。
SSLはAWS Certificate Managerにします。
と、これだけ駆使すると実際の金額的な不安がありますが、とりあえずスタートしたいと思います。
今回6時間 計6時間
2021/1/20～2/23の開発記録
windowsで開発しようか迷いましたが、macで開発しようと思います。
とりあえずPython3.7をインストールしました。
AWS自宅環境のIAMユーザを作成し、MFA設定をしました。スマホが壊れた場合を考慮して、Chrome拡張機能のAuthenticatorを使用してバックアップしました。
クローラーの開発に取り掛かる為、集めるデータサンプルを先ず手動で取ってみる事にしました。いくつかコミック単位で取ったところ、そもそもページの更新情報だけでなく、新連載コミックも膨大になるのでクローリングしないと厳しい事がわかりました。それに伴いER図を修正しました。クローリング見積りが一気に2倍になった瞬間でした。
Lambda→RDSを実現する為のAWS構成調査を進めました。久々にVPC設定やると何が必要だっけ？みたいなど忘れしてしまい、昔やったRailsをAWSにデプロイした記録をあさり直しました。以下参照
他、SPA+バックエンドのAWS構成まで概要が見えてきました。現状の予定構成としてはこうです。
Route53+ACMでドメインとssl
CloudFrontをCDNとして、基本S3にして、S3に設置したVue.jsが同ドメインのAPIをパス/apiなどで呼び出します。同ドメインなのでCloudFrontに再度アクセスが行って、/apiのパスの場合はAPI Gatewayを見るように設定します。
API GatewayはAPI種別でLambdaを呼び分けます。（最初は１つで進める）
LambdaはプライベートサブネットのRDS(Aurora)を呼びます。
という感じです。現状では。クローラーの部分だけの開発なのに全体まで考えてしまいましたが、少し先が見通せた感じがしてきました。
RDSをAuroraにしようとしましたが、$30/月はするのでMySQLにしました。
使った事がなかったのですがRDSの接続情報をコードに書かずに済むAWS Secrets Managerなるサービスを見つけました。
Lambda から RDSへ接続するプロトタイプを作っていますが疎通確認に4時間ほど構成に時間がかかりました。
設計した各種テーブルをCREATEしました。
AWSの構成を変えました。LambdaからRDSへ接続するのにProxyを使用する事にしました。
RDS ProxyがDBログイン情報を保存したSecretsManagerを使用し、LambdaがRDS Proxyを使用するので、LambdaにはDBログイン情報が必要ないと思って苦戦していたのですが、これは必要なようです。どうも納得がいかないのでAWSサポートプランに入って問い合わせ中です。
（返答ありました。RDS ProxyがRDSに接続するには、SecretsMangerを使用出来ますが、LambdaがRDS Proxyを使用するのにIAM認証であればDBログイン情報は必要ありませんが、IAM認証を使わない場合はDBログイン情報は必要です。IAM認証のコネクション上限でどちらにするか決めれば良さそうです。）
IAM認証を使用すれば不要となりますが、IAM認証だとリクエスト上限がある為避けました。
LambdaからRDS Proxyを使用してRDSに接続するまでの事を以下の記事にざっくりアウトプットしておきました。
合わせてセキュリティグループやIAMロール・ポリシーも全て見直し、構成図にもセキュリティグループとIAM情報まで記載したものを作りました。絶対忘れるし重要な設定なので、個人開発でもここまで書いた方が良いと感じました。疲れた。
とは言え、ようやくLambdaからRDSへ接続出来るしっかりした枠が出来ました。
次回からはようやくクローラーのコードを書けるはずです。
と思って書いてみたところ、LambdaからDBへのアクセスは出来るもののインターネット接続ができない事に気づきました。NATゲートウェイを設置していなかった為だったのでまたまた構成をいじりました。
また、PythonでLambdaを書く場合のデプロイについて以下の記録をしておきました。
今回24時間 計30時間
2021/2/24～2021/3/17の開発記録
前回までで、無事DBへのアクセスとインターネット接続が出来たのでクローラーの開発に入る事が出来ました。素のpythonを使用しているため、DBアクセス用のクラスを作成するところを先に作っています。
途中までやって気づきましたが、LambdaでRDS触るのは本当に少しだけならLambdaで良いと思うのですが、がっつり触るとするとフレームワークを自作する事になりかねないなと思いました。Lambdaにフレームワークを入れるのはちょっと違うようにも感じます。そうするとやっぱりEC2でRDSを見るようにした方が良いのではと思ってきました。
RailsをEC2に入れるか検討してみます。
と思いましたが、先ずは開発環境をDockerで立ち上げます。posgreでやろうと思いましたがMySQLになれているので入れ替えたりしました。rails6でMySQL5.7にしました。
railsはこれだけ普及しているのにまだ環境構築がスムーズにはいかないですね。イメージで保存されているものをダウンロードするだけで環境構築出来るレベルのものがもっと見つかりやすくなってほしいです。どこかにあると思うので。
マイグレーションで初期テーブルを構築しました。久々にrailsを触った為思ったより時間がかかりました。とは言え、業務でやってたとしたら２日間で出来たと考えたら悪くはないかと思いなおしました。
railsでバッチ処理を使用する為の調査をしていました。runnerとtaskがあるようですが、クロールバッチとしてはtaskの方が合ってるかなと思いtaskで進めようとしています。ようやくクロールバッチを書き始められます。
rake taskでバッチクローラーを2つ作りました。ActiveRecord(ORM)の使い方も思い出しながら進めました。とりあえずモデルも作ったので一覧や詳細ページでデータ取得するAPIはだいたい出来てしまいました。/api/v1としました。
次回からはいよいよ画面側を作っていきたいと思います。フロントはVue.jsでバックはrailsです。
アウトプットとしてRailsのDocker開発環境構築手順を記録しておきました。
今回26時間 計56時間
2021/3/23～2021/5/12の開発記録
ローカルでのバッチとAPIを利用したローカルでの画面（Vue.js）を構築しようと思います。
Vue.js, VueRouter, Vuexの環境を構築しました。ローカルのAPI・Rails環境に向けて疎通確認をしようとしています。
開発環境構築手順を記録しておきました。
SPAサービスのフロントエンド側のVue.jsにおいて、ajaxにaxiosを使用したところ、 CORSポリシーに基づきクロスドメインのエラーとなりました。 開発環境だと、localhost:8080 と localhost:3001 を使用している為別ドメイン扱いとなった為です。これの対応を以下に記録しておきました。
フロント側をゴリゴリと作成しています。それに合わせてAPI（Rails）側も作成しています。クローリングバッチの改修も必要になりました。
Vue.jsについて記録記事も記載しました。
今回46時間 計102時間
2021/5/19～2021/6/1の開発記録
SEO関係のタグ
フロントエンド(Vue.js)側にてSEO関係のタグを設置しました。(title,description,keywords,h1)
新着ページを追加する為、バッチの改良と、バックエンド(Rails)側と、フロントエンド(Vue.js)側を開発しました。
ページャー機能
ページャー機能を実装しました。vuejs-paginateを使用しようとしましたが、全件フロント側に渡す方法に見えた為、Rails側でページ引数に応じて返すような形にしました。バックエンドだけ設置したので、フロントはやっぱりvuejs-paginateを使用する事になるかもしれない余白を残しています。
Googleトレンド
漫画のコミック詳細ページに、該当コミックの分析データを盛り込もうとしています。手始めにGoogleトレンドのグラフを貼ろうとしています。APIが公開されているので動的にscriptタグを生成する形です。
非同期でバックエンドから取得したデータに対してGoogleトレンドグラフを使用したい為、Vue.jsの処理呼び出しタイミングの理解が必要でした。
Vue.jsの理解度が低く、公式ドキュメントや検索してだいたいクリアしてきたのですが、コードが冗長になってきたり、使い方あってるのか疑問に感じたりして、改善点を模索しています。
GoogleTrendコンポーネントを作成しました。親となる漫画詳細ページで漫画情報をバックエンドのAPIから非同期で取得した漫画タイトルをキーワードとして、GoogleTrendコンポーネントに渡すようにしました。
コンポーネントはpropとして受け取ったキーワードをwatchして、Googleトレンドのグラフを描画するscriptを実行します。
ロードのタイミング調整が大変でした。Vue.jsでどういうイベントを使用すれば良いのか色々試してwatch、computed、createdを組み合わせて使用する事で、どんなタイミングでもエラーとならない状態になりました。
開発したものがグラフで出てきてくれたので苦労が報われた感じがしました。
↓サンプル
ただ、残念な事に、Googleトレンドでは検索ボリュームの少ないキーワードだと「ここに表示するデータはありません」となってしまうようでした。web漫画はニッチなタイトルが多いので、そもそもこのグラフ使える漫画少ないんじゃね？というオチまでつけてくれたのでした。（泣
次もまたランキング系の情報を埋め込みたいと思います。
今回17時間 計119時間
2021/10/14の開発記録
【超重要】個人開発の罠・メンタル
ゲームに一度手を出してしまった事により個人開発からかなり遠ざかってしまっておりました。ずっとやってた訳ではないのですが、個人開発の恐ろしいところで、一旦遠ざかるとなかなか帰ってこれないというのがあります。
そして戻ってみようかと思って触ったら完全に忘れているという状況に陥ってしまい、5分だけやろうと思っても全く触れないという悪循環にハマってしまいます。そうなると本当に再開出来なくなります。
今回も、今日はAmazonプライムでたまった観たい映画でも観ようと、リビングに行き、部屋を整理して飲み物まで準備して、これで準備万端、いざ！と、子供が好き勝手観れないように隠しておいたFireTVを差し込んだところで、ふと、本当にこの一瞬で内なる天使の声が聞こえてきたのです・・・
「子供にやる事やりなさいとか言ってるのに、自分は何してるんだ！？」
一瞬世界がフリーズし、差し込んだFireTVをすぐに抜いている自分がいました。
こんなポジティブな自分は久しぶりだと自分で感動しました。コロナ禍で腐ってしまっていたようです。
古いMacを立ち上げて開発環境を立ち上げました。
しかしそう簡単には立ち上がりません。なんとかメモ程度のREADMEを見て、立ち上がり、次また同じ事にならないようにREADMEを整理しておきました。
というところで再開初日の開発は終わりました。何も進んでいませんが自分にとっては大きな一歩に感じました。ありがとう。
今回1時間 計120時間
2021/11/8の開発記録
せっかく前回やる気を取り戻したのにまた2週間も後回しになってしまっていた。いかんいかんと再開です。
TwitterAPIを使用してデータを集めて分析結果を表示したいと思っていて、TwitterAPIの申請をしておりました。API使用許可を得たのでcurlで実行しようとしていたところ、うまく実行出来ず調査しました。プロジェクトが作成されていなかっただけのようでした。Keyを作成したらプロジェクトにアタッチしないといけないようでした。
APIを使用した開発に便利なPostmanというAPIツールがありますが、使い方がわからず挫折していました。今回TwitterAPIではこのPostmanと連携したドキュメントがあったので、これを機会にPostmanの使い方を勉強をしようとしているところです。
今回1時間 計121時間
2025/5/18～6/14の開発記録
個人開発の最大の罠をまたまたやってしまいました。
しかも4年後・・・
コロナ禍でPCのフォートナイトにはまって、Switchにはまって、だらだらと過ごしていました。とは言え、英語の勉強はコロナ前からずーっと続けていましたが。それでもTOEIC775なので時間をかけた割には全然です。
コロナが明けて旅行に行ったりする機会が増えたり、物価上昇や税金の増加で経済面で厳しくなってきた感じがずっとしていて、副業を探しましたがコロナ前ではいっぱいあったはずなのに、コロナ後では副業がブームになった影響か、隙間時間で出来るようなあまった案件に対しての需要が増えた感じがしています。
そこで、改めて個人開発に戻ってきたわけです。漫画のサイト以外にも、自分のアイテムを公開するサイトの案と、新しく考えたYoutubeDBがあります。途中まで進めたこの漫画を先ずは作りきってみようと思いました。
勉強のつもりで選定した技術も今や古い環境になってしまいました。開発環境を立ち上げ直してみると、バックエンドは動きましたし、また再開出来そうです。
本当に追い込まれた状態になったのでガッツリとまた再開しようとここに宣言します！！
ER図を確認し直しました。
バッチを実行し直しつつ何が出来るか確認し直しました。
自分で作っていても資料がないと忘れるおで、エンドポイント一覧、バッチフロー図を作りました。
ChatGPTと相談してプランニングをしました。
Claudeを使用してフロントのデザインを考えてもらって、それを今あるVue環境に落とし込みをし始めました。デザインを考えなくて良いのは良いですね。コードも全部書いてもらいたいですが、今あるものがあるので勉強も兼ねつつ自分で落とし込んで行こうと思います。
コミック詳細の機能追加を全部しました。
メディア一覧の機能追加を全部しました。
デザインもAIに作ってもらったものに置き換えつつ、vu2からvue3へアップデートしました。
ついでにTypescriptも導入しました。難しいです。
まだ開発中だった為、大きなバージョンアップを取り入れる事が出来ました。
今回17時間 計138時間
2025/6/15～2025/7/6の開発記録
次のページの開発へと入ります。リリースが楽しみになってきました。
メディア詳細ページを作成。
新着ページ一覧を作成。
新着ページ一覧のページャーを作成。
クリックテーブルとランキングテーブル設計と作成。
APIにクリックログ記録を作成し、フロントからクリック時に更新。
クリックログからランキング集計バッチを作成。
人気ランキング表示を作成。
日間、週間、月間、年間ランキング表示を作成。
TOPページとロゴを作成。
デザインを修正。新着表示するバッチを修正。
検索ページを作成。
基本的にAIにテーブル情報や要件（最初なのでシンプル）を伝えると、多くても２－３回くらいのやり取りですんなり出来ています。本当に開発が早いです。
フロントのバージョンアップは先日行ったので、バックのバージョンアップを行いました。Ruby、Rails、MySQLなど数年昔の実績あるものを使っていた為一気にバージョンアップになりました。でもこのタイミングでないと思い切って出来ないのでやってみました。
取り急ぎ必要なページは出来たので一旦インフラ構築に移ってプレリリースしたいと思います。
今回19時間 計157時間
2025/7/7～2025/8/28の開発記録
AIと相談しつつインフラ構築をしてプレリリースを目指します。
個人開発用のIaaS/SaaSをおすすめしてもらいましたが実務経験を積む為にも、GCPやAWS縛りで作っておこうと思いました。ただし、DBに関してはGCP CloudSQLだと無料で出来なさそうなので、Render PostgreSQLを採用しようかと思っています。PostgreSQLですが、ローカルをMySQLで構築していたので、PostgreSQLに移行しようと思います。また、一応GCP CloudSQLではMySQLでもPostgreSQLでもどちらのバージョンにも選択が出来ます。
とりあえずMySQL時点でのバッチで集めたデータがあるので、これをダンプ出力して、ダンプファイルをPostgreSQL用にインポート出来る形に変換するRubyスクリプトを作りました。
作ったものの、後戻りがちょこちょこ出てきたので、一旦データは全て消してテーブル定義から実行し直す形となりました。
バッチを修正して不要なタイミングでのスリープを消したりて、とりあえずDB移行は完了しました。
開発環境が整理出来たので、ようやくインフラ構築に入ります。
Render Postgresを使ってPostgreSQLを使用したいと思います。１つのDBに複数のスキーマを作れるようなので、先ずは開発環境も使ってみようと思います。本番環境も同じDBに別のスキーマで試してみたいです。スペック的に厳しくなりそうだったら本番はGCPに移行します。
ローカルのPostgreSQLのデータをRenderに移行したので、移行したデータ検証も兼ねてバッチがRenderで動くか試すところから。
staging環境を定義しました。とりあえずDBにRenderを指してローカルのアプリが動く状態になりました。バッチをここで動かしてみます。その後、Renderも有料だったのでGCPのPostgreSQLに構築したいと思います。
次やる事まとめ
・ローカルアプリからRenderDBの内容を取得→済
・GCPのPostgreSQL構築(インスタンス作成、ローカルpsqlクライアントアプデ）→済
・GCPのPostgreSQLデータ移行→パブリックIPでインスタンスを作らないとローカルから接続出来ないので、CloudSQLとCloudRunでのアプリ起動は同時にやる事にする。
さらに次やる事まとめ
・本番環境CloudRunを手動構築
・CloudRunとClouSQLで本番連携確認稼働、バッチ実行確認
・フロントデプロイ検討から
今回11時間 計168時間
2025/8/29～2025/10/13の開発記録
リポジトリが開発専用なので、本番環境もデプロイできる状態にしようとしている。
CloudRunにデプロイした。デプロイしたがアクセスするとRailsがhostsエラーをブラウザに表示する「To allow requests to these hosts, make sure they are valid hostnames (containing only numbers, letters, dashes and dots), then add the following to your environment configuration」
Railsの本番環境用の設定がconfig/environments/production.rbに必要だったのでこちらを設定。また、RailsのキーをSecretManagerに持たせるようにして、CloudRunにその参照権限を渡すようにした。DBはまだなのでヘルスチェックを追加実装して、これが表示出来るところまでを確認。
CloudSQLをプライベートIPで作成して、パブリックIPに変更。
db,schemaを作ったので、ローカルからdumpをimportして、CloudRunからCloudSQLへ接続確認ができた。
VPCを作ってCloudRunとCloudSQLを内部接続出来たのでパブリックIP設定を解除。
CloudRunJobsを2バッチ分デプロイ済。
CloudRunの設定でトラフィックを全てVPCにするだとDBに接続出来なくなったので、プライベートIPだけをVPCにするに変更。
バッチ実行したらSQLのSELECTは出来たがINSERT時に権限エラーになったので、CloudSQLを一時的にパブリックIPに変更し、権限設定。postgreはSEQUENCEにも権限が必要だったので設定。
バッチのクローリングスリープ設定に誤りがあったので修正して正常終了確認済。
Comicバッチの実行時間が長くなるのでメディア単位で分割出来るようにする修正済。
CloudSchedulerからの即時バッチ実行、スケジュール確認済。
既読ページの保存形式を変更済。
フロント環境をCloudStrage+CDN+LBにする予定→高いのでFirebaseに変更。
Firebaseのデプロイ済。
FirebaseとAPIの疎通調整中。CORS errorになる状態。→バックエンド修正で解消
Firebase > CloudRun > CloudSQLの疎通確認。サイト公開。
正式ドメインを取得したのでこれを通してFirebaseとの疎通済。
デフォルトのfirebaseドメインから正式ドメインへリダイレクト済。
新着順がおかしいので修正済。
更新日付順に変えた画面の日付表示がおかしくなっているので修正済。
CIが毎回大変なのでGitHubActions設定（API済、フロント済）。
APIを直接叩ける状態なので対策済。
とりあえずリリース完了！！
あとは機能やバグをちょこちょこ解消していこうと思います！紆余曲折あったがとりあえずここまで来れました！
今回30時間 計198時間
2025/10/16～2025/10/31の開発記録
AIの進化が目まぐるしいので、本番デプロイ後の改善や機能追加がサクサク開発できます！！
ランキングバッチをリリース完了。CIにも追加。
新着ページの修正。
CI時の認証設定修正。
コミックページの層閲覧数を表示。
APIのテストコードを全部実装。
メディアページの抜粋コミックを人気順に修正。
お気に入りページ実装。
お気に入り未読数バッジを常に表示。
お気に入りをクッキーからLocalStorageに変更。
Googleトレンドのエラーになる箇所をフロント側で対応しようとしたが、バックエンドからやらないといけないことに気づき、対応しようとしたが、うまくいかなかったので対応諦め。
お気に入り機能が出来たので、自分が使うようの最低限の使い道は確立できた。
マホビュー時のバーガーメニュー設置済。
TOPへ戻るボタンを画面右下に表示済。
お気に入りリスト改善。
各ページcss調整。
おすすめ表示。
TOPページ改善。
お気に入りボタンcss調整。
なるべく共通コンポーネント化出来るようなパーツに調整。
バックエンドCloudRunのコールドスタートでAPI結果が返って来ない場合のリトライ・リロード機能を追加。これが直近の改修では一番大きかったですが、AIでコンポーネント化したりちょっと細かく指示を出す必要がありましたが、さくさく実装できました。手動で実装するとしたら結構大変な箇所だったのですが2時間で出来ました。AI時代で改めて思うのがAIに対して指示を出す単位が、手動開発時のチケット単位になってきています。仕事なくなるわ・・・。仕様やwebに精通していればさくさくAIに指示を出せるので、開発者にまだアドバンテージがあるとすればそこですね。最近出つつありますが、まだ画面側まで見てくれていないのでそこもですね。
SEO対応(meta、GA4設置)。
次回予定：ヘッダー画像をページ毎に増やす。対応メディア増やす。
今回16時間 計214時間
2025/11～2025/11/21の開発記録
対応メディアを追加。AIでスクレイピングバッチを対応しようとしたが、意図をくみ取ってもらえずバグを生み出してしまった。あまりスクレイピングは得意ではない？完全新規の方が向いているのかもしれない。
更に対応メディアがたくさんあるので追加していく作業がつづく。
クロール対象フラグをリストとコミックに追加して判定。
バッチ処理時間が超絶に長すぎるので短縮化。（SQL実行回数を減らす、クローリング必要ない箇所を減らす、不要ログを出力しない、その他処理改善）
Googleサーチコンソールでページインデックスをしようとしましたが、同一ページとみなされてしまいました。各ページに自ページあてにcanonicalを設定しましたが、反映されるかわかりません。やはりSPAだからJSが読まれる前にテンプレhtmlだけ見て全部同じページと認識されている可能性があるようです。
SPAだとこうなるのは知ってたのですが、なんでSPAを採用したのか忘れてしまいました。。
とりあえず現状のVueだけのSPAから、Nuxtへ移行しようと思います。
NuxtはVueのフレームワークで、フロント側で同期的にバックエンドのAPIを読んで初期表示させて、ロード後にjsで画面操作できるという仕組みで、hydrate、ハイドレート、ハイドレーションと呼ぶそうです。フロント詳しくないので聞きなれない言葉でした。
Reactで言うとNext.jsが、VueのNuxtで、Next.jsに対抗して出てきたという感じみたいです。
サイト自体の価値は全然提供出来ないものになっていますが、技術的な勉強も兼ねてAIにサポートしてもらいつつ移行してみたいと思います。
次回予定：VueからNuxtへ移行して各ページインデックスさせる
今回24時間 計238時間
2025/11/24～12/31の開発記録
VueからNuxtに移行を試しています。
VSCode上でCodexに指示を出したら移行は一発でした。恐ろしや。仕事なくなる・・。
Firebase Functionsを使う事になりデプロイ権限周りに対応中です。
やはりAIはアプリに強いけどインフラとデザインが頼りないですね。
gcf-artifactsというArtifactRegistryを作成しないとFirebase Functionsにデプロイ出来ませんでした。めっちゃはまりました。
ただ、デプロイ出来たものの、詳細ページを開くとエラーになります。
そもそも、今はSSRになっていないような？フロントをSEOに強いSSRにするならCloudRunの方が良いのでは？と思いました。デプロイ先が初めてなのでFirebase Functionsにデプロイしてから整えようと思っていましたが、そっちの方針から検討しないと時間かける意味がないくらいはまるので一旦検討したいと思います。
AIでさくさく進み過ぎて、はまってもどうにか出来るとTryしがちで、検討する事を忘れていました。
SSRにしようとするハードルが思ったより高く時間がかかっています。APIへの認証が必要だった事に気づき対応中です。
今回16時間 計254時間
2026/1/1～の開発記録
SSR対応を仕上げて可変ページでもインデックスをしやすい形になりました。
サイトマップを作り直してサチコに送信し直しました。
CloudRunFunctions第一世代を第二世代に上げました。
今回2時間 計256時間
