別館サイトよりチョットだけ早くここで告知。
ぼくんちのTV別館をスマホ対応させました →(スマホ向けぼくんちのTV別館)

そして初めてスマホ対応サイトを作って見た感想や、今後の予定などをつらつらと。
どんだけ勉強不足のまま制作開始したのかと...(滝汗)

スマホ向けサイトを作ってみて解った事

  1. iPhoneはどれも解像度 320x480として認識される
  2. andoroid は機種により解像度がマチマチ。
    横幅720pxの機種が意外と多い。
  3. HTML5 で作成したWebページにiframeが含まれていると、andoroidでは誤作動が発生しやすい？
  4. andoroidとiPhoneで「行間の空き方」が結構違う。私のスタイルシートの書き方が悪いのかもしれん。
  5. Facebookの「いいね！」ボタンにはHTML5用のコードが存在していた
    (これ知らんかった！恥ずかしい！)
  6. アドセンスのモバイル向けコード(320x50などのサイズ)はもう新たに発行できないと思っていたが、PC用の広告コード作成ページ内に同じページに存在してた。
  7. アドセンスの336x280サイズの広告に青い矢印と文字だけの広告が出ていたら、それはスマホ向けの広告。また468x60など幅の広いサイズはスマホ向け広告がでない
  8. （おまけ）
    PHPの正規表現関数[ereg]が、PHP5.3から非推奨になっていた
    参考リンク:PHP5.3　eregとかのPOSIX正規表現関数が「この機能を使用しないことを強く推奨します。」とか言われちゃってる件
    私はPC･携帯･スマホの振り分けに思いっきり[ereg]関数使っています。
    これも何とかしなきゃ･･･
  9. HTML5は、big,smallタグは未サポート。あと(以前からある問題だけど)spanタグのline-heightが親要素を優先しちゃって効かない現象が大発生。

いろいろと準備不足がたたって、上記を知らないままスマホ対応ページを作ってしまいました(^_^;

スマホサイト: 今後の修正予定

現時点の修正予定項目
  • table / blockquote タグを使った部分の見栄えの修正
    現状のレイアウトでは、この辺がまだ読みにくい。まだ手付かず。
    お盆明けあたりに実施する。
  • iframeを利用している箇所の修正
    主にfacebookの「いいね!」ボタン周辺。これもお盆明けあたりに。
  • サイトの横幅
    現状、468pxにしています(通常のスマホサイトは320px)
    PC向けページは本文の横幅を512pxに想定したサイト作りをしていたため、320pxだと非常に大きな違和感が･･･サイトの横幅を何ピクセルにするのがベストなのか試行錯誤中。
  • ページ内リンクで正常にジャンプできない
    YouTube が見れない･Flashが再生できない･重い･おかしい時の対処法など、同じページ内で別項目ジャンプできる様にしたページは、スマホ版では現状上手く作動しません。
    ････可能ですが時間がかかります
  • 文字の大きさ/改行幅
    スマホにベストな文字の大きさってどれくらいなんだろう･･･？
    意外としっくりこない。
    色々なサイトを覗いて勉強中。

修正が難しい部分

以下は不具合があるけれど、修正が難しい部分
  • 一部のリンクで、PCページに飛んでしまう
    PC /iPadなどで閲覧した場合、スマホ向けページからPCページに戻ってしまう。
    (iPhone / Andoroid はリダイレクト処理で正常にジャンプできます)
    • 色々試行錯誤したが、スマホページのURLを全部変更しなければ無理っぽい(全部のURLを1ディレクトリに収めれば可能)。でも出来れば階層化しておきたい。私の力量では対応できそうに無い。
  • 画像やiframeの最適化
    • 画像:スタイルシートでmax-width 指定しても、HTML内でサイズ指定するとそっちが優先されてしまう。過去ページの画像全部からwidth/heightタグを抜くとか無理すぎる。
    • Youtubeの埋め込み(iframe)など: ライフハッカーさんのスマホページは上手い具合に処理している。PCサイト/スマホサイト両方で違和感の無いサイズでYoutube埋め込みってどうやるんだろう･･･？
  • ピンチアウト時の作動
    サイトの横幅をむりやり変更すると、ピンチアウトや画面回転時の挙動を(iPhone/androidの両方同じように)制御するの難しいですね。。。

　

あとがき

スマホ向けサイトの作り方を勉強しなおして、PC向けサイトも含めてイチから作り直す必要がありそうです(^_^;
(もしくは大胆な発想の転換が必要っぽい)

おまけ:ガラケー向け検索サービスで私のサイトが全滅な件

ここからはスマホ向けサイトのお話ではなく、ガラケー向けサイトでのお話。

私の場合、
　・PC向け検索でガラケー向けURLの方が上位表示されちゃう現象多発
　・当時のガラケー向けページはcgiで作動し、サーバー負荷が高かった
という事で、ガラケー向けURLに色々と閲覧制限を設けすぎたのが原因です。

昨年の3月あたりから、一部のモバイル用検索エンジンで[ぼくんちのTV]は全滅状態です。。。(^_^;　色々とサイト構築をやりなおして、モバイルページのアクセスも復帰させたいと思ってます。（と思ったらガラケーページの規制を解除して24時間後、ポツポツとモバイル用のURLが反映され始めた早いな！）

　

おまけ:その2(いいわけ色々)

8月7日の深夜～8月8日にかけては、一時的にサイトへ接続不能になったり一部のリンクが正しく反応しなかったり、AndroidでアクセスするとAmazonリンク(iframe)が画面全体を占領したり。。。色々トラブルありました(^_^;

しばらくの間、一部環境で正常に閲覧できない状態が続きましたが、現時点ではどのキャリアからも(おそらく)正常に閲覧できるはず。何事も前準備は大切ですね、反省。

また本当は、スマホサイトの制作は昨年の7～8月に行う予定でした(^_^;
当時、 Facebook入会･iPhone4購入など着々と準備を進めていたのですが、同時期に発生した無線LAN故障 などで全ての予定が狂ってしまいました。
PCが使えない状態になったのはほんの3～4日だったのですが、その期間で集中的にお勉強する予定だったので、その後の予定が大きくずれ込むことになりました。

あと、スマホサイト開設と同時にPCサイトをFacebookやtwitterと連動させる目論見があった(Zenbackは重くて好きじゃないけど、自分専用で軽くて似たようなサービスを作りたかった)のですが、私のスキルでは難しいお話でした。

Facebookやtwitterとサイトを連動させる事を諦める事で、今回の実装に踏み出すことが出来ました(￣▽￣;)