Firefox関連の記事一覧



20150614-FirefoxのアドインFireLinkの設定集-00

私はPCでの普段のウェブブラウジングやWeb制作のブラウザーはFirefoxなのですが、ブログを書くときや、ためになる情報が掲載されているページを共有するときに欠かせないアドオン(機能拡張)があります。

それがFireLinkです。

20150614-FirefoxのアドインFireLinkの設定集-01

開いているWebページのURLやタイトルを好きな形式でコピー出来るアドオンです。

HTML, Markdown, MeidaWiki, PukiWiki といった形式が標準で用意されており、独自のものを作成することが可能です。キーボードによる操作(一時的にON/OFF可能)、タイトルとURLを編集してリンク生成、全てのタブをまとめてコピー、短縮URLの選択、といった便利な機能が用意されています。

FireLink - Copy link with keyboard shortcuts(add-ons for Firefox)


今回は、私が使っているFireLinkの設定を紹介します。

記事の続きを読む




2013年2月21日に「FirefoxでPDFの文字が表示されない・文字化けする場合の設定」という記事を書いてから、2年が過ぎました。

この記事では、Firefox 19から標準で動作するようになったPDF.js(内蔵PDFビュアー)が日本語を含むPDFの表示が弱すぎると言うことを書きました。

縦書きを多用している新潟市の市報を表示したら、以下の画像の様に縦書き部分が正常に表示されないという、かなり厳しい感じの品質でした。PDFデータは「市報にいがた(平成25年2月17日 2399号)」(新潟市)です。

20150414-Firefoxの内蔵PDFビュアーpdf_jsの進化-04

あれから、2年。

PDF.jsはどこまでレベルアップしたのか、同じデータで見てみましょう。

記事の続きを読む



★ざっくり言うと

  • YouTubeでは動画の速度を2倍まで速くできる
  • FirefoxではFlashプレイヤーでの再生になっているとオプションで出てこない
  • Flashプレイヤーの再生から変更するのはHTML5動画プレイヤーのページで行う



●YouTube動画を時短で見ましょう

ということでDTP TransitでYouTube動画を時短で見ようという記事がアップされていましたが、Chrome以外はダメとのこと。

私の環境(OS X Mavericks)では、Google Chromeのみサポートされているようで、FirefoxやSafariでは実現できませんでした。

YouTubeが「早聞き再生」をサポート - DTP Transit(Mac OS X, OS X Mavericks, 動画)

え? Firefoxで以前からできていますが…と思って調べてみたら、Firefoxでは設定次第で変わってくるようです。



●Firefoxで倍速再生できない状態のYouTube動画再生

FirefoxでYouTube動画を見る時に「歯車アイコン」をクリックし、再生速度を変更しようと思っても、設定項目が出てきません。自動再生とアノテーションと画質のみ。

20150108-Youtube-倍速再生-05

画像出典:瀬戸弘司が選んだ!2014年 本当に買ってよかったものランキング 5位→1位(YouTube)


その場合、動画上で右クリックすると、こんな感じになりませんか?

「Adobe Flash Player 16.x.x.xについて」

つまりYouTube動画はFlashのプラグインで再生されているわけです。

20150108-Youtube-倍速再生-06

記事の続きを読む



●videoタグは複数ソースが設定できて便利

HTML5のvideoタグでは以下のように書くことで複数のファイルソースを指定することができます。

<video>
    <source src="example.mp4">
     <source src="example.webm">
    <img src="example.gif">
 </video>


上記の例だと、

  • 最初に「example.mp4」の再生をトライ
  • 「example.mp4」を再生できない場合、「example.webm」の再生のトライ
  • 「example.webm」を再生できない場合、「example.gif」を表示

となります。

簡単な書き方で、再生できない場合の複数のソースの指定(フォールバック)ができて便利ですね。


でも、複数のソースの指定そのものが面倒ではないですか?

ファイルも複数用意しなければなりませんし…。今回の例の場合、MP4形式の動画・WebM形式の動画・アニメーションGIFの3種類と、常に時間がないWeb制作者には大きな負担です。

記事の続きを読む



CSSをいじっていたら、フォント表示を改善できて、キレイな表示になったので報告しておきます。

なお、かなり無理矢理ですので、場面に応じてお使い下さい。

対応ブラウザーはInternet Explorer・Firefoxです。(Internet Explorerは9以降かな?)


ざっくり行きたいなら、以下の様に書きます。

body { transform:scaleX(0.9999); }


Yahoo!のトップページのニュースの見出し部分で検証してみます。

ブラウザー内蔵の開発者ツールを使用してCSSを適用して、スクリーンショットを撮り、2倍に拡大して掲載しています。

●Internet Explorer 11

適用前

20141205-ウェブでのフォント表示をキレイに-IE-03


適用後

20141205-ウェブでのフォント表示をキレイに-IE-04


※IE9だと「-ms-transform:scaleX(0.9999);」

記事の続きを読む



20141112-Google-Inbox-only-works-in-Google-Chrome-01

画像出典:Inbox by Gmail(Google)


新しいメールシステムのGoogle Inboxですが、スマートフォンのアプリでは少し前から使っていたので、Firefoxでウェブ版を開いてメールを確認しようとしたら、

Inbox only works in Google Chrome.

More browsers coming soon.

Download Google Chrome

Inbox by Gmail

と表示されて、Firefoxで閲覧できませんでした。

「Chromeブラウザー以外では動きません。他のブラウザーはもう少し待って。」とChromeブラウザーのダウンロードを促されます。

記事の続きを読む



20140607-Firefox-アドレスバーですぐに検索-00

Firefoxはアドレスバーに検索したいキーワードを入力すると、指定した検索エンジンで検索をしてくれる機能があります。

よく見ると書いてありますよね。

20140607-Firefox-アドレスバーですぐに検索-05


●アドレスバーから検索してみる

実際に入力してみましょう。

今回は本日6月7日に勉強会が開催される「DTPの勉強会」を入力してEnterキーを押します。

20140607-Firefox-アドレスバーですぐに検索-01


少し間を置いて、Google検索の結果が表示されました。(設定によっては他のYahoo!やBingでの検索結果になります)

20140607-Firefox-アドレスバーですぐに検索-02

記事の続きを読む



Yahoo!を使って検索したら、検索結果の画面上部に「ご利用のブラウザから直接Yahoo!検索を利用できます」「検索設定を変更する方法」「今後表示しない」という表示がされた。

20140508-ご利用のブラウザから直接Yahoo!検索を利用できます-01

画像出典:「スズキ ハイブリッド」の検索結果(Yahoo!検索)


気になったので、「検索設定を変更する方法」をクリックしてみました。

記事の続きを読む



このブログのフッター部分にはメッセージを送るフォームがあります。

このフォームで何も書かずに「確認する」ボタンを押してフォーム送信したらどうなるのでしょうか。

20140424-フォームコントロール-HTML5-01


ページが移動して(画面が遷移して)エラーが表示されます。

「名前を入力して下さい」「メッセージを入力して下さい」というエラーが表示されます。

20140424-フォームコントロール-HTML5-02


こういうパターン、一昔前にはよくありましたよね。フォーム送信した後にエラーが表示されるパターン。

一昔前のフォームであれば、これでも仕方が無いのですが、HTML5の時代です。フォームのエレメントに属性を付けるだけで、フォームを送信する前にエラーのチェックができるのです。

属性は5秒以内で付けられる簡単なものですので、フォーム入力がある場合、ぜひ付けておきましょう。

それではその属性を紹介します。Firefox 28・Internet Explorer 11・Chrome 34での動作も調べてみました。

記事の続きを読む



以前に「【疑問】JavaScriptの window.jQuery || document.write …という条件式の書き方」ということを書いて、理由を探したのですが、ちょっとまだモヤモヤしたままでした。

モヤモヤを抱えたままだったので自分なりに考えてみました。


今回はウェブの開発・制作でよく使われるFirefoxのFirebugを使用します。(インストールはこちらから

Firebugの機能で、コンソールという機能があって、ここにスクリプトを書いて、色々実験ができます。

20140202-window-jQueryについて-08

画像出典:Firebug



この機能を使って「window.jQuery ||  document.write('<script src="●●"><\/script>') 」の動作を調べてみます。


記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索