【デブサミ2017】45分で早わかり！kintoneの基本とカスタマイズ

1. デブサミ2017
45分で早分かり！
kintoneの基本とカスタマイズ
16-F-1 17-F-1
2017/2/16,17 サイボウズ 三宅、李

2. タイムテーブル
11:05～11:30 kintoneの基本
11:30～11:50 kintoneカスタマイズ (サイボウズ 三宅)
(サイボウズ 李)

3. kintoneの基本

4. 自己紹介
おんちゃん 韓・中・日 嵐
嵐

5. サイボウズ紹介
kintoneとは？
kintoneのデモ
知っ得情報
kintoneの事例
目次

6. サイボウズ紹介

7. サイボウズ紹介-会社概要

8. サイボウズ紹介-オフィス
コンセプト「Big Hub for Teamwork」

9. サイボウズ紹介-製品
2002~ 2010~
スケジュール共有,施設予約,掲示板…
1997~
5万社~
190万
ユーザー~
160万
ユーザー~
グループウェア ”“

10. サイボウズ紹介-製品
2002~ 2010~
スケジュール共有,施設予約,掲示板…
1997~
5万社~
190万
ユーザー~
160万
ユーザー~
グループウェア ”“
サイボウズ =
スケジュール中心
グループウェア

11. そんなことありません。

12. サイボウズには、

13. サイボウズOffice kintone
分類
形態
提供
自由度
(フォーム)
グループウェア
情報共有
パッケージ/クラウド
なし
プラットフォーム
業務遂行
クラウド
あり
kintoneとofficeの違いは？

14. kintoneとは？

15. kintoneとは？- kintoneの3要素
データベース
必要な情報を
蓄積・共有する
プロセス管理
簡単にプロセスを
回したり、承認する
コミュニケーション
連絡・補足・相談を
する

16. kintoneの3要素 – データベース
②Excel/CSV
ファイルから作成
①アプリストア
から選ぶ
③はじめから作成
アプリ

17. kintoneの3要素 – データベース
ドラッグ&ドロップで
ファーストに
フォームを作成する
ことができる！
フォームの設定

18. kintoneの3要素 – データベース
一覧画面 詳細画面 グラフ
データを蓄積したり、蓄積されたデータを利用して
簡単に集計をとることが可能に！

19. kintoneの3要素 – データベース
一つの場所にデータ・メンバー間の
やり取りなどが集約できる！
スペース ゲスト
スペース

20. kintoneの3要素 – プロセス管理
申請する 承認する
完了
差し戻す

21. kintoneの3要素 – コミュニケーション
各データに対する
相談や質問、
アドバイスなどが
可能
レコードのコメント欄

22. kintone デモ

23. kintone 事例

24. kintone事例 - 株式会社バルス 様
・タイムリーな情報共有が
できない。
・CC、定型文 などが面倒くさい。
商社
購
買
担
当
者
導入前
・作業、進行状況の管理が
属人化されて引き継ぎが難しい。

25. kintone事例 - 株式会社バルス 様
・作業、進行状況が共有されて
いるため、担当者が不在時も
遅延せずに対応できる！
商社
・コメントや、スレッド機能で
簡単に、スピーディーに
コミュニケーションできる！
購
買
担
当
者
導入後
・リアルタイムで納期や発注状況
が把握できる！
基幹
システム

26. 導入前
迷子が見つかった
“ ”
FAXがある
案内所まで
案内する
インフォ
メーション
センターに
FAXを送付
FAXに
気がつくと
案内放送をする
kintone事例 - 日本空港ビルデング株式会社 様
迷子の
プロフィールを
FAX用紙に
記載する

27. 導入前
迷子が見つかった
“ ”
FAXがある案内所まで
移動するのに時間がかかる
kintone事例 - 日本空港ビルデング株式会社 様

28. 紙の台帳の管理が大変
(データ管理、更新管理など)
迷子が見つかった
“ ”
導入前
kintone事例 - 日本空港ビルデング株式会社 様

29. FAX送信のあと、受信までタイムラグがある
迷子が見つかった
“ ”
導入前
kintone事例 - 日本空港ビルデング株式会社 様

30. 迷子が見つかった
“ ”
FAX受信に気付くまで時間がかかる
導入前
kintone事例 - 日本空港ビルデング株式会社 様

31. その場で
子供の写真を撮る
プロフィールを登録
kintoneと連動した
パトランプが点灯
確実に通知
導入後
迷子が見つかった
“ ”
kintone事例 - 日本空港ビルデング株式会社 様

32. 導入後
迷子が見つかった
“ ”
kintone事例 - 日本空港ビルデング株式会社 様
FAXがある案内所までの移動時間を削減

33. 導入後
迷子が見つかった
“ ”
kintone事例 - 日本空港ビルデング株式会社 様
紙の台帳の更新時間を削減

34. 導入後
迷子が見つかった
“ ”
kintone事例 - 日本空港ビルデング株式会社 様
FAX送信の後、受信までのタイムラグ、
館内放送までの時間を削減

35. kintone事例サイト
https://kintone-sol.cybozu.co.jp/cases/

36. 知っ得情報

37. 知っ得情報
kintone
hive online
kintone
ヘルプ＆FAQ
kintone
ガイドブック
http://kintone-blog.cybozu.co.jp/
https://help.cybozu.com/ja/k/
https://kintone.cybozu.com/jp/feature/date.html

38. 『kintoneの基本』の次は…
kintoneカスタマイズについてです！

39. 趣味はサイクリング
岡山 ➡ 京都 ➡ 東京へ
三宅 智子（Mike）です
仕事はイベントの運営・カスタマイズ
エンジニア修行中です！

40. 目次
kintoneカスタマイズの基本
フロントエンドとバックエンド利用
デモ
イベント情報

41. kintoneカスタマイズの基本

42. 標準機能で足りない部分を補う
kintoneカスタマイズ
画 面 開 発 ・ 機 能 追 加
（ J a v a S c r i p t A P I ・ H T M L ・ C S S ）
ガ ン ト チ ャ ー ト M a p 表 示
シ ス テ ム デ ー タ 連 携
（ R E S T A P I ）
基幹システムと連携センサーと連携
プラグイン（機能追加パッケージ）

43. 2種類のAPI
他システムとデータ連携できるようになります。
kintoneのデータを他システムに渡したり、他シ
ステムのデータをkintoneに取り込むことができ
ます。
画面をカスタマイズすることで、標準搭載されて
いない機能を利用できるようになります。
REST API
JavaScript API

44. フロントエンドとバックエンド利用

45. フロントエンド利用
条件書式
ガントチャート
住所から地図表示
入力値チェック
カスタマイズビュー表示

46. Twilio連携で電話やSMS連絡
SendGrid連携でメール送信
SendGrid: https://cybozudev.zendesk.com/hc/ja/articles/206584633
Twilio: https://cybozudev.zendesk.com/hc/ja/articles/213588883
データを貯めるのは得
意だけれど、送るのは
ちょっと…
そんな時はサービス連
携で解決！

47. Chart.jsでダッシュボード作成
https://cybozudev.zendesk.com/hc/ja/articles/214479043
kintoneの標準機能では、こんな
グラフは作れないので、ライブラ
リを利用して作成します！

48. AWSにある大規模データをkintoneで
グラフ化
サマリーを登録
POS、売上明細など
の大量データ想定
AWS S3 AWS Lambda
＋
kintone
コマンドラインツール
拠点A
拠点B
拠点…
大量データの扱いは苦手なので、
クラウドDBに任せる！

49. バックエンド利用（データベースとして）
REST API

50. kintone上のデータの印刷
標準機能では綺麗
に印刷できない
印刷したくない項目
も印刷されてしまう
②外部サービス
（プリントクリエイ
ターやRepotone Uなど）
①JavaScript
カスタマイズ

