alfresco-content-app/docs/ja/tutorials/how-to-create-your-first-extension.md

Title, nav

Title	nav
最初の拡張機能を作成する方法	ja

このチュートリアルの目的は、Alfresco Content Application (通称 ACA)の “hello world” 拡張機能を開発する方法を説明することです。ACA 拡張メカニズムは、サポートされているフロントエンドアプリケーションをカスタマイズするための推奨方法であり、このチュートリアルは、顧客やパートナーと共有するコンテンツの基礎となることを想定しています。

前提条件

このチュートリアルのスタート地点は、開発環境 (例えばあなたのラップトップ) で Alfresco Content Application (通称 ACA) の完全なリポジトリを利用できることです。このチュートリアルは、以下のバージョンのソフトウェアの利用を前提として書かれています。

• ACA バージョン 2.2.0,
• ACS 7.0.0-M3,
• NodeJs バージョン 14.15.2,
• Chrome バージョン 87.0.4280.88.

ACA 拡張機能の作成

こちらに記載されているように、ADW 拡張機能の作成は、モノレポ用の Nx Workspace の開発ツールに沿って簡単に行うことができます。

ACA プロジェクトのルートフォルダから、ターミナルで以下のコマンドを起動します。ご覧のように、以下のコマンドでは、my-extension という名前の新しいエクステンションを作成しています。

ng generate library my-extension

エラーが発生する場合は、tsconfig.json ファイルに以下の行を追加してください。

"compilerOptions": { "baseUrl": ".", "rootDir": "." }

そうすると、projects/my-extension のパスに、以下のような構造が現れます。

• すべての typescript のソースコードを含む src フォルダ。非常に重要なのは、拡張機能のすべてのインクルードを定義した public-api.ts ファイルと、拡張機能のモジュールクラスを定義した lib/my-extension.module.ts ファイルです

• ドキュメント用の README.md ファイルや、テストや設定に使用するその他のファイル

作成を完了するには、次のコマンドを起動して拡張機能を構築します。

nx build my-extension

ACA 拡張機能の基礎知識を身につける

さて、my-extension ができたので、拡張モジュールに適切な設定を加えてみましょう。そのためには、projects/my-extension/src/lib/my-extension.module.ts ファイルを以下のように変更します。

// 以下のようにインポートを追加します。
import { ExtensionService } from '@alfresco/adf-extensions';

// 以下のようにコンストラクタを追加します。
NgModule({...})
export class MyExtensionModule {
  constructor(extensions: ExtensionService) {
    extensions.setComponents({
      'my-extension.main.component': MyExtensionComponent,
    }); 
  }
}

さて、いよいよ新しい拡張機能の設定を行います。このために、ACA のランディングページの左メニューで見ることができるリンクを追加するために拡張を指示します。

適切な設定を行うために、記述されたパスに以下のフォルダを作成します。

projects/my-extension/assets

これができたら、次のような内容のファイル projects/my-extension/assets/my-extension.json を作成します。

{
  "$schema": "../../../extension.schema.json",
  "$id": "my-extension",
  "$version": "1.0.0",
  "$vendor": "氏名または会社名",
  "$name": "plugin1",
  "$description": "demo plugin",
  "$license": "MIT",
  
  "routes": [ 
    {
      "id": "my.extension.route",
      "path": "ext/my/route",
      "component": "my-extension.main.component"
    }
  ],
  
  "features": {
    "navbar": [
      {
        "id": "my.extension.nav",
        "items": [
          {
            "id": "my.extension.main",
            "icon": "extension",
            "title": "My Extension",
            "route": "my.extension.route"
          } 
        ]
      }
    ]
  }
}

これは非常に基本的な例で、既存の左メニューに “My Extension” という項目を追加し、ACA のランディングページに表示される “my-extension works!“ というテキストを含む空白のページを実装します。ここからは、拡張のドキュメントに従って、拡張機能を充実させていくことができます。

ACA アプリケーションの一部として拡張を行う

ACA の拡張機能が初期バージョンとして開発されたので、アプリケーションが使用するもののリストに拡張モジュールを追加してみましょう。タスクを完了するには、src/app/extensions.module.ts ファイルを以下のように編集します。

// ページに次のようなインポートを追加します。
import { MyExtensionModule } from 'my-extension';

@NgModule({
  imports: [
    ...,
    MyExtensionModule
  ],
})
export class AppExtensionsModule {}

さらに、src/assets/app.extensions.json ファイルを編集して、$references 配列を作成します。下の図は、そのようになっています。

"$references": ["my-extension.json"],

ACA アプリからパブリック URL を介して拡張機能が見えるように、設定ファイルを指示してみましょう。タスクを完了するには、以下のように angular.json ファイルを編集します。

// 'src/app.config.json' 配列に追加します。
...
{
  "glob": "my-extension.json",
  "input": "projects/my-extension/assets",
  "output": "./assets/plugins"
},
...

最後に、package.json ファイルを編集して拡張機能のビルドを許可し、scripts セクションに以下の行を追加します。

{ ...
  "scripts": {
    ...,
    "build:my-extension": "nx build my-extension && npx cpr projects/my-extension/assets dist/my-extension/assets --deleteFirst"
  }, ...
}

以下のコマンドを実行して、拡張機能のビルドを作成します。

npm install my-extension

拡張機能を含む ACA の動作

すべての開発が完了したので、いよいよ ADW を起動して結果を見てみましょう。ADW を起動するには、ターミナルから次のコマンドを実行します。

npm start

ACA のランディングページの左メニューに新しい項目が追加され、次のような内容の新しいページへのルートが実装されているはずです。下のスクリーンショットは、それがどのように見えるかを説明しています。