Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 1/11
WordPress ...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 2/11
Create a n...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 3/11
フォームを作成する。...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 4/11
固定ページを作成して...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 5/11
1
2
3
4
5
...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 6/11
コピーしているトーク...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 7/11
1
2
3
4
5
...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 8/11
37
38
39
4...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 9/11
14
15
16
1...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 10/11
kintone管理...
2017/6/26 WordPress × kintone API連携実践
https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 11/11
テーマやカスタムフ...
Nächste SlideShare
Wird geladen in …5
×

WordPress × kintone API連携実践_たにぐち まこと氏

2.025 Aufrufe

Veröffentlicht am

kintone devCamp 2017 A-1セッション資料。
「WordPress × kintone API連携実践
 ~CMSとの連携でデータの有効活用をしよう~」

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

WordPress × kintone API連携実践_たにぐち まこと氏

  1. 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. 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→新規追加」でメールフォームを作成  
  3. 3. 2017/6/26 WordPress × kintone API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 3/11 フォームを作成する。コントロール一覧から「テキストフィールド」を選択する 同じように「送信ボタン」も追加する フォーム識別子をコピーする    
  4. 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. 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. 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. 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. 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. 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="data:image/jpeg;base64,<?= base64_encode($contents); ?>"> 画像が表示されます
  10. 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は、現代のサイト制作ツールのスタンダード  
  11. 11. 2017/6/26 WordPress × kintone API連携実践 https://paper.dropbox.com/doc/print/zsJ9Hz8zhbsPTh3LMxsz8?print=true 11/11 テーマやカスタムフィールド等で自在にサイトが制作できる 構造化されたデータには弱いので、kintoneと組み合わせよう  

×