AI協働開発ハンズオン講座　機電系 Day2　配布物


【このフォルダの置き場所】

ZIP を右クリックして「すべて展開」を選び、デスクトップに展開してください。
展開すると「機電系_Day2」というフォルダができます。中のファイルは移動させないでください。
01_データ読み込み.html は lib フォルダの中の部品を使って動くため、
HTML だけを別の場所へ移すと動かなくなります。


【入っているもの】

01_データ読み込み.html
　　設備データ_2026Q1.xlsx をブラウザで開いて中身を見るための画面です。
　　シートを選ぶと、Excel の行番号を付けた表が出ます。
　　「この表をコピー」を押すと、そのシートをタブ区切りでコピーできます。
　　コピーしたものを VSCode の Copilot Chat の入力欄に貼りつけて使います。
　　午後前半で使う練習用の10行も、このページの下のほうに入っています。

設備データ_2026Q1.xlsx
　　午後の演習で扱う設備データです。シートは3つあります。
　　　稼働実績　　設備8台の稼働時間・停止回数・不良数
　　　検査記録　　ロット10件の寸法測定値と判定
　　　不良内訳　　工程ごとの不良項目と件数
　　現場のファイルによくある崩れ方をそのまま残してあります。
　　Excel で開いて上書き保存すると、その崩れが消えて演習になりません。
　　中身を見るときは 01_データ読み込み.html から見てください。

lib フォルダ
　　ブラウザで動かすための部品です。インストールは要りません。
　　　xlsx.full.min.js　　Excel を読むための部品
　　　papaparse.min.js　　CSV を読むための部品
　　　chart.umd.js　　　　グラフを描くための部品
　　午後のグラフ演習では、この chart.umd.js を自分の day2 フォルダにコピーして使います。
　　コピー元は lib フォルダの中です。コピーを忘れるとグラフが真っ白になります。
　　出所とライセンスは lib/README_ライブラリ出所.md に書いてあります。

README.txt
　　この説明です。


【ブラウザで開く手順】

1. デスクトップの「機電系_Day2」フォルダをエクスプローラーで開きます
2. 01_データ読み込み.html をダブルクリックします
3. ブラウザが開き、点線の枠が出ます
4. 同じフォルダの 設備データ_2026Q1.xlsx を、その点線の枠にドラッグして落とします
5. 稼働実績・検査記録・不良内訳の3つが並ぶので、見たいものを押します

ダブルクリックで VSCode が開いてしまう場合は、01_データ読み込み.html を右クリックし、
「プログラムから開く」からブラウザを選んでください。
VSCode の中では動きません。ブラウザで開いてください。

なお、今日つくる index.html や chart.html は、この配布フォルダではなく、
デスクトップにご自分で作る day2 フォルダに保存します。
もらうフォルダと、自分で作るフォルダを分けてお使いください。


【困ったときは】

まず講師にお声がけください。研修中は席を回っています。
研修時間外の連絡先は当日ご案内します（要確認）。

うまく動かないときに、先に見ていただきたい点です。
・ブラウザではなく VSCode で開いていないか
・01_データ読み込み.html を lib フォルダと離れた場所に移していないか
・xlsx を Excel で開いたままドラッグしていないか
・日本語が化けるときは、ブラウザの文字コードが UTF-8 になっているか


【注意】

このデータはすべて架空です。実在の設備・製品・企業とは関係ありません。
演習ではご自身の業務の実データを使わないでください。
客先名・製品名・プロジェクト名・取引先名は、業界と工程の粒度に置き換えてください。

株式会社ギブリー
