2008年2月アーカイブ

2008/02/20 に公開された Opera 9.26 build8835（正式版）と、2008/02/23 に公開された 9.50 build9807（Weekly build）について。

9.26 build8835

セキュリティフィックス3件とその他2件。

• ウェブブラウザ Opera ダウンロード
• Opera 9.26 for Windows Changelog
• 「Opera 9.26」リリース、脆弱性修正と安定性の向上

気になったのは Image properties can be used to execute scripts というやつ。深刻度はかなりやばいHighly Severeで、内容は画像のプロパティを表示した際、コメントをスクリプトとみなして走らせることができる（適当）とかいうもの。custom commentsってのが具体的にどれを指すのかがわからなかったので 9.25 でのチェックはできなかったし、それ以前に問題を誤解してたらアレなんだけど、個人的に画像のプロパティは多用するので少しぞくっとした。

一応インストールはしたものの、それはあるスクリプトの動作テストのためであって、常用するつもりは全くないんだけどね。

9.50 build9807

しかしあれだね、製品未満な Weekly を常用するなんて正気の沙汰じゃないね。そりゃ手斧も持つわな。

• Plugin Milestone Build Part II - Desktop Team - by Desktop Team
• Weekly Build - Opera-PukiWikiPlus! （邦訳）

build9789 で追加されたタブを閉じた際の挙動 "Active the first tab opened from closing tab"そのタブから開いた最初のタブに移る：この名前は将来変更の可能性ありに変更があって、順番を記憶していて、ひとつのタブを閉じるとその次から次へとフォーカスを移すようになった。

例えば、あるページ A を閲覧中にそのページ内から張られているリンクを次々とバックグラウンドで開いていき、合計 B～E という4つのページをバックグラウンドタブで開いたとする。

この状態でタブ A を閉じずにタブ B をアクティブにして同タブを閉じた場合、build9789 と build9807 では以下のように挙動が異なる。

build9789 では従来通りの挙動で、直前にアクティブだったタブ A がアクティブになるが、build9807 では親タブ A から開かれた順番（B→C→D→E）が優先され、タブ B の次に開かれたタブ C がアクティブになる。この後の挙動は、タブ C を閉じればタブ D へ、タブ D を閉じればタブ E へ......となる。タブ E を初めにアクティブにして閉じた場合は B→C→D、タブ C の場合は B→D→E という具合。

現時点での "Active the first tab opened from closing tab" の挙動をまとめると、

1. 親タブ（タブ A）を閉じた場合は最初に開かれた子タブ（タブ B）がアクティブになる。
2. 子タブ（タブ B～E）を閉じた場合は親タブ（タブ A）から開かれた順番にアクティブになる。
3. 子タブ（タブ B～E）間においては "Activate the last active"が優先される。
4. 孫タブ（子タブから開かれたタブ）も閉じれば順番にアクティブになるが、その場合子タブは親タブの性質を持たない。

3は、例えばタブ C を閲覧中にタブ E をチラ見してまたタブ C に戻って同タブを閉じた場合、本来なら順番通りタブ D がアクティブになるところが、直前にアクティブだったタブ E に移動してしまうということ。また、A～E とは親子関係のない別のタブをアクティブにして子タブ（タブ B～E）に戻って同タブを閉じた場合は、"Active the first tab opened from closing tab" の挙動通り、子タブ間の順番でアクティブになっていく。

4はややこしいので画像で説明すると、

このような状態で現在アクティブなタブ B を閉じた場合、

タブ a ではなくタブ C がアクティブになる。タブ B はタブ a，b の親タブではあるが、挙動としてはタブ A の子タブという扱いを受けることになる。もちろんタブ a をアクティブにして閉じればタブ b へ......と、孫タブ間の順番でアクティブになっていき、孫タブを全て閉じると今度は子タブに移動していく。

そんなわけで、タブを閉じる習慣がつきつつある今日この頃でございます。

その他の変更点では、どうせならUse Thumbnails in Tab Tooltipsの設定も欲しいという声が内外にあったのか、タブの設定に Show thumbnailes when hovering tabs が追加された。あと、メール機能を使っていなければタスクトレイアイコンが表示されなくなった（Windows 版）とあるけど、利用しまくっている僕の環境でもアイコンが表示されなくて、これは Ctrl+H やった時に困るじゃないか！と思って Ctrl+H 押したらアイコンが表示された。おもろ。

