レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

PCスマホ変換技術 の5W1H解説:誰が、何を、変換するのか

PCスマホ変換技術 5W1Hの2回目は、Who(エンジン、処理系)とWhat(対象コンテンツ)です。早速解説しましょう。

blogimg2

[Who]誰が変換する? – (エンジン、処理系)

変換ロジックの処理系には、ツリー構造の操作が必要です。ツリー操作には、DOM を構築しXPath や jQuery でプログラミングするのが一般的です。その処理が得意なものは、Java とJavaScript です。

Javaのサーバーサイド技術である Java Servlet は DOM や XPath との親和性が高く、中継サーバーを構築することが容易である為、中継サーバー方式では標準的な処理系です。課題は、DOM や XPath が難解であることで、変換ロジックの開発コストが高いことです。

スマホのブラウザ内で変換するものは、基本的にブラウザ搭載の JavaScript エンジンが唯一の選択肢です。JavaScript や jQuery の処理系は扱いやすく広く普及しており、変換ロジック開発のコストが低いのがメリットです。懸念としては、コンテンツと同じ処理系なので互いに干渉し易いこと、端末、OSやブラウザのバージョンなどで JavaScript の挙動が違うので動作の安定性を担保できないことです。

[What]何を変換する? – (対象コンテンツ)

HTML・CSS・JavaScript・画像の4つを基本の Web コンテンツとすれば、PCスマホ変換の主たる対象は HTML です。

HTML を変換することで、スマホ用の CSS・JavaScript・画像を読込むように制御できます。HTML は全ての変換エンジンで変換対象であり、HTML 構成要素を変え、表示順や個数やレイアウトを変えることは、PCスマホ変換そのものです。ちなみに、レスポンシブ Web デザインは、HTML を変換せずにCSSで最適化するものと言えます。

PCスマホ変換でも CSS・JavaScript・画像を変換するサービスもあり、その場合、中継サーバー方式となります。ブラウザでは、CSS・JavaScriptを変換するタイミングが無いこと、画像の場合は伝送量削減が目的なので意義がないこと、などのためです。

中継サーバーにおいて、CSS にメディアクエリーを加える、JavaScript 内の URL を変更する、画像を小さくする、などの変換を行うことで、よりPCサイトのコンテンツを活かすことが可能となります。ただし、HTML 変換と連動性が強い場合は、変換が複雑になり過ぎてPCコンテンツの変化に対して脆弱になるので、その場合はスマホ用にリソースを別途揃える方がよいでしょう。

おわりに

処理エンジンによって得手不得手があり、それは変換場所に依存し、変換場所は変換対象を決める理由にも繋がります。このことからも、サーバー方式とするかクライアント方式とするかは、導入する上で大きな判断要素だと言えるでしょう。

次回は、Why(目的?)、How(実現手段)を解説していきます。

bnr_bottom_gc_blue

Page Top