Ext JS 勉強会メモ
最近 ExtJS という JavaScript ライブラリが注目されています。
開発者は、このライブラリを利用することで、簡単に Windows ライクな UI を実装することができます。例えば Feed Viewer とか、Web Desktop とか。
最近、日本でも Ext Japan が設立され、勉強会が行われるようになりました。
29/07/2008 @ 青山 で開催された、第 2 回 ExtJS/ExtGWT 勉強会 (Powered by Ext JAPAN) に参加してきましたので、そのメモを残しておきます。今回の参加者は 20 名。
※ ちなみに API Document (日本語) もあります。
ExtJS を利用したアプリケーションの作り方
参考: http://www.xenophy.com/ 。
ExtJS を利用したアプリケーション作成では、以下の手順はほぼ必ず踏むことになる。
1. 3 ファイルを読み込む
- ext-all.css, ext-base.js, ext-all.js
2. ソースを書く
- DOM ロードを待って実行するソースコードを記述
Ext.onReady(function() {
});- レイアウトを記述するコードを書く
良く利用される border レイアウトの例
Ext.onReady(
function() {
new Ext.Viewport(
{
layout: 'border',
title: 'Sample Codes',
items: [
{
region: 'north',
height: 100,
title: 'North Area'
},
{
region: 'west',
width: 100,
split: true,
title: 'West Area'
},
{
region: 'east',
title: 'East Area'
}
],
renderTo: Ext.getBody()
}
);
}
);
- アプリケーションのためのクラス設計
Ext JS でクラスを作成するには、Ext.util.Observable を継承すること
- 名前空間の定義 (Packaging)
Ext.ns('Ext.app');- 継承の例
// App という名前空間を定義
Ext.app.App = function(cfg) {
// config 適用
Ext.apply(this, cfg);
// 親コンストラクタ呼び出し
Ext.app.App.superclass.constructor.call(this, {
});
};
// Ext.app.App を Ext.util.Observable というクラスを継承させる
Ext.extend(Ext.app.App, Ext.util.Observable, {
init: function() {
new Ext.Viewport(
{
layout: 'border',
title: 'Sample Codes',
items: [
{
region: 'north',
height: 100,
title: 'North Area'
},
{
region: 'west',
width: 100,
split: true,
title: 'West Area'
},
{
region: 'east',
title: 'East Area'
}
],
renderTo: Ext.getBody()
}
);
}
});
- extJS はまだクロスブラウザで挙動が安定しないこともあるらしい
OpenSocial で作る Ext アプリケーション
田中洋一郎様 発表
OpenSocial とは?
Facebook ショックが発端。
1.開発者がアプリケーションを自由に登録できる (Facebook Platform)
→ 会員は登録された多くのアプリケーションを利用できる
2.SNS アプリケーションの登場
→
- 会員情報を利用する
- 友達関係を利用する
- SNS が提供する Web ページに統合される
- アプリケーションの利用状況が共有される
- SNS 外のデータを利用できる
SNS 利用者
- 次々と新しい APP を得られる
- 常に新鮮な気持ちを持って SNS を利用できる
運営者
- 自ら機能追加をしなくて済む
- APP がコンテンツを生みだしてくれる
開発者
- ユーザ獲得の手間がない
- 広告をアプリ内に入れればマネタイズ可能
※ Facebook アプリケーションの弱点
→ 他の SNS に移植する手間がとてもかかる
→ OpenSocial (= Learn once, Write anywhere.) の登場
OpenSocial アプリケーションの作り方
標準技術の適用により学習コストが低い
- HTML + JavaScript + REST + OAuth
- Web アプリ開発者の日常使用技術
- 例えば、HelloWorld なら以下くらいのソースコードを書くと良い
<?XML version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Hello">
<Require feature="opensocial-0.7" />
</ModulePrefs>
<Contents type="html"><![CDATA[
Hello, world
]]></Contents>
</Module>
OpenSocial API
1. People & Friends の情報取得
2. Activities
アプリケーションの利用状況を公開 & 共有
3. Persistence
標準で提供されるデータ格納領域
Ext.js と OpenSocial
OpenSocial が html や JavaScript といった Web 標準技術を利用しているため、相性は良い。上記の例の content タグ内に、 普通に ExtJs のアプリケーションコードを書くだけ。
OpenSocial の現在のステータス
OpenSocial ver 0.8。ver 1.0 の登場も間近
Ext GWT で作成する GWT で作成する iPhone ウェブアプリ
GWT とは??
- Google 発 Java → JavaScript コンパイラ
- GWT Hosted Browser ← 書いたコードをテストする専用ブラウザ
- JRE emulation library
- GWT WebUI class ライブラリ
- サーバ側も Java でそのまま記述
ExtGWT を利用するにあたり、インストールするもの
- Exlipse 3.4 + WTP
- Cypal Studio for GWT RC8
- GWT 1.5
- GXT 1.0.1
- Apache tomecat 5.5.6
- JDK
Ext GWT で作成する iPhone ウェブアプリ
スクリーンキャスト (Jingを利用) があるが、後日アップロードされる
- panel の横幅 は 320px
- viewport メタタグ
- windowResizeListner でイベントをキャッチ
その他
勉強会は来月 (8月) もあり
- extjs.co.jp から資料辿れる
- extjs 2.0 は来月 (2008/8 月)リリース予定
GPL ver3 に準拠するアプリケーションならばオープンソースとして利用できる
※商用な用途のものは商用ライセンスを購入する
- チームライセンス, ワークグループライセンス
- ライセンスは EXT JS LLC 米国からライセンスを買う
- Ext Japan は販売代行であり、Ext Japan はサポートで稼ぐ
マッシュアップキャラバンでも利用したらどうか、とか。
その他参考になりそうな記事
IBM Developer Networks 内にいくつかExtJS 関連の記事がありました。
0 comments:
コメントを投稿