• はてなブックマークに追加
  • Yahoo!ブックマークに登録
mixiのiPhoneアプリ・リニューアルプロジェクト<エンジニア編>
全面リニューアルで機能改善!mixi公式アプリ開発秘話
ソーシャル・ネットワーキングサービス『mixi』を楽しむためのiPhone版公式アプリが、2012年2月のバージョン10.0リリースで大きな飛躍を遂げた。その開発チームのプロジェクトストーリー後編は、アプリケーションの開発エンジニアたちが主人公だ。
(取材・文/広重隆樹 総研スタッフ/宮みゆき 撮影/栗原克己)作成日:12.03.15
我々だって満足していない。バージョン10.0ですべてを変える

ミクシィは2012年2月に、iPhoneからソーシャル・ネットワーキングサービス「mixi」を楽しむための公式アプリ「mixi」のバージョン10.0をリリースした(2012年3月5日現在は10.2にアップデートされている)。

 スマートフォンの本格的な普及に伴い、アプリ開発がリスタートしたのは2010年暮れから。
2011年3月にバージョン2.0.0がリリースされると、短期間でバージョンは9.2まで進んだが、さらに大きな進化を見せるのは、2012年2月にリリースされたバージョン10.0からである。9.2までのクオリティに、開発陣が満足していたわけではなかったのだ。
「10.0では9.2までのコードをほぼ全面的に作り直したといってもよいと思います」  と言うのはチームディレクターの土戸錬氏だ。

 PC、フィチャーフォンに加え、スマートフォンの普及に伴い、SNSのアクセスツールとしてスマートフォンの位置は重要になりつつあった。mixiもスマートフォンからアクセスするユーザー様も542万人(2011年12月現在)と順調に増えてきているため、よりアクセスしやすい環境を整えていくことも重要であった。バージョン10.0開発に向けて組織されたエンジニアたちは、本格的なiPhoneネイティブアプリをつくるのもほとんどが初めてだった。だが、バージョン10.0でアプリを一新するという思いは土戸氏と同様に強かった。

土戸 錬氏
UX統括部
ソーシャルクライアント企画チーム
サービスディレクター
土戸 錬氏
公式アプリ「mixi」バージョン 10.1 の新機能
エンジニアは、コードレベルからユーザビリティを考える

 バージョン10.0へのリニューアルプロジェクトに参加したエンジニアは、SIer出身の竹内彰吾氏、Webデザイナーからプログラマに転身した経歴を持つ七尾貴史氏。さらに途中から、ネイキッドテクノロジーというベンチャー企業で独自のアプリケーションプラットフォームを開発していた佐野岳人氏が加わった。

 友人の近況を見る閲覧系の処理を担当したのは竹内氏。七尾氏は投稿系の処理についてプロトタイプをつくり、それを佐野氏に引き継いだ。佐野氏はプロトタイプを活かしながら、つぶやき、日記、フォト、チェックインなど投稿系機能を設計していった。後から加わった佐野氏だが、それだけにアプリのインターフェイスデザインには注文も多かった。

 これまでのバージョンは、APIの制約上、友人の近況を表示させる部分において、つぶやきとそれ以外を2本立てにして、それぞれに投稿画面を配置せざるを得なかった。しかし、それでは何かを投稿しようと思ったとき、画面がどのように遷移するかユーザーには分かりづらい。
「バージョン10.0ではその投稿と遷移画面が大きく変わりました。投稿ボタンを画面下のタブのど真ん中に大きくデザインし、そこをタップすることで写真、日記などに分岐するという構造。行いたい機能が直感的にわかるデザインです。デザイン画面を見たとき、これはいいなと思いました」

佐野 岳人氏
UX統括部
開発グループ
開発チーム
佐野 岳人氏

 確かに、バージョン10.0で一新された投稿ボタンは、閲覧モードからふいに投稿モードに変わるときの、ユーザーの気持ちの切り替えに沿ったものだ。真ん中の投稿ボタンは、つい押してみたくなるインターフェイスになっている。
 優れたUIデザインであればあるほど、エンジニアはそれを上手に実装したくなるはずだ。UI・UX設計を巡るデザイナーとエンジニアの関係について、佐野氏はこう語る。
「アプリケーションのUI設計では、ユーザーの一つひとつのアクションに対応して、画面がインタクティブに動くことが重要です。その全てをデザイナーが実現できるわけではない。エンジニアがそういうインタラクションを、コードレベルで実現しないとうまくいかないのです。エンジニアも、デザイナーと同様のレベルでユーザビリティを考えることが必要。デザイナーは絵でそれを見せる。エンジニアはコードを書いて、実際にアプリを動かして見せていく」

 UIデザインを少し変えるだけでも、コードはそれに追従しなくてはならない。UI設計の変更はコーディング作業に負荷を与えることは確かだ。だが、エンジニアが自分の作業を増やしたくないばかりに、低レベルのUIに妥協していたのでは、決してアプリは良くならず、実際のユーザーも満足はしないだろう。UI・UXを巡るデザイナーとエンジニアの間での高度な提案の応酬が、アプリを少しずつよくしていくのだ。

