動的にページを作る
node.jsでシステム作り中。
ユーザページを作りたい。
表示するデータはユーザごとに異なるようにしたいんで、テンプレートで変数を埋め込んで処理できへんかなー。
調べたところ、いろいろあるみたい。今回はejsってのを使ってみる。
モジュールをインストールしておく
> npm install ejs
初期化の部分
const app = express(); //expressアプリを生成する app.set('view engine', 'ejs'); //テンプレートエンジン
htmlに埋め込むパラメータをセットしてページを表示
(当然、サーバが起動してたら、localhost/mypage で表示できる)
app.get('/mypage', async (req, res) => { var data = {}; //--- ユーザ情報 --- data.user = {}; data.user.name = "万丈"; data.user.attribute = "ぬいぐるみスキー"; //--- まるの情報 --- data.maru = {}; data.maru.bodycolor = "#ffffff"; data.maru.ribboncolor = "#ff0000"; //--- ばつの情報 --- data.batu = {}; data.batu.bodycolor = "#ff69b4"; data.batu.ribboncolor = "#000000"; //--- その他の子たち --- data.others = [ {name: "なまけもの"}, {name: "ひらめ"}, {name:"シャッポ団長"}, {name: "アノマロカリス"} ]; // レンダリングを行う res.render("./user.ejs", data); });
テンプレートの書き方
普通にHTMLを書いて、パラメータを埋め込みたいところを<%- %>で書く
【user.ejs】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ユーザページ</title> </head> <body> <div> <%- user.name %>さんのページ </div> <div> 属性 <%- user.attribute %> </div> <div style="margin-top:6px;border:solid 2px #ff00ff;"> <div> まる </div> <div> <%- maru.bodycolor %><BR> <%- maru.ribboncolor %><BR> </div> <div> ばつ </div> <div> <%- batu.bodycolor %><BR> <%- batu.ribboncolor %><BR> </div> </div> <div style="margin-top:6px;border:solid 2px #ff00ff;"> <% for (let other of others) { %> <%- other.name %><BR> <% } %> </div> </body> </html>
※この文章で試してないので、どっか不備があるかも。
Node.js プロジェクト作るんおさらい
きれいな状態から作りたい。
Node.jsはすでに入ってるとこからスタート
>npm install trial
勝手にできたフォルダやファイルを削除したり書き換えたりする
trial\ .vscode\ launch.json //VScode(デバッガ)が作る設定ファイル // メインプログラムの名前を書き直したよ // "program": "${workspaceFolder}\server.js" node_modules //installしたモジュールが入るところ public //この下にブラウザ側のプログラム入れる //※予め存在した3つのフォルダはファイルごと削除 package.json //パッケージの内容が書かれてるぽい // メインプログラムの名前を書き直したよ // "scripts": { // "start": "node ./server.js" // }, package-lock.json //インスコしたモジュールが記録されるらしい server.js //メインプログラム(自作) //app.use(express.static('public'));をコールしておく必要あり
必要なモジュールをインスコ
npm install pg
はてなブログでjavascriptを実行。ソースコードの貼り付け方。
この前のちっぷすでスライドバーっぽいやつを書いたんだけど、字だけあってもピンと来やんよなあー。どないしょーかなーと考えてたんだけど、どうやらはてなブログで動かすこともできるらしいことに気づいた。
ので、やってみる。以下、手順。
【その1】
これが全然わからんかったんだけど、一番重要なこと!
はてなブログの設定で編集モードを「Markdown」にすること!!
わたしは「みたまま」モードで使ってたので、全然できなくて困った。
記事を作るときに決定されるらしく、書いてる途中で変更しても反映されなかったので注意。 (いっぺんも保存してなかったら変更できるかも?)
わたしの場合、今書いてるのは消して新しく記事を作ったら行けました!
「Markdown」になったら、上のとこが、
編集 Markdown v プレビュー v
ってなるので、そうなってなかったら反映されてないです。
「みたまま」モードだと、
編集 みたまま v HTML編集 v プレビュー v
こんなんになっています。
【その2】
後は、普通にHTMLとjavascript書けばOK!
【例】
<script> function click_ok() { id_message.innerHTML = "できたよ!"; } </script> <div id="id_message">できるかな?</div> <button onclick="click_ok()">やる</button>
【実施】
【参照】
「みたまま」モードで保存すると、勝手にこんな風に書き換えられてしまう。
<p> <script>// <![CDATA[ function click_ok() { id_message.innerHTML = "できたよ!"; } // ]]></script> </p> <div id="id_message">できるかな?</div> <p><button>やる</button></p>
今回、Markdownにしたことで、ソースコードの貼り付けもできるようになりましたー。
```
バッククォート3つでソースコードを囲めばOKです!
バッククォートは「Shift+@」です。
ちなみにバッククォートの表示は表示させたいバッククォートの数より
多くのバッククォートで囲むとできます。ああ・・・(;´д`)
ちっぷす書くにはこの方が正解ですねー。^^V
でも、ソースコードじゃない部分の改行が思うようにいかないんですけど・・・><;
半角SP2つ入れろとか、空白行入れろとか書かれてるねんけど、
改行はするけど、空白行が作れないんですけど・・・><、
これ、あれやん。sphinxでマニュアル書いてたときの苛立ちに似ているw
texとかの記法かな?やっかい。
とりあえず、改行はSP2つ、空白行は<BR>表記にしました。
もっと楽できる方法が見つかるといいなあー。
この前のやつも、マークダウンで作り直しとこ。
ラジオボタンでスライドバーっぽいものを作る
※Markdownモードに変えて書き直してみた。
実行できるようにしたかったんだけど、まだできてない。
実行しないでコード表示になってしまう。謎。(;´д`)
iPadで動くようにして、と言われたんだけど、スライドバーがiPadで使い物にならなかったので、ラジオボタンでそれっぽく作ってみました。
<style> /*-------------------------- スライドバー用 --------------------------*/ /* クリックされていない目盛りの形状 */ .slidebar label { display: block; cursor: pointer; width: 8px; height: 10px; line-height: 1; transition: .2s; border-style: solid; border-width: 1px; border-color: #888888; margin-top: 8px; } /* クリックされた目盛りの形状 */ .slidebar input[type="radio"]:checked + .slide_curr { margin-top: 0px; height: 16px; } /* 目盛りを横に並べる */ .slidebar span { margin: 1px; float: left; } /* ラジオボタンを非表示にする */ .slidebar input { display: none; } </style>
<div class="slidebar" id="id_slidebar" style="overflow:hidden;"> <!-- ここにスライドバーを作成 --> </div>
<script> function make_slidebar() { //スライドバーを作成 const id_str = "id_bar"; const nm_str = "nm_bar"; var html = ""; for(let i = 0; i <= 10; i++) { html += '<span>'; html += '<input type="radio" name="' + nm_str + '" value="' + i + '" id="' + id_str + i + '">'; html += '<label for="' + id_str + i + '" class="slide_curr"' + ' style="background-color:rgba(255, 0, 0, ' + (i * 0.1) + ');"></label>'; html += '</span>'; } //セットする id_slidebar.innerHTML = html; } </script>
windows7→windows10
windows7のサポート終了に向けてwindow10へのアップグレードを余儀なくされた。(;´д`)
マシン1:元々windowsテンコちゃんやってんけど、ダウングレードでナナコちゃんになっている。
これをまたテンコに戻す。
マシン2:ナナコが新しい時分のめっちゃハイスペックマシン。テンコちゃんを受け入れるのは初めて。
とりあえず、マシン1をアップグレード!
ナナコが最新の状態であるのを確認してから、CD突っ込んでバージョンアップ。
途中でMSに報告してもいい?みたいな選択があったのと、テンコの更新プログラムを入れていい?に、はい。って返事する必要があったのくらいで後はだいたい何もしないであっさり終了。
・元々入ってた、postgreSQL11はそのままで起動した。
(起動は、pgAdmin4を立ち上げると勝手に起動する)
・VisualStudioCodeとNode.js も今まで通りに立ち上げて使える。(今まさに開発中のやつ)
と、ここで指導が入る。
設定画面を見ると、バージョン情報のバージョンが1703になってるので、これを最新の1909にする。
これは勝手にやってくれなくて、MSのサイトからwindows10のダウンロードで、update用のexeを落としてきて実行。
めっちゃ時間かかった上、最終的に手を出してないのに3回、再起動を繰り返したので、「終わったー。変なやつにはまったー(;´д`)」と思ったけど、無事帰還。
Node.js fetch クロスオリジン
【サーバ側】
const cors = require('cors'); //クロスオリジン
1.全部やっちゃっていいとき
app.use(cors());
2.個別に指定するとき
app.get('/getdata', cors(), (req, res) => { });
【ブラウザ側】
fetch('http://123.456.789:3000/getdata, {mode: 'cors'}) .then { });