aegif Labo Blog

Thursday, April 25, 2019

Alfresco 6 をインストールしてみよう

こんにちは、イージフのオープンソース警察のニコラです！
今日は Alfresco 6 をインストールしてみませんか？

Alfresco社は今まで初心者に優しいインストールウィザードを提供してましたが、Alfresco 6 から少し難しくなり、 Docker を使って頑張らないといけないです。下記の手順にそってやれば難しくないので、ぜひやってみてください。私は Ubuntu Linux 2018.04 で行った際のコマンドを書きましたが、他のOSでも似たようなコマンドを使えばうまくいくかと思います。

ステップ１： Docker をインストール

Docker が既に手元にある上級者は、直接ステップ 2 へお進みください。普通の人は、下記のコマンドを打ってください：

sudo apt install docker.io

（Red HatやmacOSやWindowsでのインストール手順はこちら： https://docs.docker.com/install）

「docker」というグループが作成されました。このグループに、自分のユーザー（私の場合だと「nico」、分からなければ whoami を打ってください）を追加してください：

sudo usermod -aG docker nico
newgrp docker

ステップ２： Alfresco をインストール

Git がまだ手元になければ、下記のコマンドでインストールしてください：

sudo apt install git

自分のホームフォルダなどで、下記のコマンドを一つずつ入力してください：

git clone https://github.com/Alfresco/acs-deployment.git

cd acs-community-deployment/docker-compose

docker-compose up

終わり！Alfresco のダウンロードがされ、実行されます。数分かかります。

Alfresco 6 を使う

Alfresco のユーザーインターフェース「Alfresco Share」は http://localhost:8080/share にあります。

CMIS や WebDAV の URL、そして「ノードブラウザー」や「ウェブスクリプトホーム」という管理ツールが http://localhost:8082/alfresco にあります。

コンテンツ検索のため、Alfresco 6 が Solr を使います。Solr コンソールが http://localhost:8083/solr にあります。

Alfresco を停止するため、dockerコマンドを移したと同じコンソールで、CTRL-C を打ちましょう。Alfrescoに保存した文書やAlfrescoの設定が消えないのでご安心ください。もう一回 Alfresco を起動するため、また同じ "docker-compose up" コマンドを acs-community-deployment/docker-compose フォルダーで入力すれば大丈夫です。

裏側を見る

Alfresco は複数の Docker コンテナに分かれています。すべてのコンテナを見るため、下記のコマンドを入力してください：

docker container ls

これでコンテナのリストが出てきます。出力の最後のコラムを見てみましょう：

[...] NAMES

[...] dockercompose_share_1

[...] dockercompose_solr6_1

[...] dockercompose_alfresco_1

[...] dockercompose_postgres_1

コンテナが逆起動順番でリストされます：

- Alfresco Share（ウェブUI）

- Alfresco Search Services（Solr のエンジンとデータベース）

- Alfresco Content Repository（文書のレポジトリー）

- Postgres（メインのデータベース）

例えば、もしPostgresコンテナでなにかファイルを編集したい場合や、メモリーがどうなってるか知りたいとき、どうすれば良いでしょう？
その場合は、上記の「NAMES」コラムから Postgres のコンテナ名を取って（私の場合はdockercompose_postgres_1でした）、下記のコマンドを入力しましょう：

docker exec -it dockercompose_postgres_1 bash

それでコンテナの中でのターミナルが使えるようになります！

Alfrescoが好きになって本番環境に導入したい場合は、Docker ではなく Kubernetes が Alfresco社から推奨されています。それについて今度書きます！

Tuesday, April 16, 2019

Liferayのサイトにタグを埋め込む

こんにちは。おおたにです。

最近ではアクセス解析、Web接客、マーケティングオートメーション等々、より良いデジタルエクスペリエンスを提供するためのツールが一般的に利用されるようになり、これらのツールをWebサイトに組み込む機会も多くなっているかと思います。今回は、これらのツール組み込みに必要な、カスタムタグ（特にJavaScriptのスクリプト）をLiferayサイトに埋め込む方法について紹介したいと思います。

ページ毎に直接JavaScriptを埋め込む

まずはお手軽な方法から紹介します。

1. 以下のようにページの上部、「ページ設定」アイコンをクリックします。

2. 「詳細設定」をクリックして「ページの下に実行されるJavaScriptを貼り付ける」欄に埋め込むJavaScriptコードをコピーし、「保存」をクリックします。

以上でページへのJavaScript埋め込みは完了です。とてもお手軽！

特定のサイトの公開ページ/非公開ページ全部に一括で埋め込みたい場合は、画面上部の「メニュー」アイコン->「ページ作成設定」->「サイトページ」で「公開ページ」/「非公開ページ」のギアアイコンをクリックしてみましょう。先ほどの手順2.のような画面が表示され、公開ページ/非公開ページ一括で埋め込むことができます。

なお、この方法については以下の点にご注意ください。

ページ毎/サイト毎に設定する必要がある
JavaScriptしか埋め込めない
<body>タグにしか埋め込めない

少数のページに必要なJavaScriptを埋め込む場合にはとても役立ちますが、多数のページにタグを埋め込む場合には管理面で現実的ではない可能性があります。

全てのページにタグを埋め込む

ページ数が少ない/今後ページが増えることがない状況であれば、先ほど紹介した方法で対応できます。しかし、ページ数が多い/今後ページが増えていくという状況では、埋め込み作業に膨大な工数がかかったり、埋め込み忘れが発生したりということが考えられます。また、埋め込みたいタグがJavaScriptでない場合も先ほどの方法では対応できません。

そのような場合は、テーマ（Theme）を開発することで実現することができます。テーマとはWebサイトの見栄えを制御するLiferayの仕組みのことで、その中に必要なタグを埋め込むと、テーマが適用された全てのページにタグが自動的に埋め込まれます。

また、複数のタグを複数ページに埋め込む必要がある場合、一般的にはタグマネージャーが使われるかと思います。この場合はタグマネージャーのタグをテーマに埋め込む形になります。以下では、Google Tag Manager（以下GTM）を例に、カスタムテーマにGTMタグを埋め込むためのおおまかな手順を紹介します。

1. GTM公式ドキュメントを参考にGTMをセットアップします。

　セットアップが進むと、こちらのドキュメントにあるように<head>タグと<body>タグにそれぞれGTMタグを埋め込むように指示されます。

2. Liferayのテーマを開発します。まだテーマ開発を行っていない方は以下の記事/ドキュメントを参考にテーマを開発します。
　　Liferay 7 / DXPでのテーマの作り方

　　Creating Themes - Liferay 7.1 - Liferay Developer Network

　　Developing Themes - Liferay 7.1 - Liferay Developer Network

3. タグを埋め込む先のファイル /src/templates/portal-normal.ftl をエディタ等で開きます。このファイルがWebサイトの<html><head><body>タグのひな型になっています。

もし上記ファイル存在しない場合は、一度テーマをビルドしてください。 /build/templates/portal_normal.ftl が生成されるので、このファイルを /src/templates フォルダにコピーします（/src 以下に templatesフォルダが無い場合は作成してください）。

4. GTMセットアップの指示に従い、<head>タグと<body>タグにそれぞれGTMタグを追加します。

5. テーマをビルドし、生成されたwarファイルを<LIFERAY_HOME>/deploy フォルダにコピーすればデプロイ完了です。

6. 埋め込み対象のページ/サイトのテーマを先ほど作成したカスタムテーマに変更し、GTMタグが埋め込まれていることを確認します（ブラウザのデベロッパーツールでHTMLソースを確認し、"googletagmanager"等で検索すれば<script>タグ、<noscript>タグが埋め込まれていることを確認できるはず）。

以上でGTMタグの埋め込みは完了です。あとはGTM側でタグとトリガーを設定し、必要なページに必要なタグを配信するだけです。

今回の紹介内容は以上です。テーマ開発のハードルは若干高いですが、一度作ってしまえばググっとハードルが下がりますので、ぜひチャレンジしてみてください。

Thursday, March 28, 2019

Liferay DXP 7.1でシンプルにサーバサイドロジックを追加する

こんにちは。おおたにです。

今回は、Liferay DXP 7.1にサーバサイドロジックを追加する方法を紹介します（7.0でも使えます）。本記事は、主に以下のような要件にマッチします。

Web APIとしてロジックを公開する
Liferayとは直接関わりのない機能を実装する（認証や各種サービスなどLiferayが提供する機能は使わない）

Liferayが提供するサービスを使った実装を行うのであればサービスビルダを使ってリモートサービスを実装し、そうでなければJAX-RSを使って実装するのが定石かと思うのですが、ここではOSGi HTTP Whiteboardを使った実装を紹介します。
（もちろん、Liferayと完全に疎結合なロジックであれば、Liferayの前面に構築されたWebサーバのレイヤでCGI等を使って実装するのもありですが、ここではそれには触れません）

OSGi HTTP Whiteboardとは

OSGi HTTP WhiteboardとはOSGi Compendiumで規定されている仕様の1つで、サーブレットやサーブレットフィルタ、HTML/JS/画像等の静的リソースなどをOSGiバンドルを使って公開するためのシンプルな仕組みを提供します。Liferay DXPはOSGiの基盤の上に実装されているため、そのカスタマイズにOSGiの仕様を利用しない手はありません。具体的には、以下の2ステップでWeb APIを公開できます。シンプル！

