暮らしの技術

暮らしを豊かにする技術や、特に暮らしを豊かにしない技術があります

フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ

700億円ほどのお金がかかっているといわれ,why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした.投票日と言うことはその後に来るのは開票で,開票と言うことは開票速報がはじまるわけです.

報道各社を見てみますと,各々工夫を凝らした開票速報ページを用意しておりまして,これがなかなかおもしろいということで,その比較でございます.

まとめ

長いので先にまとめです.

まずテレビと新聞で圧倒的に態度が違います.テレビはあくまで番組の補助だったり宣伝が目的.ウェブページではあまり情報を出したくない様子です.一方新聞各社は トップページ上段,ファーストビューのど真ん中を思いっきり使い,文字通り全面展開といったパターンが多い.

フロントエンドの実装から見ると,基本的にグラフが必要な場面ではCSS,日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶対配置」での描画を行っています.例外は読売新聞がグラフの描画にSVGを利用しているところと,日経新聞がグラフ描画と日本地図への当選議員のプロットにcanvasを利用しているあたりですね.

また,最近注目されている双方向/リアルタイム通信ですが,今回の選挙では積極的に使われているという感じではありませんでした.多くの特設ページは読み込んだ後基本的に情報が更新されない仕様で,一部のサイトでは随時情報の書き換えを行っていましたが,基本的にはAjaxでのポーリングということで,まあお前ら何年前から進歩してねえんだよといった具合でございます.

あまり最新の技術といったところにこだわらず,確実に閲覧できることを重要視していることが窺えますね.やはり報道をやっているという矜持でしょうか.

確認した新聞社/テレビ局

  • 新聞社
    • 産経
    • 中日
    • 日経
    • 毎日
    • 朝日
    • 読売
開票速報ページにおける見所ガイド

開票速報ページにおける見所としては

  • 与野党が占める議席数をどう見せるか
    • とくにグラフを用いるときの実装
  • 各区の当確候補をどのように見せるか
    • 特に日本地図にプロットする際の実装
  • リアルタイムなところをどこまで作り込むか

と言ったところでしょうか.それでは各社の特設ページを見ていきましょう! Go!

産経

今回調べた新聞社の中では中間的な作りのページでした.

f:id:side_tana:20141214233935p:plain
まずトップページ.選挙一色.右側ペイン上部に特設ページへのリンク
f:id:side_tana:20141214234212p:plain
特設ページのファーストビュー.
f:id:side_tana:20141215000037g:plain
グラフの部分は非同期に読み込んでいるようで,ページの読み込みからワンテンポ遅れて表示されたあと,にょーんとアニメーションして表示されます.
f:id:side_tana:20141214233937p:plain
CSSによる実装.
f:id:side_tana:20141214233939p:plain
日本地図はtableタグで組み立てられていてシンプル.北海道の位置はもうちょっと何とかできたんじゃ無いかなって気がします.

中日

中日新聞の特設ページは今回調べた中では一番シンプルな感じ.

f:id:side_tana:20141214233940p:plain
トップページ記事の下に特設ページへのリンク
f:id:side_tana:20141214233941p:plain
特設ページのファーストビュー.他紙のページと違い,日本地図が中心のレイアウト.
で,その日本地図は
f:id:side_tana:20141214233943p:plain
f:id:side_tana:20141214233942p:plain
こういった画像が用意されている.各県毎に幅と高さの指定されたブロック要素が絶対指定で配置されていて,その中にインライン要素を詰めていく方式.あんまり作りたいとは思わないですね.とはいえ誰かがやらねばならぬ.お疲れ様です.ちなみに各県に放り込まれている要素ですが,クリックなどはできません.まあ来年あたりこれは「ホバーで当選した候補の情報出したいんだけど」とか言われますね.あと「区の番号順に当確出したいから,『自□□民□』って表示できるようにして」とかね.お疲れ様です.

日経

