三項演算子の利用例01

投稿日: 2016年10月26日 作成者: 関口郁夫

三項演算子は各種言語で利用できますが、言語解説書では演算子の末席で紹介されるか、されないか、その扱い僅かです。
しかし、特にJavascriptでは表示する文字列を構造化して作成したりするのに有効です。ここでは条件によって文字を切り替える場合の活用例を紹介します。

三項演算子の利用例０１

配列で与えられた関東6都県に、配列であら得られたon/off値に合わせてチェックマークを頭に付けて表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>二項演算子の利用01</title>
    <style>
        #wrapper{width: 500px; font-size: 26px;}
        dt{background: lightblue; padding:4px; margin-top:8px;}
        dd{margin:2px;}
    </style>
</head>
<body>
    <div id="wrapper">
        <h1>二項演算子の利用01</h1>
        <script type="text/javascript">
            let pref = ['東京', '神奈川', '千葉', '埼玉', '茨城', '栃木', '群馬' ];
            let check = [ 0, 1, 0, 0, 1, 1, 0 ];
            let str = '';
            let checkMark;
             
            for ( i=0; i<pref.length; i++ ) {
                checkMark = check[i] >= 1 ? '<img draggable="false" class="emoji" alt="☑" src="https://s.w.org/images/core/emoji/2.2.1/svg/2611.svg">' : '☐';
                str += checkMark + ' ' + pref[i]+'<br />';
            }
            document.write("<p>" + str + "</p>");
        </script>
    </div>
</body>
</html>
カテゴリー: Javascript | コメントする

インプットボタンを複数作成する

投稿日: 2016年9月11日 作成者: 関口郁夫

インプットボックスとインプットボタンを対で作成し、作成した複数のインプットボタンをどれも選択可能にする。
但し、作成できるインプットボックスとインプットボタンの対は仕様上３セットまでにしている。(拡張は容易）

インプットボタンを複数作成する

インプットボタンの追加は一度しかできないよう、二度目に指定された場合はプログラムの再ロードを指示する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>input要素を複数追加</title>
    <style>
        #wrapper{width: 380px;}
        dt{background: lightblue; padding:4px; margin-top:8px;}
        dd{margin:2px;}
    </style>
    <script type="text/javascript">
    function onbtnClickAll( vlu ) {
        target = document.getElementById("dispInput");
        target.innerHTML = vlu;
    }
    function onbtnClick1() {
        val = document.getElementById("txt_val1").value;
        onbtnClickAll(val);
    }
    function onbtnClick2() {
        val = document.getElementById("txt_val2").value;
        onbtnClickAll(val);
    }
    function onbtnClick3() {
        val = document.getElementById("txt_val3").value;
        onbtnClickAll(val);
    }
 
    var doOnce = 0;
    function addElement() {
        if (doOnce > 0) {
            alert("プログラムをロードしなおして実行してください。");
        } else {
        doOnce++;
        var elemNum = document.getElementById("txt_elemNum").value;
//      alert("elemNum=" + elemNum);
        if (elemNum<=3) {
            var achEle = document.getElementById("anchor");
            for(var i=1; i<=elemNum; i++) {
                var divEle = document.createElement('div');
                divEle.id = "div" + i;
                divEle.style.margin = "5px";
                achEle.appendChild(divEle);
 
                var subAchEle = document.getElementById(divEle.id);        
                var element_input = document.createElement('input');
                element_input.id = "txt_val"+i;
                element_input.type = "text";
                element_input.style = "width:10px;";
                element_input.maxLength = "3";
                subAchEle.appendChild(element_input);
                // div要素にinput textエレメントを追加
 
                var element_btn = document.createElement('input');
                element_btn.id = "btn_disp"+i;
                element_btn.type = "button";
                element_btn.value = "表示 "+i;
                element_btn.setAttribute("onclick", "onbtnClick"+i+"();");
                subAchEle.appendChild(element_btn);
                // div要素にinput buttonエレメントを追加
            }
        } else {
            alert("作成する要素の個数は3個以下です。");
        }
        }
    }
    </script>
</head>
<body>
    <div id="wrapper">
        <h1>input要素を複数追加</h1>
        <input type="text" id="txt_elemNum" size="1" maxLength="1">個
        <button onclick="addElement()">要素を追加</button>
        <dl>
            <dt>input情報の入力は<span id="dispInput"></span></dt>
        </dl>
        <div id="anchor"></div>
    </div>
</body>
</html>
カテゴリー: Javascript | コメントする

要素を指定個数作成する

投稿日: 2016年9月11日 作成者: 関口郁夫

同じ種類の要素を指定個数作成する。
要素を作成

親要素.appendChild(element);で作成。appendChildは子要素の最後に追加する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>要素の作成</title>
    <style>
        #wrapper{width: 380px;}
        dt{background: lightblue; padding:4px; margin-top:8px;}
        dd{margin:2px;}
    </style>
    <script type="text/javascript">
    var count = 0;
    function addElement() {
    alert("count=" + count);
        var element = document.createElement('div');
        element.id = "btn_"+count;
        element.innerHTML = "要素"+count;
        element.style.backgroundColor = 'blue';
        element.style.padding = "5px";
        element.style.margin = "5px";
      
        var achEle = document.getElementById("anchor");
        achEle.appendChild(element);
        // body要素にdivエレメントを追加
        count++;
    }
    </script>
</head>
<body>
    <div id="wrapper">
        <h1>elementの作成</h1>
        <input type="button" style="margin:5px;" onclick="addElement()" value="要素を追加">
        <div id="anchor">以下に要素を作成</div>
    </div>
</body>
</html>
カテゴリー: Javascript | コメントする

希望通りの横幅を持ったインプットボックスを作る

投稿日: 2016年9月11日 作成者: 関口郁夫

インプットボックスの横幅はsizeで指定することになっているが、ブラウザによって指定によって取られる横幅異なっており、それ以前に指定の単位が文字数なのか何なのか分からない。例えばsize=”1″と指定しても横幅は5文字程度が下限になっているようで思い通りにならない。
横幅を思い通りに指定するためにはstyle指定のwidthで、それもpx指定するしかない。
インプットボックスの横幅指定

従って、使う文字フォントの横幅サイズから合計ピクセル数を計算して指定すれば、希望の文字数文のインプットボックスを作ることが出来る。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>input情報の取得</title>
    <style>
        #wrapper{width: 380px;}
        dt{background: lightblue; padding:4px; margin-top:8px;}
        dd{margin:2px;}
    </style>
    <script type="text/javascript">
    function onbtnClick() {
          target = document.getElementById("anchor");
          val1 = document.getElementById("txt_val1").value;
          val2 = document.getElementById("txt_val2").value;
          target.innerHTML = "value1:" + val1 + " value2:" + val2;
        }
  
    </script>
</head>
<body>
    <div id="wrapper">
        <h1>elementの作成</h1>
        <dl>
            <dt>入力欄の横幅指定はpxのみ確実</dt>
            <dd><input type="text" id="txt_val1" size="4" style="width:10px;" maxLength="3">
            <input type="text" id="txt_val2" size="1" value="AB" maxLength="10">
            <input type="button" id="btn_disp" value="表示" onclick="onbtnClick();">
            </dd>
        </dl>
        <div id="anchor"></div>
    </div>
</body>
</html>
カテゴリー: Javascript | コメントする

文章内の非漢字をチェックして、赤字表示

投稿日: 2016年9月1日 作成者: 関口郁夫

文字列の中の漢字以外を赤字で表示するチェックプログラムを作った。
check Non Kanji char

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE HTML>
<html lang="UTF-8">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<meta name="format-detection" content="telephone=no" />
<title>文字列の中の漢字チェック</title>
<script type="text/javascript">
 
// 漢字（UnicodeのCJK統合漢字の範囲）
var kanji = new RegExp(/[\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff]/);
 
// サロゲートペア
var hs = new RegExp(/[\ud800-\udbff]/);
var ls = new RegExp(/[\udc00-\udfff]/);
 
// 漢字以外をチェック
function checkNonKanji(){
 
    var text  = document.getElementById("checktext").value;
    text = text.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;');
    var result = "";
    // 入力されたテキストを1文字ずつチェック
    chars = text.split('');
    for (i=0; i<chars.length; i++) {
        c = chars[i];
        // 漢字だったら
        if (c.match(kanji)) {
            result += c;
        } else {
            result += '<strong>' + c +'</strong>';              // 漢字ではないとする
        }
        // 拡張領域文字は漢字ではないとする。
        if (c.match(hs)) {
            c += chars[i+1];                                    // 直後の相方
            result += '<strong>' + c +'</strong>';
        }
        else if (c.match(ls)) {                                 // 上位と一緒に処理しているはずなので、無視。
            continue;
        }
    }
    result = result.replace(/\n/g, '<br />');
    document.getElementById("result").innerHTML = result;
}
</script>
<style>
strong {
    color:#f00;
    font-size:1.1em;
}
.small {
    font-size: 80%;
    color: #666;
}
#result {
    border:solid 1px #999;
    padding:0.5em 1em;
    background: #f0f0f0;
}
</style>
</head>
<body id="tool">
<div id="article">
    <h1>文字列の中の漢字 チェック</h1>
    <p>文字入力欄に文字を入力し、下の[チェック]ボタンをクリックしてください。<br />
        結果欄に漢字以外を赤くした文字列が表示されます。</p>
    <form id="checkform">
        <label for="checktext">確認する文章を貼り付けてください。</label>
        <br />
        <textarea rows="10" cols="60" name="checktext" id="checktext"></textarea>
        <br />
        文字列の中に漢字以外が入っているか
        <input type="button" value="チェック" onclick="checkNonKanji();" />
    </form>
    <h2>結果</h2>
    <p>このように「<strong>非漢字</strong>」赤字で表示されるのが、漢字ではありません。</p>
    <p id="result"> </p>
