自動化無しに生活無し

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

Posts

  • 【React】component(コンポーネント)の仕組み
    Reactではindex.jsを読み込むことで動作するが、全てをindex.jsに書いてしまうとindex.jsのコード行数が尋常ではなくなる。 故に、コンポーネントを使用してコードの一部を別ファイル化させる。 コンポーネントの構造 まずsrc内に以下がある。 App.jsxとindex.jsである。 App.jsxはコンポーネントのファイルである。見分けが付きやすいように拡張子を.jsxとしている。ind ...
    続きを読む

  • 【React】Helloworldの仕組みの解説
    勉強途中で書いているものなので、やや間違いがあるかも Reactの内部構造 srcに書かれたJavaScriptを発動させ、指定した内容を、publicにあるindex.htmlへレンダリングする。 プロジェクトを作ってHelloWorldまで プロジェクトを作る。 create-react-app myproject cd myproject 以下コマンドで、プロジェクトを起動させる。 npm start index.jsを作る srcディレクトリ内のファイルを全て削除して、新しくindex.j ...
    続きを読む

  • 【Selenium X Python】フォーム入力やクリックをする時は明示的な待機をする【Webdriverwait】
    Seleniumでブラウザ操作の自動化をする時、クリックやフォーム入力などは頻繁に行われる。 だが、それがもしtimeモジュールを使用した暗黙的待機の場合、動作に再現性はなく、たびたび不具合に見舞われるだろう。 本記事では、再現性を高めるため、明示的な待機を行うWebdriverwaitを使用したクリックとフォーム入力を行う。 前提 使用しているPythonとライブラリのバージョン、ブラウザなどをまとめる ...
    続きを読む

  • 【chart.js】グラフを4分割して、任意のグラフを作り直して再表示させる【myChart.destroy()】
    ソースコード 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="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script> <script src="script.js"></script> <style> body{ margin:0; } </style> </head> <body> <section style="width:90%;margin:auto;"> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph1"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph2"></canvas> </div> </div> <div style="display:flex;"> <div style="position:relative;width:50%;"> <canvas id="graph3"></canvas> </div> <div style="position:relative;width:50%;"> <canvas id="graph4"></canvas> </div> </div> </section> </body> </html> JavaScript window.addEventListener("load" , function (){ let id_list = [ "graph1","graph2","graph3","graph4" ]; for (let id of id_list){ const ctx = document.getElementById(id).getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] }, options: { scales: { y: { beginAtZero: true } } } }); if (id === "graph3"){ //予め作ったグラフをデストロイする。 myChart.destroy(); //その上で既に作られたグラフに後からデータを入れてみる。(mychartはconstなので、代 ...
    続きを読む

  • 【chart.js】円グラフで大きい順、小さい順に並び替える【JavaScriptの.sort()】
    【前提】JavaScriptで並び替えをするには.sort()を使う これで並び替えができる。 let numbers = [12,67,47,223,84,5,1,7,8,365]; console.log(numbers); numbers.sort( function (a,b){ return a-b; }); console.log(numbers); モダンな書き方に修正する だが、待ってもらいたい。これでは、並び替え処理を実行する前のnumbersも並び替えの影響で、内容が変わってしまっている。 これを防ぐために、スプレッド構文を使って配列をコピーする。 さらに、アロー関数を使えば、更に短く書くことができる。 この2点を考慮すると、この ...
    続きを読む

  • 【Django】DurationFieldのフォームの最適解を考えてみる【JSを使うか、Django側で制御するか】
    勉強した時間やトレーニングした時間を入力することができる、DjangoのDurationField。 これは、日付や日時の入力とは異なるため、flatpickrは通用しない。 そのため別途フォームの作成を考慮する必要がある。 普通のinputタグtype=“text"のフォーム これでは:を入力しないといけないので、入力がめんどくさい。 selectタグを使ったフォームに書き換える。 そ ...
    続きを読む

  • コマンド一発で動画をmp3に変換する
    .mkv動画 → .mp3 find . -type f -name "*.mkv" -print0 | perl -pe 's/\.mkv\0/\0/g' | xargs -0 -I% ffmpeg -i %.mkv -acodec libmp3lame -ab 256k %.mp3 .mp4動画 → .mp3 find . -type f -name "*.mp4" -print0 | perl -pe 's/\.mp4\0/\0/g' | xargs -0 -I% ffmpeg -i %.mp4 -acodec libmp3lame -ab 256k %.mp3 .webm動画 → .mp3 find . -type f -name "*.webm" -print0 | perl -pe 's/\.webm\0/\0/g' | xargs -0 -I% ffmpeg -i %.webm -acodec libmp3lame -ab 256k %.mp3 結論 よく使うので、備忘録として。 ...

  • 【BeautifulSoup】imgタグをスクレイピングして画像をダウンロードする
    DoS攻撃になってしまうので、ダウンロードのたびに1秒待つようにしたほうが良いだろう。 import requests,bs4,time result = requests.get("https://noauto-nolife.com/") soup = bs4.BeautifulSoup(result.content, "html.parser") elems = soup.select("img") count = 0 for elem in elems: url = elem.get("src") result = requests.get(url) #バイナリで書き込み with open(str(count)+".png", "wb") as f: f.write(result.content) count += 1 #1秒待機する(DoS攻撃になってしまうため) time.sleep(1) ...

  • 【BeautifulSoup】属性を取得する【class,src,valueなど】
    BeautifulSoupにて、属性を取得する。 import requests,bs4 result = requests.get("https://noauto-nolife.com/") soup = bs4.BeautifulSoup(result.content, "html.parser") elems = soup.select("img") for elem in elems: #src属性を取得(文字列型) print(elem.get("src")) #alt属性を取得(文字列型) print(elem.get("alt")) #属性値が複数なら、リストで取得できる print(elem.get("class")) #存在しない属性はNoneが返ってくる print(elem.get("hoge")) ...

  • Ubuntuにreactをインストールして動作確認する
    Ubuntu20.04にインストールしている npmのインストール sudo apt install npm reactのインストール sudo npm -g install create-react-app バージョンの確認 create-react-app --version プロジェクトを作り、開発用サーバーを起動する create-react-app myproject プロジェクトを作る。 cd myproject npm start 開発用サーバーを起動すると自動的にブラウザが立ち上がる。127.0.0.1:3000が表示される。 src/App.jsを下記のように修正するとHelloWorldが表示される。 import React from 'react'; const App = () => { return ...
    続きを読む