Webex デバイスのマクロを使って朝から元気にお仕事

##  :star: はじめに
この記事は、Cisco Systems Japan Advent Calendar 2020の 2枚目の 18日目として投稿しています。

- 2017年版: https://qiita.com/advent-calendar/2017/cisco
- 2018年版: https://qiita.com/advent-calendar/2018/cisco
- 2019年版: https://qiita.com/advent-calendar/2019/cisco
- 2020年版(1枚目）: https://qiita.com/advent-calendar/2020/cisco
- 2020年版(2枚目) : https://qiita.com/advent-calendar/2020/cisco2　　 今ここ
<br>

こんにちは :smiley: 　いよいよ2020年も残すところ後わずかですね。　
なんか毎年この時期にだけ登場しているような気もしますが  :sweat_smile:

今年は新型コロナウィルスの影響でいろいろと大変な年だったと思います。 そんな中、在宅勤務を余儀なくされた方も多くいらっしゃるかと思います。
私の所属する会社も3月以降は、基本は在宅勤務でリモートワークになり多くのコミュニケーションがオンライン（弊社の場合はWebex) になりました。
私は担当業務がシスコ・コラボレーションという関係もあり、ビデオ会議端末の Webex デバイスを自宅に置いて通常業務や検証・デモなどをしています。
そこで今回は、この Webex デバイスを使って朝から元気に仕事を始めらないかを考えてみました。
（そんな大掛かりなことは考えていませんが :sweat_smile:）

##  :star: 今回やってみようとしていること
毎朝定時に元気な動画を見てエナジーを補充して朝のミーティングに自動で参加。
個人的には最近は、「鬼 :white_circle:の刃 無限 :white_large_square:車編」にハマっておりまして、この動画を見るとテンションが上がります。
なので、この第三弾 PV を見てからお仕事をするようにセットしようかと思いましたが、今回は公開ネタという事で再生する動画は弊社の動画にしました。

 :sunny: 今回やりたいこと：
&emsp;&emsp;1. 7:58 AM に動画を再生
&emsp;&emsp;2. 8:00 AM 朝のミーティング開始　（自分の Personal Meeting Room（自分用の会議室） に接続してチームメンバーに会う）

やりたい事は、上記の2つだけです。
これをWebex デバイスのマクロ機能を実現させてみます。

で、実際にやった感じは下のデモ動画のようになります。
「朝から元気にお仕事」のはずが、デモ用の動画の撮影が夜になってしまいました :sweat_smile:
なので、デモ動画では下記のようになっています。
&emsp;&emsp;1. 21:24  に動画を再生 ( YouTube )
&emsp;&emsp;2. 21:25  ミーティング開始　(デモ用の Personal Meeting Room に接続 )
&emsp;&emsp;&emsp;指定された会議へ自動接続して Cisco DevNet の Devvie ちゃんとミーティング
&emsp;&emsp;&emsp;<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/44db91d7-8aa1-e54c-610a-bc294bfb42a8.png">
&emsp;&emsp;&emsp;Devvie ちゃん

