ネタページからWebページの構成技術基礎やブラウザ開発者ツールを勉強した記録
SNSで流れてきた広告サイトから技術を勉強してみた記録。
前置き
技術調査
どうすればこんなものが作れるかの調査と技術勉強。
とりあえずブラウザURLはずっと一緒のため、TopからオチまでJavaScriptやら、クライアントサイドでずっと頑張ってるんだろうなということくらいは予想がつ。いた
Webページの構成要素をおさらい
初心に戻って、現代のWebページを構成する主要要素について、Wikipedia見ながら自分の知識も加えておさらいしておく。
参考：
HyperText Markup Language - Wikipedia
ハイパーテキスト - Wikipedia
マークアップ言語 - Wikipedia
Cascading Style Sheets - Wikipedia
JavaScript - Wikipedia
HTML
| 現在の神(開発者) | WHATWG, W3C |
|---|
HyperText Markup Language.
直訳するようなものじゃなく「HyperText」の「マークアップ言語」。
何を、どんな構造で表示するかを担当する。
表示するテキストに加えて、ヘッダ、見出し、段落、テーブル(表)、リスト、画像/動画などのリソースといった文書構造をタグを利用して定義する。
現在世の中に普及している最新はHTML5。
CSS
| 現在の神(開発者) | W3C |
|---|
HTMLで定義した内容を、どのように見せるかを担当する。
テキストなら「文字の大きさ」「文字色」「フォント」等、構造面なら各要素の「表示位置」「配置枠の大きさ」「配置間隔」といった具体的なデザインを定義していく。
HTMLにデザイン定義用の拡張が入った時、デザイン定義はこいつの役割じゃないだろというポリシーの下、機能分離して提唱された。当然HTMLとは切り離せない関係。
現在世の中に普及している最新はCSS3。
JavaScript
| 現在の神(開発者) | Netscape Communications, Mozilla Foundation |
|---|
主にウェブブラウザ上で動作するスクリプト言語。ECMAScriptとして標準化されており、多くのブラウザがこれを実装している。
プログラミング言語なので実装次第で色々できる。よくあるのはHTMLを書き換えてページの表示内容を変更したり、同一ページの中でサーバと通信して情報をとってきたり…他にも様々。
フレームワーク、サーバサイド実行環境の充実など、周辺の動きも活発な印象。
Webページのために色々やる方向で使い倒す場合は、便利ライブラリのjQueryをセットで使うことが多い。
主要ブラウザのバージョン対応状況はまちまち、JavaScriptとECMAScriptで別個にバージョンが切られているなど、多くの人が利用できるのがどこまでか判断しにくい。
JavaScriptで言えば1.5～1.8あたり？
Mozillaが開発に関わっているためか、新バージョンへの対応はFirefoxが早いようだ。
調査に使うツール
- Firefox53.0.2 開発者ツール
- Chrome 開発者ツール
PC用のWebブラウザには、ページのソース表示、解析補助等に使うための開発者ツールがついているので、これを使って確認を進める。
表示方法は主要ブラウザ*1共通で「F12」となっている。
開発者ツールの機能
まずは基本機能としてツールでできることを一覧化する。
短時間でわかる概要まで。各機能の詳細までは深入りしない。
参考：開発ツール | MDN
これ書いたときの元ネタはFirefoxのもの。
Firefoxの機能名／Chromeでの対応機能名で一覧化。
インスペクター／Elements(要素)
MDNの説明：
ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。
HTMLやCSSなどページレイアウトを構成する要素を表示する。
もちろん単純なソース確認にも使用するが、値を編集すればそのまま表示に反映されるため、画面デザインを変えながらどのように収めるか検証したい時にも利用する。
「ページから要素を選択する」の機能をONにして表示ページにマウスカーソルを合わせると、指している箇所に対応するHTMLやCSSの要素へリンクしてくれる。これで表示要素がHTMLのどこに対応するか迷うことなく、確認することが
出来る。
多分今回の調査の主役。
コンソール／Console(同左)
MDNの説明：
ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。
通信/JS/CSSなどの分類で、警告/エラー/デバッグメッセージの確認ができる。
用途はブラウザが解析に失敗する記述ミスの確認や、JavaScript実行中のエラー情報、仕込んだデバッグログを確認する時など。
テキストエリアにJavaScriptを打ち込んで表示しているページに対して動作させることもできる。
デバッガー／Sources(ソース)
MDNの説明：
ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。
そのままJavaScriptデバッガ。
今のページで実行されるJavaScriptの確認とデバッグ実行が可能。
Chromeのやつはツール上で編集して画面操作→編集後の挙動検証なんてこともできたけど、Firefoxでこのやり方はわからなかった。
この手の機能をいちばん使ったのはスパゲッティでわけわからんソースの動きを解析しながらバグを直す時だった…
スタイルエディター／個別機能は無し(ChromeだとElementsで直編集)
MDNの説明：
現在表示しているページの CSS スタイルの閲覧や編集を行います。
CSSを中心に画面デザインを編集/変化をチェックしたい場合に活用するのかな。
自分の場合インスペクターで済むことが多いので、あまり活用したことはない。
※2017-05-31追記
ブログのデザインいじるために使ってみた。
ピンポイントならインスペクターで確認してもいいが、CSS編集したいならやっぱりこっちのほうが便利。
編集内容が即時ページに反映されるので、編集しながらデザインの変化を確認することができる。
パフォーマンス／Performance(同左)
MDNの説明：
サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。
サイト表示の時間軸に対して、ブラウザがどのような処理を行なっているかを取得/表示できる。
画面描画、JavaScript処理、CSS再計算、ガベージコレクトといった挙動が細かく表示されるので、開発サイトの動きがもっさりしてしまったとき、何がまずいのかチェックする時に活用できそう。
画面表示のフレームレート(fps)も表示されるが、この単位気にするのってゲームやるときぐらいだと思ってた。
メモリー／Memory(メモリ)
MDNの説明：
どのオブジェクトがメモリを使用し続けているかを明らかにします。
Javascriptでどのオブジェクトがどの程度容量を食ってるのかダンプ情報が見られるようだ。Javaで言えばヒープダンプ。
リソースカツカツになるくらいリッチな機能の実装や、重いJSライブラリ使用時にメモリ使用量がまずいレベルに上がってきたら活用できそう。あとはメモリリークした時の調査かな。
ネットワーク／Network（同左）
MDNの説明：
ページを読み込むときに実施したネットワーク要求を確認します。
ブラウザからWebへのリクエスト/レスポンス通信キャプチャが確認できる。
サーバサイドと連携の妥当性を確認、通信エラー解析や遅い/止まっている通信を見るときに利用する。
単純なページ遷移や、Formでの処理要求、Ajax等、サーバと通信しながら動く機能を開発するようなときはガンガン使う。
その他
デフォルトでタブが表示されたものだけ書いたが、その他にもまだまだある。
最近ならレスポンシブデザインモードで、スマホブラウザ表示のエミュレーションとかよく使う？
まずはここまで
調査環境の整理をつけたこのあたりで中断。
結局サイトを参考にした技術調査できてないやん…
ページの演出を構成する細かい技術要素については続きを作って書く。
