小中学生向けプログラミング講座　師匠のブログ: 2014

2014年12月21日日曜日

DOM操作でオブジェクトから表を組み立てて表示する2

今回は

var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

このオブジェクトから

表の各オブジェクトの値であるtbodyの方を作成してみます。

function buildTable(){

    //ここまでのコードは省略

    //theadをtableに入れる
    table.appendChild(thead);

    //tbodyをtableに入れる
    table.appendChild(buildTbody());

    return table;
}

//の部分だけ組み立てる
function buildTbody(){

}

buildTable関数のreturn table;の前にbuildTbody関数を用意して、そこでtbodyの箇所を作成します。

//<tbody>の部分だけ組み立てる
function buildTbody(){
    var tbody = document.createElement("tbody");

    //forの中で使用する変数はforの前で定義しておく
    var tr;
    var td;

    //listから各人のオブジェクトを取得する
    for (var i = 0; i < list.length; i++ ) {
        var personObj = list[i];

        tr = document.createElement("tr");

        //オブジェクト内にある各要素をtdで挟んでtrタグに入れる
        for ( key in personObj ) {
            td = document.createElement("td");
            td.innerText = personObj[key];
            tr.appendChild(td);
        }

        tbody.appendChild(tr);
    }

    return tbody;
}

buildTbody関数内で、tbodyを作成した後、最初のforで配列の中にある各人の情報が入ったオブジェクト、次のforでオブジェクトの中に入っている各値を呼び出し、DOM操作でtdで囲って、

<tbody>
    <tr>
        <td>tsuyoshi</td>
        <td>kyoto</td>
        <td>kanagawa</td>
    </tr>
    <tr>
        <td>ryoko</td>
        <td>kyoto</td>
        <td>osaka</td>
    </tr>
</tbody>

このようなHTMLタグのオブジェクトを作成して、buildTable関数内でtableのtheadの後に作成したtbodyのタグを挿入します。ここまでのコードを実行してみると、

最初に用意したlistオブジェクトの値を元に表ができました。試しに

var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"},
    {name: "taro", address: "tokyo", from: "hokkaido"}
];

新しい人のオブジェクトを追加して、コードを実行してみると、

新しく追加した人の情報も表示されます。これで人数がいくら増えても、追加に合わせて行を追加することができる様になりました。

DOM操作でオブジェクトから表を組み立てて表示する1

DOM(Document Object Model)とはJavaScriptでHTMLのタグを取得したり、挿入したりでプログラミングで見た目を変えるために利用する仕組みです。document.querySelector("#〇〇");でタグからオブジェクトを取得するのもDOM操作です。今回は、

var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

用意したオブジェクトをHTMLではなく、JavaScriptで

このような表を作ります。始めにこの表をHTMLで書く場合、

<table border="1px">
    <thead>
        <tr>
            <th>名前</th>
            <th>住所</th>
            <th>出身</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>tsuyoshi</td>
            <td>kyoto</td>
            <td>kanagawa</td>
        </tr>
        <tr>
            <td>ryoko</td>
            <td>kyoto</td>
            <td>osaka</td>
        </tr>
    </tbody>
</table>

このようなコードになります。それでは、このコードをJavaScriptで書いてみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMでtable</title>
<script>
var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

function buildTable(){

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

</body>
</html>

始めに上記のようなコードを用意して、buildTable関数で表のHTMLを作ることにしましょう。

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";
}

始めに、document.createElementで大元のtableタグを作成します。createElementの引数にタグ名を指定すると、指定した名前の開始タグを終了タグのオブジェクトが作成されます。

document.createElement("table");で<table></table>が作成されます。次にtable.border = "1px";で<table border="1px"></table>になります。この仕組みを応用して、中の枠も作成していきます。

最初にtheadで囲まれた箇所を作成していきます。

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    //<thead>を用意する
    var thead = document.createElement("thead");

    //<tr>を用意する
    var tr = document.createElement("tr");
}

document.createElementで<thead>や<tr>といった必要なタグのオブジェクトを作成しておきます。この時点では、<table>、<thead>や<tr>はバラバラに存在しています。一旦この状態で置いといて、<tr>の中身を作成してみます。

function buildTable(){

    //<table>と<thead>の箇所は一旦省略

    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);
}

<tr>タグの中に<th>を入れて、項目を表示する際、

th = document.createElement("th");
th.innerText = "名前";

で、<th>名前</th>を作った後、

tr.appendChild(th);

事前に用意したtrでappendChild(th)をすることで、
<tr></tr>のタグの間に作成した<th>名前</th>を入れるということになり、

<tr>
    <th>名前</th>
</tr>

ということになります。残りの二つの要素も追加して、

<tr>
    <th>名前</th>
    <th>住所</th>
    <th>出身</th>
</tr>

trのオブジェクトがこのような状態になったら、事前に用意した<table>や<thead>に同じような要領で、

<table border="1px">
    <thead>
        <tr>
            <th>名前</th>
            <th>住所</th>
            <th>出身</th>
        </tr>
    </thead>
</table>

このようになります。ここまでの状態をコードにまとめると、

function buildTable(){

    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    var thead = document.createElement("thead");

    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);

    //項目ができたら、theadに入れる
    thead.appendChild(tr);

    //theadをtableに入れる
    table.appendChild(thead);

    //作成した表のオブジェクトを返す
    return table;
}

このように書きます。一度、この状態で表を表示させてみましょう。buildTable関数で作った表は現時点ではどこにも表示されていないことになっていて、これをdocument.querySelectorを利用して表示します。

HTMLで表を表示する箇所は<body>タグの中、すなわち、<body>表</body>と<body>タグの中に表のHTMLを挿入すれば良いわけで、bodyタグのオブジェクトを取得して、appendChildで表のHTMLを挿入すれば良いことになります。まずはbodyタグを取得してみます。

document.querySelector("body");とquerySelectorの中の引数で#無しでタグ名を指定すると、HTML内にあるbodyタグで一番初めに出てくるものを取得することになっており、bodyタグは1回しか使用できないため、この書き方で目的のbodyタグオブジェクトは取得できます。あとは、appendChildで

var body = document.querySelector("body");
body.appendChild(buildTable());

buildTable関数で作成した表のHTMLを挿入すれば良いです。ここまでのコードを書いてみると、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOMでtable</title>
<script>
var list = [
    {name: "tsuyoshi", address: "kyoto", from: "kanagawa"},
    {name: "ryoko", address: "kyoto", from: "osaka"}
];

window.onload = function(){
    var body = document.querySelector("body");
    body.appendChild(buildTable());
};

function buildTable(){
    var table = document.createElement("table");
    //外枠をつける
    table.border = "1px";

    var thead = document.createElement("thead");
    var tr = document.createElement("tr");

    //各項目を作る
    var th = document.createElement("th");
    th.innerText = "名前";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "住所";
    tr.appendChild(th);

    //新たに<th>を作る
    th = document.createElement("th");
    th.innerText = "出身";
    tr.appendChild(th);

    //項目ができたら、theadに入れる
    thead.appendChild(tr);

    //theadをtableに入れる
    table.appendChild(thead);

    return table;
}
</script>
</head>
<body>

</body>
</html>

window.onloadイベントでbodyにtableを挿入する様に処理して、このコードを実行してみます。

HTMLの方でbodyタグ内に何も書いてない状態で、表の一部が表示されていることを確認しましょう。

2014年12月20日土曜日

スタイルシートのルール

スタイルシートで指定する場合、いくつかのパターンがあります。たとえば、

<input  type="text" id="form">

このようなタグがあった場合、id名の前にシャープをつけて、

#form{
    width:40px;
}

このように指定しますが、HTMLファイル内の<input type="text">のすべてに同じ装飾を施したい場合は、

input[type="text"]{
    padding:5px;
}

このようにタグとタイプを指定することでもデザインを当てることができます。pタグやbodyタグの一括の設定の場合も

body{
    font-family:メイリオ;
}
p{
    /** 文字間隔 **/
    letter-spacing: 1em;
}

idですが、たとえば同じHTMLファイル内の他のところでも#formのデザインを当てたくても、idは1つのファイルに1回のみしか使用出来ません。文字の色を赤にしたいといったスタイルを用意する場合は、

<input type="text" class="red">

.red{
    color:red;
}

このようにタグにclassで要素を追加し、スタイルシートでは、.クラス名で要素を追加することで.redは同じファイル内で何度も使用することが出来る様になります。

2014年12月14日日曜日

お絵かきアプリにカラーパレットを追加しよう

HTMLで<input type="color">を書くことで、カラーパレットを追加することができるので、このカラーパレットをJavaScriptでつないで、お絵かきアプリの色変え機能として取り込んでみます。(ブラウザはChromeを推奨)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>draw</title>
<style>
#canvas {
    border: 1px solid #000000;
}
</style>
<script>
//コードは省略
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas><br>
<input id="pallet" type="color" value="#000000;">
</body>
</html>

canvasの下にカラーパレットのinputタグを追加することで、

canvasの下にカラーパレットを呼び出せるボタンが追加されました。あとはこのパレットで選択した色を描写の際に反映させます。

<script>
var canvas;
var ctx;

//パレット用の変数
var pallet;

var drawFlag = false;
window.onload = function(){

    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    
    //ここでパレットのオブジェクトを取得しておく
    pallet = document.querySelector("#pallet");
    
    canvas.addEventListener("mousemove", function(event){
        if (drawFlag === true) {
            var x = event.offsetX;
            var y = event.offsetY;

            //パレットで決めた色を点の描写直前で決めておく
            ctx.fillStyle = pallet.value;
            ctx.fillRect(x, y, 2, 2);
        }
    });

    canvas.addEventListener("mousedown", function(event){
        drawFlag = true;
    });

    canvas.addEventListener("mouseup", function(event){
        drawFlag = false;
    });
};
</script>

パレットの値は他のアプリでフォームの取得の時と同様でdocument.querySelectorでオブジェクト取得、変数.valueで値を取得という手順をとり、点の描写直前でfillStyleプロパティにカラーコードを入れます。

これでいろんな色でお絵かきできる様になりました。

2014年12月13日土曜日

Canvas APIでお絵かきアプリを作ろう

CanvasAPIでマウスでお絵かきできるアプリを作ります。はじめにお絵かきをするパレットを用意します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>お絵かきアプリ</title>
<style>
//canvasで作ったパレットに外枠を追加する
#canvas {
    border: 1px solid #000000;
}
</style>
<script>
//ここにコードを書く
</script>
</head>
<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
</body>
</html>

HTMLの記述でcanvasタグを入れておきます。この時、タグ内で横(width)と縦(heigth)を決めておかないと、お絵かきアプリが思った様に動作しないことがあります。

canvasが表示されたら、コードを書いていきます。

<script>
var canvas;
var ctx;

window.onload = function(){

    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    //マウスが動いた時に実行されるイベント
    canvas.addEventListener("mousemove", function(event){
        //現在のマウスの位置を取得する
        var x = event.offsetX;
        var y = event.offsetY;

        //マウスの位置に合わせて、一辺が2pxの四角を描写する
         ctx.fillRect(x, y, 2, 2);
    });
};
<script>

scriptタグで上記のコードを書いて実行してみると、

マウスが動く度に点が描写されますが、動きに合わせて常に点が描写されてしまいます。次にマウスの左ボタンをクリックした時だけ点が描写される様に修正してみます。

