こんにちは、kintone大好き松井です。
kintoneはちょっと開発知識があるだけで、アプリの幅がグッと広がります。私もkintone開発してみたい!そんな思いから、kintone開発者育成講座の「TENJIKU」に参加しています。
今回はその第6回と7回のレポートをお送りします。
- TENJIKUって何?
- テーマは「フィールドごとのデータの扱い方」
- 文字列1行、ドロップダウン
- チェックボックス、複数選択
- 数値
- 日付、時刻、日時
- リッチエディター
- 文字列複数行
- テーブル
- 講義では生きた情報が得られる
- 次回に向けて
TENJIKUって何?
kintoneは標準機能では力不足な事がしばしば。JavaScriptで開発することで、できることが格段に広がります。
中には独学で開発した方もいると思います。しかし、やりたいことが増えていくと、体系的な開発知識が必要になってきます。
そんな方に向けた、kintoneベースの開発者育成講座が「TENJIKU」です。主催するICTコミュニケーションズ社は、「kintone university」で述べ1,100名の参加者を誇るパートナーです。
TENJIKUの研修期間は約2ヶ月!90分講座が週2回のガッツリメニューです。私もこの研修に参加して、本当にkintone開発者になれるのかをレポートしていきます!
▼初回のレポートはこちら
テーマは「フィールドごとのデータの扱い方」
第6回と7回のテーマは、kintoneから取得したデータの扱い方。同じテーマなのでまとめてレポートします。
kintoneには色々なフィールドありますが、それぞれでデータの持ち方が異なります。開発するには、その特徴を押さえておく必要があります。
今回の研修では、実際にJavaScriptで操作しながら特徴を学んでいきました。用意されたテンプレートを使って進めていきます。

フィールドから取得したデータを、スペースに追加するJavaScriptを加えます。先生に教わりながら、一緒に書いていきます。
(function() { 'use strict'; kintone.events.on([ 'app.record.detail.show' ], function(event) { var record = event.record; var spTarget = kintone.app.record.getSpaceElement('target'); var strData = ''; //ここに処理を加えていく! $(spTarget).html(strData); }); })();
文字列1行、ドロップダウン
文字列1行、ドロップダウン、計算は取得した値をそのまま使います。
//文字列 strData += record.文字列.value + '<br><br>'; //ドロップダウン strData += record.ドロップダウン.value + '<br><br>';
処理の結果はコチラ。

チェックボックス、複数選択
チェックボックスと複数選択は配列なので、考えるべきことが増えます。文字列と同じくそのまま使うこともできますが、自動で間にカンマが入ってしまいます。
用途によって他の書き方を使う必要があります。今回は4つの書き方を教わりました。チェックボックスの例で書きます。
//チェックボックス(そのまま) strData += record.チェックボックス.value + '<br><br>'; //チェックボックス(for文を使う) for (var i = 0; i < record.チェックボックス.value.length; i++) { strData += record.チェックボックス.value[i] + ','; } strData += '<br><br>'; //チェックボックス(forEachを使う) record.チェックボックス.value.forEach(function(v) { strData += v + ','; }); strData += '<br><br>'; //チェックボックス(joinを使う) strData += record.チェックボックス.value.join(","); strData += '<br><br>';
今回はデータの間にカンマを入れます。ただ、forやforEachはそのままだと末尾にもカンマが入ってしまいますね。joinだとそうはならないので、扱いやすそうです。

数値
kintoneの数値はそのままだと文字列扱いになってしまいます。なので、「型変換」で数値扱いにする必要があるそうです。
入力された100に1を足す処理ですが、数値として扱う場合は「Number」を使います。
//数値(そのまま) strData += record.数値.value + 1; strData += '<br><br>'; //数値(型変換する) strData += Number(record.数値.value) + 1; strData += '<br><br>';
実際に入力をするとこんな感じ。

日付、時刻、日時
日付と時刻はそのまま使いますが、日時だけは特殊です。そのままだと、世界標準時刻が表示されてしまいます。
そこで使うのが「Moment.js」です。日時データを色々な形式に整えて表示してくれます。事前にCybozu CDNからライブラリのURLを加えておきます。
//日付 strData += record.日付.value + '<br><br>'; //時刻 strData += record.時刻.value + '<br><br>'; //日時 strData += record.日時.value + '<br><br>'; //日時(Moment.jsを使う) strData += moment(record.日時.value).format('YYYY/MM/DD H:m') + '<br><br>';
こんな処理を書くとこうなります。日付を扱う場合は、Moment.jsが必須ですね。

リッチエディター
リッチエディターはそのまま使うとhtmlタグも含んでいるようです。テキストだけが欲しい時は「text」を使います。
//リッチエディター(そのまま) strData += record.リッチエディター.value + '<br><br>'; //リッチエディター(textを使う) strData += $(record.リッチエディター.value).text() + '<br>';

文字列複数行
文字列複数行はそのままで使えますが、1つ気にすべきポイントが。。
// 文字列複数行 strData += record.複数行文字列.value + '<br>';
このように、改行が反映されなくなってしまいます。これを防ぐには改行コードを
に変換する処理が必要になるそうです。

テーブル
ラスボスはテーブルです!今までのフィールドとは大きく異なり、配列の中に更に配列がある構造です。
ただ、やることはチェックボックスと大きくは違いません。for文やforEachでループして取得します。
//テーブル(for文を使う) for (var i = 0; i < record.商品明細.value.length; i++) { strData += '商品名:' + record.商品明細.value[i].value.商品名.value + ' '; strData += '単価:' + record.商品明細.value[i].value.単価.value + ' '; strData += '数量:' + record.商品明細.value[i].value.数量.value + ' '; strData += '行合計金額:' + record.商品明細.value[i].value.行合計金額.value + ' '; strData += '<br>'; } strData += '<br>'; //テーブル(forEachを使う) record.商品明細.value.forEach(function(r) { strData += '商品名:' + r.value.商品名.value + ' '; strData += '単価:' + r.value.単価.value + ' '; strData += '数量:' + r.value.数量.value + ' '; strData += '行合計金額:' + r.value.行合計金額.value + ' '; strData += '<br>'; });
無事にテーブルのデータも取得することができました。

講義では生きた情報が得られる
講座が具体的な内容になるに連れて、レポートが私の学習メモみたいになってきました^^;
ただ、メモはあくまで結果であり、その学ぶプロセスが大事だと思います。実際の授業では、ここには書ききれない例示や補足情報がたくさんあります。
参加者からは授業内容以外の質問も来ることがあります。今回は「編集画面でマウスオーバーしたフィールドの色を変えたい」という質問がありました。
早速、村濱先生から「this」を使った例示が始まります。回答は授業の補足や復習にもなります。こういった生きた情報があるのは講義ならではですね。
次回に向けて
以上第6回・7回のレポートでした。
次回も乞うご期待ください!
TENJIKUに興味を持った方はぜひこちらへ!
次回は10月開催の予定です。
ictcom.sakura.ne.jp