VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

2013年10月

アラートをXymonからチーム開発向けのめっちゃグレートなグループチャットidobataにpostする

Zucksの技術環境整備係 @bash0C7 です。

さて、我々は今のところシステム監視にXymonという統合監視ツールを使っています。基本のXymon Client連携の他、カスタムスクリプトで定期的にAWSのリソースの状態を監視したり、Fluentdからfluent-plugin-xymon経由でXymonにメトリクスを取り込んだりという手を加えながら、より高いサービスレベルの達成に力を注いでいます。

Zucks Ad NetworkではXymonが問題を感知したときの通知として、これまでは伝統的なメール発報を行ってきました。利用実績の多さに加え、最近だと携帯にプッシュを受けれたり、ルールに基いてメールを転送したり、フィルタリングしたりと、伝統的とはいえまだまだ使い手のある手段ではあります。
ただ、21世紀の今日、もっとカジュアルかつ即時性が高く、送られてきた通知を契機に迅速かつスムーズにコミュニケーションが取れる手段を使いたいなあと思っていました。

そこで我々は"チーム開発にフォーカスした快適なグループチャット"idobataとXymonを組み合わせることで上記を実現しました。

Xymonからidobataに通知


idobataはグループチャットとして動作がスムーズで謳い文句の通り快適に使うことができる他、WebHook機能によってGithub、PivotalTracker、Jenkinsなど日常的に使っているポピュラーな開発支援ツールからの通知をかんたんに取り込むことができます。
Xymonからidobataの連携は、汎用のGeneric WebHookに、Xymonサーバからアクセスする方法をとっています。

下記2ステップをXymon側に設定するだけでかんたんに実現できるので、Xymonを使っている方は是非速攻でお試しください。
他の監視ツールを使っている場合も考え方は同じなのでかんたんに適用できるでしょう。 また、Fluentdにはfluent-plugin-idobataというプラグインがあるので、こちらも利用すると捗るかと思います。

■ステップ1

alerts.cfgに、条件に合致したらスクリプトをキックするように設定を追加します。
例えばいずれかのホストでCOLORがredの場合に/path/to/xymon2idobata.shをキックしてidobataに通知する場合、下記の様に記述します。
$ZGOK_IDOBATA_WEBHOOK_URL=https://idobata.io/WEBHOOK_URL

HOST=* COLOR=red
  SCRIPT /path/to/xymon2idobata.sh $ZGOK_IDOBATA_WEBHOOK_URL  
idobataのWebHook URLはidobataのルームごとにユニークなものが発行されるので、idobataのROOM SETTINGSをご覧ください。
alerts.cfgの詳細な書き方は、http://xymon.sourceforge.net/xymon/help/xymon-alerts.html#scripts をご参照ください

■ステップ2

idobataに通知するためのxymon2idobata.shを実装します。
スクリプトの中では、エラーの状況やメッセージなどが環境変数で渡されるので、それを元にhttpリクエストを作ってidobataにpostします。
#!/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
スクリプト中で使えるXymonの環境変数についても、http://xymon.sourceforge.net/xymon/help/xymon-alerts.html#scripts をご覧ください。
ちょっとしたハマりどころとしては、alerts.cfgで渡したrecipient情報(ステップ1では$ZGOK_IDOBATA_WEBHOOK_URL)は、コマンドライン引数ではなくRCPT環境変数に格納されます。

このスクリプトではidobata.ioでGeneric HookでFAILUREとかSUCCESSを出すを大いに参考にして、エラーレベルごとにわかりやすくidobataに表示するようにしています。
BBCOLORLEVELにredだのyellowだの、Xymonのエラーレベルのカラーが渡ってくるので、これでどのようなラベルにするか判断しています。

また、Xymonからのメッセージをpreタグで囲むようにしましたが、これだとメッセージの最後についているURLがidobata上でクリッカブルになりません。`echo $BBALPHAMSG | sed 's/.*See http/http/g'` でURL部分をpre外にも出して、idobataに送り込んでいます。


どうですか、かんたんだったでしょう?
上記スニペットはMIT Licenseとしますので、ご自由にお使いください。


また他にも様々な技術的なアーキテクチャや工夫を行っています。
PHPカンファレンス2013やad:tech Tokyo 2013 AWSブースで講演した時の資料を公開していますので、こちらも是非ご参照ください。

■PHPカンファレンス2013講演資料

■ad:tech Tokyo 2013 AWSブース講演資料

そして、VOYAGE GROUPや広告配信に興味を持ちましたら、是非こちらもご検討ください。
VOYAGE GROUP キャリア採用 広告配信システムエンジニア

「こんなWeb APIは嫌だ」から始める 使いやすいWeb API開発

こんにちは。VOYAGE MARKETINGでシステムを担当している@axhillです。

VOYAGE MARKETINGではポイント交換のPeXの運営の他、様々なサービスを提供しています。

今回は、そんなサービスの中の一つ、デジタルギフト・オンデマンド・サービスを開発した時のことを書こうと思います。

デジタルギフト・オンデマンド・サービスって何?

デジタルギフト・オンデマンド・サービスは、AmazonやiTunesなどのデジタルギフトコードを
Web APIを通してリアルタイムに発券することができるBtoBのサービスです。

詳しくはデジタルギフト・オンデマンド・サービス紹介ページご確認ください

プロジェクト開始当初、Web APIの設計経験に乏しかった私には、
どのように作ろう、と考えていた中で一つ思ったことがありました。
それは次のような考えです。

他社が公開しているWeb APIへの不満を整理することや
自分が利用したくないWeb API像を想像することで、
反面教師的に、利用者からの不満が少ないWeb APIを開発できそうだ。

というわけで、プロジェクト開始早々に、自分で使いたくないWeb APIについてブレストをしてみることにしました。

ブレスト「こんなWeb APIは嫌だ」の例

■ リクエストの種類ごとにレスポンスの形式が変わる
APIごとにレスポンス形式がXMLでしか受け取れなかったり、
またJSONでしか受け取れなかったりとバラバラに指定されているのは嫌ですね。
リクエスト時にレスポンス形式を指定できるとサービス利用側の実装が楽になりそうです。
■ 稀にレスポンスが得られないことがある
ネットワークやサーバの障害が発生しないとは保障しきれません。
もちろん障害が発生すれば、Web APIでリクエストを受け取れなかったり、
レスポンスがリクエスト元に届かないことも起こりえます。
後からリクエスト・レスポンスの内容を確認できる手段があると重宝しそうですね。
■ 第三者が自分のアカウントでリクエストできる
第三者が正規サービス利用者のアカウントでリクエストを行うと、
API利用にかかる請求は当然、正規サービス利用者に乗ってきます。
そんなの嫌ですね。
Web APIとサービス利用側で、お互いに正しいリクエスト・レスポンスであることを検証できると嬉しいですね。
そもそも第三者がリクエストを行えないような制御が必要ですし、
リクエスト方法やリクエストの検証方法が第三者に漏洩しないよう、気を配らなければなりません。
■ サンドボックスが無い。または使いづらい
サンドボックスが無い場合、開発する際に自前でスタブを作る必要があるので、
サービス利用側の工数が膨らみそうです。
また、期待するレスポンスを返せるようにWeb APIを設計しておくことで
サービス利用側の開発が楽になりそうです。

ブレストを経て思ったこと

Web APIは作り方次第で、サービス利用者に大きなストレスを与えます。
経験的にストレスを受けるWeb APIの形が何となく見えていたので、今回はこのようなブレストを実施できました。
プロジェクト開始早々で、自分でも利用したいと思えるWeb APIの形が何となく想像できたのは良かったです。

デジタルギフト・オンデマンド・サービスのWeb APIについてはもちろん、このブレストの後、
調査や設計、レビューを通して開発されていますので「こんなWeb APIは嫌」にはならないと思います。

サービスを運営されている方は、他社や自社のサービスに対する不満を記録しておくと
自社サービスへの改善点として活かせることもあるかもしれませんね!


ではー。

HRForecastでサービスの数値を見える化してディレクターに好評。そしてアンパンマン。

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

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

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

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

sample

HRForecastのいいところ(エンジニア目線)

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

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

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

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

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

(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)
はからずもこの記事を書き終えて公開してからやなせたかしさんの訃報を知りました。
アンパンマンは私の息子と娘、そして私にとってのヒーローでした。
ご冥福をお祈りいたします。

Google Tag Manager for MobileでABテストをしてみたかった

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

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

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

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

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

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

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

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

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

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

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

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

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

・・・、なんだか入れ忘れたイベントを追加したり、コンバージョンを追加したりするのはどうやるのかイマイチわかりません。予め設定をGTM経由で取得するようにしておけば、設定変更を行えそうだということはわかりました。
  • イベント追加忘れ→そいつは参ったまま
  • 急なコンバージョンの追跡→それもひどいまま
  • 大事な設定の変更→残念じゃないかもしれない!予め仕込んで置けば無理じゃないかもしれない!
 といった具合のようです。
記事を書き始めた当初はイベント追加し忘れたよ!GTMで新しく追加したよ!みたいな記事を書こうと思ったんですが、完全な見切り発車でした。
 
なのでここで大きく方向転換をして、近々ABテストが実装できるとの事なので、おそらく現在の機能でも頑張ればABテストできるんじゃないかと思ってABテストのようなものを実装してみることにしてみました。 
続きを読む
記事検索
QRコード
QRコード