自動化無しに生活無し

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

  • DRF+ReactのSPAで簡易掲示板を作る

    最近(2018年以降)の開発では関数ベースのコンポーネントが主流のため、一部を書き換えた。 React App.js import React, { useState, useEffect } from "react"; import Modal from "./components/Modal"; import axios from "axios"; const App = () => { const [topicList, setTopicList] = useState([]); const [modal, setModal] = useState(false); const [activeTopic, setActiveTopic] = useState({ comment: "" }); // コンポーネントがレンダリングされるときに実行する useEffect(() => { refreshList(); }, []); // ページロード const refreshList = () => { axios .get("/api/topics/") .then((res) => setTopicList(res.data)) .catch((err) => console.log(err)); }; const handleSubmit = (topic) => { if (topic.id) { axios .put(`/api/topics/${topic.id}/`, topic) .then(() => refreshList()) .catch((err) => console.log(err)); } else { axios .post("/api/topics/", topic) .then(() => refreshList()) .catch((err) => console.log(err)); } closeModal(); }; const handleDelete = (topic) => { axios .delete(`/api/topics/${topic.id}/`) .then(() => refreshList()); }; const openModal = (topic) => { if (topic.id) { setActiveTopic(topic); } else { setActiveTopic({ comment: ...
  • 【Django】デフォルトの認証機能を網羅し、カスタムユーザーモデルとメール認証、メール検証(確認)も実装する【脱allauth】

    【Django】デフォルトの認証機能を網羅し、カスタムユーザーモデルとメール認証も実装させる【脱allauth】 こちらの記事では、メールの検証(アカウント作成後、登録したメールアドレスへ、確認用のURLを送る工程)が行われていない。 allauthでは実装済みのため、デフォルトの認証で完全に補完するためにも実装した。 解説 モデル カスタムユーザーモデルへ、メール検証済みか否かを判定するブーリアンフィール ...
  • 【Django】GitHubを使ってHerokuにデプロイをする

    settings.pyの内容 一部省略している。 os モジュールを使って、環境変数を読み込みする。 import os DEBUG = False # 中略 # 静的ファイルの読み込み設定がwhitenoiseに影響が及ぶので、デバッグ時にのみ有効にしておく。 if DEBUG: STATICFILES_DIRS = [ BASE_DIR / "static" ] # 中略 if not DEBUG: #INSTALLED_APPSにcloudinaryの追加 INSTALLED_APPS.append('cloudinary') INSTALLED_APPS.append('cloudinary_storage') # ALLOWED_HOSTSにホスト名)を入力 ALLOWED_HOSTS = [ os.environ["HOST"] ] SECRET_KEY = os.environ["SECRETKEY"] # 静的ファイル配信ミドルウェア、whi ...
  • 【Django】modelformset_factoryで1回のリクエストでまとめて投稿する【フォームセット】

    1回のリクエストで、決まった個数のデータをまとめて投稿したい場合、modelformset_factory が有効。 ただし、状況によってはgetlistを使う方法のほうが有効の場合もあるので、よく考える必要がある。 modelformset_factory とは 例えば、1回のリクエストで5個のコメントをまとめて投稿する必要がある場合。 このようにフォームクラスを元に、フォームセットを作る。 from django import forms from .models import Topic class TopicForm(forms.ModelForm): class Meta: model = Topic fields = [ "comment" ] from django.forms import modelformset_factory TopicFormSet = modelformset_factory(Topic, ...
  • 【Django】モデルクラスのcleanメソッドでバリデーションをする

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: Django
    下記記事は、フィールドにvalidatorsオプションを 【Django】models.pyにて、オリジナルのバリデーション処理を追加する【validators】【正規表現が通用しない場合等に有効】 下記記事は、フォームクラスにcleanメソッドを実装した。 【Django】ManyToManyFieldにはフィールドオプションvalidatorsは効果なしなので、フォームクラスに追加のバリデーションを ...
  • 【Django】OpenCVとyieldを使い、ウェブカメラの映像をライブ配信する【imutils.video.VideoStreamer】

    • 作成日時:
    • 最終更新日時:
    • Categories: サーバーサイド
    • Tags: django
    Djangoで、VideoStreamerで撮影した映像をライブ配信させる。 仕組みはyieldとマルチスレッド処理を使い、サーバー起動とライブ配信処理を並行して行っている。 撮影して画像を保存しAjaxのポーリングを繰り返すより、Django側がカメラの映像を配信し続ける本記事の方法が効率が良い。 必要なライブラリ 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 配信処理のビューとカメラの起動を行っている。 動体検知処理の部分はコメント ...
  • Django Rest FrameworkのViewの書き方【APIViewと汎用APIView、ModelViewSetの違い】

    Django Rest Framework (以下、DRF)のビューの書き方をまとめる。 下記記事で紹介した素のDjangoのビューと同様、DRFでも継承するビューによって大きく書き方が全く違う。 【関連記事】 : 【Django】ビュー関数とビュークラスの違い、一覧と使い方 本記事では、状況に応じて、適切なビューがコーディングできるようビューの書き方をまとめる。 前提 モデル from django.db import models class Topic(models.Model): comment = models.CharField(verbose_nam ...
  • 【Django】任意の順番で並び替えて表示させる【Sortable.js + FetchAPI 】

    データを一覧で並べる時、並び順を任意に変更させたいときがある。 そういう時、sortable.jsを使えば良い。 JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】 しかし、並び替えた順番をDBに記録する場合は、別途対応が必要だ。 モデルに並び替えの順番を記録するフィールドを追加 並び替えた順番を送信する(FetchAPIによるリクエスト) 別途ビューを作り、並び替 ...
  • 【HTML】inputタグで画像を複数枚指定する【multiple】

    画像を複数枚指定できるようにする。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file" multiple> <input type="submit" value="送信"> </form> このフォームで指定された画像は、下記のように同じname属性の値のフォームが複数存在する状態と同じ。 <form method="POST" enctype="multipart/form-data"> <!-- CSRF token --> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <input name="content" type="file"> <!-- 略 --> <input type="submit" value="送信"> </form> そのため、例えばDjangoでは .getlist() を使って取り出す。 request.FILES.getlist("content") ...
  • 【Django】使用頻度の高いカテゴリをプルダウンメニューの上部に表示させる【.annotate(count=Count("topic")).order_by("-count")】

    コードは『Djangoで1対多のリレーションを構築する【カテゴリ指定、コメントの返信などに】【ForeignKey】』の https://github.com/seiya0723/startup_bbs_foreignkey から引用。 モデルが class Category(models.Model): name = models.CharField(verbose_name="カテゴリ名",max_length=20) def __str__(self): return self.name class Topic(models.Model): category = models.ForeignKey(Category,verbose_name="カテゴリ" ...