ECサイト運営開発記

PHPフレームワーク Laravelの使い方を中心とした通販サイトの開発日記

jQuery Mobileを使ったカレンダーの通販サイト

事例 jQuery Mobile スマートフォンサイト

カレンダーの通販サイト E-カレンダー.comをiPhone＆Androidスマートフォン対応サイトとして作り直してみた。
正直、まだまだ、やることはありそうだけど、とりあえず開発のまとめを残しておくことにする。

スマートフォンで確認してください。
カレンダーの通販サイト E-カレンダー.com

  • トップページ
    • 見た目はこんな具合のトップページ。コーディング量は結構少なめ。
  • HTML5でコーディング
  • jQuery Mobile 1.0a4.1を使用
    • jQuery本体は1.5が必要。1.4系でもたぶん動く。
  • jQuery Mobile 1.0b1を使用
    • jQuery本体は1.6が必要。
  • jQuery Mobileを使う上での初期設定
<script type="text/javascript">
$(document).bind("mobileinit", function(){
  $.mobile.ajaxLinksEnabled = false; 
  $.mobile.ajaxFormsEnabled = false; 
});
</script>

jquery mobile Beta1からは以下のように指定しなければならない。a版では上の記述は廃止。
<script type="text/javascript">
$(document).bind("mobileinit", function(){
  $.mobile.ajaxEnabled = false; 
});
</script>
  • Ajaxによるリンクとフォームの送信をオフ。baseタグでベースURLを指定している場合、いろいろと不都合なことが起こるので、やむを得ず、この設定に。原因は画面が遷移する度に、URIが書き換えられて、ページ内の画像が表示されないことがあるため。Beta版がリリースされてもこの仕様は今のところ変わっていない様子。

  • アルファ版に比べ、ベータ版はもっさり動作がやや解消。iPhoneだとより滑らかに動きます。自前のHTC EVOとiPhone3GSで確認してみましたが、やはり、iPhoneの方が滑らか。

  • スクロールしても、フッター位置は固定。ボタンは独自のものを使用することもができますが、今回はデフォルトの物を採用。
    • data-role="footer" data-position="fixed"でフッター位置を固定
    • data-icon="***" 属性でアイコンを指定することが可能。
<footer id="footer" data-role="footer" data-position="fixed" data-id="footer">
  <nav data-role="navbar">
    <ul>
    <li><a href="http://homeulr/"rel=“external” data-icon="home">HOME</a></li>
    <li><a href="http://homeulr/about/rule/" rel=“external” data-icon="info">通信販売法に基づく表記</a></li>
    <li><a href="#mainMenu" data-icon="grid" data-transition="slideup">メニュー</a></li>
    </ul>
  </nav>
</footer>
>|html|

-一番やっかいなのはCSSのデザイン
--構造をがっちり理解しないと幸せになれない。
---とは言いつつ、まだ完全に理解できてない。
--E-カレンダー.comで使用している方法
>|html|
<!-- デフォルトのCSS -->
<link rel="stylesheet" href="http://homeurl/js/jquery_mobile/jquery.mobile-1.0b1.css">
<!--  オリジナルテーマ  -->
<link rel="stylesheet" href="http://homeurl/js/jquery_mobile/theme_x.css">
</head>

<div id="mainPage" data-role="page" data-theme="x">
  〜ここにいろいろ書く
</div>
      • 既存のデーマは使用せず、data-theme="x"を使うと宣言。
        • 既存のCSSを上書きする形で、theme_x.cssを読み込む。
    • テーマの作成
.ui-bar-x {
	line-height:1.8;
}
.ui-body-x{

}
.ui-btn-up-x a.ui-link-inherit {

}
.ui-btn-down-x {
	border: 1px solid #225377;
	background: #4e89c5;
	font-weight: bold;
	color:#fff;
	background-image: -moz-linear-gradient(top,
	#396b9e,
	#4e89c5);
	background-image: -webkit-gradient(linear,left top,left bottom,
	color-stop(0,#396b9e),
	color-stop(1,#4e89c5));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#396b9e', EndColorStr='#4e89c5')";
}
.ui-btn-up-x{
	border: 1px solid 		#ccc;
	background: 			#eee;
	font-weight: bold;
	color: 					#444;
	background-image: -moz-linear-gradient(top, 
							#fefefe, 
							#eeeeee);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0, 		#fdfdfd),
		color-stop(1, 		#eeeeee));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd', EndColorStr='#eeeeee')";
}
...........

など、既存テーマの-a -bの部分を-xに変えればいいだけ。

    • 共通スタイルの上書きはtheme_x.css内でスタイルをもう一度定義してあげればいい。
      • 既存のデーマは使用せず、data-theme="x"を使うと宣言。もちろん x じゃなくてもいい。A〜Eまでが使われているので、xを使用しただけ。
        • 既存のCSSを上書きする形で、theme_x.cssを読み込む。
    • テーマの作成
.ui-bar-x {
	line-height:1.8;
}
.ui-body-x{

}
.ui-btn-up-x a.ui-link-inherit {

}
.ui-btn-down-x {
	border: 1px solid #225377;
	background: #4e89c5;
	font-weight: bold;
	color:#fff;
	background-image: -moz-linear-gradient(top,
	#396b9e,
	#4e89c5);
	background-image: -webkit-gradient(linear,left top,left bottom,
	color-stop(0,#396b9e),
	color-stop(1,#4e89c5));
}
.ui-btn-up-x{
	border: 1px solid #ccc;
	background:#eee;
	font-weight: bold;
	color:#444;
	background-image: -moz-linear-gradient(top,#fefefe,#eeeeee);
	background-image: -webkit-gradient(linear,left top,left bottom,
		color-stop(0,#fdfdfd),
		color-stop(1,#eeeeee));
}
...........

テーマの作成についてはjquery mobile日本語版の解説を参考。
http://dev.screw-axis.com/doc/jquery_mobile/components/lists/forms_inset/#/doc/jquery_mobile/api/theme_framework/

まだまだ、書かなきゃいけないことはありそうですが、気が向いたら書きます。