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アプリの作成
試しに1つデータ作成や!
まずは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
ぜひ!!!!

WordBench京都 9月号:kintone×WordPressハンズオン