いますぐ試したいiOS ＆ Android開発ノウハウ 〜 Mix Leap Study #57 イベントレポート

こんにちは！ ヤフーの大阪オフィスで、Yahoo!天気のiOSアプリを開発している畑です。

今回は2020年1月30日（木）に開催された「Mix Leap Study #57 - iOS ＆ Android勉強会」から、イベントレポートをお届けします。

Mix Leap Study とは

「Mix Leap Study」とは、さまざまなヤフーの独自技術や業界の最先端テクノロジーに触れていただき、関西圏のクリエイター（エンジニア・デザイナー）の成長を目的にした、ヤフー大阪オフィスで開催される勉強会です。ITに興味のある学生やIT企業で働く社会人が集まってお互いに発信しあうことで、人と情報の交差点となることを目指しています。

今回はヤフーの東京オフィスから3人、大阪オフィスから1人を呼び、社内でアプリを開発する中で得られたノウハウなど、ボリュームたっぷりに語ってもらいました！

GPS不要の屋内ナビゲーション手法をR&Dし、iOSで実装した話

皆さんは地下鉄構内や大型ショッピングセンターで道に迷った経験はないでしょうか？ かく言う私は、いまだに梅田ダンジョンを攻略できずにいます...

そんなあるあるな課題を技術で解決することを目指したのが、最初のスピーカーである西 紗記子と鈴木 健司。

2人は社内で研究開発に従事しており、西はComputer Visionを専門とするエンジニア、鈴木は情報デザイン・Human Computer Interactionを専門とするデザイナーと、それぞれの専門領域を生かして作られたのが、今回紹介された屋内ナビゲーション手法「SCAN」です。

SCANの概要については、Yahoo! JAPAN Tech Blog内の記事、「GPS不要の屋内ナビゲーション手法をR&Dした話」でも触れられていますので、この記事では本勉強会のテーマであるiOSの技術領域にフォーカスして書かせていただきます。

Computer Visonの分野で有名なオープンソースライブラリと言えばOpenCVなどがありますが、西はそれらを使わずiOSネイティブで実装したそう。画像処理の世界では、ピクセルの移動や回転を行列で表す方が便利なため一般的となっているのですが、その行列演算をSwiftで行う手法として西がおすすめするのが、Accelerate Frameworkに含まれる行列計算ライブラリsimd。乗算順序が一般的な数式とは逆である点は注意する必要があるそうですが、その点を除けば数式を書くそのままコードで直感的に書けるのは、確かに使いやすそうに感じました。

ただし処理対象の画素数が多くなると、このように1ピクセルずつCPU処理していては速度が遅いため、SCANではシェーダーで行列演算を記述しているそう。シェーダーであればGPU上で並列処理が走るという利点があり、iOSであればMetalフレームワークを利用して書くことができます。これをSwift側から呼び出すことで、なんと400倍も高速に処理が行えるといいます。

SCANはまだ実証実験段階の手法ではありますが、ここまでの技術が詰まったプロダクト、実用化が待ち遠しいですね。

エンジニアとデザイナーの2人での登壇というめずらしい形となりましたが、数式多めの難しい内容で場が硬くなりそうなところ、2人の掛け合いで終始なごやかに進んでいたのが印象的でした。

Android版PayPayフリマはこうできた

二人目のスピーカーはPayPayフリマのエンジニア、飯島 彩輝。

去年の10月にリリースされたばかりの新サービス、そのAndroidアプリは開発開始からたったの3カ月でリリースまでこぎ着けたそうで、どのような開発体制を取られたのか興味のある方も多いのではないでしょうか。

その答えとなるのが「ペアプログラミング」の採用と、事前の「堅牢な基盤作り」であると飯島は言います。

まず前者のペアプログラミングとは、その名の通り2人ペアになって開発を行う手法のことです。特にヤフー社内で実践している手法については以下の記事にまとまっているため、気になる方はぜひ読んでみてください！

ペアプログラミングが特徴的な開発手法「Lean XP」を取り入れた「820 Labs」オープン！

普段からペアプログラミングで業務に取り組む飯島がメリットとして挙げたのが、

• 質の高いレビューが可能
• レビュー工数がほぼゼロ
• ペアのローテーションで知識の共有が早い
• 全体仕様に詳しくなり属人化しない

の4点でした。

PayPayフリマの開発にあたっては、なんとAndroidエンジニアがバックエンド開発を行うこともあったらしく、Androidエンジニアとサーバーサイドエンジニアのペアでもこのメリットは生きたそうです。

というのも、PayPayフリマのバックエンドの大部分はKotlinで書かれているのですが、もともとKotlinができるサーバーサイドエンジニアがいたわけではなく、サーバーサイドができるAndroidエンジニアがいたわけでもなかった。そんな状況で開発を進められたのは、ペアプログラミングでリアルタイムに教え合いやレビューを行えたからで、結果としてエンジニアの数が限られた中でもかなりの開発効率化ができたそうです。

