{"title":"静的ファイル (画像、JavaScript、CSS など) の管理","version":"1.10","locale":"ja","docname":"howto/static-files/index","url":"/ja/1.10/howto/static-files/","canonical":"https://djangodocs.dev/ja/1.10/howto/static-files/","summary":"ウェブサイトではふつう、画像や JavaScript、CSS などの追加のファイルを配信する必要があります。","html":"<h1>静的ファイル (画像、JavaScript、CSS など) の管理<a class=\"heading-anchor\" href=\"#managing-static-files-e-g-images-javascript-css\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>ウェブサイトではふつう、画像や JavaScript、CSS などの追加のファイルを配信する必要があります。Django では、こうしたファイルのことを「静的ファイル (static files)」と呼んでいます。静的ファイルの管理を簡単にするために、Django は <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a> を提供しています。</p>\n<p>このページでは、こうした静的ファイルの配信の仕方について説明します。</p>\n<section id=\"configuring-static-files\">\n<h2>静的ファイルの設定<a class=\"heading-anchor\" href=\"#configuring-static-files\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<ol class=\"arabic\">\n<li><p><code class=\"docutils literal notranslate\">django.contrib.staticfiles</code> が設定ファイルの <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-INSTALLED_APPS\"><code class=\"xref std std-setting docutils literal notranslate\">INSTALLED_APPS</code></a> に含まれていることを確認してください。</p></li>\n<li><p>設定ファイルの中で、<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_URL\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_URL</code></a> を設定します。たとえば、次のようになります。</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code>STATIC_URL <span class=\"o\">=</span> <span class=\"s1\">&#39;/static/&#39;</span>\n</code></pre></div>\n</li>\n<li><p>テンプレート中で、静的ファイルへの URL を <code class=\"docutils literal notranslate\">/static/my_app/myexample.jpg</code> のようにハードコーディングするか、または、より望ましい方法として <a class=\"reference internal\" href=\"/ja/1.10/ref/templates/builtins/#std-templatetag-static\"><code class=\"xref std std-ttag docutils literal notranslate\">static</code></a> テンプレートタグを記述して、設定した <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATICFILES_STORAGE\"><code class=\"xref std std-setting docutils literal notranslate\">STATICFILES_STORAGE</code></a> ストレージを使うことにより、指定した相対パスから URL を動的に構築します (この方法は特に、静的ファイルを配信する CDN を切り替えたくなった時に、作業を簡単にしてくれます)。</p>\n<div class=\"code-block\" data-language=\"html+django\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Django template</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Django template code\"><code><span class=\"cp\">{%</span> <span class=\"k\">load</span> <span class=\"nv\">static</span> <span class=\"cp\">%}</span>\n<span class=\"p\">&lt;</span><span class=\"nt\">img</span> <span class=\"na\">src</span><span class=\"o\">=</span><span class=\"s\">&quot;</span><span class=\"cp\">{%</span> <span class=\"k\">static</span> <span class=\"s2\">&quot;my_app/example.jpg&quot;</span> <span class=\"cp\">%}</span><span class=\"s\">&quot;</span> <span class=\"na\">alt</span><span class=\"o\">=</span><span class=\"s\">&quot;My image&quot;</span><span class=\"p\">/&gt;</span>\n</code></pre></div>\n</li>\n<li><p>アプリケーション内に <code class=\"docutils literal notranslate\">static``というフォルダを作って静的ファイルを保存してください。例えば、``my_app/static/my_app/example.jpg</code> となります。</p></li>\n</ol>\n<aside class=\"admonition-serving-the-files admonition\" role=\"note\">\n<p class=\"admonition-title\">ファイルを配信する</p>\n<p>これらの設定の手順に加えて、実際に静的ファイルを配信する必要があります。</p>\n<p>開発中に <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a> を使用する場合には、<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-DEBUG\"><code class=\"xref std std-setting docutils literal notranslate\">DEBUG</code></a> を <code class=\"docutils literal notranslate\">True</code> に設定して <a class=\"reference internal\" href=\"/ja/1.10/ref/django-admin/#django-admin-runserver\"><code class=\"xref std std-djadmin docutils literal notranslate\">runserver</code></a> を実行すれば、自動的に設定が行われます。(詳しくは、<a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django.contrib.staticfiles.views.serve\" title=\"django.contrib.staticfiles.views.serve\"><code class=\"xref py py-func docutils literal notranslate\">django.contrib.staticfiles.views.serve()</code></a> を参照)</p>\n<p>ただし、この方法は <strong>極めて非効率</strong> であり、<strong>セキュリティ上の問題がある</strong> 可能性が高いため、<strong>実際の製品では使うべきではありません</strong>。</p>\n<p>製品環境中で静的ファイルを配信するための適切な戦略については、<a class=\"reference internal\" href=\"/ja/1.10/howto/static-files/deployment/\"><span class=\"doc\">静的ファイルのデプロイ</span></a> を読んでください。</p>\n</aside>\n<p>プロジェクトには、特定のアプリケーションに紐付けられていない 静的な assets があることがあります。その場合には、アプリケーション内の <code class=\"docutils literal notranslate\">static/</code> ディレクトリの他に、設定ファイルでディレクトリのリスト (<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATICFILES_DIRS\"><code class=\"xref std std-setting docutils literal notranslate\">STATICFILES_DIRS</code></a>) を定義して、Django が静的ファイルを検索できるようにすることができます。たとえば、次のように設定します。</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code>STATICFILES_DIRS <span class=\"o\">=</span> <span class=\"p\">[</span>\n    os<span class=\"o\">.</span>path<span class=\"o\">.</span>join<span class=\"p\">(</span>BASE_DIR<span class=\"p\">,</span> <span class=\"s2\">&quot;static&quot;</span><span class=\"p\">),</span>\n    <span class=\"s1\">&#39;/var/www/static/&#39;</span><span class=\"p\">,</span>\n<span class=\"p\">]</span>\n</code></pre></div>\n<p><code class=\"docutils literal notranslate\">staticfiles</code> がファイルを探索する方法について詳しくは、 <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATICFILES_FINDERS\"><code class=\"xref std std-setting docutils literal notranslate\">STATICFILES_FINDERS</code></a> のドキュメントを参照してください。</p>\n<aside class=\"admonition-static-file-namespacing admonition\" role=\"note\">\n<p class=\"admonition-title\">静的ファイルの名前空間</p>\n<p>Now we <em>might</em> be able to get away with putting our static files directly\nin <code class=\"docutils literal notranslate\">my_app/static/</code> (rather than creating another <code class=\"docutils literal notranslate\">my_app</code>\nsubdirectory), but it would actually be a bad idea. Django will use the\nfirst static file it finds whose name matches, and if you had a static file\nwith the same name in a <em>different</em> application, Django would be unable to\ndistinguish between them. We need to be able to point Django at the right\none, and the easiest way to ensure this is by <em>namespacing</em> them. That is,\nby putting those static files inside <em>another</em> directory named for the\napplication itself.</p>\n</aside>\n</section>\n<section id=\"serving-static-files-during-development\">\n<span id=\"serving-static-files-in-development\"></span><h2>Serving static files during development<a class=\"heading-anchor\" href=\"#serving-static-files-during-development\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>If you use <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a> as explained above,\n<a class=\"reference internal\" href=\"/ja/1.10/ref/django-admin/#django-admin-runserver\"><code class=\"xref std std-djadmin docutils literal notranslate\">runserver</code></a> will do this automatically when <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-DEBUG\"><code class=\"xref std std-setting docutils literal notranslate\">DEBUG</code></a> is set\nto <code class=\"docutils literal notranslate\">True</code>. If you don't have <code class=\"docutils literal notranslate\">django.contrib.staticfiles</code> in\n<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-INSTALLED_APPS\"><code class=\"xref std std-setting docutils literal notranslate\">INSTALLED_APPS</code></a>, you can still manually serve static files using the\n<a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django.contrib.staticfiles.views.serve\" title=\"django.contrib.staticfiles.views.serve\"><code class=\"xref py py-func docutils literal notranslate\">django.contrib.staticfiles.views.serve()</code></a> view.</p>\n<p>This is not suitable for production use! For some common deployment\nstrategies, see <a class=\"reference internal\" href=\"/ja/1.10/howto/static-files/deployment/\"><span class=\"doc\">静的ファイルのデプロイ</span></a>.</p>\n<p>For example, if your <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_URL\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_URL</code></a> is defined as <code class=\"docutils literal notranslate\">/static/</code>, you can do\nthis by adding the following snippet to your urls.py:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django.conf</span> <span class=\"kn\">import</span> settings\n<span class=\"kn\">from</span> <span class=\"nn\">django.conf.urls.static</span> <span class=\"kn\">import</span> static\n\nurlpatterns <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"c1\"># ... the rest of your URLconf goes here ...</span>\n<span class=\"p\">]</span> <span class=\"o\">+</span> static<span class=\"p\">(</span>settings<span class=\"o\">.</span>STATIC_URL<span class=\"p\">,</span> document_root<span class=\"o\">=</span>settings<span class=\"o\">.</span>STATIC_ROOT<span class=\"p\">)</span>\n</code></pre></div>\n<aside class=\"admonition admonition-note\" role=\"note\">\n<p class=\"admonition-title\">注釈</p>\n<p>This helper function works only in debug mode and only if\nthe given prefix is local (e.g. <code class=\"docutils literal notranslate\">/static/</code>) and not a URL (e.g.\n<code class=\"docutils literal notranslate\">http://static.example.com/</code>).</p>\n<p>Also this helper function only serves the actual <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_ROOT\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_ROOT</code></a>\nfolder; it doesn't perform static files discovery like\n<a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a>.</p>\n</aside>\n</section>\n<section id=\"serving-files-uploaded-by-a-user-during-development\">\n<span id=\"serving-uploaded-files-in-development\"></span><h2>Serving files uploaded by a user during development<a class=\"heading-anchor\" href=\"#serving-files-uploaded-by-a-user-during-development\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>During development, you can serve user-uploaded media files from\n<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-MEDIA_ROOT\"><code class=\"xref std std-setting docutils literal notranslate\">MEDIA_ROOT</code></a> using the <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django.contrib.staticfiles.views.serve\" title=\"django.contrib.staticfiles.views.serve\"><code class=\"xref py py-func docutils literal notranslate\">django.contrib.staticfiles.views.serve()</code></a>\nview.</p>\n<p>This is not suitable for production use! For some common deployment\nstrategies, see <a class=\"reference internal\" href=\"/ja/1.10/howto/static-files/deployment/\"><span class=\"doc\">静的ファイルのデプロイ</span></a>.</p>\n<p>For example, if your <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-MEDIA_URL\"><code class=\"xref std std-setting docutils literal notranslate\">MEDIA_URL</code></a> is defined as <code class=\"docutils literal notranslate\">/media/</code>, you can do\nthis by adding the following snippet to your urls.py:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span> <span class=\"nn\">django.conf</span> <span class=\"kn\">import</span> settings\n<span class=\"kn\">from</span> <span class=\"nn\">django.conf.urls.static</span> <span class=\"kn\">import</span> static\n\nurlpatterns <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"c1\"># ... the rest of your URLconf goes here ...</span>\n<span class=\"p\">]</span> <span class=\"o\">+</span> static<span class=\"p\">(</span>settings<span class=\"o\">.</span>MEDIA_URL<span class=\"p\">,</span> document_root<span class=\"o\">=</span>settings<span class=\"o\">.</span>MEDIA_ROOT<span class=\"p\">)</span>\n</code></pre></div>\n<aside class=\"admonition admonition-note\" role=\"note\">\n<p class=\"admonition-title\">注釈</p>\n<p>This helper function works only in debug mode and only if\nthe given prefix is local (e.g. <code class=\"docutils literal notranslate\">/media/</code>) and not a URL (e.g.\n<code class=\"docutils literal notranslate\">http://media.example.com/</code>).</p>\n</aside>\n</section>\n<section id=\"testing\">\n<span id=\"staticfiles-testing-support\"></span><h2>テスト<a class=\"heading-anchor\" href=\"#testing\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>When running tests that use actual HTTP requests instead of the built-in\ntesting client (i.e. when using the built-in <a class=\"reference internal\" href=\"/ja/1.10/topics/testing/tools/#django.test.LiveServerTestCase\" title=\"django.test.LiveServerTestCase\"><code class=\"xref py py-class docutils literal notranslate\">LiveServerTestCase</code></a>) the static assets need to be served along\nthe rest of the content so the test environment reproduces the real one as\nfaithfully as possible, but <code class=\"docutils literal notranslate\">LiveServerTestCase</code> has only very basic static\nfile-serving functionality: It doesn't know about the finders feature of the\n<code class=\"docutils literal notranslate\">staticfiles</code> application and assumes the static content has already been\ncollected under <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_ROOT\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_ROOT</code></a>.</p>\n<p>Because of this, <code class=\"docutils literal notranslate\">staticfiles</code> ships its own\n<a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django.contrib.staticfiles.testing.StaticLiveServerTestCase\" title=\"django.contrib.staticfiles.testing.StaticLiveServerTestCase\"><code class=\"xref py py-class docutils literal notranslate\">django.contrib.staticfiles.testing.StaticLiveServerTestCase</code></a>, a subclass\nof the built-in one that has the ability to transparently serve all the assets\nduring execution of these tests in a way very similar to what we get at\ndevelopment time with <code class=\"docutils literal notranslate\">DEBUG = True</code>, i.e. without having to collect them\nusing <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django-admin-collectstatic\"><code class=\"xref std std-djadmin docutils literal notranslate\">collectstatic</code></a> first.</p>\n</section>\n<section id=\"deployment\">\n<h2>Deployment<a class=\"heading-anchor\" href=\"#deployment\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p><a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a> provides a convenience management command\nfor gathering static files in a single directory so you can serve them easily.</p>\n<ol class=\"arabic\">\n<li><p>Set the <a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_ROOT\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_ROOT</code></a> setting to the directory from which you'd\nlike to serve these files, for example:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code>STATIC_ROOT <span class=\"o\">=</span> <span class=\"s2\">&quot;/var/www/example.com/static/&quot;</span>\n</code></pre></div>\n</li>\n<li><p>Run the <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#django-admin-collectstatic\"><code class=\"xref std std-djadmin docutils literal notranslate\">collectstatic</code></a> management command:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code>$ python manage.py collectstatic\n</code></pre></div>\n<p>This will copy all files from your static folders into the\n<a class=\"reference internal\" href=\"/ja/1.10/ref/settings/#std-setting-STATIC_ROOT\"><code class=\"xref std std-setting docutils literal notranslate\">STATIC_ROOT</code></a> directory.</p>\n</li>\n<li><p>Use a web server of your choice to serve the\nfiles. <a class=\"reference internal\" href=\"/ja/1.10/howto/static-files/deployment/\"><span class=\"doc\">静的ファイルのデプロイ</span></a> covers some common deployment\nstrategies for static files.</p></li>\n</ol>\n</section>\n<section id=\"learn-more\">\n<h2>さらに学ぶ<a class=\"heading-anchor\" href=\"#learn-more\"><span class=\"visually-hidden\">Link to this heading</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>This document has covered the basics and some common usage patterns. For\ncomplete details on all the settings, commands, template tags, and other pieces\nincluded in <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/#module-django.contrib.staticfiles\" title=\"django.contrib.staticfiles: An app for handling static files.\"><code class=\"xref py py-mod docutils literal notranslate\">django.contrib.staticfiles</code></a>, see <a class=\"reference internal\" href=\"/ja/1.10/ref/contrib/staticfiles/\"><span class=\"doc\">the staticfiles\nreference</span></a>.</p>\n</section>","rootId":"managing-static-files-e-g-images-javascript-css","toc":[{"title":"静的ファイルの設定","anchor":"configuring-static-files","children":[]},{"title":"Serving static files during development","anchor":"serving-static-files-during-development","children":[]},{"title":"Serving files uploaded by a user during development","anchor":"serving-files-uploaded-by-a-user-during-development","children":[]},{"title":"テスト","anchor":"testing","children":[]},{"title":"Deployment","anchor":"deployment","children":[]},{"title":"さらに学ぶ","anchor":"learn-more","children":[]}],"breadcrumbs":[{"docname":"howto/index","title":"「How-to」ガイド","url":"/ja/1.10/howto/"}],"prev":{"docname":"howto/outputting-pdf","title":"Django で PDF を出力する","url":"/ja/1.10/howto/outputting-pdf/"},"next":{"docname":"howto/static-files/deployment","title":"静的ファイルのデプロイ","url":"/ja/1.10/howto/static-files/deployment/"},"formats":{"html":"/ja/1.10/howto/static-files/","markdown":"/ja/1.10/howto/static-files.md","json":"/ja/1.10/howto/static-files.json"},"source":"https://github.com/django/django/blob/stable/1.10.x/docs/howto/static-files/index.txt","official":"https://docs.djangoproject.com/ja/1.10/howto/static-files/","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","fr","ja","id","pt-br","es","el","pl"]}