Blockchain code Metaverse VR

Crypto×VR×SmartContract(451)

スポンサーリンク

//tips

//smart contract

掲示板アプリ作成に伴うindex.ejsの生成。ローカルストレージへの対応を組み込んでいる。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function init(){
//localStorage.getItemで引数にキーを指定して呼び出し
//キーと値をペアで保存されているのでキーを指定すれば値も取得できる
var id=localStorage.getItem('id');
//idがなければログインページへ
if(id==null){
//現在表示されているページはlocationオブジェクトのhrefという値で設定されている
location.href='./login';
}
//idを取り出せた場合、その値を設定
document.querySelector('#id').textContent='ID:'+id;
//form内の非表示フィールドvalueへの値設定
//どのIDクライアントのform送信かわかるようにするため
document.querySelector('#id_input').value=id;
}
</script>
</head>

<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>※メッセージは最大10個まで保管されます。</p>
<form method="post" action="/">
<p id="id"></p>
<input type="hidden" id="id_input" name="id">
<div class="form-group">
<label for="msg">Message</label>
<input type="text" name="msg" id="msg" class="form-control">
</div>
<input type="submit" value="送信" class="btn btn-primary">
</form>

<table class="table">
<% for(var i in data){ %>
<%- include('data_item',{val:data[i]}) %>
<% } %>
</table>
</div>
</body>
</html>

次にテーブルのテンプレート作成。

<%# メッセージテーブルに使用するパーシャルテンプレート作成 %>
<%# dataより抽出されたものをincludeからこちらに値を送りテンプレートを作成させる %>
<%# 値はjson形式のためjsオブジェクトに変換する必要がある %>

<% if(val !=''){ %>
<% var obj=JSON.parse(val); %>

<tr>
<th><%= obj.id %></th>
<td><%= obj.msg %></td>
</tr>

<% } %>

これとは別にログインページの作成も行う。ログインページで行うのはidを入力してもらい、それを保存すること。保存先はローカルストレージ(webブラウザ)となっている。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function setId(){
//id_inputのDOMオブジェクトから値を取り出し保存
var id=document.querySelector('#id_input').value;
localStorage.setItem('id',id);
location.href='/';
}
</script>
</head>

<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>あなたのログインネームを入力ください。</p>
<div class="form-group">
<label for="id_input">Login name:</label>
<input type="text" id="id_input" class="form-control">
</div>
<%# ボタンが押されたら関数を実行し保存 %>
<button onclick="setId();" class="btn btn-primary">送信</button>
</div>
</body>
</html>

データ保存用のtxtファイルも作成。

ここからはapp.jsにてメインプログラムを書いていく。

そして npm install ejsにてこのフォルダにもejsを導入。node app.jsで出来栄えを確認。

人気の記事

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.