kintone Café 新潟 Vol.3　ハンズオン（アプリ作成編）

kintone って聞いたことあるぞ！？ならアプリを作成してみよう！ハンズオン ( アプリ作成編 )

( 株 ) アイティー・プラス・ワンkintone エバンジェリスト星野智久2016 年 2 月 6 日

kintone Café 新潟 Vol.3

自己紹介

去年は、プライベートで枝豆の収穫イベントに参加したら、なぜかkintone を導入してもらえることになりました。

株式会社アイティー・プラス・ワン星野　智久（愛称は・・・のんびん、ブルー）31 歳新潟県長岡市 ( 旧川口町 ) 出身サイボウズ公認 kintone エバンジェリストkintoneCafé 新潟支部長もしています

kintoneCafé ？？

kintoneCafé ？？

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

kintoneCafé ？

5

2013/12/7 札幌 Vol.1 （起源）2014/5/16 札幌 Vol.22014/10/25 札幌 Vol.32015/3/14 札幌 Vol.42015/6/4 札幌 Vol.52015/10/17 札幌 Vol.62015/11/30 札幌 Vol.7

2014/5/29 福岡 Vol.12014/7/11 福岡 Vol.22014/10/24 福岡 Vol.32015/4/17 福岡 Vol.42015/6/24 福岡 Vol.52015/8/29 福岡 Vol.62015/10/24 福岡 Vol.72015/12/19 福岡 Vol.8

2014/5/30 土佐2015/5/30 高知 Vol.2

2014/7/5 弘前 #1

2015/1/29 京橋 Vol.12015/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 松山 #12015/9/26 愛媛 Vol.12016/1 愛媛 Vol.2

2014/9/25 神戸 Vol.12015/5/25 神戸 Vol.2

2014/9/28 Okinawa #12015/2/11 沖縄 Vol.22015/10/10 沖縄 Vol.3

2014/10/22 京都 #1

Korea

3 ヶ国　 19 都道府県

65 回開催！※ 2015/11/19 現在

2014/11/21 北九州 Vol.12014/12/3@chiba みずいろ会館※女性限定

2015/1/30 新潟 Vol.12015/7/4 新潟 Vol.2

2014/12/15 八王子 Vol.12015/2/19 八王子 Vol.2

kintone Café創始者です！

2015/1/24 仙台 Vol.12015/3/7 仙台 Vol.22015/4/4 仙台 Vol.3

2014/12/11 荻窪 Vol.12015/1/26 荻窪 Vol.2

2014/7/23 東京 Vol.12015/2/20 東京 Vol.22015/7/24 東京 Vol.32015/9/4 東京 Vol.4

2015/2/13 出雲 Vol.1

2015/3/4 大阪 Vol.12015/5/19 大阪 Vol.22015/7/15 大阪 Vol.32015/9/18 大阪 Vol.42015/11/20 大阪 Vol.5

2015/6/17 名古屋 Vol.12015/11/13 名古屋 Vol.2

2015/6/25 大分 Vol.12015/12/5 大分 Vol.2

2015/9/29 鹿児島 Vol.12015/11/26 鹿児島 Vol.2

札幌支部・運営事務局斎藤栄

USA2015/10/6Grand Canyon Vol.1

2015/11/28 熊本 Vol.1

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

kintone ？？

kintone ？？

kintone ？？kintone って？

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

kintone ？？何ができるの？

専門知識なしに業務用アプリが作れます

kintone ？？時間は？簡易なものなら 3 分です「俺コーヒー入れてくるからその間に作っておいてねｗ？」なんて言われても・・・

できちゃいます出典： kintone 公式サイト

kintone ？？プログラム経験ないよ？ノンプログラムで作れます

・業務で利用している Excel から・サイボウズのアプリストアから・マウスのドラッグ＆ドロップから

kintone ？？画面をちょっと変えたい？カスタマイズ対応可能です

・ REST API を利用した連携・ JavaScript/CSS でカスタマイズ・プラグインを利用したカスタマイズ

kintone ？？ワークフロー・・・無理？

標準機能で備わってます・交通費申請などに・日報管理などに

kintone ？？

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

今日の目標参加者の皆様が後でハンズオン資料を見直すだけで

・ Excel から kintone のアプリを作成できる・サンプルの JavaScript の設定方法を体験できる

ハンズオン開始

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

アプリの追加

案件管理 _Cafe 新潟 Vol3.csv をダウンロード

アプリの追加

まずはここを選択

アプリの追加

今回は、 Excel/CSV から作成

アプリの追加

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

アプリの追加

「アプリ名を変更」をクリック好きな名前に変更

アプリの追加

「アプリ名を変更」をクリック好きな名前に変更

アプリの追加

アプリ名が変更される

アプリの追加

CSV のデータもとに自動でフィールドが設定される

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

アプリの追加

作成をクリック

アプリの追加

作成されたアプリをクリック

アプリの追加

アプリに CSV データは保存済み

アプリの追加

一番左のアイコンをクリック

アプリの追加

詳細画面が表示される

アプリの追加

一番右のアイコンをクリック

アプリの追加

フォームの編集をクリック

アプリの追加

フィールドをドラッグで移動

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

アプリの追加

設定完了をクリック

アプリの追加


アプリの追加

ドラッグしたフィールドが反映

アプリの追加

新規・編集・複製することも可能

アプリの追加

まずはここを選択

アプリの追加

今回は、テンプレートから作成

アプリの追加

アプリを作成するをクリック

アプリの追加

作成されたアプリをクリック

アプリの追加

データが何もないことを確認

アプリの追加

＋ ( レコードを追加する ) をクリック

アプリの追加

アプリの追加

キャンセルをクリック

アプリの追加URL の番号を保持

ポータルをクリック

アプリを JavaScript でカスタマイズしてみよう

JavaScript の追加

と、その前にちょっと下準備



js ファイルをダウンロード

URL をコピー


先ほど保持した URL の番号に変更


CSV から作成した案件管理アプリをクリック

一番右のアイコンをクリック


フォームの編集をクリック


JavaScript の追加会社名の歯車をクリック

設定をクリック


保存をクリック

フィールドコードをフィールド名と同じにする

JavaScript の追加保存をクリック

すべての項目のフィールドコードをフィールド名と同じにする


JavaScript / CSS でカスタマイズをクリック


URL 指定で追加をクリック


ポータルでコピーした URL を張り付けて保存をクリック


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

JavaScript の追加保存をクリック


保存をクリック

カスタマイズの結果を見てみましょう！




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


受注確定ボタンをクリック

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


レコードが追加




情報が登録されている

ハンズオンは以上となります

おしまい

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

カスタマイズ

kintone でシフト管理ができちゃうんです

カスタマイズ

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

標準機能では若干苦手・日付をまたいだ表現が苦手・時間単位表現も苦手

カスタマイズ

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

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

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

カスタマイズ

kintone Café 新潟 Vol.3 ハンズオン（アプリ作成編）

Software

kintone Café 新潟 Vol.3　ハンズオン（アプリ作成編）