Zenn
📦

第5回 kintone カスタマイズをプラグイン化する

に公開
JavaScript
plugin
kintone
カスタマイズ
一人情シス
idea

kintone カスタマイズをプラグイン化する

〜再利用性・共有性を高める実装〜

はじめに

前回までで、保守性と応用性を高めたJavaScriptカスタマイズが完成しました！
今回は、そのカスタマイズをプラグイン化して、より使いやすく共有しやすい形にします。

目標：カスタマイズをプラグイン化して、チーム全体で活用できる仕組みを作る

これまでのカスタマイズは、JSEdit for kintoneプラグイン内にJavaScriptコードを書く形でした。
今回は、独自のプラグインを作成することで、より柔軟で管理しやすい仕組みを構築します！

これまでの成果：

  • 詳細画面・編集画面・新規作成画面で「アプリの説明」を非表示
  • UI変更に強いコード（複数セレクタ対応）
  • 他の要素への応用可能な汎用関数
  • エラーハンドリングとパフォーマンス考慮

プラグイン化のメリット

現在の方法（JSEdit for kintone）の課題

メリット：

  • 簡単にJavaScriptを実行できる
  • 設定が手軽
  • 即座に動作確認可能

課題：

  • コードがプラグイン内に埋め込まれる
  • バージョン管理が困難
  • 複数アプリでの設定が手間
  • 設定画面での制御が限定的

独自プラグイン化のメリット

1. 設定画面での制御

2. 複数アプリへの展開

  • プラグインをアップロードするだけで適用
  • アプリごとの設定が可能
  • 一括管理が容易

3. バージョン管理

  • Gitでのコード管理
  • 変更履歴の追跡
  • チームでの共有

プラグインの基本構造

ファイル構成

app-description-hider-plugin/
├── manifest.json          # プラグインの設定ファイル
├── config.html            # 設定画面
├── config.js              # 設定管理
├── desktop.js             # メイン処理
└── icon.png               # プラグインアイコン

manifest.jsonの基本構造

{
  "manifest_version": 1,
  "version": "1.0.0",
  "type": "APP",
  "name": {
    "en": "App Description Hider",
    "ja": "アプリの説明非表示プラグイン"
  },
  "description": {
    "en": "Hide app description on detail/edit/create screens",
    "ja": "詳細・編集・新規作成画面でアプリの説明を非表示にします"
  },
  "icon": "icon.png",
  "desktop": {
    "js": [
      "config.js",
      "desktop.js"
    ],
    "css": []
  },
  "config": {
    "html": "config.html",
    "js": [
      "config.js"
    ],
    "css": []
  }
}

実装：メイン処理ファイル

desktop.js

これまでのコードを基に、プラグイン用のメイン処理を作成します。

主な機能：

  • 設定の取得と検証
  • 汎用的な要素非表示関数
  • アプリの説明非表示処理
  • イベント登録と初期化

特徴：

  • 設定に基づく条件分岐
  • エラーハンドリング
  • ログ出力による動作確認
  • 複数画面への対応

config.js

設定管理を担当します。

主な機能：

  • デフォルト設定の定義
  • 設定の取得と保存
  • 設定画面用の関数提供

特徴：

  • デフォルト値とのマージ機能
  • グローバル名前空間での関数公開
  • 設定の一元管理

実装：設定画面

config.html

プラグインの設定画面を作成します。

主な機能：

  • プラグインの有効/無効切り替え
  • 対象画面の選択（詳細・編集・新規作成）
  • 遅延時間の設定
  • デバッグモードの切り替え

特徴：

  • 直感的なUI設計
  • ヘルプテキストによる説明
  • バリデーション機能
  • 設定の自動保存

プラグインのパッケージ化

ZIPファイルの作成手順

1. ファイルの準備

app-description-hider-plugin/
├── manifest.json
├── config.html
├── config.js
├── desktop.js
└── icon.png

2. ZIPファイルの作成

  • 上記のファイルとフォルダを選択
  • 右クリック → 「圧縮」または「ZIPに圧縮」
  • ファイル名：app-description-hider-plugin.zip

3. アップロード手順

  1. kintoneの管理画面にアクセス
  2. 「プラグイン」→「プラグインの追加」
  3. 作成したZIPファイルをアップロード
  4. プラグインの設定を確認
  5. 対象アプリに適用

複数アプリへの展開方法

1. プラグインの一括適用

手順：

  1. プラグインをアップロード
  2. 対象アプリを複数選択
  3. 一括でプラグインを適用
  4. 各アプリで個別設定を調整

2. アプリごとの設定管理

各アプリで個別の設定が可能です。例えば：

  • アプリA：詳細画面のみ非表示
  • アプリB：全画面で非表示
  • アプリC：遅延時間を長めに設定

3. 設定のエクスポート/インポート

設定画面に機能を追加することで、設定の共有やバックアップが可能になります。

トラブルシューティング

よくある問題と解決方法

1. プラグインが動作しない

  • デバッグモードを有効にして確認
  • 設定の確認
  • 権限の確認

2. 設定が保存されない

  • ブラウザのキャッシュをクリア
  • 設定画面で必須項目を確認
  • 権限の確認

3. 他のプラグインと競合

  • プラグインの優先度を調整
  • manifest.jsonで読み込み順序を制御

ログ出力の活用

デバッグモードを有効にすることで、コンソールに詳細なログが出力され、問題の特定が容易になります。

実装時の注意点

1. セキュリティ考慮

プラグインの権限設定：

  • 必要最小限の権限のみ付与
  • ユーザー情報へのアクセス制限
  • 外部API連携時の認証確認

2. パフォーマンス最適化

コードの最適化：

  • 不要な処理の削除
  • メモリリークの防止
  • 重い処理の非同期化

3. エラーハンドリング

例外処理の実装：

  • try-catch文の適切な配置
  • ユーザーフレンドリーなエラーメッセージ
  • ログ出力による問題の特定

プラグイン化の効果

1. 運用効率の向上

設定の一元管理：

  • 複数アプリでの設定変更が容易
  • バージョン管理による変更履歴の追跡
  • チームでの共有が簡単

2. 保守性の向上

コードの管理：

  • Gitでのバージョン管理
  • 変更の影響範囲の明確化
  • テスト環境での事前確認

3. 拡張性の確保

機能追加の容易さ：

  • モジュール化された構造
  • 設定による機能の切り替え
  • 他プラグインとの連携可能性

次回予告

🔜 第6回：「社内展開の工夫とテンプレート化」
〜チームで使える仕組みづくり〜

次回は、作成したプラグインを社内で活用するための工夫を紹介します。
テンプレート化の方法や、マニュアル作成のポイント、社内勉強会の開催アイデアなど、
チーム全体でkintoneカスタマイズを活用するための実践的な内容をお届けします！

おわりに

プラグイン化により、個人のカスタマイズがチーム全体の資産になります。
「一人情シス」から「チーム情シス」への第一歩を踏み出しましょう！

次回は、このプラグインを社内で活用するための具体的な方法を紹介します。
お楽しみに！

Discussion