<script>
var canvas;
var ctx;

//マウスの左ボタンをクリックしているかの判定用変数
var drawFlag = false;

window.onload = function(){

    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    canvas.addEventListener("mousemove", function(event){
        //クリックしている時だけ点を描写する様にする
        if (drawFlag === true) {
            var x = event.offsetX;
            var y = event.offsetY;

            ctx.fillRect(x, y, 2, 2);
        }
    });

    //マウスの左ボタンをクリックした時の処理
    canvas.addEventListener("mousedown", function(event){
        drawFlag = true;
    });

    //マウスの左ボタンのクリックを止めた時の処理
    canvas.addEventListener("mouseup", function(event){
        drawFlag = false;
    });
};
</script>

マウスの左ボタンをクリックしているかを判定するフラグの変数を用意して、mousemoveイベントの点の描写の直前にif文で判定を追加した後、マウスの左ボタンをクリックした時のイベントであるmousedownとクリックを止めた時のイベントであるmouseupをaddEventListenerで追加して、mousedownイベントの時はdrawFlagをtrueにして押している状態にし、mousemoveイベントでの点の描写を許可し、mouseupイベントの時にdrawFlagをfalseにして、mousemoveイベントでの点の描写を禁止することによって、マウスでお絵かきできる様にします。この状態で実行してみると、

マウスの左ボタンのクリックとマウスの動きに合わせてお絵かきできる様になっています。

2014年12月8日月曜日

JavaScriptの配列とオブジェクト、HTMLのフォームでクイズを作ろう2

前回はJavaScriptの配列とオブジェクト、HTMLのフォームを使ってクイズを作りました。しかし、前回のコードでは回答した時に記録をとっていないので、何度か回答していると同じ問題が出題されるということがあります。今回は一度回答した問題は出題しないという処理を追加してみます。始めに出題番号を入れる変数と回答を記録する変数を用意します。変数の型は配列にしておきます。

var quizzes = [/** 出題内容は省略 **/];
var quiz;

//出題番号を入れておく
var questionNumber;

//回答を記録しておく変数
var answered = [];

window.onload = function(){
    init();
};

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

function doAnswer(){
    //回答時の処理は省略
}

function right(){
    //正解した時の処理は省略
}

function wrong(){
    //不正解の時の処理は省略
}

出題番号の記録と回答の記録用の配列を用意したら、始めにinit関数を修正します。

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];

    //出題番号を入れておく
    questionNumber = r;
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

次に正解時に回答用の配列に答えた問題番号を入れておきます。

function right(){
    alert("正解です");
    
    //答えた問題の出題番号を記録しておく
    answered.push(questionNumber);
    init();
}

出題番号を回答用の配列に入れる時は、配列の変数.push(値)を利用します。これで回答した問題の番号の記録はできました。後は出題の直前ですでに回答した問題か調べて出題します。init関数を修正します。

function init(){
    //init関数の中だけでr変数を使用する
    var r;
    
    //既に出題しているかを調べる
    //alreadyがfalseの場合は再度出題番号を取得する
    var already = true;
    do{
        r = Math.floor(Math.random() * quizzes.length);
        for ( var i = 0; i < answered.length; i++ ) {
            //取得した出題番号がすでに回答済みの場合はfalseを入れる
            if ( answered[i] == r ) {
                already = false;
            }
        }
    }while(already == false);

    quiz = quizzes[r];    
    questionNumber = r;
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

do-while文とif文を利用して、出題番号を取得した後にすでに回答済みか調べて、回答していない問題の出題番号を取得します。これで同じ問題が出題されるということはなくなります。しかしこの状態では、すべての問題を回答後にinit関数でまだ回答していない問題の出題番号を取得し続けるという処理が残ってしまうため、right関数の方に全問回答の処理を追加しておきます。

function right(){
    alert("正解です");
    
    //答えた問題の出題番号を記録しておく
    answered.push(questionNumber);
    
    //全問回答した場合
    if (answered.length == quizzes.length) {
        //クイズを終了する処理を追加
    
    //問題が残っている場合は出題する
    } else {
        init();
    }
}

right関数内の次の出題を行う処理のところにif文を追加して、全問正解の場合はクイズを終了するという処理を追加しておきます。これで出題番号を取得し続ける不具合は解決します。

JavaScriptの配列とオブジェクト、HTMLのフォームでクイズを作ろう1

JavaScriptでクイズを作るとき、HTMLのフォームとJavaScriptの配列とオブジェクトを利用します。始めにクイズの配列を用意します。

<!DOCTYPE html>
<html>
<head>
<title>クイズ</title>
<script>
//出題と答えをセットで入れる配列
var quizzes = [];
</script>
</head>
</html>

配列を用意したら、この配列に出題と答えのセットのオブジェクトを入れます。

var quizzes = [
    {q : "日本の首都は？", a : "東京"},
    {q : "アメリカの首都は？", a : "ワシントン"},
    {q : "イギリスの首都は？", a : "ロンドン"}
];

これで、quizzes[1]の様に配列内のインデックスの指定でクイズのオブジェクトを取得できる様になりました。ちなみにquizzes[1]でアメリカの首都の問題が取得できます。次に出題表示用と回答用のフォームを用意します。

<!DOCTYPE html>
<html>
<head>
<title>クイズ</title>
<script>
//出題と答えをセットで入れる配列
var quizzes = [
    {q : "日本の首都は？", a : "東京"},
    {q : "アメリカの首都は？", a : "ワシントン"},
    {q : "イギリスの首都は？", a : "ロンドン"}
];
</script>
</head>
<body>
問題:<input type="text" id="question" value=""><br>
<input type="text" id="answer" value="">
<input type="button" value="答える">
</body>
</html>

このコードを実行してみると、

出題用と回答用のフォームが表示されます。それでははじめに問題フォームに用意した出題オブジェクトを表示してみます。

始めに出題用のinit関数を用意します。

//出題と答えをセットで入れる配列
var quizzes = [
    {q : "日本の首都は？", a : "東京"},
    {q : "アメリカの首都は？", a : "ワシントン"},
    {q : "イギリスの首都は？", a : "ロンドン"}
];

//出題前に取得するオブジェクトを入れておく変数
var quiz;

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

init関数で行っていることは、quizzes配列からランダムに出題用のオブジェクトを取得しておいて、その後にHTMLの問題のフォームの方に問題文を表示させています。init関数が用意できたら、ファイルを表示し終わった直後に実行されるwindow.onloadで実行してみましょう。

//出題と答えをセットで入れる配列
var quizzes = [
    {q : "日本の首都は？", a : "東京"},
    {q : "アメリカの首都は？", a : "ワシントン"},
    {q : "イギリスの首都は？", a : "ロンドン"}
];

//出題前に取得するオブジェクトを入れておく変数
var quiz;

window.onload = function(){
    init();
};

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

window.onload内でinit関数を実行することで、

問題文のフォームにクイズが表示されました。次は回答の処理を追加してみます。回答の処理は回答用のフォームに文字を入力した後、答えるボタンを押して入力した内容が正しいか調べるという流れで、はじめに回答するという処理を追加する為に、doAnswerという関数を追加して、処理を書いていくことにします。

var quizzes = [/** 出題用のオブジェクトは省略 **/];
var quiz;

window.onload = function(){
    init();
};

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

function doAnswer(){
    //回答用のフォームに入力した値を取得
    var answerForm = document.querySelector("#answer");
    var answer = answerForm.value;

    //回答用フォームで入力した内容を削除する
    answerForm.value = "";
    
    //入力した内容が正しいか調べる
    if (answer == quiz.a) {
        //入力した内容が正解の時
    } else {
        //入力した内容が不正解の時
    }
}

doAnswer関数では、回答用のフォームに入力した値を取得した後、if文で入力した内容が正解であるかを調べています。正解、不正解の時の処理は一旦置いといて、答えるボタンを押したらdoAnswer関数が実行するようにします。

問題:<input type="text" id="question" value=""><br>
<input type="text" id="answer" value="">
<input type="button" value="答える" onclick="doAnswer();">

ボタンを押したら実行という処理を追加する時は、ボタンのタグにonclick="関数名"を追加すれば良いです。これで回答するという処理を追加することができました。後は正解、不正解の時の処理を追加して、クイズを完成させていきます。正解、不正解共にポップアップで表示して、次の問題を出題するという処理を追加してみます。

var quizzes = [/** 出題用のオブジェクトは省略 **/];
var quiz;

window.onload = function(){
    init();
};

function init(){
    var r = Math.floor(Math.random() * quizzes.length);
    quiz = quizzes[r];
    
    //問題用のフォームに表示する
    var questionForm = document.querySelector("#question");
    questionForm.value = quiz.q;
}

function doAnswer(){
    //回答用のフォームに入力した値を取得
    var answerForm = document.querySelector("#answer");
    var answer = answerForm.value;
    
    //回答用フォームで入力した内容を削除する
    answerForm.value = "";

    //入力した内容が正しいか調べる
    if (answer == quiz.a) {
        //入力した内容が正解の時
        right();
    } else {
        //入力した内容が不正解の時
        wrong();
    }
}

//正解の時に実行する関数
function right(){
    alert("正解です");
    init();
}

//不正解の時に実行する関数
function wrong(){
    alert("不正解です");
}

正解用と不正解用の関数を追加して、正解用では、正解の表示と次の問題の出題(init)、不正解用では、不正解の表示のみを行うようにし、doAnswer関数の回答判定に追加しています。ここまでできたら、このファイルを実行してみましょう。

出題と回答が実装され、クイズアプリができました。

2014年12月1日月曜日

JavaScriptで表示したテキストとファイルの出力で表示したテキストのどちらにも改行を入れる

ブラウザに表示されている文章をファイルに保存するの内容でファイルに出力した文字列に改行を入れたいという要望があったため、対応方法を紹介します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>local file save</title>
<script>
window.onload = function(){
    //<div id="content">内にテキストを表示する
    var text = "";
    for ( var i = 0; i < 5; i++ ) {
        text = text + "テキストテキストテキスト" + "<br>\n";
    }
    var contentArea = document.querySelector("#content");
    contentArea.innerHTML = text;
}
</script>
</head>
<body>
<div id="content"></div>
<input type="button" value="保存" onclick="save();">
</body>
</html>

テキストを変数に入れて、指定の箇所に表示する時、改行を入れる必要があるならば、 + "
\n"を入れておくと、

このように改行有りで表示されます。この状態でファイルに出力すると、

テキストテキストテキスト<br>
テキストテキストテキスト<br>
テキストテキストテキスト<br>
テキストテキストテキスト<br>
テキストテキストテキスト<br>

このように
が入った状態で出力されます。この<br>を削除してファイル出力を行いたい場合は、ファイル出力の関数で

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

    //文中にある<br>をすべて消す
    var content = content.replace(/<br>/g, "");
    
    //取得した文章を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);
}

ファイルを出力する際に、var content = content.replace(/<br>/g, "");の処理を挟んでおくと、文中にある
はすべて消えます。

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

<br>と\nですが、<br>はHTMLタグの一種で、ブラウザがHTMLを読み込んで表示する際、<br>を含む文字列で<br>の箇所で改行されるものです。\nは改行コードで、ソースコードを表示すると、\nの箇所で改行されています。

var content = content.replace(/<br>/g, "");ですが、変数(ここではcontent)の中に入っている文字列で、第一引数が置換(文字を指定の文字で置き換える)したい文字で/<br>/gの様に//gで挟んで中に置換したい文字(<br>)を入れることで、文中にあるすべての<br>を第二引数(ここでは空文字)に変えるという処理を行います。第一引数で//gではさまなかった場合は、変数内で最初に出現した<br>を置換するという処理になります。

2014年11月1日土曜日

テトリス用のブロック(テトリミノ)を複数用意する

前回作成したOBJECT変数を一つのパターンではなく、複数のパターンを持たせる様に変更します。

var block;
var OBJECTS = [
    [
        [1, 1, 1, 1],
        [0, 0, 0, 0]
    ],
    [
        [1, 1, 1, 0],
        [0, 0, 1, 0]
    ],
    [
        [1, 1, 0, 0],
        [0, 1, 1, 0]
    ],
    [
        [0, 1, 1, 0],
        [0, 1, 1, 0]
    ],
    [
        [1, 1, 1, 0],
        [0, 1, 0, 0]
    ]
];

大きな配列を用意して、OBJECTの構成の配列を複数作成して入れておきます。(OBJECTの変数名をOBJECTSに変更しています)
テトリミノを表示するためにはOBJECTSからランダムに一つ取得する必要があり、取得したものを扱える様にblock変数を用意して、下記の関数を追加します。

function getBlock(){
    r = Math.floor(Math.random() * OBJECTS.length);
    return OBJECTS[r];
}

getBlock関数は、OBJECTSの配列に入れたテトリミノのオブジェクト群からランダムでテトリミノを一つ取得するというもので、Math.floor()は引数に入れた数字の小数点を切捨て。Math.random()は0～1までの間でランダムな値を出力する(0.34256とか)。OBJECTS.lengthはテトリミノ群のオブジェクト数を返すもので、

r = Math.floor(Math.random() * OBJECTS.length);

この様に書くと、0からテトリミノ群の数の間のどれかの値を返し、OBJECTS[r]でランダムでテトリミノを取得できるというわけです。この関数を追加したら、

//四角を描く
function draw(){
    //OBJECTにある図形の配列からランダムで取得する
    block = getBlock();
    ctx.strokeStyle = "blue";
    for ( var y = 0; y < 2; y++) {
        for ( var x = 0; x < 4; x++) {
            if ( block[y][x] ) {
                ctx.strokeRect(x * SIDE, y * SIDE, SIDE, SIDE);
            }
        }
    }
}

getBlock()でテトリミノオブジェクトを取得し、事前に用意したblock変数に入れる。前のコードで if ( OBJECT[y][x] )としていたところをif ( block[y][x] )と変更することで、

読み込む度に上のテトリミノのどれかが表示されます。(グレーのグリットは実際には表示されません)

2014年10月31日金曜日

テトリスで使用するようなブロックを描写する

このようなブロックをCanvas内で描写します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;

//四角の一辺の長さ
var SIDE = 20;

//ブロックの描写用に配列を用意する
var OBJECT = [
        [1, 1, 0, 0],
        [0, 1, 1, 0]
    ];

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");

    draw();
};

//四角を描く
function draw(){
    ctx.strokeStyle = "blue";
    for ( var y = 0; y < 2; y++) {
        for ( var x = 0; x < 4; x++) {
             if ( OBJECT[y][x] ) {
                ctx.strokeRect(x * SIDE, y * SIDE, SIDE, SIDE);
             }
        }
    }
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

二回のfor文で、

事前に用意した配列の画像の順にアクセスし、if ( OBJECT[y][x] )でアクセスした数字が1の場合はxとyの値を使って任意の箇所に四角を描写するという処理を行います。開始場所をx * SIDEとy * SIDEで指定することで、

配列の数字に対応して図形を描写することが出来ます。

var OBJECT = [
        [1, 1, 1, 0],
        [0, 0, 1, 0]
    ];

このような配列にすると

1の並び方に従って、上の画像のような描写になります。
(灰色のグリッドは表示されません)

2014年10月30日木曜日

同じ形を並べてたくさん描写する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>square</title>
<script>
var canvas;
var ctx;

//四角の一辺の長さを変数に入れておく
var SIDE = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    draw();
};

