# 注意事項
markdownを用いて共同編集を行うにあたっての注意点を箇条書きで示します。遵守すること！
:::info
* 文章は簡潔になるべく短文で記述すること
* 授業で扱った内容のみ記述すること
* 目次をむやみに作らないこと
* URLやコードは，何について書かれているか一目でわかるようにすること
```
URLの書き方
- [一目で何のサイトか分かる名前](URL)
```
````
コードの書き方
```
$ コード
```
````
:::
# メンバー表
| 名前 | ゼミ | やりたいこと |
|:---- |:----------:| -----------------------------------------------------------------------------------------------------------:|
| 古屋 | 児島研 | 市役所の職員になった際に役立つこと(ITに関する幅広い基礎知識(特にクラウドの基礎知識/ネットワークの基礎知識)) |
| 堀田 | 児島研 | Raspberry Pi |
| 廣岡 | 後藤研 | 多次元尺度構成法 |
| 樋口 | 渡来研希望 | 気象関係 予測に関係すること |
| 千葉 | 増田研 | 気象関係や温暖化問題で役立てられる技術 |
| 深野 | 青木研 | 気象関係 植物、生物関連 |
| 町田 | 後藤研 | 気象関係 台風 |
# 第01回 コマンドラインの操作（10/07）
## 今日やること
* hackMDを使ってみよう
* メンバー表をhackMDに記入しよう
* wifiを切り替えられるようになろう
* ラズパイを使ってみよう
## 宿題
1. Windows PowerShellの使い方を調べておこう
2. ssh通信とはどのような通信なのか調べる＋ラズパイに通信するときに打ち込むコマンドを確認すること
3. ラズパイにssh通信した後に，ラズパイのデスクトップに自分の名前のディレクトリを作成するためにはどのような手順とプログラムを打つ必要があるか，確認（メモしておこう）
来週のはじめに，ssh通信の復習とフォルダの作成を行ってもらいます。
4. input表を完成させる
5. アンケートを記入する
### 今後のアンケート（やりたいことに〇を2つつけてください）
| 名前 | ラズパイで電子工作 | ガチガチのPC作成 | 仮想環境でハッキング | デュアルブート（リナックス) | アプリ開発 | HP作成(html) | クラウドの使い方 | サーバーの作成 |
| ---- | ------------------ | ---------------- | -------------------- | --------------------------- | ---------- | ------------ | ---------------- | -------------- |
| 古屋 | | | 〇 | | | | | 〇 |
| 堀田 | | | 〇 | | | | | 〇 |
| 千葉 | 〇 | | | | | | | 〇 |
| 樋口 | | | | | 〇 | | | 〇 |
| 深野 | | | 〇 | | | | | 〇 |
| 町田 | | |〇 | | | | |〇 |
### input表
|名前|入力input|process処理|出力output(テーマ・目的)|
| ----|:--------: | :--------: | :--------: |
| 古屋| 体系的なITの知識、セキュリティについての知識、ガバメントクラウドの基礎知識、サーバーについての知識 | クラウドサーバーの組み立て、仮想環境の構築、ハッカー視点に立ってみる(セキュリティ対策)、 | 業務デジタル化後のトラブル時に対応できる人材 |
| 堀田 | 温湿度センサ(乾球温度(℃)・相対湿度(%))・Raspberry Pi・風速計(風速(m/s))・日射計(全天日射量(kW/m<sup>2</sup>)) | WBGTの推定式(Python)・Raspberry Piがセンサや計測器で測った値を得るためのプログラム(Python) | WBGT計測器(Raspberry Piというものを使ってマイコンなどの組込みの作業をする機会に触れたい) |
| 廣岡 | 土壌中の元素成分の地点ごとの計測データ | 分布図を作成する |地点ごとの土壌の成分を比較して優良な土を提示する|
| 深野 | 屋上緑化によるヒートアイランド現象緩和 | 芝生、草花、樹木など、実際の植物を育成する |気候条件や植物のない環境など条件を変えてデータを収集する|
| 樋口 |気象観測データ・リアルタイムデータ・地形・都市データ 過去発生した際のデータ|莫大な情報（データ）の処理 局地的大雨の発生可能性を捉えるデータ抽出|AIと人間による予測技術の完全構築 局地的大雨に対して備えることができるスピード感のある予測構築
| 千葉 | 過去の日別気象データ（気温、降水量、湿度、風速）と家庭の電力使用量（ある地域の世帯の数（エアコンの台数）、使用時間、在宅時間） | 気象と電力使用量のデータを日ごとにまとめる。気温などの気象データと電力使用量（特にエアコンなど）の相関を調べる。地域など範囲を絞り、天気と電力使用量から電力需要予測を行う。 | 電力需要予測グラフ、気象要素やその他データを収集し解析出来る技術 |
## 授業内容
### ラズパイについて
:::info
Raspberry Pi OSはLinuxディストリビューションと呼ばれるもののひとつで、Debian（デビアン）と呼ばれるLinuxディストリビューションをベースに作られています。ですので、数年前まではRaspberry Pi OSという名前ではなく、Rasbian OSという名前でした。
Debianが更新されるとRaspberry Pi OSも更新され、そのDebianの最新バージョン名がbookwormで、一つ前のバージョンがbullseyeです。
:::
- [ラズパイでよく使うlinuxコマンド](https://monomonotech.jp/kurage/raspberrypi/linux_command.html)
- [Raspberry Piにはどのプログラミング言語を使うべき？](https://picockpit.com/raspberry-pi/ja/%E3%83%A9%E3%82%BA%E3%83%99%E3%83%AA%E3%83%BC%E3%83%91%E3%82%A4%E3%81%A7%E4%BD%BF%E3%81%86%E3%81%B9%E3%81%8D%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E%E3%81%AF/)
- https://www.sejuku.net/blog/109217
- [ラズパイの初期設定](https://raspi-school.com/getting-started-with-raspberrypi/)
- https://raspi-school.com/ssh/#:~:text=%E3%81%A7%E5%AE%8C%E4%BA%86%E3%81%A7%E3%81%99%E3%80%82-,Raspberry%20Pi%20Configuration%E3%81%8B%E3%82%89SSH%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96,%E4%BB%A5%E4%B8%8A%E3%81%A7%E5%AE%8C%E4%BA%86%E3%81%A7%E3%81%99%E3%80%82
### ルーターへの接続
ノートPCにwifiドングルをつなげて，wifiを2本出せるようにします。
wifi1はrispot,wifi2はルーターに接続してください。
|ルーターの名前|pw|
|---|---|
|aterm-ef42c3-g|1257e7d013cab|
### ssh通信の準備
実行環境
- Windows PowerShell
ssh接続のために必要な情報
- 通信先のホスト名
- パスワード
- IPアドレス
|ホスト名|pw|ipアドレス|
|---|---|---|
|ino|got01| 192.168.10.9 |
### ssh通信の書き方
```
$ ssh ホスト名@ipアドレス
```
:::info
初めて接続する時は Are you sure you want to continue connecting (yes/no/[fingerprint])? （日本語訳：「本当に接続しますか？」）と聞かれるので、キーボードでyesと打ち込む。
ラズベリーパイのユーザーのパスワードを入力するときに，画面に＊＊＊＊などは表示されないが，そのまま打ち込む。
ログインが完了すると ユーザー名@ホスト名: ~ $ などと表示される。
これが表示されれば、ラズパイに入り込めたということ。
:::
### ディレクトリの移動
現在のディレクトリ確認
```
$ pwd
```
一つ上のディレクトリへの移動
```
$ cd ..
```
一つ下のディレクトリの移動
```
$ cd フォルダ（ディレクトリ）名
```
2. 階層の名前が「~」から「/home」になったのを確認してからこのコマンドを打った。(inoとはユーザー名のこと。)
```
$ cd /home/ino/Desktop
```
http://www.openspc2.org/reibun/RaspberryPI/OS/Raspbian/file_manager/0102/index.html
デスクトップに移動します。cd DesktopとするとカレントディレクトリがDesktopになります。
### ディレクトリの作成
```
$ mkdir フォルダ（ディレクトリ）名
```
### ssh通信の切断方法
```
$ exit
```
以下の表示になっていればラズパイとの接続は切れている。
```
PS C:\自分のパソコンのユーザー名\ユーザー名>
```
# 第02回ラズパイの初期化（10/14）
## 今日やること
- 宿題の確認（前回の復習）
- ラズパイの初期化とアップデート
-
## 宿題
本日の内容を確認しておくこと
## 授業内容
### ラズパイの初期化
### ネットワークの接続確認
---
**ディレクトリの中にあるものの確認コマンド**
```
# 例１：現在のディレクトリの全ファイルの名前のみを表示
ls
# 例２：現在のディレクトリの全ファイルの詳細情報を表示
ls -l
```
**空のディレクトリの消し方**
```
$ rmdir ディレクトリ（フォルダー）名
```
**中身があるディレクトリの消し方**(中身のファイルやディレクトリも一緒に消す)
```
$ rm -r ディレクトリ(フォルダー)名
```
**ファイルの消し方**
```
$ rm ファイル名
```
---
[nanoの使い方](https://job-info.hateblo.jp/entry/2024/09/03/000336)
- nanoコマンドを使ってファイルを開くには、ターミナルで以下のように入力します。
```
$ nano ファイル名
```
- 編集したいファイル名前を存在しないファイル名を指定すると、nanoはそのファイルを新規作成します。
```
$ nano example.txt
```
- ファイル名を指定して実行すると、エディタが開きます。
- 任意の文字を打ちます。
- 保存は **ctrl** + **O**（念のためEterを押して確定します）
- 終了は **ctrl** + **x**
- :exclamation: 保存しないで終了する場合、エディターの下の方にメッセージが出ているので確認すること。
---
| 名前 | 確認相手 | 書いていた文字 |
| :-------- | :--------: | --------: |
| 古屋 | 堀田 |好きな食べ物：味噌ラーメン |
| 堀田 | 樋口 | 寿司 |
| 廣岡 | 後藤研 | |
| 樋口 | 千葉 | オムライス|
| 千葉 | 深野 | うどん |
| 深野 | 古屋 | カレーせいろ |
---
### scp通信の使い方
:::info
:exclamation: scpを使用する場合、sshからは抜けましょう
**scpを用いてLinuxからWindowsにファイルを送る方法**
```
$ scp ユーザー名@IPアドレス:送信したいファイのパス名 ファイルを置きたいパス名
```
※これは例です。
```
$ scp ino@192.168.10.9:/home/ino/Desktop/name.txt C:\Users\user\Desktop
```
:::
### ラズパイの初期化
|ホスト名|ユーザー名|パスワード|IPアドレス|
|----|----|----|----|
| got | iko | unkokusai | 192.168.10.7|
| megane | fukano |0455| 192.168.10.6|
### Lチカをしてみよう
[Lチカの参考サイト](https://monomonotech.jp/kurage/raspberrypi/led_chikachika.html)
# 第03回プログラムの実行（10/21）
## 今日やること
* ラズパイの初期設定
* インターネットへの接続
* ラズパイへのセンサー接続
* pythonプログラムの実行
## 宿題
## 授業内容
#### ユーザー名を確認するコード
```
$ whoami
```
#### ホスト名を確認するコード
```
$ hostname
```
#### 現在割り当てられているIPアドレスの確認
```
$ ifconfig
```
#### ラズパイの再起動方法
```
sudo reboot
```
#### pythonで実行し続けているプログラムを中断させるキー
```
「ctrl」 + 「C」
```
#### 直接デスクトップフォルダーへ飛ぶ方法
```
$ cd /Desktop ファイル名
```
**IPアドレスの固定方法↓**
- [ラズベリーパイのIPアドレス固定をGUIから設定する](https://qiita.com/mochi_2225/items/15c1e7c1c1ae79f97501)
#### 電子工作とネットワークをつなげよう
自分のチームのラズパイがSSH通信されるたびに，LEDが点滅するようなプログラムを作りましょう。
1.sshのログはどこで見るのか（コマンドとログファイルはどこにあるのか）
2.ログファイルのデータとプログラムを組み合わせるにはどうしたらよいか(モジュールや権限は必要か)
A班
- pythonにsubprocessというモジュールがある。pytonの中でlinuxコマンドを動かすためのモジュールっぽい？
```python
import subprocess as sub
```
こうやって記述することで、
```python
sub.run(['ls'])
```
```linux
$ ls
```
裏ではこれが実行される
##### nanoの便利ショートカットキー
| ショートカットキー | 内容 |
| -------- | -------- |
| 「Ctrl」 + 「X」 | 終了 |
| 「Ctrl」 + 「O」(オー) | 書き込み |
| 「Ctrl」 + 「K」 | 行切り取り |
| 「Ctrl」 + 「U」 | 行の貼り付け |
| 「Esc」(Alt) + 「6」 | 行のコピー |
| 「Ecs」(Alt) + 「\」 | 最初行 |
| 「Esc」(Alt) + 「/」 | 最終行 |
| 「Ctrl」 + 「W」 | 文字列を検索(前方へ) |
| 「Ctrl」 + 「Q」 | 文字列を検索(後方へ) |
| 「Esc」(Alt) + 「W」 | 次を検索(前方へ) |
| 「Esc」(Alt) + 「Q」 | 次を検索(後方へ) |
| 「Alt」 + 「U」 | アンドゥ |
| 「Alt」 + 「E」 | リドゥ |
[nanoの便利ショートカットキー](https://raspida.com/nano-shortcutkey13/#index_id4)
# 第04回プログラムの実行（10/21）
## 今日やること
apache2を導入してラズパイをファイルサーバー化しよう
[apache2](https://qiita.com/orc_jj/items/a620e8499691d1531c5b)
**ファイアーウォールの設定について**
①インストール
```linux
sudo apt install ufw
```
②有効化
```linux
sudo ufw enable
```
③HTTP通信の際に使用するポート番号(80)を許可
```linux
sudo ufw allow 80/tcp
```
④SSH通信の際に使用するポート番号(20)を許可
```linux
sudo ufw allow 22/tcp
```
⑤確認
```linux
sudo ufw status
```
:::info
**ポート番号の許可について**
ファイアーウォールはいわば「鎖国」状態です。上の③と④のコマンドは、それぞれHTTP通信で使われるポート番号とSSH通信でつかわれるポート番号を許可するものです。つまり、オランダ船だけ入国を許した「出島」のようなものです。
:::
**HTML配置場所**
/home/user/... ←最初はuserの位置にいるので、
```linux
$ cd ..
```
を2回実行してhomeの上の階層へ行く。
```linux
$ ls
```
で見てみると、homeと同列の階層にvarがあることを確認。
このコマンドを打ってhtmlの階層へ。
```linux
cd /var/www/html/
```
この中にはすでにindex.htmlが入っているが、怖いので触りたくない。
nanoの前にsudo(スードゥー)を記述するのを忘れないようにして、nanoでhtmlファイルを作成。
```linux
$ sudo nano お好みの名前で.html
```
:::danger
sudoは管理者権限でコマンドを実行するためのコマンド。これを忘れてnanoのみでhtmlファイルを作成してしまうと、保存段階で権限エラーが起こって保存できないので注意すること！
:::
# 第05回プログラムの実行（11/11）
## 今日やること
ラズパイ５を２つ買いました！（やったぜ）
買ったのはいいんですが，今までラズパイ4でやってきたことをラズパイ5でやり直さなければなりません。デデドン（絶望）
以下の二つからやりたい方を選んでください。
* 一からファイルを作り直す（つらい。ただし一番確実）
* ファイルを転送して環境を丸ごとコピーする（バージョンが違うので，ファイル転送だけで許されるか心配）
今日実際にやることは
- ラズパイ５の環境構築（前回の状態までもっていく）
- ファイルサーバー構築の続き（apacheの続き)
- htmlで適当なサイト作り
:::info
**お願い**
今まで言うのをすっかり忘れていましたが，コンピューターを使うにあたって，「エラーをどのように解決したか」の記録はとても重要です。もちろん，コードの打ち間違い等のしょうもないエラーは論外ですが，正攻法でコーディングしてもエラーが出た場合は，エラーのスクショと解決方法（どこをどう修正したか一目でわかるように）をメモしてくれると後続は助かります。
:::
## 授業内容
:::danger
この記事の通りにやってみたのですが、インストールの段階でエラーが出ました。
[apache2](https://qiita.com/orc_jj/items/a620e8499691d1531c5b)
:::
ネットに接続していなかったためapache2のインストールができませんでした。
ネットに接続すると、上手くインストールできました。
>[!Note]注rispotに接続するときは有線であろうと無線であろうと、パスワードを打つこと
#### apacheの停止・開始
**停止**
```linux
sudo systemctl stop apache2
```
**開始**
```linux
sudo systemctl start apache2
```
>[!Note]
nanoの前にsudo(スードゥー)を記述するのを忘れないようにして、nanoでhtmlファイルを作成。
```linux
$ sudo nano お好みの名前で.html
```
:::danger
sudoは管理者権限でコマンドを実行するためのコマンド。これを忘れてnanoのみでhtmlファイルを作成してしまうと、保存段階で権限エラーが起こって保存できないので注意すること！
:::
#### ファイル(ディレクトリ)の移動
下の階層
```linux
mv ファイル(ディレクトリ)名 下のファイル(ディレクトリ)名/.
```
例)
```linux
mv abehiroshi.png var/.
```
上の階層
```linux
mv ファイル(ディレクトリ)名 ../
```
例)
```linux
mv abehiroshi.png ../
```
複数個のファイルも可能(下は上の階層への移動だが、下の階層も同様に行える)
```linux
mv ファイル1(ディレクトリ1)名 ファイル2(ディレクトリ2)名 ../
```
[ファイル(ディレクトリ)の移動](https://qiita.com/nasuB7373/items/f46fe8dc7ffc7a26b249)
# 第06回プログラムの実行（11/18）
## 今日やること
* 自分たちのサイトにgooglemapを追加しよう（APIを使ってみよう)
:::danger
佐藤のgooglemapAPIです。
"https://maps.googleapis.com/maps/api/js?key=AIzaSyAekity_O9uyI2_LNlmOTnlhQ-6EFVJa3A&callback=initMap"
＊高度な機能や課金ツールを入れると私（佐藤）に請求がくるので地図の読込みだけに使用してください。
:::
gasでhtmlを表示する場合は，.gsファイルに以下をコーディングする。
```
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('map');
}
```
〈エラーコード例〉
:::warning
このアプリケーションは Google Apps Script のユーザーによって作成されたものです
:::
コードを全て入れ直したらこのコード表示がされなくなり解決した
[Google Maps API](https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037)
A班：
- 阿部寛画像ファイルお引越し
- index.htmlを改造
- index.htmlをpcで作成後scpで移動
- var/www/htmlへ移動
- index.html確認
省エネモード無効化
```
sudo iwconfig wlan0 power off
```
ps:045545
# 第07回プログラムの実行（11/25）
## 今日やること
自分のサイトにPHPを埋め込んで，ログイン認証できるようにしよう。
A班のダッシュボード構想図
# 第08回プログラムの実行（12/2）
## 今日やること
自分のサイトのダッシュボードを完成させよう
### Aチーム
- 「Raspberry pi」のvar/www/htmlの中にcsvとhtmlを入れる
- 全てのグラフ作成
- グラフの色を整える
- WBGTのデータ整備
- 地図ボタン導入
- 都道府県別フィルター作成
```
sudo apt update
sudo apt install sqlite3
sudo apt install php-sqlite3
sudo apt install php libapache2-mod-php php-sqlite3 -y
```
```
//データベースの作成
cd /var/www/html
sudo sqlite3 comments.db "CREATE TABLE comments(id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, message TEXT, created DATETIME DEFAULT CURRENT_TIMESTAMP);"
sudo chown www-data:www-data comments.db
```
```
///コメントフォームの追加とPHP設定
<!-- ▼ コメントフォーム ▼ -->
<h2>コメントを書く</h2>
<form action="save_comment.php" method="POST">
名前：<br>
<input type="text" name="name" required><br><br>
コメント：<br>
<textarea name="message" rows="4" cols="40" required></textarea><br><br>
<button type="submit">送信</button>
</form>
<hr>
<!-- ▼ コメント一覧 ▼ -->
<h2>コメント一覧</h2>
<?php
// SQLite からコメントを取得して表示
$db = new SQLite3('comments.db');
$res = $db->query("SELECT * FROM comments ORDER BY id DESC");
while ($row = $res->fetchArray(SQLITE3_ASSOC)) {
$name = htmlspecialchars($row['name']);
$msg = nl2br(htmlspecialchars($row['message']));
$time = $row['created'];
echo "<div class='comment-box'>
<strong>$name</strong>（$time）<br>$msg
</div>";
}
?>
</body>
</html>
```
### Bチーム
B班のダッシュボード構想図
:::info
Chart.jsを用いるにあたり理解を深めておく
https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369
:::
- グラフを作成するに当たりraspberry PI にCSVをいれる
- グラフ作成そしてページに導入・表示
- ２つ以上のグラフを表示させることができたら理想
## 今日どこまでできたか（どこができなかったか）
### Aチーム
|できたこと|できなかったこと|
|--|--|
|すべてのグラフ作成|グラフの色を整える|
|地図ボタンのひな形導入|都道府県ごとのフィルタの実装|
|htmlとcsvをvar/www/htmlに移動|「DBエラー: SQLSTATE[HY000]: General error: 1 table comments has no column named text」を解決する|
|コメント機能のひな形を作成||
|sqlite3のインストール||
|phpが使えるようになった||
|WBGTの整備|WBGTの整備方法をメンバー間で共有していない|
|WBGTをhtml上で読み込み|WBGTランキングのscriptの箇所をraspberryp1内のindex.htmlに組み込めなかった|
|WBGTランキングの読み込みと文字化け直し(読み込む際に文字コードを指定)|WBGTランキングのscriptの中身の理解と共有をメンバー間で行えていない|
### Bチーム
|できたこと|できなかったこと|
|--|--|
|日別の熱中症患者数グラフの作成・導入（csvデータから）|他４つのグラフ作成・導入・表示|
|日別熱中症患者数グラフのラベル部分の文字化け部分の修正|データが密集している事により視認性が悪い。大きさ調整など見やすくする工夫をすること
|csv化することができたデータをvar/www/htmlに移動（２つ）|WBGTのグラフのHTMLでのページ上表示|
|次の目標|
|--|
|・ 年齢区分の円グラフ作成
|・日別熱中症患者数グラフを見やすくするためにコードを工夫する
|・wbgt折れ線グラフのHTMLでのページ上表示(導入)
|・傷病程度のグラフ作成
|・地図とデータとのリンク（クリックして表示）
|・コメント機能のひな形を作成
本授業でのグラフコード構築過程
```
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// CSV を読み込む関数（fetch を使わず Ajax でローカルでも動作）
function loadCSV(path, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", path, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.send(null);
}
loadCSV("data.csv", function(csvData) {
// CSV を行ごとに分割
const lines = csvData.trim().split("\n");
// 1行目をヘッダーとして取得
const header = lines[0].split(",");
// ラベル（横軸）とデータ（縦軸）を準備
const labels = [];
const values = [];
// 2行目以降を読み込み
for (let i = 1; i < lines.length; i++) {
let cols = lines[i].split(",");
labels.push(cols[0]); // 1列目 → ラベル
values.push(Number(cols[1])); // 2列目 → 数値
}
// Chart.js グラフ描画
const ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
label: header[1],
data: values,
borderWidth: 2
}]
},
options: {
responsive: true,
}
});
});
</script>
```
CSV の文字コードとブラウザの扱いの不一致による文字化け？
＿＿＿＿＿＿↓日別熱中症患者数グラフのラベル部分の文字化けを修正した後のコード ↓＿＿＿＿＿＿
```
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// CSV を読み込む関数（Shift_JIS対応）
function loadCSVShiftJIS(path, callback) {
var xhr = new XMLHttpRequest();
xhr.open("GET", path, true);
xhr.responseType = "arraybuffer"; // バイナリとして取得
xhr.onload = function () {
if (xhr.status === 200) {
var decoder = new TextDecoder('shift_jis');
var csvText = decoder.decode(xhr.response);
callback(csvText);
}
};
xhr.send(null);
}
loadCSVShiftJIS("data.csv", function(csvData) {
const lines = csvData.trim().split("\n");
// ヘッダー取得
const header = lines[0].split(",");
const labels = [];
const values = [];
for (let i = 1; i < lines.length; i++) {
let cols = lines[i].split(",");
labels.push(cols[0]); // 1列目（日付）だけ使用
values.push(Number(cols[2])); // 3列目（搬送人員（計））を使用
}
const ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
type: "line",
data: {
labels: labels,
datasets: [{
label: header[2], // ヘッダーの3列目
data: values,
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: "搬送人員（計）"
}
},
scales: {
x: {
title: { display: true, text: "日付" }
},
y: {
title: { display: true, text: "人数" }
}
}
}
});
});
</script>
```
```
///ｐｈｐファイルの中身
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$name = $_POST['name'];
$message = $_POST['message'];
$db = new SQLite3('comments.db');
$stmt = $db->prepare("INSERT INTO comments (name, message) VALUES (:name, :message)");
$stmt->bindValue(':name', $name, SQLITE3_TEXT);
$stmt->bindValue(':message', $message, SQLITE3_TEXT);
$stmt->execute();
}
// 投稿後に元のページに戻る
header("Location: index.html");
exit;
?>
```
```
CREATE TABLE comments(id INTEGER PRIMARY KEY, name TEXT, message TEXT, created DATETIME DEFAULT CURRENT_TIMESTAMP);
```
> chatgptに打ち込んだプロンプト↓
apache でダッシュボードを作る。
index.htmlにグラフが表示されるようにhtmlで記入していて，グラフで表示するデータはdata.csvにある。
html
|_index.html
|_data.csv
ユーザーが参加ログ（コメント）をサイトに残せるようにしたい。 PHPとSQLも用いて，
html
|_index.html
|_data.csv
|_log保存実行PHP
|_log保存ファイル(db)
という構成にして，index.htmlには，グラフとコメントが出るようにしたい。
通常の教室で続きをの内容をオンデマンド自習で行います。指導員は通常通りサポートします。
自習内容のGrの報告をスマホで録画して（1分くらいの動画で簡単な報告で大丈夫です）LMSにアップして出席とします。Grで一つの動画でいいですが、参加状況がわかるようにしてください。
- [WEBページのコメント機能の実装](https://qiita.com/pasokonnonaka/items/8db97bf45b06f4660d3b)
- SQLはRaspberrypiに入っていないので、インストールする必要がある
```
///phpが入っているかどうかの確認
sudo a2enmod php
///インストールの前に一応アプデしておく（直近で実行していたらやらなくてよい）
sudo apt update
///phpのインストール
sudo apt install php libapache2-mod-php php-sqlite3
///phpでSQLを使うときは，php用のSQLも入れる必要がある
sudo apt install php-sqlite3
///apacheの再起動
sudo systemctl restart apache2
```
### 授業内容の動画について
後藤先生に聞いたところ、Open LMSの情報通信ネットワーク実習第8回のところに提出フォームを作成しました。そこに動画ファイルを提出してください。A班の動画につきましては堀田が提出いたしました。B班の方も、代表1名で問題ないので、提出の程よろしくお願いします。
# 第09回プログラムの実行（12/9）
## 今日やること
自分のサイトのダッシュボードを完成させよう（途中でも今日で打ち切ります）
### Aチーム
- 「DBエラー: SQLSTATE[HY000]: General error: 1 table comments has no column named text」を解決する
→テーブルの中に「text」という名前の列が存在しないというエラー、コメントの内容が保存できない状態
- 「DBエラー: SQLSTATE[HY000]: General error: 1 table comments has no column named created_at」
→テーブルの中に「created_at」という名前の列が存在しないというエラー、コメントを送信した時刻を保存できない状態
- 「DBエラー: SQLSTATE[HY000]: General error: 8 attempt to write a readonly database」
→データベースへの書き込み権限が無い状態
SQLite3のコード集
- SQLite3を起動
```
sqlite3 '動かしたいデータベース名'
```
例）
```
sqlite3 comments.db
```
- テーブルの一覧表示
```
.tables
```
- テーブル構造（スキーマ）の表示
```
.schema 'テーブル名'
```
例）
```
.schema comments
```
- テーブル内のデータ確認
```
select * from 'テーブル名';
```
- データベースからの切断
```
.quit
```
- カラム追加の実行
```
ALTER TABLE 'テーブル名' ADD COLUMN '入れたいカラム名' 'そのカラムのデータ型';
```
例）
```
ALTER TABLE comments ADD COLUMN text TEXT;
```
**データベースへの書き込み権限問題**
- ウェブサーバー環境での書き込み権限の許可
```
# シェルで実行
sudo chown www-data:www-data comments.db
sudo chmod 664 comments.db
```
- **ディレクトリへの権限付与**
```
# [ディレクトリ名]をcomments.dbがある実際のディレクトリ名（例: /var/www/html）に置き換えて実行
sudo chown www-data:www-data [ディレクトリ名]
# ディレクトリに書き込み（ファイル作成）権限を付与
sudo chmod 775 [ディレクトリ名]
```
ディレクトリへの権限付与を行うことで、html上のコメント機能を使用したときに、ラズパイのデータベース内にコメント内容を追加することができる。
### Bチーム
http://192.168.10.6 ユーザー名：sato PW:045545
index.htmlの順番を変える方法
１．設定ファイルdir.confまで行く
２．設定ファイル内のファイルの羅列を表示したい順番に書き換える（一番最初に出したいhtmlを文字列の一番最初に記入すればよい）。
## 今後の流れ
今回からハッキングと防御の練習をします。
いきなりハッキングしろと言っても難しいので，ハッキング専用サイトで練習したのち，本チャンのハッキングを試したいと思います。
順番としては
1. TryHackMeでハッキングの練習
2. TryHackMeで学んだハッキングスキルを自分たちのサイトに試す。
です。
## ハッキングの準備
### ハッキングツールをダウンロードしよう
1. サイトにアクセス [kali linax](https://www.kali.org/)
2. Virtual Machines をダウンロード
3. VirtualBox用のkiliプログラムをダウンロード＋展開（ダウンロードしたファイルは7zで圧縮されているので，7z用の展開プログラムを使って展開すること）
4. VirtualBoxもダウンロード
[VirtualBox](https://www.virtualbox.org/wiki/Downloads)
:::warning
ダウンロード中に、
Oracle VirtualBox 7.2.4 needs the Microsoft Visual C++ 2019 Redistributable Package being installed first. Please install and restart the installation of Orade VirtualBox 7.2.4.
というエラーが出ました。
→最初にMicrosoft Visual C++ 2019再配布可能パッケージをインストールする必要がある。
:::
公式のMicrosoftページから、「vc_redist.x64.exe」(64ビットシステム向け)をダウンロードしインストールが完了した後、再度VirtualBoxをダウンロードすることで解決した。
5. VirtualBoxは起動できたら最初はこんな画面
6. 仮想マシン→追加から，ダウンロードしたkaliを指定
7. 追加できたら起動
8. 起動できたらこんな画面が出てくる
### ハッキングの練習サイト
-[TryHackMe](https://tryhackme.com/onboarding)
### Virtual Boxを起動した後にやること
1. Terminal Emulatorを起動
2. 以下のコードを上から順番に打っていく
- システムのパッケージリストを更新する
`sudo apt update`
- インストール済みのパッケージを最新のバージョンにアップグレードする
`sudo apt upgrade -y`
- システムに必要ではなくなったパッケージを自動的に削除する
`sudo apt autoremove -y`
- もう必要のないパッケージのキャッシュファイルを削除する
`sudo apt autoclean`
# 第10回プログラムの実行（12/16）
## 今日やること
前回でダッシュボードは打ち切りのつもりでしたが，佐藤が休みなので，本日もダッシュボードを行ってください。
今回で本当に終わりにしましょう。
### Aチーム
- フィルター作成
- ダッシュボードおしゃれにしたい
- ダッシュボードを1~2画面にまとめる
→これらはダッシュボードの編集なので
kali linux
- VPN接続前まで完了
### Bチーム
- ダッシュボードの続き作成
→WBGTのデータと日別データが合体しているので別々に切りはなす
- 年齢区分別データの円グラフ作成
- 発生場所データ棒グラフの作成
- GISを用いたWBGTに関する図の作成
→年齢区分別の円グラフのみ形になった
kali linux
- Virtual Box初期設定
- kaliの初期設定
- googlelchromeを導入
- プロジェクト用のフォルダを作成
→初期設定２つまで完了
### 日本語化の手順
1. sudo dpkg-reconfigure locales
2. 言語設定画面が出てきたら，ja_JP.UTF8を探してチェックしてOK（チェックはスペースキー）。
3. 次の画面でもja_JP.UTF8を選択してOK
4. 最後に以下のコマンドを打つ
sudo update-locale LANG=ja_JP.UTF-8
(以上が終わったらリスタートした方が良いかも)
リスタートをしようとしたところ、以下のようなエラーが出た。（再起動したら解決したが...。）
### 時刻設定（これをしないとネットがうまくつながらない）
### コマンドで設定する場合
現在の状態確認
`timedatectl`
タイムゾーンを日本に設定
`sudo timedatectl set-timezone Asia/Tokyo`
自動時刻同期をON（推奨）
`sudo timedatectl set-ntp true`
:::warning
これらの作業はネット接続がある前提
:::
### インストール済みのパッケージを最新のバージョンにアップグレードする時に出てきたエラーコード
ウェブサイトへのアクセスが「禁止」されている状態を示すHTTPステータスコード
`kali.download`
上記のリポジトリにそのURL・その取得方法ではアクセスできない。サーバー側が要求を拒否している状態。
### 原因としてありがちな例
１.apt のリポジトリ情報が古い
２.kali-archive-keyring 未更新
３.ミラー側の仕様変更
４.プロキシ / ネットワーク制限
（学内ネットワークや一部回線でブロックされる可能性あり）
→ 学外ネットワークのみで試す
自宅にてダウンロード作業を再度一通りやり直したらエラーコードが出ることなく問題なくできた
### kaliの初期設定（共有ファイルの作成）
1. desktopに共有用のフォルダを作成（アルファベットで）
2. マネージャーの設定→共有フォルダ→フォルダアイコンをクリック
3.フォルダーパスにデスクトップに作成した共有フォルダを指定。【自動マウント】【グローバル共有】にチェックしてOK
### googlelchromeを導入しよう（教科書ママ）
エラー：#ダウンロードするを実行した際、ダウンロードバーは表示されたものの固まってしまい、Kaliを一度落とそうとしたが、以下のようなエラーコードが出現した。
```
The I/O cache encountered an error while updating data in medium "ahci-0-0" (rc=VERR_DISK_FULL). Make sure there is enough free space on the disk and that the disk is working properly. Operation can be resumed afterwards.
```
→パソコンの容量が無かった
### プロジェクト用のフォルダを作成しよう（教科書ママ）
7レッスン予定されているので，一応７フォルダを作成しておきましょう。
### VPN通信の準備をしよう（教科書ママ）
[VPN接続方法](https://hwdream.com/tryhackme/#toc7)
1. tryhackmeのサイトに行って，VPN接続用のファイルをダウンロードする。自アカウントのaccessにあるはずだが，無い。
解決
1. 検索窓で「openVPN」検索
2. openVPNのルームに入る
3. ルーム内にアクセスリンクがあるので，アクセスリンク先で構成ファイルをダウンロード
:::info
OpenVPNが繋がらない
- [OpenVPNが繋がらない場所から、どうにかして繋げる](https://qiita.com/kekeho/items/2ebe82ca3820ed15abe5)
:::
英字キーボードを日本語キーボードに変換する方法
- [キーボード設定](https://qiita.com/nm_suisai/items/ee7df3ba45228ebdf2aa)
**続き：Tutorialルームをやってみよう**
2日目
必要なURL
https://tryhackme.com/room/basicpentestingjt
-----------Aチームはここまでやりました(2025年12月23日)-----------------
# 第12回プログラムの実行(01/06)
## Aチーム
1.ダッシュボードの作成について(かかった時間：4限全部、5限3分の1)
- レイアウトの再配置
- フィルター作成完了
2.ハッキングについて(かかった時間：Kaliの設定も含め5限の3分の2)
- Kaliに入れなくなってしまったメンバーがいた→解決(ファイルの場所を移動した結果、Kali linuxの読み込みパスがおかしくなってしまったことが原因だった。)
- Day2で遅れてしまったメンバーがいたので、12月23日に終了した箇所からDay2復習しながら取り組んだ→Day2は全員完了
- Day3の[3.1 マシンの偵察]の「ポートスキャンでマシンを偵察」を行ったが、処理に時間がかかったため、途中で辞退
## Bチーム
１.ダッシュボードの作成（4限と5限の半分）
- WBGTのグラフと日別のデータの切り離し→無事成功
- 空白のボードの削除とレイアウトの改良→空白のボードの削除は成功。
しかし、他と連携されてホームページとして表示されていったのか表示画面がぐちゃぐちゃのレイア ウトになってしまった。
２．ハッキングについて（5限の残り半分くらい？）
- 先週の課題について終わっていなかったメンバーの支援→Day２初め部分に触れたくらい
（自宅の方がスムーズにできると助言したので次回はその進み具合で）
- Day３は、04番のパソコンの調子が悪かったのでほぼ進められていない。
→自宅で可能な限り進めていきたい
---
3日目
必要なURL:https://tryhackme.com/r/room/blue
-----------Aチーム(2026/01/06)-----------
# 第13回プログラムの実行（1/20）
## 今日やること
### パスワードをクラックしてサイトをハッキングしよう
方法①：Kali標準の crunch（最も定番）
Kali には 数字だけの総当たり辞書を作る専用ツールが最初から入っています。
4桁の数字のみ（0000〜9999）
`crunch 4 4 0123456789 -o pin4.txt`
ポイント
4 4 → 最小・最大桁数
0123456789 → 使用する文字（数字のみ）
-o pin4.txt → 出力ファイル
生成される中身は：
```
0000
0001
0002
...
9999
```
方法②：Linuxコマンドだけで作る（仕組み理解向け）
ツールを使わず、OSの基本機能だけで作る方法です。
```
seq -w 0 9999 > pin4.txt
```
解説
seq：連番生成
-w：桁数を揃える（0埋め）
出力結果は crunch と同等
[ERROR] all children were disabled due too many connection errors
0 of 1 target completed, 0 valid password found
[INFO] Writing restore file because 2 server scans could not be completed
[ERROR] 1 target was disabled because of too many errors
[ERROR] 1 targets did not complete
Hydra finished at 2026-01-20 18:01:08
[不正アクセスの確認](https://qiita.com/ydetectiveu007/items/f94745ed0a114b93da1b)
---
ssh通信が出来るのに、HTTPのサイトに繋がらないという事象
**Apache2 エラー**
- apache2のstatusを確認したところ、Active状態ではなかったため、`sudo systemctl start apache2`を実行した。しかし、以下のエラーメッセージが出てきてしまった。
```linux
Job for apache2.service failed because the control process exited with error code.
```
- 設定ファイルにミスがないかどうか確認できるコマンド`sudo apache2ctl configtest`を打った際に以下のエラーメッセージが出てきた。
```linux
apache2: Syntax error on line 224 of /etc/apache2/apache2.conf: Syntax error on line 1 of /etc/apache2/sites-enabled/000-default.conf: /etc/apache2/sites-enabled/000-default.conf:1: <VirtualHost> was not closed.
```
- 上記のエラーメッセージの意味としては、`/etc/apache2/sites-enabled/000-default.conf`の1行目から始まる `<VirtualHost> `タグが閉じられていないというものだった。
```linux
sudo nano /etc/apache2/sites-enabled/000-default.conf
```
- 上記のコマンドを打ち、`000-default.conf`の中に入り、末尾に`</VirtualHost>`を追加し、`</Directry>`を削除した。
- その後、`sudo apache2ctl configtest`を打ち、`Syntax OK`が出たので、再び`sudo systemctl start apache2`をして、apache2を起動させた。
---
# 宿題(期限：1月31日(土)23:59)
## Aチーム
### 古屋
- Raspberry pi
- Raspberrypiの概要
- イギリスで開発された手のひらサイズの超小型・低価格なコンピューター。1枚の基板上にCPUやメモリなどを搭載した「シングルボードコンピューター」で、テレビやモニターに繋げば、デスクトップPCのようにWeb閲覧やプログラミング、電子工作に活用できる。
- Raspberry piの初期化
- PCにラズベリーパイのOSをmicroSDカードに書き込みを行う専用ツール「Raspberry Pi Imager」をインストールし、Rspberry pi OSが入ったSDカードをPCに挿入して設定を行う
- HackMD
- 使い方・アカウント作成
- マークダウンの書き方
- 見出し・箇条書き・表・画像貼り付け・文字装飾など
- Wi-Fiドングルについて(ローカル環境でのネットワーク構築)
- ssh通信について
- sshのポート番号は22
- ssh通信にはIPアドレスとパスワードが必要であることを知った。
- ディレクトリの概念
- パスの構造について、実際にRaspberrypi内や自分のノートパソコン内を探索することで把握した。
- 絶対パスと相対パスの使い分けについて
- 基本的なlinuxコマンド
- ディレクトリの移動
- ファイルの作成・削除
- ディレクトリの作成・削除
- カレントディレクトリの確認
- ディレクトリ内に入っているファイル・ディレクトリの確認
- 再起動・離脱
- 省エネモード無効化
- ファイルの移動
- nano
- nanoの起動方法
- nano内でのコマンド
- sudo
- ユーザー名やIPアドレスなどの基本情報を確認するコマンド
- 実行を中断させるキー
- Ping
- Windows PowerShellの使い方
- コマンドプロンプトよりも後に追加されたシェルであり、コマンドプロンプトよりも高度な操作が可能である。
- scp通信について
- Lチカについて
- ssh通信でアクセスしたときLEDライトが光るようなプログラムを作成した。
- Pythonのコード内でlinuxコードを打つには、`subprocess`というモジュールを使用すればよいことを学んだ。
- Logの保存場所や仕組みについて
- ブレッドボードとLED、抵抗の組み合わせについて
- 最終的に、チームメンバーのIPアドレスを登録したものを緑ライト、その他を赤ライトとして区別して光らせるところまで実現できた。
- Apache2の概要と導入方法について
- ただ、新しいパッケージを入れるのではなく、入れる前に`sudo apt-get update`で`apt-get`自体をアップデートしておいたり、Apache2を導入した後に動作しているか確認したりと、逐一細かな確認を挟むのが大切であることを学んだ。
- 管理者として実行の意味を持つsudoコマンドの重要性について学んだ。
- ファイアーウォールの概要と設定方法について学んだ
- sshとHTTPのポート番号と解法の仕方について
- 一度、sudoを忘れてnanoのみでhtmlファイルを作成してしまい、保存段階で権限エラーが起こって保存できずに書き直しになったことがあった。sudoコマンドをつける大切さを学んだ。
- googlemapAPIの概要について学び、実際にhtmlに貼り付けてみた。
- Google Maps APIを使用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことがで切ることを学んだ。
- 熊害のオープンデータ(csv)を持ってきてgoogle my mapで読み込み、作成したマップをAPIと組み合わせて貼り付けた
- GAS(Google Apps Script)を用いてhtmlを作成した。
- PHPの埋め込み(ログイン認証機能の実装)
- パスワードファイルの作成
- ハッシュ化の理解
- データベース
- SQLite3のインストール
- SQLite3の基本的なコードについて
- 起動
- テーブルの一覧表示
- テーブル構造(スキーマ)の表示
- テーブル内のデータを確認
- データベースからの切断
- カラム追加の実行
- データベース関連の権限問題について
- ウェブサーバー環境での書き込み権限の許可
- ディレクトリへの権限付与
- ディレクトリへの権限付与を行うことで、html上のコメント機能を使用したときに、ラズパイのデータベース内にコメント内容を追加することができる。
- Kalilinux
- visualBOXのインスト―ル
- Kalilinuxのインストール
- desktopと仮想環境のdesktopをつなぐ共有フォルダの作成
- ハッキング
- Try Hack Me
- VPN通信
- 学んだコマンド
- `nmap`:開いているポートを見つける
- `dirb`:隠されたディレクトリやファイルを探すコード
- `smbclient`:共有フォルダに接続
- `get`:ファイルを取得する(ローカルマシンにダウンロード)
- `gzip`:圧縮ファイルの解凍
- `hydra`:ユーザーに辞書攻撃
- `crunch`:辞書ファイルを作成
#### ダッシュボード
- ダッシュボードの説明
- 2022年から2024年の月から月の全国熱中症搬送者数のcsvデータを使用
- WBGTのデータを使用
- 選択した日付のWBGTランキングトップ20が表示される機能
- 日本地図ボタン(都道府県をクリックすることで各都道府県のデータのみを使用したグラフになる)
- 全国、都道府県ごとの月別搬送者数が折れ線グラフで表示される機能
- 全国、都道府県ごとの傷病程度が棒グラフで表示される機能
- 全国、都道府県ごとの搬送者数の年齢別データが円グラフで表示される機能
- 全国、都道府県ごとの発生場所別データが棒グラフで表示される機能
- コメント機能
- ダッシュボードで担当した箇所
- csvを用いた計算とグラフ化(Chart.jsを使用)
- データの前処理・読み込み
- 計算
- グラフ化
- 都道府県ボタン選択時に使用するデータを絞り込むフィルター機能の実装
- ダッシュボードの概要説明・進捗報告担当
#### 所感
- ダッシュボード作成時、`file://`のURLだとcsv読み込み時にエラーが発生してグラフが表示できないということに気づくのが少し遅くなり苦労した。VSCの拡張機能を使うことで`https://`のURLになり、無事にグラフが表示された。
- 私事だが、ITパスポートに無事合格できたため、本講義で習得した技術や視点を実生活で実践しながら基本情報技術者試験の合格を目指そうと考えている。
- **今後学んでいきたい技術**
- 自分でノートPCを組み立てる
- セキュリティについてさらに学ぶ
- 生成AIを開発やインフラ構築に活用する方法の模索
- ITに関連する法律(苦手だが、必要だと感じたため)
- Lチカ作成時の抵抗(理解が不十分だと感じているため)
- VBAについて
- C#について(卒業論文の時に使用する予定のため)
- ダッシュボード作成時のコードの解析と発展(AIに聞いたまま理解しきれていない部分が多いため)
- VPN通信の時など、rispotのせいで上手くいかないこともあったが、その分rispotの強靭さを実感した。rispotなどのネットワークを利用するとき、端末や状況によってはブラウザのログイン画面が出ないので、その状態でも上手く利用する方法があるならぜひ習得したいと思った。
- BチームのApacheが切れていたときに最初は何が原因か分からず困惑したが、一つ一つ状態を確認して`000-default.conf`に原因があることを突き止め、解決できたことに達成感を覚えている。他にも、LチカでLOGの仕組みについて理解したときやダッシュボードの機能が完成したときにも達成感を覚えた。ITだけに限ったことではないが、小さな達成感を感じることが成長のコツ・モチベーション管理のコツの一つだということを実感した。
---
### 堀田
#### 学んだこと
- ネットワーク構築とリモート操作
- SSH/SCP通信
- Windows PowerShellを用いたサーバーでのセキュアなリモート接続および、OS間でのファイル転送
- Linux基本操作
- ディレクトリ操作、`nano`エディタによる設定ファイルの編集
- Raspberry Piを用いたIoT開発
- ハードウェア制御
- Lチカ(LED点灯)を通じたGPIO制御
- Pythonによる制御プログラムの作成
- サーバー構築
- OSの初期化
- 固定IPの設定
- Firewallによるポート開放(HTTP/SSH)
- Webアプリケーション開発
- フロントエンド/バックエンド
- Google Maps APIの統合
- PHPとSQLite3を用いたコメント機能(データベース接続)の実装
- サイバーセキュリティ
- 脆弱性調査
- `nmap`や`dirb`を用いた情報収集
- 攻撃手法の理解
- `hydra`や`crunch`による辞書攻撃
- VPN接続による検証環境(Try Hack Me)の構築
#### ダッシュボードでの担当範囲と工夫
- 担当箇所
- WBGT(暑さ指数)のランキング表示
- 日本地図と連動した動的フィルター機能
- 全体の枠組み作成
- 工夫・難しかった点
- データ連携
- 環境省の数年分のデータを都道府県別に整理し、特定の地点を選択した際に全グラフが即座に同期されるフィルター機能を、JavaScript(`<script>`)を駆使して構築した。
- AIとの協働
- 複雑なエラー解決において、ChatGPTに提示する情報の粒度を調整するなど「プロンプトエンジニアリング」を意識した。
- 単に答えを写すのではなく、生成されたコードのロジックを解読し、自身の環境に適応させるプロセスに最も注力した。
#### 感想
実習全体を通して、単に技術をなぞるだけではなく、随時調べながら解決していく難しさと楽しさを体感できた。特に、ラズパイの構築やダッシュボード作成において生成AIを活用したが、こちらの伝え方一つで出力が大きく変わることを学んだ。ただ答えを求めるのではなく、自ら論理的に指示を出す経験を通じて、AIに依存するのではなく、目的を持って主体的に使いこなすという、これからの社会人に求められるリテラシーの基礎を養えたと感じている。今回の経験を、今後の研究活動や社会に出てから直面する未知の課題に対しても、筋道を立てて解決策を探る大学生としての学びの姿勢に繋げていきたいと考えている。
---
### 千葉
#### 講義で学んだこと
- HackMD の基本的な使い方（書き込み・表の作成方法・リンクの書き方・画像の載せ方など）
- Windows PowerShell でのコマンド操作方法（コマンド入力・リモート接続・SCPを使ったファイル転送）
- ラズパイへSSHで接続する方法
- ラズパイの初期化
- Linux の基本操作（ディレクトリ移動・ファイル作成、削除・nanoコマンドなど）
- LEDの点灯（Lチカ）の回路について
- Apache2をラズパイにインストールしてWebサーバーの構築
- Webサーバー作成のHTMLファイルの配置と表示方法
- サイトにPHPを埋め込み、ログイン認証機能を実装する方法（パスワード管理）
- ラズパイのデータベースの基本操作（デーブル確認・データ追加など）
- ダッシュボードの作成（CSVデータの読み込みと処理・都道府県ごとのボタン実装など）
- Kali Linux、VirtualBoxを使い、仮想環境を構築する方法
- TryHackMeへのVPN接続、nmap(ポートスキャン)、 dirb(隠れたディレクトリの検索)、smbclient(共有フォルダアクセス)、hydra(辞書攻撃)
#### 講義の感想
- 講義を受ける前は、ITやサーバーに関する知識がほとんどなく不安を感じていたが、講義内での実習を通してHTMLの作成やダッシュボードの構築、PowerShellやLinuxコマンド操作を実際に体験することで、基礎的な理解を深めることができた。ラズパイを使用したLチカの作成では、プログラムによって実際にLEDが点灯する様子を確認できて、プログラムと実際の機器が連携して動作することの面白さを感じた。ダッシュボード上で都道府県ごとのグラフを表示できた時には、これまでに学んだ内容が形として現れ大きな達成感を得ることが出来た。ラズパイを用いた実習やKali Linuxによるハッキング演習など、普段は体験することのない貴重な体験が出来てとても勉強になった。特に、辞書攻撃の演習を通してパスワードの設定や管理の重要性を改めて認識したため、今後はより安全な管理を心がけようと思った。ダッシュボードの作成やKali Linuxの演習では、コードのエラーが多く発生して原因を探しながら修正する作業は大変だったが、試行錯誤を繰り返す中で、エラーに対する向き合い方や問題解決に取り組む姿勢を身につけることができた。
---
## Bチーム
### 樋口
#### 授業で行ったこと
- HackMDの使用方法を覚えこれを用いて、授業内で行った作業内容や手順、発生したエラーとその解決方法を記録・共有した。
- Windows PowerShellからSSH通信を行い、Raspberry Piにリモート接続し、Linuxコマンドによる操作を行った。
- ディレクトリやファイルの作成・移動・削除、nanoを用いたテキスト編集など、Linuxの基本操作を実践した。
- Apacheをインストールし、Raspberry PiをWebサーバーとして構築し、HTMLファイルを公開した。
- Chart.jsを利用してグラフを作成するために、理解を深めた。
- CSV形式で整理したデータを用い、グラフを作成し、Webページ上に表示した
- WBGTや熱中症関連データを扱い、日別データを折れ線グラフなどで可視化する作業を行った。
- 実装中に発生したApacheやデータベース関連のエラーメッセージについて、生成AIを活用して意味を調べ、原因の特定や修正コードの検討を行った。
#### 授業を通して得ることができたこと
- SSH通信やLinux操作を通して、サーバを遠隔から管理・運用するための基礎的な技術を習得することができた。
- Webサーバ、HTML、PHPなどこれらのデータベースが連携する仕組みを、実践を通して理解することができた
- CSVデータをどのようにグラフ化するか数値データの傾向や変化を視覚的に把握する力が身についた。
- エラーメッセージは問題解決の手がかりであり、内容を正しく読み取ることが重要であると理解した。
- エラーコードが出た際、（エラーが発生した際）生成AIを「答えが出るだけのためのツール」として用いるのではなく、「原因を整理して理解を深めるためのツール」として活用する姿勢が身についた。どのように指示を行えば自分の求めている答えが返答されるかを学べた。
- セキュリティ演習を通して、システムを安全に運用して行くためには、防御する側だけの知識を得るだけではなく、攻撃者側からの視点の理解が必要不可欠であると学ぶ事ができた。
- TryHackMeを利用し、実在のシステムを攻撃するのではなく、学習用に用意された安全な環境で演習を行う重要性を学んだ。
- ポートスキャンを通して、サーバがどの通信ポートを開放しているかを調べることで、攻撃対象となり得るサービスを特定できることを理解した。
- パスワード認証がセキュリティ上の弱点になり得ることを学び、単純なパスワードが危険である理由を具体的に理解した。
- 辞書ファイルを用いたパスワード試行の仕組みを学び、認証の強度がセキュリティに大きく影響することを実感した。
- 攻撃が成立しない場合でも、エラーメッセージや接続失敗の情報から、システムの状態や防御の仕組みを推測できることを学んだ。
#### 課題として残ったこと
- 生成AIを活用してエラーを解決を行ったものの、提示されたコードや自分が構築したコード全体の設定内容などを正確に把握していないこと、十分に理解できていない部分が残った。
→基本的な部分は自分の学習で補いたい
- 作成した複数のグラフを、掲載することはできたが構成・配置・デザインを整理するなどのところまで至らなかった。
- Webページ全体の設計を十分に検討することができず、あとから修正を行う必要が多い場面が多かった。
- ハッキング演習は期間が短く基礎的な内容にとどまったため、今後さらに学習を自分で進めていこうと思った。
#### 感想
はじめはコマンドラインの操作やサーバー構築に戸惑うことが多かったが、実際にサーバー構築やWebページ作成を行うことで、情報通信ネットワークの仕組みを実体験を通して理解を深めることができた。作業を進めていくなかでエラーが発生し、その原因を調べて解決する過程は大変であったが、その分解決した時の達成感は非常に大きかった。エラーメッセージが出た際、生成AIに入力することで、原因の見当をつけやすくなり、試行錯誤を効率的に進められたと感じた。一方で、生成AIに頼りきるのではなく、自分自身で仕組みを理解しようとする姿勢の重要性も実感した。
本授業を通して、技術そのものでなく、「調べ、試し、修正する」という学習姿勢の大切さを学んだ。また、Web技術・データ処理・セキュリティに関して一連の流れとして学べたことは非常に有意義であった。今後の学習や研究にもいかしていきたい。
### 深野
#### 学んだことの整理
・Lチカやラズパイ操作を通して、プログラムで機器を制御する仕組みを理解した。
・HTMLやJavaScriptを用いて、WBGTなどのデータをグラフ化・可視化する力を身につけた。
・PowerShellの活用やラズパイへのリモート通信により、端末間の操作や管理を学んだ。
・ポートスキャンや侵入演習を通して、脆弱性と安全対策の重要性を理解した。
・エラー対応や試行錯誤を通して、実践的な問題解決力が向上した。
#### 感想
本実習では、Lチカやラズパイの操作を通して、プログラムが実際の機器を動かす仕組みを理解した。Linux操作やエラー対応を経験し、基礎的な開発環境の扱いに慣れることができた。
また、CSVデータの可視化やWebダッシュボード作成を通して、WBGTデータなどをグラフとして表示し、HTML・CSSを用いてデータをわかりやすく可視化・整理する方法を学んだ。さらに、IPアドレス検索による情報表示やサーバ設定の違いによる表示エラーへの対応を経験し、バックエンドとフロントエンドの連携やWebシステムの構造について理解が深めることができた。
さらに、ポートスキャンやサイト侵入演習を通して、セキュリティの重要性や脆弱性の存在を学び、技術の正しい使い方や情報モラルへの意識が高まった。
これらを通して、問題解決力や実践的なITスキルが向上し、システム全体を俯瞰して考える力が身についた。
### 町田
本実習を履修して、hackMDの基本的な使い方やラズパイ、ssh通信とはどのようなものなのか、Pythonプログラムの使い方を理解した上でサイトを作成する方法を学んだ。そして、自分たちの班で作成したサイトにGoogleマップを入れ、サイトのセキュリティーを強化するためにPHPを入れて、ユーザー名とパスワードを入力しないとアクセスできないようログイン認証を追加するプログラムを学んだ。
立正大学のポータルサイトのように、自分の学籍番号と自身で決めたパスワードを入力しないと自分のサイトにアクセスできないようにするためにどうすれば良いのかをチャットGPTやGiminiといった生成AIを活用しながら、班のメンバーと協力してサイトを作成することができた。
自身のサイトをセキュリティー強化したのち、私たちの班では過去の熱中症発生状況のダッシュボードを作成して、一目で簡単にわかりやすくまとめることができるようなプログラムを作成した。そこでの私の役割は、まずダッシュボードを作成するにあたってのレイアウトを考え、そこにどんなデータを入れるのか、どんなデータが必要になるのかを生成AIを用いて調べた。レイアウトや必要なデータが決まったら、そのデータがどこにあるのか、いつのものなのかを調べてダッシュボードに組み込めるようにデータの集約を行った。その際に担当教員の後藤先生よりアドバイスをいただき、Arc GISを使って発生場所をマップ化し、ワンクリックで詳細が見るにはどうすれば良いかを考えた。
私たちの班では、生成AIをふんだんに活用して実習を進めた。その中で、うまくAIを使いこなせていない場面があり、私たちが思い描く答えとAIが導き出す答えが食い違うことがあり、作業が一時中断することがあった。本実習だけでなく、他の授業、あるいは大学を卒業したのち、就職先でAIに頼ったり、そのAIを作成する場面が少なからずあると思う。そんな時に、AIに誤解されないように思い描く答えが最短で返ってくるためにはどういう文脈で質問を投げ掛ければ良いかということに気づくことができた。全員が全員ではないと思うが、今後このようなプログラミングに関わる企業に就職した時に、あまり時間をかけずにサイトを作成するためにはどうすれば良いかを考えた上で、行き当たりばったりではなく、同じ班、同じ部署の人と連携をとって一丸となって作業を行うことが大切だと気づかされる機会であったと思う。
本実習を通して、私たちの班では誰が何をやるのかといった役割分担ができておらず、複数人で同じ作業をやっていたことが課題点だと思った。しっかりと役割分担ができていれば、ダッシュボードの作成にあたって、より効率よく進めることができたと思った。私自身プログラミングに苦手意識があり、それでもデータ収集といった場面で少なからず貢献できてよかったと思う。本実習で学んだことを今後の人生に活かせたいと考えている。
Sign in with Wallet
Connect another wallet