👋
Wixで埋め込みHTMLに動的にURLを渡す方法
はじめに
WixでWebサイトを作成する際、HTMLコンポーネントに動的にURLを渡したいケースがあります。例えば：
- 外部サービスの埋め込みiframeのURLを動的に変更したい
- ユーザーの入力に基づいてリンク先を変更したい
- データベースの値に応じてコンテンツを切り替えたい
この記事では、WixのhtmlComponentを使用して動的にURLを渡す方法を解説します。
前提知識
- Wixのコードパネルの基本的な使い方
- JavaScriptの基礎知識
- HTMLコンポーネントの使用方法
実装手順
1. HTMLコンポーネントの配置
まず、Wixエディタで以下の手順を実行します：
- 「追加」メニューから「埋め込みHTML」を選択
- ページ上の任意の位置にドラッグ&ドロップ
- コンポーネントに識別用のIDを設定（例：
#myHTML）
2. コードの実装
ページ読み込み時に実行したいときはveloに以下のコードを実装する。
$w.onReady(function () {
let SendUrl = 'url'
$w("#myHTML").postMessage(SendUrl);
});
埋め込みhtml側には以下のコードを実装する。
<script type="module">
//メッセージの受け取り設定
let ResUrl = '';
window.addEventListener("message", function(event) {
// セキュリティ対策として、必要に応じて event.origin をチェックしてください
if (event.data && typeof event.data === "string") {
ResUrl = event.data;
//受信したUrlのログ
console.log("ResUrl:", ResUrl);
}
});
</script>
3. データの連携
URLを動的に生成するためのデータソースとして、以下のような方法が使えます：
- Wixのデータベース（Collections）からの値取得
- URLパラメータからの値取得
- ユーザー入力からの値取得
例えば、表示するページのURLパラメータを元にデータベースから値を取得する場合：
import wixData from 'wix-data'
import wixLocation from 'wix-location'
$w.onReady(function () {
// 現在のページのURLを取得
let CurrentUrl = wixLocation.url;
//共通部分のurlを削除し、データベースに格納されているurlに形を合わせる
CurrentUrl = CurrentUrl.replace('共通部分のurl','');
// 例: コレクション "MyCollection" の "category" フィールドIDが "FieldId" のアイテムを検索
wixData.query("MyCollection")
.eq("FieldID", CurrentUrl)
.find()
.then((results) => {
if (results.items.length > 0) {
// 一致したレコードの最初の項目から フィールドID"TargetUrl" の値を取得
const SendUrl = results.items[0].TargetUrl;
// HTML埋め込み要素(Myhtml)に値を渡す
$w("#Myhtml").postMessage(SendUrl);
console.log(SendUrl;
} else {
console.log("一致するレコードが見つかりませんでした。");
}
})
.catch((error) => {
console.error("クエリ実行中にエラーが発生しました:", error);
});
});
注意点
-
セキュリティ
- 動的に生成するURLは必ず検証を行う
- 信頼できるドメインのみを許可する
- ユーザー入力を使用する場合はサニタイズする
-
パフォーマンス
- URLの動的更新は必要な時のみ行う
- 不要な再レンダリングを避ける
-
エラーハンドリング
- URLが無効な場合のフォールバック処理を実装する
- ロード失敗時のエラーメッセージを表示する
まとめ
veloにpostMessageを使用することによって埋め込みhtmlコンポーネントにデータベースから値を動的に取得し、渡すことができます。
WixのHTMLコンポーネントを使用したURL動的制御は、Webサイトの柔軟性と機能性を大きく向上させる強力な機能です。本記事で解説した実装方法を活用することで、以下のような利点が得られます：
-データベースと連携した動的なコンテンツ表示が可能になります
-ユーザーの行動に応じたインタラクティブな体験を提供できます
-外部サービスとの統合をより柔軟に行えます
また、セキュリティやパフォーマンスに注意を払うことで、より堅牢なサイト構築が可能になります。
Discussion