読者です 読者をやめる 読者になる 読者になる

mixi Engineers' Blog

株式会社ミクシィで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Mixi Engineers Blog

Padrino (WAF) の仕様変更にともなって発生した障害の原因を追いかけた話

はじめまして、豊川と申します。所属はCS部門専属の開発グループで、通称CS開発といいます。CSとは顧客満足 (Customer Satisfaction) のことを指します。
業界でもCS部門に専属の開発チームがあるのは珍しいかもしれません。専属の開発チームがあるとCSスタッフからの依頼や要望、プロダクトのアップデートに素早く対応できるので、サポート品質の向上やサービスの健全化に貢献できるという特長があります。
CS開発の業務は、ヘルプやお問い合わせフォームの改修から、決して表舞台に出ることのない社内向けCS管理ツールの開発保守やアクセスログの解析、さらにはクライアントアプリの改修やちょっとした業務補助スクリプトの開発まで多岐に渡ります。
本稿では、CS管理ツールで使用しているPadrinoの仕様変更にともなって発生した障害において、調査から解決に至るまでのお話をしたいと思います。

jp.padrinorb.com

続きを読む

POStudy Day 2015 Spring in Tokyo - 参加体験記

こんにちは。15新卒デザイナーの豊島です。

5月24日に「POStudy Day 2015 Spring in Tokyo 〜顧客価値の再定義:新しい価値を見つけ出すための一日〜」というイベントが弊社で行われました。今回の記事では、参加者として学んだことや気づいたことについて、ご紹介させていただきます。

POStudyとは?

プロダクトオーナーシップ勉強会のことです。プロダクトオーナーシップはプロダクトの責任者だけのものと思われがちですが、本来はプロダクトに関わるメンバー全員のものであり、「自分ごと」として捉える必要があります。

POStudyでは、実際に手を動かすことで、新しい発見や気づきを得ることができるような場をメンバー間で作っていきます。今回のテーマは「顧客価値の再定義」ということで、様々なフレームワークを試しながら、グループで議論しました。

f:id:mixi_engineers:20150526155409p:plain

会場の様子

タイムスケジュール

09:30 - 09:50 オープニング

09:50 - 14:00 顧客への提供価値を考える(製品企画)

14:00 - 16:30 顧客への提供価値を重視したビジネスモデルを考える(ビジネス企画)

16:30 - 19:00 顧客への提供価値を重視したユーザーストーリーを考える(製品設計)

19:00 - 19:30 振り返り&ディスカッション

19:30 - 20:00 クロージング

フレームワーク

今回のイベントでは、5つのフレームワークに沿って作業しました。毎回フレームワークの使い方について説明があり、各グループで作業するという流れでした。

  1. カスタマージャーニーマップ
  2. バリュープロポジションキャンバス
  3. ビジネスモデルキャンバス
  4. ピクト図解
  5. ユーザーストーリーマッピング

この中で特に興味を持ったのは、バリュープロポジションキャンバスです。バリュープロポジションとは独自価値のことで、JTBD (Job to be done)という顧客が実行したいことをベースに「誰にどんな価値を提供するか」を考えます。この顧客が誰か、というところで価値は変わってきます。

f:id:mixi_engineers:20150527115226j:plain

バリュープロポジションキャンバスの説明

このように、バリュープロポジションキャンバスには四角と丸を使います。提案する価値は論理的であるため四角で表し、顧客セグメントは感情的であるため丸で表します。

提案する価値(四角)に含まれること:

  • Product & Service : 提供する製品・サービス
  • Creator : 顧客にとって嬉しいことを増やす
  • Reliever : 顧客にとって嫌なことを減らす

顧客セグメント(丸)に含まれること:

  • Gain : 顧客にとって嬉しいこと
  • Pain : 顧客にとって嫌なこと
  • Job : 顧客がしたいこと

埋める順番は、丸⇒四角です。まず顧客のしたいことを考えて、それを元に嫌なこと、嬉しいことを考えると丸が埋まります。顧客のしたいことを元に、製品・サービスとして提供できることを考えて、嫌なことを減らす方法、嬉しいことを増やす方法を考えると四角が埋まります。両方できたら、丸⇔四角が合致しているか見比べます。 

f:id:mixi_engineers:20150527115248j:plain

ポストイットを使った例

