自動化無しに生活無し

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

tips

  • 【Django】views.pyでユーザーモデルを扱う時は get_user_model を使う
    これまで、ユーザーモデルをimportする時 from django.contrib.auth.models import User もしくは、カスタムユーザーモデルの場合 from users.models import CustomUser などとしてきたが、これでは通常のユーザーモデルから、カスタムユーザーモデル導入時にimport文をすべて書き換える必要が出てくる。 アプリが複数であれば、それをすべて書き換えていくのはとても面倒。 そこで、get_user_model を使う。これにより、カスタムユーザーモデルの転換時のコード編集の手間を減 ...
    続きを読む

  • 【Django】.getlist()でtype="checkbox"のチェックの有無を調べる【複数人の権限の指定に有効】
    背景 とあるプロジェクトを作るとして、複数人のユーザーが紐づくとする。 ユーザーごとに読み込み、書き込み、実行の権限を割り当てて行く必要がある。 これを1回のリクエストで送信するとき、どう実現させるべきか。 問題 .getlist() を使うことで、同じname属性の値をすべて取得することができる。 しかし、type="checkbox"の場合はその限りではない。 例えば、以下のようなフォームの場合。 <form method="POST"> {% csrf_token %} ...
    続きを読む

  • テキストエリアに入力時に、Tabキーを押してタブを入力する【マークダウンやコードの入力に有効】
    直接コードを入力する場合に有効。 <!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> <textarea id="textarea"></textarea> <script> const textarea = document.querySelector('#textarea'); textarea.addEventListener('keydown', function (e) { if (e.key === 'Tab') { // デフォルトの動作（フォーカスの切り替え）を防止 e.preventDefault(); // カーソル位置の前と後を取得 const start = this.selectionStart; const end = this.selectionEnd; // カーソル位置にタブ文字を挿入 const tab = '\t'; this.value = this.value.substring(0, start) + tab + this.value.substring(end); // カーソル位置を調整(タブを入力した後にカーソルを移動) this.selectionStart = this.selectionEnd = start + 1; } }); </script> </body> </html> 動かすとこうなる 半角スペース4文字分にするには？ <!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> ...
    続きを読む

  • DjangoでBootstrapを使う【pip install django-bootstrap-form】
    DjangoのBootstrap関係のライブラリは混在しているので、仕事で使うものを覚書に記録。 pip install django-bootstrap-form をインストールして、INSTALLED_APPSに "bootstrapform" を追加する。 テンプレートで、 {% load bootstrap %} {{ form|bootstrap }} として呼び出す。 ...

  • Django-summernoteでアップロード上限を設定する
    デフォルトで、Django-summernoteにアップロードできるファイルサイズには上限が設定されている。 こちらで上限を開放できる UPLOAD_SIZE = 200 * 1000 * 1000 SUMMERNOTE_CONFIG = { 'attachment_filesize_limit': UPLOAD_SIZE, 'summernote': { 'width': '100%', 'height': '480', } } 参照: https://stackoverflow.com/questions/74588821/how-to-change-file-upload-size-limit-django-summernote ...

  • Django Summernoteを使ったブログで、本文の画像を記事のサムネイルにするには【BeautifulSoup使用】
    Django-summernoteを使ったブログサイトを作るとき。 ブログの記事の一覧表示にはサムネイルの表示が必要になる。 しかし、記事にサムネイル専用のフィールドを割り当ててしまうと、本文の画像とかぶってしまう(サムネイル用の画像を指定した後、記事にも同じ画像を貼り付けるという二度手間) そこで、記事の一番最初に指定された画像をサムネイルとして使えるよう、モデルメソッドを作った。 BeautifulS ...
    続きを読む

  • 【Django】管理サイトで任意のJavaScript、CSSを発動させる【管理サイトのカスタム】
    前提 前もって、プロジェクト直下のtemplatesが作られており、settings.pyのTEMPLATESでもそれが読まれている状況であるとする。 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [ BASE_DIR / "templates" ], 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] 作業 templatesの中にadminディレクトリを作る。 mkdir templates/admin/ templates/admin/base.htmlを作る。内容は下記。 {% extends 'admin/base.html' %} {% block extrastyle %}{{ block.super }} <style> body{ background:orange; } </style> <script>console.log("test;");</script> {% endblock %} これで管理サイトの全ページでC ...
    続きを読む

  • 【Vimでスニペット】snipmateプラグイン
    vim-snipmateはVimのスニペットプラグイン。スニペットとは、コードの断片のこと。このプラグインは、スニペットを即時呼び出して貼り付けできる。 同じようなコードを何度も何度も書くのは大変。だからスニペットプラグインを使用して爆速コーディングを実現させる。 環境はUbuntu22.04より インストール方法 snipmateはtlibとvim-addon-mw-utilsに依存しているので、まとめ ...
    続きを読む

  • JavaScriptのイベントリスナのアロー関数でthisは使わない【event.currentTargetを使おう】
    モダンなJavaScriptに慣れるため、無名関数を書くときにもアロー関数を使い、そしてthisを使おうとすると、意図したとおりにはならない。 アロー関数式とfunction関数ではthisの仕様が異なるからだ。下記ソースコードを元に動作を確かめよう。 <!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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <button class="button" value="1">ボタン1</button> <button class="button" value=" ...
    続きを読む

  • 【CSS】変数を使用する【テーマカラーの統一、スキンの作成などに】
    SCSSなどではなく、素のCSSで変数が使えることに今になって気づいた。 ということで、実際に扱っていく。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Welcome to my portfolio site !!</title> <style> :root{ --base-color: #111111; --theme-color: #00ffcc; --font-color: white; } body { background:var(--base-color); color: var(--font-color); margin:0; } h1 { background: var(--theme-color); } </style> </head> <body> <h1>Welcome to my portfolio site !!</h1> <h2>Profile</h2> <h2>Portfolio</h2> </body> </html> :root{}で宣言した変数 --base-color等がプロパティの値として呼び出すことができる。 予めテーマカラーなどをまとめて冒頭に書いておけば、それを書き換えるだけですぐに対応できる。 この変数 ...
    続きを読む