2024-03-01

はてなブックマークの表示を変えたい（２）

WEB

前回の続き

ちょっとCSSいじりました。

カテゴリとドメイン名をタイトルの左に移動
日時とタグ非表示
ガタガタしてたので幅調整など。

#entrylist-ad-right-top {
    position: absolute;
    right: 0;
    z-index: 1;
    top: 32px;
}

.entrylist-wrapper {
    width: 100%;    
}

.entrylist-contents-title {
    min-height: 0px;
    width: 400px;
    order: 2;
    padding: 0;
    margin: 0;
}

.entrylist-header-main .entrylist-image-entry .entrylist-contents-title {
    padding-right: 0;    
}

.entrylist-contents-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: small;
}

.entrylist-item {
   width: 100%;    
}

.entrylist-header-main, .entrylist-item>li {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
}

.entrylist-contents-body {
    max-width: 60%;
}

.entrylist-item .entrylist-image-entry .entrylist-contents-description, .entrylist-contents-description {
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

.entrylist-contents-thumb{
    display:none;
}

.entrylist-contents-main {
    padding: 4px;
    flex-direction: row;   
}

.entrylist-contents-users {
    display: inline;
    text-transform: none;
    font-size: medium;
    right: auto;
}

.entrylist-contents-users a {
   display: inline;    
}

.entrylist-contents-users span {
    font-size: 14px;
}

.entrylist-contents-domain, .river-placement .entrylist-contents-domain {
    width: 130px;
    padding: 0.8rem 0 0 0.2rem;
    order: 1;
}

.entrylist-contents-meta {
    padding: 0;
    order: 0;
    width: 100px;
}

.entrylist-contents-meta li {
    margin-top: 20px;
}

.entrylist-contents-date {
    display: none;
}

.entrylist-contents-tags {
    display: none;
}

おまけ

特定のドメインの記事は見えなくしたい場合。

例として匿名ダイアリーを非表示にしたい場合。

li.js-keyboard-selectable-item:has(a[href="/site/anond.hatelabo.jp/"]) {
    display:none;
}

2024-03-01

はてなブックマークの表示を変えたい（１）

WEB

はてなブックマークをPCのブラウザで見ると、1行に4つの記事が表示されていて、見るときに視線を左右に移動させないといけないのがちょっとつらい。

はてなブックマーク

1行1記事で基本上から下にだけ視線を移動させれば良いようにしたい。

ということでCSSを無理やり当てて表示を変更してみました。

ちょっとまだガタガタしている部分もありますが、気が向いたら直します。

やり方

StylusっていうChrome Extentionを使用しました。(Firefoxにもあります)

特定のサイトのCSSを上書きできるブラウザ拡張は他にもあるのでお好みのものをどうぞ。

CSS

.entrylist-wrapper {
    width: 100%;    
}

.entrylist-contents-title {
    min-height: 0px;
    width: 400px;
}

.entrylist-contents-title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: small;
}

.entrylist-item {
   width: 100%;    
}

.entrylist-header-main, .entrylist-item>li {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
}

.entrylist-contents-body {
    width: 50%;    
}

.entrylist-item .entrylist-image-entry .entrylist-contents-description, .entrylist-contents-description {
    text-align: left;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin-bottom: 0;
}

.entrylist-contents-thumb{
    display:none;
}

.entrylist-contents-main {
    padding: 4px;
    flex-direction: row;   
}

.entrylist-contents-users {
    text-transform: none;
}

.entrylist-contents-users span {
    font-size: 10.5px;
}

.entrylist-contents-domain {
    padding: 0;   
}

.entrylist-contents-meta {
    padding: 0;
}

.entrylist-contents-tags {
    max-width: 200px;
    padding: 0;
}

余談

昔々は本家はてなブックマークも1行に1記事でした。

で。それが今の表示に変わってから元の行表示がほしいユーザーがいて、その人たちに嫁のはてぶっていうサイトが人気だったんですが、そこも閉鎖してしまってました。

