DjangoでServerSentEvents(SSE)とローカルメモリキャッシュを使い、リアルタイムでDB内の情報を表示する
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: Django SSE JavaScript
Reactベースの静的サイトジェネレーターGatsbyを使う
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: 追記予定 静的サイトジェネレーター React
【JavaScript】awaitとasyncの違い【非同期処理のコールバック地獄対処】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips
【前提知識】同期処理と非同期処理とは 同期処理とは、 console.log("1"); console.log("2"); console.log("3"); このように上から順に実行される処理のことを言う。 一方で、非同期処理とは console.log("1"); setTimeout(() => { console.log("2"); }, 1000); // 1秒後に実行 console.log("3"); このように、処理の完了を待たずに後続の処理を行うことを言う。 setTimeoutの他に、fetchAPIが非同期処理に当てはまる。 fetchAPIのコールバック地獄に対処する。 例えば、fetchAPIでリクエストを書く時、 fetch(url, { method, headers, body }) .then( (res) => { if ...【Django】アップロードしたPythonファイルを動かす【subprocessと動的import】
アップロードしたPythonファイルをDjango側で動作させる。 仮想環境を動かし、事前にインストールしておいたライブラリも動くようにする。 views.py from django.shortcuts import render,redirect from django.views import View from .models import Document from .forms import DocumentForm from django.conf import settings import subprocess import importlib.util import os class IndexView(View): def get(self, request, *args, **kwargs): context = {} context["documents"] = Document.objects.all() # アップロードされたPythonを実行する。 document = Document.objects.filter(id=1).first() # アップロードされたPythonプログラムのファイルパスを作成 program_path = str(settings.BASE_DIR) + document.file.url # 仮想環境のファイルパスを作成(pythonファイルのある ...Djangoのcreatesuperuserでインタラクティブシェルを省略する。
python manage.py createsuperuserで管理ユーザーをつくることができるが、その後のインタラクティブシェルの入力がめんどくさい。 そこで、環境変数を使ってインタラクティブシェルを省略する。 更に、エイリアスを使ってコマンド入力も簡略化させる。 # createsuperuser の自動化 export DJANGO_SUPERUSER_USERNAME="asahina" export DJANGO_SUPERUSER_EMAIL="asahina@asahina.com" export DJANGO_SUPERUSER_PASSWORD="seiya0723" alias django_createsuperuser="python manage.py createsuperuser --noinput" ...【Heroku】デプロイ直後にコマンドを実行する【Procfile編集】
例えば、Djangoのデプロイ時に、マイグレーションをしてほしいのであれば、 release: python manage.py migrate web: gunicorn config.wsgi:application --log-file - とする。 並列で処理を実行して欲しい場合 worker を使う。 release: python manage.py migrate worker: python manage.py custom_command web: gunicorn config.wsgi:application --log-file - 参照 https://devcenter.heroku.com/articles/procfile ...【Django】django-otpで多要素認証(二要素認証)を実現させる【GoogleAuthenticator】
【Django】任意のタイミングでサーバーのカメラでライブ配信する【imutils.video.VideoStreamer】
下記記事で、リアルタイムでブラウザ上に映像を出力することができるようになった。 【Django】OpenCVとyieldを使い、ウェブカメラの映像をライブ配信する しかし、このコードはrunserverと同時に起動しているため、カメラを止めることはできない。 任意のタイミングでカメラのON・OFFをするため、改良した。 必要なライブラリ asgiref==3.8.1 Django==5.0.6 imutils==0.5.4 numpy==1.26.4 opencv-contrib-python==4.9.0.80 sqlparse==0.5.0 typing_extensions==4.12.0 views.py from django.shortcuts import render,redirect from django.views import View from .detector import SingleMotionDetector from imutils.video import VideoStream from django.http import StreamingHttpResponse import os import cv2 import time import ...【Django】ストレージに保存されているファイルにアクセス、編集して保存する【InMemoryUploadedFile】
【JavaScript】localStorageを使ってブラウザにデータを記録する【Cookieが使えないときに】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips
サーバー側にデータを送信しない場合、セキュリティ上CookieではなくlocalStorageを使う。 ソースコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> </head> <body> <input id="test" type="text"> <input id="reset" type="button" value="リセット"> <script> const test = document.querySelector("#test"); const reset = document.querySelector("#reset"); // 読み込みされたとき、データがあればテキストボックスにセットする。 const data = localStorage.getItem("test"); if (data){ test.value = data; } // キー入力があるたびにローカルストレージにセットする。 test.addEventListener("change", (event) => { const value = event.currentTarget.value; localStorage.setItem("test",value); }); reset.addEventListener("click", () => { test.value = ""; ...