JavaScript

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

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

YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

CSS

JavaScript

jQuery

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

<div class="video-wrapper"> <iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe> </div>

1
2
3

<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/xxxxxxxxxx"></iframe>
</div>

CSS

div.video-wrapper { position: relative; padding-bottom: 56.25%; /* 比率が16:9の場合 */ } div.video-wrapper iframe { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; }

1
2
3
4
5
6
7
8
9
10
11

div.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 比率が16:9の場合 */
}
div.video-wrapper iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
}

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript（jQuery）で一括で処理を行っておくと便利です。

JavaScript

$("iframe[src*='youtube.com']").each(function() { $(this).wrap("<div class=\"video-wrapper\"></div>"); });

1
2
3

$("iframe[src*='youtube.com']").each(function() {
$(this).wrap("<div class=\"video-wrapper\"></div>");
});

FullCalendarバージョン4の設置サンプル。

2019.08.14 / Labs

JavaScript

JSON

カレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。
FullCalendarのJavaScript、CSSの各ファイル（計4点）はCDNから読み込んでいます。
サンプルはこちら

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>FullCalendar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script> <script> //本日、カレンダーの開始日、終了日と、曜日のテキストを用意します var date_now = new Date(); var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1); var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1); var days = ["日", "月", "火", "水", "木", "金", "土"]; date_end.setMonth(date_end.getMonth()+12); document.addEventListener("DOMContentLoaded", function() { //FullCalendarを生成します var calendar = new FullCalendar.Calendar(document.getElementById("calendar"), { //プラグインを読み込みます plugins: ["dayGrid"], //ヘッダー内の配置を、左に前月ボタン、中央にタイトル、右に次月ボタンに設定します header: { left: "prev", center: "title", right:" next" }, //ボタンのテキストを書き換えます buttonText: { prev: "前の月", next: "次の月" }, //デフォルト日を本日に設定します defaultDate: date_now, //有効期間を当月1日から12ヶ月後（1年後）に設定します。 validRange: { start: date_start, end: date_end }, //イベント情報をJSONファイルから読み込みます events: "events.json", //タイトルを書き換えます（2019年8月） titleFormat: function(obj) { return obj.date.year+"年"+(obj.date.month+1)+"月"; }, //曜日のテキストを書き換えます（日〜土） columnHeaderText: function(obj) { return days[obj.getDay()]; }, //イベントのクリック時の処理を加えます eventClick: function(obj) { alert(obj.event.title); } }); calendar.render(); }); </script> </head> <body>  <div id="calendar"></div> </body> </html>

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FullCalendar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js"></script>
<script>

//本日、カレンダーの開始日、終了日と、曜日のテキストを用意します
var date_now = new Date();
var date_start = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var date_end = new Date(date_now.getFullYear(), date_now.getMonth(), 1);
var days = ["日", "月", "火", "水", "木", "金", "土"];
date_end.setMonth(date_end.getMonth()+12);

document.addEventListener("DOMContentLoaded", function() {

  //FullCalendarを生成します
  var calendar = new FullCalendar.Calendar(document.getElementById("calendar"), {

    //プラグインを読み込みます
    plugins: ["dayGrid"],

    //ヘッダー内の配置を、左に前月ボタン、中央にタイトル、右に次月ボタンに設定します
    header: {
      left: "prev",
      center: "title",
      right:" next"
    },

    //ボタンのテキストを書き換えます
    buttonText: {
      prev: "前の月",
      next: "次の月"
    },

    //デフォルト日を本日に設定します
    defaultDate: date_now,

    //有効期間を当月1日から12ヶ月後（1年後）に設定します。
validRange: {
      start: date_start,
      end: date_end
    },

    //イベント情報をJSONファイルから読み込みます
events: "events.json",

    //タイトルを書き換えます（2019年8月）
    titleFormat: function(obj) {
      return obj.date.year+"年"+(obj.date.month+1)+"月";
    },

    //曜日のテキストを書き換えます（日〜土）
    columnHeaderText: function(obj) {
      return days[obj.getDay()];
    },

    //イベントのクリック時の処理を加えます
    eventClick: function(obj) {
      alert(obj.event.title);
    }
  });
  calendar.render();
});
</script>
</head>
<body>


<div id="calendar"></div>

</body>
</html>

日本語化には標準で各言語に対応（ドキュメント）していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。
イベント情報のJSONファイル（events.json）は次のように記述しています。外部ファイルではなく、直接記述でもOKです。

[ { "title": "イベント1", "start": "2019-08-15", "className": ["event event-01"] }, { "title": "イベント2", "start": "2019-09-15", "className": ["event event-02"] }, { "title": "イベント3", "start": "2019-10-15", "className": ["event event-03"] }, { "title": "イベント4", "start": "2019-11-15", "className": ["event event-04"] }, { "title": "イベント5", "start": "2019-12-15", "end": "2019-12-20", "className": ["event event-05"] } ]

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

[
    {
        "title": "イベント1",
        "start": "2019-08-15",
        "className": ["event event-01"]
    },
    {
        "title": "イベント2",
        "start": "2019-09-15",
        "className": ["event event-02"]
    },
    {
        "title": "イベント3",
        "start": "2019-10-15",
        "className": ["event event-03"]
    },
    {
        "title": "イベント4",
        "start": "2019-11-15",
        "className": ["event event-04"]
    },
    {
        "title": "イベント5",
        "start": "2019-12-15",
        "end": "2019-12-20",
        "className": ["event event-05"]
    }
]

NEXT