（著者：kintone エバンジェリスト 村濱 一樹）
ここまでで基本的なJavaScriptの機能は学習してきました。ここからは徐々に実際にkintoneを使っていきたいと思います。
kintoneをJavaScriptでカスタマイズできることはご存知だと思いますが、実際にどんなことができるか、おさらいしながらサンプルコードを動かすところまでやりましょう。
kintone JavaScript カスタマイズとは
kintoneは標準機能でさまざまなことができますが、標準機能だけでは実現できない以下のようなことも、JavaScriptカスタマイズをするとで実現できるようになります。
- レコード一覧画面にボタンを設置し、合計値を出力
- 条件によって文字や背景の色やサイズを変更
- 計算フィールドでは実現できない複雑な計算
- などなど
JavaScriptが実行できるようになるということは、ボタンを設置したりそれを押したときの振る舞いを決めたり、データの計算処理をしたりなど、ブラウザ上でできることはほとんどできるようになるとのことです。
さらに、kintone APIと組み合わせることで、JavaScriptを使って任意のレコードを取得したり、更新したり削除したりということもできるようになります。
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番のやり方で大丈夫です。
- JSEdit for kintoneを使う
JavaScriptをkintone上で編集でき、kintoneへのJavaScriptファイルのアップロードも自動で行ってくれる優れものです。
また、当シリーズではJSEditを利用します。使い方とプラグインインストール方法は下記の記事を参考にしてください。
kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう - 一般的なテキストエディタでJavaScriptファイルを編集し、kintoneにアップロードする
お好みのテキストエディタを使う場合は、手動でkintoneにJavaScriptファイルをアップロードする必要があります。下記を参考にしてください。
第1回 kintone javascript APIのイジりかた
サンプルコードを試す
サンプルコードを作成してkintone上で動作することを確認しましょう。
※JSEditの詳細については先述の kintone上でカスタムJSやCSSを編集できるプラグイン「JSEdit for kintone」を使ってみよう を確認ください。
- 新しいアプリを作成する。（※フィールドは設置なしで大丈夫です。）
- [設定] → [プラグイン] → [プラグインの追加] → JSEdit for kintone を追加する。
- 新規作成ボタンとクリックし、ファイル名を入力する。
- コードを書き、保存する。 (※初期値に表示されるコードは消していただいても大丈夫です。)
- レコード一覧画面に戻り、動作を確認する。
右クリックメニューから「検証」でDeveloper toolsを開きコンソールの表示を確認する。
無事に動作しましたでしょうか。わからないことがあれば当記事の下部にあるフォームからご質問ください。
次回はkintoneのデータをJavaScriptカスタマイズで扱う方法について学びます。
<< はじめようJavaScript第10回 JavaScriptの基本機能 関数を作る その2 | はじめようJavaScript第12回 kintone JavaScript カスタマイズでkintoneのデータを見てみる >>
プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか？
眞様
お世話になっております。cybozu developer network運営チームです。
> プラグインの設定画面でコードを書いて保存すれば、アプリの設定画面で「フォームを保存」「アプリの公開」ボタンを押さないでも良いのですか？
既に公開済みで、コード以外の修正がない場合、フォームの保存やアプリの更新ボタンを押さなくても、大丈夫です。
コード修正後に、プラグインの設定画面の [保存] ボタンを教えていただけたら反映されます。
宜しくお願い致します。
JSEdit for kintoneで新規作成したファイル（.js)を消す方法はあるのでしょうか？
THUNDER 様
お世話になっております。cybozu developer network運営チームです。
プラグインの「JSEdit for kintone」の設定画面上からは、ファイルを削除する方法はございません。
ファイルを削除する場合は、
アプリの設定画面の「JavaScript / CSSでカスタマイズ」から対象のファイルを削除するようお願いします。
お世話になります。
開発者ライセンスを取得したのですが、サンプルコードを実行する環境はどちらにあるのでしょうか？
合志真衣様
お世話になっております。
開発者ライセンスをお申込みいただいた際、環境情報をお知らせするメールをお送りしておりますのでご確認いただけますでしょうか。
メールが届いていないということでしたら、再度お送りいたしますのでお知らせください。
よろしくお願いいたします。
このチュートリアルを読みながら、「開発者アカウント」を作り、メンバー登録してサインインしました。
JSEdit for kintone もダウンロードしました。
「サンプルコードを試す」１．アプリを作成する
までに到達するには、どのような手順が必要なのでしょう？
「30日無料お試し」でキントーンアカウントを別に作成するのですか？
齋藤 博 様
お世話になっております。cybozu developer network運営チームです。
すでに開発者アカウントをお申込頂いたようなので、そのまま開発者アカウントをご利用いただけます。
「アプリ作成する」に到達するまでの手順として、まずはkintone環境にログインしていただく必要があります。
開発者ライセンスをお申込みいただいた際に、下記件名のお知らせするメールをお送りしておりますので、
そちらに書かれた環境情報でログインをしていただき、こちらの手順に沿ってアプリを作成していただけますでしょうか。
件名：【重要】開発者ライセンスがご利用いただけます
お手数をおかけしてしまい大変恐縮ですが、ご確認のほどよろしくお願いいたします。
画面通りにJSEdit for kintoneを使用し、サンプルコードとして、’これはサンプルコードです’と入力するのですが
「サンプルコード」という文字が妙な反応をしているのか、一度「サンプル」という文字を打った後、どの文字を入力しても自動で「サンプル」が入力されてしまいます。
（例：「これはサンプルコード」と入力して確定。次に「で」を入力しようとdキーを押すと、勝手に「これはサンプルコード」が追加で入力されてしまい、エディタでは'これはサンプルコードこれはサンプルコードd'となります。
JSEdit for kintone以外ではこのような症状は起こっておらず、エディタ上を見てみると自動入力された文字に白い矢印のようなものが見えます。これは何かの設定が影響しているのでしょうか。
工藤 大輔 様
お世話になっております。cybozu developer network運営チームです。
こちらで確認したところ、再現できませんでした。
次はこちらの環境での動きです。
ただ、別現象ですが、日本語入力際の動きはおかしいことを確認しております。
そこでJSEdit for kintoneに使っているテキストエディターのライブラリーを更新し、JSEdit for kintoneをアップデートしております。
こちらの記事に反映でき次第、改めてご連絡させていただきます。
よろしくお願いいたします。