Opera Browser Wiki をちょこっと見やすくする UserCSS 書いた。

• opera_browser_wiki.css

Before

After

フォントサイズを100%にして、文字色と背景色のコントラストを高めにとったのでものすごく目が疲れることはないと思う。基本的に情報を参照するためだけのスタイルで、ページ編集や差分チェック等は考慮していない。最初はサイドバーらしきものも取っ払おうと思ったけど、迷子になりそうなのでなんとなく残した。position: fixed は自分でもどうかと思う。

気に入らない所・見づらい箇所があったら、どんな細かい点でも結構なので遠慮なくコメントして下さい（色合いや文字・段落の間隔、要素の配置等々）。出来る限り対応します。

タブを閉じた際の挙動（タブを閉じた後どのタブをアクティブにするか）を3つの中から選択できるようになったよ。

• New snapshot: Introducing advanced tab activation - Desktop Team - by Desktop Team

その3つの挙動は以下の通り。

Activate the last active

従来通りの挙動。直前にアクティブだったタブをアクティブにする。

Activate the tab to the right

閉じたタブの右にあるタブをアクティブにする。

Active the first tab opened from closing tab

閉じたタブから最初に開いたタブをアクティブにする。

例えば、あるページ A を閲覧中に B，C という2つのページを新しいタブで開き、B をアクティブにしてそこから D～F という3つのページをバックグラウンドタブで開いたとする。とてもわかりにくいので画像。

この状態で現在アクティブなタブ B を閉じた場合、上の3つの挙動はそれぞれ以下のようになる。

Activate the last active

タブ A がアクティブになる。

Activate the tab to the right

タブ C がアクティブになる。

Active the first tab opened from closing tab

タブ D がアクティブになる。

これもわかりにくいので画像。

また、Activate the tab to the rightを選択した状態で一番右のタブ（タブ F）を閉じると、その左隣のタブ（タブ E）がアクティブになり、Active the first tab opened from closing tabを選択した状態でリンク元となるタブ（タブ B）以外を閉じるとActivate the last active (default)に準じた挙動となるみたい。

ダイアログ（設定»詳細設定»タブ）の様子も変わっている。先ず、前の build（build 9770）のダイアログ。

そして今回の build（build 9879）のダイアログ。

変更点をまとめると次のような感じ。

1. When closing a tab（?タブを閉じた時の挙動）の追加。
   • Activate the last active（?直前にアクティブだったタブをアクティブにする）
   • Activate the tab to the right（?閉じたタブの右にあるタブをアクティブにする）
   • Active the first tab opened from closing tab（?閉じたタブの右にあるタブをアクティブにする）
2. Show thumbnails in window cycle（?右クリック+マウスホイール、Ctrl+Tabでサムネイルを表示）の追加。
   • 今までは opera:config の Use Thumbnails in Window Cycle でオン・オフする必要があった。
3. いくつかの項目が Classic Tab Options に収められた。
   • New tabs（新しいタブ）
     • Remember last size（前回終了時のサイズで表示）
     • Always maximize（常に最大化して表示）
     • Always maximize, including pop-ups（ポップアップを含め常に最大化して表示）
     • Always cascade（常に重ねて表示）
     • Tile all automatically（自動的にすべて並べて表示）
   • Allow window with no tabs（タブなしウィンドウの表示を許可する）
   • Click on tab to minimize（タブをクリックすると最小化）
   • Show close button on each tab（タブに閉じるボタンを表示）
   • Open windows instead of tabs（タブの代わりにウィンドウを開く）

なお、Advanced tab activation currently does not work on Mac or UNIX/Linuxとあるように、このタブを閉じた際の挙動あれこれは Mac・UNIX build では機能しないらしい。

個人的に関係のありそうな既知の問題は「ページ保存時のファイルの種類とかが変」Format selector when saving pages is broken.と「インライン検索（. で検索）で一文字しか入力できない」Inline find stops working after entering one letter (using Ctrl/Cmd+F still works as expected).ってやつ。少しの間 Ctrl+F で我慢する。

