管理ツールとブラウザ別動作
ブログの管理ツールに、
ブラウザによっては実装されていない機能をしようしているので、
ブラウザによっては管理ツールのフル機能が使用できません。
一部機能が使えない場合でも、
ほとんどのブラウザで利用可能なようには作ってあります。
ブラウザによって大きく動作が変わるのは、ブログ記事の編集ページです。
他のページでは、どのブラウザでもほとんど変わりません。
ただし、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は利用不可です。
画像アップロード機能が利用できない場合は、
アップロードボタンを押した際に、
「このページからのアップロードができないブラウザです。」
と表示されます。
その場合でも、ファイルマネージャからのファイルアップロードは可能ですので、
ファイルマネージャから画像ファイルのアップロードを行ってください。
ブラウザ別の対応表
ブラウザによっては実装されていない機能をしようしているので、
ブラウザによっては管理ツールのフル機能が使用できません。
一部機能が使えない場合でも、
ほとんどのブラウザで利用可能なようには作ってあります。
ブラウザによって大きく動作が変わるのは、ブログ記事の編集ページです。
他のページでは、どのブラウザでもほとんど変わりません。
ただし、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 | - | 非対応 | ブログエディターが利用できません。 画像挿入機能からの画像アップロードができません。 |