JavaScript/HTML5おぼえがき

JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム

実行サンプル表示があります。書き方を忘れた場合はサンプルソースを参考にしてください。

■ 入力フォーム 入力フォーム

■ 描画 図形の描画図形のグラテーション画像の描画画像のクリッピング画像の回転・傾斜・縮尺設定画像の加工(ピクセル操作)画像の保存その2画像の表示画像の複写

■ 音の再生 mp3/oggの再生テキストの読上げ

■ Web Storage LocalStorageの追加/変更/削除

■ Web Audio API音源生成ボリューム操作バランス操作音圧の描画スペクトル描画多チャンネル信号の分離(splitter)/合成(merger)オーディオファイルの再生オーディオファイルの再生(アップロードファイル)オーディオ再生速度の変更

■ コンテンツ表示 メディアクエリの使い方アコーディオンメニューの作り方サムネル表示画像ファイル読込

■ その他 Googleマップ Googleマップ(マーカの種類)


入力フォーム

入力フォーム   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>入力フォーム(HTML5)</title>
<script>
//<!--
function init() {
  var inputs = document.querySelectorAll("input");
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("change", function() {
    form.out2.value = this.value ;
    }, false);
  }
}
//-->
</script>
</head>
<body onload="init();">
<form name="form"><!--日付の入力欄-->date:<input type="date" name="date"><br>
<!--UTC(協定世界時)による日時の入力欄-->datetime:<input type="datetime" name="datetime"><br>
<!--UTC(協定世界時)によらないローカル日時の入力欄-->datetime-local:<input type="datetime-local" name="datetime-local" step="60"><br>
<!--月の入力欄-->month:<input type="month" name="month"><br>
<!--週の入力欄-->week:<input type="week" name="week"><br>
<!--時間の入力欄-->time:<input type="time" name="time"><br>
<!--数値の入力欄-->number:<input type="number" name="nunber"><br>
<!--レンジの入力欄-->range:<input type="range" name="range"><br>
<!--検索テキストの入力欄-->serchi:<input type="serch" name="serchi"><br>
<!--電話番号の入力欄-->tel:<input type="tel" name="tel"><br>
<!--URLの入力欄-->url:<input type="url" name="url"><br>
<!--メールアドレスの入力欄-->mail:<input type="email" name="email"><br>
<!--色の入力欄-->colore:<input type="color" name="color"><br>
<br>
入力データの表示:<input name="out2" ><br>
<br>
</form>
</body>
</html>

描画

図の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvas図形の描画</title>
<style>
<!--  
body {}
-->
</style>
<script>
onload = function() { ini(); };
function ini() {
//1長方形を塗りつぶす
  var ctx1 = document.getElementById('c1').getContext('2d');	
  ctx1.fillStyle = 'blue';
  ctx1.fillRect(10,10,90,90);
//2長方形を描く
  var ctx2 = document.getElementById('c2').getContext('2d');
  ctx2.strokeRect(10,10,90,90);
//3円を描く
  var ctx3 = document.getElementById('c3').getContext('2d');	
  ctx3.arc(50,50,40, 0, Math.PI*2, false);
  ctx3.stroke();
//4円弧を描く
  var ctx4 = document.getElementById('c4').getContext('2d');	
  ctx4.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx4.stroke();
//5円弧を塗りつぶす
  var ctx5 = document.getElementById('c5').getContext('2d');	
  ctx5.arc(50,50,40, 10 * Math.PI / 180, 80 * Math.PI / 180, true);
  ctx5.fill();
//6パスを新たに作る
//6-1パスを初期化
  var ctx6 = document.getElementById('c6').getContext('2d');	
  ctx6.beginPath();
//6-2一つめのサブパス
  ctx6.moveTo(50, 10);
  ctx6.lineTo(10, 90);
  ctx6.lineTo(90,90);
  ctx6.closePath();
//6-3二つ目のサブパス
  ctx6.moveTo(70, 10);
  ctx6.lineTo(95, 50);
  ctx6.lineTo(55, 50);
  ctx6.closePath();
//6-4これまで描いたパスを表示
  ctx6.stroke();
//7テキストの表示

  var ctx7 = document.getElementById('c7').getContext('2d');
  ctx7.strokeRect(0, 0, 100, 100);
  ctx7.font = "11pt Arial";
  ctx7.fillStyle = "red";
  ctx7.fillText  ("Sample String",5, 50);
  ctx7.strokeStyle = "blue";
  ctx7.strokeText("Sample String",5, 80);

//8銭を引く
  var ctx8 = document.getElementById('c8').getContext('2d');
  ctx8.beginPath();
//8-1lineWidthの指定なしの例
  ctx8.moveTo(10, 25);
  ctx8.lineTo(90, 25);
  ctx8.stroke();
//8-2 lineWidthを5にした例
  ctx8.beginPath();
  ctx8.lineWidth = 5;
  ctx8.moveTo(10, 50);
  ctx8.lineTo(90, 50);
  ctx8.stroke();
//8-3 lineWidthを10にした例
  ctx8.beginPath();
  ctx8.lineWidth = 10;
  ctx8.moveTo(10, 75);
  ctx8.lineTo(90, 75);
  ctx8.stroke();
}
</script>
</head>
<body>
<canvas id=c1 width=100 height=100></canvas>
<canvas id=c2 width=100 height=100></canvas>
<canvas id=c3 width=100 height=100></canvas>
<canvas id=c4 width=100 height=100></canvas>
<canvas id=c5 width=100 height=100></canvas>
<canvas id=c6 width=100 height=100></canvas>
<canvas id=c7 width=100 height=100></canvas>
<canvas id=c8 width=100 height=100></canvas>
</body>
</html>

