Wednesday, May 15, 2019

Liferay Screensでモバイルアプリを作ってみよう(初級編)

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

今回は、Liferay DXPのモバイル対応について紹介したいと思います。

まず、Liferayで構築したWebサイトはレスポンシブなデザインとなっているため、スマートフォン等のブラウザからアクセスすれば画面サイズに応じた適切な見栄えで表示されます。なので、ブラウザからのアクセスが許容されるのであれば、モバイル対応に際して本記事にあるような開発は一切必要ありません。

Liferay Mobile SDKとLiferay Screens


一方で、専用のモバイルアプリを開発するとなると、Liferayで構築したWebサイトにモバイルアプリからアクセスする、もしくはモバイルアプリがLiferayの提供するサービスをバックエンドで利用するようなケースに対して、Liferayは以下の2つの機能を提供しています。

Liferay Mobile SDK

Mobile SDKは、Liferayの認証や権限解決、Webサービス呼出等の機能をネイティブモバイルアプリに提供するものです。Liferayが提供する機能はほぼ全てWeb APIとして提供されているため、HTTPリクエストレベルの記述を行えば何でも実装できるのですが、Mobile SDKはLiferayとの通信をラップして各機能を簡単に利用できるようにしています。モバイルアプリの認証基盤としてLiferayを利用したい、バックエンドでLiferayのサービス(カスタムサービス含む)にアクセスしたいというような、独自のモバイルアプリにLiferayのローレベルの(APIレベルの)機能を組み込むケースに適しています。

Liferay Screens

Screensは、Liferayの種々の機能を出来合いのコンポーネントとして提供するものです。このコンポーネントはScreenletと呼ばれ、Android向けiOS向けにそれぞれ多数のコンポーネントが提供されています。ログイン画面やWebコンテンツ表示、アセット表示などのハイレベルの機能が、Liferayとの通信だけでなくモバイルアプリのUIも含めて提供されているため、これら出来合いのコンポーネントを組み合わせるだけで簡単にモバイルアプリを開発することができます。提供されているScreenletである程度要件を満たせるケースであれば利用の価値があります。

モバイルアプリを作ってみよう


というわけで、さっそくモバイルアプリを作ってみましょう!以下、Cordova + Liferay ScreensでシンプルなAndroidアプリを開発していきます。Cordovaを使う理由は、Cordovaプラグインを利用できるようにするところにあります。Cordovaと聞くとクロスプラットフォームも期待してしまいますが、Liferay Screensとの組み合わせだとその限りではありません。残念…
なお、今回はWeb Screenletというコンポーネントを使ってWebページをそのまま埋め込み表示してみます。いわゆるWebViewですね。

事前準備

まずは開発に必要なツール類をインストールします。

1. gitのサイトからインストーラをダウンロードし、gitをインストールする。

2. Node.jsのサイトからインストーラをダウンロードし、Node.jsをインストールする。

3. 以下のコマンドを実行し、Apache Cordovaをインストールする。
$ npm install -g cordova

4. 以下のコマンドで screens-cli をインストールする。
$ npm install -g screens-cli

5. こちらのサイトを参考にしてAndroid Studioをインストールする。

6. こちらの記事を参考にしてAndroidエミュレータをセットアップする。

プロジェクトの作成

以下、Liferay Developer Networkのドキュメントに従って進めます。

1. プロジェクト用のフォルダを作成する。
$ mkdir <プロジェクト名>
$ cd <プロジェクト名>

2. 上記フォルダにファイル.plugins.screensを作成し、利用したいCordovaプラグイン名を列挙する
cordova-plugin-call-number
cordova-plugin-camera

3. 以下のコマンドを実行してプロジェクトを作成する
$ screens-cli android <プロジェクト名>

4. 成功するとフォルダ <プロジェクト名>/platform/android/<プロジェクト名> をAndroid Studioで開けるようになるので、Android Studioを起動してこのフォルダを開く

5. Android Studioで Failed to find target with hash string 'android-xx' エラーが出る場合は、SDK Managerアイコンをクリックして当該バージョンにチェックを入れ、必要なバージョンのSDKをインストールする。


5. 改めてFile -> Sync Project with Gradle Filesをクリックする。適宜必要なツールをインストールしてビルドが通るようになることを確認する。

Web Screenletの組み込み

続いて、Web Screenletを組み込みます。Liferay Developer Networkのこちらこちらの記事が参考になると思います。

6. Androidプロジェクトのres/valuesフォルダにファイルserver_context.xmlを作成し以下の内容を入力する。各値は環境にあった内容に変更する。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="liferay_server">http://10.0.2.2:8080</string>
    <integer name="liferay_portal_version">71</integer>
    <string name="liferay_company_id">20099</string>
</resources>
  • liferay_server : LiferayサーバのURL(10.0.2.2はエミュレータから見た時のローカルホストのIP)
  • liferay_portal_version : Liferayバージョン(Liferay7の場合は70、Liferay7.1の場合は71)
  • liferay_company_id : アクセス先のインスタンスID(Liferayのメニュー->コントロールパネル->設定->仮想インスタンス->インスタンスIDで確認する)

7. AndroidManifest.xmlapplicationタグに属性android:usesCleartextTraffic="true"を追加し(LiferayサーバURLがHTTPの場合にエラーが発生するのを防ぐため)、activityタグの属性android:themeの値を"@style/AppTheme"に変更する。
<application .... android:usesCleartextTraffic="true">
    <activity .... android:name="MainActivity" android:theme="@style/AppTheme" ....>

8. Androidプロジェクトのres/values/styles.xmlを開き、AppThemeの親テーマを以下のように変える
<style name="AppTheme" parent="default_theme">

9. Androidプロジェクトのres/layout/actiity_main.xmlに以下のスニペットを挿入し、Web Screenletを追加する。
<com.liferay.mobile.screens.web.WebScreenlet
  android:id="@+id/web_screenlet"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layoutId="@layout/web_default"
  app:autoLoad="false"
/>

10. MainActivity.javaを以下の内容に置き換え、WebListenerを実装する。
public class MainActivity extends AppCompatActivity implements WebListener {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    WebScreenlet screenlet = (WebScreenlet)findViewById(R.id.web_screenlet);
    screenlet.setListener(this);
    WebScreenletConfiguration webScreenConfiguration = new WebScreenletConfiguration.Builder("/web/guest/home")
        .setWebType(WebScreenletConfiguration.WebType.OTHER).load();
    screenlet.setWebScreenletConfiguration(webScreenConfiguration);
    screenlet.load();
  }

  @Override
  public void onPageLoaded(String url) {
    Toast.makeText(this, "Page load successful!", Toast.LENGTH_SHORT).show();
  }
  @Override
  public void onScriptMessageHandler(String namespace, String body) {
    // do nothing
  }

  @Override
  public void error(Exception e, String userAction) {
    Toast.makeText(this, "Bad things happened: " + e.getMessage(), Toast.LENGTH_LONG).show();
  }
}

以上でWeb Screenletの埋め込みの完了です。

エミュレータで動作確認してみよう


では、さっそく動作確認してみましょう。DebugもしくはRunアイコンをクリックし、Virtual Deviceを選択してエミュレーション開始です(Virtual Deviceが無い場合はCreate New Virtual Deviceで作成してください)。


ビルドに成功すると、以下のようにエミュレータが起動してモバイルアプリが自動で立ち上がり、Liferayサイトが表示されます。


以上でWeb Screenletを使ったシンプルなAndroidアプリができました。とても簡単!
これをベースに色々な機能を追加していくことができます。例えば、ネイティブアプリとしてログイン画面を提供したり、他のScreenletを使う、Cordovaプラグインを使うなどがあると思いますが、これらの方法についてはまた別の機会に紹介したいと思います。みなさんも是非モバイルアプリの開発にチャレンジしてみてください!

Thursday, April 25, 2019

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

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

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

ステップ1: 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

ステップ2: 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でのテーマの作り方

3. タグを埋め込む先のファイル /src/templates/portal-normal.ftl をエディタ等で開きます。このファイルがWebサイトの<html><head><body>タグのひな型になっています。
  • もし上記ファイル存在しない場合は、一度テーマをビルドしてください。 /build/templates/portal_normal.ftl が生成されるので、このファイルを /src/templates フォルダにコピーします(/src 以下に templatesフォルダが無い場合は作成してください)。
4. GTMセットアップの指示に従い、<head>タグと<body>タグにそれぞれGTMタグを追加します。
埋め込みの一例(styledテーマへの埋め込み)

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

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

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


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

  1. <LIFERAY_HOME>/deploy フォルダにjarファイルをコピーする
  2. ログに 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からの変更点をいくつか紹介しようと思います。

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

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

主な変更点を簡単に説明します。
 ①コンテンツページ
 ②ページ管理
 ③ナビゲーションメニュー
 ④フォーム
 ⑤GDPRサポート
 ⑥Adaptive Media
 ⑦ワークフロー管理

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

では、本題に入ります。


検証環境
OS:macOS High Sierra 10.13.6
Liferay :Liferay 7.1.1 CE GA2


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


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

①コンテンツページ


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


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


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

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

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

②ページ管理

下図のようにページ階層を可視化して管理できるようになりました。
ここでページの作成、設定、削除ができます。サイト内のページ管理を単一の画面に集めることで管理しやすくなると思います。



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

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


④フォーム

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

⑤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つのページを選択しました。)
これでナビゲーションメニューの作成完了です。


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



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


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


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

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




3. まとめ


いかがでしたか。簡単ではありましたが大きな変更点について紹介できたかと思います。今回詳しく紹介できなかったフラグメントやフォーム、登場しなかった変更箇所についても今後紹介していければと思います。

4. おまけ


いろいろ触ってみて感じたことを少しだけ挙げておきます。
●起動時間が短縮された気がする。従来の半分ぐらい。
●ディベロッパー向けになるかもしれませんが、画面上でGOGOシェルを実行できたり、サーバー情報を見れたりします。人によっては便利かもですね。