VOYAGE GROUP エンジニアブログ

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

ネタ

Node.js × Herokuで今日から始められる忘年会コンテンツ

こんにちは、ECナビでアプリケーションエンジニアとして働いている@chocopie116です。
いやーそろそろ年末ですね。
忘年会の時期も近いですね。

えっ!?ちょっと早いって!?
そう思う人は、ここでそっと画面を閉じてください。
あなたが呑気に生きてる間に、幹事様は年末どうしようと一生懸命悩んでいます!!w

さてここからは年末の忘年会ネタどうしようと悩む幹事の人だけ読み進めてください。

・はじめに
今回のエントリーでは、忘年会どうしようと頭を悩ませる人たち向けに、VOYAGE GROUP総会で開発したクイズシステムを紹介します。

弊社VOYAGE GROUPでは、半期を通じて活躍した人材・プロジェクトを表彰する総会が年2回あります。内容としては、2部構成になっており、1部は全社の振り返りや、表彰式が行われます。2部では所謂オモシロコンテンツが催されます。

ある日、今回の2部のおもしろコンテンツをどうしようか話していました。
VOYAGE GROUPは前身アクシブドットコム・ECナビも含めると創設15周年でおめでたいし、なんか面白いことやりたいよねーという話になり
やっぱりクイズは鉄板だよね!!という話になり、
全社員300名弱を巻き込んだクイズ大会というアイディアに決まりました。
サービスイメージ図
こういう感じのサービスならきっと世の中であるだろうと思い、google先生に、"クイズ 忘年会"、"クイズ 結婚式"、"スマホ クイズ システム"といった切り口で聞いても、既にクローズしているサービスが多く、利用できるサービスはありませんでした。

・なので、つくってみました
とりあえず構成はこんな感じで。
クイズコンテンツ概要
クイズの面白さを際立たせるため参加者を巻き込んだ出題VTR・解答VTR等は、WEBでやろうとするとリッチな表現の要求により爆死することが目に見えているので、DVDの映像を使います。
回答結果や、ランキング表示の部分のみスタッフ(管理者)のPCを使いウェブアプリをひらいたブラウザをスクリーンに映します。
つまりスクリーンではスイッチャーを用いて、シームレスにブラウザとDVDプレーヤーの映像を交互に映します(実はこのからくり、実際にあの場でいた人たちも気づかなかったはずです)。

またウェブアプリとして実装する機能もなるべくシンプルにしました。
・簡易ユーザー機能(ランキングの名前表示のため)
・回答機能
・問題の管理機能

・採用した手段
WebSocketや、イベントループ方式のほうがよさそうと思いNode.jsを採用。
インフラは手軽に使えるPaaSのHeroku採用しました。(といってもどちらも実戦投入初で使ってみたかったのが一番の理由w)

・実際の様子
こんな感じで出題(DVD)をして、制限時間内に会場の参加者にスマホで回答ボタンを押してもらいます。
出題

制限時間がきたら、こんな感じで回答結果(WEBアプリ)を表示します。 

回答集計結果
回答集計結果表示の後は、ユーザーの早押しランキングを表示しました。
・時間かけたこと・捨てたこと
新しいことにトライするのは楽しいですが、メインの業務ではないのもあり時間の制約があります。
以下のことを取捨選択しました。

■拾ったこと
ベンチマークテスト・回答受け付け処理の高速化
→制限時間内での回答がさばけるかどうか。想定リクエストが来てもアプリケーションに問題がないかどうか。
→回答受付処理で少し時間がかかる部分は、キャッシュじゃなく直接アプリのメモリに乗せたりして早くした。

■捨てたこと
お前は今まで食ったパンの枚数を覚えているのか?


ちなみにDynoは、一番高いPXのsizeを使いました。
ベンチマークテスト入れても24時間しかぐらいしか稼働させないので迷わずお金で解決にかかりました。
もろもろのサーバー利用料で2000円ぐらい支払いがきていたと思います。

・まとめ
やはり会場参加型のクイズコンテンツは盛り上がります。
また小規模の忘年会で映像つくれないよーという方は、DVDの代わりにパワーポイントのアニメーションを使うことで同等のサービスを提供することができるかと思います。
またスイッチャーがない場合でも、2台のプロジェクターを用意し、出題と回答を同時に表示するなどして対応出来ると思います。うまいことやりくりをしましょう。

さて、このエントリーでは、皆様の年末の幹事業の何かヒントになりましたでしょうか
最後になりますが今回実装したアプリのコードをgithubで公開しました。

node初めてだしーとか、オレオレprivateリポジトリだったしーとか
色々言い訳を挙げればキリはありませんが、もうえいやっと公開してしまいますw
enkai-quiz
それでは皆さんの忘年会 幹事業の成功をお祈りしております!

あなたにおすすめするたった一つの最高のキーボード

みなさまこんにちは!

VOYAGE MARKETINGにてエンジニアをしている@gomachan46です。
社内の非公式サークルとして音ゲー部なるものを立ち上げて日々熱心に活動しております。


さて、みなさまキーボードはどのようなものをお使いでしょうか?

エンジニアな読者のみなさまは、キーボードには特段の思い入れがあるのではないでしょうか。

そこで、VOYAGE GROUPのエンジニア達がどんなキーボードを使っているか見てきました。 

realforce

高級キーボードの代名詞的なREALFORCEや、

hhkb

矢印キーのない非常にコンパクトなHHKB

kinesis

エルゴノミクスデザインが斬新なKinesis

truly

エルゴノミクスキーボードスレで定番と噂のTruly Ergonomic

打鍵音が良い、打鍵時の感触が良い、コンパクトでどこでも持ち運べる、変荷重で各指に合った程よい重さ、、、などなど色々あることと思います。

僕も例に漏れずキーボードは人一倍こだわって選んでいます。

そこで今日は僕のキーボードを紹介したいと思います!

otoge


どうでしょうかこの重厚感!他とは一線を画すデザイン!高級感あふれるメタリックボディ!
そしてなんといっても左側に燦然と輝くturn table!!

素晴らしいの一言に尽きますね。

■ What is this?

音ゲー用のコントローラーです。

■■ What is Otoge?

簡単にいうとリズムに合せて作成された譜面の通りにボタンを押して遊ぶゲームです。
 
otoge_info

 
一般的に失敗(Failure)、成功(Clear)に結果が分かれ、更にClearの先にはミスのないフルコンボ(FullCombo)という結果もあります。

こんな音ゲー用の代物なので、僕のキーボードは打鍵感、打鍵音ともに折り紙付きなキーボードなのです。

■ Let's Programming!

せっかくなので素晴らしさを伝えるべくこのキーボードでプログラミングしていこうと思います。

otoge2

これらのボタンにキーバインドをしていき、キーボードとして機能するようにします。

■■ Hello World!

プログラミング言語はRubyです。 

puts 'hello world'

これをRubyを対話的に実行できるirbを起動して実行するところまでをやってみます。

実際にプログラミングしている様子がこちらになります。



いかがでしょうか。実に楽しそうですね!

■ From now on...

このように、これからの時代はまず譜面を作り、それをプレイすることで開発を行う譜面駆動開発(Fumen Driven Development)が主流となっていくことでしょう。
Failed->Clear->FullComboの黄金サイクルを回すことで、開発にリズムが生まれ、進捗最高になること間違いなし!

いかがでしょうか?
みなさんすぐにでも今お使いのキーボードから乗り換えたくてウズウズしているのではないでしょうか。

さぁ、今すぐFDDを始めましょう! 

【番外編】バレンタイン緊急企画: エンジニアはPARCOさんへゆけ

ご無沙汰しております。リサーチパネルエイジアのおおやまです。 今回は、弊社若手エンジニアの、とある一日を共有させていただきます。

おはようございまーす!

008-IMGP5269


今日も元気に出勤するセッキー (@takkyuuplayer) 。 そう、彼は、今まさに急成長中の若手エンジニア。

仕事ではどんどん目標を達成する、まさに達成男なのですが、

打ち合わせ中

聞いてみると、プライベートの方での充実について、進捗がさっぱりの様子。

わたくし 「目標は?」

