業務アプリ構築ツールコンテキサーで、Webflow と連携したアプリを作成する方法

杉本和也
杉本和也
リードエンジニア
コンテキサーでWebflow と連携したアプリを作成する方法を紹介します。



コンテキサーとは、株式会社アプストウェブが提供する業務アプリケーションを構築のための純国産ノンプログラミング開発ツールです。CSVファイルやクラウドデータベース、ODBC 経由でのRDBのデータをもとに、ノンプログラミングで様々な業務アプリケーションを短時間で開発できるのが特徴です。

コンテキサーではRDBと連携する仕組みが標準提供されており、この機能を介してSQL ServerやMySQLなどにアクセスできるようになっています。そして、この機能とCData ODBC Driver for API を組み合わせることで、各種クラウドサービスのAPIにアクセスすることができるようになります。

コンテキサー連携アプリ

CData ODBC ドライバとは？

CData ODBC ドライバは、以下のような特徴を持った製品です。

  1. Webflow をはじめとする、CRM、MA、会計ツールなど多様なカテゴリの270種類以上のSaaS / オンプレデータソースに対応
  2. 多様なアプリケーション、ツールにWebflow のデータを連携
  3. ノーコードでの手軽な接続設定
  4. 標準SQL での柔軟なデータ読み込み・書き込み

CData ODBC ドライバでは、1.データソースとしてWebflow の接続を設定、2.Active Query Builder 側でODBC Driver との接続を設定、という2つのステップだけでデータソースに接続できます。以下に具体的な設定手順を説明します。

CData ODBC ドライバのインストールとWebflow への接続設定

まずは、本記事右側のサイドバーからAPI ODBC Driver の無償トライアルをダウンロード・インストールしてください。30日間無償で、製品版の全機能が使用できます。

インストール後、ODBC DSN（データソース名）で接続プロパティを設定します。これはドライバーのインストールの最後の手順にあたります。Microsoft ODBC Data Source Administrator を使用して、ODBC DSN を作成および設定できます。

認証

Webflow は、サイト、CMS コレクション、e コマースデータ、その他のリソースへの安全なアクセスを確保するために、OAuth 2.0 認証を使用します。この認証方式により、Webflow ワークスペースに安全に接続し、適切な認可のもとでリソースを管理できます。

OAuth 2.0 のセットアップと設定

ステップ 1：Webflow OAuth アプリケーションの作成

OAuth 認証をセットアップするには、以下のステップで進めます：

  1. Webflow Developer Portal にアクセスします
  2. Webflow アカウントの「Apps & Integrations」に移動します
  3. 「Register an App」をクリックして新しい OAuth アプリケーションを作成します
  4. アプリケーション名、説明、リダイレクト URI（CallbackURL）を設定します
  5. 接続で使用する Client ID と Client Secret をコピーします

必須の接続プロパティ

  • AuthScheme：OAuth に設定します（必須）
  • OAuthClientId：Webflow OAuth アプリケーションの Client ID（必須）
  • OAuthClientSecret：Webflow OAuth アプリケーションの Client Secret（必須）
  • CallbackURL：OAuth アプリケーションで指定したリダイレクト URI（必須）
  • InitiateOAuth：トークンを自動管理するには GETANDREFRESH に設定します（推奨）

必須の OAuth スコープ

Webflow API プロファイルでは、以下の OAuth スコープが必要です：

  • sites:read - サイト情報および設定への読み取りアクセス
  • pages:read - サイトページへの読み取りアクセス
  • cms:read - CMS コレクションおよびアイテムへの読み取りアクセス
  • forms:read - フォームおよびフォーム送信への読み取りアクセス
  • assets:read - メディアアセットおよびフォルダーへの読み取りアクセス
  • ecommerce:read - 製品、注文、在庫への読み取りアクセス
  • authorized_user:read - 認可されたユーザーへの読み取りアクセス

Webflow のデータをコンテキサーに連携

以下の手順で、コンテキサーでのアプリ作成を進めます。

  1. アプリを作る前に、データベースへの接続情報を追加します。「データ」タブから「データベース」をクリックします。 データベースをコンテキサーに追加（１）
  2. 以下のようにデータベース接続設定を追加する画面が表示されるので、「新規」ボタンをクリックし、先程作成したODBC 接続のDSN 名を入力します。 データベースをコンテキサーに追加（２）
  3. エンジンはCData Driver と相性の良いMySQL ベースで指定します。それ以外のサーバやデータベースなどの情報は指定不要です。 接続情報を指定
  4. 接続確認を行い、「接続に成功しました」というメッセージが表示されればOKです。「登録」をクリックしてデータベース接続情報を保存しましょう。

パネルの追加

データベース接続情報の追加が完了したら、アプリを作成していきます。今回はシンプルにWebflow の一覧を表示するアプリを作成します。

  1. 「定義」→「パネル追加」で「データベースから」を選択し、先程のDSN名でテーブルを一覧から選択します。今回はWebflow のSites を指定しました。 取得したいテーブルを指定
  2. 「読み込みする」ボタンをクリックします。
  3. パネルのフォーマットは任意ですが、今回は新しいシートに表形式で追加しました。
  4. これで以下のようにパネルが展開され、ODBC を経由してWebflow のデータがシームレスに読み込まれました！ 取得したテーブルからパネルを作成

おわりに

このようにCData ODBC ドライバと併用することで、270を超えるSaaS、NoSQL データをコンテキサーからコーディングなしで扱うことができます。30日の無償評価版が利用できますので、ぜひ自社で使っているクラウドサービスやNoSQL と合わせて活用してみてください。

CData ODBC ドライバは日本のユーザー向けに、UI の日本語化、ドキュメントの日本語化、日本語でのテクニカルサポートを提供しています。

はじめる準備はできましたか？

API Driver で Webflow のライブデータに接続

Webflow に接続

この記事の内容

関連記事