月別アーカイブ: 2014年2月

JSON 形式情報の取得

今回は JSON形式での情報取得をやった見ます。
前回の「(番外編)郵便番号から住所を取得する。」で云っていたJSON情報の取得方法です。
使用するのは getJSON になります。
指定した URL に記載されている JSON 形式の情報を取得する事が出来ます。

ちなみに「(番外編)郵便番号から住所を取得する。」のときも JSON 形式で取得する前提のため、
getJSON を使っても問題なかったんですけどね。
何にせよ getJSON は JSON情報を取得することに特化した AJAX という認識で良いかと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            var select_data;
            function funcGetData() {

                // Select Get Data
                select_data = $('#select_area input:checked').val();

                // JSON Get
                $.getJSON('sample_628.txt', function(json){
                    $('#disp_title p').replaceWith('<p>' + json[select_data].title + '</p>');
                    $('#disp_author p').replaceWith('<p>' + json[select_data].author + '</p>');
                    $('#disp_date p').replaceWith('<p>' + json[select_data].date + '</p>');
                });

            }

        --></script>

    </head>
    <body>
        <div id="select_area">
            <h1>Data ID</h1>
            <input type="radio" name="data_id" value="0" checked="checked"> 0<br />
            <input type="radio" name="data_id" value="1"> 1<br />
            <input type="radio" name="data_id" value="2"> 2<br />
            <input type="radio" name="data_id" value="3"> 3<br />
            <input type="radio" name="data_id" value="4"> 4<br />
            <input type="button" onclick="funcGetData();" value="Data Get">
        </div>
        <div id="Disp_area">
            <h1>Disp Data </h1>
            <dl>
                <dl>Title</dl>
                <dt id="disp_title"><p></p></dt>
                <dl>Author</dl>
                <dt id="disp_author"><p></p></dt>
                <dl>Date</dl>
                <dt id="disp_date"><p></p></dt>
            </dl>
        </div>

    </body>
</html>

sample
なお、json[] の 引数部分が 選択した radio button の選択した数字と一致するようにしています。

取得する JSON データは以下の内容になります。
[
{“title”:”Title_0″,”author”:”author_0″,”date”:”2011/01/01″},
{“title”:”Title_1″,”author”:”author_1″,”date”:”2012/01/01″},
{“title”:”Title_2″,”author”:”author_2″,”date”:”2013/01/01″},
{“title”:”Title_3″,”author”:”author_3″,”date”:”2014/01/01″},
{“title”:”Title_4″,”author”:”author_4″,”date”:”2015/01/01″}
]
[/html]

each を使用することで選択項目を複数に変更することもできます。
JSON データさえ作っておけば簡単な Datebase 代わりにも使えるため便利ですね。

まぁ、実際にはある程度毎にファイルを分割しておかないと、検索対象が多くなれば辛いものになります。
結局はPHPなどと組み合わせたほうが便利になるんだと思います。
前回の題材の様に郵便番号を使用するのであれば、細かく分割しておけば使用には耐えられるものかとは思いますが、
でも、JSON 形式の情報を管理するのが面倒ですよねぇ・・・

jQuery はここからダウンロードしてください。JSON

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

(番外編)郵便番号から住所を取得する。

今回は jQuery だけでは完結していないので番外編となっています。
近いうちに仕事で使いそうな処理の予習です。

まぁ、内容は非常に簡単です。
■郵便番号を入力してからボタンを押すと、県(Select)と県名を除く住所(Input)の中身を取得する。

こんな場合の強い味方は ajax となります。
なお、jQuery だけで行う方法もありますが、今回は仕事の予習のため PHP を使用します。
といっても、このブログは jQuery の備忘録なので PHP の処理は省いて記事を記載しています。
というか PHP 部分はまだ作って無いので書けません(笑)
※ jQuery だけで行う方法(getJSON)に関しては、掲載要望があるか、私の気が向いたら書くかもしれません。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            function funcSetAddress() {
                $.ajax({
                    type     : 'POST',
                    dataType : 'json',
                    url      : 'sample_608.txt',
                    data     : {
                                 zip1 : $('#zip1').val,
                                 zip2 : $('#zip2').val
                               }
                }).done(function(data) {
                    // ajax ok
                    $('#pref').val(data[0].prefcode);
                    $('#addr').val(data[0].citydata);
                }).fail(function(data) {
                    // ajax error
                    alert('Error');
                }).always(function(data) {
                    // ajax complete
                });

            }

        --></script>

    </head>
    <body>
        <div id="zip_area">
            <h1>zip code</h1>
            <input id="zip1" name="zip1" value="522" readonly="readonly"> - <input id="zip2" name="zip2" value="0052" readonly="readonly">
            <input type="button" onclick="funcSetAddress();" value="zip -> addr">
        </div>
        <div id="addr_area">
            <h1>addr code</h1>
            <select id="pref" name="pref">
                <option value="">none select</option>
                <option value="1">pref1</option>
                <option value="2">pref2</option>
                <option value="3">pref3</option>
                <option value="4">pref4</option>
                <option value="5">pref5</option>
            </select>
            <input id="addr" name="addr">
        </div>

    </body>
</html>

sample

まず、郵便番号を入力して変更用のボタン「zip -> addr」をクリックします。
※今回の sample では郵便番号の値は変更できませんが、本番ではもちろん変更可能にします。

