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

mixi Engineers' Blog

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

Mixi Engineers Blog

Lightning Talk for Over 18 #0 参加レポート

はじめまして。ミクシィグループの株式会社Diverseでマッチングアプリを開発している徳永です。

友達作りから結婚相手探しまで、様々な出会いをサポートしています。

生き生きと、人と人との出会いのお手伝いをしています!

 

そんな私にぴったりな、大人の社交場イベント《Lightning Talk for Over 18》(以下LTO18)が、2015年8月3日にミクシィ社7Fコラボルームにて開催されました。

私はスタッフとして当イベントに参加しましたので、イベントの概要と雰囲気についてご紹介させていただきます。hashtagは #LTO18 です。

LTO18とは?

イベント告知ページの説明にはこんな説明が載っています。

18歳以上向けの情報共有のための社交場です。
真面目に取り組んだけど発表できそうな場がない人に、
LTO18は発表内容にとらわれない系イベントで、
ニッチな知見を技術を発信、共有できます。
本質的な時間を過ごしましょう。

なるほど。説明文を見ただけで唯ならぬ雰囲気を感じます。

約束事も書いてあります。

  • 真面目に技術や知見を共有しましょう。
  • 健全化のために利用できないか考えてみましょう。

どうやら、一見すると怪しいイベントですが、内容はいたって真面目なイベントです! 今回は #0 とのことで、第0回めの試験開催ということでした。

発表タイトルと概要

登壇者と発表タイトルの一覧がこちらです。タイトルだけで内容が気になるものばかりです!

時間登壇者タイトル
19:50~20:00 kiy0p0nさん 会場説明とLTO18の概要について
20:00~20:20 Takuya Iwamotoさん 日本の出会いが歩んできた道、そして今
20:20~21:00 ブラックキャットさん 商業作品におけるトランス状態の重要性
21:00~21:20 shimaさん ホール素子を使って
紳士的なデバイスを作ってみた
21:20~21:30 kuniwakさん ポルノリワードの力
21:30~22:30 懇談会  

開会前

f:id:mixi_engineers:20150821211109j:plain

会場につくと何やら怪しげな動画が流れています……

これから何が始まるのかワクワクさせられます!

LTO18について

LT大会の始まりです。はじめにLTO18運営のkiy0p0nさんから会場の説明と、LTO18についての説明が始まりました!

f:id:mixi_engineers:20150821212739j:plain

肌色やモザイクの検出をしてみたけれど、発表する場所が無く、夜な夜な枕を濡らしているそうです……

きわどい表現が入った画像を出しながら、ここぞとばかりにその裏側の技術があることを熱弁するkiy0p0nさん。LTO18がエロメインではなく、技術や知見をメインにしていることが伝わってきます!

日本の出会いが歩んできた道、そして今

続いてTakuya Iwamotoさんから、日本の出会い系の歴史についての発表です。

Iwamotoさんは大学、研究機関で恋愛とITについて研究しており、男と女のためのシステムを主に開発している方です。活動は http://takuyaiwamoto.com/ にまとめられています。

 

発表の中でも、「口臭を利用したシューティングゲーム」、「妊娠をリアルに体験するデバイス」、「ポッキーゲームをするデバイス」などの個性的な活動が紹介されました。

そして、本題の出会いが歩んできた道が濃い…!

  • 出会い系の語源は個人情報誌じゃマ〜ル(という説が有力)
  • 最初の出会い系はテレクラ
  • 「伝言板ダイアルには同性愛の符号などがあった。例を見てみましょう。1130。これはイイサオですね」
  • 「ご近所さんを探せ」出会い系webサイトの走り
  • 出会い系が風営法に潰される
  • 05年の大学男子と大学女子は約40%ぐらいは合コンをして出会っていた
  • 出会い系規制法で、デーティングによる被害児童数は下がったが、別の場所に移っただけ
  • 未来のマッチングサービスは「出会っちゃった系サイト」

発表では研究機関のデータを用いた説得力のある仮説が繰り広げられました。

参加者の中からは「俺のために研修してくれ!」という熱い声が起きました!

商業作品内におけるトランス状態の重要性

次にプロフェッショナル心理のブラックキャットさんから、クリエイターが製作において気をつけたいことを心理面から解説していただきました。

発表はなんと…… 事前録音された音源による発表!!!

「なんだこれは!(ざわざわ)」と戸惑う参加者を尻目に淡々と発表が進みました。

 

発表の中で重要とされたことは、「変性意識*1を作ること」とのことでした。

顧客に対して変性意識状態をつくってからメッセージを与えることが作品を効果的に伝える方法であるとのことです!

発表では、どのようにして変性意識を作るか、身近な変性意識を作る具体的な例を紹介してもらいました。参加者全員でサンプル動画を並んで見るといったように、始まりから終わりまで独特な雰囲気でした。

f:id:mixi_engineers:20150824195652j:plain

ホール素子を使って紳士的なデバイスを作ってみた(仮)

続いてshimaさんの発表です。

タイトルの「ホール素子」ってホール形状の大人のデバイスのことなのか?と、ざわつくスタッフたちを尻目に発表がスタート!

 

shimaさん「嫁(抱き枕)を抱きしめたい人向けのデバイスを作ろうかと思って」

参加者(うんうん、わかるわかる)

shimaさん「なんかこう、ぎゅっと抱きしめたい」

参加者(おっ、発表に熱がはいってきたぞ)

shimaさん「ホール素子(電子)使って胸部デバイス作ってみました!」

参加者(常軌を逸している…!(褒め言葉))

 

というような欲望目標から、シリコンパッドとガチのホール素子を使った電子工作で胸部のデバイスを披露していただきました。揉み具合でモニタ上のLive2D*2キャラクターが様々な反応してくれるという夢のようなデバイスでした!

f:id:mixi_engineers:20150824200552j:plain

きちんと服を着せられた胸部デバイスと出会ってしまい、笑顔がとまらない様子。

Porn Rewardsのチカラ

最後にkuniwakさんから、実例に沿ってポルノリワードのパワーについて発表していただきました!

簡単に発表内容をまとめてみました。

  • えっちなご褒美でキャプチャを解かせる Turing Porn Farm について
  • ポルノ画像でパスワードを強くするツール Naked Password
  • フリーで使えるポルノ素材の紹介 

 

ポルノを報酬に出せば人はこんなにも簡単に難題を克服してしまうことを実感させてからの、

kuniwak「エロのもつチカラを世の中のために使おう!」

という清清しい言葉で綺麗に締めていただきました。

 

ポルノを真面目に利用することを発表するLTO18らしい発表でした。

懇談会

長丁場の発表が終わり、ピザを囲んで懇談会のスタートです。

f:id:mixi_engineers:20150821230252j:plain

お腹を満たしながら参加者同士で大人の会話を楽しみました。

また、ブラックキャットさんのサンプル動画を見直す人、shimaさんの胸部デバイスを実際に触ってみる人など、気になるコンテンツを思うがままに堪能していました。 

おわりに

発表資料は色々な理由で表に出せないことが惜しまれます。

イベントの様子はtogetterでまとめて頂きましたので気になる方はぜひご覧ください。

当イベントは、参加しないと体験できないものが多いですが、とても本質的で面白いものでした!今回は第0回めとしての試験開催でしたが、つづけて正式に第1回を開催させていただくあかつきには、皆さまもぜひご参加いかがでしょうか。ハッシュタグ #LTO18 をウォッチよろしくお願いします!

*1:日常的な意識状態以外の意識状態のこと。変性意識であるとき、人はとても影響を受けやすい。

*2:Live2D公式 http://www.live2d.com/

体験とイノベーション: トライアウト・ランチ, SWLT

イノベーションセンター 森本です。

ミクシィでは、社内からの新規事業アイディアをすくいあげ、プロダクトにしていくフレームワークがあります。それが「ミクシィ イノベーションセンター」です。今年は「きみだけLIVE」をローンチし、振り返って既に独立したものも加えるとDeployGateノハナ、そしてminimo家族アルバム みてねといった新規アプリサービスのプロジェクト群も仲間として動いています。

アイディアの敷居を下げる

アイディアをプロダクトにするには、しっかりした仮説とその裏付け、マーケット検証などが必要です。しかし、そこまでプロットを固めていく前の「思いつき」状態にあるものも大事です。まずは過去の先入観やサンクコストなくアイディアを和気あいあいと検討し、その中のいくつかは経営会議にかけられるまで育てていく。そんな「アイディアの最初の持ち込み場所」として、イノベーションセンターでは「トライアウト・ランチ」という昼休みのブレイン・ストーミングを、渋谷オフィス7Fコラボルームでグループ社内の自由参加者を相手に毎週開催しています。

