コンテンツ振分け。

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

実際にはCGIなどのウェブプログラムを用いるのが一番確実な方法ですが、それが出来ない方向けのものです。
ただ、最終的には手動での選択を利用するのが一番確実と言えるかも知れません。

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

この件については、参考資料として別文書・グーグル・ワイヤレス・トランスコーダについてにて解説いたしました。

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

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

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

EZウェブはどちらも表示可能です。
画像を一切用いないか、画像を見せるのが目的で無いのであれば、モバイル版のコンテンツを統一できます。

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

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

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

PCと携帯電話の振分けは不完全ではあるものの自動的に振分けることが可能です。しかしながら、携帯電話版の振分けはウェブプログラムを用いないと自動的には出来ません。そこで、手動振分けとなります。

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

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

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

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

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

具体的には、

PC版のトップページの一番上にはモバイル版のトップページへのリンクとなるアンカーを
モバイル版のトップページの一番下にはPC版のトップページへのリンクとなるアンカーを

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

PC版では一番上、モバイル版では一番下にアンカーを設置するのは、携帯端末では一番下までスクロールさせる事が困難だからです。

実際の自動振分け方法。

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

待ち時間を「0」にすれば、自動的にリフレッシュ先のURIへ転送されたように感じるでしょう。
この機能はHTTPで予めサーヴァが送り出す事も出来ますが、そのための設定が出来ない環境で用いられるものです。

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

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

実際のコンテンツは、携帯電話向けのトップページとなります。
本当は<meta>要素によるリフレッシュは好ましいものではありません。表示されたページを勝手に更新されてしまうので、閲覧者に不満を与える事もあるからです。
フルブラウザの場合、一部ブラウザを除いて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スクリプトを実装した製品が既に開発されており、将来使えるようになる可能性は否定出来ません。

例として、オープンウェーヴ社の『ＵＰ(ユーピー)ブラウザ 7.0』がJAVAスクリプトに対応しております。EZウェブで全端末がＵＰブラウザを実装しているものの(旧世代機は 3.1～3.2、現行機は 6.0～6.2)、7.xは旧世代機の標準記述言語・HDMLに対応していないため、EZウェブでのＵＰブラウザ 7.xの採用はまだ無いと思われますが、ソフトバンク端末では既に一部で採用されております。

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

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

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

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

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

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

Win, Mac, X11またはBTRONが含まれているか
SleipnirなどのPC向けブラウザ名が含まれている

場合は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では縦スクロールは大した労力では無いからです。
機種選択が必要な場合は、取敢えずｉモード・EZウェブ版を表示させて、ソフトバンクの方には冒頭にリンクを設けてそこから移動してもらえばいいでしょう。

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

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

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

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

ここではｉモード・EZウェブ版のコンテンツとします。

読み飛ばす

<?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でも以下のような細工を行います。

この場合、上記のHTMLでは「css4PC.css」となります。

読み飛ばす

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

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

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

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

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

ｉモード版へのアイコンとしてGIF画像で作ったアイコンを
ソフトバンク版へのアイコンとしてはPNG画像で作ったアイコンを

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

ｉモード端末なら、ソフトバンク版向けのPNG画像アイコンが
ソフトバンク端末なら、ｉモード版向けのGIF画像アイコンが

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

EZウェブの場合はどちらも表示されるので、どちらか好きなほうを選択する事になりますが、特に問題は無いでしょう。

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

読み飛ばす

<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画像を用いたコンテンツが選択されます。

PNG画像限定のソフトバンクの初期機種は殆ど残っていないので、対応しなくても問題は無さそうです。どうしても心配なら一部のコンテンツでPNG画像版を表示するリンクを「ソフトバンク用」として設けておけばいいでしょう。

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

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

この場合は、

画像が見られなければPNG画像利用のソフトバンク版へ。
画像の左右の余白が広過ぎるならGIF大判画像利用のQVGA向けへ。
画像の左右の余白がそれ程無ければGIF小判画像利用の非QVGA向けへ。

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

尚、PNG画像利用のソフトバンク向けコンテンツも当然QVGA向けか非QVGA向けかで異なってきますが、これもやはり96ピクセル程度のPNG画像を表示して余白がどう見えるかで撰んでもらえば良いでしょう。
但し、ソフトバンク向けは余力が無ければ非QVGA版だけにしても良いかも知れません(非パケット機のQVGA端末では大判画像だ容量オーヴァを来たす事があるからです)。

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

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

しらぎくのウェブサイト作成入門サイトマップ