図形のグラデーション   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasグラデーション</title>
</head>
<body>
<canvas id="canvas3" width=200 height=200></canvas>
<script>
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");
//線形のグラデーション
var gra = context3.createLinearGradient(0, 0, 200,0); //開始点地点x,y,終了地点x,yを指定する。
//グラデーション終点のオフセット(0~1)と色の指定
gra.addColorStop(0.0, "rgb(255,0, 0)");  //0.0-赤
gra.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context3.fillStyle = gra;
context3.fillRect(0, 0, 200, 200);       //四角の描画
</script>
<canvas id="canvas4" width=200 height=200></canvas>
<script>
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");
//円形のグラデーション
var gra2 = context4.createRadialGradient(80, 80, 0, 80,80, 150); //中心1座標x,y,半径r,中心2座標x,y,半径rを指定する
//グラデーション終点のオフセット(0~1)と色の指定
gra2.addColorStop(0.0, "rgb(255,0, 0)");  //0.0-赤
gra2.addColorStop(0.5, "rgb(0, 255, 0)"); //0.5-緑
gra2.addColorStop(1.0, "rgb(0, 0, 255)"); //1.0-青
context4.fillStyle = gra2;
context4.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context4.fill();
</script>
<canvas id="canvas5" width=200 height=200></canvas>
<script>
var canvas5 = document.getElementById("canvas5");
var context5 = canvas5.getContext("2d");
//円形のグラデーション
var gra3 = context5.createRadialGradient(80, 80, 0, 50,50, 200);
gra3.addColorStop(0.0, "rgb(255,255,255)"); //0.0-白
gra3.addColorStop(1.0, "rgb(0, 0, 0)");     //1.0-黒
context5.fillStyle = gra3;
context5.arc(100, 100, 100, 0, 2*Math.PI, true); //円形の描画
context5.fill();
</script>
</body>
</html>

画像の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvasイメージの描画</title>
</head>
<body>
<canvas id="canvas3" width=500 height=500></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  var w = image.width;
  var h = image.height;
  context.drawImage(image, 0, 0, w, h);
  context.drawImage(image, w, h, w/2, h/2);
};
</script>
</body>
</html>

画像のクリッピング   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasイメージのクリップ</title>
</head>
<body>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas1  = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2  = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
context2.beginPath();
context2.arc(100, 100, 100, 0, 2*Math.PI, true);//円形でクリップ
context2.clip();
var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  context1.drawImage(image, 0, 0, canvas1.width, canvas1.height);//原画の描画
  context2.drawImage(image, 0, 0, canvas2.width, canvas2.height);//クリップ描画
}
</script>
</body>
</html>

画像の回転・傾斜・縮尺設定   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>canvas画像の変形</title>
</head>
<body>
<p>元の画像</p>
<canvas id="canvas1" width=300 height=300></canvas>
<p>回転設定</p>
<canvas id="canvas2" width=300 height=300></canvas>
<p>傾斜設定</p>
<canvas id="canvas3" width=300 height=300></canvas>
<p>縮尺設定</p>
<canvas id="canvas4" width=300 height=300></canvas>
<script type="text/javascript">
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");
var canvas3 = document.getElementById("canvas3");
var context3 = canvas3.getContext("2d");
var canvas4 = document.getElementById("canvas4");
var context4 = canvas4.getContext("2d");

var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  var sw = image.width;
  var sh = image.height;
  var cw = canvas1.width;
  var ch = canvas1.height;

  context1.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
  context1.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画

  context2.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
  context2.rotate( Math.PI*45/180 ); //画像の回転(45度)
  context2.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画

  context3.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
  context3.transform(1,-0.2,-0.2,1,0,0) ; //縦、横の傾斜指定(0.2)
  context3.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画

  context4.setTransform(1,0,0,1,cw/2,ch/2) ; //基準の座標をキャンバスの中央に変更
  context4.transform(1.2,0,0,0.8,0,0) ; //尺度(拡大・縮小)指定(横1.2に拡大、縦0.8に縮小)
  context4.drawImage(image,0,0,sw, sh,-sw/2,-sh/2,sw,sh); //キャンバスの中央に描画
};
</script>
</body>
</html>

画像の加工(ピクセル操作)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasピクセル処理</title>
</head>
<body>
<canvas id="canvas"  width=200 height=200></canvas>
<canvas id="canvas1" width=200 height=200></canvas>
<canvas id="canvas2" width=200 height=200></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2");
var context2 = canvas2.getContext("2d");

