めんどくさい出社メールをJSでGmailを送信する

自社では、朝の出勤した時にタイムカードの代わりに空メールでの管理を行っています。
僕は、Webtyに入社して、1週間しか経っていませんが、もうすでに、朝、空メールを送信する作業がめんどくさくなってしまいましたw
なので、ボタン一つで簡単にメールが送信できる自分用のページを作りたいと思います!
実装方法は、PHPだとsendmail.iniなどをいじるだけで簡単にGmailでメールが送信でちゃうので、お勉強がてら、やったことのない、JSでのGmailの送信を実装して行っていきたいと思います。
目次
下準備
Google Gmail APIを有効にする
まず初めに、Gmail APIを有効にするためにGoogle Developer ConsoleへアクセスしてAPI ManagerからGmail APIを有効にします。
API Client Libraryを読み込む
自分のサイトの<head>タグの最後に以下のタグを追加し、API Client Libraryをサイトに読み込ませます。
<script src="//apis.google.com/js/client.js?onload=onLoadCallbackFunction"></script>
「アカウントの認証」ボタン
「アカウントの認証」ボタンは以下のようなソースコードで実装できます。
<button id="btn-certification">アカウントの認証</button>
var clientid = '~.apps.googleusercontent.com'; // Client ID var scopes = ['https://www.googleapis.com/auth/gmail.send'].join(' '); function onLoadCallbackFunction() { gapi.auth.authorize({'client_id': clientid, 'scope': scopes, 'immediate': true}, handleAuthResult); } function handleAuthResult(authResult) { if (authResult && !authResult.error) { // 認証後 } else { // エラー } } document.getElementById("btn-certification").onclick = function() { onLoadCallbackFunction(); };
「*~.apps.googleusercontent.com*」には、先ほど取得したクライアントIDを入力してください。
「メール送信」ボタン
「メール送信」ボタンは以下のようなソースコードで実装できます。
<button id="btn-sendMail">メール送信</button>
gapi.client.load('gmail', 'v1', callbackFunction()); var to = '宛先のメールアドレス'; var title = '件名'; var body = '本文'; var mimeData = ["To: "+ to, "Subject: =?utf-8?B?" + window.btoa(unescape(encodeURIComponent(title))) + "?=", "MIME-Version: 1.0", "Content-Type: text/plain; charset=UTF-8", "Content-Transfer-Encoding: 7bit", "", body].join("\n").trim(); var raw = window.btoa(unescape(encodeURIComponent(mimeData))).replace(/\+/g, '-').replace(/\//g, '_'); callbackFunction() { } document.getElementById("btn-sendMail").onclick = function() { gapi.client.gmail.users.messages.send({ 'userId': 'me', 'resource': { 'raw': raw } }).execute(function() { // 送信後の処理 }); };
※ Fromは自動的に認証したユーザーのメールアドレスに設定されます。
実装
ボタンの上に日時を表示して、ボタンをboostrapで簡単に装飾したらこんな感じになります。