WGP チュートリアル Acroquest Technology 株式会社
チュートリアルの目的 本チュートリアルの目的は 課題を解く ( 実装する ) ことで WGP の利用方法を習得することです 1. 課題内容 1 成績管理システム クライアント (JavaScript) と サーバ (SpringMVC) とを Ajax で連携させる 2 リバーシ リッチな 2D 描画やアニメーションを実装する 2
チュートリアル 1: 成績管理システム 3
1. 概要 概要 1 WGP を使った Web アプリケーションを作成する 2 JavaScript クライアントと SpringMVC を用いて実装したサーバ (WebFW) を Ajax 通信で連携させる 4
2. 課題内容 課題内容 1 成績管理システムを作成する 課題毎に設定された複数の問題について 受講者の点数を表 / グラフで表示する データはサーバで保持する 値は固定値とし リロードするたびに初期値に戻って良い 画面に表示するツリー テーブル グラフはオブジェクトとして作成すること JavaScript のオブジェクト指向を利用する方法は ( 参考 )JavaScript 導入 を参照すること 2 作成には WGP と以下のライブラリを用いること 利用するライブラリ 説明 jquery jquery UI Jstree jqgrid dygraphs jeegoocontext JavaScript 汎用ライブラリ jquery 上に構築された UIライブラリツリーコンポーネントを提供するjQuery プラグインテーブルコンポーネントを提供するjQuery プラグイングラフコンポーネントを提供する JavaScriptライブラリコンテキストメニューを提供するjQuery プラグイン 5
3. 画面イメージ テーブル テーブル表示時の画面イメージ 技術課題 テーブル グラフ 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 受講者 問題 1 問題 2 問題 3 合計 受講者 A 10 10 10 30 受講者 B 20 10 15 45 受講者 C 20 20 20 60 削除 6
4. 画面イメージ グラフ グラフ表示時の画面イメージ 技術課題 テーブル グラフ 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 点数 100 90 受講者 A 80 70 受講者 B 60 受講者 C 50 40 30 20 10 0 1 2 3 4 問題番号 7
5. コンポーネントの説明 テーブル テーブル表示時の各コンポーネントの説明 初期表示時はツリーのみ表示する ツリーで選択したノードの名前と同じ値を表示する 技術課題 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 右クリックで表示されるメニュー 課題 1-5 削除をクリックすると 課題 2 ツリーから該当の項目が削除される 課題 2-1 課題 2-2 課題 2-3 最下層のノードを選択した際に テーブルの表示およびグラフの表示が切り替わる テーブル 課題 1-1 タブをクリックすることで グラフ表示とテーブル表示を切り替えられる グラフ各問題と合計は数値によるソートができる (jqgrid の機能を使う ) 受講者問題 1 問題 2 問題 3 合計 受講者 A 10 10 10 30 受講者 B 20 10 15 45 ラジオボタンで行選択後 削除ボタン押下で行削除できる ( ラジオボタン非選択時は Disabledにする ) ツリーのノードを選択した時に 受講者 C 20 20 20 60 グリッドの値が切り替わる サーバ側のアプリが メモリ上にデータを持つ ソースコードにデータを直接書いてもよい ラジオボタン選択時には行の背景色が変わる 削除 8
6. グラフ表示時のコンポーネントの説明 グラフ表示時の各コンポーネントの説明 技術課題 テーブル グラフ ツリーで選択したノードの名前と同じ値を表示する 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 点数 100 90 80 70 60 50 40 Y 軸を点数とする 30 最小値 0 最大値 20 100 目盛間隔 10 10 と設定し表示する 0 受講者 A 受講者 B 受講者 C dygraphs を用いたグラフ描画を行う 凡例を表示すること 場所や背景色は任意でよい 1 2 3 4 X 軸は問題番号の値をとる 最小値 1 最大値 4 目盛間隔 1 に設定して表示する 問題番号 9
7. 作成手順 以下の手順で開発する 1 各ライブラリの調査 目安時間:8h 2 タブ画面の作成 目安時間:4h 3 ツリーの作成 目安時間:8h 4 テーブルの作成 目安時間:8h 5 テーブルの行削除 目安時間:4h 6 グラフの作成 目安時間:8h 7 コンテキストメニューの作成 目安時間:4h 8 Server 通信実装 ( 初期描画時 ) 目安時間:16h 9 Server 通信実装 (Ajax 通信 : データ取得 ) 目安時間:8h 10 Server 通信実装 (Ajax 通信 : データ削除 ) 目安時間:8h 10
8.WGP の起動方法 WGP の起動方法 1 WGP のサイトに移動し ブランクプロジェクトをダウンロードする http://wgp.sourceforge.net/ 2 1 で取得した WGP.zip を展開する 3 展開して作成したブランクプロジェクトをインポートする 4 Tomcat でインポートしたプロジェクトが起動できてれば完了です 注意点 Tomcat のバージョンは 7.0.x( 最新版 ) を使用してください 11
9. 各ライブラリの調査 各ライブラリの調査 以下の機能を実現するために使う各ライブラリのメソッド名と引数をそれぞれ調査する 引数に option を渡すメソッドの場合 option の中身の調査は不要です 1 jquery UI を用いたタブの実現機能 2 jstree によるツリーの作成 3 jqgrid を用いたテーブルの作成 4 dygraphs を用いたグラフの作成 5 jeegoocontext を用いたコンテキストメニューの作成 6 jquery を用いた Ajax 通信 12
10. チュートリアル 1 実装 ( クライアント ) チュートリアル 1 実装 ( クライアント ) の流れ 1 タブ画面の作成 2 ツリーの作成 3 テーブルの作成 4 グラフの作成 5 コンテキストメニューの追加 13
10-1. タブ画面の作成 タブ画面作成の作業内容 1 画面をツリー領域と テーブル / グラフ領域に分ける 2 テーブル / グラフ領域をタブ化する テーブル グラフ 14
10-1.( 手順 1) レイアウトの設定 以下のレイアウトを作成する 800px 300px 900px 1 画面全体 ( ツリー領域とグラフ / テーブル領域 ) を表す div タグを生成する <div id="persarea"></div> 15
10-1.( 手順 2) ビューの追加 2 ビューを追加する var viewarea1 = {width : 300, height : 800, rowspan : 1, colspan : 1 }; var viewarea2 = {width : 900, height : 800, rowspan : 1, colspan : 1 }; var table = [ [ new wgp.perspactivemodel(viewarea1), new wgp.perspactivemodel(viewarea2) ] ]; var perspactiveview = new wgp.perspactiveview({ id : "persarea", collection : table }); var perspactiveview = new wgp.perspactiveview({ id : "persarea", collection : table }); perspactiveview.dropview("persarea_drop_0_0", "tree_area"); perspactiveview.dropview("persarea_drop_0_1", "contents_area"); レイアウト情報 viewarea1: ツリー領域 viewarea2: グラフ領域 ビュー情報を配列にする Div タグの ID を指定 16
10-1.( 手順 3) 表示確認 以下の構成の画面が表示されることを確認する テーブル グラフ ウィンドウサイズを変更しても 各領域のサイズが固定されていることを確認する 17
10-2. ツリーの作成 WGP のツリービューを用いてツリーを表示する ツリービュー表示時の各種設定値及び 表示値は JavaScript ファイルに直接書き込んでよい このとき 表示値に ID を振り HTML の id 要素に設定しておくこと 可能であれば 選択した要素を青く反転すること 技術課題 課題 1 テーブル グラフ 課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 HTML タグの id 要素に ID を振っておくこと 課題 2 課題 2-1 課題 2-2 課題 2-3 18
10-2.( 補足説明 )Backbone.js について 1. ツリーの作成には Backbone.js を用いる 2. Backbone.js とは? 1 JavaScript 上で MVC モデル構造 ( ) を持ったアプリケーションを開発するための JavaScript フレームワーク 2 モデル ビュー イベントを定義する 3. 参考 URL http://documentcloud.github.com/backbone/ MVC モデルについては 9-2. MVC モデル を参照すること 19
10-2.( 手順 1) ビューの追加 1 ツリーのデータを表す Model を Backbone.js の構成に基づいて作成する user.treemodel = Backbone.Model.extend({ defaults:{ text : "", styleclass : [], style : {} }, idattribute: treeid" }); デフォルト定義 user.treelist = Backbone.Collection.extend({ }); model : user.treemodel 20
10-2.( 手順 2) モデルの追加 1 2 ツリーの View を Backbone.js の構成に基づいて作成する user.treeview = wgp.abstractview.extend({ initialize : function(arguments){ this.divid = this.$el.attr("id"); this.ulid = this.divid + "_ul"; this.maxid = 0; this.registercollectionevent(); this.render() },render : function(){ $("#" + this.divid).append("<ul id='" + this.ulid + "'></ul>"); }); 初期化時 描画時 21
10-2.( 手順 3) モデルの追加 2 3 View 及び Model を作成する // idはパースペクティブ領域初期化時のidと同値を指定する var treeview = new user.treeview({ id : "tree_area", model : new user.treemodel(), collection : new user.treelist() }); 22
10-3. テーブルの作成 jqgrid を用いて 成績をテーブル表示する jqgrid 表示時の各種設定値及び jqgrid の表示値は ここでは JavaScript ファイルに直接書き込んでよい このとき 受講者それぞれに ID 列を設け ID を振ること そのうえで ID 列は非表示列に設定すること radio ボタン表示は列の設定で行うことができる 技術課題 テーブル グラフ 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 ID 列を設定するが表示しない 課題 1-1 受講者 問題 1 問題 2 問題 3 合計 受講者 A 10 10 10 30 受講者 B 20 10 15 45 受講者 C 20 20 20 60 削除 23
10-3.( 注意点 )jqgrid の利用方法 jqgrid 利用時には以下の注意が必要である 1 2 つの js ファイルを読み込む必要がある 1. ロケール定義ファイル 2. ライブラリ本体 2 (1) ロケール定義ファイル (2) ライブラリ本体の順で読み込む必要がある ライブラリ本体がロケール定義ファイルを参照するため 読み込む順番を逆にするとエラー (b.jgrid.jqid is not a function) が発生する エラーメッセージから原因を特定することが難しい 24
10-3. テーブルの行削除 削除ボタン押下時に行を削除する 削除を行うメソッドが jqgrid に用意されているので 使用すること 技術課題 テーブル グラフ 課題 1 課題 1-1 課題削除 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 課題 1-1 受講者 問題 1 問題 2 問題 3 合計 受講者 A 10 10 10 30 受講者 B 20 10 15 45 受講者 C 20 20 20 60 削除 25
10-3.( 手順 )jqgrid の行削除メソッド 1. 行を削除するメソッドには delrowdata と delgridrow が存在する それぞれのメソッドについて調べること jqgrid wiki: http://www.trirand.com/jqgridwiki/doku.php ( メソッド名で検索をかけると良い ) 2. delrowdata メソッドを利用する 例 : $(selector).delrowdata( rowid ); 行の id を設定する方法を調べること delgridrow はサーバ通信を伴うため今回は不適 26
10-4. グラフの作成 dygraphs を用いて 成績をグラフ表示する dygraphs 表示時の各種設定値及び dygraphs の表示値は JavaScript ファイルに直接書き込んでよい 技術課題 課題 1 テーブル グラフ 課題 1-1 課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 点数 100 80 60 40 20 凡例部分 課題 2-3 0 1 2 3 4 問題番号 27
10-4.( 注意点 ) グラフの生成タイミング タブを生成してからグラフの生成を行う必要がある 1 タブを生成する際にタブ内の width, height 値が変更されるため グラフを先に描画しておくとグラフが壊れて表示されない グラフ表示領域の width, height が 0 となってしまう 28
10-5. コンテキストメニューの作成 1 WGP のコンテキストメニュー作成機能を用いて ツリーにコンテキストメニューを表示する コンテキストメニュー表示時の各種設定値及び 表示値は HTML ファイル及び JavaScript ファイルに直接書き込んでよい 技術課題 課題 1 テーブル グラフ 課題 1-1 削除課題 1-2 課題 1-3 課題 1-4 課題 1-5 課題 2 課題 2-1 課題 2-2 課題 2-3 29
10-5. コンテキストメニューの作成 2 親のノードをクリックした際に コンテキストメニューが表示されないよう制御する 表示時のコールバックメソッドの戻り値に何を返すかがポイント 技術課題 課題 1 テーブル グラフ 課題 1-1 課題 1-2 課題 1-3 課題 1-4 課題 1-5 クリックしても表示されない 課題 2 課題 2-1 課題 2-2 課題 2-3 30
10-5.( 手順 ) コンテキストメニューの表示方法 WGP では以下のようにコンテキストメニューを表示する 1 div タグを生成する <div id= targetcontext"></div> 2 メニューを生成する <ul id="contextmenu"> </ul> <li id="delete"> 削除 </li> 3 1 で生成したタグにコンテキストメニューを設定する contextmenucreator.createcontextmenu( targetcontext, contextmenu, option); option については jeegoocontext のマニュアルを参照 31
10-5.( 注意点 ) メニューの作成タイミング コンテキストメニュー構築後にツリーを構築すると コンテキストメニューが表示されない 1 間違った解決策 : プログラムの実行順序を変更する ツリーメニューやコンテキストメニューの作成は別スレッドで行われるため この方法でもメニューは表示されない 2 解決策 :jstree 構築完了時の処理に入れる jstreeは構築が完了すると loaded.jstree が呼び出される ここにメニュー構築処理を入れる jquery の bind メソッドを利用する 例 : $(selector).bind( loaded.jstree, function(){ // コンテキストメニュー構築処理 }); loaded.jstree に対して コールバック関数を追加 32
11. チュートリアル 1 実装 ( サーバ ) チュートリアル 1 実装 ( クライアント ) の流れ 1 概要説明 2 SpringMVC 導入 実装 3 Ajax 通信導入 実装 33
11-1.Server 通信実装 ( 初期描画時 ) これまで クライアント側で設定していたデータを サーバから読み込むように変更する 1 初期描画用のデータは サーバ側からクライアントに渡し データをもとにクライアント側のコンポーネントを構築すること Model クラスにデータを書き込み クライアントで読み込む データ形式は JSON 形式とする 初期値の構築は自由に実装してよい 2 サーバとのデータの受け渡しは SpringMVC を用いること 3 HTML ではなく JSP を用いること 34
11-2.MVC モデル 1. MVC モデルとは? 表示 操作を伴うアプリケーションを作成するときに用いられる 標準設計方法である 2. アプリケーションを Model, View, Controller に分割して整理する 1 Model 2 View 3 Controller ロジックとデータを示す 3. なぜ MVC に分割するのか? 画面等のユーザインタフェースを示す 入力処理 ページ遷移などを示す 1 モジュール分割が容易になり 保守性 再利用性が高まる 2 ユーザインタフェース (View) の取り換えが容易である 35
11-3.SpringMVC 1. SpringMVC とは? Java で作成された Web フレームワーク 画面遷移や ブラウザ - サーバー間の入出力パラメータの受け渡しといった Web アプリケーションを簡単に作るための機能を提供する 2. 参考 URL http://www.springsource.org/ SpringMVC を用いれば MVC モデルを用いて 効率よく Web システムを開発できます 36
11-4. 本課題での MVC モデル グラフデータの削除を例に MVC の役割を示す 1 削除ボタンを押す View 6 jsp を用いてブラウザに画面表示 ( 削除が反映 ) 2 データ削除を要求する 5 JSP ファイルを返す Controller W GP 4 データを返す 3 データを削除する 受講者 問題 1 問題 2 問題 3 合計 受講者 A 10 10 10 30 受講者 B 受講者 C 20 10 15 45 20 20 20 60 Model 削除 37
11-5.( 手順 1)SpringMVC の導入 1. 空の Spring MVC プロジェクトを Eclipse で開く 2. M,V,C は以下のファイルに結びつく 1 Controller : サーバサイドプログラム src/main/java/jp.co.acroquest.example.controller 2 Model : サーバサイドプログラム src/main/java/jp.co.acroquest.example.service 3 View : クライアントサイドプログラム WebContent/WEB-INF/views/xxxx.jsp css,js,image などの参照ファイル 上記ファイルは /WebContent/resources 配下に入れないと読み込めないので注意 各自 Spring MVC について調べること Spring Framework 参考 URL: http://www.springsource.org/ 成果物を Spring MVC に移行させるためには主にこの 2 つを編集する 38
11-5.( 手順 2)SpringMVC への移行 (1/4) 1. クライアントとサーバの通信を定義する ある URL に対する振る舞いを 1 対 1 で定義する Controller クラスを用いて定義する ブラウザ表示 View 1 リクエストを送る 2 jspを返す 2. コントローラの定義方法 1 controllerクラスを新たに定義する 2 controllerクラス内に URLとメソッドの対応を定義 3 メソッド内の処理を記述する 4 表示するjspを指定する Controller 39
11-5.( 手順 3)SpringMVC への移行 (2/4) 3. Controller クラスを定義する 1 Controllerパッケージ内に定義する 2 クラス名上に @Controllerを付け加える これにより controller クラスと認識される 4. URL とメソッドの対応を定義する 1 @RequestMapping をメソッド上につける @RequestMapping( value= /mapping/, method=requestmethod.get ) public String methodname(locale locale, Model model){} メソッドに対応する URL を記述する この例の場合 http://localhost:8080/<contextname>/mapping/ よく使われるリクエストメソッドに GET と POST がある それぞれの違いについて調べる でリクエストされると methodname メソッドが呼ばれる 40
11-5.( 手順 4)SpringMVC への移行 (3/4) 5. メソッド内の処理を追加する 1 クライアントから渡された値を取得する 2 クライアントに値を渡す public String methodname(@requestparam(value= keyname") String studentid } 6. 表示する jsp を指定する 1 return 値に jsp のファイル名を記述する public String methodname(locale locale, Model model){ } // 処理 return jspname ; Locale locale, Model model){ model.addattribute( keyname, value); 2Key と value を設定し 値を渡す どちらも String 型で定義する http://localhost:8080/projectname/ にアクセスした場合 WebContent/WEB-INF/views/jspName.jsp が呼び出される 1Key を設定し 値を取得する 41
11-5.( 手順 5)SpringMVC への移行 (4/4) 7. HTML ファイルを JSP ファイルに移行する 1 HTML の内容を JSP にそのままコピー 2 css,js,image のパスを jsp 用に変更する <%=request.getcontextpath()%> を使う../ のような参照方法が使用できなくなるため 例 ) jquery のディレクトリパスが以下の場合の例 /WebContent/resources/lib/jQuery/js/jquery-1.7.1.min.js <%=request.getcontextpath()%>/resources/lib/jquery/js/jq uery-1.7.1.min.js ここまでで Spring MVC を用いて View を表示する部分が完了! 42
11-6.( 補足説明 )JSON データの作り方 クライアントにデータを渡すためには Java オブジェクトを JSON 形式に変換する必要がある 1 JSON 形式を簡単に作成できる JSONIC を用いる Java オブジェクトを簡単に JSON 形式に変換可能 Java オブジェクトのフィールド名を key に 値を value とした連想配列型データとして JSON 型に変換する List 型の Java オブジェクトであれば Array 型の JSON 形式に変換する 2 以下のように変換される private String id; private String name; { id : 123, name : daniel } //getter と setter を必ず作ること 43
11-7.Server 通信実装 (Ajax 通信 : データ取得 ) 1. ツリーの最下層のノードをクリックした際に サーバからデータを取得する 1 jquery の Ajax 通信を用いて サーバにリクエストを送信すること リクエストは POST 形式とし データに課題番号を設定すること サンプルプログラムを参考にすること 2. 取得したデータを用いて画面を表示し直す 1 jqgrid の再描画の際に 一度表示値をすべて削除して入れ直す必要がある Callback 処理内で再描画をおこなうこと 44
11-7.( 手順 1)Ajax 通信のやり方 (1/2) ページのリロードをせずにサーバと通信を行う手法が Ajax 通信である 1 Ajax 通信の利点 サーバからデータのみ取得し ページの一部のみ書き換えられる Ajax 通信 View 3 画面の一部を描画しなおす 1 P OST 形式のリクエストを送る 2 JSON 形式のデータを返す Controller 45
11-7.( 手順 2)Ajax 通信のやり方 (2/2) 2 設定方法 クライアント jqueryのajaxメソッドを使用する メソッドの引数には以下を設定する url : 呼び出したいメソッドの URL type : POST data : 送信したいデータ Success : 通信成功時の処理 サンプルプログラム参照 サーバ @RequestMapping の method 属性に RequestMethod.POST を設定する @ResponseBody を設定する 戻り値に Java オブジェクトを設定することで 自動で JSON 形式に変換し データを返す @RequestParam にクライアントから送信されるデータの key を設定する 46
11-8.Server 通信実装 (Ajax 通信 : データ削除 ) 1. 以下の場合にサーバに削除処理を送信する 1 コンテキストメニューで削除が選択されたとき 2 削除ボタンをクリックしたとき クリックイベントを設定すること リクエストは POST 形式とする 2. サーバ側のデータを削除する 1 画面更新を行った際に 削除されたデータが表示されないこと 47
チュートリアル 2 チュートリアル 2: リバーシ 48
1. 目的 チュートリアル 2 以下のスキルを身に付ける 1 Raphael を用いてリッチな画面描画やアニメーションを実現できるようになる 2 WGP を用いて画面を構築できるようになる 49
2-1. 仕様 : 画面イメージ チュートリアル 2 以下のような構成で画面を作成する 1 リバーシ Window オセロの盤面などを表示する 1 2 メッセージ Window ゲームについての情報を文字で表示する 2 50
2-2. リバーシ Window 以下を実現する 1 盤面の表示 2 クリックで石を配置 3 スコア表示 4 プレイヤー表示 現在のプレイヤーをハイライトで表示する 1. 盤面の表示 チュートリアル 2 4. プレイヤー表示 2. クリックで石を配置 3. スコア表示 51
2-3. メッセージ Window チュートリアル 2 ゲームについてのメッセージを表示する 1 各メッセージには表示時刻を付けること 2 表示する内容については自分で考えること 表示時刻 52
3-1. 実装ワンポイントアドバイス 1 チュートリアル 2 1. WGP で生成した window 内に Raphael を用いて描画する手順 1 Raphael のインスタンスを作成する persmanager.dropview("persarea_drop_0_0", DIV_ID); paper = new Raphael( document.getelementbyid( DIV_ID ), WIDTH, HEIGHT ) WGP の dropview で登録した DIV の ID 作成する Raphael の描画領域の大きさ 2 作成したインスタンスを用いて描画を行う Raphael: http://raphaeljs.com/ 53
3-2. 実装ワンポイントアドバイス 2 チュートリアル 2 2. Raphael を用いたアニメーションの書き方 circle.animation( params, ms, [easing], [callback] ) 1 params: 変化後の属性値を連想配列形式で記述する 利用可能な属性についてはリファレンス参照 http://raphaeljs.com/reference.html#element.attr 2 ms: アニメーション開始から終了までの時間 ( ミリ秒 ) 3 easing: 変化の仕方 利用可能な値はリファレンス参照 http://raphaeljs.com/reference.html#raphael.easing_formulas 4 callback 関数 例 : circle を (100, 100) まで 1000ms で移動させ 完了したらアラートを出現する circle.animate( { cx: 100, cy: 100 }, 1000, <>, function(){ alert() } ); 54
3-3. 実装ワンポイントアドバイス 3 チュートリアル 2 3. マウスカーソル位置の取得には注意が必要 1 event オブジェクトからはページ左上からの座標 (px, py) しか得られない 余白を考慮する必要あり! 2 Raphael の描画領域の左上座標 (rx, ry) を取得し Raphael 描画領域上の座標を計算する ( px rx, py ry ) (rx, ry) Raphael 描画領域 (px, py) 55
( 参考 )JavaScript 導入 ( 参考 )JavaScript 導入 56
1.JavaScript におけるオブジェクト 1. JavaScript のオブジェクトの記述形式のことを JSON(JavaScript Object Notation) と言う 1 キーと値のペアの集合である 2 Java における Map と似ている ( 参考 )JavaScript 導入 JavaScript var obj = { key1 : Acro, key2 : Quest } Java Map<String, String> obj = new HashMap<String, String>(); obj.put( key1, Acro ); obj.put( key2, Quest ); 57
2. 関数オブジェクト ( 参考 )JavaScript 導入 1. JavaScript において関数はオブジェクトの 1つである 2. 一般的なオブジェクトと同様の扱いが可能である Java では関数 ( メソッド ) とオブジェクトは完全に別物 JavaScript 特有の関数オブジェクト利用例 var func1 = function(){ alert( test ) }; func1( ); // カッコをつけて実行 var func1 = function(){ alert( test ) }; var func2 = function( arg ){ arg(); // 引数にセットした関数オブジェクトを実行 } func2( func1 ); // 関数オブジェクトを引数にセット 58
3. 無名関数 ( 参考 )JavaScript 導入 1. 無名関数とは匿名の関数オブジェクトであり イベントリスナなどに用いることが多い イベントリスナ : イベントが発生した時に実行される関数 1 無名関数の利用例 : $(selector).addeventlistener( click, function(event){ // 処理 }, false ); 関数オブジェクトに置き換えた例 : 無名関数 var clicklistener = function(event){ // 処理 }; $(selector).addeventlistener( click, clicklistener, false); 参考 URL :http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20364588/ 59
4. 無名関数利用時の注意 ( 参考 )JavaScript 導入 1. 無名関数内部では this を使わないこと 悪い例 var ClassName = function(){ } this.val = String ; ClassName.prototype = { } method: function(){ } $( #id_name ).bind( loaded.jstree, function(){ }); alert( this.val ); this が無名関数を指すため undefined error になる 良い例 var ClassName = function(){ } this.val = String ; ClassName.prototype = { } method: function(){ } var instance = this; $( #id_name ).bind( loaded.jstree, function(){ }); alert( instance.val ); スコープ内での変数に格納しておく めでたく String が表示される 60
5. コールバック関数 ( 参考 )JavaScript 導入 1. コールバック関数とは呼び出し先の関数の実行中に呼び出されるよう指定した関数 JavaScript ではマウス移動などのイベントにコールバック関数を設定することが多い 1 マウスクリックに設定する例 $( #button ).addeventlistener( click, function(event){ alert( #button がクリックされました ); }, false ); (2) コールバックの実行 上記プログラムは以下の順序で実行される (1) コールバック関数の登録 ( 関数の中身は実行されない ) ( ユーザがマウスをクリックする ) (2) コールバック関数の実行 (1) コールバックの登録 61
6. オブジェクト指向プログラミング (1/4) ( 参考 )JavaScript 導入 1. Java Script 1 クラスの定義 var ClassName = function( args ){ } this.val1; // 属性の定義 this.val2; // 属性の定義 ClassName.prototype={ } method1: function(args){ }, // method1 の処理 method2: function(args){ } インスタンス作成時に呼ばれる // method2 の処理 メソッドの戻り値は任意 prototype については次頁参照 2. Java 1 クラスの定義 class ClassName{ public int val1; // 属性の定義 public int val2; // 属性の定義 ClassName(args){ // コンストラクタ } public void method1(args){ // method1 の処理 } public void method2(args){ // method2 の処理 } } 62
7. オブジェクト指向プログラミング (2/4) ( 参考 )JavaScript 導入 1. Java Script 2 インスタンスの作成 メソッド呼び出し var classname = new ClassName(); classname.method1(args); 3 継承 var SubClass = function(){ // 属性の定義 } // SuperClassのメソッドを継承 SubClass.prototype = new SuperClass(); 2. Java 2 インスタンスの作成 メソッド呼び出し ClassName classname = new ClassName() classname.method1(args); 3 継承 class SubClass extends SuperClass{ // 省略 } // メソッドの定義 SubClass.prototype.m2=function(){.}; SubClass.prototype.m3=function(){.}; 新規メソッドを追加するときに前頁のようにカンマ区切りでのオブジェクト的記法が利用できない 理由は調べること 63
8. オブジェクト指向プログラミング (3/4) 1. prototype を用いるとオブジェクト指向プログラミングが可能となる // クラスの作成 var SampleClass = function( mes ){ } this.message = mes; SampleClass.prototype ={ } showmessage: function(){ } alert( this.val ); インスタンスを複数作成し 異なる属性値を持たせることができる // クラスの利用 // インスタンスの作成 var instance1 = new SampleClass( Hello ); var instance2 = new SampleClass( Bye ); // メソッドの呼び出し instance1.showmessage(); Instance2.showMessage(); ドット演算子を用いてメソッドを呼び出す // 属性値の利用 instance1.message = Welcome to WGP ドット演算子で属性を読み書きできる ( 参考 )JavaScript 導入 64
9. オブジェクト指向プログラミング (4/4) 2. prototype を使わない場合 オブジェクト指向プログラムにならないので注意すること! 間違った例 // クラスの定義 var obj = function(){ this.message = "Message"; }; ( 参考 )JavaScript 導入 this を用いた変数の参照ができないので undefined となる //prototype を使わずにメソッドを宣言 obj.method = function(){ alert( this.message ); }; // インスタンスの作成 var instance = new obj(); instance.method(); // エラー発生 obj.method(); ドット演算子でメソッドを参照できないため エラーが発生する メソッドを呼び出すことができるがアラートの表示は undefined 65
10.Selector ( 参考 )JavaScript 導入 1. HTML タグを特定するための記法であり 課題では各パーツを表示する場所の指定に用いる 1 ID 例 : <div id= id_name > #id_name と記述 ページ内に同じ ID が複数あってはならない 2 Class 例 : <table class= class_name >.class_name と記述 同じクラス名をページ内で複数用いることができる 3 Name 例 :<input type= radio name= group_name > [name=group_name] と記述 ラジオボタンのグループ化などに用いる CSS の書き方と同じ 66
11.jQuery を利用した Selector 記法 ( 参考 )JavaScript 導入 1. jquery メソッドの利用方法は以下の通りである 1 jquery(selector) 意味は同じ 2 $(selector) $ を用いることが多い 2. Selector を実際に記述した例 1 $( #id_name ).method( ); 2 $(.class_name ).method( ); 3 $( [name=group_name] ).method( ); jqueryのメソッドはリファレンスを参照 jquery 日本語リファレンス : http://semooh.jp/jquery/ 67
これであなたも WGP 開発者だ! InfrastructuresEvolution 68