WebTecNote

3/1の夕方、jsdo.itの公式アカウントが大っぴらに誘い受けしてた。

その昔、マクパペットをフルカスタムしたり…

あの楽器を再現したり…

あの楽器 (Firefox4 only) - jsdo.it - share JavaScript, HTML5 and CSS

…した過去があるのでつい反応。

したらすかさず煽られた。

…………CSS3に不可能はない！！

心の中で啖呵を切った。そして釣られた事に気付いた午後６時。
ぶわっと頭の中に広がったのはCSSなはちゅねを-webkit-animationでネギ振らせる映像だったのだけども、
前記事で紹介したjsdo.piggという素晴らしい素体をみっくみくにしてやることに決めたら後は早かった。

※Webkit以外だと残念なミクさんになってしまうので実行画面はChromeかSafariで見てね！
（IE6-8で見るのはダメ！絶対！）

jsdo.miku forked from: jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS

ブラウザ起動するのﾏﾝﾄﾞｸｾという人の為の画像はこちら。（左はノーマル素体）

我ながら変態なソースだなと思いました。だがそれがいい。

髪や服やネギは同色で作った擬似要素を重ねてあの形にしています。
はちゅね化したときのほっぺ渦巻きはborder-radiusで円にしたborderだけの要素を擬似要素加えて３つ繋げて描いてます。
同じくはちゅね化した時の口はborderで作った台形を2枚重ねてます。
あと足の絶対領域や脇もちゃんとありますので目を凝らしてチェックして貰えるとありがたい。

CSSだけで絵を書くのは図形を上手いこと作る事がポイントなんですけど、パターンさえ覚えてしまえばそう難しくないです。
CSS3でつくれる形いろいろ。　や　The Shapes of CSSを見れば一目瞭然。
幾何学図形を重ねる手法はForza2のペイントカーと通じるものがあるので、痛車職人と同じ位変態になればkei版ミクの再現も出来るんじゃないかなぁと思ってみたり。

来る3/9に向けて、他のユーザーやWonderflもみっくみくにされるよう呪っておきます

ミクの日終わったけどVOCALOIDコンプ目指してまだまだ製作中！

Continue reading

jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。

それはそれで熱いんですが、私の中でいまブームになってるのは
GeckoTangさんが作ったjsdo.piggのfork祭り（勝手に祭り化）です。

まあとにかくSafariかChromeで実物を見ていただきたい。

jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS

かわいい顔してるだろ…。これ画像使ってないんだぜ…？

見た瞬間ティンと来た。

つぶやいたらtsmallfieldさんが実行してくれた。

背景付けてみた。forked from: jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS

全く変更なしで合体させただけなのにこの統一感！シンクロ率半端ない！
この背景も画像ゼロなんですよ。fork元である羊数えるやつではCSSで描かれた動物も見れます。
で、その後「作ってくれる人いたらﾗｯｷｰ」なノリで追加案をつぶやいてみたんだけど、
深夜過ぎた所為か朝見たときforkされてなかったので、辛抱たまらんくなって自分で作ってみた。

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg - jsdo.it - share JavaScript, HTML5 and CSS

ほらもうなんかアバターSNSっぽい！！！
繰り返しますがここまで画像ナシです。CSS3マジぱねーっす！

全fork元はこちら。

• jsdo.pigg
• まだ眠れないあなたに…／Still Can’t Sleep?
• かわいいふきだし
• CSS3でつくるええ感じのテキストボックス
• 口パク forked from: しゃべる（chromeのみ） forked from: 植毛済み forked from: CSS3のミサワ

私が追加したものはこれだけ。

• jQueryでチャットっぽいUIの追加
• jQuery用のCSSチューニング
• ふきだしスタイル変更ラジオボタンの追加
• まばたきアニメーション(CSS3)
• 口パクアニメーション(CSS3) ←form ミサワ祭り

（あのミサワ祭りがこんなところで役に立つとはｗ jsdo.it恐ろしい子…！）

UIにはforkされやすいようにjQueryを使いました。
現状まともに見れるのはChromeとSafariだけだけど、CSSだけでアメーバピグとか@gamesみたいな雰囲気になってるのがマジ凄くない？

今後も何かティンときたら追加するつもりでいるのですが、
WebSocketチャットの実装は共用サーバーだと無理だから出来なさそうです。
VPS持ってる方が実装してくれないかなーと思って記事にまとめてみました

WebSocketチャット版jsdo.pigg登場の巻

ginpeiさんがWebSocketに対応させてるよ！

jsdo.piggを乗せてみた forked from: WebSocket触ってみた - jsdo.it - share JavaScript, HTML5 and CSS

