This post is Private. Only a writer or those who know its URL can access this post.

Article information
Show article in Markdown
Report article
Help us understand the problem. What is going on with this article?

kintone Best Practice ~その3 カスタマイズを適用する~

3.カスタマイズをkintoneに適用する

この章では、kintoneアプリのカスタマイズ開発の実行環境例や、kintone-cliを使ったカスタマイズ適用方法について説明します。
またJavaScriptファイルのビルド方法についても説明します。

目次

  • カスタマイズ開発の実行環境例
  • 開発したプログラムの適用方法
  • JavaScript、CSSのビルド

3-1.カスタマイズ開発の実行環境例

kintoneのアプリを開発する場合に、カスタマイズの実行環境構築のパターンとしては、
「開発時と運用時のドメインを分ける」パターンと「開発時と運用時のドメインを分けない」パターンがあります。
kintoneアプリのカスタマイズのためにいわゆるサンドボックスのような機能が提供されていないため、
ドメインを分けたり、アプリをコピーしたりといった方法によって、カスタマイズの実行環境を設定します。

・開発時と運用時のドメインを分ける

開発時と運用時のドメインを分ける場合、開発ドメインで事前にアプリ構築とカスタマイズ開発を行い、
完成した後に運用ドメインにアプリとカスタマイズを適用します。

  • メリット
    運用環境と開発環境を分けれるので、お客様の運用に影響を与える可能性が低い。

  • デメリット
    開発ドメインのアプリやカスタマイズを運用ドメインへ移行するコストがかかる。
    権限の設定など標準の機能で移行できない項目がある

・開発時と運用時のドメインを分けない

開発時と運用時のドメインを分けない場合、カスタマイズするアプリを直接カスタマイズを行うのではなく、
カスタマイズするアプリを再利用してコピーして、そのアプリに対してカスタマイズを行います。

  • メリット
    開発ドメインのアプリやカスタマイズを運用ドメインへ移行するコストがかからない。

  • デメリット
    開発時と運用時でドメインを分けれないので、お客様の運用に影響を与える可能性が高い。

お客様のポリシーに応じた環境をご用意してください。

3-2.開発したプログラムの適用方法

kintoneアプリへのカスタマイズファイルを適用する方法としては、
システム管理画面から手動でカスタマイズファイルを適用する方法や
DropboxにカスタマイズファイルをアップロードしてURLを参照する方法がありました。
いずれも画面上で設定したり、他サービスを用意したりと手間がかかるものでした。
現在はCybozuよりCustomize Uploaderというコマンドラインツールが提供されておりますが、
今回紹介するkintone-cliはこのCustomize Uploaderを利用したより高度なアップロード機能が搭載されています。

・config.jsonの設定

一章で紹介したkintone-cli create-templateを実行するとテンプレート内にconfig.jsonが自動で生成されます。
このconfig.json内でkintone-cliがkintoneにアップロードするファイルの設定が行なえます。
設定例は以下の通りです。

{
    "appID": 0, // アップロード対象のアプリIDを指定
    "appName": "sampleApp",
    "type": "Customization",
    "scope": "ALL", // カスタマイズの適用範囲を指定
    "uploadConfig": {
        "desktop": {
            "js": [
                "sampleApp/source/js/script.js" // アップロード対象のJSファイルを相対パスで指定(PC向け)
            ],
            "css": [
                "sampleApp/source/css/style.css" // アップロード対象のcssファイルを相対パスで指定(PC向け)
            ]
        },
        "mobile": {
            "js": [], // アップロード対象のJSファイルを相対パスで指定(モバイル向け)
            "css": [] // アップロード対象のcssファイルを相対パスで指定(モバイル向け)
        }
    }
}

・kintone-cliのdevコマンド

kintone-cliのdevコマンドを実行すると、ローカルWebサーバーを使用して、create-templateコマンドで
作成したプロジェクトフォルダから直接JavaScriptやCSSファイルを参照します。
これによって、カスタマイズファイルを手動でkintoneアプリにアップロードする作業が不要になります。

kintone-cli dev [--app-name <App Name>] 

・kintone-cliのdeployコマンド

kintone-cliのdeployコマンドは、devコマンドと違い、カスタマイズファイルそのものを
kintoneアプリにアップロードします。

kintone-cli deploy [--app-name <App Name>]

devコマンドは、ローカルWebサーバーをフォルダを参照するため、
コード修正ごとに再アップロードの必要がなく開発時のこまめなデバックなどに非常に有効です。
一方deployコマンドは、Customize Uploaderと同様にカスタマイズファイルの実体をkintone上にアップロードするため、
カスタマイズ完了時にチームメンバにレビューを依頼したり、本番運用環境へ適用する際などに有効です。

3-3.JavaScript、CSSのビルド

さらにkintone-cliではJavaScriptやCSSをバンドルするbuildコマンドがあります。

kintone-cli build [--app-name <App Name>]

またdeployコマンド実行時に、カスタマイズフォルダにwebpack.config.jsが含まれている場合、
kintone-cliはwebpack.config.jsファイルを使用してwebpack buildを実行します。

kintone-cli deploy [--app-name <App Name>]

webpackそのものの説明は次の記事を参照してください。

webpack入門 ~Babel,Polyfillを使って快適ES6ライフ~
https://developer.cybozu.io/hc/ja/articles/360022880491

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした