モバイルウェブデザイン術〜SenchaTouch〜

皆様の周りではスマートフォンをお持ちの方はどれくらいいるでしょうか？

日本では現在の普及率は１０％程と世界の国々に比べてそこまで普及していませんが、周りでiPhoneやらを持っている方はかなり増えたのではないでしょうか。

さて、今回はそんなスマートフォンでのブラウジングに対するウェブデザインを勉強していきます。

何を使うかというと、Senchaと呼ばれるHTML5 フレームワークを使用していきます。
ついつい煎茶？と思っちゃうネーミングですが侮るなかれ、かなり高機能なことが出来ちゃうのです。

こちらのサイト様にサンプルがありますので見てみたい方はどぞ。

iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた
http://kachibito.net/software/open-source/sencha-touch.html

むむむ、ソリティアまで出来るのか！と驚いてしまいますね。

では試しにSenchaを導入してみましょうか。

Sencha
http://www.extjs.co.jp/

公式サイトの一番左にあるSencha Touchをダウンロードします。
その際に色々と入力を求められるのでご注意を。

で、取ってきたSenchaTouchをサーバで公開するためのフォルダに突っ込みましょう。(apacheをご使用の人はデフォルトでhtdocsなど)

まずはSenchaTouchがどのようなものか触ってみたい方は先ほど解凍したフォルダの中のexamplesフォルダを開き、その中にあるajaxだのtabsだのの中のindex.htmlをiPhoneなど各種スマートフォンで覗いてみるとサンプルを体験出来ます。

それではサンプルの中にあるtabsを改造します。
tabsフォルダの中にあるindex.jsをコピーしてきて名前をtab.jsに変えます。

次に、HTMLファイルを作ります。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>SenchaTouch</title >

 <!-- Sencha Touch CSS -->
 <link rel="stylesheet" href="./sencha-touch-1.0/resources/css/sencha-touch.css" type="text/css">

 <!-- Sencha Touch JS -->
 <script type="text/javascript" src="./sencha-touch-1.0/sencha-touch.js"></script>

 <!-- Application JS -->
 <script type="text/javascript" src="./tab.js"></script>

</head>
<body> </body>
</html>

必要なファイル以外読み込んでいないというシンプル具合ですｗ
基本的にApplication JS以外は常に読み込んでおく感じですね。

では、メインのtab.jsをいじりましょう。
最初に、タブ名を変更します。

items: [{
                title: 'その１',
                html: '1',
                cls: 'card1'
            }, {
                title: 'その２',
                html: '2',
                cls: 'card2'
            }, {
                title: 'その３',
                html: '3',
                cls: 'card3'
            }]

Tab 1,2,3となっていた部分をその1,2,3と変えてみました。
iPhoneでどのようになっているかチェックしてみましょう。

お、ちゃんと変更されていますねー。
では次にタブの中身をいじります。

items: [{
                title: 'その１',
                html: '中身1',
                cls: 'card1'
            }, {
                title: 'その２',
                html: '中身2',
                cls: 'card2'
            }, {
                title: 'その３',
                html: '中身3',
                cls: 'card3'
            }]

ではまたチェックを。

ちゃんと中身1,2,3に変わってますね。

そして、最後にタブを増やしてみましょうか。

        new Ext.TabPanel({
            fullscreen: true,
            type: 'dark',
            sortable: true,
            items: [{
                title: 'その１',
                html: '中身1',
                cls: 'card1'
            }, {
                title: 'その２',
                html: '中身2',
                cls: 'card2'
            }, {
                title: 'その３',
                html: '中身3',
                cls: 'card3'
            }, {
            	title: 'その４',
            	html: '中身4',
            	cls: 'card4'
            }]

こうすることでタブが４つになります、必要数itemsの中に足していく感じですね。