kintone Café 新潟 Vol.3　ハンズオン（アプリ作成編）の資料です。

1. kintoneって聞いたことあるぞ！？
ならアプリを作成してみよう！
ハンズオン(アプリ作成編)
(株)アイティー・プラス・ワン
kintoneエバンジェリスト
星野智久
2016年2月6日
kintone Café 新潟 Vol.3

2. 自己紹介
去年は、プライベートで枝豆の収穫イベ
ントに参加したら、なぜかkintoneを導
入してもらえることになりました。
株式会社アイティー・プラス・ワン
星野 智久（愛称は・・・のんびん、ブルー）31歳
新潟県長岡市(旧川口町)出身
サイボウズ公認kintoneエバンジェリスト
kintoneCafé新潟支部長もしています

3. kintoneCafé？？
kintoneCafé？？

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

5. kintoneCafé？
5
2013/12/7 札幌 Vol.1（起源）
2014/5/16 札幌 Vol.2
2014/10/25 札幌 Vol.3
2015/3/14 札幌 Vol.4
2015/6/4 札幌 Vol.5
2015/10/17 札幌 Vol.6
2015/11/30 札幌 Vol.7
2014/5/29 福岡 Vol.1
2014/7/11 福岡 Vol.2
2014/10/24 福岡 Vol.3
2015/4/17 福岡 Vol.4
2015/6/24 福岡 Vol.5
2015/8/29 福岡 Vol.6
2015/10/24 福岡 Vol.7
2015/12/19 福岡 Vol.8
2014/5/30 土佐
2015/5/30 高知 Vol.2
2014/7/5 弘前 #1
2015/1/29 京橋 Vol.1
2015/4/6 京橋 Vol.2
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
2015/9/26 愛媛 Vol.1
2016/1 愛媛 Vol.2
2014/9/25 神戸 Vol.1
2015/5/25 神戸 Vol.2
2014/9/28 Okinawa #1
2015/2/11 沖縄 Vol.2
2015/10/10 沖縄 Vol.3
2014/10/22 京都 #1
Korea
3ヶ国 19都道府県
65回開催！※2015/11/19現在
2014/11/21 北九州 Vol.1
2014/12/3
@chiba みずいろ会館※女性限定
2015/1/30 新潟 Vol.1
2015/7/4 新潟 Vol.2
2014/12/15 八王子 Vol.1
2015/2/19 八王子 Vol.2
kintone Café
創始者です！
2015/1/24 仙台 Vol.1
2015/3/7 仙台 Vol.2
2015/4/4 仙台 Vol.3
2014/12/11 荻窪 Vol.1
2015/1/26 荻窪 Vol.2
2014/7/23 東京 Vol.1
2015/2/20 東京 Vol.2
2015/7/24 東京 Vol.3
2015/9/4 東京 Vol.4
2015/2/13 出雲 Vol.1
2015/3/4 大阪 Vol.1
2015/5/19 大阪 Vol.2
2015/7/15 大阪 Vol.3
2015/9/18 大阪 Vol.4
2015/11/20 大阪 Vol.5
2015/6/17 名古屋 Vol.1
2015/11/13 名古屋 Vol.2
2015/6/25大分 Vol.1
2015/12/5大分 Vol.2
2015/9/29 鹿児島 Vol.1
2015/11/26 鹿児島 Vol.2
札幌支部・運営事務局
斎藤 栄
USA
2015/10/6
Grand Canyon Vol.1
2015/11/28 熊本 Vol.1

6. kintoneCafé？
現在17支部で
活動しています

7. kintone？？
kintone？？

8. kintone？？
kintoneって？
サイボウズ株式会社が提供する
業務改革クラウドサービス

9. kintone？？
何ができるの？
専門知識なしに業務用
アプリが作れます

10. kintone？？
時間は？
簡易なものなら3分です
「俺コーヒー入れてくるからその間に作っておいてねｗ？」
なんて言われても・・・
できちゃいます
出典：kintone公式サイト

11. kintone？？
プログラム経験ないよ？
ノンプログラムで作れます
・業務で利用しているExcelから
・サイボウズのアプリストアから
・マウスのドラッグ＆ドロップから

12. kintone？？
画面をちょっと変えたい？
カスタマイズ対応可能です
・REST APIを利用した連携
・JavaScript/CSSでカスタマイズ
・プラグインを利用したカスタマイズ

13. kintone？？
ワークフロー・・・無理？
標準機能で備わってます
・交通費申請などに
・日報管理などに

