to-R

jQuery Mobile スマートフォンサイトデザイン入門本日発売

2012-02-03T01:47:29Z

新著書「jQuery Mobile スマートフォンサイトデザイン入門」が本日発売されました！

本書は話題のフレームワーク「jQuery Mobile」の解説本です。

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

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

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

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

［書評］標準HTML5タグリファレンス

2012-01-16T04:33:48Z

標準HTML5タグリファレンスを献本いただき読んでみました。

本書は2011年5月にW3Cが発表した「最終草案」に基づき、HTML5のすべての要素についてサンプルコードと実行画面付きで解説されています(APIは含まれていません)。

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

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

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

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

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

Androidの場合のみbodyにclassを追加するJavaScript

2012-01-13T04:44:37Z

ちょっとした修正でAndroidだけCSSを変更しなくてはいけないことがあったのでAndroidの場合のみbodyにclassを追加するJavaScriptを書いてみました。

<body>
<script>
if(/Android/.test(window.navigator.userAgent)){
	document.getElementsByTagName("body")[0].setAttribute("class","android");
}
</script>

上記のようなJavaScriptをbodyの後に書いておくとAndroidの場合のみbody要素に「android」というclassが設定されます。

ライブラリ化するのも大げさなので、ちょっとした修正の際にコピペして利用してください。

CSS Nite ベスト・セッション2011 でベスト10セッションに選ばれました

2012-01-11T15:37:07Z

CSS Nite ベスト・セッション2011 で、昨年10月のCSS Nite in TAKAMATSU, Vol.5 「スマートフォン特集」で行った「jQuery Mobileでのサイト作成」がベスト10セッションに選ばれました。

昨年は個人的にjQuery Mobile三昧だっただけに凄く光栄です。

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

続：Androidブラウザでviewportのwidth指定

2012-01-06T02:06:22Z

１年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。

var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
	if(Math.abs(window.orientation) === 0){
		if(/Android/.test(window.navigator.userAgent)){
			if(!portraitWidth)portraitWidth=$(window).width();
		}else{
			portraitWidth=$(window).width();
		}
		$("html").css("zoom" , portraitWidth/320 );
	}else{
		if(/Android/.test(window.navigator.userAgent)){
			if(!landscapeWidth)landscapeWidth=$(window).width();
		}else{
			landscapeWidth=$(window).width();
		}
		$("html").css("zoom" , landscapeWidth/320 );
	}
}).trigger("resize");

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

サンプル

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

2011年のto-R人気エントリーTOP20

2011-12-28T02:06:49Z

今年も残りあとわずかということで、毎年恒例のto-Rでアクセスが多かったエントリーTOP20をご紹介。

2011年の特長として「ソーシャル」、「モバイル」に関する話題が多数はいっていますね。この流れは来年以降も続くと思います。

そういえば来年の2月3日に拙著「jQuery Mobile スマートフォンサイトデザイン入門」が発売されますので、そちらもよろしくお願いします。

Android2.2 とtransformのバグ

2011-12-27T06:13:27Z

Android2.2(Regza phone)で検証していると色々とバグと遭遇しました。

rotate3dに対応してない

次のようにrotate3dを利用して要素を回転させようとするとAndroid2.2 だけ回転されません。

div{
	width:50px;
	height:50px;
	margin:10px;
	-webkit-transform:rotate3d(0,0,0,45deg);
	transform:rotate3d(0,0,0,45deg);
	background:red;
}

サンプル

3D系のtransformが発生すると以降の要素でrotateがきかなくなる

次のようなHTMLがあったとして、

<div></div>
<div></div>
<div></div>
<div></div>
<div id="d3d"></div>
<div></div>
<div></div>
<div></div>

次のCSSを適応させると#d3d以降のrotate指定が無視されます。

div{
	width:50px;
	height:50px;
	margin:10px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	background:red;
}
#d3d{
	-webkit-transform:translate3d(0,0,0);
}

サンプル

CSS Nite back2basic #7「jQuery Mobile」に出演します

2011-12-27T04:18:59Z

