1-1-7. Kontentでテーブルを管理する

最終更新日: 2021.04.08

テーブルは、人々が複雑な情報をよりよく理解するのに役立ちます。それらを使用して、映画のリスト、製品の機能、地域のオフィスなどを明確に提示できます。Kontentでは、構造化コンテンツを使用してこの種の情報をモデル化し、アプリ全体で再利用できます。このようにして、テーブル、構造化リスト、情報タイルなど、好きなようにユーザーに表示できます。

データをモデル化し、どこでも好きなように使える

製品仕様のカタログ、映画、地域のオフィスなど、データが大きくて複雑な場合、Kontentでデータをモデル化して、一度挿入すれば何度でも利用できる方法が必要です。これを実現するには、コンテンツのモデルを作成し、そのモデルに基づいてコンテンツを構造化する必要があります。

構造化コンテンツの良いところは、アプリ内で好きなようにコンテンツを表示できることです。例えば、製品や映画、オフィスなどは、デスクトップブラウザではWebページ上のテーブルとして、モバイルアプリではユーザーが左右にスワイプできるタイルとして表示することができます。

例：映画のカタログ

例えば、映画のカタログがあるとします。このカタログの各映画には、名前、公開年、公開国、リンクなどの詳細が記載されています。

Kontentでは、リッチテキストのコンポーネントを使ってこの構造を作ることができます。これは、各映画のコンポーネントをリッチテキストに入れるというものです。映画の入ったリッチテキストが、カタログ全体になります。

Kontentでこのようなムービーカタログを作成するには、2つのコンテンツタイプが必要です。1つはムービーのカタログ全体用、もう1つは個々のムービー用です。

ステップ1：ムービーコンテンツタイプの定義

まず、個々の映画用のコンテンツタイプを作成し、名前をMovieとします。このコンテンツタイプに、カタログ内の映画に関する各情報のコンテンツ要素を追加します。映画名、制作国、リンクなどのテキスト要素、公開年の数字要素などです。また、要素にガイドラインを追加して、その使い方を明確にします。

このコンテンツタイプを使用して、カタログ内の各映画のコンポーネントを作成します。

ステップ2：カタログコンテンツタイプの定義

Catalogという2つ目のコンテンツタイプを作成し、そこにリッチテキスト要素を1つ追加します。このリッチテキストにムービーをコンポーネントとして追加していきます。

リッチテキストにガイドラインを追加して、コンテンツ制作者が他のコンテンツタイプのコンポーネントを混在させないようにします。リッチテキストの対象をMovieコンテンツタイプに限定することもできます。

カタログコンテンツタイプはユニバーサル

カタログタイプは、映画以外にも使えます。例えば、製品やオフィス、ドライバーなどをカタログ化することができます。そのためには、Catalog type limitationsで適切なコンテンツタイプを許可します。

ステップ3：カタログを作成し、データを詰める

今度は両方のコンテンツタイプを使って、カタログを作成し、ムービーを追加します。

カタログを配置したいコンテンツアイテムに行きます。
リッチテキストの中に、カタログコンテンツタイプをベースにしたコンポーネントを追加します。
このコンポーネントに、ムービータイプのネストされたコンポーネントとして各ムービーを追加します。

ムービーを追加していくと、以下のような表示になります。

上の画像のコンポーネントをアプリのテーブルとして表示すると、次のようになります。

Name	Year	Country	Link
The Shawshank Redemption	1994	USA	IMDB
From Dusk Till Dawn	1996	USA	IMDB

ご覧の通り、各コンポーネントはテーブルの1行を表しています。行の配置を変えたり、並べ替えたりしたい場合は、コンポーネントを掴んで好きな場所に移動させます。

コンポーネントは、このようにテーブルとして表示することもできますが、構造化されたリストや、ユーザーが左右にスワイプできるタイルなど、さまざまな方法で表示することができます。

カタログを再利用する

映画の一部またはカタログ全体を他の場所で再利用する場合は、コンポーネントを個別のコンテンツアイテムに変換できます。

カタログを他の場所で再利用する必要があることが最初からわかっている場合は、最初からコンポーネントの代わりにコンテンツアイテムを作成することもできます。

シンプルなデータにはシンプルな方法を

伝えたい情報がシンプルで、表にするのが最適な場合は、Kontentに組み込まれたテーブルを使うことができます。テーブルは通常のテーブルと同じで、テキストをフォーマットしたり、リンクを追加したり、画像を挿入することもできます。例えば、オフィスの営業時間を表示したい場合、ビルトインテーブルがその役割を果たします。

この方法は、Kontentにすぐに搭載されており、必要なのはリッチテキストエディタだけで、コンテンツモデリングは必要ありません。

一度テーブルを作成すると、データをソートしたり、別の場所でテーブルを再利用したりするために行を移動する簡単な方法がないことに注意してください。3〜6行の表であれば問題ないかもしれませんが、もう少し大きな表になると管理が大変になります。

スプレッドシートから表を貼り付ける

Microsoft Excelなどのスプレッドシートにテーブルがある場合は、そこからテーブルをコピーして、Kontentのリッチテキストエディタにペーストすることもできます。

カスタム要素を使ってテーブルを管理する

カスタム要素を使うと、TinyMCEなどのWYSIWYG HTMLエディターをKontentに統合することができます。これは、コンテンツ制作者が他のテキストプロセッサやスプレッドシートでテーブルを管理することに慣れている場合に便利です。Kontentで同様の経験を提供したい場合は、開発チームに既存のカスタム要素の1つをセットアップするか、新しい要素を作成するように依頼することができます。弊社では、TinyMCE、CKEditor、Summernote用のカスタムエレメントを提供しています。

WYSIWYGエディタには注意が必要です。

これらのエディタでは、コンテンツの視覚的な側面を定義することができます。便利そうに聞こえるかもしれませんが、視覚的な矛盾が生じたり、アプリが壊れたりする可能性があります。

別の選択肢としては、開発チームに、例えばGoogle Driveからスプレッドシートのドキュメントを選択してKontentのコンテンツアイテムに挿入できるようなカスタムエレメントの作成を依頼することが考えられます。また、カスタムエレメントのサンプルギャラリーでは、他にどんな使い方ができるのかを確認することができます。

次のステップ

ご覧のように、Kontentでテーブルを扱うにはいくつかの方法があります。複雑な情報をアプリで表示する方法を完全に自由にしたい場合や、データの再配置や再利用を可能にしたい場合は、リッチテキストのコンポーネントを使用してモデル化します。

テーブルが数行、数列以上でない場合は、リッチテキストに内蔵されているテーブルエディタがニーズを満たすかもしれません。また、テーブル用のカスタム要素を使用することもできますが、開発チームによる作業が必要となり、一般的にメリットよりもデメリットの方が多くなります。

コンテンツやコンテンツモデルの作成については、他のチュートリアルをご覧ください。

コンテンツグループを使ってコンテンツタイプを整理し、コンテンツ制作者の使い勝手を向上させる。
複数のコンテンツタイプで必要となる要素のコレクションを再利用する。
コンポーネントを使用して、ツイートや体験談でテキストを豊かにする。
ガイドラインを利用してチームに有用な情報を与え、より効率的なコンテンツ制作を行う。

原文：https://docs.kontent.ai/tutorials/manage-kontent/content-modeling/manage-tables

Document