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”})とパラメータを与えることで任意のタグを反映できます。

JavaScript

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で一定時間ごとに処理を実行するための、シンプルなタイマーのサンプルです。

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(); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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」オブジェクトを作成して、引数に実行したい関数と時間を設定します。

JavaScript

function test() { console.log("テスト"); } let timmer = setTimer(test, 5000);

1
2
3
4
5

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

let timmer = setTimer(test, 5000);

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

JavaScript

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

1
2
3

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

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

2022.12.24 / Notes

WordPress

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

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');

1
2
3
4
5
6
7
8
9

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

GSAP

JavaScript

jQuery

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<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>

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

CSS

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

1
2
3
4
5
6
7
8

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

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

JavaScript

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"); });

1
2
3
4
5
6
7
8
9

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

SEO

WordPress

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

PHP

remove_action('wp_head', 'rel_canonical');

1

remove_action('wp_head', 'rel_canonical');

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

PHP

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

1
2
3

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

あとはheader.phpの内に、Canonical URLのタグを出力するように記述します。

XHTML

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

1

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

NEXT