「kintone Café 福岡 Vol.3」で利用したスライドです。 　・メール（SendGrid）連携（SendGrid APIによるメール送信）のデモ 関連記事　http://yamaryu0508.hatenablog.com/entry/2014/10/27/124736

1. kintone Café 福岡 Vol.3
2014年10月24日
kintone公認エバンジェリスト 山下 竜
＃kintonecafe
Twitter: @yamaryu0508
FB: https://www.facebook.com/ryu.yamashita.3
Blog: http://yamaryu0508.hatenablog.com/

2. 自己紹介
• 基本情報
•山下 竜（32） 福岡県大牟田市出身
• 最先端の無線通信がやりたくて上京（学生'05-06）
•マルチホップ、今のSC-FDMAに類するものに苦戦（信号処理中心）
• 交通混雑と空気環境に耐えられそうになく、Uターン（九州電力の通信部門'07-10）
•通信システムの工事等を3年間（線路/伝交、陸技、CCNP/DP→ケーブル、電源、
伝送交換・IP等）
• M2Mサービス化のための事業部門（ニシムのサービス部門'10-14.7）
•企画・営業がメイン（これ大切）
• との出会いをきっかけに技術支援も
• 光ファイバ心線貸し事業を行う現部署へ（九州電力通信部門'14.8-現在）
• 営業・事業管理、経営資源統合に伴う事業移管
Layer1
Layer1-3
Layer8?
Layer1-8

3. 自己紹介
kintone Café 福岡 Vol.1
kintone Café 福岡 Vol.2
kintone Café Vol.1∼3の主催
※開催レポート http://yamaryu0508.hatenablog.com/archive/category/kintone%20Caf%C3%A9

4. • はじめに
• kintoneとは？サイボウズのクラウド事業への取り組み（サイボウズ 佐藤さま）
• こんな案件でkintone導入してきました！（AISIC 久米さま）
• 完全定額！kintoneだからできる新しいSIビジネス（ジョイゾー 四宮さま）
• kintone JavaScriptカスタマイズハンズオン（山下）
• Ruby用REST APIクライアントの紹介（ニシム電子工業 川上さま）
Menu for today

5. はじめに

6. kintoneとは？

7. • コンセプト
•「ファストシステム」
•「3分で業務改善アプリ」
• 構成要素
•データ
•ワークフロー
•コミュニケーション
kintone基本概要
「サイボウズプロダクト=チームを強くするツール」
の中でも汎用性と専門性を行き来しながら、様々な
業務シーンで活用出来るクラウドデータベース
（WebDB）サービス
（出典：「kintone公式サイト」）

8. • REST API
• レコードやスペースの操作（登録・更新・削除等）、
バルクAPI
• ユーザ・組織の操作
• JavaScript/CSSカスタマイズ
• 各種イベントハンドル、情報取得
• プロキシによる外部API連携
• URL指定によるライブラリの読み込み（HTTPS対応）
kintoneカスタマイズ機能（スタンダードコース）
データ
レコード
スペース
ユーザ
UI
基幹システム
Excel
他のクラウド
REST
API
kintone.proxy

9. 最近のkintone動向

10. ITpro EXPO 2014
「ITPro EXPO AWARD 2014」で
「ZDNet Japan賞」を受賞 30分でアプリ開発できる
相談コーナー
地図とデータのAPIをkintoneで
マッシュアップしたデモ
（出典：「ITpro by 日経コンピュータ」記事）

11. 「cybozu.com developer network」と「kintone Cafe」
（出典：「サイボウズプレスリリース」）
開発コミュニティサイト「cybozu.com developer
network」の登録メンバー数が1,000IDを突破
kintone有志勉強会「kintone Café」が
全国で16回開催、延べ250人参加
（引用・画像提供：kintone Café まとめ
http://radical-bridge.com/kintone-blog/kintoneCafe_matome.html）

13. kintoneの
JavaScriptカスタマイズ

14. サーバを準備しなくてもできる
kintoneのJavaScriptカスタマイズ
まずは
おさらい

15. JavaScriptカスタマイズ
他サービスを取込みつつ、
動画をブクマしたり
データをバインドして
ライブラリでグラフ化し直したり
ダイナミックなプラグインライブラリで
見た目をオシャレにしたり

16. JavaScriptカスタマイズ
[subdomain]
モバイルの利便性を向上させる
地図を利用したり

17. JavaScript/CSSカスタマイズ
データをバインドして、CSSフレームワーク
で社内CMS・ポータルにしてみたり

18. kintone JavaScript
カスタマイズの可能性を更に広げる

19. 巷のサービスと連携してアプリ作りたい時ありませんか？
メール
電話/SMS
イベントツール
（環境）データ 電子会計
コラボレーションツール
現在MA10も
開催中ですね！

20. kintone.proxy()が今熱い！
そんな思いをサーバレス
で叶えてくれる
「kintone Cafe 松山 #1」ではデモだけでしたが、
今日は実践していきましょう！

21. 基礎知識

22. kintone.proxy()におけるPOST/PUTのポイント
項目 フォーム形式データ JSON形式データ
リクエストヘッダ
(MIMEタイプ)
'Content-Type' : 'application/x-www-form-
urlencoded'
'Content-Type' : 'application/
json'
リクエストボディ
記載方法
'{key1}={value1}&{key2}={value2}&...'
（文字列）
※{value}はURLエンコード
JSON
（文字列、オブジェクト）
サービス例 Twilio、SendGrid、Typetalk kintone、Square、xively
※GETのレスポンスは殆どがJSON

23. curlコマンドとkintone.proxy()の対応関係
（出典：「kintoneマッシュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」）

24. (1)リクエスト URL
curlコマンドでは正味の引数になりますので、コマンドオプションはありません。
(2)リクエストメソッド
GET、POST、PUT、DELETEのいずれかを指定できます。
(3)リクエストヘッダ
複数指定する必要があるときには、curlコマンドでは「-H
"{headerKey}:{headerValue}" 」をセットとして、必要数書き並べられます。
kintone.proxy()では「{"{headerKey1}":"{headerValue1}",
"{headerKey2}":"{headerValue2}", ・・・}」といったようにコンマで必要数を連結し
てください。
curlコマンドとkintone.proxy()の対応関係
（出典：「kintoneマッシュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」）

25. (4)リクエストデータ(フォーム形式)
curlコマンドで「-d」のオプションでは通常フォーム形式データを言っており、対応する
Content-Typeは「application/x-www-form-urlencoded」として処理されています（「-
H」での明示不要）ので、kintone.proxy()ではこれをヘッダに追加しておくと良いです。
複数指定する必要があるときには、curlコマンドでは「-d {key}:{value}」をセットとし
て、必要数書き並べられます。kintone.proxy()では、
「'{key1}={value1}&{key2}={value2}&・・・'」といったように「&」で必要数連結して
ください。
curlコマンドでは{value}部分をURLエンコード化する「--data-urlencode」といったオ
プションが使われることがありますが、これに対応するためにはkintone.proxy()では、
JavaScript中で「encodeURIComponent({value})」を経由させておくと良いです。
curlコマンドとkintone.proxy()の対応関係
（出典：「kintoneマッシュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」）

26. (5)リクエストデータ(JSON形式)
curlコマンドで「-d」のオプションはJSON形式のデータにも対応しています。ただ、先ほどのフォー
ム形式と異なり、対応するContent-Typeである「application/json」はcurlコマンドでも「-H」によっ
て明示されることになります。一方、kintone.proxy()でもこれをヘッダに追加しておく必要があります
curlコマンドでは「JSON文字列」でしか指定のしようがありませんが、kintone.proxy()では、
「JSON文字列」でも「JSONオブジェクト」でも大丈夫です。
(6)Basic認証
curlコマンドで「-u」のオプションはBasic認証に用いられています。これをkintone.proxy()で対応
させるには、ヘッダの方に「"Authorization":"Basic {BasicToken}"」といった具合に追加してあげる
ことで解決されます。なお、「{BasicToken}」は「{id}:{password}」をBASE64エンコードしたもの
となります。
他に、URL部分に連結して「{id}:{password}@URL」と書く方法もあります。
curlコマンドとkintone.proxy()の対応関係
（出典：「kintoneマッシュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」）

27. ハンズオン

28. 「電話メモ」をkintoneアプリで作る
「Garoon」や
「サイボウズOffice」
の「電話メモ」を
「kintone」でも！

29. コミュニティへの問い合わせ
も多いですね！

30. kintone.proxy()でメールAPI連携
①kintone.proxy()で
SendGridのメール送信
APIを叩く
「電話メモ」アプリ
メールAPI
サービス
②登録情報を元にメール送信
メールの宛先

31. アプリの関係性
ルックアップ社員名簿 電話メモ メール送信
APIを使い分けて、メール・音声メッセージ・SMS等
メディアを選択するようにするのも良さそうです！

32. サンプルダウンロード
①「https://github.com/yamaryu0508/
kintone-Cafe-Fukuoka-3」にアクセス
②「Download ZIP」をクリックして、
ファイル一式をダウンロード

33. kintoneアプリ
フォーム項目 フィールドの種類
社員番号 文字列（1行）
氏名 文字列（1行）
ふりがな 文字列（1行）
性別 ラジオボタン
生年月日 日付
入社年月日 日付
郵便番号 文字列（1行）
住所 文字列（1行）
TEL リンク
メールアドレス リンク
フォーム項目 フィールドの種類 フィールドコード
氏名 ルックアップ name
メールアドレス
リンク
（ルックアップ）
to
タイトル 文字列（1行） title
メッセージ 文字列（複数行） text
社員名簿 電話メモ
※kintoneアプリストア「社員名簿」アプリの改造
→「TEL」と「メールアドレス」をリンクフィールドに変更

34. （参考：「SendGrid APIドキュメント」）
今回のJavaScript部分解説
パラメータの設定
SendGridでは、
①ユーザー名[API_USER]
②APIキー[API_ KEY]
③送信者名[TO_NAME]
④送信者メールアドレス[FROM]
を設定しておきます
一部を事前にURLエンコード

35. 今回のJavaScript部分解説
SendGrid連携部分
リクエストURL
ヘッダでフォーム形式の指定
リクエストボディ
kintone.proxy()

36. 今回のJavaScript部分解説
詳細画面イベント
レコード詳細画面に
「メール送信」ボタンを追加

37. 今回のJavaScript部分解説
Chromeの開発ツール（Network）
kintone.proxy()のリクエスト内容
※ここの内部仕様は変更になる可能性があります
フォーム形式の
ボディは文字列

38. • kintone.proxy()の記述方法（H26.10時点）
• フォーム形式のPOST/PUTメソッドの記述方法
• MIMEタイプが'application/x-www-form-urlencoded'ではボ
ディは文字列扱いとなり、
'{key1}={value1}&{key2}={value2}&...'のような記載が可能
• MIMEタイプが'multipart/form-data'（JSではFormDataオブ
ジェクト）のフォーム形式には現状対応なし
• ボディは送信されないGETメソッド
ポイントまとめ

39. ハンズオンは以上です

40. • 開発コミュニティサイト「cybozu.com developer network」[https://
cybozudev.zendesk.com/hc/ja]
• コミュニティ（質問等）、リファレンス、Tips、サンプル、開発者ライセンス申込
• SendGrid APIドキュメント[https://sendgrid.com/docs/API_Reference/
Web_API/mail.html]
• 「cybozu.com developer network > Tips > kintone JavaScript API > kintoneマッ
シュアップのための豆知識（curlコマンドとkintone.proxy()の対応）」[https://
cybozudev.zendesk.com/hc/ja/articles/203446970]
• kintone.proxy()を用いたTwilio API連携サンプル有
• 「kintoneで学ぶREST APIのリクエスト方法（テスト／デバグ用）」[http://
yamaryu0508.hatenablog.com/entry/2014/09/16/000440]
参考情報

41. ご清聴ありがとうございました。