--- title: "モバイルアプリ開発：ユーザーの視点から見た事例" date: "2021-05-21" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "app-design" - "app-development" - "mobile-development-tools" - "user-stories" description: 太陽光発電の発電量を追跡するためのモバイルアプリケーションの開発について、ユーザーのニーズ、データ管理、そして効果的な可視化手法に焦点を当てて解説します。 --- Status: #blog Tags: #app-design #app-development #mobile-development-tools #user-stories 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) # モバイルアプリ開発：ユーザーの視点から見た事例 ああ、春！鳥のさえずり、花の開花、そして日の出が早まり、日の入りが遅くなる。この長い日照時間により、太陽光発電システムはより多くの時間をかけて発電することができます。夏至が近づくにつれて、太陽光発電システムは一年で最も効率の良い時期を迎えます。 屋上太陽光発電システムのオーナーの中には、その発電量を常に把握することに情熱を注ぐ人もいます。俳優兼コメディアンのジョン・ホッジマン氏は、太陽光発電の発電量に関する過剰な監視について、[意見の相違を調整](https://maximumfun.org/transcripts/judge-john-hodgman/transcript-judge-john-hodgman-ep-443-daylight-savings-crime/)したこともあります。私の友人であるケイシーも、太陽光発電に非常に熱心です。ケイシーに会うたびに、彼女は最新の電力使用量（キロワット時）のデータを報告してきます。ケイシーの家は温暖で日当たりの良い地域にあり、エアコンの使用が最も電力を消費します。彼女は昨年6月末に自宅の屋根に太陽光パネルを設置し、そのシステムは長い夏の日々、エアコンの使用に必要な電力を賄えるだけの発電量をすぐに達成しました。 8月の電気料金請求書を受け取ったケイシーは、太陽光発電システムの設置業者に電話をかけ、喜びを報告しました。彼女の家の8月分の電力消費量はゼロだったのです。「正直に言うと、システムがどのように機能しているかを確認するために、毎日メーターをチェックしていました」と、ケイシーは業者に話しました。 「誰でもやっていますよ」と、設置業者が答えました。「中には、お客様から一日3回もメーターを確認しているという話を聞くこともあります！」 ケーシーさんは、MobileTogetherを使って開発されたモバイルアプリが、彼女の太陽光発電システムに関するレポートツールとして役立つかどうか尋ねてきました。「私は、メーターの数値をスマートフォンに入力することができます」と彼女は言いました。「毎朝、犬の散歩に行く前に、その作業を行うことができます。」 それが、私たちのモバイルアプリ開発における共同プロジェクトの始まりでした。その結果生まれたのが、私たちが「ソーラーパワーツール」と呼ぶモバイルアプリ、MobileTogetherです。 ![](/blog/images/mt_darktheme_blog_1-1.jpg) ケーシーの太陽光発電システムには、発電量を報告するソフトウェアが搭載されていますが、それだけでは全体の半分に過ぎません。多くの住宅用太陽光発電システムと同様に、ケーシーの家も電力会社との送電網に接続されています [ネットメーター方式による料金請求](https://en.wikipedia.org/wiki/Net_metering). 太陽光パネルは、太陽が出ている間のみ住宅に電力を供給します。夜間や、発電量が消費量を下回る場合は、電力網から電力が供給されます。太陽光パネルが住宅の消費量よりも多くの電力を発電した場合、余剰電力は電力網に送り返され、電力会社の発電能力を補完します。 毎月の電力会社からの請求書には、その家が毎月どれだけの電力を生産し、消費しているかが記載されています。契約者は、消費量が多い場合はその超過分に加えて、少額の接続料金を支払います。余剰で生産された電力は、翌月の請求書に反映されます。これらの住宅には、2つの電力量計が設置されており、1つは発電量を、もう1つは消費電力量をそれぞれ記録しています。 ケーシーさんは、毎月の電力使用量を電力会社からの請求書が届くのを待たずに、アプリで確認できるものが欲しいと考えていました。そこで、モバイルアプリ開発に必要な要件をまとめました - メーターの数値データを入力するための、非常にシンプルなフォームを提供します - 読み取りデータに基づいて、自動的に口座残高を計算します - 日々の実績と毎月の残高を、数値とグラフの両方で表示します - 時間の経過とともに余剰額を追跡し、月ごとの変化を把握します。 MobileTogetherは、私たちがアプリの要件をスムーズに実現するために必要なすべての機能を備えていました。まず、日次および月次の記録のためのXMLデータ構造を定義しました。以下に、XMLSpyのグリッドビューで表示される月次データを示します [![太陽光発電の発電量を追跡するための月次レポートデータ。](/blog/images/monthly-grid-view.png)](monthly-grid-view.png) 日付やメーターの値を参照し、4列目から7列目までを見ると、発電量、使用量、月間の余剰電力、および合計残高は、いずれも単純な数値計算で算出されています。例えば、5行目を見ると、発電量（kWhGen）は、9月の太陽光発電メーターの数値から8月の数値を引き算したものです。太陽光発電メーターは常に増加方向にしか進みませんが、使用量メーターは、日照量や時間ごとの電力消費量に応じて、増加方向または減少方向に進みます。 モバイルアプリ開発の次のステップとして、アプリ全体の基本的な流れを設計しました。具体的には、日々のパフォーマンスを表示するページと、月ごとの履歴を表示するページの2つの主要なページを作成することにしました。データ入力フォームは、それぞれの主要なページからアクセスできるサブページとして構成されます。以下に、MobileTogether Pagesのヘルプウィンドウに表示されるページ構成の図を示します [![モバイルアプリケーション開発時に定義されるページ構造 ](/blog/images/pages-helper.png)](pages-helper.png) 各ページに配置されたボタンは、MobileTogetherの機能を利用して、画面間の移動を可能にします。 次に、データをグラフでどのように視覚的に表現するかを検討しました。MobileTogetherを使用すると、開発者は複数のレイヤーでグラフを作成でき、さらに異なる種類のグラフを組み合わせることも可能です。そこで、当社は面積グラフと棒グラフを組み合わせることにしました。背景には面積グラフを使用し、日ごと、月ごとの電力消費量を表示し、その上に棒グラフを重ねて、太陽光発電量を表示することにしました。その理由は、家庭では冷蔵庫や電気時計、携帯電話の充電器など、夜間も含めて常に電力を消費しているのに対し、太陽光発電は日の出から日の入りまでという間欠的な発電であるためです。 シミュレーターは、MobileTogether Designerの機能の一つで、モバイルアプリ開発中にソリューションを即座に実行し、ロジックをテストしたり、iOS、Android、またはWindowsデバイス上で表示されるUIを確認したり、ワークフローデータの変更を調べたりすることができます。以下は、シミュレーターで表示される「日次レポート」のトップページの例です [![モバイルアプリ開発中に、MobileTogetherシミュレーターで確認できる、日々の生産量を報告するためのグラフです。](/blog/images/daily-sim-view.png)](daily-sim-view.png) このページでは、4月18日から14日間の発電量をまとめています。 上のグラフに示すように、太陽光発電量は、天候（雲の量など）によって日々大きく変動します。 下のグラフは、毎日における発電量と消費量の差（プラスまたはマイナス）を示しています。 4月18日には、発電量よりも消費量が多く、4月29日には、発電量と消費量がほぼ同じになりました。 最初のグラフの下にある「表示」ボタンをクリックすると、データの数値表が表示されます ![「表示/非表示」ボタンを使用すると、日々のパフォーマンス統計の表示/非表示を切り替えることができます。](/blog/images/daily-data-table.png) 「表示」ボタンは、データテーブルの「MobileTogether 可視性」プロパティを操作します。テーブル自体はページ内でスクロール可能で、前月の全データが含まれています。「新しいデータの追加」ボタンをクリックすると、新しいデータ入力用のサブページが開きます [![ユーザーが新しい日々のデータを入力できる、データ入力用のサブページです。](/blog/images/enter-daily.png)](enter-daily.png) ボタンの動作設定で、そのボタンがページをモーダルダイアログとして開くように設定できます。これは、元のページが背景で引き続き表示されることを意味します。 [![モバイルアプリ開発時に、サブページのレイアウトを定義するための設定](/blog/images/modal-subpage.png)](modal-subpage.png) MobileTogetherを使用することで、メーターの読み取り値を入力する入力フィールドに、ヒントとなるテキストを追加することができました。また、MobileTogetherのキーボード機能も活用しました。ケーシーが新しい値を入力するために編集フィールドをタップすると、数値のみが表示されます。 [![新しい読書習慣を始めます。](/blog/images/enter-daily-2.png)](enter-daily-2.png) 両方のメーターの数値を入力した後、ケイシーは次に「生産量計算」ボタンをクリックします [![新しいデータに基づいて、その日の生産状況の統計情報を算出しています。](/blog/images/enter-daily-3.png)](enter-daily-3.png) この機能は、XQueryの計算を実行し、プレビュー用の日次生産データを生成します。その後、ケーシーが新しいデータを追加するか、入力をキャンセルします。新しい日次レコードを追加すると、日次レポートページに表示されるグラフも自動的に更新されます [![新しい測定値を追加すると、日々の生産状況を示すグラフも自動的に更新されます。](/blog/images/enter-daily-4.png)](enter-daily-4.png) 月次レポートのページは、日次レポートと同様の構成になっています。以下に、Androidスマートフォンで表示される月次レポートページの2つの例を示します。それぞれ[ダークテーマとライトテーマ](https://www.altova.com/blog/mobile-apps-that-automatically-support-dark-theme/)です [![Androidスマートフォンにおける月次レポート画面の表示例（ダークテーマとライトテーマ）](/blog/images/monthly-report.png)](monthly-report.png) このページのデータテーブルには、毎月の統計が表示されています。最初の12行は、ケーシーの公共料金の請求書から読み取ったメーターの数値に基づいており、4列目から7列目の数値はアプリによって計算されています。13行目は、最後に記録された日々の数値に基づいています。ケーシーが新しい日々の数値を入力するたびに、アプリは日々のデータテーブルとグラフを更新し、また、自動的に月ごとの合計を計算し、月ごとのテーブルの13行目を置き換え、月ごとのグラフを更新します。 この機能は、このモバイルアプリ開発における主要な要件である、「最新の公共料金請求書以降の累積余剰額を監視する」という目的を解決します。累積余剰額は、月次データテーブルの13行目、最初の月次グラフの下にあるキャプション、および両方の月次グラフの右端に表示されます。 各ページの右上に表示されている歯車アイコンは、MobileTogetherに組み込まれている「設定」ボタンの画像を使用したボタンです。このボタンをクリックすると、設定画面が表示されます。以下に、iPhone上での表示例を示します [![iPhoneで表示される設定画面。](/blog/images/settings-1.png)](settings-1.png) 設定画面の最初の4つのボタンは、開発時や分析のために、データセットを操作したり交換したりする機能を提供していました。最後の設定項目はコンボボックスで、ケイシーさんがデイリーレポートのページにあるグラフを、7日、14日、21日、または30日のデータで表示するようにリセットすることができました。 [![日々の残高の推移を21日間で表示するグラフ。](/blog/images/daily-balance-21.png)](daily-balance-21.png) ケーシーは、モバイルアプリの開発が完了した後、その結果に非常に満足していました。 毎日、彼女は愛犬を連れて朝の散歩に出かけ、メーターの数値を記録していました。 請求書が郵送されてきたら、彼女はメーターリーダーが記録した数値を基に、毎月の表を更新していました。 ある日、彼女から電話がかかってきました。「あなたは知っているでしょうが、私はほぼ1年間、家に閉じこもっていたんです。そして今、もう旅行に出る準備ができました。」彼女は言いました。「もし私が数日間、アプリの更新をしない場合、どうなるでしょうか？」 その件について考え、実際に調べてみるために、テストデータを作成しました。その結果、月次レポートで問題ないとわかりました。ユーザーがメーターの読み取りを1日分でも、1週間分でも記録し忘れた場合でも、アプリは常に最新の請求書と直近の1日の読み取り値に基づいて、累積の余剰分を計算します。 日報には、いくつかの小さな問題がありました。日々の測定値の入力欄は、日付選択機能が搭載されており、通常は現在の日付が自動的に表示されますが、測定データが存在する場合は、ユーザーが別の日付を選択することも可能です。 しかし、もし数日分のデータが欠落した場合、最終日の生産量データやグラフの値が正確でなくなります。すべての生産量と消費量は、すべて最終日に記録されてしまうのです。 解決策は簡単でした。私たちは、日々の統計量を計算する際に、条件分岐とループ処理を組み込むことで、ロジックを追加することにしました - もし、新しい測定日の日付が、直前の測定日の日付から1日以上経過していた場合、欠落した日数を数えます - 測定値を取得した期間の総日数を、総生産量と総消費量で割ってください。 - 欠測した測定日の平均生産量と平均消費量を、ループ処理を使ってそれぞれ割り当てます。 私はこのロジックをMobileTogetherのAction Groupに実装し、ケーシーが「毎日の読書を追加」ボタンをクリックした際に実行される手順に、この新しいAction Groupを追加しました。 5月2日、ケイシーは3日間のキャンプとハイキング旅行に満面の笑顔で出発しました。5月6日、彼女が帰宅した翌朝、いつものように日々のメーターの記録を入力しました。以下に、iPhoneで確認できる、欠損した日々の記録を平均値で補完した、彼女の日次レポートと月次レポートの一部を示します [![iPhoneで確認できる、読書日数の目標達成に向けた取り組みの結果です。](/blog/images/monthly-report-2.png)](monthly-report-2.png) 5月3日、4日、5日の日々のメーターの読み取り値が「0」となっているのは、それらの値が平均値であることを示しています。 もし、クロスプラットフォームのモバイルアプリ開発を行っているのであれば、豊富な機能を備えたビジュアルプログラミング機能と統合されたデバッグ機能を備えたツールが必要です。ぜひ、弊社のMobileTogetherをお試しください [ビデオデモンストレーション](https://www.altova.com/ja/mobiletogether/demos#video_Demos), もっと [サンプルアプリケーション](https://www.altova.com/ja/mobiletogether/demos), または、さらにその [オンラインマニュアル](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) 詳細な情報については、ぜひこちらをご覧ください。そして、もしあなたが、最も短い時間でクロスプラットフォームのモバイルアプリを開発したいとお考えなら、ぜひこちらから始めてください [MobileTogether Designerをダウンロードしてください](https://www.altova.com/ja/mobiletogether/download) 始めるために。