Transcript
Page 1: Twilio x SendGrid x Bluemix実践ハンズオン

Twilio x SendGrid x Bluemix 実践ハンズオン

2016 年 1 月 23 日

Page 2: Twilio x SendGrid x Bluemix実践ハンズオン

ハンズオンのゴール

Bluemix

Webフォーム

Web フォームから情報が登録された際、管理者宛にメールを送信します

Page 3: Twilio x SendGrid x Bluemix実践ハンズオン

前提条件

Bluemix アカウントBluemix CLI のインストールGit のインストール

Page 4: Twilio x SendGrid x Bluemix実践ハンズオン

作業の流れ

1. SendGrid サービスの追加2. API キーの生成3. Cloud Foundry アプリの追加4. 環境変数の設定5. サンプルコードの取得6. デプロイと動作確認

Page 5: Twilio x SendGrid x Bluemix実践ハンズオン

SendGrid サービスの追加

Page 6: Twilio x SendGrid x Bluemix実践ハンズオン

SendGrid サービスの追加

Bluemix 経由で SendGrid のアカウントを作成します

Page 7: Twilio x SendGrid x Bluemix実践ハンズオン

SendGrid サービスの追加

1. 「サービス & API 」を選択

2. 「 sendgrid 」で検索

3. 「 SendGrid 」を選択

Page 8: Twilio x SendGrid x Bluemix実践ハンズオン

SendGrid サービスの追加

4. 「 Free package 」を選択

6. サービス配下に「 SendGrid 」ができたことを確認して選択

5. 「作成」を選択

Page 9: Twilio x SendGrid x Bluemix実践ハンズオン

SendGrid サービスの追加

7. SENDGRID ダッシュボードを開く

8. SendGrid ダッシュボードが表示されることを確認

Page 10: Twilio x SendGrid x Bluemix実践ハンズオン

API キーの生成

Page 11: Twilio x SendGrid x Bluemix実践ハンズオン

API キーとは

SendGrid に API 経由でアクセスするための認証情報

Page 12: Twilio x SendGrid x Bluemix実践ハンズオン

API キーの生成

1. 「 SETTINGS > API Keys 」を選択

5. 「 Save 」を選択

3. 名前を入力

2. 「 Generate API Key 」を選択

4. 「 Mail Send 」のFULL ACCESS を選択

Page 13: Twilio x SendGrid x Bluemix実践ハンズオン

API キーの生成

6. API キー

二度と表示されないので Bluemix の環境変数に保存(後述)するまで画面は開いておきます

Page 14: Twilio x SendGrid x Bluemix実践ハンズオン

Cloud Foundry アプリの

追加

Page 15: Twilio x SendGrid x Bluemix実践ハンズオン

Cloud Foundry アプリの追加Bluemix 上に PHP の実行環境を作成します。

Page 16: Twilio x SendGrid x Bluemix実践ハンズオン

Cloud Foundry アプリの追加

1. 「 Cloud Foundry アプリ」を選択 2. 「 WEB 」を選択

Page 17: Twilio x SendGrid x Bluemix実践ハンズオン

Cloud Foundry アプリの追加3. 「 PHP 」を選択

5. 「アプリ名」を入力して完了4. 「続行」を選択

Page 18: Twilio x SendGrid x Bluemix実践ハンズオン

Cloud Foundry アプリの追加

6. 「アプリは稼働しています」となっていることを確認

Page 19: Twilio x SendGrid x Bluemix実践ハンズオン

環境変数の設定

Page 20: Twilio x SendGrid x Bluemix実践ハンズオン

サンプルコードの取得環境変数に SendGrid の API キーなどを設定してアプリケーションから使用できるようにします。

Page 21: Twilio x SendGrid x Bluemix実践ハンズオン

環境変数の設定

2. 環境変数を作成・ API_KEY :先ほど生成した APIキー・ TO :メールの宛先・ FROM :メールの送信元

1. 「ユーザー定義」を選択

Page 22: Twilio x SendGrid x Bluemix実践ハンズオン

サンプルコードの取得

Page 23: Twilio x SendGrid x Bluemix実践ハンズオン

サンプルコードの取得Git を利用してサンプルコードを取得します。

リポジトリhttps://github.com/SendGridJP/form-example-php

Page 24: Twilio x SendGrid x Bluemix実践ハンズオン

$ git clone https://github.com/SendGridJP/form-example-php$ cd form-example-php

コマンドラインで取得する場合

1. 「 Git Bash 」を選択

2. 上記コマンドラインを実行

Page 25: Twilio x SendGrid x Bluemix実践ハンズオン

GUI で取得する場合

1. 「 Git GUI 」を選択

2. 「 Clone Existing… 」を選択

Page 26: Twilio x SendGrid x Bluemix実践ハンズオン

GUI で取得する場合3. 「 Source Location 」にリポジトリ URL を入力

4. 「 Target Directory 」に適当なフォルダパスを入力

5. 「 Clone 」を選択

Page 27: Twilio x SendGrid x Bluemix実践ハンズオン

GUI で取得する場合6. 閉じる

7. Target Direcotry を確認

Page 28: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認

Page 29: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認サンプルコードを Bluemix にデプロイして動作を確認します。

Page 30: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認

1. 取得したサンプルコードを手順に従ってデプロイします※スターター・コードは必要ありません

2. ブラウザからアプリにアクセス

Page 31: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認

3. フォームに入力して「 Send 」を選択

4. 送信リクエスト成功

Page 32: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認

5. 「 Processed 」と「 Delivered 」を確認

Page 33: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認6. メールボックスに以下のようなメールが届いていることを確認

Page 34: Twilio x SendGrid x Bluemix実践ハンズオン

デプロイと動作確認メールが迷惑メールフォルダに入る場合、

・レピュテーションが低い(送信実績がない) → https://sendgrid.kke.co.jp/blog/?p=4494・独自ドメイン( Whitelabel )設定されていない → https://sendgrid.kke.co.jp/blog/?p=3861

などの原因が考えられます。

Page 35: Twilio x SendGrid x Bluemix実践ハンズオン

参考情報

Page 36: Twilio x SendGrid x Bluemix実践ハンズオン

メール送信Node.js 、 Ruby 、 C# 、 Python 、 Java などからメールを送信するサンプルコード → https://sendgrid.kke.co.jp/blog/?p=1295

Page 37: Twilio x SendGrid x Bluemix実践ハンズオン

Webhook・ Event Webhook について → https://sendgrid.kke.co.jp/blog/?p=753・ Parse Webhook テクニカルガイド → https://sendgrid.kke.co.jp/blog/?p=827・サンプルコード → PHP : https://github.com/SendGridJP/webhook-php-example → Node.js(express) : https://github.com/SendGridJP/webhook-express-example → Java(liberty) : https://github.com/SendGridJP/webhook-liberty-example → Ruby on Rails : https://github.com/SendGridJP/webhook-rails-example


Recommended