チェンジログの方では「ウィジェットからまともにリンクを開けるようになった」Again possible to open links from widgetsってのが嬉しい。Twippera のリンクをミドルクリックで開く必要がなくなった。あと、「空間ナビゲーションのハイライトがかっこよくなった」（suehiroさんのスクリーンショット参照）New spatnav highlighting, similar to the one used in Opera Mini 4 and the Wii browserのもグー。css3 :target now works on targets identified using name attributeはよくわかんない。

その他で気になった所は 設定»詳細設定»セキュリティ の「Manage Repositories」。

2ch Opera スレでも指摘されていたけど押しても無反応。次号に期待、とか。

最近の 9.50 ではニコニコ動画がまともに観れなかった（動画ファイルを全て読み込まないと再生されなかった）のが、今回の build では 9.25 や他のブラウザのように普通に再生できる。でも恐い既知の問題もある。

• New snapshot - Desktop Team - by Desktop Team
• Opera Weekly Build 9770 ＋ そろそろWBに飽きたけど訳 - あまたの何かしら。in はてな

Fixed dynamic updating of CSS3 selectors (:first-child, :last-child, :empty etc. selectors)ってのも嬉しいけど（何がどう修正されたのかわからんけど）、Added support for the CSS color and background-color properties for the ::selection pseudo-element（疑似要素 ::selection の color，background-color プロパティのサポート）ってのが嬉しい。これを利用すると Web ページ上の選択した（反転させた）テキストのスタイルを指定することが可能になる。

例えば、今回の build でこのページを見ている人は、以下のテキスト達を選択（反転）させてみて。

1. 選択すると文字が赤。
2. 選択すると文字が青。
3. 選択すると背景が赤で文字は白。
4. 選択すると背景が青で文字は白。
5. 選択すると背景が緑で文字は白。

次の画像のようになるはず。

CSS はこんな具合。

<ol>
<li class="cs-redwhite">選択すると背景が赤で文字は白。</li>
</ol>

---

li.cs-redwhite::selection {
color: white;
background-color: red;
}

いまいち使いどころに困るんだけど嬉しい、そんな感じ。

These are the CSS properties that apply to ::selection pseudo-elements: color, background, cursor (optional), outline (optional). The computed value of the 'background-image' property on ::selection may be ignored.

Selectors - 7.3. The ::selection pseudo-element

2ch コピペブログの特徴としては、

1. 極小フォントサイズ
2. カラフルなフォントカラー
3. どこまでも続くサイドバー
4. どこまでも続くコメント
5. 怪しげな JavaScript

が挙げられるんじゃないかと思う。何も 2ch コピペブログに限ったことじゃないし、全てに当てはまることでもないんだけどさ。

1 は Opera なら 設定 » 詳細設定 » フォント の [最小フォントサイズ] を 14 か 16 にしておけば取りあえず判読不可な状態からは脱出できるし、2 はまあページ制作者の配慮みたいなものだと思えばいいし、5 はどうしても気になるならコンテンツブロックで弾くか JavaScript をオフにすればいい。しかし 3 と 4 はありえない。「2ちゃんねる」という事を考慮すれば 4 こそがコンテンツみたいな所があるのかもしれないけど、ありえない。3 とか意味不明。

そんなわけで、サイドバーとコメントを取っ払って、ついでにフォントサイズ・カラーを適当に調整して、個人的に気になるところを色々弄った UserCSS（ユーザスタイルシート）を書いた。対象ブログは ニュー速クオリティ、日刊スレッドガイド、アルファルファモザイク、ハムスター速報 ２ろぐ の4つ。

なぜ4つかと言うと、2chコピペブログの人気ページ のフィードや Notitle を始めとした色々なブログで紹介されるやつの中から気になったエントリだけを読む、というのが僕のスタイルで、その中で最も多く目にするのがこれら4つのブログだから。正確には5つなんだけど、それは後述。

2chコピペブログ用 UserCSS

注意

1. Opera 用 UserCSS という用途で書いた。
2. 似たようなレイアウトになってしまうのでそれぞれのブログの特徴を出そうと足掻いた。
3. あまり細かくチェックしていない。
4. エントリ以外のページ（トップページや検索等々）はあまり考慮していない。
5. おかしな所やここはこうした方がスマートじゃんとかあったら教えて。
6. ページ製作者がレイアウト変えたらそれまで。

使い方

1. CSS ファイルをダウンロードして適当な場所に保存する。
2. CSS ファイルを適用したいブログにアクセスして、右クリックメニューから [サイト設定の編集] を選択。» 画像
3. サイト設定 » 表示設定 の [ユーザースタイルシート] で CSS ファイルを選択して OK を押す。» 画像
4. 適用されないようならリロード（Ctrl+L R or F5）。

ニュー速クオリティ

• news4vip.css

Before

After

日刊スレッドガイド

• thread_guide.css

Before

After

アルファルファモザイク

• alpha.css

Before

After

ハムスター速報 ２ろぐ

ここは9.25用と9.50 用がある。9.25用の方はコメント欄の「コメント」という見出しっぽいやつが消せなかった。9.50用の方は CSS3 の E:nth-child(n) を使ってすっきり。

• 925_hamster.css （9.25用）
• 950_hamster.css （9.50用）

Before

After

痛いニュース(ﾉ∀`) は？

Opera のサイト設定はドメインごとの指定になるので、痛いニュース（http://blog.livedoor.jp/dqnplus/）で UserCSS を指定すると独自ドメインじゃない他の livedoor ブログ（http://blog.livedoor.jp/*****/）でもスタイルが適用されてしまって残念なことになる。

僕はと言えば、他にいくつか livedoor ブログを購読しているものの、そのほとんどのブログが全文フィード吐いてくれているのであまり残念とは思わない。僕と似たような環境の人や、livedoor ブログで見てるのは痛いニュースしかねぇんだよちくしょうという人はどうぞ。

痛いニュース(ﾉ∀`)

• itainews.css

Before

After

cssSigMod.js を使う

cssSigMod.js を導入すれば、そういう残念な思いをしなくていいかもしれない。これは特定のサイトの BODY 要素に ID，CLASS 属性値を追加する UserJS。Opera の UserJS については User JavaScript - Opera-PukiWikiPlus! 参照。

例：痛いニュース

cssSigMod.js を UserJS ディレクトリ に放り込んだら、スクリプトの32行目辺りを、

(function() {
   var sites = [
      // idが優先される。
      {
         url:   /^http:\/\/blog\.livedoor\.jp\/dqnplus/,
         id:    'livedoor-dqnplus',
         class: 'livedoor-dqnplus'
      }
   ];

という風にしてやる。正規表現とかよくわからんけどこれで大丈夫みたい。本当に大丈夫か？ で、この状態でhttp://blog.livedoor.jp/dqnplus/にアクセスして cssSigMod.js が読み込まれると、

<body id="livedoor-dqnplus">

上のように BODY 要素へ ID 属性値が追加されるので、

#livedoor-dqnplus div#wrapper,
#livedoor-dqnplus div#content {
float: none !important;
}

等と UserCSS で指定していれば、http://blog.livedoor.jp/dqnplus/のみに任意のスタイルが指定されるというわけ。やったね！ ちなみに、この例で適用する CSS ファイルはこちら（cssSig_itainews.css）。ただ、他の CSS ファイルみたいにサイト設定で指定するんじゃなくて、Local CSS Files Directory に放り込んでスタイルメニューでオンにしてやる方がいいと思う。

テンプレートを作成している人達の間で CSSシグネチャ 流行らないかな。型番みたいな感じで。

2ch コピペブログの特徴としては、

1. 極小フォントサイズ
2. カラフルなフォントカラー
3. どこまでも続くサイドバー
4. どこまでも続くコメント
5. 怪しげな JavaScript

が挙げられるんじゃないかと思う。何も 2ch コピペブログに限ったことじゃないし、全てに当てはまることでもないんだけどさ。

1 は Opera なら 設定 » 詳細設定 » フォント の [最小フォントサイズ] を 14 か 16 にしておけば取りあえず判読不可な状態からは脱出できるし、2 はまあページ制作者の配慮みたいなものだと思えばいいし、5 はどうしても気になるならコンテンツブロックで弾くか JavaScript をオフにすればいい。しかし 3 と 4 はありえない。「2ちゃんねる」という事を考慮すれば 4 こそがコンテンツみたいな所があるのかもしれないけど、ありえない。3 とか意味不明。

そんなわけで、サイドバーとコメントを取っ払って、ついでにフォントサイズ・カラーを適当に調整して、個人的に気になるところを色々弄った UserCSS（ユーザスタイルシート）を書いた。対象ブログは ニュー速クオリティ、日刊スレッドガイド、アルファルファモザイク、ハムスター速報 ２ろぐ の4つ。

なぜ4つかと言うと、2chコピペブログの人気ページ のフィードや Notitle を始めとした色々なブログで紹介されるやつの中から気になったエントリだけを読む、というのが僕のスタイルで、その中で最も多く目にするのがこれら4つの ブログだから。正確には5つなんだけど、それは後述。

2chコピペブログ用 UserCSS

注意

1. Opera 用 UserCSS という用途で書いた。
2. 似たようなレイアウトになってしまうのでそれぞれのブログの特徴を出そうと足掻いた。
3. あまり細かくチェックしていない。
4. エントリ以外のページ（トップページや検索等々）はあまり考慮していない。
5. おかしな所やここはこうした方がスマートじゃんとかあったら教えて。
6. ページ製作者がレイアウト変えたらそれまで。

使い方

1. CSS ファイルをダウンロードして適当な場所に保存する。
2. CSS ファイルを適用したいブログにアクセスして、右クリックメニューから [サイト設定の編集] を選択。» 画 像
3. サイト設定 » 表示設定 の [ユーザースタイルシート] で CSS ファイルを選択して OK を押す。» 画 像
4. 適用されないようならリロード（Ctrl+L R or F5）。

ニュー速クオリティ

• news4vip.css

Before

After

日刊スレッドガイド

• thread_guide.css

Before

After

アルファルファモザイク

• alpha.css

Before

After

ハムスター速報 ２ろぐ

ここは9.25用と9.50 用がある。9.25用の方はコメント欄の「コメント」という見出しっぽいやつが消せなかった。9.50用の方は CSS3 の E:nth-child(n) を使ってすっきり。

• 925_hamster.css （9.25用）
• 950_hamster.css （9.50用）

Before

After

痛いニュース(ﾉ∀`) は？

Opera のサイト設定はドメインごとの指定になるので、痛いニュース（http://blog.livedoor.jp/dqnplus/） で UserCSS を指定すると独自ドメインじゃない他の livedoor ブログ（http://blog.livedoor.jp/*****/） でもスタイルが適用されてしまって残念なことになる。

僕はと言えば、他にいくつか livedoor ブログを購読しているものの、そのほとんどのブログが全文フィード吐いてくれているのであまり残念とは思わない。僕と似たような環境の人や、 livedoor ブログで見てるのは痛いニュースしかねぇんだよちくしょうという人はどうぞ。

痛いニュース(ﾉ∀`)

• itainews.css

Before

After

cssSigMod.js を使う

cssSigMod.js を導入すれば、そういう残念な思いをしなくていいかもしれない。これは特定のサイトの BODY 要素に ID，CLASS 属性値を追加する UserJS。Opera の UserJS については User JavaScript - Opera-PukiWikiPlus! 参照。

例：痛いニュース

cssSigMod.js を UserJS ディレクトリ に放り込んだら、スクリプトの32行目辺りを、

(function() {
   var sites = [
      // idが優先される。
      {
         url:   /^http:\/\/blog\.livedoor\.jp\/dqnplus/,
         id:    'livedoor-dqnplus',
         class: 'livedoor-dqnplus'
      }
   ];

という風にしてやる。正規表現とかよくわからんけどこれで大丈夫みたい。本当に大丈夫か？ で、この状態でhttp://blog.livedoor.jp/dqnplus/に アクセスして cssSigMod.js が読み込まれると、

<body id="livedoor-dqnplus">

上のように BODY 要素へ ID 属性値が追加されるので、

#livedoor-dqnplus div#wrapper,
#livedoor-dqnplus div#content {
float: none !important;
}

等と UserCSS で指定していれば、http://blog.livedoor.jp/dqnplus/の みに任意のスタイルが指定されるというわけ。やったね！ ちなみに、この例で適用する CSS ファイルはこちら（cssSig_itainews.css）。ただ、他の CSS ファイルみたいにサイト設定で指定するんじゃなくて、Local CSS Files Directory に放り込んでスタイルメニューでオンにしてやる方がいいと思う。

テンプレートを作成している人達の間で CSSシグネチャ 流行らないかな。型番みたいな感じで。