Almondlab

JavaScriptでテキストを一文字ずつ分割。

2023.05.18 / Labs

JavaScript

JavaScriptでテキストを一文字ずつ分割するためのスクリプトです。

function splitText(params = {}) {
	const tag = params.tag || "i";
	document.querySelectorAll(".split-text").forEach((element_01) => {
		let content = "";
		Array.from(element_01.childNodes).forEach((element_02) => {
			if (element_02.nodeType == 3) {
				element_02.textContent.trim().split("").forEach((text) => {
					text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;
					content += text;
				});
			} else {
				content += element_02.outerHTML;
			}
		});
		element_01.innerHTML = content;
	});
}

function splitText(params = {}) {

const tag = params.tag || "i";

document.querySelectorAll(".split-text").forEach((element_01) => {

let content = "";

Array.from(element_01.childNodes).forEach((element_02) => {

if (element_02.nodeType == 3) {

element_02.textContent.trim().split("").forEach((text) => {

text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;

content += text;

});

} else {

content += element_02.outerHTML;

}

});

element_01.innerHTML = content;

});

}

あらかじめ対象のテキストには「split-text」というクラスをつけておいて、
splitText()を実行すると、一文字ずつタグで囲まれて分割されます。
囲むタグの変更には、splitText({tag:”span”})とパラメータを与えることで任意のタグを反映できます。

text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;

1	text = (!text.match(/[\s　]/)) ? "<"+tag+">"+text+"</"+tag+">" : text;

上記の「!text.match(/[\s　]/)」の箇所で、半角スペースと全角スペースは対象外としています。

JavaScriptでシンプルなタイマーのサンプル。

2023.04.30 / Labs

JavaScript

JavaScriptで一定時間ごとに処理を実行するための、シンプルなタイマーのサンプルです。

function setTimer(callback, time) {
	let id = window.setInterval(play, time);
	let timer, time_start, time_rest;
	timer = {
		reset:() => {
			window.clearInterval(id);
			time_rest = 0;
		},
		pause:() => {
			window.clearInterval(id);
			time_rest = time-(new Date()-time_start);
		},
		resume:() => {
			window.clearInterval(id);
			window.setTimeout(() => {
				id = window.setInterval(play, time);
			}, time_rest);
		},
	};
	return timer;

	function play() {
		time_start = new Date();
		callback();
	}
}

function setTimer(callback, time) {

let id = window.setInterval(play, time);

let timer, time_start, time_rest;

timer = {

reset:() => {

window.clearInterval(id);

time_rest = 0;

pause:() => {

window.clearInterval(id);

time_rest = time-(new Date()-time_start);

resume:() => {

window.clearInterval(id);

window.setTimeout(() => {

id = window.setInterval(play, time);

}, time_rest);

};

return timer;

function play() {

time_start = new Date();

callback();

}

使い方は「setTimmer」オブジェクトを作成して、引数に実行したい関数と時間を設定します。

function test() {
  console.log("テスト");
}

let timmer = setTimer(test, 5000);

function test() {

console.log("テスト");

}

let timmer = setTimer(test, 5000);

上記では5秒ごとに、コンソールログに「テスト」と出力されます。
タイマーの一時停止には「pause()」、経過時間のリセットには「reset()」、再開には「resume()」を実行します。

timmer.reset();
timmer.pause();
timmer.resume();

timmer.reset();

timmer.pause();

timmer.resume();

WordPressでbodyタグに権限を識別するためのクラスを追加

2022.12.24 / Notes

WordPress

WordPressのテーマで、bodyタグに権限を識別するためのクラスを追加する際のメモです。
テーマの「functions.php」に下記のように追記します。

function theme_role_class($classes) {
	$user = wp_get_current_user();
	if ($user->roles[0]) {
		$classes[] = 'role-'.$user->roles[0];
	}
	return $classes;
}

add_filter('body_class', 'theme_role_class');

function theme_role_class($classes) {

$user = wp_get_current_user();

if ($user->roles[0]) {

$classes[] = 'role-'.$user->roles[0];

}

return $classes;

}

add_filter('body_class', 'theme_role_class');

例えば、管理者としてログインしている場合に「role-administrator」というクラスがbodyタグに追加されます。

GSAPでアコーディオンメニュー作成のサンプル。

2022.01.09 / Notes

JavaScriptライブラリのGSAPを使ったアコーディオンメニュー作成のサンプルです。
サンプルはこちら
HTMLは「div.menu」内に開閉用のボタンとリストのみを配置します。

<div class="menu">
<p class="button">ボタン</p>
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
<li>リスト6</li>
<li>リスト7</li>
<li>リスト8</li>
<li>リスト9</li>
<li>リスト10</li>
</ul>
</div><!-- menu -->

<ul>

</ul>

</div>

初期表示で「height:0px; overflow: hidden;」として見えない状態にしておきます。
「pointer-events: none;」は閉じている時に、タブキー等でメニュー内の項目にフォーカスが当たらないようにしています。

ul {
  height: 0px;
  overflow: hidden;
  pointer-events: none;
}
ul.open {
  pointer-events: auto;
}

ul {

height: 0px;

overflow: hidden;

pointer-events: none;

}

ul.open {

pointer-events: auto;

}

開閉用のボタンがクリックされたら、「open」クラスの有無により開閉を行います。

let menu = $("div.menu");
menu.find("p.button").on("click", () => {
  gsap.to(menu.find("ul"), {
    height: (menu.hasClass("open")) ? 0 : "auto",
    duration: 0.25,
    ease: "power2.inOut"
  });
  menu.toggleClass("open");
});

let menu = $("div.menu");

menu.find("p.button").on("click", () => {

gsap.to(menu.find("ul"), {

height: (menu.hasClass("open")) ? 0 : "auto",

duration: 0.25,

ease: "power2.inOut"

});

menu.toggleClass("open");

});

WordPressでCanonical URLの置き換え。

2021.06.02 / Notes

WordPressでは

内に、自動でCanonical URLのタグを出力してくれますが、期待通りにならない場合があります。
そのため自動出力の設定を外して、独自に関数を作成しておくと便利です。
自動出力を外すには、functions.phpで次のように記述します。

remove_action('wp_head', 'rel_canonical');

1	remove_action('wp_head', 'rel_canonical');

Canonical URLを置き換えるための関数は、同じくfunctions.php内に、次のように追記します。

function get_url() {
	return (is_ssl() ? 'https://' : 'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}

function get_url() {

return (is_ssl() ? 'https://' : 'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

}

あとはheader.phpの

内に、Canonical URLのタグを出力するように記述します。

<link rel="canonical" href="<?php echo get_url(); ?>">

1	<link rel="canonical" href="<?php echo get_url(); ?>">