Blockchain code Metaverse VR

Crypto×VR×SmartContract(448)

スポンサーリンク

//tips

//smart contract

ここからは単にhtmlのファイルではなく、プログラム側で操作できるようなnode.jsのテンプレートエンジンを利用していく。

テンプレートエンジンはhtmlにデータを変換する仕組みで、プログラムの中からhtml表示を操作することを可能にする。

Node.jsではEJSがそれに当たる。

このパッケージのインストールは、node.jsのパッケージをあらかじめまとめて管理しているパッケージマネージャーのnpmを通して取得することになる。

npm install ejs

早速index.ejsファイルを作成していく。

テンプレートを表示させるステップとしては、

・テンプレートファイルの読み込み
・レンダリング テンプレートをもとに表示HTMLを生成
・生成内容の表示出力 htmlをjsのresponse.writeで出力

となる。

const http=require('http');
const fs=require('fs');
const ejs=require('ejs');

//テンプレートファイルの読み込み
//fs.readFileSync(ファイル名,エンコーディング) 同期処理でファイルを読み込むためコールバック不要
//ここで同期処理を使用しているのはサーバでの受付を開始する前だから問題ない。ユーザーが入って来れない状況なので。
const index_page=fs.readFileSync('./index.ejs','utf8');

var server=http.createServer(getFromClient);

server.listen(3000);
console.log('server start');

//createServerの処理

function getFromClient(request,response){
//非同期処理:処理が終わる前に次に進む。その代わり完了時点で実行するコールバック関数が必要
var content=ejs.render(index_page);

response.writeHead(200,{'Content-Type':'text/html'});
//レンダリングしたものを出力するという処理をするため一工程多い
response.write(content);
response.end();

}

EJSでは<%= title %>のように特殊なタグを使い指定した変数の値を出力できる。

function getFromClient(request,response){
//非同期処理:処理が終わる前に次に進む。その代わり完了時点で実行するコールバック関数が必要
//ejs.render(レンダリングするデータ,オブジェクト)
//オブジェクトの変数の値が渡される
var content=ejs.render(index_page,{
title:"indexページ",
content:"これはサンプル"
});

response.writeHead(200,{'Content-Type':'text/html'});
//レンダリングしたものを出力するという処理をするため一工程多い
response.write(content);
response.end();

}

Ejsでは下記のように書かれることになる。

<body>
<header>
<h1><%=title %></h1>
</header>
<div role="main">
<p><%= content %></p>
</div>
</body>

</html>

Style.sssでスタイル部分を別のシートに移す。

<link type ="text/css" href="./style.css" rel="stylesheet">

これでindex.ejsから参照できるようにする。

ただ、この時点ではどのアドレスにアクセスしたらどのような内容を出力するかの処理を行えていないのでstyle sheetの内容は反映されない。

どのアドレスにアクセスしたらどのコンテンツを出力するかというルーティングを設定する必要がある。

例えば、末尾が
/のものにはAを返す
/helloのものにはBを返す
/okのものにはCを返す
などを設定する必要がある。

そのためにはクライアントがアクセスしてきたアドレスを事前に知る必要がある。

const url= require(‘url’);

このurlオブジェクトにはurlのデータを解析して本来の状態に組み立て直す機能がある(パース処理)ので、それを利用して、ドメインより下のパス部分の値をチェックし、それに応じて処理を分岐させる。

Requestからうまく取り出せればいいので、基本型は下記のようになる。

//クライアントの要求アドレスの取得
var url_parts=url.parse(request.url);

switch(url_parts.pathname){
//caseの中でpathnameに該当する部分があるかを調べる事ができる
case”/hello”:
break;

}

この内容をapp.jsに反映。

const http=require('http');
const fs=require('fs');
const ejs=require('ejs');
const url=require('url');

//テンプレートファイルの読み込み
//fs.readFileSync(ファイル名,エンコーディング) 同期処理でファイルを読み込むためコールバック不要
//ここで同期処理を使用しているのはサーバでの受付を開始する前だから問題ない。ユーザーが入って来れない状況なので。
const index_page=fs.readFileSync('./index.ejs','utf8');
const style_css=fs.readFileSync('./style.css','utf8');

var server=http.createServer(getFromClient);

server.listen(3000);
console.log('server start');

//createServerの処理

function getFromClient(request,response){

var url_parts=url.parse(request.url);
switch(url_parts.pathname){

case '/':
var content =ejs.render(index_page,{
title:"Index",
content:"これはサンプルページです"
})
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
break;

case '/style.css':
response.writeHead(200,{'Content-Type':'text/css'});
response.write(style_css);
response.end();
break;

default:
response.writeHead(200,{'Content-Type':'text/plain'});
response.end('no page...');
break;
}

}

後で以前作成したクラウドファンディングdappを振り返ると良いかもしれない。かなり実践で使われている内容が出てきている。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.