React.jsでPersoniumアプリを開発する最小サンプル


## はじめに

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

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

今回の内容はすべて以下のGitHubリポジトリにおいてあります。
→[personium-blank-app](https://github.com/yoh1496/personium-blank-app)

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

## 作るもの

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

### Personiumアプリ、とは？

参考：[「Personium アプリ」と「Personium を使ったアプリ」](https://personium.io/docs/ja/app-developer/)

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

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

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

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


## 手順

[personium-blank-app](https://github.com/yoh1496/personium-blank-app)

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

### 設定ファイルの更新

#### ビルド・デプロイ設定

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

```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` へリネームし、修正します。

```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` へリネームし、修正します。

```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ファイルをビルドします。

```bash
npm run build-bar
```

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

![Install bar](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/4f7b7ac6-4792-4fde-a59c-b6be808c11d2.png)

#### アプリのビルド

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

```bash
npm run build-app
```

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

### デプロイ

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

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

```bash
npm run deploy
```

#### ACLの設定

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

1. `/__/front` の all に exec を付与します。
1. Service `/__/front` 内のスクリプト `launghSPA.js` に ServicePath `app` という名前を付けます。
![Service Configuration](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/5aa7ceaa-398a-b340-f56a-ad893ccde0d9.png)
1. `/__/public` の all に read を付与します。

#### アプリ情報の開示設定

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

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

## 実行

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

![Home](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/00d884e9-3c22-bd34-0633-3579d5548159.png)

![Launch App](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328319/c0b30a5e-9a96-81cd-6439-ef96fd0a1255.png)

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

```react
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を書くかもしれません。