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

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

そして、アセットの種類ごとに、色んな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ページで開かれ、動画の生成ができない状態になっています。

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

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

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ページへ遷移されます。