Hatena::ブログ(Diary)

甘味志向@はてな RSSフィード



11年12月03日

jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。


JavaScript Advent Calendar 2011 オレ標準コース、2日目のもろへいやです。とても遅れてすいません…


私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。

今回は、アニメーションの話を書いてみます。


jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが出来ますよね。


$("#box").fadeIn("fast");

たった一行で、アニメーション効果を付加することができるので、

プログラマーのみならずデザイナーの方でもjQueryを使っている人は多いんじゃないかと思います。


しかし、簡単なおかげで何をするにアニメーション効果をかけまくってしまったり。

あるいはアニメーション効果なんて無駄! ということで、全然使っていない人もいると思います。

ですが、アニメーションは効果的に使うと非常に使いやすいサイト・アプリケーションを作ることができます。


フェードやスライドなど、こういった効果を「飾りつけ」に使おうとすると、いちいち要素が動く面倒くさいサイトになります。

これはデザインの本質だと私が考えていることですが、

デザイン・アニメーションというものは、ユーザビリティを向上させるために存在していると思います。


例えば、急に要素の表示・非表示を切り替えると、何も知らないユーザーは「あれ? いまどこが変わった?」と混乱してしまいます。

ここで0.5秒間でアニメーションするようにしてあげると、無意識にどこが変化しているのかを読み取ることができ、

ステータスの変化をユーザーが意識的に感じることができます。


さらに、文字列を変更させたボックス要素を一瞬だけハイライトさせてあげることで、注目を引いたり、アクションを起こさせるきっかけとしても使えます。


どうもJavaScriptによるアニメーション! というと、

CSS3によるTransition Effects 30 - くらげだらけ

こういう感じの派手な効果が注目されてしまいがちですが、何気ないウェブサイトにも小さなアニメーションを仕込むことで、

ユーザーが使いやすいサイトを作ることが出来ます。


デザイン面の話をJavaScript Advent Calendarのようなイベントでするのは気がひけるのですが、

サイトのデザインなどは、ウェブデザイナーさんがすることが多くても、

アニメーション効果までは関わってもらえないことほとんどだと思います。


そんな時に、プログラマー側でこういった簡単な知識を持っているだけで、全体のユーザビリティはかなり向上します。

いくらロジックが良くても、最終的にユーザーさんが使いやすいと思ってくれなければ意味がないので、ぜひそういった部分にも意識を向けてもらえればと感じます。



とまぁ、ここまでJavaScriptなしなので、ここからはJavaScriptの話をしたいと思います!


jQueryのアニメーションは、タイマーを使ってCSSパラメータを書き換えていく形で実装されているので、

IEなどでも動作しますが、複雑なアニメーションになってくるとやっぱり重いです。


カクカクな動作になってしまってはやっぱりダサいので、CSS3のTransition(Animation)を使って、なめらかなアニメーション効果を付加しましょう!


#box {
	-webkit-transition: width 1s linear;
	-moz-transition: width 1s linear;
	-o-transition: width 1s linear;
	-ms-transition: width 1s linear;
	background-color: red;
	width: 300px;
}

#box:hover {
	width: 500px;
}


CSSだけでアニメーションさせるときは上記のように、まず接頭辞付きでtransitonプロパティを記述します。

そしてアニメーションのトリガには、擬似セレクタを使うのが一般的です。

これを、JavaScriptでアニメーションを発火させるときは



	$("#box").css("width", "500px");

のように、普通にCSSのプロパティを設定します。

すると、既に#box要素にはtransitonの設定が記述されているので、JavaScript側で何か設定することなくアニメーションを行うことが出来ます。


しかしこのままでは、簡単なフェードやサイズ変更のときはよくても、複雑なアニメーションになってくると使い勝手が悪いですよね。

そこで、jQueryのプラグインを使うと便利です。

jQuery Animations with automatic CSS3 transitions when possible


これをロードすると、fade(In|Out)、slide(Up|Down)、animateメソッドを拡張してくれます。

あとは普通にjQueryのAnimateを使う時と同じようにすれば、自動的にCSS3のTransitonを使ってくれます。便利ですね!!


CSS TransitionはiOSデバイスで特に効果があります。

単純に非力なモバイルデバイスで、jQueryのアニメーションを使うとカクカクとした動作になってしまうんですが、

iOSのMobile SafariGPUアクセラレータが搭載されているので、ネイティブアプリ並のフレームレートでアニメーションします。


ちなみにiOSシミュレータを使えば、画面上でGPUアクセラレータが適用されている部分を可視化することが出来ます。


f:id:Molokheiya:20111203195317p:image


f:id:Molokheiya:20111203195316p:image:w200

赤くなっている部分に、GPU支援が効いている



と、こんな感じです。


プログラミングばかりしていると、どうしてもデザインには疎遠になってしまうことが多いと思いますが、

せっかくウェブサイト・ウェブアプリを作るんだったら、ユーザーさんに使いやすいと感じてもらえたほうがいいはずです。


ちょっとした工夫で、使いやすさの向上に繋がるので、ぜひやってみてください!

10年12月12日

iPhoneアプリをMobile Safariで作る



f:id:Molokheiya:20101212171549p:image



こんにちは! JavaScript Advent Calendar、12日目のid:Molokheiyaです!

ちょっとターゲットが絞られてしまうのですが、私はiOSに搭載されているSafariWebkitを使ってJavaScriptiPhoneアプリを開発するHow-Toを書いてみたいと思います。



ちなみにAdvent Calenderとはプログラマ有志が12/1から12/25までの間、毎日ブログ記事を書いていくという企画で師走風物詩みたいなものです!

今年の各言語のカレンダー一覧はこちらにまとめられているので要チェック!

