前回はDjangoにてcssファイルを使用してカードの配置等を変更させました。
そこから少し変更させ、いよいよ本番と言っても過言ではないDjango ないでjavascriptの実装です。JQueryというフレームワークもありますが今回はフレームワークなしでどんどん実装していこうとおもいます。
また、仕事ではないので方針を固めずどんどんやっていて適宜やり方を考えていこうと思います。
Djangoでjsファイルを利用
よく言われているのがstaticsフォルダ内にcssフォルダを作って格納するというものです。
これでもjsは使用できます。
ただjs内に変数が存在しないものに限ってです。
例えばページを自動で動かすとかそういう系!
下記非常に重要なことです。
Djangoですとstaticsフォルダ内にあるjsの変数をindex.html側に飛ばすことができません。
ずっとそのエラーが出ており、困っていたのですがどうやら変数拾えてない。
ということでhtmlの<script>〜</script>内に変数を記述すると解決しました。
そのため結論としてDjangoでは変数はhtml側での記述が必要みたいです。
てかそもそもscriptファイルをhtml側に記述したほうが使い勝手いいなと感じた。
その為jsを付け加えていく際はhtml側に以後記載していきます。
Htmlの変化点
前回からcssとhtmlを少し変更させ下記のようになっております。python側のファイルは特に変更しいませんので記載気になるかたはコチラご確認よろしくです!
<html>
{% load static %}
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'ap/css/gamepage_css1.css' %}">
<title>きのこがり</title>
<script></script>
</head>
<table id = 'player' width="1000" height="200">
<th>{{ player1 }}</th><th>{{ player2 }}</th><th>{{ player3 }}</th>
<th></th><th></th><th></th>
</table>
<div>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id ="cards1-1">
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
<img src="{% static "ap/image/kinoko/dokumark.png" %}">
</div>
<div>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2Z'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
</div>
<div>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
</div>
<div>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-13'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-2'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-3'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-4'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-5'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-6'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-7'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-8'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards1-9'>
<img src="{% static "ap/image/kinoko/cards.png" %}" name="cards" id = 'cards2-10'>
</div>
</body>
</html>
前回table要素で記載していた箇所をdivとimg要素で記載しています。
そこまで内容自体変わっていません。
<
<script>の箇所はtitleの下に設置する予定です。
作成は次回かなー!!
body {
line-height: 1;
font-family: sans-serif;
font-size: 20px;
font-weight: 300;
color: #333;
}
img {
width:80px;
height:120px;
}
cssも簡素にしました。
隙間をわざわざ前回は指定して作っていましたが幅調節ができることがわかったのでコチラの方が見やすいです。
以上で作成したページが下記のようになっているはずです。
今回はjsファイルの格納と変数の注意点に関してがメインの記事になってしまいました。
次は実際にカードをクリックさせて動かしていきます。
次回の記事はコチラからご参照ください。
コメント
[…] 前回の記事はコチラをご参照ください。Djangoでjavascriptの変数に関する注意点【Djangoでカードクリックゲーム作成!… […]
[…] 前回の記事はコチラをご参照ください。Djangoでjavascriptの変数に関する注意点【Djangoでカードクリックゲーム作成!!3日目①】 […]