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

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

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

次に画像を表示するスクリプトを記述します。HTMLコードを直接入力するために,コンテンツのメニューから「ソース」を選択します。今回はAlloy UIスライドショーで使ったコードを貼り付けます(jQueryスライドショーポートレットで使ったコードを貼り付けることもできます)⁠Webコンテンツポートレット内に画像ファイルが保存されていないため,画像ファイルのURLを先ほどメモしたURLに変えます。リスト4はURLを変えたスクリプトの例です(サイトIDとフォルダIDは自分の先ほどメモしたURLのIDに置き換えてください)⁠

リスト4 Webコンテンツ用スライドショースクリプトの例

 1 <div id="slideShowImageArea">
 2   <div style="background: url(/documents/10180/14293/1.png); width: 700px; height: 250px;" class="aui-carousel-item aui-carousel-item-active"></div>
                                                    ↑
                                すべてのdivタグのサイトIDとフォルダIDはメモしたID
 3   <div style="background: url(/documents/10180/1429/2.png); width: 700px; height: 250px;" class="aui-carousel-item"></div>
 4   <div style="background: url(/documents/10180/1429/3.png); width: 700px; height: 250px;" class="aui-carousel-item"></div>
 5   <div style="background: url(/documents/10180/1429/4.png); width: 700px; height: 250px;" class="aui-carousel-item"></div>
 6   <div style="background: url(/documents/10180/1429/5.png); width: 700px; height: 250px;" class="aui-carousel-item"></div>
 7 </div>
 8 
 9 <script type="text/javascript">
10 AUI().ready('aui-carousel', function(Y) {
11   new Y.Carousel({
12    contentBox: '#slideShowImageArea',
13    width: 700,
14    height: 250
15   }).render();
16 });
17 </script>

図35はスクリプトを記述したIDを置き換えた画面の例です。

図35 Webコンテンツ・ポートレットにスクリプトを記述した例

図35 Webコンテンツ・ポートレットにスクリプトを記述した例

スクリプトを記述した後に「保存」ボタンを押下すると図36のようにAlloyUIのスライドショーが表示されます。

図36 Webコンテンツ・ポートレットによるスライドショー・ポートレットの実行例

図36 Webコンテンツ・ポートレットによるスライドショー・ポートレットの実行例

ポートレットを手動デプロイ

これまではLiferay IDEからローカルのLiferayサーバにポートレットをデプロイして来ました。実際の運用ではLiferay IDEで開発ポートレットを手動でサーバにデプロイする必要がある場合があります。

Liferay IDEからポートレットをデプロイするとLiferayサーバのdeployフォルダと図37のようにliferay-plugins-sdk-6.1.1\distフォルダにwarファイルを作成します。Liferayが起動している場合はdeployフォルダ内のwarファイルはアプリケーションサーバにデプロイされて削除されてしまいますので,他のLiferayサーバにポートレットをデプロイする場合はliferay-plugins-sdk-6.1.1\distフォルダのwarファイルを使います。

図37 liferay SDK\distフォルダに作成されたポートレットwarファイル(例)

図37 liferay SDK\distフォルダに作成されたポートレットwarファイル(例)

デプロイするLiferayサーバにファイル転送することができる場合は,warファイルをそのLiferayサーバのdeployフォルダに複写すろとポートレットはデプロイされます。しかし,ファイル転送ができない環境の場合でもWebブラウザからポートレットをデプロイすることができます。

Webブラウザからポートレットをデプロイする場合は,デプロイするLiferayサーバに管理者としてログインします。次にメニューから「サイト」「管理ページ」を選択します。図38のような画面が表示しますので「プラグインのインストーラー」タブを選択します。

図38 プラグインインストール画面

図38 プラグインインストール画面

図39のようなプラグインのインストーラー画面が表示するので「ファイルのアップロード」タブを選択します。デプロイするポートレットのwarファイルを選択して「インストール」ボタンを押下するとポートレットはLiferayサーバにアップロードされてデプロイされます。

図39 プラグインのインストーラー画面

図39 プラグインのインストーラー画面

最後に

今回はLiferay IDEをインストール/セットアップしてjQueryとAlloyUIを使ってスライドショーポートレットを開発しました。最後にWebコンテンツ・ポートレットを使ってスライドショーを作成しました。ポートレットの開発は難しく,時間が掛かると思われる場合は多いですが,実際にはこのように短時間で実際に使える機能を作成することができます。色々と他にポートレットを作成してみてください。

次回はLiferayおよび第三者から提供されるポートレットを紹介します。

本記事で作成したJQueryスライドショー・ポートレットおよびAlloyUIスライドショー・ポートレットは日本版Liferayダウンロードページ「Liferay Samples」からダウンロードできます。

著者プロフィール

小沢仁(おざわひとし)

株式会社オージス総研

米シカゴ育ち。シカゴ大学で物理を専攻。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カンファレンスでオフショア開発についての発表申請に時間を費やしている。

コメント

コメントの記入