とりあえずのメモ
とりあえずコードを貼っておきたいのでメモ書き程度に残します。
また空いた時間ができたら書き直します
簡単に解説
下記のJSのコードはtest.htmlを開いたときに動作し、実行ボタンを押すとtest2.htmlのh1タグを読み取るという処理を行うものです。
test.js
モーダルを表示と実行ボタンが押された時の処理です。
※入力フォームはただの張りぼてで処理に使っているわけではありません。
下記コードをブックマークレット用に修正したもの
※URLを貼り付けた後、先頭の[javascript:]の文字が消えるため、手入力する必要があります。
javascript:(()=>{const judge_h1_text=document.querySelector("h1")?.textContent||"";const modal=document.createElement("div");modal.id="custom-modal";if(judge_h1_text==="サンプルページ1"){modal.innerHTML=`<div id="modal-overlay"></div><div id="modal-content"><h1 style="font-size:1rem">確認ツール</h1><div class="form_area"><p>作成するリストの対象設備と期間を指定してください。</p><label for="machine_name">対象設備：</label><input list="machine_name_list" class="machine_input" id="machine_name"><datalist id="machine_name_list"><option value="恒温槽"><option value="恒温恒湿槽"><option value="サーマルショック"><option value="塩水噴霧試験機"><option value="シャント"></datalist><br><label for="start_date">開始日 ：</label><input type="date" id="start_date"><br><label for="end_date">終了日 ：</label><input type="date" id="end_date"></div><div class="button_area"><button id="execute-btn">実行</button><button id="close-btn">閉じる</button></div></div>`}else{modal.innerHTML=`<div id="modal-overlay"></div><div id="modal-content"><h1 style="font-size:1rem">確認ツール</h1><p>開いているページが違います。</p><p>対象の設備一覧ページを開いてください。</p><button id="close-btn">閉じる</button></div>`}const style=document.createElement("style");style.textContent=`#modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:9998}#modal-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;z-index:9999;border-radius:8px}.form_area{margin-bottom:20px}`;document.head.appendChild(style);document.body.appendChild(modal);document.getElementById("close-btn").onclick=()=>{modal.remove()};const executeBtn=document.getElementById("execute-btn");if(executeBtn){executeBtn.onclick=()=>{getNextPageH1("http://127.0.0.1:5500/test2.html")}}async function getNextPageH1(url){try{const response=await fetch(url);const htmlText=await response.text();const parser=new DOMParser;const doc=parser.parseFromString(htmlText,"text/html");const h1=doc.querySelector("h1");alert(h1?h1.innerText:"見つかりません")}catch(error){console.error("エラーが発生しました",error);alert("見つかりません")}}})();
通常のソース
開発者ツールのスニペットに張り付けて実行すると動きます。
const judge_h1_text = document.querySelector('h1').textContent
const modal = document.createElement("div");
modal.id = "custom-modal";
if (judge_h1_text == 'サンプルページ1') {
modal.innerHTML = `
<div id="modal-overlay"></div>
<div id="modal-content">
<h1 style="font-size:1rem">確認ツール</h1>
<div class="form_area">
<p>作成するリストの対象設備と期間を指定してください。</p>
<label for="machine_name">対象設備：</label>
<input list="machine_name_list" class="machine_input" id="machine_name">
<datalist id="machine_name_list">
<option value="恒温槽">
<option value="恒温恒湿槽">
<option value="サーマルショック">
<option value="塩水噴霧試験機">
<option value="シャント">
</datalist>
<br>
<label for="start_date">開始日 ：</label>
<input type="date" id="start_date">
<br>
<label for="end_date">終了日 ：</label>
<input type="date" id="end_date">
</div>
<div class="button_area">
<button id="execute-btn">実行</button>
<button id="close-btn">閉じる</button>
</div>
</div>
`;
} else {
modal.innerHTML = `
<div id="modal-overlay"></div>
<div id="modal-content">
<h1 style="font-size:1rem">確認ツール</h1>
<p>開いているページが違います。</p>
<p>対象の設備一覧ページを開いてください。</p>
</div>
`;
}
// CSSを追加
const style = document.createElement("style");
style.textContent = `
#modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 9998;
}
#modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
z-index: 9999;
border-radius: 8px;
}
.form_area {
margin-bottom: 20px;
}
`;
// DOMに追加
document.head.appendChild(style);
document.body.appendChild(modal);
// 閉じる処理
document.getElementById("close-btn").onclick = () => {
modal.remove();
};
//実行ボタン処理
document.getElementById("execute-btn").onclick = () => {
const h1Text = document.querySelector('h1').innerText;
getNextPageH1("http://127.0.0.1:5500/test2.html");
};
// スクレイピング処理
async function getNextPageH1(url) {
try {
const response = await fetch(url);
const htmlText = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(htmlText, 'text/html');
const h1 = doc.querySelector('h1');
alert(h1 ? h1.innerText : "見つかりません");
} catch (error) {
console.error("エラーが発生しました", error);
alert( "見つかりません");
}
}
test.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>サンプルページ1</h1>
</header>
<section>
<h2>コンテンツのタイトル</h2>
<a href="./test2.html"><p>ここをクリックしてサンプルページ2へ</p></a>
<img src="https://via.placeholder.com/300" alt="サンプル画像">
</section>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
<script src="./test.js"></script>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルページ</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>サンプルページ2</h1>
</header>
<section>
<h2>コンテンツのタイトル</h2>
<a href="./test.html"><p>ここをクリックしてサンプルページ1へ</p></a>
<img src="https://via.placeholder.com/300" alt="サンプル画像">
</section>
<footer>
<p>© 2023 サンプルページ</p>
</footer>
</body>
</html>