{"title":"フォームアセット (Media クラス)","version":"4.2","locale":"ja","docname":"topics/forms/media","url":"/ja/4.2/topics/forms/media/","canonical":"https://djangodocs.dev/ja/4.2/topics/forms/media/","summary":"Rendering an attractive and easy-to-use web form requires more than just HTML - it also requires CSS stylesheets, and if you want to use fancy widgets, you may also…","html":"

フォームアセット (Media クラス)Link to this heading#

\n

Rendering an attractive and easy-to-use web form requires more than just\nHTML - it also requires CSS stylesheets, and if you want to use fancy widgets,\nyou may also need to include some JavaScript on each page. The exact\ncombination of CSS and JavaScript that is required for any given page will\ndepend upon the widgets that are in use on that page.

\n

This is where asset definitions come in. Django allows you to\nassociate different files -- like stylesheets and scripts -- with the\nforms and widgets that require those assets. For example, if you want\nto use a calendar to render DateFields, you can define a custom\nCalendar widget. This widget can then be associated with the CSS and\nJavaScript that is required to render the calendar. When the Calendar\nwidget is used on a form, Django is able to identify the CSS and\nJavaScript files that are required, and provide the list of file names\nin a form suitable for inclusion on your web page.

\n\n\n
\n

定数として定義されたアセットLink to this heading#

\n

アセットを定義する最も簡単な方法は、定数とすることです。この方法を利用するには、内部 Media クラスに宣言します。内部クラスのプロパティで必要なものを定義します。

\n

以下に例を示します。

\n
Code
from django import forms\n\n\nclass CalendarWidget(forms.TextInput):\n    class Media:\n        css = {\n            "all": ["pretty.css"],\n        }\n        js = ["animations.js", "actions.js"]\n
\n

このコードでは、CalendarWidget を定義しており、これは TextInput に基づいています。CalendarWidget をフォーム上で使用すると、CSS ファイル pretty.css と JavaScript ファイル animations.js および actions.js を読み込めるようになります。

\n

This static definition is converted at runtime into a widget property\nnamed media. The list of assets for a CalendarWidget instance\ncan be retrieved through this property:

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n
\n

以下は指定可能な Media オプションです。必須のものはありません。

\n
\n

cssLink to this heading#

\n

様々な形式の出力メディアに対して、必要な CSSファイルを定義するディクショナリです。

\n

ディクショナリの値はファイル名のタプルかリストで指定します。ファイルのパスを指定する方法は パスの章 を参照してください。

\n

ディクショナリのキーは、出力するメディアタイプを表します。これらは CSS ファイル認識可能なメディアタイプと同じです: 'all'、'aural'、'braille'、'embossed'、'handheld'、'print'、'projection'、'screen'、'tty'、'tv'。メディアタイプに応じたスタイルシートを提供する必要がある場合、各出力メディアに対して CSS ファイルを作成してください。以下の例は 2 つの CSS オプションを提供します -- 1 つはスクリーン用でもう一つは印刷用です:

\n
Code
class Media:\n    css = {\n        "screen": ["pretty.css"],\n        "print": ["newspaper.css"],\n    }\n
\n

1 つのCSS ファイルのグループを複数の出力メディアタイプに適用するには、出力メディアタイプをカンマで区切ってディス書なりのキーに指定します。以下の例では、TV とプロジェクターは同じメディアを参照します:

\n
Code
class Media:\n    css = {\n        "screen": ["pretty.css"],\n        "tv,projector": ["lo_res.css"],\n        "print": ["newspaper.css"],\n    }\n
\n

If this last CSS definition were to be rendered, it would become the following HTML:

\n
Django template
<link href="http://static.example.com/pretty.css" media="screen" rel="stylesheet">\n<link href="http://static.example.com/lo_res.css" media="tv,projector" rel="stylesheet">\n<link href="http://static.example.com/newspaper.css" media="print" rel="stylesheet">\n
\n\n
\n
\n

jsLink to this heading#

\n

必要な JavaScript ファイルを定義したタプルです。ファイルのパスを指定する方法は パスの章 を参照してください。

\n
\n
\n

extendLink to this heading#

\n

Media 宣言に対する継承動作を定義する真偽値です。

\n

By default, any object using a static Media definition will\ninherit all the assets associated with the parent widget. This occurs\nregardless of how the parent defines its own requirements. For\nexample, if we were to extend our basic Calendar widget from the\nexample above:

\n
Python console
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         css = {\n...             "all": ["fancy.css"],\n...         }\n...         js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="http://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://static.example.com/whizbang.js"></script>\n
\n

The FancyCalendar widget inherits all the assets from its parent\nwidget. If you don't want Media to be inherited in this way, add\nan extend=False declaration to the Media declaration:

\n
Python console
>>> class FancyCalendarWidget(CalendarWidget):\n...     class Media:\n...         extend = False\n...         css = {\n...             "all": ["fancy.css"],\n...         }\n...         js = ["whizbang.js"]\n...\n\n>>> w = FancyCalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/fancy.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/whizbang.js"></script>\n
\n

継承をより詳細にコントロールするにあｈ、動的なプロパティ を使ってアセットを定義してください。 動的なプロパティを使えば、どのファイルを継承し、また継承しないかを完全にコントロールできます。

\n
\n
\n
\n

動的プロパティとしての MediaLink to this heading#

\n

アセット要件のより詳細な操作が必要な場合、media プロパティを直接定義することができます。これは、forms.Media のインスタンスを返すウィジェットプロパティを定義することで実現できます。forms.Media に対するコンストラクタは、定数によるメディア定義と同様の形式で、css と js のキーワード引数を認識します。

\n

例えば、上記例で扱ってきた Calendar Widget に対する定数の定義は、動的な方法では以下のように定義できます:

\n
Code
class CalendarWidget(forms.TextInput):\n    @property\n    def media(self):\n        return forms.Media(\n            css={"all": ["pretty.css"]}, js=["animations.js", "actions.js"]\n        )\n
\n

動的な media プロパティに対する戻り値を構成する方法については、Media objects`_ を参照してください。

\n
\n
\n

アセット定義内のパスLink to this heading#

\n
\n

Paths as stringsLink to this heading#

\n

String paths used to specify assets can be either relative or absolute. If a\npath starts with /, http:// or https://, it will be\ninterpreted as an absolute path, and left as-is. All other paths will\nbe prepended with the value of the appropriate prefix. If the\ndjango.contrib.staticfiles app is installed, it will be used to serve\nassets.

\n

mod:django.contrib.staticfiles を使うかどうかに関わらず、ウェブページを完全に表示するために STATIC_URL と STATIC_ROOT の設定が必要となります。

\n

To find the appropriate prefix to use, Django will check if the\nSTATIC_URL setting is not None and automatically fall back\nto using MEDIA_URL. For example, if the MEDIA_URL for\nyour site was 'http://uploads.example.com/' and STATIC_URL\nwas None:

\n
Python console
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         css = {\n...             "all": ["/css/pretty.css"],\n...         }\n...         js = ["animations.js", "http://othersite.com/actions.js"]\n...\n\n>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="http://uploads.example.com/animations.js"></script>\n<script src="http://othersite.com/actions.js"></script>\n
\n

But if STATIC_URL is 'http://static.example.com/':

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://othersite.com/actions.js"></script>\n
\n

Or if staticfiles is configured using the\nManifestStaticFilesStorage:

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="/css/pretty.css" media="all" rel="stylesheet">\n<script src="https://static.example.com/animations.27e20196a850.js"></script>\n<script src="http://othersite.com/actions.js"></script>\n
\n
\n
\n

Paths as objectsLink to this heading#

\n\n

Asset paths may also be given as hashable objects implementing an\n__html__() method. The __html__() method is typically added using the\nhtml_safe() decorator. The object is responsible for\noutputting the complete HTML <script> or <link> tag content:

\n
Python console
>>> from django import forms\n>>> from django.utils.html import html_safe\n>>>\n>>> @html_safe\n... class JSPath:\n...     def __str__(self):\n...         return '<script src="https://example.org/asset.js" rel="stylesheet">'\n...\n\n>>> class SomeWidget(forms.TextInput):\n...     class Media:\n...         js = [JSPath()]\n...\n
\n
\n
\n
\n

Media objectsLink to this heading#

\n

ウィジェットやフォームの media 属性に応答指令信号を送ると、forms.Media オブジェクトが戻り値となります。すでに見たように、Media オブジェクトの文字列表現は HTMLで、HTML ページ内の <head> ブロックに関連ファイルを含める必要があります。

\n

ただし、Media オブジェクトにはいくつかの面白いプロパティが存在します。

\n
\n

アセットのサブセットLink to this heading#

\n

If you only want files of a particular type, you can use the subscript\noperator to filter out a medium of interest. For example:

\n
Python console
>>> w = CalendarWidget()\n>>> print(w.media)\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n\n>>> print(w.media["css"])\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n
\n

サブスクリプトオペレーターを使用すると、新たな Media オブジェクトが戻り値となります -- 使用するメディアのみが含まれています。

\n
\n
\n

Media オブジェクトを結合するLink to this heading#

\n

Media objects can also be added together. When two Media objects are\nadded, the resulting Media object contains the union of the assets\nspecified by both:

\n
Python console
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         css = {\n...             "all": ["pretty.css"],\n...         }\n...         js = ["animations.js", "actions.js"]\n...\n\n>>> class OtherWidget(forms.TextInput):\n...     class Media:\n...         js = ["whizbang.js"]\n...\n\n>>> w1 = CalendarWidget()\n>>> w2 = OtherWidget()\n>>> print(w1.media + w2.media)\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://static.example.com/whizbang.js"></script>\n
\n
\n
\n

アセットの順序Link to this heading#

\n

DOM に挿入されるアセットの順序が重要になることがあります。例えば、jQuery に依存したスクリプトがあるかもしれません。したがって、結合した Media オブジェクトは、各 Media クラス内で定義された順序を保持します。

\n

例えば:

\n
Python console
>>> from django import forms\n>>> class CalendarWidget(forms.TextInput):\n...     class Media:\n...         js = ["jQuery.js", "calendar.js", "noConflict.js"]\n...\n>>> class TimeWidget(forms.TextInput):\n...     class Media:\n...         js = ["jQuery.js", "time.js", "noConflict.js"]\n...\n>>> w1 = CalendarWidget()\n>>> w2 = TimeWidget()\n>>> print(w1.media + w2.media)\n<script src="http://static.example.com/jQuery.js"></script>\n<script src="http://static.example.com/calendar.js"></script>\n<script src="http://static.example.com/time.js"></script>\n<script src="http://static.example.com/noConflict.js"></script>\n
\n

順序が矛盾した Media オブジェクトを結合すると MediaOrderConflictWarning となります。

\n
\n
\n
\n

フォームの MediaLink to this heading#

\n

ウィジェットだけでなく、フォームにも media の定義を行うことができます。フォーム上での media 定義のルールはウィジェットと同じです: 宣言は定数および動的に行えます; パスと継承についてのルールもまったく同じです。

\n

Regardless of whether you define a media declaration, all Form\nobjects have a media property. The default value for this property\nis the result of adding the media definitions for all widgets that\nare part of the form:

\n
Python console
>>> from django import forms\n>>> class ContactForm(forms.Form):\n...     date = DateField(widget=CalendarWidget)\n...     name = CharField(max_length=40, widget=OtherWidget)\n...\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://static.example.com/whizbang.js"></script>\n
\n

If you want to associate additional assets with a form -- for example,\nCSS for form layout -- add a Media declaration to the form:

\n
Python console
>>> class ContactForm(forms.Form):\n...     date = DateField(widget=CalendarWidget)\n...     name = CharField(max_length=40, widget=OtherWidget)\n...     class Media:\n...         css = {\n...             "all": ["layout.css"],\n...         }\n...\n\n>>> f = ContactForm()\n>>> f.media\n<link href="http://static.example.com/pretty.css" media="all" rel="stylesheet">\n<link href="http://static.example.com/layout.css" media="all" rel="stylesheet">\n<script src="http://static.example.com/animations.js"></script>\n<script src="http://static.example.com/actions.js"></script>\n<script src="http://static.example.com/whizbang.js"></script>\n
\n
","rootId":"form-assets-the-media-class","toc":[{"title":"定数として定義されたアセット","anchor":"assets-as-a-static-definition","children":[{"title":"css","anchor":"css","children":[]},{"title":"js","anchor":"js","children":[]},{"title":"extend","anchor":"extend","children":[]}]},{"title":"動的プロパティとしての Media","anchor":"media-as-a-dynamic-property","children":[]},{"title":"アセット定義内のパス","anchor":"paths-in-asset-definitions","children":[{"title":"Paths as strings","anchor":"paths-as-strings","children":[]},{"title":"Paths as objects","anchor":"paths-as-objects","children":[]}]},{"title":"Media objects","anchor":"media-objects","children":[{"title":"アセットのサブセット","anchor":"subsets-of-assets","children":[]},{"title":"Media オブジェクトを結合する","anchor":"combining-media-objects","children":[]},{"title":"アセットの順序","anchor":"order-of-assets","children":[]}]},{"title":"フォームの Media","anchor":"media-on-forms","children":[]}],"breadcrumbs":[{"docname":"topics/index","title":"Django を使う","url":"/ja/4.2/topics/"},{"docname":"topics/forms/index","title":"フォームを使う","url":"/ja/4.2/topics/forms/"}],"prev":{"docname":"topics/forms/modelforms","title":"モデルからフォームを作成する","url":"/ja/4.2/topics/forms/modelforms/"},"next":{"docname":"topics/templates","title":"テンプレート","url":"/ja/4.2/topics/templates/"},"formats":{"html":"/ja/4.2/topics/forms/media/","markdown":"/ja/4.2/topics/forms/media.md","json":"/ja/4.2/topics/forms/media.json"},"source":"https://github.com/django/django/blob/stable/4.2.x/docs/topics/forms/media.txt","official":"https://docs.djangoproject.com/ja/4.2/topics/forms/media/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","it","pt-br","ko","es","el","pl"]}