読者です 読者をやめる 読者になる 読者になる

生涯未熟

プログラミングをちょこちょこと。

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

sencha iphone HTML

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

日本では現在の普及率は10%程と世界の国々に比べてそこまで普及していませんが、周りで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.htmliPhoneなど各種スマートフォンで覗いてみるとサンプルを体験出来ます。



それではサンプルの中にある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>

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


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

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


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


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

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


ではまたチェックを。


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

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

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


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




今回はここまで。
またtabs以外の要素もいじっていきたいと思います。


参考サイト様

iPhoneフレームワーク Sencha Touchを使ってみた。
http://www.webopixel.net/ipad-iphone-sdk/75.html

Sencha Touch Ext.setup
http://code.xenophy.com/?p=1050

日本は世界よりスマートフォンが遅れている!?
http://news.livedoor.com/topics/detail/5139566/


このエントリーを含むはてなブックマーク