Sencha Touch#04【ブログのスマホ版を作ってみる】：印刷とWebの制作ノート：So-netブログ

	ブログをはじめるログイン

Sencha Touch#03【Hell.. ｜これから手っ取り早くアプリで収入を得るな.. ブログトップ

Sencha Touch#04【ブログのスマホ版を作ってみる】

Sencha Touchの続きです。

・#01　Sencha Touchのインストール（要は解凍して置き場所を決めるだけなので1.xでも2.xでも変わらない）
・#02　Hello Worldを表示させる（Sencha Touch Ver.1.x）
・#03　Hello Worldを表示させる（Ver.2.x）

今日は簡単なWebサイトの作成です。ブログのFeedを取得してスマホ版にしてみました。
参考にしたページは、Sencha Touch公式サイトの
・Building your First App
です。手順や手法はアレンジしています。

↑こちらのページでは、このレッスンに入る前に「Getting Started with Sencha Touch 2」を済ませておくことを勧めています。

「Getting Started with Sencha Touch 2」はSencha Touch2のダウンロード、インストールと、Sencha SDK Toolsのインストール、最初のアプリ（GS）を作成しています。

作業自体はインストールとコピペ（もちろん内容を理解しようと努めた上で…）でいけるのですが、Sencha SDK Toolsのインストールにはちょっとコツがいりました。

・Windows7へのインストールでは、「C:\Program Files (x86)」にインストールするとうまくいきませんでした。別のディレクトリ（私は「C:\SenchaSDK」というディレクトリを作りました）にインストールしたらうまくいきました。
・コマンドプロンプトを使いますので、入力に緊張するかもしれません…

というわけで、今日は以下の構成のサイトを作ります。

・TOPページ
・ブログのエントリーリスト
・メールフォーム

以上です。

(1)ディレクトリ構成は「#03　Hello Worldを表示させる（Ver.2.x）」の通りに作ります。
フォルダ名は任意の名前を付けて構いません。

(2)index.htmlを作る
今回も、ごくシンプルです。

<!DOCTYPE html>
<html>
    <head>
        <title>BlogSite 01</title>
        <script type="text/javascript" src="lib/touch/sencha-touch-all.js"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="app/app.js"></script>
    </head><body></body>
</html>

(3)app.jsを作る

Ext.application({
    name: 'Sencha',

    launch: function() {
        ///タブパネルを作る。タブバーの位置はbottom
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            ///HOMEの画面（パネル）を作る
            items: [
                ///アイテムその1（1つめのパネル「HOME」）
                {
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    ///HOMEのHTMLを記述する
                    html: [
                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
                        '<h1>Welcome to Sencha Touch</h1>',
                        "<p>You're creating the Getting Started app. This demonstrates how ",
                        "to use tabs, lists and forms to create a simple app</p>",
                        '<h2>Sencha Touch 2</h2>'
                    ].join("")
                },
                ///アイテムその２（2つめのパネル「Blog」）
                ///Nested Listなので、タイトルをクリックすると内容が表示される（3つめのパネルではない）
                {
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },
                        ///ここでブログのFeedを取得する
                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },
                    ///中身のカード（ブログの本文）
                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                },
                ///アイテムその3（3つめのパネル「Contact」）
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',
                    url: 'contact.php',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',
                                    label: 'Message'
                                }
                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

ちょっと長くなりましたが、中に説明を入れています。

(4)Sencha Blogのフィードの部分を自分のブログに置き換える
フィードを取得し表示するには、Googleの「feedburner」というAPIを利用します。
・http://feedburner.google.com/

英語のサイトですが作業自体は簡単です。
ブログのアドレス（またはRSS、XML等）を入力すると、フィード出力用のコードが生成されます。

生成されたコードを、上記のフィードのアドレス部分に貼り付けます。


url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/ne/zwgD',

↑こんな感じ。
ちなみにこのコードは、当「Web制作ノート」のコードです。

(5)CSSの設定
ここまででサイトを表示するとこんな感じです。

TOPページのレイアウトがあまりよろしくないので、index.htmlにstyleを追加します。
以下のソースをhead内に記述します。

        <style type="text/css" media="screen">
        html {
            overflow: hidden
        }

        .home {
            text-align: center;
        }

        .home img {
            width: 64%;
        }

        .home h1 {
            font-weight: bold;
            font-size: 1.2em;
        }

        .home p {
            color: #666;
            font-size: 0.8em;
            line-height: 1.5em;
            margin: 10px 20px 12px 20px;
        }

        .home h2 {
            color: #999;
            font-size: 0.7em;
        }
        </style>

index.html全体はこんな感じになります。

<!DOCTYPE html>
<html>
    <head>
        <title>BlogSite 01</title>
        <script type="text/javascript" src="lib/touch/sencha-touch-all.js"></script>
        <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="app/app.js"></script>
        <style type="text/css" media="screen">
        html {
            overflow: hidden
        }

        .home {
            text-align: center;
        }

        .home img {
            width: 64%;
        }

        .home h1 {
            font-weight: bold;
            font-size: 1.2em;
        }

        .home p {
            color: #666;
            font-size: 0.8em;
            line-height: 1.5em;
            margin: 10px 20px 12px 20px;
        }

        .home h2 {
            color: #999;
            font-size: 0.7em;
        }
        </style>
    </head><body></body>
</html>

再度index.htmlをブラウザで見てみると、TOPページの表示も整っています。

以上で作業は終了です。

細かい部分については解説を端折りすぎだとは思いますが、まずはコピペでいいので作ってみて慣れることだと思います。

また、今回作った「フィードを取得してnestedlistで表示する」という機能は、様々な応用が利きます。
自分のブログのスマホ版を、まったく別のドメインで運用することも可能になります。
まったく別のドメインで有りながら、PC版のブログを更新すればスマホ用のサイトも更新される、という連携ができあがります。

※feedburnerも多機能で面白いサービスです。さっそくこのページの右上にfeedburnerで作ったアニメーションバナーを置いてみました。
feedburnerについても、いずれ書きたいと思います。