Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

ガントチャートもFacebook風もこれ一つでOK! 多彩なUI表現を可能にするSpread.Viewsを使ってみよう

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

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

 本連載では、グレープシティが開発するJavaScriptライブラリ「SpreadJS」の 収録コントロール「Spread.Views」を活用して、IoT時代に役立つさまざまな アプリケーションを作っていきます。第1回となる今回は、Spread.Viewsの概要と使い方を紹介します。

目次

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

通常、UIを作るのはかなり面倒

 通常HTML/CSS/JavaScriptでUIを作るのは結構手間がかかります。その証拠にUI系のライブラリはUI毎に存在します。

データビジュアライズ全般

 データビジュアライズ系のJSライブラリで真っ先に名前が挙がるイメージのあるライブラリがD3.jsです。他にもChart.jsなども有名です。これらを使うと面倒なグラフ表現を簡単に実現できます。

カレンダーUI

 カレンダーを作りたいという要望はすごく多いと思います。自前で作ろうとすると、UI部分に加えて曜日や日付の処理、閏年の計算など地味に手のかかる作業が多いです。FullCalendarなどのライブラリ使うことで作業が簡略化できます。

メーソンリーUI

 アパレルやアート系など写真を多く使うサイトではメーソンリーUIの需要が高いです。ただ、メーソンリーUIの場合は表示領域に対して何個の画像があるか、画像の高さや幅はどれくらいかを元に動的にレイアウトを変える必要があり、計算が大変です。 Masonry.jsなどのライブラリを使うことで作業時間を短縮することができます。

 これらのライブラリが個別で存在することから、それぞれのUIを作ることの手間が大きいことが分かります。

 ある程度規模感のあるWebシステムを作る場合に複数のUIライブラリが必要となる場合がありますが、機能毎にUIライブラリを導入すると、競合して上手く動作しないといった現象もあり得ます。

 Spread.Viewsではここで紹介したビジュアライズ、カレンダー、メーソンリーを含め、さまざまなUI表現を一つのライブラリで実現しています。一つのライブラリで複数のUIを解決できるのはSpread.Viewsの強みでもあります。

Spread.Viewsとは

 Spread.Viewsは、多彩なグリット表現やUIを簡単に実現できるJavaScriptライブラリです。JavaScriptライブラリ群「SpreadJS」という製品の一機能で、グレープシティという仙台の会社が提供しています。

 SpreadJSの公式サイトはこちらになります。

SpreadJS、Spread.Sheets、Spread.Viewsの立ち位置

 この公式サイトの画面キャプチャを見てもらうと分かりますが、SpreadJSという製品には、大枠の機能として、Spread.ViewsのほかSpread.Sheetsというものがあります。

 今回紹介するSpread.Viewsは、2017年9月よりSpreadJSに新たに追加されたライブラリになります。もう一方のSpread.Sheetsは、以前ではそれ単体を指してSpreadJSと呼ばれていました。

 SpreadJSやSpread.Sheetsについては、連載「高機能JavaScriptグリッド部品「SpreadJS」の活用」をご参照ください。


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

著者プロフィール

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

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

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5