Dynamics CRM(365) Online – Excel 連携アプリ(技術解説)

概要

Excel (Office Add-ins) を使用して、Microsoft Dynamics CRM Onlineにアクセスするアプリケーションを作成しました。

Excelを使用して、Dynamics CRMのデータに入力及び、出力ができます。

※このアプリは、初期設定で、Dynamics CRMの「Entity, View, Record, Field」 と Excel 「Cell」の組み合わせを定義します。

 

今回は、複数の技術使用していります。少し難しいので、簡単に解説します。

機能紹介ページ  – Dynamics CRM Excel 連携アプリ

システム概念図

Office Add-ins Dynamics CRM(365)

システム配置 – 概要

 

crm-officeaddins0100

詳細 – 使用しているリソースおよび技術

  1. Microsoft Dynamics CRM(365) Online
    D
    ynamics CRM Online は今後は、SOAPではなく、REST APIが主な開発手法になっていくようです。
    このアプリもREST APIを使用しました。
    REST APIに関数に関して以下のブログが参考になります。

    1. Japan Dynamics CRM Team Blog – SDK
    2. Morning Girl
  2. Azure App Service – Web
    C
    #を使用して、Web SiteをAzureに配置しています。
    crm-officeaddins0130

  3. Azure Active Directory – Application
    Web アプリケーションを作成したあとに、AzureAD と Dynamics CRM Onlineへのアクセスを設定します。
    「Acess CRM Online as organization users」を選びます。
    crm-officeaddins0110
    「Access the directory as the signed-in user」を選びます。
    crm-officeaddins0120
  4. Office Add-ins
    マニフェストファイルに以下をいれないとAzure AD にログイン時にExcelからログイン画面が、ポップアップしてきますので、注意して下さい。

    <AppDomains>
    <AppDomain>https://login.windows.net</AppDomain>
    <AppDomain>https://login.microsoftonline.com</AppDomain>
    </AppDomains>

    crm-officeaddins0140
    Officeアドインの詳しい解説は以下がわかりやすいです。

    1. 初心者備忘録 – Office アドイン
  5. Visual Studio 2015
    C#とJavaScriptを使用しています。統合デバックでOffice Add-ins(オフィスアドイン)のデバックもできます。 crm-officeaddins0150

 

 

AAD(Azure Active Dirctory) OAuth Application(Multi Tenant) ConcentUIのエラーについて

概要

AAD (Azure Active Dicrectory) のOAuth Application(アプリ)はアクセスを許可(承認)するためには、ConcentUI(コンセントUI)で許可する必要があります。

重要:組織で一度だけでOKです。

一般ユーザではConcent UIが表示されないように使用変更されたので
※Mutlti Tenant(マルチテナント) のみだと思われる?(Single Tenant未確認)

Global Administrator(全体管理者)がOrganization(組織)に許可しなければならない。

組織に許可すると一般ユーザはConcentUIが不要になるためくログインできるようになります。

現象

1. AAD Application (Mutli Tenant) でユーザがログインする

aadoauthconsetui0010

2. Concent UIが表示できずに以下のエラーが表示される。

AADSTS90093: User cannot consent to web app requesting user impersonation as an app permission.

aadoauthconsetui0020

 

解決方法

1. “prompt=admin_consent” をURL Parmaetert付でApplication(アプリ)を認証します。

例)重要:組織で一度だけでOKです。

https://login.microsoftonline.com/common/oauth2/authorize?response_type=code&prompt=admin_consent&client_id=beebf982-a44d-4f0b-8cc8-c1e3a72ca8ab

2. Global Administrator(全体管理者) でログインします。

aadoauthconsetui0030

 

3. 管理者用のConcent UIが表示されますので組織に承認します。

aadoauthconsetui0040

 

4. 一般のユーザでログインしてもConcent UIが表示されなくなりますので、エラーが表示されなくなります。

 

参考

  1. Azure Active Directory の Common Consent Framework (Client 側)
  2. v2.0 endpoint の OAuth を使った Client 開発 (Azure AD と MSA への対応)
  3. Update to Graph API consent permissions
  4. Managing user consent for applications using Office 365 APIs

Tokyo ComCamp 2016 powered by MVPs で登壇しました。

予約ページ  Tokyo ComCamp 2016 powered by MVPs – connpass

株式会社gloopsさんにて、Office365 の開発について登壇を行いました。

Office365の開発は、ユーザ数が増えて、開発者も増えてきました。

機能が多いので、開発手法についてデモを交えながら、説明しました。

詳しい方もいたので、Office365について知識が深まりました。

 

ComCamp2016

 

スライド


 

Apps for SharePoint(office365) でテナント操作できるのですね。いいサンプル見つけた。

いいサンプルをみつけたので、報告します。

Apps for SharePointでリスト等は簡単にとれますが。

