VOYAGE GROUP　エンジニアブログ

あなたが呑気に生きてる間に、幹事様は年末どうしようと一生懸命悩んでいます！！ｗ


・はじめに

みなさんこんにちは。
(株)adingoでprivate DMPと呼ばれるcosmi Relationship Suiteの開発をしています。
@tana_raことあらたです。

世の中にはアルファベット３文字が溢れていて混乱しますよね。AWSと広告業界が混ざるとカオスです。
AWSとかEMRとかSSPとか。DMPもその一つですね。
ちなみにDMPはData Management Platformの略です。

ところでcosmiでは、データの管理にMySQLとMongoDBを利用しています。
私は開発時にはMySQLのGUIツールをよく利用するのですが、
MongoDBのGUIツールってあまり聞かないなと思ったので探してみました。
今日は触ってみたMongoDBのGUIツールを紹介してみたいと思います。
基本的にWEBベースの物を利用しています。

触ってみたGUIツールたち

• phpMoAdmin 1.1.2
• RockMongo 1.1.7
• mongo-express 0.18.0 (※) 
• Genghis 2.3.11

※mongo-expressは最新版では、依存ライブラリのバージョンによって動かなかったため、
現在masterブランチに上がっているものを利用しています。

■phpMoAdmin

まずはじめにphpMoAdminです。
名前から分かる通りPHP製です。
phpMyAdminとかphpMyFaqとか似た名前のものがたくさんありますね。
１ファイルで出来ているので、apacheのDocument Rootに配置するか、
PHPのビルトインサーバで利用することが出来ますね。

インストール

$ wget http://www.phpmoadmin.com/file/phpmoadmin.zip
$ unzip phpmoadmin.zip
$ mv moadmin.php /var/www/html/moadmin.php

でインストール完了です。
以下がその画面です。




何にもせず接続できました。
デフォルト設定で接続ができますが、Configファイルなどはないので
portを変えたり、認証をつけたりすると使えなくなってしまいます。
(無理やりコードを変更することで色々できますが・・・ｗ)
基本的なデータの確認は可能ですが、ユーザ認証とかは無いみたいですね。

■RockMongo

次にRockMongoです。これもPHP製。
したがって、phpMoAdminと同様の方法で利用することが出来ます。

インストール

$ wget "http://rockmongo.com/downloads/go?id=14” -O rockmongo.zip
$ unzip rockmongo.zip
$ mv rockmongo-1.1.7 /var/www/html/rockmongo

これで完了です。
アクセスすると以下のような画面が現れます。

ログイン認証もできますが、以下のように
/var/www/html/rockmongo/config.php
の31行目を編集すれば認証を無くすことも可能です。

31 //$MONGO["servers"][$i]["control_auth"] = true;//enable control users, works only if mongo_auth=false
32 $MONGO["servers"][$i]["control_auth"] = false;

するとこんな画面が現れます。



RockMongoは結構機能が多そうですね。
データの確認も見やすくていいです。

■mongo-express
mongo-expressはJavaScript(node.js)製のGUIツールです。
CSSはTwitter Bootstrapを利用しているようで綺麗です。

インストール

$ npm install https://github.com/andzdroid/mongo-express/tarball/master
・・・
$ cd node_modules/mongo-express
$ cp config.default.js config.js
$ vim config.js

デフォルトだとconfig.jsが無いため怒られます。
なのでconfig.default.jsをコピーして使いましょう。
今MongoDBで認証は行っていないのでconfig.jsで認証が必要ないように変更します。
変更しないとConnectionErrorとコンソールに出てきます。

 35 //    adminUsername: 'admin',
 36 //    adminPassword: 'pass',
 37     adminUsername: '',
 38     adminPassword: '',

$ node app
Mongo Express server listening on port 8081
Database connected!
Admin Database connected

以下がアクセスした時の画面です。

右のバツボタンを押したらこのレコード消してくれそうだなーと思って押したら
確認なしで消してくれましたｗ
とてもカジュアルですね・・・(´・ω・｀)ｗ

■Genghis

最後にGenghisです。
Genghisの読みがわからなくてぐぐったらチンギスハンのチンギスらしいです。
gem installでもできるらしいのですが、
PHPerな私はPHPのビルトインサーバを利用しました。
(色々躓いたわけでは決してないです。)
こちらもTwitter Bootstrapを利用しているのでどことなくモダンな感じです。

インストール

$ wget https://github.com/bobthecow/genghis/archive/v2.3.11.zip -O genghis.zip
$ unzip genghis.zip
$ mv genghis-2.3.11 genghis
$ cd genghis
$ php -S localhost:8080 genghis.php

として、アクセスしたら下のような画面にたどり着きました。




localhostを選択すればlocalhostのサーバにつながります。
その他にもAdd serverとやれば、他サーバのMongoDBにもつなげることが出来そうです。
localhostにつなげてみた画面が以下のようになります。



Twitter Bootstrapのおかげかとても見やすいですが、
findとinsertくらいの機能しかありませんでした。
まあ見やすければ・・・いいですかねｗ

全体的な比較

	phpMoAdmin	RockMongo	mongo-express	Genghis
Version	1.1.2	1.1.7	0.18.0	2.3.11
言語	PHP	PHP	JavaScript(node.js)	PHP or Ruby
License	GNU GPL	BSD	MIT	MIT
Github	phpMoAdmin	RockMongo	mongo-express	Genghis
出来ること
データ コレクション データベース管理	◯	◯	◯	◯
認証	×	◯	△(configファイル利用)	×
他サーバアクセス	×	×	△(configファイル利用)	◯

という感じでしょうか。

データの確認レベルであればphpMoAdmin以外はどれも良さそうだなーと思いました。
MongoDBにはAggregationやMap-Reduce機能もありますが、
それら用のなにか特別な機能はなさそうでした。

考えてみたら、結局難しい処理はシェルで打ち込んでしまうと思ってしまい、
個人的にはGUIツールに要求する機能はデータの確認くらいという結論に至りました。

そうすると、データの確認がカジュアルにできる、
mongo-expressはかなりいいなと思います。
（開発環境とはいえ誤って複雑なレコードを消したら泣きそうですがｗ）

GUIツールは個人に依る部分があると思うので皆さんも試してみるといいかもしれません。
以下に検証に利用したレポジトリを用意したので、
是非みなさん、MongoDBのGUIツールと戯れてみてください。
VagrantとVirtualboxを利用してMongoDBのGUIツールを検証出来るレポジトリです。

https://github.com/tarata/mongo-gui-try

$ZGOK_IDOBATA_WEBHOOK_URL=https://idobata.io/WEBHOOK_URL

HOST=* COLOR=red

  SCRIPT /path/to/xymon2idobata.sh $ZGOK_IDOBATA_WEBHOOK_URL  

#!/bin/bash

WEB_HOOK_URL=$RCPT

IDOBATA_STATUS="<span class='label label-info'>${BBCOLORLEVEL}</span>"

test ${BBCOLORLEVEL} = "red" && IDOBATA_STATUS="<span class='label label-important'>FAILURE</span>"

test ${BBCOLORLEVEL} = "yellow" && IDOBATA_STATUS="<span class='label label-warning'>WARNING</span>"

curl -s $WEB_HOOK_URL --data-urlencode "body=${IDOBATA_STATUS}<pre>${BBALPHAMSG}</pre>`echo $BBALPHAMSG | sed 's/.*See http/http/g'`" -d format=html

こんにちは、VOYAGE GROUPの水越(@Akiyah)です。
ECナビ でエンジニアをしています。

最近、同僚のコテツさんが社内にHRForecastを導入してくれました。
HRForecastとは数値を毎日/毎時で登録するとブラウザ上でわかりやすいグラフにしてくれるツールです。

HRForecast - もうひとつのデータビジュアライズツール - blog.nomadscafe.jp 

ディレクターの方が必要としている数値を、われわれエンジニアが出して渡すという運用は今までもいろいろな方法でやっていました。管理画面を作ったり、デイリーバッチで数値の入ったメールをメーリングリストに送ったり、エクセルファイルやCSVファイル、グラフ画像を更新してファイルサーバーに置いておくといったやり方です。
しかしHRForecastを使うと数値の更新もデータの表示も楽になるので、できるところから順次HRForecastに移しているところです。

HRForecastのいいところ（エンジニア目線）

(e1) データを記録するのはhttpでPOSTするだけなので簡単。

たとえばデータ解析環境「R」ではこんな感じで、APIにしたがってsimplePostToHostを叩くだけです。

このスクリプトを１回動かすとすると、グラフに当日と前日の数値がプロットされます。（なぜ前日分もプロットするのかは後述）

(e2) 過去のデータは保存してくれるので、最新のデータのみ更新すればよい。

過去のデータは保存されるので、過去のデータを計算しなおす必要は無く、毎日最新のデータを更新するだけでよいです。
CSVファイルを毎日更新するような運用の場合、毎回何ヶ月分もの過去分を含めて計算しなおしていることが多いので、最新のデータのみ更新すれば良いのはとても助かります。
HRForecastを使い始めの時は、上記のスクリプトを必要な過去の日数分繰り返すようなスクリプトを書いて１回だけ過去データをまとめて入れておくと良いでしょう。

(e3) 過去のデータを上書きすることもできるので、未確定のデータを入れておくこともできる。

たとえば当日のDAU(Daily Active Users:1日にサービスを利用したユーザー数)を1時間おきに更新したい、と言うような場合、上記のスクリプトを1日1回では無く、毎時実行するだけで毎時更新を行うことができます。
DAUの場合、ある日のDAUが確定するのは次の日になってからになりますが、そういう場合には前日と当日のDAUを更新するようなスクリプトを書いておきます。そうすれば当日分は1時間おきに更新され、前日分は日が変わって確定した時に（1時間以内に）確定した数値で更新されます。

(e4) シンプル

