user-interface - アプリケーションを「スキン可能」にする方法は?

Question

アプリケーションをスキン可能にする標準的な方法はありますか?

「スキン可能」とは、アプリケーションが複数のスキンをサポートできることを意味します。

ここでは、特定のプラットフォームをターゲットにしているわけではありません。アプリケーションをスキン可能にするための一般的なガイドラインがあるかどうかを知りたいだけです。

Web アプリケーションのスキニングは比較的簡単なようです。デスクトップアプリケーションはどうですか？

score 8 · Accepted Answer

スキンは、まだ別のレベルの抽象化です (YALOA!)。

MVC デザインパターンを読めば、必要な原則の多くを理解できるでしょう。

プレゼンテーションレイヤー (またはスキン) が行う必要があるのは、いくつかのことだけです。

インターフェースを表示
特定のアクション (クリック、ボックスへのテキストの入力など) が実行されると、アクションがトリガーされます。
変更が必要な場合は、モデルとコントローラーから通知を受信する必要があります

通常のプログラムでは、この抽象化は、テキストボックスを関連するメソッドやオブジェクトに接続するコードと、プログラムコマンドに基づいて表示を変更するコードによって行われます。

スキニングを追加したい場合は、その機能を利用して、コードを再度コンパイルすることなく実行できるようにする必要があります。

たとえば、XUL を調べて、そこでどのように行われているかを確認してください。多くのスキニングプロジェクトでは、XML を使用してスキンのさまざまな「顔」 (音楽の再生、または MP3 プレーヤースキンのライブラリの編成) を記述し、次に各コントロールがどこに配置され、どのデータとメソッドがそれを実行するかを説明します。プログラムに添付する必要があります。

実行するまでは難しいように思えるかもしれませんが、それが以前に扱った他のレベルの抽象化 (goto を含むプログラムから、制御構造、関数、構造、クラスとオブジェクト、JIT まで) とまったく同じであることに気付きます。コンパイラなど)。

最初の学習曲線は簡単ではありませんが、いくつかのプロジェクトを実行すると、難しくないことがわかります。

-アダム

score 5 · Accepted Answer

すべてのスタイルを別の CSS ファイルに保存する

インラインスタイリングを避ける

score 3 · Accepted Answer

それは、アプリをどの程度「スキン可能」にしたいかによって異なります。ユーザーに色と画像を設定させることは、コンポーネントを非表示/削除したり、独自のコンポーネントを作成させたりするよりもはるかに簡単になります。

ほとんどの場合、色と画像をソースファイルにハードコーディングする代わりに、何らかの種類のリソースプロバイダーを作成することで問題を解決できます。したがって、この：

Color backgroundColor = Color.BLUE;

次のようになります。

Color backgroundColor = ResourceManager.getColor("form.background");

次に、ResourceManager クラスのマッピングを変更するだけで、すべてのクライアントが一貫したものになります。これをリアルタイムで行いたい場合、ResourceManager のマッピングのいずれかを変更すると、おそらくそのクライアントにイベントが送信され、何かが変更されたことが通知されます。その後、クライアントは必要に応じてコンポーネントを再描画できます。

score 3 · Accepted Answer

実装はプラットフォームによって異なりますが、クロスプラットフォームに関する一般的な考慮事項がいくつかあります。

ビジュアル要素を「差し込む」ことができる確立された全体的なレイアウトを持つことは良いことです。スキニングによって完全に異なる一般的なレイアウトをサポートすることは困難です (ただし、まだ可能です)。
スキンを構成するアセット (画像、HTML フラグメントなど) について十分に文書化された命名規則を作成します。
既存のスキンを「発見」して新しいスキンを追加するためのクリーンな方法を設計します。例: Winamp は ZIP ファイル形式を使用して、スキンのすべての画像を保存します。すべてのスキンファイルは、アプリケーションフォルダの既知のフォルダにあります。
スケーリングの問題に注意してください。誰もが同じ画面解像度を使用しているわけではありません。
サードパーティのスキン開発を許可しますか? これはデザインに影響します。
アーキテクチャ的には、Model-View-Controller パターンはスキニングに適しています。

これらは、注意すべき点のほんの一部です。実装は、Web クライアントとファットクライアントの間、および機能要件によって異なります。HTH。

score 1 · Accepted Answer

これは比較的簡単なはずです。次の手順に従ってください。

