--- title: "StyleVisionのデザインをMobileTogetherに変換する" date: "2017-04-27" categories: - "applications" - "mobile" tags: - "android" - "enterprise-forms" - "ios" - "mobile-development" - "mobiletogether" - "stylevision" description: この記事では、StyleVisionで作成したデザインをMobileTogetherアプリに変換する方法について解説しています。これにより、企業向けのフォームをモバイルデバイスやウェブブラウザ上で利用できるようになります。 --- Status: #blog Tags: #android #enterprise-forms #ios #mobile-development #mobiletogether #stylevision Categories: [low-code+no-code](/blog/ja/category/low-codeno-code.md) | [mobile-development](/blog/ja/category/mobile-development.md) # StyleVisionのデザインをMobileTogetherに変換する StyleVisionは、Altova社が提供する、視覚的なXSLTエディタです [スタイルシートデザイナー](https://www.altova.com/ja/stylevision/xslt-stylesheet-designer.html) そして [レポート作成ツール](https://www.altova.com/ja/stylevision/multi-format-report-builder.html), また、非常に強力なものです [企業向けフォームデザイナー](https://www.altova.com/ja/stylevision/authentic-form-design.html) Altova Authenticで使用するために、XMLデータやデータベースデータを電子フォームに変換する必要がある顧客に人気があります。 Authenticは、専門知識のないユーザー向けのWYSIWYGエディタであり、以下の環境で利用可能です [デスクトップ版とブラウザのプラグイン版](https://www.altova.com/ja/authentic/desktop-browser-deployment.html). しかし、セキュリティ上の問題が深刻化しているため、多くの最新のウェブブラウザでは、ネイティブプラグインのサポートが段階的に終了されています。もしお客様がAuthentic Browser Editionをご利用の場合でもご安心ください。既存のStyleVisionデザインをMobileTogetherデザインに変換することで、MobileTogether Serverを通じて、ウェブブラウザでアクセス可能なシンプルなURLとして、またはモバイルデバイス上のネイティブアプリとして展開することが可能です。 それでは、そのアプローチの利点について見ていきましょう。 ![企業向けフォームをモバイルアプリへ変換](/blog/images/v2017R3_convert.jpg) ## Authentic FormsをMobileTogetherアプリに変換する 「[MobileTogether](https://www.altova.com/ja/mobiletogether.html)」への変換機能は、StyleVisionで作成されたあらゆるデザインに対応しており、例えば、ビジネスレポートをiOS、Android、Windowsデバイス向けのアプリで利用できるようにすることで、モバイル環境での利用を可能にします。しかし、特に、通常であれば「Authentic Browser Edition」を使用して企業向けフォームを導入する企業にとって、この機能は非常に有効です。   ![StyleVisionをモバイル環境向けにエクスポートする](/blog/images/sv-to-mt.png)   StyleVisionに付属している「請求書」のサンプルファイルを使って、具体的な例を見ていきましょう。このタイプのアプリケーションは、モバイルデバイスやブラウザでの利用に適しています。 以下は、StyleVisionで表示される「Authentic」の請求書電子フォームの一部の例です   ![StyleVisionの請求書](/blog/images/stylevision-invoice.png)   現在、Invoice.spsファイルをMobileTogetherファイルとしてエクスポートし、それをMobileTogether Designerで開くと、書式、レイアウト、および機能が維持されます。変換するStyleVisionのデザインの複雑さによっては、希望する外観と機能を実現するために、MobileTogether上で追加の作業が必要になる場合があります。 しかし、Invoiceは比較的シンプルなアプリケーションであるため、大幅な調整は必要ありません。MobileTogetherに組み込まれているシミュレーターを起動して、すぐにその動作を確認してみましょう。このシミュレーション画面は、iPad上でInvoiceがどのように動作するかを示しており、このシミュレーターはあらゆるオペレーティングシステムやデバイスに対応しています。   ![アプリケーションシミュレーター](/blog/images/app-simulator-ipad.png)   日付入力欄を日付選択機能に更新するために、いくつか簡単な変更を加えましょう。コントロールパネルから「日付」コントロールをドラッグして、デザイン上の「請求日」セクションに配置し、さらにドラッグ＆ドロップ操作を行うことで、「InvoiceDate」というXML要素をそのコントロールに関連付けることができます。   ![アプリに日付選択機能を追加する](/blog/images/add-date-picker.png)   それでは、実際にAndroidデバイスでアプリを動作させてみましょう。ご覧のとおり、先ほど追加したボタンをユーザーがタップすると、OSに特有の日付選択機能が表示されます。日付を変更すると、新しいデータが「InvoiceDate」という要素に正しく保存されます。   ![Android向けの日付選択コンポーネント](/blog/images/app-date-picker.png)   新しいアプリのデザインが完成し、品質に満足できれば、iOSのiPhoneおよびiPad、Androidデバイス、そしてWindows 8/10搭載のパソコンといった、様々なプラットフォームでエンドユーザー向けにアプリをリリースすることができます **また、あらゆるウェブブラウザでも利用可能です**. MobileTogetherのブラウザクライアントを使用する場合、特別なブラウザプラグインは不要です。ユーザーは、お客様が提供するURLにアクセスするだけでアプリを利用でき、アプリ自体はMobileTogetherサーバーから直接配信され、HTML5、CSS、JavaScriptのみを使用します。 MobileTogetherには、以下の2つの導入オプションがあります - 社内利用や企業利用の場合、エンドユーザーは、堅牢なセキュリティ対策を施した状態で、ウェブブラウザからMobileTogetherサーバーに接続することで、アプリケーションにアクセスできます。また、iOS、Android、Windows Phone、またはWindows 8/10用の無料のMobileTogetherクライアントアプリケーションをダウンロードし、お好みのデバイスからサーバーに接続することも可能です。 - さらにカスタマイズが必要な場合は、開発者は独自のブランド要素を追加し、各プラットフォームに対応したネイティブアプリを開発し、アプリストアに提出します。ユーザーはそこからアプリをダウンロードできます。この場合、ブラウザ版クライアントへのURLも提供することができます。 いずれにしても、これで皆様は、ほぼすべてのウェブブラウザやモバイルデバイスで、自社のフォームを柔軟に利用できるようになりました。 MobileTogetherには、数多くの高度な機能が搭載されています [モバイルアプリケーション開発のための機能](https://www.altova.com/ja/mobiletogether/features/default.asp), そのため、お客様のアプリケーションは、シンプルでも高度な機能を持つものであっても、お客様のご希望に応じて自由に設計できます。 MTDファイルを作成することで、作業時間を大幅に短縮し、最初のモバイルフォームを開発する際の初期段階をスムーズに進めることができます。モバイルアプリ、ブラウザアプリ、またはその両方として展開する場合でも、特別なモバイル開発の経験は必要ありません [アプリケーションを開発する](https://www.altova.com/ja/mobiletogether.html) MobileTogetherを使用することで、StyleVisionの開発者の方々にとって、MobileTogetherのアプリケーション設計プロセスは馴染み深いものになるでしょう。 使い始めるのは簡単です。まず、[無料のMobileTogether Designer](https://www.altova.com/ja/download/mobiletogether.html)をダウンロードしてください。