Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

kintoneアプリをjavascriptでいじってみよう

2,771 views

Published on

Developers Summit 2016 18-F-1 資料

Published in: Technology
  • Be the first to comment

kintoneアプリをjavascriptでいじってみよう

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

×