2008年4月アーカイブ

とあるブログの記事(ネコゼログログ:敬称略)でリセットCSSについて書かれている。
http://necoze.cc/?eid=514

リセットCSSは各ブラウザの実装差異(の一部)を一旦フラットにして、思うようにCSSデザインしちゃおうぜって感じのもの。オレは最近よーく使っている。というか最近使い始めた。(これまでは、まとめてガサっと)

・・で、この記事では「リセットCSSが必要ないんじゃない?」という議論があることが紹介されている。一部引用させてもらうと・・・

 「せっかくブラウザ側でデフォルトのスタイルを持ってるのに、そのスタイルをばっさり切ってしまうのはもったいなくないか?」って具合でしょうか。「そのブラウザ側のスタイルが邪魔」という理由ででてきたのが、リセット用のCSSだった訳ですが、いつの間にかこういう流れになってた訳ですねぇ。...で、さらに。(以下略)

「どのブラウザでも同一の見た目にするのは、テーブルレイアウト時の負の遺産」「若干ブラウザ間で見た目に違いがあってもいいじゃない」...ってことでしょうか。

確かに、何かしらの意味(意地かもしれんけど)があって、各ブラウザの間には表示の差があるわけだろうし、それに合わせりゃ正しい感じはする。

でも、デザイナーにとっては、自分がデザインしたものが見る人によって微妙に異なることに違和感を感じるのではないでしょうか?デザイナーの中には、1pxにこだわる人もいる。そういうデザイナーにとっては、「ブラウザの特長なんで・・・」という話は通用しないのではないかなぁと。

こちらの記事にも書かれているが、
(略)単に「流行ってるから」という理由でその手法に飛びつくのではなくて、自分の案件・サイトにどのようなメリットがあるか考えて、最適な手法を選択すれば良いのかなと思います。

つまり、「なんでもかんでも使うのではなく、きちんと見なさいよ、そのサイトの意味を。」ということなんだろうなぁ。・・・でもね。

ブラウザの特長にこだわるべき理由ってなんだろう。。って思う。
難しい内容だ・・これは。
PEARについて、もう少しちゃんと勉強するために、ちょっと参考にしてるサイトをメモ。

http://pear.plus-server.net/

http://www.phpbook.jp/pear/

http://power.scianto.net/php/note/id22.php

http://dozo.matrix.jp/pear/index.php/PEAR/PEAR_Info.html

livestand.jpg

吉本のお笑いイベント「LIVESTAND08」に行ってきました。幕張メッセであったんだけど、嫁と朝から時間かけていってみた。参加した人は、昨日だけでなんと

2万人!!


スンゴイ人・人・人。・・・でもその人数を収容できるすんごい会場。オープニングセレモニーで三枝師匠が「いらっしゃ~い」で花火どーん!

麒麟から始まり、FUJIWARA、いくよくるよさん、ナベアツ、チュートリアル、矢野・兵藤、フットボールアワー、次長課長、大介花子さん、ディラン、ショージさん、品川庄司、オリラジ、タカトシ、ガレッジ、ココリコ、新喜劇(順不同)などなど。。んもうすんごい。もうワケわからん数。
もうタイムテーブル見て!

後半の盛り上がりはすんごい。特に矢野・兵藤、フットボールアワーの並びでは大爆笑。あれは殺人技です。みんなすごいオモロくて、爆笑だったんだけど、この並びで見たとき、殺笑能力(うまいこというやん、おれ)バツグン。久々に涙出して、腹筋がきゅーってなって、息が止まるかと思うくらい笑った。

東京にいる間にこんな風なイベントがあってよかったと本当に思うけど、こういうの成功したんだからもっと地方とかでもやりゃいいのになぁと思ったり。。。でも・・ハコの問題もあるのかなぁ。福岡でやらんかなぁとちょっと思ったり・・・。でも、こういうところであるのがまたいいのかもなぁ。

とにかく、大爆笑な昨日でした。

日曜は、嫁と二人で、上野動物園にいってきた。こっちにきて、1年半になるけど、今回初めて行った。動物園自体、かなーりブリ。

久々に行ってみたら、結構オモロかった。獣臭いのは相変わらずだったけど。カメラを片手に向かったのでオモロイ写真が結構とれた。

「だらけすぎな百獣の王」
P4278565.jpg

































「たそがれペンギン」P4278628.jpg


































「シャー!!」
P4278596.jpgのサムネール画像


































動物たちの姿が基本的に「サボリ気味」で結構ぐうたらな感じだった。
「日曜なんで、今日はわし休むわぁ」という感じだった。ここには写真を載せてないけど、ゴリラなんか、縁側で爪を切っている親父(呼ばれて「あ?」と言う反応をしている)みたいだし、カバなんか、「もうギリです...ねむ...い」って感じだったし。

まぁとにかく基本的に、「サボリ気味」でした。

いろんな動物をみたあとは、上野をうろうろして、アメ横にいって、ちょっと有楽町によって、帰った。

最近いい休日じゃ。

おまけ写真。

今日家の近くの道路に。
P4278502.jpg

カンドーって。何に感動したんだろ。Gってなんだろう。
ガンダム感動なのか。

入学

| コメント(0) | トラックバック(0)
先日書いたエントリ関係で...

デジタルアカデメイアに入学しました。当日指定時間にSIMに行ってみたら、案の定人数でありゃりゃな感じ。となりのSIMに行ってみて境界線でうろうろしてたら、ちょうどいい感じで中に入れた。

無事に入学。そのときの模様。


0456332.jpg
00101.jpg


ちょっとこのサイトhttp://www.salp.net/を見ていて、画像のところのhoverの動きが興味深かったので、ソースを見てみると、別にjsも使っているわけでもなく、opacityプロパティでCSSだけでやっていたので、おーってことに。
opacityプロパティについてあまり知らなかったので、もう一回情報を集めて、ちょろっとメモ。

opacityプロパティは、CSS3で標準化する予定だけど、現時点では非公式なプロパティ。でもとりあえず、モダンブラウザなら動作するよってことです。

書き方は、
opacity:0.8;
など0~1.0の間の値で設定する。

ただし、毎度のことながら、IE系では動きがいまいち・・というか動作しないみたい。そこでハック。
IEのスターハックを用いて、

filter:alpha(opacity:80);

と指定。ここでの値は%値。つまり0~100の間で指定。


注意事項としては、
opacityはCSS検証でひっかかる(非公式だからね)
opacityは反応しないブラウザ(ユーザ環境)もあるので注意

ということで、結論は現時点では、
opacityプロパティは あまり影響のないところで使うような プラスアルファの装飾

ワタシは、CHAGE&ASKAのファンです。昨年末行ったアコースティックライブのDVDが5月7日に発売になります。ほしい!ってことで、購入しますぅ。amazonで購入すると安かった。でもamazon届くのちょっと遅いんだよねー。
ま、すぐにみれるわけではないからいいかーと思ったり・・・。

改めてみるとやっぱりおもしろいので、こちらでも紹介。
途中で戦うfirefoxがかわいい。


SLの学校

| コメント(0) | トラックバック(0)
セカンドライフでイベントというか学校が開校される。

場所のSLURLはこちら
http://slurl.com/secondlife/Digital%20Hollywood/131/64/34

ちょっと気になるので、時間をなんとか作って開校式に出れればいーなと思っているけど、せっかくの土曜日に家で、PC触ってセカンドライフするのもなーぁと思ったり・・・。でも興味があるからなぁ。

うーん、そのときにならんとわからんけど、興味はあるということで・・・。

関連記事
■デジタルアカデメイア~セカンドライフに出現した新しい学校
■仮想世界の学園「デジタル・アカデメイア」で入学式を開催


0423.jpg


結婚祝い

| コメント(0) | トラックバック(0)
昨日、会社の新人さんの歓迎会があって、それに参加。結構な人数の会で大盛り上がり。
すんげぇ楽しいかいだった。その会の途中、突然あたしの名前が呼ばれた。

「おめでとうございます〜!」って。

結婚祝いを会社からいただきました。
それがこれ。

P4198497.jpg



結婚祝いに、中華鍋とダシポットなるものをいただきました。
すんごいうれしいことです。感謝。
ティロリローン♪スライムが現れた!俺は戦うのか?いや、食らう。

というのも嫁が今日買って来たトマト。いいトマトなんだけど、オモロいカタチをしてたので、ちょっとこそっと目と口を付けて写真をとった。いいカタチ。
これで、サラダを食ったけど、うまかった。

ちなみにドレッシングは、いいごま油。うまかったぜい。

tomato.jpg

カゴメの野菜生活のブログパーツで、前向きスイッチ。なんか、クリックすると、前向き度合いがでるらいいです。まだ試してないっすけど。どれくらい前向きかなおれのブログ。





やってみたら、このブログパーツは結構かわいい。

いいかもしんない。ということで、皆さんにオススメしますぜ。

http://yasai-seikatsu.jp/index.html

世界新

| コメント(0) | トラックバック(0)
panasonicのサイトの中のゲームで世界新記録をだしました。

http://panasonic.jp/beijing/game/index.html


おれを超えてみれ。9秒17じゃ。
セカンドライフ内で映像を流そうとすると、環境設定部分から土地に指定した映像を流すしか方法がないと思っていたら、そうではなかった!LSLからの制御でセカンドライフ内に映像を流すことができる模様。

コードは以下。http://www.aipiro.com/lsltips/index36.htmを引用してます。

default
{
    state_entry()
    {
       llPaecelMediaCommandList([
       PARCEL_MEDIA_COMMAND_URL,"http://hogehoge/hoge.mov",
       PARCEL_MEDIA_COMMAND_TEXTURE,(key) || llGetTexture(0),
       PARCE__MEDIA_COMMAND_AUTO_ALIGN,TRUE]);
    }
   
    touch_start(integer total_number)
    {
       llParcelMediaCommandList([
          PARCEL_MEDIA_COMMAND_AGENT,llDetectedKey(0),
          PARCEL_MEDIA_COMMAND_TIME,0.0,
          PARCEL_MEDIA_COMMAND_PLAY]);
       llSetTimerEvent(20.0);
    }
   
    timer()
    {
       llParcelMediaCommandList([
          PARCEL_MEDIA_COMMAND_STOP]);
       llSetTimerEvent(0.0);
    }
}

以上で再生が可能。解説をすると、とにかく映像を動作させるには、llParcelMediaCommonadList(list command_list)関数が必要みたいだ。引数はリスト型で与える。ここで与える引数はすべて、頭に
PARCEL_MEDIA_COMMAND_
とつく。それ以下にフラグとして色々用意されているので、そのフラグに変数を与えたり、動作するフラグを使ったりする。

では個別に見ていくと、on_rezしたときに動作する、state_entry()では、まず、映像URLと映像を写すテクスチャとコンテンツのスケールをテクスチャを大きさに自動設定しています。これでデフォルト状態を作り出します。llGetTexture()関数で、テクスチャの名前もしくはkeyを取得する。

初期状態が決定したところで、アバターのアクションによって動きがでるようにする。そのひとつに「タッチしたら・・・」というものがあり、それをtouch_start()ステートで実行。
中身をみると、タッチしたひとのID取得し、その人だけに見せるように設定し、再生開示時間と、再生命令を出すコマンドを打ち込んでいる。
ずーっと映像を流すわけではなく、20秒でとまるように、llSetTimerEvent(20.0)と指定してある。

では、そのllSetTimerEventのときに反応するステート関数として、timer()を用意。
その中身は、再生を終了させるコマンドが記載されている。そのあとにある
llSetTimerEvent(0.0);
は何かというと、llParcelMediaCommandListで再生した映像は、ストップしたときに、画像の表示がされないという問題がある。なので、むりやり0フレーム目に設定している。

以上のコマンドを書くとセカンドライフ内で映像を流すことができる。みたい。というかできた。
ここで補足情報を、llParcerMediaCommandList()PARCEL_MEDIA_COMMAND_URLの値だけど、movファイルのような映像ファイルを設定しなくてもいい。たとえば、PHPファイルを設定しておき、PHP側で処理した結果、movファイルにアクセスできれば、映像は流せることがわかった。
ということは、ユーザによって、番組を切替えることもできるし、新しい映像を常にみせるのに、わざわざ、LSLを書き換えることをしなくても・・・という発展が期待される。
ってな感じ。

「PARCEL_MEDIA_COMMAND_○○」の○○についての説明リスト
(以下○○しか書いていません)

【動作系】
・STOP : 終了し、最初のフレームに戻る
・PAUSE : 一時停止
・PLAY : 再生
・LOOP : 終わりに到達すると、はじめにもどって繰り返す


【設定系】
TEXTURE : 動画を再生させる対象となる画像テクスチャ
URL : 動画のURL
TIME : 再生開始の時間
AGENT : UUIDで指定されたヒトだけにだけ適応させる
UNLOAD : 動画を終了し、テクスチャを表示させる(はずだけど戻らないみたい)

AUTO_ALIGN : TRUE/FALSEでコンテンツのスケールをテクスチャの大きさに自動設定

PHPのプログラミングにおいて、グローバル変数のことでメモ。
PHPはグローバル変数を基本的に使わないような運びになっていそうです。
しかし、値の受け渡しをするときじゃないときでも、なんとなく、グローバル変数をフラグ代わりに使いたいってなときもあったりするわけで。

ちなみにPHPでは、
$test ="sample";
function hogehoge(){
    echo($test);
}
hogehoge();

としたとき、$testはなんとなくグローバルな雰囲気をかもし出していますが、実はこいつグローバルではない。なので、この結果は、何も表示されないことになります。(だって、hogehoge()関数には$testになにも値が入っていないもん)

でも先にかいたように、グローバル変数として使いたいときもあるのだー。ということで、どうやるんかい!ってことになるわけです。
やりかたはいくつかあるみたいですが、
変数をグローバル変数化すること
をします。

やり方は、
$test ="sample";
function hogehoge(){
    global $test;
    echo($test);
}
hogehoge();

この一行を加えるのです。
そうすると、簡単にいうと、
この処理で変数$testをグローバル変数として使うように設定する
ことになります。

これで使えるようになる。。っていうかなった。

今PHPを色々いじっているので、これから思いつくままに書くと思います。気づいたものをどんどん書くことになるかと思います。
http://fontstruct.fontshop.com/

このサービスすげ。フォントを自由に作れるジェネレータ。しかもこのサイトから自由にダウンロードもでける。遊んでみようとおもう。これすげ。おもろい。

っていうか何でもありになってきている最近のWebさま。

font.jpg

手書きで申し訳ないけど、昨日書き込んだRGBからHSBを求める際の計算。
結果だけじゃなくて、考え方も含めて・・・ということで。手書きです。

shiki.jpg

最終的には、PHPでは
$h = atan2(y,x);
で計算しました。

参考まで。。。

今回この計算をしてみて、今更ながら色相ってこういうことか!ってピコーン!した感じです。

違ったら指摘してしちょ。お願いします。。
ちょっと仕事の関係で、ベクトルの計算をした。ベクトルというか複素平面での計算。というのもRGBで与えられたデータをHSBに変換できねーかなってことで、色々調べてたんだけど、いまいち便利な関数がPHPでは用意されていない感じだったので(探しきれてないのかもしれないけど)とりあえず、計算式を作って関数を作成してみた。

ベクトルとか、塾講師をしていた学生時代からの久々な感じだったけど、なんとかできた。ので、そのコードとかはまだ今日公開はできませんが、明日計算式でもここに紹介しようかなと思います。

ベクトルとか複素数とか久々にやるとやっぱり面白い。おれ数学すきだなーと感じる今日この頃。そんな1時すぎ。
はよ寝ろってな。

嫁はもう寝てます。
昨日のことだけど、昨日は、朝から駒沢オリンピック公園に行って、嫁とテニスの壁打ち。嫁は初めての壁打ちだったらしく、思うようにいかない。それを横でフムフムと見ながら、俺も壁打ち。久々のテニスで、結構マメができてしまった。
2時間もそこで運動。ってことで、11時に。

そのあと、昼飯をくって、夜知りあいとの呑みがあったので、早めにジムへ。今度はキックボクシング。ちょっと気分が乗らなかったんで、対人トレーニングはなし。

そしたら「めずらしいですね、今日はどっかけがしました?」って言われた。
そんなに対人してるっけ?俺。
って思いながら、別メニューのトレーニング。

ちょっとマニアックな話になるけど、最近の俺の悩みがあって、スパーリングをしてるとき、どうしてもキックで一つの流れが終了してしまう。コンビネーションはそれなりにうまくいくんだけど、「ワン、ツー、フック、ロー」って流れで終わってしまうので、それに慣れた相手は、キックのあとにすぐ反撃。やられるなーってことで、昨日は、「ミドルキックからのコンビネーション」をテーマにトレーニングしたわけさ。なかなかこれが難しくてよー。ぎこちない動きになってしまって、なんかキック始めたての子鹿みたい。

まあそんな土曜日だったんで、案の定、今日は筋肉痛

新しく出たセカンドライフビューアは、すごく描画がいい。今まで、WindLightっていう別バージョンのやつしか、その様子を示さなかったんだけど、今回のビューアにはそのエンジンが搭載されている。ってことは、すんごくきれいな世界が待っている。。。

んだけど、ちょっとこの写真を見てほしい。
error.jpg

おかしい!ヒトの描画がなんかおれのやつおかしい。っていうかキモイ!っていうか恐い!
ってことで今、この対策を探しております。なんだろねー。


って感じで色々いじってたら直った。
どうやら、以前(かなり前)のビューアの設定が生きていて、その設定が今の最新ビューアには対応できていない・・というか、設定項目が増えて、おそらく機能していなかったんだと思います。で、再度環境設定をいじってみたら、元通りの表示になった。
よかった~。

って表示もうまくいったので、Windlight機能を堪能したいなーってことで、naturamという場所に。ここは景色がよい。というか、ビジネススタイルがかなり気に入っています。blogとECとSLが気持ちよくつながっている。すばらしい。そこにテレポートしてみて、写真をパチリととりました。

Snapshot_006.jpg




Windlight機能は名前のとおり、光とか風とかの設定ができる機能。はっきりいってめっちゃきれい。設定は難しいけど、この描画力はすごいとおもう。光なので、もちろん水の中の屈折とかそのあたりも表現できる。SLの描画力は徐々に上がってきている。1年前とはくらべもんにならんです。

ちなみにこのnaturamへのテレポートリンクは以下。
http://slurl.com/secondlife/naturum%20Island/45/225/33/

naturamのSL関係ブログ
http://nir.naturum.ne.jp/
セカンドライフ情報久々です。SENGOKU SIMとKenroku SIMの間に大きな橋ができた。地図で見てみると、SIM一つが橋の構造になっている。スケール感バツグン。でもすごい金がかかってそう。

「Senroku」SIMへテレポート:
http://slurl.com/secondlife/Senroku/2/105/22


参考記事
http://www.secondtimes.net/metaverse/spot/20080403_senroku.html
エイプリルフールということで、こんなサイトが出てました。早速とらばを送って、会員登録。
エコ・・・じゃないな。これは。


またまた自作のjavascriptを公開します。
こちらもまだベータ版として。ご意見いただければなぁとおもいます。

今回も画像表示関係のライブラリ。Macユーザならご存知のiPhotoのようにスライダーを動かすと写真の大きさが変わるやつを作りましたので、よかったらどうぞ。

今回は、prototypescript.aculo.usのslider.jsを使います。
それぞれダウンロードしてきます。(といってもscript.aculo.usのページからダウンロードすれば、自然とprototypeはついてきます。)

それから、こちらのファイルをダウンロードします。

http://sevenstyleweb.com/sample/iph/js/iphslider.js
コピーをして保存してください。

また、今回のスライドバー用のCSSをダウンロードします。
http://sevenstyleweb.com/sample/iph/css/slider.css
こちらもコピペでお願いします。

さーて、使い方ですぅ。
まず、もちろんですが、インポートします。
<link rel="stylesheet" href="css/slider.css" type="text/css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/iphslider.js"></script>

そして、
<script type="text/javascript"><!--
    window.onload = iphslider;
// --></script>

ページをロードときにスライダーのスクリプトを起動させるために、こちらの上記のコマンドを打ち込みます。これで準備はOKです。

さて、スライダーを機能させたい画像に対して、rel属性でiphを入力します。以下のようにいれます。
<img rel="iph" src="hoge.jpg" width="○○" height="○○" />

さらに、スライダーを表示する位置に次のHTMLを書き込みます。
<!--For SlideBar space Start -->
<div id="slidebar">
    <div id="sliderBG">
        <div id="ptr"></div>
    </div>
</div>
<!--For SlideBar space End -->


これで、完了です。スライダーに対応した画像を複数使いたい場合でも、同じようにrel属性を指定すれば、スライダーで同時に拡大縮小されます。
画像に対してfloatをかけていれば、結構面白い動きをします。

サンプルデモ

現状最小サイズは30%に設定してます。その設定は変更できます。
ダウンロードした、jsファイルのiphslider.jsの3行目
var min_per = 30;
の部分の数値を%で変更すると問題なくいけます。

よかったら使ってください。

サンプルサイトまとめたサイトをこちらからダウンロードできます。
http://sevenstyleweb.com/download/iphsample.zip
    follow me on Twitter

    このアーカイブについて

    このページには、2008年4月に書かれたブログ記事が新しい順に公開されています。

    前のアーカイブは2008年3月です。

    次のアーカイブは2008年5月です。

    最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。