2012年2月7日にCSS Nite back2basic #7「jQuery Mobile」を行ないます。

CSS Nite back2basic は平日の夜に行なわれる単発のセミナー。jQuery Mobileをテーマに以下のような内容についてお話いたします。

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

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

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

Web制作の現場で使う jQueryデザイン入門 10刷決定

2011-12-20T01:22:50Z

拙著「Web制作の現場で使う jQueryデザイン入門」の増刷が決定しました。

Amazon のBest Books of 2011に選ばれるなど多くの方にご愛読いただいて感謝感謝です。

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

Facebookの新プラグイン「フィード購読ボタン(Subscribe Button)」

2011-12-13T01:24:19Z

Facebookに新しいソーシャルプラグイン「フィード購読ボタン(Subscribe Button)」が追加されました。

このページの右側にある「フィード購読」というボタンが「フィード購読ボタン」です。これをクリックすると私のFacebookのウォールの内容があなたのニュースフィードに流れるようになるという機能です。

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

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

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

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

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

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

jQueryデザイン入門がAmazonの2011年Best Booksで11位に！

2011-12-12T22:40:21Z

拙著「Web制作の現場で使う jQueryデザイン入門」がAmazon Best Books of 2011のコンピュータ書籍で11位になりました！！

すでに発売して2年近くが経過しているに多くの方に愛読いただいていてうれしいです！

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

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

スマートフォンとposition:fixedのバグ

2011-12-06T20:25:17Z

iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。

Androidではuser-scalable=noが必須

<meta name="viewport" content="user-scalable=no" />

Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。

サンプル（user-scalable=noあり）
サンプル（user-scalable=noなし）

iPhoneでURLに#がついた状態だとバグる

iPhone(iOS5)でURLの末尾に#がついた状態でスクロールすると固定配置した要素が出たり消えたりします。

サンプル

ページ移動後もどってきたら位置がおかしい

iPhone(iOS5)で他ページに移動後、戻るボタンでページにもどると表示位置がずれてます。

サンプル（スクロール後リンク先に遷移してもどる）

あと、こういうのも見かけました。
user-scalable=noとposition: fixedを使用すると、-webkit-transformが動かなくなる

というわけで実務的にはほとんど使えない気がするわけです。

WiMAXのホームルータ（URoad-Home）を試してみた

2011-11-30T12:28:28Z

現在、WiMAXのホームルータ（URoad-Home）をテストユーザーとして試用させてもらってますので、その感想を。

URoad-Homeの詳しい仕様は製品ページを参考にしてもらうとして、サイズは写真のとおりです。iPhone4より少し大きく大きめの手帳と行ったサイズでしょうか？

ホームルータとあるとおり、通常の無線(最大10台の接続可能)以外に有線ポートが2基ついており、デスクトップPCなどでも利用ができます。

利用方法は電源を入れてちょっとまってWiFiランプが付けば利用できます。簡単すぎますね。

URoad-32C0CSと無線もちゃんと認識しています。初期設定のパスワードが全て数字なのでスマートフォンやゲーム機など入力が面倒くさいデバイスでも簡単に利用できそうです。

ちなみに、電源口がマイクロUSBなのでMacBook Airからの給電で利用できるかなと試してみたところ残念ながら利用できず、コンセントは必須のようです。

では早速速度チェック！！11月22日（火）の朝１０時くらいです。

有線スピードテストでチェックです。

まずは家の光回線。当然、15.834Mbpsと高速。

次はWiMAX、5.522Mbps。なかなかの速さ。

次は個人所有のE-Mobile。5.409Mbps。

WiMAXはE-Mobileよりすごく高速というイメージだっただけにちょっと残念な結果に。

日を改めて11月30日の21時と一番の混雑時間にも測定してみました。

次はYahoo Speed checkerを利用。

まずは家の光回線。当然、19616Kbps。

次はWiMAX、1987Kbps。

次は個人所有のE-Mobile。1623Kbps。

すこしWiMAXは上りが弱いみたいですね。

