Node.js(Pug)入門編その4

 

前回からの続きです。

 

前回作った、index2.pugをnode.jsで動かしてみます。

 

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
    body
        h1 pugで見出し
        p pugでこんにちわ

をファイル名をindex.pugで保存してください。

また、

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
var pug = require('pug');

var server = http.createServer(getcliant);
server.listen(port);

// サーバの処理
function getcliant(_req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
    res.write(pug.renderFile('index.pug',{}));
    res.end();
}

をファイル名をmain-app.jpで保存してください。

 

 

4行目で

var pug = require('pug');

でpugを使えるようにします。

12行目で

    res.write(pug.renderFile('index.pug',{}));

index.pugファイルのテンプレートを読み書き換えています。

 

VScodeのメニューバーのデバッグからデバッグなしで実行すれば、

 

 

プラウザ(URL)localhost:1337/で表示されます。

 

参考に、スタイルシートを使った例を載せておきます。

 

ファイル名:index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
        style.
            h1{font-size: 24px;color: red;}
            p{font-size: 20px;color: blue;}

    body
        h1 pugで見出し
        p pugでこんにちわ

styleにドット[.]を付けてブロックで指定できます。

文字サイズと文字色を変えてます。

 

 

ついでに、pugでは、変数も使えます。

 

変数の書き方は、#{変数名}です。

 

たとえば、

index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title #{name_title}
    body
        h1 #{name_headline}
        p こんにちわ、変数の設定です。

として、

 

main-app.js

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;
var pug = require('pug');

var server = http.createServer(getcliant);
server.listen(port);

// サーバの処理
function getcliant(_req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
    res.write(pug.renderFile('index.pug',{
        name_title: 'こんにちわ',
        name_headline: '変数のタイトル名'
    }));
    res.end();
}

name_title: 'こんにちわ',

name_headline: '変数のタイトル名'

とすれば、

 

 

となります。

 

最後に、フレームワークexpressに行く前に、ルーティングを覚えておきましょう。

HTMLを書くときに、CSS(スタイルシート)を外部に置いてリンクするのが一般的です。

しかし、単にリンクしても、Node.jsではHTMLにCSSは反映されません。

 

これまででは、プラウザ(クライアント)からサーバ(node.js)がリクエストを受けているのは、

(URLの)localhost:1337(/index.html)だけです。

外部にCSSを置こうとすると、(ファイル名style.css)

index.htmlの<head>に

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

とコードし、

(サーバに)localhost:1337/syle.css

にもリクエスト(リンク)しなければなりません

 

逆に言えば、サーバ(node.js)はindex.htmlに対するレスポンスしか持っていません

 

そこで、URLを解析して、pathnameを判別するためurlというモジュールを使います。

 

var url = require("url");

 

ファイル名:style.css

