LaTeXのBuild LaTeX projectが動かない問題について

今回は、前に設定したLaTeXの環境において、Build LaTeX projectが動かないという問題を解決する。

ir604.hatenablog.com

VSCodeの更新

まず、行ったのが、VSCodeの更新である。実行時は、長い間VSCodeをアップデートしておらず、かなり古いバージョンのものを用いていた。

そこで、VSCodeを更新し、再度実行してみる。今のバージョンより新しいものが登場していると、以下のように更新プログラムのインストールを促す通知が、起動直後に右下に現れる。そこで、「更新プログラムのインストール」を押し、VSCodeの更新を行った。その状態で、VSCodeを再起動することで、VSCodeの更新を完了させた。

拡張機能をWSL上に追加

更新すると、LaTeXをWSL上にインストールすることが可能となっていた。そこで、LaTeX Workshopを「WSL:Ubuntuにインストールする」をクリックすることで、Ubuntuにインストールを行った。

動作確認

早速、▷(Build LaTeX project)を押し、pdfを見てみる。すると、自動的にもう一つの枠にpdfが表示された。こちらのほうが、前の生成方法より何倍も早い。

こうして、Build LaTeX projectが動かない問題を解決した。

expressの復習がてら、イラスト専用の掲示板を作成してみた

今回は、イラストのみに特化した掲示板を、node.js(express)の復習がてら作成する。

今回作成したプロジェクトは、以下のリポジトリに保管した。

github.com

準備

まず、本プロジェクトを作成するにあたって、以下の環境を用意しておく。

  • node.js（v18.6.0）
  • npm（8.13.2）
  • mysql（8.0.29）

その上で、専用のディレクトリを作成し、そのディレクトリ内に移動した。

そして、そのディレクトリ内に、以下の五種類をnpmを用いてインストールした。

  • express
  • ejs
  • bodyparser
  • multer
  • mysql

webデザイン

まず、以下の3つのejsファイルを作成した。

main.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>イラスト掲示板</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            イラスト掲示板
        </div>
        <div class="sub">
            <div class="make">
                <a href="upload.html">テーマの投稿</a>
            </div>
            <ul>
                <li>1</li>
            </ul>
        </div>
        <div class="main">
            <div class="title">welcome!!</div>
            <h1>掲示板</h1>
            <div class="box2">
                <ul>
                    <li>1</li>
                </ul>
            </div>
        </div>
    </body>
</html>

contents.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>イラスト掲示板</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            イラスト掲示板
        </div>
        <div class="sub">
            <div class="make">
                <a href="upload.html">テーマの投稿</a>
            </div>
            <ul>
                <li>1</li>
            </ul>
        </div>
        <div class="main">
            <div class="title">タイトル</div>
            <div class="box1">
                <div class="font-zone">
                    <b><font color="green">1.</font>名前-タイトル-xxxx-xx-xx</b>
                </div>
                <div class="image-zone">
                    <img src="images/icons/icon.png"  id="avatar" alt="">
                </div>
            </div>
            <div class="box2">
                <form action="/illustupload" method="post" enctype = "multipart/form-data">
                    <div class="fields-group">
                        <div class="fields"><input type="name" class="inputfield" name="password" placeholder="名前"></div>
                        <div class="fields"><input type="name" class="inputfield" name="password" placeholder="タイトル"></div>
                        <input type="file" name="file"  accept="image/*">
                    </div>
                    <input type="submit" class="submit-button" value="送信">
                </form>
            </div>
        </div>
    </body>
</html>

make.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>掲示板作成</title>
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            イラスト掲示板
        </div>
        <div class="sub">
            <div class="make">
                <a href="upload.html">テーマの投稿</a>
            </div>
            <ul>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
        <div class="main">
            <div class="title">タイトル</div>
            <form action="/illustupload" method="post">
                <div class="fields-group">
                    <div class="fields"><input type="name" class="inputfield" name="password" placeholder="掲示板名"></div>
                </div>
                <input type="submit" class="submit-button" value="作成">
            </form>
        </div>
    </body>
</html>

そして、これだけだとただ文字が並べられただけのページになるため、デザイン用のcssファイルを作成した。

main.css

@charset "UTF-8";

.boxA::after {
    content: "";
    display: block;
    clear: both;
}

body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
    background-color: #b0b0b0;
}

span{
    color:#727272;
}

.header{
    width: 100%;
    height: 50px;
    margin-right: 5px;
    font-size: 35px;
    color: #ffffff;
    font-weight: bold;
    text-align:center;
    background-color: #fff200;
}

.sub{float:left;
    width: 20%;
    padding: 10px;
    background-color: #ffffff;
}
.main{float:left;
    width: 60%;
    padding: 10px;
    background-color: #ffffff;
}

.title{
    font-size: 25px;
    text-align    : center;
    font-weight: bold;
    border-bottom: solid 2px #b0b0b0;
}
.box1{
    border-bottom: dotted 2px #727272;
}
.font-zone{
    color:#727272;
}

.fields-group{
    margin: 10px 0px;
}
.fields{
    padding:5px;
    border:1px solid #999
}
.inputfield{
    border: none; /*枠線非表示*/
    outline: none;
    font-size: 18px;
}
.submit-button {
    display       : inline-block;
    border-radius : 10%;          /* 角丸       */
    font-size     : 12pt;        /* 文字サイズ */
    text-align    : center;      /* 文字位置   */
    cursor        : pointer;     /* カーソル   */
    padding       : 5px 8px;   /* 余白       */
    background    : #999;     /* 背景色     */
    color         : #ffffff;     /* 文字色     */
    line-height   : 1em;         /* 1行の高さ  */
    opacity       : 1;           /* 透明度     */
    border        : 2px solid rgb(85, 85, 85);    /* 枠の指定 */
}
.submit-button:hover{
    opacity       : 0.8;         /* カーソル時透明度 */
}

最後に、これらを表示させるjsコードを以下のように作成した。

index.js

var express = require('express');
var ejs = require("ejs");
var app = express();

app.engine('ejs',ejs.renderFile);
app.use(express.static('public'));

// get
app.get("/", (req, res) => {
    res.render('main.ejs',{

    });
});

app.get("/contents", (req, res) => {
    res.render('contents.ejs',{

    });
});

app.get("/make", (req, res) => {
    res.render('make.ejs',{

    });
});

var server = app.listen(3000, () => {
    console.log('Port Number is 3000.');
})

この状態で、http://localhost:3000/にアクセスし、動作確認を行った。すると、以下のようなページが表示された。

続いて、コンテンツページを閲覧してみる。すると、このようなページを閲覧することができた。

最後に、掲示板作成ページを閲覧してみる。すると、掲示板名の入力欄と確定ボタンが表示されていることが確認できた。これで一通りwebデザインは完了した。

データベースの設定

次に、データベースの設計を行う。ここでは、MySQLを用いてデータベースを作成する。

まずは、mysqlを起動させ、mysqlにパスワードを用いてアクセスする。

そして、本プロジェクトで利用するデータベースを作成する。

ここから、CREATEで以下の２つのデータベースを作成した。

chatsデータベース

contentsデータベース

フォーム処理

掲示板作成、及び掲示板への投稿機能を設計する。

まず、index.jsに、以下のような記述を先頭部分に加えた。

var multer = require('multer');

var filename;

var storage = multer.diskStorage({
    //ファイルの保存先を指定
    destination: function(req, file, cb){
        cb(null, './public/images')
    },
    //ファイル名を指定
    filename: function(req, file, cb){
        var extention = file.originalname;
        filename = Date.now() + '.' + extention.split('.').pop();
        cb(null, filename)
    }
})

var upload = multer({storage:storage})

var mysql = require('mysql');

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));

var mysql_setting = {
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'image_chat'
};

次に、post処理を２つ加えた。

app.post("/upload_contents", upload.single('file'), (req, res) => {
    var date = new Date();

    var name = req.body.name;
    var title = req.body.title;
    var update_date = date.getFullYear()
    + '/' + ('0' + (date.getMonth() + 1)).slice(-2)
    + '/' + ('0' + date.getDate()).slice(-2)
    + ' ' + ('0' + date.getHours()).slice(-2)
    + ':' + ('0' + date.getMinutes()).slice(-2)
    + ':' + ('0' + date.getSeconds()).slice(-2);
    var chat_id = req.body.chat_id;
    var data = {'name':name, 'title':title, 'update_date': update_date, 'image_name':filename, 'chat_id':chat_id}

    var connection = mysql.createConnection(mysql_setting);

    connection.connect();
    connection.query('insert into contents set ?', data, function (error, results, fields){
        res.redirect('/ch'+chat_id);
    });

    connection.end();
});

app.post("/makechat", (req, res) => {
    var name = req.body.name;
    var data = {'name':name}

    var connection = mysql.createConnection(mysql_setting);

    connection.connect();
    connection.query('insert into chats set ?', data, function (error, results, fields){
        res.redirect('/');
    });

    connection.end();
});

これで、後はejs側の投稿フォームを変更すれば、投稿フォーム自体は完成する。

なお、掲示板作成の際は、chatsデータベースに入力した掲示板名を挿入するようにしており、掲示板への書き込みの際は、名前、タイトル、画像を選択し、それらをcontentsデータベースに挿入するだけでなく、投稿時のミリ秒と元画像の拡張子を挿入した画像名、掲示板ID、投稿日時をそれぞれcontentsデータベースに自動で挿入し、その画像名で、multerを用いてディレクトリに保存するようにしている。

投稿の表示

次は、データベースを経由することで掲示板やそれへの投稿の一覧を表示するようにする。

そのために、index.jsのgetリクエスト部分を、以下のように書き換えた。

app.get("/", (req, res) => {
    var connection = mysql.createConnection(mysql_setting);

    connection.connect();    
    connection.query('SELECT * from chats',function (error, results, fields){
        if (error == null){
            res.render('main.ejs',
            {
                chats:results
            });
        }
    });
    connection.end();
});

app.get("/ch:chatlink", (req, res) => {
    var chatlink = req.params.chatlink
    var chats
    var images

    var connection = mysql.createConnection(mysql_setting);

    connection.connect();  
    connection.query('SELECT * from chats',function (error, results, fields){
        if (error == null){
            chats=results
        }
    });
    connection.query('SELECT * from contents where chat_id= ?', chatlink,function (error, results, fields){
        if (error == null){
            images=results
        }
    });
    connection.query('SELECT * from chats where item_id= ?',chatlink ,function (error, results, fields){
        if (error == null){
            res.render('contents.ejs',{
                nowchat:results[0],
                chats:chats,
                images:images
            });
        }
    });
    connection.end();
});

app.get("/make", (req, res) => {
    var connection = mysql.createConnection(mysql_setting);

    connection.connect();
    connection.query('SELECT * from chats',function (error, results, fields){
        if (error == null){
            res.render('make.ejs',{
                chats:results
            });
        }
    });
    connection.end();
});

このようにすれば、掲示板の一覧や投稿の一覧が表示されるようになる。

因みに、各掲示板ページの表示に至っては、ch:chatlinkというように、ch(チャットID)にアクセスすることで、そのIDに対応したページにアクセスすることができるようにしている。

表示

index.jsの修正は終えたため、最後に各ejsファイルを以下のように書き換えた。

main.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>イラスト掲示板</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            <a href="/" class="head">イラスト掲示板</a>
        </div>
        <div class="sub">
            <div class="make">
                <a href="/make">テーマの投稿</a>
            </div>
            <ul>
                <% for(var i in chats) { %>
                    <li><a href="/ch<%-chats[i].item_id%>"><%=chats[i].name%></a></li>
                <% } %>
            </ul>
        </div>
        <div class="main">
            <div class="title">welcome!!</div>
            <h1>掲示板</h1>
            <div class="box2">
                <ul>
                    <% for(var i in chats) { %>
                        <li><a href="/ch<%-chats[i].item_id%>"><%=chats[i].name%></a></li>
                    <% } %>
                </ul>
            </div>
        </div>
    </body>
</html>

contents.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title><%=nowchat.name%></title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            <a href="/" class="head">イラスト掲示板</a>
        </div>
        <div class="sub">
            <div class="make">
                <a href="/make">テーマの投稿</a>
            </div>
            <ul>
                <% for(var i in chats) { %>
                    <li><a href="/ch<%-chats[i].item_id%>"><%=chats[i].name%></a></li>
                <% } %>
            </ul>
        </div>
        <div class="main">
            <div class="title"><%=nowchat.name%></div>
            <% for(var i in images) { %>
                <div class="box1">
                    <div class="font-zone">
                        <b><font color="green"><%- i %>.</font><%=images[i].name%>-<%=images[i].title%>-<%=images[i].update_date%></b>
                    </div>
                    <div class="image-zone">
                        <img src="images/<%=images[i].image_name%>">
                    </div>
                </div>
            <% } %>
            <div class="box2">
                <form action="/upload_contents" method="post" enctype = "multipart/form-data">
                    <div class="fields-group">
                        <input type="hidden" name="chat_id" value="<%=nowchat.item_id%>">
                        <div class="fields"><input type="text" class="inputfield" name="name" placeholder="名前"></div>
                        <div class="fields"><input type="text" class="inputfield" name="title" placeholder="タイトル"></div>
                        <input type="file" name="file"  accept="image/*">
                    </div>
                    <input type="submit" class="submit-button" value="送信">
                </form>
            </div>
        </div>
    </body>
</html>

make.ejs

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>掲示板作成</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/main.css">
        </head>
    <body>
        <div class="header">
            <a href="/" class="head">イラスト掲示板</a>
        </div>
        <div class="sub">
            <div class="make">
                <a href="/make">テーマの投稿</a>
            </div>
            <ul>
                <% for(var i in chats) { %>
                    <li><a href="/ch<%-chats[i].item_id%>"><%=chats[i].name%></a></li>
                <% } %>
            </ul>
        </div>
        <div class="main">
            <div class="title">掲示板作成</div>
            <form action="/makechat" method="post">
                <div class="fields-group">
                    <div class="fields"><input type="text" class="inputfield" name="name" placeholder="掲示板名"></div>
                </div>
                <input type="submit" class="submit-button" value="作成">
            </form>
        </div>
    </body>
</html>

この状態で、先程のページにアクセスしてみる。すると、以下のようにサイドメニュー、本文に掲示板の一覧が表示されるようになった。

そして、次に掲示板作成を行う。「テーマの投稿」リンクから掲示板作成フォームに飛び、適当に掲示板名を打って作成ボタンを押す。

すると、掲示板一覧に「223」という名前の掲示板が追加された。

そして、そこをクリックし、アクセスしてみると、以下のようなページに飛んだ。そこで、名前、タイトル、画像を選択し、送信してみる。

すると、以下のように名前、タイトル、日時、投稿した画像が表示され、投稿機能が動作することも確認できた。このようにして、イラスト専用の掲示板を作成した。

LaTeXの環境を構築し、実際に動かしてみる

LaTeXは、文書作成に役立つアプリである。文書作成自体は、Wordなどもあるが、図表番号がずれたり、図がどこにいったかわからなくなったりするため、慣れていない人にとっては、少し使いづらい。LaTeXだと、コードに関する知識が求められるが、コードで文書を作成するため、Wordの問題点も取り除ける。

そこで今回は、LaTeXの環境構築を、以下の記事に従って、WSL2上でDockerを用いて実行を行う。

zenn.dev

準備

今回のLaTeXでは、以下のソフトウェアをインストールしておいた。

  • VSCode
  • Docker
    • sudoコマンドなしで使えるようにしておく。
    • sudo service docker startでdockerを起動しておく
  • git
    • githubアカウントも作成しておく

LaTeX Workshopに関しては、VSCodeで検索をかけることによって、すぐ見つけることができた。

Docker imageのpull

そして、インストールしたdockerにはLaTeX環境が構築されたimageをpullした。

そして、念のためdocker imageの一覧を確認し、「ghcr.io/being24/latex-docker」があることを確認した。

リポジトリの作成

続いて、以下のテンプレートを用いて、LaTeXリポジトリを作成した。

github.com

まずは、「Use this template」もしくは「Fork」をクリックする。どちらでも構わないが、今回はUse this templateで作成した。

次に、オーナーとリポジトリ名を確定し、公開設定をpublicにした後、Create repository from templateからリポジトリを作成する。

続いては、リポジトリをwsl2上にクローンする。まずは、作成したリポジトリにアクセスし、URLを確認する。

そして、そのURLをcloneの後に付け、ローカル環境にcloneした

更に、cloneされたリポジトリのディレクトリ（※１）に移り、内容を確認した。更に、main.texの内容を変更するために、「code .」と打つことで、VSCodeを起動する。

pdfの作成・確認

まず、main.texの内容を以下のように書き換えた。

\documentclass{classes/resume}

\title{
	\gt{LaTeX 環境の構築}\\
}

\author{
	\gt{池谷大学 デジタルイラスト学科}\\
	\gt{IR64H121 池谷嵐}
}

\date{}

\begin{document}
\maketitle

% ここに本文をかく
% exampleフォルダを参考にしてください

\end{document}

そして、その内容でpdfファイルを作成する。そのために、以下のコードでdocker imageの起動を行った。すると、workdirのshellにアクセスした。

この状態で、uplatexを用いて、main.texの変換を行う。

変換はできたが、変換したファイル形式は、pdfではなく、dviとなっている。よって、dvipdfmxで、dviをpdfに変換した。変換が無事完了したので、exitで退出した。

早速pdfを確認するのだが、今回は二通りの方法で確認していく。まずは、View in VSCode tabから確認する方法である。これをクリックすると、VSCodeのもう一つの枠が生成され、pdfの内容が表示された。

続いては、「View in web browser」で、表示する方法である。これをクリックすると、先程と同じ内容のpdfが、デフォルトのブラウザで表示された。

また、githubのActionsから確認するという方法もある。githubにプッシュし、ActionsのArtifactsを見てみると、pdfが作成されていることが確認できる。それをクリックし、zipファイルの中に、確認した内容と同じpdfが作成されるはずである。

こうして、LaTeXの環境を構築し、実際にpdfを生成し、それを確認した。

補足：途中で生じた問題点

LaTeX Workshopの「Build LaTeX project」からビルドするほうが、pdfを素早く作成することができるが、実行すると以下のエラーが発生した。

このエラーについて調べるため、「Open compiler log」から出力を見てみた。これを見ると、どうやらmain.texが見つからないとのことである。ただし、dockerから見ると、workdirディレクトリ上にmain.texがあるはずである。そのため、dockerにアクセスできていないのが問題なのかもしれない。

現状、以上の問題について調べている最中である。

追記：VSCodeを最新のものにし、再起動し、LaTeXをWSL上にインストールすると、pdfを作成することができた。

ir604.hatenablog.com

expressを試してみた　POST処理＆パーシャルでテーブル表示

今回は、POST処理と、パーシャルによるテーブルを作成し、表示する処理の二つを行う。

Body Parserのインストール

まずは、フォーム処理を扱うためのモジュール、Body Parserをインストールする。今まで通り、npmコマンドでインストールした。

次に、main.ejs（前回記事で作成したもの）のbox2-2を書き換えた。formタグを用意し、二つのinput（それぞれテキスト、送信ボタン）を用意した。これをmainファイル内で行う。

次は、jsファイルを編集する。まずは、先頭部分に以下のコードを追加した。

そして、新たにpostを追加。書き方自体はget処理と大差はない。また、フォームで送信した内容を読み取るには、

  • req.body.＜name＞

とする。＜name＞には、それぞれのinputタグに追加されたname（main.ejsファイルのtextではmessage）を追加した。

この状態で起動すると、以下のようなテキストボックスと送信ボタンができた。

早速テキストに文字を入力し、送信ボタンを押すと以下のように、テキストに書かれた内容が上に表示された。

パーシャルでテーブルを表示

次は、パーシャルによるテーブル表示を行う。まずは、data_item.ejsというファイルを追加する。これがテーブルのベースとなる。

次に、main.ejsのbox2-2を以下のように書き換えた。forでdataをすべて表示するまで繰り返し、data_item内に読み込まれたkeyとvalのデータをはめていっている。

次に、jsファイルを編集する。まずは、dataという変数を用意し、テーブルのデータを一つずつ作成する。今回は、五人のデータを用意した。最後に、get処理部分にdataを追加した。

この状態で実行すると、以下のような表示がされた。ちょうど五人分のデータがすべて出力されたことを確認できた。

このようにして、POST処理と、パーシャルでのテーブル表示を行った。

expressを試してみた　EJSファイルの読み込み＆引数を用いる

今回は、ejsで記述したファイルをexpressで実行し、更に引数も用いてみる。

インストール

まずは、ejsをインストールする。npmコマンドで--saveを加えた上でejsをインストールする。

これでejsがインストールされたはずなので、package.jsonを確認してみる。すると、以下のコードが表示された。これで、ejsのインストールが完了したことが確認できた。

表示してみる

早速表示してみる。まずは、viewsというディレクトリを作り、その中にejsファイルを入れる。今回扱うejsファイルは、

ir604.hatenablog.com

のHTMLファイルと同じものである。また、cssというディレクトリも作成し、そこにスタイルシートを置く。

そして、jsコード内に、

  • var ejs = require("ejs");
  • app.engine('ejs',ejs.renderFile);

を追加し、ejsを用いることができるようにする。そして、sendFileだった箇所をrenderに変え、第一引数にejsファイル、第二引数に、ejsファイルにて用いる引数一覧を定義した。

すると、前回作成したものと同じものが表示された。

ejsで引数を用いる

次は、ファイル内でjsファイルからの引数を用いて、内容を操作する。

まずは、main.jsの以下の部分を書き換えた。<%-引数名%>で引数を用いている。

 <div class="box2-1">
                    <%-title%>
                </div>

この状態で再度実行すると、以下のように表示された。これで、引数を用いて表示することができた。

クエリパラメーターを用いた値を挿入

これから、URLの?contents=???の???の値を挿入する。

まずは、main.ejsのURLの部分を

 <div class="box2-2">
                    Hello World!
                    <br>I love Iketani Ran.
                    <br><a href ='/another?content=OK'>another page.</a>
                </div>

とし、another.ejsは、

 
<div class="box2-2">
                    Congraturation!
                    <br>You have accessed another page!
                    <br><%-content%>
                </div>

の部分を変更した。そして、jsファイルの方では、anotherページにcontent変数を用意し、そこにquery.???でクエリを取得できるようにする。そして、それをそのままcontent引数に用いるような処理を行うように書き換えた。

早速実行し、anotherページにmainページからアクセスすると、?content=OKの通り、contentの内容であるOKが表示された。

これで、クエリパラメーターを用いた値を挿入できたことが確認できた。

こうして、ejsファイルを読み込み、引数を埋め込んで表示させた。

expressを試してみた　HTMLを表示させる

今回は、expressをインストールし、それを用いてhtmlをローカルサーバーで表示させる。

インストール

まずは、node.jsが必要なので、windowsの場合、ここからダウンロードする。

 

nodejs.org

ubuntuでやる場合、

$ sudo apt-get update
$ sudo apt-get install nodejs
$ sudo apt-get install npm

もしくは、

$ sudo apt-get install nodejs npm

とすれば、Node.jsをインストールすることができる。

次に、npmでexpressをインストールする。npm install expressで、expressのパッケージをインストールする。

すると、package.jsonに以下のコードが追加された。これで、インストールされたことが確認できた。

実際にローカルサーバーでブラウザに表示させる

expressがインストールされたことが確認できたので、実際に表示させてみる。

まず、expressを用いるためには

var express = require('express');
var ejs = require("ejs");
var app = express();

と最初に定義する。express変数にexpressをrequireで使えるようにする処理を格納し、appにそのexpress関数を実行したものを格納する。

次に、get関数を用いる。第一引数に割り当てるパス、第二引数に処理を送ったり受け取ったりする処理を行う変数があり、{}内に表示させる内容を定義しておく。このコードの場合は、ブラウザにIketani Ran.と表示させる。

そして、listen関数でローカルサーバーを構築する。第一引数にはポート番号が書かれている。そして、{}内で、ログにPort Number is 3000.と表示させている。

これらをすべて纏めると、以下のようになる。

そして、これを実際に表示させてみる。node ファイル名でファイルを起動する。すると、以下のように表示され、ローカルサーバーが立ち上がった。

実際にブラウザで試してみる。

http://localhost:3000/

にアクセスすると、以下のように表示された。これで、実行されたことがわかった。

確認ができれば、ローカルサーバーを一度閉じる。Ctrl+Cで閉じることができた。

HTMLファイルを表示

これを実際に用いる際は、htmlなどのファイルを用いて表示する。まずは、一つディレクトリを用意し、htmlとcssファイルを置く。因みに、htmlとcssファイルは、

ir604.hatenablog.com

と同じものを用いる。

早速、jsコードを書き換えてみた。res.sendをsendFileに変え、__dirname+'html/index.html'でhtmlファイルを読み込ませるようにした。

早速実行し、ブラウザで実行すると、以下のようになった。これは、htmlファイルしか読み込んでいないため、cssファイルが読み取られてないのである。

これを読み込ませるために、use関数を定義し、static関数でhtmlディレクトリを読み込む。これでcssが用いることができるようになった。

再度実行し、ブラウザで開くと、このように、cssファイルを読み込むことができるようになった。

別ページの表示

次に、別のページを表示できるようにする。そのためには、別のパスを定義したget関数を用意すればいい。