光が速いのは当然としてWiMAXとE-Mobileは速度としてどっこいどっこいな感じです。特に途切れること泣く利用できます。E-Mobileは通信制限があるのでそれを超える場合や有線ポートを利用したい場合で、回線引くのがめんどくさい場合には選択しとしてアリですね。

WiMAX ファミ得パックとかと合わせて利用するのを想定すれば、お得に利用できる人も多いかも。

67WS で集中特訓！スマートフォンサイト制作術を開催

2011-11-26T00:43:30Z

12月19日に67WS で集中特訓！スマートフォンサイト制作術を開催します。

前半では私がHTMLやCSS3、JavaScriptを利用したスマートフォン実装についてお話しします。後半はたにぐちまことさんがサーバーサイドでCake PHPとjQuery Mobileを利用したスマートフォンサイトの構築についておはなしします。

興味がある方はぜひチェックしてみてください。

SwapSkillsでFacebookのOGPについてお話しします。

2011-11-26T00:30:44Z

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

OGPやソーシャルプラグインを利用してWebサイトとFacebookを連携させる方法を色々とお話する予定です。

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

jQuery逆引きマニュアルの増刷が決定(4刷)

2011-11-17T01:19:41Z

拙著「jQuery逆引きマニュアル」の増刷が決定しました。

本著はjQueryを利用したWeb制作の様々な知識を体系的に学べるように構成されており、121のトピックスについて解説しています。(トピックスの詳細はこちら)

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

続:Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する

2011-11-16T23:03:59Z

「Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する」を書いた後、さまざまなコメントを頂いて、その中に正解な対応方法があったのでご紹介。

まずはXcodeを立ち上げ、「Preferences」を選択。

「Downloads」の「Componets」に「iOS 4.3 Simulator」というのがあるのでそいつをinstall。

メールアドレスを聞かれるのでデベロッパ登録(無料)したメールアドレスを記入。

これでiOSシミュレータからiOS4.3.2に切り替えることができるようになります。

Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する

2011-11-13T18:31:02Z

作業環境をMac OS X 10.6 Snow LeopardからMac OS X 10.7 Lionにアップデートしたので、Xcodeのバージョンも3.2.6から4.2にアップデートしました。ちなみにXcode 4.2からまた無料でインストールできるようになっています。（続:Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用するも参考にしてください。）

Xcode4.2のiOSシミュレータを立ち上げた所、バージョンの切り替えがiOS5のみで他のバージョンを選択できません。

古いバージョンのiOSシミュレータを立ち上げようと色々探しているとHDに「Developer-3.2.6」というフォルダが！

以下の箇所にiPhone4.3以下のiOSシミュレータが格納されており、立ち上げることができます。

Developer-3.2.6/Platforms/iPhoneSimulator.platform/Developer/Applications/iOSシミュレータ.app

※既にXcode4.2のiOSシミュレータが立ち上がっている場合は終了してから立ち上げてください。

「Developer-3.2.6」など古いXcodeのディレクトリが存在しない方は次の記事を参照
H2O Blog., iOS 4以前の iOS Simulatorをインストールするには

Xcode4.2のiOSシミュレータにバージョンの変更を追加したい場合は次のつぶやきを参照
https://twitter.com/#!/h2ham/status/135954013102424064

display:noneの要素にGoogle Mapsを貼り付ける

2011-11-10T11:27:05Z

「jQuery逆引きマニュアル」の読者の方から、「タブパネルにGoogle Maps APIを掲載すると、ポイントが真ん中に表示されず、左上にずれて表示されます」と質問を受けました。

書籍ではタブパネルの作成方法のみを解説しており、Google Maps部分は読者の方の応用ですが、次のような方法で解決可能です。

基本的にGoogle Maps APIをdisplay:noneの要素に貼り付けるそのような状態(ポイントが真ん中に表示されず左上にずれる)になります（１度キャッシュされるとちゃんと表示されると思います）。

サンプル

そいうった場合はdisplay:blockにするタイミングで次のような命令を行うとちゃんと表示されるようになります。

 google.maps.event.trigger(map, 'resize');
 map.setCenter(myLatlng);

サンプル

jQuery MobileやThickBoxを使ってる場合は次のような方法でも対応可能です。

