Box と SendGrid で添付ファイルのやりとりを簡単に

BoxSendGrid

SendGrid社は光栄にも、BoxDev @ BoxWorks 2016 (サンフランシスコのモスコーニ・センターで現地時間の9月6日から8日まで開催された、Boxでハックするデベロッパー向けイベント) のセッションの一つ「Box Hack Day」にスポンサーとして参加させていただきました。(SendGrid賞に輝いたのは、ムードボードを作成・ダウンロード・共有する機能や自動的にBoxに保存する機能を持つ、デザイナ向けのGoogle Chrome Extension「LightBox Create」を開発したチームです。おめでとうございます!)

SendGridは当日、熱気を帯びたデベロッパーに向けて、メール添付を簡単にする方法をLTで発表しました。参加者から耳にしたメールに関する共通の質問は2つあって、一つはアナリティクスについて、もう一つはストレージ容量やファイル数の制限についてでした。私たちがLT内で行ったデモは、なんと幸運にも両方のテーマを取り扱っていました!このブログ記事では、Box Hack Dayで行ったLTに肉付けして、BoxとSendGridを使うと、簡単に、かつ効率的に添付ファイルを含むメールを送受信できることをお伝えしようと思います。特に、SendGridが誇る世界有数の到達性と分析機能を組み合わせることで、巨大なサイズのファイルを安全に格納できるBoxの機能がどのように活きてくるのかが分かるでしょう。

BoxとSendGridの連携方法を説明するために利用したソフトウェアは、オープンソースとしてGitHub上に公開しています。コードはPythonで書かれており、お好きな場所にホストすることができます。ただし、以下に示す例ではAWS Elastic Beanstalk上、およびローカルにホストするケースのみ扱っていますのでご注意ください。

デモで使用したソフトウェアは、プロダクション環境での利用を想定していません。どちらかというと、読者の方々が実装されるソフトウェアを素早く実行するためのガイダンスとしてご提供しているものです。もしフィードバックや質問などございましたら、どうぞGitHubにIssueを立ててください。お待ちしています。

ファイルを添付したメールを送信する

メールを送信するデモでは、URLからファイルを取得する方法、そのファイルをBoxに保存する方法、そして送信するメールにそのファイルへのハイパーリンクを挿入する方法を紹介しています。ファイルはハイパーリンクに紐付いているので、SendGridのトラッキング機能を使えば、誰がいつそのファイルのリンクをクリックしたかが分かります。それから、Boxのエンタープライズレベルのセキュリティを利用すれば、ファイルへのアクセスをコントロールすることができます。

下図は、SendGridのダッシュボードで確認したメールアクティビティの具体例です。

email-activity

SendGridのAPIを経由すれば、いつでも欲しい時に開封イベントやクリックイベントを取得できますし、Event Webhookを使えばローカルのデータベースに蓄積することも可能です。

ソースコードのREADMEには、インストール方法を記載していますのでどうぞご覧ください。

ファイルが添付されたメールを受信する

メールを受信するデモでは、SendGridのInbound Parse Webhookを用いて着信メールを待ち受けるサーバの設定例をご紹介しています。着信があると、SendGridは添付ファイルをパースしてBoxに保存します。こうして、着信メールの添付ファイルを安全に保存でき、かつ、メールクライアントが消費するローカルストレージを節約できます。ソースコードのREADMEでは、ローカルか、もしくはAWS Elastic Beanstalk上にサーバをホストする構成でインストールする方法を説明しています。

チュートリアル

以上、BoxとSendGridを利用した添付ファイルの取り扱いについてご紹介してきました。YouTube上のデモ動画に従って進めば、上記のインテグレーションをお試しいただけます。記事の後半は、もう少し具体的なステップをご紹介しながら、デモの内容を追ってみたいと思います。

準備

今回の方法を試すには、BoxとSendGridのアカウントが必要です。予めアカウントを取得しておいてください。

デモ用のコードはPythonで書かれていますので、Pythonの実行環境をご用意ください。

  • Python (バージョン 2.7.x か 3.5.x をインストールしてください。)

以下では簡単にお試しいただくために、ngrokを用いてローカルにウェブアプリケーションをホストしますので、予めngrokをインストールしておいてください。

Boxのセットアップ

BoxとSendGridを連携させるために、Box上にBox Applicationを作成します。Box Applicationに名前をつけて、”Create Application” をクリックします。

01-box-create_app

アプリケーションの各種設定を行います。最低限、以下の操作を行っていただければ、デモの内容をお試しいただけます。

  1. “OAuth2 Parameters” の “redirect_uri” を “http://localhost” にしてください。
  2. “OAuth2 Parameters” の “Authentication Type” を ”Server Authentication (OAuth2.0 with JWT)” に変更してください。
  3. “OAuth2 Parameters” の “Developer token” で “Create a developer token” をクリックし、デベロッパートークンを取得してください。
  4. “OAuth2 Paramerters” セクションにある以下の3つの情報をメモしておいてください。(後ほど利用します)
    • client_id
    • client_secret
    • Developer token

02-box-oauth

最後に、最下部の “Save Application” をクリックしてください。

SendGridのセットアップ

SendGrid側では、APIキーを生成します。WebポータルのSettings > API Keysに進み、右上のCreate API Key > General API Key をクリックしてください。

03-sendgrid-gen_key

APIキーに名前を付け、Mail SendをFULL ACCESSにして ”Save” をクリックします。

04-sendgrid-scope

画面にAPIキーが表示されますので、こちらを控えておいてください。(画面を閉じると、二度とAPIキーを確認することができなくなりますのでご注意ください)

05-sendgrid-api_key

コードのセットアップ

まず GitHub のリポジトリからソースコードを取得します。

$ git clone https://github.com/sendgrid/box

次に、お好きな方法で Python 環境をセットアップします。READMEでは virtualenv を利用していますので、必須ではありませんが、よろしければ併せてインストールしてください。(以下では、例としてPython 2.7.12をインストールしています。)

$ cd box
$ pyenv install 2.7.12
$ pip install --upgrade pip
$ pip install virtualenv
$ virtualenv vent
$ source ./venv/bin/activate
(venv) $ pip install -r requirements.txt

先ほど取得した以下の情報を .env ファイルに記述し、必要な認証情報等を環境変数としてエクスポートします。

環境変数 説明
CLIENT_ID Boxで取得したcliend_id
CLIENT_SECRET Boxで取得したclient_secret
DEVELOPER_TOKEN Boxで発行したDeveloper token
SENDGRID_API_KEY SendGridで発行したAPIキー
AWS False (AWSにデプロイする場合はTrue)
(venv) $ mv .env_sample .env
(venv) $ vi .env

export CLIENT_ID=’Boxで取得したclient_id’ 
export CLIENT_SECRET=’Boxで取得したclient_secret’
export DEVELOPER_TOKEN='Boxで取得したdeveloper_token’
export SENDGRID_API_KEY='SendGridで取得したAPI Key’
export AWS=’False’

(venv) $ source ./.env

念のため、.envファイルが .gitignoreに登録されていることを確認してください。

送信して添付ファイルをBoxに保存する

YAML形式の設定ファイルconfig.ymlを編集します。以下の変数を、自由に編集してください。

変数名 説明
demo_folder_name Box上のフォルダ名で、この中にファイルが格納される(フォルダが存在しない場合は新規作成される)
file_url 送信するファイルのURL
file_name 送信するファイルの名前
from_email 送信元メールアドレス
from_email_name 送信者の名前
to_email 宛先のメールアドレス
to_email_name 宛名

送信用のスクリプトは send_demo.py です。スクリプトを実行すると、リンク先(file_url)に存在するファイルをBOX上のフォルダ(demo_folder_name)内に格納します。そして、BOX上のファイルを指す共有リンク(shared_link)を取得し、このリンクを送信メールの本文に埋め込みます。

送信するメールの件名やHTMLメールの本文は、ソースコード内で以下のように設定されています。変数 shared_link を利用して、自由に本文を書き換えてみましょう。

subject = "SendGrid BoxDev Demo!"
...
html_content = ‘<html><body>Download: <a href="{}">SendGrid Logo</a></body></html>'.format(shared_link)

さて、スクリプトを実行して、メールを送信してみます。

(venv) $ python ./send_demo.py

宛先アドレスの受信ボックスを確認してみましょう。

