Edited at
BluemixDay 6

BluemixとSendGridを使って、メール送信アプリを作ってみた。

More than 3 years have passed since last update.

Bluemixのカタログには、様々なAPIが使えるようになっています。

その中、クラウドメールサービス「SendGrid」を使って、Bluemix上でメール送信ができる簡単なアプリを動かしてみたいと思います。

※ Bluemixのサードパーティとして入っているAPIには、使おうとしているAPIのアカウントをユーザーが別途準備(契約)する必要があるものと、SendGridのように事前準備(契約)なしですぐ使えるものがあります。


必要なもの


・Bluemixアカウント(30日間無料で使えます。)

 新規登録はこちら:https://console.ng.bluemix.net/registration/


まず、アプリを作成(PHP)

メール送信アプリを動かす、Bluemixのランタイムを作成します。

下記の手順で、Bluemix上にPHP環境を構築します。

・手順:Cloud Foundry アプリ → WEB → PHP

最終的に、「④」のようにアプリケーションが表示されると正常です。

スクリーンショット 2015-12-07 0.22.14.png


アプリケーションに、SendGridを追加

下記の手順でSendGridをアプリケーションに追加することができます。

① サービスまたは API追加

② カタログ画面の検索機能を使って「sendgrid」を検索

③ 検索された「SendGrid」をクリック

④ 今回は、Freeを選択

⑤ アプリケーション情報を選択します。(「①」からの追加ですとデフォルトでアプリケーション情報が設定されています。)

スクリーンショット 2015-12-07 0.29.24.png

下記のように、アプリケーションに「SendGrid」が追加されます。

これで、アプリケーションからSendGridを使うことができるようになります。

スクリーンショット 2015-12-07 0.34.41.png


・追加された「SendGrid」の情報を確認。

画面の左側の「環境変数」を選択すると、今回追加した「SendGrid」のアクセス情報などが確認できます。

ここで表示されている、passwordやusernameがAPIキーになリます。

スクリーンショット 2015-12-07 0.37.36.png

画面の左側の「サービス → SendGrid」を選択すると、SendGridのダッシュボードを確認することもできます。

スクリーンショット 2015-12-07 0.41.22.png


ソースコードの改修

これで、アプリケーションからメールを送信する環境の準備が終わりました。

次は、簡単にソースコードを編集して「メール送信アプリ」を完成させてみたいと思います。


・アプリケーションのソースコード入手。

画面の左側の「コーディングを開始 → スターター・コードのダウンロード」で、アプリケーションのソースコードを入手できます。

ダウンロードされたソースコードを皆さんの作業スペースに移動してください。

スクリーンショット 2015-12-07 0.43.47.png

・index.php(既存の「index.php」を改修


index.php

<!DOCTYPE html>

<html>
<head>
<title>PHP Starter Application</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table>
<tr>
<td style='width: 30%;'>
<img class='newappIcon' src='images/newapp-icon.png'>
</td>
<td>
<h1 id = "message"><?php echo "メール送信"; ?></h1>
</td>
</tr>
<tr>
<td>
<form method="POST" action="./send.php">
【送信先】<br><input type="text" name="email"><br>
【タイトル】<br><input type="text" name="subject"><br>
【本文】<br><textarea name="body" cols="50" rows="5">送信する本文を入力してください。</textarea><br>
<input type="submit" name="btn1" value="送信">
</form>
</td>
</tr>
</table>
</body>
</html>

・send.php(新規ファイル)

※ ここに設定する「SendGrid username、SendGrid Password」は、「・追加された「SendGrid」の情報を設定」で確認してください。


send.php

 <?php

$to = $_POST['email'];
$from = "送信元メールアドレス";
$subject = $_POST['subject'];
$body = $_POST['body'];

$url = 'https://api.sendgrid.com/';
$user = 'SendGrid username';
$pass = 'SendGrid Password';

$params = array(
'api_user' => $user,
'api_key' => $pass,
'to' => $to,
'subject' => $subject,
'text' => $body,
'from' => $from,
);

$request = $url.'api/mail.send.json';

$session = curl_init($request);
curl_setopt ($session, CURLOPT_POST, true);
curl_setopt ($session, CURLOPT_POSTFIELDS, $params);
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_SSLVERSION, CURL_SSLVERSION_TLSv1_2);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($session);
curl_close($session);

print_r($response);

?>



・修正されたコードをBluemixにデプロイ

※ デプロイ手順は、上記の「・アプリケーションのソースコード入手。」で表示された画面にて詳細が確認できますので、皆さんのアプリケーション情報などご確認してください。


コードのディレクトへ移動

cd src/blue-send-mail



Bluemixに接続

cf api https://api.ng.bluemix.net



Bluemixにログイン

cf login -u [Bluemix Login Mail Add] -s [Bluemix Space]



デプロイ

cf push blue-send-mail



アプリを動かそう!

アプリケーションのURLを実行すると、先ほど改修したメール送信画面が表示されますので、

それぞれ、送信内容を設定し「送信」ボタンをクリックしてみてください。

スクリーンショット 2015-12-07 1.06.36.png

メール送信に成功すると、下記のようにSendGridから実行結果が表示されます。

スクリーンショット 2015-12-07 0.01.35.png

・メール受信を確認。

下記のようにメールが届いています。

スクリーンショット 2015-12-07 1.11.33.png

上記の「・追加された「SendGrid」の情報を確認。」で紹介したSendGridのダッシュボードの「Active」から送信後の状態もステータスごとに確認できるようになっています。

スクリーンショット 2015-12-07 1.14.56.png


最後に

このように、Bluemix上でSendGridを使ったメール送信システムが簡単に構築できます。

特徴としては、SendGridに別途契約を行うことなく、BluemixにAPIを追加するだけで使えるところがより便利です。

今回は、curlを使ってAPIを実行しましたが、SendGridで提供されているライブラリーを使った実装も可能になります。なお、SendGridにはメールのトラッキングやテンプレートなど、無料でも魅力的なサービスを沢山使えるようになっていますので、BluemixとSendGridを試してみてください。

Bluemix Qiitaページはこちら。

Bluemixを使う際のTipsはもちろん、便利な機能や最新記事などがBluemix ユーザーの皆さんから投稿されていますので、ご興味ある方は、下記のリンクからフォローへ!

http://qiita.com/tags/Bluemix