jQuery Mobileのマークアップの基本とCSSの変更 Googleマップの設置
 Google MapをThickBox上に表示する方法 - とあるWEBクリエイターのblog

Re:jQueryでセレクタを再指定する方法

2011-11-09T18:27:57Z

ネタ元：jQueryでセレクタを再指定する方法: 小粋空間

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

※2011/11/10 $(foos)って間違ってない?という指摘を受けて訂正、jQueryオブジェクトを再評価する必要ないですね。
※2011/11/11 aをクリックした際にも変化するよと指摘を受けて修正、eqメソッドがjQuery1.4からマイナスにも対応してたんですね。

(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。最近ですとこいつでチェックボックスにチェックが入っているかどうかがチェックできます。

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

background-sizeとグラデーション

2011-11-07T08:16:33Z

WebKitでbackground-sizeとグラデーションを合わせて利用しようとした所、どうも思い通りにいきませんでした。

まずはちゃんと表示できるパターン。

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の第２値を省略した場合、高さの算出方法がよくわからないですよね。

jQuery MobileでAjaxで取得したページでスタイルシートを反映させる

2011-11-03T15:06:54Z

リクリのセミナーでjQuery MobileでAjaxで取得したページのスタイルシートが反映されないとの質問を受けました。

イメージとしてはこんな感じだと思います。

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)

第6回リクリセミナー『スマートフォン向けサイト制作の「これから」を考える』が終了しました

2011-11-01T23:48:33Z

先日大阪で開催された第6回リクリセミナー『スマートフォン向けサイト制作の「これから」を考える』が終了しました。

私は「スマートフォンとjQuery」と題しまして、jQuery Mobileの利用方法やフリックギャラリーの実装について解説を行ないました。

みなさんjQuery Mobileに興味があるものの、活用方法について悩んでいる方が多かったので私のお話が何かのお助けになれば幸いです。

jQuery Mobileは「使いどころ」を間違えると非常に使いにくいツールになってしまいますが、「使いどころ」さえ合えばWeb制作を強力にサポートしてくれるツールです。必要な際にチョイスできるように事前に何ができるかをチェックしておくことお勧めします。

ASCII.jpでの連載「jQuery Mobileデザイン入門」も佳境に迫ってきておりますので是非チェックしてみてください。

ちょうどセミナーの前日に「ThemeRoller for jQuery Mobile」が公開されました。セッション中でも紹介しましたが結構良い感じのツールですのでぜひ試してみてください。

［書評］ iPhone & Android スマートフォンサイト制作の教科書

2011-10-25T11:16:33Z

iPhone & Android スマートフォンサイト制作の教科書を献本いただきました。ありがとうございます。

本書は iPhone、Androidでのサイト制作について様々な視点で解説がされています。

スマートフォン本では「iPhone+Android スマートフォンサイト制作入門（マカロン本）」や「HTML5+CSS3で魅せるiPhoneサイト」などの良書がありますが、これらがサンプルサイトを作成しながら解説を進めているのに対して、本書はサンプルサイトはなく淡々と解説が進みます。スマートフォンサイト作成に必要な知識が網羅されており、サンプルサイトに振り回されない分、解説フローも整っていてテンポもよいです。１度でもスマートフォンサイトを作成したことがある人は非常に読みやすいのではないでしょうか？

後半のJavaScript部分からは一気にマニアックになって、jQuery Mobileを利用したGoogle Mapの表示やTwitterのタイムライン表示が書かれています。

構成は次のような感じ

序章　スマートフォン向けサイト制作をはじめる前に
第1章　スマートフォン制作のための基礎知識
第2章　制作・テスト環境のセットアップ
第3章　スマートフォンサイトの企画、構造設計
第4章　スマートフォン向けのパーツ制作
第5章　HTML5による実装
第6章　CSS3によるレイアウトと装飾
第7章　JavaScriptを使ったインタラクション
第8章　フレームワークやオーサリングツールを使ったサイト制作
第9章　パフォーマンスの最適化
付録　スマートフォン各機種　画面解像度一覧表

