フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
oreilly.com
More than 5,000 organizations count on our digital courses and more to help their teams learn the tools and technologies that drive business outcomes. We can help yours too. New AI policy for O’Reilly authors and talent O’Reilly president Laura Baldwin shares the company’s ethical approach to leveraging GenAI tools and ensuring O’Reilly experts are compensated for their work. Read it now It’s time
機密情報を含むJSONには X-Content-Type-Options: nosniff をつけるべき - 葉っぱ日記
WebアプリケーションにおいてJSONを用いてブラウザ - サーバ間でデータのやり取りを行うことはもはや普通のことですが、このときJSON内に第三者に漏れては困る機密情報が含まれる場合は、必ず X-Content-Type-Options: nosniff レスポンスヘッダをつけるようにしましょう(むしろ機密情報かどうかに関わらず、全てのコンテンツにつけるほうがよい。関連:X-Content-Type-Options: nosniff つかわないやつは死ねばいいのに! - 葉っぱ日記)。 例えば、機密情報を含む以下のようなJSON配列を返すリソース(http://example.jp/target.json)があったとします。 [ "secret", "data", "is", "here" ] 攻撃者は罠ページを作成し、以下のようにJSON配列をvbscriptとして読み込みます。もちろ
Webはインターネットになった - naoyaのはてなダイアリー
先週金曜日にエンジニアサポートCROSS2013に行ってきた。目当ては @Jxck_ さんホストによる次世代Webセッション。セッション自体は前後半に分かれていて 前半はプロトコル編。SPDY (wikipedia) や HTTP/2.0 の動向やその課題点など 後半はアーキテクチャ編。プロトコルが変わった上で、その上で動くソフトウェアのアーキテクチャが云々 という内容でした。前半がより技術寄り、後半はテーマ的にもより広範の話題を扱うという感じでどちらも面白かった。 CROSS 2013レポート(2) - mad-pの日記 こちらに細かいログがあります。 話の前提になる SPDY や HTTP/2.0 周りの昨今については 【HTTP 2.0の最新動向】 第1回：HTTP/2.0の策定、ついに始まる - INTERNET Watch Watch 【HTTP 2.0の最新動向】 第2回：HT
Google提唱の新プロトコル「SPDY」とは--SPDYで変わること、変わらないこと - builder by ZDNet Japan
次期HTTPの有力候補に挙げられたSPDY Googleが提唱している「SPDY（スピーディ）」がにわかに注目を集めている。 SPDYは高速なWebコンテンツ転送を実現するための新しいネットワークプロトコルである。Googleは以前からWebの高速化に極めて熱心に取り組んできた。そのために開発されたプロダクトは、Webサーバ、Webブラウザ、JavaScriptエンジン、各種開発ツールなど、Web技術のあらゆる側面をカバーしている。SPDYもその取り組みの一環であり、ネットワークプロトコルというWebの基幹部分から高速化へのアプローチを進めようというものだ。 SPDYは2010年に発表され、2011年前半にはブラウザのChromeに実装され、一般のユーザーでも利用できるようになった。このとき、Googleの一部のサービスではChromeとの通信にSPDYを利用していることが明かされている。
先輩と覚える HTTP ステータスコード
gistfile1.md 先輩に学ぶ HTTP Status Code 超雑にまとめました。修正してください。 登場人物 アプリケーション先輩: いつも忙しい。横に広がるのが得意(デブじゃない)。 後輩: 頼んでばっかしで役に立たない。 サーバー先輩: アプリケーション先輩と仲がいい。Unix Socket でつながるくらい仲良し。 プロクシ先輩: アプリケーション先輩とかサーバー先輩と後輩の間を取り持って代わりに伝えたりしてくれる。たまに勝手にレスポンスを書き換える。 1xx 系 100 Continue 後輩「あ、先輩！お願いが！」 アプリケーション先輩「おー、聞いてやる。詳しく話せ」 101 Switching Protocols 後輩「せんぱーい、お願いなんですけどー」 アプリケーション先輩「ちょっと待て、お前 HTTP 1.0 で喋るな、 HTTP 1.1 か TLS 1.0 で
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」:phpspot開発日誌
WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 2012年05月01日- Chrome ウェブストア - Dev HTTP Client WEB開発者必携。任意ヘッダーやメソッドを指定して送信できるChromeアプリ「Dev HTTP Client」 サーバに対して、POSTやGET等のメソッドで、独自のクッキーやヘッダーなどを加えて手動で送信できるChromeのアプリです。 POSTで送信する場合ってフォームを用意しないといけないのが面倒ですが、それも手動で指定できるため、非常に便利。 その場で返却値がカラーリングされつつ整形されて見れるので、JSON等の値を見る場合には超便利です JSON返却値の例。カラーリングと整形がありがたい なくてもそこまで困らないかもしれませんが、エントリポイントをちゃんとチェックしたいっていう
HTTPで正しくキャッチボールをするには | Lab by engineering@dwango.jp
皆さんはキャッチボールは好きですか? 私はバスケットボールの方が好きです。 キャッチボールは、自分と相手双方がボールをうまくキャッチできるように投げる必要があります。これは、サーバーとクライアントの間でも同じで、クライアントから投げられたボール(リクエスト)をサーバーは正しく投げ返す(レスポンス)必要があります。 ここで、サーバーがボールをあさっての方向に投げたり、異常なスピードで投げ返すとどうなるでしょうか。おそらくクライアントはそのボールを取ろうとしますが、追いつけずにボールを落としたり、どこかにぶつけたりしてしまうでしょう。 今回は、HTTPについて、どうして正しくレスポンスを返さないといけないのかということについて、Rackを使用して解説していきます。 対象読者 Webアプリケーション開発に興味のある方、これから開発を行おうとしている方 Rackについて まず、今回使用するツール
PHPでのHTTPアクセスを超簡単に行える「PEAR::HTTP_Request」:phpspot開発日誌
PHPでのHTTPアクセスを超簡単に行える「PEAR::HTTP_Request」。 HTTP_Request は、PHPユーザの方ならご存知の方も多いと思いますが、WEB上にコピペですぐ使えるサンプルが無かったので作ってみました。 単純にHTTPリクエストを行うなら、PHPなら、file 関数や file_get_contents で1行でできてしまいます。 (php.ini にて allow_url_fopen=Onにした場合のみ) ただ、タイムアウトの秒数を設定したり、リダイレクトされた場合の処理や、HTTPリクエストする際のヘッダーなどの指定はカスタマイズ出来ません。 HTTP_Request ならそれが次のように簡単に行えます。 <?php // リクエストを行うURLの指定 $url = "http://〜"; $option = array( "timeout" => "10
HTTPステータスコード - Wikipedia
HTTPステータスコードは、HTTPにおいてWebサーバからのレスポンスの意味を表現する3桁の数字からなるコードである。RFC 7231等によって定義され、IANAがHTTP Status Code Registryとして管理している。以下に一覧を示す。 1xx Informational 情報[編集] リクエストは受け取られた。処理は継続される。 100 Continue 継続。クライアントはリクエストを継続できる。サーバがリクエストの最初の部分を受け取り、まだ拒否していないことを示す。 例として、クライアントがExpect: 100-continueヘッダをつけたリクエストを行い、それをサーバが受理した場合に返される。 101 Switching Protocols プロトコル切替。サーバはリクエストを理解し、遂行のためにプロトコルの切り替えを要求している。 102 Processin
Apacheログに色を付けて快適tail生活 - y-kawazの日記
ツイッターで「Apacheログをtail中にステータスコード部分だけに色つけしたい」ってのを見たので作ってみた。 #!/bin/sed -f ## MEMO # [0m reset # [1m bold # [3m italic # [4m underline # [5m blink # [30m black # [31m red # [32m green # [33m yellow # [34m blue # [35m magenta # [36m cyan # [37m white s/\(HTTP\/1..\"\) \(2[0-9][0-9]\) /\1 \x1b[34m\2\x1b[0m / s/\(HTTP\/1..\"\) \(3[0-9][0-9]\) /\1 \x1b[32m\2\x1b[0m / s/\(HTTP\/1..\"\) \(4[0-9][0-9]\) /\1
すぐに実施できる、あなたのウェブページのスピードを改善する10のチップス
ウェブページのスピードを改善することは最適なユーザエクスペリエンスを提供するだけでなく、Googleの検索結果にも影響を与える大切な要因です。 すぐに実施できる、あなたのウェブページのスピードを改善する10のチップスを紹介します。 10 Tips for Decreasing Web Page Load Times [ad#ad-2] 下記は各ポイントを意訳したものです。 1. 現在のスピードをチェック 2. 画像の最適化 3. 画像は実寸で配置 4. コンテンツを圧縮して、最適化 5. スタイルシートは上に配置 6. スクリプトは下に配置 7. スクリプトとスタイルシートは外部ファイルで 8. HTTPリクエストは最小限に 9. キャッシュの利用 10. 301リダイレクトは避ける 参考資料とツール 1. 現在のスピードをチェック まず、現在のあなたのウェブページのスピードの分析からはじ
グーグルが高速プロトコル「SPDY」をChromeブラウザで有効化。Gmailなどで利用を開始していた
グーグルが高速プロトコル「SPDY」をChromeブラウザで有効化。Gmailなどで利用を開始していた グーグルがより速いWebを実現するために、HTTPを高速化した新プロトコル「SPDY」を開発中であることは、昨年夏に公開した記事「グーグルがWebを高速化するために何をしているか」で紹介しました。 SPDYの話題はその後ほとんど見かけなくなりましたが、グーグルはそのSPDYをChromeに実装し、同社のサービスで利用していることがニュースサイトConceivably Techの記事「Google Chrome Gets SPDY – And An Onscreen Keyboard」で指摘されています。 なぜグーグルはひっそりとSPDYを有効化したのだろう？ SPDYとは従来のWebのプロトコルであるHTTPを改良し、毎回同じ情報がやりとりされるヘッダの情報を圧縮したり、リクエストの回数
1分でわかる「X-ナントカ」HTTPレスポンスヘッダ - 葉っぱ日記
最近のモダンなWebブラウザがサポートしている、セキュリティに関連しそうな X- なHTTPレスポンスヘッダをまとめてみました。それ以外にもあったら教えてください。 X-XSS-Protection 0:XSSフィルタを無効にする。 1:XSSフィルタを有効にする。 XSSフィルタを有効にすることでエンドユーザがXSSの被害にあう可能性が低減するが、まれに誤検知することで画面の表示が乱れることもある。IE8+、Safari、Chrome(多分) で有効。IEでは「X-XSS-Protection: 1; mode=block」という指定も可能。 2008/7/2 - IE8 Security Part IV: The XSS FilterBug 27312 – [XSSAuditor] Add support for header X-XSS-Protection X-Content-Ty
High Performance Web Sites
14 Rules for Faster-Loading Web Sites These rules are the key to speeding up your web pages. They've been tested on some of the most popular sites on the Internet and have successfully reduced the response times of those pages by 25-50%. The key insight behind these best practices is the realization that only 10-20% of the total end-user response time is spent getting the HTML document to the brow
2010年代には Apache の mpm_prefork とか流行らない (もしくは HTTP keep-alive のメリットとデメリット) - kazuhoのメモ置き場
HTTP の持続的接続の功罪について はじめに、HTTP の持続的接続 (keep-alive) のメリットについて。持続的接続を使うメリットは、以下の２点。 TCP 接続の確立にかかる時間の節約*1 TCP の接続と切断に必要な資源 (CPUとネットワーク) の節約 ウェブブラウザ〜データセンタ間の通信で、持続的接続を使う理由は、このうちの前者。特に太平洋を超えるようなケースだと、TCP 接続に0.2秒とかかかるので、メリットが大きい。 一方、持続的接続のデメリットは、 接続が切断されるまでの間、その接続を維持するためにコストがかかる (主としてメモリが無駄になる) という点になる。特に、１プロセス１コネクションを前提とするアーキテクチャ (例: mod_perl) だと、メモリの無駄使いが、とてもひどいことになる。 そこで、ブラウザからの接続を受ける HTTP サーバとアプリケーション
HTTPリクエスト/レスポンスとは? HTTPヘッダーを理解しよう | 初代編集長ブログ―安田英久
今日は、少し技術的な話ですが、Web担当者も知っておくといい知識を。テーマは「HTTPヘッダー」です。知らなくてもWebサイトは作れますが、知っておくとサイト上での仕組み作りの視野が広がるかもしれません。 ブラウザでWebページを表示するときに、ブラウザはWebサーバーと通信しています。そのときに使われるのが「HTTP」というルールです。 HTTPは「HTTPリクエスト」と「HTTPレスポンス」に分けて考えます。ブラウザがサーバーに「このページを見たい」と頼む通信が「HTTPリクエスト」で、そのリクエストに応えてサーバーがブラウザに返す通信が「HTTPレスポンス」です。 まず、ブラウザ → サーバーの「HTTPリクエスト」から説明しましょう。 HTTPリクエストはブラウザが送るものですから、HTTPリクエストを作るのはブラウザです。サーバーは、受け取ったHTTPリクエストの内容からどんな情
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTTP通信の詳細内容を一覧表示する「HTTPNetworkSniffer」NOT SUPPORTED
http://www.machu.jp/diary/20100416.html%23p01
Studying HTTP
