Ruffleで「うちのこ」搭載のFlashが再生できない問題・解決法

本記事では、転載防止スクリプト「うちのこ」が搭載されているFlash(swfファイル)をRuffleで再生できない(無断転載・直リンクと判定されてしまう)問題の原因と、その解説法について解説しています。

なぜ「うちのこ」はRuffleで動かないのか?

動かない理由は単純明快、Ruffleの仕様だからです!

これだけで終わらせちゃうのも味気ないので

  • 「うちのこ」がどのように動いていたのか?
  • なぜRuffleでは動かなくなってしまったのか?
  • どうすれば解決できるのか?

少し詳しめに解説していきます。

ざっくり解説:「うちのこ」の処理の流れ

「うちのこ」の処理の流れ(肝の部分だけ)をざっくりまとめるとこんな感じです。

Step 1
【無断転載判定】Flashのファイルが格納されている場所のURLをチェック

許可していないURLならFlashの再生をロック。

問題がなければ Step 2 へ。

Step 2
ページの読み込み完了を待つ(設定によっては待たずにStep 3へ)

読み込み完了時にFlashに読み込み完了を知らせるJavaScriptが実行される。

Flashがそれを受け取る or 一定時間経過(タイムアウト)すると Step 3 へ

Step 3
【直リンク判定】今開いているページのURLをチェック

Flash側で今開いているWebページのURLを返すJavaScriptを実行して、ページのURLをチェックする。

許可していないURLならFlashの再生をロックする。

問題がなければ処理を終了する。

赤色で示したのはFlashとJavaScript(ページ側の処理)で値のやり取りをしている部分で、これまでのFlashPlayerではもちろん問題なく動作していました。

一方、Ruffleでは……

しかしRuffleは、ページ本体とは切り離された(カプセル化された)環境で実行する仕様に変わりました。

そのため、これまで通りのFlashとWebページ間でJavaScriptを介した値のやり取りができなくなりました。

ページのURLが取得できない→許可されたURLではないと判断されるようになったというわけです。

どうすれば解決できるのか?

実はRuffleには「JavaScriptを介してFlashとページ間でやり取りできるようにする」という、まさにドンピシャな設定項目(オプション)があります。

しかし、このオプションは「うちのこ」でやっている処理は対応していません。

そこで「うちのこ」の処理をRuffleでも動くようにアレンジしてみたら……

problem was not found.
問題は見つかりませんでした

正常に動くようになりました!!

「うちのこ」を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します。

最後まで読んでくださり、ありがとうございました!