スマホサイトは、PCコンテンツと連動しよう

Webサイトは、基本的にはスマホでもPCでも同じ情報を得られた方がよいでしょう。PCデザインのままピンチイン＆アウトしながらスマホで見ている時は実現していましたが、スマホUIを追究しようとすれば、別にサイトを構築しなくてはなりません。それも同じだけの分量のアプリケーションを開発し、コンテンツ運用を両方同時に行っていかなければなりません。

それは局所的には可能であっても現実的には困難なケースが多いため、レスポンシブWebデザインという手法が出現し普及し始めています。レスポンシブWebデザインでは、同じソース上のコンテンツを出力するので、連動性は極めて高い方法です。一方で、コンテンツの量や順序はほぼ同じとなり、デザインは各デバイス間で似通ったものとなります。この為、スマホではコンテンツの量や順序を調整し、デザインも更にUIを追究する場合には向いていません。また、１つ故に通常のPCサイトを後からレスポンシブWebデザインに変えることはとても困難です。

PCとコンテンツは連動して運用負荷を抑えたスマートなスマホ対応をしたい。かつ、スマホUIには凝りたい。さらに既存のPCサイトはそのまま活かしたい。といった要望を同時に叶えるのがPCスマホ変換なのです。では、PCスマホ変換は、どうやってPCコンテンツとの連動を実現しているのでしょうか。以下で見ていきたいと思います。

PCスマホ変換では、元のコンテンツの位置情報を指定し、その場所のコンテンツ断片に対して変換指示を実行することで、コンテンツの変換を実現しています。よって：

・　どのようにコンテンツ位置を指定するか？
・　どのようにコンテンツ断片を解析するか？

という2点が重要な技術となってきます。元のコンテンツは常に一定ではなく、そのデータや構造に変化があります。位置や断片のどこまでの変化に対応できるかが、連動性の1つの指標なります。

コンテンツはツリー構造をしているので、位置には次のようなものがあります。

・　完全なタグ構造によってHTMLツリー構造で一意に特定できるもの
・　Idとして、ツリー構造上の位置に関わらず一意に特定できるもの
・　Classやタグとして、複数個の対象を指すもの
・　上記の組み合わせによるもの

変換したいコンテンツの位置特性によって、様々な指定ができます。スマホで不要な項目は、無指定によって無視されるか、削除などによって意図的に消すことができます。

コンテンツ断片は実際に変換されるデータが含まれています。データを解析・抽出してスマホUI用の構造に作り替えるプログラムが存在します。ツリー断片はある程度変化することを前提にプログラムは動作する必要があります。変化には例えば次のような例があります。

・　テキストノード中に < b > や < span > など新たな構造が追加される
・　リストの数が増減する。時には０になる
・　テーブルの行列数が変わる
・　画像の大きさや数が変化する

PCスマホ変換では、レスポンシブWebデザインのようにブラウザのレンダリング任せではなく、意図的な変換が可能です。例えば次のようなものです。

・　テーブル→縦横変換やリスト形式に変換
・　画像→（altテキスト＋背景色）のフローレイアウトに変換
・　長いテキスト→小さな領域に収まるiframe
・　TOPメニュー→下部にもメニュー追加
・　広告の削除、スマホ用の広告に差替え

プログラム可能なので、自由な変換が可能であり、連動させながらスマホに望む理想的なUIを実現することができるのです。

以上のように、PCスマホ変換においては、変換対象や変換ロジックについて詳細な指定が可能で、しかも既存サイトに対して実現できます。この強力に制御可能な連動性こそがPCスマホ変換の大きなメリットなのです。