Friday, June 29, 2012

Wink Toolkit入門 ~エフェクト編~

こんにちは。
ニャンパス一味の土井(@exfreeter)です。

ちょっと間が空きましたが、僕は元気です。
前回の続きで、Wink ToolkitのウリであるエフェクトUIを紹介・解説していきます。

が、Wink Toolkitが提供しているUIは多岐にわたるため、その全てを1つのブログ記事で紹介することは到底出来ません。
今回は、特にスマホ的なUIである「Facebookライクな横スライドメニュー」と「引っ張って更新」の2つに絞って紹介することにします。

これらを実装することで一気にスマホらしいUIになりますよ。


Facebookライクな横スライドメニュー

FacebookのiOSネイティブアプリで導入されてから一気に広まった印象があります。
Facebook、Path、Google+、Yammerといった米国の有名スタートアップのアプリが採用していますし、日本のアプリでも増えてきているようです。

デモはこちら(Wink Toolkitのkitchensink。左上のボタンをタッチしてみて下さい。スマホのブラウザ推奨)



使い方等はKitchensinkのソースを見てもらうのが一番早いです。
左上のボタンを押した時に呼ばれるks.options.toggleメソッドが肝ですね。
Chromeの開発ツールか何かで見てもらうと、何をしてるかはすぐ分かると思います。

あの短いコードの中でアニメーションの仕方まで指定していて(ease-in-outの部分)、Winktoolkitの底力を感じられるのではないでしょうか。

引っ張って更新(Scroll To Refresh)

iOSのネイティブアプリでは非常にポピュラーなUIですよね。
iPhoneユーザーであれば一度は見たことがあるはずです。

Objective-Cを使ったネイティブアプリ開発では「Pull Refresh」とか「Pull To Refresh」とか呼ばれてますが、Wink Toolkitでは「Scroll To Refresh」というようです。

デモはこちら(Winkのデモページの一部です。スマホのブラウザ推奨)


使い方は、
http://www.winktoolkit.org/documentation/symbols/wink.plugins.ScrollToRefresh.html
を参照して下さい。

詳しいサンプルコードがあるので、分かりやすいかと。
文言やローディングの指定はお好みで。
サンプルでは引っ張った時と離した時の2つのコールバック関数はダミーになってます。

もしくは、デモの該当するページのソースを見るのも良いでしょう。


2つ紹介するだけでもそれなりの分量になってしまいましたが、まだまだイケてるエフェクトはたくさんあるので、自分で色々探してみてください。
個人的に「無駄にカッコイイ」と思うのは、SharingWheelというエフェクトかなぁ。

次回は、PhoneGapの導入を紹介したいと思います。

No comments:

Post a Comment