RESTful Web サービスクライアントのスタブの作成
サンプルのダウンロード
このチュートリアルでは、NetBeans IDE 6.0 または 6.1 にある「RESTful Web サービスのリモーティング機能」を使用して、Web 2.0 のクライアントアプリケーションを開発する方法を習得します。この機能には、RESTful Web サービスのリソースクラスから JavaScript クライアントのスタブを生成するウィザードがあります。これを実行すると、RESTful Web サービスにアクセスするクライアントアプリケーションを指定することで、処理が簡略化されます。このウィザードでは、RESTful Web サービスを含むプロジェクトの一覧からプロジェクトを選択できます。プロジェクトを選択してウィザードを完了すると、クライアントアプリケーションの基礎となる JavaScript クライアントのスタブが作成されます。このチュートリアルでは、この機能について手順をひととおり説明します。
目次
このチュートリアルに従うには、次のソフトウェアとリソースが必要です。
NetBeans IDE
Web および Java EE の version 6.1 または 6.0
Java Development Kit (JDK)
version 6 または
Java EE 互換の Web サーバーまたはアプリケーションサーバー
Tomcat Web サーバー 6.0 および/または重要: このチュートリアルで Tomcat を使用する場合は次を参照してください。 REST による Tomcat に関する NetBeans の Wiki
データベース
NetBeans IDE に付属の Java DB または最新バージョンの MySQL
musicdb.sql スクリプト ダウンロード
Tomcat および GlassFish は、どちらも NetBeans IDE の Web および Java EE の配布とともにインストールできます。または、GlassFish のダウンロードページ または Apache Tomcat のダウンロードページ からダウンロードすることもできます。
トラブルシューティングのために、完了したサンプルをダウンロード してソースを調べることもできます (任意)。
このチュートリアルでは RESTful Web サービスのプラグインも必要です。IDE で「ツール」メニューの下にある「プラグイン」マネージャーを開き、「インストール済み」タブで「RESTful Web サービス」プラグインがインストールされているかを確認します。インストールされていない場合、「使用可能なプラグイン」タブから次のようにインストールします。
この節では、「music」という新しいデータベースを作成します。ここに曲のデータを集めて入れます。
データベースを作成します。 NetBeanse IDE 6.0 では、「ツール」>「Java DB データベース」>「データベースを作成」を選択します。
NetBeans IDE 6.1 では、「サービス」タブを開いて「Java DB」または「MySQL」のいずれかのノードを右クリックします。NetBeans で MySQL を設定する手順は、「MySQL データベースへの接続 」を参照してください。サーバーを起動します。データベースのノードを再度右クリックし、「データベースを作成」を選択します。
データベースに music という名前を付けます。Java DB の場合、ユーザー名を music 、パスワードを music にします。MySQL の場合、root ユーザーの資格情報を入力し、スキーマ名は入力しないでください。
musicdb.sql スクリプトをダウンロードします。
この music のスクリプトを開き、SQL エディタの上部にあるツールバーで「Music」の接続を選択します。
SQL エディタのツールバーで「実行」をクリックすると、スクリプトがデータベースに読み込まれます。MUSIC スキーマが存在しないためエラーが報告されることがありますが、このチュートリアルの結果には影響しません。スクリプトが正常に実行されると、データベース構造が「サービス」ビューのデータベース接続ノードに表示されます。
この節では、ウィザードを使用して、データベースのデータからエンティティークラスを生成します。
「ファイル」>「新規プロジェクト」を選択します。「カテゴリ」で「Web」を選択します。「プロジェクト」で「Web アプリケーション」を選択して、「次へ」をクリックします。
「プロジェクト名」に「MusicDB 」と入力します。
「サーバー」から GlassFish などのサーバーを選択します。「完了」をクリックします。
「MusicDB 」プロジェクトノードを右クリックし、「新規」>「データベースからのエンティティークラス」を選択します。
「新規 データベースからのエンティティークラス」ウィザードが表示されます。
「データソース」のドロップダウンリストから「新しいデータソース」を選択します。「データソースを作成」ダイアログが開きます。
「データソース」から「新しいデータソース」を選択します。「データソースを作成」ダイアログが表示されます。
「JNDI 名」に「jdbc/music」と入力します。「データベース接続」でドロップダウンリストから、derby または mysql の /music 接続を選択します。次のような画面が表示されるはずです。表示されたら「了解」をクリックします。
「使用可能な表」から「PLAYLIST」、「SONG」、および「PLAYLIST_SONG」を選択します。「追加」をクリックし、「次へ」をクリックします。
「持続性ユニットを作成」をクリックします。次に示すようにデフォルト値を受け入れ、「作成」をクリックします。
パッケージ名に「org.music 」と入力します。「完了」をクリックします。
IDE は Playlist.java および Song.java という 2 つのエンティティークラスを作成します。
この節では、ウィザードを使用して、前の節で作成したエンティティークラスから RESTful Web サービスを作成します。
プロジェクトを右クリックし、「新規」>「エンティティークラスからの RESTful Web サービス」を選択します。
注: この項目が使用できない場合は、このチュートリアルの最初に説明したように、RESTful Web サービスのプラグインをインストールする必要があります。
「新規 エンティティークラスからの RESTful Web サービス」で、「すべてを追加」をクリックし、「次へ」をクリックします。「生成されるクラス」ページが開きます。パッケージ名の先頭に org.music を追加する必要がある場合があります。正常に完了したページは次のようになります。
「完了」をクリックします。
ウィザードは次のクラスを生成します。
この節では、前の節で作成した RESTful Web サービスのテストクライアントとして GlassFish Tester アプリケーションを使用します。
プロジェクトのノードを右クリックし、「RESTful Web サービスをテスト」を選択します。
Web アプリケーションが構築および配備され、デフォルトのブラウザが開いてテストクライアントのページを表示します。
次に示すように、リンクをクリックするとデータベースからの情報が表示されます。
ブラウザを閉じます。
この節では、新しい Web アプリケーションを作成します。次にウィザードを使用して、これまでに作成した RESTful Web サービスと連係する JavaScript のクライアントスタブを作成します。
「ファイル」>「新規プロジェクト」を選択します。「カテゴリ」で「Web」を選択します。「プロジェクト」で「Web アプリケーション」を選択して、「次へ」をクリックします。
「プロジェクト名」に「MusicApp 」と入力します。
「サーバー」から GlassFish などのサーバーを選択します。「完了」をクリックします。
「MusicApp 」ノードを右クリックし、「新規」>「RESTful Web サービスクライアントのスタブ」を選択します。
基本となる Javascript スタブだけを使用するため、「jMaki Rest コンポーネントを作成」の選択を解除します。
次に示すように、「プロジェクトを追加」をクリックし、先ほど作成した MusicDB プロジェクトを追加します。「完了」をクリックします。
MusicApp プロジェクトを実行します。ブラウザが開きます。ブラウザの URL を http://localhost:8080/MusicApp/rest/TestStubs.html のページに変更します。
クライアントのスタブが正常に生成されると、
プレイリストの URI が Playlists 行に一覧表示され、曲の URI が Songs 行に表示されます。
この節では、アプリケーションの index.html ページを作成します。次に、CSS スタイルシートと関連の画像をダウンロードします。
Music アプリケーションで、「Web ページ」フォルダに「music 」というサブフォルダを作成します。「新規」ウィザードで「その他」のカテゴリから「フォルダ」テンプレートを選択して、サブフォルダを作成します。新規のサブフォルダに、index.html ページを作成します。
次の HTML コードを新規ファイルにペーストします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DeeJay - PlayList Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="./style.css" type="text/css"/>
<!-- 先ほど生成した MusicDB リモート用スクリプトの場所を追加:-->
<script type="text/javascript" src="../rest/Support.js"></script>
<script type="text/javascript" src="../rest/musicdb/MusicDB.js"></script>
<script type="text/javascript" src="../rest/musicdb/Playlists.js"></script>
<script type="text/javascript" src="../rest/musicdb/Playlist.js"></script>
<script type="text/javascript" src="../rest/musicdb/Songs.js"></script>
<script type="text/javascript" src="../rest/musicdb/Song.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<div class="outerBorder">
<div class="border2">
<div class="header">
<!-- アプリケーションのバナーを追加:-->
<div class="banner2"><img src="./images/b.gif" width="500" height="100"/></div>
</div> <!-- header -->
<!-- ページの左側にメニューを追加:-->
<div id="main" class="main">
<table>
<tr>
<td id="leftSidebar" class="leftSidebar bkgclr" class="valign-top">
<br/>
<span class="ml5">Welcome 'Geertjan'</span>
<br/>
<br/>
<table width="150">
<tr>
<td class="cell ht">
<a href="javascript:showPlayLists()" class="links">
<span class="text2">Playlists</span>
</a>
</td>
</tr>
</table>
</td>
<td class="seperator" class="valign-top"></td>
<!-- id を「vw_pl」で DIV タグを 3 つ追加。
これをフックにしてすべてのプレイリストを表示。id 「vw_pl_item」は
プレイリスト中の全曲を表示するフックで、「cr_pl」は
このチュートリアルでは使用しません。自由にプレイリストを
作成する練習に使ってください。-->
<td id="content" class="content bkgclr" class="valign-top">
<div id="vw_pl" class="hide">
<div class="clr"></div>
<div class="heading mglf">Playlists</div>
<div id="vw_pl_content" class="form-container"></div>
</div>
<div id="cr_pl" class="hide">
<div class="clr"></div>
<div class="heading mglf">Create Playlist</div>
<div id="cr_pl_content" class="form-container"></div>
</div>
<div id="vw_pl_item" class="hide">
<div class="clr"></div>
<div class="heading mglf">Playlists</div>
<div id="vw_pl_item_content" class="form-container"></div>
<br/><br/>
<div id="add_song_content" class="form-container"></div>
</div>
</td>
</tr>
</table>
</div> <!-- main -->
</div> <!-- border2 -->
</div> <!-- outerborder -->
<!-- 最後に JavaScript 関数「showPlaylists()」を呼び出す
フックを追加します:-->
<script language="Javascript">
showPlaylists();
</script>
</body>
</html>
style.css を music サブフォルダにダウンロードします。
images.zip をダウンロードし、その内容を新しい music/images サブフォルダに解凍します。
この節では、データベースから取得したプレイリストをアプリケーションで表示します。このためには、前に rest/musicdb フォルダに生成したスクリプトを使用して、すべてのプレイリストを読み込むスクリプトを作成します。
Music アプリケーションの music フォルダに main.js という Javascript ファイルを作成します。「新規ファイル」のウィザードで「その他」のカテゴリから JavaScript のテンプレートを選択して作成します。
注: 時間を節約する場合や問題が発生した場合は、こちらから main.js をダウンロード してください。
次の Javascript スニペットを main.js ファイルにペーストします。
var playlistsObj;
function showPlaylists() {
var app = new MusicDB();
var resources = app.getResources();
for(i=0;i<resources.length;i++) {
var resource = resources[i];
if(resource instanceof Playlists) {
playlistsObj = resource;
var style = 'otab';
var str = '<div><table class="result"><tr>';
str += '<td class="tab '+style+'"><a class="links" href="javascript:createPlayList()">\
<span class="text2">Create Playlist</span></a></td></tr></table></div>';
var playlists = playlistsObj.getItems();
for(i=0;i<playlists.length;i++) {
var playlist = playlists[i];
var uri = playlist.getUri();
var playlistId = playlist.getPlaylistId();
var title = playlist.getTitle();
var desc = playlist.getDescription();
//alert(uri+' '+playlistId+' '+title+' '+desc);
str += "<div id='playListsTable'><a href=\"javascript:showPlayList("+i+")\" >"+title+"</a>\
<br/>"+desc+"</div>";
}
var node = document.getElementById('vw_pl_content');
node.innerHTML = str ;
doShowContent('vw_pl');
}
}
}
ここでは、まず playlistsObj 大域変数を作成して、ほかの関数からも共有できるようにします。次に Playlists オブジェクトを作成し、これの uri を設定します。続いて、プレイリストを作成するための、Create Playlist というテキストを持つボタンを作成します。Playlists オブジェクトは、Playlist オブジェクトの一覧を返す getItems という関数を使用します。各 Playlist はその uri で初期化されます。Playlist オブジェクトには getTitle() や getDescription() などの関数があり、各プレイリストの情報の表示に役立ちます。Music アプリケーションのユーザーがプレイリストにすべての曲を表示できるように、プレイリスト情報とともにリンク (javascript:showPlaylist(index) ) を提供します。最後に、すべてのプレイリストの表示用にこれまで収集した情報で、id が「vw_pl 」の <div> タグを更新します。
次の Javascript スニペットを main.js ファイルにペーストします。
function showPlayList(index) {
var playlist = playlistsObj.getItems()[index];
var uri = playlist.getUri();
var playlistId = playlist.getPlaylistId();
var title = playlist.getTitle();
var desc = playlist.getDescription();
//alert(desc);
var songsObj = playlist.getSongs();
//alert(songsObj.toString());
var songs = songsObj.getItems();
//alert(songs.length);
var c = '<div><table class="result"><tr>';
c += '<td class="tab otab">\
<a class="links" href="javascript:addSong(\''+playlistId+'\', \'playlist\', \''+uri+'\')">\
<span class="text2">Add Song</span></a></td>';
c += '<td class="tab otab">\
<a class="links" href="javascript:editPlayList(\''+playlistId+'\', \''+uri+'\', \'1\')">\
<span class="text2">Edit</span></a></td>';
c += '<td class="tab otab">\
<a class="links" href="javascript:deletePlayList(\''+playlistId+'\', \''+uri+'\', \'1\')">\
<span class="text2">Delete</span></a></td>';
c += '</tr></table></div>';
var s = '<div><b>'+title+'</b></div><br/>'+c;
var i = 0;
var str = '';
for(i=0;i<songs.length;i++) {
var song = songs[i];
//alert(song.toString());
var uri = song.getUri();
var songId = song.getSongId();
var title = song.getTitle();
var sourceUrl = song.getSourceUrl();
//alert(uri+' : '+songId+' : '+title+' : '+desc);
str += "<div id='songsTable'>\
<a href=\"javascript:showSong('"+songId+"', '"+title+"', '"+sourceUrl+"')\" >"+title+"</a>\
<br/>"+sourceUrl+"</div>";
}
var node = document.getElementById('vw_pl_item_content');
node.innerHTML = s + str;
doShowContent('vw_pl_item');
}
showPlaylist(index) 関数は、ユーザーが playlistsObj 配列で選択したプレイリストを識別する引数を取ります。プレイリストの詳細を取得したあと、Songs オブジェクトを返す playlist.getSongs() を呼び出します。Songs オブジェクトは、あるプレイリスト内のすべての曲を格納するコンテナです。曲をプレイリストに追加するボタン、プレイリストを編集するボタン、およびプレイリストを削除するボタンを作成したら、Songs オブジェクトの曲一覧で繰り返し操作を実行する必要があります。これには songsObj.getItem() を呼び出します。Songs オブジェクトには、getTitle() および getSourceUrl() の関数があります。これらの関数は、曲のソース URL とともに曲の詳細を表示します。各曲に javascript:showSong(songId, title, sourceUrl) でリンクを追加し、ユーザーが曲を再生できるようにします。最後に、プレイリスト中のすべての曲の表示用にこれまで収集してきた情報で、id がvw_pl_item_content の <div> タグを更新します。
次の Javascript スニペットを main.js ファイルにペーストし、プレイリストから選択した曲を表示します。
function showSong(id, title, songURL) {
var songContent = getSongOverlay(id, title, songURL);
var c = '<div><table class="result"><tr>';
var style = 'otab';
c += '</tr></table></div>';
c += songContent;
var f = document.getElementById('add_song_content');
f.innerHTML = c;
doShowContent('vw_pl_item');
}
function getSongOverlay(songId, title, songURL) {
var songContent = title;
if(songURL != '') {
if(songURL.length > 7 && songURL.substring(0, 7) == '<object') {
songContent = '<div id="video_content_'+songId+'"><br/>' + songURL+ '<br/></div>';
} else {
songContent = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"'+
'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"'+
'width="400" height="15" >'+
'<param name="allowScriptAccess" value="sameDomain"/>'+
'<param name="movie" value="./xspf/xspf_player_slim.swf"/>'+
'<param name="quality" value="high"/>'+
'<param name="bgcolor" value="#E6E6E6"/>'+
'<embed src="./xspf/xspf_player_slim.swf?playlist_url='+getPlayfile(songId)+'&autoplay=true"'+
'quality="high" bgcolor="#E6E6E6" name="xspf_player" allowscriptaccess="sameDomain"'+
'type="application/x-shockwave-flash"'+
'pluginspage="http://www.macromedia.com/go/getflashplayer"'+
'class="align-center" height="15" width="330"> </embed>'+
'</object>';
}
}
var sid = 'song_overlay_'+songId;
return '<div id="'+sid+'" class="songOverlay">'+songContent+'</div>';
}
function getPlayfile(songId) {
return './xspf/songs/playlist'+songId+'.xspf';
}
function doShowContent(id) {
var nodes = new Array();
nodes[0] = 'vw_pl';
nodes[1] = 'cr_pl';
nodes[2] = 'vw_pl_item';
for(i=0;i<nodes.length;i++)
{
doHideContent(nodes[i]);
}
var node = document.getElementById(id).style;
node.display="block";
}
function doHideContent(id) {
document.getElementById(id).style.display="none";
}
showSong() 関数は曲の種類に基づいて曲のオーバーレイを作成します。曲のソース URL が URL ではない場合 (つまり <object> タグの場合)、このソース URL からのコンテンツは HTML ページに組み込まれます。ブラウザのプラグインでこのコンテンツを実行できます。曲の URL が URL の場合は、XSPF Music Player を表示しますが、曲を再生するためのメタデータファイルが必要です。次の節で、メタデータファイルを作成します。最後に、doShowContent() および doHideContent() 関数を追加して、<div> タグを表示または非表示にします。
この節では、Music Player をアプリケーションに統合します。
Music アプリケーションの「Web ページ」フォルダで、/music/xspf/songs というサブフォルダを作成します。
「新規ファイル」ウィザードの「その他」カテゴリで「空のファイル」テンプレートを使用して、playlist1.xspf というファイルを作成します。
新規のファイルに次の情報を追加します。
<?xml version="1.0" encoding="UTF-8"?>
<playlist version="0" xmlns = "http://xspf.org/ns/0/">
<trackList>
<track>
<location>http://magnatune.com/all/07-Motorway-Nova%20Express.mp3</location>
<image>http://he3.magnatune.com/artists/img/nova_express2.jpg</image>
<annotation>Motorway</annotation>
</track>
</trackList>
</playlist>
playlist2.xspf から playlist6.xspf まで、さらにプレイリストを 5 つ作成します。
playlists 2 ～ 6 の場所と画像要素に関する情報は、次のように musicdb.sql ファイルを参照するか、Music データベースを開いて songs 2 ～ 6 の Song 表を検索してください。
XSPF MP3 Player をダウンロードします。ダウンロードしたファイルを Music アプリケーションの music/xspf ディレクトリに解凍します。プレイヤ自体は、xspf_player_slim.swf ファイルによって提供されます。
この節では、アプリケーションをチェックしてから、配備します。
Music アプリケーションが次のように表示されることを確認します。
プロジェクトのノードを右クリックして「プロパティー」を選択し、「実行」をクリックして「相対 URL」フィールドに「music/index.html 」と入力します。
プロジェクトのノードを右クリックし、「実行」を選択します。
アプリケーションが http://localhost:8080/MusicApp/music/index.html に配備されます。
アプリケーションがブラウザに表示されます。
「Nova」というプレイリストをクリックすると、次のように「Nova」の下にある曲がすべて表示されます。
曲のリンクをクリックして曲を再生します。
NetBeans IDE を使用した Java EE アプリケーションの開発方法についての詳細は、次のリソースを参照してください。
JAX-WS Web サービス入門 JAX-WS Web サービスクライアントの開発 NetBeans IDE 6.1/6.0 上での JAXB による WSDL の Java への結合 RESTful Web サービスについて Web アプリケーションでの StrikeIron Web サービスの使用 NetBeans IDE 6.0 における Web サービスの「QoS」 EJB および Web サービスアプリケーションの学習 YouTube: NetBeans 6.0、エンド・ツー・エンドの RESTful Web アプリケーションの構築
nbj2ee
@
netbeans.org
メーリングリスト
