Lycolog

お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。

Prettier v3になるとMarkdownの全角文字と半角文字の間にスペースが挿入されなくなるので、その対応方法を書いておく

投稿日：: 2023/04/10

Node.js::Prettier言語::Markdown

Prettier の次期 Major release である v3 がそろそろ出そうなので、今回含まれる大きな変更の一つについての記事です。

内容としてはMarkdown文書の全角文字と半角英数の間にスペースが挿入されなくなります。個人的にこれは相当賛否が分かれると思うので、v3が出た後の対処方法も併せて書いておきます。

変更点

以下は漢字Alphabetsひらがな12345カタカナ67890という文字列が渡された時の変化例です。

v3 より前	v3 以降
`漢字 Alphabets ひらがな 12345 カタカナ 67890`	`漢字Alphabetsひらがな12345カタカナ67890`

多分スペースが空いたときのほうが好みといった人が一定数居ると思います。個人的には検索性が破滅的に低下するためこの機能には否定的でしたが、今回のアップデートで遂にスペースが入らなくなったので、割と喜んでいます。ぶっちゃけこのブログの過去記事ににある余計なスペースも現在全て除去する作業をしてるくらいです。

発端としては次のIssueにあり、これをずっと追っていた人もきっといると思います。私もそのうちの一人です。

Do not insert whitespaces between latin and cj letters #6385

この問題は次のPullRequestで対応され、現在v3 用のブランチに取り込まれています。

[Markdown[next branch]: Do not insert spaces between Chinese/Japanese & latin letters #11597](https://github.com/prettier/prettier/pull/11597)

この機能を試したい場合、以下のようにインストールすることで試すことが出来ます。

npm i -D https://github.com/prettier/prettier.git#next

なお、PullRequestにある通り既にあるものには影響しないので、既にあるスペースを詰めることは出来ません。

これまで通りスペースを入れたい場合

引き続き漢字Alphabetsひらがな12345カタカナ67890を漢字 Alphabets ひらがな 12345 カタカナ 67890にしたいケース

前述のPullRequestの中でも言及されていますが、textlintを利用することで対応できます。ただPrettierと併用するのは難しいと思います。

導入方法

textlintにtextlint-rule-preset-ja-spacingを組み合わせて対応します。

npm i -D textlint textlint-rule-preset-ja-spacing

使用方法

まず.textlintrcを作成し、次の設定を追加します。

{
    "rules": {
        "preset-ja-spacing": {
            "ja-space-between-half-and-full-width": {
                "space": "always"
            }
        }
    }
}

CLIを用いて修正する場合

npx textlint --fix <path>

VSCodeを用いる場合、vscode-textlintをインストールし、settings.jsonに以下の設定を追加することで利用することが出来ます。Prettierと併用する場合、Prettierと競合し、textlintが負けるため、Markdownの整形に関してはtextlintに任せるのが無難だと思います。

{
    "textlint.autoFixOnSave": true
}

一応Custom Local Formattersを使えば近いことは出来なくもないのですが、ファイルへの書き込み同期がズレてるのか上手く動かない気がします。一応以下の設定で動くことには動きますが、あんま期待しないほうがいいかも…。拡張からコマンドを蹴ること自体セキュリティ的に微妙な気がするので、この方法は使わないのが無難な気がします。

{
    "[markdown]": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "jkillian.custom-local-formatters"
    },
    "customLocalFormatters.formatters": [
        {
            "command": "npx prettier ${file} | npx textlint --stdin --stdin-filename ${file} --fix --format fixed-result",
            "languages": ["markdown"]
        }
    ]
}

これはPrettierとtextlintを呼ぶ時点で二重処理になって重いので、Markdownのフォーマットはどっちか片方にやらせたほうが良いでしょう。ただtextlintはデフォルトだと表の整形とかいい感じにしてくれないようなのが困りものです。textlintにmarkdownプラグインを入れると改善されるかもしれませんが試してないです。

これまでのスペースを消したい場合

