テンプレート変換ツールを公開しました。

アドレスはこちら
http://www.rentafree.net/tool/tempconv/


現在のところ、
忍者ブログ → rentafree.net
FC2ブログ → rentafree.net
しかできませんが、
変換先も含めて順次、他仕様に対応させていきたいです。
たぶんJUGEMとかいけると思う。


昨日の記事でも言及しましたが、
Movable Typeをうちの仕様に変換出来ればいいな思いましたが、
仕様ぱっと見ましたが、Movable Typeも無制限に条件式作れるんで無理でした。
標準テンプレートで使われている式だけ対応とかならいけるんですけど、
高度な仕様のテンプレートを他所の仕様にするのは難しいです。


他人の作成したテンプレートを変換して使用する場合は、
くれぐれも、ライセンスに注意してください。
まあ、無料テンプレートとかはバックリンク目的で配布してるだろうから、
リンク外さなければ作者さんも高確率で許可してくれる気がします。

ブログテンプレート変換ツールを作っています。
というか、
忍者ブログ → うち
の変換処理は完成したので、すぐに公開するかも。

ほんとは、
うちの仕様から他所のサービスの仕様への変換も考えてたんですが、
うちのブログテンプレートは、if文で複雑な条件式で高度なテンプレートが作れるんで、
うちから他所の仕様にするのは無理ありそう・・・

WordPressのテンプレートなんかも、
PHPコードまんまでかなり高度だから無理ぽい。

仕様見たことないが、Movable Typeなんかはどうなんだろうか・・・
取り込めればオープンソースのテンプレートなんかもありそうな気がするが・・・

レンタルブログ系のブログテンプレートは、結構いけそうな気がする。

ブログ管理ページのブラウザ対応表です。

公開ブログの対応ブラウザはテンプレート次第です。
（公式テンプレートなら、少なくともこのページに記載されているブラウザでの閲覧は全て可能です。）


PCブラウザ

ブラウザ名 (コア名)	バージョン	ステータス	説明
Firefox (Gecko)	85.0以上	推薦	コンテキストメニューが独自UIとなります。
	85.0未満	対応	ブラウザ標準のコンテキストメニューに独自項目が追加されます。
	11.0未満	対応	タグ直接編集機能が利用できません。
	8.0未満	対応	コンテキストメニューが独自UIとなります。
	4.0未満	対応	画像挿入機能からの画像アップロードができません。
	3.0未満	非対応	ブログエディターが利用できません。
IE (Trident)	10.0以上	対応	コンテキストメニューが独自UIとなります。
	10.0未満	対応	コンテキストメニューが独自UIとなります。 画像挿入機能からの画像アップロードができません。
	9.0未満	非対応	ブログエディターが利用できません。
Chrome (Blink)	28.0以上	対応	コンテキストメニューが独自UIとなります。 バージョン28からBlinkとなります。（27まではWebKit）
	4.0以上	対応	コンテキストメニューが独自UIとなります。
	4.0未満	非対応	ブログエディターが利用できません。
Safari (WebKit)	3.1以上	対応	コンテキストメニューが独自UIとなります。
	3.1未満	非対応	ブログエディターが利用できません。
Opera (Presto)	15以上	不明	バージョン15から独自開発のPrestoではなくWebKitとなります。 他のWebkitブラウザと同じ対応状況になると思われます。
	12以上	対応	コンテキストメニューが独自UIとなります。
	12未満	対応	コンテキストメニューが独自UIとなります。 画像挿入機能からの画像アップロードができません。
	9未満	非対応	ブログエディターが利用できません。
Pale Moon(Goanna)	26以上	対応	GoannaレンダリングエンジンがGeckoベースなので全ての機能に対応していると思われますが、マイナーブラウザなので推薦はしません。
	26未満	不明	バージョン26未満はFirefoxベースです。

タッチパネル （モバイル）

