POP・ミニピル

あすか製薬の発表でミニピル認可が話題になっていたが、人によってPOPとミニピルの定義、第4世代黄体ホルモンの表記等が異なり、薬についても商品名と成分名とジェネリック商品名が混在して混乱を極めた為、分かる範囲で調べた内容の覚書。

続きを読む POP・ミニピル

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

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

機能

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

てがろぐ投稿フォームのカスタマイズ

投稿フォームにボタン追加

自由装飾等を楽に挿入する為、投稿フォームに任意のボタンを追加する。

  • 以下をスキンのフッタに<script>で追加し、ボタンの内容を変更する
    • 編集画面用にedit.jsにも追加するか、edit.jsをスキンで読み込んで共通化する
function myBtn(decoSign) {
	let tArea = document.getElementsByClassName('tegalogpost');
	let tValue = tArea[0].value;
	let staPos = parseInt(tArea[0].selectionStart, 10);
	let endPos = parseInt(tArea[0].selectionEnd, 10);
	let txtBef = tValue.substring(0, staPos);
	let txtAft = tValue.substring(endPos);
	let txtSel = tValue.substring(staPos, endPos);
	let newText;
	let curBack;

	// 挿入するテキストとカーソルを戻す量
	if (decoSign == 'HM') {
		newText = '[F:more:[H:' + txtSel + ']]';
		curBack = 2;
	} else if (decoSign == 'SP') {
		newText = '[F:sp: ]';
		curBack = 0;
	} else if (decoSign == 'CD') {
		newText = '[F:code:' + txtSel + ']';
		curBack = 1;
	}

	tArea[0].value = txtBef + newText + txtAft;
	tArea[0].focus();
	let cursorPos = staPos + newText.length;
	if (txtSel.length == 0) {
		cursorPos = cursorPos - curBack;
	}
	tArea[0].setSelectionRange(cursorPos, cursorPos);
}

document.addEventListener('DOMContentLoaded', () => {
	// このボタンの後に追加する
    let hideBtn = document.querySelector('input[title="隠す(hide)"]');

    if (hideBtn) {
		// 追加するボタンのテキスト
        let myBtn1 = document.createElement('input');
        myBtn1.type = 'button';
        myBtn1.value = '畳む';
        myBtn1.setAttribute('onclick', "myBtn('HM');");

        let myBtn2 = document.createElement('input');
        myBtn2.type = 'button';
        myBtn2.value = '  ';
        myBtn2.setAttribute('onclick', "myBtn('SP');");

        let myBtn3 = document.createElement('input');
        myBtn3.type = 'button';
        myBtn3.value = '< >';
        myBtn3.setAttribute('onclick', "myBtn('CD');");

        hideBtn.parentNode.insertBefore(myBtn1, hideBtn.nextSibling);
        hideBtn.parentNode.insertBefore(myBtn2, myBtn1.nextSibling);
        hideBtn.parentNode.insertBefore(myBtn3, myBtn2.nextSibling);
    }
});
続きを読む てがろぐ投稿フォームのカスタマイズ

WordPressでFancybox v5を使う

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

Fancybox動作条件

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

てがろぐでFancybox v5を使う

PhotoSwipeとてがろぐの相性が悪いのでFancyboxに移行した。

移行理由

  • PhotoSwipe独自の画像サイズタグの追加が面倒
    • JSでのページ読込後の付与は処理が遅れる場合がある
    • てがろぐ本体の改変は更新の度に手動マージが必要かつ、AVIFやWebPはサイズ取得不可

移行後

  • ◯ 画像サイズ取得が不要
  • ◯ オプションでホイール画像切替が可能 (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)