2021-08-04

Asset Share Commons の Search Results 画面の Property Filter について

a.変更対応 - 4.変更実施

Asset Share Commons の Search Results 画面では、右側の Property Filter コンポーネントが設置されています。

例えば、☐VIDEO のチェックボックスのチェックを入れると、 Search Results 一覧は、動画アセットで絞り込みされます。

f:id:www0532:20210804162406p:plain

この Property Filter コンポーネントの設定方法を紹介します。

f:id:www0532:20210804163643p:plain

Type

下記の選択肢から一つ選択します：

Checkboxes
Radio buttons
Slider
Toggle
Drop-down

Title

表示するタイトル

Metadata Property

アセットのメタデータの属性を設定します。この設定値でフィルタリングします。

Operation

属性値の合致方法、普段はEqualsと設定します。

Source

参照先、普段はLocalと設定します。

Options

フィルタリング条件を設定します。

Label：表示名
Value：フィルタリング条件になるアセットのメタデータの属性値

ちなみに、dc:format属性に設定されている値は、アセットのMIMEタイプ(Multipurpose Internet Mail Extensions)であり、拡張子に紐づく情報です。複数が設定する場合、カンマ区切りで入力されています。

例えば、動画アセットの「QuickTime」、「Mp4」をフィルタリングする場合、「video/quicktime,video/mp4」と入力されています。

2021-08-04

AEMの一時的なワークフローの通知メールについて

a.変更対応 - 4.変更実施

AEMの一時的なワークフロー（Transient Workflows）は、履歴がリポジトリに保存しないため、処理時間が短縮され、リポジトリの肥大化も大幅に抑制されるなど利点があります。

頻繁に実行されるワークフロー、且つ履歴が必要ないワークフローに対して、極めて推奨されています。

設定方法も簡単で、ワークフローのプロパティ設定画面に、「Transient Workflow」の☑チェックを入れて保存すれば、設定完了！

f:id:www0532:20210804105436p:plain

ここで一つの問題点は、一時的なワークフローが完了する際に、不要な通知メールがAEMから送信されることです。

例えば、大量のアセットがアップロードされる場合、一時的なワークフローの DAM Update Asset が起動され、ワークフローが完了する際に、大量の通知メールがユーザーの宛先に送信される事象が発生してしまいます。

この事象の解決方法は、AEMのOSGi設定により、SendTransientWorkflowCompletedEmailProcessのNotify on Complete ☑チェックボックスのチェックを外すことです。

f:id:www0532:20210804112624p:plain

この設定で、一時的なワークフローが完了する際に、AEMから不要な通知メールが送信しないようになりました。

2021-08-01

AEMアセットのCUG設定時、所属しないグループの設定方法

b.障害対応 - 3.修正・修復

AEMのCUG（Closed User Groups）設定によると、コンテンツリポジトリ内の特定のツリーに対する読み取りアクセスを制限することができます。

f:id:www0532:20210801184057p:plain

例えば、上記のように、アセットフォルダの /content/dam/myfolder-01 のプロパティ設定のCUG項目に、GroupＡを追加すれば、GroupＡに所属するユーザーのUser-A-01、User-A-02のみ、フォルダ /content/dam/myfolder-01 配下のアセットを読み取りアクセスが許可され、GroupＡ以外のユーザーからのアクセスは拒否されます。

f:id:www0532:20210801183343p:plain

ここで発生した問題は、GroupＡに所属するユーザーのUser-A-01は、アセットフォルダの /content/dam/myfolder-01 をGroupＢに共有したい時、プロパティ設定のCUG項目の Add User or Group ドロップダウンリストでは、所属するグループしか表示されていないため、User-A-01 は GroupＢに所属しないので、GroupＢをCUGグループに設定することができません。

f:id:www0532:20210801185544p:plain

どうすればいいだろうか。実は、 Add User or Group ドロップダウンリストに GroupＢが表示されていないのは、 GroupＢのグループ情報の読み取り権限が持っていないためです。ここまで分かれば、解決方法が簡単ですね。

adminユーザーでAEMにログインしてから、GroupＢのPermissions設定画面を開きます、ここでは、GroupＢのグループ情報のPathが表示されているので、このPathをメモします。

f:id:www0532:20210801191241p:plain

次は、GroupＡのPermissions設定画面を開きます、「Add ACE」ボタンを押下し、「Add New Entry for "Group-A"」設定画面では、Path項目に、上記でメモしていたGroupＢのグループ情報のPathを入力する。Privileges項目に、jcr:readを入力し、「Add」ボタンを押下します。

f:id:www0532:20210801194723p:plain