ブラウザ名 (コア名)	バージョン	ステータス	説明
Chrome (Webkit)	全バージョン	入力可能	基本的にコンテキストメニューの拡張項目が出ません。
Opera (Presto)	14以上	不明	バージョン14から独自開発のPrestoではなくWebkitとなります。 他のWebkitブラウザと同じ対応状況になると思われます。
	12.10以上	入力可能	基本的にコンテキストメニューの拡張項目が出ません。
	12.10未満	非対応	ブログエディターが利用できません。
Firefox (Gecko)	全バージョン	入力可能	基本的にコンテキストメニューの拡張項目が出ません。
Pale Moon(Goanna)	全バージョン	入力可能	基本的にコンテキストメニューの拡張項目が出ません。
Safari (Webkit)	不明	未確認	Apple系端末でのテストは行なっていません。

テキスト選択とコンテキストメニューの両立できるブラウザが存在しないため、
タッチパネル操作時はコンテキストメニューの拡張機能が無効化され機能が制限されます。


ブログの記事投稿ページでブラウザによる違いが生じます。
その他のページの機能はブラウザによる違いはほぼ発生しません。

エディタ上で右クリックした場合、独自のコンテキストメニュー（右クリックメニュー）を表示します。
ブラウザによってはコンテキストメニューの操作を阻止する設定ができますが、コンテキストメニューが表示されないと一部編集機能が利用できません。

ブログエディタ非対応ブラウザでも、ソースモード（HTML直接入力）で編集して投稿することは可能です。

画像アップロード機能非対応のブラウザでも、ファイルマネージャからのファイルアップロードは可能です。

IPアドレスが変わるとログインセッションが無効になります。
携帯電話に搭載されているブラウザはアクセス毎にIPアドレスが変わる可能性が高いので、通常の認証方法では要ログインページへのアクセスができない可能性が高いです。
その場合はSSLログインページにある「ワンタイム認証」機能を利用してください。

記載されていないブラウザのほとんどは、独自のレンダリングエンジンを持たず、上記ブラウザのいずれかのコアを利用しています。
その場合は、利用しているコアのブラウザと同じ挙動をします。

対応ブラウザで不具合がありましたら報告していただければ助かります。

ブログの管理ツールに、
ブラウザによっては実装されていない機能をしようしているので、
ブラウザによっては管理ツールのフル機能が使用できません。

一部機能が使えない場合でも、
ほとんどのブラウザで利用可能なようには作ってあります。

ブラウザによって大きく動作が変わるのは、ブログ記事の編集ページです。
他のページでは、どのブラウザでもほとんど変わりません。
ただし、IE6については他のブラウザとCSSの仕様が大きく違うため、表示が崩れる箇所があるかもしれません。


ブログのエディターは、
HTMLのcontentEditableという機能を利用してJavaScriptで処理していますが、
その中で、主に、
window.addEventListener()が利用可能かどうか？
window.getSelection()が利用可能かどうか？
で処理を分けてあります。
両方共バージョン8以下のIEが利用不可で、他のブラウザはほぼ使えます。
IEについてもこの機能がIE9で実装されたので、IE9はIE以外のブラウザとほぼ同じ動作をします。


window.addEventListener()は、
ブログエディター内のHTMLでイベントによりスクリプトを実行しにくくするのに利用しています。
ブログ管理ページはwww.rentafree.netですので、
www.rentafree.net上のページでブラウザがプログラムを実行できるのはセキュリティー上好ましくありません。
window.addEventListener()が利用な可能なブラウザは、
イベントによるプログラムの実行を阻止しするため、
管理ページ上でのプログラムの実行が難しくなっています。
（ただし、全てのイベントを阻止できるわけではありません）
IE9についてはイベントでスクリプトを実効するのは難しくなっていますが、
全てのバージョンのIEに、挿入された<script>タグを実行できるというセキュリティーホールが存在するため、IEはおすすめしません。

