＞ ＞ ＞ ＞ Firefox・Netscapeで連続した半角文字を折り返す

Firefox・Netscapeで連続した半角文字を折り返す

Posted at August 4,2005 11:56 PM
Tag：[Customize, FirefoxExtension, MovableType, Mozilla]
連続した半角文字が折り返さない状態FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せないという既知のバグがあります。当サイトでもMTタグをリストとして掲載している記事をFirefox・Netscape等で表示すると、画像のようにブロックからはみ出して表示されてしまいます。
Firefoxまとめサイト：URLっぽい文字列が右端で折り返されずレイアウトが乱れます

FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。

あすかぜ・ねっと：url_breaker

またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。

outsider reflex：Firefoxで長いURIを折り返す
（本文中にダウンロードのリンクがあります）

まず、上記を Firefox拡張として利用する場合は、下記の手順で設定します。GreaseMonkey という拡張を利用する GreaseMonkey 版と、url_breaker を直接拡張として利用するXPI版があります。作業はいずれも Firefox で行います。

GreaseMonkey版

  • GreaseMonkeyのページにある「Install Greasemonkey 0.3.5.」をクリック
  • 「今すぐインストール」をクリック
  • 再起動（これで追加した拡張が有効になります）
  • url_breakerまたはFirefoxで長いURIを折り返すのページにある url_breaker.user.js または url_breaker_plus.user.js（リンク自体は文章です） のリンクを右クリックして「Install User Script...」を選択
  • 開いた画面で「OK」をクリック

XPI版（url_breker のみ）

  • url_breakerのページにある「インストール／ダウンロード」のリンクをクリック
  • 「今すぐインストール」をクリック
  • 再起動（これで追加した拡張が有効になります）

となっています。

次に、url_breaker は本来 Firefox拡張ですが、ブラウザやユーザ設定に依存しない（例えばNetscapeに適用させたい等）方法という意味で、通常のJavaScritpと同様に設定するカスタマイズについても併せてご紹介致します。
＃Firefox拡張との競合や機能の認識不足等で問題があるようでしたら本エントリーのカスタマイズは行わない旨を改めて掲載したいと思います。

１．スクリプトのダウンロード
上記の url_breaker または url_breker_plus をダウンロードします。

２．スクリプトのアップロード
どちらもアーカイブ形式ではありませんので、ダウンロードしたスクリプト（url_breaker.user.js または url_breaker_plus.user.js）をそのままローカル・サイト・パス（index.htmlが置かれているところ）にアップロードします。

３．テンプレートの修正
スクリプトを適用したいテンプレートの最後の方に

　　　　　　　　　：
<script src="<$MTBlogURL$>url_breaker_plus.user.js"  type="text/javascript"></script>
</html>

という風に青色部分を追加します（例は url_breaker_plus.user.js の場合です）。
ページの最後に設定する理由は、このスクリプトがページが表示された後に実行される必要があるためです。逆に <head>～</head> の部分に挿入しても効果はありませんのでご注意ください。

改善後の表示拡張機能またはスクリプトの導入で表示が改善されました（左）。スクリプトの動作は、スクリプト内に記述された特定の半角文字列の後方に <wbr> を挿入するというもので、ウィンドウ幅のリサイズに伴って折り返し位置を変えてくれますので、固定カラムだけでなく可変カラムデザインのサイトにもかなり有効です。

４．スクリプトの修正
IE系ブラウザで本スクリプトを動作させるとJavaScriptエラーが発生しますので、スクリプトに、

(function () {
if(navigator.appName == 'Netscape'){
　　　　　：
　　　（中略）
　　　　　：
}
})();

と青色の2行を加え、Mozilla系ブラウザのみで動作するようにしてください。

以上です。

2005.08.05 追記
機能の認識不足で誤解を招く説明になっていたため、本文を一部修正致しました。併せてタイトルも修正しました。

2005.09.27 追記
IEでJavaScriptエラーになるのを避けるため、スクリプトの修正を必須項目に変更しました。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ 再リンクのお願い：Love Golf 1-2 Finish Campaign from Zero Cool の独り言
"かけさん" がインターネットから姿を消している間、一時的に "Love Go... [続きを読む]

Tracked on August 13, 2005 12:43 PM

≫ Firefoxで長いURLなんかを折り返してくれるJavaScript from やむやむ
前から気になってたけど、たいした理由もなく後回しにしてた （見て見ぬふりをしてた. [続きを読む]

Tracked on September 27, 2005 5:51 PM

≫ URL 文字列の折り返し from いろんなことが起こる
http://yasunao.minidns.net/ispdc/#long-l... [続きを読む]

Tracked on October 31, 2005 8:02 PM

≫ URL 文字列の折り返し from いろんなことが起こる
http://yasunao.minidns.net/ispdc/#test-t... [続きを読む]

Tracked on October 31, 2005 10:02 PM

≫ Mozilla系のブラウザで半角英数の文字列を折り返させる from Sunflower
2005/img/20051119_jsfirefox.gif" alt="Mo... [続きを読む]

Tracked on November 19, 2005 6:38 AM

≫ Firefox：連続した半角文字列を折り返す拡張機能 from ZOO PC
唐突だけど、自分はOSがMacで、ブラウザはFirefox。 シェアはSafariとどちらが多いのだろう？ そんなことはどうでもいい。いや、よくないか... [続きを読む]

Tracked on January 15, 2006 5:22 PM

≫ 連続した半角文字を折り返す from Free Style
Firefox・Netscapeで連続した半角文字が折り返されず、囲った枠から ... [続きを読む]

Tracked on February 26, 2006 4:21 PM

≫ 長いURIの折り返し（Mozilla系） from KaleidoScope
http://map.yahoo.co.jp/pl?nl=43.3.7.31&el=141.18.42.8&la=1&sc=5長い半角英数の表示テスト。*... [続きを読む]

Tracked on March 19, 2006 1:56 AM

≫ 長いURLを強制改行（折り返し）するJavascript from nakawake.oops!
こんにちは、なかわけです。 今日は仕事中にすごいいい情報を手に入れました。今日1... [続きを読む]

Tracked on February 28, 2007 2:49 AM

≫ 長いURLを強制改行（折り返し）するJavascript from nakawake.oops!
こんにちは、なかわけです。 今日は仕事中にすごいいい情報を手に入れました。今日1... [続きを読む]

Tracked on April 19, 2007 11:21 AM
コメント

こんばんは。
ちょっとコメントするに悩みましたが・・・

これって本来Firefox拡張機能なのでは？
そうしないと他のサイトでは結局折り返らないわけですし＾＾；

[1] Posted by WIND : August 5, 2005 1:21 AM

＞WINDさん
こんばんは。
早々のご指摘ありがとうございました。

ユーザがブラウザの拡張を行うことで（他のサイトも）一意に折り返るようになるという考えも納得ですが、Firefox 独自の機能であれば Netscape には適用可能という認識でおります。

ということで本文を若干修正しましたが根本的に問題があるようでしたら再度ご教示頂ければ幸いです。
なお、根本的な認識誤りであれば本文でお詫びしたいと思います。ただ基本的にエントリー全体を抹消することはしたくないのでその点はご理解ください。

以上です。
それではよろしくお願い致します。

[2] Posted by yujiro : August 5, 2005 2:45 AM

こんにちは。これ、前から気になってたことだったんですけど、ずっとそのままにしてて、
だけど 最近書いた記事でまたまたこの現象を目で確認してしまったので
我慢ならず、やっと重い腰をあげて、スクリプトを入れました。
もう、Firefox でも 文字列が 壁を突き破っちゃうようなことはなくなりました。

[3] Posted by さえら : September 27, 2005 4:20 PM

ん???。。。
「オブジェクトでサポートされてないプロパティまたはメソッドです。」 というエラーが出るようになっちゃいました。
やっぱ、拡張機能として使ったほうがベターなのでしょうか？

[4] Posted by さえら : September 27, 2005 4:37 PM

＞さえらさん
こんにちは。
ご指摘ありがとうございます。
すいませんが記事の最後に書いてある修正も行ってみていただけますでしょうか（４項として必須項目にしました）。

再度動作確認を行い、IE6/Firefox/Netscape7/Opera8でJavaScriptエラーが出ないことを確認しました。

Firefox の拡張機能として利用するのが本来ですが、Netscape でも同様の効果があり、利用者の環境に依存しない解決策として有効と考えます。

[5] Posted by yujiro : September 27, 2005 5:45 PM

w(°ｏ°)w　おおっ！！わっかりましたー。
今日はこれから出かけるので、できそうにもないのですが
近々やってみます。ありがとうございます。

[6] Posted by さえら : September 27, 2005 5:52 PM

できましたー。IEでエラー出なくなりました。(￣ー￣)v

[7] Posted by さえら : September 27, 2005 11:29 PM

＞さえらさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようでよかったです！

[8] Posted by yujiro : September 28, 2005 2:54 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）