WWASAVE.js を docker に対応したり、フロントエンド部分を修正したりしました。
- 現時点では develop ブランチにマージしてません。試してみたい方は fix-css ブランチからどうぞ。
- ちなみに docker 対応とフロントエンド部分修正は1つのブランチでやっちゃいました。ごめんなさい。
WWASAVE.js とは
WWASAVE.js は、WWA Wingのセーブデータを即時に保存できるWebアプリで、hirarira が開発しました。WWAがJavaアプレットだった時代に開発された WWASAVE CGI をWWA Wing向けに移植したものです。
これまでWWA Wingのゲームを中断したい時はセーブデータを保存するためのパスワードを取得し、一旦テキストファイルに置く必要があります(下図参照)。再開したい時もテキストファイルを読み込む必要があります。
WWASAVE.js はセーブデータの保存と読み込みを簡単にしてもらえます。中断したいときはゲーム画面にある「保存」ボタンを押すだけ。読み込みたいときは保存したデータをそのまま遊べばすぐに再開できます。
担当したところ
docker 対応
WWASAVE.js を docker-compose に対応しました。これまでWebアプリを動作するには
と手間が掛かりましたが、docker-compose だとソースファイルのダウンロードと設定ファイルの修正、コンテナの起動だけで済みます。
docker 自体の詳しい説明は割愛します。扱いにはコンテナやイメージについて知っておく必要がありますが、知っておくと便利です。
フロントエンドの修正
CSSがヘボいとのことでしたので修正しました。
ボタンやヘッダーなどのCSSコードは、全ては自分の手で入力せずCSSフレームワークの Bootstrap を使用しました。フロントエンドの修正の中で一番大変だったのは Bootstrap のCSSの配置方法でした。
CSSフレームワークをWebアプリ上で使うには様々な方法があります。
- CSSファイルを直接配置
- 今後、CSSファイルのアップデートする際にまたダウンロードする、これは大変
- CDNでCSSファイルを持っていく
- ネットワーク環境が乏しいと読み込みに時間が掛かる
- bower でCSSファイルをインストール
以上のようなことから、アップデートを少ない操作で済ませられる方法として、Yarnとwebpackでjsファイルを作る方向で行きました。しかしながら、webpackの設定ファイルがうまく記述できなかったり、なぜCSSファイルもJavaScriptファイル1つにまとめるのか理解できなかったりして、躓いてました。YarnでインストールしたCSSファイルをコピーで持っていく方法もありましたが、あまり推奨するものではありません。
production ビルドだとビルドに時間が掛かったり、HTMLの出力が結構見辛かったりと、課題はまだまだありますが、なんとか形にすることが出来ました。現時点では雑に作った感じがしますが、またある程度勉強出来たら、もっと改良してみたいですね。
おまけ: webpack の設定項目名の疑問
ちなみに、CSSを読み込む際に使う css-loader や style-loader を設定する際に、style-loader の記事では対象のファイルを正規表現で指定する項目名が test
になっていて、これが不自然に思ってたことがあります。
これについて聞いたところ、どうやら正規表現で指定するメソッド名の test
から持ってきたそうです。