これにフキダシとかの装飾がされたらと思うとwktkが止まらなーい！
発言が交互に繰り返されていくなら「吹き出し」風スタイルの方がしっくりしそう。
使われてるWebSocketのAPIサービスは「WebSocket試したいけど自分でサーバー周り用意するのは面倒」という時に便利そうです。

随分前にYouTubeの埋め込み用ソースをValidにするという投稿をしたんですが、
最近仕様が変わったらしく、埋め込み用として表示されるソースがiframeになってました。
どうもiframe版だと内部でＨＴＭＬ５プレイヤーとの切り替えが行われるようです。

これをそのまま貼ってみたところ、デフォルトではwmodeが効いてないことが判明。
position:absoluteとz-indexで要素を重ねるとFlashが上に来てしまう。（上の画像をクリックするとテストできます）

解決方法

貼り付け用iframeのURLに ?wmode=transparent　を追加するだけです

Overlay Test

その他のパラメータ

wmode以外のパラメータも&や&で繋げて使えます。

• hd=1 - HDで再生
• autoplay=1 - 自動再生
• loop=1　- ループ再生
• rel=0 - 関連動画を含めない
• disablekb　キーボードによる操作（1:有効 0:無効）
• start - 再生位置指定（秒）

経験者でも入門したい時がある。

基礎

JavaScript基礎文法最速マスター

Ajax時代のJavaScriptプログラミング再入門

JavaScript再入門

アマグラマーのすすめ

プログラマのためのJavaScript

これでできる！ クロスブラウザJavaScript入門

[JavaScript]　猿でもわかるクロージャ超入門

JavaScript - MDN Doc Center
eval

Google JavaScript Style Guide 和訳

Building iPhone Apps with HTML, CSS, and JavaScript

Eloquent JavaScript

HTML5 API

Using web workers

サーバー不要で保存できる「Web Storage」の使い方

HTML5サンプル集

まだまだ間に合うCanvasでアニメーション入門（まとめと実践）

ネイティブのドラッグ & ドロップ

Using files from web applications

古籏一浩のJavaScriptラボ

OOP

Prototype.js を使った JavaScript OOP 講座
JavaScript OOP におけるクラス定義方法

ゲームプログラミング

An Introduction to Game Programming with JavaScript

Simple Game Programming In JavaScript

Game Development with JavaScript and the Canvas element

JavaScriptゲームプログラミング

ゼロから始める「ゲームの作り方」入門 by BFF

grantgalitz/GameBoy-Online – GitHub
JavaScriptのゲームボーイエミュ

いろいろ

jsのオレオレ演算子

How to Crash Internet Explorer IE6, IE7, IE8, IE9

document.write()の実行タイミングをずらす方法

HTML5@iPhoneゲーム開発

サーバー側コーディング不要のGoogle App Engine開発環境「jsonengine」

Androidで動く HTMLとJavaScriptで作る電子書籍アプリ

難読化JavaScriptで利用可能なテクニック

JavaScriptからメモリ情報を取得する方法

WebSocket, Socket.IO, Comet

WebSocket and Socket.IO

Socket.IO

Jettyで始めるWebSocket超入門

サーバを作りながら学ぶWebSocketプロトコル

Comet Programming: Using Ajax to Simulate Server Push

Comet---プッシュ型のWebアプリケーションを作る

CometとAjaxを利用したチャットサーバの実装

サーバサイドJavaScript

node.js (ja)

node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル
node.jsとjQueryでスクレイピングするウェブアプリの作り方

Learning Server-Side JavaScript with Node.js

マニアックな金融系サイトをnode.jsとMongoDBで実装してみた（概要編）

jsdo.itのSPECKというイベント？第一弾のお題がゲームに関するものだったので、
ゲーム好きとしては何か作っとかないかんやろ！と思ってMooToolsで組んでみたのがこれです。
動作確認はFirefoxとChrome、Safariで。IEでは見れないです。

forked from: GYAOS_sample - jsdo.it - share JavaScript, HTML5 and CSS

目新しい演出はなにもありませんｗｗｗｗｗ
参考の動画見てて思ったのは、戦うのがプレイヤーが飼育しているモンスターなら
ボタン押して即行動っていうのは不自然じゃないかしら？ということで
指揮して動かすっていう感覚を作れたらそれでよかったんや…。

目指したのはターン制ではなくリアルタイムバトルなんですけどね、妄想するのと実際組むのとでは難易度が雲泥の差過ぎ。
ゲームプログラマーってすげぇや！と改めて尊敬した次第です。
細かいところまで作るには大分時間が足りなかったけど
HTML+CSS+JavaScriptでバトルゲームは作れるってことが分かったのでよしとします。

続きは中身についてのメモ（MooToolsのマニアックな話）です。

Continue reading