キンスキ.com

kintone大好きなサイボウズ社員が、開発ナシの活用情報を紹介するブログ

ブログタイトル

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

f:id:tme0503:20180730122610p:plain

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

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

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

TENJIKUって何?

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

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

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

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

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

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

第6回と7回のテーマは、kintoneから取得したデータの扱い方。同じテーマなのでまとめてレポートします。

kintoneには色々なフィールドありますが、それぞれでデータの持ち方が異なります。開発するには、その特徴を押さえておく必要があります。

今回の研修では、実際にJavaScriptで操作しながら特徴を学んでいきました。用意されたテンプレートを使って進めていきます。

f:id:tme0503:20180729222409j:plain:w500

フィールドから取得したデータを、スペースに追加する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>';

処理の結果はコチラ。

f:id:tme0503:20180729212945j:plain:w500

チェックボックス、複数選択

チェックボックスと複数選択は配列なので、考えるべきことが増えます。文字列と同じくそのまま使うこともできますが、自動で間にカンマが入ってしまいます。

用途によって他の書き方を使う必要があります。今回は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だとそうはならないので、扱いやすそうです。

f:id:tme0503:20180729214013j:plain:w500

数値

kintoneの数値はそのままだと文字列扱いになってしまいます。なので、「型変換」で数値扱いにする必要があるそうです。

入力された100に1を足す処理ですが、数値として扱う場合は「Number」を使います。

//数値(そのまま)
strData += record.数値.value + 1;
strData += '<br><br>';

//数値(型変換する)
strData += Number(record.数値.value) + 1;
strData += '<br><br>';

実際に入力をするとこんな感じ。

f:id:tme0503:20180729215133j:plain:w500

日付、時刻、日時

日付と時刻はそのまま使いますが、日時だけは特殊です。そのままだと、世界標準時刻が表示されてしまいます。

そこで使うのが「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が必須ですね。

f:id:tme0503:20180729220525j:plain:w500

リッチエディター

リッチエディターはそのまま使うとhtmlタグも含んでいるようです。テキストだけが欲しい時は「text」を使います。

//リッチエディター(そのまま)
strData += record.リッチエディター.value + '<br><br>';
        
//リッチエディター(textを使う)
strData += $(record.リッチエディター.value).text() + '<br>';
f:id:tme0503:20180730003604j:plain:w500

文字列複数行

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

// 文字列複数行
strData += record.複数行文字列.value + '<br>';

このように、改行が反映されなくなってしまいます。これを防ぐには改行コードを
に変換する処理が必要になるそうです。

f:id:tme0503:20180730004540j:plain:w500

テーブル

ラスボスはテーブルです!今までのフィールドとは大きく異なり、配列の中に更に配列がある構造です。

ただ、やることはチェックボックスと大きくは違いません。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>';
});

無事にテーブルのデータも取得することができました。

f:id:tme0503:20180730004353j:plain:w500

講義では生きた情報が得られる

講座が具体的な内容になるに連れて、レポートが私の学習メモみたいになってきました^^;

ただ、メモはあくまで結果であり、その学ぶプロセスが大事だと思います。実際の授業では、ここには書ききれない例示や補足情報がたくさんあります。

参加者からは授業内容以外の質問も来ることがあります。今回は「編集画面でマウスオーバーしたフィールドの色を変えたい」という質問がありました。

早速、村濱先生から「this」を使った例示が始まります。回答は授業の補足や復習にもなります。こういった生きた情報があるのは講義ならではですね。

次回に向けて

以上第6回・7回のレポートでした。

次回も乞うご期待ください!


TENJIKUに興味を持った方はぜひこちらへ! 次回は10月開催の予定です。 ictcom.sakura.ne.jp


◀︎前回のレポートはコチラ