ヘッドレスCMS = Watson Contents Hubを使ってみた～ 1.オーサリング編

当記事は以下の３本の連続記事の２本目です。

1. Watson Content Hub = クラウド上のヘッドレスCMS + Watson + CDN
2. ヘッドレスCMS = Watson Contents Hubを使ってみた～ 1.オーサリング編
3. ヘッドレスCMS = Watson Contents Hubを使ってみた～ 2.アプリ開発編

• 執筆時点(2017/06)での情報です(WCHは機能追加がどんどん行われているので..)

はじめに

当記事では左側のオーサリング環境をUIを中心にご紹介します。

用語と概念

まずはWCHの用語や概念をご説明しますね。（この辺がわからないとハンズオンとかやっても、「で結局何だったんだっけ？」となってしまう恐れがあるので）

※Knowledge Centerでの該当箇所は「概念」ですのでそちらも併読いただくとよろしいかと。

コンテンツとアセットの違い

普通は「コンテンツ」というとWebページに記述する実際のイメージ画像ファイルであったり動画ファイルを意味すると思いますが、WCHでは「コンテンツ」とは「一連の物理ファイルやテキストを組み合わせた一定の構造」のことを意味します。ってもわけがわからんので具体的にお示ししますと、たとえば下記がWCHでの「コンテンツ」です。（WCHではコンテンツを構成する個々の物理ファイルは「アセット」と呼びます。つまりWCHの「コンテンツ」は複数の「アセット」から構成されます）