セッキー 「今年中に彼女をつくることで、好みのタイプの女性は、具体的にはk(ry」

いったい彼に何が足りていないのか・・・。 そんな彼をリアルに充実させるには、どうしたらいいのでしょうか。

リアルに充実・・・、リア充・・・、

おや?そうだ、弊社VOYAGE GROUPの階上には、リア充感いっぱいの方々であふれる PARCO (パルコ) さんがいらっしゃるではないか。 せっかくだから、PARCOさんからヒントをいただいてきてはどうだい?

PARCOさん訪問へ

いざ出発

善は急げということで、その日のお昼、早速PARCOさんを訪問することに。

パルコさんは上

セッキー 「パルコさんはすぐ上です。」

パルコさんに到着

オフィス前にてピースをした後、早速受付の方に相談。

セッキー 「プライベートライフをリアルに充実させたいんです!」

受付のおねいさん困惑

唐突な事案にも関わらず、悩めるセッキーを助けるべく登場してくれたのは・・・

おねいさん登場!

アベさん!! すごく キラキラ している!!

アベさんに、プライベートの現状と、目標を共有したところ、若干引き気味ではあったものの・・・

おねいさん若干引き気味

アベさん 「そ、そうですね・・・、まずは服を変えたほうがいいかもしれないですね・・・」

アベさん 「セッキーに合いそうな服、あると思いますから、PARCOの店舗へ行ってみましょう!!」

なんとアベさん、セッキーの服選びにアテンドしてくれることに!!!

渋谷PARCO

つかの間のデート気分を味わいつつ、

パルコへ移動1

井の頭通りを抜け、

パルコへ移動2

ジャーン、渋谷PARCOに到着!!

パルコに到着

入り口で我々を迎えてくれたのが、壁いっぱいのサイネージ!なにこれすごい

サイネージ1

アベさん 「このサイネージ、気になる商品を触っていくと、そのカテゴリの商品をチェックできちゃうんですッ!!!」

なるほど、とばかりにセッキーも触っていくと・・・

サイネージ2

スカートが一面に広がりました。一体彼は、どんな商品をチェックしていたのでしょうか。

アベさん 「それでは、お店まで向かいましょう!!」

セッキー 「dkdk」

お店までレッツゴー

JUNRed でコーディネート

本日ご紹介いただきましたお店は、こちらの JUNRed さんです!!

JUNRed

コーディネート中

まずはニットを中心に検討開始。寒い季節ですからね。アベさんの選んだファーストコーディネートは・・・

コーディネート1

デニムっぽいシャツに赤いニットの組み合わせです。早速試着してみましょう。

試着中・・・

セッキー 「こんな感じでしょうかー?」

どうでしょう!

!!!!!

ちゃうちゃう!!

アベさん 「えっ、違う違う、それ 中と外が逆 ですッ!!」

セッキー 「えっ」

ニットの上にシャツを羽織って登場したセッキーに、アベさん困惑!これは 予測不能 な展開です!

気を取り直して、次のコーデで試着へ。

コーディネート2

アベさん 「うーん、なんか足りてないような感じ・・・」

首周りにストールを装着してみる。

コーディネート2+ストール

セッキー 「^ ^」

思わぬ急接近に満足気な表情を浮かべるセッキー。なかなかいい感じになってきたようですが、続いて次のコーディネートで試着。

コーディネート3

これは・・・ッ!!!

アベさん 「これは似合ってますねッ!!靴もいい感じですッ!!」

コーディネート3+くつ

納得のコーディネート 〜 そしてお会計へ

セッキー 「これでいきますッ!!!」 ドンッ!

ジャーン

なんか急に リア充 感が漂ってきました!

そうと決まれば、残るはお会計ですね。本日お買い上げしましたアイテムは、

カーディガン
8,500 円
ロングスリーブシャツ (インナー)
7,600 円 → 3,800 円 (50 % OFF)
パンツ
8,500 円
シューズ
11,000 円
で、合計 33,390 円 (消費税 1,590 円) でした。チャリーン。

お会計

アベさんのおかげで、セッキーはまるで別人のようにカッコイイ男になりました! お忙しい中、セッキーの変身をサポートしていただきまして、ありがとうございます!

おねいさんありがとうございます

店長さん、開店中にも関わらず、撮影にご協力いただきまして、まことにありがとうございます。

店長さんありがとうございます

まとめ

一部で、 エンジニアはチェックのシャツばかり着ている との情報が出回っていますが、もうそれは過去のお話になったのではないでしょうか。 なぜなら、我々エンジニアには、 PARCO さんでお買い物をするという選択肢ができたからです。 これから訪れるバレンタイン、そして春のファッションを PARCOJUNRed で楽しんではいかがでしょうか。

* PARCOさんには、事前にアポイントメントをいただいた上で訪問しています。 * PARCO内は撮影禁止です。今回の取材の際には、特別に許可をいただいた上で撮影しております。 * 次回の担当の際には、「Mojolicious のここがいい!」を予定しています。

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

ぼくのかんがえたさいきょうのSkypeテキストチャット環境

こんにちは!VOYAGE GROUP新卒エンジニアの井手上です!

今回の記事はSkypeテキストチャットのためのコマンドラインインターフェースを作ろう
という内容です。

突然ですが、皆さんは仕事でのコミュニケーションにどのようなツールを利用していますか?
事業部にもよりますが、私の所属するadingoプラットフォーム本部では
Skypeインスタントメッセージ(テキストチャット)を利用しています。

Skypeの良い点は、やはり多くのプラットフォームで利用できるところです。
WindowsやMac、Linux等のOSにとらわれずに誰でもチャットに参加できるので
エンジニアだけではなく、業務に関わる全員と効率的なやり取りが可能です。

しかしSkypeを活用するようになって出てきた問題が2点あります。

  1. グループが増えてくると切り替えが大変
  2. 黒い画面が恋しい

私のSkypeのグループを見てみると、業務関係のグループであったり、エンジニアが
プログラミングの話をするグループであったり、同期が集まってワイワイするグループ
であったりと、小さなものから大きなものまで多くのグループがあります。

グループが多くなると、あるグループで会話が進んでいる裏で、別のグループでも
進んでいるという状況が多くなり、カーソルでグループをポチポチ選択してから
切り替える必要があります。このような場合はSkypeの画面を並べてチャットの一覧性
を高めたくなりますね。

(2)については好みによりますが、エンジニアの中には端末とかターミナルなどと呼ばれる
黒くて地味な画面を愛してやまず、一瞬でも長く黒い画面と付き合いたい方が一定数います(自分調べ)。
確かに操作がキーボードのみで完結しますし、zshのようなシェルを使用すると単語レベルでの
カーソル移動ができたりと、Skypeのチャット入力画面よりも編集能力は高いかもしれませんね。

と長くなりましたが、結局下の図のようにテキストチャットを利用したいわけです。

さいきょうのSkypeテキストチャット環境












さて、このさいきょうのSkypeを実現するために以下のことができる必要があります。

  1. コマンドラインからチャットを読んだり発言できたりする
  2. 画面を分割できる

(2)の「画面を分割できる」ですが、iTermやscreenの画面分割機能を使用すれば実現できそうです。

(1)についてはこれといったものが見つからないのでオレオレSkypeコマンドラインインターフェース(CLI)を
サクッと作っちゃいましょう。ようやく本題です。

Apple eventでアプリケーションと通信
 
CLIを作るためのプログラミング言語は何であれ、Skypeアプリケーションにコマンドを送信してチャットの
情報を取得したり発言する方法が必要です。
D-BusやApple eventを利用するとプロセス間通信でアプリケーションと対話できます。

下のスクリプトはAppleScriptからApple eventを利用した例です。

tell application "Skype"
     send command "SEARCH RECENTCHATS" script name "recentchat"
end tell

commandに続く"SEARCH RECENTCHATS"に注目してください。この例ではSkypeアプリケーションに
"最近のチャットを探してください"というコマンドを送信しています。そうすると以下のような
メッセージが帰ってきます。

CHATS #user1/$e18dd512f98ce425, #user2/user1;bc0710cb4a32bdc2

CHATS以降、カンマで区切られた文字列は最近のチャットのIDを表します。あるチャットでの会話を
取得したい場合は、"IDがXXのチャットの会話をください"とSkypeアプリケーションにまたコマンドを
送信します。

他にもいろいろなコマンドが用意されており、リファレンスが公開されています。


発言したりメッセージを取得するだけでなく、電話もできるようですね。

様々なプログラミング言語でApple eventを利用するためのライブラリが公開されているので、好きな
プログラミング言語でオレオレSkype CLIを作り放題ですよ!

オレオレSkype CLI

今回作成したオレオレSkype CLIをGitHubに公開しています。


インストール:

$ git clone https://github.com/jewel12/skype_chat.git
$ cd skype_chat
$ gem build skype_chat.gemspec
$ gem install skype_chat-0.0.1.gem

インストールするとskyというコマンドが利用できます。

チャット一覧
$ sky list
e4 VGエンジニア user1 user2 user3
86 同期とチャット user1 user2 user3
...
sky listと実行するとチャットの一覧が表示されます。トピック名があればトピック名が表示され、
チャットに参加しているユーザーも最大3名まで表示しています。

最初に"e4"や"86"と表示されている文字はチャットのIDになり、他のコマンドで利用できます。

チャットを読む
$ sky read e4
ユーザー1 : やっほー [06-24 23:45] e4
ユーザー2 : Common Lisp [06-25 08:35] e4
...

sky read e4とチャットIDを渡すと、会話の内容が表示されます。

sky stream e4とすると、新しいメッセージが投稿されたらそれを表示し続けます。

発言する

sky send e4 こんにちは〜

sendコマンドで発言を投稿できます。

応用する

会話を表示しているだけなのでgrepでフィルタリングしたりすることもできます。
sky send でちょっとしたSkype botを作ってみるのも良いかもしれませんね。

sky stream e4 | grep Java

sky send e4 "`date`"

ぼくがかんがえたさいきょうのSkypeを実現するため、画面分割にはtmuxを使用しています。
Tmuxinator を使用するとコマンド一発で設定しておいた画面構成にしてくれるので便利です。

ここまで読んでいただきありがとうございました。
皆さんも色々なCLIを作成して、黒い画面を愛でましょう!!

記事検索
QRコード
QRコード