統合
カスタム要素を使用したKenticoクラウドの拡張
By Ondrej Polesny
コンテンツをモデル化するとき、文字列、数値、オプションのリストなどの従来のタイプを超える特定の構造にデータを格納する必要性にしばしば遭遇します。典型的な例は国や州です。編集者に自由な抑制を与えたくない限り、これにフリーテキストフィールドを使用することはできません。では、どのようにしてシステムを拡張し、そのようなデータを保存できるでしょうか。
フリーテキストフィールドを使用しないのはなぜですか?編集者が毎回国名を書かなければならないという事実は別として、あなたは非構造化データの山、多くの重複、そしてタイプミスに終わるでしょう。世界のすべての国に州があるわけではないため、セレクターにはビジネスロジックも少し必要です。したがって、単純なドロップダウンも理想的なソリューションではありません。
カスタム要素
まず、カスタムという言葉は、それを実装する必要があるという意味ではないことを強調したいと思います。ダウンロード、コンパイル、インストールする必要はありません。いいえ、Kentico Cloud内でカスタム要素を使用するには、そのURLをコピーして貼り付けるだけです。しかし、後でそれについて説明します。まず、カスタム要素とは何かを説明しましょう。
カスタム要素は、インターネット上のどこかでホストされているスタンドアロンのWebアプリケーション(Webサイト)です。 Kentico Cloud内には実装されていませんが、iframeを使用してUIに統合されています。したがって、それは遠く離れたサーバー上に置くことができます(ただし、それほど遠くないことが望ましいですが、待ち時間は引き続き適用されます)。 Kentico Cloudは、JavaScriptを介してiframe内のカスタム要素と通信し、初期化データを提供し、データの変更をリッスンして、それらが永続化されていることを確認します。残りはカスタム要素が担当します。データを表示、処理、変換し、Kentico Cloudに戻す方法は、その実装内で調整されています。
では、その国と州のセレクターはどのように見えるでしょうか?これは、2つのドロップダウンセレクターがある空のページです。選択した国に州がある場合は、州を示す2番目のドロップダウンが表示されます。通信する親ウィンドウがないため、変更はまだ保持されません(KenticoCloud)。
既存のカスタム要素の使用に興味がある場合は、「カスタム要素の使用」セクションに進んでください。
カスタム要素の構築
国と州のセレクターは、国に関連するコンテンツアイテムのユースケースをカバーしています。それはあなたの会社のオフィス、あなたの国の大使館、またはあなたの好きな旅行代理店の旅行かもしれません。これらの項目はすべて、特定の国/州に関連しています。
データ構造が標準のデータ型を超える場合は、カスタム要素が必要になることがあります。 1つを探すのに最適な場所は、 GitHubリポジトリです。要件に一致するものが見つからない場合は、幸運です。あなたは1つを構築することのすべての楽しみを楽しむことができます:-)、それでちょうど国と州のセレクターの私の話に従ってください。
どうすれば始められますか?
すべてのカスタム要素はスタンドアロンアプリケーションであるため、お気に入りのプラットフォームを選択するのはあなた次第です。ただし、Kentico Cloudとの通信はJavaScriptを介して行われるため、Node.jsまたはお気に入りのJavaScriptフレームワークに基づく実装が最適です。
メモ帳だけでグリーンフィールドから始めることができますが、KenticoCloudスタイルなどのアセットの最小化などのあまり面白くないタスクを高速化するためのDevKitを用意しました。 DevKitはGitHubで入手でき、リポジトリのクローンを作成することから始めることができます。
そして不足しているノードモジュールのインストール:
新しいカスタム要素を作成するには、 `/ client / custom-elements`フォルダーに移動し、そのための新しいフォルダーを作成します。また、次の2つのファイルを作成する必要があります。
- index.pug
Pugでのカスタム要素のビュー。 - code.tsx
カスタム要素ロジックを含むJavaScriptコードファイル。
JSファイルにはTypeScript拡張子が付いているため、TSに慣れている場合はTSを使用できますが、標準のJavaScriptコードに固執することもできます。ファイルには、カスタム要素にちなんで名前を付ける必要があります。私の場合は、selector.tsxです。
どのフレームワークを使用する必要がありますか?
devkitは任意のJSフレームワークで動作するため、お気に入りのJSフレームワークまたはプレーンJSを自由に使用してください。最近はReact.jsをよく使っているので、それを使うことにしました。 devkitルートに2つの追加パッケージをインストールする必要がありました。
カスタム要素はKenticoCloudとどのように通信しますか?
すべてのコンポーネントは、単純なテキストフィールドであっても、KenticoCloudと通信する必要があります。コンテンツアイテムを開いたり更新したりするときにデータを交換して、編集者が正しい値を確認し、作業が継続されるようにする必要があります。コンポーネントは、すでに公開されているコンテンツアイテムの更新を防ぎ、正しくレンダリングするために必要なスペースをKenticoCloudに通知する必要もあります。
Kentico Cloud Custom Elements APIは、これらすべてのケースに対応するメソッドを提供します。 code.tsxでの国セレクターの私の(簡略化された)実装を見てください:
KenticoクラウドはCustomElement.Initを呼び出すことによって、エレメントと_contextオブジェクト内のすべてのデータを提供することで、カスタム要素を開始します。そのイベントを使用して、コンポーネントをデータ( element.value )で初期化し、コンポーネントがエディターに値の変更を許可するかどうかを説明するフラグ( element.disabled )を使用しました。
私のセレクターは、2つのデータフィールド( countryCodeとstateCode)を使用して、エディターの選択を保持します。したがって、element.valueオブジェクトはnull(値なしまたは新しいコンテンツアイテム)になるか、次のようになります。
最後のパラメーター( customElementApi )を使用すると、ReactコンポーネントがKentico Cloudのデータを永続化するCustom Element APIのメソッドsetValue()を呼び出すことができます。私のセレクターは、ユーザーが国や州を変更するたびにそれを呼び出して、選択が維持されるようにします。
セレクターは現在、すべてのユースケースで同じ高さを使用しているため、メソッドsetHeight()を使用して250pxに設定されています。
使用可能なメソッドの完全なリストについては、KenticoCloudドキュメントのAPIリファレンスを確認してください。
カスタム要素の構築と展開
実装が終了したら、最初にビールを1〜2杯用意する必要があります。その後、それを構築して展開し、全世界に公開します。そのための最初のステップは、カスタム要素を作成することです。
これらのフラグにより、カスタム要素がコンパイルされ、スタイルとJavaScriptが縮小され、単一のHTMLファイル内にインライン化されます。プロセスが完了したら、 \ built \ custom-elements \ {elementname}を確認してください。 Kenticoアイコンでindex.htmlをとフォントファイル(WOFF) -あなたはそこに2つのファイルが表示されるはずです。
カスタム要素は単一のHTMLファイルで表されるため、ほぼすべての場所(Heroku、Surge、ホスティングスペースなど)でホストできます。ただし、すでにいくつかのカスタム要素をホストしており、他の開発者と共有するのに最適な場所であるため、Kenticoカスタム要素サンプルリポジトリのGitHubでホストすることにしました。このようにして、誰でも私のセレクターをすばやく見つけて、プロジェクト内で使用できます。リポジトリもGitHubページを使用しているため、そこでホストされているすべての要素をURLを使用して直接参照できます。
カスタム要素の使用
そのため、カスタム要素がデプロイされ、オンラインでアクセスできます(URLがあります)。かっこいい、それは難しい部分でした。それでは、KenticoCloudでそのカスタム要素を使用しましょう。
コンテンツタイプ定義を開くと、汎用のカスタム要素をフィールドのリストにドラッグアンドドロップできます。新しいフィールドの構成には、カスタム要素のURLのテキストボックスがあります。私の国と州のセレクターはGitHubでホストされているため、URLは次のようになります。
Kentico Cloudとカスタム要素間の安全な通信を確保するには、カスタム要素に常にHTTPS経由でアクセスできる必要があることに注意してください。
それでおしまい。他の手順は必要ありません。先に進み、更新されたコンテンツタイプに基づいてコンテンツアイテムを開き、試してみてください。
同様に、日々増え続けるリストのカスタム要素を活用して、特定のデータ構造を処理する際の優れたユーザーエクスペリエンスを編集者に提供することもできます。
カスタム要素で$ 150を取得
コンテンツを操作する場合、国と州の選択はかなり一般的です。では、すべての開発者が独自のカスタムセレクターを作成することは理にかなっていますか?おそらくそうではありません。すでに作成しているので、他の誰もが簡単に使用できます。カスタム要素構成内でそのURLを参照するだけです。
開発者が互いに助け合い、カスタム要素を共有することで仲間の開発者の時間を大幅に節約できるので、私たちはそれが大好きです。そして、私たちも遊ぶのが好きです。そのため、2019年3月に、カスタム要素の寄稿者に報酬を与えるコンテストを開催しました。ルールは単純です。カスタム要素を作成し、GitHubのサンプルリポジトリに提供します。 150ドルのAmazonバウチャーでトップ10のベストカスタム要素に報酬を与えます!これで、Amazon Echo、Apple Pencil、または電話用の20x USBケーブルを入手できます(これにより、USBケーブルの消費量が1年間カバーされます)。
詳細を確認して入力するには、 www.kenticocloud.com / blog / custom-elements-contestにアクセスしてください。
*更新:コンテストの締め切りは4月14日に延期されました*