身近な技術的課題から始めるOSSプロジェクト #ヤフー名古屋

身近な技術的課題から 始めるOSSプロジェクト Kazuhiro Hayashi (@kazuhiro494949) ヤフー名古屋 Tech Meetup #4

自己紹介 • 名前 • 林和弘 (@kazuhiro494949) • 仕事 • Yahoo! JAPAN iOSアプリ • iOSアプリ黒帯

社外向けのトーク

ヤフーがOSSの文化を積極的に 取り入れているイメージってありますか？

https://github.com/yahoojapan

• https://github.com/yahoojapan

iOS関連でいうと https://github.com/yahoojapan

• https://github.com/yahoojapan

日々の業務において • 中で使っているコードにライセンスをつけ て公開メンテナンス、っていうのを意外と やっている • 例えばアプリのβテストツールなど https://www.slideshare.net/techblogyahoo/ss-153336977/

• https://www.slideshare.net/techblogyahoo/ss-153336977/

ヤフーはOSS文化に対して かなり寛容

例えば • 日々の開発自体Github上でプルリクエストベースで行う • 世の中にあるOSSはかなり使っている • 有名なOSSに積極的にコミットしている • 自分たちでOSSを1から作って発信している

例えば • 日々の開発自体Github上でプルリクエストベースで行う • 世の中にあるOSSはかなり使っている • 有名なOSSに積極的にコミットしている • 自分たちでOSSを1から作って発信している

日々のサービス開発からどう OSSを作っているか

自分のやり方 • 仕事で発見した技術的課題からOSSプロジェクトを始める • 日々の実務の中で実際に直面した一般的に通じる課題を見つける

自分のやり方 • 会社のプロダクトに使われている OSSとして切り出し コードで世の中の技術的課題を解決 するものは、OSSとして切り出す 既存プロダクト コード

自分のやり方 • 会社のプロダクトから広く世の中に OSSとして導入 個人で作ったコード 通じる技術的課題を発見し、個人で OSSとして作ってフィードバックす る 既存プロダクト

自分のやり方 OSSとして公開 • 社内勉強会のネタとして作って、ウ ケが良かったらOSSとして公開 https://www.irasutoya.com から コード

• https://www.irasutoya.com

自分のやり方 • OSSとして開発したら経緯など含め て勉強会などで仕事として発信

いくつかの事例を通じて、具体的に 業務をどうOSS開発へつなげてきたか ご紹介できればと思います

※事例はすべてiOSアプリ 開発の話になります

紹介するプロダクト 1. SwiftXMLParser - スタンダードライブラリが使いにくい 2. PagingKit - 要件に合うライブラリがなかった 3. SwiftUICatalog - 社内向けの教育用資料を公開

SwiftyXMLParser

SwiftyXMLParser • iOSでXMLをパースする場合、XMLParserという組み込 みのクラスを使う • XMLParserはSAX型のパフォーマンスが良いパーサー

単純なXMLでこのくらいのコード量になる (当時Swift 2.3) https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/

このXMLをパースするために https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/

• パースするためのクラスを作る • 探索イベントをメソッドとして実装 https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/

課題 • 2017年当時のYahoo!ショッピングはAPIに XMLが多用されていた • パースのための膨大なコード量を減らしたい • Swift言語で必要十分なライブラリがなかった https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/ より https://commerceapp.yahoo.co.jp/shoppingappli/

• https://techblog.yahoo.co.jp/advent-calendar-2017/swift_oss/
• https://commerceapp.yahoo.co.jp/shoppingappli/

https://github.com/yahoojapan/SwiftyXMLParser

• https://github.com/yahoojapan/SwiftyXMLParser

SwiftyXMLParser • DOM型のパーサー • 昔からあるライブラリが取り込めていない、新しい言語機能を積極的に 採用 • 軽量でデバッグがしやすいといった、実務での使い勝手に比重を置く

コード量がこのくらいに減らせる (当時Swift 2.3) https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/

• さっきと同じパース処理部分は こんなもん https://techblog.yahoo.co.jp/advent-calendar-2017/swift̲oss/

OSSとして公開 • 特定のアプリ用だったが意外と使い勝手が良かったため、 しばらく運用した後にOSSとして公開 • 言語のバージョンアップ対応やmacOS対応など面倒なメン テナンスもプルリクでもらえる

PagingKit

あるプロダクトのUI を既存ライブラリで開発 • SmartNewsやmercariなどで採用され ている、ページングと横スクロールメ ニューの組み合わせ ※イメージ (実際に関わったプロダクトとは違います)

そのライブラリでは、タイトル文字列と画面の配列を 渡すと、決まったデザインのページングUIが作られる let ary = [ { title: “Page1", view: UIViewController() }, { title: “Page2", view: UIViewController() }, { title: “Page3”, view: UIViewController() }, ] ※イメージ (実際に関わったプロダクトとは違います)

そのライブラリでは、タイトル文字列と画面の配列を 渡すと、決まったデザインのページングUIが作られる let ary = [ { title: “Page1", view: UIViewController() }, { title: “Page2", view: UIViewController() }, { title: “Page3”, view: UIViewController() }, ] メニューがある ※イメージ (実際に関わったプロダクトとは違います)

そのライブラリでは、タイトル文字列と画面の配列を 渡すと、決まったデザインのページングUIが作られる let ary = [ { title: “Page1", view: UIViewController() }, { title: “Page2", view: UIViewController() }, { title: “Page3”, view: UIViewController() }, ] ページング可能な コンテンツ領域がある ※イメージ (実際に関わったプロダクトとは違います)

スタイルもパラメータで渡すことが可能 ※イメージ (実際に関わったプロダクトとは違います)

初期プロダクトの シンプルな要件は満たしていた

しかし要件が少しずつ複雑化していき、 採用したライブラリでは対応しきれなくなる

プロダクトの成長に伴ってUIが細分化され、 こういったことを求められるようになってきた • 例えば • ある画面ではメニューの特定の要素 の上にサブタイトルを付けたい • ある画面ではコンテンツとメニュー の領域間へボタンを並べたい ※イメージ (実際に関わったプロダクトとは違います)

プロダクトの成長に伴ってUIが細分化され、 こういったことを求められるようになってきた • 例えば • ある画面ではメニューの特定の要素 の上にサブタイトルを付けたい • ある画面ではコンテンツとメニュー の領域間へボタンを並べたい ※イメージ (実際に関わったプロダクトとは違います)

UIライブラリに ありがちな課題 • デザインに柔軟性がなく、UIの最適化ができない • この再利用性に関する課題はよくある一般的なものと考える • 解決すれば世の中的な価値が高いため、趣味でこの課題に取り組む

https://github.com/kazuhiro4949/PagingKit

• https://github.com/kazuhiro4949/PagingKit

PagingKit • 様々なスタイル・レイ アウトのページングUI を実現可能 • 業務レベルの複雑なUI に適用できる https://github.com/kazuhiro4949/PagingKit

• https://github.com/kazuhiro4949/PagingKit

OSSとして公開 • 個人のリポジトリで公開 • OSSにしたあと、業務で開発しているプロダクトへ採用 • 必要な機能の追加など業務としてもメンテナンスしている

• 公開後に開発経緯を勉強会 で(仕事として)発表 https://speakerdeck.com/kazuhiro4949/uiraiburariha-doushe-ji-sarerubekika

• https://speakerdeck.com/kazuhiro4949/uiraiburariha-doushe-ji-sarerubekika

SwiftUICatalog

SwiftUI • WWDC 2019で発表されたAppleプ ラットフォーム向け新UIライブラリ • Reactjsを書くようにアプリ開発がで きる https://developer.apple.com/jp/xcode/swiftui/ より

• https://developer.apple.com/jp/xcode/swiftui/

SwiftUI • 発表後、早速1-2ヶ月に1回社内勉強会を開く • 興味を持ってはもらえるが、手を出すまでの敷居が高いこ とを感じる

SwiftUIの課題 • 公式ドキュメントにも十分に実装方法が書かれていない • 公式サンプルのコードがかなり複雑で、初心者にやや敷居が高い

https://github.com/kazuhiro4949/SwiftUICatalog

• https://github.com/kazuhiro4949/SwiftUICatalog

SwiftUICatalog • 社内のiOSアプリエンジニア向け教育資料として開発 • 実行するだけで各UIコンポーネントの表示や動きを試せる • 最小限の実装と実際の実行結果を網羅

OSSとして公開 • 自社に関わらず役に立つ資料となるため、 社内勉強会で利用後に公開 • ヤフーがやっている社外向け勉強会のネタ の一つとして活用し、好評をもらう https://yj-meetup.connpass.com/event/136285/

• https://yj-meetup.connpass.com/event/136285/

自分のやり方再掲 1.会社のプロダクトに使われているコードで世の中の技術的 課題を解決するものは、OSSとして切り出す 2.会社のプロダクトから広く世の中に通じる技術的課題を発 見し、個人でOSSとして作ってフィードバックする 3.社内勉強会のネタとして作って、好評だったら公開 4.OSSとして開発したら経緯など含めて勉強会などで発信

仕事のコードをOSS化する メリット • 始めから切り出すことを意識してクラス設計すると、機能 が明確化されて疎結合なコードが書ける • 普段から汎用的な課題がないか意識することで、個人的に ライブラリを作るきっかけが得られる • 退職した元同僚からプルリクがもらえる • プロダクトのライセンス欄に自分の名前が載る

みなさんも身近な技術的課 題からOSSプロジェクトを 始めてみてください

参考資料 • 身近な技術的課題から始めるOSSプロジェクト • https://techblog.yahoo.co.jp/advent-calendar-2017/ swift̲oss/ • ヤフーのアプリにおける会社全体での業務効率化について #devsumiC • https://www.slideshare.net/techblogyahoo/ss-153336977/ • yahoojapan - Github • https://github.com/yahoojapan

• https://techblog.yahoo.co.jp/advent-calendar-2017/swift_oss/
• https://www.slideshare.net/techblogyahoo/ss-153336977/
• https://github.com/yahoojapan