SenchaTouch入門

admin — Tue, 28 Sep 2010 01:00:50 +0000

CSS NITE IN SHIZUOKAでLTしたSenchaTouchについてなんですが、LTに用いたソースが0.9.3用だったのですが、現在の0.9.5のバージョンでは動かない事が判明 orz。なので、補足として0.9.5用にブログに残しておくことにしました。

Sencha Touch とは

iPhone、アンドロイド向けサイトを作成するためのjavaScriptライブラリ
javaScriptの値を調整するようにプログラムを組むだけで、iPhoneアプリで見かけるようなエレガントで一貫したデザインのUIが簡単に作成可能。

まぁ、百聞は一見にしかず。下のデモページをスマートフォン、PCの場合はChromeかSafariでご確認ください。

SenchaTouchのデモページ

かちびと.netさんも紹介されています。

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

SenchaTouchの導入

SenchaTouchのダウンロード

所定の場所にダウンロード後、解凍してください。
フォルダの中にSenchaTouchを動かすうえで最低限必要なファイルとフォルダは下記のとおりです。

ext-touch.js
resourcesフォルダとその中身

これを使って、リストがスライドして次々とページ遷移する簡単なページを作ってみました。
作成するファイルは以下の2つ。

index.html
index.js

完成イメージは次のとおりです。

それでは順番に見ていきます。

index.html




    
    Nested List

重要な部分は6行目～8行目。
6行目でresourcesフォルダ内のcss/ext-touch.cssを
7行目でext-touch.jsを
8行目でindex.jsをそれぞれ読み込みます。
パスは環境に合わせて変更してください。

また、この例ではタグ内には何も書きません。

index.js

Ext.setup({
    onReady: function(){
        var data = {
            text: 'トップ',
            items: [{
                text: '静岡中部',
                items: [{
                    text: '静岡市',
                    items: [{
                        text: '葵区',
                        leaf: true
                    },{
                        text: '駿河区',
                        leaf: true
                    },{
                        text: '清水区',
                        leaf: true
                    }]
                },{
                    text: '焼津',
                    leaf: true
                }]
            },{
                text: '静岡西部',
                items: [{
                    text: '浜松',
                    leaf: true
                },{
                    text: '掛川',
                    leaf: true
                }]
            },{
                text: '静岡東部',
                items: [{
                    text: '沼津',
                    leaf: true
                },{
                    text: '伊豆',
                    leaf: true
                },{
                    text: '三島',
                    leaf: true
                }]
            }]
        };

        Ext.regModel('ListItem', {
            fields: [{name: 'text', type: 'string'}]
        });

        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            root: data,
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });

        var nestedList = new Ext.NestedList({
            fullscreen: true,
            title: '静岡県',
            displayField: 'text',
            store: store
        });
    }

});

index.jsの中身はほとんどがjsonになっています。各項目に値を指定することで、ページ構成がデザインされます。SenchaTouchではこのjsonを上手く使いこなすことが重要になってきます。とりあえず、これで完成となります。実際のサイトは下記URL先をご確認ください。

http://sencha-demo.studio-kingdom.com/

また、0.9.3に比べて0.9.5では色々と複雑になっていますので、それについて少し載せておきます。

47～48行目では、リストに表示するjsonデータについて、モデル指定を行っています。これはデータベースで言う「カラム名」と「型」といったところでしょうか。jsonデータを使うにはこのモデル指定が必須になったのかもしれません。
51～61行目はjsonデータを入力データとして各コンポーネントで扱えるようにしているようです。modelは上記のモデル指定、rootはjsonデータのオブジェクト名と思われますが、proxyの意味がいまいち分かりません…。

本格的に作る場合にはAPIを熟読する必要がありますね。英語ですが(^-^;)

Sencha Touch API Documentation

また、肝となるjsonについてですが、自分はこの本で習いました。10日で覚えるシリーズは根本から丁寧に説明してくれる良書が結構あったりしておススメです。

10日でおぼえるAjax 入門教室漆尾貴義

Yahoo UIに入門してみた

admin — Sun, 25 Jan 2009 12:23:30 +0000

最近浅く広い、この手のエントリ多いです。Yahoo UIが何気に優秀という噂を聞きつけて、どうしても試してみたくなったので。
Ajaxのおさらいをしていて、ちょうどYahooUIの項目もあったのでサンプルプログラムを改良して、多少実践向けにして晒してみたくなったという事情もあります。
おさらいに使用した本はこちら。

10日でおぼえるAjax 入門教室

posted with amazlet at 09.01.25

漆尾貴義
翔泳社
売り上げランキング: 120488

Amazon.co.jp で詳細を見る

この本、結構おススメ。IEでAjaxする方法を解説⇒次はFireFoxで⇒各ブラウザ毎に処理を振り分け⇒innterHTMLやCSSの説明⇒prototype.js登場といった感じで、Ajaxに必要なことを基礎から追って順に説明してくれるので分かりやすいです。
Yahoo UI Library リファレンスの[■Calendar]⇒[Calendar]も参考にしてます。
で、カスタマイズしたプログラムはこんな感じ。

カレンダー表示リンクを押すとカレンダーが表示。
入力欄が空でリンクを押された場合は当月を表示、日付が入力されていたら対象月を表示。
カレンダー上で日付をクリックするとyyyy/mm/dd形式で入力欄に日付が入り、カレンダーが閉じる。
(入力欄の日付エラーチェックはしてません。アルファベットとか入れるとトンデモカレンダーが表示されます(>_<))

では、実際に作ってみましょう。まずはYahooUIをダウンロードしてきます。
http://developer.yahoo.com/yui/

使用するのはbuildフォルダ内のファイル群になります。作成するプログラムと同じフォルダ階層にbuildフォルダを移し、フォルダ名をyuiに変更してください。
肝心のプログラムは、下記の通り。
















カレンダー表示