---
title: "データ駆動型のモバイルアプリ向けのスクロール可能なテーブル"
date: "2016-04-11"
categories: 
  - "development"
  - "mobile"
  - "tools"
tags: 
  - "android"
  - "data-driven-apps"
  - "ios"
  - "mobile-development"
  - "mobiletogether"
description: MobileTogether 2.1が、スクロール可能なテーブル機能を搭載することで、モバイルアプリ開発をどのように向上させるのかをご紹介します。この機能により、様々なプラットフォームで、小さな画面でも効果的にデータを表示することが可能になります。
---
Status: #blog

Tags:  #android #data-driven-apps #ios #mobile-development #mobiletogether

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [low-code+no-code](/blog/ja/category/low-codeno-code.md)
# データ駆動型のモバイルアプリ向けのスクロール可能なテーブル

モバイルデバイスの利用者は常に、最も便利で使いやすい方法で、最大限の情報を提供することを求めています。しかし、小さな画面サイズは、どうしても妥協を強いられることがあります。モバイルアプリの開発者は、データ、ナビゲーションコントロール、そしてサポート情報などを、使いやすく魅力的なレイアウトに収めるという課題に直面しています。そうしないと、顧客、同僚、あるいは経営幹部といったエンドユーザーに不満を与えてしまう可能性があります。MobileTogether 2.1では、スクロール可能なテーブルなど、様々な機能が導入されています [革新的で便利な新機能](https://www.altova.com/ja/whatsnew_mobiletogether.html) 開発者が、データを美しく表示し、あらゆるデバイスで同じように動作するアプリケーションを開発できるよう支援します。

![shutterstock_160560011](/blog/images/shutterstock_160560011-1.jpg)

<!--more-->

### スクロール可能なテーブル

MobileTogether 2.1では、開発者が、ヘッダーとフッターが固定された状態で、水平方向または垂直方向にスクロールできるテーブルを定義できます。水平スクロールにより、開発者は、広いテーブルの列をテキストのサイズを小さくすることなく、より多く表示できます。垂直スクロールを使用することで、重要な情報を常に画面上に表示し、可読性を向上させることができます。

垂直スクロールは、特に繰り返し行を持つテーブルにおいて非常に有効です。なぜなら、開発者はデザイン段階で、どのユーザーの画面に最終的にどの程度のデータ行が表示されるかを正確に予測できないからです。以下に、MobileTogether Designerで作成された、単純な4列で繰り返し行を持つテーブルの例を示します

![MobileTogetherにおける、繰り返し行を持つテーブル](/blog/images/table-designer-view-1.png)

新しいテーブルのダイアログで、列数、行数（動的な場合）、およびヘッダーとフッターの行数を定義しました。その後、ヘッダー列にラベルを追加し、フッターにコントロールを追加し、テキストのサイズと色に関するプロパティを指定しました。

スタイルとプロパティのヘルプウィンドウで、テーブルの最大高さを設定することで、垂直スクロールを実装できます。その後、テーブル全体をスクロールさせるか、ヘッダーとフッターの間にある内側の行のみをスクロールさせるかを選択できます。最大高さを、パーセント、特定のピクセル数、または画面の残りの部分を自動的に埋めるように設定することも可能です。

![MobileTogetherにおけるスクロール可能なテーブルのプロパティ](/blog/images/properties-1.png)

データ表示のために画面の利用可能な領域を最大限に活用したい開発者の方のために、MobileTogether 2.1には、ページタイトルバーを非表示にするための新しい「ページ」プロパティが追加されています

![小型デバイスでは、画面表示領域を最大限に活用するために、タイトルバーを非表示にします](/blog/images/title-bar-false.png)

当社のテーブルの、淡い青色のフッター部分には、ユーザーが別の月や年を選択できるナビゲーション機能が備わっています。フッターの中央にある「年」の列は、MobileTogetherツールバーの「結合」ボタンを使用して、2列目と3列目を結合し、より広いコントロールを作成することで実現しています。列を水平方向または垂直方向に結合したり、後で必要に応じて再度分割することも可能です。さらに、既存のセル内に新しいテーブル全体を埋め込むことで、階層的なテーブルを作成し、複雑なデータに最適なレイアウトを設計することもできます。

![MobileTogetherで、テーブルのセルを結合して、独自のテーブルレイアウトを作成できます](/blog/images/join-split-2.png)

### 垂直線

MobileTogether 2.1では、新しい垂直線コントロールが導入されました。 任意のテーブルの列間に垂直線を追加したい場合は、コントロールヘルパーウィンドウから垂直線を選択し、デザイナービューで示すように、ドラッグして配置します。 垂直線は新しいテーブルの列に配置され、列の幅を「wrap_content」に設定することで、必要最小限のスペースを確保できます。

![MobileTogetherのスクロール可能なテーブルに、縦線を追加する](/blog/images/vertical-rule.png)

垂直線も、水平線と同様に、その特性を調整することができます。各垂直線に対して表示される「スタイルとプロパティ」ウィンドウでは、線の太さ、スタイル、色、そして左右のマージンをピクセル単位で指定できます。

MobileTogetherを使用すると、各コンポーネントの表示/非表示を、デバイスの向きに基づいて設定できます。 上に示されている6列のテーブルは、左側に表示されている横向きアイコンが示すように、横向きのデバイスでのみ表示される代替バージョンです。 当初の4列のテーブルは、縦向きのデバイスでのみ表示されるように設定できます。

以下に示されたスクリーンショットは、横向きに保持されたAndroidスマートフォン上で動作している、最終的に展開されたスクロール可能なテーブルアプリのものです。ユーザーは、テーブル内のデータ行を上下にスワイプすることでスクロールできます。その他の要素は常にその位置に固定されています。フッターにある「-」と「+」のコントロールは、それぞれ前月と次月を選択するためのナビゲーションツールです。

![Androidスマートフォンで表示される、スクロール可能なテーブルのモバイル対応版](/blog/images/landscape-50.png)

画面サイズが異なるデバイスでは、表示されるデータの行数が変わる可能性がありますが、テーブルは常に定義した最大高さをパーセント表示で満たすように表示されます

![iPhoneシミュレーターで表示される、スクロール可能なテーブルのモバイル環境での動作](/blog/images/iPhone-Simulator.png)

MobileTogether Designerは無料で利用できますので、ぜひお試しください [コピーをダウンロードする](https://www.altova.com/ja/download/mobiletogether-designer.html) 今日から、クロスプラットフォームに対応したデータ駆動型のモバイルアプリ開発を、スクロール可能なテーブル機能を使って始めてみましょう！