みかづきブログ その3

3ヶ月つづけてみました。

Google Apps ScriptでDateオブジェクトをつくろうとしたときのメモ

new Date("2017-12-12 10:00"); // => Thu Jan 01 09:00:00 GMT+09:00 1970

という感じで「あれー?」と思っていたんですが、

new Date(2017, 11, 12, 10, 0, 0); // => Tue Dec 12 2017 10:00:00 GMT+0900 (JST)

としたら解決しました。

mozillaのサイトのdatastringの箇所を確認したら、

ブラウザごとに動作が異なり一貫性がないため、Date コンストラクタ (または同等の Date.parse) で日付文字列を解釈しないように強くすすめます。

と書いてありました。

developer.mozilla.org

これからは、引数に分けてDateオブジェクトをつくろうとおもいます。

IoTデバイスの効果測定にはGoogleアナリティクスのMeasurement Protocolがおすすめ!(サンプルコード付き)

この記事に書いてあること

  • GoogleアナリティクスのMeasurement Protocolのつかいかた
  • Measurement Protocolの実装例(Node.js)

この記事のターゲット

  • IoTデバイスをGoogleアナリティクスをつかってイベットトラッキングして、効果測定してみたい人

はじめに

このエントリーは IoTLT Advent Calendar 2017 の8日目の記事です。

こんにちは。フロントエンドエンジニアの @ki_230 です。
今年は何回か IoTLT に出場させていただいたご縁で、 アドベントカレンダー にも参加させていただくことになりました。どこかでだれかの役に立てるような記事を書けるように頑張ります。


自己紹介

まずは、自己紹介がてら、今年IoTLTで発表させていただいた資料を紹介していきたいと思います。

ウェバイスをつくろう(健康促進編)

www.slideshare.net

6月に エンタープライズIoTLT #8 ヘルスケアIoTLT @デジハリ - connpass でLTさせていただいたときの資料です。
資料に初々しさが残っています。
-

ウェバイスをつくろう(合コンさしすせそボタン編)

www.slideshare.net

8月に IoT縛りの勉強会! IoTLT vol.30 @ DMM - connpass でLTさせていただきたときの資料です。
発表の際に資料内の動画の音が流れませんでした。
-

天才になろうとしました

www.slideshare.net

10月に IoT縛りの勉強会/LT会「失敗編」【増枠】@Microsoft - connpass でLTをさせていただいたときの資料です。
8月の失敗の反省から、音がなくても伝わるように動画にキャプションを足すことにしました。
そう。人は失敗を経て成長していくのです。
-



と、普段はこんな感じのことをやっています。
LTでは毎回のように、

「IoTはインターネットにつながっているので、Googleアナリティクスとかでログを取るのが簡単なんですよ」

的な説明をさせていただいたものの、時間の関係で、具体的な方法までは紹介してきませんでした。
そこで本エントリーでは、

GoogleアナリティクスのMeasurement Protocolをつかった、IoTデバイスのイベントトラッキング方法

をご紹介したいと思います。


Googleアナリティクスとは

Google Analyticsは、Googleが提供するトラッキングサービスです。
基本的には無料でつかうことができるので、
ウェブページとかスマホアプリとかに組み込んでつかったことがある方は多いのではないでしょうか。

ウェブページでつかう際には、

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXXXX-X');
</script>

こんな感じのタグを埋め込むだけで、基本的なトラッキングをしてくれるので大変便利です。

さらに、ウェブページでイベントを計測したいと思ったら、

gtag("event", "アクション名", {"event_category": "カテゴリ名", "event_label": "ラベル名"});

タグを読み込んだ時点で、gtagというグローバル関数が宣言されているので、
という感じで、アクション、カテゴリ、ラベルをいい感じに引数に渡して実行すればOKです。
いい感じにイベントをトラッキングしてくれます。

かなりふわふわ系の説明なので、詳しく知りたい方は下記リンクを読んでみてください。
developers.google.com


IoTデバイスでのイベントトラッキング

上記の例のように、ウェブページではかなり簡単に設定でき、
なおかついい感じにトラッキングレポートをつくってくれるGoogleアナリティクスなので、
是非ともIoTデバイスの効果測定にもつかいたいところなのですが、
ウェブ版を組み込むためには、JavaScriptの実行環境とWindowが、
アプリ版を組み込むためにはSDKの組み込み(最近ではFirebaseアナリティクスをつかうことも多いらしいです)が必要となり、
IoTデバイスに組み込むのは、どうしてなかなか手軽にできる感じではありませんでした。
そこで個人的におすすめなのが、Measurement Protocolというわけです。

Measurement Protocolとは

HTTPリクエストでユーザーの利用状況に関する生データをGoogleアナリティクス サーバーに直接送信できる仕組みです。

developers.google.com

GETでもPOSTでもつかえるので、古くはメルマガの開封率を測定するのにつかわれていたようですね。
IoTデバイスはインターネットにはつながっているので、HTTPリクエストはできるはず。うってつけのインターフェイスといえるでしょう。

つかいかた
https://www.google-analytics.com/collect

こちらのURLをエンドポイントにし、アクション、カテゴリ、ラベルをパラメータに含めGETかPOSTでリクエストを送ります。
なので、

