環境がわかるブラウザ拡張を作ってみて、Chrome Storeに出してみた

こんにちは。chidakiyoです。

AIいいですねー、AI。 物理的なものは3Dプリンターで出力できて楽しんでいましたが、ちょっとあんなツールほしいな、というのがAIですぐ作れちゃいますね。

そんな感じなので、ブラウザ拡張を作ってみて初めてChrome Storeに出してみました。

はじめに

みなさん、検証環境と思って触ろうとしたら、「あれ、これ、本番じゃない？」って肝を冷やしたことはありませんか？

管理画面をいくつも開いて作業していると、タブがずらーっと並んで、どれがどの環境だか分からなくなるんですよね。 見た目がだいたい同じなので余計にたちが悪い。「テストデータ入れとくか」ってポチッとやったら、あれ、これ本番のURLじゃない…？みたいな。ヒヤッとするやつです。

ずっとそれっぽいツールを使っていたのですが、 帯に短し襷に長し、という感じであまりしっくり来なかったので自分で作ることにしました。作ってみたよ、の記事です。

何を作ったのか

本番ツール（Honban Tool） という名前のブラウザ拡張です。そのまますぎる名前。

chromewebstore.google.com

やることはシンプルで、いまアクセスしているページが「本番」なのか「ステージング」なのか「開発」なのかを、URLから自動で判定して、画面上に目立つように表示してくれるというものです。

たとえば本番環境を開くと、ページの周りに赤い枠がドーンと出る。これだけ。これだけなんですが、これがあるだけで「あ、いま本番にいるんだな」って身体が勝手に緊張するので、うっかり操作がぐっと減ります。

どんな表示ができるの

表示方法は好みで選べるようにしました。全部ONにするとうるさいので、案件ごとに使い分ける感じです。

• ページ全体の枠 … 画面のふちに色付きの枠。いちばん分かりやすい
• 上部バナー … 画面の上に「本番環境」みたいな帯を出す
• 隅のバッジ … 端っこにちょこっとラベルを出す（控えめ派向け）
• favicon の書き換え … タブのアイコンの色を変える。タブがいっぱい並んでても見分けられる
• タブ名のプレフィックス … タブのタイトルに「[本番]」みたいな印をつける

個人的には favicon 書き換えが地味に便利で、タブを大量に開く人ほど効いてくると思います。

どうやって環境を判定してるの

URL（ホスト名）のルールで判定しています。

example.com は本番、staging.example.com はステージング、みたいなルールを設定画面から登録しておくと、あとは自動で判定してくれます。ワイルドカードや正規表現にも対応しているので、だいたいのパターンは吸収できるはずです。

色やラベルも環境ごとに自由に決められます。「本番は赤」「ステージングは黄色」みたいな、自分の中のお約束をそのまま設定に落とし込める感じですね。

設定はツールバーからサッと

ツールバーのアイコンをクリックするとポップアップが開いて、その場で設定をいじれます。わざわざ設定ページを開かなくていいので楽。

あと、複数の案件を扱っていると設定がどんどん増えていくので、グループでまとめて管理できるようにしました。案件ごとにグループを作っておいて、使わないときはグループごとまとめてOFF、みたいな運用ができます。

設定は JSON で書き出し／読み込み もできるので、チームメンバーに「これ入れといて」と設定を配ることもできます。環境ごとの見た目をチームで揃えられるのはけっこう便利じゃないかなと。

ちょっと実験的な機能

「表示するだけじゃなくて、いっそ止めてほしい」という気持ちもあるので、本番でフォームを送信しようとしたら確認ダイアログを出すという機能も入れてみました。

ただこれは正直まだ β です。というのも、ネイティブの <form> の送信にしか効かなくて、React とかの SPA（fetch/XHR で送信するタイプ）だと捕まえられないんですよね。 なので過信は禁物ということで、UIにもβバッジをつけて注意書きしてあります。 デフォルトはOFFです。

単にブラウザ拡張だとこんなところまで触れるので試しにやってみた。という感じでぜんぜん実用的な代物じゃないです。

プライバシーまわり

「ページの内容を読んで外部に送ってるんじゃないの？」というのは気になるところだと思うので、先に書いておきます。

ページの内容を読み取ったり、外部サーバーに送ったりは一切していません。 設定はブラウザの中に保存されて、同じアカウントの自分の端末どうしでだけ同期されます。権限も storage と activeTab だけに絞っていて、必要最小限にしてあります。

そういうの気をつけて作る必要があるんだなーという気づきがありました。 申請のときにコードをデプロイすると必要とする権限を調べてそれに対してコメントをそれぞれ書くという手続きがあります。

作ってみて

正直、機能としてはめちゃくちゃ地味です。枠を出すだけですからね。

複数環境をラベルで束ねて管理とか、その環境ごとdisableにするとか、ちょっと開発をやっている人には便利かも。という機能が地味に入っています。

同じように「本番こわい」と思っている人に届くといいなと思います。

せっかくなのでChrome Storeの画像を貼っておきます。

ではでは。

Cloud Code使うために課金するぞ。の巻

こんにちは。chidakiyoです。

前回 は Claudeをアプリケーションで利用してみるというところまでやってみましたが、実際には無料の段階ではClaude Codeまでは利用できないので今回は課金してみます。
（課金しないと、アプリ上で、「Chat」「Cowork」「Code」を選択するタブも表示されません）

課金の仕方

アプリからだと左下の「アカウント名」の部分を押し、「プランをアップデート」を押します。

プランは「Pro」と「Max」を選択出来ます。
Claude Codeを使う場合には最低限「Pro」を選択する必要があります。

課金してみる

たくさん使いそうなのでMaxプランで課金することにしました。

Maxプランを選択すると、私の場合にはStripe Linkを登録済みのものがありましたので、SMSで送られた認証コードと、住所などを入力するだけで課金が完了しました。

カードを利用する方はカードの情報を入力すると普通に使えそうです。

画面の変化

先にも書いたように、課金すると「Cowork」「Code」を選択するタブが出てきます。

Claude Codeを利用したい場合には「Code」を押すと、画面がCodeのモードになります。

今回は、課金までの記事なのでここまで。

Chatを利用するにしても、Opus 4.7 のモデルが使えるようになってるので良い感じですね。

ではでは！

Claude .ai / Claude Codeを使ったことがない人が使うためのかんたんなやり方 - 寝ても覚めてもこんぴうた

Claude .ai / Claude Codeを使ったことがない人が使うためのかんたんなやり方

こんにちはchidakiyoです。
他のAIのツールはいろいろ使っていましたが、Claude Codeがいいよ！って多方面から言われるので、なんぼのもんじゃい！という感じで使ってみます。

今回は、何もわからない人が使い始めるサポートになるかなという感じの初歩的なやつを書くつもりです。

Claude Codeとは

細かくはよそに書かれているので書かないですが、一言だけ言うと「ファイルを直接触れるAI」です。

普通のclaude.ai（アプリ/ブラウザで使う方）は、チャットで話すだけ。でもClaude Codeは、あなたのパソコン上のファイルを直接読んで、書き換えて、実行してくれます。「指示したらAIが実際に手を動かしてくれる」イメージです。

まず知っておくこと

とても大事な話ですが、有料プランが必要です。

残念ながら、Claude CodeはFreeプランでは使えません。 Pro（月2,000円程度）以上のプランが必要です。 ただ、claude.aiのブラウザ版と同じアカウント・同じプランで使えるので、追加で契約が必要なわけではないです。すでにProに入っている人はそのまま使えます。

claude.ai単体は無料でも使えます。

インストールする

始め方には以下の4つの方法があるようです

1. ターミナル
2. デスクトップアプリ
3. VS Code
4. JetBrains

エンジニアでもなく使ってみたいという人が最初に利用するなら、2のアプリが良いと思います。
Cursorとか使ってる人はVS Codeで始めるのが良さそうですし、JetBrains使ってた人はそれがいいと思います。

黒い画面でカッコつけたい人はターミナルが良いでしょうね。

まずはデスクトップアプリでClaude.aiを使って雰囲気を掴んでみましょう。

ダウンロードする

https://claude.com/download にアクセスして、Mac版またはWindows版をダウンロードします。

Macの方はダウンロードした .dmg ファイルを開いて、ClaudeアイコンをApplicationsフォルダにドラッグするだけ。Windowsの方はインストーラーを実行すればOKです。

アプリを起動する

起動するとこんな画面が出ます。

「始める」を押して始めると良さそうです。

サインイン / アカウント

順番に進めると、サインインを求められます。

メールアドレス認証だと、受け取ったメール内のリンクから直接アカウント作成ができるので体験がいいですね。

続けてプランを選ぶ画面が出ます。
一旦、Freeで始めてみましょう。後からもちろん変更できますので。

次にチャットの注意点と、データをトレーニングに使いますけどいいですか？というチェックが出てきます。
このチェックは基本的には外したほうが良いかなと思います。特に仕事で使う場合には。

次に、名前を教えてくれって出てきますので、適当にお名前を教えてあげます。

仕事も聞かれるので教えてあげましょう（独自のトピックがあります、を押すとスキップされるようです）

で、始まります。

チャットしてみる

なるほどね、無料プランだとモデルが、Sonnet 4.6 までしか使えないようですね。
Opusを使いたい気持ちをぐっと抑えて、ちょっと使ってみましょう。

この辺は、chat-gptや、geminiと使い方はだいたい一緒ですね。
文章を作成したり、ちょっとしたスクリプトを作成したりするときには右にアウトプットのペインが出るのは便利ですね。

ひとまず、最初の手触りとしては良さそうです。

ではでは！

axios へのサプライチェーン攻撃でやったこと 2026-03-31

これは作業したメモです。

環境

• Cloud Build
• Artifact Registry
• CloudRun

状況

• package-json的にはaxiosの "^1.4.0" という指定をしていた
• 今日午前中にGitHub Actions経由でCloud BuildでBuildし、CloudRunに適用されている

やったこと

Google Cloud の Artifact Registryにスキャンを実行

→ 自動でのスキャンは残念ながらoffになっていた。。。

スキャンコマンド

gcloud artifacts docker images scan [Artifact URL] --remote

ローカルでも実行できるが、依存関係を考えると、CloudShellで実行するのが良さそう。

結果

→ スキャン機能をoffにしているとコマンドでも実行できないっぽい（それは当然だね）

dockerの中のファイルを直接見てみる

最終的にはこれ

# dockerのイメージを一時的に作成する
docker create --name check_axios {IMAGE_URL}

# (1)axiosのバージョンを直接見る
docker cp check_axios:/node_modules/axios/package.json - | tar -xO | grep '"version":'

# (2)今回の問題で強制的にインストールされるパッケージが入っていないか見る
docker cp check_axios:/node_modules/ - | tar -t | grep "plain-crypto-js"

1. では、1.4.0 という感じにあっていれば良さそう。1.4.1だったらNG

2. では、何も行が表示されなければOK.

一旦こんな感じでのチェックをしましたが、なんかいい方法があれば教えてください。

ではでは。

はてなブログにjavascriptを埋め込めるの！？って思ったので試してみた

こんにちは。

タイトルのとおりですが、ちょっと調べ物をしていたらはてなブログにスクリプトを埋め込んでいる記事を見かけたので、ちょっと試してみます。

スクリプトテスト

入力した文字に「！」をつけて表示します。

結果：

作り方

うーん、動きますね。 色々安全のことを考えてscriptタグが動かないものと思い込んでたので意外でした。

