RemixとCloudflare Workers+D1でマンガ投稿サイトを作った
趣味のマンガ好きが高じてマンガ投稿プラットフォームを作りました。
お試しということで、二次利用が自由に許可されている「ブラックジャックによろしく」が試し読みできるようになっているので、気になる方は読んでみてください！
※「ブラックジャックによろしく」の利用規約により、書籍ストアに掲載する場合は1円以上の有償販売とする必要があるため、インクロフトの最低決済額の50円で投稿しています。
なぜ作ったか
私はマンガが大好きでジャンル問わず暇さえあればマンガを読んでいるんですが、最近は新しいマンガを見つけるのにXなどのSNSを使っています。
#漫画が読めるハッシュタグなどを使って作者の方がXに自分の作品を載せてくださっているので、タグで検索しながら気に入った作品はサイトに飛んで読むということを繰り返しています。
本屋や電子書籍で手に取らないようなジャンルのマンガも気軽に試し読みができて大変いいのですが、マンガの画像を読むのにXの画像表示は最適ではないと感じていました。
縦書きの日本語で書かれたマンガは基本的に右綴じされていて、右から左に読んでいきます。一方でX含むSNSの画像表示は左から右にスクロールするものがほとんどです。
コマ割りがシンプルなマンガであれば気にならないこともあると思いますが、理想の体験とは言えません。特に2ページをまたぐ見開きの場合、ページの間が不自然に切れてしまいます。
またXは1投稿に載せられる画像が4枚までなので、4ページごとに次の投稿を押して進める必要があります。
もっと快適にマンガを読むために、Xで画像を見るのと同じくらい手軽に開けて、なおかつ理想的な読書体験を提供できるマンガサイトを作ろうと思ったのがインクロフトを開発し始めたきっかけです。
サービスの基本方針
マンガ投稿サービスを作るにあたって、以下のようにサービスの基本方針を決めました。
読者と作者のためになることをする
読者と作者のどちらがいなくなっても成り立たないサービスなので、それぞれにサービスを使う理由を作ることが大切だと考えました。
とにかく軽く、早く、快適に動く
Xから気軽に開いてさっと読めることを初期の目的として作ったので軽快に動くことは必須条件でした。
技術選定をするにあたって、利用するライブラリの絶対的な選定基準になったので、これを最初に決めておいたことは良かったと思います。
Page Speed Insightsを使った測定も定期的にチェックすることで、機能追加によってサイトが重くならないように気をつけています。
マンガ文化が続く手伝いをする
これは先の2つとは大分毛色が違うのですが、自分の好きなマンガという文化がこれから先も続くためにできることをやろうと思いました。このサービスの大義にあたる決まり事です。
海賊版マンガや違法アップロードに対する取り締まりや、作者がきちんと報酬を受け取って活動を続けられるようにするための有料販売機能など、今の規模でもできることをやっていきます。
サービスの機能
読みやすいマンガリーダー
サービスの根幹となる機能なので一番試行錯誤をして作りました。
タップでページ送り、スライダーでページ移動ができるほか、レスポンシブ対応をしているので画面幅が広いデバイスでは見開きで読むことができます。
| モバイル版 | デスクトップ版 |
|---|---|
 |
 |
またSNSに特定のページをシェアしたいケースを想定して、ページごとに異なるURLを割り当てるようにしています。
OGPの自動生成
最初は作者が自由にOGPをアップロードできるようにしていたのですが、直近のXの仕様変更で外部リンクのタイトルと説明が表示されなくなったことを受けて、タイトルとページのプレビューを合わせてOGP画像を生成する機能を追加しました。
Xの仕様変更に合わせて追加した機能ですが、OGPだけで情報を過不足なく伝えることができるようになり、いい機能になったと思います。
マンガの有料販売機能
インクロフトにアップロードしたマンガは無料で公開することも有料で販売することもできます。決済にはStripe Checkoutを使っています。Stripe Checkoutの本番利用は初めてだったのですが、ユーザー体験と開発体験のいいとこ取りができる素晴らしいサービスでした。特に開発工数が限られている個人開発やスタートアップの開発者におすすめです。
購入されたマンガの代金は15%のプラットフォーム手数料を除いた85%を作者に還元するようにしています。決済手数料と銀行への振り込み手数料は全てインクロフトが負担することにしました。これは私1人でが開発、運営を全てやっているからこそできる作者還元だと思います。
作者の売上や振り込み口座の管理にはStripe ConnectのExpressアカウントを使っています。
Stripe Connectは、振り込みごとに250円+振込額の0.25%と、当月中に振り込みのあったアカウントごとに200円の利用料がかかりますが、これらの手数料も全てインクロフトが負担します。
回避方法は様々あると思いますが、報酬を受け取る作者にとって面倒になってしまうことを避けたかったので月に1回サービス側が手数料を負担して振り込みを行うことにしました。
インクロフトはサイトの性質上、作者の数 <<<<<< 読者の数となるはずであることからこのような意思決定をしましたが、投稿者比率がもっと多いサイト(例えばこのzenn.devのような)の場合は違った方法を取ると思います。
インクロフトでも将来的にどうしても採算が取れなくなったら手数料の見直しをさせてもらうかもしれません。
マンガの著作権保護
マンガの著作権保護にはサービスを作るにあたって最も難しい部分だったので、他の著名なWebマンガサービスを参考にしながら仕様を決めました。インクロフトが行っているマンガの著作権保護は以下のようなものです。
画像URLの保護
マンガのページを表示するための画像は全て有効期限をつけています。またHMACで画像URLを暗号化することで有効期限の改竄を防いでいます。これによって外部の違法サイトに画像URLを直接利用されることを避けています。
各画像にユーザーを識別する情報を追加
有料で購入されたマンガに関しては、試し読み部分を除いた全てのページに読んでいるユーザーのIDを埋め込んでいます。これによってマンガを購入したユーザーが外部サイトにダウンロードしたマンガを違法にアップロードすることを抑止することができます。
他のサイトを調べていると、右クリックを禁止したり、マンガの画像を切り刻んで配布してJavascriptで復元したり、canvas要素を使うことで画像のURLをDeveloperToolから隠したりなどの対策しているサイトがありました。
しかしユーザーの端末にダウンロードして閲覧する以上、例えばスクショなどで画像を保存されるのを完全に防ぐことは不可能だと考え、インクロフトでは保存された画像の違法な二次利用を防ぐ方向で対策をしました。
もちろんこれの方法も完璧ではありません。ダウンロードした画像をさらに加工して埋め込んだ情報を消されてしまうことは可能です。
最終的にはそのリスクを利用規約を通して作者に了承してもらう必要があります。
購入したマンガのダウンロード機能
一般に電子書籍ストアでは、有料購入したマンガでもサービスの終了によって閲覧できなくなることがあります。インクロフトでは読者に安心してマンガを購入したもらうために、購入したマンガに限ってダウンロードできるようにしました。
少し変わっているのが、マンガのデータとリーダーを全て単一のhtmlファイルにまとめてダウンロードできる点です。ユーザーは [マンガのタイトル].html ファイルさえ持っていればマンガをオフラインで読むことができます。
通常マンガをダウンロードする場合、
- ブラウザやアプリのキャッシュ領域に保存する
- pdfとして保存する
- cbzやepubなどの電子書籍用フォーマットで保存する
といった方法がありますが、マンガを読む体験を損なわずに、ユーザーが自分で管理できて、どんな端末でもアプリなしに読めるという条件を満たすために、htmlファイルにまとめる方法を採用しました。
技術選定について
手数料を下げるためにできるだけ開発とインフラの運用にかかるコストを下げたかったので、Cloudflare Workers + D1 Databaseの環境にRemixを載せて作りました。
細かい技術選定についてはカテゴリーが違うので別記事で書きます。
Discussion