既にある漢字 Alphabets ひらがな 12345 カタカナ 67890を漢字Alphabetsひらがな12345カタカナ67890にしたいケース

前項の「これまで通りスペースを入れたい場合」で紹介した環境を導入し、.textlintrcを以下のように作成すればある程度は対応できます。但し完全には除去しきれません。

{
    "rules": {
        "preset-ja-spacing": {
            "ja-space-between-half-and-full-width": {
                "space": "never"
            }
        }
    }
}

この設定によるtextlintの整形結果は以下のとおりです。記号の前後の半角スペースや見出しやリンク文章にある半角スペースは除去しきれないようです。

 ## 123 あああ abc

-ユーザー ID は Slack アプリから
+ユーザー IDはSlackアプリから
 やよいの ○ 色申告
 [Web サイトの example](https://example.com)

余談

多分大抵の人はPrettierをv3にしてからこの事に気が付くと思います。当然です。一々 OSSのアップデートを追っている人は恐らくメンテナか物好きだからです。

現在Prettierのリポジトリでは似たような議論として、デフォルトでインデントにスペースを使っているところをタブに置き換えようという動きがあります。幸いv3では採用に至っていませんが、今後採用される可能性があり、メンテナであるSosuke Suzuki氏もこの事について以下の記事で憂慮されています。

ある日突然インデントのスペースがタブに変われば、苦情が出るのは明白です。設定一つ直すだけとは言え、影響は大きいでしょう。CIで全体にPrettierを掛けていないプロジェクトでは一時的にタブインデントのファイルとスペースインデントのファイルが混在するケースもあると思います。空白文字の差分表示や検出を無効化していると気づかないまま、そのような状態になるケースもあると思います。

個人的にはMarkdownに落とした時にどの環境でも同じように見えるという理由でスペースインデントが好みですが、A11yの観点からタブにせよという考えも理解は出来ます。でもブラウザで.mdファイル見たときとかに見づらいんですよね…。Python や PHP、YAML の様に標準がスペースインデントの言語もありますし、個人的には標準はスペースで構わないのではと思ったりもします。（その上で必要に応じてタブを使うという選択肢は出来ると思います。Google JavaScript Style Guideでも、これが標準です。Prettierは代表的なフォーマッタで事実上のコーディング標準であるとも言えるため、社会的責務でそうする必要があるかもしれませんが、個人的な思いとしては標準はスペースのままであってほしいなぁと思います。どうしても標準が変わると、世間はそこに引きずられざれ得ないと思いますから。

多分今回の変更も、上記のuseTab同様に一部で非難が上がる気がしていて、余り大事にならなければいいなぁ…とか考えています。（タブと比べると影響範囲が狭いので、ひょっとしたら今回はあまり何も起きないかもですが…）

コメント（0件）

imgタグの下に謎の空白ができる原因を突き止めて解決した

投稿日：: 2023/04/10

言語::HTML言語::CSS

Bioサイトを作っていた時にimgタグの下に謎の隙間ができることに気がついたので、その対処録。

問題

画像の下に謎の隙間があり、DevToolsで見るとaタグがはみ出ているように見える。marginやpaddingを0にしても効果なし。

aタグを外して、imgタグ単体にしても起きる。

再現コード例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>lycolia.info</title>
  </head>
  <body>
    <a href="https://example.com">
      <img src="example.png" width="200" height="40" alt="example">
    </a>
  </body>
</html>

原因

imgタグはinline要素なので vertical-align の既定値が baseline になっている関係で、文字の下端と画像の下端が合う状態になっているために、隙間が生まれていることが確認できる。

解決策

imgタグに対してvertical-alignにbottomないしtopを指定すれば解消する。

勿論この状態で横に文字を並べると、その文字は当然浮くが、今回はこの解決方法は扱わない。

参考コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>lycolia.info</title>
  </head>
  <body>
    <a href="https://example.com">
      <img style="vertical-align: bottom;" src="example.png" width="200" height="40" alt="example">
    </a>
  </body>
</html>

コメント（0件）

重い腰を上げてBioサイトを作った

投稿日：: 2023/04/06

ジャンル::サイト運営

ここ何年かの間、自分のSNSとかのリンクを集約したり、経歴を書き連ねたりするWebページが増えてきていると思います。例えばHugoを使ったものはモダンで、学生や若い人とかに人気だと思います。流行から結構経っているので、もう廃れてるかもしれませんが…ｗ（Hugoメンテするのだるいと思うし…ｗ

こういう系のサービスは最近だとLinktreeをよく見ますし、リッチでモダンなサービスとしてBentoなんてのも見かけますね。Hugoはセルフホストタイプですが、これらのサービスはホスティングのノウハウや環境構築が不要なのはメリットでしょう。

Bentoは一応私も使ったことがあるのですが、感触がイマイチと言うか、当時はまだプレリリース段階で見た目がモダンなリンク集を作るので精一杯な感じがあったのと、独自ドメインの割当がだるかったので継続利用には至りませんでした。（サービス機能してはなかったのでCNAME当ててCDNなどのリバースプロキシから当ててやる必要があったと思います

かつて私もHugoのAcademicを利用してサイトを作っていたのですが、レイアウトのカスタマイズが面倒なのと、コンテンツをYAMLで書く必要があって書きづらかったり、極めつけはHugoに破壊的変更があった時の対応が果てしなく面倒でメンテが億劫になり、手放した記憶があります。

そしてしばらくはlycolia.infoは使わずにblog.lycolia.infoだけを使っていました。これもさくらのレンタルサーバーからはてなブログに移ったり、note.lycolia.infoとか言うのをGitHub Pagesに生やしたり、消したり、またblog.lycolia.infoをさくらのレンタルサーバーに戻したりと、紆余曲折ありました。

そして月日が経ち、そろそろlycolia.infoも活かしたいなということで今回は頑張らないBioサイトとして作ろうと思い立ちました。まずは重い腰を上げられるように小さく始めて、気が向いたら肉付けしてリッチにしていこうという方針で始めることにしました。どのくらい頑張らないサイトにしたかというと、以下の画像くらい頑張りませんでした。驚くほどシンプル。数分で作れます。何一つ頑張りませんでした。

当時のコードがこれですが、わずか24行しかありません。JSもCSSもなく、純粋にプレーンな静的HTMLファイルです。流石にここまでシンプルなのは今時中々ないと思いますね。

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>lycolia.info</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <h1>lycolia.info</h1>
  <ul>
    <li><a rel="me" href="https://blog.lycolia.info">Blog</a></li>
    <li><a rel="me" href="https://github.com/Lycolia">GitHub</a></li>
    <li><a rel="me" href="https://gist.github.com/Lycolia">Gist</a></li>
    <li><a rel="me" href="https://www.last.fm/user/Lycolia">last.fm</a></li>
    <li><a rel="me" href="https://mstdn.hyogo.jp/@lycolia">兵庫丼</a></li>
    <li><a rel="me" href="https://misskey.systems/@Lycolia">みすてむ</a></li>
    <li><a rel="me" href="https://www.npmjs.com/~lycolia">npm</a></li>
    <li><a rel="me" href="https://twitter.com/Lycolia">Twitter</a></li>
    <li><a rel="me" href="https://www.tumblr.com/bonbolium">Tumblr</a></li>
  </ul>
  <p>© 2002 - 2023 Lycolia Rizzim All rights reserved.</p>
</body>
</html>

しかし余りにもシンプルすぎるのでもう少しリッチにしようと18時間後にはこうなりました。最初と比べる結構リッチな感じになったと思います。コードも157行に達し丁度6倍まで膨らみました。長すぎるのでもうここにコードは書けないですｗ表示内容は依然としてプレーンな静的HTMLファイルのままではありますが、SSRとかではないので表示は早いと思います。JSはないですが、CSSは入るようになりました。また、懐かしのアクセスカウンターも導入しました。カウント値は過去に設置していたときのものを継承しています。

このサイトはOGを設置したり、A11yに配慮したり、Font Awesome入れたり、Font Awesomeにないブランドロゴはライセンスに配慮しつつ導入したり、そこそこ良い作りになるように意識しています。一旦記憶にある限りの自分のアカウントはリンクしたので、ソーシャルリンクとしては機能するようになったと思います。気が向いたらBiography的なやつも書いていきたいですね。このブログの自己紹介欄すらまともに書けてませんが（

実際に作ってみると色々感じることがありました。例えばそのうちの一つは、かつてはこうやってHTMLを手打ちしてWebページ、いやホームページを作っていたなという懐かしさです。このサイトは初代サイトから移転数を基準で考えると8代目になるのですが、随分遠くに来たものだと思いました。今やHTMLを手打ちするような機会はほぼないです。本業はWeb制作（フロントエンドエンジニア）ですが、仕事でもTSXしか書いてないですし、それすら書かない日のことが多いです。他にもWebArchiveで歴代のサイトを眺めていて、こんな時代があったなとか、昔の自分はこんなちゃんとした文章を書けていたんだなとか、かつてはホームページ運営を通じてこれほどまでにネッ友がいたんだなとか。本当に色々な思いがこみ上げてきました。またあの時代が戻ってきたらいいなとか思うのですが、過ぎ去った時代が戻って来ることはないので、そのあたりは諦めるしかないでしょうね。ただまぁ、こういうので感傷に浸るのも偶には悪くないものです。こないだも浸ってた気がしますが…ｗ

何年も前からHTMLの手打ちは非効率で面倒だとCMSを好んで使っていましたが、偶にはこうやって手でHTMLを書くのもいいものだなとしみじみしました。

また、カウンターを設置する際に久々にPerlのCGIを導入したのですが、久々すぎて意外なところでハマりました。CGIそのものは往年のKENT-WEBさんのものを利用させて頂いているのですが、こちらのPerlコードは改行コードがCRLFなんですね。CRLFで動くのか？と思いながら設置したら謎の500エラーが頻発、パーミッションに原因があるのかと直してみるも収まらず、結果としてレンタルサーバーのエラーログに以下のエラーがあり、改行コードの問題であることが解り、事なきを得ました。

AH01215: suexec policy violation: see suexec log for more details

さくらのレンタルサーバーのエラーログ閲覧画面、管理画面からでなくともSSHからログファイルを見ることもできる

これは昔だとFFFTPとかが勝手にLFに変換していてくれたので起きていなかったようなのですが、今時そんな事する人も多くないと思うのでSSHでアップロードしたり、wgetしたものを直接編集したりしてしまい、発覚が難しいかなと思います。もしまた引っかかることが無いようにGitHubに改行コードをLFにして、ついでに文字コードもSJISからUTF8に変えて更にねこみみカウンターを載せたものを置いておいたので、興味がある人は持っていってください。本家の使用許諾を読む限り多分ライセンス的にはセーフなはず…。

https://github.com/Lycolia/Magick-Nekomimi-Counter/tree/main

しかしカウンタープログラムのソースコードをまともに読むのは今回が初めてでしたが、とてつもなくシンプルな実装で驚きました。まぁ考えてみればCGI叩かれたらカウントアップするだけですもんね…。とは言え、画像を埋め込みHTMLの中に吐き出すのは知識がないと難しいですし、当時としては大変だったと思います。ImageMagickの神がかり的な使いやすさにも驚きました。GDだったらこんなものじゃ済まなかった気がします…ｗなんか画像の矩形サイズ指定や透過色指定が必要で、汎用的に作ろうとすると面倒だった記憶が…（随分前のことなので記憶があやふやですが…

という訳で長々と語ってしまいましたが、最後に今回作ったBioサイトを紹介して終わりにしたいと思います。サイトというかLPなのでページですが…ｗ

https://lycolia.info/

しかし、フッターにある開設日時の表記が感慨深いです。このブログにも日までは書いてあるのですが、過去に時分まで書いていたことを思い出しWebArchiveからサルベージしてきました。開設当初の記載なので限りなく正確な情報です。秒までは記録がなかったので0秒としておきました。

This site since from 2002-07-03T23:21:00+09:00.

コメント（0件）

LinuxやFreeBSDでキーコードを取得してzshrcのbindkeyで使う

投稿日：: 2023/04/06

OS::LinuxOS::FreeBSDソフトウェア::zsh

.zshrcでbindkeyする時にキーコードが解らず困ったので

確認環境

Env	Ver
Ubuntu	22.04.2 LTS
FreeBSD	13.0-RELEASE-p12

確認方法

ターミナルで{Ctrl}+{V}を押下し、次に調べたいキーを押下するとキーコードが見れる

Up/Down/Home/End/Del の設定方法

取り敢えずこれだけ欲しかったので。Deleteは共通のコードみたいです

FreeBSD

## Delete
bindkey '^[[3~' delete-char
## arrow up
bindkey '^[[A' up-line-or-search
## arrow down
bindkey '^[[B' down-line-or-search
## Home
bindkey "^[[H" beginning-of-line
## End
bindkey "^[[F" end-of-line

Ubuntu

## Delete
bindkey '^[[3~' delete-char
## arrow up
bindkey "^[OA" up-line-or-search
## arrow down
bindkey "^[OB" down-line-or-search
## Home
bindkey "^[OH" beginning-of-line
## End
bindkey "^[OF" end-of-line

コメント（0件）

Dell Latitude 5430で外部デュアルモニタが片方だけ出なくなった時の対処

投稿日：: 2023/04/06

メーカー::Dellジャンル::トラブルシューティング

昨日まで外部モニタ2枚でデュアルモニタが出来ていたのに、今日いきなり出来なくなったが、本体モニタは映っており、外部モニタもどちらか片方だけなら映る状態になっていた。本体モニタは使わないので外部モニタだけ利用したいので、その対処を行った記録。

原因は恐らくWindows Updateなど何かしらの理由でモニタ設定が吹き飛んでいたのだと思う。

前提環境

外部ディスプレイ2枚構成
- iiyama ProLite XB2481HSU
PC ＞モニタの接続方式はHDMI
1枚はHDMI出力で接続、もう1枚はAnker PowerExpand+ USB-C & HDMI変換アダプタを使用し、USB-C出力から接続

発生事象

昨日までは本体モニタを削除した状態で外部モニタ2枚でのデュアルディスプレイ環境が動いていた
今日起動すると本体モニタと外部モニタの片方しか映らなくなっていた
- もう片方は映像信号なし
- 映ってる方のケーブルを抜くと映らない方に映る
- この状態で抜いたケーブルを挿すと映っていたほうが消え、挿した方が映る

確認環境

Env	Ver
Windows 11 Enterprise	22621.1413

改善しなかった操作

再起動
モニタの電源入り切り
デバイスマネージャーからIntelのグラフィックドライバを削除
- Intel(R) Iris(R) Xe Graphics
デバイスマネージャーから全モニタを削除

解決手順

デスクトップを右クリックし、ディスプレイ情報を開く
モニタが全て認識されているが映っていないことを確認する
メインモニタを外部モニタに変更
本体モニタを削除
1. システム＞ディスプレイ＞ディスプレイの招待設定＞デスクトップからのディスプレイの削除
外部モニタ2枚に映ればOK
タスクバーとかの設定がリセットされているので直す

あとがき

Dellマシンは何かとトラブルが多いので困るが、法人ユースに特化しているので仕事では使わざるをえないのが難しいところです…。Windowsを選びし者の宿命みたいな感じ。

以前は本体モニタ込みのトリプルモニタが出来ていたのが、無理になっていたので多分そこら辺が何か関係してそうでした。（同時に2枚しか出せなくなっている？）

コメント（0件）