ホームページについての日記

このページについて

このページは、JavaScript+PHPで作っている「ホームページについての日記」をHTML版に直したページです。

GoogleYahooなどの検索エンジンに拾われてもかまわない内容だけを書いてます。検索エンジンに拾われたく内容は書いてません。

最新のページはあるていど項目別にわかれてます。

2010年12月28日
JSON2を使って、JavaScriptのオブジェクトをJSON形式に変換しているのだが、ブラウザによって変換できない場合があった。
IE8は、EVENTオブジェクトを含んだオブジェクトを変換するとエラーになります。
WebKitは、EVENTオブジェクト、DOMオブジェクトを含んだオブジェクトを変換するとエラーになります。
Fxは、両方含んでいても大丈夫です。
OPERAはチェックするのを忘れてました。
全てのブラウザに対応するためには、文字列しか格納されてないオブジェクトを使うしかないことになります。
変換できない場合、空白にしてもらいたいなぁ。
2010年12月20日
HTML5にはiframeを利用した「クロスドキュメントメッセージ」なるのもがある。ってことは昨日書いた。自分で作ったモジュールのサンプルも公開した。実際にそのサンプルで「アクセスログ」と「掲示板もどき」を作ってみた。
ロード時の処理
  1. geoのホームページ内にあるiframeに、コメント情報を取得、ribbonに送るためのイベントを設定する。
  2. 送信ボタンに、上記のイベントを起動するイベントを設定する。
  3. geoのホームページからiframe経由でribbonのmessageイベントに、リファラとロケーションの情報をJavaScriptに送りつける。
  4. ribbonのJavaScriptは、コメントを読み込むPHPよりコメント情報を読み出し、geoのJavaScriptにコメント情報を渡す。
  5. ribbonのJavaScriptは、アクセスログを記録するPHPに情報を渡しアクセスログを記録する。
  6. geoのJavaScriptは、送られてきたコメント情報を所定の位置に表示する。
送信ボタンが押された場合
  1. ボタンが押されたら、ロード時iframeに設定されたイベントを起動して、ribbonのmessageイベントに、コメントの情報をJavaScriptに送りつける。
  2. ribbonのJavaScriptは、コメント記録し新たにPHPよりコメント情報を読み出し、geoのJavaScriptにコメント情報を渡す。
  3. geoのJavaScriptは、送られてきたコメント情報を所定の位置に表示する。
上記のような処理をしている。geoはサーバー言語が使えないのだが、あたかもサーバー言語が使えているように見えるわけだ。
FxとWebKitは完璧に、IE8は限定的に使えている。Operaは使えたりダメだったりしていている。
なんか、新たなサービスが出てきそうなかんじがする。
2010年12月20日
HTML5にはiframeを利用した「クロスドキュメントメッセージ」なるのもがある。
function CDM_Module() {
  function CDM_Send(CDMdata) {
    var iframenode = ElementObject.Tag("iframe");
    for (ifrcnt=0; ifrcnt<iframenode.length; ifrcnt  ){
      if(lastIndex(iframenode[ifrcnt],CDMdata.AttrVal,CDMdata.AttrName)) {
        var iframe = window.frames[ifrcnt];
        iframe.postMessage(CDMdata.DATA, CDMdata.URL);
      }
    }
  }
  CDM_Module.prototype.Send = CDM_Send;

  function CDM_Send_Check(evt_obj) {
    var CDMessageCK = new Object();
    CDMessageCK.origin = evt_obj.origin;
    CDMessageCK.data = evt_obj.data;
    if(lastIndex(CDMessageCK.data,'Receive Data')) {
      CDMessageCK.Check = true;
    } else {
      CDMessageCK.Check = false;
    }
    return CDMessageCK;
  }
  CDM_Module.prototype.SendCheck = CDM_Send_Check;

  function CDM_Receive(evt_obj) {
    var CDMessage = new Object();
    CDMessage.origin = evt_obj.origin;
    CDMessage.data = evt_obj.data;
    if (!CDMessage.origin) {
      CDMessage.Check = false;
    } else {
      CDMessage.Check = true;
    }
    return CDMessage;
  }
  CDM_Module.prototype.Receive = CDM_Receive;
	
  function CDM_Receive_Check(evt_obj, RS_Data) {
    if (!evt_obj.data) {
      evt_obj.source.postMessage("No Data", evt_obj.origin);
    } else {
      var RSM_Data = "Receive Data,"   RS_Data;
      evt_obj.source.postMessage(RSM_Data, evt_obj.origin);
    }
  }
  CDM_Module.prototype.ReceiveCheck = CDM_Receive_Check;
}
CDM_Module.prototype = new CDM_Module();
「CDM_Module.Send」は指定のiframe要素で指定したページの「messageイベント」に、テキストデータを投げるモジュールです。
「CDM_Module.SendCheck」データを受け取ったJavaScriptが返事を返した場合に返事をうけとるモジュールです。
「CDM_Module.Receive」は、「messageイベント」に投げられた、テキストデータを受け取るモジュールです。
「CDM_Module.ReceiveCheck」は、「messageイベント」に返事をするモジュールです。
このモジュールがフルで動くブラウザはFx,WebKitです。IE8が「messageイベント」に返事を受け取りません。
ほかのブラウザは動きません。object.xxxxxでデータを渡そうとすると失敗したりします。
2010年12月14日
Webユーザビリティランキング|トライベック・ストラテジー独自の基準で評価しているのだが、個人的に「どうなの?」と思うことがある。
上位にランクしているページで、行動ターゲティングの広告のサービスを使っているページがある。ようするにクッキーなどを使って、閲覧した人のページ情報を集めて広告を表示したりするサービスです。
  1. 「行動ターゲティングサービス」を利用しているページにいく
  2. cookieを取得して、その中身のIDが「行動ターゲティングサービス」に存在しているのか確認する
  3. 存在していれば、ページ情報を溜める。なければ、新規でcookieを書き込む
  4. 同じ「行動ターゲティングサービス」を利用している、別のページにいく
  5. cookieを取得して、その中身のIDが「行動ターゲティングサービス」に存在しているのか確認する
  6. 存在していれば、ページ情報を溜める。なければ、新規でcookieを書き込む
このようににして、cookieの中身が同じ「利用者」の嗜好データが蓄積されていく。IPアドレスと関連すれば、企業名や所在地が特定できる場合がある。場合によっては市町村まで特定できる場合もある。
法的に違法ではない。サービスの一環といえばその通りである。しかし、機器のMACアドレスと関連つけられた場合、まれに「自宅付近」が特定できてしう場合があり、最悪自宅が特定されてしまう。そうなると、「あそこに住んでいる人は○○好き」だという、個人情報に「近しい情報」が流出する可能性が極々低い確立で存在しているのである。
有名な企業がそのようなサービスを使用するのならば、「使用の明記をする」ことが、ユーザーに対する配慮だと感じる。10位中2社に「行動ターゲティングサービス」を使用しており、使用についての記述が見つけられなかった。
mixiでは「行動ターゲティングサービス」の使用を明記している。それが、正しいユーザーに対する配慮だと感じる。
トライベック・ストラテジー株式会社の基準も配慮が不足していると感じる。
2010年12月13日
「PHP 5では、未定義のクラス/インターフェイスを使用しようとした時に 自動的にコールされる __autoload 関数を定義することができます。」だそうだ。
function __autoload($className) {
  $directory = array('a', 'b', 'c', 'd');
  $ChangeName = array('class名' => 'PHPファイル名', 'class名' => 'PHPファイル名');
  while(list ($key, $val) = each($ChangeName)) {
    if (ereg($key, $className)) {
      $className = $val;
      break;
    }
  }
  $iRowCount = count($directory);
  for($icnt = 0; $icnt < $iRowCount; $icnt  ){
    $IncFileName = '../' .$directory[$icnt]. '/'.$className.'.php';
    if (file_exists($IncFileName)) {
      include_once($IncFileName);
      break;
    }
  }
}
new で指定したClass名が、__autoloadに引数として渡される。extendsしているClassは名前をextends元に直さないといけない。$ChangeNameを使い、連想配列で変換するようにする。
classファイルを複数のディレクトリーに入れてるので、$directoryに必要な名前を格納して、ファイルがあればインクルードするようにする。
こうすれば、PHPのはじめにこのPHPファイルをincludeすれば他のincludeはいらなくなる。
便利である。
2010年12月2日
WebKitとXSLTの組み合わせの検索が多い。XSLTは仕様書通りに書けば、xml-stylesheetでXMLに適応させれば動くはずなので割愛。JavaScriptのXSLTProcessorに対応してみた。
XSLTProcessorのオブジェクトは、WebKitでもサポートしている。document.implementation.createDocumentで、xmlファイルをload出来ないのが問題だった。document.implementation.createDocumentを使わなければ出来るはずである。
function xml_XSLTProcessor(xmlhttp,xslt_url,xslt_sub){
  var xmlDoc = xmlhttp.responseXML;
  try {
        var xslt = new XSLTProcessor();
        var xslthttp = new window.XMLHttpRequest();
        xslthttp.open("GET",xslt_url,false);
        xslthttp.send(null);
        var xsltDoc = xslthttp.responseXML;
        xslt.importStylesheet(xsltDoc);
        // XMLをXSLTでDOM変換
        var doc =  xslt.transformToFragment(xmlDoc, document);
        if (!doc) {
            alert("代替XSLT");
            var subxslt = new XSLTProcessor();
            var subxslthttp = new window.XMLHttpRequest();
            subxslthttp.open("GET",xslt_sub,false);
            subxslthttp.send(null);
            var subxsltDoc = subxslthttp.responseXML;
            subxslt.importStylesheet(subxsltDoc);
            var doc =  subxslt.transformToFragment(xmlDoc, document);
        }
        return doc;
      }
      catch (e) {
        try {
             xslt = new ActiveXObject("MSXML.DOMDocument");
             xslt.async = false;
             xslt.load(xslt_url);
             var doc = xmlDoc.transformNode(xslt);
             return doc;
            }
            catch (e2) {
                         var doc = "";
                         alert("XSLTが動くブラウザでどうぞ");
                         return doc;
           }
      }
}
ところが、ひとつ問題がある。WebKitは、XSLTをincludeするとimportStylesheetできなくなるというバグがある。致命的なバグです。XSLTをモジュールみたいに管理していたのだが、それが出来ない。
いまのところ、日本語XMLの変換にしか使ってないので日本語XMLのXSLTのみを適応させるようにした。将来困るかもしれない。
2010年に釣れた魚で使ってます。
2010年12月1日
XML文書の検索ワードで目についたことについてちょっとコメントします。

8ポンド ライン フロロ[google-Capture.xml(Mac OS X 10_6_4-Safari/533.17.8)]

捕まえ方のXML文書にあります。私のメインに使っているラインは4ポンドナイロン+8ポンドフロロなので、そこにヒットしたと思われます。

「8ポンド ライン フロロ」は、防波堤や河口のチョイ投げで万能な仕掛けができあがります。

扁平な頭 魚[google-sakana_data.xml(Mac OS X 10_6_4-Safari/533.18.5)]

「扁平な頭」といえばマゴチのことです。

albifrons 意味[google-bird_data.xml(Windows NT 6.1-Chrome/6.0.472.63)]

「頭部が白い」という意味。マガン」の学名。

防波堤 粘膜 トゲ[google-habit.xml(Windows NT 6.0-Chrome/7.0.517.41)]

動物の習性・形体のXML文書を検索していますが、該当する生物は存在しません。

ソイ+ナマズで検索されていると思われます。

ホオジロ フランス語[google-bird_data.xml(Mac OS X 10_5_8-Safari/533.18.5)]

ホオジロのフランス語は分かりません。シラサギの「フランス語」と「ホオジロ」を検索していると思います。

タモロコのカロリー[Yahoo-habit.xml]

動物の習性・形体のXML文書を検索していますが、「タモロコ」とオオハクチョウの「あまりカロリーが高い食べ物を与えると太って飛べなくなるから、決まった餌を与えてくださいと注意される場合がある。」で検索されている。

飼育下で他の生物が捕食した場合のカロリーなのか、自分で食べた場合のカロリーなのかは不明。

まぁ、どちらにしても「的外れ」な答えしかでてこないはず。

イクシオトキシン[google-habit.xml]

ウナギの毒です。ちゃんと検索されてます。

2010年12月1日
検索ワードで目についたことについてちょっとコメントします。

Chrome XML XSL おかしい(Namoroka/3.6.13pre)

自分の環境ではおかしいと訴えたくなるような現象はありません。WebKit-SafariでXSLTですが。

そんなことより、「Namoroka」を常用してChromeの情報を拾う人のほうがになる。

webkit 要素 位置 取得(Chrome/7.0.517.41)

offset-leftとoffset-topを取得してください。目的の要素の表示位置を求めるoffset~あたりで書いてあります。

基本的に、どのブラウザでも同じように取得できてます。

appendChild バグ webkit(Chrome/7.0.517.24)

createElement(タグ名)で作成したDOMをappendChildはできますが、XMLHTTPRequest等で中身がちゃんと作ってあるDOMオブジェクトをappendChildすると失敗します。

そんな時はinnerHTMLを使います。appendChildは追記なのですが、innerHTMLは上書きですので注意が必要です。

php xsltprocessor サーバ生成(MSIE 6.0)

PHP 5は「xsltprocessor()」を、configureに引数 「with-xsl[=DIR]」 を追加するだけで使えるそうです。

XMLを変換するPHP-Classでサンプルはあるのでそっちを見てください。

そんなことより、トヨタ自動車株式会社がIE6を使っていることに驚いた。企業がIE8を使うのはいったいいつなのでしょう。

ie8 ホームページ 文字数(MSIE 8.0)

ホームページの文字数とは、なんのことを指すのか分らない。titleならば、短くインパクトがあるようにするし、要約ならそれなりの長さが必要だし。

コンテンツの横の文字数。で横の文字数を調べてみたことがある。 どうも、あまり長いと読みにくくなるものらしい。

ブラウザに限らず考えたほうがよいと思う。

ul li float メニュー 一枚絵(Firefox/3.6.12)

「メニューをリスト要素でマークアップして、floatで段組」、までは理解できるのですが「一枚絵」がわからない。

普通に「一枚絵」を使いメニューを作るなら、img要素とmap要素,area要素,a要素でマークアップするのが本筋です。その他では、SVGにJavaScriptでメニューを作る。FLASHで作る。などあります。

「一枚絵」が「イラストレイターなどで部品を作って組み立て直す。」ことを指すのであれば、HTMLの話ではなくCSSの話です。floatだけでは上手くいかないので、margin,border,paddingなどの指定が必要です。

CSS3では、boxレイアウトができたりします。CSS2.1以上に専門的になります。今のうちから使ってみることをお勧めします。

イワシの料理がboxレイアウトです。

svg xlink href js OPERA(Opera/9.80)

XMLのリンク言語がXLinkになります。従って、SVGに限らずXMLでリンクをするための言語です。最新のOperaでも使えます。

XLinkについては、拡張されたXMLのリンク言語:XLinkで詳しく説明してます。

それでは、「SVGのXLinkはどうなっているのか?」と疑問を持ちます。DTDを見ればわかります。%XLINK.pfx;type ( simple ) #FIXED 'simple'となっているのでsimpleしか使えません。

XLink:typeがsimpleなら、属性はhref,role,arcrole,title,show,actuate がoptionで使えます。

SVGのXLinkについては、Document Structure - SVG 1.1 - 20030114にあるので参考にしてください。

XLinkの実装は、ソフトによって違います。自分で確かめてみましょう。XMLデータによる図鑑で使っていいます。

IE8 Microsoft.XMLDOM 動かない(MSIE 6.0)

xslt = new ActiveXObject("Microsoft.XMLDOM");では、IE8は動いてます。

XMLHttpRequestを使いたいのならば、まずwindow.XMLHttpRequestが動かない場合、ActiveXObjectを指定しましょう。その場合はMSXML.DOMDocumentを使うべきです。

Microsoft.XMLDOMは、サポート中止のオブジェクトなので、使わないでください。MSXML.DOMDocumentは、IE6~動きます。

しかし、IE6でサポート中止したオブジェクトでIE8が動かないって検索する「あなたは変です。」

それとも、会社がIE6指定なのですか?

img offsetWidth 標準準拠(Chrome/8.0.552.210)

あまりにも当たり前のことなので記述していなかったが、offset~読み取りだけです。

変更したいのなら、別の手段を使いましょう。

offset~は、自身のmargin,border,padding,width,heightに、offsetparentが関係します。関係をよく知ることが大切です。

2010年11月19日
HTML5のMicrodataの実際にマークアップしてみた。
<div itemscope itemtype="http://www.geocities.jp/sendaituri/owl/fncmjp.xml#">
<h2>仕掛け</h2>
<dl>
<dt><a href="#turisi"><span  id="ts1" itemprop="釣り">堤防からの探釣り</span></a></dt>
<dd><dfn id="systs1" itemprop="仕掛け">セイゴ針12号、ハリス2号、サルカン、錘ナツメ3号程度、道糸3号</dfn>
の仕掛けです。
竿は、<dfn id="rodts1" itemprop="釣り竿">2m~2.7mの軽め竿。スピニングリール2000番程度</dfn>を使ってます。
ポイントは根がガンガンあるので、根掛必至です。
餌は、<dfn id="dects1" itemprop="釣り餌">イソメ、エラコ。ルアーは3インチ程度のワーム。</dfn>
丁寧に底を探っていきます。アタリは竿をあおってから着底までにでやすいです。</dd>
<dt>堤防からのちょい投げ</dt>
<dd>あまりやりませんが、錘10号の捨て錘仕掛けで狙ってます。</dd>
<dt><a href="#turisi"><span  id="ts2" itemprop="釣り">ルアー釣り</span></a></dt>
<dd>堤防直下のエグレを狙う場合は、
<dfn id="systs2" itemprop="仕掛け">1/32ジグヘッド、ラインは4ポンドラインにフロロ6ポンドラインを直結</dfn>
してます。竿は、
<dfn id="rodts2" itemprop="釣り竿">6ft程度の1/32のジグが扱えるロッド。スピニングリール1000番程度。</dfn>
<dfn id="dects2" itemprop="釣り餌">ワームもそれに見合った小さいサイズ</dfn>
を使います。ワームは岸壁から離れないように落とします。
アタリがあったらすかさず、竿を前にだします。そうでないと、ラインブレイクします。</dd>
<dt class="brfp"><a href="#turisi"><span  id="ts3" itemprop="釣り">ヘチ沿いを狙う</span></a></dt>
<dd>ヘチ沿いの底を狙う場合は、水深5mくらいの場所なら、
<dfn id="dects3" itemprop="釣り餌">ブラー、スプーンが有効です。ジグヘッドなら軽い錘でゆっくり誘う</dfn>、
<dfn id="rodts3" itemprop="釣り竿">ロッドもそれに合わせた短めの竿>/dfn>、
<dfn id="systs3" itemprop="仕掛け">ラインは、根ずれを考えて、フロロを長めにつければよい>/dfn>と思います。</dd>
</dl>
dt要素の語句をクラスの語彙を指定して、そのdt要素に対応するdd要素に、dfn要素を使ってdt要素の中に指定したクラスのプロパティを記述します。そうすると、HTMLからメタデータが拾えるようになります。
たとえば、上の例からいえば、
<釣り rdf:id="堤防からの探釣り">
	<仕掛け>セイゴ針12号、ハリス2号、サルカン、錘ナツメ3号程度、道糸3号</仕掛け>
	<釣り竿>2m~2.7mの軽め竿。スピニングリール2000番程度</釣り竿>
	<釣り餌>イソメ、エラコ。ルアーは3インチ程度のワーム</釣り餌>
</釣り>
<釣り rdf:id="ヘチ沿いを狙う">
	<仕掛け>1/32ジグヘッド、ラインは4ポンドラインにフロロ6ポンドラインを直結</仕掛け>
	<釣り竿>6ft程度の1/32のジグが扱えるロッド。スピニングリール1000番程度。</釣り竿>
	<釣り餌>ワームもそれに見合った小さいサイズ</釣り餌>
</釣り>
<釣り rdf:id="ルアー釣り">
	<釣り餌>ブラー、スプーンが有効です。ジグヘッドなら軽い錘でゆっくり誘う</釣り餌>
	<釣り竿>ロッドもそれに合わせた短めの竿</釣り竿>
	<仕掛け>ラインは、根ずれを考えて、フロロを長めにつければよい</仕掛け>
</釣り>
みたいな感じでデータが取得できると思います。
実際には、itemtype="http://www.geocities.jp/sendaituri/owl/fncmjp.xml#で指定した、OWLを認識できないと、クラスなのか、プロパティなのか、判別できないので技術的には難しいのかなと思います。
HTMLの要素とMicrodataを使えば、HTML文書のコンテンツにメタデータの記述をしやすくなるとは思います。それでも個人が自由にとなると名前空間が出た時点で敷居が高いと思います。
メタデータの記述自体が誰でも簡単にといかないものなのだろう。
2010年11月12日
「Googole のモバイル検索で見つかった頁にアクセスすると、Google がプロクシのような役割をする。」らしい
それはよいのだが、Accesslog_Write.jsをGETしないで読み込んでいる。正確には、1回目はGETする。2回目以降GETしないのである。そのおかげでlogが残らない。server_logを確認してわかったことなのだ。
何故そんなことをするのだろうか?logを残したくないならアクセスしなければ良い。と言う訳で、74.125.で始まるアドレスは、0.0~255.255までGoogleなので、アクセス拒否にしました。
ちなみに、こんな痕跡を残します。Mozilla/5.0 (en-us) AppleWebKit/525.13 (KHTML, like Gecko; Google Web Preview) Version/3.1 Safari/525.13です。最新のSafariはAppleWebKit/533.18.1なのでかなり古い感じがします。ChromeだってAppleWebKit/534.7です。
こんな古いWebKitで解析されたら、私のXMLHttpRequestのページはちゃんと表示しないかのしれない。
2010年11月11日
ページのプレビューを画像で表示してくれるサービス「Instant Previews」がスタートした。自分のページがどの程度見れるのか、気になって試してみた。
HTML5 CSS3のページはちゃんと表示します。
XMLをPHPで変換してXMLHttpRequestで受信して表示しているページは、表示しているが酷い。
  • 同じパターンでHTMLのLINK要素の内容で目次を変えるようにしているのに、全て同じ内容の目次になっている。
  • 目次が選択されているが、コメントはちゃんと取得されているのに、コンテンツが表示されず目次が表示される。
  • xml-stylesheetでHTMLに変更しているページには未対応。
  • なぜか、「なんとなく趣味のページ-ブログ風」は目次も出さない。
JavaScriptでXSLTProcessor()で変換しているページは未対応
普通にブラウザで表示できているページの表示が上手くいかないのは、GoogleでJavaScript等をキャシュして、そのスクリプトでページのサムネイルを作っているからか?その場合、基本となるのは、WebKitなのか?
JavaScriptで構成したページがキャシュできるってことかもすれない。
2010年11月10日
Googleで自分のページを検索したら、おかしなことに気づいた。
これは Google に保存されている http://musimusi.g.ribbon.to/diary/2010diary.html のキャッシュです。 このページは 2010年10月18日 15:24:11 GMT に取得されたものです。 そのため、このページの最新版でない場合があります。とある。なのに記事は2010年8月27が最新になっている。
検索結果では、2010年10月3日: simplexmlでXMLの要素を消す命令がない。 appendできるなら消す方法もあるだろうと思い探すが見つからない。 ...... となっていて、ちゃんと10月の記事で検索がヒットしている。
10月の記事でヒットさせるなら、キャッシュも10月のキャッシュにしろよ。なんでキャッシュは9月なんだ。
ちゃんとしてください
2010年11月8日
MicroformatsのHTML版みたいな感じがするMicrodataなのだが、どちらも正式な仕様ではないらしい。
Microformatsって何者ってひとが多いと思うのでちょっと説明。MicroformatsはHTMLの属性を使って、メタ情報を記述しようとした仕様です。rel属性やclass属性を使います。HTML4系のHTMLに対応させるためか、記述が難しく普及しているとは思えない。名前空間を使おうとおもったら、接頭辞を使ったり(普通はそうなのだが)ちょっと面倒な仕様(XML的な書き方は個人的には好感を持てるのですが)になってます。
それに対して、Microdataはitemscope itemtype="名前空間URL"でよいらしい。その要素の子要素はその名前空間の要素になるらしい。「デフォルト名前空間」みたいな使い方です。複数の名前空間は規定してないらしい。その分簡単な訳です。Googleは名前空間を指定した分には対応しているらしい。対応するなら自分で指定した名前空間以外も認識してデータを取得してほしいと思う。
せっかくなので、「なんとなく趣味のページ」の魚の観察を、XML語彙を日本語で定義したOWLがあるので、そのOWLでマークアップしてみた。「日本人なら日本語で」でXML文書を作ってたりしているのでその続きです。
そのうえ、Custom Data Attributeなんてものも用意せれてたりします。独自属性には先頭に必ず「data-」をつけなさいだそうです。この属性の値はDOMからも取得できるとあります。
HTMLにメタ情報を記述する方法が3つ。その他にRDF/XMLまである。仕様通りに個人が自由に指定した情報を取得できるなら、意味があると思うのだが、検索エンジンが指定したものだけとかでは、あまりにお粗末だと感じる。
CSSで属性セレクタと組み合わせてデザインなんかも出来そうなので、HTMLの仕様でもよいのかなぁ。微妙だなぁ。
2010年11月4日
画像表示用のXMLをXSLTで変換して、画像と説明をつけている。魚の場合捕獲した状況にあわせた説明も表示している。
  1. XMLには魚の名前と、その魚の説明があるURLを記述してある。まずは、XSLTで対象の魚の基礎データを変換する。
  2. 基礎データの中から、対象の魚の生態を記述した文書から、対象の魚の生態データを変換する。
  3. 画像表示用のXMLに、魚の捕獲した状況が記述してあり、基礎データに同じ捕獲方法がある場合、捕獲方法のデータも変換する。
そんな感じのXSLTが指定してある。
ところが、魚の捕獲した状況が記述してあり、基礎データに同じ捕獲方法があるにもかかわらず、説明を表示しない。
しょうがないので、XSLTを見直した。そしたら間違っている場所を発見した。「基礎データに捕獲方法がある」場合処理をするのつもりで、「基礎データに捕獲方法が2つ以上あった場合」処理になっていた。
test="count(捕獲方法) &gt; 0と書かなくてならないところを、test="count(捕獲方法) &gt; 1となっていた。これでは2個以上ないと反応しない。XSLTでDOMオブジェクトを使うと、1からカウントするので、勘違いしたみたいです。
XSLTは、判定にtestしか使えないから、true判定しか出来ない。falseの判定をするには、chooseを上手く使う必要がある。
慣れれば簡単かもしれないが、以外に悩ましい。
2010年11月2日
10月のブラウザアクセスをまとめてみた。
  1. IE:42%
  2. Fx:34%
  3. WebKit:22%
  4. opea:2%
IEが減ってます。釣りのページにくる人の減少とWebに対する検索が増えたためです。
IEは
  1. IE6:3%
  2. IE7:24%
  3. IE8:15%
となってます。閲覧する人が少ないのでその時の状況によって大きくかわります。
WebKitはChromeが多かったです。10月はWindowsOSが多かったためでしょう。
10月はIEが50%を割り込みました。Webに対する検索が増えた、釣りにたいするアクセスが減ったのが要因です。この傾向は来年暖かくなるまで続くとおもいます。
2010年11月1日
検索ワードで目についたことについてちょっとコメントします。

dl dt dd グリッドレイアウト(MSIE 6.0)

htmlとCSSの区別はつけましょう。dl要素は「定義リスト」で、dt要素で「定義される用語」、dd要素で「用語の解説」を記述します。htmlは文書の構造を表すものなのでレイアウトはできないのです。

レイアウトならCSSでしょう。CSS3ならば意外と簡単にグリッドレイアウトが作れます。しかし、floatでさえ満足に使えないIE6で、「グリッドレイアウト」なんて無理です。

なんとなく趣味のページで、CSS3のcolumnやdisplay:boxを使ったレイアウトをやってますので、CSS3対応のブラウザで覗いてみてください。

dc:date xml chrome(Firefox/3.6.10)

chromeは、接頭辞付きのDOMをgetElementsByTagNameが出来ないらしい。getElementsByTagNameNS("名前空間","要素")で取得する。

私はxmlの変換をJavaScriptではやらない。ブラウザで違いがあるからです。XMLにXSLTスタイルをつけるか、PHPでXML変換をしたほうが、手間が少なくなり簡単です。

FOAF 普及(Chrome/7.0.517.24)

「Dublin Core」とあわせて使うと大半のWebにあるものがRDFで表せるとおもいます。

「FOAF」とは、Friend of a Friend-メタデータによる知人ネットワークの表現。と説明されてます。友達の友達……といった具合にデータを連鎖させる語彙です。

FOAFでは、「人」を表すクラス以外のクラスがあり、便利なのです。主な語彙では

foaf:Agent
エージェント(人間、グループ、ソフトウェア、人工物など)
foaf:Person
人物。存命中、故人、あるいは想像上の人物であっても、「人」を表すクラス。
foaf:Organization
組織。会社、協会など、社会的なfoaf:Agentをあらわす
foaf:Group
グループ。個々のfoaf:Agentの集合体で、それ自身もfoaf:Agentとみなすことができる
foaf:Project
プロジェクト。公式なプロジェクトであっても、個人的なものでもよい
foaf:Document
文書。広い意味での文書で、画像(foaf:Image)も文書のサブクラスとして捉える
foaf:Image
画像(ファイル)。foaf:Documentのサブクラスとしての画像で、JPEG、PNG、SVGなどのデジタル画像、写真が代表的

これに、多々あるプロパティと「Dublin Core」を使うことで大抵のことは表現できてしまいます。

js html5 canvas 文字描写(Chrome/7.0.517.41)

canvasで文字を使いたい場合fillTextを使えばよい。2008年5月にhtml5.jpで話題になっているので、そんなに目新しいことでわない。

Canvasにテキストを描画するText APIが追加されるを見て自分で実験してみるのがよろしい。

canvasの実装はブラウザによってまちまちです。

list($key, $val) each(Firefox/3.6.11)

PHPで連想配列を使う場合によく示される例です。

PHPの連想配列でちょっと説明していま。

JavaScriptとは違います。

java IE8 リファラが取れない(Chrome/7.0.517.41)

javaに限らず、7月の目に付いた検索ワードで書きましたが、IE8では別windowでページを開いた場合リファラが取れないはずです。

Javaに限らず、リファラの情報は、httpのヘッダーの情報から取得するので、送ってこないと取得できません。

もしかしたら、IE8ではあたらしいタブで開いてもリファラが取れないかもしれません。

IE gradation table border(Chrome/6.0.472.63)

IEにgradationを求めてはいけません。あなたは間違いをしています。

読み込めなかったら xml if(Firefox/3.6.11)

PHPの場合
if(simplexml_load_file(XML_File名))if ($xml->load(XML_File名))でturuでなければ、「読み込めない」と判断してます。
JavaScriptの場合
XMLHttpRequestオブジェクトを作って、onreadystatechangeプロパティを使います。readyStateが"4"(処理終了)で、statusが200(OK)の場合のみ処理します。
サーバーでアクセス過多などの障害が発生している場合、readyStateが"4"(処理終了)で、statusが5(サーバエラー)を返したりします。XMLHttpRequestオブジェクトをloadプロパティで動作した場合、readyStateが"4"(処理終了)で、statusが200(OK)以外、処理しなくなり、レスポンスエラーがわかりにくくなります。

PHPとJavaScript以外で本格的にXMLを使ってないので他の言語はわかりません。

SimpleXMLElement rdf dc:date(Chrome/7.0.517.41)

SimpleXMLでデフォルト名前空間と違う接頭辞を扱う場合、対象の名前空間を指定してあげる必要があります。

addChild
('dc:date', $StrDate,'http://purl.org/dc/elements/1.1/');
addAttribute
('dc:date', '$StrDate,'http://purl.org/dc/elements/1.1/');
children
('http://purl.org/dc/elements/1.1/');

上記のようにして、取得・追加します。取得だけでそのオブジェクトに追加をしないなら、Xpathを使うこともできます。

  1. registerXPathNamespace('dc', 'http://purl.org/dc/elements/1.1/');で名前空間を指定
  2. xpath('//dc:dete');で取得

Xpathで取得したオブジェクトに、addChildしようとしたら上手くいかなかったことがあるので注意が必要です。

SimpleXML 関数に詳しくのっています。

firefox javascript location 動かない(Firefox/3.6.10)

locationが動かないのは、大抵の場合JavaScriptの作り方が悪いものです。自分が期待した動きをしないと「動かない」と決め付けてしまう場合が多々あります。

location.href()はIEしか動かない等々、IEとFxとWebKitとOperaでは、どこかしらが違っています。動かないと決め付けるより、動かす努力をしましょう。

offsetwidth chrome safari(MSIE 8.0)

WebKitが違うのではなくIEが他のブラウザと違うと思ってます。

offsetWidth
borderの左端から右端の長さ
clientWidth
borderの内側の長さ
offsetLeft
offsetparentのborderの内側から自分のテキストを表示する領域の左端
offsetTop
offsetparentのborderの内側から自分のテキストを表示する領域の上

上記のように認識してます。margin,border,paddingの扱いの違いによって計算方法が変わってしまうので、offsetを使う場合は、margin,padingは0にborderも小さい値にしています。

operaは、offsetLeft,offsetTopの基準が他のブラウザと違いますので注意が必要です。

2010年10月26日
Googleは一所懸命XMLデータを持っていくのだが、中の解析をあまりちゃんとしていないように見える。
SVGを変更して、title要素とdesc要素、それとmetadata要素をつけてみたのだが、どうやら、title要素はタイトルと認識しているらしい。htmlもtitle要素をタイトルとするので、そのロジックでデータが取れているだけと判断。
text要素、title要素、desc要素の中身としての文字は取得するが、metadata要素のなかにあるrdf:Description要素の属性としてある文字データはすっきりと無視。要素として使うdc:dateの中身は識別するのだが、属性としてしまうと無視する。
htmlの解析のロジックでXMLを取得しているだけだと見える。取得したデータが日付形式なら日付、HTTPからはじまっていれば、他文書へのリンクと判断しているだけで、XMLを解析しているわけではないみたいです。
う~ん、ガッカリ
2010年10月7日
9月のブラウザアクセスをまとめてみた。
  1. IE:56%
  2. Fx:22%
  3. WebKit:18%
  4. opea:2%
Fxが減って、IEが増えました。といっても分母が小さいのであまりあてにならない。
IEは
  1. IE6:12%
  2. IE7:22%
  3. IE8:22%
となってます。前回はIE6を蹴っていたことが判明したのでIE6対応したらIE6が増えました。
IE6の使用はそろそろやめてほしいよなぁ。
WebKitはMacがSafari、windowsがChromeと棲み分けができてきています。
IE8が増えてきている。これは、IEユーザーでいろいろ困っている人がいるからです。
WebKitは相変わらず、XSLTで困っているみたいです。
2010年10月3日
simplexmlでXMLの要素を消す命令がない。
appendできるなら消す方法もあるだろうと思い探すが見つからない。検索してみると、unsetすればよいとありました。
unsetは指定した変数を破棄する命令で、XMLの要素もオブジェクトなのでこれで消せるらしい。
やってみるとちゃんと消える。こんな方法もあるのだなと関心する。
2010年10月2日
接頭辞が違うXMLの要素や属性を追加する方法がわからなくて困った。
xmlnsで指定したURLを与えてあげれば追加できることに気づかず困っていた。
間抜けな話である。
今度は、接頭辞が違う属性の中身を直す必要が出てきた。xpathで取得したのでは上手く変更が出来ず、simplexmlの記述をしなくてはならないらしい。
探してもなかなか見つからない。あるページに、namespaceを指定したattributeで取得できると書いてあった。これ幸いと取得すると出来る。取得できれば変更も可能なのでこれで終了。
簡単な記述なのですがわからないと凄くこまります。
2010年10月1日
検索ワードで目についたことについてちょっとコメントします。

webkit initEvent(Firefox/3.6.8)

initEventはDOM2 Eventで勧告されているので、最新のGecko,AppleWebKit,Prestoを使ったブラウザなら同じ指定で使えます。

initEventはEventを初期化するものでdispatchEventでEventを発生させる場合の初期化等に使用します。

IE8-は、DOMの勧告に完全には従ってないのでinitEventは使えませんので注意が必要です。

KeyboardEventは、FxがDOM3に対応しているので記述方法が違います。OperaはKeyboardEventが動きません。

あまり参考にできませんが、EVENT管理のサンプルを参照してみてください。

get Referer safari3(MSIE 6.0)

アクセログを見る限り、Refererはちゃんと取れてます。

そんなことよりIE6はやめましょう。企業がいつまでもIE6を使うのは関心できません。

javascript location.search キャッシュ 変わってしまう(MSIE 6.0)

location.searchは、URLの?部分の後ろを取得を取得するので、キャッシュとは関係ないと思います。

このページは、URLを変化させないでページ情報を変えるので、URLの情報はあまり当てになりません。そんなページもあります。

画像 等間隔 flex(MSIE 7.0)

画像の大きさ、出力する画面の大きさなどで変わるので、画面と画像の大きさで変わるようにする必要があります。

画像の大きさにかかわらず左右のマージンを統一はCSSで可能ですが、倍以上サイズの違う画像を上手く並べるのはCSSだけでは無理なので、 HTMLやCSSを動的変える必要があります。

私はめんどうなのでやりません。

img width height スクロールできない 読み込み(MSIE 7.0)

img要素に、width属性やheight属性が指定してあり、それより大きい画像を出力しようとした場合にスクロールしたいのなら、overflow: scroll;の指定をします。

Windowに横スクロールを出すのは、デザイン的にも感心できないので、横スクロールが出ないようにしたほうがよいでしょう。

IE8でテーブルの書き換え後消える javascript append(MSIE 8.0)

IE7-では、tbody要素をかかないと、appendChild出来ない仕様のはずですが、IE8から書かなくて良いように仕様が変更されていると聞きました。

IE7-では、tbody要素をかかないと、appendChild出来ないバグがあると書く人がいますが間違いです。HTMLの仕様書にはTBODY要素は TABLE の中に必ず出現しなければなりません。とあります。 ただし、TABLE要素内に、THEAD要素、TFOOT要素がなく、TBODY要素が1つだけの場合省略可能とあるので、tbody要素をかかないと、appendChild出来ないのはある意味正しい挙動であります。

この仕様をふまえて個人的には、「TABLE要素にTR要素を追加する」というより、「TABLE要素そのものを入れ替える」ほうがHTMLの仕様に準じた形でソースを作れるはずです。

TABLE要素には、THEAD要素、TFOOT要素、TBODY要素の順番に出現させなければなりません。ただし、THEAD要素、TFOOT要素は省略可能。TBODY要素は前述の通りです。

javascript mousedown fireevent(Firefox/2.0.0.20)

fireEventはIE用のDom2 EventのinitEventに相当するモノです。

あまり参考にできませんが、EVENT管理のサンプルを参照してみてください。

window IE8 親子 opener(MSIE 8.0)

JavaScriptのwindowの操作はあまりお勧めできません。DOM+CSSでそれらしく作るほうが好きです。

SVGから他文書を読み出した場合などの極限られた場合のみ使ってます。

IE6 IMG 画像サイズ 残る(MSIE 6.0)

IE6は画像サイズが残る仕様みたいです。個人的には、width、heightを指定したほうが良いと思います。

まぁ、作り方だと思うのですが……。

appendChild後にgetElementById 取れない(MSIE 8.0)

appendChildするということは、createElementした後にid属性をsetAttributeすると思うのですが、そのDOMオブジェクトを使えば良いのではないかと思うのだが……。

まぁ、作り方だと思うのですが……。

target=blank 使わない(Firefox/3.6.10)

HTML4の流れを汲むHTML(XHTML)では使えません。だからtarget=blank 使わないことは当たり前のことです。

HTML5では使えます。堂々と使ってください。

opera php post 違う(Opera/9.80)

そのような経験をしたことは無いです。もしかしたら、気にしてないだけかも知れません。気にしてないってことは、大きな問題が無いってことです。

IE8 境界線幅 異なる(MSIE 7.0)

IE7より、IE8のほうが正しいと感じます。IE7-を基準にしたらダメに決まってます。

IE6の印刷 二枚目 線が消える レイアウトが崩れる(Safari/531.22.7)

IE6は無視してください。古代のブラウザなのですから。

2010年9月2日
ブラウザ情報を取得するPHPを作ったのだが、文字列取得が同じ記述をしている。これはclassとしてしまおう。
<?php
class get_string {
  var $RA;
  function String_Get ($SearchSTR, $StartSTR, $LastSTR, $StartLen) {
    $pos = strpos($SearchSTR, $StartSTR, $StartLen);
    $WK_pos = strpos($SearchSTR, $LastSTR, $pos) - $pos;
    $WK_pos = $WK_pos + $pos;
    if ($WK_pos == 0) {
        $this -> RA = substr($SearchSTR, $pos);
    } else {
        $this -> RA = substr($SearchSTR, $pos, strpos($SearchSTR, $LastSTR, $pos) - $pos);
    }
    return $this -> RA;
  }
}
?>
引数は以下の通り。
$SearchSTR
対象文字列
$StartSTR
検索開始文字列
$LastSTR
検索終了文字列
$StartLen
検索開始位置
一番初めの検索開始文字列から検索終了文字列までの文字列を取得します。
検索開始文字列が複数存在して、2番目に合致した文字列から取得したい場合などは、検索開始位置で位置をずらしてください。
このクラスができたので、「ブラウザ情報を取得するPHP-Class」も変更する。
<?php
class get_user_agent {
  var $UA;
  var $RV;
  var $Browser;
  var $BEngine;
  var $OS;
  var $REFERER;
  var $Get_STR;
  function get_user_agent (){
    $this -> UA = $_SERVER["HTTP_USER_AGENT"];
    $this -> Browser = array('MSIE' => ';', 'Firefox' => ' ',
                          'Chrome' => ' ', 'Safari' => ' ', 'Opera' => ' ');
    $this -> BEngine = array('AppleWebKit' => ' ', 'Gecko' => ' ',
                          'Presto' => ' ', 'Trident' => ';');
    $this -> OS = array('Linux' => ';', 'Windows NT' => ';', 'Google' => ';',
                     'iPhone OS' => ';', 'Mac OS' => ';', 'OS/2' => ';');
    $this -> Get_STR = new get_string();
  }
  function GetBrowserInfo() {
    $this -> RV = "unknown";
    while(list ($key, $val) = each($this -> Browser)) {
      if (ereg($key, $this -> UA)) {
          $this -> RV = $this -> Get_STR -> String_Get($this -> UA, $key, $val, 0);
          break;
      }
    }
    return $this -> RV;
  }
  function GetBrowserEngine() {
    $this -> RV = "unknown";
    while(list ($key, $val) = each($this -> BEngine)) {
      if (ereg($key, $this -> UA)) {
          $this -> RV = $this -> Get_STR -> String_Get($this -> UA, $key, $val, 0);
          break;
      }
    }
    return $this -> RV;
  }
  function GetOSInfo() {
    $this -> RV = $this -> Get_STR -> String_Get($this -> UA, '(', ')', 0);
    while(list ($key, $val) = each($this -> OS)) {
      if (ereg($key, $this -> UA)) {
          $this -> RV = $this -> Get_STR -> String_Get($this -> UA, $key, $val, 0);
          break;
      }
    }
    return $this -> RV;
  }
}
?>
文字列変換の部分を、クラスオブジェクトに変更PHP自体は小さくなりました。
2010年9月1日
検索ワードで目についたことについてちょっとコメントします。

IE8 innerHtml 反映

IEは昔からappendChild出来ないので、innerHTMLするものと思ってます。

innerHTMLHTML5では正式に勧告になる予定です。

appendChild追記ですが、innerHTMLは指定した要素の中に上書きします。

この挙動はIEに限ったののではありません。

document.implementation.createDocument(Firefox/3.6.8)

このページよりわかりやすい解説をしているページはいっぱいあります。

ie8で見るとHPが変形する(MSIE 8.0)

互換モードなどがあるので試してみたらよいのでわないかと思います。

やりかたは、わかりやすい解説をしているページはいっぱいあります。

css3 hr 斜め(Chrome/5.0.375.125-Mac OS X)

css3でtransformを使えばできます。

やりかたは、このページよりわかりやすい解説をしているページはいっぱいあります。

chrome javascript xslt(Chrome/5.0.375.125)

出来ないので諦めてください。

Fxをお勧めします。

画像読み込み 完了 javascript レイアウト 崩れる(Chrome/5.0.375.125)

レイアウトが崩れるのは、作り方が悪いからです。

CSS2.1を使う場合では、WebKitはあまりバグはないはずです。

画像を利用する場合、img要素やobject要素にwidth属性やheight属性がないと、ブラウザは画像の描写が終わるまで画像の大きさがわかりません。 その辺を考慮したscriptを作らないと困ったことになります。

「なんとなく趣味のページ」では、XMLを使うことで回避してます。

SVG style属性 文字列 エスケープ(Firefox/3.6.8)

普通にCSSに仕様書を読んでください。SVGのCSS仕様書はあったはずです。

仕様書の内容が100%実現している訳ではないので、あとは自分で実証してください。

php html table 内に線を引く(MSIE 7.0)

TABLE要素の内側になにかしらの線を引きたいらし。PHPは関係ないですし、HTMLもあまり関係しないと思います。

CSSの話だと思うのですが、調べているのはborderの設定方法でしょうか。テーブルに上手く線を引くには、大枠のtable要素とセルを表すth要素とtd要素にborderを設定します。 bordre以外で線を引くには、text-decorationを使うくらいしか思いつきません。

PHPはまったく関係のない話なので、Webデザインのための勉強をしっかりやることをお勧めします。

それと、IEは8以上を使って開発したほうがよいです。IE8はCSS2.1に対応しています。IE9はCSS3に一部対応するみたいなのでIE7では時代遅れのデザインになってしまいます。

svg dc:title(MSIE 8.0)

SVGはXMLなので、他のXML語彙が使えます。どう記述すればよいのか分らない。人はそもそもXMLの基礎が分ってないので論外です。素直にSVGの解説書通りに書いて楽しんでください。

接頭辞でよく使うdcはDublin Coreの略で、メタデータ記述に使う語彙の通称のことです。RDFの述語を規定しています。この辺りのXMLの記述は変と思う記述があったりする。

rdf:type="http://"でnamespaceが書いてあったりするのだが、rdf:typeは「リソースのクラスを識別する」とある。

この場合、http://xxx.xxxxx.xx#yyyyyがclassに該当していればよいのだが、namespaceの書き方によっては、どれがclassでどれがPropertyだかわかりにくいことがある。

XMLに詳しくないのなら、RDFのトリプルなど余計なことは考えなくてよいとおもいます。とりあえず、XMLの語彙を使ってみてください。

ただし、RDF語彙を使うのなら、その意味を考えて使ってください。今定義してあるXML語彙は、RDFのトリプルを前提に作られているものが多いです。

javascript リファラ 検索ワード 判別(Firefox/3.6.8)

サーバーサイドの言語でリファラから検索ワードの判別は出来るので必要がないかなと思ったのですが、XmlHttpRequestで通信していると、サーバーサイドのリファラはXmlHttpRequestしたページになるので検索ワードが取得できない。 JavaScriptでリファラを取得してPOSTしても、「&」を変換してあげないとデータが送れない。

JavaScriptでのリファラから検索ワードの判別も必要だと思ったのでサンプルを作ってみた。しかし、PHPでリファラから検索ワードの判別を作ってしまったからあまり使い道はない。ちょっと残念な結果になってしまった。

Atom1.0 Xml 非公開 設定(Firefox/3.6.8)

Atomはコンテンツを配信するモノです。配信したくない場合Atomを作らなければよいのです。

公開されたXMLは使うひとが好きに使えるので非公開なんてあるはずがない。

もうすこし、XMLの勉強でもしたらよいのに。

css3 別クラスを動かす(Firefox/3.6.8)

CSSはHTMLの見栄えを指定するモノで、動きを規定するモノではない。

検索するより、CSS3のWDでも覗いてみたら良いと思うのですが……。

もうすこし、英語の勉強でもしたらよいのに。

post通信 phpから送信 hostが変わる(MSIE 8.0)

host名はDNSで名前変換され、IPアドレスになって通信します。従って同じ経路を辿って通信すれば「hostが変わる」ことは無いはずなのですが……

行きと帰りで通信経路が変わった場合、通信しない場合もありえるのですが。

まぁ、通信しているサーバーの設定の問題だと思います。

ie8 レイアウト offsetって何(Firefox/3.6.8)

ieに限らず、表示にかかわる位置決めがoffsetです。

transformnode 動かない(Firefox/3.6.8)

エラーコンソールにメッセージが出てない場合以下のことが考えられます。

  1. XSLTが間違っている。
  2. transformnodeの処理をしていない。
  3. 実は変換できてるが、見えてない

対処方法は下記の通りです。

  1. 使おうとしているXSLTをxml-stylesheetで直接変換して、変換できていることを確認する。DOM Insectorを使うことをお勧めします。
  2. alertなどを使い確実に処理をしていることを確認する。
  3. 変換結果をalertで出力してみる。

display:box; IE7(Chrome/5.0.375.127)

CSS3などの新しい指定を使おうといている人がこんな検索をしてはいけません。

IE7を気にするのなら、CSS2.1すら使えません。

HTMLを勧告通りにマークアップをすれば、IE6でも、IE7でも情報を取得できないことはありません。

CSSの指定よりアクセシビリティの勉強をお勧めします。アクセシビリティ抜きにしたCSSはダメCSSになりがちです。

2010年8月27
HTML+CSS3で「ドラえもん」を書ける。検索していたら「DTP-Sブログの主宰」って人のページを見つけた。
「SVG使えよ」にたいする発言が「意味不明」なのである。「SVGが普及しない」という見解には同意。しかし、理由が「は~?????」なのである。
「SVGが普及しない」のは「Illustratorが必要だというのがネック」なのだそうだ。モノを知らないってのは恐ろしい。
私のページで使っているSVGは、サクラエディターで一所懸命座標をとりながら書いて、書いたSVGに対してCSSファイルを適応させています。特別なソフトは使いません。
従ってSVG作成には「テキストエディタがあればよい」ことになる。HTML+CSSと同じことを、SVG+CSSでやってます。
なぜHTMLがあるのか、なぜSVGがあるのかをまったくわかってない。XMLで文書の構造を記述する仕様がHTML。絵の構造を記述するのがSVG。構造の見た目を整えるのがCSSです。
従って、「SVG使えよ」は大正解な意見です。Illustratorでhtml+CSSのコードを吐き出せというのは、「ホームページ」を作成を求めるようなものです。
はぁ~。これがプロの意見なんですかねぇ。きっと冗談かネタだろ。
私が「SVGが普及しない」と思っている理由は、「難しいから」です。同様にCSS3もあまり普及しないと思います。columnやboxは面白いですが、CSS3の仕様は普通の人には使いきれないと思います。
普通にホームページやブログをかくのなら、css2.1で十分だと思うので。あまり、HTMLを使ってトンデモなことはしてほしくない。っていうのが正直な感想です。
2010年8月26日
PHPでリファラから検索ワードを取得するスクリプトは作ったのだが、XmlHttpRequestでリファラの情報を送ると「&」でデータが途切れてしまう。したがって「&」を他の文字に変換しなくてはならない。 PHPでは、変換した文字を考慮にいれてスクリプトを作らねばならずちょっと面倒です。
開始文字列と終了文字列を指定してその間だけの情報が取れればいいわけだ。
function STR_Text_Get (StartSTR, LastSTR, SearchSTR) {
  Start_Point = SearchSTR.indexOf(StartSTR,0);
  if (Start_Point > -1) {
      Start_Point = Start_Point + StartSTR.length;
      STR_Length = SearchSTR.indexOf(LastSTR,Start_Point) - Start_Point;
      var SearchChara = SearchSTR.substr(Start_Point, STR_Length);
      SearchChara = decodeURI(SearchChara);
      return SearchChara;
  } else {
     return false;
  }
}
indexOf関数で最初に検索開始文字列が出現した場所を調べて、その場所から検索終了文字列の場所を調べます。
検索終了の場所 - 検索開始の場所 が目的とする文字列の長さになるます。
あとは、検索文字列をsubstrで文字列の取得をすればよいだけです。以外に簡単です。ただし、開始検索文字列が一意にならないと使えません。
2010年8月25日
PHPでも連想配列が使える。
$SEngine = array('google' => 'q=', 'yahoo' => 'p=');と指定する。使う場合はwhile(list ($key, $val) = each($SEngine)) として使う。JavaScript風に$SEngine[google]として使えるのかなと思ったらそうではないらしい。イメージは配列の偶数をKEYに、奇数をデータに使っている感じである。 したがってイメージしていたことが出来なくなってしまった。
そのかわり、添え字にあたる部分もデータとして扱えるので便利につかえる。
例えば、名前空間を渡す場合、$XMLNameSpace = array('atom' => 'http://www.w3.org/2005/Atom');と渡して、別のPHPで展開する場合、 atomhttp://www.w3.org/2005/Atomと理解できて展開が楽である。
ちょっとJavaScriptの連想配列とは毛色が違いますが、このような連想配列はある意味便利です。
これが理解できると、PHPの作りがちょっと変わってくると思います。IF~ELSEがwhileのループでまかなえる。
while(list ($key, $val) = each($SEngine)) {
  if (ereg($key, REFERER)) {
      $pos = strpos(REFERER, $val) + mb_strlen($val);
      $WK_pos = strpos($this -> REFERER, ';', $pos) - $pos;
      $WK_pos = $WK_pos + $pos;
      if ($WK_pos == 0) {
          $RV = urldecode (substr(REFERER, $pos));
      } else {
          $RV = urldecode(substr(REFERER, $pos, strpos(REFERER, ';', $pos) - $pos));
      }
      break;
  }
}
上に書いたソースは、サーチエンジンの検索ワードを取得する例なのだが、$SEngine = array('google' => 'q=', 'yahoo' => 'p=');で連想配列を作り、 whileでループしながら、正規表現で文字列のマッチをして検索エンジン毎の処理を減らしてます。
2010年8月23日
XML変換用PHPクラスを作っていたのだが、それなりのモノが出来たと思う。
このあたりがおかしい等の情報求む。
<?php
class xml_load {
  var $file;
  var $XMLtype;
  function xml_load ($in1 = "",$in2 = "",$in3 = "") {
    header("Content-type: application/xml");
    error_reporting(0);
    $this -> XML_File = $in1;
    $this -> XSLT_File = $in2;
    $this -> XMLNS = $in2;
    $this -> XPath = $in3;
  }
}
class xml_load_XSLT extends xml_load {
  function Get_XML() {
    /** XMLファイルの読み込み */
    $xml = new DomDocument();
    if ($xml->load($this -> XML_File)) {
        $xslt = new DomDocument();
        if ($xslt->load($this -> XSLT_File)) {
            $processor = new xsltprocessor();
            $processor->importStyleSheet($xslt);
            /** XSLT変換後のXML_object */
            $xml_obj = $processor->transformToXML($xml);
        } else {
            $xml_obj = "<p>";
            $xml_obj .= "XSLTファイルエラー(<em>";
            $xml_obj .= $this -> XSLT_File;
            $xml_obj .= "</em>)";
            $xml_obj .= "</p>";
        }
    } else {
      $xml_obj = "<p>";
      $xml_obj .= "XMLファイルエラー(<em>";
      $xml_obj .= $this -> XML_File;
      $xml_obj .= "</em>)";
      $xml_obj .= "</p>";
    }
    return $xml_obj;
  }
}
class xml_load_XPath extends xml_load {
  function Get_XML() {
    if (simplexml_load_file($this -> XML_File) ){
        $xml_text =  simplexml_load_file($this -> XML_File);
        while(list ($NS, $URL) = each($this -> XMLNS)) {
             $xml_text->registerXPathNamespace($NS, $URL);
        }
        if ($XML_TEXT_XPath = $xml_text->xpath($this -> XPath)) {
            $XML_TEXT = array('success' =< true, 'XMLobj' =< $XML_TEXT_XPath);
        } else {
            $ERR_TEXT = "<div>";
            $ERR_TEXT .= "<p><em>XPathエラー</em></p>";
            $ERR_TEXT .= "<dl>";
            reset($this -> XMLNS);
            while(list ($ENS, $EURL) = each($this -> XMLNS)) {
                 $ERR_TEXT .= "<dt>接頭辞</dt>";
                 $ERR_TEXT .= "<dd>".$ENS."</dd>";
                 $ERR_TEXT .= "<dt>名前空間</dt>";
                 $ERR_TEXT .= "<dd>".$EURL."</dd>";
            }
            $ERR_TEXT .= "<dt>XPath</dt>";
            $ERR_TEXT .= "<dd>".$this -> XPath."</dd>";
            $ERR_TEXT .= "</dl></div>";
            $XML_TEXT = array('success' =< false, 'XMLobj' =< $ERR_TEXT);
        }
    } else {
        $ERR_TEXT = "<p>";
        $ERR_TEXT .= "XMLファイルエラー(<em>";
        $ERR_TEXT .= $this -> XML_File;
        $ERR_TEXT .= "</em>)";
        $ERR_TEXT .= "</p>";
        $XML_TEXT = array('success' =< false, 'XMLobj' =< $ERR_TEXT);
    }
    return $XML_TEXT;
	}
}
?>

xml_load_XSLTは、読み込むXMLとXSLTのURLを記述します。
XSLTで変換した内容をもどします。
xml_load_XPathは、読み込むXMLのURL、XML名前空間の連想配列、xpathを記述します。
連想配列をかえします。successはtrueかfalseを、XMLobjにはxpathの記述で取得したXMLオブジェクトがセットされます。
2010年8月4日
アクセスログにて、$_SERVER["HTTP_USER_AGENT"]にてブラウザ情報を取得しているのですが、いらない情報がある。
いらない情報を削ったPHP-Classを作ってみた。
<?php
class get_user_agent {
  var $UA;
  var $RV;
  var $Browser;
  var $Engine;
  var $OS;
  function get_user_agent (){
    $this -> UA = $_SERVER["HTTP_USER_AGENT"];
    $this -> Browser = array('MSIE' => ';', 'Firefox' => ' ',
                 'Chrome' => ' ', 'Safari' => ' ', 'Opera' => ' ');
    $this -> Engine = array('AppleWebKit' => ' ', 'Gecko' => ' ',
                 'Presto' => ' ', 'Trident' => ';');
    $this -> OS = array('Windows NT' => ';', '(' => ')');
  }
  function GetBrowserInfo() {
    $this -> RV = "unknown";
    while(list ($key, $val) = each($this -> Browser)) {
      if (ereg($key, $this -> UA)) {
          $pos = strpos($this -> UA, $key);
          $WK_pos = strpos($this -> UA, $val, $pos) - $pos;
          $WK_pos = $WK_pos + $pos;
          if ($WK_pos == 0) {
              $this -> RV = substr($this -> UA, $pos);
          } else {
              $this -> RV = substr($this -> UA, $pos, strpos($this -> UA, $val, $pos) - $pos);
          }
          break;
      }
    }
    return $this -> RV;
  }
  function GetBrowserEngine() {
    $this -> RV = "unknown";
    while(list ($key, $val) = each($this -> Engine)) {
      if (ereg($key, $this -> UA)) {
          $pos = strpos($this -> UA, $key);
          $WK_pos = strpos($this -> UA, $val, $pos) - $pos;
          $WK_pos = $WK_pos + $pos;
          if ($WK_pos == 0) {
              $this -> RV = substr($this -> UA, $pos);
          } else {
              $this -> RV = substr($this -> UA, $pos, strpos($this -> UA, $val, $pos) - $pos);
          }
          break;
      }
    }
    return $this -> RV;
  }
  
  function GetOSInfo() {
    $pos = strpos($this -< UA, '(' );
    $this -< RV = substr($this -< UA, $pos, strpos($this -< UA, ')', $pos) - $pos);
    while(list ($key, $val) = each($this -< OS)) {
      if (ereg($key, $this -< UA)) {
          $pos = strpos($this -< UA, $key);
          $WK_pos = strpos($this -< UA, $val, $pos) - $pos;
          $WK_pos = $WK_pos + $pos;
          if ($WK_pos == 0) {
              $this -< RV = substr($this -< UA, $pos);
          } else {
              $this -< RV = substr($this -< UA, $pos, strpos($this -< UA, $val, $pos) - $pos);
          }
          break;
      }
    }
    return $this -> RV;
  }
}
?>
get_user_agent()で指定しているブラウザを取得できます。MSIE,Firefox,Chrome,Safari,Operaはブラウザが取得できます。
エンジンは、AppleWebKit,Gecko,Presto,Tridentは取得できます。
OSの情報も取得できるはずです。
PHPのClassの使い方が解らないっていうのは調べてください。
2010年8月3日
色々ブラウザに対応していたのがひと段落ついたのでまとめます。
Firefox
  • "KeyboardEvent"を"createEvent"した時に、DOM Level3の"initKeyEvent"を使う。
  • SVGの「gradation」のテキストの色を変えるScriptが動かない。
Safari
  • css3のcolumnを使えるのだが、offsetの位置取りが出来ないため要素の下に絵を出そうとすると、該当する要素だけ本来の位置に戻ってしまう。
  • eventオブジェクトでない変数からTargetを取得すると変なオブジェクトが取得できる。
  • HTMLcollectionをApebdchildすると上手くいかない。
  • XSLTProcessorが動かない。
  • SVGのリンクのScriptが動く場所がすごく限られている。
Chrome
  • css3のcolumnを使えるのだが、offsetの位置取りが出来ないため要素の下に絵を出そうとすると、該当する要素だけ本来の位置に戻ってしまう。
  • eventオブジェクトでない変数からTargetを取得すると変なオブジェクトが取得できる。
  • HTMLcollectionをApebdchildすると上手くいかない。
  • XSLTProcessorが動かない。
  • SVGのリンクのScriptが動く場所がすごく限られている。
  • SVGの解釈が他のブラウザとの違いすぎる。WebKitが古いから?
Opera
  • css3のcolumn,boxが使えない。
  • "createEvent"の"KeyboardEvent"が使えない
  • SVGの「gradation」のテキストの色を変えるScriptが動かない。
IE8
  • 上記ブラウザと同列に比較・評価の対象とするレベルでない。
SafariとChromeでは、SafariのほうがWeb標準の準拠具合からすればよいと思う。
OperaはCSS3の分野でFxに比べて10歩くらい遅れてます。
今一番、新しい草案に対応しているのはFxですが、急ぎすぎ?と思うところもある。
2010年8月2日
前回は約半年のアクセスログのブラウザの傾向を調べてみたが、今回は最近3ヶ月のアクセスログを調べてみた。
大きなブラウザのくくりで見てみる。
  1. IE-50%
  2. Fx-28%
  3. WebKit-18%
  4. Opera4%
IEが50%あります。釣りのページの影響でしょう。WebKitが多い、Operaもそれなりにある。これは、Webについて書いてあるページの影響でしょう。
ブラウザごとのくくりで見てみる。
  1. IE7-29%
  2. Fx-28%
  3. IE8-19%
  4. Safari-10%
  5. Chrome-8%
  6. Opera-4%
  7. IE6-2%
最近でみるとIE6は減ってます。というより、ほとんどアクセスがない状況です。Macの場合、ほぼSafariでした。そのせいでSafari率も無高い。
もう少しIE率が下がるとうれしい。理想は、IEが20%程度、Fx40%程度、その他30%程度がよいのですが……
2010年8月1日
検索ワードで目についたことについてちょっとコメントします。

IE8 target blank リファラー

IEでは「target blank」ではリファラーがとれなくて云々らしい。

HTML4の流れのHTMLでは「target="_blank"」はフレームに対する指定なのでdocumentA-window-documentBという構造フレームの構造をもてばリファラーはとれてもよいのですが、 フレームに対する指定を別の目的にした場合、documentA-window window-documentBとなりリファラーがなくなっても差し支えない。windowが同一か別なのかで挙動が変わります。 HTML4の流れでは、「target="_blank"」でフレームを使わない場合、別のwindowを開く処理のほうがしっくりくると思います。

HTML5の場合、「openerアトリビュート」が無くなるとWDにあるので、リファラーがなくなる動作は正常です。

html5.jp スクリプト バグ

html5.jpの管理人にバグがあると報告しましょう。

ただしHTML5はWDなので、動作しないサンプルを見て「バグ」だと叫ぶ人も「変な人」だと思いますが……

カナヘビ レイアウト

カナヘビは木に登ったりします。可能ならば背の高い水槽を用意して「縦のレイアウト」をしてあげるとよいでしょう。 ただし、カナヘビは自分の体長の約2倍のジャンプ力を見せるのでその辺を考慮しないと、太陽光での日光浴をさせていると逃げられる場合があります。

室内でしか飼わないので、太陽光にあてる必要は無いなんて考えているのなら飼育をすることをやめてください やはりカナヘビには太陽光が一番よいようです。電球はあくまでも非常・補助的な手段です。

javaScriptエンジン HTML5 イベント受け渡し

HTML5に限らず、dispatchEventとfireEventやinitEventを組み合わせれば、Eventから他のEventを起動することが出来ます。DOM水準2を満足しているブラウザなら可能です。

文書オブジェクトモデル(DOM)水準2 イベント規定あたりを見るとよいのかもしれません。

ちなみに「なんとなく趣味のページ」で使っているDispatchEvent_obj.EventObjectはIE6~イベントから別イベントを起動できるように作ってます。(IE独自仕様に対応しているだけなのですが……)

カナヘビ 罠

前にも書きましたが罠による捕獲はお勧めしません。理由としては下記があります。

  • 罠を作る場合、結構広い場所が必要になる。
  • 滅多に罠にかからない。
  • 万が一罠にかかった場合、時間帯によっては放置されている間に暑さでしんでしまう。

まず、カナヘビは日当たりのよい場所にいます。捕獲に適している場所は、草むらと草があまり生えてない場所が混在している場所です。そんな場所を探してください。

そんな場所を見つけたら、虫をチェックします。バッタ類がいる時期なら、ショウジョウバッタ、コオロギ類がたくさん存在していること、 バッタ類がいない季節の場合コモリグモなどの地面を歩き回るクモ類が多く存在している場所かチェックします。運がよければその段階でカナヘビに遭遇します。

条件にあった場所の場合、あとは注意して歩きまわりましょう。カナヘビがいれば草むらの中を逃げるので音と草の動きに注意をはらいます。

カナヘビがいたならば、その場所を朝夕にチッェクしてみましょう。日向ぼっこしているカナヘビにあえるはずです。ただし、気温が高い場合動きが早いので捕まえるのは難しいです。

春、秋が捕獲に適していると思います。冬越しをさせるつもりなら、春に捕まえて、日にカナヘビの頭ぐらいの大きさの虫を5匹程度与えて、30分程度の日光浴をさせて飼育させるのがベストです。

ペットショップで売っているコオロギは栄養価が低いのでコオロギにも餌を与えましょう。

カナヘビの飼育は犬猫と同じくらい手間がかかります。安直に飼育できるものではないです。

htmlが消える 不具合 MS 関数 XSLT

HTML要素が消えるのか、HTMLに変換できないのか、この検索ワードでは不明です。私自身はXSLTでhtmlが消えるという経験はないのでわかりません。

しかし、IEのXSLTには挙動が変なところがあります。xsl:output method="html"でHTMLに変換するのですが、xslt:elementでname="script"を書くとそこでXSLTの変換をやめます。scriptを書かなければ変換するので、そこまでは有効に変換して<xslt:element name="script">でscriptタグを吐き出した時点で変換を中止します。

FxやWebkitではそんなことはないのですが、IEでは8でも変換を停止します。したがってバグというより、「仕様」であるのかもしれません。

IE6 offsetWidth 戻り値

仕事でどうしてもIE6を使いなさいという場合を除きIE6は切り捨てたほうがよろしい。

IE6は、DOMへの対応が未完成なのでどうしても挙動が変になります。Web標準とIE6への対応の両立は難しいと思います。

どうしてもIE6への対応が必要な場合、IE6を中心に開発をしなくてはなりません。その場合、Web標準の導入はかなり限定されたものになります。

最新の仕様に対応するならば、IEシリーズは切り捨てるぐらいのことをしなければ対応は無理です。

IE6の挙動を検索する時点で、あたらしい仕様への対応を諦めているのだなぁと見えてしまいます。

Canvas 楕円系

canvasで楕円を描写する方法を書いたので参考にしてください。

IE XSLTProcessor 判定

JavaScriptでXSLTProcessorのサンプルを参考にしてください。

古いサンプルなので、IE6に対応です。

html5 canvas 線を動的に引く

「線を動的に引く」がなにを意味しているのかちょっと解りにくいのですが、マウスの動きに合わせてなら解ります。

canvas要素に落書きをするスクリプトを参考にしてください。

もともとCanvasはJavaScriptなので絵を描くときforでまわしたりするのでCanvas自体が動的に生成されていると思うのですが。

XSLT chrome

WebKit系のブラウザはxml-stylesheetとしてのみXSLTに対応すると明言していて、2010年7月29日現在まだその記述が生きています。「SafariはXSLTをサポートしていますか?」で検索してください。

多分、同じWebKit系のchromeもダメでしょう。

どうしても、閲覧環境を気にしないでXSLTを使いたいなら、PHPなどのXSLTProcessorを使うか、xml-stylesheetとして使うしかないと思います。

WebKit DOM img

  • align
  • alt
  • border
  • height
  • hspace
  • name
  • src
  • useMap
  • vspace
  • width

上記はDOMの仕様書に規定してあるので、たいていのブラウザなら同じはずです。

それ以外のプロパティはブラウザ毎に対応が違うはずなので確認が必要です。

JavaScriptでは、イメージを読み込むときWidthやheightの指定がないと、それに関係する部分の初期値が0と指定されます。

onloadを使ってロードが終了したらとかやると、画像のロードが終わらない場合処理がいつまでも進まないなんてことになってしまいそうなので、 それなりの対処は必要になると思います。

2010年7月31日
「なんとなく趣味のページ別館」の釣りのページは、XMLをPHPでXSLTProcessor()でXMLをHTMLに変換して、XMLHttpRequestで通信しているのですが、Safari-WebKitの挙動がおかしい。
データは返ってきているので、innerHTMLするために、responseTextでデータを取得する。responseXMLで取得して、appendChildすると、WebKitはelement以外は追加できないという縛りがある。
innerHTMLした要素に対して関数を指定し、その関数の中でイベントオブジェクト以外の変数からTargetを取得しようとすると、nullではなく「XMLHttpRequest」を取得する。
中身は呼び出された引き値がちゃんと格納されている。イベントオブジェクトではないので、nullが返ってくると思うのですが違う
変な値を返すよなぁ。WebKitだけがこの値を返します。
2010年7月30日
どうも、WebKitのCSS3のなかで、columnにバグがある
column自体は上手くいってるように見えるのだが、位置を取得するスクリプトで位置を取得すると元の位置に戻ってしまう。
column要素で折り返した場合の位置取得が上手くできないみたいです。
WebKitいまいちです。
2010年7月29日
HTMLやJavaScriptのことを書いてあるページと釣りのことを書いてあるページでは閲覧しにくる人のブラウザがまったく違う。
釣りのページでは
  1. IE7-36%
  2. IE8-28%
  3. Fx-22%
  4. IE6-12%
  5. Safari-1%
  6. Opera-1%
IEが圧倒的に強く全体の76%を締めていて、Fxが22%です。一般人ではこのくらいの比率だろうと思います。
それに対して、マニアックな話題が多いWebのページでは
  1. Fx-42%
  2. IE7-15%
  3. IE8-15%
  4. IE6-10%
  5. Chrome-9%
  6. Safari-5%
  7. Opera-4%
Fxが多数派になっています。その次がIE系。一般人と違うのは、IE8の比率が高いということです。このページではWebKit系2種も足した数字では14%になっていい感じです。
Operaが単独で4%のアクセスがあるのも変なところです。マイナーブラウザWebKit+Operaを合わせれば、18%獲得したことになりIEを単独で数えた場合より多くなります。
一般人は、IEやFxを使ってますが、開発している人達は満遍なくブラウザを使っているような気がします。
2010年7月23日
「なんとなく趣味のページ別館」では4種類のアクセスログをとっている。
  • HTML文書用のアクセスログ
  • XML文書を直接覗いた場合場合、XSLTで変換したXML文書のアクセスログ
  • 「釣り日記」、「観察日記」のXmlHttpRequestで通信したアクセスログ
  • 「Web関係の日記」、「釣りや魚に関するたまに書く日記」のXmlHttpRequestで通信したアクセスログ
このうち、「HTML文書用のアクセスログ」は、loadイベント発生時にアクセスログを記録するようにしている。この記録する関数をprototypeでメゾット化したモノを使ってみようという試みです。
prototype関数を作るのは簡単なので良いとして、はたしてこのメゾットがきちんと動くのか疑問。試してみたほうがよろしい。
Fx-大丈夫。WebKit-大丈夫。Opera-大丈夫。IE8-大丈夫。IE7-大丈夫。IE6-NG。
IE6はエラーすら返さず、さらりと無視。さすがIE6。これでは仕事では使えない。しかし、「なんとなく趣味」では十分に使えるレベルです。
IE6で可読性が損なわれる場合以外はオブジェクト化してしまおうと思う。
2010年7月8日
検索ワードで目についたことについてちょっとコメントします。

javascript 同じリンク先に違う値をPOSTする

XMLHttpRequestを使う場合は、同じPHPに対して違う値をPOSTします。条件によってsendする内容を変えます。 POSTされたPHP側は、POSTの内容によって挙動を変えるようしているので、JavaScriptとPHPは目的によって分けられたPHPとだけ通信を行います。

「なんとなく釣りのページ」は、turi_doc.htmlのJavaScriptが、a要素のhref属性の値を取得してconversion_xslt.phpと通信してHTMLに変換して表示します。 したがってa要素でリンクがクリックされるたびに違う値をPOSTしています。

DOM操作で、form要素の中を書き換えてsubmitする方法も考えられます。どちらにしても通信が完了しない状態で新しい通信をすると挙動は変になります。

XSLTProcessor safari/chrome

WebKit系のブラウザでは、JavaScriptでXSLTの変換はやらない方針らしいので現状では無理っぽい。

innerHTMLの挙動が遅いのであまり使えない。(innerHTMLはHTML5では規定されている)

HTML SVG javascript display 読み込んだ後に

検索の内容からなにがしたいのかよく解らないのでが、SVGはxlinkを指定することによってJavaScriptを動かすことができます。 ただし、Fx、WebKit系はDOMの操作・スタイルの変化・イベント属性でのイベントの起動ができます。Operaはイベント属性でのイベントの起動ができます。

SVGをHTMLで使う場合、object要素を使ったほうがよろしいと思います。

「IE8 レイアウト」系

CSSをWEB標準でかいてないからレイアウトが崩れます。oldIEに適応したページを見に行くとよく崩れます。IEを後方互換モードにすれば大半は解決するはずです。

IE8で「レイアウトが崩れて読めない」ページを作るのは、Web開発者の質の問題です。

「css3」系

boxレイアウトやcolumnレイアウトで段組が楽につくれます。margin-imageでマージンにイメージがつけられたり、背景にグラデーションをかけたりできます。

なんとなく趣味のページで実験中です。

enterkeyでイベント発生

普通にenterkeyを押せばKeyEventが発生します。

dispatchEventとfireEventやinitEventを組み合わせれば、Eventから他のEventを起動することが出来ます。

$_FILES ファイル 拡張子 チェック php csv

IEはヘッダー情報としてtext/csvを返してこないので、拡張子でチェックするしかないです。

カナヘビに関する質問

カナヘビ を盗る方法

盗るのは犯罪です。絶対にやめてください。

カナヘビの捕まえ方 ペットボトル

罠による捕獲はあまりお勧めできません。できるかぎり足であるいて確認して捕まえてください。

canvas DOM div要素

canvasはcanvas要素に対して適応するJavaScriptなので直接div要素に書くことはできません。

現状のブラウザでは、動的にcanvas要素を生成した場合上手く動かない場合があります。

html5 canvas 楕円

指定はないので、がんばって作ってください。サンプルが出来たら教えて欲しいです。

javascript appendChild alert を入れると反映

appendChildするDOMオブジェクトがダブって使っているのかもしれません。

javascript dom appendChild postすると消える

XMLHttpRequestでPOSTした場合以外、普通にリロードが発生してJavaScriptで動的につくったDOMは、普通にきえます

2010年5月28日
GoogleがXML文書を一所懸命に集めているのだが、それが最近検索結果に反映されている。
ATOMがHTMLで書かれているので、a要素のテキストを検索見出しにして、XML文書のURLがリンクとして貼られている。
a要素のテキストが必ずしも正確なタイトルを示していなので、ちゃんと中のXML文書の語彙を解析して使って欲しい。
<dc:date rdf:datatype="http://purl.org/dc/terms/W3CDTF">2009-09-09</dc:date>は解析しているらしく、2009年9月9日と表示されている。 Dublin Coreのdateを理解するなら、dc:titleも理解してくれても良いと思うのだが、こちらは使われない。
どうせやるなら、ちゃんとXMLを認識してインデックスを作って欲しいよなぁ。Googleさん。あなた方だけだよXML文書を解析しているのは、だつたらちゃんと解析してdc:titleくらい使ってよ。
それと、「http://www.geocities.jp/sendaituri/」のほうに日本語語彙によるXML文書を「http://musimusi.g.ribbon.to/」からリンクしているのだが、こちらはキャッシュされない。
Googleの検索結果を見ていると、「http://www.geocities.jp/sendaituri/」と「http://musimusi.g.ribbon.to/」は、関係のあるサイトという認識らしい。 関係のあるサイトという認識なら、日本語語彙のXML文書もキャッシュして欲しいのだがしてくれない。
PHPの実験で他サイトに上げているのだが、Googleでは存在をしらないらしい。URLは完全公開なのに無視してます。
XMLの扱いについては、まだまだですね。
2010年4月28日
googleのボットが1日に50回以上アクセスしてきた。何か違和感を感じたのでちょっと調査した。
アクセスログより200のデータのみ抽出した。それを並べて眺めていると、「img/foaf/」と「img/img/」に多くアクセスしている。
「img/foaf/」には、foafの語彙を使って画像の説明をしているXMLが置いてある。まずは、そこから画像説明のXMLをGETしていくのである。
すると、1時間程度後に「img/foaf/」のXMLが指定されている画像を「img/img/」からGETしていくのである。
XML文書にはfoaf:Image rdf:about=とRDF/XMLで普通に使われる語彙で画像の場所のURLが指定してあるので、語彙さえ理解できていれば簡単に画像が取得できるようにしてある。
Googleの検索ボットの挙動はこちらの思惑通りの挙動をしているように見えます。XMLの語彙を理解している可能性が高いと思われます。
とりあえず、このページはJavaScriptを解析できないと読めないページなのでまだキャッシュされる心配はないです。
しかし、Googleも進化しているように感じてしまった。
OWLで作った日本語XMLを見て他XML文書をキャッシュできたらたいしたものだと思う。
2010年4月6日
xsltprocessor()の機能が日本語でも使えるのか試してみた。
野鳥や釣りを説明を記述するための日本語語彙をowlで作った。
XMLも接頭辞を日本語にして設定。多少他の語彙を使ったが主な部分は日本語タグを使った。
そのXMLを変換するXSLTも作成。同じものを使ってJavaScriptのxsltprocessor()は変換できたものです。
XML、XSLTとも別サーバーにあります。心配なのはDocument()です。きちんとデータを取ってきてくれるのか
やってみると、見事にデータを吐き出しました。XSLTの変換も完璧でした。
ちょっと気スピードは気になりますが使えます。
2010年3月26日
初めに書いておく。私は「HTML5」は好きである。
HTML5.JP - 次世代HTML標準 HTML5情報サイトというページがある。

HTML5.JP とは

HTML5 は、WHATWG および W3CHTML4 に代わる次世代の HTML として策定を進めている HTML 仕様です。HTML5.JP では、HTML5 の仕様に関するトピックを紹介していきます。

HTML5.JP では、HTML5 の最新情報に加え、すでに利用可能な Canvas の使い方などを詳しく解説します。

などと書いてある。「ふーん。次世代の HTML」ですか。なお、当サイトは、W3C や WHATWG とは一切関係がありません。と書いてあるから、その団体とは関係ないページなのでしょう。
HTML4.01とはどのような仕様なのか、知っているのでしょうか?HTML4.01は「文書の構造だけをマークアップする」仕様です。「アプリケーション的な要素はプラグインで、プレゼンテーション的な要素はスタイルシートで実現してください。」という仕様です。
私が感じる限りのHTML5の仕様は、「Webアプリケーションを作りやすくする」仕様です。「ブログ」や「SNS」などの「コミュニケーション」としてのツールを作る道具としてHTMLを考えた場合、4.01では「不都合」を感じる場合があります。
SECTION要素を使うとH1要素が何回でも使えたりします。これは、都合がいいです。
他のXML文書からHTMLを生成した場合に、ARTICLE要素を使って「実態は別にある」ことを暗示したりできる。これも都合がいいです。
コンテンツとは関係ない注意書きをASIDE要素として「コンテンツとは直接関係ない」ことを暗示したりできる。これも都合がいいです。
Webコンテンツ作成者に都合がよいのが「HTML5」なのです。
ただし、都合がよすぎて困ってしまう場合がある。「本当に、必要な要素なのですか?」ということである。
書いてみて、そのソースよりRDFのトリプルを作ると余計な要素があることに気づく。RDFのトリプルを作った時に余計な要素はムダな要素なのである。
Webコンテンツ作成者に都合がよすぎて、HTMLを肥大させる仕様がHTML5なのである。
こんなに、肥大させていいものなのか?Webコンテンツ作成者はもうすこし考えたほうがよいのではないのか?
2010年3月23日
prototypeとなるものを使うと、スクリプトをメゾット化できたり、オーバーライドすることが出来ることを知った。
知ったからにはやってみようと勉強していたのだが、こんな感じだろうというのが出来上がった。
基本的なオブジェクトの考え方はJavaと共通するのですが、JavaScriptはPrototypeオブジェクト、Java等で使うClassオブジェクトとは違う。 しかも、「なんとなく趣味」で使うJavaScriptはDOMを扱うScriptがほとんどなので、Classオブジェクトの考え方はほぼ使えない。
イベントの追加やXML通信はオーバーライドして使うようにすればよいので、Classオブジェクトの考え方で作れます。
DOMオブジェクトを扱うスクリプトをどのようにまとめたらよいのか迷った。
例えば、「親子兄弟」を取得するスクリプト。従来は、「親取得」「子取得」「兄取得」「弟取得」と4つの関数を使い、空の関数「Node」にprototypeでメゾットに格納するという 「格好悪く、なんだかなぁ」という書き方をしていた。この関数を使う場合は、「Node.親取得」みたいな書き方をしていた。 prototypeの考え方を間違えていると思えるのだが、なにを間違えているのか解らないので直しようがない。スクリプトが動いているので、放置状態でした。
「prototypeオブジェクトとは何」と書いてあるページを発見。「元々あるオブジェクトに追加していくオブジェクト指向」と書いてあるのを見て納得。 「それならば、こう作ればいいや」と作ってみる。
まずは、「Node」という関数を作る。その関数のSUB関数として「親取得」「子取得」「兄取得」「弟取得」を作成する。 「親子兄弟」の共通部分を「Node」という関数でまとめ、違う部分のみを「取得」部分に書いていく。 そして、おのおのSUB関数を、「Node」関数にprototypeで格納してしまう。
使う場合は、「Node」をnew でオブジェクトとして呼び出し、その後どの処理をするのか記述していく。すると、「NODE = new Node(DOM-Object); NODE.親取得;」と書くことができる。 同じDOMオブジェクトの子要素を取得したければ、「NODE.子取得;」と書けばよい。処理単位を自分が好きなようにオブジェクト化できる。 スクリプトも、差分のみ書けばよいので楽ですし、無駄なスクリプトが出来ない。
全てのJavaScriptで、「設計の見直し、再構築」を行い、新たなコンテンツの作成がどの程度でできるのか、試してみました。
出来たコンテンツが「なんとなく趣味のページ」の最新の記事です。 出力するコンテンツはあるので、XMLによる表示データの設定と新たな表示形態のXSLTの作成だけですみました。
RDF形XMLの設計とそれに伴うXSLTの作成だけなので、3時間程度で作成完了。JavaScriptとPHPの変更はほぼ無しですんだので、ほぼ目標通り。 設計をちゃんと考えて作ると、ここまで簡単に作れるものなのかと関心する。
2010年3月12日
なんとなく趣味のページのアイナメについてでcanvas要素を使って絵を作ったのだが、これだけでは面白くないので、簡易お絵かき機能を付加してみた。
mouseを押している間中、線を引くだけなのだが以外と大変だった。
表示位置がmarginやpositonやdisplay:boxで変更された場合の位置の取得が面倒だった。スクロールすることまで考えるとちょっと制御が面倒なことになる。
制御の考え方は簡単です。マウスカーソルが、canvas要素の左上からどのくらいの位置にあるのかを取得できればよいのです。
まず、マウスカーソルの位置を取得します。取得された位置は画面上での位置なので、canvas要素の左上から位置(offset)ではありません。ここからoffsetの位置を算出します。
画面のスクロールが無い場合を考えます。スクロールがないので、画面上のカーソル位置からcanvas要素の左上の位置を引けば、offsetの値が算出されます。
スクロールした場合、その値にスクロール量を足してあげれば、HTML上のoffsetが求まります。位置さえ求まれば線引きは簡単です。
現状のブラウザは、canvas要素に対してoffsetTopを返してくれません。offsetTopを返してくれない場合、DOM上の親要素でoffsetTopの情報を取得する必要があります。
2010年3月11日
canvas要素に落書きをするJavaScriptです。別途module.jsが必要になります。
Module.jsはムシムシの気分で修正されます。ムシムシが作っているのでバグがあったりします。無駄な記述があったりします。
function canvas_draw(canvas) {
		var drawing = false;
		var S_position = {x:-1,y:-1};
		var ctx = canvas.getContext("2d");

		AddEvent_obj.EventObject('mousedown', canvas_draw_start, canvas);
		AddEvent_obj.EventObject('mousemove', canvas_drawing,    canvas);
		AddEvent_obj.EventObject('mouseup',   canvas_draw_end,   canvas);

	function canvas_draw_start(evt) {
		drawing = true;
		S_position = canvas_draw.coordinates_get(evt);
	}

	function canvas_drawing(evt) {
		if (!drawing) {return;}

		var E_position = canvas_draw.coordinates_get(evt);
		var canvas = TargetEvent_obj.EventObject(evt);
		var ctx = canvas.getContext("2d");

		ctx.strokeStyle = "rgba(0,0,0,0.5)";
		ctx.lineWidth = 0.8;
		ctx.beginPath();
		ctx.moveTo(S_position.x, S_position.y);
		ctx.lineTo(E_position.x, E_position.y);
		ctx.closePath();
		ctx.stroke();
		S_position = E_position;
	}

	function canvas_draw_end() {
		drawing = false;
	}

	canvas_draw.coordinates_get = function (evt) {
		var event_Target = TargetEvent_obj.EventObject(evt);
		var offset_pro_value = StyleObject.GetOffset(event_Target);
		var offset_scroll_value = StyleObject.GetScroll();
		var Coordinates_Mouse_value = Coordinates_Mouse(evt);
		// canvas要素はoffsettopが取得できない。
		if (offset_pro_value[0] == 0) {
			offset_pro_value[0] = NodeObject.Parent(1,event_Target).offsetTop;
		}
		var offset_Y_revise = Coordinates_Mouse_value[0] + offset_scroll_value[0] - offset_pro_value[0];
		var offset_X_revise = Coordinates_Mouse_value[1] + offset_scroll_value[1] - offset_pro_value[2];
		return {x: offset_X_revise, y: offset_Y_revise};
	}
}

new canvas_draw(使いたいcanvasオブジェクト)を設定してください。
mousedownで描写開始、mouseupで描写終了です。マウスが動いているあいだ線を引きます。
canvas要素に位置を変えるstyleを指定すると上手く位置を取れないかもしれません。その場合は、offset_Y_revise、offset_X_reviseの値を変更してください。
canvas要素はIE以外のブラウザで使えます。
イベントオブジェクトを使っているので、サブスクリプトの形式で書いてます。prototypeは使ってません。
2010年2月25日
スクリプトをオブジェクト化しているとメゾットとして使うより、オーバーライドしたほうがスッキリする場合がある。
XMLをHTMLに変換する場合など、simplexmlを使って変換する場合と、xsltprocessorを使って変換する場合がある。 どっちもXMLをHTMLに変換するPHPスクリプトなので、同じ名前で処理をさせたい。その場合オーバーライドする必要がある。
まずは、メインとなるクラスを定義して、各クラスで共通で使う領域を定義する。後は別のクラスを作ってextendsで継承させて、目的の関数を上書きできればよいわけだ。
後は、オブジェクトを作る時に、XSLTを使う場合、simplexmlを使う場合で使い分けして、読み込むメゾットは同じにする。
オブジェクトで変えるのか、メゾットで変えるのかくらいの差しかないように思えるのだが、リソースの再利用って点から見るとかなり違います。 もうちょっと複雑なものを作ると差がはっきり出そうですが、複雑なものを作るのがキライな私には無理だと思う。
2010年2月3日
サンプルスクリプトを求めてくる人はいるのだが、JSファイルを覗く人は居ないようなので、「なんとなく趣味のページ」で使っているJavaScriptを記載してみる。
function xml_XSLTProcessor(xmlhttp,xslt_url){
	var xmlDoc = xmlhttp.responseXML;
	// xsltの読み込み
	if (window.ActiveXObject){
		xslt = new ActiveXObject("Microsoft.XMLDOM");
		xslt.async = false;
		xslt.load(xslt_url);
		var doc = xmlDoc.transformNode(xslt);
	} else {
		var xslt = new XSLTProcessor();
		var xsltDoc =  document.implementation.createDocument("", "", null);
		xsltDoc.async = false;
		xsltDoc.load(xslt_url);
		xslt.importStylesheet(xsltDoc);
		// XMLをXSLTでDOM変換
		var fragment = document.implementation.createDocument("", "", null);
		var doc =  xslt.transformToFragment(xmlDoc, fragment);
	}
	return doc;
}
使い方などの説明は面倒なので省く。注意することだけ書きます。
WebKit系のブラウザでは動きません。

21. SafariはXSLTをサポートしていますか?

Safari 1.3以降では、ロード時にXMLページのXSL変換をサポートしています。XSLTのサポートは、XMLページの先頭に埋め込まれた次のXSLページ処理命令に限られています。

	<?xml version="1.0" ?>
	<?xml-stylesheet type="text/xsl" href="your_transform_file_here.xsl" ?>

HTMLページ内の任意のXMLに適用するためにJavaScriptを通じてXSLTを使用することはできません。

とありますので、注意が必要です。
returnでの戻り値を、IEではDOMobject扱いをしてくれません。innerHTMLでHTML文書に反映させなければいけません。
OperaやFirefoxは、DOMobjectとして扱うので、appendChildする必要があります。innerHTMLでは反映できません。
2010年2月2日
このページによくoffsetwidthで検索をする人がいるのだが、そんなにoffsetwidthが大切なのか悩む。 個人的にはイベントが発生した要素の左上の位置のほうが気になる。
dom.offset =  function(offset_element) {
	var offset_valueH = offset_element.offsetHeight;
	var offset_valueT = 0;
	var offset_valueL = 0;
	var offset_parent = 0;
	do {
		offset_valueT += offset_element.offsetTop  || 0;
		offset_valueL += offset_element.offsetLeft || 0;
		offset_element = offset_element.offsetParent;
		offset_parent += 1;
		if (offset_element) {
			if(offset_element.tagName == 'BODY') break;
			var pos_style = offset_element.style.position;
			if (pos_style == 'relative' || pos_style == 'absolute') break;
		}
	} while (offset_element);
	offset_tbl[0] = offset_valueT;
	offset_tbl[1] = offset_valueH;
	offset_tbl[2] = offset_valueL;
	offset_tbl[3] = offset_parent;
	return offset_tbl;
}
DOMオブジェクトの左上の位置を返します。ただし、floatがあったり、table要素があったりした場合は正確な位置は返せません。
IEはborderがあると、要素によってその数値を足したり足さなかったりして正確な数字は返しません。
HTMLの書き方しだいでは値を取得できない場合があります。
img要素の場合で説明します。img要素で、height属性やwidth属性を指定しない場合、そのimg属性のoffsetwidthoffsetHeightはゼロで設定されます。
この時に、offsetwidthoffsetHeightの値を取得しても意味の無い数値が取得されます。
画像が読み込まれると、その画像のサイズがoffsetwidthoffsetHeightに設定されて、初めて値がとれます。ようするに画像が読み込まれないと正確な位置が取得できないのです。
回避するためには、画像の読み込みの終了を待ってスクリプトを動かす。または、width属性やHeight属性を指定する。という方法があります。
width属性やheight属性の値はそのままoffsetwidthoffsetHeightの初期値としてセットされます。正しいwidth属性やHeight属性を記述しておけば、ある程度正しい位置が取得できるのです。
個人的に、必要なwidth属性やheight属性は記述したほうが良いと感じます。
2010年1月7日
いつもいつものことなのだが、JavaScritptのオブジェクトの処理でハマる。JavaScriptを細かくしすぎているなのかもしれないが、常に忘れている。
オブジェクトとスクリプトエンジンと描写エンジン。でも書いているのだが、JavaScriptのオブジェクトは、処理が描写エンジンに渡っても同一のオブジェクトの値は変更される。
appendChildinnerHTMLする処理を動かす場合は、一対一になるようにオブジェクトを定義しなければ上手く処理をしないのである。
やっとlocation.searchでリンクされた場合にコンテンツを表示するようになりました。
もともとは、関数のデータの受け渡しにオブジェクトを使ってなかったのだが、XMLHttpRequestを一つにまとめるために多くの引数が必要になってしまった。 引数を大量に書くより、new Objectでオブジェクトを使って、連想配列でデータを格納したほうがスクリプトがすっきりする。
問題もある。私のスクリプトはオブジェクトを意識しないで作ったスクリプトが多いので、名前の統一に苦労する。
最近の人達は初めからオブジェクト指向プログラムに携わるのだろうけど、私みたいな年を食った人間はオブジェクト何???。とにかくなんでもいいから動くスクリプトを作ればいいじゃん。 ってノリで作るので、設計もなにも考えずに作ってしまう。だから、後から困ってしまうのである。
設計は大事だなぁ。と最近つくづく思います。