質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.69%

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

受付中

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 2,621

growthposition

score 96

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

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

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

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

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

興味本位で恐縮ですが何卒よr

<!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'],
  ['mark', 'firstbyte', (new Date()).getTime()]];
(function () {
  var s = document.getElementsByTagName('script')[0]
    , p = document.createElement('script');
  p.async = 'async';
  p.src = '//rum-static.pingdom.net/prum.min.js';
  s.parentNode.insertBefore(p, s);
})();</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{
font-family: Ameba Typo;
src: url("/fonts/AmebaTypo-Regular.woff2") format("woff2"),
     url("/fonts/AmebaTypo-Regular.woff") format("woff");
}</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':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(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) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.5&appId=1663147913953451";
  fjs.parentNode.insertBefore(js, fjs);
}(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]>
<p class="browsehappy">ブラウザを最新にしてください. <a href="http://browsehappy.com/">ブラウザの更新方法</a></p>
<![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 = "";
__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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/10/19 20:38

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 2

+3

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

1,こういう動画を放送する仕組み 

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

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

2,どこで動画を読み込んで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/20 00:18

    詳細なご意見ありがとうございます。
    こちらのご教示頂いた内容を読むだけで、いくつも知らないことが出てきており勉強になりました。

    本来、一流のエンジニアであればやはり市場の大きさ、予算、開発チームの練度、想定される利用者数なども含めて言語を学ばなければいけないんですね。

    貴重なご意見ありがとうございます!!

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/19 22:33

    ありがとうございます。
    サーバーを分散させているのですね。
    勉強になります。

    java系のスクリプトやビデオストリームなど初めてききました
    調べてみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.69%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる