More Related Content
What's hot
What's hot (20)
Similar to その素敵なUI基盤を目指して・・・
Similar to その素敵なUI基盤を目指して・・・ (20)
More from KLab Inc. / Tech
More from KLab Inc. / Tech (20)
Recently uploaded
Recently uploaded (10)
その素敵なUI基盤を目指して・・・
- 1. 大城 信康 職種 エンジニア 所属部署 開発推進部共通基盤G KLab株式会社 その素敵な UI基盤を目指して・・・
- 2. 2 ● 2014年KLab新卒入社 ● 2つのUnityのPJを経験(サーバとクライアント) ● 現在は共通基盤グループでUI基盤ライブラリを開発・運用中 大城 信康 職種 エンジニア 所属部署 開発推進部共通基盤グループ KLab株式会社 経歴 画像
- 3. 3 UI開発でこういう経験ありませんか？ ● 障害が発生、原因となったバグが実は別PJでは解決済みだった ○ 対応を共有できていたら障害を防げていた ● UIコンポーネントを開発したがほぼ同じ物が既に他PJで作られてい た ○ 流用できていれば開発工数を少なくできた ● 工数がとれずUIコンポーネントを急ぎで開発したが大量のバグを出 してしまった ○ 時間さえあれば品質の高いUIコンポーネントを作れていた
- 5. 5 本日の発表内容 KLabで作成されているUI基盤ライブラリJigboxの話 ● UI基盤ライブラリJigbox ● Jigboxの開発・運用で特に気を使うポイント ● まとめ Jigboxの開発・運用を通して見えたUI基盤ライブラリとして気を使 いたいポイントについて紹介 UI基盤開発・運用の参考に欲しい
- 7. 7 UI基盤ライブラリJigboxとは？ ● Unityの純正UIフレームワークであるuGUI向けのコンポーネン ト集ライブラリ ● KLabで開発・運用されている ● uGUI自体が提供する標準コンポーネントの機能不足を社内共 通ライブラリとして提供することで、会社全体での開発工数の 削減が目的 ● 2016年初頭から続いているプロジェクト 2016年以降の社内で開発されているUnity案件全てで採用中
- 8. 8 UI基盤ライブラリJigboxとは？ ● UIに関する要望や不満を Jigboxが吸収 ● 全てのPJの知見をJigbox側に 適用できる ● Jigboxを通して品質の高いUIを どのPJでも作成できる Unity uGUI Jigbox (社内の要望に応える) PJ用Jigbox拡張 PJ用UI
- 9. 9 提供機能(1/2 合計29) ● 基本UI ○ Button ○ TextView ○ Toggle ○ Gauge ○ Slider ● 特化UI ○ Balloon ○ Carousel ○ DragAndDrop ○ Marquee ○ Popup ○ TabbedPane ● 時間変化 ○ Tween ○ Shake ● 入力判定 ○ Gesture ○ VirtualPad ○ ImitateInput
- 10. 10 提供機能(2/2 合計29) ● コレクション表示 ○ ListView ○ TileView ○ VariableList ○ ScrollSelectView ○ AccordionList ● グラフィック ○ Gradation ○ Mask ○ Outline ● 画面遷移 ○ SceneTransition ● アドベンチャーパート ○ NovelKit ● ツール ○ AtlasPacker ● 足回り ○ UIControl ○ Delegatable
- 16. 16 Jigboxの開発・運用で特に気を使うポイント 1. 機能要件作り 2. PJが拡張しやすい実装 3. パフォーマンス 4. PJとの認識合わせ
- 17. 17 1. 機能要件作り ● UIコンポーネントがどんな機能を提供するか決める作業 ● 入れる機能はもちろん、入れない機能を決めることも大事 ○ 無駄な機能が多くなり保守のコストが高くなるのは避ける ● 機能要件がずれているとどこにも使われない ○ UI基盤側の工数が無駄になる ○ PJ側では独自にUIを開発する工数が必要となる ● 開発全体に与える影響が大きいため慎重に行う必要がある
- 18. 18 1. 機能要件作り：Jigboxチームの場合 ● 機能要件作成時にはチームメンバーで意見の出し合い ○ 「今どきはこの機能があるのが普通だ」 ○ 「その機能はPJ側で拡張対応させるべきだ」 ● 自社他社かつゲーム以外のUI含めた既存のサービスも参考にする ことも多い ● どこまで機能をいれるべきか「これが正解」というモノはないので難し い ● ただしPJ側から入れてほしい機能の要望が来ている場合は優先度 高くして対応
- 20. 20 2. PJが拡張しやすい実装 ● UIはPJの数だけ固有の仕様がある ● 全ての仕様にJigboxが対応するこは 現実的ではない ● PJ固有の仕様にはJigboxを拡張して 対応してもらう ● 拡張がしやすい実装にする必要があ る Unity uGUI Jigbox PJ用Jigbox拡張 (固有の仕様への対応) PJ用UI
- 21. 21 2. PJが拡張しやすい実装 ● 見た目はPJ側が指定できる ○ Jigbox側からは極力制限をかけない ● ロジックの拡張を楽に行えること ○ 主要機能毎にクラスを分けて入れ替え可能 ○ 一部の処理だけ変更できるようメソッドやプロパティは基本 virtualをつけていてoverrideが可能 ○ etc...
- 23. 23 3. パフォーマンス ● パフォーマンスが悪いとゲーム体験が損なわれるためPJ側で 使われなくなる ● CPU、メモリ使用量は極力抑える ○ ユーザ非操作時はGCAllocが0になるように ○ オブジェクトを大量に必要とする場合はプール機構の導入 ○ Instantiateするときにparentも指定する ○ etc... ● 新規UIコンポーネント開発時は特に力をいれてチェック ● PJ側から指摘されて改修をいれることも
- 24. 24 3. パフォーマンス：Carouselでの実話 ● Carouselではセルの使いまわししておらずセルの数が増えるとメモリ 使用量も増える ○ 当時のJigboxが忙しくプール機構を入れる工数が無かった ○ 使用用途的にそこまでセルの数は多くならないとも想定 ● 実際にはセルの数は多く使用されることもあり、PJ側からパフォーマ ンスの問題点を指摘される ● Carouselを拡張して特殊なUIを作成されたときにはセルの数が20以 上にもなり深刻な処理負荷になった
- 26. 26 4. PJとの認識合わせ Jigboxは複数PJとのやりとりが多い ● 欲しい機能についてヒアリング ● お知らせを出す ○ 新しいリリース ○ バグ発見時 ○ 破壊的な変更を入れる場合 ● Jigboxの使用方法や拡張方法の相談
- 27. 27 4. PJとの認識合わせ：Jigbox側でコストを払う PJと認識を合わせる為にコストをかける ● 問題となるUIコンポーネントが使われて いるかPJのリポジトリのチェック ● しっかりとしたドキュメントの用意 ○ 読みやすい文章 ○ 無駄な情報が入っていないか ○ 図を使ったほうがよいか なぜそこまでコストをかけるのか？ 実際に用意されたドキュメント (一部抜粋)
- 28. 28 4. PJとの認識合わせ：UI基盤使用のデメリット ● PJにとってはUI基盤を使用することでかかるコストもある ○ コンポーネント理解にかかる時間 ○ アップデートを行うたびにテストの工数が必要 ○ UI基盤側の改修でバグを起こされてしまう可能性もある ○ etc... ● UI基盤を導入することはデメリットになりうる部分もあることも認識 ● なにより使うことに不安を覚えるものならPJ側は使用しない
- 29. 29 4. PJとの認識合わせ：Jigboxの場合 UI基盤をPJに使ってもらうためにはどうすればよいのか ● PJと信頼関係を築いていく ○ Jigboxは最初に導入してもらったPJとは色々あった ○ しかしそこで使ってもらえて成果がでたので次のPJからも使わ れるようになっていった ● 一番まずいのはお互いの認識がずれること ○ バグの内容、機能内容、完成期日等の認識がずれているとPJ 側のサービスに損害を出す可能性もある ○ UI基盤への不安も持たれる ● PJに不安なくJigboxを使用してもらうためにも認識合わせにコストを 払っている
- 31. 31 Jigboxの開発・運用で特に気を使うポイント 1. 機能要件作り ○ UI基盤として提供する範囲を意識しつつPJ側が使いたくなる機 能要件に 2. PJが拡張しやすい実装 ○ PJ固有のUIに対して柔軟に対応できるように 3. パフォーマンス ○ パフォーマンスは極力妥協しないこと ○ 使用用途の想定が甘くないかも注意 4. PJとの認識合わせ ○ PJとの認識のズレを無くし信頼関係を構築していくことが大切
- 32. 32 まとめ
- 33. 33 まとめ ● KLabでは複数PJで使用されるUnity用UI基盤ライブラリを開発 ・運用中 ● PJが必要とする機能を共通化して提供することで会社全体で の工数削減を行う ● UI基盤の導入はPJ側にも労力がかかるが受けられる恩恵は 大きい ● UI基盤を作るのであれば、今回紹介した4つのポイント参考に して欲しい ● 素敵なUI基盤を作成しましょう