[css]:after疑似要素ってやばくね？

Written by uechoco 3月 12
Add Comment (0)

　衝撃！！！
　:afterなんて擬似要素があるのかっ！！

要素の前後に文字や画像を追加 - 疑似クラス・疑似要素 CSS辞典
http://www.seo-equation.com/html/css/false#ref7

　この擬似要素使えば、

PLAIN TEXT
HTML:
  1. <div style="width: 160px;">
  2. <div style="float: left;">あひゃひゃひゃ</div>
  3. <div style="clear: both;"></div>
  4. </div>

みたいな、忌々しき空白の<div>から開放されるってことでしょ？

それにしても・・・

※Win版Internet Explorer バージョン6,7、Mac版Internet Explorer 5 は対応していません。

ま　た　お　ま　え　か　っ　！　！　

[Web]HTML構造を可視化するWebsites as Graphs

Written by uechoco 11月 30
Add Comment (0)

　さっきの[雑記]グラフが描きたいのところで、挿絵としてFlickrのグラフを挟んだら、いそっちノートの中の人に「これなにー？」って言われたので、紹介します。

Websites as graphs - an HTML DOM Visualizer Applet
http://www.aharef.info/static/htmlgraph/

秋元@サイボウズラボ・プログラマー・ブログ: HTML構造のグラフによる可視化
http://labs.cybozu.co.jp/blog/akky/archives/2006/05/html_visualized_by_graph.html

　HTMLの構造を解析して可視化するJavaAppletです。言われて気づいたのですが、ソースコードも公開されています。これ使えば可視化なんてすぐにできるか！？って思ったけれど、ソースの冒頭でproce55ingやproce55ingの物理演算ライブラリなんかをインポートしてるので、うーん・・・。まぁ、あとでソースは見とくかな。

　こういうグラフが簡単に描きたいんです。まじめに勉強するかな。proce55ingも候補にいれてみようか。

[HTML]FORMのactionのURIにパラメータを付加したままGET送信はできないのかな

Written by uechoco 11月 29
Add Comment (0)

昨日、困ったことがありました。

HTMLの<form>タグでは、action属性にフォームの内容を送信するURI（URL）を記述し、method属性にHTTP要求の命令の種類(GET/POST)を指定しますよね。たとえば下記のような。

PLAIN TEXT
HTML:
  1. <!-- GET送信 -->
  2. <form action="hogehoge.php" method="get">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>
  5. </form>
  6.  
  7. <!-- POST送信 -->
  8. <form action="hogehoge.php" method="post">
  9.   <input type="text" name="hoge" value="hoge"/>
  10.   <input type="submit" value="送信"/>
  11. </form>

で、GETとPOSTを同時に行うこともできます。たとえば下記のようにaction属性にパラメータ付きURIを記述し、method属性をPOSTにします。

PLAIN TEXT
HTML:
  1. <!-- POST with GET 送信 -->
  2. <form action="hogehoge.php?g1=ok&g2=1" method="post">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>
  5. </form>

この場合、フォームを受け取ったphpでは、$_GETと$_POSTの両方にフォームの値がセットされます。どちらから来たものかを区別する必要がなければ、$_REQUESTを参照するか、$req = $_GET + $_POST;として$reqを参照します。

だったら、GETのURIにGETでパラメータを付加することもできるんじゃないかと考えて、たとえば下記のようにaction属性にパラメータ付きURIを記述し、method属性をGETにしてみました。

PLAIN TEXT
HTML:
  1. <!-- GET with GET 送信はできるのか？ -->
  2. <form action="hogehoge.php?g1=ok&g2=1" method="get">
  3.   <input type="text" name="hoge" value="hoge"/>
  4.   <input type="submit" value="送信"/>
  5. </form>

としてみたのですが、フォームを受け取るphpには、フォームの項目として存在するパラメータは送られてくるのですが、action属性に予め付加しておいたパラメータは送られてきませんでした。ブラウザはIE6(Internet Explorer 6)とFirefox 2で確認しましたが、両方とも同じ動作でした。

php側の$_SERVER配列の中身を見たりした見解では、GET with GET送信の場合、ブラウザはURIに付加してあったパラメータを削除した後に、?param1=value1&param2=value2というようなフォーム内のデータを付加しているように思えます。

RFCの日本語訳文書を探すためにググりましたが、HTTPメソッドの定義や、HTMLフォームの定義などは見つかったのですが、POST with GETやGET with GET時の動作の説明のようなものは見つけることはできませんでした。どちらかというと実装側（ブラウザなど）の問題ですしね。

GET with GETが無理なら、POST with GETでおくっちまえYo!っていうツッコミは当然入るわけですが、どうしてPOST with GETを避けているかというと、対象のプラットフォームがモバイルだからなんです。モバイルでPOST with GETができるかどうか、どの機種までできて、どの機種までができないのか、などを調べていると相当な手間がかかるわけです。最近のであれば（調べていませんが）POST with GETできそうな気がしますが、昔の携帯はできるかどうか保証できないです。

今回の対策としては、使用するパラメータの一覧をhiddenで予め用意するか、POST with GETに踏み切るかな感じになるかもしれません。

ちょっとHTMLの罠（？）にハマった感じがした日でした。