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

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

自社では、朝の出勤した時にタイムカードの代わりに空メールでの管理を行っています。

僕は、Webtyに入社して、1週間しか経っていませんが、もうすでに、朝、空メールを送信する作業がめんどくさくなってしまいましたｗ

なので、ボタン一つで簡単にメールが送信できる自分用のページを作りたいと思います！

実装方法は、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で簡単に装飾したらこんな感じになります。

参考サイト