GoogleChartsがおもしろい！（LineChart編）※サンプルプログラムあり

便利で無料で手軽に動作するGoogleCharts。IoTで収集したデータをとりあえず可視化したいという需要が増しているので活用機会は多々あります。

今回は「LineCharts」を動かします。

GoogleCharts
https://developers.google.com/chart/interactive/docs/gallery

LineCharts
https://developers.google.com/chart/interactive/docs/gallery/linechart

自室の温湿度を可視化しました。屋外と異なって変動が小さいですね。
実際にコチラで動作させられます。

手順としては下記のとおり

GoogleCharts使用開始のおまじない
データTableの定義
データ読み込み（今回はajaxによるhttp通信でjsonファイルを取得。）
取得したデータを加工しながら格納
可視化実行


<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script><script type='text/javascript'>
    
    // GoogleCharts利用開始の儀式
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    function drawChart() {  
        console.log("START");

        // データを定義
        var data = new google.visualization.DataTable();
        data.addColumn('datetime', 'Date');
        data.addColumn('number', 'TEMPERATURE');

        // ajaxによるデータ取得。ここではjsonを取得。CORSに注意。
        $(function() {
            $.ajax({
                url: 'http://****/sample.json',
            })
            .done(function(tempData){
                console.log("success loading");
                var rows = new Array();
                // httpで取得したjsonを形式整理しながら格納。
                $(tempData).each(function(){
                    var row = [new Date(parseInt(this.YEAR), parseInt(this.MONTH)-1, parseInt(this.DAY), parseInt(this.HOUR), parseInt(this.MINUTE)),
                               this.TEMPERATURE];
                    rows.push(row);
                    console.log(row);
                });
                data.addRows(rows);
  
                // グラフ表示形式の編集
                var options = {
                  title: 'Company Performance',
                  curveType: 'function',
                  legend: { position: 'right' }
                };

                // 可視化実行
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, {displayAnnotations: true});
            })
            .fail(function(){
                console.log("error");
            });
        });
    }
    </script>

// GoogleCharts利用開始の儀式

google.charts.load('current', {'packages':['corechart']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

console.log("START");

// データを定義

var data = new google.visualization.DataTable();

data.addColumn('datetime', 'Date');

data.addColumn('number', 'TEMPERATURE');

// ajaxによるデータ取得。ここではjsonを取得。CORSに注意。

$(function() {

$.ajax({

url: 'http://****/sample.json',

})

.done(function(tempData){

console.log("success loading");

var rows = new Array();

// httpで取得したjsonを形式整理しながら格納。

$(tempData).each(function(){

var row = [new Date(parseInt(this.YEAR), parseInt(this.MONTH)-1, parseInt(this.DAY), parseInt(this.HOUR), parseInt(this.MINUTE)),

this.TEMPERATURE];

rows.push(row);

console.log(row);

});

data.addRows(rows);

// グラフ表示形式の編集

var options = {

title: 'Company Performance',

curveType: 'function',

legend: { position: 'right' }

};

// 可視化実行

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

chart.draw(data, {displayAnnotations: true});

})

.fail(function(){

console.log("error");

});

}

</script>

ちなみにソースコード貼り付けには以下を利用。WordPressにペタッと貼れるかと思ったらプラグインやらマークアップ対策やら案外手間でした。
http://tomari.org/main/java/html-mojihenkan.html

2017年5月16日2017年5月27日

あなたを家電に例えると？の対策を考えてみる

就職活動でよく聞かれる「あなたを家電に例えると？」という質問。この質問自体になんの意図があるかはさておき、ネタだしに苦労している人は多いのではなかろうか。

私は残念ながら(?)就職活動中に「あなたを家電に例えると？」と質問されることはなかった。もし、尋ねられたらなんて答えただろうか・・・

というわけで、ちょっと興味がわいたのでどんなものがあるのか調べてみた。よくあるパターンは以下のあたり

ルンバ：自ら考えて行動するから
パソコン：時代の変化に合わせてバージョンアップしていくから
冷蔵庫：いつもクールだから

自分でもネタだししてみた

体温計：ちょっとした変化に気付く心配りができるから
活動量計：目標に向かって１歩ずつ努力を積み重ねていくから
体重計：現実と向き合い自らを律するから

ええやん（・ω・）ﾄﾞﾔｯ

他には

BIG MUFF：周囲の人々に元気とエネルギーを与えるから

とかどうよ？

2017年5月14日2017年5月21日

Googleの検索結果で自サイトが「ページがモバイルフレンドリーではありません。」と表示される

自分のサイトを立ち上げて、運用を開始して、Google検索で表示されだすと「いよいよか～」とワクワクしだしますね。が、妙な表示が１つ。

「ページがモバイルフレンドリーではありません。」・・・ｴｯ?(ﾟДﾟ≡ﾟДﾟ)ｴｯ?

「ページがモバイルフレンドリーではありません。」の意図

どうやらGoogle方針としてモバイル対応を進めていて、それができてないサイトの所有者には「モバイル対応しろ！」という警告を発するようです。

しかも、モバイルフレンドリー対応は必須ではないものの、応済みサイトの方が優先的に検索結果にあがるという仕組みのようです。たしかにGoogleからすれば検索上にモバイル対応していないサイトばかり列挙するとユーザ利便性が損なわれますので、各サイトにモバイル対応を呼びかけ、モバイルフレンドリーのサイトから優先的に表示させたいという考えは納得ですね。

対応方法と警告文の消し方

検索結果一覧に表示された「ページがモバイルフレンドリーではありません。」をクリックします。

自分のサイトURLを入力します。するとモバイルフレンドリーかどうかの診断が実行されます。

診断結果が出てOKだったら「GOOGLEに送信」をします。NG項目があった場合は頑張って対応してください（丸投げ）。

診断結果は保存もできます。
https://search.google.com/search-console/mobile-friendly?id=ujaXbIA2HBu6xpbjirIldA

では

＜続報＞

上記の対応から数日後、無事に「ページがモバイルフレンドリーではありません。」の表示が消えました

ﾒﾃﾞﾀｼ>∩(・ω・)∩<ﾒﾃﾞﾀｼ

2017年5月13日2017年5月21日

クラウドと機械学習

こんにちはロードローラーです。今日はクラウドと機械学習について書きます。先週にJAPAN IT WEEK 2017春＠東京ビッグサイトが開催され、クラウド関連の出展ブースでは機械学習がトレンドだと言われ新聞記事にもなっていました。

実際のところ、IoTサービスによってデバイスからクラウドにデータ送信できるし、DWHサービスによってデータをクラウドに蓄積できるので、「だったら分析もそのままクラウドですればいいじゃん」というのは必然的な流れですね。

AmazonのAWS、GoogleのGCP、MicrosoftのAzure、IBMのBluemix、みんなやはり機械学習プラットフォームをクラウドで提供しており、他のIoTやDWHと連携させてクラウド完結できる仕組みを提供しています。

で、ここで私が気になったのは、各社が提供する機械学習プラットフォームにて、自分でかき集めたデータを使ってモデル選定とパラメータ調節を繰り返し、「学習済みモデル」をクラウド上に構築した場合に著作権や特許がどうなるのかです。

Business lawyerさんを引用すると、

学習済みモデルは、通常、関数、行列またはパラメータ等の形式で自動的に出力されますので、それ自体は創作性または発明性が否定されることもあり、著作権法または特許権法による保護の対象とすることが難しい場合が多いと思われます。
https://business.bengo4.com/category5/article153

とのこと。こうなると「事業のキモとなる認識器（学習済みモデル）が特許保護を受けていない状態で他社様のクラウド上にあるのってなんかイヤじゃない？？」と私は考えてしまうわけです。

あと、もっとシンプルな突っ込み所としては、深層学習を突き詰めて利用すればするほど、環境構築においてCUDAやCaffeのバージョンも細かく指定したくなるだろうから「手軽で簡単に深層学習を開始できますよ！」ってコンセプトはいかがなものかと。。。

ひょっとして、そもそも玄人ではなく初心者をターゲットにしていて、いずれクラウド離れされても構わないのでとにかく深層学習のプレイヤーを増やすことが目的なのだろうか（ありえる）。

個人的には「深層学習なんてみんな自分で好きなように環境構築したいに決まってるでしょ！」という潔いスタンスで、GPU搭載サーバのレンタルをするだけというさくらインターネット株式会社様のような取り組みが好みです。環境構築は１から自分でしないといけません。なんというかさすが関西企業！そこにシビれるアコがれるぅ！！と思ってしまいました。

IoTで絶え間なく入ってくる新しいデータによって、毎日どんどん認識器を賢く更新していきたいという場合はやっぱりクラウドが向いてるんでしょうね。どこかでリビジョンを切って、いずれは認識器をコンポに落とし込みたいといった開発途中段階の場合は悩む点がありそうです。

今日はここまで。

2017年5月10日2017年5月21日

変化点検出ChangeFinderのインストール＆動かしてみた①

こんばんは、ロードローラーです。

今日は変化点検出を試したので紹介します。

IoTでデータを取得できる場面は広がりました。特に多いのが正常／異常を検出したいといった取り組みですが、いずれも「What is 異常？」を定義できずに悩んでいるようです。

そんな状況で私が注目したのが変化点検出のChangeFinder。これは「具体的にはわからないけど何かしら変化があった。」という瞬間を検出をする処理です。閾値処理のように高周波な変化やノイズに反応しにくく、傾向の変化を捉えるので、サンプルデータを入手しにくく定義困難な異常の検出に向いています。

インストール方法

私が実行した環境はUbuntu14.04です。以下を実行すればOKです。

pip install changefinder

1	pip install changefinder

が、しかし、これだけでは動かないこともあります。だいたいこのあたりを追加すれば動きます。（うろ覚えでスイマセン。。。）

<span class="go">pip install numpy</span>
<span class="go">pip install scipy
</span>pip install matplotlib

<span class="go">pip install numpy</span>

<span class="go">pip install scipy

</span>pip install matplotlib

サンプルソースと実行結果

ガウス分布で疑似的にデータを作り出してChangeFinderするサンプルがよく公開されてます。ソースと実行結果は以下の通り。

※ChangeFinder.py

import matplotlib.pyplot as plt
import changefinder
import numpy as np
data=np.concatenate([
np.random.normal(0.6, 0.05, 300),
np.random.normal(1.7, 0.05, 300),
np.random.normal(0.5, 0.05, 300),
np.random.normal(1.2, 0.05, 300)
])

cf = changefinder.ChangeFinder(r=0.01, order=1, smooth=7)

ret = []
for i in data:
    score = cf.update(i)
    ret.append(score)

fig = plt.figure()
ax = fig.add_subplot(111)
ax.plot(ret)
ax2 = ax.twinx()
ax2.plot(data,'r')
plt.show()

※ChangeFinder.py

import matplotlib.pyplot as plt

import changefinder

import numpy as np

data=np.concatenate([

np.random.normal(0.6, 0.05, 300),

np.random.normal(1.7, 0.05, 300),

np.random.normal(0.5, 0.05, 300),

np.random.normal(1.2, 0.05, 300)

])

cf = changefinder.ChangeFinder(r=0.01, order=1, smooth=7)

ret = []

for i in data:

score = cf.update(i)

ret.append(score)

fig = plt.figure()

ax = fig.add_subplot(111)

ax.plot(ret)

ax2 = ax.twinx()

ax2.plot(data,'r')

plt.show()

赤色がデータ値、青色がChangeFinder結果。データ値（赤色）の高周波な変動には反応せず、元となるガウス分布が変化しときにChangeFinder（青色）が反応しているのがわかります。こういった「そもそものデータ発生源の傾向変化」は単純な閾値処理では検出できません。

手持ちのデータに適用してみた

これだけじゃ面白くないので適当に採取したデータにChangeFinderを実行してみました。csvファイルを読み込んで実行するようにpythonプログラムを少々変更しています。

※ChangeFinderCSV.py import matplotlib.pyplot as plt import changefinder import numpy as np import csv import pandas as pd import datetime data=[] time=[] f = open('data20170422.csv', 'rb') dataReader = csv.reader(f) fieldnames = next(dataReader) for row in dataReader: #print row data.append(float(row[0])) time.append(datetime.time(int(row[5]),int(row[6]),0,0)) cf = changefinder.ChangeFinder(r=0.01, order=1, smooth=15) ret = [] for i in data: score = cf.update(i) ret.append(score) fig = plt.figure() #１画面フルに表示する ax1 = fig.add_subplot(111) ax1.set_title('Change Finder') ax1.plot(time, ret, color = 'g', label='ChangeFinder') #ax2をax1に関連付ける ax2 = ax1.twinx() ax2.plot(time,data,color = 'r', label = 'Noise') plt.subplots_adjust(hspace=0.7,bottom=0.2) plt.show()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

※ChangeFinderCSV.py
import matplotlib.pyplot as plt
import changefinder
import numpy as np
import csv
import pandas as pd
import datetime

data=[]
time=[]
f = open('data20170422.csv', 'rb')
dataReader = csv.reader(f)
fieldnames = next(dataReader)
for row in dataReader:
#print row
data.append(float(row[0]))
time.append(datetime.time(int(row[5]),int(row[6]),0,0))

cf = changefinder.ChangeFinder(r=0.01, order=1, smooth=15)

ret = []
for i in data:
score = cf.update(i)
ret.append(score)

fig = plt.figure()

#１画面フルに表示する

ax1 = fig.add_subplot(111)
ax1.set_title('Change Finder')
ax1.plot(time, ret, color = 'g', label='ChangeFinder')
#ax2をax1に関連付ける
ax2 = ax1.twinx()
ax2.plot(time,data,color = 'r', label = 'Noise')

plt.subplots_adjust(hspace=0.7,bottom=0.2)
plt.show()

対象データは、とある楽曲演奏時のdB値を加工したものです。イントロ⇒メロ⇒サビといった雰囲気の変化を「やかましさの傾向変化」でキャッチできないかなという実験です。

う～ん、微妙。。。07:00:00と22:00:00にサビで盛り上がる場面がくるのですが、捉えられているといえば捉えられてる・・・か？？

ここから先はChangeFinderの３パラメータ調節が必要そうですね。このあたりはまた次回に調べてみます。

それではまた

2017年5月6日2017年5月21日

クラウドの対義語「オンプレ」とは？　～その１～

こんにちは、ロードローラーです。今日は「オンプレ」について整理してみました。

普段からIoTやデータ分析に携わっている私ですが、あるとき「で？オンプレとクラウドとどっちが適切なの？」と質問されてΣ(ﾟдﾟ) ｴｯ!?っとなった次第です。

まずは、オンプレの定義から確認しますね。

オンプレミス【 on-premises 】自社運用：
組織における情報システムの設置形態の分類。クラウドの普及に伴って対義語として広まった呼称がオンプレ。

想像ですが、一昔前はなんでもかんでもオンプレ型で運用していて、クラウドの登場によって皆がどんどんクラウド型に移行した。しかしその後、やはりクラウド型だけでなくオンプレ型も使いこなさなければならない事情が出てきたのだと思います。クラウドとオンプレをハイブリッドに使いこなすためのサービスも次々と登場しているくらいですからね。

そしておそらく、大きな理由は①セキュリティと②データ量の増大かと。。。IoTやセンシング技術の発展によってデータ量は膨大になりましたし、個人情報を含んだデリケートな情報も増えてますからね。

企業様は導入や拡張が容易なクラウドを活用したいものの、セキュリティ観点や従量課金制の料金モデルを背景にオンプレも使いこなさなければならない状態なのだと思います。

＜クラウドとオンプレの比較＞

クラウド型
・外部の事業者が用意した機材やソフトウェアを通信回線を経由して利用する
・遠隔地の機器との通信に伴う通信遅延や通信障害が発生する
・機密情報を他社の機器上に保管することになる
・提供される構成や機能でしか利用できない
・導入が用意
・初期費用が低い
・拡張しやすい

オンプレミス型
・自社に機器を設置してシステム運用する
・自社内の機器を利用するので通信遅延等の心配なし。
・機密情報を自社の機器上に保管できるので安心
・構成や機能を自由にカスタマイズ可能
・導入に時間がかかる
・初期費用が高くつきやすい
・拡張や変更に手間がかかる

とりあえず今日はここまで

2017年5月4日2017年5月21日

XREAへのWordPress設置方法と「500 Internal Server Error」への対応方法

XREAへのWordPress設置もずいぶんと簡単になったもので、わざわざ公式サイトからzipを落としたりせずとも、XREAサイトからボタンクリックで設置できるようになってしまった。手順は次の通り

XREA.COMの旧コンパネへアクセス
管理メニューから「データベース」を選択
事前にデータベースを作成しておく（※７で必要になる）
管理メニューから「CGIインストール」を選択
設置場所・パスを指定してWordPressインストール
インストール先のURLを開く
設定画面が表示されるのでユーザ名やデータベースやパスワードを設定

たったのこれだけである

が、しかし

どうやら手順７にて「500 Internal Server Error」が表示されるとの被害届が続出らしい。だいたいは”.htaccess”が原因なので編集すれば解決らしいが私の場合はパターンが異なった。”.htaccess”関連をいじっても解決されなかった人々に参考にしてほしい。では対処法を記す。

XREA.COMの旧コンパネへアクセス
管理メニューから「マイドメイン利用」「└PHP設定」を選択
「バージョン選択」でPHPのバージョンを新しいものに変更する
「PHP設定」ボタンを押下するのを忘れないこと

どうやらPHPバージョンが古いと「500 Internal Server Error」が出るようである。

以上。

2017年5月3日2017年5月21日

ベルリン観光　～実際に行って思ったオススメ観光地～

こんにちは、ロードローラーです。
今回はドイツの観光都市”ベルリン”についてご紹介します。

ググれば観光スポットが大量に紹介されますが、むしろ多すぎて「どないしょ(´・ω・`)？」となりますよね。そこで、私が実際に行ってみて気に入った場所を紹介します。旅のプランニングに役立てて頂ければ幸いです。

①ベルリン中央駅

ガラス張りの立体構造の施設で非常に美しい。
日本からの旅行者は改札機がないことに驚く。
人通りが多く治安もよい。夜食など安心して買いに来れる。

いきなり１発目が公共施設で「なんでやねん！」となるかもしれませんが絶対に見て頂きたいスポットです。そもそも、ヨーロッパでは駅そのものが観光地であることは珍しくないのです。例えば有名建築家によるリノベーションを受けたアントワープ駅＠ベルギーは「世界一美しい」の称号を得ています。同様にベルリン中央駅もガラス張りで立体的な構造が非常に美しく、そこらの観光地に引けを取りません（主観込）。

また、ベルリン中央駅は最も”商業施設との融合”に成功した例としても注目されています。立体的構造ゆえの見渡しの良さ、スムーズな人の流れ、店舗の並び、全てが計算されている様は芸術的です。

中央駅のためベルリン観光時はここを経由することがほとんどです。どうか出発を急ぐ気持ちをグッとこらえて、目の前に広がる構内の美しさを感じてください。
f:id:RoadrollerDA:20170423125615j:plain 　 f:id:RoadrollerDA:20170423120744j:plain

余談ですが同伴者の第一声は「ファイナルファンタジーに出てきそう！」でした。( ´_ゝ｀)ﾇｰﾝ

②ブランデンブルク門

ベルリン中央駅から観光地に向かうとき、おそらく必然的に経由する場所です。朝と夜で雰囲気が大違いのため、行きと帰りで２度見れるようにプランを立ててください。ブランデンブルク門の周辺は大通りばかりで人通りも多いため、夜の姿となったブランデンブルク門も安心して見られます。

f:id:RoadrollerDA:20170423120755j:plain 　　 f:id:RoadrollerDA:20170423122736j:plain

③ベルリン大聖堂

さて、ブランデンブルク門を抜けてどこに向かうかというとベルリン大聖堂がおすすめです。近所には世界遺産登録された博物館もありますが事前予約しないとチケット購入にずいぶん並ぶ、期間によっては工事修復中で一部の展示物が見られないなど、ちょっぴりリスキーで面倒です。

一方でベルリン大聖堂は入場もスムーズで、美しいステンドグラスの観賞や高所からベルリンの街並みを一望できるなど、事前知識なしでも楽しみやすい要素が一杯です。

f:id:RoadrollerDA:20170423120817j:plain 　 f:id:RoadrollerDA:20170423123547j:plain

ちなみにベルリン大聖堂のトイレは有料でした、博物館では無料だったのに……（※チップ制なのでトイレは基本的に有料が多い）

④ニコライ協会(テディベア)

やっぱりベルリンで人気のお土産はテディベア。赤の市庁舎から近くにあるニコライ教会付近はテディベア激戦区となっており数々のテディベアが販売されています（写真左は私が実際に購入したクマさん）。10EUR～200EURといった具合に値段も質もサイズも、もちろん種類も様々。お土産用にも自分用にもお気に入りのテディベアを探してください。

なお、中にはベルリン出身ではないテディベアを扱っている店舗もあります。ベルリン観光のお土産にベルリンベアをお求めの方はご注意ください。ホントかどうか半信半疑ですが店員さん曰く「冠をしているクマさんがベルリンベア」とのこと。

f:id:RoadrollerDA:20170423125957j:plain 　 f:id:RoadrollerDA:20170423120827j:plain

⑤ベルリンの壁（イーストサイドギャラリー）

ベルリンといえばこちらを思い浮かべる方も多いかもしれません。私としては「せっかくベルリンに来たのだから見ておきたい」という方にのみオススメします。というのも川沿いでイベントをたまにやっているくらいで他には特に何もなく、他観光地に比べてここだけ非常に遠いからです。アクセスには徒歩ではなく電車等をご検討ください。

f:id:RoadrollerDA:20170423120837j:plain

読んでくださりありがとうございました。

京都の技術者ロードローラーさんのブログ

投稿

GoogleChartsがおもしろい！（LineChart編）※サンプルプログラムあり

あなたを家電に例えると？の対策を考えてみる

Googleの検索結果で自サイトが「ページがモバイルフレンドリーではありません。」と表示される

「ページがモバイルフレンドリーではありません。」の意図

対応方法と警告文の消し方

クラウドと機械学習

変化点検出ChangeFinderのインストール＆動かしてみた①

インストール方法

サンプルソースと実行結果

手持ちのデータに適用してみた

クラウドの対義語「オンプレ」とは？　～その１～

＜クラウドとオンプレの比較＞

XREAへのWordPress設置方法と「500 Internal Server Error」への対応方法

が、しかし

ベルリン観光　～実際に行って思ったオススメ観光地～

①ベルリン中央駅

②ブランデンブルク門

③ベルリン大聖堂

④ニコライ協会(テディベア)

2021年6月
月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

「ページがモバイル フレンドリーではありません。」の意図

対応方法と警告文の消し方

インストール方法

サンプルソースと実行結果

手持ちのデータに適用してみた

＜クラウドとオンプレの比較＞

が、しかし

①ベルリン中央駅

②ブランデンブルク門

③ベルリン大聖堂

④ニコライ協会(テディベア)

「ページがモバイルフレンドリーではありません。」の意図