第35回 WordBench 大阪で行ったkintoneのハンズオン資料です。 http://wbosaka.doorkeeper.jp/events/17133

1. WordPress
×
kintone 連携プラグイン
WordPress
to
kintone
概要とハンズオン
サイボウズ株式会社
浅賀 功次
WordBench
Osaka
35
2014.11.15
Copyright
(C)
2014
Cybozu

2. 自己紹介
Copyright
(C)
2014
Cybozu 1
浅賀 功次（あさが こうじ）
サイボウズ株式会社 システムコンサルティング本部
関西 SC グループ マネージャー
東京都出身・宇治市在住
2006年中途入社、2007年から大阪オフィスで勤務
業務：関西エリアにおける kintone 開発者の発掘
WordPress 歴：1ヶ月ぐらい
cybozu.osaka

3. Agenda
WordPress to kintone の概要
ハンズオン
Copyright
(C)
2014
Cybozu 2

4. WordPress
×
kintone
連携プラグイン
WordPress
to
kintone
の概要
Copyright
(C)
2014
Cybozu 3

5. WordPress
to
kintone とは？
kintone と連携した WordPress の入力
フォームを簡単に作成するプラグイン。
開発はデジタルキューブ様にお願い。
GPLv2
Copyright
(C)
2014
Cybozu 4

6. プラグインの機能
WordPress の入力フォーム生成
– kintone
アプリの設計情報を利用する仕組みで、
WordPress 側の設定はショートコードを1行記述する
だけで完了
kintone へのデータ登録
– 入力フォームから登録されたデータを kintone
に保存
フィールドの表示・非表示
フィールドの並び順
キャッシュ機能
– kintone の API リクエスト数の上限に配慮
– WordPress に管理者でログインしている場合を除く
Copyright
(C)
2014
Cybozu 5

7. 連携イメージ
Copyright
(C)
2014
Cybozu 6
問い合わせ管理アプリ
（アプリの設計情報取得）
REST
API
自動生成されたフォーム
投稿ページ
ショートコードを記述
[kintone
app=“アプリID”
token=“APIトークン”
sub_domain=“サブドメイン”]
REST
API
（データ登録）

8. 利用シーン
Copyright
(C)
2014
Cybozu 7
問い合わせ管理
アンケート集計
>> >> ステータス管理
>> >> 集計・グラフ

9. ショートコードのフォーマット
[kintone
app="app
id”
token="api
token"
sub_domain="subdomain
name"
exclude="field1,field2,…"
orderby="code”
order="asc”
]
Copyright
(C)
2014
Cybozu 8
※分かりやすくするためにインデントを付けています