スマートフォンサイト作成に興味がある方にオススメの一冊です。

Web制作の現場で使う jQueryデザイン入門 9刷決定

2011-10-20T05:25:58Z

拙著「Web制作の現場で使う jQueryデザイン入門」の増刷が決定しました。

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

[ASCII.jp]jQuery MobileのCSSを変更してテーマをカスタマイズ

2011-10-18T19:26:41Z

jQuery Mobileデザイン入門の第10回「jQuery MobileのCSSを変更してテーマをカスタマイズ」が公開されました。

今回はCSSを数行追加してオリジナルカラーのテーマを作成するという内容です。jQuery Mobileを手軽に利用したい、けどオリジナリティも出したいという際に重宝するかと思います。

Softbank「iPad 2が月額料金0円キャンペーン」のOGP設定がいい感じ

2011-10-07T05:45:42Z

ついにiPhone4Sが発表されましたね。これに合わせてSoftbankでは「iPad 2が月額料金0円キャンペーン」を行ってます。

このキャンペーン自体お得なのかどうかよくわからないのですが、Facebookでこのページのアドレスがシェアされているのを見ていると、かなりおしゃれなOGPの使い方をしていました。

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

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

CSS Nite in TAKAMATSU, Vol.5が終了しました。

2011-10-03T05:55:22Z

先日、高松で行なわれた「CSS Nite in TAKAMATSU, Vol.5」が終了しました(撮影はサン・スタジオ鍋坂樹伸さん )。

私は「jQuery Mobile」についてお話させていただきました。

jQuery Mobileについては「西畑一馬のjQuery Mobileデザイン入門」という連載を行っており、「第8回実例で学ぶjQuery MobileのCSSカスタマイズ」からはセミナーでもご紹介した鍋坂さんデザインのフルカスタマイズバージョンの詳細な解説にです。jQuery Mobileのカスタマイズ方法だけでなくCSS3を利用した様々なTIPSも紹介しておりますので、興味が有る方はご覧いただけたらと。

セミナーでもお話ましたがjQuery Mobileは使いどころさえ間違わなければ非常に有用なツールです。必要な際に選択肢としてjQuery Mobileを選べられるようにぜひ一度触ってみてください。

あと、アンケートでGoogleマップは静的APIでとってきてリンクを張っては(a-blog CMS方式)？という意見をいただきました。当然その方法でも大丈夫です。スマートホンサイトの場合、Googleマップへのリンクというのは非常に重要なのでやったほうがよいと思います。(Google MapではなくGoogle Mapsではとご指摘もいただきました。そうですね、ありがとうございます！)

スマホ専門サイトは必要なの?

もうひとつアンケートでいただいた質問に「スマホ専門サイトは必要なの?」という質問がありました。PC用のサイトがある場合にスマートフォンに最適化した別サイトを用意する必要があるのかないかということですが、非常にむずかしい問題です。

まず、アクセス解析などでスマートフォンからほとんどアクセスがない場合やあっても少しの場合は現時点では必要ないでしょう。

ある程度、スマートフォンからアクセスがある場合、用意したほうがいいと思っています。

ただ、プライオリティは適切に判断しなくてはいけません。PC向けで改善点が残っているのにスマートフォン対応するや、ガラケーユーザーのほうが多いのにスマートフォン対応を先にするなどはナンセンスです(将来を見据えてするのはアリですが)。

Flashなどを利用している場合をのぞいてスマホではPC用サイトが閲覧可能です。その上でスマホユーザーに対して、よりよいユーザー体験を提供するという性質上プライオリティは低いのではないかと思います。

そのため、最終的にはサイトを分析して、必要か必要ないかを判断する必要があります。

最後になりましたが、CSS Nite in TAKAMATSUの運営の皆さま、一緒に講演させていただいた皆さま、そして参加された皆さま、お疲れ様＆ありがとうございます！

[ASCII.jp] 実例で学ぶjQuery MobileのCSSカスタマイズ

2011-10-03T05:46:06Z

jQuery Mobileデザイン入門の第8回「実例で学ぶjQuery MobileのCSSカスタマイズ」が公開されました。

