motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

意外と簡単、テキストLIVE配信の仕組み

f:id:motagp:20151110170150j:plain 今シーズン使い始めたテキスト速報の仕組みを説明します。

簡単に導入出来て、皆様のはてなブログで利用可能。
はてな以外でもjavaScriptが動作すれば動きます)

目次

 

それなに?どんな機能

LIVEって言ってるぐらいなので、表示したいページに、テキスト情報をリアルに表示する仕組みです。
見せたい相手に、1つのページアドレスを教えるだけで、速報を表示し続ける事が可能。
プロ野球のLIVE速報の簡易版ってイメージです。


当ページでは、MotoGPのレース内容を1周毎に配信しました。
想定していた用途は、外出先でレースを見たいけど見れない人向け。

スマホ等で下記ページを開き待つだけで、レースが始まると、勝手に下記赤丸の部分に最新文字情報を表示。

f:id:motagp:20151120074410p:plain

日本GPから始めた機能で、配信中は数名の利用者あり。
残念ながら告知不足、説明不足で少人数の利用になりましたが、やる価値はあったと考えています。

 

何の用途で使えるの?

 ツイッターでも同じ事出来るんじゃね?。

そうです、写真も送れるし、でも・・・
ツイッター使えない人もいるし、ホームページのアドレス教えるだけで利用開始できるから、導入障壁は低いです。

では、利用できそうなイベント。

  • マイナーなスポーツ
    リアルタイム中継の無いマイナーなスポーツの配信
    例えば・・・言えません。
  • 運動会などのイベント
    応援に行けない家族に、最新情報を配信できます。
  • 地域イベント
    市民マラソンなどに使えそうです。
  • 行政からの告知
    今日のお知らせ掲示板で使えそうです。

速報性のある情報の配信に利用できそうですね。

使い方

 では、運用方法です。

情報入力

まず、情報を入力するプログを1ページ作ります。

そのページに、配信したい情報をリスト形式で書きます。
この最後の行がLIVE配信されます。
(仕組み的には、この最後の行をLIVEページは読んでいます)

情報更新は、最後の行に追加して行くだけ。
もちろん、追加したら、そのページは保存して下さいね。

はてなブログの場合は、配信元ページを[編集]で開き、行追加、[記事を更新する]で終了の繰り返しです。
簡単でしょ。

 配信元例:

http://motogp.hatenablog.com/entry/2016ot-valencia2

f:id:motagp:20151120072209p:plain

     :
     :

f:id:motagp:20151120072235p:plain

情報受信

次に見る側、こちらは簡単、指定されたページを開くだけ。

MotoGPレポートでは、10秒毎に情報を更新しました。
そんなに早く文字打てないから、もっと長い間隔でも構わないかも。

配信先例:

http://motogp.hatenablog.com/entry/tool-live

f:id:motagp:20151120072126p:plain

 

導入方法

使い方理解できましたか?、今一ピンと来ない人はコメント下さい。

それでは、導入方法です。

配信元

配信する情報用に、プログを1ページ作成して、リスト項目(箇条書き)の場所を作って下さい。

f:id:motagp:20151120083814p:plain

例この下に箇条書き

  • 1行目
  • 2行目
    2行目の続き
  • 3行目

上記の様に、入力して、この最終行が配信されます。
2行目の例、[shift]+[改行]で入力した場合、表示側は、スペースで区切られた1行で表示されます。

気を付けなくてはいけないのは、最終行が「・空白」で終っていると、何も表示されない点です。

 

箇条書きの入力が1行できたら、この場所に名前を付けます。

HTML編集に切り替えて下さい。

f:id:motagp:20151120084423p:plain

 

 箇条書きの場所、<ul>を探します。

f:id:motagp:20151120084713p:plain

このulタグに名前(id)を付けます。

 <ul> を <ul id="live"> に変更。

 

f:id:motagp:20151120085019p:plain

以上で入力側は終わりです。

 

受信側(配信先)

次に受信側、新しいブログを1ページ作成して、html編集に切り替え。
下記ソースコードを新しいブログページに貼り付けます。
一カ所、対象走行アドレスのみ、送信側のブログアドレスに変更します。

注、この仕組みは自分のブログ内(ドメイン)でしか参照できません。

これから下記---------------------------

<!-- jQuery 2.0.2 -->
<p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</p>
<p><strong><span style="color: #ff0000;">テキストLIVE</span></strong></p>
<hr />
<p id="lapline" style="color: #000; font-size: 140%;">読込中</p>
<hr />
<div><button id="reload" type="button">手動更新</button> 対象走行:<input id="inid" maxlength="10" name="inid" size="5" type="text" value="live" /> <button id="stopload" type="button">更新停止</button> <button id="startload" type="button">自動更新(10秒)</button></div>
<hr />
<p> 更新履歴↓</p>
<p><span id="lapall" style="font-size: 80%; color: #286f2c;">読込中</span></p>
<hr />
<p> </p>
<p> </p>
<p> </p>
<p>対象走行アドレス</p>
<div><input id="inurl" maxlength="255" name="inname" size="60" type="text" value="http://motogp.hatenablog.com/entry/2016ot-valencia2" /></div>
<div> </div>
<!-- script -->
<p>
<script type="text/javascript">// <![CDATA[
var timer;
var lapstrs = new Array();
var lapstr = "";
var laptext = new Array();
var laptext2 = new Array();
function timerstart(){
timer = setInterval('lap()',10000);
}
function timerstop(){
clearInterval(timer);
}
function lap(){
$.ajax({
url: $('#inurl').val(),
dataType: "html",
success:function( data ) {
//$("#lapline").html($('#'+$('#inid').val(), data).html());
$(data).find('ul').each(function(){
if ($(this).is('#'+$('#inid').val())) {
laptext = $(this).text().split("\n"); //改行区切りで配列に格納
laptext2 = $.grep(laptext, function(e){return e;}); //??
j=laptext2.length; //配列の個数を取得
for(i=0; i<laptext2.length; i++){
lapstr = laptext2[i];
lapstrs[j] = laptext2[i] ;
j=j-1;
}
}
});
$('#lapline').text(lapstr);
//$("#lapall").html($('#'+$('#inid').val(), data).html());
$('#lapall').text("");
$.each(lapstrs,function(i, lapstrs) {
if(i>1){
$('<li></li>')
.append(i-1 + '回前: '+lapstrs)
.appendTo('#lapall');
}
});
},
error: function(){
$('#lapline').text('LIVE配信は終了しました');
$('#lapall').text('LIVE配信は終了しました');
}
});
}


(function($) {

$(function() {
$(document)
.ready(function(){
lap();
timerstart();
});
$('#reload')
.on('click', function(){
lap();
});
$('#startload')
.on('click', function(){
timerstart();
});
$('#stopload')
.on('click', function(){
timerstop();
});
});
})(jQuery);
// ]]></script>
</p>

 

ここまで---------------------------

 すみません、ソースが見にくいですが、はてなブログに貼り付けると勝手に成型してくれます。

 

以上です。


使ってみたいけど、導入が上手くできない時はコメント下さい。

 

注、この仕組みを導入して、何か問題が起きても一切の補償は出来ません。あしからず。