【興味本位です。】abemaTVですが、どのような仕組みで運営しているのでしょうか

abemaTVですが、どのような仕組みで運営しているのでしょうか

今日abematvのソースを見たのですが、非常に他のサイトと比較して少ないと感じました。

また、動画をどこで読み込んでいるのかわかりませんでした。

なので、
１，こういう動画を放送する仕組み
２，どこで動画を読み込んでTOPに表示させているのか
3、このような動画サイトを作る場合に適切な言語

の3点の見解をお伺いしたいです。

興味本位で恐縮ですが何卒宜しくお願い致します。

html
1<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><script type="text/javascript">var _prum = [['id', '574e8ba7abe53db20283c888'],
2  ['mark', 'firstbyte', (new Date()).getTime()]];
3(function () {
4  var s = document.getElementsByTagName('script')[0]
5    , p = document.createElement('script');
6  p.async = 'async';
7  p.src = '//rum-static.pingdom.net/prum.min.js';
8  s.parentNode.insertBefore(p, s);
9})();</script><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>AbemaTV（アベマTV） | インターネットテレビ局</title><meta name="description" content="AbemaTVは無料でテレビ番組が見れるインターネットテレビ局です！"><meta property="fb:pages" content="753535201446992"><meta property="fb:app_id" content="1663147913953451"><meta property="og:site_name" content="AbemaTV"><meta property="og:title" content="AbemaTV（アベマTV） | インターネットテレビ局"><meta property="og:url" content="https://abema.tv/"><meta property="og:image" content="https://hayabusa.io/abema/assets/splash.v1.w800.png"><meta property="og:description" content="AbemaTVは無料でテレビ番組が見れるインターネットテレビ局です！"><meta property="og:type" content="website"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:site" content="@abematv"><meta property="twitter:url" content="https://abema.tv/"><meta property="twitter:image" content="https://hayabusa.io/abema/assets/splash.v1.w800.png"><meta property="twitter:description" content="AbemaTVは無料でテレビ番組が見れるインターネットテレビ局です！"><meta property="twitter:title" content="AbemaTV（アベマTV） | インターネットテレビ局"><meta property="al:android:url" content="abematv://"><meta property="al:android:package" content="tv.abema"><meta property="al:android:app_name" content="AbemaTV"><meta property="twitter:app:country" content="JP"><meta property="twitter:app:name:iphone" content="AbemaTV"><meta property="twitter:app:id:iphone" content="1074866833"><meta property="twitter:app:url:iphone" content="https://abema.tv/"><meta property="twitter:app:name:ipad" content="AbemaTV"><meta property="twitter:app:id:ipad" content="1074866833"><meta property="twitter:app:url:ipad" content="https://abema.tv/"><meta property="twitter:app:name:googleplay" content="AbemaTV"><meta property="twitter:app:id:googleplay" content="tv.abema"><meta property="twitter:app:url:googleplay" content="abematv://"><link rel="stylesheet" href="/app.css"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"><style type="text/css">@font-face{
10font-family: Ameba Typo;
11src: url("/fonts/AmebaTypo-Regular.woff2") format("woff2"),
12     url("/fonts/AmebaTypo-Regular.woff") format("woff");
13}</style><!-- for iPhone 6 Plus with iOS8--><link rel="apple-touch-icon-precomposed" size="180x180" href="https://hayabusa.io/abema/assets/img_icon.w180.h180.png"><!-- for iPad with iOS7--><link rel="apple-touch-icon-precomposed" size="152x152" href="https://hayabusa.io/abema/assets/img_icon.w152.h152.png"><!-- for iPhone with iOS7--><link rel="apple-touch-icon-precomposed" size="120x120" href="https://hayabusa.io/abema/assets/img_icon.w120.h120.png"><!-- for iPhone with iOS6--><link rel="apple-touch-icon-precomposed" size="114x114" href="https://hayabusa.io/abema/assets/img_icon.w114.h114.png"><!-- for non-retina iPad with iOS7--><link rel="apple-touch-icon-precomposed" size="76x76" href="https://hayabusa.io/abema/assets/img_icon.w76.h76.png"><!-- for non-retina iPhone, iPod Touch, and Android 2.1+ devices--><link rel="apple-touch-icon-precomposed" href="https://hayabusa.io/abema/assets/img_icon.w57.h57.png"></head><body><!-- Google Tag Manager--><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TDKDXJ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><script src="//d2wy8f7a9ursnm.cloudfront.net/bugsnag-2.min.js" data-apikey="3e69f3ca81eeeb19721616ed8b7b87ab"></script><script type="text/javascript">Bugsnag.releaseStage = 'production';</script><script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
14new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
15j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
16'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
17})(window,document,'script','dataLayer','GTM-TDKDXJ');</script><!-- End Google Tag Manager--><!-- Facebook plugin--><div id="fb-root"></div><script type="text/javascript">(function(d, s, id) {
18  var js, fjs = d.getElementsByTagName(s)[0];
19  if (d.getElementById(id)) return;
20  js = d.createElement(s); js.id = id;
21  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=1663147913953451";
22  fjs.parentNode.insertBefore(js, fjs);
23}(document, 'script', 'facebook-jssdk'));</script><!-- End Facebook plugin--><!-- Twitter plugin--><script type="text/javascript">!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><!-- End Twitter plugin--><!-- Google+ plugin--><script type="text/javascript" src="https://apis.google.com/js/platform.js" async defer>{lang: 'ja'}</script><!-- End Google+ plugin--><!--[if lt IE 8]>
24<p class="browsehappy">ブラウザを最新にしてください. <a href="http://browsehappy.com/">ブラウザの更新方法</a></p>
25<![endif]--><div id="main"><strong>Javascriptを有効にしてください</strong></div><div id="announcer" style="position: absolute; height: 1px; overflow: hidden;"></div><img src="//sy.ameblo.jp/sync/?org=sy.abema.tv" width="1" height="1" style="position: absolute; top: -9999px; left: -9999px;"><script type="text/javascript">document.getElementById("main").textContent = "";
26__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script><script type="text/javascript" src="/main.js"></script><script type="text/javascript" src="//cdn.theoplayer.com/latest/0347c1c0-3cba-489f-9693-3559a33593a5/theoplayer.loader.js"></script></body></html>

