//tips
昨晩Johnと打ち合わせを行った。一旦node.jsとexpress、ejsで作ってみることになった。
実務ベースでは下記が主流とのことだが今回はシンプルなのでexpressでもいけるだろうとのこと。
NEST.js(background)
Multer.js(route lib)
React(front)
https://docs.nestjs.com/techniques/mvc
https://github.com/codejockie/imgPloadr
久しぶりに英語で話して冷や汗で汗だくになった。福岡のweatherを福岡の上田に聞き間違えるなど、いろいろやらかす。はい、英会話再スタート。netflixだけでは維持できなかった。英語についてはNicholas先生にしばいてもらうことにした。
https://preply.com/en/online/english-tutors
//smart contract
データの取得をサーバとクライアントの間ではなく、外部サイトからデータを引っ張ってくる方法も考える。
クライアントからサーバにアクセスし、サーバ内から別のサイトにアクセスしてRSSデータを受け取り、それをクライアントに返すことをやっていく。
指定のwebサイトにアクセスし、データを取り出すネットワークアクセス機能はすでに組み込まれているhttp,httpsを利用。RSSはXMLデータなのでそれをパースしてjsのオブジェクトにする機能が必要となる。
これはxml2jsパッケージを利用する。
Npm install xml2js
今回はgoogleニュース一覧を表示させてみる。下記からrssを取得する。
https://news.google.com/rss?hl=ja&gl=JP&ceid=JP:ja
早速このAPIを活用。
Hello.jsに反映。
const express = require('express');
const router = express.Router();
//helloページでのRSS読み込みのためこちらでモジュールロード
const http=require('https');
const parseString=require('xml2js').parseString;
router.get('/', (req, res, next) =>{
var opt={
host:'news.google.com',//アクセスホスト
port:443,//ポート番号。通常は８０だがhttpsの場合は443
path:'/rss?hl=ja&ie=UTF-8&oe=UTF-8&gl=JP&ceid=JP:ja'//ドメイン移行のパス
};
//サイトへのアクセスはhttpのgetメソッドを使用
//第一引数にはオプション設定をまとめたオブジェクト、第一引数の情報をもとにアクセスを開始し、
//get終了時に第二引数のコールバック関数を呼び出す
http.get(opt,(res2)=>{
var body='';
res2.on('data',(data)=>{
body+=data;
});
res2.on('end',()=>{
//xmlのテキストをもとにxmlのオブジェクトを作成する
//第一引数にxmlテキストデータ、第二引数にコールバック関数
//コールバック関数の第一引数はエラーオブジェクト、第二引数はパースで作成されたxmlオブジェクト
parseString(body.trim(),(err,result)=>{
console.log(result);
var data={
title:'Google News',
content:result.rss.channel[0].item//生成されたオブジェクトから必要な値を取り出し
//ここに各記事の情報配列がまとめられて入っているので
//RSSを利用する際は構造を理解しておく必要がある
};
//webページのレンダリング
res.render('hello',data);
});
})
});
});
module.exports = router;
これをテンプレート側にも反映できるようにするとesjは下記になる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body class="container">
<header>
<h1 class="display-4"><%= title %></h1>
</header>
<div role="main">
<% if(content !=null){ %>
<ol>
<% for(var i in content){ %>
<% var obj=content[i]; %>
<li><a href="<%=obj.link %>">
<%= obj.title %></a></li>
</tr>
<% } %>
</ol>
<% } %>
</div>
</body>
</html>
このdata部分をテンプレートに組み込み、テンプレート側でcontentにある配列から項目一覧を出す処理を行なっている。<ol>は順序つき箇条書きでの抜き出しで<li>とセットで使用する。
var data={
title:'Google News',
content:result.rss.channel[0].item//生成されたオブジェクトから必要な値を取り出し
//ここに各記事の情報配列がまとめられて入っているので
//RSSを利用する際は構造を理解しておく必要がある
};
ついにここからはデータベースも登場。SQLite3を使っていく。node.jsではデータベースはどうなるのかと心配していたが、きちんと対策がわかってよかった。
データベースには、サーバ型とローカル保存型があり、
サーバ型：データベースサーバーを起動し、そこにアクセスして情報を得る
データベースはサーバーからデータベースにアクセスして利用。そうして取得したデータをもとにクライアントへの表示を作成。
ローカル保存型：ファイルにデータベー氏の内容を保存。この場合、サーバを用意する必要がないので気軽に使える。ただ、他のwebアプリと同じ場所にデータベースファイルを保存しないといけないというデメリットがあるとのこと。
今回はローカル保存版のSQLデータベースを使う。オープンソースデータベースプログラムのsqlite3を使っていく。iphoneの住所録などのデータ管理は内蔵のsqliteを利用しているとのこと。
Node.jsにはsqlite3のデータベースファイルにアクセスするパッケージがすでに用意されている。ただ、データベースを編集するツールも必要なので別途そちらはダウンロードする。
https://sqlitebrowser.org/
データベースは、
データベース：データ保管庫。sqliteの場合はデータベースのファイルを作成。
テーブル：保管するデータの内容を定義したもの
カラム：テーブルにある保管される項目
レコード：実際に保存されるデータがレコード。住所録テーブルの山田さんのレコードという形で記録される。各人の記録内容。
フィールド：テーブルに用意されている各カラムごとの値をフィールドという。山田さんのレコードの氏名に保管する値として山田が氏名のフィールド値となる。
自分が作るwebアプリのデータベースを作成していく。
Ex-gen-appフォルダーの中にsqlite3のデータベースを新規作成。
データベースの準備ができたら、express側でデータベース利用のためのプログラムを作成する。まずはデータベースへのアクセスを可能にする。
npm install sqlite3
データを取り出して表示するところから始める。esjから確認。contentにデータベースから取り出したレコード群を格納。そこから順に各フィールドの値を取り出して処理する。
<table class="table">
<% for(var i in content){ %>
<tr>
<% var obj=content[i]; %>
<th><%= obj.id %></th>
<td><%= obj.name %></td>
<td><%= obj.mail %></td>
<td><%= obj.age %></td>
</tr>
<% } %>
</table>
これに対応し、jsの方も書き換え。
const express = require('express');
const router = express.Router();
const sqlite3=require('sqlite3');
//データベースオブジェクトの取得
const db=new sqlite3.Database('mydb.sqlite3');
router.get('/', (req, res, next) =>{
//データベースのシリアライズ
db.serialize(()=>{
//レコードを全て取り出す
db.all("select*from mydata",(err,rows)=>{
//データベースアクセス完了時の処理
if(!err){
var data={
title:'Hello',
content:rows//取得したレコードデータ
};
res.render('hello',data);
}
});
});
});
module.exports = router;
