お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
投稿日:
ソフトウェア::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 listsd_vaeをカンマ区切りで追加
  2. 画面リロード
  3. モデル選択の横にVAEの選択メニューが生えてくる

参考出力作品

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

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

投稿日:
言語::C#開発::テスト

Windows向けのツールを作ろうというので、昔よく使っていたC#.NETで開発をすることにしたのですが結構苦労があったのでその話を書いていこうと思います。Unit testingを書くのは一旦断念しましたが、暇があれば挑戦したいとは思ってます。

事のいきさつ

WindowsのVSCodeでRemote Development拡張を使うことが多いのですが、リモートエクスプローラーにアイテムが増えてくると移動したいフォルダを探すのが大変になってくるのと、ここに出てないフォルダを開くのが結構手間という問題があり、これを解決できないかということを考えていました。

そこで考えついたのがWSLやSSHのネットワークパス上でExplorerの右クリックメニューを開いたらVSCodeがリモートモードで起動できると良いのでは?という所でした。Windows向けでexeからバイナリ起動するならC#で書くのが楽だろうと考え、C#での開発に着手しました。

疎結合な実装でUnit testingもできたらいいなーと漠然と考えながら開発していたのですが、最後にC#を書いたのは3年ほど前で、C#でモダンな実装をした経験もなかったので結構苦労しました。よく考えたらTypeScriptかJavaScriptくらいでしかまともにやったことがないし、UT自体他言語でもGolangかPHPでしか書いたことがなかったので、C#でこれをやるのは自分の実装技術に対する一種の挑戦みたいなところがありました。結論としてはあっけなく破れたわけですが…。

ツールの要件

  • Explorerの右クリックメニューから起動する
  • 開いたパスに応じてWindowsローカル、SSH、WSLを判定し、適切なモードでVSCodeを起動する
  • パス解決には設定ファイルを用いる
    • Explorerから渡されるパスはリモート環境のパスと差異があるので、そこを解決するためのものです

ツールの設計

やることは設定ファイルを読み込み、コマンドライン引数から値を取得し、それらをいい感じに変換してVSCodeに渡すだけです

大まかなフロー

大まかな動作フロー

実行形式

  • コマンドライン引数
    • this.exe <dir path>
  • 設定ファイル形式
    ```json5
    {
    "CodePath": "VSCodeのexeパス",
    // リモートホスト定義。辞書形式
    "Remote": {
    "リモートホスト名": {
    "ExplorerPrefix": "explorerのパスから除外する文字列",
    "AppendPrefix": "explorerのパスに追加する文字列"
    },
    }
    }
    ```

ツールの実装

まずはTDD的にやろうとしてInterfaceを作成し、Classで実装し、ロジック自体は好調に組み上がっていき、テストもすべて通るようになりました。但し実際にexeを蹴ると動かず、テストは通るが動かないゴミが出来上がっていました。(途中で動作確認をしなかったのか?と思うかもしれませんが、実際は完全に動くものを作ってからテスト可能な形に書き換えるという流れで作っていたのでこうなっています)

動かなかった理由は設定ファイルにJSONを採用していて、デシリアライザにSystem.Text.Json.JsonSerializerを使っていたためです。このデシリアライザは標準ではInterfaceに対してJSONをデシリアライズできません(考えてみれば当然ですが)。しかし、テストをするためにはモックをDIしたいので、Interfaceが必要です。

以下は実際に設定を読み込むために実装したClassですが、メンバが全部Interfaceになっているので、標準の状態ではデシリアライズに失敗します。ならばデシリアライザを自作すればいいという話が出てくるのですが、高々設定ファイルを読み込む処理にそこまで情熱を込めるか…?と言うことになり、諦めました。

public class ConfigBase : IConfigBase {
    private IFileInfo? _CodePath;
    private IDictionary<string, IConfigRemote>? _Remote;

