im-JSPackman - OPEN INTRA-MART
Download
Report
Transcript im-JSPackman - OPEN INTRA-MART
第３回
OPEN INTRA-MART 勉強会
2009-03-02
アジェンダ
im-UISupplementsプロジェクト紹介 (江本)
intra-mart をリッチにしよう♪
すべては開発基盤？ im-jspackmanとは？
実践！Im-JSPackmanでクラスを作ってみよう♪ (江本)
im-UISupplementsプロジェクト今後の計画 (江本)
LT
七島→榎本→下村→武藤→篠宮→本間 （敬称略）
Copyright© 2009 OPEN INTRA-MART
1
自己紹介
名前
江本 守 ⇒ Emoto Mamoru ⇒ emooru (えもーる)
IM入社 ４年目(２８歳…)
「え、ほんと？」とよく疑われますが事実です.. (泣)
im-UISupplements プロジェクト コミッタ since 2007年X月
いつからかは忘れました。。
初コミットは、2007/12/25 クリスマス♪
私がコミッタになったきっかけ！？
UI開発楽しいなぁー
世の中の技術をもっと触れてみたいなぁー
スクリプト開発(im-jssp)と組み合わせてリッチなWebアプリを
さくさくっと作りたいなぁー
ということで、私の夢は、みんなで intra-mart の UI をリッチにしたいなぁー
Copyright© 2009 OPEN INTRA-MART
2
アジェンダ
im-UISupplementsプロジェクト紹介
intra-mart をリッチしよう♪
すべては開発基盤？ im-jspackmanとは？
実践！Im-JSPackmanでクラスを作ってみよう♪
im-UISupplementsプロジェクト今後の計画
Copyright© 2009 OPEN INTRA-MART
3
アジェンダ
im-UISupplementsプロジェクト紹介
intra-mart をリッチしよう♪
すべては開発基盤？ im-jspackmanとは？
実践！Im-JSPackmanでクラスを作ってみよう♪
im-UISupplementsプロジェクト今後の計画
Copyright© 2009 OPEN INTRA-MART
4
im-UISupplementsって何？
Copyright© 2009 OPEN INTRA-MART
5
im-UISuplements プロジェクト
UIの便利なかっこいい部品やAPIを開発・提供
im-Jssp Framework や im-JavaEE Framework と連動♪
im.ui (im-UISupplements)
〜 UI部品s 〜
im.util
im.text
im.jsunit
im.net
im.log
im.lang (im-JSPackman[core])
Native JavaScript
Copyright© 2009 OPEN INTRA-MART
6
たとえば
im-Jssp Framework
と連動すると！？
Copyright© 2009 OPEN INTRA-MART
7
JavaScript＋HTML ⇒ Webアプリさくさく開発♪
im-Jssp Framework？
JavaScriptとHTMLを使ったテンプレートエンジン
+
request
プレゼンテーションページ (HTML)
画面を担当
IMART タグでバインド変数を表示
+
CSJS
ビジネスロジックを担当
バインド変数の設定
HTML
ファンクションコンテナ (Server-Side JavaScript)
優れたポイント☆ by 私的評価
JS
response
HTML
Client-Side
+
CSJS
Server-Side
開発生産性の高さ
インタラクティブ
ステップbyステップですぐ試して確認しなから開発できる♪
簡易なプログラミング言語の利用
開発者育成コストの軽減
JavaScript + HTML
サーバサイドもクライアントサイドも
JavaScriptで開発できる♪
クライアントサイドは im-UISupplements♪
Copyright© 2009 OPEN INTRA-MART
8
ここまで。。
Copyright© 2009 OPEN INTRA-MART
9
言いたいことを言ってきましたが、
私(江本)の夢はなんとなくわかった..
Copyright© 2009 OPEN INTRA-MART
10
im-UISupplements って
いまどこまでできているの？
Copyright© 2009 OPEN INTRA-MART
11
現状。。
im.ui (im-UISupplements)
〜 UI部品s 〜
im.util
im.text
im.jsunit
im.net
開発中
im.log
im.lang (im-JSPackman[core])
ほぼ
完成
Native JavaScript
少しずつですが、進んでます♪ (苦笑)
⇒ 皆さんと一緒に開発したいなぁー
Copyright© 2009 OPEN INTRA-MART
12
そのためにもまずは
im-JSPackman
をご覧いただきたい♪
あ、名前が似てるけど
関係ないよ。
正しくは「Pacman」
Copyright© 2009 OPEN INTRA-MART
13
im-JSPackman 誕生秘話。
私はISPでUIライブラリを作った！
フローティングウィンドウ
入力支援
簡易HTMLエディタ etc
しかし。。
CSJSはライブラリ化しづらい
名前の衝突の考慮、APIリスト
必要なJSファイルをScriptタグで指定するのは面倒
依存関係を考慮
JavaScriptのライブラリ開発基盤
を作ってみよう！
Copyright© 2009 OPEN INTRA-MART
14
im-JSPackman
〜 intra-mart Client-Side JavaScript Package Management 〜
JavaScript ライブラリを開発・管理・提供するには？
⇒ Java から学んでみよう！
再利用性・メンテナンス性
向上をねらう
JavaScript でクラス開発の方法を提案！
クラス単位での開発
１JSファイル１クラス定義
継承
パッケージ化
機能をクラス・パッケージで分類・管理・提供
その他
instanceof による型判別
例外クラス、例外処理の導入
JSDoc(http://jsdoc.sourceforge.net/)によるAPIリスト化 等
Copyright© 2009 OPEN INTRA-MART
15
[利用者] 利用イメージ
外部JSファイルを指定する script タグは１つだけ！
<html>
⇒ html ファイルのメンテナンスも楽！
<head>
<script type=“text/javascript” src=“../csjs/im/lang/jspackman.js” />
<script type=“text/javascript”>
動的にJSファイルを読込み、クラスをロード！
Import(“im.sample.SampleMain”);
⇒ 依存関係を気にする必要なし！
使用するクラスだけをインポート指定！
Import(“im.util.List”);
Main.invoke(“im.sample.SampleMain”);
function sample () {
var list = new im.util.List();
初期処理用に、Mainクラスを指定！
※onloadイベントの代わり
}
</script>
</head>
[注意]
<body> … </body>
インポートしたクラスは、Main クラスの main メソッドが
実行されるタイミング以降に利用できる！
</html>
Copyright© 2009 OPEN INTRA-MART
16
アジェンダ
im-UISupplementsプロジェクト紹介
intra-mart をリッチしよう♪
すべては開発基盤？ im-jspackmanとは？
実践！Im-JSPackmanでクラスを作ってみよう♪
im-UISupplementsプロジェクト今後の計画
Copyright© 2009 OPEN INTRA-MART
17
申し訳ないです。
作ったクラスを参考に紹介します！
「Pacman」を作る
時間はあったんだけど
ねぇ。。。
Copyright© 2009 OPEN INTRA-MART
18
im.util.List クラスを見てみましょう♪
リンク
Copyright© 2009 OPEN INTRA-MART
19
クラス開発ポイント
クラス定義
ルール
１ファイルに１クラスを定義
すべてクラスのスーパークラスは im.lang.PackmanObject
本当は Native の Object です。。
新規クラスや既存クラスを継承して機能拡張
ネイティブクラスの拡張可！
手順
パッケージ宣言
インポート宣言
クラス定義
インスタンス変数、インスタンスメソッドの定義
クラス変数、クラスメソッドの定義
制約
オーバーライドした親メソッドは実行できない Ex: super.xxxx()
Copyright© 2009 OPEN INTRA-MART
20
[参考] クラス開発 -- パッケージ宣言 --
Copyright© 2009 OPEN INTRA-MART
21
[参考] クラス開発 -- インポート宣言 --
Copyright© 2009 OPEN INTRA-MART
22
[参考] クラス開発 -- クラス定義 --
Copyright© 2009 OPEN INTRA-MART
23
[参考] クラス開発 -- 拡張クラス --
Copyright© 2009 OPEN INTRA-MART
24
[参考] クラス開発 -- クラス変数、クラスメソッド定義 --
Copyright© 2009 OPEN INTRA-MART
25
アジェンダ
im-UISupplementsプロジェクト紹介
intra-mart をリッチしよう♪
すべては開発基盤？ im-jspackmanとは？
実践！Im-JSPackmanでクラスを作ってみよう♪
im-UISupplementsプロジェクト今後の計画
Copyright© 2009 OPEN INTRA-MART
26
今後の計画
im.ui (im-UISupplements)
〜 UI部品s 〜
im.util
im.text
im.jsunit
im.net
そろそろ
開発しよ！
im.log
im.lang (im-JSPackman[core])
Native JavaScript
下位層は、im.ui パッケージを開発しながら充実していきます♪
Copyright© 2009 OPEN INTRA-MART
27
具体的には
UI 部品
フローティングウィンドウ、ツリー etc…
デモ：フローティングウィンドウの可能性の広さ
バリデータ
サーバサイドと連動まで検討
「スーパープログラマ榎本さん」が作ったライブラリに感動！
intra-mart タブ化
アプリケーションをintra-mart画面内のタブで表示
Yahoo! Mail β版のイメージ！
im-Jsspと連動したサンプルアプリケーション
検討中♪API開発 -- インポート宣言 --
ご興味を持たれた方は是非
一緒に楽しく開発しましょう♪
Copyright© 2009 OPEN INTRA-MART
28