クリックすると、ajax にて特定のページに 郵便情報を送信します。
まぁ、郵便番号をもとに PHP で住所情報を取得するわけですが、今回の注目する個所は dataType の設定です。
以前に「ajaxで画面遷移なしに表示切替」でも、さらっと書きましたが、ajax で情報を取得する場合には
dataType の値を変更することで 取得できる形式が変わります。

今回は dataType として JSON を指定しています。
jQuery を使用して、複数の情報を取得する場合はやっぱり JSON データが便利ですね。
今回は情報取得に PHP を使用する予定なので1件分の情報しか取得しませんが、getJSON を使用する場合は必須ですね。

ちなみに今回の sample では以下の JSON データを受け取ることを想定しています。(sample_608.txt の中身です。)

[{"prefcode":"3","citydata":"city_address"}]

ajax で正常に情報が受け取れた場合には、json の内容を分割して対象の内容を変更しています。
なお、data[0].prefcode の 0 はデータの件数になるため忘れ内容にしましょう。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

色情報の表記変更

前回「簡易カラーピッカー」を作成しました。
後から確認したところ $(this).css(‘background-color’); で背景色を取得した場合、
ブラウザによって取得する文字列が異なるようです。

取得内容をそのまま背景色に設定する分には問題ないのだと思います。
しかし、文字列を表示する場合はクロスブラウザ対策をしないといけないようです。

ということで今回は色情報取得時のクロスブラウザ対策をしてみます。

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                var colorData;
                var colorChangeData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);

                        // New
                        colorChangeData = '';
                        if (colorData.substr(0,1) == '#') {
                            // Opera (#ffffff)
                        } else {
                            // Etc (rgb(255, 255, 255))
                            // 
                            colorData = colorData.replace('rgb(', '');
                            colorData = colorData.replace(')', '');
                            //
                            arrColor  = colorData.split(',');
                            for (var cnt=0; cnt<=2; cnt++) {
                                arrColor[cnt] = parseInt(arrColor[cnt]).toString(16);
                                if (arrColor[cnt].length < 2) {
                                    arrColor[cnt] = '' + '0' + arrColor[cnt];
                                }
                            }
                            colorChangeData = '#' + arrColor[0] + arrColor[1] + arrColor[2];
                        }
                        $('#color_text span').replaceWith('<span><p>' + colorData + '</p><p> ↓ Change</p><p>' + colorChangeData + '</p></span>');

                    });

                }

                // init
                SetColorList();

            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #disp_area p {
                padding          : 10px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="select_area">
        </div>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
           <div id="color_text">
               <span></span>
           </div>
        </div>
    </body>
</html>

sample

sanple 内容は基本的に 「簡易カラーピッカー」 のままです。
但し、色を選択したときの取得文字列を #ffffff での表示に変更しました。

今回のクロスブラウザ対策は以下の状況を共通の形式にするための処理です。
例)
■取得時
 Opera #ffffff
 その他 rgb(255,255,255)
 ↓
■返還後
 全ブラウザ #ffffff

正直 Opera 利用者の割合とか考えると必要かなぁとは思います。
ですが Opera 対策というよりも #ffffff の形式のほうが好みなので対応したほうがいいですね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

簡易カラーピッカー

今回は簡易的なカラーピッカーを作ってみました。
・・・あくまでも簡易版です。
まぁ「こんな事できますよ」の確認ですね

<html>
    <head>
        <script src="./jquery-1.9.1.min_.js"></script>   
         
        <script type="text/javascript"><!--
            $(function() {

                var colorData;
                // Color List Display
                function SetColorList(type) {
                    // Color List Clear
                    $('#select_area').empty;

                    // rData
                    for (var r=0; r<16; r = r + 2) {
                        // gData
                        for (var g=0; g<16; g = g + 2) {
                            // bData
                            for (var b=0; b<16; b = b + 2) {
                                // Color Set
                                colorData = parseInt(r).toString(16) + parseInt(g).toString(16) + parseInt(b).toString(16);
                                $('#select_area').append('<div class="color_box" style="background-color:#' + colorData + ';"></div>');
                            }
                        }
                        $('#select_area').append('<div class="float_both"></div>');
                    }

                    // Color Click
                    $('.color_box').click(function (e) {
                        // Get Color Data
                        colorData = $(this).css('backgroundColor');
                        // Date Set
                        $('#color_disp span').replaceWith('<span>' + colorData + '</span>');
                        $('#color_disp').css('backgroundColor', colorData);
                    });

                }

                // init
                SetColorList();

            });
        --></script>
         
        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!-- 

            #disp_area {
                margin           : 10px auto;
                padding          : 20px;
            }

            #select_area {
                margin           : 10px;
                padding          : 20px;
            }

            .color_box {
                float            : left;
                height           : 15px;
                width            : 15px;
                margin           : 0;
                padding          : 0;
            }

            .float_both {
                clear            : both;
            }

        --></style>
         
    </head>
    <body>
        <div id="disp_area">
           <div id="color_disp">
               <span></span>
           </div>
        </div>
        <div id="select_area">
        </div>
    </body>
</html>

sample

表示された色を選択すると、指定した色の取得をします。

まぁ、簡単に色指定をすることはできるようなので、画面の中の文字色や背景色を変更できるようになります。
本当は RGB に各255,255,255 での色を表示しようかと思いましたが色数がすさまじくなります・・・
そのため、今回は色数を制限しています。

まぁ、色数もそう問題かと思うんですが、色の表示順はどうするのが理想なんでしょうか。
自動で並べる場合は考える必要がありますね。
色の表示順に関しては配列情報を事前登録しておくことが理想なんでしょうか。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。