Servlet等をコンポーネントとして実装したOSGiバンドルを開発する
開発したOSGiバンドルをLiferay（OSGi実行基盤）にデプロイする

この方法は素のServletを直接公開するようなものなので、認証等でLiferayの仕組みを利用したい、もしくは関連する複数のAPIをまとめて実装/公開したい場合はJAX-RSを使い、Liferayの仕組を全く使用せずなるべく疎結合に、ちょっとしたロジックを実装したい場合はHTTP Whiteboardを使うというような使い分けが考えられます。

実装してみよう

では早速実装してみましょう。まずはServletコンポーネントを作成します。実装のポイントは以下の4点です。

HttpServlet の実装クラスを作成する
@Component アノテーションでコンポーネント宣言する
osgi.http.whiteboard.servlet.name でServlet実装の完全修飾クラス名を指定する
osgi.http.whiteboard.servlet.pattern でServletをマップするURLパスを指定する

例えば以下のように実装します。

package jp.aegif.liferay.sample;
 
@Component(
  immediate = true,
  property = {
    "osgi.http.whiteboard.servlet.name=jp.aegif.liferay.sample.SampleWhiteboardServlet",
    "osgi.http.whiteboard.servlet.pattern=/get-email-address-hash" // Web APIのパスを設定する
  },
  service = Servlet.class
)
public class SampleWhiteboardServlet extends HttpServlet {
  @Override
  protected void service(HttpServletRequest request, HttpServletResponse response) throws IOException {
    // 必要な処理とレスポンスを記述する
    // sample implementation to generate SHA-1 hash of Munchkin API Private Key + Email Address
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter printWriter = response.getWriter();
    try {
      String source = API_PRIVATE_KEY + Objects.toString(request.getParameter("email"), "");
      byte[] bytes = MessageDigest.getInstance("SHA-1").digest(source.getBytes(StandardCharsets.UTF_8));
      printWriter.print(DatatypeConverter.printHexBinary(bytes));
    } catch (NoSuchAlgorithmException e) {
      e.printStackTrace();
    }
    printWriter.close();
  }

  private static final String API_PRIVATE_KEY = "change_it"; // Set your Munchkin API Private Key
}

このサンプルは、SaaSのマーケティングオートメーションツールMarketoのassociateLead API向けハッシュ生成ロジックを実装してみたものです。Liferayのフォームで入力した情報を使ってリード登録やcookie紐づけを行いたい場合に利用できるかと思います。associateLead APIのコールには、MarketoのAPIプライベートキーを利用して生成したハッシュが必要なため、サーバサイドロジックとして実装する必要があります。なお、このロジックをクライアントサイドのJavaScriptで実装すると、APIプライベートキーが全世界に向けて公開されてしまいますのでくれぐれもご注意を…。

あとはOSGiバンドル作成のためのbnd.bndやbuild.gradle等のビルド用ファイルを用意してjarファイルをビルドするだけです。bndtoolsやgradleを個別にセットアップしてビルドすることも可能ですが、Liferay Developer StudioやLiferay IDEを使うと簡単にビルドできます。

デプロイして試してみよう

ビルドが成功したら、早速デプロイしてみましょう。

<LIFERAY_HOME>/deploy フォルダにjarファイルをコピーする
ログに STARTED jp.aegif.liferay.sample.whiteboard.servlet_1.0.0 と表示される

以上でデプロイ完了です。ホットデプロイされるため、Liferayを再起動することなくコンポーネントの機能が有効化されるはずです。

動作確認のために http://localhost:8080/o/get-email-address-hash?email=test@example.com にアクセスしてみましょう。ハッシュコードが返ってくればOKです。LiferayではOSGi HTTPエンドポイントパスが /o/ となっているため、Web APIのURLは http://<サーバ名>:<ポート番号>/o/<ServletをマップしたURLパス> となります。リクエストパラメータ email でメールアドレスを指定します。

今回の内容は以上です。みなさんもHTTP Whiteboardを使ってシンプルにWeb APIを公開してみてください！

Wednesday, January 9, 2019

Liferay DXP 7.1 リリース

明けましておめでとうございます。小川です。

本年もよろしくお願いします。

昨年下期にLiferay DXP 7.1がリリースされました。

なので、今回は前バージョン7.0からの変更点をいくつか紹介しようと思います。

前提として、
本記事の対象者は管理者や利用ユーザを想定しています。
（ディベロッパー向けの変更点についてはほとんど触れていません。）
変更点は大小様々ありますが、比較的大きな変更点に絞っています。

下記のような流れで紹介していきます。

1. Liferay DXP 7.1の主な変更点と説明

主な変更点を簡単に説明します。

①コンテンツページ
②ページ管理

③ナビゲーションメニュー

④フォーム

⑤GDPRサポート

