【土曜日の夜はプログラミング勉強会】Webプログラミング勉強会 HTML編

土曜日の夜にオンラインで勉強会を開催いたします!✨

記念すべき第1回目の勉強会は、
「Webサイトの仕組み」、「Webサイトの開発方法」、「Web開発で使われるHTML」について分かりやすく教えたいと思います!!✨



【こんな方に参加オススメ】
●プログラミングやアプリ開発に興味がある方
●趣味としてプログラミングやアプリ開発を始めたい方
●教養としてプログラミングを学びたい方
●将来エンジニアになりたい方
●土曜日の夜が暇で仕方がない方


【勉強会の内容予定】
●勉強会の目的
●Webサイトの閲覧の仕組みについて
●どうやってWebサイトが開発されているのか
●HTMLとは?
●HTMLタグとは?
●HTMLの書き方

【参加費】
1,000円
※代金は先払いとなっております。

【場所】
Google Meet(オンライン)

【開催日時】
2022年5月28日(土) 21:00~22:00

【申込方法】


①下記URLにアクセスして、こくチーズにお申込下さい

www.kokuchpro.com

②申込時に入力頂いたメールアドレス宛てに、勉強会当日の会議URL情報、振込先情報を記載したメールをお送り致します。
③振込先にて、1,000円をお支払い下さい。
④勉強会当日、メールの会議URLにご参加下さい


皆さんのご参加お待ちしております!✨^^

HTML入門

今回は、Webサイト制作に必要な言語であるHTMLについて記事を書きます!

・Webサイトの仕組み
・HTMLとは?
・なぜHTMLを使うの?
・HTMLはどうやって書くの?
・HTMLはどうやって実行するの?

Webサイト閲覧の仕組み

HTMLの説明の前に、全体像であるWebサイトの仕組みについて説明したいと思います!

私たちがGoogle検索やYoutubeを閲覧するときには、どのような仕組みで動いてるのでしょうか?

Webサイトの閲覧では、閲覧者サーバで成り立ってます。

f:id:RyoheiAdachi:20220302215035p:plain

閲覧者は私たちのことですね。


サーバとは、サービスを提供する役割があるコンピュータのことです。
特に、Webサイトを提供するサーバのことをWebサーバと呼びます^_^

閲覧者はブラウザというソフトウェアを使って、Google検索やYoutubeを閲覧します^_^

この時、ブラウザを使って、見たいサイトにアクセスすると、サーバに向かって「サービスを要求する通信」が発生します。
(サービスを要求する通信のことをリクエスト通信と言います。)

対して、サーバは要求があったサービスをブラウザに返します。
(サービスを提供する通信をレスポンス通信と言います。)

f:id:RyoheiAdachi:20220302215436p:plain

このときに、サーバがブラウザにWebサイトを返す場合、HTMLファイル送られます。
HTMLファイルはテキストファイルであり、中身はHTML言語が記載されてます^_^


f:id:RyoheiAdachi:20220302215634p:plain

HTMLファイルを受信したブラウザはそのHTMLファイルの内容を表示させます。

HTMLとは?

先ほどの、全体像を確認してみましょう!

f:id:RyoheiAdachi:20220302215652p:plain

サーバがブラウザにWebサイトを返す際に、送られたHTMLファイルの中身にHTML言語が記載されてました。

つまり、HTMLはWebサイト(Webページ)を作るのに必要となる言語なのです!
HTML言語は、Webサイトの構造・文章について記述します
このように、各文章に対する構造や見た目など指定する言語をマークアップ言語と呼びます。

なぜWebサイトを作るのにHTMLを利用するのか?

HTMLの正式名称は、Hyper Text Markup Languageといい、
ハイパーテキストを記述する際に使用する言語として開発されました。

ハイパーテキストとは、Webサイト(Webページ)間で相互に関連付ける仕組みのことです。

インターネットには、莫大な量のWebサイトが散らばってます。

その中で、Webサイトには、別サイトにアクセスできるURLリンクが貼られてます。

このURLリンクをたどっていくことで、インターネット上に散らばった、
Webサイトを相互に関連付けることができます。

このURLリンクのことをハイパーリンクと呼びます。

f:id:RyoheiAdachi:20220302220131p:plain

HTMLはどうやって書くの?


HTMLはタグと呼ばれるもので構成されてます。


タグとは、見出し、段落、画像の表示、他のサイトへのリンクなど
Webサイトの文章に意味を持たせるために指定する印のことです。

タグは、< と > で囲みます。

f:id:RyoheiAdachi:20220302220224p:plain

意味を持たせたいテキストに対して、開始タグ終了タグで囲みます。

f:id:RyoheiAdachi:20220302220243p:plain

実際にサンプルのHTMLプログラムを見てみましょう。

<html>
    <head>
        <meta charset=”UTF-8”>
        <title>タイトル</title>
    </head>
    <body>
        <h1>見出し</h1>
        <p>段落<p>
        <a href=”http://aaaa.com/index.html”>リンク</a>
    </body>
</html>

例えば、<h1>~</h1>は見出しを意味するタグです。
<p>~</p>は段落を意味するタグです。

このようにHTMLはタグで構成されてます。

HTMLはどうやって実行するのか?

HTMLは、C言語Java言語のようなコンパイルは必要ございません。
(コンパイルとは、プログラミング言語で記述したファイルコンピュータが読み取り可能なファイルに変換することです。)

さらに、HTMLファイルは、単なるテキストファイルとして作られてます。

ですので、メモ帳やさくらエディタなどテキストエディタを開いて、HTMLを記述します。
例えば、下記の内容をテキストエディタに記述してみましょう!

<html>
    <head>
        <meta charset=”UTF-8”>
        <title>Hello</title>
    </head>
    <body>
        <h1>My Home Page</h1>
        <p>welcome!!<p>
        <a href=https://www.google.com>Google Link</a>
    </body>
</html>

f:id:RyoheiAdachi:20220302223352p:plain

そのあと、記述したテキストファイルを●●●.htmlとして保存します。
今回はinde.htmlという名前で保存します。

f:id:RyoheiAdachi:20220302220525p:plain

そして、作成したindex.htmlをブラウザで開きましょう!
(右クリックで「プログラムで開く」 > GoogleChromeMicrosoft Edgeなどブラウザを選択しましょう。あるいは、index.htmlのアイコンをダブルクリックしてみましょう^^)

f:id:RyoheiAdachi:20220302220642p:plain

f:id:RyoheiAdachi:20220302221447p:plain


すると、以下のようにHTMLで記述した内容がブラウザに反映されます^_^

f:id:RyoheiAdachi:20220302221610p:plain

Google Linkをクリックすると、Google検索ページに飛ぶようになってます^^✨

おそらく、HTMLファイル内に日本語を記述して、ブラウザに反映させると、
日本語ではなく、変な文字が表示されるかと思います💦
(これを文字化けと言います。)

この対処についてはまた別記事で教えます!✨

このようにHTMLファイル自体は非常にシンプルな作りになってるのですね~(^^♪

node.jsでチャットアプリ開発⑤

では、今回はチャットアプリを完成させちゃいましょう!^_^

今回作る項目としては以下の通りです。
・投稿したメッセージをブラウザに表示させる
・デザインを組み込む
・投稿日付を表示させる

投稿したメッセージをブラウザに表示させる

ここでやりたいことは、
チャット画面のテキストエリア(メッセージ入力できる四角い箱)にメッセージを入力した後、
「Send」ボタンを押します。

すると、入力したメッセージがテキストエリアの下部に表示されるようにします☺

f:id:RyoheiAdachi:20220223145654p:plain

それではさっそく作っていきましょう!(^^♪

ます、サーバ側プログラムであるapp.jsを開きましょう^_^
下記の/*ここから追加*/で囲まれている部分を追加してあげましょう!

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
  console.log('接続成功');

  /*ここから追加*/
  //クライアントからメッセージ情報を受け取る
  socket.on('message_event',function(data){ 

      //受信したメッセージをターミナルに表示
      console.log('message: '+ data)
      
      //全クライアントに対して、メッセージ情報を送信する
      io.emit('message', data);
  });
  /*ここまで追加*/
});

server.listen(3000);

クライアント側のindex.htmlも開きましょう!
サーバと同じように、下記の/*ここから追加*/で囲まれている部分を追加してあげましょう!

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();

        /*ここから追加*/
        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                //入力したメッセージ情報を抽出
                var data = $('#input_msg').val();

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');

                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                $('#messages').append($('<li>').text(data)); 
            });
        });
        /*ここまで追加*/
    </script>
    <ul id="messages"></ul>
</body>
</html>

追加できましたら、動作を確認してみましょう!
コマンドプロンプト(ターミナル)を開き、node.jsを起動します。

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。

