kintoneを初めて1ヶ月で学んだこと

はじめに

kintone Advent Calendar 2019 3日目です
1ヶ月前まで右も左も分からないkintone初心者でしたが
自分なりに1ヶ月kintoneを触ってみて学んだことなどを書いてみようと思います。
「Advent Calendarだから技術的なことかな」と思ったそこのあなた、
ごめんなさい！アウトプット記事です！

kintoneのカスタマイズは無限大

「何をそんな分かりきったことを書くんだ？」と思われれた方も多くいらっしゃるかもしれませんが、
kintoneについて知った週にCybozu Days 2019に参加する機会があり、
いろんな方のセッションを聞くことができました。
働き方を変えたい人、いつもの業務を簡単にすることによって時間を有効活用したい人など様々な人が
各々でkintoneをカスタマイズし、コミュニケーションを取っている姿を見て
「カスタマイズにこそkintoneの醍醐味があるのではないか」と強く感じました。
kintoneを少ししか触ったことがない人でもCybozu Daysに参加してみると
たくさん刺激を受けられるので今後も参加していきたいな〜と思います。
ちなみに今週末(12/5-12/6)にも大阪でCybozu Daysが開催されるのでお近くの人はぜひ。

東京会場では自治体と連携して住民票をLINEで請求でき、LINEPayで支払いができる事例や
近い未来、オフィスレスをするためにkintoneをどう活用していくかについてなどを
聞くことができました。

カスタマイズをする上で知っておくと便利だったこと

「よーし、kintoneカスタマイズしよう！」と意気込み、kintoneを触っていくなかで
知っておくと便利だったことについて書いていこうと思います。

0 | 環境/使用するツール

• OS : Windows10 (MacOSの場合はCatalina)
• コマンドラインツールまたはターミナル
• VSCode

1 | ドキュメント

cybozu develop network (通称 : devnet)

CybozuはたくさんのドキュメントだったりAPIを公開しているので迷ったときに確認しにいくところ。
基本的なドキュメントもあれば、APIを使用してどんなことができるか教えてくれる記事が
たくさんあげられています。
コメント欄まで読むとkintoneをカスタマイズしている人たちがどんなところに戸惑っているか、
その解決方法は何なのか、まで知ることができたりします。
(初心者からするとちょっとむずかしいところがあるのでQiitaなどでいろんな人の記事を読み漁ったりもします！)

2 | customize-uploaderを使えるようにしておく

devnetの記事を読んでいて個人的に開発をするにあたって必要だな、と思ったツール。
開発環境の準備は第一関門だと考えていて、ここさえ突破できれば開発が楽になるのにな〜と
新しいことをするたびに思います。
kintoneカスタマイズを勉強している中で毎回のようにブラウザ上で
jsファイルを削除してアップロードし直す、という作業が「簡単でいい！」と思っていても
いつかは「面倒だな」という感情に変わります…。
そこまで到達したら
customize-uploaderでカスタマイズ用のJS/CSSファイルをコマンドラインからアップロードしよう！
という記事を参考にセットアップをしましょう。
(本来はいつか来る面倒という感情になる前にセットアップしておけばよかった)

ここでは実際にわたしがdevnetの記事を読みながら導入したときのことについて
アウトプットしてみようと思います。

私の場合は
・プロキシの設定をしたい
・ファイルの監視もしてほしい
という状況でした。

2-1 | まずはcustomize-uploaderをインストール

コマンドラインツールもしくはターミナルで以下のコマンドを叩きます。
npmが入っていないときはインストール。

$ npm install -g @kintone/customize-uploader

実行結果

C:\Program Files (x86)\Nodist\bin\kintone-customize-uploader -> C:\Program Files (x86)\Nodist\bin\node_modules\@kintone\customize-uploader\bin\cli.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\@kintone\customize-uploader\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @kintone/customize-uploader@2.0.6
updated 4 packages in 9.542s

インストールできたらしい。

2-2 | customize-uploaderを使うための準備をする

(1) マニフェストファイルを作成する

customize-uploaderを使うためにはマニフェストファイルというJSON形式のファイルを
作成する必要があるらしい。
とりあえずVSCodeでファイルを作成。

customize-manifest.json

