自動化無しに生活無し

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

  • 【Selenium】webdriver-managerを使ってPythonコードからChromeドライバーをインストールする

    前もってwebdriver-managerをインストールしておく。 pip install webdriver-manager 下記コードでChromeドライバーが簡単にインストールできる。 from selenium import webdriver from selenium.webdriver.chrome.service import Service from webdriver_manager.chrome import ChromeDriverManager driver = webdriver.Chrome(service=Service(ChromeDriverManager().install())) driver.get("https://www.google.com/") どうやらvirtualenvではなくOSに直インストールされるようだ。 ...
  • 【ReactNative + Expo】スマホアプリでHelloWorldをやってみる【iOS、Android両対応】

    ReactNativeを使うことで、スマホアプリが簡単に作れる。 今回はExpoというReactNativeの開発をサポートするフレームワークを使う。 これにより、iOSとAndroid両方に対応したスマホアプリを更に簡単に作ることができる。 流れ Expoをインストールする Expoを使ってプロジェクトを作る スマホにExpo Goをインストールする(デバッグ用) ビルドサーバーを立ち上げ、Expoアプリから読 ...
  • 【Wordpress】日本語タイトルで404になる問題はパーマリンクを修正して日本語URLをやめる

    • 作成日時:
    • 最終更新日時:
    • Categories: others
    • Tags: Wordpress tips
    Wordpressをインストールして、日本語タイトルの記事を追加すると、このように、404 Not Foundになってしまう。 こういう時は、URLに日本語が含まれているからエラーになってしまう。パーマリンクを修正すると良いだろう。 デフォルトではカスタム構造になっているので、日本語が混ざると404になることがあるようだ。 ...
  • 【React】Typescript仕様のReactアプリを作る

    TypeScriptとは TypeScriptを使うことで、変数を宣言する際に型を定義する事ができる。 例えば、予め文字列型で定義した変数に対しては、文字列型以外を入れると、エラーが起こる。 let message: string = "こんにちは"; console.log(message); message = "おはよう"; console.log(message); //ここでエラーが起こる。 message = 0; console.log(message); 配列内の変数を取り決めたい場合、<>の中に型名を入れるジェネリクス(Generic ...
  • 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する

    Reactでは、Stateを使ってウェブアプリの状態を管理することができる。コンポーネントに対して引数を与えるにはPropsを使えば良い。 しかし、だからといって親コンポーネントで定義したStateを、Propsで子コンポーネントに引き渡すのは良くない。 このようなコンポーネントの階層が深い場合、無駄なPropsの受け渡しが発生してしまうからだ。 この問題を防ぐために、グローバルなStateを作る。グロ ...
  • Ubuntu 22.04 LTS でTakaoフォントをインストールして行間を詰める。

    • 作成日時:
    • 最終更新日時:
    • Categories: インフラ
    • Tags: Ubuntu tips
    Ubuntu22.04にて日本語版を使用していると、これまでのUbuntuと違って、ターミナルの行間が異常に広いことがわかる。 理由はTakaoフォントがデフォルトでインストールされていないから。 ここからインストールできる。 インストールが完了すると、このように22.04でも行間を狭くできる。 Firefox にて規定に戻す ただ、これだけだと、Firefoxの行間と文字サイズが小さくなってしまうので、 Firefox のフォント指定 ...
  • 【React】Props、State(useState)、useEffectなどの概念の解説

    ここではReactの基本的な概念であるProps、Stateについて扱う。 Props Propsを使うことで、コンポーネントの関数を呼び出す時、引数を与えることができる。 例えば、App.jsxとcomponents/HeaderContent.jsxがある。 App.jsxを以下のようにする。 import { HeaderContent } from "./components/HeaderContent"; export const App = () => { const message = "Hello!!"; return ( <> <HeaderContent /> </> ); } HeaderContent.jsxを以下とする。 export const HeaderContent = () => { const header_color = ...
  • 【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とライブラリのバージョン、ブラウザなどをまとめる ...