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

このページについて

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

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

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

2009年12月28日
PHPでxsltprocessor()が使えるという話をきいたので、このレンタルサーバーでも可能なのかためしてみた。
結果できた。ただし、XSLTの処理にバグがある。
elementで要素を追加する。次にcall-templateで他のテンプレートをコールする。コールしたテンプレートの一番初めに、attributeで属性を追加する。
call-templateで処理が分かれるがattrbuteが直前に指定されたelementの属性になるはずだから、call-templateで分断されても、きちんとelement の属性として追加されないと困る。Operaでも、Firefoxでも、IEでも、ちゃんとcall-templateをはさんだelementとattributeの処理をしてくれる。
実際、ifchooseなどの分岐で、状態毎に違う属性をつけてたテンプレートの処理をしたい場合もあるはずなのだが、これでは出来ない。
属性を設定してからcall-templateすれば問題ないのだが、新しいテンプレートで属性の処理をしたほうがCSSなどを設定する場合わかりやすくなる場合がある。
しかし、自分のPCでJavaScriptでxsltprocessor()を使うより表示が早くなった。
2009年12月24日
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でアニメは簡単なこの程度のものなら1時間程度で作れます。そのくらい楽です。
XML+JavaScript+HTMLの知識がないと使えないSVG、作成ソフトがないと作りにくいFLASH、JavaScriptだけわかれば使えるcanvas。それぞれ一長一短があります。
使い分けが必要だと思います。個人的にはcanvasは簡易的な図解というイメージをもちました。
2009年12月23日
この話題は2009年12月23日時点Fx3.5かSafari4を使ってないと話がサンプルページがきちんと表示しません。
CSS3で面白いと思った機能は次の3つ
なんとなく趣味のページのイワシの料理を例に説明します。
段組が簡単に作れる。
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で指定された部分が選択された場合、その選択された部分のスタイルを指定できる。
サンプルページのテープで貼ってあるように見える部分が、目次から選ばれた場合色が変わる
2009年の野菜の栽培日記を例に説明します。
カラムが簡単につくれる。
column-count:,column-gap:,column-rule:一つの要素を指定の数で割ります。
サンプルページで2段になっている部分です。
子要素の偶数、奇数、任意選択でスタイルが指定できる
:nth-of-type(),:nth-last-of-type()要素の子要素の出現順番に対してスタイルを指定します。
()の中に数値,even,oddで指定します。
サンプルページでは、borederの指定に使ってます。
2009年11月27日
PHPでCSVにデータを扱う処理は、コメントの読み書きとアクセスログの書き込みがある。全てCSVファイルを使うので一つのオブジェクトとしてしまうとわかりやすい。と思った。
HTML側からは、JavaScriptでPHPをコントロールするように値をPOSTする。
PHPではPOSTされた内容により、CSVからデータを取り出す、書き出すという処理をする。
Object化されたPHPをコントロールするためのPHPScriptを作り、PHPScript経由でPHPObjectを使用する形にする。
JavaScriptでは、コントロールするためのPHPScriptにPOSTで通信をするようにすれば、複数のページから同じPHPObjectを簡単につかえるはずです。
JavaScriptで必要な情報をコントロールするためのPHPScriptに与えれば、必要な情報を返すようになったのはいいのだが、 前に作ったPHPやJavaScriptの変数のつけ方がいい加減だったので名前を統一しなくてはならないという問題が発生した。
地道に直してはテストしてを繰り返しやっと終了。初めからきちんとした名前をつけて作ればよかったと思いました。思いつきで作るとこうなるのです。
2009年11月10日
ページを読み込んだ場合、コメントの読み込み。コメントを登録した場合、コメントの登録→読み込み。コメントの読み込みが同じロジックを使う。
関数化して共通処理として使おうかと思ったのですが、PHPでもObjectとして使える。
classを定義して、コメントの読み込みの関数をメゾットとして使えるようにする。
PHPでの読み出しは、変数にclassで定義した文字をnewでObjectとして登録する。すると、そのObjectを使いそのclassに指定されている関数をメゾットとして使うことができます。
関数として使うよりは、見た目にわかりやすい。JavaScriptでもObject化しているので、PHPでもObject化したほうがわかりやすい。
似たスクリプトでTrackbackを読み込むPHPもある。同じ処理系なので、同じObjectのメゾットとして登録しておく。
関数として独立させておくより整理されていて良いと思う。汎用性のある処理をObject化すればもっと使いやすくなると感じた。
2009年9月4日
HTML5にブラウザが対応している。
なっとく出来るマークアップがあるので使ってみようと思う。Web文書にはWeb文書のマークアップが必要なのだろう。
しかし、HTML4.01よりも面倒になる。一般ユーザーというより、Webアプリ開発者向けの仕様だろう。
しかし、困ったことにIEがまったく対応していない。要素を使うとJavaScriptがエラーを起こしてしまう。
IEに対応しながら、HTML5のマークアップを使うとなると使い方が凄く限られる。
WAIのガイドラインには、「全情報がテキストでも利用可能であることを保証する。」とある。ので対応しなくてはならない。
仕様やガイドラインを守ると煩わしいことがいっぱいでてくる。
しかし、現実問題IEが対応しないと使えないと思う。
IEはいつまで足を引っ張るつもりなのだろうか?
2009年9月3日
SVG+Scriptでポイントを紹介しているコンテンツがあるのだが、もう一ひねりしてみることにした。
SVGはXMLなので、名前空間をきちんと指定してあげれば、他の語彙も問題なくつかえるはずです。
eventの指定してある場所に、SVGの指定の以外のデータを属性として持たせることが可能なはずです。
具体的には、ポイントを紹介しているSVGでポイントを押すと、そのポイントで釣れる魚を表示するようなことをする。
まず、SVGに魚のデータがあるXMLの文書のURLを指定する。foaf:Documentで指定すればよい。
どの魚が釣れるのかのデータも記述する必要もある。これはfoaf:nameで指定する。
新しいwindowを開いて、foaf:documentとfoaf:nameの情報をもとに、データを表示すればよい
きちんとXMLの処理ができるのなら、問題なくSVGの表示とデータの表示をするはずである。
Firefox、Opera両方とも、表示しました。
2009年6月18日
JavaScriptのオブジェクトについて調べてみた。
var obj = new Object()で作るオブジェクトとvar tbl = new Array()var ans = 3も、格納される型は連想配列しか存在しないらしい。
Array(5)と書いた場合、「5個の配列を設定する」訳ではなく、「この配列は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を使ったほうが楽だと思う。
2009年4月13
ブラウザのオブジェクト管理のしかたを勘違いすると下記のような問題に遭遇する。
同じJavaScript関数で同じXMLHttpRequestObjectを使い、同じDOMオブジェクトを使い、同じdocumentのDOMオブジェクトに追加した場合。
  1. for文で2回ループする関数を作る
  2. XMLHttpRequestObjectでデータをGET
  3. XSLTProcessor関数を使いDOM変換
  4. 変換後のDOMをdocという名前の変数に格納
  5. 格納したdocをgetElementByIdで取得したDOMオブジェクトにappendChildする。
