Home > Latest topics

Latest topics 近況報告

たまに18歳未満の人や心臓の弱い人にはお勧めできない情報が含まれることもあるかもしれない、甘くなくて酸っぱくてしょっぱいチラシの裏。RSSによる簡単な更新情報を利用したりすると、ハッピーになるかも知れませんしそうでないかも知れません。

萌えるふぉくす子さんだば子本制作プロジェクトの動向はもえじら組ブログで。

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

Page 27/239: « 23 24 25 26 27 28 29 30 31 »

メールのヘッダに埋め込む用に文字列をBase64エンコードする - May 28, 2010

所用でRuby on Railsのテストケースを書いているのですが、メールを受信してあれこれする処理のテストのためのfixtureを用意するのにいちいちホントにメールを送信してそのソース文字列をコピペするとかそういう事をやってたら面倒すぎたので、Subjectとかのヘッダ部分を簡単に書き換える方法を探した所、Rubyでやるのが早いっぽい事が分かったのですが、忘れそうなのでメモしておきます。

irbを起動して

require "base64"
def encode( str )
  "=?iso-2022-jp?B?" + Base64.encode64( NKF.nkf( '-j --utf8-input', str ) ).chomp + "?="
end

を貼り付ける。後はencode("文字列")でその都度結果を見ればいい。

フリーソフト作者の自衛のための手段としてのオープンソース化と、自衛のための「寄付は受け付けないよ」 - May 16, 2010

夜フクロウというMac OS X用のメジャーなTwitterクライアントがあるんだけど、夜フクロウのアップデートに伴って、作者のポリシーによって一部の機能が削除されたというか使い方が制限されるようになったそうだ。それに対して、その機能を使っていたユーザが「なんで機能を削除したんだ」「作者の横暴だ」「作者にはユーザの要望に応える義務がある」「作者の思想を押しつけるな」といった発言を作者に対して行ったそうだ。

以前、僕はこんな事を書いた。

あなたが使いたい物がどこにもないのなら、あなたが自分で作るしかない。使いたい物があっても作る気が無いのなら、誰にも文句は言えない。作る気がなくても使いたいのなら、賃金なり労力なりのコストを負担するのが当然。あなたのためにタダで働いてくれる都合のいい奴隷は、そうそういない。いまあなたがタダで利益を得られているとしたら、他の人がその人自身のためにやったことのおすそ分けを貰っているからにすぎない。おすそ分けが少ないぞと文句を言う権利はあなたにはあるけれども、それに応じる義務は誰にも無い。なんでおすそ分けをもっとよこさないんだ、と不満を述べる姿はただ滑稽なだけだ。

この辺の僕の認識は今もずっと変わっていない。

しかし作者がどう考えていようとも、「お客様は神さまだろゴルァ!!!」と横暴な物言いをするユーザは出てくるし、「ちょっとくらい耳を傾けてくれてもいいのに」と言って結局は全面的に要求が受け入れられるまでいつまでもしつこく食い下がるユーザも出てくる。それは避けられない。

でも、そういう声に毎日のように晒されてウンザリしてやる気を削がれたり、強迫観念に囚われて精神を病んでしまったりすることは、避けられると思う。自作のソフトウェアをオープンソースなライセンスのもとで公開するのは、そのための自衛の手段として有効なんじゃないかと僕は結構本気で思ってる。

フリーソフトウェア(※ここではストールマンが言う所の自由なソフトウェアの事)やオープンソースの考え方がどういう理由で出てきたかは、この際どうでもいい。重要なのは、「嫌ならフォーク(元のプロジェクトと袂を分かち、別プロジェクトとして分岐・継続すること)してよ」と言えるようになるという点だ。

こういう声を受けてストレスを感じる人というのは、多分、責任感が強いとかマジメだとか、そういう気質を持ってるんだと思う。だからこそ、要望が寄せられると「自分がやらなきゃいけない」と感じて抱え込んでしまうんじゃないだろうか。

クローズドソースだと、まさに文字通り「自分がやらなきゃ誰もできない」ので言い訳ができない。要望に応えないことを選ぶ場合、それに対する責めに真っ正面から立ち向かわないといけない。精神力が強くないとやってらんない。

でも、オープンソースにしておけば、言い訳ができる。自分がやらなくても、他の誰かがソースコードに手を加えて実現することが、理屈の上では可能なのだから。自分一人で抱え込まなくてもよくなる。

あるいは、「どうしてもやりたいんだったら自分でやってくれ」と言うこともできる。僕はよく、そういう言い方をしてると思う。自分自身が、他の人の作った拡張機能が動かなくなったのを見よう見まねで改造して動くように修正した、という所からアドオン開発のキャリアがスタートしているから、実感を持ってそう言ってる。やる気と時間さえあれば多分できるはず、本気でそれが必要なんだったら何が何でもやるはずだ、そう思ってる。こうなると、その機能がいつまで経っても実現されないのは、「僕のせい」ではなく「自分でやろうとしないその人のせい」になる。

相手がどう思おうとどうでもいい、とにかく自分の中でそういう理屈で言い訳ができるって事が大事なんだと思う。

同じ理由で僕は、Mozilla Add-onsの寄付募集機能も使わないようにしてる。

AMOでは、作者が設定しさえすればPayPal経由で寄付を受け取れるようになっている。ちょっと前にそういう機能が付いた。機能を使ってる人もちょっとずつ増えていってるみたいだ。でも僕は今の所、寄付機能を使って寄付を募るつもりはない。

何故かというと、「金払ってるんだから言う事を聞けよ」って言われるストレスに晒されたくないからだ。「いい物にはお金を払いたい、だから寄付したいんだ」と言われたらそれはそれで嬉しい。でも、金と一緒に「そしてお金を払ったんだからこっちの言う事を聞いて欲しい」という要求がくっついてくるんだったら(「寄付」のためのシステムを「対価を払うため」に使われるんだったら)、金は受け取りたくない。受け取らない代わりに自由でいさせて欲しい。

というか、相手がそう言っていなくても多分自分の中で「金を受け取っておいて無視するのか?」という声が聞こえてくるだろうと思う。金を受け取っていなければ、「別に、応えなきゃいけない義理はないんだし」という言い訳をしやすい。相手に対してというよりも、自分自身に対して、そう言い聞かせやすくなる。

アドウェア(広告を表示する機能をくっつけて公開することで、費用を広告収入でまかなうという配布形態)にしないのもこの理由が大きい。まあ、広告を入れる余地がどこにもないという設計上の理由もあるんだけど。

確かにソースを公開しないでいれば、競合相手が登場しにくくなって、名声を独り占めできるかもしれない。確かに寄付を募れば、お金が手に入るかもしれない。でも、何かを得るためには何かを失わないといけない。自由な時間、自分自身からも追い立てられることのない気楽な状態、そういう物が代わりに失われる。それに耐えられない脆弱な神経しか持ち合わせていないので、僕は、地位名声の独り占めも寄付金も諦めることにした。僕は、気楽な方がいい。ストレスに追い立てられながらこなすのは、生きるために避けられない仕事だけでいい。生きるために必要でない余暇のことにおいてまで、ストレスに追い立てられなくてはならない道理はない。

このエントリを見て阿久根市長みたいだなと言う人もいるようだ。

阿久根市長がどういう事を言ってるのか逐一ウォッチしてる訳じゃないからちゃんと把握してないんだけど、「自分でやれ」「嫌ならフォークしろ」とかそういう言い方が該当するんだろうか。それとも、作者が暴君のように振る舞う限りは作者自身は気楽だけど、その分のストレスは善良なユーザにしわ寄せが行ってるということだろうか。

僕は、善意のソフトウェア作者に精神を病んで欲しくない。フリーソフト作者(※言うまでもないけど、ここでは自由ソフトウェアではなく無料ソフトウェアの方ね)の中に一定数いるであろう「便利な物を作ってみたから、みんなもどうぞー」という素朴な善意でソフトウェアを公開している気のいいあんちゃんが、たかり体質の人間にまとわりつかれて疲弊して潰れる姿は、見たくない。だからこのエントリは、そういう人に自衛のための手段を紹介するという点にフォーカスして書いたつもり。

たかり体質の人は、「それが当然だ」という理由を尤もらしい言葉で強い語調で語る。だから気が弱い気のいいあんちゃんはうっかり「もしかしたら本当にそうなのかな」って思ってしまうかもしれない。

もう一度引用する。

あなたが使いたい物がどこにもないのなら、あなたが自分で作るしかない。使いたい物があっても作る気が無いのなら、誰にも文句は言えない。作る気がなくても使いたいのなら、賃金なり労力なりのコストを負担するのが当然。あなたのためにタダで働いてくれる都合のいい奴隷は、そうそういない。いまあなたがタダで利益を得られているとしたら、他の人がその人自身のためにやったことのおすそ分けを貰っているからにすぎない。おすそ分けが少ないぞと文句を言う権利はあなたにはあるけれども、それに応じる義務は誰にも無い。なんでおすそ分けをもっとよこさないんだ、と不満を述べる姿はただ滑稽なだけだ。

ユーザからの要望に応えることが作者自身にとっても当たり前になってくると、そもそもなんで要望に応えなきゃいけないの?という事が分からなくなってくる。自分で自分をがんじがらめにして、「要望に応えなきゃ」というプレッシャーだけが一人歩きしてしまう。

だから、思い返してみて欲しい。何故自分がそれを始めたのか、そして、何故それを続けているのかを。あなたは、エンドユーザの奴隷になるためにソフトウェアの公開を始めたのか? 違うだろう。

タブのコンテキストメニューが正常に機能しなくなった? (The context menu on tabs doesn't appear anymore?) - May 15, 2010

Q

I'm running your Tree Style Tab extension on the last Firefox, 3.4a. I installed the Menu Editor extension and the context menu on the tabs stopped to appear. Until Firefox 3.6.3 they were working together nicely.

私はツリー型タブを最新版のFirefox(3.7a4)で使っています。Menu Editorをインストールしていると、タブのコンテキストメニューが出なくなってしまいました。Firefox 3.6では両者は正常に機能していたのですが……

A

Codes of the context menu on tabs are totally restructured on the Firefox 3.7a4. See: Bug 554991 - allow tab context menu to be modified by normal XUL overlays. So, addons including codes about context menu on tabs must be updated.

TST newer than 0.10.2010040201 has been updated for the change, but I couldn't find out a version updated for Firefox 3.7a4 from all versions of the Menu Editor.

If the problem still appear with a new version of the Menu Editor updated for Minefield 3.7a4 and later, please tell me again.

タブのコンテキストメニューの実装は、Firefox 3.7a4で大きく変わりました。Bug 554991 - allow tab context menu to be modified by normal XUL overlays を参照してください。このため、タブのコンテキストメニューを触るアドオンは更新されなくてはなりません。

ツリー型タブのバージョン0.10.2010040201以降はこの変更に対応済みですが、私はMenu Editorの公開済みのバージョン一覧からMinefield 3.7a4に対応したバージョンを見つけることはできませんでした。.

もしMenu EditorのFirefox 3.7a4対応版がリリースされた後でもまだ問題が再現するようであれば、改めてご連絡ください。

一言でいえば、「Firefox 3.7a4の新仕様にきちんと対応してないアドオンと組み合わせて何が起こっても僕の責任じゃないですよ」ってことで。

奇刊クリルタイ4.5(仮)にマンガを寄稿しました - May 14, 2010

ちょっと気が早いですが今のうちに宣伝しておきます。5月23日に開催される文学フリマにおいて発行予定の奇刊クリルタイ 4.5(仮称。多分先方のサイトで「ドルジ(仮)」と書かれている物がこれだと思われます)に、4ページほどのマンガを寄稿しました。タイトルは「とあるW3C信者の大後悔リグレット」です。……というタイトルから想像が付くかもしれませんが、いわゆるひとつのCSSコミューンな人間の一人として過去を振り返る内容となっております。 (本編より抽出:血の涙を流すPiro)

先に言い訳しておきますが、内容は実話ではなくてかなりの脚色が入ってます。作業時間的に短いページ数にまとめないといけなかったので、説明を省くために仮想敵をキャラクター化したという感じです。特定の個人に対して深い恨みを抱いているとかそういう訳ではないので、あしからず。(←説得力のない言い訳ですね)

「タブを閉じる」ボタンの働きの選択肢として「親のタブを閉じずに子孫のタブだけを閉じる」が欲しい(A new option to close only child tabs by "Close Tab" button) - May 14, 2010

Q

My small suggestion is to be able to configure the close button for a parent tab to just close its children. After it is child-less, the second click would close the tab itself. My feeling is that this would make for more fluid experience when you open up a flurry of child tabs to follow up on details and want to continue with the main "story" or "task" on the original parent tab. As it is now you have to right click and select close children, which I find a bit clunky.

私の希望は、親のタブの「タブを閉じる」ボタンをクリックした時の挙動として、子孫のタブだけを閉じるというオプションが欲しいというものです。そのタブに子供がいなくなった後、2度目のクリックはそのタブ自身を閉じるでしょう。これがどういうときに役立つかというと、何か作業をしている時に、詳細な情報を見るために子タブをいくつか開いた後で、それらを一気に閉じて元の作業に戻るという風な場合です。現状でこのような使い方をするには、タブを右クリックして「このタブの子タブをすべて閉じる」を選択しなくてはならないので、面倒です。

A

Sorry, I have no plan to implement the feature to Tree Style Tab. There are two reasons: 1) overriding of the behavior of "close tab" button is hard to implement. And, 2) I think it is not an instinctive behavior.

1) Now there are some options for "close tab" of parent tabs, but all options are designed to work just after the parent tab was correctly closed. Because, TST listens "TabClose" event which is fired after the tab is completely closed by Firefox itself. We cannot cancel the closing of the parent tab from "TabClose" event.

2) If "close tab" button closes the tab and its collapsed children, I think it is instinctive, because it is same to the default behavior of the "close tab" button, except there are collapsed (hidden) children. And if the button closes only the parent tab (keeping children open) it is also same to the Firefox default. "When the close button is clicked, only children are closed and the tab itself is still there" -- the scenario is odd a little for me.

However, you can implement the feature with other scriptable addons (FireGestures, userChrome.js, etc.) with following codes:

var parentTab = gBrowser.selectedTab;
if (TreeStyleTab.hasChildTabs(parentTab)
  // The second argument "true" means "close only children".
  TreeStyleTabService.removeTabSubtree(parentTab, true);
else
  gBrowser.removeTab(parentTab);

すみませんが、その機能をツリー型タブ本体に取り込むつもりはありません。それには2つの理由があります。1) 「タブを閉じる」ボタンの挙動を乗っ取るのは実装が大変ですし、2) その挙動は直感的とは私には思えません。

1) 現在、親のタブの「タブを閉じる」ボタンをクリックした場合の挙動にはいくつかの選択肢を設けてありますが、そのいずれも、親のタブ自体が閉じられた後に働くことを前提にしています。これはツリー型タブが、タブが完全に閉じられた後でFirefox自身によって発行される「TabClose」イベントを監視することによってこの機能を実現しているためです。「TabClose」イベントからは、タブを閉じる操作自体をキャンセルする事はできません。

2) 「タブを閉じる」ボタンによってそのタブ自身とすべての折り畳まれた子タブが閉じられる場合、そこに折り畳まれた(見えない)子タブがあるという点を除けばFirefoxの標準的な挙動と同じなので、これは私には直感的な挙動に感じられます。また、もしそのタブだけが閉じられて子タブが残るのであれば、これはFirefoxの標準的な挙動と全く同じです。しかしながら、「タブを閉じるボタンをクリックしたら、子タブだけが閉じられて、そのタブは已然として開かれたままとなる」――この挙動は、私には違和感があります。

とはいえ、あなたはこの機能を、スクリプトでカスタマイズする機能を持った他のアドオン(FireGestures、userChrome.jsなど)と組み合わせる事で実現できます。上記のコードを参照して下さい。

