Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon WebGL (2010/05/26)
GoogleのWebGLプロジェクトとして公開されている「O3D
WebGLに標準を統一し、O3DをJavaScriptライブラリとするようです。

O3Dプラグインをインストールして、サンプルを見てみる。

うほー、これは凄い!!


SVN管理されている
o3djs/base.js」をベースに作っていくみたいだ。

構造的には、

JavaScript → O3D → OpenGL,Direct3D →GPU

と最終的にちゃんとGPUで処理させる。

しかし、大規模なゲームだとクロスコンパイルして
JavaScriptに書き出す手法じゃないと厳しいよなぁ、多分。。。

ドキュメントはここを見て頑張れとw

O3Dのサンプルをそのまんまですが、このサイトで乗っけてみました!※初回はo3dプラグインのインストールを促します
※iPhoneはo3dが未対応

モデリングファイルは「o3dtgz」形式のファイルです。
o3dtgz の生成参照

daeファイルを出力して Google が公開しているo3dconverter.exeでo3dtgzを生成することができる


これでFlashでなくてもwin,mac共通の3Dゲームができますね。
icon CSS3プルダウンメニュー (2010/05/25)
このサイト(HTML版)のプルダウンメニューの作成をCSS3のみで実現してみました。

まず、HTMLの構造から
■HTML
 <ul id="menu">

  <li>
    <a href="topic/diary?page=0&category_id=0">Diary</a>
    <ul>
      <li><a href="xxx"><img src="xxx" /> 日記</a></li>
      <li><a href="xxx"><img src="xxx" /> ライブ</a></li>
    </ul>
  </li>

  <li>
    <a href="xxx">Labs</a>
    <ul>
      <li><a href="xxx"><img src="xxx" /> 開発全般</a></li>
      <li><a href="xxx"><img src="xxx" /> Flex</a></li>
    </ul>
  </li>

  <li><a href="xxx">Voice</a></li>

  <li><a href="xxx">About</a></li>
</ul>
ul、liの入れ子で階層を作っていきます。
最初のul(id=menu)をトップ階層とし、メインメニューはliで横並びにします。
次の階層のul,liがサブメニューになります。

■CSS
gradientで背景をグラデーション、border-radiusで枠を角丸に
#menu {
    display: inline-block;
    margin: 15px 0 0 0;
    padding: 5px 0 0 0;
    line-height: 100%;

    font-size: 14px;

    background: -moz-linear-gradient(top, #406b9f, #588ab5);
    background: -webkit-gradient(linear, left top, left bottom, from(#406b9f), to(#588ab5)); 

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
text-shadowでリンクテキストに影をつける

#menu a {
    display: block;

    margin: 0;
    padding: 8px 20px;
    color: #eeeeee;
    text-decoration: none;

    text-shadow: 5px 5px 5px rgba(0, 0, 0, 1.0);
}

#menu a:hover {
    color: #ff2222;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 1.0);
}

▽第1階層
トップメニューはliを横並び
#menu li {
    position: relative;
    float: left;
    margin: 0 5px;
    padding: 0 0 5px;
    list-style: none;
}

liをロールオーバーした時に色を変更
#menu li:hover {
    background: -moz-linear-gradient(top, #406b9f, #588ab5);
    background: -webkit-gradient(linear, left top, left bottom, from(#406b9f), to(#588ab5)); 
}

▽第2階層
ここがポイントで、第2階層にあたるulをvisibility=hiddenで予め隠しておく。
Fadeアニメーションするために、opacity=0と設定する。
#menu li > ul {
    visibility: hidden;
    opacity: 0;
}

FireFox3.5ではまだアニメーションは未対応
また、アニメーションを利用するとiPhoneだとメインメニュークリック時に、
サブメニューが現れる前にリンクしてしまう。
逆に言えば、iPhoneはhoverの挙動はクリックすると状態がキープされるようだ。

次もポイントで、liをロールオーバーした時にul(第2階層)を表示する。
ここで第2階層をFadeアニメーションするために、opacity=1とtransitionを設定
#menu li:hover > ul {
    visibility: visible;
    opacity: 1;

    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

「li:hover > ul」は新しい書き方ですね。
transitionのプロパティはActionScriptと同じぽいですね。
これもECMAScript準拠なのかね?

第2階層の外枠のレイアウトは#menuから絶対座標に指定
#menu ul {
    position: absolute;
    font-size: 12px;
    margin: 0;
    padding: 0;
    left: 0;
    width: 185px;
    border: solid 1px #ffffff;

    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

第2階層のメニューのレイアウト
#menu ul a {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    padding: 8px 10px;
}

#menu ul li {
    float: none;
    margin: 0;
    padding: 0;
    background: -moz-linear-gradient(top, rgba(66, 110, 161, .8), rgba(66, 110, 161, .8));
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(66, 110, 161, .8)), to(rgba(66, 110, 161, .8)));  
}

