Microsoft Teams

Microsoft Teamsでタブの構築を試してみました。

下記記事の通り、Office 365に新たなコラボレーションツール「Microsoft Teams」が追加されたようなので、さっそく使ってみました。

上記FAQにある通り、今のところコンシューマー向けの無料プランは無く、Office 365を有償で利用しているユーザー向けのサービスのようです。

Microsoft Teamsの有効化

※ 下記はOffice 365 Enterprise E3で試しています。

Teamsを利用するには、まずサービスを有効化する必要があります。

  1. Office 365の管理センターを開きます。
  2. 設定」から「アプリ」を開きます。
  3. microsoft_teams_01_01

  4. アプリ画面が表示されたら「Microsoft Teams」をクリックします。
  5. microsoft_teams_01_02

  6. “組織全体での Microsoft Teams のオンとオフを切り替えます”を「オン」にし、「保存」ボタンをクリックします。私はついでに「ボット」もオンにしておきました。
  7. microsoft_teams_01_03

  8. 「Microsoft Teams の設定が更新されました。」とのメッセージが表示されたら「閉じる」ボタンをクリックします。
  9. microsoft_teams_01_04

  10. 上記手順でMicrosoft Teamsを有効にした後、 https://teams.microsoft.com/ を開くと、Office 365アカウントでサインインできるようになります。
  11. microsoft_teams_01_05

    microsoft_teams_01_06

どこかで見たようなインターフェースなので、TwitterやFacebook、LINEやSkypeといったサービスを使ったことがある人であれば、戸惑うことなく使い始められそうです。

タブの構築

Microsoft Teamsのような新しいサービスをさわるとき、正直私は“どのように開発・拡張できるか?”、ということにしか興味がありません。

そこでGitHubとMSDNを見てみると、開発方法がすでに公開されていました。

上記ページによると、Microsoft Bot FrameworkOffice 365 Connectorsで機能拡張できるようです。

今回は上記ページの一番上に出ていた「タブの構築」を試してみようと思います。
(Microsoft Teamsのタブってなに?状態ですが、こういうのはやってみた方が理解が早い!)

  1. サンプル用のタブが用意されているので、まずはGitHubから「MapsTab.zip」をダウンロードします。
  2. チーム画面の「…(その他のオプション)」から「チームを表示」を開きます。
  3. microsoft_teams_01_07

  4. 開発者 (プレビュー)」タブから「アップロード」ボタンをクリックし、手順1.でダウンロードしたZIPファイルを選択します。
  5. microsoft_teams_01_08

  6. 開発のタブ一覧にアップロードした「Maps」が表示されます。
  7. microsoft_teams_01_09

  8. 再びチーム画面に戻り、「+(追加)」ボタンをクリックします。
  9. microsoft_teams_01_10

  10. タブの追加画面が表示されるので、「Maps」を選択します。
  11. microsoft_teams_01_11

  12. 同意画面が表示されるので、「承諾」ボタンをクリックします。
  13. microsoft_teams_01_12

  14. 使用するマップの選択画面が表示されるので、とりあえず「Bing Maps」を選択し、「保存」ボタンをクリックします。
  15. microsoft_teams_01_13

  16. チーム画面のタブに「Bing Map」が追加されました。
  17. microsoft_teams_01_14

なるほど。
パッケージ(ZIPファイル)をアップすることで、自分が作ったWebページ(Webアプリ)をタブとして組み込むことができるわけですね。

パッケージの中身

ここで気になるのは上記手順1.でダウンロードしたZIPファイルの中身です。
解凍してみると、下記ページのファイルが入っていました。

JSON形式のマニフェストファイルにタブの名前や作成者、IDといった情報を記載しているようです。

{
  "$schema": "https://statics.teams.microsoft.com/sdk/v0.2/manifest/MicrosoftTeams.schema.json",
  "manifestVersion": "0.2",
  "id": "com.example.microsoftteamstabs.maps",
  "version": "0.2",
  "name": "Maps",
  "developer": {
    "name": "Example company",   
    "websiteUrl": "http://www.example.com",
    "privacyUrl": "http://www.example.com/privacy",
    "termsOfUseUrl": "http://www.example.com/termsofuse"
  },
  "description" : {
    "short": "Host a map as a tab.",
    "full": "Host a map as a tab. Select Bing Maps or Google Maps, and click Save."
  },
  "icons": {
    "44": "maps44.png",
    "88": "maps88.png"
  },
  "accentColor" : "#223344",
  "configUrl": "https://teams-get-started-sample.azurewebsites.net/tabconfig.html",
  "canUpdateConfig": true,
  "needsIdentity": false,
  "validDomains": [
    "*.bing.com",
    "*.google.com"
  ]
}

上記マニフェストファイルのconfigUrlキーの値である「tabconfig.html」のソースは下記のようになっていました。

<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. -->
<!-- See LICENSE in the project root for license information -->

<!DOCTYPE html>
<html>
  <body>
    <form>
      <input type="radio" name="maptype" value="bing" onclick="onClick()"> Bing Maps
      <br>
      <input type="radio" name="maptype" value="google" onclick="onClick()"> Google Maps
    </form>

    <script src="https://statics.teams.microsoft.com/sdk/v0.2/js/MicrosoftTeams.js"></script>

    <script type="text/javascript">
      microsoftTeams.initialize();
      microsoftTeams.settings.registerOnSaveHandler(function(saveEvent) {
        var radios = document.getElementsByName('maptype');
        if (radios[0].checked) {
          microsoftTeams.settings.setSettings({
            contentUrl: "https://www.bing.com/maps/embed",
            suggestedTabName: "Bing Map",
            websiteUrl: "https://www.bing.com/maps",
            removeUrl: window.location.origin + "/tabremove.html"
          });
        } else {
          microsoftTeams.settings.setSettings({
            contentUrl: "https://www.google.com/maps/embed",
            suggestedTabName: "Google Map",
            websiteUrl: "https://www.google.com/maps",
            removeUrl: window.location.origin + "/tabremove.html"
          });
        }
        saveEvent.notifySuccess();
      });

      function onClick() {
        microsoftTeams.settings.setValidityState(true);
      }
    </script>
  </body>
</html>

これを見る限り、configUrlキーで指定したWebページでは、JavaScriptライブラリ(Microsoft Teams JavaScript Library)を読み込むことで、タブ上でいろいろできるようになるみたいです。

細かい仕様はまだリファレンスを読み込んでいないので何とも言えませんが、何となくMicrosoft Teamsのタブ構築が分かってきました。

関連記事

  1. アイコン一覧

    Office 2013 アイコン一覧(N)

    ・Office 2013 アイコン一覧 NUM…

  2. アイコン一覧

    Office 2013 アイコン一覧(W)

    ・Office 2013 アイコン一覧 NUM…

  3. Office関連

    UI Automationの参考資料

    VBAからUI Automationを扱う際に参考になりそうな資料への…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP