<meta name="viewport" content="width=device-width">
設定しないとモバイルで勝手に縮小されちゃうようだから、
公式サイトの方もこれ設定しておいたほうが良さそうだな。

ちとめんどいが、
近日中にやろうかと・・・
CSSで一括で出来んもんかな？

今ちょっと更新作業ができない状況なんですが、
タッチパネル端末のテスト用にAndroidタブレット用意したんですが、
ブログエディタの操作に無理がある感じ。

標準のブラウザ（Chromeベース？）
Firefox
Opera
Dolphin
の４つ試したんですが、

DolphineってのはAndroidで人気のブラウザらしいが、
多分Webkitで標準のブラウザと中身一緒で、アプリ名以外に違いはほぼないと思う。

標準のブラウザは、ＩＭ側の問題かもだが、
contenteditable要素への入力時に確定するまで入力が反映せず、
Google日本語入力だと、複数文字の入力ができず、１文字しか入力されない。
英語キーボードだと複数文字入るが、確定まで入力されない。

Operaはcontenteditableが利用できないぽい。
何も入力できないんでどうにもならない。

Firefoxは試した中では唯一日本語の入力ができたんだが、
ＰＣと同じく新型エディタになる。
新型エディタは設定画面がポップアップになってマウスドラッグで移動できるが、
タッチパネル機はマウスが無いのでマウスイベントが発生しないみたいで移動できない。
マウスイベントじゃなくてタッチイベントが発生するらしい。
これはどうにかなりそうではあるんだが、
ＰＣは右クリックのコンテキストメニューで領域操作をするが、これもマウスが無い・・・
長押しとかでコンテキストメニュー出て欲しいもんだが、出ないぽい。
新エディタと旧エディタはHTML5のコンテキストメニューに対応しているかどうかの判別で振り分けてるんだが、
AndroidのFirefoxはブラウザは対応していると答えて新エディタになるが、実際には対応していないという・・・


ブラウザの完成度というかＯＳの完成度というか・・・
に問題がある感じで、ちょっとまともな対応難しそうなんですが、
Firefoxのポップアップ領域の移動だけでもどうにかしたいかなと思う。


あと、PCだとどれも高速だからブラウザの速度の違いって全然わからないが、
Webkit糞遅い気がする。
標準のブラウザ（Dolphinも）からOperaかFirefoxに変えると、
体感で20倍くらい速くなる気がする。

<input type="range">
を使った色選択ツールを試作してみました。

ブログエディターのタグ設定の色選択ツールをこんな感じに修正したいんだが、
<input type="range">
<input type="number">
を使ってるが、現状、Chrome、Opera、Safariは対応しているが、
新エディターはFirefoxしか対応していないので、
現状は実装できない。

---

サンプル

        

        

R

G

B

  #000000

---

サンプルは、
Chrome、Opera、Safari
で機能すると思います。

今の色選択ツールのスライダーは独自実装だが、
<input type="range">
で、ブラウザ標準機能でスライダーが表示できる。

あと、16色パレットつけてみた。
クリックで設定。

<input type="color">
も考えたが、
色以外の設定項目と並べる関係で、
やっぱり、色選択ツールはポップアップする感じのほうが良さそう。
イベント駆動でブラウザのカラーピッカーを起動できればいいんだが、そういうことはできないと思われる。

技術的な話になりますが、
公式サイトトップページに、
非ログイン状態だとログインフォームが表示されますが、
ログインフォームを普通に表示しちゃうのって、セキュリティ的によろしく無いと思うんで、
<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用の新しいブログエディターですが、
さらに大幅修正してるんで、
近いうちにまたかなり仕様変わりそうです。

次回の変更内容（予定）ですが、


＜その１＞
<span><div>適用時に設定画面が出ずにタグ適用となっていましたが、
<span><div>は何も設定しないと見た目変わりませんので、わかりにくいと思うので設定画面出すようにします。

あと、PCなら右クリックからの修正前提でもわかれば問題ないと思いますが、
右クリック前提だとタッチパネルとかだと不便すぎたんじゃないかと。
まあ、タッチパネルはそもそも文章編集に向いてないと思いますけど。


＜その２＞
今までは上部メニューに無いタグの挿入はHTML直接入力以外ではできませんでしたが、
右クリックメニューから他にもいくつかのタグを入れられるようにします。
特定タグの内包が前提のタグはちょっと無理だけど、普通のインラインとかブロックで使いそうなのは用意する。
範囲無いのでも、<hr>なんか用意したい。


＜その３＞
今までは<b>等のインラインタグを適用する際にタグの内包ができませんでしたが、
HTML5はインラインタグにブロックタグ入れちゃ絶対ダメ！的な規則が無いようなんで、
<div>挿入時と同じ感じで何でも入れれるようにしました。
まあ、インラインはインラインで使ったほうがいいと思いますけど、何も入れれないと不便場合もあると思うので。

<a>タグに関しては、タグ内包できるようにすると文字列設定の項目が出せなくなってしまいますので検討中ですが、
今は一応<img>だけ内包できるようになっているんですが、<img>と文字の混在とか難しくなってるんで、
タグ直接編集機能もあるわけですし、文字列設定消してでもタグ内包できるようにするべきかなと考えてます。


＜その４＞
text-alignとかtext-decorationとかも設定できるようにしたり、
<div>でfont系の設定できるようにしたりとか。

<div>と<span>以外にも全部のタグにCSS設定できるようにしようと思ったが、
普通、元々ある<div><span><img><a><table>以外の修飾系のタグにCSS設定するもんじゃないと思ったんでやめた。
直接編集機能はすべてのタグで使えるようにするし、要らない。



まあ、だいたいそんな感じ。

ブラウザ実装がまだまだなんで当分先ですが、
新しいブラウザ向けの新ブログエディターを開発しています。

＜変更点その１＞
今はブラウザ標準のコンテキストメニュー（右クリックメニュー）を消して独自のメニューを出していますが、
ブラウザ標準のメニューに独自の項目を追加する形になります。
これで一番大きいのは、
こちら側ではPCのクリップボードにはアクセスできませんので、
クリップボードを利用したコピペというものはWEBサイト側で実装できませんが、（実装しているところもありますけど、Flashかなんかのセキュリティーホールを利用したものと思います。）
ブラウザの標準メニューを消しませんので、普通にコピペできます。
あと、
アンドゥ・リドゥ（元に戻す・やり直す）をブラウザに任せたかったのですが、
問題がありそうなので独自実装のままになりそう。

＜変更点その２＞
右クリック等で出るタグ設定画面が、
今まではエディタ領域全体に固定表示する感じでしたが、
移動可能なポップアップ領域で表示にしようかと思います。
あと、設定項目を減らして、
代わりにタグ部分だけの直接編集機能を用意しようかと。

＜変更点その３＞
RGBスライダー的な色選択ツールがついてますが、
スライダーを<input type="range">での実装に変更する。
<input type="color">なんてのもあるんで、それも使うかも。
ただ、これらはまだFirefox12が未実装。
OperaとChromeはだいぶ前から実装してるんだが・・・


こんなかんじと思います。
ブラウザ対応状況は、

<input type="range">
が、
Firefox 12
IE 9
が未実装。

<menu>
は、
Firefoxは8から実装してるんだが、
他ブラウザ全滅。

ってわけで、だいぶ先かも。
色選択ツールは未変更にして、
他の部分を作ってFirefox専用で新エディターに差し替えるって感じかも。

Firefox以外では機能しないようなんで当面実装しませんが、
HTML5の<menu>で新ブログエディターを実験中です。
ただ、MDN見たりしても情報がなくてまだ厳しい感じ。
実装の際は当分IE8とIE9が邪魔になると思いますんで、
旧エディタと新エディタをブラウザ判別して振り分ける感じになると思います。

主に、
独自コンテキストメニューをやめることで、
右クリックからクリップボードのコピペ対応と、
アンドゥ・リドゥを独自実装やめてブラウザに任せようと思いましたが、
現時点のテストでは、
こちらで要素を変更した場合はブラウザのアンドゥ・リドゥは壊れるみたいなんで、
アンドゥ・リドゥは独自実装じゃなきゃ厳しそう。
けど、標準メニューのアンドゥ・リドゥを消すことはできないぽいから2重になりそう・・・


あと、さっき知ったんですが、
今まではHTMLの文字コード指定は、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
なかんじでしたが、
<meta charset="UTF-8" />
な感じが推薦になったぽい。
既存ページの全修正はめんどいが、
機会があったら今後は修正していくかも。
公式テンプレートはそのうち修正すると思う。

デモページ
↑ここにコンテキストメニューのデモあるんですが、
前から考えてますけど、
この機能うちのブログエディターにかなり導入したい。
デモページでFirefoxで右クリックするとメニューが拡張されます。

この機能導入できると、
ブラウザの標準コンテキストメニューに独自項目を追加できる。
今は、標準コンテキストメニューを消して独自メニュー出してる。
違いは、
独自メニューだとクリップボードのコピペ機能を使うことができない。
ってわけで、アンドゥ・リドゥは独自実装になってるが、ブラウザ標準でコピペ使わせるべき。
あと、今の仕組みだと入れ子状になったメニューなんかは難しいけど、簡単にできる。


問題は、
デモページのコード、多分Firefox（8.0以上）以外で動かない。
コンテキストメニュー自体はChromeなんかでも対応してると思うんだが、
ちょっと、Firefox以外で対応ブラウザ判別する方法が思いつかない・・・
判別しないと、IEが9も含めて非対応ブラウザになっちゃう。
それはさすがにまずい・・・
IE10出てから考える感じかな・・・

XPのサポート期限は2014年まで。
Vistaは今年までだったはずが、2017年まで伸びちゃった・・・
XPとVistaの人はIE10非対応らしいんで、
ブラウザ乗り換えてもらってシェア落としてもらいたいところ。
現状ではさすがにIE8，9は切り捨てられない・・・

テンプレートのCSS配信の効率を上げるために修正します。
というか、すでにDB構造と管理ページの編集の方は修正してあります。
不具合発生したらごめんなさい。

変更内容ですが、
gzip転送いける場合は、今はリクエスト毎に動的にgzip圧縮してるんですが、
効率よくないと思うんで、
事前に圧縮データを保存しておいて適切な方を配信します。

配信側はまだ修正してません。
既存データを圧縮して、少し様子見してから完全修正します。


あと、今回の件でブログ以外にもWikiと掲示板も同じにしようとしましたが、
ブログの方は元々対応してたんですが、
Wikiと掲示板はLast-Modifiedヘッダ出力できない仕様だったんで、そこも修正します。

パスワードリマインダ（パスワード問い合わせ機能）ですが、
今でも秘密の質問を設定してロックできますが、
パスワードリマインダ用のメールアドレスを設定して、
アカウントのメールアドレスとリマインダ用のメールアドレスの双方が利用可能でないとリマインダが使えない感じにすれば、
秘密の質問より簡単かつ安全にできるかな・・・
ってことを思いついた。

そんな感じの機能実装するかもです。