webエンジニアさもの挑戦

RubyやPython, JavaScriptなど勉強したことなど、IT関連の記事を書いています

ビットコイン取引高日本一の仮想通貨取引所 coincheck bitcoin

【非エンジニア向け】ブラウザによって見え方が違うのはなぜか

こんにちは、エンジニアのさもです。

同じサイト・ページでもブラウザ(InternetExplorerとかchrome, edgeなど)によって見え方とかボタン・プルダウンの動き方が微妙に違うことって無いですか?

もう身の回りほとんどインターネットになっているので、「エンジニアじゃないけどなんでそうなるのか知ってるよ」という方も多いかと思いますが、サイトにアクセスしてから表示されるまでを順に追いながら、なぜブラウザで表示が違うのか解説したいと思います。

少し長くなっちゃいましたが、最後までお読みください。

スポンサーリンク

登場人物

  • サイトを見る人(ブラウザ)

f:id:s-uotani-zetakansu:20170919105316p:plain

  • サーバー
    • 欲しいwebサイトを提供しているサーバー
    • htmlファイルはこいつが持っている

f:id:s-uotani-zetakansu:20170919105322p:plain

f:id:s-uotani-zetakansu:20170919105319p:plain

それでは、ブラウザでURLを入力またはリンクをクリックしてから、ブラウザで画面が表示されるまでの流れを説明します。

リクエス

知っている方も多いと思いますが、パソコンにはIPアドレスという番号が割り振られています。

f:id:s-uotani-zetakansu:20170919112325p:plain

この番号は、”所属しているネットワーク内”で識別できるように決まっています。”所属しているネットワーク内”というのは、例えば、同じ無線LANを使っている機器の中でという意味です。

IPアドレスは、PCの住所などと例えられていますが、所属ネットワーク外の別のネットワークには同じIPアドレスを持つパソコンもあるので、名前の方が近いように思っています。

さて、htmlファイルを持っているサーバーにもIPアドレスは割り振られていますが、そんな番号知らないですよね。

googleなら、172.217.24.131 です。ちなみに、ブラウザのアドレスバーに「http://172.217.24.131」と入力して、Enterキーを押すとgoogleのページが開きます。

どんなサーバにもアクセスするにはIPアドレスが基本的なのですが、必要ではありません。IPアドレスの代わりに、google.co.jpという人間に分かりやすい名前でアクセスできます。

なぜそんなことが出来ているかというと、DNSドメイン ネーム サーバー)のおかげです。

サーバーって「何らかの処理のリクエストを受けて、結果を返す機械」の総称なんで、いろいろなサーバーがあるんですね。

DNSgoogle.co.jp(name)を172.217.24.131(domain)へ変換する処理をしてくれています。

ブラウザは、URLを入力したり、リンクをクリックすると、まずDNSへ変換リクエストを送り、IPアドレスを返してもらいます。

帰ってきたIPアドレスを元に、webページのサーバーへ「トップページが欲しい」というリクエストを送ります。

f:id:s-uotani-zetakansu:20170919120641p:plain

レスポンス

サーバーはリクエスト内容をみて、「トップページが欲しいんだな、よしよし」といって、自分が持っているindex.htmlをブラウザへ送信します。

私の仕事でもある、webエンジニアやサーバサイドエンジニアは、ここの処理の部分をプログラミングしています。

一般的に、個人個人や時間や状態に関係するhtmlはそのものを持っているわけではなくて、サーバ側でhtmlファイルを作って、それをブラウザへ送信しています。

f:id:s-uotani-zetakansu:20170919121523p:plain

レンダリング

サーバからhtmlファイルをもらった状態では、まだ画面に表示されません。

次はブラウザのお仕事です。

htmlファイルや付属のjavascriptファイル、cssファイルを使って、ブラウザが画面を組み立てていきます。

組み立てるというのは、ブラウザが持っている部品(チェックボックス、プルダウンなど)を、htmlファイルを見ながら画面に並べていく処理のことです。

前置きが長くなってしまいましたが、「なぜブラウザによって見た目が違うのか」の答えは、「ブラウザによって持っている部品が違う」でした。

また、あんまり多く無いですが、新しい目のcssだと、そもそもブラウザがそれに対応する部品をもっていなくて、反映されないなども原因の一つです。

この場合は、代わりのcssをブラウザごとに用意して表示させています。

ブラウザがどの部品をもっていて、どの部品を持っていないのかは、こちらのサイトで確認することが出来ます。

画像取得

実はレンダリングして終わりじゃないんですね。

<img>などで画像などが埋め込まれているhtmlだと、レンダリング後にサーバにもう一度画像取得のリクエストを行います。

f:id:s-uotani-zetakansu:20170919145208p:plain

画像だけ最後にじわじわと描画されるのはこのためです。

さいごに

いかがでしたでしょうか。

分かりやすい説明を心がけたつもりですが、もし分かりにくい用語や説明がありましたら、教えてください。

読者登録をしていただけると、ブログを続ける励みになりますので、よろしくお願いします。