/ 最近 .rdf 追記 設定 本棚

脳log[HTML: 2009-02-15～]

カテゴリ[HTML]に属するセクションのみを表示しています。(他のカテゴリも表示)
最近 これより新しい日記はありませんこれより古い日記はありません

2009年02月15日 (日) 本文中の URL自動リンクがセミコロンで切れていたので、/shjs/lang/sh_ruby.jsと /shjs/lang/sh_javascript.jsを修正した。そこで使っていた正規表現は『詳説 正規表現 第3版』で、大抵の場合うまくいくと紹介されていたものでした。(CGIパラメータを ; で区切るのはいまだに異端でしたか)

最終更新: 2009-08-29T06:18+0900

♪ [HTML][Ruby] 中途半端なメソッドは提供しないのもまた親切なのでは？ > URI.escape

> URI.escape("http://exmaple.com/foo bar?a=b=c;d=e#hoge#fuga")
=> "http://exmaple.com/foo%20bar?a=b=c;d=e%23hoge%23fuga"

URLをパーツに分解せずに gsub一発でエスケープ(エンコード)するなんて不可能だと思うのです。仮にそうまでしても、上の例のように、「#」が CGIパラメータとして受け渡されるように、「%23」にエンコードするべきか、URLを構成する fragmentを示す記号として、「#」のまま残すべきか、判断できない(でしょう？)。

できないことをできるかのように見せかけるより、できない(のでメソッドを提供しない)という方が親切だと思う。

JavaScriptの提供する encodeURIComponent(「/」も「?」も「#」も「=」もエンコードするメソッド)相当のメソッドがあれば、それで十分だと思うんだけど。

 つぶやき

http://exmaple.com/foo bar/baz/

なんてのは不正な URLだから、どこにも存在しないのです。アドレスバーに表示するときに人間に読みやすいように、と上のようにデコードして表示することはあるかもしれないけれど、オリジナルの正しい URLは同時に保持しておくべきで、表示用の文字列からエンコードしようなんて思っちゃダメなのです。ブラウザのアドレスバーは表示と同時に編集も可能だから話は簡単ではないけど……これまでのところ、Firefoxは(自らの責任で)よきに計らってくれています。

RFC(古いのと新しいのと二種類？)も読んでいない放言なので、実は「できる」という可能性がなきにしもあらず。

[ruby-dev:39188] Re: URI.escape_component から、

 さておき、URI.escapeは独特の動きをするので、JavaScript/ECMAScript の
 escape とも encodeURI とも encodeURIComponent とも違います。

 そういえば、現在の仕様の意図をお聞きしたかったんだった
 [ruby-dev:38124]

 なお、面倒な話が出てきた時には、とりあえず akr さんが
 既に取り上げていないか調べるわけですが、やっぱり扱っているわけです。
 http://www.a-k-r.org/d/d2004_07.html
 https://www.codeblog.org/blog/akr/20070222.html
ツッコミを入れる

2008年10月24日 (金) [HTML] Logicoolのサイトはキーボードでもタブの切り替えができて偉い。(スクリプトをOFFにするとマウスを使ってさえ表示を切り替えられなくなったが……)

♪ [HTML][javascript] 補助に徹する賢い JavaScriptの使い方

基本はこう。

  1. HTMLのみで情報を配置する。
  2. CSSで見栄えを整える。
  3. スクリプトで効果やアクションを付け加える。

Logicoolのサイトのタブコントロールはキーボードインターフェイスを具えていて偉い、と書いたばかりだが、スクリプトがオフだと、タブの切り替えができないばかりか、タブの中身、肝心の情報が表示されないのはイクナイ。

スクリプトで各タブの表示・非表示を切り替えているのだろうが

  • タブの状態のデフォルトは非表示
  • スクリプトで一つだけを表示に切り替え

ではなく

  • タブの中身はデフォルトで表示
  • スクリプトで一つ以外を非表示に切り替え

が、より良いやり方ではないか。(一瞬全ての情報が表示されてすぐに消える、というのは気にすることではないと思っている)

ロジのサイトのこのスクリプトは見栄えをいじるだけなので、HTMLとスクリプトを切り離して、最初に HTMLのみでページを作り、スクリプトは後からアタッチするものだと考えて欲しかった。

スクリプトに依存する要素があって切り離せない場合は、Amazon.co.jpがやっているように

  • <noscript>の中に、スクリプトを使わない代替 HTMLを用意する (できなければないで仕方がない)
  • <script>の中で、スクリプトを必要とする要素を、スクリプトを使って配置する

方法が賢いと思っている。

 ちょっとだけ関連

ツッコミを入れる

2007年02月07日 (水)

♪ [Firefox][HTML] font-family:fantasy と font-family:cursive でどせいさんフォント

驚いた。Firefoxでブラウズ中に普通のサイトでどせいさんフォントが表示されたから。

そのサイトは font-familyとして fantasyを指定していた。自分はどせいさんフォントをインストールしていた。でも Firefoxが fantasyと cursiveなフォントとして どせいさん を選んだ理由がわからぬ。そんな設定項目があっただろうか。(フォントにそういうメタデータが含まれているのだろうか。プロポーショナルか等幅かをプログラムが見分けられる(はず)のだから不思議はないか)

ツッコミを入れる

2007年01月17日 (水)

♪ [IE7][Hiki][HTML] IE7でマウスがおかしい

http://vvvvvv.sakura.ne.jp/ds14050/w/

Internet Explorer 7 で上の Hikiページを表示すると、右上のメニューを除いてテキストを選択することもリンクをクリックすることもできない。キーボードでの操作はできる。

スクリプトは仕込んでない。外部スタイルシートは hiki_base.cssと pain.cssが読み込まれている。 <style>タグが一カ所使われている。HTMLは Anothoer HTML-lintでチェックして対応がとれてないタグは存在しなかった。

(ページのどこでも)ダブルクリックするとまるで見当外れのページ右下の Generated が選択されるからスタイルシートの float辺りがくさい。

pain.cssをみてみると

div.main {
  float:right;
  width: 78%;
}

div.sidebar {
  float:left;
  width: 20%;
(以下略)

という記述があり、サイドバーの表示を floatで実現していた。

臭う、臭うぞ。でもここまで。そのうち直るでしょ。

ツッコミを入れる

2006年07月13日 (木)

♪ [HTML] <a href="javascript:void(0)"> と自分で書いて初めて気付くその便利さ

onclickでごにょごにょする HTML要素があって、そいつに Tabキーでフォーカスをあてたいなと思ったときに最初に思いついたのが

<a href="javascript:void(0)">ほげほげ</a>*

のように Aタグで囲う方法。遅まきながら、この時初めてステータスバーに javascript:void(0)と表示される何もしないリンクの存在意義に気付いた。こいつがあると Tabキーでフォーカスをあてられるし、Enterキーでクリックすることもできる。そしてスクリプト(onclickハンドラ)で処理できる。簡単かつ使える範囲の広い方法。javascriptを切ってるブラウザではそもそも onclickハンドラが動かないから javascriptスキーマを使うことの是非は問われないし。onclickハンドラでキーボードとマウスをまとめて処理できることや、対応するブラウザの多さなど、書けば書くほどこれしかないって思えてくる。

次に考えついたのが、9日に "tabindexはフォーカスの順番を決めるだけのものではないのだなぁ。" と書いたように、IE(>=5.0)や Firefox1.5で、tabindexを付けることでリンクやフォームの部品以外の要素をフォーカス可能にする方法。

IEの場合、

<element>.tabIndex = 0 // 0 => フォーカス可能にはするが、タブオーダーは指定しない
<element>.onkeypress = function(){ if(event.keyCode == 13) this.click() } // Enter->Click

で済むが、Firefoxの場合 click()が実装されてるエレメントがフォームの部品などに限られているので

<element>.tabIndex = 0 // 同上
<element>.onkeypress = function(event){
  if(event.keyCode == 13) {
    var event2 = document.createEvent("MouseEvents");
    event2.initMouseEvent("click", true, true, event.view, event.detail, event.screenX, event.screenY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, 0, null);
    this.dispatchEvent(event2);
  }
}

と、かなり冗長。

* href="" だとそのページ自身へ移動(=リロード)してしまう。void(0)以外に href="#" を使う流派もある様子(でもイマイチ)。

ツッコミを入れる

2006年04月07日 (金)

♪ [Amazon][HTML]アマゾンのおすすめページがリニューアルしてる。

15アイテムずつ表示するのは一緒だけど……

 ○ 情報量が増えてる

以前は「おすすめの理由は」っていうリンクがあるだけだったのに、「〜などを評価されたお客様におすすめします」って、最初から一冊だけだけどおすすめの理由が表示されてる。これはページの移動が減るなあ。

出版日も表示されてる。

 ○ その場で(ページ遷移無しで)評価が変更できる。でも Ajaxじゃない*。

マウスオーバーに合わせて「嫌い(☆)」「好きではない(☆☆)」「普通(☆☆☆)」「好き(☆☆☆☆)」「大好き(☆☆☆☆☆)」と表示され、クリックすると評価が送信される。ページ遷移はない。

「持っています」「興味がありません」も従来はハイパーリンクだったものが、ページ遷移無しでアマゾンに送信されるようになっている。

ソースを覗いてみると、Javascriptが使用可能なら

window.location.href="〜"

とやってる。これは普通ページを移動するときに使うけど、そうはならない。からくりは以下のレスポンス。(注: id と名の付くものをそのまま載せるのはまずいかもしれないので正規表現に置換してある)

HTTP/1.x 204 NoContent
Date: Thu, 06 Apr 2006 18:42:18 GMT
Server: Server
x-amz-id-1: [0-9A-Z]{20}
x-amz-id-2: [0-9A-Za-z/=]{44}
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
Connection: close
Content-Type: text/html; charset=Shift_JIS

Firefoxは 204 NoContent を受け取ったものだから新しいページを表示できなくて古いページを表示し続けるというわけ。

Javascriptが使用不可ならフォームを使って、(確認してないけど)スクリプトと同じ内容を POSTしてる。レスポンスも同じ 204 NoContentだろう。

 ○ 「次のページ」「前のページ」の他に、現在のページを再表示するリンクが追加。

評価などを変更しましたか? ここをクリックするとおすすめ商品の情報が更新されます。

というのがページ下部にある。内容は単なる javascript:location.reload() だけど需要のあるリンクだと思う。表示中のページに加えた評価 を加味した最新のおすすめを表示したいと思うもの。

キーボード派は F5を押せばいいと言うでしょうがキーボード派はお呼びでない様子。

 × 「持っています」「興味がありません」にはフォーカスが移らないのでキーボードで操作できない。

「興味がありません」を例にとるとソースはこう↓。丸々スクリプトで中身を出力してる。(スクリプトOFFなブラウザには <noscript><form>〜</form></noscript>が用意してあるので重複して表示しないように。)

<td style="white-space: nowrap;">
	<script language="Javascript" type="text/javascript">amz_js_showNotInterested(asin, notInterested);</script>
</td>

amz_js_showNotInterested()が何を返すかというと

function amz_js_showNotInterested(asin, notInterested){
    var imageID = "notInterested." + asin;
    document.write("<img src="+'"'+ + checkboxImages[notInterested] + +'"'+"");
    document.write("onclick="+'"'+"amz_js_sendNotInterested('" + asin + "', 'alt');"+'"'+" ");
    document.write("onmouseover="+'"'+"amz_js_notInterestedMouseOver('" + asin + "', 'alt');"+'"'+" ");
    document.write("onmouseout="+'"'+"amz_js_notInterestedMouseOut('" + asin + "', 'alt');"+'"'+" ");
    document.write("id="+'"'+ + imageID + +'"'+" ");
    document.write("border="+'"'+"0"+'"'+" valign="+'"'+"bottom"+'"'+" />");
}

一つの <img>要素。リンクでないただの画像にフォーカスは移りません。

というわけで、スクリプトが OFFの場合はフォームと画像ボタンが表示されるのでキーボードで操作できるはずだが、スクリプトONの場合はマウス必須。

 × ☆の評価もキーボードでできない。

☆の部分のソースを見ると、☆の画像は一つで、6つの<area>を持つ<map>を適用することで個々の☆のマウスオーバー効果やクリックの処理をしている。評価送信のトリガはハイパーリンクを使ったものではなく <area onClick="〜" />。だから、☆にフォーカスは移るんだけど Enterを押しても反応しない。クリックをエミュレートするキーボードショートカットがあれば何とかなるが。

因みに ☆評価に対応した <noscript> なフォームは用意されてないのでスクリプトオフでは☆自体が表示されないはず。

 × <html>が二つ？それってあり？

改行とインデントをいじって HTML要素の内容を省略したソースが以下。

<html>
  <head>
    <title>Amazon.co.jp: おすすめ商品</title>
    <script language="Javascript1.1" type="text/javascript"></script>
    <style type="text/css"></style>
    <style type="text/css"></style>
    <style type="text/css"></style>
  </head>
  <body>
    <html>
      <head>
        <title></title>
        <style type="text/css"></style>
        <script language="Javascript1.1" type="text/javascript"></script>
      </head>
      <body bgcolor="#FFFFFF" link="#003399" alink="#FF9933" vlink="#996633" text="#000000">
……
      </body>
    </html>
  </body>
</html>
  • Content-Typeヘッダは text/html
  • doctype宣言はない
  • <meta>タグもない
  • <img />, <br />など中身のない要素に XHTML風の記法
  • だけど <input>は <input />でなく <input>
  • 対応する閉じタグのない <li>, <p>, <option>もある
  • <b>といった物理要素もある

よくわからない HTML、ところどころ XHTML風味。何れにしろ Broken みたいなっ。

アマゾンみたいなサイトでは HTMLの理念理想よりブラウザ互換性の方が大事でしょうが、見映えと関係ない細かな部分ではソースの統一をして欲しいな。(<br />なんて <br>でいいでしょ)

 ○ おすすめ表示件数の上限が無くなった？

これまでは 100件ちょっとで「次のページ」が無くなって打ち止めになったけど、現在 400件目を過ぎたところまで表示してる。ここまでくるとおすすめの精度が悪くて参考にならない。でも自分で止めるところを決められるのは良い。

* Ajaxを XmlHttpRequest, MSXMLオブジェクトを利用した、ページ遷移を伴わないサーバーとの通信(HTTP GET/POST)、(とそれによるページ更新)とするなら

ツッコミを入れる

2006年01月16日 (月)

♪ [HTML]classってスペースで区切って複数設定できるのね (HTML4.01)

(´・ω・`) 知らなんだ。

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.2

class = cdata-list [CS]

この属性は、ある要素に1つのクラス名を割り当てるか、または複数のクラス名を設定する。幾つの要素に対してでも、同じクラス名あるいはクラス名群が割り当てできる。複数のクラス名については、空白文字によって区切らねばならない。

ツッコミを入れる
最近 これより新しい日記はありませんこれより古い日記はありません
カテゴリ[HTML]に属するセクションのみを表示しています。(他のカテゴリも表示)
Generated by tDiary version 2.3.3.20091124
Powered by Ruby version 2.5.5-p157