先日、NoCodeサービスのbubbleを使って、ソーシャルブックマークサービスのScrapbooksを作りました。今回は、このサービスに実装した機能のなかで、情報が見つからず特に困った、Bubbleでのリンクプレビューの実装方法について書こうと思います。
本題に行く前に、経緯というか、前置きを書かせてください。
こちらのソーシャルブックマークサービス。基本機能としては、外部サイトのURLからサムネイルやタイトルを取得して、保存。ボードという概念を使って、ブックマークを自分好みに整理し、有益情報を他人とシェアもできるという至ってシンプルなものです。（ピンタレストのテキスト版とイメージするとわかりやすいかも）
永久保存版のブログ記事をブックマークしたり↓
見返したいお役立ちツイートもブックマークできる↓
保存したブックマークはボードという概念で自分好みに整理できる↓
新しくブックマークする場合は、外部のURLを貼り付け、保存先のボードを選択するだけ。↓（URLからサムネイルやタイトルが自動的に取得します）
上記が、現状の主要機能です。
今回のサービス設計においては、
①手間なくブックマークできるか？（入力項目が多いとか、動作が多いとかは論外）
②ブックマークした情報はみやすいか？（リンク情報しかないは論外。画像とかタイトルとかも表示して一目で中身が思い出せるようにしたい）
③複数あるブックマークの中から、所定のブックマークを見返したい時にすぐ見つけ出せるか？（雑多に保存するだけではダメ。シンプルに整理整頓できる構造になっているか？）
という点が、技術選定する以前に、まず、こだわるべきポイントだと思ってました。
この流れを踏まえて、最適な方法ないかなぁーと調べ・考えた結果、採用したのが「リンクプレビュープラグイン」でした。
リンクプレビュープラグインの導入によって、ブックマーク時に必要な入力情報は、外部サイトのURLとボードの2つまで絞るこむことができました。
※もはやURLをコピーして貼り付けるという動作が手間なので、本当は、Twitterやその他SNSサービスにあるような共有機能を実装したかったのですが、実装方法がわからなくて断念しました。。。
こういうのとか↓
上記は、スマホアプリでしかできないんですかね？私のような非エンジニアだとそもそもの技術的な知見が少ないので、苦労するなぁという事例ですね。
エンジニアの方。Bubbleでより良い実装方針があれば是非教えていただけると嬉しいです。
前置きが長くなりすみません。それでは本題に移ります。
「外部サイトのURLからサムネイルやタイトルを取得し、自社のサイト内で表示する」には、「Link Preview Plugin for Bubble」のプラグインを使えば簡単に実現できます。
このプラグインはLink Preview APIをBubbleで扱うためのものです。
他にも方法はあるかも知れませんが、Bubble Forumなどで英語情報もみましたが、今のところ上記が一般的だと思われます。
完成形はこんな感じです。サンプルを用意しました。
まず、事前準備。
・BubbleでLink Preview Plugin for Bubbleをインストール
・Link Preview APIでアカウントの作成（無料）してください。
Link Preview APIでアカウント作成すると下記のような画面になるので、API keyをコピーしましょう。
BubbleのLink Previewのプラグインに移って、コピーしたAPI keyを”Get Preview - key(path)”に貼り付けます。
事前準備は以上です。
はじめに、Inputフォームを設置します。
次に、imageエレメントを設置。Dynamic Imageの中で、”Insert Dynamic Data”を選択し、”Get data from an external API”をクリックします。
そのあと、API providerで、”Link Preview -Get Preview”を選択。[path]qに、最初に設置した、InputFormのValueが入るようにします。
最後にDynamic Imageで、"’s image"を選択します。これで一通り完了です。Inputに外部URLを入力されると、リンク先の画像が取得されます。
あとは、Textエレメントを2つ設置して、同じ容量で、それぞれに、Link Preview - Get Preview に"’s title"と”’s description”の値が出力されるように登録します。
Previewでテスト動作させて、正常に動けば完成です。
今回使ったLink Preview APIは、無料ですが、無料版ではリクエストに制限があります。
無料版の料金プランをみると"60 Requests/per hour"と書いてあるので、1時間あたり、60リクエストまでしか受け付けないということですね。
個人開発利用であれば、問題なさそうですが、リクエスト数を増やす場合は、課金が必要です。（いずれにしろ安いですが。）
ちなみに、私が作ったソーシャルブックマークサービスのScrapbooksでは、外部のリンクが投稿されたタイミングで、裏側でLink PreviewのAPIが発火させ、リンク先の画像とテキストの値を取得したあと、直接データベースに保存するような設計にしています。
URLのみをデータベースに保存しておいて毎回、フロント側で、リンク先の画像やタイトルを取得するということもできなくはないですが、APIのリクエスト数が多くなってしまうのと、表示速度が遅くなるので、初回の保存の時しかLink Previewは発火しないようにしています。以降の表示はデータベース側で制御しています。
この辺りは、詳しく説明しませんが、そんなに難しくありません。下記のように、WorkFlowでデータ保存する際に、Linkpreviewのそれぞれの値をデータベースに保存するだけです。
以上。だいぶ長くなってしまいましたが、Bubbleはじめ、NoCodeの学習は引き続き継続したいと思います。
英語では情報がけっこうありますが、日本語では細かい使い方の情報はまだまだ少ないので、さらに盛り上がっていくと嬉しく思います！