    public IFileInfo CodePath {
        get {
            if (this._CodePath == null) {
                throw new Exception("Config Error: Missing CodePath.");
            } else if (this._CodePath == null) {
                throw new Exception("Config Error: CodePath is empty. Set the code.exe path in this field.");
            } else if (!this._CodePath.Exists) {
                throw new Exception("Config Error: CodePath is Not exists.");
            } else {
                return this._CodePath;
            }
        }
        set { this._CodePath = value; }
    }

    public IDictionary<string, IConfigRemote> Remote {
        get {
            if (this._Remote == null) {
                throw new Exception("Config Error: Missing Remote.");
            } else if (this._Remote.Count == 0) {
                throw new Exception("Config Error: Remote is empty. Set the remote infomation in this field.");
            } else {
                return this._Remote;
            }
        }
        set { this._Remote = value; }
    }
}

そもそもこのツールは「設定ファイルを読み込み、コマンドライン引数から値を取得し、それらをいい感じに変換してVSCodeに渡すだけ」のツールです。たったそれだけのツールに入れる仕組みにしては大げさすぎると感じました。

テストをするためにInterfaceを作ったり、本実装とモック用のClassを作る程度まではまだ容認できるのですが、カスタムデシリアライザを作ると、今度はそれのテストも必要になってきます。どう考えてもしんどい。

因みにこのコード、仮にInterfaceをやめても文字列をFileInfoに組み替えるためのカスタムデシリアライザの実装が必要で結構頭が痛くなります…。多分そこはFile.existsをラップしたクラスをDIしてやるのが無難な気がしますね。

この辺はTypeScriptだとimportの中身をJestで書き換えたら終わりなのであんま考えなくていいのは楽ですが、C#だと厳しいなと感じました。

C#でテストを書いていて思ったこと

クラスベースで実装していくとメソッド単位でのテストがしづらく、テストがコケても原因が把握しづらいというのを一つ課題感として覚えました。TSでなんちゃって関数型開発をしていれば関数のUTを書けば関数の挙動を把握できますが、Classではそうも行きません。

仮に1つのpublic methodが5つのprivate methodを呼び出していて、private methodの裏ではprivate propertyが複雑な依存を持っていたとしたらどうでしょうか?
正直デバッグをかけないとどこで何がコケたか特定できないと思います。そんな実装にするのが悪いといえばそうですが、でもクラスってそういうものじゃないですっけ…?お互いに関連性がなくていいならもうそれ関数で良くないですか?って思いました。

勿論、全部静的メソッドにしてClassそのものは単なるエンティティにするのも選択肢の一つだとは思います。しかしC#でそこまでやるか…?という疑念が個人的にあるのと、処理を繋げたテストをUTとして書く方法がなくなると思います。例えばインスタンスメソッドならモックをDIすることでメソッドが呼ばれた事や、戻り値に対する分岐を確認できますが、静的メソッドでこれをやるのは難しいと思います。

Classの単体テストは関数と状態が密結合したテストになってしまうので、いまいち微妙だなと思ったのが今回思ったことでした。

突然ですが皆さんは駄文同盟.comというサイトを御存知でしょうか?ご存じの方であれば、懐かしいサイトだと思います。この記事では駄文同盟.comを軸に、かつてのWebサイトが今どうなっているのかを探り、その上でこれからの個人サイトがどうあってほしいかや、うちのサイトがどうしていきたいかなどの雑多な内容をつらつら書いていきます。

駄文同盟.comトップページ

駄文同名は2002-06-151に同盟として生まれたサイトで、当時はいわばWebリング的存在でしたが、2004-10-20に現在の登録型検索エンジンとして生まれ変わりました。2

2002-07-03から存在する当サイトも登録しています。1桁IDは取れなかったものの、なんとか2桁IDに収まっているのは一瞬の誇りに近いものがあります。

ネット黎明期、いや最盛期とも言える時期から存在するサイトですが、ふとID上位100内のサイトがどれほど生き残っているのか気になったので調べてみたので、今回はその結果を出してみました。

確認した観点

主に次の4つの観点で見ています

  • 駄文同盟IDが存在するか?
  • バナーファイルが存在するか?
  • サイトが存在するか?
  • サイトが半年以内に更新されているか?
駄文同盟IDが存在するか?

