Posts
Ubuntuにbeepコマンドをインストール【crontabで時報を作る】
インストール sudo apt install beep 動かす -fは周波数つまり音の高さ、-lはミリ秒指定で音の長さを指定できる。 beep -f 5000 -l 2000 動かないとき 下記コマンドを実行、 sudo vi /etc/modprobe.d/blacklist.conf これを # ugly and loud noise, getting on everyone's nerves; this should be done by a # nice pulseaudio bing (Ubuntu: #77010) blacklist pcspkr こうする。 # ugly and loud noise, getting on everyone's nerves; this should be done by a # nice pulseaudio bing (Ubuntu: #77010) #blacklist pcspkr そして、読み込み直す。 sudo modprobe pcspkr crontabで1時間おきにbeepを鳴らす。 時報として使う事ができる。動かすのは8時から18時まで 00 8-18 * * * user beep -f 880 -l 300 ...【Django】ManyToManyFieldにはフィールドオプションvalidatorsは効果なしなので、フォームクラスに追加のバリデーションを【多対多は特殊】
ManyToManyFieldにはvalidatorsフィールドオプションは通用しない。 そのため、モデル側から何らかの制約を課すことはできない。 だから、フォームクラスに追加のバリデーションを書き込む。 今回はManyToManyFieldのタグを2個までとするバリデーションを追加する。 モデル from django.db import models from django.conf import settings from django.utils import timezone class Tag(models.Model): name = models.CharField(verbose_name="タグ名 ...Ubuntuのアップグレード時の設定を置き換えてはいけない
【Django】ManyToManyFieldで検索をする方法、追加・削除を行う方法【多対多はクエリビルダの検索は通用しない】
背景 TopicとTagの多対多のリレーションを組んだ状況で。 # この場合、1を含んでいるという意味になる data = Topic.objects.filter(tag=1) print(data) # この場合、1もしくは3を含むデータが手に入るが、重複する。.distinct() で除外できる。 # しかし1だけ、3だけのデータも取得できてしまう。ほしいのは1と3を含むデータ data = Topic.objects.filter(tag__in=[1,3]).distinct() print(data) 複数のタグ検索が正常に機能してくれない状況にある。(1だけ、3だけではなく、1と3を含んだデータのみがほしい ...【Django】Django4.0以上はsettings.pyにて、CSRF_TRUSTED_ORIGINSにオリジンを指定しないとPOSTリクエスト時に403Forbiddenになる
背景 下記記事に倣って、EC2に独自ドメインを指定して、デプロイを完了させた。 【AWS】EC2にムームドメインで取得した独自ドメインを割り当て、HTTPS通信を行う【Route 53 + Certificate Manager + ロードバランサ(ELB)】 その後、POSTメソッドのリクエストを送信する際、どう頑張ってもCSRF検証に失敗したというエラーが出てしまう。 CSRF Failed: Referer checking failed - https://*********************.com does not match any trusted origins. これはなぜか。どう対策をすれば良いのかをまとめてみた ...【Django】パスコンバータ(URLに含まれた引数)を使って個別ページを表示させる
rtcwakeコマンドを動かす【指定時間後に復帰、WOLが使えない時に】
【JavaScript】動的に要素が変化した時に何か処理をさせたいならMutationObserverを使う
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript jQuery フロントサイド
例えば、特定の要素内のHTMLがJavaScriptの処理によって変わった時。 こんな時に何か処理を実行したい場合、MutationObserverを使うと良い。 ソースコード //特定の要素が動的に変化した時、何らかの発動させる let body = document.getElementsByTagName('body')[0]; let target = new MutationObserver(function(){ detail_sortable() }); target.observe(body, { "childList":true,"subtree":true }); 結論 例えば、Ajaxが発動して、ページがレンダリングされた時に何かを発動させることができる。(Ajaxのdoneの時に処理を書くという方法もあるが ...JavaScriptで並び替えをするならSortable.js【jQuery不要のライブラリ】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript ウェブデザイン JavaScriptライブラリ
CDN <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> HTML <!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://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script> </head> <body> <div class="sort_area"> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">1</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">2</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">3</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">4</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">5</div> <div class="sort_item" style="background:orange;padding:0.5rem;margin:0.5rem;">6</div> </div> <script> const sort_areas = document.querySelectorAll(".sort_area"); for (let area of sort_areas ){ new Sortable(area, { animation: 150, ghostClass: 'dragging', onEnd: function(){ console.log("ソート完了") }, }); } </script> </body> </html> 動かすとこうなる 結論 ソート終了時、onEndで何か処理を実行する事ができる。例えば、Ajaxとか。 ドラッグ中にクラスを割り当てる事ができるので、色を変えるとか色々できると思う。 詳細は公式にて。 https://sortablejs.github.io/Sortable/ ...