ノーコードでFAX送信してみた

XTechグループ 2 Advent Calendar 2020の22日目は、
iXIT株式会社 MVP開発 x DX担当 岡崎がお送りします。

前回の [Twtterもどきを５分で作ってみた](https://qiita.com/oka_chiba/items/8ae46dd93353256a42b8) と同様ノーコード( Bubble.io )関連です。

#はじめに
現在、複数の葬儀屋さん向けにマルチテナント型のサービスを提供中です。

その中で**[供花](https://www.yoriso.com/sogi/kyouka/)**関連の業務を変えたいと要望がありました。

■課題
　・注文対応に時間がかかる
　　電話で花の種類の説明、送付先、札名、注文者情報の確認して注文書の作成を手作業でしている
　・注文内容を転記するとき間違わないか不安

■方針
　葬儀屋さんだけでなく、発注先のお花屋さん業務も合わせて変えたいですが、
　業務変更の調整等に時間がかかるので、まずは葬儀屋さん側を変えていきます。
　
■変更概要
　Webで注文を受けて、自動で注文書をFAX、メール送信するという流れに変えていきます
　**変更前**
　　【注文者】　→(**電話**)→　【葬儀社】　→(**手動**FAX、**手動**メール)→　【お花屋さん】

　**変更後**
　　【注文者】　→(**Web**)→　【**新機能**】　→(**自動**FAX、**自動**メール)→　【お花屋さん】
　　　　　　　　　　　　　　　　↓(**Web**、**メール**)
　　　　　　　　　　　　　　【葬儀社】

　という事で、今更ながらFAX送信機能を追加していきます。
　最終的にはFAX送信は無くしていきたいので、手間をかけずサクッと作っていきます。

#連携したサービス

### ノーコード　[Bubble.io](https://bubble.io/) 
　このサービスは、ノーコード(Bubble.io)を使って本番提供しています。
　サーバーは構築も運用もしていません。

### FAX　[秒速FAX送信](https://fax.toones.jp/send/)
　メールを送ると、本文または添付したPDFをFAX送信してくれるサービス

　固定費を上げたくなかったので、入会金・初期費用・月額基本料が0円で
　送信費用のみで利用できるサービスから選びました。
　<a href="https://gyazo.com/75ce54858392fe033847d52793dfcecd"><img src="https://i.gyazo.com/75ce54858392fe033847d52793dfcecd.png" alt="Image from Gyazo" width="500"/></a>

### iPaas(システム連携サービス)　[Integromat](https://www.integromat.com/)
　Webhookや各サービス専用の連携モジュール等を使って、
　システム間のデータやイベントを連携をするサービス

　iPaasだと、[zapier](http://zapier.com/)が有名ですが、
　Integromatには、bubble.io専用の連携モジュールがあるのでこちらにしました。
　<a href="https://gyazo.com/08b75aa8aebc58bb28468c0a0cec26f2"><img src="https://i.gyazo.com/08b75aa8aebc58bb28468c0a0cec26f2.png" alt="Image from Gyazo" width="500"/></a>
　※画像下の説明文はchromeで日本語に翻訳しています

#FAX送信について

###今回の連携の課題
　**Bubble.io**から**秒速FAX送信**を経由で正しくFAXを送信するためには、HTMLタグ削除の変換処理が必要

　・[**秒速FAX送信**]はメール経由でFAX送信が可能です。※テキスト形式のみ対応（**HTML形式は不可**）
　・しかし、**Bubble.io**のメール送信は**HTMLメール形式 固定**です。
　・Bubble.io内でも文字列変換としてHTMLタグは削除できますが、
　　メール送信するタイミングで結局HTML形式に変換されてします

###解決策

####A案：プログラムで変換
　このサービスは**Bubble.ioのみで、サーバーを構築していない**ので、
　PHP等で変換を掛けるには、HTMLタグ削除のみの為にサーバーを別途用意する必要があります。


####B案：システム連携サービスで変換
　サーバーを立てる必要がない、IntegromatにはHTML削除機能があるので設定のみですぐできます。
　　①Bubble.ioからIntegromatにメールを送信
　　②IntegromatでHTMLタグを削除して[秒速FAX送信]宛にメールを再送信

####今回はサーバー構築が不要なB案

#実際の連携手順
###bubble.ioでの設定
Integromat宛に注文内容をメール送信
　<a href="https://gyazo.com/8e491637e7946b8e2357b9a6c244cbfb"><img src="https://i.gyazo.com/8e491637e7946b8e2357b9a6c244cbfb.png" alt="Image from Gyazo" width="500"/></a>

###Integromatでの設定
 受信したメールの本文からHTMLタグを削除して、[秒速FAX送信]あてにメール送信
 ※メール受信すると処理を自動実行するWebhook(mailhook)を使っています。

■シナリオ
　1. [Webhook(Custom mailhook)]モジュールを使ってメールを受信
　2. [Email]モジュールでメール送信
　<a href="https://gyazo.com/d256e2427a0f80da5bbcace677a069ea"><img src="https://i.gyazo.com/d256e2427a0f80da5bbcace677a069ea.png" alt="Image from Gyazo" width="500"/></a>

　■シナリオ詳細 ( [Email]モジュールの設定 ) 
　　・送信先を[秒速FAX送信]宛に設定
　　・件名(Subject)のテキストをコピー
　　・本文(Content)のテキストからstripHTMLを使ってHTMLタグを削除
　　<a href="https://gyazo.com/88e2ef80dc094e619baee7da262354e4"><img src="https://i.gyazo.com/88e2ef80dc094e619baee7da262354e4.png" alt="Image from Gyazo" width="357"/></a>

#まとめ
サーバーも立てず、コードも書かずに、サクッと
電話受付の担当者無しで供花の受注から発注ができるようになります。

XTechグループのアドベントカレンダーはまだまだ続きます。
明日の執筆担当は @kumi-someya さんです。引き続きお楽しみください。

#参考文献
[ノーコードでタスク化！Integromatを使ってみる！](https://blog.nocodelab.jp/entry/2019/10/01/%E3%83%8E%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%82%BF%E3%82%B9%E3%82%AF%E5%8C%96%EF%BC%81Integromat%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B%EF%BC%81)
[アプリケーションをつなぐIntegromatが素晴らしい](https://qiita.com/makky_tyuyan/items/7802bec3a941c5184034)