Appery.ioでモバイルアプリから簡単にメールを送信する方法

Appery.ioでモバイルアプリから簡単にメールを送信する方法

この記事は In-App Email Simplified with Appery.io & the New SendGrid Mail API Plugin の抄訳です。

はじめに

SendGridはクラウドベースのメール配信サービスで、エレガントで使いやすいメール送信用のREST APIを提供しています。SendGridを利用することで、メールを送信するアプリを簡単に作成できます。登録確認、パスワードリセット、二段階認証、その他一般的な通知メールをアプリから送るのに最適なソリューションです。

Appery.ioはモバイルおよびWebアプリを開発するためのフルスペックのプラットフォームをサービスとして提供しています。Appery.ioを利用することで、企業はレスポンシブなWebアプリやモバイルアプリを高速に開発することができます。Appery.ioではクラウドベースの高速開発環境と、インテグレートされたバックエンドサービスおよびAPIプラグインを組み合わせて利用することができます。APIプラグインは、クラウドサービスと企業システムとの連携を劇的にシンプルにします。

Appery.ioが提供する、3rdパーティ製APIとの連携機能を利用すると、SendGridのAPIと組み合わせてアプリに簡単にメール送信機能を追加することができます。この度、SendGridを利用したアプリをさらに高速に開発できるよう、「SendGrid Mail APIプラグイン」（以下、SendGridプラグイン）の提供を開始しました。このプラグインは新規もしくは既存アプリにすぐに追加でき、添付ファイル付きメールを送信するサンプルアプリまで提供されています。開発者は必要に応じてプラグインをカスタマイズできます。

今回は、SendGridプラグインの追加と利用方法についてご紹介します。

おすすめメール配信サービス「SendGrid」を始めるメール配信サービス「SendGrid」を始めるGmailガイドライン対応！メルマガ一斉送信もシステム経由の自動通知メールもこれ1つで解決。無料で試してみる

準備

事前にSendGridとAppery.ioの無料アカウントを取得しておいてください。

今回作成するアプリ

今回は新しいモバイルアプリを作成して、SendGridプラグインを追加してメールを送信します。プラグインを追加すると次のようなことができます：

  • 写真を撮影して添付ファイルとして追加
  • 添付ファイル付きメールの送信

Android端末上でこのアプリを実行すると次のような表示になります。

Android端末上でこのアプリを実行すると次のような表示になります。

SendGridプラグインを追加する方法についてはビデオでもご紹介しています（英語）。

新規モバイルアプリの作成

Appery.ioで新規アプリを作成するための最初の手順は次の通りです：

  • Appery.ioのダッシュボードにログインしてAppsタブで「Create new app」ボタンを選択します。アプリ名に「SendGridApp」と入力して「Create」ボタンを選択します。Mobile Appオプションはデフォルトのままで大丈夫です。
  • プロジェクトビューで「Pages > startScreen」を選択します。次のような空の画面が表示されます。
    新規モバイルアプリの作成

これで新しいモバイルアプリができました。簡単ですよね？

SendGridプラグインの追加

新しいアプリができたらSendGridプラグインを追加します。

  • プラグインをインポートするために、「Create new > From Plug-in」を選択します。
    プラグインのインポート
  • Communicationカテゴリで「SendGrid Mail API」を探して、チェックをONにします。
    SendGrid Mail API
  • 「Import selected plug-ins」ボタンを選択してプラグインを追加します。
  • スタートページの設定確認を求められます。今回は、mailページを選択して「Apply settings」を選択します。この設定は、「Project > App settings > General」でいつでも変更可能です。
  • アプリで使用しているテーマを変更することもできます（省略可能な設定です）。
    • 「Project > App settings > General」を選択します。
    • Themeで「material-design」を選択します。
  • 「Pages > mail」を選択します。以下のような画面（マテリアルデザインテーマ）が表示されます。
    マテリアルデザインテーマ

プラグインにはサンプルアプリが含まれています。メール送信をテストするためにSendGridプラグインの設定を行う必要があります。詳しくは次の節で説明しますが、SendGridの認証情報が保護されていることを確認する必要があります。

Secure proxyのセットアップ

SendGridのアカウントを作成すると、APIのコールに必要な認証情報（ユーザ名とパスワード）が得られます。認証情報はセンシティブなため、通常はサーバ上に置きます。認証情報に不正にアクセスされると、アカウントを利用して不正にメールを送ることができてしまうからです。でも、大丈夫です。Secure proxyがこの情報を保護して、クライアントからは見えないようにしてくれます。

