AjaxZip3 複数町域にまたがる郵便番号

AjaxZip2を使っていましたが郵便番号の更新が面倒でAjaxZip3が自動更新ということで急いで入れ替えました(^_^)v

楽しようと思いましたが結局は旧バージョンと同じで同じ郵便番号で複数町域にまたがる場合には対応しておらず以前のバージョンと同じように少し手を加えて使っています。

やり方は同じで全国の郵便番号をhttps://www.post.japanpost.jp/zipcode/dl/kogaki/zip/ken_all.zipをダウンロードして下記のperlで重複データを分類しやすくjsonで作り直してプログラムも対応するようにしています。

 

#!/usr/bin/perl

use strict;
use warnings;
use Encode;

print "Content-Type: text/html; charset=Shift_JIS", "\n\n";

my $csvfile = "./KEN_ALL.CSV";
my (%zip,%zip2,%sort_file,@add,@duplication,@uniq,$i);

print "<html><body>";
print "ken_all:$csvfile<hr><pre>";

open(IN,"$csvfile") || &error("Open Error: $csvfile");
while (<IN>) {

$_ =~ s/"//g;
my($id,$z,$zip,$kana1,$kana2,$kana3,$pref,$add,$add2,$etc) = split(/,/);
if ( $add2 =~ s/(|)|「|」|地割|、//s) {$add2="";}#重複してるアドレス削除

my $File_id = ( $zip =~ /^([0-9]{3})/ )[0];#ファイル番号
$id = int($id/1000);#都道府県id
$add2 =~ s/以下に掲載がない場合//g;
push (@add,"$File_id,$zip,$id,$add,$add2");
}
close(IN);

@uniq = uniqArray(\@add);
foreach my $value (sort( @uniq) ){

my ($File_id,$zip,$id,$add,$add2) = split(/,/,$value);
my $address = "\"$add\",\"$add2\"";
if($zip{$zip}){$zip2{$zip} = "$File_id:\"W$id\",$zip{$zip}$address";}else{$zip2{$zip} = "$File_id:$id,$address";}#
if($address){$zip{$zip} .= "$address,";}

}

foreach my $value (sort(keys(%zip2))){#郵便番号順
my ($File_id,$add) = split(/:/,$zip2{$value});

#$i++;
#print "\n($i)$value\n$zip2{$value}";#確認用
#print "$File_id:$value:$add";#確認用
$sort_file{$File_id} .= "\"$value\":[$add],";

};

foreach my $value (sort(keys(%sort_file))){#ファイル番号順
my ($zip,$add) = split(/:/,$sort_file{$value});

$i++;
$sort_file{$value} =~ s/,$//g;
my $v = sprintf( "%03d",$i );
my $new_zip ="\{$sort_file{$value}\}";
my $File_name = $value . ".js";
print "\n($v)$File_name$new_zip";# JSONフォーマット確認用

$File_name = "./data/$File_name";#書き込みフォルダー
#サンプルの場合は先にdata名でフォルダー制作

open( JSON, "> $File_name") or die "$! ? $File_name\n";
$new_zip = Encode::decode("sjis", $new_zip);
$new_zip = Encode::encode("UTF-8", $new_zip );
$new_zip = "\$yubin(" . $new_zip. ")";

print JSON $new_zip;
close( JSON );

#push (@duplication,"$File_name?-$new_zip\n");#確認用;

}

print "</body></html>";
#
#open(FH,"> data.txt");#まとめ書き出し用
#print FH @duplication;
#close(FH);

sub uniqArray{
my $array = shift;
my %hash = ();

foreach my $value ( @$array ){
$hash{$value} = 1;
}

return(
keys %hash
);
}

javascriptは下記の感じて少し足してます。

 

/* ================================================================ *
    ajaxzip3.js ---- AjaxZip3 郵便番号→住所変換ライブラリ
    Copyright (c) 2008-2015 Ninkigumi Co.,Ltd.
    http://ajaxzip3.github.io/
    Copyright (c) 2006-2007 Kawasaki Yusuke <u-suke [at] kawa.net>
    http://www.kawa.net/works/ajax/AjaxZip2/AjaxZip2.html
    Permission is hereby granted, free of charge, to any person
    obtaining a copy of this software and associated documentation
    files (the "Software"), to deal in the Software without
    restriction, including without limitation the rights to use,
    copy, modify, merge, publish, distribute, sublicense, and/or sell
    copies of the Software, and to permit persons to whom the
    Software is furnished to do so, subject to the following
    conditions:
    The above copyright notice and this permission notice shall be
    included in all copies or substantial portions of the Software.
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
    EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
    OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
    NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
    HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
    WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
    OTHER DEALINGS IN THE SOFTWARE.
* ================================================================ */

AjaxZip3 = function(){};
AjaxZip3.VERSION = '0.51';
//AjaxZip3.JSONDATA = 'https://yubinbango.github.io/yubinbango-data/data';
AjaxZip3.JSONDATA = '/order/DataFile/data';
AjaxZip3.CACHE = [];
AjaxZip3.prev = '';
AjaxZip3.nzip = '';
AjaxZip3.fzip1 = '';
AjaxZip3.fzip2 = '';
AjaxZip3.fpref = '';
AjaxZip3.addr = '';
AjaxZip3.fstrt = '';
AjaxZip3.farea = '';
AjaxZip3.ffocus = true;
AjaxZip3.onSuccess = null;
AjaxZip3.onFailure = null;

AjaxZip3.PREFMAP = [null,'北海道','青森県','岩手県','宮城県','秋田県','山形県','福島県','茨城県','栃木県','群馬県','埼玉県','千葉県','東京都','神奈川県','新潟県','富山県','石川県','福井県','山梨県','長野県','岐阜県','静岡県','愛知県','三重県','滋賀県','京都府','大阪府','兵庫県','奈良県','和歌山県','鳥取県','島根県','岡山県','広島県','山口県','徳島県','香川県','愛媛県','高知県','福岡県','佐賀県','長崎県','熊本県','大分県','宮崎県','鹿児島県','沖縄県'
];


AjaxZip3.zip2addr = function ( azip1, azip2, apref, aaddr, aarea, astrt, afocus ) {
    AjaxZip3.fzip1 = AjaxZip3.getElementByName(azip1);
    AjaxZip3.fzip2 = AjaxZip3.getElementByName(azip2,AjaxZip3.fzip1);
    AjaxZip3.fpref = AjaxZip3.getElementByName(apref,AjaxZip3.fzip1);
    AjaxZip3.faddr = AjaxZip3.getElementByName(aaddr,AjaxZip3.fzip1);
    AjaxZip3.fstrt = AjaxZip3.getElementByName(astrt,AjaxZip3.fzip1);
    AjaxZip3.farea = AjaxZip3.getElementByName(aarea,AjaxZip3.fzip1);
    AjaxZip3.ffocus = afocus === undefined ? true : afocus;
    if ( ! AjaxZip3.fzip1 ) return;
    if ( ! AjaxZip3.fpref ) return;
    if ( ! AjaxZip3.faddr ) return;

    // 郵便番号を数字のみ7桁取り出す
//    var zipoptimize = function(AjaxZip3.fzip1, AjaxZip3.fzip2){
        var vzip = AjaxZip3.fzip1.value;
        if ( AjaxZip3.fzip2 && AjaxZip3.fzip2.value ) vzip += AjaxZip3.fzip2.value;
        if ( ! vzip ) return;
        AjaxZip3.nzip = '';
        for( var i=0; i<vzip.length; i++ ) {
            var chr = vzip.charCodeAt(i);
            if ( chr < 48 ) continue;
            if ( chr > 57 ) continue;
            AjaxZip3.nzip += vzip.charAt(i);
        }
        if ( AjaxZip3.nzip.length < 7 ) return;
//    };

    // 前回と同じ値&フォームならキャンセル
    var uniqcheck = function(){
        var uniq = AjaxZip3.nzip+AjaxZip3.fzip1.name+AjaxZip3.fpref.name+AjaxZip3.faddr.name;
        if ( AjaxZip3.fzip1.form ) uniq += AjaxZip3.fzip1.form.id+AjaxZip3.fzip1.form.name+AjaxZip3.fzip1.form.action;
        if ( AjaxZip3.fzip2 ) uniq += AjaxZip3.fzip2.name;
        if ( AjaxZip3.fstrt ) uniq += AjaxZip3.fstrt.name;
        if ( uniq == AjaxZip3.prev ) return;
        AjaxZip3.prev = uniq;
    };


    // 郵便番号上位3桁でキャッシュデータを確認
    var zip3 = AjaxZip3.nzip.substr(0,3);
    var data = AjaxZip3.CACHE[zip3];
    if ( data ) return AjaxZip3.callback( data );

    AjaxZip3.zipjsonpquery();

};
	var $W=0;

AjaxZip3.callback = function(data){
	var $WW=0;


        function onFailure( ){
            if( typeof AjaxZip3.onFailure === 'function' ) AjaxZip3.onFailure();
        }
        var array = data[AjaxZip3.nzip];
        // Opera バグ対策:0x00800000 を超える添字は +0xff000000 されてしまう
        var opera = (AjaxZip3.nzip-0+0xff000000)+"";
        if ( ! array && data[opera] ) array = data[opera];
        if ( ! array ) {
            onFailure();
            return;
        }
        var pref_id = array[0];                 // 都道府県ID
		if(/W/i.test(pref_id) && $W===0){pref_id = pref_id.substr(1);$WW++;};
        if ( ! pref_id ) {
            onFailure();
            return;
        }
		
		
        var jpref = AjaxZip3.PREFMAP[pref_id];  // 都道府県名
        if ( ! jpref ) {
            onFailure();
            return;
        }

        var jcity = array[1];
        if ( ! jcity ) jcity = '';              // 市区町村名
        var jarea = array[2];
        if ( ! jarea ) jarea = '';              // 町域名
        var jstrt = array[3];
        if ( ! jstrt ) jstrt = '';              // 番地

        var cursor = AjaxZip3.faddr;
        var jaddr = jcity;                      // 市区町村名
		
		

        if ( AjaxZip3.fpref.type == 'select-one' || AjaxZip3.fpref.type == 'select-multiple' ) {
            // 都道府県プルダウンの場合
            var opts = AjaxZip3.fpref.options;
            for( var i=0; i<opts.length; i++ ) {
                var vpref = opts[i].value;
                var tpref = opts[i].text;
                opts[i].selected = ( vpref == pref_id || vpref == jpref || tpref == jpref );
            }
        } else {
            if ( AjaxZip3.fpref.name == AjaxZip3.faddr.name ) {
                // 都道府県名+市区町村名+町域名合体の場合
                jaddr = jpref + jaddr;
            } else {
                // 都道府県名テキスト入力の場合
                AjaxZip3.fpref.value = jpref;
            }
        }
		
        if ( AjaxZip3.farea ) {
            cursor = AjaxZip3.farea;
            AjaxZip3.farea.value = jarea;
        } else {
            jaddr += jarea;
        }
        if ( AjaxZip3.fstrt ) {
            cursor = AjaxZip3.fstrt;
            if ( AjaxZip3.faddr.name == AjaxZip3.fstrt.name ) {
                // 市区町村名+町域名+番地合体の場合
                jaddr = jaddr + jstrt;
            } else if ( jstrt ) {
                // 番地テキスト入力欄がある場合
                AjaxZip3.fstrt.value = jstrt;
            }
        }
		
		
		///////////////////////////////////////
			if($WW){
				$W= 1; jcity = jarea =vzip='' ;

				$(AjaxZip3.fpref).after("<div id='insertaddr'class='pickup_announce' style='width:380px;display:none'></div>");
				
				var sumaddr = "複数地域が有りますので選択してください。";
				
				for (var keyString in array) {
					if(keyString == 0){continue;}
					else if((keyString % 2)){sumaddr += "<div style='padding:1px 5px;cursor:pointer;border:1px solid #333;background-color:#fff'>" + array[keyString];}// 町域名
					else{sumaddr += " " + array[keyString] +"</div>";} // 市区町村名

				}
				var $insert = $("#insertaddr");
		//		
				$insert.html(sumaddr).fadeTo(500, 1);
				
				var $div = $("#insertaddr div");;

				$div.on('click',function(e){

				        AjaxZip3.faddr.value = $(this).text();
						$insert.fadeTo(500, 0.3,function () {$(this).remove();$("#"+AjaxZip3.faddr.name+"_1").focus();});
						$W=0;
						

				});
				
				$div.hover(
				  function () {
				     $(this).css({ backgroundColor:"#999",color:"yellow"})
				  },
				  function () {
				     $(this).css({ backgroundColor:"#fff",color:"#000"})
				  }
				);		

			}else{$("#insertaddr").remove();AjaxZip3.faddr.value = jaddr;;}
		
		//////////////////////////////////////////

        if( typeof AjaxZip3.onSuccess === 'function' ){AjaxZip3.onSuccess();}

        // patch from http://iwa-ya.sakura.ne.jp/blog/2006/10/20/050037
        // update http://www.kawa.net/works/ajax/AjaxZip2/AjaxZip2.html#com-2006-12-15T04:41:22Z
        if ( !AjaxZip3.ffocus )return;
        if ( ! cursor )return;
        if ( ! cursor.value )  return;
        var len = cursor.value.length;
        cursor.focus(); alert();
        if ( cursor.createTextRange ) {
            var range = cursor.createTextRange();
            range.move('character', len);
            range.select();
        } else if (cursor.setSelectionRange) {
            cursor.setSelectionRange(len,len);
        }

};

// Safari 文字化け対応
// http://kawa.at.webry.info/200511/article_9.html
AjaxZip3.getResponseText = function ( req ) {
    var text = req.responseText;
    if ( navigator.appVersion.indexOf('KHTML') > -1 ) {
        var esc = escape( text );
        if ( esc.indexOf('%u') < 0 && esc.indexOf('%') > -1 ) {
            text = decodeURIComponent( esc );
        }
    }
    return text;
}

// フォームnameから要素を取り出す
AjaxZip3.getElementByName = function ( elem, sibling ) {
    if ( typeof(elem) == 'string' ) {
        var list = document.getElementsByName(elem);
        if ( ! list ) return null;
        if ( list.length > 1 && sibling && sibling.form ) {
            var form = sibling.form.elements;
            for( var i=0; i<form.length; i++ ) {
                if ( form[i].name == elem ) {
                    return form[i];
                }
            }
        } else {
            return list[0];
        }
    }
    return elem;
}

AjaxZip3.zipjsonpquery = function(){
    var url = AjaxZip3.JSONDATA+'/'+AjaxZip3.nzip.substr(0,3)+'.js';
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("charset", "UTF-8");
    scriptTag.setAttribute("src", url);
    document.getElementsByTagName("head").item(0).appendChild(scriptTag);
   };

function $yubin(data){
    AjaxZip3.callback(data);

};

jQueryフォントサイズの変更

フォントサイズを変更するのを作ってみました。

プログの場合、タグリストで分類すると、同じクラス属性がでてくるのでこの場合便利な(idで振分けるのも可能ですが)汎用性考えて、

index(subject)

※ jQueryオブジェクト内で、引数で指定されたエレメントのインデックス番号を返す。インデックスは、ゼロから始まる連番。
もし渡されたエレメントがjQueryオブジェクト内に存在しない場合、戻り値には-1が返る。

を使ってクリックされた項目内だけのプログ内容の文字サイズを変更するようしました。

$("h2.date-header").append("<span>[小]</span><span>[並]</span><span>[大]</span><span class=\"font\" style='_display:none'></span><div>文字サイズ</div>"); //h2タグのクラスdate-header内にhtmlを追加

var fontchange = $("h2.date-header span").not("span.font");
$(fontchange).mouseover(function(){$(this).css("color","red")}).mouseout(function(){$(this).css("color","")}); //必要なspanタグだけaタグのようにリンクぽく振舞わせ・・・

$(fontchange).click(function(){
varFontSize=13; //初期のフォントサイズ
var index = Math.ceil(($(fontchange).index(this)+1)/3)-1; //インデックス番号の取り出し0から始まるので1足して3で割って切捨ててから1戻してます。
if(!index){index = 0;}

var Base = $("div.post-body:eq("+ index + ")");
var BaseFontsize = $(Base).css("font-size").replace("px", "");

if ($(this).is(":contains('小')")){FontSize = BaseFontsize*0.9;} //小がクリックされると・・
else if($(this).is(":contains('大')")){FontSize = BaseFontsize*1.1;}
FontSize = Math.round(FontSize);
$(Base).css('font-size',FontSize+"px");
$("div.textarea",Base).css('font-size',FontSize+"px");
$("span.font:eq("+ index + ")").text(FontSize+"px").show("slow").fadeOut("2000");
});

 

css は

.date-header span{float:right;cursor:pointer;color:#009;font:12px MS UI Gothic;}
.date-header div{float:right;color:#009;font:12px Arial;}

こんな感じです。

先頭の文字を大きくする

先日タグリストを造る時に、先頭の文字を強調するよう
BLOGGERからの移行完了にphpで取り出しを書いたが、

css で

a:first-letter{font-size:125%;}

 

なんて簡単なのもあるが、思うようにできず、サクッとjqueryでやってみた。

$("a[rel='tag']").each(function() {//a タグに rel=tagをつけた場合で、$("a")ならリンクタグ全て、$("a.inpact")ならclass=inpactのあるaタグという意味です。
var first_letter = $(this).text().substr(0,1);
var after_letter = $(this).text().substr(1,$(this).text().length);

// ランダムカラーの場合 右サイドのタグリスト
//var color = Math.round(0xffffff * Math.random());
//$(this).html("<b style='color:rgb(" + (color >> 16) + "," + (color >> 8 & 255) + "," + (color & 255)+");font:bold 120%/1.2em \"HG丸ゴシックM-PRO\"'>"+first_letter+"</b>"+after_letter);

//英数字と日本語を分ける場合。
if(first_letter.search(/\w/i) != -1){
$(this).html("<b style='color:#c09;font:130%/1em \"Comic Sans MS\",\"Times New Roman\"'>"+first_letter+"</b>"+after_letter);
}else{
$(this).html("<b style='color:#60f;font:bold 125%/1em \"HG丸ゴシックM-PRO\"'>"+first_letter+"</b>"+after_letter);
}

 

iphoneのframeブラウズ

先日iphoneに買い換えました(3GS)。
Wi-Fiでつながるからネットの閲覧が早く快適になっています。
そこでうちのHpをみて見ると、Ifreamのコンテンツがスクロールせずに全て表示されレイアウトが崩れてました。
フッターを画面下部に固定するレイアウトのためとりあえずjqueryを使っているのでhide()でフッターを消し去っていますが、

通販のページはoverflowを使った擬似frameでヘッダー、左にメニュー右にコンテンツとフッターの構成にしており、メニューとコンテンツをoverflow:autoではみ出す内容をスクロールするようにしていましたが、

iphoneの小さな画面で二本指でスクロールするのはcontentsはともかくメニューの小さいサイズは面倒でした。

iphoneはjavascriptが使えるsafariなのでuserAgent で振り分けられます。

通販のページもjqueryを使ってるので、idで操作して閲覧しやすくしました。
if(navigator.userAgent.indexOf(‘iPhone’)!=-1){ 
$(‘#content,#menu’).css(‘overflow’,’visible’);
$(‘#footer’).hide();
}

※フッター位置がcontentsのスクロール無しのhightをうまく収得できずに隠してごましていますが(^_^;)

一部文字の描写がくずれていますが、テストするたびにアップロードするのも面倒で、ローカルでテストしたいところだが、 windows用のsafariがappleからてでいますが、何度やっても起動前に落ちて起動できず・・・そのまま放置・・・

BLOGEERクラシックテンプレート 最近のコメント取り出し3

BLOGGERクラシックテンプレート 最新コメントの取り出し
BLOGEERクラシックテンプレート 最新のコメント取り出し2
コメントや最近のエントリーをjavascriptでの取出しを記載していましたが、
いつの間にか、json形式で引っ張ってくるデータの順序が変わっていて、でたらめ なリンク先を取り出していたので修正しました。

(いつからやってんやろ・・・汗ゞ)

function commentcallback(obj) {
var data = obj;
var InsertHTML = '<h2 class="sidebar-title">直近のコメント5件<\/h2>';
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
//var anchor=data.feed.entry[i].link[0].href.replace(/(\?[\w]+\=[0-9]+)/, "");
var anchor=data.feed.entry[i].link[2].href.replace(/(\?[\w]+\=[0-9]+)/, "");
InsertHTML+= ('<li><a href="'+anchor+'">');
//InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,24));if (data.feed.entry[i].summary.$t.length > 24) {InsertHTML+= ('...');}
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= ('...');}
InsertHTML+= ('<\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (' by '+data.feed.entry[i].author[0].name.$t);
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('commentcallback').innerHTML = InsertHTML;
}

function newentry(obj) {
var data = obj;
var InsertHTML = ('<h2 class="sidebar-title">最近のエントリー10件<\/h2>');
InsertHTML += '<ul>';
for (var i=0; i<data.feed.entry.length; i++) {
InsertHTML+= ('<li>');
//InsertHTML+= ('<a href="'+data.feed.entry[i].link[0].href+'"><b>');
InsertHTML+= ('<a href="'+data.feed.entry[i].link[4].href+'"><b>');
InsertHTML+= (data.feed.entry[i].title.$t.substring(0,22));if (data.feed.entry[i].title.$t.length > 22) {InsertHTML+= ('...');}
InsertHTML+= ('<\/b><\/a><br \/>');
InsertHTML+= ('['+data.feed.entry[i].published.$t.substring(2,10)+']');
InsertHTML+= (data.feed.entry[i].summary.$t.substring(0,36));if (data.feed.entry[i].summary.$t.length > 36) {InsertHTML+= ('...');}
InsertHTML+= ('<\/li>');
}
InsertHTML += '<\/ul>';
document.getElementById('newentry').innerHTML = InsertHTML;
}