5Elements of Nature AI活用ハンズオン
実践 Claude Code

ワンクリックで仕事が片付く
Chrome拡張機能を作る

「こんな機能が欲しかった」を、その場で形にします。プログラムは書きません。書くのは日本語の指示だけです。本編3時間と、作ったものを社内に出すためのオプション回1時間の2回セットです。

受講者向けの配布ページです。検索エンジンには登録していません。

このページは何か

講座で使うもの一式の、置き場所です

参加前に、配布キットをパソコンに落として展開しておいてください。中身は当日そのまま使います。うまくいかなくても、そのままお越しいただいて構いません。当日いちばん最初に、全員そろってこの作業をします。

キットの中身 1

Claude Code 用の手順書

Chrome拡張機能づくりだけを専門にする設定です。作業フォルダの .claude の中へ入れます。

キットの中身 2

完成版 3本

すぐ動く見本です。うまくいかないときは、これを読み込めば先へ進めます。

キットの中身 3

導入手順

拡張機能をChromeに入れる4ステップ。所要2分です。

キットの中身 4

情シス向け説明書

通信・権限・データの取り扱いと、想定質問9問。そのまま提出できる形です。

読みものはWebに置いています コピーして使う指示文は、ハンズオン資料のページからどうぞ。

ファイルを探すより速く、改善したものがそのまま届きます。手元のファイルは更新されません。

当日つくるもの

3つから、自分で選びます

どれも作り方は同じで、かかる時間もほぼ同じです。ご自身の仕事で、明日いちばん使いそうなものを選んでください。選べなくても大丈夫です。当日、実物をお見せしてから選んでいただきます。

つくるもの何ができるか要求する権限
テキスト差分チェッカー新旧2つの文章を貼り付けて、変更箇所だけを色分けで出します。契約書・規程・原稿を突き合わせる方に。権限なし
カラーピッカー画面上の色をスポイトで取得し、HEX / RGB / HSL に変換します。履歴10件。デザイン・資料づくりをする方に。storage
画像埋め込みツール画像を data URI に変換して、Markdown や HTML に直接埋め込みます。サイズ縮小つき。権限なし
この講座の前提 サーバーもドメインも要りません。外部との通信を一切行いません。

3本とも、閲覧履歴を読む権限も、任意のサイトへアクセスする権限も要求していません。開発者ツールの Network タブを開いたまま操作しても、リクエストは1件も増えません。これが、社内で使えるかどうかの分かれ目になります。

当日までの準備

お申し込み前に、ひとつだけ

この講座では、AIのソフトをパソコンに入れて、ご自身の仕事の内容を入力しながら道具を作ります。お勤め先のパソコンでご参加される方は、あらかじめ社内のご承認をお取りください。確認の進め方が分からない場合は、お申し込み前にご相談いただければ、そこからご案内します。

用意するもの確認すること
ノートパソコンWindows・Mac どちらでも大丈夫です。お勤め先のパソコンでご参加の方は、事前に社内のご承認をお取りください。
Claude の有料プラン契約済みで、ログインできる状態にしておいてください。受講料とは別に必要です。これは Anthropic 社へのお支払いで、当社の売上にはなりません。無料プランのままでは、当日ご一緒に進めることができません。
Claude Codeパソコンに入れて、一度起動できるところまで。ご契約だけでは使えません。入れ方は こちらの手順書 に7ステップで書いてあります。20〜30分です。当日は、まだの方のための時間も最初に取ってあります。
Google Chrome入っていない方は、当日までに入れておいてください。
電源アダプター3時間使います。バッテリーだけだと足りないことがあります。
この配布キットダウンロードして、展開まで済ませておいてください。
展開したあと

やっておくこと

  1. ZIP を展開するWindows は右クリックから「すべて展開」、Mac はダブルクリック。パスワードは要りません。
  2. 作業フォルダを作るWindows なら C:\Users\<ユーザー名>\0_拡張機能\、Mac なら ~/0_拡張機能/。Dropbox・OneDrive・iCloud の中には作らないでください。
  3. Claude Code をまだ入れていない方は、先に導入を入れ方の手順書に7ステップで書いてあります。うまくいかなくても当日一緒にやります。
  4. キットの中身を作業フォルダへ入れる手順はハンズオン資料の「① 準備する」に。AIに1行頼むだけで済みます。
注意 同期フォルダの中に作業フォルダを置かないでください。

同期の途中でファイルが入れ替わり、一度動いたものが突然壊れます。原因が分かりにくく、その場では直せません。

よくある質問

お寄せいただく質問

プログラミングの知識は要りますか
要りません。この講座で書くのは日本語の指示だけです。コードはAIが書きます。
パソコンが得意ではないのですが
大丈夫です。この講座は、今日が初めての方に合わせて作ってあります。分からなくなったら手を挙げていただければ、その場で一緒に直します。時間内に完成しなくても構いません。資料だけで、ご自宅から続きができます。
作ったものは、あとから壊れませんか
拡張機能は削除すればきれいに消えます。ただし、当日オンにするデベロッパーモードと隠しファイルの表示は、そのまま残ります。戻したい方は、同じ場所でスイッチを切ってください。作ったフォルダも残るので、要らなければフォルダごと消してください。戻し方まで当日ご案内します。
会社のパソコンでも参加できますか
できます。ただし事前に社内のご承認をお取りください。会社によっては、拡張機能の追加やソフトの導入に決まりがあります。作ったものを実際に社内で使うところまで進めたい方は、その承認の取り方と、提出する書類の作り方を、オプション回で手順ごと扱います。
インターネットに何か送信されますか
配布している完成版3本は、一切送信しません。すべてブラウザの中だけで処理します。拡張機能を開いた状態で F12 を押し、Network タブを選んで一通り操作すると、リクエストが1件も増えないことをご確認いただけます。
作ったものを社内で使いたいのですが
オプション回で、情報システム部門に提出する書類の作り方を扱います。キットに入っている「情シス向け説明書」が、その見本です。社内審査の基準は会社ごとに異なるため、「必ず承認されます」とは申し上げられません。