イメージ Web リソース

イメージ Web リソースを使用して、モデル駆動型アプリでイメージを利用可能にします。

イメージ Web リソースには 5 つの種類があります:

• PNG 形式
• JPG 形式
• GIF 形式
• ICO (Windows アイコン形式) 形式
• SVG (スケーラブル ベクター グラフィックス) 形式

イメージ Web リソースの機能

イメージ Web リソースを使用すると、必要な場所にイメージを追加できます。 一般的な使用方法は以下のとおりです:

• カスタム テーブルのアイコン。
• カスタム リボン コントロールと SiteMap サブエリアのアイコン。
• フォームや Web ページのウェブリソースのための装飾的なグラフィック。
• CSS Web リソースが使用するバックグラウンド イメージ

スケーラブル ベクター グラフィックス (SVG) の操作

アプリケーションに表示されるすべてのアイコンにベクター形式 (SVG) Web リソースを使用します。 ベクター イメージは、スケーラブル ベクター グラフィックス (SVG) (XML ベースのベクター イメージ形式) として定義されます。 アクセシビリティに優れ、ファイル サイズが小さく、コンテナーに合わせて拡張できるため、PNG や JPG などの他のイメージ タイプよりも SVG を使用することをお勧めします。

アクセシビリティの向上

モデル駆動型アプリでは、SVG に色の 16 進数値が含まれていない場合に、アイコンの色を制御してコントラストの問題を回避できます。 currentColor を使用することで、適切なテーマ カラーが使用されるようにすることができます。

<path fill="currentColor" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>

より小さいファイル サイズ

SVG ファイルは通常、jpg や png などのラスター型イメージよりも小さくなります。

コンテナーに合わせてスケーリングする

複数のサイズのイメージを提供するのではなく、単一の SVG を再利用できます。 EntityMetadata.IconVectorName プロパティで SVG Web リソースを使用して、IconLargeName、IconMediumName、または IconSmallName のプロパティの代わりにカスタム テーブルのアイコンを定義します。

ベスト プラクティス

svg 要素の 幅、高さ、viewBox 属性によってデフォルトのサイズが設定されていることを確認します。

可能な場合は、ハードコードされた塗りつぶしの色を削除し、SVG 内の埋め込みスタイルシートやクラスを使用しないでください。 他の SVG ファイルが同じクラスを参照している場合、埋め込みスタイルシートはスタイルが漏洩する可能性があります。 代わりに、スタイル属性を使用して値を割り当てます。 例:

<path style="fill:#231F20;" d="M16,0c-0,0-0-0.0-0-0.0v-0c0-0,0-0.0,0-0.0s0,0.0,0,0.0v0C00,0.0,00,0,00,0z"/>

イメージ Web リソースの制限

すべての Web リソースと同様、イメージ Web リソースはセキュリティ コンテキストを使用します。 スクリプト Web リソースにアクセスできるのは、必要な特権を持つ、ライセンスを受けたユーザーだけです。

Web ページの Web リソースからイメージ Web リソースを参照する

すべての Web リソースは相対 URL を使用して相互に参照できます。 以下の例では、Web ページ (HTML) の Web リソース new_/content/contentpage.htm からイメージ Web リソース new_/Images/image1.png を参照し、次の HTML コードを new_/content/contentpage.htm に追加します。

<img src="../Images/image1.png" />  

フォームからのイメージ Web リソースを参照する

フォームにイメージを追加する

1. テーブルのフォーム エディターに移動します。

2. フォーム内の、イメージを追加する場所をクリックします。

3. 挿入タブで、Web リソースを選択します。

4. 全般タブで、追加する Web リソース イメージを選択します。

5. Web リソースの名前を指定します。 ラベルや代替テキストも指定できます。

6. 形式タブで、次の項目を定義できます。

   • イメージが使用する列の数。

   • イメージが使用する行の数、または自動的に展開して使用可能な領域を使用するかどうか。

   • 以下のオプションを使用するイメージのサイズ

     • 使用可能な領域の使用 (サイズに合わせて伸縮)
     • 使用可能な領域の使用 (縦横比を固定)
     • 元の画像サイズ
     • Specific

   • "Specific" を選択した場合、高さと幅をピクセル単位で入力できます。

7. OK を選択します。

8. フォーム内のイメージをユーザーが表示できるようにするには、変更を保存してフォームを公開する必要があります。

リボン要素またはサイト マップのサブ領域からイメージ Web リソースを参照する

Web リソース イメージを、リボンのアイコンとして、またはサイト マップを使用したアプリケーション ナビゲーションのアイコンとして使用するように指定するには、$webresource: ディレクティブを使用します。 次のサンプルに、リボンのボタンのアイコンを指定する方法を示します。

<Button Id="MyISV.opportunity.form.actions.FlyoutAnchor.Button.1" Image16by16="$webresource:new_/icons/oneIcon16.png" Image32by32="$webresource:new_/icons/oneIcon32.png"/>  

関連項目

Web リソース
Web ページ (HTML) の Web リソースの使用
スタイル シート (CSS) Web リソースの使用
JavaScript Web リソースの使用
データ (XML) Web リソースの使用
スタイル シート (XSL) Web リソースの使用