今日はいい事があったのでなかなか気分がいいです。ちょっとしたソフトウェアを書いていて —しかも生まれて初めての— おまけに一発でうまく動いたんですよ。うまくいったのには他にも理由があったのかもしれませんけど。
1つ目、私はしばらくこのアイデアに関して手を付けず、このプラグインをどのように構築したいか、そしてその間にどのように簡単になるかを検討していました。
2つ目にデベロッパーツール 2020 はそれは本当に役にちました (そう、2020年になってから作ったんです)。
3つ目、Sihfter でサイトをローンチ、開発するのは朝飯前のようなもの。
参考までに書いておくと、午後2時に作業を始めて4時前にはブログの下書きを書いているくらい。このごく短時間に、 Shifter Netlify Forms プラグインを作成し、GitHub にオープンソースプロジェクトとして登録し、WordPress サイトを Shifter でローンチ・Netlify に連携、さらに最後には Netlify に静的サイトをデプロイを行えたくらいに簡単です。
作成したデモサイト は WordPress サイトが Netlify forms をどのように使えるかをテストするための環境です。
Shifter を使えば、WordPress サイトをホストでき、ジェネレーターを使って静的サイトを作成でき、そのサイトを Nerlify へ自動デプロイでき、新しい Netlify Forms プラグインを使ってフォームから送られた内容を収集できるようになります。
免責
このプラグインはベータ版です。数時間前に作成し、最低限のテストを行ったものです。個人的には本番環境で使うには十分かと思います。
使い勝手のいいプラグインになると思うので、試用して使った感想などをお聞かせください。寄せられたフィードバックで改善ができると思います。
また、この記事を書いている時点では、Gravity Forms のみサポートしています。なぜかというと、顧客から連絡があり、作業を待っていたという考えがぴったりだったことに気付きました。
顧客にとって、Gravity Forms は現在選択されているフォームプラグインであるため、その用途向けにプラグインをビルドすることはごく自然だからです。プラグインのビルド方法は他のプラグインに対応できるよう用意にスケールができるものです。
Shifter Netlify Forms Plugin の構築
元の HTML フォーム をNetlify Forms のものに変更してプラグインに対応させるという方法を採っています。
たとえば、Netlify Forms が form要素に必要とされている data-netlify="true" を追記するといった類いです。
これ以上ないほど簡単です。
https://docs.netlify.com/forms/setup/
Netlify へのデプロイは Netlify の元々の機能でありません。
カスタムスクリプトを作って対応しています。スクリプトを Netlify のプロジェクトへコピペするかリポジトリからデプロイオプションとして git からクローンもできます。
ステップバイステップのガイドはガイド用のドキュメントを見てもらう事にして、この記事では詳しい説明を省く事にします。
一度、 Netlify へサイトをデプロイすると、どのフォームも自動的に Netlify タグ属性を使うようになります。なかなかいいですよね。ビルドが完了したら、メールで Netlify foms を使えるようなったことが通知され、フォームの受信準備が整いました。
これもお伝えするに値するのですけれど、Netlify Forms はフォームから送信できる項目は100個まで無料で始められます。このサンプルもフリー版です。
Gravity Forms は HTML のフォームに出力するオプションのライブラリが豊富に有ります。例えば、既存の action、method や他の必要な属性に追加、削除、変更が可能です。テストを動かすに当たって、action 属性の変更・削除が必要です。
Gravity Forms をネイティブに動作させるには、サイトの訪問者がフォームの送信ボタンをクリックしたときに、フォームのデータを WordPress へ送り返す、という方法になります。アクション URL を用いて実現します。<form action="someting.php">
静的サイトを扱っていると、PHP ファイルへデータを送り返しが動作しないのです。John Cena の言うように PHP はありません。私を見ることはできないのです。
他のソースへデータを受け渡すといった解決方法を過去に紹介したと思います。IFTTT や Zapire と Webhook を組み合わせるといった方法です。これは魅力的で信頼できるオプションです。しかし、今回のケースではカスタム webhook を必要としない Netlify Forms を使っています。設定不要のオプションでセットアップもシンプルです。”netlify” をタグに埋め込むだけ。
他のソースへデータを受け渡すといった解決方法を過去に紹介したと思います。IFTTT や Zapire と Webhook を組み合わせるといった方法です。これは魅力的で信頼できるオプションです。しかし、今回のケースではカスタム webhook を必要としない Netlify Forms を使っています。
設定不要のオプションでセットアップもシンプルです。”netlify” をタグに埋め込むだけ。
特定の webhook へのポイントは多くのオプション設定が WordPress に必用となります。それと同時に疑問も浮かんできます。すべてのフォームが同じ webhook へ向かうのだろうか、各 webhook のエンドポイントをカスタマイズしなくてはならないのだろうかなどと複雑になってきます。私はこれを行うプラグインを書き始めていますし，それにまだ開発中なので。
Shifter Netlify Forms は属性 を追加し、元々の action 属性を取り除き、さらに新しいフォーム名前を追加します。name 属性の追加は、Netlify で受信した際にレーベルをフォームからの送信内容に付与する便利なものです。
どのように Shifter Netlify Forms を構築したのかというサンプルコードは GitHub のリポジトリにありますのでこちらを見てみてください。
Shifter Netlify Forms をセットアップする
はじめにデモサイトを作成します。今回は新規に Shifter 上で作り、Gravity Forms プラグインと Shifter Netlify Forms helper プラグインの両方をインストール。その後、サイトを静的化しました。一度ビルドが動作を確認できるようにし、Netlify にサイトを作成します。deploy build hook を使って、新たに hook を作成し、URL を Shifter ダッシュボードに戻すようにします。
GenerateベースのWebhook は Tier 2 以上のプランから利用が可能です。Webhook の機能には追加した URL へ通知を送るというものがあります。このケースでは、静的サイトのビルドが完了したら Netlify へ通知し、Netlify にファイルをダウンロードさせるためのものです。
Netlify へのデプロイは Netlify の元々の機能でありませんので、カスタムスクリプトを作って対応しています。
スクリプトを Netlify のプロジェクトへコピペするかリポジトリからデプロイオプションとして git からクローンもできます。
ステップバイステップのガイドはガイド用のドキュメントを見てもらう事にして、この記事では詳しい説明を省く事にします。
一度、 Netlify へサイトをデプロイすると、どのフォームも自動的に Netlify タグ属性を使うようになります。なかなかいいですよね。ビルドが完了したら、メールで Netlify foms を使えるようなったことが通知され、フォームの受信準備が整いました。
これもお伝えするに値するのですけれど、Netlify Forms はフォームから送信できる項目は100個まで無料で始められます。このサンプルもフリー版です。
Netlify Forms からのフォーム内容を受信する
Netlify でローンチしたデモサイトではフォームの動作テストを行い、Netlify のダッシュボードに送信内容が表示されます。フォームの名前はプラグインの機能の名前と同じで、隠しフィールドも含めてフォームのフィールド全てキャプチャできています。
このサイトについては、1つのフォームしか設定していません。ですが、他の多くのフォームも同じようにダッシュボードに表示されるでしょう。
フォームフィールドに関しては、フォームから送信があるとどのように見えるかをお見せします。私を待っている非常に重要でアレなメッセージなので注意してください。
フィードバックをお寄せください
今後のアップデートに活用させていただきますので、フィードバックや疑問、コメントがあればぜひお気軽にお知らせください。
セットアップなどにトラブルがあればヘルプしますのでお知らせください。
Twitter や もちろん Netlify Forms から でも受け付けています。
翻訳 Tomohyco Tsunoda