#メンディと学ぶkintone Vol.8 JSカスタマイズとプラグインについて
お久しぶりです。
新シリーズとか予告しておきながら、しばらくブログを放置してプラグインを作っていたメンディです。
入院したりコロナになったりでプライベートが大変だったのはここだけの秘密にしてください。
kintoneでアプリを作っていると、プラグインとかJSカスタマイズというキーワードを目にする機会があると思います。色々と議論の種にもなる両者ですが、メンディはそのへんの議論は得意分野ではないので、書きません。
今回はもっとシンプルなお話として、JSカスタマイズとプラグインの違いと、JSカスタマイズの基礎について学んでいきたいと思います。
kintoneのJSカスタマイズとは？
サイボウズの「kintone」に、JavaScriptやHTML、CSSを利用して独自の機能や見た目のカスタマイズを施すことを「kintoneのJSカスタマイズ」と呼ぶことが多いです。kintoneは標準機能として、データの管理、レポート作成、業務フローの構築などができますが、JSカスタマイズを行うことで、より柔軟でユーザーの希望に合わせたUIの実現や、動的なデータ操作などが実現できます。
と、まあお約束のような小難しい文章になりましたが…ここで大事なのは「JavaScriptやHTML、CSSを利用して独自の機能や見た目のカスタマイズを施すこと」の部分です。
これは即ち、JavaScriptやHTML、CSSというプログラミング言語を使ってkintoneでプログラミングすることを指します。
ノーコードでアプリが作れるkintoneですが、プログラミングができれば更に複雑なことができるようになるんですね。
プラグインとは？
簡単にまとめると、上記のJSカスタマイズを簡単に再利用可能な形にまとめたものがプラグインになります。
以下の画像のようなファイルをダウンロードしたり、kintoneに導入した方もいると思います。これがプラグインファイルです。
このファイルの中身を見てみると…以下のような構成になっています。先ほど記載した、JS（JavaScript）やCSS、HTMLのファイルが入っていることがわかります。プラグインは、JSカスタマイズのファイルをもとにできているのです。
続いて、JSカスタマイズとの違いや、メリットについて見ていきましょう。
カスタマイズとプラグインの違い
- JavaScriptカスタマイズ
JavaScriptを用いて個別のアプリで機能拡張を行います。この場合、各アプリ毎にプログラムを設定する必要があります。 - プラグイン
カスタマイズを汎用化し、ZIP形式にパッケージ化したもの。これにより、他のアプリでも簡単に再利用でき、非エンジニアでもインストール・利用が可能です。
プラグイン化のメリット
- 再利用可能
一度作成したプラグインは、他のkintoneアプリに簡単に適用できます。 - 管理が容易
JavaScriptやHTML、CSSを複数のアプリで設定するとメンテナンスが大変ですが、プラグインでまとめるとアップデートが容易になります。 - 設定画面の提供
プラグインにはカスタマイズを制御する設定画面を組み込むことができるため、プログラミング知識がないユーザーでも設定可能です。
と、まあ最高に便利なプラグイン。入れない手はないですね。私たちも様々なプラグインを作成して公開していますので、ぜひご利用ください！
ただ、「これやってみた」でおなじみのメンディシリーズ。説明と宣伝だけで終わるわけにはいきません。
今回は、JSカスタマイズの基礎をやってみて、JSカスタマイズやプラグインをもう少し知った気分になっていただきたいと思います。
JSカスタマイズのための下準備
それでは、ここからはJSカスタマイズのやり方についてご説明します。興味がある方はぜひ一緒にやってみてください！
今回は、導入するだけで簡単にkintone上でプログラミングができる JSEdit for kintoneというプラグインを使います。（そんなことをできるプラグインもあります！）
アプリ作成
JSEdit for kintoneプラグインをダウンロードする前に、まずは非常にシンプルなアプリを作りましょう。
アプリの名前はなんでも大丈夫です。
文字列（１行）フィールドを1つ置き、フィールド名とフィールドコードを以下の様に設定してください。
ここまでできたら、いったん「アプリを公開」ボタンを押してアプリを作成しましょう。
アプリを作成したら、1件でいいのでレコードを登録しておきます。（文字列Aフィールドの中身は、何を入力しても大丈夫です）
JSEdit for kintone導入
[こちらのサイト]にアクセスし、画像の赤枠の部分をクリックしてJSEdit for kintoneをダウンロードしてください。
ダウンロードが終わったら、kintoneのホーム画面にある歯車の部分をクリックして、[kintoneシステム管理]を開きます。
続いて、下の方に[その他のプラグイン]をクリックします。
[読み込む]をクリック後、出てきた画面で[参照]をクリックします。
ファイルを選択する画面が出てきますので、先ほどダウンロードしたファイルを解凍せずそのまま選択します
[読み込む]をクリックし、読み込んだプラグインの一覧に[JSEdit for kintone]が表示されていればOKです！
ここまでできたら、冒頭で作ったアプリに戻り設定の歯車アイコンをクリックしましょう。
[設定]をクリック後、[プラグイン]をクリックします。
[追加する]をクリックし、プラグインの追加画面を開いたら、[JSEdit for kintone]にチェックを入れて、[追加]ボタンをクリックしましょう。
先ほどの画面に[JSEdit for kintone]が追加されるので、歯車のマークをクリックします。
なんだかそれっぽい画面が出てきましたね！これで準備は完了です！（既にちょっと疲れましたけど）
いざ！JSカスタマイズ！！
今回は初めてということで、一覧画面に「Hello! kintone」と表示させるという、とってもかんたんなプログラミングをやってみましょう。
先ほど導入した[JSEdit for kintone]で[新規作成]ボタンをクリックすると、ファイル名を入力する画面が出てきます。
お好きなファイル名を入力して、[OK]ボタンをクリックしてください。(ここではJScustomizeというファイル名にしました)
そうすると、以下のような文が自動的に出てきます。
プログラミングが始まりそうな雰囲気・・・！ですが、今回は一旦全て消してしまいます。
そして、以下の枠内の文言をコピー&ペーストしてください。（自分で入力しても構いませんが、今回はお試しなのでコピー&ペーストをお勧めします）
(() => {
'use strict';
kintone.events.on('app.record.index.show', (event) => {
// ボタンを作成
const menuText = document.createElement('text');
menuText.innerText = 'Hello! kintone';
menuText.style.fontSize = '48px';
// レコード一覧のメニューの右側の要素を取得し、ボタンを配置
const headerMenuSpace = kintone.app.getHeaderMenuSpaceElement();
headerMenuSpace.appendChild(menuText);
return event;
});
})();入力が終わったら、[保存]ボタンをクリックします。
アプリを保存後、一覧画面に移動してみましょう。
すると…
一覧画面にHello! kintoneの文字が表示されましたね！ちょっとダサい！
先ほどのJSEdit for kintone画面の7行目のシングルクォーテーション（’’）の中の文章を変えると、一覧画面に表示できる文字も変えれます。色々試してみてください。
ダサいですね。でもできました！
メンディ、自分のコードがうまく動くと、ついニヤニヤしてしまうのが癖です。
まとめ
今回は、kintoneのJSカスタマイズとプラグインについてお話しました。
今回の記事で、kintone上でのプログラミングの準備まではできました。プログラミング学習は色々な方法があるので、GoogleやChatGPTで調べてみてはいかがでしょうか。
１人でも多くのkintoneカスタマイズ仲間、プラグイン開発仲間が増えるとうれしいです！
この記事を書いた人
関口メンディ
関口だからメンディなのか、メンディだから関口なのかわからなくなっている人。kintoneのJavaScriptカスタマイズ、kintoneプラグイン開発に勤しんでいます。ラーメンを食べるときは麺から派。
X：@KouGuan55896