Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Spread.ViewsとPayPalを連携して商品発送管理システムを作る

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

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

目次

実装

 それでは実際に作っていきます。サーバーサイドの言語はNode.js(v9.5.0)を利用します。

 また、筆者の環境はmacOS High Sierra(v10.13.1)となっています。

1. Node.jsでアプリケーションの土台となるサーバー構築

 まずは基本となるWebサーバーを立てていきます。

 ds_goods_managementというフォルダを作成し、その中で作業を進めます。

$ mkdir ds_goods_management
$ cd ds_goods_management
$ npm init -y

 また、前回記事同様にExpressを利用し、POSTリクエストを扱いやすくするbody-parserをインストールします。

 Expressは前回記事同様に執筆時点(2018年2月)ではまだα版ですが、今後5系がデファクトになる将来を見越して使ってみます。

 1月時点で5.0.0-alpha.3、2月時点で5.0.0-alpha.6ということで開発スピードが早いですね。

$ npm i --save express@5.0.0-alpha.6 body-parser

 server.jsindex.htmlpublicフォルダを作成し、server.jsindex.htmlにプログラムを記述していきます。

$ touch server.js
$ touch index.html
$ mkdir public
server.js
'use strict';

const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static(__dirname + '/public'));

const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => res.sendFile(__dirname+'/index.html'));

app.listen(PORT);
console.log(`listening on *:${PORT}`);

 次にindex.htmlです。デモページにあるコードをコピペしましょう。

 ちなみに、現状のプロジェクトのファイル構成は以下のような感じです。

$ ls
index.html        package-lock.json public
node_modules      package.json      server.js

 サーバーを起動して動作確認をします。

$ node server.js
listening on *:3000

 サーバーが起動するので、ブラウザからhttp://localhost:3000/にアクセスするとこのようなページが表示されます。

2. デモのトレリスUIを動かす

 必要なファイルとフォルダを設置していき、デモを手元で動かしてみます。

 index.htmlのリソース読み込み箇所を参考に進めます。

index.html
省略

    <link rel="stylesheet" type="text/css" href="css/gc.spread.views.dataview.10.3.0.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-snippet.min.css">
    <script src="js/gc.spread.common.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/gc.spread.views.dataview.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/locale/gc.spread.views.dataview.locale.ja-JP.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/plugins/gc.spread.views.gridlayout.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/plugins/gc.spread.views.trellisgrouping.10.3.0.min.js" type="text/javascript"></script>
    <script src="js/zepto.min.js" type="text/javascript"></script>
    <script src="js/license.js" type="text/javascript"></script>
    <script src="data/timelineBoard.js" type="text/javascript"></script>

省略

 まずはpublicフォルダcssjsdataの三つのフォルダを作成します。

$ mkdir public/css
$ mkdir public/js
$ mkdir public/data
CSSファイル

 cssフォルダ内にbootstrap-snippet.min.cssgc.spread.views.dataview.10.3.0.cssを設置します。

JSファイル

 jsフォルダ内にgc.spread.common.10.3.0.min.jsgc.spread.views.dataview.10.3.0.min.jszepto.min.jslicense.jsを設置し、さらにlocalepluginsフォルダを作成します。js/localeフォルダ内にgc.spread.views.dataview.locale.ja-JP.10.3.0.min.jsを設置し、js/pluginsフォルダ内にgc.spread.views.gridlayout.10.3.0.min.jsgc.spread.views.trellisgrouping.10.3.0.min.jsを設置します。

テストデータのファイル

 dataフォルダ内にtimelineBoard.jsを設置します。このファイルは実データが入ってきたら削除して構いません。

 画像がない状態ですが、この状態でhttp://localhost:3000をリロードすると、トレリスUIができあがります。

 実際に動かすことも可能です。


  • 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