---
title: "あらゆる経営者を魅了するモバイルダッシュボードを構築しましょう"
date: "2017-03-16"
categories: 
  - "development"
  - "mobile"
  - "software"
tags: 
  - "mobile-dashboards"
  - "mobile-development"
  - "mobiletogether"
description: Altova MobileTogetherを使って、見た目にも美しく、機能性の高いモバイルダッシュボードを作成する方法をご紹介します。
---
Status: #blog

Tags:  #mobile-dashboards #mobile-development #mobiletogether

Categories:  [mobile-development](/blog/ja/category/mobile-development.md) | [low-code+no-code](/blog/ja/category/low-codeno-code.md)
# あらゆる経営者を魅了するモバイルダッシュボードを構築しましょう

以前の記事で、 [洗練されたモバイルアプリの作成](https://www.altova.com/blog/build-an-elegant-mobile-app-that-delights-end-users/), 当社では、シンプルなアプリケーションや、複数のモバイルデバイス上で動作する完全なモバイルダッシュボードの例を紹介しました。モバイル開発者は、ユーザーがアプリケーションの操作方法をカスタマイズできるようにすることで、エンドユーザーに新たな価値を提供できます。MobileTogetherを使用することで、開発者はクロスプラットフォームのアプリケーションを、それぞれのモバイルプラットフォームに合わせて最適化できます **そして** シンプルで直感的な操作で、ユーザーがテキストのサイズを自由に調整できるようにします。

各ユーザーが、閲覧環境やデバイスに合わせて最適な文字サイズを設定できるようにすることで、ユーザーへの配慮を示すとともに、開発者がすべてのデバイスに対応した適切な文字サイズを決定する作業から解放されます。

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

<!--more-->

### ユーザーがテキストのサイズを選択できるようにする

モバイルアプリで表示されるテキストのサイズをユーザーが調整できるように、2つの独立したボタンを使用するか、スライダーコントロールを使用することができます。

### ボタン2つでテキストサイズを変更

以前の記事で紹介した、弊社の営業報告アプリは、2つのボタンを使用する仕組みを採用しています。

![MobileTogether セールスレポート アプリ - Android版](/blog/images/Android-Landscape.png)

コントロールパネルの最下段には、直感的なラベルが付いた2つのテキストサイズ調整ボタンがあります

![MobileTogetherアプリ内のフォントサイズ調整ボタン](/blog/images/Android-Bottom-Row.png)

これらのボタンは、10から50までの範囲の値を持つ、"textSize"という名前の永続的なデータ要素の値を、それぞれ増加または減少させます。

以下に、減少ボタンに割り当てられている制御操作を示します

![MobileTogether: テキストのサイズを大きくするための操作](/blog/images/decrease-text-size.png)

そして、「増加」ボタンの動作は以下の通りです

![MobileTogether: テキストのサイズを大きくするための操作](/blog/images/increase-text-size.png)

`textSize` 要素は、MobileTogether の簡単なユーザー関数で使用され、テキストサイズを設定するための有効な文字列を生成します

![MobileTogetherにおける、変数テキストサイズに対応するためのユーザー関数に関する定義](/blog/images/set-text-size-function.png)

最後に、アプリケーション内の各テキスト要素の文字サイズは、プロパティウィンドウにあるドロップダウンメニューではなく、XPath式によって設定されます

![テキスト要素に対するモバイル対応プロパティ](/blog/images/text-size-property.png)

"textSize"要素が永続的なデータ構造内に定義されているため、ユーザーが選択したテキストサイズの設定は、そのデバイスでアプリケーションを次に起動する際に保持されます。

この2つのボタンを使用する方法は、会社全体の売上報告書のように、主要なページが少ないアプリにおいて効果的です。なぜなら、ユーザーはすぐに結果を確認でき、好みのサイズに調整できるからです。以下に、小文字と大文字で表示された会社全体の売上報告書の例を示します

![ 小さな文字で表示されるMobileTogetherアプリ ](/blog/images/small-text-sample.png) ![ 大きな文字で表示されるMobileTogetherアプリ ](/blog/images/large-text-sample.png)

注意点として、メインの見出しは本文よりも大きくなっています。これは、見出しのテキスト用の別のユーザー機能によって実現されており、この機能は本文と見出しのテキストのサイズ間の関係を設定します

![MobileTogetherにおける、見出しテキストのサイズを調整するための機能](/blog/images/headline-text-function.png)

### テキストのサイズ調整（スライダー形式）

テキストのサイズをユーザーが調整できるようにする別の方法として、スライダーコントロールを使用する方法があります。開発者は、引き続き、textSize（テキストサイズ）の値を保持するためのデータ要素を作成し、サイズを表す文字列を生成するためのユーザー関数を作成し、テキストサイズのプロパティをXPath式として割り当てる必要があります。これは、上記で説明した方法と同様です。

しかし、場合によっては、テキストのサイズを変更するためのボタンを2つ配置するだけの十分な画面スペースがないことがあります。そのような場合、1つのボタンを使って、スライダーコントロールにアクセスすることができます。

以下に示されている「エグゼクティブセールスモバイルダッシュボード」アプリは、あらゆる日付の売上データを、様々なグラフ形式で表示します。 画面上部のコントロールバーには、日付を選択するための様々な機能が用意されていますが、テキストサイズの調整ボタンを追加するだけのスペースが残されています。

![MobileTogether モバイルダッシュボードアプリ - Android版](/blog/images/Dashboard-app-Android.png)

このアプリでは、「A±」ボタンを押すと、サブページが表示され、そのページにはスライダーコントロールが用意されており、ユーザーはtextSize要素の値を調整することができます

![モバイルダッシュボードアプリにおいて、テキストのサイズを調整するためのスライダーコントロール](/blog/images/resize-slider.png)

一番上の行に表示されているテキストは、ユーザーがスライダーを操作する際に、その場でサイズが調整されます。ユーザーが「戻る」ボタンをクリックすると、メインページが再表示され、テキスト要素のサイズが調整された状態になります。この方法も、2つのボタンを使用する方法と同様に、textSize要素が永続的なデータとして保存され、アプリを次に起動する際に、ユーザーが選択したサイズが復元されます。

一部のアプリケーションには、インチとセンチメートル、ドルとユーロ、またはデフォルトのアドレスや画像ファイル名など、ユーザー設定として保存するのに適した要素がいくつか含まれている場合があります。そのような場合、開発者は、ユーザーがすべての永続的なユーザー設定を一度に確認し、変更できる単一の設定画面を作成することができます。

MobileTogether Designerは、Android、iOS、Windows 8、Windows 10、Windows Phone 8、およびHTML-5ブラウザベースのクライアント向けのクロスプラットフォームアプリに、これらの高度な機能を迅速に実装できる、無料で利用できるツールです。[今すぐダウンロード](https://www.altova.com/ja/download/mobiletogether.html)して、使い始めてください！