Intersection Observerが導入されvisibility計算やウェブの高速化が進む？

今年に入ってからポツポツと「Intersection Observer」の話が出てくるようになりました。
まだDraftの仕様ですが、GoogleですとChromeのバージョン51から導入されております。

  • 広告やコンテンツにおけるVisibility評価
  • コンテンツ読み込みをコンテンツ領域が実際に"表示された"タイミングで開始することでページ読み込みを待つ必要がない
などのメリットがあります。(下のイメージはGoogleページから)
 

実際のdemoとしてはまだchrome betaかchrome devでしか見れませんが、画像のロードとしてdiv領域が50%に到達した時点で読み込む事を見せている、こちらのページでしょうか。

広告のvisibility評価が正確になるだけでなく、コンテンツ運営側にとっても実際読まれているの？という部分が明確化されるのと同時に、スマートフォンにおけるコンテンツ表示の評価にも役立つものになると思います。


4月下旬にはFinancial Timesが「ページ表示スピードは回遊に影響があるよ」と発表しております。

Intersection Observerに関して、gitにおいてある説明はこちらです。
他のブラウザ対応が少しずつ進んできたら一気に導入が進むかもしれませんが、Chromeのstableに導入されたタイミングでsample dataとしてデータを取得してみるのも良いのかもしれません。

読み込まれたタイミングでpingを飛ばしたり、GAのeventを飛ばしたり、広告入稿とひも付けたり。
個人的に結構やりたいことは沢山あります。

Google FusionTables x Chart API で社内(個人)用BI ダッシュボードは作れなくはない…

# 概要
Google FusionTablesとGoogleのChart APIを利用して社内(個人)用BI ダッシュボードを作る。

# TL;DR
* 全くオススメできない。可能か不可能かで言えば可能というだけ。
* FusionTablesとChart APIの組み合わせのオフィシャルドキュメントはFusionTablesのPublic Dataしか利用出来ないので社内データには利用出来ない。
* Google Apps Scriptを利用してウェブページを生成することで解決可能。ウェブページ生成のオフィシャルドキュメントはこの辺。


# 一応作ってみた
HTMLのデザインなどなどはテキトー




# Google Drive内でウェブページを生成する
## Code.gs

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('index');
  return template.evaluate()
.setTitle('stats')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function fTables1(){
  var tableId = '';
  var sql = "SELECT * FROM " + tableId;
  var res = FusionTables.Query.sql(sql);
  return res.rows;
}

## index.html
codeを実行する部分だけ抜粋。


<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);

function drawChart(){
google.script.run.withSuccessHandler(contentGetWeek).fTables1();
}

function contentGetWeek(data){
var chartData = new google.visualization.DataTable();
chartData.addColumn('string', 'date');
chartData.addColumn('number', 'Performance');
chartData.addRows(data);

var options = {
width: 900,
height: 500,
legend: {position:'none'}
};

var chart = new google.charts.Line(document.getElementById('line_top_week'));
chart.draw(chartData, options);
}
</head>

<body>
<div id="line_top_week"></div>
</body>

仕組みとしては…
ウェブページ(index.html)を開いたタイミングでCode.gsのfTables1を実行し指定のFusionTablesからデータを取得する。そのデータをindex.html側で受け取ってチャートを描画しているだけです。

Code.gsの実行は最初
google.script.run.fTables1()
で書いていたのですが、データ取得が成功したらcontentGetWeek関数を実行するという書き方に変更しました。

実はコレ。ほぼ完成したソースだけど、もうひと手間必要。

# !落とし穴!
* 現在この方法で取得するFusionTablesのレスポンスデータは全て文字列で返ってくる

これ以外にも色々ツッコミどころは満載な訳ですが、コレほど腐った仕様も無いよなーと思いながら、実現するためにはデータでチャート化したい部分をIntなどに無理やり変換しなければならない…

# 終わりに
Google FusionTablesとか、ここまで放置されているサービスということはそのうちサービス終了するんだろうなーと思ってガクブルしているw
Spreadsheetに入り切らない大き目の数値データをゴロゴロ保管しているので。

ここまでするんだったら別のやり方あるよね！という意見は正しい。
でもまぁ、今ある資源だけでサクッと作れるんだったらそれでも良いよね。