ハウテレビジョン開発者ブログ

『外資就活ドットコム』を日夜開発している技術陣がプログラミングネタ・業務改善ネタ・よしなしごとについて記していきます。

静的サイトをサクサク作成・公開するためのサービス・ライブラリ選定

弊社ハウテレビジョンでは、毎週一日R&D dayという名目で、業務と直接関係しない技術を学んでみたり、今まであまり触れてこなかった領域を調べたりしています。

通常業務ではいわゆる「動的な」サイトを作成しているため、意外と静的なサイト作成に触れてきませんでした。
という訳で、今回は静的なサイトをいかに簡単に作れるか、調査・実践しました。

折角なので、前々から使おうと思っていたMaterial Component for the web (MDC) を利用します。

やること

  • 静的サイトの1ページを作ります
    • 固定ツールバー(ヘッダー)付き
  • デザインは1から組み上げることとします(既存のテーマに頼らない)
  • Material Component for the web (MDC)を使います

やったことを以下の流れで記載します。

  1. 静的サイトジェネレーターの選定
  2. デザイン
  3. デプロイ先の選定

手順

静的サイトジェネレーターの選定

お手軽に作る上で、利用者の多さは非常に重要です。
というわけで、StaticGenを参考にして人気のあるリポジトリを探してみます。

見てみると、Jekyllは未だ衰えない人気があり、ドキュメントも整備されています。
今回はこちらを使って組み上げることにします。

デザイン

今回はマテリアルデザインで仕上げてみようと思います。
Material Design Liteの後継であるMaterial Components for the webをライブラリとして用います。

MDCのインストール

package.jsonnpm init などで作成し、MDCをインストールします。

npm install --save material-components-web

node_modules の中に必要なファイルが出来上がりますので、これをHTMLから利用します。
Getting startedでも述べられているように、CDNを使ったり、コンポーネントごとのインストールもできますので、用途にあわせて使い分けることができます。

デザインを考える

MDCではリポジトリの中に各コンポーネントのdemoが用意されています。
また、実際に動いているサンプルがホスティングされています(GAEなあたりGoogleらしさを感じさせます)。
これらや、他のマテリアルデザインで作られているサイトを参考にしてデザインを考えます。

本題とは逸れますが、以下にマテリアルデザイン系のお役立ちリンクを少しだけ記載しておきます。
マテリアルデザインは現在非常に勢いがあり、日々新しい物がでてきているため、サンプルには事欠きません。

簡素なページを作る

大まかにデザインが決まったらコーディングをしてゆきます。
1ファイルだと見づらいため、Directory structure - Jekyllを参考にファイルを分割して配置します。

まずは/layout/_default.html にMDCを利用する骨子を作ります。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>{{ title }}</title>

        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="node_modules/material-components-web/dist/material-components-web.css">
    </head>

    <body class="mdc-typography demo-body">
        {% include header.html %}

        { content }

        <script src="node_modules/material-components-web/dist/material-components-web.js"></script>
        <script>mdc.autoInit();</script>
    </body>
</html>

このレイアウトファイルを使って各ページを構成します(今回は1ファイルだけですが)。
ヘッダーは別ファイルにして切り出し、各ページの内容のみそれぞれのファイルに書いてゆきます。

_includes/header.html は以下のように、固定toolbarを配置します。

<header class="mdc-toolbar mdc-toolbar--fixed">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
        <span class="mdc-toolbar__title">Title</span>
    </section>
    <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
        <span>Action</span>
    </section>
</header>

index.html はとりあえずh2だけ置いておきます。
固定ツールバーなので、mdc-toolbar-fixed-adjust を指定しないと文字がツールバーにめり込んでしまいます。

---
layout: default
---

<main class="mdc-toolbar-fixed-adjust">
    <h2 class="mdc-typography--display2">Hello!</h2>
</main>

ここまで書くと、以下のような表示結果になりました。

f:id:itamisky:20170330162141p:plain

グリッドレイアウト

デモページにあるように、グリッドレイアウトも簡単に行えます。

カードをグリッドで表示してみます。
画像が無いと見栄えがしないので、FlickerでCreative Commonsの画像を拾ってきました。
https://www.flickr.com/photos/kamikura/1437333121

