お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
投稿日:
ソフトウェア::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');

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

雑感

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

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

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

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

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

マークアップレンダリングの参考
image-1679674032699.png

Database 機能について

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

テーブルの参考
テーブルの参考

ワークスペースについて

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

ワークスペース画面
ワークスペース画面

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

共同編集者の設定
共同編集者の設定

レイアウト機能とか

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

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

UIとか

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

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

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

アプリについて

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

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

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

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

機能 Notion Loop 備考
Markdown ⚠️ Loopでは見出しとリストくらいしか使えませんでした
Database Loopだとチケット管理や看板はできそうにないです
一応TODOリストレベルのものはあります
マルチワークスペース Loopは1アカウントで複数のワークスペースを持てますが、Notionは別アカウントが必要です。
レイアウト機能 Loopは左右のレイアウト分割みたいなことは出来ないようです
画像プレビュー Loopでも添付画像の縮小はできますが、縮小した画像をクリックして元サイズを見ることは出来ません

FocalboardというNotionクローンがあるらしく試してみた結果のメモ。
外部に公開することは一切考慮していません。ローカルマシンでの個人利用を想定しています。

確認環境

Env Ver
Ubuntu 20.04.4 LTS
WSL2 1.0.3.0
Focalboard 0.15.0
MySQL Ver 15.1 Distrib 10.3.37-MariaDB

前提条件

  • MySQLはセットアップ済み

手順

基本的なセットアップ

wget https://github.com/mattermost/focalboard/releases/download/v0.15.0/focalboard-server-linux-amd64.tar.gz
tar -xvzf focalboard-server-linux-amd64.tar.gz
sudo mv focalboard /var/lib/

cat <<'EOF' | sudo tee /etc/nginx/conf.d/focalboard.conf
upstream focalboard {
   server localhost:15001;
   keepalive 32;
}

server {
   server_name  focalboard.test;
   access_log   /var/log/nginx/focalboard.access.log;
   error_log    /var/log/nginx/focalboard.error.log;

   location ~ /ws/* {
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection "upgrade";
       client_max_body_size 50M;
       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Frame-Options SAMEORIGIN;
       proxy_buffers 256 16k;
       proxy_buffer_size 16k;
       client_body_timeout 60;
       send_timeout 300;
       lingering_timeout 5;
       proxy_connect_timeout 1d;
       proxy_send_timeout 1d;
       proxy_read_timeout 1d;
       proxy_pass http://focalboard;
   }

   location / {
       client_max_body_size 50M;
       proxy_set_header Connection "";
       proxy_set_header Host $http_host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto $scheme;
       proxy_set_header X-Frame-Options SAMEORIGIN;
       proxy_buffers 256 16k;
       proxy_buffer_size 16k;
       proxy_read_timeout 600s;
       proxy_cache_revalidate on;
       proxy_cache_min_uses 2;
       proxy_cache_use_stale timeout;
       proxy_cache_lock on;
       proxy_http_version 1.1;
       proxy_pass http://focalboard;
   }
}
EOF

sudo cat << 'EOF' | sudo tee /etc/init.d/focalboard
#!/bin/sh
## BEGIN INIT INFO
# Provides:          focalboard
# Required-Start:    $syslog $network
# Required-Stop:     $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: A self-hosted Git service written in Go.
# Description:       A self-hosted Git service written in Go.
## END INIT INFO

. /lib/lsb/init-functions

# PATH should only include /usr/* if it runs after the mountnfs.sh script
PATH=/sbin:/usr/sbin:/bin:/usr/bin:/usr/local/bin
DESC="Focalboard server"
NAME=focalboard
SERVICEVERBOSE=yes
PIDFILE=/run/$NAME.pid
STOP_SCHEDULE="${STOP_SCHEDULE:-QUIT/5/TERM/1/KILL/5}"

do_start()
{
    start-stop-daemon --start --quiet --pidfile $PIDFILE --make-pidfile \
        --background --chdir /var/lib/focalboard \
        --exec /var/lib/focalboard/bin/focalboard-server
}

do_stop()
{
    kill -9 $(cat /run/focalboard.pid)
    # does not work
    #start-stop-daemon --stop --quiet --retry=$STOP_SCHEDULE --pidfile $PIDFILE --name $NAME --oknodo
    rm -f $PIDFILE
}

do_status()
{
    if [ -f $PIDFILE ]; then
        if kill -0 $(cat "$PIDFILE"); then
            echo "$NAME is running, PID is $(cat $PIDFILE)"
        else
            echo "$NAME process is dead, but pidfile exists"
        fi
    else
        echo "$NAME is not running"
    fi
}

case "$1" in
    start)
        log_daemon_msg "Starting $DESC" "$NAME"
        do_start
        ;;
    stop)
        log_daemon_msg "Stopping $DESC" "$NAME"
        do_stop
        ;;
    status)
        do_status
        ;;
    restart)
        log_daemon_msg "Restarting $DESC" "$NAME"
        do_stop
        do_start
        ;;
    *)
        log_daemon_msg "Usage: $SCRIPTNAME {start|stop|status|restart}" >&2
        exit 2
        ;;
esac

exit 0
EOF

sudo chmod 755 /etc/init.d/focalboard
sudo update-rc.d focalboard defaults

mysql -u XXX -pYYY

DBの作成

CREATE DATABASE boards;
GRANT ALL on boards.* to 'boardsuser'@'localhost' identified by 'boardsuser-password';
exit

DBとportの変更

nano /var/lib/focalboard/config.json

portdbtypeを以下の内容に書き換え

    "port": 15001,
    "dbtype": "mysql",

起動

以下を叩き http://focalboard.test/ にアクセスできればOK

sudo service focalboard start

感想

Notionっぽいけどかなりしょぼい
ボードが作れてmdが書ける程度
2カラムレイアウト作るとか、画像をドラッグで移動するとかはできない
表組みへの画像挿入は「画像添付 -> 表のmdを書く -> HTMLからblob URLを貼る」で可能だが、見切れるので微妙

今のところ実用性はあまりないかも

参考

ログイン時と非ログイン時でコードブロックの改行が変化し、見た目が破綻する問題に気がついたので解決法

問題の事象

ログイン状態だと正常に表示されるが、非ログイン状態だとスーパーリロードなどをすると表示が壊れる

ログイン時 非ログイン時
正常表示
破綻した表示

問題の原因と解決策

非ログイン時にHTML上から改行コードが消えるのが問題でした

解決策としてはダッシュボードからSANGO設定高速化HTMLを圧縮してキャッシュするのチェックを外せば解消します

解決したときの設定画面