モバイル向け4D。ライト&ダークアピアランスのためのカスタムデータフォーマッター

Deeplからの自動翻訳

以前から、独自のカスタムデータフォーマッターを作成し、生成したアプリで文字列、ブーリアン、または整数を画像に変換することができました。

この4D v19 R2の新機能は、iOSと Androidのフォーマッタをフルに活用し、明るい外見と暗い外見の両方で画像を美しく見せることを可能にします。

では、その方法を見てみましょう。

これは、3つの異なる方法で行うことができます。

  • 白と黒を使う
  • アクティブなモードに応じて異なる画像を使用する
  • 上記の2つの方法を混ぜる

黒と白のカラーを使う

このオプションを使用すると、モバイルデバイスに設定されているモード(明るいまたは暗い)に応じて、色に最適化された画像を取得することができます。


{ "name":"textToImage",
"type":["text"],
"binding":"imageNamed",
"choiceList":{"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets"(アセット
)。{
"size":54,
"tintable": true
}
}.

すべてのクラシックフォーマッターでは、フォーマッターのmanifest.jsonファイルに以下の情報が含まれているはずです。

  • 画像に置換される値を含む「choiceList」
  • サイズ”などの画像 (またはアセット) のプロパティ

ここでの大きな違いは、UI のテーマ モードに応じて画像の色(黒または白)を動的に適合させることができるように、“tintable”キーがtrue に設定されている点です。

モードを切り替えたときの携帯電話の表示はこんな感じです。

モードに応じて異なる画像を使用する

このオプションは、モバイルデバイスに設定されているモードに応じて、異なる最適化された画像を表示するよう設定することができます。


{ "name":"textToImage",
"type":["text"],
"binding":"imageNamed",
"choiceList":{"clear": "clear.png", "cloudy": "cloudy.png", "rain": "rain.png"},
"assets"(アセット
)。{
"size":54
}
}で
す。

ここで、フォーマッタは前のものと同じです。変わるのは画像の名前である。画像のサフィックスが”_dark “であれば、ダークモードで使用されます。

例として“clear_dark.png” は “clear.png” のダークバージョンとして設定されます。

blank

その結果がこちらです。

blank

両方のオプションを混ぜる

このオプションを使うと、前の2つのオプションを利用することができます。つまり、「tintable」 キーを trueに設定すると同時に、モバイル端末に設定されているモードに応じて最適化された画像と表示色を指定することができます。

blank

これで、iOSや Androidの端末がダークモードでもライトモードでも、フォーマッタを使えるようになりました。

そうそう、この機能はAndroidでも利用できますよ。

blank

4Dフォーラムで遠慮なくフィードバックをお寄せください。また、詳細については、専用のドキュメントをご覧ください。

David Azancot
- 4D for iOS プロダクトオーナー - David Azancotは、2017年にプロダクトオーナーとして4Dプロダクトチームに参加しました。プロダクトオーナーとして、ユーザーストーリー(ユーザーが期待する新機能とその使用法)を書き、それを具体的な機能仕様に変換することを担当しています。また、実装された機能が顧客のニーズを満たしているかどうかを確認することも彼の役割です。DavidはLeonard De Vinci Instituteでマーケティング、インターネット、モビリティのMBAを取得し、2011年にモバイルスタートアップ企業でキャリアを開始。この企業は後にモバイルマーケティンググループのMadvertiseに買収されました。モバイルインターフェースに情熱を注ぐ彼は、2015年、同グループのインタラクティブなモバイル広告フォーマットの開発に抜擢されました。並行して、Davidは2012年から彼独自のiOSおよびAndroidアプリケーションを開発しています。