mixi流 アジャイル開発
七尾 貴史氏
UX統括部
開発グループ
開発チーム
七尾 貴史氏
竹内 彰吾氏
UX統括部
開発グループ
開発チーム
竹内 彰吾氏

  七尾氏は、他のメンバーに比べれば比較的早い段階からチームに参加していた。UIデザインが決まる前の段階から、ディレクターの土戸氏やデザイナーと激しい議論を重ねていた。
「僕はみんなから見たら、結構面倒くさい人だったと思いますよ」と、七尾氏。「僕を『ウン』と納得させるのが、ディレクターの仕事みたいなところがあったかも」と笑う。

 ディレクターの土戸氏も、こう振り返る。
「アプリの設計において、きちんとした仕様書が最初からあるわけではないですからね。ディレクターとしてはこういう機能要件基づいて実装したい。しかし、エンジニアは費用対効果を重視し、その必要性に迫る。そのフィードバックがいちばん厳しかったのが七尾さんでした」

 七尾氏にしてみれば、バージョン10.0の開発に向けてようやく社内の陣容も整ってきた時期。単に仕様通りにつくるのではなく、最初にガツンと言うべきことをいい、コミュニケーションのベースをつくっておかないと、この先が大変だという思いがあった。お互い「なあなあ」ではよい仕事はできないのだ。

 その頃からアプリ開発に関わり始めたのが、ミクシィに転職したばかりの竹内彰吾氏だ。竹内氏は9.2までの実装を一新させなければいけない思いが最も強かった。今後もたくさんのmixiの機能を組み込まなければいけないため、将来の拡張や保守メンテナンスのことを考えると、その上に屋上屋を重ねるよりも、新たにすべてを作り直したほうがいいと考えていた。普通であえばそんな大胆な提案を、転職したばかりのエンジニアが実行するのは難しい。しかし、ミクシィでは社歴に関係なく、言うべきことを言える雰囲気があった。

 一方で竹内氏はiPadとの共存ということも念頭に置いていた。iPad用のmixiクライアントアプリ「mixi for iPad」はその頃すでに衣川憲治氏、田村航弥氏らの手によって、2011年10月にリリースされていた。同時並行ながら、それぞれ別のメンバーが開発を担っていたのだ。

 しかし同じiOSアプリであることは変わらない。「mixi for iPad」で実現された機能の一部はソースコードを流用すべきだ。iPad版で未実装の機能は、今度は iPhone版が先取りし、その成果をiPad版にフィードバックすればよい。単にiPhone版アプリにとどまらず、アプリ開発チーム全体の開発効率を上げるための提案も、竹内氏は行っていたのだ。
「これらの提案をどうしても通したかったんです。その思いはエンジニアなら誰だって理解できるはずです。もちろん全面的に作り直せばその分、工数が増える。ただiPad版の一部を流用すれば工数は稼げる。その差し引きを考えて、全体の工数はどうなるか。それをきちんと議論しておくことが必要でした」

 アプリ開発の全体においてはこのように妥協のない竹内氏だが、「それでもまだ遠慮があった」と見ているのは七尾氏だ。竹内氏は10日間も必死になって作った閲覧系の機能を七尾に見せたら、あっさりダメ出しをされたことがあった。

 タイムラインのように流れる友人の近況には、投稿された写真のサムネイルも一緒に表示される。竹内氏はタイムラインのスペースに合わせて写真の天地をリサイズし、長方形に見せるようにした。デザイナーもそのように絵を描いているし、そのほうがかっこいいと思っていた。

 しかし、七尾氏にはそれが許せなかった。
「天地を切っちゃったら、顔が切れちゃうでしょう。ユーザーはこの構図がいいと思って写真をアップしているのだから、その比率を活かしたまま写真を縮小すべき」と仕様書ではなく、ユーザーの使いやすさや気持ちを考えたプロダクトベースの議論が続いた。

 この二人のぶつかり合いを解説してくれるのは、佐野氏だ。
「これこそがアジャイル開発のプロセスだと思います。仕様書通りではなく、実際に形にして判断し、どんどん作りかえていく。『10日もかかってつくったのに……』と不平をいうエンジニアはだめ。何日かかろうが、一度つくったものをすぐに捨て去って、最初から作り直すぐらいの気持ちでいないと。つくっては捨て、捨ててはつくる。そのサイクルが高速に回りながら、完成度を高めていく。それがアジャイル開発の基本だと思うのです」

