2014年9月28日日曜日

動画ファイルをJavaScriptで実行する

JavaScriptで動画ファイルを取得できるように<video>にid属性を付与します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<video id="videosample">
    <source src="movie/movie1.mp4">
</video>
</body>
</html>

idを付与したら、JavaScriptのコードを書いていきます。今回はボタンを設置して、onclickで関数を実行にしましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script>

//動画を再生する
function execute(){
    var video = document.querySelector("#videosample");
    video.play();
}

</script>
</head>
<body>
<video id="videosample">
    <source src="movie/movie1.mp4">
</video>
<input type="button" value="実行" onclick="execute();">
</body>
</html>

document.querySelector()でvideoタグを取得して、video.play();と書くことで、<video>タグで指定した動画ファイルを実行することができます。

※動画ファイルを停止する時は、video.pause();を使います。

動画ファイルをHTMLの再生ボタンで実行する

<audio>タグと同様で<video>タグにcontrolsを追加すると、再生ボタンが追加されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<video controls>
    <source src="movie/movie1.mp4">
</video>
</body>
</html>

srcのファイルの位置の指定に間違いがなければ、


動画の下に再生ボタンが表示され、▶ボタンを押すことで動画が再生されます。

画像の引用
NHK CREATIVE LIBRARY

動画ファイルを設置する

動画ファイルを読み込むときは<video>タグを使います。<video>タグは<audio>タグと同様で、ファイルの指定は<video>タグ内に追加した<source>タグで指定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<video>
    <source src="movie/movie1.mp4">
</video>
</body>
</html>

audio同様、<video>タグで設定は完了ですが、開いてみると


動画は表示されるのですが、動画の再生を行うことができません。再生するためにはHTMLで実行用の再生ボタンを用意するか、JavaScriptで実行用の関数を用意しなければなりません。

画像の引用
NHK CREATIVE LIBRARY

音声ファイルをJavaScriptで実行する

JavaScriptで音声ファイルを取得できるように<audio>にid属性を付与します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<audio id="audiosample">
    <source src="sound/sound1.mp3">
</audio>
</body>
</html>

idを付与したら、JavaScriptのコードを書いていきます。今回はボタンを設置して、onclickで関数を実行にしましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script>

//音を鳴らす
function execute(){
    var audio = document.querySelector("#audiosample");
    audio.play();
}

</script>
</head>
<body>
<audio id="audiosample">
    <source src="sound/sound1.mp3">
</audio>
<input type="button" value="実行" onclick="execute();">
</body>
</html>

document.querySelector()でaudioタグを取得して、audio.play();と書くことで、<audio>タグで指定した音声ファイルを実行することができます。

※音声ファイルを停止する時は、audio.pause();を使います。

音声ファイルをHTMLの再生ボタンで実行する

<audio>タグにcontrolsを追加すると、再生ボタンが追加されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<audio controls>
    <source src="sound/sound1.mp3">
</audio>
</body>
</html>

srcのファイルの位置の指定に間違いがなければ、


上の画像のような再生ボタンが表示され、▶ボタンを押せば音声が出力されます。

音声ファイルを設置する

音声ファイルを読み込むときは<audio>タグを使います。<audio>タグは<img>タグと少し異なり、ファイルの指定は<audio>タグ内に追加した<source>タグで指定します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<audio>
    <source src="sound/sound1.mp3">
</audio>
</body>
</html>

これで音声ファイルの配置は完了ですが、この状態で開いてみても、音声ファイルを実行することができません。
実行するためにはHTMLで実行用の再生ボタンを用意するか、JavaScriptで実行用の関数を用意しなければなりません。

画像を表示する

画像はHTMLの<img>タグでファイルを指定して読み込み表示します。

<img>タグは<body>タグの内部に記載し、<img src=”画像ファイルを置いている位置”>のようにsrcで画像の配置場所を指示します。

今回はindex.html内に<img>タグを記載し、このファイルから画像のファイル(image1.jpg)がどこにあるかを書いて読み込みます。上のファイル構造だと、index.htmlはapplicationフォルダの中に格納されています。画像ファイルはapplicationフォルダ内にあるimageフォルダ内にimage1.jpgがあります。index.htmlから見ると、index.htmlとimageフォルダはapplicationフォルダ内にあるため、index.htmlから見ると、imageフォルダ内にimage1.jpgがあることになります。この状況をHTMLで書いてみると、

<img src="image/image1.jpg">

となる。

記述例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<img src="image/image1.jpg">
</body>
</html>

このファイルを開いてみると、image1.jpgが表示されています。

Webサイトやアプリを作る際のファイル構造

画像はHTMLでファイルの位置を指定して、表示します。効果音や動画は音声ファイルであるmp3や動画のmovファイルをHTMLで読み込んで、JavaScriptで実行するという手順をとります。

アプリを開発する時は左の様に画像用のフォルダ(image)を用意して、そのフォルダに画像ファイル(ファイル名の末尾に.jpgや.gifが付いたもの)をまとめます。動画も同様にmovieフォルダを用意して、そのフォルダ内に動画ファイル(.mp4や.flv)をまとめます。音声ファイル(.mp3)も同様にまとめます。アプリのデザインやプログラムが書かれているHTMLファイル(.html)はアプリ用に用意したフォルダ(今回はapplication)以下にindex.htmlというファイル名で保存することが一般的です。

追記
HTML内に記述したJavaScriptのコードはJSファイル(.js)という形式で切り出すことが可能で、JSファイルはjsフォルダに格納します。

2014年9月27日土曜日

documentオブジェクト(windowオブジェクト内の一つ)

documentオブジェクトはJavaScriptのコードが書かれているファイル内にあるHTMLからオブジェクトや値を取り出したり、HTMLに値を挿入する時に使用します。document.write()を利用することで直接文字列を表示することも可能です。

JavaScriptで書いた文字列を直接表示したい場合は、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
</head>
<body>

<script>
var text = "JavaScriptで書いた文字列です。";
document.write(text);
</script>

</body>
</html>

この様に<body>タグ内で<script>タグを挿入して、その中でdocument.write()をすることで、JavaScriptの処理内容を表示することができます。
(<!DOCTYPE html>から始まるHTMLの記述無しの<script>タグのみの記述の場合でもdocument.write()の処理結果は表示されます。)

表示する他にHTML側に記載されているタグをdocument.querySelector()でオブジェクトとして取得することもできます。

<!DOCTYPE html>
<html>
<head>
<title>sample</title>
</head>
<body>

<input type="text" id="form1" value="">

<script>
//id=”form1”のinputタグをオブジェクトとして取得する
var form = document.querySelector("#form1");
console.log(form);
</script>

</body>
</html>

console.log(form)の結果は

form = {
    type: "text",
    id: "form1",
    value: ""
};

こんなイメージのオブジェクトが表示されます。
(オブジェクトの操作に関しては、document.querySelectorの説明に記載)

documentオブジェクトでは、HTML側にあるタグをオブジェクトとして取得するだけでなく、HTMLタグを作成して、任意の箇所に挿入することも可能です。その時にはdocument.createElement("タグ名");で作成します。

<div id="area"></div>

<script>
//<div id="area"></div>を取得
var area = document.querySelector("#area");

//<input>タグを生成
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "form");
input.value = "test";

//生成したinputタグを<div id="area">{ここに入れる}</div>
area.appendChild(input);
</script>

このコードで、<input type="text" id="form" value="test">というタグを生成し、areaで囲まれた箇所にappendChild()でタグ内に作成したinputタグを挿入して表示することができます。

