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

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

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

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

• 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
• 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
• リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

EPICs株式会社の特徴

• 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
• 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
• マーケティングまで支援が可能

実装イメージ

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

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

実装手順

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

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

＞ ApyHubの公式サイトをみる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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