HTML入門
今回は、Webサイト制作に必要な言語であるHTMLについて記事を書きます！
・Webサイトの仕組み
・HTMLとは？
・なぜHTMLを使うの？
・HTMLはどうやって書くの？
・HTMLはどうやって実行するの？
Webサイト閲覧の仕組み
HTMLの説明の前に、全体像であるWebサイトの仕組みについて説明したいと思います！
私たちがGoogle検索やYoutubeを閲覧するときには、どのような仕組みで動いてるのでしょうか？
Webサイトの閲覧では、閲覧者とサーバで成り立ってます。
閲覧者は私たちのことですね。
サーバとは、サービスを提供する役割があるコンピュータのことです。
特に、Webサイトを提供するサーバのことをWebサーバと呼びます^_^
閲覧者はブラウザというソフトウェアを使って、Google検索やYoutubeを閲覧します^_^
この時、ブラウザを使って、見たいサイトにアクセスすると、サーバに向かって「サービスを要求する通信」が発生します。
(サービスを要求する通信のことをリクエスト通信と言います。)
対して、サーバは要求があったサービスをブラウザに返します。
(サービスを提供する通信をレスポンス通信と言います。)
このときに、サーバがブラウザにWebサイトを返す場合、HTMLファイル送られます。
HTMLファイルはテキストファイルであり、中身はHTML言語が記載されてます^_^
HTMLファイルを受信したブラウザはそのHTMLファイルの内容を表示させます。
HTMLとは？
先ほどの、全体像を確認してみましょう！
サーバがブラウザにWebサイトを返す際に、送られたHTMLファイルの中身にHTML言語が記載されてました。
つまり、HTMLはWebサイト(Webページ)を作るのに必要となる言語なのです！
HTML言語は、Webサイトの構造・文章について記述します
このように、各文章に対する構造や見た目など指定する言語をマークアップ言語と呼びます。
なぜWebサイトを作るのにHTMLを利用するのか？
HTMLの正式名称は、Hyper Text Markup Languageといい、
ハイパーテキストを記述する際に使用する言語として開発されました。
ハイパーテキストとは、Webサイト（Webページ)間で相互に関連付ける仕組みのことです。
インターネットには、莫大な量のWebサイトが散らばってます。
その中で、Webサイトには、別サイトにアクセスできるURLリンクが貼られてます。
このURLリンクをたどっていくことで、インターネット上に散らばった、
Webサイトを相互に関連付けることができます。
このURLリンクのことをハイパーリンクと呼びます。
HTMLはどうやって書くの？
HTMLはタグと呼ばれるもので構成されてます。
タグとは、見出し、段落、画像の表示、他のサイトへのリンクなど
Webサイトの文章に意味を持たせるために指定する印のことです。
タグは、< と > で囲みます。
意味を持たせたいテキストに対して、開始タグと終了タグで囲みます。
実際にサンプルの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>
そのあと、記述したテキストファイルを●●●.htmlとして保存します。
今回はinde.htmlという名前で保存します。
そして、作成したindex.htmlをブラウザで開きましょう！
(右クリックで「プログラムで開く」 > GoogleChromeやMicrosoft Edgeなどブラウザを選択しましょう。あるいは、index.htmlのアイコンをダブルクリックしてみましょう^^)
すると、以下のようにHTMLで記述した内容がブラウザに反映されます^_^
Google Linkをクリックすると、Google検索ページに飛ぶようになってます^^✨
おそらく、HTMLファイル内に日本語を記述して、ブラウザに反映させると、
日本語ではなく、変な文字が表示されるかと思います💦
(これを文字化けと言います。)
この対処についてはまた別記事で教えます！✨
このようにHTMLファイル自体は非常にシンプルな作りになってるのですね～(^^♪
node.jsでチャットアプリ開発⑤
では、今回はチャットアプリを完成させちゃいましょう！^_^
今回作る項目としては以下の通りです。
・投稿したメッセージをブラウザに表示させる
・デザインを組み込む
・投稿日付を表示させる
投稿したメッセージをブラウザに表示させる
ここでやりたいことは、
チャット画面のテキストエリア(メッセージ入力できる四角い箱)にメッセージを入力した後、
「Send」ボタンを押します。
すると、入力したメッセージがテキストエリアの下部に表示されるようにします☺
それではさっそく作っていきましょう！(^^♪
ます、サーバ側プログラムである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です！
デザインを組み込む
大体のチャットアプリ機能は完成しましたが、
デザインが質素ですよね・・・
ということで、デザインを組み込みたいと思います。
デザインを組み込むには、CSS(Cascading Style Sheets)を実装していく必要があります。
まずは、CSSファイルを作りましょう^_^
現在、app.jsファイルがあるフォルダの構成は下記の通りだと思います。
├ app.js ├ index.html ├ package.json ├ package-lock.json └ node_modules/ ←フォルダ
ここにpublicという名前のフォルダを作成してください^_^
├ app.js ├ index.html ├ package.json ├ package-lock.json ├ node_modules/ └ public/ ←フォルダ作成
作成しましたら、publicフォルダに入り、
style.cssファイルを作成してください^_^
├ app.js
├ index.html
├ package.json
├ package-lock.json
├ node_modules/
└ public/ ←フォルダ作成
└ style.css ←作成
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です！
例えば、ボタンの色が紺色に変わりましたね～
投稿した日付を付ける
さぁあ、最後です！
いまの状態ですと、メッセージしか表示されてません。
これでは、寂しいですよね。。😢
ということで、投稿日時も付けるようにしたいと思います！
まずは、クライアント側の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にアクセスします。
メッセージを投稿すると、投稿日付も表示されると思います！
おめでとうございます！
これでチャットは完成です✨
最後までお疲れ様でした^_^
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」の部分が処理されるというわけです。
本日は以上です！^_^
次回はチャットアプリ制作の続きを行います！お楽しみに！✨
node.jsでチャットアプリ開発③
さぁあ、今回はnode.jsのsocket.ioを使って、
チャットアプリを作りましょう！(^^♪
socket.ioとは？
node.jsのライブラリの一つです。
socket.ioを使うことで、
サーバとクライアントの間で双方向の通信するWebSocketの技術を
アプリケーションに組み込むことができます。
WebSocketとは？
クライアントとWebサーバとの間で双方向通信を行うための仕組みです
通常のWebサービスでは、クライアント(ブラウザ)から
Webサーバに対してリクエストを送信できても、
逆にWebサーバからクライアント(ブラウザ)に対して接続を試みることはできません。
WebSocketでは、一度Webサーバとクライアント間で接続が確立すれば、
Webサーバとクライアント(ブラウザ)のどちらからでも
接続を開始することができます。
WebSocketの技術は、ニュース配信サービス、SNS、ゲームなど
リアルタイム性が要求されるアプリケーションなどで採用されてます。
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を入れてアクセスします！
すると、ブラウザでは、下記の画面が出ると思います
さらに、ターミナルに「接続成功」という文字が表示されれば、動作確認OKです！
次回は上記のプログラムの内容について
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のサイトにアクセスする通信例を以下に示します(^^♪
IPアドレスの確認方法
自分のスマホやパソコンに与えられたIPアドレスを見てみましょう^_^
Windowsのパソコンをお持ちの方は、
コマンドプロンプトという黒い端末ソフトを開いてください^_^
MacOSパソコンをお持ちの方は、ターミナルを開いてください
そして、以下のコマンドを打ってみましょう^_^
Windowsの人
ipconfig
MacOSの人
ifconfig
すると、「IPv4 アドレス」という表示が出てきたかと思います。
その項目に、「192.168.0.11」のような「.」で区切られた数字があると思います。
(皆さんは、違う数字だと思います)
それが、皆さんお使いのパソコンに設定されているIPアドレスです^_^
ちなみに、iphoneの場合、
「設定」アプリの「接続」>「Wi-Fi」と進んで、
現在接続しているWi-FiをタップするとIPアドレスが確認できます^^
ポート番号とは？
もう一つ大事な概念である「ポート番号」についてご説明します
私たちは普段、一つのパソコン(スマホ)上にプラウザ、Lineアプリ、Excelなど
たくさんのアプリケーションを使ってますよね。
ここで、アプリケーションが通信する処理を考えてみましょう^_^
例えば、Lineアプリで通信をすることを考えます。
IPアドレスは1台のパソコン(スマホ)上に設定されており、
パソコン上の「どのアプリケーション」に通信データを渡せばいいのか
IPアドレスで識別することができません。
そこで、別で識別する番号が必要になります。
その役割がポート番号です！
ポート番号には、0～65535の整数値が利用されており、
アプリケーションによって番号が決められています。
例えば、Webサイトは、80番や443番を使用します。
よく利用されるポート番号は0～1023も範囲であらかじめ予約されており、
これを「ウェルノウンポート(Well Known Ports)」と呼びます。
主なウェルノウンポートを以下に示します。
ちなみに、1024～49151の範囲はベンダーによるソフトウェアに割り当てられる「レジスタードポート」、
49152～65535の範囲は自由に利用することができる「ダイナミックポート」として割り当てられてます。
身近な例で言いますと、
IPアドレスはマンションの住所で、
ポート番号はマンションの部屋番号にあたります☺
・IPアドレス = マンションの住所
・ポート番号 = マンションの部屋番号
node.jsでチャットアプリ開発②
今回の目標はnode.jsのフレームワークの1つである
Expressを使って、Webサイトを作ってみましょう！^_^
フレームワークとは？
では、そもそもフレームワークとは何なのでしょうか？？🤔
フレームワークは日本語で翻訳すると「枠組み」「骨組み」です。
フレームワークは、システム開発の際によく使われる機能を用意・提供してます。
私たちは1からシステムを使うのではなく、
フレームワークによって提供されたアプリケーションを利用することで、
簡単にシステムを開発することができます。
Expressとは？
Webサーバの機能を提供するnode.jsで利用できるフレームワークの1つです
Webサーバを1から作るのは、非常に大変です💦
しかし、ExpressはWebサーバの機能を提供しており、
それを利用することで、簡単にWebサーバを作ることができるようになります✨
では、さっそくExpressをインストールしてみましょう！
Expressをインストールする
コマンドプロンプトを開き下記のコマンドを実行してください
npｍ init
そのあと、いろいろ聞かれますが、そのまま全てEnterを押してください
すると、フォルダにpackage.jsonというファイルができます。
npmパッケージマネージャとは？
npmというよく分からない用語が出てきましたので、ご説明します！
node.jsの機能は、さまざまなプログラムやファイルをまとめた「パッケージ」という形で提供されてます。
昔は、1つ1つ検索してサイトにアクセスして、パッケージをダウンロードして、
node.jsに組み込むようなことをしてました。
しかし、パッケージの数が増えていき、数百、数千も流通するようになると、
人手で対応しきれなくなります💦
そこで、提供されているパッケージを一か所にまとめて、
必要なパッケージをいつでもインストールできる仕組みができました。
それが、パッケージマネージャです。
node.jsでは、専用のパッケージマネージャとしてnpmが用意されてるというわけです^_^
package.jsonとは？
npm initコマンドで作成された、package.jsonファイルについてもご説明します
package.jsonはnpmで使用するパッケージ情報を管理したファイルです。
package.jsonの中身を見てみましょう。
{ "name": "node", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
これはJavaScriptのJSON(ジェイソン)と呼ばれる形式のテキストです。
JSONはJavasScriptのオブジェクトをテキストとして記述するためのものです。
JSONデータ内の各オブジェクトは、キー(Key)と値(Value)のペアからなるメンバーで構成されています。
上記のファイルでは、「name」「version」がキー、「noce」「1.0.0」が値になります。
このようにpackage.jsonでは、このプロジェクトの情報と必要なパッケージに関する情報が記述されてます。
Expressをインストールする(続き)
では、インストールの続きをしましょう！
package.jsonファイルが作れましたら、以下のコマンドでExpressをインストールしましょう！
npm install express
すると、package.jsonにExpressの情報が記載されるようになります^_^
また、node_moduleフォルダとpackage-lock.jsonというファイルもできてます。
これでExpressのインストール完了です！✨
ソースコードを書く
Expressがインストールできましたので、実際にプログラムを記述してみましょう！
先ほど、Expressをインストールしたフォルダ(package.jsonがあるフォルダ)に
app.jsonファイルを作ってください^_^
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」という表示がでるかと思います。
この状態で、ブラウザを開いてください。
そして、以下のURLバーに以下を入力してみましょう！^_^
「Welcom My Home Page!!」というページがブラウザに表示されればOKです！✨
Webサーバ(プログラム)を止める場合は、
プログラム実行しているコマンドプロント上でCtrlキーとCキーを同時に押せば、
止めることができます^_^
サンプルプログラムの説明
上記の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はポート番号と呼ばれる番号を指定してます！
ポート番号についても別記事で改めてご説明したいと思います^_^
今日はここまでです！^_^
次回はソケット通信についてご説明して、実際にプログラミングをしたいと思います(^^)/✨
node.jsでチャットアプリ開発①
今回は下記のようなチャットアプリケーションを作ってみましょう！✨
目標
・チャットアプリケーションを完成させる
・node.jsの使い方について理解する
・ソケット通信の仕組みについて理解する
node.jsやソケットとかよく分からない単語が出てきましたが、
こちらについては、詳しく説明します^_^
node.jsとは？
今回はnode.jsという道具を使って、チャットアプリを作りたいと思います！
node.jsはサーバ側で動作するJavaScriptの実行環境のことです。
....サーバ？
....JavaScript？
意味が分からない単語が出てきましたね‥💦
1つずつご説明いたします！
クライアントとサーバ
先ほど「サーバ」という用語が出てきましたので、
簡単に説明します^^
私たちがインターネットを利用する際には、
「サービスの要求」と「サービスの提供」の通信で成り立ってます。
サーバというのは、サービスを提供する役割があるコンピュータのことです。
逆にサービスの要求をする役割のことをクライアントと呼びます^_^
身近な例でいえば、レストランで注文をするお客さんがクライアントで、
注文を受けて料理を届けるウェーターさんがサーバになります！
Amazonのサイトを閲覧する際の
サーバとクライアントの関係は下記の図になりますね^_^
JavaScirptとは？
JavaScriptは、ブラウザを操作するために開発されたプログラム言語です。
ブラウザでは、テキストや画像などWebページを表示させる役割がございます。
そこでは、HTMLとCSS内容を読み込んで、Webページが作成されます。
しかし、HTMLとCSSは、一度読み込まれたらもう変化しないという特徴があります。
つまり、ページを更新しない限り、基本的にブラウザは同じものをずっと表示し続けることになります^_^
そこで、JavaScriptでは、HTMLやCSSを、その場でリアルタイムに書き換えて、一部のコンテンツを入れ替えたり、画像のスライドショーのような動きをつけたりすることができます。
結局、node.jsは何が凄いの？
JavaScriptはクライアントが利用するWebブラウザで実行されるプログラミング言語です。
しかし、node.jsを利用することでWebブラウザの中だけではなく、サーバ上で実行することが可能になります^_^✨
難しい話なのですが、node.jsは「V8」というプログラムを使って作られてます。
この「V8」によって、単独でJavaScriptのプログラムを実行できるようになります。
そのため、サーバ側でも、クライアント側でもJavaScriptの実行が可能になります。
node.jsをインストールする
それでは、私たちのパソコンにnode.jsをインストールしてみましょう！☺
以下のサイトにアクセスしてください
https://nodejs.org/ja/download/
ここでバージョン番号は、偶数バージョンのnode.jsをダウンロードしてください。
偶数バージョンのnode.jsは長期間サポートしてくれるバージョンです。
そのため、node.js自体にバグが発生した場合は、すぐに修正のパッチを適用することができます。
これをLTS(Long Term Support)と呼びます。
それに対して、奇数バージョンでは、短期間にしかサポート保証してくれないことになってます。
奇数バージョンで新しい技術に積極的に取り組んでいき、
偶数バージョンでは確実になった技術で安定的な運用を重視していく、という2本立てになっているのです。
ダウンロードしたexeファイルを実行して、node.jsをインストールしましょう！
基本的にすべて「next」で進んでいけばOKです！
※I accept～にチェックを入れる
「Finish」を押せば、node.jsのインストール完了です！！✨
では、本当にnode.jsがインストールされているか確認してみましょう！^_^
コマンドプロンプトを開いて、以下のコマンドを打ってください。
node -v
あるいは
node --version
このコマンド実行後に、node.jsのバージョンが表示されれば、
正常にnode.jsがインストールされてます！^^
テストプログラムを動かしてみる
では、実際にnode.jsのプログラムを作ってみましょう！(^^♪
「Hello Word」がブラウザに表示される簡単なプログラムを作ってみたいと思います^_^
まず、好きな場所にapp.jsというファイルを作ります。
次にapp.jsをメモ帳やTeraPadなどのテキストエディタソフトで開きます。
app.jsに下記の内容を記載します！
console.log("Hello World!");
記載しましたら、app.jsの内容を保存します^_^
次に、コマンドプロンプト(あるいはターミナル)を開いて、
app.jsが置いてあるフォルダに移動します。
cd <app.jsが置いてあるフォルダ>
移動しましたら、下記のコマンドでapp.jsを実行します。
node app.js
すると、「Hello Word」という言葉が表示されるかと思います^_^
これが表示されれば、OKです！✨
本日はここまでです！^_^
次回はnode.jsのフレームワークの1つである「express」についてご紹介します！✨
