令和の時代に 3分間Networking の Flash を再生させる

この記事は、  [swf2js](https://github.com/swf2js/swf2js) の力を借りて **モダンブラウザで Flash を再生させる** 方法について記載している。  
全ての Flash が再生できるとは言わないが、古い Flash を使っているサイトを中心に、 タイトルに反して **3分間ネットワーク講座 以外** のサイトでも通用するぞ。

---

我々インターネッツ老人会のメンバーなら、きっとお世話になっただろうサイトの一つに、 [3分間Networking](http://www5e.biglobe.ne.jp/aji/3min/) がある。

サイト自体はもう 20年 近く前のものではあるが、 ネットワークの基礎的な部分は今もほとんど変わっておらず、 この令和の時代であってもなお、ネットワークをイチから学ぶ上で有力な選択肢の一つだろう。

そう、 **Flash でなければ。**

## 3分間Networking を読ませたい人生だった

会社の同僚でネットワークを学んでもらう機会があった。
どうやって勉強してもらうか考えたときに、まず思いついたのが、 3分間Networking を読んでもらうことだった。
自分も以前読んでいて、わかりやすかった記憶があったので。

この 3分間Networking というサイトの特徴として、 Flash アニメーションによる説明のわかりやすさが挙げられる。

しかし言わずもがな、 **Flash は 2020年いっぱいで終了**している。

Flash のない 3分間Networking なんて、フィルムのないカメラのようなものだ。
この資産がインターネットから失われてしまうのは、あまりに勿体ない。。。

## モダンブラウザでいにしえの Flash を手軽に再生させたい

Flash で思い出したのが、昨年末の以下の Advent Calendar。

[Flash Advent Calendar 2020](https://qiita.com/advent-calendar/2020/flash)

ここで取り上げられていた [swf2js](https://github.com/swf2js/swf2js) を使えば、 3分間Networking で使われている Flash 程度であれば、バッチリ再生できるのではないかと考えた。

問題は、どうやってこのスクリプトをサイトに仕込ませるか、だ。

最初はブラウザ拡張機能での実装も考えたが、審査やリリースなどが億劫だ。
そこで、 **User Script** を使うことにした。

ブラウザに Greasemonkey や Tampermonkey 拡張機能を入れてもらい、 [Greasy Fork で公開した](https://greasyfork.org/ja/scripts/419842-swf2js-auto-apply-script-flash-to-html5) スクリプトを入れてもらうやり方を採用した。

使い方は以下の通り。

1. [Greasy Fork](https://greasyfork.org/ja) サイトの手順に従って、お使いのブラウザーにあった拡張機能をインストール
1. [swf2js 自動適用スクリプト (Flash to HTML5)](https://greasyfork.org/ja/scripts/419842-swf2js-auto-apply-script-flash-to-html5) ユーザースクリプトをインストール
1. Flash が埋め込まれているページを開く

![3min-networking-flash.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308278/e00e61da-b919-aae4-50e3-4b4b1495e581.gif)


期待通りバッチリ動作している。

残念ながら音声の一部は再生できないものの、昨年末に [Flash Back Memories](https://www.suntory.co.jp/softdrink/craftboss/flash/) で皆涙した [ゴノレゴ](http://www.poeyama.com/gonorego/files/file01.html) すらも再生できるぞ。

![gonorego01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308278/ee1dbbfc-b6c7-7d01-edc6-64a33245565a.gif)

## User Script の動作の仕組み

Greasy Fork では、ダウンロード前に自分でスクリプトを確認できるので、そのソースコードを見てもらえばあまり他に言うことはない。

簡単に説明すると、以下のような仕組みとなっている。

1. ページを開く度に、 Flash が埋め込まれていそうな embed 要素または object 要素を探す
1. (1) で Flash の swf が 1つ 以上見つかった場合は、 swf2js が読み込まれているか確認し、 読み込まれていなければ ~~[GitCDN](http://www.gitcdn.link/)~~ [^1] [jsDelivr](https://www.jsdelivr.com/) から swf2js を読み込んで読み込む
1. swf2js の読み込みが完了したら、 (1) で見つかったそれぞれの要素に対して、 HTML5 canvas 動画への変換を行う。

既定では全てのサイトでこの User Script が動作するように設定されている。
実際使う際には、 Greasemonkey 等の実行ホスト側の設定で、 User Script が動作するサイトを制限しておく (`@include` で実行サイトを指定する) のが望ましいだろう。

変換ができる Flash は、 [swf2js](https://github.com/swf2js/swf2js) に依存するので、そちらのページを参照して欲しい。
例えば、 ActionScript 3.0 や MP4 Video には対応していない。

## おわりに

この User Script を Greasy Fork 公開して以降、同時期に公開された他の Script と比べると、それなりにダウンロード数・アクティブユーザ数が多い。
需要があったのだ。

前述の Advent Calendar の中で、注目度が低かったと作者が吐露する記事がある。

[Flash Advent Calendar 18日目 - OSSを諦めて、有償化に踏み切った話](https://qiita.com/ienaga/items/fba29d742e3ea62812a0)

> `swf2js`は2013年から7年間OSSとして地道に活動していたのですが 
> 注目度も低く、継続してメンテナンスを行うが苦しい状態だったので
> 2019年に自分の所属する会社(ソニックムーブ)と共同で開発する事で有償化に踏み切りました。
> 
> 最後までOSSとして開発を行いたかったのですが
> `swf2js`は誰からも必要とされないライブラリ。っという状況だったので
> 会社で認めてもらった時はとても嬉しかったです。

思うに、 OSS 版然り、 Production Version 然り、スクリプトを利用する対象を **サイト運営者側** しか見ていなかったことが原因ではないかと感じた。

Flash 離れが進む中で サイトのリソースをずっと Flash のままとしている以上、サイト運営者側にわざわざ Script を仕込むような変更を加えるモチベーションがあるとは思えない。

せっかくユーザー側のリソースで Flash の資産を活用できるのだから、 User Script なりブラウザの拡張機能なり、 ユーザー側で利用できるようにしていれば、 もう少し注目度が高まって、貢献してくれる人も増えていたかもしれない、感じている。
モバイルブラウザ向けに提供できる何らかの手段があれば、なお良かっただろう。

実際のところ、複数の商用ゲームなどで採用されているなど、商用版のほうも上手くいっていないわけではなさそうだし、 Production Version のようなビジネス展開を考えると、どっちのほうがよかったかは難しいところではあるが…

まぁ、結果論でしかないけどね。

……

ちなみに、 Android版 Firefox であれば、任意のアドオンを入れらなくもないので、 スマホで Flash を見れたあの時代に戻ることもできる。
→ [Android版 Firefox (Fenix) で、任意のアドオンを使えるようにする | Aqua Ware つぶやきブログ](https://aquasoftware.net/blog/?p=1536)

あ、 **iPhone は当然ムリ**です。

[^1]: Heroku の無償プラン廃止の影響なのか、 いつの間にか [GitCDN](http://www.gitcdn.link/) がダウンしていたので、 [jsDelivr](https://www.jsdelivr.com/) に切り替えた