[メモ]リニューアル。主にhtml5とiPhoneについて

気が向いたので、html5を使ってリニューアルをしてました。
いつしたのかも覚えてませんが、備忘録的に、つらつらと・・・。
[メモ]リニューアル。主にhtml5とiPhoneについて

▼PC [html5] ▼PC[CSSSprite] ▼iPhone[jQtouch] ▼iPhone[htaccess]

PC[html5]
まずはPC側。
ソーシャル系を右上に、フッターを充実っていう今ありそうな感じにしました。
また、なるべくシンプルにし、コンテンツをみやすくしたデザインです。
マークアップは、勉強がてらhtml5で記述。
head内は下記みたいにすっきりできますね。 <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

で、ie様向けにjsを入れました。
いわゆるhtml5.jsです。
また、HTML5 DoctorというCSSリセットhtml5.cssもいれています。
肝心のマークアップなんですが、いまひとつ理解できなかったと言うのが本音。
とりあえずって感じでarticle, aside, footer, header, hgroup, nav, sectionを使ってみましたが、まだまだ勉強が必要ですね。

html5で参考にしたサイト HTML5.JP:http://www.html5.jp/

▲PC [html5] ▼PC[CSSSprite] ▼iPhone[jQtouch] ▼iPhone[htaccess]

PC[CSSSprite]
表示速度を考慮し、CSSSpriteを使ったのですが、これはYouTubeの記述方法を参考にしてみました。
Youtubeでは以下のような記述です。透明画像を入れています。
※ロゴ部分の記述例
<img id="logo" class="master-sprite" src="http://s.ytimg.com/yt/img/pixel-vfl73.gif" alt="YouTube ホーム">
CSS側は以下です。
.master-sprite{background-color:transparent;background-image:url(http://s.ytimg.com/yt/img/master-vfl160969.png);background-attachment:scroll;background-repeat:repeat-x;border:0;padding:0;cursor:pointer;cursor:hand;vertical-align:middle}.master-sprite::-moz-focus-inner{border:0}
ロゴ以外はaltすら入っておらずファイルサイズを軽く、少しでもリクエストを減らすことで、読み込みを早くしているんでしょうか。
ちゃんと検証していないので、正確なところはわかりませんが・・・
なお、YouTubeくらいになるとSEOもあまり考えなくていいのかなと。
ということで、現実的には使いにくいテクニックかもしれません。

▲PC [html5] ▲PC[CSSSprite] ▼iPhone[jQtouch] ▼iPhone[htaccess]

iPhone[jQtouch]
次にiPhone対応です。
iphone
今回はjQueryベースのフレームワークjQtouchを利用しています。
jQtouchは以前appleに倣え!jQueryで作るiPhoneライクなUI「jqtouch」として紹介したり、ホロヨッターのiPhone版でも使用しています。
特徴としてはテーマが2種類デフォルトであるので、簡単にiPhoneぽいデザインができること。
またスライドなどのエフェクトが満載で、iPhoneらしさを発揮出来るところです。

jQtouchの唯一の弱点はaタグの扱い。
エフェクト側の処理のため外部リンクが効きません。
めちゃめちゃはまりました・・・
それで、jQueryを利用し以下のようにさせています。
jQuery(document).ready(function($){
 $(".external").click(function(){
  window.open(this.href,'_self');
  return false;
 });
});
これで外部リンクのaタグに.externalを付与することでリンクが効くようになりました。

▲PC [html5] ▲PC[CSSSprite] ▲iPhone[jQtouch] ▼iPhone[htaccess]

iPhone[htaccess]
最後にhtaccessです。
www.skuare.netにiPhone,iPod,iPadでアクセスした場合リダイレクトがかかるようにしています。
iPhone用コンテンツはwww.skaure.net/iphone/以下にしていて、その下のURLをPCとまったく一緒にしているので、下記の通り記述。
Options +FollowSymLinks
RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.swf$
RewriteCond %{REQUEST_URI} !\.inc$
RewriteCond %{REQUEST_URI} !\.cgi$
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod|iPad)
RewriteCond %{REQUEST_URI} !^/iphone/
RewriteRule ^(.*)$ /iphone/$1 [L]

※記述が足りなかったので、リダイレクトさせないファイルを指定したものを追加しました。

www.skuare.net/***/***.htmlにアクセスされたらwww.skuare.net/iphone/***/***.htmlにリダイレクトされます。 htaccessで参考にしたサイト linker :iPhone用ページに同一URLでリダイレクトするメモ

・・・・ながっ!
というわけで今後もお願いします。

sponsors

「[メモ]リニューアル。主にhtml5とiPhoneについて」をシェアする

記事作成:
記事URL:

TOP > > [メモ]リニューアル。主にhtml5とiPhoneについて