ScratchXとSendGridでメールクライアントを作る
SendGridサポートチーム佐藤（@awwa500）です。
今回は子供向けのプログラミング学習環境のScratch（スクラッチ）をベースとしたScratchXとSendGridを使ってメールクライアントを作る方法をご紹介します。
ScratchとScratchX
ScratchXについてご紹介する前に、そのベースとなるScratchについて簡単にご紹介します。ScratchはMITメディアラボのLifelong Kindergarten groupで開発、運営されているプロジェクトです。最大の特徴は、一般的なプログラミング言語で使える制御文や変数、演算子などがすべてブロックで表現されており、UI上でドラッグ&ドロップして組み合わせることでプログラミングができる点です。これにより、キーボードに不慣れな子供でも簡単にプログラミングを行うことができます。また、作品は簡単にWeb上で公開することができ、プログラミングを通じたコミュニケーションが行えるのも大きな特徴です。
一方、ScratchXはScratchに対してScratch Extensionという実験的な拡張機能を追加できるようにした派生バージョンです。Scratch Extensionを実装することでScratchプログラムとさまざまなハードウェアやWebサービスが連携できるようになります。ExtensionはJavaScriptで記述し、ScratchXのUI上から読み込ませて機能を拡張できます。ScratchXは現在β版として公開されています。
実装の方針
上述のとおり、Extensionを実装することでScratchXと外部サービスが連携できるようになります。この仕組みを利用してScratchXでメールクライアントを作ってみます。メールクライアントに必要な基本機能として次のようなものがあります。
- メールの作成
- メールの送信
- メールの受信
- 受信したメールの管理と閲覧
通常はメールの送信にはSMTPを、受信にはPOP3やIMAPなどのプロトコルを利用しますが、Extensionとしてこれを実装するのはかなりハードルが高い作業です。そこでメールの送信にはSendGridのWeb APIを、受信にはParse Webhook機能を利用して実装を簡略化します。また、SendGridには受信したメールの保存や管理を行う機能はないため、メールクライアントもしくはサーバ側で実装する必要があります。今回は最低限の実装とするため、受信したメールに対する返信のみ可能な仕様とします。
処理の流れ
メールの受信から返信メールの送信までの流れは次のとおりです。
- メール受信
Gmailなどの一般的なメールクライアントからParse Webhookの設定を行ったドメイン宛にメールを送信すると、SendGridにてメールを受信します。 - Parse Webhook
受信メールの内容はParse Webhook経由であらかじめ設定したURLに通知されます。ここではNode.js上で動作するWebアプリケーションサーバが通知先となります。 - WebSocket（メール受信）
受信メールの内容はWebSocket経由でScratch Extensionに通知されます。ここでScratch ExtensionにはWebSocketクライアントを、サーバにはWebSocketサーバの機能を実装します。 - メール表示
受信メールの内容はScratch Extensionで定義したHat block経由でScratchX上のメールクライアントに通知されます。クライアントの画面が更新され、受信したメールの内容が表示されます。 - メール返信
ユーザがメールの返信操作を行うと、宛先アドレスや画面で入力した返信内容がScratch Extensionで定義したCommand blockに渡されます。 - WebSocket（メール返信）
宛先アドレスと返信内容がWebSocket経由でサーバに通知されます。 - Web API
サーバが受け取った内容がWeb APIのパラメータに変換されメールの送信リクエストが発行されます。 - メール送信
Web APIの送信リクエストに基づきSendGridよりメールが送信されます。
実装
ソースコードはGitHub上で公開しています。環境構築手順についてはREADMEを参照してください。
メールを送受信してみる
Gmailから送られたメールをScratchX上のメールクライアントで受信し、それに対して返信する様子をキャプチャしてみました。ネオならぬネコが謎のメールを受け取る某映画を彷彿とさせるシーンを再現しています。
さいごに
冒頭で「子供向けのプログラミング学習環境」と紹介しましたが、Scratch / ScratchXは大人も十分に楽しめる奥の深いプログラミングプラットフォームです。ぜひ楽しんでみてください。
