--- title: "BYOD環境において、あらゆるモバイルデバイスで利用可能な形式で、グラフやチャートを作成・表示します" date: "2014-12-10" categories: - "development" tags: - "charts" - "mobile-development" - "mobiletogether" - "software-tools" description: Altova MobileTogetherのグローバル変数とローカル変数を利用して、BYOD環境における様々なモバイルデバイス向けに、グラフやチャートの表示形式を最適化する方法を学び、開発効率を向上させましょう。 --- Status: #blog Tags: #charts #mobile-development #mobiletogether #software-tools Categories: [development](/blog/ja/category/development.md) # BYOD環境において、あらゆるモバイルデバイスで利用可能な形式で、グラフやチャートを作成・表示します モバイルビジネスソリューションの開発における課題の一つは、エンドユーザーが利用する多様なデバイスに対応するためのフォーマット調整です。各モバイルOSは、小型のスマートフォンから大型のタブレットまで、さまざまな画面サイズをサポートしています。そして、競合するOSに移行すると、画面サイズが再び変化します。このように、多くの異なるモバイルデバイスに対応する必要があることは、BYOD（Bring Your Own Device：従業員が私物のデバイスを使用する）環境におけるモバイルソリューションの開発を遅らせる可能性があります。 ![Altova MobileTogetherを使用して作成された、あらゆるモバイルデバイスに対応した円グラフ](https://lh5.ggpht.com/-7Xh6qdjc2N0/VIc8xfEsPgI/AAAAAAAAB30/DNEO_7zmRMg/Opening%252520Chart%252520Capture%25255B2%25255D.png?imgmax=800 "Pie chart for any mobile device created using Altova MobileTogether") Altova MobileTogetherは、[クロスプラットフォーム対応のモバイル開発フレームワーク](https://www.altova.com/ja/mobiletogether.html)であり、一度の開発で複数のプラットフォームに対応したアプリケーションを構築できます - Android - iOS - Windows 8 - Windows Phone 8 - HTML5ベースのブラウザクライアント さらに、MobileTogetherは、各オペレーティングシステムで利用可能なすべての画面サイズに対応しており、開発者の生産性を向上させるための特別な機能も備えています。 **グローバル変数が解決に貢献する** MobileTogether Designerでは、モバイルソリューションの設計時に様々な用途で利用できる、30種類以上のグローバル変数とローカル変数を含むライブラリにアクセスできます。グローバル変数は静的なもので、ソリューションの実行中に値が変化することはありません。一方、ローカル変数は動的なもので、特定の状況でのみ利用可能です。 多くのグローバル変数は、モバイルソリューションが実行時に使用するデバイスの値を持っています ![Altova MobileTogetherにおけるグローバル変数](https://lh4.ggpht.com/-vNpe-nYOYfI/VIc8xs2WRLI/AAAAAAAAB34/AMbi82MP8SM/Global%252520Variables%252520Crop%25255B2%25255D.png?imgmax=800 "Global Variables in Altova MobileTogether") グローバル変数は、MobileTogether Designerのプロパティウィンドウで直接設定することもできます。また、グローバル変数を含む関数を作成し、その結果に基づいて処理を定義することも可能です。 もし、デザインに必要な特定の変数が見つからない場合は、独自のユーザー変数を定義することも可能です。もちろん、これらの変数に加えて、データソースに含まれる要素も利用でき、それらも関数内で使用できる値として活用できます。 **変数のチャートサイズを設定する** グローバル変数 `$MT_DeviceWidth` をプロパティウィンドウでチャートの幅として設定すると、実行時にチャートは、縦向きで使用されているデバイスの幅に合わせて自動的に調整されます。これは、デバイスのモバイルオペレーティングシステムや画面サイズに関係なく適用されます。 グラフの高さをあらかじめ設定する必要はありません。高さは自動的に調整されるため、スクロールなしでグラフ全体を閲覧できます。 デバイスに依存する表示設定を持つグローバル変数やローカル変数を使用することで、特定の条件に対する動作を定義できます。例えば、縦向きと横向きの表示モードの違いなどです。Altova MobileTogetherのデモサーバーにある「ウィジェット販売データ」のソリューションでは、デバイスの向きに応じて、ローカル変数を活用してグラフデータを様々な方法で表示する例を紹介しています。例えば、「地域別売上」のページでは、縦向きの表示時には折れ線グラフを表示し、横向きの表示時には3D棒グラフを表示します。 ![MobileTogetherで作成された3次元棒グラフの例を、Androidスマートフォンで表示したものです](https://lh4.ggpht.com/-7ijQLURgs5c/VIc8xypd59I/AAAAAAAAB4A/hgwqmhCvwFY/Android%252520shot%25255B4%25255D.png?imgmax=800 "A 3-D Bar Graph Designed in MobileTogether as Viewed on an Android Phone") Widget Sales Dataというソリューションは、MobileTogether Designerに付属するサンプルに含まれています。このサンプルを調べることで、その構築方法を確認することができます。 `$MT_DeviceWidth` で定義されたグラフは、デバイスが回転してもサイズが変わりません。そのため、デバイスの画面スペースを有効活用できず、以下に示す棒グラフの例のように、画面全体にうまく表示されないことがあります。 ![水平棒グラフの例1](https://lh6.ggpht.com/-Q-fzzxWIwwc/VIc8yUVZ97I/AAAAAAAAB4E/A8do4TBfJyE/photo1framed%25255B23%25255D.png?imgmax=800 "Horizontal Bar Graph Example 1") より優れた代替手段として、グローバル変数 `$MT_CanvasX` があります。この変数の値は、デバイスが回転すると変化し、その結果、グラフが自動的に再描画されます。プロパティウィンドウで「グラフの幅」を `$MT_CanvasX` で定義すると、グラフは横向きの画面に最適化され、より洗練された方法で再描画されます。これにより、水平軸に沿った凡例テキストのためのスペースがより多く確保されます。 ![MobileTogetherによって、水平棒グラフが自動的に画面サイズに合わせて調整されます](https://lh6.ggpht.com/-8-LS-SPDvAU/VIc8yyI_eWI/AAAAAAAAB4M/XfeVo6k1nlQ/photo2framed%25255B3%25255D.png?imgmax=800 "Horizontal Bar Graph Automatically Sized to Fit Screen by MobileTogether") **あなたは～することができます** [動画デモンストレーションをご覧ください](https://www.altova.com/ja/mobiletogether/demos.html) **AltovaのウェブサイトにあるMobileTogether Designerでのグラフ作成に関する情報、または** [無料トライアル版をダウンロードする](https://www.altova.com/ja/download/mobiletogether-designer.html) **30件以上のサンプルソリューションを含んでおり、これらを使って、ぜひ独自のシステムを構築してみてください。**