MX MASTER 3sを買いました

腱鞘炎のため今まで、Logicool Liftを使っていました。
1年使ったので、新しいマウスを触りたいなと思いました。

そこで買ったのがMX MASTER 3sです。

Liftほどではないですがエルゴノミクス形状になっています。
使ってみたら、私的にはMX MASTER 3sの方が手が疲れませんでした。
サムホイールもデスクトップを切り替えるのがとても楽になりました。
一つ不満な点は、ホイールが気持ちよく回るフリースピンにしていたのですが、Smooth Scrollがガクガクしていました。
そこで、ScrollScroll Macをインストールしました。

www.smoothscroll.net

これで、完全に滑らかにスクロールできるようになりました。
しかし、マウス設定のソフトが3つ存在することになりました。

  • システム設定
  • Logicool Options+
  • SmoothScrool Mac

このことで、スクロールの動作が自然または標準に設定しづらくなりました。
スクロールを標準にした上で、サムホイールによるデスクトップ切り替えをスマホと同じようなスワイプ方向にしたかったです。
結果として、設定は以下の通りになりました。
作業がだいぶ快適になってよかったです。

自動データ収集ツールの実装 - Node.jsの学習4

  • スクレイピングとは
    • ブラウザで画面が表示されるまで
    • HTMLとは
  • 準備
  • Playwrightを使用する
    • Locatorで取得したい要素を特定する
    • Locatorの詳しい使い方
    • デバッグでコードを確認する
    • UIイベントをスクリプトで記述する
      • textContentとinnerTextの違い
    • ファイルへの書き込み処理
    • CSV形式でデータ保存
    • CSVに追加情報を書き込む
  • Google Spread Sheetの操作
    • Google Cloud初期設定
    • 【重要】Sheetのアクセスに必要な設定
    • セルの値の取得
    • .envを読み込んでいるコードのデバッグ方法
    • 環境変数を.envファイルに抽出
    • エラーが発生時の処理(例外処理)を記述
    • セルの書き込み
    • 行の追加
    • 行の更新
    • スクレイピングをSheetにまとめる
  • cron(スケジューラー)の使い方
    • スケジューリング(定期実行)の手法
    • 定期実行の結果をEmailで送信してみよう
    • スクレイピング→シート書込み→メール送信

スクレイピングとは

ブラウザで画面が表示されるまで

(要求されたデータを受信 - レスポンス)
サーバー
  ⇅
ブラウザ
(欲しい情報を要求 - リクエスト)

ブラウザがHTMLを解析して画面を作成.
データ: HTML, CSS, JavaScript, 画像など

HTMLとは

Webページの構造をタグを使って定義する書き方
タグごとに意味が異なる

  • h1~6 -> ページの見出しに使う
  • p -> 文章等に使う
  • a -> リンクを貼る時に使う
  • img -> 画像を挿入するときに使う
続きを読む

Node.jsでJSONファイルをrequireを使わず読み込みたい

方法

ES Modulesでrequireを使用してJSONファイルを読み込んでいたので、どうにかimportに統一したいと思いました。 調べてみると、fsモジュールのreadFileメソッドで出来るみたいです。

// require
import { createRequire } from "module"
const require = createRequire(import.meta.url)
const secrets = require("../../../google_secrets.json")

// import
import { readFile } from "fs/promises"
const secrets = JSON.parse(await readFile("./google_secrets.json"))

console.log(secrets.private_key)

無事読み込めました。 統一できて気持ちよかったです

参考にさせていただいた記事

iwb.jp

www.geeksforgeeks.org

Node.js バージョン管理 比較表

比較表

Tool macOS Linux (WSL) Windows スター数 (k) バージョン管理
ファイル
プロジェクト
切替
特徴 最終リリース日
nvm 71.6 .nvmrc スタンダード 2023-08-22
asdf 19 .tool-versions 複数言語の管理 2023-09-13
n 18.1 .nvmrc
.node-version
.n-node-version
macOSで導入しやすい 2023-10-15
fnm 13.9 .nvmrc
.node-version
処理速度が速い(Rust製) 2023-08-16
Volta 9 package.json 処理速度が速い(Rust製) 2023-06-25
nodenv 2.1 .node-version anyenv + nodenvの方が多い 2023-02-19
nodebrew 1 なし macOSで導入しやすい 2022-03-19

参考にさせていただいた記事

qiita.com

zenn.dev

zenn.dev

npmによるパッケージ管理 - Node.jsの学習3

  • npm(Node Package Manager)とは
  • なぜnpmが必要なのか
  • パッケージが読み込まれる流れ
  • package.jsonの中身
  • dependeciesとdevDependenciesの違い
  • npm installとバージョン
  • npm scriptの基礎
  • パッケージをscriptsに登録する
  • ローカルパッケージとグローバルパッケージの違い
  • パッケージを跨いだ開発方法
    • npm link を使う
    • dependencies に直接追記する

npm(Node Package Manager)とは

Node.js上で使用するパッケージを管理するツール
コマンド一つでパッケージのインストール、削除、更新が可能

なぜnpmが必要なのか

それぞれのライブラリをダウンロードしていたら、管理に手間が掛かるため

npm install lodash
import _ from "lodash"

const original = { prop: { nested: "value" } }

// オブジェクトの複製
const cloned = _.cloneDeep(original)
// 複製なので値を書き換えても元の値には影響しない
cloned.prop.nested = "new value"

console.log(original, cloned)
// { prop: { nested: 'value' } }
// { prop: { nested: 'new value' } }
続きを読む

WSLのUbuntu上でbashのプロンプトをカスタマイズ

目標

bashで時間とディレクトリを改行しながら表示したい

zenn.dev

経過

上記の記事を参考にカスタマイズしていたら、表示が崩れました。

PS1='\n\e[32m[\u@\h] \e[35m\t \n\e[36m\w \n\e[0m\$ '

bashの履歴を見ると、4文字余計に表示される。

[user@host] 22:37:17
~
$ sourvi ~/.bashrc

解決

miau.hatenablog.com

上記の記事を参考に修正しました。

PS1='\n\[\033[32m\]\ek\e\\\][\u@\h] \[\033[35m\]\t\n\[\033[36m\]\w\n\[\033[0m\]\$ '
[user@host] 22:37:59
~
$ vi ~/.bashrc

はてなブックマークをカスタマイズする拡張機能を公開しました

chrome.google.com

追加機能一覧

はてなブックマークを閲覧しやすく、フィルター機能を追加します。

  • フィルター機能の追加

    • 指定したワードで、タイトル・概要・タグ・URL を対象にフィルタリング
    • 関心ワードのページもフィルタリング
  • 表示変更

    • メニューのカテゴリ一覧をホバー時に表示
    • 記事のサムネイルをホバーすると、概要を表示
    • 関心ワードの下部ページを自動で読み込むように
  • キーボードショートカットの追加

    • [J] / [K] : 記事をフォーカス
    • [O] : 新しいタブで開く(フォアグラウンド)
    • [Alt] + [O] : 新しいタブで開く(バックグラウンド)
    • [Alt] + [J] / [K] : 次/前のページに移動
  • 更新情報

    • Ver1.0.6 関心ワードのURLでフィルタリングするように修正.

フィルタ機能は、タイトルだけでなく概要も対象にしています。
効率よく情報を閲覧できるようになるので、ぜひ使ってみてください。