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

めんどくさい出社メールを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をサイトに読み込ませます。

「アカウントの認証」ボタン

「アカウントの認証」ボタンは以下のようなソースコードで実装できます。

「*~.apps.googleusercontent.com*」には、先ほど取得したクライアントIDを入力してください。

「メール送信」ボタン

「メール送信」ボタンは以下のようなソースコードで実装できます。

※ Fromは自動的に認証したユーザーのメールアドレスに設定されます。

実装

ボタンの上に日時を表示して、ボタンをboostrapで簡単に装飾したらこんな感じになります。

参考サイト