Django で 静的なファイル (jQuery,css) を使うアプリを作成

プロジェクト proj01 に 静的なファイル (jQuery,css) を使う app03 というアプリを作成してみます。


1) アプリの作成

```bash
django-admin startproject proj01
cd proj01/
python manage.py migrate
python manage.py startapp home
python manage.py startapp app03
```

```py:home/views.py
from django.http import HttpResponse

def index(request):
    str_out = ""
    str_out += "<p>*** home *** start ***</p>"
    str_out += "<p>ホームです。</p>"
    str_out += "<a href='app03/'>app03</a><p />"
    str_out += "<p>*** home *** end ***</p>"
    str_out += "<p>Nov/08/2022</p>"
    return HttpResponse(str_out)
```

```py:home/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```

2) proj01/settings.py の編集

```py:proj01/settings.py
（省略）
INSTALLED_APPS = [
    'home',
    'app03',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
（省略）
```

3) proj01/urls.py の編集

```py:proj01/urls.py
from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('accounts/', include('django.contrib.auth.urls')),
    path('', include('home.urls')),
    path('app03/', include('app03.urls')),
    path('admin/', admin.site.urls),
]
```

4) テンプレートの作成

```bash
mkdir app03/templates
mkdir app03/templates/app03
```

```html:app03/templates/app03/app03.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
{% load static %}
<script src="{% static 'app03/app03.js' %}"></script>
<link rel="stylesheet" href="{% static 'app03/app03.css' %}">
<title>app03</title>
</head>
<body>
<h2>app03 template!</h2>
{{ hour }}時{{ minute }}分です。<br>
{{ message | safe }}<p />
<hr />
<span class='green'>green</span>
<span class='red'>red</span>
<span class='blue'>blue</span>
<hr />
<p><a href="../accounts/logout/">Logout</a></p>
<p><a href="../">Return</a></p>
<hr />
<div id="outarea_aa">outarea_aa</div>
<div id="outarea_bb">outarea_bb</div>
<div id="outarea_cc">outarea_cc</div>
<div id="outarea_dd">outarea_dd</div>
<div id="outarea_ee">outarea_ee</div>
<div id="outarea_ff">outarea_ff</div>
<div id="outarea_gg">outarea_gg</div>
<div id="outarea_hh">outarea_hh</div>
<hr />
<p>app03.html</p>
<p>Nov/08/2022 PM 12:10</p> 
</body>
</html>
```

5) jQuery と css を作成

```bash
mkdir app03/static
mkdir app03/static/app03
```

```js:app03/static/app03/app03.js
// -----------------------------------------------------------------------
//	app03.js
//
//					Nov/08/2022
//
// -----------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").html("*** app03.js *** start *** Nov/08/2022 ***")

	jQuery("#outarea_hh").html("*** app03.js *** end *** Nov/08/2022 ***")
})

// -----------------------------------------------------------------------
```

```css:app03/static/app03/app03.css
/* -------------------------------------------------------------- */
/*
	app03.css


				Dec/20/2018
*/
/* -------------------------------------------------------------- */
span.green{color: green}
span.red{color: red}
span.blue{color: blue}

/* -------------------------------------------------------------- */
```

6) app03/views.py の編集

```py:app03/views.py
from datetime import datetime

from django.http import HttpResponse
from django.shortcuts import render
# from django.contrib.auth.decorators import login_required

# @login_required
def index(request):
	message = ""
	message += 'app03 からのメッセージです。<br />'
	message += str(request.user.id) + '&nbsp;&nbsp;'
	message += request.user.username + '<p />'
	dd = {
		'hour': datetime.now().hour,
		'minute': datetime.now().minute,
		'message': message,
	}
	return render(request, 'app03/app03.html', dd)
```

7) app03/urls.py の作成

```py:app03/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```

8) 開発サーバーの起動

```bash
python manage.py runserver
```

9) ブラウザーで http://127.0.0.1:8000/app03/ にアクセス
![app03_dec20.png](https://qiita-image-store.s3.amazonaws.com/0/179446/b80bd18a-f6bf-1a30-11d8-8acac06a5b87.png)