kintone開発者を目指して開発者研修TENJIKU参加レポート vol.6＆7

f:id:tme0503:20180730122610p:plain

こんにちは、kintone大好き松井です。

kintoneはちょっと開発知識があるだけで、アプリの幅がグッと広がります。私もkintone開発してみたい！そんな思いから、kintone開発者育成講座の「TENJIKU」に参加しています。

今回はその第６回と７回のレポートをお送りします。

TENJIKUって何？
テーマは「フィールドごとのデータの扱い方」
文字列1行、ドロップダウン
チェックボックス、複数選択
数値
日付、時刻、日時
リッチエディター
文字列複数行
テーブル
講義では生きた情報が得られる
次回に向けて

TENJIKUって何？

kintoneは標準機能では力不足な事がしばしば。JavaScriptで開発することで、できることが格段に広がります。

中には独学で開発した方もいると思います。しかし、やりたいことが増えていくと、体系的な開発知識が必要になってきます。

そんな方に向けた、kintoneベースの開発者育成講座が「TENJIKU」です。主催するICTコミュニケーションズ社は、「kintone university」で述べ1,100名の参加者を誇るパートナーです。

TENJIKUの研修期間は約２ヶ月！90分講座が週２回のガッツリメニューです。私もこの研修に参加して、本当にkintone開発者になれるのかをレポートしていきます！

▼初回のレポートはこちら　

テーマは「フィールドごとのデータの扱い方」

第６回と７回のテーマは、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>';

文字列複数行

文字列複数行はそのままで使えますが、１つ気にすべきポイントが。。

// 文字列複数行
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>';
});