日経! 日経と言えばCanvasです.とにかくCanvasという感じ,ちなみに今回調べた中でCanvasを使っていたのはフジテレビと日経だけでした.フジテレビはHTML/CSS中心で補助的にCanvasを使うに留まっていたので,Canvasメインでごりごりやっていたのは日経だけです.また,定期的にelection_graph.jsonを叩いてグラフの内容を更新してます.偉い! かなりゴージャスな作りって感じです.

f:id:side_tana:20141214233946p:plain
トップページから開票感全快.
f:id:side_tana:20141214233947p:plain
特集ページに移動してもそんなに差が感じられない.
f:id:side_tana:20141214233944g:plain
グラフはこんな感じにアニメーション.
f:id:side_tana:20141214233945p:plain
実装はcanvas
f:id:side_tana:20141214233948p:plain
日本地図はこんなかんじ.かなり作り込まれていて,各県をクリックすると拡大され,色分けされた選挙区にマウスオーバーすると左下に当選した議員の名前が出る,
f:id:side_tana:20141215002412p:plain
正直まだ疑ってるんだけれど,どうやらこの拡大した選挙区もCanvasに描画しているらしい.まじかよ.47都道府県分用意したのか,正気とは思えん.まだJSまでちゃんと見れてないのですが,とりあえずDOMを見た感じ,それらしいDOMは発見できず→え,まじでCanvasなの……って感じです.

毎日

グラフはCSSでの実装で,日本地図も要素の絶対配置ですが,1分に一度議席の数などを取得し,画面上へ反映しています.新聞社でこの対応が確認できたのは日経と毎日だけなので,金かけてるなーという印象があります.

f:id:side_tana:20141215002702p:plain
トップページ.左上の普段「毎日新聞」とか出てるであろう場所 + ページ中央に特設ページへのバナー.
f:id:side_tana:20141215002703p:plain
特設ページはこれ.グラフはアニメーション付きです.
f:id:side_tana:20141215002701g:plain
こんな感じ.
f:id:side_tana:20141215002704p:plain
グラフの実装は産経と同じCSSでの実装.
f:id:side_tana:20141215002705p:plain
f:id:side_tana:20141215002706p:plain
日本地図は産経と同じtable……ではなく絶対位置指定でごりごり配置してます.
f:id:side_tana:20141215002707p:plain
47都道府県ばっちりあるのがわかりますね.

朝日

新聞社の中ではダントツの力強さというか,男らしさみたいなのがあったのが朝日新聞です.リアルタイムに値を書き換える必要がある箇所については全てiframeにし,それを定期的に更新する,以上.シンプル・イズ・ベストといった感じ,私は思わず,荒れる冬の日本海に向かって褌一丁で立つ男を思い浮かべてしまいました.

f:id:side_tana:20141215010131p:plain
右ペインに特設ページへのリンクが.あとグラフももうでてますね.当然ですがこれもiframeです,
f:id:side_tana:20141215010132p:plainf:id:side_tana:20141215010134p:plain
はい.iframeです.
f:id:side_tana:20141215010133p:plain
ちなみにグラフは画像をCSSによる実装.他紙とは少しだけちがっていて,他多くがdivやspanにbackground-imageでつけた背景画像を幅いっぱい繰り返すのに対し,朝日の使っている方法が画像の引き延ばしになります.単色の画像を使う場合影響ないし,どうでもいいですね.
f:id:side_tana:20141215010135p:plain
日本地図へのプロットは画像にmapで部分リンクを設定するスタイル.
f:id:side_tana:20141215010136p:plain
こんな感じでホントにそのままの画像が来る.裏で画像作ってる人がいるわけです.お疲れ様です.

読売

読売!! 読売といえばSVGです! 地図上へのプロット他紙とにた方式ですが,これもかなり作り込まれていて,日経新聞と同じかそれ以上のゴージャスさという感じです.

f:id:side_tana:20141215002709p:plain
トップページ.日経と同じぐらい選挙一色ですね.グラフ右上の「衆院選2014」のすぐ下に特設ページへのリンクがある.
f:id:side_tana:20141215002710p:plain
特設ページ.この中央がッ!! SVG!!!
f:id:side_tana:20141215002708p:plain
f:id:side_tana:20141215005043g:plain
そしてSVGならではの!!! 動き!!!
f:id:side_tana:20141215002712p:plain
ただし,SVGで描画しているのはグラフの扇形の部分だけで,他は要素をごりごり動かしてるって感じです.

また日本地図も丁寧に作られていて,
f:id:side_tana:20141215002713p:plain
ぱっと見は中日と同じようにみえますが,こちらは各県の枠もDOMで表現されています.
f:id:side_tana:20141215002714p:plain
また,[自]のようなアイコンをホバーすると当選議員の名前が表示され,
f:id:side_tana:20141215002715p:plain
しかも必ず日本地図の中央に向かって表示され,画面端でもはみ出さないようになってます.

NHK

NHKの特徴としては「グラフはサーバで生成」「日本地図など不要」といった,これも非常に男らしい戦略ですね.
f:id:side_tana:20141215005742p:plain
f:id:side_tana:20141215005746p:plain
円形のグラフはサーバで生成している.定期的に同じリソースをJSで取りに行っていて,サーバ側ではデータを差し替えるだけ,という設計.
f:id:side_tana:20141215005750p:plain
そして「日本地図など不要」,正直日本地図と正面からバトルするの絶対避けたいという気持ちがあって,これが一番穏やかに回避してると思います.

日本テレビ

f:id:side_tana:20141215011532p:plain
トップページに特に情報は無く,放送中の番組のページに行くと開票速報が見られます.
f:id:side_tana:20141215011529p:plain
こういう感じ.
f:id:side_tana:20141215011531p:plain
グラフはCSSでの実装.
f:id:side_tana:20141215011530p:plain
このページにも日本地図にプロットする箇所があるのですが,ZEROでは画像を配布し,mapでの部分リンクを利用しています.朝日新聞と同じですね.

フジテレビ

f:id:side_tana:20141215011533p:plain
今回調べた民放は二社ともトップページへの告知はありませんでした.番組制作の裏側的なアレな感じがしますね.実際,番組のページに行くと開票速報が見れるのですが……
f:id:side_tana:20141215011534p:plain
今回は番組トップからさらにワンクリックあった
f:id:side_tana:20141215011535p:plain
このグラフが結構面白くて,注目したいのは「公示前」と「今回」の間の部分.こういった斜めの線を引きたい場合,

  • CSS3のtransfromで気合い入れる
  • Canvasを使う
  • SVGを使う
  • 画像を生成する

といった戦略があるわけですが,FNN衆院選2014ではCanvasを使って描画する,といった戦略をとっています.ここの斜めのためだけにCanvasがあります.これは僕の勝手な推測なんですが,たぶん最初はこの部分のグラフだす予定無かったんじゃないですかね.それであとから「ここ繋いだ方がわかりやすいじゃん!」とか言われて,Canvasで繋ぐはめに……みたいな…….だってどうせCanvas使うなら最初から使うでしょ.違うかなあ.まあ違うかもしれん.
f:id:side_tana:20141215011536p:plain
日本地図は画像+mapでの部分リンク.しかも各地区の当選者などの情報が一切無いので,あとから画像を差し替える手間がなく,リーズナブルな感じ.

まとめ

冒頭に書いたとおり

感想

この記事を書こうと思ったキッカケが「読売新聞がSVG使ってるぞ!!!」だったので,調べているウチに「な〜んだ,おもしろいのは読売と日経,フジテレビだけかあ」となりつつあったのですが,その後「日本地図」という新たな問題を発見してしまい,なるほどやっぱりこれはおもしろいぞ〜〜となった次第.