自動化無しに生活無し

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

Posts

  • 【Django】モデルを使用したフォームクラスで、required属性を付与する
    モデルを使用したフォームクラスは、モデルの制約に依存する。 そのため、モデルの制約がゆるくても、フォームクラスで引き締めたい場合、別途対策が必要になる。 フォームクラスにrequired属性を付与する class TopicCategoryForm(forms.ModelForm): class Meta: model = Topic fields = [ "category" ] #TODO:categoryの入力を必須化させる def __init__(self, *args, **kwargs): super(TopicCategoryForm, self).__init__(*args, **kwargs) self.fields['category'].required = True コンストラクタをオーバーライドすれば良いそうだ。 参照元: https://stackoverflow.com/questions/44810064/form-required-field-in-django-model-forms ...

  • 【Pandas】DataFrameをループして取り出す【列ごと、行ごとに取り出すにはdf.items()とdf.itertuples()でOK】
    よくあるpandasの行ごと、列ごとにデータを取り出す方法。 環境 Python 3.8.10 numpy==1.23.4 pandas==1.5.1 python-dateutil==2.8.2 pytz==2022.5 six==1.16.0 列ごとにループして取り出す .iteritems()は後のバージョンで廃止される可能性があるので、列ごとのループには.items()を使う import pandas as pd data = {} data["month"] = [ str(i)+"月" for i in range(1,13) ] data["page_view"] = [ i*1000 for i in range(12) ] data["earnings"] = [ i*100 for i in range(12) ] index = [ str(i) for i in range(12) ] df = pd.DataFrame( data, index=index ) ## 列ごとにループする for column_name, item in df.items(): print(column_name) print(item) print(item["0"]) print(item["1"]) print(item["2"]) index ...
    続きを読む

  • OGP(Open Graph Protocol)情報から動画のサムネイル等を抽出する【Python使用】
    例えば、YouTubeなどの動画のURLをTwitterに貼り付けると、自動的にリンク先の動画のサムネイルが表示される。 これはYouTubeのHTMLに含まれるOGPという情報をTwitterが抜き取り、表示しているからだ。 OGPとは HTMLのheadタグに書く、metaタグでproperty="og:image"などの情報が含まれている。 参照: https://ogp.me/ 例えば、下記動画であれば、OG ...
    続きを読む

  • jQueryのオブジェクトをfor~of文でループするとJavaScriptになる問題の対処
    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】
    どうやら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で文字数をカウントする【サロゲートペアと改行コードに注意】
    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 ...
    続きを読む