51. モバイルアプリ開発のバックエンドとし
て（Monaca連携）
1 来場者管理アプリ
2 陳列場所確認アプリ
3 集荷状況確認アプリ
QRコードをスキャン
して、来場者情報を
kintoneに送る
商品バーコードスキャン
でkintone DBを検索し
て陳列場所表示
QRコードスキャンで、
商品情報&現在地情報を
kintoneに登録
https://cybozudev.zendesk.com/hc/ja/search?utf8=%E2%9C%9
3&query=Monaca&commit=%E6%A4%9C%E7%B4%A2

52. ついにWebhook機能が登場！
• アプリのレコード追加、編集、ステータスの更新
を外部サービスに通知可能に
ノンコーディングで連携可能に
中間はZapier/Microsoft Flow/IFTTT/Mulesoft
などでデータの型変換！
Webhookイメージ by ダン吉

53. もっとこんなサービスとも連携可能！
Webhooks logo
The MIT License
（https://github.com/logo/webhooks）
Copyright © 2014 <friends@segment.io>

54. まとめると…
苦手な部分もあるけど、
• 大量データ（100万リクエスト/アプリ）
クラウドDB
• 定期実行処理
SDK
• 帳票出力
ソリューション
• モバイルカスタマイズ
Android SDK, iOS, SDK,
Monaca, Cordova
他サービス連携で実現！

55. デモ

56. kintoneからSlackに通知を送る
• kintoneでレコード登録したらその内容をSlackに送信
（参考）kintone → Gmail:
https://cybozudev.zendesk.com/hc/ja/articles/115000299143
中間にはZapier

57. デモへLet’s go!

58. カスタマイズの動きを見れるデモサイト！
developer networkにアカウント登録するとデモ環境に入れます
➡https://dev-demo.cybozu.com/k/

59. API仕様やカスタマイズ情報は
cybozu developer network
• 2014年10月 公開のサイボウ
ズのクラウド製品における、
技術者向けサイト
• 現在、メンバー登録数
6,000アカウント突破！
検索はこちら⇓⇓⇓
https://cybozudev.zendesk.com/hc/ja

60. ★メンバー登録特典★
• 5ユーザー、1年間無償のkintone開発者ライセンスを
申し込むことができます。
• コミュニティに投稿やコメントしたり、Tips に質問で
きます。
• API のアップデート情報の通知を受け取ることができ
ます。
• Tipsやサンプルのkintone デモサイトを利用できます。
• 気になるユーザーをフォローすることができます。
• kintone専用のHTTPクライアントツールを利用できます。

61. イベント情報

62. kintone Café
kintone Caféとは？
kintone Caféは、まだkintoneに触れたことの無い
方から、より高度なカスタマイズを行いたいと考
えているプロフェッショナルの方まで幅広い層を
対象に、 楽しく学び・教え合うことで、kintone
の魅力や活用法をみんなで共有するための勉強会
コミュニティです。
http://kintonecafe.com/

63. kintone hive
https://kintone.cybozu.com/jp/event/hive2016/05/index.html
kintone hiveとは？
kintoneの活用のヒントやkintoneへの期待を膨らませる
kintoneユーザーのための場です。
4/14 名古屋
4/19 福岡
5/19 東京
6/16 大阪
にて開催！

64. kintone devCamp
http://kintonedevcamp.connpass.com/
kintone devCampとは？
kintone devCamp とは kintone界隈のdeveloper同士で
会場に出向き、kintoneに触れあい、共に学んでいく
Cybozu主催のdeveloper向け勉強会です。 kintoneカス
タマイズ初心者～上級者の方向けにdeveloper network
内のコンテンツを中心としたテーマで開催していきます。

65. kintone devCamp Vol.11
@Tokyo & @Osaka
2017/3/1(水) 14:00～
サイボウズ東京オフィス27F
サイボウズ大阪梅田オフィス
&
※現在キャンセル待ち

66. Thank you