読者です 読者をやめる 読者になる 読者になる

PHP/Javascript/JQuery/CSSの勉強

Javascript修行中。基礎固め中...

テーブルフィルターを解読する

jQuery quickSearch plug-in

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_tablesort

今日は、このjQueryPluginを解読する。

というかこれ、古いな。
あとから検索してみたら、これが最新?
https://github.com/riklomas/quicksearch

ソースが全然違うので、別物ぽいけど。


プラグイン利用の際に書くソース
$(function () {
 //どこに検索フォームを設置するか
 $('table#table_exp tbody tr').quicksearch({
 	//attachedで指定したテーブルを基準にして
 	//どこに検索フォームを配置するか
    position: 'before',
    
    //検索テーブル
    attached: 'table#table_exp',
    
    //表のストライプclass指定
    stripeRowClass: ['odd', 'even'],
    
    //検索ボックスのラベル
    labelText: 'データ検索:'
 });

});

半角スペースでand条件検索できます。

引数

■position

prepend:attached指定要素の先頭に配置
http://semooh.jp/jquery/api/manipulation/prepend/content/

before:attached指定要素の前に配置
http://semooh.jp/jquery/api/manipulation/before/content/

append:attached指定要素の末尾に配置
http://semooh.jp/jquery/api/manipulation/append/content/

■loadertext
処理の際に表示するテキスト。
指定しなければ、初期値で「loading...」が入る。

「loaderImg」引数で画像も指定できる。

ロード時に、form生成

検索フォームが生成されます。

keydownイベント

キーコード
http://faq.creasus.net/04/0131/CharCode.html


下記が、入力されたとき動作させないように判定している。

■引っかかる部分
・↑↓は、入力フィールドが1行のみだから不要?
 →←も必要ない気がするんだけども。。。うーむ。

・224:全角がダメなら223:半角もダメなのでは?謎


9:Tabキー
13:Enter / T Enter
16:Shift
17:Ctrl
18:Alt
38:↑
40:↓
224:全角

if (!(keycode === 9 || keycode === 13 || keycode === 16 || keycode === 17 || keycode === 18 || keycode === 38 || keycode === 40 || keycode === 224)){
	qs();
}

入力値のタグ削除

汎用的に使えそう
※半角に変換する部分は、参考に。

function strip_html(input)
{
	var regexp = new RegExp(/\<[^\<]+\>/g);
	//タグを削除
	var output = input.replace(regexp, "");
	//半角に変換
	output = $.trim(output.toLowerCase().replace(/\n/, '').replace(/\s{2,}/, ' '));
	return output;
}

スライドショーのコーディングを解読する

[スライドショー]

http://www.weblaboratory.jp/jquery/sample/desSlideshow/

スライドショーの簡単な処理の流れ

1.引数チェック
 初期値指定

2.CSS初期化
3.自動動作させるか判定
 setTimeout()で無限ループ
 上から順番にリストを左に出す
 該当の画像を表示

■イベント動作:liタグにhoverしたら該当
 の画像を表示+リストを左に突き出す

解読の過程で調べたことメモ

jQueryプラグインの基本テンプレートの作り方
$.fn.pluginName = function(){};

http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin

hogeが引数として取得できる。
「(function($) {})(jQuery);」がどういうことかと
いうと、jQueryが受け渡されているということ。

(function (x){ alert(x); })("hoge");

http://d.hatena.ne.jp/initialize/20090526/p1

find(expr)
指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。

http://semooh.jp/jquery/api/traversing/find/expr/

物理要素と論理要素について

[結論]

物理タグは使うな

論理要素 タグで囲まれた内容に何らかの意味を持たせる要素
     ex.文字の強調 em,strong
     
物理要素 タグで囲まれた内容は意味を持たず、見た目の変更だけを
     目的とした要素です。
     ex. b, i

■物理要素では意味を伝えられない(音声ブラウザ)

 http://www.tagindex.com/html_tag/basic/phrase_style.html
 

■環境によって表示のされ方が違う

 http://www.tohoho-web.com/lng/200002/00020047.htm


MARQUEEやBLINKタグは使うな

http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2008/htmllint/explain.html

BLINK や MARQUEE といったタグは使うべきでないと、WAI で名指しで強く主張されています。

tableタグよりdivタグを使う理由

理由

[開発効率化]

・不要なコードが減る

[SEO的な効果]

・余分なコードが減ることにより
 divタグで書いたほうが検索結果に反映されやすい

[概念]

・tableでレイアウトさせるのは本来のtableタグの
 目的から外れている(本来は表を書くこと)

[行の高さをあわせる書き方]

http://scuderia-web.com/tips/xhtml_css/equal_box_heights.php

技術者のスキルチェック

[技術者のスキルチェック集]

http://d.hatena.ne.jp/language_and_engineering/20110717/p1

[HTML/CSS]

http://d.hatena.ne.jp/language_and_engineering/20110702/p1
たぶんノーマル~中級者あたり

[DBとSQLについて]

http://d.hatena.ne.jp/language_and_engineering/20110320/p1
初学者~ノーマルあたり‥知識が穴あきだらけです


一定期間経ったら見直したいと思います。

JSONPとは

JSONPとは?

scriptタグを利用したクロスドメインでの
データ交換方式

違うサーバのデータをjavascriptで取ってきたい場合に
同一生成元ポリシーで取れないところを、scriptタグとパラメータに
コールバック関数を設定することで解決します。

使い方

scriptタグ+コールバック関数

静的な実装例
<script type="text/javascript" src="http://example.com/service?callback=myCallbackFunc"></script>
<script>
	function myCallbackFunc(data){
		//引数dataにjsonデータが引き渡される
	}
</script>
動的な実装例
                                • -
var JSONP = {
	index:0,
	callbacks:{},
	request:function(url, callback){
		var ind = '_' + JSONP.index++;
		
		//scriptタグ生成
		var s = document.createElement('script');
		s.type = "text/javascript";
		s.charset = "utf-8";
		//生成URL例) http://www.example.com?xx=1&callback=JSONP.callbacks._1
		s.src = url + (url.indexOf('?')>0 ? "&" : "?") + "callback=JSONP.callbacks." + ind;
		
		
		JSONP.callbacks[ind] = function(res){
			//resでJSONデータ取得
			
			//scriptタグ削除
			s.parentNode.remove(s);
			delete JSONP.callbacks[ind];
			
			//コールバック変数にJSONデータ引渡し
			callback(res);
		}
		
		//scriptタグをheadタグ内に配置
		document.getElementByTagName('head')[0].appendChild(s);
	}
}

//JSONサービス呼び出し
JSONP.request('http://example.com/service', function(data){	
	//callback関数
})


■コールバック関数の命名は、特に理由がない限りは
 多数の先例に倣い、「callback」という名前にした方が分かりやすい
 
■ライブラリを利用するのが楽
 jQueryやdojoなど。
 
JSONPで提供されているサービス
・Delicious
Google
Flickr
・はてな
・楽天(楽天webサービス) http://webservice.rakuten.co.jp
 

セキュリティについて勉強

勉強中。メモ。

GETとPOSTの使い分け

■GETの弱点
・ブラウザやサーバが処理できるURLの長さには上限がある
・URLに指定されたパラメータがアクセスログに残る
・URLに指定されたパラメータがReferer経由で外部に漏れる

■POSTにするパターン
・送信するデータ量が多い場合
・データ更新など副作用を伴う場合
・秘密情報を送信する場合

hiddenパラメータ

■hiddenパラメータの弱点
 hiddenパラメータをユーザが改変し攻撃できる

■hiddenパラメータのメリット
 利用者側から書き換えできるが、情報漏えいや第三者からの書き換えに堅牢
 

認証と認可

認証:利用者が確かに本人だと確認すること
認可:認証済みの利用者に対して権限を与えること

Basic認証
 1度認証すれば認証状態が保持されているように見えるが
 実際、リクエスト毎にIDとPWが送出されている

■クッキーとセッション管理
 サーバ側で認証状態を覚えておくことをセッション管理

 [クッキー]
 ---------------
 ・保持できる値の個数や文字列長に制限
 ・クッキーの値は利用者本人には参照・変更できるので
  秘密情報の格納には向かない

 ・デフォルトではクッキーをセットしたサーバのみに送られる
  セッションIDの固定化攻撃に利用されるので、異なるドメインへの
  クッキー設定は出来ない

 ・Domain属性を指定しない状態がもっともクッキーの
  送信範囲が狭い
  ※Domainは通常設定しないもの

 ・クッキーモンスター問題
  古いブラウザだと「.co.jp」ドメインのクッキーが作られてしまう
  セッションIDの固定化攻撃を受けやすくなる

 ・クッキーのhttponly属性
  javascriptからアクセス出来ないクッキーを設定するもの
  
 [セッションIDに求められる要件]
 --------------------------------
 ・第三者がセッションIDを推測できないこと
  1.セッションIDは連番ではなく、乱数を利用する
  2.

 ・第三者からセッションIDを強制されないこと
  セッションIDの固定化→セッションIDの固定化
  

 ・第三者にセッションIDが漏洩しないこと
  1.ネットワーク的にセッションIDが盗聴される
  2.クロスサイトスクリプティングなどアプリケーションの脆弱性により漏洩する
  3.PHPやブラウザなどプラットフォームの脆弱性により漏洩する
  4.セッションIDをURLに保持している場合はRefererヘッダから漏洩する
 

能動的攻撃と受動的攻撃

 ・能動的攻撃
  攻撃者がwebサーバに対して直接攻撃すること
 
 ・受動的攻撃
  罠サイトに利用者を誘導する
  正規サイトを悪用する
  1.FTPなどのパスワードを不正入手
  2.webサーバの脆弱性をついた攻撃
  3.SQLインジェクション攻撃により
   コンテンツを書き換える
  4.SNSなど利用者が投稿できるサイト機能のクロスサイトスクリプティング
   脆弱性を悪用