It is the top of the page

Link for moving within the page
To text (c)

このウェブサイトではサイトの利便性の向上のためにクッキーを利用します。サイトの閲覧を続行されるには、クッキーの使用にご同意いただきますようお願いします。
お客様のブラウザの設定によりクッキーの機能を無効にすることもできます。詳細はこちら

The main part starts here.

  1. ナレッジセンター
  2. 匠コラム

無線LAN位置情報APIで「働き方革命」を促進!!

匠コラム
働き方改革
ネットワーク

ビジネス推進本部 応用技術部
エンタープライズITチーム
坂田 玲子

当社では、「ICTを利活用した、人を中心とする新しいワークスタイル」を提供するため自社を実験台としてBYOD、無線LAN化、フリーアドレスといった様々な取組みを行っています。これらの取り組みにより社員は個人PCで成果が出せる好きな場所(集中エリアやコラボレーションエリアなど)で仕事を行うことができるようになりました。
しかし、どこへでも座れるため、広い社内のあるエリアは密集状態、あるエリアは空いているといった状態となり、特に多拠点から移動してきた社員は、慣れない本社を座る場所を求め彷徨っています。
そこで、この問題を解決するためのアプリケーションを開発しました!

本コラムでは、無線LAN位置情報APIを活用したアプリケーションをご紹介致します。

NOS Insight 誕生!(アプリ名は仮称です。)

会社内で作業可能な場所を可視化するといった発想から、
どこが空いているのか混み具合を会社に着く前に携帯でもチェックできるアプリが「NOS Insight」です。

NOS Insight画面

NOS Insightは、当社取扱いのCisco Connected Mobile Experiences(Cisco CMX)が持っているAPIにて社員が使用している端末の位置情報を取得し、ヒートマップとして表示することでフロアの混雑具合を確認できます
さらに、より具体的に空いている場所がわかるように、フロアをエリアごとに色分けし、その混雑率をフロアマップ周囲の円(ゲージ)にて示しています。混雑のレベルに応じゲージは赤・黄・青と自動で色分けされます。混雑率の数値は、フリーアドレスの座席数に対する端末数の割合です。
この情報を利用し、25Fが混んでいるなと思えば24Fを確認して空いているフロアに行くという活用方法もあります。

NOS Insightの仕組み

ヒートマップを表示するために、NOS Insightは1つのプログラムだけを使用しているのではなく、複数のプログラム同士をお互いに呼び出し合うことで動作しています。
機能ごとにプログラムを複数に分けることで、それぞれのプログラムを個別に修正したり追加したりすることができ、管理しやすくなるというメリットがあるのです。
では、NOS Insightで働いているプログラム達を紹介していきましょう。

1. CMX問い合わせプログラム(利用言語:Python)
定期的にCMXにAPIで問い合わせ、アクセスポイントに接続している端末情報をデータベースに保存するプログラムです。CMXからは、位置情報の他、Macaddress・IPaddress・接続しているSSID、接続している端末のメーカ等、様々な情報を取得することができます。
CMXの情報取得についての詳細は過去の匠コラムにありますので、そちらを参照ください。
https://www.netone.co.jp/knowledge-center/blog-column/knowledge_takumi_056/index.html

DB情報

2. DB情報取得プログラム(利用言語:Python)
DBに保存した情報から、端末ごとのX軸とY軸の座標を取り出すプログラムです。
この座標は、CMXに登録されているフロア地図から導き出されています。
また、取得した座標をNOS Insightの画面に表示した地図に合うようにデータを成形する仕事も行います。

取得した座標情報

3. 画面表示プログラム(利用言語:HTML、JavaScript)
ヒートマップ画面を表示するプログラムです。HTMLは静的な画面表示、JavaScriptは動的な処理を行うために使用するプログラムです。
ヒートマップのような複雑な機能を1から作ろうとすると、大変で時間がかかってしまいます。そのためJavaScriptには、ライブラリというものが用意されています。
ライブラリとは、使用頻度の高い機能のプログラムを再利用できる形にまともめたもので、今回はheatmap.js(https://www.patrick-wied.at/static/heatmapjs/)というライブラリを使用しています。
heatmap.jsを使うと、「2. DB情報プログラム」で取得したXY座標を決められた場所に代入するだけでヒートマップを表示することができます。
ヒートマップを形作る1つ1つの点は1端末(1座標)を表します。heatmap.jsのプログラムに修正を加える事で、点の半径、端末が近い座標に5端末集中した場合に赤く表示するなどの調整で作成しています。
またDBの情報は定期的に変更されていることから常に最新情報を取得するため、JavaScriptのAjaxを使ってヒートマップの自動更新を行っています。

4. コントローラ
名前の通りプログラム達を管理するプログラムです。
ユーザからのアクセス受付、プログラムへの命令等が仕事です。

NOS InsightはMVCモデルと呼ばれるモデルに基づいて設計されています。
MVCモデルとはアプリケーションソフトウェアを実装するためのデザインでModel(モデル)、View(ビュー)、Controller(コントローラ)という3つの要素に分割します。
紹介した4つのプログラム達も3つの要素にあてはまります。

モデルの役割

要素名 役割 Insightのプログラム
モデル データ管理 1.CMX問い合わせプログラム
2.DB情報取得プログラム
ビュー 画像制御 3.画面表示プログラム
コントローラ 処理制御 4.コントローラ

最後にNOS Insightのデータの流れを全体図とともにまとめて見ていきましょう。
①コントローラにユーザブラウザからのInsight画面表示の依頼が届きます。
②コントローラは「3.画面表示プログラム」をユーザブラウザに渡します。
③ユーザブラウザに入った、「3.画面表示プログラム」はコントローラに対し、ヒートマップの画面を要求します。
④コントローラは 「2.DB取得プログラム」にヒートマップ情報を要求し取得します。
⑤コントローラはユーザブラウザにヒートマップ情報を渡します。

ヒートマッププログラム全体図

まとめ

いかがでしたでしょうか?今回ご紹介したNOS Insight以外にも、ネットワンの得意な「インフラ構築」に対する付加価値として「API+プログラム」でより使いやすく、よりイノベーティブなアプリを沢山開発しています。この匠コラム、またその他の場所で順次ご紹介していきますので、乞うご期待ください!

執筆者プロフィール

坂田 玲子

ネットワンシステムズ株式会社 ビジネス推進本部 応用技術部 ENTITチーム
ネットワンアカデミー講師として、約10年マルチベンダ環境における企業やサービスプロバイダのネットワーク構築・運用コース、RedHatコースを担当していたが、自動で演習環境を提供するセルフラボを開発したことで、プログラムに目覚め、講師からアプリ開発担当者に転身し現在に至る。
イラストが得意で、当社のキャラクター「コアルータン」をデザインした。

  • CCIE RS
  • CCIE SP
  • シスコ認定インストラクター(CCSI)
  • レッドハット認定インストラクター(RHCI)
当社のキャラクター「コアルータン」

Webからのお問い合わせはこちらから

ナレッジセンターを検索する

カテゴリーで検索

タグで検索