雄一)はじめにここまで、ライブラリを利用しないカスタマイズを紹介してきました。JavaScriptのライブラリは非常に多く便利なものが多いです。その中で最も有名なライブラリがjQueryです。jQueryは、JavaScriptのコードをより容易に記述できるライブラリです。したファイルを、これまでのようにアップロードする方法があります。CSSでカスタマイズ"ページにある[URL指定で追加]にペーストして保存してください。1.11.2のURLを入力したときの例です。利用するアプリに対してjQueryライブラリの準備をする手順はたったこれだけです。やった簡単な事から試してみましょう。(^^♪まずは、レコード一覧イベントでアラートを出す簡単なスクリプトです。ここまで進んだ皆さんにとってはもうお馴染みの書き方ですが、生のJavaScriptで書くとこんな感じですね。これを、以下のように書き換えます。今の時点の違いは先頭行と最終行だけです。jQueryを使うといっても、単にそれによって得られる拡張構文をライブラリとして利用出来るようになるだけの事なので、今まで書いたJavaScriptを全て書き直す必要はありません\(*^▽^*)ノ冒頭部分については色んな書き方がありますが、とりあえずは「こう書くもんなんだ」くらいのおまじないだと思って頂いて問題ないかと思います。以下は、元の形をなるべく残して直訳っぽくjQuery向けに書き直してみました。以前のコードと比較して違いを確かめてみてください。比べてみた感想はいかがでしょう?$myListHeaderDivなどへの記述でお分かりの通り、出力するHTMLタグの各属性を配列形式でまとめて指定出来るところや、"width"などCSSのプロパティ名がそのまま使えるところが一番の違いですね!ついでにちょっと遊び心を加えてみます。上記コードの23行目あたりを以下のように書き換えて実行してみてください。こっちのほうが飛び出る感じや「じゃじゃじゃじゃーん」っぽさが出てグッときますね\(^o^)/これは、jQueryが標準で持つエフェクト機能を利用したほんの一例です。最後に、第5回の最後にやった信号機の色を変えるスクリプトを書き換えてみます(^^♪こちらも上記同様になるべく直訳的な書き換えを心掛けつつ、ループや条件分岐を変えてみましたので以前のコードと比較してみてください。for文で書いたところをjQuery.each()に、if文のところはswitch()に置き換えてみました。これだけですが、無駄な変数が減ったおかげでコード全体が何となく見やすくなったと思いませんか?ついでに、これにもちょっと遊びを入れてみましょう。違いはほんの一行ですので、これも試しに動かしてみてください。標準JavaScriptのsetIntervalとjQueryのエフェクト機能を利用して、本物の信号みたいに黄色を点滅させてみました。目がさらにちかちかします・・・・(+ω+;)が、jQueryを利用するとこういった変更も簡単に出来る事がさらにお分かり頂けたのではないでしょうか。書き方によっては、イベントが発生しない場合があります。良くない例と、適切な書き方については、こちらの記事をご確認ください。最後にいつもの事ながらここではJavaScriptやjQuery自体についての詳しい説明は省略しながら、書き方やいじり方についてさわりだけ紹介しました。(苦笑)ですが、実際に業務で利用するような複雑で長いコードを書こうとしたときほど、生のJavaScriptとの違いやjQueryのありがたみが実感出来るのではないかと思います。はじめとする非常に強力で豊富なプラグイン/ライブラリ群の存在が挙げられます。これらを利用する事で、見た目も操作感もリッチなUIを簡単に実現できるようになります。書いておきましたので、そちらも是非ご覧ください。kintoneカスタマイズ\(^o^)/2017年9月26日追記このTipsは、以下のバージョンで確認したものであり、他のバージョンでは動かない可能性があります。2017年8月版なお、IE、Chrome、Firefoxで確認しております。コミュニティをご活用ください。jQueryの読み込みが必要です。サイボウズさんの回答でこの記事の紹介を受けました。PC用のJavaScriptファイルよりURL指定で登録しました。以下サンプルは、動きました。動いていませんお忙しい所恐れ入りますご教示をお願いします。11:15横山さんcstap武井です。1.ライブラリは最新でもよいと思います。2.JSをjQueryで動作させるというのは、JavaScriptのコードをjQueryに敢えて置換するということでしょうか?jQueryでできる部分を正常に置換すれば動作すると思います。jQueryはあくまでライブラリですので、敢えてJavaScriptをjQueryに置換しなくても動作はするはずです。23:10武井様お世話になります。回答有難うございます1.了解です。確認します2.12回でコード修正されていましたので、修正しましたが、そのまま動作するのであれば、jQueryにこだわりません動作確認が優先です。00:22横山さん私の返答はこの記事というより一般論として捉えていただければ幸いです。1.ライブラリをURLより登録、JavaScriptのPCよりの登録で動作しますでしょうか動作すると思います。スマホ版ではgetHeaderMenuSpaceElement関数が使用できないため、アップしたとしても動作しないと推測されます。回答有難う御座います。追加で質問させて下さい。ie11.0のデバックで実行するとコンソールに以下が表示されました。エスケープの構文です(16,17行)何か対策が必要か、このサンプルだけでは動かないのでしょうか。お手数をお掛けします。アドバイスをお願いいたします。00:55横山さんパッと見た感じでお答えしますが、csvデータ作成時に、recordの中にレコード番号かcolumn1かcolumn2が存在しないものがあるようです。取得したrecordの中に存在しないのか、ここからだけでは判断できません。00:59武井様お世話になります横山ですサンプルは、動作しました。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));有難う御座いました。07:55こんにちは。3ではサンプルコードそのままで正しく動かない場合があったので質問させてください。3.2.0/3.1.1を使ってこの通り動かそうとすると、10回に2〜3回くらいの頻度でアラートが表示されません。2.2.4では問題なく毎回動きます。CDNのものを使ってます。53.0.2(Firefoxの方で頻繁に発生)デバッグ文を入れてこのようにしてみると、アラートが出ない時も「'動いてるよ!:1'」までは毎回表示されました。3.2.0でも毎回問題なく動作しました。});})();他の記事ではjQuery()でくくっていないコードもありますが、jQuery()は使わずに書いても問題ないということでしょうか?kintone.events.on()が呼ばれるタイミング次第だとは思うのですが。2しか安心して使えない状況です。お手数ですが、ご確認をお願いします。06:49たびたび失礼します。今日になって、jQuery(function($){});関数内でeventオブジェクトが取れなくなってしまいました。前回ともまた違った挙動です。});});こう書くと、ログに「false」と表示されるようになってしまいました。イベントに関するデータが全く取得できていません。(先週までは大丈夫でした)以下の2パターンでは、正しくeventオブジェクトが取れました。2.2.4/3.2.0の両方で試しましたが、eventオブジェクトが「false」になる条件はjQuery3でも一緒でした。APIの内部仕様の変更など何かあったのでしょうか?予告なく挙動が変わるのはとても不安なので、ぜひ調査していただきたいです。様お世話になっております。こちらの件について対応が遅くなってしまい大変申し訳ございません。・1の場合、全ブラウザ問題なく動作しました。・2の場合、Firefoxのみ、高い頻度でアラートが表示されませんでした。・また、Firefox(Mac)でJavaScriptのみ適用した場合、問題なく動作しましたが、jQueryも一緒に適用して確認したところ、うまく動作しませんでした。推測ではありますが、Firefox(Mac)側でjQueryが読み込めないのが問題ではないかと思います。■回避策ここで提案できる回避策は以下の2点になります。1Macでのご利用の場合、ブラウザをSafariに変更してご利用いただくとよいかと思います。何かご不明な点などございましたら、コメントいただければと思います。07:07回答ありがとうございます。言いたいことが伝わっていなかったようなので再度確認させてください。)内でkintone.events.on()を呼ぶのはkintoneの仕様上正しくないのではないですか?という観点で再度回答お願いします。kintoneの内部仕様を踏まえてエンジニアの方にコメントもらえると嬉しいのですが。この記事のサンプルコードでは、以下の2つどちらで書いても良いように受け取れます。});});僕が試した結果は前者で書くとjQueryを使っても全く問題なく動く後者で書くとFirefoxやVivaldiで数回に一度動かないことがあるということでした。チュートリアルのコードをそのまま使って動かないのは非常に混乱しますので、記事自体を見直して貰えないでしょうか。ちなみに昨日コメントした「eventオブジェクトがfalseになる問題」は、今再度試したところ発生しませんでした。気持ち悪いですが、こちらは取り下げます。様たびたびご面倒おかけしまして、申し訳ありません。いただいた観点を踏まえて、ご返答させていただきます。前提として、kintoneは5月の定期メンテをおこなっておりませんので、ここ1ヶ月でのkintoneの仕様の変更はございません。jQueryのバージョン変更による影響が考えられます。3.2.0で検証した内容ではございませんでした。従って、本記事記載内容のコードをそのまま実行すると、最新のバージョンでは動かなくなったことが考えられます。混乱を招いてしまい申し訳ございませんでした。一度記事の見直しを検討致します。3.2.0に関しては下記のコードを使用すると本記事の内容で問題なく動作することを確認致しました。該当コードで問題が解消するかどうか、お手数をおかけしますがご確認をお願い致します。03:27欲しかった回答をやっと頂けました。ありがとうございます。これはすでに試して、動くことを確認済みです。この記法でkintoneとして問題ないのなら、今後はこれで書くことにします。});})(jQuery);チュートリアル記事の見直しもよろしくお願いいたします。Permalinkログインしてコメントを残してください。