Secure proxyを作成するための最初のステップは認証情報を保存するデータベースを作成することです。

  • App Builderのツールバーで「Database」を選択します。
  • 「Create new database」を選択します。データベース名に「SendGridDB」と入力して「Create」を選択します。
  • 新規コレクションを作成するために「Create new collection」を選択します。コレクション名に「Credentials」と入力して「Add」を選択します。
  • 「+Col」を選択して新規カラムを作成します。カラム名に「key」と入力して「create column」を選択します。
  • 同様に「keyValue」という名前でカラムを作成します。
  • 次に、SendGridの認証情報をデータベースに保存します。
    • 「+Row」を選択して、keyカラムに「api_user_proxy」と入力して、keyValueカラムにSendGridのユーザ名を入力します。
    • パスワードについても同様です。「+Row」を選択してkeyカラムに「api_key_proxy」、keyValueカラムにSendGridのパスワードを入力します。

コレクションは以下のような表示になります。

コレクションの状態

DBに保存することでデータを保護することができます。次は、DBに保存したデータにアクセスするSecure proxyを作成します。

  • 「Secure Proxy」を選択します。
  • 「Create new proxy」を選択して、「SendGridProxy」と名前をつけ「Create」ボタンを選択します。
  • Proxy設定ページで「Use proxy + store sensitive (private) data in database」を選択します。
  • Databaseとして「SendGridDB」を選択します。
  • Collectionとして「Credentials」を選択します。
  • Key columnとして「key」を、Value columnとして「keyValue」を選択します。
  • 「Save」を選択して設定を保存します。

最後のステップはこのSecure proxyを使うためのサービス設定です。プラグインには「SendGrid_Mail」というメールを送信するためのサービスが含まれています。事前に設定が必要な項目がいくつかあります。

  • App Builderで「Services > SendGrid_Mail」サービスを開きます。
  • 「Use Appery.io Proxy」のリフレッシュボタンを選択して先ほど作成した新しいProxy（SendGridProxy）を読み込み選択します。
  • 「Request」タブに切り替えます。このタブにはサービスリクエストの全てのパラメータが含まれています。「Query String」を選択すると、先ほどSecure proxyで設定した「api_user」と「api_key」が表示されていることに気付くはずです。この画面で、唯一設定変更が必要なパラメータは「from」（メールの送信元）です。

Requestタブは次のようになります。

Requestタブ

  • api_user － SendGridのユーザ名です。セキュリティ的な理由のため、Appery.ioデータベースに保存されています。
  • api_key － SendGridのパスワードです。セキュリティ的な理由のため、Appery.ioデータベースに保存されています。
  • to － メールの宛先
  • toname（省略可） － 宛先の表示名
  • from － メールの送信元
  • fromname（省略可） － 送信元の表示名
  • subject － メールの件名
  • text － メールの本文

サービスを編集してSendGridのAPIで提供される他のパラメータを追加することもできます。

from（tonameとfromnameは省略可）の他はmailページの入力要素にマッピングされているため、サービス設定で変更する必要はありません。ページとのマッピングは次のような表示になります（Pages > mail > Data > sendgrid_email service > Before send mappingを選択）。

ページとのマッピング

プラグインおよび、サンプルアプリの変更、添付ファイルなしのメール送信など、より詳しく知りたい場合、「プラグインドキュメント」を参照してください。

アプリのテスト

以上でアプリのテストの準備ができました。

  • 「Test」ボタンを選択してブラウザ内でアプリを起動します。
    ※ブラウザ内でアプリをテストする場合、カメラを起動することはできません。サンプルイメージ（Project > JavaScript > SampleImageScript）が添付されたメールが送信されます。
  • カメラを使用するには、「Appery.io Testerアプリ」を利用するか、今回作成したサンプルアプリをデバイスにインストールしてください。

Androidデバイス上でアプリを起動すると次のような表示になります。

Androidデバイスでテスト

ブラウザ内でアプリをテストした場合、以下のような表示になります。QRコードをスキャンしてデバイスのブラウザ内で起動することもできます。

ブラウザ内でテスト

さいごに

今回はSendGridとAppery.ioを組み合わせてメールを送信するアプリを簡単に作成する方法をご紹介しました。SendGridプラグインを利用することで、素早く、セキュアなモバイルアプリを作成することができます。もちろん、送信テストもできます。

プラグインについてより詳しく知りたい場合、ドキュメントページを確認してください。その他のSendGrid APIをアプリに追加することもできます。

Appery.ioは、他にもクラウドデータベース、プッシュ通知、ビジネスロジック用のサーバスクリプトなど様々なバックエンドサービスと連携できますので、是非お試しください！

参考記事

おすすめメール配信サービス「SendGrid」を始めるメール配信サービス「SendGrid」を始めるGmailガイドライン対応！メルマガ一斉送信もシステム経由の自動通知メールもこれ1つで解決。無料で試してみる

おすすめ記事

検索

カテゴリ

アーカイブ

メールを成功の原動力に

開発者にもマーケターにも信頼されているメールサービスを利用して、
時間の節約、スケーラビリティ、メール配信に関する専門知識を手に入れましょう。