前回↓の続きです。

前回までに、仮想webサーバの動作確認が終わり、いよいよ本題です。

サーバでwasmを実行可能にする

さて、公式wikiによると.wasmの動作がサポートされていないと
Ruffleは動かないようです。なので、説明に従ってMIMEタイプの追加を行います。

そもそもMIMEタイプって何だ...

私は無知なので、MIMEタイプってなんだろうと思いググっていたら、
この記事がヒットしました。同じ疑問を持った人がいて助かりました...！

この記事を読むと、公式wikiの設定の必要性がわかりました。
今回はApache2を用いているので、然るべき設定ファイルに下記を追記します。

AddType application/wasm .wasm

AddTypeは、すでに登録されている拡張子の他に、
別の拡張子に対応するMIMEタイプを追加することができます。

この設定をわかりやすく言うと
*.wasmは、WebAssembly形式のバイナリデータですよ～
というのをブラウザに伝えるためということです。これがわからないと、
.wasmファイルを読み込んでもブラウザは何をすればいいのかわからないので
この設定が必要です。

意味がわかったところで取り組んでいきましょう！

こちらの記事を参考にして設定ファイルに追記していきます。 www.adminweb.jp

# vim /etc/httpd/conf/httpd.conf

vimでhttpd.confを開きます。

/AddType

開けたら、AddType という文字列を検索し、追記に最適な場所を探します。

<IfModule mime_module>
~
~ 
~
</IfModule>

ありました。上記の範囲ならどこに追記しても良いです。

<IfModule mime_module>
~
~
Addtype application/x-gzip .gz .tgz
# For serve .wasm
AddType application/wasm .wasm
#
#
~
~
</IfModule>

私は、AddType application/*に続くように上記のように追記しました。
追記できたら、保存を忘れずに！

これで、.wasmのサポートができるようになりました！

必要なファイルのコンテナへのインポート

次に、コンテナで用いるファイルをホストからコピーします。

# exit

ひとまず、コンテナのシェルから抜けます。

公式のreleasesから、最新のWebsite用(Self-Hosted)をダウンロードしておきます。
zipファイルです。

$ mkdir Ruffle

zipを解凍したあとの中身を入れておくためにディレクトリを作っておきます。
このディレクトリの中に先程ダウンロードしたzipファイルを入れて、

$ unzip ruffle_nightly_yyyy_mm_dd_selfhosted.zip

unzipで解凍します。そうすると、解凍された中身とzipがディレクトリの中にあるはずです。.zip以外が必要なので、zipファイルはどこか別の場所に退避しておいてください。

次に必要なのがswfファイルですが、使うswfファイルは自前で用意してください。
swfファイルが用意できているとして、作業していきます。

$ docker cp [Ruffleディレクトリのパス] [webサーバのコンテナID]:/var/www/html

docker cpでホストとコンテナ間でファイルのコピーをします。
今回は、ホストからコンテナへRuffleディレクトリごと/var/www/html以下にコピーしたいので上記のようにコマンドを実行します。
成功すれば、webページヘのRuffleのインストールができました！

$ docker cp [swfファイルのパス] [webサーバのコンテナID]:/var/www/html

同様に、swfファイルもコピーします。これで必要なファイルの用意ができました！

Flashの埋め込み

さて、コンテナに戻りましょう。

$ docker exec -it cent bash

コンテナに戻ったら、

# cd /var/www/html

/var/www/htmlに移動して

# ls
Ruffle ~.swf index.html

lsで確認すると、上記のように

Ruffleディレクトリ
swfファイル
index.html

があるはずです。

swfファイル直置きはなんか嫌なので、

# mkdir Flash
# mv [swfファイル] Ruffle/

Flashディレクトリを作ってその中にswfファイルを移動させました。
次に、index.htmlにFlashを埋め込みましょう。

# vim index.html

vimでindex.htmlを開きます。

下記の記事を参考に、index.htmlを書き換えます。

www7b.biglobe.ne.jp

<html>
        <body>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
                        codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" 
                        style="width: 1100px; height: 800px; text-align:center;" 
                        id="movie">
                    <param name="allowScriptAccess" value="sameDomain">
                    <param name="movie" value="Flash/homerun.swf">
                    <param name="base" value=" ">
                    <param name="menu" value="false">
                    <param name="quality" value="high">
                    <embed src="flash/homerun.swf" base="." menu="false" quality="high" 
                           style=" width: 1100px; height: 800px; text-align:center;" 
                           name="movie" allowscriptaccess="samedomain" 
                           type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
                     </embed>
                </object>
        </body>
</html>

自分のエディタではきれいにインデントが揃っていたのですがここに貼るとぐちゃぐちゃですね。見難くて申し訳ありません。
swfファイルのところは、Flash/[swfファイル]に適宜変更してくださいね。
これで、Flashを埋め込むことができました。

Ruffleの埋め込み

さて、もう少しです！今回は公式wikiのPolyfillの方法を使います。

<script src="Ruffle/ruffle.js"></script>

これをindex.htmlの</body>直前に埋め込むだけです。

<html>
        <body>
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
                        codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,29,0" 
                        style="width: 1100px; height: 800px; text-align:center;" 
                        id="movie">
                    <param name="allowScriptAccess" value="sameDomain">
                    <param name="movie" value="flash/homerun.swf">
                    <param name="base" value=" ">
                    <param name="menu" value="false">
                    <param name="quality" value="high">
                    <embed src="flash/homerun.swf" base="." menu="false" quality="high" 
                           style=" width: 1100px; height: 800px; text-align:center;" 
                           name="movie" allowscriptaccess="samedomain" 
                           type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
                     </embed>
                </object>
        <script src="Ruffle/ruffle.js"></script>
        </body>
</html>

こうなります。お手軽ですね。公式も、

Ruffle will automatically replace any old-style Flash embeds on websites with Ruffle players.
This is ideal for someone looking to preserve a legacy website with a minimum amount of work.
All you need to do is include the following script tag before the closing</body> tag on the desired webpage:

「最小限の作業でレガシーWebサイトを保持したい人にとって理想的」
と謳っています。
確かにこれだけでいいのなら、最小限の作業でRuffleが使えそうですね。

# systemctl restart httpd
# exit

変更を反映させるためにhttpdを再起動し、コンテナのシェルを抜けます。

Ruffleの動作確認

いよいよ動作確認をしていきます！

$ curl -i http://localhost:8080

curlで、index.htmlの中身を確認して...

ブラウザでhttp://localhost:8080にアクセスしましょう！

プニキ、動いた...！

f:id:konvat:20201219172634p:plain ちゃんとゲームをプレイできました！！！！
Ruffleは開発中なので動作しないFlashがまだまだ多いですが、
プニキはしっかり動いてくれるようです...！

長い記事になりましたが、お読みいただきありがとうございました。

わからん

わからんことをわかりたい

Rust製Flashエミュレータ"Ruffle"を使ってみる実践編