---
title: モバイルアプリケーションのリファクタリング
date: 2024-03-06
categories:
  - app-development
  - mobile
  - mobiletogether
tags:
  - app-development
  - mobile-apps
  - mobiletogether
  - refactoring
description: 既存のソフトウェアアプリケーションの改善は、多くの場合、熱心なユーザーからのフィードバックによって生まれます。また、新しい機能の導入は、モバイルアプリケーションのリファクタリングの機会を生み出します。
---
Status: #blog

Tags:  #app-development #mobile-apps #mobiletogether #refactoring

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md) | [mobile-development](/blog/ja/category/mobile-development.md)
# モバイルアプリケーションのリファクタリング

新しい機能や既存のソフトウェアアプリの改善に関する最高のアイデアは、多くの場合、熱心なユーザーから生まれます。新しい機能の導入は、モバイルアプリのリファクタリングの機会を生み出します。友人のケーシーは、数年間にわたって「MobileTogether Solar Data Tracking」アプリを使用して屋上太陽光発電システムの性能を監視していた際に、ある提案をしました。

このアプリは、1年間分の月ごとの生産量をグラフや表で表示するページと、過去30日間の日ごとの生産量を表示する別のページで構成されていました。各ページに配置されたナビゲーションボタンにより、表示を簡単に切り替えることができました。ケイシーの提案は、アプリを改良して、すべてのグラフや表を1つのページにまとめることでした。近年、モバイルユーザーは、長いページでデータが表示され、指1本で簡単にスクロールできるモバイルアプリに慣れてきています。1つのページで構成されたアプリの方が、操作がスムーズで、より現代的な印象を与えるでしょう。

![](/blog/images/Blog_MT_control_templates_2.jpg)

<!--more-->

Solar Data Trackerは、Android、iOS、Windowsに対応したクロスプラットフォームのアプリケーションです [単一のソースから作成された](https://www.altova.com/ja/mobiletogether) Altova MobileTogether Designerを使用することで、レポートを1ページにまとめることができました。この際、アプリケーションを簡素化するために、実装方法を再構築する機会にもなりました。MobileTogether Designerは、ドラッグ＆ドロップ操作が可能なツールであり、アプリケーションのコントロールやツールをコピー＆ペーストできます [モバイルアプリケーションのリファクタリング](https://www.altova.com/ja/mobiletogether/modular-app-development#refactoring) ローカル変数、グローバル変数、関数、アクショングループ、スタイルシート、外部データソースなど、様々な要素の使用箇所を特定することで、これらの機能は改訂作業を大幅に簡素化しました。

以下に、Androidスマートフォンで表示される「月次太陽光発電量レポート」のページと「日次レポート」のページを並べて比較した画像を示します


![[Pasted image 20250224145704.png]]

そして、こちらが新しいシングルページ版です。すべてのデータが1ページにまとめられており、iPhoneでスクロールした場合と同じように表示されます

![[Pasted image 20250224145734.png]]
中央上部にある「新しい請求書を追加」ボタンは、以前は月次レポートの最終ページでした。現在では、レポートが継続的に日次履歴データに移行します。ページの終わりを示すために、下部に区切りを追加しました。

MobileTogether Designerで新しいバージョンを作成する手順は、非常にシンプルでした

- 日報のページからデザイン要素をコピーし、それを月報のページの最後に貼り付けてください

- 不要なページナビゲーションボタンを削除してください

- ヘッダーのラベルを修正し、より分かりやすくします

- 日々のデータを表示するテーブルの表示設定を見直し、スクロール機能を無効にします

- ワークフローの階層構造から、古い日報ページを削除してください

MobileTogether Designerには、論理的な誤りや警告をチェックするための「検証」ツールと、「元に戻す」ボタンが搭載されており、これにより、問題が発生した変更箇所を特定するために、各修正履歴を遡って確認することができます。

また、ある機能グループを修正する必要があります。ユーザーが新しい日々の読書記録や、電力会社からの請求書に記載された情報を追加した場合、グラフも新しいデータテーブルに基づいて更新されるようにする必要があります。現在の実装では、各ページにあるグラフを更新するために、個別の機能グループが使用されています。機能グループのダイアログを開き、既存の機能グループにアクションを追加することで、日々のグラフも更新できます。

[![モバイルアプリケーションのリファクタリングは、内部的な効率性を向上させる機会を提供します。](/blog/images/action-group-1.png)](action-group-1.png)

また、このグループの活動内容をより正確に反映させるため、グループ名を変更しました。アクショングループのダイアログでアクショングループの名前を変更すると、デザイナーは自動的に、そのアクショングループが呼び出されているすべての箇所で名前を更新します。

組み込みのMobileTogetherシミュレーターウィンドウは、ソリューションを瞬時に実行し、ロジックのテスト、さまざまなAndroid、iOS、Windowsなどのデバイス上でのUIの表示確認、そして実行中のワークフローデータの変化の確認を可能にします。また、このシミュレーターには、詳細な観察と実行状況の追跡のための、豊富なデバッグ機能も備わっています。

「リファクタリング」メニューには、様々なデザイン要素の使用箇所を一覧表示するコマンドや、アプリケーション内で使用されていない項目をリスト表示するコマンドが含まれています。

[![MobileTogether Designerにおける、モバイルアプリケーションのリファクタリングを行うためのメニュー項目](/blog/images/refactor-menu.png)](refactor-menu.png)

アクショングループの一覧には、以前は日々の生産状況を更新していたグループが含まれています。しかし、日報のページがアプリから削除されたため、そのアクショングループは今後一切必要なくなり、削除することも可能です。

[![未使用の操作グループを表示するリストの構造を見直し、改善しました。](/blog/images/refactor-listing-1.png)](refactor-listing-1.png)

私たちは新しいモバイルデータトラッカーを導入し、ケイシーは熱心にその機能を、携帯電話の電波が弱く、Wi-Fiも利用できない公園で開催された電気自動車の展示会で紹介しました。

モバイルアプリケーションのリファクタリングに役立つMobileTogetherの様々な機能を試してみたい場合は、無料で利用できる[MobileTogether Designer](https://www.altova.com/ja/mobiletogether/download)をダウンロードしてください。