さて、テナントにサイトを作るとかはとても難しいですが、

動くサンプルありました!!

CodePlex

GitHub

 

たとえばこの中の以下のソリューションを開きます。

  • Samples\Provisioning.SiteCollectionCreation\Provisioning.SiteCollectionCreation.sln

 

配置先に自分の開発サイトを指定して、F5実行します。

sp_tenant010

Visual Studio2013でSharePoint用アプリの設定をみてみます。

テナントのアクセス許可 FullControlになっています。

Microsoft.Online.SharePoint.Client.Tenant というDllが参照されています。

これでOffice365のサイトコレクション(Site Collections)とかもとれそうです。

sp_tenant020

 

Apps for Office が Excel Onlineから追加できるようになりました!(Office用アプリ)

いままではローカルのOffice2013がないとアプリ追加できませんでしたが、

Excel Onlineからそのまま、アプリが追加できるようになりました!!

これはとても便利になる感じでした。

excelonlineAppbuton

 

それと、Excel Onlineって、同僚とかと共同編集するとカーソルの位置まで共有するので、ローカルのエクセルよりすごくなるじゃないと、Excel Onlineならではの機能に驚いた

 

 

 

ASP.NET MVC5 VisualStudio2013でJavaScriptデバッグ

Visual Studio 2013 ASP.NET MVC5 でJavaScriptはブレークポイントを置いてもうまく止まりません。

というこで調査してみました。debugger と書くとうまくいきました!!

MVC5_JS_debug0010

Internet Explorer で開発者ツール(F12)でブラウザーでデバックする方法もあります。

MVC5_JS_debug0020

以下のようにInternet Explorer の開発者ツール(F12)でブレークポイントをおいてデバックできます。

MVC5_JS_debug0030

なのですが。Office用アプリは開発者ツール(F12)使えない。

MVC5_JS_debug0040

そこでブレークポイントを置きたい場所にVisual Studio2013で

debugger と書きます。

以下は例

<script>

$(document).ready(function () {

$(“input:button”).click(function () {

debugger

$(“#test”).html(“Hello World!”)

});

});

</script>

<input type=”button” value=”テスト” />

JavaScriptがVisual Studioでデバックできるようになりました!。

MVC5_JS_debug0050

Office用アプリ+ASP.NET MVC5 で外部のアカウント連携(twitter, facebook, google, Microsoft Account, Office365等)

概要

Office用アプリ+ASP.NET MVC5 で外部のアカウント連携(Facebook等)をしてみました。

結果、いろいろありましたがうまくいきました!!

詳細

ASP.NET MVC5の最新のアカウント管理では簡単にFacebook, Twitter, Google, Microsoft Account, Office365 と連携できます。

普通のサイトでは以下のようにASP.NET MVC5 では以下のように認証する際にFacebook ならFacebook認証サイトにリダイレクト(redirect)します。

  • ASP.NET MVC5標準のFacebook連携ボタンを押す
    A4O_Autholization010

    Facebookの認証サイトにリダイレクトされます。
    ※URLが https://www.facebook.com/login.php?
    A4O_Autholization020

普通のサイトならリダイレクトされてもOKなのです。

しかしOffice用アプリでは、マニュフェストファイルにかいたURLのドメイン以外はIE Windowポップアップします(POPUP)!!

IE Windowポップアップしてしまうので認証がうまく連携しないのです!!

.

A4O_Autholization030

以下はOffice用アプリのマニュフェストファイルです。

  • Office用アプリの初期URL例:https://Test001.com/A4OTest001/ ←このドメイン以外ポップアップする

A4O_Autholization040

 

しばらくVisual Studio2013のOffice用アプリの設定をみていると以下のナイスな項目をみつけた!!

A4O_Autholization060 

「アプリで使用されるページのドメインを指定します。アプリで開かれたリモートページは、アプリと同じウインドウ内に表示されます。」

A4O_Autholization070

さっそく、アプリドメインに以下を追加してみて実行してみみる。

https://www.facebook.com

Office用アプリのマニュフェストはこんな感じです。

<?xml version=”1.0″ encoding=”UTF-8″?>
<!–Created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9–>
<OfficeApp xmlns=”http://schemas.microsoft.com/office/appforoffice/1.0″ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:type=”TaskPaneApp”>
<Id>72b351ce-05dc-4569-86e4-a8d429ed90a4</Id>
<Version>1.0.0.0</Version>
<ProviderName>snoro</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<DisplayName DefaultValue=”Appli-AWeb_MVC_Main” />
<Description DefaultValue=”Appli-AWeb_MVC_Main Description”/>
<AppDomains>
<AppDomain>https://www.facebook.com</AppDomain>
</AppDomains>
<Capabilities>
<Capability Name=”Workbook” />
<Capability Name=”Presentation” />
<Capability Name=”Project” />
<Capability Name=”Document” />
</Capabilities>
<DefaultSettings>
<SourceLocation DefaultValue=”https://Test001/A4OTest001/” />
</DefaultSettings>
<Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

https://www.facebook.com

ReadWriteDocument

実行した結果うまく外部のアカウント(Facebook)と認証できました!!

A4O_Autholization060

Office用アプリ(Apps for Office)にクールなデザイン(Twitterbootstrap)を適用し, Facebook, Google等とログイン連携してみた。

概要

実際の製品としてアプリを作るには、いろんな細かいところを作らなければならないので、アプリを作成し検証してみました。

今回作成したサンプルは、後でGithub/CodeprexにUPする予定です。

詳細

ちなみに、今回はVisual Studio 2013 RC1 を使い開発しました。

なぜならば! 開発(プロジェクトテンプレート・デバック等)がかなり簡単だからだ!!

実際、わたしはこのコードを今日1日で書き上げることができた!!!

だから、頑張れば誰でも出来るんです!!!(言い過ぎね!)

わからなければ、わたしが、勉強会でやりますので来てくださいね、たぶん。

環境

  1. Microsoft Office 2013
  2. twitterBootstrap
  3. Visual Studio2013 RC1 with MVC5
  4. Windows Azure, SQL Azure
  5. Login連携(Twitter, Facebook, Microsoft ID, Google)

イメージ

Office用アプリ(Apps for Office)の個別機能画面(見積、不動産管理、等の個別の機能)

MVC5_OFFICEAPPS_0010

WebSiteの共通画面(認証、権限、顧客、等のマスター)

※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能

MVC5_OFFICEAPPS_0020

Visual Studio 2013 RC1 のプロジェクト及び、データベースの構成

※Officeアプリ用のテンプレートを ASP.NET MVC5で作ります。

MVC5_OFFICEAPPS_0030

まずは機能要件を整理してみよう。

  1. Tablet 等のモバイルにも対応するため、クッキーレス(cookieless)であること
    iPhone/iPad/Androidでも問題なく動作
  2. 様々なアカウントと連携したログイン機能を有すること(独自認証、Facebook, Google, Twitter, Microsoft ID)
  3. 整理されたメニューが必要
  4. Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能)
  5. WebSiteの共通画面(認証、権限、顧客、等のマスター)

