Post on 07-Apr-2017
kintone×WordPress ハンズオン
kintone エバンジェリスト 細谷 崇 ( hosoya takashi )
Twitter: @tkc49
WordBench京都 9月号
後日SlideShareで 公開します。
準備物の確認
ハンズオンの準備物の確認
kintoneのアカウント
ハンズオンの準備物の確認
WordPressの環境
36歳2015年4月から フリーのエンジニア ・WordPress ・kintone
自己紹介
自己紹介：WordPress
自己紹介：CoderDojo西宮／梅田
詳しくは
自己紹介：CoderDojo西宮／梅田
自己紹介：CoderDojo西宮／梅田
4月kintone Evangelist
ハンズオンの内容
ハンズオンの内容
ハンズオンの内容
①アンケートフォームの情報をkintoneへ登録
ハンズオンの内容
①アンケートフォームの情報をkintoneへ登録
②アンケートの情報をWEBページに表示
ハンズオンの内容
①アンケートフォームの情報をkintoneへ登録
②アンケートの情報を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アプリの作成
ここな！
まずはkintoneアプリの作成
「作成」クリックな！
まずはkintoneアプリの作成
「はじめから作成」クリックしてや！
まずはkintoneアプリの作成
「WordBench京都アンケート」って入力してや！
まずはkintoneアプリの作成
「一般設定」クリックな！
まずはkintoneアプリの作成
好きなアイコン選んでや！
まずはkintoneアプリの作成
自前アイコンも登録できるで！
まずはkintoneアプリの作成
表示画面のデザインを決めてや！
まずはkintoneアプリの作成
「アンケート一覧です。」って書いてな！
まずはkintoneアプリの作成
最後に「保存」してや！
まずはkintoneアプリの作成
いよいよ、「フォーム」作成やで！
まずはkintoneアプリの作成
文字列（1行） ドロップダウン
文字列（1行）
リンクドロップダウン
リッチエディター
まずはkintoneアプリの作成
カーソルをこのあたりにあてると歯車マークがでるで！
まずはkintoneアプリの作成
適宜必須項目とかも決めてな！
まずはkintoneアプリの作成
アルファベットにしときな！ ※ハイフンはあかんで！
まずはkintoneアプリの作成
でけたら「保存」や
まずはkintoneアプリの作成
一覧に表示する項目を作るで！
まずはkintoneアプリの作成
分かりやすい名前つけといて
ドラッグ＆ドロップで項目作ってや
一覧表示のフィルターやソートも出来るで 好きに設定してや！
まずはkintoneアプリの作成
はい、できたら「保存」や
まずはkintoneアプリの作成
最後に「設定完了」せな、 元も子もなくなるで！
まずはkintoneアプリの作成
当然「OK」や！！
まずはkintoneアプリの作成
アプリの完成や！ 中見てみ！
まずはkintoneアプリの作成
最後に作成した「一覧」の項目が でとるやろ！
まずはkintoneアプリの作成
一覧はようけ作成できて、ここで切り替えれるんや！
まずはkintoneアプリの作成
試しに１つデータ作成や！
まずはkintoneアプリの作成
まずはkintoneアプリの作成
入力したら「保存」な！
まずはkintoneアプリの作成
データにコメントも残せるで！
まずはkintoneアプリの作成
誰がどこ変更したかも わかるんやで
まずはkintoneアプリの作成
一覧ページに！
まずはkintoneアプリの作成
一覧表示もバッチリ！
アプリ完成
いよいよプラグインの作成
その前に・・・
デバックモードに・・・
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() {
//レジスター }
}
kintone-‐show-‐data.php
プラグインの型を書く
WordPressの管理画面をリロードして エラーが出てなかったらOK
アクションフックを登録する
class KintoneShowData { function __construct() {
//コンストラクター } public function register() {
//レジスター add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );
} public function plugins_loaded() {
// プラグインが全て読み込まれた後に実行 }
}
kintone-‐show-‐data.php
add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );
アクションフックを登録する
add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );
「plugins_loaded」というアクションフックに
アクションフックを登録する
add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );
「plugins_loaded」というアクションフックに 自身の「plugins_loaded」メソッドを登録する。
アクションフックを登録する
add_action( 'plugins_loaded', array( $this, 'plugins_loaded' ), 1 );
「plugins_loaded」というアクションフックに 自身の「plugins_loaded」メソッドを登録する。
登録すると、「plugins_loaded」が実行されたタイミングで 自身の「plugins_loaded」メソッドも実行して貰える。
これを「フック」と言います。 実行したい処理をフックしておく。
アクションフックを登録する
アクションフックを登録する
Simple Colors
WordPressの実行フローを視覚化してみる
http://www.warna.info/archives/279/
ショートコードを登録する
class KintoneShowData { function __construct() {
//コンストラクター } public function register() {
//レジスター 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！’; }
kintone-‐show-‐data.php
add_shortcode( 'KintoneShowData', array( $this, 'kintone_show_data_func' ));
ショートコードを登録する
ショートコードを登録する
kintoneのデータを取得する
[KintoneShowData]が実行されたら、 kintoneのデータを取得する。
kintone REST API
kintone REST API で必要なもの
kintone REST API で必要なもの
①サブドメイン xxx.cybozu.com/k/84/
②アプリ番号 xxx.cybozu.com/k/84/
サブドメイン, アプリ番号, APIトークン
kintone REST API で必要なもの
「このアプリの設定」をクリック！
kintone REST API で必要なもの
「詳細設定」をクリック！
kintone REST API で必要なもの
「APIトークン」をクリック！
kintone REST API で必要なもの
「生成する」をクリック！
kintone REST API で必要なもの
今回は表示するだけなので 「レコード閲覧」のみでOK！
kintone REST API で必要なもの
APIトークンをメモっとく
kintone REST API で必要なもの
「保存」をクリック
kintone REST API で必要なもの
必ず「設定完了」をする
kintone REST 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 ); ?>
kintoneのデータを取得する
・ ・ ・
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);
kintone-‐show-‐data.php
kintoneのデータを取得する
kintoneのデータを取得する
$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;
}
}
kintoneのデータを取得する
時間があれば 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
ぜひ！！！！