Help us understand the problem. What is going on with this article?

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした