こんにちは、だいちゃんです。

先日リリースしたRECITONEに、結果をメールで送信する機能を追加しました！

このアップデートによって、これまで一期一会だったAIからの結果を、メールとして保存することが可能になりました👏

RECITONEについておさらい

RECITONEとは、kintoneアプリで管理したい情報を入力するだけで、アプリに必要なフィールドの情報（フィールドタイプ・フィールド名・必要に応じて選択肢も）をAIが考えてくれるWebサービスです。

入力された情報は、裏でOpenAI APIを利用して、AIに答えを考えてもらっています。構成的には、すごくシンプル。

会員登録や利用料金も不要で（実装がめんどくさい）誰でも無料で使うことができるようになっています。

RECITONE

アップデート内容

これまでのRECITONEは、レシピ（AIが考えたkintoneアプリの構成）画面を閉じると、同じ内容を表示することはできないようになっていました。

たとえ全く同じ内容でレシピを生成させたとしても、AIからの回答が変わることがあるため、二度と出会えない可能性すらある状況でした。

そこで、表示されているレシピをメールで送信することで、手元に残すことができるようにアップデートしました。

• AIが考えたkintoneアプリのレシピをメールで送信できるようになりました

ちなみに、メールの送信には、PHPMailer を利用しています。PHPでは、標準で mb_send_mail 関数も用意されていますが、SMTP認証を通さずにメールの送信を行ってしまうため、受信側のセキュリティ設定によっては、メールがブロックされてしまう可能性がありました。

自分に対して送る分には対策のしようがありますが、ユーザーに向けて送信するメールなので、そういう（ブロックされちゃう）可能性は排除しておきたかったこともあり、PHPMailerを利用することにしました。

PHPMailer

初めてPHPMailerを使ってみましたが、結構簡単に導入することができたので、Webサーバーからメールを送信する必要があるときには気軽に使っていこうと思いました。

ポートフォリオのお問い合わせフォームも mb_send_mail 関数で実装しちゃってるので、近いうちに作り替えようと思います...

あと、PHPMailerを使うときは事前に、利用しているメールサーバーの暗号化方式（TLS/SSL）を確認しておくことをオススメします。僕はこの設定をミスっててページの読み込みができなくなりましたｗ

fetch API

また、今回は、メールの送信時にページ遷移をさせたくないので、JavaScriptのfetch()メソッドを使った次のような処理で、メール送信用のPHPファイルに、送信先となるメールアドレスやレシピの内容をPOSTするようにしました。

let formData = new FormData(form);

fetch('./send_mail.php', {'method':'POST', 'body':formData}).then((e) => {
    if (e.status === 200) {
        alert('メールを送信しました！');
    } else {
        alert('メール送信に失敗しました。再度お試しくたさい。');
    }
});

サーバー側で処理する系（PHPが絡む系）は苦手意識があって敬遠しがちでしたが、最近は使う機会も増え、徐々に苦手意識も薄れてきてる気がします。ただ、フロントエンドに比べるとデバッグのし辛いところがまだちょっと苦手ですねぇ...

参考

• PHPMailerでメールをSTMP送信する - Qiita
• 【JS】formのsubmit時にページ遷移させない方法