kinopyo blog - Learning through Writing

2009年11月25日 #diary

CTO：技術者にとっての社長

@ITよりこんな意味深い記事を読みました。

自分にぴったりだと思うので、一部抜粋して引用させていただきます。

所感

私もビジネスにあまり興味がなく、プログラミングが好きです。そして、決してプログラミングの天才じゃないこともわかってます。そう、天才ではないけど、努力はできる、そのほうが自分に向いてると思います。

CTOは格好いい、そして常に論理的に物事を考えそれを行動とコードに移す、一人前の魅力的な人類だと考えています。私は技術に特化していきます。

技術者にとっての社長

わたしは、CTOは「技術者にとっての社長」になるべきではないかと思っています。技術者とは、根本のところではビジネスに興味が持てない生き物だと思っています。わたし自身がそうですから。究極的には、ビジネスがどう、経営的にどうという部分よりも、問題があって、技術的にどう解決するか、という方が好きなんです。でも、社長はそうではいけない。社長はビジネスのことを24時間、考えている。そうなると、技術者は社長に、根本のところで付いていけなくなってしまう。上層部がみんなビジネスのことしか考えていなかったら、技術者は付いてきません。そういう意味で、CTOが「技術者にとっての社長」としての役割を果たすべきなのです。

特化

技術者は自分にとって最適な仕事を見つけるべきです。よく、プログラマからシステムエンジニアになって、そのあとプロジェクトマネージャになって……というキャリアパスが示されますが、わたしはそういう考え方は嫌いです。だって、プログラマとプロジェクトマネージャって、全然違う仕事ですよ。プログラマは機械相手、プロジェクトマネージャは人間相手で、そもそも向く方向すら違う。適性だって異なります。向いている方に専念した方がいい。これは私見ですが、プログラマとしての才能がある人がプロジェクトマネージャをやると、「プログラマの才能がマイナスに働く」ことすらあると思います。プロジェクトマネージャは大局からものを見なければいけないのだけれど、プログラマとしての才能にあふれている人は、細かい部分を見てしまいがちです。やはり、どちらかに特化した方がいい。

　「餅は餅屋」です。プログラマなりプロジェクトマネージャなり、自分に向いている部分に特化した方がいい。ましてや、技術者にビジネスセンスを求めるなんて馬鹿げています。

2009年11月24日 #flash

Flash，JSONでのクロスドメインアクセス勉強メモ

gihyoサイトの「ここが危ない！Web2.0のセキュリティ」連載の第4回：「Flash，JSONでのクロスドメインアクセス」の勉強メモです。

Flashのクロスドメインアクセス

動作原理

データ提供側で認証のファイルを設置するだけです。
ファイル名は「crossdomain.xml」で、これが例なのかこう書かなければならないのかは明確に書いてません。

<cross-domain-policy>
  <allow-access-from domain="www.securesky-tech.com" />
</cross-domain-policy>

JSONでも実はクロスドメインアクセスが可能

動作原理

eval()関数でデータを評価するだけで使用可能になる

var obj = eval("("+req.responseText+")");

クロスドメインの実現

setterメソッドをサポートしているブラウザ（FirefoxやSafari 3等）では，setterメソッドを再定義することによって，JSONもSCRIPTタグで呼び出して使うことが可能になる。

<html>
  <script>
    Object.prototype.__defineSetter__('name', function(x){sendtoAttacker(x);});
  </script>
  <script src="http://www.securesky-tech.com/object.dat">
  </script>
</html>

2009年11月24日 #ie

IE8でbackground-colorが白とその値がnullとの表示が微妙に違う

現象

まず画像を見てみましょう。

最初の二つ白い背景のエリアに注目してください。

一番目は背景色を白い色(#FFFFFF)に設定したもので、

二番目が背景色をnullに設定したものです。

白い色に明確に設定したほうのborderの左と上の表示が少し違ってます。

またIE8の開発ツール(F12で呼ばれる、Firebugと似たデバッグツール)で見ても

background-colorが#ffffffになってる以外に、何の余計なスタイルもありませんでした。

なのでやはりbackground-colorが指定してないものと#ffffffに指定したものには差異が存在してます。

サンプルコード

<div>
<input id="foo" type="text" />
<input id="bar" type="text" />
</div>
<div>
<input id="hoge" class="gray" type="text" />
<input class="gray" type="text" />
</div>

$(document).ready(function(){
  // 元の背景色を保持
  var original = $("#foo").css("background-color");
  alert(original);  // output is "ffffff"
  // 元の背景色を再設定、値は同じはず
  $("#foo").css("background-color",original);
  // 他の背景色はこんな現象がないみたい
  // あるとしても発見しづらい
  var hogeColor = $("#hoge").css("background-color");
  alert(hogeColor); // output is "gray"
  $("#hoge").css("background-color",hogeColor);
});

2009年11月24日 #php apache

PHP5とApache2.2をWindowsにインストール

Apache

ダウンロード＆インストール

Welcome! - The Apache HTTP Server Projectから最新版を入手
インストールファイルを実行、下記2点注意すればOK
[Network Domain]と[Server Name]のところはlocalhostと記入
[Custom]インストールでインストール先が指定できる

設定

[Apache Home]\conf\httpd.confを開いて下記のパスを自分の環境にあわせて

設定してください。このパスはサーバが立ち上がった際のrootとして使います。

DocumentRoot "D:/www"
<Directory "D:/www">

PHP

PHP: Downloadsから入手
- Windows BinariesからPHP 5.2.11 zip packageをダウンロード

拡張子がMSIのinstaller版もあるが、マニュアルでのインストールがすすめられる

zipファイルを適当な場所に解凍。今回はd:\phpに。
Windowsの環境変数pathに設定
コマンドプロンプトで下記コマンドでインストール成功かを確認

php -v

php.ini

php.ini-recommendedをphp.iniにリネーム
doc_rootを検索し内容を編集

doc_root = d:\www

Apacheサーバと同じルート(httpd.confの DocumentRoot)

ApacheサーバとPHPの連携

httpd.confの修正

LoadModule php5_module d:/php/php5apache2_2.dll

AddType application/x-httpd-php .php

PHPIniDir "d:/php"

ディレクトリは自分の環境に合わせて修正してください。

動作確認

d:/phpにtest.phpというファイルを作ります。内容は下記になります。

注意！！は動かない！

Apacheサーバを再起動し、http://localhost/test.phpを叩いてPHPのページが表示されればOKです。

参考サイト

Apache2 + PHP5をWindowsXPにインストール

php.iniの配置場所の指定(PHPIniDir) - PHP利用のための設定 - Apache入門

2009年11月23日 #jquery

jQuery逆引きレファレンス、属性＆コンテンツ編(@ITより)

@IT連載：jQuery逆引きリファレンスの第二回のテーマは属性＆コンテンツです。

目次は以下になります。

* 属性値を取得するには？

* 属性値を設定するには？

* 複数の属性値をまとめて設定するには？

* 関数の結果によって動的に属性値を設定するには？

* 属性値を削除するには？

* スタイル・クラスを追加／削除するには？

* スタイル・クラスが適用されているかを判定するには？

* スタイル・クラスの適用／解除を交互に行うには？

* 要素に適用されたスタイル情報を取得するには？

* 要素に特定のスタイルを適用するには？

* 複数のスタイル・プロパティをまとめて設定するには？

* 要素の表示位置を取得するには？

* ページのスクロール位置を取得／設定するには？

* 要素の高さや幅を取得するには？

* 要素の高さや幅を設定するには？

* 要素のテキストを取得するには？

* 要素のテキストを設定するには？

* フォーム要素の値を取得／設定するには？

勉強メモ

text()とhtml()の違い

（1）取得する対象

　要素セット（jQueryオブジェクト）が複数の要素を含んでいる場合、htmlメソッドは先頭要素の内容だけを取得しますが、textメソッドはすべての要素の内容を結合したものを取得します。

（2）取得する内容

　名前のとおり、htmlメソッドは要素の内容をHTML文字列として取得しますが、textメソッドは純粋なテキストだけを取得します。

（3）対応する形式

　textメソッドはHTML／XMLいずれの形式でも動作しますが、htmlメソッドはHTML（XHTMLを含む）形式でしか動作しません。このサンプルでは扱っていませんが、textメソッドをXML形式で利用する方法については、あらためてAjax編で紹介する予定です。
http://www.atmarkit.co.jp/fdotnet/jqueryref/02attribute/attribute_16.html

height(val)、width(val)

引数valには数値、もしくは「em」や「%」などの単位付きの数値を指定できます（単なる数値の場合はピクセル値として認識します）。

要素の高さや幅を取得するには？

－ height()、width()、innerHeight()、innerWidth()、outerHeight()、outerWidth()

関数	padding	border-width	margin
height、width	x	x	x
innerHeight、innerWidth	o	x	x
outerHeight、outerWidth	o	o	x
outerHeight、outerWidth（true	o	o	o

関数の結果によって動的に属性値を設定するには？

－ attr(name, fnc) －

コールバック関数の戻り値を用いて設定。

```javascript $(function() { $('li > img').attr( 'src', function(index) { return "http://www.wings.msn.to/books/" + this.id + "/" + this.id + "_logo.jpg"; }); }); ```

2009年11月23日 #jquery

jQuery Tips: live関数はすべてのイベントに有効じゃない、その他...

今までjQueryを使ってきたtipsをメモします。

Tipsの定義とおり知っていればちょっと便利になるけど、

知らなくても特に問題ないですね。

ただしlive関数においてはすべてのイベントに有効じゃないのは

知っておいてほしいです。

live関数

liveはすべてのイベントに対応していない。

サポート

click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup

非サポート

blur, focus, mouseenter, mouseleave, change, submit

ajax関数のurlパラメータ

AJAXのURLではセレクタも併用できる。セレクタによりあるページの一部だけを読み込むことができる。

こんな形です："url #some > selector"

デフォルトは"body>*"のセレクタが適用されていますよ。

```js $("#links").load("/Main_Page #jq-p-Getting-Started li"); ```

：has(selector)フィルタ

：has(selector)は持ってるすべての子要素に対して動作してる

divい対して:hasフィルタを使うと、p要素までフィルタが走る

```html

span ...

p..


<h4>属性フィルタの組み合わせ</h4>
<p>[filter][filter]……のように複数を連続して記述することもできます。この場合、すべての属性フィルタに合致する要素だけが取り出されます。</p>
<h4>htmlの組み立て</h4>
<h5>ハードコードで書く</h5>

```js
$(select).append("<option value='" + 1 + "'>text</option>");

jQueryの関数を用いて書く

$(select).append($('<option>').attr({ value: 1 }).text("text"));

このほうが簡潔だと思いますが、、

:nth-child

:nth-childフィルタによりn行おきに子要素を取得することができる

例えば、2、5、8行目……のように3行おきに（「3で割ったときの余りが2」番目の）要素を取得したい場合には、以下のように記述できます。

$('ol > li:nth-child(3n + 2)')

validationプラグイン

jQueryのvalidationプラグイン:showErrorを定義するとhighlightとunhighlightとは実行しない

そもそもshowErrorはエラーをどう表示するかを決めるための高レベルの関数なので、

簡略化したhighlightとunhighlightは隠蔽されたっぽいの感じで、完全に実行しません。

2009年11月23日 #webservice

Same-Originポリシー勉強メモ

gihyoサイトの「ここが危ない！Web2.0のセキュリティ」連載の第2回：「Same-Originポリシーと迂回技術」の勉強メモです。

定義

他のドメインのサイトへはリクエストを送信できない制限のことをSame-Originポリシーと呼びます。同じドメインであってもポート番号やプロトコル（HTTPとHTTPSなど）が異なれば，異なるサイト（クロスドメイン）とみなされアクセスできません。クロスドメインアクセスは機能として実装されていないのではなく，セキュリティ上の理由から禁止されているそうです。

必要性

俺があの黒の攻撃者とし、攻撃目標がユーザのメールアカウント情報だとします。もしクロスドメインにアクセスする制限がなければ、事前に用意したスクリプトで(urlをメールサーバに設定)メールアカウントの情報が取得できるようになってしまいます。(この辺りはCookieの話が出てきます)

ウェブの基本ルール

Ajaxだけではなく、フレームやサブウインドウの情報にアクセスする場合などにも存在する

クロスドメインでデータを取得する方法

* リバースPorxy

* SCRIPTタグ（JSONP）

* Flash

* 画像

* スタイルシート

リバースProxy

データ提供サーバにとってユーザの身元は隠れているため、攻撃者に利用しやすい

ユーザの身元を確認しようとすると、ユーザ情報を扱わなければならない

ユーザ情報-->サーバ-->データ提供サーバ

2009年11月22日 #jquery

jQuery focus()によるIEとFirefox動きの違い

jQueryのfocus()はデフォルトのフォーカス動作とそのエレメントにバインドされたイベントが実行されます。

しかしIE8とFirefoxではこのfocus()の動作が多少違います。

現象

例えば複数のinput要素があって、それぞれfocusイベントとblurイベントがバインドされたとします。

focus()を実行する前はelem1にフォーカスしていて、要素$('elem2').focus()を実行すると

Firefox 3.5.5ではelem1のblurイベントが実行した後に、elem2のfocusイベントが実行する
IE8ではelem1のblurイベントは実行されますが、elem2には2回フォーカスするように動作します。

つまり下記の動きです。

elem1のblurイベント
elem2のfocusイベント
elem2のblurイベント
elem2のfocusイベント

普通に考えたらFirefoxの動きが正しいはずですよね。
上記の3と4は余計な処理になります。

サンプルコード

$("form :input").bind("focus", function() {
  $(this).css("background-color", "gray");
  // ログを出力
    $("#result").append($(this).get(0).id + " focus event triggered.<br>");
  }).bind("blur", function() {
  $(this).css("background-color", "");
  // ログを出力
    $("#result").append($(this).get(0).id + " blur event triggered.<br>");
  });
$("#foo").focus();
setTimeout(focusBar, 3000);
function focusBar() {
  $("#" + document.activeElement.id).trigger('blur');
  $("#bar").focus();
};

Foo<input id="foo" type="text" />
Bar<input id="bar" type="text" />
<div id="result"></div>

先にfooテキストエリアにフォーカスしてくささい。
3秒後にbarテキストエリアにfocus()メソッドでフォーカスします。
その時の出力ログを見てください。

回避策

まだいい方法はつかんでません。

Googleで検索すると似たようなものはありましたが、

回避策はまだないようです。

[jQuery] Focus event firing twice in Internet Explorer

2009年11月21日 #webservice

JSONPの動作原理、jQueryでJSONPを利用

前回の記事の続きとしてJSONPを勉強しました。

XMLHttpRequestはセキュリティ上の制限により、

クロスドメインの通信ができないです。

でもウェブサービスのようなどうしてもクロスドメインで通信したい場合があります。

その時の手段してあげられるのがこのScriptタグです。

(他の手段としてiframeやflashとリバースプロキシがあるそうです)

JSONPとは

JSON with paddingの略

Javascriptの非同期通信でよく使われるXMLHttpRequestオブジェクトにはSame-Originポリシーが存在し、クロスドメインアクセスができない。

一方，scriptタグを用いると，ドメインの異なるサーバに置いているスクリプトファイルを読み込むことができる。この仕組みを利用し、scriptタグのsrcに、データを取得できるAPIのURLを指定し，ドメインの異なるサーバからデータを取得する仕組みの総称として、JSOPという言葉が使われる。JSONP用のAPIでは、関数名＋取得データをjson形式で表記して引数とした形式(例.callbackFunc({id:1000,name:aaa}))のレスポンスが一般的で、APIから返されるコールバック関数と同じ名前の関数(callbackFunc(jsonData))をクライアント側で定義しておけば、データを読み込んだ際にそのコールバック関数が実行される。動的にscriptのDOMを生成することで、非同期でデータが取得できるようになる。

ただし、Same-Originポリシーが存在しないため、機密情報をAPIに含める際には十分な注意が必要である。

動作原理

やはりソースコードで読むほうが早いだと思います。

以下gihyo.netからのサンプルコードです。

<html>
  <body>
    <script>
      function callback(x) {
        // コールバック関数を定義
        alert(x["name"]);
      }
    </script>
    <script src="http://mail.example.com/json.dat"></script>
  </body>
</html>