WordBench京都９月号：kintone×WordPressハンズオン

kintone×WordPress ハンズオン

kintone エバンジェリスト細谷崇 ( hosoya takashi )

Twitter: @tkc49

WordBench京都 9月号

後日SlideShareで公開します。

準備物の確認

ハンズオンの準備物の確認

kintoneのアカウント

ハンズオンの準備物の確認

WordPressの環境

36歳2015年4月からフリーのエンジニア・WordPress ・kintone

自己紹介

自己紹介：WordPress

自己紹介：CoderDojo西宮／梅田

詳しくは



4月kintone Evangelist

ハンズオンの内容



①アンケートフォームの情報をkintoneへ登録



②アンケートの情報をWEBページに表示



②アンケートの情報をWEBページに表示

表示する部分のPluginを作成


Cybozu WP to kintone

kintoneのフォーム情報を取得しWEBサイトにフォームのページを

作成することが可能。

表示するためのレシピ

表示するためのレシピ

・kintone API/REST API ・Plugin API/Hooks ・Shortcode API

ドキュメント

ドキュメント

kintoneの開発する為のポータルサイト

ドキュメント

WordPressの開発する為のポータルサイト

Plugin API/Hooks

Shortcode API

英語がイヤイヤな方 (T_T)

ドキュメント

WordPress プラグイン開発のバイブル

★4.3̶ 目次 ̶ 第5章

フィルターフックとアクションフックを理解する

第11章 WordPress APIリファレンス

では始めましょう

まずはkintoneアプリの作成

ここな！


「作成」クリックな！


「はじめから作成」クリックしてや！


「WordBench京都アンケート」って入力してや！


「一般設定」クリックな！


好きなアイコン選んでや！


自前アイコンも登録できるで！


表示画面のデザインを決めてや！


「アンケート一覧です。」って書いてな！


最後に「保存」してや！


いよいよ、「フォーム」作成やで！


文字列（1行）ドロップダウン

文字列（1行）

リンクドロップダウン

リッチエディター


カーソルをこのあたりにあてると歯車マークがでるで！


適宜必須項目とかも決めてな！


アルファベットにしときな！ ※ハイフンはあかんで！


でけたら「保存」や


一覧に表示する項目を作るで！


分かりやすい名前つけといて

ドラッグ＆ドロップで項目作ってや

一覧表示のフィルターやソートも出来るで好きに設定してや！


はい、できたら「保存」や


最後に「設定完了」せな、元も子もなくなるで！


当然「OK」や！！


アプリの完成や！中見てみ！


最後に作成した「一覧」の項目がでとるやろ！


一覧はようけ作成できて、ここで切り替えれるんや！


試しに１つデータ作成や！



入力したら「保存」な！


データにコメントも残せるで！


誰がどこ変更したかもわかるんやで


一覧ページに！


一覧表示もバッチリ！

アプリ完成

いよいよプラグインの作成

その前に・・・

デバックモードに・・・

define( 'WP_DEBUG', true );

root/wp-‐config.php

プラグインディレクトリーとファイルの作成

その前に・・・

hatamoto

plugin作成を楽にしてくれるgrunt-initテンプレート

便利なツールの紹介

使える環境の人は使ったら便利です


「kintone-show-data」

kintone-show-data.php


他のプラグイン名と被らないように気をつけよう！公式ディレクトリーに同じ名前のものがあると

上書きされる恐れがある

管理画面にプラグインを表示


<?php /** * Plugin Name: Kintone Show Data * Description: Cybozu kintoneの情報を表示します。 * Version: 0.0.1 * Author: Your Name * License: GPLv2 * Domain Path: /languages */

kintone-‐show-‐data.php


プラグインリストに表示されればOK！「有効化」にしてや！

プラグインの型を書く

<?php /** * Plugin Name: Kintone Show Data * Description: Cybozu kintoneの情報を表示します。 * Version: 0.0.1 * Author: Takashi Hosoya * License: GPLv2 * Domain Path: /languages */

$KintoneShowData = new KintoneShowData(); $KintoneShowData-‐>register();

class KintoneShowData { function __construct() {

//コンストラクター } public function register() {

//レジスター }

}


プラグインの型を書く

WordPressの管理画面をリロードしてエラーが出てなかったらOK

アクションフックを登録する



//レジスター add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );

} public function plugins_loaded() {

// プラグインが全て読み込まれた後に実行 }

}


add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );



「plugins_loaded」というアクションフックに



「plugins_loaded」というアクションフックに自身の「plugins_loaded」メソッドを登録する。



「plugins_loaded」というアクションフックに自身の「plugins_loaded」メソッドを登録する。

登録すると、「plugins_loaded」が実行されたタイミングで自身の「plugins_loaded」メソッドも実行して貰える。

