【個人開発】Cloudflare Pagesで漫画のキュレーションサイトを作ってみた
こんにちは。
Cloudflare Pages/Workersがアツいらしい話をX(旧ツイッター)で見て、とても気になったので何か作ってみようと思いチャレンジしてみました。
実際に作ってみて、ある程度知見が溜まったので、何回かに分けてアウトプットする予定です。
今回は下記の内容をお伝えします。
- 作ったサイトの紹介
- アーキテクチャと技術スタック
- Cloudflare Pagesを使ってみた感想
作ったサイト
レスポンシブデザインに対応していますが、自分が使いやすいように基本的にデスクトップファーストにしています。
作った動機
みなさん、最新の流行りの漫画についてキャッチアップできていますか？
僕は全然できていません。
毎月1~3万円ぐらい漫画を買っていますが、漫画の新刊は毎月に数百冊に登るため、全てを読むのは金銭面・物理的な時間の面で現実的ではありません。
またアプリやWebマンガサイトで最新話の更新を毎日チェックするのも、全てを網羅しようとすると大変過ぎますよね。
だからと言って、今流行りの漫画を見逃してしまっては、人生損している気分になってしまいます。
今回は個人開発でこれらのペインを解決しようと思い立ち、制作をスタートしました。
機能紹介
メインの機能を３つ紹介します。
その他にも検索機能やお気に入り機能、またSlackへの通知機能なども用意しているので、気が向いたら色々触ってみてください。
新刊情報
以下の4つの期間で発売される新刊の一覧を確認できます。
- 本日
- 今週
- 今月
- 来月
人気順（レビュー数/コメント数/レート）にソートしており、これで人気の漫画を発見しやすくなっています。
情報源は楽天のAPIを使っています。
またレビューの情報を補足するために、DMMのAPIも使っています。
Amazonのレビュー情報も使っていますが、アフィリエイトの売上が先に建たないと利用継続が厳しかったため、スクレイピングしています。
PA-APIより取得した商品リンクより発生した、過去30日間の発送済み商品売上$0.05（日本円で約5円）ごとに1リクエスト追加
Webマンガの更新まとめ
Webマンガサイトの数は多く、毎日全てをチェックするのは、とても大変です。。。
1つのサイトで更新が確認できて、そこから各Web漫画のリンク先を開ければペインが解決すると思い作成しました。
結果、今まで気づかなかったWebマンガを発見できて、各Webマンガサイトの利用頻度も上がり、個人的に一番使っている機能です。
実装面ではFLIPアニメーションやタグをドラックしてソートを行ったり、動きがある画面になってコーディング自体も楽しかったです。
著作権について
この機能において、他サイトのコンテンツへのリンクを貼っており、それが著作権の侵害に当たるリスクがあるか確認しました。
結論としては、著作権の侵害している可能性は非常に低いと判断しました。
判断理由としては、下記になります。
- リンク先の出典を明示している（サイト名/著者名）
- 利用している画像はリンク先の提供しているOGP情報から利用しており、リンク先が情報拡散の手段として提供しているものを利用している
万が一、著作権を侵害している箇所があれば早急に対応しますので、お知らせいただけると幸いです。
参考にした情報
- OGPと著作権とインラインリンクと著作権法 旧４７条の６ - 弁理士 前渋正治
- まとめサイト・キュレーションメディアの法律問題（著作権法など） | 弁護士法人浅野総合法律事務所
- インラインリンク(直リンク)と著作権侵害 | デライブ知的財産事務所
マンガ大賞受賞作品のまとめ
審査員となる漫画家の方や目の肥えた方から評価された作品を知りたいと大賞の受賞作品を一覧できるようにしました。
自分でマンガ大賞の情報をネットで調べて、手動で登録するので追加作業が結構大変なので、今後良い仕組みを考えたいです。
アーキテクチャ
一部簡略化していますが、下記の構成になっています。
技術スタック
- Cloudflare Pages × Next.js SSGでJamstack構成にしています。
- PagesでBuildした静的ファイルを配信しています。
- Functionsで同ドメインの
/api/*に対応して、フルスタックを実現しています。 - SSGではユーザーユニークではない共通的なマンガの埋め込みを行っています。
- ※最初はRemixでSSRで作っていたのですが、途中で問題に気づいて今の構成に作り直しました。詳細は次の記事のネタにする予定です。
- 【追記】記事にしたので、よければ読んでみてください！
- Cloudflare Workers
- JamstackのBuild時にコールするAPIサーバや、D1(データベース)にマンガの情報などを入稿するためのAPIサーバとして利用しています。全てHonoを載せて使っています。(Honoめっちゃ使いやすいです！)
- D1
- データベースにはCloudflareの標準提供しているD1を利用しています。
- デザインフレームワーク
- Chakra UIを使いました。Material UIほどリッチではなく、シンプルな操作性とコンポーネントごとにカスタマイズのサンプルがあるのが使いやすかったです。ただ、一部パフォーマンスで問題を感じた部分もあったので、これも記事にする予定です。
Cloudflare Pages/Workersを使ってみた感想
総合的にコスト面や開発のやり易さの面でも、めっちゃ良かったです！
個人開発でまた新しく何か作る機会があれば、Cloudflare Pages/Workersが最初に候補に挙がると思います。
良かった点
- ドメイン以外、お金が一切掛かっていません。個人開発レベルの小規模なアプリであれば、大体フリープランに収まる気がしました。
- プロジェクト作成してからデプロイまでが、とてもシンプルかつスピーディーにできて、掴みがとても良かったです。
- プラットフォーム特有の学習コストが結構低く、アプリケーション作成に集中できました。
- ローカル環境の開発が面倒くさくなかったです。D1やKVなどCloudflare特有の機能もシュミレーターが用意されており、起動時のオプションをちょっと調整するだけでサクサク開発できました。
- Cloudflareが提供しているHonoというフレームワークがとても使いやすく、途中から採用してめちゃくちゃ開発効率上がりました。Youtubeのムーザルちゃんねるさんでその良さが紹介されているので、ぜひご覧ください。
ハマった点
PagesやWorkersなどの製品には個々にLimits(制限事項)があるんですが、これがローカルのシュミレーターでは機能しないため、本番にデプロイしたらLimitsに引っかかる、ということが何度もありました。
ローカルのシュミレーターも怒ってくれたら、もっと手戻りが少なくなるのになぁ。
Discussion