Lycolog

前回の対処ではMicrosoft Edge rounded cornersを設定して回避していたが、これが潰されたので回避方法を残す。

確認環境

• Microsoft Edge バージョン 149.0.4022.69, 149.0.4022.98
• Windows 11 Pro

やり方

1. スタートにピン止めしているEdgeを右クリックして「ファイルの場所を開く」
   

   

2. 開いた場所にあるEdgeを右クリックして「プロパティ (R)」
   

   

3. Microsoft Edgeのプロパティが出るので、「リンク先(T)」の入力欄の末尾に --enable-features=msForceNoRoundedCornerAndMarginを付け足す
   

   

4. 「OK」を押して保存する
5. Edgeを終了し、スタートのピン止めから起動すれば角丸が消える

端的に言うとこのコマンドで起動すれば消える。

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --enable-features=msForceNoRoundedCornerAndMargin

あとがき

レスポンシブシミュレーションの画面でも角丸が出るためWeb開発にも支障が出ると思うが、マイクロソフトはなぜこんな変更をしたのだろうか…。

余談だが、Bring back the "Microsoft Edge rounded corners" optionにフィードバックを送ると改善する可能性があるので直してほしい人は送るといいかも？私は送った。

現時点で625の投票と205個のフィードバックがついている。6月8日に見たときは391票と130コメントだったので、だいぶ増えている。

今日のサイト改築の話とかadiary改造の話とかの続き。5日ぶりの更新。

トップページのスリム化

単純比較するための画像をとってなかったので、画像では前回と今回の比較となっている。

トップページのバナーリンクからページ説明を削除

改修前	改修後

前のレイアウトではバナーリンクの下に説明文を書いていたが、別に自明だなと思ったので消した。

これによってSPビューで1画面に出せるリンクの数が1.3倍くらいになったのでだいぶ良かった。

トップページから更新履歴を削除

改修前	改修後

「このサイトの歴史」の部分を削除した。削除したものは後述する「更新履歴ページ」に移設している。

このサイトについてページの作成

このサイトについてページを作成した。内容的にはこのブログにある「このサイトについて」と大差ない内容だ。

比較的シンプルなページであることもあり、それなりにスタイリングしている。今後はこのスタイリングをベースに全体展開していきたい感じだが、まだ詰め切れていないので一旦仮である。

更新履歴ページの作成

こんな感じの更新履歴ページを作成した。

内容的にはトップページ下部にあった「このサイトの歴史」にある更新履歴ボックスの中身の移植だが、以前は<pre>を使ったプレーンテキストだったのを<section>, <h3>, <ul>, <dl>などを使うことでセマンティックなものに変更している。ほぼ手動で移植しているので、微妙に壊れている可能性がある。

スタイリングはほぼ皆無だが、全体方針が決まったら当てていきたい。それなりの構造にはしてあるので、比較的容易に反映できると思う。

更新履歴を別ページに分離するアイデアはフィーネ・ラグザスさんのFeathery Instrumentのサイトの作りから着想を得ている。

余談だがFeathery Instrumentは古のサイト探究～駄文同盟のID上位100サイトを巡り、今までのネット人生や自サイトの過去を振り返ってみるでは以下の状態で、消滅サイトの側のカウントだったが、現在は精力的に更新されている。

サイトリンクバナーの更新

旧バナー	新バナー

今までフォントサイズの都合で正式なサイト名をフルで入れられてなかったのだが、フルで入るようにレイアウトの見直しを行った。

ブログリンクバナーの更新

旧バナー	新バナー

同時にほぼ同じデザインだったブログ側のバナーも変えた。

Apacheの廃止

変更前の構成	新しい構成

HTTPDからApacheを排除し、nginxに一本化した。

一本化した主な理由は以下の通り。

• nginx→Apacheのリバプロをしている時にApache側でリダイレクトされるとTLS証明書がエラーになることがある
• FluentBitでログをパースしてると複数行エラーが別のログ扱いで分割してLokiに入ってくるのですごく読みづらい
• 設定ファイルの管理に疲れた
• 動かしてるものが増えるほど脆弱性も増えるので減らすに越したことがない
• try_filesに慣れすぎてModRewrite書きたくなくなった

あとがき

サイトレイアウトやコンテンツ配置的にちぐはぐな部分が多く残るが、いったん大まかな整理としてはこのくらいとして、細かい部分は気が向いたときにちまちま直していければと思う。

