HINA :: 工程幼稚園

[plurk tech.] 在單一噗浪頁面加入回應鏈結 + jQuery

2009-07-03T09:48:48+08:00

update, 腳本 jQuery 化完成，若有下載使用的，請更新，檔案一樣在最下面。

請先安裝 GreaseMonkey，還沒有把他 jQuery 化，暫時頂著用。

原始碼在此：

// ==UserScript==
// @name           GetResponseURL
// @namespace      http://blog.hinablue.me/
// @include        http://www.plurk.com/p/*
// ==/UserScript==

// Add jQuery
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
function GM_wait() {
    if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery.noConflict(true); letsJQuery(); }
}
GM_wait();

// All your GM code must be inside this function
function letsJQuery() {
    $("li").each( function() {
        $(this).hover( function () {
            $(this).find("div.message ").find("span:last").append("<span><br />RepLink: "+unsafeWindow.url+"#"+$(this).attr("id")+"</span>");
        },
        function () {
            $(this).find("div.message ").find("span:last").remove();
        });
    });
}

檔案在這邊，我不知道 TextCube 能不能直接裝，如果不行的話，那就請自行新增了。

getresponseurl.user.js

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[php tech.] MSN Bot step by step part 2 Connect HOWTO

2009-07-02T14:50:52+08:00

連線，其實並不是一件簡單的事情。要怎麼樣讓一個程序，能夠持續的跟伺服器溝通，卻不會因為逾時等問題導致連線中斷，這就是即時通訊比較麻煩的地方。首先，我們首先需要做的，就是跟 MSN 的服務做溝通的動作，這個溝通動作有詳細的命令，請參閱：http://msnpiki.msnfanatic.com/index.php/Reference:Commands

注意，溝通的動作如果送太多次，會被 MSN 服務給擋掉喔！所以請勿輕易用固定 IP 的主機嘗試。

首先，跟 MSN 服務溝通的第一步，我們使用 php 的 fsockopen 來與服務器做溝通。並且告訴他我們所使用的通訊協定版本。

<?php
    $id = 1;
    $fp = fsockopen('messenger.hotmail.com', 1863, $errno, $errstr, 5);
    stream_set_timeout($fp, 2);
    if (!$fp) {
        echo "Can't connect to messenger.hotmail.com:1863, error => $errno, $errstr";
        exit;
    }
    fwrite($fp, "VER $id MSNP15 CVR0\r\n");
    fclose($fp);
?>

你沒有看錯，這就是連線的第一步，單純的告訴 MSN 服務器，我要使用 MSNP15 的 protocol。接下來呢，我們要告訴他關於我們（客戶端）的一些訊息，使用 CVR 這個指令來完成。

<?php
    $id = 1;
    $fp = fsockopen('messenger.hotmail.com', 1863, $errno, $errstr, 5);
    stream_set_timeout($fp, 2);
    if (!$fp) {
        echo "Can't connect to messenger.hotmail.com:1863, error => $errno, $errstr";
        exit;
    }
    fwrite($fp, "VER $id MSNP15 CVR0\r\n");
    while (!feof($fp)) {
        $data = fgets($fp, 4096);

        $id++;
        $code = substr($data, 0, 3);
        switch ($code) {
            case 'VER':
                fwrite($fp, "CVR $id 0x0409 winnt 5.1 i386 MSMSGS 8.1.0178 msmsgs bot1@hinablue.me\r\n");
            break;
            default:
                fwrite($fp, "OUT\r\n");
        }
    }
    fclose($fp);
?>

嗯？就這樣，你也沒看錯，我用了 CVR 來告訴他我所使用的帳號以及我的相關資訊。關於 CVR 能夠傳送甚麼東西，請參考這裡的說明：http://msnpiki.msnfanatic.com/index.php/Reference:Commands。接下來，我要告訴他我是誰。這時候要先送個 USR 指令跟他說。

<?php
    $id = 1;
    $fp = fsockopen('messenger.hotmail.com', 1863, $errno, $errstr, 5);
    stream_set_timeout($fp, 2);
    if (!$fp) {
        echo "Can't connect to messenger.hotmail.com:1863, error => $errno, $errstr";
        exit;
    }
    fwrite($fp, "VER $id MSNP15 CVR0\r\n");
    while (!feof($fp)) {
        $data = fgets($fp, 4096);
        $id++;
        $code = substr($data, 0, 3);
        switch ($code) {
            case 'VER':
                fwrite($fp, "CVR $id 0x0409 winnt 5.1 i386 MSMSGS 8.1.0178 msmsgs bot1@hinablue.me\r\n");
            break;
            case 'CVR':
                fwrite($fp, "USR $id SSO I bot1@hinablue.me\r\n");
            break;
            default:
                fwrite($fp, "OUT\r\n");
        }
    }
    fclose($fp);
?>

跟他說完我是誰之後，接下來的動作便是檢查是否已經登入了 Passport.NET 的網絡。登入的動作就是上一篇所說的 SSO 的動作（如果是使用 MSNP9 的話則是 TWN），如果已經登入了，那我們就需要取得 Passport.NET 的 token 來丟給 MSN 服務，讓他知道我已經登入，並且取得 ticket 了。另外，這裡需要一些特別的運算，我後面再提。

<?php
    $id = 1;
    $fp = fsockopen('messenger.hotmail.com', 1863, $errno, $errstr, 5);
    stream_set_timeout($fp, 2);
    if (!$fp) {
        echo "Can't connect to messenger.hotmail.com:1863, error => $errno, $errstr";
        exit;
    }
    fwrite($fp, "VER $id MSNP15 CVR0\r\n");
    while (!feof($fp)) {
        $data = fgets($fp, 4096);
        $id++;
        $code = substr($data, 0, 3);
        switch ($code) {
            case 'VER':
                fwrite($fp, "CVR $id 0x0409 winnt 5.1 i386 MSMSGS 8.1.0178 msmsgs bot1@hinablue.me\r\n");
            break;
            case 'CVR':
                fwrite($fp, "USR $id SSO I bot1@hinablue.me\r\n");
            break;
            case 'USR':
                // 這裡是做登入檢查的地方，現在暫時不做，讓他直接離開。
                fwrite($fp, "OUT\r\n");
            break;
            default:
                fwrite($fp, "OUT\r\n");
        }
    }
    fclose($fp);
?>

我想取得 ticket 的地方並不麻煩，最主要的是要將 login_code 算出來，在 MSNP15:SSO 的地方其實有提到要如何去計算那些值。而在現成的類別裡面，也已經提供了運算的方式，所以我這邊就不再贅述，基本上這些數值運算是 MSN 服務器所規定的，所以你不算也不行。

在取得登入動作之前，還有兩個預設的動作，一個是 XFR，另一個是 GCF，所以我們個別處理。

<?php
    $id = 1;
    $fp = fsockopen('messenger.hotmail.com', 1863, $errno, $errstr, 5);
    stream_set_timeout($fp, 2);
    if (!$fp) {
        echo "Can't connect to messenger.hotmail.com:1863, error => $errno, $errstr";
        exit;
    }
    fwrite($fp, "VER $id MSNP15 CVR0\r\n");
    while (!feof($fp)) {
        $data = fgets($fp, 4096);
        $id++;
        $code = substr($data, 0, 3);
        switch ($code) {
            case 'VER':
                fwrite($fp, "CVR $id 0x0409 winnt 5.1 i386 MSMSGS 8.1.0178 msmsgs bot1@hinablue.me\r\n");
            break;
            case 'CVR':
                fwrite($fp, "USR $id SSO I bot1@hinablue.me\r\n");
            break;
            case 'USR':
                // 這裡是做登入檢查的地方，現在暫時不做，讓他直接離開。
                fwrite($fp, "OUT\r\n");
            break;
            case 'XFR':
                @list(/* XFR */, /* id */, /* NS */, $server, /* ... */) = @explode(' ', $data);
                @list($ip, $port) = @explode(':', $server);
                fclose($fp);
                $fp = @fsockopen($ip, $port, $errno, $errstr, 5);
                if (!$fp) {
                    return false;
                }
                stream_set_timeout($fp, 2);
                fwrite($fp, "VER $id MSNP15 CVR0\r\n");
                break;
            break;
            case 'GCF':
                // 這裡會取得非常大量的資料，暫時不做處理，直接讓他離開。
                fwrite($fp, "OUT\r\n");
            break;
            default:
                fwrite($fp, "OUT\r\n");
        }
    }
    fclose($fp);
?>

這樣，就完成了＂一次＂與服務器完整的連線動作。我這邊提供完整記錄的 log 檔案給大家參考。

VER 1 MSNP15
CVR 2 1.0.0000 1.0.0000 1.0.0000 http://msgr.dlservice.microsoft.com http://download.live.com/?sku=messenger
XFR 3 NS 64.4.34.156:1863 U D
VER 4 MSNP15
CVR 5 1.0.0000 1.0.0000 1.0.0000 http://msgr.dlservice.microsoft.com http://download.live.com/?sku=messenger
GCF 0 7019
<Policies>
<Policy type="ABCH">
<policy>
<set id="push" service="ABCH" priority="200">
      <r id="pushstorage" threshold="180000" />
    </set>
<set id="delaysup" service="ABCH" priority="150">
  <r id="whatsnew" threshold="900000" />
  <r id="whatsnew_storage_ABCH_delay" timer="900000" />
</set>
</policy>
</Policy>
<Policy type="SHIELDS">
<config>
  <shield>
    <cli maj="7" min="0" minbld="0" maxbld="9999" deny="" />
  </shield>
  <block>
    <hashes>
    </hashes>
    <regexp>
      <imtext value="cGhvdG8yMzRcLnppcA==" />
      <imtext value="aW1nMDIxXC56aXA=" />
      <imtext value="dGFueWFiYWJlXC56aXA=" />
      <imtext value="c3R1ZmZcLnppcA==" />
      <imtext value="Zm90b3NcLnppcA==" />
      <imtext value="dHVmb3Rv" />
      <imtext value="Z2V0LW1lc3Nlbmdlcg==" />
      <imtext value="Mm5udmM3" />
      <imtext value="YmxvY2tpbnJpbw==" />
      <imtext value="bWVzc2FnaW5nLW5hbWVz" />
      <imtext value="cGljdHVyYTAwMg==" />
      <imtext value="bWVzc2VuZ2VyLXNjYW4=" />
      <imtext value="c3VtbWVyMjAwOA==" />
      <imtext value="bWVzc2VuZ2VyZGVsZXRlY2hlY2tlcg==" />
      <imtext value="cGhvdG9hbGJ1bTIwMDc=" />
      <imtext value="aW1hZ2UwMjlcLnppcA==" />
      <imtext value="Zm90b183ODFcLnppcA==" />
      <imtext value="Y2hpcnN0bWFzLTIwMDdcLnppcA==" />
      <imtext value="cGhvdG8yMDA3LTEyXC56aXA=" />
      <imtext value="aW1nNS0yMDA3XC56aXA=" />
      <imtext value="bXlwaWN0dXJlcy0wMTA4XC56aXA=" />
      <imtext value="d3d3XC5la2FzdGFtb251XC5pbmZv" />
      <imtext value="d3d3XC5tc24tZnJpZW5kXC5jb20=" />
      <imtext value="d3d3XC5zb250YXJpaFwuaW5mbw==" />
      <imtext value="cGhvdG9zMS0yMDA4XC56aXA=" />
      <imtext value="aGFwcHkyMDA4XC5leGU=" />
      <imtext value="aGFwcHlfMjAwOFwuZXhl" />
      <imtext value="aGFwcHktMjAwOFwuZXhl" />
      <imtext value="bmV3X3llYXJzX2xldHRlcl9mbGFzaFwuZXhl" />
      <imtext value="d3d3XC5tc25saXN0c3RhdHVzXC5jb20=" />
      <imtext value="d3d3XC5nb2xkd2luZG9zMjAwMFwuY29t" />
      <imtext value="d3d3XC5tc253ZWJpbWFnZXNcLmNvbQ==" />
      <imtext value="d3d3XC5tYWlubXNuXC5jb20=" />
      <imtext value="d3d3XC5idXJhc2lzZW5pbnllcmluXC5pbmZv" />
      <imtext value="bWFpbm1zblwuY29t" />
      <imtext value="d3d3XC5lbXJldFwuaW5mbw==" />
      <imtext value="d3d3XC5tc25zcHlcLmV1" />
      <imtext value="bWFpbm1zblwubmV0" />
      <imtext value="aW1hZ2VzXC5pZG9ob3N0XC5jb20=" />
      <imtext value="Zm1jb25zdWx0aW5n" />
      <imtext value="bXNuZ2FsbGVyeVwubXNcLmZ1bnBpY1wuZGU=" />
      <imtext value="ZS1hZnlvbmthcmFoaXNhclwuaW5mbw==" />
      <imtext value="YWNpc2FsYXZhbnNcLmluZm8=" />
      <imtext value="YWNpbGFzdGlyXC5pbmZv" />
      <imtext value="YW1hem9uaGFsa2lcLmluZm8=" />
      <imtext value="ZWthcnNcLmluZm8=" />
      <imtext value="YmlyZXljaVwuaW5mbw==" />
      <imtext value="cmV1dHlcLmluZm8=" />
      <imtext value="cG9ydGFrYWxsaWRhdmV0XC5pbmZv" />
      <imtext value="YW1hem9uZGFrYXlib2xkdW1cLmluZm8=" />
      <imtext value="ZGFuc2FkaW1pXC5pbmZv" />
      <imtext value="dXlzYWxsaWtcLmluZm8=" />
      <imtext value="YmV6Z2lcLmluZm8=" />
      <imtext value="c3VsYW5kaXJtYQ==" />
      <imtext value="dHVuYWJhbGlnaQ==" />
      <imtext value="eW9ydW5nZXNlbA==" />
      <imtext value="dHVoYWZraW1zZQ==" />
      <imtext value="YWNpc2FsY2FwXC5pbmZv" />
      <imtext value="Ym95YW1hZ3VjdQ==" />
      <imtext value="dHV0dXNrYW5saWs=" />
      <imtext value="YWNpc2FsY2Fw" />
      <imtext value="bXNucHJvZmlsZXNcLm1zXC5mdW5waWNcLmRl" />
      <imtext value="aW1hZ2VzXC5nZXRlbmpveW1lbnRcLm5ldA==" />
      <imtext value="bXltc25nYWxsZXJ5" />
      <imtext value="ZnVucGljXC5kZQ==" />
      <imtext value="aW1hZ2UwMzFcLnppcA==" />
      <imtext value="Zm90bzcyMmE2" />
      <imtext value="cGhvdG8yMVwuemlw" />
      <imtext value="cGljdHVyZTIyXC56aXA=" />
      <imtext value="cGljdHVyZXo5MjNcLnppcA==" />
      <imtext value="cGhvdG9fNjg4LWpwZ1wuemlw" />
      <imtext value="bXlwaG90bzk0XC56aXA=" />
      <imtext value="dmlkZW9cLmV4ZQ==" />
      <imtext value="a3V6ZW5cLmV4ZQ==" />
      <imtext value="bWlyY1wuZXhl" />
      <imtext value="YmFja2Rvb3I6aXJjL2Zsb29kXC5jYw==" />
      <imtext value="Zm90b18wMjdcLnppcA==" />
      <imtext value="Zm90bzcwOGs2XC56aXA=" />
      <imtext value="bXNuYmxvY2tsaXN0XC5jb20=" />
      <imtext value="bXNuLWZyaWVuZFwuY29t" />
      <imtext value="cXVpZW50ZWFkbWl0ZVwuY29t" />
      <imtext value="Y2hlY2ttZXNzZW5nZXJcLm5ldA==" />
      <imtext value="bXNuYmxvY2tlcmxpc3RcLmNvbQ==" />
      <imtext value="bXNubGlzdHN0YXR1c1wuY29t" />
      <imtext value="ZnJpZW5kbHktb2ZmZXJcLmNvbQ==" />
      <imtext value="c2plZ2F0XC5waWNzXC5za2FxXC5pbmZv" />
      <imtext value="c2V0dXBcLmV4ZQ==" />
      <imtext value="aG9zdGlsZWFwcGxldA==" />
      <imtext value="Z3NkYWdkZmdhc2RnczI0NTc0NTIyNDdcLmV4ZQ==" />
      <imtext value="Z3NkZGFzMjQ1ODcyMTRnc2RcLmV4ZQ==" />
      <imtext value="Zm90by0zMTFfanBlZw==" />
      <imtext value="aW1hZ2UyMDZcLmpwZy13d3dcLnBob3Rvc2hhcmVcWzFdXC5jb20=" />
      <imtext value="aW1hZ2UyMDZcLmpwZw==" />
      <imtext value="YnVzaFwuY29t" />
      <imtext value="Y2FtZGFcLmV4ZQ==" />
      <imtext value="eW91dHViZV9naXJpc19wcm9ncmFtaVwuZXhl" />
      <imtext value="Y2gzY2szclwuaW5mbw==" />
      <imtext value="cjU3OWRrYTkyalwuemlw" />
      <imtext value="MjAzXC4xNTVcLjc0XC45MS9lbGliL2Jsb2cvYmxvZ1wuaHRtbA==" />
      <imtext value="aWRcLmI0bmdcLmluZm8=" />
      <imtext value="bW9uY2xvY2hlclwuY29t" />
      <imtext value="aW1hZ2Vzd2l0Y2hcLmluZm8=" />
      <imtext value="c3BsaW50ZXJcLmhvc3RpbWdzXC5pbmZv" />
      <imtext value="dWx0aW1hdGUtc3R1ZmZcLmluZm8=" />
      <imtext value="bmV3ZXN0cGljdHVyZTAzXC5qcGc=" />
      <imtext value="d3d3XC5mcmVlcGxheWxpc3RcLmluZm8=" />
      <imtext value="bm90aWNpYXNkb2JyYXNpbFwuY29tXC5zYXBvXC5wdC9ub3RpY2lhdXJnZW50ZWJyYXNpbG51bWVybzk4MjFcLmNvbQ==" />
      <imtext value="d3d3XC5ob3JueW1hdGNoZXNcLmNvbQ==" />
      <imtext value="d2luZG93c215X3Bob3Rvc18xNTMwMVwuemlw" />
      <imtext value="cGhvdG9zXzE1MzAxXC56aXA=" />
      <imtext value="d2ViY2FtZXJhNHlvdVwubmV0" />
      <imtext value="dXN1YXJpb3NcLmx5Y29zXC5lcy9saXl0cmU=" />
      <imtext value="dGhld29tYW5pemVyXC5uZXQ=" />
      <imtext value="aW1wbGF5XC5jb20=" />
      <imtext value="aW1wbGF5XC5vcmc=" />
      <imtext value="Ym9ieXVwXC5jb20=" />
      <imtext value="YWlydW5pcXVlXC5ib2J5dXBcLmNvbQ==" />
      <imtext value="Ym9iYmxha1wuY29t" />
      <imtext value="cGljcy1hdC10aGUtcGFydHlcLmNvbQ==" />
      <imtext value="Ym9iem9wXC5jb20=" />
      <imtext value="bW9vcnNoXC5jb20=" />
      <imtext value="Ym9ieXVw" />
      <imtext value="d3d3XC5teXNwY1wubmV0" />
      <imtext value="d293YmFtXC5jb20=" />
      <imtext value="Zm90b1wuZXhl" />
      <imtext value="ZHNjMjAwOTAxMTdcLmpwZ1wuZXhl" />
      <imtext value="ZnJpZW5kaW1zXC5jb20=" />
      <imtext value="bm93cG91bmRzXC5jb20=" />
      <imtext value="Y2xpcGRlZXBzXC5jb20=" />
      <imtext value="YmVpbmctc2luZ2xlXC5jb20vaW52aXRhdGlvblwucGhw" />
      <imtext value="aGVhcnRtZWJhZFwuY29tL2RhdGVcLnBocA==" />
      <imtext value="ZGlwaWV0cm8xMFwubm9ucmVjZWl2ZWRtYWlsXC5jb20vY2xpY2tcLnBocA==" />
      <imtext value="bWFrZW1leW91cmxvdmVyXC5jb20vcHVzc3lcLnBocA==" />
    </regexp>
  </block>
