自作ソシャゲ用CLIツールにWebサーバ機能を追加し誰でもデータを閲覧しやすくしました
以前の記事でCLIツールを作成した記事を書きました。 litencatt.hatenablog.com
早いものであれから133日経過しています。その間、4/1は横浜スタジアムに行っていたりなどもしていました。
その間も引き続き自分のペースでゲームを続けていますが、ただ続けているだけではなく最近そのツールにWebサーバ機能を追加しWebアプリ化したことでブラウザで情報を見たり登録できるようにしたのでそのことについて今回紹介します。現時点ではローカルで実行して自分のデータを閲覧・更新するための機能のみとなっており、インターネット上に公開する予定はありません。
シーン一覧
Webアプリの画面
今回作成したWebアプリの画面は以下です。ほぼ素のHTML要素で構成しているので超シンプルな見た目となっていますが一覧情報を閲覧する上で必要な機能はほぼすべて実装しています。
CLIツールとの比較
CLIツールでは以下のようなコマンドで表示し、必要に応じて条件を引数として追加して知りたい情報を表示する必要がありました。 Webアプリの方ではシーン一覧はCLIでは引数で渡していたような各種条件がselectやチェックボックスで選べるようにしており、情報の絞り込みを行うための引数について知っておく必要もなくなり、条件を変えての様々な情報がすごく見やすくなったと思っています。
$ uniar list scene -f +--------+------------------------------------+---------+------------+--------+-------+-------+--------+--------+--------+------+------+------+-------+ | COLOR | PHOTOGRAPH | SSRPLUS | MEMBER | EXPECT | TOTAL | ALL35 | VODA50 | DAPE50 | VOPE50 | VO85 | DA85 | PE85 | HAVE | +--------+------------------------------------+---------+------------+--------+-------+-------+--------+--------+--------+------+------+------+-------+ | Green | こんなに好きになっちゃっていいの？ | true | 加藤史帆 | 3.68 | 13067 | 1 | 1 | 2 | 1 | 1 | 2 | 2 | false | | Purple | Buddies | true | 山﨑天 | 3.72 | 13323 | 2 | 2 | 1 | 6 | 4 | 1 | 6 | false | | Yellow | 誰がその鐘を鳴らすのか？ | true | 山﨑天 | 3.68 | 13076 | 3 | 3 | 5 | 3 | 2 | 7 | 5 | false | | Red | ハッピーオーラ | true | 松田好花 | 3.68 | 12974 | 4 | 4 | 7 | 2 | 3 | 13 | 4 | false | | Yellow | ハッピーオーラ | true | 高瀬愛奈 | 3.68 | 12972 | 5 | 7 | 4 | 5 | 8 | 11 | 3 | false | | Red | 二人セゾン | true | 小池美波 | 3.68 | 12859 | 6 | 5 | 6 | 7 | 7 | 5 | 11 | false | | Red | アザトカワイイ | true | 佐々木美玲 | 3.72 | 13324 | 7 | 18 | 3 | 4 | 19 | 22 | 1 | false | | Green | こんなに好きになっちゃっていいの？ | true | 齊藤京子 | 3.68 | 12971 | 8 | 6 | 8 | 12 | 11 | 6 | 18 | false | | Blue | 風に吹かれても | true | 上村莉菜 | 3.68 | 12931 | 9 | 9 | 14 | 8 | 6 | 14 | 19 | false | | Red | 誰がその鐘を鳴らすのか？ | true | 菅井友香 | 3.68 | 13064 | 10 | 13 | 10 | 9 | 13 | 15 | 8 | false | | Green | ドレミソラシド | true | 上村ひなの | 3.68 | 12974 | 11 | 10 | 11 | 18 | 15 | 8 | 25 | false | | Purple | JOYFUL LOVE | true | 渡邉美穂 | 3.68 | 12858 | 12 | 17 | 12 | 10 | 17 | 20 | 10 | false | ...
シーン登録
Webアプリの画面
こちらもかなり質素な見た目となっていますが、表形式のチェックボックスによる保持シーンカードの閲覧・登録を行えるようにしたことで、シーンカードの保持情報が見やすくなり、かつ情報の更新も非常に簡単になりました。
CLIツールとの比較
CLIでは以下のように自分が持っているシーンカードの登録もCLIの場合は1カードづつ0/1を入力していく必要がありました。シーンカード数は少なくないので1カードあたり数字の入力とエンターキーの実行という2つのアクションが必要かつ、間違えた場合の再セットアップが面倒だと思っていたのでここはWebアプリ化したことで操作性が良くなったと思います。
$ uniar setup scene == 所持シーンカードセットアップ == 0:未所持 1:所持 デフォルト値:0(未所持) サイレントマジョリティー Blue 石森虹花 (現在: 未所持) (0/1) [0]: 1 サイレントマジョリティー Red 上村莉菜 (現在: 未所持) (0/1) [0]: ...
メンバー情報の入力
こちらもシーンカードのセットアップ同様、メンバー毎の絆Lvやディスコグラフィー値などをフォームで入力して更新できるようにしたことで情報の入力・更新が簡単になりました。
Webサーバの起動方法
まだアプリ自体のdocker化を行えていないので少し手間ですが、以下レポジトリをclone後にサーバを起動し http://localhost:8090 にアクセスすればOKです。
git clone https://github.com/litencatt/uniar.git cd path/to/uniar go run ./cmd/uniar/main.go server
Webサーバ機能の実装について
Webサーバ機能を追加するにあたってはWebサーバ起動用のCLIコマンドを追加することで実現しました。今回Webサーバの実装にはginを使用し、設計としては新たにhandler層を追加して実装を行っています。Webサーバ機能を実装する上でCLIツールとしてターミナルに表示するようにしていた頃からデータ処理部分はservice層として実装していたので、今回Webアプリ化するにあたってはDBから取得したデータの処理部分はCLIと同じ実装を使い回せたのでよかったです。
今回Webアプリ化するにあたって一番苦労したのはgo templateでviewを作成するところでした。特にtableで表形式に保持カードの情報をチェックボックスで表示するためのデータの持たせ方や、そのデータをview側でループさせて表示・更新するところが地味ながら苦労しました。
まだすべてのCLIツールでの機能をWebアプリ化できてはいませんが、主要な機能をWebアプリ化したことで当初やりたかったことがようやく実現することができました。ただこれでCLIツールとしてWebサーバ機能以外は使わなくなるわけではなく、用途に応じて使い分けできるようになっただけとおもっているので、Webアプリのほうは情報をまとめて更新したい場合などケースに応じて利用しつつ、CLIツールもまだまだ活用していけるように今後も開発していければと思っています。
