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 アドイン

    [Office用アプリ]OneNote Clipperをアプリから使う。

    先日Chrome版が公開された、「OneNote Clipper」です…

  2. アイコン一覧

    Office 365アイコン(imageMso)一覧(G)

    Office 365のデスクトップ版Officeアプリケーション(Wo…

  3. Office関連

    組み込み定数を列挙するVBAマクロ

    定数の名前や値を調べたい、そんなときはTypeLib Informat…

  4. Office関連

    Excel 2013 新関数一覧

    「関数一覧(Excel 2010)」と「関数一覧(Excel 2013…

  5. Office関連

    [PowerPoint]Applicationオブジェクトのイベントを利用する

    PowerPointのApplicationオブジェクトには、スライド…

  6. Office アドイン

    Office 2016で進化したOffice アドイン

    今日OfficeDevを眺めていて気が付いたのが「OfficeJS S…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP