第12回 jQueryを利用してみよう

フォローする

(著者:Cstap 落合 雄一

はじめに

ここまで、ライブラリを利用しないカスタマイズを紹介してきました。しかし、JavaScriptのライブラリは非常に多く便利なものが多いです。その中で最も有名なライブラリがjQueryです。

jQueryは、JavaScriptのコードをより容易に記述できるライブラリです。どう容易に記述できるのか、今まで紹介してきたコードをいくつか掻い摘んで、実際にjQuery用に書き換えてみながら違いを体験してみましょう(^^♪

Cybozu CDNを利用する

jQueryの利用にあたって、公式サイトからご自身でダウンロード したファイルを、これまでのようにアップロードする方法があります。しかし、今回はそれよりも色々なメリットが得られる Cybozu CDN を活用してみましょう(^^♪

先のページのライブラリ に記載されている任意のjQueryバージョンのURLをコピーし、いつもの"JavaScript / CSSでカスタマイズ"ページにある[URL指定で追加]にペーストして保存してください。以下は、jQuery 1.11.2の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を利用するとこういった変更も簡単に出来る事がさらにお分かり頂けたのではないでしょうか。

最後に

いつもの事ながらここではJavaScriptやjQuery自体についての詳しい説明は省略しながら、書き方やいじり方についてさわりだけ紹介しました。ここに挙げた例だけでは、もしかすると「最初にコードが短くなるような事書いていたけど、あんまり変わってない」と思う方もいるかも知れませんね (苦笑)
ですが、実際に業務で利用するような複雑で長いコードを書こうとしたときほど、生のJavaScriptとの違いやjQueryのありがたみが実感出来るのではないかと思います。ここではほんの数個のサンプルコードを書き換えたのみですが、そんな日のためにこれまで扱った他のサンプルもjQueryに書き換えて練習してみてください(^^)

また、jQueryを利用する上での大きなメリットとして、jQuery UI をはじめとする非常に強力で豊富なプラグイン/ライブラリ群の存在が挙げられます。これらを利用する事で、見た目も操作感もリッチなUIを簡単に実現できるようになります。そういった使い方の一例を Sortableを利用したレコードの並び替え に書いておきましたので、そちらも是非ご覧ください。

それでは、またお会いしましょう(*^_^*)

Let’s kintoneカスタマイズ\(^o^)/

2017年9月26日追記
このTipsは、以下のバージョンで確認したものであり、他のバージョンでは動かない可能性があります。
・jQuery: 3.2.1
・kintone: 2017年8月版
なお、IE、Chrome、Firefoxで確認しております。

<<第11回 kintone REST APIを利用したレコード更新 

デモ環境

https://dev-demo.cybozu.com/k/19/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
hsy横山

はじめまして 横山 と申します 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!');
});

ご教示戴きたい事
1.jQueryのライブラリのバージョン・リビジョンは、最新で問題ないでしょうか(3.1.0)

2.js を jQueryで動作させる場合、サンプルのコードを修正する必要がありますでしょうか
集計したデータをCSVでダウンロードするには?
のjsをjQuery用に修正して実行 現在 動いていません
お忙しい所恐れ入りますご教示をお願いします。

Avatar
武井 琢治

横山さん
cstap武井です。

1.ライブラリは最新でもよいと思います。
2.JSをjQueryで動作させるというのは、JavaScriptのコードをjQueryに敢えて置換するということでしょうか?
jQueryでできる部分を正常に置換すれば動作すると思います。
jQueryはあくまでライブラリですので、敢えてJavaScriptをjQueryに置換しなくても動作はするはずです。

Avatar
hsy横山

武井様

お世話になります。

回答有難うございます

1.了解です。 確認します

2.12回でコード修正されていましたので、修正しましたが、そのまま動作するのであれば、jQueryにこだわりません

動作確認が優先です。

追加でご教示戴きたい事

1.ライブラリをURLより登録、JavaScriptのPCよりの登録で動作しますでしょうか

宜しくお願いします

 

Avatar
武井 琢治

横山さん

私の返答はこの記事というより一般論として捉えていただければ幸いです。

 


1.ライブラリをURLより登録、JavaScriptのPCよりの登録で動作しますでしょうか



動作すると思います。

むしろ、スマホ版ではgetHeaderMenuSpaceElement関数が使用できないため、

アップしたとしても動作しないと推測されます。

Avatar
hsy横山

武井様

回答有難う御座います。

追加で質問させて下さい。

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);
        }
    });
})();

 

Avatar
武井 琢治

横山さん

パッと見た感じでお答えしますが、

csvデータ作成時に、recordの中にレコード番号かcolumn1かcolumn2が存在しないものがあるようです。

原因としては、そもそもレコード番号かcolumn1かcolumn2というフィールドコードが存在しないのか、

取得したrecordの中に存在しないのか、ここからだけでは判断できません。

Avatar
hsy横山

武井様

お世話になります

横山です

サンプルは、動作しました。

 

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));

有難う御座いました。

 

 

 

Avatar
赤座 久樹

こんにちは。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

  • OS: Mac OS X El Capitan(10.11.6)
  • ブラウザ:Vivaldi 1.9.818.50 / Firefox 53.0.2(Firefoxの方で頻繁に発生)

デバッグ文を入れてこのようにしてみると、アラートが出ない時も「'動いてるよ!: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しか安心して使えない状況です。お手数ですが、ご確認をお願いします。

赤座 久樹により編集されました
Avatar
赤座 久樹

たびたび失礼します。

今日になって、jQuery(function($){});関数内でeventオブジェクトが取れなくなってしまいました。前回ともまた違った挙動です。

  • OS: Mac OS X El Capitan(10.11.6)
  • ブラウザ:Vivaldi 1.9.818.50 / Firefox 53.0.3

先週まで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の内部仕様の変更など何かあったのでしょうか?予告なく挙動が変わるのはとても不安なので、ぜひ調査していただきたいです。

よろしくお願いいたします。

 

 

赤座 久樹により編集されました
Avatar
cybozu Development team

赤座 久樹 様

お世話になっております。
こちらの件について対応が遅くなってしまい大変申し訳ございません。

手元で現象を再現してみた結果、以下の点について確認できましたので、 お伝えいたします。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

■確認した環境

①OS: window  
 Browser: Chrome(最新)、Firefox(最新)、 Vivaldi(1.9.818.50)  
 jQueryバージョン: 2.1.4、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のみで書いていただくと問題なく動作すると思われます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

また何かご不明な点などございましたら、コメントいただければと思います。
よろしくお願いします。

cybozu Development teamにより編集されました
Avatar
赤座 久樹

回答ありがとうございます。

ただイマイチ言いたいことが伝わっていなかったようなので再度確認させてください。

  • 全体をjQuery( callback )でくくると動かないことがあります
  • 全体を即時関数でくくると、その中でjQueryを使った場合でも問題なく動きます
  • jQuery( callback )を使わずに、即時関数内でjQueryを使ってもkintoneの仕様上問題ないのですか?
  • むしろjQuery( callback )内でkintone.events.on()を呼ぶのはkintoneの仕様上正しくないのではないですか?

という観点で再度回答お願いします。

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!');
});
});

 

僕が試した結果は

  • 前者で書くとjQueryを使っても全く問題なく動く
  • 後者で書くとFirefoxやVivaldiで数回に一度動かないことがある

ということでした。

チュートリアルのコードをそのまま使って動かないのは非常に混乱しますので、記事自体を見直して貰えないでしょうか。

よろしくお願いします。

 

ちなみに昨日コメントした「eventオブジェクトがfalseになる問題」は、今再度試したところ発生しませんでした。

少し気持ち悪いですが、こちらは取り下げます。

 

Avatar
cybozu Development team
赤座 久樹 様
 
たびたびご面倒おかけしまして、申し訳ありません。
いただいた観点を踏まえて、ご返答させていただきます。
 
まず前提として、kintoneは5月の定期メンテをおこなっておりませんので、ここ1ヶ月でのkintoneの仕様の変更はございません。
jQueryのバージョン変更による影響が考えられます。
 
本記事では「Cybozu CDNを利用する」項目に記載例のある「jQuery 1.11.2 」を適用した際のチュートリアルとなっており、
jQuery 3.2.0で検証した内容ではございませんでした。
 
従って、本記事記載内容のコードをそのまま実行すると、最新のバージョンでは動かなくなったことが考えられます。
混乱を招いてしまい申し訳ございませんでした。一度記事の見直しを検討致します。
 
また、jQuery 3.2.0に関しては下記のコードを使用すると本記事の内容で問題なく動作することを確認致しました。
該当コードで問題が解消するかどうか、お手数をおかけしますがご確認をお願い致します。
---
(function($) {
    "use strict";
         kintone.events.on('app.record.index.show', function(event) {
          window.alert('レコード一覧イベントでjQuery!');
 });
})(jQuery);
---
Avatar
赤座 久樹

欲しかった回答をやっと頂けました。ありがとうございます。

これはすでに試して、動くことを確認済みです。

この記法でkintoneとして問題ないのなら、今後はこれで書くことにします。

(function($) {
"use strict";
kintone.events.on('app.record.index.show', function(event) {
window.alert('レコード一覧イベントでjQuery!');
});
})(jQuery);

 チュートリアル記事の見直しもよろしくお願いいたします。

赤座 久樹により編集されました
ログインしてコメントを残してください。
Powered by Zendesk