August 2020 – Page 3 – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

[Django3.0]urls.pyとviews.py

フロントに沿って、urls.py、views.py、*.htmlを作ってきます。
editはパラメータの書き方が異なるので、モデルを作った後に作ります。

/sales/urls.py

urlpatterns = [
	path('login/', views.login, name='login'),
	path('', views.index, name='index'),
	path('client/', views.client, name='client'),
	path('client/input', views.client_input, name='client_input'),
	path('client/detail', views.client_detail, name='client_detail'),
	path('master/edit', views.master, name='master'),
	path('estimate/', views.estimate, name='estimate'),
	path('estimate/input', views.estimate_input, name='estimate_input'),
	path('order/', views.order, name='order'),
	path('order/input', views.order_input, name='order_input'),
	path('stock', views.stock, name='stock'),
	path('stock/input', views.stock_input, name='stock_input'),
]

/sales/views.py

from django.shortcuts import render
from django.http import HttpResponse

def login(request):
	return render(request, 'sales/login.html')

def index(request):
	return render(request, 'sales/index.html')

def client(request):
	return render(request, 'sales/client.html')

def client_input(request):
	return render(request, 'sales/client_input.html')

def client_detail(request):
	return render(request, 'sales/client_detail.html')

def master(request):
	return render(request, 'sales/master.html')

def estimate(request):
	return render(request, 'sales/estimate.html')

def estimate_input(request):
	return render(request, 'sales/estimate_input.html')

def order(request):
	return render(request, 'sales/order.html')

def order_input(request):
	return render(request, 'sales/order_input.html')

def stock(request):
	return render(request, 'sales/stock.html')

def stock_input(request):
	return render(request, 'sales/stock_input.html')

ヘッダとログインページ以外のナビゲーションは共通なので、続いて、共通箇所をインクルードにして一括管理したい。

[Django]templatesを一気に作る

### 画面遷移図

### URL一覧

まずtemplateのhtmlを流し込む前に、urls.pyとviews.pyの一覧を作ってからhtmlを流し込めば良いのか？
いや、urls.pyに記載してもviews.pyに記載がないとAttributeErrorになるので、urls.py　-> views.py -> *.html をループさせた方が作業効率は良さそうである。

/sales/urls.py

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

/sales/views.py

def index(request):
	return render(request, 'sales/index.html')

/sales/templates/sales/index.html

// 省略

load staticを毎ページ修正するのは面倒ではある。

[Django]staticフォルダにstyle.cssを置こう

まずsales配下にstaticフォルダ、その配下にsalesフォルダ、更にその下にcssフォルダを作成します。

/sales/static/sales/css/style.css
// 省略　※webpackでsassから作ったcssを置く

/templates/sales/login.html

{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ログイン | hanbai - メールアドレス、パスワードを入力してください</title>
	// 省略

	<link rel="stylesheet" href="{% static 'sales/css/styles.css' %}">
	<script src="/js/main.js"></script>
</head>
// 省略

imgフォルダも作ります。

<img id="profile-img" class="profile-img-card" src="{% static 'sales/img/avatar.png' %}">

Wow!! なるほど、Djangoオモロイ!
取り敢えずこれはモデルの前に先に全部のurlspatternとtemplate嵌め込みをやれば良いのかな。順番がよくわからないが、フロント部分から手を付けた方が効率的そう。

djangoでテンプレートにはめ込もう

/hanbai/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sales',
]

/sales/templates/sales/login.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ログイン | hanbai - メールアドレス、パスワードを入力してください</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="Description" content="見積管理、在庫管理、販売管理はhanbai">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

	<link rel="stylesheet" href="css/style.css">
	<script src="/js/main.js"></script>
</head>
<body>
	<div class="wrapper">

		<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color:#1e90ff">
			<a class="navbar-brand disabled" href="">Hanbai</a>
		</nav>

		<div class="container">
			<div class="login">
				<div class="row">
					<div class="card card-container">
						<h1 class="text-center login-title">Hanbai</h1>
						<img id="profile-img" class="profile-img-card" src="/img/avatar.png">
						<div class="account-wall">
							<form class="form-signin">
								<input type="email" id="inputEmail" class="form-control" placeholder="Email" required autofocus>
								<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
								<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit">
								ログイン</button>
								・ログインパスワードをお忘れの方は
								<a href="#">こちら</a><span class="clearfix"></span>
								・アカウントをお持ちでない方は
								<a href="#">こちら</a><span class="clearfix"></span>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<p>&copy; Hanbai All Right Reserved.</p>
		</footer>
	</div>
</body>
</html>

/sales/urls.py

from django.urls import path
from . import views

urlpatterns = [
	path('/login', views.login, name='login'),
]

/sales/views.py

from django.shortcuts import render
from django.http import HttpResponse

def login(request):
	return render(request, 'sales/login.html')

cssと画像が効いていませんが、基本型はできました。

djangoでappを始めよう

$ python -V
Python 3.8.0
$ django-admin startproject hanbai
$ python manage.py runserver 192.168.33.10:8000

### アプリケーションの作成
$ python manage.py startapp sales
$ git init

/sales/views.py

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
	return HttpResponse("Hello Django!")

/hanbai/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('sales.urls')),
]

/sales/urls.py

from django.urls import path
from . import views

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

urlパターンはpath(‘/’)とするとエラーになるので、path(”)とする必要があります。
これからfrontで作成したviewを組み込んで行きます。

ubuntuでgitをupdateする手順

$ hostname
ubuntu-bionic
$ git version
git version 2.17.1
$ sudo add-apt-repository ppa:git-core/ppa
$ sudo apt update
$ sudo apt install git
$ git version
git version 2.28.0

最新はFocal Fossaなのでbionicはもう古いかな

初めての半田ゴテ

Arduinoやラズパイを触ると、無精に触りたくなります。
ということで、半田ごてセットを購入しました。

机に直置きは怖いので、タオルの上で作業します。

はんだ線を付けても全く溶解しなかったので不可解に思いましたが、ハンダゴテの金属が加熱するのに数分程度時間がかかるようで、少し時間をおいたらハンダ線が溶け始めました。

なんやこの臭いは？　臭いが強烈
作業は室内より室外の方が向いているように思いました。

しかし半田ごてはやりたかったことの一つ。
まあ、一歩前進はしました。

トランジスタとは？

トランジスタとは電子回路において信号を増幅またはスイッチングすることができる半導体素子

– 信号を増幅する
– 回路をオンオフする
– NPNやPNPという順番で半導体を挟んでいる(Eエミッタ、Bベース、Cコネクタ)
– バイポーラ型トランジスタ、ユニポーラ型トランジスタ、フォトトランジスタ、サイリスタなどの種類がある

### トランジスタの使い方
微弱な電流を流してコレクタ電流を増幅させる

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  pinMode(8,OUTPUT);
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("HIGH");
  digitalWrite(8,HIGH);
  delay(2500);

  Serial.println("LOW");
  digitalWrite(8,LOW);
  delay(2500);
}

コンデンサを使ってみよう

コンデンサは電気を蓄えたり放電したりする
金属板が絶縁体を挟み込んだ状態となっている
電圧を加えられると放電する
電圧を一定する働きがある
1.電荷を貯める(静電容量)
2.直流電流は通さず、交流電流を通す(充電と放電を繰り返す)
3.周波数が高い交流ほど通しやすい(抵抗の働きをする)

コンデンサ、トランジスタを組み込んで配線を組みます

int count = 0;
boolean discharge = false;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  pinMode(8, OUTPUT);
  pinMode(9, OUTPUT);
  digitalWrite(8, HIGH);
  digitalWrite(9, LOW);
  Serial.println("コンデンサの充電開始");
  delay(1000);

}

void loop() {
  // put your main code here, to run repeatedly:
  count++;

  Serial.print(count);
  Serial.print("秒");
  Serial.print(analogRead(A0) / 1024.0 * 5.0);
  Serial.print("V");
  Serial.print("(");
  Serial.print(analogRead(A0));
  Serial.println(")");

  if(count >= 35 && !discharge){
    digitalWrite(8, LOW);
    digitalWrite(9, HIGH);
    Serial.println("コンデンサの放電開始");
    count = 0; discharge = true;
  }
  delay(1000);
  
}

DatePickerでのstart〜endの制御

開始日を入力したら終了日は開始日以降にする
終了日を入力したら開始日は終了日以前しか入力できないようにする

<input type="text" name="start"> ~ <input type="text" name="end">
	<script>
			var format = 'yy/mm/dd';

			var start = $("[name=start]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				end.datepicker("option", "minDate", getDate(this));
			});

			var end = $("[name=end]").datepicker({
				dateFormat: 'yy/mm/dd'
			}).on("change", function(){
				start.datepicker("option", "maxDate", getDate(this));
			});

			function getDate(element){
				var date;
				try {
					date = $.datepicker.parseDate(format, element.value);
				} catch(error){
					date = null;
				}
				return date;
			}
	</script>

コントローラ(サーバ側)で制御するよりも、フロントで制御した方がユーザフレンドリーです。