Posts
jQueryのオブジェクトをfor~of文でループするとJavaScriptになる問題の対処
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript jQuery tips アンチパターン
for~of文を使ってjQueryのオブジェクトをループすると、JavaScriptのオブジェクトになる。 その対策をまとめておく。 jQueryループ時の問題 <!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> <div class="test">1</div> <div class="test">2</div> <div class="test">3</div> <div class="test">4</div> <script> let elems = $(".test"); //この時点ではjQueryのオブジェクトになっている。 console.log(elems); for (let elem of elems){ //for of文で取り出すと、JavaScriptのオブジェクトになっている。 console.log(elem); //jQueryのオブジェクトだと思ってjQ ...【Python】正規表現モジュールreでパターンに一致した文字列を全て取り出す・全て置換する
正規表現は普段から使っていないと、いざという時にどうなってたっけってなる。 だから備忘録としてまとめておく。 とりわけ、Pythonの正規表現モジュールreのメソッドはいろいろあるので、実用的な物に絞っておく。 全て取り出す 返り値はリスト型で出る。 import re target = "n1o2a3u4t5o-6n7o8li9f0e9.com" #数値を取り出す result = re.findall(r'\d', target) if result: print(result) #取り出した数値を連結する。 print("".join(result)) else: print("マッチなし") 全て置換する import re target = "n1o2a3u4t5o-6n7o8li9f0e9.com" print(target) #数値を置換す ...【Ubuntu】tesseractをインストールして、Pythonから画像の文字起こし(OCR)を試す【pytesseract】
環境 Ubuntu 20.04 Python 3.8.10 Tesseract Open Source OCR Engine v4.1.1 with Leptonica 今回使用したPythonライブラリ packaging==21.3 Pillow==9.2.0 pyparsing==3.0.9 pytesseract==0.3.10 UbuntuへTesseractのインストール sudo apt install tesseract-ocr libtesseract-dev libleptonica-dev tesseract-ocr-jpn tesseract-ocr-jpn-vert tesseract-ocr-script-jpan tesseract-ocr-script-jpan-vert 日本語のOCRもできるように訓練済みのデータもインストールしている。 tesseract-ocr-jpn tesseract-ocr-jpn-vert tesseract-ocr-script-jpan tesseract-ocr-script-jpan-vert Tesseractの動作確認 以下画像をdjango.pngと名付けて解析してみる。 tesseract django.png output -l jpn ファイルはoutput.txtに出力される。出力結果はこうなった。 以下、流れ。 1. プロジェクトを作 ...DjangoでPythonライブラリのマークダウンを試してみる【pip install Markdown】
- 作成日時:
- 最終更新日時:
- Categories: サーバーサイド
- Tags: Django Pythonライブラリ ウェブデザイン マークダウン
どうやらPythonライブラリにマークダウンを実現させるライブラリがあるそうだ。これがDjangoで扱えるらしい。 かなり前から、どうにかしてDjangoでマークダウンを実現できないかと考えていたが、ようやく見つかって良かった。 さっそく試してみる。 インストール pip install Markdown バージョンはこうなった。 importlib-metadata==5.0.0 Markdown==3.4.1 zipp==3.9.0 動かすとこうなる このマークダウンを読み込み、HTMLに変換してもらう。 ## Pythonの構文 ``` for i in range(6): print(i) print("hello") print("hello") ...JavaScriptで文字数をカウントする【サロゲートペアと改行コードに注意】
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript tips ウェブデザイン
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を使ってストップウォッチとタイマーを作る
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: JavaScript JavaScriptライブラリ ウェブデザイン
以前、下記記事でストップウォッチとタイマーを作ったが、 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】棒グラフと折れ線グラフの複合型で、左右の横軸にタイトルと目盛を表示
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: chart.js JavaScript JavaScriptライブラリ
注意 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のリポジトリ削除を簡単にする。
- 作成日時:
- 最終更新日時:
- Categories: フロントサイド
- Tags: tempermonkey JavaScript jQuery 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やMacにはない〇〇がある