WebアプリケーションまたはWebサイト全体のすべてのスタイルを削除します
cssを使用して、アプリの外観を変更します。

詳細については、csszengardenにアクセスしてアイデアを確認してください。

score 1 · Accepted Answer

すべきではありません。または、少なくとも、それが本当に正しい決定であるかどうかを自問する必要があります。

スキニングは、UI デザインのガイドラインに違反しています。スキンを適用したアプリが動作し、使用している他のすべてのアプリとはまったく異なるように見えるため、ユーザーは「不快」になります。コマンドショートカットキーなどは一貫性がなく、生産性が低下します。スクリーンリーダーが理解するのが難しくなるため、障害者がアクセスしにくくなります。

皮をむかない理由はたくさんあります。アプリケーションを視覚的に区別したいだけなら、それは私の意見では不十分な理由です。アプリを使いにくくし、ユーザーが試用期間を過ぎる可能性を低くします。

とはいえ、メディアプレーヤーや没入型フルスクリーンゲームなど、基本的にスキニングが期待されるクラスのアプリがいくつかあります。しかし、あなたのアプリが、スキニングが主に義務付けられているクラスに属していない場合は、あなたのアプリを競合他社よりも優れたものにする他の方法を見つけることを真剣に検討します.

score 1 · Accepted Answer

基本的な原則は、Web ページで CSS によって使用されるものです。

コンテンツのフォーマット (色 / フォント / レイアウト [ある程度]) を指定するのではなく、コンテンツの種類を簡単に説明します。

Web の例を挙げると、ブログページのコンテンツで、さまざまなセクションを次のようにマークすることができます。

題名
ブログエントリー
アーカイブペイン

等

エントリは、「見出し」、「本文」、「タイムスタンプ」などのいくつかのサブセクションで構成されている場合があります。

次に、他の場所に、各種類の要素、サイズ、配置、色、背景、フォントなどのすべてのプロパティを指定するスタイルシートがあります。ページをレンダリングするとき、またはUIでコンポーネントを描画/初期化するときは、常に現在のスタイルシートを調べて調べますこれらのプロパティをアップします。

そうすれば、スキニングや実際のデザインの編集がずっと簡単になります。別のスタイルシートを作成し、ヒートのコンテンツに合わせて値を微調整するだけです。

編集：

覚えておくべき重要なポイントの 1 つは、一般的なスタイル (CSS のクラスなど) と特定のスタイル (CSS の ID など) の違いです。レイアウト内のいくつかの項目 (見出しなど) は、一意のスタイルを適用できる単一の識別可能な項目として一意に識別できるようにする必要がありますが、他の項目 (ブログのエントリやデータベースビューなど) は、すべて同じスタイルを使用する必要があります。

score 1 · Accepted Answer

プラットフォーム/テクノロジーごとに異なります。

WPF については、Josh Smith が構造スキニングと呼んでいるものを見てください: http://www.codeproject.com/KB/WPF/podder2.aspx

score 0 · Accepted Answer

ここのほとんどの人は、CSSが唯一のスキニングオプションであるかのように、CSSを参照しているようです。Windows Media Player（およびWinamp、AFAIR）は、XMLと画像（必要な場合）を使用してスキンを定義します。

XMLはフックやイベントなどを参照し、物事の外観と反応を処理します。バックエンドをどのように処理するかはわかりませんが、特定のスキンの読み込みは、適切なXMLファイルを見つけて画像を読み込み、必要な場所に配置するのと同じくらい簡単です。

XMLを使用すると、実行できること（つまり、新しいコンポーネントの作成、コンポーネントサイズの変更など）をはるかに細かく制御することもできます。

XMLをCSSと組み合わせると、デスクトップまたはWebアプリケーションのスキニングエンジンに素晴らしい結果をもたらす可能性があります。

score 0 · Accepted Answer

掘り下げたい深さに応じて、「フォーマット」フレームワーク (Java の PLAF、Web の CSS など) を使用するか、完全に分離された多層アーキテクチャを使用するかを選択できます。

プラグ可能なスキンを定義したい場合は、最初からそれを考慮する必要があります。プレゼンテーションレイヤーはビジネスロジックについては何も知りませんが、それは API であり、その逆も同様です。

user-interface - アプリケーションを「スキン可能」にする方法は?

10 に答える 10

Related

Reference