こんにちは、システムエンジニアの井戸川です。弊社では4ヶ月ほど前から、1日1回ストレッチの時間を作っています。

毎日ある時間になると、↓こんな感じで、お知らせが来て、
モニターからストレッチ動画が流れ、2~3分間のストレッチを行います。
（※通常は、このモニターで勤怠状況を表示しています。）

在宅勤務の人は、会社のモニターが見れないため、
チャットのお知らせを見て、家で動画の流れるページを見てもらおうと思い、この通知機能を作りました。

ちなみに bug lifeさんという Youtube のアカウントがオフィスで手軽にストレッチできる動画を提供してくれているので、こちらを利用させていただいています。

●やること
・自動再生機能：1日1回、社内にあるモニターで、複数の候補からランダムで選出されたストレッチ動画を流す。
・チャットワークで告知する機能：チャットワークAPIを使って自動投稿する。

I. 自動再生機能

1. 行う処理

①JavaScriptである間隔で時間をチェックする
②再生する動画のYoutubeIDをランダムに生成
③指定した時間に動画を再生する
④動画が終わる時間に元の画面に戻す
⑤タイマーを止める

$(function(){
	var timer;
	var onair = false;
	// ①30秒ごとに時間をチェックする処理
	timer = setInterval(function(){
		var d = new Date();
		var t = d.getHours();
		var m = d.getMinutes();
		var s = d.getSeconds();

        //②YoutubeIDを配列に入れる
        var videoId = ['YoutubeID_1',
                       'YoutubeID_2',
                       'YoutubeID_3',
　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　・
　　　　　　　　　　　　　　　　・
                       'YoutubeID_xxx'];
        
		//③1日1回16:55辺りに動画を再生する
		if( t==16 && m>=55 && s>=0 && !onair ){
            $('.col-md-12, .col-md-6').css({
                'display': 'none'
            });
            
            $('#youtube').css({
                'display': 'block',
                'position': 'fixed',
                'z-index': '10'
            });
            
            $('<iframe width="2100" height="1100" src="https://www.youtube.com/embed/'+randAry(videoId)+'?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>').appendTo('#youtube');
            
            onair = true;
		}
		//④元の画面に戻す
		else if( t==16 && m>=57 && s>=10 && onair){
            $('.col-md-12, .col-md-6').css({
                'display': 'block'
            });
            
            $('#youtube').css({
                'display': 'none'
            });
            
            $('#youtube').html('');
            
            //⑤終わったらタイマーを止める
            clearInterval(timer);
		}
	}, 30000);
});


//②YoutubeIDをランダムに生成するための関数
function randAry(i_ary){
    //添字を全て取得
    var aryKeys = Object.keys(i_ary);
    //対象の添字をランダムに取得
    var index = aryKeys[Math.floor(Math.random() * aryKeys.length)];
    return i_ary[index];
}

2. 説明

clearInterval(timer);

上記のように、タイマーを止める処理をしないと、timer関数は30秒ごとに動いてしまうので、

if( t==16 && m>=55 && s>=0 && !onair ){
・
・
・

上記のif文に当てはまった時に、またYouTubeが再生されてしまうことを防ぐため、
タイマーを止める処理が必要になります。

II. チャットでお知らせ機能

1. 行う処理

①チャットワークAPIを叩くPHPを作成する。
②バッチ処理で指定時間に①のPHPを動かす

<?php
$room_id = "ここにメッセージを送信したいチャットのroom idを入れる";
$token = "発行されたAPI Tokenを入れる";

//エンドポイント：APIにつながるためのURL
$url = "https://api.chatwork.com/v1/rooms/$room_id/messages";

//parameter <==> 'body'
$data = array (
    'body' => 'あと少しでストレッチ動画はじまります！！！！！！！'
);
//header information
$header = array (
    'X-ChatWorkToken: '.$token
);

$option = array (
    'http' => array (
        'method' => 'POST',
        'header' => implode("\r\n", $header),
        'content' => http_build_query($data, '', '&'),
    )
);

//file_get_contentでpost送信する
$rs = file_get_contents($url, false, stream_context_create($option));

//戻り値としてmsg idを返す(jason形式)
print_r($rs);

月曜日～金曜日、16:50にチャット送信をしたいので、Cronに下記のように設定します。
(※PHPファイルのパスは適宜設定します。)

50 16 * * 1-5 /usr/bin/php announce_stretch.php

2. 説明

・チャットワークAPIを使えるようにするには、プレビュー版が公開されています。
1. 申請します。
2. tokenを手に入れます。（※細かい作業はいろんなとこに載ってるので割愛します。)

チャットワークAPIのエンドポイントは
公式サイトで紹介されています。

これで、Cronに設定したバッチ処理で、指定した時間にチャットAPIをたたくPHPが動き、自動に投稿されます。

次回は、
チャットお知らせ機能に使ったチャットワークAPIも活用した機能を利用した、
もうひとつの社内システム開発について書きたいと思います。