</config>
</Policy>
</Policies>
USR 6 SSO S MBI_KEY_OLD n1DPXrGuiTp6hWDiJNCQkLI1weGA2TJl27DlzyApfPhq2TvV0frz0v+tfbpZFHQH

這就是跟 MSN 服務器初步溝通的完整過程，整個連線到這裡是完整的一次連線。連線之後要做甚麼呢？上述從 MSN 服務器拿回來的資料，其實就是跟帳號有關的資訊，不過需要解碼而已。

其實，無論你要做甚麼樣的動作，其實都得透過 Command 來達成，只有某些特定的資料取得，是需要透過 SOAP 來抓取，詳細的資料可以參考這裡：

這些較為特殊的 SOAP 是需要比較特別的方式去處理，不然其他的動作其實都是透過 Command 來完成的。以上，就是 MSN 服務連線的粗淺介紹。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[php tech.] MSN Bot step by step part 1 SSO HOWTO

2009-07-02T11:33:45+08:00

網路上有現成的 class 可以使用，請參閱：phpmsnclass V1.8，這是他的 Google Code。現成的類別很方便使用，所以在這裡就不多說關於類別的事情，我這邊從 protocol 開始，也許有人會覺得繁瑣，不過，就當作是我自己筆記用的好了，關於 MSN protocol 可以參考這裡：http://msnpiki.msnfanatic.com/index.php/Main_Page

首先，我們先從 SSO（Single Sign-On）說起。我們利用 php 的 curl 函式，將我們所要做的認證送給 MSN 伺服器。關於 SSO 所需要傳送的 XML 規格，可以參考這裡：http://msnpiki.msnfanatic.com/index.php/MSNP15:SSO 由 SSO 的狀況我們可以知道，總共有 RST0 ~ RST7 等八種狀態的 Ticket Token，分別是：

RST0：Passport.net 認證。
RST1：Messenger Live 認證。
RST2：MSN Messenger 認證。
RST3：MSN 聯絡人清單認證。
RST4：Messenger Live OIM 離線訊息認證。
RST5：Live Spaces 認證。
RST6：Live 聯絡人清單認證。
RST7：Live Storage 認證。

以上這個順序是依照 SSO 的清單所列出來的，這些順序資料跟現成的 Class 並不太相同，當然，順序是可以自己修改的，所以也不一定是這種序列，這裡只是提出來說明，關於 SSO 可以傳送並取得的 token 有這些。至於傳送的方式，我用第一個 Passport.net 認證舉例，他是這麼寫的：

<?php
    $userid = ''; // 你的帳號
    $password = ''; // 你的密碼

    $XML = '<?xml version="1.0" encoding="UTF-8"?>
<Envelope xmlns="http://schemas.xmlsoap.org/soap/envelope/"
          xmlns:wsse="http://schemas.xmlsoap.org/ws/2003/06/secext"
          xmlns:saml="urn:oasis:names:tc:SAML:1.0:assertion"
          xmlns:wsp="http://schemas.xmlsoap.org/ws/2002/12/policy"
          xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd"
          xmlns:wsa="http://schemas.xmlsoap.org/ws/2004/03/addressing"
          xmlns:wssc="http://schemas.xmlsoap.org/ws/2004/04/sc"
          xmlns:wst="http://schemas.xmlsoap.org/ws/2004/04/trust">
<Header>
  <ps:AuthInfo xmlns:ps="http://schemas.microsoft.com/Passport/SoapServices/PPCRL" Id="PPAuthInfo">
    <ps:HostingApp>{7108E71A-9926-4FCB-BCC9-9A9D3F32E423}</ps:HostingApp>
    <ps:BinaryVersion>4</ps:BinaryVersion>
    <ps:UIVersion>1</ps:UIVersion>
    <ps:Cookies></ps:Cookies>
    <ps:RequestParams>AQAAAAIAAABsYwQAAAAxMDMz</ps:RequestParams>
  </ps:AuthInfo>
  <wsse:Security>
    <wsse:UsernameToken Id="user">
      <wsse:Username>'.$userid.'</wsse:Username>
      <wsse:Password>'.$password.'</wsse:Password>
    </wsse:UsernameToken>
  </wsse:Security>
