📝 この記事について
前回の記事「AIと自動化でイベントを運営してみた話」の続きです。
今回は「どうやって環境を整えたか」を、まるちゃんと先生のかけ合いで解説します。
「ターミナルって何?」「Nodeって何者?」
という疑問をまるっと解消します!
先生、前回の記事でターミナルとかclasp(クラスプ)とか出てきたけど、
そもそも何なの?
だよね、急に専門用語が出てきたね。
まず全体の大きな地図から説明するね。
今回の環境づくりで登場するものはこれだけある:
| 名前 | 一言で言うと |
|---|---|
| ターミナル(PowerShell) | コマンドを入力する「黒い画面」※Windowsに初めから入ってる。 |
| Node.js(ノード) | ターミナルでプログラムを動かす「エンジン」 |
| npm(エヌピーエム) | ツールをインストールする「アプリストア」※Node.jsに付属 |
| clasp(クラスプ) | GoogleのプログラムをPCから操作する「リモコン」npmでインストール |
| Claude in Chrome | AIがブラウザを操作できるようにするGoogleChromeの「拡張機能」 |
なんか5人も出てきた……。
大丈夫、それぞれの「役割」がわかれば怖くないよ。
ひとつずつ見ていこう!
ターミナル以外は初耳です。
1. ターミナル(PowerShell)って何?
Windowsでは「PowerShell(パワーシェル)」って呼ぶよ。
見た目はこんな感じ:
PS C:Usersogita>
パソコンに初めからあるやつですよね。
黒い画面に文字を打つという。
原始的ややつ。
こわい。
わかる(笑)。
でも仕組みはシンプル。
「コンピュータへの命令を文字で打ち込む場所」なんだよ。
コマンド、ですよね。英語の。
普段マウスでやっていることを、
文字(英語)で伝えてるだけ。
頑張って覚えます!
実際に入力するコマンドはそれほど多くないから大丈夫!
| マウス操作 | ターミナルで同じことをすると |
|---|---|
| フォルダを開く | cd フォルダ名 |
| ファイル一覧を見る | dir |
| アプリをインストール | npm install ツール名 |
あ、選んでダブルクリックみたいなことを「文字でやってる」んですね!
そう!
ターミナルが苦手な人は
「何をしているかわからない」
から怖いだけで、
やってることはいつもと同じなんだよ。
2. Node.js(ノード)って何?
Node.jsって何のためにインストールするんですか?
Node.jsは「JavaScriptをパソコン上で動かすエンジン」だよ。
もともとJavaScriptはブラウザの中でしか動かないもだから。
つまりNode.jsは中身はJavaScriptなわけですか?
いや、Node.jsはJavaScriptではないんだよ。
Node.jsをいれるとWebだけでなく
パソコン上でも動かせるようになるというものだんだ。
実行環境というやつですね。
まさにそれ。
Node.jsがあると、ブラウザなしでもJavaScriptのプログラムを実行できる。
今回使うclaspもJavaScriptで作られているから、Node.jsが必要なんだよ。
わかりました。
そもそもですが、claspを使うためにNode.jsを入れるんですよね。
そうだね。
たとえて言うとNode.jsは、鍋料理でいうところのコンロみたいな存在。
コンロ?
そう、鍋に冷たい水と野菜や肉の入っただけでは食べられないけど、
コンロ(Node.js)で鍋を温めることによって食べられる鍋料理(clasp)になるみたいな。
なんとなくイメージがわかってきました。
鍋とコンロのイメージですね。
うん、鍋料理(clasp)を作るために、まずコンロ(Node.js)を設置する感じ。
つまりclaspが鍋料理で、
Node.jsがコンロのイメージだよ。
なるほど
それでNodeとclaspがWebでしか実行できなかったGASを
パソコンでも実行できるようにするんですね。
そう、Nodeとclaspはセットで機能するって覚えておいて。
了解しました!
👉 https://nodejs.org にアクセスして「LTS」と書いてある方をダウンロード。LTSは「Long Term Support(長期サポート)」の略で安定版のこと。迷ったら必ずLTSを選ぼう。
node -v
▶ v24.15.0 と表示されれば成功!
3. npm(エヌピーエム)って何?
Node.jsをインストールしたら「npm」ってのも使えるようになりましたよね?
そうそう!npmはNode.jsについてくる「ツールのインストーラー」だよ。
スマホでいう「App Store」みたいなもの。
なるほど、そういうイメージでいろいろ追加できるんですね。
そうだね。
npmは世界中の開発者が作ったツールをコマンド1行でインストールできる。
Node.jsを入れたら自動でnpmも使えるようになるから、別々にインストールしなくてOK!
npm -v
▶ 11.12.1 と表示されれば成功!
Node.jsを入れたらnpmもセットでついてくるんですね、
了解です。
4. clasp(クラスプ)って何?
WindowsにNode.jsをインストールできたら、
準備に時間がかかったけど、いよいよ本題のclaspだよ。
インストール終わりました。
claspってなんですか?
claspは一言でいうと
「GoogleのプログラムをPCから操作できるリモコン」
といったイメージ。
なるほど、
Googleはインターネットからの操作が主ですからね。
そうだね。
普段GASを使うときはブラウザを開き、
スクリプトエディタを開いてコードを書くよね。
はい、実際にコード書くまで一苦労です。
でもclaspがあると、自分のPCのファイルを書き換えるだけでGoogleに自動で反映できる。
そっちの方が断然はやいですね!
| 方法 | GASを使う手順 |
|---|---|
| claspなし | ブラウザ → スクリプトエディタ → 手でコード貼り付け → 保存 |
| claspあり ✨ | PCのファイルを編集 → コマンド1行 → Googleに自動反映! |
claspあると手間がぜんぜん違いますね!
しかもAIがファイルを書いてclaspが送る、ってなると……
ほぼ全自動じゃないですか!?
そういうこと!
それがゴールだよ。
ではnpmでclaspをインストールす方法を教えてください
OK!
書くコードはこれだけ
npm install -g @google/clasp
-g って何ですか?
いい質問!-g は「global(グローバル)」の略。
「このパソコン全体で使えるようにインストールする」という意味だよ。
なるほど、、-gがないと一部しか使えないってことですか?
そうだね。-gなしだと今いるフォルダしかclaspを使えない形になるから、
使える範囲が狭まってしまう。
ツールを入れるときは基本-g(グローバル)をつけよう。
インストールするときは基本 -gですね!
clasp -v
▶ 3.3.0 と表示されれば成功!
5. claspでGoogleアカウントにログイン
claspをインストールしたら、
Googleアカウントとつなぐためにログインするよ。
clasp login
実行するとブラウザが開いてGoogleのログイン画面が出る。使いたいGoogleアカウントで「すべて選択」→「続行」を押すだけ。ターミナルに You are logged in as ○○@gmail.com. と表示されれば成功!
6. Apps Script APIを有効にする
claspを使おうとしたら
「Apps Script APIを有効にしてください」
って言われました!
これは最初の1回だけ必要な設定だよ。
こちらにアクセスしよう → https://script.google.com/home/usersettings
「Google Apps Script API」のトグルを「オン」にするだけ!
これも何のためにするんですか?
Googleが「外部のアプリ(clasp)から
GASを操作することを許可する」
スイッチを入れるってこと。
GASを使えるようにするためのGoogle側の関所を通すって感じですね
そうだね、デフォルトはオフになっているから
最初に一度ONにする必要があるんだよ。
なるほど
ONにしても反映まで2〜3分かかることがあるから、
エラーが出ても少し待ってから再試行してみてね。
はい!
7. Claude in Chrome って何?
Claude in Chrome(クロード イン クローム)は、
ChromeブラウザにAI(Claude)の機能を追加する
「拡張機能(プラグイン)」だよ。
拡張機能って、Chromeに機能を足すやつですよね?
これを入れると、AIがブラウザを直接操作できるようになる。
AIが勝手にGoogleChromeを動かすんですか?
すごいけど、なんかこわい!
たしかに!
それを払しょくするにはまず仕組みを理解する必要があるよね。
どういったものなんですか?
Chrome in Claudeはね
ブラウザで行う
クリック操作と
文字や数字の入力と
ページ移動の操作を
を自動でやってくれるんだ。
やっぱり怖いです!
なんでも勝手にやるわけではなく、
指示したことだけやるので、
怖がらなくても大丈夫だよ。
指示したこと以外はしないんですね。
そう、自動運転ではなく部下みたいなイメージ。
部下ならなんとなく安心できます
そう、部下にChromeの操作をおねがいして、
むずかしいGASの操作を実行してもらおうってわけ。
なるほど!GASの操作を部下にやってもらうイメージですね!
そう!ChromeでGASを書く操作とAI (Cowork ※Claudeのデスクトップアプリ)の操作を部下に任せるイメージ。
自分でこの操作を毎回やるのは大変だからね。
はい、その操作はぜひ部下に任せたいです!
そうだよね。
Chrome in Claudeを入れればば、
部下がボタンクリック、テキスト入力、JavaScriptの実行まで
全部がやってくれる。
すごい、、
そのとおり!
今回はClaudeがスクリプトエディタを開いて、
コードを貼り付けて、実行ボタンを押す、
という操作を全部やってくれたんだよ。
全体の流れを整理:GASをPC上で動かす設定の構築
| Step | やること | 方法 |
|---|---|---|
| Step 1 | Node.jsをインストール | nodejs.orgからダウンロード(LTS版) |
| Step 2 | claspをインストール | npm install -g @google/clasp |
| Step 3 | Googleアカウントにログイン | clasp login → ブラウザで許可 |
| Step 4 | Apps Script APIをONにする | script.google.com/home/usersettingsで設定 |
| Step 5 | Claude in ChromeをChromeに追加 | CoworkアプリからインストールOK |
| Step 6 | 完成!あとはClaudeに任せる | GASをPC上で動かせる環境ができた |
ターミナルの画面でよくあるつまずきポイント
| つまずき | 原因 | 解決策 |
|---|---|---|
| node -v と打っても何も出ない | インストールが終わっていない | nodejs.orgから再インストール |
| clasp と打っても「見つかりません」と出る | ターミナルを再起動していない | ターミナルを閉じて開き直す |
| clasp login でブラウザが開かない | ポートがふさがっている | セキュリティソフトを一時オフ |
| clasp push で「APIを有効にして」と出る | Apps Script APIがOFFのまま | usersettingsでONにする |
| ONにしたのにまだエラーが出る | 反映に数分かかる | 2〜3分待って再度試す |
まとめ
これって初心者でもできますか?
正直、どの初心者かによる。
基本的なパソコン操作に慣れている必要はあるね。
ですよね。仕事では毎日エクセルやワード使ってます。
うん、仕事で日常的にパソコンは使っているなら大丈夫。
プログラマーである必要はまったくない。
Step 1〜4は手順どおりにやればできるよ。
なるほど
ほんとうに難しいのは「何を作るか・何をClaudeに頼むか」で、
そこは目的とアイデアが大事。
AIにやってほしいことを明確に指示することが大事なんですね。
そうだね。
プログラムの知識がなくても、
「こういう仕組みにしたい」
というイメージを言葉で伝えられれば、
Claudeが実装を手伝ってくれる。
AIのサポートで一緒に作ってく感じですね!
まさにそれ!
「自分でプログラムを書く」より
「AIとチームで作る」スキルが大事になってきてると思う。
AIは友達!
こわくない!
その調子!
キュリオステーションでもそういった使い方をこれから伝えていきたいな。
次回は「開催判定を自動化する」仕組みづくりを解説するよ。
お楽しみに!