講演資料 - InterSystems

jQueryを使用した
jQueryを使用した
CSPアプリケーションの
CSP
アプリケーションの
構築
インターシステムズジャパン㈱
イ
タシテ
ジャ
㈱
テクニカルコンサルティング部
皆本稔彦
アジェンダ
• jQueryとは
• データ交換方法
• プラグイン
• スプレッドシート
• グラフ表示
• jQuery Mobile
• サーバプッシュ機能
サバプシ機能
• WebSocket
2
jQueryとは
jQuery
とは
• オープンソース・ソフトウェア
(MIT License)
• 軽量Javascriptライブラリ
• クロスブラウザー設計
• IE,Chrome,FireFox,Safari,Opera …
• http://jquery.com/
http://jquery com/
3
jQueryとは
jQuery
とは
• セレクターでHTMLの一部を選択
• $("element")
(
)
• $("#id")
• $(".class")
… 特定のタグ
… 特定のID
… 特定のクラス
• 選択したオブジェクトに処理を実行
• $("element").Method();
• $("element").Event( function() { … });
4
jQueryライブラリの使用
jQuery
ライブラリの使用
• ダウンロードし、webサーバ上に設置
•
• CDN(コンテンツディストリビューション
ネットワーク)を利用
5
例
• メニュー
セレクター
ID指定
HTMLに従って
メニューを描画
6
メニュー描画
メソッド
Readyメソッド
Ready
メソッド
• Javascriptは読込時点で実行
• Readyメソッドはページ読込後に実行
• 記述方法
• $(document).Ready(function() {
… (jQueryの処理)
});
• 省略形
• $(function() {
… (jQueryの処理)
});
7
ツールボックス
計算機
が表示
される
ここを
クリック
8
ツールボックス
Javascript
ハンドル
HTML
… 計算機部分
パネル
9
Cacheとの連携方法
Cache
との連携方法
• HTML
• JSON
• XML
• Hyperevent
10
HTMLでの
HTML
での連携
連携
• CSPでHTMLを生成、ブラウザに表示
$ load() メソッド
• $.load()
$("element").load( url, param);
• セレクターで選択したオブジェクトにURL
で指定したページのHTMLを挿入
11
JSONでの
JSON
での連携方法
連携方法((ブラウザ側
ブラウザ側))
• $.ajax() メソッド
$.ajax({
$
j ({
dataType: "json",
url: url,
data: param,
success: function( data ) {
… データ受信時の処理
});
});
12
JSONでの
JSON
での連携方法
連携方法((サーバ側
サーバ側))
• %CSP.Pageを継承したクラス
OnPreHTTP()にてリクエストパラメータで
タで
• OnPreHTTP()にてリクエストパラメ
処理を分岐
• セキュリティ問題
• 認証チェック
• プライベートページは使用不可
13
HyperEvent
• Javascript から #server(Cacheメソッド)#
• 同期通信のみ
• メソッドをCSPファイル上に記述可能
14
jQueryプラグイン
jQuery
プラグイン
• 様々なプラグインが存在
• 容易に拡張可能
• http://plugins.jquery.com/
15
jQueryプラグイン例
jQuery
プラグイン例
• ParamQuery Grid
http://paramquery.com/
• jqPlot
http://www.jqplot.com/
16
ParamQuery grid
• スプレッドシートプラグイン
• セル編集可能
17
デモシステム
• 旅費精算システム
デタ構造
• データ構造
Report
レポート名
金額
申請者
承認者
18
親
Item
支払年月日
子移動元
移動先
金額
CrudManager
• テーブル、表示カラム、キーを設定
SQLでResultSetを%session Data上にコピー
• SQLでResultSetを%session.Data上にコピ
• 保存時に%session.DataをDBに保存
セッション
情報
シートの
編集
データベース
差分のみ
保持
19
CrudManager
PqGrid
データ取得
Resultset
セル更新
行追加、削除
データ保存
20
Database
CrudManager
SQLでResultsetを取得
Resultset
ResultSet を
%session に保存
%session に保存
%sessionの内容を更新
jqPlot
• グラフ表示プラグイン
• グラフ種別等プラグインで拡張可能
21
jQueryプラグインの作成
jQuery
プラグインの作成
• Jsファイル作成(jquery.XXX.js)
$.fn.toolBox = function(options) {
… プラグインの処理
プラグイの処理
}
• CSPファイルより呼出
22
<script type="text/javascript" src="js/jquery.toolbox.js"></script>
:
<script language="javascript">
$(function() {
// ツールボックスを作成
$( "#calctool" ).toolBox();
});
</script>
jQuery Mobile
• モバイルデバイス向けjQueryプラグイン
iPhone Android Blackberry等に対応
• iPhone、Android、Blackberry等に対応
23
HTMLの構造
HTML
の構造
• 1文書に複数ページを持つ
<div data-role="page" >
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
<div data-role="page">
</div>
<div data-role="page">
</div>
24
ページ
Codiqa
• Web画面編集
25
テーマ編集
• ThemeRoller
26
サーバプッシュ機能
• サーバからクライアントへの通知
• WebSocket
• %CSP.WebSocketクラス(2013.1)
27
ブラウザ側
• jQuery-Websocket
• JSON形式で受信
• 要jQuery-JSON
var ws = $.websocket( url, {
events: {
msg: function(e) {
… メッセージ受信時の処理
}
}
});
28
サーバ側
• %CSP.WebSocketクラスを継承
• Server()メソッドに処理を記述
• 出力フォーマット(jQuery-websocket用)
{
"type": プロトコル名,
"data": { … }
}
29
パフォーマンスを上げるために
• 動きの必要な要素を絞り込む
IDセレクターを使用
を使用
• IDセレクタ
• 通信量削減
• 通信タイミング
30
まとめ
• jQueryは軽量なJavascript Framework
• CSPとjQueryとの連携方法
• Hypereventも使用可能
• プラグインの使用
ラグイ
使用
• スプレッドシートやグラフ表示など
31

Download Report