はじめに：メンバーシップ配信基盤自作の動機
雨宿りとWEBの小噺fm
はいどうもこんにちは。 雨宿りとWEBの小噺始まりました。 パーソナリティーのKEITHことKUWAHARAです。
今回も一つWEBの世界の面白い小噺をお届けします。 さて今回はですね、以前ブログを書いたんですけど
このポッドキャストのメンバーシップ配信の環境を自前で作ったんだけど 結果色々沼すぎて最終的に全部捨てたんだよねみたいな話を
技術ブログでんっていうプラットフォームがあるのでそこに書いたんですね 色々設計して実装もして最後に結局全部捨てたんですよね
まあその一部始終を今回はお話ししてみようかなと ただですね今回は結構途中からガッツリとエンジニア向けでお話になってしまいまして
専門用語も出てくるんですけど なるべく解説はしますけどもしかしたら難しいかもしれないです
っていうことだけ前置きしながら今日はお話ししてみようかなと思います どんな苦労をしたのかとかどんなところに悩んだんだろうみたいなところの温度感を聞いて
もらえると嬉しいと思います それでは本編に行きましょう
フェーズ1：二つのフィードのマージと最初の壁
はいということでまぁそもそも何やろうとしたかっていうのはさっきも言った通り この番組にメンバーシッププランこれを作ろうとしていたんですね
結果から先に言うと作り終わって今日本配信して3本目をそろそろ取らなきゃなみたいな ところです
やりたかったことは4つありまして 普段の配信基盤アートナインティーンというサービスを使っていて
音声ファイルを各ポッドキャストアプリに rss で配信をしていくみたいな使い方をしてます こちらにプレミアム限定のエピソードも投下して追加をして
自分のポッドキャストの公式サイトとか で通常回とプレミアム回っていうのを時系列でまとめて表示したいなというふうに思っておりました
アップルポッドキャストなどのアプリでもプレミアムの回を購読できるようにしたりとか 解約したら即座に聞けなくするみたいなこともまあしようと思ってました
ちょっと紙砕くと新聞の長官は誰でも読めるんだけど有料版だけ届く豪快がある まあそれをアプリでも自然に読めるようにしたいねみたいなイメージで思ってたんですね
で今回は外部サービスに頼らずフルスクラッチで作ってみようというふうに思ったん ですね
もともと個人開発したいって欲はずっとあってなかなか開発するネタも思いつかなく 今回を機に1年発揮してやってみるかということで作ってみようと思います
なおかつ僕がまだ触れてない技術たくさんあるんですけどそれについても触れてみよう かなということでチャレンジをして結果的にはいろいろ触れたんですよ
環境も作ったんですけど最終的には止めたという感じになります でアートナイティーにはですね
オルタネイトフィード限定フィードというような決まった人にだけ配信を届けるっていう ような機能もあってこれを使う前提でスタートしていきました
フェーズ1としてはシンプルに2つのフィードをマージすればいいんじゃないのというふうに 思っていました
いわゆる全員公開のための通常フィードと今回の限定フィードっていうのは両方ともアプリとか ウェブサイトの方で取得をしてでそれを直系列に混ぜて並べるだけで終わるというふうに
まあ最初思ってたんですけどなかなかそうはいかなかったんですね 片方の取得が失敗してももう片方だけ表示を
購読できるみたいな設計にも一応してましたが壁の一つ目としてそのアート ナインティーンの埋め込みプレイヤーっていうのが限定フィードのエピソードに対して
404を返すとこれは当たり前なんですけどね 仕方なくブラウザ標準の音声再生機能
オーディオタグっていうのがブラウザ html 中にあるのでこれで直接再生する方式に切り替えたんですね
で続いて壁の2つ目なんですがこの方式で再生するには 配信情報 rss に書かれた音声ファイルの場所っていうのを直接読み取る必要がありますと
ただですねサイトをビルドしてしまうとこの音声ファイルの場所がサイトの裏側の コード
いわゆる javascript にそのまま埋め込まれてしまうんで言ってしまえば ブラウザの開発者ツールっていうのが誰でも開けるんですけど
その開発者ツールを開いてさえしまえば限定の方のフィードの url も見えてしまう わけなんですよね
集まり url さえ知っていれば別にお金払っていない人でもエピソードが一覧で 見えてしまうんですよということでプレミアム配信の基盤としてこれは破綻してる
のでまあボツになりましたと はい続いてフェーズ2ですねではではサーバーサイドに逃がせば言われる覚醒じゃないの
フェーズ2：サーバーサイドへの逃避と根本問題
っていうのが2つ目の方法でした フィード取得の処理っていうのを裏側のサーバーファイアベースクラウドの
ファンクションぞ今回は買ってみたんですね こちらに移してブラウザー側にはフィードの場所を見せないっていうような構成に変更
しました サーバー側ではこの人はプレミアム会員かっていうのを確認するチェックってのも実装したん
ですね これでいけるのかなと思ったんですけどやっぱり壁がありましてサーバーに帰ってくる音声ファイルの
url 自体がコピーすればそのままアクセスできる直リンクだったんですよ ということで会員がその url を誰かに共有したり
sns とかで共有してしまえば そのやれるが知られてしまうので結局お金払わずに聞けてしまうっていう構造は変わら
ない なのでまぁフィードの場所ってない所隠せてはいたんですけど根本問題は何も変わってない
のでこれもボツです続いて3つ目の方法 ここでライブサービスっていうのを真剣に比較してみました
外部サービスの比較検討：Supercast, Memberful, Patreon
これ技術というかどのサービスに乗っかるかっていうような根踏みのお話なんです けど
まず一つ目はスーパーキャストですね月額の固定費はなくてその代わり売上げの5.5% プラス決済手数料をもらうというような仕組みです
会員ごとに専用のフィードも発行してくれて手数料が少し欲しいんですけど やりたいことができるなぁと
2つ目はメンバーフルというサービスですこっちの方が有名というかいろんな ポッドキャスターの方も使われていて一番最初にやっぱりこれを注目しましたね
良さそうだなぁと思いましたこちら月額25ドル固定でプラス決済手数料が入ると 会員ごとの専用フィードっても発行されるですがすごく魅力的だったんですけど個人運営には
固定費がちょっと重いですよね 僕みたいに全然無名の配信者だったりフォロワー数が少ない番組だと
これはしんどいなと思いました いや毎月25ドルですよそれ払うんだったら ai に金払いますよね
で続いて3つ目パトレオンってサービスです こっちは手数料5から12%でちょっと幅はあるんですけど
ただまぁポッドキャスト専門ってわけでもないのでオプションが 自分としては使いたいものではなかったり
いや使える機能はもちろんあるんですけどいらないものだったりするのでそれのために お金払うのも高いなっていうのでやめましたと
あと他の番組の実例も調べたらリビルド fm とかバックスペース fm さんを参考にしてました
両番組はですね専用サイト経由でダウンロードしてもらうというような振り切った スタイルだったり
ブログサービスのゴーストっていうのを使っててそっちでプレミアム配信っていうのを しっかり運用しているみたいな方法だったりすると
いうことでまあいろいろ考えたんですけど僕はさっきの選択肢で行くんだったらスーパー キャスト
1回し検討はしたんですけど結局ランミングコストが高いのがどうしても嫌だったので 改めて実装する方向に切り替えてここから本格的な沼にハマっていきましたと
フェーズ4：Art19の認証機能とJWTの壁
でペース4ですけど4つ目の方法はアート9 p の認証機能を調べていたんですね でするとサポートに相談すると提案2つ出てきまして一つ目の方法は合言葉方式
いわゆるあのアクセストークンと言われるものです 決まった合言葉っていうのを言われるにくっつけてアクセスを許可する仕組みっていうのが
あると 問題はですね合言葉が全会員共通なので一人でもどっかに漏らしてしまったら全員アウトに
なってしまうのでまぁさっきの問題に帰ってくるんですね で合言葉変えてしまうと今度は全会員様のフィード言われるまで無効になってしまうとこれは
ちょっといただけないというか受け入れがたいものなのでやっぱ断念 もう1個の方法身分証明書方式
これが日本語あってのがジョットって言われるもんですね jwt って言われるもの これはリクエストのたびにこれは私ですよっていう証明書を一緒に起こるような仕組みとなって
ます これなら行けるんじゃと思ったんですけど
ブラウザの音声再生機能とかポッドキャストアプリってリクエストに証明書のような追加情報 って付け加えられるわけがないので結構致命的な問題だったんですよね
ということでどちらの方式もポッドキャストアプリから直接聞けるっていうような条件は 満たせなかった
結局間に立って進行のいわゆる手形をチェックするみたいなプロキシっていうものを自分で 用意するしかないなーっていう話になったんですね
フェーズ5：Cloudflare Workersによる認証プロキシ試作
でついて5つ目の方法 フェーズ後ではクラウドフレアワーカーズというもので認証プロキシを試作しました
ここからももっともとエンジニア濃度が上がってくるんですけど クラウドフレアワーカーズも実は僕
回も使ったことがなくて初めてクラウドフレア使ってみました触ってみました いやー感想としてやっぱ使いやすかったですねずっと僕ファイアベースぐらいしかクラウド本格的に
使ってなくてもちろんお仕事だと gcp とか aws が使っているんですけどプライベートで クラウドフレアワーカースではなかったお仕事でもなかったんですよね
ランディングコストも結構安かったし欲しい機能本当に揃っていてスピードも早いので よかったんですよね
さっきからはクラウドって言ってますけどまぁあちこち世界中に置かれた 瞬時に起動する小さなプログラムの実行場所みたいなものです
その起動の待ち時間というのもほぼゼロなんですね 他にも同じようなサービスってあるんですけど
数秒から数百ミリ秒かかることもあったりすんでこの速度が早いというのがやっぱり 魅力ですよ
あとはその音声の巻き戻しとか早送り いわゆるシークに必要な仕組みってものにもこれを使えば対応できそうだなと
さらにですね高速なデータの保存 kv ってものがあるんですけどこちらが内蔵されて いてアクセス許可の判定というのが一瞬で終わっちゃうんですよ
スピード僕重視したいので魅力だったですね 最後無料の利用枠っていうのが1日10万リクエストとなっていまして
確かに1日10万だったと思いますけどおそらく課金とかランニングコストも困らん でしょうということでクラウドレアワーカーズ
を使いました全体の構成とした2段構えにしてて ファイアベースの方で会員登録と決済管理
誰がプレミアム会員かというところのデータを保持します でクラウドフェアワーカーズと kv を使ってリクエストが来るたびにこの人がこの音声を聞いて
いいかっていうのを判定処理をしていますという2段構えにしました で期限付きの署名いる言われると kvでの二重チェックでアクセスを制御することで
署名が有効でも kv 側のですね記録っていうのが消されていればアクセサ負荷になれ ますし
url が流出しても即座にそれは無効化できるよっていうような仕組みになってますと あとは決済サービスとして技術的にはこれでやりたいことは実は全部実装できる
ような設計になったんですね詳しい アーキテクチャーだったりどんな構成にしているかアーキテクチャーズっていうのはブログの方に書いて
ますので概要欄の方から前のブログを読んでいただければいいなと思います でラストフェーズ6なんですけど結局諸々加味して頑張っていろいろ実装したり設計したんです
フェーズ6：全てを捨ててSubstackへ一本化
けどこれを全部捨てましたっていう最後の話です 捨てた理由は技術的な問題じゃなくてやはり維持していくコストとそれよりもくさらに大きい
セキュリティ管理の負担ですよね 運用コストの試算してみたんですけどサーバー代の無料枠を超えた分ては月だいたい5ドル
ぐらいからスタートじゃないのみたいな あとはデータ保存の操作コストっていうのも月0.5ドルから始まりそうだなぁと
会員管理サーバーというのは基本無料枠の中に収まるのでここは大丈夫そう 決済手数料というのは基本売上げの3.6%かかってたはず
というところでした で金額が正直言うとこれぐらいなら最初考えていた他のパトレオンとかスーパーキャストとか
みたいな 外部サービスよりはコストは低いのでまあまあ飲めるかなと思っていたんですが
金額よりもずっと重かったのがやはりセキュリティの負担と運用し続けるコストですね 2つの異なるサービスっていうのを組み合わせている
ファイアベースとクラウドフレアワーカーズですね なのでもう片方が壊れた時にもう片方とずれるリスクってのはやっぱりありますと
で署名の鍵っていうのを定期的に交換をしたり データの有効期限ての管理したりしなきゃいけない
まあその手間もかかる で決済の通知が重複しても壊れないようにするみたいな設計をしたりとか失敗した時の
再創設計だったりとかリトライ処理とかっていうところもあるし 何より個人運営なのでこの全部の責任を結局僕一人が最後は背負わなきゃいけない
というところですねここがどうしてもやっぱりネックというか 怖かったんですよ昨今のサプライチェーン問題
ai による利用してライブラリへのアタックだったり 脆弱性をつくみたいなところ今年からすーっごい攻撃増えててその恐怖がやっぱ
強かったんですよねそれを背負いたいんですかって言われるとうんってやっぱ思っちゃっ たんですよ
で本音僕がやりたかったのはあくまで配信であってインフラの運用がしたいわけではない でしたい配信がメンバーシップので
それも加味してインフラも飲むかっていうとこだったんですけどそれを背負うコスト をかけたくなかったんですよ
ということでいろいろ頑張ってやったけど勉強にはなったしブログにも書きましたが最終的に どうしたかというとサブスタックに一本化をしてます
こちらにすると手数料は売上げの10%これ決済手数料込みですけど で月額固定費は0ドルだし音声の保管とか認証とか会員管理とか配信全部
サブスタックが持ってくれるんですよねわかりやすくかつシンプルでとにかく 売上げのナンパをお金を払うだけで良いというのでサブスタックさんに今回は依存しよう
かなとはい思いました 他にもねいろいろ検討して一番悩んだのは
リッスンさんのあれですルームっていうサービス ro が3つだったかな の m というサービス名があってこちらでメンバーシップ配信をしている方も何名がいらっしゃ
るんですよねそれに乗っかるというか真似しようかなともちょっと悩んだんですよ やはり国産サービスリッスンと連携もされているというところでいいなぁと思ったんです
けど昔から使っているサブスタックの方がちょっと慣れてたっていうのもあって こちらにしました特にまあ決め手だったのは何かというと無料エピソードに
音声ファイルの場所っての書かれていて有料エピソードにはその場所の情報がそもそも 書かれていないとつまりですね
サイト側の判定っていうのは音声の場所が書かれていなければ有料というシンプルな 条件で済んでしまう
認証も署名も高速データ保存というのはいいさえいらなくなるということでまぁ最終的な 構成がすごくシンプルになりましたと
アートナインティーのサブスタック両方の公開情報をサイト側でまとめてま時系列 表示するだけになりましたよと
無料エピソードはそのままブラウザで再生有料エピソードはサブスタックにリンクして 認証も再生もサブスタック側に全部
押し付けるいう感じですでまぁ自作したものはですけど一応あえて残しているものは 残しててこれはちょっとした通信の許可設定ぐらいがあるんですけどね
それ以外はもう全部捨てました自作の音声 取り付け係みたいなものとか会員データの高速保存の仕組みだったり
会員登録そのものの仕組みとかサーバーですねそのデータベースと決済の直接の連携 だったりみたいなファンクションズも全部消しましたと
その代わり受け入れたトレードオフとして手数料ですねストライプさんだと売上げの 3.6%だったんですけど今回はサブスタックにしたので上がってしまったという感じです
でもこれはですけど売上規模がもし大きくなったらまあ見直せばいいかなというふうに 割り切りました
あとは再生画面っていうのを自由にデザインができなくなりますよね それは外部サービスに依存するからです
あとアクセス解析とかも細かく見られないしアプリでの高読の自由度っての下がりますよね これらは配信が起動に乗るまでの保険料というか勉強台というかそういうものとして
いったん受け入れて伸びてきたら改めて考えましょうかなというふうに思ってます っていうことでいろいろ喋りましたけど学びと結論的な話をすると2つの配信情報を
学びと結論：自作の難しさと外部サービス利用の推奨
混ぜるだけのまあつもりだったんだけどどうやったってセキュリティ 問題を真面目に考えれば考えるほど自分が持つべきじゃないよねっていうまあ当たり前の話に
結局帰ってきた感じです それに加えていろいろ考えたらまいもずるしきり問題が出てきたっていう感じですね
までブラウザだけで関係する印象というのは基本的にないので不可能なので間に立つ 仕組みとしてもプロキシを必ず用意しなければいけないと
会員データを管理する場所とかアクセス許可を判定する場所とかの役割分担ですけど まあ試行錯誤してたどり着いた設計ですけどこれはこれでまあ僕としてはかなり学びになり
ましたね 一緒にやりたかったもう一つ裏目標じゃないですけど
触ろうと思っていた技術のキャッチアップですけどかなり勉強できたし といえ全部が頭の中叩き込まれているかって言うと忘れた分もあるんですけどブログ
にはちゃんと書きしたためているのでこれ見て遊えばこういうことだとかっていうので 思い出せるぐらいにはなった
ての大きかったと思います最後やっぱね設計を丸ごとする判断 カットはありますよ結局で苦労して時間もかけていろいろアートコーダ設計して作ったんですよ
もちろんコードは ai 欠かせたとはいえ何度もやり直せたり いやここの設計とかここを突っ込まれたどうするのとかこういう
脆弱性あるんじゃないのとかさんざっぱらやったので頑張って作ったものを壊すとか 捨てるって
もったいないというかなんてサンクコスでしたっけみたいのがあるじゃないですか とはいえ結局まだサービススタートしてるわけではないので
割り切ってもう勉強台として捨てることにしましたという感じです とにかくこの先メンバーシップ配信の基盤を自分で作りたいという園児の方がいらっしゃ
ったら参考になれば幸いですけど僕としてはやはり認証とか課金とか配信のインフラ っていうのは個人であるんだったら素直に外部サービスに任せたほうがいいと思います
個人だったらって言うけど法人でも同じかもですね 専門でやってるサービスがあるからそっちに重たいものとか危ないものっていうのは
押し付けてしまって その分のお金を払うほうがやはり無難かなと思いますね
ということで以上メンバーシップの配信基盤を自前で作ったら 思った以上に沼すぎてまぁ最終的には全部したっていう話でした
リスナーからの便りと今後の配信について
誰かの参考になれば幸いでございますそれではエンディングに行きたいと思います えっとですね
だいぶ遅くなってしまって大変に申し訳ないと思うんですけど google フォームからお便りが一件きてまして
どんだけお前は忘れてんねはい遅くなりましたけど読ませていただければなと思います ハンドルネーム海面さんからいただきましたありがとうございます
今回はテーマとしてご感想ご意見のお話ですね これあるあるあるあると思い出しながら楽しく聞けました面白い回でしたどの回かっていう
のを選択できるようにしなかったのでちょっとどの回かわからないんですけど 自分にも当てはまることが多数
データベースのテーブル定義と開発者ツールについてだけはないかなと言葉については デッドロック以外にもボトルネックとかマルチスレッドとか
フラグとかインタラフトとかフラグはもう一般にも浸透したかもしれない キースさんのポッドキャストはしゃべり方も音質も声質も良くて聞きやすいのでかなり
気に入っていますこれからもぜひたくさんお話を聞かせてくださいといただきました ありがとうございます
いやこんな嬉しいメッセージをだいぶ前にいただいたのかっていうところで大変に申し訳 なせん
はいということでなんだかんだ言いながら今も頑張って配信をしておりますし今後も頑張って やっていきたいと思います今はですね
なんとか週1回水曜日配信というのを頑張ってますね 今年もですけど配信を管理するようにしてまして
なんとか今年も52本毎週1本配信ってところを目標にしてるんですけど 後半からスタートしてるので後半も後半最後の第4四半期
10月から12月は1日1週間に2本ないし3本ぐらい配信しないと間に合わないので ちょっと全力で頑張ろうかなと思います途中途中
もしかしたら薄い話をするかもしれないですけどとにかく配信をし続けるってことの リズムを作ることを今年はちゃんと目標にしていきたいと思いますので
何とぞ お付き合いいただければ幸いです
エンディング
以上エピソード管理としてすでに50本分のストックあるのでまたそれを台本書いて 喋るだけって感じはしようと思ってますので
はいまたぜひ来ていただいてコメントいただけるとすごく嬉しいなと はい思いますということで今回も終わっていきたいと思います
クロージングです この番組面白かったよという方はぜひチャンネル登録もお願いします
もし聞いていて気になることや話してほしいトピック感想などございましたら x でハッシュタグ ウェブ小話でつぶやいてください
ウェブはアルファベット小話は漢字でも平仮名でも大丈夫です それではまた雨宿りしに来てください今回もお聞き下さりありがとうございました
雨宿りとウェブの小話お相手はキースでしたばいばい
