Webを支える技術を読んでのメモ #2

HTMLとは

メディアタイプ

HTMLのメディアタイプには、「text/html」と「application/xhtml+xml」の2種類ある。「text/html」は、SGMLベースのHTMLを、「application/xhtml+xml」はXMLベースのXHTMLを示す

HTMLの構成要素

ヘッダ

要素 意味
title 文書のタイトル
link 他のリソースへのリンク
script JavaCcriptなどのクライアントサイドプログラム
meta その他のメタデータ

ボディ(ブロックレベル要素)

要素 意味
h1,h2,h3,h4,h5,h6 見出し
dl,ul,ol リスト
div ブロックレベル要素のグループ化
p 段落
address アドレス情報
pre 整形済みテキスト
table
form フォーム
blockquote 引用

ボディ(インライン要素)

要素 意味
em 強調
strong 強い強調
dfn 定義語
code ソースコード
samp
abbr WWW,HTMLなどの省略系

リンク

ハイパーメディアフォーマットととしてのHTML

  • <a>要素 アンカー

htmlでは他のWebページにリンクするためにアンカータグで<a>要素を使います<a>要素の内容のことを「アンカーテキスト」と呼びます

詳細な情報は<a href="http://gihyo.jp">技術評論社のWebページ</a>を参照してください

  • <link>要素

<a>要素はHTMLのブロック要素の中で別のwebページにリンクするために使いましたが、<link>要素はhtmlのヘッダでwebページ同士の関係を指定するために使います。rel属性はリンクの意味を示す

<head>
     <link rel="index" href="http://example.jp/index.html"/>
     <link rel="prev" href="http://example.jp/1.html"/>
     <link rel="next" href="http://example.jp/3.html"/>  
</head>
  • オブジェクトの埋め込み

HTMLはハイパーメディアなので、テキストだけではなく画像や映像などもうめこむ。歴史的経緯により一般的には画像の埋め込みには<img>要素をそれ以外のオブジェクトの埋め込みには<object>要素を利用する

<img src="http://example.jp/children.png" alt="子供たちの写真"/>
<object data="http://example.jp/children.mpeg">子供たちの動画</object>
  • フォーム

<a>要素や<link>要素とは少し異なるリンクの実現手段としてフォームがある。htmlのフォームではリンク先のURIに対してGETとPOSTが発行できる。

  • フォムによるGET

フォームによるGETは、キーワード検索などユーザーからの入力によってURIを生成する時に利用する。例をみてみましょう。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
     <form method="GET" action="http://example.jp/search">
       <p>キーワード:
          <input type="text" id="q" name="q"/>
          <input type="submit" id="submit" name="submit" value="検索"/></p>
     </form>
  </body>
</html>

フォームの基本構造は、<form>要素とその中に入るフォームコントロール要素です。フォームコントロール要素にはテキスト入力(input type=“text")やラジオボタン(input type = "radio")、セレクトボックスなどがあります。フォームはターゲットとなるURIを持ちます。ターゲットとなるURIはフォーム要素のactin属性で指定します。この場合は"http://example.jp/search"です。フォームを利用した結果はターゲットURIに送られます。その時に用いるメッソドはフォーム要素のmethod属性で指定します。この属性の値はGETまたはPOSTになります。method属性の値がGETの場合、ターゲットURIとフォームへの入力結果からリンク先のURIを生成します。例えば、上記の例でid属性の値がqのテキスト入力に「test」を入力した場合、http://example.jp/search?q=testというURIを生成します。クエリパラメータの名前(この例ではq)はinput要素のid属性の値となる。生成するURIはユーザからの入力によって決まるため、どのようなキーワードのURIでも生成できます。URLを生成するといっても、クライアントはサーバーが用意するフォームにしたがってURIを構築している点に注意してください。もしサーバー側の実装を変更し、検索パラメータを追加した場合は、フォームに新たなパラメータを埋め込んでクライアントに配布することで解決します。クライアント側でURIを想像して勝手に組み立てている場合は、ここのクライアントの実装ごとにパラメータを追加しなければなりませんが、サーバ側が提供するフォームが変更になるのであれば、全てのクライアントが同時に新しい検索パラメータに対応できます。

  • フォームによるPOST

<a>要素や<link>要素でのリンクはGETしか発行できませんでしたが、フォームでのリンクはPOSTも発行できます。POSTはリソースの作成など、ユーザーの入力をターゲットURIに送信する時に利用します。method属性の値がPOSTの例をみてみましょう。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
     <form method="POST" action="http://example.jp/search">
       <p>題名:<input type="text" id="title" name="title"/><br/>
              著者:<input type="text" id="author" name="author"/><br/> 
          <input type="text" id="q" name="q"/>
          <input type="submit" id="submit" name="submit" value="検索"/></p>
     </form>
  </body>
</html>

method属性がPOSTの場合ターゲットURIにたいしてPOSTを発行します。例えば上記題名に「test-title」、著者に「test-author」と入力した場合のリクエストメッセージは次のようになります。

POST /article HTTP/1.1
Host:example.jp
Content-Type: application/x-www-form-urlencodeed

tilte =test-title&author=test-author

リクエストメッセージのボディにはapplicaiton/x-www-form-urlencoded形式でフォームの内容が入っています

  • rel属性

<a>要素と<link>要素はそれぞれrel属性をモテます。rel属性の値にはリンク元のリソースとリンク先のリソースがどのような関係にあるかを記述します。rel属性の値のことを「リンク関係」と呼びます。HTMLでもっともよく使われるリンク関係は「stylesheet」でしょう。このリンク関係は、元のHTMLリソースを外部の CSSリソースにリンクする時に使います。

まとめ

  • HTMLは文書の構造を表現する面とリソースがリンクすることでハイパーメディアフォーマットとしての面がある

  • 構造の表現方法(記述方法)、ハイパーメディアフォーマットの表現方法(記述方法)について、教科書的には理解できたが、実務的には網羅仕切れていないの引き続き勉強

  • HTTPとURI、ハイパーメディアによるリンクの組み合わせによりWebが成り立つ

Webを支える技術を読んでのメモ #1

HTTPヘッダの重要性

ヘッダは

  • メッセージのボディに対する付加的な情報を表現する(メタデータ

  • クライアントやサーバーは、ヘッダを見て、メッセージに対する挙動を決定する

  • リソースへのアクセス権を設定する認証はヘッダで実現する

  • クライアントとサーバーの通信回数と量を減らすキャッシュなどのHTTPの機能はヘッダで実現する

主なHTTPヘッダ

認証

あるリソースにアクセス制御がかかっている場合、

  • ステータスコード401 Unauthorized(このリソースのアクセスには適切な認証が必要)
  • www-Authenticate ヘッダを利用

クライアントにリソースへのアクセスに必要な認証情報(認証方式)を知ることができる。

Basic認証

ユーザ名とパスワードによる認証方式。ユーザー名とパスワードはAuthorizationヘッダに入れてリクエストごと送信する

Digest認証

Digest認証は、Basic認証よりもセキュアで、あるメッセージに対して、ハッシュ関数を適用した結果のハッシュ値を使った認証を行う

キャッシュ

キャッシュ用ヘッダ

HTTPの重要な機能の一つにキャッシュというものがある。キャッシュとは、サーバから取得したリソースをローカルに蓄積し再利用する手法のことです。ローカルに蓄積したデータをキャッシュと呼ぶこともある。クライアントがローカルに蓄積したキャッシュは、そのキャッシュが有効な期間、クライアントが再度そのリソースにアクセスしようとした時に再利用する。

  • Pragma:キャッシュを抑制する。no-cacheを指定する。この値は、リソースをキャッシュしてはいけないことを示す

  • Expires:キャッシュの有効期限を示す。指定された期間まで、キャッシュが新鮮さを保つことをサーバが保証する。次回このリソースにアクセスする時に、キャッシュの有効期限内かどうかによって、サーバに再度アクセスするのか、キャッシュを利用するのか決定する

  • Cache-Control:上記二つのヘッダ(PragmaとExpires)は、HTTP 1.0が定義したヘッダ。詳細なキャッシュの方法を指定するには、HTTP 1.1で追加された Cache-Control ヘッダを使う。例えば、Pragma:no-cacheとCache-Control:no-cacheは等しい。まとめると、

    • キャッシュさせない場合は、PragmaとCache-Controlのno-cacheを同時に指定する
    • キャッシュの有効期限が明確に決まっている場合は、Expiresを指定する
    • キャッシュの有効期限を相対的に指定場合は、Cache-Controlのmax-ageで相対時間を指定する
条件付きGET

クライアントが、ExpiresやCache-controlヘッダを検証した結果、ローカルキャッシュを再利用できないと判断した場合でも、条件付きGETリクエストを送信すれば、キャッシュを再利用できる場合がある。条件付きGETは、サーバー側にあるリソースが、クライアントローカルのキャッシュから変更されているかどうかを調べるヒントをリクエストヘッダに含めてくれることで、キャッシュがそのまま使えるかどうか検証してくれる。

  • if-Modified-Since (条件付きGET):リソースの更新日時を条件にする。ローカルのキャッシュの更新日が指定され、サーバ上のリソースがこれ以降更新されていないようであれば、サーバは、304 Not Modified を返し、クライアントは、ローカルのキャッシュを使う。304 Not Moddifiedは条件付きGETへのレスポンスで、サーバー上のリソースが変わっていないことを示すステータスコード

  • if-None-Match(条件付きGET):リソースのETagを条件にする。if-Modified-Sinceヘッダによる条件付きGETは便利だが、時計を持っていないサーバーやミリ秒単位で更新される可能性のあるリソースには利用できない。その場合に使うヘッダが、if-None-Match ヘッダとETagヘッダ。if-None-Matchヘッダとif-Modified-Sinceヘッダは似ているが、指定する値が違う。if-Modified-Sinceヘッダが「日時を指定」するのに対し、if-None-Matchは、「値を指定」する。その値は、キャッシュしているリソースのETagヘッダの情報。ETagヘッダの情報が更新されていなけらば、ローカルのキャッシュを使う。if-Modified-Sinceとif-None-Matchの使い分けとしては、サーバーがETagヘッダを出している場合は、if-None-Matchを使った方が良い。(正確な更新有無を確認できるため)

  • ETagの計算

  • 静的ファイル  Apacheなどのデフォルトでは、静的ファイルのETagの値は、inode番号、ファイルサイズ、更新日時から自動で計算してくれる。

  • 動的ファイル  ApacheなどのWebサーバは、動的ファイルのETagの値は、自動で計算してくれない。HTMLやフィードを生成するWebアプリケーションでETagを生成する必要がある。

接続的接続

HTTP 1.1 での大きな新機能が接続的接続です。HTTP 1.0では、クライアントが、TCPコネクションを確立してリクエストを送信し、サーバがそれにレスポンスを返すたびにTCPコネクションを切断していました。TCPのコネクション確立はコストがかかる処理ですので、画像や外部CSSファイルにたくさんリンクしているWebページを表示しようとすると、どうしてももっさりとした動きにならざる得ませんでした。これを解決するため、クラアインとサーバー間でのリクエストのたびに切断するのではなく、まとめて接続し続ける手法が開発されました。HTTP 1.0では、それをKeep-Aliveヘッダで実現しています。HTTP 1.1では、この接続的接続がデフォルトの動作となりました。接続的接続では、クライアントはレスポンスを待たずに同じサーバーにリクエストを送信できます。これを「パイプライン化」と呼びます。パイプライン化により、効率的にメッセージを処理できる。コネクションを切断したい場合は、リクエストでConnectionヘッダに、closeという値を指定すれば、「このリクエストのレスポンスが返ってきたら切断する」という意図をサーバーに伝えれれる。

まとめ(感想)

  • ヘッダは重要

  • ヘッダを意識しながらサーバー/クライアント間のリクエスト/レスポンスがどういった動きになっているか改めて確認してみようと思った。

Perlのお勉強 #1

Perlをかけるようになりたいと思い、色々と調べていく中で、よくわからない用語が割とたくさん出てくる。最近調べたことをまとめる。

1.plenv

システムPerlと呼ばれるOSが使うために始めら導入されているperlがある。それを使ってモジュールを導入したりすると、システムPerlに変更が加えられちゃって、システム的にあまりよくない。そのため、システムPerlとは別で、ユーザーPerlと呼ばれる自分専用のPerl環境を準備する。plenvはユーザーPerlの環境を準備してくれるツール。導入、バージョンを切り替えなどができる。

$ curl -L http://is.gd/plenvsetup | bash
$ plenv versions
$ plenv install -l
$ plenv install 5.20.2
$ plenv versions
$ plenv global 5.20.2
$ plenv versions

2.CPAN

CPANとは、Perlのモジュールが集まる場所。CPANに集まっているモジュールをインストールするには、cpanmというツールを使う。

$ plenv install-cpanm
$ cpanm LWP::UserAgent
$ perldoc -l LWP::UserAgent

3.LWP::UserAgent

HTTPのリクエストを発行し、Web上のリソースを取得する。

LWP::UserAgent は web ユーザエージェントを実装するクラスです。 LWP::UserAgent オブジェクトは web リクエストを発行(dispatch)するために 使えます。 http://perldoc.jp/docs/modules/libwww-perl-5.813/LWP/UserAgent.pod

LWP::UserAgentを使って、このBlogのHTMLソースを取得し、titleタグの要素を出力する。

use strict;
use warnings;
use LWP::UserAgent;

my $ua = LWP::UserAgent->new();
my $res = $ua->get('http://shimabukuromeg.hatenadiary.jp/');
die "Response is error!" if $res->is_error;
my ($title) = $res->content =~ m!<title.*.?>(.+?)</title>!i;
print "$title\n";

4.ワンライナー

-E以降に直接プログラムを書いて、実行することができる。-M以降にモジュールを指定することもできる

perl -MLWP::Simple -E 'say get("http://shimabukuromeg.hatenadiary.jp/")

まとめ

plenvとCPANについて、同じことを何回もググっているように思ったので、まとめた。この記事をまとめるのに無駄に1時間ぐらいかかった。1時間もかかる内容ではないように思うので、もっと早くまとめれるようにする。

2017年7月13日(木)

本日の振り返り

課題

mysql import

oracle import

 

https://www.instagram.com/p/BWXzU7ZHhYFI-BytHwZKz1Z5aU3l7fCuqt7W6c0/