モバイルアプリにおける画像、アイコン、およびツールボタン

以前にもご紹介したように、APIとモバイルアプリの統合によって、ユーザーにとって豊かで魅力的な体験を提供することができます。以前の記事を公開して以来、私たちはGPSデモアプリをさらに改良し、現在地の天気情報や近隣のイベント情報を提供するAPIのサポートを追加しました。

モバイルデバイスの小さな画面でこれだけの機能をすべて提供する際の課題の一つは、アプリ内のすべての画面で、ユーザーが理解しやすく、一貫性があり、使いやすいナビゲーションシステムを提供することです。

モバイルアプリにおいて、アイコン画像をツールボタンとして使用することで、洗練されたナビゲーションメニューを作成できます。特に、一般的に認識され、広く合意されているアイコンを使用することで、より効果的です。例えば、左向きの矢印は「戻る」機能を、フロッピーディスクのアイコンは「保存」機能を意味することが多く、最終的な保存先が新しいファイルやディスクでなくても、その意味は通じます。

この投稿では、MobileTogetherを使用して、モバイルアプリで画像アイコンを使って、ツールボタンを備えたクロスプラットフォームのナビゲーションメニューを構築する方法について説明します。

以下に示されたスクリーンショットは、Apple iOSとAndroidのスマートフォンで動作している「Where Am I」というアプリケーションのものです。

各画面において、ユーザーは現在地のGPS座標を取得し、ツールボタンで表示される一連の選択肢が表示されます

選択されたズームレベルに基づいて、その場所の衛星写真を表示します
現在地を含むテキストメッセージを送信します
現在地で、デフォルトの地図アプリケーションを開きます
現在の場所に基づいて、一般的なウェブ検索を実行します
現在地の天気情報を取得します
近くで開催される今後のイベントの一覧をご覧ください
MapQuestの検索APIを使用して、周辺地域を検索します

このアプリケーションで使用されるツールボタンは、MobileTogether Designerというビジュアルアプリ開発ツールを使用して定義および設定されます。このツールを使用することで、開発者はアプリケーションのレイアウトをいつでも確認し、複雑な処理ロジックをテストすることができます。

当社のナビゲーションメニューは、一連のテーブルで構成されており、以下にMobileTogetherのデザイナページデザインウィンドウで表示される様子を示します

ツールアイコンを使用したメニューを作成する際には、特に、様々な画面サイズやピクセル数を持つモバイルデバイスにおいて、一貫性があり、予測可能なユーザーエクスペリエンスを実現するために、考慮すべき点がいくつかあります。

まず、それぞれの画像がクリックされた際に実行される機能を、効果的に示していることが重要です。

次に、画像は様々な手の大きさのユーザーに対応できる十分な大きさである必要があります。モバイルユーザーから「私の不器用な指のせいで」という言い訳を聞くことがよくありますが、本当にユーザーが不器用なのでしょうか？それとも、アプリのレイアウトが小さすぎて、操作しづらいのでしょうか？

最後に、複数の画面と様々なツールボタンを表示するアプリの場合、ページ全体で一貫したレイアウトと機能を提供することで、アプリの操作性が格段に向上します。

弊社の「Where Am I」デモアプリは、ツールアイコンのサイズとレイアウトを管理するために、2つのコントロールプロパティの機能を戦略的に組み合わせたものです。

各アイコンのコントロール幅を「fill_parent」に設定することで、すべての画面サイズで1つの画像ファイルを使用できるようになります。私たちのアプリでは、各アイコンは192x192ピクセルの.png画像ファイルであり、「fill_parent」は、各エンドユーザーのモバイルデバイス上で、画像が列の幅全体に自動的にリサイズされるようにします。

各ツールアイコンのテーブル列の幅は、XPath式で定義されています。私たちは、永続的なデータツリー内の要素を使用して、ツールアイコンの列幅を指定しました。これにより、各テストで個々の列幅のプロパティを編集する代わりに、データツリー内の値を再定義することで、さまざまなデバイスで異なるサイズを試すことができました。全体として、このアプリでは3種類の異なるサイズのアイコンを使用しています。以下は、列幅が格納されているデータツリーの一部です

この表には、各アイコンの周囲に余白を作るための空欄の列も含まれています。余白の列の幅は空白になっており、これは残りの未使用スペースがそれらの列に均等に割り当てられることを意味します。また、アイコンの行間に垂直方向の余白を作るために、行間のスペースを調整する機能を追加しました。

ツールアイコンの画像ファイルをアプリのファイルに埋め込むこともできますし、画像をMobileTogetherサーバーに個別にアップロードすることも可能です。

モバイルアプリにおけるツールボタンの動作定義

ツールアイコンがクリックされた際に実行される操作を定義するのは簡単です。MobileTogetherでは、ボタンコントロールと同様に、あらゆるコントロールをクリック可能にすることができます。コントロールの操作は、右クリックメニューから定義します

上記のボタンをクリックすると、モバイルデバイスに標準でインストールされている地図アプリケーションが起動し、GPS座標に基づいて地図が表示されます。ただし、このアクションスクリプトは、タップ（通常のクリック）と、長押しという異なる操作に対して、それぞれ異なる動作を定義するように改良されています。

ユーザーの好みに応じて、ボタンがクリックされた際に、内蔵されているMobileTogetherのサウンドライブラリから効果音が再生されることがあります。通常のクリックでは地図が表示されますが、長押しすると、そのボタンの機能について説明するメッセージボックスが表示されます。

モバイルアプリにおけるツールボタンのサイズバリエーション

ページ上で、ツールボタンがテキストや他のコントロールとスペースを共有する状況に対応するため、より小型のツールボタンが必要でした。例えば、以下に示す検索ページや検索結果ページなどが該当します

これらのページに表示されるツールアイコンは、永続データツリー内の小さなアイコン幅の要素を使用して、列形式で定義されています。

詳細はこちらをご覧ください。ぜひご自身で試してみてください

もし、モバイルアプリへのAPI統合に関する以前の記事を見逃してしまった場合は、こちらから読むことができます。また、MobileTogetherを初めてご利用になる方は、MobileTogetherのデモ紹介ページをご覧ください。そこには、動画、チュートリアル、そしてさらに多くのデモアプリへのリンクがあります。

弊社のデモアプリを詳しく調べていただくことで、モバイルアプリにおけるツールボタンの実装方法や、地図、検索、天気、イベントに関するAPIについて、より詳細にご確認いただけます。無料でご利用いただけるMobileTogether Designerをダウンロードし、弊社のアプリをGitHubのリポジトリから入手してください：https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I