スニペット

JavaScriptで文字列を複数行に分けて記述する方法

2017.09.28 l＠ha

長い文字列の場合、一行にズラズラ書いていると途中でウィンドウから見切れたり、折り返して見づらくなってしまいます。文字列を複数行に分けて記述することで作業もしやすくなり、ソースコードの可読性も上がります。 …

簡単！Easy Pie Chartでキレイな円グラフ作成

2017.07.12 l＠ha

Easy Pie Chartを使用するとアニメーションのついた見やすい円グラフを表示することができます。 Chart.jsと違って円グラフしか作ることができませんが、プロパティも少ないので学習コストは高くありません。円…

ランダムな文字の後に指定した文字を表示する

2017.04.09 l＠ha

いろいろなサイトを勉強のため、見回っていると文字列の表示で工夫をしているところが多かったので自分でも試してみました。ボタンを押すと文字列が表示されます。文字列を表示 [crayon-662bd439d1cbe5484…

[JavaScript]パブリックとプライベートのプロパティ

2017.03.21 l＠ha

JavaScriptのオブジェクトについて詰まったところのメモです。 JavaScriptはC++のようにプライベートとパブリックというプロパティがないので自分で意識して作成しなければいけないようです。私が最初に詰まっ…

[JavaScript,JQuery]CSSを動的に変更する

2017.01.24 l＠ha

CSSを動的に変更する方法のメモです。

//設定している外部CSSのリンク
<link id="css_link" href="####" rel="stylesheet" type="text/css">

//素のJavaScriptの場合
var css_link = document.getElementById("#css_link");
css_link.href="@@@@";　　//リンク先を@@@@に変更

//JQueryの場合
$("#css_link").attr("href", "@@@@");　　　//リンク先を@@@@に変更

//設定している外部CSSのリンク

<link id="css_link" href="####" rel="stylesheet" type="text/css">

//素のJavaScriptの場合

var css_link = document.getElementById("#css_link");

css_link.href="@@@@";　　//リンク先を@@@@に変更

//JQueryの場合

$("#css_link").attr("href", "@@@@");　　　//リンク先を@@@@に変更

素のJavaScriptと違って、JQueryはattr(name, value)を使用しないとhrefのプロパテ…

getUserMedia APIでhtmlにWebカメラの映像を表示してみる

2016.11.28 l＠ha

macに内臓されているカメラを使用してHTMLに映像を出力してみる。

<!DOCTYPE html>
<html>
<head>
	<title>Webカメラ</title>
</head>

<body>
<video id="video"></video>
<script>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({
	video:true,
	audio:true
},function(stream){
	video.src = URL.createObjectURL(stream);
	video.play();
},function(error){
	console.log(error);
});
</script>
</body>
</html>

<!DOCTYPE html>

<title>Webカメラ</title>

<video id="video"></video>

var video = document.getElementById("video");

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

navigator.webkitGetUserMedia({

},function(stream){

video.src = URL.createObjectURL(stream);

},function(error){

console.log(error);

ただ、firefoxではローカルでも動作するが、Chromeだとローカルでは動作しま…