新規投稿
フォローする

ショートカットの設定(お勧めJavaScriptライブラリ)

今回は、機能上、ショートカットが必要となり、調べて解決した情報を共有したいと思いました。
(結構、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ライブラリがありましたら、教えていただければと存じます。

以上、何卒よろしくお願いいたします。

4

7件のコメント

Avatar
落合 雄一

はじめまして、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などよく利用される機能が使えます。

以上、ご参考になればと思います。

0
Avatar
ara?

落合様

お世話になります。
ご回答、ありがとうございます!

バリバリJavascriptを駆使されていますね。
素晴らしいです。

Vue.jsは、私もたまにJQueryを使っているので、参考にさせていただけそうです。

もし、Kintone上で実装したよ!というようなことがありましたら、情報共有を頂けるとすごくうれしいです。

ありがとうございます!

ara?

0
Avatar
新妻正夫

araさん、shortcutの情報ありがとうございます。
落合さんは、さすがいっぱい使ってますねw

わたしが、使っているのは、ポピュラーなものばかりですがご参考までに。

・angular.js 
カスタマイズ・ビューを使うときにお世話になります

・jquery,
・jquery-ui
ないと話になりませんね(^_^;)

・jquery-ui-datepicker
カレンダーで日付けの選択などをやむなく入れるとき・・・

・jquery.noty
通知を画面に表示したいとき・・・

1
Avatar
ara?

新妻様

情報ありがとうございます!
ご提示いただいたライブラリですが、寡聞にして知りませんでした。

jquery.notyは、普通にAlertを出すよりおしゃれですね。
angular.jsは、いろいろな効果を出せそうです。

Kintone上で使った例がありましたら、また教えてください。

ありがとうございました!

ara?

0
Avatar
cybozu Development team

ara?様

お世話になっております。cybozu developer network 事務局です。

こちらの投稿を新しく開設した「ナレッジノート」に移動させていただくことは可能でしょうか?

ご確認をよろしくお願いいたします。

0
Avatar
ara?

事務局様

いつもお世話になっております。

頂いた件、ナレッジノートへの移動は問題ありません。

以上、何卒よろしくお願いいたします。

0
Avatar
cybozu Development team

ara?様

ご連絡が遅くなり申し訳ございません。ご快諾ありがとうございます。ナレッジノートに移動させていただきました。

今後ともよろしくお願いいたします。

0
サインインしてコメントを残してください。