他にdocumentオブジェクトでは今開いているページのURL等の情報を調べることもできます。URLを調べる場合はdocument.documentURI;というプロパティを指定します。

//今開いているファイルのURLを表示する
console.log(document.documentURI);

documentについての詳細な説明(MDN)
document | Mozilla Developer Network

windowオブジェクト

windowオブジェクトは開いているブラウザを操作するための関数やプロパティが用意されているものです。

//今開いているブラウザの横幅を表示する
console.log(window.innerWidth);

//今開いているブラウザの縦幅を表示する
console.log(window.innerHeight);

このようにwindowオブジェクトのプロパティを調べることで、ウィンドウがどのような状態で開いているかを調べることができます。

windowオブジェクトでは関数(メソッド)も用意されており、アラートを表示するには、alert()があり、確認用のポップアップウィンドウを表示させるためにはconfirm()、入力欄のあるポップアップを表示させるためにprompt()があります。

//アラートのポップアップウィンドウを表示する
window.alert("エラーがあります");

//確認用のポップアップウィンドウを表示する
var res = window.confirm("〇〇で良いですか?");

//入力欄のあるポップアップウィンドウを表示する
var text = window.prompt("値を入力してください。");

なお、これらのメソッドを呼び出す時は、window.を省略でき、アラートの場合はalert()のみでも実行されます。

alert("エラーがあります。");

windowオブジェクト内にはdocumentオブジェクト等も格納されています。documentオブジェクトを利用する場合もwindow.は省略して、document.write();の様に記載することができます。

windowの詳しい説明
window | Mozilla Developer Network

2014年9月26日金曜日

undefinedについて

値を入れずに変数を定義した場合に変数の中にundefinedが入ります。変数を定義したのは良いけど、何も値を入れてないことがあるので、変数に値を入れたかどうかを確認する時にundefinedであるかを調べると良いです。

//値を入れずに変数を定義する
var args;

if(args == undefined){
    document.write("変数argsに値を入れていません");
}else{
    document.write("変数argsの中の値は" + args + "です");
}

nullについて

nullは変数の中に入れるもので、変数の中に何も値がないことを明示する為に使用します。

var args = null;

最初にnullを入れた変数を用意しておいて、何らかの処理を行ったら値を入れるという習慣にしておけば、処理を行ったかを確認することができるようになります。

var text = null;

if(/** 何らからの処理で **/){
    text = "テキストの挿入";
}

//変数の中に値があるかどうか調べる
if(text == null){
    document.write("変数の中に値はありません");
}else{
    document.write("変数の中に値があります");
}

2014年9月25日木曜日

JavaScriptのコアオブジェクト:真偽のオブジェクト(Booleanオブジェクト)

var flag = true;

変数に真(true)もしくは偽(false)の値を入れると、Booleaオブジェクトとして振る舞います。

Booleanオブジェクトについての詳しい説明(MDN)
Boolean | Mozilla Developer Network

JavaScriptのコアオブジェクト:数字のオブジェクト(Numberオブジェクト)

var number = 5;

このように変数を定義して値を挿入する時に、変数に数字を入れるとNumberオブジェクト(数字のオブジェクト)として解釈されます。Numberオブジェクトにも便利な関数があります。

Numberオブジェクトについての詳しい説明(MDN)
Number | Mozilla Developer Network

JavaScriptのコアオブジェクト:配列のオブジェクト(Arrayオブジェクト)

var array = ["apple", "orange", "melon"];

このように変数に配列として値を入れると、用意した変数は配列(Array)オブジェクトとして解釈されます。Arrayオブジェクトにも他のオブジェクト同様、関数(メソッド)が用意されており、変数に格納されている配列の値を操作することができます。

変数の中に入れた配列の値に新しい値を追加したい場合はpush()を利用します。

var array = ["apple", "orange", "melon"];
array.push("peach");

// ["apple", "orange", "melon", "peach"]と表示される
console.log(array);
※console.log()はエラー内容の確認の際に開いたJavaScriptコンソールで値を表示するためのコードです。変数の中に入れた値が表示されます。(document.writeでは配列やオブジェクトが入った変数の中身を表示することができないので、console.log()を使います)

二つの配列を一つにまとめる時はconcat()を利用します。
(実際は、二つ目の配列を一つ目の配列の末尾に加えて、新しい配列を作成します)

var array = ["apple", "orange", "melon"];
var array2 = ["tomato", "carrot"];

//arrayの配列の末尾にarray2の配列を加えて新しい配列を作成する
var newArray = array.concat(array2);

//["apple", "orange", "melon", "tomato", "carrot"]と表示される
console.log(newArray);

shift()という関数を利用すると、配列の最初の値を取り出して、元の配列から取り出した値を削除することが出来ます。

var array = ["apple", "orange", "melon"];

//配列から最初の値を取り出す
var val = array.shift();

//appleと表示される
console.log(val);

//["orange", "melon"]と表示される
console.log(array);

shift()とは逆でpop()を利用すると配列の一番最後の値を取り出して、元の配列から取り出した値を削除します。

var array = ["apple", "orange", "melon"];

//配列の最後の値を取り出す
var val = array.pop();

//melonと表示される
console.log(val);

//["apple", "orange"]と表示される
console.log(array);

reverse()という関数を利用すると配列の値の並び方が逆になります。

var array = ["apple", "orange", "melon"];
array.reverse();

//["melon", "orange", "apple"];
console.log(array);

配列を指定の箇所で切り取るにはslice()を利用します。

var array = ["apple", "orange", "melon", "tomato", "carrot"];

//0から数えて2にあたるmelonから4のcarrotよりも小さい範囲で値を取得
//取得した値から新しい配列を作って、用意した変数に入れる
var newArray = array.slice(2, 4);

//["melon", "tomato"]と表示されます
console.log(newArray);

配列の値をつなげて一つの文字列にしたい場合は、join()を利用します。joinの引数(カッコの中)には配列内の各要素をつなげる時の値を指定します。

var array = ["apple", "orange", "melon"];

//各値の間にカンマを入れて、一つの文字列にする
var str = array.join(",");

//apple,orange,melonと表示される
document.write(str);

逆にsplit()を使うことで、文字列を配列にすることができます。

var str = "apple,orange,melon";

//文字列の中にあるカンマで区切って、配列を生成する
var array = str.split(",");

//["apple", "orange", "melon"]
console.log(array);

配列の中に入っている値(要素)の数を調べるためにlengthプロパティを利用します。

var array = ["apple", "orange", "melon"];

//3と表示される
console.log(array.length);

Arrayオブジェクトについての詳しい説明(MDN)
Array | Mozilla Developer Network

2014年9月23日火曜日

JavaScriptのコアオブジェクト:日付のオブジェクト(Dateオブジェクト)

JavaScriptで今日の日付を調べたい時はDateオブジェクト(日付のオブジェクト)を呼び出して、Dateオブジェクト内の関数(メソッド)を利用して、表示したい形式に変換しながらコードを書きます。

たとえば、今日の日付を取得して表示する場合、

//new Date();で日付のオブジェクトを取得します。
var dateObj = new Date();

//今日の年を取得
var year = dateObj.getFullYear();

//今日の月を取得 0からカウントするので、1を加えておく
var month = dateObj.getMonth() + 1;

//今日の日を取得
var date = dateObj.getDate();

//今日の日付が表示される 2014-X-XX
document.write(year + "-" + month + "-" + date);