iPhoneアプリ開発の奥深さ

 とはいえ、バージョン10.0のリリースは想像よりも時間的コストがかかってしまった。解決しなければならない問題が山積みだったからだ。将来の保守・メンテナンスのことも考えると、9.2までのソースコードの多くを捨て去るという決断も必要だった。不安定な基盤の上に、つぎはぎだらけで拡張を続けるアプリは、いずれ破綻する。

 同時に開発が進行していたiPadアプリとの関係も無視できないものがあった。こちらは衣川憲治氏が一人の新入社員を率いて開発を進めていた。iPadアプリで実装された通信機能のコードを活用することで開発効率を改善させた。一方で、iPadアプリでは未完成だった部分を、iPhoneアプリが引き継いでそれを完成させ、その成果をiPad側に還元するという、2つのプロジェクトを連関させる仕組みづくりを図った。

 これまでiPhoneアプリに寄せられていたユーザーの声の中でも、多い意見のひとつが、「レスポンスが遅い」というものだった。遅い印象を与えるのは、サーバーサイドとアプリサイドの2つの問題があった。本プロジェクトでは、クライアント内ソースコードの実装方法を試行錯誤し、無駄なコードを極力排するとともに、画面上の描画方法を改善し、画像キャッシングの機能を強化することで、レスポンスの向上を狙った。

 iPhoneアプリは現在、数多く世の中に出回っている。書店に行けば、『誰でも書けるiPhoneアプリ』のような本がずらりと並んでいる。
 佐野氏はこう言う。
「解説書に出ているような簡単なサンプルなら確かにすぐにでも書けるでしょう。しかし、それ以上のことをやろうとすると、とたんにハードルが高くなるのがiPhoneアプリの特徴なのです。初級編からいきなり上級編になってしまって、間の中級編がないみたいな感じですね」

 いざ本格的なアプリを作ろうとするなら、標準フレームワークをハックしたり、クラスの構造を解析する作業が欠かせない。上級者と呼ばれるプログラマはみなこうした試行錯誤を経て、独自の実装法を身につけた人たちなのだ。

 逆にそのハードルの高さが、エンジニアの魂に火を付ける。「発見的プログラミングっていうのですかね。コードを書きながら毎日のように新しい発見があって、それがむちゃくちゃ楽しいんですよ」と、佐野氏は言う。

 iPhoneアプリ開発の難しさについては、七尾氏もこう語る。
「Objective-Cは、C言語なので何でもやろうと思えば書けちゃいますけど、逆にプログラマが何をつくりたいのかが明確でないと、何もつくれない。自分のやりたいことを発見することが最も重要なのです」

運転手は自分。ハッピー・ドライビングへいざ!

 mixiのiPhone公式アプリは、ミクシィのスマートフォンへの取り組みを伝える象徴的な開発事例だ。当然、開発が進むにつれて社内の各部署から、こういう機能を付け加えて欲しいといった要望が舞い込むようになった。そうした外野からの声を一手に引き受けたのは、ディレクターの土戸氏だ。
「要望を受け入れるにしろ、そうでないにしろ、私が全部を一旦受け止めて、エンジニアにはプライオリティをつけて伝えるようにしました。エンジニアには、できるだけ『モノ』をつくることだけに専念させたいという思いがあったからです」

 優れたプロダクトは、優れた開発環境から生まれるという持論が土戸氏にはある。エンジニアにとってハッピーな開発環境を整えるのは最終的にはディレクターの役目だ。
「どういう走りのクルマをつくるかはエンジニア、どういうかっこいいクルマをつくるかはデザイナーの仕事。僕は彼らを乗せて、遠くまで楽しくドライブするための運転手役なのです」

 運転席から振り返ると、後部座席のエンジニアたちは、クルマが走り出したのにまだ「こうもしたい、この機能にも手を入れたい」とワイワイ言い続けている。
「このチームはみんなつくることが大好き。つくっても、つくってもまだまだつくり足りないことがあるんです」(笑)。

 七尾氏はmixiで広がるコミュニケーションが楽しくて、ミクシィに転職したようなもの。竹内氏は、ひたすら実装好きの寡黙なプログラマ。佐野氏は、すごく使いやすいアプリを作ったから、mixiを楽しんで欲しい、と語る。

 それぞれの“好き”のスタイルが、うまい具合にオーバーラップしながら、組み合わさっていく。共通しているのはもちろん、ユーザー満足度を高めることだ。
「モチベーションはそれぞれ違っていていい。ただ、最終的な目標をがっちり共有できているところが、このチームの最大の強みになっていると思います」
 と、土戸氏は語っている。

