ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble プラグイン 第3弾は進捗率を表示する「Simple progress bar」を作成しました。

f:id:yksmt:20200414150951p:plain

皆さん、こんにちは!

Bubble での自作プラグインの作り方について、幾つかご紹介していますが、今回は、進捗率を表示する「Simple progress bar」を作成しましたので、ご紹介したいと思います。

1. Bubble 純正の「Progress bar」プラグイン

実は、Bubble でも純正の Progress bar は公開されていて、パーセンテージのプロパティを設定するだけで、簡単に進捗バーを導入することができます。手軽に利用できるので、既に利用されている方もいらっしゃるかもしれませんね。

f:id:yksmt:20200414125546p:plain

ただ、Bubble 純正の 「Progress bar」プラグインは、ノーコードラボでも オンラインスクール|オンスク!のように使用しているアプリがあるのですが、0%の時にも進捗バーが表示されてしまうなど、細かいところですが気になる点がありました。

f:id:yksmt:20200414130308p:plain

なので、今回は気になる点を解消したシンプルな進捗バーを作成しています。

2. ノーコードラボの「Simple progress bar」

f:id:yksmt:20200416115738g:plain

本プラグインのポイントは Bootstrap4 仕様の進捗バーを作成する点です。

また設定する主なプロパティは以下の7つです。

  1. Percentage:パーセンテージの値
  2. Progress bar color:進捗バーの色
  3. Show percentate text:何パーセントの文字を表示するか
  4. Show text outside bar:文字は進捗バーの外側に表示
  5. Outside font color:進捗バーの外側に表示されるときの文字色
  6. Stripe pattern:進捗バーをストライプ柄にする
  7. Stripe pattern animate:ストライプ柄の時にアニメーションさせる

f:id:yksmt:20200414141709p:plain

2.1 公開URL

bubble.io

3. 外部ファイルの導入方法

では、早速プラグインの中身についてご紹介したいと思います。もしプラグイン作成が初めての方は「Bubble で自作のプラグインを作成してみよう!」や「Bubble で「縦書き」プラグインを作成してみた」を先に読むことを おすすめします。

今回は、前項で触れた通り Bootstrap4 の Progress を導入します。introduction にあるように、Bootstrap を導入するには、以下のファイルを読み込む必要があります。

3.1 必要ファイル

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

なお、Bubble プラグインでは、上記 JS の1つ目にある jQuery については、Shared タブの Dependencies にある「This plugin uses jQuery3」にチェックを入れることで導入できるので、残りの popper.js と bootstrap.min.js を導入していきます。

f:id:yksmt:20200414140114p:plain

3.2 定義場所

また、今回の外部ファイルを導入する場合の重要なポイントとしては、エンドユーザー(Bubbleで作成したアプリを使用するユーザー)が見ている画面と、Bubble アプリの開発者が使用する Bubbleエディターの両方に定義する必要があるという点です。

具体的には、前者のエンドユーザーが見ている画面は、Code initialize と Code update で定義した内容が実行され、後者の Bubbleエディターでは、Code preview で定義した内容が実行されることになります。その為、定義についても以下2項目で解説します。

3.2.1 Code initialize と Code update 時の定義

Elements タブの Element code に上記で紹介した、jQuery を除くコードをペーストします。

f:id:yksmt:20200414125454p:plain

3.2.2 Code preview 時の定義

Bubble アプリの開発者が使用する Bubbleエディターは構造上 iframe 内に表示されるため、直接 ヘッダー部分に付け加えていきます。

//load bootstrap in iframe
var script = document.createElement("script");
script.setAttribute("src", "https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js");
script.setAttribute("integrity", "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo");
script.setAttribute("crossorigin", "anonymous");
$("head").append(script);

f:id:yksmt:20200414150120p:plain

3.3 Bootstrap クラスを設定

Bootstrap の導入ができれば、あとは Code update などでも Bootstrap のクラスを使用できるので、必要なクラスやプロパティを設定していくことが可能になります。

f:id:yksmt:20200414150505p:plain

4. 参考URL

blog.nocodelab.jp

blog.nocodelab.jp

blog.nocodelab.jp

5. まとめ

いかがでしたか?今回はノーコードラボの新作プラグイン「Simple progress bar」についてご紹介しました!ぜひお試しくださいね。では、次回もどうぞお楽しみに!