背景
自分の金融メディアをもっとカスタマイズできないかと思って、独自でウィジェットを作り、それを組み込んで、ゆくゆくはbotとかを統合しようという企み。
やること
ウェブページに外部スクリプトを統合することで、インタラクティブな要素を簡単に追加することができるっぽい。
しかし、スクリプトの読み込みと実行に問題が発生することがある。
そこで本記事では、"Hello World" を表示するだけのシンプルなウィジェットを例に、スムーズに統合し、デバッグする方法を解説する。
気をつけるべきこと
- DOMの完全な読み込み
スクリプトがDOMにアクセスする前に、DOMが完全に読み込まれていることを確認する。 - スクリプトの非同期ロード
非同期にスクリプトをロードする場合、その順序と実行タイミングを確認する。 - エラーハンドリング
スクリプトの読み込みや実行中のエラーを適切にキャッチし、デバッグ情報を提供する。
例:
index.html 任意のサイトに組み込む
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Page</title>
</head>
<body>
<!-- Hello Worldウィジェットを表示するためのコンテナ -->
<div id="hello-world-widget"></div>
<!-- Hello Worldウィジェットのスクリプト -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const script = document.createElement('script');
script.src = 'https://example.com/hello-world-widget.js'; // スクリプトのURLを指定
script.async = true;
console.log('Script element created:', script);
script.onload = function() {
console.log('Hello World widget script loaded.');
try {
window.initializeHelloWorldWidget({
containerId: 'hello-world-widget'
});
} catch (e) {
console.error('Error in initializeHelloWorldWidget:', e);
}
};
script.onerror = function() {
console.error('Failed to load Hello World widget script');
};
document.body.appendChild(script);
console.log('Script element appended to body');
});
</script>
</body>
</html>
スクリプトが実行される前に、DOMが完全に読み込まれるのを待つために、DOMContentLoaded イベントを使用している。
スクリプト
任意のサイトから呼び出す。
hello-world-widget.js
function initializeHelloWorldWidget(config) {
console.log('Initializing Hello World widget with config:', config);
const container = document.getElementById(config.containerId);
if (!container) {
console.error('Container not found:', config.containerId);
return;
}
container.innerHTML = `
<div id="helloWorldContainer" style="border: 2px solid #007bff; border-radius: 10px; padding: 10px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; margin: 20px auto;">
<div id="helloWorldHeader" style="text-align: center; margin-bottom: 10px;">
<h2>Hello World</h2>
</div>
<div id="helloWorldContent">
<p style="margin: 0; padding: 10px; font-size: 16px; color: #333;">Hello, welcome to our site!</p>
</div>
</div>
`;
console.log('Hello World widget initialized in the container.');
}
お疲れ様でした。
わからないところ、間違っているところ、もっといい方法がある場合は、コメントでもDMでも教えてください。