iPhone Flush 未対応対策 代替画像表示

2010/12/22
★★

iPhone は、素晴らしい製品だ。人々のライフスタイルを変えつつある。

自身、これまでは、iPhone は、コンシューマ向けの製品であり、ビジネス用途には不向きと考えていたが、ユーザービリティが高いインターフェースは、充分にエンタープライズにも対応可能なソリューションになりえると考えている。

ビジネス用途には、さほど関係ないが、コンシューマーとして見たときに、iPhone が Flush をサポートしていないことが、やはり、残寝な気がする。

Web サイトによっては、全面に Flush 用いているため、iPhone で閲覧したときに、トップページからどこへも遷移できないこともある。

そこで、簡単な iPhone 対策として、PC ブラウザで閲覧したときには、Flush を表示し、iPhone でページを閲覧した時には、代替の画像を表示させる簡単な JavaScript サンプルを紹介する。

<!-- Flush の定義。JavaScript で非表示にするため、object の id 属性を必ず定義すること。 -->
<object id="flushImage" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="200">
    <param name="movie" value="./flushImage.swf" />
</object>

<!-- 代替画像のスクリプト。 -->
<script type="text/javascript">
    if (navigator.userAgent.toLowerCase().indexOf('iphone') > 0) {
        //Flush オブジェクトを id で参照し、非表示にする。
        flushImage.style.display = "none"; 
        //画像タグをレンダリングし、代替画像 "flushImage.jpg" を表示させる。
        document.write('<img with=\"650\" height=\"210\" src=\"./flushImage.jpg\" />');
    }
</script>

iPhone が Flush に対応するのは時間の問題と思うが、サイト管理者は、このような方法で、Flush 対応までの間をしのぐとしよう。