無料ブログ「rentafree.net」の管理人ブログ

タッチパネル端末でのエディタ操作

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

標準のブラウザ(Chromeベース?)
Firefox
Opera
Dolphin
の4つ試したんですが、

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

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

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

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


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


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

ブログエディターの追加スクリプトを分離しました

ブログエディターの本体に追加スクリプトが今まではHTMLに直接書かれてましたが、分離しました。

ブログエディターにファイルのドラッグ&ドロップ機能をつけようかなと考えてるんですが、
できそうなら画像とかをD&Dでアップロードして挿入できるようにしたいんですが、
そうするとエディタ本体とアップロード部分は分離したいんで、
追加スクリプトのサイズが大きくなりそうなんで、先に追加スクリプトのHTMLとの分離をしました。

ブログエディターの色選択ツールを修正しました

朝の記事で、
<input type="range">
を使った色選択ツールのサンプルを作りましたが、
<input type="range">
はFirefoxに実装されてないので出来ませんが、
カラーパレット(16色)は実装できるので、
パレットだけでも先に実装しちゃったほうが、後で再修正するにしても楽なので、
ブログエディターの色選択ツールを修正しました。

変更したのは新エディターだけです。

Firefoxが
<input type="range">
<input type="number">
を実装したら、
非対応でスライダーが使えなくても致命的ではありませんから、
古いバージョンは無視して再修正すると思います。

今回の修正のメインは16色パレットのクリックでの色指定ですが、
他に、
今までは16進6桁又はRGB10進以外が設定されている場合はRGB値の取得を行なっていなかったので、色選択ツールは#000000で起動しましたが、
パレットにある16色(小文字指定限定)か、16進3桁で設定されている場合にもRGB値を取得するようになりました。
また、RGB値を取得できないパターン(未定義color name)はRGB初期値が(0,0,0)になりますが、色コード自体は設定値のまま表示されます。

Operaのバージョン取得が正常にできていませんでした

OperaのUser-Agentは、バージョン10以降、
Opera/9.80 (X11; Linux x86_64; U; Edition Next; ja) Presto/2.10.289 Version/12.00
のように、
全部"9.80"となって、末尾の
Versionがバージョンになるらしいんで、
全部9.80になってました。

一応対応したんですが、
この仕様かなりうざい。
Opera判別のためのコード1行増やさなきゃいけないし、
Version/xx.xxが確実に末尾でない場合、取得難しい。

色選択ツールのサンプル作ってみた

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

<input type="number">を導入しました

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

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

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

Firefox 13 で<input>

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

記事の編集が反映しない場合がありました

記事を編集して投稿する際に、
タグ編集画面等を開いて変更し、
入力領域にフォーカスせずにそのまま投稿した場合、
最後にタグ編集画面等で変更した内容が反映せずに投稿されてしまうという問題がありました。

修正しました。

この問題はFirefox以外では問題が発生していなかったかもしれません。