{"pageId":"6c667b8d-a6f3-403f-b45e-5163c4733d84","title":"開発記録 #5：CheerDrop 統合とドッグフーディング","siteName":"GoldFeather","slug":"3wwdnnur","theme":"note-style","aiTags":["開発記録","CheerDrop"],"breadcrumbs":[{"label":"ポータル","url":"/"},{"label":"HOME","url":"/@gf"},{"label":"開発記録 #5：CheerDrop 統合とドッグフーディング","url":"#"}],"relatedArticles":[{"id":"cc1fd232-52a7-41f8-9cdb-1f51e576b167","title":"開発記録 #1：コア・コンセプト","slug":"nzxt7eil","status":"published"},{"id":"2290c45a-81d9-4d3c-9a3b-b12ebc7a8b39","title":"開発記録 #3：AI のための標準","slug":"9hi0vosq","status":"published"},{"id":"9f607b0e-0f6e-4593-aa27-ec6f2246df73","title":"開発記録 #4：パフォーマンス 100 点への道","slug":"1irme3fc","status":"published"}],"createdAt":"2026-03-29T07:30:49.487849+00:00","updatedAt":"2026-03-29T07:32:58.61121+00:00","analyticsId":null,"thumbnailUrl":null,"components":[{"type":"Header","props":{"title":"開発記録 #5：CheerDrop 統合とドッグフーディング","showLogo":true}},{"type":"SEO","props":{"title":"# GoldFeather 開発記録 #5：CheerDrop 統合とドッグフーディング — 読者の声を直接受け取る仕組み","description":"ブログを運営していると、数字（PV）だけでは見えない「読者の温度感」が気になるものです。前回の[開発記録 #4](/blog/blog04.md)では SEO とパフォーマンスを極限まで高めましたが、今回は**読者との双方向のコミュニケーション**を強化するための施策についてご紹介します。"}},{"type":"MarkdownContent","props":{"body":"# GoldFeather 開発記録 #5：CheerDrop 統合とドッグフーディング — 読者の声を直接受け取る仕組み\n\nこんにちは、GoldFeather 開発チームです。\n\n「読者の皆さんはこの記事をどう感じたのだろう？」「もっと詳しく知りたい内容はどこだろう？」\n\nブログを運営していると、数字（PV）だけでは見えない「読者の温度感」が気になるものです。前回の[開発記録 #4](/@gf/1irme3fc)では SEO とパフォーマンスを極限まで高めましたが、今回は**読者との双方向のコミュニケーション**を強化するための施策についてご紹介します。\n\n具体的には、外部のリアクション・アンケートウィジェットである「**CheerDrop**」を GoldFeather に統合し、あわせて私たちが大切にしている「**ドッグフーディング**」の姿勢についてもお話しします。\n\n---\n\n## CheerDrop とは？\n\n[CheerDrop](/@cd/4hyh5npv) は、Web サイトに数行のコードを追加するだけで、「いいね」や「拍手」などのリアクション、そして「この記事は役に立ちましたか？」といった簡易アンケートを設置できるサービスです。\n\nGoldFeather のような技術ブログや個人メディアにおいて、コメントを書くほどではないけれど、ちょっとした応援やフィードバックを伝えたい読者のための「受け皿」として最適だと考え、導入を決めました。\n\n## 開発の舞台裏：Astro への統合で直面した課題\n\n今回の実装では、Astro (Vite) 特有の挙動と、モダンな Web セキュリティ（CORS）という 2 つのハードルがありました。\n\n### 1. Astro / Vite の「バンドル」との戦い\n\nAstro はデフォルトで `<script>` タグのコードを最適化・バンドルしようとします。しかし、外部サービスから提供されるウィジェットのように、特定の公開パスに置いたスクリプトをそのまま読み込ませたい場合、この最適化が裏目に出ることがあります。\n\n実際、初期の実装ではビルド時に以下のようなエラーに遭遇しました。\n\n> `references an asset in the \"public/\" directory. Please add the \"is:inline\" directive...`\n\nこれを解決したのが、Astro の **`is:inline`** 指令です。\n\n```astro\n<!-- Layout.astro -->\n<script is:inline src=\"/assets/widget.js\"></script>\n```\n\nこの一行を追加することで、Astro の処理を通さず「そのまま」ブラウザに配信させることができ、正常にウィジェットが起動するようになりました。\n\n### 2. CORS と「Credentials」の罠\n\nもう一つの課題は、ブラウザのコンソールに現れた赤い文字。**CORS エラー**です。\n\nCheerDrop のウィジェットは、ユーザーごとの状態を保持するために認証情報（Credentials）を含めて API を叩きます。この際、サーバー側（Cloudflare Workers）が `Access-Control-Allow-Origin: *`（ワイルドカード）を返していると、ブラウザのセキュリティ制限によって遮断されてしまいます。\n\nこれは「**認証情報が必要なリクエストの場合、許可するオリジンを特定しなければならない**」というウェブの鉄則によるものです。\n\n急遽、API 側の Worker を修正し、リクエスト元の Origin を動的にチェックして返すように調整。セキュリティを担保しつつ、正確に通信ができるよう修正を加えました。\n\n---\n\n## なぜ「ドッグフーディング」をするのか\n\n今回の組み込み作業を通じて、単に機能を追加しただけではない大きな収穫がありました。それが「**ドッグフーディング（自社製品を自分たちで使い倒すこと）**」の価値です。\n\n実際、自分たちのブログに組み込んでみることで：\n- 初期設定のここが分かりにくい\n- エラーが出た時のメッセージが不親切\n- モバイルで見た時のボタンの位置が少し邪魔\n\nといった、開発者視点では気づきにくい「ユーザーとしての違和感」が次々と見つかりました。これらのフィードバックは、すぐにプロダクトの改善へと繋がっています。\n\n**「自分たちが使いたいと思えるものを作る」**。GoldFeather というプラットフォーム自体も、そしてそこに統合されるサービスも、このドッグフーディングのサイクルを回すことで、より洗練されたものへと進化させていきます。\n\n## まとめ\n\n本日のアップデートにより、各記事の末尾にリアクションボタンが表示されるようになりました。もしこの記事が面白かった、あるいは参考になったという方は、ぜひ左下のボタンをポチッと押してみてください！\n\n皆さんのその小さな反応が、次なる開発の大きな動力源になります。\n\nそれでは、次回の開発記録でお会いしましょう。\n\n---\n*GoldFeather 開発チーム一同*\n"}},{"type":"Footer","props":{"copyright":"© 2026 GoldFeather"}}]}