2008年8月1日金曜日

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 外のデータを利用できる
3. Facebook アプリケーション利用による利害関係

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 関連の記事がありました。