行動規範の内容に同意します

回答2件

他のサイトと比較して少ない？いえいえ、かなり多い方ですよ。Webページ一つあたりのデータ量は単純にそのソースコードを見ただけではわかりません。もし、どれだけのデータ量なのか知りたければ、開発ツールを使ったり、「ウェブページ、完全」として保存してみないとわかりません。AbemaTVですとストリーミングしているデータも一緒に取ってしまいますが、それを除外しても約3.7MBでした。ついでにYahooのトップページは約1.2MBです。

１，こういう動画を放送する仕組み

HTML5のvideoまたはFlash Playerを使います。AbemaTVの場合はブラウザやFlash Playerの有無によって切り替わるようになっているようです。Youtubeも同じような仕組みです。逆にニコニコ動画はFlash Playerのみです。

HTML5のvideoは比較的新しい機能のため、古いブラウザは対応していません。対して、Flash Playerは古くからありますが、最近は入れなかったり無効にしたりする場合が多くなっています。ですので、両方対応するというのが多くなっているようです。

２，どこで動画を読み込んでTOPに表示させているのか

このようなサイトはJavaScriptで動的にHTMLを作り上げています。ですので、HTMLのソースをどれだけ眺めてもわかりません。各ブラウザの開発ツールを使うとHTMLのDOM構造がわかりますので、そこにvideo要素またはFlash Playerを読み込むobject要素があることが確認できます。

3、このような動画サイトを作る場合に適切な言語

Webサービスを提供するサイト全般に言えることですが、ブラウザで動作するクライアントサイドと、サーバで動作するサーバサイドに分かれます。

AbemaTVのような場合ですと、HTML自体はほとんどなにもありません。そこで、クライアントサイドの言語がHTMLを作り上げます。そのとき、サーバから番組情報などを取得して、柔軟にメニューを変えたりしています。ボタンを押した場合も、クライアントサイドでどう動作するのかを決めて、HTML自体を動的に変更しています。

サーバサイド側は何をしているかというと、そういった番組表とかを返す処理をしています。当たり前ですが、管理者が番組表をどこかで入力しています。その番組表をサーバ内でデータとして持ち、クライアント側の問い合わせに対して適切な形で返します。現在日時によって返すべき値も変わりますから、そういった処理をしているということです。他にも色んな処理をしています、例えば有料プランかどうかの判別して、オンデマンド放送ができるできないを返したりすることです。

クライアントサイドはJavaScript一択です。全てのブラウザで動作する言語はJavaScript以外存在しません(IEのみで対象であればVBScriptも使えますが)。しかし、必ずしもJavaScriptをJavaScriptとしてコーディングしなければならないというわけではありません。JavaScriptに変換できる言語(いわゆるaltJS)もたくさんあります。JavaScriptのままコーディングするのか、altJSを使うべきか、はたまたどのaltJSを使うべきかは状況によって異なるため、一概に言えません(大規模向けの現在の人気はTypeScriptのようですが)。

サーバサイドは自由です。Java、Scala、Kotlin、Clojure、Perl6、Python、PHP、Ruby、JavaScript(node.js)、C#、VB.NET、Erlang、Elixir、Go、Rustなどなど、汎用プログラミング言語であればほとんどどれでも使えます(ただ、なぜかC/C++は少ないです)。これもどれが最適なのかはそのときそのときによって異なるため一概に言えません。スタートアップ最速にするならRailsとあわせてRubyが良いかもしれませんし、後々のスケールアウトを考えてPlayとあわせてScalaも良いでしょう。いやいや、並列処理を考えればErlangやElixirを使うというのもあります。動画サイトというコンテンツの内容よりは、市場の大きさ、予算、開発チームの練度、想定される利用者数、などによっても適切な言語が変わってきます。

投稿2016/10/19 14:39

raccy

総合スコア21741

growthposition

2016/10/19 15:18

詳細なご意見ありがとうございます。こちらのご教示頂いた内容を読むだけで、いくつも知らないことが出てきており勉強になりました。本来、一流のエンジニアであればやはり市場の大きさ、予算、開発チームの練度、想定される利用者数なども含めて言語を学ばなければいけないんですね。貴重なご意見ありがとうございます！！

行動規範の内容に同意します

”abematvのソース”の表記で釣られて見てみました。これはサーバーサイドでJava系のスクリプトなどで処理していて、ブラウザーの負担を極力減らすコードですね。abematv自体はデータ量の多いリクエストを処理するために分散サーバー上でJavaスクリプトやビデオストリームの処理で対応されてると思います。
ブラウジングソースが小さい＝負荷を小さくする。と考えますが。。

投稿2016/10/19 10:54