ブログエディターに下書き機能を実装しました。

記事タイトル、本文、追記
の内容を保存し、再利用することが出来ます。


ブログのエディタページで[下書き]リンクをクリックすると開きます。

[現在の内容を保存]ボタンをクリックすると保存されます。

データが存在する場合、
記事タイトルの選択が出て、
[ロード][削除]
ボタンが出ます。

選択して[ロード]すると、
記事タイトル、本文、追記の内容が上書きされます。

選択して[削除]すると保存データが消えます。


データはサーバー側ではなく、ブラウザのlocalStorageに保存されますので、
複数ブラウザでの共有はできません。
localStorageはクライアント依存ですが、数MB保存できるはずです。
IE7はたしかダメ。


下書き機能は、
<menu>タグでのコンテキストメニューの拡張で実装を検討していましたが、
<menu>タグでのコンテキストメニュー拡張だとブラウザ要求がキツイので今まで実装していませんでしたが、
editor.jsに機能をつけた場合、
本文と追記で別々になってしまうので、
editor.jsではなく編集ページに機能をつけたほうがいいと思ったので、そうしました。

ブログエディターでWebKitとTridentで改行により領域オーバーした際に自動スクロールができなかった問題ですが、
できたんで修正しました。

ただ、Trident（IE9）は、
改行挿入によりスクロールバーが出るサイズになったときにスクロールバーが出ない。（でてる状態ならスクロールできる）
BackspaceやDeleteで改行を削除した際に、改行コードだけ消されて<br>が消えない。（2回消す必要がある）
ぽいです。
この辺まだ改良が必要な感じ・・・

WebKit（Google Chrome、Apple Safari等）はFirefoxと同じで問題なくスクロールできるようになったようです。
推薦ブラウザであるFirefoxとほぼ同じになりましたが、
推薦ブラウザはFirefoxのみで、その他は準推薦以下にしようとおもいます。

先日、スマートフォン等の小画面端末のために、
公式サイトを画面サイズ799px以下の場合は1カラムにする変更をしましたが、
2カラムだと、850px程度はないとはみ出す感じだったので、
999px以下は1カラムに変更しました。

1カラムレイアウトで、550px程度あればはみ出さなそうな感じなので、
横640pxの画面なら十分使えそうです。

パスワード変更とかのフォーム周りをちょっといじりました。
主に見た目が変わっただけですし、
既存ユーザーはほとんど使わないでしょうから影響はありません。

アカウント登録ページのメール送信の際の文章が、
同一IPで接続するように表示されていましたが、誤りなので修正しておきました。
現在の仕様では、アカウント登録端末の識別はIPでは無くクッキーで行います。
まあ、既存ユーザーには関係ありません。

昨日のブログエディターの改行仕様変更ですが、
documentFragmentを使って改行と新行を挿入していましたが、
うまくいってたけど、documentFragmentの使い方として正しくないような気がしたので修正しておきました。
見た目や挿入内容に変化はありません。


新しい改行仕様で、

1. WebKitとIE9でキャレットが表示範囲より下に行く際に自動スクロールができない。
2. Operaはセレクション（というか、キャレット？）が消えちゃうので新仕様にしなかった。

という点があったので、どうにかならないかと試していましたが、
両方共難しい感じでした。

1.の自動スクロールに関しては、
WebKitとIE9では、<br>でoffsetTopが取得できず、現在位置が取得できない。
代わりに、次行に要素を入れて試してみたが、
Chromeで試したが、そうするとoffsetTopは取得できるが、セレクションおかしくなって、
Operaと同じようにキャレットが消えちゃう感じ。
それはまずいので、実験失敗。
同じ件で英語情報はあったから、バグ報告はいってるのかな？

2.のOperaの件は、
removeAllRangesするとキャレットが消えて、
新しくレンジを入れてもキャレットが復活しない。
removeAllRangesしないとキャレット移動ができなそう。
OperaはdeleteFromDocumentにも問題がある感じ。（こっちは別の方法でどうにかなりそう）
range周りにおかしいところがいっぱいある感じ・・・

改行の仕様を変更しましたが、
通常改行が<p>となるブラウザが多かったため、
公式サイトと標準テンプレートで、
<p>のmarginを0pxにしていましたが、
ページ全体にCSSを適用してしまうのはあまりよくないと思いますし、
IE9の改行が<br>になりましたので、
そのうち公式サイトと標準テンプレートのCSSを変更すると思います。

まあ、IE8は結構シェアがあるので、
早くてもVistaがサポート切れてからかな・・・

ブログエディターでの改行の際に、
今まではブラウザの仕様により、

Firefox = テキスト<br>
IE = <p>テキスト</p>
Opera = <p>テキスト</p>
Chrome = <div>テキスト</div>
Safari = <div>テキスト</div>

となっていましたが、
IE9、Opera、Chrome、Safari
でも、
テキスト<br>[改行]
となるようにしました。

また、今までは、
<br>→<br />[改行]
変換を行い、
同時に<b><i><s><u>が連続して複数続く場合一つに統合させていましたが、
HTMLコードの変換は行わないほうがいい場合があると思いますので、
変換機能は削除しました。
ただし、ブラウザ機能により変換が行われる可能性があります。

さらに、今までは、
リスト（<li>）中で改行した場合、ブラウザ依存ですが、
普通は<li></li>が1行増えるような動作をしますが、
リスト中だけ動作を分けるのは面倒なのと、
リスト中で改行できないのは不便な場合もあるとと思いましたので、
リスト中も<br>改行にし、
右クリックから手前に<li>&nbsp;</li>を追加する機能をつけました。


Firefox以外はまだ若干Firefoxと挙動の違う箇所があります。

ChromeとSafari


IE8以下

IE9

Opera



＊追加修正
Opera判別処理と、
IEは、<li>内の末尾が<br>だと２行になってしまうようなので、
<UL>又は<OL>ボタンでリストを生成する際の仕様を変更し、
<li>内の<br>は分割のみで<br>は削除するようにしました。

公式サイトをスマートフォン等の画面の小さい端末でも見やすいようにしました。

画面の横幅が799px以下の場合、
サイドバーが非表示の1カラムデザインになり、代わりに<select>メニューが表示されます。
<select>メニューは選択変更でジャンプします。

IE 8以下
Firefox 3.5未満　（制作元サポート切れバージョン）
の場合は機能が無効なため、799px以下でも2カラム表示となります。

アクセス解析は1カラム化が難しかったので、
799px以下でも2カラムです。

800px以上の画面の場合今までどおり2カラムページは2カラムですが、
<form>系をちょっといじったので、若干表示内容が変わっています。


デザインを大幅に変更したため、
旧版CSSをキャッシュしている場合は表示がおかしくなる可能性があります。
公式サイトトップページで、
Ctrl+F5　（ブラウザによっては、Ctrl+更新クリック）
で強制リロードとなりCSSが更新されると思います。
単にF5や更新ボタンだけだとキャッシュが利用される可能性があります。


表示のおかしいページや機能に問題が生じている箇所がありましたら報告していただけると助かります。

公式サイトをスマートフォンの様な画面の小さい端末で利用しやすいように改造しようとしています。

仕組み的には、
@mediaで799px以下の際にサイドバーを消して、
代わりに<select>でジャンプする感じのメニューを表示する感じ。
右上の468x60の広告は場所移動して下にセンタリングして重ねます。

800px以上の場合は構造は変わらんのですが、
<fieldset>とか<optgroup>とか、
知らなかったんですが、便利そうなんで導入しようと思います。
（これらはHTML4からあったらしい・・・）

今までブログの掲示板機能は標準で有効となっていましたが、
機能を利用しないのに第三者が掲示板への投稿ができると、
投稿されているのに気づかない可能性があると思うので、
標準で無効とし、設定で有効にした場合のみ利用できるようにしました。

既存ブログは一旦、全て無効となっています。

今回の変更で影響を受けるのは、
通常掲示板、スレッド掲示板のみで、ミニ掲示板は影響を受けません。

プラグイン設置のミニ掲示板については、
プラグインを設置していないのに投稿されることはないと思いますし、
万が一投稿されたとしてもHTML表示ではないのであまり問題もないと思いますので、
この設定の適用外で常時利用できます。