Category: JavaScript

ボタンを押すとjsでテキストが変わる

innerTextで指定します。

<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){
			change();
			clickToggle();
			
		},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
	function change(){
		document.getElementById('toggleMenuButton').innerText="閉じる";
	}
})(window,document);
</script>

いいけど、これ、ボタンが一度押されると、ずっと閉じるになるなー

あ、値が「閉じる」だったら、「ボタン」に変更すればよいのか。

function change(){
		document.getElementById('toggleMenuButton').innerText =( document.getElementById('toggleMenuButton').innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

これでどーだ^^

あ、まとめられますね。

function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
		_toggleMenuButton.innerText =( _toggleMenuButton.innerText ==　"ボタン") ? "閉じる"　: "ボタン";
	}

OKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

JSでアコーディオン

<!DOCTYPE html>
<html lang="ja">
<head>
	<style>
		#toggleMenu{
			overflow:hidden;
			transition:all 0.5s;
			background-color: #eee;
		}
	</style>
</head>
<body>
	<button id="toggleMenuButton">ボタン</button>
	<div id="toggleMenu">
		<ul>
			<li>menu1</li>
			<li>menu2</li>
			<li>menu3</li>
		</ul>
	</div>
</body>
<script>
(function(window,document){
	var _toggleMenuButton = document.getElementById('toggleMenuButton');
	var _toggleMenu = document.getElementById('toggleMenu');
	var _clientH;
	init();
	function init(){
		_toggleMenu.style.height='auto';
		_clientH = _toggleMenu.clientHeight;
		_toggleMenu.style.height = '0px';
		_toggleMenuButton.addEventListener('click', function(){clickToggle();},false);
	}
	function clickToggle(){
		var lastH = _toggleMenu.style.height;
		_toggleMenu.style.height = (lastH == '' || lastH == '0px') ? _clientH + 'px' : '0px';
	}
})(window,document);
</script>
</html>

あー、これこれ、やりたかったの♪

Validate email address with JavaScript

Function to check if valid e-mail address format in input form etc.

function checkEmailAddress(str){
	if(str.match(/.+@.+\..+/)==null){
		return false;
	} else {
		return true;
	}
}

正規表現ですね。
input type=”email”でも良いような気がしますが。。

jsからCanvas

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JavaScriptでスクリーンショット</title>
</head>

<body>
	<hr>
	<div style="background-color : #AAEEDD"><h1>JavaScriptで撮るスクリーンショット</h1></div>
	<div id="target">
	<h2>導入方法と処理概要</h2>
	<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;">
	<tr>
		<th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">1</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">２</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">３</td>
		<td bgcolor="#7b9ad0" width="230">onrendered処理にて指定のElementに画像を追記</td>
		<td bgcolor="#7b9ad0" width="230">※[img]タグの[src]や、[a]タグの[href]など</td>
	</tr>
</table>
</div>
<br>
<hr>
<h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)</h3>
<img src="" id="result">
<h3>↑↑ここまで画像↑↑</h3>

<hr>

<a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>
<hr>
<h3>注意</h3>
<ul>
	<li>実際にはスクリーンショットを撮っているわけではない</li>
	<li>html2canvasは、HTML内のDOMやCCSを解釈してCanvas上に描画するライブラリ</li>
	<li>つまり、レンダリングエンジンに近い動作をする</li>
	<li>そのため、ブラウザと異なる表示がされる場合がある</li>
	<li>flashやapplet, iframe(別URL)はうまくキャプチャできない</li>
</ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
	window.onload = function(){

		html2canvas(document.getElementById("target"),{
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("result").src = imgData;
			}
		});

		html2canvas(document.body, {
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("ss").href = imgData;
			}
		});
	}
</script>
</body>
</html>

svgをcanvasで表示する

<!doctype html>
<html>
<head>
	<title>title</title>
</head>
<body>
	<canvas id="c" width="200" height="200"></canvas>
</body>
<script>
	var img = new Image();
	img.src = 'http://www.w3.org/Icons/SVG/svg-logo-v.svg';
	img.onload = function(){
		var c = document.getElementById('c');
		var ctx = c.getContext('2d');
		ctx.drawImage(img, 0, 0, 200, 200);
	}
</script>
</html>

これはsvgなんだが、HTMLタグで行きたいね。。

HTMLタグ→SVG画像作成→Canvasで画像化？
んーん、苦戦。。

foreignObject

SVG elements make it possible to include external XML namespaces with graphic content rendered by different user agents. External graphic content included is subject to SVG conversion and composition.

<svg width="400px" height="300px" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
	<desc>The svg tag can write code and draw an image. Compared with bitmap data such as JPEG and PNG, even if it is enlarged, it can be displayed in a beautiful state without blurring.</desc>
	<switch>
		<foreignObject width="100" height="50" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Here is a paragraph that requires word wrap</p>
		</body>
	</foreignObject>

	<text font-size="10" font-family="Verdana">
		<tspan x="10" y="10">Here is a paragraph that</tspan>
		<tspan x="10" y="20">requires word wrap.</tspan>
	</text>
</switch>
</svg>


<svg width="960px" height="1280px" viewBox="0 0 960 1280" xmlns="http://www.w3.org/2000/svg">
	<style>
	h1 {
		color:red;
	}
	</style>
	<g>
		<foreignObject x="0" y="0" width="100%" height="100%" requiredExtensions="http://www.w3.org/1999/xhtml">
		<body xmlns="http://www.w3.org/1999/xhtml">
			<p>Hello, world!</p>
		</body>
	</foreignObject>
</g>
</svg>

ん？　どういこと？

tinyMCEに絵文字を追加する

TinyMCEに絵文字を追加したい

公式ドキュメント：TinyMCE Emoticons plugin
https://www.tiny.cloud/docs/plugins/emoticons/
これ↓を追加すればよい？？

tinymce.init({
  selector: "textarea",  // change this value according to your HTML
  plugins: "emoticons",
  toolbar: "emoticons"
});

早速行きます。

<!DOCTYPE html>
<html>
<head>
	<script
  src="https://code.jquery.com/jquery-3.3.1.slim.js"
  integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA="
  crossorigin="anonymous"></script>
	<script src="tinymce/js/tinymce/tinymce.min.js"></script>
	<script>
  tinymce.init({
    mode : "specific_textareas",
    editor_selector : "mceEditor",
    plugins: "emoticons",
    toolbar: "emoticons",
    init_instance_callback: function (editor) {
      editor.on('change', function (e) {
          $('#preview_area').html(editor.getContent());
      });
    }
  });
</script>
	
</head>
<body>
	<h1>テキストを入力してください</h1>
    <textarea id="myTextArea" class="mceEditor">TinyMCE Editor</textarea>
    <div style="border:1px solid; width:200px; height:200px;" id="preview_area"></div>
</body>
</html>

すくな！？デフォルトだと16種類しかない！？　うーむ、困ったぞー　これ、tinyMCEのバージョンが最新なら、絵文字の種類も増えるとかある？？

ああああああああああ、なるほど、emoticonsのimgフォルダに入っている画像を使ってるのね。
utf-8の絵文字、👿👹👺などをパレットで選べるようにしたいですねー

パスワード 入力値の確認　その2

<!DOCTYPE html>
<meta charset="utf-8">
<style>
#errorMessage {
	color: red;
}
</style>
<form>
<div id="errorMessage"></div>

<label for="name">お名前:</label>
<input name="name" id="name" required><br>
<label for="password">パスワード:</label>
<input type="password" name="password" id="password" required><br>
<label for="passwordConfirm">パスワード(確認):</label>
<input type="password" name="confirm" id="confirm" oninput="CheckPassword(this)"><br>
<input type="submit" value="送信">
</form>
<script>
		function CheckPassword(confirm){
			var input1 = password.value;
			var input2 = confirm.value;

			if (input1 != input2){
				confirm.setCustomValidity("入力値が一致しません");
			} else{
				confirm.setCustomValidity('');
			}
		}
</script>

うまくいきました。

oninput=””か、なるほど。

Rhino

Rhino is an open source JavaScript implementation that is being developed. Rhino is written in Java and is managed and distributed by the Mozilla Foundation. The Mozilla Foundation also provides software called SpiderMonkey implemented in C language.

The development of Rhino was launched by Netscape Communications in 1997, and after being transferred to the Mozilla Foundation in 1998 it became open source software. The name of Rhino was from the animal drawn on the cover of JavaScript book published by O’Reilly.

$ sudo yum install rhino

インストール:
  rhino.noarch 0:1.7R4-4.el6

依存性関連をインストールしました:
  jline.noarch 0:0.9.94-0.8.el6

完了しました!

Inside of tinymce’s js

I want to customize link pulugin JS of tinymce.

Let’s look at source code, pulugin.min.js

/**
* Copyright (c) Tiny Technologies, Inc. All rights reserved.
* Licensed under the LGPL or a commercial license.
* For LGPL see License.txt in the project root for license information.
* For commercial licenses see https://www.tiny.cloud/
*
* Version: 5.0.0-1 (2019-02-04)
*/
!function(){“use strict”;var n,t,e,r,o,i=tinymce.util.Tools.resolve(“tinymce.PluginManager”),u=tinymce.util.Tools.resolve(“tinymce.util.VK”),a=function(n){return n.target_list},c=function(n){return n.rel_list},l=function(n){return n.link_class_list},h=function(n){return”boolean”==typeof n.link_assume_external_targets&&n.link_assume_external_targets},f=function(n){return”boolean”==typeof n.link_context_toolbar&&n.link_context_toolbar},s=function(n){return n.link_list},p=function(n){return”string”==typeof n.default_link_target},v=function(n){return n.default_link_target},g=a,d=function(n){return!1!==a(n)},m=c,y=function(n){return c(n)!==undefined},k=l,x=function(n){return l(n)!==undefined},b=function(n){return!1!==n.link_title},O=function(n){return”boolean”==typeof n.allow_unsafe_link_target&&n.allow_unsafe_link_target},w=function(n){return!0===n.link_quicklink},_=tinymce.util.Tools.resolve(“tinymce.dom.DOMUtils”),A=tinymce.util.Tools.resolve(“tinymce.Env”),C=function(n){if(!A.ie||10‘),o.close()}}var i,u},T=tinymce.util.Tools.resolve(“tinymce.util.Tools”),N=function(n,t){var e,r,o=[“noopener”],i=n?n.split(/\s+/):[],u=function(n){return n.filter(function(n){return-1===T.inArray(o,n)})};return(i=t?(e=u(e=i)).length?e.concat(o):o:u(i)).length?(r=i,T.trim(r.sort().join(” “))):””},S=function(n,t){return t=t||n.selection.getNode(),D(t)?n.dom.select(“a[href]”,t)[0]:n.dom.getParent(t,”a[href]”)},M=function(n){return n&&”A”===n.nodeName&&n.href},D=function(n){return n&&”FIGURE”===n.nodeName&&/\bimage\b/i.test(n.className)},z=function(n,t){var e,r;(r=n.dom.select(“img”,t)[0])&&(e=n.dom.getParents(r,”a[href]”,t)[0])&&(e.parentNode.insertBefore(r,e),n.dom.remove(e))},E=function(n,t,e){var r,o;(o=n.dom.select(“img”,t)[0])&&(r=n.dom.create(“a”,e),o.parentNode.insertBefore(r,o),r.appendChild(o))},L=function(i,u){return function(o){i.undoManager.transact(function(){var n=i.selection.getNode(),t=S(i,n),e={href:o.href,target:o.target?o.target:null,rel:o.rel?o.rel:null,”class”:o[“class”]?o[“class”]:null,title:o.title?o.title:null};if(!y(i.settings)&&!1===O(i.settings)){var r=N(e.rel,”_blank”===e.target);e.rel=r||null}o.href===u.href&&(u.attach(),u={}),t?(i.focus(),o.hasOwnProperty(“text”)&&(“innerText”in t?t.innerText=o.text:t.textContent=o.text),i.dom.setAttribs(t,e),i.selection.select(t),i.undoManager.add()):D(n)?E(i,n,e):o.hasOwnProperty(“text”)?i.insertContent(i.dom.createHTML(“a”,e,i.dom.encode(o.text))):i.execCommand(“mceInsertLink”,!1,e)})}},U=function(t){return function(){t.undoManager.transact(function(){var n=t.selection.getNode();D(n)?z(t,n):t.execCommand(“unlink”)})}},P=function(n){return 0]+>[^<]+<\/a>$/.test(n)||-1===n.indexOf(“href=”)))},q=S,I=function(n,t){var e=t?t.innerText||t.textContent:n.getContent({format:”text”});return e.replace(/\uFEFF/g,””)},j=N,V=function(){for(var n=[],t=0;t