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.xmlのapplicationタグに属性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プラグインを使うなどがあると思いますが、これらの方法についてはまた別の機会に紹介したいと思います。みなさんも是非モバイルアプリの開発にチャレンジしてみてください！