Planet

html5

header
ナビゲーション補助や紹介を含むグループ

nav
他ページやページ内リンクのグループ。全てのリンクグループがこれである必要はない。
重要なメニューなどに。

aside
周りと少しだけ関連性のある要素。よくサイドバーとして使われる。
あとは注釈やtipsなど。

article
内容がページやサイトから独立した要素。フォーラムの1つの投稿、ブログでの1つのエントリ。

とりあえず
http://dev.w3.org/html5/spec/Overview.html#the-body-element-0

クエリ付きRewriteRule

hoge.php?id=11
を
/hoge/11.html
にリダイレクトする（URL書き換えではなく、リダイレクト）

RewriteEngine on

RewriteCond %{QUERY_STRING} id=(\d+)
RewriteRule ^hoge.php /hoge/%1.html? [R=301,L]

普通にリダイレクトしようとしても、クエリの部分は適用されない。
そこで利用するのが RewriteCond になる。
%{QUERY_STRING} でクエリ部分を指定して、リダイレクト先で　%1 とか %2　で呼び出す。

html? の？はクエリを付加しないことを示す。
これがないと
/hoge/11.html?id=11
とかクエリが末尾についてくる

RewriteCond %{QUERY_STING} p=(\d+)&y=([0-9]{4})&m=([0-9]{1,2}).*
RewriteRule ^s/[d|m|q] /s/p%1/%2/%3? [R=301,L]

php.ini エラー

エラーレベルを厳しく

error_reporting = E_ALL | E_STRICT
display_errors = On

射影変換

http://www.teu.ac.jp/clab/kondo/research/cadcgtext/Chap5/Chap503.html

<?php
$img = imagecreatefrompng("sample.png");

$width = imagesx($img);
$height = imagesy($img);
$new = imagecreatetruecolor($width, $height);

for($y = 0; $y < $height; $y++){
    for($x = 0; $x < $width; $x++) {

        $rgb = imagecolorat($img, $x, $y);
        $r = ($rgb >> 16) & 0xFF;
        $g = ($rgb >> 8) & 0xFF;
        $b = $rgb & 0xFF;

        $_x = $x - $width / 2;
        $_y = $height / 2 - $y;
        $xx = 250 * $_x / (5 * $_y + 400);
        $yy = 250 * $_y / (5 * $_y + 400);
        //$xx = (($arr[0] * $x) + ($arr[1] * $y) + $arr[2]) / (($arr[6] * $x) + ($arr[7] * $y) + 1);
        //$yy = (($arr[3] * $x) + ($arr[4] * $y) + $arr[5]) / (($arr[6] * $x) + ($arr[7] + $y) + 1);
        //$xx = floor($xx);
        //$yy = floor($yy);
        $xx += $width / 2;
        $yy = $height / 2 - $yy;
        imagesetpixel($new, $xx, $yy, imagecolorresolve($img, $r, $g, $b));

        //echo "($_x, $_y) -> ($xx, $yy)<br/>";
    }
}

imagejpeg($new, "out.jpg", 100);

?>

台形補間。
f と c0 は画像サイズよりも大きくとる。
f < c0 で角度のついた変換が可能。その逆ではあふぃん変換に近くなる。
b0 をおおきくとると歪曲が強くなる。射影変換の特徴が強くでる。

付箋的なことを

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="yui/yahoo-dom-event/yahoo-dom-event.js"></script>
        <script type="text/javascript" src="yui/dragdrop/dragdrop-min.js"></script>
        <script type="text/javascript">
        //<![CDATA[
        YAHOO.util.Event.addListener(window, "load", loadFunc);
        YAHOO.util.Event.addListener(document, "dblclick", clickFunc);

        var panel_num = 0;
        var panels = [];
        var depth = 0;

        function loadFunc() {
            var dd1 = new YAHOO.util.DD("dd1");
            var target = new YAHOO.util.DDTarget("target");

            dd1.onDragDrop = function(event, id) {
                YAHOO.util.Dom.get("target").innerHTML += event + "," + id + "<br/>";
            }
            //dd1.setHandleElId("handle");
            // x方向への制限(0, 640)px step by 10px
            dd1.setXConstraint(0, 640, 10);
            dd1.setYConstraint(0, 480, 10);
        }

        function clickFunc() {
            if(panel_num >= 5) {
                alert("これ以上は作成できません");
                return;
            }
            var panel_name = "panel" + panel_num;
            var ele = document.createElement("div");
            ele.id = panel_name;
            YAHOO.util.Dom.addClass(ele,"memoWrapper");
            document.body.appendChild(ele);
            var eleh = document.createElement("div");
            eleh.id = "h" + panel_name;
            YAHOO.util.Dom.addClass(eleh,"handler");
            YAHOO.util.Dom.get(panel_name).appendChild(eleh);
            YAHOO.util.Dom.get("h" + panel_name).innerHTML = "Memo" + panel_num;
            var elet = document.createElement("textarea");
            YAHOO.util.Dom.get(panel_name).appendChild(elet);

            panels[panel_num] = new YAHOO.util.DD(panel_name);
            panels[panel_num].setHandleElId("h" + panel_name);

            var x = Math.random() * 640;
            var y = Math.random() * 480;
            YAHOO.util.Dom.setXY(panel_name, [x, y], true);


            panels[panel_num].startDrag = function() {
                YAHOO.util.Dom.setStyle(panel_name, "z-index", depth++);
            }

            depth = panel_num++;

        }
        //]]>
        </script>
        <style type="text/css">
            textarea {
                width: 180px;
                height: 9em;
                overflow: auto;
            }
            .memoWrapper {
                width: 190px;
                height: 11em;
                text-align: center;
                border: 1px solid #ddd;
            }
            .handler {
                height: 24px;
                color: #FFF;
                background: url(images/red.gif)
            }
        </style>
    </head>
    <body>

    </body>
</html>

tab menu

tabmenuをつくる。
orientation でタブの方向を決める。

element script はなくても動く模様。

javascript + XML

ハマッったのでメモ。

読み込むXML

<?xml version="1.0" encoding="utf-8" ?>
<person-list>
<person><name>shinji</name><age>14</age><sex>male</sex></person>
<person><name>asuka</name><age>14</age><sex>famale</sex></person>
<person><name>rei</name><age>14</age><sex>famale</sex></person>
</person-list>

HTML + JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript">
        //<![CDATA[
            // ----------------------------------------------------
            // HTTP通信オブジェクト生成メソッド
            // @param checkFunc : リクエスト・レスポンス状態監視コールバック
            // ----------------------------------------------------
            function createXMLHttpObj(checkFunc) {
                var httpObj;
                try {
                    // IE以外
                    httpObj = new XMLHttpRequest();
                }
                catch(e) {
                    try {
                        // IE6以上
                        httpObj = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                    catch(e) {
                        try {
                            // IE5以下
                            httpObj = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch(e) {
                            // その他
                            return null;
                        }
                    }
                }
                // コールバック登録
                if(httpObj) {
                    httpObj.onreadystatechange = checkFunc;
                }
                return httpObj;
            }

            var httpObj = createXMLHttpObj(checkState);

            function setListener(obj, type, func) {
                if(obj.attachEvent) {
                    obj.attachEvent("on" + type, func);
                }
                else if(obj.addEventListener) {
                    obj.addEventListener(type, func, false);
                }
            }

            setListener(window, "load", loadFunc);
            function loadFunc() {
                var btn = document.textform.btn;
                setListener(btn, "click", clickFunc);
            }

            function clickFunc(){
            if (httpObj) {
                httpObj.open("GET", "test.xml?" + new Date().getTime(), true);
                httpObj.send(null);
            }
        }

            function checkState() {
                if(httpObj.readyState == 4 && httpObj.status == 200) {
                    var xmlData = httpObj.responseXML;

                    var person = xmlData.getElementsByTagName("person");
                    var text = "";
                    for(var i = 0; i < person.length; i++) {
                        var childNum = person[i].childNodes.length;

                        for(var j = 0; j < childNum; j ++) {
                            console.log(j);
                            text += person[i].childNodes[j].nodeName + ":" + person[i].childNodes[j].firstChild.nodeValue + "\n";
                        }

                    }
                    document.textform.text.value = text;
                }
                else {
                    document.textform.text.value = "Now Loading...";
                }
            }

        //]]>
        </script>
    </head>
    <body>
        <form name="textform">
            <input type="button" name="btn" value="Read" />
            <input type="reset" value="Reset" /><br />
            <textarea name="text" style="width: 40em; height: 5em;"></textarea>
        </form>
    </body>
</html>

同じくハマってた方　http://liosk.blog103.fc2.com/blog-entry-34.html
ここを見て解決。

Firefoxで DOMをなぞってみても null とかでてくるが、どうやら空白が原因らしい。

一万二千年の恋

で，出回っているらしい．
CMで人気が出たらしいですが

本当は

「創聖のアクエリオン」

ですからー

それにしても
菅野さんはいつもよい曲を作られる．

GoogleMapApi -マーカー＆吹き出し-

ある地点にマーカーをつけます．
マーカーをつけるには，addOverlay()を使用．
マーカー自体を作成するために，GMarker()で座標値を引数にマーカーを作成．

map.addOverlay(new GMarker(経度, 緯度));

前回，吹き出しは
map.openInfoWindow()だった．

openInfoWindowをmapに対して指定していたのを，
マーカーに指定する，らしい．

なので，マーカーは入れ子にしないで別に宣言する．

var mark = new GMarker(lat, lng);
map.addOverlay(mark);

で，クリックイベント中の map -> mark

イベントリスナ自体もmarkに設定する．
GEvent.addListener(mark, 'click',function(){ });
つづきはこちら

GoogleMapApi -吹き出しその2-

前回の吹き出しを改良

一回閉じると再読み込みしない限り現れない吹き出しさん，
クリック毎に吹き出しを呼び出すのじゃー

by Geekなページさんより

    GEvent.addListener(map, 'click', function(overlay, point) {
      if (point) {
        map.openInfoWindow(point,
             document.createTextNode("クリックしないでってば"));
      }

でリスナーを登録してマウスクリックを感知．
あとはopenInfoWindowで文字を表示．
つづきはこちら