Skip to content

Latest commit

 

History

55 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

fjord buzz extension(バズ登録用 Chrome 拡張機能)

FBC(フィヨルドブートキャンプ)の「バズ」を、いま見ているWebページからワンクリックでかんたんにできるようにするGoogle Chrome用の拡張機能です。

拡張機能を入れると、ブラウザの右上に専用のアイコンが表示されます。気になる記事やページを開いた状態でそのアイコンを押すと、ページのタイトルやURLを入力するフォームが開き、そのまま登録できます。すでに登録済みのページを開いているときは、アイコンの見た目が変わって「登録済み」だとわかるようになっています。

さらに、X(旧Twitter)・はてなブックマーク・Google 検索で検索しながらバズを登録していくときは、すでに登録済みの記事リンクに自動で「✓ 登録済み」の目印が付くので、二重チェックを防げます(6. X・はてなブックマーク・Google 検索で登録済みのリンクに印を付ける)。

この拡張機能は Chrome ウェブストアでは配布していません。以下の手順で、ファイルを手元にダウンロードして読み込む形で使います。少し手順は多いですが、画面の指示どおりに進めれば10分ほどで完了します


目次

  1. 必要なもの
  2. ファイルをダウンロードする
  3. Chrome に拡張機能を読み込む
  4. アイコンを固定して使いやすくする
  5. 使い方
  6. X・はてなブックマーク・Google 検索で登録済みのリンクに印を付ける
  7. アップデート(新しいバージョンに更新する)方法
  8. 困ったときは(トラブルシューティング)
  9. 動作確認手順(本番環境)

1. 必要なもの

  • Google Chrome(パソコン版) お使いのパソコンに Chrome が入っていない場合は、先に https://www.google.com/chrome/ からインストールしてください。
  • FBC(フィヨルドブートキャンプ)のアカウント 拡張機能にログインするときに、いつも使っている ログイン名パスワード を入力します。

スマートフォンやタブレットのChromeでは利用できません。パソコンでお使いください。


2. ファイルをダウンロードする

拡張機能のファイル一式を、GitHubからダウンロードします。

  1. こちらのページを開きます 👉 https://github.com/fjordllc/bootcamp-buzz
  2. ページ内にある緑色の 「Code」 ボタンをクリックします。
  3. 出てきたメニューの一番下にある 「Download ZIP」 をクリックします。
  4. bootcamp-buzz-main.zip というファイルがダウンロードされます(通常は「ダウンロード」フォルダに入ります)。
  5. ダウンロードした ZIP ファイルを ダブルクリックして解凍(展開) します。
    • Windows の場合:右クリック →「すべて展開」を選びます。
    • Mac の場合:ダブルクリックすると自動で展開されます。
  6. bootcamp-buzz-main という名前のフォルダができます。このフォルダは削除せず、わかりやすい場所(例:「書類」フォルダ)に置いておいてください。

⚠️ 重要: このフォルダを消したり別の場所へ動かしたりすると、拡張機能が動かなくなります。使い続けている間は、置いた場所に残しておいてください。


3. Chrome に拡張機能を読み込む

  1. Chrome を開き、画面上部のアドレスバー(URLを入れるところ)に、次の文字をそのまま入力して Enter キーを押します。

    chrome://extensions
    

    👉 拡張機能の管理ページが開きます。

  2. 画面の 右上にある「デベロッパーモード」のスイッチをオン(青色)にします。

  3. 左上に出てくる 「パッケージ化されていない拡張機能を読み込む」 というボタンをクリックします。

  4. フォルダを選ぶ画面が開きます。ここで、先ほど解凍した bootcamp-buzz-main フォルダの中にある extension というフォルダを選んで「開く」(Mac は「選択」)を押します。

    bootcamp-buzz-main/
    └── extension/   ← このフォルダを選びます
    

    ⚠️ よくある間違い: 一番外側の bootcamp-buzz-main フォルダではなく、その中の extension フォルダを選んでください。extension フォルダの中に manifest.json というファイルが入っているのが目印です。

  5. 拡張機能の一覧に 「fjord-buzz-extension」 が表示されれば、読み込み完了です 🎉


4. アイコンを固定して使いやすくする

読み込んだ直後は、アイコンが隠れていることがあります。いつでも押せるように、ツールバーに固定しておきましょう。

  1. Chrome の右上にある パズルのピース(🧩)のようなアイコン をクリックします。
  2. 一覧の中の 「fjord-buzz-extension」 の右側にある ピン(📌)マーク をクリックします。
  3. これで、Chrome の右上に拡張機能のアイコンが常に表示されるようになります。

5. 使い方

ログインする(最初の1回)

  1. 登録したいWebページを開いた状態で、右上の拡張機能アイコンをクリックします。
  2. ログイン画面が出たら、FBC の ログイン名パスワード を入力し、「Submit」 を押します。
  3. 一度ログインすれば、次回からは自動でログイン状態が保たれます。

バズを登録する

  1. 登録したいページを開いた状態で、拡張機能アイコンをクリックします。
  2. 入力フォームが表示されます。
    • title(タイトル):記事のタイトルを入力します。
    • url:いま開いているページのURLが自動で入ります(変更できません)。
    • published_at(公開日):記事の公開日を選びます。
    • memo(メモ):ひとことメモを自由に書けます。
  3. 「Submit」 を押すと登録完了です。