//四角を描く
function draw(){
    ctx.strokeStyle = "blue";
    ctx.strokeRect(0, 0, SIDE, SIDE);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

strokeRectで四角を描写できます。strokeRectの引数には左から(X軸の開始点, Y軸の開始点, 幅, 高さ)を指定して四角を描写します。実行すると

この様に四角が表示されます。この四角を右にたくさん並べて表示してみます。

function draw(){
    ctx.strokeStyle = "blue";
    for ( var i = 0; i < 5; i++) {
        ctx.strokeRect(i * SIDE, 0, SIDE, SIDE);
    }
}

draw関数のstrokeRect関数の前にfor分で繰り返し実行をします。for ( var i = 0; i < 5; i++ )を書くと、0から1ずつ足して、内部のコードをiが5未満の数字になるまで実行するという意味になり、iの値は0, 1, 2, 3, 4でstrokeRectを行う。第一引数の開始点を20ずつずらすということで、i * SIDEで四角を並べるように描写することができます。このコードを実行すると

このようにforで指定した分だけ四角が表示されました。for ( var i = 0; i < 10; i++ )にすると、

四角が10個表示されました。

イベントリスナでタグにイベントハンドラを登録する

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event handler</title>
<script>
function exe(){
    window.alert("ボタンを押しました！");
}
</script>
</head>
<body>
    <input type="button" value="押す" onclick="exe();">
</body>
</html>

上記のコードのようなボタンのタグを追加して、タグ内にonclick="exe();"といったJavaScriptの関数とつなぎこむonclickのようなものをイベントハンドラと呼びます。
(他にはonkeyupやonkeydownとか)

今回のサンプルコードでは、ボタンのタグに直接記述していますが、JavaScriptのコードでボタンタグにイベントハンドラを追加することが出来ます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event handler</title>
<script>
window.onload = function(){
    var button = document.querySelector("#button");
    button.addEventListener("click", exe);
};

function exe(){
    window.alert("ボタンを押しました！");
}
</script>
</head>
<body>
    <input type="button" value="押す" id="button">
</body>
</html>

ボタンのタグをdocument.querySelectorで取得できるようにidを付与して、window.onload内でボタンのオブジェクトを取得して、イベントリスナ(addEventListener)でイベントハンドラを登録します。addEventListenerの第一引数には、登録したいイベントハンドラ(今回はclick)を入れ、第二引数には登録したイベントハンドラを実行した時に実行したい関数を指定します。これで、<input type="button" onclick="exe();">と同等の実装になりました。

特定のタグではなく、表示しているブラウザ全体にイベントハンドラを追加したい時、

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sample</title>
<script>
window.onload = function(){
    document.addEventListener("click", exe);
};

function exe(){
    alert("クリックしました！");
}
</script>
</head>
<body>
</body>
</html>

documentオブジェクトでaddEventListenerを実行して、イベントハンドラを登録すれば実行できるようになります。

2014年10月28日火曜日

キーを押して、箱を任意の方向に動かす

今まで作成してきた動く箱を、好きな方向に動かせる様にキーボードの矢印キーに対応して、矢印キーを押した方向に箱が動くように修正します。箱の動作をキーに連動させるためには、documentオブジェクトにあるaddEventListenerでキーを押した時と、キーを離した時の処理を追加します。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

//どのキーを押しているかを記録しておくための変数
var keyCode;

var dx;
var dy;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //キーを離した(keyup)時の処理。キーの記録の変数の値を消す(nullにする)
    document.addEventListener("keyup", function(event){
        keyCode = null;
    });
  
    //キーを押した(keydown)時の処理。キーの番号を記録しておく
    document.addEventListener("keydown", function(event){
        keyCode = event.keyCode;
    });
  
    setInterval(draw, 40);
};

function draw(){
 //処理は省略
}
</script>

document.addEventListenerはイベントというユーザがブラウザ上で何か操作した時に処理を開始する(ハンドラ－)ために用意しておくもので、addEventListenerの第一引数にkeyup、keydownやclick等の操作を入れて、第二引数には実行したい処理を関数の形式で用意しておきます。document.addEventListener(“keydown”, 実行したい関数名);で何のキーを押した時に実行される処理を追加します。今回はキーを押すか、離すかで用意したkeyCode変数に現在の状況を入れてます。キーボードにある各キーには番号が振り分けられており、下矢印のキーには38が当てられています。event.keyCodeで各キーの番号を取得できます。次にsetIntervalでセットされているdraw関数を見ていきます。

function draw(){

    //今押しているキーから、どの向きに箱を移動するかを設定する関数を実行する
    changeDirection();

    //処理の順番を方向を決めた直後に変更する
    mx = mx + dx;
    my = my + dy;
  
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);
  
    ctx.beginPath();
    ctx.moveTo(mx, my);
    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);
    ctx.strokeStyle = "blue";
    ctx.stroke();
}

function changeDirection(){
  
    //ボタンを押してない時の挙動、keyCodeにはundefinedかnullが入っている
    if(keyCode == undefined || keyCode == null){
        dx = 0;
        dy = 0;
    }
  
    //左のカーソル(37のキー)を押したとき
    if(keyCode == 37){
        dx = -1;
    }
  
    //上のカーソル(38のキー)を押したとき
    if(keyCode == 38){
        dy = -1;
    }
  
    //右のカーソル(39のキー)を押したとき
    if(keyCode == 39){
        dx = 1;
    }
  
    //下のカーソルを押したとき
    if(keyCode == 40){
        dy = 1;
    }
}

draw関数の最初にchangeDirectionという関数を追加して、addEventListener内でkeyCodeに入れたキーの番号を元にdxとdyの数字を決定させ、その後に四角い箱用のmxとmyを変更して四角を描きます。

このコードを追加したことにより、キーに対応して箱が動くアニメーションになります。

2014年10月27日月曜日

Canvas上で動かしている箱が端に到達した時に移動の向きを逆にする

前回のコードだと、箱がCanvasの右端に到達後、フェードアウトで消えていきます。せっかくなので、端に到達したら逆向きに移動するようにコードを変更してみます。前回のコードでは、draw関数の最後の行でmx変数に1足して、次の描写で1px右で箱を描写しています。逆向きに移動するにはmx変数に1引くことで実現でいます。向きの数字が変更ということで、新たに向きに関するdxという変数を追加して、右端に到達したら、向きについてを変更してみます。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

//移動の向きに関する値を入れる変数
var dx = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    //右端は400pxになるので、mxが400よりも大きければ右端にいると見なす
    if(mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}
</script>

mxの中の値を見て、箱が右端にいることが分かれば、向きdxの値の符号を逆にする。この処理により、

箱が右端に到達したら、向きを逆にして、移動を開始します。次に左端に到達したら先ほどと同様にフェードアウトしてしまうので、左端でも折り返す処理を追加します。

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxにdxを加える
    mx = mx + dx;

    if(mx < 0 || mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }
}

mxが左端に到達、つまりは0以下になった時も逆向きにするという処理を追加して

箱が往復し続けるアニメーションができました。Y軸でも同様の処理を追加すると箱が縦横無尽に移動するアニメーションになります。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

var dx = 1;
var dy = 1;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    ctx.beginPath();
    ctx.moveTo(mx, 20);
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    mx = mx + dx;
    my = my + dy;

    if(mx < 0 ||mx > 400){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dx = -1 * dx;
    }

    //Y軸の下の端は300なので、0と300を判断する
    if(my < 0 ||my > 300){
        //向きの値に-1をかけて、逆向きの指示にする。次のdrawの実行から有効
        dy = -1 * dy;
    }
}
</script>

