導入（#0） AI開発をやってみよう（90分）

対象：初参加・パソコンくわしくない人。毎回のはじめに開催。Windowsパソコン前提。事前準備なしでOKです。当日一緒に入れます。

ゴール

帰るまでにこの3つを達成する。

WindowsにAI助手アプリ（OpenCode Desktop）が入って動く
AI助手に、どのプロジェクトでも作業フォルダの外を触らせない（全プロジェクト共通の安全設定）
オープンデータを使った1ページのWEBアプリを作って、ブラウザで見る

全体の流れ（90分）

時間	内容
0:00–0:25（25分）	1. OpenCode Desktopをインストール
0:25–0:45（20分）	2. プロジェクトフォルダ以外のアクセスを止める（セキュリティ配慮）
0:45–1:20（35分）	3. オープンデータでWEBアプリを作る（データ選び・ダウンロード含む）
1:20–1:30（10分）	片づけ・本編に合流

60分しかない日は、3を候補1（公衆無線LAN）1種類だけに絞ります。

スライド（当日の説明用）

当日はこのスライドで説明します。下でそのまま見られます（←→キーで進みます）。

別画面でスライドを開く

準備

Windowsパソコン（Windows 10/11、なるべく最新に更新）
- 個人用パソコン推奨。管理者権限のない会社支給PCでは、インストールできない場合があります
インターネット接続（会場のWi-Fiにつないでおく）

1. OpenCode Desktopをインストール（25分）

OpenCode Desktopは、言葉で頼むとプログラムを作ってくれるAI助手アプリです。今回はターミナル（黒い画面）を使わず、アプリの画面だけで進めます。

1-1. ダウンロード

ブラウザで公式ページを開く：https://opencode.ai/v2/docs/
「Desktop」のところから Windows を選んでダウンロードします。
- ふつうのパソコン（64bit）は opencode-desktop-win-x64.exe
- ARMのWindowsは opencode-desktop-win-arm64.exe
- 例（版によって数字は変わります）：opencode-desktop-win-x64.exe

1-2. インストール

ダウンロードした .exe をダブルクリック。
「WindowsによってPCが保護されました」と出たら、ダウンロード元・ファイル名・発行元をメンターと確認してから「詳細情報 → 実行」で進めます。
画面の案内に沿って進めるとインストール完了。アプリを起動します。

ここまでできればOK： アプリが起動して、次のモデル選択ができる状態になった。

1-3. 使うAIを選ぶ

起動したら、入力欄の近くにあるモデル選択から、無料で使えるものを選びます（種類は都度変わります）。
選び方は入力欄に /models と打っても一覧が出ます。
自分のAI（ChatGPT Plus/Pro、GitHub Copilot、Anthropicキーなど）を使いたい人は /connect。希望者はメンターが個別対応します。

無料のAIを使うときのお願い 無料のAIは、入力した内容がAIの改善に使われることがあります。名前・住所・電話番号・パスワードは書かないでください。

つまずき対処（インストール）

SmartScreenが出て進めない → ダウンロード元・発行元を確認してから「詳細情報」→「実行」。
ARM版とx64版が分からない → 分からなければメンターを呼ぶ（たいていx64）。
アプリが起動しない → 一度アンインストールし、公式ページから最新版を落とし直す。
モデルが選べない → ネット接続を確認。/models で一覧が出るか確認。

2. プロジェクトフォルダ以外のアクセスを止める（20分）

AI助手に作業フォルダの中だけを触らせるための安全設定です。パソコン内の別の場所（書類・写真・パスワードのファイルなど）へ、勝手に読み書きしにくくするアクセス制限です。

2-1. アプリで作業フォルダを作って開く

OpenCode Desktopを起動し、「プロジェクトを追加（Add project）」または「フォルダを開く（Open Folder）」を押します。フォルダ選択の画面で、新しいフォルダを作って選びます。

名前の例：my-first-app
場所の例：ドキュメント\my-first-app（どこでもOK）

これで、このフォルダがAI助手のプロジェクトフォルダ（作業場所）になります。

フォルダ選択画面で「新しいフォルダ」が見当たらなければ、デスクトップ等に作ってから選んでもOKです。画面の文言は版によって少し違うので、分からなければメンターを呼んでください。

なぜ先にフォルダがいるの？ AI助手は「どのフォルダで作業するか」を決めてから動きます。だから最初に作業場所（プロジェクトフォルダ）を1つ決めます。決めた後は、その中だけで作業させます。

2-2. 安全設定ファイル `opencode.jsonc` を作る（全プロジェクト共通）

AI助手（OpenCode）に「何をしてよいか」を決める行動ルールを opencode.jsonc に書きます。今回はこの設定をパソコン全体（すべてのプロジェクト）に効かせたいので、設定の保管場所（ホームフォルダの下の .config\opencode）に置きます。

置く場所（例）：C:\Users\＜名前＞\.config\opencode\opencode.jsonc
ここに置くと、どのプロジェクトを開いてもこのルールが効きます。
特定のプロジェクトだけ変えたいときは、そのフォルダに opencode.jsonc を置くと、そちらが優先されます（通常は不要）。

版について： この設定は OpenCode v2（Desktop 2.x） 用です。古い v1 では項目名が違います（permission / bash）。当日のアプリは公式（opencode.ai/v2/docs）から入れて v2 であることを確認します。

詳しい説明（これは何をしているの？／なぜ必要？）

これは何をしているの？

ルールは3つの言い方で書きます。

deny＝禁止（その操作はさせない）
ask＝毎回確認（やる前にたずねる）
allow＝許可（たずねずに実行。今回は使っていません）

下の表が、貼り付ける設定の中身の意味です（覚えなくてOK）。

設定	意味
`external_directory` → `deny`	プロジェクトフォルダの外は読み書きさせない
`shell` → `ask`	パソコンにコマンド（命令）を実行させるときは毎回確認
`read`/`edit` の `.env`・`.env.*` → `deny`	パスワード等を書いた設定ファイルを読ませない・書かせない
`read`/`edit` の `~/.ssh/*` → `deny`	暗号鍵（SSH鍵）を触らせない
`webfetch` → `ask`	インターネットから情報を取るときは毎回確認

なぜ必要？

AI助手は「ファイルを読む・書く」「コマンドを実行する」力を持っています。とても便利ですが、放っておくと作業フォルダの外にある大事なもの（書類・写真・パスワード・暗号鍵）まで読んだり、危ないコマンドを実行したりできます。

とくに無料のAIは、入力した内容がAIの改善に使われることがあります。うっかり秘密のファイルを読ませてしまうと、外に出てしまうおそれがあります。

そこで最初に「作業フォルダの外は触らない」「秘密は見ない」「コマンドは確認してから」というルールを入れておきます。これは”おまじない”ではなく、AIに渡す権限の範囲を自分で決めるという意味です。たとえるなら、入れる部屋を限った「入館証」を渡すイメージです。

今回は全プロジェクト共通で効きます（プロジェクトごとに変えたいときだけ、そのフォルダに別途置けます）。

方法A：AIに作ってもらう（おすすめ）

入力欄に、次の文をそのまま貼り付けて送ります。

設定をすべてのプロジェクトに効かせたい。
実際のホームフォルダを調べて、その下の .config\opencode に opencode.jsonc を作って（.config や opencode が無ければ作って）。
すでに opencode.json や opencode.jsonc がある場合は変更せず、いまの内容と次のルールの差分を教えて（メンターに確認します）。
中身は次のとおりにして。作成できたら教えて。

{
  "$schema": "https://opencode.ai/config.json",
  "permissions": [
    { "action": "external_directory", "resource": "*", "effect": "deny" },
    { "action": "shell", "resource": "*", "effect": "ask" },
    { "action": "read", "resource": "*.env", "effect": "deny" },
    { "action": "read", "resource": "*.env.*", "effect": "deny" },
    { "action": "read", "resource": "~/.ssh/*", "effect": "deny" },
    { "action": "edit", "resource": "*.env", "effect": "deny" },
    { "action": "edit", "resource": "*.env.*", "effect": "deny" },
    { "action": "edit", "resource": "~/.ssh/*", "effect": "deny" },
    { "action": "webfetch", "resource": "*", "effect": "ask" }
  ]
}

方法B：メモ帳で作る（メンター補助）

先に、エクスプローラーの「表示 → ファイル名拡張子」にチェックを入れて、拡張子が見える状態にしておきましょう（opencode.jsonc.txt になる事故を防ぎます）。

エクスプローラーのアドレス欄に %USERPROFILE% と入力して、ホームフォルダを開く。
.config が無ければ新規作成し、その中に opencode フォルダを作る（＝ %USERPROFILE%\.config\opencode）。あればそのまま開く。
右クリック → 新規作成 → テキストドキュメント → ファイル名を opencode.jsonc に変更（拡張子 .txt を消す）。
メモ帳で開き、上の { ... } を貼り付けて、文字コード UTF-8 で上書き保存。

すでに opencode.jsonc がある場合： 中身を消さずに、メンターと確認して必要なルールだけ追加してください（丸ごと上書きしない）。

ここまでできればOK： opencode.jsonc ができた。

2-3. 設定を効かせる

設定ファイルはアプリ起動時に読み込まれます。アプリ（または新しいセッション）を一度再起動してください。

2-4. できたか確認

入力欄で次のように頼んでみる：

C:\Windows の中のファイルを1つ読んで見せて。

「アクセスできません／ブロックされました」のように拒否されれば、設定が効いています。 大切なのは、AIが言葉で「読めません」と言うだけでなく、ツールが拒否される（止まる）ことを画面で確認することです。
これは「アクセスを制限する設定」であり、完全な隔離（サンドボックス）ではありません。コマンド（shell）の許可内容はメンターと確認してください。（※グローバル設定はプロジェクト側の opencode.jsonc で上書きできます）

ここまでできればOK： 作業フォルダの外を読ませようとすると拒否される。

やってはいけないこと（チェック）

プロジェクトフォルダの中に、本当の個人情報やパスワードを書いたファイルを置いていない（今回のアプリでは .env は使いません）
許可を求められたら内容を読んでから決める（「常に許可」は安易に押さない）
個人情報をAIの入力欄に書いていない

秘密情報（パスワード・鍵など）について

今回は個人情報やパスワードなどの秘密情報を使いません。必要になったら、自分で判断せずメンターに相談してください。設定の read/edit の禁止はありますが、コマンド実行まで含めて完全に防げるものではありません。

いちばん確実に守るなら（希望者向け）： AI助手は、あなたのWindowsユーザーの権限で動きます。いちばん確実なのは、専用のWindowsユーザーアカウントを作ってそこで使うか、仮想マシン（VM）の中に入れて使う方法です。ふだん使う書類・写真・メールのあるアカウントと分けておけば、万一のときも影響を小さくできます。

3. オープンデータでWEBアプリを作ってみる（35分）

富山市の公式オープンデータからCSVを1つ選んでダウンロードし、それを使った1ページのWEBアプリを作ります。コードは書きません。言葉で頼むだけです。（データ選びとダウンロードの時間も含みます）

ダウンロードがうまくいかない人には、メンターが同じデータを配布できます（メンター用メモ）。

3-1. データを選ぶ（3つから1つ）

下表から1つ選びます。すべて富山市の公式オープンデータで、CC BY（出典を表示すれば自由に使える）です。

候補	データ	作れるアプリの例	主な列	形式
1（おすすめ）	公衆無線LANアクセスポイント一覧	富山市のFree Wi-Fiを探す	名称・所在地・緯度・経度・設置者・電話番号・SSID	CSV / UTF-8
2	福祉避難所	福祉避難所を探す	施設・場所名・かな・住所・緯度・経度・連絡先	CSV / Shift-JIS
3	富山市地域・年齢別人口（2018年10月1日時点）	地域ごとの人口を見る	地域名・総人口・男性・女性・年齢階級別・世帯数	CSV / Shift-JIS

富山市のオープンデータ全体：富山市オープンデータ（利用条件は各ページとポータルの利用規約に従います）
出典表示のため、アプリには「出典：富山市オープンデータ（CC BY）」と取得日を入れます。

文字コードに注意： 候補2・3のCSVは Shift-JIS（Windows標準）です。AIが文字化けする場合があります。そのときは AI に「このCSVをUTF-8に変換してから読んで」と頼んでください（許可を求められたらメンターと確認）。

3-2. 公式ページからダウンロードする

選んだ候補の公式ページ（上のリンク）を開く。
ページ内の「ダウンロード」から CSV を保存する。
- 例：162019_public_wireless_lan.csv（候補1）、toyamacityfukushihinanjo.csv（候補2）、162019population20181001.csv（候補3）
保存先は「ダウンロード」フォルダでOK（あとで移します）。

3-3. ファイルを作業フォルダに移す

ダウンロードしたCSVを、作った作業フォルダ my-first-app（例：ドキュメント\my-first-app）にコピー（または移動）します。エクスプローラーでドラッグ&ドロップでOK。

3-4. ファイル名を指定して、AIに頼む

入力欄に、下のお願い文を貼って送ります。〇〇.csv は実際に置いたファイル名に置きかえます。

作業フォルダの 〇〇.csv を使って、1ページのアプリを作って。
まず、このCSVの列名と中身を確認して、どんな簡単な機能が作れるか提案して。
提案にOKを出したら、次を守って作って：
- index.html 1つだけで動く（ダブルクリックで開ける）
- データはHTMLの中に埋め込む（実行時にCSVを読まない・サーバーを立てない）
- データにない情報は作らない（推測で埋めない）
- 画面に出典（富山市オープンデータ／CC BY）・取得日・データの基準日（例：人口は2018年10月1日時点）を表示する
- 難しくしない。ボタンは大きく。日本語で。

3-5. 完成した画面を元データと照合する

AIが index.html を作ったら、作業フォルダの index.html をダブルクリックしてブラウザで見る。
画面に出ている3件を、元のCSV（Excelやメモ帳で開く）と見比べる。
施設のデータなら「名前・住所」、人口のデータなら「地域名・人数」が元データと一致しているか、勝手な値が入っていないかを確認する。

ここまでできればOK： ブラウザでアプリが開き、画面の3件が元データと一致した。

直す（時間があれば）

思ったとおりでなければ、そのまま日本語で頼みます。

「難しくしないで。小学生にも分かる言葉で。」
「ボタンが動かない。直して。」
「スマホで見やすくして。」
「色をもっと見やすくして。」

うまくいったら

作ったものは、本編（#2 アプリを公開、みんなで活用）でインターネットに載せて、みんなで使います。
まだ途中の人は、もくもく会（毎週オンライン）で続きをやれます。メンターに声をかけてください。

無料のAIを使うときのお願い（再掲）

無料のAIでは、入力した内容がAIの改善に使われることがあります。名前・住所・電話番号などは書かないでください。
使うAIの種類は都度変わります（例：Big Pickle）。入力欄に「/models」と打つと、無料で使えるものか確認できます。

運営向けの注意点はメンター用メモに分けています。

ゴール