StudioのフォームをEmDashへ移すとき、公式フォームプラグイン(plugin-forms)では何ができますか?

結論

plugin-formsは、フォームの作成、送信内容の収集、通知の3つを受け持ち、ファイル添付や迷惑送信対策も設定できます。ただし、設定ファイルへの登録とデプロイが必要で、回答や添付ファイルの保存先は自前で用意します。

移行先の比較更新日

EmDashのplugin-formsにはどんな機能がありますか?

Studioのフォームから乗り換えるとき、問い合わせを受け付けて担当者に知らせる流れをplugin-formsで作れるのでしょうか。plugin-formsはEmDash公式のフォーム用プラグインです。フォームを作る、送信された内容を集める、通知を送る、の3つを受け持ちます。

ファイル項目は必須にでき、条件付きで表示することもできます。条件で隠れた項目に付いたファイルはアップロードされません。

外部ツールとの連携には、フォーム送信をきっかけに動くWebhookも用意されているようですが、導入する版で使えるかはドキュメントや変更履歴で確かめてください。0.2.7の更新では実行処理が見直され、成功しなかったHTTP応答も、変更履歴のとおりログへ残る仕様になりました。さらに、チェックボックスグループで複数の選択肢を選んだ場合の送信エラーも同じバージョンで修正されています。

フォームごとに設定できるのは次の項目です。

  • 通知先
  • 1日分をまとめて届ける集計通知
  • 回答の保持
  • Cloudflare Turnstileによる迷惑送信対策

0.2.8では一部の設定を更新した際に他の設定項目が初期化される問題が直されました。古い版のまま設定を何度も触るのは避けたほうがよいでしょう。

ファイルを送信させるにはサイト側でメディアの保存先をあらかじめ設定しておく必要があります。ここが未設定だと500エラーを返します。項目の容量制限チェック機能もあり、上限10MBの制限や中身のない空ファイルの拒否も0.2.8で組み込まれました。

EmDashのフォームでファイル添付はできますか?

採用応募の履歴書や見積もり用の図面など、問い合わせ時に書類を受け取りたい場面では、移行先でも同じようにファイルを添付できるか迷うところです。

plugin-formsでは、ファイル添付も受け付けられます。保存先は実行環境に合わせて選びます。Cloudflare WorkersならR2、Node.jsならS3互換のストレージ、永続ディスクのある単一のNode.jsサーバーならローカル保存です(メディア保存先の設定)。R2やS3を必ず契約しなければならないわけではありません。

バージョン0.2.8では項目ごとのmaxFileSizeを検証する処理が入りました。項目側で大きな数値を指定していたり、未設定のままであったりしても、各ファイルは10MBを超えられません。上限はファイル項目ごとに1ファイル10MBです。項目を複数置けば、それぞれにファイルを付けられます。

受け付ける形式にも注意してください。CHANGELOGの記録では、plugin-forms 0.2.8とあわせてEmDash本体も更新した場合、添付できる形式はPNG・JPEG・GIF・WebP・AVIFの画像と、動画、音声、PDFに絞られると説明されています。これら以外のファイル形式は項目側で許可を出していても415エラーで弾かれ、不正なContent-Typeは400エラーで拒否される仕様です。WordやExcelをそのまま受け取っていたなら、PDFで送ってもらうよう案内を変えましょう。

ちなみに、Studioの不正アクセス事案のお知らせによると、フォームに添付されたファイルは、ファイル名のみが流出の可能性の対象です。ファイルの中身は含まれません。

EmDashでplugin-formsを使い始める手順は?

Studioでは、ページにフォームの要素を置けばすぐ使い始められます。一方、EmDashの公式プラグインはプログラムの設定ファイルを編集して組み込みます。設定ファイルを書き換えて管理するプラグインは、変更を反映するためにサイトのデプロイ作業が必要です。管理画面上からインストールや削除を行うことはできず、プラグイン導入の公式手順に沿ってコード側で制御します。

おおまかな流れは次のとおりです。

  1. npm create emdash@latest でサイトを作ります。動かす先はCloudflareか、SQLiteを使うNode.jsサーバーです。
  2. npmパッケージの @emdash-cms/plugin-forms を追加し、設定ファイルの plugins 配列に formsPlugin() を登録します。公式ソースの例は live.config.ts ですが、いまの設定場所は導入ガイドで確かめてください。
  3. サイトをデプロイします。
  4. 管理画面でフォームを作り、通知先や迷惑送信対策を設定します。
  5. Portable Textを使って記事やページの本文にフォームを埋め込みます。

