意外と簡単、テキストLIVE配信の仕組み
今シーズン使い始めたテキスト速報の仕組みを説明します。
簡単に導入出来て、皆様のはてなブログで利用可能。
(はてな以外でもjavaScriptが動作すれば動きます)
目次
それなに?どんな機能
LIVEって言ってるぐらいなので、表示したいページに、テキスト情報をリアルに表示する仕組みです。
見せたい相手に、1つのページアドレスを教えるだけで、速報を表示し続ける事が可能。
プロ野球のLIVE速報の簡易版ってイメージです。
当ページでは、MotoGPのレース内容を1周毎に配信しました。
想定していた用途は、外出先でレースを見たいけど見れない人向け。
スマホ等で下記ページを開き待つだけで、レースが始まると、勝手に下記赤丸の部分に最新文字情報を表示。
日本GPから始めた機能で、配信中は数名の利用者あり。
残念ながら告知不足、説明不足で少人数の利用になりましたが、やる価値はあったと考えています。
何の用途で使えるの?
ツイッターでも同じ事出来るんじゃね?。
そうです、写真も送れるし、でも・・・
ツイッター使えない人もいるし、ホームページのアドレス教えるだけで利用開始できるから、導入障壁は低いです。
では、利用できそうなイベント。
- マイナーなスポーツ
リアルタイム中継の無いマイナーなスポーツの配信
例えば・・・言えません。 - 運動会などのイベント
応援に行けない家族に、最新情報を配信できます。 - 地域イベント
市民マラソンなどに使えそうです。 - 行政からの告知
今日のお知らせ掲示板で使えそうです。
速報性のある情報の配信に利用できそうですね。
使い方
では、運用方法です。
情報入力
まず、情報を入力するプログを1ページ作ります。
そのページに、配信したい情報をリスト形式で書きます。
この最後の行がLIVE配信されます。
(仕組み的には、この最後の行をLIVEページは読んでいます)
情報更新は、最後の行に追加して行くだけ。
もちろん、追加したら、そのページは保存して下さいね。
はてなブログの場合は、配信元ページを[編集]で開き、行追加、[記事を更新する]で終了の繰り返しです。
簡単でしょ。
配信元例:
http://motogp.hatenablog.com/entry/2016ot-valencia2
:
:
情報受信
次に見る側、こちらは簡単、指定されたページを開くだけ。
MotoGPレポートでは、10秒毎に情報を更新しました。
そんなに早く文字打てないから、もっと長い間隔でも構わないかも。
配信先例:
http://motogp.hatenablog.com/entry/tool-live
導入方法
使い方理解できましたか?、今一ピンと来ない人はコメント下さい。
それでは、導入方法です。
配信元
配信する情報用に、プログを1ページ作成して、リスト項目(箇条書き)の場所を作って下さい。
例この下に箇条書き
- 1行目
- 2行目
2行目の続き - 3行目
上記の様に、入力して、この最終行が配信されます。
2行目の例、[shift]+[改行]で入力した場合、表示側は、スペースで区切られた1行で表示されます。
気を付けなくてはいけないのは、最終行が「・空白」で終っていると、何も表示されない点です。
箇条書きの入力が1行できたら、この場所に名前を付けます。
HTML編集に切り替えて下さい。
箇条書きの場所、<ul>を探します。
このulタグに名前(id)を付けます。
<ul> を <ul id="live"> に変更。
以上で入力側は終わりです。
受信側(配信先)
次に受信側、新しいブログを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>
ここまで---------------------------
すみません、ソースが見にくいですが、はてなブログに貼り付けると勝手に成型してくれます。
以上です。
使ってみたいけど、導入が上手くできない時はコメント下さい。
注、この仕組みを導入して、何か問題が起きても一切の補償は出来ません。あしからず。