チャット画面が開きましたら、今回はテキストエリアにメッセージを入力して、
「Send」を押してみましょう!

入力したメッセージがテキストエリアの下部に表示されればOKです!

f:id:RyoheiAdachi:20220223145611p:plain

デザインを組み込む

大体のチャットアプリ機能は完成しましたが、
デザインが質素ですよね・・・

ということで、デザインを組み込みたいと思います。


デザインを組み込むには、CSS(Cascading Style Sheets)を実装していく必要があります。
まずは、CSSファイルを作りましょう^_^

現在、app.jsファイルがあるフォルダの構成は下記の通りだと思います。

├ app.js
├ index.html
├ package.json
├ package-lock.json
└ node_modules/   ←フォルダ

f:id:RyoheiAdachi:20220223150256p:plain

ここにpublicという名前のフォルダを作成してください^_^

├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/  
└ public/  ←フォルダ作成

f:id:RyoheiAdachi:20220223150551p:plain

作成しましたら、publicフォルダに入り、
style.cssファイルを作成してください^_^

├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/  
└ public/  ←フォルダ作成
      └ style.css  ←作成

f:id:RyoheiAdachi:20220223151001p:plain

style.cssを作成しましたら、テキストエディタ(メモ帳やさくらエディタなど)で、style.cssを開きましょう!

そして、style.cssに下記の内容を記述しましょう!^^

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    display: block;
    scroll-behavior: smooth;
}

body {
    font-size: 13px;
    line-height: 1.7;
    font-family:sans-serif;
    display: block;
}

div {
    display: block;
}

a {
    text-decoration: none;
    margin: 0;
    font-size: 100%;
    color: black;
}

button {
    padding:0.3% 3%;
    background-color: rgb(6, 6, 112);
    border-radius: 40px;
    font-size: 16px;
    border: none;
    color: white;
    transition: 0.3s;
    cursor: pointer;
    margin-left: 10px;
}

button:hover {
    background-color:rgb(0, 0, 255);
    transition: 0.3s;
}

h1 {
    font-size: 30px;
    margin: 10px 10px;
}

input {
    border: solid black 1px;
    margin-left: 15px;
    height: 20px;
    width: 200px;
}

.form {
    display: flex;
}

#messages {
    font-size: 18px;
    margin-top: 10px;
    margin-left: 15px;
    list-style: none;
}

これでCSSの実装は完了です。
上記の各CSSの意味についても、また別途記事で説明したいと思います^_^

では、サーバ側app.js、クライアント側index.htmlにおいて、デザイン(CSS)を読み込むようにしましょう!
まずapp.jsを開き、以下の追加部分であるapp.use(express.static('public')); を追加してください!

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

//CSSファイル(静的ファイル)が保存されてるディレクトリを指定
app.use(express.static('public')); //追加

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
  console.log('接続成功');

  //クライアントからメッセージ情報を受け取る
  socket.on('message_event',function(data){ 

      //受信したメッセージをターミナルに表示
      console.log('message: '+ data)
      
      //全クライアントに対して、メッセージ情報を送信する
      io.emit('message', data);
  });
});

server.listen(3000);

次に、クライアントです。
index.htmlを開き、タグ内に を追加してください!

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <link rel='stylesheet' href="/style.css" /> <!--追加-->
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();

        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                //入力したメッセージ情報を抽出
                var data = $('#input_msg').val();

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');

                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                $('#messages').append($('<li>').text(data)); 
            });
        });
    </script>
    <ul id="messages"></ul>
</body>
</html>

これで、読み込み完了です!
一度、node.jsを落として、再度起動してみましょう!

node.jsの落とし方は、コマンドプロンプト上で「Ctrlキー」と「Cキー」の同時押しで落とすことができます^_^

では、node.js再度起動します!

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。

すると、デザインが反映されていれば、OKです!
例えば、ボタンの色が紺色に変わりましたね~

f:id:RyoheiAdachi:20220223152918p:plain

投稿した日付を付ける

さぁあ、最後です!
いまの状態ですと、メッセージしか表示されてません。
これでは、寂しいですよね。。😢

ということで、投稿日時も付けるようにしたいと思います!

まずは、クライアント側のindex.htmlを開きましょう!^_^
そして、下記の内容に書き換えましょう!

コメントで//追加という行を追加して、//削除という行を削除します。

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <link rel='stylesheet' href="/style.css" /> <!--追加-->
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        //日付情報を取得するための変数を用意
        var today = new Date();  //追加

        // サーバーへ接続
        const socketio = io();

        $(function(){

            //「Send」ボタンを押したときの処理を記載
            $('#message_form').submit(function(){
             
                /*ここから追加*/
                var year = today.getFullYear()
                var month =("0"+today.getMonth()+1).slice(-2);
                var date =("0"+today.getDate()).slice(-2);
                var hour =("0"+today.getHours()).slice(-2);
                var minutes =("0"+today.getMinutes()).slice(-2);

                var datetime = year + "/" + month + "/" + date + " " + hour + ":" + minutes
                //JavaScriptオブジェクトを取得し、JSON文字列に変換する。
                var data = JSON.stringify({datetime:datetime, message:$('#input_msg').val()});
                /*ここまで追加*/

                //入力したメッセージ情報を抽出
                //var data = $('#input_msg').val(); //削除

                //入力したメッセージ情報をサーバに送信
                socketio.emit('message_event', data);

                //入力テキストエリアを空にする
                $('#input_msg').val('');


                return false;
            });

            //サーバからのレスポンスを受け取る
            socketio.on('message',function(data){  
                //JSON文字列を取得し、JavaScriptオブジェクトに変換する。
                var data_json = JSON.parse(data);  //追加

                //受け取ったメッセージ情報をブラウザに描画(liタグとして追加)
                //$('#messages').append($('<li>').text(data)); //削除
                $('#messages').append($('<li>').text(data_json.message)); 
                $('#messages').append($('<div class="datetime">'+ data_json.datetime + '</div>'));  //追加
                $('#messages').append($('<div class="border" />'));  //追加
            });
        });

    </script>
    <ul id="messages"></ul>
</body>
</html>

次に、public/style.css(CSSファイル)を開き、以下の.border セレクタ.datetimeセレクタ箇所を追加してください!^_^

* {
    margin:0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

html {
    display: block;
    scroll-behavior: smooth;
}

body {
    font-size: 13px;
    line-height: 1.7;
    font-family:sans-serif;
    display: block;
}

div {
    display: block;
}

a {
    text-decoration: none;
    margin: 0;
    font-size: 100%;
    color: black;
}

button {
    padding:0.3% 3%;
    background-color: rgb(6, 6, 112);
    border-radius: 40px;
    font-size: 16px;
    border: none;
    color: white;
    transition: 0.3s;
    cursor: pointer;
    margin-left: 10px;
}

button:hover {
    background-color:rgb(0, 0, 255);
    transition: 0.3s;
}

h1 {
    font-size: 30px;
    margin: 10px 10px;
}
input {
    border: solid black 1px;
    margin-left: 15px;
    height: 20px;
    width: 200px;
}

.form {
    display: flex;
}
#messages {
    font-size: 18px;
    margin-top: 10px;
    margin-left: 15px;
    list-style: none;
}

/*ここから追加*/
.border {
    border: solid 0.5px rgb(117, 117, 117);
}

.datetime {
    font-size: 14px;
    color: rgb(22, 22, 22);
    margin-left: 90%;
}
/*ここまで追加*/


サーバ側のapp.jsの修正は不要です!

では、再度node.jsを落として、起動します。

node app.js

そして、ブラウザでhttp://localhost:3000にアクセスします。
メッセージを投稿すると、投稿日付も表示されると思います!

f:id:RyoheiAdachi:20220223211425p:plain

おめでとうございます!
これでチャットは完成です✨

最後までお疲れ様でした^_^

node.jsでチャットアプリ開発④

前回「node.jsでチャットアプリ開発③」では、
soket.ioを使ったサーバとクライアントの実装を行いました

今回は、前回のプログラムについて解説をしたいと思います^_^✨

サーバ側プログラムの解説

もう一度、実装したapp.jsの内容を見てみましょう!^_^

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
    console.log('接続成功');
  });

server.listen(3000);

まず、最初にExpressのモジュールをロードして、
アプリケーションオブジェクトを作成してます。

// Expressをインポート
var express = require('express');
const app = express();

これは、「node.jsでチャットアプリ開発②」でも解説しましたね^_^

次が今回の本題の部分です。

// Socket.ioをインポート
const io = require('socket.io')(server);


上記の1行でSocket.ioモジュールをロードしてます。
Socket.ioのオブジェクトは、「io」という引数に入ります。

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

これはルーティングの設定を行ってます。

