Embed Size (px)
Citation preview
【初級】kintone アプリを JavaScript でいじってみよう
Cybozu,Inc. Kitagawa Kyohei
ハッシュタグ： #devsumiFセッション ID:18-F-1
自己紹介自己紹介北川 恭平（きたがわ きょうへい）
• Cybozu 新卒 4 年目
• kintone developer プロデューサー
• cybozu.com developer network 管理人
• kintone 技術者系イベント企画
• developer サイトのコンテンツ制作
趣味
• カレー• 野球• トレーニング
Work
本日のアジェンダ
▌kintone の基本（講義）
▌kintone API による拡張性（講義）
▌kintone アプリを作ってみよう
▌kintone アプリをサンプル JavaScript でいじってみよう
▌サンプル JavaScript を改造してみよう
▌まとめ
kintone の基本
みなさん kintone を知っていますか？
kintone とは？
▌チームで使う業務システムをファストに開発できるクラウドサービスです。
= チームワークプラットフォーム
データベース ワークフロー（プロセス管理）
コミュニケーション
kintone アプリ？
▌チームで使う業務システムをアプリケーション単位で作成します。
交通費申請
日報
契約書管理クレーム管理
顧客管理
どうやってアプリを作るのか？
ドラッグ＆ドロップでアプリ作成
アプリストアからアプリ作成
エクセルからアプリ作成
アプリの画面
一覧ビュー
詳細ビュー
登録画面
プロセス管理（ワークフロー）
未処理
処理中
完了
コミュニケーション
データの活用
kintone API による拡張性
kintone の拡張性
▌kintone には大きく分けて 2 種類の API を用意しています
REST API
データ連携 画面のカスタマイズ
JavaScript
REST API
▌レコードの取得・追加・更新・削除
▌スペースの作成・更新
▌デプロイ（アプリ作成・設定変更）
REST API 活用例
JavaScript API
▌イベントハンドラ（一覧、表示、追加、編集、削除）
▌画面上の値を取得・設定
▌REST API の実行
▌外部 API の実行
JavaScript API 活用例
カスタマイズビュー
▌一覧の画面を HTML5 で記述できるビュー
カスタマイズビュー活用例
ドキュメント
▌cybozu.com developer network
https://cybozudev.zendesk.com/hc/ja
活用法まとめました
▌kintone hive online
http://kintone-blog.cybozu.co.jp/developer/000173.html
kintone アプリを作ってみよう
kintone でアプリ作成
▌主に 3 種類の方法で、すぐにアプリを作成できます。
①Excel ファイル
をそのままアプリ化
② アプリストアから選ぶ
③ はじめからつくる
今回は Excel から作成
https:// サブドメイン .cybozu.com/ログイン画面にアクセス
クリックして kintone にアクセス
メンテナンス等のお知らせユーザー情報の管理や cybozu.com 全体に影響する設定
ログイン完了
新デザイン設定
本ハンズオンは新デザイン前提ですすめます
kintone システム管理 > 新旧デザインの切り替えよりご変更ください
34
ポータル
通知
クリックしてアプリを作成
アカウントやシステムの設定
アプリの作成方法を選ぶ
Excel ファイルを読み込む
▌顧客リスト for デブサミ .xlsx を読み込みます
フィールドタイプを変更します
▌以下のように変更しますフィールド名 変更前 変更後
会社名 ドロップダウン 文字列 (1 行 )部署名 ドロップダウン 文字列 (1 行 )担当者名 ドロップダウン 文字列 (1 行 )郵便番号 ( 数値のみ ) 数値 数値
住所 文字列 (1 行 ) 文字列 (1 行 )TEL( 数値のみ ) 数値 数値
FAX( 数値のみ ) 数値 数値
メールアドレス リンク ( メールアドレス ) リンク ( メールアドレス )緯度 数値 数値
経度 数値 数値
備考 備考 文字列 (複数行 )確度 ラジオボタン ラジオボタン
アプリを作成します
アプリを確認します
見た目を直します
ドラッグ＆ドロップで見やすいレイアウトを目指します
Before After
データの登録
データの削除
kintone アプリをサンプル JavaScriptでいじってみよう
https://cybozudev.zendesk.com/hc/ja/articles/202341964
今回適用するサンプル
準備
▌アプリの設定 > フォーム より 以下のように変更を加えます。
フィールド名 変更後フィールドコード
住所 Address緯度 lat経度 lng
< 変更>
< 追加>追加するフィールド 要素 ID
スペース Map
https://cybozudev.zendesk.com/hc/ja/articles/202341964
developer network よりサンプルをコピー＆ペースト
文字コード「 UTF-8」、ファイル名「 sample.js」としてファイルを保存します。
JavaScript ファイルの保存
アプリの管理画面「詳細設定」より作成したファイルを読み込ませます
カスタマイズ適用
レコード一覧画面と詳細画面で地図が表示されていたら成功です
カスタマイズ適用確認
サンプル JavaScript を改造してみよう
ゴール：確度の条件によって色を変える
準備
▌アプリの設定 > フォーム より 以下のように変更を加えます。
フィールド名 変更後フィールドコード
確度 kakudo
< 変更>
Sample.js の変更★修正点 1レコード一覧の編集イベント時になにも処理しないように変更します。
263 行目のイベントから app.record.index.edit.submit を消去します。
ココを削除
カンマも削除
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'; } }}
カスタマイズ適用編集が完了したら再度 JavaScript ファイルをアップロードします。
動作確認
“ 確度”の色がそれぞれ変わると成功です
One more thing
条件書式プラグインを試してみよう
▌sample.js をとりはずします
▌下記より条件書式プラグインをダウンロードして適用します
https://cybozudev.zendesk.com/hc/ja/articles/203501084
まとめ
kintone まとめ
▌GUI でアプリケーションを作れるプラットフォーム
▌業務アプリケーションを Excel から作れたり、ドラッグ＆ドロップで作れる
▌kintone JavaScript カスタマイズ 表示を変えることができる
他サービスと連携ができる
楽しい
cybozu.com developer network
https://cybozudev.zendesk.com/hc/ja
★アカウント登録特典★• 5 ユーザー、 1 年間無償の kintone 開発者ライセンス
を申し込むことができます。• コミュニティに投稿やコメントしたり、 Tips に質問
できます。• API のアップデート情報の通知を受け取ることができ
ます。
kintone devCamp
http://kintonedevcamp.connpass.com/
kintone devCamp とは？kintone devCamp とは kintone界隈の developer同士で会場に出向き、 kintone に触れあい、共に学んでいく Cybozu 主催の developer向け勉強会です。 kintone カスタマイズ初心者～上級者の方向けにdeveloper network内のコンテンツを中心としたテーマで開催していきます。
次回は 3/2(水 )サイボウズ東京オフィスに
て！
kintone devCamp Vol.9 @Tokyo
2016/3/2(水 ) 15:00-サイボウズ東京オフィス27F
Thank You