10. ショートコードのパラメーター
[kintone
app="app
id"
token="api
token"
sub_domain="subdomain
name"
exclude="field1,field2,…"
orderby="code"
order="asc”]
Copyright
(C)
2014
Cybozu 9
パラメーター 設定値
app * kintone アプリのアプリID
token * kintone の API トークン
sub_domain * kintone のサブドメイン
exclude WordPress で非表示にする kintone フィールド
※フィールドコードで指定、カンマ区切りで複数指定可能
orderby WordPress での表示順を kintone のフィールド
コード順にする場合に「code」を指定
order 昇順に表示：asc、降順に表示：desc
basic_auth_user Basic認証用ユーザー名
basic_auth_pass Basic認証用パスワード

11. 利用の流れ
1. kintone アプリを作成
Copyright
(C)
2014
Cybozu 10
>>>

12. 利用の流れ
2. WordPress にプラグインをインストール
Copyright
(C)
2014
Cybozu 11

13. 利用の流れ
3. 投稿ページにショートコードを記述
Copyright
(C)
2014
Cybozu 12

14. 利用の流れ
4. ページを表示
Copyright
(C)
2014
Cybozu 13

15. 利用の流れ
5. 入力フォームから登録
Copyright
(C)
2014
Cybozu 14

16. 利用手順
6. kintone に保存される
Copyright
(C)
2014
Cybozu 15
>>>

17. ハンズオン
『WordPress
to
kintone』
をさわってみよう
Copyright
(C)
2014
Cybozu 16

18. 事前の準備(1)
WordPress 環境の用意
– リモート、ローカルどちらでも OK です
Copyright
(C)
2014
Cybozu 17

19. 事前の準備(2)
kintone 環境の用意
– API
を利用する仕組みのため、スタンダード
コースが必要です
– 環境が無い方はお試し環境の取得をお願いし
ます。
https://kintone.cybozu.com/jp/trial/
• 開発者ライセンス用の環境は、提供に日数を要す
るため、本日はお試し環境でお願いします。
Copyright
(C)
2014
Cybozu 18

20. 4.
WordPress
と kintone
を連携しよう
3.プラグインをインストールしてみよう
本日の流れ
Copyright
(C)
2014
Cybozu 19
2.
kintone アプリを作ってみよう
1.
kintone にログインしてみよう

21. kintone にログイン
してみよう
Copyright
(C)
2014
Cybozu 20

22. ログイン画面にアクセス
Copyright
(C)
2014
Cybozu 21
https://サブドメイン.cybozu.com/
サブドメイン？
• お試し環境取得時に設定した情報を使います。
• 開発者ライセンスの場合はサイボウズより提供されます。

23. ログイン情報を入力
Copyright
(C)
2014
Cybozu 22
お試し環境の取得が11/9の cybozu.com
定期メンテナンスより
• 前の場合→Administrator でログイン
• 後の場合→申請時のメールアドレスでログイン

24. ログイン完了
Copyright
(C)
2014
Cybozu 23
クリックして kintone にアクセス
ユーザー情報の管理や cybozu.com
全体に影響する設定
メンテナンス等のお知らせ

25. kintone アプリを
作ってみよう
Copyright
(C)
2014
Cybozu 24

26. これから作るアプリ
Copyright
(C)
2014
Cybozu 25
製品の問い合わせを管理するためのアプリを作成します。

27. ポータル
Copyright
(C)
2014
Cybozu 26
クリックして
アプリを作成
機能の切り替え
管理者からの
お知らせ
通知
スペース
アプリ
自分が作業者のタスク アカウントやシステムの設定

28. アプリの作成方法を選ぶ
Copyright
(C)
2014
Cybozu 27
WordPress
の入力フォームから登録されたデータを保存
するためのアプリを作ります。
今回は問い合わせの管理を行うアプリを作成してみま
しょう。

29. アプリの名前を入力
Copyright
(C)
2014
Cybozu 28
任意の名前を入力して保存します。
WordPress 側に表示される事はありません。

30. アプリの名前を入力
Copyright
(C)
2014
Cybozu 29
例例として「問い合わせ管理理」と設定します。

31. 一般設定をクリック
Copyright
(C)
2014
Cybozu 30
「⼀一般設定」でアイコンやデザインを選びます。

32. 一般設定
Copyright
(C)
2014
Cybozu 31
好きなアイコンを選びます。
画像をアップロードする事もできます。
デザインテーマを選びます。
※kintone の動作は変わりません

33. 一般設定
Copyright
(C)
2014
Cybozu 32
アプリグループを使うとアクセス権を一括で設定
できます。
Public→公開用、Private→自分用
アプリの説明を記載しておくと、一覧画面に
表示されます。

34. フォームの編集をクリック
Copyright
(C)
2014
Cybozu 33
「フォームの編集」で画⾯面設計を⾏行行います。

35. フォームの編集
Copyright
(C)
2014
Cybozu 34
フィールドをドラッグ&ドロップして配置や並び順の変更更
ができます。
フィールドの右端、下端をドラッグするとサイズが変更更で
きます。

36. 完成形
Copyright
(C)
2014
Cybozu 35
製品の問い合わせを管理理するアプリを作ります。

37. フィールドの設定情報
Copyright
(C)
2014
Cybozu 36
タイプ フィールド名 フィールド
コード
その他の変更内容
文字列(1行) 会社名 Corp
文字列(1行) お名前 Person
文字列(1行) 電話番号 Tel
ユーザー選択 担当者 Staff
日時 受付日時 ReceptionDate
ドロップダウン 対応状況 Status 項目と順番：未対応、対応中、
完了
初期値：未対応
ラジオボタン ご利用人数 Number
項目と順番：∼100名、101∼
500名、501∼1000名、1001
名∼
チェックボックス 製品名 Product
項目と順番：kintone、Garoon、
Office
文字列(複数行) お問い合わせ内容 Inquiry
横幅を大きく

38. 一覧の追加をクリック
Copyright
(C)
2014
Cybozu 37
「⼀一覧の追加」で⼀一覧画⾯面に表⽰示する項⽬目を選びます。

39. 一覧の追加
Copyright
(C)
2014
Cybozu 38
⼀一覧の表⽰示形式を選び、表⽰示するフィールドを設定します。
絞り込みにより、⼀一部のレコードだけ表⽰示する事もできます。

40. 一覧の追加
Copyright
(C)
2014
Cybozu 39
必要最低限の顧客情報を表⽰示し、対応が未完了了の顧客だけが
表⽰示されるようにします。
例として「顧客リスト」と設定します。

41. 設定完了の前に
Copyright
(C)
2014
Cybozu 40
WordPress から API をリクエストする際に必要となる
API トークンの設定を行います。

42. 詳細設定をクリック
Copyright
(C)
2014
Cybozu 41

43. API トークンをクリック
Copyright
(C)
2014
Cybozu 42

44. 生成するをクリック
Copyright
(C)
2014
Cybozu 43

45. API トークンが生成されます
Copyright
(C)
2014
Cybozu 44
WordPress から kintone にレコード
を登録しますので「レコード追加」
のチェックを ON にします。
API トークンはパスワードと同じく大切な情報です。
実際の運用時には漏洩しないよう注意が必要です。
後ほど利用しますのでテキストエディタ
にコピペしておいて下さい。

46. 設定完了です！
Copyright
(C)
2014
Cybozu 45
これで kintone アプリの設定は完了です。
設定完了をクリックして、保存してください。

47. アプリを確認します
Copyright
(C)
2014
Cybozu 46

48. データを登録してみましょう
Copyright
(C)
2014
Cybozu 47

49. データを入力して保存します
Copyright
(C)
2014
Cybozu 48

50. 一覧画面に戻ります
Copyright
(C)
2014
Cybozu 49

51. 一覧画面の確認
Copyright
(C)
2014
Cybozu 50
URL
からアプリ ID を控えます。
https://サブドメイン.cybozu.com/k/アプリID/

52. プラグインを
インストールしてみよう
Copyright
(C)
2014
Cybozu 51

53. WordPress の管理画面にログイン
Copyright
(C)
2014
Cybozu 52

54. プラグイン設定の画面へ
Copyright
(C)
2014
Cybozu 53

55. 新規追加を選択
Copyright
(C)
2014
Cybozu 54

56. プラグインの検索
Copyright
(C)
2014
Cybozu 55
cybozu や kintone で検索！

57. プラグインのインストール
Copyright
(C)
2014
Cybozu 56

58. インストール完了
Copyright
(C)
2014
Cybozu 57

59. インストールの確認
Copyright
(C)
2014
Cybozu 58

60. WordPress
と kintone
を
連携しよう
Copyright
(C)
2014
Cybozu 59

61. 新規投稿の追加
Copyright
(C)
2014
Cybozu 60
タイトルと本文を入力して、公開します。

62. 新規投稿の追加
タイトル
– 任意の内容で構いません。
例として「製品に関するお問い合わせ」とし
ます。
本文
– 「ショートコード」を入力します。
Copyright
(C)
2014
Cybozu 61

63. ショートコード
[kintone
app=“アプリ ID”
token=“API トークン”
sub_domain=“サブドメイン”]
Copyright
(C)
2014
Cybozu 62
アプリ ID と API トークンは、kintone
アプリの
作成時に控えた情報を使います。
※改行は不要です。
※パラメーターの間には半角スペースを入れます。

64. 公開します
Copyright
(C)
2014
Cybozu 63

65. 作成したページを確認しましょう
Copyright
(C)
2014
Cybozu 64

66. 連携されないフィールドタイプ
レコード番号
作成者、作成日時
更新者、更新日時
ユーザー選択
添付ファイル
ルックアップ
関連レコード一覧
カテゴリー
ステータス
グループ
テーブルとテーブルに含まれるフィールド
Copyright
(C)
2014
Cybozu 65

67. 入力フォームのキャッシュ
kintone
には、日間の API リクエスト数が
10,000
リクエスト/アプリの制限があります。
リクエスト数に配慮し、入力フォームの情報を
WordPress 側にキャッシュしています。
入力フォームを表示しても、kintone
への API リ
クエストは発生しないようになっています。
キャッシュをクリアしたい場合は、ページを更
新して下さい。
WordPress の管理者ユーザーで入力フォームを
表示した場合は、キャッシュは使われません。
Copyright
(C)
2014
Cybozu 66

68. API リクエスト数の確認方法は？
Copyright
(C)
2014
Cybozu 67

69. データを登録してみましょう
Copyright
(C)
2014
Cybozu 68

70. kintone を確認してみましょう
Copyright
(C)
2014
Cybozu 69

71. 表示したくないフィールド
Copyright
(C)
2014
Cybozu 70
受付日時は登録者に入力
させる必要は無い
対応状況は社内でステータス
を管理する目的の項目

72. ショートコード
[kintone
app=“アプリ ID”
token=“API トークン”
sub_domain=“サブドメイン”
exclude=“ReceptionDate,Status”]
Copyright
(C)
2014
Cybozu 71
exclude パラメーターに受付日時と対応状況の
フィールドコードを指定します

73. ページを再確認してみましょう
Copyright
(C)
2014
Cybozu 72
受付日時と対応状況が消えています

74. 表示する順番を変えたい！
デフォルトでは kintone アプリ作成時に
フィールドを配置した順番に表示されま
す。
orderby
パラメーターと order パラメー
ターを使う事で表示する順番を制御でき
ます。
Copyright
(C)
2014
Cybozu 73

75. ショートコード
[kintone
app=“アプリ ID”
token=“API トークン”
sub_domain=“サブドメイン”
exclude=“ReceptionDate,Status”
orderby=“code”]
Copyright
(C)
2014
Cybozu 74
orderby パラメーターに
code
と指定します

76. フィールドコード順に表示されます
Copyright
(C)
2014
Cybozu 75
Corp
Inquiry
Number
Person
Product
Tel

77. 76Copyright
(C)
2014
Cybozu
お疲れ様でした。