これらは、得体のしれないHTMLコードを拾ってきてブログエディターに入力した際に問題が生じる可能性があります。
怪しいHTMLコードを拾ってきて、コードの内容を理解せずにブログに投稿する場合などは注意してください。


window.getSelection()は、
タグの挿入機能などで、エディターの選択範囲を置換するのに利用しています。
バージョン8以下のIEでは使えない機能ですが、
代わりにdocument.selectionを利用して置換しています。
タグの挿入機能自体は利用可能に作られていますが、
バージョン8以下のIEでは、他のブラウザと挙動が変わります。


ブログエディターで利用している、contentEditableでは、
Enterキーにより改行が入力された場合、
Firefoxでは<br>が挿入されますが、
IE = <p>
Opera = <p>
Google Chrome = <div>
Safari = <div>
で一行囲むことにより改行風になります。
普通は改行は<br>で行いたいと思いますので、Firefoxのみが推薦ブラウザとなります。
Firefox以外のブラウザ（Safari以外）でも、
Enterではなく、Shift+Enterだと<br>で改行されます。


ブログエディター以外に、
ブログ記事編集画面の画像挿入機能の画像アップロードに、
window.FormData()という機能を利用しています。
これは実装されていないブラウザが多いです。
Firefoxだと4.0から実装されている機能です。
Google ChromeとSafariはFirefoxよりも前から実装されています。
IE、Operaは利用不可です。

画像アップロード機能が利用できない場合は、
アップロードボタンを押した際に、
「このページからのアップロードができないブラウザです。」
と表示されます。
その場合でも、ファイルマネージャからのファイルアップロードは可能ですので、
ファイルマネージャから画像ファイルのアップロードを行ってください。


ブラウザ別の対応表

ブラウザ名	バージョン	ステータス	説明
Firefox	4.0以上	推薦	すべての機能が利用可能で推薦ブラウザです。
	3.x	対応	画像挿入機能からの画像アップロードができません。
	3.0未満	非対応	ブログエディターが利用できません。 画像挿入機能からの画像アップロードができません。
IE	9.0	対応	画像挿入機能からの画像アップロードができません。 Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
	8.0と7.0	対応	画像挿入機能からの画像アップロードができません。 タグ挿入時の動作が他のブラウザと違います。 Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
	6.0以下	非対応	表示が崩れます。 Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
Google Chrome	-	対応	古くなければ全ての機能が利用可能ですが、 Enterキー入力による改行が<div>となります。（Shift+Enterで<br>）
Safari	-	対応	古くなければ全ての機能が利用可能ですが、 Enterキー入力による改行が<div>となります。
Opera	-	対応	画像挿入機能からの画像アップロードができません。 Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
Konqueror	-	非対応	ブログエディターが利用できません。 画像挿入機能からの画像アップロードができません。

前回予告していました、
ブログエディターのIE9新機能絡みの修正をしました。

IE8よりは格段に標準仕様に近づきましたが、
IE9の動作が他のブラウザとかなり違っていたので、
Firefox等の他のブラウザも含めて処理を修正しました。

変更箇所は主に
<UL><OL><DIV>
です。
その他タグの挿入処理も、
IE9はIE以外と共通化しました。

OperaもIE互換色が強いので変化が大きいです。

ブログエディターで、

1. ソースモードでスクリプトコードを挿入してからプレビューモードに切り替えた場合
2. 投稿済みの記事を編集しようとした場合

に、
JavaScript等のプログラムをブラウザに実行させることができたため、
そこらの対策をしました。

自分で入力する場合は問題ないですが、
どこかから得体のしれないHTMLコードを入れた場合に、
悪意のあるスクリプトコードをブログ管理者が実行しちゃうとかなりやばいですんで、そこらの対策。

エディター部分で、
focus
blur
contextmenu
keydown
keyup
copy
cut
paste
change
click
dblclick
keypress
resize
scroll
mousedown
mousemove
mouseout
mouseover
mouseup
イベントを設定し、
エディター内の要素でこれらのイベントをハンドルすることを不可にしました。


