---
title: "モバイルアプリで署名を収集する"
date: "2015-12-23"
categories: 
  - "mobile"
  - "xquery"
tags: 
  - "mobile-development"
  - "mobiletogether"
  - "software-tools"
description: Altova MobileTogether 2.0を使って、モバイルアプリに署名機能を追加する方法を学びましょう。クロスプラットフォーム対応機能や署名の保存方法について詳しく解説します。
---
Status: #blog

Tags:  #mobile-development #mobiletogether #software-tools

Categories: [mobile-development](/blog/ja/category/mobile-development.md) | [xpath+xquery](/blog/ja/category/xpathxquery.md)
# モバイルアプリで署名を収集する

最近、クレジットカードの購入や荷物の配達を受け取る際に、電子署名に同意したことがあるかもしれません。今なら、[Altova MobileTogether 2.0](https://www.altova.com/ja/whatsnew_mobiletogether.html)を使用することで、あらゆるプラットフォームのモバイルアプリに署名機能を追加することができます。

![署名](/blog/images/signature.png)

<!--more-->

遠隔地からデータを収集したり、請願を回覧したり、合意を承認したり、あるいは単に現実世界のやり取りを記録したりするモバイルアプリは、すべて署名収集機能を活用できます。GPS機能を活用したAltova Parcel Deliveryのサンプルアプリは、配達確認のための署名機能が追加されました。このParcel Deliveryアプリは、Altova MobileTogether Demoサーバーにインストールされており、[MobileTogether Clientアプリ](https://www.altova.com/ja/mobiletogether/app.html)を通じて、ご自身のモバイルデバイスで実行できます。

この「荷物配送」アプリは、都市部の配送サービスの運用をシミュレーションしており、受取人に、ドライバーのモバイルデバイス上の署名欄に署名してもらい、本人確認を行います。以下は、小型Androidタブレットで撮影された画面の例です。

![AltovaのParcel Deliveryモバイルアプリにおける署名機能](/blog/images/Screenshot-1.png)

荷物の配達ルートが完了すると、Parcel Deliveryアプリには、配達の概要が表示され、確認のために、受取人の署名が表示されます。

![Altova Parcel Deliveryモバイルアプリにおける署名認証機能](/blog/images/Screenshot-2.png)

これらのスクリーンショットは、モバイルアプリにおける署名機能の一般的なワークフローを示しています。具体的には、署名が入力され、保存され、その後、ある時点や場所で再び表示されるという流れです。

多くのアプリケーションにおいて、署名が取得されたデバイスとは別のデバイスで再表示されます。例えば、従業員がモバイルアプリを使用して署名済みの経費報告書を提出し、その報告書をマネージャーが確認し承認したり、購入者が電子署名で発注書に署名し、そのコピーを購買データベースに保存したりするケースが考えられます。MobileTogetherには、開発者が複数のプラットフォームで署名を表示したい場合に役立つ機能が搭載されています。

この機能を示すために、サインをファイルに保存し、さまざまなデバイスで再表示する簡単なアプリケーションを作成しました。例えば、Androidスマートフォンで取得したサインをiPadに表示したり、Windows 10で動作しているアプリケーションから取得したサインを、あらゆるモバイルデバイスに表示することができます。以下に、サインアプリケーションの起動画面の一部を示します。この画面では、ユーザーは新しいサインを取得するか、すでに保存されているサインを閲覧するかを選択できます。「取得」ボタンと「閲覧」ボタンをクリックすると、それぞれ対応するサブページが開きます。

![Signaturesというクロスプラットフォーム対応のデモ用モバイルアプリの起動画面](/blog/images/Screenshot-3.png)

**署名取得機能**

署名入力用のサブページの設計は非常にシンプルで、上部にラベル、署名入力欄、そして署名を保存するためのボタンと、署名を消去してやり直すためのボタンという、わずか4つの要素で構成されています。

![サインイン機能のデモアプリで使用する、登録画面のデザイン](/blog/images/Capture-Page-Design.png)

署名入力欄は、MobileTogether Controlsのヘルパーウィンドウからアイコンをドラッグすることで、サブページに追加されます。この入力欄は、シミュレーションに使用するデバイスの幅に合わせて自動的にサイズが調整され、特別な設定は不要です。署名入力欄の色は、デバイスのデフォルト設定に基づいています。上記の例では、デザインにiOSデバイスが選択されているため、デフォルトの色は黒い背景に白いインクで表示されます。後で、このアプリがAndroidで動作する場合、デフォルトの色は灰色の背景に黒いインクで表示され、Windows Phoneの場合は、白い背景に黒いインクで表示されます。

上記の「ページソース」ヘルプウィンドウには、署名画像を保存するために定義した要素、およびその色やデバイスに関する追加データを記録するための要素が表示されています。これらの情報は、後で確認する際に役立ちます。ご自身のアプリケーションのワークフローに応じて、現在の日付と時刻、または署名と一緒に位置情報などを記録することも可能です。当社のアプリケーションでは、新しい署名がすべて、MobileTogetherサーバー上の「signatures.xml」というファイルに追記されます。この簡単な例では、すべてのユーザーが同じファイルにアクセスします。

アプリを設計する際、一部のユーザーが署名を作成し、他のユーザーが別のデバイスでそれらを確認する場合、確認者が使用するデバイスのデフォルトのサイズと色で署名を表示するのが理想的です。MobileTogetherには、これを実現するための特別な機能「mt-change-image-colors」が用意されています。

**署名表示機能**

取得した署名は、署名入力欄または画像として表示できます。どちらの表示方法を選択した場合でも、元の署名は自動的に表示デバイスに合わせてリサイズされるため、タブレットで取得した署名は自動的にスマートフォンに、またはその逆も可能です。

以下に示されたスクリーンショットは、iPhoneで撮影されたもので、iOSの標準的な白黒表示で署名が表示されています。一方、元の画像はAndroidデバイスで撮影されたもので、黒地にグレーの表示となっています。

![Altova Signaturesのデモ版モバイルアプリ（クロスプラットフォーム対応）を使用して、取得した署名をレビューしてください](/blog/images/Capture-Review-Signature-with-expression.png)

右側には、色を変換する処理が記述されています。注意点として、インクの色とキャンバスの色が、一度の処理で変換されます。もし色の変換に2つの色を反転させる必要がある場合、このように一度に処理する必要があります。もし2回に分けて処理すると、例えば黒いインクが白に変わってしまい、キャンバスの色と一致してしまったり、途中で完全に塗りつぶされてしまい、サインが消えてしまう可能性があります。

**カスタムカラー (または、お客様ご希望のカラー)**

デフォルトの色に限定されるわけではありません。各署名コントロールに対応するプロパティヘルパーウィンドウでは、「テキストの色」フィールドで署名のインクの色を、「背景色」フィールドでキャンバスの色を設定できます。XPath変数を使用して、後で変換するためにこれらの値を保存してください。

![キャプチャされた署名に使用する色を定義するためのスタイル設定ウィンドウ](/blog/images/Styles-Helper-Window.png)

シグネチャードモアプリに、ユーザーがカラーパレットから好きな色を選択できる機能を追加しました。この機能により、ユーザーはカラーボックスからカスタムカラーを選択できるようになりました

![Altovaの署名デモモバイルアプリにおいて、ユーザーが自由に設定できるカスタム署名カラー機能の強化](/blog/images/custom-colors-capture.png)

[無料のMobileTogether Designerをダウンロードして、わずかな時間で、独自のクロスプラットフォームモバイルアプリに署名機能を追加できます](https://www.altova.com/ja/download/mobiletogether-designer.html) インストールには、MobileTogetherデモサーバーにインストールされているすべてのサンプルアプリのデザインが含まれます。 この記事で説明されている署名デモアプリを試したい場合は、GitHubで公開されています：[https://github.com/altova/MobileTogether-signature-capture](https://github.com/altova/MobileTogether-signature-capture)

**MobileTogether モバイルアプリケーション**

お使いのデバイスに対応したアプリストアから、アプリをダウンロードしてください **無料** アプリケーション：

[![Google Play ストアで利用可能な Android アプリケーション](/blog/images/googleplay.gif)](https://play.google.com/store/apps/details?id=com.altova.mobiletogether)

[![Apple Storeで提供されているiOSアプリケーション](/blog/images/Download_on_the_App_Store_Badge_US-UK_135x40.png)](https://itunes.apple.com/us/app/altova-mobiletogether/id904018222?)

[![Windows Storeで提供されているWindows Phone 8アプリケーション](/blog/images/258x67_WPS_Download_cyan.gif)](http://www.windowsphone.com/s?appid=49ef6685-f3bc-4df3-ac2a-99ae567979ca)

[![Windowsストアで提供されているWindows 8アプリケーション](/blog/images/Windows8_Green.png)](http://apps.microsoft.com/windows/en-us/app/altova-mobiletogether/9775f49c-3db4-4fe4-8e7b-19ae77f537bb)