Thursday, June 21, 2012

Wink Toolkit入門 ~導入編~

こんにちは&はじめまして。
ニャンパス一味の土井(@exfreeter)です。
まだまだ駆け出しのプログラマですが、iOS向けアプリやClojureによるWebアプリをメインに開発しています。

このたび、清水君(@yuushimizu)のClojureの連載と並行してNyampass tech blogで記事を執筆することになりました。
慣れてくると言葉使いが崩れて関西弁になると思いますが、生暖かい目で見守って頂けると幸いです。

僕はObjective-CでiOS向けアプリを作ることが多いんですが、Javascriptで作りたいという方は多いと思います。
そこで、まずは「スマホ向けネイティブアプリをJavaScriptで作る」というテーマで書いていく予定です。(数回程度の予定)
これらの一連の記事を読めば、初歩的なネイティブアプリをHTML/CSS/JSだけで作れるようになるかも。

今回は、スマホWebサイト用のJavascriptフレームワークであるWink Toolkitの紹介および導入を解説したいと思います。
次回以降、Winkの豊富なエフェクトの紹介やPhoneGapによるWebサイトのネイティブ化などに進んでいく予定です。

では、早速はじめましょう。


Wink Toolkitとは?

一言でいうと、スマホ向けのサイトを作るためのJSフレームワークです。
似たようなものとしてjQuery MobilejQTouchなどがありますが、そのようなものだと思っていただければOKです。

恐らく、2012/06現在で一番勢いがあるのはjQuery Mobileだと思います。
ネット上の情報や関連書籍なども充実してます。

が、現状だと重いんですよね.....。
ニャンパスでも幾つかのフレームワークを試しましたが、結局はパフォーマンスを重視してWink Toolkitに落ち着きました。

Wink Toolkitの特徴は、軽さと豊富なエフェクト系UIです。
デモサンプルも豊富なので、これらを組み合わせるだけでスマホぽいUIのサイトが作れちゃいます。
具体的にどういうことが出来るかは、以下のURLから見ることが出来ます。(PCから見ても良いですが、スマホのブラウザで見るのをオススメします)


FacebookやPathのiOSネイティブアプリで見られる横スライド式のメニューや、スマホでは定番の「引っ張って更新」なんかもありますよね。
正直、「無駄にカッコいい」というレベルです。

Wink Toolkitの導入

では、早速Wink Toolkitを導入していきましょう。

まず、本家サイトからWink本体をダウンロードして下さい。(画面上部のdownloadsからダウンロードページに行けます)
とりあえず、ダウンロードページの一番上のリンクから最新版のZipを落としておいてください。(2012/06/21現在での最新版は1.4.2。以下、1.4.2を前提に進めます)

そのZipが上記デモページのソースになっているので、自信のある方はそれを見てゴニョゴニョやってるうちに使いこなせるようになるかと。

今回は初回ということで、デモの一番上にあるアコーディオンのページのソースを見るところまでにしましょう。

Zipを解凍したら、ui/layout/accordion/test/test_accordion_1.htmlをブラウザで開いてみてください。
3つのセクションを持つアコーディオンがありますね。
では、test_accordion_1.htmlのソースを見ていきましょう。

8行目と11行目でCSS、14行目でテーマ用のJS、19行目から36行目まででWinkのcoreのJS、39行目でアコーディオン用のJSをそれぞれ読み込み、41行目以降がこのページで使うアコーディオン等を具体的に作っているJSのコードになっています。
これが、Wink Toolkitの基本的な使い方になります。
また、core部分はwink.min.jsで代替可能です。(今回だとwink_1.4.2.min.jsですね)

CSSとJSがペアになっている点に注目して下さい。(8/14行目、11/39行目)
Wink Toolkitを使う場合、基本的に、hogehoge.jsを使う時にはhogehoge.cssも読み込む必要があります。
例えば、アコーディオンを使いたい時はaccordion.jsとaccordion.cssが必要だし、カルーセルを使いたい時はcarousel.jsとcarousel.cssが必要になります。
CSSを忘れることが多いので、注意して下さい。

以上、駆け足になりましたが、Wink Toolkitの導入でした。
詳しくは、本家のドキュメントを参照して下さい。
かなり分かりやすいと思います。

次回は、Wink Toolkitの豊富なエフェクトUIの中でも一際光る(と個人的には思っている)Facebookライクな横スライド式のメニューを紹介しようと思います。

No comments:

Post a Comment