⑥Adaptive Media

⑦ワークフロー管理

2. ナビゲーションメニューについて

1. で取り上げた変更点の1つであるナビゲーションメニューにフォーカスし、詳しく説明します。

3. まとめ

4. おまけ

では、本題に入ります。

検証環境

OS：macOS High Sierra 10.13.6

Liferay ：Liferay 7.1.1 CE GA2

1. Liferay DXP 7.1の主な変更点と説明

さっそくですが、主な変更点を挙げ説明していきます。

①コンテンツページ

ページを作成する際に選択できるページ種別にコンテンツページが増えました。

コンテンツページはフラグメントと呼ばれるコンテンツをページ上に配置することができるページです。
フラグメントは下図のようなフラグメントエディタを用いて作成することができ、作成したフラグメントはページエディタを用いてページ上に配置することができます。

また、特定のタグを用いることで指定領域（テキストと画像）をページ上で直接編集することができます。加えて、ポートレットの埋め込みが可能です。標準ポートレットだけでなく、自分で作成したポートレットも埋め込むことができます。

簡単な使い方はこちらのサイトにある動画を見てもらうとわかりやすいかと思います。

コンテンツ作成者がコンテンツの雛形（フラグメント）のみ作成し、マーケティング担当者がコンテンツ自身に手を加えることなく、テキストや画像を目的や状況に応じてページ上で編集するような使い方があるかなと思います。

②ページ管理

下図のようにページ階層を可視化して管理できるようになりました。

ここでページの作成、設定、削除ができます。サイト内のページ管理を単一の画面に集めることで管理しやすくなると思います。

③ナビゲーションメニュー

ナビゲーションメニューとは下図のように「サイト内のページを表示しクリックすることで対象ページに移動できるメニュー」です。
今回、どのようにアップデートされたのかは次節で詳しく説明します。

④フォーム

フォームは大幅にアップデートされた部分だと思います。条件付きルールなどより高度なフォームが作成できるようになりました。新フォームに関して説明すると長くなりそうなので、次回のブログで詳しく説明しようと思います。

⑤GDPRサポート

GDPRに対応するための下記の機能が追加されています。

GDPRとは？

●Sanitizing User Data

これまでユーザを削除する機能はありましたが、ユーザに関連するコンテンツまでは対応していませんでした。本機能ではユーザに関するコンテンツまで削除することにより、GDPRの要件に対応しています。

●Exporting User Data

ユーザをExportする機能はこれまでもありましたが、上記と同様にユーザに関する個人データ（コンテンツやコメント等）も抽出できるようになりました。

⑥Adaptive Media

これはアクセスする各デバイスに応じて画像解像度を制御する機能となります。この機能によりデバイスやネットワークへの負担を軽減することができます。

⑦ワークフロー管理

ワークフローの設定等はすべてコントロールパネル内の1つのエリアにまとめられ、またワークフローの複製やバージョン管理が可能となりました。

2. ナビゲーションメニューについて

今回、ナビゲーションメニューの扱い方が大きく変わりました。以前のバージョンから利用している方はどのように使うのかわかりづらいと思うので、本節ではナビゲーションメニューにフォーカスします。

前バージョンとの大きな違いはナビゲーションメニューを自由に作成・設定できるようになった点です。自身で様々なパターンのナビゲーションメニューを作成し、ナビゲーションメニューポートレットからどのナビゲーションメニューを使用するか選択することができるようになりました。
文字だけではわかりづらいと思うため、ナビゲーションメニューの作成から設定までを詳しく説明します。

管理者メニューの[Build]→[Navigation Menus]でナビゲーションメニュー画面に遷移します。そこで右上の[+]からナビゲーションメニューを作成します。今回は下図のように”Test Navi Menu”という名のものを作成しました。
（”Default”と”Default Private"ははじめからあるナビゲーションメニューです。）

”Test Navi Menu”を開きます。まだ何もありません。

右上の[+]→[Page]を選択するとサイト内にあるページを選択することができます。

必要なページを選択します。（今回は4つのページを選択しました。）
これでナビゲーションメニューの作成完了です。

次にナビゲーションメニューの設定を行います。ページに配置してあるナビゲーションメニューポートレットの設定を開きます。

先ほど作成したナビゲーションメニューを選択します。

これで設定も完了です。
自分で作成したナビゲーションメニューが下記のように表示されました。

おそらく慣れるまでは使いにくいと思われるかもしれません。しかし、ナビゲーションメニューに自由度を持たせることで、複雑なサイトマップに対応しやすくなったり、特定のページ、コンテンツへの誘導性も高まるのではないでしょうか。

ちなみに、ナビゲーションメニューを階層（サブメニュー的に）で表示させたい場合は下記のように対象ページをドラッグして動かすことで簡単に実現することができます。