Wantedlyエンジニアブログは移転しました！
https://www.wantedly.com/feed/s/wantedly_engineers
Wantedlyフィードに新しく追加されたメディアを作成・運用できる「スペース機能」を使って運用しています。
今後ともよろしくお願いします！
はじめまして、エンジニアの天野です。
今更感があるのですが、2016/05/14(火)に行われた、管理画面チラ見せ♡ナイト#3に登壇してきました。
他社さんが、ガッツリ内部の管理画面を公開する中、（半分！）サービス管理画面の発表となってしまい大変恐縮でしたが、 穏やかな空気の中、楽しく発表できました。ご質問を頂いた方々もありがとうございました！
発表資料
このスライドで紹介されている、「候補者管理機能」は現在βテストを実施中です。
ご協力いただける企業さまは、ぜひご連絡いただけますと幸いです！
当日のツイートまとめ / レポートなど
We are hiring
ところで、この候補者管理画面は React を使って書かれています。React書きたい人、ぜひ遊びに来てください。
(弊社の React事情についてはWantedlyの最近のReact事情についてMeguro.es #3で発表しました!をご覧ください。)
エンジニアのshingtです。このblogを書くのは2年前にNeo4jの記事を書いて以来ですね。
さて、時期を少し逃してしまった感がありますが、3月にWantedlyのApple Watch用アプリをこっそりリリースしました。
このアプリには少し変わった機能として “Wantedly上に登録された企業が近くにある際に、その企業を通知・表示する” というものを入れています。（注: 通知候補は一部の企業様のみとなっております。）
設計としても多少変わったものになったため、簡単にですがここで紹介します（自分の備忘録も兼ねて）。なお、watchOS 2、iOS9上での開発です。
機能について
前述のように、このWatchアプリではユーザの近くにある企業を通知/表示することができます。 このフローは大きく分けて2つ存在しており、画面遷移は以下のようになっています。 通知もしくは起動時の画面から、最終的には同じ位置情報を表示する画面に行き着く、という構成です。
メッセージが確認できる画面等もありますが、機能としてはそれくらいで、watchOSのドキュメントやairbnbのblogなどで言われるように、本体アプリの“Lightweight Extension"となるような機能に留めつつ、watchらしい体験も組み込んだという形です。
位置情報取得周りのフロー
上の図の通り、このアプリでは位置情報をユーザが確認するフローが2つ存在しています。
- フローA: 通知経由の場合
- フローB: ユーザが自らアプリを起動した場合
フローA: 通知経由の場合
前提としてこのアプリの通知は頻繁に送る類のものではありません。
そのため、CLLocationManagerにおけるSignificant Location Changeが検出されたタイミングで、一定条件を満たしている場合のみ通知を送信する、という方針を選択しました。
シーケンス図として正確ではありませんが、大まかな流れは以下のようになります。
位置情報画面に移動してからは、watchOSのCLLocationManagerが持つrequestLocationを利用してiOS側に位置情報を問い合わせ、定期的に画面中の距離情報や地図をアップデートします。
（Apple WatchにはGPSが内蔵されていないため、iOS側に問い合わせない限り位置情報を得ることはできません。）
この際の位置情報取得はiOS側で引き続き行い、それをwatchOS側で渡す流れにすることも可能でした。 そうしなかったのは以下の理由からです。
requestLocationを利用すればそれ以降の位置情報に関するコードはwatchOS側で完結させることができる- 要件として
CLLocationManagerの精度としては最高のもの（kCLLocationAccuracyBestForNavigation）を利用する必要があり、例えばハンドリングのバグ起因でiOS側で位置情報の取得が誤って行われている（= iOSデバイスのバッテリーの消費が大きくなってしまう）という状況は絶対に避けたかった
あくまでwatchOSアプリはエクステンションと捉えており、iOSアプリ側に影響が出ることは基本的に無いように設計していました。もちろん、Apple Watchとのペアリングが行われていない端末であれば、そもそも位置情報の取得許可を得ることもありません。
フローB: ユーザが自らアプリを起動した場合
こちらはユーザが通常通りApple Watch上でアプリを起動したケースです。
先ほどよりやや複雑ですね。一度近くの企業情報を取得した後の挙動はプロセス1の場合と同様です。
当初はwatchOSがiOSに対してrequestLocationを発行し、その結果を受け取った後、再度近くの企業を取得するリクエストを発行するという方針で考えていました。
しかしこの場合、コードとしては単純に記述できるものの、watchOS <=> iOS間のやり取りが上記の図よりも余分に一度増えてしまいます。
そのためwatchOSからiOSへの問い合わせについて、図のようにWCSessionを利用して近くの企業自体をリクエストするようにし、現在地の取得はiOS上で行うようにしました。WCSessionはデバッグし辛かったりシミュレータ上で不安定だったりと少し扱い辛くもありましたが、実機上ではある程度安定していたように思います。
Local Notification / Remote Notificationの扱い
watchアプリについて、Xcode上でUIRemoteNotificationを簡単にデバッグすることができる仕組みが用意されていますが、UILocalNotificationについてはその限りではありません。
UIRemoteNotificationとUILocalNotification用の共通のラッパーを用意し、基本的に必要な処理はそのラッパーオブジェクトを通して行い、UILocalNotificationであってもシミュレータ上で挙動確認ができるようにしていました。
こちらに関してはpotatotips #28で紹介しましたので、以下スライドを参照して頂ければと思います。
まとめ
WantedlyのApple Watch用アプリに関して、主に位置情報制御と通知周りに関して簡単に紹介しました。 Apple Watchと言えば先日、今年の6月以降にsubmitするアプリについてはwatchOS 2以降のSDKを利用しなければならないとのアナウンスがありました（参考: Upcoming Requirement for watchOS Apps）。
今年のWWDCで何かしらのアップデートもあるでしょうし、何だかんだでwatchOS <=> iOS間の通信の制御は楽でもないので、この辺りが実装しやすくなることを個人的には期待したいです。
ということで、Watchアプリも付属しているWantedlyのiOSアプリは以下からダウンロードできます。ぜひぜひお試し下さい。
We are hiring
WantedlyではwatchOS、iOSに限らず、多分野のエンジニアを募集しています。興味のある方はぜひ話を聞きに来て下さい。
こんにちは、Wantedlyデザイナーの青山です。
DeNA さん、 Goodpatch さん主催のイベント、「UI Crunch #8」 に参加してきました。
UI Crunch 8回目となる今回のテーマは「デザインに求められる実装スキルと考え方」。
UI/UXデザイナーの間では、デザイナーも技術のことをわかっていないと厳しいよね・・・という認識が年々広まりつつあります。
そんな中、Wantedlyのデザイナーは「開発チーム」の一員としてエンジニアと一緒にコードを書き、プロダクトにコミットしつづけてきました。 実際にエンジニアと席を並べて毎日一緒に仕事をしていると、デザイナーとエンジニアのやっていることの違いは、それぞれの個人が得意な領域の差でしかないと感じます。 今回の UI Crunch では、そんなコードを書くのが当たり前になっている会社の事例として、Wantedlyを紹介させていただきました。
発表では主にチーム開発での効率の観点からお話しました。
一方、クオリティの面でも、デザイナーがコードを書いてリリースまで見届けることで、
細部まで妥協やあきらめのないアウトプットができているのではないかと思っています・・・！
登壇者の方々の発表内容
他の登壇者の方々の発表資料と内容はこちらにまとめられています。 皆さん、それぞれの会社での取り組みについて、その背景となる組織のカルチャーも感じられる、大変興味深いお話をされていました。
エンジニアの間で多くの勉強会が行われているのに比べ、デザイナーの間ではまだまだ知見を共有する場が少ないように思えます。 私は今回 UI Crunch に参加 & 登壇されていただいて、普段聴くことのできない色々な方の考え方に触れることができ、大変勉強になりました。もっとこのような場が増えることでデザインが元気になっていくとうれしいですね！
We are hiring
今後もWantedlyでは、コードを書いてプロダクトにコミットするデザイン文化を基盤として、 テクノロジーとともにしか実現できない強い表現、体験を作り上げていきます。興味のある方は、ぜひWantedlyまで遊びに来てください。
目黒界隈のJavaScriptを書くエンジニアがあつまる勉強会、 “Meguro.es #3 in Drecom”に参加してきました。
会場はドリコムさんのオフィス内のカフェのようなスペースで、お酒を飲みつつ、ゆるやかで居心地良い雰囲気でした。
Wantedlyからは高松と森脇の2人で最近のWantedlyのフロントエンド開発で使っているツールやライブラリの話をしました。
WantedlyにReact + Reduxを導入した話
Wantedlyのこれまでのフロントエンド開発の歴史と、既存のRailsプロジェクトにReact + Reduxを導入した方法について話しました。
Immutable.jsとReact @Wantedly ~入門編~
Facebookが開発している不変オブジェクトライブラリの Immutable.jsの特徴や、Wantedlyでの活用例についての発表です。
We are hiring
一緒にReactを書いてくれる仲間を募集してます!!!
4月13日にReactive Swift MeetupをWantedlyで開催させて頂きました。
RxSwift、ReactiveCocoa、ReSwift、SwiftFlux、SwiftBond、MVVM、FRPなどの各技術を先見的に活用されている素晴らしい登壇者の方々をお招きして、それぞれのフレームワークの特徴やパラダイムについて、また業務のアプリ開発でどのように利用されているのかをお話頂きました。アプリの開発が複雑になる中どのようにこの課題を解決していくのか、登壇者の皆さんのそれぞれのアプローチと深い知見を聞くことができ、登壇者同士の間でも互いに刺激となる会になったのではと思います。
筆者の登壇風景です。
オーディエンスにもたくさんの方々にお越し頂きました。ありがとうございます！ 登壇者やスタッフを含めると参加者は１００名ほどの勉強会となりました。弊社でこの規模の勉強会の運営は初めてなところもあり、至らず行き届いてない点もあったとは思いますが、以下のようにも言って頂けてスタッフ一同嬉しい限りです。
#ReactiveSwiftMeetup Wantedly さんの勉強会、タイムキーピング、照明、音響どれをとっても完璧だったし、運営スタッフさんも慣れている感じだった。勉強会運営という観点でも非常に勉強になった。
— Kosuke Ogawa (@koogawa) 2016年4月13日
登壇者の方々の発表資料です
キーノート / Oba Shinichiro @bricklife Mercari, Inc.
資料はありません。
SwiftBondとMVVMで状態管理をシンプルにしよう / Sugigami Yohei @susieyy Wantedly, Inc.
ReactiveCocoa 4.1入門 / Nick Matsunaga Vasily Inc.
カッコ悪くリアクティブじゃダメですか？ / Tokoro Yuta @tokorom Freelancer
Fluxで複雑な状態の変化を予測可能にするiOSアプリ開発 / Yonekawa Kenichi @yonekawa freee K.K
Getting Started with ReactiveCocoa v4.1.0 / Inami Yasuhiro @inamiy LINE Corp.
RxSwift + MVVM / Ishikawa Yosuke @_ishkawa Mercari Inc.
ReSwiftでアプリの状態管理 / ninjinkun @ninjinkun Fablic Inc.
登壇時のデモ動画もありますので、是非の以下リンクからご覧ください。
http://in.fablic.co.jp/entry/reswift
- アプリ開発と状態遷移の管理 ninjinkun's diary
- GitHub
- Blog
- Speakerdeck
Carthage and ReactiveCocoa / Ikeda Syo @ikesyo Hatena Co, Ltd.
Wantedlyは一緒にiOSアプリを開発してくださるエンジニアを募集しています！
こんにちは、川崎です。Wantedlyに参加して4年が経ちました。
今回は、Wantedlyのサービスの現状について、システム的な観点から紹介したいと思います。
事業の状況
利用ユーザ数は月間90万人、利用企業数は15000社を超えました。自分が始めた頃は、月間1万人、利用企業数150社ほどだったので、4年間でおよそ100倍に成長した計算になります。
サービスとしては、「働くすべての人のインフラへ」というスローガンで大きく2つの挑戦をしています。1つは創業当初から取り組んできた「会社と人の出会い」を生み出すマッチング事業を、さらに大勢の人に使ってもらえるようにすること。わかりやすく言えば、採用・広報媒体としてのサービスです。
そしてもう1つは、WantedlyのビジネスSNSとしての側面で価値を提供し、会社の枠を越えた「人と人のつながり」を加速させていくこと。
どのような思想で取り組んでいるのか、その背景は先日WIREDに掲載された記事によくまとまっています。
ちなみに、数カ月前にリニューアルした www.wantedly.com のトップページのデザインは、それを色濃く反映させた内容となっています。
Sync
ビジネスチャットSyncは2015年5月から開発を始めました。平均すると6人ほどのメンバー、期間は半年ほどで、ウェブ・デスクトップ・iPhone・Androidのアプリを開発しました。
開発開始時点では、Wantedlyは所謂モノリシックなアーキテクチャ、単体のRailsアプリとして開発されていました。ここでは本体アプリと呼ぶことにします。この構成は、チャットを開発していくにあたって、いくつかの課題がありました。
リアルタイムなチャットにとって、システムが高速であることと安定していることは「機能」であると言っても過言ではありません。数年間開発を続けて肥大化しているため、本体アプリの平均のレスポンスタイムは 200ms を超えていて(当時)、チャットのバックエンドとしては遅すぎると考えました。また、多い時で1日に10回以上デプロイをされているのですが、全体に影響する障害がどうしても稀に発生してしまいます。
また、開発効率も大きな問題でした。新規プロダクトということで、少しでも早く動作するプロトタイプを作り、それをマーケットにだして価値を検証していくことが求められます。30人近い開発者が変更していおり、当時、CIサーバでのテスト時間は40分を超えていて、スピーディーに開発を続けるにはつらい状況でした。また、モジュール間の相互影響や全開発者への影響を考えると、気軽にライブラリやフレームワークを新しく導入することが出来ませんでした。
以上を踏まえて、SyncのAPIサーバは、本体アプリと切り離して新しいアプリサーバとして開発することにしました。
新サービスとはいえ、ベースとなるユーザーやソーシャルグラフのデータは共通なので、既存のWantedlyアカウントで利用できるようにする必要があります。そこで、将来のさらなる複数サービス展開も視野に入れて、ユーザ認証とOAuth 2の認可を担当するRailsサーバを作成しました。具体的には、doorkeeper gemを利用しています。
メインとなるチャット用のAPIサーバもRailsで書かれています。Railsのパフォーマンス上の懸念はありましたが、リアルタイム通信のためのwebsocketを直接自分たちで用意せずMBaaSのFirebaseを使うことにしたこと、シンプルなRailsアプリにすることで許容範囲のパフォーマンスがだせそうなこと、慣れている技術を使うことによる生産性の高さを考慮して、Railsで開発を進めました。将来的にスケールさせていくためには、リアルタイムメッセージング・並行処理に実績のある別の言語を検討していくことになります。このJSON APIサーバの実装には、garage gemが活躍しました。
下の図では省略されていますが、チャットグループの参加者の画像を1枚の画像にまとめる(LINEやFacebookメッセンジャーと同じ)画像合成サーバや、ウェブフロントエンドを配信するNodeサーバが、その他に存在します。
このような構成にすることで、Syncは少人数かつ高速な体制での開発を実現し、また将来のシステム進化に備えることができました。
続きます。次回はOpen APIと会社フィードについて書きます。
Wantedlyでは「働くすべての人」に価値を提供するために、新規プロダクトに取り組むサービス開発エンジニアを積極募集しています。少しでも興味のある方は話を聞きに来て下さい。お待ちしています！
こんにちは！Wantedlyの山本あずさです。
この度、Wantedlyでは、3/2(水) - 4(金)の3日間で「Spring Internship 2016」を開催しました。 Wantedly初の新卒対象3dayインターンシップでしたが、とても好評で130名を超える応募があり、定員を5名増やし全部で25名のエンジニア学生さんに参加いただきました！！
第一日目
第一日目は、弊社代表 仲による「ZooS講座」を行いました。 仲からWantedlyのものづくり3か条と「ZooS」のやり方について説明がありました。 ディレクターがいないWantedlyでは、エンジニアが0→1でプロダクトづくりをすることが求められます。「ZooS」とは、0からプロトタイプを作成するフレームワークのことです。
1チーム5名で、黄・緑・水・紺・黒の5チームに分かれて、実際にZooSを使ってプロトタイプを作成していただきました！
ZooS優秀賞
中間フィードバックをはさみ、5チームに「ZooS」のアイディアとプロトタイプを最終発表していただきました！ 力作ばかりの中、仲により「ZooS優秀賞」が発表されました！
「ZooS優秀賞」に輝いたのは、水色チームの5名！！ 水色チームが作ったのは「Wantedlyランチ」というサービス。企業と学生が「ランチにいく！」ボタンひとつでランチをして、最終的にマッチングにつながるサービスです。
今回、優秀賞に選ばれたチームが、賞品として「Wantedlyパーカー」と第3日目の全社ミーティング「DemoDay」で発表する権利を勝ち取りました。
第二日目
第二日目はエンジニアセッション。エンジニアの本業ともいえるコードを書く作業がここから始まりました！
まずは、リードエンジニアの相川からWantedlyの開発スタイルについてお伝えしました。
Qiitaで1300ストックを超える開発フロー研修 @ Wantedlyに書いてある部分の実際のIssueやPull Requestをお見せしたり、Wantedlyがビジネスサイド含め全員がGithubを使えるのでGithubで進捗管理の共有をしていることや、コミット数などで生産性を定量化する取り組みなどを紹介たりしました。
社員訪問
この日は、「社員訪問」といって、参加者に社内のエンジニアの席にいっていただき、ざっくばらんにお話しする機会を設けました。
エンジニアセッション
今回のエンジニアセッションの課題を発表！ 「就活・インターン版WantedlyのトップページのReactJSで実装してかっこよくする！」
A-Hチームの合計8チームに分かれて開発していただきました。
事前に
- 基本的なWeb技術の話や、
- flexboxなどを使うモダンなHTML,CSSによる実装の演習
- ReactJSの基本的なハンズオン形式の講義 <= オススメ
を受けた後、ひたすら実装の時間です。
第3日目
いよいよ最終日！！ 朝一番で、Wantedlyチームリーダーの久保長から「Wantedlyのサービスづくり」について説明がありました。
発表まであと少し！！ということで、みなさん黙々とコードを書いていました。
Demo Day
Wantedlyでは隔週金曜日の17:30からDemo Dayという全社ミーティングを行っています。Demo Dayは、最近開発されたプロダクトを他のメンバーに向けて発表する機会です。
今回は「ZooS優秀賞」に輝いた水色チームの発表も社員に向けても行っていただきました。 皆さん、賞品のWantedlyパーカーがとってもお似合いですね！
エンジニアセッション優秀賞チーム
優秀賞に輝いたのは、Javaがかけるメンバーで構成されたAチーム！！JavaとJavascriptは名前が似てるだけあって、相性が良かったのかもしれませんね。 審査員のエンジニアによると、「自分たちで考えたユーザーユーザーインサイトをしっかり反映していたのと、実装の完成度も高かった」とのことでした。
以上です！ 3日間を通して、Wantedlyのカルチャー、ビジョン、働き方を知ることが出来たり、実感出来たりする機会となっていたら幸いです。 参加いただいた皆様、インターン運営にご協力いただいたWantedly社員の皆様、誠にありがとうございました！！ 今後もこのようなインターンを開催していきたいと思います。
Wantedlyインターン 体験記まとめ
この度は多くの参加者にブログで今回のインターンについて書いていただきました (*´ڡ●)
- Wantedly インターン – cheolblog
- インターン in wantedly _ ものおき
- Wantedly SPRING INTERNSHIP 2016 に参加しました - yu-i9.hs
- WantedlyのSPRING INTERNSHIP 2016に参加しました！ - otokunagaのブログ
- Wantedly Spring Internship 2016に参加してきました — Medium
- Wantedly Spring Internship 2016参加まとめ - FREEDOM -
- Wantedlyの春インターンに行ってきた話 - たけっぱ横丁
- Wantedly Spring Intern 2016｜Masahide Ishida｜note
- WantedlyのSpring Internshipに行ってきた！ - TKeiの日記
- WantedlyのSpring intern2016に行ってきた _ Webサプリ
Wantedlyのインターンに少しでも興味を持った方、実はWantedlyは通年でインターンを募集しています！！
こんにちは！よちよちアイドルの山本あずさです。 今回、第一回よちよちレッスンを行いました！ 講師は、、、！この方！ ビザスクの中川伸一さんです！
中川伸一さん
https://www.wantedly.com/users/78748
Agileと野球が大好きなアラフォーエンジニア。
公私共にオープンデータを活用したプロダクト開発をやっています。
世の中のデータをカジュアルに解析・可視化、その仕組みを使いやすく纏める事をモチベーションにエンジニアリングをしています。
- Python開発経験：5年
- 主な制作物：Webサイト、ビッグデータ分析、Pepperアプリ開発
- 実績：年に一度開催されるPythonのカンファレンス「PyCon JP」にて、2014年・2015年の二年連続で発表者として登壇しています。 (中川さんについてより知りたい方は、Googleで「Python 野球」と検索してみてください！）
今回、何がつくりたいか事前に聞いていただいたので、 「インスタグラムみたいなアプリをつくりたい！！」と伝えました！！ （思い出を彩るのが一番の趣味だったため、、、Wantedlyと関係なくて申し訳ないです。）
ただ、私のよちよちがよちよちのよの字レベル（エディタをDL！レベル）であったため、 ペアプログラミングという方法で、下記のような項目を教わりました！ よちよちであるため、一緒になって書いていくやり方はとてもわかりやすかったです！
- PyCharmの使い方とPythonの書き方（HelloWorld）
- Pythonを使って画像を小さくする
プログラミングは料理と一緒
中川さんからプログラミングは「料理」であると教えていただきました！ 料理、たとえばカレーをつくる時に、レシピをみながら材料を切ったり煮込んだりして、つくっていきます。 今回は、レシピをみながら料理教室の先生（＝中川さん）とカレーをつくる、といった感じで進めていきました！
この時知ったのですが、エンジニアの方々は見なくてもカレーがつくれる（レシピと先生とかいなくても頭にレシピ入っている）といった状態のため、当たり前に呪文を書いていけるようになるとのこと…！！ 私もいつか！！レシピを頭にインプットして、難しい料理（たとえるならロールキャベルとかビーフ・ストロガノフとか）つくれるようになりたい！！！です。
画像を小さくすることに成功…！！
結果お気に入りの画像を半分にするところまで出来るようになりました！！！ インスタグラムのさわりができました！！！ありがとうございます！ 先生（＝中川さん）がいなくても書けるようになれるよう、これからも精進してまいります！
またよちよちInstagramなるものを目指して作り続けたい
私は本来インスタグラムのようなアプリをつくり、自分のアプリで思い出を彩れるようになりたいと考えております。 また、よちよちアイドルということで、いろいろな言語をちょっとずつ出来るようになりたいと考えています。 そこで、次回はインスタグラムに近づくステップ（機能）をGo言語で教えてくれる人をWANTEDいたします！！！ （Wantedlyに興味がある方にご応募頂いた場合には、面談の設定などお手伝いできることもあります！！ので、ぜひオフィスに遊びにきてください！）
「よちよちアイドルにGo言語を教えてくれる人WANTED！！」
また！中川さんのいるビザスクでもエンジニア大募集です！！ 教え方も上手でPythonマスターの中川さんがいる職場で働いてみたいですよね！ エンジニアの募集をしているとのことなので、ぜひオフィスに遊びに行ってみてください！
こんにちは、Wantedly のエンジニアの南直 @south37 です！
先日、Wantedly では湯河原での開発合宿を行いました！その際、「目標をあらかじめ決める」、「1日目はお酒を飲まずに開発に集中する」という2つの約束事を実践したところ、想像以上に開発に集中でき、きちんと成果も出す事ができました！
自分たちにとっても想像以上に良い結果となったので、その経緯をまとめたいと思います！！
開発合宿の経緯
今回の開発合宿は、「きちんと時間を取らないと取り組めない事」をやりたいというモチベーションから始まりました。取り組む候補としてはマイクロサービス化を進める事や Rails のバージョンを上げる事、RabbitMQ の様な新しいミドルウェアを試してみる事など色々ありましたが、最終的には全てひっくるめて「Wantedly のサイトを 20%スピードアップする」という大きな目標を立てました。
成果を出せば第二回開発合宿にも繋がるんじゃないかという期待から、僕らのモチベーションも上がりました。
合宿の様子
それでは、実際に合宿の様子について書きたいと思います。今回お邪魔したのは 「おんやど恵」という湯河原の温泉旅館で、12/21~12/23 までの2泊3日の合宿でした。「おんやど恵」は開発合宿用の設備を整えていて、 増井さんが行っていたり、ハウテレビジョンさんが行っていたりして、開発合宿先として人気の旅館の様です。評判と設備を見て、僕らもここに決めました。
オフィスからの出発
12/21(月) の 14:00 から始まるエンジニア全体ミーティングを終えた後、合宿組はおもむろに出発しました。
合宿に向けて、心なしか浮き足立つ面々。思わず笑みがこぼれています。
湯河原までは、電車で向かいます。
湯河原到着！！さらに、巡回バスで一本で「おんやど恵」に到着！！バスですぐにこれるのは便利ですね！！
1日目の開発開始 (17:30)
着いたのは 17:30 頃、夕食は 18:30 からと聞いて、この1時間を無駄にしない為に早速開発を始めました。
「おんやど恵」さんは開発合宿に力を入れているだけあって、開発環境がかなり充実していました。48時間いつでも好きに使って良い会議室が一部屋（10人が余裕を持って座れる広さ）いただけて、大量の電源タップとホワイトボードが設置されていました。更に、無線LAN は高速かつかなり安定していて、ネットワーク関係でトラブルになる事は全くありませんでした。実測値で常時下り 30MBps 出ていたので、開発するには充分だと思います。
最初の1時間は、手を動かすというよりは方針決めの時間にしました。「Wantedly を 20%高速化する」為に何ができるか、そもそも何の値を使って「20%」を出すのかというとこから話して、以下の方針を決めました。
- 最終ゴールは、NewRelic の BROWSER タブで確認出来る「Brower page load time」の平均を 20% 早くする事
- その他、個別のページや RDB のレスポンスタイムなど、より細かい単位での改善&ベンチマークも行う（最終ゴールが達成できなかった時の保険の意味もありましたw）
- 1チーム1~3人くらいで幾つかにチーム（タスク）を分けて、それぞれで個別の最適化を行う。大きく分けて以下のチームが存在した
- リクエストが集中しているページの高速化（Wantedly はサイトの特性上「募集ページ」や「募集 Widget」へ極端にアクセスが集中していた。個々の resopnse はそこそこ早いもの Brower page load time で見ると全体の 58% を占めていたので、ここの最適化が必須と感じた。）
- RDB のチューニング（Wantedly は RDS で PostgreSQL を使っていて、これまでチューニングに力を入れてきていなかった。その為、最適化の余地はかなりあると思っていた。これについては @awakia が Qiita にもまとめている）
- JavaScript ファイルのロードタイミングの最適化（HTML のパース中に script タグが現れると、スクリプト実行によってページのレンダリングはブロックされる。その為 script タグはページ末尾に集める事がベストプラクティスとなっているが、そのベストプラクティスが守られていないページが幾つか存在した）
- リソースの非同期読み込みの徹底（scroll でしか現れない画像など、first view では現れない要素を非同期に）
- 社内用管理画面の高速化（ユーザーは目にしないが、その為に雑な実装になっている部分が多くあったので、最適化を行った）
- 出来れば1日目で目標を達成して、2日目はゆったり湯河原を楽しむ！！！
方針を決めたところで良い感じに夕ご飯の時間になりました。
1日目の夕食 (18:30)
さて、待ちに待った夕食です。おんやどの夕食は「ザ・旅館のご飯」という感じで、様々な美味しいご飯が次々に運ばれてきました。
最初に頂いたのは数の子や昆布などの珍味。
次に頂いたのはお刺身。美味しかったです。
お蕎麦。これも美味しかったです。
煮物。僕は大根が大好きです。
天ぷら。
そしてお鍋に入れて頂くお肉！！たまりませんね！！！
次々運ばれてくる美味しい食事に、思わず笑みがこぼれます。
こうして美味しく夕食をいただいた後は、温泉へ向かいました。（尚、僕らは1日目で何とか高速化を達成しようと意気込んでいた為、お酒は飲みませんでしたw これも2日目に楽しむ為の投資です）
温泉
温泉は、室内の温泉に加えて、露天風呂も付いていました。 露天風呂に浸かって、英気を養う面々。とても気持ちが良かったです。
足湯&喫煙コーナーも、癒しの場になりました。
開発再開 (20:30)
温泉を堪能した後は、いよいよ開発再開です。浴衣に着替えてはいますが、完全にガチモードです。各自、自分のタスクに没頭しました。
開発は次の日の朝 6:00 ごろまで夜通し行われました。
2日目
前日の作業が明け方まで続いた事から、次の日はなかなか起きれない。。。と思ったのですが、旅館のとてもパワフルな仲居さんに起こされて、ちゃんと朝食を食べる事が出来ました。
朝食の後は、引き続き開発を行います。作業は進んでいたもののまだ 20% の高速化は達成できていなかった為、皆少し焦りながら開発をします。
集中して作業していると、気がつけば 14:30 に。さすがにお腹が空いてきたので、お昼ご飯に向かう事にしました。近辺のお店を検索してみて、ワンタンが美味しいと噂の「王ちゃん」というお店に向かうことにしました。
外を歩くと自然が広がっていて、良い気分転換になります。
お店は老夫婦でやってらしていて、人数が多かったのでカウンターと座敷に分かれてご飯をいただきました。
料理の写真は取り忘れてしまいましたが、食べログのページにたくさん写真があったので興味が湧いた方は見て見てください！ 王ちゃん - 熱海/ラーメン [食べログ]
昼食の後は近くにあった公園でちょっと遊んでから、旅館に戻ってきました。
旅館に戻るとすぐさま開発に移ります。結果を出す事を求められている為、どこまでもストイックです。
気がつけば 2日目の夕食の時間が迫ります。ここで成果を確認したところ、 Brower page load time が 28% 改善出来ている事が分かりました。目標達成です！！！
2日目夕食 (19:00)
目標が達成できた為、最高に良い気分で夕食を楽しむ事が出来ました。 お酒も解禁です。みんなで、「20%高速化」達成を祝って乾杯をしました。
2日目の夕食もとても豪華でした。
夕食後は温泉に浸かり、さらに近くのセブンイレブンで宴会用のお酒やおつまみを買ってから、会議室へ向かいます。会議室なら広くてみんなで集まって話しやすいので、宴会にぴったりだろうという判断でした。
開発再開
目標は達成したとはいえやりかけの作業や PR も残っていたので、会議室に着くと自然と開発が再開しました。適当な時間になったら自然と飲み会が始まるだろうと誰もが思っていました。
ところが、これが最大の誤算でした。エンジニアの性なのか、やりかけのタスクとPCを目の前にするとどうしてもコードを書き続けてしまい、気がつけばほとんどお酒を飲まないまま 2:00 に。
流石に眠くなってきたので、部屋に戻ってゆっくりと眠りに着きました。
3日目
3日目の朝も、美味しい朝食を頂きました。
もう目標は達成できているので、朝食後は部屋でゆっくりします。幸せな時間です。
10時がチェックアウト、11時に会議室を出なければならないとの事だったので、荷物をまとめて部屋を後にします。3日間のほとんどを過ごした会議室を離れるのは、なんだか感慨深いものでした。
宿からはバスで駅へ向かうので、バスの時間までは思い思いの過ごし方をします。エントランスでゆっくりしたり、足湯に浸かって癒されたり。足湯はとても気持ち良くて、コーディングにもぴったりです。
存分に満喫してから、3日間お世話になって旅館に別れを告げて、帰ってきました。「おんやど恵」さん、ありがとうございました。
開発合宿を振り返って
まずは成果についてですが、目標であった「Brower page load time の 20% 高速化」を達成する事が出来ました！
Before(3.81 s)
After(3.02 s)
Dom Processing
また、 DOM processing に限定すると、 1.85s => 1.1s で 41% の高速化が出来ました！
PostgreSQL
PostgreSQL のパラメータチューニングの結果も、 31ms -> 23ms で 25％ の高速化が出来ました！
その他細かい部分での改善も出来て、総じて良い結果となったと思います。
良かった点について
事前に目標を明確にしていた事と、開発の初期段階で目標達成の為の作業の方向性を（現状の数字を見ながら）決めれた事が良かったんじゃないかと思っています。また、遊ぶのは目標を達成してからにしよう、と心を鬼にして決断できたのも大きかったと思います。
反省点について
2日目の夜は目標を達成できていたので大いにはしゃぐ予定だったのですが、エンジニアの性なのかPCを前にすると気がつけばコードを書いていました。ここは反省点だと思っていて、無理矢理にでもイベントを用意すべきだったと思っています。次に開発合宿をする際は、目標を達成するだけでなくレクリエーションにも力を入れたいと思っています。
最後に
今回、Wantedly で開発合宿をやってみるのは初めての挑戦でした。本当にちゃんと集中して開発ができるのか、パフォーマンスが出せるのかなど不安も大きかったのですが、蓋を開けてみれば大成功とも言える結果でした。 今後も定期的に開発合宿を実施していく予定です！Wantedly の開発合宿に興味が湧いた方は、ぜひ気軽に話を聞きに来てください！！
最近の記事
- エンジニアブログは移転しました
- 管理画面チラ見せ♡ナイト#3 に登壇してきました
- Apple Watchアプリをリリースしていました
- Wantedlyのデザイン事情について UI Crunch #8で発表しました！
- Wantedlyの最近のReact事情についてMeguro.es #3で発表しました!
- Reactive Swift Meetup @Wantedlyを開催しました！
- 2016年のWantedlyアーキテクチャ (1)
- Wantedly Spring Internship 2016
- よちよちPythonしてきた〜プログラミングは料理と一緒〜
- Wantedly エンジニアチームは湯河原温泉で開発合宿を行いました！