お知らせ

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

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

投稿日：
言語::HTML言語::CSS

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

問題

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

imgタグの下に隙間がある

aタグがimgタグの下にはみ出ているように見える

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

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を指定すれば解消する。

vertical-alignaを指定したときの例、下の隙間がなくなっている

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

横に文字を並べた例、空白分文字がずれている

参考コード

<!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サイトを作った

投稿日：
ジャンル::サイト運営

ここ何年かの間、自分の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で使う

投稿日：
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で外部デュアルモニタが片方だけ出なくなった時の対処

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

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

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

前提環境

発生事象

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

確認環境

Env Ver
Windows 11 Enterprise 22621.1413

改善しなかった操作

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

解決手順

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

あとがき

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

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

コメント（0件）

Stable Diffusionの使い方についてちょいと書いてみる

投稿日：
ソフトウェア::Stable Diffusion技術::AI

最近流行りということもあり、サクッと使い方とか、使ってみた所感を書いてみます。

Stable Diffusion を使うプラットフォームはどこがいいか？

ローカル

ご自宅のマシンです。お金稼ぐなら多分こっち。
ベンチスコアを見る限り最低でもRTX 4070 Tiがあるといいと思います。
勿論、A100があるならそれに越したことはないですが、270万円するのでまず検討外でしょう。

  • メリット
    • 既に環境があれば電気代しか掛かりません
    • 何をしても怒られません
    • 一回セットアップすれば使い回せます
    • ローカルなので細かい融通が利きやすいと思います
  • デメリット
    • RTX 4090を持ってしてもクラウドにパフォーマンスは劣ると思います
    • 環境構築に非常にお金がかかります。グラボ交換だけで考えてもRTX 4070Ti単体で13万ほどするのでAI絵で利益を出せないと厳しいでしょう

クラウド（Google Colab）

  • メリット
    • 取り敢えず試したいというときにお手頃な価格で始められます
      • Colab Proでも1,200円ほど積めば取り敢えず使えます。無料で使うのは微妙
      • 電気代はタダ同然
    • 圧倒的パフォーマンス
      • 512x512の作画であれば1秒程度。ベンチスコアを見る限りRTX 4090でもここまで短くならないはず
      • Golab Proを使った感じだと基本A100が引けました
  • デメリット
    • 長時間使うと金額が膨らみます
      • AIイラストを売って稼ぐには不向きかもしれません
      • ここは軌道に乗ってきたらローカル環境を組むのを考えてもいいかもしれないですね
    • 毎回セットアップが必要になりがちで面倒
      • Google Driveに全部突っ込んでおけば不要ですが、容量問題が…
    • ファイルのアップロードやColab自体の設定変更などの操作がローカルよりやりづらいです（他人のシステムの上にあるので仕方がない）
    • 生成内容によってはBANされる可能性がある
      • 私はされたことがないですが、稀にされるというのは聞きます

モデルについて

あんまり良くわかってないけど主に次の三種類があるっぽい。拡張子のパターンは他にもあるかもしれないけど把握できてないです。

  • モデル
    • 拡張子は.safetensors, .ckpt
    • 絵柄がこれで決まる
    • 格納先
      • /stable-diffusion-webui/models/Stable-diffusion
  • VAE
    • モデルに内包されている絵柄を決定する要素？
    • 拡張子は.vae.pt
    • 格納先
      • /stable-diffusion-webui/VAE/Stable-diffusion
  • LoRA
    • 個人が作成した追加学習モデル
    • 既にあるモデルに絵柄やポーズ、シチュエーションを追加できる？
    • 拡張子は.safetensors
    • 格納先
      • /stable-diffusion-webui/Lora/Stable-diffusion

Google ColabでStable Diffusionを使う方法

以下のファイルをColabに取り込み、後述する使い方の通りにやれば動くはずです。

https://gist.github.com/Lycolia/cb432ad1b1ce083482b5487c131b5d12

使い方

以下はGoogle Colab Proの利用を想定して書いています。1,179円ほど払うと数時間は使えるのでオススメです。

  1. ipynbファイルを落としてGoogle Colabにインポート
  2. 編集＞ノートブックの設定からGPUクラスをプレミアムに変更
  3. Setupセクションの## model以下のコメントを参考に好きなモデルを突っ込む
  4. Setupを実行
  5. Launch web UIを実行
  6. コンソールに以下のリンクが出てくるのでアクセスするとWebUIが開く
    1. https://xxxxxxxx.gradio.live

モデルがある場所

この先のリンクには性的表現が含まれる可能性があります。周囲に注意して開いてください。

  • Civitai
    • かなり豊富なモデルがありますが、知財的に問題があるものも少なくないと思われます
  • stablediffusion WebUI モデル一覧
    • 日本語で色々なモデルがまとめられています
  • 7th_anime_v3
    • アニメ系イラストの定番らしいですが使ったことはないです
  • AbyssOrangeMix
    • 見た感じ結構クオリティが高いものを出力できる

トラブルシューティング

カーネルエラーが出る

FATAL: kernel fmha_cutlassF_f16_aligned_64x64_rf_sm80 is for sm80-sm90, but was built for sm75

もし以下のようにxformersをインストールしている箇所があれば消すと直る

!pip install -q https://github.com/camenduru/stable-diffusion-webui-colab/releases/download/0.0.15/xformers-0.0.15+e163309.d20230103-cp38-cp38-linux_x86_64.whl

PyTorch と torchvision のバージョンの整合性があっていないエラーが出る

RuntimeError: Detected that PyTorch and torchvision were compiled with different CUDA versions. PyTorch has CUDA Version=11.7 and torchvision has CUDA Version=11.8. Please reinstall the torchvision that matches your PyTorch install.

web UIを起動する前にバージョン指定でコンポーネントをインストールする

!pip install torch==1.13.1+cu117 torchvision==0.14.1+cu117 torchtext==0.14.1 torchaudio==0.13.1 torchdata==0.5.1 --extra-index-url https://download.pytorch.org/whl/cu117

モデルや画面とかいろんなロードが終わらない

30秒以上かかる場合は異常なので画面をリロードすると直ることがある
画面動かない系は基本リロードで直る。多分Colab側の負荷で詰まってる

VAE を設定する方法

  1. Quicksettings listにsd_vaeをカンマ区切りで追加
  2. 画面リロード
  3. モデル選択の横にVAEの選択メニューが生えてくる

参考出力作品

プロンプトを深く捏ねてないのでクオリティは微妙ですが、取り敢えずこんなのが出せますというサンプル。
モデルはAbyssOrangeMix3、VAEはkl-f8-anime2を使ってます。

屋敷の森で読書する少女
ジャケットを着たたくあん眉の女性
たくあん眉の女子大生

コメント（0件）