このページは個人開発の記録です。
要件
この要件は随時更新します。
- 既存の無料で読める（合法）漫画サイトをクローリングしてデータを集める。
- クローリングしたデータを取得出来るAPIを準備する。
- APIからブラウザに更新情報として表示する。
この要件をそれぞれ別リポジトリにして、独立した形にしたいと思います。もし人気が出てきたりした場合等、バックエンドはAPIにしておきたいと思います。その場合、フロントはVue.jsで初SPAにしたいと思います。Vue Routerを使用予定です。最終的にはアプリ版もリリースしたい為、バックエンドはAPIにしました。
また、AWSの知見もたまってきていますので、なるべくAWSを使用したスケーラブルな環境で立ち上げたいと思います。費用はかかりますが、これはもう必要経費として計上してガチでやっていこうかと思います。
3.の細かいところとしては、
- お気に入りの漫画の更新情報を見れる
- お気に入りの漫画の更新情報の通知を受け取れる（LINE、メール
- 盛り上がりグラフ（Googleトレンドのグラフを反映
- 盛り上がりグラフ（twitterでタイトル検索して前日の件数を記録しておき、グラフを反映
- TOPに月間人気ランキング、週刊人気ランキングを出せる
- Amazonの人気ランキングを出す
- 他プラットフォームの電子書籍ランキングを出す
ハードル上げすぎかもしれませんがとりあえずやってみます！
それではよろしくお願いいたします。
(2021/1/20更新)
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/13の開発記録
個人開発の最大の罠をまたまたやってしまいました。
しかも4年後・・・
コロナ禍でPCのフォートナイトにはまって、Switchにはまって、だらだらと過ごしていました。とは言え、英語の勉強はコロナ前からずーっと続けていましたが。それでもTOEIC775なので時間をかけた割には全然です。
コロナが明けて旅行に行ったりする機会が増えたり、物価上昇や税金の増加で経済面で厳しくなってきた感じがずっとしていて、副業を探しましたがコロナ前ではいっぱいあったはずなのに、コロナ後では副業がブームになった影響か、隙間時間で出来るようなあまった案件に対しての需要が増えた感じがしています。
そこで、改めて個人開発に戻ってきたわけです。漫画のサイト以外にも、自分のアイテムを公開するサイトの案と、新しく考えたYoutubeDBがあります。途中まで進めたこの漫画を先ずは作りきってみようと思いました。
勉強のつもりで選定した技術も今や古い環境になってしまいました。開発環境を立ち上げ直してみると、バックエンドは動きましたし、また再開出来そうです。
本当に追い込まれた状態になったのでガッツリとまた再開しようとここに宣言します！！
ER図を確認し直しました。
バッチを実行し直しつつ何が出来るか確認し直しました。
自分で作っていても資料がないと忘れるおで、エンドポイント一覧、バッチフロー図を作りました。
ChatGPTと相談してプランニングをしました。
Claudeを使用してフロントのデザインを考えてもらって、それを今あるVue環境に落とし込みをし始めました。デザインを考えなくて良いのは良いですね。コードも全部書いてもらいたいですが、今あるものがあるので勉強も兼ねつつ自分で落とし込んで行こうと思います。
コミック詳細の機能追加を全部しました。
メディア一覧の機能追加を全部しました。
vu2からvue3へアップデート中です。
今回16時間 計137時間
