衆院選「開票速報」サイトはどのような技術で作られているのか
10月31日、第49回衆議院選挙ではさまざまなメディアが開票の様子を報じました。最近はWebサイトに特設ページが作られて、リアルタイムで各党の議席数が分かるようになっています。これを実現するためにどのような技術が使われているのか調べてみました。
（これらの情報はWebサイトのHTML、CSS、JavaScriptファイル、およびWebサーバーが返すレスポンスヘッダーをパッと見て調べたものです。詳細なデバッグや公式な情報に基づくものではありません）
NHK
衆議院選挙速報2021 開票速報・選挙結果 -衆院選- NHK
NHKは、半円グラフを与党側と野党側から塗りつぶしていき、ぶつかるアニメーションで比率を表現。各党の内訳も色分けして表示しています。Webサイトのフレームワークは「Vue.js」、グラフの描画にはHTMLの「Canvas」を利用。アニメーションなどのライブラリとして「PixiJS」を使っています。
Yahoo!ニュース
Yahoo!ニュースでは、半円グラフで与党と野党をシンプルに表示。内訳は左右に数字で表示しています。グラフはHTMLのCanvas、CDNはヤフーが運営しているものを利用しています。
選挙ドットコム
第49回 衆議院議員総選挙 ｜10月19日公示 31日投開票｜選挙ドットコム
選挙ドットコムは、横棒グラフを両側から塗りつぶしていくアニメーションで表現。各党の議席は色分けして表示しています。グラフはHTML要素として、アニメーションはCSSで実装。WebサイトにはVue.jsベースのフレームワーク「Nuxt」、CDNは「Amazon CloudFront」を利用しています。
日本経済新聞
衆議院選挙2021 最新ニュース・仕組み・歴史: 日本経済新聞
日本経済新聞は、与党と野党の議席数を大きく表示。棒グラフには内訳を示しつつ、党ごとの色分けはしないことで全体像をとらえやすくしています。グラフはHTML要素として描画。WebサイトのフレームワークにはVue.js、CDNはFastlyを利用しています。
朝日新聞
【2021年 衆院選】 トップページ | 朝日新聞デジタル | 衆議院議員選挙（2021年総選挙）特設サイト
朝日新聞は、横棒グラフを両側から塗りつぶしていき、両陣営の比率を表現。議席数の数字が跳ねるアニメーションが目を引きます。グラフはHTML要素、アニメーションはCSSによるもので、ライブラリとして「D3.js」も使っているようです。
読売新聞
【衆院選2021】衆議院議員総選挙 10月31日投開票 : 選挙・世論調査（選挙） : 読売新聞オンライン
読売新聞は半円グラフで与党、野党、その他を表現。公示前とも比較できるようにしています。グラフはベクター形式の「SVG」で描いており、議席数が飛び出してくるアニメーションはHTML DOMアニメーションをJavaScriptで呼び出しています。CDNはFastlyです。
毎日新聞
毎日新聞は、棒グラフを両側から塗りつぶしつつ、議席数をカウントアップするアニメーションが目を引きます。グラフはHTML要素で描画。WebサイトのフレームワークはVue.js、アニメーションのライブラリには「anime.js」を利用しています。
FNNプライムオンライン
FNNプライムオンラインは、半円グラフで与党と野党を2色でシンプルに表示。グラフには「Chartist.js」というJavaScriptライブラリを使っています。
産経新聞
産経新聞は、半円グラフに与党と野党を2色で表示。グラフと数字が同時にカウントアップするアニメーションが印象的です。グラフの画像はSVG。ライブラリには「jQuery」、Webサーバーには「OpenResty」を利用しています。
47NEWS
47NEWSは、与党と野党を大きく2色に分けて見やすく表示。グラフはダミーのGIFファイルを設定したimg要素に背景色を付け、伸ばすというもの。ライブラリはjQuery、CDNはAmazon CloudFrontです。
