【Bubble】ApyHubのAPIでアップロード動画からサムネイルを生成する方法

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleでアップロードした動画ファイルからサムネイルを生成する方法をご紹介します。

サムネイル生成には、ApyHub(エーピーワイハブ)のGenerate Image Thumbnails APIを活用します!

目次
無料で資料をダウンロード

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

「ファイルを選択」ボタンから動画をアップロードすると、動画から自動的にサムネイル画像を生成されるのが今回の実装イメージです。

上のサンプル動画の動画のアップロードがノロノロと遅くて申し訳ないです…。

実装手順

以下の手順で実装します。

  1. ApyHubのアカウントを作成し、APIキーを発行する
  2. プラグイン「API Connector」をインストールし、ApyHubのAPIを設定する
  3. ファイルがアップロードされたときのワークフローでサムネイル生成APIを呼び出す

ApyHubのアカウントを作成し、APIキーを発行する

ApyHubの公式サイトをみる

まずは、API管理プラットフォーム「ApyHub」の公式サイトからアカウントを作成し、APIキーを新規発行しましょう。

プラグイン「API Connector」をインストールし、ApyHubのAPIを設定する

Bubbleで外部サービスと接続するのに必要なプラグイン「API Connector」をインストールしていない方はプラグイン追加ページから検索してインストールしてください。

プラグインのインストールが完了したら、プラグインタブからAPI Connectorを開き、「Add another API」ボタンをクリックします。

次に、API Nameに、適切な名前(例: Generate Thumbnails API、サムネイル生成など)を入力し、以下の項目も埋めます。

項目
AuthenticationNone or self-handled

基本的な設定内容は公式ドキュメントに記載がありますのでそちらも合わせて確認してください。

Generate Image Thumbnails APIの公式ドキュメント

次に、New API Callを追加し、以下の詳細を入力します。

項目
NameGenerate Thumbnailなど分かりやすい名前
Use asAction
Data typeImage
MethodPOST
URL(エンドポイント)https://api.apyhub.com/generate/image-thumbnail/url/file

次に、ヘッダーセクションとパラメータを入力します。

項目
content-typeapplication/json
apy-token発行したAPIキーを入れる
Body typeJSON
video_url(Body Parameters)https://assets.apyhub.com/samples/sample.mp4

Body欄には以下のように生成するサムネイルのサイズや動的に入るvideo_urlのパラメータを入れます。

{
    "video_url": "<video_url>",
    "time": "1",
    "size": "106x157"
}

最後に、Initialize callをクリックして、API設定が正しいかテストします。問題がなければ、SaveボタンをクリックしてAPI設定は完了です!

ファイルがアップロードされたときのワークフローでサムネイル生成APIを呼び出す

最後に、動画ファイルがアップロードされたときのワークフローで先程設定したサムネイル生成のAPIを上図のように呼び出します。

そのあとは後続のワークフローでResult step of 1(API…)を使ってよしなに、カスタムステートなどに生成したサムネイルをセットするなどしてください。

無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次