Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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	
 ...
管理画面にプラグインを表示
プラグインリストに表示されればOK!
「有効化」にしてや!
プラグインの型を書く
<?php	
  
/**	
  
	
  *	
  Plugin	
  Name:	
  Kintone	
  Show	
  Data	
  
	
  *	
  Description:	
  Cybozu	
  ki...
プラグインの型を書く
WordPressの管理画面をリロードして
エラーが出てなかったらOK
アクションフックを登録する
class	
  KintoneShowData	
  {	
  
	
   function	
  __construct()	
  
	
   {	
  
//コンストラクター	
  
	
  }	
  
	
 ...
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」というアクションフックに
自身の...
add_action(	
  'plugins_loaded',	
  array(	
  $this,	
  'plugins_loaded'	
  ),	
  1	
  );
「plugins_loaded」というアクションフックに
自身の...
アクションフックを登録する
Simple Colors
WordPressの実行フローを視覚
化してみる
http://www.warna.info/
archives/279/
ショートコードを登録する
class	
  KintoneShowData	
  {	
  
	
   function	
  __construct()	
  
	
   {	
  
//コンストラクター	
  
	
  }	
  
	
  ...
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 を使いますが、
W...
kintoneのデータを取得する
・	
  
・	
  
・	
  
	
  public	
  function	
  plugins_loaded()	
  
	
  {	
  
//	
  プラグインが全て読み込まれた後に実行	
  
a...
kintoneのデータを取得する
kintoneのデータを取得する
$return_value	
  =	
  json_decode(	
  $res['body'],	
  true	
  );	
  
$str	
  	
  =	
  "<table	
  border=...
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://gith...
便利ツールの紹介:その他
https://cybozudev.zendesk.com/hc/ja/categories/200182110-SDK-%CE%B2-Tools
最後に
今回は時間の都合によりエラー処理やセキュリティを考慮
したコードにはなっていませんので、あしからずm(__)m
またパラメーターの設定画面などもっと汎用性のあるプラ
グインの開発をしたい場合、以下の書籍をオススメします。
最後に
11/20(金)Cybozu.com Conference 2015
ぜひ!!!!
WordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオン
WordBench京都 9月号:kintone×WordPressハンズオン
Upcoming SlideShare
Loading in …5
×

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

3,983 views

Published on

WordBench京都 9月号で、kintoneのデータを取得するWordPressプラグインを作成するハンズオンのスライドです。

Published in: Technology
  • Be the first to comment

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

  1. 1. kintone×WordPress ハンズオン kintone エバンジェリスト 細谷 崇 ( hosoya takashi ) Twitter: @tkc49 WordBench京都 9月号
  2. 2. 後日SlideShareで 公開します。
  3. 3. 準備物の確認
  4. 4. ハンズオンの準備物の確認 kintoneのアカウント
  5. 5. ハンズオンの準備物の確認 WordPressの環境
  6. 6. 36歳 2015年4月から フリーのエンジニア ・WordPress ・kintone 自己紹介
  7. 7. 自己紹介:WordPress
  8. 8. 自己紹介:CoderDojo西宮/梅田
  9. 9. 詳しくは 自己紹介:CoderDojo西宮/梅田
  10. 10. 自己紹介:CoderDojo西宮/梅田
  11. 11. 4月 kintone Evangelist
  12. 12. ハンズオンの内容
  13. 13. ハンズオンの内容
  14. 14. ハンズオンの内容 ①アンケートフォームの情報をkintoneへ登録
  15. 15. ハンズオンの内容 ①アンケートフォームの情報をkintoneへ登録 ②アンケートの情報をWEBページに表示
  16. 16. ハンズオンの内容 ①アンケートフォームの情報をkintoneへ登録 ②アンケートの情報をWEBページに表示 表示する部分の Pluginを作成
  17. 17. ハンズオンの内容 Cybozu WP to kintone kintoneのフォーム情報を取得し WEBサイトにフォームのページを 作成することが可能。
  18. 18. 表示するためのレシピ
  19. 19. 表示するためのレシピ ・kintone API/REST API ・Plugin API/Hooks ・Shortcode API
  20. 20. ドキュメント
  21. 21. ドキュメント kintoneの開発する為の ポータルサイト
  22. 22. ドキュメント WordPressの開発する 為のポータルサイト
  23. 23. Plugin API/Hooks Shortcode API
  24. 24. 英語がイヤイヤな方 (T_T)
  25. 25. ドキュメント WordPress プラグイン開発のバイブル ★4.3 ̶ 目次 ̶ 第5章 フィルターフックとアクションフッ クを理解する 第11章 WordPress APIリファレンス
  26. 26. では始めましょう
  27. 27. まずはkintoneアプリの作成 ここな!
  28. 28. まずはkintoneアプリの作成 「作成」クリックな!
  29. 29. まずはkintoneアプリの作成 「はじめから作成」 クリックしてや!
  30. 30. まずはkintoneアプリの作成 「WordBench京都アンケート」って 入力してや!
  31. 31. まずはkintoneアプリの作成 「一般設定」クリックな!
  32. 32. まずはkintoneアプリの作成 好きなアイコン選んでや!
  33. 33. まずはkintoneアプリの作成 自前アイコンも登録できるで!
  34. 34. まずはkintoneアプリの作成 表示画面のデザインを決めてや!
  35. 35. まずはkintoneアプリの作成 「アンケート一覧です。」って書いてな!
  36. 36. まずはkintoneアプリの作成 最後に「保存」してや!
  37. 37. まずはkintoneアプリの作成 いよいよ、「フォーム」作成やで!
  38. 38. まずはkintoneアプリの作成 文字列(1行) ドロップダウン 文字列(1行) リンク ドロップダウン リッチエディター
  39. 39. まずはkintoneアプリの作成 カーソルをこのあたりにあて ると歯車マークがでるで!
  40. 40. まずはkintoneアプリの作成 適宜必須項目とかも決めてな!
  41. 41. まずはkintoneアプリの作成 アルファベットにしときな! ※ハイフンはあかんで!
  42. 42. まずはkintoneアプリの作成 でけたら「保存」や
  43. 43. まずはkintoneアプリの作成 一覧に表示する項目を作るで!
  44. 44. まずはkintoneアプリの作成 分かりやすい名前つけといて ドラッグ&ドロップで項目作ってや 一覧表示のフィルターやソートも出来るで 好きに設定してや!
  45. 45. まずはkintoneアプリの作成 はい、できたら「保存」や
  46. 46. まずはkintoneアプリの作成 最後に「設定完了」せな、 元も子もなくなるで!
  47. 47. まずはkintoneアプリの作成 当然「OK」や!!
  48. 48. まずはkintoneアプリの作成 アプリの完成や! 中見てみ!
  49. 49. まずはkintoneアプリの作成 最後に作成した「一覧」の項目が でとるやろ!
  50. 50. まずはkintoneアプリの作成 一覧はようけ作成できて、ここで 切り替えれるんや!
  51. 51. まずはkintoneアプリの作成 試しに1つデータ作成や!
  52. 52. まずはkintoneアプリの作成
  53. 53. まずはkintoneアプリの作成 入力したら「保存」な!
  54. 54. まずはkintoneアプリの作成 データにコメントも残せるで!
  55. 55. まずはkintoneアプリの作成 誰がどこ変更したかも わかるんやで
  56. 56. まずはkintoneアプリの作成 一覧ページに!
  57. 57. まずはkintoneアプリの作成 一覧表示もバッチリ!
  58. 58. アプリ完成
  59. 59. いよいよプラグインの作成
  60. 60. その前に・・・
  61. 61. デバックモードに・・・ define(  'WP_DEBUG',  true  ); root/wp-­‐config.php
  62. 62. プラグインディレクトリーとファイルの作成
  63. 63. その前に・・・
  64. 64. hatamoto plugin作成を楽にしてくれる grunt-initテンプレート 便利なツールの紹介 使える環境の人は 使ったら便利です
  65. 65. プラグインディレクトリーとファイルの作成 「kintone-show-data」 kintone-show-data.php
  66. 66. プラグインディレクトリーとファイルの作成 他のプラグイン名と被らないように気をつけよう! 公式ディレクトリーに同じ名前のものがあると 上書きされる恐れがある
  67. 67. 管理画面にプラグインを表示
  68. 68. 管理画面にプラグインを表示 <?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
  69. 69. 管理画面にプラグインを表示 プラグインリストに表示されればOK! 「有効化」にしてや!
  70. 70. プラグインの型を書く <?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
  71. 71. プラグインの型を書く WordPressの管理画面をリロードして エラーが出てなかったらOK
  72. 72. アクションフックを登録する class  KintoneShowData  {     function  __construct()     {   //コンストラクター    }    public  function  register()    {   //レジスター   add_action(  'plugins_loaded',  array(  $this,  'plugins_loaded'  ),  1  );    }    public  function  plugins_loaded()    {   //  プラグインが全て読み込まれた後に実行    }   } kintone-­‐show-­‐data.php
  73. 73. add_action(  'plugins_loaded',  array(  $this,  'plugins_loaded'  ),  1  ); アクションフックを登録する
  74. 74. add_action(  'plugins_loaded',  array(  $this,  'plugins_loaded'  ),  1  ); 「plugins_loaded」というアクションフックに アクションフックを登録する
  75. 75. add_action(  'plugins_loaded',  array(  $this,  'plugins_loaded'  ),  1  ); 「plugins_loaded」というアクションフックに 自身の「plugins_loaded」メソッドを登録する。 アクションフックを登録する
  76. 76. add_action(  'plugins_loaded',  array(  $this,  'plugins_loaded'  ),  1  ); 「plugins_loaded」というアクションフックに 自身の「plugins_loaded」メソッドを登録する。 登録すると、「plugins_loaded」が実行されたタイミングで 自身の「plugins_loaded」メソッドも実行して貰える。 これを「フック」と言います。 実行したい処理をフックしておく。 アクションフックを登録する
  77. 77. アクションフックを登録する Simple Colors WordPressの実行フローを視覚 化してみる http://www.warna.info/ archives/279/
  78. 78. ショートコードを登録する 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
  79. 79. add_shortcode(  'KintoneShowData',  array(  $this,   'kintone_show_data_func'  )); ショートコードを登録する
  80. 80. ショートコードを登録する
  81. 81. kintoneのデータを取得する [KintoneShowData]が実行されたら、 kintoneのデータを取得する。 kintone REST API
  82. 82. kintone REST API で必要なもの
  83. 83. kintone REST API で必要なもの ①サブドメイン xxx.cybozu.com/k/84/ ②アプリ番号 xxx.cybozu.com/k/84/ サブドメイン, アプリ番号, APIトークン
  84. 84. kintone REST API で必要なもの 「このアプリの設定」をクリック!
  85. 85. kintone REST API で必要なもの 「詳細設定」をクリック!
  86. 86. kintone REST API で必要なもの 「APIトークン」をクリック!
  87. 87. kintone REST API で必要なもの 「生成する」をクリック!
  88. 88. kintone REST API で必要なもの 今回は表示するだけなので 「レコード閲覧」のみでOK!
  89. 89. kintone REST API で必要なもの APIトークンをメモっとく
  90. 90. kintone REST API で必要なもの 「保存」をクリック
  91. 91. kintone REST API で必要なもの 必ず「設定完了」をする
  92. 92. kintone REST API で必要なもの 当然「OK」
  93. 93. これでREST APIで接続する為の 必要なデータは いました。
  94. 94. 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   );  ?>
  95. 95. 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
  96. 96. kintoneのデータを取得する
  97. 97. 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;    }   }
  98. 98. kintoneのデータを取得する
  99. 99. 時間があれば Cybozu WP to kintone の使い方の説明をします。
  100. 100. 便利ツールの紹介
  101. 101. 便利ツールの紹介: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
  102. 102. 便利ツールの紹介:その他 https://cybozudev.zendesk.com/hc/ja/categories/200182110-SDK-%CE%B2-Tools
  103. 103. 最後に 今回は時間の都合によりエラー処理やセキュリティを考慮 したコードにはなっていませんので、あしからずm(__)m またパラメーターの設定画面などもっと汎用性のあるプラ グインの開発をしたい場合、以下の書籍をオススメします。
  104. 104. 最後に 11/20(金)Cybozu.com Conference 2015
  105. 105. ぜひ!!!!

×