カテゴリー内の他の記事

customize-uploaderでカスタマイズ用のJS/CSSファイルをコマンドラインからアップロードしよう!

Index

はじめに

コマンドライン上で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 で設定すると、次のようになります。
2018-09-21_14h00_28.png

また、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コマンドについて追記

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
kuma

カスタマイズ用の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ファイルをコマンドラインからアップロードしたいのでぜひご教授ください。

Avatar
cybozu Development team

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と同じフォルダにいれていただく必要があります。
(マニフェストファイルの書き方次第で、フォルダの階層等は変更可能です)

 

画像の例については、
アップロードしたいファイルの名前や数はユーザー様によって異なると思われるので、
「記事内のマニフェストファイルの設定でツールを実行した場合、画像のようなアップロード結果となる」という一例をあげています。

 

以上、よろしくお願いいたします。

Avatar
kuma

developer network事務局 様

ご返信ありがとうございます。いただいたご返信を見ながら挑戦したところ、コマンドラインからアップロードすることができました。

とても便利で助かります。ありがとうございます。

kumaにより編集されました
Avatar
kazuya

appに複数指定して、同時にアップロードすることは可能でしょうか?

同じようなアプリで同じjsをアップロード出来たらと考えております。

Avatar
cybozu Development team

kazuya様

当ツールに一括アップロード機能はありません。

開発元に要望があったことをお伝えしておきます。

Avatar
kazuya

早速の回答ありがとうございます。

現状機能がないこと承知しました。

customize-manifest.jsonをアプリ毎に作成し、運用しようと思います。

Avatar
sharaki

素敵なツールありがとうございます。

importコマンドで取得したマニフェストファイルのjs指定が

dest/desktop/js/hoge.js
 
となっておりますが、ここの記載を
 
desktop/js/hoge.js
 
にしないとうまく動きませんでした。
ENOENT: no such file or directory, open 'dest/desktop/js/hoge.js'

お知らせいたします。

Avatar
cybozu Development team

sharaki 様

お世話になっております。developer network事務局です。

コメントありがとうございます。

importコマンドで出力されるマニフェストファイルの中に記載される各ファイルのパスですが、デフォルトでは dest/ がつくようになっております。

任意の構成にしたい場合、 --dest-dirオプションで任意のディレクトリを指定することにより、中身のディレクトリ構成にも反映されます。

オプション一覧
※この場合、出力されるマニフェストファイルの位置も--dest-dirオプションで指定した位置に変わるのでご注意ください。

Avatar
K.K

お世話になります。

以下のようにアップロードに失敗するのですが、どう対処すればよいでしょうか?

よろしくお願いいたします。

 

>kintone-customize-uploader --proxy http://xxxxxxxx:8080 customize-manifest.json
Debugger attached.
? kintoneのベースURLを入力してください (https://example.cybozu.com): https://xxxxxxxx.cybozu.com
? ログイン名を入力してください: xxxxxxx
? パスワードを入力してください: [hidden]
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
Error: getaddrinfo ENOTFOUND xxxxxxxx.cybozu.com
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:67:26)
Waiting for the debugger to disconnect...

 

K.Kにより編集されました
Avatar
cybozu Development team

K.K様

お世話になっております。developer network運営事務局です。
ご連絡が遅くなり申し訳ございません。

proxyの設定が有効になっていない不具合があり、プログラムの改修を現在対応中です。
https://github.com/kintone/js-sdk/pull/1002

改修後のパッケージを公開しましたらこちらのコメント欄でご連絡いたしますので、
今しばらくお待ちいただけますでしょうか。
ご不便をおかけしており大変申し訳ございません。

Avatar
K.K

ご回答ありがとうございます。

改修対応、どうぞよろしくお願いいたします。

差し支えなければ、いつ頃の改修完了を予定されているか、教えていただけないでしょうか?

 

また、kintone-dts-genでkintoneから型定義を引っ張る際も同じエラーにより失敗するのですが、こちらも同様に改修中なのでしょうか?

 

よろしくお願いいたします。

 

Avatar
cybozu Development team

K.K様

ご連絡ありがとうございます。
kintone-dts-genではproxyの不具合は確認されておりません。

恐れ入りますが、以下のコマンドでプロキシの設定に誤りがないかをご確認いただけないでしょうか?

curl https://サブドメイン.cybozu.com -x proxyのアドレス:port

もしプロキシのアドレスに誤りがある場合、以下のエラーが表示されます。

curl: (7) Failed to connect to xxx port xxx: Connection refused
Avatar
K.K

お世話になっております。