var image = new Image();
image.src = "tori_200.jpg";
image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);//原画を描画
  var pixel = context.getImageData( 0, 0, canvas.width, canvas.height) ;
//白黒(RGBの要素の平均値をRGBの値にする。)
  for(var y = 0; y < canvas.height; y++) {
    for(var x = 0; x < canvas.width ; x++) {
      r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
      g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
      b = pixel.data[(y * canvas.width + x) * 4 + 2] ;
      a = (r + g + b)/3 ;
      pixel.data[(y * canvas.width + x) * 4 + 0] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 1] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 2] = a ;
      pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
    }
  }
  context1.putImageData(pixel,0,0) ;//白黒で描画
//セピア色(RGBそれぞれの要素をRx0.9,Gx0.7,Bx0.4で設定する。)
  for(var y = 0; y < canvas.height; y++) {
    for(var x = 0; x < canvas.width ; x++) {
      r = pixel.data[(y * canvas.width + x) * 4 + 0] ;
      g = pixel.data[(y * canvas.width + x) * 4 + 1] ;
      b = pixel.data[(y * canvas.width + x) * 4 + 2] ;

      pixel.data[(y * canvas.width + x) * 4 + 0] = r * 0.9 ;
      pixel.data[(y * canvas.width + x) * 4 + 1] = g * 0.7 ;
      pixel.data[(y * canvas.width + x) * 4 + 2] = b * 0.4 ;
      pixel.data[(y * canvas.width + x) * 4 + 3] = 255 ;
    }
  }
  context2.putImageData(pixel,0,0) ;//セピア色で描画
}
</script></body>
</html>

画像の保存   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="saveData()">保存</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function saveData() {
  var data = canvas.toDataURL("image/png");
  data = data.replace("image/png", "image/octet-stream");
  window.open(data, "save");
}
</script>
</body>
</html>

画像の保存(その2)   戻る

ブラウザの画像保存機能で保存できます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasファイルへ保存(その2)</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<p><button onclick="dsp()">image表示</button><p>
<p>表示画像をマウス右クリックして保存する。</p>
<img id="output" src="">
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function dsp() {
  // 描画内容をデータURIに変換する (引数なしはPNG)
  var dataURI = canvas.toDataURL() ;
  // JPGの場合 (第2引数は品質)
  //var dataURI = canvas.toDataURL( "image/jpeg", 0.75 ) ;
  // img要素を取得
  var image = document.getElementById( "output" ) ;
  image.src = dataURI ;
}
</script>
</body>
</html>

画像の表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像表示</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<br><br>
<button onclick="display()">表示</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function display() {
  var img = new Image() ;
  img.src = canvas.toDataURL("image/png");
  img.onload = function() { location.href = img.src ; }
}
</script>
</body>
</html>

画像の複写   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>Canvasの画像複写</title>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
<div id="cp"></div>
<br><br>
<button onclick="copy()">複写</button>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0, 0, 0)";
context.fillRect(0, 0,200,200);
context.fillStyle = 'blue';
context.arc(100,100,90, 0, Math.PI*2, false);
context.fill();
function copy() {
  var img = new Image() ;
  img.src = canvas.toDataURL("image/png");
  img.onload = function() {
    var imgelm = document.createElement("img") ;
    imgelm.src = img.src ;
    document.getElementById("cp").appendChild(imgelm) ;
//  document.getElementById("cp").innerHTML ="<img src = 'img.src'>" ;
  }
}
</script>
</body>
</html>

音の再生

mp3/oggファイルの再生   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>音楽の再生</title>
</head>
<body onload ="init()">
<audio controls>
<source src="../sound/Yesterday.mp3">
<source src="../sound/Yesterday.ogg"> </audio><br>
<br>
<br>
<button onclick="ply();">先頭から再生</button>
<button onclick="pus();">一時停止</button>
<button onclick="rst();">再生</button>
<button onclick="stp();">停止</button>
<SCRIPT>
//<!-- 
function init() {
  ad = new Audio("");
  if(ad.canPlayType){
    var canPlayOgg = ("" != ad.canPlayType("audio/ogg"));
    var canPlayMp3 = ("" != ad.canPlayType("audio/mpeg"));
    if(canPlayOgg && canPlayMp3){
      window.alert("ogg/mp3をサポートしています。") ;
      ad.src = "../sound/Yesterday.ogg" ; 
    }else if(canPlayOgg){
      window.alert("oggをサポートしています。") ;
      ad.src = "../sound/Yesterday.ogg" ;
    }else if(canPlayMp3){
      window.alert("mp3をサポートしています。") ;
      ad.src = "../sound/Yesterday.mp3" ;
    }else{
      window.alert("oggもmp3もサポートしていません") ;
    }
  }else{
    window.alert("canPlayTypeメソッドが存在しません") ;
  }
}
function rst(){ ad.play(); }  // 再生(一時停止中は一時停止箇所から再生) 
function ply(){               //  先頭から再生 
  ad.load();  // ロードを実行して初期状態に戻す
  ad.play();
}  
function pus(){ad.pause();}   // 一時停止 
function stp(){               // 停止 
  if(!ad.ended){        // ended属性で終了判定する
    ad.pause();
    ad.currentTime = 0;  // 再生位置を0秒にする
  }
}
//-->
</script></body>
</html>

テキストの読上げ   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<TITLE>テキスト読上げ</TITLE>
</head>
<body> 
<input type="button" onclick="speak('おはようございます','ja-JP')" value="日本語">
<input type="button" onclick="speak('Good Morning','en-US')" value="English">
<SCRIPT>
function speak(text,lang) {
  var synthes = new SpeechSynthesisUtterance();
  synthes.volume = 1;  //音量
  synthes.rate = 1;    //スピード
  synthes.pitch = 0;   //ピッチ
  synthes.text = text;
  synthes.lang = lang ;  //言語
  speechSynthesis.speak(synthes);
}
</script>
</body>
</html>

Web Storage

LocalStorageの追加/変更/削除   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>localStorage Sample</title>
</head>
<body>
<div class="page">
        <header>
            <div id="title">
                <h1>Local Storage</h1>
            </div>
        </header>
        <section id="main">
			保存するKey:<input id="textkey" type="text" />
			保存する値:<input id="textdata" type="text" />
			<button id="button" onclick="set()">保存</button>
			<button id="button" onclick="del()">削除</button><br>
			<button id="button" onclick="delall()">全て削除</button>
<table border="1">
<thead>
    <tr>
      <th>キー</th>
      <th>値</th>
    </tr>
</thead>
  <tbody id="list">
    <tr>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
        </section>
        <footer>
        </footer>
    </div>
<script type="text/javascript">
//  Web Storageの実装確認
if (typeof localStorage === 'undefined') {
  window.alert("このブラウザはWeb Storage機能が実装されていません");
}
  else {
    window.alert("このブラウザはWeb Storage機能を実装しています");
    var storage = localStorage;
    //  localnStorageへの格納
    function set() {
      var key = document.getElementById("textkey").value;
      var value = document.getElementById("textdata").value;
      // 値の入力チェック
      if (key && value) {storage.setItem(key, value);	}
        // 変数の初期化
        key = "";  value = "";  view();
    }
    //  localStorageからのデータの取得と表示
    function view() {
      var list = document.getElementById("list")
      while (list.firstChild) list.removeChild(list.firstChild);
      // localtorageすべての情報の取得
      for (var i=0; i < storage.length; i++) {
        var _key = storage.key(i);
        // localStorageのキーと値を表示
        var tr = document.createElement("tr");
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        list.appendChild(tr);
        tr.appendChild(td1);
        tr.appendChild(td2);
        td1.innerHTML = _key;
        td2.innerHTML = storage.getItem(_key);
      }
    }
    //  localStorageから削除
    function del() {
      var key = document.getElementById("textkey").value;
      storage.removeItem(key);
      // 変数の初期化
      key = "";  view();
     }
    //  localStorageからすべて削除
    function delall() {
      storage.clear();
      view();
    }
  }
view();
</script>
</body>
</html>



Web Audio API

音源の生成   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oscillator</title>
</head>
<body>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  oscillator.connect(context.destination);// サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
</script>
</body>
</html>

ボリューム操作   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gain</title>
</head>
<body>
<form name="form">
Level<input type="range" min="0" max="1" step="0.01" name="level" value="0.5" onchange="cng()"> 
</form><br>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  context.createGain = context.createGain || context.createGainNode;
  gain = context.createGain();            // gainノードのインスタンスの作成
  oscillator.connect(gain);               // gainノードに接続する
  gain.connect(context.destination);      // サウンド出力ノードに接続する

  oscillator.type = "sine" ;              // 生成タイプの設定(正弦波)
  oscillator.frequency.value = 440 ;      // 生成周波数の設定
  gain.gain.value = parseFloat(form.level.value); // レベルの設定
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
function cng() { gain.gain.value = parseFloat(form.level.value) ; } // レベルの再設定
</script>
</body>
</html>

バランス操作   戻る

利用プラウザにより動作しない場合があります。(Widows/Andorid Chrome は動作します。)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Panner</title>
</head>
<body>
<form name="form">
Pan(Balance)<input type="range" min="-1" max="1" step="0.01" name="pan" value="0" onchange="cng()"> 
</form><br>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();
function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  panner = context.createStereoPanner();  // pannerノードのインスタンスの作成
  oscillator.connect(panner);             // pannerノードに接続する
  panner.connect(context.destination);    // サウンド出力ノードに接続する

  oscillator.type = "sine" ;              // 生成タイプの設定(正弦波)
  oscillator.frequency.value = 440 ;      // 生成周波数の設定(正弦波)
  panner.pan.value = parseFloat(form.pan.value);
  oscillator.start(0);                    // 開始
}
function stp() { oscillator.stop(0) ; }  // 停止
function cng() { panner.pan.value = parseFloat(form.pan.value) ; } // レベルの再設定
</script>
</body>
</html>

音圧の描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Analyser(TimeDomainData)</title>
</head>
<body>
<canvas id = "c1" width="400" height="200"></canvas>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  canvas1        = document.getElementById("c1"); // キャンバスの設定
  canvasContext1 = canvas1.getContext('2d');

  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();

function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  analyser = context.createAnalyser();    // Analyserノードのインスタンスの作成
  analyser.fftSize = 2048;                // 標準値
  oscillator.connect(analyser);           // analyserノードに接続する
  analyser.connect(context.destination);  // サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);                    // 開始
  drawwave1() ;
}
function stp() { oscillator.stop(0) ; }
function drawwave1() {
    intervalid1 = window.setInterval(function() {
        var times = new Uint8Array(analyser.fftSize);  // Array sizeは1024 (FFTサイズの半分の値)
        analyser.getByteTimeDomainData(times);
        canvasContext1.clearRect(0, 0, canvas1.width, canvas1.height); // キャンバスのクリア
        canvasContext1.beginPath();        // 描画の開始
        for (var i = 0, len = times.length; i < len; i++) {
            var x = (i / len) * canvas1.width;
            var y = (1 - (times[i] / 255)) * canvas1.height;
            if (i === 0) { canvasContext1.moveTo(x, y); } else { canvasContext1.lineTo(x, y); }
        }
        canvasContext1.stroke();           // 描画
    }, 50);                                // 1秒間に50回

}
</script>
</body>
</html>

スペクトルの描画   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Analyser(FrequencyData)</title>
</head>
<body>
<canvas id = "c2" width="400" height="200"></canvas>
<form name="form">
Type<select name="type">
<option value="sine">Sine</option>
<option value="square">Square</option>
<option value="sawtooth">SawTooth</option>
<option value="triangle">Triangle</option></select><br>
Freq(Hz)<input type="range" min="50" max="15000" name="freq" value="440"><br>
</form>
<button onclick="srt()">start</button>
<button onclick="stp()">stop</button>
<script type="text/javascript">
  canvas2        = document.getElementById("c2"); // キャンバスの設定
  canvasContext2 = canvas2.getContext('2d');

  window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
  context = new AudioContext();

function srt() {
  oscillator = context.createOscillator();// oscillatorノードのインスタンスの作成
  oscillator.start = oscillator.start || oscillator.noteOn;
  oscillator.stop  = oscillator.stop  || oscillator.noteOff;
  analyser = context.createAnalyser();    // Analyserノードのインスタンスの作成
  analyser.fftSize = 2048;                // 標準値
  oscillator.connect(analyser);           // analyserノードに接続する
  analyser.connect(context.destination);  // サウンド出力ノードに接続する
  oscillator.type = form.type.value;      // 生成タイプの設定
  oscillator.frequency.value = parseFloat(form.freq.value); // 発生周波数の設定
  oscillator.start(0);  // 開始
  drawwave2() ;
}
function stp() { oscillator.stop(0) ; }  // 停止
function drawwave2() {
    intervalid2 = window.setInterval(function() {
        var spectrums = new Uint8Array(analyser.frequencyBinCount);  // Array sizeは1024 (FFTサイズの半分の値)
        analyser.getByteFrequencyData(spectrums);
        canvasContext2.clearRect(0, 0, canvas2.width, canvas2.height); //キャンバスのクリア
        canvasContext2.beginPath();       // 描画開始
        for (var i = 0, len = spectrums.length; i < len; i++) {
            var x = (i / len) * canvas2.width;
            var y = (1 - (spectrums[i] / 255)) * canvas2.height;
            if (i === 0) { canvasContext2.moveTo(x, y); } else { canvasContext2.lineTo(x, y); }
        }
        canvasContext2.stroke();          // 描画
    }, 10);                               // 1秒間に10回
}
</script>
</body>
</html>

多チャンネル信号の分離(splitter)/合成(merger)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>splitter</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<form name="form">
左の音量:<input type="range" min="0" max="1" step="0.01" size="10" id="levelL" value="0.5" onchange="cng()"/>
右の音量:<input type="range" min="0" max="1" step="0.01" size="10" id="levelR" value="0.5" onchange="cng()"/><br>
</form>
<button onclick="srt()">start</button> 
<button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
function srt() {
    oscillator = context.createOscillator();
    context.createGain = context.createGain || context.createGainNode;
    splitter = context.createChannelSplitter(2);  // The number of splitted channels
    merger = context.createChannelMerger(2);  // The number of merged channels
    gainL = context.createGain();  // for Left  Channel
    gainR = context.createGain();  // for Right Channel

    oscillator.connect(splitter);         // OscillatorNode (Monaural input) -> Stereo
    splitter.connect(gainL, 0, 0);        // ChannelSplitterNode -> GainNode (Left  Channel)
    splitter.connect(gainR, 0, 0);        // ChannelSplitterNode -> GainNode (Right Channel)
    gainL.connect(merger, 0, 0);          // GainNode (Left  Channel) -> ChannelMergerNode (Left  Channel)
    gainR.connect(merger, 0, 1);          // GainNode (Right Channel) => ChannelMergerNode (Right Channel)
    merger.connect(context.destination);  // ChannelMergerNode -> AudioDestinationNode (Output)

    oscillator.start = oscillator.start || oscillator.noteOn;
    oscillator.stop  = oscillator.stop  || oscillator.noteOff;
    oscillator.type = "sine" ;
    oscillator.frequency.value = 440 ;
    oscillator.start(0);
}
function stp() { oscillator.stop(0); }
function cng() {
  gainL.gain.value = parseFloat(document.getElementById("levelL").value);
  gainR.gain.value = parseFloat(document.getElementById("levelR").value);
}
</script>
</body>
</html>

オーディオファイルの再生   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(file)</title>
</head>
<body>
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
context = new AudioContext();
loaded = false;
onload = function() {
  xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.responseType = 'arraybuffer';
  xmlHttpRequest.onload = function() {
    audioData = this.response;
    context.decodeAudioData(    // バイナリデータのデコード
      audioData,
      function( decodedData ) {
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e )  {alert( e.err ); } 
    );
  }
  xmlHttpRequest.open( 'GET',"Yesterday.mp3", true );
  xmlHttpRequest.send();
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource(); // オーディオノードの作成
    source.connect(context.destination); // サウンド出力ノードに接続する
    source.buffer = audiodata ;
    source.start();  // 音源の再生
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; }   // 音源の再生停止
</script>
</body>
</html>

オーディオファイルの再生(アップロードファイル)   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(file upload)</title>
</head>
<body><input id="sample" type="file" size ="30" accept="audio/*" /> 
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext; // AudioContextクラスインスタンス生成(Web互換指定)
context = new AudioContext();
loaded = false;
file = document.getElementById( 'sample' );
file.onchange = function() {
  var reader = new FileReader();
  reader.onload = function() {
    var audioData = this.result;
    context.decodeAudioData(
      audioData,
      function( decodedData ) {
        source = context.createBufferSource();
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e ) { alert( e.err ) ; } 
    );
  };
  reader.readAsArrayBuffer( this.files[ 0 ] );
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource();
    source.connect(context.destination); // サウンド出力ノードに接続する
    source.buffer = audiodata ;
    source.start();
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; } 
</script>
</body>
</html>

オーディオ再生速度の変更   戻る


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Audio play(rate)</title>
</head>
<body>
<form name="form">
<input type="range" min="0.2" max="5" step="0.01" id="rate" value="1" onchange="cng()"/>
</form>
<button onclick="srt()">Play</button> <button onclick="stp()">stop</button>
<script type="text/javascript">
window.AudioContext = window.AudioContext || window.webkitAudioContext;
context = new AudioContext();
loaded = false;
onload = function() {
  xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.responseType = 'arraybuffer';
  xmlHttpRequest.onload = function() {
    audioData = this.response;
    context.decodeAudioData(
      audioData,
      function( decodedData ) {
        audiodata = decodedData;
        loaded = true ;
        srt() ;
      },
      function( e )  {alert( e.err ); } 
    );
  }
  xmlHttpRequest.open( 'GET',"audioapi_piano.wav", true ); //440Hz ピアノデータ
  xmlHttpRequest.send();
}
function srt() {  
  if ( loaded ) {
    source = context.createBufferSource();
    source.connect(context.destination);
    source.buffer = audiodata ;
    source.playbackRate.value = parseFloat(form.rate.value) ; // 再生速度の設定
    source.start();
  } else { alert ("オーディオデータが読み込まれておりません") }
}
function stp() { source.stop() ; } 
function cng() { source.playbackRate.value = parseFloat(form.rate.value) ; } // 再生速度の設定
</script>
</body>
</html>

コンテンツ表示

メディアクエリの使い方   戻る

メディアクエリを使ってレスポンシブwebデザインに役立ちます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Web Design</title>
<meta name="viewport" content="width=device-width">
<style>
<!--
body{
	margin:0px; font-family: sans-serif; color: white;
}
header{
	text-align: center; background: #333;
}
.wrap{
	overflow: hidden;
}
article{
	width: calc(100% - 300px); text-align: center; background: #666; float:left;
}  /*calcファンクションで表示横幅を計算して指定する。*/
aside{
	text-align: center; background: #999; width:300px; float:right;
}
footer{
	text-align: center; background: #333;
}
@media ( max-width : 750px ) {   /*メディアクエリを使って表示方法を変更する。*/
  header{
	width:100%;
}
  .wrap{
	width:100%;
}
  article{
	width:100%; float:none;
}
  aside{
	width:100%; float:none;
}
  footer{
	width:100%;
}
}
-->
</style>
<script> 
function int(){
  ww = window.innerWidth;
  wh = window.innerHeight;
  win = "<p>モニタ画面の解像度の横幅と高さは:" + window.screen.width + "x" + window.screen.height + " です。<br>"
      + "ウィンドウ内側(表示領域)の横幅と高さは:" + ww + "x" + wh + " です。</p><br>" ;
  document.getElementById("dat").innerHTML = win ;
}
</script>
</head>
<body onload="int();">
  <header><br>Header<br><br></header>
  <div class="wrap">
    <article><br><br><br><br>Content<br>ブラウザの表示横幅を変えてください。幅750ピクセル以上と以下で表示レイアウトが変わります。<br><br><br><br><br></article>
    <aside><br>Sideber <br>
    <div id="dat"></div>
      <input onclick="int()" type="button" value="再計算"><br><br>
    </aside>
  </div>
  <footer><br>Footer<br><br></footer>
</body>
</html>

アコーディオンメニューの作り方   戻る

スマートホンメニュー作成に役立ちます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion menu</title>
<meta name="viewport" content="width=device-width">
<style>
<!--
.tab{
	text-align:left;width:250px;height:15px;padding:5px;border-width:2px;border-style:solid;border-color:gray;
}
-->
</style>
<script>
function ini() { // メニューの初期設定
   if( !document.getElementsByTagName ){ return ; }  // DOMのサポートチェック
   var objs = document.getElementsByTagName("div") ; // HTML中の「div」タグを取得
   for( var i = 0; i < objs.length ; i++ ) { // クラスネーム「cls」を探して非表示にする
      if( objs[i].className == "cls" ) { objs[i].style.display = "none" ; }
   }
}
function cng(id) { // メニューを消したり表示したりする
  if( !document.getElementsByTagName ) { return false; }// DOMのサポートチェック
   var obj = document.getElementById(id); // メニューのオブジェクトを取得
   if( obj.style.display == "block" ) { obj.style.display="none" ; } else { obj.style.display = "block" ; }// 表示←→非表示の処理     
} 
function url(q) { alert(q) }
</script>
</head>
<body onload="ini();">
<div class="tab" onclick="cng('メインメニュー1のID')">▼メインメニュー1</div>
<div class="cls" id="メインメニュー1のID">
 ◆<a href="#" onclick="cng('サブメニュー1のID')">サブメニュー1</a><br>
<div class="cls" id="サブメニュー1のID">
 ├<a href="#" onclick="url('URL1-1')">サブサブメニュー1-1</a><br>
 ├<a href="#" onclick="url('URL1-2')">サブサブメニュー1-2</a><br>
 └<a href="#" onclick="url('URL1-3')">サブサブメニュー1-3</a><br>
</div>
 ◆<a href="#" onclick="cng('サブメニュー2のID')">サブメニュー2</a><br>
<div class="cls" id="サブメニュー2のID">
 ├<a href="#" onclick="url('URL2-1')">サブサブメニュー2-1</a><br>
 ├<a href="#" onclick="url('URL2-2')">サブサブメニュー2-2</a><br>
 └<a href="#" onclick="url('URL2-3')">サブサブメニュー2-3</a><br>
</div>
 ◆<a href="#" onclick="cng('サブメニュー3のID')">サブメニュー3</a><br>
<div class="cls" id="サブメニュー3のID">
 ├<a href="#" onclick="url('URL3-1')">サブサブメニュー3-1</a><br>
 ├<a href="#" onclick="url('URL3-2')">サブサブメニュー3-2</a><br>
 └<a href="#" onclick="url('URL3-3')">サブサブメニュー3-3</a><br>
</div>
</div>


<div class="tab" onclick="cng('メインメニュー2のID')">▼メインメニュー2</div>
<div class="cls" id="メインメニュー2のID">
 ・<a href="#" onclick="url('URL1')">サブメニュー1</a><br>
 ・<a href="#" onclick="url('URL2')">サブメニュー2</a><br>
 ・<a href="#" onclick="url('URL3')">サブメニュー3</a><br>
</div>
</body>
</html>

サムネル表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>サムネル(thumbnail)表示</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="../../css/tom.css">
</head>
<body>
<script>
imFile = ["z10.JPG","z20.JPG","z30.JPG","z40.JPG","z50.JPG","z60.JPG","z70.JPG","z80.JPG"] ;
imMax = imFile.length ;
document.write("<div align = 'center'>") ;
document.write("<img src = 'pic/" + imFile[0] + "' name='pic' width=800><br><br>") ;
for(var i = 0 ; i < imMax ; i++ ) {
  document.write("<img src = 'pic/" + imFile[i] + "' width=96 height = 72 onclick = 'picDraw(this)'>") ;
}
document.write("</div>") ;
function picDraw(obj) { document.pic.src=obj.src ; }
</script>
</body>
</html>

画像ファイル読込   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>画像ファイル読込</title>
</head>
<body>
<input type="file" onChange="filer(this.files, 'canvas1')"><br>
<canvas id="canvas1"></canvas>   
<script>
function filer(files, cvs) {
    var canvas = document.getElementById(cvs);  //canvasの定義
    var ctx = canvas.getContext('2d');
    var reader = new FileReader();             //ローカルファイルの処理
    reader.onload = function(event) {          //ローカルファイルを読込後処理
        var img = new Image();                 //画像ファイルの処理
        img.onload = function() {              //画像ファイル読込後の処理
            canvas.width  = img.naturalWidth;  //naturalWidthは画像の元のサイズ
            canvas.height = img.naturalHeight; //canvas.widthはcanvasのサイズ
            ctx.drawImage(img, 0, 0);          //画像をcanvasに表示
        }
        img.src = event.target.result;         //画像を読み込む 
    }  
    reader.readAsDataURL(files[0]);            //ローカルファイルを読み込む  
}
</script>
</body>
</html>

その他

Googleマップに、マーカ、吹き出し、ラインの設定ができます。
Google Maps JavaScript API のアプリケーションAPIキーを取得して########に指定してください。APIキーは ここから APIを有効にして、APIキーを作成して下さい。

Googleマップ表示   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>地図</title>
<script    src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer></script>
<!--Google Maps JavaScript API のアプリケーションAPIキーを取得して#####に指定してください、-->
<SCRIPT>
function ini(){
  var position = new google.maps.LatLng(35.7100627,139.8107004) ; //経度、緯度の指定
  var options = { zoom:17, //ズーム指定
         center:position, //緯度・軽度の指定
                  mapTypeId:google.maps.MapTypeId.ROADMAP } ;
  var map = new google.maps.Map(document.getElementById("sample"),options) ; //地図の埋め込み指定

  // マーカと吹き出しの表示

  marker = new google.maps.Marker({position:position,map:map,icon:'ball0402.gif'}); //マーカーの追加、マーカーを立てる位置、地図の指定
                                                                                    //マーカーの画像指定(指定しない場合は標準マーカが表示される
                                                                //吹き出しの内容(HTMLのタグで指定する)
  msg = '<div>〒131-0045 東京都墨田区押上1丁目1−2<br>tel:0570-550-634<br><a href="http://www.tokyo-skytree.jp/">ホームページはこちら</a></div>' ;
  infoWindow = new google.maps.InfoWindow({ content: msg });    //吹き出しの内容を追加する
  marker.addListener('click', function() { infoWindow.open(map, marker); }); //マーカをクリックすると吹き出しを表示する
  infoWindow.open(map, marker); //吹き出しを初期表示する

  // ラインを引く座標の配列を作成 

  var points = [ 
      new google.maps.LatLng(35.7100627,139.8107004), 
      new google.maps.LatLng(35.7096000,139.8101004), 
      new google.maps.LatLng(35.7096000,139.8113004), 
      new google.maps.LatLng(35.7100627,139.8107004) 
      ]; 
  // ラインを作成 
  var polyLineOptions = { 
      path: points,           //座標テーブルの指定
      strokeWeight: 5,        //線の太さ
      strokeColor: "#0000ff", //線の色 
      strokeOpacity: "0.5"    //線の透過度
      }; 
  // ラインを設定 
  var poly = new google.maps.Polyline(polyLineOptions); 
      poly.setMap(map);
}
</script>
</head>
<body onload="ini();">
<div id="sample" style="width:640px; height: 400px;"></div>
</body>
</html>

Googleマップ(マーカの種類)   戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>地図</title>
<meta name="viewport" content="width=device-width">
<script    src="https://maps.googleapis.com/maps/api/js?key=#####&callback=initMap" async defer></script>
<!--Google Maps JavaScript API のアプリケーションAPIキーを取得して#####に指定してください、-->
<SCRIPT>
function ini(){
  var myOptions = {
  zoom: 10,                                     //ズーム指定
  center: new google.maps.LatLng(36,139.3),    //表示の中心座標
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  marker = [] ;
  infoWindow = [] ;
  dsp(1,36,139.1,google.maps.SymbolPath.CIRCLE,"#00ff00","●") ;
  dsp(2,36,139.2,google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,"#ff0000","↓") ;
  dsp(3,36,139.3,google.maps.SymbolPath.FORWARD_CLOSED_ARROW,"#ff0000","↑") ;
  dsp(4,36,139.4,google.maps.SymbolPath.BACKWARD_OPEN_ARROW,"#0000ff","▼") ;
  dsp(5,36,139.5,google.maps.SymbolPath.FORWARD_OPEN_ARROW,"#0000ff","▲") ;
} 

function dsp(n,ido,keido,tp,col,msg) {       // 番号、緯度、経度、マーカータイプ、色、吹き出し内容の指定
  position = new google.maps.LatLng(ido,keido) ; //経度、緯度の指定
  marker[n] = new google.maps.Marker( { position:position,map:map } ) ;
  si = {
       fillColor: col,                //塗り潰し色
	fillOpacity: 0.3,              //塗り潰し透過率
	path: tp,                      //マーカータイプ
	scale: 10,                      //マーカーサイズ
	strokeColor: "#000000",        //枠の色
	strokeWeight: 1.0  }           //枠の透過率} ;  
  marker[n].setIcon( si ) ;  

  infoWindow[n] = new google.maps.InfoWindow({ content: msg });    //吹き出しの内容を追加する
  marker[n].addListener('click', function() { infoWindow[n].open(map, marker[n] ) ; } ) ; //マーカをクリックすると吹き出しを表示する
  infoWindow[n].open( map, marker[n] ) ;   //吹き出しを初期表示する
}
</script>
</head>
<body onload="ini()">
<div id="map_canvas" style="width:800px; height: 600px;"></div>
</body>
</html>

JavaScriptJavaScript/HTMLJavaScript/HTML5サイトマップホーム