Power Apps でBitbucket のデータを連携利用

こんにちは！ドライバー周りのヘルプドキュメントを担当している古川です。

Microsoft PowerApps は、データに連携するモバイルおよびタブレット向けアプリをドラッグ＆ドロップとリッチな関数で実現します。CData API ServerとADO.NET Provider for Bitbucket (もしくは250+ の他のADO.NET Providers)を組み合わせて使い、PowerApps のリモートデータソースへの連携機能を拡張することができます。PowerApps のCommon Data Service に別途データをコピーする必要はありません。CData API Server は、Bitbucket のデータにデータベースのようなアクセスを可能にし、SaaS API やNoSQL をインメモリのSQL-92 エンジンで操作できるようにします。

CData API Server は、Swagger のメタデータ標準をサポートします。Azure App Service、Microsoft Flow、およびPowerApps でSwagger メタデータからのUI 生成やコード生成が可能です。Swagger 定義を使えば、PowerApps からBitbucket に連携する関数が生成できます。本記事では、それらの関数をPowerApps から使って、リモートのBitbucket に連携する方法を説明します。

CData API Server とは？

CData API Server は、以下のような特徴を持ったAPI 開発ツールです。

• あらゆるデータソースからAPI を生成：SQL Server、MySQL、Oracle、PostgreSQL、DB2 などのRDB、Excel、CSV、Google スプレッドシートなどCData の充実したコネクタライブラリを利用できます。
• 主要なデータ形式に対応：OData、REST、JSON、CSV / TSV など、主要な形式に対応しています。
• 一元管理でAPI を効率運用：単一の管理プラットフォーム上でAPI の更新、停止、共有が可能です。
• ノーコードでシンプルな設定：GUI ベースのインターフェースを使用して、複雑なコーディングなしでAPI を作成・セキュアに公開できます。

詳しくは、こちらの製品資料をご確認ください。

API Server の設定

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

デプロイ

API Server は内蔵のJetty サーバー上で動作します。Windows をお使いの場合は、スタンドアロンサーバーとして起動するか、IIS に組み込んで使用することが可能です。また、お使いのJava サーブレットコンテナにAPI Server のWAR ファイルを配置して実行することもできます。具体的なセットアップ方法については、こちらのヘルプドキュメントをご覧ください。

Bitbucket への接続

Salesforce Connect から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 のエンドポイントを表示およびコピーできます。

また、CORS を有効にして［Server］とクリックして次のセクションを定義する必要があります。［*］なしですべてのドメインを許可するオプションを選択することもできます。

1. Access-Control-Allow-Origin:値を［*］またはAPI Server を呼び出すドメインに設定します。
2. Access-Control-Allow-Methods:値を［GET,PUT,POST,OPTIONS］または使用する必要のあるHTTP メソッドに設定します。
3. Access-Control-Allow-Headers:［x-ms-client-request-id, authorization, content-type］に設定します。

最後に、URL の一部としてauthtoken を渡すことにより、ユーザーが認証できるようにAPI Server を構成する必要があります。そのために、インストール先のwww/app_data フォルダに移動し、settings.cfg ファイルを変更して[Application] セクションに次の行を追加します。

Swagger メタデータの取得

メタデータを使用してCustom API 接続を作成します。Swagger 定義を取得するには、ブラウザで次の要求を行い、結果のJSON ファイルを保存します。

API Server を介してBitbucket に接続

以下のステップで、リモートBitbucket を検索する簡単なアプリを作成する方法を説明します。

1. Microsoft Power Apps で、［Custom connectors］をクリックします。
2. ［Create custom connector］をクリックし、［Import an OpenAPI］ファイルを選択します。
3. コネクタに名前を付け、JSON ファイルを参照して［Continue］をクリックします。
4. 関連する一般情報を入力し、ベースURL が/api.rsc/@myauthtoken (myauthtoken はconfigure API Server ユーザーのAuthToken) の形式であることを確認して［Continue］をクリックします。
5. Authentication タイプには［No authentication］を選択します。［Continue］をクリックします。
6. アクションと参照の定義を確認し、［Create connector］をクリックします。
7. コネクタをテストするには、新しい接続を作成する必要があります。［Test］をクリックし、［Connections］の下の［New Connection］をクリックして［Create］を選択します。
8. ［Custom connectors］メニューからコネクタに戻り、［Test］をクリックします。ここから使用可能な操作をテストできます。

データソースをPowerApp に接続

以下のステップに従って、PowerApp からBitbucket に接続します。

1. Power Apps のメインメニューから［Create an app］をクリックし、オンプレミスまたはクラウドのPowerApp Studio を選択します。
2. 空のアプリを選択し、携帯レイアウトまたはタブレットレイアウトのどちらかを選択します。
3. ［View］タブで［Data Sources］をクリックし、［Add Data Source］をクリックします。
4. 作成した接続をクリックしてコネクタをテストします。

ギャラリーの事前設定

以下のステップに従って、Bitbucket を検索できる簡単なアプリを作成します。Power Apps の数式を使用してBitbucket の行をギャラリーコントロールの行にバインドします。

1. ［View］タブで［Gallery］->［Vertical］をクリックしてギャラリーを追加します。

2. ギャラリーを選択し、ギャラリー設定の［Advanced］タブでギャラリーの［Items］プロパティをBitbucket に割り当てます。以下の式を使用すると、Issues テーブルの例にアクセスできます。

   ForAll(CDataSwaggerAPI.getAllIssues().value, {myTitle: Title, myContentRaw: ContentRaw})

3. 要素をクリックし、［Text］プロパティ(UI 要素の［Advanced］タブ) をThisItem.myTitle またはThisItem.myContentRaw に設定してBitbucket 列をUI 要素に割り当てます。

   

Bitbucket のデータの検索

ギャラリーに表示されるレコードをフィルタリングするには、［Screen］にTextInput を追加し、TextInput の［Text］プロパティをクリアしてギャラリーの［Items］プロパティを以下のような式にます。また、必要に応じてTextInput1 をギャラリーのTextInput コントロール名に置き換えます。

この式は、API Server がリモートBitbucket に対して実行するOData クエリを作成し、最初にすべてのレコードをアプリに取り込むことをせずに現在のデータに対して検索が実行されるようにします。 サポートされているOData の詳細については、API Server のヘルプドキュメントを参照してください。

Bitbucket のデータの編集

以下のステップに従って、ギャラリーで選択されたBitbucket レコードのフィールドを表示する編集可能な画面をロードします。

1. ［Insert］タブで、［New Screen］->［Blank］とクリックし、スクリーンの名前を［Details］に設定します。
2. ギャラリーを新しいスクリーンに結び付けます。ギャラリーの最初のエントリで矢印ボタンを選択し、［Advanced］プロパティの［OnSelect］フィールドに以下のように入力します。
   Navigate( Details, None )
3. ［Details］スクリーンの［Insert］タブで、［Id］と［Id］値の別のラベルを追加します。［Text］プロパティをBrowseGallery.Selected.Id に設定します。

各カラムについて、以下のことを行う必要があります。Custom API の場合、フォーム要素はAPI Server に対してどのリクエストを作成する必要があるかを検出できないため、データ変更式を手動で書く必要があることに注意してください。

1. フィールドのラベルを追加します。
2. ［Text］メニューからのテキスト入力を画面に追加し、text プロパティをギャラリーから選択したアイテムの値に設定します。(例: BrowseGallery.Selected.myTitle).

アプリに基本的な更新機能とナビゲーションを提供するには、［Submit］ボタンと［Back］ボタンを追加します。

1. ［Submit］ボタンでOnChange プロパティを以下のように設定します。 CDataSwaggerAPI.updateIssues(BrowseGallery.Selected.myId,BrowseGallery.Selected.myId,{Title:TextInput1.Text,ContentRaw:TextInput2.Text})
2. ［Back］ボタンの場合は、［OnSelect］フィールドを以下のように設定します。 Navigate( BrowseScreen, None )

これで、モバイルアプリまたはタブレットアプリでBitbucket を参照、検索、更新できるようになりました。