今年2015/4に入社したばかりの新卒のみなさんも参加してくれてます。フレッシュなかたほどフレッシュです。こういう場に加わってみたい、とお思いのあなた、2016/3あるいは2015秋卒業予定のかたでもいらっしゃい!

f:id:mixi_engineers:20150817204738j:plain

アイディアとの出会いを作る

新しいアイディアは座っていても出づらいものです。人に会ったり、旅行したり、あるいは新しいデバイスやガジェットで遊んでみたり。体験してみることも重要です。

今年の春のガジェット系のひとつの潮流だったのがスマートウォッチです。特にApple Watchの登場がこの流れを加速したことは間違いないでしょう。

f:id:mixi_engineers:20150817204834j:plain

この手の生活ガジェットは、カタログスペックだけでは推し量れない、「暮らしてみてどうか」という、生活でのスペックや課題解決がポイントです。通勤の朝、仕事中やランチ、そして自宅でのくつろぎやお掃除・お台所仕事など。そんなユースケースでどのようなメリットの芽が見えてくるか。

f:id:mixi_engineers:20150817204906j:plain

とはいえスマートウォッチはまだまだそう安いものではありません。ごく真面目に「いま、それ、要るものなの?」と彼氏や奥さんに目を見て問い詰められたら、思わず ゴクリ…… と反応してしまうこともあるでしょう。そんなあなたに。ミクシィ(およびミクシィリクルートメント)では社員を対象に、この春にスマートウォッチ購入補助制度を走らせていました。スマートウォッチ購入額の半額を会社から補助する制度です*1

「技術と利用シーン両面に変化をもたらすデバイスをタイムリーに体感してもらうことで、価値創造の質とスピードを高める一助とする」これがこの制度の狙いです。

アイディアの交換場所を作る

制度が走りだし、そして2015/4/24にApple Watchの発売が開始され、社内に徐々にスマートウォッチのユーザを見かけるようになりました。私も含め、Apple WatchのTaptic Engineの「コツコツ」「ぶるぶる」の魅力を体感した者も増えてきました。

体感して分かった「いいところ」、あるいは「イマイチなところ」を情報交換ようよ。やろうよ。ということで、いつものミクシィ7Fコラボルームで、スマートウォッチをテーマとしたライトニング・トーク「Smart Watch Lightning Talk」(略称SWLT) を開催しました。自分の手元のスマートウォッチの画面を会場に見せながらプレゼンターが説明できるよう、カメラやスクリーンも工夫しました。

f:id:mixi_engineers:20150817205039j:plain  f:id:mixi_engineers:20150817205101j:plain

さて、どんな情報がやりとりされたのか。

このLTでは、あえて技術論やAPIのあれこれにはテーマを置かず、「生活とスマートウォッチ」に着目して敷居を低く展開したお陰で、楽しいぶっちゃけ話が多くなりました。

f:id:mixi_engineers:20150817205414j:plain  f:id:mixi_engineers:20150817205425j:plain

公開可能なスライドから2点あげておきます。

SWLT: Smart Watch Lightning Talk

最初のスライドは、イベントとしてのキーノートに加え、私がApple Watchと生活してみての気づきです。

Apple Watchは「他人に見られない情報通知領域」として極めて有効です。パソコンやスマートフォンやタブレットは、他人の目から情報を守る手段として

  • 積極的には: ユーザ操作による画面ロック
  • 消極的には: 最終操作以降の時間発動による画面ロック

を採り入れています。ですが前者は習慣としての努力が必要ですし、lazynessこそがイノベーションの鍵だとしたら「習慣づけ努力」は悪です。後者は「一定時間操作が途絶えた場合、画面がユーザ管理下にあるとはかぎらない」という根拠の薄いロジックに立っています。
さらにスマートフォンではユーザ利便のため積極的にロック画面にも情報通知を行いますし、それが手元にある情報機器の価値です。しかし、それが常にmy eyes onlyになっている担保はありません。このジレンマ。

