Add Japanese document (#1186)

* Fixed invalid url link.

* Update docs/features/side-navigation.md

Co-Authored-By: Suzana Dirla <dirla.silvia.suzana@gmail.com>

* Initial japanese translation.
This commit is contained in:
Yuuki Ebihara
2019-09-10 20:46:48 +09:00
committed by Suzana Dirla
parent 21ffcaf013
commit d67f95cfff
66 changed files with 3974 additions and 0 deletions

View File

@@ -0,0 +1,23 @@
---
Title: 拡張
Github only: true
---
# 拡張
Alfresco Content Application の機能を拡張する方法を学びます。
## コンテンツ
- [拡張機能](/extending/extensibility-features)
- [拡張フォーマット](/extending/extension-format)
- [ルート](/extending/routes)
- [コンポーネント](/extending/components)
- [アクション](/extending/actions)
- [アプリケーションアクション](/extending/application-actions)
- [ルール](/extending/rules)
- [アプリケーションの機能](/extending/application-features)
- [登録](/extending/registration)
- [カスタムエバリュエータの作成](/extending/creating-custom-evaluators)
- [チュートリアル](/extending/tutorials)
- [再配布可能なライブラリ](/extending/redistributable-libraries)

View File

@@ -0,0 +1,58 @@
---
Title: アクション
---
# アクション
以下は、アクションを定義するために使用される JSON プロパティの詳細です。
| プロパティ名 | 説明 |
| -- | -- |
| **id** | 一意の識別子。 |
| **type** | アクションタイプ。詳細については、[アプリケーションアクション](/extending/application-actions) を参照してください。 |
| **payload** | アクションペイロード、値または式を含む文字列。 |
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"actions": [
{
"id": "plugin1.actions.settings",
"type": "NAVIGATE_URL",
"payload": "/settings"
},
{
"id": "plugin1.actions.info",
"type": "SNACKBAR_INFO",
"payload": "I'm a nice little popup raised by extension."
},
{
"id": "plugin1.actions.node-name",
"type": "SNACKBAR_INFO",
"payload": "$('Action for ' + context.selection.first.entry.name)"
}
]
}
```
## 値の式
軽量の式構文を使用して、アクションペイロードのカスタムパラメータを提供できます。
```text
$(<expression>)
```
式は、値を評価する有効な JavaScript ブロックです。
例:
```text
$('hello world') // 'hello world'
$('hello' + ', ' + 'world') // 'hello, world'
$(1 + 1) // 2
$([1, 2, 1 + 2]) // [1, 2, 3]
```

View File

@@ -0,0 +1,126 @@
---
Title: アプリケーションアクション
---
# アプリケーションアクション
アプリは **NgRx** (Angular のリアクティブライブラリ、Redux にインスパイアされた) を使用して、
アプリケーションアクションを実装します。
NgRx の詳細については、次のリソースを参照してください:
- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
ほとんどのアプリケーションの機能は、NgRx アクションおよび対応するエフェクトの形式で既に公開されています。
次のように、単一の `Store` ディスパッチャーを介して任意のアクションを呼び出すことができます:
```ts
export class MyComponent {
constructor(private store: Store<AppStore>) {}
onClick() {
this.store.dispatch(new SearchByTermAction('*'));
}
}
```
上記のコードは、`Search by Term` 機能を呼び出す単純な 'click' ハンドラを示しています
ユーザーを **検索結果** ページに自動的にリダイレクトします。
カスタムアプリケーションサービス API からノードを表示する別の例:
```ts
export class MyService {
constructor(private store: Store<AppStore>) {}
viewFile(node: MinimalNodeEntity) {
this.store.dispatch(new ViewFileAction(node));
}
}
```
## 拡張機能で使用する
拡張機能 (ボタン、メニューなど) からすべてのアプリケーションアクションを呼び出すことができます。
**Tip:** ペイロードが提供されない場合、アクションの多くは現在選択されているノードを使用します。
これにより、拡張ファイルからのアクションの宣言と呼び出しが簡単になります。
以下の例では、"NEW" メニュードロップダウンへの新しいエントリを作成し、
`CREATE_FOLDER` アプリケーションアクションを呼び出す新しい`Create Folder (plugin1)` コマンドを提供します。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"create": [
{
"id": "plugin1.create.folder",
"type": "default",
"icon": "create_new_folder",
"title": "Create Folder (plugin1)",
"actions": {
"click": "CREATE_FOLDER"
}
}
]
}
}
```
`CREATE_FOLDER` アクションは、対応する NgRx エフェクトをトリガーしてダイアログを表示し、
必要に応じてドキュメントリストの再読み込みを実行します。
以下は、アクションへの参照としてプラグイン定義で使用できるパブリックアクションタイプのリストです:
| バージョン | アクション名 | ペイロード | 説明 |
| ------- | ---------------------- | ------------------- | ----------------------------------------------------------------------------------------------- |
| 1.7.0 | SET_CURRENT_FOLDER | Node | 現在開いているフォルダについてコンポーネントに通知します。 |
| 1.7.0 | SET_CURRENT_URL | string | 現在のブラウザ URL についてコンポーネントに通知します。 |
| 1.7.0 | SET_USER_PROFILE | Person | 現在のユーザープロファイルを割り当てます。 |
| 1.7.0 | TOGGLE_INFO_DRAWER | n/a | 選択したノードの情報ドロワーを切り替えます。 |
| 1.7.0 | ADD_FAVORITE | MinimalNodeEntity[] | ノード (または選択したもの) をお気に入りに追加します。 |
| 1.7.0 | REMOVE_FAVORITE | MinimalNodeEntity[] | お気に入りからノード (または選択したもの) を削除します。 |
| 1.7.0 | DELETE_LIBRARY | string | ライブラリを ID で削除します。ペイロードが提供されない場合、選択したノードを使用します。 |
| 1.7.0 | CREATE_LIBRARY | n/a | "ライブラリの作成" ダイアログを呼び出します。 |
| 1.7.0 | SET_SELECTED_NODES | MinimalNodeEntity[] | 選択したノードについてコンポーネントに通知します。 |
| 1.7.0 | DELETE_NODES | MinimalNodeEntity[] | ノード (または選択したもの) を削除します。元に戻すアクションをサポートします。 |
| 1.7.0 | UNDO_DELETE_NODES | any[] | ノード (または選択したもの) の削除を取り消します。 |
| 1.7.0 | RESTORE_DELETED_NODES | MinimalNodeEntity[] | 削除されたノード (または選択したもの) を復元します。通常、Trashcan で使用されます。 |
| 1.7.0 | PURGE_DELETED_NODES | MinimalNodeEntity[] | ノード (または選択したもの) を完全に削除します。通常、Trashcan で使用されます。 |
| 1.7.0 | DOWNLOAD_NODES | MinimalNodeEntity[] | ノード (または選択したもの) をダウンロードします。フォルダまたは複数のアイテムの ZIP アーカイブを作成します。 |
| 1.7.0 | CREATE_FOLDER | string | 開いているフォルダ (またはペイロードの親フォルダ ID) の "フォルダーの作成" ダイアログを呼び出します。 |
| 1.7.0 | EDIT_FOLDER | MinimalNodeEntity | ノード (または選択したもの) の "フォルダの編集" ダイアログを呼び出します。 |
| 1.7.0 | SHARE_NODE | MinimalNodeEntity | ノード (または選択したもの) の "共有" ダイアログを呼び出します。 |
| 1.7.0 | UNSHARE_NODES | MinimalNodeEntity[] | 共有ノードからノード (または選択したもの) を削除します (コンテンツは削除しません)。 |
| 1.7.0 | COPY_NODES | MinimalNodeEntity[] | ノード (または選択したもの) の "コピー" ダイアログを呼び出します。 元に戻すアクションをサポートします。 |
| 1.7.0 | MOVE_NODES | MinimalNodeEntity[] | ノード (または選択したもの) の "移動" ダイアログを呼び出します。元に戻すアクションをサポートします。 |
| 1.7.0 | MANAGE_PERMISSIONS | MinimalNodeEntity | ノード (または選択したもの) の "アクセス許可の管理" ダイアログを呼び出します。 |
| 1.7.0 | MANAGE_VERSIONS | MinimalNodeEntity | ノード (または選択したもの) の "バージョンの管理" ダイアログを呼び出します。 |
| 1.7.0 | NAVIGATE_URL | string | アプリケーション内の特定のルート URL に移動します。 |
| 1.7.0 | NAVIGATE_ROUTE | any[] | 特定のルートに移動します (パラメータをサポート)。 |
| 1.7.0 | NAVIGATE_FOLDER | MinimalNodeEntity | ノードのプロパティに基づいてフォルダに移動します。 |
| 1.7.0 | NAVIGATE_PARENT_FOLDER | MinimalNodeEntity | ノードのプロパティに基づいて、含まれる親フォルダに移動します。 |
| 1.7.0 | NAVIGATE_LIBRARY | string | ライブラリに移動します。 |
| 1.7.0 | SEARCH_BY_TERM | string | 用語で簡単な検索を実行し、検索結果に移動します。 |
| 1.7.0 | SNACKBAR_INFO | string | 提供されたメッセージとともに情報スナックバーを表示します。 |
| 1.7.0 | SNACKBAR_WARNING | string | 提供されるメッセージとともに警告スナックバーを表示します。 |
| 1.7.0 | SNACKBAR_ERROR | string | 提供されたメッセージとともにエラースナックバーを表示します。 |
| 1.7.0 | UPLOAD_FILES | n/a | "ファイルのアップロード" ダイアログを呼び出して、現在開いているフォルダにファイルをアップロードします。 |
| 1.7.0 | UPLOAD_FOLDER | n/a | "フォルダのアップロード" ダイアログを呼び出し、選択したフォルダを現在開いているフォルダにアップロードします。 |
| 1.7.0 | UPLOAD_FILE_VERSION | n/a | "新しいファイルバージョン" ダイアログを呼び出します。 |
| 1.7.0 | VIEW_FILE | MinimalNodeEntity | ビューアでファイル (または選択したもの) をプレビューします。 |
| 1.7.0 | UNLOCK_WRITE | NodeEntry | ファイルを読み取り専用モードからロック解除します。 |
| 1.7.0 | PRINT_FILE | MinimalNodeEntity | ビューアで開いた (または選択した) ファイルを印刷します。 |
| 1.7.0 | FULLSCREEN_VIEWER | n/a | ビューアで開いたファイルを表示するために、フルスクリーンモードを開始します。 |
| 1.7.0 | LOGOUT | n/a | ログアウトして、ログイン画面にリダイレクトします。 |
| 1.7.0 | RELOAD_DOCUMENT_LIST | n/a | アクティブなドキュメントリストを再読み込みします。 |
| 1.7.0 | TOGGLE_SEARCH_FILTER | n/a | 検索結果のフィルターコンポーネントの表示を切り替えます。 |
| 1.7.0 | SHOW_SEARCH_FILTER | n/a | 検索結果にフィルターコンポーネントを表示します。 |
| 1.7.0 | HIDE_SEARCH_FILTER | n/a | 検索結果でフィルターコンポーネントを非表示にします |
| 1.8.0 | VIEW_NODE | string | ID によるノードの軽量プレビュー。拡張機能から呼び出すことができます。 |
| 1.8.0 | CLOSE_PREVIEW | n/a | ビューア (アイテムのプレビュー) を閉じます。 |
| 1.9.0 | RESET_SELECTION | n/a | アクティブなドキュメントリストの選択をリセットします |

