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
それでは皆さんの忘年会 幹事業の成功をお祈りしております!

圧倒的な成長を目指す「Treasure2014」(後編)

こんにちは。システム本部 三浦@hironomiuです。

本エントリーは
圧倒的な成長を目指す「Treasure2014」(前編)
の続編エントリーです。


最終日打上げ
treasure2014-7

8日間の前半戦を終え9/4〜9/12の7日間で行う後半戦では4人1チームのグループ開発を行います。
今年は5チームが1位を目指して最高のサービス目指して開発を行いました。

各チーム紹介

チーム 大文字
しほし、びのー、かみ、けいた
(サポータ せんせい、ゆう@yuu_ito、いっきさん)
treasure2014-12

チーム 720°スゴイ
ちーちゃん、こーき、ふぁいん、たくぼう

(サポータ 三浦@hironomiu、たかゆき@daybysay、大介)
treasure2014-8

チーム アイカレ
はしもと、みっしー、さっさー、わーみー

(サポータ 大山さん、じゅえる@jewel_x12、Hさん)
treasure2014-10

チーム 絶対☆男塾
どんちゃん、どぅーや、さかおす、あかまっくす

(サポータ しもやん@huin、さや@saya_223n、ごっさん)
treasure2014-11

チーム TEA
やんうぇい、がんちゃん、たけし、かぬー

(サポータ あわさん@katz_arc、とっしー@Sion0303、みやしゅー)
treasure2014-9


7日間の後半戦では前半に学んだ技術とアイディアソンで培ったアイディアをフルに用いて全力でサービスの開発を行います。Treasureではただ作りたいものを作るのではなく「価値」のあるもの作りが出来ているものを高く評価するようにしています。そして最終日にプレゼン発表を行い1位から5位までの順位付けを行います。

プレゼン
最終日に行われた各チームのプレゼン資料の抜粋です。全てのチームがプレゼン資料からもしっかりとした「価値」を考えてサービス開発したことが伺えます。

チーム アイカレ
2659
3800


チーム TEA
2435
5503


チーム 絶対☆男塾
2939
4701


チーム 大文字
2535
4602

チーム 720°スゴイ
5708
1725

最終発表までの7日間の風景

アイカレアイディア出し中
IMG_3317

絶対☆男塾アイディア出し中
IMG_3316

720°スゴイ横並び駆動開発
IMG_3321

大文字開発中
IMG_3344

#ajiting中
IMG_3328

TEA徹夜
IMG_3348

たくぼー椅子駆動開発
IMG_3349

絶対☆男塾横並び駆動開発
IMG_3351

720°スゴイランチ
IMG_3357

TEA開発中
IMG_3354


まとめ
Treasure2014の3週間を通して関わった全ての人が圧倒的に成長出来たのではと思っています。
圧倒的な成長に向けて全力で頑張れたからこそ全てのチームが素晴らしい結果で締め括れたと思っています。Treasureのコンセプト『「想像」が「創造」になる。』の通り、自分たちの「想像」する価値のあるサービスを実際に「創造」することができた3週間だったのではないでしょうか。ここで得た仲間や経験を通じて、これからも「未知」なるサービスを「創造」し続け、価値のある素晴らしいもの創りに挑戦し続けて欲しいです。

おまけ
最後までやりきった!!
IMG_3363

圧倒的な成長を目指す「Treasure2014」(前編)

こんにちは。システム本部 三浦@hironomiuです。

VOYAGE GROUPの夏のエンジニアインターン「Treasure2014」が8/25 - 9/12の3週間で行われました。
Treasure2014は前半(座学、ワーク)、後半(グループ開発)でカリキュラムが組まれています。
今回は前半についてお伝えしていこうと思います。

又、本エントリーを見て圧倒的な成長をしたいと思って頂けた学生さんは
11月に大規模サービス構築プログラムSunriseがありますのでエントリーお待ちしてます!!

スケジュール
前半は8/25 - 9/3の8日間で行いました。
(但しTreasure2014の開始2週間前から事前課題でTreasure中に最低限必要となる技術について、みっちり講師陣とQAのやり取りを行います。)

各講義について
1日目
環境構築 講師:三浦@hironomiu


treasure2014-githubvagrant


Treasure2014では出来るだけ実際の開発フローを経験してもらおうと個人開発環境で開発を行い本番環境へデプロイする流れを取ります。その上でGitHubを用いissueベースで開発を行っていきます。

issue -> 開発branch -> push -> pull request -> merge -> 本番デプロイの流れを初日に簡単に倣っていきます。

個人開発環境はVagrant,Puppet,Virtual Boxにて仮想サーバを構築し仮想サーバ内でベースアプリをGitHubリポジトリからcloneし開発出来る状態で臨みます。

2日目
アイディアソン 講師:渥美(@daisuke_atsumi)さん


treasure2014-atsumitreasure2014-atsumi2

Treasureはただ学んだ技術で何かを作るインターンではなく、学んだ技術などを用いて「価値」のあるWebサービスを生み出すこと特に大事にしています。

そこでアイディアソンと言う形で各Treasure生が作るべき「価値」のあるWebサービスのイメージを具現化するトレーニングを開発の前に行います。そしてこの後の技術的な講義ではアイディアソンでイメージしたWebサービスのモック作成からより具現化していく流れで進めていきます。

限られた期間で「価値」のあるWebサービスを生み出すのは相当困難です。しかしアイディアソン後の講義でも常に各Treasure生が考えたアイディアは本当に顧客に対して「価値」のあるWebサービスとして成り立つのだろうかと実装しながら検証していきます。

3 - 7日目
エンジニアインターンとしての肝となるのが3 - 7日目です。

フロントサイド 講師:前田(@brtriver)さん

treasure2014-brtrivertreasure2014-brtriver2

今回の開発はアイディアソンでイメージしたアイディアのモック作りから始める形で進めます。まずWebの概念や仕組みを再確認し、その上でモック作りに入ります。Webアプリケーションを振る舞いの責務と言う観点からフロントサイド、サーバサイドの二面を切り口に解説しサーバー側の実装に左右されない柔軟なフロントサイドを開発すると言う目的で今回はVue.jsを用いデータバインディングについて触れていきます。

treasure2014-brtriver3treasure2014-brtriver4

treasure2014-brtriver5treasure2014-brtriver6



中間課題(個人課題) 評価者:前田(@brtriver)さん

treasure2014-brtriver7treasure2014-brtriver8


中間課題はここまでのフロントサイド(プラス一部のサーバサイド)の講義で学んだ技術を用いて2日目に行ったアイディアソンのアイディアのモック作成か講義中の例題で作ったアプリの更なる改善したモック作成のどちらかを選択し制作物はプレゼンで発表します。


サーバサイド 講師:すずけん(@suzu_v)

treasure2014-suzukentreasure2014-suzuken2

今回のTreasureで用意したサーバサイドベースアプリ(PHP,Slim,Twig,etc)についてコードリーディングを実施し説明していきます。説明も大事ですが自分でOSSのソースを読み解き進める力をここでは養っていきます。

treasure2014-suzuken3treasure2014-suzuken4

今回サーバサイドの役割はフロントサイドからAPIを叩かれJSONを帰すイメージで進めます。そのために必要なAPI,URI設計や更にバックエンドにあるデータ永続やテスト(TDD)についても触れていきます。

treasure2014-suzuken5treasure2014-suzuken6

鬼教官すずけん(@suzu_v)とTDDです!(Let's TDD Bootcamp!)

treasure2014-suzuken7treasure2014-suzuken8
treasure2014-suzuken9treasure2014-suzuken10


8日目
DB 講師:三浦@hironomiu

Treasureではデータの永続化でRDB(MySQL)を用います。事前課題でTreasure生向けにRDBでは必須な技法である正規化について課題を行ってもらいます。その正答を伝え応用を実際に定義したテーブルに対してSQLを用いて様々な問い合わせについて触れていきます。またMySQLのアーキテクチャやRDBMSの機能であるトランザクションなども触れます。

treasure2014-hironomiutreasure2014-hironomiu2


セキュリティ 講師:えび(@co3k)ちゃん

ここまでも相当ヘビーな講義でしたがトリを勤めるのがセキュリティです。Treasure史上最長の講義資料の136ページ!えびちゃんワールドの開始です。

講義は情報セキュリティから始まります。

treasure2014-co3ktreasure2014-co3k2

情報セキュリティを抑えた上でWebセキュリティの概要をまずは俯瞰します。今回は限られた時間内で XSS (含 DOM based XSS)、SQL Injection、CSRF、クリックジャッキングについて触れていきます。

treasure2014-co3k3treasure2014-co3k4

個別のセキュリティ(XSS)について触れていきます。

treasure2014-co3k5treasure2014-co3k6


番外編
ランチ風景とTreasureの総合プロデューサー(Hさん)。

treasure2014-1treasure2014-4


他にもまだまだ書ききれないこともあります。

前半戦はここまでとなります。いかがだったでしょうか?
ここまで学んだことを用いて後半は4人1チームの開発を行います。後半のアウトプットが楽しみですね。後半戦のエントリーをお楽しみに!

Special thanks
各講義中、常にフォローをしてくれた15エンジニア内定者

せんちゃん
わっさん
だっち
ぷろ
ももえちゃん
いなっぺ
ぽくてぃ
さかもっちゃん
ゆきみね
記事検索
QRコード
QRコード