前回「[4]会議室使用状況センサーの自作 〜センサー状態をWebで確認〜」でJavascriptを使ってWebページを作成しました。今回は最終回である「サイボウズガルーンに設定」を行います。
1. 会議室使用状況センサーの実装構想（振り返り）
目標は、会議室に自作したIoT人感センサーを設置して、センサー状態を会社のスケジューラーであるサイボウズガルーンに表示させる。
実現方法としては以下のように考えて作ります。
1. マイコンと人感センサーを使って電子工作(IoTデバイス製作)
2. センサーデータの保管先IoTサーバのセットアップ
3. IoTデバイスのプログラミング
4. JavaScriptで簡単なページを作成して、IoTサーバの情報を取得し表示
5. サイボウズガルーンに設定←今回はこちらの話
2. ガルーンに設定する基本的な流れ
サイボウズガルーンに表示させる仕組みとしては、ポータルを作成して、タブで表示させる方法をとります。
完成イメージは、以下のような感じ。
2.1 サイボウズガルーン設定手順概要
- 会議室イメージをファイル管理に保管
- HTMLポータルで、タイトルページを作成（注意書きなどを入れてます：必要なければ不要）
- HTMLポータルで、センサーステータスのページを作成
- ポータルに、会議室空室情報のページを作成
3. サイボウズガルーンに設定
3.1 会議室イメージをファイル管理に保管
会議室イメージのイメージをどこかのサイトに保管しておく必要がありますが、ガルーン内でまとめておきたいので、ガルーンのファイル管理機能を使用して、ここの適当な場所に保管しておきます。
登録が完了したら、ファイル名欄にある「Confmap.png」のリンクを右クリックなどして、リンク先を控えておきます。
3.2 HTMLポータルで、タイトルページを作成
これは必要であれば作ってもらえば良いかと思います。
システム管理 > 各アプリケーションの設定 > ポータル で以下のような画面になるので、HTMLポートレットから設定します。
HTMLポートレットは、適当に以下のようにしました。
3.3 HTMLポータルで、センサーステータスのページを作成
センサーステータスページも上記と同じような手順で作成します。
ただポートレットの内容については、前回の「会議室使用状況センサーの自作〜(4) センサー状態をWebで確認〜」で作成したJavascriptを少し手直しして、コードを貼り付けます。
手直しする点は以下の通り
削除：
1-5、41、131−132行目
ガルーンでは<body>タグ内だけで良いです。
41行目は削除しておかないと設定時支障がおきます。
修正：
47行目
3.1でconfmap.pngのリンクに変更(ドメイン分は削除)
50、60、69、78行目
各会議室の日スケジュールを表示してリンクを書き換えます。このときリンク内にある”&bdate=xxxx-xx-xx”の日付の部分を削除しておくとクリックした日が表示されます。
52、61、70、79行目
テスト段階でステータス表示を綺麗に位置設定した際、サイボウズガルーンではだいたいtop–7px、Left–8pxして位置調整しておきます。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style type="text/css">
.Label_Use {
position: absolute;
padding: 5px 5px;
width: 80px;
height: 70px;
text-align: center;
color: white;
font-family: monospace;
background: #0000cd;
}
.Label_Vacant {
position: absolute;
padding: 5px 5px;
width: 80px;
height: 70px;
text-align: center;
color: white;
font-family: monospace;
background: #32cd32;
}
.Label_OOS {
position: absolute;
padding: 5px 5px;
width: 80px;
height: 70px;
text-align: center;
color: white;
font-family: monospace;
background: #555555;
}
</style>
<!- Load Javascript files ->
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<!- Conf. area map ->
<div class="content-wrap">
<div style="width: 400px">
<img src="./confmap.png" alt="topimg">
<!- 会議室A ->
<a href="http://garoon.xxxx.co.jp/scripts/cbgrn/grn.exe/schedule/personal_day?uid=f3&gid=f" target="_blank">
<!- Garoonでは、top-7,Left-8px ->
<div id="会議室A" class="Label_OOS" style="top:51px; left:58px;">
<span style="font-size:150%">会議室A</span><br />
<span id="会議室A1"></span><br />
<span id="会議室A2">Out of</span><br />
<span id="会議室A3">service</span>
</div></a>
<!- 会議室B ->
<a href="http://garoon.xxxx.co.jp/scripts/cbgrn/grn.exe/schedule/personal_day?uid=f2&gid=f" target="_blank">
<div id="会議室B" class="Label_OOS" style="top:51px; left:162px;">
<span style="font-size:150%">会議室B</span><br />
<span id="会議室B1"></span><br />
<span id="会議室B2">Out of</span><br />
<span id="会議室B3">service</span>
</div></a>
<!- 会議室C ->
<a href="http://garoon.xxxx.co.jp/scripts/cbgrn/grn.exe/schedule/personal_day?uid=f4&gid=f" target="_blank">
<div id="会議室C" class="Label_OOS" style="top:164px; left:58px;">
<span style="font-size:150%">会議室C</span><br />
<span id="会議室C1"></span><br />
<span id="会議室C2">Out of</span><br />
<span id="会議室C3">service</span>
</div></a>
<!- 会議室D ->
<a href="http://garoon.xxxx.co.jp/scripts/cbgrn/grn.exe/schedule/personal_day?uid=f5&gid=f" target="_blank">
<div id="会議室D" class="Label_OOS" style="top:164px; left:162px;">
<span style="font-size:150%">会議室D</span><br />
<span id="会議室D1"></span><br />
<span id="会議室D2">Out of</span><br />
<span id="会議室D3">service</span>
</div></a>
</div>
</div>
<!– milkcocoaのセットアップ –>
<script type="text/javascript">
var milkcocoa = MilkCocoa.connectWithApiKey('BBBBB', 'CCCCC', 'DDDDD');
var dsh = milkcocoa.dataStore('EEEEE').history();
var room = "";
var stat_room = "";
var one_hour = 70 * 60 * 1000; // 70分のシリアル値取得
var today = new Date().getTime();
var pasttime = today - one_hour;
dsh.sort('desc');
dsh.size(10);
dsh.span(pasttime,today);
dsh.on('data', function(datas) {
datas.forEach(function(data) {
room = data.value.RMname;
stat_room = data.value.stat;
(stat_room=="Vacant")?document.getElementById(room).className="Label_Vacant":(stat_room=="IN USE")?document.getElementById(room).className="Label_Use":document.getElementById(room).className="Label_OOS";
$('#'+room+'1').text(stat_room);
$('#'+room+'2').text(Serial2Date(data.timestamp));
$('#'+room+'3').text(Serial2Time(data.timestamp));
});
});
dsh.run();
function Serial2Date(timestamp){
var d = new Date(timestamp);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDate();
return ( year + '/' + month + '/' + day);
}
function Serial2Time(timestamp){
var d = new Date(timestamp);
var hour = ( d.getHours() < 10 ) ? '0' + d.getHours() : d.getHours();
var min = ( d.getMinutes() < 10 ) ? '0' + d.getMinutes() : d.getMinutes();
var sec = ( d.getSeconds() < 10 ) ? '0' + d.getSeconds() : d.getSeconds();
return ( hour + ':' + min + ':' + sec );
}
</script>
</body>
</html>3.4 ポータルに、会議室使用状況の情報ページを作成
最後にポータルを作成します。ボータルの一覧から新規で追加します。
レイアウトを、下段２カラムの「B：30% C：70%」で設定
上段に3.1で作成したタイトルページを、下段Bに3.2で作成したステータスページを配置。下段Cは「スケジュール（日表示）」を配置し、C内の歯車マークから会議室のスケジュールをセットして完了。
4. あとがき
全5編にわたる長い記事をご覧いただきありがとうございました。
秘書から10室ある会議室の利用状況をリアルタイムで把握したいとのリクエストがあり、これを製作した当初、「トイレ空き状況センサー」を作っている方がいて、会議室利用状況に応用できないかトライしてみました。
最初は、センサーチェックが頻繁におきてステータスが正確ではない状態になっていましたが、今回のプログラムでは私どもの会社ではちょうど良いステータス切り替えになっていると思います。
もし調整が必要な場合は、「その３」のプログラム内にある「ON_Cnt_Check」、「OFF_Cnt_Check」の数値を変更してもらえれば良いかと思います。
最後に今更ですが、今回使用したIoTサーバ（milkcocoa）は、頻繁に落ちるのでAWSに変更した方が良いかもしれません。
今後機会あればAWS版も記事にしたいと思います。
(※2019/9/6更新：milkcocoaの終了に伴い、BaasをmilkcocoaからBeeBotteへ変更した記事を追加掲載しました。詳しくは、「会議室使用状況センサーの自作〜(2′) BeeBotteの設定〜」をご参照ください。)
コメント