【Bubble】アイコンをクリック時、外部ページへ「新規ウインドウで」遷移する方法
今回は、アイコンをクリック時に外部ページへ遷移させる方法を紹介します。
Bubbleで外部ページへのリンクを仕込む方法は、主に2つあります。
・Workflowにて「Go to page..」「Open an external website」を使用
・Linkエレメントを使用
後者はアイコンや画像が使えないので、除外です。
しかし前者の場合、今度はページを別ウインドウ・タブで開くことができません。
同じウインドウ・タブで、アプリから遷移してしまいます。
今作っているのは顧客管理ツールで、お客さんのFacebookページを開きたいのですが
同じタブで毎回開くと面倒なので、どうしても別タブで開きたいです。
そこで調査した結果、無事に解決したので、方法を共有します。
--
リンクについての記事は以前にも書いているので、こちらもぜひ参考にしてください。
Javascriptのwindow.openメソッドを使用
結論としては、コードを書いて解決します。
Bubbleはこういうローコード的な使い方で、かなり自由度を高められますね。
まず「Toolbox」プラグインをインストールします。
WorkflowにてJavascriptを実行できるようにするプラグインです。
アイコンをクリック時のWorkflowで、「Run Javascript」を指定。
画像のように設定します。
記述内容は、以下の通り。
window.open(url, windowName, [windowFeatures]);url：遷移先のURL
windowName：閲覧ウインドウの名前
windowFeatures：ウインドウサイズや位置、ツールバーを含めるか等
このうち、urlのみ設定すればOKです。
ダブルクォーテーション(")で囲って記述します。
僕は遷移先が動的に変わるよう、dynamic dataで設定しています。
これでアイコンをクリックしてみると、Chromeで開いている場合は無事に別タブで開くことができました！
参考ページ
https://developer.mozilla.org/ja/docs/Web/API/Window/open
専用プラグインを使用する方法
もうひとつ、プラグインを発見したので紹介します。
これを使うことでActionが追加され、外部リンクを別タブで開くことができるようです。
ただし有料プラグインとなっています。（かなり安いですが）
今回の方法は無料かつかなり簡単な設定方法なので、特に不便がなければ今回紹介した方法で十分かと思います。
【追記】Linkエレメントを使う方法
この記事を投稿してすぐ、ノーコードラボさんからこんなリプライが。
Link エレメントはテキストだけでなくアイコンも指定できますよ〜
— ノーコード ラボ (@nocodelab) November 5, 2020
どや！😉 pic.twitter.com/om44OaEsV4
— ノーコード ラボ (@nocodelab) November 5, 2020
！！！！！！
ナイスどや！！
やり方はLinkエレメントを配置し、Styleを解除します。（remove style）
すると最上部にShow an icon instead of textのチェックボックスが出現。
これにチェックを入れると、アイコンを選択できるようになります。
アイコンサイズはStyle内の数値で変更するようです。
しかしこれは衝撃でした笑
Linkエレメントの使い道が広がりましたね。
forumにこの手の質問がいくつもあるので、おそらくあまり認知されていないようです。
公式仕様なのに裏ワザみたいですね笑
知ったからには今後、どしどし使っていきます。
ノーコードラボさん、情報提供ありがとうございました。
【追記2】無料プラグイン「URL Actions」
専用プラグインについて、記事中で有料のものを紹介しましたが、調べると無料でもいくつか出てきます。
どれも「別タブで開く」というアクションが追加されます
それらの中で、僕がいつも使うのが「URL Actions」です。
別タブで開くのはもちろん、あまり使いませんが閉じる操作などもあるようです。
この記事で色々と紹介しましたが、結果的にこのプラグインで全て解決です笑
みなさんもぜひ活用してください。
この記事が気に入ったらサポートをしてみませんか？