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

フォローする

(著者:Cstap 落合 雄一

はじめに

こんにちは。落合@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^)/

このTipsは、2015年4月版で確認したものになります。

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

デモ環境

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

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

コメント

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

有難う御座いました。

 

 

 

ログインしてコメントを残してください。
Powered by Zendesk