kintone café 名古屋 vol.2 google api ジャンケンゲーム
TRANSCRIPT
kintoneCafé名古屋 盛りあげ隊株式会社コラボスタイル
藤澤 英樹
kintone Café 名古屋 Vol.2
開発者心 を くすぐるkintone のカスタマイズ
Google API を使った
ジャンケンゲーム
自己紹介ふじさわ ひでき
藤澤 英樹仕事:
Excelファイルからボタン1つでWebの申請フォームに
変換可能な ワークフロー の開発、サポート。
ワークフローと kintone の連携機能を作りました!
kintoneの好きなところ:
簡単に使える。工夫次第でいろいろ拡張できる。
開発者心 を くすぐる?
ジャンケンキングに挑戦!
Google APIを使った、kintoneとの連携。
・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 を使って送信
メール受信、記事の投稿
③勝率ランキング(グラフ)を投稿