kintone Café 福岡 Vol.3（kintone JavaScriptカスタマイズ・kintone.proxy()/SendGrid）

kintone Café 福岡 Vol.3

2014年10月24日 kintone公認エバンジェリスト　山下 竜

＃kintonecafe

Twitter: @yamaryu0508 FB: https://www.facebook.com/ryu.yamashita.3 Blog: http://yamaryu0508.hatenablog.com/

自己紹介•基本情報

•山下 竜（32）　福岡県大牟田市出身

•最先端の無線通信がやりたくて上京（学生'05-06）

•マルチホップ、今のSC-FDMAに類するものに苦戦（信号処理中心）

•交通混雑と空気環境に耐えられそうになく、Uターン（九州電力の通信部門'07-10）

•通信システムの工事等を3年間（線路/伝交、陸技、CCNP/DP→ケーブル、電源、伝送交換・IP等）

• M2Mサービス化のための事業部門（ニシムのサービス部門'10-14.7）•企画・営業がメイン（これ大切）

• との出会いをきっかけに技術支援も

•光ファイバ心線貸し事業を行う現部署へ（九州電力通信部門'14.8-現在）• 営業・事業管理、経営資源統合に伴う事業移管

Layer1

Layer1-3

Layer8?

Layer1-8

自己紹介

kintone Café 福岡 Vol.1

kintone Café 福岡 Vol.2

kintone Café Vol.1～3の主催

※開催レポート http://yamaryu0508.hatenablog.com/archive/category/kintone%20Caf%C3%A9

• はじめに

• kintoneとは？サイボウズのクラウド事業への取り組み（サイボウズ 佐藤さま）

• こんな案件でkintone導入してきました！（AISIC 久米さま）

• 完全定額！kintoneだからできる新しいSIビジネス（ジョイゾー 四宮さま）

• kintone JavaScriptカスタマイズハンズオン（山下）

• Ruby用REST APIクライアントの紹介（ニシム電子工業 川上さま）

Menu for today

はじめに

kintoneとは？

•コンセプト

•「ファストシステム」

•「3分で業務改善アプリ」

•構成要素

•データ

•ワークフロー

•コミュニケーション

kintone基本概要

「サイボウズプロダクト=チームを強くするツール」の中でも汎用性と専門性を行き来しながら、様々な 業務シーンで活用出来るクラウドデータベース（WebDB）サービス

（出典：「kintone公式サイト」）

• REST API

• レコードやスペースの操作（登録・更新・削除等）、バルクAPI

• ユーザ・組織の操作

• JavaScript/CSSカスタマイズ

• 各種イベントハンドル、情報取得

• プロキシによる外部API連携

• URL指定によるライブラリの読み込み（HTTPS対応）

kintoneカスタマイズ機能（スタンダードコース）

データ レコード スペース ユーザ

UI

基幹システム Excel

他のクラウドREST API

kintone.proxy

最近のkintone動向

ITpro EXPO 2014「ITPro EXPO AWARD 2014」で

「ZDNet Japan賞」を受賞 30分でアプリ開発できる相談コーナー

地図とデータのAPIをkintoneでマッシュアップしたデモ

（出典：「ITpro by 日経コンピュータ」記事）

「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）

kintoneの JavaScriptカスタマイズ

サーバを準備しなくてもできる kintoneのJavaScriptカスタマイズ

まずは　　おさらい

JavaScriptカスタマイズ他サービスを取込みつつ、 動画をブクマしたり

データをバインドして ライブラリでグラフ化し直したり

ダイナミックなプラグインライブラリで見た目をオシャレにしたり

JavaScriptカスタマイズ

[subdomain]

モバイルの利便性を向上させる 地図を利用したり

JavaScript/CSSカスタマイズ

データをバインドして、CSSフレームワークで社内CMS・ポータルにしてみたり

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

巷のサービスと連携してアプリ作りたい時ありませんか？

メール 電話/SMS

イベントツール

（環境）データ 電子会計

コラボレーションツール

現在MA10も開催中ですね！

kintone.proxy()が今熱い！

そんな思いをサーバレスで叶えてくれる

「kintone Cafe 松山 #1」ではデモだけでしたが、 今日は実践していきましょう！

基礎知識

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

curlコマンドとkintone.proxy()の対応関係

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

(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()の対応）」）

(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()の対応）」）

(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()の対応）」）

ハンズオン

「電話メモ」をkintoneアプリで作る

「Garoon」や 「サイボウズOffice」の「電話メモ」を「kintone」でも！

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

kintone.proxy()でメールAPI連携

①kintone.proxy()で SendGridのメール送信APIを叩く

「電話メモ」アプリ メールAPI サービス

②登録情報を元にメール送信

メールの宛先

アプリの関係性

ルックアップ社員名簿 電話メモ メール送信

APIを使い分けて、メール・音声メッセージ・SMS等 メディアを選択するようにするのも良さそうです！

サンプルダウンロード①「https://github.com/yamaryu0508/kintone-Cafe-Fukuoka-3」にアクセス

②「Download ZIP」をクリックして、 ファイル一式をダウンロード

kintoneアプリ

フォーム項目 フィールドの種類

社員番号 文字列（1行）

氏名 文字列（1行）

ふりがな 文字列（1行）

性別 ラジオボタン

生年月日 日付

入社年月日 日付

郵便番号 文字列（1行）

住所 文字列（1行）

TEL リンク

メールアドレス リンク

フォーム項目 フィールドの種類 フィールドコード

氏名 ルックアップ name

メールアドレス リンク （ルックアップ） to

タイトル 文字列（1行） title

メッセージ 文字列（複数行） text

社員名簿 電話メモ

※kintoneアプリストア「社員名簿」アプリの改造 　→「TEL」と「メールアドレス」をリンクフィールドに変更

（参考：「SendGrid APIドキュメント」）

今回のJavaScript部分解説パラメータの設定

SendGridでは、 　①ユーザー名[API_USER] 　②APIキー[API_ KEY] 　③送信者名[TO_NAME] 　④送信者メールアドレス[FROM] を設定しておきます

一部を事前にURLエンコード

今回のJavaScript部分解説SendGrid連携部分 リクエストURL

ヘッダでフォーム形式の指定

リクエストボディ

kintone.proxy()

今回のJavaScript部分解説詳細画面イベント

レコード詳細画面に 「メール送信」ボタンを追加

今回のJavaScript部分解説Chromeの開発ツール（Network）

kintone.proxy()のリクエスト内容 ※ここの内部仕様は変更になる可能性があります

フォーム形式のボディは文字列

• kintone.proxy()の記述方法（H26.10時点）

• フォーム形式のPOST/PUTメソッドの記述方法

• MIMEタイプが'application/x-www-form-urlencoded'ではボディは文字列扱いとなり、'{key1}={value1}&{key2}={value2}&...'のような記載が可能

• MIMEタイプが'multipart/form-data'（JSではFormDataオブジェクト）のフォーム形式には現状対応なし

• ボディは送信されないGETメソッド

ポイントまとめ

ハンズオンは以上です

• 開発コミュニティサイト「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]

参考情報

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