はじめてのLiferay─短時間で高度なWebシステム構築

第3回 Liferay IDEで始めるポートレット開発

この記事を読むのに必要な時間:およそ 13 分

スライドショーポートレットの開発

Liferay IDEを使ってポートレット作成の基本的な手順が分かったことで,もう少し実用的なポートレットを作成してみましょう。今回は,日本語版Liferayを起動した時に登録された画像を順次表示するスライドショー・ポートレットを開発します。練習のためにjQuery版,AlloyUI版,LiferayのWebコンテンツ・ポートレット版を作成します。

jQuery版スライドショー・ポートレットの開発

Liferay6.1.0 GA1まではLiferayにjQueryが同梱されていましたが,Liferay6.1.1 GA2からは外されました。AlloyUIの利用を促進するためだと思います。AlloyUIは使える機能は便利なのですが,日本ユーザ向けの仕様になっていないのも確かです。またドキュメントの品質とサポートはまだまだ改善の余地があります。そんなとこからも,日本語版Liferay 6.1.1 GA2にはjQueryおよびjQuery UIを再び同梱しました。

さて,jQueryを使ってスライドショー・ポートレットを作成するには,先ずポートレット・プロジェクトとテンプレートを作成します。⁠MyFirstPortlet」と同じ手順で「JQuerySlideShow」ポートレットを作成します。これでデプロイできるポートレットはできました。

次にスライドショーで表示する画像ファイルを登録します。図21のようにパッケージ・エクスプローラーから生成されたJQuerySlideShow-portletフォルダ内のdocrootフォルダを右クリックして「新規」「フォルダー」を選択します。

図21 画像用フォルダの作成

図21 画像用フォルダの作成

「新規フォルダー」ダイアログが表示しますので,⁠フォルダー名」「img」と入力して「完了」ボタンを押下します。docrootフォルダを展開するとimgフォルダが追加されています。このimgフォルダにMS Windowsのファイルエクスプローラからドラッグ&ドロップ操作でスライドショーに使う画像を複写します。図22は1.pngから5.pngファイルをimgフォルダに複写した例です。

図22 画像ファイルを登録した例

図22 画像ファイルを登録した例

次に複写した画像を順次に表示するjQueryスクリプトを記述します。パッケージ・エクスプローラーからJQuerySlideShow内のview.jspをダブルクリックするとエディタ・ビューにファイルの内容が表示します。⁠This is the JQuerySlideShow portlet.」リスト1の内容で上書きします(行番号は入れないでください)⁠

リスト1 jQueryスライドショーのスクリプト(view.jsp)

 1  <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
 2 
 3 <portlet:defineObjects />
 4 <script type="text/javascript" src="/html/js/jquery/jquery-1.9.1.min.js"></script>
 5 
 6 <img id="<portlet:namespace />main" src="<%=request.getContextPath()%>/img/1.png" alt="HOzawa" width="740" height="340"/>
 7 
 8 <img src="<%=request.getContextPath()%>/img/1.png" alt="100 Years" style="display:none" class="<portlet:namespace />banner"/>
 9 <img src="<%=request.getContextPath()%>/img/2.png" alt="OGIS" style="display:none" class="<portlet:namespace />banner"/>
10 <img src="<%=request.getContextPath()%>/img/3.png" alt="Agile" style="display:none" class="<portlet:namespace />banner"/>
11 <img src="<%=request.getContextPath()%>/img/4.png" alt="Cloud" style="display:none" class="<portlet:namespace />banner"/>
12 <img src="<%=request.getContextPath()%>/img/5.png" alt="ThemiStruct" style="display:none" class="<portlet:namespace />banner"/>
13 
14 <script type="text/javascript">
15 jQuery().ready(function(){
16   var imgIndex;
17   var timerId;
18 
19   var changeBanner = function(){
20     var selectedSrc = $(".<portlet:namespace />banner:eq("+imgIndex+")").attr("src");
21     jQuery('#<portlet:namespace />main').fadeOut('slow', function() {
22       jQuery('#<portlet:namespace />main').attr("src",selectedSrc);
23       jQuery('#<portlet:namespace />main').fadeIn('slow');
24     });
25     imgIndex++;
26     if (imgIndex == $(".<portlet:namespace />banner").length){
27       imgIndex = 0;
28     }
29   }
30 
31   imgIndex = 0;
32   changeBanner();
33   timerId = setInterval(changeBanner,2000);
34 });
35 </script>

修正した後は図23のような画面になります。

図23 jQueryスライドショー用のコード

図23 jQueryスライドショー用のコード

1行めから3行はLiferay IDEウィザードが生成した行です。

1行めはJSR286で策定されたタグ・ライブラリ固有の名前空間です。