</div>
</body>
</html>
カテゴリー: Javascript | コメントする

inputCharCheck

投稿日: 2016年8月31日 作成者: 関口郁夫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<TABLE>
    <TR>
        <TD>ID<span style="color: #FF0000;">*</span></TD>
        <TD><INPUT type=text name=Id maxlength=4 value="" style="width: 50px;"> (0000)</TD>
    </TR>
    <TR>
        <TD>氏名<span style="color: #FF0000;">*</span></TD>
        <TD><INPUT type=text name=Name value="" style="width: 130px;"></TD>
    </TR>
    <TR>
        <TD>郵便番号<span style="color: #FF0000;">*</span></TD>
        <TD><INPUT type=text name=PostNo maxlength=8 width=70px value="" style="width: 70px;"> (000-0000)</TD>
    </TR>
    <TR>
        <TD>住所<span style="color: #FF0000;">*</span></TD>
        <TD><INPUT type=text name=Address width=200px value="" style="width: 450px;"></TD>
    </TR>
    <TR>
        <TD>電話番号</TD>
        <TD><INPUT type=text name=TelNo width=100px value=""></TD>
    </TR>
    <TR>
    <TD>メールアドレス</TD>
    <TD><INPUT type=text name=Mail width=100px value="" style="width: 200px;"></TD>
    </TR>
    <TR>
        <TD colspan=2>
        <INPUT type=button name=btn value="チェック" onClick="FormCheck();">
    </TD>
    </TR>