curlコマンドを試したところ、上記エラーは表示されず以下が表示されましたが、プロキシ設定は問題ないということでしょうか?

 

<!DOCTYPE html>
<html>
<head>
<script>location.replace("https:\/\/サブドメイン.cybozu.com\/login?redirect=・・・

 

よろしくお願いいたします。

 

Avatar
cybozu Development team

K.K 様

お世話になっております。cybozu developer network 事務局です。

ご確認いただきありがとうございます。
curl コマンドを実行した結果を拝見する限り、proxy 設定は問題なく行われているようです。
dts-gen を使用した際に同様のエラーが出ることについて別途確認いたします。

また、先日改修中となっていた customize-uploader について
改修済みとなりましたためアップデートしてご利用いただければと存じます。

 

Avatar
cybozu Development team

K.K 様

お世話になっております。cybozu developer network 事務局です。
重ねてのご連絡失礼いたします。

kintone-dts-gen について、--proxy パラメータに正しいプロキシ URL を指定した場合に型定義ファイルが生成できることを確認いたしました。

恐れ入りますが、K.K 様の環境にて以下のコマンドを実行し、ご確認いただけないでしょうか?

kintone-dts-gen --base-url https://<サブドメイン>.cybozu.com --proxy <プロキシURL> --username <ユーザのログイン名> --password <ユーザのログインパスワード> --app-id <アプリID>

 

Avatar
K.K

お世話になっております。

返答が遅くなり申し訳ございませんでした。

--proxyパラメータを指定して試したところ、「Error: getaddrinfo ENOTFOUND サブドメイン.cybozu.com」は出力されなくなりましたが、以下のエラーにより失敗しました。

▼実行コマンド
npx kintone-dts-gen --base-url https://サブドメイン.cybozu.com --proxy プロキシアドレス --
username ユーザ名 --password パスワード --app-id アプリID --type-name SampleFields --namespace sample.types -o sample-fields.ts

▼結果
Error: Request failed with status code 400
at createError (・・・\node_modules\axios\lib\core\createError.js:16:15)
at settle (・・・\node_modules\axios\lib\core\settle.js:17:12)
at IncomingMessage.handleStreamEnd (・・・\node_modules\axios\lib\adapters\http.js:260:11)
at IncomingMessage.emit (events.js:327:22)
at endReadableNT (internal/streams/readable.js:1327:12)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
config: {
・・・

よろしくお願いいたします。

 

Avatar
K.K

お世話になっております。

kintone-customize-uploader改修版のご連絡、どうもありがとうございました。

改修版で試したところ、以下のエラーによりアップロードに失敗しました。

どう対応すればよろしいでしょうか?

 

▼実行コマンド
npx kintone-customize-uploader --proxy プロキシアドレス customize-manifest.json

▼実行結果
? kintoneのベースURLを入力してください (https://example.cybozu.com): https://サブドメイン.cybozu.com
? ログイン名を入力してください: ユーザ名
? パスワードを入力してください: [hidden]
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
Error: 402: Payment Required
at KintoneResponseHandler.handleErrorResponse (・・・\node_modules\@kintone\rest-api-client\lib\KintoneResponseHandler.js:55:19)
at ・・・\node_modules\@kintone\rest-api-client\lib\KintoneResponseHandler.js:35:123
at processTicksAndRejections (internal/process/task_queues.js:93:5)

 

よろしくお願いいたします。

 

Avatar
cybozu Development team

K.K 様

お世話になっております。cybozu developer network 事務局です。
お返事に時間を要してしまい申し訳ございません。

① kintone-dts-gen のエラー

Error: Request failed with status code 400

ステータスコードが返ってきておりますので、
実際にリクエストがサーバーに届いており、その上でステータスコード 400 が返ってきていると考えられます。

そのため、サーバーからのエラーの詳細についてご確認いただければと思います。
記載してくださった結果のうち、以下の省略されている部分を
K.K 様のお手元でご確認の上、ご対応をお願いいたします。

Config: { …

 

② kintone-customize-uploader のエラー

kintone が「402 Payment Required」を返す系が存在していないため、このエラーは proxy サーバーが返しているエラーだと考えられます。
よって、リクエストが kintone に到達する前の段階で失敗している可能性があります。

K.K 様が利用されている環境依存の問題である可能性がございますので、
プロキシサーバーの設定や実行ログなどの確認を行い、ご対応をお願いいたいます。

cybozu Development teamにより編集されました
Avatar
K.K

お世話になっております。

ご確認ありがとうございます。

社内ネットワーク担当部門へ確認して、またご連絡させていただきます。

よろしくお願いいたします。

 

サインインしてコメントを残してください。