今回は、機能上、ショートカットが必要となり、調べて解決した情報を共有したいと思いました。
(結構、JavaScriptライブラリとKintoneの相性問題もあると思いますので、使えるライブラリ集があれば、助かるかな、と思うのですが、いかがでしょうか?)
今回、使用したライブラリは「shortcuts.js」です。
URL:http://www.openjs.com/scripts/events/keyboard_shortcuts/
これ、いろいろ試しましたが複数キーの割り当ても楽なので、いいかな、と思います。
(日常業務がJavascriptをゴリゴリ動かすものではないため、「そんなの有名じゃん!」だったらすみません…)
今回、検証として一覧を表示するボタンを上部スペース内に設定し、ショートカットを効くようにしました。
※ もちろん、事前準備としてshortcuts.jsをこのjsの前に読み込ませる必要があります。
ソースのサンプルは以下です。
(素人の手習い程度で、お恥ずかしいのですが・・・)
(function () {
“use strict”;
function indexShow(event) {
var elButton = kintone.app.getHeaderMenuSpaceElement(); //右側の空要素を取得
//既存のエレメント削除
while (elButton.hasChildNodes()){
elButton.removeChild(bt_div.firstChild);
}
var bt_div = document.createElement('div');
//ボタンの追加
bt_div.setAttribute('id', 'addButton');
bt_div.setAttribute('name', 'addButton');
var bt1 = document.createElement('button');
//対象の一覧
bt1.setAttribute('id','bt1');
bt1.setAttribute('onClick','location.href=\'/k/[プログラム番号]/?view=[一覧番号]\'');
bt1.innerHTML = '****(Ctrl+1)'; //ボタンの表示名
bt_div.appendChild(bt1);
elButton.appendChild(bt_div);
}
function setShortcut(event) {
shortcut.add(“Ctrl+1”,function() {
bt1.click();
});
}
// 一覧画面が開いた時のイベント
kintone.events.on('app.record.index.show', indexShow);
kintone.events.on('app.record.index.show', setShortcut);
})();
皆様のおすすめのJavaScriptライブラリがありましたら、教えていただければと存じます。
以上、何卒よろしくお願いいたします。
はじめまして、cstapの落合です。
ara様、貴重な情報ありがとうございます!
参考にならないかもしれませんが、普段私が使っているものを適当に列挙します。
altJS:CoffeeScript
http://coffeescript.org/
JavaScriptに変換するプログラミング言語です。短く記述できるのが特徴です。
フレームワーク:Vue.js
http://vuejs.org/
強力なデータバインディングが特徴なMVVMフレームワークです。
ビルドシステム:Gulp
http://gulpjs.com/
個人的にGruntより好きです。
モジュールシステム:Browserify
http://browserify.org/
CommonJS形式のモジュール参照を解決し、1つのJSファイルにまとめてくれます。
外部ライブラリ管理:npm, bower
https://www.npmjs.org/
http://bower.io/
おすすめライブラリ
lodash
http://lodash.com/
JavaScriptで関数型プログラミングをサポートするライブラリです。
Bootstrap
http://getbootstrap.com/javascript/
CSSフレームワークですが、ModalやDropdownなどよく利用される機能が使えます。
以上、ご参考になればと思います。
落合様
お世話になります。
ご回答、ありがとうございます!
バリバリJavascriptを駆使されていますね。
素晴らしいです。
Vue.jsは、私もたまにJQueryを使っているので、参考にさせていただけそうです。
もし、Kintone上で実装したよ!というようなことがありましたら、情報共有を頂けるとすごくうれしいです。
ありがとうございます!
ara?
araさん、shortcutの情報ありがとうございます。
落合さんは、さすがいっぱい使ってますねw
わたしが、使っているのは、ポピュラーなものばかりですがご参考までに。
・angular.js
カスタマイズ・ビューを使うときにお世話になります
・jquery,
・jquery-ui
ないと話になりませんね(^_^;)
・jquery-ui-datepicker
カレンダーで日付けの選択などをやむなく入れるとき・・・
・jquery.noty
通知を画面に表示したいとき・・・
新妻様
情報ありがとうございます!
ご提示いただいたライブラリですが、寡聞にして知りませんでした。
jquery.notyは、普通にAlertを出すよりおしゃれですね。
angular.jsは、いろいろな効果を出せそうです。
Kintone上で使った例がありましたら、また教えてください。
ありがとうございました!
ara?
ara?様
お世話になっております。cybozu developer network 事務局です。
こちらの投稿を新しく開設した「ナレッジノート」に移動させていただくことは可能でしょうか?
ご確認をよろしくお願いいたします。
事務局様
いつもお世話になっております。
頂いた件、ナレッジノートへの移動は問題ありません。
以上、何卒よろしくお願いいたします。
ara?様
ご連絡が遅くなり申し訳ございません。ご快諾ありがとうございます。ナレッジノートに移動させていただきました。
今後ともよろしくお願いいたします。
system
(system)
クローズされました:
9
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。