</TABLE>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<script type="text/javascript">
// フォームチェック
    function FormCheck() {
 
    // 未入力チェック
    var val = document.getElementsByName("Id")[0];
    if ( jsTrim( val.value ).length == 0 ) {
        alert( "IDは必須入力です" );
        val.focus();
        return;
    }
 
    // 入力値チェック
    if ( !val.value.match( /[0-9]{4}/ ) ) {
        alert( "入力値が間違っています" );
        val.focus();
        return;
    }
 
    // 未入力チェック
    var val = document.getElementsByName("Name")[0];
    if ( jsTrim( val.value ).length == 0 ) {
        alert( "氏名は必須入力です" );
        val.focus();
        return;
    }
 
    // 未入力チェック
    var val = document.getElementsByName("PostNo")[0];
    if ( jsTrim( val.value ).length == 0 ) {
        alert( "郵便番号は必須入力です" );
        val.focus();
        return;
    }
 
    // 入力値チェック
    if ( !val.value.match( /[0-9]{3}-[0-9]{4}/ ) ) {
        alert( "入力値が間違っています" );
        val.focus();
        return;
    }
 
    // 未入力チェック
    var val = document.getElementsByName("Address")[0];
    if ( jsTrim( val.value ).length == 0 ) {
        alert( "住所は必須入力です" );
        val.focus();
        return;
    }
 
    // 入力値チェック
    var val = document.getElementsByName("TelNo")[0];
    if ( !val.value.match( /^0[0-9]{1,2}-[0-9]{4,5}-[0-9]{4}$/ ) ) {
        alert( "入力値が間違っています" );
        val.focus();
        return;
    }
 
    // 入力値チェック
    var val = document.getElementsByName("Mail")[0];
    if ( !val.value.match( /^([a-z0-9_\.\-])+@([a-z0-9_\.\-])+/ ) ) {
        alert( "入力値が間違っています" );
        val.focus();
        return;
    }
 
}
 
// 前後スペース削除(全角半角対応)
function jsTrim( val ) {
 
    var ret = val;
 
    ret = ret.replace( /^[\s]*/, "" );
    ret = ret.replace( /[\s]*$/, "" );
 
    return ret;
}
 
// 前スペース削除(全角半角対応)
function jsLTrim( val ) {
    var ret = val;
 
    ret = ret.replace( /^[\s]*/, "" );
 
    return ret;
}
 
// 後スペース削除(全角半角対応)
function jsRTrim( val ) {
    var ret = val;
 
    ret = ret.replace( /^[\s]*/, "" );
 
    return ret;
}
</script>
カテゴリー: Javascript | コメントする

Javaとの違い　変数

投稿日: 2016年8月28日 作成者: 関口郁夫

JavascriptはJavaと名前が類似しているためか、言語仕様も違いを取り違えてしまう事があります。通常は二つの言語を同時に使うことはないので実際の不都合は起こりませんが、JSPやサーブレットを使ってサーバーサイドアップリケ―ションを作る場合には、ブラウザ側でJavascriptを使うことになるので、二つの言語仕様の違いを注意する必要があります。
大きな違いの一つが、Javascriptでは変数定義時に型の区別がなく万能型のvar(variable)で文字列も、数値も、論理型も定義出来てしまう事です。（勿論内部では処理上の型の区別はしています。）

順に整理すると、変数には基本型とオブジェクト型があり、
基本型には前述のように

−   数値
−   文字列
−   論理型

ここで、さらに数値は整数も実数も区別がなく、初期化時に小数点が付けるか付けないかの違い。内部的には常に実数で扱われている。文字列は1文字は1字の文字列として扱い、文字列の定義時にはシングルコートもダブルコートも使える。論理型はtrueとfalseのみ、内部的にはtrueが１でfalseが０．

オブジェクト型とは基本型以外の型を総称していて、プロパティーの集合と考えられます。プロパティには基本型やオブジェクトを格納できます。オブジェクトとは配列や関数も含まれます。具体例を示せば

var person = new object;        //オブジェクト型の生成
person.name = “佐藤”;     //オブジェクトプロパティへの値の代入
person.age = 20;
person.alive = true;
console.log(person);        //出力

また、関数もオブジェクト型でありプロパティとして扱えます

person.age = function() {
    return person.age;
}

無名関数を使えば

