What's New Qiita

20190126のHTMLに関する記事は3件です。

  • 投稿日：2019-01-26T15:18:36+09:00

HTML headタグ内の基本設定

title, discription 他

とりあえずページTOP固定で入れておきたいのが以下。 （レスポンシブ前提）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

更に個々のページで個別に設定したいのが以下。

head
<title></title>
<meta name="description" content="">

他にも検索避けのrobotや、OGPタグ、Twitterカードなど必要に応じて。

参考にしたサイト：サルワカ

favicon関連

260x260以上のpngを用意して下記サイトでGenerateするとファイル群とコードをアウトプットしてくれる。
Favicon Generator の[Select your Favicon picture]から。
出力結果は例えば下記。（local確認用にファイルパスだけ相対パスに変更している）

head
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#222222">
<meta name="msapplication-TileColor" content="#222222">
<meta name="theme-color" content="#ffffff">

Favicon Generator の[Check Favicon]で設定が足りているかチェック
それぞれの設定値など→ 参考にしたサイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-01-26T15:18:36+09:00

HTML基本設定

title, discription 他

とりあえずページTOP固定で入れておきたいのが以下。 （レスポンシブ前提）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

更に個々のページで個別に設定したいのが以下。

head
<title></title>
<meta name="description" content="">

他にも検索避けのrobotや、OGPタグ、Twitterカードなど必要に応じて。

参考にしたサイト：サルワカ

favicon関連

260x260以上のpngを用意して下記サイトでGenerateするとファイル群とコードをアウトプットしてくれる。
Favicon Generator の[Select your Favicon picture]から。
出力結果は例えば下記。（local確認用にファイルパスだけ相対パスに変更している）

head
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#222222">
<meta name="msapplication-TileColor" content="#222222">
<meta name="theme-color" content="#ffffff">

Favicon Generator の[Check Favicon]で設定が足りているかチェック
それぞれの設定値など→ 参考にしたサイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-01-26T00:18:43+09:00

簡易チャットアプリの作成

簡易チャットアプリの作成

Node.js + Express + Socket.ioを用いて簡易チャットアプリを作る。

はじめに

最近、Node.jsを勉強し始めたので、解釈が間違っているとこが多々あると思います・・・
コメントで指摘していただけるとありがたいです。

クライアントとサーバーについて

自分なりの解釈をまとめてみる
- サーバー(server)

- 何かを提供するor何かを使える状態にしてくれる

= （食べ物、料理などを）提供する人[料理人]
- クライアント(client)
- 何かを提供される人or何かを使える状態にしてもらう
= （食べ物、料理などを）提供してもらう人[お客さん]

クライアントとサーバーのやり取りの流れについて

  1. クライアントがサーバーにリクエストを送る
    ＝ お客さんが料理人に料理の注文を頼む
  2. サーバーがリクエストを解析、処理してリクエストの答えを作る
    ＝ 料理人が料理の注文を聞いて必要な食材を食べれるように調理して料理を作る
  3. サーバーがクライアントにレスポンスを返す
    ＝　料理人がお客さんに作った料理 を持っていく

コード

1.GETリクエストが来たら、Hello Worldの表示

var express = require('express');
var app = express();
var http = require('http').Server(app);
const PORT = process.env.PORT || 7000;

app.get('/' , function(req, res){
   res.send('hello world');
});

http.listen(PORT, function(){
  console.log('server listening. Port:' + PORT);
});
  1. '/'←リクエストURIにGETリクエストして来たら
    • リクエストURI・・・クライアントからサーバにリクエストする対象(サーバー内に保管されているリソース)
  2. GETリクエストを処理してレスポンス(Hello world の表示)
 //GETリクエストの処理 app.get(リクエストURI,コールバック関数)
 app.get('/' , function(req, res){
   res.send('hello world');
});

2. HTMLファイルをレスポンス

変更点

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

使用するHTMLファイルは以下の通り

index.html
<!DOCTYPE html>
<html>
<head>
    <title>chat</title>
</head>
<body>
    <h1>Socket IOを使う</h1>
</body>
</html>

こうすることで、HTMLの内容をローカルサーバーに表示する

3. Socket.ioの使用（クライアント→サーバー）

app.js
/*(省略)*/

const io = require('socket.io')(http);

/*(省略)*/

io.on('connection',function(socket){
    console.log('connected');
});

/*(省略)*/
index.html
<!DOCTYPE html>
<html>
<head>
    <title>socket.io chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <ul id="messages"></ul>
    <form>
      <input id="input_msg" autocomplete="off" /><button>Send</button>
    </form>
  <script>
　　 var socket = io();
    $(function(){
        $('#message_form').submit(function(){
            socketio.emit('message', $('#input_msg').val());
            $('#input_msg').val('');
            return false;
        });
    });
　</script>
</body>
</html>

Socket.ioの関数の解説

io.on('connection',function(socket){ ... });

サーバーとクライアントとの接続が確率すると、
- クライアント：'connect'イベント
- サーバー：'connection'イベント

が発生する

- サーバのconnectionイベントが発生するとコールバック関数のfunction(socket){ ... } が呼ばれる

4. Socket.ioの使用（サーバー→クライアント）

次に、サーバーからクライアント全員にデータ送信する処理を追加する

app.js
io.on('connection',function(socket){
    socket.on('message',function(msg){
        console.log('message: ' + msg);
        io.emit('message', msg);
    });
});
  1. 受け取ったメッセージをクライアント全員に送信
  2. javascript io.emit('message',msg) を用いることで実装可能
    その次に、クライアント側でサーバから受け取った情報を表示する
index.html
<!-- クライアント側の処理を記述する -->
<body>
    <ul id="messages"></ul>
    <form id="message_form" action="#">
    <input id="input_msg" autocomplete="off"/><button>Send</button>
    </form>
    <script>
        var socketio = io();
        $(function(){
            $('#message_form').submit(function(){
                socketio.emit('message', $('#input_msg').val());
                $('#input_msg').val('');
                return false;
            });
            socketio.on('message',function(msg){
                $('#messages').append($('<li>').text(msg));
            });
        });
    </script>
</body>

コード解説
$("A").B(){ .. }

- AをBする

$('#messages').append($('<li>').text(msg));

- $('対象要素').append('追加したい要素');
- $('<li>').text(msg);
= <li>（msgの内容）<li>
- メッセージIDにliタグとliタグのメッセージを追加する

$(function(){ ... }

はページ読み込みが終わって、DOMが構築された時点でfunction()内が実行される

参考

Node.js + Express + Socket.ioで簡易チャットを作ってみる

超絶初心者のためのサーバとクライアントの話

HTTPとPOSTとGET

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