kintoneとGoogle API を使って、無駄にいろいろ連携させてみました。 元となるジャンケンゲームは、Cybozu Developer Network（CDN)にサンプルとしてのっていた、kジャンケンゲームです。 CDNを使い、API連携をどのようにしているを理解してもらえればと思います。

1. kintoneCafé名古屋 盛りあげ隊
株式会社コラボスタイル
藤澤 英樹
kintone Café 名古屋 Vol.2
開発者心 を くすぐる
kintone の カスタマイズ
Google API を 使った
ジャンケンゲーム

2. 自己紹介
ふじさわ ひでき
藤澤 英樹
仕事：
Excelファイルからボタン１つでWebの申請フォームに
変換可能な ワークフロー の開発、サポート。
ワークフローと kintone の連携機能を作りました！
kintoneの好きなところ：
簡単に使える。工夫次第でいろいろ拡張できる。

3. 開発者心 を くすぐる？
ジャンケンキングに挑戦！
Google APIを使った、
kintoneとの連携。

4. 使います。
Form
Search
Drive
Script
Gmail
Blogger

5. ①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンアプリ

6. それいけ！ジャンケンマン

8. ①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンアプリ

9. 事前準備
・アプリの作成、フォームの設定
・kintone APIトークンの生成
スペース
（対戦相手の画像）
スペース
（グー/チョキ/パーのボタン）

10. ・Googleアカウント取得
・利用するAPIの有効化
・API認証キーを作成
事前準備

11. ①対戦相手を追加

12. ①対戦相手を追加

13. ・Googleフォームの作成
・テキスト(1行) ＝ 対戦者名
・メール送信スクリプト
件名＝対戦者名
トリガー：フォーム送信時
①対戦相手を追加

14. ・Google Apps Script
（Javascriptでコードを記述、サーバーで実行）
・未読メールを取得
トリガー：1分ごと
・ レコードの登録（1件）
①対戦相手を追加

15. ①対戦相手を追加

16. ・Gooleドライブにファイルを保存
・JavaScriptファイルを、アップロードせず即デバッグ可能
・ブラウザ上でのコーディングが可能、ローカルPCとの同期も可能
・更新の履歴を残し、版管理が可能
・プログラムや画像をまとめて管理可能
kintone の カスタマイズ
JavaScriptカスタマイズのデバッグをかんたんにするウラワザ（ Dropbox ）
Dropboxで共有したJavaScriptファイルは、インターネットに公開されます。リスクをご理解のうえ、ご利用ください。
本Tipsはデバッグを効率的に行うためのものです。運用時にオンラインストレージサービスの利用を推奨するものではありませんのでご了承ください。

17. kintone上でカスタムJSやCSSを編集できるプラグイン
「JSEdit for kintone」を使ってみよう
kintone の カスタマイズ

18. ・事前準備
・カスタム検索エンジンの利用設定
検索するサイト：ウェブ全体
画像検索：オン
・検索エンジンID の取得
②対戦相手の画像を表示

19. https://www.googleapis.com/customsearch/v1
?key=(API認証キー) &cx=(検索エンジンID) &q=(対戦相手名) &searchType=image
外部のAPIを実行する
プロパティ 説明
title 画像のファイル名
url 画像のURL
height 画像の縦サイズ
width 画像の横サイズ
tbUrl サムネイル画像のURL
tbHeight サムネイル画像の縦サイズ
tbWidth サムネイル画像の横サイズ
10件/1リクエスト、100件/1日
レコード詳細画面が表示された時のイベント
イベント
②対戦相手の画像を表示

20. スペースフィールドの要素を取得する
②対戦相手の画像を表示

21. Cybozu CDNを使って、
メッセージをスタイリッシュに表示させよう！
// SweetAlertライブラリ
swal(‘メッセージ');
レコード詳細画面でワンクリックで担当者に自分を追加するワザ
②勝敗結果の表示と保存

22. ③勝率ランキング（グラフ）を投稿
・事前準備
・Blogger でブログを作成
・メール投稿の設定

23. kintone JavaScript コーディングガイドライン
各要素に付与されているid/class属性の値は、予告なく変更されることがあります。
また、DOM構造についても変更されることがあります。
kintoneのアップデートによる影響をなくすため、
デベロッパーサイトで公開されているJavascript APIをご利用ください。
③勝率ランキング（グラフ）を投稿
・投稿ボタンを追加

24. メッセージを入力、ボタンクリック（SweetAlert）
メールの作成
宛先 ： Bloggerの設定アドレス
件名 ： （今日の勝率ランキング）
本文 ： メッセージ
添付 ： グラフの画像ファイル
Gmail API を使って送信
メール受信、記事の投稿
③勝率ランキング（グラフ）を投稿

25. ①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンマン

26. 連携イメージ
ジャンケンマン

27. Google API
ありがとうございました。