バリュープロポジションキャンバスを使うことで、とてもシンプルにまとめることができました。慣れれば頭の中で出せるようになってくるそうです。また、他のフレームワークと連携させることもでき、例えばバリュープロポジションキャンバスのGainとPainがジャーニーマップの感情曲線とリンクしていたり、バリュープロポジションキャンバスの四角がビジネスモデルのキャンバスのVP(価値提案)、丸がCS(顧客セグメント)と同じだということを知りました。 

f:id:mixi_engineers:20150527115238j:plain

フレームワーク間でリンクしていることを示す図

ワークが全ておわってから、集合写真を撮りました。様々なバックグラウンドを持ったメンバーが集まってグループになっていたので、視野が広がって面白かったです。

f:id:mixi_engineers:20150527115234j:plain

集合写真

学んだこと

フレームワークを理解するためには、手を動かして実際にやってみることが大切だということが分かりました。さらにそれを使いこなすためには繰り返し使って、慣れておくことが必要なので、これからも使い続けていきたいです。

グループで作業をしてみて気づいたのは、共通認識を作ることが必要だということです。議論している内容がずれていた、ということにならないためにも、言葉の定義を確認したり、いつでも振り返ることができるように可視化しておくことが大切だと分かりました。

参考になるスライド

このイベントで使われていたスライドは、SlideShareに公開されています。

 

他にも、講師の方々が過去のイベントで使われていたスライドも公開されています。

 

参考になる記事

各フレームワークについて紹介している記事があるので、興味を持った方はぜひチェックしてみてください。

ワークシートをダウンロードできるサイトもあります。

お知らせ

POStudyに参加してみたい!という方は、毎回Doorkeeperから募集しているので、ぜひご参加ください。次回は7月11日と7月12日に行われます!

弊社にも遊びにきてください!

「すごいGit楽しく学ぼう」を公開しました

こんにちは、toma です。

つい先日、新卒エンジニア向けに Git 研修を行いました。
その時の研修資料「すごいGit楽しく学ぼう」を Speaker Deck にて公開しました!

「すごいGit楽しく学ぼう」は、Git に触ったことがないという方でも、Git を使ったチーム開発に参加できることを目指して作成しています。
実際にミクシィでは、ほとんどの部署で GitHub や GHE を利用しており、Pull-Request を活用してチーム開発を進めています。 Git の習得は、ミクシィで開発を行っていく上で必須のスキルであるため、新卒研修として毎年実施されています。

資料の目次

  • とりあえず使ってみよう!
  • コミットとブランチについて正しく理解しよう
  • 歴史を取り込む
  • 落穂拾い

Git のコマンドをひと通り使ってみた後、Gitの仕組みについてひとつずつ学んでいくという構成になっています!

終わりに

公開した資料を使って、Git についてぜひ学んでみてください!
Git は一度使うと、Git が無い世界には戻れなくなると思ってしまうほど便利なツールです。

資料に誤りなどあれば、お気軽にご指摘下さい。

See Also

株式会社ミクシィや、このエンジニアブログでは、以下のような教材資料もご提供しています。ぜひご利用ください! alpha.mixi.co.jp alpha.mixi.co.jp alpha.mixi.co.jp

2日でできる! JavaScript トレーニング

こんにちは。SNS mixi の JavaScripter、kuniwak です。

新しい仲間たちが入社する季節になりましたね。

さて、ミクシィを支えるエンジニアが作成した JavaScript 研修の資料を Github にて公開しました。 ミクシィは 2013年から研修資料を公開していましたが、今年は JavaScript の進化に合わせて内容を刷新しています!

f:id:mixi_engineers:20150415181827p:plainf:id:mixi_engineers:20150415183035p:plainf:id:mixi_engineers:20150415181908p:plain

2015年度の JavaScript 研修は、Web アプリケーションの部品(モジュール)をつくれるようにすることを目標とした、実践的な研修として計画されました。

JavaScript 研修のために与えられた期間は2日ということもあり、MVC や Flux といった設計方面の話題には踏み込めていませんが、Promise、Fetch API、Bower など、現在・未来のフロントエンド開発に必須の要素を盛り込んだ最新のJavaScriptの研修資料となっています。

資料の目次

  • セットアップ
  • JavaScriptとは
  • JavaScript に会いにいこう
  • 開発環境道場
  • トレーニング
    • ステージ1 DOM 要素を取得するトレーニング
    • ステージ2 DOM 要素の属性・テキストを変更するトレーニング
    • ステージ3 DOM の構造を変更するトレーニング
    • ステージ4 DOM イベントを利用するトレーニング
    • ステージ5 非同期処理のトレーニング
    • ステージ6 モジュールを実装するトレーニング
    • ステージ7 よくあるイディオムを読むトレーニング
    • 解答・解説について

資料の全体は、mixi-inc/JavaScriptTraining からご覧いただけます。

内容に盛り込めたこと

Custom Elements + CSS Animation

すでに Stage1 に挑んだ方は、唐突に現れる「アレ」に驚いたかもしれません。 実は「アレ」は Custom Elements + CSS Animation によって実現されています。

この Custom Elements は、Web ページの再利用性を高めることを目的とした新しい技術のひとつです。また、CSS Animation は CSS で実現できるアニメーション技術です。

これらの技術の利用に至った理由をまとめると、Elements タブから意図した HTML タグを見つける方法も学んで欲しい、ということになります。

Stage1 では、ほとんどが開発ツールのインスペクター(虫眼鏡のアイコンのツール)で見たい情報を調べることができます。しかし、ときにインスペクターでは捕捉できない要素(不可視・アニメーションしている要素)の調査をしなければならない状況に出くわすこともあります。その場合は、開発ツールの「Elements」タブから、地道に HTML タグを辿っていくことになるでしょう。この状況を体験してもらいたいという意図があって、簡単にはわからない目印 + インスペクターでは捉えられない要素といった、2つの条件を満たすべく、Custom Elements と CSS Animation を採用しました。

ES6 Promise + Fetch API

Stage5 では、ECMAScript 6 の目玉機能のひとつである Promise のトレーニングを盛り込みました。これからの JavaScript は Promise 抜きに語れない時代になりつつあります。

早い段階で Promise に触れておくことで、Fetch API などがやってきた場合に備えておこう、という意図があるわけです。

Lint の教育的活用

私は VimScript の Lint である「Vint」の開発者であるということもあって、Lint について強い信念があります。

Lint には2つの目的があるのですが、そのうちのひとつがミスの発生しやすいコードの指摘です。 JavaScript の言語仕様には多くの罠が潜んでおり、初心者はミスの発生しやすいコードを書いてしまいがちです。しかし、ESLint、JSHint、JSLint といった素晴らしい Lint たちが、ミスの発生しやすい箇所を指摘してくれます。 Lint 開発者にとっては、初心者にこそ Lint を使ってもらいたいのです。

このトレーニングでは、ステージクリア後に下のコマンドを実行すると Lint が実行できます。 ステージのクリア後には、ぜひ Lint を試してみてください!

gulp lint-stage1

内容に盛り込めなかったこと

ECMAScript 6 の構文たち

じつは ECMAScript 6 を使った内容にしようかどうか非常に悩みました。JavaScript の未来を見据えるのであれば、prototype を使った継承よりも class 構文を使った継承を優先的にレクチャーするべきだからです。最近は信頼できる ECMAScript 6 transpiler が複数公開されているため、導入も容易です。

ただ、これにはデバッグがしづらくなるという問題点があり、泣く泣く断念しました。 デバッグ難度がさほど変わらない Proimise や Fetch API については、Polyfill を使って利用できるようにしています。

ところで、ミクシィはなぜ研修資料をつくるのか

プログラミング言語としての JavaScript を学ぶのであれば、よい書籍・Webサイトがたくさんあります。しかし、私はこれらの資料がデバッグについての視点に乏しいことに不満をもっていました。 開発にはデバッグがつきものなのですから、Chrome や Firefox などの「開発ツール」によるデバッグを含めなければ、最前線で Web アプリケーションを開発できるレベルまで到達できないと考えていたのです。

また、JavaScript は進歩がとても速い言語ですから、時期にあわせて適切な内容であることも必要だと考えていました。たとえば、これまで Ajax (非同期通信)といえば XMLHttpRequest でしたが、これからは Fetch API を使って実現することになっていくことでしょう。これを見越して、非同期通信のトレーニングでは Fetch API などのこれからの技術を使いたいと考えました。

そしてもうひとつ、ミクシィの Ruby や Perl の研修資料がわかりやすい秘訣のひとつが、テストをクリアしていく形式だったということがあげられます。2013年の資料ではテストをクリアしていく形式ではありませんでした。

これらの背景を整理すると、私が研修資料に求めた条件は以下の3点でした。

  • 開発ツールのトレーニングにも重点をおいている
  • 未来の JavaScript を見据えている
  • テストを解いていく形式になっている