appendChildした後に、XMLHttpRequestObjectを使うのでスクリプト的には問題はありません。このXMLHttpRequestObjectは使用済みです。
ここで処理はスクリプトエンジンから描写エンジンに移ります。描写エンジンはappendChildされた内容の描写を開始します。
この時、スクリプトエンジンは次の読み込みを開始してます。2、3、4は問題なく処理します。
4番目の処理が完了すると、描写中のDOMオブジェクトが新しい内容に書き換えられてしまい、書き換えられた状態で描写を続けます
1回目のappendChildされた描写(書き換えられたDOMオブジェクトの描写)が終わってから2回目のappendChildが実行されるので、状況によっては、2回目の内容がダブって描写されることも考えられます。
同じイベントオブジェクト、同じ通信オブジェクトと同じDOMオブジェクトの場合、appendChildされて描写途中であってもDOMオブジェクトの内容は書き換えられます。
同じイベントオブジェクトで違うXMLHttpRequestObjectを使い、同じ名前のDOMオブジェクトを使い、同じdocumentのDOMオブジェクトに追加した場合。
  1. for文で2回ループする関数を作る
  2. XMLHttpRequestObjectでデータをGET
  3. XSLTProcessor関数を使いDOM変換
  4. 変換後のDOMをdocという名前の変数に格納
  5. 格納したdocをgetElementByIdで取得したDOMオブジェクトにappendChildする。
  6. その後、別のXMLHttpRequestObjectを用意して、2~5の処理をする。
1回目のappendChildされた内容を描写エンジンは描写します。
2回目の処理が動いた場合、同じイベントオブジェクト、違う通信オブジェクトと同じ名前のDOMオブジェクトなので、別のDOMオブジェクトとみなされ、 1回目のappendChildされたDOMオブジェクトとは別のオブジェクトと認識されます。
DOMオブジェクトが書き換わってないので、1回目のDOMオブジェクト、2回目のDOMオブジェクトが混同されることなく描写されます。
ただし、描写中にスクリプトが処理をする形になるので、ブラウザには負荷がかかります。
基本的にブラウザの制御はイベント単位で行われます。HTMLのURLを叩いてホームページを表示させる場合は、windowかdocumentオブジェクトに対してloadイベントが発生します。
loadイベントは描写が完了した状態で終了するので、それに付随するスクリプトも描写終了で完了という形をとります。
他のイベントも同じ形態をとるはずなので、スクリプトで指定した描写まで終了していればスクリプトで設定したオブジェクトも開放されます。
イベント別にオブジェクトが管理されるので、同一イベントで同じオブジェクトが使われないようにスクリプトを組めばよいことになります。
スクリプトで描写する場合、イベントとオブジェクトの管理をきちんとやらないと表示に時間がかかることになります。
2009年4月9日
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%になります。
出現順ではないので注意が必要です。
2009年3月27日
アクセスログをまとめてみたら、本館と別館で閲覧するブラウザの傾向が違う。
アクセス状況
ブラウザ名別館本館
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」という検索キーワードで8件のアクセスがあるので、 「XSLTProcessor」の情報を求めてこのページにきているものと思われます。
本館のアクセスログは、検索エンジンで検索できないページのアクセスを拾ってます。トップページからリンクを辿らないと見れないページです。
釣りや観察の話題中心なので、Webの話題に興味がない人たちが集まってます。そのためなのか、IEが84.9%のアクセスがあります。 検索エンジンからアクセスできるページでの平均IE率は大体90%なので、5%程度ほど低い。
WebKit系のブラウザはアクセスできないので0%なのですが、アクセスできるページのログをみても0%のアクセスなので、WINユーザーの一般人にはまったく使われてないブラウザなのでしょう。
Operaの3.8%はびっくりです。これは、私のページ独特の現象でしょう。
しかし、IE8の閲覧は一つもない。
2009年3月24日
「IE8にするとレイアウトが崩れるページがある。」と書いて「meta文を追加すれば直ります。」と書いてある。
レイアウトが崩れる原因が書いてないのだが、IEの独自拡張をマイクロソフトが捨てたために起こっている現象である。
IE7までは、CSS2.1さえろくにサポートしていないのでCSSの実力を発揮できていなかった。
IE8でちゃんとと表示させたければ、HTML+CSSを覚える必要がある。
IEベースでCSSを覚えていた人は、子供セレクタや隣接セレクタをしらない。こういう人たちは非効率なCSSを書き続けるわけだ。
そんな人たちは無視して、ブラウザの標準準拠には取り組んでほしい。
xmlHttpRequestのonloadやXSLTProcessor()をJavaScriptだけで動くようにして欲しいよなぁ。ついでにSVGもプラグインなしで描写するようにして欲しい。
2009年3月19日
たいしてアクセスがある訳ではないのだが、検索エンジン経由で「HTML版ホームページについての日記」にアクセスしてくる人がいる。27件ほどのアクセスしかないのだが、面白い傾向がみられる。
16件がWebKitに関係するブラウザの検索だった。そのうち8件はXSLTの検索、そのうち6件はJavaSCriptとXSLTの検索だった。いがいとWebKitでXSLTProcessorが使えないことに不満を感じている人が多いと思う。
Opera+JavaScriptの検索が6件。以外と多い。
変わったところでは、「楽天 safari3.2 閲覧できない」「safari3.2 Webページ 表示されない」なんていうのもある。Safariは表示できないページが以外に多いのかもしれない。
いまいちわからないのは「JavaScript EnterKey イベントを発生させる」である。普通にEnterKeyを押せばイベントが発生するものであって、Scriptで発生させるものではないと思うのだが……
width属性に関する検索が2件。この辺りの話はコアな話なので本当に疑問をもった人がきたのだろう。
まぁ、普通の話題にのぼらないキーワードばかりだなぁ。
2009年3月16日
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を見失うのはバグだと思う。
2009年3月15日
SVG+JavaScriptが他のブラウザではどこまで使えるのか試してみた
Firefox。特別に大きな問題はない。
Opera。JavaScriptのlocation.hrefが使える。
Safari。フォントの解釈がFirefoxやOperaと違うので、あまり綺麗には表示しない。clickイベントが最初の文字にのみ設定されている。
Chrome。フォントの解釈がFirefoxやOperaと違うので、レイアウトが崩れる。linearGradientが使えない。
IE。SVGを知らないので論外。
Firefox以外は、実用レベルではないと思う。Operaはリンクのありかが明示できればとりあえず使えそうです。しかし、表示時間がかかりすぎる。 Safariは、clickイベントが要素全体に適応できてないのは問題。要素全体にclickイベントが適応されないと使い難い。Chromeは表示の問題で使えないです。
2009年3月14日
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に変換した場合は動くのですがね。
2009年3月8日
JavaScriptでlocation.searchでURLを変更しているのだが、locationを使うとブラウザがリロードしてしまう。 ブラウザがリロードされてしまうと、表示したメニューが消えて一番初めの状態に戻ってしまう。せっかくメニュー変更したのに、初期メニューに戻ってしまってはユーザビリティー的に悪い。
location.searchで獲れる情報からメニューを変更するように修正。
これで、どのページを見ているのか迷子になる確立は減ると思う。
2009年2月27日
ジオのアクセスログをとるPHPに直接アクセスしてくるIPを発見した。
調べてみるとトレンドマイクロと富士通がアクセスしている。トレンドマイクロはウィルスバスターのURLフィルターのアドレスでアクセスされている。
スパイみたいな動きをしているPHPなのでURLフィルターでチェックされているのかもしれない。チェックされると面倒なので、404を返そうと思う。
PHPのスクリプトでヘッダー情報を404をセットしてスクリプトを抜ける処理にして404を返そうとしたが、リボンのサーバーは広告を付けてしまうので、404が返らない。
PHPを格納しているフォルダーに.htaccessで、ウィルスバスターのURLフィルターらしきアドレスのアクセスを拒否する。
ついでに富士通のアクセスも拒否に設定。アクセスされれば403を返す。アクセス拒否だが仕方がない。
とりあえずこれで様子見です。
2009年2月20日
アクセスログを取得しているのだが、作ってみて見難かったり項目が足りなかったりしていたのでこの際だからと修正をした。
IPアドレスは取得していたのだが、アドレスだけだと見た目にどの接続業者からのアクセスなのかわからないので、ホスト情報も記録するようにした。これで、who isでの検索しなくても接続業者がある程度特定できると思う。
並びも統一してみた。日付、IPアドレス、ホスト、アクセスされたURL、ブラウザ情報、リファラの順番にした。
googleとyahooはURLに検索キーワードがはいっているので、検索キーワードを取得してデコードして情報を取得するように変更。
これでずいぶん使いやすくなると思う。
このページで公開しているアクセスログは直してないのですけど。直しているのは非公開のアクセスログです。
2009年2月19日
なんとなく趣味のページはPHPやCGIなどのサーバー系のScript言語が使えないので自分のアクセスログが取れない。
XMLHttpRequestを使って1つのURLで複数のコンテンツを表示するので実際にどのページを見ているのかわからない。
表示の方法を少し変更してアクセスログを取ってみる。
PHPを使えるribonのサーバーにアクセスログを記録するためのPHPを用意する。PHPをgeoのhtmlからscriptタグで呼び出すために、 ヘッダーをheader("Content-Type: application/x-javascript");にしてJavaScriptのように偽装する。
loadイベントでPHPが動くのですが、postする訳ではないので、URLにページ情報をいれてPHP側でURLを取得して記録する。
ページを見るたびにloadイベントが発生するが、ログをとるためには仕方がない。
2009年2月13日
メニューが多いとなんか見難い。前月のメニューは隠してしまおうと思う。
隠したメニューを表示するようにするため、メニュー用の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に移動する。
これで修正完了。
2009年1月24日
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がまだ5割もあるので無視できない。
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は消えてしまえばよいのにと思う。
2009年1月19日
横幅の指定ををピクセルでどうのこうの言っているページを見かけた。ピクセルでどうのこうのより、「行の文字数はいったい何文字が読みやすいのか」で考えたほうがよいのではないのかと思う。
フォントをいじってない状態で、大手のサイトはは45文字~60文字くらいの文字数になっています。60文字を超えないくらいが文字数としてよいと判断。
右メニューと左メニューどちらがよいのかは不明。メインコンテンツが真ん中になりそうな場合は右メニュー。メインコンテンツが真ん中になりそうもない場合は左コンテンツにしてみよう。
幅をピクセルで決めるよりは良いように思える。まぁ、文字サイズは閲覧者が指定するものなので、無駄な話になりかねないのですが……
まぁ、自分が見やすければ良いか。
2009年1月18日
メニューの表示用のデータフォーマットをRSS1.0にしていて、個別記事のデータフォーマットを勝手に作ったXMLにしていたのだが、気分的にしっくりこなかった。
ATOM1.0に変更することにした。そうするといまあるXSLTを流用して使うことができる。
リンクを右クリックで新しいタブで開くと、ATOMを認識してブラウザ独自のスタイルで表示するのが気になるが、このあたりのブラウザの機能は気に入らない部分なので、 直す気はない。作成者のスタイルを優先するのか、独自スタイルを優先するのかは、ブラウザの使用者が決めることで、ブラウザが決めることではない。
HTMLのスタイルは作成者のスタイルを優先するのか、独自スタイルを優先するのかを決めれるようみなっている。XMLだって同じだと考える。製作者が表示スタイルを決めれるのだから、 製作者の意図も反映できるようにするべきである。
とりあえず、基本的な部分はこれで完了かなぁ。まだ直すとは思いますが。
2009年1月15日
このところ1日中PHP漬けなのだが、相変わらずIEの挙動に悩まされる。
$_FILES['XXXXXXXX']['type'];の挙動がIEのみ変なのである。OPERAやFirefoxならCSVファイルをtext/csvと返すのだが、IEはtext/plainを返してくる。
PHPの仕様を見ると、ブラウザの設定によって変わると書いてある。正しく認識できないブラウザの場合、text/csvを返してこないわけだ。
ヘッダーくらいちゃんと返せばよいのにと思うが、ブラウザによって値が変わるのでは使い物にならない。$_FILES['XXXXXXX']['name'];で、アップするファイルの拡張子を調べたほうが確実に思える。
出来たと思ったのに変更です。参考にしたPHPのサンプルがマズイことになる。本家を見ない私も悪いのだが、変なサンプルはやめてほしいよなぁ。
2009年1月14日
「トラックバック技術仕様書」を発見した。movabletypeがでどころらしい。
トラックバックはweb サイト間のピアツーピア通信/通知のためのフレームワークということらしい。小難しくかいてあるが、「web サイト間の相互情報交換のための仕組み」なのである。
例えば、太郎さんが花子さんの記事を見て、太郎さんが自分のサイトに「僕ならこう思うよ」と書いて、花子さんのサイトに通知する仕組みなのである。
その仕組みが小難しく書いてありますが、HTTPで通信するならば、POSTかGETのいずれかが普通。2バイト文字を考えれば、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するから、受け取って好きなように使ってください。という仕組みみたいです。
2009年1月11日
トラックバックを受け付けるPHPのサンプルを見つけたのでちょっとつくってみた。サンプルには基本的な仕組みは簡単と書いてあったのでサンプルを眺めてみる。
確かにトラックバックを受けるだけなら簡単そうです。相手がPOSTしてきた情報を記録するだけで、そんなに面倒ではない。
記録する方法がDBではないのでその辺のエスケープ処理がちょっと面倒。それさえできればあとはウン簡単。
HTMLとPHPとの通信はJavaScriptのxmlHttpRequestを使っているので、JavaScriptがonになっていないと見れません。
表示だけなら意外と簡単に作れました。相互通信に興味はないので、送信機能をつくる気にはならないのですが。
2009年1月9日
こちらのサイトで唯一まったくPHPを使わないでいた日記のページをPHPを使って表示するようにした。
JavaScriptでxmlHttprequestのみでコンテンツを作成するので、キャッシュされる心配はない。
OperaやFirefoxはapplication/rdf+xmlrel="alternate"を書くとフィードを認識しません。 rssであっても"application/atom+xml"と書かなければならないので、個人的にはすごく違和感を感じる。
rel="alternate"と書いてあるのだから、typeに関わらずフィードと認識してくれればよいのに。
2009年1月7日
PHP+xmlHttprequestで日記を作ってみた。
IE7以下が余計な処理をしてくれるので、かなり困った。IE7以下のためにかなり修正させられた。
まったくIE7以下なんてなくなればいいのに、本当に邪魔。
Firefox、Opera、safari、IE8ならいいのにね。
2008年1月6
A要素にfocusイベントを使った場合、マウスとキーボードでイベントの発生違うので困る。
マウスの場合、A要素にマウスカーソルを乗っける→mouseイベントの発生。マウスのボタンを押す。→focusイベントの発生。この時にclickするとclickイベントも発生する。
キーボードの場合、A要素をキーボードで辿る。→keyイベントとfocusイベントが発生する。Enterキーを押す。→clickイベントが発生する。
focusイベントとclickイベントの発生のタイミングが違うのです。これは使いにくい。
使おうと思っていたが、使いにくいので却下です。