Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Elixir+PhoenixとSpread.Viewsでリアルタイムな出勤管理アプリを作ろう

IoT時代の救世主! SpreadJSで作るデータ可視化アプリ 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、グレープシティが開発するJavaScriptライブラリ「SpreadJS」の 収録コントロール「Spread.Views」を活用して、IoT時代に役立つさまざまな アプリケーションを作っていきます。今回は、Spread.Viewsのカレンダー機能を使って出勤管理アプリを作ります。

目次

はじめに

 こんにちは、dotstudio株式会社n0bisukeです。前回に引き続き、簡単なコードでさまざまなUIの実装を実現できるライブラリ「Spread.Views」を紹介します。

 前回の記事「ガントチャートもFacebook風もこれ一つでOK! 多彩なUI表現を可能にするSpread.Viewsを使ってみよう」は、Spread.Viewsの機能を包括的に紹介しましたが、今回からは実際に実務で活用できそうな内容を紹介していきます。

今回の内容

 今回は社内の出退勤の管理システムをSpread.Viewsを使って作っていきます。

 構成は以下になります。

  • デバイス側:非接触型ICカードリーダー+Raspberry Pi
  • サーバー側:Elixir/Phoenix
  • クライアント側:Spread.Views(カレンダービュー)

 システムの流れは、社員が登録しているSuicaなどのカードをカードリーダにかざすと、その情報がサーバー側に送られ、クライアント側にリアルタイムに反映される仕組みとなっています。

利用技術の紹介

 実装に入る前に各利用技術の紹介をします。

非接触型ICカードリーダー+Raspberry Pi

 今回は、ソニーが開発している非接触型ICカードリーダー「PaSoRi」を使います。Suicaや電子マネーの残金を知ることができます。

 通常PaSoRiはPCに接続して利用するものですが、今回はPCではなくRaspberry PiにUSBで接続します。Raspberry Piとは、Linuxが動くシングルボードコンピュータです。今回は最新版のRaspberry Pi 3を利用します。

Elixir/Phoenix

 最近リアルタイムウェブを実現するにあたり、Node.js+Socket.ioの構成の代替となる可能性としてElixirが注目を浴びています。ソーシャルゲームの裏側などで利用され始めています。PhoenixはElixirのWebフレームワークにあたります。

Spread.Viewsの「カレンダービュー」機能

 本連載の主役となるSpread.Viewsです。

 「カレンダービュー」という機能があり、簡単な記述でカレンダーを作ることができ、データセットを与えることでカレンダーの日付にマッピングしてくれます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 菅原のびすけ(dotstudio株式会社)(スガワラ ノビスケ)

     日本最大規模のIoTコミュニティ「IoTLT」主催。岩手県立大学大学院ソフトウェア情報学研究科を卒業後、株式会社LIGでWebエンジニアとして入社し、Web開発に携わる。2016年にdotstudio株式会社を立ち上げ、今はIoT領域を中心に活動している。JavaScript Roboticsコミ...

バックナンバー

連載:IoT時代の救世主! SpreadJSで作るデータ可視化アプリ
All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5