Kintone　Cybozu CDNの利用方法

Cybozu CDNとは

Cybozu Contents Delivery Network（Cybozu CDN）は、cybozu.com サービス利用者が製品のカスタマイズに利用する JavaScript プログラム及び CSS 等のライブラリを提供しているサイトです。

　Kintoneも基本はWebアプリなので、Javascriptで機能追加やCSSで見た目のカスタマイズが可能です。Cybozu CDNに用意されている各種ライブラリのＵＲＬを活用することで、コード量の大幅な短縮が図れること、異なるブラウザでも動作の互換性が保てる点が大きなメリットです。

しかし、Cybozu CDNにある開発用ライブラリのページには詳しい使用方法の説明が少なく、初めての人はどの様に活用すればいいのか少々わかり難いです（少なくとも私はそうでした）
私がよく使用しているluxonとJQueryの事例でCybozu CDNの使い方を紹介します。

---

日付データ処理の機能拡張に不可欠な「luxon」

　Kintoneカスタマイズの要望で特に多いのが、日付関係の計算に関することです。例えば、誕生日から現在の年齢を計算したい、現在の時刻を入力したい、今月の月末日を取得したい、などです。

日付に関する処理を行うカスタマイズでは、Cybozu CDNにあるluxonというライブラリを使うことが推奨されています。

Kintoneで日付データ処理の機能拡張に不可欠な「luxon」を例に、Kintoneのアプリカスタマイズ画面でどの様に設定するのかを解説します。

ＣＤＮで利用したいライブラリのＵＲＬを調べる

Cybozu CDNのページ内を「luxon」で検索し、「CDNのURL」が記載されている場所を見つけてＵＲＬをコピーします。

luxonのURL

アプリ管理画面でluxonのCDN上のＵＲＬを指定する

Kintoneアプリ管理画面「設定」タブの「Javascript / CSSでカスタマイズ」を開いて、luxonのCDNライブラリＵＲＬを以下の様に入力して保存します。

　注意点として、CDNライブラリを使用するJavascriptコードをアップロードする場合は、ＣＤＮライブラリのＵＲＬを該当コードより前に設定しておくことです。上記の画面でURL/ファイル名の左端をマウスでつまんでドラッグすることで順番を簡単に変更できます。

---

DOM操作や外部ファイル読み込みに便利な「JQuery」

jQueryを使うことで簡易的な操作でDOMを直接操作することができる様になります。DOMとは「Document Object Model」の略でHTMLを操作するための仕様です。ドキュメントとはHTMLファイルにある<p>や<img>などを指します。DOM操作でHTML要素を取得して、値の取得・変更やスタイルの変更などが容易にできるようになります

jQueryでは、外部ファイルの読み込みにAjaxという機能が使えます。
例えば、外部APIと通信してレスポンス情報を読み込む機能を短いコードで実装できます。
以下の記事の郵便番号⇒住所変換のカスタマイズでは、jQueryのAjax機能を利用しています。

Cybozu CDNのページ内を「jQuery」で検索して「CDNのURL」が記載されている場所を見つけてＵＲＬをコピーします。

jQueryのＵＲＬ

アプリ管理画面でjQueryのCDN上のＵＲＬを指定する

Kintoneアプリ管理画面「設定」タブの「Javascript / CSSでカスタマイズ」を開いて、jQueryのCDNライブラリＵＲＬを以下の様に入力して保存します。

以下の例では、郵便番号から住所を変換するJavascriptコードの中でAjax機能を用いるので、jQueryを事前に読み込むようにしています。

---

ライブラリのバージョン管理が必要

Cybozu CDNのライブラリを利用することで、Kintoneのアプリに拡張機能を簡単に実装できるのですが、各種ライブラリは時間の経過と共にバージョンが更新されていきますので、Kintoneアプリのカスタマイズの動作が怪しくなったら、Cybozu CDNで利用しているライブラリの新バージョンのＵＲＬを調べて更新する様に注意を払う必要が有ります。

最後までお読みいただいてありがとうございました。