そして、htmlディレクトリに、別ページのhtml、cssファイルを追加する。

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>タイトル</title>
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="another_page.css">
    </head>
    <body>
        <div class="boxA">
            <div class="header1">
                header(left)
            </div>
            <div class="header2">
                header(right)
            </div>
        </div>
        <div class="boxB">
            <div class="box1">
                <div class="box1-1">
                    menuber1
                </div>
                <div class="box1-2">
                    menuber
                </div>
                <div class="box1-1">
                    menube2
                </div>
            </div>
            <div class="box2">
                <div class="box2-1">
                    title
                </div>
                <div class="box2-2">
                    Congraturation!
                    <br>You have accessed another page!
                </div>
            </div>
        </div>
        
    </body>
</html>

CSS

.boxA::after {
    content: "";
    display: block;
    clear: both;
  }
.boxB::after {
    content: "";
    display: block;
    clear: both;
  }
.header1    {float: left;
    width: auto}
.header2    {float: right;
    width: auto}
.boxA {padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 40px;
    font-weight: bold;
    color:#1900ff;
    background-color: rgb(0, 174, 255);
}
.boxB {
    padding-top:20px;
}
.box1    {
    float: left;
    border:soild;
    width: 200px;
    border: 4px solid;
    border-color:#a5a5a5;
    padding-right: 5px;
    padding-bottom: 100%;
}
.box1-1 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 100%;
    font-size: 30px;
    font-weight: bold;
    color:#1900ff;
    background-color: rgb(0, 174, 255);
}
.box1-2 {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
}
.box2    {float: left;
    width: 83%;
    padding-left: 20px;
}
.box2-1    {padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right:100%;
    color:#1900ff;
    background-color: rgb(0, 174, 255);
    font-size: 30px;
    font-weight: bold;
}
.box2-2    {padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;}

そして、htmlファイルも別ページにアクセスできるように改造する。

<div class="box2-2">
                    Hello World!
                    <br>I love Iketani Ran.
                    <br><a href ='/another'>another page.</a>
                </div>

この状態でjsファイルを実行し、最初のページにアクセス。すると、追加したurlがあるため、そこをクリック。

すると、以下のページにアクセスすることができた。これで、別ページの追加ができたことが確認できた。

こうして、expressでhtmlを表示させた。

Chapter4(番外)　labcからデプロイを行ってみた

これまで、Ubuntu本体に環境を構築し、ハンズオンを行っていた。しかし、あるDocker Imageを用いれば、その手順を省いてデプロイを行うことができるため、今回はそのDocker Imageをダウンロードし、そのDocker Imageを用いてChapter4のハンズオンを実行してみた。

Dockerの起動

まずは、Dockerを起動する。Dockerは、

  • sudo service docker start

で起動した。Starting Docker: dockerがOKとなり、Dockerが起動した。

Docker Imageのダウンロード

まず、今回用いるDocker Imageをダウンロードした。docker runでlabcを起動しようとすると、自動的にイメージをpullしてきた。

これで、labcがダウンロードできた。念のため、Imageを終了し、

  • Docker image ls

で確認した。すると、tomomano/labc（1.81GB）が追加された。

初期設定

こちらの環境にも初期設定をして置かなければならない。まずは、Chapter3で用いたCLIの設定を同じ方法で行う。

次に、アクセスキー、シークレットキー、リージョンを環境変数として作成しておく。

そして最後に、CDKの設定も行った。こちらも、Chapter4で行ったのと同じ方法で行う。これで、初期設定は完了した。

デプロイ

早速、デプロイを行った。こちらもChapter4と同じ手順でデプロイを行う。今回はEC2のデプロイのため、SSH鍵も作成し、handson/ec2-get-startedで行った。

デプロイが終了すれば、ssh鍵でアクセスする。@以降はInstancePublicIpを入力した。

試しにcpuの情報を探り、Chapter4と同じ出力になるかどうかを確認する。すると、以下のように表示された。これでChapter4と同じようなcpuの情報を確認することができた。

次に、インスタンスページでインスタンスが生成されているかどうかを確認した。すると、MyfirstEc2というインスタンスの存在が確認できた。これで一通り終わったため、cdk destroyでデプロイを終了した。

そして、labcも用が済んだため、終了した。

Docker Imageの削除

Docker Imageのサイズが大きく、容量が足りないというときがあるかも知れない。そこで、Docker Imageの削除も試してみた。

  • docker image rm <DockerImage名> -f

で、削除してみた。その上でDocker Image一覧を見ると、Imageが削除されたことを確認できた。

Dockerの終了

一通りDockerで行うことは終わったため、

  • sudo service docker stop

でdockerを終了した。

これで、labcでのデプロイ作業を行った。