kintone プラグインの開発を VSCode に変更したので環境設定等をメモしておきます。
create-plugin との連携、Git・Azure DevOps で開発・ソース管理などが容易になりました。
プラグイン開発環境の切替え
もとは Sublime Text3 + パッケージングツールで開発していました。
Azure Function 開発をきっかけに VSCode を使ってみて、その便利さからプラグイン開発も VSCode に移行することにしました。
Azure DevOps は、容量無制限プライベート Git リポジトリが無料なので使ってみました。
プラグイン開発の操作例
VSCode 上で、ソース管理・ソース修正・パッケージ・アップロードまで行えます。
開発環境
- OS： Windows 10
- エディター： VSCode
- ソース管理： Git for windows, Azure DevOps
- プラグイン開発：create-plugin、powershell
VSCode
最初のリリース時（2015年）に少しいじってみましたが、その時点ではまだ移行するほどメリットがありませんでした。
2018年に久しぶりに使ってみたところ、基本機能や拡張機能が便利に使いやすくなっていました。
-
インストール：VSCode
-
拡張機能
- Japanese Language Pack for Visual Studio Code：日本語化
- Rainbow CSV：kintone アプリcsvデータの確認・変更が便利
- Excel Viewer：同じく kintone アプリcsvデータの確認が便利
- その他 Azure 関連
VSCode 編集表示例
ターミナルで powershell を開いて create-plugin を実行しておくと、ソース修正時に自動的にパッケージ・kintone 環境へアップロードまでしてくれます。
- エクスプローラー：Git 管理していると、フォルダ・ファイルの追加・変更が表示される
- アウトライン：関数・変数が一覧で表示され、クリックすると定義位置にジャンプ
- ターミナル：powershell で、プラグインパッケージ・アップロードなどを実行
VSCode ソース管理
ソース管理を選択すると、git の状況やソースの diff を表示できます。
エディタ上で、差分を確認できると作業効率がいいですね。
git のコマンドも GUI で実行できますが、まだ使い方がよくわかっていないので、powershell で git コマンドを実行したりしています。
powershell で git コマンドを実行しても VSCode 上に即反映されます。
powershell 環境
ターミナルで powershell を開くとカレントディレクトリのフルパスが表示されコマンドが入力しにくいので、カレントディレクトリとgit状態のみ表示するように変更します。
# プロンプトの表示をカレントディレクトリだけにする
function prompt {
$origLastExitCode = $LASTEXITCODE
Write-Host (Split-Path (Get-Location) -Leaf) -nonewline
Write-Host " " -nonewline
Write-VcsStatus -nonewline
$LASTEXITCODE = $origLastExitCode
"$('> ')"
}
Import-Module posh-git
$global:GitPromptSettings.BeforeText = '['
$global:GitPromptSettings.AfterText = '] '
powershell.log
カレントディレクトリだけだと、すっきりします。
kintone 環境へのログイン情報
create-plugin で、プラグインを kintone 開発環境へアップロードする際のログイン情報を設定しておきます。
# Windows(PowerShell)の場合
# 環境変数へ永続的にkintoneの情報を設定する
$ [System.Environment]::SetEnvironmentVariable("KINTONE_DOMAIN", "<サブドメイン>.cybozu.com", "User")
$ [System.Environment]::SetEnvironmentVariable("KINTONE_USERNAME", "<ログイン名>", "User")
$ [System.Environment]::SetEnvironmentVariable("KINTONE_PASSWORD", "<パスワード>", "User")
Azure DevOps
5 ユーザーまで無料ということで、個人で使う場合は基本機能が無料です。
とりあえず使うのは、Azure Repos の容量無制限プライベート Git リポジトリです。
Azure DevOps 上の Git リポジトリ
Organization, project の構成で、プラングイン毎に project を割り当てます。
ディレクトリ構成
create-plugin を使いますので、それに合わせたディレクトリ構成にします。
製品版プラグインと試用版プラグインのディレクトリを分けて管理することにしました。
prod：製品版プラグイン
trial：試用版プラグイン
sample
├── package.json
├── private.ppk
└── prod
│ ├── css
│ ├── html
│ ├── image
│ ├── js
│ └── manifest.json
├── scripts
│ └── npm-start.js
└── trial
├── css
├── html
├── image
├── js
└── manifest.json
create-pluguin
新しい kintone プラグインの開発ツール。アップロードまでコマンドで出来るのが楽。
基本的な設定は、下記の通り。
kintone create-plugin を使ってみた
package.json
prod と trial のパッケージ用に変更しています。
{
"name": "lookup-copy-to",
"version": "0.1.0",
"scripts": {
"start": "node scripts/npm-start.js",
"trial": "node scripts/npm-start-trial.js",
"upload-prod": "kintone-plugin-uploader dist/lookup-copy-to-plugin4.zip --watch --waiting-dialog-ms 3000",
"upload-trial": "kintone-plugin-uploader dist/lookup-copy-to-plugin4-try20221231.zip --watch --waiting-dialog-ms 3000",
"develop-prod": "npm run build-prod -- --watch",
"develop-trial": "npm run build-trial -- --watch",
"build-prod": "kintone-plugin-packer --ppk private.ppk --out dist/lookup-copy-to-plugin4.zip prod",
"build-trial": "kintone-plugin-packer --ppk private.ppk --out dist/lookup-copy-to-plugin4-try20221231.zip trial",
"lint": "eslint prod"
},
"devDependencies": {
"@kintone/plugin-packer": "^1.0.1",
"@kintone/plugin-uploader": "^2.2.0",
"npm-run-all": "^4.1.3",
"eslint": "^4.19.1",
"eslint-config-kintone": "^1.3.0"
}
}
プラグインのパッケージ＆アップロード
- 製品版プラグインのパッケージ＆アップロード
>npm start
- 試用版プラグインのパッケージ＆アップロード
>npm run start-trial
- 試用版プラグインのパッケージのみ
>npm run build-trial
- 試用版プラグインのアップロードのみ
>npm run upload-trial
あとがき
まだまだ VSCode, git, Azure DevOps を使いこなせていませんので、いろいろ試していきたいと思います。