はじめに
コマンドライン上でkintoneのカスタマイズ用JavaScript/CSSファイルをアップロードするツールを公開しました！
こちらのツールを利用することで、JS/CSSファイルの修正によるアップロードのやり直し が必要なくなります！
customize-uploaderとは
カスタマイズ用のJavaScript/CSSファイルをkintone上へアップロードすることができるCLIツールです。
npmに対応しているため、Windows/macOS/Linuxどの環境でも簡単に実行することができます。
ソースコードはGitHubに公開しています。
※ こちらのツールの利用に必要な Node.js のバージョンは、リポジトリの package.json にある enginesプロパティをご参照ください。
例：次の記載の場合、Node.js のバージョンは 10 以上が必要です。
"engines": {
"node": ">=10"
},
インストール方法
customize-uploaderをインストールします。
※ ここでは、npmによるグローバルインストールを例にあげます。
こちらのコマンドを実行することで、customize-uploaderをインストールすることができます。
マニフェストファイルの作成
customize-uploader を実行するためには、適用先のアプリ情報やアップロードするファイル情報を記述した
マニフェストファイルを作成し、アップロードしたいファイルと同じ階層に配置する必要があります。
マニフェストファイルの中身には以下の項目を記述します。
- app : 適用するアプリID
- scope: カスタマイズの適用範囲 ("ALL" || "ADMIN" || "NONE")
- desktop: PC用のJavaScriptファイル、CSSファイル ("js": [] || "css": [])
- mobile: スマートフォン用のJavaScriptファイル、CSSファイル ("js": [] || "css": [])
Cybozu CDNを利用する場合はそのURLを記述してください。
マニフェストファイルをコマンドで作成する
initコマンドを使用してマニフェストファイルを作成します。 下記のようにマニフェストファイルのフォーマットのJSONファイルが作成されます。 作成されたマニフェストファイルの中にアップロードしたいファイル名を以下の customize-manifest.json のように記述します。
・customize-manifest.json (例)
上記の customize-manifest.json で設定すると、次のようになります。
また、PC用のJavaScriptファイルのみの場合は、下記のように記述します。
すでに作成したアプリのカスタマイズの情報をマニフェストファイルに反映させる
importコマンドを使用し、すでに作成したアプリからJavaScriptファイルやCSSファイルを取り込み、マニフェストファイルを設定します。
※マニフェストファイルを作成してからの作業です。前述のinitコマンドなどでマニフェストファイルを作成しておきましょう。
下記のように他のアプリで使用しているJavaScriptファイルやCSSファイルをダウンロードでき、マニフェストファイルの中身の書き換えも行うことができます。
基本の使い方
作成したカスタマイズ用のJavaScriptファイル、CSSファイルをkintoneへアップロードします。
こちらのツールは、実行時にkintone環境の情報を指定する必要があります。
環境情報を入力する方法は、以下の3種類用意されています。
※ 適用するアプリの管理者権限を持ったユーザー で実行する必要があります。
1. 直接指定する方法
マニフェストファイルの他に、オプションでドメイン情報、ログイン名、パスワードを入力します。
2. 対話形式で指定する方法
マニフェストファイルのみ指定することで、対話形式でドメイン情報、ログイン名、パスワードを入力することができます。
3. 環境変数で指定する方法
環境変数にあらかじめkintoneのドメイン等を設定することで、環境変数を利用することができます。
コマンド実行時にパスワード等が画面に表示されるのを避けたい場面などで便利です。
オプション機能
ドメイン情報やログイン情報以外にもオプション機能が搭載されています。
ファイル監視
--watch を用いると、ファイルの更新を監視して都度kintone上へアップロードすることができます。
JS/CSSファイルの修正によるアップロードのやり直しが必要なくなるので便利です！
※ 監視を中止する場合は、「ctrl + c」でコマンドをキャンセルしてください。
ゲストスペース
--guest-space-id を用いると、ゲストスペース内にあるアプリに対して実行することができます。
言語設定
--lang を用いると、コマンドライン上の表示言語を日本語か英語で指定することができます。
プロキシ設定
プロキシサーバーを利用している場合は、--proxy でプロキシ情報を入力することができます。
おわりに
このcustomize-uploaderを利用すれば、kintoneを操作することなくコマンドラインのみでカスタマイズ用ファイルのアップロードができます。
watchオプションを利用すれば、Dropboxなどのファイル管理ツールを利用することなく、プログラムの修正が即時反映されて大変便利です！
ぜひご活用ください！
注意事項
ソースコードの変更および再配布、商用利用等はライセンスに従ってご利用可能です。
変更履歴
- 2019/07/01
- スマートフォン用 CSS に対応
- Node.js の動作バージョンを 6 以上から 8 以上 に変更
- 2019/12/13
- initコマンドについて追記
- importコマンドについて追記
カスタマイズ用のJS/CSSファイルをコマンドラインからアップロードしたくて本ページを
開いてみました。が…知識不足のせいか、読んでも全然わかりませんでした。申し訳ないのですが、わからない点を列挙するのでご教授いただけますと幸いです。
➀”ソースコードはGitHubに公開しています。”
わからない点：GitHubを開いてどれをDLすればいいのでしょう？DLしてどれを実行すればいいのでしょう。
②※ こちらのツールを利用するには、Nodeのバージョンが6以上である必要があります
わからない点：node.jsをインストールするということでしょうか？
③customize-uploaderをインストールします。
※ ここでは、npmによるグローバルインストールを例にあげます。
$ npm install -g @kintone/customize-uploader
こちらのコマンドを実行することで、customize-uploaderをインストールすることができます。
わからない点：どのツールを開いてどこで実行すればいいのですか？コマンドプロンプトでしょうか。
④マニフェストファイルの作成
customize-uploader を実行するためには、適用先のアプリ情報やアップロードするファイル情報を記述した
マニフェストファイルを作成する必要があります。
マニフェストファイルはアップロードしたいファイルと同じ階層に配置してください。
わからない点：この記述によるとインストールより前にこの作業をしなくてはならないということなので、インストール方法より前の章に書いてほしいです。そしてこの情報はどの状態で打ち込めばいいのでしょう。コマンドプロンプトでcli-kintone.exeを記述した後に半角スペースを入れて打ち込めばよいのでしょうか？それともメモ帳を開いて、入力し、ファイル名をcustomize-manifest.json として、アップロードしたいjsやcssと一緒のフォルダの中に入れておけばいいのでしょうか。そして「上記の customize-manifest.json で設定すると、下記のようになります。」と記述がありますが、この作成したjsonファイルをどうすると下記のようになるのでしょうか。記載がなくてわかりませんでした。
私が知識不足なだけかもしれなくて本当に申し訳ないのですが、前提となる条件や使用するツールについて記述がないので、読んでも全くわかりませんでした。
恐れ入りますが、カスタマイズ用のJS/CSSファイルをコマンドラインからアップロードしたいのでぜひご教授ください。
kuma 様
お世話になっております。developer network事務局です。
記事がわかりにくく申し訳ありません。
こちらのツールは前提の知識がいくつか必要になるため、わかりにくくなってしまっていたかもしれません。
以下、列挙していただいた内容に対して、コメントとなります。
①
GitHubには「ツール自体」のコード情報があります。
ツールを使用する分には、GitHubから何かダウンロード等をする必要はありません。
②
おっしゃる通り、こちらのツールを利用するためには、お使いのPCにNode.jsをインストールして
npmというコマンドを利用できるようにする必要があります。
(npmコマンドでツールをインストールしています。)
Node.jsの詳しいインストール方法はこちらの記事をご確認ください。
https://developer.cybozu.io/hc/ja/articles/360000098886#step5
③
Node.jsをインストールしてnpmコマンドが使用できるPCのコマンドラインツールで実行します。
Windowsの場合は、コマンドプロンプトかPowerShell等をお使いください。
Macの場合は、ターミナル等をお使いください。
④
こちらのツールは 「インストール」 と 「実行」 が分かれており、それぞれ別のコマンドで行う必要があります。
ツールを「実行」する際には、あらかじめマニフェストファイル(設定ファイル)を作成しておく必要がありますが、
「インストール」前に作成する必要はありません。
本記事では、
『ツールをインストール → 設定ファイルを作成 → ツールを実行』
という流れで説明しております。
また、マニフェストファイル (customize-manifest.json)の作成については、
記載いただいている通り、メモ帳等のテキストエディタで記事内の例を参考にcustomize-manifest.jsonを作成いただく必要があります。
作成したマニフェストファイルはお好きなファイル名でも大丈夫ですが、記事内では「customize-manifest.json」として保存しております。
(ツールを実行する際に、その作成したマニフェストファイルを指定しています。)
そして作成したマニフェストファイルをアップロードしたいJS/CSSと同じフォルダにいれていただく必要があります。
(マニフェストファイルの書き方次第で、フォルダの階層等は変更可能です)
画像の例については、
アップロードしたいファイルの名前や数はユーザー様によって異なると思われるので、
「記事内のマニフェストファイルの設定でツールを実行した場合、画像のようなアップロード結果となる」という一例をあげています。
以上、よろしくお願いいたします。
developer network事務局 様
ご返信ありがとうございます。いただいたご返信を見ながら挑戦したところ、コマンドラインからアップロードすることができました。
とても便利で助かります。ありがとうございます。
appに複数指定して、同時にアップロードすることは可能でしょうか？
同じようなアプリで同じjsをアップロード出来たらと考えております。
kazuya様
当ツールに一括アップロード機能はありません。
開発元に要望があったことをお伝えしておきます。
早速の回答ありがとうございます。
現状機能がないこと承知しました。
customize-manifest.jsonをアプリ毎に作成し、運用しようと思います。
素敵なツールありがとうございます。
importコマンドで取得したマニフェストファイルのjs指定が
お知らせいたします。
sharaki 様
お世話になっております。developer network事務局です。
コメントありがとうございます。
importコマンドで出力されるマニフェストファイルの中に記載される各ファイルのパスですが、デフォルトでは dest/ がつくようになっております。
任意の構成にしたい場合、 --dest-dirオプションで任意のディレクトリを指定することにより、中身のディレクトリ構成にも反映されます。
オプション一覧
※この場合、出力されるマニフェストファイルの位置も--dest-dirオプションで指定した位置に変わるのでご注意ください。