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.

第35回 WordBench 大阪 kintoneハンズオン

6,112 views

Published on

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

Published in: Internet
  • Be the first to comment

第35回 WordBench 大阪 kintoneハンズオン

  1. 1. WordPress  ×  kintone 連携プラグイン   WordPress  to  kintone   概要とハンズオン サイボウズ株式会社   浅賀 功次   WordBench  Osaka  35        2014.11.15 Copyright  (C)  2014  Cybozu
  2. 2. 自己紹介 Copyright  (C)  2014  Cybozu 1  浅賀 功次(あさが こうじ)     サイボウズ株式会社 システムコンサルティング本部 関西 SC グループ マネージャー     東京都出身・宇治市在住     2006年中途入社、2007年から大阪オフィスで勤務     業務:関西エリアにおける kintone 開発者の発掘   WordPress 歴:1ヶ月ぐらい   cybozu.osaka
  3. 3. Agenda WordPress to kintone の概要  ハンズオン Copyright  (C)  2014  Cybozu 2
  4. 4. WordPress  ×  kintone  連携プラグイン   WordPress  to  kintone  の概要 Copyright  (C)  2014  Cybozu 3
  5. 5. WordPress  to  kintone とは? kintone と連携した WordPress の入力 フォームを簡単に作成するプラグイン。    開発はデジタルキューブ様にお願い。    GPLv2   Copyright  (C)  2014  Cybozu 4
  6. 6. プラグインの機能 WordPress の入力フォーム生成   –  kintone  アプリの設計情報を利用する仕組みで、 WordPress 側の設定はショートコードを1行記述する だけで完了   kintone へのデータ登録   –  入力フォームから登録されたデータを kintone  に保存    フィールドの表示・非表示    フィールドの並び順    キャッシュ機能   –  kintone の API リクエスト数の上限に配慮   –  WordPress に管理者でログインしている場合を除く Copyright  (C)  2014  Cybozu 5
  7. 7. 連携イメージ Copyright  (C)  2014  Cybozu 6 問い合わせ管理アプリ (アプリの設計情報取得) REST  API 自動生成されたフォーム 投稿ページ ショートコードを記述   [kintone  app=“アプリID”  token=“APIトークン”   sub_domain=“サブドメイン”] REST  API (データ登録)
  8. 8. 利用シーン Copyright  (C)  2014  Cybozu 7  問い合わせ管理    アンケート集計 >> >> ステータス管理 >> >> 集計・グラフ
  9. 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. 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. 11. 利用の流れ 1.  kintone アプリを作成   Copyright  (C)  2014  Cybozu 10 >>>
  12. 12. 利用の流れ 2.  WordPress にプラグインをインストール   Copyright  (C)  2014  Cybozu 11
  13. 13. 利用の流れ 3.  投稿ページにショートコードを記述   Copyright  (C)  2014  Cybozu 12
  14. 14. 利用の流れ 4.  ページを表示 Copyright  (C)  2014  Cybozu 13
  15. 15. 利用の流れ 5.  入力フォームから登録 Copyright  (C)  2014  Cybozu 14
  16. 16. 利用手順 6.  kintone に保存される Copyright  (C)  2014  Cybozu 15 >>>
  17. 17. ハンズオン   『WordPress  to  kintone』   をさわってみよう Copyright  (C)  2014  Cybozu 16
  18. 18. 事前の準備(1) WordPress 環境の用意   – リモート、ローカルどちらでも OK です   Copyright  (C)  2014  Cybozu 17
  19. 19. 事前の準備(2) kintone 環境の用意   – API  を利用する仕組みのため、スタンダード コースが必要です   – 環境が無い方はお試し環境の取得をお願いし ます。   https://kintone.cybozu.com/jp/trial/   •  開発者ライセンス用の環境は、提供に日数を要す るため、本日はお試し環境でお願いします。   Copyright  (C)  2014  Cybozu 18
  20. 20. 4.  WordPress  と kintone  を連携しよう 3.プラグインをインストールしてみよう 本日の流れ Copyright  (C)  2014  Cybozu 19 2.  kintone アプリを作ってみよう 1.  kintone にログインしてみよう
  21. 21. kintone にログイン   してみよう Copyright  (C)  2014  Cybozu 20
  22. 22. ログイン画面にアクセス Copyright  (C)  2014  Cybozu 21 https://サブドメイン.cybozu.com/ サブドメイン?   •  お試し環境取得時に設定した情報を使います。   •  開発者ライセンスの場合はサイボウズより提供されます。
  23. 23. ログイン情報を入力 Copyright  (C)  2014  Cybozu 22 お試し環境の取得が11/9の cybozu.com  定期メンテナンスより   •  前の場合→Administrator でログイン   •  後の場合→申請時のメールアドレスでログイン
  24. 24. ログイン完了 Copyright  (C)  2014  Cybozu 23 クリックして kintone にアクセス ユーザー情報の管理や cybozu.com   全体に影響する設定 メンテナンス等のお知らせ
  25. 25. kintone アプリを   作ってみよう Copyright  (C)  2014  Cybozu 24
  26. 26. これから作るアプリ Copyright  (C)  2014  Cybozu 25 製品の問い合わせを管理するためのアプリを作成します。
  27. 27. ポータル Copyright  (C)  2014  Cybozu 26 クリックして アプリを作成 機能の切り替え 管理者からの   お知らせ 通知 スペース アプリ 自分が作業者のタスク アカウントやシステムの設定
  28. 28. アプリの作成方法を選ぶ Copyright  (C)  2014  Cybozu 27 WordPress  の入力フォームから登録されたデータを保存 するためのアプリを作ります。 今回は問い合わせの管理を行うアプリを作成してみま しょう。
  29. 29. アプリの名前を入力 Copyright  (C)  2014  Cybozu 28 任意の名前を入力して保存します。 WordPress 側に表示される事はありません。
  30. 30. アプリの名前を入力 Copyright  (C)  2014  Cybozu 29 例例として「問い合わせ管理理」と設定します。  
  31. 31. 一般設定をクリック Copyright  (C)  2014  Cybozu 30 「⼀一般設定」でアイコンやデザインを選びます。  
  32. 32. 一般設定 Copyright  (C)  2014  Cybozu 31 好きなアイコンを選びます。   画像をアップロードする事もできます。 デザインテーマを選びます。   ※kintone の動作は変わりません
  33. 33. 一般設定 Copyright  (C)  2014  Cybozu 32 アプリグループを使うとアクセス権を一括で設定 できます。   Public→公開用、Private→自分用 アプリの説明を記載しておくと、一覧画面に 表示されます。
  34. 34. フォームの編集をクリック Copyright  (C)  2014  Cybozu 33 「フォームの編集」で画⾯面設計を⾏行行います。  
  35. 35. フォームの編集 Copyright  (C)  2014  Cybozu 34 フィールドをドラッグ&ドロップして配置や並び順の変更更 ができます。   フィールドの右端、下端をドラッグするとサイズが変更更で きます。  
  36. 36. 完成形 Copyright  (C)  2014  Cybozu 35 製品の問い合わせを管理理するアプリを作ります。  
  37. 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. 38. 一覧の追加をクリック Copyright  (C)  2014  Cybozu 37 「⼀一覧の追加」で⼀一覧画⾯面に表⽰示する項⽬目を選びます。  
  39. 39. 一覧の追加 Copyright  (C)  2014  Cybozu 38 ⼀一覧の表⽰示形式を選び、表⽰示するフィールドを設定します。 絞り込みにより、⼀一部のレコードだけ表⽰示する事もできます。  
  40. 40. 一覧の追加 Copyright  (C)  2014  Cybozu 39 必要最低限の顧客情報を表⽰示し、対応が未完了了の顧客だけが 表⽰示されるようにします。   例として「顧客リスト」と設定します。
  41. 41. 設定完了の前に Copyright  (C)  2014  Cybozu 40 WordPress から API をリクエストする際に必要となる API トークンの設定を行います。  
  42. 42. 詳細設定をクリック Copyright  (C)  2014  Cybozu 41
  43. 43. API トークンをクリック Copyright  (C)  2014  Cybozu 42
  44. 44. 生成するをクリック Copyright  (C)  2014  Cybozu 43
  45. 45. API トークンが生成されます Copyright  (C)  2014  Cybozu 44 WordPress から kintone にレコード を登録しますので「レコード追加」 のチェックを ON にします。 API トークンはパスワードと同じく大切な情報です。 実際の運用時には漏洩しないよう注意が必要です。 後ほど利用しますのでテキストエディタ にコピペしておいて下さい。
  46. 46. 設定完了です! Copyright  (C)  2014  Cybozu 45 これで kintone アプリの設定は完了です。 設定完了をクリックして、保存してください。
  47. 47. アプリを確認します Copyright  (C)  2014  Cybozu 46
  48. 48. データを登録してみましょう Copyright  (C)  2014  Cybozu 47
  49. 49. データを入力して保存します Copyright  (C)  2014  Cybozu 48
  50. 50. 一覧画面に戻ります Copyright  (C)  2014  Cybozu 49
  51. 51. 一覧画面の確認 Copyright  (C)  2014  Cybozu 50 URL  からアプリ ID を控えます。   https://サブドメイン.cybozu.com/k/アプリID/  
  52. 52. プラグインを   インストールしてみよう Copyright  (C)  2014  Cybozu 51
  53. 53. WordPress の管理画面にログイン Copyright  (C)  2014  Cybozu 52
  54. 54. プラグイン設定の画面へ Copyright  (C)  2014  Cybozu 53
  55. 55. 新規追加を選択 Copyright  (C)  2014  Cybozu 54
  56. 56. プラグインの検索 Copyright  (C)  2014  Cybozu 55 cybozu や kintone で検索!
  57. 57. プラグインのインストール Copyright  (C)  2014  Cybozu 56
  58. 58. インストール完了 Copyright  (C)  2014  Cybozu 57
  59. 59. インストールの確認 Copyright  (C)  2014  Cybozu 58
  60. 60. WordPress  と kintone  を 連携しよう Copyright  (C)  2014  Cybozu 59
  61. 61. 新規投稿の追加 Copyright  (C)  2014  Cybozu 60 タイトルと本文を入力して、公開します。
  62. 62. 新規投稿の追加  タイトル   – 任意の内容で構いません。   例として「製品に関するお問い合わせ」とし ます。    本文   – 「ショートコード」を入力します。   Copyright  (C)  2014  Cybozu 61
  63. 63. ショートコード  [kintone  app=“アプリ ID”   token=“API トークン”   sub_domain=“サブドメイン”]   Copyright  (C)  2014  Cybozu 62 アプリ ID と API トークンは、kintone  アプリの   作成時に控えた情報を使います。   ※改行は不要です。 ※パラメーターの間には半角スペースを入れます。
  64. 64. 公開します Copyright  (C)  2014  Cybozu 63
  65. 65. 作成したページを確認しましょう Copyright  (C)  2014  Cybozu 64
  66. 66. 連携されないフィールドタイプ   レコード番号   作成者、作成日時   更新者、更新日時   ユーザー選択   添付ファイル   ルックアップ   関連レコード一覧   カテゴリー   ステータス   グループ   テーブルとテーブルに含まれるフィールド Copyright  (C)  2014  Cybozu 65
  67. 67. 入力フォームのキャッシュ kintone  には、日間の API リクエスト数が   10,000  リクエスト/アプリの制限があります。    リクエスト数に配慮し、入力フォームの情報を WordPress 側にキャッシュしています。   入力フォームを表示しても、kintone  への API リ クエストは発生しないようになっています。    キャッシュをクリアしたい場合は、ページを更 新して下さい。   WordPress の管理者ユーザーで入力フォームを 表示した場合は、キャッシュは使われません。   Copyright  (C)  2014  Cybozu 66
  68. 68. API リクエスト数の確認方法は? Copyright  (C)  2014  Cybozu 67
  69. 69. データを登録してみましょう Copyright  (C)  2014  Cybozu 68
  70. 70. kintone を確認してみましょう Copyright  (C)  2014  Cybozu 69
  71. 71. 表示したくないフィールド Copyright  (C)  2014  Cybozu 70 受付日時は登録者に入力 させる必要は無い 対応状況は社内でステータス を管理する目的の項目
  72. 72. ショートコード  [kintone  app=“アプリ ID”   token=“API トークン”   sub_domain=“サブドメイン”   exclude=“ReceptionDate,Status”]   Copyright  (C)  2014  Cybozu 71 exclude パラメーターに受付日時と対応状況の   フィールドコードを指定します  
  73. 73. ページを再確認してみましょう Copyright  (C)  2014  Cybozu 72 受付日時と対応状況が消えています
  74. 74. 表示する順番を変えたい!  デフォルトでは kintone アプリ作成時に フィールドを配置した順番に表示されま す。   orderby  パラメーターと order パラメー ターを使う事で表示する順番を制御でき ます。 Copyright  (C)  2014  Cybozu 73
  75. 75. ショートコード  [kintone  app=“アプリ ID”   token=“API トークン”   sub_domain=“サブドメイン”   exclude=“ReceptionDate,Status”   orderby=“code”]   Copyright  (C)  2014  Cybozu 74 orderby パラメーターに  code  と指定します  
  76. 76. フィールドコード順に表示されます Copyright  (C)  2014  Cybozu 75 Corp Inquiry Number Person Product Tel
  77. 77. 76Copyright  (C)  2014  Cybozu お疲れ様でした。

×