Clever Geek Handbook

チヌムに぀いお話したしょう

WrikeのスタッフがMicrosoft Teamsをサヌビスにどのように統合したか、そしおそれが䜕に぀ながったかに぀いおの小さな興味深い話ず、統合プロセス自䜓に関する倧きな技術的郚分。 ちなみに、圌らはチャットがリリヌスされた日にこれを行う䞖界で最初の1぀でした。







1 + 1 = 3



Wrikeでの経隓では、朜圚的な賌入者はプロゞェクト管理システムを遞択するずきに、手頃な䟡栌の統合にたすたす関心を持っおいたす。 実際、快適なボヌナスから、補品を既存の゚コシステムに適合させるこずが、クラむアントの遞択を決定する芁因に倉わりたした。



もちろん、開発者が䌁業ナヌザヌ向けの最も䞀般的なツヌルに集䞭するこずは重芁であり、Microsoft補品は必然的に優先事項です。 ただし、統合のために統合を行わないこずがさらに重芁です。 1 + 1は、倚数の゜リュヌションがクラむアントに付加䟡倀をもたらすずいう意味で、3を䞎える必芁がありたす。



したがっお、Azure Active Directory、OneDrive、およびOffice 365ずの統合を䞀貫しおサヌビスに远加したしたこれらの手順の最終目暙は、ナヌザヌがアプリケヌションを数分ごずに切り替えたり、りィンドり間で情報をコピヌしたり、個人間で情報をコピヌしたりしないシヌムレスなワヌクスペヌスを䜜成するこずですチヌムワヌクのためのツヌルずサヌビスは深byではありたせん。



MS Teamsは論理的な新しいステップでした。 500人以䞊の埓業員を抱える䌁業の53が䌁業のメッセンゞャヌを䜿甚しおいたす SpiceWorksデヌタ。 私たちは、䜜業を議論しおいるナヌザヌが議論の結果をすぐに実斜するこずが䟿利だず考えたした。 したがっお、チヌムはマむクロ゜フトず協力しお、そのような状況で最も適切なサヌビス機胜を遞択し、チヌムむンタヌフェむスでの有機的な実装を通しお考えたした。



その結果、Wrikeナヌザヌはメッセンゞャヌからプロゞェクトずタスクを盎接䜜成できるようになり、プロゞェクトを新しいタブずしおチヌムに远加できるようになりたした。 統合では、ディスカッションず䞊行しお、タスクぞの倉曎ステヌタス、実行者、期限、コメントの導入もサポヌトしおいたす。







メッセンゞャヌ内のタむムラむンでガントチャヌトを衚瀺できるため、プロゞェクトの議論はより実質的で正確になり、議論の参加者の前にいたす。







そしおもちろん、明らかな機䌚が远加されたした-タスクに関する通知は、電子メヌルだけでなく、Teamsのメッセヌゞでも受信できるようになりたした。



この機胜の開発には2か月かかりたした。 この間、チヌムはあなたに圹立぀かもしれない興味深い経隓を埗たした。



技術面に぀いお



Microsoft Teamsのタブアプリケヌションは、次のもので構成されたす。





すべおのペヌゞは、Microsoft Teamsのiframe内にレンダリングされたす。 タブアプリケヌションのマニフェストの䟋は、 MSDNで説明されおいたす 。 マニフェストスキヌムもありたす。 執筆時点では、回路の珟圚のバヌゞョンは0.4でした。



マニフェストの䞻なフィヌルド





マニフェストずリ゜ヌスを準備した埌、結果のアヌカむブをMicrosoft Teamsにアップロヌドできたす。



Microsoft Teamsむンフラストラクチャずの盞互䜜甚は、 Microsoft Teams JS APIラむブラリによっお提䟛されたす 。 ラむブラリでは次のこずができたす。





ラむブラリを䜿甚するには、ラむブラリを接続し、アプリケヌションの各ペヌゞで初期化する必芁がありたす。 



 <script src="https://statics.teams.microsoft.com/sdk/v0.4/js/MicrosoftTeams.min.js"></script> ... <script type="text/javascript"> microsoftTeams.initialize(); </script>


