LINE Front-end Framework(LIFF)でアプリケーションを開発したい - 6日目

2020年5月4日 22:29

本日から「施設一覧」画面のサーバサイドの開発をしていきます。

EJSのインストール

テキストではEJSを使用していたのですが、LIFFスターターアプリにはEJSが含まれてないっぽいので、インストールします。
「line-liff-v2-starter」のフォルダに移動し、コマンドを実行。

$ npm install --save ejs

「node-modules」フォルダに「ejs」フォルダが作成されました。
また「package.json」にも「ejs」の行が追加されました。

  "dependencies": {
   "ejs": "^3.1.2",
   "express": "^4.17.1"
 },

画面のテンプレート作成

フォルダ構成をテキストに合わせるため、アプリのディレクトリに「views」フォルダを作成し、そこに「予約一覧」画面のテンプレート「reservation.ejs」ファイルを作成します。

reservation.ejs

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta http-equiv="content-type"
           content="text/html"; charset="UTF-8">
       <title>予約一覧</title>
       <link type="text/css" href="./style.css" rel="stylesheet">
   </head>
   <body>
       <h1>予約一覧</h1>
       <div role="main">
           <p><%-content %></p>
       </div>
   </body>
</html>

ルーティング

テンプレートの「content」部分に、データベースから取得した設備の一覧を表示しようとしています。データベースからの取得部分をメインプログラム（index.js）に実装するとごちゃごちゃするため、「routes」フォルダに「reservation.js」として実装します。
フォルダとファイルを作成します。

reservation.js

const express = require('express');
const router = express.Router();

router.get('/', function(req, res) {
   res.render('reservation', {
       content : 'dummy content',
   });
});

module.exports = router;

テンプレート・ルーティングによるメインプログラムの修正

テンプレート、ルーティングの追加にあわせてメインプログラム（index.js）を修正します。

index.js

const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
const myLiffId = process.env.MY_LIFF_ID;

const ejs = require('ejs'); // ★★★追加★★★
const reservationRouter = require('./routes/reservation'); // ★★★追加★★★

app.set('view engine', 'ejs'); // ★★★追加★★★

app.use(express.static('public'));
app.use('/reservation', reservationRouter); // ★★★追加★★★

app.get('/send-id', function(req, res) {
   res.json({id: myLiffId});
});

app.listen(port, () => console.log(`app listening on port ${port}!`));

テンプレート・ルーティングの動作確認（ローカル）

herokuコマンドでNode.jsを起動します。

$ heroku local
[OKAY] Loaded ENV .env File as KEY=VALUE Format
15:25:43 web.1   |  app listening on port 5000!

ブラウザから「http://localhost:5000/reservation」にアクセスし、「予約一覧」画面が表示されることを確認します。

スクリーンショット 2020-05-04 15.40.24

テンプレート・ルーティングの動作確認（heroku）

herokuにログインし、ローカルの修正内容を反映します。

$ heroku login
$ git add .
$ git commit -am "Template and routing"
$ git push heroku master

LINE公式アカウントの管理画面で「リッチメニュー＞コンテンツ設定＞アクション＞タイプ」を開き、URLの末尾に「/reservation」を追加します。

スクリーンショット 2020-05-04 16.03.23

自身のスマートフォンで公式アカウントのトークページを開き、「施設一覧」ボタンを押して「予約一覧」画面が表示されることを確認します。
※ボタン名と画面名が違うのはあとで直します。

PostgreSQLからデータを取得

Node.jsからPostgreSQLに接続するためには「node-postgres」というものが必要のようなので、インストールします。

$ npm install pg --save

インストール後、「node-modules」フォルダに「pg」「pg-connection-string」などのフォルダができたことを確認します。

次に、以下のサイトを参考に「postgres.js」ファイルを作成します。

「予約一覧」画面のテンプレートを修正します。※postgres.jsの呼び出しが難しかったので、ひとまず使用しないように実装しています。

reservation.js

const express = require('express');
const router = express.Router();
const { Client } = require('pg');
// const { getPostgresClient } = require('./postgres');

const client = new Client({
   user: 'keisuke',
   host: 'localhost',
   database: 'develop',
   password: '',
   port: 5432,
})

router.get('/', function (req, res) {
   client.connect();

   var content = [];
   var sql = 'select * from m_facility';
   client.query(sql, function (err, result) {
       content = result.rows;
       client.end();
       res.render('reservation', {
           content: content,
       });
   });
});

module.exports = router;

テーブルから施設名が取得できることを確認します。

スクリーンショット 2020-05-04 22.16.48

本日はここまで。明日はherokuで同じことができるようにします。

この記事が気に入ったらサポートをしてみませんか？