apiで広がるkintoneの世界
TRANSCRIPT
サイボウズ公認kintoneエバンジェリスト
ラジカルブリッジ 代表 斎藤 栄
APIで広がる
kintone Café 札幌 Vol.4
#kintonecafe
ライブカスタマイズでkintoneがもっとわかる！
の世界
2015/3/14
自己紹介
2
• 1971年 札幌市生まれ
• 小６からパソコンに触れ、大学卒業まで札幌で過ごす
• 1993年 NTTデータ通信株式会社（首都圏）
• 1996年 株式会社データクラフト（札幌）
• 2012年 ラジカルブリッジ設立（札幌）
• 2014年より kintoneエバンジェリスト として活動中
代表／ IT 活用アドバイザー
“クラウドおじさん” 斎藤 栄
～ ITでみんなに“WAKU WAKU”を ～
裏・自己紹介
3
80’s昭和歌謡を楽しむ会 主催
おやじバンド活動
おやじ活動
宇宙関係
cybozu.com カンファレンス 2014 にて講演
4
2014年12月12日 日本経済新聞 全面広告
札幌発エバンジェリストが語る、 地方SIerとkintoneビジネスの可能性
やってること
5
つくってます
アプリ
導入事例①
フランス料理店様
Before After
• 予約・顧客情報のデータ化
• お客様の過去情報の共有
• リピート率の把握
• 複数店舗でも最新在庫を把握
業務効率化
データ蓄積
情報共有
予約管理・顧客管理 • 予約記録は紙の予約台帳のみ • お客様の好み等は各スタッフの記憶が頼り
ワイン在庫管理 • ワイン在庫はExcelで管理
6
導入事例②
株式会社ミツノ様（楽器買取・販売業）
在庫管理 顧客管理 買取業務 販売業務 レンタル業務 調律業務
リアル店舗
ネットショップA
ネットショップB
商品情報・写真登録の自動化 出品・取り下げの自動化
7
導入事例③
株式会社ヤマチコーポレーション イベント事業部様
紙
見積書 出荷伝票 原価台帳 発注伝票 仕入伝票 請求書
申請 承認 処理
担当 上長 事務
• 入力データの一元化
• 遠隔地間の情報共有
• 外出先からの承認
• 伝票の自動出力
• 売上・利益率等の分析
Before After
業務効率化
ペーパーレス
データ蓄積
8
イベント業務管理
ベストチーム365
9
チームワークを強化するオリジナル業務アプリ構築サービス
ベストチーム365
初回訪問・試作無料！ 《¥89,890から始めるアプリ開発》
×
ベストチーム365 とは
10
効率的なチームワークを目指す
あらゆる業種の事業者様向けに
お客様の目の前で
オリジナルの業務アプリを構築する
ITプロフェッショナルサービスです。
※サイボウズ社のクラウドサービス を用いて業務アプリ構築を行う訪問型のサービスです。
※概ね数名から50名程度までの事業者様や部門を対象としています。
ベストチーム365 サービスプラン
【わくわくプラン】 ¥89,890
【にこにこプラン】 ¥252,500
初回訪問・試作無料 訪問改修１回
初回訪問・試作無料 訪問改修３回 60日間の利用サポート
初回訪問・試作無料
11
リーズナブルな理由
見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。
仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。
分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。
サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。
※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる ネットミーティングにて対応させていただきます。
ベストチーム365 サービスの流れ
12
初回訪問・試作無料 （既存の帳票・台帳・Excel等をご用意ください）
お客様試用（最大４週間）
キャンセル
【わくわくプラン】 ¥89,890
【にこにこプラン】 ¥252,500
訪問改修１ （作業完了・ご請求）
訪問改修１
訪問改修２
訪問改修３ （作業完了・ご請求）
プランご選択
60日間のリモート保守・サポート
「もっとこうしたい」「このアプリも作りたい」という場合は
差額のみで【にこにこプラン】にアップグレード可能！
お問い合わせいただきましたら、電話にて詳細のヒアリングをいたします
概ね1週間
概ね1週間
※金額は全て税別です。 ※別途、サイボウズ社とのkintone利用契約が必要となります。 初期費用無料、1ユーザー月額780円または1,500円 （30日間無料試用可、最低契約ユーザー数：5ユーザー） ※ヒアリングの結果、規模感が見合わない場合や他システムとのAPI接続 が必要となる場合は「kintoneアプリ構築フルサービス」をご案内 させていただきます。
ベストチーム365 導入事例
地方独立行政法人 佐賀県医療センター好生館様
予約台帳 • 予約前に空き状況がわかる
• カレンダー形式や一覧形式な
ど多様な見方ができる
• 実績集計の自動化
• 受付担当者の業務負荷を削減
Before After
業務効率化
ペーパーレス
13
地域の連携医療機関からの紹介患者を対象とした
診療予約管理
• 電話で問い合わせないと空き状況が確認できない • 紙の台帳が手元にないと空き状況の問い合わせに
回答できない • 紙の台帳を元に「来院予定者リスト」「月別予約
実績」などのExcel帳票を別途作成しなければならない（二重・三重の入力）
• 受付担当者の業務負担が増加 北海道と佐賀県の間で たった2回のSkypeミーティングで完成！
kintone Café
14
kintone Caféは、まだkintoneに触れたことの無い方から、
より高度なカスタマイズを行いたいと考えているプロフェッ
ショナルの方まで幅広い層を対象に、 楽しく学び・教え合う
ことで、kintoneの魅力や活用法をみんなで共有するための
勉強会コミュニティです。
全国に広がるkintone Caféの輪
2013/12/7 札幌 Vol.1（起源） 2014/5/16 札幌 Vol.2 2014/10/25 札幌 Vol.3 2015/3/14 札幌 Vol.4
2014/5/29 福岡 Vol.1 2014/7/11 福岡 Vol.2 2014/10/24 福岡 Vol.3
2014/5/30 土佐
2014/7/5 弘前 #1
2015/1/29 京橋 Vol.1
2014/8/1 千葉（第1回） 2014/9/3 千葉（第2回） 2014/12/12 千葉（第3回）
2014/8/21 横浜 Vol.1
2014/8/11 釧路
2014/9/12 松江 #1
2014/9/2 Seoul #1
2014/9/24 松山 #1
2014/9/25 神戸 Vol.1
2014/9/28 Okinawa #1 2015/2/11 沖縄 Vol.2
2014/10/22 京都 #1
Korea
２ヶ国 15都道府県
35回開催！ ※2015/3/14現在
2014/11/21 北九州 Vol.1
2014/12/3 @chiba みずいろ会館※女性限定
2015/1/30 新潟 Vol.1
2014/12/15 八王子 Vol.1 2015/2/19 八王子 Vol.2
15
kintone Café 創始者です！
2015/1/24 仙台 Vol.1 2015/3/7 仙台 Vol.2
2014/12/11 荻窪 Vol.1 2015/1/26 荻窪 Vol.2
2014/7/23 東京 Vol.1 2015/2/20 東京 Vol.2
2015/2/13 出雲 Vol.1
2015/3/4 大阪 Vol.1
kintone Café 2015
16
• kintone Café 札幌 （ラジカルブリッジ 斎藤さん） • kintone Café 仙台 （スマイル 熊谷さん） • kintone Café 東京 （ジョイゾー 四宮さん、山下さん） • kintone Café 新潟 （アイティー・プラス・ワン 星野さん） • kintone Café 名古屋（コラボスタイル 河野さん） • kintone Café 大阪 （アールスリーインスティテュート 金春さん） • kintone Café 神戸 （カフーツ 伊藤さん） • kintone Café 高知 （タイムコンシェル 片岡さん） • kintone Café 福岡 （AISIC 久米さん） • kintone Café 沖縄 （レキサス 村濱さん） ※太字は運営事務局メンバー
• 1月、『kintone Café 運営事務局』を 設立 • 支部組織化（3/14現在、10支部）
kintonecafe.com
サイボウズ青野社長からkintone Caféへの応援メッセージ
17
「kintone Caféの輪が全国に広がっていくことを大変うれしく感じています。作り手も、利用者も幸せになる新しいインテグレーションを生み出し続けてください。サイボウズも応援しています！」
メディア掲載
18
2015/3/3 日経ITpro
“圧力団体”目指す、ユーザー・SIer共同で
「kintone」利用者コミュニティーを組織化
2015/2/23 ASCII.jp×クラウド コミュニティ立ち上がりの瞬間、7人の
kintoneマンが語ったこと
http://ascii.jp/elem/000/000/982/982469/ http://itpro.nikkeibp.co.jp/atcl/column/14/346926/022700183/
運営メンバー絶賛募集中！
19
kintone Café 札幌支部 運営メンバー絶賛募集中！
みんなで圧力団体になろう！
（後で声をかけてください）
ようやく本題
20
APIで広がる kintoneの世界
kintone API
21
1. kintone REST API 2. kintone JavaScript API
kintone API – 利用形態から見た分類
22
1. kintone REST API 2. kintone JavaScript API
1. kintone REST API 2. kintone JavaScript API 3. kintone.proxy()
※JavaScript API関数の一つ
kintone API
23
JavaScript API
REST API
kintone.proxy()
外部システム・アプリ
Webサービス
• UI（見た目）の操作 • 複数アプリのデータ参照・操作（REST API）
• 外部からのデータ参照・操作
• 外部Webサービス(WebAPI)の参照・操作
全て今風なJSON形式のAPI
kintone API
24
1. REST API
REST API
25
外部システム・アプリ REST API
REST API = 外部からのデータ参照・操作が行える • 既存システム • クライアントアプリ • スマホアプリ • IoT JSON形式でHTTPS通信ができれば言語は問わない Java, iOS, Goの公式SDKあり 有志によるRuby, .NET, RのSDKもある ExcelVBAからも利用できる！
REST API 利用例
26
kintone連携WordPressプラグイン（デジタルキューブ×サイボウズ） ※無償
https://wordpress.org/plugins/cybozu-wp-to-kintone/
kintoneで作成したデータベースの項目をWordPress側で入力フォームとして自動生成
フォームに入力したデータをkintoneへ投稿 ➡フォーム投稿内容のデータベース化 ➡集計等、データの二次活用が容易に
WordPressの投稿画面で専用ショートコードを記述するだけで導入可能
REST API WordPress
• フォーム設計情報の取得 • レコードの登録
REST API 一覧
27
分類 オブジェクト CREATE (POST)
READ (GET)
UPDATE (PUT)
DELETE (DELETE)
アプリ
アプリ情報 ●
レコード ● ● ● ●
ファイル ※ダウンロード、アップロード、レコードとの関連付け
● ● ● ●
複数アプリへのレコード操作 ● ● ●
フィールドのアクセス権 ○※1 ● ○※1
レコードのアクセス権 ○※1 ● ○※1
アプリのアクセス権 ○※1 ● ○※1
フォーム設計情報 ●
スペース
スペース ● ● ●
スペースの本文、スレッド ●
スペースのメンバー ○※1 ● ● ○※1
ゲストスペースのゲストメンバー ○※1 ● ○※1
ゲストユーザー ● ●
スキーマ API一覧 ●
APIスキーマ情報 ●
※1 CREATE, DELETEはUPDATE操作の中で包括的に実施
kintone API
28
2. JavaScript API
JavaScript API
29
JavaScript API • kintoneの基本機能ではできない部分の機能強化 = UI（見た目）の操作 = 複数アプリのデータ参照・操作（REST APIを利用） • レコード一覧表示時、詳細表示時、編集開始時など、
kintone上の操作イベントが発生した際にJSが作動
ある条件に合致したデータの背景色を変える 独自管理番号の自動採番 地図表示／ガントチャート表示 複数アプリ間のデータ連携 etc...
JavaScript API
JavaScript API 利用例
30
ガントチャート（cybozu.com developer network サンプル）
ToDoのスケジュールをガントチャート形式で表示するサンプル
jQuery, jQuery Ganttを利用
自前のCSSも適用可
地図表示（cybozu.com developer network サンプル）
住所からGoogleマップにピン表示するサンプル
Google Map APIライブラリを利用
JavaScript API – JS基本形
31
(function () { "use strict"; kintone.events.on('app.record. index.show', function (event) { ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ return event; }); })();
イベントタイプ
独自プログラム
ファイル名は任意だが、拡張子を「.js」にする。 文字コードは「UTF-8」、BOMなしで保存する。
JavaScript API － イベント一覧
32
分類 イベント イベントタイプ
（PC用） イベントタイプ
（スマートフォン用）
レコード一覧
レコード一覧画面表示後イベント app.record.index.show mobile.app.record.index.show
「保存ボタン」クリック時イベント app.record.index.edit.submit ×
インライン編集開始時イベント app.record.index.edit.show ×
フィールド値変更時イベント app.record.index.edit.change.
<フィールドコード> ×
レコード削除前イベント app.record.index.delete.submit ×
レコード表示
レコード詳細画面表示時イベント app.record.detail.show mobile.app.record.detail.show
レコード削除前イベント app.record.detail.delete.submit ×
プロセス管理のアクション実行イベント app.record.detail.process.proceed ×
レコード追加
レコード追加画面表示時イベント app.record.create.show mobile.app.record.create.show
保存実行前イベント app.record.create.submit ×
フィールド値変更時イベント app.record.create.change.
<フィールドコード> ×
レコード編集
レコード編集画面表示時イベント app.record.edit.show mobile.app.record.edit.show
保存実行前イベント app.record.edit.submit ×
フィールド値変更時イベント app.record.edit.change.
<フィールドコード> ×
グラフ表示 グラフ表示時イベント app.report.show ×
JavaScript API － イベント発生時に実行できる操作
33
操作内容 サンプルコード 一覧 表示 追加 編集
フィールドの値を書き換える event.record['文字列']['value'] = 'ほげほげ'; ● ● ●
フィールドの編集可／不可を設定する event.record['文字列']['disabled'] = true; ● ● ●
フィールドにエラーを表示する event.record['文字列']['error'] = 'エラーです！'; ● ● ●
レコードにエラーを表示する event.error = 'エラーです！'; ● ● ●
フィールドの表示／非表示を切り替える kintone.app.record.setFieldShown('文字列', false); ● ● ●
ルックアップの取得を自動で行う event.record['ルックアップ']['value'] = '0001'; event.record['ルックアップ']['lookup'] = true;
● ●
JavaScript API － 情報取得①
34
分類 取得情報 関数
アプリ アプリID kintone.app.getId();
レコード一覧情報
レコード一覧のクエリ文字列 kintone.app.getQueryCondition();
レコード一覧のクエリ文字列 （order by, limit, offset付き）
kintone.app.getQuery();
フィールド要素 kintone.app.getFieldElements('文字列');
メニューの右側の空白部分の要素 kintone.app.getHeaderMenuSpaceElement();
メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement();
関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧');
ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ');
ヘッダーの下側の空白部分の要素 （スマートフォン用のみ）
kintone.mobile.app.getHeaderSpaceElement();
レコード詳細情報
レコードID kintone.app.record.getId();
レコードの値 kintone.app.record.get(); kintone.mobile.app.record.get();
レコードに値をセット kintone.app.record.set(); kintone.mobile.app.record.set();
フィールド要素 kintone.app.record.getFieldElement('文字列');
メニューの右側の空白部分の要素 kintone.app.record.getHeaderMenuSpaceElement();
スペースフィールドの要素 kintone.app.record.getSpaceElement('space1');
JavaScript API － 情報取得②
35
分類 取得情報 関数
レコード詳細情報
メニューの下側の空白部分の要素 kintone.app.getHeaderSpaceElement();
関連レコード一覧の参照先のアプリID kintone.app.getRelatedRecordsTargetAppId('関連レコード一覧');
ルックアップの参照先のアプリID kintone.app.getLookupTargetAppId('ルックアップ');
ヘッダーの下側の空白部分の要素 （スマートフォン用のみ）
kintone.mobile.app.getHeaderSpaceElement();
ユーザー情報
ログインユーザーの情報 kintone.getLoginUser();
ユーザーの情報 （ユーザーエクスポートAPI）
https://(サブドメイン名).cybozu.com/v1/users.json
UIデザイン デザインのバージョン kintone.getUiVersion();
JavaScript API － kintone REST API リクエスト
36
操作内容 関数
REST APIリクエストを送信する
kintone.api('/k/v1/record', 'GET', {app: 1, id: 5}, function(resp) { //成功時の処理 console.log(resp); }, function(resp) { //エラー時の処理 console.log(resp); });
URL を取得する（クエリ文字列無し） kintone.api.url('/k/v1/records');
URL を取得する（クエリ文字列付き） kintone.api.urlForGet('/k/v1/records', {app: 4,fields: ["record_no"]});
CSRFトークンの取得 kintone.getRequestToken();
JavaScript API － 外部APIの実行
37
操作内容 関数
外部のAPIを実行する
kintone.proxy('https://*****.***.net', 'GET', {}, {}, function(body, status, headers) { //成功時の処理 console.log(status, JSON.parse(body)); }, function(body) { //エラー時の処理 console.log(JSON.parse(body)); });
kintone API
38
3. kintone.proxy()
kintone.proxy()
39
kintone.proxy() = 外部Webサービス(WebAPI)の参照・操作
• 世の中にある多種多様なWebサービスが提供するAPIを活用することで、kintoneがマッシュアップの中心に
郵便番号→住所変換、天気予報 CMS（WordPress、Movable Type） Twillio（電話＆SMS） Twitter等のSNS etc...
➡ アイデア次第で可能性は無限大！
kintone.proxy() Webサービス
kintone.proxy() 利用例
40
kintoneプラグイン《Movable Type 連携》（ラジカルブリッジ） ※無償
http://radical-bridge.com/product/kintone-mt-plugin.html
kintoneで管理している商品情報などのデータをMovable Type経由でWebサイトに公開 ➡Webに公開するためだけのコピペ作業が不要に ➡kintoneのワークフローとの組み合わせも容易
カスタムフィールドに対応
スマホからも投稿できる
kintone.proxy()
• 記事の投稿・更新・削除
Movable Type (Data API 1.0)
cybozu.com developer network
41
kintone API リファレンス
https://cybozudev.zendesk.com/hc/ja/categories/200147600
詳細はWebで
Tips、Q&A、サンプルも豊富です
cybozu.com developer network
42
開発者ライセンス
https://cybozudev.zendesk.com/hc/ja/articles/200720464
• 有効期間１年間 • 延長更新時は再申請
が必要
cybozu.com developer network
43
開発者ライセンス
https://cybozudev.zendesk.com/hc/ja/articles/200720464
やめると言うまで １年毎の自動更新に
• 有効期間１年間 • 延長更新時は再申請
が必要
cybozu.com developer network
44
開発者ライセンス
https://cybozudev.zendesk.com/hc/ja/articles/200720464
やめると言うまで １年毎の自動更新に
• 有効期間１年間 • 延長更新時は再申請
が必要
“わんこそば”ライセンス
ライブカスタマイズ
45
JavaScript APIのプログラミングを
実際にやってみます
APIで広がるkintoneの世界
46
お疲れ様でした