今の時刻を取得して表示する場合は、

var dateObj = new Date();

//今の時間を取得
var hour = dateObj.getHours();

//今の分を取得
var minute = dateObj.getMinutes();

//今の秒を取得
var second = dateObj.getSeconds();

//今の時刻が表示される HH:MM:SS
document.write(hour + ":" + minute + ":" + second);

実際、var dateObj = new Date();でどのような値を取得しているか確認してみると

var dateObj = new Date();
document.write(dateObj);

Tue Sep 23 2014 19:11:49 GMT+1000 (東京 (標準時))

このような時間に関する情報が詰まった値が表示されます。

Dateオブジェクトについての詳しい説明(MDN)
Date | Mozilla Developer Network

2014年9月22日月曜日

JavaScriptのコアオブジェクト:文字列のオブジェクト(Stringオブジェクト)

var args = "文字列";

このように変数を定義して値を挿入する時に、変数に文字を入れるとStringオブジェクト(文字列のオブジェクト)として解釈されます。StringオブジェクトとはJavaScriptで元から用意されているオブジェクトで、このオブジェクトの中にはたくさんの便利な関数(メンバ関数)が用意されていて、変数の中に文字列を入れた時はいつでも使えます。
(変数に文字列を入れた時の解釈は厳密には異なりますが、あくまでイメージとして)

たとえば、文字列の一部を他の文字に変えたい時は、Stringオブジェクトの中のreplace()を利用します。

//textという変数を用意して、ABCDEFという文字列を変数に入れる
var text = "ABCDEF";

//newtext変数を用意してtext変数内の文字列を入れ替えた結果を入れる
var newtext = text.replace("BCD", "XXX");

//AXXXEFと表示される
document.write(newtext);

他にindexOf()で文字列の中に検索したい文字列が何文字目にあるかを調べることができ、

var text = "ABCDEF";

//調べたい文字列をindexOf()のカッコの中に入れると検索が開始されます。
//1と表示されます。ここではAが0文字目となり、Bが1文字目になります。
document.write(text.indexOf("BCD"));


変数の中に入っている文字列の中に検索したい文字列が無かった場合は、

var text = "ABCDEF";

//変数の中に調べたい文字列がない場合は-1と表示されます
document.write(text.indexOf("CBD");

文字の切り出しを行いたい場合は、substr()を使います。

var text = "ABCDEF";

//1番目の文字列(ここではB)から4文字抜き出す
var newtext = text.substr(1, 4);

//BCDEと表示される
document.write(newtext);

変数の中に入れた文字列を配列にするsplit()というものもあります。

var text = "a,b,c,d,e,f";

//文字列を,区切りで配列に変える
var array = text.split(",");

//a b c d e fと表示される
for ( i = 0; i < array.length; i++ ) {
 document.write(array[i]);
}

trim()を使えば、変数に入れた値の両端に空白を削除します。

var text = "  hello world!  ";

//両端の空白が削除されて、hello world!と表示される
document.write(text);

変数の中に入れた文字列の長さを調べる際は、Stringオブジェクトにある関数(メソッド)ではなく、lengthプロパティを指定します。
var text = "abcde";

//5と表示されます
document.write(text.length);

Stringオブジェクトについての詳しい説明(MDN)
String | Mozilla Developer Network

2014年9月21日日曜日

一定時間後に指定の関数を実行する

10秒間にボタンを何回押したか?といった処理を行いたい時に、10秒後にcheck関数を動かすといった処理を行いたいとする。そんな時にはsetTimeoutを使う。setTimeoutは指定の時間が経過した時に指定した関数を実行するもので、setTimeout(関数名, ミリ秒)で指定する。

var counter = 0;
setTimeout(check, 10000);

//カウンターに関する関数でボタンのonclickで実行する関数。
function  count(){
    counter++:
}

function check(){
    alert(counter + “回クリックしました。”);
}

このようにすることで、10000ミリ秒(10秒)後にcheck関数を実行することができます。setTimeoutはsetIntervalとは異なり、実行は一回だけなので、clearTimeoutで実行の停止を行う必要はありません。

他の条件を満たした場合はsetTimeoutで指定した関数を実行しない場合は、

checkTimer = setTimeout(check, 10000);

//setTimeoutで指定した関数が実行される前に何らかの条件を満たした場合
if( counter > 100 ){
    clearTimeout(checkTimer);
}

clearTimeoutで実行予定の指示を削除することができます。

JavaScriptでタイマーを作る

カウントダウン式のタイマーを作る場合、一定時間ごとに処理を指定できるsetInterval関数を利用する。setIntervalは指定した時間の度に実行するもので、setInterval(関数名, ミリ秒)で指定する。(1000ミリ秒 = 1秒)

始めにでカウントダウンの数字を保持しておくためのグローバル変数を定義しておく。

var counter = 10;
countdownTimer = setInterval(countdown, 1000);

function countdown(){
    counter--;
}

このようにすることで、countdown関数を1000ミリ秒(1秒)毎に実行する。注意する点として、counterは0よりも小さくなっても実行し続けるので、0になって停止したい場合は、

function countdown(){
    counter--;

    if( counter == 0 ){
        clearInterval(countdownTimer);
    }
}

setIntervalの実行の際に用意した変数をclearIntervalのカッコの中(引数)に入れて、一定時間ごとの指定を削除する。
(clearhIntervalを使わないならば、setIntervalの値を変数に入れなくても良いです)

HTMLでカウントダウンタイマーを表示する例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>カウントダウン</title>
<script>
var countdownArea;

//カウントダウンを表示するエリアのオブジェクトを取得しておく
window.onload = function(){
    countdownArea = document.querySelector("#countdown");
};

var counter = 10;
countdownTimer = setInterval(countdown, 1000);

function countdown(){
    counter--;
    //カウントダウンエリアの文字をカウンターの数字で上書き
    countdownArea.innerHTML = counter;

    if( counter == 0 ){
        clearInterval(countdownTimer);
    }
}
</script>
</head>
<body>

<div id="countdown"></div>

</body>
</html>

ブラウザに表示されている文章をファイルに保存する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>local file save</title>
</head>
<body>
<div id="content">
〇〇君とプールに行って、一緒に泳ぎました。<br>
楽しかったです!
</div>
</body>
</html>

<div>タグで囲った文章をファイルに保存するボタンを設置します。始めに保存ボタンを追加します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>local file save</title>
</head>
<body>
<div id="content">
〇〇君とプールに行って、一緒に泳ぎました。<br>
楽しかったです!
</div>
<input type="button" value="保存" onclick="save();">
</body>
</html>


保存ボタンのonclickで指定した関数を、下記のようにコードを書きます。

<script>
function save(){
    //<div id=”content”>で囲まれた箇所の文章を取得する
    var content = document.querySelector("#content").innerHTML;

    //取得した文章をtextファイルの形式に変換 content.trim()は文章の前後のスペースを削除
    var blob = new Blob([content.trim()], {type : "text/plain"});

    //ダウンロードリンクを付ける
    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);

    //ダウンロードするファイル名を決めます
    link.download = "file.txt";
  
    //画面に一瞬だけダウンロードリンクを表示し、ファイルのダウンロードを行う
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
</script>

処理の流れは、 ・<div id="content">で囲まれているところの文章を取得して、テキストファイルに変換する
・ダウンロード用のリンクを一瞬だけ表示して、ダウンロードを開始する

上記のコードを書いた後に保存ボタンが動くか確認してみましょう。

2014年9月18日木曜日

JavaScriptで文章を編集できるエリアを指定する

<div id="editable">
〇〇君とプールに行って、一緒に泳ぎました。<br>
楽しかったです!
</div>

上記の<div id="editable">で囲った文章を編集可能にするには、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>content editable</title>
<script>
window.onload = function(){
    var contentArea = document.querySelector("#editable");
    contentArea.contentEditable = true;
};
</script>
</head>
<body>
<div id="editable">
〇〇君とプールに行って、一緒に泳ぎました。<br>
楽しかったです!
</div>
</body>
</html>

document.querySelector("#editable");で囲った箇所をオブジェクトとして取得し、contentEditableプロパティの値をtrueにすると、編集可能となります。

ブラウザに表示された文章を編集できるようにする


たとえば、上記の文章をブラウザ上で編集したい場合、

<div contenteditable="true">
〇〇君とプールに行って、一緒に泳ぎました。<br>
楽しかったです!
</div>

文章を<div>で囲って、<div>タグの中にcontenteditable="true"を追加すると、


<div contenteditable="true">で囲ったところを選択できるようになり、文章の編集ができるようになります。

Google Mapsで緯度経度(latlng)を調べる







Google Chromeを開いて、右上のアプリの画面から地図を開きます。


地図を開いたら、緯度経度を調べたい箇所にカーソルを合わせて、右クリックを押し、


この場所についてをクリックします。



クリックすると、左上の検索バーの下にカーソルを合わせた箇所の情報が表示され、


赤い線で引いた箇所の数字が緯度経度の情報になります。

2014年9月17日水曜日

Chromeリモートデスクトップで画面共有

chrome リモートデスクトップを利用するとネットで二台以上のパソコンをつないで、繋がっている人のパソコン画面を操作できるようになります。 (※Chromeリモートデスクトップを使うには、Googleのアカウントが必要です)

始めにgoogle chromeを開いて、新しいタブを開きます。


新しいタブを開いたら、左上にあるAppsをクリックし、


ストアをクリックします。


Chromeウェブストアを開いたら、①のフォームにリモートデスクトップと入力し、右側にChromeリモートデスクトップが表示されます。表示されたら、+無料をクリックしてインストールします。


インストール後にAppsを開くと、Chromeリモートデスクトップが追加されています。さっそく、Chromeリモートデスクトップを起動してみましょう。


Chrome リモートデスクトップを開くと、承認が表示されるので、続行をクリックします。


Chrome Remote Desktopのリクエストが表示されたら、承認するをクリックします。


Chromeリモートデスクトップの画面が表示されたら、リモートサポートの利用を開始をクリックします。

これから画面の共有を行います。自身のPCを他の人と共有したい場合は、


リモートサポートの共有をクリックし、


アクセスコードを発行します。コードが表示されたら、画面共有してほしい相手にこのコードを伝えて待ちます。

コードを受け取った相手も同様に今までの手順でChromeリモートデスクトップをインストールし、アプリの承認まで済ませた後、


リモートサポートのアクセスをクリックし、


受け取ったアクセスコードを入力して接続します。


アクセスコードに誤りがなければ、Chrome内に相手のPCの画面が表示されます。試しにChrome内に写っているデスクトップ画面を操作しながら、共有している人のパソコンを見てみよう。二つの画面が同じ動きをしていたら、共有はうまくいってます。

2014年9月16日火曜日

オブジェクトを利用して、人や国の情報など、各値をひとまとめにしておく

var japan = {
    country: "japan",
    capital: "tokyo",
    //緯度経度
    latlng: "35.681382,139.766084"
};

上記のように一つの変数で日本についての情報をまとめる時にオブジェクトを利用します。このようにしておくことで、たとえば首都名を表示する時に

japan.capital;

と書けば、tokyoという値を取得できます。

var tsuyoshi = {
    name: "Tsuyoshi Saito",
    birthday: "0627",
    favorite: "biology",
    ability: "plant science"
};

上記のように人の情報等をまとめておくと便利です。このように作成したオブジェクトを配列に入れることで、複数の人の情報を一つの変数で管理できるようになります。

//名簿
var list = [
    {
        name: "Yuki Araki",
        birthday: "0404",
        favorite: "sociology",
        ability: "collect data"
    },
    {
        name: "Tsuyoshi Saito",
        birthday: "0627",
        favorite: "biology",
        ability: "plant science"
    },
    {
        name: "Ryoko Sato",
        birthday: "0826",
        fatovite: "english",
        ability: "horticulture"
    }
];

オブジェクトによく使う関数をまとめておく

オブジェクトは、変数の中に名前付の値を入れるためのもので、値は文字列や数字だけでなく、配列や関数、もちろんオブジェクトを入れることが可能です。この特徴を利用して、よく使用する関数をオブジェクトの中に入れて、様々なページで使いまわしたりします。

var pack = {
    checkText: function(text){
        if( text.length > 0 ){
            //何かの処理を行う
        }
    },

    playSound: function(sound){
        sound.play();
    }
}

上記のように一つのオブジェクトによく使う関数(メソッド)をまとめたとして、この関数を呼び出すときは、

var sound = new Audio();
pack.playSound(sound);

オブジェクトを入れている変数名の後に.(ドット)を付けて、その後に関数を入れているプロパティ名を指定します。関数をまとめたオブジェクトを外部JSファイルとしてまとめて、<script src="***"></script>で呼び出すと便利です。

<html>
<head>
<title>sample</title>
<script src=”./js/pack.js”></script>
<script>
window.onload = function(){
 var text = “abcdef”;
 pack.checkText(text);
}
</script>
</head>
<body>

</body>
</html>

配列の中に値があるかを調べる

たとえば、

var array = ["apple", "banana", "orange"];

という配列があった場合、配列の中にappleという文字があるかを調べるとする。上記のようにfor文で

for ( i = 0; i < array.length; i++ ) {
    if ( array[i] == "apple" ) {
        //何かの処理を行う
    }
}

配列の中身を繰り返し調べるという手段がありますが、forを使わなくて、配列の中身の値があるかを調べる関数があります。

array.indexOf("apple")のようにindexOf関数の()の中に調べたい値を入れ、配列内に指定した文字列があれば、配列内の順番を返す。

たとえば、appleだった場合は、0番目の値なので、array.indexOf("apple");だと0になります。bananaの場合は1でorangeの場合は2になります。indexOfの()で指定した文字列が無かった場合、たとえばsoyと指定した場合は-1という値が返ってきます。array.indexOf("文字や数字")は、0以上の場合は指定した値があることになり、0よりも小さい数字の場合は指定した値がないことになります。

たとえば、var answer = [1, "Y"];という質問番号とその回答(YesならY、NoならNのようにする)の配列を作ったとして、Yと答えたものだけ処理を続けたいという場合は、下記のようになります。

var answers = [ [1, "Y"], [2, "Y"], [3, "N"] ];

for ( i = 0; i < answers.length; i++ ) {

    //indexOfは値があれば0以上の数字になるので、0以上の場合はYとみなす
    if( array[i].indexOf("Y") >= 0 ) {
        //Yesと答えた質問のみ処理を続ける
    }
}

変数の中に入っている値が配列であるかを調べる

var array = ["apple", "banana", "orange"];
var check = (array instanceof Array);
document.write(check);

(変数 instanceof Array)と書くことで、変数に入っている値が配列だった場合はtrue、配列でない場合はfalseと表示されます。

変数の中に入っている値がオブジェクトであるかを調べる場合は(変数 instanceof Object)で調べることができます。

var array = ["apple", "banana", "orange"];
if(array instanceof Array){
    //変数の中身が配列の場合はこちらを実行する
}else{
    //変数の中身が配列ではなかった場合はこちらを実行する
}

配列の使いどころ

var answers = ["", "", ""];

配列は複数の値を持てるので、クイズ等で問題に答えた時の値を入れると良いです。

たとえば、「Q1. 〇〇はなんでしょう?」とあった時に、「××」と答えたとします。この時に、[1, "××"]と問題番号と回答の対の配列を作成し、

var answers = []; //変数に空の配列を入れる
answers.push([1, "XX"]);
({配列が入った変数}.push({値});で配列に値を追加する。)
(例:push関数の中にある変数は[問題番号、解答]の組み合わせ)

とすることで、answers配列に答えた内容が保持されます。answers.lengthとすることで現時点での回答数が取得できるので、ゲームの終了時点の指標としても使えます。

Q2で返答した内容を取得したい場合は、

//解答を入れるための配列を用意する
var answers = [];

answers.push([1, "XX"]);
answers.push([2, "YY"]);
answers.push([3, "ZZ"]);

for ( i = 0; i < array.length; i++ ) {
 if (array[i][0] == 2){
  document.write(array[i][1]);
 }
}

上記のようにpushで入れた問題番号と回答の配列の問題番号をif文で確かめた後、回答を表示するという手順で行います。ちなみに上記のコードを実行するとYYと表示されます。

長くなったJavaScriptのコードを外部のファイルに外出しする(外部JSファイル)

<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<script>
function initialize(){
    var canvas = document.querySelector("#map-canvas");
    
    var myLatlng = new google.maps.LatLng(35.001107,135.759331);
    var mapOptions = {
        zoom:16, //表示サイズ
        center: myLatlng
    };
    var map = new google.maps.Map(canvas, mapOptions);
    
    //ピンの位置を設定します
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'share karasuma!'
    });
}

