FBC(フィヨルドブートキャンプ)の「バズ」を、いま見ているWebページからワンクリックでかんたんにできるようにするGoogle Chrome用の拡張機能です。
拡張機能を入れると、ブラウザの右上に専用のアイコンが表示されます。気になる記事やページを開いた状態でそのアイコンを押すと、ページのタイトルやURLを入力するフォームが開き、そのまま登録できます。すでに登録済みのページを開いているときは、アイコンの見た目が変わって「登録済み」だとわかるようになっています。
さらに、X(旧Twitter)・はてなブックマーク・Google 検索で検索しながらバズを登録していくときは、すでに登録済みの記事リンクに自動で「✓ 登録済み」の目印が付くので、二重チェックを防げます(6. X・はてなブックマーク・Google 検索で登録済みのリンクに印を付ける)。
この拡張機能は Chrome ウェブストアでは配布していません。以下の手順で、ファイルを手元にダウンロードして読み込む形で使います。少し手順は多いですが、画面の指示どおりに進めれば10分ほどで完了します。
- 必要なもの
- ファイルをダウンロードする
- Chrome に拡張機能を読み込む
- アイコンを固定して使いやすくする
- 使い方
- X・はてなブックマーク・Google 検索で登録済みのリンクに印を付ける
- アップデート(新しいバージョンに更新する)方法
- 困ったときは(トラブルシューティング)
- 動作確認手順(本番環境)
- Google Chrome(パソコン版) お使いのパソコンに Chrome が入っていない場合は、先に https://www.google.com/chrome/ からインストールしてください。
- FBC(フィヨルドブートキャンプ)のアカウント 拡張機能にログインするときに、いつも使っている ログイン名 と パスワード を入力します。
スマートフォンやタブレットのChromeでは利用できません。パソコンでお使いください。
拡張機能のファイル一式を、GitHubからダウンロードします。
- こちらのページを開きます 👉 https://github.com/fjordllc/bootcamp-buzz
- ページ内にある緑色の 「Code」 ボタンをクリックします。
- 出てきたメニューの一番下にある 「Download ZIP」 をクリックします。
bootcamp-buzz-main.zipというファイルがダウンロードされます(通常は「ダウンロード」フォルダに入ります)。- ダウンロードした ZIP ファイルを ダブルクリックして解凍(展開) します。
- Windows の場合:右クリック →「すべて展開」を選びます。
- Mac の場合:ダブルクリックすると自動で展開されます。
bootcamp-buzz-mainという名前のフォルダができます。このフォルダは削除せず、わかりやすい場所(例:「書類」フォルダ)に置いておいてください。
⚠️ 重要: このフォルダを消したり別の場所へ動かしたりすると、拡張機能が動かなくなります。使い続けている間は、置いた場所に残しておいてください。
-
Chrome を開き、画面上部のアドレスバー(URLを入れるところ)に、次の文字をそのまま入力して Enter キーを押します。
chrome://extensions👉 拡張機能の管理ページが開きます。
-
画面の 右上にある「デベロッパーモード」のスイッチをオン(青色)にします。
-
左上に出てくる 「パッケージ化されていない拡張機能を読み込む」 というボタンをクリックします。
-
フォルダを選ぶ画面が開きます。ここで、先ほど解凍した
bootcamp-buzz-mainフォルダの中にあるextensionというフォルダを選んで「開く」(Mac は「選択」)を押します。bootcamp-buzz-main/ └── extension/ ← このフォルダを選びます⚠️ よくある間違い: 一番外側のbootcamp-buzz-mainフォルダではなく、その中のextensionフォルダを選んでください。extensionフォルダの中にmanifest.jsonというファイルが入っているのが目印です。 -
拡張機能の一覧に 「fjord-buzz-extension」 が表示されれば、読み込み完了です 🎉
読み込んだ直後は、アイコンが隠れていることがあります。いつでも押せるように、ツールバーに固定しておきましょう。
- Chrome の右上にある パズルのピース(🧩)のようなアイコン をクリックします。
- 一覧の中の 「fjord-buzz-extension」 の右側にある ピン(📌)マーク をクリックします。
- これで、Chrome の右上に拡張機能のアイコンが常に表示されるようになります。
- 登録したいWebページを開いた状態で、右上の拡張機能アイコンをクリックします。
- ログイン画面が出たら、FBC の ログイン名 と パスワード を入力し、「Submit」 を押します。
- 一度ログインすれば、次回からは自動でログイン状態が保たれます。
- 登録したいページを開いた状態で、拡張機能アイコンをクリックします。
- 入力フォームが表示されます。
- title(タイトル):記事のタイトルを入力します。
- url:いま開いているページのURLが自動で入ります(変更できません)。
- published_at(公開日):記事の公開日を選びます。
- memo(メモ):ひとことメモを自由に書けます。
- 「Submit」 を押すと登録完了です。
- いま開いているページがすでに登録されていると、拡張機能のアイコンの見た目が変わり、「登録済み」だとひと目でわかります。
- 登録済みのページを開いてアイコンを押すと、登録済みの内容が表示されます。書き換えて「Submit」で上書き修正できます。
- フォームの下にある 「削除」 リンクで、その登録を消せます。
- 「ログアウト」 リンクで、拡張機能からログアウトできます。
X・はてなブックマーク・Google 検索で「フィヨルドブートキャンプ」「FBC」「FjordBootCamp」などを検索してバズを登録していくとき、同じ記事を二重にチェックしなくて済むように、一覧に並んだ記事リンクがすでに登録済みなら、そのリンクの横に自動で目印が付きます。
対応サイト:
- X(
x.com/twitter.com) … ツイート内のリンク - はてなブックマーク(
b.hatena.ne.jp) … エントリー一覧の記事リンク - Google 検索(
www.google.com/www.google.co.jpの検索結果) … 検索結果の記事リンク
- すでに登録済みのリンクの横に緑色の「✓ 登録済み」バッジが表示されます。
- リンクを開かなくても、検索結果や一覧を眺めるだけで「この記事はもう登録した」とひと目でわかります。
- 先に拡張機能へ FBC ログインしておくこと。ログインしていない状態でページを開くと、目印はまったく表示されません。
- 対象サイトのページを開くより前にログインしておくのが確実です。未ログインのままページを開き、あとからログインした場合は、そのタブでは目印が付きません。ページを再読み込み(リロード)してください。 ログイン後に自動で付け直されることはありません(ページを開いた時点で未ログインだと判定処理が止まるためです)。
- 検索結果・タイムライン・一覧など、記事リンクが並ぶページで動作します。
- X はツイート内のリンクを
t.coという短縮リンクに置き換えて表示するため、本当のリンク先(ブログ記事などのURL)を割り出してから登録済みかを照合しています(はてなブックマークは最初から実際のURLなので、そのまま照合します)。 - この「リンク先を割り出す」処理のために、拡張機能はインストール時に 「すべてのウェブサイトのデータの読み取り」権限 を求めます。これは短縮リンクをたどって実際のURLを確認するためだけに使い、ページの中身を読み取ったり保存したりはしません。
- 目印が付くのは、リンク先(記事など)の URL を登録している場合です。X のポストそのものの URL を登録している場合は対象外です。
- ページはスクロールで次々と読み込まれるため、判定に少し時間差が出ることがあります(表示された順に少しずつバッジが付きます)。
拡張機能が新しくなったときは、次の手順で更新します。
- 2. ファイルをダウンロードする と同じ手順で、最新の ZIP をダウンロードして解凍します。
- 古い
bootcamp-buzz-mainフォルダを、新しく解凍したものと同じ場所に置き換えます(元の場所と同じにするのがおすすめです)。 chrome://extensionsを開き、「fjord-buzz-extension」のところにある 更新(🔄 くるっと回る矢印)ボタン をクリックします。
置き場所を変えた場合は、3. Chrome に拡張機能を読み込む の手順でもう一度読み込み直してください。
→ 4. アイコンを固定して使いやすくする の手順で、ピン留めしてください。
→ 選ぶフォルダを間違えている可能性が高いです。一番外側のフォルダではなく、その中の extension フォルダ(manifest.json が入っているフォルダ)を選んでください。
→ 次を確認してください。
- FBC の ログイン名・パスワードが正しいか(Webサイトにログインできるものと同じです)。
- インターネットに接続されているか。
- 一度「ログアウト」してから、もう一度ログインし直す。
→ ダウンロードした bootcamp-buzz-main(または extension)フォルダを移動・削除していないか確認してください。フォルダを動かすと拡張機能が動かなくなります。元の場所に戻すか、3. の手順で読み込み直してください。
→ FBC のメンターや、GitHub の Issues ページ で相談してください。
開発・レビュー時に、拡張機能が正しく動くかを確認するための手順です。本番環境(https://bootcamp.fjord.jp)に接続して確認します。
アイコンは状態に応じて 灰色 / 水色 の2色に切り替わります。
| 状態 | アイコンの色 |
|---|---|
| 未ログイン、または未登録の記事を開いているとき | 灰色 |
| 登録済みの記事を開いているとき | 水色 |
-
Chrome拡張にログインしていない状態で、次の登録済み記事を開く。この時点ではアイコンは灰色のまま。
https://sugiwe.hatenablog.jp/entry/ruby-silver -
拡張アイコンをクリックするとログイン画面が開くので、本番の ID / パスワードでログインする。ログイン後、アイコンが水色に切り替わることを確認。
-
別タブで Yahoo など無関係のページを開いて選択し、アイコンが灰色に切り替わることを確認。
-
再び 1. のタブを選択し、アイコンが水色に切り替わることを確認。
-
その状態で拡張アイコンをクリックし、フォーム左下のログアウトをクリック。アイコンが灰色に切り替わることを確認。
準備
- bootcamp本体にログインし、「日報・言及記事の管理」ページの記事一覧を表示しておく。
- Chrome拡張にもログインしておく。
手順
-
次の未登録記事を開く。
https://maimux2x.hatenablog.com/entry/2026/05/31/173054 -
拡張アイコンをクリックしてフォームを開く。
title・published_atを入力して登録し、アイコンが水色に切り替わることを確認。 -
記事一覧に 2. で追加した記事が反映されることを確認。
-
再びフォームを開き、
title・published_at・memoを適当に編集して登録する。 -
編集した内容が記事一覧にも反映されることを確認。
-
再びフォームを開き、左下の削除をクリック。アイコンが灰色に切り替わることを確認。
-
記事一覧から該当の記事が消えていることを確認。
title・published_at は必須項目です。それぞれ未入力の状態で登録を試み、「titleを入力してください」などのエラーが表示され、登録できないことを確認する。
状態に応じて、ポップアップに「すでに登録済みのBuzzです」などのメッセージが表示されます。(1)〜(3) の確認を進める中で、メッセージに不自然な点があれば報告してください。
この拡張機能は Manifest V3 で、ビルド不要でそのまま extension/ ディレクトリを読み込んで動作します。接続先は extension/config.js の BASE_URL で切り替えます(本番:https://bootcamp.fjord.jp、ローカル開発:http://localhost:3000)。ログインは /api/session で JWT を取得し、chrome.storage.local に保存して各APIリクエストの Authorization: Bearer ヘッダに付与します。コードのlint/formatは npm run lint / npm run fix で実行できます。