【ノーコード】Unqork でOutlook のデータを連携利用する方法を徹底解説
Unqork(www.unqork.com/)は誰でも簡単に作れるクラウドベースのノーコードアプリ開発プラットフォームです。フォーム画面とワークフロー画面を活用して、業務プロセスをノーコードで作成できるのが特徴です。Unqork では、外部サービスをデータソースに使用することが可能です。
本記事では、Outlook のデータをUnqork でテーブルとしてインポートする方法を説明します。
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなOutlook OData サービスを作成していきましょう。
Outlook への接続
Unqork からOutlook のデータを操作するには、まずOutlook への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Outlook」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、Outlook への接続設定を行っていきましょう!
-
OAuth 認証の設定
Microsoft Graph API は認証に OAuth 2.0 を使用します。OAuth 認証情報(Client ID と Client Secret)を取得するには、Microsoft Azure Portal でアプリケーションを登録する必要があります。
OAuth 認証情報の取得
- Azure Portal にログインします。
- Azure Active Directory > App registrations に移動します。
- New registration をクリックして新しいアプリケーションを作成します。
- アプリケーション名を入力し、適切なアカウントの種類を選択します。
- Redirect URI をアプリケーションのコールバック URL に設定します(デスクトップアプリの場合は http://localhost:33333 など)。
- Register をクリックしてアプリケーションを作成します。
- アプリケーションの概要ページで Application (client) ID をコピーします。これが OAuthClientId になります。
- Certificates & secrets に移動して、新しいクライアントシークレットを作成します。
- クライアントシークレットの値をコピーします。これが OAuthClientSecret になります。
- API permissions に移動して、必要な Microsoft Graph API の権限を追加します:
- Mail.Read - メールメッセージへのアクセス用
- Contacts.Read - 連絡先へのアクセス用
- Calendars.Read - カレンダーイベントへのアクセス用
- Tasks.Read - To Do タスクへのアクセス用
- offline_access - リフレッシュトークンの取得用
- Grant admin consent をクリックして、これらの権限を付与します。
OAuth での接続
以下の接続プロパティを設定して接続を確立してください:
- AuthScheme:OAuth に設定します。
- InitiateOAuth:GETANDREFRESH に設定します。CData API Profile for Outlook が OAuth プロセスを自動的に進め、アクセストークンを取得します。
- OAuthClientId:Azure Portal の Application (client) ID に設定します。
- OAuthClientSecret:Azure Portal のクライアントシークレットの値に設定します。
- TenantId:Azure AD のテナント識別子(GUID または 'contoso.onmicrosoft.com' のようなドメイン名)に設定します。
- CallbackURL:アプリ登録で指定したリダイレクト URI に設定します(デスクトップアプリの場合は http://localhost:33333 など)。
接続文字列の例
Profile=C:\profiles\Outlook.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;TenantId=your_tenant_id;CallbackUrl=http://localhost:33333;
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
OAuth 認証の設定
Microsoft Graph API は認証に OAuth 2.0 を使用します。OAuth 認証情報(Client ID と Client Secret)を取得するには、Microsoft Azure Portal でアプリケーションを登録する必要があります。
OAuth 認証情報の取得
- Azure Portal にログインします。
- Azure Active Directory > App registrations に移動します。
- New registration をクリックして新しいアプリケーションを作成します。
- アプリケーション名を入力し、適切なアカウントの種類を選択します。
- Redirect URI をアプリケーションのコールバック URL に設定します(デスクトップアプリの場合は http://localhost:33333 など)。
- Register をクリックしてアプリケーションを作成します。
- アプリケーションの概要ページで Application (client) ID をコピーします。これが OAuthClientId になります。
- Certificates & secrets に移動して、新しいクライアントシークレットを作成します。
- クライアントシークレットの値をコピーします。これが OAuthClientSecret になります。
- API permissions に移動して、必要な Microsoft Graph API の権限を追加します:
- Mail.Read - メールメッセージへのアクセス用
- Contacts.Read - 連絡先へのアクセス用
- Calendars.Read - カレンダーイベントへのアクセス用
- Tasks.Read - To Do タスクへのアクセス用
- offline_access - リフレッシュトークンの取得用
- Grant admin consent をクリックして、これらの権限を付与します。
OAuth での接続
以下の接続プロパティを設定して接続を確立してください:
- AuthScheme:OAuth に設定します。
- InitiateOAuth:GETANDREFRESH に設定します。CData API Profile for Outlook が OAuth プロセスを自動的に進め、アクセストークンを取得します。
- OAuthClientId:Azure Portal の Application (client) ID に設定します。
- OAuthClientSecret:Azure Portal のクライアントシークレットの値に設定します。
- TenantId:Azure AD のテナント識別子(GUID または 'contoso.onmicrosoft.com' のようなドメイン名)に設定します。
- CallbackURL:アプリ登録で指定したリダイレクト URI に設定します(デスクトップアプリの場合は http://localhost:33333 など)。
接続文字列の例
Profile=C:\profiles\Outlook.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;TenantId=your_tenant_id;CallbackUrl=http://localhost:33333;
API Server のユーザー設定
次に、API Server 経由でOutlook にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
Outlook 用のAPI エンドポイントの作成
ユーザーを作成したら、Outlook のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でOutlook への接続を設定してユーザーを作成し、API Server でOutlook データのAPI を追加しました。これで、OData 形式のOutlook データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。
Unqork でOutlook のデータに連携して一覧画面を作成
Unqork でOutlook のデータを作成する構成
Unqork でOutlook に連携する一覧表示画面をModule として作成します。Unqork の一覧画面で使用するコンポーネントは次のようになります:
- Initializzer:画面表示時にPluginを実行します。
- Plugin:API Server からデータを取得し、Hidden Componentに格納します。
- HiddenPluginから取得したデータを格納します:
- ViewGrid:Hidden Componentに格納されたデータを元に、一覧画面を表示します。
Outlook のデータのServices Administration への登録
- 事前準備として Unqork の Plug-in から API Server に対して接続ができるようにサービス情報を登録します。右上の「Settings」から「Administration」をクリックし、「Integration」の「Services Administration」を選択します。
- Services Administration 画面で、以下の項目を設定してAPI Server 経由でOutlook に接続します。
- 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」で動作確認をしてみましょう。以下のように一覧画面が表示されれば完了です。これでOutlook のデータをUnqork のワークフローでテーブルデータとして扱うことが可能になります。
まとめと30日の無償評価版のご案内
このように Outlook 内のデータをUnqork で利用することができるようになります。CData API Server は、30日の無償評価版があります。是非、お試しいただき、Unqork からのデータ参照を体感ください。