【ノーコード】Unqork でBitbucket のデータを連携利用する方法を徹底解説



Unqork（www.unqork.com/）は誰でも簡単に作れるクラウドベースのノーコードアプリ開発プラットフォームです。フォーム画面とワークフロー画面を活用して、業務プロセスをノーコードで作成できるのが特徴です。Unqork では、外部サービスをデータソースに使用することが可能です。
本記事では、Bitbucket のデータをUnqork でテーブルとしてインポートする方法を説明します。

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなBitbucket OData サービスを作成していきましょう。

Bitbucket への接続

Unqork からBitbucket のデータを操作するには、まずBitbucket への接続を作成・設定します。

1. API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
2. 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Bitbucket」を選択します。
3. 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
   CData コネクタの追加方法はこちら >>
4. それでは、Bitbucket への接続設定を行っていきましょう！

5. ほとんどのクエリでは、ワークスペースを設定する必要があります。唯一の例外は、Workspacesテーブルです。このテーブルはこのプロパティの設定を必要とせず、クエリを実行すると、Workspaceの設定に使用できるワークスペーススラッグのリストが提供されます。このテーブルにクエリを実行するには、スキーマを'Information'に設定し、SELECT * FROM Workspacesクエリを実行する必要があります。

   Schemaを'Information'に設定すると、一般的な情報が表示されます。Bitbucketに接続するには、以下のパラメータを設定してください。

   • Schema: ワークスペースのユーザー、リポジトリ、プロジェクトなどの一般的な情報を表示するには、これを'Information'に設定します。それ以外の場合は、クエリを実行するリポジトリまたはプロジェクトのスキーマに設定します。利用可能なスキーマの完全なセットを取得するには、sys_schemasテーブルにクエリを実行してください。
   • Workspace: Workspacesテーブルにクエリを実行する場合を除き、必須です。Workspacesテーブルへのクエリにはこのプロパティは必要ありません。そのクエリはWorkspaceの設定に使用できるワークスペーススラッグのリストのみを返すためです。

   Bitbucketでの認証

   BitbucketはOAuth認証のみをサポートしています。すべてのOAuthフローからこの認証を有効にするには、カスタムOAuthアプリケーションを作成し、AuthSchemeをOAuthに設定する必要があります。

   特定の認証ニーズ（デスクトップアプリケーション、Webアプリケーション、ヘッドレスマシン）に必要な接続プロパティについては、ヘルプドキュメントを必ず確認してください。

   カスタムOAuthアプリケーションの作成

   Bitbucketアカウントから、以下のステップを実行します。

   1. 設定（歯車アイコン）に移動し、ワークスペース設定を選択します。
   2. アプリと機能セクションで、OAuthコンシューマーを選択します。
   3. コンシューマーを追加をクリックします。
   4. カスタムアプリケーションの名前と説明を入力します。
   5. コールバックURLを設定します。
      • デスクトップアプリケーションとヘッドレスマシンの場合、http://localhost:33333または任意のポート番号を使用します。ここで設定するURIがCallbackURLプロパティになります。
      • Webアプリケーションの場合、信頼できるリダイレクトURLにコールバックURLを設定します。このURLは、ユーザーがアプリケーションにアクセスが許可されたことを確認するトークンを持って戻るWebの場所です。
   6. クライアント認証情報を使用して認証する予定の場合、これはプライベートコンシューマーですを選択する必要があります。ドライバーでは、AuthSchemeをclientに設定する必要があります。
   7. OAuthアプリケーションに与える権限を選択します。これにより、読み取りおよび書き込みできるデータが決まります。
   8. 新しいカスタムアプリケーションを保存するには、保存をクリックします。
   9. アプリケーションが保存された後、それを選択して設定を表示できます。アプリケーションのKeyとSecretが表示されます。これらを将来の使用のために記録してください。Keyを使用してOAuthClientIdを設定し、Secretを使用してOAuthClientSecretを設定します。
6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