第2階層の外枠に沿うように、最初と最後のメニューは上下の角丸をつける
#menu ul li:first-child {
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;

    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
}

#menu ul li:last-child {
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;

    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
}

このサンプルの問題点は、階層が増える毎に追加してやらないといけないけど、
何階層にもなるメニューは現実的ではないので、ある程度力技でもいいのかなと?
その分ソースわかりにくくなるけど。

level1、level2をclassとして作ってみたけど、WebKit側で思った動作が得られなかった。
どうしても複数階層に対応するなら、JavaScriptやPHP等で動的にCSSを書き出すって感じ?

本当は、CSSも使いまわしのできる関数・プロパティやクラス化できれば、
リファクタリングできてライブラリ化できそうなんだけどなぁ。
icon radikoについて (2010/05/20)
いきものがかりの吉岡聖恵ちゃんの声は個人的に好きだなぁ。

オールナイトニッポン(ANN)の水曜日担当で、カバーの曲を歌ってるみたい。
ラジオでしけかきけない(?)のでここはradikoだな!!

radikoのアプリはAdobe Airだから、自前でアプリが作れそうだ。
仕様とかちょいと調べてみる。

■番組表XMLの例
http://radiko.jp/epg/epgapi.php?area_id=JP13&mode=&station_id=TBS

うーん、XMLか。。。
JSONにして欲しいな。

▽area_id(必須)
国と都道府県コードの組み合わせ
例 JP13

・国:日本 = JP・都道府県コード:東京 = 13



▽mode

・now = 放送中の番組表・なし = 1週間分の番組表



today、tomorrowとかあるらしいが、このAPIはPHPなので
strtotimeのオプションで使えるものは全部使えたりして?

▽station_id

放送局ID:TBS,QRR...etc


※後述の「rtmp接続」を参照

■HTML
Flashと以下のJavaScript解析すれば取れるかな?
http://radiko-dl.ssdl1.smartstream.ne.jp/radiko-dl/1.1/player/js/player.js
▽swfで再生
http://radiko-dl.ssdl1.smartstream.ne.jp/radiko-dl/1.1/player/player_0.1.2.swf
これにパラメータ(statini_id)加えてやるといけるっぽい。

■rtmp接続
ここにradiko録音についてのってます。普通のプログラミングだと、RTMPDumpってのをかましてやるらしいが、Airなら直でrtmpで繋げそう。

▽東京
TBSラジオ:rtmp://radiko.smartstream.ne.jp:1935/TBS%2f_defInst_/simul-stream
文化放送:rtmp://radiko.smartstream.ne.jp:1935/QRR%2f_defInst_/simul-stream
ニッポン放送:rtmp://radiko.smartstream.ne.jp:1935/LFR%2f_defInst_/simul-stream
ラジオNIKKEI:rtmp://radiko.smartstream.ne.jp:1935/NSB%2f_defInst_/simul-stream
INTERFM:rtmp://radiko.smartstream.ne.jp:1935/INT%2f_defInst_/simul-stream
TOKYO FM:rtmp://radiko.smartstream.ne.jp:1935/FMT%2f_defInst_/simul-stream
J-WAVE:rtmp://radiko.smartstream.ne.jp:1935/FMJ%2f_defInst_/simul-stream

▽大阪
朝日放送:rtmp://radiko.smartstream.ne.jp:1935/ABC%2f_defInst_/simul-stream
毎日放送:rtmp://radiko.smartstream.ne.jp:1935/MBS%2f_defInst_/simul-stream
ラジオ大阪:rtmp://radiko.smartstream.ne.jp:1935/OBC%2f_defInst_/simul-stream
FMこころ:rtmp://radiko.smartstream.ne.jp:1935/CCL%2f_defInst_/simul-stream
FM802:rtmp://radiko.smartstream.ne.jp:1935/802%2f_defInst_/simul-stream
FM大阪:rtmp://radiko.smartstream.ne.jp:1935/FMO%2f_defInst_/simul-stream


やってみたがプログラミングが悪いのか?接続拒否される。
色々調べてたらwonderfulにソースのってました。
rtmp接続するURIが違ってたようだ。
	private var streamUrl:String = "rtmpe://radiko.smartstream.ne.jp:1935/TBS/_defInst_";

	public function onNetStatus(event:NetStatusEvent):void {
		if(event.info.code == "NetConnection.Connect.Success") {
			var stream:NetStream = new NetStream(connection);
      
			var client:Object = new Object();
			client.onMetaData = function ():void {};
			client.onPlayStatus = function ():void {};
			stream.client = client;

			video.attachNetStream(stream);
			
			var soundTransform:SoundTransform = new SoundTransform();
			soundTransform.volume = .5;
			stream.soundTransform = soundTransform;
			stream.play('simul-stream');
		}
  }



<< 最初 < 前ページ 次ページ > 最後 >>