サンプルを見る
目標
| What is | This is |
|---|---|
| この連載の目的 | ライフゲームを作る |
| この記事の目標 | いきなりライフゲームを作るのは難しいから、まず白紙のWebページを開設する |
情報
この記事はレッスン編を読み終えた人を対象とする
| What is | This is |
|---|---|
| レッスン編 | 📖 DjangoとDockerでゲーム対局サーバーを作ろう！ |
始める前に
オススメ動画: 👇 以下の６分程度の動画９本を全部見れば１時間でライフゲームの見所の知識が入る
📺 THE RECURSIVE COSMOS: Conway's Game of Life ライフゲームの世界
Step OAAA1001o1o0g1o0 Dockerコンテナの起動
（していなければ） Docker コンテナを起動しておいてほしい
# docker-compose.yml ファイルを置いてあるディレクトリーへ移動してほしい
cd src1
# Docker コンテナ起動
docker-compose up
Step OAAA1001o1o0g2o0 フォルダー作成 - apps1/lifegame_vol1o0 フォルダー
👇 以下のフォルダーを新規作成してほしい
└── 📂 src1
└── 📂 apps1 # 複数のアプリケーションを入れるフォルダー
└── 📂 lifegame_vol1o0 # アプリケーション
Step OAAA1001o1o0g3o0 アプリケーション作成
👇 以下のコマンドを打鍵してほしい
docker-compose run --rm web python manage.py startapp lifegame_vol1o0 ./apps1/lifegame_vol1o0 --settings=project1.settings
# --------------- ----------------------- -----------------
# 1 2 3
# 1. 任意のDjangoアプリケーション名
# 2. アプリケーション フォルダーへのパス
# 3. `src1/project1/settings.py` 設定ファイルに従う
# -----------------
👇 以下のようなディレクトリー、ファイルが自動生成される
└── 📂 src1
└── 📂 apps1
└── 📂 lifegame_vol1o0 # アプリケーション
👉 ├── 📂 migrations
👉 │ └── 📄 __init__.py
👉 ├── 📄 __init__.py
👉 ├── 📄 admin.py
👉 ├── 📄 apps.py
👉 ├── 📄 models.py
👉 ├── 📄 tests.py
👉 └── 📄 views.py
Step OAAA1001o1o0g4o0 今回使わないファイルの削除
👇 以下のファイルを削除してほしい
└── 📂 src1
└── 📂 apps1
└── 📂 practice_vol1o0 # アプリケーション名
├── 📂 migrations
│ └── 📄 __init__.py
├── 📄 __init__.py
├── 📄 admin.py
├── 📄 apps.py
👉 ├── 📄 models.py
├── 📄 tests.py
👉 └── 📄 views.py
Step OAAA1001o1o0g5o0 アプリケーション設定変更 - apps.py
👇 以下のファイルを編集してほしい
└── 📂 src1
└── 📂 apps1
└── 📂 lifegame_vol1o0 # アプリケーション
├── 📂 migrations
│ └── 📄 __init__.py
├── 📄 __init__.py
├── 📄 admin.py
👉 ├── 📄 apps.py
└── 📄 tests.py
from django.apps import AppConfig
class LifegameV1Config(AppConfig):
default_auto_field = 'django.db.models.BigAutoField'
# * 変更前
# name = 'lifegame_vol1o0'
# * OAAA1001o1o0g5o0 変更後
name = 'apps1.lifegame_vol1o0'
# -----------------
# 1
# 1. `src1/apps1/lifegame_vol1o0/apps.py`
# ---------------------
Step OAAA1001o1o0g6o0 アプリケーション登録 - settings.py ファイル
👇 以下の既存のファイルを編集してほしい
└── 📂 src1
├── 📂 apps1
│ └── 📂 lifegame_vol1o0 # アプリケーション
│ ├── 📂 migrations
│ │ └── 📄 __init__.py
│ ├── 📄 __init__.py
│ ├── 📄 admin.py
│ ├── 📄 apps.py
│ └── 📄 tests.py
└── 📂 project1
👉 └── 📄 settings.py
# ...略...
INSTALLED_APPS = [
# ...略...
# あなたが追加したアプリケーション
# ...略...
# OAAA1001o1o0g6o0 ライフゲーム1.0巻
'apps1.lifegame_vol1o0',
# ...略...
# Djangoの標準アプリケーション
# ...略...
]
# ...略...
Step OAAA1001o1o0g7o0 画面作成 - board/ver0o1o0.html ファイル
👇 以下のファイルを新規作成してほしい
└── 📂 src1
├── 📂 apps1
│ └── 📂 lifegame_vol1o0 # アプリケーション
│ ├── 📂 migrations
│ │ └── 📄 __init__.py
│ ├── 📂 templates
│ │ └── 📂 lifegame_vol1o0 # アプリケーションと同名
│ │ └── 📂 board
👉 │ │ └── 📄 ver0o1o0.html
│ ├── 📄 __init__.py
│ ├── 📄 admin.py
│ ├── 📄 apps.py
│ └── 📄 tests.py
└── 📂 project1
└── 📄 settings.py
<!-- OAAA1001o1o0g7o0 -->
{% load static %} {# 👈あとで static "URL" を使うので load static します #}
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<title>Life game</title>
<style>
/* 等幅 */
.v-textarea textarea {
font-family: monospace, monospace;
}
</style>
</head>
<body>
{% block body %}
<!-- -->
ここに本体を書く
<!-- -->
{% endblock body %}
</body>
</html>
Step OAAA1001o1o0g8o0 設定変更 - settings.py ファイル
👇 以下のファイルを編集してほしい
└── 📂 src1
├── 📂 apps1
│ └── 📂 lifegame_vol1o0 # アプリケーション
│ ├── 📂 migrations
│ │ └── 📄 __init__.py
│ ├── 📂 templates
│ │ └── 📂 lifegame_vol1o0 # アプリケーションと同名
│ │ └── 📂 board
│ │ └── 📄 ver0o1o0.html
│ ├── 📄 __init__.py
│ ├── 📄 admin.py
│ ├── 📄 apps.py
│ └── 📄 tests.py
└── 📂 project1
👉 └── 📄 settings.py
👇 変更するのは TEMPLATES[0]["DIRS"] 変数
TEMPLATES = [
{
# ...略... 'BACKEND'
'DIRS': [
# ...略...
# OAAA1001o1o0g8o0 ライフゲーム1.0巻
os.path.join(BASE_DIR, 'apps1/lifegame_vol1.0/templates'),
# -------------------------------
# 10
# Example: /src1/apps1/lifegame_vol1o0/templates/lifegame_vol1o0/board/ver0o1o0.html
# --------------- ----------------
# 11 2
# ---------------------------
# 10
# 10. テンプレート ディレクトリーへのパス
# 11. アプリケーション
# 2. まるで `http://example.com/lifegame_vol1o0` という素材フォルダーがあるかのように扱われる
# ----------------
],
# ...略... 'APP_DIRS' や 'OPTIONS'
},
]
Step OAAA1001o1o0g9o0 ビュー作成 - board/v0o1 フォルダー
👇 以下のファイルを新規作成してほしい
└── 📂 src1
├── 📂 apps1
│ └── 📂 lifegame_vol1o0 # アプリケーション
│ ├── 📂 migrations
│ │ └── 📄 __init__.py
│ ├── 📂 templates
│ │ └── 📂 lifegame_vol1o0 # アプリケーションと同名
│ │ └── 📂 board
│ │ └── 📄 ver0o1o0.html
│ ├── 📂 views
│ │ └── 📂 board
│ │ └── 📂 ver0o1o0
👉 │ │ └── 📄 __init__.py
│ ├── 📄 __init__.py
│ ├── 📄 admin.py
│ ├── 📄 apps.py
│ └── 📄 tests.py
└── 📂 project1
└── 📄 settings.py
# BOF OAAA1001o1o0g9o0
from django.shortcuts import render
class BoardView():
"""OAAA1001o1o0g9o0 盤"""
@staticmethod
def render(request):
"""描画"""
template_path = 'lifegame_vol1o0/board/ver0o1o0.html'
# -----------------------------------
# 1
# 1. `src1/apps1/lifegame_vol1o0/templates/lifegame_vol1o0/board/ver0o1o0.html` を取得
# -----------------------------------
context = {}
return render(request, template_path, context)
# EOF OAAA1001o1o0g9o0
Step OAAA1001o1o0ga10o0
Merged to OAAA1001o1o0ga10o1o0
Step OAAA1001o1o0ga10o1o0 ルート編集 - urls.csv ファイル
👇 以下の既存ファイルの末尾に追記してほしい
├── 📂 src1
│ ├── 📂 apps1
│ │ └── 📂 lifegame_vol1o0 # アプリケーション
│ │ ├── 📂 migrations
│ │ │ └── 📄 __init__.py
│ │ ├── 📂 templates
│ │ │ └── 📂 lifegame_vol1o0 # アプリケーションと同名
│ │ │ └── 📂 board
│ │ │ └── 📄 ver0o1o0.html
│ │ ├── 📂 views
│ │ │ └── 📂 board
│ │ │ └── 📂 ver0o1o0
│ │ │ └── 📄 __init__.py
│ │ ├── 📄 __init__.py
│ │ ├── 📄 admin.py
│ │ ├── 📄 apps.py
│ │ └── 📄 tests.py
│ └── 📂 project1
│ └── 📄 settings.py
└── 📂 src1_meta
└── 📂 data
👉 └── 📄 urls.csv
...略... file,path,name,comment,module,class,alias,method
...略...
../src1/project1/urls_lifegame_vol1o0_autogen.py,lifegame/vol1.0/board/ver0.1,,"OAAA1001o1o0ga10o1o0 ライフゲーム1.0巻 盤0.1版",apps1.lifegame_vol1o0.views.board.ver0o1o0,BoardView,Lifegame1o0BoardView0o1o0,render
Step OAAA1001o1o0ga10o2o0 ルート編集 - コマンド打鍵
👇 以下のコマンドを打鍵してほしい
cd ../src1_meta
python -m scripts.auto_generators.urls
cd ../src1
docker-compose restart
- ディレクトリーは、がんばって移動してほしい
- スクリプトについて See also: O3o2o_1o0g2o0
- 設定ファイルを変更したら、サーバーの再起動が必要
Step OAAA1001o1o0ga11o0
Merged to OAAA1001o1o0ga10o1o0
Step OAAA1001o1o0ga12o_1o__10o0 Webページにアクセスする
👇 接続の確認だけしてほしい
📖 http://localhost:8000/lifegame/vol1.0/board/ver0.1
続きの記事
📖 DjangoとDocker自由課題OAAA1001o1o0ga12o_1o0 ライフゲームの思考エンジンを作ろう！
参考にした記事
ライフゲーム
📖 ライフゲーム Akihide Hanaki
📖 ライフゲームの数理 里村孔明
Vue.js
📖 【Vue.js】ページ読み込み完了後・離脱時に処理を実行する
📖 Vue.js v-show ディレクティブで要素の表示非表示を切り替える
Vuetify
📖 Colors
Java Script
📖 How to Stop setInterval() Call in JavaScript
📖 Destructuring assignment
テキスト
正規表現
📖 正規表現