• かちびと.net

    iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作りました。動画もいくつかあります。ぜひ動作をご確認下さい。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った

スポンサーリンク

iPhoneやAndroidなどの人気の
スマートフォン向けのJavascript製
フレームワーク・wink toolkitを触っ
てみました。動作サンプルが豊富
で割と応用できそうだったので日本
語でサンプルを作ってみました。

スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので(完全ではないけど)日本語サンプルを作成してみました。

Wink Toolkit


スマホ向けのWebアプリ用JavaScript製フレームワークです。

動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。

お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜しければご覧ください。

サンプル

サンプル

※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は以下でダウンロードできます。

Wink Toolkit

URL :
TRB :

Comments & Trackbacks (12)

  1. kuwazou

    3Dキューブ/Nav.のリンクがiPhone(iOS4.3.3)だと効かないのですが対応策はありますでしょうか?

    • シロ

      すみません、なかなか対応できず・・

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services