Blockchain code Metaverse VR

Crypto×VR×SmartContract(460)

スポンサーリンク

//tips

//smart contract

きちんとmarks.jsについて記載を完了。参考にしていた本の内容は網羅できた。

const express = require('express');
const router = express.Router();
const db = require('../models/index');
const { Op } = require('sequelize');

const MarkdownIt = require('markdown-it');
const markdown = new MarkdownIt();

const pnum = 10;

// ログインチェックの関数
function check(req,res) {
if (req.session.login == null) {
req.session.back = '/md';
res.redirect('/users/login');
return true;
} else {
return false;
}
}

// トップページへのアクセス
///mdアドレスにアクセスした際の処理
router.get('/', (req, res, next)=> {
if (check(req,res)){ return };
db.Markdata.findAll({
where:{userId: req.session.login.id},
limit:pnum,
order: [
['createdAt', 'DESC']
]
}).then(mds=> {
var data = {
title: 'Markdown Search',
login: req.session.login,
message: '※最近の投稿データ',
form: {find:''},
content:mds
};
res.render('md/index', data);
});
});

// 検索フォームの送信処理
router.post('/', (req, res, next)=> {
//検索フォームから送信された場合の処理
//フォームの値を使ってmarkdataモデルを検索し、テンプレートに渡す
if (check(req,res)){ return };
db.Markdata.findAll({
where:{
userId:req.session.login.id,
content: {[Op.like]:'%'+req.body.find+'%'},//検索フォームに入力したテキストが含まれるもの
},
order: [
['createdAt', 'DESC']
]
}).then(mds=> {
var data = {
title: 'Markdown Search',
login: req.session.login,
message:'※"' + req.body.find +
'" で検索された最近の投稿データ',
form:req.body,
content:mds
};
res.render('md/index', data);
});
});

// 新規作成ページの表示
router.get('/add', (req, res, next) => {
if (check(req,res)){ return };
res.render('md/add', { title: 'Markdown/Add' });
});

// 新規作成フォームの送信処理
router.post('/add', (req, res, next) => {
if (check(req,res)){ return };
db.sequelize.sync()
//送信データの追加
.then(() => db.Markdata.create({
userId: req.session.login.id,
title: req.body.title,
content: req.body.content,
})
.then(model => {
res.redirect('/md');
})
);
});

// '/mark'へアクセスした際のリダイレクト
router.get('/mark', (req, res, next) => {
res.redirect('/md');
return;
});

// 指定IDのMarkdata表示
router.get('/mark/:id', (req, res, next) => {
if (check(req,res)){ return };
db.Markdata.findOne({
where: {
id: req.params.id,
userId: req.session.login.id
},
})
.then((model) => {
makepage(req, res, model, true);
});
});

// Markdataの更新処理
//markdataの書き換え送信
router.post('/mark/:id', (req, res, next) => {
if (check(req,res)){ return };
db.Markdata.findByPk(req.params.id)
.then(md=> {
md.content = req.body.source;
md.save().then((model) => {
makepage(req, res, model, false);
});
})
});

// 指定IDのMarkdataの表示ページ作成
function makepage(req, res, model, flg) {
var footer;
if (flg){
var d1 = new Date(model.createdAt);
var dstr1 = d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate();
var d2 = new Date(model.updatedAt);
var dstr2 = d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate();
footer = '(created: ' + dstr1 + ', updated: ' + dstr2 + ')';
} else {
footer = '(Updating date and time information...)'
}
var data = {
title: 'Markdown' ,
id: req.params.id,
head: model.title,
footer:footer,
content: markdown.render(model.content),
source: model.content
};
res.render('md/mark', data);
}

module.exports = router;

ここからシンプルなejsとjsにて自身のデモページを作成していく。

Express generatorでdemo用のパッケージを作成していく。

express --view=ejs ex-gen-curationapp

npm install

Githubに作成したフォルダはpushしておこうと思ったらエラー。

個人アクセストークンを作成する必要が出てきたよう。下記でやり方確認。

https://zenn.dev/yuri0427/articles/9587ae6a578ee9

cd ディレクトリ//アップロードしたいフォルダへ移動
git init//ローカルリポジトリ作成
git add .//対象フォルダ内のすべてのフォルダ/ファイルをステージング
git commit -m “first commit “//ステージングしたファイルを保存(” ”内はメモ書き)
git remote add origin url名//リモートリポジトリとの関連付け
git push origin master//アップロード