Canvasで箱が横に移動するアニメーションを作る

Canvasに今まで使ってきたコードを組み合わせるとアニメーションを作成することができます。今回はCanvas内で描写した青い箱を横に移動したいと思います。はじめにアニメーションの仕組みですが、Canvas上で箱を描いて、すぐにその箱を消す。消した直後に少しずらした位置にサイズの同じ箱を描写すれば動いている様に見えます。setIntervalで指定した時間毎に作成したdraw関数を実行する様にしましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();

    ctx.moveTo(20, 20);

    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();  
}
</script>

前回のdraw関数をsetInterval関数で0.02秒(指定は20)毎に実行する様にします。この状態では、同じ箇所に重ねる様に何度もdraw関数を実行するという指示しかありません。次に箱の位置を少しずらすコードを追加します。

<script>
var canvas;
var ctx;

//X軸の位置が変更できるようにXの値を入れる変数を用意する
var mx = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    setInterval(draw, 20);
};

function draw(){
    ctx.beginPath();
  
    ctx.moveTo(mx, 20);
  
    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);
  
    ctx.strokeStyle = "blue";
    ctx.stroke();
  
    //mxに1加える
    mx = mx + 1;
}
</script>

X軸の値用にmxという変数を用意して、drawを実行する度にmxに1を足す様にして、mxの値を利用して四角を描写します。(mx + 20にすることで右辺の位置を指定できる様になる)

しかし、現時点でのコードだと、描写した四角を消さずに少しずらした点で再度四角を書くという処理が続くため、この画像の様にバー状の描写になります。次に四角を描写する度に四角を削除するという処理を追加します。

function draw(){

    //塗りつぶしの指示(パスを使っていないので、beginPathはいらない)
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, 20);

    ctx.lineTo(mx, 40);
    ctx.lineTo(mx + 20, 40);
    ctx.lineTo(mx + 20, 20);
    ctx.lineTo(mx, 20);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
   mx = mx + 1;
}

draw関数の最初にfillStyleで白にしていて、fillRect関数でcanvasを塗りつぶしています。fillRect関数の引数は左から(Xの開始点, Yの開始点, 幅, 高さ)の指定なので、左端の0, 0からcanvasタグの属性に入れたwidthの400pxとheightの300pxを指定してcanvasタグを元のまっさらな状態に戻して、その後に青い四角を描写します。

これで四角が右側に移動するアニメーションができました。

<script>
var canvas;
var ctx;

var mx = 20;
var my = 20;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
  
    //0.02秒毎にdraw関数を実行する
    setInterval(draw, 20);
};

function draw(){
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, 400, 300);

    //ここから四角の描写
    ctx.beginPath();

    ctx.moveTo(mx, my);

    ctx.lineTo(mx, my + 20);
    ctx.lineTo(mx + 20, my + 20);
    ctx.lineTo(mx + 20, my);
    ctx.lineTo(mx, my);

    ctx.strokeStyle = "blue";
    ctx.stroke();

    //mxに1加える
    mx = mx + 1;

    //myに1加える
    my = my + 1;
}
</script>

こうすることで、箱が右下に移動するアニメーションが作成できます。

2014年10月26日日曜日

Canvasで絵を書こう

HTMLのCanvasという機能とJavaScriptで絵を描くことができます。HTMLで描くためのcanvasタグでキャンバスのエリアを指定し、JavaScriptでcanvasタグのオブジェクトを取得して、コードを使って書くという手順です。今回は赤い四角を描いてみます。

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

<canvas id="canvas" width="400px" height="300px"></canvas>

</body>
</html>

はじめにHTMLのbodyタグの中にcanvasタグを追加します。この時、キャンバスの大きさをwidthとheightもしくはスタイルシートで指定しておきます。さらにJavaScriptでcanvasオブジェクトを取得できるようにidを付与しておきます。

それでは早速キャンパスに絵を描いてみます。

<script>
//キャンバスタグのオブジェクトを入れる変数
var canvas;
//お絵かきするためのオブジェクトを入れる変数
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    //描写を2D(平面)にして、お絵かき用のオブジェクトを取得
    ctx = canvas.getContext("2d");
};

</script>

HTML内にscriptタグを追加し、お絵かきするためのオブジェクトを取得して、ctx変数に入れます。この時、キャンバスオブジェクトにあるgeteContext関数で描写用のオブジェクトを取得しますが、getContext()の引数に平面の描写なら2d、立体の描写なら3dと入れてオブジェクトを取得します。描写用のオブジェクトが取得出来たら、早速、ctx内のオブジェクトで四角を書いてみましょう。

<script>
var canvas;
var ctx;

window.onload = function(){
    canvas = document.querySelector("#canvas");
    ctx = canvas.getContext("2d");
    
    //四角を描く
    draw();
};

//描写用の関数
function draw(){
    
    //今から描写用のコードを書きます宣言
    ctx.beginPath();
    
    //描写開始点の指定、左の数字がx軸で、右の数字がy軸
    ctx.moveTo(20, 20);
    
    //描写の点の指定
    ctx.lineTo(20, 40);
    ctx.lineTo(40, 40);
    ctx.lineTo(40, 20);
    ctx.lineTo(20, 20);
    
    //線の色を青にする
    ctx.strokeStyle = "blue";
    
    //ここではじめて指定したパスで描く
    ctx.stroke();
}
</script>

ctxに入っている描写用のオブジェクトで描く手順として、最初にbeginPath関数で今から描写するというコードを書き、moveTo関数で描写するポイントを指定します。引数の中にある数字は(x軸, y軸)を意味していて、

左上を0, 0として20, 20に開始点を定めます。lineTo関数はどのような軌道になるかを指定して、引数にはmoveTo関数と同様にx軸とy軸の指定をします。今回のlineToの動きは

赤い線で描いたような指示になっています。注意する点はこの時点ではあくまで軌道を維持しただけで、四角はまだ描写されていません。この後にstrokeStyleプロパティで線の色を指定し、stroke関数ではじめて、今まで書いた指示に従って四角を描きます。このコードの実行結果は

青い正方形が描写されました。

Canvasの詳しい説明
Canvas – HTML Mozilla Developer Network

2014年10月22日水曜日

書いたスタイルシートのコードを外部のファイルに外出しする(外部CSSファイル)

<style>
#click_button{
    border-radius:10px;
    font-size:20px;
}
#result_area{
    //ここに要素を追加する
}
>/style>

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

今回はstyle.cssというファイルを生成して、コードを移行します。

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

#click_button{
    border-radius:10px;
    font-size:20px;
}
#result_area{
    //ここに要素を追加する
}

切り出し元のindex.htmlに記述されていたスタイルシートのコードから、を抜いたものを記載し、

index.htmlの方は、

<link rel="stylesheet" href="./css/style.css" type="text/css">

中身を抜いた<style>タグに上記の様にhref=”./css/style.css”と追加すると、切り出したスタイルシートのコードを読み込み実行することができます。

他ページでも同じスタイルシートを使いたい場合に外部ファイルに切り出してまとめておくと便利です。

例:コードを切り出した後のindex.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>button</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<input type="button" id="click_button" value="押す">
</body>
</html>

2014年10月19日日曜日

スタイルシートの記述を一か所にまとめる

<input type="button" value="押す" style="border-radius:10px;font-size:20px;">

ボタンの装飾をするためにボタンタグの中にstyle属性を追加して、スタイルシート言語で装飾に関するコードを追加しました。この書き方ではコード数の少ない小さなアプリやWebサイトの場合は良いのですが、コード数が多くなると可読性が落ちることがあります。そんな時にタグに名前を付けて、別の箇所でスタイルシートを紐づけて、各装飾を一ヶ所にまとめる方法を紹介します。

タグに名前を付ける方法は、JavaScriptでHTMLと紐づける際に利用した

<input type="button" id="click_button" value="押す" style="border-radius:10px;font-size:20px;">

id="click_button"の様にタグにIDを付けます。ID付与後、ボタンタグに記載されているstyleの値を<style>タグで囲った箇所に移します。(<style>の位置は自由です)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hoge</title>
<style>
#click_button{
    border-radius:10px;
    font-size:20px;
}
</style>
</head>
<body>
<div id="result_area">
  何かを表示する
</div>
<input type="button" id="click_button" value="押す">
</body>
</html>

この様に書き換えてコードを実行しても、

書き換える前同様、ボタンにスタイルシートが反映されいてます。他のHTMLのタグにも反映させたい場合、

<style>
#click_button{
 border-radius:10px;
 font-size:20px;
}
#result_area{
 //ここに要素を追加する
}
</style>

各ID毎に対応したスタイルシートを上から順に書いていくだけで良いです。順は関係ありません。

2014年10月18日土曜日

HTMLで作成したボタンを装飾する(スタイルシートをタグに直書き)

HTMLで<input type="button">とすると、表示されるデザインは一パターンです。開発しているアプリによっては綺麗なボタンを設置したいということがあると思います。そんな時にはHTMLを装飾するスタイルシート（CSS）という言語です。今回はスタイルシートを利用して綺麗なボタンを設置してみます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ボタン</title>
</head>
<body>
<input type="button" value="押す">
</body>
</html>

上記のようなボタンが表示されます。たとえば、このボタンに表示されている文字を大きくして、ボタン全体を大きく表示したい場合、

<input type="button" value="押す" style="font-size:20px;">

ボタンのタグの中にstyle=""を追加して、その中に装飾したい内容を記載します。記述方法は、font-size:20px;の様に左側に装飾したい内容、今回はfont-sizeということで、フォント（文字）のサイズ、:（コロン）で区切って、右側に20pxという文字のサイズを指定して、最後に;（セミコロン）で終了します。ボタンのスタイルシートを変更した後でコードを実行してみると、

ボタンが大きくなりました。次にボタンの文字の色を赤に変えたい場合はstyle=""の中に書いた要素の;(セミコロン)の後に新たな要素を追加します。

<input type="button" value="押す" style="font-size:20px;color:red;">

サイズの指定の後にcolor:red;と追加することで、ボタン内のボタンが赤色になります。このコードを実行してみると、

ボタンの中の文字が大きいサイズのまま、文字色も変更されました。このようにボタンタグの中にstyle属性を追加して、属性の中にデザインに関する指示を書くことでタグの装飾を行うことが可能です。style属性の中に記述している要素:値;といった書き方をスタイルシート（CSS）と呼びます。

スタイルシートの他の例
・ボタンの色を変える場合 background-color:

<input type="button" value="押す" style="background-color:blue;">

・ボタンの角を丸くする border-radius:

<input type="button" value="押す" style="border-radius:10px;font-size:20px;">

スタイルシートでできること
CSS | Mozilla Developer Network

mov形式の動画ファイルを使い勝手の良いmp4形式の動画ファイルに変換する

デジタルビデオカメラで撮影した動画はファイルサイズが大きいです。これをHTMLのvideoタグで表示するには動画を圧縮しておいた方が良いことが多々あります。さらにアプリによってはmov形式の動画ファイルではなく、mp4の方が良い場合があるので、VLCメディアプレーヤーというオープンソースソフトウェアを使って、ファイルサイズの変更と動画のファイル形式の変更を行ってみます。