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

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

$ 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

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

$ 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

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

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

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

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

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