kintone café 名古屋 vol.2 google api ジャンケンゲーム
TRANSCRIPT
kintoneCafé名古屋 盛りあげ隊株式会社コラボスタイル
藤澤 英樹
kintone Café 名古屋 Vol.2
開発者心 を くすぐるkintone のカスタマイズ
Google API を使った
ジャンケンゲーム
自己紹介ふじさわ ひでき
藤澤 英樹仕事：
Excelファイルからボタン１つでWebの申請フォームに
変換可能な ワークフロー の開発、サポート。
ワークフローと kintone の連携機能を作りました！
kintoneの好きなところ：
簡単に使える。工夫次第でいろいろ拡張できる。
開発者心 を くすぐる？
ジャンケンキングに挑戦！
Google APIを使った、kintoneとの連携。
使います。
Form
Search
Drive
Script
Gmail
Blogger
①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンアプリ
それいけ！ジャンケンマン
①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンアプリ
事前準備
・アプリの作成、フォームの設定
・kintone APIトークンの生成
スペース（対戦相手の画像）
スペース（グー/チョキ/パーのボタン）
・Googleアカウント取得
・利用するAPIの有効化
・API認証キーを作成
事前準備
①対戦相手を追加
①対戦相手を追加
・Googleフォームの作成
・テキスト(1行) ＝ 対戦者名
・メール送信スクリプト
件名＝対戦者名トリガー：フォーム送信時
①対戦相手を追加
・Google Apps Script
（Javascriptでコードを記述、サーバーで実行）
・未読メールを取得
トリガー：1分ごと
・ レコードの登録（1件）
①対戦相手を追加
①対戦相手を追加
・Gooleドライブにファイルを保存
・JavaScriptファイルを、アップロードせず即デバッグ可能
・ブラウザ上でのコーディングが可能、ローカルPCとの同期も可能
・更新の履歴を残し、版管理が可能
・プログラムや画像をまとめて管理可能
kintone のカスタマイズ
JavaScriptカスタマイズのデバッグをかんたんにするウラワザ（ Dropbox ）
Dropboxで共有したJavaScriptファイルは、インターネットに公開されます。リスクをご理解のうえ、ご利用ください。本Tipsはデバッグを効率的に行うためのものです。運用時にオンラインストレージサービスの利用を推奨するものではありませんのでご了承ください。
kintone上でカスタムJSやCSSを編集できるプラグイン
「JSEdit for kintone」を使ってみよう
kintone のカスタマイズ
・事前準備
・カスタム検索エンジンの利用設定
検索するサイト：ウェブ全体
画像検索：オン
・検索エンジンID の取得
②対戦相手の画像を表示
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日
レコード詳細画面が表示された時のイベント
イベント
②対戦相手の画像を表示
スペースフィールドの要素を取得する
②対戦相手の画像を表示
Cybozu CDNを使って、
メッセージをスタイリッシュに表示させよう！
// SweetAlertライブラリ
swal(‘メッセージ');
レコード詳細画面でワンクリックで担当者に自分を追加するワザ
②勝敗結果の表示と保存
kintone JavaScript コーディングガイドライン
各要素に付与されているid/class属性の値は、予告なく変更されることがあります。
また、DOM構造についても変更されることがあります。
kintoneのアップデートによる影響をなくすため、
デベロッパーサイトで公開されているJavascript APIをご利用ください。
③勝率ランキング（グラフ）を投稿
・投稿ボタンを追加
メッセージを入力、ボタンクリック（SweetAlert）
メールの作成宛先 ： Bloggerの設定アドレス件名 ： （今日の勝率ランキング）本文 ： メッセージ添付 ： グラフの画像ファイル
Gmail API を使って送信
メール受信、記事の投稿
③勝率ランキング（グラフ）を投稿
①対戦者を登録
Form Search DriveScriptGmail BloggerGmail
③勝率ﾗﾝｷﾝｸﾞを投稿②対戦者画像を表示
連携イメージ
ジャンケンマン
連携イメージ
ジャンケンマン
Google API
ありがとうございました。