仕事備忘録

＿＿＿以下引用、省略あり＿＿

jqueryのajaxメソッド

jQueryはwebページの操作に
よく利用されるjavascriptのライブラリだ。
jQueryには手軽にバックグラウンドの
通信を行える便利なajaxメソッドが用意されている。

ajaxメソッドの使い方

ajaxメソッドは「$.ajax（引数）」と書いて利用する
・・・（略）もっともシンプルな設定は以下のようになる。


$.ajax({url:パス,success:function(res){成功時の処理}})



＿＿文章引用終了＿＿


*ajaxメソッドによるファイルの読み込み
*ボタンをクリックすると、ページ遷移なしにデータが表示される

■HTML
＜html＞
＜head＞
＜script type="text/javascript" src="http://ajax.googkeapis.com/ajax/libs/jquery/1.4/jquery.min.js"＞＜/script＞
＜script type="text/javascript"＞

＜!--
function getDat(){
$.ajax({url:"dat/ajax.txt",success:function(res){
$("#dat").html(res); //idがdat要素のHTML文字列に設定
｝
});
}
//--＞
＜/script＞
＜/head＞
＜body＞
＜input type= "button" onclick="getDat();" value="データ取得"＞
＜div id="dat"＞＜/div＞
＜/body＞
＜/html＞

■ajax.txt
＜table border="1"＞
＜tbody＞
＜tr＞
＜td＞名前＜/td＞
＜td＞国語＜/td＞
＜td＞算数＜/td＞
＜td＞理科＜/td＞
＜td＞社会＜/td＞
＜/tr＞
＜tr＞
＜td＞太郎＜/td＞
＜td＞99＜/td＞
＜td＞78＜/td＞
＜td＞54＜/td＞
＜td＞68＜/td＞
＜/tr＞
＜tr＞
＜td＞次郎＜/td＞
＜td＞88＜/td＞
＜td＞87＜/td＞
＜td＞76＜/td＞
＜td＞89＜/td＞
＜/tr＞
＜tr＞
＜td＞花子＜/td＞
＜td＞76＜/td＞
＜td＞68＜/td＞
＜td＞96＜/td＞
＜td＞85＜/td＞
＜/tr＞
＜/tbody＞
＜/table＞



本日のお手元本：

プロならば知っておくべきWebコーディング＆デザインの定石100 (2010/10/26) 古籏一浩、比留間和也 他 商品詳細を見る

＿＿引用終了＿＿

雑感：
「ajax.txtって、これ↑txt保存にしたら＜table＞タグとか
　有効にならないんじゃないかなぁ？」

あとでちゃんと調査しときますが、
我ながらアホな初級疑問であります、左様、
おぢさん三十路の手習いでございます。

知りませんでした...
ajaxとjQueryとjavascritって各々身内だったと。
javascriptが親、その中にjqueryの子が、
そして孫のajax。あれです、あれ例えるならば、

ロシアの民芸品
Матрёшка （マトリョーシカ）

本日のBGM:
/*--これじゃないんだけど、ashkenazy(piano)+previnで

Piano Concerto 2 / Paganini Rhapsody (1994/10/11) Sergey Rachmaninov、 他 商品詳細を見る

accessの自動入力機能みたいに、webの入力フォームに
「郵便番号を入れると住所が自動的にフィールド値に入る」
というアレ。一昔前は、データベースをサーバー側に
用意していたのが一般的らしい。
今やweb上に置いてあって、それが呼び出せば使える
というのだから便利じゃのぉ。

今回もお手元本はこちら。

プロならば知っておくべきWebコーディング＆デザインの定石100 (2010/10/26) 古籏一浩、比留間和也 他 商品詳細を見る

__以下引用＿＿


/*--郵便番号と住所入力を行う、フツ―のフォーム
■HTML
＜form action="#" method="post"＞

＜table＞
＜tbody＞
＜tr＞
＜td＞郵便番号＜/td＞
＜td＞
＜form＞＜input size="20" type="text" name="zip" id="zip_text"/＞
＜/form＞
＜/td＞
＜/tr＞
＜tr＞
＜td colspan="2" align="center"＞＜a href="#" id="search_btn"/＞郵便番号検索＜/a＞＜/td＞
＜/tr＞
＜tr＞
＜td＞県＜/td＞
＜td＞
＜form＞＜input size="20" type="text" name="pref" id="pref_text"/＞
＜/form＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞市区町村＜/td＞
＜td＞
＜form＞＜input size="20" type="text" name="city" id="city_text"/＞
＜/form＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞住所1＜/td＞
＜td＞
＜form＞＜input size="20" type="text" name="addr1" id="addr1_text"/＞
＜/form＞
＜/td＞
＜/tr＞
＜tr＞
＜td＞住所2＜/td＞
＜td＞
＜form＞＜input size="20" type="text" name="addr2" id="addr2_text"/＞
＜/form＞
＜/td＞
＜/tr＞
＜tr＞
＜td colspan="2" align="center"＞
＜form＞＜input type="submit" value="送信"/＞
＜/form＞
＜/td＞
＜/tr＞
＜/tbody＞

＜/table＞

■HTML内のJavascript
＜script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" charset="UTF-8"＞
＜/script＞
＜script＞
$(function(){
$("#search_btn").bind("click",function(){ ----search_btnというIDの要素のonclickイベントを登録する
　　　　　//APIに送信する郵便番号をフォームから取り出す
　　　　　var zip=$("#zip_text").val();
//JSONPの仕組みを利用してAPIにアクセスする
　　　　　$("＜script＞")
.attr("type","text/javascript")
.attr("src=" http://zip.ricollab.jp/"+zip+".json?callback=search_complate&count=1")
return false;
});

window.search_complete=function(result){ ------JSONPの仕組みにより、scriptタグのURL内に指定した
if(result.totalResults==0){ 関数が、APIの機能の結果が渡された上で呼び出される
alert("該当がありませんでした");
　　}
//APIから受信した検索結果を住所入力フォームに自動入力する
$("#city_text").val(result.adress.city);
$("#pref_text").val(result.adress.prefecture);
$("#addr1_text").val(result.address.town);
};
});

＜/script＞　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

雑感：
scriptが書けない僕としてはコレの便利さっていうのは
分かりかねますが、ここのコードはいつもの通り「＜」「＞」を
半角に置き換えてお考え下さい。

ただの自主勉ゆえ、コードの書き間違えも気にせずテキトーに書いてます。
何があっても知りません。

プライベート

先日、NTTのウイルスクリアに乗り換えてみた。なんつーか
ダメっぽいですね。ブロックする項目がwebとメール、USBメモリ
だけっぽいので根拠なく不安です。チェックする圧縮ファイルが？
段階まで指定できないなど。軽いのは有りがたいですが
（だんだん男の話になってきました。）

フツ―のアンチウイルスソフトから、オトナの事情ゆえ。
（家電量販店で安く家電を購入するため）ハイ、しがない庶民です

NTTフレッツ+ウイルスバスターのtrendmaicroが業務提携？
することによって産まれたこの一品。

価格は月400円、年5000円前後、これならこのソフトよりいいのが
ありそうな気がしますし、来年は戻します、多分。

本日のBGM
/*--ashkenazy息子殿との共演が多くなってきましたが、
　　僕はprevinとのモノが好きかも。さすが元ジャズピアニスト
　　ノリがいいです。

ラフマニノフ:2台のピアノのための作品全集 (2003/10/22) アシュケナージ(ウラディーミル) 商品詳細を見る

プロならば知っておくべきWebコーディング＆デザインの定石100 (2010/10/26) 古籏一浩、比留間和也 他 商品詳細を見る

テーブルやリストを交互に色分けについて考える。
この本では次世代型のCSS３や、jQueryを使ってそれを可能にしましょう、
と教えている。

ポイントはCSS内のnth-child(odd)だそうで、
この指定により、奇数行だけが背景#39cになるそうな。
ちなみにnth-child(odd)が奇数行、
nth-child(even)は偶数行。となる。

注意点：
nth-chiuld(odd)は、CSS３で追加予定
であって、IE8（IE9は対応予定）では対応していない。
それ以外の主要ブラウザでは全て対応しているらしい。
ちなみに、これを疑似クラスと言うらしい。

テーブル、リストの交互色分けについて考える

＿＿＿以下引用＿＿



■HTML
＜ul class="zebraSample"＞
＜li＞これは順序なしリストです＜/li＞
＜li＞これは順序なしリストです＜/li＞
＜li＞これは順序なしリストです＜/li＞
＜/ul＞
*li要素にはとくにclassなどをつけていない

■CSS
ul zebraSample{
list-style:none
border:1px solid #39c;
}

ul zebraSample li{
margin:0;
padding:5px 10px:
}

ul zebraSample li:nth-child(odd){
background-color:#39c;
color:#fff;
}



さて、それでもIEで表示させたい場合は、
JQueryを使うそうな。


■Javascript
＜script src="http://www.google.com/jsapi"＞＜/script＞
＜script＞google.load("jquery","1.4");＜/script＞
＜script＞
$(document).ready(function(){
$('ul.ZebraSample').each(function(){
$(this).children('li:even').addClass('odd');

});
});

＜/script＞

*奇数行のli要素にclassをつける設定。
最初の2行でjQuery本体を読みこむ。3行目以降がclassを
つけるための設定。



＿＿＿＿引用終了＿＿

さて、一昔前はどうだったかと言うと、tableの場合
classでチマチマやっておったわけで、一行一行宣言しないといけないので
やはり面倒ではあった。


■HTML
＜table＞
＜tr＞
＜th＞社名＜/th＞
＜tdcolspan="2"＞株式会社？？？＜/td＞
＜/tr＞
＜trclass="even"＞
＜th＞代表者＜/th＞
＜tdcolspan="2"＞代表取締役？？？＜/td＞
＜/tr＞
＜tr＞
＜th＞資本金＜/th＞
＜tdcolspan="2"＞？？？円＜/td＞
＜/tr＞
＜trclass="even"＞
＜th＞所在地＜/th＞
＜tdcolspan="2"＞東京都？？？＜/td＞
＜/tr＞
＜/table＞

■CSS
#main table {
border: 1px solid #063;
width: 650px;
}
#main table th {
width: 190px;
border: 1px solid #063;
background-color: #FC9;
}
#main table td {
padding: 5px 10px;
border: 1px solid #063;
background-color: #FFC;
}
#main table .even th {
background-color: #FFF;
}

#main table .even td {
background-color: #FFF;


段落、見出し要素の交互色分けについて考える

おぢさんははじめて知ったことだが、hX要素や、P要素も、
上記のように、CSS3では交互色分けができるようだ。

＿＿＿＿以下引用＿＿


■HTML
＜div class="nthChildTest"＞
＜h1＞h1要素＜/h1＞
＜p＞P要素＜/p＞
＜p＞P要素＜/p＞
＜h2＞h2＜/h2＞
＜p＞P要素＜/p＞
＜p＞P要素＜/p＞
＜h3＞h3＜/h3＞
＜p＞P要素＜/p＞
＜p＞P要素＜/p＞
＜!--/.nthChildTest--＞
＜/div＞

■CSS
.nthChildTest p:nth-child(even){
background-color:#eee;
}

*divレイアウトコンテナ内(class=nthChildTest)の
　P要素の出現順、even（偶数）のもののみ、背景を#eeeにしろ


＿＿文章引用（一部）＿＿

nth-childとnth-of-typeの違い

しかし例えば有るセクション内の見出し
要素に対して数回に一度、特定のスタイルを当てたい場合、
nth-childでは問題が出てくる。なぜならnth-childは、
何個目の見出し要素、という指定ではなく、見出し要素が
何番目の子要素だった場合に限りそのスタイルを適用する
という意味のセレクタだからだ。...（略）

見出し要素（h1など）の場合は、それ以外の要素（Pなど）が
入るため、nth-childでは望みの結果が得られない事が多い
ということだ。そのような場合は同じようなセレクタである、
nth-of-type疑似クラスを使用する。こちらはまさに前述した
「三個目の見出し要素」といったような特定の要素の何個目に
スタイルをあてるといったことができるセレクタだ。

＿＿引用終了＿＿


*まずはnth-of-typeを使って上記nhth-childを書き替えてみる

■CSS
.nthChildTest2 p:nth-of-type(even){
background-color:#eee;
}

*次にul要素、p要素それぞれに「4の倍数だけ」と限定して
　CSS効果を適用させる

■HTML
＜div class="nthChildtest3"＞
＜p＞P要素＜/p＞
＜p＞P要素＜/p＞
＜ul＞
＜li＞li要素＜/li＞
＜/ul＞
＜ul＞
＜li＞li要素＜/li＞
＜/ul＞
＜p＞P要素＜/p＞
＜p＞P要素＜/p＞
＜/ul＞
＜ul＞
＜li＞li要素＜/li＞
＜/ul＞

■CSS
.nth-childTest3 p:nth-child(4n),
.nth-childTest3 ulnth-child(4n){
margin-right:0;
}

*P要素、ul要素それぞれ
　順番が4の倍数のときだけ
　margin-rightを0にしてぴったり
　収まるように調整している



本日のBGM:

ラヴェル:夜のガスパール (1995/04/21) アシュケナージ(ウラジミール) 商品詳細を見る

雑感：
ここまで引用しておいて、「使うんだろうか？」と思う今日この頃。
色分けしなくちゃならないほど、ページに内容を盛り込み過ぎたらいかん
と僕は思う。googleのAnalytics（つづりあってるよね）でも、
ユーザのほとんどは1ページ当たり20秒くらいしか見てないのであるからして。
20秒で伝わるページを作らなくちゃいかんとおもう。

おぢさん駆け出しのころ、javaのコードを埋め込みまくって
ブラウザクラッシャーもどきの重いページを作ってクレームを受けた
遠き過去を思い出しちゃうのであるからして。

・・・閑話休題。

先日、豚児と共に某遊戯施設へ。うら若きお嬢さんが受付業務に居た。
吾輩三十路にして、中学生に間違えられてしまった。
「学生証の提示をお願いします」と真顔で言われた。
大人の魅力の欠片もない吾輩でありましたとさ。

プロならば知っておくべきWebコーディング＆デザインの定石100 (2010/10/26) 古籏一浩、比留間和也 他 商品詳細を見る

idやclass名がその場限り・ご都合的な命名になり、
後に猛省しなければならない場合は多々ある。

上記本で成程！と思えたので引用しておく。


＿＿以下引用、要約＿＿

/*--上手なid、class名のポイント３つ。

見た目や位置情報のid、class名は使わない

leftMenu、rightContentsはダメ

id,class名の（汎用的な）例

SubMenu、Wrapper、utilityNav等、用途=命名とするのが賢い

HTML5を参考に（HTML5への移行を視野に入れた）

figure、mainHeader、aside,sectionFooterなどなど。



/*--以下[よい例]のみ、具体例の列挙。(　)内は僕のつぶやき

id,class名の良い例

• mainContents
  
• subContents
  
• att （attentionの略？ご注意ってことかな）
  
• note
  

汎用的なid,class名の一例　-その1<レイアウト関連>

• header
  
• footer
  
• page
  
• wrapper
  
• contents
  
• main
  
• sub
  

汎用的なid,class名の一例　-その1<ナビゲーション関連>

• nav
  
• utility
  
• guideNav
  
• menu
  
• pageMenu
  
• subMenu
  
• topicPath
  

汎用的なid,class名の一例　-その2

• area
  
• article
  
• section
  
• item
  
• mainHeader
  
• mainArea
  
• mainFooter
  
• summary
  
• description
  
• meta
  
• entryArea
  
• focusArea
  
• bodyArea
  
• text
  
• photo
  
• image
  

/*--以下文章の引用

HTML5を意識した組み合わせパターンを作っておく

今後、HTML5でのコーディングが主流になった場合のことを考えると、
HTML5で追加された要素をid,class名で使うことによって、
将来の意向もやりやすくなるだろう。

具体的には、図などのclass名に「figure」を使ったり、
メインコンテンツとは関連が薄いコンテンツを「aside」
にしたりと、HTML5でのマークアップを意識して付けていく。

また、HTML5ではsection要素や、artcle要素などのセクション要素内
でヘッダを表すのにheader要素を使用する。この考えから、
div#main内のヘッダに分類される部分は「mainHeader」としたり、
div#main内にdiv.section等がある場合はdiv.section内のヘッダとして、
「sectionHeader」などとしてつけるのも良いだろう。

同様にfooter要素も、div#main内では、ヘッダは「mainHeader」、
フッタは「mainfooter」とし、#main内のdiv.section内では、
「sectionHeader」、「sectionFooter」などとすると、コンテンツに
依存することなく様々なパターンに対応できるようになる。

＿＿引用終了＿＿

本日の自主勉に対する雑感

よけいややこしくなるんじゃないか？が率直な所。
つまり、上記文章で言いたいのは、
divレイヤーの段々重ねを良しとし、divをどんどん重ねろ
ということにある。

divをどんどん際限なく重ねろ、これに関しては僕は否だ。
＜P＞等、文章構成系の要素の存在意義がなくなっちゃうじゃないか。

最近のhtml文章においての問題点は、猫も杓子もdivとなり、
5重層以上はザラである。本当に本当に綺麗なコードを書いてくれるならいいが現実は...。


/*--こんなコードはウンザリだ

＜div id="wrapper"＞
　＜div id="header"＞内容内容内容
＜/div＞　　　　　　　　　　＜div id=mainContents＞内容内容内容
　＜div class="mainText"＞
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　＜/div＞
　　　　　　　　　　　　　　　　　　　　　　　　　　＜/div＞内容
内容
　　　　　　　　　　　　　　内容
　　　　　　　　　　　　　　　　＜!--mainTextのなかに
　subText?とする--＞＜/div＞



僕はこれを汚ないコードと呼んでいるが、
これを複数の人間で管理するとなると混乱は必至かと。
あえて段々重ねを避けるのも道ではないか？

あー病みあがりだ、文章が変だ。

Accessでデータベースを管理している場合、接客業の場合なんかは、
やはり葉書、手紙は販促モノとして用途があるかと思う。

「お客様　-お誕生日おめでとうクーポンつき葉書」
「お客様　-サマーバーゲンのご案内」
「お客様　-大創業祭全品半額セールのご案内」　　等があるかと思う。

そこで、顧客によって差出人を以下のように分ける場合、
「担当者欄だけが手書き」も見かける、めんどくさい作業っぽそうだ。

A氏＝担当者：山田
B氏＝担当者：岩木
C氏＝担当者：殿馬

担当者ごとに葉書デザインを作り　レポートのフィルターで振り分ける

1. ソースとなるテーブルに"担当者"を区分としてつくる。
   
2. "上得意様"など、振分け条件として有効なものをテーブルに追加（ここでは処理年）
   
3. レポート「ハガキ」を選び、ダイアログに従って葉書デザインをする。
   
4. レポートの「フィルタ」に振分け条件を設定する
   
5. 「レポート読み込み時にフィルタを適用」を「はい」に設定
   

フィルタ趣旨
　「処理年が2012で、区分（担当者）が"y（山田）の顧客に葉書を作成せよ"」

　処理年="2012" and 区分="y"　　

*参考画像


最近の読書：
/*--「認められたい心理」をフロイトをはじめとした古典心理学から
　　　迫っていく。昨今のSNSに出没する「構ってちゃん」の存在を理論整然と
　　　木端微塵に出来そうな気にさせてくれる。要は、家族関係の破綻=構ってちゃん誕生
　　　あるいは”空気を読みすぎる”最近の傾向にも一石を投じる内容。
　　　やや専門的で敷居は高め。

「認められたい」の正体　―　承認不安の時代 (講談社現代新書) (2011/03/18) 山竹 伸二 商品詳細を見る