2024-02-29

PDFをプログラムで編集したい

序

既存のPDFにテキストを追加したい・・と思ったことありませんか？

今の時期なら国税庁が配布している確定申告書等のPDFに印字したい、とかでしょうか。

確定申告書等の様式・手引き等（令和５年分の所得税及び復興特別所得税の確定申告分）｜国税庁

※なお、私はe-Taxで済ませたので実際のところは確定申告書を印刷したいわけではありません

画像として編集

PDFをjpgなりpngなりのラスター画像にして編集する方法。

画像にしてしまえばいくらでも文字を載せたりすることはできます。

が、欠点としては以下の点が挙げられます

出力時の解像度が低いと印刷時に汚くなる
出力時の解像度が高いとファイルサイズが大きくなる
テキストとしての情報が失われて画像になってしまうので再度の編集が難しくなる

ライブラリ

pdf.js

GitHub - mozilla/pdf.js: PDF Reader in JavaScript

pdf.jsはJavaScriptでHTML5のcanvasにPDFを描画するためのライブラリ。

描画してからcanvasのtoDataURLを使うとPNGを出力できるが、当然テキストの情報は失われます。

無理やりpdf.jsが内部で持っているoperationのdataをいじれば内容は編集できるが、素のPDFの情報に近く、編集するのはかなり大変。

pdf-lib

https://github.com/Hopding/pdf-lib

jsのコードからテキストを追加できます。

ただしGUIはなく、位置を指定する必要がある(単位はポイント=1/72インチ？)。また文字ごとの間隔を調整したい場合は1文字ずつ印字、になりそう。

既存テキストの編集はできません（対応したいと言っているが3年位開発止まってる）。

HummusJS/MuhammaraJS

https://github.com/julianhille/MuhammaraJS

HummusJSが開発終了してMuhammaraJSに引き継がれた。

C++製ライブラリとそのjsラッパーなのでブラウザでは動作しない（だれかWebAssembly化して・・）

PDFBox

https://pdfbox.apache.org/

Java製ライブラリ。

テキストの追加は出来る。

まとめ

コードからPDFにテキスト追加できるライブラリはいくつかありましたが、既存テキストの編集は見つけられませんでした。

また、GUIからぽちぽちしてPDFを楽に編集できる方法はオープンソースのものでは見つけられませんでした。

GUIから操作したいときはAdobe のAcrobatでも買いませう。

2024-02-28

Chromeのページ内検索で正規表現を使いたい

WEB

タイトルの通り、Chromeのページ内検索で正規表現を使いたい、んですが、今までずっとむず痒さを覚えつつも放置してました。

使いたいケースは主にgithub上でコード読むとき。今まで正規表現で検索したいときはローカルにチェックアウトする、っていう無駄なことしてました。 (リポジトリからコードを探すときはgithubの機能で正規表現で検索できますが、今見てるファイル内を検索したいときに困っていました)

あと、Chromeの検索は大文字小文字区別しないので困ります。

そんなんextention作ってくれてる人いるだろう、と思ったら案の定ありました。ありがとうございます。

https://chromewebstore.google.com/detail/chrome-regex-search/bpelaihoicobbkgmhcbikncnpacdbknn

Firefoxは昔ブラウザ標準の機能で正規表現検索機能あったと思うんだけど少なくとも今はなさそう。大文字小文字の区別はできます。

2024-02-22

Playwrightでテストコード生成

WEB

Playwright + reg-suitでビジュアルリグレッションテスト - なんじゃくにっき

の続き

テストコード生成

npx playwright codegen

とするとブラウザが立ち上がって、そこで操作するとその操作がインスペクタにテストコードとして記述される。

それをコピーしてきてspecファイルにペーストすれば良い。

↓はブラウザのアドレスバーにgootle.comとして遷移してからロゴをクリックしたときのキャプチャ。

認証など共通する前処理