ほとんどのクエリでは、ワークスペースを設定する必要があります。唯一の例外は、Workspacesテーブルです。このテーブルはこのプロパティの設定を必要とせず、クエリを実行すると、Workspaceの設定に使用できるワークスペーススラッグのリストが提供されます。このテーブルにクエリを実行するには、スキーマを'Information'に設定し、SELECT * FROM Workspacesクエリを実行する必要があります。

Schemaを'Information'に設定すると、一般的な情報が表示されます。Bitbucketに接続するには、以下のパラメータを設定してください。

• Schema: ワークスペースのユーザー、リポジトリ、プロジェクトなどの一般的な情報を表示するには、これを'Information'に設定します。それ以外の場合は、クエリを実行するリポジトリまたはプロジェクトのスキーマに設定します。利用可能なスキーマの完全なセットを取得するには、sys_schemasテーブルにクエリを実行してください。
• Workspace: Workspacesテーブルにクエリを実行する場合を除き、必須です。Workspacesテーブルへのクエリにはこのプロパティは必要ありません。そのクエリはWorkspaceの設定に使用できるワークスペーススラッグのリストのみを返すためです。

Bitbucketでの認証

BitbucketはOAuth認証のみをサポートしています。すべてのOAuthフローからこの認証を有効にするには、カスタムOAuthアプリケーションを作成し、AuthSchemeをOAuthに設定する必要があります。

特定の認証ニーズ（デスクトップアプリケーション、Webアプリケーション、ヘッドレスマシン）に必要な接続プロパティについては、ヘルプドキュメントを必ず確認してください。

カスタムOAuthアプリケーションの作成

Bitbucketアカウントから、以下のステップを実行します。

1. 設定（歯車アイコン）に移動し、ワークスペース設定を選択します。
2. アプリと機能セクションで、OAuthコンシューマーを選択します。
3. コンシューマーを追加をクリックします。
4. カスタムアプリケーションの名前と説明を入力します。
5. コールバックURLを設定します。
   • デスクトップアプリケーションとヘッドレスマシンの場合、http://localhost:33333または任意のポート番号を使用します。ここで設定するURIがCallbackURLプロパティになります。
   • Webアプリケーションの場合、信頼できるリダイレクトURLにコールバックURLを設定します。このURLは、ユーザーがアプリケーションにアクセスが許可されたことを確認するトークンを持って戻るWebの場所です。
6. クライアント認証情報を使用して認証する予定の場合、これはプライベートコンシューマーですを選択する必要があります。ドライバーでは、AuthSchemeをclientに設定する必要があります。
7. OAuthアプリケーションに与える権限を選択します。これにより、読み取りおよび書き込みできるデータが決まります。
8. 新しいカスタムアプリケーションを保存するには、保存をクリックします。
9. アプリケーションが保存された後、それを選択して設定を表示できます。アプリケーションのKeyとSecretが表示されます。これらを将来の使用のために記録してください。Keyを使用してOAuthClientIdを設定し、Secretを使用してOAuthClientSecretを設定します。

API Server のユーザー設定

次に、API Server 経由でBitbucket にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

1. 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
2. 次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
3. その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Bitbucket 用のAPI エンドポイントの作成

ユーザーを作成したら、Bitbucket のデータ用のAPI エンドポイントを作成していきます。

1. まず、「API」ページに移動し、 「 テーブルを追加」をクリックします。
2. アクセスしたい接続を選択し、次へをクリックします。
3. 接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でBitbucket への接続を設定してユーザーを作成し、API Server でBitbucket データのAPI を追加しました。これで、OData 形式のBitbucket データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

Unqork でBitbucket のデータに連携して一覧画面を作成

Unqork でBitbucket のデータを作成する構成

Unqork でBitbucket に連携する一覧表示画面をModule として作成します。Unqork の一覧画面で使用するコンポーネントは次のようになります：

• Initializzer:画面表示時にPluginを実行します。
• Plugin:API Server からデータを取得し、Hidden Componentに格納します。
• HiddenPluginから取得したデータを格納します：
• ViewGrid:Hidden Componentに格納されたデータを元に、一覧画面を表示します。

Bitbucket のデータのServices Administration への登録

• 事前準備として Unqork の Plug-in から API Server に対して接続ができるようにサービス情報を登録します。右上の「Settings」から「Administration」をクリックし、「Integration」の「Services Administration」を選択します。
• Services Administration 画面で、以下の項目を設定してAPI Server 経由でBitbucket に接続します。
  • Service Title：例）CData API Server。任意のサービスタイトルを指定します。
  • Service name：例）cdataapiserver。任意のサービス名を指定します。
  • Service protocol + host：例）http://XXX.ap-northeast-1.compute.amazonaws.com:8153/api.rsc/。API Serverのサービスディレクトリエンドポイントを指定します。
  • Type of authentications：Basic AuthBasic Authを選択します。
  • Username：例）admin。API Serverで作成したAPIアクセスユーザーのIDを指定します
  • Password：例）token。API Serverで作成したAPIアクセスユーザーの認証 Tokenを指定します。

Workspace の作成

次に、今回のModule を作成するためのWorkspace を作成します。「＋Create Workspace」をクリックし、任意の名前でWorkspace を作成します。

一覧画面用のModule の作成

それでは一覧画面を作っていきましょう。

• 「＋Create App」をクリックし、任意の「App Name」と「App Path」を入力します。前述の通り、今回はModule で作成するので「App Type」は「Module」を指定して、Create をクリックします。

• 一覧画面では、まずAPI から取得したデータを格納するために「Hidden」Component を配置します。検証時にはデータを正常に取得できているか確認するために、Text Field で作成するのも良いでしょう。任意の「Property ID」と「Canvas Label Text」を指定して保存します。

• データ格納用のComponent を作成した後、API Server にリクエストを行うための 「Plug-in」Component を配置します。任意の「Property ID」と「Canvas Label Text」を指定します。今回は「GetCustomers」としました。

• Plug-in では取得したデータを格納するためのマッピングを行います。Property ID には、事前に作成したHidden Component の名前を入力し、「Mapping」には value を指定します。

• あとは「Data」タブにてAPI Server へのリクエスト内容を設定します。「External」を選択し、事前にServices Administration で登録した、API Server の Service を選択します。
• その後、エンドポイントがData Source URL に表示されるので、取得したい対象のリソースURL を指定します（リソースURL はAPI Server の以下の画面から確認できます）。合わせてRequest Type で「Get」を指定して保存します。

• 次に、一覧画面のUI となる「View Grid」を配置しましょう。任意の「Label」と「Property Name」を指定します。今回は「CustomerView」としました。

• View Grid では、まずデータ元となる Component との紐付けを「Inputs」にて行います。Plug-in 経由で取得したデータはHidden Component に格納されているので、その Component をここで指定します。その後表示するカラムをDisplay で定義します。「ID」「NAME」「EMAIL」をそれぞれ「id」と「heading」に指定して、保存します。

• 最後に画面を表示した時に、Plug-in が呼ばれるように「Initializer」Componentを配置します。まず任意の「Canvas Label Text」を指定します。

• 「Trigger Type」では、画面表示時の実行を行う「New Submission」を指定、「OUTPUTS」にて、実行するPlug-in を指定します。Property IDでは、「GetCustomers」を指定し、Type では「trigger」、Value には「GO」を指定します。

• Module を保存して「Preview Module」で動作確認をしてみましょう。以下のように一覧画面が表示されれば完了です。これでBitbucket のデータをUnqork のワークフローでテーブルデータとして扱うことが可能になります。

まとめと30日の無償評価版のご案内

このように Bitbucket 内のデータをUnqork で利用することができるようになります。CData API Server は、30日の無償評価版があります。是非、お試しいただき、Unqork からのデータ参照を体感ください。