Apple Watchは、腕につけている間はロックにならず、情報通知が常に行われます。そしてこの画面は常にmy eyes onlyです。腕から外すとロックされ、通知はもう出ません。この切り分けは生活してみると大変快適です。Android Wearの、素直にAndroidアプリに通知機能を実装するとスマートウォッチにも現れるという思想は綺麗ですが、生活とプライバシーの面ではWatch OSに一日の長がありました。本当は、ウォッチにだけメッセ内容を通知するという切り分けができたら最高なんですけどね。

ActivetéPopを使ってみた

「スマート体重計」で知られているフランスのWithings社が出したスマートウォッチです。デザインは美しく、やはり健康方向への眼差しをしっかり持っています。なんと水泳の履歴まで取れるそうです。

ほか、いろいろおもしろいLTがありましたが、公開は割愛させてください。特に最後の「とあるゲームアプリをより便利に遊べるApple Watchアプリ」の試作品は、腕に付けて動いているところの写真にとどめておきます。

f:id:mixi_engineers:20150817205527j:plain

続けて次回は、ガジェットというには大柄ですが「電気自動車を借りてきた編」をお届けしようと思います。

*1:補助額には上限があります。2,180,000円のApple Watch Editionを購入すると、会社が1,090,000円出してくれるわけではありません

リアルな攻撃体験をしよう! Scrap Challenge 2015年度シーズンのご案内

人事・イノベーションセンター 森本です。こんにちは。

株式会社ミクシィでは、今年もSNS mixiを擬似攻撃できるセキュリティ技術体験イベント「Scrap Challenge」を開催します。

f:id:mixi_engineers:20150713184615p:plain

開催日 2015.8.29(土) 11:00〜19:00 (ランチ・懇親会あり)
会場 ミクシィ本社 コラボルーム (東京都渋谷区)
エントリーと詳細 こちらからどうぞ!
hashtag #mixi_scrap

 

5年めの「卒業生インタビュー」

Scrap Challengeは、2011年に第1回を開催してから今年でもう5年目。今年度(2015)は夏の終わりの2015/8/29からスタート。概算11回めの「スクチャレ」です。

今日は、今年度の開催のご案内に加え、Scrap Challengeでミクシィのエンジニアリングに触れ、そして2015年春に入社された新卒エンジニアのお二人にお話を伺ってみます。

 

f:id:mixi_engineers:20150713185156j:plain

2015年度新卒入社 中西さん、辻さん

 

森本: お忙しいところどうも。実は、去年の暮れごろにもmixi Engineers' BlogでScrap Challenge経由で入社したみなさんへのインタビューをしたばかりなんですが、

今年の春にまたお二人が「スクチャレ卒業生」として入社されたこともあり、改めてお話を伺ってみたいなと、お時間をいただきました。今日はどうもありがとうございます。

: いえいえ。こちらこそありがとうございます。

中西: ありがとうございます!

今年のスクチャレ卒業生

森本: というわけで、まずは簡単なプロファイルからお伺いしていきますね。出身校と学科、加えてどんなことを専攻してらっしゃったか、教えてください。

中西: 京都大学大学院 情報学研究科 システム科学専攻で、主に機械学習系にまつわることを研究していました。

: 立命館大学 大学院 情報理工学専攻 計算機科学コースです。研究内容はデータマイニング系です。

f:id:mixi_engineers:20150713185849j:plain

 

森本: お二人が参加されたのは2013年の冬のScrap Challengeですよね。

この、Scrap Challengeというイベントをそもそも知ったきっかけは何でしょう?

 

中西: (2人とも少し考えこむ) このイベントのこと自体はもともと知ってました。知ったきっかけがなんだろうと言うと…… 第1回が開催されたときのtweetが出回ってたのを見たのかもしれません。
その上で、ミクシィに就活エントリーしたとき、Scrap Challenge開催のお知らせをいただいたので、申し込んで参加しました。

: 僕も事前に知ってました。知ったきっかけまでは覚えてないのですが…… たぶんネットのセキュリティ関係の記事か何かだったかな? で、後輩を誘って、一緒に参加しました。

森本: 実際に攻撃に加わってみて、面白かったところ、あるいは簡単・難しかったあたりなど教えてください。

コンビネーション・アタックのおもしろさ

中西: チームの3人のコンビネーションで解くのが面白かったです。

f:id:mixi_engineers:20150713190024j:plain

