ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

Bubble でリンクプレビューを実装する方法

f:id:yksmt:20220311141618p:plain

みなさん、こんにちは!

今回は、Bubble で LinkPreview というサービスを利用して、Slack や Twitter などでURLを貼り付けた時に表示される、ページのタイトルやディスクリプション、OGP(Open Graph Protocol)を取得するリンクプレビュー機能を実装していきます。

また Link Preview はプランによって料金が発生してしまいますが、リクエスト数に制限がない Zeroqode の Link Info and Preview というプラグイン(有料プラグイン)もありますので、そちらも簡単にご紹介しておきたいと思います!

f:id:yksmt:20220311144026p:plain

Link Preview はとてもシンプルな API サービスで、リクエストした URL のタイトルやディスクリプションなどのプレビュー内容を返却してくれるサービスです。現在の料金プランは、以下の図の通りで(2022/03現在)フリープランは 1時間に60回のリクエストが可能です。今回サンプルとして実装するアプリにおいては、お試しの Free Plan でも十分となっています。

f:id:yksmt:20220311145712p:plain
https://www.linkpreview.net/ より引用

では早速、Link Preview にサインアップしていきましょう。以下のリンクから、Sign up もしくは、Get Started ボタンからサインアップ画面へ遷移します。

www.linkpreview.net

メールアドレスなどを入力して、Register Now ボタンで登録します。

f:id:yksmt:20220311145920p:plain

f:id:yksmt:20220311144203p:plain

登録アドレスにメールが送られてくるので、Go To My Account ボタンから、Link Preview のダッシュボードへと遷移してください。

f:id:yksmt:20220311144346p:plain

以上で Link Preview への登録が完了しました。ここで発行された Your API key を後ほど Bubble 側の設定で使用します。

f:id:yksmt:20220311153426p:plain

2. Bubble アプリの実装

では、アプリを作成してきましょう。出来上がりのイメージは以下のようなページです。

f:id:yksmt:20220311154224p:plain

今回のサンプルでは、Slack や Twitter のようなサービスをイメージして、テキストエリア(MultilineInput)に URLが入力されたら、入力された URL をすべて取得してリンクプレビューを表示していきます。

2.1. Bubble アプリ準備

まずは、New app で新規アプリを作成していただき、プラグインをインストールしていきます。プラグインについては、Link Preview と Toolbox という2種類を使います。

2.2. プラグイン準備

「+ Add Plugins」ボタンから Link Preview と検索してプラグインをインストールしてください。次に、先ほど LinkPreview で取得した Your API key を Get Preview - key (path) に登録します。

f:id:yksmt:20220314162559p:plain

bubble.io

2.2.2. Toolbox プラグインのインストール

次に、同じく「+ Add Plugins」ボタンから、Toolbox と検索してインストールを行います。

bubble.io

Toolbox プラグインについては、ノーコードラボでも幾つか記事に取り上げていますので、良かったらご参考ください。今回は、MultilineInput に入力された文字列から必要な URL だけを切り出したいので、BubbleのToolboxを使ってみよう〜その② でご紹介している Javascript to Bubble と Run Javascript を使用していきます。

blog.nocodelab.jp

また、Toolbox の Run Javascript を使用するにあたり、HTML の ID属性を利用しますので、Settings タブの General にある「Expose the option to add an ID attribute to HTML elements」のチェックをオンにしておいてください。 f:id:yksmt:20220315134435p:plain

以上で、プラグインの準備ができました。

2.3. Design の作成

次に画面を作成していきましょう。まずは、Javascript to Bubble element を配置します。設定値は以下の通りです。

項目
Bubble_fn_suffix message
Trigger event オフ
Publish value オン
Value type text
Value is a list オン

上記で「Workflow 側で設定する Run Javascript で Bubble_fn_message という名前の Function を利用して、text 型の List を返却値として受け取る」という意味の設定ができました。

f:id:yksmt:20220315135321p:plain

次に、ユーザーがテキストや URL が入力できるように、MultilineInput element を配置します。ここでは、element の名前を MultilineInput Message としています。

f:id:yksmt:20220315141950p:plain

MultilineInput Message には ID Attribute を設定しておきます。ここでは message としました。

f:id:yksmt:20220315142302p:plain

次に リンクプレビューを表示する Repeating group を配置していきます。Repeating group を使用するのは、複数 URL に対応している為です。もう少し詳しく言うと、Javascript to Bubble からの返却値は、先の設定で Value is a list のチェックをオンにして List 型にしています。 ということで、Data source には Javascript から取得した URL の一覧を設定することになります。ここでは JavascripttoBubble A's value list となります。

f:id:yksmt:20220315144135p:plain

Repeating group 内に Group を一つ配置して、Type of content を LinkPreview プラグインの Get Preview (Link Preview) とします。Data source で Get data from an external API を選択し、API Provider を Link Preview - Get Preview、(path)q を Current cell's text と設定して、JavascripttoBubble A's value list から取得した text 型 の URL文字列を LinkPreview プラグイン に引き渡します。

f:id:yksmt:20220315145747p:plain

配置した Group 内に、取得した LinkPreview の title、disctiption、image をそれぞれ Text や image element を使って配置します。

f:id:yksmt:20220315153603p:plain

f:id:yksmt:20220315153642p:plain

f:id:yksmt:20220315153718p:plain

以上で、画面の作成が終わりました。

2.4. Workflow の作成

次に workflow を作成していきます。Custom event を一つ作成して、Step1 に Run javascript の Action を設定していきます。ここでは、Custom event の名前を Get LinkPreview としています。

f:id:yksmt:20220315154806p:plain

次に Run Javascript 内に記述するコードを設定します。 こちらは、以下のコードをそもままコピペでご利用いただけます。ただし、ID Attribute の名前などを、サンプルとは異なるテキストで設定された場合は、コード内においても、適宜変更してご利用ください。

//URLの正規表現を設定
const regexp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// ID Attribute 経由で MultilineInput の文字列を取得
var message = document.getElementById("message");
var str = message.value;
// 文字列から URL を切り出し
var array = [...str.matchAll(regexp)];
console.log(array); // DevTool
// text 型の List に変換
var urls = [];
for(var i = 0; i < array.length; i++) {
    urls.push(array[i][0]);
}
console.log(urls); // DevTool
// Bubble に切り出したURLを引き渡す
bubble_fn_message(urls);

なお、コード内の「//」については、補足説明のコメントになりますので、不要の場合は削除してください。

次に、MultilineInput の値が変更された場合に Event が発火するように、An input's value is changed から Element で MultilineInput を選択します。Step1 に先ほど作成した Custom event(Get LinkPreview) を Trigger しておきましょう。

f:id:yksmt:20220315160939p:plain

作成したサンプルでは、Page load 時にも Trigger しました。

f:id:yksmt:20220315161332p:plain

以上で、workflow の設定が完了しました。

2.5. プレビューしてみよう

f:id:yksmt:20220315161455p:plain

では、実際に Preview して動作確認してみてくださいね。いかがですか?うまく動作しましたでしょうか?

では、最後に有料プラグインにはなりますが、Zeroqode の Link Info and Preview ついても、少しだけ触れておきたいと思います。プラグインの価格は、$5/month or $25 once(2022/03現在)となっています。

bubble.io

3.1. プラグインについて

先に紹介した Link Preview API と比較すると、プラグイン自体は有料ですが、今のところリクエスト数に制限が無いこと、また Link Preview API にはない、URLが有効かどうかの判断や、画像も複数枚取得できるというメリットがありそうです。

使い方もとても簡単で、LinkPreview element を配置して、URL を指定するだけで、リンクプレビューを表示してくれます。

f:id:yksmt:20220317151637p:plain
Zeroqode demo editor より引用

固定のレイアウトで良ければ、Standard UI を yes にすることで完結でき、レイアウトを自由に変更したい場合は、Standard UI を no にしておいて、取得したプレビュー内容を、LinkPreview's Title といった感じで設定するだけです。

f:id:yksmt:20220317152712p:plain
Zeroqode の demo editor より引用

なので、このプラグインにおいても、先ほどの Run javascript と Repeating group をうまく使うことで、Link Preview API で作成した時と同じように、複数URLに対応したリンクプレビューを実装できるのではないかと思っています。もし、試された方がいらっしゃいましたら、是非コメント欄などで教えてくださいね!

3.2. 参考URL

Zeroqode プラグインページ

zeroqode.com

デモサイト

https://zeroqode-demo-14.bubbleapps.io/link-previewzeroqode-demo-14.bubbleapps.io

サンプルエディタ

bubble.io

まとめ

今回は、Bubble で Slack や Twitter のようなリンクプレビューを実装する方法を、LinkPreview API と Zeroqode プラグインの2つご紹介しました。チャットアプリなどの実装を予定されている方は、是非試してみてくださいね! では、次回もどうぞお楽しみに~!