てがろぐに塗り潰しで隠す機能を追加

てがろぐの隠す機能は内容が畳まれてボタンのみになる為、展開すると後続の文字の位置がズレる。
文章中の伏せ字として使えるように、要素のサイズは確保して塗り潰しで隠すタイプを追加した。

機能

  • 文章中の一部を塗り潰しで隠す
  • マウスホバー(モバイルではタップ)で内容を表示する
  • 内容はOGPとRSSに出力しない
  • 標準のボタンで畳むタイプと使い分ける

CSSと自由装飾で実装する。

続きを読む てがろぐに塗り潰しで隠す機能を追加

てがろぐ編集画面の装飾を楽にする

編集画面は専用のedit.cssとedit.jsが必要で、インラインCSSも書き込まれているので打消しが面倒。
インラインCSSを削除してCSSを一本化した。

インラインCSSを削除

  • edit.jsに以下を追加
document.addEventListener('DOMContentLoaded', () => {
	document.head.querySelectorAll('style').forEach((style) => {
		style.remove();
	});
});

メインCSSと一本化

  • edit.cssを以下のインポート文のみにするか、メインCSSをedit.cssにする
@import "tegalog.css"

WordPressでFancybox v5を使う

てがろぐに導入したFancybox v5をWordPressにも導入。
(共にPhotoSwipeからの移行)
プラグインのFancyBox for WordPressはVerが古く更新も無いので自分で実装した。

動作条件

  • ヘッダでFancyboxのCSSを読み込む
  • フッタでFancyboxのJSと初期化用JSを読み込む
  • 投稿内の画像リンクにdata属性を追加する
続きを読む WordPressでFancybox v5を使う

てがろぐでFancybox v5を使う

PhotoSwipeとてがろぐの相性が悪く、Fancyboxに変更した。

(PhotoSwipeは独自の画像サイズ指定タグが必要だが、ページ読み込み後にJSで付与する場合は処理が遅れる場合がある。てがろぐ本体に処理を追加する場合は更新の度に手動マージが必要で、AVIFやWebPのサイズは取得出来ない)

PhotoSwipeと比較して、

  • ◯ 画像サイズ取得が不要
  • ◯ オプションでホイール画像切替が可能 (PhotoSwipeはスクリプト改変)
  • ◯ ギャラリーのサムネイル表示が可能
  • △ ギャラリーを投稿毎に分けられない

てがろぐ公式の実装サンプルはFancybox v3用の解説だった為、v5設置の覚書。

続きを読む てがろぐでFancybox v5を使う

楽しいDDRDP譜面

ノンバーDPを楽しく踏めるLv8~12の曲リスト

◇8
KIMONO♡PRINCESS [B] 8
FA・左右振り
Vanquish The Ghost [B] 8
停止・低速地帯
UNBELIEVABLE (Sparky remix) [B] 8
RED ZONE [D] 8
FA
Heatstroke [D] 8
FA・渡り
HAPPY☆ANGEL [D] 8
同時・高速
Show me your moves [D] 8
Silver Platform -I wanna… [D] 8
◇9
SILVER☆DREAM [B] 9
FA
sola [D] 9
トラボルタ
xenon [D] 9
FA
DIGITAL LUV [D] 9
無難
フー・フローツ [D] 9
Do The Evolution [D] 9
Theory of Eternity [D] 9
無難
Poseidon (kors k mix) [D] 9
同時・停止
Right on time (Ryu☆Remix) [D] 9
INSIDE YOUR HEART [E] 9
低速
DYNAMITE RAVE (“AIR” Special) [C] 9
同時・遠配置
†渚の小悪魔ラヴリィ~レイディオ† [C] 9
SA
◇10
ÆTHER [B] 10
体力
朧 [D] 10
Tribe [D] 10
Xepher [D] 10
siberite [D] 10
ALGORITHM [D] 10
左右振り
bass 2 bass [D] 10
Get Back Up! [D] 10
左右振り
Amalgamation [D] 10
体力
Too Late Snow [D] 10
Crazy Shuffle [D] 10
ダンスラ風
STERLING SILVER [D] 10
The Wind of Gold [D] 10
同時
Midnight Amaretto [D] 10
Take A Step Forward [D] 10
交互難
Somehow You Found Me [D] 10
春風ブローインウィンド [D] 10
ビューティフル レシート [D] 10
FA
WARNING×WARNING×WARNING [D] 10
MOON [E] 10
south [E] 10
名譜面
Din Don Dan [E] 10
PASSION OF LOVE [E] 10
CHOCOLATE PHILOSOPHY [E] 10
ゆるい渡り
◇11
PUNISHER [D] 11
捻り・渡り
True Blue [D] 11
体力
IMANOGUILTS [D] 11
停止・体力
ZEPHYRANTHES [D] 11
FA
Pump Pump Pump [D] 11
無難
Romancing Layer [D] 11
捻り
打打打打打打打打打打 [D] 11
Dancer in the flare [D] 11
渡り
Habibe (Antuh muhleke) [D] 11
スキップ
轟け!恋のビーンボール!! [D] 11
体力
BRILLIANT 2U (AKBK MIX) [D] 11
恋はどう?モロ◎波動OK☆方程式!! [D] 11
低速地帯
Blue Rain [E] 11
捻り
jane jana [E] 11
交互・渡り
Gotta Dance [E] 11
中央捻り
Vem brincar [E] 11
FA・渡り
Diamond Dust [E] 11
無難
Mermaid girl [E] 11
無難
rainbow flyer [E] 11
交互
MY SUMMER LOVE [E] 11
低速・カニ
One Sided Love [E] 11
交互・捻り
おねがいダーリン [E] 11
無難
華爛漫 -Flowers- [E] 11
スキップ
A Geisha’s Dream [E] 11
スキップ
V ~for EXTREME~ [E] 11
渡り
BALLAD THE FEATHERS [E] 11
スキップ
Playa (Original Mix) [E] 11
交互・8分滝
Polovtsian Dances And Chorus [E] 11
捻り
Party Lights (Tommie… [E] 11
渡り・FA
south [C] 11
SA
◇12
VANESSA [D] 12
スキップ
SABER WING [D] 12
停止
NEPHILIM DELTA [D] 12
体力
Decade [E] 12
スキップ・FA
esrev:eR [E] 12
交互・FA
Sweet Rain [E] 12
La libertad [E] 12
スキップ
New Gravity [E] 12
You are a Star [E] 12
スキップ・捻り
Follow Tomorrow [E] 12
渡り
Dazzlin’ Darlin [E] 12
Secret Rendez-vous [E] 12
低速
Theory of Eternity [E] 12
体力
COME BACK TO MY HEART [E] 12
無難
Dazzlin’ Darlin -秋葉工房mix- [E] 12
捻り・渡り
Blind Justice ~Torn souls… [E] 12
渡り
アルストロメリア (walk with… [E] 12
無難・渡り
続きを読む 楽しいDDRDP譜面

Squoosh-CLIで画像圧縮 (AVIF)

Squoosh-CLIで画像圧縮 (MozJpeg)の時点ではブラウザ対応状況が芳しくなく見送ったが、EdgeもWordPress6.5も対応したのでAVIF移行の機運。

本家Squoosh-CLI(開発終了)はAVIF変換時にエラーが出た為、フォークに移行した。
https://www.npmjs.com/package/@frostoven/squoosh-cli

続きを読む Squoosh-CLIで画像圧縮 (AVIF)

Firefishへの移行と更新

Calckeyからリブランド後、主要開発者がプロジェクト放棄してしまったFirefish。
まだ適当な移行先が見付からず、残されたメンバーでセキュリティ関連等の更新はされている為、アプデ手順の覚書。

移行や更新前にRustのバージョンアップやPGroongaのインストールが必要になる。

移行

続きを読む Firefishへの移行と更新