BubbleでWordPressのデータを取得する方法!API Connector必須

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

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

ノーコードツール「Bubble」でWordPressのデータを取得する方法を紹介します。

APIでお馴染みの公式プラグイン「API Connector」と、WordPress REST APIを駆使して取得可能です。

Bubbleで作るアプリに、外部サイト(WordPress)の記事データなどを表示させるのはなかなかボリューミーなので、今回の記事ではまず、API ConnectorでWordPress REST APIのエンドポイントを指定して初期化するとこまでを紹介します!

動画解説バージョンはこちら!

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

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

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

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

BubbleでWordPressのデータを取得する手順

以下の手順で取得します。

  1. プラグイン「API Connector」をインストールする
  2. PluginsページでAdd another APIをクリック
  3. APIエンドポイントを入力する
  4. initialize callをクリックしてAPIを初期化する

プラグイン「API Connector」をインストールする

まずは肝心要である、API ConnectorをPluginsの検索ページでインストールします。

一番人気なプラグインなのか、プラグイン検索ページを開いたら初期状態で一番上に表示されます!

PluginsページでAdd another APIをクリック

プラグインインストール完了したら、Bubble左メニューのPluginsページに行き、API Connectorの「Add another API」ボタンをクリックしましょう。

成功すると、API Name「New API」ブロックが出現します。

その中の「expand」をクリックすると、エンドポイントなどを入力するエリアが表示されます!

API Connectorでは基本的にここで諸々の作業を行います。

APIエンドポイントを入力する

次に、APIエンドポイントを「GET」の右隣の入力欄に入れます。

今回はWordPressからデータを取得したいので、WordPressに標準で搭載されているWordPress REST API(以降WP REST API)という優れものをエンドポイントで指定してあげればOKです。

WordPressの記事データを取得するときのWP REST APIのエンドポイントは以下のフォーマットです。

https://ドメイン/wp-json/wp/v2/posts

postsのあとに取得する件数を指定したり、アイキャッチ画像情報を含めたりと様々なオプションパラメーターが用意されていますが今回の記事では割愛します(次回以降の用途別の記事で紹介します!)。

たとえば、弊社のブログ記事のエンドポイントを指定する場合は以下のようにします。

URLを入れた以外は初期状態からいじってません

https://epic-s.co.jp/wp-json/wp/v2/posts

このURLをブラウザで叩くと、添付のようにJSONの記事データが表示されるのが確認できますね。

Chromeでは人間が読める感じではないですが、Firefoxさんだと見やすいように整形してくれるのでおすすめだよ、と懇意にしてもらっているBubbleエンジニアの方がおっしゃってましたね。

initialize callをクリックしてAPIを初期化する

エンドポイントを入力したら最後にinitialize callボタンをクリックしてAPIを初期化しましょう。

これで一旦、WordPressの記事データを取得してBubbleのページに表示する準備は整いました!

次回の記事からは取得したWordPressのデータをBubbleページに表示させていく手順を解説しますので、乞うご期待!

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

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

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

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

    氏名

    法人名

    メールアドレス

    電話番号

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

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