[Bubble]Linkを使わず新しいタブでURLを開く方法

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

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

今回は以下のように、プラグインを用いて新しいタブでURLを開く方法について解説していきたいと思います。

新しいタブでURLを開くという機能を取り入れるべきところで使えるようになると、アプリのUXが向上するので是非扱えるようになってほしいと思います。

では、いきましょう!

プラグインをインストールする

まず、無料のプラグインをインストールする必要があります。

なので[Open URL In New Tab]とプラグイン検索から調べます。

そして1番上に出てくる[Open URL In New Tab]を選択します。

そしてインストールします。

[Open URL In New Tab]と検索すると、複数ヒットしますが斜めの矢印が入っているものを選びましょう。

斜めの矢印の[Open URL In New Tab]の説明も読んで分かる通り、どのエレメントに対しても使えるみたいなのでこちらを使う方が応用が聞くと考えられます。

また、インストールしている人数もこちらの方が多いので、こっちの方が便利なことは間違い無いでしょう。

.bubbleの設定変更

このプラグインを使うためには、.bubbleの設定を変更する必要があります。

まず、1番左のタブのSettingsからGeneralを選びます。

そして、そこに[Expose the option to add an ID attribute to HTML elements]と書いてある欄が出てくるので、その欄にチェックを入れます。

これで設定完了です。

なぜこの設定をするかについてですが、今回紹介するプラグインでは[ID attribute]という機能を使います。

これは、Actionを起こす際にエレメントを指名する際に使うのですが、先程の欄にチェックを入れないとその機能は使えません。

[ID attribute]はよく使う機能なので是非覚えておいてほしいと思います。

エレメントの設定

まず、ボタンエレメントを配置します。

そしてボタンエレメントのエディターを開いて、1番下の[ID attribute]の欄に適当な文字列を入れます。

ここでは[Open]と入れていきたいと思います。

ID attributeを使う際は本当にどんな文字列でも大丈夫なので、分かりやすい文字列にしましょう。

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

ちなみにですが、ここでは分かりやすくするためにボタンエレメントを使用していますが、基本的にどのようなエレメントでも応用することができます。

ワークフローの設定

次に、ワークフローの設定をしていきます。

まずボタンエレメントのエディターから[Start/Edit workflow]をクリックします。

そして[Click here to add an event…]→[Plugins]→[Open URL In New Tab]を選択します。

次に、URLの部分に新しいタブを開いて遷移させたい場所のURLを貼ります。

ここではプラグインりょうさんのURL(https://bubble-plugin.tech/)を貼っています。

そして、Element IDの部分に[Open]と入れます。

これで完成です。

それでは、実際にプレビューで確認してみましょう。

説明の通りに操作を行うことができていた場合、以下のように新しいタブでURLを開けるようになっているはずです。

先ほども言ったのですが、InputエレメントでもImageエレメントでも、様々なエレメントでもできるので是非自分のやりたいように応用してくれればと思います。

あとがき

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

.bubbleはプラグインを調べていくと、たくさんの便利なプラグインを見つけることができます。

なので、皆さんにも是非プラグインをどんどん知って行ってほしいなと思います。

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

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

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

Ryo

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

目次