View File

@@ -0,0 +1,686 @@
---
Title: アプリケーションの機能
---
# アプリケーションの機能
このセクションには、最終的な実装に応じて異なるアプリケーション固有の機能が含まれています。
ACA は、次の拡張ポイントのセットをサポートします:
- 作成メニュー
- ナビゲーションバー
- ツールバー
- コンテキストメニュー
- ビューア
- サイドバー (情報ドロアー)
- コンテンツメタデータプリセット (`Properties` タブ用)
すべてのカスタマイズは設定ファイルの `features` セクションに保存されます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"create": [],
"navbar": [],
"toolbar": [],
"contextMenu": [],
"viewer": {
"toolbarActions:": [],
"openWith": [],
"content": []
},
"sidebar": [],
"content-metadata-presets": []
}
}
```
他のアプリケーションまたは外部プラグインは、上記の構成の異なるサブセットを利用できます。
また、構成スキーマに追加のエントリを追加できます。
## コンテンツアクション
ツールバーボタンやメニューなど、コンテンツを操作する UI 要素のほとんどは、
`ContentActionRef` インターフェイスの実装に基づいています:
```ts
interface ContentActionRef {
id: string;
type: ContentActionType;
title?: string;
description?: string;
order?: number;
icon?: string;
disabled?: boolean;
children?: Array<ContentActionRef>;
component?: string;
actions?: {
click?: string;
[key: string]: string;
};
rules?: {
enabled?: string;
visible?: string;
[key: string]: string;
};
}
```
上記の構造を使用して、`app.extensions.json` ファイルでコンテンツアクションを定義できます。
## 作成メニュー
"新規" メニューオプションの拡張エンドポイントを提供します。
以下の例のように、メニューに追加のエントリを追加できます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"create": [
{
"id": "plugin1.create.folder",
"icon": "create_new_folder",
"title": "Create Folder (plugin1)",
"actions": {
"click": "CREATE_FOLDER"
},
"rules": {
"enabled": "app.navigation.folder.canCreate"
}
},
{
"id": "plugin1.create.uploadFile",
"icon": "file_upload",
"title": "Upload Files (plugin1)",
"actions": {
"click": "UPLOAD_FILES"
},
"rules": {
"enabled": "app.navigation.folder.canUpload"
}
}
]
}
}
```
サポートされているプロパティの詳細については、[コンテンツアクション](/extending/application-features#content-actions) セクションを参照してください。
**Tip:** 外部拡張ファイル内から既存のエントリを更新または無効にすることもできます。カスタマイズするには、ターゲット要素の `id` を知る必要があります。
## ナビゲーションバー
ナビゲーションバーは、グループ (`NavBarGroupRef`) に編成されたリンク要素 (`NavBarLinkRef`) で構成されます。
```ts
export interface NavBarGroupRef {
id: string;
items: Array<NavBarLinkRef>;
order?: number;
disabled?: boolean;
}
export interface NavBarLinkRef {
id: string;
icon: string;
title: string;
route: string;
url?: string; // evaluated at runtime based on route ref
description?: string;
order?: number;
disabled?: boolean;
}
```
拡張機能は、実行時に次のアクションを実行できます:
- リンクを使用して新しいグループを登録する
- 既存のグループに新しいリンクを挿入します
- 既存のリンクのプロパティを更新する
- 既存のリンクまたはグループ全体を無効にします
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"navbar": [
{
"id": "app.navbar.primary",
"items": [
{
"id": "app.navbar.personalFiles",
"icon": "folder",
"title": "Personal Files",
"route": "personal-files"
},
{
"id": "app.navbar.libraries",
"icon": "group_work",
"title": "Libraries",
"route": "libraries"
}
]
},
{
"id": "app.navbar.secondary",
"items": [
{
"id": "app.navbar.shared",
"icon": "people",
"title": "Shared",
"route": "shared"
}
]
}
]
}
}
```
## サイドバー (情報ドロアー)
サイドバー (情報ドロアー) コンポーネントに次のカスタマイズを提供できます:
- カスタムコンポーネントを使用してタブを追加する
- メインアプリケーションまたは拡張機能のタブを無効にする
- 既存のタブのコンテンツまたはプロパティを置き換える
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"sidebar": [
{
"id": "app.sidebar.properties",
"order": 100,
"title": "Properties",
"component": "app.components.tabs.metadata"
},
{
"id": "app.sidebar.comments",
"order": 200,
"title": "Comments",
"component": "app.components.tabs.comments"
}
]
}
}
```
上記の例は2つのタブをレンダリングします:
- `app.components.tabs.metadata` コンポーネントを参照する `Properties` タブ
- `app.components.tabs.comments` コンポーネントを参照する `Comments` タブ
対応するすべてのコンポーネントは、実行環境で使用するために登録する必要があります。
**Tip:** 実行時に再利用される独自のエントリを登録する方法の詳細については、
[登録](/extending/registration) セクションを参照してください。
### タブプロパティ
| プロパティ名 | 説明 |
| ------------- | ----------------------------------------------------------------- |
| **id** | 一意の識別子。 |
| **component** | ルートに使用するメインの[コンポーネント](/extending/components)。 |
| **title** | タブのタイトルまたはリソースのキー |
| icon | タブのアイコン |
| disabled | 無効状態を切り替えます。他のプラグインから割り当てることができます。 |
| order | 要素の順序。 |
### タブコンポーネント
タブのコンテンツに割り当てるすべてのコンポーネントは、実行時に次の追加プロパティを受け取ります:
| プロパティ名 | タイプ | 説明 |
| ---- | ---------------------- | --------------------------- |
| node | MinimalNodeEntryEntity | 表示されるノードエントリ。 |
## ツールバー
ツールバーの拡張ポイントは、コンテンツアクション参照の配列で表されます。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"toolbar": [
{
"id": "app.toolbar.preview",
"title": "View",
"icon": "open_in_browser",
"actions": {
"click": "VIEW_FILE"
},
"rules": {
"visible": "app.toolbar.canViewFile"
}
},
{
"id": "app.toolbar.download",
"title": "Download",
"icon": "get_app",
"actions": {
"click": "DOWNLOAD_NODES"
},
"rules": {
"visible": "app.toolbar.canDownload"
}
}
]
}
}
```
コンテンツアクションは、次のビューのツールバーに適用されます:
- 個人用ファイル
- ライブラリ
- 共有ファイル
- 最近使用したファイル
- お気に入り
- ゴミ箱
- 検索結果
- ライブラリ検索結果
## コンテキストメニュー
コンテキストメニューの拡張性は、ツールバーの拡張性に似ています。
ルールによって裏付けられ、アプリケーションアクションに関連付けられたコンテンツアクションのリストを定義することができます。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"contextMenu": [
{
"id": "app.context.menu.download",
"order": 100,
"title": "Download",
"icon": "get_app",
"actions": {
"click": "DOWNLOAD_NODES"
},
"rules": {
"visible": "app.toolbar.canDownload"
}
}
]
}
}
```
メモ: 使用可能なルールとエバリュエータを再利用できます。
上記の例では、コンテキストメニューアクション `Download` は、`rules` セクションで宣言された
`app.toolbar.canDownload` ルールを利用します:
```json
{
"rules": [
{
"id": "app.toolbar.canDownload",
"type": "core.every",
"parameters": [
{ "type": "rule", "value": "app.selection.canDownload" },
{ "type": "rule", "value": "app.navigation.isNotTrashcan" }
]
}
]
}
```
## ビューア
ACA の Viewer コンポーネントは、次の拡張ポイントをサポートします:
- コンテンツビューア
- ツールバーアクション
- `その他` のツールバーアクション
- `開く` アクション
- ルール
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"viewer": {
"content": [],
"toolbarActions:": [],
"openWith": []
}
}
}
```
### コンテンツビュー
拡張機能に基づいて特定の種類のコンテンツをレンダリングするカスタムコンポーネントを提供できます。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"viewer": {
"content": [
{
"id": "app.viewer.pdf",
"fileExtension": "pdf",
"component": "app.components.tabs.metadata"
},
{
"id": "app.viewer.docx",
"fileExtension": "docx",
"component": "app.components.tabs.comments"
}
]
}
}
}
```
上記の例では、`PDF` ビューを `metadata` タブに、
`DOCX` ビューを `comments` タブに置き換えています。
すべてのカスタムコンポーネントは、実行時に次のプロパティを受け取ります:
| プロパティ名 | タイプ | 説明 |
| --------- | ---------------------- | --------------------------- |
| node | MinimalNodeEntryEntity | 表示されるノードエントリ。 |
| url | string | ファイルコンテンツの URL。 |
| extension | string | ファイル名拡張子。 |
#### ルール
`disabled` 状態のルールを提供することもできます。
これにより、外部要因に基づいてビューア拡張の条件付き可用性を提供できます。
```json
{
"id": "app.viewer.pdf",
"fileExtension": "png",
"component": "app.components.tabs.metadata",
"rules": {
"disabled": "isViewerDisabled"
}
}
```
### ツールバーアクション
ACA ビューアのデフォルトのツールバーアクションは、拡張機能を使用してカスタマイズし、置換、変更、または無効にすることができます。
拡張機能の設定から新しいビューアツールバーアクションを追加することもできます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"viewer": {
"toolbarActions": [
{
"id": "app.viewer.versions",
"order": 500,
"title": "APP.ACTIONS.VERSIONS",
"icon": "history",
"actions": {
"click": "MANAGE_VERSIONS"
},
"rules": {
"visible": "app.toolbar.versions"
}
}
]
}
}
}
```
サブメニューを提供することもできます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"viewer": {
"toolbarActions": [
{
"id": "app.toolbar.more",
"type": "menu",
"order": 10000,
"icon": "more_vert",
"title": "APP.ACTIONS.MORE",
"children": [
{
"id": "app.viewer.share",
"order": 300,
"title": "Share",
"icon": "share",
"actions": {
"click": "SHARE_NODE"
},
"rules": {
"visible": "app.selection.file.canShare"
}
}
]
}
]
}
}
}
```
### 「開く」アクション
ビューアのすべてのインスタンスでレンダリングするために`開く` アクションのリストを提供できます。
次の例では、単純な `Snackbar` アクション参照を作成し、
`Snackbar` と呼ばれるカスタムの `開く` メニューエントリから呼び出します。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"actions": [
{
"id": "plugin1.actions.info",
"type": "SNACKBAR_INFO",
"payload": "I'm a nice little popup raised by extension."
}
],
"features": {
"viewer": {
"openWith": [
{
"id": "plugin1.viewer.openWith.action1",
"type": "button",
"icon": "build",
"title": "Snackbar",
"actions": {
"click": "plugin1.actions.info"
}
}
]
}
}
}
```
他のコンテンツアクションと同様に、カスタムプラグインは `開く` アクションを無効化、更新、または拡張できます。
### ルール
`features.viewer.rules` オブジェクトを利用して、ビューアにグローバルルールを提供できます:
```ts
export interface ViewerRules {
/**
* Checks if user can preview the node.
*/
canPreview?: string;
}
```
例えば:
```json
{
"features": {
"viewer": {
"rules": {
"canPreview": "customRule"
}
}
}
}
```
ルールは、ノードのプレビューが許可されている場合は `true`、そうでない場合は `false` を返す必要があります。
## コンテンツメタデータのプリセット
コンテンツメタデータプリセットは、[Content Metadata Component](https://www.alfresco.com/abn/adf/docs/content-services/components/content-metadata-card.component/) が特定のノードのメタデータアスペクトのプロパティをレンダリングするために必要です。
さまざまな側面とそのプロパティは `app.config.json` ファイルで設定されますが、拡張ファイルを介して実行時に設定することもできます。
`app.extensions.json` からこれらのプリセットを設定すると、デフォルトのアプリケーション設定が上書きされます。
カスタムプラグインから設定すると、これらのプリセットを無効化、更新、または拡張できます。
拡張機能のマージに関する詳細はこちらをご覧ください[here](/extending/extension-format#merging-properties)。
`content-metadata-presets` 要素は、`disabled` プロパティを設定することでオフにできます。
これはネストされたアイテムにも適用でき、アスペクトレベルまで無効にできます。
**Tip:** 既存のエントリを変更または無効にするには、ターゲット要素の ID とその親 ID を知る必要があります。
拡張機能は、実行時に次のアクションを実行できます:
- 新しいプリセット項目を追加します。
- 任意のレベルで既存のプリセットに新しいアイテムを追加します。
- アスペクトレベルまで特定のアイテムを無効にします。
- ID に基づいて既存のアイテムを変更します。
プロパティに関しては、次のことができます:
- 既存のアスペクトに新しいプロパティを追加する、または
- アスペクトのプロパティを再定義します。
このコードスニペットを確認して、外部プラグインから `exif:exif` アスペクトのプロパティを上書きする方法を確認してください:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"content-metadata-presets": [
{
"id": "app.content.metadata.custom",
"custom": [
{
"id": "app.content.metadata.customGroup",
"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"
]
}
]
}
]
}
]
}
}
```
この外部プラグインは、`app.extensions.json` で既に定義されている初期の `exif:exif` アスペクトを無効にし、 `exif:exif` アスペクトの他のプロパティを定義します。
`app.extension.json` の初期設定は次のとおりです:
```json
...
"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"
]
}
]
}
]
}
]
...
```
**Tip:** content-metadata プリセットを拡張できるようにするには、 `app.config.json` の設定を `app.extensions.json` ファイルにコピーし、その ID をすべてのアイテムに追加する必要があります。
ID を使用すると、外部プラグインが現在の設定を拡張できます。

