iPhoneやiPadなど、Flashが使えない端末が増えていく中、Flashを使っているブログパーツなどはまだまだ多くあります。自分も、ブログに使ってるわけではないですが、別に運営しているサイトでブログパーツを利用しています。これではiPadなどで見ると『Flash Playerをインストールしてください』と何の解決にもならない記述が表示されてしまい、困ることがあります。
しかも、そのブログパーツの読み込みがかなり遅く、ページ全体の読み込みの遅延の原因となっています。
というわけで今回は『Flashの動かない環境ではFlashを読み込まない』『ブログパーツを非同期で読み込む』という二点を調べてみたのでそのメモ。
まずは、『Flashの動かない環境ではFlashを読み込まない』を実装。使用するのは、ヤフオクのブログパーツ。
Flashの可否なんて分かる方法なんてあるのだろうか? と思っていたのだけれども、すぐに見つかりました。
FlashPlayerがインストールされているか検出するJavaScript | Web活メモ帳
というわけで、下記のようなコードを書いて実装。
var hasFlash = false; try { var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if(fo) hasFlash = true; }catch(e){ if(navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) hasFlash = true; } if(hasFlash){ document.write('<script type="text/javascript" src="http://i.yimg.jp/images/auct/blogparts/auc_bp.js?s=1&cl=4&qu=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E&cid=0&di=0&od=0&ti=&pt=0&dotyid=aucb%2Fp%2FS.NHFzoYXd4umTTGbtBh3AA-&sid=2219441&pid=878398084"><\/script>'); }
以下、実行結果。
試しに、Adobe Flash Player を有効または無効にするを参考に無効にしたうえでページを開くと『Adobe Flash Playerは、Adobe Flash Playerインストールガイド(Yahoo!ダウンロードセンター)から無料で入手できます。』といった記述はされず、空白のままでした。
続いて非同期化の話。
普通にページの最後にscriptタグをいれ、その中でinnerHTMLなどをやって入れればいいのではないかと思われるかもしれませんが、残念ながらそう簡単にはいきません。それをやると、何も表示されないかページが真っ白になるかのどちらかだと思います。
というわけでこれも調べてみました。
document.writeを使った遅いブログパーツ(例えばzenback)を非同期化してサイトを高速表示する方法 | ゆっくりと…
上記のページが参考になりそうです。いろいろ書いてありますが、今回は1番の『iframeへの動的挿入』という方法を使うことに。
記述したJavaScriptは以下のような感じ(jQuery利用)。Flashの可否も判定。
$(function(){ var hasFlash = false; try { var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash'); if(fo) hasFlash = true; }catch(e){ if(navigator.mimeTypes ["application/x-shockwave-flash"] != undefined) hasFlash = true; } if(hasFlash){ $iframe = $('<iframe/>'); $('#blogpart').append($iframe); var doc = $iframe[0].contentWindow.document; doc.open(); doc.write('<body><script type="text/javascript" src="http://i.yimg.jp/images/auct/blogparts/auc_bp.js?s=1&cl=4&qu=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E&cid=0&di=0&od=0&ti=&pt=0&dotyid=aucb%2Fp%2FS.NHFzoYXd4umTTGbtBh3AA-&sid=2219441&pid=878398084"><\/script></body>'); doc.close(); $iframe.css({ padding:"0", margin:"0", width:"180px", height:"420px", border:"none" }); } });
以下、実行結果。
動いたっぽいです。参考したページではIEでは動かないと書いてありましたが、少なくともIE11では動きました(ただ、ドキュメントモードを5に変えても動くという・・・)。
コメント