飯島からのPayPayフリマでペアプログラミングを取り入れた総括として、新規のアプリを開発する場合により効力を発揮することが改めて実感できたとありました。仕様の変更や新規コードが多い分、運用よりも新規開発の方が前述の恩恵を受けやすいと思われるためだそうです。特にチーム内に技術を引っ張れるエンジニアがいる場合は、そのエンジニアから周りのエンジニアへ技術が伝わる機会が圧倒的に増えるため、おすすめとのアドバイスもありました。

次に堅牢な基盤作りについて、PayPayフリマアプリでは本格的な開発に入る前に、この基盤を開発するための専用の期間を確保し、そのフェーズが終わるまでは機能の開発をしないという、思い切ったスケジュールを切ったそう。社内で最もAndroidのできるエンジニアと、PayPayフリマチームのエンジニアがローテーションでペアとなり、プロジェクト全体の設計、共通処理の定義、使用ライブラリの選定、テンプレートとなる画面1つを作る。そうしてPayPayアプリに最も適した基盤ができあがり、かつペアとなったエンジニアへその思想が伝わっていくことで、その後の各新規画面の作りが安定したそうです。

質疑応答でもペアプログラミングに関する質問が多く、会場にいらした皆さんもぜひそのノウハウを吸収しようと、その後の懇親会の場も含めて積極的に質問される方が多かったのが印象に残っています。

飯島からは他にも、PayPayフリマアプリで採用したクリーンアーキテクチャやマルチモジュールについての話がありましたが、この記事では語り尽くせないため、気になる方は今回の発表スライドやこちらの記事もぜひ見て読んでみてください！

CtoCフリマアプリの作り方(Android編) 〜6カ月間のPayPayフリマ開発を支えた設計〜

Androidアプリの使いやすさのための技術的な工夫と取り組み

トリを務めた三人目のスピーカーは、Yahoo!天気のAndroidアプリを開発している大前 良介。

Yahoo!天気アプリは昨年12月に大幅リニューアルを行ったのですが、大前はそのリニューアルプロジェクトを振り返りながら、エンジニアの仕事についての自身の考えを語ってくれました。

いわく、最初のフェーズである仕様検討段階において重要となるエンジニアの仕事は、プロトタイプを作ること。それもスピード第一で、新しいアイデアや意見が出てくるとそれをすぐ反映する。実機で実際の操作感を確かめられるのはプロトタイプツールに勝る強みであるので、作る → 触るのサイクルを回しながら、よりよい仕様を練り込んでいくことができる。

大前とは担当OSは違えど普段から同じチームとして作業しているのですが、どのようなプロジェクトに対しても圧倒的な手の速さでプロトタイプアプリを作り出し、それをベースとして議論を重ねることができています。どうすればユーザーが使いやすい仕様となるのか、明確な答えのない疑問に対する一つの道しるべとなってくれていると感じます。

さて、そうしてできあがった新しいYahoo!天気アプリ、実際の操作感はどうなのでしょうか。

大前が特にこだわったのが、今日・明日の天気を表示するモジュール。今日・明日の切り替えはタップでもできるがフリックでもできる、そのような仕様になったのは、前述のプロトタイプを触ってもらう中で出てきた、ユーザーごとに直感的と感じる操作は違うという気づきからでした。

このように、どのようなユーザーでも違和感なく操作できるよう作るためには技術的課題もあり、

• 今日・明日天気モジュール内でタップと左右フリックの両方を検出
• アプリ画面全体で発生しうる縦横スクロールも必要に応じて検出
• タップ・フリック・スクロールを1アクションに対して同時に発生させず、ユーザーの意図した操作だけを発生させる

という、複雑な制御を実現する必要がありました。

この課題に対して大前が取ったアプローチが、Viewの階層ごとに責務を明確化することでした。Androidのタッチイベント伝播の仕組みをオーバーライドし、タッチイベントの種類に応じて主導権を適切なViewへ振り分けることで、狙い通りの制御を実現できるとのノウハウを伝授してくれました。

来場者の皆さんはこの大前の話を聞きながら、その操作感を確かめるようにご自身のスマートフォンでYahoo!天気アプリを操作されており、その光景が印象に残っています。

またこの話、さらに掘り下げた記事を後日このTech Blogで公開してくれるそうなので、先日来場してくださった皆さま、加えてご興味ある皆さま、楽しみに待っていてくださいね。

最後に大前は、これからもより使いやすいYahoo!天気アプリとなることを目指してどんどん改善していくことを宣言し、場を締めました。

おわりに

イベント終了後はMix Leap恒例の懇親会。登壇者を含めたヤフー社員と一般の来場者の方が交流し合い、大いに盛り上がっていました。 登壇者を中心に輪ができていたのはもちろんのこと、それ以外に来場者どうしのグループも複数生まれ、思い思いの話題で盛り上がっていたのは、モバイルOSの垣根をこえた勉強会として大成功だったということではないでしょうか。

ヤフー大阪のMix Leapでは今回のようなクリエイター向けのイベントが数多く開催されていますので、興味を持たれた方はぜひconnpassをチェックしてみてください。

登壇者の皆さん、そしてこの記事を最後まで読んでくれた皆さん、ありがとうございました！