自動化無しに生活無し

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

Posts

  • JavaScriptで文字数をカウントする【サロゲートペアと改行コードに注意】
    JavaScriptで文字数をカウントするシーンはよくある。 例えば、テキストエリアに入力した時、入力された文字数を表示させたりする。 これで、最大文字数まであとどれだけ入力できるのかわかる。 ソースコード 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://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </head> <body> <textarea id="textarea"></textarea> <div><span id="counter"></span>文字入力</div> </body> </html> JavaScript window.addEventListener("load" , function (){ $("#textarea").on("input", function(){ //改行は1文字に含まない ...
    続きを読む

  • EasyTimer.jsを使ってストップウォッチとタイマーを作る
    以前、下記記事でストップウォッチとタイマーを作ったが、 JavaScript(jQuery)でストップウォッチとタイマーを作る【勉強や運動の記録などに】 使いにくい。 だから、タイマーとストップウォッチのライブラリを実装する。 かなり軽量で、イベントのセットもできるEasyTimer.jsを使う。 ストップウォッチの実装 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ストップウォッチ</title&g ...
    続きを読む

  • 【Chart.js】棒グラフと折れ線グラフの複合型で、左右の横軸にタイトルと目盛を表示
    注意 Chart.jsには後方互換性が無い。 本記事で解説しているChart.jsのバージョンは3.7.1であり、それ以前のバージョン、もしくはそれ以降のバージョンでは正常に動作しない場合があるのであしからず。 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"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!--chart.jsのCDN--> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> <script src="script.js"></script> </head> <body> <h1 class="bg-primary text-white">Chart.jsのサンプルコード</h1 ...
    続きを読む

  • Tempermonkeyを使ってGitHubのリポジトリ削除を簡単にする。
    GitHubのリポジトリを作りすぎた。 順次消していこう。 そういう時、こういうダイアログが出てくる。 この確認の入力作業がめんどくさい。 確認するまでもなく、すぐにリポジトリを削除したい時、Tempermonkeyを使ってこの入力作業をスキップしていく。 コード // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://github.com/[ここにGitHubのユーザー名を]/* // @icon https://www.google.com/s2/favicons?sz=64&domain=github.com // @grant none // @require http://code.jquery.com/jquery-3.4.1.min.js ...
    続きを読む

  • Ubuntu、WindowsにSeleniumで使用するFirefox用のgeckodriverをインストールする【Python】
    Seleniumとは？ Seleniumとは、ウェブブラウザの操作を自動化するツールのひとつ。 とりわけ、Pythonライブラリとしても提供されている。(JavaやRuby用のライブラリもある。) つまり、Seleniumを使えば、Pythonでブラウザの操作を自動化できる。 必要な物は？ Seleniumを使ったブラウザの自動化に必要な物は以下の4つ Pythonのコード SeleniumのPythonライブ ...
    続きを読む

  • 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のアップグレード時の設定を置き換えてはいけない
    Ubuntuアップグレード時、こんなダイアログが表示されることが有る。 この設定の置き換えをしてしまうと、新しい設定ファイルに置き換えられ、これまで書いてきた設定ファイルは全て消えてしまう。 これまでの設定ファイルを残しておきたいのであれば、『そのまま』を選ぶ。 このダイアログの選択肢を誤るとcrontabやvimの設定も消えてしまうので、十分注意する。 ...

  • 【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. これはなぜか。どう対策をすれば良いのかをまとめてみた ...
    続きを読む