google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>

<body>
<div id="map-canvas"></div>
</body>
</html>

HTMLファイル内に上記のようにJavaScriptのコードを書いたとします。コードが長くなってHTMLの記述が読み難くなった時、新しいファイルを作成して、記述を外出しします。

たとえばこのコードは地図の表示に関するものなので、コードの外出し用のファイルをmap.jsとします。


切り出し前のファイルをindex.htmlだとすると、index.htmlがあるフォルダ内にjsフォルダを作成し、jsフォルダ内にmap.jsファイルを作ります。map.jsファイルには、

function initialize(){
    var canvas = document.querySelector("#map-canvas");
    
    var myLatlng = new google.maps.LatLng(35.001107,135.759331);
    var mapOptions = {
        zoom:16, //表示サイズ
        center: myLatlng
    };
    var map = new google.maps.Map(canvas, mapOptions);
    
    //ピンの位置を設定します
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'share karasuma!'
    });
}

google.maps.event.addDomListener(window, "load", initialize);

切り出し元のindex.htmlに記述されていたJavaScriptのコードから、<script>と</script>を抜いたものを記載し、

index.htmlの方は、

<script src="./js/map.js"></script>

中身を抜いた<script>タグに上記の様にsrc=”./js/map.js”と追加すると、切り出したmap.jsのコードを読み込み実行することができます。

関数だけまとめたものや、クイズの際に作成する出題のオブジェクトを外部ファイルに切り出しておくと、コードの見通しが良くなり、開発がスムーズになります。

例:コードを切り出した後のindex.html
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<script src="./js/map.js"></script>
</head>

<body>
<div id="map-canvas"></div>
</body>
</html>

2014年9月13日土曜日

関数の作り方と使い方

以前の記事で関数は処理をまとめて何度でも使用できる様にするという内容を記載しました。具体的な処理としては、

//計算をする関数
function calculation(x, y){
    var result = x + y;
    return result;
}

//作成した関数を呼び出し実行する。実行結果はres変数に入れる
var res = calculation(5, 8);

このようにfunction 関数名()関数を用意して、カッコの中には計算の際に使う数字を入れ、関数の中でreturn 変数を行うことで、関数内の処理でできた値を返すということを行います。

関数はreturnで値を返す他に、

//グローバル変数、いろんなところで使える変数
var form;

window.onload = function(){
    //とりあえず値だけ取得しておいて、変数の中に入れておく
    form = document.querySelector("#id");
};

関数内で値だけ取得しておいて、グローバル変数(関数外でも使用できる変数)に入れておいたり、

function execute(string){

    //関数の中で条件を設ける
    if(string.length > 5){
        //条件を満たしたら、何らかの処理を行う
        complete();
    }
}

function complete(){
    //条件を満たしたときに実行したいコード
}

条件式だけ書いておいて、条件を満たしたら他の関数を実行させるというチェックを行う関数というものでも良いです。

2014年9月12日金曜日

window.onloadの使いどころ

セレクタAPI{document.querySelector("#id名")}でHTML側のフォームタグをオブジェクトとして引っ張ってくる時、<scirpt>の位置によってはセレクタAPIが使えないことがあります。

<html>
<head>
<script>

var form = document.querySelector("#id名");

</script>
</head>
<body>

<input type="text" id="{id名}">

</body>
</html>

このように書くと<body>より前だとformタグは取得できないため、
(HTMLの記述の末尾に同様の記述を行ったら読み込めます。理由は最後で)

<script>
window.onload = init;

function init(){
    //ここでvar 変数をすると、この変数はこの関数の中だけでしか使えない
    var form = document.querySelector("#id名");
}
</script>

このように関数の中でdocument.querySelector("#id名")の記述を書いて、window.onloadでフォームのオブジェクトを取得する関数を実行します。しかし、この書き方ではinit関数の中でしかフォームのオブジェクトを使えません。ここでスコープを利用して、

<script>
//ここで変数を定義すれば、すべての箇所で使用可能となる
var form;

window.onload = init;

function init(){
    form = document.querySelector("#id名");
}

function exec(){
    //他の関数の中でも取得したフォームのオブジェクトを使うことができます。
    form.value = "文字列の挿入";
}
</script>

initでフォームのオブジェクトを取得して、他の関数で使用することが可能となります。

追記
<html>
<head>
<script>
var form = document.querySelector("#id名");
</script>
</head>
<body>
<input type="text" id="{id名}">
</body>
</html>

<body>より前に<script>を設置し、そこでdocument.querySelector("#id名")でフォームが取得できない理由は、<script>タグ内でdocument.querySelector()を実行しても、取得したいフォームが下に記述されており、まだ読み込まれていないので、指定したIDのフォームは存在していないことになります。

<html>
<head>
</head>
<body>
<input type="text" id="{id名}">
</body>
<script>
var form = document.querySelector("#id名");
</script>
</html>

このように取得したいフォームより後でdocument.querySelector()を読み込むと指定のフォームが取得できるようになります。

セレクタAPI document.querySelector()

document.querySelectorはHTMLからタグごと取得する関数(オブジェクトの中にある関数はメンバ関数もしくはメソッドと呼ぶ)です。querySelector()の引数(カッコの中にいれる値)は取得したいタグのidの前に#を付けて取得します。

<input type="text" id="form1" value="">だった場合、

var form1 = document.querySelector("#form1");で取得します。

form1を変数の中身が見れるconsole.logで調べてみると、
(console.log()はエラーの確認の際に開くコンソールで値の確認ができます)

<html>
<head>
<script>

window.onload = function(){
    var form1 = document.querySelector("#form1");
    console.log(form1);
}

</script>
</head>
<body>

<input type="text" id="form1" value="">

</body>
</html>

form1変数に入っている値は <input type="text" id="form1" value="">で、これはelementオブジェクトで、

form1 = {
    type: "text",
    id: "form1",
    value: ""
};

というように考えることができます。このように書き換えられることで、form1.valueのようにオブジェクトの特定のプロパティを指定して値を取得することができるようになります。

document.querySelector()は<input>タグだけではなく、他のタグも取得できます。たとえば、区切りを意味する<div>や<section>も取得できます。

<html>
<head>
<script>

window.onload = function(){
    var area = document.querySelector("#area");
    //ここにテキストを入れてますと表示されます
    console.log(area.innerHTML);
}

</script>
</head>
<body>

<div id="area">ここにテキストを入れてます</div>

</body>
</html>

この時、var area = document.querySelector("#area");で上の<div>から</div>までの値をすべて取得できます。<div>で囲まれたテキストは、innerHTMLプロパティに格納されており、area.innerHTMLで取得できます。areaをオブジェクト形式で書き直すと

area = {
    id: "area",
    innerHTML: "ここにテキストを入れています"
};


となります。

<div>で囲まれた箇所の文字列を書き換えたい時はarea.innerHTML = “変更したい文字列”;で行います。

window.onloadで表示された直後に指定の関数を実行しよう

window.onloadはHTMLにJavaScriptを書いた時、一番最初に必ず読み込まれてほしい関数の処理を実行する時に利用します。HTML内でJavaScriptを記述すると、タグ内に追加したonclick等で関数を実行させない限り関数が実行されないので、フォームの表示後の即時実行ではwindow.onload(イベント)を利用します。実際の書き方を見てみると、

window.onload = 関数名

もしくは、

window.onload = function(){
//ここに処理を書く
};

このどちらかの形式をとります。前者の使い方は

<script>
window.onload = init;

function init(){
    alert("hello world!");
}
</script>

このように書いたコードを実行すると、読み込まれた直後にinit関数が読み込まれ、hello world!が表示されます。


もう一つの

<script>
window.onload = function(){
    alert("hello world!");
};
</script>

window.onloadで関数名を指定せず、function()から書き始める方法もあります。このように関数名のところに直接functionから書くものを無名関数と呼びます。無名関数であっても関数なので、function内に処理を書くことで、一つ前のinit関数を作成してwindow.onloadでinit関数を指定するものと同じ結果になります。実際、このコードを実行してみると同様の結果になります。

2014年9月9日火曜日

フォームに入れた値が文字列でないかを調べよう

フォームに入れた値が文字列だった場合、計算を始める前に警告を表示したいということがあります。前回まで作成してきたcalculate関数に入力内容のチェックを入れてみます。

function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    if (typeof num1 == "number") {
        //処理を続ける
    } else {
        window.alert("form1に入れた値は数字ではありません");
    }

    //以下省略
}

このように変数の型を調べて、その結果からif文で数字出なかった場合は警告を出すということができますが、ここで一つ問題なのは、document.querySelector()のvalueで取得した値は数字を入力していても文字列として返ってくるという点で、typeof numで型を調べると、string(文字列)として認識されてしまいます。。何とかフォームに入力した値が数字であると確認するために、文字列をparseIntしてから調べるという手段があります

num1 = parseInt(num1);で値を整数に変換する際、元の変数の値が数字以外だった場合、NaN(数字ではない)という値で返っています。この状態でisNaN関数を使って、変数が数字でないかを調べることができます。 isNan関数は変数の値が数字ではないときにtrue(真)を返すので、

function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    //変数に入れた値を数字に変換する
    num1 = parseInt(num1);

    //文字列をparseIntすると値がNaNになるため、isNaN(変数)で変数の値を調べるとtrueが帰ってくる
    if (isNaN(num1) == true) {
        window.alert(“form1に入力した値は数字ではありません”);
    } else {
        //処理を続ける
    }

    //以下省略
}

ということで、フォームに入力した値を調べることができ、より確実に処理を進めることが可能となります。

計算機で足し算以外の演算を追加しよう


足し算の箇所をプルダウン形式(選択肢がいくつかあるフォーム)で足し算の他に引き算、掛け算と割り算の選択をできるようにします。プルダウン形式も今までのフォームと同様にHTMLで追加しますが、<input type="***">の形式では対応できません。そこで<select>を利用します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){
    //省略
}
</script>
</head>
<body>

<input type="number" value="" id="form1">

<select id="operator">
    <option>+</option>
    <option>-</option>
    <option>×</option>
    <option>÷</option>
</select>

<input type="number" value="" id="form2">
=
<input type="number" id="result">
<input type="button" value="計算する" onclick="calculate();">

</body>
</html>

計算方法のプルダウン形式(セレクトボックス)が追加できたら、次は関数内の処理を見ていきます。

function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    var form2 = document.querySelector("#form2");
    var num2 = form2.value;

    //計算結果を入れる変数を用意する
    var addition;

    var operator = document.write("#operator");
    //<select>でも選択した値は.valueで取得します。
    var op = operator.value;
 
    //選択した項目のoptionの文字列によって計算方法を変える
    if (op == "+") {
        addition = num1 + num2;
    } else if (op == "-") {
        addition = num1 - num2;
    } else if (op == "×") {
        addition = num1 * num2;
    } else {
        addition = num1 / num2;
    }

    //計算結果表示用のフォーム
    var resultForm = document.querySelector("#result");
    resultForm.value = addition;
}

あとは計算結果をresultFormのvalueに放り込めば処理は終了です。

HTMLのフォームにJavaScriptで処理を追加して計算機を作ろう2

前回、フォームからcalculate関数を実行できるようにコードを追加して、計算結果をフォームに渡して表示するというところまで記載しました。作成したコードを実行して、数字を入力して計算してみると、


7 + 4を行ったはずなのに、結果が74になりました。これは各フォームに入力した値が数字であっても、変数に入れた時に文字列として判断されたため、7という文字と4という文字を足したものが返ってきたことになります。この症状を回避するために、フォームから取得した値を文字列に変換しなければなりません。

<script>
var form1 = document.querySelector("#form1");
var num1 = form1.value;
//文字列を数字に変換して、再度変数に入れなおす
num1 = parseInt(num1);

var form2 = document.querySelector("#form2");
var num2 = form2.value;

//文字列を数字に変換して、再度変数に入れなおす
num2 = parseInt(num2);

//計算結果を入れる変数を用意する
var addition;
addition = num1 + num2;

//計算結果表示用のフォーム
var resultForm = document.querySelector("#result");
resultForm.value = addition;
</script>

parseIntは変数の中に入っている文字列の値を数字に変換する関数で、計算を行う前に各値を数字にする必要があります。この処理を行った上で再度表示を行ってみると、


7 + 4 = 11で、期待する値が結果のフォームに表示されました。今回の処理から変数の中に入っている値がどのような型(文字列か数字か)を意識してプログラミングを書く必要があるということが分かりました。

2014年9月8日月曜日

HTMLのフォームにJavaScriptで処理を追加して計算機を作ろう1

前回作成したフォームにJavaScriptのコードで処理を追加するために関数を用意します。HTMLにJavaScriptを書いて実行するためには<head>か<body>で囲まれた箇所に<script>で囲んでコードを書きます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//ここにJavaScriptのコードを書く
</script>
</head>
<body>
<script>
//ここにもJavaScriptのコードを書ける
</script>
</body>
</html>

前回作成したフォームを元に最初に関数を用意してみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){

}
</script>
</head>
<body>

<input type="number" value="">
+
<input type="number" value="">
=
<input type="number">
<input type="button" value="計算する">

</body>
</html>

この関数をHTMLで作成したボタンで実行するためには、ボタンにイベントを追加します。

<input type="button" value="計算する" onclick="calculate();">

ボタンのHTMLコードにonclick="関数名"を追加し、ボタンを押すことで指定した関数は実行されます。それでは、事前に用意した各フォームから入力した値を取り出して計算する関数を書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
<script>
//計算するための関数
function calculate(){

}
</script>
</head>
<body>

<input type="number" value="" id="form1">
+
<input type="number" value="" id="form2">
=
<input type="number" id="result">
<input type="button" value="計算する" onclick="calculate();">

</body>
</html>

ボタンを押したときに各フォームからそれぞれ値を取り出したいので、各フォームの識別のために<input type="number">にid(フォームの名前)を追加しておきます。id名は自由です。idを振り分けたフォームをJavaScriptの関数内で取得するために、document.querySelector()という予め用意されている関数を利用します。querySelector()の引数に#を付けたid名を入れます。

var form1 = document.querySelector("#form1");
var form2 = document.querySelector("#form2");

取得したform1をwindow.alert(form1);で値を見ても、[object HTMLInputElement]を表示されて、入力した値を取得できません。(window.alert()はポップアップで値を表示してくれるので、開発時の値の確認では便利です。) document.querySelectorでは表示されているフォーム全体を取得しているので、フォームの中のどの要素の値がほしいかを指定しなければなりません。入力した値は<input type="number" value="">のvalueに入っているので、

var num1 = form1.value;と、フォームそのものを入れた変数の後に.(ドット)valueをつなげて値を取得します。
var form1 = document.querySelector("#form1");
var num1 = form1.value;
window.alert(num1);

num1の値を確認すると、入力した値が入っていることが分かります。それでは用意したcalculate関数の中でformから値を取得して、計算をしてみましょう。
<script>
function calculate(){
    var form1 = document.querySelector("#form1");
    var num1 = form1.value;

    var form2 = document.querySelector("#form2");
    var num2 = form2.value;

    //計算結果を入れる変数を用意する
    var addition;
    addition = num1 + num2;

    //計算結果表示用のフォーム
    var resultForm = document.querySelector("#result");
    resultForm.value = addition;
}
</script>

計算結果もフォームに入れたいので、resultForm = document.querySelector("#result");でフォームを取得しておいて、valueに値を入れます。入れる時、他のフォームで値を取得した方法と逆で、resultForm.value = addition;とすることでフォームに値を入れて表示させることができます。

このコードを実行すると意図しない問題が発生しますが、それは次回に説明します。

2014年9月7日日曜日

HTMLでフォームの作成3 フォームに値を入れる

表示したフォームに値を入れてみます。下記のコードを書いてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
</head>
<body>

<input type="number" value="5">
+
<input type="number" value="8">
=
<input type="number">
<input type="button" value="計算する">

</body>
</html>

このコードを実行(表示)してみると、


valueに入れた値がフォームに表示されています。typeがbuttonの場合、valueに入れた文字列がボタンに表示されています。

HTMLでフォームの作成2 使用できるフォームの種類

前回、HTMLの<input type="number">で数字を入力するフォームが表示されました。フォームですが、inputの横にあるtype="number"のnumberを変えると、数字を入力するフォーム以外にも様々なフォームが表示され、<input type="***">のtypeで指定できるフォームの型は下記の通りです。buttonとsubmitのボタンに表示する文字は<input type="button" value="button">、<input type="submit" value="submit">のようにvalue="***"で指定しています。
(使用しているブラウザによって、使用できないtypeがあります。Google Chromeをベースに記載しています)



これらのフォームを組み合わせて、アプリをデザインしていきましょう。

HTMLでフォームの作成1 HTMLの書き方

フォームを作成する時はJavaScriptでも書くことはできますがコードが複雑になるので、フォームのような見栄えの部分ではHTMLというデザインに関する言語を使います。説明の前に下記のコードを書いて、form.htmlというファイル名にして保存してみましょう。始めに下記のサンプルコードを書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォーム</title>
</head>
<body>

<input type="number">
+
<input type="number">
=
<input type="number">
<input type="button" value="計算する">

</body>
</html>

実行してみると、


画面にフォームが表示されました。アプリを作る時はこのフォームに動作を追加していきます。

HTMLのコードの書き方を解説すると、一行目の<!DOCTYPE html>はこれからHTMLのコードを書きますという宣言で、必ず必要というものではありません。二行目の<html>はここからHTMLのコードになりますという印(タグ)で<html>と</html>で囲った箇所がHTMLの記述となります。三行目からの<head>ですが、表に見えない部分の情報を入力するところで、<meta charset="UTF-8">は今回のHTMLはUTF-8という文字列で記述ということを設定しています。見えない部分の情報は</head>までになります。次の<body>と</body>で囲まれている箇所が実際に表示される箇所で、今回のサンプルコードでは、<input type="number">というものと<input type="button" value="計算">というものと、+や=といった記号が書かれています。<input type="number">は数字を入力するフォームを表示という意味で、<input type="number">を組み合わせることで簡単な計算機を表示しています。
※現時点では計算ボタンを押しても計算が開始することはありません。

まとめると

<!DOCTYME html>
<html>
<head>
表示されない箇所の諸々の設定
</head>
<body>
ここに書いたコードは表示される。ユーザが操作できる(ユーザーインターフェースという)
</body>
</html>

このような記述ルールとなります。

補足
HTMLでは、改行する時にEnterボタンを押しても改行されず、<br>を入れることで改行されます。

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTMLサンプル</title>
</head>
<body>

文章を表示します。
<br>
改行してから文章を表示します。

</body>
</html>


<br>を入れることで改行されます。


HTMLでできること
HTML | Mozilla Developer Network

2014年9月6日土曜日

JavaScriptで書いたコードのエラーを確認しよう

プログラミングは決められた書き方をしなければエラーになり、書いたコードが実行されません。JavaScriptでの書き方を間違えた際のエラーの確認方法はコンソール(Console)を確認します。これからコンソールの表示の仕方を見ていきます。

JavaScriptを練習する上でGoogle ChromeというインターネットのWebページを見るためのソフトを使うと良いです。Google Chromeを入れるために下記のURLからダウンロードとインストールを行いましょう。Google Chromeを無料ダウンロードをクリックすると自動でお使いのパソコンに入ります。
http://www.google.co.jp/intl/ja/chrome/browser/

Google Chromeをインストール(パソコンに入った状態)した後、JavaScriptが書かれたファイルをGoogle Chromeで開きます。


JavaScriptを書いたファイルは上のようなアイコンで表示され、


アイコンを右クリック → プログラムから開く(H) → Google Chromeを選択するとGoogle Chromeで作成したJavaScriptの実行結果が表示されます。

書いたコードにエラーがないかを調べるには、



右上にある縦線三本のアイコンをクリックして、


ツール → デベロッパーツール(D)を選択します。


上の画面の様に下側に枠が表示されたらF5を押してプログラムの再読み込みを行います。エラーは下の枠に表示され、エラーがあった場合は赤字で英語でエラー内容が表示されます。コードにエラーがなければ何も表示されません。

今回のエラーですが、Uncaught RefernceError: bug is not defined ファイル名:10と書かれています。

末尾に10と表示されていますが、10行目付近のコードの書き方がおかしいですよという内容になっています。

JavaScriptのコードを書こう11 オブジェクト、または配列に新しい値(要素)の追加

var obj = {date: "2014-04-01", title: "誕生日", author: "saito"};

オブジェクト内に新たに値を追加したい場合は、obj.add = "要素";のように、変数名の後に.(ドット)新しく追加するプロパティで値を追加できます。
//追加後のオブジェクト
var obj = {date: "2014-04-01", title: "誕生日", author: "saito", add: "要素"};

一方、配列では、
var array = ["apple", "orange", "melon", "tomato"];

array[4] = "carrot";もしくは、
array.push("carrot");のように、
変数名の後に[次の番号]か、array.push("追加したい値");で値を追加します。

//追加後の配列
var array = ["apple", "orange", "melon", "tomato", "carrot"];

JavaScriptのコードを書こう10 配列、オブジェクトの特殊な形

一つの変数に複数の値を入れることができるものとしてオブジェクトがありますが、オブジェクト以外にも配列というものもあります。オブジェクトは

var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito",
    getTitle: function(){
        return this.title;
    }
};

上記のように{}の中に、プロパティ:値の対を複数持つことでたくさんの値を変数の中に入れることができ、プロパティに関数を指定することができます。一方、配列はプロパティ名を気にせず変数に値をたくさん入れたい場合に使用します。

var array = ["apple", "orange", "melon", "tomato"];

このように[]の中に文字列、または数字を入れていきます。配列では値毎に番号が振られ、一番左の値が0で、次の値には1、その次の値には2が振られ、array[0]のように変数の後に[]と番号を指定すると値が取得できます。

document.write(array[0]);  //appleと表示される
document.write(array[1]);  //orangeと表示される

配列の値の中にオブジェクトが格納されていることもあります。

JavaScriptのコードを書こう9 オブジェクト

アプリを開発する際に一つの変数の中にたくさんの値を入れないといけない時があります。たとえばデータベースですが、この時に値を一つの変数にまとめておくためにオブジェクトを利用します。

var obj = {date:"2014-04-01", title:"誕生日", author:"saito"};

もしくは見やすいように

var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito"
};

オブジェクトは{}で値をまとめて変数に入っているもので、:(コロン)の左側にあるのがプロパティで、オブジェクトの中にどのような値を入れたいのかといった目次のようなもので、:(コロン)の右側に実際の値を入れます。複数個のプロパティと値を入れたい場合は、,(カンマ)区切りでインデックスと値を入れます。

たとえば、obj変数の中から日付(date)の値だけ取り出した場合は、

<script>

var obj = {date: "2014-04-01", title:"誕生日", author:"saito"};
document.write(obj.date);  // 2914-04-01と表示される

</script>

上記のコードのように変数名とオブジェクトのプロパティを.(ドット)でつないで指定します。オブジェクトの中には文字列や数字以外に関数も入れることができます。thisはオブジェクト内のプロパティの値を取得する時に使います。

<script>
var obj = {
    date: "2014-04-01",
    title: "誕生日",
    author: "saito",
    getTitle: function(){
        return this.title;
    }
};

document.write(obj.getTitle()); //誕生日と表示される
</script>

オブジェクトの中に入れた関数を呼び出す場合は、変数名.プロパティに()を付けます。必要に応じて引数を入れることもできます。

2014年9月5日金曜日

JavaScriptのコードを書こう8 変数の有効範囲(スコープ)について

変数はどこで宣言(var 変数名;)したかによって、有効範囲が変わります。たとえば、

<script>

//関数の外で変数を宣言する
var args ;
var args2;

function exec(){
    //関数の外側で宣言した変数に値を入れる
    args = 5;
}

//ここで定義した関数を使用する
exec();
document.write(args);  //5と表示される

//関数を利用せず、変数に直接値を入れてみる
args2 = 6;
document.write(args2);  //6と表示される
</script>

この様に関数の外側で変数を定義すると、関数の外側ではもちろんのこと、関数内でも変数を使うことができます。一方、

<script>
function exec(){
    //関数の中で変数を宣言する
    var args;
    args = 5;
}

exec();
document.write(args);  //エラーとなる
</script>

関数の中で変数を定義して、関数外で定義した変数の値を表示しようとするとエラーになります。このように、どこで変数を定義したかによって、変数の有効範囲が変わります。この範囲のことをスコープと呼び、関数の外側で定義した変数をグローバル変数、関数の内側で定義した変数をローカル変数と呼びます。

2014年9月4日木曜日

JavaScriptのコードを書こう7 関数を使って、同じ処理を何度も行おう

<script>
//計算するための関数
function calculate(x, y){
    //結果を入れる変数
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

//作成した関数の呼び出し
addition = calculate(5, 8);

//13と表示される
document.write(addition);

//改行
document.write("<br>");

var x = 4;
var y = 10;

//作成した関数の呼び出し
addition2 = calculate(x, y);

//14と表示される
document.write(addition2);
</script>

コードのはじめにfunction calculate(x, y){}と書かれていますが、このコード全体を実行しても、functionで囲まれた箇所は読み込まれません。コードの実行はfuncitonで囲まれた箇所を飛ばして処理を開始し、addition = calculate(5, 8);の時にfunctionで囲まれた箇所が読み込まれます。functionで書かれたコードを関数と呼び、同じような処理を何度も行う際に処理をひとまとめにしておいて、functionの後に書かれているcalculate()と書くことで予め準備しておいた関数を呼び出し処理を行います。

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

となっています。最初にこの関数を呼び出しているaddition = calculate(5, 8);を見ると、calculateの後にあるカッコで5と8といった値を二つ渡しており、calculate(5, 8)を入れたadditionを表示してみると13と表示されていることから、calculate関数では、5と8を足して、その結果を返す(変数に結果を入れる)という処理をしていることになります。。改めてcalculate関数を見てみると、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

一行目のfunctionの後に呼び出すための関数名をcalculateとしておいて、その後のカッコ内にxとyといった変数らしきものがあります。これを引数(ひきすう)と呼ぶのですが、呼び出しがcalculate(5, 8)で、x = 5、y = 8のように対応しています。これは「関数calculateは値を二つ入れてください」という意味があります。次の行を見ていくと、var result;は関数内で使う変数を宣言し、result = x + y;で計算を行い、result変数に計算結果を入れます。最後の行にあるreturn result;は関数内で計算した結果を返すという意味で、試しに

function calculate(x, y){
    var result;
    result = x + y;
}

var addition;
addition = calculate(5, 8);
document.write(addition);  //undefinedと表示される

を実行してみると、undefinedと表示されます。undefinedとは未定義値といい、変数に何も入っていないことを意味しています。

サンプルコードに戻って、

function calculate(x, y){
    var result;
    result = x + y;
    return result;
}

//計算結果を入れる
var addition;
var addition2;

addition = calculate(5, 8);
document.write(addition);   //13と表示される

//改行
document.write("<br>");

var x = 4;
var y = 10;

addition2 = calculate(x, y);
document.write(addition2);   //14と表示される

calculate関数の引数に違う数字を入れると表示させる数字が変わってくるので、大体決まっている処理があったら関数にしてまとめておきましょう。