Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

目次

デプロイとSpreadJSのライセンスキー

 運用するときには本番環境にデプロイしますが、その際、Spread.Viewsのライセンスキーの登録をする必要があります。

 ライセンスキーの登録をしないでデプロイするとこのように黒い画面が表示されてしまいます。

 ライセンスキーの登録は、グレープシティのライセンス管理システムから行います。利用するドメインを登録してライセンスキーを発行します。

 画面の案内をもとに進めましょう。

 ライセンスキーが取得できたらlicense.jsを編集します。今回の場合はassets/vendor/spread/js/license.jsになります。

 デフォルトでは以下のようになっていますが、GC.Spread.Views.LicenseKeyの箇所にライセンスキーを登録します。

license.js
//Please provide valid license key.
//GC.Spread.Views.LicenseKey = 'Your key here';

//Set GC.Spread.Sheets.LicenseKey becuase there are some demos use GC.Spread.Sheets components
// if (GC.Spread.Sheets) {
//     GC.Spread.Sheets.LicenseKey = 'Your key here';
// }

 以下のように編集しましょう。GC.Spread.Sheets.LicenseKeyは、今回は利用しないのでコメントアウトしたままの状態で問題ないです。

license.js
//Please provide valid license key.
GC.Spread.Views.LicenseKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

//Set GC.Spread.Sheets.LicenseKey becuase there are some demos use GC.Spread.Sheets components
// if (GC.Spread.Sheets) {
//     GC.Spread.Sheets.LicenseKey = 'Your key here';
// }

 更新するとこのようにデプロイした先でも問題無く表示されました。

 URLがしっかりとドメインを指していることが確認できます。

運用

 実際に運用してみましたが、

  • 自分の使っているSuicaなどで出勤登録できて楽しい
  • カレンダー自体はどこからでも確認できるので他の社員の勤怠状況がリモートでも把握できる
  • 見た目が良い

などの感想を得られました。

 今回はSpread.Viewsがフロント側のライブラリなので、できるだけフロント側で処理を書くようにしましたが、実際の運用ではデータの扱いや保存などはサーバー側に任せるケースの方が多いと思うので

  • DBへの情報保存
  • 新規ユーザーの登録フロー
  • Raspberry Pi起動時にプログラムを自動起動

などを追加していくと良いと思います。

まとめ

 いかがでしたでしょうか。今回はSpread.Viewsの活用例としてRaspberry PiとElixir+Phoenixで出勤管理システムを作りました。Spread.Viewsを使うことで開発者が見た目をあまり意識せずにリッチなUIを実現できますし、今回のような実装を行えば外部のライブラリとも連携することができます。

 皆さんも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