So-net無料ブログ作成
Sencha Touch ブログトップ

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

Sencha Touchの続きです。
sencha06.jpg

#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」というディレクトリを作りました)にインストールしたらうまくいきました。
・コマンドプロンプトを使いますので、入力に緊張するかもしれません…


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

・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(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の設定
ここまででサイトを表示するとこんな感じです。
sencha22.jpg
sencha23.jpg
sencha24.jpg

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ページの表示も整っています。
sencha25.jpg


以上で作業は終了です。

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

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


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








Sencha Touch#03【Hello Worldを表示させるVer.2.x】

Sencha Touchの続きです。
sencha06.jpg

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

今日は「Hello World」をSencha Touch 2.xで表示させます。
参考にしたページは、Sencha Touch公式サイトの
Hello World
です。でも英語…
手順や手法は若干アレンジしています。

(1)ディレクトリ構成
ダウンロード、解凍しただけの状態から、ローカルのサーバ環境(WAMPやWebMatrix)にサイトを構成しなおします。
必要なファイルだけコピーして使えばいいようなものですが、まだ初めの一歩なので最も簡単な方法を用います。

・適当なフォルダを作成する(今回はhello-world2.0
hello-world2.0フォルダの中に「lib」「app」フォルダを作成する。
・今作ったlibフォルダの中に「touch」フォルダを作る。
・今作ったtouchフォルダの中に、解凍したSencha Touch 2.xの中身を丸ごとコピーして持ってくる。
こんな感じになる。
sencha11.jpg


(2)index.htmlを作る
hello-world2.0フォルダ直下に「index.html」を作ります。
Sencha Touch公式サイトのHello Worldの「The HTML file」の下にある以下のHTMLソースコードをコピーして貼り付けます。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>

<script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

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


(3)index.htmlファイルの記述追加
index.htmlに以下の一行を追記します。

<script type="text/javascript" src="app/app.js"></script>


挿入するのはhead内の↓こんな位置でいいかと思います。
sencha13.jpg

(4)app.jsを作る
appフォルダ内に「app.js」を作ります。
先ほどのSencha Touch公式サイトのHello WorldのHTMLコードの下の方に行くと、「The application code」という欄があります。
ここに記述されたコードは「HTML内にJavaScriptを書く場合の記述」になりますので、「.js」ファイルにする場合には、最初の一行と最後の一行は不要です。
JavaScriptの記述のみを抜き出して「app.js」とします。
「app.js」の中身はこうなります↓

Ext.application({
launch: function () {
Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Hello World!'
});
}
});



ここまでのサイト(ディレクトリ)構成はこんな感じ。
sencha12.jpg

(5)先ほど作ったindex.htmlをブラウザで見てみる(WebMatrixなら【実行】でブラウザを選ぶ)
Webkit系ブラウザ(Chrome,Safari等)でないと再生されない。
うまくいけば、以下のようにHello Worldの文字が表示されます。

sencha14.jpg


Sencha Touch公式サイトのHello Worldのレッスンはここまでで終了なのですが、これでは前回のVer.1.xの完成結果に比べて面白味に欠けますので、もう少し作り込んでいきます。

(6)「Hello World」をtoolbarのtitleにする。
app.jsを改変していきます。
最初の2行、最後の2行を除いて書き換えます。
Ext.application({
launch: function () {
Ext.Viewport.add({
xtype: 'titlebar',
docked: 'top',
title: 'Hello World!',
});
}
});


こんな感じ。
sencha15.jpg

ここでapp.jsを上書き保存し、index.htmlを見てみるとこんな感じです(タイトルが省略されてしまってますが...)。
sencha16.jpg

(7)続いて、「Hello」ボタンと「World」ボタンを作ります。
app.jsに、さらに以下のソースコードを挿入します。

Ext.create("Ext.TabPanel", {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
tabBar: {
ui: 'light',
layout:
{
pack: 'center'
}
},
items: [
{
title:'Hello',
html:'<h1>Hello</h1>'
},
{
title:'World',
html:'<h1>World!</h1>'
}
]
});


こんな感じ。
sencha17.jpg

ここでapp.jsを上書き保存します。

(8)index.htmlをブラウザで見てみると、HelloボタンとWorldボタンでページが切り替わるようになりました。
sencha18.jpg




WebMatrixの導入は簡単です。こちらからどうぞ。
http://www.microsoft.com/japan/web/webmatrix/
webmatrix01.jpg


【GMOとくとくBB】WiMAX月額3,770円












Sencha Touch#02【Hello Worldを表示させる】

Sencha TouchにXcodeに…書きたい投稿が溜まってしまっています。

Sencha Touchの続きです。
sencha06.jpg
ちなみに、今回の(前回も)Sencha TouchはVersion 1.x です。
次から2.xでおさらいをしたいと思います。

前回はSencha Touchのインストールまでしました

今日はHello Worldを表示させたいと思います。
参考にしたページは、Sencha Touch公式サイトの
Taking Sencha Touch Apps Offline
Hello World
です。でも英語…
手順は若干変えてあります。

(1)ディレクトリ構成
ダウンロード、解凍しただけの状態から、ローカルのサーバ環境(WAMPやWebMatrix)にサイトを構成しなおします。
必要なファイルだけコピーして使えばいいようなものですが、まだ初めの一歩なので最も簡単な方法を用います。

・適当なフォルダを作成する(今回はhello-world
hello-worldフォルダの中に「lib」「app」フォルダを作成する。
・今作ったlibフォルダの中に「touch」フォルダを作る。
・今作ったtouchフォルダの中に、解凍したSencha Touchの中身を丸ごとコピーする。
こんな感じになる。
sencha07.jpg

(2)index.htmlを作る
hello-worldフォルダ直下に「index.html」を作ります。
Taking Sencha Touch Apps Offlineの「Getting Set Up」の下にある以下のソースコードをコピーして貼り付けます。

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>

<script type="text/javascript" src="lib/touch/sencha-touch.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>
.hello {
background:#ffffff;
background-image:url(http://src.sencha.io/320/http://chuvachienes.com/wp-content/uploads/2009/07/hello.jpg);
}
.world {
background:#ffffff;
background-image:url(http://src.sencha.io/320/http://www.unc.edu/world/College_Updates_2009/world-globe.jpg);
background-repeat:no-repeat;
}
</style>

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


(3)app.jsを作る
appフォルダ内に「app.js」を作ります。
先ほどの「Getting Set Up」のHTMLコードの下にあるJavaScriptコードをコピーして貼り付けます。

 
var helloWorld = new Ext.Application({
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'Hello World'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'hello', title:'Hello'},
{cls:'world', title:'World'}
]
});
}
});



ここまでのサイト(ディレクトリ)構成はこんな感じ。
sencha08.jpg


(4)先ほど作ったindex.htmlをブラウザで見てみる(WebMatrixなら【実行】でブラウザを選ぶ)
Webkit系ブラウザ(Chrome,Safari等)でないと再生されない。
うまくいけば、以下のようにHello Worldの文字と画像の切り替えが再現できる。
sencha09.jpg
sencha10.jpg



WebMatrixの導入は簡単です。こちらからどうぞ。
http://www.microsoft.com/japan/web/webmatrix/
webmatrix01.jpg


【GMOとくとくBB】WiMAX月額3,770円












HTML5対応サイト作成のプラットフォームSencha Touch#01【導入編】

-----
今なら「コーチング」講座が無料です。ディレクター、プロデューサー、起業家向け
-----

Sencha Touchというのは、例えばこんなサイトが作れるものです。
sencha01.jpg
Sencha Touch 1.1 iPhoneおよびAndroidのようなタッチ端末で利用できるWebアプリ、それもネイティブアプリのような操作性を持つWebアプリを開発するための世界初のHTML5対応JavaScriptフレームワーク、Sencha Touchがリリースされました。 http://www.extjs.co.jp/products/touch/


つまりHTML5でサイトなんかを作って、それが、iPhoneやAndroidで動かせる…ということです。

Sencha Touchでスマホ用サイトを作ると、企業サイトもクールになりますね(もちろんデザインのフルカスタマイズもできます)。

もうひとつ、ネットビジネス(アフィリエイトなど)をやる際のテクニックとして、「サテライトサイトを作る」というものがあります。
SEOに関わる話で長くなるので今は割愛。

どうせサテライトサイトを作るなら、スマホ専用サイトを作っちゃった方がいいんじゃないの?
という話も聞きまして。

誰でも簡単にできるかというと、そうはいかないのですが、とりあえずなるべく簡単に導入する方法を考えている次第です。

Sencha Touchの導入に入る前に、
スマホ専用サイトを作る一番簡単な方法は、以下のようなASPを使う方法です。

smart4me
無料プランではサイトスペースも貸してくれる。ただし10ページまで。

スマートフォンサイト簡単作成ツール≪作スマ≫

ASP上でサイトを作り、データをダウンロードして自分のサーバにアップするタイプ。自由度高。

上記は両方ともSencha Touchを使っているわけなんですね。


ということで前置きが長くなりましたが、とりあえずはASPを使わずにやってみようよということでSencha Touchの導入編。

1.Sencha Touchをダウンロードする
http://www.extjs.co.jp/products/touch/download.php
ここからダウンロードします。

2.ここに始め方が書いてあります。
http://www.extjs.co.jp/deploy/touch/getting-started.html
sencha02.jpg

でも詳しすぎて不親切。。。

ということで、簡単に書きます。

3.インストールする(ダウンロードしたzipファイルをまずは解凍)

4.解凍してできたフォルダの名前を変える(今回はsencha01とした)

5.ローカルのサーバにアップロード…と言われても…という場合は、今はMicrosoft WebMatrixという便利なものがあるのでこれを使う。(Winのみ)

※WebMatrixダウンロードについては文末に記載

6.「4」で解凍したフォルダをWebMatrixが使うローカルホスト領域に放り込む
sencha04.jpg

ドキュメントライブラリ>My WebSites>sencha01
C:\Users\foo(ユーザーネーム)\Documents\My Web Sites\sencha01

7.WebMatrixを起動し、「新しいサイト」>「フォルダから新しいサイトを制作」を選び、「sencha01」を選択する
WebMatrixが↓こんな画面になるので、「実行」をクリックしてみる。
sencha05.jpg

ブラウザにこの画面が表示されたら成功です。アドレスを見ると、ローカルホストのアドレスになっていますね。
sencha06.jpg


以上でインストールは完了です。

※Microsoft WebMatrixの登場で、開発に弱いデザイナーなども簡単にローカルサーバ(簡易的)が構築できるようになりました。PHPでのページ制作や、WordPressのカスタマイズには、今や欠かせない存在です。
WordPressがここまで普及した一因として、WebMatrixの存在も大きいのではないかと思っています。

WebMatrixの導入は簡単です。こちらからどうぞ。
http://www.microsoft.com/japan/web/webmatrix/
webmatrix01.jpg


【GMOとくとくBB】WiMAX月額3,770円












Webサイト・CGI ブログランキングへ




Sencha Touch ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。