3行めはLiferay独自の便利オブジェクト集です。記述するとJSPファイルでリスト2のオブジェクトを使えることができるようになります。たとえば,JSPファイルに「<%= user.getFullName() %>」と記述すると,ログインしているユーザの姓名がページに表示されます。今回は使わないのでこの行を削除することもできます。

リスト2 portlet:defineObjectsで使えるようになるオブジェクト

ThemeDisplay themeDisplay
Company company
Account account
User user
User realUser
Contact contact
Layout layout
List<Layout> layouts
long plid
LayoutTypePortlet layoutTypePortlet
long scopeGroupId
PermissionChecker permissionChecker
Locale locale
TimeZone timeZone
Theme theme
ColorScheme colorScheme
PortletDisplay portletDisplay
long portletGroupId

リスト1の4行めはjQueryのライブラリの読込みです。jQueryのライブラリはLiferay本体(webapps\ROOT)「/html/js/jquery/」フォルダにあります。ここで注意して頂きたいのは,1つのWebページは1ついのHTML文書です。Liferayのようなポートレットコンテナは,Webページの要求が来るとそのページに配置されているすべてのポートレットから1つのHTML文書を生成します。HTML文書には1つの<html>タグや<head>タグしか記述しないため,ポートレットでは<html>タグや<head>タグは記述しません※1)⁠

6行めはスライドショーの画像を表示すいる画像領域用のimgタグです。idを「<portlet:namepace/>main」にします。1ページに複数のポートレットを配置することができます。また,1ページに同じポートレットを複数配置することもあります。このような場合は,idを「main」に設定すると,HTMLページにidがmainのimgタグが複数存在することになります。ポートレットごとに異なるidを設けるためにポートレットの識別名を先頭に付けます。⁠portlet:namespace」はポートレットを識別するための名前です。JSR286で決められており,そのために1行が必要です。

ポートレットをアプリケーションサーバにデプロイすると,webappsフォルダ内にポートレットフォルダ名のフォルダが作成されます。画像ファイルのこのフォルダ内のimgフォルダにあります。今回は,ファイルへのURLは「http://localhost:8080/JQuerySlideShow/img/1.png」です。このURLをimgのsrcに直接設定することもできますが,別のポートレットでこのコードを利用する場合は毎回,ポートレット名を修正する必要があります。これを避けるために「<%=request.getContextPath()%>」を使います。

<%=request.getContextPath()%>はサブレットと同じようにHTTPリクエストにあるコンテキストパスを取得します。JSPからこのJavaの「request.getContextPath()」文を呼び出しているので「<%=」「%>」で括ります。

8~12行めはスライドショーに表示する画像ファイルです。最初は表示しないように「style="display:none"」と設定して画像を非表示にしています。idと同じようにて他ポートレットで同じクラス名が使われている可能性もあるので,classの値を「<portlet:namespace />banner」にします※2)⁠

14~35行めがスライドショー用のjQueryスクリプトです。8~12行めの画像を順番に表示しています。文法については,jQueryの本などを参照にしてください。

さて,これでスライドショー・ポートレットは作成されました。ポートレットをLiferayサーバにデプロイしたWebページに配置してみましょう。

まずはLiferay IDEの「すべて保管」アイコンを押下して,すべてのファイルを保存します。パッケージ・エクスプローラーから「JQuerySlideShow-portlet」を右クリックしてポップアップメニューから「Liferay」「SDK」「deploy」を選択します。コンソール・ビューにデプロイのログ情報が表示されます。WebブラウザからLiferayにログインしてメニューから「追加」「その他」「サンプル」を選択します。メニューに「JQuerySlideShow」が追加されていますのでページに配置します。図24のようにポートレット内に登録した画像ファイルが順次に表示します。

図24 jQueryスライドショー・ポートレットの実行例

図24 jQueryスライドショー・ポートレットの実行例

※1)
ポートレットには<html>タグと<head>タグを使いません。
※2)
他ポートレットの値と識別するために,ポートレットで使うHTMLタグのすべてのid属性とclass属性の値の前に<portlet:namespace />を付けます。

著者プロフィール

小沢仁(おざわひとし)

株式会社オージス総研

米シカゴ育ち。シカゴ大学で物理を専攻。Oracle XDKを日本に紹介,Seasar英語ページを作成,ESB Muleコミッタとして同ソフトの日本ローカライズ/日本語サイト構築,WaveMakerの日本語ドキュメントを作成,Apache ManifoldCFコミッタ/日本語ページやMySQL対応を貢献。IEEE APSCC 2009などでSOAの研究発表も行っている。

Liferayに興味をもち,Liferay.comフォーラムでサポートしたりWikiページを作成している。Liferay6およびLiferfay IDEの日本語化や日本語資料も作成している。2012年にLiferay社からグローバルレベルでの「Liferay Community Contributor of the Year 2012」を受賞。

現在,米ナッシュビルで開催されるAgile2013カンファレンスでオフショア開発についての発表申請に時間を費やしている。

コメント

コメントの記入