Tweet
Tweet

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と互換性 • ゼロコンフィグ