ようやくサイコロに当たりました。
はじめまして。beshinです。
早速ですが、僕の携帯は二世代ほど前のものです。メールや、簡単なインターネットとかはできるのですが、最近では当たり前のようになっている、ワンセグとかは当たり前のように見ることができません。
普段はまったく気にならないのですが、つい先日、行われたWBCのときとか、隣のdarmanとかが得意げにワンセグ観戦しているのを目の当たりにすると、悔しいというか、寂しいというか･･･
つまり僕だって得意げに携帯で動画を見たいわけです。
というわけで、記念すべき第一回目の投稿は、AR（拡張現実）を使って、僕の携帯で動画再生を試みました。僕はFlashしかできないので、AID-DCCのSaqooshaさんがFLASH用に移植してくれた、最近話題のFLARToolkitを使わせてもらいます。
用意するものはWebカメラとFLARToolkit用マーカーです。今回は携帯で動画を見たいので、携帯の待ち受け画面にマーカーを表示させました。
デモ
キレの良い動画が再生されますね。（再生されているイケてる動画はココから拝借しました。問題あれば削除するつもりです。）
具体的な手順は、このページを参考にしました。
新しい技術に触れるということで、かなり前のめりに作業をはじめたのですが、用意されていたFLARToolKitスタートキットを使うと、PV3Dのコードをちょっと書いただけで、動くみたいです。便利ですね。
protected override function onInit():void {
super.onInit();
var conection:NetConnection = new NetConnection();
conection.connect(null);
var stream:NetStream = new NetStream(conection);
var video:Video = new Video();
video.attachNetStream(stream);
stream.play(‘sample.flv’);
stream.togglePause();
var vsmat:VideoStreamMaterial = new VideoStreamMaterial(video, stream);
this._plane = new Plane(vsmat, 120, 120);
this._plane.z = -100;
this._baseNode.addChild(this._plane);
this.addEventListener(FlarSegEvent.AR_RENDER, function(e:FlarSegEvent):void {
if (e.isVisible) {
stream.resume();
}else {
stream.pause();
}
})
}
外部から表示非表示の判定の部分だけ良く分からなかったので、PV3DARApp.asをちょっと改造してイベントを発行してみたのですが、他にいい方法があるのかな？実はAPIが用意されてそうだけど･･･
これでWebカメラとマーカーさえあれば、携帯でも動画見放題ですね。ようやく隣の席のdarmanを黙らせることができそうです。
またまたまたまたtsutomukunでございます。
今回もよろしくお願いいたします。
前回に引き続き今回もhtmlネタなのですが、display:inline-blockというものを
探っていきたいと思います。
コーディングしているときに、よくdisplay：blocckを使うことがあると思いますが、
それはinline要素をblock要素にするもので、今回のdisplay:inline-blockも同じ感じで
inline要素やblock要素をinline-block要素にするというものです。
それでは、inline-block要素とはなんぞやという話になりますが、
「inline要素でもあり、block要素でもある」ということなのです。
はい。意味分かりませんよね・・・
ということでサンプルを作ってみました。
（先に言っておきますが、このdisplay:inline-blockはIEでは対応しておりません。
ですのでIEで見られている方はFirefoxでご覧いただけたらと思います。）
さてさて、サンプルをご覧いただけたらお分かりの通り、なんかfloatがかかったような
レイアウトになっていますよね。でも、よく見てください。floatがかかったように見えていますが、
中央寄せになっていますよね。文字サイズを大きくしていってもらえれば、
段落ちして分かりやすいと思います。
この世にfloat：centerなるものがあれば可能ですが、現時点では無理ですものね。
ソースを見てもらえれば分かると思いますが、もちろんfloatを使っておりません。
これがinline-block要素なのです。
「inline要素のように間割り込みが効くblock要素」というわけです。
中央寄せに回り込ませれることができるのでIEが対応してくれたら
何か面白そうなことができないかなーと思いました。
またまたやってまいりました。ｔｓｕｔｏｍｕｋｕｎでございます。
今回はhtmlのタグで遊んでみようと思います。
先に言っておきますがあくまで「お遊び」ですので実用的なものは一切ございません。
あしからず。
【文字と下線の色違いリンク】
以前にコーディング作業中にたまたま文字と下線が色違いになったので
それを利用して作ってみました。
内容は簡単で、下線の色をaとa:hoverで設定してやって
文字の色を<strong>や<span>などで設定してやります。
初めの文字はfirst-letterで色づけしてやってます。
とてもカラフルなリンクテキストのできあがり♪
【リンクできないリンク】
リンクを飛ばさないという意味ではないです。リンクテキストにマウスを持っていっても
リンクの場所が動いてページに飛べないというものです。
が・・・・なんだかうまくいきませんでした。本当ならカーソルをあわせたら
別の場所でピタッと止まっていてほしかったのですが
ブルブル震えてうまくいきませんでした・・・要検討でございます。
【下線がブルブル】
こちらはご覧の通り下線がブルブル動いております。
仕掛けは簡単で、gifアニメを引いているだけなんですが
ただ引いているだけだと文字サイズを変更されたら表示されなくなっちゃうので
そうはならないようにしています。どうなっているかはソースをご覧あれ。
【背景チェンジ】
これは、カーソルを合わすと背景の色が変わっちゃうというものですが、
うまくいかなくて皆に手伝ってもらって（完全にお任せして）作ってもらいました。
三人（5人ですが）寄れば文殊の知恵とはよくいったものです。
こんな感じでaタグの可能性を探って遊んで見ましたがいかがだったでしょうか？
もっとなにか面白いテクニックがあればぜひぜひお教えいただきたいです。
先日デザインをしている時に、文字をものすごい拡大表示してしまったときふとあることに気がついた。
な、な、なんと！！
「Ｘ」のクロスしているところが微妙にずれているではありませんか！
そのとき使用していたフォントが「Arial」だったのですが、
もしかするとほかのフォントも同じような現象が起きているのではないかと見てみました。
すると！
同じように「Ｘ」のクロスしているところが微妙にずれているではありませんか！
微妙だ！とにかく微妙だ！
「X」たちに上から線をひいても差がわかるかどうかのところだ。
でも、「Verdana」はキレイにクロスしておりました。
しかし、なぜこんな現象が起こるのか気になるので調べてみると
ヘルベチカのX（エックス）という記事にたどり着きました。
そこにはひとつの文字に視覚調整を巧みに施されているさまが描かれておりました。
普段何気なく使っている「Helvetica」ですが、
もう少しフォント職人の思慮を汲み取って使わせていただきたいと思います。
■参考サイト
TYPE RHYTHM（旧20代デザイナーの文字組）: ヘルベチカのX（エックス）
http://mojimoji.blogzine.jp/blog/2008/10/x_4cd1.html
目の錯覚
http://www3.plala.or.jp/yat/index7.htm
JSTバーチャル科学館｜マインド・ラボ
http://jvsc.jst.go.jp/find/mindlab/
