Ghost ブログにプラグインをちょっと足してみた話
もともと Ghost に海外の共有コメントサービスである Disqus を統合して、ブログにコメント機能を持たせようと考えていました。しかし面倒くさがりなので、他人が作ってくれた出来合いのものを使うことにしました。
背景
Ghost はとてもクリーンなブログシステムです。クリーンすぎて、コメント機能すら内蔵されていません。公式の姿勢も明確で、コメントはサードパーティサービスの領分であり、ブログシステムはコンテンツだけを担当する、というものです。この設計には私も納得しています。コメントシステムはユーザー認証、スパム対策、データストレージが絡み、自前で維持するコストは低くありません。専門のサービスに任せたほうが楽です。
というわけで問題は、「どこのコメントサービスを選ぶか、そしてそれをどう Ghost に組み込むか」になりました。
Ghost にサードパーティコメントを組み込む仕組み
Ghost にはプラグインマーケットこそありませんが、2 つの入り口が用意されています。
1）Code Injection（コードインジェクション）。管理画面の設定から、サイト全体の <head> や <body> の末尾に HTML/JS のスニペットを直接差し込めます。テーマファイルを変更する必要がなく、コメントサービスを手早く試すのに向いています。
2）テーマテンプレートの修正。コメントサービスの埋め込みコードをテーマの post.hbs 記事テンプレートに書き込み、記事ページだけで読み込む方法です。こちらのほうが正式なやり方で、コメント欄の位置もコントロールしやすくなります。
サードパーティコメントサービスの組み込み方は基本的にどこも同じです。ページにプレースホルダーの div を置き、JS を読み込ませると、スクリプトがサービス提供者のサーバーからコメントデータを取得してプレースホルダー要素にレンダリングします。コメントデータはサービス提供者側に保存され、ブログ本体とは完全に分離されています。
Disqus の導入
Disqus は海外で最も使われているコメントサービスで、Ghost の公式ドキュメントでも例として取り上げられています。公式ドキュメントを見たところ、設定は非常に簡単でした。アカウントを登録し、サイトを作成して shortname を取得し、埋め込みコードを記事テンプレートに貼り付ければ完了です。
設定を終えてみると、案の定、事はそう単純ではありませんでした。
設定自体は確かに有効になっていました。外部ネットワークにアクセスできる回線でブログを開くと、コメント欄は正常に表示されます。ところが中国国内の一般的なネットワークに切り替えて見ると、コメント欄があるはずの場所は真っ白。原因は単純で、Disqus の埋め込みスクリプトと API のドメインが国内でブロックされているため、スクリプトがそもそも読み込めず、コメント欄がレンダリングされようがないのです。
もう呆れるしかありませんでした。
読者が主に中国国内にいる中国語ブログにとって、これはコメント機能を作っていないのと同じです。さらに厄介なことに、読み込みに失敗するスクリプトはページを遅くする可能性もあります。ブラウザはタイムアウトするまでそこで待ち続けるからです。
プロキシ方式の検討
ブロックされたサービスにまったく手がないわけではありません。コミュニティで流行っている発想は、リバースプロキシの自前構築です。自分のサーバー（あるいは CDN や Serverless 関数）で Disqus の API リクエストを中継し、フロントエンド側でも埋め込みスクリプトのリクエスト先を書き換えます。こうすれば国内ユーザーのリクエストはまず自分のプロキシに届き、プロキシが Disqus にアクセスします。
時間ができたら GitHub で誰かが書いたプロキシのコードを探すことにしました。自分で書くのも時間がかかりますし、出来合いのものを探すのは悪くない選択です。
とはいえ冷静に考えてみると、この方式には避けて通れない問題がいくつかあります：
- プロキシ自体のデプロイと保守が必要になり、コメント欄一つのためにサービスを一つ余計に飼うことになる；
- コメントのログイン認可フローも Disqus を経由するため、プロキシが処理すべき API は 1 つや 2 つでは済まず、漏れが出やすい；
- Disqus の無料版にはそもそも広告が付く。
コメント機能のためにこれだけの負担を背負うのは、コストパフォーマンスが良くありません。
Valine への乗り換え
-2019-12-19 更新
最終的に、中国国内でそのまま使えるコメントシステム Valine を選びました。広告なし、無料で使えます。
Valine の発想は Disqus とは少し違います。自前のバックエンドサービスを持たず、コメントデータは LeanCloud のような BaaS プラットフォームに保存されます。フロントエンドは JS ファイルを 1 つ読み込み、自分で申請したアプリの App ID と App Key を記入するだけで動きます。強制ログインはなく、訪問者はニックネームを入れればコメントできます。個人ブログには十分な軽さです。
組み込み方は前述のとおりで、初期化コードを Code Injection またはテーマテンプレート経由で記事ページに置くだけです。国内からのアクセスに何の障害もなく、ページの読み込みが引っかかることもなくなりました。
コメントシステムを選ぶ前に、まずターゲット読者のネットワーク環境で実際にページを開いてみてください。開発者自身のネットワークではすべて正常でも、環境が変わればまったく別の話、というサービスは少なくありません。
まとめ
今回の試行錯誤から得た教訓はシンプルです。サードパーティサービスを選ぶときは、可用性を機能より優先すること。Disqus がどれだけ多機能でも、読者が開けなければゼロと同じです。Valine の機能は素朴ですが、中国国内向けの中国語ブログにとってはむしろ実務的な選択でした。Ghost の Code Injection の仕組みのおかげでこうした乗り換えのコストは非常に低く、一巡り試行錯誤しても半日で済む話です。
COMMENTS