本記事では、転載防止スクリプト「うちのこ」が搭載されているFlash(swfファイル)をRuffleで再生できない(無断転載・直リンクと判定されてしまう)問題の原因と、その解説法について解説しています。
目次
なぜ「うちのこ」はRuffleで動かないのか?
動かない理由は単純明快、Ruffleの仕様だからです!
これだけで終わらせちゃうのも味気ないので
- 「うちのこ」がどのように動いていたのか?
- なぜRuffleでは動かなくなってしまったのか?
- どうすれば解決できるのか?
少し詳しめに解説していきます。
ざっくり解説:「うちのこ」の処理の流れ
「うちのこ」の処理の流れ(肝の部分だけ)をざっくりまとめるとこんな感じです。
許可していないURLならFlashの再生をロック。
問題がなければ Step 2 へ。
読み込み完了時にFlashに読み込み完了を知らせるJavaScriptが実行される。
Flashがそれを受け取る or 一定時間経過(タイムアウト)すると Step 3 へ
Flash側で今開いているWebページのURLを返すJavaScriptを実行して、ページのURLをチェックする。
許可していないURLならFlashの再生をロックする。
問題がなければ処理を終了する。
赤色で示したのはFlashとJavaScript(ページ側の処理)で値のやり取りをしている部分で、これまでのFlashPlayerではもちろん問題なく動作していました。
一方、Ruffleでは……
しかしRuffleは、ページ本体とは切り離された(カプセル化された)環境で実行する仕様に変わりました。
そのため、これまで通りのFlashとWebページ間でJavaScriptを介した値のやり取りができなくなりました。
ページのURLが取得できない→許可されたURLではないと判断されるようになったというわけです。
どうすれば解決できるのか?
実はRuffleには「JavaScriptを介してFlashとページ間でやり取りできるようにする」という、まさにドンピシャな設定項目(オプション)があります。
しかし、このオプションは「うちのこ」でやっている処理は対応していません。
そこで「うちのこ」の処理をRuffleでも動くようにアレンジしてみたら……

問題は見つかりませんでした
正常に動くようになりました!!
「うちのこ」をRuffleで動くようにする方法
さて、ここからはいよいよ「うちのこ」をRuffleで動くようにする方法を紹介していきます。
Flash側:uchinoko.as の修正
まずはuchinoko.asの修正部分をお伝えします。主に2ヶ所あります。
22~23行目あたり
pSWF.c_complete
という設定項目があります。
この値が 1
(ON)になっている場合は 0
(OFF)に変更してください。
本来、pSWF.c_complete
はURLのチェック作業のせいでページの読み込みが中断してしまう問題を避けるために、ページの読み込みが完全に終わるまでFlash側の処理を中断するかどうかの設定項目でした。
Ruffleの場合ページの読み込みが終わったタイミングでFlashを読み込む仕様になっているため、わざわざFlash側でページの読み込みが終わるのを待つ必要はありません。
188~191行目あたり
2ヶ所目は188~191行目(わりと終盤)辺りのこの部分。
pSWF.temp = "javascript:void(window.document."+objID+
".SetVariable('_root.urlcheck',document.URL))";
getURL(temp);
これは、Flashを再生しているページのURLを取得するJavaScriptを実行してFlash側の変数 _root.urlcheck
に代入するという処理ですが、Ruffleでは動作しません。
動かない犯人はコイツです!
この部分を以下に修正してください。
getURL("javascript:var uchinokoCheckURL=function(){return document.URL;};");
_root.urlcheck = flash.external.ExternalInterface.call("uchinokoCheckURL");
getURL("javascript:uchinokoCheckURL=null;");
やっていること自体はほとんど同じですが、こちらはRuffleで正常に動作する処理になっています。
(正直あまりエレガントな処理ではないので、もう少し良い対処法があればぜひ教えてください……)
以上で uchinoko.as の基本的な変更点は終わりです。

私の場合、ついでにサイトのSSL化もしたかったので再生許可アドレス(15行目)に https:// で始まるURLを追加しました。
あとはuchinoko.asを保存後、swfファイルを書き出ししなおしてください。
なお、「もうプロジェクトファイルがないから「うちのこ」を編集できない!」という場合の対処法については、また改めて解説していこうと思います。
ページ側:HTMLの修正
ここからはFlashを載せているページの修正作業です。修正する部分は主に3ヶ所くらいです。
<body>タグのonLoad属性の削除
<body>タグのonLoad属性に書いていた「うちのこ」を削除しましょう。
<body onLoad="window.document.uchinoko.SetVariable('_root.complete','OK');">
修正後はこのようになります。
<body>
RuffleとFlashの読み込みを追記
Ruffle(selfhosted版)のプログラムとFlashを読み込む処理を追記します。
<script src="pass/to/ruffle.js"></script>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("flash_area"); // Flashを置くエリアのid名
container.appendChild(player);
player.load({
url: "pass/to/flash.swf", // Flashファイルの場所
backgroundColor: "#000000" // Flashの背景色(16進数コード)
allowScriptAccess: true, // 【重要】Flashとページ間のやり取りを有効化
});
player.style.width = "320px"; // Flashの横幅サイズ
player.style.height = "320px"; // Flashの縦幅サイズ
});
</script>
重要なのは、12行目の allowScriptAccess: true
。これがないとせっかく書き直したuchinoko.asの処理が実行されません!
パス名とファイル名(pass/to/ruffle.jsやpass/to/flash.swf)、Flashを起きたい場所のid名、Flashの画面サイズなどは適宜変更してください。
既存のFlashタグ→空のdivに書き換え
最後は既存のFlashタグを空のdivタグに書き換えます。
Flashのタグはこんな感じのやつです。
<object data="pass/to/flash.swf" id="uchinoko" width="320" height="320" type="application/x-shockwave-flash">
<param name="bgcolor" value="#000000">
<param name="movie" value="pass/to/flash.swf">
<embed name="uchinoko" src="pass/to/flash.swf" width="320" height="320" type="application/x-shockwave-flash">
</object>
これを空のdivタグに書き換えてください。(この中にRuffleのプレイヤーが入ります。)
<div id="flash_area"></div>
※id名(例では"flash_area"
)は、先ほどの「RuffleとFlashの読み込みを追記」の7行目で指定したものと同じにしてください。
以上でページの修正は終わりです。お疲れさまでした!
終わりに
まさか無断転載の魔の手から救ってくれた「うちのこ」に無断転載扱いされてしまう日が来るとは、思ってもみなかったですね…。
プロジェクトファイルが無い場合の対処法は、後日UPします。
最後まで読んでくださり、ありがとうございました!