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が動いている感じ。

そのため、中のFlashと外のJavaScriptのやり取りができず「このページのURL分からん! 許可していないURLか?! そうだ、きっとそうに違いない!!」と判断してしまうようになった、というわけです。

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

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

しかしこのオプションを有効にしても、残念ながら「うちのこ」でやっている処理には対応していません。できることには制限があるようです。

我々人間で例えるなら「部屋に入っていいとは言ったけど、クローゼットの中を見ていいとは言ってないよね?!」みたいな感じです。

ただ、逆に言えば許可されていることはできるわけです。

そこで試しに「うちのこ」の問題の処理の部分を、許可されている処理で代用してみたら……

無事に動きました!

「うちのこ」をRuffleで動くようにする方法

さて、ここからはいよいよ「うちのこ」をRuffleで動くようにする方法を紹介していきます。

途中途中で解説を挟んでいますが、修正する場所さえ把握できればOKです。

Flash側:uchinoko.as の修正

まずはuchinoko.asの修正部分をお伝えします。主に2ヶ所あります。

22~23行目あたり

pSWF.c_complete という設定項目があります。

この値が 1(ON)になっている場合は 0(OFF)に変更してください。

pSWF.c_complete はURLのチェック作業でページの読み込みが中断してしまう問題を避けるために、ページの読み込みが完全に終わるまで処理を中断するかどうかの設定項目でした。

しかしRuffleはページの読み込みが終わったタイミングでFlashを読み込む仕様になっているため、そもそも設定項目自体が意味を成さないものになっています。

1(ON)の場合、(ページの読み込みが終わったからFlashが読み込まれたというのに)ページの読み込み完了をFlash側に伝える(しかもその処理はRuffleでは対応していないので対応するように修正する)必要があり、非常に回りくどいことになってしまいます。

188~191行目あたり

2ヶ所目は188~191行目(わりと終盤)辺りのこの部分。

pSWF.temp = "javascript:void(window.document."+objID+
".SetVariable('_root.urlcheck',document.URL))";
getURL(temp);

これは、今開いているページの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版)のファイル・読み込むJavaScript・ページに読み込むタグを追記します。

<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>

pass/to/ruffle.jsやpass/to/flash.swfのパスとファイル名、Flashを起きたい場所のid名、Flashの画面サイズなどは適宜変更してください。

追記する場所は、</body>(bodyの閉じタグ)の直前に追記するのが望ましいです。

既存の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します。

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