[論文レビュー] Machine Learning-Based Prototyping of Graphical User Interfaces for Mobile Apps

Kevin Moran, Carlos Bernal-Cárdenas+3 more|arXiv (Cornell University)|Feb 7, 2018

Software Engineering Research被引用数 6

ひとこと要約

本論文では、機械学習を用いたReDrawというシステムを提案する。このシステムは、モックアップからGUIコンポonentを検出し、深層学習およびソフトウェアマイニングを用いて分類し、K近傍法を用いて構造的で視覚的に正確なAndroidアプリにアセンブルすることで、モバイルGUIプロトタイピングを自動化する。コンポonent分類の正確性は91%に達し、ターゲットのモックアップと高い視覚的類似性を持つプロトタイプを生成する。

ABSTRACT

It is common practice for developers of user-facing software to transform a mock-up of a graphical user interface (GUI) into code. This process takes place both at an application's inception and in an evolutionary context as GUI changes keep pace with evolving features. Unfortunately, this practice is challenging and time-consuming. In this paper, we present an approach that automates this process by enabling accurate prototyping of GUIs via three tasks: detection, classification, and assembly. First, logical components of a GUI are detected from a mock-up artifact using either computer vision techniques or mock-up metadata. Then, software repository mining, automated dynamic analysis, and deep convolutional neural networks are utilized to accurately classify GUI-components into domain-specific types (e.g., toggle-button). Finally, a data-driven, K-nearest-neighbors algorithm generates a suitable hierarchical GUI structure from which a prototype application can be automatically assembled. We implemented this approach for Android in a system called ReDraw. Our evaluation illustrates that ReDraw achieves an average GUI-component classification accuracy of 91% and assembles prototype applications that closely mirror target mock-ups in terms of visual affinity while exhibiting reasonable code structure. Interviews with industrial practitioners illustrate ReDraw's potential to improve real development workflows.

研究の動機と目的

• モバイルアプリ開発におけるGUIモックアップから実行可能コードへの手作業による変換が時間と手間がかかり、誤りが生じやすいという問題に取り組む。
• 機械学習を用いたプロトタイピング段階の自動化により、デザイナーと開発者の負担を軽減する。
• GUIモックアップを機能的なAndroidプロトタイプアプリに、迅速かつ正確に、視覚的に忠実に変換することを可能にする。
• 実際の開発プロセスに自動プロトタイピングを統合することで、産業的ワークフローを改善する。
• 設計モックアップとネイティブコードの間の抽象化のギャップを埋めるエンドツーエンドのソリューションを提供する。

提案手法

• デザインファイルからのコンピュータビジョンまたはメタデータ抽出を用いて、モックアップアーティファクト内のGUIコンポonentを検出する。
• マイニングされたソフトウェアリポジトリおよび動的解析に基づいてトレーニングされた深層畳み込みニューラルネットワークを用いて、ドメイン固有のタイプ（例：トグルボタン）に検出されたコンポonentを分類する。
• 実際のAndroidアプリのレイアウトに基づいてトレーニングされたK近傍法を用いて、階層的なGUI構造を構築する。
• データ駆動型のコード生成を用いて、分類済みのコンポonentと階層的構造から最終的なプロトタイプアプリケーションをアセンブルする。
• 自動化された動的解析およびアクセシビリティサービスを活用して、CNN分類器のトレーニングに使用するGUIメタデータを抽出する。
• ソフトウェアリポジトリ、動的解析、モックアップアーティファクトといった複数のデータソースを統合し、統一的でプラットフォーム特化型のプロトタイピングパイプラインを訓練する。

実験結果

リサーチクエスチョン

• RQ1 機械学習システムは、静的モックアップ画像またはデザインファイルからGUIコンポonentを正確に検出し、分類できるか？
• RQ2 KNNベースのアプローチは、コンポonent分類に基づいて、意味的かつ視覚的に正確なGUI階層をどれほど正確に再構築できるか？
• RQ3 生成されたプロトタイプは、視覚的外観および構造的レイアウトにおいて、元のモックアップとどの程度類似しているか？
• RQ4 pix2code や REMAUI といった既存のベースラインと比較して、提案手法はコンポonent分類の正確性および視覚的類似性において優れているか？
• RQ5 産業界の実務家は、このシステムを実際の開発ワークフローに統合し、その自動化の恩恵を享受できるか？

主な発見

• ReDrawは、マイニングされたソフトウェアリポジトリおよび動的解析に基づいてトレーニングされた深層CNNを用い、平均91%のGUIコンポonent分類正確性を達成した。
• 定性的および定量的評価を通じて検証された結果、システムは元のモックアップと強い視覚的類似性を示すプロトタイプアプリケーションを生成した。
• KNNベースのアセンブリ手法によって生成された階層的構造は、人間の開発者が通常作成するレイアウト構造に非常に近いものであった。
• 産業界の実務者からは、ReDrawがプロトタイピング段階の加速に寄与する可能性があると報告された。
• pix2code や REMAUI といったベースライン手法と比較して、ReDrawはコンポonent分類および視覚的類似性の両面で優れたパフォーマンスを示した。
• このシステムのアーキテクチャは他のプラットフォームへも一般化可能であるが、今後の研究ではトランスファーラーニングやプラットフォーム特化のメタデータ抽出が必要となる可能性がある。