14. kintone？？
イメージがちょっとつかめない？
ハンズオンで実際に体験してみましょう！！

15. 今日の目標
参加者の皆様が
後でハンズオン資料を見直すだけで
・Excelからkintoneのアプリを作成できる
・サンプルのJavaScriptの設定方法を体験できる

16. ハンズオン開始
それではハンズオン開始です

17. アプリの追加
案件管理_Cafe新潟Vol3.csvをダウンロード

18. アプリの追加
まずはここを選択

19. アプリの追加
今回は、Excel/CSVから作成

20. アプリの追加
参照をクリック
ダウンロードしておいた「案件管理_Cafe新潟Vol3.csv 」を選択

21. アプリの追加
「アプリ名を変更」をクリック
好きな名前に変更

22. アプリの追加
「アプリ名を変更」をクリック
好きな名前に変更

23. アプリの追加
アプリ名が変更される

24. アプリの追加
CSVのデータもとに自動でフィールドが設定される

25. アプリの追加
フィールドタイプを変更

26. アプリの追加
作成をクリック

27. アプリの追加
作成されたアプリをクリック

28. アプリの追加
アプリにCSVデータは保存済み

29. アプリの追加
一番左のアイコンをクリック

30. アプリの追加
詳細画面が表示される

31. アプリの追加
一番右のアイコンをクリック

32. アプリの追加
フォームの編集をクリック

33. アプリの追加
フィールドをドラッグで移動

34. アプリの追加
保存をクリック

35. アプリの追加
設定完了をクリック

36. アプリの追加
一番左のアイコンをクリック

37. アプリの追加
ドラッグしたフィールドが反映

38. アプリの追加
新規・編集・複製することも可能

39. アプリの追加
まずはここを選択

40. アプリの追加
今回は、テンプレートから作成

41. アプリの追加
アプリを作成するをクリック

42. アプリの追加
作成されたアプリをクリック

43. アプリの追加
データが何もないことを確認

44. アプリの追加
＋(レコードを追加する)をクリック

45. アプリの追加

46. アプリの追加
キャンセルをクリック

47. アプリの追加
URLの番号を保持
ポータルをクリック

48. アプリをJavaScriptで
カスタマイズしてみよう
JavaScriptの追加

49. と、その前にちょっと下準備
JavaScriptの追加

50. JavaScriptの追加
jsファイルをダウンロード
URLをコピー

51. JavaScriptの追加
先ほど保持したURLの番号に変更

52. JavaScriptの追加
CSVから作成した案件管理アプリをクリック

53. 一番右のアイコンをクリック
JavaScriptの追加

54. フォームの編集をクリック
JavaScriptの追加

55. JavaScriptの追加
会社名の歯車をクリック
設定をクリック

56. JavaScriptの追加
保存をクリック
フィールドコードをフィールド名と同じにする

57. JavaScriptの追加
保存をクリック
すべての項目のフィールドコードをフィールド
名と同じにする

58. JavaScriptの追加
JavaScript / CSSでカスタマイズをクリック

59. JavaScriptの追加
URL指定で追加をクリック

60. JavaScriptの追加
ポータルでコピーしたURLを張り付けて保存をクリック

61. JavaScriptの追加
アップロードして追加をクリック
ポータルでダウンロードしたjsファイルを指定

62. JavaScriptの追加
保存をクリック

63. JavaScriptの追加
保存をクリック

64. カスタマイズの結果を
見てみましょう！
JavaScriptの追加

65. 一番左のアイコンをクリック
JavaScriptの追加

66. JavaScriptの追加
受注確定ボタンが表示される

67. JavaScriptの追加
受注確定ボタンをクリック

68. JavaScriptの追加
登録完了のメッセージが表示

69. JavaScriptの追加
レコードが追加

70. JavaScriptの追加
一番左のアイコンをクリック

71. JavaScriptの追加
情報が登録されている

72. ハンズオンは以上となります
おしまい

73. ちょっとカスタマイズ例を
カスタマイズ

74. kintoneでシフト管理が
できちゃうんです
カスタマイズ

75. kintone標準のカレンダー
カスタマイズ

76. 標準機能では若干苦手
・日付をまたいだ表現が苦手
・時間単位表現も苦手
カスタマイズ

77. カスタマイズカレンダー
カスタマイズ

78. 時間表現もできちゃう
カスタマイズ

79. アプリ作りを楽しみ
カスタマイズを楽しみ
kintoneを楽しみましょう！
カスタマイズ