Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Spread.ViewsとRaspberry Pi+ESP32搭載ボードNefry BTでインフルエンザ対策のBIツールを作る

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

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

目次

Node.jsでサーバー構築

 それでは実際に作っていきます。まずは、Node.jsでWebアプリを作るにあたり一般的なフレームワークであるExpressを使ってWebサーバーを構築します。

 ただ作るのだと面白みがないので、今回はチャレンジ要素としてExpressの5系を導入してみました。

 執筆時点(2018年1月)ではまだα版ですが、今後5系がデファクトになる将来を見越して使ってみます。実運用で利用する人は4系を使った方が安心できると思います。

mkdir ds_office_bi
cd ds_office_bi
npm init -y
npm i --save express@5.0.0-alpha.3
touch server.js

 server.jsに以下を記述します。

server.js
`use strict`;

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello World');
});

app.listen(3000);

 サーバーを起動してみます。

node server.js

 http://localhost:3000/にアクセスするとHello Worldと表示されます。

フロント側の静的ファイルの準備

 今のままでは文字列を返すだけのWebサイトなので、ここにSpread.Viewsのコードをホスティングしていきましょう。

 まずはindex.htmlを作成します。

index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>dotstudioオフィス環境のBIツール</title>
    </head>
    <body>
        <h1>dotstudioオフィス環境のBIツール</h1>
    </body>
</html>

 server.jsなどと同じ階層に作成するのでこのような構成になります。

$ ls

index.html        package-lock.json
node_modules      package.json      server.js

 次にserver.jsのres.send()res.sendFile()に変更します。

 res.sendFile()メソッドではindex.htmlのパスを指定するとindex.htmlの中身を展開してくれます。

server.js
`use strict`;

const express = require('express');
const app = express();

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

app.listen(3000);

 ちなみにExpress4系まではres.sendfile()でしたが、5系ではres.sendFile()とキャメルケースに変更されるようです。

 server.jsを修正したら、Ctrl+cでサーバーを落としてから再度node server.jsコマンドでサーバーを起動しましょう。

 http://localhost:3000にアクセスするとindex.htmlの内容が表示されていることを確認できます。

 次にCSSの利用です。publicフォルダを作成してそこに静的ファイルを設置します。

mkdir public
mkdir public/css
mkdir public/js
touch public/css/main.css

 publicフォルダ内にcssとjsフォルダ、cssフォルダ内にmain.cssファイルを作成しました。

 main.cssには確認用に背景を青くするコードを記述します。

public/css/main.css
body{
    background-color: blue
}

 index.html側では/css/main.cssを指定して呼び出します。

index.html
<html>
    <head>
        <meta charset="utf-8">
        <title>dotstudioオフィス環境のBIツール</title>
        <link rel="stylesheet" href="/css/main.css">
    </head>
    <body>
        <h1>dotstudioオフィス環境のBIツール</h1>
    </body>
</html>

 サーバー側ではapp.use(express.static(__dirname + '/public'));を利用して、静的サイトはpublicフォルダを参照する形にします。

server.js
`use strict`;

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

 これで下準備は完了です。


  • 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