弱小システム屋が使う技術メモと他色々

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

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

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

前置き

きっかけ

Twitterリツイートなんかで

不老不死専用の掲示板「永遠ちゃんねる」

という広告サイトの話題が流れてきた。
話題になるだけあり、なかなか演出は凝った作りだなーと思ったので、フロントエンド技術が弱い自分の勉強がてら技術要素を確認する記録。

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

サイトの挙動

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

Topページ

アクセスすると中央に「永遠ちゃんねる」のロゴ画像。
1000年以上生きている人のみ入場しろという無茶ぶり、そして入場ボタン。
2ちゃんねるの丸パクrを参考にしたと思われるTopページが表示される。

まとめサイト風の画面に遷移

入場すると記事タイトルが表示されたまとめサイト風画面に移る。
一覧表示もなく記事に飛ぶ、とか
なんでTopは2chなのに中身はまとめサイトやねん、とか
突っ込みどころはあるものの、よくあるまとめサイト風広告という印象。
エロいアプリとかの詐欺広告でよく見るよねこういうやつ。
ぬこ画像やらジョジョネタやらで、まあまあそれっぽさは出てるか。

強制スクロールの後、未来の書き込み

画面スクロールして読み進めていくと、強制で高速スクロールが発生。
中央に表示される年数が増えていって、2354年の書き込み(風)画面へ。
背景や文字色など、全体的にデザインが変わる。
この演出で、よく見るものよりは凝った内容であることに気がつく。
ジョジョは連載中で215部以上続くらしい。石仮面かぶってるから仕方ないね。

さらに未来、砂嵐背景と地球がヤバイ

さらに読み進めていくと、再度強制スクロール。
今度は3045年に飛ぶ。背景が砂嵐画面のような表示のデザインに変化。
書き込みは地球の危機的状況を騒ぎたてるものになる。

電源切れとターミナル打ち込みのような演出

強制スクロールで「おわたああああ」と何かが起きた書き込みが大量に流れ、
TV電源が切れたような表示から黒背景に変化。
しばらくすると緑色の文字で書き込みが表示される。
Linuxターミナルのようなデザインで、文字が打ち込まれていく演出。
スクロールすると同じ演出で書き込みが追加されていく。
書き込み者は植物が芽を出す姿(画像)を見て、新しい命に身を捧げ消えるというストーリーだそうな。

オチ

大きく「命乙」の書き込みが表示された後、植物の芽が成長していく画像が表示。
そして背景が明るくなったあとに…

「不老不死は無理だけど健康のことが気になるなら」
「青汁の比較サイトをチェック」

というわけで青汁比較サイトよろしく、というオチで完結。
比較サイトってことは広告サイトの広告?なんかややこしい。

まあドメインなるほど青汁ドットコム だったしね。
さすがにeternalch.comとか買ってはいないみたいだしね。

本題の技術調査

長々とサイトのこと書いてしまったけど、ここまではただの前置き。
本題はどうすればこんなものが作れるかの調査と技術勉強。
とりあえずブラウザ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はのけものにします。