Home > Latest topics

Latest topics 近況報告

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

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

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

Page 1/248: 1 2 3 4 5 6 7 8 9 »

アニメーション効果を有効にしたツリー型タブの新版とデモ動画を公開したよ - Apr 09, 2009

Tree Style Tab 0.7.2009040901公開した。アニメーション効果の実装の他に、細かいバグ修正も色々。

あと、実際どんな感じかというのをわかりやすく示せるかなと思って、デモ動画も作ってみた。CamStudioもNiVEも使うの久しぶり(っていうかVistaにしてからは初)だから、やり方思い出すのに苦労したよ……

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/M9dUfyoHz3E&hl=ja&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/M9dUfyoHz3E&hl=ja&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

ヌルヌル動いてるのは倍速再生してるわけではなく、これで等倍速です(一応)。タブの影はbox-shadowで描画してるので、Firefox 3.0.xだと影無しになります。

しかしYouTubeはアップロードが簡単になってるわ画質が上がってるわで、いつの間にかすんげーパワーアップしてますね。Stage6とかあった頃とは隔世の感があります。

以下余談。

実装の最後の段階になって困った点として、画面外にタブが開かれた時にそこまで自動スクロールしてくれないという問題が起こってた。スクロールしても、新しく開かれたタブの一個前のタブの位置にスクロールしちゃったりして。上の動画で言うと、0:57あたりで画面下の方でサブツリーを展開した時に、子タブが画面内におさまるように自動でスクロールしてるけど、これがちゃんと動かなくなってた。

なんでこんな問題が起こってたかというと、「そのタブが画面外にあるのかどうかを判定する」「そのタブの位置までスクロールする」といった処理が全部「タブの座標」を基準にしてたせいで、アニメーション開始時点やアニメーション中の中途半端な座標を元に処理を行ってしまい、もうシッチャカメッチャカになってた、という……

上記の処理を行う時に、アニメーション中の座標とアニメーション終了後の座標とのズレをきちんと考慮して計算してやればいいってだけの話なんだけど、普通に考えるとこれがめんどくさい。それぞれのタブがちょっとずつズレて表示されてるわけだから、座標を調べたいタブだけじゃなくてそれより前(上)にあるタブ全部について、そのタブはアニメーション中か?とか、そのタブは非表示か?とかを判別しながらオフセット値を調べないといけないわけで……いちいちそんな計算するのはめんどくさすぎる。メンテナンスし辛そうだし、コードの量が多くなりそうだし、真面目に書く気しないです(大学生の頃だったらやってたかもだけどね……時間は有り余ってたから)。

で、代わりに以下のようなやり方を思いついた。

  • アニメーション開始時点やアニメーション実行中は、個々のタブの属性値として本来の座標からのオフセット値を持たせておく。
  • タブの座標が必要になった時には、「特定の条件にマッチするタブの当該属性値を収集して合計した値」をXPathで取得して、それを現在の座標に足してやる。

コードにするとこんな感じ。

getYOffsetOfTab : function(aTab)
{
  return document.evaluate(
    'sum((self::* | preceding-sibling::*[not(@tab-collapsed="true")])'+
         '/attribute::tab-y-offset)',
    aTab,
    null,
    XPathResult.NUMBER_TYPE,
    null
  ).numberValue;
},

sum()は、渡されたノードセットの値を数値として合計したものを返すXPathの関数。受け取る結果の型をXPathResult.NUMBER_TYPEと指定すれば、計算結果の数値を直接得られる。XPathはうまく使えばこんな風に、処理対象のノードの絞り込みだけじゃなくその後の処理(ここでは計算)まで一発で済ませられるので面白い。

分割ブラウザ、マルチプルタブハンドラの連携の改善 - Oct 19, 2008

Firefox 3.1からの変更への対応に関する技術情報の中に書いたけど、分割ブラウザマルチプルタブハンドラの連携を強化したり、分割ブラウザ側の「分割された領域」と「タブ」の連携を大幅に強化したりした。

ということをグダグダグダグダ書いてみても大して伝わらんだろうなあと思うので、実際に動いてる所のデモ動画を作ってみた。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/-rfZNBy0jic"></param> <embed src="http://www.youtube.com/v/-rfZNBy0jic" type="application/x-shockwave-flash" width="425" height="350"></embed> </object>

Firefox 3.1上でなら擬似的な移動でなくホントの移動になるから、ストレスが無いし、書きかけのテキスト等が失われる心配も無いので、今以上にはるかに気軽に使えると思う。作った自分自身、これらの点がネックで今はほとんど使ってないので……

デモ動画自体の作り方もメモしておく。キャプチャはCamStudio、セッティングは「描いてみた」動画の作り方を参考に、ただしフレームレートは高めで。編集はNicoVisualEffectsでやった。CamStudio+ffdshowでH264でエンコードしたaviが読み込めなくて詰まったけど、Wikiに挙がってたDirectShowプラグインというのをを入れたらちゃんと読み込めた。そんな具合で、初めてなんでちょっと手こずったけど、DebugMode Winkを使って作るのに比べるとタイムライン操作がやりやすいので、今後はデモ動画を作る時はこのやり方でいこうと思う。

携帯で撮った動画 - Aug 27, 2007

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

携帯で撮った動画 - Jan 01, 1970

よく考えたら、手持ちの動画ってYouTubeに置けば腐らせないで済むんだよなあ。と思ったので、アカウント取って上げてみた。

昨年8月の鎌倉・由比ヶ浜の花火大会の様子。

<object width="530" height="370"><param name="movie" value="http://jp.youtube.com/p/816853F5FF77A02D"></param><embed src="http://jp.youtube.com/p/816853F5FF77A02D" type="application/x-shockwave-flash" width="530" height="370"></embed></object>

これは土曜日のダーツ大会の様子……じゃなくて、その隣でやってたファイヤーダンスの様子。

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/df02f9H8rLQ"> </param> <embed src="http://www.youtube.com/v/df02f9H8rLQ" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

これで遠距離の彼女とも動画共有!! ……と思ったけど、アップしても当の彼女が見てくれなければ無意味だという事にすぐ気がつきました。せつないです。

Page 1/248: 1 2 3 4 5 6 7 8 9 »

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のコメント

最近のつぶやき