コンポーネントにHTMLとJavaScriptを追加する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
Component builderは、ウェブサイト上にHTMLやJavaScriptの要素をリアルタイムでレンダリングできる柔軟なツールです。
JavaScriptファイルをHTMLブロックやweb componentと一緒にリンクできます。例えば、以下のユースケースがあります:
-
Google Analyticsの追跡スニペットを追加します。
-
アニメーションを動かすためのカスタムコードの作成。
-
レンダリングされたHTMLを動的に操作すること。
コンポーネントにJavaScriptを含めるオプションは、スクリプトファイルがページ上に存在し、一度だけ読み込まれることを保証する以外に追加の機能は提供しません。
JavaScriptで表示要素をより正確に制御するには、HTML要素インスタンスを参照し、イベントを受信し操作するweb componentを使いましょう。
また、リッチテキストを含むデータソースから動的なデータを追加したい場合には、HTMLブロックを使うこともできます。HTMLブロックでは、テキストに含まれる段落や見出し、その他のHTML要素とともにマッピングされたデータを表示できます。これは、Paragraphや見出し要素を追加した場合に、そのテキストがリッチテキストプロパティにマッピングされる場合とは異なります。後者の場合、データマッピングシステムは他の段落、見出し、リスト項目など、データマップHTMLからすべての構造的要素を削除しますが、リンクや書式はそのまま残します。これは元の要素が段落や見出しのままであるように行われます。
HTMLブロック要素を追加してください
HTMLブロックの内容は直接編集や操作にはアクセスできませんが、スタイルガイドが提供するスタイルを引き継ぎます。HTML blocksを使って、内容内に <script> タグを付けてJavaScript関数を呼び出すことができます。
コンポーネントにHTMLを追加する:
-
Componentビルダーで、HTMLブロックを追加したいコンポーネントを開きます。
-
外部コンポーネントを追加したいセクションまたは要素のコンテキストバーで、Add element > HTML blockをクリックします。
-
コンテキストバーで既存の要素Append insideクリックするか、クリックしてドラッグするとコンポーネントセクションのグリッド上にコンテナを作成できます。
-
ブロック内容を設定するには、右側のパネルのContentセクションでHTML Contentをクリックしてください。
-
希望する設定をクリックしてください:
-
None - コードは追加されません。このオプションを使って、このコンポーネントに以前に適用された設定をすべて消去できます。
-
Static - コンポーネントに含めたいHTMLを入力します。
-
Mapped - HTMLブロックを埋めるために使用する データソース とプロパティを選択します。
-
埋め込み要素のレイアウトやアラインメントをさらにスタイリングや編集が可能です。
JavaScriptコードを追加してください
JavaScriptをweb componentやHTMLブロックに追加するには、そのコンポーネントのコードが以下のいずれかの要件を満たす必要があります。
-
JavaScriptファイルはオンラインでホストされており、コンポーネント固有のURLを使ってアクセス可能です。
-
JavaScriptコードは 動的データソースに含まれています。
コンポーネントにJavaScriptコードを追加するには:
-
Component builderでコンポーネントを開き、JavaScriptコードを追加したいコンポーネント要素をクリックします。
-
ブロック内容を設定するには、右側のパネルのContentセクションでJavaScript codeをクリックしてください。
-
希望する設定をクリックしてください:
-
None - コードは追加されません。このオプションを使って、このコンポーネントに以前に適用された設定をすべて消去できます。
-
From URL- JavaScriptがホストされているURLを入力し、Back
をクリックして最初の右側設定ペインに戻る。 -
Mapped - Data sourceドロップダウンメニューで、含めたいJavaScriptのデータソース を選択します。次に、含めたいJavaScriptコードがあるデータパスをクリックし、Completeをクリックします。
-
JavaScriptコードはコンポーネント要素に追加されます。