h1 {
    font-size: 20px;
    color: brown;
}
p {
    font-size: 16px;
    color: blue

で、外部CSSを作り

 

ファイル名:index.pug

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title #{name_title}
        link(rel="stylesheet", href="./style.css")
    body
        h1 #{name_headline}
        p こんにちわ、CSSのテストです。

にスタイルシートのlink(rel="stylesheet", href="./style.css")をつけて

 

ファイル名:main-app.js

'use strict';
var http = require('http');
var pug = require('pug');
var fs = require('fs');
var url = require('url');
var port = process.env.PORT || 1337;

var index_page = fs.readFileSync('./index.pug','utf8');
var style_css = fs.readFileSync('./style.css','utf8');

var server = http.createServer(getcliant);
server.listen(port);

console.log('Server start');

// サーバの処理
function getcliant(_req, res) {
    var url_p = url.parse(_req.url);
    switch (url_p.pathname){
        case '/':
            res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
            res.write(pug.render(index_page,{
                name_title: 'こんにちわ',
                name_headline: 'タイトル名'
            }));
            res.end();
            break;

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

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

にlocalhost:1337/syle.cssのレスポンスを書き加えます。

 

プログラミングの説明は、

 

次回に続きます。

 

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 18:51 | comments(0) | trackbacks(0) |

Node.js(Pug)入門編その3

 

前回からの続きです。

 

これまでで、ほぼ基本的なところは終わりました。

Node.jsがあまり面白くないのは、プログラムというより、

地道に大量のhtmlテキストを書いていくという感じです。

 

そのため、少しでも簡単にhtmlが記述できるように

テンプレートエンジン(データからドキュメントを作成)があります。

 

おもには、EJSとPUG(jade)がよく使われますが、

ここでは、フレームワークでexpressを使う予定ですので、

そのデフォルトになっている、PUGについて簡単に説明します。

 

まず、PUGをインストールします。

npmとは、Node Package Managerのことです。

Nodeをインストールすれば、プログラムは入ってます。

 

npm i pug-cli -g

(または、npm install pug-cli -g)

(オプションの-gはグローバルの意味でどこからでも使えます。)

 

VScodeからは、ターミナル(powershell)から、

 

 

ここから、コマンドを入力できます。(powershellと同じです。)

 

正しく、インストールされているか、Versionを見てみます。

pug --version

で確かめます。

 

早速、コードを書いてみましょう!

とりあえず、ファイル名 index2.pug

でコードして保存してください

doctype html
html(lang="ja")
    head
        meta(charset="utf-8")
        title pugでタイトル
    body
        h1 pugで見出し
        p pugでこんにちわ

 

あたりまえですが、htmlよりスッキリしています。

書き方の基本は、

属性は、括弧で記述

改行+インデントで要素名

タグ名+半角スペースで内容

です。

 

注意:インデントを間違えると、unexpected tokenのエラーとなりますので、気を付けてください。

 

間違いないか、コンパイル(翻訳)してみます。

 

pug index2.pug --pretty

(オプションの--prettyは見やすいhtmlにしてくれます。)

 

 

成功すると、rendered(生成されました)と表示され、

自動的に、index2.htmlファイルが作られます。

 

 

 

 

次には、Node.jsに組み込みます。

とりあえず、前回作ったmain-app.jsをpugを使ったものに変えてみます。

 

ここまでくると、いろんなファイルが必要となってきます。

これが、Webプログラムが難しくなってくるところです。

 

一つのメインプログラムと補助するプログラムとファイルを合わせてプロジェクトといいます。

 

また、入門編その1で行ったように、フォルダ(プロジェクト)を作ってください。

ファイル名はpugtestとしてあります。

 

pugtestをコピーして開きます。

 

 

まず、nodeを初期化します。

 

npm init

 

ターミナルが表示されていないときは、メニューバーから

 

 

 

質問に答えていくと、

(あとからでも変更できますので、まずは、適当に答えてください。)

プロジェクトの内容が書かれたpackage.jsonが作成されます。

 

次に、pugをインストールします。

npm install pug --save

 

 

警告(WARN)も出ますが、気にしないでください。

 

これで、require(必要、必須)を使ってpugを使うことができるようになります。

 

ちょっと長くなったので休憩します。

 

その4に続く

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 16:26 | comments(0) | trackbacks(0) |

Node.js(Html)入門編その2

 

前回からの続きです。

 

まず、前回のコードを分解してわかりやすくします。

'use strict';
    var http = require('http');
    var port = process.env.PORT || 1337;

    http.createServer(function (_req, res) {
        res.writeHead(200, { 'Content-Type': 'text/plain;charset=UTF-8' });
        res.end('こんにちわ');
    }).listen(port);

    http.createServer(function (_req, res) {
        res.writeHead(200, { 'Content-Type': 'text/plain;charset=UTF-8' });
        res.end('こんにちわ');
    }).listen(port);

の部分を関数を切り離します。

httpオブジェクトのcreateServerメソッドは

http.createServer(関数)となっています。

ので、

 

ver server = http.createServer(getcliant);

server.listen(port);

function getcliant(_req,res){

res.writeHead(200, { 'Content-Type': 'text/plain;charset=UTF-8' });

res.end('こんにちわ');

}

 

コーディングしたもの

 

 

今度は、関数の部分をテキスト形式からプラウザで使えるhtml形式に変えます。

9行目の'Content-Type'を'text/html;charset=UTF-8'に変えて、

res.writeのメソッドでhtmlの形式でコードします。

 

 

とりあえず、HTML(ハイパーテキスト)の形式の復習をしておきます。

<!DOCTYPE html>

<html lang="ja">

<head>
<title>ウェブページのタイトル</title>
</head>
<body>
<h1>ウェブページの見出し</h1>
<p>ウェブページを作成しました!</p>
</body>
</html>

が基本となります。

 

<!DOCTYPE html> はHTML5で作成されたという定型文

<html lang="ja">は日本語(ja)の言語指定

<head>は その文書の文字コード・タイトル・作成者など

<body>はプラウザに表示される見出し、本体です。

 

実行すると、

 

 

となります。(赤丸はついていません)

 

でもどうでしょうか?

いちいちHTMLをコードするのはメンテナンスが大変です。

そこで、HTMLの部分は別に作って、HTMLを保存しておき

プログラムからHTMLを呼び出す方が簡単で使い勝手がよさそうです。

 

そこで、Node.jsでファイルを呼び込む機能をコードします。

 

その前に、呼び込むHTMLを作っておきます。

 

ファイル名:index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type"
    content="text/html; charset=utf-8">
    <title>タイトル名</title>
</head>

<body>
    <h1>こんにちわ</h1>
    <p>サンプルページを作成しました!</p>
</body>
</html>

 

前回の記事で、main-app.jsを作ったのと同じように作ります。

 

 

ファイルを扱うには、main-app.jsに、

requireを使ってfsオブジェクトを追加します。

fs = require('fs');

 

ファイルを呼び込むには、

fs.readFileメソッドを使います。

fs.readFile(ファイル名,文字コード,関数(エラー情報,ファイルのデータ){処理});となっています。

(ほかにも、ファイルの作成、上書き、追記及び削除のメソッドもあります。)

    'use strict';
    var http = require('http');
    var fs = require('fs');
    var port = process.env.PORT || 1337;

    var server = http.createServer(getcliant);
    server.listen(port);

// サーバの処理
    function getcliant(_req, res) {
        fs.readFile('./index.html','UTF-8',
            function(error,data){
                res.writeHead(200, { 'Content-Type': 'text/html;charset=UTF-8' });
                res.write(data);
                res.end();
            }
        );
    }

 

コードします。

 

 

11行目で、index.htmlファイルを呼び込んで、

12行目で、変数(data)に内容を入れて、

14行目で、res.writeでdataを書き込んでいます。

 

実行すると、

 

 

となります。

 

すでに気が付いていると思いますが、

ここまででは、httpサーバにアップロードするのと変わりません。

わざわざサーバを立ててNodeを使う意味がないのでは?

と思われるのではないでしょうか

 

次には、テンプレートエンジン( データからドキュメントを作成 )を使ってプログラムらしくします。

 

 

 

次回その3に続く

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 17:12 | comments(0) | trackbacks(0) |

Node.js(JavaScript)入門編その1

 

また、春がきます。

なので、また改めてプログラミング入門編(JavaScript)を書いてみます。

 

パソコンのプログラミングで、すでに環境が整っているのが、JavaScriptです。

プラウザがあれば、すでにJavaScriptは動かすことができます。

(このブログを見ている時点でプラウザは入っています)

 

しかし、プラウザでの書き方html(及びCSS)とセットとして使うことと、

そのため、どちらかというとサーバよりのプログラミングになるため

プログラミングの入門としては、覚えることが多く初心者にはわかりにくいものになっています。

 

そこで、はじめからNode.jsを使ってローカル環境でサーバを動かせばスッキリします。

また、Webプログラムとなりますので、仕事でプログラミングする際にも役に立つような気がします。

 

まずは、プログラムの開発環境です。

人によって好みがあると思いますが、コードを書くためのテキストエディタですが、

VisualStudioCode(VScodeと呼ばれている)が拡張性が高く使いやすいと思います。

VisualStudioが入っている人はそれを使ってもらってもいいです。

ただ、VisualStudioは総合開発環境なので、操作(動き)が重いです。

コンパイルが必要なC++やC#などは便利ですが、コンパイルの必要のない、

直接実行できるスプリクトについては、テキストエディタで十分ですので、

動きの軽いVisualStudioCodeが使いやすいと思います。

これを使って説明していきます。

 

Visual Studio Code(以下VScodeと言う)のダウンロードはMicrosoftの

 

https://visualstudio.microsoft.com/ja/

 

よりできます。

詳しくは、Visual Studio Codeのインストール

(福山大学 金子研)がわかりやすいと思います。

 

次にNode.jsをダウンロードします。

もちろんNode.jsもJavaScriptですが、感覚としては新しい言語と考えてもいいかもしれません

なぜなら、Node.jsはJavaScriptのフレームワークではなく、Node.jsのフレームワークとして

「express」を使うのが一般的だからです。

 

Node.jsは

https://nodejs.org/ja/

 

よりダウンロードしてください。

詳しくは、Node.jsをインストールする

QiitaのMasayukiーMさんがわかりやすいと思います。

またダウンロードするときは、偶数のバージョン(8とか10を)を選んでください。

LTS(Long Term Support)といって安定版です。

 

プログラムの作り方は自由ですが、

まず、フォルダを作るといいと思います。

 

 

これを、先ほどのテキストエディタVScodeで開きます。

赤丸の部分のエクスプローラーを開きます。

 

 

次にフォルダを追加します。

 

 

最初に作った、フォルダを追加します。(フォルダをドラッグ&ドロップしてもOK)

 

 

新しいファイルを作ります。

 

 

 

 

ファイル名を付けます。

ここでは、main-app.jsとしておきます。

VScodeでは、拡張子によって自動的にJavaScriptのコードと判断してくれます。

 

 

あとは、今作ったmain-app.jsにコードを打ち込んでいきます。

 

Javascriptは、セミコロン「;」で区切ります。

忘れると思わぬエラーとなりますので、注意してくださいね。

 

前回、Webアプリを作ってみる2 で使用した。

 

    'use strict';
    var http = require('http');
    var port = process.env.PORT || 1337;

    http.createServer(function (_req, res) {
        res.writeHead(200, { 'Content-Type': 'text/plain;charset=UTF-8' });
        res.end('こんにちわ');
    }).listen(port);

 

をコーディングしてください。

(なおport番号を1337になっていますが、一般的にはNodeの場合は3000番を使うようです。)

 

 

 

(注意としては、必ず文字は、UTF−8を使用してください。なおVScodeはデフォルトでUTF−8になってます。)

 

プログラムの実行はデバック(D)からデバックなしで開始を選んで実行してください。

(PowerShallで行う場合は、node.exeを実行後main-app.jsを実行してください)

 

 

 

デバックコンソールが現れて、実行されます。(終了するときは、■印をクリックしてください)

 

 

プラウザからIPアドレスのlocalhost(自分のパソコン)の1337番地(127.0.0.1:1337)をアクセスすると表示されます。

 

 

プログラムの説明については、前々回の記事Webアプリを作ってみる1を見てください。

 

長くなりましたので、

 

その2につづきます。

 

 

 

JUGEMテーマ:プログラミング

 

 

| JavaScript | 11:17 | comments(0) | trackbacks(0) |

Webアプリ(Node.js)を作ってみる2

 

前回からの続きです。

 

前回の単純なプログラムをサーバにデプロイしてみます。

(Windowsで行っています。)

 

サーバは、IBMクラウド(無料)を使います。

IBMクラウドはクレジットカードの登録なし(間違えてもお金がかからない)で使える

人気のクラウドサービスです。

 

もちろん、商業的に使う場合は、365日多くのプログラムを動かすことになりますので、

別途、お金がかかります。

(ほかのサーバを探す際には、you8さんの個人開発者向けサーバのブログを参考にしてください

また、LOLIPOPのマネージドクラウドなら基本料月980円で使えます。)

 

IBMクラウドについては、Qiitaの@yamachan360さんの記事を参考にしてください。

 

まずは、新規フォルダをつくり、デプロイしたいファイルを入れておきます。

 

例)testnodeフォルダを作り、

manifest.yml

package.json

server.js

を入れる。

 

 

manifest.ymlは環境を定義するファイルです。

 

applications:
- path: .
  name: teranode-js1
  domain: mybluemix.net

  host: teranode-js1-genestera
  random-route: true
  instances: 1
  memory: 64M

nameはプログラム名です。

domainはアドレスのドメイン名です。

hostはフルアドレスとなります。

random-routeはアドレスが重複したときに新たな経路を作ってくれます。

instancesはプログラムの数です。

memoryはライト・アカウント(無料)は全体で256MBまでです。

 

package.jsonはプログラムを定義するファイルです。

 

{
  "name": "teranode-js1",
  "version": "1.0.0",
  "description": "NodejsWebApp1",
  "main": "server.js",
  "author": "genesistera",
  "license": "MIT",
  "engines": {
    "node": "6.*"
  }  
}

nameはプログラム名です。

versionは更新記録です。

descriptionはプログラムの説明文です。(ここでは、プロジェクト名)

mainはメインプログラムです。

authorは作成者です。

licenseはライセンスです。

engineはプログラムで何を使うかです。(ここでは、node.jsのversion 6)

 

server.jsは前回作ったものと同じです。

'use strict';
var http = require('http');
var port = process.env.PORT || 1337;

http.createServer(function (req, res) {
    res.writeHead(200, { 'Content-Type': 'text/plain;charset=UTF-8' });
    res.end('こんにちわ');
}).listen(port);

 

次にコマンドラインプログラム、cloudfoundryというコマンドラインインターフェース(CLI)を入手します。

 

cloudfoundryの入手先のGithubアドレス

 

上記から、OSにあったものをインストールしてください。

2018.11.28現在ver6.40.0です。

 

どんな方法でもいいですが、PowerShellを起動します。

おすすめはエクスプローラで立ち上げると、チェンジディレクトリ(CD)しなくていいので便利です。

 

 

まずは、cloudfoundry(cfコマンド)入っているかを確認するためバージョンを表示してみます。

cf -vと入力します。

 

 

つぎに、デプロイの環境を作るためプラウザからIMBCluodにログインして、

カタログからSDK for jsを選びます。

 

 

アプリ名:(プログラム名)、

ホスト名:(サブアドレス名になりますので、ほかのプログラムとは重ならないように名前を付けてください。)

 

 

あとは、デフォルトでいいです。

 

この場合は、アドレスは、ホスト名+ドメインの//teranode-js1-genestera.mybluemix.netとなります。

 

先ほどのWindows PowerShellから

 bluemix login -a https://api.ng.bluemix.net

と入力します。

 

 

EmailとPasswordを入力します。

 

 bluemix target -o 組織名 -s デバイス名

を入力します。

 

 

 

お疲れ様でした。これで、最後です。

最後に

bluemix app pushを入力します。

ちょと時間がかかります。

以下中間省略します。

成功すると、

 

プログラムがスタートします。

メモリーだけは47.3Mかかっています。

より複雑なプログラミングを作る場合は、manifest.ymlで128Mにしてください。

 

プラウザでアドレスを呼び出すと

 

 

表示されます。

 

 

 

JUGEMテーマ:プログラミング

| JavaScript | 16:17 | comments(0) | trackbacks(0) |

09
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
--
>>
<<
--
Profile
New entries
Archives
Categories
Recent comment
カウンター


今日
昨日
レンタルサーバ/プロバイダー




ファッション
カタログ通販ベルーナ(Belluna)

イマージュ - IMAGEアウトレットセール
yahoo・その他


買い物
ビックカメラ.com



Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM