青柳 臣一 ブログ(趣味系)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[CSS] overflow:auto で横スクロールバーがあるときに高さが足りなくなるのを防ぐ

引用だとかソースコードだとかの部分を枠で囲むために

<style type="text/css">
.box
{
    width:400px;
    border:1px black solid;
    padding:8px;
    overflow-x:auto;
    overflow-y:hidden;
}
.box pre
{
    margin:0px;
}
</style>

こんな CSS にしてるとします。
これで

<div class="box"><pre>...(省略)...</pre></div>

とか書けば、↓こんな感じに表示されます。

image

ところが、中身の部分が横に長いと↓みたいになっちゃいます。

image

ソースコードなんかの場合、中途半端に折り返すよりは横スクロールバーが出た方がいいかと思い、overflow-x:auto と overflow-y:hidden を使って 「縦スクロールバーは出さずに中身が収まる高さにする。横方向は収まらない場合は横スクロールを出す」 としてるわけですが、スクロールバー分だけ高さを広げるってことをしてくれないため 2行目がほとんど見えなくなっちゃってます。
IE7 ではこうなっちゃいました。
IE6 も確かこうなったような気がします。(ちゃんとは確認してないです)
Firefox はスクロールバーの高さ分だけ広がってくれるためこんなことにはなりません。
それ以外のブラウザは未確認ですが、どうやらこうなるのは IE だけみたいです。

これはあまりに見た目が悪いので何とかしたいところです。
で、以下のようにすれば一応対策できます。
検索しててどこかで見つけたんですが、どこで見つけたかは忘れちゃいました。

<style type="text/css">
.box
{
    width:400px;
    border:1px black solid;
    padding:8px;
    overflow-x:auto;
    overflow-y:hidden;
}
.box pre
{
    margin:0px;
}
</style>
<!--[if IE]>
<style type="text/css">
.box
{
    padding-bottom:1.2em;
}
</style>
<![endif]-->

前半部分は変わってません。
後半の <!-- [if IE]> から下の部分を追加しただけです。
この書き方のコメントを使うと IE の場合だけ内容が評価され、それ以外のブラウザの場合は単なるコメントとみなされます。
ですので、IE の場合だけ箱の下側が 1.2行分広くなるので↓のように 2行目が見えなくなっちゃうというのを防ぐことができます。

image

っていうか、これって横スクロールバーがあろうがなかろうが下側に 1.2行分の隙間を入れてるだけですけどね。
なので、横スクロールバーが無い時も 1.2行分広くなっちゃってます。
まぁ、隠れちゃう寄りはましってことでこういう風に対策するようにしました。

スポンサーサイト

[Win] Microsoft Web Platform Installer 1.0 リリース

Microsoft Web Platform Installer 1.0 Released

なんか http://www.microsoft.com/web/ ってとこが紹介されてます。
へぇ、こんなのあったんだ。
なになに、、、

Microsoft Web Platform Installer は、マイクロソフト Web プラットホームの最新のコンポーネントを簡単にダウンロードしてインストールできるフリーのツール。マイクロソフト Web プラットホームには、IIS 6.0 と 7.0、SQL Server 2008 Express、.NET Framework 3.5 SP1、Visual Web Developer 2008 Express SP1 が含まれる。Microsoft Web Platform Installer は、マイクロソフト Web プラットホーム上の Web ソリューションをビルドしたり実行したりするのに必要なソフトウエアを入手できるようにするシングル・インストーラ。対象プラットホームは Windows XP、Windows Server 2003、Windows Vista、Windows Server 2008。
(略)
IIS や IIS Extensions や .NET Framework や Visual Web Developer 2008 や SQL Server 2008 や ASP.NET MVC や Silverlight Tools なんかをどこでダウンロードしたらいいんだ?なんて話をするときには、Microsoft Web Platform Installer へのリンクを提示するのをお勧めするよ。

へぇ、どうやら、Web 系の開発で必要となりそうなもので、無料のものをいっさいがっさい集めたインストーラなのか。
(もちろん、何をインストールするかは選択できます。常にまとめて全部入れるってわけじゃないです)

さらに Microsoft Web Application Installer というのもあるそうで、こちらは

Microsoft Web Application Installer Beta は、Windows Server 用のフリーで入手できる Web アプリケーションをダウンロードして実行するのを手助けする。このインストーラは、Grahhiti、DotNetNuke、WordPress、Drupal、OSCommerce、その他いろいろといったポピュラーな ASP.NET と PHP の Web アプリのサポートを提供する。単に何回かクリックするだけで、このインストーラは事前に必要なものが足りているかあなたのマシンをチェックし、それらのアプリをそれぞれのコミュニティの場所からダウンロードし、基本的な設定を実行し、そして、それらをあなたのコンピュータにインストールする。

なんという、至れり尽くせり (^^
ASP.NET アプリだけじゃなく、PHP アプリまで対象にしてるのか。

この Microsoft Web Platform Installer がどんな感じなのかが、「Walkthrough of using the Web Platform Installer」 でたくさんのスクリーンショットと共に紹介されています。

ところで、これって英語版のみサポートなのかな?
日本語版があるものは日本語版で、無いものは英語版で、という感じで入れてもらえるといいと思うんだけど。
(インストーラを動かしてみたわけではないので、実際にどうなるかは私はわかりません)

[NET] 今のインターネットってこんなにすごいのか

大統領就任演説の生ストリーミング関連の話。

TechCrunch 「ライブストリーミングの限界が露呈した日

うっひゃあ、CNN が同時ストリーミングのピークが 130万件、Akamai が 700万件以上ってものすごいな。
記事自体はストリーミングが切れちゃったり、繋がらなかったりで、まだまだテレビの代わりの放送媒体としては使えない、という内容ですが、なんというか、もう、十分すごいと思えちゃうな。

INTERNET Watch 「オバマ大統領就任式の中継でアカマイのトラフィックが2Tbps超え

2Tbps って。。。
「普段は多くても 1Tbps」 っていうのもびっくりだな。
ネットワークもそんな単位で話をするようになってたのか。。。

インターネットマガジンのプロバイダ接続マップを見ながら 「おぉ、このプロバイダは上流と 1.5M で繋がってるぞ」 なんて話をしてたことがなつかしいなぁw

[.NET] au ケータイで 「.NET」 が使える法人向けサービス

auケータイで「.NET」が使える法人向けサービス
KDDI、法人向け.NET Framework互換のプラットフォーム「.net by au」提供開始

BREW アプリとして .NET Framework を実装したのか。
.NET Compact Framework でなく .NET Framework のサブセットみたいな書き方だけど、どの程度のものが載っているんだろう?
法人向けの一部の機種のみみたいだし、まずは業務アプリからってことだろうけど、どんなことに使えるかな?

こういうのって個人で自由に作れたりするとおもしろいことになったりするんだろうけどなぁ。
iPhone の Apps なんてずいぶん盛り上がってるみたいだし。
けど、BREW では、個人が自由に作ったアプリ (いわゆる勝手アプリ) の配布・実行はほとんど無理らしいし、同じようにこれも個人向けに解放するつもりはないんだろうなぁ。
.NET Framework なんだから、きちんと実装すればセキュアに保つことは十分できるはずなんだけど。

[Silverlight] Silverlight を活用した HD 動画ストリーミング 「smoothHD」

アカマイ、Silverlightを活用したHD動画ストリーミング「smoothHD」を提供開始
アカマイ、Silverlightベースの映像再生プレイヤー用SDKの提供を開始

ほぅ。
smoothHD で実際の動画を見れます。

確かに結構きれい。
フルスクリーンにしても十分見れる。
CPU 負荷はさすがにちょっと高め。
チャンネルを切り替えた時のレスポンスもかなりいい。
スクリーン右下にマウスを置くと情報が表示されるけど、それによると 848×480 でビットレート 1.7Mbps とある。自分の環境だと Available bandwidth: 7.3Mbps とあるから帯域的にはまだまだ余裕あるのか。
あとは視聴者数が増えた時にどうなるかだろうな。

Silverlight 3 では H.264/AAC のサポートとかハードウエアアクセラレータのサポートとか言われてるから、そうなるとさらに良くなるのかな?

ところで、チャンネルの中に Elephants Dream が入ってますね。

Elephants_Dream

これはオープンソースでフリーソフトな 3DCG 統合ソフト Blender で作られたムービーです。
このムービーを作るのに使われたデータなんかも入手することができます。
このムービーは 2006年くらいにリリースされたもので、その後、2008年には Big Buck BUNNY がリリースされています。

[Silverlight] CNN で Photosynth が使われている

CNN 「The 44th President Inauguration

米 CNN の第44代大統領就任式の写真の紹介に Photosynth が使われています。
Photosynth は複数の写真を組み合わせてそれらしく見せようという技術です。
写真自体はごく普通のものです。
撮られた時間も撮られた向きも違う写真たちを立体的に配置して、、、うーん、なんて言ったらいいんだろ?立体アルバム?まぁ、CNN とかを見て適当にクリックしてもらえばわかると思います (^^
Photosynth を見るためにはプラグインを入れなくてはいけませんでしたが、最近は Silverlight 版のクライアントが使われるようになってきたようです。
CNN も Silverlight 版が使われていますね。

ところで、CNN のところには

Submit your pictures to themoment@cnn.com to have them added to the Photosynth

と書かれています。
就任式の写真を CNN にメールすると Photosynth に追加してくれるみたいですね。

[Blender] マテリアルノードを使ってグローをかける

Blender 3D Making Materials Glow で紹介されてた CGSOCIETY のフォーラムのスレ 「Making Materials Glow

最初の質問は、

Blender でシーケンスやコンポジットを使うとオブジェクト全体にグローをかけることはできるけど、マテリアルの一部にだけやりたい場合はどうすんの?

ってもの。
で、すぐにマテリアルノードを使えばこんな風にできるってのが紹介されてる。
なるほど、RGB Curves を使ってほしい色 (この場合は明るさか) を取り出して、そいつに Blur かけて、RGB Curves で色味を調整して、Screen で重ねてるのか。

さらに、こんなのがあるよ、と YouTube の動画が紹介されてる。

これ、すげぇ。
メーキング的な動画で、途中にモデリングやモーション作成してるところが出てくるけど、みんな Blender だな。
で、グローかけたりしてるのも、AffterEffects とか使ってるんじゃなくて、マテリアルノードでやってるのか。
ほんとにすごいな。
これって完成したもの見れないのかな?と、探してみたらあった。
どうやら Creature Factory DVD pre-sale で紹介されてる


Creature Factory from Andy Goralczyk on Vimeo.

が完成したムービーか。
で、DVD にはムービーだけじゃなく、チュートリアルやデータなども含まれていると。

話を戻して、元のスレの方ですが、そのあとにテクスチャを使った例が紹介されてる。
テクスチャ自体はモノクロ。
これを Map Input = UV、Map To = Col(Green) にして緑色でマッピング。
マテリアルノードでテクスチャを Color で色つけ、Map UV でマッピング、Blur して、Add すれば出来上がり。
この方法の利点は、ブラーの色は Color のところで決めてるだけだから、これを調整すれば簡単に色味を調整できると。

なるほどなぁ。
どれにも共通してるのはマテリアルノードでごにょごにょしてるってこと。
やっばりこのあたりが重要になってくるんだな。
こういったあたりは、XSI や 3ds max なんかはもっと充実してるみたいだけど、Blender でもその気になれば結構いろんなことができるってことか。
今は Python でごにょごにょすることもできるようになってるし。
ついでにそのあたりの参考になりそうなスレ。
BlenderArtists.org のフォーラムのスレ 「PyNode cookbook
最初は単に 「PyNode cookbook を書いたよ」 という書き込みだけど、水玉模様やらレンガ模様やらを作ってみる人が出てきて、うろこみたいな模様とかスクリーントーンみたいなのとか、なんかすごいことになってく。
んで、最後は T.K. さんの Japanese Manga-like なマテリアル (スクリーントーンを貼ったみたいな感じ) で締め。
PyNode は強力だし、おもしろいなぁ。

[Silverlight] Silverlight 3

3月 18日~20日にロサンジェルスで開催される MIX09 には早くも Silverlight 3 のセッションがあるそうです。
Silverlight 3 Sessions at MIX09

Silverlight 3 は昨年 11月の ScottGu’s Blog 「Update on Silverlight 2 - and a glimpse of Silverlight 3」 (日本語訳が @IT 「Silverlight 2の更新 - そしてSilverlight 3初お目見え」 にあります) で話が出てきていますが、もう実際にセッションとして登場してくるんですね。

ScottGu’s Blog にも 「3D サポートや GPU ハードウエアアクセラレーションなどのグラフィック機能の改善」 というのがあげられていますが、MIX09 のセッションでも 「Deep Dive into Silverlight Graphics」 なんてのがあるようです。
このセッションは 「Silverlight 3 レンダリング・パイプラインについてと、新たに追加された Silverlight graphics API でアプリケーションのエクスペリエンスを向上させる方法」 だそうです。

興味深いなぁ。
Silverlight で何かを描画しようとすると、結局のところは XAML をごにょごにょすることになるわけです。
Silverlight には System.Drawing とか無いし。(無いよね?)
けど、「Silverlight 3 レンダリング・パイプライン」 とか 「Silverlight graphics API」 なんて聞くと、ひょっとして XAML 使わなくても描画することができるようになるのかな?という感じもしなくもないですね。
いっそのこと、OpenGL の Managed ラッパでも載せてくれるとおもしろいかもw もちろん、GLSL もサポートでw

[3DCG] VOCALOMARK(ββ)

Fake Far さん (FarSeer さんといった方がいいのかな?) の VOCALOMARK(ββ) が公開されています。
ダウンロードして、解凍して、exe をダブルクリックすれば初音ミクが do-dai を踊りだします (音楽は入ってませんが)。

いやー、すばらしいです。
モデリング、モーション作成は XSI で行い、それを独自開発のリアルタイムレンダラで再生しているそうです。
また、独自のスクリプトも持っていて、カメラやライトを動かしたり表情を変えたりといったことをこのスクリプトで定義しているようです。
また、物理演算エンジンも搭載していて、髪の毛やスカートなんかはこれで揺らしているそうです。
開発途中の動画なんかがニコニコにあげられているので興味のある人は見てみるといいかも。
(マイリストは無いみたいなので 「FakeFar」 タグあたりでたどるといいんじゃないかと)
XSI 上のリグ (ボーン) を写してくれてる動画なんかもあって、結構こういうのが参考になったりするんですよね。

私が試してみたのは以下の環境
  XP SP3 + NVIDIA GeForce 7600 GS
  Vista SP1 + NVIDIA GeForce 8600M GT
readme.txt などには 2000/XP とありますが、いちおう Vista でも動きました。
どちらもハード的にはそんなにいいわけではないのでベンチマークのスコアはイマイチですけど。
ただ、この Vista の PC はワイド液晶のノート PC なんですよね。
今の VOCALOMARK(ββ) は 1024×768 などの 4:3 のサイズしかサポートしていません。
なので、これをワイド液晶で表示するとミクが横に広がっちゃいますw
4:3 以外もサポートしてもらえるといいんだけどなぁ。
ちなみに、DXCapsViewer の Display Modes は以下のようになってました。

1440 x 900
640 x 480
720 x 480
720 x 576
800 x 600
1024 x 768
1280 x 720
1280 x 800

普段は 1440×900 で使ってたんじゃないかと思います。

[Win7] Direct2D と DirectWrite

あちこちで 「Windows7 beta を入れてみた」 なんてネタで盛り上がってるようですが、私はまったくついて行けてません(^^;
が、ふと、あるブログ記事が目に留まりました。

SDK Documentation for Direct2D and DirectWrite now live on MSDN

そういや、なんか DirectX に増えるとかなんとか聞いた覚えがあるけど、こいつらかぁ。

リファレンス Direct2D によると

Direct2D は、2-D ジオメトリやビットマップ、テキストをハイパフォーマンス、ハイクオリティにレンダリングするために提供されるハードウエア・アクセラレータが効く、immediate-mode な (直接的な?) 2-D グラフィック API。Direct2D API は GDI、GDI+、Direct3D と協調して動くようにデザインされている。

だそうです。
もちろん、DirectX 族なのでバリバリの COM です。
CoInitialize したあとに、ID2D1Factory を CreateFactory してやって、ID2D1HwndRenderTarget をこさえてやって、、、みたいなノリです。
機能の方は、もっとハードよりな基本的なものだけかと思ったら、グラデーションブラシだとか 3×2 行列の SetTransform だとかそれなりの機能はあるみたいです。

おもしろいなぁ。
GDI+ とか Vista とかで 「もう、2D 描画は CPU で適当にやっとけばいいんじゃね?なんだったら Direct3D を 2D 描画目的に使ってもいいし」 という方向に向かったと思ってたのに、また 「ハードウエア・アクセラレータを使って 2D 描画を高速化!」 なんてところに帰ってきたのか。
と思ったら、Overview なんかに書いてありました。
どうやら Direct2D の中身は Direct3D10 らしい。
ということは、2D 描画だけをしたいときに Direct3D はいろいろと煩雑だからそういったところを隠ぺいして使いやすくしたのが Direct2D ってことなのかな?

もう 1つの DirectWrite。
こちらもリファレンス DirectWrite によると、

今日のアプリケーションでは、ハイクオリティなテキストレンダリング、レゾルーション非依存のアウトラインフォント、ユニコードテキストとレイアウトのサポートがサポートされなくてはいけない。DirectWrite はこれらの機能を提供する。(以下、いろいろと続く)

だそうです。
GDI や Direct2D、その他のレンダリングテクノロジを使ってハイクオリティな ClearType テキストをレンダリングできるともあります。
フォント・ラスタライザとかフォントの描画エンジンそのものが DirectWrite ってことなのかな?
想像だけど、今までのフォント描画エンジンは GDI の一機能というイメージだったけど、それだと Direct3D や Direct2D なんかの非 GDI でのフォント描画はどうするんだっていうことになるので、フォント描画エンジンをレンダリングテクノロジ非依存になるように切りだしたってこと?

[ニコニコメッセ] マイクロソフトが 「ニコニコメッセ」 PR に力を入れている。。。

ITmedia: ひろゆき氏の提案で始まり、“2chねらー採用”の技術者が開発した「ニコニコメッセ」

ニコニコメッセ開発のきっかけや経緯が紹介されています。
軽いノリっぽくていいなぁw
それにしても利用率が数%向上ってのは大きそう (母体数がわかんないので何とも言えないけど、そんなに小さな数字とも思えないし)

> 「ミクが使えない場合はTHE IDOLM@STERで、それがダメならいさじで」
ワロタ
個人的には 「ニコニコメッセの歌」 の A面をミクで、B面をアイマスで、なんていう構成にしてくれるとうれしかったんだけどwww
しかし、「ひとこと動画」 っていつの間にか 600本にもなってたのか。
ウインクの動画版っていう意味ではおもしろいと思うんだけど、ウインクと違っていったんニコニコメッセを開かないといけないのがなぁ。

ところで、関係者の方の写真に NCN なんかで何度かお見かけした顔が。。。。w

[IE] navigator.appVersion がバグる

http://961pro.jp/ を見に行ったときに気付きましたw
この間まで見れていたはずなのに

このページを正しくご覧頂くにはFLASH PLAYERのバージョン8以上が必要です。

なんて表示されて Flash 部分がまったく表示されなくなっちゃいました。
もちろん、Flash は 10.0.12.36 が入っています (たぶん最新バージョン)。
ちなみに、使っている IE は 7.0.5730.13 です。

なぜこうなるのかと JavaScript のソースをのぞいてみました。

var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;

というコードで IE かどうか? Windows かどうか?を判定しています。
そこで navigator.appVersion を表示させてみました。結果は↓

4.0 (compatible; MSIE 6.0)

あれれ?
試しに navigator.userAgent を表示させてみると、

Mozilla/4.0 (compatible; MSIE 6.0)

むむぅ。
なぜこんなに短いんだ?
JavaScript でなく、サーバ側の HTTP_USER_AGENT を表示させてみると、

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.2; MS-RTC LM 8; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.3; OfficeLivePatch.0.0)

こんなに長いのに、JavaScript の navigator.appVersion ではばっさり削られちゃってます。

うーむ、、、なんでこんなことになるんだろう。。。
HTTP_USER_AGENT の最後にくっついている 「OfficeLiveConnector.1.3; OfficeLivePatch.0.0」 はこの間 http://download.live.com/ で Windows Live Writer Beta とか Messenger Beta とかといっしょに入れた Outlook Connector が追加したんだろうなぁ、、、なんて考えていて、なにげに見ると 「OfficeLiveConnector.1.3; OfficeLivePatch.0.0」 が無いと 251文字、あると 297文字。
ちょっwwwwおまwwwwwまさかwwwww

このずらずら続いている部分はレジストリの Post Platform から取得されています。
これについてはちゃんと MSDN にも解説があります。
ユーザー エージェント文字列を理解する
そこで、レジストリエディタで 「OfficeLiveConnector.1.3」 と 「 OfficeLivePatch.0.0」 を削除して IE を再起動。
これで navigator.appVersion を表示してみると

4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.2; MS-RTC LM 8; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)

となりました。

なんてこったい。
User Agent が長すぎると navigator.appVersion や navigator.userAgent がバグっちゃうのね。
で、その境界は 256文字くらいと予想 (検証してないけど、たぶんそうでしょw)。
つか、これってしゃれにならないんでは?
普通の人だとここまで長くならないかもしれないけど、開発者だと .NET Framework を一通り + Office 2007 + Windows Live Beta を一通りで上記の長さになると思うんだけど。

つか、この間 http://www.vimeo.com/ を見ようとしたら同じように Flash のバージョンが古いと言われたんだけど、これが理由だったのか。

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。