私の調査した限り、これを満たす資料は存在しませんでした。

欲しいものがないならつくるのがエンジニアですので、つくることにしたというわけなのです。

むすびに

ミクシィの JavaScript 研修資料を自習等にご活用いただいて構いません。

内容に誤り等あれば、お気軽にご指摘ください。 Issue や Pull Request からでも対応いたします。

See Also

株式会社ミクシィや、このエンジニアブログでは、以下のような教材資料もご提供しています。ぜひご利用ください!

御社クラック志望です: Scrap Challenge卒業生9人に8つの質問

マイナーなエレポップ・ユニットには目がない、人事 & イノベーションセンター もりもとです。オランダの2人組Rupesh Cartelいいですねー。

ミクシィでは、2004年から開発運営しているSNS「mixi」に、わざと脆弱性を仕込んだクローンを立ち上げ、みなさんに穴を探してアタックしていただくという学生向け技術イベントScrap Challengeを定期的に開催しています。最初の開催は2011年。腕に自慢の、あるいは技術的好奇心にあふれた多くの皆さんにご参加いただき、チャレンジいただきました。

加えて、このイベントを通してミクシィにご興味いただき、結果として入社いただいた腕利きの新卒エンジニアのみなさんも9名います。

ひとつの振り返りとして、いわば「Scrap Challenge卒業生」のみなさんにお話をうかがってみました。

ミクシィでの仕事

: 皆さん今日は年末のお忙しいなかどうもありがとうございます。Scrap Challengeがご縁になって仲間になったみなさんに、まずは最初の質問として、「ミクシィでどんなお仕事をしてらっしゃるのか」概要を教えてください。

北原さん: 入社年度は13年(2013年)、新卒として入社しました。得意な開発分野はAndroidでのネイティブアプリ開発です。入社してまずは社内新規系Androidアプリの開発を行い、その後で「mixi」のサービスの改善に移りました。プロフィール機能の改善は、Web版、Android版、iOS版と、クロスプラットフォームで担当しています。他は社内のコードレビューにも関わりました。

へんてこさん: 2014年入社です。5月の配属からは、「mixi」のネイティブアプリ(主にiOS)の開発を行っていました。iOS 8が出る時期には、新機能であるShare Extentionなどの実装をしていました。また10月からはDeployGateに配属が変わり、今は主にサーバーサイド(Rails)の開発を行っています。

生島さん: 13年に新卒で入社しました。「mixi」事業において、データ分析基盤の整備と、実際の分析業務を行っています。

鈴木さん: 同じく13年に入社です。「mixi」のiOS版アプリの開発をやっています。

f:id:mixi_engineers:20141222163510j:plain

2014/11/16開催Scrap Challengeのチューターを務める鈴木さん

木下さん: 2013年入社です。「mixi」の、おもに期間限定コンテンツを手がけています。例えばタイアップ企画などですね。開発対象の種別としてはWebアプリケーションです。

: ここまでが、2011年12月4日のScrap Challenge第1回開催に参加いただいたみなさんですね。Scrap Challengeは、それほど採用色イベントは強く出さず、参加者のみなさんの想定入社年度にもこだわっていないので、参加後の入社年度もいろいろだったりします。
このときの第1回の様子はtogetterでもご覧いただけます。


當眞さん: 2014入社です。「mixi」のコミュニティを担当しています。WebアプリケーションとAndroid版アプリの両方をやっています。

f:id:mixi_engineers:20141222164320j:plain

2011/11/16 Scrap Challenge懇親会での當眞さん

 

国分さん: 「mixi」のトップページ、いわゆるhome.plの高速化を担当しています。同じく2014年入社です。

齋藤さん: 同じく2014年に新卒で入社です。入社前にはCS(Customer Satisfaction)でモンスターストライクの問い合わせに対応する際に使用される管理画面の改修や機能追加を行っていました。入社後は研修の後、グループ会社の株式会社Diverseで婚活支援サイトのyoubrideのサーバサイドの開発や同期と共に会員の分析や施策の提案、実施を行っていました。

齋藤さんはその後、秋に新進気鋭のベンチャーにジョインされ、2社をまたがって技術的活躍しています!

 

 

: 當眞さん、国分さん、齋藤さんは2013年1月19日のScrap Challenge第5回の参加者ですね。


