コンテンツ振分け。

ここでは、PC向けのコンテンツとモバイル版コンテンツを閲覧環境に依って振り分ける方法のうち、なるべく簡単な方法を考えて見ましょう。

尚、この他に、検索エンジン最大手・グーグル社がモバイル向けに提供しているグーグル・ワイヤレス・トランスコーダ(PC向けコンテンツの携帯端末向け変換サーヴィス)についても対策を立てると良いでしょう。

コンテンツ振分け・目次。

コンテンツ振分けの必要性。

モバイル向けのコンテンツを明確にPC兼用にしていない限りは、PC版とモバイル版のURIを別々にせざるを得ません。

更に、携帯電話向けでも、GIF画像を用いているｉモード版とPNG画像を用いるソフトバンク版との振分けも必要でしょう。

しかし、それでは不便なので、単一のURIからの振分けをしたくなるでしょう。

このためにはCGIやPHPなどのウェブプログラムが使えると良いのですが、どちらも初心者には難しいと思われます。

そこで、ここでは、HTMLの枠内で簡単な振分け方法を考えてみましょう。

以下、PC版のコンテンツトップページを「PC/index.html」、ｉモード・EZウェブ版を「i/index.html」、ソフトバンク版を「Y/index.html」と仮定して解説しましょう。

振分けを行うに当たっての注意事項。

ウェブプログラムでも100％の精度で振り分ける事は出来ません。

このため、PCなのにモバイル版が表示されたり、逆にモバイル版でPC向けコンテンツが表示されてしまう事例も予想されます。

窮極的には閲覧者の方に適切に移動願うしか無いでしょう。

具体的には、

それぞれ用意しておきます。

実際の自動振分け方法。

<meta>要素を用いてリフレッシュする。

<meta>要素では、http-equiv="refresh"属性とcontent="待ち時間;URL=リフレッシュするURI"を指定する事で、指定した別のリソースを再読込(リフレッシュ)するように出来ます。

現在では殆どのPC向けブラウザがこの機能をサポートしますが、携帯電話では今のところフルブラウザで無い限りサポートされておりません。

そこで、これをPC向けコンテンツへの振分けに利用すると言う訳です。

実際に、端末振分けページに用いる場合は以下のようになるでしょう。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
    <meta http-equiv="refresh" content="0;URL=http://○○.ne.jp/PC/index.html" />
    <meta http-equiv="content-type" content="text/html;charset=shift_jis" />
    <title>(文書の題名)</title>
    <meta http-equiv="content-style-type" content="text/css" />
    <link rel="stylesheet" type="text/css" media="handheld, tty " href="携帯電話向けCSSへのURI" />
        …
    </head>
<body>
    <h1>(サイトの題名)</h1>
    <ul>
        <li><a href="i/index.html">ｉモード/EZウェブ版</a></li>
        <li><a href="Y/index.html">ソフトバンク版</a></li>
        </ul>
    <h2>PCでご覧の方</h2>
    <p><a href="PC/index.html">PC版への入口</a></p>
    </body>
</html>

フレームを用いる(非推奨)。

携帯電話ではフレームに対応している端末は殆どありません。

一方、PC向けブラウザでは殆どが対応しております。

そこで、PC向けの表紙をフレームに組み込み、モバイル向けにはメニュー画面を<noframes>要素としてマークアップすると言う方法が考えられます。

しかしながら、この方法は現実的にも問題が多いのです。

まず、モバイル向けのフルブラウザではフレーム機能に対応しようとして、却って操作性を悪くしてしまいます。

また、EZウェブの旧世代機でも、フレームセットを各フレームへのリンクで実現しようとします。

これらの事から、余り好ましいものでは無いと思われます。

JAVAスクリプトで振分ける。

単純なやり方・JAVAスクリプトでPC版のコンテンツにリダイレクトする。

現在のところ、携帯端末ではフルブラウザで無い限りJAAVスクリプトは使えません。

しかしながら、フルブラウザではJAVAスクリプトをほぼ完璧に実装しているものもありますし、WAPブラウザでもJAVAスクリプトを実装した製品が既に開発されており、将来使えるようになる可能性は否定出来ません。

ですから、「JAVAスクリプトが使える = PC向けブラウザ」と言う発想はいささか安直過ぎると思われます。

また、PC向けの環境でも意図的にJAVAスクリプトを使えなくしている閲覧者もおり、そのような閲覧者はモバイル版を見る事になるでしょう。

高度なやり方・ユーザエージェント文字列でPCかモバイルかを判断する。

上述の通り、モバイルでもJAVAスクリプトに対応した端末が現れる可能性は否定出来ません。

このため、モバイルかどうかをJAVAスクリプトで調べて適宜振り分けるようにした方が良いでしょう。