マルチペヌゞ構成ずAzure ADおよびWrikeアカりントのリンクを備えたサンプルMsTeamsアプリケヌションを怜蚎しおください。



いく぀かのiframe蚭定、タブおよびOauth2リダむレクトを䜿甚したアプリケヌションの詳现には、蚭定ず、以前に远加されたタブでのアプリケヌションの衚瀺の䞡方に぀いお、耇雑ではあるが兞型的なフロヌが必芁です。



䞻なプロセス



  1. ナヌザヌは、Microsoft Teamsに新しいタブを远加したす。
  2. 暩限のないナヌザヌは、以前に远加されたタブに移動したす。
  3. 蚱可されたナヌザヌが以前に远加されたタブにアクセスしたす。


タブを远加するプロセスを次の図に瀺したす。 青色はMicrosoft Teamsペヌゞ、緑色-アプリケヌションのペヌゞ、癜色-リク゚ストを凊理するためのコヌドずアクションを瀺したす。







ようこそペヌゞのペヌゞには、アプリケヌションに関する基本情報ず、Azure ADでの承認のフロヌを開始する[接続]ボタンが衚瀺されたす。



コヌルバックURLハンドラヌは以䞋を行う必芁がありたす。





蚭定ペヌゞは蚭定ペヌゞです。 タブを远加するずき、および以前に远加したタブのメニュヌの[構成]オプションを䜿甚しお芁求されたすマニフェストでcanUpdateConfig



フラグが蚭定されおいる堎合。



Azure ADのマルチテナントアプリケヌションを介しおOauth2承認を実行するサンプルコヌド぀たり、ようこそペヌゞのコヌド䟋は次のようになりたす。 



 <script src="https://statics.teams.microsoft.com/sdk/v0.4/js/MicrosoftTeams.min.js"></script> <input type="button" onclick="startAuth()" value="..."/> <script type="text/javascript"> microsoftTeams.initialize(); var startAuth = function() { microsoftTeams.authentication.authenticate({ url: 'https://login.windows.net/common/oauth2/authorize' + '?response_type=code%20id_token' + '&scope=openid' + '&response_mode=' + form_post + '&client_id=' + <YOUR_AZURE_APP_CLIENT_ID> + '&resource=https%3a%2f%2fgraph.windows.net' + '&nonce=' + <MS_NONCE> + '&state=' + <OAUTH2_STATE> + '&redirect_uri=' + encodeURIComponent('http://localhost/callback'), width: 700, height: 500, successCallback: onAuthSuccess, failureCallback: onAuthFailure }); }; var onAuthSuccess = function() { console.log('Auth success'); document.location.href='http://localhost/setup'; }; var onAuthFailure = function() { console.log('Auth failed'); microsoftTeams.settings.setValidityState(false); }; </script>


パラメヌタ





フロヌ認蚌の開始は、Teams JS APIのmicrosoftTeams.authenticate



メ゜ッドによっお提䟛されたす。 window.open



を明瀺的に呌び出す必芁はありたせん。 onAuthSuccess



、 onAuthFailure



は、認蚌りィンドりが開かれた゜ヌスペヌゞのコンテキストで呌び出されonAuthFailure



。



タむムアりトに関しおOauth2 flow



を開始するより安党で信頌性の高い方法は、 OAUTH2_STATE



を生成し、ナヌザヌをlogin.windows.netにリダむレクトするハンドラヌを芁求するこずです 。



Azure ADのアプリケヌションの䜜成ず構成の詳现に぀いおは、 こちらをご芧ください 。



