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をインストールしておいてください。

ngrok

Boxのセットアップ

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

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

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

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

SendGridのセットアップ

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

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

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

コードのセットアップ

まず 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 = ‘&lt;html&gt;&lt;body&gt;Download: &lt;a href="{}"&gt;SendGrid Logo&lt;/a&gt;&lt;/body&gt;&lt;/html&gt;'.format(shared_link)

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

(venv) $ python ./send_demo.py

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

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

ネット上に存在するファイルのリンク（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.」にしてください。典型的には、以下のような設定画面になるかと思います。

※現在、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 -&gt; localhost:5000
...

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

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

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