Liferay 7 / DXPでのテーマの作り方

はじめに

　Liferayでは画面の見栄えを制御するのに、Theme（テーマ）という仕組みが備わっている。テーマを切り替えることによって、サイトの見栄えを切り替えることができる。

　またLiferayではWordpressなどと異なり、カラムの制御も独立してLayoutという仕組みで制御することができる。それにより同じThemeで、異なるレイアウトという組み合わせも容易に作成することができる。

開発ツールのインストール

Theme開発には一般的なフロントエンド開発で利用するyoやgulpといったツールを利用している。以下はMacでの設定方法になる。

Nodeのインストール(homebrewをインストール済みの前提）

El capitanだとhomebrew経由でのnodeのインストールがうまくいかないため、すでにインストールしているnode.jsをアンインストール、以下の方法でnodebrewを先にインストールの上、node.jsを再インストールする。

curl -L git.io/nodebrew | perl - setup

.bash_profileに以下の行を追加

export PATH=$HOME/.nodebrew/current/bin:$PATH

nodeのインストール

(nodebrew install stableだと、ソースからコンパイルするので時間がかかるので、バイナリーをインストールする）

nodebrew install-binary stable

Yeoman, gulpをインストール

npm install -g yo gulp

Liferay theme generatorをインストール

npm install -g generator-liferay-theme

SASS, compassをインストール

gem install sass compass

Bladeツールインストール

公式ドキュメント：INSTALLING BLADE CLIを参照

Liferayワークスペースの作成

公式ドキュメント：CREATING A LIFERAY WORKSPACE WITH BLADE CLIを参照

(自分の記事Liferay DXP / 7におけるサービスビルダーポートレットの作成方法でもbladeのインストール、Liferayワークスペースの作成について触れているのでそちらも参照にしてください。)

テーマ作成

作成したLiferayワークスペースを、liferay_workspaceとした場合、liferay_workspace/themesまで移動する。Themeのプロジェクト名はここではliferay-themeとして、以下のコマンドを実行する。

yo liferay-theme

プロンプトが出るので、指示に従って入力。続いて、ターゲットとするtomcatと、アクセス先のURLを以下のように入力。

? Enter the path to your app server directory: /Users/yasuflatland/project/70ce/tomcat-8.0.32
? Enter the url to your production or development site: http://localhost:8080

実際のプロジェクトでは、Lexicon(Liferay7 / DXPから採用されたBootstrapベースのデザインガイドライン）をベースにテーマを作成していくのがベストプラクティスとなる。その際、

DXP(EE版)のデフォルトテーマと同様のテーマの作成方法
1. yo liferay-themeで普通にテーマを作成する。
2. /osgi/marketplace/Liferay CE Foundation.lpkgを解凍、classic-theme-1.0.5.warを展開。(DXPのバージョンによって、1.0.5の部分のバージョン名は変わる)
3. classic-theme-1.0.5直下のcss,images,js,templatesを、1で作成したThemeのsrcに展開、結合する。
4. gulp deployでデプロイ。

クラシックテーマ(CE版のデザインになる）の適用
gulp kickstartとタイプすると、CE版のclassicテーマをベースにテーマを初期化してくれる。

デプロイ

デプロイは以下のgulpコマンドで、theme作成時に指定したサーバーに大してデプロイされる。デプロイ先を変更するにはliferay-theme.jsonの内容を変更すること。

gulp deploy

Liferay側でキャッシュが効いて、更新が反映されないことが多いので、Liferayのportal-ext.propertiesとGUI上にて以下を追加、編集すること

theme.css.fast.load=false
layout.template.cache.enabled=false
minifier.enabled=false

・コントロールパネル > 設定> システム設定 > Velocityエンジン > 編集
Resource modification check interval=0 
・コントロールパネル > 設定> システム設定 > FreeMarker エンジン > 編集 
Resource modification check=0

Gitなどでのコード管理時

yoコマンドで生成されるThemeテンプレートにはnode_modulesが入っていないので、gitからクローンしてきた後に、

npm install

でnodeモジュールをインストールすること。

各種コマンド

現在のテーマの状態を確認

gulp status 

テーマのベーステーマを変更などする場合

gulp extend

デプロイ

gulp deploy

レイアウトの作り方

以下のコマンドでレイアウトのテンプレートも作れる。複雑な入れ子にするには、手作業が必要だが、スケルトンは以下のコマンドで作成できる。

yo liferay-theme:layout