2012年02月14日

JavaScriptで現在のURLのホスト名を取得する

言語:JavaScript

今見ているページ(URL)のホスト名をJavaScriptを使って取得する方法です。

やり方はとても簡単で、locationオブジェクトhostnameプロパティを使うだけです。

つまり、
location.hostname
でホスト名の取得ができます。

hostnameプロパティはホスト名だけを取得する場合に使います。

locationオブジェクトにはhostプロパティというものもあって、こちらはポート番号も取得できます。

※ホスト名を取得できると書きましたが、実際にはブラウザのURLのホスト部と同じ値を取得するようです。なので、IPアドレスでアクセスすると、IPアドレスを取得します。IPアドレス->ホスト名の変換はできないみたいです。

以下、サンプルコード(ファイル名:host.html)を紹介します。
<html>
    <head>
        <title>ホスト名取得</title>
    </head>
    <body>
        <script type="text/javascript">
        <!--
        alert(location.hostname);
        -->
        </script>
    </body>
</html>

http://localhost/host.htmlで叩くと、ダイアログには「localhost」と表示されます。
http://127.0.0.1/host.htmlで叩くと、ダイアログには「127.0.0.1」と表示されます。

2011年09月18日

HTML5のcanvas画像のピクセル操作

言語: HTML5、JavaScript
ブラウザ: Firefox 6.0.2
OS: Mac OS X 10.5.6

HTML5ではcanvas画像のピクセル列を書き換えることができます。

画素のRGBAの値をJavaScriptで読み書きすることで実現します。

1. 基本的な流れ

ピクセル値を書き換える操作の基本的な流れは以下のようになります。
  1. ImageDataオブジェクトの取得
  2. 画素データ列への書き込み
  3. canvasのコンテキストへ反映

2. ImageDataオブジェクト

canvasのピクセル値を操作するにはImageDataオブジェクトを利用します。このオブジェクトのプロパティを書き換えることで、ピクセル列を書き換えます。

ImageDataオブジェクトは以下のプロパティを持ちます。
  • width 画像の幅
  • height 画像の高さ
  • data 画素データの1次元配列。RGBAの順番で値が格納される。
ピクセル列を書き換える場合、dataプロパティを書き換えます。

dataプロパティは、画素値を格納する1次元配列です。画像の左上からR(赤)、G(緑)、B(青)、A(不透明度)の順番に画素の値が並んでいます。

3. getImageData(x, y, width, height)

canvasの(x, y)から幅width、高さheightの領域をImageDataオブジェクトとして取得します。
canvasのコンテキストからImageDataオブジェクトを取得するために、getImageDataメソッドを使います。

4. putImageData(imagedata, x, y)

ImageDataオブジェクトをcanvasのコンテキストに反映させます。反映させるcanvas上の位置を(x, y)で指定します。
※getImageDataで取得したオブジェクトのピクセルを書き換えても、このメソッドで反映させるまでは、canvasには反映されません。

5. サンプル

縦横100pxの画素を全て赤にした例です。
<!DOCTYPE html>
<html>
    <head>
        <title>pixel</title>
        <script type="text/javascript">
        <!--
            window.onload = function() {
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");

                var image = context.getImageData(0, 0, 100, 100);

                for (var i = 0; i < image.height; i++) {
                    for (var j = 0; j < image.width; j++) {
                        image.data[(i * image.width + j) * 4 + 0] = 255;
                        image.data[(i * image.width + j) * 4 + 1] = 0;
                        image.data[(i * image.width + j) * 4 + 2] = 0;
                        image.data[(i * image.width + j) * 4 + 3] = 255;
                    }
                }

                context.putImageData(image, 0, 0);
            }
        -->
        </script>
    </head>
    <body>
        <canvas id="canvas" width="100" height="100"></canvas>
    </body>
</html>

以下は実行結果です。
pixel


2011年09月16日

HTML5のformでinput要素の入力値チェック

言語: HTML5、JavaScript
ブラウザ: Firefox 6.0.1
OS: Mac OS X 10.5.6

HTML5ではフォーム要素の入力値チェックができます。

やり方はinput要素に属性を追加して、JavaScriptでチェック用のメソッドを呼ぶだけです。

1. 指定する属性

  • required 入力必須
  • pattern 入力値を正規表現で指定
  • maxLength 最大入力文字数
  • min 最小値
  • max 最大値
  • step この値の倍数を許容するということかも?
試してみたところ、requiredとpatternとmaxLengthは使えるようです。他の属性は未実装なのかどうか知りませんが、使えませんでした(使い方が間違っていたらごめんなさい)。
あと、stepですが、公式ドキュメントを読みましたが、正直よくわかりませんでした。
maxLengthは入力の際に制限がかかり、指定した文字数より多くの文字は入力できません。

2. checkValidityメソッド

form要素のcheckValidityメソッドを呼ぶと、入力値のチェックを明示的に行えます。入力チェックに合格ならtrue、そうでなければfalseを返します。
入力値のチェック自体は、このメソッドを呼ばなくてもinput要素からフォーカスが失われたタイミングで行われるようです。チェックに引っかかるとinput要素の枠が赤くなります。