06-mail-received

メール本文に埋め込まれたリンクをクリックすると、Box上のファイルにアクセスすることができます。

07-box-demo_folder

ネット上に存在するファイルのリンク(file_url)を指定してメール送信するだけで、ファイルが自動的にBoxに保存されました。実際には、メール本文にリンク(shared_link)を埋め込んだだけであり、ファイルを添付して送信したわけではありません。ですから、添付ファイルのサイズを気にする必要もありません。

受信メールの添付ファイルをBoxに保存する

SendGridは基本的に配信専門のサービスですが、Inbound Parse Webhook という便利な機能があり、特定のメールアドレスに送信されたメールを受信して添付ファイルとコンテンツをパースすることができます。さらに、パースしたメールを指定のURLにPOSTすることができます。これを応用して、POSTされた添付ファイルをBoxのフォルダに格納するウェブアプリケーションを動かしてみましょう。

まず設定ファイルconfig.ymlを編集します。下記変数の値を変更して、Box上のフォルダ名を指定してください。

変数 説明
demo_folder_name_incoming Box上のフォルダ名で、この中に受信メールの添付ファイルが格納される。存在しない場合は新規作成される

デフォルトでは、エンドポイントが/inboundで、ポート5000番をリッスンします。ポートの重複などがないようであれば、このままで結構です。以下では、デフォルトの設定値(下表)を仮定してご説明します。

変数
endpoint /inbound
port 5000

メールのパース機能を利用するために、メールを受信するデモ用の(サブ)ドメインに対してMXレコードを設定します。(既存のMXレコードは変更しないでください!デモ用のサブドメインを用意してください。)レジストラのDNS設定画面で、MXレコードの値を「mx.sendgrid.net.」にしてください。典型的には、以下のような設定画面になるかと思います。

09-regist-mx_record

※現在、Inbound Parse Webhook を利用するには、Domain Whitelabel が設定されている独自ドメインを指定する必要があります。

受信用のスクリプトは、receive_demo.pyです。Pythonのウェブアプリケーションフレームワーク「Flask」を利用しており、ルート(/)へのGETリクエストと/inboundへのPOSTを、ポート5000番で待ち受けます。

それでは起動してみましょう。

$ python ./receive_demo.py
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

次に別のターミナルを開き、ngrokを用いてこのウェブアプリケーションを公開します。

$ ngrok http 5000
...
Forwarding http://xxxxxxxx.ngrok.io -> localhost:5000
...

Forwardingの部分に表示されている「xxxxxxxx.ngrok.io」の部分を控えておいてください。

ウェブアプリケーションが公開できましたので、SendGridのInbound Parse Webhookの設定に移ります。Webポータルの Settings > Inbound Parse に進み、右上のAdd Host & URLをクリックします。

10-sendgrid-add_parse

先ほどMXレコードを指定した(サブ)ドメインを “Receiving Domain” に記入します。”Destination URL” には、ngrok 起動時にForwardingの部分に表示されたURL+エンドポイントを指定します。(例えば、http://xxxxxxxx.ngrok.io/inbound)

11-sendgrid-setup_parse

右上の “Add” を押下したら設定終了です。実際にファイルを添付して、上記のアドレスに対してメールを送信してみましょう。因みに、宛先アドレスのローカルパートは、自由に設定していただいて構いません。以下では “sendgrid-box-demo” と指定しています。

12-mail-send_with_attachment

しばらくすると、ダッシュボードの “Activity” にParseイベントが発生します。宛先に指定したアドレスが表示されていることが確認できます。

13-sendgrid-activity

Box上のフォルダを確認してみると、確かにファイルが格納されていることがわかります。

14-box-demo_folder_incoming

このようにBoxを利用することで、ローカルのストレージを消費せず、安全に添付ファイルを受信することができるようになります。

さいごに

デモの内容に関して何かお気づきの点がございましたら、GitHubにIssueを立ててお知らせください。今後もSendGridの豊富な機能をご紹介しつつ、お客様のユースケースを知り、より良いエクスペリエンスをご提供できればと思っています。

※この記事はUsing Box With SendGrid to Simplify Inbound/Outbound Email Attachmentsをベースにアレンジした内容になっております。