スマートフォンコンバーターの仕組み

質問

既存PC用のデザインサイトをスマートフォン最適化に
しようと考えています。

ただ、静的なHTMLファイルが莫大な数存在し
一つ一つデザインを修正することが不可能な
状態となっています。

そこでスマートフォンコンバーターで検索すると
javascriptを一つ読み込むだけで。とか良く見るんですが
そもそも、どういう仕組みなんでしょうか？

それぞれのファイルはデザインもバラバラで
HTMLタグにスタイル属性が定義されている
ものも存在します。

そのような場合でもスマートフォンコンバーターは
有効なんでしょうか？

回答No.1

神崎 渉瑠（@taloo）

表示された結果を見ての推測ですが。

まず、登録画面で自分が作成したページを表示し、どの部分をどの場所に表示するかを指定しておきます。
この登録画面は、ぶっちゃけ、オーサリングソフトをJavaScriptで作るような物ですね。

登録画面で作った構成情報を.jsファイルとして保存しておき、
その.jsファイルを<script>タグで読み込むと、表示位置を変えていくと思います。
構成が違っていても、1ページずつ登録しておけばどんなページでも変換できます。
（逆に言うと、未登録状態ではページの構成がわかりませんから、変換できません。）

理論的には"通信しないAjax"です。
XHRでデータを受信してページを書き換える代わりに、現在のページの内容を別の場所に表示し直していると思います。

------------------------
ざっと検索したら、登録画面のデモページを利用できるようです。
CSSゴテゴテはうまく変換できないようですが。
http://shutto.com/
ユーザー登録したら、そのまま利用できるんじゃないでしょうか？

>ただ、静的なHTMLファイルが莫大な数存在し
>一つ一つデザインを修正することが不可能な
>状態となっています。
１ページずつ登録画面で登録していく必要がありますが、HTMLファイルを作り直すよりはマシだと思います。

-----------------------
PC用の大きな画像を使っている場合、
HTMLファイルを読み込んだ時点では、たとえば<img src="large_image.jpg">という状態になっていますから、
スマホでもそのlarge_image.jpgをダウンロードします。
その後で、スクリプトによりremoveChild()でドキュメントから取り除かれますので、
「表示しないファイルをダウンロードしてくる」ことになり、ネットワーク負荷も大きな物になると思います。

media queriesという方法で読み込むCSSファイルを違えることはできますが、
（ブラウザが対応していれば、 rel="alternate stylesheet"で表示を切り替えることができるように）
これでもPC用のファイルをダウンロードすることに変わりありません。

PC用、スマホ用/ケータイ用の２～３種類を作るのは大変、制作料が余分にがかかるというのもありますが、
できる限り、専用ページを個別に作成し.htaccessやCGIなどで振り分けたり、
SSI、CGIなどで出力するHTMLを書き換えることをお勧めします。

お礼

回答ありがとうございます。

自動でやるにせよコストはかかりますね。
それだと、今あるファイルはPC用として、スマートフォンは
動的なJSPとかで出力するような仕組みにするしかない
気がしますね。