Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to APIで広がるkintoneの世界
Similar to APIで広がるkintoneの世界 (20)
More from Sakae Saito
More from Sakae Saito (20)
Recently uploaded
Recently uploaded (9)
APIで広がるkintoneの世界
- 1. サイボウズ公認kintoneエバンジェリスト ラジカルブリッジ 代表 斎藤 栄 APIで広がる kintone Café 札幌 Vol.4 #kintonecafe ライブカスタマイズでkintoneがもっとわかる！ の世界 2015/3/14
- 2. 自己紹介 2 • 1971年 札幌市生まれ • 小６からパソコンに触れ、大学卒業まで札幌で過ごす • 1993年 NTTデータ通信株式会社（首都圏） • 1996年 株式会社データクラフト（札幌） • 2012年 ラジカルブリッジ設立（札幌） • 2014年より kintoneエバンジェリスト として活動中 代表／ IT 活用アドバイザー “クラウドおじさん” 斎藤 栄 ～ ITでみんなに“WAKU WAKU”を ～
- 4. cybozu.com カンファレンス 2014 にて講演 4 2014年12月12日 日本経済新聞 全面広告 札幌発エバンジェリストが語る、 地方SIerとkintoneビジネスの可能性
- 6. 導入事例① フランス料理店様 Before After • 予約・顧客情報のデータ化 • お客様の過去情報の共有 • リピート率の把握 • 複数店舗でも最新在庫を把握 業務効率化 データ蓄積 情報共有 予約管理・顧客管理 • 予約記録は紙の予約台帳のみ • お客様の好み等は各スタッフの記憶が頼り ワイン在庫管理 • ワイン在庫はExcelで管理 6
- 7. 導入事例② 株式会社ミツノ様（楽器買取・販売業） 在庫管理 顧客管理 買取業務 販売業務 レンタル業務 調律業務 リアル店舗 ネットショップA ネットショップB 商品情報・写真登録の自動化 出品・取り下げの自動化 7
- 8. 導入事例③ 株式会社ヤマチコーポレーション イベント事業部様 紙 見積書 出荷伝票 原価台帳 発注伝票 仕入伝票 請求書 申請 承認 処理 担当 上長 事務 • 入力データの一元化 • 遠隔地間の情報共有 • 外出先からの承認 • 伝票の自動出力 • 売上・利益率等の分析 Before After 業務効率化 ペーパーレス データ蓄積 8 イベント業務管理
- 11. ベストチーム365 サービスプラン 【わくわくプラン】 ¥89,890 【にこにこプラン】 ¥252,500 初回訪問・試作無料 訪問改修１回 初回訪問・試作無料 訪問改修３回 60日間の利用サポート 初回訪問・試作無料 11 リーズナブルな理由 見積なし 見積作業をしている間にアプリができてしまうため、料金体系をメニュー化しました。 仕様書なし 一般的なシステム開発作業で多くの時間を要する仕様書の作成を省きました。 分業なし 営業、SE、プログラマという分業体制ではなく、一人の担当者が全ての作業を行います。 サイボウズ社のkintoneを基盤としているため、短期間で複数のアプリを構築できます。 ※金額は全て税別です。 ※別途kintoneの利用契約が必要となります。 ※札幌市内及び近郊のお客様を想定しています。遠方のお客様の場合、Skypeによる ネットミーティングにて対応させていただきます。
- 13. ベストチーム365 導入事例 地方独立行政法人 佐賀県医療センター好生館様 予約台帳 • 予約前に空き状況がわかる • カレンダー形式や一覧形式な ど多様な見方ができる • 実績集計の自動化 • 受付担当者の業務負荷を削減 Before After 業務効率化 ペーパーレス 13 地域の連携医療機関からの紹介患者を対象とした 診療予約管理 • 電話で問い合わせないと空き状況が確認できない • 紙の台帳が手元にないと空き状況の問い合わせに 回答できない • 紙の台帳を元に「来院予定者リスト」「月別予約 実績」などのExcel帳票を別途作成しなければな らない（二重・三重の入力） • 受付担当者の業務負担が増加 北海道と佐賀県の間で たった2回のSkypeミーティングで完成！
- 14. kintone Café 14 kintone Caféは、まだkintoneに触れたことの無い方から、 より高度なカスタマイズを行いたいと考えているプロフェッ ショナルの方まで幅広い層を対象に、 楽しく学び・教え合う ことで、kintoneの魅力や活用法をみんなで共有するための 勉強会コミュニティです。
- 15. 全国に広がる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
- 16. 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
- 18. メディア掲載 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/
- 21. kintone API 21 1. kintone REST API 2. kintone JavaScript API
- 22. kintone API – 利用形態から見た分類 22 1. kintone REST API 2. kintone JavaScript API 1. kintone REST API 2. kintone JavaScript API 3. kintone.proxy() ※JavaScript API関数の一つ
- 23. kintone API 23 JavaScript API REST API kintone.proxy() 外部システム・アプリ Webサービス • UI（見た目）の操作 • 複数アプリのデータ参照・操作（REST API） • 外部からのデータ参照・操作 • 外部Webサービス(WebAPI) の参照・操作 全て今風なJSON形式のAPI
- 24. kintone API 24 1. REST API
- 25. REST API 25 外部システム・アプリREST API REST API = 外部からのデータ参照・操作が行える • 既存システム • クライアントアプリ • スマホアプリ • IoT JSON形式でHTTPS通信ができれば言語は問わない Java, iOS, Goの公式SDKあり 有志によるRuby, .NET, RのSDKもある ExcelVBAからも利用できる！
- 26. REST API 利用例 26 kintone連携WordPressプラグイン（デジタルキューブ×サイボウズ） ※無償 https://wordpress.org/plugins/cybozu-wp-to-kintone/ kintoneで作成したデータベースの項目を WordPress側で入力フォームとして自動生成 フォームに入力したデータをkintoneへ投稿 ➡フォーム投稿内容のデータベース化 ➡集計等、データの二次活用が容易に WordPressの投稿画面で専用ショートコードを 記述するだけで導入可能 REST API WordPress • フォーム設計情報の取得 • レコードの登録
- 27. 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操作の中で包括的に実施
- 28. kintone API 28 2. JavaScript API
- 29. JavaScript API 29 JavaScript API • kintoneの基本機能ではできない部分の機能強化 = UI（見た目）の操作 = 複数アプリのデータ参照・操作（REST APIを利用） • レコード一覧表示時、詳細表示時、編集開始時など、 kintone上の操作イベントが発生した際にJSが作動 ある条件に合致したデータの背景色を変える 独自管理番号の自動採番 地図表示／ガントチャート表示 複数アプリ間のデータ連携 etc... JavaScript API
- 30. JavaScript API 利用例 30 ガントチャート（cybozu.com developer network サンプル） ToDoのスケジュールをガントチャート 形式で表示するサンプル jQuery, jQuery Ganttを利用 自前のCSSも適用可 地図表示（cybozu.com developer network サンプル） 住所からGoogleマップにピン表示する サンプル Google Map APIライブラリを利用
- 31. JavaScript API – JS基本形 31 (function () { "use strict"; kintone.events.on('app.record. index.show', function (event) { ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ ・・・・・・・・・・・・・ return event; }); })(); イベントタイプ 独自プログラム ファイル名は任意だが、拡張子を「.js」にする。 文字コードは「UTF-8」、BOMなしで保存する。
- 32. 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 ×
- 33. 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; ● ●
- 34. 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');
- 35. 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();
- 36. 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();
- 37. 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)); });
- 39. kintone.proxy() 39 kintone.proxy() = 外部Webサービス(WebAPI)の参照・操作 • 世の中にある多種多様なWebサービスが提供するAPIを 活用することで、kintoneがマッシュアップの中心に 郵便番号→住所変換、天気予報 CMS（WordPress、Movable Type） Twillio（電話＆SMS） Twitter等のSNS etc... ➡ アイデア次第で可能性は無限大！ kintone.proxy() Webサービス
- 40. 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)
- 41. cybozu.com developer network 41 kintone API リファレンス https://cybozudev.zendesk.com/hc/ja/categories/200147600 詳細は Webで Tips、Q&A、サンプルも豊富です
- 42. cybozu.com developer network 42 開発者ライセンス https://cybozudev.zendesk.com/hc/ja/articles/200720464 • 有効期間１年間 • 延長更新時は再申請 が必要
- 43. cybozu.com developer network 43 開発者ライセンス https://cybozudev.zendesk.com/hc/ja/articles/200720464 やめると言うまで １年毎の自動更新に • 有効期間１年間 • 延長更新時は再申請 が必要
- 44. cybozu.com developer network 44 開発者ライセンス https://cybozudev.zendesk.com/hc/ja/articles/200720464 やめると言うまで １年毎の自動更新に • 有効期間１年間 • 延長更新時は再申請 が必要 “わんこそば”ライセンス