本日12月1日より,プログラマ有志による技術系Advent Calendarが各所ではじまる:インフォメーション|gihyo.jp … 技術評論社



さて、まずiOSアプリの開発は何よりも敷居が高いのが特徴です。技術的な意味ではなく。


iOS SDKMac OSでしか動かないためMacを購入しないといけません。

以前はAppleの最凶規約により開発ツールどころか開発言語まで縛られていました。


これは、今年の9月に規約が緩和されサードパーティ製の開発ツールでも開発が可能になっています。

例えばAdobe Flash Professional CS5のPackager for iPhoneやMonoTouchなどですね。


ただ、ここまで頑張ってアプリを開発しても、iOS Developer Programに年間99ドルも払って登録しないと無料配布すら出来ません。なんてこったい!


本気で俺はiPhoneアプリを作りたいんだよ! って感じじゃないとき。

パッとコード書いて実機で動いて適当に動いてくれるアプリが書きたい、そんなときはSafariのWebkitを使いましょう!


--



とりあえず面倒な機能を切る


headに以下のView Portメタタグを挿入することで抑制します。

<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport"
<meta name="format-detection" content="telephone=no">


Viewportは仮想的なウィンドウサイズの指定で、最初にページを開いたときの拡大縮小率を指定できます。

この"width=480, maximum-scale=0.6667"という指定は"Holy Grail"と呼ばれており、iPhone画面を回転させても文字サイズが変わらない指定方法です。

もちろん自分の作成するアプリケーションによって変更してかまいません。

ユーザーに拡大縮小を許可するかどうかは"user-scalable"で指定します。

"format-detection"は、数字が勝手に電話番号として認識されてしまってリンクを貼られたりする機能を抑制します。



Safariっぽさを消す


Webアプリってあれでしょ、上下にアドレスバーとかツールバー出てるんでしょ。ダサーイ(笑)というのを避けるためにSafariっぽさを消します。

といってもコレには条件があって、一度Safariでページを開いたあとにツールバーからiPhoneのホーム画面にアイコンを登録して、そこから開いたときのみです。

最初にページを開いたとき、ユーザーに登録を促すように誘導しないといけません。(もちろん見栄えだけの問題なので登録しなくても問題はないのですが)


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="images/icon.png">
<link rel="apple-touch-startup-image" href="images/nowloading.jpg">

"apple-mobile-web-app-capable"をyesにすると、ページを全画面で表示します。

これでアドレスバーなどが表示されなくなります。


"apple-mobile-web-app-status-bar-style"は、ステータスバーの色を指定できます。

"default"(デフォルト) "black"(黒) "black-translucent"(黒半透明)です。


"apple-touch-icon"で、ホーム画面に表示するアプリのアイコンを指定します。

iPhoneアプリのアイコンはガラスがきらっと反射した感じになってますが、ここで指定した画像に自動的にオーバーレイで効果が掛かるので気にしなくて大丈夫。


"apple-touch-startup-image"を使えば、アプリをロードしている時間のスタートアップ画像を指定できます。



これをやると、見た目はほとんどネイティブアプリと変わらないところまで行きます。



やっとJavaScriptです


さて、ここからは中身です。

せっかくのiOSアプリなのでインターフェースもそれっぽくしたいですし、

何より自分でつくっていくのは面倒なのでライブラリを使わせていただきましょう。


いまぼちぼち使われているライブラリは



あたりでしょうか。

iUiやiWebKit等はiOS SDKのUIに似せたデザインで、jQTouchやjQuery Mobile等は独自にUIをデザインしている感じです。

この辺りは好みで。ただ、個人的には初心者はUIが統一されてるほうが分かりやすいんじゃないかなと思います。

私が以前アプリを作成したときはiUiを利用しました。



iOS Webkitでの開発


まず「設定 → Safari → デベロッパデバッグコンソール」で開発ツールをオンにしときましょう。

これでエラーの詳細が実機上で見られるようになります。


またiOSのWebkitではJavaScriptに独自イベントがたくさんあります。

せっかくタッチ出来る画面なんだから、addEventListenerでリッスンしておくとタッチ情報がバンバン飛び込んでくる感じになりますのでやりましょう。


document.body.addEventListener("touchstart",touchHandler,false);

function touchHandler(event) {
	num=event.touches[0];
	x=touch.pageX;
}

独自のイベントや属性等はあちこちに書いてあるので割愛しますが、タッチしている指の本数や座標・端末が回転したときなど、さまざまな情報が取得可能です。

Safari HTML Reference: Introduction


ダイアログが表示されますが、GPSとGeolocation APIで現在位置も取れます(navigator.geolocation.getCurrentPosition)まあダイアログが出るのはネイティブアプリでも同じですね。


さらにiOS4.2から加速度センサーの値まで取れるようになったので、canvasCSS3と組み合わせれば普通にゲーム作れると思います。すごいですね。


jQueryを使って開発する場合の注意点


jQuery使ってるし、せっかくだから俺は「$("body").bind("touchstart",touchHandler);」を選ぶぜ! という方。

touchHandlerは

	function touchHandler(event) {
	alert(event.touches[0]);
	}

と書きたくなるところですが、このままだと取れません。


	function touchHandler(event) {
	alert(event.originalEvent.touches[0]);
	}

これならOK!


--


とまあ、iOSのWebKitはかなり強力です。

ちょちょっと独自属性を追加してやるだけでユーザビリティが簡単に確保出来ますし、簡単なアプリならネイティブで開発するより楽チンだと思います。


また最近、JavaScriptでiOS/Androidアプリが開発出来るTitaniumも話題になっていますので、そちらの動向も目が離せません!

Home - Appcelerator | The Mobile First Platform





それでは、良い12月を!