[BUBBLE]Webアプリ内で使えるショートカットキーを生成する方法

みなさんこんにちは! Ryoです!

普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。

今回は、プラグインを用いてWebアプリ内で使えるショートカットキーを生成する方法について解説していきます。

アプリの中には、そのアプリ内でのみ使えるようなショートカットってありますよね。
例えば、Googleを使っている時に[command+T]を押したら新しいタブが開かれるみたいに。

今回はその機能を、Bubbleで作ったアプリにも搭載してしまおうという記事になります。

では、いきましょう。


プラグインのインストール

まずPluginsタブのところから、[Air Keyboard Shortcut]と検索します。

すると以下の画像のようなプラグインが出てくるので、それをインストールします。

このプラグインは、エレメントとイベントの2つの操作を扱うことによってショートカットを生成することができます。


エレメントの設定

次に、エレメントを配置して設定していきます。

まずVisual elementsから[Air Keyboard Shortcut]を選択し、適当な場所に配置します。
ページの中にさえ配置していれば、どこでも効果は適用されます。

そして、Key(s)と書かれているところにショートカットキーを入力します。

ここでは[ctrl+k]と入力します。
これによって[ctrl]と[k]を同時に押したときに操作を行うことができるようになります。

次に、もう一つ[Air Keyboard Shortcut]のエレメントを設置します。

こちらには、[a s d ctrl+f]と入力します。
これによって、[a][s][d]と連続に押した後に、[ctrl]と[f]を同時に押すことによって操作を行うことができるようになります。

これでエレメントの設定は完了です。


ワークフローの設定

次にワークフローの設定を行なっていきます。

Workflowタブを選択して、

[Click here to add an event…]→[Elements]→[A AirKeyboardShortcut is triggerd]

と選択します。そして、

[Click here to add an action…]→[Navigation]→go to page]

を選択します。

Distinationは、ここでは404ページとします。

そして、同様の操作をもう一つのエレメントにも設定します。

これで完成です。

では、プレビューで確認してみましょう。

設定したショートカットを押せば、404ページに移動していると思います。

そしてこれを応用すれば、Googleのようにショートカットによってタブを新しく生成することも可能です。

タブを新しく生成する方法に関しては、以下の記事をご覧ください。

https://bubble-plugin.tech/new-tab


あとがき

いかがだったでしょうか?

このような機能をBubbleで搭載できるのはなかなかに意外だったのではないかと思います。
僕も初めて知った時は本当に驚きました。

この機能を搭載することによってアプリのUXが非常によくなることがあるので、是非覚えておいてほしいと思います。

今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な豆知識などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。

それではまた次回の記事でお会いしましょう!!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次