自動的にダークモードをサポートするモバイル アプリの開発

Android と Apple のモバイル デバイスではダークモードと呼ばれる表示をサポートします。ダークモードでは白が黒、黒が白に表示され、他の色もそれに合わせて調整されます。ダークモードは表示に必要とする電力が普通の場合と比べ低いため、バッテリーの使用時間を延長でき、うす暗い環境でも読みやすいという利点があります。

Altova の MobileTogether というクロスプラットフォームのモバイル アプリ開発ツールでは、ユーザー設定を感知して自動的にダークモードを適用するモバイル アプリを開発できます。

ダークモードのサンプルを見てみましょう。

以下の 2 つの画像は、モバイル アプリを同じデバイスでライトモードとダークモードで表示しています。

これはソーラーパネルの発動電力と電気の消費量をメーターから読み取り、チャートにして表示するアプリです。

多くの一般家庭向けソーラー発電システムは、電気線に接続され、費用なく使用できます。屋根に設置されたソーラーパネルは太陽が出ている間のみ家に電気を供給します。夜またはソーラーの発電量を上回る電気を使用する場合は、電気会社からの電気を使用します。家庭で使用している以上の電力が発電されている場合、それは電気線へ返されます。

Altova MobileTogether を使用することにより、クロスプラットフォーム モバイル アプリを容易に開発できます。MobileTogether Designer ではドラッグアンドドロップの UI デザイン ツール、イベント ハンドリング向けの Action Tree ビジュアル プログラミング言語、データ選択/プロセス向けの標準機能プログラミングなどを提供します。

デフォルトではテキスト、ボタン、ボーダーや背景の色などはすべて各デバイスのデフォルト既定値に設定されますが、アプリのすべてのコンポーネントは高度にカスタマイズ可能です。MobileTogether Designer には、ライトモードかダークモードかの設定を含む、プロジェクト全体の設定を指定できるスタイル ヘルパーが含まれます。

Altova MobileTogether スタイル ヘルパー

テーマの設定はシステム設定を使用、ライトモードを強制、ダークモードを強制から選択することができます。デフォルトはシステム設定を使用になりますので、開発者は特別なことをせずに自動でダークモードを適用するように設定できます。

チャートに自動でダークモードを適用し、色をカスタマイズ

場所によっては色をカスタマイズする必要がある場合があります。開発者はライトモード、ダークモードの代替色を指定することができます。最初のステップはどのユーザー設定が有効になっているのかを検知することです。

MobileTogether にはユーザーのデバイス設定をランタイムに検知するグローバル変数が含まれ、デバイスの機能にあった適切なアクションをプログラムできます。MobileTogether Designer Global Variables ダイアログにはシミュレーションしているデバイスに使用できるグローバル変数とその値がリストされます。

MobileTogether Designer Global Variables

ある Android 機種のデフォルト背景色が上の画像でハイライトされています。このデバイスがダークモードになるとこの値が変更します。低い HEX 値は暗い色、高い HEX 値は明るい色を指します。

HEX 値 #808080 は 50% の灰色です。ランタイムで値をテストする XPath expression を作成し、デフォルトの背景色が 50% の灰色より暗い色であればそのデバイスはダークモードであると判断できます。Designer Simulation パネルの XPath Evaluator は表現の正確なシンタックスを確認するのに最適です。

XPath expression

この expression は HEX 値ストリングを整数へ変換し、その値を 50% の灰色と比較、そしてその結果をもとに黒か白かを選択します。これはライトモード、ダークモードの文字の色を自動で選択するのに最適な expression です。実際に適用してみましょう。

MobileTogether にはすべてのプラットフォームできれいに表示される鮮やかなチャートやグラフを簡単に作成できる機能が含まれています。上で紹介したソーラーパネルの例では、電力の消費を表示するエリアチャートの上に、日々のソーラー発電量を表示するバーチャートを重ねて表示しています。開発者はチャート作成ダイアログからこれらチャートの設定を行います。以下は Change Appearance (表示の変更) のダイアログです。

これらのダイアログでは、この例のように背景色、境界線の色などを設定します。Dynamic XPath Settings でユーザーの使用するデバイスのランタイムで設定されるデフォルトの色をオーバーライドし、すべてカスタマイズ可能です。

このボタンをクリックするとそれぞれのチャート機能の XPath の値や expression のオプションを設定するダイアログが開きます。以下の画像では、Chart Settings ダイアログで黒または白と指定されたすべての要素の値を設定します。オリジナルの白の要素をデフォルトの背景色とし、テキストや境界線の黒の要素は AutoTextColor() 機能を使用するように設定します。

グリッドの線やそれぞれの軸などのその他の要素は Creation Settings ダイアログでどちらのテーマでも使用できる薄い灰色に設定します。それぞれのチャートのレイヤーに個別の Dynamic XPath Settings がありますが、それらをすべて設定すれば完了です。チャートはライトモード、ダークモード向けに自動で作成されます。

以下はダークモードとライトモードのチャートを Android で表示している例です。

ユーザーの設定をもとにダークモードを自動でサポートするモバイル アプリケーションの開発には Altova の MobileTogether をご試用ください。


Altova MobileTogether の製品概要、価格、およびライセンス体系などについては、こちらを参照ください。
30 日間の無償評価版は、こちらよりお申込みいただけます。


©Copyright 2021 Altova

CREATE MOBILE APPS THAT AUTOMATICALLY SUPPORT DARK THEME

シェアする

  • このエントリーをはてなブックマークに追加

フォローする