--- title: "モバイルアプリにおけるユーザー関数を開発し、デバッグする方法" date: "2021-03-17" categories: - "apps" - "mobile-development" - "tools" tags: - "app-design" - "app-development" - "debugging" - "mobile-development-tools" description: モバイルアプリ開発におけるユーザー関数の役割について、特にAltova MobileTogetherのフレームワークを活用した効率的なコーディングにおけるローカライズとデバッグに焦点を当てて解説します。 --- Status: #blog Tags: #app-design #app-development #debugging #mobile-development-tools Categories: [low-code+no-code](/blog/ja/category/low-codeno-code.md) | [mobile-development](/blog/ja/category/mobile-development.md) # モバイルアプリにおけるユーザー関数を開発し、デバッグする方法 最近、ある先輩開発者のコードレビューで、同僚のコードに対するコメントで「英語以外の言語が使用される場合でも正しく動作するように、ユーザー関数を若干修正しました」という記述を見かけました。これは驚くべきコメントです。コードはコードであり、開発者やエンドユーザーがどの言語を話すかは関係ないはずです。ユーザー関数とは、入力パラメータを受け取り、結果を返す式にすぎません。 Altova MobileTogetherは、モバイル環境におけるユーザー機能を提供します [クロスプラットフォーム対応のモバイルアプリケーション開発フレームワーク](https://www.altova.com/ja/mobiletogether) このシステムは、ドラッグ＆ドロップによる直感的なUIデザインと、データ選択および処理のための標準化された関数型プログラミングを組み合わせたものです。MobileTogetherのデモアプリケーションの中には、ユーザーが定義する関数に大きく依存するものがあり、MobileTogether Designerには、これらのユーザー関数を作成および検証するのに役立つ機能が多数搭載されています。 モバイルアプリにおけるユーザー機能について、デモアプリの1つを例に見ていきましょう。 ![](/blog/images/mt_darktheme_blog_3.jpg) 以前の投稿で、モバイル開発における[高度なプログラミング技術](https://www.altova.com/blog/programming-techniques-for-mobile-development/)の例として、Parcel Deliveryというアプリを紹介しました。Parcel Deliveryは、経験豊富な開発者によって開発された、ユーザー機能に大きく依存した、洗練された実装です。 「Parcel Delivery」のサンプルは、実際の荷物配送アプリを完全にシミュレーションしたものです。ユーザーは、GPSの指示に従い、ニュージャージー州の倉庫からニューヨーク市内の目的地まで荷物を配送する配送会社のドライバーの役割を担います。このアプリをMobileTogether Designerのシミュレーターウィンドウで実行すると、各目的地へのリアルな移動を体験できます。また、MobileTogetherのデモサーバーからご自身のスマートフォンで「Parcel Delivery」を実行すると、スマートフォンに内蔵されているGPS機能が使用されます。 以下に、iPhoneのダークテーマとAndroidスマートフォンのライトテーマで表示される、ドライバー設定画面の例を2つ示します [![](/blog/images/mobile-screens-1.png)](mobile-screens-1.png) 実行時に動作するユーザー関数は、配送タスクの一覧と、地図上のマーカーを生成します。これらの関数の定義は、MobileTogether DesignerのXPath式エディタウィンドウで確認できます [![モバイルアプリにおけるユーザー機能の定義](/blog/images/function-definitions.png)](function-definitions.png) 選択された「Builder」オプションでは、入力支援機能、コンテキストに応じたXPath/XQueryの構文に関するポップアップ説明、および式を作成する際の自動補完機能が提供されます。一方、「Evaluator」オプションを使用すると、式の実行結果をプレビューできるため、必要に応じて式の検証や修正が可能です。 モバイルシミュレーター上でアプリケーションが実行される際、XPath評価エンジンは、ページソースデータの実行時におけるすべての値にアクセスできます。モバイルアプリケーション内のユーザー関数を評価するために、シミュレーター上でXPath評価エンジンを開くことができます [![MobileTogetherシミュレーターでユーザー関数を実行する方法](/blog/images/simulator-1-1.png)](simulator-1-1.png) `RemainingDestinations()`関数は、各目的地に関する属性情報を含むリストを返します。このリストは、Todoページの下部に表示されるテキストリストに反映されます。 `DestinationMarkerList()`というユーザー関数は、`RemainingDestinations()`関数を呼び出し、地図上に各目的地を示すためのマーカーのリストを作成します [![DestinationMarkerList関数を実行します](/blog/images/simulator-2a.png)](simulator-2a.png) 各目的地が表示される際、ユーザーが地図上のピンをクリックすると、その目的地に関するテキストとタイトルが表示されます [![ユーザーが定義した関数によって作成される、地図上のマーカーとラベルのテキスト](/blog/images/map1-1.png)](map1-1.png) `DestinationMarkerList()`関数は、地図コントロールのプロパティです [![マップのプロパティとして、ユーザー定義の関数を割り当てる](/blog/images/properties-1-2.png)](properties-1-2.png) プロジェクトのメインメニューには、アプリケーション内でユーザー定義関数が使用されている箇所をすべてリスト表示するオプションがあります [![モバイルアプリケーションにおけるユーザー定義関数の利用例のリスト](/blog/images/listing-1.png)](listing-1.png) ユーザー関数評価の詳細な分析を行うには、シミュレーション中にデバッグモードに入り、関数の評価をステップごとに確認することができます [![MobileTogether デバッガーで、ユーザー定義の関数をステップごとに実行します](/blog/images/debug-1-1.png)](debug-1-1.png) アプリケーションの実行中に、ユーザーは各配送をシミュレーションし、それぞれの荷物の受取人情報と破損状況を記録します。その結果は、「配送概要」ページに表示されます [![配送レポートにおける地図上のマーカー表示に関するユーザー機能](/blog/images/simuator-rpt.png)](simuator-rpt.png) この地図では、ピンの色が用途によって異なり、ポップアップ表示されるテキストには各配送状況が記載されています。 上部に強調表示されている配送の場合、ジョーン・ジョーンズが代行として受け取りを行ったため、ピンの色が緑ではなくオレンジ色になっています。 また、ユーザー関数であるReportMarkerList()は、データツリーから配送情報を取得し、実際の受取人が宛先者と異なる場合に、ピンの色を変更しています。 私たちがその処理が完全に成功しなかったことを知っているのは、処理内容の記述からだけです。そして、そこでコードレビューのコメントの謎が解けました！その記述は英語で書かれているため、コードレビュー担当者は、どの言語でも動作するように、ユーザーが利用する関数を修正したのです。 MobileTogetherは、実行時に様々な言語で記述されたメッセージテキストを容易に解析するためのローカライゼーション機能を提供します。 Parcel Deliveryアプリは、オペレーティングシステムの英語、ドイツ語、スペイン語、日本語、またはフランス語のバージョンに対応しています。以下に表示されているローカライズ設定画面の上部には、ページタイトル、ラベル、ボタンなどの固定テキストの翻訳が一覧表示された表があります。 [![ローカライズ設定では、実行時に決定されるテキスト文字列に名前を割り当てます](/blog/images/localization.png)](localization.png) 下部のセクションでは、実行時に発生する条件に基づいて設定されるテキスト文字列の翻訳テーブルを定義します。MobileTogetherには、デバイスの言語に関わらず、割り当てられた名前で文字列を参照する組み込み関数 `mt-load-string('名前')` が含まれています。 以下の画像は、配送レポートマップ上のピンの色とポップアップテキストを設定する `ReportMarkerList()` 関数の定義を示しています。もし、配送に関するアクションテキストが "delivered_C" という文字列と一致する場合、そのピンの色は緑色になります。"delivered_C" というテキスト（英語）は、「Persoally accepted delivery.（直接受け取り）」という意味です。スペイン語では、「Entrega aceptada en persona.（直接受け取り）」となります [![モバイルアプリにおけるユーザー定義関数の構文を、すべての言語で正しく動作するように修正します](/blog/images/simulator-rpt2.png)](simulator-rpt2.png) もし開発者が、"DeliverySummary"の内容を英語で「Personally accepted delivery（直接受け取り）」という文字列と比較した場合、他の言語で表示されるマップのピンの色が正しく表示されなくなります。 MobileTogetherシミュレーターでは、ReportMarkerText()というユーザー関数が様々な言語でどのように動作するかを検証できます。メインのプロジェクトメニューには、アプリケーションを他の言語で実行するためのオプションがあります [![ローカライゼーションの結果を検証するためのシミュレーション言語の選択](/blog/images/language-menu-es.png)](language-menu-es.png) このアプリはスペイン語で利用でき、一連の配送状況を確認することで、スペイン語で配送レポートを作成できます。配送サマリー内の各項目のアクションテキストに基づいて、各ピンの色が正しく設定されています。 [![シミュレーターを実行すると、ユーザーが定義した機能の結果がスペイン語で表示されます](/blog/images/spanish-color-map-1.png)](spanish-color-map-1.png) すべてのスキルとツールを活用し、高度なプログラミング技術（モバイルアプリにおけるユーザー関数など）を駆使して、驚くほど短い時間で独自のアプリを開発しましょう！ぜひ、弊社の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).