モダンな開発環境を用いたカンタン／安全なカスタマイズ開発 / kintone devCamp Boost! 2023

by tasshi

Slide 1

Slide 1 text

モダンな開発環境を用いたカンタン／安全なカスタマイズ開発サイボウズ株式会社 kintone DXチーム tasshi

Slide 2

Slide 2 text

2 tasshi (田代雅治) サイボウズ株式会社 kintone DXチーム所属 • プロダクトオーナー • エンジニア趣味 • サイクリング

Slide 3

Slide 3 text

3 kintone DXチーム kintoneエコシステムの開発者により良い Developer eXperience (DX)を提供するチーム現在は2つのOSSを主に開発・保守 • kintone/js-sdk • kintone/cli-kintone

Slide 4

Slide 4 text

4 kintone/js-sdk kintoneの拡張機能・連携サービスを開発しやすくするライブラリ・支援ツール群 • APIクライアント • プラグインテンプレート • プラグイン・カスタマイズアップローダなど

Slide 5

Slide 5 text

5 kintone/cli-kintone (v1) kintoneを操作するためのコマンドラインツールレコードのインポート/エクスポート/削除が可能 • データバックアップ（添付ファイル含む） • 他基幹システム連携など ※v0系は2023年10月末にメンテナンス終了

Slide 6

Slide 6 text

6 Cybozu Inside Out https://blog.cybozu.io/entry/2023/06/09/113000

Slide 7

Slide 7 text

7 それではセッション開始です！お待たせしました

Slide 8

Slide 8 text

8 このセッションでは npmエコシステムやサイボウズが提供している便利なツール・ライブラリをフル活用したカンタン/安全なkintoneカスタマイズ開発を体験しながら学んでいただけます！

Slide 9

Slide 9 text

9 Resume 知識編 – ツールの紹介(30min) 実践編 – カスタマイズを開発 (60min)

Slide 10

Slide 10 text

10 ツールの説明知識編

Slide 11

Slide 11 text

11 カンタン/安全なカスタマイズ開発カンタン： • 作業が自動化されている • コードの記述量が少ないなど安全： • 人為的ミスが発生しにくい • コードの品質が保たれているなど

Slide 12

Slide 12 text

12 紹介するカスタマイズ開発フローコーディングビルドテスト反映 APIを少ない記述量で操作静的解析でバグを早期発見 1つのJavaScript ファイルに変換 kintoneアプリに自動アップロード自動テスト • TypeScript • ESLint/Prettier • @kintone/rest-api-client • @kintone/dts-gen • Vite • Vitest • @kintone/customize- uploader +これらのサイクルを高速で実行できること

Slide 13

Slide 13 text

13 TypeScript JavaScriptの代替言語 (AltJS)の1つ JavaScript + 型チェック • 変数名の間違いや異なる型への代入に気付ける • エディタの補完による快適コーディング JavaScriptと文法がほぼ同じ（スーパーセット） • 学習コストや導入コストが低い

Slide 14

Slide 14 text

14 ESLint/Prettier ESLint: リンター • バグの原因になる構文などを指摘・修正 • var禁止、未使用変数禁止など Prettier: フォーマッター • インデントや改行を統一 ESLint + Prettierを併用することが多い =>自動的に開発者間で一貫した書き方ができる

Slide 15

Slide 15 text

15 @kintone/rest-api-client kintone REST APIをJavaScriptから簡単に操作するためのライブラリ • レコード一括処理のメソッド • リクエスト/レスポンスの型サポート ※Node.js/ブラウザ両方で使用可能

Slide 16

Slide 16 text

16 @kintone/dts-gen kintoneアプリからTypeScript向けの型定義ファイル(d.ts)を生成するCLIツールメリット • JS APIで取得したレコードに型を指定可能 • イベントハンドラなどをより安全に書ける ※生成した型はrest-api-clientでは使用不可

Slide 17

Slide 17 text

17 モジュールバンドラー複数のJSファイルの依存関係を解決して 1つのJSファイルに変換するツールメリット • 大規模プロジェクトを複数JSに分割して開発できる • 異なるカスタマイズ・プラグイン間の変数アクセスを最小にできる • ダウンロード時のパフォーマンスが向上する（HTTP/1.1） Browserify, Webpack, Rollup, Viteなど → 今回は設定が簡単なViteを使います！

Slide 18

Slide 18 text

18 自動テストプログラムによって実行される試験手順メリット • 繰り返し発生するテストの自動化 • 複数パターンで検証が必要なテストの効率化 • 人為的ミスを防止後述のCI/CDサービスを組み合わせることで継続的にコードの品質をチェックできる →今回はViteと相性の良いVitestを使用します！

Slide 19

Slide 19 text

19 @kintone/customize-uploader kintoneカスタマイズをアップロード/ダウンロードするCLIツールメリット • カスタマイズのデプロイを自動化 • 開発中のカスタマイズを素早く反映 • アプリのカスタマイズ設定をバックアップ

Slide 20

Slide 20 text

20 GitHub Actions GitHubが提供するCI/CDサービス CI/CD ≒自動化プロセスによってソフトウェアの検証・デプロイを継続的に行う手法コミット・プルリクエストなどをトリガーに指定した自動処理を実行可能 • 自動試験やデプロイなど

Slide 21

Slide 21 text

21 kintoneカスタマイズを作ってみましょう！実践編

Slide 22

Slide 22 text

22 テーマ：顧客管理アプリの自動更新案件管理アプリのレコード追加・更新時に顧客管理アプリの総費用フィールドを自動更新案件管理アプリ顧客管理アプリレコード追加・更新 ※総費用フィールドを追加 (数値) 総費用フィールドを更新

Slide 23

Slide 23 text

23 セットアップ以下のリポジトリの「セットアップ」を実施 https://github.com/mshrtsr/kintone-devCamp-Boost-2023

Slide 24

Slide 24 text

24 1. 必須ツールのインストール • Node.js • Visual Studio Code (VSCode) • Git (任意)

Slide 25

Slide 25 text

25 2. リポジトリのセットアップリポジトリをダウンロード • 「Code」→「Download ZIP」を選択 • ダウンロードしたZIPファイルを展開リポジトリをセットアップ cd kintone-devCamp-Boost-2023 npm install npm run setup

Slide 26

Slide 26 text

26 3. VSCodeのセットアップ 1. VSCodeでリポジトリをオープン 2. 拡張機能(Extensions)メニュー 3. “@recommended”と入力 4. プラグインをインストール

Slide 27

Slide 27 text

27 4. アプリの作成 kintoneアプリストアにアクセス ↓ 「営業支援パック」を追加 ※案件管理アプリにカスタマイズを追加します

Slide 28

Slide 28 text

28 5. 認証情報・アプリ情報の設定以下のファイルを編集 .env • KINTONE_BASE_URL: kintone環境のURL • KINTONE_USERNAME: ユーザー名 • KINTONE_PASSWORD: パスワード customize-manifest.json • app: カスタマイズを追加するアプリID

Slide 29

Slide 29 text

29 6. 動作確認カスタマイズをビルド・デプロイ npm run build npm run upload アプリのレコード一覧画面でダイアログが表示されたら成功！！

Slide 30

Slide 30 text

30 それでは開発スタートです！いつでも質問OKです！

Slide 31

Slide 31 text

31 開発手順 1. 顧客管理アプリに総費用フィールドを追加 2. 案件管理アプリにイベントハンドラを追加 3. 案件管理アプリから関連するレコードを取得 4. レコードから費用を集計 5. 顧客管理アプリの総費用フィールドを更新 ※リポジトリのREADMEのTipsも参照

Slide 32

Slide 32 text

32 型定義ファイル(.d.ts)の生成カスタマイズで操作するアプリの型定義を生成 npm run generate:dts アプリID 今回は以下の2つのアプリの型定義ファイルを使用 • 顧客管理アプリ • 案件管理アプリ ※READMEのTips 2を参照

Slide 33

Slide 33 text

33 ビルドプロセスの起動以下のコマンドを実行 npm run start ファイルの変更時にカスタマイズが自動的にビルド・アップロードされる

Slide 34

Slide 34 text

34 1. 総費用フィールドを追加顧客管理アプリに数値フィールドを追加 ※フィールドコードは「総費用」

Slide 35

Slide 35 text

35 2. イベントハンドラを追加案件管理アプリにイベントハンドラを追加 • app.record.create.submit.success • app.record.edit.submit.success ✅ イベントオブジェクトの型を指定する ※READMEのTips 1を参照

Slide 36

Slide 36 text

36 3. 関連するレコードを取得追加・更新されたレコードと顧客名が一致するレコードを取得 1. イベントからアプリID・顧客名を取得 2. REST APIで関連するレコードを取得 ✅ レコード取得にはrest-api-clientを使用する ✅ レコードには生成した型定義を反映する ※READMEのTips 2, 3を参照

Slide 37

Slide 37 text

37 4. レコードから費用を集計取得したレコードから総費用を集計（あともう少しで完成です）

Slide 38

Slide 38 text

38 5. 総費用フィールドを更新顧客管理アプリの総費用フィールドを更新 1. 顧客管理アプリの更新対象のレコードを取得 2. 集計結果を反映して更新 ✅ 更新対象のレコードにも型定義を指定 ※READMEのTips 2, 3を参照

Slide 39

Slide 39 text

39 時間の余った方は追加実装にもチャレンジしてみてください例 • レコード削除時に再集計する • インライン編集時に再集計する • 再集計実行ボタンを追加する

Slide 40

Slide 40 text

40 終わりにご参加いただきありがとうございました！今後のカスタマイズ開発の参考になれば幸いです。 js-sdk/cli-kintoneへのフィードバックは GitHubのIssueでいつでも受け付けています！ ※バグ修正・機能改善に繋がります

Slide 41

Slide 41 text

41 付録補足情報など

Slide 42

Slide 42 text

42 Vite (ヴィート) 高速動作を特徴とするビルドツールメリット • 開発時は依存モジュールをesbuildで高速に処理 • esbuildはGo製の超高速バンドラ • 設定ファイル無しでも使用可能(Zero config) • 実際には細かい挙動を調整したい場合が多い • webpackと比べて記述量はかなり少なくて済む • rollupプラグインを利用可能 ※今回はライブラリモードのためesbuildは不使用

Slide 43

Slide 43 text

43 Vitest (ヴィテスト) Vite環境のためのテスティングライブラリメリット • 実行速度が高速 • デファクトスタンダードのJestと互換性 • ゼロコンフィグ