認証など各テストに共通する前処理をしたい場合

https://playwright.dev/docs/auth

2024-02-21

Playwright + reg-suitでビジュアルリグレッションテスト

WEB

概要

Playwright + reg-suitを使ってビジュアルリグレッションテストをやってみます。

E2Eテストでスクリーンショットを撮って前回との比較をします。

インストール

今回の実行環境はUbuntuですが、MacやWindowsでも多少やり方が違いますができますので公式ドキュメントにまず目を通しましょう。

Installation | Playwright

に従ってインストールします。

事前にnodeはインストールしておくこと。

npm init playwright@latest

実行中にいくつか選択肢がでますがほぼデフォルト値で決定しました。

github actionsだけ今回は使う気がなかったのでNoを選択。

依存ライブラリをインストールします。

一旦chromiumで実行するためのものだけにしておきます。

--with-depsオプションをつけなければfirefoxとwebkitで実行するためのものもインストールされます。

npx playwright install --with-deps chromium

実行

npx playwright test

とするとtestsディレクトリ以下のテストが実行されます。

デフォルトでexample.spec.tsができているのでそれが実行されます。

実行が終わるとサーバーが起動して

http://localhost:9323

で結果が見られます。

テストが2つ x ブラウザ3種類の6つのテスト結果が表示されます。

chroniumの依存ライブラリしかインストールしていないのでwebkitとfirefoxのテストが失敗しています。

また起動したサーバーをCtrl + Cで止めたあとでも

npx playwright show-report

で最後の結果を表示できます。

実行時にUI表示

デフォルトだとheadlessで動作しますが目に見えるブラウザを起動したいときは

npx playwright test --ui

実行ブラウザを変える

https://playwright.dev/docs/browsers#configure-browsers

chromiumだけにする

playwright.config.ts を編集してfirefoxとwebkitの部分をコメントアウトすればOK

モバイル表示

iPhone表示にはwebkitが必要です(iPhoneのシミュレーターではなく)

npx playwright install --with-deps webkit

したあとに

playwright.config.ts

のiphoneの部分のコメントアウトを外せばOK

特定のデバイスのみで実行

npx playwright test --project chromium

--projectオプションを使う

reg-suit install

npm install --save reg-suit

npx reg-suit init

どのプラグイン使うか聞かれるので一旦は全部外す

スクリーンショットを撮る

test/example.spec.ts

test('Take photo', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: './ss/example.png', fullPage: true });
});

実行ごとにスクリーンショットのディレクトリを変える

スクリーンショット撮ることはできましたが毎回出力先が同じだと毎回上書きされて残らないので、実行日時 + ブラウザのディレクトリに残るようにします。

npm install --save dayjs

test/config.ts

import { test as base } from '@playwright/test';
import dayjs from 'dayjs';

export type TestOptions = {
  ssDir: string;
};

export const test = base.extend<TestOptions>({
  ssDir: './ss/' + dayjs().format("YYYYMMDDhhmmss") + "/",
});

test/example.spec.ts

import { expect } from '@playwright/test';
import { test } from './config';

test('Take photo', async ({ page, ssDir }, info) => {
  const fileName = "top.png"
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: ssDir + info.project.name + "/" + fileName , fullPage: true });
});

差分検出

2回実行してssディレクトリの下に2つディレクトリができているとすると

npx reg-cli ./ss/20240222022952/ ./ss/20240222022438/ .diff -R ./report.html

みたいにすると差分が検出されます。

CLIに変化があったファイルが表示されますがレポートもreport.htmlに出力されます。

差分表示例(赤く見える場所が差分)

スクリプト

DIR1=`ls -A ./ss | sort | tail -2 | head -1`
DIR2=`ls -A ./ss | sort | tail -1`

npx reg-cli ./ss/${DIR1} ./ss/${DIR2} .diff -R ./report.html
open ./report.html

毎回ディレクトリ指定するのは面倒なので最後の2つを比較しましょう。