ＪａｖａＳｃｒｉｐｔ/HTML５おぼえがき

｜JavaScript｜JavaScript/HTML｜ JavaScript/HTML５｜ サイトマップ｜ホーム｜

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

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

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

■　音の再生：　ｍｐ３／ｏｇｇの再生｜テキストの読上げ

■　Ｗｅｂ　Ｓｔｏｒａｇｅ：　ＬｏｃａｌＳｔｏｒａｇｅの追加/変更/削除

■　Ｗｅｂ　Ａｕｄｉｏ　ＡＰＩ：音源生成｜ボリューム操作｜バランス操作｜ 音圧の描画｜スペクトル描画｜多チャンネル信号の分離(splitter)/合成(merger)｜ オーディオファイルの再生｜オーディオファイルの再生（アップロードファイル）｜ オーディオ再生速度の変更｜

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

■　その他：　Googleマップ　Googleマップ（マーカの種類）


入力フォーム

入力フォーム　　　戻る


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>入力フォーム（ＨＴＭＬ５）</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:<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を指定する。
//グラデーション終点のオフセット（０～１）と色の指定
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); //中心１座標x,y,半径r,中心２座標x,y,半径rを指定する
//グラデーション終点のオフセット（０～１）と色の指定
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それぞれの要素をRｘ0.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>

画像の保存（その２）　　　戻る

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

<!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>
<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>

Ｗｅｂ　Ｓｔｏｒａｇｅ

ＬｏｃａｌＳｔｏｒａｇｅの追加/変更/削除　　　戻る


<!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>

Ｗｅｂ　Ａｕｄｉｏ　ＡＰＩ

音源の生成　　　戻る


<!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);                                // １秒間に５０回

}
</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);                               // １秒間に１０回
}
</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>ブラウザの表示横幅を変えてください。幅７５０ピクセル以上と以下で表示レイアウトが変わります。<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('メインメニュー１のID')">▼メインメニュー１</div>
<div class="cls" id="メインメニュー１のID">
　◆<a href="#" onclick="cng('サブメニュー１のID')">サブメニュー１</a><br>
<div class="cls" id="サブメニュー１のID">
　├<a href="#" onclick="url('URL1-1')">サブサブメニュー１－１</a><br>
　├<a href="#" onclick="url('URL1-2')">サブサブメニュー１－２</a><br>
　└<a href="#" onclick="url('URL1-3')">サブサブメニュー１－３</a><br>
</div>
　◆<a href="#" onclick="cng('サブメニュー２のID')">サブメニュー２</a><br>
<div class="cls" id="サブメニュー２のID">
　├<a href="#" onclick="url('URL2-1')">サブサブメニュー２－１</a><br>
　├<a href="#" onclick="url('URL2-2')">サブサブメニュー２－２</a><br>
　└<a href="#" onclick="url('URL2-3')">サブサブメニュー２－３</a><br>
</div>
　◆<a href="#" onclick="cng('サブメニュー３のID')">サブメニュー３</a><br>
<div class="cls" id="サブメニュー３のID">
　├<a href="#" onclick="url('URL3-1')">サブサブメニュー３－１</a><br>
　├<a href="#" onclick="url('URL3-2')">サブサブメニュー３－２</a><br>
　└<a href="#" onclick="url('URL3-3')">サブサブメニュー３－３</a><br>
</div>
</div>


<div class="tab" onclick="cng('メインメニュー２のID')">▼メインメニュー２</div>
<div class="cls" id="メインメニュー２のID">
　・<a href="#" onclick="url('URL1')">サブメニュー１</a><br>
　・<a href="#" onclick="url('URL2')">サブメニュー２</a><br>
　・<a href="#" onclick="url('URL3')">サブメニュー３</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>

画像ファイルのドラッグ＆ドロップ　　　戻る


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ドラッグ＆ドロップ</title>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
</script>
</head>
<body>
<div id="target" style="border: solid 5px #ccc; padding:2em; text-align:center;">
ここに画像ファイルをドロップします。
</div>
<canvas id="cvs"></canvas>  
<script>
<!--
var target = document.getElementById('target');   //ドロップエリアの指定
target.addEventListener('dragover', function (e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
  e.stopPropagation();
  e.preventDefault();
  var canvas = document.getElementById("cvs");  //canvasの定義
  var ctx = canvas.getContext('2d');
  const reader = new FileReader();
  reader.onload = function (e) {
  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 = e.target.result;         //画像を読み込む
  }
  reader.readAsDataURL(e.dataTransfer.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 東京都墨田区押上１丁目１−２<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>

｜JavaScript｜JavaScript/HTML｜ JavaScript/HTML５｜ サイトマップ｜ホーム｜