BLOG

社員ブログ - 仕事から たわいの無い話まで ざっくばらんにご紹介します。

2023/12/26

HTTPプロトコルの基本‥ブラウザーで表示するまで

HTTPプロトコルの基本‥ブラウザーで表示するまで

ウェブチェッカーというサービスを運営していますが、よくあるお問合せにこういったものがあります。

「お知らせとか更新されているはずなので通知が来ない」

個別対応はしないのですが、よくあるのは Javascriptを使ってお知らせ部分だけ後で取得しているケース。
こういうのは残念ながらウェブチェッカーで対応できないのです。
なぜならブラウザーを搭載していないから(^^;

本当はサーバー上にブラウザーを乗っけてGoogleのクローラーみたいにやりたいのですが、いかんせん費用が‥(>_<)

ウェブチェッカーで行っているのは、指定されたURLのレスポンスコードとレスポンスデータを対象にチェックしているのです。

という説明をしているのですが、そもそもレスポンスデータって何?というようにHTTPの基本を知らない人にはチンプンカンプンの内容でしょう。

という事でHTTPとはなんぞや、HTTPでブラウザーに表示されるまでについて、簡単に説明しようと思います。

HTTPプロトコルとは

ざっくり言うとこうです

1.URLにアクセスしてそのサーバーはHTTPヘッダーとHTTPボディーを返す。

以上!

というとあまりに雑なのですが。
HTTPプロトコルというのは非常にシンプルで、1回のやり取りしかないのです。

ウェブチェッカーではこの1回のやり取りで得られるレスポンスを得て、それを比較対象のデータに用いているのです。

ブラウザーの動き

大抵のウェブサイトでは、URLで指定された先が返すのはHTMLです。

ブラウザーは受け取ったHTMLを解釈し、そこから画面にどのように表示するか、という事をします。
レンダリングと呼ばれています。

HTMLの中には、画像のURLがあったり、CSSやJavascriptのコードやコードが指定されたURLが書かれています。
ブラウザーは、HTMLの記述をCSSの内容に従いレイアウトを決めていきます。
例えば要素ごとに横幅や高さ、背景色や文字色、センタリング、左寄よせ、右寄せ、というように要素の中に入る文字や画像などの場所や色、文字だったら大きさやフォントの種類などを決めて描写します。次の要素を右に出す、左に出す、下に出す、というようにしながら画面上に描いていきます。

画像であればHTML上に直接画像データを書くのが大変なので(BASE64でエンコードすればできなくはないです)、大抵は画像ファイルのURLをimgタグで指定して、ブラウザーはそのURLに再度アクセスをして画像データを読み込み表示する、という事もします。

さて、ここが実はポイントで、ブラウザーは最初のURL以外にもHTML中に記載されたURLに対してもアクセスを行う、という動きをします。
ウェブチェッカーではそこまではやっていません。そこまでやろうと思ったら、ウェブブラウザーをサーバー上に仕込む必要がありますが、そうすると毎回数万リクエストを処理するのに必要なサーバーが多く必要になり、それはすなわち価格に反映されてバカ高くなるからです。

最初のHTML取得以外に、画像のURLに追加でアクセスする、という動きをするわけですが、これは画像に限った話ではありません。
JavascriptがHTMLに仕込まれていればブラウザーが動かし始めますが、そこであるURLから情報を得る、というような動きがあればそのように動きます。

冒頭で例示した「お知らせとか更新されているはずなので通知が来ない」は、もしかするとお知らせの情報だけJavascriptで取得しているのかもしれません。
仮にそうだとすると、最初に指定したURLが返すHTMLには、お知らせを得るJavascriptコードはあったとしても、お知らせの情報そのものは最初のHTMLにありませんから、ウェブチェッカーでは取得できません。

かなり雑な説明ですが、ブラウザーとはそのような動きをするものなのです。

最初のレスポンスを見れば動きはだいたい読める

ブラウザーで該当ページを開き、マウス右クリック→「ページソースを表示」的なメニューを選べば、そのページのHTMLをみることができます。

そこに、例えばお知らせ情報といったデータが含まれていれば、おそらくウェブチェッカーでもチェックできる、という判断が出来ると思います。

逆にお知らせ情報が無い場合は、このHTML以外で何か指定しているもの(例えばJavascript)が動くことで、お知らせ情報を別途取得している可能性があります。その場合はJavascriptが埋め込まれていないか、別URLで指定されていないか確認しましょう。

次にJavascriptのソースコードを追ってみる事です。
処理中どこかのタイミングでお知らせ情報を得るための処理を動かしていることでしょうから、そこをみつけらたらお知らせ情報のURLもわかるわけです。

そのURLにアクセスをして、お目当ての「お知らせ」が載っていれば正解。
そのURLをウェブチェッカーに登録すればチェックできるようになる、という事です。

以上、簡単‥というか雑すぎて恐縮ですが。

HTTPプロトコルでHTMLを得て、HTML中に記載の画像やJavascriptなどで追加の情報を得て表示する。
そんなことをしているんだ、程度に知っていただけたら幸いです。

最新記事

アーカイブ

カテゴリ

タグ

投稿者

OUR MISSION

理念

「ITで人を豊かにする」

私たちが開発したシステムやサービスを通じ、物心両面から豊かになってもらう。そして人生を楽しんでもらう。そこに私たちが存在する理由があります。
日々新たな製品・サービスを開発・ご提供し、最後まで誠意をもって取り組んで成果を出す。
ご縁を頂いた方やその先の人達に安心と満足をご提供出来る様、誠心誠意取り組んで参ります。

pageTop