Mozilla Flux

Mozilla関係の情報に特化したブログです。

「スクショ」を通じたページの共有を促すFirefox Screenshots

Firefox 55にはシステムアドオンの形式で新しいスクリーンショット機能が提供されており、その名をFirefox Screenshotsという。窓の杜の記事「『Firefox 55』で追加されたスクリーンショット機能が便利! ~有効化する方法を紹介」で取り上げられていたので、ご存じの方も多いだろう。この機能は段階的に有効化されるユーザーが増加する仕組みとなっていて、米国時間の2017年8月21日から23日までが1%、24日から29日までが10%、30日が100%というスケジュールで増えていく。つまり、今月末には全ユーザーを対象として、初期設定でFirefox Screenshotsが有効化される。

(17/09/07追記)
Firefox Screenshotsの全面的な有効化はFirefox 56に持ち越された。最新の計画によると、有効化されるユーザーの割合は、9月6日に12.5%、9月13日に25%、9月20日に50%となる。

f:id:Rockridge:20170828225302p:plain

以前からFirefoxの開発ツールにはWebページ全体のスクリーンショットを撮影する機能が含まれてきた。また、スクリーンショットを撮れるようにする拡張機能は定番の1つなので、Add-ons for Firefoxを探せば好みのものを見つけるのは難しくない。それでもあえて今、Mozillaがスクリーンショット機能、しかもオンラインを前提にし、選択範囲の撮影に特化したものを本体に追加したのはなぜだろうか。

結論を先に言えば、ユーザーによるWebページの共有促進がFirefox Screenshotsの主な目的だ。スクリーンショットの撮影はそのための手段に過ぎない。これは「スクショ」をページのシェアに使うライトユーザー向けのツールなのである。

Firefox Screenshotsの狙いは、GitHubのIssue #1で確認できる。2014年12月15日に立てられた最初のイシューで、同機能のTech Leadを現在務めるIan Bicking氏は、Webページを共有する方法を改善したいと述べている。最初期にはページを(装飾抜きで)そのままMozillaのサーバ上に保存するというコンセプトが示され、簡易版Evernoteのような感じだったが、Mozilla UXチームの調査結果を踏まえて方針が転換されることになった。

Mozilla UXチームが2015年1月に実施した調査によれば、コンテンツを保存・共有・管理するツールとしてPocketやEvernoteを使う人は少数派であり、多数の人はもっと基本的なツールであるメール、ローカルストレージ、テキストメッセージ、スクリーンショットなどを使用しているが、そうした人は自分が使っているツールに満足していない。ここから分かるのは、Evernote側に寄せるとユーザーが慣れていないので、敷居が高くなるということだ。そこで、同年4月までにはスクリーンショットをサーバ上に保存して共有する今のスタイルに落ち着いた。"PageShot"の名称もこのころから用いられている。

コンセプトは固まったものの、開発チームは少数であり、実際の形になるまでかなりの時間がかかった。Test Pilotの1プロジェクトとして"Page Shot"が公開されたときには、2016年9月も終わろうとしていた。Test Pilotでの実験期間も長く、2017年7月13日まで続けられた。それだけ試行錯誤したわけだ。

Page ShotはFirefox本体に搭載されるにあたってFirefox Screenshotsへと名称が変更され、Nightlyチャンネルには2017年5月下旬に投入されている。そのころの様子はFirefox Screenshots integrated in Firefox Nightly - gHacks Tech Newsに詳しいが、現在のバージョンとは違って、フルページや表示領域全体のスクリーンショットを撮影する機能もあった。

現行のFirefox ScreenshotsはTest Pilot版とも若干違っている。Page Shotで以下のように特筆されていた機能のうち、スマート検索は見当たらなくなっている。

  • グリッド表示: 保存されたスクリーンショットのサムネイルを閲覧
  • スマート検索: 探しているスクリーンショットをキーワードで見つけ出せます。Page Shotはページタイトルやスクリーンショット内の文字をインデックスします
  • ワンステップ共有: ブラウザーウィンドウ上部から直接、スクリーンショットをソーシャルメディアへ投稿したり、共有可能なリンクをコピーしたりできます

いったん実装されたが後に削られた機能は、ページの保存や管理にとっては有用だが、ページの共有にとってはそれほど有用でないものであったと考えられる。たくさん選択肢があるとその分わかりづらくなってしまう。ライトユーザーの使いやすさを優先し、本当に必要な機能だけに絞り込んだのが現行版というわけだ。

こうしたコンセプトや経緯を知ったうえで眺めてみると、1.スクリーンショットのタイトルにページのタイトルを用いていること、2.SNSやメールでスクリーンショットを共有する機能があること、3.共有リンクにアクセスすれば誰でもスクリーンショットを見られること、4.撮影時に共有リンクがクリップボードにコピーされることといった仕様が、すべて意味のあるものだとわかるだろう。どれもシェアを後押ししている。そして、Snapchatほど極端ではないにせよ、シェアという目的を果たしさえすれば、古いスクショを残しておく必要はない。だからこそ、その保存期間は初期設定で14日に設定されているのだ。

f:id:Rockridge:20170829005326p:plain

(17/10/01追記)
Firefox 57では、Firefox Screenshotsは「ページアクションメニュー」と呼ばれるアドレスバー上のドロップダウンメニューに統合されている。また、ページ全体や表示範囲全体を撮影する機能も復活した

Windows版Firefox 57で既定の日本語フォントをメイリオに変更

Windows版Firefox 57では、対象言語が日本語の場合におけるゴシック体(Sans-serif)の既定のフォントが「メイリオ」に、明朝体(Serif)の既定のフォントが「游明朝」に変更される(Bug 1354004)。これまで、ゴシック体は「MS Pゴシック」、明朝体は「MS P明朝」が既定のフォントであり、日本語版Firefoxでは初期設定で「MS Pゴシック」がWebページの表示に使用されるフォントとなっていた。Firefox 57からはこの表示フォントがメイリオに切り替わる。*1

mozilla.dev.platformの"Intent to ship: Changing default Japanese fonts to modern fonts"スレッドでは、モダンなフォントに切り替えるにあたって、「游ゴシック」ではなくメイリオを選んだ理由が説明されている。メイリオは、システム言語が日本語であればFirefoxがサポートするWindows 7以降で広く使えるし、Google ChromeやMicrosoft Edgeが既定のフォントとして採用済みなので、ブラウザ間の互換性も高まる。これに対し游ゴシックは、表示された文字が細すぎて読みにくい。そうした検討の結果、メイリオに軍配が上がった。

メイリオを標準で採用した場合、CSSのfont-styleで"italic"や"oblique"を指定しても、イタリック体や斜体にならないという問題があった。Microsoftによれば、これは仕様である。

メイリオ フォントの斜体スタイルは、英語 (半角のアルファベット、数字、記号) のみ対応しています。このためメイリオ フォントを使用している場合、フォント スタイルを斜体に変更すると、半角の英語のみ斜体スタイルが適用されます。

https://support.microsoft.com/ja-jp/help/929886

しかし、Mozillaは処理を工夫することで、この問題を回避した(Bug 1351332)。たとえばem要素が指定されている場合も、メイリオフォントが指定された文字は斜体になる。こうした工夫はChromeやEdgeには見られないものだ。ちなみに、該当する修正はFirefox 55リリース版にも入っている。

Firefox 57はPhotonプロジェクトの新デザインが披露される場なので、アップデート後に再起動すると見た目が大きく変わっているわけだが、さらに既定のフォントが変わることで、Webページを表示した際に受ける印象も違ってくることだろう。

なお、等幅(Monospace)の既定のフォントは従来通り「MS ゴシック」が用いられる。また、今回の措置は将来リリースされるThunderbird 59にも影響し、HTMLメールはメイリオで表示されるようになる。

*1:Firefox 55以降のNightlyチャンネルやDeveloper Editionでは変更済み(Bug 548311)。

Firefox 57で4年ぶりにロゴを更新(追記あり)

オーストリアのsoeren-hentzschel.atが"So sieht das neue Logo von Firefox und Firefox Klar aus"という記事で、Firefoxのロゴ更新を報じている。2017年11月14日(米国時間)にリリース予定のFirefox 57で実施され、既にAndroid版Nightlyには新ロゴが組み込まれているとのこと。Mozilla Corp.でDirector, Firefox User Experienceを務めるMadhava Enros氏もFirefox 57のアイコンが変更される旨のツイートをしており、間違いなさそうだ。

現行のロゴは2013年8月にFirefox 23に実装された4代目のものである。"A New Firefox Logo for a New Firefox Era | about:pixels"によれば、低解像度の小さなスクリーンでも映えるようにデザインをシンプルにしたそうだが、今度の5代目はさらにシンプルになっている。色合いも思い切って変えてきた。

f:id:Rockridge:20170817232937p:plain

新ロゴはFirefox Nightly 57に実装されたもの*1と色違いのデザインだ。そして、Firefox Focusも同様に色違いのデザインを採用することになっている。Firefox 57で一斉にロゴを変更する計画が存在することがうかがえる。

そうした目で"Photon Engineering Newsletter #11 | Dolske's blog"を見直してみると、新ロゴは小規模なチームがかなりの期間をかけてデザインしたものであるとわかる。Mozilla Corp.の内部でさえ、最近まで一部の人にしか知られていなかったようだ。

(17/09/16追記)
更新されたロゴが実装された(Bug 1399691)。また、Firefox Developer Editionのアイコンも新しくなった(Bug 1399717)。

f:id:Rockridge:20170916174751p:plainf:id:Rockridge:20170916175136p:plain
左:Firefoxの新ロゴ 右:Firefox Developer Editionの新ロゴ

*1:デスクトップ版:Bug 1387254、Android版:Bug 1388291

Firefox 57のメニューパネルにおいてサブメニューはどのように表示されるべきか

2017年11月14日(米国時間)にリリース予定のFirefox 57では、Photonプロジェクトの成果である新ユーザーインターフェイス(UI)が導入される。新UIはいちはやくNightlyチャンネルに投入されており、Firefox Nightly 56ではメニューパネルが新しいものに置き換えられた(Bug 1372309)。

f:id:Rockridge:20170702214754p:plain
新しいメニューパネル

新メニューパネルの項目の一部には、「>」の記号が表示されている。これは、サブメニューが存在することを示すアイコンだ。「>」アイコン付きの項目をクリックすると、サブメニューが右側からスライドしてきて、覆い被さるようにメインメニューと入れ替わる仕様になっている。本記事では、この方式を「スライド式」と呼ぶことにする。

f:id:Rockridge:20170702215344p:plain
サブメニューのWeb Developerが表示される様子

スライド式では、項目の上にマウスカーソルを置いてもサブメニューは表示されない。他方、OSの標準的な挙動はマウスカーソルのホバーでサブメニューが表示されるというもので、Chromeなどもそうなっている。現行のFirefoxでもメニューバーのサブメニューはマウスカーソルのホバーで展開される。

新メニューパネルのサブメニュー表示にクリックが必要なことに対しては批判が強く、ホバーで展開されるようにすべきだとの声が上がっている(Bug 1366074Bug 1373966)。だが、Mozillaはスライド式を維持する方針であり、登録されたバグはWONTFIX(対処せず)で処理された。

Mozillaの開発者たちの主張をまとめると、スライド式を採用しつつサブメニューをマウスカーソルのホバーで展開すると、意図せずサブメニューに遷移してしまうし、Chromeのようにサブメニューをメインメニューの外側に表示しようとすれば、コードの全面的な書き換えが必要になってFirefox 57に間に合わず、メニューの複数階層化も難しくなる。現行のFirefoxのUIでも既にスライド式は採用されている、といったところだ。

少し解説を加えよう。まず、スライド式とホバー表示の組み合わせは確かに相性が悪い。項目上にカーソルが一定時間とどまった場合にのみサブメニューを表示するとしても、意図しないサブメニューを表示してしまうケースの発生は避けられないだろう。そこからメインメニューに戻ろうとすれば、いったんメニューを閉じて開き直すか、サブメニュー上の「<」アイコンのある項目にカーソルを合わせて待つことになる。こうした誤操作が起きないようにカーソルがとどまるべき時間を長く取ると、今度は正しい項目にカーソルを持っていったときに待たされ、ユーザーにモッサリとした印象を与えてしまう。

次に、新メニューパネルではサブメニューのそのまたサブメニューまであり、メニューの階層化が複数に及んでいる。たとえば、Libraryの項目からサブメニューに移行するとHistoryの項目があり、そこからさらにサブメニューに移行するとブラウジング履歴が表示されるといった具合だ。Chromeはサブメニューの項目を絞っているのでメインメニューの外側に表示しても問題ないが、Firefoxの新メニューパネルで同じことをやろうとすれば、開発ツールの項目のサブメニューや二段階目のサブメニューは画面からはみ出す可能性があるので、調整が必要となる。逆に、Chromeのようにサブメニューの項目を絞るとなれば、メニューの全面的な再編が不可欠だ。いずれにせよ、Firefox 57には間に合わなくなる。

f:id:Rockridge:20170702230215p:plainf:id:Rockridge:20170702230234p:plain
Libraryサブメニューとその直下のHistory

最後に、現行のメニューパネルでも、たとえば履歴アイコンをクリックするとブラウジング履歴はスライド式で表示される。また、ブックマークサイドバーにおいてフォルダには「>」のアイコンが表示されるものの、中身の展開にはクリックが求められる。メニューバーの挙動は上記のとおりChromeなどと同じだが、初期設定でメニューバーは隠されているので、重要度は落ちる。このように、UIの一貫性という意味ではむしろスライド式のほうに分がある。

問題があるとすれば、「>」アイコンが利用者にホバー展開が可能との期待を抱かせる点だろう(Bug 1375770)。この点についてはMozillaのPhilipp Sackl氏がアイコンの微修正を示唆しており、Firefox 57のリリースまでに修正が加えられそうだ。

筆者は、「>」アイコンに修正が加えられるのであればスライド式でよいと考えている。それよりも、新メニューパネルはカスタマイズが一切できない(項目の追加、削除、入替えができない)ことのほうが、よっぽど大きな問題ではないだろうか。

(17/09/15追記)
Bug 1375770はWONTFIX(対処せず)で処理され、Firefox 57のメニューパネルに「>」アイコンはそのまま残ることになった。なお、追記にあたって、本文の画像にキャプションを付けた。

ワンクリックで以前のセッションを復元する(Firefox 56以降)

本記事執筆時点では初期設定で無効になっているが、以前のセッションを復元するボタンがFirefox Nightly 56に追加された。Firefoxの起動時にタブバー上にボタンが出現し、これをクリックするとセッションが復元される(Bug 1219725)。

この機能を有効化するためには、about:configの画面でbrowser.tabs.restorebuttonの設定をtrueに変更する。変更後にFirefoxを再起動してみると、タブバーの「+」ボタンの隣に、"Restore Tabs From Last Time"というラベルのボタン(復元ボタン)が表示されているはずだ。このとき復元ボタンを押すとセッションが復元され、「+」ボタンを押して新規タブを追加すると復元ボタンは消える。

f:id:Rockridge:20170628214136p:plain

若干の問題点もある。最後に開いていたタブのURLがホームページに設定したURLと一致する場合も復元を行おうとするし、セッション復元後もタブバー上にボタンの外枠が潰れた形で残ってしまう。「+」ボタンと復元ボタンの位置が近すぎる点は、誤操作を誘発しかねない。

とはいえ、ワンクリックでセッションが復元されるのは確かに便利だ。本体終了時にセッション保存の要否をダイアログで尋ねられることもないし、拡張機能も入れなくていい。Firefox 56のリリース時に初期設定で有効化されていることを期待したい。

(17/07/02追記)
参考画像は新規プロファイルを用いているので、about:homeの最下段にセッション復元のアイコンがある。だが、ホームページの設定を変更してしまうとこのアイコンは使えない。また、Firefoxの起動直後はタブのある画面上部に意識が集中するため、その位置に復元ボタンを置くのは自然なUIといえる。