PCサイトを携帯サイトに変換したいです

質問

PC向けの企業サイトを作ったのですが、それを携帯対応にしたいです。
できれば携帯電話用のサイトを新たに作らずに、既存のページにタグの追加やスクリプトの設置などで携帯電話向けの閲覧ができるように調整したいです。

「PCサイト->携帯変換」というphpスクリプトをダウンロードして試してみたところ、携帯電話で閲覧可能なものの、表示が縮小されるだけでした。
サイトは一般的な企業の紹介サイトです。
横長のページがそのままなのでスクロールバーが出るのと、問い合わせフォームや地図が表示されません。

携帯電話向けに新たに作った方が早いような気がしますが、調整でできるものなのでしょうか。
調整の場合、どういったスクリプトやタグを使えば良いのか教えていただけると助かります。
また、参考になるサイトがありましたら教えてください。

※ちなみに、私はプロ並とはいきませんが、Fireworksやdreamwerverで一通りPCサイトを作成することはできます。
携帯サイトの作成は、10年程前に簡単なものを一度作成したきりで、すっかり忘れてしましました。
知人の依頼で何とかPCサイトの作成はできたのですが、携帯用に調整を・・・ということになり悩んでいます。

宜しくお願い致します。

回答No.3

ORUKA1951 · ベストアンサー

＞オーサリングツールは、プレビュー機能やタグの入力支援があるので便利に使っています。

　たしかに・・・
　しかし、プレビュー機能はHTMLを作成するときには使いません。意味ないし・・
　HTMLを記述するときは、ひたすら文書の構造--文章を読み解き、それが文書の中でどのような構成要素であるかを読み取ってマークアップしていくことだけに注力します。
　たとえば、文章内に<ol><li>・・・が存在した場合、それがサイトのナビゲーションリストなのか、そのページのページの目次なのか、はたまた、単なる序列リストなのかは、機械にはわかりませんから、それを
<div class="nav">
　　<ol>
　　　　<li>
・・・
<div class="table_Content">
　　<ol>
　　　　<li>
・・・・
<div class="product_List">
　　<ol>
　　　　<li>
　のように、無名ブロックdivに、文書構造を示すclass名をつけてマークアップしていく作業です。
　もちろん、この部分は重要だから<strong></strong>・・新しい段落だから<p>とか
ですから、・・プレビュー機能なんてここでは要りませんね。
　入力支援も必要なのかな？せいぜい使用する要素--タグは数十種類ですし---(比較)中学校で学ぶ英単語は２,０００語

＞携帯サイトの基礎が分かっていないので、具体的にどういったソースを使って調整すればいいのかよく分かってないのですが・・・。
　上記のようなものですから、携帯サイトだからどうのこうのと言う特別なことは何もありません。作業は楽なものだと思います。まあ、トップページ,カテゴリーのトップ,内容,会社情報などの数種類の文章を取り出して、数種類の雛形を作ってしまえばよい。慣れれば数日でできるでしょう。後はデータを流し込んでいくだけです。

　デザインの要素をまったくもっていないHTMLができたら、スタイルシートを文書構造を基に作成していきます。
div.header,div.section,div.footer{margin:0 auto;width:80%;min-width:640px;max-width:900px;}
/* header,section(本文),footerのサイズを指定する。media="screen"としておけば、スマホやPCにしか適用されない。スタイルシートを理解する携帯電話にはmedia="tty"で別のものを用意すればよい。*/

　これだと、
div.section div.section{margin-left:1em;font-size:0.95em;}
/* これだけで、章→項→小項と進むごとに右側にマージンが増え、文字が少しずつ小さくなる */

div.section strong{color:red;font-weight:bold;}
/* 本文中の重要単語は太字の赤で */

div.section{position:relative;}
div.section div.section{position:static;}
div.section div.table_Content{width:20%;position:absolute;}
div.section div.table_Content ol,div.section div.table_Content li{display:block;list-style:none;margin:0;padding:0;}

　この様に文書構造を解釈してデザインしていくのですから簡単ですし、後々の修正も楽・・。こんなセレクタの書き方はオーサリングツールには出来ません。なぜなら文章の構造を理解できないので、これも著者が行うしかありませんね。

　これが文書構造とプレゼンテーションを分離することで、「あらゆるプラットホームに対応するHTML」が完成しますし、「スタイルシートを変更するだけでまったく異なるデザインにすることができる」「HTMLもCSSも極めてシンプルでわかりやすくなる」のでスタイルシートを使用する本来の目的も達成できる。印刷が想定されるページにはmedia="screen"でスタイルシートを書けば良い。

　そんな難しい作業じゃありません。今まで作ってきた手法と比べると驚くほど簡単になりますよ。(^^)頑張ってください。仕様書のほうがツールの説明書の数十分の一しか量もないし(^^)

　要は慣れです。

回答No.2

ORUKA1951

携帯と言っても、携帯電話(media="tty")なのか、PDA(media="handheld")なのか、スマートフォン(media="screen")なのか、わかりませんが、
　質問内容を読む限り、はじめから作り直したほうが早そうな気がします。特にトップページだけは・・
　そもそも「PC向けの企業サイト」と言う時点で、HTMLの本来の姿ではないのです。HTMLの最大のHTMLであればこその目的は、ご存知のとおり
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
　なのです。

　このHTMLの基本を知らずに、Fireworks,dreamwerver,ホームページビルダーに関わらず、オーサリングツールを使って作成すると、他のユーザーエージェントでは利用できなくなってしまいます。
　同じ箇所からの引用ですが
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。 もし【相互運用性確保の】努力が成されなければ、Webは互換性のないフォーマット毎に分け隔てられた世界に分割され、すべての関係者にとっての商業的可能性が減少することとなるであろう、大きなリスクを負うこととなる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで

　これらから、わかるように本来は、最初からPC用,携帯電話,PDA,スマフォ用と設計した時点でHTMLとしてはまずいのです。

　個人の趣味の範囲ならともかく、企業や公共団体など利用者が多岐にわたることが想定されるページではとても重要です。

★対策ですが、私がこのような依頼を受けた場合の対処は次のようにしています。
1) まずトップページは、マルチプラットホームとして書き直します。一般的に文書量も少ないので容易ですから。
　そのHTMLには、新しいページ群と、旧来のページ群へのナビゲーションを入れておきます。スタイルシートを解釈しない携帯電話やテキストリーダーなどにはすべて表示されますが、スタイルシートを解釈する携帯端末には、旧来のページへのリンクはdisplay:none;などで見せません。
2) 急を要するもの、必要なものから順次新しいページを増やしていきます。
3) 最終的にすべて書き換えたら古いページは削除します。

ポイント
・ 一ページのデータ量は極力少なくする。
・スタイルシートを解釈しない端末用でも多少デザイン性を持たせたければtransitinalで作成する。そうでなければstrictで
・HTMLは、原則テキストエディタで作成します。
　(理由)文章を読み解き内容を理解して構成要素に分解して最適な要素を選択する作業はオーサリングツールには不可能です。たとえば、この部分はナビゲーションだから<div class="nav"></div>、ここは本文に関係ないから<div class="aside"></div>なんて、機械にゃ無理。
・ユーザーエージェント用にスタイルシートを用意します。

　私の経験からオーサリングツールを使って作成したものに比較して、HTMLもCSSも、数分の一から数十分の一になり、かつとてもわかり易く、SEO的にもベストなものができます。

お礼

回答ありがとうございます。
知人の言う携帯電話とは、普通の携帯電話とスマートフォン両方を意味していると思われます。

おっしゃるように、いまどきの企業サイトは携帯に対応していて当たり前。
最初から全てのプラットフォームに対応できるように考えるべきでしたね・・・。
今回の知人からのサイト制作依頼で、CSSやFLASHを一から勉強して3ヶ月で仕上げたということもあり、それだけで精一杯でした。

オーサリングツールは、プレビュー機能やタグの入力支援があるので便利に使っています。
ソースコードをいちいち見て勉強しているので、CSSの記述やアレンジができるようになりました。
ホント、Webの世界って奥が深くて、学ぶことが山ほどありますね。

トップページは大幅に作り直しが必要そうですので、まずここから取り掛かります。
携帯サイトの基礎が分かっていないので、具体的にどういったソースを使って調整すればいいのかよく分かってないのですが・・・。
参考になる回答、誠にありがとうございました。

回答No.1

kamikami30

携帯電話というのはスマートフォンではない携帯電話ですよね。

それなら、
携帯電話には機種によって、表示できるデータ容量に制限がありますので、それに合わせる必要があります。

そのためにはcgiなどを使って、携帯からのアクセスかどうか判定し、別ページを作らないということであれば、ホームページを構成する１つ１つのパーツを携帯で表示可能な形式に変換し、再配置が必要です。

Cgiなどを使った処理で一番簡単なものは、
おっしゃるように別ページに携帯用のソースを用意して、
携帯電話からのアクセスならそちらを表示とするのが簡単だと思います。

また、そのサイトの内容が頻繁に香辛料される可能性があるなら、
これを期に、動的な全てのデータをデータベースから呼び出すようにしたり、別ファイルから読み込むようにすることを、私なら検討します。

お礼

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

知人からは携帯電話でも見られるようにとだけ言われたのですが、携帯電話には普通の携帯電話だけでなくスマートフォンも含んでいると思われます。
私はスマートフォンを持っていないのでどんな画面表示なのか、スタイルシートは使えるのか、普通の携帯用とは違ったソースで作成した方が良いのが分かっていません。

更新の頻度はあまりないです。月に一度トップページの最新情報を更新する程度で、頻繁に更新するのはブログ（携帯対応）なので、今のところデータベース化しなくても大丈夫そうです。

PCで閲覧することをしか考えておらず、安請け合いしてしまった自分が恥ずかしいです・・・。
ありがとうございました。