Blog

Delivery APIはRESTエンドポイントですが、単純なRESTAPI以上のものが必要な場合があります。サーバー側またはクライアント側のJavaScriptアプリケーションを開発している場合は、Kentico Cloud Delivery TypeScriptSDKが役立ちます。

なぜTypeScriptなのか？

TypeScriptに慣れていない人にとっては、Microsoftが運営するオープンソースプロジェクトであり、プレーンJavaScriptでコンパイルされるJavaScriptのスーパーセットです。プロジェクトをよりスケーラブルにし、IDE（Microsoft独自のVisual Studio Codeなど）がコード補完や「定義に移動」などのJavaScriptの生産性を向上できるようにするため、多くの重要なプロジェクト（オープンソースまたはプロプライエタリ）で主流のサポートを獲得しています。 」機能。 TypeScript SDKを使用すると、これらの利点を活用してプロジェクトをより迅速に開発できます。

Kentico Cloud TypeScript SDKは何を提供しますか？

Kentico Cloud TypeScript SDKは、次の3つのコア機能を提供することにより、DeliveryAPIをクリーンで簡単に使用できるようにするツールを提供します。

• コアDeliveryオブジェクトの強く型付けされた基本モデル
• クエリを簡単にする拡張可能なDeliveryクライアントAPI
• URLスラッグとモジュラーコンテンツを解決するためのカスタマイズ可能なリゾルバー

これらのSDK機能に加えて、KenticoCloudプロジェクトの強く型付けされたモデルを簡単かつ自動的に生成するのに役立つコードジェネレーターも利用できます。これにより、コンテンツタイプのモデルを構築するための深刻な時間を節約できます。 SDKとコードジェネレーターの両方がnpmパッケージとして利用できます。

強く型付けされた基本モデル

SDKで提供される基本モデルを使用すると、すばやく移動できます。これらは、基本コンテンツアイテム、システムプロパティ、フィールドタイプ（テキストフィールド、複数選択フィールド、日付/時刻フィールドなど）などの基本をカバーしています。これらにより、コンテンツタイプモデルを簡単に構築できます。前述のように、 Kentico Cloudモデルジェネレータユーティリティを使用して、モデルを自動的に生成できます。たとえば、単純なブログコンテンツアイテムは次のようになります。

 import { ContentItem, Fields, IContentItem } from 'kentico-cloud-delivery-typescript-sdk';/** * This class was generated by 'kentico-cloud-model-generator-utility' module. * You can substitute instances of 'IContentItem' with a model defined in other class * to get access to all properties. This is applicable only if you know what item type the field contains. */export class Blog extends ContentItem { public title: Fields.TextField; public publicationDate: Fields.DateTimeField; public teaserImage: Fields.AssetsField; public summary: Fields.RichTextField; public bodyCopy: Fields.RichTextField; public metaKeywords: Fields.TextField; public metaDescription: Fields.TextField; constructor(){ super({ propertyResolver: ((fieldName: string) => { if (fieldName === 'publication_date'){ return 'publicationDate'; } if (fieldName === 'teaser_image'){ return 'teaserImage'; } if (fieldName === 'body_copy'){ return 'bodyCopy'; } if (fieldName === 'meta_keywords'){ return 'metaKeywords'; } if (fieldName === 'meta_description'){ return 'metaDescription'; } }) }) } }

モデルの作成の詳細については、GitHubのReadMeを参照してください。

拡張可能なクライアントAPI

TypeScript SDKは、DeliveryAPIの堅牢な実装も提供します。以下をサポートする構成可能な配信クライアントを提供します。

• オブザーバブルまたはプロミスパターンを使用してデータを取得する
• コンテンツタイプ、深さ、制限、順序などのクエリパラメータを使用します。
• 等しい、より大きい、範囲などのフィルターを使用して、要素値でコンテンツアイテムをフィルタリングします。
• 結果の並べ替え
• ローカライズされたアイテムの取得（複数の言語を使用するプロジェクトの場合）

同じブログ投稿モデルを使用すると、すべてのブログ投稿を取得するコードは次のようになります。

KenticoCloudClient().items() .type('blog') .orderParameter('elements.publication_date', SortOrder.desc) .get() .subscribe(response => { console.log(response.items); });

カスタマイズ可能なリゾルバ

ニーズに合わせてカスタマイズできる3つの主要なリゾルバーがあります。 1つはプロパティリゾルバーです。これを使用すると、KenticoCloudのフィールド名をJavaScriptクラスのプロパティにマッピングできます。これは、フィールドをKenticoCloud名以外にマップする必要がある場合に重要です。たとえば、KenticoCloudの「body_copy」はJavaScriptの「bodyCopy」になります。コードジェネレーターは、 プロパティリゾルバーを使用して、そのパターンに一致する名前を自動的にマップします。 2番目のリゾルバーはURLスラッグを解決するためのもので、コンテンツタイプを使用可能なURLに変換する方法を定義できます。これは、コンテンツタイプに対してグローバルに実行することも、クエリ時に指定することもできます。最後のメインリゾルバーはモジュラーコンテンツリゾルバーです。これにより、リッチテキストフィールドでモジュラーコンテンツを簡単に使用できます。 URLスラッグリゾルバーと同様に、これはグローバルに、またはクエリごとに実行できます。

どうすれば使用できますか？

これはおそらく壊れたレコードのように聞こえますが、TypeScriptに既に精通している場合は、Github上のKentico Cloud TypeScript SDKのReadMeに、その使用方法に関する詳細情報が記載されています。 TypeScriptに慣れていない場合は、 TypeScriptの5分間のガイドを確認して基本を理解してから、TypeScriptSDKの基礎を示すために構築されたこの単純なJavaScriptアプリケーションRichardSustekをご覧ください。この簡単なサンプルでは、Browserifyを使用してTypeScriptをプレーンJavaScriptにコンパイルします。 Kentico Cloud TypeScriptSDKの基本を示すために必要な基本事項のみが含まれています。このアプローチにより、SDKを他のフレームワークと統合する方法ではなく、SDKに集中することができます。

リチャードはまた、2番目のより複雑な例を作成しました。この例は、単純なAngularアプリでのKentico Cloud TypeScriptSDKの使用法を示しています。 Angularに精通している場合は、ここから始めるとよいでしょう。

Reactがあなたのスタイルであるなら、お楽しみに！ TypeScriptSDKを使用してReact上に構築されたサンプルサイトをまとめています。これは、KenticoCloudに最初にサインアップしたときに取得するデフォルトのコンテンツを使用した完全な例を示すように設計されています。

次は何ですか？

Kentico Cloud TypeScript SDKは、Kentico Cloudの更新とコミュニティの方向性、フィードバック、プルリクエストに基づいて進化し続けます。 Kentico Cloudチームは、他のプログラミング言語用のSDKの追加も検討しています。誰もが利用できるようにしたいアイデアやSDKを開発した場合は、フォーラムでお知らせください。それまでの間、npmから最新バージョンのSDKとジェネレータユーティリティを入手して、独自のプロジェクトを開始してみませんか。