/(トップページ)にアクセスした際に、index.htmlのページを表示させるようにしてます。
「node.jsでチャットアプリ開発②」でも解説した通りです。

ただ、今回は「__dirname」という表記がありますね。

「__dirname」はExpressで利用することができる、特別な変数です。
現在実行されているプログラムが保存されている場所(フォルダ)の情報が入ってます。

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
    console.log('接続成功');
  });

on()メソッドを使ってクライアント側と接続されているかを確認します。
第1引数に「connection」と設定することで、接続されているかどうかを確認できます。

接続されると、第2引数で指定した処理が実行されます。

ここでは、クライアントが接続すると、コマンドプロンプト
「接続成功」が表示されるようにしてます^_^

console.log('接続成功');

最後にサーバの待ち受けポート番号を指定してます^_^
このプログラムでは、3000番ポートを指定してます!

server.listen(3000);

クライアント側プログラムの解説

クライアント側のプログラムも再度掲載します!
クライアント側のプログラムはindex.htmlに記載しましたね(^^♪

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();
    </script>
    <ul id="messages"></ul>
</body>
</html>

9割HTMLタグで占めてますが、
2箇所だけSocket.ioに関する記述がるので、ご説明します^^✨
(HTMLの説明についても別記事で投稿したいと思います。)

<!-- ライブラリの読み込み -->
<script src="http://localhost:3000/socket.io/socket.io.js"></script>

サーバ側に対してソケット接続するために、
クライアント側でもSocket.ioのライブラリを組み込む必要がございます。


実際にサーバに対してソケット接続している箇所が
このscriptタグで囲んでる部分です。

サーバ(http://localhost:3000)にアクセスすると、
この「const socketio = io();」が実行されて、
サーバ側プログラムでは、クライアントから通信を受け取るので、
「io.on」の部分が処理されるというわけです。


f:id:RyoheiAdachi:20220215225331p:plain


本日は以上です!^_^
次回はチャットアプリ制作の続きを行います!お楽しみに!✨

node.jsでチャットアプリ開発③

さぁあ、今回はnode.jsのsocket.ioを使って、
チャットアプリを作りましょう!(^^♪

socket.ioとは?

node.jsのライブラリの一つです。

socket.ioを使うことで、
サーバとクライアントの間で双方向の通信するWebSocketの技術を
アプリケーションに組み込むことができます。

WebSocketとは?

クライアントとWebサーバとの間で双方向通信を行うための仕組みです

通常のWebサービスでは、クライアント(ブラウザ)から
Webサーバに対してリクエストを送信できても、
逆にWebサーバからクライアント(ブラウザ)に対して接続を試みることはできません。

WebSocketでは、一度Webサーバとクライアント間で接続が確立すれば、
Webサーバとクライアント(ブラウザ)のどちらからでも
接続を開始することができます。

WebSocketの技術は、ニュース配信サービス、SNS、ゲームなど
リアルタイム性が要求されるアプリケーションなどで採用されてます。


f:id:RyoheiAdachi:20220209084133p:plain

socket.ioのインストール

socket.ioをインストールして、
node.jsに組み込んでみましょう!^_^

Expressと同じようにnpm installでインストールしましょう!

まず、コマンドプロント(ターミナル)を開き、以下のコマンドを打ちましょう!

npm install --save socket.io

「--save」を付けることで、
package.jsonファイルにsocket.ioライブラリを登録することができます。
(具体的には、package.jsonファイルのdependenciesに追加されます。)

これで、socket.ioのインストール完了です!^^

サーバの実装

ここからは、通信データを送る「クライアント」
通信データを受け取る「サーバ」
2つの開発を行いたいと思います!^_^

では、まず通信データを受け取るサーバの実装を行いましょう!^_^

前回の記事「チャットアプリ開発②」で作成したapp.jsを
メモ帳やさくらエディタなどのテキストエディタで開きましょう!


いったん、ファイルの内容をすべて消して、
下記の内容に書き換えましょう!

// Expressをインポート
var express = require('express');
const app = express();
const server = require('http').Server(app);
// Socket.ioをインポート
const io = require('socket.io')(server);

app.get('/' , (req, res) => {
   res.sendFile(__dirname + '/index.html');
});

// クライアントと接続ができたら、'接続成功'とターミナルに表示される
io.on("connection", socket => {
    console.log('接続成功');
  });

server.listen(3000);

クライアント側の実装

次に、「クライアント側」の実装です!
app.jsが置いてあるフォルダで「index.html」を新規に作りましょう!^^


そして、index.htmlに以下の内容を記述していきましょう!

<!DOCTYPE html>
<html>
<head>
    <title>ChatApplication</title>
    <!-- ライブラリの読み込み -->
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
    <div class="title">
        <h1>チャットアプリ</h1>
    </div>
    <form id="message_form" action="#">
        <div class="form">
            <input id="input_msg" autocomplete="off" />
            <button>
                Send
            </button>
        </div>
    </form>
    <script>
        // サーバーへ接続
        const socketio = io();
    </script>
    <ul id="messages"></ul>
</body>
</html>

動作確認

WebSocket通信ができてることを確認します^_^

まず、サーバを起動させます。
コマンドプロント、あるいはターミナルを開き、
app.jsファイルが存在するフォルダに移動します。

cd <app.jsが置いてあるフォルダ>

app.jsを実行します。

node app.js

その状態で、ブラウザを開いて
URLアドレスバーに以下のURLを入れてアクセスします!

http://localhost:3000

すると、ブラウザでは、下記の画面が出ると思います

f:id:RyoheiAdachi:20220209090148p:plain


さらに、ターミナルに「接続成功」という文字が表示されれば、動作確認OKです!

f:id:RyoheiAdachi:20220209090016p:plain

次回は上記のプログラムの内容について
1つずつ解説します^_^

IPアドレスとポート番号

今回は、IPアドレスポート番号の意味と役割についてお話したいと思います^_^

このIPアドレスとポート番号については、
Webサイトや通信アプリを開発する際に
知っておくべき知識でございます^_^✨

そもそものお話

皆さんは普段スマホやパソコンを使って、何をされますか??

Twitterでつぶやき
Google検索
Instagramで写真をアップ
Lineで友達との会話

などなど、このようなサービスを利用しますよね^_^

この時、私たちはインターネットに接続しないと、
TwitterやLine, Instagramなど
つまり、世界中で発信されている情報にアクセスすることができません。

では、具体的にどうすれば
インターネット上にアクセスすることができるのでしょうか?

そこで必要となるのが、IPアドレスです

IPアドレスとは?

インターネットサービスを利用するとき、
私たちが使っているスマホやコンピュータには、
IPアドレスという番号がついてます。

192.168.3.20 172.20.34.212といった表記をします!
0~255の値が4つの「.」で区切られて表現されます^_^

このIPアドレスは家の住所のような役割がございます。

インターネットのサービスを利用するには、
このIPアドレスが設定されていなければいけません。

たとえば、スマホを使ってWebサイトにアクセスすると、
スマホからWebサーバに対してリクエスト通信が発生します。

対して、Webサーバはスマホに対して、要求されたサービスを返します。(レスポンス通信と言います。)

このサービスを返す際に、「どこのスマホ」にサービスを返すのか?
という宛先の役割となるのがIPアドレスとなるわけです

もちろん、リクエストの宛先であるWebサーバにもIPアドレスが設定されてます。

そうでないと、スマホはどこに対して通信をすればいいのか分からなくなりますからね💦

たとえば、Amazonのサイトにアクセスする通信例を以下に示します(^^♪

f:id:RyoheiAdachi:20220202212937p:plain

IPアドレスの確認方法

自分のスマホやパソコンに与えられたIPアドレスを見てみましょう^_^

Windowsのパソコンをお持ちの方は、
コマンドプロンプトという黒い端末ソフトを開いてください^_^

MacOSパソコンをお持ちの方は、ターミナルを開いてください

そして、以下のコマンドを打ってみましょう^_^

Windowsの人

ipconfig

MacOSの人

ifconfig

すると、「IPv4 アドレス」という表示が出てきたかと思います。
その項目に、「192.168.0.11」のような「.」で区切られた数字があると思います。
(皆さんは、違う数字だと思います)
それが、皆さんお使いのパソコンに設定されているIPアドレスです^_^

f:id:RyoheiAdachi:20220202213444p:plain

ちなみに、iphoneの場合、
「設定」アプリの「接続」>「Wi-Fi」と進んで、
現在接続しているWi-FiをタップするとIPアドレスが確認できます^^

ポート番号とは?

もう一つ大事な概念である「ポート番号」についてご説明します

私たちは普段、一つのパソコン(スマホ)上にプラウザ、Lineアプリ、Excelなど
たくさんのアプリケーションを使ってますよね。

ここで、アプリケーションが通信する処理を考えてみましょう^_^
例えば、Lineアプリで通信をすることを考えます。

IPアドレスは1台のパソコン(スマホ)上に設定されており、
パソコン上の「どのアプリケーション」に通信データを渡せばいいのか
IPアドレスで識別することができません。

そこで、別で識別する番号が必要になります。
その役割がポート番号です!

ポート番号には、0~65535の整数値が利用されており、
アプリケーションによって番号が決められています。

例えば、Webサイトは、80番や443番を使用します。


よく利用されるポート番号は0~1023も範囲であらかじめ予約されており、
これを「ウェルノウンポート(Well Known Ports)」と呼びます。

主なウェルノウンポートを以下に示します。

f:id:RyoheiAdachi:20220202213626p:plain

ちなみに、1024~49151の範囲はベンダーによるソフトウェアに割り当てられるレジスタードポート」
49152~65535の範囲は自由に利用することができる「ダイナミックポート」として割り当てられてます。

身近な例で言いますと、
IPアドレスはマンションの住所で、
ポート番号はマンションの部屋番号にあたります☺

IPアドレス = マンションの住所
f:id:RyoheiAdachi:20220202213942p:plain


・ポート番号 = マンションの部屋番号
f:id:RyoheiAdachi:20220202214018p:plain

まとめ

IPアドレスとポート番号の役割は以下の通りです^_^

IPアドレス: 通信データの宛先であるパソコン(スマホ)を識別する番号
ポート番号: パソコン上のどのアプリケーションにデータを渡すかを識別する番号

ネットワーク通信をするアプリを開発する際にはもちろん、
新品のパソコンをセットアップする際にも
大切な概念なので覚えておきましょう!

node.jsでチャットアプリ開発②

今回の目標はnode.jsのフレームワークの1つである
Expressを使って、Webサイトを作ってみましょう!^_^

フレームワークとは?

では、そもそもフレームワークとは何なのでしょうか??🤔

フレームワークは日本語で翻訳すると「枠組み」「骨組み」です。
フレームワークは、システム開発の際によく使われる機能を用意・提供してます。

私たちは1からシステムを使うのではなく、
フレームワークによって提供されたアプリケーションを利用することで、
簡単にシステムを開発することができます。

Expressとは?

Webサーバの機能を提供するnode.jsで利用できるフレームワークの1つです

Webサーバを1から作るのは、非常に大変です💦

しかし、ExpressはWebサーバの機能を提供しており、
それを利用することで、簡単にWebサーバを作ることができるようになります✨

f:id:RyoheiAdachi:20220128062016p:plain

では、さっそくExpressをインストールしてみましょう!

Expressをインストールする

コマンドプロンプトを開き下記のコマンドを実行してください

npm init

そのあと、いろいろ聞かれますが、そのまま全てEnterを押してください

f:id:RyoheiAdachi:20220126231019p:plain

すると、フォルダにpackage.jsonというファイルができます。

f:id:RyoheiAdachi:20220126235225p:plain

npmパッケージマネージャとは?

npmというよく分からない用語が出てきましたので、ご説明します!

node.jsの機能は、さまざまなプログラムやファイルをまとめた「パッケージ」という形で提供されてます。
昔は、1つ1つ検索してサイトにアクセスして、パッケージをダウンロードして、
node.jsに組み込むようなことをしてました。

しかし、パッケージの数が増えていき、数百、数千も流通するようになると、
人手で対応しきれなくなります💦


そこで、提供されているパッケージを一か所にまとめて、
必要なパッケージをいつでもインストールできる仕組みができました。
それが、パッケージマネージャです。

node.jsでは、専用のパッケージマネージャとしてnpmが用意されてるというわけです^_^

package.jsonとは?

npm initコマンドで作成された、package.jsonファイルについてもご説明します

package.jsonnpmで使用するパッケージ情報を管理したファイルです。
package.jsonの中身を見てみましょう。

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


これはJavaScriptJSON(ジェイソン)と呼ばれる形式のテキストです。
JSONはJavasScriptのオブジェクトをテキストとして記述するためのものです。
JSONデータ内の各オブジェクトは、キー(Key)と値(Value)のペアからなるメンバーで構成されています。

上記のファイルでは、「name」「version」がキー、「noce」「1.0.0」が値になります。

このようにpackage.jsonでは、このプロジェクトの情報と必要なパッケージに関する情報が記述されてます。


Expressをインストールする(続き)

では、インストールの続きをしましょう!
package.jsonファイルが作れましたら、以下のコマンドでExpressをインストールしましょう!

npm install express

すると、package.jsonにExpressの情報が記載されるようになります^_^

f:id:RyoheiAdachi:20220126231824p:plain

また、node_moduleフォルダとpackage-lock.jsonというファイルもできてます。

f:id:RyoheiAdachi:20220126234955p:plain

これでExpressのインストール完了です!✨

ソースコードを書く

Expressがインストールできましたので、実際にプログラムを記述してみましょう!

先ほど、Expressをインストールしたフォルダ(package.jsonがあるフォルダ)に
app.jsonファイルを作ってください^_^

f:id:RyoheiAdachi:20220126235504p:plain

app.jsをメモ帳やTerapadなどテキストエディタで開き、
下記のWebサーバを構築するサンプルプログラムを記載してください^_^

//Expressオブジェクトの用意
const express = require('express')

//アプリケーションオブジェクトの作成
var app = express()

//ルーティングの設定
app.get('/',(req, res) => {
    res.send("Welcom My Home Page!!")
})

//サーバの待ち受け開始
app.listen(3000, () => {
    console.log("Start Server Port:3000")
})

書けましたら、コマンドプロント(ターミナル)を開き、以下のコマンドで実行してみましょう!

node app.js

すると、コマンドプロント上に「Start Server Port:3000」という表示がでるかと思います。

f:id:RyoheiAdachi:20220127073621p:plain

この状態で、ブラウザを開いてください。
そして、以下のURLバーに以下を入力してみましょう!^_^

http://localhost:3000

「Welcom My Home Page!!」というページがブラウザに表示されればOKです!✨


f:id:RyoheiAdachi:20220127073827p:plain

Webサーバ(プログラム)を止める場合は、
プログラム実行しているコマンドプロント上でCtrlキーとCキーを同時に押せば、
止めることができます^_^

f:id:RyoheiAdachi:20220127074230p:plain

サンプルプログラムの説明

上記のWebサーバ構築プログラムについて説明したいと思います!
内容が少し難しいので、ざっくり流れを理解して頂ければと思います^_^

const express = require('express')

まず最初に行ってるのは、Expressオブジェクトの用意です。
「require」という機能でExpressのモジュールをロードしてます。

requireは、モジュールをローディングする役割があり、node.jsで用意されている機能です。

変数 = require(モジュール名);

次に行ってるのが、アプリケーションオブジェクトの作成です。

var app = express()

簡単に言いますと、
Expressの情報(オブジェクト情報)が変数appに入ると考えればよいかと思います。
このapp変数を使って、アプリケーションの処理を行っていきます^_^

app.get('/',(req, res) => {
    res.send("Welcom My Home Page!!")
})

次は、ルーティングという設定を行ってます。

ここでは、/(トップページ)にアクセスした際に、
テキストを表示する処理をここで記載してます。

ここでは、「app.get」(appオブジェクトのgetメソッドと言います)という機能を使ってます。
これはGETアクセスの設定を行うためのものです。

GETアクセスについては別記事で改めてご説明したいと思います^_^

app.get(アクセス先のURL, 実行する処理);

app.getの実行する処理には、以下のような形で定義してます。

(req, res) => {…実行する処理…}

resはrequest(リクエスト:要求)、resはresponse(レスポンス:返信)のことです。
それぞれリクエスト情報、レスポンス情報を持っているオブジェクトです。

ここでは、「res.send」という機能を使ってます。

res.send(表示するテキスト);

これは、クライアントに送信する「実際にブラウザ画面に表示されるコンテンツ部分」も値を設定するものです。
この機能により、設定したテキストがそのままクライアントに送られて表示されるというわけです。

app.listen(3000, () => {
    console.log("Start Server Port:3000")
})

最後に、待ち受けを開始します。
これは「app.listen」という機能を使ってます。

これで、ブラウザURLにlocalhost:3000を入力すると、
Webサーバにアクセスして、ブラウザに「Welcom My Home Page!!」が表示されます^_^

ちなみに、3000はポート番号と呼ばれる番号を指定してます!

ポート番号についても別記事で改めてご説明したいと思います^_^


今日はここまでです!^_^
次回はソケット通信についてご説明して、実際にプログラミングをしたいと思います(^^)/✨