DX station

スクリプトを使ったら自由自在!~DAM を使ってみよう 応用編 ~

富田 優作

こんにちは。SBT の富田です。

早いもので、今回で DAM に関する連載は最終回を迎えました。
余すところなくランニングシューズ DAM の良さを伝えてきたわけですが、これまでの記事をまだ読まれていない方は、是非ご一読いただければと思います。
今回のブログの面白さと理解度がぐ~んと上がりますよ!


さて、最終回である今回はちょっと技術者寄りのお話になります。
これまでにご紹介してきた機能でアセット管理をだいぶ効率化できる状態ではありますが、Sitecore Content Hub はスクリプトを使うことでさらに便利に、効率的に管理することができるようになるのです。

本記事を読んでいただくことで、「Sitecore Content Hub って、結構なんでもできちゃうんだね」という感想を持っていただけるようになるかと思いますので、是非とも最後まで読んでいただければと思います。



導入からデジタルマーケティングのコンサルティングまでご支援 - Sitecore on Cloud 詳細はこちら


1. アセット詳細画面の一部に関連アセットを表示してみよう ~ API とコンポーネントの紹介 ~

Sitecore Content Hub の検索機能は強力ですが、例えばランニングシューズの画像を取り扱う際に、同じシューズの他の画像を確認するために、毎回「商品名」で検索していたとします。
毎回検索するのであれば、いっそのことアセットの詳細画面に同じ「商品名」のアセットリストを表示しておくことができれば、検索の手間が省けて助かりますよね。
はい、そんなことができちゃいます!!

っとその前に、重要な機能「API」と「コンポーネント」について紹介いたします。

  • API
    Sitecore Content Hub には API があらかじめ用意されており、API を通じて Sitecore Content Hub に保存されている情報(アセットに紐づいているスキーマ情報とか)を取得することができます。
    例えば、アセットに登録しているデータに対して、全文検索で「boost2021」という文字列が含まれるアセット情報が欲しい場合は、

    https://{{hostname}}/api/entities/query?query=Definition.Name=='M.Asset' AND FullText=='boost2021'

    のように API をコールし、結果を JSON で取得することができます。
    下図は、試しに postman というサービスを使って上記リクエストを行った結果です。

    APIリクエスト

    「ShoesName」に「boost2021」と記録されている JSON が返ってきたのが分かるかと思います。
    このように、外部から API をコールすることでアセット情報が手に入ります。
  • コンポーネント
    Sitecore Content Hub では、HTML/JavaScript で作成したページを「コンポーネント」として画面の一部に埋め込むことができます。
    ※正式には「外部ページコンポーネント」と呼ぶようです。


「API」と「コンポーネント」の紹介は以上です。
「API」と「コンポーネント」を組み合わせ、以下を行うことで、「アセットの詳細画面に同じ商品名のアセットリストを表示させておく」といったことができるようになります!

  1. JavaScript で API をコールし、自身と同じ商品名を持つアセットを検索し、JSON を取得する
  2. JavaScript で、同じ商品名のアセットへのリンクリストを表示する HTML を生成する
  3. 1. 2. をコンポーネントとして登録し、詳細画面の一部に表示するように設定する

上記を実際に設定し、ランニングシューズ「boost2021」という商品名であるアセットのサムネイルとリンクリストを表示した例が下図です。

SameProductList表示例

詳細画面の赤枠内「SameProductList」タイルにサムネイル画像とファイル名のリストが表示されているのが分かるかと思います。
これらのアセットは、事前に「ShoesName」に「boost2021」を設定してあるものです。(上図の青枠の個所です。)
「ShoesName」に「boost2021」がセットされているもののみリストとして表示するように JavaScript で実装しております。

このように、「API」と「コンポーネント」を使うことで、得たい情報をあらかじめ用意しておくことができてしまいます。
じゃあ例えば、同じキャンペーン用に作っているアセットで、まだ未承認であるものを表示させておきたいな、とかは?できちゃいます。
じゃあ、一世代前のモデルの画像リストを表示させておきたい、とかは?できちゃいます!
色々と効率化の妄想が膨らんでしまいますね!

導入からデジタルマーケティングのコンサルティングまでご支援 - Sitecore on Cloud 詳細はこちら


2. 商品名の先頭に「【新作】」という文字列を埋め込む一括処理ボタンを追加しよう ~ スクリプトとアクションの紹介 ~

例えば、3か月ごとに新作モデルを出すランニングシューズメーカーがあったとして、最新モデルのアセットの Title には「【最新】」と付けておくといった運用があったとします。
手動で修正するとなると大変だしミスも発生しそうですよね。
Sitecore Content Hub では、このような処理を予め組んでおき、必要になったら実行することができます。
しかもボタンとして追加することもできますので、毎回スクリプトを作って実行する、といったような煩雑なオペレーションではなく、画面からボタンをポチっとするだけで処理を終えられるようにできます。

具体的に見ていきたいのですが、その前に!
ここでも重要な機能「スクリプト」と「アクション」を紹介いたします。

  • スクリプト
    文字通り「スクリプト」で、予め何かしらの処理を実行するプログラムを登録することができます。
    言語は C# で記述します。
    例えば Sitecore Content Hub のスクリプト登録画面ではこんな感じでエディタが表示されるので、C# でコーディングして保存、ビルドします。
    なお、ビルドは下図の画面右上にある Build ボタンを押すだけで実施できます。

    C#コーディング画面

    この「スクリプト」では、ただプログラムを登録するだけです。
  • アクション
    「何をしますか?」を登録する機能です。
    例えば、「AddNewBeforeTitle」というアクションを作成し、そのアクションでは予め「スクリプト」として登録しておいた「「【最新】」を Title の前に付ける」という処理を紐づけておくとします。
    すると、このアクションを呼び出したら「【最新】を Title の前に付ける」が実行されます。

    アクション「AddNewBeforeTitle」を登録する画面は以下です。
    「Script」には「「【最新】」を Title の前に付ける」処理を登録したスクリプト「AddNewBeforeTitle」を紐づけておきます。

    アクション登録画面

「スクリプト」と「アクション」の紹介は以上です。
「スクリプト」と「アクション」を登録したら、あとはアクション「AddNewBeforeTitle」を呼び出すボタンを作って画面へ配置すれば出来上がりです。

ボタンの配置については、「【第2回】管理や検索がら~くらく!~ DAM を使ってみよう 基礎編(1)~」の「4. 検索機能を使って欲しい画像を入手しよう」にて、ファセット検索を設定する際に画面の表示を編集しましたが、それと同じ要領でアセット画面にボタンを配置できます。

アセット画面のヘッダー右側に、ボタン「AddNewBeforeTitle」を追加した例が以下です。

AddNewBeforeTitleボタンを追加した画面

上図のように、画像を複数選択した状態で追加した「AddNewBeforeTitle」ボタンをクリックすると、Title の頭に「【最新】」が付与されます。

AddNewBeforeTitleボタンクリック後の結果画面

ちょっと例が微妙だったかもしれませんが、こんな感じで一括処理ボタンが作れてしまいますよ~、という紹介でした。

Tips

こんなこともできる
  • ちなみに、画像を複数選択する際は PC のファイルを選択する時と同じように、マウスのドラッグ&ドロップ操作で選択した画像を囲うと選択ができます。
    直感的な操作も Sitecore Content Hub の魅力ですね!
導入からデジタルマーケティングのコンサルティングまでご支援 - Sitecore on Cloud 詳細はこちら


3. アセットが却下されたらメールを送ろう ~ トリガーの紹介 ~

ここまでで、Sitecore Content Hub は色々と業務に合わせてカスタマイズができそうであることが伝わりましたでしょうか。
もう一つ、Sitecore Content Hub で重要な機能である「トリガー」を紹介いたします。
え、もうお腹いっぱいですって?
これが最後ですのでもう少々ご辛抱を…。

  • トリガー
    「○○が起きたら□□する」というものを登録する機能です。
    例えば、

    • ○○が起きたら → アセットが却下されたら
    • □□する    → 特定のユーザーにメールを送る

    のように、トリガーを登録しておくことで、承認依頼のワークフローでアセットが却下されたときに特定の人にメールを送ることができるようになります。
    この処理を組むために、他にも「アクション」「スクリプト」が再登場するので、関係性を以下に整理します。

    トリガー、アクション、スクリプトの関連図

「トリガー」の紹介は以上です。
「トリガー」から「アクション」を通じて「スクリプト」を呼出し、ユーザーにメールをする処理(前述いたしましたが、C# でコーディングします)を実行させれば、アセットが却下されたときに特定の人にメールを送る、というシナリオができあがります。

「スクリプト」は前述の通り自作可能ですので、「トリガー」を使って Sitecore Content Hub を利用時に起きうる色々なイベント(アセットが登録された、価格が変更された、アセットが消された、など)をフックして、お好きな処理を実行することができそうですね。

いや~、ここまでで紹介させていただいた「API」「コンポーネント」「スクリプト」「アクション」「トリガー」を駆使すれば、様々な処理を自動化することができそうですよね。
是非皆さまも自動化の鬼になってみてはいかがでしょうか。

導入からデジタルマーケティングのコンサルティングまでご支援 - Sitecore on Cloud 詳細はこちら


さいごに

いかがでしたでしょうか。
「我々のこの業務は自動化できるな!」とイメージが湧いた方が少しでもおられましたら大変嬉しいです。
そして、Sitecore Content Hub を導入いただくことで制作効率が上がり、ランニングシューズのキャンペーンコストが抑えられることで、消費者に「値下げ」という形で還元されたら嬉しいですね!(切望)

以上、全4回に渡って DAM について、さらには DAM の機能を有する Sitecore Content Hub の実際の画面を用いて具体的に何ができちゃうのかをご紹介してきました。
今回紹介し切れなかった機能はまだまだたくさんあります!

「他にどんなことができるのだろう」「私たちの業務にはマッチするかな」などと疑問を持たれたり、「もうちょっと詳しい情報が知りたい!」などと思われた方は、お気軽に以下リンクよりお問い合わせください。

お問い合わせはこちら


約1ヵ月の連載でしたが、ここまで読んでくださり大変感謝申し上げます。
近々また別のお題でブログを掲載させていただく予定ですので、その時は「あ、また変なやつがしゃしゃり出てきたな」と失笑してあげてください。
それではまた!


関連ブログ記事

【第1回】DAM?なにそれ美味しそう ~ デジタルアセット管理システムとは? ~
【第2回】管理や検索がら~くらく!~ DAM を使ってみよう 基礎編(1)~
【第3回】かゆいところに手が届く!~ DAM を使ってみよう 基礎編(2)~

関連ページ

導入からデジタルマーケティングのコンサルティングまでご支援 - Sitecore on Cloud

【総合】お問い合わせ

製品・サービスに関するお問い合わせはお気軽にご相談ください

ピックアップ

セミナー情報
クラウドエンジニアブログ
clouXion
メールマガジン登録