【超簡単】Bubbleでスワイプの検出を有効にする方法|ノーコードアプリ開発

この記事を読むのにかかる時間:約5分

Bubbleでスワイプを有効にするメリット

ノーコードでアプリを開発できるプラットフォームであるBubbleでは、スマホ向けのWebアプリや、アプリストアに配信されるようなネイティブアプリを作ることもできます。

スマホ向けのアプリを作る際に、あるとより使いやすくなるのが、スワイプでアクションを起こせる機能です。

代表的な使い道としては、画面遷移です。

スワイプすることで画面遷移するようにすることで、ユーザーがより直感的にアプリを使うことができるようになります。

イメージ

デフォルトではスワイプは検出できない

Bubbleでは2023年6月現在、スワイプを検出する機能をデフォルトで提供しておりません。

しかし、プラグインを活用することでスワイプを検出できるようになります。

Bubbleでは世界中の様々なユーザーが開発したプラグインが配信されており、それらを活用することで、デフォルトでは実装できない機能を手軽に組み込むことができます。

今回はそのようなプラグインと、その使い方をご紹介していきます。

スワイプを実装できるプラグイン3選

それではスワイプを実装できるプラグインをご紹介します。

初心者向けの「Simple Swiper」

まずご紹介するのが弊社が開発した、初心者向けで誰でも簡単にスワイプの検出を実装できるプラグイン「Simple Swiper」です。

無料で利用することができ、細かい設定などが不要です。「とりあえずスワイプで動きを加えたい」という方におすすめです。

細かいカスタマイズができる「JavaScript Swipe Detector」

次にご紹介するのが、「JavaScript Swipe Detector」です。このプラグインでは、エレメントごとにスワイプの検出を設定したり、有効なスワイプの距離を設定したりと細かいカスタマイズができるのが魅力です。

細かいカスタマイズができる分、設定する項目が増え、id属性の解放などもしなければならないため、中級者～上級者向けです。

zeroqode開発の「Swipe to Workflow Action Plugin for Bubble」

300個を超えるBubbleプラグインを提供している「zeroqode」製のプラグインです。
ページ全体及び特定のエレメントに対しての両方でスワイプを検出することができます。

英語にはなりますが、マニュアルも充実しているので、安心です。

こちらのプラグインは無料ではなく、$35の買い切りか、月額$7のサブスクリプションで利用できます。

プラグインの利用方法

スワイプ検出のプラグインの使い方はそれぞれのプラグインで異なりますが、基本的には共通で、以下のような流れになります。

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

開発画面の「Plugins」タブから、目的のプラグインの名前で検索し、Installボタンを押します

②エレメントの設置

プラグインをインストールすると、デザインタブのエレメント一覧の中に、そのプラグイン専用のエレメントが表示されます。これを利用したい画面に設置します。

エレメントはとても小さいサイズで配置され、ユーザー向けの画面では見ることができません。

また、エレメントにスワイプの詳細な設定が必要な場合は設定を行います。

③ワークフローの設定

エレメントを配置すると、ワークフローのトリガーの中からプラグインによって追加されたものを選ぶことができます。

トリガーを選んだら、スワイプされたときに実行したい処理を設定していきます。

Simple Swiperについては以下の記事でより詳細な手順を解説しておりますのでこちらも是非ご確認ください。

まとめ

この記事ではBubbleでスワイプを検出する方法を解説しました。

スワイプを検出することで、よりスマホで使いやすいアプリを作ることができるようになります。

スワイプを検出するプラグインは複数あり、その中から自分に合ったものを選びましょう。