上で書いたようにPOSTするAPIはシンプルです。
そして、データベースのテーブルもdata(個々の数値)、metrics(グラフ)、complex(複合グラフ)の三つだけで、その中身も一度HRForecastを使った人なら何となくわかるくらいシンプルです。
テーブルの構成がシンプルなので、ブラウザ上では面倒なこともSQLで一気に操作することが簡単にできます。
うっかりしてグラフをたくさん作ってしまった時などはよくSQLを使って消しています。

ちなみに、HRForecastではブラウザ上でグラフを書くのにdygraphsというJavaScriptライブラリが使用されています。HRForecastのviewの部分はdygraphsにCSV形式のデータを渡しているだけなので、viewの部分もシンプルに作られています。 

HRForecastのいいところ（ディレクターの人から聞いた意見）

(d1) CSVファイルとしてダウンロードできる。

Excelで加工したい場合も多いので、描画されたグラフではなく元のデータが得られるのはうれしいようです。

(d2) グラフを拡大、縮小して見たいところに注目することができる。

データはたくさん（例えば何年分も）入れておいても、表示するときに最新の1ヶ月分などを簡単に見られるのが好評です。

(d3) URLさえ知っていれば見ることができる。

今までの仕組みだとメーリングリストに入らないと自分にはメールが届かなかったり、権限をもらわないと管理画面を見られなかったりするので、それに比べるととても便利です。
（もちろん社内のLANからしか見られないようにはしています）

アンパンマン

と言うわけで、社内で好評なHRForecastですが、もっと仲良くなるためにアンパンマンを書いてみました。私にとってアンパンマンはHelloWorldなのです。
まずは以前作ったアンパンマン方程式を使って、横軸を日付（2013/1/1～2013/12/31）、縦軸を整数（-200～200）でcsvファイルにしました。
そしてそのcsvファイルの数値をHRForecastのグラフとして登録します。HRForecastの（複合グラフではないほうの）グラフには1つの線しかかけないので、アンパンマンの顔を6つのパーツに分けて登録しました。


これらのグラフをHRForecast上で複合グラフにして、アンパンマンの完成です！


↑これはHRForecastに貼り付けたもののスクリーンショットですが、HRForecastで実際に見るときはインタラクティブに操作ができるので、その雰囲気を感じられるようにdygraphを使って拡大縮小できる状態にしたグラフを下に貼っておきます。(canvasが使えるブラウザのみ) みなさまもHRForecastとアンパンマンとお友達になれましたでしょうか。
Happy Anpanmaning!

おまけのばいきんまん

こちらもcanvasが使えるブラウザのみ バイバイキ〜ン!


追記(2013/10/15 18:30)
はからずもこの記事を書き終えて公開してからやなせたかしさんの訃報を知りました。
アンパンマンは私の息子と娘、そして私にとってのヒーローでした。
ご冥福をお祈りいたします。

こんにちは。android事業室エンジニアの@shinbashi です。
 
８月中旬にGoogle Tag Manager （以下GTM）がモバイル・アプリ向けに対応したことが正式に発表されてから久しいですが、きちんと見ていなかったのでせっかくなので調べて使ってみた時の事を書こうと思います。

さて、 GTMってなんだ？という方もいらっしゃるかもしれないので、簡単に紹介させていただきます。
こちらが正式発表がされた際のブログの日本語訳から、分かりやすそうな部分の抜粋になります

ボタンを押してイベントを追加するのを忘れた？　それは、まいったな！

キャンペーン終了直前にコンバージョン追跡を追加しなくてはいけない？　それはひどい！

大事な設定を変更しなくてはいけないことに気付いた？　残念だが、それは無理だ。

これは、今までの話！　今年初めにGoogle I/Oで予告したように、今日、当社はモバイルアプリ向けのGoogleタグマネージャをローンチします。

モバイルアプリ用Googleタグマネージャを一度導入してしまえば、設定変更は可能になり、分析、リマーケティング、コンバージョントラッキングを、対象のアプリをアップグレードせずに追加することが可能になります。
 

引用元：モバイルアプリ向けGoogleタグマネージャ登場！　

おお、なんだかすごく便利そうですね！予めSDKを仕込んでおけば、ある程度GTMからいろいろなところにフック出来そうな感じがします。
何はともあれ、とりあえずヘルプを見てみます。

モバイル アプリ向け Google タグマネージャ

Google タグマネージャを使用すると、変更予定のある設定値や、条件に応じて変える可能性のある設定値を簡単に管理できます。具体的には、アプリ内の値を定数ではなく変数として定義して、これらの値を指定するルールを Google タグマネージャで管理します。例として次のものが挙げられます。

• アプリに掲載する広告のサイズや位置（画面サイズに応じて広告バナーの縦のサイズを変更する場合など）
• ゲームの設定
• ユーザー インターフェースの設定（プラットフォームに応じて変更する場合など）
• デバイスの言語によってローカライズする文字列

引用元： Google タグマネージャについて - Tag Manager ヘルプ

続きを読む