View File

@@ -0,0 +1,28 @@
---
Title: コンポーネント
---
# コンポーネント
任意の Angular コンポーネントを登録して、拡張を加えることができます。
コンポーネントは、カスタムを作成するために使用されます:
- ルートとページ
- ツールバーボタン
- メニューアイテム
| キー | タイプ | 説明 |
| --------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| app.layout.main | LayoutComponent | コンポーネントを投影するためのメニューバー、ナビゲーションサイドバー、メインコンテンツ領域を備えたメインアプリケーションレイアウト。 |
| app.toolbar.toggleInfoDrawer | ToggleInfoDrawerComponent | 選択のために情報ドロアーを切り替えるツールバーボタンコンポーネント。 |
| app.toolbar.toggleFavorite | ToggleFavoriteComponent | 選択したお気に入りの状態を切り替えるツールバーボタンコンポーネント。 |
| app.toolbar.toggleFavoriteLibrary | ToggleFavoriteLibraryComponent | 選択したお気に入りライブラリの状態を切り替えるツールバーボタンコンポーネント。 |
| app.toolbar.toggleJoinLibrary | ToggleJoinLibraryComponent | 選択したライブラリの参加/キャンセルのリクエストを切り替えるツールバーボタンコンポーネント。 |
| app.toolbar.viewNode | ViewNodeComponent | ファイルを表示するアクションコンポーネント。 |
実行時に再利用される独自のエントリを登録する方法の詳細については、
[登録](/extending/registration) セクションを参照してください。
カスタム拡張機能は、新しいコンポーネントを登録するだけでなく、
実行時に既存のコンポーネントを既知の識別子で置き換えることもできます。

View File

@@ -0,0 +1,69 @@
---
Title: カスタムエバリュエータの作成
---
# カスタムエバリュエータの作成
ルールエバリュエータは、`RuleContext` 参照とオプションの `RuleParameter` インスタンスのリストを受け取るプレーンな JavaScript (または TypeScript) 関数です。
アプリケーションは、評価関数に特別な
[RuleEvaluator](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/extensions/src/lib/config/rule.extensions.ts)
タイプエイリアスを提供します:
```ts
export type RuleEvaluator = (context: RuleContext, ...args: any[]) => boolean;
```
ユーザーが 1 つまたは複数のノードを選択したかどうかを確認する関数を作成します。
```ts
export function hasSelection(
context: RuleContext,
...args: RuleParameter[]
): boolean {
return !context.selection.isEmpty;
}
```
`context` は、[RuleContext](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/extensions/src/lib/config/rule.extensions.ts) 型の特別なインスタンスへの参照であり、
各エバリュエータがランタイムエンティティにアクセスできるようにします。
```ts
export interface RuleContext {
selection: SelectionState;
navigation: NavigationState;
permissions: NodePermissions;
getEvaluator(key: string): RuleEvaluator;
}
```
`SelectionState` インターフェイスはグローバルな選択状態に関する情報を公開します:
```ts
export interface SelectionState {
count: number;
nodes: MinimalNodeEntity[];
libraries: SiteEntry[];
isEmpty: boolean;
first?: MinimalNodeEntity;
last?: MinimalNodeEntity;
folder?: MinimalNodeEntity;
file?: MinimalNodeEntity;
library?: SiteEntry;
}
```
次に、先ほど作成した関数を `ExtensionService` で登録し、一意の識別子を付けます:
```ts
extensions.setEvaluators({
'plugin1.rules.hasSelection': hasSelection
});
```
これで、`plugin1.rules.hasSelection` エバリュエータをインラインルールリファレンスとして使用したり、
`core.every` のような複合ルールの一部として使用したりできます。
**Tip:** 実行時に再利用される独自のエントリを登録する方法の詳細については、
[登録](/extending/registration) セクションを参照してください。

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,35 @@
---
Title: 拡張機能
---
# 拡張機能
アプリケーションの拡張は、`/src/assets/app.extensions.json`
およびメインエントリポイントの参照である任意の数の外部プラグインを介して実行されます。
アプリケーションには、外部ファイルを保存するように事前設定された
`/src/assets/plugins/` フォルダも付属しています。
次の領域を変更、切り替え、または拡張するプラグインを作成できます:
- ナビゲーションサイドバーのリンクとグループ
- コンテキストメニュー
- サイドバー (情報ドロワー)
- ツールバーのエントリ
- ボタン
- メニューボタン
- セパレータ
- ビューアーのアクション
- "~で開く" エントリ
- ツールバーのエントリ
- ボタン
- "その他のアクション" ボタン
- コンテンツメタデータプリセット (`プロパティ`タブで使用)
- カスタムアイコン
拡張もできます:
- メインアプリケーションまたは他のプラグインの拡張ポイントを上書きまたは無効にする
- ルール、アクション、またはその他の視覚要素を変更する
- 空のページまたはレイアウトに基づいて新しいアプリケーションルートを登録する
- 新しいルールエバリュエーター、コンポーネント、ガードを登録する

View File

