Warning: Undefined array key "HTTP_USER_AGENT" in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/other/tiny-fixed.php on line 75
iPhoneやAndroidなどの人気の
スマートフォン向けのJavascript製
フレームワーク・wink toolkitを触っ
てみました。動作サンプルが豊富
で割と応用できそうだったので日本
語でサンプルを作ってみました。
スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。
Wink Toolkit
スマホ向けのWebアプリ用JavaScript製フレームワークです。
動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。
[note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。[/note]
サンプル
※Androidも動くらしいですが、僕が持っていないのでiPhone以外は動作確認していません。
サンプルにアクセスすると以下のような画面になります。
結構な数のサンプルが用意されているのですが、ここでは一部ご紹介したいと思います。
アコーディオン
アコーディオンコンテンツです。タップで開閉します。
ページめくり
ページめくりです。フリックすると本をめくるようなアニメーションエフェクトで次のコンテンツに進むことが出来ます。ナビゲーションリンクもあります。これはAjax等で別のURLを読み込んでいるのではなく、単純にdiv要素間の移動時にエフェクトを加えたものになります。
ページめくりを記憶するハッシュリンク対応があるのですが、iPhoneでは動作しません。デモでは動いてるんですけどね・・
モーダルウィンドウ
スムーズに動作するモーダルウィンドウです。アイコンをタップするとアイコンがズームしながらフェードアウトし、ボックスが表示されます。ボックス内をスクロール可能にすることも出来ます。
タブ
ページ推移不要のタブコンテンツです。これは結構使い道があるのでは。ページめくり同様、ハッシュリンク対応が動作しません。
スライドパネル
タップでサイドに移動するスライドパネルです。ページを指定する事も可能です。ページめくり同様、ハッシュリンク対応が動作しません。
フォームのUI
フォーム用のインターフェースです。キャプチャはチェックボックス。他に検索ボックスや、ラジオボタンなどがあります。
ピッカー
ピッカーです。カラーピッカーとデータピッカーが用意されています。キャプチャはデータピッカーで、カレンダーの日にちをタップすると、フォーム内にデータを取得することができます。
メニュー
タップでポップアップするメニューボックスです。なかなかかわいい。
ニュースティッカー
シンプルなニュースティッカーです。右からテキストが流れていきます。
ポップアップ
ポップアップコンテンツです。シンプルなアラートなどなど。
スライドショー
エフェクトが複数用意されているイメージスライドショーです。
カバーフロー
リフレクション付きのカバーフローです。フリックで動かします。
3Dキューブ/Actu.
縦に回転する3Dキューブコンテンツです。divを回転させるのでキャプチャのように画像やリンクもOK。
3Dキューブ/Nav.
フリックでその場で横回転する3Dキューブメニューです。こちらもdiv要素ごと回します。
フリップパネル
画像が手前に倒れて、奥の画像が手前に寄る画像ギャラリーです。
画像カール
画像をタップすると下部がめくれて、別のコンテンツが表示されます。
タグクラウド
タグクラウドです。ドラッグで動作させます。
タグクラウド（画像編）
こちらもタグクラウドですが、画像を使用しています。
3Dウォール
Coolirisライクな3Dウォールです。楽しい。
3Dメニュー
ドラッグで回転する3Dメニューです。画像、縦バージョンもあります。
アニメーションページ（fly）
コンテンツをアニメーションエフェクト付きで切り替えます。これはflyバージョン。パネルが飛んできます。
アニメーションページ(tip)
こちらもアニメーションサンプル。2つに割れて別のコンテンツが表示されます。
アニメーション(StarWink)
映画のエンドロールっぽいコンテンツをテキストで実装します。少々表示怪しいかも。
ドラッグ＆ドロップ(puzzle)
ドラッグ＆ドロップで遊べるパズルです。
ペンツール
指で書けるドローツールです。値を取得するサンプルもあります。
動画プレーヤー
HTML5製の動画プレーヤーです。10秒進める、なども可能です。オーディオもありますよ。
GEO
位置情報を取得します。
サンプルはまだまだ沢山あるのでぜひ触ってみてください。この手のものは結構出まわってますが、複数覚えておいても損はしないので、選択肢の一つとして覚えておくと良さそうですね。
HTML/Javascript製のフレームワークはブラウザがあれば動作確認出来る点が手軽で嬉しい。Wink Toolkitは以下でダウンロードできます。