そして非機能要件も整理してみよう。

  1. デザインがかっこいい!(twitterbootstrap)
  2. クラウドで動く(Windows Azure, Azure Web Site)
    とりあえず、簡単にWebサーバをスケールアウト(増設)できるように、にセッションなしで開発しておこう!!

細かいのは順次ブログにかきますが。ログインのイメージを掲載しておきます。

ログイン-Office用アプリの個別機能画面(見積、不動産管理、等の個別の機能)

MVC5_OFFICEAPPS_0040

ログイン-WebSiteの共通画面(認証、権限、顧客、等のマスター)
※Office用アプリと同じWebサーバだかASP.NET MVC5の機能により、Layout テンプレートを変更しているで、メニュー、レイアウトとか簡単に入れ替え可能

MVC5_OFFICEAPPS_0050

次回は細かいプログラム解説やるつもりです!!

業務向けOffice用アプリ(Apps for Office)「Appli-a(アプリア) -見積・請求書-」無料版公開

appli-a_0001

ようやく、Microsoftさんの審査が通って

エクシード・ワンが提供する、業務向けOffice用アプリ(Apps for Office)、「Appli-a(アプリア) -見積・請求書-」が2013年9月6日より Office ストアにアップされました。

長かった━━━━━━━━━━!!!

マジで長かったです。。。1ヶ月近く、申請→却下、申請→却下、申請→却下を繰り返したのではなかろうか?

 

弊社の環境では問題なく動くのですが、申請先の環境では動かなかったりなど、いろいろ苦労しました。

何が原因か分からなかったので、テスト動画まで頂いて分析することに・・・。

結局、Excelへの ”バインディングの設定タイミング” に問題があったことが分かったので、

修正して再申請(かれこれ7~8回目・・・、Microsoftさん、すみません)

で、あっけなく申請通ったw

Appli-a シリーズは、Webサーバ、DBサーバに「Windows Azure」を使っています。

メールアドレスさえお持ちでしたら使えますので、是非一度お試しください。

96x96

<Office ストア>

http://office.microsoft.com/ja-jp/store/

<Appli-a Webサイト>

http://www.appli-a.com/

 

これからも、業務向けOffice用アプリ「Appli-a シリーズ」を、もっと充実させていきます。

第二弾 「Appli-a -経費精算-」 ・・・今秋リリース予定

第三弾 「Appli-a -営業日報-」(仮) ・・・今冬リリース予定