@@ -0,0 +1,310 @@
---
Title: 拡張フォーマット
---
# 拡張フォーマット
フォーマットは、次のような構造の JSON ファイルで表されます:
```json
{
"$id": "unique.id",
"$name": "extension.name",
"$version": "1.0.0",
"$vendor": "author.name",
"$license": "license",
"$runtime": "1.5.0",
"$description": "some description",
"routes": [],
"actions": [],
"rules": [],
"features": {}
}
```
## スキーマ
JSON スキーマは、プロジェクトのルートフォルダ [extension.schema.json](../../extension.schema.json) にあります。
**Tip:** スキーマを使用すると、拡張ファイルを検証し、コード補完とドキュメントヒントを提供できます。
```json
{
"$schema": "../../extension.schema.json",
"$name": "app",
"$version": "1.0.0"
}
```
## 複数のファイル
複数の拡張ファイルを個別に配布できます。
すべての追加ファイルは、`$references` プロパティを介してリンクされます。
宣言の順序は、ロードの順序を定義します。
```json
{
"$schema": "../../extension.schema.json",
"$name": "app",
"$version": "1.0.0",
"$references": ["plugin1.json", "plugin2.json"]
}
```
**注:** すべての拡張ファイルは、実行時にマージされます。
これにより、プラグインはメインアプリケーションのコードを上書きしたり、他のプラグインを変更したりできます。
## 起動時の動作
最初に、ルートの `app.extensions.json` が特別な `Loader` サービスによってロードされます。
ファイルには、アプリケーションが機能するために必要なすべての宣言を含めることができます。追加のプラグインファイルは完全にオプションです。
次に、`Loader``$references` メタデータを走査し、提供されている場合は追加のファイルをロードします。
速度を上げるため、ファイルは並行してロードされますが、すべてがロードされると、宣言順に適用されます。
すべての外部ファイルが取得された後、`Loader` はそれらをソートし、メタデータプロパティを削除して、結果の JSON オブジェクトを互いの上にスタックします。
**Tip:** `$` 記号で始まる最上位のプロパティ名はメタデータと見なされ、マージプロセスには参加しません。
これにより、たとえばプラグインは、`$name``$version``$description``$license` など、メンテナンスおよび視覚化のために追加情報を保持できます。
### プロパティのマージ
JSON 構造およびネストのレベルに制限はありません。
すべてのオブジェクトは、プロパティキーとオブジェクトID (配列用) に基づいて単一のセットにマージされます。
マージ前: Plugin 1
```json
{
"$name": "plugin1",
"plugin1.key": "value",
"plugin1.text": "string"
}
```
マージ前: Plugin 2
```json
{
"$name": "plugin2",
"plugin2.key": "value",
"plugin1.text": "custom string"
}
```
最終結果:
```json
{
"plugin1.key": "value",
"plugin1.text": "custom string",
"plugin2.key": "value"
}
```
その結果、2つの一意のプロパティ `plugin1.key``plugin2.key` があり、
`Plugin 1` で最初に定義されたが `Plugin 2` で上書きされた `plugin1.text` もあります。
**Tip:** JSON マージは、アプリケーションまたは対応するプラグインライブラリを再構築せずに、ベースアプリケーションの設定を変更したり、
他のプラグインの機能を切り替えたりすることができるため、非常に強力な概念です。
### オブジェクトのマージ
複雑なオブジェクトはプロパティによってマージされます。このプロセスは再帰的であり、ネストレベルに制限はありません。
マージ前: Plugin 1
```json
{
"$name": "plugin1",
"features": {
"title": "some title",
"page1": {
"title": "page 1"
}
}
}
```
マージ前: Plugin 2
```json
{
"$name": "plugin2",
"features": {
"page1": {
"title": "custom title"
},
"page2": {
"title": "page 2"
}
}
}
```
最終結果:
```json
{
"features": {
"title": "some title",
"page1": {
"title": "custom title"
},
"page2": {
"title": "page 2"
}
}
}
```
一意のプロパティが1つのオブジェクトにマージされていることがわかります。
ただし、最後の一意でないプロパティは以前の値を上書きします。
現在のデザインを使用して、プラグインからアプリケーションプロパティを削除することはできません。
ローダーエンジンは、値の上書きのみをサポートします。ただし、多くのコンポーネントは、外部定義を使用して変更できる `disabled` プロパティをサポートしています:
マージ前: Plugin 1
```json
{
"$name": "plugin1",
"feature1": {
"disabled": false,
"text": "some-feature",
"icon": "some-icon"
}
}
```
マージ前: Plugin 2
```json
{
"$name": "plugin2",
"feature1": {
"disabled": true
}
}
```
最終結果:
```json
{
"feature1": {
"disabled": true,
"text": "some-feature",
"icon": "some-icon"
}
}
```
詳細については、[コンテンツの無効化](/extending/extension-format#disabling-content) セクションをご覧ください。
### 配列のマージ
拡張機能 `Loader` は、配列のマージを特別にサポートします。
デフォルトでは、オブジェクトに `id` プロパティがない限り、2つのコレクションは単一の配列にマージされます。
**Tip:** 配列に同じ `id` プロパティを持つ2つのオブジェクトが含まれる場合、オブジェクトは追加されるのではなくマージされます。
マージ前: Plugin 1
```json
{
"$name": "plugin1",
"features": [
{ "text": "common 1" },
{
"id": "page1",
"text": "page 1"
}
]
}
```
マージ前: Plugin 2
```json
{
"$name": "plugin2",
"features": [
{ "text": "common 2" },
{
"id": "page1",
"text": "custom page"
}
]
}
```
最終結果:
```json
{
"features": [
{ "text": "common 1" },
{ "text": "common 2" },
{
"id": "page1",
"text": "custom page"
}
]
}
```
同じ `page1` 識別子を持つオブジェクトがマージされ、他の一意のエントリが結果の配列に追加されることに注意してください。
## コンテンツを無効にする
ほとんどのスキーマ要素は、`disabled` プロパティを使用してオフにすることができます:
```json
{
"$schema": "../../extension.schema.json",
"$name": "app",
"$version": "1.0.0",
"features": {
"create": [
{
"id": "app.create.folder",
"disabled": true,
"order": 100,
"icon": "create_new_folder",
"title": "Create Folder"
}
]
}
}
```
この機能は、外部プラグイン内から既存の機能を無効にする場合に便利です。
以下の例では、`plugin1` というプラグインは、アプリケーションによって公開される標準の `app.create.folder` メニューを、
プラグインに付属するカスタムメニューに置き換えます。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"create": [
{
"id": "app.create.folder",
"disabled": true,
...
},
{
"id": "plugin1.create.folder",
"title": "Create Folder",
...
}
]
}
}
```

View File

@@ -0,0 +1,46 @@
---
Title: カスタムアイコン
---
# カスタムアイコン
カスタムの `.svg` アイコンを登録して、ツールバー、コンテキストメニューなどで使用できます。
アイコンは `features.icons` セクションで宣言されています。たとえば:
```json
{
"features": {
"icons": [
{
"id": "adf:join_library",
"value": "./assets/images/join-library.svg"
},
{
"id": "adf:move_file",
"value": "./assets/images/adf-move-file-24px.svg"
}
]
}
}
```
`id` の値は、[Material Icon](https://material.angular.io/components/icon/api) コンポーネントの形式と同様に、
`[namespace]:[name]` の形式に準拠する必要があります。
アイコンファイルのパスは、デプロイされたアプリケーションルート (または `index.html` ファイル) に対して相対的でなければなりません。
その後、他の要素でアイコン ID を使用できます。たとえば:
```json
{
"id": "app.toolbar.move",
"order": 500,
"title": "APP.ACTIONS.MOVE",
"icon": "adf:move_file",
"actions": {
"click": "MOVE_NODES"
}
}
```
また、アイコンの値を上書きしたり、外部拡張機能からエントリを無効にしたりすることもできます。

View File

@@ -0,0 +1,222 @@
---
Title: 再配布可能なライブラリ
---
# 再配布可能なライブラリ
拡張ライブラリは、JSON 形式の標準の Angular ライブラリと定義ファイルに基づいています。
詳細については、次の記事をご覧ください: [Angular CLI 6のライブラリサポート](https://github.com/angular/angular-cli/wiki/stories-create-library#library-support-in-angular-cli-6)
あわせて参照
- Angular Library Series - Angular CLI を使用したライブラリの作成
- Part 1: https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5
- Part 2: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121
## 拡張ライブラリの作成
最初に、ワークスペース内で新しいプロジェクトを生成します:
```sh
ng generate library my-extension
```
`projects/my-extensions` フォルダに新しいプロジェクトを取得します。
デフォルトでは、プロジェクトには少なくとも次のコンテンツが含まれています:
- Example component `my-extension.component.ts`
- Example service `my-extension.service.ts`
- Angular Module example `my-extension.module.ts`
次に、次のコマンドでプロジェクトをビルドします:
```sh
ng build my-extension
```
Angular CLI は、プロジェクトの Typescript パスマッピングを自動的に構成するため、ライブラリをリンクするための追加手順は必要ありません。
### 動的コンポーネントを登録する
`my-extension.module.ts` を更新し、実行時に動的に使用する予定のすべてのコンテンツをモジュールの `entryComponents` セクションに配置します。
```typescript
@NgModule({
imports: [],
declarations: [MyExtensionComponent],
exports: [MyExtensionComponent],
entryComponents: [MyExtensionComponent]
})
export class MyExtensionModule {}
```
ここで、`MyExtensionComponent` を拡張コンポーネントとして登録する必要があります。
次の例のようにコードを更新します:
```typescript
import { ExtensionService } from '@alfresco/adf-extensions';
@NgModule({...})
export class MyExtensionModule {
constructor(extensions: ExtensionService) {
extensions.setComponents({
'my-extension.main.component': MyExtensionComponent,
});
}
}
```
`MyExtensionComponent` を参照する場合、
JSON 定義で `my-extension.main.component` 識別子を使用できるようになりました。
### プラグイン定義ファイル
ライブラリプロジェクトのルートフォルダに次の内容の新しい `assets/my-extension.json` ファイルを作成します:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"$description": "demo plugin",
"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"
}
]
}
]
}
}
```
ルートの `package.json` ファイルを更新し、`scripts` セクションに次のエントリを追加します:
```json
{
"scripts": {
...,
"build:my-extension":
"ng build my-extension && cpr projects/my-extension/assets dist/my-extension/assets --deleteFirst"
}
}
```
このスクリプトを使用して、ライブラリを構築し、アセットをアウトプットフォルダにコピーできるようになりました。
**Tip:** ライブラリのインストール手順を `README.md` ファイルで提供することをお勧めします。
プラグイン定義ファイルをメインアプリケーションの `assets/plugins` フォルダにコピーするビルドルールが開発者に必要であることを忘れないでください。
## NPM へのライブラリの公開
公開する前に、常にライブラリを再構築する必要があります:
```sh
npm run build:my-extension
```
アウトプットフォルダに移動し、publish コマンドを実行します。
```sh
cd dist/my-extension
npm publish
```
注: 有効な [NPM](https://www.npmjs.com/) アカウントが必要です。
詳細については、[ライブラリの公開](https://github.com/angular/angular-cli/wiki/stories-create-library#publishing-your-library) の記事をご覧ください。
## 拡張ライブラリの使用
拡張ライブラリを NPM に公開していると仮定すると、標準コマンドを使用してインストールできます:
```sh
npm install my-extension
```
これにより、ライブラリとそのすべての依存関係がインストールされます。
**注:** アプリケーションはすでに `dist` フォルダのローカルバージョンを使用するように設定されているため、元のワークスペースにライブラリをインストールする必要はありません。
### アセットをコピーする
同じワークスペースで拡張ライブラリを開発およびテストする場合は、`angular.json` 設定ファイルを編集し、次のルールを追加します。
```json
{
"glob": "**/*.json",
"input": "dist/my-extension/assets",
"output": "/assets/plugins"
}
```
NPM から拡張機能をインストールする場合は、次のルールを使用します:
```json
{
"glob": "**/*.json",
"input": "node_modules/my-extension/assets",
"output": "/assets/plugins"
}
```
### モジュールの登録
メインアプリケーションで、`src/app/extensions.module.ts` ファイルを編集し、次の例のようにモジュール宣言を追加します:
```typescript
...
import { MyExtensionModule } from 'my-extension';
@NgModule({
...
imports: [
...,
MyExtensionModule
]
})
export class AppExtensionsModule {}
```
### プラグインの登録
最後に、`assets/app.extensions.json` ファイルを更新し、新しいプラグインへの参照を追加します:
```json
{
"$references": [
...,
"my-extension.json"
]
}
```
## ライブラリのテスト
アプリケーションを実行し、追加のナビゲーションサイドバーエントリがあることを確認します:
```sh
npm start
```
`My Extension` リンクをクリックすると、メインコンテンツ領域にライブラリからの拡張機能コンポーネントが表示されます。
**Note:** アプリケーションの設定によっては、`admin` ユーザーが利用できる `Settings` ダイアログ (アプリケーションプロファイルボタンをクリックします) を介して外部プラグインを有効にする必要がある場合があります。

View File

@@ -0,0 +1,49 @@
---
Title: 登録
---
# 登録
`ExtensionService` を使用して、カスタムコンポーネント、認証ガード、
ルールエバリュエータなどを登録できます。
モジュールコンストラクタ内からカスタムコンテンツを登録することをお勧めします。
その場合、すべてのプラグインはメインアプリケーションコンポーネントの準備ができた直後に利用可能になります。
メインアプリケーションモジュール `app.module.ts` を更新するか、
独自のモジュールを作成し、次のスニペットを使用してカスタムコンテンツを登録します:
```ts
import { ExtensionsModule, ExtensionService } from '@alfresco/adf-extensions';
@NgModule({
imports: [ ExtensionsModule ]
declarations: [ MyComponent1, MyLayout ],
entryComponents: [ MyComponent1, MyLayout ]
})
export class MyExtensionModule {
constructor(extensions: ExtensionService) {
extensions.setComponents({
'plugin1.components.my': MyComponent1,
'plugin1.layouts.my': MyLayout
});
extensions.setAuthGuards({
'plugin.auth': MyAuthGuard
});
extensions.setEvaluators({
'plugin1.rules.custom1': MyCustom1Evaluator,
'plugin1.rules.custom2': MyCustom2Evaluator
});
}
}
```
**注:** Angular のルールによれば、実行時に動的に作成されるすべてのコンポーネントは、
NgModule の `entryComponents` セクション内に登録する必要があります。
Registration API は、カスタムコンテンツのみに限定されません。
モジュールの値を置き換えることにより、既存のエントリを置き換えることができます。

View File

@@ -0,0 +1,79 @@
---
Title: ルート
---
# ルート
新しいルートを作成するには、`routes` セクションに対応するエントリを入力します。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"routes": [
{
"id": "plugin1.routes.bin",
"path": "ext/bin",
"layout": "app.layout.main",
"component": "your.component.id"
}
]
}
```
## ルートのプロパティ
| プロパティ名 | 説明 |
| ------------- | -------------------------------------------------------------------------------------- |
| **id** | 一意の識別子。 |
| **path** | ルートの実行パス。 |
| **component** | ルートに使用するメインの[コンポーネント](/extending/components)。 |
| layout | ルートに使用するレイアウト[コンポーネント](/extending/components)。 |
| auth | [認証ガード](/extending/routes#authentication-guards)のリスト。デフォルトは `[ "app.auth" ]` です。 |
| data | ルートとともに移すカスタムプロパティバッグ。 |
レイアウトプロパティの `app.layout.main` の値を使用して、
ヘッダー、ナビゲーションサイドバー、メインコンテンツ領域を備えたデフォルトのアプリケーションレイアウトを取得します。
任意のコンポーネントを登録して、`app.layout.main` の値をバックアップできます。
**Tip:** デフォルトでは、カスタム値を指定しない場合は `app.layout.main` が使用されます。
ルートコンポーネントにページ全体を表示させる場合は、`blank` を使用します。
次の例のように完全なルートスキーマを定義できます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"routes": [
{
"id": "plugin1.routes.bin",
"path": "ext/bin",
"component": "your.component.id",
"layout": "app.layout.main",
"auth": ["app.auth"],
"data": {
"title": "Custom Trashcan"
}
}
]
}
```
すべてのアプリケーションルートには、少なくとも1つの認証ガードが必要です。
デフォルトは `['app.auth']` の値です。
## 認証ガード
以下は、起動時にメインアプリケーションが登録する認証ガードのリストです。
| キー | タイプ | 説明 |
| -------- | ------------ | ------------------------------------------------------------------------- |
| app.auth | AuthGuardEcm | ADF ガードは、ACS の認証を検証し、必要に応じてログインにリダイレクトします。 |
カスタムエクステンション内からこれらのガードを参照するか、
カスタム実装を [登録](/extending/registration) できます。

231
docs/ja/extending/rules.md Normal file
View File

@@ -0,0 +1,231 @@
---
Title: ルール
---
# ルール
ルールを使用すると、拡張コンポーネントの条件を評価できるため、たとえば特定のルールに基づいて要素を無効化または非表示にできます。
すべてのルールは、コンディションエバリュエータによって裏付けられています。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"rules": [
{
"id": "app.trashcan",
"type": "app.navigation.isTrashcan"
}
]
}
```
ルールはパラメータとして他のルールを受け入れることができます:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"rules": [
{
"id": "app.toolbar.favorite.canAdd",
"type": "core.every",
"parameters": [
{ "type": "rule", "value": "app.selection.canAddFavorite" },
{ "type": "rule", "value": "app.navigation.isNotRecentFiles" },
{ "type": "rule", "value": "app.navigation.isNotSharedFiles" },
{ "type": "rule", "value": "app.navigation.isNotSearchResults" }
]
}
]
}
```
**Tip:** また、`!` プレフィックスを使用して、ルールを無効にすることもできます。
`!app.navigation.isTrashcan``app.navigation.isTrashcan` の反対です。
追加のパラメータを提供したり、複数のルールを連結したりする必要がない場合は、
ルールを宣言せずに、登録されたエバリュエータへのインライン参照を使用することもできます。
## コアエバリュエータ
他のルールとエバリュエータを連鎖させることにより、新しいルールを作成できます。
| バージョン | キー | 説明 |
| ------- | ---------- | ----------------------------------------------------------------------------- |
| 1.7.0 | core.every | すべての連鎖ルールが `true` と評価される場合、`true` と評価されます。 |
| 1.7.0 | core.some | 連鎖ルールの少なくとも1つが `true` と評価された場合、`true` と評価されます。 |
| 1.7.0 | core.not | すべての連鎖ルールが `false` に評価される場合、`true` に評価されます。 |
以下は、次の条件を組み合わせた複合ルール定義の例です:
- ユーザーが単一のファイルを選択しました
- ユーザーは **ゴミ箱** ページを使用していません
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"rules": [
{
"id": "app.toolbar.canViewFile",
"type": "core.every",
"parameters": [
{
"type": "rule",
"value": "app.selection.file"
},
{
"type": "rule",
"value": "core.not",
"parameters": [
{
"type": "rule",
"value": "app.navigation.isTrashcan"
}
]
}
]
}
]
}
```
これで、上記のルールに基づいたツールバーボタンアクションを宣言できます。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"features": {
"toolbar": [
{
"id": "app.toolbar.preview",
"type": "button",
"title": "View File",
"icon": "open_in_browser",
"actions": {
"click": "VIEW_FILE"
},
"rules": {
"visible": "app.toolbar.canViewFile"
}
}
]
}
}
```
ボタンは、リンクされたルールが `true` と評価された場合にのみ表示されます。
## アプリケーションエバリュエータ
| バージョン | キー | 説明 |
| ----- | ----------------------------------- | ------------------------------------------------------------------------ |
| 1.7.0 | app.selection.canDelete | ユーザーには、選択したノードを削除する権限があります。 |
| 1.7.0 | app.selection.canDownload | ユーザーは選択したノードをダウンロードできます。 |
| 1.7.0 | app.selection.notEmpty | 少なくとも1つのードが選択されています。 |
| 1.7.0 | app.selection.canUnshare | ユーザーは、選択したノードを公開共有から削除できます。 |
| 1.7.0 | app.selection.canAddFavorite | ユーザーは、選択したノードをお気に入りに追加できます。 |
| 1.7.0 | app.selection.canRemoveFavorite | ユーザーは、選択したノードをお気に入りから削除できます。 |
| 1.7.0 | app.selection.first.canUpdate | ユーザーには、選択したノードを更新する権限があります。 |
| 1.7.0 | app.selection.file | 単一のファイルノードが選択されています。 |
| 1.7.0 | app.selection.file.canShare | ユーザーは選択したファイルを共有できます。 |
| 1.7.0 | app.selection.file.isShared | 共有ノードが選択されています。 |
| 1.7.0 | app.selection.file.isLocked | ファイルは編集のためにロックされています。 |
| 1.7.0 | app.selection.file.isLockOwner | ファイルはロックされており、現在のユーザーはロック所有者です。 |
| 1.7.0 | app.selection.file.canUploadVersion | ユーザーはファイルのバージョンを更新できます。 |
| 1.7.0 | app.selection.library | 単一のライブラリノードが選択されています。 |
| 1.7.0 | app.selection.isPrivateLibrary | プライベートライブラリノードが選択されています。 |
| 1.7.0 | app.selection.hasLibraryRole | 選択したライブラリノードにはロールプロパティがあります。 |
| 1.7.0 | app.selection.hasNoLibraryRole | 選択したライブラリノードにはロールプロパティがありません。 |
| 1.7.0 | app.selection.folder | 単一のフォルダノードが選択されます。 |
| 1.7.0 | app.selection.folder.canUpdate | ユーザーには、選択したフォルダを更新する権限があります。 |
| 1.7.0 | app.selection.file.canLock | ユーザーにはファイルをロックする権限があります。 |
| 1.7.0 | app.selection.file.canUnlock | ユーザーにはファイルのロックを解除する権限があります。 |
| 1.7.0 | repository.isQuickShareEnabled | クイック共有リポジトリオプションが有効かどうか。 |
| 1.8.0 | canCopyNode | ユーザーが選択したノードをコピーできるかどうかを確認します。 |
| 1.8.0 | canToggleJoinLibrary | ユーザーがライブラリで "参加" または "参加リクエストのキャンセル" を実行できるかどうかを確認します。 |
| 1.8.0 | canEditFolder | ユーザーが選択したフォルダを編集できるかどうかを確認します。 |
| 1.8.0 | isTrashcanItemSelected | ユーザーがゴミ箱アイテムを選択しているかどうかを確認します。 |
| 1.8.0 | canViewFile | ユーザーがファイルを表示できるかどうかを確認します。 |
| 1.8.0 | canLeaveLibrary | ユーザーが選択したライブラリを**離れる**ことができるかどうかを確認します。 |
| 1.8.0 | canToggleSharedLink | ユーザーが共有リンクモードを切り替えることができるかどうかを確認します。 |
| 1.8.0 | canShowInfoDrawer | ユーザーが選択したノードの**情報ドロアー**を表示できるかどうかを確認します。 |
| 1.8.0 | canManageFileVersions | ユーザーが選択したノードのファイルバージョンを管理できるかどうかを確認します。 |
| 1.8.0 | canManagePermissions | ユーザーが選択したノードの権限を管理できるかどうかを確認します。 |
| 1.8.0 | canToggleEditOffline | ユーザーが選択したノードの**オフライン編集**モードを切り替えることができるかどうかを確認します。 |
| 1.8.0 | user.isAdmin | ユーザーが管理者かどうかを確認します。 |
## ナビゲーションエバリュエータ
アプリケーションは、表示されるルートまたはページに基づいて特定のアクションを開発者が制限または有効化できるように、ナビゲーション関連のエバリュエータのセットを公開します。
否定されたエバリュエータは、開発を単純化するためだけに提供され、`core.every``core.not` を混合するなど、
規則を否定するためだけに複雑な規則ツリーを持つことを回避します。
**Tip:** また、`!` プレフィックスを使用して、ルールを無効にすることもできます。
`!app.navigation.isTrashcan``app.navigation.isTrashcan` の反対です。
| バージョン | キー | 説明 |
| ------- | --------------------------------- | ---------------------------------------------------------------- |
| 1.7.0 | app.navigation.folder.canCreate | ユーザーは、現在開いているフォルダにコンテンツを作成できます。 |
| 1.7.0 | app.navigation.folder.canUpload | ユーザーは、現在開いているフォルダにコンテンツをアップロードできます。 |
| 1.7.0 | app.navigation.isTrashcan | ユーザーは**ゴミ箱**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotTrashcan | 現在のページは**ゴミ箱**ではありません。 |
| 1.7.0 | app.navigation.isLibraries | ユーザーは**ライブラリ**または**ライブラリ検索結果**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotLibraries | 現在のページは**ライブラリ**ページではありません。 |
| 1.7.0 | app.navigation.isSharedFiles | ユーザーは**共有ファイル**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotSharedFiles | 現在のページは**共有ファイル**ではありません。 |
| 1.7.0 | app.navigation.isFavorites | ユーザーは**お気に入り**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotFavorites | 現在のページは**お気に入り**ではありません。 |
| 1.7.0 | app.navigation.isRecentFiles | ユーザーは**最近のファイル**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotRecentFiles | 現在のページは**最近のファイル**ではありません。 |
| 1.7.0 | app.navigation.isSearchResults | ユーザーは**検索結果**ページを使用しています。 |
| 1.7.0 | app.navigation.isNotSearchResults | 現在のページは**検索結果**ではありません。 |
| 1.7.0 | app.navigation.isSharedPreview | 現在のページはプレビュー**共有ファイル**です。 |
| 1.7.0 | app.navigation.isFavoritesPreview | 現在のページはプレビュー**お気に入り**です。 |
| 1.7.0 | app.navigation.isSharedFileViewer | 現在のページは共有ファイルのプレビューページです。 |
| 1.7.0 | app.navigation.isPreview | 現在のページは**プレビュー**です。 |
| 1.7.0 | app.navigation.isPersonalFiles | 現在のページは**個人用ファイル**です。 |
| 1.7.0 | app.navigation.isLibraryFiles | 現在のページは**ライブラリファイル**です。 |
**Tip:** 実行時に再利用される独自のエントリを登録する方法の詳細については、
[登録](/extending/registration) セクションを参照してください。
### 例
以下の例のルールは、すべての条件が満たされた場合に `true` と評価されます:
- ユーザーがノードを選択しました
- ユーザーは**ゴミ箱**ページを使用していません
- ユーザーは**ライブラリ**ページ (**マイライブラリ**、**お気に入りライブラリ**、**ライブラリ検索結果**ページ) を使用していません
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"rules": [
{
"id": "app.toolbar.canCopyNode",
"type": "core.every",
"parameters": [
{ "type": "rule", "value": "app.selection.notEmpty" },
{ "type": "rule", "value": "app.navigation.isNotTrashcan" },
{ "type": "rule", "value": "app.navigation.isNotLibraries" }
]
}
]
}
```

View File

@@ -0,0 +1,279 @@
---
Title: チュートリアル
---
# チュートリアル
以下は、一般的なタスクをカバーする短いチュートリアルです。
## パラメータ付きのカスタムルート
このチュートリアルでは、次の機能を実装します:
- **Trashcan** コンポーネントを更新して、ルートパラメータを受信および記録します。
- メインレイアウトを使用して **Trashcan** コンポーネントに遷移する新しいルートを作成します。
- 新しいルートへのリダイレクトを許可するアクションリファレンスを作成します。
- **New** メニューにアクションを呼び出すボタンを作成します。
`src/app/components/trashcan/trashcan.component.ts` を更新し、次のコードを `ngOnInit` 本体に追加します:
```typescript
import { ActivatedRoute, Params } from '@angular/router';
@Component({...})
export class TrashcanComponent {
constructor(
// ...
private route: ActivatedRoute
) {}
ngOnInit() {
// ...
this.route.params.subscribe(({ nodeId }: Params) => {
console.log('node: ', nodeId);
});
}
}
```
上記のコードは、現在のルートパラメータをブラウザコンソールに記録し、
インテグレーションが期待どおりに機能することを証明しています。
次に、以下の例のように新しいルート定義を追加します:
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"routes": [
{
"id": "custom.routes.trashcan",
"path": "ext/trashcan/:nodeId",
"component": "your.component.id",
"layout": "app.layout.main",
"auth": ["app.auth"]
}
]
}
```
上記のテンプレートは、`ext/trashcan/` ルートを指し、`nodeId` パラメータを受け入れる ID `custom.routes.trashcan` を持つ新しいルート参照を作成します。
また、デフォルトのアプリケーションレイアウト (`app.layout.main`) と
認証ガード (`app.auth`) を使用します。
次に、`NAVIGATE_ROUTE` アプリケーションアクションのアクション参照を作成し、ルートパラメータを渡します。
パスには `/ext/trashcan``nodeId` の値には `10` を渡します。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"routes": [...],
"actions": [
{
"id": "custom.actions.trashcan",
"type": "NAVIGATE_ROUTE",
"payload": "$(['/ext/trashcan', '10'])"
}
]
}
```
最後に、`NEW` ボタンの新しいメニュー項目を宣言し、上記で作成した `custom.actions.trashcan` アクションを使用します。
```json
{
"$schema": "../../../extension.schema.json",
"$version": "1.0.0",
"$name": "plugin1",
"routes": [...],
"actions": [...],
"features": {
"create": [
{
"id": "custom.create.trashcan",
"type": "default",
"icon": "build",
"title": "Custom trashcan route",
"actions": {
"click": "custom.actions.trashcan"
}
}
]
}
}
```
これで、アプリケーションを実行すると、"NEW" ドロップダウンに "Custom Trashcan Route" という新しいメニュー項目が表示されます。
このアイテムをクリックすると、**Trashcan** コンポーネントを含む `/ext/trashcan/10` ルートに移動します。
ブラウザコンソールの出力を確認し、次の出力があることを確認します:
```text
node: 10
```
カスタムアクションを呼び出し、追加のアプリケーションルートにリダイレクトする
新しいメニューボタンが正常に作成されました。
## ダイアログアクション
このチュートリアルでは、カスタムマテリアルダイアログを呼び出すアクションを作成します。
ダイアログコンポーネントの詳細については、こちらをご覧ください: [ダイアログの概要](https://material.angular.io/components/dialog/overview)
### ダイアログを作成する
```sh
ng g component dialogs/my-extension-dialog --module=app
```
Angular ルールに従って、コンポーネントはモジュールの `entryComponents` セクション内にも登録する必要があります。
以下の例に従って `src/app/app.module.ts` ファイルを更新します:
```ts
@NgModule({
imports: [...],
declarations: [
...,
MyExtensionDialogComponent
],
entryComponents: [
...,
MyExtensionDialogComponent
]
})
```
`my-extension-dialog.component.ts` を更新します:
```ts
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'aca-my-extension-dialog',
templateUrl: './my-extension-dialog.component.html',
styleUrls: ['./my-extension-dialog.component.scss']
})
export class MyExtensionDialogComponent {
constructor(public dialogRef: MatDialogRef<MyExtensionDialogComponent>) {}
}
```
`my-extension-dialog.component.html` を更新します:
```html
<h2 mat-dialog-title>Delete all</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>No</button>
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
<button mat-button [mat-dialog-close]="true">Yes</button>
</mat-dialog-actions>
```
### アクションを作成する
次のコードを `src/app/store/actions/app.actions.ts` に追加します:
```ts
export const SHOW_MY_DIALOG = 'SHOW_MY_DIALOG';
export class ShowMydDialogAction implements Action {
readonly type = SHOW_MY_DIALOG;
}
```
あわせて参照:
- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
### エフェクトを作成する
`src/app/store/effects/app.effects.ts` を更新します:
```ts
import { ShowMydDialogAction, SHOW_MY_DIALOG } from '../actions/app.actions';
@Injectable()
export class AppEffects {
constructor(...) {}
@Effect({ dispatch: false })
showMyDialog$ = this.actions$.pipe(
ofType<ShowMydDialogAction>(SHOW_MY_DIALOG),
map(() => {})
);
// ...
}
```
あわせて参照:
- [Comprehensive Introduction to @ngrx/store](https://gist.github.com/btroncone/a6e4347326749f938510)
ダイアログを表示するための更新
```ts
import { MatDialog } from '@angular/material/dialog';
import { MyExtensionDialogComponent } from '../../dialogs/my-extension-dialog/my-extension-dialog.component';
@Injectable()
export class AppEffects {
constructor(
...,
private dialog: MatDialog
) {}
@Effect({ dispatch: false })
showMyDialog$ = this.actions$.pipe(
ofType<ShowMydDialogAction>(SHOW_MY_DIALOG),
map(() => {
this.dialog.open(MyExtensionDialogComponent)
})
);
...
}
```
### ツールバーアクションを登録する
`src/assets/app.extensions.json` ファイルを更新し、`features.toolbar` セクションに新しいエントリを挿入します:
```json
{
...,
"features": {
"toolbar": [
{
"id": "my.custom.toolbar.button",
"order": 10,
"title": "Custom action",
"icon": "extension",
"actions": {
"click": "SHOW_MY_DIALOG"
}
}
]
}
}
```
これで、アプリケーションを実行すると、クリックするたびにダイアログを呼び出す追加のボタンが表示されます。