これを「フック」と言います。実行したい処理をフックしておく。



Simple Colors

WordPressの実行フローを視覚化してみる

http://www.warna.info/archives/279/

ショートコードを登録する



//レジスター add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );

} public function plugins_loaded() {

// プラグインが全て読み込まれた後に実行 add_shortcode( 'KintoneShowData', array( $this, 'kintone_show_data_func' ));

} public function kintone_show_data_func(){

// 「KintoneShowData」ショートコードが呼ばれたら実行する

return ‘表示OK！’; }


add_shortcode( 'KintoneShowData', array( $this, 'kintone_show_data_func' ));



kintoneのデータを取得する

[KintoneShowData]が実行されたら、 kintoneのデータを取得する。

kintone REST API

kintone REST API で必要なもの


①サブドメイン xxx.cybozu.com/k/84/

②アプリ番号 xxx.cybozu.com/k/84/

サブドメイン, アプリ番号, APIトークン


「このアプリの設定」をクリック！


「詳細設定」をクリック！


「APIトークン」をクリック！


「生成する」をクリック！


今回は表示するだけなので「レコード閲覧」のみでOK！


APIトークンをメモっとく


「保存」をクリック


必ず「設定完了」をする


当然「OK」

これでREST APIで接続する為の必要なデータは揃いました。

WordPressでのREST APIの利用

$response = wp_remote_get( $url, $args );

PHPから外部APIを叩く時は、file_get_contents を使いますが、 WordPressには、wp_remote_get 関数が用意されているので、そちらを使うのが良いです！

<?php $args = array( 'timeout' => 5, 'redirection' => 5, 'httpversion' => '1.0', 'user-‐agent' => 'WordPress/' . $wp_version . '; ' . get_bloginfo( 'url' ), 'blocking' => true, 'headers' => array(), 'cookies' => array(), 'body' => null, 'compress' => false, 'decompress' => true, 'sslverify' => true, 'stream' => false, 'filename' => null ); ?>


・・・

public function plugins_loaded() {

// プラグインが全て読み込まれた後に実行 add_shortcode( 'KintoneShowData', array( $this, 'kintone_show_data_func' ));

} public function kintone_show_data_func(){

// 「KintoneShowData」ショートコードが呼ばれたら実行する

$url = 'https://サブドメイン.cybozu.com/k/v1/records.json?app=アプリ番号';

$headers = array( 'X-‐Cybozu-‐API-‐Token' => ‘トークン' );

$res = wp_remote_get( $url, array( 'headers' => $headers ) ); $return_value = json_decode( $res['body'], true );

// ちゃんと取得出来ているか確認する var_dump($return_value);




$return_value = json_decode( $res['body'], true );

$str = "<table border=‘1'>"; $str .= "<tr>"; $str .= "<th>レコード番号</th>";

$str .= "<th>名前</th>";

$str .= "<th>性別</th>";

$str .= "<th>メールアドレス</th>";

$str .= "<th>満足度</th>";

$str .= "<th>感想</th>"; $str .= "</tr>"; for( $i=0; $i < count( $return_value['records'] ); $i++ ){

$str .= "<tr>"; $str .= sprintf("<td>%s</td>", $return_value['records'][$i]['レコード番号']['value']); $str .= sprintf("<td>%s</td>", $return_value['records'][$i]['name']['value']); $str .= sprintf("<td>%s</td>", $return_value['records'][$i]['sex']['value']); $str .= sprintf("<td>%s</td>", $return_value['records'][$i]['email']['value']); $str .= sprintf("<td>%s</td>", $return_value['records'][$i]['satisfaction']['value']);

$str .= sprintf("<td>%s</td>", $return_value['records'][$i]['impressions']['value']); $str .= "</tr>"; } $str .= "</table>"; return $str;

}

}


時間があれば Cybozu WP to kintone の使い方の説明をします。

便利ツールの紹介

便利ツールの紹介：kintone PHP SDK

The Kintone SDK for PHP https://github.com/hissy/kintone-php

kintone API SDK for PHP https://github.com/cstap/kintone-sdk-php

便利ツールの紹介：その他

https://cybozudev.zendesk.com/hc/ja/categories/200182110-SDK-%CE%B2-Tools

最後に

今回は時間の都合によりエラー処理やセキュリティを考慮したコードにはなっていませんので、あしからずm(__)m またパラメーターの設定画面などもっと汎用性のあるプラグインの開発をしたい場合、以下の書籍をオススメします。

最後に

11/20(金）Cybozu.com Conference 2015

ぜひ！！！！

Technology

WordBench京都 ９月号：kintone×WordPressハンズオン

WordBench京都９月号：kintone×WordPressハンズオン