Posts
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/ ...vimの操作方法
Djangoでクエリビルダを使い、スペース区切りの文字列検索と絞り込みを同時に行う【JSとカスタムテンプレートタグを使用】
カスタムテンプレートタグはJavaScriptにとって変えることもできるが、今回はあらゆる状況を考慮し、両方使用した。 ビュー from django.shortcuts import render from django.views import View from django.db.models import Q from .models import Category,Product from .forms import CategorySearchForm,ProductMaxPriceForm,ProductMinPriceForm class IndexView(View): def get(self, request, *args, **kwargs): context = {} query = Q() context["categories"] = Category.objects.order_by("-dt") #検索キーワードあり if "search" in request.GET: search = request.GET["search"] raw_words = search.replace(" "," ").split(" ") words = [ w for w in raw_words if w != "" ] for w in words: query &= Q(name__contains=w) #カテゴリ検索ありの時、queryに追加する。 form = CategorySearchForm(request.GET) if form.is_valid(): cleaned = form.clean() query &= Q(category=cleaned["category"]) #金額の上限 form = ProductMaxPriceForm(request.GET) if form.is_valid(): cleaned = form.clean() query &= Q(price__lte=cleaned["max_price"]) #金額の下限 form = ...FFmpegを使ってUbuntuサーバーにUSBで接続されたウェブカメラで映像を録画する
Ubuntu 22.04 Server ハードはラズパイ3B+ インストール FFmpegとv4l2-utilsをインストール sudo apt install ffmpeg v4l-utils デバイスを特定する v4l2-ctl --list-devices こんなふうに表示される(一部省略) BUFFALO BSWHD06M USB Camera : (usb-3f980000.usb-1.4): /dev/video0 /dev/video1 /dev/media3 対応しているフォーマットと解像度を特定する ffmpeg -f v4l2 -list_formats all -i /dev/video0 こんなふうに表示される(一部省略) [video4linux2,v4l2 @ 0xaaaad7c25420] Raw : yuyv422 : YUYV 4:2:2 : 1280x720 800x600 640x480 640x360 352x288 320x240 176x144 160x120 [video4linux2,v4l2 @ 0xaaaad7c25420] Compressed: mjpeg : Motion-JPEG : 1280x960 1280x720 800x600 640x480 640x360 352x288 320x240 176x144 160x120 映像を録画する ffmpeg -f v4l2 -framerate 30 -video_size 352x288 -i /dev/video0 output.mkv 後はこの映像をscpなどでDLして ...【Ubuntu】netplanに無線LAN(wifi)で固定IPアドレスを割り当てる
有線であれば以下のように書く。 network: ethernets: eth0: dhcp4: false addresses: - 192.168.11.246/24 routes: - to: default via: 192.168.11.1 nameservers: addresses: - 192.168.11.1 version: 2 無線LANの場合、ip addrで表示される無線LANのデバイス名を控えた上で下記のように記す network: wifis: wlan0: dhcp4: false addresses: - 192.168.11.246/24 routes: - to: default via: 192.168.11.1 nameservers: addresses: - 192.168.11.1 access-points: "SSIDname": password: "password" version: 2 ...nanoエディタの操作方法
【CSS3】チャットのウェブデザインを作る
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> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="container"> <div class="mine_speech_bubble_area"> <div class="speech_bubble"></div> </div> <div class="others_speech_bubble_area"> <div class="speech_bubble"></div> </div> </main> </body> </html> Django用のHTML {% for topic in topics %} <div class="{% if topic.user.id == request.user.id %}mine{% else %}others{% endif %}_speech_bubble_area"> <div class="speech_bubble">{{ topic.comment|linebreaksbr }}</div> </div> {% endfor %} CSS .mine_speech_bubble_area{ text-align:right; } .others_speech_bubble_area{ text-align:left; } .mine_speech_bubble_area .speech_bubble { /* 自分が送った時は右下の角をつける */ background:lime; border-bottom-right-radius:0; } .others_speech_bubble_area .speech_bubble { /* 相手が送った時は左上の角をつける */ background:silver; border-top-left-radius:0; } .speech_bubble{ text-align:left; word-break:break-all; display:inline-block; max-width:80%; padding:0.5rem; margin:0.5rem 0; border-radius:1rem; } 動かすとこうなる。 ...