これは駄文同盟.comにそのIDがあるかどうかを見ています。何かしらの事情で抹消されたIDは存在しないため、本記事ではサイトが消滅したものとして扱います。駄文同盟.comの登録が煩わしくなって解除したなどは考慮しません。

これは基本的に閉鎖以外で消すことは見に来てくれる人が減ってしまうので、あまりないと考えているためです。勿論、駄文同盟.com経由で来るユーザーが自分のサイトにマッチしないなどの理由で削除すること自体はあると思います。

内訳として存在するサイトは100サイト中34しかなく、66サイトはIDそのものが消滅していました。悲しいですね…。

駄文同盟IDが存在するサイトの内訳チャート

以降はこの66サイトを除外して考えます。

バナーファイルが存在するか?

基本的にサイトが無くなっていればバナーもなくなっていると思うのですが、単にバナーファイルのURLが移動したとかでもバナーファイルが不存在になることはあるため、指標としてはあまり役に立ちませんが、一応ピックアップしています。

実際にはサイトがないのにバナーが生きているというサイトが3サイトありました。これはバナーファイルがサイトとは別の場所にあるケースで見かけました。昔はバナーの直リンク禁止と言う文化もあったので、その関係なのかもしれません。画像の直リンクができないホスティング事業者もありますが、該当サイトはすべて対象外だったので、ここは関係なかったです。

しかし、いずれのサイトも消滅から時間が相当経過していると思うのですがバナーだけ残っているというのはすごいなと思いました。

駄文同盟.comのIDがあるサイトの内訳としてバナーがあるサイトは16、消滅しているサイトは15、ノーバナーのサイトは3ありました。

バナーファイルが存在するサイトの内訳チャート

サイトが存在するか?

文字通りWebサイトが存在するかどうかです。ホスティングサーバーのエラーなどが返ってくるサイトはサイトが存在しないものとして扱っています。逆に言うとエラーさえ返って来なければ存在するものとして扱っているので「当サイトは閉鎖しました」などと書かれていても存在する扱いにしています。

駄文同盟.comのIDがあるサイトの内訳として存在するサイトは18、消滅したサイトは16ありました。
閉鎖扱いのサイトは備考欄に「閉鎖サイト」と記載していますが、2サイトあります。
つまり有効に機能しているサイトはこの時点で16サイトに絞れます。

サイトが存在するサイトの内訳チャート

サイトが半年以内に更新されているか?

Webサイトそのものが現存していたとしていても更新されていなければ生き残っているとは言い難いと思うので、サイトにアクセスし、更新履歴などから半年以内に更新があるサイトを確認しました。

半年以内というのはややシビアかもしれませんが、半年も更新されてない個人サイトなんて墓場かなんかじゃないですか?少なくとも私はそう思います。なお当サイトは過去に最大で一年半くらい更新していない期間があった気がしますが、その時は確実に墓場でした。但しまともに運営していた時は最低でも月一では更新していたと思いますし、最盛期は一日に数回更新していたときもあったと記憶しています。

この内訳としては消滅したサイトを除くと半年以内に更新されているサイトが2、更新されていないサイトが16でした。

サイトが半年以内に更新されているかの内訳チャート

つまり、駄文同盟.comに登録されているID上位100位のサイトで現在でも機能しているサイトはたった2サイトしかないことが解ります。正直そんなサイトうちのサイトだけではないのか?と思っていたので、もう1サイトあるというのはちょっと驚きました。

総括とかいろいろ

全チャート

総括すると駄文同盟.comに登録されているID上位100位のサイトのうち、現在でも運営されているのはたった2サイトであることが解ります。駄文同盟ができて約19年の時の中で、多くのサイトが消滅したという事を考えると、なんというか時の流れは残酷というか、個人サイトの運営というのは相当奇特な行為なのかもしれないなと思いました。

因みに私がサイトを立ち上げた当初は20人ほど個人サイトを運営しているネッ友がいたのですが、Webサイトとして現存しているのは1サイトで、それも2011-07-14を境に更新が止まっていました。きっともう彼は私のことを覚えていないでしょうが、人生で一番最初にオフ会をした相手でした。

その後も10名ほどの個人サイト管理者やブロガーと出会うことがありましたが、確認できた限り2サイト残っており、それぞれ2010年と2021年で更新が途絶えていました。最近はめっきりそういう人と出逢えてないですが、大体SNSに籠もってたせいですね。概ね Twitter昔はTumblrもやってましたが今は全く触ってないので廃墟になってます。思い返せばはてなブックマークとか色々やっていた気がします。はてなアカウントはもう残ってないですが…w

なんというか最近はSNSに固執するのも疲れるなぁと言うので、個人サイト運営に回帰しようかなと思っているところです。SNS、特にTwitterのようなものだとリアルタイムにコミュニケーションをしたくなって結果的に画面に張り付く事になり、なんかしんどいなという。他のことができないのもそうですし、性格的にレスバしてしまうので自家中毒ではあるものの精神的にしんどいですし、他にも発言に注意しないとどこから何が飛んでくるかわからない世界なので、それも疲れるというのがあります。

のんびりマイペースに自分のサイトを運営していればそういったことは減りますし、体験記とかも記事としてまとめればTwitterよりも振り返りやすく、自分のためにもいいし、割と何気なく書いた情報が誰かの役に立つといったシーンはあると思っているので、そういうことがTwitterよりやりやすいのもまたメリットですね。他にも情報がフローというよりはストックなので、自分の人となりを誰かに伝えるときにも、こんなサイトをやっていますというとTwitter寄りはポートフォリオになるので、伝えやすいといった側面もあるかなと思っています。

私はもし出来ることなら、年老いて何も書けなくなるその瞬間までこのサイトを更新し続け、可能であれば死後もこのサイトを残せたらいいなと思っています。まぁ理想論ですし、ネット上のノイズを増やすだけの迷惑行為でしかないわけですがw。でも個人サイトってそんなもんじゃない?って私は思ってます。最近はいかがでしたブログや、胡散臭い情報商材サイト、サロン・スクール系の様なサイトが増えて残念ですが、個人的には今起きているTwitterやpixivなどのプラットフォームの混乱により、昔のようにまた個人サイトが増えてくれたらいいなと思っています。リンクとか一種のフォローみたいでいいと思うんですよね。

ただまぁ、インターネットに来る人が昔より圧倒的に増え、スパムなども桁違いに増えていますし、ポリコレのこともあるので、昔のような放牧的インターネットはもう難しいのかなとも思っています。これはちょっと残念なところですね…。

私は今後、個人サイトの運営を主軸にしつつ、ちょいちょい兵庫丼みすてむ、Discordにも出没して、人の繋がりを薄く分散的に維持しつつ。Twitterはたまに見るくらいにしようかなと思っています。Twitterは仕事関係の繋がりもあるので、消しはしないと思います。

またなんか昔のようなネッ友的関係が築けると良いのですが、インターネットがリアルタイムでリッチになりすぎてしまっているので、あの時のような距離感はもう難しいのかなと思っています。昔はBBSに書き込んでもレスが来るのは数時間後、半日後、翌日とかだったので成り立っていたと思います。今の時代にもうそれはないので、時代の流れとして、過去の良き思い出として受け止める必要があるかなと思っています。

このサイトにはBBSこそないものの、一応コメント欄はありますしね。ここで交流を図ろうとする人がいるかどうかは果たして未知数ですが、まぁいないでしょう。一時期は記事に対して建設的なコメントが来てたこともあったのですが、そのうち「自作PCの作り方を教えて」みたいなコメントが来るようになって、頭を抱えていた時期もありました。(それで確か自作PC系はコメント閉じたと思います)

また最後になりますが、この記事はコロンビアさんのTwitterから距離を置くオタクという記事に触発されて書きました。(失礼ですが余りに共感できる記事だったので、勝手に紹介させて頂きました)個人サイトに対する思いに非常に共感でき、またTwitterの付き合い方についても深く同意できる内容でした。多分個人サイト運営者の中にはそういった人も少なくはないのかもしれません。因みに私はTwitterをアカウント通算で行くと2010年からやっているので、もう13年目ですね。過去のアカウントは残ってませんが確か今のは5代目くらいのアカウントだったかと思います。

私の場合はコロンビアさんの様にTwitter人生を通しての知り合いはおらず、アカウントを作り直すたびにリセットされてる感じではあります。ただ今のアカウントはおそらく一番長生きしてるやつだと思うので、そういう意味では長い人は長いですね。そもそもまともに交流してないので仲のいいフォロワーみたいなのはいないのですが…。(むしろ仲違いして分かれることのほうが多い)フォローの底の方は疎遠な人しかいない有様。

まぁそんなこんなで話が発散してしまいましたが、今後は乱筆ながらもこのサイトをぼちぼち更新していければなと思います。最早常連の方などいないと思うので誰に向かって話しているのか謎ですが、当サイトを今後とも宜しくお願いします。

集計データ

Google Spreadsheetにまとめていますが、ブログ記事にもデータテーブルを掲載しておきます。

ID 駄文同盟 ID 存在 バナーファイル存在 サイト存在 サイト更新有 最終更新日 サイト名 サイト URL 駄文同盟ページ 備考
1 サイト消滅 駄文同盟 http://l-f-t.hp.infoseek.co.jp/ http://www.dabun-doumei.com/data/1.html
2 サイト消滅 FixedStar http://homepage3.nifty.com/fixed-star/ http://www.dabun-doumei.com/data/2.html
3 IDなし IDなし IDなし http://www.dabun-doumei.com/data/3.html
4 サイト消滅 Bullshit! http://bullshit.livedoor.biz/ http://www.dabun-doumei.com/data/4.html
5 IDなし IDなし IDなし http://www.dabun-doumei.com/data/5.html
6 IDなし IDなし IDなし http://www.dabun-doumei.com/data/6.html
7 2017-06-09 Moonlight night crow http://mindplus2.x0.com/ http://www.dabun-doumei.com/data/7.html
8 IDなし IDなし IDなし http://www.dabun-doumei.com/data/8.html
9 2017-09-30 Future flower http://miraibana.web.fc2.com/ http://www.dabun-doumei.com/data/9.html
10 サイト消滅 ロレンシアサーガ https://sites.google.com/site/rorenshiasaga/ http://www.dabun-doumei.com/data/10.html
11 IDなし IDなし IDなし http://www.dabun-doumei.com/data/11.html
12 IDなし IDなし IDなし http://www.dabun-doumei.com/data/12.html
13 サイト消滅 a glance http://www.cakunte.org/ http://www.dabun-doumei.com/data/13.html
14 IDなし IDなし IDなし http://www.dabun-doumei.com/data/14.html
15 IDなし IDなし IDなし http://www.dabun-doumei.com/data/15.html
16 IDなし IDなし IDなし http://www.dabun-doumei.com/data/16.html
17 IDなし IDなし IDなし http://www.dabun-doumei.com/data/17.html
18 サイト消滅 Out Of Wind http://real-fusion.net/ http://www.dabun-doumei.com/data/18.html
19 IDなし IDなし IDなし http://www.dabun-doumei.com/data/19.html
20 IDなし IDなし IDなし http://www.dabun-doumei.com/data/20.html
21 IDなし IDなし IDなし http://www.dabun-doumei.com/data/21.html
22 IDなし IDなし IDなし http://www.dabun-doumei.com/data/22.html
23 サイト消滅 僕らの秘密基地で・・。 http://bokuranohimitukiti.hp.infoseek.co.jp/ http://www.dabun-doumei.com/data/23.html
24 IDなし IDなし IDなし http://www.dabun-doumei.com/data/24.html
25 サイト消滅 Cafelife ★ かふぇらいふ ★ https://homepage.biglobe.ne.jp/errorpage/404.html http://www.dabun-doumei.com/data/25.html
26 サイト消滅 そらの涙 http://soranonamida.sakura.ne.jp/ http://www.dabun-doumei.com/data/26.html
27 IDなし IDなし IDなし http://www.dabun-doumei.com/data/27.html
28 IDなし IDなし IDなし http://www.dabun-doumei.com/data/28.html
29 はのろぐ。 http://nosfoni.cocolog-nifty.com/ http://www.dabun-doumei.com/data/29.html
30 IDなし IDなし IDなし http://www.dabun-doumei.com/data/30.html
31 IDなし IDなし IDなし http://www.dabun-doumei.com/data/31.html
32 IDなし IDなし IDなし http://www.dabun-doumei.com/data/32.html
33 IDなし IDなし IDなし http://www.dabun-doumei.com/data/33.html
34 IDなし IDなし IDなし http://www.dabun-doumei.com/data/34.html
35 IDなし IDなし IDなし http://www.dabun-doumei.com/data/35.html
36 IDなし IDなし IDなし http://www.dabun-doumei.com/data/36.html
37 IDなし IDなし IDなし http://www.dabun-doumei.com/data/37.html
38 IDなし IDなし IDなし http://www.dabun-doumei.com/data/38.html
39 IDなし IDなし IDなし http://www.dabun-doumei.com/data/39.html
40 2010-10-31 藍咲旅館 http://everyfortune.web.fc2.com/ http://www.dabun-doumei.com/data/40.html
41 2021-02-24 きまぐれカメレオン(跡地) http://koggelmander.web.fc2.com/ http://www.dabun-doumei.com/data/41.html 閉鎖サイト
42 IDなし IDなし IDなし http://www.dabun-doumei.com/data/42.html
43 IDなし IDなし IDなし http://www.dabun-doumei.com/data/43.html
44 IDなし IDなし IDなし http://www.dabun-doumei.com/data/44.html
45 2019-02-15 月胡蝶 http://tukikotyou.sakura.ne.jp/ http://www.dabun-doumei.com/data/45.html
46 IDなし IDなし IDなし http://www.dabun-doumei.com/data/46.html
47 サイト消滅 私の研究所 http://zodiark.jp/ http://www.dabun-doumei.com/data/47.html
48 2010-12-17 Tokimeki Laboratory http://tokilabo.yuuri063.client.jp/ http://www.dabun-doumei.com/data/48.html
49 IDなし IDなし IDなし http://www.dabun-doumei.com/data/49.html
50 IDなし IDなし IDなし http://www.dabun-doumei.com/data/50.html
51 IDなし IDなし IDなし http://www.dabun-doumei.com/data/51.html
52 IDなし IDなし IDなし http://www.dabun-doumei.com/data/52.html
53 IDなし IDなし IDなし http://www.dabun-doumei.com/data/53.html
54 IDなし IDなし IDなし http://www.dabun-doumei.com/data/54.html
55 IDなし IDなし IDなし http://www.dabun-doumei.com/data/55.html
56 IDなし IDなし IDなし http://www.dabun-doumei.com/data/56.html
57 IDなし IDなし IDなし http://www.dabun-doumei.com/data/57.html
58 IDなし IDなし IDなし http://www.dabun-doumei.com/data/58.html
59 IDなし IDなし IDなし http://www.dabun-doumei.com/data/59.html
60 2010-06-06 Fanciful Atheneum http://atheneum.yukihotaru.com/ http://www.dabun-doumei.com/data/60.html
61 2008-09-14 春はタケノコ http://www11.plala.or.jp/harutake/ http://www.dabun-doumei.com/data/61.html
62 IDなし IDなし IDなし http://www.dabun-doumei.com/data/62.html
63 Ele-de-Seadia http://seadia.halfmoon.jp/ http://www.dabun-doumei.com/data/63.html
64 IDなし IDなし IDなし http://www.dabun-doumei.com/data/64.html
65 IDなし IDなし IDなし http://www.dabun-doumei.com/data/65.html
66 サイト消滅 空水の蒼 http://www.geocities.jp/kuusiu_ao/ http://www.dabun-doumei.com/data/66.html
67 IDなし IDなし IDなし http://www.dabun-doumei.com/data/67.html
68 2011-05-22 +es-se http://esses.fc2web.com/ http://www.dabun-doumei.com/data/68.html
69 IDなし IDなし IDなし http://www.dabun-doumei.com/data/69.html
70 IDなし IDなし IDなし http://www.dabun-doumei.com/data/70.html
71 IDなし IDなし IDなし http://www.dabun-doumei.com/data/71.html
72 2021-05-24 Feathery Instrument http://blankrune.sakura.ne.jp/ http://www.dabun-doumei.com/data/72.html
73 IDなし IDなし IDなし http://www.dabun-doumei.com/data/73.html
74 IDなし IDなし IDなし http://www.dabun-doumei.com/data/74.html
75 ノーバナー 2007-04-14 Daredevils' Anthem http://id5.fm-p.jp/88/sunofadoll/ http://www.dabun-doumei.com/data/75.html
76 IDなし IDなし IDなし http://www.dabun-doumei.com/data/76.html
77 2006-04-30 CRESCENT MOON http://myaco.s41.xrea.com/ http://www.dabun-doumei.com/data/77.html 閉鎖サイト
78 IDなし IDなし IDなし http://www.dabun-doumei.com/data/78.html
79 IDなし IDなし IDなし http://www.dabun-doumei.com/data/79.html
80 2017-05-22 あるロリコンの小部屋 http://tiss.gozaru.jp/ http://www.dabun-doumei.com/data/80.html
81 IDなし IDなし IDなし http://www.dabun-doumei.com/data/81.html
82 サイト消滅 Valkyrie's Garden http://valkyrie.xdap.jp/ http://www.dabun-doumei.com/data/82.html
83 サイト消滅 想人の記憶(イマジンズメモリー) https://www.freett.com/imagineM/index.htm http://www.dabun-doumei.com/data/83.html
84 2023-02-20 鷹嶺創書院・東院 http://innnostalgia.web.fc2.com/index.html http://www.dabun-doumei.com/data/84.html
85 IDなし IDなし IDなし http://www.dabun-doumei.com/data/85.html
86 IDなし IDなし IDなし http://www.dabun-doumei.com/data/86.html
87 IDなし IDなし IDなし http://www.dabun-doumei.com/data/87.html
88 ノーバナー 2023-03-31 Lycolia https://blog.lycolia.info/ http://www.dabun-doumei.com/data/88.html 当サイト
89 IDなし IDなし IDなし http://www.dabun-doumei.com/data/89.html
90 IDなし IDなし IDなし http://www.dabun-doumei.com/data/90.html
91 IDなし IDなし IDなし http://www.dabun-doumei.com/data/91.html
92 IDなし IDなし IDなし http://www.dabun-doumei.com/data/92.html
93 IDなし IDなし IDなし http://www.dabun-doumei.com/data/93.html
94 サイト消滅 淡雪堂 http://awayuki.fem.jp/ http://www.dabun-doumei.com/data/94.html
95 IDなし IDなし IDなし http://www.dabun-doumei.com/data/95.html
96 2009-04-25 なんでも屋 http://md01.fc2web.com/ http://www.dabun-doumei.com/data/96.html
97 サイト消滅 言葉の欠片~ことのはのかけら~ http://bcbweb.bai.ne.jp/~aoc38101/ http://www.dabun-doumei.com/data/97.html
98 IDなし IDなし IDなし http://www.dabun-doumei.com/data/98.html
99 ノーバナー サイト消滅 Blue Fun Flower http://www.geocities.jp/bluefunflower/ http://www.dabun-doumei.com/data/99.html
100 IDなし IDなし IDなし http://www.dabun-doumei.com/data/100.html
投稿日:
ソフトウェア::CMS::WordPress

YARPP – Yet Another Related Posts Pluginのサムネイル表示がどうにも気に入らなかったのでSANGOのスタイルに合わせるだけのやつを作りました。YARPPのカスタムテーマとしてSANGOのアドセンス関連記事型広告ウィジェットに差し込むことを想定しています。

こんな感じで、SANGO標準の関連記事表示と変わらないやつです。

カスタムテーマの見た目

Gistに置いてるので、もし欲しい人がいたら持っていって好きに改造して使ってください。

最初はプラグインにして配布しようとか思ったのですが、 構造的に無理だったので諦めました。パッと見はWordPressのエコシステムに上手いことインジェクションしてやってるのかと思ったのですが、内部の処理としてはYARPPがTemplateファイルをrequired_onceで読み込んで内部でWordPressのエコシステムを再現することで実現しているという事が解り、YARPPの管理外にあるプラグインでは実現が難しかったため、一番無難なテンプレート形式に収めて終わりにしました。

投稿日:
ソフトウェア::CMS::WordPress

WordPressの組み込みURL埋め込みがクソなので自作しようとしたら意味不明な挙動に出会ったので残しておく。

確認環境

  • WordPress 6.2
    • Classic Editor

起きた現象

端的に書くとshortcodeでAタグの中にブロック要素を含ませるような出力を記事本文中ですると初回だけAタグが外れます。

イメージ的にはこういう感じのやつ

<a href="https://example.com">
  <figure>
    <img src="https://example.com/foo.jpg" alt="" width="200">
    <figcaption>foo</figcaption>
  </figure>
</a>

例えば以下のような出力が起きます。ちょっとなんかかなりHTML崩壊してませんかね…?

理想 現実
理想の出力
現実の出力

参考までにショートコードを二回以上書くと二回目以降はPタグなどのゴミが混ざるものの理想に近い出力になります。原因は不明。WordPressのバグかなんかじゃないかな…。

再現コード

このショートコードを記事本文に二回書くと二回目にはAタグが効くことが確認できます。

function emb_test($atts) {
  $url = $atts["url"];
  $img = $atts["img"];
  $title = $atts["title"];

  return <<<EOD
<a href="$url>
  <figure>
    <img src="$img" alt="" width="200">
    <figcaption> $title </figcaption>
  </figure>
</a>

EOD;
}
add_shortcode('emb', 'emb_test');
出力結果
出力結果

何故起きるのか?

wpautop のせいだとは思います。この機能自体は普段記事を書く上で便利ですし、タグやカテゴリの説明にadd_filterしてやるといい感じに改行が反映されたりして便利なのですが、shortcodeの中に入ってくるとかなり邪魔ですね…。

因みにAタグの中にインライン要素を入れてる限り、この現象は起きないのですが、その場合CSSでブロック要素にする必要があるのと、セマンティクスとかコーディング的な微妙さを感じたので、それはしないことにしました。

取り敢えずWordPressで良い感じにURLを埋め込むのは余り現実的ではなさそうなので諦めることにしました。正直WordPress 組み込みの埋込機能は使い勝手が悪く微妙です。有名SNSだけ埋め込めればいい人にはこれでいいでしょうけど…。

仕方がないので5年くらい前に使って体験が微妙だった Pz-LinkCard を使ってみたらかなり良くなっていたので、Pz-LinkCardを使うことで解決することにしました。ありがとうPz-LinkCard…ありがとう…。

コードの供養

書いたけど期待通り動かなかった本来やりたかったコードです。

function embed($atts) {
	$url = count($atts) > 0
	  ? $atts[0]
	  : "";
    $dom = new DOMDocument();

    $data = wp_remote_get($url);
    if (is_wp_error($data)) {
        return;
    }

    $html = $data['body'];
    $doc = new DOMDocument();
    @$doc->loadHTML($html);
    $metas = $doc->getElementsByTagName('meta');
    $title = '';
    $description = '';
    $image = '';
    foreach ($metas as $meta) {
        if ($meta->getAttribute('property') == 'og:title') {
            $title = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:description') {
            $description = $meta->getAttribute('content');
        }
        if ($meta->getAttribute('property') == 'og:image') {
            $image = $meta->getAttribute('content');
        }
    }
    if (!empty($title) && !empty($description)) {
		return <<<EOD
<a href="$url">
  <figure>
    <img src="$image" alt="$title">
    <figcaption>
    $title
    $description
    </figcaption>
  </figure>
</a>
EOD;
    }
}
add_shortcode('embed', 'embed');