--- title: "モバイルアプリケーションにおける視覚的なフィードバック" date: "2019-04-04" categories: - "app-development" - "mobile" - "mobile-development" - "mobiletogether" - "tools" tags: - "cross-platform-mobile-development" - "mobile-development" - "mobile-development-tools" - "mobiletogether" - "visual-feedback" description: MobileTogetherを使用して、モバイルアプリケーションにおける視覚的なフィードバックの実装方法を学びましょう。動的なボタンの反応や視覚的なヒントを通じて、ユーザーとのインタラクションを向上させることができます。 --- Status: #blog Tags: #cross-platform-mobile-development #mobile-development #mobile-development-tools #mobiletogether #visual-feedback Categories: [mobile-development](/blog/ja/category/mobile-development.md) # モバイルアプリケーションにおける視覚的なフィードバック モバイルアプリケーションにおける視覚的なフィードバックは、より快適なユーザーエクスペリエンスを提供し、使いやすく楽しいモバイルアプリは、単調で退屈なアプリよりも頻繁に利用される傾向があります。MobileTogether [モバイルアプリケーションの開発のスピード化](https://www.altova.com/ja/mobiletogether) Altova社の(RMAD)フレームワークは、魅力的な視覚的なフィードバック機能を備えた、クロスプラットフォームのモバイルアプリケーションを開発するために必要なすべてのツールを統合しています。 MobileTogether Designerのドラッグ＆ドロップ操作で利用できるコントロールパレットには、クリックすると自動的に表示が変化するボタンコントロールが含まれています。また、アプリケーションの実行中に、ボタンに表示されるテキスト、画像、またはその他の要素を追加したり変更したりするための条件を定義することも可能です。 さらに、多くの他のコントロールもボタンのように定義でき、クリックされた際に一つ以上の操作を実行することができます。以前の記事では、モバイルアプリで「[アイコン画像をツールボタンとして使用する](https://www.altova.com/blog/images-as-tool-buttons-in-mobile-apps/)」ことで、スタイリッシュで洗練されたツールメニューを作成する方法について解説しました。今回の記事では、これらのツール画像のインタラクティブ性を高め、クリックされた際に魅力的な視覚的なフィードバックを表示するようにします。 ![](/blog/images/wai_700x335_2.jpg) 以下に示されたスクリーンショットは、当社が作成した「Where Am I」というアプリケーションの画面の一部で、画像がツールボタンとして使用されている様子を示しています。 [![モバイルアプリ内のツールボタンとして使用される画像。](/blog/images/tool-images.png)](tool-images.png) 画面下部の各青いアイコンは、場所に関する詳細情報を提供するツールボタンです。これらのボタンは、APIを通じてデータを取得したり、外部のウェブページを開いたりすることで、追加情報を提供します。ボタンを短くクリックすると、割り当てられた機能が実行されます。一方、ボタンを長押しすると、そのボタンに関するメッセージウィンドウが開きます [![モバイルアプリケーションにおける視覚的なフィードバックの例：画像に対する長押し操作](/blog/images/image-long-click-515x1030.png)](image-long-click.png) スクリーンショットの左下にある「天気」ボタンは、クリックされたことを示すために色が変わっています。短くクリックすると、操作が実行される前に、一時的に画像の色が変わります。 天気ボタンを軽くクリックすると、OpenWeather APIへのリクエストが送信され、天気データがグラフとテキスト形式で表示されるサブページが開きます [![画像をクリックすると、天気予報が表示されます](/blog/images/weather-subpage.jpg)](weather-subpage.jpg) ### **モバイルアプリケーションにおける視覚的なフィードバックの定義** ユーザーが画像をクリックした際に、その画像ボタンの背後の背景色を一時的に変更することで、視覚的なフィードバックを提供しています。当社のアプリ内の画像は、このMobileTogether Designerの画面の一部で示されているように、テーブル形式で配置されています [![MobileTogetherデザイナーで表示される、テーブル内の画像配置](/blog/images/buttton-layout.png)](buttton-layout.png) 各テーブルのセルには、個別に定義できる一連の属性があり、その中にはセルの背景色も含まれます。また、各画像にも、画像がクリックされた際に実行される一連の操作を定義する独自の属性があります。 [![モバイルアプリケーションにおいて、視覚的なフィードバックを実現するための、テーブルセルの背景色の設定方法](/blog/images/table-cell-background.png)](table-cell-background.png) 天気予報の画像がクリックされた際に、"userButton"という名前の要素にインデックス番号を記録することができます。その後、"背景色"プロパティで定義されているXQuery式に基づいて、"userButton"要素の内容に応じて、セルの背景色を調整することができます。 以下は、天気予報ツールで利用可能な機能の一覧です [![モバイルアプリケーションにおいて、画像がクリックされた際に、視覚的なフィードバックを表示するための処理](/blog/images/image-click-actions.png)](image-click-actions.png) まず、"userButton"という名前の要素の値を更新します。 次に、実際に画像の外観を変更する一連の処理が実行されます。これらの処理は、画像がクリックされるたびに必要となるため、専用のアクショングループ「Button Flash」に格納されています。 MobileTogetherは、アクションシーケンスの最後に、自動的に「表示更新」アクションを一度実行します。視覚的なフィードバックを実現するために、背景色を変更したり、一時的に停止したり、ユーザーボタンの値をリセットしたりした後、再度「表示更新」アクションを実行して背景色をクリアするように、アクションシーケンスの早い段階で「表示更新」アクションを実行したいと考えています。 XQueryの`sleep()`関数は、一時停止の時間をミリ秒単位で設定します。ボタンが点滅した後、処理は「天気予報取得」アクショングループから続行されます。このアクショングループは、任意の緯度と経度に対して、天気予報APIにクエリを送信し、5日間の天気予報を取得します。その後、上記のような天気予報のサブページが表示されます。 また、画像に対する長押し操作に対する視覚的なフィードバックも必要です。MobileTogetherを使用すると、ここでは示されているように、長押し操作に対して個別の動作を定義することができます [![モバイルアプリケーションにおいて、長押し操作に対する視覚的なフィードバック機能](/blog/images/long-click-actions.png)](long-click-actions.png) 上記の2枚目のスクリーンショットでは、長押し操作の結果が表示されており、メッセージウィンドウには「Get Weather」ボタンの機能について説明されています。 長押し操作の場合、背景色を変更するために1つの「表示更新」機能だけで十分であり、専用の一時停止機能として「sleep()」関数は必要ありません。また、「表示更新」アクションは、ユーザーがメッセージウィンドウを閉じると自動的に実行されるため、画像の背景は元の状態に戻ります。 ### **モバイルアプリケーションにおける、テーブル形式で繰り返し行が使用されている場合の視覚的なフィードバックについて** APIからのデータに基づいてリストを表示するページでは、ツールアイコンを特定するために、同じインデックス技術を使用することはできません。例えば、以下のスクリーンショットは、特定の場所の近くのホテルやモーテルの検索結果を示しています [![モバイルアプリケーションにおける、繰り返し行を持つテーブル](/blog/images/search-results-515x1030.png)](search-results.png) 同様のページでは、交通情報や近隣の文化イベントの情報も提供しており、各項目のツール画像に対しては、クリックした際に視覚的なフィードバックを表示したいと考えています。例えば、電話のアイコンをクリックした場合の表示例は以下の通りです [![繰り返し表示される行にある画像を長押しします](/blog/images/search-results-click-515x1030.png)](search-results-click.png) これらのページにおける各結果セットは、スクロール可能なテーブルとして定義されており、そのテーブルには繰り返し表示される行が含まれます。このテーブルには、APIからのクエリによって提供される情報が表示されます [![MobileTogetherデザイナーで作成される、繰り返し行を持つ表](/blog/images/repeating-rows.png)](repeating-rows.png) MobileTogetherには、各行に含まれる画像を特定するための便利な機能である`mt-rowgroup-index()`というXQuery拡張関数が用意されています。この関数と値を組み合わせることで、テーブル内の特定の列を識別し、個々の画像を操作することができます。上記の電話の画像には、以下のような背景色の設定がされています [![繰り返し表示される行の、セルの背景色の設定。](/blog/images/rowgroup-background-definition.png)](rowgroup-background-definition.png) ユーザーが検索結果の電話アイコンをクリックすると、まずユーザーインターフェースの「userButton」という要素の値が更新され、次に「Button Flash」というアクショングループが実行されます 行グループのインデックスに300を加えて、行内の3番目の画像であることを示しています。検索APIへのクエリでは、最大50件の結果しか要求しないため、選択された結果の行番号によって、この画像の「userButton」要素の値は301から350の範囲になる可能性があります。視覚的なフィードバックは、テーブルセルの背景色の定義で指定された`mt-rowgroup-index()`関数によって決定される、この特定の画像にのみ適用されます。 MobileTogetherには、他にも多くの機能が含まれています [拡張関数](https://www.altova.com/ja/mobiletogether/features) XPath/XQueryの式で使用できる機能を提供し、モバイルアプリケーションで頻繁に必要となる処理のために、開発者が標準のXPath、XQuery、およびXSLTライブラリを拡張するためのユーザー関数を作成する必要性をなくします。 ### 詳細はこちらをご覧ください。ぜひご自身で試してみてください モバイルアプリケーションに視覚的なフィードバックを追加したい場合は、無料で利用できる[MobileTogether Designer](https://www.altova.com/ja/mobiletogether/download)をダウンロードしてください。また、動画、チュートリアル、その他のデモアプリへのリンクが掲載されている[MobileTogether Demos](https://www.altova.com/ja/mobiletogether/demos)のページもぜひご覧ください。この投稿で紹介されているアプリケーションは、[このリポジトリ](https://github.com/altova/MobileTogether-more-examples/tree/master/Where%20Am%20I)からGitHubでダウンロードできます。