- 投稿日:
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同様に背景色か前景色が設定できるので悪くないと思います。
マークアップレンダリングの参考 |
---|
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と比べた時に画像添付やページ管理が非力なのが微妙な感じ)
ざっくりとした大まかな機能比較
機能 | 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
port
とdbtype
を以下の内容に書き換え
"port": 15001,
"dbtype": "mysql",
起動
以下を叩き http://focalboard.test/ にアクセスできればOK
sudo service focalboard start
感想
Notionっぽいけどかなりしょぼい
ボードが作れてmdが書ける程度
2カラムレイアウト作るとか、画像をドラッグで移動するとかはできない
表組みへの画像挿入は「画像添付 -> 表のmdを書く -> HTMLからblob URLを貼る」で可能だが、見切れるので微妙
今のところ実用性はあまりないかも