Aokashi Room

作った作品の紹介やレビュー、トラブルシューティングとか色々

WWASAVE.js のdocker対応とフロントエンドの修正を担当しました

WWASAVE.js を docker に対応したり、フロントエンド部分を修正したりしました。

github.com

  • 現時点では develop ブランチにマージしてません。試してみたい方は fix-css ブランチからどうぞ。
  • ちなみに docker 対応とフロントエンド部分修正は1つのブランチでやっちゃいました。ごめんなさい。

WWASAVE.js とは

WWASAVE.js は、WWA Wingのセーブデータを即時に保存できるWebアプリで、hirarira が開発しました。WWAJavaアプレットだった時代に開発された WWASAVE CGIWWA Wing向けに移植したものです。

これまでWWA Wingのゲームを中断したい時はセーブデータを保存するためのパスワードを取得し、一旦テキストファイルに置く必要があります(下図参照)。再開したい時もテキストファイルを読み込む必要があります。

f:id:aokashi:20180419143621p:plain

WWASAVE.js はセーブデータの保存と読み込みを簡単にしてもらえます。中断したいときはゲーム画面にある「保存」ボタンを押すだけ。読み込みたいときは保存したデータをそのまま遊べばすぐに再開できます。

担当したところ

docker 対応

WWASAVE.js を docker-compose に対応しました。これまでWebアプリを動作するには

  1. 実行環境の構築(apache, php, mysql)と設定
  2. Webアプリのソースファイルのダウンロード
  3. (必要に応じて) 1. の設定を元に 2. の設定ファイルを修正
  4. アドレスを打ち込んで接続!

と手間が掛かりましたが、docker-compose だとソースファイルのダウンロードと設定ファイルの修正、コンテナの起動だけで済みます。

docker 自体の詳しい説明は割愛します。扱いにはコンテナやイメージについて知っておく必要がありますが、知っておくと便利です。

フロントエンドの修正

f:id:aokashi:20180419141101p:plain

CSSがヘボいとのことでしたので修正しました。

ボタンやヘッダーなどのCSSコードは、全ては自分の手で入力せずCSSフレームワークBootstrap を使用しました。フロントエンドの修正の中で一番大変だったのは Bootstrap のCSSの配置方法でした。

CSSフレームワークをWebアプリ上で使うには様々な方法があります。

  • CSSファイルを直接配置
    • 今後、CSSファイルのアップデートする際にまたダウンロードする、これは大変
  • CDNCSSファイルを持っていく
    • ネットワーク環境が乏しいと読み込みに時間が掛かる
  • bowerCSSファイルをインストール
    • bower 自体アップデートが行っていないみたいで、Yarnwebpackを使ったほうが良いと案内されている
    • つまり時代遅れ...?

以上のようなことから、アップデートを少ない操作で済ませられる方法として、Yarnとwebpackでjsファイルを作る方向で行きました。しかしながら、webpackの設定ファイルがうまく記述できなかったり、なぜCSSファイルもJavaScriptファイル1つにまとめるのか理解できなかったりして、躓いてました。YarnでインストールしたCSSファイルをコピーで持っていく方法もありましたが、あまり推奨するものではありません。

f:id:aokashi:20180419141702p:plain

production ビルドだとビルドに時間が掛かったり、HTMLの出力が結構見辛かったりと、課題はまだまだありますが、なんとか形にすることが出来ました。現時点では雑に作った感じがしますが、またある程度勉強出来たら、もっと改良してみたいですね。

おまけ: webpack の設定項目名の疑問

ちなみに、CSSを読み込む際に使う css-loader や style-loader を設定する際に、style-loader の記事では対象のファイルを正規表現で指定する項目名が test になっていて、これが不自然に思ってたことがあります。

これについて聞いたところ、どうやら正規表現で指定するメソッド名の test から持ってきたそうです。

developer.mozilla.org