https://www.google-analytics.com/collect?v=1&t=event&tid=GoogleアナリティクスのID(UA-XXXXXXXX-X)&cid=デバイス識別子&ec=カテゴリ&ea=アクション&el=ラベル

という感じのリクエストを送れば、

gtag("event", "アクション名", {"event_category": "カテゴリ名", "event_label": "ラベル名"});

と、ほぼほぼ同等のトラッキングが可能です。
(Measurement ProtocolではUAとか画面サイズなど、gtagで自動でトラッキングしてくれる情報を取得したい場合は、自分でパラメータにつけないといけないので、厳密には同じ情報をトラッキングできてません)

やはり、かなりふわふわ系の説明なので、
パラメータなど詳細を確認したい場合は下記リンクをご確認ください。
https://developers.google.com/analytics/devguides/collection/protocol/v1/reference?hl=ja

実装例

Measurement Protocolがどんなものかわかったところで、
「マットマックス4DX with Yumake」を例に実装例を紹介します。


マットマックス4DX with YuMake

hacklog.jp


「マットマックス4DX with Yumake」は、振動で外の天気をつたえるハプティクスマットなのですが、

  • 踏むと振動するマット
  • 天気を取得する地域を設定するウェブサイト

の2つの要素で構成されており、
「天気を取得する地域を設定するウェブサイト」側のイベントは、
ウェブ用のGoogleアナリティクスで問題なくトラッキングできます。

Measurement Protocolを使うべきは、
「踏むと振動するマット」のイベントをトラッキングしたいときで、
踏まれるたびに、Measurement Protocolのエンドポイントに対してHTTPリクエストを送れば、
イベントをトラッキングできるわけです。
「マットマックス4DX with Yumake」のマットの内部にはNodeサーバが立っているので、

const request  = require("request");
const url      = requite("url");
const GA_ID    = "UA-XXXXXXXX-X";

let deviceid = "";

class Logger {
  static ga(deviceid, area) {
    let param   = {
          v   : 1,
          t   : "event",
          tid : GA_ID,
          cid : deviceid, // 引数でデバイスIDを受け取る予定
          ec  : area,     // 引数で地域を受け取る予定
          ea  : "step",   // 踏まれたイベント
          ev  : 1         // 踏まれた回数をvalueとして送信
        },
        options = {
          uri : url.format({
            protocol : "https:",
            slashes  : true,
            host     : "www.google-analytics.com",
            pathname : "/collect",
            query    : param
          });
        };

    request.get(options);
  }
}

module.exports = Logger;

というようなクラスをつくり、

Logger.ga("mat-0001", "13"); // マットマックス1号機が東京設定で踏まれた

という感じでつかっています。
これで、どれぐらい踏まれたのかがまるわかりですね。^ ^


おわりに

IoTデバイスは課題を解決するためにつくられることが多いですが、
実際に課題が解決できたかどうかを測定するためにも、イベントトラッキングはとても重要だと思っています。
Measurement Protocolは、HTTPリクエストが使える環境(IoTであればつかえるはず)であれば、
驚くほど簡単に導入できるので、とてもおすすめです!

明日は、@wamisnetさんによるおもしろいエントリーです。
引き続きよろしくお願いいたします。

JavaScriptのappendとappendChildの違い

すごく昔に、jQueryで書いたコードをjQuery無しで書き直す作業を行っていたのですが、

$body.append($wrapper);

的なコードを、

document.body.appendChild(wrapper);

という感じに書き換えようとして、

document.body.append(wrapper);

としてしまいました。

で、発覚までに時間がかかったのですが、
原因として、appendというメソッド、IE、Edge以外には存在するんですね。

developer.mozilla.org

IEでテストして初めて己の過ちに気づきました。

せっかくなので、appendとappendChildの違いをまとめておこうと思います。


appendChild

developer.mozilla.org


まずはおなじみappendChild。
DOMの子要素にDOMを追加するときにつかうメソッドです。

引数に渡したDOMをメソッドを叩いたDOMの最後尾に追加します。
で、関数の戻り値は引数で渡したDOMの参照となります。

var elm = document.body.appendChild(document.createElement("div"));

というコードを実行すると、
body要素の最後尾に空のdivが挿入され、elmにはdivの参照が入ります。

基本的にはすべてのブラウザで、すべてのDOMで使用することができますが、

  1. document間の移動はできない
  2. すでに親を持っているDOMをappendChildの引数に渡すと、元の親から削除された後に追加される

の2点に注意してつかいましょう。


append

developer.mozilla.org

※ formDataに対するappendではなく、DOMに対するappendです。

developer.mozilla.org

Javascript append

で検索を書けると、jQueryのappendばかり引っかかってしまい、調べるのに苦労しました。

引数で渡したDOMを、メソッドを叩いたDOMの最後尾に追加するという挙動は一緒なのですが、

  1. IE、Edgeで動作しない
  2. DOMだけではなくテキストノードも追加できる(Stringを渡すとテキストノードとして最後尾に追加される)
  3. 引数を複数渡せる(兄弟要素として追加される)
  4. 戻り値がない


などがappendChildとの違いとなります。



ただ、そもそもブラウザの対応状況を考えると、appendを積極的に使う必要はなさそうです。