フィードバックを送信
legacy-knowledge-base
公開されました Jul. 2, 2025

Liferay Portal 6.2での新しいUI機能。

written-by

Brett Ripley

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

While we make every effort to ensure this Knowledge Base is accurate, it may not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with any feedback or concerns.

legacy-article

learn-legacy-article-disclaimer-text

Liferay Portal 6.2でUIに加えられた大きな変更点の概要と、その対処法について解説します。

Liferay Portal 6.2では、ユーザビリティとユーザーインターフェイスに一連の改良が加えられています。 いくつかのコンポーネントは、AlloyUI 2.0から受け継いだものと、ポータルで直接開発されたものがあり、手直しされています。 注目の機能は以下の通りです：

  • 操作パネルの変更
  • ポップアップの数を減らしました
  • レスポンシブWebデザインへの対応を強化

これらの機能はすべて、ポータルの使いやすさと汎用性を高め、Liferayが複雑さを増すことなく成長し続けることを可能にします。 このチュートリアルでは、Portal 6.2での変更点を、例題とスクリーンショットを用いて説明します。

目次

  1. 機能
  2. テーマの構築
  3. JSONWSでLiferayサービスにアクセスする

機能

Twitter Bootstrap

Liferay は Twitter Bootstrap CSS と HTML マークアップを箱から出してサポートしています。 AlloyUIは、Bootstrapコンポーネントに動作を追加するJavaScriptを駆動します。 AlloyUIは、 alloy-bootstrap リポジトリで利用可能なLessから Sass への1：1翻訳を使用しています。 Liferayが翻訳を実装する方法は、AlloyUIのために最小限の余分なスタイル定義を追加することに注意してください。

Bootstrapを使うメリットとして、以下のようなものがあります：

  • Liferayのために作られたテーマは、Bootstrapのテーマをベースにすることができます。 かなりの数があります（例： wrapbootstrap, bootswatch, など）。
  • ポートレット開発者は、BootstrapマークアップとBootstrapコンポーネントを使用することで、レスポンシブレイアウトを使用する場合よりも早く、見栄えのよいUIを構築できます。
  • * コンテンツ作成者は、Bootstrapのマークアップとスタイルを使用して、見た目が美しく、UIの他の部分と一貫性のある高度なコンテンツを作成することができます。

Bootstrap をウェブコンテンツに使用する能力は、他のアプリケーションで使用することの副次的な効果です。Twitter Bootstrap にはすでに優れたドキュメントがあり、上記のリンクからアクセスすることができます。 Twitter Bootstrap ドキュメントページから任意のHTMLマークアップをコピーして、Liferayポートレットやコンテンツの中に貼り付けることができます。 これにより、開発プロセスが容易になり、ウェブデザイナーから開発中にピクセルを揃えるのが苦手な人まで、あらゆる層の開発者に安全性を提供することができます。

例

例えば、Webコンテンツでテーブルを作成する場合、Bootstrapの機能を使用しない場合は、次のようになります：

```html <table border="1" cellpadding="1" cellspacing="1" style="width: 500px;"> ```

01.PNG

Bootstrapを使えば、マークアップはよりシンプルになり、より良い結果を生み出します：

```html <table class="table table-striped table-bordered"> ```

02.png

これらのクラス属性の値は、それぞれ1つの特徴を提供します：

  • table` はベーススタイルを設定します。
  • table-striped` は代替行を異なる色で表示します。
  • table-bordered` はテーブルの周囲にボーダーを描画します。

Bootstrapは、画像に対して、境界線を丸くしたり、画像を円形にしたり、ポラロイドのようなフレームを周囲に付けたりする、素敵な効果も提供しています。 これらのメリットは、HTMLを編集しなくても存在します。

03.png

  • 角を丸くする`img-rounded`。
  • 円の形をした画像を取得する`img-circle`。
  • 画像の周囲にきれいな枠をつけるための`img-polaroid`です。

注：コンテンツを保存する前に、WYSIWYGエディタはBootstrapを認識していないため、「ソース」モードをクリックして出てきても、これらの変更をプレビューするには十分ではありません。 Bootstrapで変更をプレビューするには、Webコンテンツフォームの上部にある「基本プレビュー」ボタンをクリックします。

フォントオーサムアイコン

Liferay Portal 6.2 には 独自のバージョン Font Awesomeが同梱されています。 Font Awesomeは、Webサイトで簡単にスケーラブルなベクターグラフィックを実現するための361個の絵文字のフルスイートです。

パネル追加

コンテンツ、アプリケーション、ページを同じ場所で追加できる「追加パネル」を新たに搭載しました。

コンテンツの追加パネルです：最近のコンテンツとそのプレビューが一覧表示され、ユーザーは任意のコンテンツをドラッグ＆ドロップしてポータルに表示することができます。

04.png

アプリケーションパネルを追加します：利用可能なポートレットが一覧表示され、ユーザーは任意のポートレットをドラッグ＆ドロップしてポータルに表示することができます。

05.png

ページ追加パネルです：このパネルからページを作成し、ページの種類とレイアウトを選択することができます。

ナバー

06.png

ポータルサイトのナビゲーションを標準化するため、新たに設置されたコンポーネントのひとつに、<aui:nav-bar>、 <aui:nav> 、 <aui:nav-item>があります。 ナブバーは、アプリケーションやサイトのナビゲーションヘッダーとして機能するレスポンシブメタコンポーネントです。

07.png

<aui:nav-bar>
   <aui:nav>
       <aui:nav-item href="http://liferay.com" label="Liferay website" selected='<%= true %>' />
   </aui:nav>
</aui:nav-bar>

参考 jukebox/blob/master/sdk/portlets/jukebox-portlet/docroot/html/artists/toolbar.jsp

利用可能な <aui:nav-bar> のオプション：

オプション 説明

cssClass

 ナビバー検索のラッパーの要素に適用されるcssクラス。
id ナビバー検索のラッパー要素に適用されるカスタムIDです。


その他のオプションは、 <aui:nav>に渡すことができます：

オプション 説明
アリアラベル アクセシビリティを表すW3C ARIAラベル、 ARIAステートとプロパティを参照。
アリアロール アクセシビリティのためのW3C ARIAの役割については、 ARIA State and Propertiesを参照してください。
折りたたみ可能 モバイルビューでは折りたたみ可能で、ビューポートの幅が広がると水平になる機能を追加する（トグル可能）。
cssClass nav search ラッパー要素に適用される css クラス。
ファイル 使用するカスタムファイルパスを指定します。
アイコン 折りたたみパネルに表示するアイコンで、表示を切り替えることができます。
id ナビバー検索のラッパー要素に適用されるカスタムIDです。
searchContainer SearchContainerのインスタンス。
ユーザーネームスペース 要素にポートレットネームスペースを使用するかどうか。

利用可能な <aui:nav-item> のオプション：

オプション 説明
アンカーCssClass ナビバー検索アンカー要素に適用されるcssクラスです。
アンカーデータ HTML5に変換される地図オブジェクト
アンカーアイディー ナビバーの検索アンカー要素に適用されるカスタムIDです。
アリアラベル アクセシビリティのためのW3C ARIAの役割については、 ARIA State and Propertiesを参照してください。
アリアロール アクセシビリティを表すW3C ARIAラベル。「 ARIA States and Properties」を参照。
cssClass nav item search ラッパー要素に適用される css クラスを指定する。
データ 属性をアンカー要素に付与する。
ドロップダウン ネストしたナビ項目をドロップダウン・メニューとして表示させることが可能かどうか。
ジェイ・アール・オー アンカー要素のhrefを指定する。
iconCssClass ラベルの横に表示されるアイコンのcssクラス。
id ナビバー検索のラッパー要素に適用されるカスタムIDです。
label ナビ項目のラベル。
ローカライズラベル ラベルをローカライズするかどうか。
選択済み ナビ項目が選択されているかどうか。
状態 ナビ項目の状態（アクティブまたは選択）。
タイトル アンカーのタイトルです。
トグル ドロップダウンメニューの表示/非表示を切り替えます。
ユースダイアログ アンカーをダイアログで開きます。
ラップドロップダウンメニュー ドロップダウンメニューを <ul>で囲む。

ナバールドロップダウン

<aui:nav-item> を入れ子にして、例えばドロップダウンメニューを作ることができます：

<aui:nav-bar>
   <aui:nav>
       <aui:nav-item label="Liferay website" dropdown='<%= true %>'>
           <aui:nav-item href="http://liferay.com" label="Liferay portal" />
           <aui:nav-item href="http://in.liferay.com" label="Liferay Social Office" />
       </aui:nav-item>
   </aui:nav>
</aui:nav-bar>

08.png

詳細検索

アドバンスドサーチの新しいUIは、検索オプションをより速く拡張する方法を提供します。

09.png

Liferayの以前のバージョンと同様に、この機能は <liferay-ui:search-toggle> taglibを使用しています。 検索トグルタグリップは、 <aui:nav-bar-search>outputBootstrap HTMLマークアップで包まれた <aui:nav-bar> の中に置くことで、上記のようなルック＆フィールを提供することができます。

<aui:nav-bar>
   <aui:nav-bar-search>
       <div class="form-search">
           <liferay-ui:search-toggle buttonLabel="search">
               <aui:fieldset>
                   <aui:input label="name" />
                   <aui:input name="bio" />
               </aui:fieldset>
           </liferay-ui:search-toggle>
       </div>
   </aui:nav-bar-search>
</aui:nav-bar>

参考 jukebox/blob/master/sdk/portlets/jukebox-portlet/docroot/html/artists/toolbar.jsp

利用可能な <aui:nav-bar-search> のオプション：

オプション 説明
cssClass ナビバー検索のラッパーの要素に適用されるcssクラス。
id ナビバー検索のラッパー要素に適用されるカスタムIDです。
ファイル 使用するカスタムファイルパスを指定します。
searchContainer SearchContainerのインスタンス 

<aui:nav-bar>

   <aui:nav-bar-search cssClass="pull-right" file="/html/portlet/directory/user_search.jsp" searchContainer="<%= userSearchContainer %>" />
</aui:nav-bar>

ドックバー

DockbarはLiferayの管理者や開発者にとって非常に重要なポートレットで、新しいバージョンが出るたびにどんどん機能が追加され、進化し続けています。 Dockbarのマークアップは、すべてDockbarポートレットから提供されます。 Liferay 6.2では、2つのセクションに分割されました。 最初のセクション（右上の青いバー）にはナビゲーションメニューが、2番目のセクション（左中央の水色のバー）には「追加」「モバイルプレビュー」「編集」のショートカットが含まれています。

10.png

Dockbarの両セクションは、同じポートレットから生まれ、同じHTMLマークアップを共有していることに留意してください。 分割された視覚的なスタイルは、テーマが .dockbar-split css クラスを定義することによって、すべて CSS で行われます。詳しくは Github をご覧ください。

コントロールパネル

コントロールパネルは、すべてのサイトを含むポータル全体を管理するための中心的な場所を提供する方法として、Liferay 5.2で導入されました。 従来は、管理者が手作業でポートレットをページに追加して、独自の管理UIを構築する必要がありました。 Liferayの新バージョンでは、コントロールパネルのデザインが変更され、より使いやすく、多機能になりました。 6.2での主な変更点です：

  • 「マイアカウント」の管理は、コントロールパネルから移動しました。
  • "サイト管理 "は、コントロールパネルから移動しました

11.png

フォームナビゲーター

フォームナビゲータは、Liferayにコンテンツをセクションに分割する機能を与えます。 AlloyUI JavaScriptで強化されたBootstrapのタブを使用しています。

12.png

<%
String[] categoryNames = new String[] {"Section"};
String[][] categorySections = { new String[] { "look-and-feel", "logo", "javascript", "mobile-device-rules" } };
%>

<liferay-ui:form-navigator
   categoryNames="<%= categoryNames %>"
   categorySections="<%= categorySections %>"
   jspPath="/html/portlet/jukebox/"
   showButtons="<%= true %>"
/>

利用可能な <liferay-ui:form-navigator> のオプション：

オプション 説明
バックURL セクションがページをリダイレクトする場合、このURLはバックボタンがクリックされたときの目的地として使用されます。
カテゴリーセクション カテゴリーを分割する。
カテゴリ名 表示するセクションの名前。各セクションの名前は、jspPathフォルダにある既存のファイルに一致します。
ディスプレイスタイル パネルが渡された場合は、パネルスタイルを表示し、それ以外の場合はタブのように表示します。
フォーム名 フォームナビゲータをラップするフォーム名です。
htmlBottom フォームナビゲータの下部に配置されるHTML文字列。
htmlTop フォームナビゲータの上部に配置されるHTML文字列。
jspPath サーバーサイドを必要とするセクションのベースパスとして使用するパスです。 ファイルは、categoryNamesの値と一致することになります。
ショーボタン 送信ボタンとキャンセルボタンを表示するかどうか。

モーダル

これまでのLiferayのDialogは全面的に刷新され、Modalと呼ばれるようになりました。 モーダルは、 AlloyUIのモーダルコンポーネントをベースにしています。 新しいモーダルをインスタンス化するために、AlloyUI APIを直接使用することができます。 しかし、Liferayは、ダイアログを常に最大化し、ページに集中させるなど、役に立つ機能を備えています。 Liferayで利用できるプリセットを継承するために、 Liferay.Util.Window.getWindowを使用することをお勧めします。

Liferay.Util.Window.getWindow({ dialog：{ centered: true, cssClass：'jukebox-portlet', height: 300, modal: true, resizable: false, width: 500 }, title：Liferay.Language.get('my-portlet') })；

利用可能な Liferay.Util.Window.getWindow のオプションです：

オプション 説明
dialog.autoHeight（ダイアログオートハイト モーダルを自動的にビューポートに垂直にフィットさせるかどうか
dialog.autoHeightRatio モーダルな高さの比率を定義します。
dialog.autoSizeNode モーダルの寸法を定義するために使用されるノードです。
ダイアログの自動幅 モーダルが自動的にビューポートに水平にフィットするかどうか。
dialog.autoWidthRatio モーダルwithが取るべき比率を定義します。
タイトル モーダルタイトルです。

Liferay Modal は AlloyUI modal componentを拡張しているので、コアコンポーネントのすべてのオプションは、この API に渡されるダイアログ構成でも利用可能であることに注意してください。

ローカライズ

Liferayでローカライズされた文字列を表示するには、いくつかの方法があります。 1つ目は、 <liferay-ui:message />taglibを使用しています：

<liferay-ui:message key="x-albums" />

<liferay-ui:message arguments="1000" key="x-albums" />13.png

またはJavaScript API経由：

var message = Liferay.Language.get('x-albums');

   alert( A.Lang.sub(message, { 0: '1000' }) );

インプットローカライズ

また、より直感的で使いやすいインターフェースで、新たにローカライズされた入力が可能です。

META-INF/portal-model-hints.xmlでエンティティフィールドがローカライズされていると、 <aui:input>taglibがそれを検出し、フィールドがローカライズされた入力としてレンダリングされます。

14.png

<aui:input name="title" />

モバイル端末のプレビュー

Webポータルのモバイル端末への対応の重要性も忘れてはならない。 Liferay 6.2には、モバイルデバイスプレビューという素晴らしい機能が搭載されています。 この機能により、開発者はスマートフォンやタブレット、デスクトップなど、さまざまな種類の携帯端末でポータルの単体テストを実施することができます。 この機能は正確なプレビューを提供するものではありませんが、少なくとも主要な問題はポータルにアクセスする前に解決することができます。

> 15.png

検索コンテナ

検索コンテナ機能はLiferayの古いバージョンから利用可能で、サーバーサイドのデータと統合する簡単なAPIを使ってテーブルをレンダリングする役割を担っています。 Liferay 6.2では、スタイルが変更され、Bootstrapのテーブルスタイルが使用されるようになりました。

<liferay-ui:search-container
   emptyResultsMessage="there-are-no-entries"
   total="100"
>

   <liferay-ui:search-container-results
       results="<%= JukeboxServiceUtil.search(...) %>"
   />

   <liferay-ui:search-container-row
       className="com.liferay.jukebox.model.Artist"
       keyProperty="artistId"
       modelVar="artist"
   >
       <liferay-ui:search-container-column-text
           name="name"
           value="<%= HtmlUtil.escape(artist.getName(locale)) %>"
       />
   </liferay-ui:search-container-row>

   <liferay-ui:search-iterator />
</liferay-ui:search-container>

16.png

入力日

新しい入力日は、より直感的に操作できるようになりました。 日付の入力がフレンドリーにできるようになりました。

17.png

META-INF/portal-model-hints.xmlでエンティティフィールドが日付型として定義されている場合、 <aui:input>taglibはそれを検出し、フィールドは日付入力としてレンダリングされます。 入力日付フィールドをインスタンス化するもう一つの方法は、 <liferay-ui:input-date> taglib を使用することです。

<liferay-ui:input-date
   dayParam="startDateDay"
   dayValue="5"
   disabled="<%= false %>"
   firstDayOfWeek="1"
   monthParam="startDateMonth"
   monthValue="5"
   name="startDate"
   yearParam="startDateYear"
   yearValue="2014"
/>

利用可能な <liferay-ui:input-date> のオプション：

オプション 説明
cssClass 入力された日付のラッパーの要素に適用されるcssクラス。
無効 入力された日付を無効にするかどうか。
dayParam ホスティングフォームの送信時にサーバーに送信されるデイパラメータの名前です。
dayParamId ホスティングフォームの送信時にサーバーに送信されるデイパラメータのIDです。
デイバリュー 今日の価値。
monthParam ホスティングフォームの送信時にサーバーに送信されるmonthパラメータの名前です。
monthParamId ホスティングフォームの送信時にサーバーに送信されるmonthパラメータのIDです。
monthValue（マンスリーバリュー 今月の価値。
name 友好的な日付を保持する入力の名前。
yearParam（イヤーパラム ホスティングフォームの送信時にサーバーに送信されるyearパラメータの名前です。
yearParamId ホスティングフォームの送信時にサーバーに送信される年号パラメーターのID。
イヤーバリュー 年の価値。

入力時間

新しい入力時間は、より直感的に操作できるようになりました。 時間入力がフレンドリーにできるようになりました。

18.png

入力時間フィールドをインスタンス化するために、 <liferay-ui:input-time> taglibを使用することができます。

<liferay-ui:input-time
   amPmParam="startDateAmPm"
   amPmValue="<%= 0 %>"
   dateParam="startDateTime"
   dateValue="<%= new Date() %>"
   disabled="<%= false %>"
   hourParam="startDateHour"
   hourValue="10"
   minuteParam="startDateMinute"
   minuteValue="30"
   name="startTime"
/>

利用可能な <liferay-ui:input-time> のオプション：

オプション 説明
amPmParam ホスティングフォームの送信時にサーバーに送信されるamPmパラメータの名前です。
amPmValue amPmの値。
cssClass 入力時間のラッパーの要素に適用されるcssクラス。
dateParam ホスティングフォームの送信時にサーバーに送信される日付パラメーターの名前です。
日付値 日付の値。
無効 入力された日付を無効にするかどうか。
hourParam ホスティングフォームの送信時にサーバーに送信されるアワーパラメータの名前です。
アワーバリュー 時間の価値。
分インターバル amPmの値。
minuteParam ホスティングフォームを送信する際にサーバーに送信される分パラメーターの名前です。
分値 分間の価値
name 友好的な日付を保持する入力の名前。

ポップオーバー

AlloyUI ポップオーバーコンポーネント は、新しい Liferay のインターフェイスのいたるところで使用されています。 現在、AlloyUI popover APIのラッパーは存在しませんので、ウェブサイトからサンプルをコピーして、Liferayで自由に使用してください。

19.png

<aui:script use="aui-popover">
new A.Popover({
   align: {
       node: '#triggerElement'
   },
   toolbars: {
       header: [
           { label: 'Save', primary: true, icon:'icon-heart' },
           { label: 'Cancel' }
       ]
   },
   bodyContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
   trigger: '#triggerElement'
}).render();
</aui:script>

ポップオーバーで利用できるその他のオプションについては、 AlloyUI popover component のページをご覧ください。

Liferayパネル

Panelは、セクションをグループ化し、アコーディオンのようなインターフェイスを表示するために使用します。 パネルは通常、1つ以上の <liferay-ui:panel> アイテムを含む <liferay-ui:panel-container> taglib で包まれます。

20.png

<liferay-ui:panel-container extended="<%= true %>" id="jukebox">
   <liferay-ui:panel collapsible="<%= true %>" id= panel1" title="panel1">
       Panel 1
   </liferay-ui:panel>
   <liferay-ui:panel collapsible="<%= true %>" id="panel2" title="panel2">
       Panel 2
   </liferay-ui:panel>
</liferay-ui:panel-container>

また、よりシンプルなパネル（拡張パネルではない）を表示するスタイルもあります。 これは拡張オプションで設定することができます。

21.png

<liferay-ui:panel-container extended="<%= true %>" id="jukebox">
   <liferay-ui:panel collapsible="<%= true %>" extended="<%= false %>" id="panel1" title="panel1">
       Panel 1
   </liferay-ui:panel>
   <liferay-ui:panel collapsible="<%= true %>" extended="<%= false %>" id="panel2" title="panel2">
       Panel 2
   </liferay-ui:panel>
</liferay-ui:panel-container>

利用可能な <liferay-ui:panel-container> のオプション：

オプション 説明
アコーディオン パネルをアコーディオンのように動作させるかどうか。
cssClass パネルコンテナラッパー要素に適用される css クラスを指定する。
id パネルコンテナ要素のidを指定する。

利用可能な <liferay-ui:panel> のオプション：

オプション 説明
アコーディオン パネルをアコーディオンのように動作させるかどうか。
折りたたみ可能 パネルを折りたたみ式にするかどうか。
cssClass パネルラッパー要素に適用される css クラスを指定します。
defaultState（デフォルトステート パネルのデフォルトの状態。
ぜんめんてき パネルに拡張インターフェイスを表示させるかどうか。
ヘルプメッセージ パネルヘッダーをホバーしたときに表示されるヘルプメッセージです。
iconCssClass タイトルの横に表示されるアイコンのcssクラス。
id パネル要素のidを指定します。
ペアレントアイディー パネル親要素のid。
けいぞくじょうたい パネルの状態をデータベースに永続化するかどうか。
状態 開いていても閉じていてもよい。
タイトル パネルのタイトルです。

レイアウトテンプレート

ポータルがポートレットを行と列に表示する方法を整理するために、Liferayはレイアウトテンプレートを作成する柔軟な方法を提供します。 Liferay AlloyUI 1.0 の以前のバージョンでは、CSS グリッドシステムが使用されていました。 例えば、Liferay 6.1の2_columns_i.tplと6.2を比較してみましょう。

<div class="columns-2" id="main-content" role="main">
   #if ($browserSniffer.isIe($request) && $browserSniffer.getMajorVersion($request) < 8)
       <table class="portlet-layout">
       <tr>
           <td class="aui-w50 portlet-column portlet-column-first" id="column-1">
               $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
           </td>
           <td class="aui-w50 portlet-column portlet-column-last" id="column-2">
               $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
           </td>
       </tr>
       </table>
   #else
       <div class="portlet-layout">
           <div class="aui-w50 portlet-column portlet-column-first" id="column-1">
               $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
           </div>

           <div class="aui-w50 portlet-column portlet-column-last" id="column-2">
               $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
           </div>
       </div>
   #end
</div>

Liferay 6.2 では、 Twitter Bootstrap の レイアウト、 グリッドシステム 、 フルードグリッドシステム が完全に利用可能です。 Bootstrapのレイアウト機能を使用するその他の利点は、レスポンシブWebデザイン機能です。例えば、携帯電話のような小さな画面では、列が流動的になり、自動的に互いの下に表示されることになります。

<div class="columns-1-2-1" id="main-content" role="main">
   <div class="portlet-layout row-fluid">
       <div class="portlet-column portlet-column-only span12" id="column-1">
           $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
       </div>
   </div>

   <div class="portlet-layout row-fluid">
       <div class="portlet-column portlet-column-first span8" id="column-2">
           $processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
       </div>

       <div class="portlet-column portlet-column-last span4" id="column-3">
           $processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")
       </div>
   </div>

   <div class="portlet-layout row-fluid">
       <div class="portlet-column portlet-column-only span12" id="column-4">
           $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
       </div>
   </div>
</div>

Liferay 6.2 2_columns_i.tpl レイアウトテンプレートは Twitter Bootstrapの レイアウト, グリッドシステム と フルードグリッドシステム, row-fluid と span* の使用法に注意して下さい。

固定レイアウト

固定レイアウトを作成するために、Bootstrapでは、 <div class="container"> のみを必要とする一般的な固定幅（オプションでレスポンシブ）のレイアウトを提供しています。

22.png

<body>
 <div class="container">
   ...
 </div>
</body>

フルードレイアウト

<div class="container-fluid"> 、流動的な2カラムのページを作成するには - アプリケーションやドキュメントに最適です。

23.png

<div class="container-fluid">
 <div class="row-fluid">
   <div class="span2">
     <!--Sidebar content-->
   </div>
   <div class="span10">
     <!--Body content-->
   </div>
 </div>
</div>

レスポンシブ・ユーティリティ・クラス

モバイルフレンドリーな開発のために、これらのユーティリティクラスを使用して、デバイスごとにコンテンツを表示したり隠したりすることができます。 以下は、利用可能なクラスと、メディアクエリレイアウトに対するその効果の表です（デバイスごとにラベル付けされています）。 これらは、Liferayポータルにすでに含まれています。 詳しくは、 Twitter Bootstrapのレスポンシブ のドキュメントをご覧ください。

クラス 携帯電話（767px以下） タブレット端末（979px→768px） デスクトップ（初期値）
.visible-phone 閲覧可能 非表示 非表示
.visible-tablet 非表示 閲覧可能 非表示
.visible-desktop 非表示 非表示 閲覧可能
.hidden-phone 非表示 閲覧可能 閲覧可能
.hidden-tablet 閲覧可能 非表示 閲覧可能
.hidden-desktop 閲覧可能 閲覧可能 非表示

ポートレットに機能をレイアウトするにはどうすればよいですか？

Liferay popular <aui:layout>, <aui:column> は Liferay 6.2 では古い AlloyUI グリッドシステムを使用しているため、非推奨です。

<aui:layout>
   <aui:column columnWidth="25">
       <liferay-util:include page="/html/portlet/jukebox/column1.jsp" />
   </aui:column>
   <aui:column columnWidth="75">
       <liferay-util:include page="/html/portlet/jukebox/column2.jsp" />
   </aui:column>
</aui:layout>

レイアウトでBootstrapをフルに活用するためには、非常に似たAPIを提供する、全く新しい <aui:row> と<aui:col> タグリブを使用する必要があります。新しいタグリブの次の例を参照してください。

<aui:row>
   <aui:col width="25">
       <liferay-util:include page="/html/portlet/jukebox/column1.jsp" />
   </aui:col>
   <aui:col width="75">
       <liferay-util:include page="/html/portlet/jukebox/column2.jsp" />
   </aui:col>
</aui:row>

利用可能な <aui:row> のオプション：

オプション 説明
cssClass 行のラッパーの要素に適用されるcssクラス。
id 行のラッパー要素に適用されるカスタムIDです。
可変 カラムを.row-fluidにするかどうか

利用可能な <aui:col> のオプション：

オプション 説明
cssClass カラムラッパー要素に適用されるcssクラスです。
id カラムラッパー要素に適用されるカスタムIDです。
オフセット .offset*クラスを使用して列を右に移動する。
オフセット幅 パーセンテージを使用して列を右に移動すると、パーセンテージを最も近い.offset*値に変換します。
スパン これは12列のグリッドなので、各.span*はその12列のうちのいくつかにまたがり、各行（または親の列数）に対して常に12を加算する必要があります。
幅 カラムの幅をパーセンテージで指定すると、パーセンテージを最も近い .span* 値に変換します。

テーマの構築

Liferay と AlloyUI は Less から Sass への 1:1 変換を使用し、 alloy-bootstrap リポジトリで入手できます。 Liferayの翻訳は、コードに最小限の余分なスタイル定義を追加します。 新しいLiferayクラシックテーマは、生成されるためにBootstrapのコアファイルを使用します。 この柔軟性が、Liferayに強力な機能をもたらしています。 テーマ開発時に、生成されたCSSファイルをコンパイルする前に、Bootstrapコアの一部を再定義することが可能です。 例えば、Bootstrapのベースカラーを定義するBootstrapファイル上の変数をいじることが可能です。

Creating a Theme

liferay-client-park-group/liferay-plugins-sdk-6.2.0/themes/park-theme/以前にあなたのために作成したフォルダー上の材料に移動してください。

24.png

Liferayが親テーマからファイルをコピーするようにテーマをデプロイします。 テーマがデプロイされると、テーマフォルダは次のようになります：

25.png

ファイル 説明
アウイ AlloyUI Twitter Bootstrapのテーマ「 」のコピーが含まれています。
_aui_custom.scss AlloyUI の CSS クラスを上書きするカスタムファイルです。
_aui_variables.scssを使用します。 AlloyUIテーマの変数を上書きするためのカスタムファイルです。
_liferay_custom.scssを使用しています。 Liferay の CSS クラスを上書きするためのカスタムファイルです。

BootstrapのCSSクラスや変数を拡張する場合は、custom.cssではなく、このファイルの中で行う必要があります。 SASSレベルでテーマをカスタマイズすることが可能です。つまり、Bootstrapのものを含め、AlloyUIのCSSクラスを上書き、拡張、カスタマイズすることができます。 実際に見てみましょう。

26.png

作成したテーマ上で、_aui_variables.scssを_diffs/css/フォルダにコピーし、以下の2つの変数の値を変更します。

...
$navbarBackground: #FF0000;
$navbarBackgroundHighlight: #FF0000;
...

テーマを再デプロイすると、すべてのナバーコンポーネントの背景色が再定義されていることに気づきます。 テーマで利用可能な既存の機能を拡張するために、 Sass の機能を自由に使用することができます。

27.png

Compass の全機能を Liferay テーマの中で使用できることに留意してください。

JSONWSでLiferayサービスにアクセスする

Liferayは、生成された任意のエンティティを、使い勝手の良いWebサービスAPIで公開することができます。 Liferay インスタンスで http://localhost:8080/api/jsonws を開いて、利用可能なものを確認します。

Liferay.Service({
   "$user[firstName,emailAddress] = /user/get-user-by-id": {
       "userId": 10201,
       "$contact = /contact/get-contact-by-id": {
           "@contactId" : "$user.contactId"
       }
   }
},
function(obj) {
  console.log(obj)
});

詳しくは Liferay's JSON documentationをご覧ください。

追加情報

技術的な変更を理解するのに役立つ素晴らしいリソースは、 Liferay's issue trackerのオリジナルのチケットストーリーを追うことです。

did-this-article-resolve-your-issue
legacy-knowledge-base
did-this-article-resolve-your-issue