少しお遊び要素を混ぜながら、今回はサイト上の値の取得に関してのお話を出来ればと思います！今回はそもそも「サイト上の値は取ったり、変えたり」という部分を理解してもらえればと思いますので、凄く簡単に紹介していきます。
目次
はじめに
最初に、少しお遊びのような記事になりますが、Webサイト上の値は取得することが出来るということを理解してもらいたいなと思います！これだけだと内容はかなり薄くなってしまいますが、サイトの上の値を取得したり、変更したりというのはWebサイトのみならず、アプリなどでも考え方は応用できるため、実は非常に重要な概念でもあります。それこそ、Google Analyticsなどに代表されるアクセスログの取得の際にも今回お話しする値の取得がベースとして必要となりますし、実際にアクセスログをサーバーに送信する際には、ログに必要な値をサイト上やアプリ上、ブラウザ等から取得し、その取得したデータをAPIでサーバーに送信するといった過程を踏みます。
では、この過程においての前半部分である「ログに必要な値をサイトやブラウザから取得」というのはどのように実施するのかという部分をこの記事で理解してもらえたらいいなと思います。長い記事になるため、2回に分けて、今回は前提知識編という形で位置付けて話していきます！
サイト上から値を取得する上での前提知識
今日は題材として、本サイト「デジタル社会を泳ぐイルカ」の記事一覧を例に考えていきましょう。
では、このページにおいて、「デジタル社会を泳ぐイルカ」というタイトルを取得するということを実現してみましょう。とはいえ、「どうやってそんなことするのでしょうか？」と疑問に思う方も多いかと思います。最初は、自分自身もそういう風に感じておりました。
ブラウザの開発者ツール
そこで登場するものが、ブラウザの開発者ツール（デベロッパーツール）になります。具体的には、ブラウザ情報でWebページをどのように編集するかという検証をするための開発者向けの検証ツールになります。実際にブラウザを開いた後で、F12キーや右クリックを押した後に「検証」を選択することで開くことが出来ます。（キャプチャ参照）
その開発者ツールでは何を確認することが出来るのかという部分をこの後ご紹介していきます。特に確認できること自体は、Webページの基本構成やブラウザとWebサーバー間のやりとり、cookieやWebStorageに格納されている情報などになりますので、まずはその周辺の前提知識を紹介していきます。
Webページの基本構成
最初に、前提知識として最も必要となるWebページの基本構成をご紹介できればと思います。まず、Webページというのは、HTML、CSS、JavaScriptという大きく3つのプログラム言語がメインとなって表現されているということを覚えておいてください。そして、この3つの内、HTMLがWebページの基本的な構成を作るものとなっております。ただ一方で、HTML単体は大項目、中項目、小項目、詳細等が箇条書きで書かれている質素な文章で、タグ「＜＞」というものを用いて表現される文章となっており、実際に皆さんが知っているWebページとは全然違うものとなっております。それをCSSは色や各文字や画像などオブジェクトの配置や色などを補填するような役割をもっており、これにより皆さんが知っているようなWebページの原型が出来てきます。ただ、これではサイトは静的で物足りない状態となっており、それを補完するものがJavaScriptとなっております。JavaScriptでは、サイトの上のオブジェクトの動きを表現したり、サイトの上の各値などを取得したり、埋め込んだり、数値の計算をしたりといった動的な状態を実現しております。
cookieとWebStorage
また、HTMLやCSS、JavaScriptの他に、今回サイト上から値を取得する上で、cookieとWebStorageというものも非常に重要な役割を担います。cookieもWebStorageもブラウザ上にある保存領域ですが、cookieであれば毎回ページを開くたびにcookieの情報がWebサーバー側に送信されたり、保存できる容量がそもそも4kBだったりという仕様が決まっております。反対に、WebStorageに関しては、LocalStorageとSessionStorageという2つの種類があり、cookieとは異なりどちらもページを開いたときに毎回送信される情報ではないともに、保存できる容量もLocalStorage、SessionStorageともに5MBとcookieに比べて遥かに大きな容量の値を保存することが出来ます。また、LocalStorageとSessionStorageの違いに関して、LocalStorageはウィンドウを閉じて再度開いたタイミングや別タブで合っても値が残り続けますが、SessionStorageではウィンドウを閉じたタイミングや別タブで値は参照できない形になります。加えて、WebStorageの場合には、保存時の「ドメイン」、「プロトコル」*1、「ポート」*2全てが同じ時のみ参照できる形になります。ただ一方で、cookieもWebStorageもデータの持ち方自体は同じでkey-valueの形式で値を持っております。*3
簡単にここまでのものをまとめると以下になります。
| 名称 | 別タブ・別ウィンドウでの値の保持 | 容量 | データ送信 | データ形式 |
|---|---|---|---|---|
| cookie | 可能 | 4kB | 毎回 | key-valueで値を保持 |
| LocalStorage | 可能 | 5MB | 都度 | key-valueで値を保持 |
| SessionStorage | 不可能 | 5MB | 都度 | key-valueで値を保持 |
ブラウザの開発者ツールで確認出来ること
では、ブラウザの開発者ツールにより、上にあげたようなHTML、CSS、JavaScriptやcookie、WebStorageはどのように確認できるのかということを次に共有していきます。
まず、HTML、CSS、JavaScriptからお話しできればと思います。これには前提がもう少し必要となりますが、Webページを構成する大元はあくまでもHTMLとなりますので、CSSやJavaScriptは実はHTMLにより呼びされるものとなります。特に、CSSはstyleというHTMLタグにより記述され、JavaScriptはscriptというHTMLタグにより記述されるものとなっております。それに加えて、styleやscriptは外部のファイルを参照することもできます。そのため、styleやscriptで外部ファイルを参照しない場合には、直にタグの中でCSSやJavaScriptのソースコードが記述されることになりますし、その反対に外部ファイルを参照する場合には、どこを参照するかという「src」（ソース）情報が記述されております。
では、開発者ツールのどこで確認できるのかという質問へ回答できればと思いますが、前者に関しては開発者ツール上の「要素」というメニューのみで確認できますし、後者に関しては「ソース」というメニューで対象となる「src」を探し出し、確認することになります。
では、次にcookieやWebStorageは、ブラウザの開発者ツールのどこから確認することが出来るのかというと、「アプリケーション」というメニューから確認することが出来ます。
そのため、実際に開発者ツールの「アプリケーション」メニューを開き、手動でcookieやWebStorageに格納されている値を書き換えようとすることも可能です。ただ、そんなことをしてもあまり意味がないと同時に、ログイン等が出来なくなる可能性もあるため、ご自身で適当なcookieやWebStorageを発行してみるようにしましょう。
さいごに
今回は、サイト上の値の取得における前提知識となる部分をご紹介してきましたが如何でしたでしょうか。
次回はWebページを構成しているJavascriptを実際に利用して、サイト上のHTMLに表示されている値やブラウザに保管されているcookieやWebStorageの値を取得することが出来ればと思います。