IE8以下については、
スクリプト不可にする方法がおそらくないので対策していません。
IE9はたぶん新機能が機能すると思うのですが、
現在のところIE9でのテストを行っていない状況です。
近日中にIE9のテストを開始しようと思います。
IE9に対応させるためにIE7を削除すると思うので、
今後IE7での動作確認はできなくなります。

IE9はその他の部分でも進化しているようなので、
IE対策の処理を見なおして、その他のクロスブラウザ処理部分でも改善しようと思います。


推薦ブラウザや対応ブラウザ等の情報も整理したいと思います。

最近Firefoxのバージョンアップが早すぎる・・・

以前からなんですが、
謎のサーバーエラー（HTTP 500）が週一回ほど発生するようなんですが、
14-15時くらいに、
調査のために大量アクセス発生させたり、
数秒x数回のサーバー停止を伴う作業やっていました。

作業中のサーバー停止の際に切断してしまった方がいましたら、ごめんなさい。


一応修正を加えて作業終了としましたが、
週一回程度しか発生しない現象なので、再現が難しく、
なおってないかもしれないです・・・

昨日告知したAllowOverrideについてですが、
WEBサーバーの設定をいじりました。
作業は完了です。

不具合の発生するアドレスがありましたら報告お願いします。

サービスのApacheで、AllowOverride使ってるんですが、
負荷を考えるとよろしくないと思うんで、
近いうちにAllowOverride Noneに修正しようと思います。
というか、たぶん今日やります。

作業の際に、
数秒のサーバー停止が数回発生すると思います。
万が一設定をミスったら数分の障害が発生するかもです。

アップロードファイル配信の仕様を変更しました。
以下の2点です。

1. リクエストにIf-Modified-Sinceヘッダがあれば確認せずに304 Not Modifiedを返すようにした。
2. application/octet-stream以外の場合はContent-Dispositionヘッダでinlineを返すようにした。


1. リクエストにIf-Modified-Sinceヘッダがあれば確認せずに304 Not Modifiedを返すようにした。
これは、
リクエストにIf-Modified-Sinceヘッダがあるということは、以前に接続したことのあるアドレスでブラウザはキャッシュを持っているので、
アップロードファイルのIDはユニークで内容の変更もできませんので、
一度接続してキャッシュがあるなら、確認せずに304 Not Modifiedを返せば負荷が軽減できる。
ってことです。
場合によっては、画像等のアップロードファイルの表示速度も速くなります。


2. application/octet-stream以外の場合はContent-Dispositionヘッダでinlineを返すようにした。
これは、
今まではapplication/octet-streamの場合のみ、
Content-Disposition: attachment;
を返していましたが、
それ以外の場合は
Content-Disposition: inline;
を返すようになりました。（今まではapplication/octet-stream以外はContent-Dispositionヘッダ無し）
未定義拡張子の場合にapplication/octet-streamとなります。
Content-Disposition: attachment;
だと、ほとんどの場合、ファイルタイプにかかわらずブラウザはダウンロードダイアログを出すと思われます。
Content-Disposition: inline;
だと、ブラウザが表示できるならブラウザに表示されます。
基本的には今までと変わらないはずですが、
Content-Dispositionヘッダは、ファイル名を指定するために付けています。
ブラウザで表示する場合はファイル名は関係ありませんが、
ダウンロードして保存する際にファイル名の初期値が設定されます。
今まではapplication/octet-streamのみでしたが、
例えば、画像ファイルを右クリックなどで保存する場合のファイル名初期値が設定されます。
ファイル名は、アップロードした際のローカルファイル名です。



Firefox 3.6
IE 8.0
Google Chrome 14
で確認しました。

万が一今回の変更で不具合が生じるブラウザがありましたら報告お願いします。