3. サンプル

requiredとpatternを指定したinput要素を含むformを作成して、「入力値チェック」ボタンでチェックを行います。
<!DOCTYPE html>
<html>
    <head>
        <title>Validate</title>
        <script type="text/javascript">
        <!--
            function validate() {
                var f = document.getElementById("form");

                if ( f.checkValidity() ) {
                    alert("正しい入力です");
                } else {
                    alert("間違った入力です");
                }
            }
        -->
        </script>
    </head>
    <body>
        <form id="form">
            required:<input type="text" name="value1" required><br>
            pattern:<input type="text" name="value2" pattern="[0-9]">
        </form>

        <button onclick="validate()">入力値チェック</button>
    </body>
</html>


2011年09月15日

HTML5のcanvasに画像を表示

言語:HTML5, JavaScript
ブラウザ:Firefox 6.0.1

HTML5のcanvas要素ですが、画像を表示させることも出来ます。

使用するメソッドはdrawImageです。

drawImageには引数の異なる3種類のメソッドが存在します。

drawImage(image, dx, dy)

元画像をcanvas上の(dx, dy)に描画します。

drawImage(image, dx, dy, dw, dh)

元画像をcanvas上の(dx, dy)に幅dw、高さdhの大きさに拡大縮小して描画します。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

元画像の(sx, xy)から幅sw、高さshを切り取って、canvas上の(dx, dy)に幅dw、高さdhになるよう拡大縮小して描画します。

3つのメソッドの引数imageにはimg要素かvideo要素かcanvas要素が指定できます。

以下サンプルです。
<!DOCTYPE html>
<html>
    <head>
        <title>canvas</title>
        <script type="text/javascript">
        <!--
            window.onload = function() {
                var saboten = document.getElementById("saboten");
                var canvas1 = document.getElementById("canvas1");
                var context1 = canvas1.getContext("2d");

                context1.drawImage(saboten, 0, 0);

                var canvas2 = document.getElementById("canvas2");
                var context2 = canvas2.getContext("2d");

                context2.drawImage(canvas1, 0, 0);

                var canvas3 = document.getElementById("canvas3");
                var context3 = canvas3.getContext("2d");

                context3.drawImage(saboten, 0, 0, 50, 50);

                var canvas4 = document.getElementById("canvas4");
                var context4 = canvas4.getContext("2d");

                context4.drawImage(saboten, 0, 0, 50, 50, 0, 0, 100, 100);
            }
        -->
        </script>
    </head>
    <body>
        <div>この画像はimg要素の画像</div>
        <img id="saboten" src="./saboten.jpg" /><br />
        <div>この画像はimg要素を描画した画像</div>
        <canvas id="canvas1" width="100px" height="100px"></canvas>
        <div>この画像は上のcanvas要素を描画した画像</div>
        <canvas id="canvas2" width="100px" height="100px"></canvas>
        <div>この画像はimg要素を縦横1/2に縮小した画像</div>
        <canvas id="canvas3" width="100px" height="100px"></canvas>
        <div>この画像はimg要素の左上1/4を切り取って縦横2倍にした画像</div>
        <canvas id="canvas4" width="100px" height="100px"></canvas>
    </body>
</html>
canvas1にはimg要素の画像をそのまま描画しています。
canvas2にはcanvas1の画像をそのまま描画しています。
canvas3にはimg要素の画像を縦横1/2にして描画しています。
canvas4にはimg要素の左上から縦横それぞれ50px(半分)切り取ってものを縦横100pxに拡大(2倍)して描画しています。

img要素の./saboten.jpgは以下の画像です。
saboten


canvasはもっといろいろなことができるので、記事も増えそうです。



生活習慣病が気になる方に
お勧めのモニターがあります。




2011年09月06日

HTML5のcanvasで文字列を描画





言語:HTML5, JavaScript
ブラウザ:Firefox 6.0.1

HTML5にはcanvas要素というものがあります。これは、グラフィックスのための領域です。
使い方は簡単で、canvasタグを記述して、JavaScriptでその要素に描画するコードを書くだけです。

具体的な流れとしては
  1. canvasタグの要素を取得
  2. canvasタグの要素からgetContextで描画コンテキストを取得
  3. 描画コンテキストに対してfillTextで文字列を描画
です。

以下はcanvasタグ内に「こんにちは」と描画する場合のサンプルです。
<!DOCTYPE html>
<html>
    <head>
        <title>canvas>/title>
        <script type="text/javascript">
        <!--
            window.onload = function() {
                var canvas = document.getElementById("canvas1");
                var context = canvas.getContext("2d");

                context.fillText("こんにちは", 10, 10);
            }
        -->
        </script>
    </head>
    <body>
        <canvas id="canvas1" width="100" height="100"></canvas>
    </body>
</html>
getElementByIdでcanvasの要素を取得して、getContextで描画対象のコンテキストを取得します。
文字列の描画はこのcanvasオブジェクトに対して行います。
文字列を描画するメソッドはfillTextで、このメソッドに文字列を位置を指定します。
上のサンプルは以下のように表示されます。
canvas1