2020/04/27

Webの技術

Web

Webは、ハイパーメディアを用いたインターネットベースの分散情報管理システム。
＜Webの成功要因＞
  • インターネットを使ったハイパーメディアとして設計されたこと。
  • 必要最低限の単方向リンク機能だけを備えていること。
  • アーキテクチャスタイルがRESTfulであること。


REST

Wiki: Representational State Transfer
Roy Fieldingの博士論文

RESTはWebのアーキテクチャスタイル。
デザインとデザインパターンが違うように、アーキテクチャとアーキテクチャスタイルは違う。
RESTは特にネットワークシステムのアーキテクチャスタイル。
クライアント／サーバからの派生。
クライアント／サーバにいくつかの制約を加えていくとRESTアーキテクチャスタイルになる。
REST＝ULCODC$SS
  • Stateless Server: Client Stateless Server, CSS
  • Cache: Client Cache Stateless Server, C$SS
  • Uniform Interface: Uniform Client Chache Stateless Server, UC$SS
  • Layered System: Uniform Layered Client Chache Stateless Server, ULC$SS
  • Code on Demand: Uniform Layered Code on Demand Client Cache Stateless Server, ULCODC$SS

URI

Wiki: Uniform Resource Identifier
RFC: RFC 3986（Uniform Resource Identifier (URI): Generic Syntax）　和訳

＜URIの例＞
http://naopapa:pass@blog.example.com:8080/serarch?q=test&debug=true#a1
  • スキーム: http
  • ユーザ情報: naopapa:pass
  • ホスト: blog.example.com
  • ポート: 8080
  • パス: /search
  • クエリ: q=test&debug=true
  • フラグメント: #a1
＜実装上の留意点＞
・相対URIの解決。絶対URI、基底URI。
・％エンコーディングの文字エンコーディング。（元となるフォームを提供しているWebページの文字エンコーディングを使用。基本はUTF-8。）
・URIの長さ、仕様上は制限ないが実装上あり。Internet Explorerでは2,038バイト。

＜URI設計指針＞
Cool URI「Cool URIs don't change」
  • URIにプログラム言語依存の拡張子を利用しない。（.pl、.rb、.do、.jspなど）
  • URIに実装依存のパス名を利用しない。
  • URIにプログラミング言語のメソッド名を利用しない。
  • URIにセッションIDを含めない。
  • URIはそのリソースを表現する名詞であるべき。
＜Bloggerの場合＞
・記事のURI
https://nasebanaruka.blogspot.com/2020/04/blog-post_14.html
・ラベルのURI
https://nasebanaruka.blogspot.com/search/label/%E3%82%B4%E3%83%AB%E3%83%95

　実装依存のURIとなる場合、Apacheモジュールのmod_rewriteなどで、
　ユーザに見せるURIと内部的に利用するURIを分ければいい。

・マトリクスURI
　独立した軸を持つ複数パラメータの組み合わせで表現するリソースで使用する。
　マトリクスURIのセミコロン(;)はパラメータに順序性がない場合、カンマ(,)は
　パラメータに順序性がある場合に使用する。
https://earth.google.com/web/@36.2986008,138.7488767,919.76602791a,4314.07973989d,35y,0h,0t,0r

HTTP

Wiki: Hypertext Transfer Protocol

RFC 2616で規定されたHTTP1.1は、古い情報となっている。
RFC: RFC 2616（Hypertext Transfer Protocol -- HTTP/1.1）　和訳
Obsoleted by: 7230, 7231, 7232, 7233, 7234, 7235          DRAFT STANDARD
RFC: RFC 7230（Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing）　和訳
RFC: RFC 7231（Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content）　和訳

HTTPは、RESTの特徴である「Stateless Server」、「Cache」、「Uniform Interface」を実現。

＜HTTPメソッド＞
  • Create: POST/PUT
  • Read: GET
  • Update: PUT
  • Delete: DELETE
  • Other: HEAD/OPTIONS/TRACE

＜POSTの使用例＞
  1. 子リソース作成（ブログ記事の投稿）
  2. 子リソース追加（ログ追加）
  3. 他のメソッドでは対応できない処理の実行

＜べき等性と安全性での分類＞
  • GET、HEAD: べき等かつ安全
  • PUT、DELETE: べき等だが安全でない
  • POST: べき等でも安全でもない

＜HTTPヘッダ＞
Chromeでこのブログのindex.htmlをリクエストしたらこう。
Request Headers
:authority: nasebanaruka.blogspot.com
:method: GET
:path: /
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: ja,en-US;q=0.9,en;q=0.8
cache-control: max-age=0
cookie: _ga=GA1.3.841807931.1587617014
if-modified-since: Wed, 29 Apr 2020 02:15:54 GMT
if-none-match: W/"d7597282e81d92cf86d1b674eccf5b7a0bf5a5e2ef5a9e79d5a97eff7e51f5a6"
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
sec-fetch-user: ?1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

Response Headers
alt-svc: h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: private, max-age=0
content-encoding: gzip
content-length: 4681
content-type: text/html; charset=UTF-8
date: Wed, 29 Apr 2020 02:18:39 GMT
etag: W/"d7597282e81d92cf86d1b674eccf5b7a0bf5a5e2ef5a9e79d5a97eff7e51f5a6"
expires: Wed, 29 Apr 2020 02:18:39 GMT
last-modified: Wed, 29 Apr 2020 02:15:54 GMT
server: GSE
status: 304
x-content-type-options: nosniff
x-xss-protection: 1; mode=b

HTML

Wiki: HyperText Markup Language
Wiki: ウェブカラー
W3C: HTML 4.01 Specification　和訳
WHATWG: HTML5 - HTML Standard　和訳

HTMLのメディアタイプは「text/html」と「application/xhtml+xml」の2種類。
「text/html」はSGMLベースのHTML、「application/xhtml+xml」はXMLベースのXHTMLを表す。
XHTMLの名前空間は「http://www.w3.org/1999/xhtml」

HTMLの要素

microformats

Wiki: マイクロフォーマット

Web上の情報に意味を与える。⇒セマンティックWeb（semantic web）
マイクロフォーマットはHTML（またはXHTML）ウェブページにおける、意味を表現するための小さなマークアップである。

Microformats Wiki

Google に外部リンクの関係性を伝える

rel="nofollow"

Atom

Wiki: Atom Syndication Format
RFC: RFC4287（The Atom Syndication Format）　和訳

Atomは、データフォーマットの規定。（フィード、エントリ）
エントリ: Atomの最小単位
フィード: エントリの集合
Atomのメディアタイプは「application/atom+xml」
Atomの名前空間は「http://www.w3.org/2005/Atom」
Atomのフィードとエントリは子要素として任意の個数の外部マークアップが指定可能。（拡張性が高い）

＜ドキュメントとリソースの分類＞

メンバリソース:
                Member Resources
                       |
                -----------------
               |                 |
         Entry Resources     Media Resources
               |
         Media Link Entry

コレクションリソース:
     Collection
        |
        o- Entry
        |    |
        |    o- Member Entry IRI (Entry Resource)
        |
        o- Entry
             |
             o- Member Entry IRI (Media Link Entry)
             |
             o- Media IRI        (Media Resource)

拡張例:
Atom Threading Extentions　RFC 4685
Atom License Extention　RFC 4946
Atom Paging and Archiving　RFC 5005
Open Search　Wiki

＜HTTPヘッダ＞
ChromeでこのブログのAtomフィードをリクエストしたらこう。
Request Headers
:authority: nasebanaruka.blogspot.com
:method: GET
:path: /feeds/posts/default
:scheme: https
accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
accept-encoding: gzip, deflate, br
accept-language: ja,en-US;q=0.9,en;q=0.8
cookie: _ga=GA1.3.841807931.1587617014; _gid=GA1.3.592368964.1588159898
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: none
upgrade-insecure-requests: 1

user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36

 Response Headers
alt-svc: h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,h3-T050=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
cache-control: public, must-revalidate, proxy-revalidate, max-age=1
content-encoding: gzip
content-length: 34304
content-type: application/atom+xml; charset=UTF-8
date: Wed, 29 Apr 2020 12:09:59 GMT
etag: W/"f2613d6a9d92e5e676de8baa0cf64218e4ee9e0c5e666143674336714a9b81a8"
expires: Wed, 29 Apr 2020 12:10:00 GMT
last-modified: Wed, 29 Apr 2020 12:02:04 GMT
server: blogger-renderd
status: 200
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 0

AtomPub


AtomPubは、Atomを利用したリソース編集プロトコルの規定。(フィードやエントリのCRUD操作)
AtomPub仕様が基本的なリソースモデルとリンク機構を提供するので、設計部分を削減できる。

＜AtomPubのリソースモデル＞
コレクションのメタデータを表現するサービス文書と、エントリのカテゴリに使用できる値を列挙するカテゴリ文書が追加され  ている。

サービス文書:
 サービス文書のメディアタイプは「application/atomsvc+xml」
 サービス文書の名前空間は「http://www.w3.org/2007/app」
     Service
        o- Workspace
        |    |
        |    o- Collection
        |         |
        |         o- IRI, categories, media types
        |
        o- Workspace
             |
             o- Collection
                  |
                  o- IRI, categories, media types

カテゴリ文書:
 カテゴリはサービス文書の<categories>要素で指定するか、<categories>要素のhref属性で外部のカテゴリ文書を指定可能。
 カテゴリ文書のメディアタイプは「application/atomcat+xml」
       <?xml version="1.0" ?>
       <app:categories
           xmlns:app="http://www.w3.org/2007/app"
           xmlns:atom="http://www.w3.org/2005/Atom"
           fixed="yes" scheme="http://example.com/cats/big3">
         <atom:category term="animal" />
         <atom:category term="vegetable" />
         <atom:category term="mineral" />
       </app:categories>





＜エントリ単位での操作＞

エントリURIが示すリソースをHTTPメソッドでCRUD操作する。

編集用URIは、Atomの<link>要素のrel属性(rel="edit")で指定する。



＜HTTPレスポンス＞

ChromeでこのブログのAtomフィードをリクエストしたらこう。



編集リンク



<link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/3074793524428790198/posts/default/6466747162122847206'/>









JSON

Wiki: JavaScript Object Notation

RFC 4627で規定されたJSONは、古い情報となっている。

RFC: RFC 4627（The application/json Media Type for JavaScript Object Notation (JSON)）



Obsoleted by: 7159



Obsoleted by: 8259

RFC: RFC 8259（The JavaScript Object Notation (JSON) Data Interchange Format）　和訳



JSONのメディアタイプは「application/json」





A JSON value MUST be an object, array, number, or string, or one of the following three literal names:
   false
   null
   true





<JSON Objectの例>




      {
        "Image": {
            "Width":  800,
            "Height": 600,
            "Title":  "View from 15th Floor",
            "Thumbnail": {
                "Url":    "http://www.example.com/image/481989943",
                "Height": 125,
                "Width":  100
            },
            "Animated" : false,
            "IDs": [116, 943, 234, 38793]
          }
      }





JSONP

Wiki: JSON with padding







AjaxのXMLHttpRequestではクロスドメイン通信ができない。



JSONPは、HTMLの<script>タグ、JavaScriptのコールバック関数、JSONを組み合わせてクロスドメイン通信を実現する仕組み。





























時刻:

















ラベル:


















0 件のコメント:















コメントを投稿


















        

      









登録:
コメントの投稿 (Atom)







人気の投稿




    

  • 

    

    EC2でWindows Serverの設定あれこれ
    

     ## 使用するOSバージョンとAMIの選定 [AWS が Amazon EC2 での Microsoft Windows Server 2025 イメージの提供開始を発表](https://aws.amazon.com/jp/about-aws/whats-new/2024/1...
    

    

    

    • 

  • 

    

    EC2でAmazon Linux 2023の設定あれこれ
    

    ## 作業前確認 [Amazon Linux 2023 リリースノート](https://docs.aws.amazon.com/ja_jp/linux/al2023/release-notes/relnotes.html)    ### インスタンスのネットワーク設定 ``` ...
    

    

    

    • 

  • 

    

    




    

    AWSのSCTとDMSを試す
    

     今回、SCTとDMSを使用して、オンプレミスにあるOracleをAWSのRDSへ移行してみる。 - [AWS Schema Conversion Toolとは](https://docs.aws.amazon.com/ja_jp/SchemaConversionTool/lat...
    

    

    

    • 

  • 

    

    smtp4dev
    

     ## smtp4dev  [https://github.com/rnwood/smtp4dev](https://github.com/rnwood/smtp4dev) > A dummy SMTP server for Windows, Linux, Mac OS-X...
    

    

    

    • 

  • 

    

    跳びはねる思考
    

    自分の無知と偏見を反省した。  跳びはねる思考 会話のできない自閉症の僕が考えていること (角川文庫)    僕と自閉症    もしも、僕が定型発達なら、今よりもっと、明るい性格だったのではないかと、考えることがあります。定型発達とは、いわゆる普通の人々のことです。  僕は二十二...
    

    

    

    •