はじめに

Personiumを勉強するにあたって何度かアプリを作っているのですが、「お作法」が多く、ドキュメントのいろんなページを参照しなければならないので最初の一歩を踏み出す前に力尽きてしまうことが多々あります。

自分自身の力尽きた経験を元に、数ファイル修正するだけでアプリが作れるサンプルを用意してみました。
~~実際は自分用に作ったものです~~

今回の内容はすべて以下のGitHubリポジトリにおいてあります。
→personium-blank-app

「わかりづらい！」「こうした方がよい！」などのご意見はコメントまたはIssueにてお願いいたします！

作るもの

今回はReact.jsを使用した、「Personium」アプリを実装します。

Personiumアプリ、とは？

参考：「Personium アプリ」と「Personium を使ったアプリ」

要は、Personiumを使用するにあたって、

ログインはPersonium事業者が提供するホームアプリから行う
アプリはAppマーケットから各自がインストールする

などといったPersoniumのルールに従ってアプリを作る、いうのが「Personiumアプリ」です。

推奨されているのは「Personiumアプリ」ですが、OAuth2を使用したログインなどでPersoniumにアクセスするアプリも実装可能です。（後者は「Personiumを使ったアプリ」と呼ばれます。）

手順

personium-blank-app

上記リポジトリから、ソースコードをクローンします。

設定ファイルの更新

ビルド・デプロイ設定

config.example.js → config.js へリネームし、修正します。

module.exports = {
  personium: {
    CELL_NAME: '<CELL_NAME>',             // アプリセル名
    CELL_FQDN: '<CELL_FQDN>',             // アプリセル名.ユニットFQDN
    CELL_ADMIN: '<ADMIN_USERNAME>',       // rootユーザーID
    CELL_ADMIN_PASS: '<ADMIN_PASSWORD>',  // rootユーザーパスワード
  // 中略
  }
};

アプリセル設定

src/assets/launch.example.json → src/assets/launch.json へリネームし、修正します。

{
  "personal": {
    "web": "<CELL_FQDN>/__/front/app",
    "android": "***:",
    "ios": "***;"
  }
}

<CELL_FQDN> にはアプリセルのFQDNを入力します。

ユーザーセル内アプリ設定①

src/bar/00_meta/00_manifest.example.json → src/bar/00_meta/00_manifest.json へリネームし、修正します。

{
  "bar_version": "2",
  "box_version": "1",
  "default_path": "<DEFAULT_BOX_NAME>",
  "schema": "<APP_CELL_FQDN>"
}

<DEFAULT_BOX_NAME> にはユーザーセル内で使用するbox名を入力します。
<APP_CELL_FQDN> にはアプリセルのFQDNを入力します。

ユーザーセル内アプリ設定②

src/bar/00_meta/90_rootprops.example.xml → src/bar/00_meta/90_rootprops.xml へリネームします。

ビルド

barファイルのビルド

アプリ配信時に配布するbarファイルをビルドします。

npm run build-bar

dist/{アプリセル名}.bar というファイルが生成されていれば成功です。これをユーザーのセルでインストールします。
今回はAppマーケットからのインストールは利用できないので、ホームアプリのBOXインストール機能を使用します。

アプリのビルド

アプリのビルドは下記コマンドで実行します。

npm run build-app

ビルドしたものは build フォルダ配下に配置されます。

デプロイ

ビルド生成物のアップロード

下記コマンドを実行することで先程のコマンドでビルドしたファイルをアップロードします。

npm run deploy

ACLの設定

ACLの設定は手動で行います。アプリセルのセルマネージャを開き、以下を実行します。

/__/front の all に exec を付与します。
Service /__/front 内のスクリプト launghSPA.js に ServicePath app という名前を付けます。
/__/public の all に read を付与します。

アプリ情報の開示設定

下記4ファイルの all に read を付与します。

launch.json
profile.json
relations.json
roles.json

実行

barをインストールしたユーザーのホームアプリからアイコンをクリックするとアプリが起動します。

このとき、実行されるのは、src/app/frontend/index.js に実装されたコードです。

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello React!</h1>,
  document.getElementById('root')
);

本コードを修正することでReact.jsを使用した、SPAアプリケーションを開発することができます。

おわりに

以上、Reactを使用してPersoniumアプリを開発するサンプルでした。

個人的に一番欲しかった機能がgulpにも記載してあります、スクリプトによる資材のアップロードです。
これを使用することで、かなりアップロードのストレスを軽減できると思います。

なお、一部ACL設定を手動でやっていますが、ファイルの上書きではACLは変更されませんので、
2度目以降のnpm run deployコマンドでは必要ありません。

次回はFluxを使用した本格的なSPAに挑戦するQiitaを書くかもしれません。