Alfresco Content Applicationの拡張方法の基本 - Alfresco Content Applicationの拡張方法の基本

Alfresco Content Applicationの拡張方法の基本 - Alfresco Content Applicationの拡張方法の基本 - aegif Labo Blog Alfresco

null Alfresco Content Applicationの拡張方法の基本

カスタマイズ 2022.12.22

こんにちは。前回Alfresco Content Application 3.0.0を使ってみましょうという記事を公開してから3ヶ月くらい経ってしまいましたが、今回はAlfresco Content Applicationの拡張方法の基本となる内容をご紹介します。記事執筆時点の最新バージョンは3.1.0なので、以下の内容は3.1.0で動作確認しています。また、READMEのRequirementによるとNode.jsのバージョンが14.x、Npmのバージョンが6.xとのことなので、前回と同様にここでは以下のバージョンで試しています。

$ node -v
v14.20.0
$ npm -v
6.14.17

まずは前回の記事を参考に、Alfresco SDK等でAlfresco Platformを起動した上でAlfresco Content Applicationを起動してみてください。

起動したらadmin/adminでログインします。ログインすると以下のような画面が表示されると思います。

今回はこの画面のヘッダ部分にある通知コンポーネント（ベルのアイコンで表示）を消したり元に戻したりすることでAlfresco Content Applicationの拡張する時の基本中の基本となる方法を説明します。ちなみに、今回の記事の内容は公式の以下のドキュメントの内容を簡略化してデモを追加したものになります。詳しい仕様については以下のドキュメントを参照していただければと思います。

Extensibility features

Extension format

app.extensions.jsonの更新

Alfresco Content Applicationには、拡張用の設定ファイルとしてあらかじめ app/src/assets/app.extensions.json というファイルが用意されています。そのため、このファイルを編集するのが一番簡単です。試しに、以下のように83行目あたりにある "id": "app.header.notification-center" に "disabled": true というプロパティを追記して保存します。この "disabled": true は文字通り無効化するというプロパティになります。

  ...
  "features": {
    "header": [
      {
        "id": "app.header.notification-center",
        "disabled": true,
        "type": "custom",
        "component": "app.notification-center",
        "order": 50
      },
      ...

ターミナルに以下のログが出力されたら、ブラウザで画面をリロードしてみます。

✔ Compiled successfully.

以下のようにヘッダ部分にあった通知コンポーネントが消えていれば成功です。

Plugnの読み込み

上記のようにapp.extensions.jsonを直接編集するのが簡単なのですが、後で見た時にどこをどう変えたのかがわかりづらいというデメリットもあると思います。そこで、変更部分だけを外部ファイルに記述してPluginとして読み込むという方法も用意されています。今度はPluginを追加して通知コンポーネントを復活させてみます。

まず、以下の内容を記述した app/src/assets/plugins/app.demo1.json を作成します。先ほどapp.extensions.jsonで "disabled": true と追記した "app.header.notification-center" を "disabled": false で上書きします。

{
  "$schema": "../../../../extension.schema.json",
  "$id": "app.demo1",
  "$name": "app.demo1",
  "$version": "1.0.0",

  "features": {
    "header": [
      {
        "id": "app.header.notification-center",
        "disabled": false
      }
    ]
  }
}

次に、app.extensions.json の $references に先ほど作成したファイルを "app.demo1.json" として以下のように指定します。

{
  "$schema": "../../../extension.schema.json",
  "$id": "app.core",
  "$name": "app.core",
  "$version": "1.0.0",
  "$vendor": "Alfresco Software, Ltd.",
  "$license": "LGPL-3.0",
  "$runtime": "1.7.0",
  "$description": "Core application extensions and features",
  "$references": ["app.demo1.json"],
  "$ignoreReferenceList": [],
  ...

画面をリロードして通知コンポーネントが復活していれば成功です。

なお、 $references が配列になっていることからもわかるように、Pluginは複数指定することができ、配列の後の要素で読み込まれた設定が勝つ仕様になっています。それを確認するために以下の内容で app/src/assets/plugins/app.demo2.json というファイルを作成します。app.demo1.jsonで "disabled": false に戻した設定をまた "disabled": true で上書きするという不毛な内容ですがデモのためということでご容赦ください...。

{
  "$schema": "../../../../extension.schema.json",
  "$id": "app.demo2",
  "$name": "app.demo2",
  "$version": "1.0.0",

  "features": {
    "header": [
      {
        "id": "app.header.notification-center",
        "disabled": true
      }
    ]
  }
}

次に、app.extensions.json の $references の配列に "app.demo2.json" を追加します。demo1の前に入れないように注意してください。

{
  "$schema": "../../../extension.schema.json",
  "$id": "app.core",
  "$name": "app.core",
  "$version": "1.0.0",
  "$vendor": "Alfresco Software, Ltd.",
  "$license": "LGPL-3.0",
  "$runtime": "1.7.0",
  "$description": "Core application extensions and features",
  "$references": ["app.demo1.json", "app.demo2.json"],
  "$ignoreReferenceList": [],
  ...

画面をリロードして、また通知コンポーネントが消えていれば成功です。