ブックマークレットで、outlook 予定のリンクを作ろうとしたけれど

# 背景

outlook の カレンダーlinkを作れそうだったんで、いっそのこと bookmarklet に出来んかな？と試した。

html5 とか勉強していくことがあれば、なんか思いつくかも？ってことで供養しておく

# 結論

セキュリティ的に色々面倒なことがあるので、単純にはいかないなと認識

とりあえず、以下のようなものが動くことは確認

このあと、ほんとはクリップボードコピペしたかったが、諦めて、直接飛ばすぐらいしかできなかった。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/b61cb0a4-b127-f7cd-c10d-944ce643edda.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120072/2a673578-c2c8-5e5e-a278-c48176902b84.png)


```javascript: カレンダー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 操作するとセキュリティ的に確かに問題ではあるんだろうけど、ブックマークレットは意図的なんだし、もうちょい緩く出来ないものか :thinking: 

local ファイルで動かすのはなんか嫌なんだよね、別環境で使えなくなるし・・