今回書いたスクリプトはこんな感じ

<input type="text" id="myInput" placeholder="文字を入力">
<p>結果：<span id="result"></span></p>

<script>
  const input = document.getElementById('myInput');
  const result = document.getElementById('result');
  input.addEventListener('input', () => {
    result.innerText = input.value + "！"; // 入力に「！」を付けて表示
  });
</script>

入力項目と、出力項目を作り、入力項目への入力イベントに対して出力する処理を入れるというhello world的なコードですね。

今まで記事を書くだけと思ってたけど、ちょっとしたツールとか作ってそのままペタっとできるのは便利かもしれない。

というわけで便利ツールの公開にご期待ください（やる気が出たら）

ではでは。

LogicoolのG HUBがおかしくなっていたので直した

緊急でblogを書いています。（しつこい）

今朝Macを利用していたら、ロジクールG Pro X SuperlightのためにインストールしているG HUBのプロセスがハングしておかしくなっていた。

プロセスをkillして再起動したけど治らなかったのでMac OSを再起動しても全然だめ。

しょうがないので放置していたけど対策がわかったのでメモ。

原因と対策

原因は、「Logitechは、macOS版アプリの「開発者証明書の期限切れ」であることを認めた。」と記事になっていたので、アプリケーションの中の証明書の有効期限が切れていた的な感じだろう。

対応としては、パッチを当てれば治るみたい（証明書をゴニョっとしてくれてるんだと思う）
公式の注意点としては「アンインストールはしないで」と言っているので、注意。

対応方法（Macのみです）

G HUB

ステップ1: G HUBの最新インストーラーをこちらからダウンロード
ステップ2: ダウンロードした「パッチ」インストーラーをダブルクリック
ステップ3: 「ソフトウェアはすでに存在します」と表示されたらインストーラーを終了

ステップ4: G HUBを起動
ステップ5: デバイス、設定、カスタマイズ内容がすべて元通り復元されます

要するに、パッチのインストーラーを実行すると勝手に証明書が書き換わるので、それですでにインストールしてあるアプリを起動すればいいよ。
みたいな感じだと思う。

ではでは。

参考サイト

Macでロジクール製品に問題発生。Logi Options+とG HUBの障害でカスタマイズ機能が全停止 - PC Watch

Options+ および G HUB macOS 証明書の問題 – Logicool サポート + ダウンロード

Slackでチャンネルのリストから非表示になってる（消えてる）ものがある気がするので原因を調べた

緊急でblogを書いています。（やってみたかった）

ここ数日、Slackの複数のworkspaceでチャンネルがいくつか非表示になっている気がしたのですが、そういう挙動に仕様変更されたのか、単にSlackが不調なのかわからず放置していました。

やっぱ気になるので調べてみた

不調だと思って放置していたにしても、なんとなく恣意的に消えているような気がする。
あと、自分は文字で認識するというより「画面上の位置」で認識するタイプなようで、どのようなツールでも表示場所が変わることを結構嫌います。

そんな自分には場所が勝手に変わってしまうのがとても不満だったので調べてみました。

結果

結論をまず書くと、これは仕様変更のようです。

「workspace名の右側の歯車マーク」→「Filter and sort」

と選択するとなぞの

「Active only [NEW]」 の表示が！！！

どうやら直近30日動いていないチャンネルは非表示にする設定にデフォルトで変更されていたようです。

最後に

そんな感じで不具合かと思っていたけど、微妙な挙動変更をサイレントに実施され、微妙に嫌な気持ちになったという話でした。

ここから学んだのは、良かれと思った挙動変更でもそれを望まないユーザがいて、それによってせっかくのプロダクトに対してもケチが付いてしまうということがあり得るな。ということでした。

このあたりはどうやって行くのが良いかは私にはアイディアはありませんが、こうしたほうが良いよ、とか、あのプロダクトではこのようにしていたよ。みたいな話があればコメントで教えてほしいです。

ではでは。