自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

  • DjangoでWebSocketを使って、チャットサイトを作る

    django-channelsを使ってWebSocketを実現させる【チャットサイト開発に】 ここで、チャットサイトを作ったが、ページリロードで全て消えてしまう。 チャンネルレイヤーにメッセージを与えるだけでなく、DBにも記録するように仕立てた。 consumers.py import json from channels.generic.websocket import AsyncWebsocketConsumer from asgiref.sync import sync_to_async from .forms import ChatLogForm from django.utils import timezone class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name await self.channel_layer.group_add( self.room_group_name, self.channel_name ) await self.accept() async def disconnect(self, close_code): await self.channel_layer.group_discard( self.room_group_name, self.channel_name ) async def receive(self, text_data): text_data_json = json.loads(text_data) message = text_data_json['message'] chat_log = await self.save_chat_log(message) if chat_log == None: return False local_created_at = timezone.localtime(chat_log.created_at) created_at_str = local_ ...
  • ReactでFullcalendar.jsを使う

    インストール npm install @fullcalendar/react @fullcalendar/daygrid ソースコード import FullCalendar from '@fullcalendar/react'; import dayGridPlugin from '@fullcalendar/daygrid'; import { useState, useEffect } from 'react'; const App = () => { const [events, setEvents] = useState([]); useEffect( () => { setEvents([ { title: 'event 1', date: '2024-12-01' }, { title: 'event 2', date: '2024-12-02' } ]); }, []); // FullCalendarに events 引数を与える。Stateで管理する。 return ( <main> <div className="container"> <FullCalendar plugins={[ dayGridPlugin ]} initialView="dayGridMonth" locale="local" events={events} /> </div> </main> ) } export default App; 考察 今回は、useEffectでイベントを取得したが、実践ではfullcalendar.jsのeventSourceを使うほうが良いだろう。 なぜなら、useEffec ...
  • DjangoでServerSentEvents(SSE)とローカルメモリキャッシュを使い、リアルタイムでDB内の情報を表示する

    【前置き】Djangoでリアルタイム通信する場合 DjangoでDB内の情報をリアルタイムで表示させる場合、 ポーリング Server Sent Events Web Socket この3つが候補に挙がる。 ポーリングはシンプルではあるが、リクエストを送らない限り、情報は得られない。 【Django】Ajax(jQuery)でロングポーリングを実装させる【チャットサイトの開発に】 WebSocketは実装難度が高い。 【Django】channelsを使ってW ...
  • Reactベースの静的サイトジェネレーターGatsbyを使う

    React学習のため、とりわけ扱いやすいGatsbyを使うことにした。 学習完了次第。このサイトは、HUGOからGatsbyに移行する予定。 本記事では、Gatsbyを調べてわかったことをまとめる。学習の都度まとめているため、誤りが含まれる可能性がある点をご了承いただきたい。 実装方法 Ubuntu 22.04 LTS 環境下で動作させている。 sudo npm install -g gatsby-cli まず、グローバル環境下でGatsbyをインストールする。 これでGatsbyコマン ...
  • 【JavaScript】awaitとasyncの違い【非同期処理のコールバック地獄対処】

    【前提知識】同期処理と非同期処理とは 同期処理とは、 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】

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: django
    アップロードした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】

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: Django
    Djangoは、デフォルトでもユーザー名とパスワードによるログインを用意している。 しかしユーザー名とパスワードが知られてしまえば、誰でも簡単にログインできてしまう。 そこで、ユーザー名やパスワードなどの「記憶情報」だけでなく、ワンタイムパスワードなどを使い「所持情報」による認証もする。 この「記憶情報」と「所持情報」の2つの要素による認証を、二要素認証という。(多要素認証ともいう) https://ja ...
  • 【Django】任意のタイミングでサーバーのカメラでライブ配信する【imutils.video.VideoStreamer】

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: django
    下記記事で、リアルタイムでブラウザ上に映像を出力することができるようになった。 【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 ...