【jscolor】カラーピッカーを実装できるJavaScriptライブラリ【シンプル】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript ウェブデザイン tips
tips
【Django】検索結果(QuerySet)を結合する【.union()】
クエリビルダでまとめて検索ができない状況下で、検索処理を複数回に分けて実行し、得られたQuerySetを1つにまとめたいとき。 .union() もしくは|が使える。 from django.shortcuts import render,redirect from django.views import View from .models import Topic class IndexView(View): def get(self, request, *args, **kwargs): topics = Topic.objects.all() context = { "topics":topics } # 重複は自動的に除外される topics = topics.union( Topic.objects.all() ) print(topics) first = Topic.objects.filter(id=1) second = Topic.objects.filter(id=2) third = Topic.objects.filter(id=3) # パイプを使用して連結しても良い。 topics = first | second | third return render(request,"bbs/index.html",context) def post(self, request, *args, **kwargs): posted = Topic( comment = request.POST["comment"] ) posted.save() return redirect("bbs:index") index = IndexView.as_view() ...Vimで自動的にインデントする。gg=Gでファイル内の全てをオートインデントする
UbuntuのBash(gnome-terminal)で新しいタブを開き、新しいタブでコマンドを実行する
【Django】管理サイトで1対多(ForeignKey)、多対多(ManyToManyField)のフォームを扱いやすくする【admin】
Javascriptでクリックした時、要素内文字列をクリップボードにコピーさせる
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips ウェブデザイン
よく見かける、JavaScriptでクリックした時、コピーするアレを再現する。 ソースコード <!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> <style> pre { background:black; padding:0.5rem; overflow:auto; position:relative; } pre code { color:#0fc; } .copy_button{ user-select: none; display:inline-block; position:absolute; top:0; right:0; color:white; background:black; cursor:pointer; margin:0.25rem 0.75rem; padding:0.25rem 0.5rem; border:solid 0.1rem white; border-radius:0.5rem; transition:0.2s; } .copy_button:hover{ background:#0fc; color:black; } .copy_button:active{ background:black; color:white; } </style> </head> <body> <pre><code>console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");</code></pre> <script> const pre_elems = document.querySelectorAll("pre"); // コピー用のボタンを配置する。 for (let pre_elem of pre_elems ){ pre_elem.innerHTML += '<span class="copy_button">Copy</span>'; } const copy_buttons = document.querySelectorAll(".copy_button"); for (let copy_button of copy_buttons){ copy_button.addEventListener("click" , (event) => { const code = event.currentTarget.closest("pre").querySelector("code"); if (navigator.clipboard && code){ navigator.clipboard.writeText( code.textContent ); } }); } </script> </body> </html> 結論 ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい ...【シェルスクリプト】git clone した後、クローンしたディレクトリへ移動する
git cloneコマンドを実行してクローンした後、cdコマンドでディレクトリ移動するのがめんどくさい。 そこで、git clone とcd コマンドを1つにまとめたシェルスクリプトを用意した。 #! /bin/bash # $1 https://github.com/seiya0723/django-auth/tree/main/accounts echo $1 # ここでtree以降は切り捨てる。 repo=$(echo "$1" | sed s/tree.*//g) # 移動対象のディレクトリを取り出す。 destination=$(echo ./"$1" | sed "s/tree\/[[:alnum:]_-]*\///g" | sed "s/https:\/\/github.com\/[[:alnum:]_-]*\///g") git clone $repo cd $destination 例えば、特定のディレクトリ(tree/main/accounts)を指定している場合、そのディレクトリへ移動 ...【Django】逆参照のrelated_nameを使用して1側から多側のデータを取り出す【models.ForeignKey()】
【JavaScript】うるう年も考慮した年月日のselectタグを作る【検索時に】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips 上級者向け
前に作った、jQueryの年月日検索の作りが甘かったので、JavaScriptで作り直した。 JavaScript window.addEventListener("load" , () => { // 日付入力欄の初期化。 const now = new Date(); const range = 10; const now_year = now.getFullYear(); const now_month = now.getMonth() + 1; const now_day = now.getDate(); const years = document.querySelectorAll("[name='year']"); const months = document.querySelectorAll("[name='month']"); const days = document.querySelectorAll("[name='day']"); const ini = '<option value="">--</option>'; // スプレッド構文を使用して配列に直し、イベントをセットする。 // 年月日 全ての要素にオプションを追加している。 for ( elem of years){ elem.innerHTML = ini; for (let i=now_year-range;i<now_year+range;i++){ if (i===now_year){ elem.innerHTML += `<option value="${i}" selected>${i}年</optio ...【Django】ログイン時にメールを送信するには、signal.pyを作ってapps.pyに登録しておく【セキュリティ通知】
セキュリティ対策の一環として、ログイン時にメールを送信させる。 すでにsettings.pyにメール送信設定を実装済みとする。 【メール認証】Django-allauthの実装方法とテンプレート編集【ID認証】 appname/signals.py を作る。 関数にデコレータを当てて、ログインの信号を受けたら発動する。 from django.contrib.auth.signals import user_logged_in, user_logged_out from django.dispatch import receiver from django.conf import settings from django.core.mail import EmailMessage @receiver(user_logged_in) def user_logged_in_callback(sender, request, user, **kwargs): # ログインをしたときの処理 #送信元のIPアドレスを手に入れる ip_list = request.META.get('HTTP_X_FORWARDED_FOR') if ip_list: ip = ip_list.split(',')[0] else: ...