リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
（著者：落合 雄一）
はじめに
「はじめようkintone JavaScript API」では、これからkintoneを自分好みに便利にカッコ良くしていきたい!!という方向けにkintone JavaScript APIの基本的な使い方を分かりやすく紹介していきます。
記念すべき第1回は、kintoneをカスタマイズしていく上での基本の「き」です。JavaScriptの記述ルールや、JavaScriptをkintoneへアップロードして動作させるまでの手順を紹介します。また、kintone JavaScript APIを利用する上で非常に重要な「イベント」についても簡単に紹介します。
なお、この連載ではHTML/JavaScript/CSSについての基礎的な技術知識がある方を対象にしております。この辺りの情報については、Webサイトや書籍など世の中にたくさん資料が出回っておりますので、ぜひそちらをご参考頂くようお願いいたします。m(_ _)m
kintone JavaScriptの書き方 その1
kintoneでは、カスタマイズする際のJavaScriptに関するコーディングガイドラインというものを策定しております。kintoneをカスタマイズする前に、簡単に確認していきましょう(^^♪
①拡張子は.jsで保存
作成したJavaScriptファイルを拡張子.jsで保存してください。
②文字コードはUTF-8(BOMなし)
BOM(バイトオーダーマーク)については、このせいで必ず不具合が出るって訳ではありませんが・・・だからこそ厄介でもあります(^^;
あとでハマってしまったときに「なんでやねんっ！(怒)」とならないように、BOMなしでのUTF-8でのファイル保存は是非マスターしておいてくださいね(*^_^*)
③ 即時関数パターンで記述
JavaScriptは、即時関数パターンで書いた方が良いです。耳慣れない言葉かも知れませんが、実際に見れば「ああ、これね」っていう感じのものなのではないでしょうか。具体的にはこんな感じです。
理由を書くと専門用語とかややこしい話になってしまうのですが、平たく言えばこういう書き方をしておけばkintoneの動作を邪魔する心配をしなくて済みます。
他にも重要なことが記載されていますので、「kintone JavaScript コーディングガイドライン」もぜひご参照ください。
kintone JavaScriptの書き方 その2
もうひとつ確認しておくべき情報があります。セキュアコーディングガイドラインです。いろいろ書かれていますが、今回は1点だけ紹介します。
①strictモードの使用
処理内容の先頭に"use strict";という文字列を記述しましょう。
これは平たく言うなら、気づかず大きなミスをしてしまったりしないためのおまじないって感じでしょうか。(^^) なんかややこしいなーとか思ってしまった方も、気にしなくて結構です。即時関数パターンだとかstrictモードだとかそういう小難しい名前はとりあえず置いといて、今はこう書くのがお作法なんだ、くらいに思っておいてください。(詳しく知りたい方は、ぜひ即時関数やstrictモードについて調べてみる事をオススメします。)
JavaScriptファイルを作成する
それでは、JavaScriptファイルを作成してみましょう。エディタは使い慣れたものであればなんでも構いません。ここまでの話しを踏まえた上で、簡単なalertメッセージを出すスクリプトを作成してみましょう(^^♪
このJavaScriptをwelcome.jsという名前で保存しましょう。
作成したファイルをkintoneに取り込む
それでは、先ほど作成したJavaScriptをkintoneに取り込んでみましょう。手順については、以下のページに詳しい説明があります。
手順に従って先ほどのJavaScriptファイルをアップロードします。ここはそれほど難しい事ではないと思いますので、ちょっとした注意点だけ紹介します。
①拡張子は.js
ファイル名が不正な場合は、以下のような画面が出力されます。
②「設定完了」を忘れずに
ファイルをアップロードし、「保存」ボタンを押しただけではJavaScriptファイルは適用されません。結構忘れがちな事なのですが、「保存」ボタンを押したあとのアプリの設定画面で右上にある「アプリを更新」ボタンを押すと下図のようなポップアップメッセージが出ますので、ここで「OK」ボタンを押してください。これを忘れてしまうといくら待っても適用されませんので、くれぐれもご注意くださいね。(私も忙しいときたまにやってしまいます・・・)
③文字コードはUTF-8
おっと！やってしまいました。UTF-8以外の文字コードで保存したファイルをアップロードしてしまったようです(^^;
もう一度ファイルの作成からやり直して、今度は確実にUTF-8で保存し、再度kintoneに取り込みましょう(^^♪
取り込みができた方は、以下の画面でalertが出た事を確認出来るかと思います。
- レコードの一覧画面
- レコードの登録画面
- レコードの編集画面
- レコードの詳細画面
- レコードの集計結果画面（PCのみ）
しかし、このままではどの画面でも同じものが出るだけです。これでは、一覧画面だけで処理を行いたい場合などには適していません。どうすれば良いでしょうか？
kintoneのイベント処理に触れてみる
ここで登場するのが「イベント」です＼(^o^)／イベント処理の記述方法については、イベント処理の記述方法に記述されています。
kintone.events.on(event, handler(event))
これが、イベントハンドラーを登録するためのkintone JavaScript APIの関数になります。なんか難しそうですね。でもそんなことないですよ(^^)
例えば、「○○が実行されたとき」に「××の処理を実行」したいとします。
これを上の関数で書くと、
- ○○に当たるのがevent
- ××に当たるのがhandler
となります。なんとなくイメージがつかめたのではないでしょうか？(^^♪
○○に当たるeventは、kintone JavaScript APIでは、例として以下のようなものが用意されています。
- レコード一覧イベント: app.record.index.show
- レコード表示イベント: app.record.detail.show
- レコード追加イベント: app.record.create.show
- レコード編集イベント: app.record.edit.show
- グラフ表示イベント: app.report.show
××の書き方は、言葉で説明するより実際の動きを見た方がわかりやすいのではと思います。
以下のコードをwelcome.jsに上書きし、再度kintoneに取り込み、実際の動きを見てみましょう(^^♪
いかがでしょう。それぞれどんなときに各イベントが動いているか確認出来ましたか？詳しいことは、イベント処理の記述方法と各イベントの説明ページを参考にしてみてください(^^)
最後に
今回は基本の「き」ということで、JavaScriptの記述ルールや、JavaScriptをkintoneへアップロードして動作させるまでの手順を紹介しました。また、イベントについても紹介しました。なんとなくkintoneでできることがイメージできたのではないでしょうか？
最後に、kintoneカスタマイズの活用例を見ながら、皆さんのアプリをどのようにカッコ良くしていけるか、想像してみてください。「cybozu developer network」では、JavaScriptを使ったカスタマイズのサンプルも豊富にそろえておりますので、ぜひ確かめてみる事をオススメします。
それでは…
Let’s kintoneカスタマイズ＼(^o^)／
<<第0回 kintone カスタマイズをはじめる前に知っておきたい6つのこと | 第2回 レコード一覧画面にボタンを設置しよう！>>
デモ環境
デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/1/
ログイン情報はcybozu developer network デモ環境で確認してください。
「最後に」の
> 最後に、JavaScript読み込みの活用例を見ながら、
のリンク先が404になってしまっています。