kintone Café 愛媛ハンズオン資料

1. ステップアップ
ハンズオン
アプリの作成から
Javascriptカスタマイズによる外部連携まで
2016/11/12 kintone Café 愛媛
kintone Café 愛媛 沖 安隆
資料URL：http://bit.ly/2fuaMOG

2. ステップアップ？
• 今回のハンズオンは、kintoneの基本操作から再
確認するハンズオンです
• D&Dでフィールドを配置するところから、
JavaScriptでカスタマイズして外部連携するとこ
ろまでやってみます
• 最後まで出来なくても、持ち帰って復習が可能
ですので、気楽に進めましょう

3. やる事一覧
① 詳細画面でテーブルを集計するアプリを作ります
条件に一致した数値だけ集計するカスタマイズをしま
す
② 一覧画面でレコードを集計して、アラートで表示します
レコードが500件を超えても集計できるようにします
③ ボタンを詳細と一覧のページに追加します。ボタンを押
すと①と②の数値を表示します
④ ボタンを押すとslackに投稿できるようにします

4. やる事一覧
1. 可能なら、slackからkintoneのフィールドを読
み出す設定をします
2. 時間的に無理なら、slackからkintoneへレコー
ドを追加するデモをご紹介します
3. それも無理なら、質疑応答を優先します

5. やる事一覧
スライドの1枚目にも書いてましたが、カスタマイ
ズに使うJavaScriptのファイルなどは、下記URLで
配布しています。
事前にダウンロードをお願いします。
資料URL：http://bit.ly/2fuaMOG

6. ①テーブルを集計するアプリを作りま
す

7. ①テーブルを集計するアプリを作りま
す

8. ①テーブルを集計するアプリを作りま
す
ざっくりと手順を紹介

9. ①テーブルを集計するアプリを作りま
す
ざっくりと手順を紹介

10. ①テーブルを集計するアプリを作りま
す
ざっくりと手順を紹介

11. ①テーブルを集計するアプリを作りま
す
ざっくりと手順を紹介

12. ①テーブルを集計するアプリを作りま
す
ざっくりと手順を紹介

13. ①テーブルを集計するアプリを作りま
す
1. テーブル内の数値を集計するなら、自動計算で
集計関数を使うのが簡単
2. 数値フィールドなら数字以外の入力が出来ない
ので、入力チェックにも標準で対応
3. あれ？ JavaScriptカスタマイズ不要・・・？
4. ・・・・・だと、物足りないと思うので。。。

14. ①テーブルを指定条件で集計するアプリを作りま
す

15. ①テーブルを指定条件で集計するアプリを作りま
す

16. ①テーブルを指定条件で集計するアプリを作りま
す

17. ①テーブルを指定条件で集計するアプリを作りま
す
できあがり

18. ①テーブルを指定条件で集計するアプリを作りま
す
ソースはこんな感じ

19. ①テーブルを指定条件で集計するアプリを作りま
す
色々触ってみると、気づくことがありませんか？
• 文字や数値を変えても、集計値は変わらない
• テーブルに追加しても、集計値は変わらない
• そこで、文字を変えた時に再集計するようにし
てみましょう。

20. ①テーブルを指定条件で集計するアプリを作りま
す

21. ①テーブルを指定条件で集計するアプリを作りま
す

22. ①テーブルを指定条件で集計するアプリを作りま
す
ソースはこんな感じ

23. ①テーブルを指定条件で集計するアプリを作りま
す
• 今回は、イベントを追加して、編集時に文字列
＿1行＿が変更された時も、計算するようにしま
した
• この様に、複数イベントの指定が自由に出来る
ようになると、ドンドンと使いやすくなります
• ただし、編集と新規作成で別イベントだったり
と、結構細かく分かれているので、間違えない
ようにしましょう

24. ②レコードを集計するカスタマイズをしま
す

25. ②レコードを集計するカスタマイズをしま
す
出来上がりイメージ

26. ②レコードを集計するカスタマイズをしま
す

27. ②レコードを集計するカスタマイズをしま
す
数値が0になるとか表示されないなどの場合は、フ
ィールドコードを確認してください

28. ②レコードを集計するカスタマイズをしま
す
ソースはこんな感じ

29. ②レコードを集計するカスタマイズをしま
す
1. この集計の対象となるのは、現在表示されてい
る一覧です
2. 複数ページに跨るような場合は集計できません
3. なので、全レコードを集計するように変えてみ
ます

30. ②全レコードを集計するカスタマイズをします

31. ②全レコードを集計するカスタマイズをします
500件を超えて集計できてます
絞り込みなど、条件設定も可能です

32. ②全レコードを集計するカスタマイズをします
ソースはこんな感じ

33. ③ボタンを詳細と一覧のページに追加しま
す

34. ③ボタンを詳細と一覧のページに追加しま
す
詳細ページに追加

35. ③ボタンを詳細と一覧のページに追加しま
す

36. ③ボタンを詳細と一覧のページに追加しま
す
ボタンを押すと数値の値を表示します

37. ③ボタンを詳細と一覧のページに追加しま
す
ソースはこんな感じ

38. ③ボタンを詳細と一覧のページに追加しま
す
ボタンを新デザインにするにはこうします

39. ③ボタンを詳細と一覧のページに追加しま
す
新デザインになりました

40. ③ボタンを詳細と一覧のページに追加しま
す
一覧ページに追加

41. ③ボタンを詳細と一覧のページに追加しま
す

42. ③ボタンを詳細と一覧のページに追加しま
す
ボタンを押すと集計値を表示します

43. ③ボタンを詳細と一覧のページに追加しま
す
ボタンを押すと集計値を表示します

44. ④ボタンを押すとslackに投稿できるようにします

45. ④ボタンを押すとslackに投稿できるようにします
http://bit.ly/2fw2lQQ を参照

46. ④ボタンを押すとslackに投稿できるようにします
リンクを押します

47. ④ボタンを押すとslackに投稿できるようにします
slackで、Incoming Webhookの設定をします

48. ④ボタンを押すとslackに投稿できるようにします
Webhook URLをコピーします

49. ④ボタンを押すとslackに投稿できるようにします
customize4-1.jsへ貼り付けます

50. ④ボタンを押すとslackに投稿できるようにします

51. ④ボタンを押すとslackに投稿できるようにします
ボタンを押すと、slackへ投稿します

52. ④ボタンを押すとslackに投稿できるようにします
ソースはこんな感じ

53. ④ボタンを押すとslackに投稿できるようにします

54. ④ボタンを押すとslackに投稿できるようにします
ボタンを押すと、slackへ投稿します

55. お疲れ様でしたー

56. 実は。。。。

57. 今までのカスタマイズは
全て公式サイトのTipsなどで
紹介済みの内容です

58. 今回の内容以外にも
色々と紹介されていますので
是非ご覧ください！

59. 引用元記事一覧
レコード編集イベント – cybozu developer network
http://bit.ly/2egLyUd
レコード一覧イベント – cybozu developer network
http://bit.ly/2fiBCGW
Promiseを利用したモダンなアプリの全レコード取得の書き方 – cybozu
developer network
http://bit.ly/2fbdEzB
Twilioで連絡先に一斉発信（電話/SMS） – cybozu developer network
http://bit.ly/2fybaKh

60. 引用元記事一覧
kintoneからSlackに通知を送る方法
http://bit.ly/2fw2lQQ
Slackから手軽にkintoneへレコード登録する方法
http://bit.ly/2fdr8ea