[BUBBLE]プラグインを使って署名機能を実装する方法

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

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

今回は下の動画のように、Webアプリ内に署名機能を実装する方法について解説していきます。

では、いきましょう。


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

まずPluginsタブのところから、[Signature Pad]と検索します。

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

このプラグインでできることは主に以下の5つになります。

  • 署名できるようにするエレメントの追加
  • 署名のセーブボタンが押された時のイベントの追加
  • 署名が空白のときにセーブボタンが押された時のイベントの追加
  • 署名を削除するためのアクションの追加
  • 署名をセーブするためのアクションの追加

これらの動作を使うことによって、さまざまな用途で署名を扱うことができるようになります。


エレメントの設定

次にエレメントの設定を行なっていきます。

まず、Visual elementsから[Signature Pad]を選択し、適当な場所に配置します。

そして、エディターの設定を行なっていきます。

Signature Padで設定できる項目は以下のようになっています。

  • Footer text→Signature Padの下にあるテキストの変更
  • Save button→セーブボタンの表示切り替え
  • Clear button→クリアーボタンの表示切り替え
  • Back ground image→背景の変更(選んだ写真に変えられる)
  • Back ground color→背景色の変更
  • Dot size of pen→クリックした瞬間のドットの大きさの調整
  • Minimum width of stroke→ペンの幅の最小サイズの調整
  • Maximum width of stroke→ペンの幅の最大サイズの調整
  • Pen color→ペンの色の変更
  • Velocity filter weight→ペンの細さの調整
  • Make this file private→ファイルのダウンロードを防ぐかどうか(セキュリティ上の問題)
  • Attach to thing file→署名をどのタイプに紐づけるのか
  • Attach to user→署名をどのユーザーに紐づけるのか
  • Clear on window resize→ブラウザのサイズが変わった時にクリアーするかどうか

そこで自分の好きなように設定しましょう。
今回の記事では初期設定のままいきます。

補足ですが、Dot size of penの部分は入力しないと赤枠が表示されますが、何も入力しなくてもエラーは起きないみたいです。


ワークフローの設定

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

[Click here to add an event…]→[Elements]→[A Signature is saved]

そして、

[Click here to add an action…]→[Data]→[Create a new thing]

を選択します。

そして[Create a new type]を選択し、[Sign]という名前でデータを作ります。

次にSet another fieldをクリックし、[Create a new field]を選択します。

そしてField nameを[Name]という名前にし、Field typeを[image]にします。

その後に、[Name=This SignaturePad’s Image url]と入力します。

これで完成です。

プレビューを見てみると、以下の動画のようになっているはずです。

そしてSaveボタンを押すと、データベースにも保存されるようになっています。


あとがき

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

今回のようにBubbleには知っているだけで簡単に実装できるような機能がたくさんあります。
なので是非何か実装したい機能があればその都度調べてみてください。
意外と見つかります。

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

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

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

Ryo

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

目次