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用アプリ]RSS表示アプリを作成する。

    ※ この情報はOffice 2013 カスタマー プレビュー版を元にし…

  2. Office関連

    ConvertToTextメソッドを使ってテーブルを二次元配列に変換するWordマクロ

    WordのTableオブジェクトには、テーブルを解除して文字列に変換す…

  3. Office アドイン

    Visio JavaScript APIで遊んでみました。

    前回の記事でプレビュー版がリリースされた「Visio JavaScri…

  4. Office関連

    Office 2010のオブジェクトリスト

    オブジェクト ブラウザーから取得できる、各Office 2010アプリ…

  5. Excel

    「カレンダーから日付入力」をUserFormに移植してみました。

    前回の記事では、Office 用アプリ「カレンダーから日付入力」と同様…

  6. Office関連

    Outlookの連絡先をvcf形式で一括保存する方法

    Outlookの連絡先をvcf形式で保存する場合、通常は「連絡先を v…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP