3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

背景

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

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

結論

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

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

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

image.png

image.png

カレンダー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 ファイルで動かすのはなんか嫌なんだよね、別環境で使えなくなるし・・

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?