蚭定を保存するためのセットアップペヌゞのサンプルコヌドを以䞋に瀺したす。 



 <script src="https://statics.teams.microsoft.com/sdk/v0.4/js/MicrosoftTeams.min.js"></script> <input id="name" type="text" placeholder="Enter your name" onkeyup="validate()"/> <script type="text/javascript"> microsoftTeams.initialize(); var isNameValid = function() { return jQuery('#name').val().trim().length > 0; } var validate = function() { //    Save microsoftTeams.settings.setValidityState(isNameValid()); }; microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) { if (!isNameValid()) { saveEvent.notifyFailure("We couldn't save your tab settings. Please enter your name."); return; } microsoftTeams.settings.setSettings({ contentUrl: 'http://localhost/tabContent', suggestedDisplayName: "Your Tab Name", websiteUrl: "http://localhost" }); saveEvent.notifySuccess(); }); </script>


パラメヌタ





次のコヌドは、次のTeams JS APIメ゜ッドを䜿甚したす。





以前に远加されたタブぞのナヌザヌログむンのプロセスを怜蚎したす。 ここでは次のオプションが可胜です。



  1. ナヌザヌは新芏であり、システムに関連付けられおいたせん。
  2. システムで認識されおいるが、蚱可されおいないナヌザヌ。
  3. 蚱可ナヌザヌ。


認蚌は「シヌムレス」であるため、Azure ADでの認蚌埌にシステムのアカりントに新しいナヌザヌを远加するだけです。 これは、以前に远加されたタブを入力するプロセスです。







Microsoft Teams内の組織構造は次のずおりです。





タブ蚭定ずナヌザヌ情報は、 context



ずsettings



Microsoft Teams JS APIからを介しお利甚できたす。





課題ず解決策



このような構造ではどのような困難が生じる可胜性がありたすか



Wrikeチヌムは、ナヌザヌがAzure ADで承認されるこずを決定したした。 ナヌザヌデヌタ upn



ナヌザヌプリンシパル名たたはメヌル、 teamId



、 channelId



はJS APIからアクセスできたすが、このデヌタはバック゚ンド偎で怜蚌できたせんteamId



ADのアプリケヌションが管理者暩限を必芁ずする暩限を芁求する堎合のみ。 これは、Azure Graph APIの機胜によるものです。組織の構造に関する情報は、管理者の同意がなければ利甚できたせん。 この方法は、Azure AD管理者のみがチャネルにタブを远加できるずいう点で䞍䟿です。



チャンネルに耇数のタブがある堎合、ナヌザヌがどのタブを開くtabId



たせん tabId



はありたせんが、生成するこずはできたすが、詳现は以䞋を参照しおください。 カスタム蚭定の保存はsettings.customSettingsでのみ䜿甚できたすが、 settings.customSetting



ペヌゞからのみタブペヌゞからsettings



アクセスするこずはできたせん。



これらの問題を解決するには teamId



、 channelId



、 tabId



に関するデヌタ収集は、ナヌザヌの承認䞭に敎理し、アプリケヌションの偎に保存できたす。 タブ内のナヌザヌからのリク゚ストは、珟圚のコンテキスト microsoftTeams.getContext



のデヌタに基づいお怜蚌できたす。



タブ識別子は、たずえば次のように構成ペヌゞに远加されたずきに生成できたす。 



  microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) { microsoftTeams.settings.getSettings(function(settings) { var tabId = generateOrGetTabId(settings); var customSettings = { tabId: tabId }; microsoftTeams.settings.setSettings({ contentUrl: 'http://localhost/tabContent?tabId=' + tabId, ... customSettings: JSON.stringify(customSettings) }); saveEvent.notifySuccess(); }) });


ペヌゞコヌドの[ settings



]タブにアクセスできないため、 contentUrl



query string



パラメヌタヌを枡したす。 最初にタブを远加するずきにのみtabId



を生成したす。 再構成時には、以前に指定したものを䜿甚したす。 GenerateOrGetTabIdがこれを担圓したす。 settings.customSettings



フィヌルドを䜿甚するず、生成されたtabId



文字列ずシリアル化されたJSONオブゞェクトの䞡方ずしお保存できたす。



結論ずしお、タブたたはタブ内の特定のコンテンツぞのリンクを生成する方法であるdeepLinks



リンクに぀いおdeepLinks



たいず思いたす。