ここでは、User-A-01 ユーザーで AEM にログインすれば、アセットフォルダのプロパティ設定のCUG項目の Add User or Group ドロップダウンリストに GroupＢも表示できるようになりました。

f:id:www0532:20210801192157p:plain

このように、フォルダの共有したいグループの「グループ情報Path」を自分所属するグループの読み取り（jcr:read）Permissions設定に追加すれば、フォルダのプロパティ設定のCUG項目に、共有したいグループを追加することができますので、フォルダの共有することができます。

f:id:www0532:20210801193812p:plain

2021-07-28

AEMのImageコンポーネントについて

a.変更対応 - 4.変更実施

AEMのImageコンポーネントは、ページのオーサリングでよく使われる汎用コンポーネントの一つです。

f:id:www0532:20210728160947p:plain

このコンポーネントのプロパティ設定では、「タイトル」、「代替テキスト」が未入力の場合、画像ファイルの「フィアル名」がHTMLの title、alt 属性に設定されてしまう事象があります。

<img src="/content/test/_jcr_content/1627455779321.jpg" alt="dog-103.jpg" title="dog-103.jpg" class="cq-dd-image">

そして、画像にカーソルを当てた時、ファイル名のポップアップが表示されています。

f:id:www0532:20210728161614p:plain

これから、AEMのImageコンポーネントをカスタマイズして、事象を解消する方法を紹介します。

一先ず、Imageコンポーネントのソースコードを/libs配下から、/appsにコピーしてオーバーライドします。

コピー元

/libs/foundation/components/image/image.jsp

コピー先

/apps/foundation/components/image/image.jsp

ここで、「タイトル」、「代替テキスト」が未入力の場合、HTMLの title、alt 属性自体が出力しないように改修します。

    //画像ファイルのファイル名を取得する
    String fileName = image.getFileName();
    //Titleが未設定の場合、Title属性自体を削除する
    if(fileName && properties.get("jcr:title", "").length() == 0){
        imgStr = imgStr.replace("title=\"" + fileName + "\"", "");
    }
    //Alt Textが未設定の場合、Alt属性自体を削除する
    if(fileName && properties.get("alt", "").length() == 0){
        imgStr = imgStr.replace("alt=\"" + fileName + "\"", "");
    }

生成したHTMLを見ると、「タイトル」、「代替テキスト」が未入力の場合、title、alt 属性自体が出力されていない。

<img src="/content/test/_jcr_content/1627455779321.jpg" class="cq-dd-image">

画像にカーソルを当てた時、ファイル名のポップアップが表示されていません。

f:id:www0532:20210728163355p:plain

2021-07-28

AEMアセットのサムネイルを設定する方法

a.変更対応 - 4.変更実施

AEMアセットのサムネイルは、アセットがAEMにアップロードされた際に、アセット更新ワークフローが生成されたものです。アセットの種類により、サムネイルが生成されない場合もあります。

f:id:www0532:20210728133154p:plain

今回は、手動でAEMアセットのサムネイルを設定する方法を紹介します。

既存のAEMサムネイルサイズを調べる

アップロードされたアセットの場合、jcr:content/renditions の配下に、自動的に四つのサムネイル画像ファイルが生成されています。

f:id:www0532:20210728133654p:plain

手動で設定する場合、四つのサムネイル画像ファイルを事前用意します。

#	ファイル名	拡張子	サイズ
1	cq5dam.thumbnail.140.100.png	png	140 × 100
2	cq5dam.thumbnail.319.319.png	png	319 × 319
3	cq5dam.thumbnail.48.48.png	png	48 × 48
4	cq5dam.web.1280.1280.jpeg	jpeg	1280 × 1280

サムネイル画像ファイルの準備

ペイントで用意した画像ファイルを開き、上記のサイズに合わせて、ペイントの「イメージのプロパティ」編集画面より、ピクセル単位の幅、高さを設定し、指定されたファイル名で保存します。

f:id:www0532:20210728140918p:plain

ここまで、サムネイル画像ファイルの準備が完了です。

f:id:www0532:20210728143538p:plain

AEMアセットのサムネイルの設定

アセット一覧画面から、該当するアセットをクリックし、アセット詳細画面を開きます。

f:id:www0532:20210728145448p:plain

「Add Rendition」ボタンを押下し、用意した四つの画像ファウルを一つずつアップロードし、成功メッセージ表示されることを確認します。

f:id:www0532:20210728145800p:plain

アセット一覧画面に戻ると、各ビューモードでアセットのサムネイルが表示されることを確認できます。

f:id:www0532:20210728150106p:plain

2021-07-15

Asset Share Commons の Detailページへのリンクについて

a.変更対応 - 4.変更実施

Asset Share Commons の Search Results 画面では、検索したアセット一覧が表示されます。アセットのサムネイル画像などをクリックすると、Detailページへ遷移されます。

f:id:www0532:20210714191618p:plain

そして、アセットの種類ごとに、色んなDetailページが用意されます。

画像ファイル　⇒　image.htmlページへ遷移
動画ファイル　⇒　video.htmlページへ遷移
不明ファイル　⇒　details.htmlページへ遷移

例えば、画像ファイル（拡張子：png、jpeg、bmpなど）なら、image.htmlページへ遷移され、このページの画像コンポーネントでアセットのサムネイル画像が表示されます。動画ファイル（拡張子：mp4、mov、flv）なら、video.htmlページへ遷移され、このページの動画コンポーネントでアセットのサムネイル動画の生成もできます。

ここでは、アセット種類の特定は、拡張子により、Asset Share Commons のバンドルで行われていますが、全ての拡張子には対応しきれません。

仮に、アセットの種類特定できない（不明ファイル）場合、details.htmlページへ遷移され、このページでは、サムネイル画像しか表示できません。下記のように、拡張子がmp4の動画ファイルは、種類特定できませんので、details.htmlページで開かれ、動画の生成ができない状態になっています。

f:id:www0532:20210714191806p:plain

この記事は、正しいDetailページへ遷移するように、HTL側でカスタマイズする方法を紹介します。

Search Results コンポーネントのプロパティ設定画面に、拡張子と遷移先ページのパス項目を追加します。

f:id:www0532:20210715142405p:plain

HTLからアセットのURL（fullUrl）をjavascriptに渡します。

/apps/asset-share-commons/components/search/results/result/list/templates/list.html

<sly    data-sly-use.details="${'asset-share-commons/clientlibs/clientlib-my/js/details.js' @ href=assetDetails.fullUrl ,propertyItems = propertyItems}"></sly>

そして、javascriptでは、「プロパティ設定した拡張子」の場合、URLに含まれる「Detailページのパス」を「プロパティ設定した遷移先ページのパス」に書き換えて、HTLに新しいURLを返却します。

/apps/asset-share-commons/clientlibs/clientlib-my/js/details.js

    if (this.href && this.propertyItems) {
        fullUrl = this.href; 
        //拡張子
        var dt = fullUrl.split(".");
        if (dt) {
            extension = dt[dt.length - 1];
        }
        //今現在のDetailページのパス
        var detailPage = getFromPage(this.href);
        //URLを書き換える
        if (detailPage && propertyItems && propertyItems.length > 0) {
            var obj = null;
            for(let i = 0; i < propertyItems.length; i++){
                obj = JSON.parse(propertyItems[i]);
                if (obj.extension && obj.extension !== "" && obj.extension.toLowerCase() === extension.toLowerCase()) {
                    fullUrl = fullUrl.replace(detailPage, obj.to);
                }
            }
        }
    }

    return {
        fullUrl:fullUrl
    };

HTLでは、javascriptで処理したURLをアセットのリンクのhrefに設定します。

<td class="image">
    <a href="${details.fullUrl}"><img src="${asset.properties['rendition?name=list'] || properties['missingImage'] @ context = 'attribute'}" alt="${asset.properties['title']}"/></a>
</td>

これから、Search Results 画面では、検索したアセット一覧から、拡張子がmp4の動画ファイルをクリックすれば、生成ボタン付きのvideo.htmlページへ遷移されます。

f:id:www0532:20210714191907p:plain

2021-07-14

Asset Share Commons の Search Results 画面の期限管理

a.変更対応 - 4.変更実施

Asset Share Commons の Search Results 画面では、期限切れのアセットを検索結果から除外するフィルター機能があります。この実現方法を紹介します。

Search Results コンポーネントのプロパティ設定画面を開きます。

f:id:www0532:20210713204250p:plain

Search Restrictions（検索の制限）の「Add」ボタンを押下し、新しい検索制限項目が追加され、「Exclude expired assets（期限切れのアセットを除外）」と選択します。

f:id:www0532:20210714103243p:plain

ここまで、除外するフィルターの設定が完了、期限切れのアセットあれば、除外されますね。では、下記のアセットを例として、期限切れる場合の表示状況を試してみます。

f:id:www0532:20210713203840p:plain

AEM の CRXDE Lite 画面を開き、上記アセットのjcr:content/metadataノードに、下記の属性を追加します。

#	name	Type	Value
1	prism:expirationDate	Date	（過去の日付）

+ metadata
  - jcr:primaryType              = "nt:unstructured"
  - prism:expirationDate         = "2021-01-01T00:00:00.000+09:00"

保存すると、上記の期限切れのアセットは検索結果から除外されました。

f:id:www0532:20210714105036p:plain