PC閲覧用のある会社のサイトをiPhoneでも見られるようにするには？

質問

PC閲覧用のある会社のサイトをiPhoneでも見られるようにするには？

PC閲覧用に作られたある会社のサイトをiPhoneでも見られるようにして欲しいと顧客に頼まれた場合、まず顧客には何を確認したら良いですか。

例として、Yahoo! JAPANのトップページを見せられました。PC用とiPhone向けのYahoo! JAPANは、作りが違うのですね。iPhone向けのYahoo! JAPANは、上下にしかスクロールできないようになっていることを初めて知りました（当方、iPhoneを持っていません。）。
ちなみに開発未経験ですが、HTMLは、多少わかります。プログラミング言語は、何も知りません。納期は、1週間後の月曜とお考え下さい。

今のところ、確認できたのは以下の通りです。
試しにその会社のサイトをiPhoneで閲覧したところ、PCで見る時と変わらず表示されていました。ただ、サイトにはマウスオーバーの機能を使った個所が、いくつかあるのでそれはiPhoneでは機能していませんでした。また、Flashは使われていませんでした。しかし、まだはっきりとわかりませんがサイトの背後でPHPのプログラムが動いている可能性が高いです。

このようなPC向けに作成されたある会社のサイトをiPhoneで閲覧できるようにして欲しいと頼まれた場合、どうしたら良いでしょうか。

教えて下さい。よろしくお願いします。

回答No.2

takepepe

iPhone、iPad対応を仕事の一部にしている者です。まず、作り方はいろいろあります。

おっしゃっているYahoo! JAPANのトップページのような作りはCGIを介してCMSで管理・生成していると予想できます。フリーブログなども同様です。しかし、この手法ではかなりの工数・予算がかかってしまうことはよくあります。

htmlとCSSを完全に分離することで、中規模サイトであれば対応ができます。
（ディレクター、プログラマー、デザイナー、コーダーが最小人数で構成され製作更新するようなサイト）
まずは動的に生成されるページをクリーンソースで構成してください。
<img>タグによる装飾を避け、すべてCSSで見栄えの調整をしてください。
あとはCGIで読み込むCSSを切り替えるだけです。
そうすればCMSを使用せずともhtmlの一元化が可能になります。

PC用でFlashを埋め込んでいる場合、代替の静止画を配置するか、Ajaxで作り込んで下さい。
iPad、Androidにも対応できます。

アニメーションを含むAjaxの場合、CSSanimationを使用すると軽快に動作します。
PC版Ajaxと同様にsetIntervalで動かすのはスマートフォンには高負荷なので避けて下さい。

回答No.1

sasaki1985

手前は主に携帯サイトの作成を生業としている者です。iPhoneサイト作成の経験はありませんが、アレはほぼPCで見るのと同じような物なので勝手は大体解ると思います。

基本的なHTMLの内容はPCサイトを作る要領で大丈夫な筈です。ただ画面のサイズがサイズなので、例えば横幅が狭くなっても見栄えが良い様にデザインする程度の工夫が必要かと思います。
また画像のサイズやFlashの使用の制限などありますが此方に関しては言及しているブログを見つけましたので参考URLをご覧下さい。「iphone safari 制限」とかでGoogle先生にお伺いを立てればわりと解るかと思います。
後はやっぱり携帯なので、画面全体のサイズもなるべく抑え目にするのが吉かと。

質問の中で言及されているPHPはクライアント側ではなくサーバー側の言語なので問題なく使えます。
動的なサイトを作るのに良く使用されるJavaScriptもiPhoneのブラウザであるsafariだったらある程度使えるかと思いますが、開発未経験の方が手を出すには少々敷居が高いかもしれません。
機能上の問題で使わざるを得ない場合は「JavaScript 入門」とかで検索立てると多分ドツボにハマるので「JavaScript DOM」などで検索してみたほうが理解が早いでしょう。
FireFoxとFireBugのコンボでJavaScriptの開発環境を作り、どっか適当なページ(HTMLデザインのサンプルサイトとかが良いと思います)を表示した後FireBugのコンソールを開き
document.getElementsByTagName( 'body' )[0].innerHTML = '<p>はろおわあるど</p>';
とか打ち込めば「動的HTML」と言うのがどう言う事をするか感覚的に解ると思います。
多分ここまでで既に何言ってるか解らない部分多々あると思いますが、調べていただいた方がむしろ理解しやすいかと思います。

さて、1週間後の月曜日…経験ゼロじゃあキツイですね。
元サイトがあるのなら、私だったらそのサイトのソースをコピペして細長サイズ(横幅半角30文字ぐらい？)で表示しても違和感無い様にレイアウトを修正し、冗長な機能やいらなそうな画像を取っ払って全体的にダイエットさせます。で、マウスオーバーでなんちゃらとか言うデコレーション的な機能はばっさり捨てる。iPhoneでマウスオーバーとかあまり意味が無いでしょうし。
とりあえず提示させていただいたURLを参考にタブーを避けてHTMLを書いて見ては如何でしょう。
ご武運をお祈りしております。

……答えになったんかな、コレ？

参考URL：

http://lab.fine-net.com/modules/wordpress2/index.php?p=15

お礼

ご回答ありがとうございます。参考にさせていただいております。

納期の月曜に間に合わないので、延期していただくことにしました。