WordPress × kintone API連携実践_たにぐち まこと氏
?
3 likes?3,328 views
kintone devCamp 2017 A-1セッション資料。 「WordPress × kintone API連携実践 ～CMSとの連携でデータの有効活用をしよう～」
![2017/6/26 WordPress?×?kintone?API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 4/11
固定ページを作成して、「[mworm_formkey key=”x”]」を貼り付ける
? お問い合わせフォームやアンケートフォームを手軽に作成できる
kintoneでお問い合わせ管理システムを作ろう
?
次のお問い合わせフォームを作成
?
?
お名前 name テキストフィールド](https://image.slidesharecdn.com/kintonedevcamptaniguchi-170714011322/85/WordPress-x-kintone-API-_-4-320.jpg)
![2017/6/26 WordPress?×?kintone?API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 5/11
1
2
3
4
5
6
7
8
9
10
11
12
13
※ 次のコードをコピーして利用しても構いません
お名前
[mwform_text name="name" size="60"]
メールアドレス
[mwform_text name="mail" size="60"]
お問い合わせの種類
[mwform_select name="category" children="サービス内容,要望,その他"]
お問い合わせ内容
[mwform_textarea name="memo" cols="50" rows="5"]
[mwform_submitButton name="send" confirm_value="確認画面へ"
submit_value="送信する"]
先ほどのセッションで作成した、APIトークンを改めてコピーしておく
WordPressで「プラグイン→新規追加」で「MW WP Form kintone」を検索
インストールして有効化したら、「MW WP Form→kintone」メニューを選択
?
メールアドレス mail Emailフィールド
お問い合わせの種類 category セレクトボックス（サービス内容,要
望,その他）
お問い合わせ内容 memo テキストエリア
確認?送信ボタン](https://image.slidesharecdn.com/kintonedevcamptaniguchi-170714011322/85/WordPress-x-kintone-API-_-5-320.jpg)
![2017/6/26 WordPress?×?kintone?API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 7/11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
WordPressで新しい固定ページを作成し、URLを「list」に設定
Cloud 9で、「wp-content/themes/twentysixteen」フォルダに、次の内容で「page-list.php」を作成
<?php get_header(); ?>
<div id="primary" class="content-area">
? ? <main id="main" class="site-main" role="main">
? ? ? ? <h1>物件一覧</h1>
? ? ? ? <?php
? ? ? ? define("API_TOKEN", "");
? ? ? ? define("SUB_DOMAIN", "");
? ? ? ? define("APP_NO", "");
? ? ? ? //サーバ送信するHTTPヘッダを設定
? ? ? ? $context = stream_context_create(array (
? ? ? ? ? ? ? ? 'http'=>array(
? ? ? ? ? ? ? ? 'method'=>'GET',
? ? ? ? ? ? ? ? 'header'=> "X-Cybozu-API-Token:". API_TOKEN ."rn"
? ? ? ? ? ? )
? ? ? ? ));
? ? ? ??
? ? ? ? $param = 'app=' . APP_NO;
? ? ? ? $contents = file_get_contents('https://' . SUB_DOMAIN . '.cybozu.
com/k/v1/records.json?' . $param, FALSE, $context);
? ? ? ? // 正常に動作しない場合は、以下のコメントを外してください
? ? ? ? //var_dump($http_response_header);
? ? ? ? $data = json_decode($contents, true);
? ? ? ? //画面に出力
? ? ? ? foreach ($data['records'] as $d):
? ? ? ? ?>
? ? ? ? ? <h2><a href="<?= home_url('/detail/?id=' . $d['レコード番号']['va
lue']); ?>"><?= $d['物件名']['value']; ?></a></h2>
? ? ? ? ? <p><?= $d['物件所在地']['value']; ?></p>
? ? ? ? <?php endforeach; ?>
? ? </main><!-- .site-main -->
? ? <?php get_sidebar('content-bottom'); ?>](https://image.slidesharecdn.com/kintonedevcamptaniguchi-170714011322/85/WordPress-x-kintone-API-_-7-320.jpg)
![2017/6/26 WordPress?×?kintone?API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 9/11
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1
2
3
4
5
? ? ? ? ? ? ? ? 'method'=>'GET',
? ? ? ? ? ? ? ? 'header'=> "X-Cybozu-API-Token:". API_TOKEN ."rn"
? ? ? ? ? ? )
? ? ? ? ));
? ? ? ??
? ? ? ? $param = 'app=' . APP_NO . '&id=' . intval($_REQUEST['id']);
? ? ? ? $contents = file_get_contents( 'https://'. SUB_DOMAIN .'.cybozu.c
om/k/v1/record.json?' . $param, FALSE, $context );
? ? ? ? // 正常に動作しない場合は以下のコメントアウトを外す
? ? ? ? //var_dump($http_response_header);
? ? ? ??
? ? ? ? $data = json_decode($contents, true);
? ? ? ? $data = $data['record'];
? ? ?>
? ? <h1><?= $data['物件名']['value']; ?></h1>
? ? <!-- ここに追加 -->
? ? </main><!-- .site-main -->
? ? <?php get_sidebar('content-bottom'); ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
?
画像を表示する
アプリに「添付ファイル」フィールドを追加します
ぱくたそなどから、写真を拝借して登録します
プログラムに次のように追加します
<?php
$param = 'fileKey=' . $data['添付ファイル']['value'][0]['fileKey'];
$contents = file_get_contents('https://' . SUB_DOMAIN . '.cybozu.com/k/v
1/file.json?' . $param, false, $context);
?>
<img src=/kintone-papers/kintone-dev-camp-taniguchi/"data:image/jpeg;base64,<?= base64_encode($contents); ?>">
画像が表示されます](https://image.slidesharecdn.com/kintonedevcamptaniguchi-170714011322/85/WordPress-x-kintone-API-_-9-320.jpg)
WordPress × kintone API連携実践_たにぐち まこと氏
- 1. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 1/11 WordPress × kintone API連携実践 kintone devCamp 2017～Early Summer～ はじめに このスライド（？）は、次のURLで公開されています。画面に開きながらご覧ください。（コピペする箇所 があります） http://bit.ly/kintone_2017dc WordPressとは ? 世界シェア No.1のブログツール（CMS） ブログはもちろん、会社サイトも情報サイトもキュレーションも 開発言語は、PHP＋MySQL ? WordPressを触ってみよう with Cloud9 ?
- 2. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 2/11 Create a new workspaceをクリックし、WordPressを選んで作成 「再生ボタン」をクリックして起動。WordPressのセットアップ ログインしてダッシュボードを表示 ? 記事?固定ページを作る 「投稿→新規追加」で記事を作成して「公開」ボタンをクリックする 「固定ページ→新規追加」でページを作成して公開する ?「投稿」は時系列の記事、「固定ページ」は階層構造を持ったページの制作 ? テーマを変える 外観→テーマでテーマを変更する Cloud 9のファイル一覧で「wp-content→themes」フォルダーを確認 ? WordPressのカスタマイズは、テーマのカスタマイズがキモ ? プラグインを入れる 「プラグイン→新規追加」で右上の検索窓に「MW WP Form」と入力 検索結果からインストール→有効化をクリックする 「MW WP Form→新規追加」でメールフォームを作成 ?
- 4. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 4/11 固定ページを作成して、「[mworm_formkey key=”x”]」を貼り付ける ? お問い合わせフォームやアンケートフォームを手軽に作成できる kintoneでお問い合わせ管理システムを作ろう ? 次のお問い合わせフォームを作成 ? ? お名前 name テキストフィールド
- 5. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 5/11 1 2 3 4 5 6 7 8 9 10 11 12 13 ※ 次のコードをコピーして利用しても構いません お名前 [mwform_text name="name" size="60"] メールアドレス [mwform_text name="mail" size="60"] お問い合わせの種類 [mwform_select name="category" children="サービス内容,要望,その他"] お問い合わせ内容 [mwform_textarea name="memo" cols="50" rows="5"] [mwform_submitButton name="send" confirm_value="確認画面へ" submit_value="送信する"] 先ほどのセッションで作成した、APIトークンを改めてコピーしておく WordPressで「プラグイン→新規追加」で「MW WP Form kintone」を検索 インストールして有効化したら、「MW WP Form→kintone」メニューを選択 ? メールアドレス mail Emailフィールド お問い合わせの種類 category セレクトボックス（サービス内容,要 望,その他） お問い合わせ内容 memo テキストエリア 確認?送信ボタン
- 6. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 6/11 コピーしているトークン文字列を「APIトークン」欄に貼り付ける その他、サブドメイン名（https://xxxx.cybozu.com の「xxxx」部分）、ユーザー名などを入力 APP IDは、kintoneのURLの次の部分で確認 フォーム識別子は、フォームの「フォーム識別子」から数字だけを抜き出して入力する ? これで設定完了。送信すると、kintoneにデータが挿入されます ? 注意点 フィールドコードと、MW WP Formのコードを合わせる APIトークン設定で「追加」を許可する。保存ボタンも忘れずに ? お問い合わせをkintoneで管理するメリット ? 安全 ステータス管理ができる スレッド機能や、履歴機能などでお問い合わせの履歴が取得できる 顧客情報を蓄積し、メールマーケティングや統計などに活かせる ? kintoneの物件情報を、Webページで公開しよう ? 新しいアプリを追加し、「アプリストアから選ぶ→不動産物件マスタ」を選択 データを 3-4件登録しておく 設定→APIトークン→「生成する」ボタンをクリックし、保存。アプリも保存しておく ? WordPressに表示させる ? ?
- 7. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 7/11 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 WordPressで新しい固定ページを作成し、URLを「list」に設定 Cloud 9で、「wp-content/themes/twentysixteen」フォルダに、次の内容で「page-list.php」を作成 <?php get_header(); ?> <div id="primary" class="content-area"> ? ? <main id="main" class="site-main" role="main"> ? ? ? ? <h1>物件一覧</h1> ? ? ? ? <?php ? ? ? ? define("API_TOKEN", ""); ? ? ? ? define("SUB_DOMAIN", ""); ? ? ? ? define("APP_NO", ""); ? ? ? ? //サーバ送信するHTTPヘッダを設定 ? ? ? ? $context = stream_context_create(array ( ? ? ? ? ? ? ? ? 'http'=>array( ? ? ? ? ? ? ? ? 'method'=>'GET', ? ? ? ? ? ? ? ? 'header'=> "X-Cybozu-API-Token:". API_TOKEN ."rn" ? ? ? ? ? ? ) ? ? ? ? )); ? ? ? ?? ? ? ? ? $param = 'app=' . APP_NO; ? ? ? ? $contents = file_get_contents('https://' . SUB_DOMAIN . '.cybozu. com/k/v1/records.json?' . $param, FALSE, $context); ? ? ? ? // 正常に動作しない場合は、以下のコメントを外してください ? ? ? ? //var_dump($http_response_header); ? ? ? ? $data = json_decode($contents, true); ? ? ? ? //画面に出力 ? ? ? ? foreach ($data['records'] as $d): ? ? ? ? ?> ? ? ? ? ? <h2><a href="<?= home_url('/detail/?id=' . $d['レコード番号']['va lue']); ?>"><?= $d['物件名']['value']; ?></a></h2> ? ? ? ? ? <p><?= $d['物件所在地']['value']; ?></p> ? ? ? ? <?php endforeach; ?> ? ? </main><!-- .site-main --> ? ? <?php get_sidebar('content-bottom'); ?>
- 8. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 8/11 37 38 39 40 1 2 3 4 5 6 7 8 9 10 11 12 13 </div><!-- .content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?> APIトークン、アプリID、サブドメインを 7, 8, 9行目にセット 画面に、kintoneに登録した物件情報が表示されます。 同じく、固定ページを作成してURLを「detail」にし、テーマフォルダー内に、次の内容で「page- detail.php」を作成します。 <?php get_header(); ?> <div id="primary" class="content-area"> ? ? <main id="main" class="site-main" role="main"> ? ? ? ? <h1>物件一覧</h1> ? ? ? ? <?php ? ? ? ? define("API_TOKEN", ""); ? ? ? ? define("SUB_DOMAIN", ""); ? ? ? ? define("APP_NO", ""); ? ? ? ? //サーバ送信するHTTPヘッダを設定 ? ? ? ? $context = stream_context_create(array ( ? ? ? ? ? ? ? ? 'http'=>array( ?
- 9. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 9/11 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 1 2 3 4 5 ? ? ? ? ? ? ? ? 'method'=>'GET', ? ? ? ? ? ? ? ? 'header'=> "X-Cybozu-API-Token:". API_TOKEN ."rn" ? ? ? ? ? ? ) ? ? ? ? )); ? ? ? ?? ? ? ? ? $param = 'app=' . APP_NO . '&id=' . intval($_REQUEST['id']); ? ? ? ? $contents = file_get_contents( 'https://'. SUB_DOMAIN .'.cybozu.c om/k/v1/record.json?' . $param, FALSE, $context ); ? ? ? ? // 正常に動作しない場合は以下のコメントアウトを外す ? ? ? ? //var_dump($http_response_header); ? ? ? ?? ? ? ? ? $data = json_decode($contents, true); ? ? ? ? $data = $data['record']; ? ? ?> ? ? <h1><?= $data['物件名']['value']; ?></h1> ? ? <!-- ここに追加 --> ? ? </main><!-- .site-main --> ? ? <?php get_sidebar('content-bottom'); ?> </div><!-- .content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?> ? 画像を表示する アプリに「添付ファイル」フィールドを追加します ぱくたそなどから、写真を拝借して登録します プログラムに次のように追加します <?php $param = 'fileKey=' . $data['添付ファイル']['value'][0]['fileKey']; $contents = file_get_contents('https://' . SUB_DOMAIN . '.cybozu.com/k/v 1/file.json?' . $param, false, $context); ?> <img src=/kintone-papers/kintone-dev-camp-taniguchi/"data:image/jpeg;base64,<?= base64_encode($contents); ?>"> 画像が表示されます
- 10. 2017/6/26 WordPress?×?kintone?API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 10/11 kintone管理のメリット ? Excelインポートや一括編集など、WordPressでは作業しにくいデータを管理できる WordPressの「カスタムフィールド」は、データが構造化されていないので再利用に向かない 個人情報や、物件の管理情報など「表に出したくない情報」を隠せる （より安全性を高めるなら、API公開していないテーブルに非公開情報をまとめるなども） データ登録と表示を組み合わせれば、Q&Aデータや会員情報なども Webに連携できる ? kintone管理のデメリット ? APIの呼び出し制限（1万/日）があるため、PVが高いサイトには向かない 毎回呼び出すのは重い ? 更新頻度が低いデータは、バッチ処理などを用いてデータを吸い出すなどの工夫 ? まとめ ? WordPressは、現代のサイト制作ツールのスタンダード ?