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

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

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

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

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

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

.bash_profileに以下の行を追加

```bash:.bash_profile
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

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

```bash
nodebrew install-binary stable
```

### Yeoman, gulpをインストール

```bash
npm install -g yo gulp
```

### Liferay theme generatorをインストール

```bash
npm install -g generator-liferay-theme
```

### SASS, compassをインストール

```bash
gem install sass compass
```

### Bladeツールインストール
[公式ドキュメント：INSTALLING BLADE CLI](https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/installing-blade-cli)を参照

### Liferayワークスペースの作成
[公式ドキュメント：CREATING A LIFERAY WORKSPACE WITH BLADE CLI](https://dev.liferay.com/develop/tutorials/-/knowledge_base/7-0/creating-a-liferay-workspace-with-blade-cli)を参照

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

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

```bash
yo liferay-theme
```

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

```bash
? 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](https://liferay.github.io/lexicon/)(Liferay7 / DXPから採用されたBootstrapベースのデザインガイドライン）をベースにテーマを作成していくのがベストプラクティスとなる。その際、

**DXP(EE版)のデフォルトテーマと同様のテーマの作成方法**
1. yo liferay-themeで普通にテーマを作成する。
2. <Liferayバンドル>/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の内容を変更すること。

```bash
gulp deploy
```

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

```bash:portal-ext.properties
theme.css.fast.load=false
layout.template.cache.enabled=false
minifier.enabled=false
```

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


## Gitなどでのコード管理時

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

```bash
npm install
```

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

## 各種コマンド

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

```bash
gulp status 
```

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

```bash
gulp extend
```

デプロイ

```bash
gulp deploy
```

### レイアウトの作り方

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

```bash
yo liferay-theme:layout
```