今回からは実践編ということで、より一般のサイトに近いデザインをjQuery Mobileに適応していっております。

CSS3に関してはかなりテクニカルなTIPSも利用しておりますので、jQuery Mobileに興味がない方もCSS3の箇所ではお楽しみいただけるのではと思っておりますので、興味がある方はぜひご覧になってください。

CSS Nite LP, Disk 18「その先にあるjQuery」が終了しました

2011-09-18T09:54:50Z

CSS Nite LP, Disk 18「その先にあるjQuery」が終了しました。　

私は「jQuery高速化」についてお話させていただきました。

jQueryやJavaScriptを利用した案件では、複雑になってくるとどうしても高速化が必要になります。昔はIE6やIE7で悩まされていましたが、最近ではAndroid2.1やiPad1などの低スペックデバイスが悩みのタネになっております。

セッション内でお話させていいただいた内容はセオリーではありますが、ベストプラクティスではありません。最後にお話ししましたがベストプラクティスは案件や対応デバイス、目的等により常に変わってきます。みなさんが高速化が必要になったとき私の話が試行錯誤のお役に立てば幸いです。

また、拙著「JavaScriptコーディングベストプラクティス(共著/MdN)」内でも高速化に関する様々な内容を紹介しておりますので興味がある方は参考にしてください。

セッション中で事例として紹介したアプリとサイトです。

エクストラコールドアプリ - Android マーケット
 ZAQ

また、補足までに徳田さんのセッションで紹介されていた「jQuery Templates」についてです。
jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive

to-R

jQuery Mobile スマートフォンサイト デザイン入門 本日発売

［書評］標準HTML5タグリファレンス

関連エントリー

Androidの場合のみbodyにclassを追加するJavaScript

関連エントリー

CSS Nite ベスト・セッション2011 でベスト10セッションに選ばれました

関連エントリー

続：Androidブラウザでviewportのwidth指定

関連エントリー

2011年のto-R人気エントリーTOP20

関連エントリー

Android2.2 とtransformのバグ

rotate3dに対応してない

3D系のtransformが発生すると以降の要素でrotateがきかなくなる

CSS Nite back2basic #7「jQuery Mobile」に出演します

Web制作の現場で使う jQueryデザイン入門 10刷決定

関連エントリー

Facebookの新プラグイン「フィード購読ボタン(Subscribe Button)」

jQueryデザイン入門がAmazonの2011年Best Booksで11位に！

関連エントリー

スマートフォンとposition:fixedのバグ

Androidではuser-scalable=noが必須

iPhoneでURLに#がついた状態だとバグる

ページ移動後もどってきたら位置がおかしい

関連エントリー

WiMAXのホームルータ（URoad-Home）を試してみた

67WS で集中特訓！スマートフォンサイト制作術を開催

SwapSkillsでFacebookのOGPについてお話しします。

jQuery逆引きマニュアルの増刷が決定(4刷)

続:Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する

関連エントリー

Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する

関連エントリー

display:noneの要素にGoogle Mapsを貼り付ける

関連エントリー

Re:jQueryでセレクタを再指定する方法

関連エントリー

background-sizeとグラデーション

jQuery MobileでAjaxで取得したページでスタイルシートを反映させる

第6回リクリセミナー『スマートフォン向けサイト制作の「これから」を考える』が終了しました

［書評］ iPhone & Android スマートフォンサイト制作の教科書

Web制作の現場で使う jQueryデザイン入門 9刷決定

関連エントリー

[ASCII.jp]jQuery MobileのCSSを変更してテーマをカスタマイズ

関連エントリー

Softbank「iPad 2が月額料金0円キャンペーン」のOGP設定がいい感じ

CSS Nite in TAKAMATSU, Vol.5が終了しました。

[ASCII.jp] 実例で学ぶjQuery MobileのCSSカスタマイズ

関連エントリー

CSS Nite LP, Disk 18「その先にあるjQuery」が終了しました

関連エントリー

jQuery Mobile スマートフォンサイトデザイン入門本日発売