null Alfresco Content Applicationでプロパティの表示内容を変更する

こんにちは。今回はAlfresco Content Applicationでドキュメントリストの右側に表示されるコンテンツのプロパティの表示内容を変更する方法についてご紹介します。公式ドキュメントのApplication features : Content metadata presetsと同じ内容になりますが、画面のスクリーンショットを付けてあるので、よりイメージしやすいのではないかと思います。前回のAlfresco Content Applicationの拡張方法の基本という記事でご紹介した方法を使用するため、まだご覧になっていない方は前回の記事に目を通しておいていただければと思います。

記事執筆時点の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でログインするところまでは前回と同じです。

 

content-metadata-presetsの設定変更

ドキュメントリストに表示されるコンテンツのプロパティの表示内容はcontent-metadata-presetsの設定内容を追記/変更することで変更することができます。今回はexif:exifアスペクトの表示内容を変更する方法を試してみます。

最初に、デフォルトの設定がどうなっているか確認しておきます。ログイン後の画面から、Alfrescoをインストールした時にデモ用に作られている「Sample: Web Site Design Project」というライブラリ(Shareの用語ではサイト)を開き、Agency Files > Images フォルダを開きます。画像ファイルがいくつかあるはずなので、その中から適当にファイルを選択して(ここではcoins.JPGを選択)、右上のハンバーガーメニュー(3本線のアイコン)をクリックすると右側にプロパティが表示されます。ここで右下の「詳細」ボタンをクリックして「画像のExif」を展開すると以下のようにexif:exifアスペクトのプロパティの情報が表示されます。

この表示内容は app/src/assets/app.extensions.json の中で以下のように定義されています。

  ...
  "features": {
    ...
    "content-metadata-presets": [
      {
        "id": "app.content.metadata.custom",
        "custom": [
          {
            ...
          },
          {
            "id": "app.content.metadata.customGroup",
            "title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
            "items": [
              {
                "id": "app.content.metadata.exifAspect",
                "aspect": "exif:exif",
                "properties": [
                  "exif:pixelXDimension",
                  "exif:pixelYDimension",
                  "exif:dateTimeOriginal",
                  "exif:exposureTime",
                  "exif:fNumber",
                  "exif:flash",
                  "exif:focalLength",
                  "exif:isoSpeedRatings",
                  "exif:orientation",
                  "exif:manufacturer",
                  "exif:model",
                  "exif:software"
                ]
              }
            ]
          },
          ...

上のスクリーンショットはプロパティの半分くらいのところで切れていますが、スクロールすると焦点距離、ISO感度等の上記の設定で指定されているプロパティが全て表示されています。

次に、この設定を変更してみます。GitHubからcloneしたalfresco-content-appの3.1.0のソースコードの中にサンプルのpluginが入っているのでそれを読み込むだけでOKです。

テキストエディタで app/src/assets/plugins/app.metadata.json を開くと、以下のようにapp.content.metadata.exifAspect"disabled": trueで無効化され、app.content.metadata.exifAspect2という設定が追記されています。また、app.content.metadata.customGroup2というidのグループが追加され、その中にもapp.content.metadata.exifAspectというidでexif:exifアスペクト用の表示内容が定義されています。ここで、上書きしたい設定は親要素も含めてidを一致させる必要があるのでご注意ください。

  ...
  "features": {
    "content-metadata-presets": [
      {
        "id": "app.content.metadata.custom",
        "custom": [
          {
            "id": "app.content.metadata.customGroup",
            "title": "testing extension props",
            "items": [
              {
                "id": "app.content.metadata.exifAspect",
                "disabled": true
              },
              {
                "id": "app.content.metadata.exifAspect2",
                "aspect": "exif:exif",
                "properties": [
                  "exif:orientation",
                  "exif:manufacturer",
                  "exif:model",
                  "exif:software"
                ]
              }
            ]
          },
          {
            "id": "app.content.metadata.customGroup2",
            "title": "testing extension props2",
            "items": [
              {
                "id": "app.content.metadata.exifAspect",
                "aspect": "exif:exif",
                "properties": [
                  "exif:pixelXDimension",
                  "exif:pixelYDimension",
                  "exif:dateTimeOriginal"
                ]
              }
            ]
          }
        ]
      },
      ...

このpluginの設定を読み込むと表示内容がどのように変わるのか確認してみます。app/src/assets/app.extensions.json をテキストエディタで開き、以下のように$referencesに上記のapp.metadata.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.metadata.json"],
  "$ignoreReferenceList": [],
  ...

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

✔ Compiled successfully.

先ほどと同様にプロパティを確認してみると、以下のようにtesting extension propsとtesting extension props2という2つのグループが表示されていると思います。上記のapp.metadata.jsonの内容と見比べてみると、titleに指定した文字列が表示されていることがわかります。

それぞれ展開してみると以下のようにapp.metadata.jsonで指定されたプロパティが表示されていることがわかります。

以上がプロパティの表示内容の変更方法になります。今回はpluginとして別ファイルに記述した設定を読み込む方法をご紹介しましたが、app.extensions.jsonを直接編集してもOKです。簡単に試せるので標準機能のアスペクトや独自に定義したカスタムアスペクトの表示内容を変えてみたり、いろいろ試してみていただければと思います。

関連記事
customize
customize
install

RANKING
2020.10.12
2020.11.19
2020.12.23
2020.10.05
2020.11.25