&emsp;&emsp;:movie_camera:  デモ動画  ( iPhone X で撮影 )
 [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/lVZ5nLkpbR4/0.jpg)](http://www.youtube.com/watch?v=lVZ5nLkpbR4)
https://youtu.be/lVZ5nLkpbR4

## :star: 今回使うもの/機能

 :small_orange_diamond: Webex デバイス - Webex Desk Pro
&emsp;- Webex クラウド登録。（ 今回は会社で使っているサイトに登録しています。)
&emsp;- Webex デバイスのクラウドへの登録の仕方などは今回は割愛しています m_O_m
&emsp;- Webex デバイスにて動画(Webコンテンツ）を表示させるためにデバイスに搭載されている Webエンジンを使います。
&emsp;&emsp; *- Webex Room/Dsek シリーズはディスプレイにWebコンテンツを表示することのみが可能です。*
&emsp;&emsp; *- Webアプリケーション（一般的にユーザがUIで操作を行うもの）を利用可能なのはWebex Boardシリーズ。*
&emsp;- Webex デバイスにて設定されたスケジュールで動作を自動化をするためにマクロ機能を利用。 (言語 : JavaScript)

&emsp;:sparkles:マクロフレームに関するアーキテクチャーの説明
&emsp;&emsp;&emsp;*ビデオエンドポイント カスタマイズの資料より抜粋
&emsp;&emsp;<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/4eb37809-4e0f-a7d6-86e7-f2b97bcfa377.png">
&emsp;&emsp;<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/a1933e19-8dd7-c78e-d557-04ab6395e982.png">
&emsp;&emsp;<img width="700" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/e6c6c021-bf45-38d1-495d-1d333d119405.png">

## :star: 実際に設定してみます
&emsp;:white_check_mark: Web コンテンツを表示させるために、Webex Desk Pro で Webエンジンを有効にします。
&emsp;&emsp;- Webex Desk Pro の Web UI にログインします。
&emsp;&emsp;&emsp;https://*(IPアドレス)*/web/signin  -->  Username/Password を入力
&emsp;&emsp;<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/6a1c450c-cd90-27b0-7cf9-cc7103e83fc6.png">
&emsp;&emsp;- Webエンジンに有効化します。
&emsp;&emsp;&emsp;メニューから"Settings" --> "WebEngine" を選択をして、"Configuration / WebEngine の Mode を On にします。
&emsp;&emsp;<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/9a5a2818-ca64-684f-317d-d913d6e71cc3.png">
&emsp;&emsp;これでデバイス上で Webコンテンツを表示出来るようになりました。

&emsp;  :white_check_mark: 端末に時間が来たら所定の動作をするようにマクロを設定します。
&emsp;&emsp;- Web GUI のメニューより "Macro Editor"を選択します。
&emsp;&emsp;<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/9a52a392-60e4-0887-d43c-9175ddb6f864.png">

&emsp;&emsp; Macro Editor の画面に入ります
&emsp;&emsp;<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/9e1a617b-da70-24f0-8cb3-e08d4cd13d56.png">
&emsp;&emsp;新しくマクロを作成するには “Create new macro ”を選択します。
&emsp;&emsp;<img width=600 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/28f5ca64-80eb-2d30-d6a1-3b60854d4008.png">
&emsp;&emsp;こちらのエディタにマクロを入力をして設定します。
&emsp;&emsp;<img width=800 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199936/ab395614-ce39-60e8-f23a-94391b646640.png">

###今回使ったマクロの設定

:white_check_mark:&emsp;xapiライブラリをインポート

```
import xapi from 'xapi';
```

:white_check_mark:&emsp;スケジューリングに必要な日時の情報を定義 
&emsp;( Webex Deviceのヘルプにあったサンプルを利用 )

```
function schedule(time, action) {
  let [alarmH, alarmM] = time.split(':');
  let now = new Date();
  now = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
  let difference = parseInt(alarmH) * 3600 + parseInt(alarmM) * 60 - now;
  if (difference <= 0) difference += 24 * 3600;
  return setTimeout(action, difference * 1000);
}
```
:white_check_mark:&emsp;指定する時間やアクセス先などを定義（定数）
&emsp;- 動画のURL(Youtube Link)と再生する時間(7:58)を定義
&emsp;- ミーティング URI ( admin37@ktakada-prega.webex.com )とミーティング開始時間(8:00)を定義
&emsp;- 日曜と土曜を定義

```
const OpenURLTime = '7:58’;
const url = 'https://www.youtube.com/embed/-ewm56D9DzY?autoplay=1&playlist=-ewm56D9DzY'
const Sunday = 0, Saturday = 6;
const MeetingTime = '8:00';
const MeetingUri = 'admin37@ktakada-prega.webex.com';
```
:white_check_mark:&emsp;動画再生を実行
&emsp;平日にスケジュールした時間(7:58)に指定したURLにアクセスして動画再生
&emsp;*xCommand UserInterface WebView Display [Header: "Header"] [Options: "Options"] [Title: "Title"] Url: "Url"* 

```
function openUrl() {
  const weekDay = new Date().getDay();
  if (weekDay !== Sunday && weekDay !== Saturday) {
    xapi.command('UserInterface WebView Display', { Url: url })
  }
    schedule(OpenURLTime, openUrl); // schedule it for the next day
}
schedule(OpenURLTime, openUrl);
```
:white_check_mark:&emsp;会議への接続を実行
&emsp;平日にスケジュールした時間(8:00)に指定した会議室へ接続
&emsp;*xCommand Dial Number: "Number" [Protocol:Protocol] [CallRate:CallRate] [CallType:CallType] [BookingId: "BookingId"] [Appearance:Appearance] [DisplayName: "DisplayName"] [TrackingData: "TrackingData"]*

```
function dialMeeting() {
  const weekDay = new Date().getDay();
  if (weekDay !== Sunday && weekDay !== Saturday) {
    xapi.Command.Dial({ Number: MeetingUri });
  }
  schedule(MeetingTime, dialMeeting); // schedule it for the next day
}
schedule(MeetingTime, dialMeeting);
```

####  :radio_button: 今回使ったマクロのコードの全体

```
import xapi from 'xapi';

function schedule(time, action) {
  let [alarmH, alarmM] = time.split(':');
  let now = new Date();
  now = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
  let difference = parseInt(alarmH) * 3600 + parseInt(alarmM) * 60 - now;
  if (difference <= 0) difference += 24 * 3600;
  return setTimeout(action, difference * 1000);
}

const OpenURLTime = '7:58';
const url = 'https://www.youtube.com/embed/-ewm56D9DzY?autoplay=1&playlist=-ewm56D9DzY'
const Sunday = 0, Saturday = 6;
const MeetingTime = '8:00';
const MeetingUri = 'admin37@ktakada-prega.webex.com';

function openUrl() {
  const weekDay = new Date().getDay();
  if (weekDay !== Sunday && weekDay !== Saturday) {
    xapi.command('UserInterface WebView Display', { Url: url })
  }
    schedule(OpenURLTime, openUrl); // schedule it for the next day
}
schedule(OpenURLTime, openUrl);

function dialMeeting() {
  const weekDay = new Date().getDay();
  if (weekDay !== Sunday && weekDay !== Saturday) {
    xapi.Command.Dial({ Number: MeetingUri });
  }

  schedule(MeetingTime, dialMeeting); // schedule it for the next day
}
schedule(MeetingTime, dialMeeting);
```



## :star: さいごに
最後まで読んで頂き有難うございました :smile: 　
今回は Webex デバイスのマクロ機能の中で実行できるなかでも比較的に簡単に実現な可能のものについて記事にしています。
Webex デバイスで実現出来る自動化の一例としてご参考にして頂けますと幸いです。
今後は、より高度な利用例や、外部のシステムからビデオ端末を制御したり、逆に外部のシステムに命令を投げて外部機器を制御したりする事例もご紹介していこうと思います。

まだまだ、世の中は大変な状況ではありますが、みなさまもお体には気をつけて、ゆっくりと楽しいクリスマスとお正月をお迎えくださいませ:santa:

##参考資料 
&emsp;- Cisco Collaboration Endpoint Software API Reference Guide
&emsp;&emsp; - [Cisco Webex Desk Pro, DX80, DX70](https://www.cisco.com/c/en/us/support/collaboration-endpoints/desktop-collaboration-experience-dx600-series/products-command-reference-list.html)
&emsp;&emsp; - [Cisco Webex Room Series](https://www.cisco.com/c/en/us/support/collaboration-endpoints/spark-room-kit-series/products-command-reference-list.html)
&emsp;&emsp; - [Cisco Telepresencen MX Series](https://www.cisco.com/c/en/us/support/collaboration-endpoints/telepresence-mx-series/products-command-reference-list.html)
&emsp;&emsp; - [Cisco Telepresencen SX Series](https://www.cisco.com/c/en/us/support/collaboration-endpoints/telepresence-quick-set-series/products-command-reference-list.html)
&emsp;- Cisco CE カスタマイズガイド　([CE9.2](https://www.cisco.com/c/dam/global/ja_jp/td/docs/telepresence/endpoint/ce92/sx-mx-dx-room-kit-customization-guide-ce92.pdf)/[CE9.5](https://www.cisco.com/c/dam/global/ja_jp/td/docs/telepresence/endpoint/ce95/sx-mx-dx-room-kit-customization-guide-ce95.pdf))
&emsp;- DevNet リソース : [Cisco DevNet / Room Devices](https://developer.cisco.com/site/roomdevices/)　
&emsp;- GitHub リソース : [Cisco DevNet/room-devices-macros-sample](https://github.com/CiscoDevNet/roomdevices-macros-samples)

##免責事項
本サイトおよび対応するコメントにおいて表明される意見は、投稿者本人の個人的意見であり、シスコの意見ではありません。本サイトの内容は、情報の提供のみを目的として掲載されており、シスコや他の関係者による推奨や表明を目的としたものではありません。各利用者は、本Webサイトへの掲載により、投稿、リンクその他の方法でアップロードした全ての情報の内容に対して全責任を負い、本Web サイトの利用に関するあらゆる責任からシスコを免責することに同意したものとします。