上記のコンテンツ(正確には「コンテンツ・モデル」）の定義例では以下のような「構造」を定義しています。(なお下記の名前は任意であり、hogeでもなんでもいいです）

• 先頭に「Title」という名前のテキスト情報があるよ
• その次は「Summary」という名前のテキスト情報だよ
  ..
• 5番目に「Image」という名前でイメージ画像を配置するよ
• 6番目は「Publish Date」という名前で日付データを置くよ
• 最後は「Category」という名前でカテゴリーのデータを置くよ

今は、WCHではこういう「構造」のことを「コンテンツ」と呼ぶんだな、ファイルは「アセット」と呼ぶんだな、と思っておいてください。（「構造」というと難しければ「配置」「並び順」でもいいです。なぜ「構造」があるとうれしいか、はあとでご説明します。）

全体図

次は用語や概念の全体図です（公式文書ではなく、筆者の理解です）

まず大きくは①コンテンツ・モデルと②コンテンツ・アイテム（こっちを単に「コンテンツ」と呼ぶこともあります）の大きな区分けがあります。コンテンツ・モデルは「モデル」との呼称の通り、「雛形」「テンプレート」です。これらの「テンプレート」はコンテンツの構造や属性を定義するもので、再利用可能です。前述の「コンテンツ」の例は正確には「コンテンツ・タイプ」なのですが、「テンプレート」なので各要素の具体的なテキストの文言やイメージ画像のファイル名などは何も定義していません。WCHでは先に「テンプレート」としての「コンテンツ・タイプ」を作成してから、それをベースに実装としての「コンテンツ・アイテム」を作成します。実装である「コンテンツ・アイテム」では、テンプレートの各アセットにリポジトリーからテキストやイメージ画像・動画等のファイルを選択し、割り当てていきます。
個々のイメージ画像などのアセットは、コンテンツ・アイテムとは独立してリポジトリー内に格納されています。つまり「コンテンツ」とは「アセット」の構造（配置）を決めるテンプレートである、とも言えます。

個々の用語・概念の簡単なご説明

その他、用語・概念を簡単にまとめます

用語・概念	意味
コンテンツ・タイプ	様々なアセットの「構造」のテンプレート・雛形
イメージ・プロファイル	イメージ画像に関する定義 同一の画像ファイルをベースにWeb用、モバイル用など様々なサイズの画像を生成できます
イメージ・レンディション	Web用、モバイル用など用途別の画像サイズ定義
分類法(Taxonomy)	あとでAPIでコンテンツやアセットを絞り込む際に使える分類・区分の定義。 (たとえば Fashion, Travel, Lifestyleなどのお好きな分類) この分類をアセットやコンテンツに割り当てると、 「Fashionカテゴリーに属するイメージのみを下さい」など、 アプリケーションでの絞り込み(フィルタリング）が可能になります。 (利用は必須ではありません）
コンテンツ・アイテム	コンテンツ・タイプをベースに作られる実際のコンテンツ。 デリバリー環境へのパブリッシュはこの単位で行います。（個々のアセット毎ではありません)
アセット	コンテンツ・アイテムを構成する個々の物理ファイル（やテキスト）。 当然ですがアセットは複数のコンテンツ・アイテムで再利用可能です。

コンテンツの構造は何の役に立つのか？

少し先走りになりますが、コンテンツの構造を定義することの意味をご説明します。まずは「構造があることで、多様なデバイスやチャネル間でのサイトのプレゼンテーション表現を共通的に組み立てることができる」＝「統一された顧客体験を簡単に提供することができる」ことがあります。分かりやすく言えば「１つのコンテンツからWebでもモバイルでも、同じロジックで同じUI表現を生成できると、作る方も楽だし、お客様から見ても美しいよね！」ということです。

ここで「UI表現を生成」と書きましたが、WCHの提供するAPIのレスポンスはコンテンツのメタデータをJSONで表現したものにすぎません。WCHを利用する側のアプリケーションは、このJSONデータ構造をJQueryやAngular,Handlebarsなど任意のUIフレームワークやテンプレート・エンジンを使って解釈・パースし、UIを動的に生成するのがWCHでの基本的な実装方法になります。

この点をもうすこし具体的にご説明しますね。たとえば下記のような構造を持つコンテンツ・タイプがあります。（商品説明とイメージ画像が２つ）

このコンテンツ・タイプの定義を元に具体的なコンテンツ・アイテムを作成してAPIで当該コンテンツの情報を要求すると、構造を含むメタデータのJSONレスポンスが戻りますので、それをJava ScriptでHTMLとして組み立てます。同じメタデータを使って（使うUIフレームワークは別かも知れませんが）モバイル・デバイス向けにHTMLを生成するのも容易ですよね。

やってみる

ってことで説明を読むのはウンザリしてきたかと思いますので、WCHでのオーサリングの入門編をやってみましょう。題材としては、シンプルな方がいいので上の図にある「ランニング」のコンテンツを定義します。

オーサリングUIへのアクセス

まずはWatson Contents Hubの製品ページからトライアルに申し込んでください。

• IBMidを未取得の場合は同時に取得できます
• IBMidをお持ちの方はトライアルにサインアップすればいいだけですので、「Already have an IBMid?」の方をクリック

以降の手続きの詳細は割愛しますが、トライアルにサインアップできたらこのログイン画面で「Launch」ボタン

サインインしていなければ、先程取得したIBMidでサインインします。

サインインが成功すると以下のトップ画面に遷移します。

もし画面が英語になっている場合はブラウザーの言語設定を日本語にしてください。あと「ハブセットアップ」－「一般設定」で日本語を設定しておきましょう。

ついでに今だけ「セキュリティ」タブで「クロス・オリジン・リソース共有のトラステッド・ドメインに「*(アスタリスク)」を追加して、すべてのクライアントからの要求を受け入れるようにしておきます。これをするとブラウザー上のJavaScriptから直接APIを叩くことができるようになります。（セキュリティ的には問題がありますので本番ではきちんと自社ドメインのみ登録しましょう）

これで準備ができました。

ご注意: 以下の手順では「Running」とか「Title」「Image01」などの名前をセットしていますが、これは変更せずそのまま入力してください。後続のプレゼンテーション編では今回の定義を使いますが、そのサンプルコードがこれらの名前を使っているためです。

イメージ・プロファイルの定義

まずはイメージ・プロファイルです。イメージ・プロファイルはイメージ画像のサイズや表示範囲を定義するものです。個別の定義を「レディション」と呼びます。１つのイメージ・プロファイルにレンディションは複数定義できます。

左上のボタンでメニューを展開し「コンテンツ・モデル」－「イメージ・プロファイル」を選択。右上の「イメージ・プロファイルの作成」ボタンをクリック。

まずは標準のイメージ・サイズを定義します。
①ラベルの名前として「Standard」をセット（名前は何でもいいのですが）
②幅 800 高さ 600をセット
③「レンディションの追加」ボタン

次は横長のバナーのイメージ・サイズを定義します。

①「Standard」という名前のレンディションが追加されますした
②ラベルの名前として「Banner」をセット
③幅 800 高さ 200をセット
④「レンディションの追加」ボタン

最終的に以下のイメージ・プロファイルができましたので、右上の「閉じる」ボタン

コンテンツタイプの定義

次はテキスト１つとイメージ２つから成るコンテンツタイプの構造を定義します。

左上のボタンでメニューを展開し「コンテンツ・モデル」－「コンテンツ・タイプ」を選択。右上の「コンテンツ・タイプの作成」ボタンをクリック。

まずはタイトルのテキスト欄です。

①コンテンツ・タイプの名前を「Running」にセット
②右側のパレットを（表示されていなければ）表示
③「テキスト」のアイコンをクリック
④パネルでラベル「Title」をセット（キーは自動的にセットされます）
⑤「適用」ボタン

次は一つ目の画像です。
①パレットから「イメージ」のアイコンをクリック
②パネルでラベル「Image01」をセット（キーは自動的にセットされます）

①パネルを閉じず、「イメージ・プロファイル」タブ
②イメージ・プロファイルのリストボックスから直前に定義した「Running」を選択（結果、２つのレンディションが表示されます）
③「適用」ボタン

今とまったく同じ操作で2つ目のイメージ画像を定義します。（名前のみImage02にしてください）
結果、以下のような定義ができたら、右上の「閉じる」ボタン

分類法の定義

分類法（タクソノミー）も同様の手順で定義できますが、必須ではありませんので、ご説明をシンプルにするために割愛します。要は、ここでSports, Travel, Entertainmentなどお好きなカテゴリーを登録しておくと、あとでAPIを介したアセットのフィルタリングをしたい時に条件として使えるのです。

コンテンツの作成

ここまでで「テンプレート」としてのモデルの定義が終わりました。ではこのモデル定義から実際のコンテンツを定義しましょう。

①「コンテンツ」－「マイコンテンツおよびアセット」
②右上の「作成」で今作ったコンテンツ・モデル「Running」を選択

テキストとイメージ画像の登録

①コンテンツの名前を「Running Item」とセット
② Titleとして「ランニングって最高！」とセット
③「イメージのドロップ」で「アップロード」を選択して、お手持ちのイメージを選択してアップロードしてください。（何でもいいです）

① アップロードが完了すると以下のように画像が表示されます。
② イメージレンディション毎にイメージが生成されています。
③ イメージのタグを確認しましょう。通知の「要約の表示」をクリックします。

なお、②で画像の抽出位置がずれていたり、もっと拡大したい、など調整したい場合はレンディションの鉛筆アイコンをクリックするとエディターが開くので調整できます。

Watsonが自動的にタグを付けているのが確認できますね。また私の場合は画像自体に元々メタデータが付いていたので、それもタグとして認識しています。いずれにせよ、必要なら手で追加できますし、不要・不適なものは削除できます。

次の記事で使いますので「タグの追加」からタグ「jogging」を追加しておいてください。（画像はジョギングのものでなくてもかまいません）

まったく同じ手順で２つめのイメージも登録してください。（タグ「jogging」も追加しておいてください）

結果、以下のように定義できたら、右上の「準備完了」ボタン。この操作によりコンテンツが確定し、CDNへのパブリッシュが開始されます。

※画面の都合で１ページを折り返して表示しています

ご参考) イメージ・ピッカー

今回は新規にイメージをアップロードしたので使いませんでしたが、イメージを再利用する場合は「検索」をクリックすると下記のように「イメージ・ピッカー」が起動します。使いたいイメージをクリックすればコンテンツに反映します。

ＣＤＮへのパブリッシュの確認

①ステータスが「ドラフト」から「準備完了」になります
②最下の「API情報」ボタンをおすとパネルが開きます
③「配信URL」の右のコピーボタンを押してURLをコピーします
④（ご参考までにJSONをそのままみることもできます）

コピーしたURLをブラウザーのアドレス・バーに貼り付けてリロードします。結果、GETでREST APIが発行され、JSONレスポンスが戻ってくればパブリッシュは完了しています。

CDNへのパブリッシュはすぐ終わりますが、過去の経験では時間がかかることもありました。HTTPのRCが404(見つからない）の場合は、CDN側の伝搬が完了するまでしばらくお待ちください。( あまり時間がかかるようであれば、サポートやForumにて問い合わせるとよいかと思います）

ご参考までに、上記ブラウザーによる「配信URL」の呼び出しは下図の①の部分を叩いていることになります。「オーサリングURL」の呼び出しは②の部分になりますが、こちらは一旦認証を経ないとアクセスできませんので今は扱いません。

以上、お疲れ様でした！
これでオーサリングが完了しましたので、次の記事では実際にAPIを呼び出すプレゼンテーション側のアプリケーションのほうをご紹介しようと思います。