デザインと連携するためのiOSエンジニアの動き
こんにちは、デザイナーの守谷（@emim）です。Chatworkプロダクトデザインマガジン上ではめっちゃお久しぶりとなっています（前記事を確認すると、5ヶ月ぶりなようです）。
この記事はChatworkのアドベントカレンダーの一部として、最近のわたし及び周辺の活動として、iOSエンジニアの活躍をご紹介します。
本日、実はわたしから見たB面、デザインシステムに関する（社外の）Advent Calendarで、チームメイトの釜堀（@kamy0042）もデザイントークン整備の記事を公開していますので、併せてご覧ください。
「最近の活動」とこの記事についての前置き
現在、Chatworkのプロダクト開発の現場では、各専門チームと機能開発チームという形でいくつかのチームが存在し、それぞれ独立して動いています。その中で、特にデザインと各フロントエンド開発をより密につなげたいという想いの下、1年半ほどの下準備期間を経て「デザイン基盤を整える」ためのチームを立ち上げました。"BRIDGE（ブリッジ）"という名で、各種整備活動を開始しています。
BRIDGEは、大文字の記載を正式表記としています（略語というわけではありません）。英語の意味通り、各チームおよび職域を「橋渡し」するためのチームで、現在はUIデザイナー、UXデザイナー、Web Frontendエンジニア、iOSエンジニアが所属し、連携しながらデザインの基盤の再設計を進めています。
今回は、iOSエンジニアの活動にフォーカスを当て、BRIDGEでの活動について聞いた内容をまとめています。インタビューをそのまま掲載すると壮大になってしまうため、整理して掲載します。
話を聞いたのは、iOSエンジニアのKNT（ケンティ）こと中江です（※ところどころ業務委託のエンジニアにも補足情報をいただきました）。
KNTは、普段はBRIDGEチームでのデザイン基盤整備の他に、iOSプラットフォームチームでの活動をメイン業務としています。そのあたりも併せて聞いています。
今回守谷は著者として息を潜めるため、以下はKNT談としてご覧ください 💁
目下取り組む、UIカタログアプリ開発
今回の話の目玉は、UIカタログアプリ「BRIDGE」です（チーム名とややこしいため、以下より「UIカタログアプリ」と表記統一します）。
UIカタログアプリとは、Chatworkオリジナルで開発している（非公開）iOSアプリです。Appleがサンプルコードを提供している「UIカタログ」のChatwork版というイメージです。
以下では、UIカタログアプリの詳細とその開発体制を紹介します。
Chatworkのアプリ開発体制とBRIDGEとの関係
アプリケーション開発部には、iOSとAndroidの2つのプラットフォームチームがあります。
更に別に、グロース関連の開発に注力するチーム内にも各アプリエンジニアがいて、ChatworkにはiOSの開発をするチームが複数存在している状態です。
iOSプラットフォームチーム（通称Blanc（ブラン）チーム／以下「Blancチーム」表記）では新機能開発のほか、アーキテクチャ改修、開発プロセスや開発フローの効率化といった開発環境整備、社内のライブラリー作成、コード品質の管理、ガイドライン整備など、開発基盤向上に取り組んでいます。他の開発チームが開発作業にフォーカスしたり、早く作り上げるための整備を行うのがBlancチームで、ボトルネックの解消や、レビュー、アプリのリリース作業、サポート対応、インシデント対応など、業務スコープは多岐に渡ります。
Blancチームでの開発基盤向上の一貫に、iOSアプリ上のUIコンポーネントの整備も含まれています。BlancチームでのUI関連部分の改修作業と組み合わせる形で、BRIDGE側のデザインとの橋渡し計画を始めました。
UIコンポーネント整備の側面では、どうしてもデザイン基盤が関わってきます。デザイナーと開発間の認識齟齬を見つけ、情報を集め連携し、解消をしていく。どういうことをするかの計画を立て、業務委託の方と連携して適切な実装への整備を進めるということをしています。
iOS開発上の課題と問題解決のためのUIカタログアプリ
開発者とデザイナーを含むその他の職域の人との認識齟齬を少しでも早く見つける、埋めるための仕組みとして着手したのがUIカタログアプリの開発です。
開発者であれば、開発コードをその場でプレビューすることでの実装確認が可能です。ただし他職域の方が確認をするには、どうしても時間がかかってしまいます。
UIカタログアプリがあればChatworkアプリ内で利用されているUIコンポーネントが網羅されているため、非開発者であっても、パラメーターなどのバリエーションも実際に触って動かして確認できるようになるという利点があります。
元々Blancチーム内で、ChatworkのUIコンポーネントを集めるライブラリー開発（コード開発）を進めていましたが、BRIDGEに活動領域を広げる際にUIカタログアプリを開発することにしました。ライブラリーは、Xcodeでの開発環境を整備さえすれば手元での確認が可能になりますが、非開発者がもっと簡単に扱える（実物を見られる）ものが作りたい、とBlancチーム内でも常々議題に上がっていました。
またChatworkはリリースされてから10年以上アップデートされ続けているアプリであるため、これまでにサーバーのAPIの変更、iOS開発環境の変化、開発チームの変更などにより古いコードやイレギュラーな実装が残ってしまっていたり、最新のデザイン仕様に則っている部分とそうでない部分などがあったり、多くの潜在的な問題が存在しています。
最新のデザイン仕様の適用が行われていないものが残っている他、同じUIコンポーネントに見えても実装が異なっていたり、逆に実装が同じで名称だけ異なっている場合などもありコード負債になってしまっています。また開発時に既存の似たUIの存在に気付かずに同じようなものを再実装してしまうなどの問題も発生しています。
最近のiOS開発トレンドには、ライブラリーをパッケージに分けて管理していくという流れがあります。UIだけのライブラリーを作り適切に使ってさえいれば、アプリ全体に統一された最新のUIがきちんと反映される、という仕組みです。
UIライブラリーの開発とUIカタログアプリの開発とは、コード上での統合と共にUIの見える化を同時に整備をして行くということです。
UIカタログアプリ開発の内幕
UIカタログアプリの整備の難しさ
UIカタログアプリの開発と同時に、既存のUIコンポーネントをUIKitでの実装からSwiftUIでの実装への移行も行っています。
実装コードの標準化の際、明確な決まりの存在しないUIや、UIKitからSwiftUIに移行する際に差分の発生する部分などは、都度BRIDGEチームと連携しながら適切なデザイン仕様作成にまで戻って再設計を行っています。
その都度、開発順序の変更や仕様を固めるまでの待ち時間が発生します。
UIKitにしかないUIの移行だけでなく、Chatworkの独自UIなども難度の高いポイントです。独自実装の場合には、視差効果などを網羅した上でのアクセシビリティ適用が難しいであろうことが予想されます。VoiceOverのエレメントに指定を行って何を読み上げさせるのか、などもシステム標準から外れるUIだと難しくなっていきます。
ただ、共通化さえできていればChatworkアプリ全体に即座に正しいデザインと実装を適用できるという利点もあるため、きちんとやって行きたい部分です。
こだわりポイント
UIカタログアプリは、フレームワーク上に工夫があります。
ライブラリーを利用するエンジニアが、今回作成しているライブラリー独自の前提知識がなくても使えることを意識した設計をしています。Appleの標準フレームワークのインターフェイスに寄せることで、iOSエンジニアとしての共通知識さえあれば予備知識なく利用できるよう、時間を掛け設計しています。
これは、チームに新しいエンジニアが入ってきた場合にも、ライブラリーに学習コストを要さず、まるでApple標準のものを利用するように使えるようにするためです。
Blancチームのエンジニアからは、「色のリストでの検索がしたい」という要望も出ていました。デザイナーの用意する仕様書（デザインガイド）から色を探すのに負荷が掛かっているのを解消するために、UIカタログアプリ上で色の確認や色の検索をできるようにしています。
また、現在ChatworkはiOS 14.5までサポートを行っています。SwiftUIはOSに合わせた進化がかなり速いため、新しい機能がいくつも作られます。しかし最新OS（iOS 17.1.2）から見るとiOS 14.5は少し古いOSのため、存在しないものが出てきてしまいます。一定OS以降でしか使えないようなコンポーネントについても、14.5以降で利用できるように互換性を持たせた機能作成を行っています。
ChatworkのUIカタログアプリの特長
ChatworkのUIカタログアプリは、デザイン意図と実装結果の認識齟齬をデザイナー開発間でなくすことを第一目的として作っています。
また開発者だけでなくPMなどの他、非開発者であってもChatworkのUIが集まっているところで、UIのことがわかる、触れる、読める場所を作っています。「ここを見たら全てがわかる図鑑」を作っているイメージです。
我々の作るUIカタログアプリが他と少し異なる特長は、開発ドキュメント（Storybook）やデザインファイル（Figma）とのつなぎ込みにあります。エンジニアの中には、開発中にデザイン仕様を探すなどの時間的ロスや中断が発生すると、開発効率が落ちるという話もよく聞くと思います。正しいデザイン仕様や開発ドキュメントにすぐアクセスできれば、デザインを重視した開発ができると考えています。
（著者注：業務委託の方からの意見）「UIカタログアプリから成果物とその他の開発ドキュメントを一緒に見られるというものは、他でもあまり聞いたことがありません。一般的なカタログアプリというと機能としてはUIの表示のみというイメージがあったので、ドキュメントまで統合されているUIカタログアプリというのは独自性があると思います。」
UIカタログアプリの完成形とは
冒頭でもお伝えしている通り、このアプリ名は「BRIDGE」と名付けています。BRIDGEチームの活動と同じく、「繋ぐ」という意図に強い思い入れがあります。全社でUIデザインと実装に関しての理解と認識の統一のための社内向けプロダクトです。
開発をはじめてからまだ3ヶ月です。まだ走り始めたばかりとはいえ、基礎的なコンポーネントの整備まで済んだため、UIコンポーネント作成としては結構な進捗が出ている状態です。
直近でのUIカタログアプリの目標は、コンポーネントの網羅です。アプリを確認さえすれば、実際に動かせて状態ごとの違いがわかるなど、複雑な調査をしなくても無駄な開発をしなくてよくなったり、適切なデザインの確認ができるようになります。
様々なUIがここで確認できるようになると他チームの役にも立つため、コンポーネントの充実と共に開発速度の加速をしていきたいと考えています。
また、Chatworkアプリ本体のビルドはものすごく時間が掛かってしまうため、短時間でビルドができるのもUIカタログアプリの利点のため、今後対応していきたいと考えています。
全く手を出せていない点が、アクセシビリティ周りです。アクセシビリティの設計まで含めてが完成だと考えています。難度が高いというところまでは現段階でも見えていますが、そこまで確実にできて初めて完成だと思っているのできちんと設計していきたいです。
デザイナーとエンジニアが互いにリスペクトしあえる関係になるには、双方のことを学びあえる場があることが必要だと考えています。今回UIカタログアプリを作ることで、各チームのiOSエンジニアからデザイン・コンポーネントについての相談が上がってくることが増えたように感じています。エンジニアのデザインに関する意識が高まっているし、いいキッカケになれたと感じています。
いかがでしたか、今回はデザイナーと協業するiOSエンジニアの活躍にフィーチャーしてみました。Chatworkではまだまだ架け橋になれるエンジニアもデザイナーも募集中です。記事を読んで興味を持たれた方は、各種求人情報もご覧ください！
