ページ

2009年1月23日金曜日

[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行分広くなっちゃってます。
まぁ、隠れちゃう寄りはましってことでこういう風に対策するようにしました。


2009年1月22日木曜日

[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


2009年1月21日水曜日

[.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 に追加してくれるみたいですね。


2009年1月16日金曜日

[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


2009年1月14日水曜日

[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 でのフォント描画はどうするんだっていうことになるので、フォント描画エンジンをレンダリングテクノロジ非依存になるように切りだしたってこと?


2009年1月7日水曜日

[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 のバージョンが古いと言われたんだけど、これが理由だったのか。