見出し画像

超絶初心者がOutlook予定追加ツールを作ってみた！！

やまもと

みなさんこんにちは。
今回、人生で初めてツール作りに挑戦してみました！

内容はAPIを通じてOutlookの予定表に外部から予定を追加できるというものです。

どうやって作るの？？

そもそもそんなツールをどうやって作るのかということですが、
今回はこんな感じの流れで作ってみました！

１． Microsoft Azureでアプリを登録
２． Postmanを通じてトークンを取得
３． fetchを使ってOutlookに新規予定データをPOST
→ これでOutlook上に予定が追加される

簡単なイメージとしてはこんな感じです。
それでは進めていきましょう。


Microsoft Azureでアプリの登録

まずは今回作るツールがOutlookにアクセスできるようにするために、
Microsoft  Azureで新規アプリの登録を行います。

まずMicrosoft Azureの画面を開き、
左側のナビゲーション ウィンドウから、
[Azure Active Directory] >[アプリの登録] > [新規登録] の順に選択します。

するとこのような画面が出て来るのでそれぞれの項目を入力します。
Redirect URIには「https://www.getpostman.com/oauth2/callback」
と入力し、
[登録(Register)]を選択します。

アプリケーションを登録したら、
次にクライアントシークレットを取得します。
これは次のステップでトークンを取得するために必要な作業です。

先ほどの画面から、
[Certificates & secrets]>[+New client secret]の順に選択すると、
↑のような画面が表示されます。
表示された項目を入力し、[Add]を選択するとクライアントシークレットを取得できます。

これでひとまずトークン取得に向けたアプリ登録は完了です。


Postmanでのトークンの取得

次に、Postmanを使ってトークンを取得していきます。

１．まず↑の画像のように値を変更し、[Get New Access Token]を選択します。

２．項目に値を入力していきます。

・Token Name: 自由に記入
・Grant Type: Authorization Code　
・Callback URL: 
    https://www.getpostman.com/oauth2/callback
・Auth URL: 
    https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize
・Access TokenURL: 
    https://login.microsoftonline.com/common/oauth2/v2.0/token
・Client ID: アプリ登録時に表示されるApplication (client) ID
・Client Secret: アプリ登録時に取得したClient Secret
・Scope: Calendars.ReadWrite
・State: State
・Client Authentication: Send As Basic Auth header

これらを入力後、[Request Token]>[Use Token]を選択します。

これでトークンの取得は完了です。

個人的に、ここでなかなか認証が通らず苦労しました…。
結局は項目値の入力ミスという、もの凄く単純なミスだったのですが笑


予定を追加してみよう

それでは実際に、作ったツールを用いて予定を追加します。
今回作ったツールの画面はこんな感じ。↓

めちゃくちゃシンプルです。笑
取得したトークンや予定を書き込んで、ボタンを押すと予定が追加されます。

例えば開始日を「8/24」の「9:00」、タイトルを「ABCDE」に設定して
[90分]のボタンを押すと、、、

自動的に90分後の10:30に開始時間が変更されます。
なのでいちいち時間変更せず、続けて予定の追加が可能です。

そしてOutlookを見てみると、
こんな感じで8/24の9:00から「ABCDE」という予定が追加されます。
時間も90分でキチンと入力されてますね。



今回押した[90分]のボタンのソースはこんな感じです。
他のボタンは時間追加部分(+90)の値を変更しています。

function clickBtn90() {
    const to = document.getElementById("token").value;
    const ti = document.getElementById("title").value;
    const sy = document.getElementById("s_year").value;
    const smo = document.getElementById("s_month").value;
    const sd = document.getElementById("s_day").value;
    const st = document.getElementById("s_time").value;
    var d = new Date(sy + '/' + smo + '/' + sd + ' ' + st + ":00");
    d.setMinutes(d.getMinutes() + 90);
    var y = d.toLocaleString('ja-JP-u-ca-japanese').substr(-8, 8);
    var yy = d.toLocaleString('ja-JP-u-ca-japanese').substr(-7, 7);
    var z = y.substr(0, 2);
    if (z < 10) {
        var et = '0' + yy;
    } else {
        var et = y
    }
    s_time.value = et.substr(0, 5);
    var data = {
        "subject": ti,
        "body": {
            "contentType": "HTML",
        },
       "start": {
           "dateTime": sy + "-" + smo + "-" + sd + "T" + st + ":00",
           "timeZone": "Asia/Tokyo"
        },
      "end": {
           "dateTime": sy + "-" + smo + "-" + sd + "T" + et,
           "timeZone": "Asia/Tokyo"
        },
    }
    fetch(url, {
        "method": "POST",
    　   "body": JSON.stringify(data),
        "headers": {
           "Content-Type": "application/json",
           "Authorization": "Bearer " + to
       }
    })
}　　

このurlという変数はPostmanでトークンを取得する際に使った
https://graph.microsoft.com/v1.0/me/calendar/eventsです。

これらのデータをjson形式に変更して送ると、Outlook上に予定が追加されます。

今回はめちゃくちゃシンプルなデザインでしたが、
予めよく使う予定をリスト形式でセットし、タイトルに反映されるようにしておけば、予定タイトル入力の手間も省けます。

↓例えばこんな感じ


感想・まとめ


はじめは自分の作ったツールでOutlook上に予定が追加できるなんて思いもしなかったです。Microsoft AzureもPostmanも初めて使うツールだったので、どのように行えばいいのかもあまりイメージできないまま、手探りで作業を進めていく感じでした。


中でも認証やトークンの取得などは、なかなか認証が通らずに苦労しました…
ただトークンを取得できてしまえば、あとは決められた書式上のデータの変更を行い、そのデータを送るだけで自動的に予定が追加されるという便利さにとても驚きました。


APIってすげえ。。。


まったくもって技術系の知識のない自分が、実際に何かを作り、きちんとそれが動くということを体験できたのはとてもよかったです。

今回はデータを送って予定を追加するだけでしたが、予定の削除や編集機能もできれば、より便利なツールになるのではないかと思いました。

初めての経験だったため、コードはめちゃくちゃ汚いですが、とりあえず今はきちんと動くということに重きを置いて作業を行いました…。
その点では、一応きちんと動いたので満足できる結果になったと思います。


ただこれからはもっとスマートなツールを作れるように頑張りたいです。

読んでいただきありがとうございました。


いいなと思ったら応援しよう！