カテゴリー内の他の記事

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

フォローする


(著者:kintone エバンジェリスト 村濱 一樹

ここまでで基本的なJavaScriptの機能は学習してきました。ここからは徐々に実際にkintoneを使っていきたいと思います。
kintoneをJavaScriptでカスタマイズできることはご存知だと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。

kintone JavaScript カスタマイズとは

kintoneは標準機能でさまざまなことができますが、標準機能だけでは実現できない以下のようなことも、JavaScriptカスタマイズをするとで実現できるようになります。

  • レコード一覧画面にボタンを設置し、合計値を出力
  •  条件によって文字や背景の色やサイズを変更
  •  計算フィールドでは実現できない複雑な計算
  •  などなど

JavaScriptが実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザ上でできることはほとんどできるようになるとのことです。
さらに、kintone APIと組み合わせることで、JavaScriptを使って任意のレコードを取得したり、更新したり削除したりということもできるようになります。

kintoneとJavaScriptカスタマイズのイメージ

___________1.png

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

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

  • kintoneを閲覧するためのブラウザ
    • 普段お使いのブラウザで問題ありませんが、当シリーズではChromeで統一します。
  • kintoneのアカウント
  • 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. 新しいアプリを作成する。(※フィールドは設置なしで大丈夫です。)
    _______.png
  2. [設定] → [プラグイン] → [プラグインの追加] → JSEdit for kintone を追加する。
    _______.png
  3. 新規作成ボタンとクリックし、ファイル名を入力する。
    step3.png
  4. コードを書き、保存する。 (※初期値に表示されるコードは消していただいても大丈夫です。)
    __________2.png
  5. レコード一覧画面に戻り、動作を確認する。
    右クリックメニューから「検証」でDeveloper toolsを開きコンソールの表示を確認する。
    _____________-_________.png

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

 

<< はじめようJavaScript第10回 JavaScriptの基本機能 関数を作る その2  | はじめようJavaScript第12回 kintone JavaScript カスタマイズでkintoneのデータを見てみる >>

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar

プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか?

Avatar
cybozu Development team

眞様

お世話になっております。cybozu developer network運営チームです。

> プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか?

既に公開済みで、コード以外の修正がない場合、フォームの保存やアプリの更新ボタンを押さなくても、大丈夫です。
コード修正後に、プラグインの設定画面の [保存] ボタンを教えていただけたら反映されます。

宜しくお願い致します。

ログインしてコメントを残してください。