はじめようJavaScript第11回 kintone JavaScriptカスタマイズをする

kintone JavaScriptカスタマイズで必要なもの

ここからはkintone JavaScriptカスタマイズを挑戦するために必要なものを見てみましょう。

• kintoneを閲覧するためのブラウザ
  • 普段お使いのブラウザで問題ありませんが、当シリーズではChromeで統一します。
• kintoneのアカウント
  • ぜひ無料の開発者ライセンスをご利用ください。
    開発者ライセンスの申請手順：
    ①事前に cybozu developer network のメンバー登録が必要です。
    　画面右上の「ログイン」ボタンよりご登録ください。
    （メンバー登録がお済みの方は直接②のリンクからお申し込みください）
    ②こちらのページから開発者ライセンスをお申し込みください。
• JavaScriptを書くためのエディタ
  • 当シリーズではkintone上でJavaScriptを編集できるプラグイン「JSEdit」を利用します。（詳細は後述）
  • そのほか、Sublime Text や Atom, 秀丸エディタ を使っても問題ありません。ただし、その場合は編集の際kintoneにJavaScriptファイルをアップロードする必要があります。

kintone JavaScriptカスタマイズをする方法

JavaScriptカスタマイズをするための方法を2つ紹介します。初学者の方はまずは1番のやり方で大丈夫です。

1. JSEdit for kintoneを使う
   JavaScriptをkintone上で編集でき、kintoneへのJavaScriptファイルのアップロードも自動で行ってくれる優れものです。
   また、当シリーズではJSEditを利用します。使い方とプラグインインストール方法は下記の記事を参考にしてください。
   kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう
2. 一般的なテキストエディタでJavaScriptファイルを編集し、kintoneにアップロードする
   お好みのテキストエディタを使う場合は、手動でkintoneにJavaScriptファイルをアップロードする必要があります。下記を参考にしてください。
   第1回 kintone javascript APIのイジりかた

サンプルコードを試す

サンプルコードを作成してkintone上で動作することを確認しましょう。
※JSEditの詳細については先述の kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう を確認ください。

1. 新しいアプリを作成する。（※フィールドは設置なしで大丈夫です。）
   
2. [設定] → [プラグイン] → [プラグインの追加] → JSEdit for kintone を追加する。
   
3. 新規作成ボタンとクリックし、ファイル名を入力する。
   
4. コードを書き、保存する。 (※初期値に表示されるコードは消していただいても大丈夫です。)
   
5. レコード一覧画面に戻り、動作を確認する。
   右クリックメニューから「検証」でDeveloper toolsを開きコンソールの表示を確認する。
   

無事に動作しましたでしょうか。わからないことがあれば当記事の下部にあるフォームからご質問ください。
次回はkintoneのデータをJavaScriptカスタマイズで扱う方法について学びます。