引き継ぎ用ページ
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
「機械学習によるホタルイカの身投げ量予測・Webサイト構築」...
*目次 [#p229f637]
#CONTENTS
*前提 [#gfd00b24]
・基本的にローカル（個人のPC内）でコードを動かし、自分と...
・このサイトは一般公開予定なので本番環境（https://bakuwak...
・すべてDockerコンテナ内で動かすので大丈夫だと思いますが...
・スムーズに進めば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]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**1.2 学習用データの保存 [#geb65847]
ここまでできたら自分に連絡して、学習用のjsonファイルをも...
&color(red){'''この json ファイルは外部公開・第三者への共...
もらったjsonファイルを、このようにdataフォルダの中に、フ...
#ref(directory.png,,40%)
**1.3 機械学習 [#q990397b]
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
1. Dockerイメージのビルド
docker build -t hotaruika-ml .
2. Dockerコンテナの実行
docker run --rm -v $(pwd)/output:/app/output hotaruika-ml
2つ目のコマンドを実行すると機械学習の処理が走ります。実行...
**1.4 結果の確認 [#sb68cb12]
処理が終了すると、ターミナルにこのように表示されることを...
#ref(terminal_resoult.png,,40%)
また、outputというフォルダが作成され、その中にこのような...
|#ref(prediction_vs_true.png,,55%)|#ref(feature_importanc...
*2. 予測APIをローカルで起動して動作確認する [#j86fa617]
予測APIのコードをローカル環境（Docker）で実行し、サーバー...
全体構成の中のこの赤枠の部分の内容です。
#ref(str_api.png,,35%)
**2.1 コードのダウンロード [#v57133fe]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**2.2 モデルファイルの保存 [#geb65847]
ここまでできたら自分に連絡して、5つの機械学習モデルファイ...
&color(red){'''Webサイトは一般向けに公開予定です。このモ...
もらった5つのファイルを、このようにml/modelフォルダの中に...
#ref(directory_p_api.png,,40%)
**2.3 DockerでAPIサーバーの起動と動作確認 [#p41fe07d]
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
***コンテナのビルドと起動 [#xaa61567]
docker compose up --build -d
このコマンドを実行することでDockerコンテナ内にAPIサーバー...
コマンド実行後、コンテナを起動するまで少し時間がかかりま...
http://localhost:8081/predict/week
アクセスし、このように7日分の予測値や、気象予報値などが返...
#ref(prediction_data.png,,20%)
***コンテナの停止 [#q53dd845]
基本的にDockerは自分のPCの内部に仮想の新しいPCを建ててい...
docker compose down
※ですが、次のセクションのWebサイトの動作確認ではこのAPIの...
**コードの解説（時間があれば） [#cdf94d23]
*3. Webサイトをローカルで起動して動作確認する [#u9694aa4]
Webサイトのコードをローカル環境（Docker）で起動し、サーバ...
全体構成の中のこの赤枠の部分の内容です。
#ref(str_web.png,,35%)
**3.1 コードのダウンロード [#v57133fe]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**3.2 Dockerでフロントエンド、バックエンド、データベース...
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
***コンテナのビルドと起動 [#xaa61567]
docker compose up --build -d
このコマンドを実行することでDockerコンテナ内に3つのサーバ...
コマンド実行後、コンテナを起動するまで少し時間がかかりま...
**3.3 動作確認 [#u4fab636]
※前述しましたが、このアプリは、予測APIにリクエストを送信...
Docker Desktopでこのように今回の3つ、前回の予測APIの1つの...
#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内）でコードを動かし、自分と...
・このサイトは一般公開予定なので本番環境（https://bakuwak...
・すべてDockerコンテナ内で動かすので大丈夫だと思いますが...
・スムーズに進めば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]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**1.2 学習用データの保存 [#geb65847]
ここまでできたら自分に連絡して、学習用のjsonファイルをも...
&color(red){'''この json ファイルは外部公開・第三者への共...
もらったjsonファイルを、このようにdataフォルダの中に、フ...
#ref(directory.png,,40%)
**1.3 機械学習 [#q990397b]
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
1. Dockerイメージのビルド
docker build -t hotaruika-ml .
2. Dockerコンテナの実行
docker run --rm -v $(pwd)/output:/app/output hotaruika-ml
2つ目のコマンドを実行すると機械学習の処理が走ります。実行...
**1.4 結果の確認 [#sb68cb12]
処理が終了すると、ターミナルにこのように表示されることを...
#ref(terminal_resoult.png,,40%)
また、outputというフォルダが作成され、その中にこのような...
|#ref(prediction_vs_true.png,,55%)|#ref(feature_importanc...
*2. 予測APIをローカルで起動して動作確認する [#j86fa617]
予測APIのコードをローカル環境（Docker）で実行し、サーバー...
全体構成の中のこの赤枠の部分の内容です。
#ref(str_api.png,,35%)
**2.1 コードのダウンロード [#v57133fe]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**2.2 モデルファイルの保存 [#geb65847]
ここまでできたら自分に連絡して、5つの機械学習モデルファイ...
&color(red){'''Webサイトは一般向けに公開予定です。このモ...
もらった5つのファイルを、このようにml/modelフォルダの中に...
#ref(directory_p_api.png,,40%)
**2.3 DockerでAPIサーバーの起動と動作確認 [#p41fe07d]
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
***コンテナのビルドと起動 [#xaa61567]
docker compose up --build -d
このコマンドを実行することでDockerコンテナ内にAPIサーバー...
コマンド実行後、コンテナを起動するまで少し時間がかかりま...
http://localhost:8081/predict/week
アクセスし、このように7日分の予測値や、気象予報値などが返...
#ref(prediction_data.png,,20%)
***コンテナの停止 [#q53dd845]
基本的にDockerは自分のPCの内部に仮想の新しいPCを建ててい...
docker compose down
※ですが、次のセクションのWebサイトの動作確認ではこのAPIの...
**コードの解説（時間があれば） [#cdf94d23]
*3. Webサイトをローカルで起動して動作確認する [#u9694aa4]
Webサイトのコードをローカル環境（Docker）で起動し、サーバ...
全体構成の中のこの赤枠の部分の内容です。
#ref(str_web.png,,35%)
**3.1 コードのダウンロード [#v57133fe]
iie.lab.tpu.2526のアカウントのGoogleDriveにアクセスし「学...
**3.2 Dockerでフロントエンド、バックエンド、データベース...
vscodeでダウンロードしたフォルダを開き、ターミナルを開い...
***コンテナのビルドと起動 [#xaa61567]
docker compose up --build -d
このコマンドを実行することでDockerコンテナ内に3つのサーバ...
コマンド実行後、コンテナを起動するまで少し時間がかかりま...
**3.3 動作確認 [#u4fab636]
※前述しましたが、このアプリは、予測APIにリクエストを送信...
Docker Desktopでこのように今回の3つ、前回の予測APIの1つの...
#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%)
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
