技術デモ

オープンソースで公開されているruffle(ソースコード:https://github.com/ruffle-rs/ruffle)を使ってフラッシュ(swf)ファイルが再生できるかを確認

「わんだら」さんのDSDS Windows版DiscStation手描き動画より

「わんだら」さんの「ダークウィッチモーション」/コメットサマナーより

「わんだら」さんの「オプモン☆ステージ」/オプションモンスターより(2023/09/14時点ではうまく動かない?)

「わんだら」さんの「みにまむカー君」/魔導物語より

「わんだら」さんの音楽より

Wander wonder ひとときの休息

　　　
Wander wonder 冒険オルゴール風

　　　
戦え!!北出マンOP

　　　
Jump HERO 外伝3 OP

　　　
のーコネハートランドBGM org

　　　
あっぷるそーすぼくらの無人島OP org

使い方

(1) Webサーバの設定を変更します

最大の難関設定です。これをできる権限がない、もしくはすでに設定されている環境でない場合は、使うことができません。

Apache/nginxなどのWebサーバに対してMIMEタイプ「application/wasm」拡張子「.wasm」を登録する設定変更を行います。

Apacheの場合、/etc/httpd/conf.d/適切なファイル名.conf に「AddType application/wasm .wasm」を追加します。

このテスト環境の場合は下記のような形で設定しています。

<VirtualHost *:443>
  SSLEngine on
  DocumentRoot /～/comclub/web/
  ServerName comclub.websa.jp

  <IfModule mime_module>
    AddType application/wasm .wasm
  </IfModule>
</VirtualHost>

<Directory "/～/comclub/web/">
        AllowOverride All
        Options FollowSymLinks
        Require all granted
</Directory>

(2) ruffleのWebsite Self Hostedのzipファイルを入手

ruffleのReleasesページの「Version:Website」のところにある「Self Hosted」のzipファイルをダウンロードする。

2020/12/26時点ではruffle_nightly_2020_12_26_selfhosted.zip というファイル名でした。

(3) zipファイルのなかから必要なファイルを３つ取り出してswfがあるディレクトリに置く

ruffle_nightly_2020_12_26_selfhosted.zip には以下のファイルが入っていました。

Archive:  ruffle_nightly_2020_12_26_selfhosted.zip
  Length      Date    Time    Name
---------  ---------- -----   ----
    35453  12-26-2020 09:40   core.ruffle.0209bbc2d84b1cf4bfff.js
   265682  12-26-2020 09:40   ruffle.js.map
   102153  12-26-2020 09:40   core.ruffle.0209bbc2d84b1cf4bfff.js.map
  3984450  12-26-2020 09:40   3879385cefe79eb75909.module.wasm
     1073  12-26-2020 09:40   LICENSE_MIT
     2228  12-26-2020 09:40   README.md
    67208  12-26-2020 09:40   ruffle.js
     9723  12-26-2020 09:40   LICENSE_APACHE
---------                     -------
  4467970                     8 files

この中で必要なのは「ruffle.js」「core.ruffle.0209bbc2d84b1cf4bfff.js」「3879385cefe79eb75909.module.wasm」の３つです。

(4) 既存のswfファイル読み込み記述の次の行にruffle読み込み記述追加

今まで通りのswfファイル読み込み記述の次の行に、ruffleで再生するための記述を追加します。

<embed src="dsds_fla.swf" width="500" height="350" bgcolor="#fafefd" quality="high" type="application/x-shockwave-flash">
<script src="./ruffle.js"></script>

こんな感じでOKです。

１つのページに複数のswfファイルがある場合は、全体で１個のruffle.js追加で大丈夫でした。

OSAKANA TARO