var people = function(name, age, alive) {
    this.name = name;
    this.age = age;
    this.alive = alive;
}

と記述でき、

var he = new people(“秋草”, 77, false);

people関数を使ってオブジェクト型変数heを定義することが出来ます。
ここで、people関数をコンストラクタと呼び、オブジェクトの原型であるクラスを形作ります。
つまり、Javascript はあまりクラスを意識しませんが、コンストラクタによって初期化されるのがオブジェクトであり、オブジェクトの原型がクラスとなりますから、Javaなどオブジェクト指向言語との類似性が成り立ってます。

カテゴリー: Javascript | コメントする

JSONを使ったオブジェクト(情報)の受け渡し

投稿日: 2016年8月28日 作成者: 関口郁夫

何かのアプリケーションを複数のプログラムで実現しようとすると、何かしら情報の受け渡しが必要になります。一番単純なのはテキスト形式のファイルですし、何かの構造を持たせようとするとカンマ区切りのテキストファイルが使われます。
カンマ区切りのテキストファイルはExcel同士であればお互いに情報をファイルに書いたり、ファイルから情報を読み込んだりすることが出来ます。しかし、一方がExcel以外のソフトウェアであればカンマ区切りの情報を読み書きする機能を新規に作らなければなりません。
これと同じようなことがサーバーサイドアプリケーションを開発する場合には多発します。サーバーサイドアプリケーションの大筋はクライアント(Webブラウザ側のJavascript）からのリクエストを元に、サーバー(PHPやJava)側でデータベースに接続し、その結果をクライアントに返す、という処理だからです。こうなると各言語がサポートしているJSON(Java Script Object Notation)書式の利用が効果的です。実際にはJSON形式で記述したテキスト形式のオブジェクト情報をevalという各言語がサポートしている関数で評価し、オブジェクト変数に代入すれば、オブジェクトが相手のソフトウェア上に生成できるわけです。
var オブジェクト変数名=eval(“(“+JSON情報+”)”);
※JSON書式の情報文字列をeval関数に渡す場合には文字括弧で囲みます。

JSON書式
オブジェクト指向的な言語では、さまざまなオブジェクトを生成し、そのプロパティに値を代入していきます。そのような時にJSONを使用することで、いろいろなプロパティを持ったオブジェクトを非常に簡単なコードで生成することができます。

【JSONの書式】
var 変数名 = {プロパティ名：プロパティの値，プロパティ名：プロパティの値，…｝
var employee = {name:"山田",age:30};の表記は
var employee = new Object();
employee.name = “山田”;
employee.age = “30”;

と同じであり、オブジェクト配列などになると、JSONを使用した方が、すっきりとした
記述になります。

var employees = [{name:"山田",age:30},{name:"鈴木",age:28}];

eval関数
eval関数とは、文字列をコードとして解釈して実行する関数です。eval関数に文字列を渡すと、その文字列がソースコードとしてそのまま実行されます。プログラムの中でeval関数を利用することで、実行するコードを動的に切り替えることができるようになります。

【eval関数】
eval( 文字列 )

つまり先ほどの例は、

var json1 = '{name:"山田",age:30}';
var employee = eval("("+json1+")");

と等価です。

JSON書式の文字列を使って各種オブジェクトを作成するサンプルプログラム

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
<head><title>JSON書式の利用</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function simpleJson(){
    var employee = {name:"山田",age:30};
    alert(employee.name + " : " + employee.age);
}
function varByJson(){
    debugWriteClear();
    debug("JSONで単体オブジェクトを作成");
 
    var employee = {name:"山田",age:30};
    debug(employee.name + " : " + employee.age);
}
 
function ArrayByJson(){
    debugWriteClear();
    debug("オブジェクト配列を作成");
    var employees = [{name:"山田",age:30},{name:"鈴木",age:28}];
    debug(employees[0].name + " : " + employees[0].age
    + "<br>" + employees[1].name + " : " + employees[1].age);
}
 
function objectCreateByEval(){
    debugWriteClear();
    debug("eval関数でJSON文字列を評価");
 
    debug("単体オブジェクトを作成");
    var json1 = '{name:"山田",age:30}';
    var employee = eval("("+json1+")");
    debug(employee.name + " : " + employee.age);
     
    debug("オブジェクト配列を作成");
    var json2 = '[{name:"山田",age:30},{name:"鈴木",age:28}]';
    var employees = eval("("+json2+")");
    debug(employees[0].name + " : " + employees[0].age
    + "<br>" + employees[1].name + " : " + employees[1].age);
}
 
function debug(str){
    document.getElementById("debug").innerHTML += "<br/>" + str;
}
 
function debugWriteClear(){
    document.getElementById("debug").innerHTML = "";
}
 
</script>
</head>
<body>
<input type="button" value="JSON書式" onclick="simpleJson()"/><br/>
<input type="button" value="単体オブジェクトを作成" onclick="varByJson()"/><br/>
<input type="button" value="オブジェクト配列を作成" onclick="ArrayByJson()"/><br/>
<input type="button" value="eval関数でJSON文字列を評価" onclick="objectCreateByEval()"/><br/>
<div id="debug"></div>
</body>
</html>
カテゴリー: Javascript | コメントする

アプリケーションまで情報を伝えるポート番号

投稿日: 2016年8月11日 作成者: 関口郁夫

宛先IPアドレスとMACアドレスによってインターネットの大海原を航海した情報パケットがついに目的のコンピュータに到着したからといって終わりではありません。情報パケットは最終的に情報を依頼したアプリケーションまで到着する必要があり、そのために利用されるのが港の桟橋という意味の「ポート(Port)」です。プロトコルごとに65,536個のポート番号から特定の番号を「待ち受けポート」として決めて情報届けられます。このポートの指定は「ホスト名（またはIPアドレス）：ポート番号」で指定されます。
しかし、通常ポート番号の指定を省略してもHTTPリクエストが正しく目的のWebサーパに届き、アプリケーションに引き渡しされます。これはよく使われるプロトコルについては標準で使用するポートが決められているからです。例えばHTTPプロトコルは80番です。このほか、FTPやSMTP、HTTPSなど代表的なプロトコルで使用されるポートはウェル・ノウン・ポート(well-knownports)」と呼ばれています。

カテゴリー: JSP_Servlet | コメントする

HTTP通信の実際を視る

投稿日: 2016年8月10日 作成者: 関口郁夫

WWWの世界でHTMLをやりとりするために定められた通信プロトコルが「HTTP(Hyper Text Transfer Protocol)」です。
この通信プロトコルとは情報をやりとりするための取り決めのことで， 主に「情報の伝達方法」と「情報の意味づけ」を規定する。
といったことは知識として知っていても、それを具体的に視てWebサーバとWebブラウザが実際にどのような通信をしているのか理解する人は少ないでしょう。
そこで、実際の通信がどの様に行われているか確認するためのツール、横取り丸とlnetSpyを紹介します。
横取り丸は，プロキシサーバ(ProxyServer)の仕組みを使ってWebブラウザのHTTP通信を途中で横取りし，横取り丸に組み込まれたInetSpyがそれを記録します。
どちらも有限会社サイトー企画殿が公開しているフリーソフトウェアなので、ダウンロードリンクを検索して、ydm198_signed.exeとinetspyll signed.exeというファイルをダウンロードします。

1)ydml98_signed.exe をダブルクリックして横取り丸をインストールします。
2)横取り丸のインストールが終わったら，続けてinetspyll_signed.exeをダブルクリックしてInetSpyをインストールします。
3)横取り丸を起動し、隠れたインジケータの中の横取り丸アイコン右クリックして、InetSpyをクリックしてInetSpy画面を表示します。
4)InetSpyの画面からから[ファイル]-[ログ取り開始]を選択し、画面のタイトルが「InetSpyーログ取り中」に変われば準備完了です。

カテゴリー: IT基礎知識 | コメントする