2013年入社の鈴木さんもそうですが、當眞さんと国分さんには、その後Scrap Challengeの概論やチューターも担当いただいてます。参加する立場から、今度は開催する立場へと転身。

参加した理由

: では、Scrap Challengeというイベントはどうやってお知りになりました? 参加した理由もあればぜひ。

齋藤さん: Twitterで流れてきて知ったと思います。

生島さん: Twitterか就活サイトで知りました。

北原さん: 就活系サイトですね。

木下さん: ミクシィのエンジニアさんから「遊びに来たら?」と誘われて、会社見学中にイベントのことを教えてもらって知りました。

鈴木さん: 僕も、木下さんと一緒に会社見学したときに聞きました。

へんてこさん: 大学でも会社でも1年先輩にあたる鈴木さんが参加すると言っていたので知りました。

: おお、最初はメディア経由になりますけど、その後はいわゆる口コミやつながり経由にもなってきてるんですね。

當眞さん: 某社の説明会で会った就活生仲間に教わりました。

国分さん: 「リアル版:サンタのためのコードゴルフコンペ&クリパ」というイベントで話を聞いて知りました!

: リアルが充実……

北原さん: 参加した理由ですが、当時はまだネットワーク・セキュリティに関する知識がそんなにありませんでした。しかしセキュリティまわりを押さえておくのは非常に大事だと思っていました。かつ、「mixi」ってすごい規模と技術でできていると思ったので、そこが開催するセキュリティ関連イベントなら、知識に結びつく体験が得られると思ったのです。

斎藤さん: 以前からセキュリティには興味があったからです。昔セキュリティキャンプに参加したのが懐かしく、こういったイベントに改めて出たいと思いました。

鈴木さん: 面白そうだったからです(うなずき多数)。「mixi」を攻撃できるチャンスというのは面白いです。そのころ、同じくミクシィのBuild Challengeという、Androidネイティブアプリを開発するワークショップイベントにも参加したので、Build(創り上げ)してScrap(ぶっ壊す)するという組み合わせも面白いと思いました。

木下さん: 同じく面白そうだったからです。そのころは就活まであんまり考えてなかったですし。

: あんまり「就活就活」したイベントにはしたくなくて、その辺は少しゆるくやってきているので、そうおっしゃっていただけると嬉しいです。

當眞さん: 面白そうだったし、面接や会社説明会ではなくイベント参加なのに、沖縄からの交通費も助けてもらったのが良かったです。

: なるほど…… じゃあ、他にも勉強会とか、あるいは会社開催の就活系イベントには出てました?

北原さん: 就活のころはいろいろと。もちろん、技術勉強会系のイベントは結構当時は参加していました。新規事業のアイディア出しイベントにも出ていました。

斎藤さん: 逆求人形式のイベントや新規事業コンペなど様々なイベントに出ていました。ただ、こういったCTF形式のイベントの参加は初めてでした。

鈴木さん: 就活っていうより、勉強会の一環ですね。

木下さん: 鈴木さんといろんな勉強会に行ってました。各社のエンジニアと話せるのもチャンスです。

続きを読む

ミクシィスマホアプリ研修説明会を開催しました & iOS-Training #1 開催のお知らせ

最近の作業用BGMは、マリオ&ルイージRPG3!!!のイン・ザ・ファイナル です。

こんにちは、武田です。

 

さて、先日お伝えしたオープン版スマホ研修の説明会の模様とiOS研修の第一回目についてお伝え致します。

 

説明会の模様について

 

説明会の概要については、connpassのページをご覧ください 


第0回 iOS/Android Training(説明会) - connpass

100名の枠に対して200名以上の応募をいただき、その反響にびっくりしているのですが、皆様の期待に応えらえるように講師一同頑張っていきたいと思います。

また、先日の説明会に参加できなかった方でも、本編の方は参加いただけますので奮ってご参加ください。

続きを読む

ミクシィスマホアプリ研修をオープンに開催します

はじめまして、mixiのiPhoneアプリ開発などをやっています武田です。
最近サントラ欲しさにスマブラを買いました。

さて、1年半ほど前に社内でのスマホアプリ研修を行い、その資料を公開したり電子書籍化などを行いました。
ただ資料も古くなっている部分などもあり、その更新も兼ねて第2回の勉強会を行うことになり、どうせなのでオープンな形で開催しようという運びになりましたのでお知らせいたします。

f:id:mixi_engineers:20150513144017j:plain

続きを読む
Copyright © mixi, Inc. All rights reserved.