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

カスタマイズ用の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オプションで指定した位置に変わるのでご注意ください。

お世話になります。

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

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

>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様

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

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

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

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

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

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

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

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

K.K様

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

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

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

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

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

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

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

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

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

K.K 様

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

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

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

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>

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

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

--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: {
・・・

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

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

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)

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

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

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

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

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

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

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

以下のkintoneシステム管理の「kintone全体のカスタマイズ」にも同じようなJS/CSSカスタマイズするUIがありますが、
本ツールを通してファイルアップロードはできますでしょうか。

具体的には以下のURLで設定する箇所になります。
https://{契約ドメイン}.cybozu.com/k/admin/system/customize/

もし可能なら、 -a のアプリIDはどのように指定するかといった、コマンド引数の設定方法をご教示いただけますでしょうか。
また、こちらの反映機能が未実装であれば、対応予定はありますでしょうか。

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

R.K 様

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

恐れ入りますが、customize-uploader は kintone 全体のカスタマイズには対応しておりません。

また、現状対応予定もございません。

開発元に要望があったことをお伝えしておきますので、引き続きどうぞよろしくお願いいたします。