</Header>
<Body>
  <ps:RequestMultipleSecurityTokens xmlns:ps="http://schemas.microsoft.com/Passport/SoapServices/PPCRL" Id="RSTS">
    <wst:RequestSecurityToken Id="RST0">
      <wst:RequestType>http://schemas.xmlsoap.org/ws/2004/04/security/trust/Issue</wst:RequestType>
      <wsp:AppliesTo>
        <wsa:EndpointReference>
          <wsa:Address>http://Passport.NET/tb</wsa:Address>
        </wsa:EndpointReference>
      </wsp:AppliesTo>
    </wst:RequestSecurityToken>
  </ps:RequestMultipleSecurityTokens>
</Body>
</Envelope>';
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, 'https://login.live.com/RST.srf');
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $XML);
    $data = curl_exec($curl);
    curl_close($curl);
    $fp = fopen('./test.log', 'a+');
    if ($fp) {
        fputs($fp, $data);
        fclose($fp);
    }
?>

直接運行之後，他會產生一個叫做 test.log 的檔案，那個檔案就是 MSN 伺服器所返回的資料。至於他會返回些甚麼呢？我這邊舉兩個例子，一個是返回認證失敗的內容，另一個則是返回認證成功的內容。

<?xml version="1.0" encoding="utf-8" ?>
<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" xmlns:wsse="http://schemas.xmlsoap.org/ws/2003/06/secext" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:psf="http://schemas.microsoft.com/Passport/SoapServices/SOAPFault">
<S:Header>
<psf:pp xmlns:psf="http://schemas.microsoft.com/Passport/SoapServices/SOAPFault">
<psf:serverVersion>1</psf:serverVersion>
<psf:authstate>0x80048800</psf:authstate>
<psf:reqstatus>0x80048820</psf:reqstatus>
<psf:serverInfo Path="Live1" RollingUpgradeState="ExclusiveNew" LocVersion="0" ServerTime="2009-07-02T02:28:07Z">BAYIDSLGN1K12 2009.05.08.01.28.02</psf:serverInfo>
<psf:cookies/>
<psf:response/>
</psf:pp>
</S:Header>
<S:Fault>
<faultcode>S:Client</faultcode>
<faultstring>Invalid Request</faultstring>
</S:Fault>
</S:Envelope>

這是返回失敗的例子，注意到他有 <faultcode> 的返回項目，代表著你傳送的資料有錯誤。

<?xml version="1.0" encoding="utf-8" ?>
<S:Envelope xmlns:S="http://schemas.xmlsoap.org/soap/envelope/">
<S:Header>
<psf:pp xmlns:psf="http://schemas.microsoft.com/Passport/SoapServices/SOAPFault">
<psf:serverVersion>1</psf:serverVersion>
<psf:PUID>0003BFFD93BB0005</psf:PUID>
<psf:configVersion>6.0.11409.0</psf:configVersion>
<psf:uiVersion>3.100.2179.0</psf:uiVersion>
<psf:authstate>0x48803</psf:authstate>
<psf:reqstatus>0x0</psf:reqstatus>
<psf:serverInfo Path="Live1" RollingUpgradeState="ExclusiveNew" LocVersion="0" ServerTime="2009-07-02T02:28:51Z">BAYIDSLGN1S18 2009.05.08.01.28.02</psf:serverInfo>
<psf:cookies/>
<psf:browserCookies>
<psf:browserCookie Name="MH" URL="http://www.msn.com">MH=MSFT; path=/; domain=.msn.com; expires=Wed, 30-Dec-2037 16:00:00 GMT</psf:browserCookie>
<psf:browserCookie Name="MHW" URL="http://www.msn.com">MHW=; path=/; domain=.msn.com; expires=Thu, 30-Oct-1980 16:00:00 GMT</psf:browserCookie>
<psf:browserCookie Name="MH" URL="http://www.live.com">MH=MSFT; path=/; domain=.live.com; expires=Wed, 30-Dec-2037 16:00:00 GMT</psf:browserCookie>
<psf:browserCookie Name="MHW" URL="http://www.live.com">MHW=; path=/; domain=.live.com; expires=Thu, 30-Oct-1980 16:00:00 GMT</psf:browserCookie>
</psf:browserCookies>
<psf:credProperties>
<psf:credProperty Name="MainBrandID">MSFT</psf:credProperty>
<psf:credProperty Name="BrandIDList">
</psf:credProperty>
<psf:credProperty Name="IsWinLiveUser">false</psf:credProperty>
<psf:credProperty Name="CID">e75f7fe32aea2838</psf:credProperty>
<psf:credProperty Name="AuthMembername">bot1@hinablue.me</psf:credProperty>
</psf:credProperties>
<psf:extProperties>
<psf:extProperty Name="ANON" Expiry="Mon, 18-Jan-2010 10:28:51 GMT" Domains="bing.com;atdmt.com" IgnoreRememberMe="false">A=AC09B2815155B5C33BA3E160FFFFFFFF&amp;E=88d&amp;W=1</psf:extProperty>
<psf:extProperty Name="NAP" Expiry="Sat, 10-Oct-2009 09:28:51 GMT" Domains="bing.com;atdmt.com" IgnoreRememberMe="false">V=1.9&amp;E=833&amp;C=iruWWhJxoXnSMAY9Xbla_KEevr9BKN2iBGAXwaBzpLkBfOohtiiAYg&amp;W=1</psf:extProperty>
<psf:extProperty Name="LastUsedCredType">1</psf:extProperty>
</psf:extProperties>
<psf:response/>
</psf:pp>
</S:Header>
<S:Body>
<wst:RequestSecurityTokenResponseCollection xmlns:S="http://schemas.xmlsoap.org/soap/envelope/" xmlns:wst="http://schemas.xmlsoap.org/ws/2004/04/trust" xmlns:wsse="http://schemas.xmlsoap.org/ws/2003/06/secext" xmlns:wsu="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd" xmlns:saml="urn:oasis:names:tc:SAML:1.0:assertion" xmlns:wsp="http://schemas.xmlsoap.org/ws/2002/12/policy" xmlns:psf="http://schemas.microsoft.com/Passport/SoapServices/SOAPFault">
<wst:RequestSecurityTokenResponse>
<wst:TokenType>urn:passport:legacy</wst:TokenType>
<wsp:AppliesTo xmlns:wsa="http://schemas.xmlsoap.org/ws/2004/03/addressing">
<wsa:EndpointReference>
<wsa:Address>http://Passport.NET/tb</wsa:Address>
</wsa:EndpointReference>
</wsp:AppliesTo>
<wst:LifeTime>
<wsu:Created>2009-07-02T02:28:51Z</wsu:Created>
<wsu:Expires>2009-07-03T02:28:51Z</wsu:Expires>
</wst:LifeTime>
<wst:RequestedSecurityToken>
<EncryptedData xmlns="http://www.w3.org/2001/04/xmlenc#" Id="BinaryDAToken0" Type="http://www.w3.org/2001/04/xmlenc#Element">
<EncryptionMethod Algorithm="http://www.w3.org/2001/04/xmlenc#tripledes-cbc">
</EncryptionMethod>
<ds:KeyInfo xmlns:ds="http://www.w3.org/2000/09/xmldsig#">
<ds:KeyName>http://Passport.NET/STS</ds:KeyName>
</ds:KeyInfo>
<CipherData>
<CipherValue>ATcwZCPTlRTD4abiB7sCiS/9oQTlN+Zd3Z1X/Umfr42gJ6PPSiDP7CBqvDMIB+rfUeENFM2ksp03CojxKV2HH1UrLpqhA1D5rgnEFhNZWQxRpoWlFUo21FMzP2j01w12aFPrvvIJrex7E+BKdWoKEymOeGctKYS0xf6bd6JzCDvtBtEeUd5GQatYCRXrhRU7214/udW0yw+y+Mx6VnRdAYoPAm+jap8HsMbTEQB7u3X6Odcz2wuZB6/8GByvbqLaOwR0jcYNyOiMvUeXZYa6A3b19xFHfQGsNYARVuYkSp748NVwMloBsnWElRW3ynvujzWMTeBPRsCxW+oYCfrCrslR+t9d/Di8vmW5AbAnmLQni0reLW/qmPZwY8u5FuvWmIedIUA7Hs7Yf3Z6dNOHjypPBl5Ml7AJxjCqDbZraUqEaUMiemjw+JQ/W/4JpMsZ3pPhYcQDJRv9sjDaZFcFwQbZYmnoCKebpmiZetkJthAmaTahOezHBl13NHsz</CipherValue>
</CipherData>
</EncryptedData>
</wst:RequestedSecurityToken>
<wst:RequestedTokenReference>
<wsse:KeyIdentifier ValueType="urn:passport">
</wsse:KeyIdentifier>
<wsse:Reference URI="#BinaryDAToken0">
</wsse:Reference>
</wst:RequestedTokenReference>
<wst:RequestedProofToken>
<wst:BinarySecret>mnJ+1QLiTC4SLDgLZI5bz+J6qZbwTBlr</wst:BinarySecret>
</wst:RequestedProofToken>
</wst:RequestSecurityTokenResponse>
</wst:RequestSecurityTokenResponseCollection>
</S:Body>
</S:Envelope>

這是返回成功的例子，留意，它返回了 <wst:BinarySecret> 的部分，就是我們所需要的 Token 資料。另外，並不是每一種返回都會是 <wst:BinarySecret>，而是 Passport 比較特別，其餘的 protocol 都是返回 <wsse\:BinarySecurityToken ...> 這種形式，所以在取用上會略有不同。

所以當我們依照上述的順序來傳送所有的資料，並取回 token 的時候，利用正規表示式將這些 Token 分別取出來，那麼他們的順序如下：

Passport.net / MSN Messanger 認證。
Passport.net / MSN Messanger 認證（Binary Secret）。
MSN Messanger 認證。
Messanger 聯絡人認證。
MSN Messanger OIM 離線訊息認證。
Live Spaces 認證。
Live 聯絡人清單認證。
Live Storage 認證。

以上，是對於 SSO 的簡單介紹。下一篇我將簡單介紹一下如何與 MSN 伺服器做連線溝通。

附註：還有更強大的 .net 套件，請拜：http://code.google.com/p/msnp-sharp/

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 阿嘉的家，晚安國境之南

2009-06-30T15:56:02+08:00

歸途的路上特別繞去了海角七號著名景點，阿嘉的家，還真多人在拍照啊！

女友說，這個郵筒，很燙！

我也來有礙觀瞻一下！

從阿嘉的家走路大概 10 分鐘，會到著名景點，西門。

就是這個門，就是這個門！

回到屏東了，夕陽西下！

這是假色溫（笑）。

晚安，墾丁，晚安，國境之南。

附上阿嘉的家的地圖。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 路過，船帆石

2009-06-30T14:06:52+08:00

路過船帆石！其實是為了去 7-11 買東西。

船帆石，大家應該都看過。

就是要買這個啦，墾丁限定版！

這個全台灣都買得到。

曬啊曬，太陽超大。

要來玩喔！

船帆石應該也不用附上地圖了，打完收工（混）。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 冒煙的喬

2009-06-30T13:54:10+08:00

睡到自然醒之後，吃飯吃飯吃飯！

打完收工！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 晚餐，大街上

2009-06-30T13:52:45+08:00

推完海浪之後，跑去吃海產，吃完就去壓馬路了！

入夜了！

這一間海產店人超多，無敵多，超級無敵多，還不給預約，只能現場排隊。

我等了三台遊覽車放完人才拍到的門口。

吃飯囉！

人很多的墾丁大街（這次去還好，還沒有交通管制）。

攤子上買的證件夾，鍊子是老闆送的喔！

朋友的彩繪刺青，可以維持七天。

在大街上還可以遇到同事，我只能說，這是天生有緣啦（哈哈哈）。

偷偷跑去玩橘月的鞦韆。

去年住的民宿，愛情海，門口整個修整過了！

海產地圖奉上，在大光附近，因為招牌很大，不難找啦！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 後壁湖，星沙灣

2009-07-01T09:48:35+08:00

這次要尋訪的私房景點，星砂灣，其實確切的地點跟我們去的地點只差一點點而已。所以真正的地點我就不在部落格上面放送了，我都已經把後壁湖寫出來了，應該不會不難找才是。

後壁湖那邊也是有海上活動的，人沒有南灣那麼擠，那麼多，但是缺點就是，沒有大沙灘。

水非常乾淨，這裡的沙都是貝殼沙。

超迷你的螃蟹。

派大星，你瘦了！

後壁湖港口。

燈塔附近有人在拍婚紗！

這裡雖然很靠近港口，但是海水沒有甚麼奇怪的味道，很乾淨，也沒有很重的海水鹹味，很妙！

來玩水吧！

快滅頂啦~~~

天氣就是這麼的好！

後壁湖港口。

地圖，嗯，好啦，關山那一帶如果拐錯彎是會鬼打牆出不去的（親身經歷）

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 我在墾丁，天氣晴 - 海生館

2009-06-30T13:20:41+08:00

原本以為會遇到颱風，不過到了屏東之後，天氣好到一個不可思議的地步。國境之南的風還是一樣燙人，陽光毒辣的程度沒甚麼改變，雖然在這裡住了四年，不過對於這種會熱死人的溫度，還是不太習慣。早上五點多就醒來，不知道是不是開夜車的關係，雖然凌晨兩點半多到屏東，不過卻睡不著。早上到海生館的時候，剛好十點半，剛好小白鯨餵食秀開始，沒趕上，殘念。

海生館，門口的大水池，總覺得好像有改變（的樣子）。

海底隧道，白平衡調過了，不然人是藍色的（笑）。

可愛的小丑魚。

紀念品店，海生館真的超多紀念品店的。

鸚鵡螺。

看鏡頭的海豹。

大型水藻池，不過之前聽新聞說，水藻健康狀況好像不是很好。

企鵝館。

只有這隻企鵝在游泳，其他的全部漂在水上搶鏡頭。

休息區的椅子，這應該是新的吧，是冰塊的形狀。

又是紀念品店。

上次來沒買的企鵝背包，這次一樣也沒買（哈）。

超像 TOSHIBA 那隻吉祥物 Pala 將的玩偶，大隻的要價 790 台票。

手偶玩偶，這個也是超可愛的！

換我拿好像就沒那麼可愛了說

小白鯨！

最後補一張，海底總動員裡面的那隻，很健忘的多莉。

地圖，我想應該，不太需要吧。

另外推薦一個私房景點，關山古早味燒鹹粿！快的話大概下午三點就會賣完了（應該），運氣好的話一直到傍晚都還會有，所以要去的趁早。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[jQuery tech.] paging flip with jQuery

2009-06-26T14:53:22+08:00

update, fixed IE 8 Sucks!

問題點：jQuery 1.3.2 的核心 1061 行，關於 attribute 的設定。

在 DOM 中，倘若有一個很正常的 Tag，若是這個 Tag 所擁有的 attribute 不存在，或是 CSS 設定的屬性質不存在，或是返回 NaN，則在 IE 中會出現＂引數不正確＂的錯誤訊息，特別是在 CSS 的設定中，並不容易察覺。

div.classA {
margin: 0 auto;
padding: 2px 2px;
}

這是一個 classA 的 CSS 設定，倘若我使用 parseInt($(".classA").css("margin-left")); 的話，在 IE 瀏覽器中就會返回 NaN 這樣的訊息，而 Firefox 瀏覽器則返回 0 這個數字，而當返回 NaN 之後，往後有使用到這個數值的程序便會出錯。

看來，jQuery 在存取 CSS 上面，還是存在著不同瀏覽器返回不同結果的問題啊。

更新，本來想寫成 prototype 但是想想還是算了。使用方法就是這樣而已：

$(document).ready( function() {
    pagingFlipInit({width: 400, height: 300});
});

可以指定要翻頁的寬度跟高度。至於 CSS 設定除了 paging-flip-box 與 masker 相關的設定之外，大多都可以修改，不過改壞了我一概不負責。基本上你可以修改 paging-flip-box 的 width 設定，這項設定是可以依據你的整個 container 的寬度來做修改，或是跟 container 一樣（通常會小個 10px）。除了 paging-flip-box 的 width 設定之外，在 CSS 檔案中只有 paging-flip-box 這行以上可以修改，其他的倘若改壞了我一概不負責。

不要問我為什麼！有興趣的人可以自己研究。畫面大概是這樣：

檔案在這裡：

pagingflip_20090626.zip

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[非關影像] 午餐隨記

2009-06-22T17:32:01+08:00

老實說，我忘記這家店叫做甚麼名字了，所以改天想起來再補。

串珠與餐桌，老實說有時候覺得這串珠還挺煩人的。

餐桌上的燈。

等開飯。

另一個圓形的座位，蠻妙的。

雖然只有四個鍋子，不過位子還算大。

另外一個四人座位。

佐料區。

串珠垂幕。

我們桌子外面有黑色的線圍成的垂幕。

標準配料，主餐點的肉片與鯛魚爾等還沒送上來。

打完收工，不會有人想看我們吃吧

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 週末鶯歌三峽半日遊

2009-06-21T11:00:02+08:00

閒閒沒事，為了躲颱風（誤）所以週末出門到處亂走亂晃，先到鶯歌的阿婆壽司吃早午餐。

一整個份量超多的關東煮。

最後沒吃完帶回家當消夜的壽司。

假睫毛是我黏的

人蠻多的，這是一樓外帶服務區！

鶯歌老街超冷清的！

古早味的冬瓜茶！

超冰超好呵！

賣小時候糖果的小店。

鶯歌老街一整個快速逛完，準備前往三峽老街。

到三峽老街買完便宜的涼鞋之後，第一件事情，吃冰！

涼啊涼啊涼，涼啊涼！

等位子，天氣熱吃冰的人超多！

剛買的小盆栽，特價 95 元喔！鶯歌老街賣 100 元！

本照片傷眼，如有後遺症本人一概不負責！

假睫毛是我黏的（編按：剛剛說過了）。

大口吃冰！綜合水果冰不錯吃喔！

躺在樹叢裡睡覺的貓，睡的超熟！

回程之後去了師大、公館、樂華三個夜市，回家試裝新衣服！

新衣試裝！

這一件其實是我的。

打完收工！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[非關影像] 夏天啊

2009-06-17T22:28:06+08:00

夏天啊！

其實我是要分享這個東西的，快笑死我了！原作在此

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[CSS 3 tech.] CSS3 template layout module and multi background with jQuery

2009-06-11T15:47:17+08:00

開始之前，底下是參考文件：

如果你看完了，覺得可以理解，那麼這一篇文章你就可以跳過了

CSS 3 的 Template Layout Module 特異功能！

雖然說 CSS3 跟 HTML5 一樣還沒正式發表，發表時間也是遙遙無期，不過，當我看完 Template Layout Module 之後，我深深的覺得，所謂的網頁設計這個工作，真的在 CSS3 與 HTML5 發表之後，會產生甚麼樣的變化呢？我想起之前工作時，跟大陸的工程師聊過的一些事情。在大陸做網路這一塊，分了好多種專門的職位，當然，對台灣的老闆市場來說，這是不合成本的做法。不過，所謂術業有專攻，我還是覺得，我比較羨慕大陸那樣各司其職的做法就是。

如果有看過上面的 CSS Template layout module demo，那麼我們繼續看下去。

CSS3 在這個模組裡，重新定義了 display 這個屬性，並且新增了 ::slot 這個擬似元件（pseudo-elements），另外增加了一個專用的單位＂gr＂。暫且先不提這兩個新增的屬性值跟單位，我們先來看看被改寫的 display 有了甚麼樣的特異功能。

可定義行、列、內文區域位置。
可定義每一行、列寬度，最大、最小寬度（高度）。
可用萬用字元（*）自動取得寬度（高度）。
可用點（.）插入一個區隔行、列的空白區塊。

另外，新的擬似類別 ::slot 與新的單位 gr 能做什麼呢？

可用 ::slot 直接指定每一區塊的各別的 Styling 設定。
在已經定義的 display 中，gr 代表了行與列的 grid line 位置，元件可以利用 n x m 的 grid-line 來定義新的位置，這個單位在目前的 jQuery plugin 並沒有被實作出來。

我們繼續回到 display 這個屬性，我這裡直接使用範例來說明。

body { 
    margin: 0;
    padding: 0;    
    display:    ".hhh." /10em
                ".nnn." /5em
                ".ocp." 
                ".fff."
    * 100px minmax(500px,800px) 12em *
    ;
    width: 100%;
    background: #DDF;   
}

以上就是 CSS3 的寫法，他做了甚麼事情呢，我們繼續看下去。

".hhh." /10em
"空白名為 h 的區塊名為 h 的區塊名為 h 的區塊空白" /高度限定 10em
".nnn." /5em
"空白名為 n 的區塊名為 n 的區塊名為 n 的區塊空白" /高度限定 5em
".ocp."
"空白名為 o 的區塊名為 c 的區塊名為 p 的區塊空白"
".fff."
"空白名為 f 的區塊名為 f 的區塊名為 f 的區塊空白"

眼尖的人或許發現了，這就跟畫表格是一樣的道理。我用表格畫出了一個田字型的區域，然後把需要的內容擺進去，這就是這個新定義的 display 屬性在做的事情。那你或許會有疑問：

為什麼 ".ocp." 跟 ".fff." 沒有限制高度？
因為這兩個區塊是依照內容變動長度，所以一旦限定高度，內容並不會被截斷，而是直接破格。
高度設定可不可以跳過 ".ocp."，直接指定給 ".fff."？
可以，但是目前這個 jQuery plugin 會識別錯誤，不過可以在最後加入 "." 不設定高度避開。
已經定義好的區塊可否改變位置？
可以，使用擬似元素 ::slot 來做其他 CSS Styling 設定。
區塊是否可以跨行？
不行，CSS 會無法得知正確位置而產生顯示錯誤（但邏輯上不會有錯）。

指定好了區塊之後，接著我們要將 HTML 文件中的元素＂放到＂我們的位置上。

#header { position: h; text-align: center; }

#content { 
    position: c;
    margin: .5em;
}

#nav1 { 
    position: n;
    background: #AAD;
    margin: 0;
    padding: .5em;
}

#nav2 { position: o }

#nav3 { 
    position: p;
    text-align: center;
}

#footer { 
    position: f; 
    text-align: center;
    font-weight: bold;
}

利用新規範的 position 屬性，我們可以將元件的位置給＂指定＂到 display 的設定中。

那如果我要改某個區塊的設定的時候怎麼辦？這時候就使用新的擬似元件 ::slot 來指定。

body::slot(o) {
    background: #FDD;
}
body::slot(p) {
    background: #DFD;
    vertical-align: middle;
}

如果要改變位置？做法也是一樣的，利用 ::slot 來對指定的區塊做 position 的設定即可。

如此一來，我們的 HTML 檔案完全不需要做複雜的排版，只要輸出時確認確切的位置，其他的全部都可以交給 CSS3 的 Template Layout Module 來做。當然，好的視覺設計不可少，對於這樣來做 layout 的方式，設計輸出可能就必須要更精準且更能夠掌控自己所切出來的區塊與元素，否則，這樣的工具再怎麼強大也是白搭。

關於 CSS3 的部分，畢竟還在起草階段，就不說太多了。這個 Template Layout module 剛好有人寫了 jQuery plugin，所以算是可以小小應用的部分，至於好不好用就端看個人了。我覺得拿來做一些惡趣味應用應該是不錯的（啥）！

接著，來說說 CSS Multiple, Layed backgrounds with jQuery 這個小東西，有去過網站的應該知道他在做甚麼了。這個 jQuery plugin 的目的，就是把一大堆 background 元件給拼湊起來。就有點類似我之前講過的這個部分：

現在我要說，上面這個做法，還有另一個神兵：jQuery。

這個 jQuery plugin 可以利用 CSS 的設定完美的解決這個問題。當然，CSS3 也有 multiple Background 的新鼠性設定，不過目前能夠正常支援的瀏覽器時在少得可憐，也許利用這個 jQuery plugin 也不失為一個好辦法。不然，這樣的元件切割，最少要使用 9 個 DIV 來切割，複雜一點的恐怕就更麻煩，也徒增 HTML code 的麻煩與困擾（而且困擾的都是工程師）。這個 plugin 應該可以包成比較方便使用的模組（應該說對自己比較方便的模組吧），改天在上來分享（如果我真的有去改的話）。

就降，散會！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 老鏡遊九份

2009-06-10T17:43:22+08:00

Canon 40D with Canon EF 20-35 f/2.8L, picture Style RVP-100F。

上次，同一個角度，不同的鏡頭。

這次，完全沒有人。

沒人真好！

老街全部都是觀光客，香港人，日本人居冠！

這個叫做＂巴菲小公主的凝望＂XD XD XD

鑰匙圈。

大頭狗模式！

因為沒人，所以可以跟熊拍個爽。

打完收工（啥）！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。