mixiのiPhoneアプリ・リニューアルプロジェクト<デザイン編>を読む
UX統括部 開発グループ 開発チーム  七尾 貴史氏

2年間Webデザイナーとして活躍後、プログラマに転身。モバイルサイトの開発、iPhone・Androidアプリなど、サーバーサイドからフロントエンドまで幅広く携わる。2011年7月ミクシィ入社。iPhone版公式クライアントはバージョン7から関わる。

UX統括部 開発グループ 開発チーム  竹内 彰吾氏

前職ではSEとして大手企業の会計や勤怠等の基幹システムの開発を行う。ある案件でiPhone・Androidアプリの開発に携わったことがきっかけとなり、スマートフォンアプリの開発を志し、2011年9月ミクシィに入社。

UX統括部 開発グループ 開発チーム  佐野 岳人氏

2006年、IPA未踏ソフトウェア創造事業に採択されたことを機にメンバーと共に株式会社ネイキッドテクノロジーを創業。モバイル領域を中心に、アプリの開発基盤とそれを利用したアプリケーションの開発に携わる。2011年10月、ミクシィ社に入社。

UX統括部 ソーシャルクライアント 企画チーム サービスディレクター  土戸 錬氏

2002年韓国の高校を卒業し、来日。日本語学校での語学留学を経て、日本の情報系大学に進学し、基礎的なプログラミングを勉強。大学卒業後、09年新卒でミクシィに入社。iPhone版公式アプリの全体ディレクションを担当。

  • はてなブックマークに追加
  • Yahoo!ブックマークに登録

このレポートに関連する求人情報です

株式会社MIXI/未経験歓迎/年間休日123日/【東証プライム上場企業】“心もつながるコミュニケーション”を様々な角度から創造し、成長を続けています

募集職種ゼロから成長できる!モンスターストライクのカスタマーサポート

  • 契約社員
  • 未経験者歓迎
仕事の概要
世界最大級のスマホゲームの運営を支えていく!ユーザーの“声”をもとにした改善企画に関わるチャ…
対象となる方
【20代が活躍中!第二新卒OK/経験・知識不問】 ★人柄や意欲を重視して採用を進めていきます!
勤務地
【転勤なし/「仙台駅」直結/U・Iターン歓迎】◎仙台CSセンター:宮城県仙台市青葉区中央1-…
年収例
あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートの連載バックナンバー

人気企業の採用実態

あの人気企業はいま、どんな採用活動を行っているのか。大量採用?厳選採用?社長の狙い、社員の思いは?Tech総研が独自に取材、気になる実態を徹底レポート。

人気企業の採用実態

このレポートを読んだあなたにオススメします

mixiのiPhoneアプリ・リニューアルプロジェクト<デザイナー編>

位置にこだわれ!UIデザインを巡るミクシィの格闘とは

人気企業の採用実態iPhoneでソーシャル・ネットワーキングサービス「mixi」を楽しむための公式アプリが、2012年2月のバージョン10で大きな…

位置にこだわれ!UIデザインを巡るミクシィの格闘とは

“シンプルかつリッチ”を目指すスマホ向け究極のブログサービス

Amebaの新スマホブログ「Simplog」開発秘話

サイバーエージェントがスマートフォン向けの新しいブログサービスを8月にリリースした。「Simplog」は“シンプルだけ…

Amebaの新スマホブログ「Simplog」開発秘話

予約受付システム開発から、新事業サービス提案まで

過去最大規模!iPhone5販売予約受付システム開発秘話

人気企業の採用実態ソフトバンクモバイルの情報システム部門で開発を行う社内SEの仕事は、iPhone5を販売する際の予約を受け付けるための…

過去最大規模!iPhone5販売予約受付システム開発秘話

ソーシャル時代を見据えた様々な仕掛けと舞台裏

ミクシィとバスキュール「mixi Xmas」開発3年間の軌跡

人気企業の採用実態「mixi」上で、クリスマスシーズンに実施しているソーシャル・キャンペーン企画「mixi Xmas」。この大規模なイベ…

ミクシィとバスキュール「mixi Xmas」開発3年間の軌跡

来春には大阪、福岡に開発拠点を設置

サイバーエージェント、スマホ技術者の育成と採用強化

人気企業の採用実態サイバーエージェントのスマートフォン対応が急速に進んでいる。積極的な中途採用を展開してきたが、スマートフォン開発経験者はまだ市場…

サイバーエージェント、スマホ技術者の育成と採用強化

IT業界、生保業界…7人の人事に聞いたウラ事情

人事担当者が告白!転職者の給与はこうして決まる

「前給考慮」「経験能力に応じて優遇」などは募集条件でよく見る言葉。でも前給や経験能力を、具体的にどう考慮して給与を決め…

人事担当者が告白!転職者の給与はこうして決まる

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP