Lycolog

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

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

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

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

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');

内容

数分前まで普通に動いていたWSLのUbuntu 20.04.4 LTSをターミナルで開くと以下のエラーが表示された

Error: 0x80040326
Error code: Wsl/Service/0x80040326
Press any key to continue...

解消法

WSLをupdateしたら直ったが原因は不明

wsl --update

参考情報

• https://github.com/microsoft/WSL/issues/9867
  • 原因はわからないがWSLをupdateすると解決するという内容

Microsoft製のNotionクローンと噂のLoopを軽く触ってみたのでその感想です。
あくまで軽く触ってみただけで間違っている部分もあるかと思うので、その際はご指摘いただけると助かります。

雑感

軽く触ってみたところ、現段階ではNotionには遠く及ばない感じがしました。

天下のMS製なので頑張ってほしいところですが、なんとなくNotionとは想定しているユーザー層が違うような気がしたので、ユースケースも違うのかもしれません。

テキストマークアップ機能について

通用しないMarkdownが多く、WYSIWYGに頼らないと記述は難しそうでした。一応キーボード操作で標準的なマークアップ自体はできるのですがMarkdownを手入力しているエンジニアにとってはやや煩雑だと感じます。更にCodefenceが存在しないためソースコードを書き込むのにも不便です。

文字色の設定はNotion同様に背景色か前景色が設定できるので悪くないと思います。

マークアップレンダリングの参考

Database 機能について

Notionでは情報整理に重宝するDatabase機能ですが、Loopには存在しません。一番近いのはテーブルだと思うのですが、フィルタ機能がなく、Notionのマルチセレクトやリレーションのようなものも見当たらないので余り使えない気がします。その代わり投票機能があったりします。一応タスクリストや進行状況トラッカーというものもあるのですが、中身は単なるテーブルのテンプレート（Loopではコンポーネントと呼ばれている）のように見えました。

テーブルの参考

ワークスペースについて

これに関してはLoopに分があり、1アカウントで複数のワークスペースを作ることが出来ます。Notionの場合は複数アカウント必要で切り替えも手間がかかるので、これは便利だなと思いました。

ワークスペース画面

また、共同編集者も50人まで追加できるようなので、この機能が今後も無料で続くならNotionより使い勝手がいいかもしれません。Notionみたいにリアルタイムに同時更新できてカーソルとかまで出てくるのかまではわかりませんが…。

共同編集者の設定

レイアウト機能とか

Notionはカラムを作ったり比較的自由に配置できますが、Loopの場合は特に何も出来ないようでがっかりしました。

あとページに画像を添付することが出来るのですが、Notionの場合画像を貼り付けた後に縮小しても画像をクリックすれば元画像が見れますが、Loopではクリックしても何も起きません。OneNoteと同じです。正直何を考えているのかわからない

UIとか

UIもなんか微妙な感じで、Notionと比べるとメニューのネストが深かったり、何が何処にあるのかイマイチわかりづらかったりして非直感的だと感じました。

ただメニューに切り取りとかコピーがある所から考えると、Notionよりライトなユーザーを想定しているのかもしれません。そういうユーザーには非合理的なUIのほうが受けが良い気もするので、なんとなく指針にうなずける気もします。

文字装飾	文字装飾続き	Notion の/相当	Notion の/相当続き

アプリについて

どうもLoopのAndroidアプリは現状個人では使えないようで、何かしらの組織で管理されたOffice 365に入ってないと使えないようでした。

個人的にはオフラインでも使えるNotionを期待していたのですが、現状を見るにNotionとは方向性が違うようなので仮に個人でアプリが使えるようになってもLoopを使うことが出てくるのかどうかは怪しい気がしました。

あとNotionのAndroidアプリって重かったり操作性が悪かったりして微妙なんですよね…。（この辺りはOneNoteが個人的に好みですが、OneNoteはNotionと比べた時に画像添付やページ管理が非力なのが微妙な感じ）

ざっくりとした大まかな機能比較

TypeScriptやJavaScriptだとコマンド一発で見れるコードカバレッジですが、C#.NETの開発ではちょっと手こずったので導入方法を記録しておく。

確認環境

導入手順

1. C#.NETで開発用のプロジェクトを作成
2. 作成したプロジェクトのソリューションにxUnitテストプロジェクトを追加
3. 何かしらの実装と、それに対するテスト実装を作成
4. Fine Code CoverageをVisual Studioにインストール
5. ソリューションエクスプローラからxUnitテストプロジェクトを右クリックしてテストの実行

   1. 

6. 下部トレイにあるFine Code Coverageタブを選択

   1. 

   2. 表示されていない場合は表示 → その他のウィンドウ → Fine Code Coverageで表示出来る

      1. 

7. コードカバレッジが表示される

   1. 

疑問

Visual Studio 2022にもなって標準でコードカバレッジも取れないの？

今どきそんな事あるか？思って調べてみたところ、どうやらEnterpriseであればコードカバレッジを取る機能がついている模様。

まぁ無料版だから仕方ないねということで諦めるしかないでしょう。Professional版にもないけど…ｗ。VisualStudioの便利機能は以前から有料機能に組み込まれる傾向があるので仕方がない気もしますが、取り敢えず今回は有志が便利なツールを作っていてくれて助かりました。

因みにコードカバレッジ自体は無料版でも取れます。ただこれはXMLのカバレッジレポートを吐くだけなので、可視化するには別途ここからHTMLを生成する必要があり面倒なので、なんかもっと楽な方法はないかなと思って見つけたのが今回のFine Code Coverageでした。

しかしFine Code Coverage便利なのにそこまで利用されているように見えないのは、やはりテストに関心がある人が少ないのか、公式にあるカバレッジHTMLを吐く方法で納得しているのか、その辺りが気になりました。自前でFine Code Coverageの様な物を作っている人もいるでしょうが、それは少数派だと思いますし。

この方法で取れるカバレッジは正しいものか？

GitHubのREADMEを読む限り、組み込みのカバレッジレポーターのAPIを叩いて取ってきたものを表示しているだけに見えるので、恐らく正しいデータが出ているのではないかと思います。

少なくとも単純なコードのUnit testingを書いた感じではテストケースを増減することでカバレッジも連動して増減していたのと、組み込みのレポーターがそのくらいはやってくれている筈で、これはその内容を表示しているだけなので恐らく大丈夫なのではないかと考えています。