Labs

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

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"]
    }
]

フォームのデザインのまとめ。

2017.12.19 / Labs

CSS

CSS3

Form

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

<form> <input type="text" placeholder="テキストフィールド"> <br> <br> <textarea placeholder="テキストエリア"></textarea> <br> <br> <select> <option value="0">セレクト1</option> <option value="1">セレクト2</option> <option value="2">セレクト3</option> </select> <br> <br> <label class="option"><input type="radio" name="radio" value="0"><span><i></i></span>ラジオボタン1</label> <label class="option"><input type="radio" name="radio" value="1"><span><i></i></span>ラジオボタン2</label> <label class="option"><input type="radio" name="radio" value="2"><span><i></i></span>ラジオボタン3</label> <br> <br> <label class="option"><input type="checkbox" name="checkbox" value="0"><span><i></i></span>チェックボックス1</label> <label class="option"><input type="checkbox" name="checkbox" value="1"><span><i></i></span>チェックボックス2</label> <label class="option"><input type="checkbox" name="checkbox" value="2"><span><i></i></span>チェックボックス3</label> <br> <br> <input type="button" value="汎用ボタン"> <input type="submit" value="送信ボタン"> </form>

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

<form>
<input type="text" placeholder="テキストフィールド">
<br>
<br>
<textarea placeholder="テキストエリア"></textarea>
<br>
<br>
<select>
<option value="0">セレクト1</option>
<option value="1">セレクト2</option>
<option value="2">セレクト3</option>
</select>
<br>
<br>
<label class="option"><input type="radio" name="radio" value="0"><span><i></i></span>ラジオボタン1</label>
<label class="option"><input type="radio" name="radio" value="1"><span><i></i></span>ラジオボタン2</label>
<label class="option"><input type="radio" name="radio" value="2"><span><i></i></span>ラジオボタン3</label>
<br>
<br>
<label class="option"><input type="checkbox" name="checkbox" value="0"><span><i></i></span>チェックボックス1</label>
<label class="option"><input type="checkbox" name="checkbox" value="1"><span><i></i></span>チェックボックス2</label>
<label class="option"><input type="checkbox" name="checkbox" value="2"><span><i></i></span>チェックボックス3</label>
<br>
<br>
<input type="button" value="汎用ボタン">
<input type="submit" value="送信ボタン">
</form>

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

CSS

body { font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif; } input[type=text], input[type=email], input[type=password], input[type=button], input[type=submit], textarea, select { box-sizing: border-box; font-size: 16px; line-height: 30px; outline: none; border: none; margin: 0px; border-radius: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type=text], input[type=email], input[type=password], select, textarea { background-color: #eeeeee; } input[type=text], input[type=email], input[type=password], textarea { line-height: 20px; } input[type=text], input[type=email], input[type=password] { height: 30px; text-indent: 10px; padding: 5px 0px; } input[type=button], input[type=submit] { display: inline-block; text-align: center; color: #ffffff; cursor: pointer; padding: 0px 10px; background-color: #666666; transition: 0.25s opacity ease; } input[type=button]:hover, input[type=submit]:hover { opacity: 0.75; } label.option { margin-right: 20px; } label.option input[type=radio], label.option input[type=checkbox] { display: none; } label.option input[type=radio] + span, label.option input[type=checkbox] + span { display: inline-block; position: relative; width: 20px; height: 20px; vertical-align: middle; cursor: pointer; margin-right: 5px; background-color: #eeeeee; } label.option input[type=radio] + span { border-radius: 50%; } label.option input[type=checkbox] + span { border-radius: 5px; } label.option input[type=radio] + span i, label.option input[type=checkbox] + span i { display: block; position: absolute; opacity: 0; transition: 0.25s opacity ease; } label.option input[type=radio] + span i { width: 10px; height: 10px; left: 5px; top: 5px; background-color: #666666; border-radius: 50%; } label.option input[type=checkbox] + span i { width: 5px; height: 10px; left: 6px; top: 1px; border-right: 3px solid #666666; border-bottom: 3px solid #666666; transform: rotate(45deg); } label.option input[type=radio]:checked + span i, label.option input[type=checkbox]:checked + span i { opacity: 1; } select { height: 30px; padding: 0px 40px 0px 10px; background-image: url(images/arrow-select.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: auto 10px; } select::-ms-expand { display: none; } textarea { padding: 5px 10px; }

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

body {
font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Verdana, Meiryo, sans-serif;
}
input[type=text],
input[type=email],
input[type=password],
input[type=button],
input[type=submit],
textarea,
select {
box-sizing: border-box;
font-size: 16px;
line-height: 30px;
outline: none;
border: none;
margin: 0px;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input[type=text],
input[type=email],
input[type=password],
select,
textarea {
background-color: #eeeeee;
}
input[type=text],
input[type=email],
input[type=password],
textarea {
line-height: 20px;
}
input[type=text],
input[type=email],
input[type=password] {
height: 30px;
text-indent: 10px;
padding: 5px 0px;
}
input[type=button],
input[type=submit] {
display: inline-block;
text-align: center;
color: #ffffff;
cursor: pointer;
padding: 0px 10px;
background-color: #666666;
transition: 0.25s opacity ease;
}
input[type=button]:hover,
input[type=submit]:hover {
opacity: 0.75;
}
label.option {
margin-right: 20px;
}
label.option input[type=radio],
label.option input[type=checkbox] {
display: none;
}
label.option input[type=radio] + span,
label.option input[type=checkbox] + span {
display: inline-block;
position: relative;
width: 20px;
height: 20px;
vertical-align: middle;
cursor: pointer;
margin-right: 5px;
background-color: #eeeeee;
}
label.option input[type=radio] + span {
border-radius: 50%;
}
label.option input[type=checkbox] + span {
border-radius: 5px;
}
label.option input[type=radio] + span i,
label.option input[type=checkbox] + span i {
display: block;
position: absolute;
opacity: 0;
transition: 0.25s opacity ease;
}
label.option input[type=radio] + span i {
width: 10px;
height: 10px;
left: 5px;
top: 5px;
background-color: #666666;
border-radius: 50%;
}
label.option input[type=checkbox] + span i {
width: 5px;
height: 10px;
left: 6px;
top: 1px;
border-right: 3px solid #666666;
border-bottom: 3px solid #666666;
transform: rotate(45deg);
}
label.option input[type=radio]:checked + span i,
label.option input[type=checkbox]:checked + span i {
opacity: 1;
}
select {
height: 30px;
padding: 0px 40px 0px 10px;
background-image: url(images/arrow-select.svg);
background-repeat: no-repeat;
background-position: right 10px center;
background-size: auto 10px;
}
select::-ms-expand {
display: none;
}
textarea {
padding: 5px 10px;
}

jQueryで埋め込まれたSVGを操作する方法。

2015.07.20 / Labs

JavaScript

jQuery

SVG

ベクターベースのSVG画像は、ディプレイの高解像度化が進む中、今後より重要になっていきそうです。
SVG画像自体はイラストレータなどベクターグラフィックのソフトで作成し書き出すこともでき、また単純な図形であれば、XMLにより直接記述することも可能です。

SVG画像の強みとしては、JavaScriptで操作することもできるため、画像内のパーツに対して個別にアニメーションを加えることも可能です。
JavaScriptで操作の際に、HTMLに直接SVGを記述するインライン形式では簡単にjQueryから操作できますが、objectとして埋め込まれたSVGに対しては、少しだけ工夫が必要です。
サンプルはこちら

下記は「test.svg」という円のみ描かれた単純なSVG画像で、円をマウスオーバーによって透明度を変化するスクリプトです。

JavaScript

$(function() { $("#test").on("load", function() { //object読み込み後に実行 var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得 var circle = rect.find("#circle"); //SVGの中の円を取得 circle.on({ "mouseenter": function() { $(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に }, "mouseleave": function() { $(this).css({opacity:1}); //マウスアウトで透明度を1に } }); }); });

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

$(function() {
$("#test").on("load", function() { //object読み込み後に実行
var rect = $("#test").contents(); //objectで埋め込まれたSVGの内容を取得
var circle = rect.find("#circle"); //SVGの中の円を取得
circle.on({
"mouseenter": function() {
$(this).css({opacity:0.5}); //マウスオーバーで透明度を0.5に
},
"mouseleave": function() {
$(this).css({opacity:1}); //マウスアウトで透明度を1に
}
});
});
});

「test.svg」ファイルの中身はこちら

XHTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle id="circle" fill="#333333" cx="50" cy="50" r="50"/> </svg>

1
2
3

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle id="circle" fill="#333333" cx="50" cy="50" r="50"/>
</svg>

注意点としては、objectの内容を読み込んだ後での実行が必要なことと、「.contents()」にてobjectの内容の取得が必要です。

NEXT