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のタブ構築が分かってきました。

ジャパンバードフェスティバル2016に行ってきたよ。前のページ

【3月のライオン】雪見だいふくコラボカレンダーをゲットしたよ。次のページ

関連記事

  1. Office関連

    名前付きセル(範囲)にコメントを付けるVBAマクロ

    Excelでマニュアルを作成する際、名前付きセル範囲を明記する必要があ…

  2. Windows 10

    起動中のMicrosoft EdgeからタイトルとURLを取得するVBAマクロ(DOM編)

    前回の記事で、UI Automationを使って起動中のMicroso…

  3. Office関連

    Google スライドで新規プレゼンテーションを作成するVBAマクロ

    ここ数日PowerPointのマクロに加え、Google Apps S…

  4. Office関連

    空白文字を一括置換するWordマクロ

    様々なWord文書を扱っていると、下図のように“同じ空白のように見えて…

  5. Office アドイン

    YO OFFICE(Yeoman)を使ってOffice アドインのひな型を作成する方法

    Webアプリのひな型を一発で作ってくれる便利ツール「Yeoman」には…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP