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

このページについて

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

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

本当のページが全部インデックスできたら、すごいなぁと関心します。

２００９年１２月２８日
PHPでxsltprocessor()が使えるという話をきいたので、このレンタルサーバーでも可能なのかためしてみた。
結果できた。ただし、XSLTの処理にバグがある。
elementで要素を追加する。次にcall-templateで他のテンプレートをコールする。コールしたテンプレートの一番初めに、attributeで属性を追加する。
call-templateで処理が分かれるがattrbuteが直前に指定されたelementの属性になるはずだから、call-templateで分断されても、きちんとelement の属性として追加されないと困る。Operaでも、Firefoxでも、IEでも、ちゃんとcall-templateをはさんだelementとattributeの処理をしてくれる。
実際、ifやchooseなどの分岐で、状態毎に違う属性をつけてたテンプレートの処理をしたい場合もあるはずなのだが、これでは出来ない。
属性を設定してからcall-templateすれば問題ないのだが、新しいテンプレートで属性の処理をしたほうがCSSなどを設定する場合わかりやすくなる場合がある。
しかし、自分のPCでJavaScriptでxsltprocessor()を使うより表示が早くなった。
２００９年１２月２４日
HTML5のcanvas要素はJavaScriptを使って絵が描けます。HTMLとJavaScriptがセットとなって使用します。
これも、サンプルが必要だと思います。なんとなく趣味のページのアイナメについての仕掛けのコーナーの「ヘチ沿いを狙う」をクリックしてみてください。 対応しているブラウザなら「仕掛けのメモ」に絵が出ているはずです。IE以外の視覚系ブラウザの最新版なら表示できているはずです。
JavaScriptを使うので当然JavaScriptがONになってないと見れません。
絵を描くためのJavaScriptは通常のJavaScriptと違い、絵を描くための記述で描いていきます。
canvas要素のDOMを取得して、その要素に対してbeginPath()で記述の開始を指定。それから座標を指定して、四角や丸や線を描いていきます。
四角なら、Rect、線ならlinetoと書いていきます。
JavaScriptなので、同じ図形を等間隔に描く場合は、ループと加減算を用いて記述できます。その点はSVGより楽です。
たぶんSVGとの比較となると思います。
SVGはxlinkでJavaScriptが使用でき、各描写される図形もそれぞれがDOMオブジェクトとして取得でき、DOMオブジェクトにイベントを指定することができるので、 canvas要素より複雑なことができると思います。
例えば、なんとなく釣りのページのアイナメについてのSVGがわかりやすいと思います。 の仕掛けのコーナーの「ヘチ沿いを狙う」にSVGで描いた絵があります。赤い楕円にカーソルを乗っけると色が変わって説明が表示されます。クリックするとそのポイントで釣れる魚の説明が表示されます。 SVGではこれが以外と簡単に作れます。（ポイントの説明は別途スクリプトが必要ですが）
canvas要素は、DOMオブジェクトとしては、絵一枚が一つのオブジェクトとなります。従って絵のなかにオブジェクトを作ってイベントを指定することは難しいです。 しかし、JavaScriptで描写するので繰り返し同じ絵はループを使って描けたり、アニメを作るのもSVGに比べたら楽だと思います。
アニメーションとなるとFLASHとの比較となるのでしょうが、アニメを作るだけならFLASHのほうが楽です。ただしプラグインが必要です。canvas要素にはプラグインは必要ありません。 JavaScriptが使えれば見れるというメリットがあります。
FLASHでアニメは簡単なこの程度のものなら１時間程度で作れます。そのくらい楽です。
XML+JavaScript+HTMLの知識がないと使えないSVG、作成ソフトがないと作りにくいFLASH、JavaScriptだけわかれば使えるcanvas。それぞれ一長一短があります。
使い分けが必要だと思います。個人的にはcanvasは簡易的な図解というイメージをもちました。
２００９年１２月２３日
この話題は２００９年１２月２３日時点Fx3.5かSafari4を使ってないと話がサンプルページがきちんと表示しません。
CSS3で面白いと思った機能は次の３つ
なんとなく趣味のページのイワシの料理を例に説明します。
段組が簡単に作れる。
display: box;,box-flex:を使います。
display: box;の指定がしてある要素のブロック要素の子要素は全て横ならびになります。高さは配置されているブロック要素の最大値に統一。幅は各ブロック要素の値になります。 横幅は自動的に画面サイズの中に納まるようにはならないので注意が必要です。
box-flex:子要素の幅の状態を指定します。ある要素を幅固定にすると、box-flex:が指定されている要素の幅が可変して画面サイズに合わせて変化します。 本来は、box-flex:の値の合計で割合を指定する使い方をします。
floatを使うとoffsetの位置決め等でデザインが面倒になる場合があるのだが、そんなことを気にせずに段組を作れる。
サンプルのページでは、div要素にdisplay:box;を指定して、目次と本題の二つのブロック要素を子要素として用意してます。hr要素が縦になるのも面白いです。
ボーダーに画像が使える。
border-image: url(img/scotch-tape.png) 2 8 2 5 / 2px 8px 2px 5px;画像を指定の位置で分割、/の後ろはborder-widthを指定する。
サンプルページのテープで貼ってあるように見える部分です。
要素を変形することができる
transform:で要素を回転させたりすることができます。
サンプルページのテープで貼ってあるように見える部分が斜めになっている部分です。
target擬似属性が使える
a要素のhref=#xxxxxで指定された部分が選択された場合、その選択された部分のスタイルを指定できる。
サンプルページのテープで貼ってあるように見える部分が、目次から選ばれた場合色が変わる
２００９年の野菜の栽培日記を例に説明します。
カラムが簡単につくれる。
column-count:,column-gap:,column-rule:一つの要素を指定の数で割ります。
サンプルページで２段になっている部分です。
子要素の偶数、奇数、任意選択でスタイルが指定できる
:nth-of-type(),:nth-last-of-type()要素の子要素の出現順番に対してスタイルを指定します。
()の中に数値,even,oddで指定します。
サンプルページでは、borederの指定に使ってます。
２００９年１１月２７日
PHPでCSVにデータを扱う処理は、コメントの読み書きとアクセスログの書き込みがある。全てCSVファイルを使うので一つのオブジェクトとしてしまうとわかりやすい。と思った。
HTML側からは、JavaScriptでPHPをコントロールするように値をPOSTする。
PHPではPOSTされた内容により、CSVからデータを取り出す、書き出すという処理をする。
Object化されたPHPをコントロールするためのPHPScriptを作り、PHPScript経由でPHPObjectを使用する形にする。
JavaScriptでは、コントロールするためのPHPScriptにPOSTで通信をするようにすれば、複数のページから同じPHPObjectを簡単につかえるはずです。
JavaScriptで必要な情報をコントロールするためのPHPScriptに与えれば、必要な情報を返すようになったのはいいのだが、 前に作ったPHPやJavaScriptの変数のつけ方がいい加減だったので名前を統一しなくてはならないという問題が発生した。
地道に直してはテストしてを繰り返しやっと終了。初めからきちんとした名前をつけて作ればよかったと思いました。思いつきで作るとこうなるのです。
２００９年１１月１０日
ページを読み込んだ場合、コメントの読み込み。コメントを登録した場合、コメントの登録→読み込み。コメントの読み込みが同じロジックを使う。
関数化して共通処理として使おうかと思ったのですが、PHPでもObjectとして使える。
classを定義して、コメントの読み込みの関数をメゾットとして使えるようにする。
PHPでの読み出しは、変数にclassで定義した文字をnewでObjectとして登録する。すると、そのObjectを使いそのclassに指定されている関数をメゾットとして使うことができます。
関数として使うよりは、見た目にわかりやすい。JavaScriptでもObject化しているので、PHPでもObject化したほうがわかりやすい。
似たスクリプトでTrackbackを読み込むPHPもある。同じ処理系なので、同じObjectのメゾットとして登録しておく。
関数として独立させておくより整理されていて良いと思う。汎用性のある処理をObject化すればもっと使いやすくなると感じた。
２００９年９月４日
HTML5にブラウザが対応している。
なっとく出来るマークアップがあるので使ってみようと思う。Web文書にはWeb文書のマークアップが必要なのだろう。
しかし、HTML4.01よりも面倒になる。一般ユーザーというより、Webアプリ開発者向けの仕様だろう。
しかし、困ったことにIEがまったく対応していない。要素を使うとJavaScriptがエラーを起こしてしまう。
IEに対応しながら、HTML5のマークアップを使うとなると使い方が凄く限られる。
WAIのガイドラインには、「全情報がテキストでも利用可能であることを保証する。」とある。ので対応しなくてはならない。
仕様やガイドラインを守ると煩わしいことがいっぱいでてくる。
しかし、現実問題IEが対応しないと使えないと思う。
IEはいつまで足を引っ張るつもりなのだろうか？
２００９年９月３日
SVG+Scriptでポイントを紹介しているコンテンツがあるのだが、もう一ひねりしてみることにした。
SVGはXMLなので、名前空間をきちんと指定してあげれば、他の語彙も問題なくつかえるはずです。
eventの指定してある場所に、SVGの指定の以外のデータを属性として持たせることが可能なはずです。
具体的には、ポイントを紹介しているSVGでポイントを押すと、そのポイントで釣れる魚を表示するようなことをする。
まず、SVGに魚のデータがあるXMLの文書のURLを指定する。foaf:Documentで指定すればよい。
どの魚が釣れるのかのデータも記述する必要もある。これはfoaf:nameで指定する。
新しいwindowを開いて、foaf:documentとfoaf:nameの情報をもとに、データを表示すればよい
きちんとXMLの処理ができるのなら、問題なくSVGの表示とデータの表示をするはずである。
Firefox、Opera両方とも、表示しました。
２００９年６月１８日
JavaScriptのオブジェクトについて調べてみた。
var obj = new Object()で作るオブジェクトとvar tbl = new Array()もvar ans = 3も、格納される型は連想配列しか存在しないらしい。
Array(5)と書いた場合、「５個の配列を設定する」訳ではなく、「この配列は５個ですよ」と明示しているだけでプログラム的に意味はもたない。
添え字を与えたぶん配列は増えていきます。
オブジェクトも連想配列に格納されます。obj.date = "2009/06/18";とobj["date"] = "2009/06/18";は同じ領域に格納されます。
全て連想配列に格納されるので、領域定義は明示する以外に意味をなさない。
htmlと通信した場合、string型でしか通信しませんという使用に合致する。要はHTML周りにはstring以外の型は存在していない。
そう頭に置いて、JavaScriptやhtmlの仕様を見てみると、あぁ、連想配列なんだなぁ。と改めて気づく。
childNodeを使う場合、TextTypeを調べてうんぬんっていうのも、まぁ、そういうことかと思う。
HTML周りは連想配列の世界だとわかると、別の考え方も生まれる。
JavaScript以外でもう、やっていることなのだが、XMLのデータを上手く使って、簡易DBを作ることもできる。これは連想配列の最大の利点だと思う。
しかし、XMLを利用した簡易DBをJavaScriptでやろうとは思わないですが。XSLTを使ったほうが楽だと思う。
２００９年４月１３
ブラウザのオブジェクト管理のしかたを勘違いすると下記のような問題に遭遇する。
同じJavaScript関数で同じXMLHttpRequestObjectを使い、同じDOMオブジェクトを使い、同じdocumentのDOMオブジェクトに追加した場合。
  1. for文で２回ループする関数を作る
  2. XMLHttpRequestObjectでデータをGET
  3. XSLTProcessor関数を使いDOM変換
  4. 変換後のDOMをdocという名前の変数に格納
  5. 格納したdocをgetElementByIdで取得したDOMオブジェクトにappendChildする。
appendChildした後に、XMLHttpRequestObjectを使うのでスクリプト的には問題はありません。このXMLHttpRequestObjectは使用済みです。
ここで処理はスクリプトエンジンから描写エンジンに移ります。描写エンジンはappendChildされた内容の描写を開始します。
この時、スクリプトエンジンは次の読み込みを開始してます。2、3、4は問題なく処理します。
4番目の処理が完了すると、描写中のDOMオブジェクトが新しい内容に書き換えられてしまい、書き換えられた状態で描写を続けます
１回目のappendChildされた描写（書き換えられたDOMオブジェクトの描写）が終わってから２回目のappendChildが実行されるので、状況によっては、２回目の内容がダブって描写されることも考えられます。
同じイベントオブジェクト、同じ通信オブジェクトと同じDOMオブジェクトの場合、appendChildされて描写途中であってもDOMオブジェクトの内容は書き換えられます。
同じイベントオブジェクトで違うXMLHttpRequestObjectを使い、同じ名前のDOMオブジェクトを使い、同じdocumentのDOMオブジェクトに追加した場合。
  1. for文で２回ループする関数を作る
  2. XMLHttpRequestObjectでデータをGET
  3. XSLTProcessor関数を使いDOM変換
  4. 変換後のDOMをdocという名前の変数に格納
  5. 格納したdocをgetElementByIdで取得したDOMオブジェクトにappendChildする。
  6. その後、別のXMLHttpRequestObjectを用意して、2～5の処理をする。
１回目のappendChildされた内容を描写エンジンは描写します。
２回目の処理が動いた場合、同じイベントオブジェクト、違う通信オブジェクトと同じ名前のDOMオブジェクトなので、別のDOMオブジェクトとみなされ、 １回目のappendChildされたDOMオブジェクトとは別のオブジェクトと認識されます。
DOMオブジェクトが書き換わってないので、１回目のDOMオブジェクト、２回目のDOMオブジェクトが混同されることなく描写されます。
ただし、描写中にスクリプトが処理をする形になるので、ブラウザには負荷がかかります。
基本的にブラウザの制御はイベント単位で行われます。HTMLのURLを叩いてホームページを表示させる場合は、windowかdocumentオブジェクトに対してloadイベントが発生します。
loadイベントは描写が完了した状態で終了するので、それに付随するスクリプトも描写終了で完了という形をとります。
他のイベントも同じ形態をとるはずなので、スクリプトで指定した描写まで終了していればスクリプトで設定したオブジェクトも開放されます。
イベント別にオブジェクトが管理されるので、同一イベントで同じオブジェクトが使われないようにスクリプトを組めばよいことになります。
スクリプトで描写する場合、イベントとオブジェクトの管理をきちんとやらないと表示に時間がかかることになります。
２００９年４月９日
CSSのセレクタの重みをメモしておく。一回しらべたのだが忘れてしまったので、こっちも書いておく。
*→0,0,0,0で0になる。
TAG（ulやpなど）→0,0,0,1で1になる。
擬似クラス（:first-line）→0,0,0,1で1になる。
属性セレクタ（クラスセレクタも属性セレクタの一部）（foo,foo=[]）→0,0,1,0で10になる。
idセレクタ　→0,1,0,0で100になる。
style属性　→1,0,0,0で1000になる。
ul li.classは0,0,1,2で12になる。ul li#idは0,1,0,2で102になる。
  1. ul li#id {font-size:100%;}
  2. ul li.class {font-size:80%;}
  3. ul li {font-size:60%;}
となっていた場合、重みは上から、102、12、2となり、適応されるfont-sizeは100%になります。
出現順ではないので注意が必要です。
２００９年３月２７日
アクセスログをまとめてみたら、本館と別館で閲覧するブラウザの傾向が違う。
アクセス状況
ブラウザ名別館本館
Chrome5.4%0.0%2.8%
Firefox39.3%11.3%25.7%
IE42.9%84.9%63.3%
Opera7.1%3.8%5.5%
Safari5.4%0.0%2.8%
別館はWebの話題を扱っているせいか、非IE率が高い。57.1%がIE以外のユーザーである。
Fxが多いのは予想の範囲なのですが、Safari,ChromeのWebKitが合計10.7%と高い。WebKitは、「XSLTProcessor」という検索キーワードで８件のアクセスがあるので、 「XSLTProcessor」の情報を求めてこのページにきているものと思われます。
本館のアクセスログは、検索エンジンで検索できないページのアクセスを拾ってます。トップページからリンクを辿らないと見れないページです。
釣りや観察の話題中心なので、Webの話題に興味がない人たちが集まってます。そのためなのか、IEが84.9%のアクセスがあります。 検索エンジンからアクセスできるページでの平均IE率は大体90%なので、5%程度ほど低い。
WebKit系のブラウザはアクセスできないので0%なのですが、アクセスできるページのログをみても0%のアクセスなので、WINユーザーの一般人にはまったく使われてないブラウザなのでしょう。
Operaの3.8%はびっくりです。これは、私のページ独特の現象でしょう。
しかし、IE8の閲覧は一つもない。
２００９年３月２４日
「IE8にするとレイアウトが崩れるページがある。」と書いて「meta文を追加すれば直ります。」と書いてある。
レイアウトが崩れる原因が書いてないのだが、IEの独自拡張をマイクロソフトが捨てたために起こっている現象である。
IE7までは、CSS2.1さえろくにサポートしていないのでCSSの実力を発揮できていなかった。
IE8でちゃんとと表示させたければ、HTML+CSSを覚える必要がある。
IEベースでCSSを覚えていた人は、子供セレクタや隣接セレクタをしらない。こういう人たちは非効率なCSSを書き続けるわけだ。
そんな人たちは無視して、ブラウザの標準準拠には取り組んでほしい。
xmlHttpRequestのonloadやXSLTProcessor()をJavaScriptだけで動くようにして欲しいよなぁ。ついでにSVGもプラグインなしで描写するようにして欲しい。
２００９年３月１９日
たいしてアクセスがある訳ではないのだが、検索エンジン経由で「HTML版ホームページについての日記」にアクセスしてくる人がいる。２７件ほどのアクセスしかないのだが、面白い傾向がみられる。
１６件がWebKitに関係するブラウザの検索だった。そのうち８件はXSLTの検索、そのうち６件はJavaSCriptとXSLTの検索だった。いがいとWebKitでXSLTProcessorが使えないことに不満を感じている人が多いと思う。
Opera+JavaScriptの検索が６件。以外と多い。
変わったところでは、「楽天　safari3.2　閲覧できない」「safari3.2 Webページ　表示されない」なんていうのもある。Safariは表示できないページが以外に多いのかもしれない。
いまいちわからないのは「JavaScript EnterKey イベントを発生させる」である。普通にEnterKeyを押せばイベントが発生するものであって、Scriptで発生させるものではないと思うのだが……
width属性に関する検索が２件。この辺りの話はコアな話なので本当に疑問をもった人がきたのだろう。
まぁ、普通の話題にのぼらないキーワードばかりだなぁ。
２００９年３月１６日
SVGでは値をurl(#～)で指定できる。普通に使う分には問題ないのだが、fillでlinearGradientを指定する場合fill:url(#～);と記述しなくてはならない。
url(#～)の書き方は、rdf:IDの書き方と同じように見える。参照される側はrdf:ID="aaaaa"、参照する側はrdf:resource="#aaaaa"と記述するようになる。
この記述はXMLの方法であって、CSSの記述方法ではない。外部CSSにXMLの記述をした場合、うまく変換してくれない。
ScriptでStyle属性を変更すると上手くいく。当然、Style属性を記述した場合でも上手く適応してくれる。
CSSをSVGの中に書いても適応してくれる。外部ファイルにした場合適応しないのは何故だ。
別ファイルにした場合、IDが探せなくなっていることが考えられる。XSLTでXMLでrdf:IDを含んだデータを利用する場合、利用するXMLデータのDOMを利用してデータにアクセスするのだが、 url(#～)の場合、自分自身のdocumentの中のIDを探すという指定に見えるので、外部ファイルにした場合、どこのIDなの？ってことになっているのかもしれない。
しかし、～.xmlのDOMにCSSとしてfill:url(#～);を指定しているのだから、CSSでその指定がしてあるDOMのスタイルは当然～.xmlのIDの値を参照するべきなのではないか。
xmlの中に書いて適応できて、外部ファイルの場合、IDを見失うのはバグだと思う。
２００９年３月１５日
SVG+JavaScriptが他のブラウザではどこまで使えるのか試してみた
Firefox。特別に大きな問題はない。
Opera。JavaScriptのlocation.hrefが使える。
Safari。フォントの解釈がFirefoxやOperaと違うので、あまり綺麗には表示しない。clickイベントが最初の文字にのみ設定されている。
Chrome。フォントの解釈がFirefoxやOperaと違うので、レイアウトが崩れる。linearGradientが使えない。
IE。SVGを知らないので論外。
Firefox以外は、実用レベルではないと思う。Operaはリンクのありかが明示できればとりあえず使えそうです。しかし、表示時間がかかりすぎる。 Safariは、clickイベントが要素全体に適応できてないのは問題。要素全体にclickイベントが適応されないと使い難い。Chromeは表示の問題で使えないです。
２００９年３月１４日
FirefoxやOperaでは、CSSでいろいろ出来る。特にSVGにたいしても不完全ではあるが、外部スタイルシートを適応できる。
しかもFirefoxではJavaScriptまで外部スクリプトとして適応できるので使い道がかなりある。
そういう訳で、SVGによるメニューを作ってみた。
XMLデータの利用のページとして、図鑑のページを作った。このページはXML+XSLTでXMLをHTMLに変換して表示している。他のページと違いJavaScriptを経由していない。 HTMLを経由しないでXMLのデータを活用しようという試みです。
そうすると、メニューもXMLでと思いたくなる。FOAFなどデータを作ってXSLTで変換して作ってもよいのでしょうが、いまいち芸がない。
自分の興味だけで作る「なんとなく趣味のページ」のコンセプトにあうやり方は、SVG+CSS+JavaScriptでのメニュー作成でしょう。
そうすると、SVGメニューが動くFirefoxとその他のブラウザの切り分けをして、SVGが動かない場合は検索エンジン用のHTMLのメニューを見るようにした。
XLINKでPHPをリンクしてみたが動かなかった。HTMLではないのでPHPでは動かなのかなぁ。XSLTでHTMLに変換した場合は動くのですがね。
２００９年３月８日
JavaScriptでlocation.searchでURLを変更しているのだが、locationを使うとブラウザがリロードしてしまう。 ブラウザがリロードされてしまうと、表示したメニューが消えて一番初めの状態に戻ってしまう。せっかくメニュー変更したのに、初期メニューに戻ってしまってはユーザビリティー的に悪い。
location.searchで獲れる情報からメニューを変更するように修正。
これで、どのページを見ているのか迷子になる確立は減ると思う。
２００９年２月２７日
ジオのアクセスログをとるPHPに直接アクセスしてくるIPを発見した。
調べてみるとトレンドマイクロと富士通がアクセスしている。トレンドマイクロはウィルスバスターのURLフィルターのアドレスでアクセスされている。
スパイみたいな動きをしているPHPなのでURLフィルターでチェックされているのかもしれない。チェックされると面倒なので、404を返そうと思う。
PHPのスクリプトでヘッダー情報を404をセットしてスクリプトを抜ける処理にして404を返そうとしたが、リボンのサーバーは広告を付けてしまうので、404が返らない。
PHPを格納しているフォルダーに.htaccessで、ウィルスバスターのURLフィルターらしきアドレスのアクセスを拒否する。
ついでに富士通のアクセスも拒否に設定。アクセスされれば403を返す。アクセス拒否だが仕方がない。
とりあえずこれで様子見です。
２００９年２月２０日
アクセスログを取得しているのだが、作ってみて見難かったり項目が足りなかったりしていたのでこの際だからと修正をした。
IPアドレスは取得していたのだが、アドレスだけだと見た目にどの接続業者からのアクセスなのかわからないので、ホスト情報も記録するようにした。これで、who isでの検索しなくても接続業者がある程度特定できると思う。
並びも統一してみた。日付、IPアドレス、ホスト、アクセスされたURL、ブラウザ情報、リファラの順番にした。
googleとyahooはURLに検索キーワードがはいっているので、検索キーワードを取得してデコードして情報を取得するように変更。
これでずいぶん使いやすくなると思う。
このページで公開しているアクセスログは直してないのですけど。直しているのは非公開のアクセスログです。
２００９年２月１９日
なんとなく趣味のページはPHPやCGIなどのサーバー系のScript言語が使えないので自分のアクセスログが取れない。
XMLHttpRequestを使って１つのURLで複数のコンテンツを表示するので実際にどのページを見ているのかわからない。
表示の方法を少し変更してアクセスログを取ってみる。
PHPを使えるribonのサーバーにアクセスログを記録するためのPHPを用意する。PHPをgeoのhtmlからscriptタグで呼び出すために、 ヘッダーをheader("Content-Type: application/x-javascript");にしてJavaScriptのように偽装する。
loadイベントでPHPが動くのですが、postする訳ではないので、URLにページ情報をいれてPHP側でURLを取得して記録する。
ページを見るたびにloadイベントが発生するが、ログをとるためには仕方がない。
２００９年２月１３日
メニューが多いとなんか見難い。前月のメニューは隠してしまおうと思う。
隠したメニューを表示するようにするため、メニュー用のRSSを集成をする。
dc:formatの内容を修正する。dc:identifierのURLが示すファイルが
ATOMの場合
application/atom+xmlにした。
RSSの場合
application/rdf+xml
HTMLの場合
text/html
それに伴い、PHPでRSS1.0をHTMLを変更するとき、a要素にdc:formatの値を持つtype属性を追加する。
JavaScriptも変更する。type属性が
application/atom+xmlの場合
リンク先のURLのATOMの内容をコンテンツとして表示するclickイベントを追加する。
application/rdf+xml
リンク先のURLのRSS1.0の内容を、メニューとして表示する。
text/html
リンク先のURLに移動する。
これで修正完了。
２００９年１月２４日
CSSのfloatの扱いはちょっとめんどうくさい。
<div>
<div id="a">あ</div>
<div id="b">い</div>
<div id="c">う</div>
</div>
上のHTMLに下のCSSを適応させる。
#a {float:left; width:5em;}
#b {float:left; width:5em;}
id="a"とid="b"の境界は完全に重ならないのだが、id="c"の境界はid="a"と同じ場所から始まり、テキストエリアだけがid="b"の左に表示される。 境界をはっきりさせたい場合、id="c"にもfloatを指定しなくてはならない。境界が重なると、重なった要素に影響をあたえる場合がある。
JavaScriptで要素を追加した場合、自分の要素の一つ上の要素（兄の要素）のhightやwidth要素の値を継承したりする場合がある。そうすると不必要な空白ができてしまう。
境界を重ねるか、重ねないかはデザインの世界でケースバイケース使いわければ良い。しかし今回はこの違いを忘れて困っていた。
もうひとつ困ったことがある。div要素の子供のdiv要素にのみfloatを使いたいのだが、IE6を無視すれば、div < div {float:left;}と書けるのだが、IE6は子供セレクタを知らない。 floatでなければ無視するのだが、floatでIE6を無視すると見にくくなってしまう。アクセス解析を見てみると、IE6がまだ５割もあるので無視できない。
div  div {float:left;}
div div div {float:none;}
とするか 
#a {float:left;}
#b {float:left;}
#c {float:left;}
とするしかない。
中途半端なブラウザなんか使わないで欲しい。IEはNN4と同じだよなぁ。NN4の時代はNETをやっている人が少なくてNN4はわりかし早く小数派になったけど、これだけNETを見るだけの人が増えると技術なんて関係ない人が大半で、 古いブラウザの弊害なんか考えないのだろうなと思う。
とりあえず、早くIE6は消えてしまえばよいのにと思う。
２００９年１月１９日
横幅の指定ををピクセルでどうのこうの言っているページを見かけた。ピクセルでどうのこうのより、「行の文字数はいったい何文字が読みやすいのか」で考えたほうがよいのではないのかと思う。
フォントをいじってない状態で、大手のサイトはは４５文字～６０文字くらいの文字数になっています。６０文字を超えないくらいが文字数としてよいと判断。
右メニューと左メニューどちらがよいのかは不明。メインコンテンツが真ん中になりそうな場合は右メニュー。メインコンテンツが真ん中になりそうもない場合は左コンテンツにしてみよう。
幅をピクセルで決めるよりは良いように思える。まぁ、文字サイズは閲覧者が指定するものなので、無駄な話になりかねないのですが……
まぁ、自分が見やすければ良いか。
２００９年１月１８日
メニューの表示用のデータフォーマットをRSS1.0にしていて、個別記事のデータフォーマットを勝手に作ったXMLにしていたのだが、気分的にしっくりこなかった。
ATOM1.0に変更することにした。そうするといまあるXSLTを流用して使うことができる。
リンクを右クリックで新しいタブで開くと、ATOMを認識してブラウザ独自のスタイルで表示するのが気になるが、このあたりのブラウザの機能は気に入らない部分なので、 直す気はない。作成者のスタイルを優先するのか、独自スタイルを優先するのかは、ブラウザの使用者が決めることで、ブラウザが決めることではない。
HTMLのスタイルは作成者のスタイルを優先するのか、独自スタイルを優先するのかを決めれるようみなっている。XMLだって同じだと考える。製作者が表示スタイルを決めれるのだから、 製作者の意図も反映できるようにするべきである。
とりあえず、基本的な部分はこれで完了かなぁ。まだ直すとは思いますが。
２００９年１月１５日
このところ１日中PHP漬けなのだが、相変わらずIEの挙動に悩まされる。
$_FILES['XXXXXXXX']['type'];の挙動がIEのみ変なのである。OPERAやFirefoxならCSVファイルをtext/csvと返すのだが、IEはtext/plainを返してくる。
PHPの仕様を見ると、ブラウザの設定によって変わると書いてある。正しく認識できないブラウザの場合、text/csvを返してこないわけだ。
ヘッダーくらいちゃんと返せばよいのにと思うが、ブラウザによって値が変わるのでは使い物にならない。$_FILES['XXXXXXX']['name'];で、アップするファイルの拡張子を調べたほうが確実に思える。
出来たと思ったのに変更です。参考にしたPHPのサンプルがマズイことになる。本家を見ない私も悪いのだが、変なサンプルはやめてほしいよなぁ。
２００９年１月１４日
「トラックバック技術仕様書」を発見した。movabletypeがでどころらしい。
トラックバックはweb サイト間のピアツーピア通信/通知のためのフレームワークということらしい。小難しくかいてあるが、「web サイト間の相互情報交換のための仕組み」なのである。
例えば、太郎さんが花子さんの記事を見て、太郎さんが自分のサイトに「僕ならこう思うよ」と書いて、花子さんのサイトに通知する仕組みなのである。
その仕組みが小難しく書いてありますが、HTTPで通信するならば、POSTかGETのいずれかが普通。２バイト文字を考えれば、GETという選択はなくPOSTで行うほうが現実的である。 POSTで通信するためには、Content-Type: application/x-www-form-urlencodedは必ず設定しなくてはならない。
従って、単純に作ったトラックバックを受信するスクリプトなら、HTMLのFORM要素で必要な項目がPOSTされれば、トラックバックは受け取れるはずです。
トラックバックでPOSTされる内容は以下の通り。
書けるデータの型は指定されていません。当たり前というばそうなのですが、urlは「uri」を指定する。その他はリテラルな文字列（マークアップを含まない文字列）にしたほうが良いと思います。
戻り値は次のxmlを返します。
成功した場合 
<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<error>0</error>
</response>
失敗した場合 
<?xml version="1.0" encoding="iso-8859-1"?>
<response>
<error>1</error>
</response>
ようは、「タイトル」と「要約」と「URL」と「ブログ名」をPOSTするから、受け取って好きなように使ってください。という仕組みみたいです。
２００９年１月１１日
トラックバックを受け付けるPHPのサンプルを見つけたのでちょっとつくってみた。サンプルには基本的な仕組みは簡単と書いてあったのでサンプルを眺めてみる。
確かにトラックバックを受けるだけなら簡単そうです。相手がPOSTしてきた情報を記録するだけで、そんなに面倒ではない。
記録する方法がDBではないのでその辺のエスケープ処理がちょっと面倒。それさえできればあとはウン簡単。
HTMLとPHPとの通信はJavaScriptのxmlHttpRequestを使っているので、JavaScriptがonになっていないと見れません。
表示だけなら意外と簡単に作れました。相互通信に興味はないので、送信機能をつくる気にはならないのですが。
２００９年１月９日
こちらのサイトで唯一まったくPHPを使わないでいた日記のページをPHPを使って表示するようにした。
JavaScriptでxmlHttprequestのみでコンテンツを作成するので、キャッシュされる心配はない。
OperaやFirefoxはapplication/rdf+xmlでrel="alternate"を書くとフィードを認識しません。 rssであっても"application/atom+xml"と書かなければならないので、個人的にはすごく違和感を感じる。
rel="alternate"と書いてあるのだから、typeに関わらずフィードと認識してくれればよいのに。
２００９年１月７日
PHP+xmlHttprequestで日記を作ってみた。
IE7以下が余計な処理をしてくれるので、かなり困った。IE7以下のためにかなり修正させられた。
まったくIE7以下なんてなくなればいいのに、本当に邪魔。
Firefox、Opera、safari、IE8ならいいのにね。
２００８年１月６
A要素にfocusイベントを使った場合、マウスとキーボードでイベントの発生違うので困る。
マウスの場合、A要素にマウスカーソルを乗っける→mouseイベントの発生。マウスのボタンを押す。→focusイベントの発生。この時にclickするとclickイベントも発生する。
キーボードの場合、A要素をキーボードで辿る。→keyイベントとfocusイベントが発生する。Enterキーを押す。→clickイベントが発生する。
focusイベントとclickイベントの発生のタイミングが違うのです。これは使いにくい。
使おうと思っていたが、使いにくいので却下です。

楽天モバイル[UNLIMITが今なら1円] ECナビでポインと Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜！


無料ホームページ 無料のクレジットカード 海外格安航空券 解約手数料０円【あしたでんき】 海外旅行保険が無料！ 海外ホテル