kintone プラグイン開発環境メモ

kintone プラグインの開発を VSCode に変更したので環境設定等をメモしておきます。 
create-plugin との連携、Git・Azure DevOps で開発・ソース管理などが容易になりました。

# プラグイン開発環境の切替え

もとは Sublime Text3 + パッケージングツールで開発していました。
Azure Function 開発をきっかけに VSCode を使ってみて、その便利さからプラグイン開発も VSCode に移行することにしました。
Azure DevOps は、容量無制限プライベート Git リポジトリが無料なので使ってみました。

# プラグイン開発の操作例

VSCode 上で、ソース管理・ソース修正・パッケージ・アップロードまで行えます。

<img width="1128" alt="2019-01-26_16h51_00.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/72f1b2ec-2213-f8f8-2d8e-18cb488a9dca.png">


# 開発環境

- OS： Windows 10
- エディター： [VSCode](https://code.visualstudio.com/)
- ソース管理： [Git for windows](https://gitforwindows.org/), [Azure DevOps](https://azure.microsoft.com/ja-jp/services/devops/)
- プラグイン開発：[create-plugin](https://developer.cybozu.io/hc/ja/articles/360001296186-webpack-plugin-kintone-plugin%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%83%B3%E3%82%B0%E3%81%97%E3%82%88%E3%81%86-)、powershell


# VSCode

最初のリリース時（2015年）に少しいじってみましたが、その時点ではまだ移行するほどメリットがありませんでした。
2018年に久しぶりに使ってみたところ、基本機能や拡張機能が便利に使いやすくなっていました。

- インストール：[VSCode](https://code.visualstudio.com/)

- 拡張機能
    - [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)：日本語化
    - [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)：kintone アプリcsvデータの確認・変更が便利
    - [Excel Viewer](https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer)：同じく kintone アプリcsvデータの確認が便利
    - その他 Azure 関連

## VSCode 編集表示例

ターミナルで powershell を開いて create-plugin を実行しておくと、ソース修正時に自動的にパッケージ・kintone 環境へアップロードまでしてくれます。

- エクスプローラー：Git 管理していると、フォルダ・ファイルの追加・変更が表示される
- アウトライン：関数・変数が一覧で表示され、クリックすると定義位置にジャンプ
- ターミナル：powershell で、プラグインパッケージ・アップロードなどを実行



<img width="1128" alt="2019-01-26_14h04_33.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/2f9f57fa-c9fd-bb87-9f4d-76a6949d4468.png">


## VSCode ソース管理

ソース管理を選択すると、git の状況やソースの diff を表示できます。
エディタ上で、差分を確認できると作業効率がいいですね。

git のコマンドも GUI で実行できますが、まだ使い方がよくわかっていないので、powershell で git コマンドを実行したりしています。
powershell で git コマンドを実行しても VSCode 上に即反映されます。

<img width="1128" alt="2019-01-26_15h01_48.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/61da4b48-566c-3173-c845-7404c41546ab.png">

# powershell 環境

ターミナルで powershell を開くとカレントディレクトリのフルパスが表示されコマンドが入力しにくいので、カレントディレクトリとgit状態のみ表示するように変更します。


```Microsoft.PowerShell_profile.ps1
# プロンプトの表示をカレントディレクトリだけにする
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

カレントディレクトリだけだと、すっきりします。

<img width="839" alt="2019-01-26_15h16_42.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/c6845d17-f983-0598-2978-278090ecba56.png">


## kintone 環境へのログイン情報

create-plugin で、プラグインを kintone 開発環境へアップロードする際のログイン情報を設定しておきます。

```.sh
# 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

[Azure DevOps 本家サイト](https://azure.microsoft.com/ja-jp/services/devops/)

5 ユーザーまで無料ということで、個人で使う場合は基本機能が無料です。
とりあえず使うのは、[Azure Repos](https://azure.microsoft.com/ja-jp/services/devops/repos/) の容量無制限プライベート Git リポジトリです。


## Azure DevOps 上の Git リポジトリ

Organization, project の構成で、プラングイン毎に project を割り当てます。

<img width="1128" alt="2019-01-26_15h46_05.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/a5c51dd5-dd27-35f2-f300-cf350956ab4f.png">


## ディレクトリ構成

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 を使ってみた](https://qiita.com/rex0220/items/ec21b526442951bf70d9)

## package.json

prod と trial のパッケージ用に変更しています。

```package.json
{
  "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"
  }
}
```


## プラグインのパッケージ＆アップロード

- 製品版プラグインのパッケージ＆アップロード

```.log
>npm start
```

- 試用版プラグインのパッケージ＆アップロード

```.log
>npm run start-trial
```

- 試用版プラグインのパッケージのみ

```.log
>npm run build-trial
```

- 試用版プラグインのアップロードのみ

```.log
>npm run upload-trial
```



# あとがき

まだまだ VSCode, git, Azure DevOps を使いこなせていませんので、いろいろ試していきたいと思います。