制作日：2022年3月
制作物：リバーシアプリ
http://118.27.104.148
制作物の機能
- 上部のラジオボタンで強さの選択可能。詳細設定からモンテカルロ法の試行時間、試行回数を指定値で設定可能。
- 下部に現在の石数を表示。
- AIのパス時や、プレイヤーに配置場所がない際はユーザに通知する。またプレイヤーのパス時はパスボタンが出現する。
改築中…（追記）
フロントが寂しいのでフロント勉強兼ねて改築中。CSSの基礎からなので、リリースはいつになるやら…
制作のきっかけ
AI作成をしてみたく、CLIアプリとしてAI対戦リバーシを作成。せっかくならとそのCLIアプリをWEBアプリ化したのが制作のきっかけ。
本来はディープラーニングによるAI作成の予定だったがうまく学習できなかったため、フロントエンドとサーバー構築の勉強目的だけに特化してAIは単純なモンテカルロ法とした。
技術
フロント：Vue.js
石配置のクリックごとに画面遷移が発生するのを嫌ったため、Ajaxで通信とした。また石配置をバックエンドから受け取る想定のため、命令的に石の配置をコーディングするのは難しいため、フロントエンドフレームワークの導入を決定。
バックエンド開発者のため、初めてフロントサイドの開発に挑戦した。導入するフレームワークはフロントサイド未経験でも導入しやすいとのことでVue.jsを選定。
バックエンド：python（flaskフレームワーク）
CLIアプリ時はディープラーニングによるAI開発を目指していたため、AI部はpythonのディープラーニングライブラリのpytorchを使用していた。それに合わせて拡張部分のWEBアプリ部もpythonとし、石配置を返却するAPIとしてのWEBフレームワーク部分はflaskを使用した。
のちにディープラーニング部のAIが学習に失敗したため、ディープラーニング学習用の対戦相手であるモンテカルロ法のAIのみを対戦相手として利用。
制作の感想
初めて実際にネット上で公開したWEBアプリ。そのためWEBサーバーへのデプロイ作業やLinuxサーバー自体の設定は初作業だった。仕事では初期設定が済んでいる既存システムが対象のため、初期構築的なポート開放やLinuxのユーザ追加などの新しい知見が得られた。
またフロンエンドについては、初めてフロントエンド側を作成したためCSSやHTMLで作成したいレイアウトに調整するのにさえ苦戦しました。
フロントエンドのフレームワークについては、制作を優先したためVue.jsの基本機能のみで作成した。今になって思うとVuex使えば、イベント伝播地獄に陥らずに済んだと反省。（下記の感想記事にもその辺りを記載してます。）
感想記事はコチラ↓
制作時のTipsはコッチ↓
コメント