登録済みかどうかを確認する

  • いま開いているページがすでに登録されていると、拡張機能のアイコンの見た目が変わり、「登録済み」だとひと目でわかります。

修正・削除・ログアウト

  • 登録済みのページを開いてアイコンを押すと、登録済みの内容が表示されます。書き換えて「Submit」で上書き修正できます。
  • フォームの下にある 「削除」 リンクで、その登録を消せます。
  • 「ログアウト」 リンクで、拡張機能からログアウトできます。

6. X・はてなブックマーク・Google 検索で登録済みのリンクに印を付ける

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 を登録している場合は対象外です。
  • ページはスクロールで次々と読み込まれるため、判定に少し時間差が出ることがあります(表示された順に少しずつバッジが付きます)。

7. アップデート(新しいバージョンに更新する)方法

拡張機能が新しくなったときは、次の手順で更新します。

  1. 2. ファイルをダウンロードする と同じ手順で、最新の ZIP をダウンロードして解凍します。
  2. 古い bootcamp-buzz-main フォルダを、新しく解凍したものと同じ場所に置き換えます(元の場所と同じにするのがおすすめです)。
  3. chrome://extensions を開き、「fjord-buzz-extension」のところにある 更新(🔄 くるっと回る矢印)ボタン をクリックします。

置き場所を変えた場合は、3. Chrome に拡張機能を読み込む の手順でもう一度読み込み直してください。


8. 困ったときは(トラブルシューティング)

アイコンが見当たらない

4. アイコンを固定して使いやすくする の手順で、ピン留めしてください。

「マニフェストファイルがありません」などのエラーが出て読み込めない

→ 選ぶフォルダを間違えている可能性が高いです。一番外側のフォルダではなく、その中の extension フォルダmanifest.json が入っているフォルダ)を選んでください。

ログインできない/登録できない

→ 次を確認してください。

  • FBC の ログイン名・パスワードが正しいか(Webサイトにログインできるものと同じです)。
  • インターネットに接続されているか。
  • 一度「ログアウト」してから、もう一度ログインし直す。

急に動かなくなった

→ ダウンロードした bootcamp-buzz-main(または extension)フォルダを移動・削除していないか確認してください。フォルダを動かすと拡張機能が動かなくなります。元の場所に戻すか、3. の手順で読み込み直してください。

それでも解決しないとき

→ FBC のメンターや、GitHub の Issues ページ で相談してください。


9. 動作確認手順(本番環境)

開発・レビュー時に、拡張機能が正しく動くかを確認するための手順です。本番環境(https://bootcamp.fjord.jp)に接続して確認します。

事前準備

  • 2.4. の手順で拡張機能をインストールし、ツールバーに 『B』のアイコン をピン留めしておく。
  • 確認には FBC 本番環境の ID / パスワードを使用します。

拡張アイコンの色について

アイコンは状態に応じて 灰色 / 水色 の2色に切り替わります。

状態 アイコンの色
未ログイン、または未登録の記事を開いているとき 灰色
登録済みの記事を開いているとき 水色

(1) ログイン・タブ切り替え時のアイコン切り替わり確認

  1. Chrome拡張にログインしていない状態で、次の登録済み記事を開く。この時点ではアイコンは灰色のまま。

    https://sugiwe.hatenablog.jp/entry/ruby-silver
    
  2. 拡張アイコンをクリックするとログイン画面が開くので、本番の ID / パスワードでログインする。ログイン後、アイコンが水色に切り替わることを確認。

  3. 別タブで Yahoo など無関係のページを開いて選択し、アイコンが灰色に切り替わることを確認。

  4. 再び 1. のタブを選択し、アイコンが水色に切り替わることを確認。

  5. その状態で拡張アイコンをクリックし、フォーム左下のログアウトをクリック。アイコンが灰色に切り替わることを確認。

(2) 記事の CRUD(登録・編集・削除)の確認

準備

  • bootcamp本体にログインし、「日報・言及記事の管理」ページの記事一覧を表示しておく。
  • Chrome拡張にもログインしておく。

手順

  1. 次の未登録記事を開く。

    https://maimux2x.hatenablog.com/entry/2026/05/31/173054
    
  2. 拡張アイコンをクリックしてフォームを開く。titlepublished_at を入力して登録し、アイコンが水色に切り替わることを確認。

  3. 記事一覧に 2. で追加した記事が反映されることを確認。

  4. 再びフォームを開き、titlepublished_atmemo を適当に編集して登録する。

  5. 編集した内容が記事一覧にも反映されることを確認。

  6. 再びフォームを開き、左下の削除をクリック。アイコンが灰色に切り替わることを確認。

  7. 記事一覧から該当の記事が消えていることを確認。

(3) バリデーションの確認

titlepublished_at は必須項目です。それぞれ未入力の状態で登録を試み、「titleを入力してください」などのエラーが表示され、登録できないことを確認する。

(4) 表示メッセージの確認

状態に応じて、ポップアップに「すでに登録済みのBuzzです」などのメッセージが表示されます。(1)〜(3) の確認を進める中で、メッセージに不自然な点があれば報告してください。


(開発者向け)補足

この拡張機能は Manifest V3 で、ビルド不要でそのまま extension/ ディレクトリを読み込んで動作します。接続先は extension/config.jsBASE_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 で実行できます。

About

Chrome extension for bootcamp buzz.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages