jQuery Mobileの基本的な使い方やCSS3を利用したコードなカスタマイズについて解説しています。

CSS3の様々なTIPSを織り交ぜて解説をしていますので、jQuery Mobileに興味がなくてもCSS3のカスタマイズパートだけでも楽しめるかと思います。

JavaScriptに関してはGoogle Maps APIの張りつけや、タブパネルの実装などよく使いそうなものだけを紹介していますので、jQuery MobileとJavaScriptで高度なアプリを作りたいなどと思っている方にはご期待に添えないと思います。

興味があるかたはぜひチェックしてみて下さい。

各要素が対応しているブラウザや親要素にできる要素、子要素に使える要素、読み方なども掲載されており、仕事中でアレってどうだっけと悩んだ際に重宝するのは間違いないです。

すでにXHTMLなどを書いてる人もHTML5の全体像をつかむのに一度ざっと読んでみるのにはいいですね。

タグリファレンスして毎日使われることが想定されており、かなり軽い紙を利用しており分厚いのに400g程度（持った感触かなり軽いです）。また、表紙には革の風合いを表現した「クロコ」を使っていてかなり本物の辞書っぽい装飾。

また、購入者限定のスマートフォン用Webアプリも公開されており通勤の際などのちょっとした空き時間に読むことも可能です。（これが凄くいいと思う）

HTML5に興味がある人にはオススメの一冊です。

関連エントリー

[書評]Webデザイナー/コーダーのための HTML5コーディング入門
[書評] HTML5+CSS3で魅せるiPhoneサイト
[書評]CSS3 スタンダード・デザインガイド
[書評]CSS3デザイン プロフェッショナルガイド
[書評]iPhone+Android スマートフォンサイト制作入門

今年も「CSS Nite back2basic #7「jQuery Mobile」」での講演や、著書「jQuery Mobile スマートフォンサイト デザイン入門」の発売とjQuery Mobileな感じが続きますがよろしくお願いします！

関連エントリー

jQueryデザイン入門がAmazonの2011年Best Booksで11位に！
jQueryデザイン入門が紀伊國屋書店BookWebのランキングで1位に

こんな感じにするとほとんどのスマートフォンで横幅320pxに表示することができます。

サンプル

1点 Facebookのいいねボタンが設置されているサイトでは上記のスクリプトでも表示がおかしくなります(いいねボタンがresizeイベントでviewportをいじっている為)。そういった場合はいいねボタンをiframeモードで設置するとちゃんと動作するようになります。

関連エントリー

スマートフォンサイトをデザインする上で知っておくべき10のTIPS
Android2.2 とtransformのバグ
スマートフォンとposition:fixedのバグ
AndroidとjQueryのスライドアニメーションの不具合
Androidのposition:absoluteとフォームの問題

• jQuery Mobileの使い方がわかる
• jQuery Mobileでできるさまざまな表現がわかる
• ThemeRollerの使い方がわかる
• CSSのカスタマイズ方法がわかる

jQuery Mobileについて興味がある方は是非ご検討ください。

2月3日に発売される拙著「jQuery Mobile スマートフォンサイト デザイン入門 」をお持ちいただけるとより深く理解できるかなと思います。

これからjQueryを始めたい！jQueryに興味がある！という方にはお勧めの一冊です。jQuery本ではめずらしいフルカラーになっておりますので楽しく学んでいただけると思います。年末年始のお勉強のお供にぜひチェックしてみてください。

関連エントリー

jQueryデザイン入門がAmazonの2011年Best Booksで11位に！ Web制作の現場で使う jQueryデザイン入門 9刷決定
Web制作の現場で使う jQueryデザイン入門 8刷決定 1万5千​部突破
Web制作の現場で使う jQueryデザイン入門 6刷決定
Web制作の現場で使う jQueryデザイン入門 5刷決定
Web制作の現場で使う jQueryデザイン入門 4刷決定
jQueryデザイン入門が紀伊國屋書店BookWebのランキングで1位に
Web制作の現場で使う jQueryデザイン入門 3刷決定
Web制作の現場で使う jQueryデザイン入門が増刷、ネットショップでの販売が再開
Web 制作の現場で使う jQueryデザイン入門 発売開始。

　そもそも、フィードって何？というところから説明すると今年(2011年)の9月にFacebookに新しく搭載された機能で、他の人の投稿(ウォール)を購読(ニュースフィードに流す)することが可能になります。

　これまでFacebookでは知り合い以外の友だち申請を規約で禁止していました。しかし気になるあのひとの投稿の内容を知りたいというニーズは強く、結果として知り合いじゃないけど友だち申請するという行為が発生しました。それを解決するのが友だち申請しなくても投稿が購読できる「フィード購読」の機能です（ただし購読するには投稿主がフィード配信を許可している必要があります）。イメージとしてはTwitterに近い感じです。

　「フィード購読」自体は気になるあの人のFacebookのページの右上に「フィードを購読する」というボタンがあればそこから簡単にできますが、「フィード購読ボタン」をサイトに設置することで、他の人がサイトから簡単にあなたのフィードを購読することが可能になるわけです。

　設置方法は簡単、「Subscribe Button」でコードを発行してサイトに貼り付けるだけです。次のような3つの形状のボタンを貼ることができます。

　興味がある方はぜひ試してみてください。

--

　こういったFacebookの新しいプラグインやOGPについてのお話を明日（2011年12月14日）、アップルストア銀座 で行ないますので興味があるかはた是非お越しください。無料ですよ。

これからjQueryを始めたい！jQueryに興味がある！という方にはお勧めの一冊です。jQuery本ではめずらしいフルカラーになっておりますので楽しく学んでいただけると思います。

興味がある方は年末年始の宿題用にぜひご購入ください！

関連エントリー

Web制作の現場で使う jQueryデザイン入門 9刷決定
Web制作の現場で使う jQueryデザイン入門 8刷決定 1万5千​部突破
Web制作の現場で使う jQueryデザイン入門 6刷決定
Web制作の現場で使う jQueryデザイン入門 5刷決定
Web制作の現場で使う jQueryデザイン入門 4刷決定
jQueryデザイン入門が紀伊國屋書店BookWebのランキングで1位に
Web制作の現場で使う jQueryデザイン入門 3刷決定
Web制作の現場で使う jQueryデザイン入門が増刷、ネットショップでの販売が再開
Web 制作の現場で使う jQueryデザイン入門 発売開始。

12月14日にSwapSkillsでFacebookのOGPについてお話しします。

Apple Storeの無料イベントですので興味がある方はお気軽にお越しください。

興味がある方は、ぜひ書店などで手に取っていただけたらと思います。

なんとなく呼ばれた感じがしたので添削というか、私ならこう書くかなというところで。

(function($){
	$(document).on("change","input.foo",function(){
		var foos = $("input.foo");
		var index = foos.index(this)
		if(index>0){
			var prevInput = foos.eq(index-1);
			if($(this).prop("checked")){
				prevInput.attr('checked','checked');
			}else{
				prevInput.removeAttr('checked');
			}
		}
	});
})(jQuery);

サンプル (変更前)

元ネタは一つ前のinput要素にチェックを付けるだけなんだけどもチェックを外す機能も付けておきました。

ポイントは次の点。

DOM READYイベントは必要な時しか利用しない

$(function(){...});のDOM READYイベントはHTMLが全て読み込まれてから実行されるので処理が少し遅いです。必要ないときは利用しないようにしましょう。スコープが必要な場合は(function(){...})()を利用するとよいです。jQueryオブジェクトとして$ではなくjQueryを利用したい場合は(function($){...})(jQuery)としておくことでコードなかでは$としてjQueryなjQueryオブジェクトを利用することができます。

イベントはデリゲートする

元ネタでは$(".foo")にchangeイベントを設定している都合上「DOM READY」イベントが必要になってきます。ただし、これは「DOM READY」にバインドしてから指定の要素にバインドするといった具合に無駄なプロセスが発生しています。delegateメソッド改めonメソッド(jQuery1.7から登場)を利用してイベントをバインドしましょう。documentにバインドすればDOM READYを待たずにイベント設定が可能です。

DOM構造の変化に柔軟に対応できるよう

元ネタでは.parent().parent().prev().find(".foo")といった感じで親の親の次の中にある.fooといった具合にDOM構造に依存した形で要素の検索を行っています。ここはシンプルに一個前の「.foo」として要素を検索しましょう。そうするとDOM構造が変化しても「.foo」のルールさえ変わらなければ検索可能です。

var prevInput = foos.eq(foos.index(this)-1);

propメソッドでcheckedかチェック

jQuery1.6で追加されたのものの意外と知られていないマイナーメソッドのporp。最近ですとこいつでチェックボックスにチェックが入っているかどうかがチェックできます。

こんな感じでどうでしょうか?

関連エントリー

jQuery基礎文法最速マスター
jQueryを良くする25のTIPS
jQueryのコードを良くする5つのTIPS
8のjQueryのすごいTIPS

body{
	background-image : -webkit-gradient(linear, left top, right top , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px;
	background-size:11px;
	background-repeat:repeat
}

こう行った感じで背景にストライプを描画しようとしています。

サンプル

これは「left top」から「right top」へのグラデーションですが、これを横向き、つまり「left top」から「left bottom」に変更するとグラデーションが描画されません。

body{
	background-image : -webkit-gradient(linear, right top, right bottom , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px;
	background-size:11px;
	background-repeat:repeat
}

サンプル

困ったと色々と試しているとbackground-sizeの第２値を省略せずに記述するとちゃんと描画されるようになりました。

body{
	background-image : -webkit-gradient(linear, right top, right bottom , 
			from(rgba(255,255,255,0)), 
			color-stop(90%,rgba(255,255,255,0)), 
			color-stop(91%,#c7daf2), 
			to(#c7daf2));
	-webkit-background-size:11px 11px;
	background-size:11px 11px;
	background-repeat:repeat
}

サンプル

たしかにグラデーションでbackground-sizeの第２値を省略した場合、高さの算出方法がよくわからないですよね。

index1.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title>jQuery Mobile</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
	<link rel="stylesheet" href="style1.css">
</head> 
<body> 
<section id="page1" data-role="page">
	<header>
		<h1>page1</h1>
	</header>
	<a href="index2.html">page2</a>
</section>
</body>
</html>

style1.css

#page1{
	background:blue;
}

index2.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title>jQuery Mobile</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
	<link rel="stylesheet" href="style2.css">
</head> 
<body> 
<section id="page2" data-role="page">
	<header>
		<h1>page2</h1>
	</header>
	<a href="index1.html">page1</a>
</section>
</body>
</html>

style2.css

#page2{
	background:blue;
}

サンプル

こういった構成の場合、index2.htmlが表示された際にstyle2.cssの内容が反映されません。

これはjQuery MobileではデフォルトのAjaxを利用したページ遷移では、遷移先のHTML(index2.html)からdata-role属性「page」がついた箇所のみをAjaxで取得し、遷移元のHTML(index1.html)内に挿入して表示します。そのため、index2.html内のlink要素はページ内に反映されません。

対応として、少し邪道ですがlink要素をページ要素内に記述することでページ読み込み時にスタイルシートも読み込むことが可能になります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title>jQuery Mobile</title>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
</head> 
<body> 
<section id="page2" data-role="page">
	<link rel="stylesheet" href="style2.css">
	<header>
		<h1>page2</h1>
	</header>
	<a href="index1.html">page1</a>
</section>
</body>
</html>

サンプル(index1.html)

ただ、jQuery Mobileを利用する場合は、全てのHTMLファイルが遷移元になる可能性を想定しないとだめでしょう。上記の例ではindex2.htmlをランディング ページと想定した場合index1.htmlでlink要素で指定しているスタイルシート(style1.css)が読み込まれません。

サンプル(index2.html)

jQuery Mobileで利用するスタイルシートは全てのページで読み込んでおくのが間違いがない方法です。

<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css">

サンプル(index1.html) / サンプル(index2.html)

Amazonや楽天でも多数のレビューをいただいてますので購入を検討されている方は参考にしてみてください。

関連エントリー

Web制作の現場で使う jQueryデザイン入門 8刷決定 1万5千​部突破
Web制作の現場で使う jQueryデザイン入門 6刷決定
Web制作の現場で使う jQueryデザイン入門 5刷決定
Web制作の現場で使う jQueryデザイン入門 4刷決定
jQueryデザイン入門が紀伊國屋書店BookWebのランキングで1位に
Web制作の現場で使う jQueryデザイン入門 3刷決定
Web制作の現場で使う jQueryデザイン入門が増刷、ネットショップでの販売が再開
Web 制作の現場で使う jQueryデザイン入門 発売開始。

このように画像にシンプルなキャッチコピーを置くことで、結構目立つような表示になっております。

ついつい「iPad 2が月額料金0円キャンペーン」などの主題を入れてしまいがちですが、タイトルにも表示されることを考えるとシンプルなキャッチコピーだけというのは参考にしたい手法ですね。