ロケーションバーからAlt-Enterでタブを開けない?(ALT-Enter in the location bar doesn't open new tab?) - May 14, 2010

Q

In plain Firefox, ALT-Enter in the address bar opens a new tab. This doesn't happen with Tree Style Tab activated.

素のFirefoxでは、ロケーションバーでAlt-Enterと入力すると新しいタブが開かれます。ツリー型タブが有効な状態だと、この機能が働きません。

A

I think it is a designed behavior of TST. TST includes a feature to open new tabs from the location bar without the ALT key, and the effect of the ALT key is inverted by the feature (Enter => new tab, ALT-Enter => current tab).

To get back Firefox's default behavior (Enter => current tab, ALT-Enter => new tab), go to TST's configuration dialog => "New Tabs" => "Location Bar".

If you don't want any loading into the current tab from the location bar (Enter => new tab, ALT-Enter => new tab), then, go to about:config and turn "extensions.treestyletab.urlbar.invertDefaultBehavior" to "false".

この挙動はツリー型タブの仕様であると思われます。ツリー型タブはロケーションバーでAltキーを押さずに新しいタブを開くための機能を含んでおり、この影響によって、Altキーの働きは反転される事になります。(Enter→新しいタブ、Alt-Enter→現在のタブ)

Firefoxの既定の挙動(Enter→現在のタブ、Alt-Enter→新しいタブ)に戻すには、ツリー型タブの設定ダイアログで「新しいタブ」→「ロケーションバー」を参照して下さい。

もし常に新しいタブを開くようにしたい(Enter→新しいタブ、Alt-Enter→新しいタブ)場合は、about:configを開いて extensions.treestyletab.urlbar.invertDefaultBehavior を false に設定して下さい。

Windows 7のAeroPeek(タスクバーのプレビュー)にアドオンから手を出してみる - May 13, 2010

Windows 7では、特定のアプリケーションのウィンドウが複数開かれている状態でタスクバー上のボタンをポイントすると、各ウィンドウのプレビューが一覧表示されるようになっている。これはAero Peekという機能だ。Firefox 3.6以降ではこのAero Peekのためのコードが入ってて、about:configでbrowser.taskbar.previews.enableをtrueに変更して機能を有効にすると、ウィンドウごとではなくタブごとのプレビューが表示されるようになる。Trunkではデフォルトで有効になってるので、次のメジャーリリースでもそうなるんだろう。

この機能について、ツリー型タブで対応してくれという要望が何件か来ていたので、0.10.2010043001以降では折り畳まれたツリーの中にあるタブのプレビューは表示しないようにしてみた。これを実現するにあたって調べたことを書き記しておく。

FirefoxでウィンドウごとではなくタブごとのプレビューをAero Peekに表示させるためのコードのうち、アドオンから簡単に触れるのはWindowsPreviewPerTab.jsmにあるコードだ。以下のようにするとプレビューのマネージャにアクセスすることができる。

Components.utils.import('resource://gre/modules/WindowsPreviewPerTab.jsm');
alert(AeroPeek); // "[object Object]"

ツリー型タブの新機能(?)の「折り畳まれたタブに対応するプレビューを隠す」は、ここからどうやれば実現できるのか。

まずAeroPeek.windowsの中から、処理対象のウィンドウに対応する項目を探す。このプロパティは各ウィンドウに対応するオブジェクトの配列になっていて、オブジェクトのwinプロパティにFirefoxのブラウザウィンドウのDOMWindowオブジェクトがそのまま入ってる。なので、以下のようにすれば今のウィンドウに対応するオブジェクトを見つけられる。

AeroPeek.windows.some(function(aTabWindow) {
  if (aTabWindow.win == window) {
    // 現在のウィンドウに対する操作
    return true;
  }
  return false;
});

また、このオブジェクトはpreviewsというプロパティの中に各タブのプレビューに対応するオブジェクトを持っている。以下のようにすれば、プレビューからタブのDOMElementを辿ることができる。

aTabWindow.previews.forEach(function(aPreview) {
  var tab = aPreview.controller.wrappedJSObject.tab;
  // タブに応じた操作
});

プレビューのオブジェクトはvisibleという真偽値のプロパティを持っていて、これの値がtrueだとAero Peekのプレビューが表示され、falseだと非表示になる。ツリー型タブの場合、タブが折り畳まれているかどうかによってこの値を上書きするようにしている。

var tab = aPreview.controller.wrappedJSObject.tab;
aPreview.visible = !TreeStyleTabService.isCollapsed(tab);

初期状態では、visibleの値はbrowser.taskbar.previews.enableの値と同じになっている。アドオンでvisibletrueにするとユーザがAero Peekを設定で無効化してても問答無用でプレビューが表示されてしまうので、誤ってtrueにしてしまわないように気をつけないといけない。僕はうっかりこれをやってしまった。

で、プレビューの表示・非表示を切り替えた後は、表示されるプレビューの総数が変わったことをマネージャに通知してやる。

AeroPeek.checkPreviewCount();

Firefoxは、プレビューの数が多すぎる時は強制的にプレビューを非表示にするようになってる。その切り替えの判断は、このメソッドが呼ばれた時に行われている。

以上をまとめると、こうなる。

AeroPeek.windows.some(function(aTabWindow) {
  if (aTabWindow.win == window) {
    aTabWindow.previews.forEach(function(aPreview) {
      var tab = aPreview.controller.wrappedJSObject.tab;
      aPreview.visible = !TreeStyleTabService.isCollapsed(tab);
    });
    AeroPeek.checkPreviewCount();
    return true;
  }
  return false;
});

ツリー型タブでは、これをツリーの開閉が行われる度に実行している。開閉の捕捉はカスタムイベントで行ってる。

プレビューの並び順とかも変えれそうな気がなんとなくしてるので、やる気が出てきたらまたいじってみようと思ってる。ただ、他のアドオンもここに手を出すと衝突しまくりそうではある。

タブバーの縦置き・横置きをタブの数に応じて自動で切り替えたい(A new option to switch the position of the tab bar by the number of tabs.) - May 06, 2010

Q

I have a feature request for Tree Style Tab.

I'd like to use horizontal tabs when I have 5 or less tabs open and then have Firefox automatically switch to vertical tabs when I have 6 or more tabs open. These numbers could obviously be variables in the settings, and the feature could just be toggled from the settings as well.

ツリー型タブへの機能追加の要望です。

タブの数が5つかそれより少ない時はタブを横置きにして、タブの数が6個以上になったらFirefoxが自動的にタブを縦置きに切り替える、という機能が欲しいです。また、タブの位置を切り替える基準のタブの数は簡単に設定できるようになっていて欲しいです。

A

I have no plan to implement the feature to Tree Style Tab itself, however, you can do it by a tiny script using TST's APIs like:

(function() {
  var MAX_HORIZONTAL_TABS = 5;
  var onTabModified = function() {
    var newPosition;
    if (gBrowser.tabContainer.childNodes.length > MAX_HORIZONTAL_TABS)
      newPosition = 'left';
    else
      newPosition = 'top';
    if (TreeStyleTabService.currentTabbarPosition != newPosition)
      TreeStyleTabService.currentTabbarPosition = newPosition;
  };
  gBrowser.tabContainer
    .addEventListener('TabOpen', onTabModified, false);
  gBrowser.tabContainer
    .addEventListener('TabClose', onTabModified, false);
  onTabModified();
  window.addEventListener('unload', function() {
    window.removeEventListener('unload', arguments.callee, false);
    gBrowser.tabContainer
      .removeEventListener('TabOpen', onTabModified, false);
    gBrowser.tabContainer
      .removeEventListener('TabClose', onTabModified, false);
  }, false);
})();

For example, you can use this script for the userChrome.js. Steps to do it:

  1. Install userChrome.js from the official website.
  2. After installation, copy the codes above and paste to the file "userChrome.js" in your profile folder. (ex. C:\Users\username\AppData\Roaming\Mozila\Firefox\Profiles\***.default\chrome\userChrome.js )

そういう機能をツリー型タブ自体に付ける予定はないですが、ツリー型タブのAPIを使うと、上記のような小さいスクリプトでその機能を実現する事ができます。

例えば、このスクリプトはuserChrome.jsでそのまま利用できます。手順は以下の通りです:

  1. userChrome.jsをオフィシャルサイトからインストールする。
  2. インストールが完了したら、前述のコードをコピーして、プロファイルフォルダ内にある「userChrome.js」というファイルに貼り付ける。(例: C:\Users\username\AppData\Roaming\Mozila\Firefox\Profiles\***.default\chrome\userChrome.js )

CSS Transitions(CSSだけで簡単なアニメーション)の使い方・覚え方のまとめ - May 02, 2010

いろんな人がいろんな解説を既に書いてるみたいだけど、ツリー型タブでタブのインデントや折り畳みのアニメーションをCSS Transitionsで書き直してみるにあたり、自分で書いてみるまでよく分からんかったので、理解している内容をまとめてみることにした。

CSS Transitionsのフルスペックの説明でもないし、「こんなことができるぜすげーだろ!」というデモでもない。現実的にどういう場面でどういう風に使う事ができるのか、という事を淡々と述べます。いろんな機能を詰め込んだよく分からんデモスクリプトと組み合わせること前提の変なデモを見たせいで混乱してる僕みたいな人が、CSS Transitionsを理解するための手助けになれれば幸いです。

主な用途

マージンや色などの値を数値で表せるプロパティや、画像を表示する系のプロパティなどについて、スクリプトあるいは:hoverなどの疑似クラスによって動的に値が変化するようにしている場面で、元の状態と新しい状態の間をなめらかに変化させるようにする。

例えば、こんな風に。

ul.menu li {
  transition: margin-left 0.25s ease-out;
}
ul.menu li:not(:hover) {
  margin-left: 0;
}
ul.menu li:hover {
  margin-left: 50px;
}

この例では、分かりやすくするために敢えて指定を分けて書いている。ここでは以下のようなことが起こっている。

  • 何もしていない状態だと、margin-left: 0;が適用されている。
  • :hoverの状態になると、margin-left50pxになるようにアニメーションが始まる。
  • :hoverの状態が解除されると、margin-left0になるようにアニメーションが始まる。

何ができる?

  • CSSだけでやれる範囲でいうと、上記のサンプルのように「:hoverになった時にぽわーんとなめらかに出てきて、:hoverが解除されたらぽわーんとなめらかに引っ込む」ようなGUI要素をスクリプト無しで書けるようになる、という所に意義がある。例を挙げると、以下のような物が該当するだろう。
    • :hoverの時だけ出っ張るメニュー項目が、なめらかに出っ張る/引っ込むようになる、とか。
    • :hoverすると色が変わるボタンが、「じわっ……」と色が変わるようになる、とか。
    • :hoverで影が付く時に、「じわっ……」と影が濃くなる、とか。
    • メニューが透明な状態から「じわっ……」と表示されていく、とか。
    • アイコンが90°回転する時に回転がなめらかになる、とか。
  • スクリプトと組み合わせて使う場合、トゥイーンのための実装が要らなくなる(ネイティブ実装に任せてしまえる)というのが多分最大のメリット。
    • ポジショニングやマージンの調整で要素の表示位置を変える時、単に新しい値(=アニメーションの終了時点の値)を設定するだけでトゥイーンしてくれる。
    • CSSで初期値とdurationとイージング関数を指定しておいて、スクリプトで終了値だけを動的に指定する、という使い方。
    • CSSのクラスセレクタであらかじめいくつかの終了値のセットを定義しておいて、スクリプトでclassNameを書き換えて終了値を間接的に指定する、という使い方。
    • タイマーの管理が不要になるので、複数のアニメーションを同時に走らせる場合、アニメーションが全体的に軽くなると思われる。
  • 既に前のアニメーションが行われている間にまた値を変更した場合、現在の時点の値からの変化になる。
    • アニメーションの中断と再開のための面倒なコードは不要。
    • 例えば、margin-left0であったのを、20pxを設定してアニメーションが始まり、20pxに向けて変化していっている最中の10pxの時点でmargin-left0に再設定した場合、前のアニメーションが中断されて、新たに10pxから0に向けて変化するアニメーションが始まる事になる。
    • スクリプトでも動的疑似クラスでも。

「Windows Vista以降のAero Glass有効時のネイティブアプリのボタンみたいな物をWebに簡単に持ち込めるようにする」「GUIの端々にほんのちょっとだけ小粋なアニメーション効果を加えたい時に、スクリプトを書かなくてもよくなる」という話ですね。それ以上でもそれ以下でもないと思っておくと、CSS Transitionsを理解しやすいと思います。

何ができない?

  • テレビアニメのような、長くて複雑なアニメーションは無理。滅茶苦茶頑張ればできるかもしれないけど、CSS Transitionsの仕事ではない。
  • アニメーションと連動したスクリプトの複雑な制御。
    • アニメーション終了時にはDOM Level2 Eventsのイベントリスナで捕捉可能なtransitionendイベント(WebKitではwebKitTransitionEnd)が発行されるので、アニメーションの終了だけは検知できる。
    • それ以外のタイミングではイベントは発行されない(アニメーションが始まったかどうかも分からない)。
  • 無限に繰り返すアニメーション。
    • ループするアニメーションのデモではスクリプトと組み合わせていて、transitionendイベントを使ってその都度新しい「アニメーション終了時点の値」を設定し直してやることで、アニメーションを繰り返している。CSS Transitionsだけではループはできない。
  • どんなプロパティでもアニメーションできるわけではない。仕様書(のWorking Draft)にアニメーションできるプロパティの一覧がある。

書き方

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間(省略すると0)
    イージングの種類(省略するとease)
    アニメーションが始まるまでの遅延(省略すると0);

これで1セットと考えると分かりやすい。複数のプロパティをアニメーションさせたい時は、

transition: margin-left 1s ease;
transition: margin-top 1s ease;

とは書けないので、カンマ区切りにして

transition: margin-left 1s ease,
            margin-top 1s ease;

と書く。

アニメーション終了までにかける時間はCSS3 Values and Unitsの時間の値で指定する。例えば250ミリ秒で完了させたい時は250ms(ミリ秒単位)または0.25s(秒単位)と書く。アニメーションが始まるまでの遅延も同様。

イージング関数(値の変化の仕方)には、以下のいずれかを指定できる。

linear
等速直線運動的な変化
ease-in
最初はゆっくり、最後にいくにつれて激しく変化
ease-out
最初は激しく、最後にいくにつれてゆっくり変化
ease
ゆっくり始まって、途中で最高速になり、最後はまたゆっくり変化
ease-in-out
easeをもう少しきびきびさせたような感じ
cubic-bezier()
ベジェ曲線でアニメーションの変化の仕方を指定

現状ではまだ仕様が固まっていなくてどのベンダも先行実装の段階なので、ベンダープレフィクス付きの指定を書いてやらないといけない。

-webkit-transition: SafariとGoogle Chrome用の指定;
-moz-transition: Firefox用の指定;
-o-transition: Opera用の指定;
transition: 仕様通りの指定;

CSS TransitionsがRecommendationになったら、ベンダープレフィクス無しの記述だけでいけるようになるはず。

Ubuntu 9.10からUbuntu 10.04にアップグレードした - Apr 30, 2010

Ubuntu 9.10 Karmic KoalaからUbuntu 10.04 LTS Lucid Lynxにアップグレードした。9.10の諸問題が解消されている事に期待して。

  1. Ubuntu Japanese TeamのUbuntu 10.04 LTSへのアップグレード手順に従ってアップグレードする。
    • アップグレード処理の間、何故かdeskbar-appletがクラッシュしまくる。対処方法が分からないのでとりあえず無視しまくる。
  2. Japanese Teamのリポジトリを有効にして、パッケージをインストールしたりアップグレードしたりする。
  3. deskbar-appletがやっぱりクラッシュするので、パネルから削除した。
  4. ATOK X3をセットアップし直す。
    1. Ubuntu 8.04 LTS 日本語ローカライズド Desktopでのインストール方法に従ってATOK X3をインストールする。
    2. ATOK X3 for Linux アップデートモジュールをインストールする。
    3. ATOK X3 for Linux Ubuntu 9.04(GTK+ 2.16) 対応モジュールをインストールする。書いてある手順通りにやると何故かoptというディレクトリがatokx3gtk216.tar.gzと同じ位置にできてしまったので、手作業でsudo mv opt/atokx3/lib/client/jsgtkext.so /opt/atokx3/lib/client/jsgtkext.soした。
    4. iiimf-propertiesをインストールし直す。bin/deb/IIIMF/iiimf-properties_trunk_r3104-js1_i386.deb をインストールする。 以上の操作で、今までの環境で使っていた設定が反映されるようになった(ウィンドウ左下に張り付く「ATOK」のツールチップ?を消して、「変換」キーだけでATOKのON/OFFをトグルできるようにする、という設定)。

所感。

  • Gnomeパネルをデスクトップの左右に縦に置くという使い方をしてるんだけど、「Ambiance」テーマだとGnomeパネルの縦置きは想定されていないようで、背景画像が縦に繰り返されてものすごく酷い事になった。仕方ないので今まで通り「Human」テーマを使うことにした。
  • なんでか知らんけど「システム」→「設定」の中にiiimf-properties起動のための項目が追加されなくて設定ができない。ググって見つかった情報によるとターミナルでiiim-propertiesとやれば起動できる(コマンド名はiiimf-propertiesではない)そうなので、それで凌ぐ事にする。
  • 「設定」→「タッチパネル」でくるくるスクロールを有効にし直してやらないといけなかった。
  • 自分で作ったランチャからFirefoxを起動できなくなった……と思ったけど起動オプションのプロファイル指定がfirefox -p プロファイル名になってたのをfirefox -P プロファイル名(大文字)に直したら起動できた。むしろ何で今まで小文字でいけてたのかの方が謎だ。
  • ローカルで動かしてたPHPが動かなくなった。
    • 思い切って全部やり直しだ!とsudo aptitude purge apache2.2-bin php5とかやってからもう一度インストールし直したんだけどどうにもこうにも動かない。
    • *.phpなファイルにアクセスするとapplication/x-httpd-phpなMIME Typeのファイルが送られてきてしまってダウンロードになる。
    • 設定ファイル( /etc/apache2/mod-enabled/php5.conf )の中のコメントにTo re-enable php in user directories comment the following lines(ユーザのディレクトリでPHPを有効にしたかったら以下の行をコメントアウトせよ)と書かれていた事に気がついて、<IfModule mod_userdir.c>~</IfModule>をコメントアウトしたら、ファイルのダウンロードにならずにPHPのスクリプトとして解釈された結果が返るようになった。
  • FirefoxでFlashのコンテンツが表示されなくなった。
    • flashplugin-nonfreeとflashplugin-installerを削除して代わりにadobe-flashpluginをインストールしたら(※adobe-flashpluginをインストールすると先の2つは自動的に削除される)、表示されるようになった。
  • Dropboxのクライアントが止まってたので最新版を入れ直した。

なんかあればまた追記していく。

Page 27/239: « 23 24 25 26 27 28 29 30 31 »

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード