HTMLフォームでFirefox環境だけでラジオボタンの挙動がおかしかった話。

Firefoxだけで起こるっぽい現象。
先日仕事で職場のサイトを改良していたら、とあるバグに気付きまして。
IEでもChromeでもSafariでも問題なく動いていたので全然気付かなかったというか、
自分がここに勤める前からこの状態だったんだろうね、という感じだけど使い方によっては致命的なやつ。

フォームのラジオボタンなんだけど。
下のラジオボタン、FirefoxではどうやってもFalseのほうチェックが出来ないんです。
(多分他のブラウザなら普通にチェック出来るはず)

True False

(他ブラウザでもFlaseの文字上クリックするとTrueにチェック入っちゃうかとは思いますがね)

上のソースはこんな感じ。

<form id="form" name="form" method="post"> <label> <input name="radio" type="radio" value="true" checked="checked"> True <input name="radio" type="radio" value="false"> False </label> </form>

おかしいところがないような感じなんだけど、こんなんにしたら直りました。

True False

直したソースはこんな感じ。

<form id="form" name="form" method="post"> <label> <input name="radio" type="radio" value="true" checked="checked"> True </label> <label> <input name="radio" type="radio" value="false"> False </label> </form>

それぞれを<label>〜</label>で別々に囲んだら直った。
<label>の役割(<label>〜</label>で括った部分の文字などを含めてボタンとして認識する...だよね？)を考えたらこれが正解なのは間違い無いんだろうけど、何でFirefoxだけがダメだったのかは調べる元気がなかったので調べてはいない(笑)
とりあえずFirefoxエンジンはマジメという事でいいですか。
というか、そもそもこれをうちの職場は何年間放置してたんでしょうか...(苦笑)

まぁあまり無い事だとは思うけど、フォームまわりで挙動がおかしいなと思ったらここを疑ってみるのは良いかも。
ボタン押せない、フォームに入力できない、とかは</label>でちゃんと閉じてないとかくらいに。

【楽天ブックスならいつでも送料無料】Dreamweaver＋HTML5＆CSS3レッスンブック [ エ・ビスコム... 価格：2,894円（税込、送料込）

【楽天ブックスならいつでも送料無料】HTML5でつくるFirefox　OSアプリケーション開発入門 [ 管... 価格：2,592円（税込、送料込）

Firefoxで表示したPDFの印刷や表示が崩れたり文字化けしたりする人向けの話。

だいぶ前の話になりますが、Firefox19からPDFのプレビュー表示機能がFirefoxに内蔵されました(昨年2月の事です)。


それまでは他のブラウザと同様にブラウザ内でAdobe Readerのプラグインを表示させる方法でも何不自由なく使えてました。PDFビューアが内蔵されたことでAdobe Readerをわざわざインストールすることなく、さらに動作も以前と比べて軽くなって快適だったんですが、反面不便な点がありました。

・WordやExcelから出力したと思われるPDFが崩れてたり文字化けで表示されることがある(市町村とかで公開してるPDFに多い)
・表示はバッチリでも印刷をかけると真っ白で出てくることがある(特にページ指定した時とか)
・印刷をかけると明らかに印刷位置がおかしいことがある
・細かい印刷設定やページ指定が出来なくなった
・目次が表示されないのでPDF内の目的のページが探せない
...など業務に支障が出るようなものもあります。

対処法として、以前のバージョンと同様にAdobe Readerのプラグインを使用して開く方法があります。

まずはAdobe Readerをダウンロードとインストールしましょう。
すでに何かしらのバージョンがインストールされている場合は不要です。
また、Macの場合は標準のプレビュー.appでも構わない場合はインストール不要です。

Firefoxを起動して、
Windowsの場合は、メニューバーの[ツール(T)] > [オプション(O)]へ
Macの場合は、メニューバーの[Firefox] > [環境設定]へ

メニューバーを表示していない場合は右側のメニューボタンから[オプション]へ

[プログラム](Macの場合は[アプリケーション])タブを選択して、検索枠に「pdf」と入力。


Windowsの場合は以下のどちらかを選択することでAdobe Readerを使用して表示できます。


Macの場合はプレビューまたはブラウザ内のAdobe Readerで表示できます。


この通り。従来通りの表示が出来るようになりました。


印刷のページ設定もここまで細かく。


今まではこれですから、全然使い勝手が違いますよね。



手順もそんなに難しくないので困ってる方はお試しあれ。

【楽天ブックスなら送料無料】HTML5開発ポケットリファレンス [ 片渕彼富 ] 価格：2,786円（税込、送料込）

FIREFOX ファイアフォックス ドイツ製クロノグラフSKYWOLF 12001022 価格：31,104円（税込、送料込）

Firefox29.0にアップデートしたらここだけ使いにくくなった。(Windows版)

Firefox29.0から個人的に1ヶ所だけ使いにくくなった点があるので、ボヤきを聞いて下さい(何)

まず、Windowsの基本動作の話になりますが、当然ウインドウの右上の[×]ボタンをクリックしたら、そのウインドウが閉じます。これは初心者レベルの話です。

そして、あまり知られていませんが、左上の小アイコンをダブルクリックしても終了出来るんです。


普段はMac使いなので、Command＋Wのショートカットを使うか、左上の赤丸(×)をクリックしてウインドウを閉じるクセが付いているので、Windowsを使っている時は基本的に左上のアイコンをダブルクリックして閉じています。

Firefox29.0ではどうなったのかというと、下の通り。
上からIE、Chrome、Firefoxです。

IEは普通にアイコン出ているのでここをダブルクリックすれば閉じます。
Chromeはアイコンこそ出ていませんが、その辺をダブルクリックすれば閉じられます。
で、問題のFirefox29.0ですが、おそらく28.xまではChromeと同様にその辺をダブルクリックしてれば終了出来たんですが、メニューバーがタイトルバーと一体となってしまったため、その領域が無くなってしまいました。
試しに、メニューバーを隠してもダメでした。

というかメニューバーと一体になったせいで、Windowsのクラシックテーマだと大変ダサい感じになってるし。

マイナーアップデートで改善して(元に戻して)くれないかなーと祈ってます。
というボヤきでした。

【楽天ブックスならいつでも送料無料】はじめてのWindows　8．1（基本編） [ 戸内順一 ] 価格：1,080円（税込、送料込）

2014/05/09 17:15追記：
即、解決した。
カスタマイズでタイトルバーを選択すれば復活した。以下、手順。

メニューのどっかを右クリックして[カスタマイズ]

左下の[タイトルバー]をクリック

タブを閉じる。

あら不思議。


驚くほど割とすぐ解決したわ(笑)

誰もが一度は経験する、楽天で注文直後に「メルマガのチェック外すの忘れた」

そうです、急いで買い物をしているとあのチェックを外すのを忘れるんですよ。
これこれ。


でも大体その時気付かなくて、数日後に「あれ、こんなメルマガ頼んでいたっけ？」です。
そしてまたしばらく経つとどんどん増えていく【楽天】と書かれたメルマガ達。
知らないうちにApple Mailでもあまりの多さに迷惑メールフォルダに移動してくれるようになったりします(笑)
まぁ慣れてくると、「何も購入してないはず」→「何かキャンペーン応募したっけ？」という発想になったりしますが(苦笑)

今でこそmyRakutenから簡単に解除できるようなりましたが、それでも面倒なものは面倒です。
その作業を極力減らすためにFirefoxを使っている方ならこの作業をしておくだけでショップでの注文時に全てのチェックが外せるアドオンがあります。

まずはGreasemonkeyをインストール。
指定した(もしくは指定しない)URL上で、指定したJavascriptを実行するアドオンです。

Greasemonkey[Add-ons for Firefox]

緑の[Add to Firefox]をポチるとインストールが始まります。

このダイアログが出たら[今すぐインストール]をクリック。

しばらく待つとFirefoxの再起動が促されるので抵抗せずに[今すぐ再起動]。

これだけでは何も動かないので以下のリンクを開く。
RAKUTEN Default No Check[Wescript]

緑の[Install]をポチる。これがスクリプト。

と、こんなダイアログが出るはずなので[インストール]


作業はこれだけ。
RAKUTEN Default No Checkには、https://*.rakuten.co.jp/rms/mall/*(楽天ショップの注文画面)上で、ラベルrmail_check(ショップからのメルマガ)、shop_rating_check(ショップを評価する)、newscheck_[N++](楽天からのメルマガ)のチェックを外す、というものがとてもシンプルに仕込まれています。

1年程前にこのアドオンを入れてからは身に覚えのない楽天メルマガは滅多に来なくなりました。それでも知らず知らず来るのは楽天カード(何だか知らないけど解除しても来る)と、楽天ブログ(メルマガ必須)ですが(笑)

ちなみに同じ楽天系サービスでも、楽天トラベルなんかだと予約画面では違うURLにもなるし、チェック項目のラベルも違っているので中身を書き換えないとだめな感じです。少し書き換えれば簡単に出来そうですから個人的にやってみます。
まぁでも楽天トラベルの場合は予約ボタンの真上にチェックボックスがあるので忘れるという事は滅多にないですがね。手間が省けるという点では良いんじゃなかろうかと。

…なんて書きながらググっていたら既に対応してるスクリプトあるじゃないですか！しかももの凄く前から。寧ろRAKUTEN Default No Checkの方がマイナーな感じじゃないですか(苦笑)

それがDeny Rakuten Newsというもの。
Greasemonkey 用スクリプト - Deny Rakuten News
上記リンクからDenyRakutenNews.user.jsと書かれたリンクをポチると、先ほどと同じようにインストール出来ます。


…便利(笑) あー、でも個別で書き換えた方が自分には合ってそうだから書き直してみよう。


しかしコレに慣れると、たまに他のブラウザでやったときによく忘れるんだよな。iPhoneアプリの楽天市場とか、入れてないFirefoxとか(笑)

【送料無料】「始めてみたけど効果がない」と思っている人の「やり直し」のメルマガ営業術 価格：1,500円（税込、送料別）

【送料無料】売れるネットショップ開業・運営 価格：2,520円（税込、送料別）

もっと早く気付けば良かったFirefoxアドオン、モバイル環境シミュレートできるFireMobileSimulator。

もうちょっと早く気付いていればもっと活用できたのに。まぁこれからも十分使えるだろうけど。

FireMobileSimulator.org


ダウンロードはここから。
FireMobileSimulator[Add-on for Firefox]

とりあえずインストールしてみるとメニューの[ツール]に[FireMobileSimulator]が増えてます。


端末を選択してページを表示(更新)すると、それらしいページが表示されます。


絵文字もキャリア別に適用された絵文字が表示されてます。

(左からDC P903i、AU W53CA、SB 602Tをシミュレートした表示)

iPhone用ページのある程度の再現もできるのですね。


ここに表示されていない端末を追加する場合は、
ツール > FireMobileSimulator > 最新端末リストから端末を追加
を選択すると、リストの中から端末を追加できます。



そんなシミュレートアプリは昔からあったけど、Firefoxに統合できるし、何より携帯向けやiPhone向けのページのソースをいつもの感覚で簡単に見られるのが特徴。

オプション設定からはUIDや端末製造番号を変更出来るほか、位置情報(ドコモ/au)の編集も可能。…まぁ色んな意味で色々使えると思います(笑)


昔Windowsを使っていた頃、DonutRAPTを利用する「2003'携帯気分」なんか使っていたことがありましたが、まぁあれは使っているうちにどんどん重くなっていたからな…。
絵文字も表示出来なかったし(iモード絵文字は外字で対処できたけど)。

そう考えるとこれはいいかも、動作が軽い上に割と自然な表示ができる。
おすすめ。

シミュレートが終わったら[端末選択解除]にチェックを入れておいたほうがいいと思います。

ネットもテレビもこれ一台。タッチパネル搭載お風呂テレビ登場！Panasonic タッチパネル＆イン... 価格：27,800円（税込、送料込）

[送料ˆ〜] iPhone4s/iPhone/iPad/iPod用 カラフル Dockケーブル 充電 同期 アイホン4s アイ... 価格：99円（税込、送料別）

Firefox4 beta9をインストールしてみた。

　FirefoxはしばらくIntelCPUに最適化されたFirefox3.5.5 lzyc[Firefox lzyc]を使っていたので、「まぁ使わなくてもいいか」と思ってたんですが、よく考えたらFirefox4って元々10.5(Leopard)以降のIntel CPU用のFirefoxだったので、「ここはもう乗り換えて良いんじゃないか」と遅ればせながら気づいてしまったのでインストールしてみました。
　betaが始めて出た頃に少しだけ試した事はありましたが、Windows版じゃないと何が変わったのかほとんどわからない仕様だったので乗り換えなかったのも一因かも(笑)

　念のため、dmgをマウントしてデスクトップに放り投げて名前を変更(既存のFirefoxに上書きしないように)してからApplicationフォルダに突っ込みました。

　

　タブがアドレスバーの上に移動していたり、ブックマークツールバーにFaviconが表示されるスキンになっていたり、これまでステータスバーと呼ばれていたものがアドオンバーという名前になっていたり、見た目だけでも結構変化してますね。

　ちなみに、アドオンバーと名前を変えてしまったので、ステータスはどこに出るのかという事になりますが、カーソルの指すリンク先はアドレスバーに出るようになったんですね。
　

　んでもって注目機能らしい「タブグループ」機能。
　
　MacのSpacesのゆるい版みたいなものだと思います。
　グループの行き来はドラッグ＆ドロップです。
　別ウインドウは別ウインドウの機能としてまだ存続しています。これがさらなるSpacesみたいなあれなのでややこしい。
　タブを深く作れる...というと何か語弊があるし、説明しにくい。
　ウインドウ ＞ タブグループ ＞ タブ ...みたいな。
　OperaのスピードダイヤルやSafariのTop Sitesと似ているようで違った特徴です。


　あ、アドオンは...
　場所は今までと変わらぬツールの中にありますが...
　

　アドオンウインドウから統合して、タブのアドオンマネージャに変わりました。
　


　2時間位使ってみた感想は...
　元々LinuxやMacはメニューバーを画面上部に持っているので、ツールバーとか省略してもそんなに操作性は変わらない。この事はGoogle Chromeにしても同様の事が言える。
　今までのFirefoxにオマケ機能が付いたような感じだなぁ。

　Windows版はメニューバーとか取っ払って...なのでUIは大分印象が違うのかなぁ。と思ったけど、大して試してもいないのでコメントは差し控えさせ(略


　しばらくは対応しているアドオンが少ないのでFirefox lzycと両刀で、Firefox4が正式リリースされたらこっちに完全乗り換えしたいと思います。(これが手間無く出来るのがFirefoxのいいところ)
　ちなみに1月18日2:00AM現在、自分が使っているので対応していたのは、Download helper、Echofonのみ。
　FireFTP、Greasemonky、Resizeable Textarea等はまだ対応してませんでした。
　というか、テキストエリアの拡大縮小は他のブラウザじゃほとんど基本で対応してるんだからそろそろ対応して欲しい(笑)

最近Firefoxを3.6にバージョンアップしたら

　会社のMacProも自宅のMacBookも、こんなダイアログが起動する度に出るようになってしまいました。

　

Firefox.app はボリューム"＊＊＊"のフォント"＊＊＊"を必要としています。
このフォントはインストールされていません。Firefox.app がこのフォントを使うことを許可しますか？

　このフォントはインストールはされているし、ここで[Firefox.app では次回から確認しない]にチェックを入れても出てくる。

　バグなのかなぁ？

　他に出てる方いらっしゃいますか？

--------------------------------------------------
2010/04/29 16:00追記
沢山のコメントありがとうございます。
marushさんからのコメントで「\Libraryにインストールして――」という記述があったのでそれを参考に。

　1. [Finder に表示]をクリックして当該フォントを選択してコピー。
　2. MacintoshHD\Library\Fontの中にペースト。
　3. その状態で[許可]をクリックしたら、このダイアログはそれ以降出なくなりました。([Firefox.app では次回から確認しない]にチェックを入れなくても)

　とりあえずこれで回避できましたが、アップデートで改善される事を期待します。

Firefox 3.1 Beta3

　Firefox 3.1のbeta3が先日リリースされまして。
　モジラ、「Firefox 3.1 Beta 3」を公開[ZDNet Japan]

　Firefox 3.1 Beta 3 Release Notes[Mozilla Firefox]
　

　プライベートブラウジング機能が改良されたとの事ですが、そんな事よりUIの変化です。

　先日のSafari 4 BETAと同じなんです。
　Apple Safari 4 BETAをインストールしてみた
　タブの感じがね。
　

　＋をクリックすれば新しいタブ。
　タブをウインドウ内の全然関係ないところへドラッグ＆ドロップすると別ウインドウで表示。
　横にドラッグ＆ドロップすれば並び替え。

　...というように、Google ChromeやSafari 4 BETAと同じUIになっています。

　流行りなんでしょうか、このUI。
　直感的といえば直感的だけど、そこまで似せる必要はあるのかなぁ？
　良い機能は取り込んで行って、SleipnirやLunascapeのようなものを目指してるのかもしれませんね。(知りませんが)

　それよりもJavaScriptの処理速度の方を競っているとは思うんですが、その結果としてこんな感じになっちゃっているのかもしれませんねー。

Firefox 3.1 beta2 を試す。

　「Firefox 3.1 Beta 2」公開、プライベートブラウジングを搭載[INTERNET Watch]

　Firefox 3.1 beta2が公開されたので試してみました。
　

　ここ(Firefox 3.1 Beta 2 now available for download[Mozilla Developer News])の「now available for download」というリンクから、それぞれWindows版、MacOS版、Linux版の各言語のFirefox 3.1 beta2がダウンロード出来ます。

　Mac版をインストールしてみました。

　予定通りというか、ほとんどのアドオンやテーマはまだ使えません(笑)
　そのうち対応してくるとは思いますが。

　とりあえず、表示速度はレンダリングがGecko 1.9.0.4からGecko 1.9.1b2になってGoogle Chrome並みに早くなっていますね。
　計測していないので体感ですが。

　他には「プライベートブラウジング」っていう機能が追加されていますね。
　

　使ってみました。
　

　「プライベートブラウジング」を開始すると、今まで開いていたタブやウインドウが全て消え(入力フォームの内容などは保存されます)、新しいウインドウが開きます。
　このモードを使っている間は履歴を保存しないので、家族共用のPCでもプライバシーが守られて安心ですね。
　「プライベートブラウジング」を終了すると、開始直前の状態に戻ります。


　そんなわけで少ししか使ってませんが、悪い印象は特にありませんでした。
　早く多くのアドオンが対応してくれるのを待つのみです。

GooglePreview

　ブラウザはFirefox派で、WindowsでもMacでもFirefoxを使わせて頂いております。

　そんなわけで、ここでは少し役立つFirefoxのアドオン(拡張機能)やテーマの紹介もしていきます。

　最初に紹介するのはGooglePreview。
　

　GooglePreview[Firefox Add-ons]

　GoogleやYahoo!の検索結果にそのページのサムネイルが表示できるようになるアドオンです。

　Googleの検索結果
　

　Yahoo!の検索結果
　

　どうやら、Yahoo!に関しては本家(yahoo.com)のみの対応で、Yahoo!Japanには対応していないようです。

　まぁ、便利かと言われたら疑問点は残りますが(笑)
　特に表示速度に支障はないので、興味のある方は試してみてください。