次に何をしていくかについては決まり切っていないが、大きく次のうちのどれかをやっていくと思う。

• 溜まりすぎているブログネタの消化
• Webalizerに代わるサーバーログ集計ツールの作成
• adiaryの置き換えになるCMSの作成

これまでXperia 1 VIを使っていたが2年経ったし買い替えるかというのでXperia 1 VIIIを買った話。

開封の儀

左がXperia 1 VIの箱、右がXperia 1 VIIIの箱だが、なんかしょぼくなった気がする。税込み272,910円もする製品の箱とは思えないレベルだが、エコロジーの観点からみると妥当かもしれない。

開けてみても見事に何の変哲もない箱である。

裏面はカメラの配置が1 VI, 1 VIIと異なり、１VIIIではiPhone的な配置になっている。

使ってみた感想

正直特に変わりはわからないレベル。望遠レンズがよくなっただけあって望遠撮影時の画質が良くなった気はするが、元々ズームをあんまり使っていなかったので違いはよく分からない。

AIカメラアシスタントというのも撮影時にプリセットのエフェクトの加工案を出してくるだけで、AIでも何でもない。邪魔なUIが増えただけに近い。

音はよくなったような気もするが、これも錯覚かもしれない。

SIM/SDカードトレイは尋常ではない頑丈さになり、爪で開けなくなった。つまようじがへし折れるレベル。開けるには精密マイナスドライバーが必要だった。

撮ってだしの写真たち

写真モード、ウルトラHDRオフ。

一枚目が写真モードでウルトラHDRオフ、二枚目がオン。二枚目の方が人間が見た色に近い。

一枚目が写真モードでウルトラHDRオン、二枚目がプロ写真で蛍光灯＋ウルトラHDR＋コンピュテーショナルフォト。二枚目のほうが人間が見た色に近い。

カメラアプリの使い方はこれまでとあまり変わらなさそうな気配を感じた。

個人的に日中の屋外は写真モード、室内や夜間はプロ写真で蛍光灯というのをXperia 1 VIだとよくやっていた。更にLED電光板や星空を撮るときはシャッタースピードを調整する感じ。

この使い方は1 VIIIでも変わることはなさそうだなと思った。

一枚目が写真モードでウルトラHDRオン、二枚目がプロ写真で蛍光灯＋ウルトラHDR＋コンピュテーショナルフォト。

写真モードは白飛びが酷くて使い物にならない。

これはプロ写真で蛍光灯＋ウルトラHDR＋コンピュテーショナルフォト。

普通に夜景を撮影する分には基本的に白飛びするのでXperia 1 VIからの進歩は特にないように感じた。

最後にプロ写真で蛍光灯＋ウルトラHDR＋コンピュテーショナルフォト＋140mm。

明るい時に撮らないと何とも言い難い感じだ…。

価格コムのレビューを見る感じ、広角はレンズやセンサーのスペックは変わらないもののノイズが減っているらしい。望遠も色味が良くなってるのかな？

ケースについて

本製品のケースはその多くが凹凸にあるものとなっており、机の上に置くとガタガタして使いづらいと思う。SpigenのXperia 1 VIIIケースでさえ凹凸がある。これだと、ちょっと今回は避けたい感じだ。

私は昔はZEROSHOCKを使っていたのだが、HUAWEI P30 ProにZEROSHOCKが対応しなかったため、それからはSpigenを買っていた。しかし今回はZEROSHOCKが対応している上、Xperia 1 VIII用のZEROSHOCKは背面の凹凸が少なめになっていることので、これを選ぶことにした。

この写真はヨドバシ梅田に展示されていたXperia 1 VIII用のZEROSHOCK実物を見て確認してきたものだ。

Spigenのケースは頑丈に作られているがZEROSHOCKほど極端な防御構造を持たないため、角を強く打つと本体に凹みや傷が入ることがあり、そこがイマイチだと思っていたので、今回ZEROSHOCKに変えられるのも良い部分だとは思っている。

過去の実績だと京阪京橋駅の階段を数十段転げ落ちても何ともなかった実績があるので、私はZEROSHOCKを信用している。また、フロントバンパーもSpigenより厚みがあるので、表面を下にして落とした時もSpigenより画面にダメージが入りづらいといえる。

そして何よりSpigenのケースはAmazonにしかないが、ZEROSHOCKは他にもあることだ。

例えばSpoigenのケースはAmazonだと「6月20日-7月16日にお届け」となっており、この期間裸で運用するとなるとつらいものがある。同様にZEROSHOCKもAmazonでは6月24日-7月17日となっていて厳しさを感じるし、ヨドバシでも品切れになっているのいるだが、なんとビックカメラには在庫がある。つまりすぐに手に入れられるのは強みだ。

といっても実店舗だと北海道と新潟と福岡と鹿児島くらいにしかないので通販で買うしかないのだが、それでも今のところ三日以内に出荷となっているので、かなり現実的な選択肢だ。

とはいえその間裸で運用するのも厳しいので、ラスタバナナの1100円くらいのケースを買って糊口を凌ぐこととした。安いケースでも画面とカメラ周りには高台がついており、机の上でこすった時などに付く傷を防げるので十分有用だ。流石に地面に落としたら一貫の終わりだろうが、通常のユースケースではこれでも十分だろう。

しかしXperia 1 VIIIのケースはググってもAmazonで検索してもSpigenもZEROSHOCKもまともに引っかからず、ZEROSHOCKについては、エレコムの公式サイトにもECにも載ってない有様なので。何とも探しづらい商品になっていてXperia 1 VIIIの置かれている状況の厳しさを感じた。

しかしZEROSHOCKをつけた場合胸ポケットに入るのかや、お風呂スマホケースに入るのかがやや心配だ。もし無理だったらSpigenに変えることも考えておこう…。

あとがき

ここ数年のAndroidスマホ全般を見るに、お世辞にもまともにスペックアップしているとは思えないので、次の買い替えは四年後でもいいかなと思った。

ひとまずXperia 1 VIIIはこれまでとデザインが大きく変わり、所有欲を満たしてくれるという意味ではよいと思う。しかし1 VIと比べたときに大きな進歩があるわけでもないどころか、使い勝手は微妙になった気さえするので、特に理由がなければ買い替える必要はないと思った。

ただイヤホンジャックとSDカードトレイがある機種は貴重だし、Samsungのように削除不能な変な翻訳ソフトや、奇妙なふるまいをするSamsungブラウザはついてないし、PixelのようにGoogleにロックインされることもない、日本メーカー製なのでFeliCaがついているなどのこだわりがあり、好きな人にはハマる端末だとは思うので、これまでXperiaを使ってこなかったけど使ってみたい人には悪くない端末だと思う。

他にもベゼルが残っており、カメラのパンチホールが気にならないといったポイントもあり、Xperiaシリーズのこだわりは語れば限がないほどだ。単に1 VIから大きな進歩がないというだけで、端末の出来自体は決して悪くない。1 VIの初期^[1]にあった暗所での画面のちらつきも1 VIIIでは当然起きてないし、物理シャッターボタンがあり、押せば即座にカメラが使えるなど、便利なところも数多くある。

店頭で買おうとすると店員から「正気ですか？やめたほうがいいですよ！」とか言われてしまうほどの端末だが、だからこそ買う価値があるともいえる、それがXperiaだ。

昨日に引き続き、今日もサイト改築をしていた話の続き。

• 本体サイトの改築
  • 自己紹介ページのSNSリンクの縦のがたつきを修正
  • トップページのバナーにマウスオーバーしたときに色が変わるように
  • リンクページでもバナーホバーで色が変わるように
  • サイト編集が楽になるように実装コードを修正
• adiaryの改造
• あとがき
  • 閲覧画面
  • 編集画面
  • Markdown
  • 特殊記法
  • デザイン
  • その他
• あとがきのあとがき

本体サイトの改築

自己紹介ページのSNSリンクの縦のがたつきを修正

昨日時点だと縦軸にがたつきが出ているが、これを修正した。深いことを考えずやっているので表示が崩れるパターンもありそうだが、気にしないでおく。

昨日時点	本日の修正後

トップページのバナーにマウスオーバーしたときに色が変わるように

地味だがこっちのがUXはよい。

他にも地味だが、外枠が黒なのは強調が強すぎると思ったので、ついでに枠の色を薄くしたほか、枠と中身のpaddingに当たり判定がなかったので、全体に当たり判定が出るように埋めた。

リンクページでもバナーホバーで色が変わるように

画像バナーだとこんな感じ。

テキストバナーだとこんな感じ。

サイト編集が楽になるように実装コードを修正

lycolia.info配下はすべてPerl CGIで実装しているが、ヒアドキュメントにシンタックスハイライトが効かずtypoに気づきづらい問題があった。

しかしヒアドキュメントの文字をHTMLにするとハイライトが効くことに気づいたので直した。

HTMLでも'HTML'でもどちらでも効くのがありがたい。しかし'HTML1'とかにするとダメになるのがイマイチだ。HTML1はいけるのに…。

試してみたところ、このテクニックはPHPでも有効だった。

どうでもいいが、この画像の実装はPerl CGIにする前のものなので今は使っていない。

adiaryの改造

前々からadiaryに情報バナーがないのが不満だったので、これを実装することにした。

切っ掛けとしてはLatitude 7350のCPUクーラーマウンタ用のネジ穴とラズパイクーラーのネジ穴メモの記事を書くときに使いたかったのがある。

実はこの手の表示自体は過去記事にも存在するのだが、記事ごとにHTMLを手書きしていてよくなかった。手書きだと毎回スタイルが変わってしまうし、一元的な変更もできないからだ。

adiaryには記法タグという、記法を拡張できる機能があるのを知っていたため、これを使うことにした。

そこでまずadiary本家の記法タグを定義するを真面目に読むことにした。実はこのページは過去に何度か読んでいるのだが、意味が理解できていなかった。

まず記法タグの定義の基本はこれだが、これは忘れていい。

google  = Google検索,       UTF-8,  http://www.google.co.jp/search?lr=lang_ja&ie=utf-8&oe=utf-8&q=
keyword = はてなキーワード, EUC-JP, http://d.hatena.ne.jp/keyword/

意味的にはこんな感じである。

TAG = 説明文, 文字コード, URL

今回使うのはこっちだ。

mtex = mimeTeX, ASCII, 1, <img src="$0mimetex/mimetex.cgi?$1" alt="$1" class="tex">
test = block-tag-sample, ASCII, 2, block:
<table>
<tr><th>#1</th><td>#2</td></tr>
</table>

こちらの意味はこんな感じである。

TAG = 説明文, 文字コード, 引数の数, URL | HTML | block:

• TAGは記法に使うタグの名前だ。例えばhogeとした場合、[hoge:]となる
• 説明文はタグの説明文だが、画面上に出てくるものではないので意味が分かるものを適当に書いておけばいいだろう
• 文字コードは値をURLエンコード時に使われるものらしいのでURLエンコードしないなら何でもよいと思う
• 引数の数は渡す引数の数だ。[hoge:aaa]なら1、[hoge:aaa:bbb]なら2になる
• 最後のURL | HTML | block:は置換に使う文字列なのだが、<で始まればHTML置換として、そうでなければURL置換としてアンカータグを出力するっぽい？
  • block:を指定した場合は複数行書くことができる。但しこれは可読性のためであって、実際のHTML出力は一行になるようだ
  • また実際に渡す引数そのものには一行しか指定できないと思われる

というので、以下の記法を定義してバナーを出せるようにした。

info = 情報バナー, UTF-8, 1, block:
<div class="notice_banner info">
    <div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8"></path></svg></div>
    <div class="message">#1</div>
</div>

warn = 警告バナー, UTF-8, 1, block:
<div class="notice_banner warn">
    <div><svg width="25" viewBox="0 0 24 24" aria-label="fontSize small"><path d="M12 5.99 19.53 19H4.47zM12 2 1 21h22zm1 14h-2v2h2zm0-6h-2v4h2z"></path></svg></div>
    <div class="message">#1</div>
</div>

error = エラーバナー, UTF-8, 1, block:
<div class="notice_banner error">
    <div><svg width="25" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"></path></svg></div>
    <div class="message">#1</div>
</div>

出てくるバナーはこんな感じ。

で、標準であった方が便利だろうというので私以外誰も使っていないであろうadiary-extendsの標準機能として取り込んだ。

なお、この時すでにwarnが記法として組み込まれていたため削除している。

あとがき

今日は他所事に手が伸びてしまい、これまでのように大きな対応は出来なかったが、締め切りがあるわけでもなければ、一応最低限は見れるので、改築はのんびりやっていこうと思う。

あとadiary-extendsは結構手を入れていて、個人的には本家より便利になっていると思う。

特にコピペで画像をアップロード可能にしたり、Markdownの脚注書式に対応したり、アップロードを許可する拡張子にapngとwebpを追加を追加したりしているので、これだけでもだいぶ使いやすくなっているはずだ。他にも個人的に欲しいと思った機能をそこそこ入れてるので便利になっていると思う。詳細はGitHubにあるadiary-extendsの主な変更点にも書いてあるが、現状の対応は以下のような感じである。

閲覧画面

• [v0.1.0] RSSアイコンの画像を80x15ブリリアントバナーにした
• [v0.3.0]テーブルが記事幅を超えた時に横スクロールできるようにした
• [v0.5.0] OGPのメタタグがUAによらず無条件で出力されるようにした
• [v0.6.0] Syntax HightlightをPrism.jsにした
• [v0.9.0] 画像に代替テキストを設定していない場合（画像ファイル名そのままの場合）、代替テキストを出力しないようにした（alt, titleを空文字設定）
• [v0.9.0] Lightbox2をFancybox v3.5.7に置き換えた
• [v0.13.0] 投稿日と更新日を両方出せるようにした
• [v0.21.0] IPv6のコメントのホスト名が不正になる問題の対応（例えばOCNからなのにawsのホスト名になったりする）
• [v0.25.0] 作成した記事のIDが500, 600, 700などでキリがいいときに、一つ前の記事への参照リンクが生成されない問題の修正

編集画面

• [v0.1.0] クリップボードから画像をアップロードできるようにした
• [v0.2.0] 任意の画像をOGPに設定可能にした
• [v0.22.dev-1] デフォルトでアップロードを許可する拡張子にapngとwebpを追加

Markdown

• [v0.1.0] Markdownで2スペースインデントでリスト記法が機能するようにした
• [v0.7.0] Code spansで連続したバックスラッシュが正常に表示されるようにした
• [v0.8.0] [text](<https://example.com/hoge_()>)が機能するようにした
• [v0.9.2] Markdown記法でthとtdの最終要素のスペースがトリムされず、そのまま出てくる不具合の修正
  • Prettierなどで自動整形しているMarkdownの場合、|_hoge________|のようになる（現時点でのadiaryの都合で半角スペース連続がトリムされたためアンダースコアで半角スペース表現を代替している）が、この後ろにあるスペースが全部HTMLのtdに出てきて、文字列を選択するときに不便だったため
• [v0.16.0] Markdownの脚注書式に対応
• [v0.23.0] Markdown記法で->が含まれているときにパースが壊れる問題の対応

特殊記法

• [v0.26.0] 情報・警告・エラーの三種類のバナー記法を実装

  [info:これはお知らせです。]
  [warn:これは警告です。]
  [error:これはエラーです。]
  

  
• [v0.26.0] 元々存在していたwarn記法の削除。↑の記法と衝突していたため

デザイン

• [v0.4.1] テンプレート変数でHTTPリファラを使えるようにした
• [v0.6.2] lycoテーマの追加
• [v0.24.0] HTTPS->HTTPのリバースプロキシ時にOGのURIスキーマがHTTPSにならない問題を対応

その他

• [v0.15.0] RSSフィードのURLにハッシュリンクがつかないようにした
  • ブログ村で同一記事が複数登録されることがあったため

あとがきのあとがき

しかし今月は記事を出す勢いが激しすぎて、まだ6月11日だというのに、この記事を含め23記事も書いてしまっている。一日二記事を超えるペースだ。

この調子で行くと月間執筆数過去最高の2025年3月の35記事を超えてしまいそうである。

図面に書いてある図形の位置や大きさと実際の位置と大きさには相関がない。どこまでの距離かを解りやすくするために適当においてるだけ。

Latitude 7350のCPUクーラーマウンタのネジ穴とネジ穴からヒートスプレッダまでの距離

この部分の寸法。

GeeekPi ICE Tower Plus Cooler Raspberry Pi 5 アルミニウム アクティブクーラーのネジ穴と周辺の寸法

この部分の寸法。

あとがき

R86S U1を冷やそうとした作業の残渣もそうなのだが、測ったはいいものの、クーラーを取り付けるマウンタをどう作るかが問題なんだよな…。