Rust製Flashエミュレータ"Ruffle"を使ってみる 実践編
前回↓の続きです。
前回までに、仮想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を書き換えます。
<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にアクセスしましょう！
プニキ、動いた...！
ちゃんとゲームをプレイできました！！！！
Ruffleは開発中なので動作しないFlashがまだまだ多いですが、
プニキはしっかり動いてくれるようです...！
長い記事になりましたが、お読みいただきありがとうございました。
Rust製Flashエミュレータ"Ruffle"を使ってみる 準備編
この記事は、IPFactory Advent Calender 2020の18日目の記事です。
IPFactoryについては、こちらをご覧ください。
Flash、今月末にサポート終了...！
私は小学生の頃、週1くらいでおもしろFlash倉庫を漁ったり、
くまのプーさんのホームランダービー!(2020/12/16に配信終了)や Happy Wheelsをプレイしたりしていたのですが...それらが動作するために必要なAdobe Flash Playerが2020/12/31をもってサポートが終了。ネット上にある様々なFlashを使ったアプリケーションが動作しなくなってしまいます...
Ruffle とは
詳しくは公式サイトを参照してください。
Rustで書かれたFlashエミュレータで、現在開発中のオープンソースプロジェクトです。
使い方
Ruffleの使い方は、3つあるようです。
- ブラウザ(Firefox,Chrome/Edge/Safari)に拡張機能としてインストールする
- デスクトップにインストールして、ローカルにある
.swfファイルを実行する - webサーバ上にRuffleを設置する
1は手軽ですね。2も手元に.swfファイルさえあればコマンドを叩くだけです。3はサイトを利用する側にとってわざわざ拡張機能など入れなくても動作するので一番楽ですね。
しかし、私の検索力が足りないからかわかりませんが具体的な動作させる説明や記事が
公式wikiしか見当たらなかったので、今回記事にしようと思いました。
とりあえず自分の手元だけでもdockerを用いて仮想webサーバを建て、
そこで動作確認ができたらいいなと思い取り組んでみました。
環境、使用ファイル
Thinkpad X1 Carbon(7th Gen)
CPU:core i7 10710U
RAM:16GB
ホストOS:Ubuntu 20.04 LTS
$ docker --version Docker version 20.10.1, build 831ebea
コンテナのcentosバージョン
[root@d31e5b458e07 /]# cat /etc/os-release NAME="CentOS Linux" VERSION="8" ID="centos" ID_LIKE="rhel fedora" VERSION_ID="8" PLATFORM_ID="platform:el8" PRETTY_NAME="CentOS Linux 8" ANSI_COLOR="0;31" CPE_NAME="cpe:/o:centos:centos:8" HOME_URL="https://centos.org/" BUG_REPORT_URL="https://bugs.centos.org/" CENTOS_MANTISBT_PROJECT="CentOS-8" CENTOS_MANTISBT_PROJECT_VERSION="8"
コンテナイメージはdocker-hubにあるcentosリポジトリから
centos8のイメージを取得します
Ruffleのバージョン:Nightly 2020-12-15
準備
まず、 qiita.com
この2つの記事をを参考に、仮想webサーバの構築、動作確認をする。
$ docker pull centos:centos8
docker pullでイメージを取得します。
$ docker run --detach --name cent --privileged --publish=8080:80 centos:centos8 /sbin/init
docker runでコンテナの作成、起動をします。
$ docker exec -it cent bash
docker exec コンテナ名でコンテナのcentOSにログインします。
# dnf install -y vim httpd httpd-tools httpd-devel httpd-manual
dnfを使い必要なパッケージをインストールします。
# systemctl enable httpd
systemctl enableでhttpdを有効化します。
# systemctl is-enabled httpd
enabledと表示されれば、ちゃんと有効になっています。
# systemctl start httpd
systemctl startでhttpdのサービスを起動します。
# vim /var/www/html/index.html
ドキュメントルートである/var/www/html以下にindex.htmlを作成、編集します。
このhtmlファイルはアクセスして一番最初に表示されるページになります。
ソースは、とりあえずで良いので
<html>
<body>
Hello,World!
</body>
</html>
としましょう。これを保存したら
# curl -i http://localhost/
curl -iでApache HTTP Serverがhtmlファイルを出力してくれるのを確認します。
# systemctl restart httpd
systemctl restartでサービスを再起動し、変更を反映させます。
# exit
exitで、コンテナ内のシェルから一旦抜けます。
$ curl -i http://localhost:8080/
先ほどと同じようにindex.htmlの中身が出力されていれば大丈夫です。
今回は参考にした記事の通りに、コンテナの80番ポートをホスト側の8080番ポートに
割り当てています。なので、ホストの8080番ポートにアクセスすると
コンテナの80番ポートに繋がり、仮想サーバにアクセスできるわけです。
ホスト側のブラウザからhttp://localhost:8080/にアクセスして、
ページにHello,World!と表示されれば準備は完了です！