index.html を以下のように、グリッドレイアウトでカードを3つ表示するように変更しました。

---
layout: default
---

<style>
    .card__16-9-media {
        background-image: url("images/bird.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 12.313rem; /* 197sp, for 16:9 ratio with 350sp demo card width */
    }
    .card__big-image {
        height: 21.875rem; /* 350sp */
        background-image: url("images/bird.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
    .card__big-image .mdc-card__primary,
    .card__big-image .mdc-card__actions {
        background: rgba(0, 0, 0, .4);
    }
</style>

<main class="mdc-toolbar-fixed-adjust">
    <div class="mdc-layout-grid">
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
            <div class="mdc-card demo-card">
                <section class="mdc-card__media card__16-9-media"></section>
                <section class="mdc-card__supporting-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
                </section>
            </div>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
            <div class="mdc-card demo-card">
                <div class="mdc-card__horizontal-block">
                    <section class="mdc-card__primary">
                        <h1 class="mdc-card__title mdc-card__title--large">Title here</h1>
                        <h2 class="mdc-card__subtitle">Subtitle here</h2>
                    </section>
                    <img class="mdc-card__media-item" src="images/bird.jpg" />
                </div>
                <section class="mdc-card__actions">
                    <button class="mdc-button mdc-button--compact mdc-card__action">Action 1</button>
                    <button class="mdc-button mdc-button--compact mdc-card__action">Action 2</button>
                </section>
            </div>
        </div>
        <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4">
            <div class="mdc-card mdc-card--theme-dark demo-card card__big-image">
                <section class="mdc-card__primary">
                    <h1 class="mdc-card__title mdc-card__title--large">Title goes here</h1>
                    <h2 class="mdc-card__subtitle">Subtitle here</h2>
                </section>
                <section class="mdc-card__actions">
                    <button class="mdc-button mdc-button--compact mdc-button--theme-dark mdc-card__action">Action 1</button>
                    <button class="mdc-button mdc-button--compact mdc-button--theme-dark mdc-card__action">Action 2</button>
                </section>
            </div>
        </div>
    </div>
</main>

表示は以下のようになりました。
ウィンドウサイズにあわせて配置が変わっています。

f:id:itamisky:20170330162231p:plain f:id:itamisky:20170330162236p:plain f:id:itamisky:20170330162240p:plain

グリッドデザインもMDCを使うと簡単に利用できました。

デプロイ先の選定

S3やGithub Pagesなどの選択肢もありますが、ビルドを含めたワークフローも管理して欲しいため、Netlifyを使います。
独自ドメインも付けられるので、ちょっとしたサイトを公開するには十分だと思います。

まず、githubに上記のコードを含めたリポジトリをpushします。
その後、Netlify上で対象リポジトリへ連携設定を行い、jekyll に対する設定がされていることを確認します。

なんとこれだけで、bundle install からjekyll buildnpm install を行ってデプロイがなされます。
xxx.netlify.com のアドレスが発行されるので、これにアクセスするとローカルで見ていた画面と同様に表示がされるかと思います。

更新する

一度設定をしてしまえば、後はgithubの該当ブランチに更新があるたびに自動でデプロイが行われます。

ローカルで文言を変更して、git push やプルリクをマージします。
しばらくしてからNetlifyのデプロイ状況を見ると、自動で更新がなされていることがわかります。
とてもお手軽です。

f:id:itamisky:20170330162347p:plain

まとめ

Jekyll、MDC、Netlify(+github)を使うことで、非常に簡単に「生成・デザイン・デプロイ」の一連の作業が行えました。
今回は一人で開発しましたが、開発者が複数人になっても通常のgitとフローが同じため分かりやすいです。

複数人でページデザインの確認を行ったり、プロトタイプを上げる際に特に有用ですので、ぜひ上記構成を検討してみてください。

おまけ

ハウテレビジョンでは、静的サイトの可能性を探る鳥が好きな仲間を募集しています。
Webエンジニア
エンジニアインターンシップ

SIerからWeb系スタートアップ/ベンチャー企業に転職して感じたこと

だれ?

2015年11月にハウテレビジョンに入社いたしました。
入社する以前は、某緑のナビ会社でスマホ向けのAPI書いたり
中小SIerでWebシステムの開発をやってたプログラマでございます。
なんやかんやでエンジニアは歴10年目に突入しました。

今回はいつもの技術ネタではなく、少し趣を変えて
私がハウテレビジョンという会社に転職して感じたことをレポートします。

ハウテレビジョンって何してる会社?

外資・日系トップ企業を目指す学生のための就職活動サイト
「外資就活ドットコム」を開発・運営しております。 gaishishukatsu.com

入社を決めた理由

なんとなく転職支援サイトに登録していたのですが、そこでスカウトを頂いたのがハウテレビジョンを知ったきっかけです。

私の場合、スカウトを頂いた後にオフィスにご招待いただき、カジュアルな感じの面談と社内の案内をしていただきました。 社内を見学しながら感じたのは「エンジニアにとっての働きやすさ」についてよく考えてる会社だな〜ということです。
開発部門に関していうと、高性能な椅子やハイスペックなマシンはもちろんのこと、希望すれば好きなキーボードを購入してもらえたりコーヒーやジュースが飲み放題だったり、 広く開放的なデスクだったりと、エンジニアにとって働きやすい環境になるように配慮がなされています。

また、開発手法としてスクラム開発を取り入れ、ソース管理はGitHub、サービスのデプロイは自動化されていたりと、 新しい技術やツールを積極的に導入しており、旧態依然としない挑戦的な姿勢であることも入社を決めたきっかけになりました。

快適な開発環境

エンジニアにとってストレスの少ない環境は大切だと思います。
ストレスフルな環境は、それだけで「やる気」や「作業効率」を下げてしまうものです。

ここの環境はどうかというと、先ほど述べたとおりデスクやマシン周りについては十分なものが用意されています。 他にもエンジニアの席には電話が無いので、呼び出し音に悩まされることがありません。 さらに席の近くには空気清浄機が設置されていたりと、環境改善のための努力には並々ならぬものを感じますw

ただ全く不満がないわけではなく、人数の増加にともない会議室や打ち合わせスペースが足りなくなってきています。 これは今後の課題ですね。 f:id:yumasukey:20160203165914j:plain:w300

職場の雰囲気

オフィス内の座席の配置は、それぞれの部門が作業に集中しやすいようにデザインされています。 営業・運用担当者のいるブロックとエンジニアのいるブロックは、少し離れてレイアウトされており エンジニア側からは、他部門の電話や雑音が聞こえにくくなっています。

しかし席が離れているからといって、部門間のコミュニケーションが少ないということもありません。 社員全員がSlackを使って頻繁にやり取りしています。
Slackには目的別に色々なチャネルが作られており、なかには雑談用のチャネルもあります。 夕方になると「飲みにいかない〜?」っていう募集もSlackで流れていたりしますw

f:id:yumasukey:20160203163719p:plain:w300

エンジニア同士の席も近いので、気軽に質問したり議論したりとコミュニケーションは活発! ちょっと集中して打ち合わせしたい時などは、席の近くにある打ち合わせスペース(通称ファミレス席)に移動して行います。 f:id:yumasukey:20160222174231j:plain:w300f:id:yumasukey:20160222173721j:plain:w300

ユニークな取り組み

弊社で取り組んでいるユニークな試みをいくつか紹介したいと思います。

Qiita賞

書くのが面倒な日報や業務報告だって、読み手の反応があれば頑張れるというもの。弊社ではQiitaTeamに日報を投稿しており、面白い記事にはメンバーから「いいね!」がつけられ、その週で多くの「いいね!」を獲得するとQiita賞として豪華な食事会に招待されたりします。

f:id:yumasukey:20160203165300j:plain:w300

LiveOps

日々の業務では、サービスの不具合対応やデータ更新作業など、様々な依頼がユーザーサポートチームやコンテンツチームからSlackを通じてエンジニアに送られてきます。しかしエンジニア全員が都度これに対応していると、自身のタスクを消化できなかったり、集中力が途切れてしまったりと生産性が下がってしまいます。そこで毎日「真のランダム」により公平に担当エンジニアが任命され、このような依頼に対応します。担当者が決まっているので、他のエンジニアは自分の作業に集中することができます。

狩猟祭

モンハンXで一狩り行こうぜ!
・・・ではなく、日々あがってくる改善要望には優先度が低いがために対応が後回しとなり、なかなか処理されない案件が溜まってきます。 それら溜まった案件を定期的に一気に片付けてしまおう!しかも楽しんで!(`・ω・)b 

というわけで編み出されたのが「狩猟祭」です。 月に一度くらいの頻度で開催され、対象案件にはポイントが付与されます。エンジニアは案件を処理することで、そのポイントを競います。 そして一番多くポイントを稼いだエンジニアには名誉とご褒美が与えられるというものです。

職場が渋谷

弊社のオフィスがある場所は渋谷! 複数路線が乗り入れているため通勤が楽ですし、お買い物にも便利です! しかもオフィスは2014年に引っ越したばかりなのでとっても綺麗。 今年の夏にはさらに広く快適なオフィスになるという噂も。
渋谷はIT企業が集まっている場所でもあるので、近所のオフィスで開催される勉強会に仕事帰りに参加なんてこともできます。
また渋谷は飲食店の激戦区!オフィスの周りにはおいしいお店がいっぱいです。 (`・ω・)ランチが捗ります!そして太ります!

f:id:yumasukey:20160203173838j:plain:w300

まとめ

以上、私がハウテレビジョンに入社して感じたことでした。 我ながら、この会社の良いところをいっぱいご紹介できたと思います。( ー`дー´)キリッ

しかし実はまだお伝えしたいことが1つだけございます。

現在弊社では


エンジニアが足りておりません!


サービスの拡大にともない、さらなる需要増が見込まれる中でエンジニアの数が圧倒的に不足しております!\(^o^)/

そんなわけで

ハウテレビジョンでは一緒に働いていただける
エンジニアを募集しております。

http://howtelevision.co.jp/recruit


ぜひご検討のほど、よろしくお願いいたします m(_ _)m

外資就活ドットコムの開発ワークフローの再設計

はじめに

さまよえるアラフォー男子 @artifactsauce です。

突然ですが、弊社は「外資就活ドットコム」というWebサービスを開発・運営している会社です。サービスイン当初はイケイケガンガンで高速開発・高速リリースをうたっていましたが、開発者が増えるにしたがって様々な問題が発生してきました。今回はプロダクトのリリースにまつわる問題を解決するために弊社で採用した開発ワークフローについて紹介します。

続きを読む

サーバの監視システムを設計したときに考えたこと

弊社では少し前にサーバをAWSに移行しました。 それまでは継ぎ足し継ぎ足しで作っていたものを再構成しての移行だったので、この機会にサーバの監視体制についても一新しました。

この記事ではそのときどういったことを考えて設計したかをお伝えできればと思います。

続きを読む

Selenium WebDriverで、新規会員登録フローのE2Eブラウザテストを自動化してみた。

どうも。エンジニアの@bumcruです。

Qiitaの「Selenium/Appium」アドベントカレンダー9日目の記事です。

去る10月に行われた開発合宿、今年のテーマは「自動化」でした。
テーマの範囲内で、個々人が自由に好きなものを作るわけですが、

僕が選んだお題は「Seleniumでのブラウザテスト自動化」です。

続きを読む

【開発合宿幹事向け】合宿企画の下準備工程を全て公開します。【合宿準備編】

f:id:incase:20151020011431p:plain

どうもこんにちは。
エンジニアのvsannaです。

前回の記事では、10/16(金)から10/18(日)にかけて行った合宿の様子を画像中心にお届けしました。

今回は事前準備編として、幹事様に参考になりそうな情報をとりまとめています。

これから企画をしなくては...と頭を抱えている3ヶ月前の私のような方はぜひご一読ください!

負債、返済するしかない。

howtvでは現在、技術的負債の返済に本腰をいれてとりかかっています。

サービスの稼働開始から5年が経ち、腐った時代にそぐわなくなってきたコードが無視し得ない程度にたまってきました。

アプリケーション構成の歪み・未使用コードの放置・秘伝のタレと化した手作業工程、開発チームのモチベーション低下...

より安定した良いサービスを作り続けるためにも、このタイミングでいままでの負債に真正面から向きあおうと、技術顧問に伊藤直也氏(@naoya_ito)を迎え、開発体制の立て直しを始めてはや3ヶ月。

そろそろコードそのものと向き合うときが来たのではなかろうか...となった頃合いに、「あ、そういえば今年もやる?開発合宿。」というメンバーの一声で、開発合宿の開催が決まりました。

今年のテーマは「自動化」

昨年から始まったこの開発合宿ですが、昨年のテーマは「スマホアプリ開発の知見を得る」でした。
(昨年の様子は「ハウテレビジョンのメンバーでアプリ開発合宿に行ってきました!」からどうぞ)

さて今年のテーマはどうするかとチームで考えた結果、上述した背景もあって負債返済のいちテーマである「自動化」を採択しました。

How To Become A Hackerにもある通り、同じ問題を二度解くような無駄はいやですし、退屈と単純作業は悪と思っている我々エンジニアは自動化を好む生き物です。

異論も特に無く、テーマは自動化で決定に。

事前準備が楽しい

f:id:incase:20151020013359p:plain おおまかな流れ

0. まずは昨年の振り返り

昨年の振り返りを活かすべく合宿のKPTTを見なおしてみます。

f:id:incase:20151020013507p:plain

  • 2泊3日
  • 集中できる環境づくり
  • 開発以外にかかる時間の極力排除
  • 事前の段取り設計

あたりが重要そうですね。

なお昨年の参加者にヒアリングすることは重要かつ効果的です。
参加者の声を聞いておけば大体のつまづきポイントを最初から弾くことができるでしょう。

1. 他社の調査

他社さんの開発合宿風景も調査します。
予算(泊数と単価)、場所、アクティビティ、その他コツの4点を中心に調査しました。

この辺りからドキュメントを放り込む場所としてGitHubに新しくそれ用のレポジトリを作成しました。
後々便利なので作っておいて正解だったと思っています。

f:id:incase:20151020013535p:plain

なお、その際には以下のブログを参考にさせていただきました。

実際の調査段階では他社さんの予算をつかめなかったことが残念です。
なお今回当社の合宿費用総額は最後にまとめて公開してしまいたいと思います。

2. 参加メンバーにプロダクトマネージャーの追加

当初は純粋な開発合宿として参加者はエンジニアに限定して進めていたところ、プロダクトマネージャー(以降PM)も参加したほうがいいんじゃない?との声があがり検討の土台に上がってきました。

プログラミングの経験がそこまで深くはないPM陣がコードを書いている姿を見ていると、我々エンジニアの姿勢も自然と正されるような気分になりました。話の幅も広がりますので非常におすすめです。

PM陣の課題は、

  • データ分析の幅を広げるということでSQL徹底特訓
  • 動かしている感じのするコードを、ということでクローラーの実装

の二択で用意しました。

4. 宿の決定

お値段 × 開発環境の二軸で選択し、湯河原のおんやど恵さんに決めました。

f:id:incase:20151020013628p:plain

最初に場所の選定から入りましたが、移動距離が長すぎるとそれだけで疲れるとの声から電車で1.5時間圏内の候補地を5つ(鬼怒川、湯河原周辺、千葉、奥多摩、長野・軽井沢)ほどピックアップ。

その中から、

  • must
    • 会議室などの作業場を借りられる
    • 通信環境完備
    • 温泉がある
    • 一人あたり一泊13000円を超えない
  • nice to have
    • 開発環境の更なる整備 ... タップ、スクリーン、プロジェクタ、ホワイトボードなど
    • 周辺環境の充実 ... コンビニ、アクティビティ施設
    • 明光風靡
    • 食事が美味しい
    • 温泉24時間

の条件をみたすものをゆるく探した結果約30件弱ほどの宿がmust条件にマッチ。(もっとあるかも)
nice to haveをすべて満たすところはお値段的に少々厳しかったりと諸々検討した結果、おんやど恵さんにお世話になることになりました。

決め手は【開発合宿モニタープラン】ブログを書いていらっしゃるエンジニアの方限定!ご協力内容により最大50%off!というこちらの記事。

実績として多くのweb企業が利用しているにもかかわらず、ブログを書くととんでもない割引がきくとのことで、予算を預かる幹事としては大変うれしい内容です。

しかも開発合宿専用のプランであって、サイトQ&Aもしっかりこちらの疑問を抑えている作り。

一回これを目にしてからはさくさくとこちらに決まりました。

幹事としては、

  • 開発に必要な準備一式を任せられる上に
  • 東京に近く
  • お値段安い

この三点セットはなかなかありがたいのではないでしょうか。

一方で、サイトにもある通り、食事のグレードは若干下がるようです。(気づきませんでした。)
このあたり事前に社内での優先度を確認しておクと良いかと思います。

私達の場合は温泉と集中できる開発環境が第一義だったので問題なく決まりました。

5. あとは細かい調整

ここまで決まれば後は細かい調整を残すのみです。

  • 各メンバーに開発合宿開催の正式アナウンスを行って気分を上げていく↑↑
  • 宿、電車の手配
    • 行き帰りには特急踊り子を利用しました。早くて安いということで文句なしです。
  • 細かいスケジュールを設定し、GitHubに旅のしおりとしてアップ
    • 開会の儀、閉会の儀はあると気分が締まります。
    • 朝食、夕食の時間はきっちり決めつつ、お風呂や昼食は自由にというコンセプト。
  • 各参加者に事前に個別にとりかかるテーマとその準備しておくべき工程をGitHubにあげてもらう

f:id:incase:20151026205700p:plain - 予算を確保する - 思いつきにくいところですと、タクシー代、酒代、昼食費、レッドブル・コーヒー代、(表彰が有れば)商品代などを予め計上しておくと便利です

こんなところでしょうか。

おわりに

だいぶ長くなりましたが、そんなこんなでようやく合宿です。。

合宿の手配で重要だと振り返って思う点を書き出してみました。

最後に先ほど宣言したとおり、総費用を公開して終わりとしたいと思います。

参加人数は13名です。
右列単価は単純に総額を13で割った額になっています。

項目 費用 単価 備考
宿泊費 226,000 約17,400 割引後の値段です。2泊でこのお値段。
交通費 106,800 約8,150 往復の値段
飲酒 20,000 約1,540 これを上回る分は各自個人支出(割り勘)
景品代 30,000 15,000 * 2 blu-ray2本 と高級マウス
レッドブル・コーヒー 10,000 約770 ※amazonで箱買いすればよかった...

※おんやどめぐみさんが館内でレッドブルを購入できるように手配してくださいました!

以上です!!

こちらも非常に長い記事となりましたが、最後までご覧頂きましてまことにありがとうございました!

また次回の合宿も楽しみにしたいと思います。

@vsanna

【画像57枚】開発合宿にいってきたぜ!【合宿当日編】

どうもこんにちは。
エンジニアのvsannaです。

今回の記事では、10/16(金)から10/18(日)にかけてhowtv開発陣で行った合宿についてまとめたいと思います。

飲んで騒ぐ様子から一人ひとり徹夜の開発で倒れこんでいく様子まで写真中心にお楽しみいただけます。

他のチームで開発合宿をするご予定のある方や、その雰囲気を知りたい!という方にぜひご一読いただければと思います。

幹事様の参考になりそうな情報をまとめた事前準備編は次の記事からどうぞ!

1日目 飲み会

集合

f:id:incase:20151020021608j:plain 集合場所は品川・東京・現地の3パターンでむかう。 f:id:incase:20151020021631j:plain Naoya氏がこちらを見つめる。朝食はパン。 f:id:incase:20151020021756j:plain 特急踊り子号にのって出発! f:id:incase:20151020023019p:plain 東京集合組の様子。

行き

f:id:incase:20151020021938j:plain テンションが上がるCTOと若干引いてるディレクター f:id:incase:20151020023241p:plain 行きの電車内で下調べしたり論文書いたりしているメンバーも。まじめか。

到着!

f:id:incase:20151020022246j:plain 無事駅到着。傘を置き忘れたことにこの3秒後に気づく。 f:id:incase:20151020030434j:plain きれい、可愛い、安い

昼飯

f:id:incase:20151020023519p:plain 昼食は駅前の珈琲館alcaffe。食べログが見当たらず不安。 f:id:incase:20151020023812p:plain 料理は美味しい。磯の香うどん美味しかったです。

宿の様子

f:id:incase:20151020031420j:plain 宿に到着! 門構えの写真撮り忘れた... f:id:incase:20151020024307j:plain エントランス. フロントではハーゲンダッツを購入可能(ポイント高い) f:id:incase:20151020024717j:plain 階段を上がると... f:id:incase:20151020024731j:plain 雰囲気ある光景。 f:id:incase:20151020024930j:plain 更に進むと... f:id:incase:20151020024811j:plain 更に奥へ... f:id:incase:20151020024942j:plain 湯河原なのに「両国」 f:id:incase:20151020024957j:plain 開発部屋到着! f:id:incase:20151023204249j:plain スクリーン大きい f:id:incase:20151020025234j:plain プロジェクターはHDMIとディスプレイポートが接続可能。でも要確認です。 f:id:incase:20151020025246j:plain ホワイトボード完備。でも2枚あると議論用にも使えてよかったかも。 f:id:incase:20151020025318j:plain 小物も準備OK

開会の儀式

f:id:incase:20151023204139j:plain いよいよ開会 f:id:incase:20151023203353p:plain CTO「ちゃちゃっといいもの作ってみよう。」 顧問「挨拶w」

開発

f:id:incase:20151020025655j:plain 開発... f:id:incase:20151020025747j:plain 開発......

夕食

f:id:incase:20151020031006j:plain 夕食のお時間となりました f:id:incase:20151020031018p:plain 美味しそうな食事の数々 f:id:incase:20151020031850p:plain お酒もすすみます f:id:incase:20151020031136j:plain ボス陣も暖気してきた様子

10時から飲んで...

3部屋で臨みましたが部屋割りを飲み部屋1部屋・就寝部屋2部屋の割り振りとしました。 飲み部屋を一部屋持つことでそこでは気兼ねなく飲み語らうというルールを設けられ、寝たい人と飲みたい人でうまいことすみ分けが出来たようです。

f:id:incase:20151020042742j:plain

このあとは就寝。(開発とは全く無関係の話題で熱くなっている図)

2日目 開発

宿の風景その2

f:id:incase:20151020040149j:plain 売店。ここでレッドブル置いて欲しいですな。 f:id:incase:20151020040220j:plain 何故か目を離せないあじミラー。 f:id:incase:20151020040322j:plain 中庭がきれい。 f:id:incase:20151020040334j:plain 足湯があります。 f:id:incase:20151020040349j:plain 足ふきタオルも準備万端。5回は入りました。

開発

f:id:incase:20151020031219j:plain ここからが本番

昼食

f:id:incase:20151020034208p:plain 近所に食べログ3.5以上のラーメン屋が。 f:id:incase:20151023204557p:plain 道のりが遠い f:id:incase:20151020033718p:plain ついた! f:id:incase:20151020033837p:plain 思わず唸るワンタンチャーシュー麺の美味しさ。チャーハンも注文して分ける。

tabelog.com

王ちゃんに出くわしたことでこの開発合宿の魅力が数段増したことは間違いありません。 もしこの近辺で合宿される際にはぜひ食べによってみてください。

なお席数は多くなく最大12人が座れる広さ。かつ人気店ですので事前に予約しておくことをおすすめします。 3日目の昼にも行きましたが予約で入れませんでした...

夕食

f:id:incase:20151020034403j:plain 午後の開発をすっ飛ばして夕食 f:id:incase:20151020035332p:plain 最後の晩餐で気合を入れ直します。

開発は夜を徹して行われる

f:id:incase:20151020040022j:plain 夜の足湯 f:id:incase:20151020040442j:plain 集中力が高まります。 f:id:incase:20151020040510j:plain ボス陣coding. 直也さんレッドブル飲み過ぎて眠れなくなる。 f:id:incase:20151020035937j:plain 午前三時 f:id:incase:20151020035941j:plain 午前四時

3日目 成果発表

いよいよ発表!

f:id:incase:20151020042356p:plain 各自3日間の成果を発表

表彰

f:id:incase:20151020043921p:plain 直也賞と大西賞を用意しました。 f:id:incase:20151020044001j:plain 大西賞はSeleniumでテスト自動化を導入した@bumcru0310. 最高級マウスが商品です(完全にCTOの趣味)
直也賞はzabbixを導入した@xyz_i. シュタゲとあの花のblu-rayが贈られます(羨ましい...) f:id:incase:20151020044027j:plain なんだかんだ唯一の集合写真

ぶらり湯河原

f:id:incase:20151020044221j:plain 3日の昼、帰りがけに王ちゃんに寄るも予約で入れず崩れ落ちる大人たち f:id:incase:20151020044458j:plain ソフトクリーム食べながら山道を下る f:id:incase:20151020044503j:plain 散歩の後は冷たいのでさっぱりと

後日 振り返り

合宿後、早速KPTTの振り返りを行いました。 その内容を公開して前編の締めとしたいと思います。

良かった点

  • 2泊3日だと、1日目はお酒を入れて懇親もあり、2日目はお酒なしで丸一日がっつり開発にあてることができてよかった
  • インターン生と仲良くなれた
  • 電車で行くと車に酔わないので良い / 東京から電車で移動できると楽
  • 去年よりも宿が綺麗 / 部屋がひろかった / 宿がきれい。料理もちょうどよかった。
  • 王ちゃんがいた
  • naoyaさんが居た / KOMONが来た。/ なおやさんの指摘がいい
  • 温泉で疲れが取れた
  • 昨年よりも時間管理がゆるく、自分のペースで開発できた / 時間の使い方に裁量があったのがよかった。
  • 宿が空いてたのでゆったりできた。
  • 1日目、アニメの話で夜更かししすぎた。
  • 風呂入り放題
  • 【部屋割り】先に1部屋を飲み部屋として、先に寝る人から他2部屋で寝ていき、最後まで残った4名が飲み部屋で寝るという、フレキシブルな運用はよかった
  • 成果発表会はよかった
  • ちゃんと寝た
  • 足湯がある

改善できる点

  • 設備/環境関連
    • モニタがあるとよい
    • 会議室以外のWiFiが欲しかった(会議室はとてもよかった)
    • 腰がいたい / 椅子を事前に見定めたい / 座り方を研究する
    • 少しの間でいいので、一人で開発できる部屋があるとよかった。 / いろんな場所で開発したい(会議室、ラウンジ、足湯、部屋) / 一人で開発したい
    • レッドブルやビールを冷やしておける冷蔵庫 / アイスボックスを用意すると便利
    • コーヒー飲み放題の用意をしておく
    • コンビニが近いとよい。少し遠い。
  • 事前準備関連
    • 当日にOSアップデートというチャレンジ
    • 事前準備が足りなかった(環境構築にだいぶ時間がかかった)
  • 企画、幹事関連
    • githubに事前に投げた「事前にやること」が機能してなかった
    • ランチの計画が無かった(ランチ難民化した)
    • 夕食会場で隣の人と話すぐらいしかできなかった。もうちょっと小さいグループに分けたほうが良いと思う
    • 合宿あけにリリースが入ってしまった。代休が遠い。(合宿直後にAWSへ移行しました。)
    • 各自負担と会社負担とが交じると精算が面倒
    • 鍵の管理方法を明確にしておくとよかった。
    • みんな開発に集中していて、雑談したり困ったときに話しかけるタイミングをつかめなかった
  • その他
    • 1日目、アニメの話で夜更かししすぎた。
    • naoyaさんレッドブル禁断症状発症

おわりに

合宿記事当日編は以上です!!

非常に長い記事となりましたが、最後までご覧頂きましてまことにありがとうございました!

引き続き、予算や事前の準備、宿選びにこだわったポイントなどをまとめた事前準備編(comming soon...)を幹事様向けにご用意しております。 そちらもぜひ!

@vsanna

追記

最終日におんやど恵さんのアンケートに「宿内でレッドブルを買えると非常に助かります」と書いたところ早速宿内でレッドブルを販売開始していただけたようです! f:id:incase:20151024174958p:plain 合宿終わって3日以内の対応とは恐ろしいスピード....  大変お世話になりました!