ブログ設定等で数値入力の箇所に、
<input type="number">を導入しました。

これは現状、
Chrome、Opera、Safari
のみ対応しています。
対応ブラウザでは数値入力をマウスで行えます。

非対応のFirefox、IEは、
通常の<input type="text">が表示されます。
非対応ブラウザではレイアウトに若干ズレが生じてしまうようですが、
そのうち実装されるはずですので、しばらくは現状のUIでご利用ください。

Firefox 13 で、<input>の新type実装されてないかな・・・
思って試したが、何も実装されてなかった。
まあ、実装されてればリリースノート書くだろうし、
次のバージョンは事前に試してるわけだしね・・・


ついでにChrome20とFirefox14も試したりしたんだが、
Chrome20は<input type="color">と<input type="date">が実装されてそう。
Firefoxは現時点では14にも実装されてない。
ちなみに、この分野はOperaが一番実装進んでる。

ブログエディターの色選択ツールを現在は独自のスライダーで作ってるが、
<input type="range">
使えば簡単かつ綺麗に作れるな・・・
思ってたんだが、
<input type="color">
使っちゃえば圧倒的に楽。
将来的にはそっち方向にするかな。


Firefoxにも早く実装してもらいたいもんだが、
Firefoxは、14が7月、15が8月と、相変わらずの短期リリースが続くようだが、
最近はあまり新機能の実装が進まない気配・・・

技術的な話になりますが、
公式サイトトップページに、
非ログイン状態だとログインフォームが表示されますが、
ログインフォームを普通に表示しちゃうのって、セキュリティ的によろしく無いと思うんで、
<iframe>で分離できないかな・・・
と考えてるんですが、
HTML5の、
<iframe srcdoc seamless sandbox>
が使えないかな・・・
と思ってたんですが、
現状、主要ブラウザの全てがsrcdocとseamlessに対応していないんですが、
Google Chrome 20（次のバージョン）
が、両方に対応していることに気づいたのでちょい実験してみました。
ちなみに、sandboxはChromeは現バージョンでも対応しているんですが、
sandboxも他のブラウザは対応していません。


実験ですが、
まず、seamlessとsandboxの同時設定なんですが、
HTML5解説サイト見て回ると、
「seamlessとsandboxの同時設定はできない」
的なこと書かれてたりするんですが、
W3Cの仕様書見てると、同時に使える気がしてたんですが、
試したところ同時設定有効の様でした。

seamlessってのは、設定すると、
iframeが親フレームのコンテンツと一緒に枠なしでサイズ可変で表示されます。
目的では、内部に<form>の<input>入れるわけですが、
<input>のサイズってのはブラウザ依存だから、
<iframe>のサイズ固定は難しいが、多分seamlessで解決。

sandboxは、
今までの<iframe>は、
親フレームと<iframe>のドメインが一緒だとスクリプトでアクセスできちゃうんですが、
それを阻止できます。
試したところ、
document.getElementById('iframe')
がnullになる感じ。
たぶん、
sandbox="allow-forms allow-top-navigation"
てな感じの設定で使う。
これ付けないと、フォームも無効になってtareget="_top"も効かなくなる。
allow-same-origin
をつけるとスクリプトでアクセスできちゃう。

で、srcdocですが、
これ使うと、src属性にURLを書かずに、
属性に直接、iframe内のHTMLが書けちゃう。
タグは文字参照で書く。


で、実験結果ですが、期待通りに、
seamlessで親フレームのコンテンツのように表示できる。
sandboxでスクリプトアクセスを阻止できる。
srcdocで別ページを用意せずに直接フレーム内HTMLが書ける。
ってな感じでした。


これ実装する場合、
他ブラウザにはiframeを表示せずに、対応ブラウザだけiframe表示を考えましたが、HTMLだけじゃ無理かも。

でも、Chrome以外が対応した時にこの方法で判別できるか怪しいが、
if(document.createElement('iframe').srcdoc==undefined){
    alert('非対応');
}else{
    alert('対応');
}
こんな感じでスクリプト書けば判別できた。
Chrome19は非対応でChrome20は対応になる。
Chrome20はundefinedじゃなくて空文字ぽい。


そのうちこれ絡みの修正したいと思ってるんですが、
現状、Chromeの次期バージョン以外が対応しないんで、まだ早いかな・・・

朝行った記事の編集が反映しない場合がある件の修正ですが、
エディタ外に処理を追加して対応していましたが、
エディタ自体で対応すべき問題だったので、再修正をしました。

Firefox以外でロードされる旧エディタについては、
元々エディタの方で対応していました。
新エディタの作成の際に処理を省略してしまっていたようです。