tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:ショートカットキーの実装

ちょっと試してみたいことがあったのでショートカットキーの処理を簡単に実装できないものかと調べてみたら、shortcut.jsという便利なJavaScriptのPluginが見つかりました。

このPluginは、Handling Keyboard Shortcuts in JavaScriptというサイトからダウンロードできます。

Handling Keyboard Shortcuts in JavaScript

http://www.openjs.com/scripts/events/keyboard_shortcuts/index.php

サイト下部のCodeのあたりにあるリンクからJSファイルをダウンロードできるので、静的リソースにアップすることでSFDCでも使用することができます。

JSファイルのダウンロード

f:id:tyoshikawa1106:20130530004752p:plain

静的リソースにアップロード

f:id:tyoshikawa1106:20130530005312p:plain

これでVisualforceページからPluginを使用する準備ができました。
続いて動作確認になります。Visualforceでデモページをつくってみました。


上記のソースで次の画面が表示されます。

f:id:tyoshikawa1106:20130530010029p:plain


画面が表示された状態でCtrlキーとShiftキーとXキーを同時に押下します。
JavaScriptが実行されアラートメッセージが表示されます。

f:id:tyoshikawa1106:20130530010325p:plain

YキーやZキーでもそれぞれのメッセージが表示されることを確認できます。
今回の組み合わせ以外にも任意の組み合わせで処理を実行することができます。

Visualforceページでショートカットキーの処理を作成したいときには、すごく便利なPluginだと思います。


Visualforceページで使用するのにもすごく便利ですが、サイドバーのお知らせにscriptを埋め込むことでもっとおもしろいことができないかなと思いました。


ということで次のような処理をつくってみました。

上記処理をホームページコンポーネントのお知らせに保存します。
これでサイドバーにお知らせが表示されている状態なら先程と同様にショートカットキーの処理を呼び出すことができます。

f:id:tyoshikawa1106:20130530013255p:plain


上記処理の場合、"Ctrl+Shift+1"で開発者コンソールを開いたり、"Ctrl+Shift+2"で設定画面を開いたりできます。Salseforce内のページ以外にも"Ctrl+Shift+3"と"Ctrl+Shift+4"でDeveloper’s Guideのページを表示させたりしてみました。


今回は"Ctrl+Shift+●"の組み合わせで試してありますが、使いやすい組み合わせで作成できると思うので、よく使うページのショートカットキーとして用意しておくことで開発がしやすくならなったりしないかなと思いました。


ちょっとうまくできていないのが、お知らせ内にJavaScriptを記載するとき、$Resourceを使って静的リソースからJSファイルの情報を取得することができなかったので、静的リソースのID部分を直書きで指定してしまいました。ここがもう少しきれいに書ければ良かったかなと思います。

追記

静的リソースのところは「src="/resource/shortcut"」というような書き方で読み込み可能みたいです。この方法ならIDを直書きしなくていいので環境依存せずに使用できると思います。ということでソースの方を修正しました。