kintoneとWordPressを簡単に連携できるWordPressプラグイン
細谷崇氏(以下、細谷):今日は、kintoneをより便利にするWordPressのプラグインを作ってきましたので、この場を借りて紹介させていただこうと思います。NPO法人のためのIT支援事務所「ht」の細谷と申します。よろしくお願いします。
簡単に自己紹介させていただきます。私は、関西を中心にNPOや地域団体のWeb制作やITの支援をしています。Web制作するのにWordPressを主に使っています。業務支援のシステムを作るのにkintoneを使っています。
フリーランスで活動しているので、1からシステム構築がなかなか時間も取れなくて難しいんです。なので、こういうWordPressやkintoneという、ある程度ベースができているものを使って、お客さまの要望をヒアリングしてカスタマイズしてあげるのが、私の主な仕事です。
一応、全国に「kintoneエバンジェリスト」が21名いまして、その中の1人でもあります。WordPressでは本を執筆させていただいたり、年に1回開催される大きなWordPressのイベント「WordCamp」で登壇をさせて頂いたりしています。
今年は来月の6月2日、「WordCamp Osaka 2018」が開催され、そちらに私も登壇しますので、WordPressに興味のある方がいらっしゃって、もしお時間ありましたら、こちらのイベントもぜひ来てください。
WordPressを知らない方もいらっしゃるかもしれないので、少しだけ紹介しますと、Webページを作るシステムであるCMS(コンテンツマネジメントシステム)のシェアがダントツ1位です。
全世界で1位で、60パーセントを占めています。1位と2位のパーセンテージを見ていただいたらわかると思うんですけれども、50パーセント以上のひらきがあり、圧倒的シェアを誇っている、Webサイトを作るためのシステムです。
2年前、実はここの場で登壇をさせていただいて、kintoneとWordPressを使った連携事例をお話しさせていただきました。そのときは、kintoneに入っている情報をWebページに表示させる仕組みを、自分でバリバリとプログラミングして開発した事例をお話ししました。
今回はそういうkintoneからWebに出す仕組みをプラグイン化することで、誰でも使ってもらえるものにしました。もう1つ、次は逆パターンです。Webのお問い合わせフォームからkintoneに入れるという、2パターンのプラグインを作ってきたので、紹介させていただきます。
kintoneのレコードをWebに出すためには
細谷:まず最初は、kintoneに入っているレコードをWebに出すプラグインの紹介です。例えば、顧客リストのアプリから会社名と住所、関係者団体などの一覧をWebサイトに出すために連携させたいときの話です。
そういうときは私が作ったプラグイン「Publish kintone data」を、WordPressでインストールをしていただきます。
それで、kintoneで発行されるAPIのトークンなどをWordPressの管理画面で設定していただき、kintoneのデータを取得します。
そうすると、下にkintoneのアプリのフィールド情報がバーッと出てきます。その後、kintoneが更新されたら、リアルタイムにWebも反映したいので、「Webhook」を使っています。
なので、もう1回kintoneに戻っていただいて、Webhookの設定をしていただくことになります。
次に、kintoneのどのフィールドが、WordPressのどの部分に表示させたいかという紐付けをするだけで、WordPressとkintoneの情報を連動することができます。
あとはセーブしてバルクアップデート・一括取り込みをしてもらうと、WordPressの指定したポストタイプにkintoneの情報がバーッと入っていきます。一度入ってしまえば、kintoneを更新すると、あとはリアルタイムでWebhookを使って更新作業がされます。
問い合わせ情報をkintoneに取り込む方法
細谷:続けて、2つ目です。次は、フォームからkintone。フォームに入力されたものをkintoneに取り込むものです。これは、プラグインが2つ必要になります。
昔からある、すごく有名なフォームプラグイン「Contact Form 7」のアドオンとして、僕はkintoneと連携するプラグインを作成しています。「Form data to kintone」という名前なんですけれども、この2つを入れてください。
これを入れていただくと、「Contact Form 7」の設定画面からkintoneを設定できるタブが出てくるので、こちらで同じようにAPIの情報を入れていただいて、ゲットしてkintoneの情報をまた取ってきます。
あとは、また同じように割り当てしていく。フォームの情報とkintoneの情報を割り付けしていって、最終的にはフォームのレイアウトを整えます。
フォームのレイアウトを簡単に整えられるようにkintoneのボタンを用意しましたので、それを押していただくとフォームのテンプレートが出てきます。
それをコピペしていただければ、すぐサクッとフォームの情報が作ることができて、あとはフォームから送信していただければkintoneに入るということです。
これら2つのプラグインなんですけれども、WordPressの公式ディレクトリで、自由にGPLのライセンスでダウンロードすることができますので、もしWordPressを使っているお客さんがいれば、試していただければと思います。以上です。ありがとうございました。
(会場拍手)
Webhookの活用方法
伊佐政隆氏(以下、伊佐):ありがとうございました。(制限時間が)5分。これがkintone hackなんですよね。非常に厳しい時間の中で、すごいですよね。
kintoneで情報を管理したら、それがそのままホームページに更新ができるし、kintoneでまた情報を変えたらホームページも変わる。
細谷:リアルタイムに。
伊佐:これが、WordPressでホームページを作っていれば、無料のプラグインでできるんですよね。
革新的だなと思いますけれども、その中でWebhookという機能の説明が細谷さんからありました。みなさん、Webhookが搭載されたときに、「何だろう?」と思ってた方がいらっしゃるかもしれませんが、kintoneで情報が更新されたら、更新を他のシステムに教えてあげる機能なんです。
この機能が付いたことによって、今日のようなホームページの自動的な情報更新が無料で作れる時代になってきました。ぜひ、細谷さん、これからもWordPress、kintoneでさらにがんばってください。
細谷:そうですね、今後もkintone と WordPressとの連携を中心にやっていきたいと思います。
伊佐:強化をしていただけるということだったので、ぜひ期待したいと思います。WordPressを使ってる方はいらっしゃるんですか?
(会場挙手)
伊佐:やはりいらっしゃいますね。シェア60パーセントですからね。
細谷:そうですね。
伊佐:すごいことですね。ぜひ、またこれから細谷さんの活動に期待させていただきますので、よろしくお願いします。ありがとうございました。
細谷:ありがとうございました。
kintoneでダイエットアプリを作成
勇美貴洋氏(以下、勇美):それでは、「『kintone』でダイエット」という発表を始めさせていただきます。よろしくお願いいたします。まずは、自己紹介から。勇美貴洋と申します。神戸デジタル・ラボという、システム開発の会社に勤めています。最近ちょっと、運動不足です。
(会場笑)
さっそく本題に入ります。ある日、会社でこんなことがありました。弊社では、とあるkintoneアプリを作っています。
利用者の要望に応えるために、都度メンテナンスを行っていました。その中で、フィールドやプラグイン、あとはカスタマイズ用のソースがどんどん膨らんでいったんですが、その中で使われなくなった機能は削除せずに、そのまま放置されていました。
「このままでは良くないな」と思っていたところ、弊社に元祖kintoneマスターのかなへいという社員がいました。kintone AWARDに出たこともある彼女が、こんなことを言いました。
「『kintone』がおデブちゃんになったから、ダイエットをさせないとなあ」と。ああ、そうか、ダイエットか。
ソースのチェックをして、各フィールドの棚卸もして、パターンテスト考えて、利用者にヒアリングもして大変だなと思っていたんですけれども、「システムのダイエットより、一番痩せたいの俺やん!」となりまして……。
(会場笑)
作りました。それが、iOSアプリの「aruitone(アルイトーン)」というアプリです。
(会場笑)
iPhoneをお持ちの方であれば、ご存知だと思うんですけれども、歩数のデータとか体重とかを管理している、「ヘルスケア」という標準アプリがあると思います。そちらから歩数のデータを取ってきて、kintoneに送る。それだけの仕組みです。
日付を選択して送信ボタンを押すと、その日歩いた歩数がkintoneに送られるシステムです。
データをためるだけであれば、「ヘルスケア」アプリのままで十分にまかなえます。ご覧のように月ごとのグラフや、その日の詳細のデータが取れるんですけれども、これだけではダイエットががんばれません。過去のデータしか見ることができないですし、自分のデータしか見ることができないので、モチベーションが保てません。
ダイエットの記録が共有できる
勇美:ただ、kintoneなら目標までの数値であったり、実績がわかるようになります。例えば、1日1万歩まであと何歩などや、今月の消費カロリー数もわかります。
みんなとがんばりたい、競いたいと思っている場合は、ユーザーごとのランキングも表示させることが可能です。
これと同じことをiOSアプリで実現させようとすると、開発環境を用意します。コードをガリガリ書きます。iOSのバージョンや画面サイズごとに、テストを実施して、最終的に配布するために、App Storeに申請を出す。
配布までに審査の期間もあるので、待ち時間が発生します。ただ、これもkintoneなら、データさえたまっていれば、目標の設定やランキング表示等、自由自在です。また、テストや共有も、利用している方ならわかると思いますが、簡単に即試せますし、環境も選ぶ必要はございません。
つまり、kintoneを使えば可能性は無限大です。ここまでお話をして、みなさん1つ気になっていることがあると思います。「それで、結局、痩せたん?」と。
(会場笑)
その結果が、こちら!
(会場笑)
すみません(笑)。ダイエットには失敗してしまったんですけれども、次に成功させるために、今後の展望としてこのようなことを考えています。
弊社では日報を出す習慣があるので、そのシステムと連携させて、日報を出したら、「今日はあまり歩いていないから、ちょっと遠回りして帰ろう」みたいなメッセージを出す。
また、今回は歩数のデータしか送っていないんですが、体重や心拍数等のバイタルデータも取得・活用することで、kintoneを使って痩せるだけじゃなく、健康にもなれたらいいなと思っています。kintoneを学んで学んで、もっとスリムな体を手に入れたいと思っています。
(会場笑)
以上で、私の発表を終わらせていただきます。ご清聴ありがとうございました!
(会場拍手)
ダイエットもチームワークの時代に
伊佐:勇美さん、ありがとうございます。
勇美:ありがとうございます。
伊佐:「aruitone」、かなりいいアプリじゃないですか。
勇美:はい(笑)、ありがとうございます。
伊佐:それで、痩せないという(笑)。
勇美:そうなんです。作るのにいっぱいいっぱいで。
伊佐:衝撃でしたけれどもね。
勇美:残念です。
伊佐:いつくらいから作ろうとなったのは、4月の末くらいでしたっけ?
勇美:そうですね。
伊佐:そんな話をしていて、「もう痩せたいんです」という話で。痩せているのかなと思ったら、痩せていないという。
(一同笑)
でも、いいですね。ダイエットもチームワークの時代に入ってきましたね。1人でがんばるんじゃなくて、みんなで。
勇美:そうですね、なかなか3日坊主で続かないので、仲間に助けてもらって。
伊佐:これから、日報に組み合わせたら、絶対痩せれそうな感じがします。今日、デジタル・ラボの方いらっしゃいますかね? いらっしゃいますね。痩せれるようにコミットして、みんなで日報にちゃんとコメントしてあげてください。「今日歩いたの?」と言ってね。
勇美:(笑)。
伊佐:「帰り、歩いて帰ったほうがいいんじゃないの?」と言ってあげていただきたいなと思います。あのアプリは配布するんですか?
勇美:まだまだ時間がかかりそうなんで。
伊佐:わかりました。ぜひ今後もよろしくお願いします。ありがとうございました。
勇美:ありがとうございました。
(会場拍手)
kintoneでFAX送信はできるのか
山川祐一郎氏(以下、山川):みなさん、こんにちは。岡山からまいりました。山川製作所の山川と申します。kintoneでFAXを送信してみようというテーマです。
今日最初のセッションでFAXを使ってケアマネジャーに送る事例などが紹介されていました。それとは少し違ったアプローチで実装しているお話です。
ということで、自己紹介です。山川製作所の山川と申します。岡山県倉敷市からまいりました。仕事はWeb制作やシステム制作をやっているフリーランスです。
では始めたいと思います。kintoneでFAXを送るということ。先ほど事例は出たんですけれども、どういうことができるでしょうか? 私なりに考えてみました。
例えば美容室などがそうですね。お客様に来ていただいたときに帰られたあとにサンクスのFAXを送る。在庫を持っているお店や工場などですね。在庫がなくなったときに、ある一定量を切ると自動でFAXを発注処理してくれる。あとは塾や家庭教師の連絡事項なども使えると思います。
kintoneを使うメリットというと、送信した履歴が残ることです。あとはメールアドレスを持ってない方が、やはりいらっしゃるんですね。僕も前に町内会に所属していて、町内の方でメールアドレスを持ってない方ががけっこういらっしゃいました。そういう方にFAXを送るのは非常に効果的かなと思っています。
それを実際にデモでお伝えしたいんですけどFAX持ってくるわけにはいかないので、デモ動画を撮ってきました。こちらの動画をご覧ください。
(デモ映像が流れる)
まずkintoneで顧客アプリを作って、もう1つFAX送信用のアプリを作りました。ここで適当な顧客情報を呼び出して、画面のようにメッセージを入れます。そして保存をします。
保存が完了したらFAX送信ボタンが出てきます。そこでFAX送信をクリックすると、「完了しました」というメッセージが出てきます。このまましばらく待つと、ズズッと画面が左に移ってFAXの映像になります。
しばらくすると着信があります。ありましたね。着信がきました。しばらくするとFAXの受信が終わって実際にデータを印刷します。印刷中の画面になります。
先ほどkintoneのアプリで入力した内容がそのまま紙として出てきます。「山川祐一郎様、kintone hiveへご参加ありがとうございます」こういうメッセージとともに先ほど入れたメッセージが2行出ています。こんな感じですね。はい、印刷できました~。
FAX送信できる仕組み
山川:この仕組みをどうやって作ったか。Twilioというサービスを使っています。このTwilioは電話番号を買って、その電話番号をもとに電話やFAX、SMSなど、いろいろなコミュニケーションを包括して使うことができるサービスとなっています。
非常に低コストでプログラムも、最低限で済むようなものになっています。ちなみに、このプログラムの時間よりも、さっきの動画を編集した時間のほうが長いくらいですから(笑)。
そのイメージ図なんですけれども。kintoneのほうで顧客アプリとFAX送信アプリがあって、それをWebサーバーでテンプレートのPDFを使ってPDFを生成する処理を自前で作っています。作ったのはここくらいですね。それをTwilioを介してFAXでお客様のところに送信することになります。
テンプレートなんですけど、先ほどの画面であった通りです。顧客アプリから引っ張ってきたデータ、kintoneの左の画面が名前が(画面を指して)そのままピンク色の上に、メッセージがピンク色の下に割り当てられることを定義しているだけですね。
ということで、まとめです。これだけ覚えてください。kintoneとTwilioを掛け合わせると、おもしろいんです。実はtwilioは、この間ニュースリリースがあって、LINEとも連携が可能になりました。
LINEを使うと、例えばkintoneからLINEを介して、お客様に「ありがとうございました」というメッセージを直接送ることが可能になると思います。
kintoneとTwilioを活用してこういうことができそうだ、というアイデアなど、もし思いついたことがあったり、相談したいことがあったら、お気軽にお声掛けいただければと思います。以上です。ありがとうございました。
(会場拍手)
kintone×Twilioが生む化学反応
伊佐:ありがとうございました。kintoneでデータ貯めてらっしゃる方、とくに顧客情報など蓄積されてる方はたくさんいらっしゃいます。それがFAXやラインでも送れる。電話もかけられますからね。
山川:電話も自動音声で再生することもできます。
伊佐:ですよね。僕もtwilioというサービスを触ったことがあります。不思議なんですよね! 電話はやはり電話機がないと、なにもできないと思うじゃないですか。kintoneに電話機がついてるようなものなんですよね。
山川:そうですね。
伊佐:ボタンを押したら代わりに電話してくれるし、代わりにFAX送ってくれる。すごくおもしろいですよね。
山川:ほかにもビデオチャットができたり、Twilioそのものにもいろいろ機能があります。今日の5分間の中でそれを紹介するのが難しかったので、また聞いていただいたり、各自調べていただいたりしていただければと思います。
伊佐:山川さん、また新しいネタがあったらどんどんWebにもアップしてください。
山川:はい、ぜひ。ありがとうございます。
伊佐:よろしくお願いします。ありがとうございました。
(会場拍手)
「gusuku Customine」でkintoneをより簡単に
浅賀功次氏(以下、浅賀):みなさん、こんにちは。アールスリーの浅賀と申します。今から3分ほどでkintoneをカスタマイズしてみたいと思います。アールスリーという大阪の会社から来ました。今日ご紹介する「gusuku Customine」のマーケティングを担当しています。
kintoneでカスタマイズしようと思うと、このスタンダードコースを使っていただくと、いろいろなカスタマイズができると思います。
そのときにどうやってカスタマイズするんだろうと言うと、一番簡単なのはプラグインを探すことですね。プラグインを探すと簡単にカスタマイズが適応できるんですが、できることには制限があります。
そうなるとプログラムを書くのか、自分で勉強したり、ベンダーさんに依頼します。なかなかうまくいかずに諦めている方もいらっしゃるかと思うんですが、このgusuku Customineを使っていただくと諦める必要がなくなります。やりたいことを選ぶだけでkintoneのカスタマイズができるようになります。
3分クッキングということで、これから実際にデモをしたいと思います。今日は在庫管理をイメージして、出庫数を入れると商品マスタの在庫数を減らすデモをしたいと思います。
アプリはこういうかたちで在庫数を持っている商品マスタがあります。もう1つ、出庫数を入れている出庫管理ですね。もちろんアプリは連動していないので、「10」と入っているんですが在庫数は減っていない。そこをカスタマイズして、自動で在庫数を減らせるようにします。
今見ていただいているのがCustomineの画面です。まず最初にカスタマイズするアプリを選びます。今回出庫管理をカスタマイズするのでアプリを選んでいただきます。
流れとしては、まず最初に在庫数を商品マスタから取ってきます。条件を押して、レコードを取得する部品がありますので、こちらを使って商品マスタから在庫数を取って来ます。
このときにパラメーターを書かないといけないんですが、ここはもう少し楽になる予定です。
あとは実行するタイミングを選びます。今回はレコードを保存する直前にやります。さらに編集をするたびにどんどん在庫数が減ってしまうと、問題になりますので、追加画面だけ減らすようにします。
取ってきた在庫数を計算して、在庫数を減らしてあげます。この場合、レコードを更新する部品がありますので、こちらから先ほどの商品マスタの在庫数を減らします。
このあたりは取得したデータと在庫マスタ、商品マスタを紐付ける設定をしてあげます。基本的にマウス操作だけで実現できます。
“3分クッキング”の仕上げのアクション
浅賀:最後はマッピングですね。(画面を指して)ここで計算をしてあげる必要があるんですが、先ほど取得した在庫数ですね。そこから画面上に入力した数量を引いてあげます。
最後に実行するタイミングなんですが、これが特徴的で、在庫数を取るアクションを待って、そのあとに更新をかける順番の制御ができますので、これで完了です。
kintoneのアイコンを押してあげると……。これで出庫管理のほうにカスタマイズが適応できた状態になります。
先ほど在庫数20と入っていますが、これを登録してみます。ルックアップで先ほどの製品を選んで15と入れて保存をしてあげます。そうすると、先ほどの在庫数が5に減る。こういうかたちでアプリ間の連動が非常に簡単にできます。
さらによくある条件書式。アプリの数が減ったときにレコードに色を表示させる方法です。今日は時間がないので、あらかじめ設定しておいた設定ファイルを読み込ませたいと思います。条件書式は1行で実現できます。
これをkintoneに登録してあげると、今、在庫数が10より小さい場合はピンク色に表示する設定にしているので、先ほどの商品マスタを更新かけると、このようにピンク色に変わるかたちで簡単にカスタマイズできるようになっています。
本当に3分弱くらいなんですけど、今までプログラムで書いていたものがコードを書かずに実現できるようになります。
今夏ごろの正式リリースに向けてプレビューリリース中ということで、無料でお使いいただけますので、ぜひみなさんお試しいただいて業務改善のお力になれればと思っています。ご静聴ありがとうございました。
(会場拍手)
エンジニアとマーケッターを両立
伊佐:ありがとうございました。すごいじゃないですか!
浅賀:デモが緊張しました(笑)。
伊佐:今の見てくださいよ。プログラミングを書かなくても、なんでもできますね。
浅賀:そうですね。
伊佐:kintoneのAPIドキュメントは、ふだん見られないと思うんですけど、僕らもけっこうがんばって作っています。カスタマイズが柔軟にできるように、がんばって作ってメンテナンスしています。
それが日本語さえわかれば使えるようになる。「そのレベルまで来たか」というところですね。
浅賀:それ以外にも郵便番号検索など、そういうよく使う便利な部品を最初から揃えているのでそういうのも作らずに済みます。
伊佐:浅賀さん、プログラマーからマーケッターになったら急に宣伝するようになりましたね(笑)。素晴らしいですけど。浅賀さんは、もうプログラムを書いていないんですか?
浅賀:いや、書いてます。プログラムもやりつつ、Customineも両方ですね。
伊佐:非常に楽しみなサービスですね。いつぐらいに?
浅賀:8月ごろには正式リリースですね。
伊佐:今は試せるんでしたっけ?
浅賀:今は無料で。
伊佐:無料で試したい方はぜひご相談をということで。
浅賀:ぜひお願いします。
伊佐:誰でもカスタマイズまでできる世界を試していただきたいなと思いますので、よろしくお願いします。ありがとうございました。
(会場拍手)