方法としては、ユーザエージェント文字列に、

場合はPC版を、そうでなければモバイル版にリダイレクトするようにすれば良いでしょう。

簡単なスクリプト例を書いておきます。

if (navigator.userAgent.indexOf('Win')>-1 ||
    navigator.userAgent.indexOf('Mac')>-1 ||
    navigator.userAgent.indexOf('X11')>-1 ||
    navigator.userAgent.indexOf('BTRON')>-1 ||
    navigator.userAgent.indexOf('Sleipnir')>-1)
        location.href='PC向けトップページへのURI';

完全手動化。

PHPなりCGIなりのウェブプログラムを用いる事が出来なければ、下手な自動振分けを諦めて手動選択にした方が実は一番簡単で便利な方策かも知れません。

最も単純な完全手動振り分け法。

携帯電話版の表紙をトップページにして、そのページの一番下にPC向けのコンテンツ入口を設置しておくのが最も原始的な手法でしょう。

誤ってPC版へ入ってしまうこともあるので、PC版のトップページにも先頭に携帯電話版へのリンクを用意しておきましょう。

この場合、アンカーは一番上に設置しますが、PC向けのコンテンツ入口へのアンカーをPC専用のCSSで大きく目立つように表示させたり、ポジショニングを用いてページの一番上に表示させる事もできるでしょう。

具体的には以下のようになります。

まず、HTML側は以下のようにします。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html;charset=shift_jis" />
    <title>(文書の題名)</title>
    <meta http-equiv="content-style-type" content="text/css" />
    <link rel="stylesheet" type="text/css" media="handheld, tty " href="携帯電話向けCSSへのURI" />
    <link rel="stylesheet" type="text/css" media="screen, projection " href="css4PC.css" />
        …
    </head>
<body>
    <p><a href="Y/index.html">ソフトバンク版</a></p>
    <h1>(サイトの題名)</h1>
        …
        (ｉモード&EZウェブ版コンテンツ表紙の本体)
        …
    <p class="Anchor4PC"><a href="../PC/index.html">PC版入口</a></p>
    </body>
</html>

一方、CSSでも以下のような細工を行います。

        …
p.Anchor4PC {
    position: absolute;
    left: 0;
    top: 0;
        …
    }

勿論、PC向けのコンテンツ入口へのアンカー以外をPC専用のCSSでは非表示にする(display: none;プロパティを当てる)と言う方法もあります。

画像を利用した手動振り分け法。

画像中心のサイトならこの方法も便利でしょう。

ｉモード版とソフトバンク版を振り分けるには。

それぞれ利用すると言うものです。

それぞれ表示されなくなるため、表示された方のアイコンを選択する事になると言う訳です。

具体的には以下のようになります。

<h1>(サイトの題名)</h1>
<ul>
    <li><a href="i/index.html"><img alt="ｉモード/EZウェブ版" src="Entrance.GIF" /></a></li>
    <li><a href="Y/index.html"><img alt="ソフトバンク版" src="Entrance.PNG" /></a></li>
    </ul>

端末の解像度でコンテンツを撰んでもらう方法。

端末の解像度に応じて適切な画像コンテンツを振り分けたい事もあるでしょう。

最も安直な方法は、幅96ピクセル程度のJPEG画像をトップページに表示させ、それがどう見えるかで適切なコンテンツを撰んでもらおうと言うものです。

画像の左右の余白が広過ぎる。
この場合は、QVGA向けのJPEG画像を用いたコンテンツが選択される事となります。
画像の左右の余白は広くない。
この場合は、非QVGA向けのJPEG画像を用いたコンテンツが選択されます。
画像が見られない。

JPEG画像を見る事が出来なかったので、恐らくGIF画像限定の旧型ｉモード/Ｌモード端末でしょう。

そこで、非QVGA向けのGIF画像を用いたコンテンツが選択されます。

つまり、画像が小さいならAVGA向けのページに移動して下さいと言う訳です。

或いは、同様に96ピクセル程度のGIF画像をトップページに表示させて、その画像が見られるかどうか、見られれば左右の余白はどうかを判断していただくようにしてもよいでしょう。

この場合は、

それぞれ振り分ければよいでしょう。

尚、逆に非QVGA端末では入り切らない幅200ピクセル程度の画像を表示させて、入り切らなければ非QVGA向けをと言う方法も考えられそうですが、この場合は非QVGA端末の中に無理矢理縮小して画面に収める機種もあるようなので無理でしょう。

更に言えば、画像拡大機能を持つQVGA端末もあり、このような端末では画像拡大機能を用いて当該画像を見て非QVGA向けコンテンツを撰ぶ可能性はありますが、こちらの方はそれはそれで問題は無いでしょう(画像は小さい方がパケット代の節約にもなりますし)。

ページ外へのご案内。