レジストリから入れるプラグインでは権限の確認と同意の画面が出ます。しかし、npmで入れるplugin-formsの手順にこの画面はありません。

フォームの設定画面では、通知先メールアドレスや保存日数、迷惑送信対策を指定します。新規作成時の初期値は通知先が空、保存日数が0日、迷惑送信対策にはhoneypotが選ばれています。honeypotは、人には見えない入力欄でボットを見分ける方法です。Turnstileは選べる方法の一つで、使う場合は設定画面にサイトキーとシークレットキーを入れます。通知先が空のままだと誰にも知らせが届かないので、公開前に必ず埋めましょう。

Studioのフォームの代わりにEmDashを選ぶときの注意点は?

サイトの運用やインフラの管理をすべて任せられる環境に慣れていると、自由度が高いEmDashへ乗り換えたあとに何が変わるのか不安を覚えるかもしれません。

プラグインの隔離実行そのものはCloudflareに限定された機能ではなく、Node.js環境上でもworkerdを使って動作させられます。もっとも、Hyperdriveを用いた構成ではサンドボックス型プラグインが利用できない点にも気をつけなければなりません。どこで動かすかによって、使えるプラグインと費用が変わります。

もうひとつ見ておきたいのが、ソフトの新しさです。Cloudflareの発表では、EmDash 1.0を安定版として紹介しています。一方、plugin-formsの版はまだ1.0に届いていません。新しいから不安定とは言えませんが、導入時に配布されている版と本体の組み合わせを確かめる手間はかかります。

移りたい理由が「回答をStudioに残したくない」だけなら、移行しない方法もあります。Studioではダッシュボードへの回答保存を無効化し、通知メールだけで内容を受け取る運用が可能です(Studioの通知設定ガイド)。通知先を設定したうえで保存をオフにし、公開サイトから試しに送信します。メールが届き、ダッシュボードに回答が残っていなければ設定は完了です。

ただし、この設定ではファイルを受け取れません。EmDashへ移行すると回答データや添付ファイルの保存先を自前で用意することになります。

こんな聞き方も

  • EmDashの公式フォームプラグインでは何ができますか?
  • emdash plugin forms
  • emdash plugin-forms 使い方
  • EmDashの公式フォームプラグイン(plugin-forms)の使い方は?
  • emdash フォーム プラグイン
  • emdash お問い合わせフォーム

あわせて知りたい(関連する疑問)

QEmDashのフォームはWordPressのContact Form 7と同じように使えますか?

WordPressでContact Form 7を使ってきた人は、ショートコードや追加モジュールをどう移すかが気になるところです。EmDashの設計方針のとおり、EmDashはWordPressのプラグインを実行できないので、Contact Form 7をEmDashに入れて使うことはできません。EmDashはPHPのプログラムやWordPressのテーマ、プラグインを読み込んで実行する仕組みを備えていないためです。Contact Form 7はWordPress向けに配られているプラグインなので、そもそも動く場所がありません。

EmDashはWordPressのプログラムコードを一切使わずに開発されたCMSであり、全体がTypeScriptでゼロから構築されています。土台となる動作環境やEmDashの設計方針は、WordPressとは根本から異なります。

EmDash上で問い合わせ窓口を用意する際は、専用の公式プラグインである@emdash-cms/plugin-formsを利用しましょう。フォームを作り、送信内容を集め、通知を送るという大きな役割はContact Form 7と同じです。ただ、細かな機能まで1対1でそろっているとは言えません。

Contact Form 7で作り込んだ設定は、移行後にplugin-formsで作り直すことになります。たとえば、項目ごとのタグ、自動返信メールの文面、送信後の動きなどです。今のフォームでどんな項目を使い、誰に通知しているかを書き出してから、plugin-formsの設定画面と見比べると、足りない所がはっきりします。

QEmDashのフォーム回答はどこに保存されますか?

Studioではダッシュボードに回答がたまっていきます。EmDashに移ったら、回答がどこに行くのか見えにくくて不安になりますね。

公式のplugin-formsは、回答データを保持するための領域としてsubmissionsコレクションを宣言しています。EmDash上で動作するプラグインのデータは、外部の専用SaaSへ送られるのではなく、サイト本体に接続されたデータベースへ直接保存される仕組みです。

どのような保存先になるかは、選択したインフラ構成によって決まります。Cloudflare向けのテンプレートは、データベースにD1を使う構成になっています(データベースの設定)。公式のCloudflareデモでも、データベースにD1、メディアの保存先にR2を設定していました。Node.jsサーバーで運用する場合は、SQLiteなどにデータが蓄積されていきます。添付ファイルは、前に触れたメディアの保存先に置かれます。R2は回答の本文を置く場所ではありません。

EmDashの保存領域は実行時のプラグインIDによって分離されているため、各プラグインは自身が宣言したコレクションにしか触れません。とはいえ、これは中で区切っているだけです。plugin-forms専用のデータベースが別にできるわけではありません。

管理画面には専用のSubmissionsページが用意されており、回答の一覧表示や個別確認、ステータスの更新、不要になった回答の削除が可能です。蓄積されたデータを外部へ書き出すエクスポート用の通信ルートも用意されています。Studioで回答を見ていた担当者は、移行後はこの画面を見ることになります。

作成直後の保存日数は0ですが、この0がどう動くかは今回確かめていません。公開前に試しに1件送信し、Submissionsページの一覧に回答が残るかを確かめてください。

QEmDashのプラグインは安全ですか?

CMSに外部の拡張機能を追加する際、悪意あるコードの混入やデータの意図しない流出が起きないか心配になることはないでしょうか。プラグインの種類によって答えが変わります。EmDashのプラグインには、隔離された場所で動くサンドボックス型と、サイト本体と同じ場所で動くネイティブ型があります。

サンドボックス型のプラグインは隔離された領域で実行され、既定の状態ではサイトのコンテンツや秘密情報、環境変数、ファイルシステム、ネットワークへのアクセス権を持っていません。追加の機能が必要な場合は、プラグイン側が求める権限をあらかじめ宣言し、サイト管理者がその内容を確認して承認を与えます。レジストリから入れたプラグインが更新で権限を増やす場合も、もう一度承認が必要です。

その一方で、設定ファイルのplugins配列に登録して使うネイティブ型プラグインは、EmDash本体のサーバープロセス内でそのまま動作するため、サンドボックスによる隔離の対象外となります。plugin-formsもnpmで入れてplugins配列に登録するネイティブ型なので、隔離されずにEmDash本体と同じプロセスで動きます。公式製でも、サンドボックスの守りは受けない点を覚えておいてください。

また、サンドボックスがあっても、承認した権限の範囲内なら何でも安全になるわけではありません。たとえば content:write を持つプラグインは、自分が作ったもの以外のコンテンツも書き換えられます(プラグインの権限の仕組み)。承認画面で何を求めているかを読み、作った人やコードを確かめてから許可するのが基本です。

Qplugin-formsは無料ですか?

公式フォームプラグインの@emdash-cms/plugin-formsは、オープンソースのMITライセンスで提供されており、プラグイン自体の利用料金は一切かかりません。公開されているパッケージ情報にもライセンスはMITと明記されており、誰でも無償で導入してコードを利用できます。EmDash本体も同様にMITライセンスを採用した無料のオープンソースソフトウェアです。

EmDashのレジストリ発表によると、発表時点ではレジストリに登録されるプラグインを無料で提供する方針のようです。将来は有料プラグインに対応する予定です。plugin-formsがこの先もずっと無料だと約束されているわけではなく、発表時点の方針と受け取るのがよいでしょう。

一方で、サイトを動かす費用は別にかかります。サーバーやドメインの費用に加え、メディアの保存先にR2やS3互換のストレージを使えば、その利用料も発生します。

Cloudflare Workersでサンドボックス型のプラグインを動かすなら、Workers Paidプランへの加入と、LOADERという名前のworker_loadersバインディングの設定が必要です。Studioの月額プランと比べるなら、プラグイン代ではなく、こうした基盤の費用と、設定やデプロイにかかる作業時間を足して比べることになります。

出典

この内容をChatGPTで相談

無料診断