kintone-cliで開発環境を構築してみる #kintone

kintone-cliとは？

kintone-cliとは、kintoneのJavaScriptカスタマイズや、プラグイン開発をより効率的に進めることができる開発者ツールです。

kintone-cli Githubリンク

kintone-cliを使用すれば、以下のようなフェーズにおいてkintone開発をサポートしてくれます。

コードを初めて作成する時
コードの初期の雛形を自動生成してくれます。
オプションでwebpackの設定や、Reactでの書き方を選択して自動生成することもできます。
実際にコーディング作業を進める時
コードの変更をwatchして、自動でkintone環境に適用することができます。
コードをビルドする時
ES6や、TypeScriptなどで書かれたファイルも、kintone-cliでビルドして変換することができます。
コードをデプロイする時
作成したコードをkintone環境にデプロイすることができます。

kintone-cliの構成

kintone-cliは、Projectを作成し、その配下にTempleteを作成する形で構成されます。

Projectは1ドメインで使用されるカスタマイズ、プラグインを管理するフォルダのイメージです。
一方でTempleteは、1つのkintoneアプリで使用されるJS,CSSファイルを管理するフォルダのイメージです。
しかし、これらも厳密に決まっている訳ではないので、コードの管理方法は利用用途や環境に合わせて考えることができます。

実際に構築(カスタマイズの場合)

では、実際にkintone-cliを使用してkintoneカスタマイズファイルをデプロイしてみます。今回は最低限の機能のみでkintone-cliを使用していきます。

その他機能に関しては、「4:その他機能紹介」で紹介しているので、そちらをご確認ください。

0: 事前準備

まずはじめに、kintone-cliのインストールを行います。

//node.jsがインストールされているかどうかの確認
$ node -v
//kintone-cliのインストール
$ npm install -g git://github.dev.cybozu.co.jp/SC/kintone-cli.git

これでkintone-cliのインストールができました！！

1: プロジェクトの作成

次に、kintone-cliを実行するためのプロジェクトを作成します。

プロジェクトを作成したいディレクトリに移動して、以下のコマンドを入力し、プロジェクトを作成します。

$ kintone-cli init //kintone-cli用のプロジェクトを新規作成

コマンドを入力すると、プロジェクトの名前、ライセンスなど、プロジェクトの情報を記載するための入力画面が出てくるので、以下を参考に、入力していきます。また、これらの情報は省略可能で、省略した場合は、()内の情報が記載されます。

Welcome to kintone-cli!
Please, input below information so we can get started!
? Project name (kintone-customization-project) kintone-cli-project //プロジェクト名
? Version (0.0.1) //プロジェクトのバージョン
? Description (kintone customization project)  //プロジェクトの説明
? Author () vencha //作成者
? License (MIT) //ライセンス情報
? Do you want to use @kintone/kintone-ui-component? (Y/n) Y //kintone-ui-componentを使用するかどうか
? Do you want to use @kintone/kintone-js-sdk? (Y/n) Y //kintone-js-sdkを使用するかどうか
Initialized empty Git repository in /Users/s001383/SC/dev-kintone/kintone-cli-project/.git/

Project created!
To create new app, use:

   kintone-cli create-template

※参考リンク

kintone-ui-componentについてはこちら / kintone-js-sdkについてはこちら

必要な情報を入力し、プロジェクトが作成されると、ディレクトリ配下にProject名のディレクトリが作成されています。

2: テンプレートの作成

次に、プロジェクト内にテンプレートを作成していきます。

まずは、テンプレートを作成するためにプロジェクトのディレクトリに移動します。

$ cd <Project name> //initしたディレクトリから、project内へ移動

そして、プロジェクト内でテンプレートを作成していきます。
今回もinitコマンドと同様に、templeteコマンドを入力後、必要な情報をいくつか入力する必要があるので、入力していきます。
オプションでReactやTypeScript,webpack,eslintの導入なども可能となっているのですが、今回は何も導入しないパターンで作成していきます。

$ kintone-cli create-template //テンプレートの作成

? What type of app you want to create ? //カスタマイズを作るか、プラグインを作るか選択
❯ Customization //今回はカスタマイズを選択する
  Plugin 
? Do you want to set authentication credentials ? (Y/n) Y //kintoneの認証情報を登録するかどうか
? What is your kintone domain ? {サブドメイン名}.cybozu.com //kintoneのドメイン情報
? What is your kintone username ? sato //kintoneで使用するユーザー名
? What is your kintone password ? [input is hidden]  //kintoneユーザーのパスワード
? Do you use proxy? N //プロキシサーバーを使用してネットワークに接続しているかどうか
? Do you want to use React ? (Y/n) n //カスタマイズでReactを使用するかどうか
? Do you want to use TypeScript ? (Y/n) n //カスタマイズでTypeScriptを使用するかどうか
? Do you want to use webpack ? (Y/n) n //webpackを使用するかどうか
? What is the app name?  hoge//templeteで使用するアプリ名(kintoneのアプリ名と同一で無くて良い)
? Do you want to use @cybozu/eslint-config for syntax checking ? (Y/n) n //eslintを使用するかどうか
? What is the app ID ? 1 //カスタマイズを使用したいkintoneアプリのID
? What is the scope of customization ? //JS/CSSカスタマイズの適用範囲
❯ ALL //今回はALLを選択
  ADMIN 
  NONE 

~~~~~~~ パッケージインストール中 ~~~~~~~

To start developing app, use:

     kintone-cli dev --app-name hoge --watch

これでテンプレートの作成が完了しました！！

3: kintoneへデプロイ

最後に、少しJSファイルを編集して、実際にkintone環境へデプロイしてみます。
まずは簡単にテンプレートフォルダ内のファイルについて確認していきます。
以下のコマンドを入力して、テンプレートフォルダ内に移動します。

$ cd <テンプレートフォルダ名> //テンプレートフォルダへ移動

テンプレートフォルダ内は以下のような構造になっています。

では、実際にkintoneカスタマイズで使用するJSファイルを編集してみます。
Templeteフォルダ配下のsource/js/内のscript.jsを確認して、編集します。

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    //logの中身を編集してみる。
    console.log('Success!!');
    return event;
  });
})();

編集後、ファイルを保存し、実際にDeployしてみます。
以下のコマンドを入力し、kintone環境にDeployしてみます！


$ kintone-cli deploy --app-name <テンプレートフォルダ名> //Deployコマンド

カスタマイズのアップロードを開始します
bar/source/css/style.css をアップロードしました!
bar/source/js/script.js をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!

このような文言が出れば成功です！kintone環境に反映されました！

実際にkintoneの反映したアプリの、レコード一覧画面を確認してみます。

このように「Success!!」の文言が確認できれば成功です！
今後さらにJavaScriptファイルを編集しても、kintone-cli deployコマンドを入力すれば、自動でkintone環境にデプロイしてくれます。

4:その他機能紹介

「3: kintoneへデプロイ」では、最低限の機能を用いて、実際にkintoneカスタマイズを本番環境に反映させることができました。
しかし、まだまだkintone-cliには便利な機能があるので、こちらでいくつか紹介していきます。

buildコマンド

buildコマンドを使用することで、ES6やreact, TypeScriptで書かれているようなファイルをブラウザが読み込んでくれるような形に変換してくれます。

//※buildコマンドをh使用するには、テンプレート作成時にwebpackを選択し、webpack.config.jsを生成する必要があります！
$ kintone-cli build --app-name <テンプレートフォルダ名>

React,TypeScriptなどを使用している際には、buildコマンドを実行する必要があります。

devコマンド

こちら現在は挙動が不安定のため、安定次第内容を記載したいと思います。

簡単にdevコマンドについて説明すると、ローカルのJSファイルなどのファイルの監視(watch)を行い、ファイルの内容が変更されて、保存された段階で自動でkintone側にもコードの内容を適用してくれる機能です。

これにより、開発時に、deployコマンドで一回一回kintone環境に反映させて確認する手間を省くことができます！

kintone-cliで開発環境を構築してみる

目次