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

Content-Typeヘッダにcharsetをつけるようにしました

今までContent-Typeヘッダにはcharset属性はつけていませんでしたが、
text系の出力で文字コードが指定されずにブラウザによる自動判別が行われた際に、
UTF-7で処理されてしまうと掲示板やコメントへの投稿でタグを挿入できる可能性があるかもしれないんで、
Content-Typeヘッダにcharsetをつけるようにしました。

これにより、
UTF-8以外の文字コードのテンプレートは作れなくなったと思います。

今気づいたんだが・・・

先日ブログエディタの内側に薄い線つけて立体的にした際に、
灰色系の、
gray
darkgray
silver
lightgrey
gainsboro
whitesmoke
あたりを試してlightgreyに決定したんだが、

今気づいたが、
lightgrey
って
lightgrAy
じゃなくて、
lightgrEy
なんだね。

グレー = gray
と思ってたが、
アメリカ人 = gray
イギリス人 = grey
らしい。

ちなみに、今のブラウザはグレー系はgrayでもgreyでも同じ色が表示されるらしいんだが、
正解は、lightgreyだけEで他のgray系はAらしい。

エディタのデザインを少し変更しました

Firefox用の新しいブログエディタのデザインを少し変更しました。

エディタの入力領域が普通の1px実線だったので、
内側に薄い線を引いて2重にして若干領域が凹んで見える感じにしました。
ソースモードはtextareaなので枠をつけるとずれちゃいますが、
CSS3のbox-sizing:border-box
しました。
ついでに、今まではソースモードとプレビューモードで若干高さが違っていましたが、完全に同じになりました。

あと、
resize:vertical
にして、縦方向に拡大できるようにしました。
ソースモードの方は元々リサイズできたと思いますが、
横方向に拡大するとエディタからはみ出るので縦方向しかできないようにしました。

ブログエディターを大幅に変更しました

ブログエディターを大幅に変更しました。
ブログの記事編集ページでCtrl+F5とかでリロードしてください。

今回の変更は基本部分がFirefox(8.0以上)以外のブラウザが対応していないため、
旧バージョンを残したまま新バージョンを用意して、
対応ブラウザのみ(Firefoxのみ)新バージョンがロードされます。
ロード部分に問題がなければ、Firefox以外で不具合は出ないと思います。
Firefoxは新バージョンになるため、不具合が生じましたら報告お願いします。


<変更点その1>
ブラウザ標準のコンテキストメニュー(右クリックメニュー)をキャンセルせずに、
独自のメニューは標準のメニューに追加する感じになりました。
標準メニューの上に拡張メニューが出ると思います。
これにより、
WEBサイト側でPCのクリップボードにアクセスすることはできないので、
今までは右クリックからのコピペができませんでしたが、
標準メニューが表示されるのでそこからコピペできます。


<変更点その2>
標準のコピペ以外に独自に、
「貼り付け(テキスト)」
「貼り付け(HTML)」
を用意しました。
貼り付け(HTML)は、HTMLコードを特定位置に挿入することができます。
貼り付け(テキスト)は、ブラウザ標準の貼り付けと似たようなものですが、
ブラウザ標準の貼り付けだと、
ブラウザ上からコピーする場合、テキストではなく選択範囲のHTMLがペーストされる可能性がありますが、
貼り付け(テキスト)だと確実にテキストだけ貼り付けられるはずです。
改行は<br>変換されます。
Ctrl+C、Ctrl+X、Ctrl+V
等のキー操作は奪取しませんのでブラウザ標準動作となります。


<変更点その3>
タグの直接編集機能を用意しました。
エディタ上のタグ適用部分で右クリックから行けます。
元々は、こちらで用意した設定項目しかいじれませんでしたが、
タグ全体のHTMLコードを個別に編集できるようになりました。
代わりに、こちらで用意する設定項目を減らしてわかりやすくしました。


<変更点その4>
設定画面はエディタ領域全体に固定表示でしたが、
ポップアップ的な表示にしました。
上部ドラッグで移動できます。



注意点として、
ブラウザ標準のメニューに、
「元に戻す」
「やり直す」
「貼り付け」
がありますが、
追加で拡張する部分にも別に出ます。
ブラウザ標準動作と独自動作は若干違います。
特に、
「元に戻す」「やり直す」をブラウザに任せると履歴が破損して戻せなくなる可能性がありますので、
長時間の編集の際は気をつけてください。
Ctrl+Z(元に戻す)、Ctrl+Shift+Z(やり直す)
はブラウザから奪取するので独自処理になります。


Firefoxで日本語キー入力イベントが取得できない

Firefox3.6の時はできてた気がするんだが、
Linux+Firefox12
で、
日本語入力時にイベントが発生しないぽい。
ブログエディタのアンドゥ・リドゥが、
行単位で記憶してるんだが、複数行入力しても1行として扱われちゃう。
元に戻した状態で入力すると消滅することもあり得る。
Windows+Firefox12
だと問題ないぽい。
IMによるのかもしれん・・・

HTML5専用の新ブログエディターを開発していますが・・・

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

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

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

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


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

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

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

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

公式テンプレートを修正しました

公式テンプレートの<meta>が今までは、
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
なってた箇所を、
<meta charset="UTF-8" />
に変更しました。

あと、
Content-Style-Type
Content-Script-Type
も記述しないのが正解のようなので消しました。


IE6を含めて問題は生じないようです。


他に、
公式サイトで使ってる<iframe>についても、
HTML5で属性が廃止されてるものを使ってたんで修正を試しましたが、
frameborder属性を消すのは不可能ぽかったんで、ちょっとだけ修正にとどめた。

HTML5の<menu>で新ブログエディターを実験中

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

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


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

ブラウザ対応表からKonquerorを消しました

ブラウザ対応表にKonqueror(KHTML)を非対応と記載していましたが、
最近のKonquerorはWebkitのようなので、
Google ChromeやApple Safariとほぼ同じ動作となり利用できます。
というわけで、
シェアもないと思いますので、対応表から消しました。

また、
元々Konqueror(KHTML)は非対応としてましたが、
理由はエディタで右クリックメニューが出なかったことによるんですが、
標準設定で右クリックイベントの操作が禁止されていただけかも・・・

html5のコンテキストメニュー使いたい・・・

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

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


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

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