【Adalo】メール送信をAirtableのFormでやってみた（改行を含む文章の送信）

（構成）
１．Adaloのメール送信をAirtableのAutomationでやってみた
２．Adaloのメール送信をAirtableのFormでやってみた ※本編
３．Adaloから改行文章をメールする時はZapierと連携しよう

（なぜこれを書いたか）
前回はAdaloで問い合わせフォームを作り、ユーザーがデータを入力するたびに管理者（私）にメールが飛んでくるシステムをAirtableのAutomationを使って作ってみました。

システムは一応できたのですが、課題が2点ほど出てきましたそのうちの一つが改行を含む文章はメール送信できないという問題です。これを何とかしたいというのが今回のテーマです。

（今回の要旨）
改行を含む文章がメールできないという件は何もAirtableに限った話ではありません。多分ほとんどのメールアプリがそうだと思います。Adaloに入力したデータをメール配信アプリのsendGridで飛ばしたときもやはり改行が含まれるとメールできないという問題がありました。（sendinBlue等の他のメール配信アプリでもやはり同様）

Airtableにメール送信機能を有るのを知ったのは最近の話で、Airtableで改行文章を何とか送れないかいろいろ試しました。結果、AirtableのFormからデータを送るようにすれば改行が入っていてもメール送信できることが分かりました。

当初AdaloからAirtableのFormを操作するのはどうしたらいいのか悩んでいましたが、AdaloのWebViewでAirtableのFormを表示し、データの直接入力、直接送信をすることにしました。

ただ、WebViewって結構使えないんですよね。経験からすると大きい会社のサイトは殆どがアクセスが拒否されてしまってうまく行ったためしがなかったのです。

ところがある日、Airtableには通常のURLの他にembed URLと言って他のサイトに公開を許可する特別なものがあることを知りました。embed URLを使うとWebViewでAdaloでAirtableのFormが表示でき、直接データ送信できるようになりました。

１．AirtableでFormの設定をする

前回、お問い合わせフォームという事で下記のデータベース（テーブル）を作りました。今回もこれを使って説明していきます。

表示を「Grid View」から「Form」に変更します。すると以下のように変わります。

～自分宛てにメール送信されるようにする設定～
画面をスクロールしてFormの下の方を見るといろいろな設定項目があります。一番下に「Email me at (自分のメールアドレス)」という表記があり、ここにチェックを入れます。

こうすることでFormからデータが送信されるたびに自分あてにメールが来るようになります。

また問い合わせデータを送ったユーザーに対してメッセージを表示する箇所もあるのでここも設定しておきます。
→「お問合せ有難うございます。内容確認の上、回答させて頂きます」と設定

～Formの入力画面に切り替える～
formの設定を行うときは画面上部の「share form」が選択されているのですが、実際データを入力する場合は「open form」の方を選択します。

２．改行を含んだ文章を送信してみた

入力画面で下記のように改行を含んだ文章を入力し、これが送信できるのかどうか確かめてみた。（送信は「submit」ボタンを押します）

メールの受信BOXに以下のようなメールが飛んできました。メール本文に改行を入れた文章を入れたが問題なく送信することが出来た。

３．AirtableのEmbed URLを取得する

AirtableのFormの内容を他のサイトに公開できる（公開許可をする）特別なURLである「Embed URL」は以下の場所にあります。

まず、「share form」を選択します

表示された画面の下の方にある<> Embed this form on your site をクリックします。
（注意）
画面中央にあるピンク色でマーキングされているURLは使わないで下さい。これはEmbed URLではないです。これを使うとアクセスが拒否されます。

Embed URLが出ている画面が表示されます。下記画像のようにドラックして青く表示された部分だけをコピーして下さい。（全部コピーしても使えません。URLの設定部分だけが必要です。）

４．Adalo側の設定（WebView）

AdaloでWebViewコンポーネントを「Simple」から持って来てHome画面に配置します。画面左上のURL部分にEmbed URLを入力します。

プレビュー表示すると以下のような画面になります。（AirtableのFormが表示されます）

ただ、うまく行かないと以下のような「Airtable.comで接続が拒否されました」という画面が出ることもあります。もう一度設定を見直してやってみて下さい。

５．AirtableのFormをAdaloから入力

入力欄の「内容」（メール本文）の部分に改行した文章を入力してうまく送信できるかどうかやってみます。箇条書きで入れてみました。

「submit」ボタンを押して送信すると以下のようなAirtableの広告が表示されます。ちょっと、うっとうしい。「submit」ボタンも日本語に変えたいところですが有料会員にならないとこれも変更出来ないです。

送信がうまく行くとAdaloから入力したデータはAirtableのテーブルに追加され、それをもとにAutomationの機能で以下のようなメールが飛んできます。改行した文章もきちんと改行された状態になっていました。

（総括）
まあ、一応これはこれでいいんですが、このやり方を使うかどうかは結構微妙です。「うまく行ったんだからそれでいいじゃない」という考えもあるとは思いますが、以下の部分が気に入らないのです。

（気に入らない部分）
１．WebViewでAirtableページを読み込むと画面が不鮮明
・・・なんかもわっとした感じ。（画面に薄い霧がかかったような感じ）実際やってみないとこの感覚は分かってもらえないかも知れない。
２．WebViewが動作しないときがたまにあり、安定性に一抹の不安。

もっといい方法が無いか継続して検討をしてみます。

（関連ブログ）

（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1