はじめに
問い合わせフォームは、Web サイトの中では小さな部品に見えます。
でも実際には、送信内容、メール通知、スパム対策、添付ファイル、個人情報、受信履歴、運用者の対応メモなど、意外と多くの責務を持っています。
外部 SaaS に任せる選択肢もありますが、問い合わせデータを自社サーバーに置きたい場合や、問い合わせをそのまま案件化・請求・証憑管理へつなげたい場合には、もう少し自分たちで制御できる形が欲しくなります。
NeNe Contact は、問い合わせフォームを作成し、1行の embed.js でサイトに埋め込み、送信履歴を管理できる自己ホスト型 OSS（MIT）です。基盤には、API-first / OpenAPI / MCP 対応を前提にした軽量 PHP フレームワーク NENE2 を使っています。
リリース状況（2026年6月時点） — NeNe Contact は 正式リリース前のプレビュー段階 です。フォーム作成、embed widget、受信箱、通知、添付、監査、MCP などの MVP は動きます。本番向けのハッシュ付き embed ファイルと SRI 付き貼り付けコードも用意されていますが、GA に向けた最終レビューが残っています。この記事は Docker での試用・評価向けです。MIT ライセンスですが 無保証 です。
誰向けの記事か — 自社サイトに問い合わせフォームを置きたい小規模チーム、問い合わせデータを外部 SaaS だけに預けたくない運用者、または NENE2 上のフォーム / embed / 受信箱の動きを確認したいエンジニア向けです。
NeNe Contact でできること（この記事の範囲）
| 項目 | 内容 |
|---|---|
| フォーム作成 | text / email / phone / textarea / select / checkbox / date / file / honeypot |
| 埋め込み |
embed.js を使った modal / chat / inline 表示。本番向け build はハッシュ付き + SRI |
| 管理コンソール | フォーム一覧、フォームビルダー、受信箱、ユーザー、監査ログ |
| 通知 | email / Slack / Chatwork / HMAC 署名 webhook |
| 個人情報対応 | consent、retention、PII 消去、監査ログ |
| MCP | AI ツールから read-only 参照、一部 write は確認トークン付き |
| 連携 | Contact → Deal / Vault / Invoice への HTTP handoff API |
しないこと — チャットシナリオ、請求書発行、入金消込、CMS、マーケティングメール配信は扱いません。それぞれ NeNe Concierge、NeNe Invoice、NeNe Clear、NeNe Records など兄弟プロダクトの領域です。
1. Docker で起動する
ローカルで試す場合は、Docker のフルスタック起動が分かりやすいです。
git clone https://github.com/hideyukiMORI/nene-contact.git
cd nene-contact
composer install
docker compose up -d
ヘルスチェック:
curl http://127.0.0.1:8900/health
起動後:
| 用途 | URL |
|---|---|
| API + 静的配信 | http://localhost:8900 |
| 管理コンソール | http://localhost:8900/console/ |
| embed demo | http://localhost:8900/embed-demo.html |
| phpMyAdmin | http://localhost:8901 |
初回は、管理コンソールで使う組織とユーザーを作成します。
docker compose exec app php tools/create-organization.php "Default" default
docker compose exec app php tools/create-user.php admin@example.com 'change-me' admin 1
/console/ からログインできます。
本番では必ず強いパスワード、TLS、適切な secret / encryption key を設定してください。この記事ではローカル検証を前提にしています。
2. フォームを作る
管理コンソールでフォームを作成します。
NeNe Contact のフォームは、再利用できるフィールド部品を組み合わせる形です。
たとえば:
- 会社名
- 氏名
- メールアドレス
- 問い合わせ種別
- 本文
- 添付ファイル
- 同意チェック
- honeypot
のようなフォームを作れます。
フォームビルダーでは、フィールドの並び替え、必須設定、ラベル、選択肢などを編集します。問い合わせフォームとして必要な要素を小さく組み合わせる方針です。
3. 見た目を調整する
NeNe Contact には、フォームの見た目を調整する Appearance Studio があります。
テーマ、色、表示モード、プレビューを確認しながら、サイトに置いたときの雰囲気を調整できます。
この記事では詳細なデザイン機能の説明には踏み込みませんが、単なる API だけでなく、運用者が管理画面からフォームを整えられることが特徴です。
4. サイトに embed する
フォームを公開したら、サイト側に embed.js を読み込みます。
例:
<script src="https://contact.example.com/embed.js"
data-form="YOUR_PUBLIC_KEY"
data-trigger="modal"
data-lang="ja"
async></script>
ローカル検証では、次のような demo URL で確認できます。
http://localhost:8900/embed-demo.html?form=YOUR_PUBLIC_KEY&trigger=modal
現在の embed mode は、実装上は主に次の3種類です。
| mode | 内容 |
|---|---|
modal |
ボタンやトリガーからモーダル表示 |
chat |
1項目ずつ進む conversational UI |
inline |
ページ内にフォームを埋め込み |
古いドキュメントや設計メモでは
floatingという表現が残っている場合がありますが、この記事では現行実装に合わせてmodal/chat/inlineとして扱います。
本番向けには、ハッシュ付きファイルと SRI 付き貼り付けコードも生成できます。
cd frontend
npm run build:embed
この build は public_html/embed/manifest.json と public_html/embed/embed.<hash>.js を出力します。管理コンソールの「連携・公開」タブは、manifest がある場合はハッシュ付きファイル + integrity + crossorigin の snippet を出し、ない場合はシンプルな /embed.js にフォールバックします。
下の例は chat mode の表示です。1項目ずつ進む問い合わせ UI として使えます。
5. 受信箱で問い合わせを見る
送信された問い合わせは、管理コンソールの受信箱で確認できます。
受信箱では、送信内容の確認、ステータス変更、対応メモ、添付ファイル確認などを行います。
ステータスは、たとえば:
- open
- in_progress
- resolved
- spam
のように扱います。
問い合わせは「送って終わり」ではなく、運用者が追跡し、対応履歴を残せることが大事です。NeNe Contact は問い合わせを単なるメール転送ではなく、管理対象の submission として扱います。
6. 通知チャネルを設定する
NeNe Contact は、問い合わせ送信時の通知チャネルを設定できます。
対応している主な通知:
- Slack
- Chatwork
- HMAC 署名 webhook
チャネル secret は暗号化して保存します。通知は便利ですが、問い合わせ内容には個人情報が含まれることが多いので、送信先やログの扱いには注意が必要です。
7. 個人情報と監査ログ
問い合わせフォームは、名前、メールアドレス、会社名、本文、添付ファイルなどを扱います。
NeNe Contact では、日本の個人情報保護法（APPI）を意識した設計として、次のようなルールを持っています。
- consent required の設定
- prohibited field registry（マイナンバーやカード番号などを構造的に避ける）
- retention / purge job
- data-subject delete / correct
- PII の物理削除ではなく、必要に応じた erase-in-place
- mutation と PII access の監査ログ
この記事では法律解説はしません。実際の運用では、利用目的、プライバシー表示、保存期間、越境移転、通知先、TLS などを自社の責任で確認してください。
8. MCP から問い合わせを確認できる
NeNe Contact は、MCP stdio server と agent API も用意しています。
AI アシスタントから、たとえば次のように問い合わせを確認できる構成です。
未対応の問い合わせを一覧して、会社名と問い合わせ種別だけ要約して
ただし、個人情報を含む問い合わせを AI が扱う場合は慎重さが必要です。
NeNe Contact の agent surface では、submission は redacted by default です。PII を含める場合は include_pii=true のような明示的な指定が必要で、その閲覧も監査されます。
また、一部 write tool は確認トークンを使う二段階確認方式です。AI が勝手に個人情報を外部送信したり、問い合わせ対応を進めたりしないよう、MCP は業務境界の内側で制御する設計にしています。
9. NeNe ファミリーとの関係
NeNe Contact は、NeNe ファミリーの中では問い合わせの入口を担当します。
Contact -> Deal -> Invoice -> Clear
\-> Vault / Records
- Contact: 問い合わせフォーム、受信箱、通知
- Deal: 問い合わせ後の見込み案件管理
- Invoice: 受注後の見積・請求
- Clear: 入金消込・督促
- Vault: 受け取った書類の保存
- Records: フォーム選択肢などの業務データ
Contact から Deal / Vault / Invoice への handoff API はありますが、記事執筆時点では管理画面の handoff ボタンは仕上げ中です。この記事では、Contact 単体のフォーム作成・embed・受信箱・通知を中心に紹介しました。
まとめ
NeNe Contact は、自社サーバーで問い合わせフォームを持ちたいチーム向けの、自己ホスト型フォーム / 受信箱 OSS です。
- フォームビルダーで問い合わせフォームを作る
-
embed.jsでサイトに埋め込む - modal / chat / inline の表示に対応する
- 本番向け embed はハッシュ付きファイルと SRI 付き snippet に対応する
- 受信箱で問い合わせを管理する
- email / Slack / Chatwork / webhook に通知する
- 個人情報・保持・監査を意識した設計を持つ
- NENE2 ベースで OpenAPI / MCP 境界を持つ
まだ正式リリース前のプレビュー段階ですが、問い合わせフォーム → embed → 受信箱 → 通知という MVP の流れは一通り試せる状態です。
まずは Docker で触って、自社サイトの問い合わせフォームを自己ホストできるかどうか確認してみてください。
リンク
| 種類 | URL |
|---|---|
| リポジトリ | https://github.com/hideyukiMORI/nene-contact |
| NENE2 | https://github.com/hideyukiMORI/NENE2 |
| NeNe Deal | https://github.com/hideyukiMORI/nene-deal |
| NeNe Invoice | https://github.com/hideyukiMORI/nene-invoice |
| ポートフォリオ一覧 | https://github.com/hideyukiMORI |
フィードバックは GitHub Issues へ歓迎します。
── 筆者: 森 秀之（彩音インターナショナル）— 自己ホストの業務ツール群を実運用中。
中小企業向けの業務システムを料金公開・固定価格で開発しています。
🔗 ayane.co.jp