トップページに「自動切換えバナー」を設置

トップページに「自動切換えバナー」を設置しようとしましたが(こちらを参照)、Androidでは[画像切り替え]ボタンが機能しません（2012/03/31作成)。

＝スマートフォンで動画視聴時の推奨システム環境＝

下り回線速度実測値： 1.2Mbps以上。
あなたの回線速度計測は、BNRスピードテストをご利用ください。
過疎地域では必ずしもモバイルWi-Fi環境が良好とは限らないので、3G回線と使い分けてご視聴下さい。

＜参考＞Android OS 2.3.5で検証（2012.２.04)

　NTTドコモのAQUOS PHONE SH-01Dを使用して検証

1) Android標準ブラウザやAngel Browser(0.31a)等のWebKit系ブラウザは、HTML5ビデオのうち H.264/MP4とVP8/WebMに対応しているが、自動再生は出来ません。「スタート/停止」ボタンをタップしないと再生出来ませんが、これがフルスクリーン表示となってしまう為字幕表示出来ません (;＞ω＜)/
	なお、Android版Firefox(10.0)とOpera Mini(6.5)は現時点ではHTMl5 ビデオのストリーミング再生用途としては使い物になりませんでした。

2)スマートフォン用のプラグインは、六大ストリーミング動画のうち、Adobe Flash Player(11) のみしか提供されておらず Flash Video以外は再生出来ません。
	・WebKit系ブラウザは、iPhoneの Mobile Safari とは違いFlash Playerに対応していますが、一方 Firefox(10.0)とOpera Mini(6.5)は現時点では Flash Playerを利用出来ません。・Android用RealPlayer Beta(0.0.0.6)とWinamp(1.2.10)は、該当動画の再生用プラグインとして作動しません。

なお、iPhoneはウェブ動画の再生技術としてのFlashを切り捨ててHTML5ビデオ(H.264/MP4)を採用してしまいました。一方、QuickTime技術は継承しそのムービーの再生は可能ですが、QTtext字幕の表示は出来ず、QTVR パノラマムービーには未対応。

＜雑記＞既存のPC用サイトをスマートフォン用に適応化（2012.3.11)

　I. Viewportでスマートフォン用に横幅を最適化

Viewportメタタグを<head>... ...</head>内に記述（こちらを参照）

<meta name="viewport" content="width=device-width" />

＝成績＝
Androidブラウザの場合

サイトの横幅が640px以下の場合には、横表示ではデバイスの横幅に合わせて表示する事が可能だ。一方、640px以上の場合にはフィットせず640pxより大きい部分は右にはみ出て表示されてしまう。
縦表示では、320pxを超える右側の箇所が非表示となってしまう・・・ Androidでは横幅を320pxで作成しないと、別の方策でもダメだ (>_<、)

iPhone Safariの場合

横表示でも縦表示でも、指定した横幅に完全フィットして表示可能な親切設計になっている。
但し、Flash入りのサイトの縦表示では上手く作動しない。

　II. iPhoneのSafari用に文字サイズを最適化

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

＜備考＞本格的にスマートフォン用サイトを作成（著者サイトを参照）

　「スマートフォンサイト制作ハンドブック」[単行本]の紹介

iPhoneやAndroidスマートフォン用のWebサイト制作に必要なデザイン、コーディング、プログラミングのノウハウをコンパクトにまとめた解説書です。スマートフォンサイトの受注から、デザイン、コーディングにあたって注意すべきポイント、サンプルサイト、シュミレータのインストールと使い方、リダイレクトやアドレスバーの隠し方といった実践的なテクニックまで解説しています。
サイトを本格的に制作し直す場合に、参考とすべき事項が網羅されています。ボリュームは200ページ。サンプルをこちらから入手可能です。

著者株式会社CREAMU/嶋田智成
価格 1680円(税込)
発行秀和システム

＜例1＞アドレスバーを非表示にする(p42)

＝成績＝
1) <body ...>内に onLoad="...;"が有ると作動しない(補足で対処)
2) Androidブラウザ：メニューページの切り替えで交互に：2回に1回は作動しない ?(゜_。)?
3) iPhone 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>

＜例2＞jQuery Mobileの利用を推奨(p46)

使用方法については、西畑さんの「jQuery Mobileデザイン入門」を参照。