雑多に技術メモと他色々

主に自分用な技術メモが多くなる気がする。他色々が書かれるかどうかは不明。

「永遠ちゃんねる」からWebページの技術を勉強する1

SNSで流れてきた広告サイトから技術を勉強してみる記録。

前置き

きっかけ

Twitterリツイートなんかで
不老不死専用の掲示板「永遠ちゃんねる」 という広告サイトの話題が流れてきた。
話題になるだけあり、なかなか演出は凝った作りだなーと思ったので、フロントエンド技術が弱い自分の勉強がてら技術要素を確認する記録。

きっかけとなったページはこちら。株式会社アドプールドが運営するコンテンツの広告サイトです。
naruhodo-aojiru.com

気になるサイトの挙動

キャプチャは著作権云々も気になるので、とりあえず文章で。ぶっちゃけアクセスしてみてみるのが早い。

画面遷移の再現

入場クリックでまとめサイト風画面に移るあたり。

強制スクロール

画面スクロールして読み進めていくと、強制で高速スクロールが発生する。

砂嵐背景

背景が砂嵐画面のような表示のデザインに変化するあたり。

ターミナル打ち込みのような演出

最後のほう、緑色の文字で書き込みが表示される。Linuxターミナルのようなデザインで、勝手に文字が打ち込まれていく演出がされてる。
画面スクロールすると同じ演出で書き込みが追加されていく。

本題の技術調査

ということで本題はどうすればこんなものが作れるかの調査と技術勉強。
とりあえずブラウザ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

Cascading Style Sheets.

HTMLで定義した内容を、どのように見せるかを担当する。
テキストなら「文字の大きさ」「文字色」「フォント」等、構造面なら各要素の「表示位置」「配置枠の大きさ」「配置間隔」といった具体的なデザインを定義していく。
HTMLにデザイン定義用の拡張が入った時、デザイン定義はこいつの役割じゃないだろというポリシーの下、機能分離して提唱された。当然HTMLとは切り離せない関係。

現在世の中に普及している最新はCSS3。

JavaScript
現在の神(開発者) Netscape Communications, Mozilla Foundation

プログラミング言語。「Javaとは別」はIT屋の常識。

主にウェブブラウザ上で動作するスクリプト言語ECMAScriptとして標準化されており、多くのブラウザがこれを実装している。
プログラミング言語なので実装次第で色々できる。よくあるのはHTMLを書き換えてページの表示内容を変更したり、同一ページの中でサーバと通信して情報をとってきたり…他にも様々。
フレームワーク、サーバサイド実行環境の充実など、周辺の動きも活発な印象。
Webページのために色々やる方向で使い倒す場合は、便利ライブラリのjQueryをセットで使うことが多い。

主要ブラウザのバージョン対応状況はまちまち、JavaScriptECMAScriptで別個にバージョンが切られているなど、多くの人が利用できるのがどこまでか判断しにくい。
JavaScriptで言えば1.5~1.8あたり?
Mozillaが開発に関わっているためか、新バージョンへの対応はFirefoxが早いようだ。

調査に使うツール

  • Firefox53.0.2 開発者ツール

PC用のWebブラウザには、ページのソース表示、解析補助等に使うための開発者ツールがついているので、これを使って確認を進める。
表示方法は主要ブラウザ*1共通で「F12」となっている。

開発者ツールの機能

まずは基本機能としてツールでできることを一覧化する。
短時間でわかる概要まで。各機能の詳細までは深入りしない。

参考:開発ツール | MDN

インスペクター

MDNの説明:
ページの内容やレイアウトを、閲覧および編集します。ボックスモデル、アニメーション、グリッドレイアウトなど、さまざまな観点でページを視覚化します。

HTMLやCSSなどページレイアウトを構成する要素を表示する。

もちろん単純なソース確認にも使用するが、値を編集すればそのまま表示に反映されるため、画面デザインを変えながらどのように収めるか検証したい時にも利用する。
「ページから要素を選択する」の機能をONにして表示ページにマウスカーソルを合わせると、指している箇所に対応するHTMLやCSSの要素へリンクしてくれる。これで表示要素がHTMLのどこに対応するか迷うことなく、確認することが出来る。
多分今回の調査の主役。

コンソール

MDNの説明:
ウェブページが記録したメッセージの閲覧や、JavaScript を使用してページとの対話を行います。

通信/JS/CSSなどの分類で、警告/エラー/デバッグメッセージの確認ができる。

用途はブラウザが解析に失敗する記述ミスの確認や、JavaScript実行中のエラー情報、仕込んだデバッグログを確認する時など。
テキストエリアにJavaScriptを打ち込んで表示しているページに対して動作させることもできる。

デバッガー

MDNの説明:
ページで実行している JavaScript の停止、ステップ実行、調査、変更を行います。

そのままJavaScriptデバッガ。
今のページで実行されるJavaScriptの確認とデバッグ実行が可能。

Chromeのやつはツール上で編集して画面操作→編集後の挙動検証なんてこともできたけど、Firefoxでこのやり方はわからなかった。
この手の機能をいちばん使ったのはスパゲッティでわけわからんソースの動きを解析しながらバグを直す時だった…

スタイルエディター

MDNの説明:
現在表示しているページの CSS スタイルの閲覧や編集を行います。

CSSを中心に画面デザインを編集/変化をチェックしたい場合に活用するのかな。
自分の場合インスペクターで済むことが多いので、あまり活用したことはない

※2017-05-31追記
ブログのデザインいじるために使ってみた。
ピンポイントならインスペクターで確認してもいいが、CSS編集したいならやっぱりこっちのほうが便利。
編集内容が即時ページに反映されるので、編集しながらデザインの変化を確認することができる。

パフォーマンス

MDNの説明:
サイトの全体的な応答性、JavaScript やレイアウトのパフォーマンスを分析します。

サイト表示の時間軸に対して、ブラウザがどのような処理を行なっているかを取得/表示できる。

画面描画、JavaScript処理、CSS再計算、ガベージコレクトといった挙動が細かく表示されるので、開発サイトの動きがもっさりしてしまったとき、何がまずいのかチェックする時に活用できそう。
画面表示のフレームレート(fps)も表示されるが、この単位気にするのってゲームやるときぐらいだと思ってた。

モリー

MDNの説明:
どのオブジェクトがメモリを使用し続けているかを明らかにします。

Javascriptでどのオブジェクトがどの程度容量を食ってるのかダンプ情報が見られるようだ。Javaで言えばヒープダンプ。

リソースカツカツになるくらいリッチな機能の実装や、重いJSライブラリ使用時にメモリ使用量がまずいレベルに上がってきたら活用できそう。あとはメモリリークした時の調査かな。

ネットワーク

MDNの説明:
ページを読み込むときに実施したネットワーク要求を確認します。

ブラウザからWebへのリクエスト/レスポンス通信キャプチャが確認できる。

サーバサイドと連携の妥当性を確認、通信エラー解析や遅い/止まっている通信を見るときに利用する。
単純なページ遷移や、Formでの処理要求、Ajax等、サーバと通信しながら動く機能を開発するようなときはガンガン使う。

その他

デフォルトでタブが表示されたものだけ書いたが、その他にもまだまだある。
最近ならレスポンシブデザインモードで、スマホブラウザ表示のエミュレーションとかよく使うんじゃない?

要素を確認してみる挙動は

どのように実現してるか、確認したい部分をピックアップする。

  • Topページからスレッド内への画面遷移
  • 読み進めることで発火する強制画面スクロール
  • 背景やフォントなどデザインの変化
  • 砂嵐の背景
  • TV電源切れのような表示
  • 順次追加されるターミナル打ち込み演出

まずはここまで

調査環境の整理をつけたこのあたりで中断。
結局サイトを参考にした技術調査できてないやん…
ページの演出を構成する細かい技術要素については続きを作って書く。

*1:IE(Edge), Chrome, FirefoxWindowsユーザなのでSafariはのけものにします。