既存のPC用サイトをスマートフォン用に適応化
既存のPC用サイトをスマートフォン用に適応化

 
スマフォは横画面表示専用ページ
  
（2012.03.11作成, 12.03.31更新）
I. Viewportでスマートフォン用に横幅を最適化
 
Viewportメタタグを<head>... ...</head>内に記述（こちらを参照）
 
<!--viewportの指定（ここの設定を変えてみる）-->
<meta name="viewport" content="width=device-width" />
<!--/viewportの指定-->
 
＝成績＝
Androidブラウザの場合
 
 
ページの横幅が640px以下の場合には、横表示ではデバイスの横幅に合わせて表示する事が可能だ。一方、640px以上の場合にはフィットせず640pxより大きい部分は右にはみ出て表示されてしまう。
縦表示では、320pxを超える右側の箇所が非表示となってしまう・・・ Androidでは横幅を320pxで作成しないと、別の方策でもダメだ (>_<、)
 
iPhone Safariの場合
 
 
横表示でも縦表示でも、指定した横幅に完全フィットして表示可能な親切設計になっている。
但し、Flash入りページの縦表示では上手く作動しない。

 

II. iPhoneのSafari用に文字サイズを最適化
 
iPhone(iOS 5.1)のSafariで、PC用に作成した既存の当サイトをサイズのみを縮小して視聴したら、意図した文字サイズで表現出来なかった。一つのページで、ある領域の文字が巨大(サブタイトル部)又は極小(図の説明部)に表示されてしまう等ハチャメチャだった。そこで、こちらの記事を参考に以下1)～3)の対策に、ヒビヅレさんの対応方法 4)を追加した。
1)サイトの横幅は原則 640pxで、横向きを想定したデザイン
2)フォントサイズは10px以上の偶数のみ・・・ 別途、.moji14pt { font-size: 14px}などを記述したmoji.cssを作成
3)フォントにはMacの「ヒラギノ角ゴ W3」が推奨されているので、今回は font-familyにヒラギノ角ゴ Pro W3も記述
4)iPhoneが自動でフォントサイズを調整してしまうと云うお節介な機能を解除する為に、
CSSのbodyに -webkit-text-size-adjust: none; を記述
＝以下は3),4)を記述したcommon.css 例＝
 
@charset "Shift_JIS";
body {
font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, Osaka,"ＭＳ Ｐゴシック", "MS PGothic", Arial, sans-serif;
-webkit-text-size-adjust: none; /* フォントサイズ自動調整を解除 */
}
 
＝成績＝
諦めかけていたが・・・解決、ヒビヅレさんに感謝 ＼(^o^)／

なお iPhoneのSafariは、孤立した文字
| Kenのムービー計画へ > ムービー鑑賞導入コーナーへ |は 左寄せ表示となってしまうので、孤立させないよう調整が必要だった。

III. アドレスバーを非表示にする（下記の単行本 p42を参照）
 
 
<script type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){ if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
window.onload = function() { setTimeout(doScroll, 100); }
</script>
 
＝成績＝
1) <body ...>内に onLoad="...;"が有ると作動しない(補足で対処)
2) Androidブラウザでは、メニューページの切り替えで交互に（2回に1回は）作動しない ?(゜_。)?
3) iPhone(iOS 5.1) Safariでは、
・この処理をすると、別のページから当ページ内のリンク先(アンカーポイント)に飛んでくれなくなってしまう・・・<a name=”02″ id=”02″>■</a>でも対処出来ない Y (>_<、)Y
・Flash入りページの縦表示では上手く作動しない。
 
＜補足＞
 
 
こちらのページの場合は、javascript のwindow.onload に時間ページジャンプ（setTimeout('NextPage()',　 ）に加えて、前もってonloadする必要がある為、「onloadが複数で困ったら(Javascript編)」を参考に対処した。
 
<script type="text/javascript">
/*アドレスバー を非表示*/
function doScroll(){ if (window.pageYOffset === 0) { window.scrollTo(0,1); } }
addOnload(function() { setTimeout(doScroll, 100); });
// onloadイベントを追加する。
function addOnload(func)
{
try {
window.addEventListener("load", func, false);
} catch (e) {
// IE用
window.attachEvent("onload", func);
}
}
</script>
   
＜参考＞「スマートフォンサイト制作 ハンドブック」(著者サイト)
 
 
iPhoneやAndroidスマートフォン用のWebサイト制作に必要なデザイン、コーディング、プログラミングのノウハウをコンパクトにまとめた解説書です。スマートフォンサイトの受注から、デザイン、コーディングにあたって注意すべきポイント、サンプルサイト、シュミレータのインストールと使い方、リダイレクトやアドレスバーの隠し方といった実践的なテクニックまで解説しています。
サイトを本格的に制作し直す場合に、参考とすべき事項が網羅されています。ボリュームは200ページ。サンプルを こちらから入手可能です。
著者 株式会社
CREAMU/嶋田智成
価格 1680円(税込)
発行 秀和システム
 
追記(2012.03.31)
＜例1＞自動切換えバナーを作る(p102) ⇒トップページに設置した例を参照
  キャンペーン告知などのバナーを目立たせたい時に、複数枚を自動で切り替わるようにする。
サンプルchap_04 内の「自動切り替えバナーを作る」を借用して、その素材を「autobanner」フォルダに入れて global.css等をカスタマイズした。
1)<head>...</head>内に以下のスクリプトを記述
<!--/自動切り替えバナーの指定-->
<link rel="stylesheet" href="autobanner/css/global.css">
<script src=・・・中略・・・</script>
<script src="autobanner/js/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'autobanner/img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>
2)<body>...</body>内にスライドさせたい画像を以下の如く記述する。
<div id="container"><div id="example"><div id="slides" style="">
<div class="slides_container">
<img src="autobanner/img/slide01.jpg" width="510" height="279"
alt="Slide 1">
・・・中略・・・
<img src="autobanner/img/slide06.jpg" width="510" height="279" alt="Slide 6">
</div></div></div></div>
 
＝成績＝
借用したサンプルは、PC用のものをAndroidブラウザ用途にカスタマイズしたものだが、AndroidではPagination(画像切り替え)ボタンが上手く機能しない (；_；)
Intel Macでは作動しないが（Mac用は別にここから入手可能)、iPadやiPhoneの safariでは作動し、画像切り替えボタンも機能する。

⇒「 WOW SliderでjQueryを使ったスライドショーを作成」で解決！
　
＜例2＞バルーンポップアップの実装(p40) ⇒トップページに設置した例を参照
 
サンプルchap_02 内の「バルーンポップアップ」を借用して、その素材を「autobanner」フォルダに入れてカスタマイズした。
「script.js」で表示位置と出没のタイミングを設定。「style.css」で背景色、透明度、フォントの設定。
1)<head>...</head>内に以下のスクリプトを記述
<!--/バルーンポップアップの指定-->
<link rel="stylesheet" href="autobanner/popup/style.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js">
</script>
<script type="text/javascript" src="autobanner/popup/script.js">
</script>
2)<body>...</body>内に表示する文字を以下の如く記述する。
<div id="popup">
<p>トップページのメイン画像を「自動切り替えバナー」にしようと<br>
思いましたが、Androidでは切り替えボタンが機能しない (；_；)<br>
なお、iPhoneでは下からこのホップアップが出来ない (;＞ω＜)/</p>
</div>
 
＝成績＝
表示位置がAndroidブラウザとiPhone Safariで相違しており、iPhone(iOS 5.1)では下からのホップアップが出来ない ┓(´_`)┏
やはり Intel Macでは作動しないが、iPadのSafariでは問題なく作動する。
   
  ＜その他＞メニューリスト、タブ切り替え、アコーディオンや角丸ボタンなどのサンプルを利用する事が可能。

jQuery Mobile（JavaScriptフレームワーク/ライブラリー)の利用を推奨している。利用する場合は、一からPC用サイトを構築し直さなければならないが、Web Design:Template-Party より借用したテンプレートを利用して手間を掛けずに制作してみた ⇒「Ken のムービー計画 (jQuery Mobile版)」をご覧下さい。