最初のうちは出題された問題をチームメンバーひとりずつで担当し、問1は君、問2は僕、という感じで割り振って進めていたのですが、割とセキュリティ攻撃の初心者が多かったので、分からないところを教えあいつつも、なかなか進まず……

で、途中から戦術を変更して、3人共同で問題にアタックするようにしました。そうしたら、知見やアイディアの出し合いがうまく行って、謎がどんどん解けはじめ……

それから攻略も進むようになっていったんです。チューターのかたにも、技術的に分からないところをどんどん聞いたり。

中西: あと、アタックの後の懇親会も面白かったです。イベントのあいだ技術チューターをやってくださったエンジニア社員のみなさんや、ほか懇親会だけ駆けつけてきてくれた方もいらして、とにかくフランクにいろんな人と喋れたのが良かったです。社内の空気がすごくよく分かりました。

森本: なるほど。実際にサイトを攻撃してみたりするのははじめて?

中西: 初めてです。知識では知っていましたが、実際に実在サイトを解析して穴を探したり、さらに攻撃したりするのは初めてでした。

: 僕は、以前からバイト先で、暇をみては攻撃はしてました(笑)

f:id:mixi_engineers:20150713190148j:plain


攻撃先は自分たちで開発している成果物のステージングサイトで、実際の攻撃の被害に遭わないよう脆弱性を探しておく、hardening目的ですね。
いろんな手法がわかってくると、攻撃まではしなくても、いろんなサイトのHTML, JavaScriptとかソースをふと見てみたり、とあるコンテンツ配信サービスで任意のアイテムを購入させられる脆弱性を見つけたり…… もちろん、見つけた脆弱性はIPA経由で報告しましたよ。

他には、著名なグループウェアの本物の穴を見つけるというイベントにも参加しました。

森本: セキュリティ強化や知識向上に力を入れてらっしゃるところですよね。辻さんチームは優勝チームになっただけあって、割とガチな戦いをしてたんですね!

: ここでひと暴れしてやろうみたいな(笑) 戦闘力高そうなチームメイトが揃ってました。XSSに強い人や、他にもSQL Injectionに強いチームメイトがいたり。
戦い方も、まずはSkypeでルーム作って、攻略コードの共有もそこで行ったり。結果として優勝チームにさせていただきました!

今年の夏へのアドバイス

森本: なるほど! 主催側の僕らも、そのへんのチーム間の情報共有がしんどそうだなと思って、その後はScrap Challenge参加者専用Slackを前もって用意するようにしたんですよ。
今年度のScrap Challengeは、夏の終わりの2015.8.29が第1回なんですが、参加するかたへのお勧めやアドバイスってありますか?

中西: 基本はとにかく徳丸本を読んでおけ! ですね。ある程度予習・準備していたほうが当日楽しめます。 

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践

 

: アタックする競技ではありますが、たぶん楽しんでもらうのが一番です。チーム構成も当日アサインされるし、ハンズオン的なイベントなので、気負わないで参加してみるといいと思います。

予習としては、本を読んでおくのもいいし、可能なら、穴のあるWebアプリを作って、それを自分で攻撃してみるとか。

森本: ありがとうございます!

f:id:mixi_engineers:20150713190435j:plain

: 学生対象のセキュリティ・イベントってなかなかないし、そうした数少ない中でScrap Challengeは参加の敷居も低いほうだと思います。
でも内容はしっかりしてますし、貴重な体験ができると思います。ネットサービス開発の登竜門みたいになっていけると楽しいですね!

中西: あのころはまだ全然攻略問題を解けなかったけど、その後入社して、こうして今年はチューター役にまわります。成長できますよ!(笑)
参加される学生さんと会えるのも楽しみです。ぜひ参加してね!

渋谷でお待ちしてます。

というわけで、5年めを迎えたScrap Challengeの通算11回め、今年度の第1回開催は2015/8/29(土)です。
ランチ・懇親会に加え、遠隔地の方には交通費の補助もございます。
みなさんぜひ今年の夏は、普通はできない「たのしく、やばい」コンピューティングを渋谷で体験してみてください。お待ちしています!

 

f:id:mixi_engineers:20150713191407p:plain

エントリーは mixi-recruit.snar.jp へどうぞ!

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

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

Copyright © mixi, Inc. All rights reserved.