背景
outlook の カレンダーlinkを作れそうだったんで、いっそのこと bookmarklet に出来んかな?と試した。
html5 とか勉強していくことがあれば、なんか思いつくかも?ってことで供養しておく
結論
セキュリティ的に色々面倒なことがあるので、単純にはいかないなと認識
とりあえず、以下のようなものが動くことは確認
このあと、ほんとはクリップボードコピペしたかったが、諦めて、直接飛ばすぐらいしかできなかった。
カレンダーlink作成のブックマークレットのサンプル
javascript:(function(){
var popup = window.open('', '', 'width=400,height=600');
var html = `
<!DOCTYPE html>
<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script'; trusted-types">
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Outlook カレンダー リンクジェネレーター</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
label, input, textarea {
display: block;
margin-bottom: 10px;
width: 100%;
}
button {
padding: 10px 20px;
background-color: #0078d4;
color: white;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #005a9e;
}
</style>
</head>
<body>
<h1>Outlook カレンダー リンクジェネレーター</h1>
<form action="https://outlook.office365.com/calendar/action/compose" method="GET" target="_blank">
<label for="startdt">開始日時:</label>
<input type="datetime-local" id="startdt" name="startdt">
<label for="enddt">終了日時:</label>
<input type="datetime-local" id="enddt" name="enddt">
<label for="subject">件名:</label>
<input type="text" id="subject" name="subject">
<label for="body">本文:</label>
<textarea id="body" name="body"></textarea>
<button type="submit">リンクを生成してコピー</button>
</form>
<script>
document.querySelector('form').addEventListener('submit', function(e) {
var startdt = encodeURIComponent(new Date(document.getElementById('startdt').value).toISOString());
var enddt = encodeURIComponent(new Date(document.getElementById('enddt').value).toISOString());
var subject = encodeURIComponent(document.getElementById('subject').value);
var body = encodeURIComponent(document.getElementById('body').value);
var fullURL = this.action + '?' + 'startdt=' + startdt + '&enddt=' + enddt + '&subject=' + subject + '&body=' + body;
navigator.clipboard.writeText(fullURL).then(function() {
alert('リンクがクリップボードにコピーされました!');
});
this.action = fullURL;
});
</script>
</body>
</html>
`;
popup.document.write(html);
popup.document.close();
})();
あとがき
DOM 操作するとセキュリティ的に確かに問題ではあるんだろうけど、ブックマークレットは意図的なんだし、もうちょい緩く出来ないものか
local ファイルで動かすのはなんか嫌なんだよね、別環境で使えなくなるし・・