メディアクエリについて

こんにちは

お久しぶりとなってしまいました。

 

今回はメディアクエリについて調べてみました。

 

メディアクエリとは、CSS2までは、媒体までしか判断できなかったメディア・タイプをCSS3から拡張し”媒体の特性”まで判断できるようにしたものです。

 

例えば、デスクトップPCとスマートフォンでは画面のサイズが異なりますが、どのように対応するかというと

<head>
<link rel="stylesheet" href="style.css" media="screen and (max-hight:320px)">
</head>

上記の様にhead要素のmediaにand (max-hight:320px)を付け足して画面のサイズ事に適用するCSSを変更することができます。

 

もしくは、スタイルシートに直接

@media screen and (min-hight:320px) {
/* 画面高さが320pxからはここを読み込む */
p { color:#red;}

}

こんな感じで書き込むかします。

 

参考文献

レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ

HTTPリクエスト

こんにちは

 

今回は、HTTPリクエストの中身を構成するパートを紹介します。

3つあり、

となります。

 

HTTPリクエスト行について

HTTPリクエストの1行目が、HTTPリクエスト行となり、リクエスト内容を示します。メソッド、URL、HTTPのバージョンという情報が含まれています。

メソッドがGETの場合、HTTPリクエストではデータ本体は送られません。メソッドがPOSTの場合に、HTTPヘッダーの後にデータ本体が送られます。

 

2行目以降がHTTPヘッダーとなります。

以下のようなものが挙げられます。

  • ユーザーエージェント名

  • リファラ

  • 更新されていたら(If-Modified-Since)/同じでなければ(If-None-Match)

  • クッキー

  • 受け取り希望(Accept、Accept-Language、Accept-Encoding、Accept-Charset)

情報の肝となる部分と捉えています。

 

3つ目の部分ががHTTPボディとなる訳ですが、例えばPOSTの場合は、受け渡されるパラメーターの内容が、ここに記述されます。
GETのように補足の必要がない場合は、特に何も書かレないそうです。

 

今回は以上となります。

 

参考文献

HTTPリクエスト/レスポンスとは? HTTPヘッダーを理解しよう | 初代編集長ブログ―安田英久 | Web担当者Forum

https://wa3.i-3-i.info/word1845.html

 

 

HTTPステータスコード

こんにちは

 

今回は、HTTPステータスコードについて調べました。

 

簡単にいうと、サーバーからブラウザに返してくるコードのことをステータスコード

と言います。Webサーバーからのレスポンスの意味を表現する3桁の数字です。

 

100〜500番台までありますが、400番以降はエラーコードとなります。

  • 100番台 案内(インフォメーション)
  • 200番台 正常処理
  • 300番台 移転通知
  • 400番台 (クライアントにおける)処理失敗
  • 500番台 サーバーエラー

 

わかりやすくまとめると

  • 100番台→処理に時間がかかるなどの意味
  • 200番台→レスポンスに成功しているという意味
  • 300番台→リクエストの完了に追加処理が必要という意味
  • 400番台→ブラウザからのリクエストに不備があり、レスポンスが返せないという意味
  • 500番台→サーバーがブラウザからのリクエスト処理に失敗したという意味

こんな感じです。

 

これからは注意して見ていきたいですね。

 

本日は以上です。

 

参考文献

HTTPステータスコード

これで丸わかり!HTTPステータスコード!

ブラウザにURLを打ち込んでサイトが表示されるまで

こんにちは

 

今回は今まで何気なく行っていた、URLからサイト表示の過程を調べました。

 

そもそも、WEBサービスとはクライアントからのリクエストと、サーバーのレスポンスから成り立っています。

 

リクエスト(サイトを開きたいなど)を送る際はWEBサービスの住所が必要となってくるわけですが、これをIPアドレスと言います。ちなみにこちらがFacebookIPアドレスです→「31.13.82.1」

 

IPアドレスをブラウザに入力してもそのWEBサービスに遷移しますが、あまり見慣れませんし、パッと見で何のサイトかもわかりません。

 

そこで登場するのが、ドメインです。人間がわかりやすいように付けられた、IPアドレスの別名です。「http://facebook.com 」これです。

 

私たちは、こちらを入力してWEBサービスを利用しますが、ドメインだけだと今度はコンピューターがIPアドレスの判断ができなくなってしまうんです。

 

やっと本題に入ります。

 

ブラウザにドメインが入力されたら、DNSドメインネームシステム)サーバーでIPアドレスを取得してくれます。今回はFacebookを例にします。

 

FacebookIPアドレスを取得したら、そのサーバーにhttpリクエストを送信します。

 

Facebookサーバーがこのリクエストを承認すると200OKというメッセージを返し、Facebookの情報が転送されて、クライアントにFacebookが表示されるようになる仕組みです。

 

今回は以上です。

 

 

 

 

 

 

 

参考文献

非エンジニアのためのこれだけは押さえておきたいWEBサービスの基礎技術

 

 

クッキーとセッションについて

こんにちは

 

本日は、クッキーとセッションについて調べました。

 

IT用語辞典には「Cookieとは、Webサイトの提供者が、Webブラウザを通じてクライアントのコンピュータに一時的にデータを書き込んで保存させる仕組み。」と書いてありました。クッキーとはクライアント側にデータを保存しておく仕組みのことを指すみたいです。

 

利用者の識別や属性に関する情報や、最後にサイトを訪れた日時などを記録するようです。

 

これらはクライアント側に保存するので、クッキー単体だとデータ改竄の可能性が否めないものとなっています。

 

この問題を解決するのが、セッションです。

セッションは簡単にいうとクライアントとサーバーの接続状態の流れを指しますが、この管理にIDを振り分けることを用いています。

 

リクエストがある場合はIDを参照するということです。

かつ、それはサーバー側に保存されているので、改竄の可能性はありません。

 

このIDをクッキーに紐づけることによって、安全な通信が成立するといった仕組みです。

 

まとめると、クッキーはクライアント側に値を保存、セッションはサーバーに保存。

セッションのやり取りにはIDを使うから、クッキーにそれを持たせる。

 

と言った感じですかね。

 

本日は以上です。 

 

参考文献

https://wa3.i-3-i.info/word1791.html

セッションとクッキーの違い -

セッション管理の周辺知識まとめ

 

 

ログイン&ログアウトの仕組みについて

こんにちは

 

今回はログイン&ログアウトの仕組みについて調べました。

 

ユーザーログインの必要なWebアプリケーションでは、セッションと呼ばれる半永続的な接続をコンピュータ間 (ユーザーのパソコンのWebブラウザRailsサーバーなど) に別途設定すること普通みたいです。

 

単純にHTTPプロトコルには、ブラウザのあるページから別のページに移動したときに、ユーザーのIDを保持しておく手段がない為だそうです。

 

では、実際にログインをする時に何を行っているかというと、まず、データベースにある情報と入力された情報がマッチしているかの判定を行っています。

 

その後、user情報をセッションに保存することによってログインしている状態となります。

 

また、その情報を削除することによって、ログイン状態の解除(ログアウト)が成立することになります。

 

今回は以上です。

 

参考文献

今さら聞けないセッションとCookie、ログイン・ログアウト(Rails編) - Qiita

SQLとは何か

こんにちは

 

今回はSQLについて調べたことをまとめます。

SQLは、Structured Query Languageの略であり「リレーショナルデータベース管理システム(RDBMS)と対話するための言語」のことを言います。

つまり言語です。

 

リレーショナルデータベースでは、データを表形式で表しています。

表のことをテーブル、列がカラム、行がレコードと言います。

 

これに対して、 「カラム情報を取得してください」などの指示を出す言語がSQLで、データベースに要求を出すことをクエリ(問い合わせ)といいます。

 

データを操作するSQLを一部紹介します。これらはDMLと言います。

 

SELECT:取得

INSERT:登録

UPDATE:更新

DELETE:削除

SELECT:検索

 

これらを駆使して、データベースを操作することができます。

 

 

今回は以上です。

 

参考文献

SQLって何? - Qiita