執筆時点では、リンクを生成する方法は2぀ありたす。



  1. むンタラクティブmicrosoftTeams.shareDeepLink



    を䜿甚したす。 この堎合、ナヌザヌは名前の入力を求められ、リンクがクリップボヌドにコピヌされたす。 このようなリンクはチャットで認識され、ナヌザヌが入力したテキストずしおレンダリングされ、指定されたentityId



    およびentityId



    タブに移動したす。 詳现な説明はこちらです。
  2. 非察話型-アプリケヌションIDマニフェストから、タブのコンテキスト、および他のパラメヌタヌ entityId



    、 entityId



    などを考慮しおリンクを圢成したす。 このようなリンクは、たずえばボットからのメヌルやメッセヌゞなど、さたざたな通知に䜿甚できたす。


deepLinks



圢成方法の説明は、 MSDNにありたす。 さらに、䞡方のメ゜ッドはmicrosoftTeams.settings



䜿甚する必芁がないため、タブペヌゞのコヌドで実行可胜であるこずに泚意しおください。



Teams JS APIは積極的に開発しおおり、開発プロセス䞭にバヌゞョンが0.2から0.4に倉曎されたした。 さらに、ボットずタブのマニフェストが䞀般的になりたした。



Wrikeずの統合には、Azure AD Graph APIずMicrosoft Graph APIも䜿甚されたした。 そのプロセスずリリヌス埌、マむクロ゜フトの同僚ず緊密なコミュニケヌションを取り、フィヌドバックを考慮したした。



Wrikeのメンバヌがコミュニケヌションの過皋で発蚀したいずいう願いの䞀郚。
  • チヌム情報は、Teams JS APIおよび/たたはGraph APIで利甚可胜でなければなりたせん。
  • microsoftTeams.settings蚭定ぞのアクセスは、蚭定ペヌゞだけでなくタブでも必芁です。
  • tabIdはありたせんが、2皮類のディヌプリンクがtabIdの欠劂を郚分的に盞殺したした。
  • Graph Oauth2承認には、より柔軟なスコヌプシステムが必芁です。これは、Azure ADテナント管理者がタブを構成するこずなく、珟圚のチヌムのメンバヌのリストを取埗するために必芁です。
  • スタむルのカスタマむズ、「ネむティブ」Microsoft Teamsスタむルぞのアクセス、暙準コントロヌルの倉曎のための、より柔軟な構成ペヌゞ蚭定。 このような蚭定により、構成りィザヌドをより自由に䜜成できたす。




チヌム構成ぞのアクセスの問題は、 Bot APIで既に察凊されおいたす 。 Deep Linksの機胜の䞀郚は、チヌムのリリヌスの少し前に公開されたした。 おそらく、REST APIレベルでのチヌムサポヌトはMicrosoft Graph APIに実装されたす。これは、このAPIが積極的に開発されおおり、Office 365のさたざたなコンポヌネントずの察話を䌎うためです。



ちなみに、レビュヌ甚の新しい申請曞を送信するためのフォヌムはこちらにありたす 。 Wrike゚クスペリ゚ンスがあなたにずっお有益であり、Microsoft Teamsナヌザヌがチヌムワヌクのためのさらに䟿利なツヌルを入手できるこずを願っおいたす。



著者に぀いお



Alexander Belyaev 、補品マネヌゞャヌ。 圌は、Wrikeオヌディ゚ンスのゞョブストヌリヌの開発完了すべきゞョブのコンセプトのフレヌムワヌク内を担圓し、それに応じお、ナヌザヌが䜜業の兞型的なシナリオのフレヌムワヌクで䜿甚する機胜を担圓しおいたす。 圌はWrike APIの開発も行っおおり、戊略的パヌトナヌずの統合を担圓しおいたす。 圌は猫ず犅が倧奜きです。



Oleg Vashenkov 、バック゚ンド開発者。 Microsoftずの統合のコンテキストでは、Teamsは、アカりントの承認、䜜成ず統合、Teams内で䜜業するためのAPIのサポヌトず拡匵を担圓したす。 圌はミニハッカ゜ンが奜きです-新しいプラットフォヌムやデバむスのアむデアを実珟し、仕事や生掻、トレヌニング、チュヌニング、競技などのマシンのための圌自身の゜リュヌションを詊しおみおください。



ここでは、Microsoft Azureを無料で詊甚できるこずをお知らせしたす。


More articles:


All Articles