iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた

Ads

Moongiftさんの記事を見て興味が
沸いたので即DLしてみました。
iPhone等のモバイル向けのWeb
アプリを構築するHTML5中心の
フレームワーク・Sencha Touch。
個人的にはかなり良いオープン
ソースでした。

という訳で、Sencha Touchを触ってみましたよ。これ使えば、低スキルの僕にでもアプリ作れそうです。

で、Sencha Touchってどういうもんなの?という方もいらっしゃるかと思いますので、ファイルに含まれているサンプルをご紹介します。

SENCHA

sencha01
かなり素敵なフレームワークでしたよ。HTML5っていうのがいいですね。含まれているサンプルを以下に簡単にご紹介します。サンプルの説明は動作の説明になります。

尚、含まれているファイルは画像ファイルとHTMLファイルとjsファイルのみですのでローカルサーバー等が無くてもサンプルを見る事が出来ますよ。

キャプチャは全てPCブラウザでのものですが、ご了承下さい。あと、僕はiPhoneしかないので、iPhone目線でご紹介しますのであわせてご了承願います。

アニメーションサンプル

sencha02
フリップやタップをした際のエフェクトのサンプルを確認出来ます。フェードやフリップ(ひっくり返る)、スライドなど。

フォームサンプル

sencha03
フォームサンプル。マウスのドラッグで縦のフリックも体感できます。

リストサンプル

sencha04
リストのUIサンプル。iPhone同様、フリックも、A~Zのタップによる頭出しも可能です。

アイコンサンプル

sencha05
よく使われているアイコンのサンプルです。

ツールバーサンプル

sencha06
ツールバーに表示されるボタンなどのサンプルです。

カルーセルサンプル

sencha07
カルーセル。iPhoneのTOP画面などでも使われていますね。マウスでフリック可能です。

タブサンプル

sencha08
タブのサンプルです。Webアプリでは重宝しそうな予感。

ボタンタブサンプル

sencha09
ボタンタブのサンプルです。数字はダミーです。タップ(PCならクリック)でスライドしながら切り替わります。

マップサンプル

sencha10
マップの表示サンプルです。地図系アプリでは必須ですよね。

オーバーレイサンプル

sencha11
ライトボックス的なもの。呼び出されるボックス内もフリック出来るようになっています。

ドラッグドロップサンプル

sencha12
ドラッグ&ドロップのサンプルです。使い勝手多そうですね。

ソートサンプル

sencha13
ソートのサンプルです。ドラッグ&ドロップでアイテムの移動が可能です。

GEOサンプル

sencha15
位置情報の取得のサンプルです。

実装サンプル・ブログやFlickr

sencha14
実際に実装したサンプルです。デザインはされていませんが、ブログやFlickr、天気予報等をタブ分けして実装しています。

実装サンプル・kiva

sencha15
kivaのサイトを実際に実装しているサンプルです。フリックで下に移動できますよ。

実装サンプル・ソリティア

sencha17
ソリティアのサンプルです。実際にゲーム可能ですよ。ソース見て驚きました。これだけでiPhoneでも実装出来るんですね・・

実装サンプル・Twitter

sencha18
TwitterのユーザーのPostを実際に表示させています。

これら全てがHTMLとJSのみで構築されています。何か作ってみたくなりますねー。素敵なフレームワークだなぁ・・

ライセンスはGPLです。Ajaxアプリケーションを構築するためのJSライブラリ、ExtJSがSenchaに社名変更してからリリースしたHTML5とjsによるモバイル用Webアプリケーションのフレームワーク、「Sencha Touch」は以下よりDL可能です。

Sencha Touch