自動的にダークテーマに対応するモバイルアプリを開発する

AndroidとAppleのモバイルデバイスには、「ダークテーマ」という表示オプションがあり、これは通常の画面表示とほぼ逆の色使いになっていると考えることができます。ダークテーマでは、白が黒になり、黒が白になり、全体的に色の濃淡が調整されます。ダークテーマは消費電力を抑えるため、バッテリーの持続時間を長くすることができます。また、暗い場所での視認性も向上します。

Altova MobileTogetherには、開発者がダークテーマを自動的にサポートするモバイルアプリを作成できる機能が搭載されています。この機能は、アプリ起動時にユーザーの設定を検出し、それに応じてダークテーマを適用します。

例を見てみましょう

以下に、同じモバイルデバイス上で動作しているモバイルアプリの、ライトテーマとダークテーマの2つの表示例を示します。

このアプリを使用すると、ユーザーは太陽光パネルの発電量や電力消費量を、メーターの数値に基づいて記録できます。また、記録されたデータをグラフで表示し、時間の経過とともに余剰電力量を追跡することができます。

多くの住宅用太陽光発電システムは、ネットゼロ請求方式で電力会社との電力網に接続されています。屋根に設置された太陽光パネルは、太陽が出ている間のみ家庭に電力を供給します。夜間や、発電量が需要に満たない場合は、電力会社からの電力供給に切り替わります。システムが家庭の消費量よりも多くの電力を生成した場合、余剰電力は電力網に送り返され、電力会社の発電能力を補完します。

Altova MobileTogetherは、モバイル開発者がMobileTogether Designerを使って、クロスプラットフォームのモバイルアプリケーションを簡単に作成できるように設計されています。このツールは、ドラッグ＆ドロップによるUIデザインツール、イベント処理のための強力なビジュアルプログラミング言語であるアクションツリー、そしてデータ選択と処理のための標準的な関数型プログラミング機能を統合しています。

このアプリケーションの各要素は高度にカスタマイズ可能ですが、デフォルトでは、テキストの色、ボタン、ルール、境界線、さらにはウィンドウの背景色など、各デバイスに合わせてシステム標準の設定が適用されています。MobileTogether Designerには、開発者がプロジェクト全体の設定を指定できる「スタイル」ヘルパーウィンドウが用意されており、ライトテーマまたはダークテーマの設定も含まれています。

テーマ設定のオプションは、「システム設定を使用する」、「ライトテーマを適用する」、「ダークテーマを適用する」の3つです。デフォルト設定は「システム設定を使用する」になっているため、開発者は特別な設定を行うことなく、ダークテーマを自動的にサポートできます。

カスタムカラーを使用したグラフにおいて、自動的にダークテーマに対応します

一部の要素では、カスタムカラー設定が必要となる場合があります。開発者は、ライトテーマとダークテーマそれぞれに対して、代替カラーを指定することができます。最初のステップは、現在有効になっているユーザー設定を検出することです。

MobileTogetherには、グローバル変数が含まれており、これにより開発者は実行時にユーザーのデバイス設定を検出し、デバイスの機能に基づいて適切な処理をプログラムすることができます。MobileTogetherデザイナーの「グローバル変数」ダイアログには、選択されたシミュレーションデバイスで使用可能なすべてのグローバル変数とその値が一覧表示されます。

特定のAndroid端末のデフォルトの背景色については、上記で強調表示されています。この値は、端末がダークテーマモードになっている場合、変更されます。16進数表記の数値が小さいほど、色は暗く、数値が大きいほど明るくなります。

#808080という16進数表記は、50%の濃さの灰色を表します。実行時にこの値をテストするためのXPath式を作成し、デフォルトの背景色が50%の灰色よりも暗い場合、そのデバイスがダークテーマになっていると判断できます。デザイナーシミュレーションウィンドウにあるXPath評価ツールは、式の正確な構文を検証するための便利なツールです

この式は、16進数文字列を整数に変換し、その値を50%のグレーの値と比較します。そして、その結果に基づいて、黒または白の文字列を選択します。この式は、ライトテーマまたはダークテーマに応じてテキストの色を自動的に選択するのに適しており、ユーザー関数に適用してみましょう

MobileTogetherには、簡単に使える機能が多数搭載されています詳細で分かりやすいグラフや図を作成するすべてのプラットフォームで同じ外観を持つものがあります。冒頭に示されている「Solar Tool」というアプリの例では、棒グラフを使って日々の太陽光発電量を表し、その上に面積グラフを重ねて電力消費量を表示しています。開発者は、これらのグラフの表示設定を、例えばここで示されている「外観変更」ダイアログのような、一連のグラフ作成ダイアログから選択します

これらのダイアログの中には、例えばこの例のように、背景色や枠線の色を設定するものがあります。しかし、私たちは動的なXPath設定に基づいて、これらのデフォルト値を完全に上書きすることができます。これらの設定は、実行時にクライアントデバイス上で評価されます。

このボタンをクリックすると、各グラフ要素に対してXPathの値や式を設定するためのダイアログが開きます。以下の画像では、グラフ設定ダイアログで黒または白として指定されているすべての要素に対して、値を設定しています。元々白として設定されていた要素を、デフォルトの背景色に設定し、テキストや境界線など、黒として設定されていた要素に対しては、独自のAutoTextColor()関数を使用するように設定しています。

各軸のグリッド線など、作成設定ダイアログ内の他の要素は、どちらのテーマにも合うように、薄いグレーの色合いに設定されています。各グラフの各レイヤーごとに、個別の動的XPath設定ダイアログがありますが、これらをすべて編集すれば、それ以上設定する必要はありません。グラフは、ライトテーマとダークテーマの両方で、自動的に正しく作成されます。

以下に、ダークテーマとライトテーマで累積利益のグラフを表示しているAndroidスマートフォンを示します

使いやすいモバイルアプリケーションを開発し、ユーザーの設定に基づいて自動的にダークテーマを適用したい場合は、無料で利用できるMobileTogether Designerをダウンロードしてください。また、動画、チュートリアル、その他のデモアプリへのリンクが掲載されているMobileTogether Demosのページもぜひご覧ください。