Developers Summit 2016 18-F-1 資料

1. 【初級】
kintoneアプリをJavaScriptでいじってみよう
Cybozu,Inc. Kitagawa Kyohei
ハッシュタグ：#devsumiF
セッションID:18-F-1

2. 自己紹介自己紹介
北川 恭平（きたがわ きょうへい）
• Cybozu 新卒4年目
• kintone developer プロデューサー
• cybozu.com developer network 管理人
• kintone技術者系イベント企画
• developerサイトのコンテンツ制作
趣味
• カレー
• 野球
• トレーニング
Work

3. 本日の資料
http://bit.ly/devsum-kintone

4. 本日のアジェンダ
▌kintoneの基本（講義）
▌kintone APIによる拡張性（講義）
▌kintoneアプリを作ってみよう
▌kintoneアプリをサンプルJavaScriptでいじってみよう
▌サンプルJavaScriptを改造してみよう
▌まとめ

5. kintoneの基本

6. みなさんkintoneを知っていますか？

7. kintoneとは？
▌チームで使う業務システムをファストに開発できるクラウドサービスです。
=チームワークプラットフォーム
データベース ワークフロー
（プロセス管理）
コミュニケーション

8. kintoneアプリ？
▌チームで使う業務システムをアプリケーション単位で作成します。
交通費申請
日報
契約書管理クレーム管理
顧客管理

9. どうやってアプリを作るのか？

10. ドラッグ＆ドロップでアプリ作成

11. アプリストアからアプリ作成

12. エクセルからアプリ作成

13. アプリの画面

14. 一覧ビュー

15. 詳細ビュー

16. 登録画面

17. プロセス管理（ワークフロー）
未処理
処理中
完了

18. コミュニケーション

19. データの活用

20. kintone APIによる拡張性

21. kintoneの拡張性
▌kintoneには大きく分けて2種類のAPIを用意しています
REST API
データ連携 画面のカスタマイズ
JavaScript

22. REST API
▌レコードの取得・追加・更新・削除
▌スペースの作成・更新
▌デプロイ（アプリ作成・設定変更）

23. REST API 活用例

24. JavaScript API
▌イベントハンドラ（一覧、表示、追加、編集、削除）
▌画面上の値を取得・設定
▌REST APIの実行
▌外部APIの実行

25. JavaScript API 活用例

26. カスタマイズビュー
▌一覧の画面をHTML5で記述できるビュー

27. カスタマイズビュー活用例

28. ドキュメント
▌cybozu.com developer network
https://cybozudev.zendesk.com/hc/ja

29. 活用法まとめました
▌kintone hive online
http://kintone-blog.cybozu.co.jp/developer/000173.html

30. kintoneアプリを作ってみよう

31. kintoneでアプリ作成
▌主に3種類の方法で、すぐにアプリを作成できます。
①Excelファイル
をそのまま
アプリ化
②アプリストア
から選ぶ
③はじめからつくる
今回はExcelから作成

32. https://サブドメイン.cybozu.com/
ログイン画面にアクセス

33. クリックして kintone にアクセス
メンテナンス等のお知らせ
ユーザー情報の管理や cybozu.com
全体に影響する設定
ログイン完了

34. 新デザイン設定
本ハンズオンは新デザイン前提ですすめます
kintoneシステム管理 > 新旧デザインの切り替えよりご変更ください
34

35. ポータル
通知
クリックしてアプリを作成
アカウントやシステムの設定

36. アプリの作成方法を選ぶ

37. Excelファイルを読み込む
▌顧客リストforデブサミ.xlsxを読み込みます

38. フィールドタイプを変更します
▌以下のように変更します
フィールド名 変更前 変更後
会社名 ドロップダウン 文字列(1行)
部署名 ドロップダウン 文字列(1行)
担当者名 ドロップダウン 文字列(1行)
郵便番号(数値のみ) 数値 数値
住所 文字列(1行) 文字列(1行)
TEL(数値のみ) 数値 数値
FAX(数値のみ) 数値 数値
メールアドレス リンク(メールアドレス) リンク(メールアドレス)
緯度 数値 数値
経度 数値 数値
備考 備考 文字列(複数行)
確度 ラジオボタン ラジオボタン

39. アプリを作成します

40. アプリを確認します

41. 見た目を直します

42. ドラッグ＆ドロップで見やすいレイアウトを目指します
Before After

43. データの登録

44. データの削除

45. kintoneアプリをサンプルJavaScriptでいじっ
てみよう

46. https://cybozudev.zendesk.com/hc/ja/articles/202341964
今回適用するサンプル

47. 準備
▌アプリの設定 > フォーム より 以下のように変更を加えます。
フィールド名 変更後フィールドコード
住所 Address
緯度 lat
経度 lng
<変更>
<追加>
追加するフィールド 要素ID
スペース Map

48. https://cybozudev.zendesk.com/hc/ja/articles/202341964
developer networkよりサンプルをコピー＆ペースト

49. 文字コード「UTF-8」、ファイル名「sample.js」
としてファイルを保存します。
JavaScriptファイルの保存

50. アプリの管理画面「詳細設定」より作成したファイルを読み込ませます
カスタマイズ適用

51. レコード一覧画面と詳細画面で地図が表示されていたら成功です
カスタマイズ適用確認

52. サンプルJavaScriptを改造してみよう

53. ゴール：確度の条件によって色を変える

54. 準備
▌アプリの設定 > フォーム より 以下のように変更を加えます。
フィールド名 変更後フィールドコード
確度 kakudo
<変更>

55. Sample.jsの変更
★修正点1
レコード一覧の編集イベント時になにも処理しないように変更します。
263行目のイベントからapp.record.index.edit.submitを消去します。
ココを削除
カンマも削除

56. Sample.jsの変更
★修正点2
関数indexShowを次のように変更します。
function indexShow(event){
var records = event.records;
loadGMap();
waitLoaded(event, 'index', 10000, 100);
var elKakudo = kintone.app.getFieldElements('kakudo');
for(var i = 0; i < elKakudo.length; i++){
if(records[i]['kakudo']['value'] == 'A'){
elKakudo[i].style.color = 'red';
}else if(records[i]['kakudo']['value'] == 'B'){
elKakudo[i].style.color = 'blue';
}else if(records[i]['kakudo']['value'] == 'C'){
elKakudo[i].style.color = 'green';
}
}
}

57. カスタマイズ適用
編集が完了したら再度JavaScriptファイルをアップロードします。

58. 動作確認
“確度”の色がそれぞれ変わると成功です

59. One more thing

60. 条件書式プラグインを試してみよう
▌sample.js をとりはずします
▌下記より条件書式プラグインをダウンロードして適用します
https://cybozudev.zendesk.com/hc/ja/articles/203501084

61. まとめ

62. kintone まとめ
▌GUIでアプリケーションを作れるプラットフォーム
▌業務アプリケーションをExcelから作れたり、ドラッグ＆ドロップで作れる
▌kintone JavaScriptカスタマイズ
 表示を変えることができる
 他サービスと連携ができる
 楽しい

63. cybozu.com developer network
https://cybozudev.zendesk.com/hc/ja
★アカウント登録特典★
• 5ユーザー、1年間無償のkintone開発者ライセンスを申し込
むことができます。
• コミュニティに投稿やコメントしたり、Tips に質問できます。
• API のアップデート情報の通知を受け取ることができます。

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

65. kintone devCamp Vol.9 @Tokyo
2016/3/2(水) 15:00-
サイボウズ東京オフィス27F

66. Thank You