この後にgithubのuser名と生成したアクセストークン入力によりアップロード可能。

Enumerating objects: 6820, done.
Counting objects: 100% (6820/6820), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5208/5208), done.
Writing objects: 100% (6820/6820), 10.67 MiB | 156.00 KiB/s, done.
Total 6820 (delta 1282), reused 6820 (delta 1282), pack-reused 0

しばらく反映を待ってみる。

git push origin master:master

https://ameblo.jp/yukozutakeshizu/entry-12531672570.html

https://nyakanishi.work/what_to_do_when_git_push_doesnt_work_on_the_remote/

【Git】ローカルからリモートリポジトリに push できない問題を解決するまでの記録!

【GitHub】pushしたのにリモートに反映されない時の対処法

Node.jsサイト必要要件。

環境:node.js,express,express-generator,ejs,bootstrap
サーバー:sqlite3,DB browser for sqlite
サーバとの連結:sequelize

ページ構成。

TOPヘッダー:サイト名
サイドメニュー:image アップロード枠、API表示枠
メインメニュー:
アドレス表示…formからのアップロード
following: follower数のカウントおよび表示:データベース表示
SNS image画像枠:snsリンク

左メインブロック:SNSapi表示
右サブブロック1:twitterのタイムライン表示
右サブブロック2:サブimageアップロード枠
右サブブロック3:コメント表示枠など

画像の表示方法を見ながら模索。

https://codezine.jp/article/detail/8350

https://teratail.com/questions/111141

こちらにてexpressの画像表示はexpress.static ミドルウェア関数を使わなければならないことが発覚。

http://expressjs.com/ja/starter/static-files.html

https://stackoverflow.com/questions/17755147/displaying-an-image-with-ejs-in-node-js-express

こちらをapp.jsに追加。
//imageファイルへのアクセス
app.use(express.static('images'));

また、imgをアップロードする際にはmulterを使用しなければならないことがわかったので、multerを使用するケースでの方法を模索する。

https://reffect.co.jp/node-js/express-js-file-upload

https://github.com/expressjs/multer

早速、npm install multerを実行。

routes ディレクトリ内の index.js を修正して、POST リクエストを受け付けられるに変更。

/imageにアクセスしてフォルダ直下の画像を表示させることは下記のコード追加でできた。

const fs = require('fs');

//画像表示のみ
app.get('/image', (req, res) => {
console.log('image');
fs.readFile('./example.png', (err, data) => {
res.type('png');
res.send(data);
});
});

色々模索して、やっと表示できるようになった。

ただ、imgの大きさが大きすぎるなどの問題あり。

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

//expressオブジェクト
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//アプリに必要な処理の組み込み
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

//アクセスのためのapp.use
app.use('/', indexRouter);
app.use('/users', usersRouter);

//画像用
app.use(express.static(path.join(__dirname, 'public')))

// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
res.status(err.status || 500);
res.render('error');
});

module.exports = app;

ーーーーー

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

// 追加 1
var multer = require('multer');
var storage = multer.diskStorage({
// ファイルの保存先を指定
destination: function (req, file, cb) {
cb(null, './public/images/')
},
// ファイル名を指定(オリジナルのファイル名を指定)
filename: function (req, file, cb) {
cb(null, 'image.jpg')
}
})
var upload = multer({ storage: storage })
//

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
//res.render('image');
});

router.post('/',upload.single('file'),function(req,res){
//image.ejsを返す
res.render('image'); //***← ここを修正 ***//
});

module.exports = router;

ーーーー
index.ejsとimage.ejsは分けて作成。

写真を縮小して表示する方法を確認する必要があるのだが、いろいろなサイトを見回ってejsテンプレートで作成されたページを確認しても、写真ベタばりの、どれも微妙な感じ。

React.jsに踏み込むかJohnに相談。これは永遠の学習の輪廻に囚われている。幸いなことはDapps制作の際に少しreactも触ったこと。

あっさりreactでいいのではないかという反応が返ってきた。前回ejsとreactどっちがいいか確認したがしょうがない。reactに路線変更。どのフレームワークを選ぶのかにも事前調査が必要なことが認識できた。

人気の記事

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.