{
    "app": "12345",  // アプリIDを入力
    "scope": "ALL",　//カスタマイズの適用範囲(ALLの他にADMIN, NONEがある)
    "desktop": { // PC用のカスタマイズファイルを記述
        "js": [
            "https://js.cybozu.com/sweetalert2/v9.4.0/sweetalert2.min.js",
            "sample.js"
        ],
        "css": [
            "sample.css"
        ]
    },
    "mobile": { // モバイル版のカスタマイズファイルを記述
        "js": [
        ],
        "css": [
        ]
    }
}

ポイント
・Cybozu CDNなどを使っている場合は、自分で書いたjsファイルよりも上にライブラリのURLを記述しておく。
・モバイル版のカスタマイズをしない場合やCSSファイルを用意しない場合は、
　ファイル名やURLを記述する必要はなし。
・このJSONファイルはアプリごとに作成し、ファイルの中身をアプリごとに書き換えていく。(2019/12/4追記)

(2)作成したマニフェストファイルをアップロードしたいjsファイルやcssファイルと同じディレクトリにおく

ちゃんとした場所においてあげないと仕事をしてくれないので間違いのないように。

(3) customize-uploaderを使ってみる

devnetの記事の中では3つのアップロード方法が紹介されてますが、
今回は対話形式でアップロードしてみました。

まずは、上記(2)でマニフェストファイルやアップロードしたいjsファイルなどがあるディレクトリまで移動。

# 私は「source」という名前の場所に配置
$ cd source
# 作成したマニフェストファイル名を入れてコマンド実行
$ kintone-customize-uploader customize-manifest.json

# ドメイン名などを聞かれるので入力する
? kintoneのドメインを入力してください (example.cybozu.com): XXXXX.cybozu.com
? ログイン名を入力してください: XXXXX
? パスワードを入力してください: [hidden]

# 実行結果
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
エラーが発生しました。リトライします
カスタマイズのアップロードを開始します
JavaScript/CSS ファイルのアップロードに失敗しました
RequestError: Error: tunneling socket could not be established, cause=getaddrinfo ENOTFOUND 8080 8080:80
.
.
.

なんか怒られた。プロキシの設定が必要らしい。
devnetの記事を下へたどっていくとプロキシのことについて書いていたので
コマンドを変えてもう一度実行してみる。

# 以下のようにプロキシとポート番号を記述してコマンド実行
$ kintone-customize-uploader --proxy http://XXX.XXX.XX.X:8080 customize-manifest.json

# ドメイン名などを聞かれるので入力する
? kintoneのドメインを入力してください (example.cybozu.com): XXXXX.cybozu.com
? ログイン名を入力してください: XXXXX
? パスワードを入力してください: [hidden]

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

アップロードできた！
実際にブラウザの方からkintoneのアプリ設定のページを見てみてると
アップロードしたファイル名などがきちんと反映されています。

(4) ファイル監視機能を使ってみる

簡単にアップロードすることはできたけど「アップロードするたびにコマンドを叩くのは面倒だなあ」
となるのでcustomize-uploaaderのオプション機能を使ってみます。

--watch

これを先ほどのコマンドに追加するとカスタマイズしているファイルを保存すると同時に
アップロードをしてくれる。

# 以下のようにプロキシとポート番号を記述してコマンド実行
$ kintone-customize-uploader --watch --proxy http://XXX.XXX.XX.X:8080 customize-manifest.json

# ドメイン名などを聞かれるので入力する
? kintoneのドメインを入力してください (example.cybozu.com): XXXXX.cybozu.com
? ログイン名を入力してください: XXXXX
? パスワードを入力してください: [hidden]

# 実行結果
カスタマイズのアップロードを開始します
task8.js をアップロードしました!
task8.css をアップロードしました!
JavaScript/CSS ファイルをアップロードしました!
JavaScript/CSS カスタマイズの設定を変更しました!
運用環境への反映の完了を待っています...
運用環境への反映の完了を待っています...
運用環境に反映しました!
ファイルを監視しています…

ちゃんと監視してくれている！
このあともjsファイルを保存するたびにアップロードしてくれるのでとても便利です。
プロキシの設定とファイル監視のコマンドを前後逆に入力してコマンド実行をしたときは
エラーが返ってきたので上記の順番でコマンド実行したほうが良さそうです。

おわりに

kintoneを触り始めてたったの1ヶ月ですが少しずつできることが増えていっていると感じています。
この記事ですでに書いたようにdevnetでは基本的なことから応用の仕方まで
いろんなことを知ることができるので今後もkintoneのカスタマイズを行っていくなかで
やってみたことや学んだことなどをどんどんアウトプットしていきたいと思います！