Zoho Formsの内容を、kintoneに投入する

Zoho Formsは、無償で利用できるオンラインフォームサービスです。入力されたデータは、Zoho CRMなどの Zohoサービスと連携できるのはもちろん、Webhookで飛ばすこともできます。

そのため、これを Microsoft Flow(ただし、有償版が必要です)経由で kintoneに投入する事ができます。

Zoho Formsでフォームを作る

まずは、Zoho Formsでフォームを作ります。

メニューバーの「連携」をクリックし、「Web通知」を選択して、有効化後パラメーターを「Payloadのパラメーター」として設定していきます。

右下の「回答フォーマットの表示」をクリックして、JSONデータをコピーしておきましょう。



現状ではこの設定画面は保存できないので、このまま開いたままにしておいてください。

kintoneでアプリを作成

続いて、kintone側でこれを受け入れるアプリを作成します。次のような感じです。フィールドコードに、Zoho Formsで設定している名前と同じ名前を入力すると良いでしょう。

また、Microsoft Flowと連携するために、画面右上の「設定メニュー」ボタンから、「システム管理→外部連携」の「Microsoft Flow」を有効にしておきます。

作ったアプリのIDは覚えておきましょう。

Microsoft Flowで接続

最後に、Microsoft Flowでこれを接続します。有償アカウントでログインをしたら、「マイフロー→新規→一から作成」を選んで、フローの新規作成画面に移動します。

案内が表示されたら再度「一から作成」を選んで、トリガー検索画面に移動します。そしたら「http」などで検索をして「HTTP要求の受信時」というトリガーを選びましょう。


入力エリアの下の「サンプルのペイロードを使用してスキーマを生成する」をクリックして、先ほどクリップボードにコピーしておいた、Zoho Formsが吐き出したサンプルを貼り付けます。

すると、内容が解析されてJSONスキーマが生成されます。

次に、画面下の「新しいステップ」をクリックします。「kintone」などで検索して「アプリにレコードを追加」アクションを選びます。

kintoneを初めて利用する場合は、認証手続きが必要なのでアカウントで認証します。そして、先ほど覚えておいたアプリIDを入力します。正しく入力できると、アプリ作成時に追加したフィールドコードが一覧されます。

各入力エリアをクリックすると、JSONスキーマから割り出された Zoho Formsのフィールドが表示されるので、同じ項目を割り当てていきます。

これでフローの完成です。「保存」ボタンをクリックしましょう。

Zoho Formsと接続する

最後に Zoho Formsと Microsoft Flowを接続します。保存をした状態で、再度「HTTP要求の受信時」のブロックをクリックすると、「HTTP POSTの URL」という項目に、URLが生成されています。これをコピーします。

そして、Zoho Formsの「Web通知のURL」欄にこれを貼り付けて保存しましょう。


これで準備完了です。

テストしてみよう

それでは、テストをしてみましょう。まずは、Microsoft Flowで画面右上の「テスト」ボタンをクリックし、「トリガーアクションを実行する」を選んで「保存&テスト」をクリックします。

Zoho Formsで、「フォームを表示」ボタンをクリックして、フォームに内容を入力して送信します。

すると、Microsoft Flowの画面が変化して次のような正常終了の画面に変わっています。

kintoneを確認すると、データが投入されています。

まとめ

いかがでしょうか。一見すると手順は複雑ですが、この「HTTP POST→kintone」という流れは、Zoho Forms以外でもさまざまな場面で活用できます。

今回、Zoho Formsを初めて使ってみました。これまで、オンラインフォームといえば Googleフォームや、Microsoft Formsを使っていましたが、いずれも同社のスプレッドシートに入れるのは簡単でしたが、外に出すのがスクリプトを組み合わせなければならないなど面倒でした。

また、kintoneとフォームの連携も外部サービスや WordPressのプラグインなどを使えば可能ではありますが、こうして簡単な手順で Zoho Formsと接続できるなら、組み合わせるのは非常に楽かもしれないなと思いました。

Zohoには、この他にもさまざまなサービスがあるため、今後使ってみようと思います。

Chromeのマルチユーザーが、Webサイト開発に便利

Chromeには、マルチユーザー機能が搭載されていて、複数のアカウントを紐付けて利用することができます。筆者はこの機能、うまく活用していなかったのですが、ふと、サイト制作でクライアントごとにユーザーを作ったら、非常に便利だったのでその方法を紹介しましょう。

“Chromeのマルチユーザーが、Webサイト開発に便利” の続きを読む

JetPackの関連投稿を、特定の投稿タイプだけ表示しない方法

WordPressに、JetPackを導入するとさまざまな機能が利用できます。その中の1つ、「関連コンテンツ表示」は自動的に記事の下部に、図のような関連記事をリストアップしてくれて便利です。

しかし、カスタム投稿タイプを使うとこちらにも自動的に表示されてしまい、時には邪魔なときがあります。そんな時は、次のコードで取り除くことができます。

“JetPackの関連投稿を、特定の投稿タイプだけ表示しない方法” の続きを読む

マウス操作だけで簡易Webサーバーを立てられる『Web Server for Chrome』

他の人が作ったHTMLを、Webブラウザーで確認するとき、リソースファイルがルート相対で記述されている事や、JavaScriptのプログラムが「file://」プロトコルだと動作しないことなどがあります。

このような場合、XAMPP/MAMPなどで Webサーバーを立てたり、VagrantやGulpなどを使ってサーバー機能を利用するなどが必要ですが、Google Chromeの拡張機能で簡単にサーバーを立てられるのが『Web Server for Chrome』です。

次のページから拡張機能をダウンロードしましょう。

インストールすると、アプリ画面にアイコンが表示されるので、これをクリックします。

起動すると、次のようなウィンドウが表示されます。

「CHOOSE FOLDER」ボタンをクリックし、フォルダーを指定しましょう。一番下の「Enter Port」にポート番号を入力すれば(標準は 8887)、次のようなURLでアクセスが可能になります。

http://127.0.0.1:8887/

バックグラウンドで動作させたり、他のコンピューターからのアクセスを可能にしたり、スリープしないようにしたりなどのオプションもあります。

さくっと確認するには、非常に良さそうですね。

WordPressのメール送信を Gmail SMTP経由にする

WordPressのメールは通常、Sendmailというしくみを使って送信されます。しかし、AWSなどでメールを送信するしくみがなかったり、ドメインの設定でメールが外に送信できないといった制限があったり、またメールアドレスによっては迷惑メールになりやすいなどの不都合もあります。

そこで、これを SMTP経由で送信できる『WP Mail SMTP by WPForms』をご紹介しましょう。

“WordPressのメール送信を Gmail SMTP経由にする” の続きを読む

WordPress 4.9以降は、ブックマークレット「Press This」がプラグインに

WordPressには、長らくツールメニューに「Press This」というブックマークレットのツールがありました。しかし、4.9以降はこの機能が廃止されています。ただし、プラグインをインストールすることで、対応することができます。

“WordPress 4.9以降は、ブックマークレット「Press This」がプラグインに” の続きを読む

kintoneの日付を世界標準時から日本のタイムゾーンにして表示する

kintoneの Webhookなどで、日付型のデータを受信すると「世界標準時」のタイムゾーンで渡されます。そのため、次のようなプログラムでこれをそのまま表示しようとすると日付がずれてしまいます。

date('Y-m-d', $from_kintone_date);

次のように処理すると、タイムゾーンを変更して表示できます。

“kintoneの日付を世界標準時から日本のタイムゾーンにして表示する” の続きを読む

PhpStorm(WebStorm)で ToDo管理をするときに、余計な ToDoを隠す

PhpStorm等の JetBrainソフトウェアには、ToDo管理機能があります。ソースの中に、「todo」というキーワードを含めることで、それが「ToDo」パネルに反映されるというしくみ。

しかし、WordPressのテーマなどを開発していると、もともとのソース内にこのようなコメントが残っていて、自分が作った ToDoと混ざってしまいます。こんな時は、パターンを書き換えると良いでしょう。

“PhpStorm(WebStorm)で ToDo管理をするときに、余計な ToDoを隠す” の続きを読む

WixにNoto Sans(源ノ角ゴシック)をアップロードして日本語フォントを利用する

Wixは、日本語フォントが利用できますが、MSゴシックやメイリオなど、Microsoft系のフォントのみのため、現代風のサイト制作ができません。そこで、オープンソースフォントである Noto Sans(源ノ角ゴシック)を利用できるようにしてみましょう。
“WixにNoto Sans(源ノ角ゴシック)をアップロードして日本語フォントを利用する” の続きを読む