リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API
（著者：落合 雄一）
はじめに
ここまで、ライブラリを利用しないカスタマイズを紹介してきました。しかし、JavaScriptのライブラリは非常に多く便利なものが多いです。その中で最も有名なライブラリがjQueryです。
jQueryは、JavaScriptのコードをより容易に記述できるライブラリです。どう容易に記述できるのか、今まで紹介してきたコードをいくつか掻い摘んで、実際にjQuery用に書き換えてみながら違いを体験してみましょう(^^♪
Cybozu CDNを利用する
jQueryの利用にあたって、公式サイトからご自身でダウンロード したファイルを、これまでのようにアップロードする方法があります。しかし、今回はそれよりも色々なメリットが得られる Cybozu CDN を活用してみましょう(^^♪
先のページのライブラリ に記載されている任意のjQueryバージョンのURLをコピーし、いつもの"JavaScript / CSSでカスタマイズ"ページにある[URL指定で追加]にペーストして保存してください。以下は、jQuery 3.6.0 のURLを入力したときの例です。
利用するアプリに対してjQueryライブラリの準備をする手順はたったこれだけです。超便利ですね～＼(^o^)／
jQueryを呼び出してみる
はじめに、第1回 でやった簡単な事から試してみましょう。(^^♪
まずは、レコード一覧イベントでアラートを出す簡単なスクリプトです。ここまで進んだ皆さんにとってはもうお馴染みの書き方ですが、生のJavaScriptで書くとこんな感じですね。
これを、以下のように書き換えます。
今の時点の違いは先頭行と最終行だけです。jQueryを使うといっても、単にそれによって得られる拡張構文をライブラリとして利用出来るようになるだけの事なので、今まで書いたJavaScriptを全て書き直す必要はありません＼(*^▽^*)ノ
冒頭部分については色んな書き方がありますが、とりあえずは「こう書くもんなんだ」くらいのおまじないだと思って頂いて問題ないかと思います。もし詳しくお知りになりたい方は jQuery( callback ) などをご覧ください（*^_^*）
jQueryを使ってみる: DOM操作の初歩
続いて、第2回 の最後に書いたサンプルを利用してみましょう(^^♪
以下は、元の形をなるべく残して直訳っぽくjQuery向けに書き直してみました。是非、以前のコードと比較して違いを確かめてみてください。
比べてみた感想はいかがでしょう？
$myListHeaderDivなどへの記述でお分かりの通り、出力するHTMLタグの各属性を配列形式でまとめて指定出来るところや、"width"などCSSのプロパティ名がそのまま使えるところが一番の違いですね！
ついでにちょっと遊び心を加えてみます。上記コードの23行目あたりを以下のように書き換えて実行してみてください。
こっちのほうが飛び出る感じや「じゃじゃじゃじゃーん」っぽさが出てグッときますね＼(^o^)／
これは、jQueryが標準で持つエフェクト機能を利用したほんの一例です。jQueryを使えばこのような事も簡単に出来ます！
jQueryを使ってみる: 制御文
最後に、第5回の最後にやった信号機の色を変えるスクリプトを書き換えてみます(^^♪
こちらも上記同様になるべく直訳的な書き換えを心掛けつつ、ループや条件分岐を変えてみましたので以前のコードと比較してみてください。
元々for文で書いたところをjQuery.each()に、if文のところはswitch()に置き換えてみました。
たったこれだけですが、無駄な変数が減ったおかげでコード全体が何となく見やすくなったと思いませんか？
ついでに、これにもちょっと遊びを入れてみましょう。違いはほんの一行ですので、これも試しに動かしてみてください。
標準JavaScriptのsetIntervalとjQueryのエフェクト機能を利用して、本物の信号みたいに黄色を点滅させてみました。
目がさらにちかちかします・・・・(+ω+;)
が、jQueryを利用するとこういった変更も簡単に出来る事がさらにお分かり頂けたのではないでしょうか。
jQueryを使ってkintone.events.onを使ってイベントハンドラーを登録する際の注意点
jQueryを使ってkintone.event.onを使ってイベントハンドラーを登録する際、
書き方によっては、イベントが発生しない場合があります。
良くない例と、適切な書き方については、こちらの記事をご確認ください。
最後に
いつもの事ながらここではJavaScriptやjQuery自体についての詳しい説明は省略しながら、書き方やいじり方についてさわりだけ紹介しました。ここに挙げた例だけでは、もしかすると「最初にコードが短くなるような事書いていたけど、あんまり変わってない」と思う方もいるかも知れませんね (苦笑)
ですが、実際に業務で利用するような複雑で長いコードを書こうとしたときほど、生のJavaScriptとの違いやjQueryのありがたみが実感出来るのではないかと思います。ここではほんの数個のサンプルコードを書き換えたのみですが、そんな日のためにこれまで扱った他のサンプルもjQueryに書き換えて練習してみてください(^^)
また、jQueryを利用する上での大きなメリットとして、jQuery UI をはじめとする非常に強力で豊富なプラグイン/ライブラリ群の存在が挙げられます。これらを利用する事で、見た目も操作感もリッチなUIを簡単に実現できるようになります。そういった使い方の一例を Sortableを利用したレコードの並び替え に書いておきましたので、そちらも是非ご覧ください。
それでは、またお会いしましょう（*^_^*）
Let’s kintoneカスタマイズ＼(^o^)／
このTipsは、2022年7月版で確認したものになります。
<<第11回 kintone REST APIを利用したレコード更新
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/19/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
はじめまして 横山 と申します jQueryの読み込みが必要です。のサイボウズさんの回答でこの記事の紹介を受けました。
URL:https://js.cybozu.com/jquery/3.1.0/jquery.min.js を
PC用のJavaScriptファイルよりURL指定で登録しました。
以下サンプルは、動きました。
jQuery(function($) {
"use strict";
kintone.events.on('app.record.index.show', function (event) {
window.alert('レコード一覧イベントでjQuery!');
});
ご教示戴きたい事
１．jQueryのライブラリのバージョン・リビジョンは、最新で問題ないでしょうか（3.1.0）
２．js を jQueryで動作させる場合、サンプルのコードを修正する必要がありますでしょうか
集計したデータをCSVでダウンロードするには？
のjsをjQuery用に修正して実行 現在 動いていません
お忙しい所恐れ入りますご教示をお願いします。
横山さん
cstap武井です。
1.ライブラリは最新でもよいと思います。
2.JSをjQueryで動作させるというのは、JavaScriptのコードをjQueryに敢えて置換するということでしょうか？
jQueryでできる部分を正常に置換すれば動作すると思います。
jQueryはあくまでライブラリですので、敢えてJavaScriptをjQueryに置換しなくても動作はするはずです。
武井様
お世話になります。
回答有難うございます
１．了解です。 確認します
２．12回でコード修正されていましたので、修正しましたが、そのまま動作するのであれば、jQueryにこだわりません
動作確認が優先です。
追加でご教示戴きたい事
１．ライブラリをURLより登録、JavaScriptのPCよりの登録で動作しますでしょうか
宜しくお願いします
横山さん
私の返答はこの記事というより一般論として捉えていただければ幸いです。
動作すると思います。
むしろ、スマホ版ではgetHeaderMenuSpaceElement関数が使用できないため、
アップしたとしても動作しないと推測されます。
武井様
回答有難う御座います。
追加で質問させて下さい。
ie11.0のデバックで実行するとコンソールに以下が表示されました。
SCRIPT5007:未定義または、NULL参照のプロパティ'value'は、取得できません
ファイル:index.js 行:1120、列;382
テスト用アプリのCSVでダウンロードの表示は、出ています
スクリプトのvalueを記述している場所は、一か所です エスケープの構文です(16,17行）
何か対策が必要か、このサンプルだけでは動かないのでしょうか。
お手数をお掛けします。アドバイスをお願いいたします。
(function () {
"use strict";
// 一覧ビューの表示イベント
kintone.events.on('app.record.index.show', function(events) {
var $link = $('#download-csv');
if ($link.length == 0) {
// ヘッダにリンクを作成
var $header = $(kintone.app.getHeaderMenuSpaceElement());
$link = $('<a id="download-csv" href="#">CSVでダウンロード</a>');
$header.append($link);
}
// エスケープ
var escapeStr = function(value) {
return '"' + (value? value.replace(/"/g, '""'): '') + '"';
};
if ((window.URL || window.webkitURL).createObjectURL == null) {
// サポートされていないブラウザ
return;
}
// CSVデータを作成
var csv = [];
var row = ['ID','column1','column2'];
csv.push(row);
for (var i = 0; i < events.records.length; i++ ) {
var record = events.records[i];
row = [];
row.push(escapeStr(record['レコード番号'].value));
row.push(escapeStr(record['column1'].value));
row.push(escapeStr(record['column2'].value));
csv.push(row);
}
// BOM付でダウンロード
var csvbuf = csv.map(function(e){return e.join(',')}).join('\r\n');
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, csvbuf], { type: 'text/csv' });
var url = (window.URL || window.webkitURL).createObjectURL(blob);
var fileName = "download.csv";
if (window.navigator.msSaveOrOpenBlob) {
// for IE
$link.unbind();
$link.click(function() {
var retVal = window.navigator.msSaveOrOpenBlob(blob, fileName);
});
} else {
$link.attr('download', fileName);
$link.attr('href', url);
}
});
})();
横山さん
パッと見た感じでお答えしますが、
csvデータ作成時に、recordの中にレコード番号かcolumn1かcolumn2が存在しないものがあるようです。
原因としては、そもそもレコード番号かcolumn1かcolumn2というフィールドコードが存在しないのか、
取得したrecordの中に存在しないのか、ここからだけでは判断できません。
武井様
お世話になります
横山です
サンプルは、動作しました。
row.push(escapeStr(record['レコード番号'].value));
row.push(escapeStr(record['column1'].value));
row.push(escapeStr(record['column2'].value));
ここのフィールド名をフィールドコードに修正しましたら動作しました。
row.push(escapeStr(record['文字列__1行__1'].value));
row.push(escapeStr(record['文字列__1行__2'].value));
有難う御座いました。
こんにちは。jQuery 3ではサンプルコードそのままで正しく動かない場合があったので質問させてください。
初めてjQueryを使っている冒頭のこのコードですが、
jQuery(function($) {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベントでjQuery!');
});
});
jQuery 3.2.0/3.1.1を使ってこの通り動かそうとすると、10回に2〜3回くらいの頻度でアラートが表示されません。
jQuery 2.2.4では問題なく毎回動きます。
ライブラリはCybozu CDNのものを使ってます。 https://developer.cybozu.io/hc/ja/articles/202960194
デバッグ文を入れてこのようにしてみると、アラートが出ない時も「'動いてるよ！:1'」までは毎回表示されました。
jQuery(function($) {
"use strict";
console.log('動いてるよ！:1');
kintone.events.on('app.record.index.show', function(event) {
console.log('動いてるよ！:2');
window.alert('レコード一覧イベントでjQuery!');
});
});
jQuery3では$(function)が常に非同期で処理を行うようになったようですが、これの影響など考えられるでしょうか？
http://cly7796.net/wp/javascript/started-with-jquery3/
また、jQuery()をやめて全体を普通の即時関数でくくってみると、jQuery 3.2.0でも毎回問題なく動作しました。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベントでjQuery!');
});
})();
他の記事ではjQuery()でくくっていないコードもありますが、jQuery()は使わずに書いても問題ないということでしょうか？
kintone.events.on()が呼ばれるタイミング次第だとは思うのですが。。。
https://developer.cybozu.io/hc/ja/articles/203530824-Sortableを利用したレコードの並び替え
https://developer.cybozu.io/hc/ja/articles/203853280-郵便番号-住所について
現状ではjQuery 2しか安心して使えない状況です。お手数ですが、ご確認をお願いします。
たびたび失礼します。
今日になって、jQuery(function($){});関数内でeventオブジェクトが取れなくなってしまいました。前回ともまた違った挙動です。
先週までjQuery2で普通に動いていたコードがエラーを吐くようになったので色々試してみたのですが、
jQuery(function($){kintone.events.on('app.record.index.show', function(event) {
console.log(event);
});
});
こう書くと、ログに「false」と表示されるようになってしまいました。
イベントに関するデータが全く取得できていません。（先週までは大丈夫でした）
以下の2パターンでは、正しくeventオブジェクトが取れました。
(function($){kintone.events.on('app.record.index.show', function(event) {
console.log(event);
});
})(jQuery);
(function(){kintone.events.on('app.record.index.show', function(event) {
console.log(event);
});
})();
Cybozu CDNのjQuery 2.2.4/3.2.0の両方で試しましたが、eventオブジェクトが「false」になる条件はjQuery3でも一緒でした。
APIの内部仕様の変更など何かあったのでしょうか？予告なく挙動が変わるのはとても不安なので、ぜひ調査していただきたいです。
よろしくお願いいたします。
赤座 久樹 様
お世話になっております。
こちらの件について対応が遅くなってしまい大変申し訳ございません。
手元で現象を再現してみた結果、以下の点について確認できましたので、 お伝えいたします。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
■確認した環境
①OS: window
Browser: Chrome(最新)、Firefox(最新)、 Vivaldi(1.9.818.50)
jQueryバージョン: 2.1.４、3.2.0
②OS: Mac
Browser: Chrome(最新)、safari(最新)、Firefox(最新)
jQueryバージョン: 2.1.4、3.2.0
■結果
・①の場合、全ブラウザ問題なく動作しました。
・②の場合、Firefoxのみ、高い頻度でアラートが表示されませんでした。
・また、Firefox(Mac)でJavaScriptのみ適用した場合、問題なく動作しましたが、
jQueryも一緒に適用して確認したところ、うまく動作しませんでした。
推測ではありますが、Firefox(Mac)側でjQueryが読み込めないのが問題ではないかと思います。
■回避策
ここで提案できる回避策は以下の2点になります。
①Macでのご利用の場合、ブラウザをSafariに変更してご利用いただくとよいかと思います。
②もし引き続きFirefox(Mac)をご利用いただく場合には、
jQueryは使わずに(読み込ませずに)JavaScriptのみで書いていただくと問題なく動作すると思われます。
ｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰｰ
また何かご不明な点などございましたら、コメントいただければと思います。
よろしくお願いします。
回答ありがとうございます。
ただイマイチ言いたいことが伝わっていなかったようなので再度確認させてください。
という観点で再度回答お願いします。
kintoneの内部仕様を踏まえてエンジニアの方にコメントもらえると嬉しいのですが。
この記事のサンプルコードでは、以下の2つどちらで書いても良いように受け取れます。
(function() {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベント');
});;
})();
jQuery(function($) {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベントでjQuery!');
});
});
僕が試した結果は
ということでした。
チュートリアルのコードをそのまま使って動かないのは非常に混乱しますので、記事自体を見直して貰えないでしょうか。
よろしくお願いします。
ちなみに昨日コメントした「eventオブジェクトがfalseになる問題」は、今再度試したところ発生しませんでした。
少し気持ち悪いですが、こちらは取り下げます。
欲しかった回答をやっと頂けました。ありがとうございます。
これはすでに試して、動くことを確認済みです。
この記法でkintoneとして問題ないのなら、今後はこれで書くことにします。
(function($) {"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベントでjQuery!');
});
})(jQuery);
チュートリアル記事の見直しもよろしくお願いいたします。
「classic-days2020_desktop.js」を使用して、ポータルメニューをアプリで管理できるようにしています。
ただ、jQueryを全体適用の所でアップロードすると、ポータル画面が真っ白になり機能しなくなってしまいます。
これは、暗黙の了解でjQueryは各アプリ毎に適用しなければいけないのでしょうか？
二宮弘安 様
お世話になっております。cybozu developer network 運営局です。
「classic-days2020_desktop.js」は、jQuery の読み込みを想定していないサンプルコードになります。
上記の現象が発生する原因としては、「classic-days2020_desktop.js」は jsRender を利用しており、
jsRender は、jQuery と一緒に使う場合、jQuery のプラグインとして読み込まれるようです。
その場合、window.jsrender ではなく、$(=jQuery）に直接 jsRender の関数が差し込まれるようです。
参照：https://github.com/BorisMoore/jsrender/blob/master/README.md#using-jsrender-with-jquery
サンプルコードの状態で jQuery を読み込むと、 JavaScript 37行目で window.jsrender が存在せず、エラーが発生します。
そのため、以下のいずれかの対応をする必要があるかなと思っています。
または
50行目の assertJsRender(); をコメントアウト
51行目の const $ = window.jsrender; をコメントアウト
// 51行目で 本来 $ に入っていた jQuery を上書きしています。この行をコメントアウトすれば、$ は jQuery になります。
よろしくお願いいたします。
ご回答ありがとうございました。
参考にさせて頂きます。