引き継ぎ用ページの編集

「機械学習によるホタルイカの身投げ量予測・Webサイト構築」の研究の引き継ぎ用ページです。

*目次 [#p229f637]

#CONTENTS

*前提 [#gfd00b24]

・基本的にローカル（個人のPC内）でコードを動かし、自分と同じ結果を出したり、予測API・Webサイトを動かせるようになることが目標です。

・このサイトは一般公開予定なので本番環境（https://bakuwaki.jp/）の設定などは教えれられないです🙇

・すべてDockerコンテナ内で動かすので大丈夫だと思いますが、自分の環境がMacOSなのでWindowsだとうまくいかないことがあるかもしれないです。

・スムーズに進めば1時間少々で終わる内容です。

*やること [#dc3cf9e5]

''1. 機械学習コードを実行し、同じ結果を再現する''

''2. 予測APIをローカルで起動して動作確認する''

''3. Webサイトをローカルで起動して動作確認する''

※データの収集、サーバーへのデプロイ（公開）などは大変なので行いません。

*0. Dockerのインストール [#qb8431d4]

全部Dockerの仮想環境上でコードを動かすので、Dockerが入っていない場合インストールしてください。

https://zenn.dev/upgradetech/articles/8e8b82e9d5c494

https://qiita.com/zembutsu/items/a98f6f25ef47c04893b3

Windowsの場合、この記事などが参考になりそうです。

上の方の記事の場合「✅ インストール完了！」、下の記事の場合「Docker Desktop を操作する前に」というところまででいいです。DockerへのSignIn・SignUpはしなくても動くので、特にしなくても大丈夫です。

インストールしたらターミナルで

docker --version

を実行してこのようにバージョン情報が返って来れば大丈夫です。

#ref(docker_version.png,,40%)

*1. 機械学習コードを実行し、同じ結果を再現する [#d32faf97]
機械学習の学習コードを動かして、自分と同じ結果が再現できるようにします。

全体構成の中のこの赤枠の部分の内容です。
#ref(str_lern.png,,35%)

**1.1 コードのダウンロード [#v57133fe]

iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学生」→「海野」→「プログラム」フォルダの中のhotaruika-machine-learningをダウンロードしてください。

**1.2 学習用データの保存 [#geb65847]

ここまでできたら自分に連絡して、学習用のjsonファイルをもらってください。

&color(red){'''この json ファイルは外部公開・第三者への共有をしないでください！欲しい場合は必ず自分（海野）経由で入手してください。'''};

もらったjsonファイルを、このようにdataフォルダの中に、ファイル名をhotaruika_past_data.jsonとして保存してください。

#ref(directory.png,,40%)

**1.3 機械学習 [#q990397b]

vscodeでダウンロードしたフォルダを開き、ターミナルを開いてプロジェクトのルートディレクトリ（Dockerfileがある場所）で、以下の2つのコマンドを実行してください。

1. Dockerイメージのビルド
 docker build -t hotaruika-ml .
2. Dockerコンテナの実行
 docker run --rm -v $(pwd)/output:/app/output hotaruika-ml

2つ目のコマンドを実行すると機械学習の処理が走ります。実行には2〜3分ほどかかります。

**1.4 結果の確認 [#sb68cb12]

処理が終了すると、ターミナルにこのように表示されることを確認してください。

#ref(terminal_resoult.png,,40%)

また、outputというフォルダが作成され、その中にこのような結果の2つのグラフが作成されていることを確認してください。

|#ref(prediction_vs_true.png,,55%)|#ref(feature_importance.png,,32%)|

*2. 予測APIをローカルで起動して動作確認する [#j86fa617]
予測APIのコードをローカル環境（Docker）で実行し、サーバーを立ち上げて正常に動作できるようにします。

全体構成の中のこの赤枠の部分の内容です。
#ref(str_api.png,,35%)

**2.1 コードのダウンロード [#v57133fe]

iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学生」→「海野」→「プログラム」フォルダの中のhotaruika-predict-apiをダウンロードしてください。

**2.2 モデルファイルの保存 [#geb65847]

ここまでできたら自分に連絡して、5つの機械学習モデルファイルをもらってください。

&color(red){'''Webサイトは一般向けに公開予定です。このモデルファイルも外部公開・第三者への共有をしないでください！欲しい場合は必ず自分（海野）経由で入手してください。'''};

もらった5つのファイルを、このようにml/modelフォルダの中に、このように保存してください。

#ref(directory_p_api.png,,40%)

**2.3 DockerでAPIサーバーの起動と動作確認 [#p41fe07d]

vscodeでダウンロードしたフォルダを開き、ターミナルを開いてプロジェクトのルートディレクトリ（docker-compose.ymlファイルがある場所）で、以下のコマンドを実行ます。

***コンテナのビルドと起動 [#xaa61567]
 docker compose up --build -d

このコマンドを実行することでDockerコンテナ内にAPIサーバーが起動します。

コマンド実行後、コンテナを起動するまで少し時間がかかります。起動が完了したら、ブラウザで以下のURLにアクセスします。
 http://localhost:8081/predict/week

アクセスし、このように7日分の予測値や、気象予報値などが返ってきたら成功です。

#ref(prediction_data.png,,20%)

***コンテナの停止 [#q53dd845]
基本的にDockerは自分のPCの内部に仮想の新しいPCを建てているようなものなので、Docker起動中はメモリを大量に使用するので重くなることがあります。使用していないときは以下のコマンドで停止しておくことがおすすめです。
 docker compose down

※ですが、次のセクションのWebサイトの動作確認ではこのAPIのDockerが起動していないとうまくいきません。

**コードの解説（時間があれば） [#cdf94d23]

*3. Webサイトをローカルで起動して動作確認する [#u9694aa4]
Webサイトのコードをローカル環境（Docker）で起動し、サーバー（フロントエンド、バックエンド、データベース）を立ち上げて正常に動作できるようにします。

全体構成の中のこの赤枠の部分の内容です。
#ref(str_web.png,,35%)

**3.1 コードのダウンロード [#v57133fe]

iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学生」→「海野」→「プログラム」フォルダの中のhotaruika-bakuwaki-forecastをダウンロードしてください。

**3.2 Dockerでフロントエンド、バックエンド、データベースサーバーの起動 [#p41fe07d]

***コンテナのビルドと起動 [#xaa61567]
 docker compose up --build -d

このコマンドを実行することでDockerコンテナ内に3つのサーバーが起動します。

コマンド実行後、コンテナを起動するまで少し時間がかかります。

**3.3 動作確認 [#u4fab636]

※前述しましたが、このアプリは、予測APIにリクエストを送信してデータを取得するので、前回の予測APIのサーバーが起動している必要があります。

Docker Desktopでこのように今回の3つ、前回の予測APIの1つの、計4つのコンテナが起動していることを確認してください。

#ref(docker.png,,35%)

起動が完了したら、ブラウザで以下のURLにアクセスします。
 http://localhost:3001

Webサイトが表示され、以下のことを確認してください。

***メインページ [#v99d92b2]
・ホタルイカの身投げ量予測が表示される（2〜5月以外はオフシーズン）

#ref(main2.png,,20%)

・口コミが表示され、自分でも投稿できる

#ref(main_post2.png,,20%)

***詳細ページ [#m7fa1dab]
・詳細ページに移動し、その日の詳細情報が表示される

#ref(detail2.png,,20%)

***プレビューページ [#f03de51a]
・以下のURLでシーズン中のデモデータでのプレビューページが表示される

http://localhost:3001/preview

#ref(main_pre2.png,,20%)

https://bakuwaki.jp/preview/detail/2025-05-26

#ref(detail_pre2.png,,20%)

***管理者ページ [#j4a1c6c6]

・以下のURLにアクセスし、パスワード（dev_password）を入力し管理者画面にログインでき、管理者権限で口コミを投稿したり、削除したりできる

http://localhost:3001/admin

ログイン画面
#ref(admin_login.png,,25%)

管理者画面
#ref(admin.png,,25%)

タイムスタンプを変更しない

「機械学習によるホタルイカの身投げ量予測・Webサイト構築」の研究の引き継ぎ用ページです。

*目次 [#p229f637]

#CONTENTS

*前提 [#gfd00b24]

・基本的にローカル（個人のPC内）でコードを動かし、自分と同じ結果を出したり、予測API・Webサイトを動かせるようになることが目標です。

・このサイトは一般公開予定なので本番環境（https://bakuwaki.jp/）の設定などは教えれられないです🙇

・すべてDockerコンテナ内で動かすので大丈夫だと思いますが、自分の環境がMacOSなのでWindowsだとうまくいかないことがあるかもしれないです。

・スムーズに進めば1時間少々で終わる内容です。

*やること [#dc3cf9e5]

''1. 機械学習コードを実行し、同じ結果を再現する''

''2. 予測APIをローカルで起動して動作確認する''

''3. Webサイトをローカルで起動して動作確認する''

※データの収集、サーバーへのデプロイ（公開）などは大変なので行いません。

*0. Dockerのインストール [#qb8431d4]

全部Dockerの仮想環境上でコードを動かすので、Dockerが入っていない場合インストールしてください。

https://zenn.dev/upgradetech/articles/8e8b82e9d5c494

https://qiita.com/zembutsu/items/a98f6f25ef47c04893b3

Windowsの場合、この記事などが参考になりそうです。

インストールしたらターミナルで

docker --version

を実行してこのようにバージョン情報が返って来れば大丈夫です。

#ref(docker_version.png,,40%)

*1. 機械学習コードを実行し、同じ結果を再現する [#d32faf97]
機械学習の学習コードを動かして、自分と同じ結果が再現できるようにします。

全体構成の中のこの赤枠の部分の内容です。
#ref(str_lern.png,,35%)

**1.1 コードのダウンロード [#v57133fe]

**1.2 学習用データの保存 [#geb65847]

ここまでできたら自分に連絡して、学習用のjsonファイルをもらってください。

&color(red){'''この json ファイルは外部公開・第三者への共有をしないでください！欲しい場合は必ず自分（海野）経由で入手してください。'''};

もらったjsonファイルを、このようにdataフォルダの中に、ファイル名をhotaruika_past_data.jsonとして保存してください。

#ref(directory.png,,40%)

**1.3 機械学習 [#q990397b]

1. Dockerイメージのビルド
 docker build -t hotaruika-ml .
2. Dockerコンテナの実行
 docker run --rm -v $(pwd)/output:/app/output hotaruika-ml

2つ目のコマンドを実行すると機械学習の処理が走ります。実行には2〜3分ほどかかります。

**1.4 結果の確認 [#sb68cb12]

処理が終了すると、ターミナルにこのように表示されることを確認してください。

#ref(terminal_resoult.png,,40%)

また、outputというフォルダが作成され、その中にこのような結果の2つのグラフが作成されていることを確認してください。

|#ref(prediction_vs_true.png,,55%)|#ref(feature_importance.png,,32%)|

全体構成の中のこの赤枠の部分の内容です。
#ref(str_api.png,,35%)

**2.1 コードのダウンロード [#v57133fe]

**2.2 モデルファイルの保存 [#geb65847]

ここまでできたら自分に連絡して、5つの機械学習モデルファイルをもらってください。

もらった5つのファイルを、このようにml/modelフォルダの中に、このように保存してください。

#ref(directory_p_api.png,,40%)

**2.3 DockerでAPIサーバーの起動と動作確認 [#p41fe07d]

***コンテナのビルドと起動 [#xaa61567]
 docker compose up --build -d

このコマンドを実行することでDockerコンテナ内にAPIサーバーが起動します。

アクセスし、このように7日分の予測値や、気象予報値などが返ってきたら成功です。

#ref(prediction_data.png,,20%)

※ですが、次のセクションのWebサイトの動作確認ではこのAPIのDockerが起動していないとうまくいきません。

**コードの解説（時間があれば） [#cdf94d23]

全体構成の中のこの赤枠の部分の内容です。
#ref(str_web.png,,35%)

**3.1 コードのダウンロード [#v57133fe]

**3.2 Dockerでフロントエンド、バックエンド、データベースサーバーの起動 [#p41fe07d]

***コンテナのビルドと起動 [#xaa61567]
 docker compose up --build -d

このコマンドを実行することでDockerコンテナ内に3つのサーバーが起動します。

コマンド実行後、コンテナを起動するまで少し時間がかかります。

**3.3 動作確認 [#u4fab636]

Docker Desktopでこのように今回の3つ、前回の予測APIの1つの、計4つのコンテナが起動していることを確認してください。

#ref(docker.png,,35%)

起動が完了したら、ブラウザで以下のURLにアクセスします。
 http://localhost:3001

Webサイトが表示され、以下のことを確認してください。

***メインページ [#v99d92b2]
・ホタルイカの身投げ量予測が表示される（2〜5月以外はオフシーズン）

#ref(main2.png,,20%)

・口コミが表示され、自分でも投稿できる

#ref(main_post2.png,,20%)

***詳細ページ [#m7fa1dab]
・詳細ページに移動し、その日の詳細情報が表示される

#ref(detail2.png,,20%)

***プレビューページ [#f03de51a]
・以下のURLでシーズン中のデモデータでのプレビューページが表示される

http://localhost:3001/preview

#ref(main_pre2.png,,20%)

https://bakuwaki.jp/preview/detail/2025-05-26

#ref(detail_pre2.png,,20%)

***管理者ページ [#j4a1c6c6]

・以下のURLにアクセスし、パスワード（dev_password）を入力し管理者画面にログインでき、管理者権限で口コミを投稿したり、削除したりできる

http://localhost:3001/admin

ログイン画面
#ref(admin_login.png,,25%)

管理者画面
#ref(admin.png,,25%)

テキスト整形のルールを表示する

引き継ぎ用ページ の編集