Code is beautiful

2010-12-01

CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアル

JAM - HTML5 and Flash

Session5「CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアルしてください。」

との事で、HTML5マークアップ

forked from: CBC NET - jsdo.it - Share JavaScript, HTML5 and CSS

始めは22面体とか突拍子のない事考えてたんだけど、結果的にはこんな感じに。

記事写真にマウスオーバーすると内容レイヤーが表示される仕組みで、その表示にCSS3のtransitionを使用してみた。

その対比というか、記事スライドは横方向にしている。

横スライドはjsでabsolute座標を変更してるんだけど、Operaがどうもカクカクでjsが速いんだか何だか。

カテゴリ、タグ、月別アーカイブのリンクには、Ajaxでもブラウザの「戻る」「進む」を有効にさせるべく、jQuery hashchange eventを使用。


(参考)

Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン


ロゴ画像が四角い事もあり、全体的に四角なデザインを心掛けてみた。

2010-11-25

(Fav)icon Maker

JavaScriptで動的アイコン生成。

Dotshopをforkして追加しようかと思ったけど、HTML5ぽくCanvas使って作ってみた。

(Fav)icon Maker - jsdo.it - Share JavaScript, HTML5 and CSS


フォーマット仕様に関しては、

ICO(CUR) ファイルフォーマット

を参考にさせて頂いた。


もうちょい煮詰めてみようかなぁとぼんやり思ってる。

2010-11-01

視覚的にも楽しめる楽器アプリ

JAM - HTML5 and Flash

Session4「視覚的にも楽しめる楽器アプリをつくってください」

全く以って想像力の欠片もない自分にガッカリ。

ホント思いつかなくて参戦できないレベルだったんだけど、動的波形生成は常々興味あったので、勉強がてら何とか1作品作ってみた。

forked from: Instrument - jsdo.it - Share JavaScript, HTML5 and CSS

音符オブジェクトを繋げて音を再生させるアプリで、視覚的にも楽しめるというテーマなので波紋ぽく表現。

もうちょい早く始めてれば、bgmなり和音対応なりしてたかも知れないけど、まぁ1日じゃこんなモンかなと。



参考

JavaScriptで波をつくろう。リアルタイム波形生成&再生

2010-09-28

Dotshop

JAM - HTML5 and Flash

Session3「思わず押したくなるボタンをつくってください」

ボタンなんてデフォで押したいモンだろと思うんだけど、このテーマは難しい。

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

結局ボタン数で勝負かなと、リアルタイムドット絵共有サービス的な感じに。

キャンバスを1枚にする事で、邪魔したりされたりな展開が繰り広げたり繰り広げられなかったり。

データの保持にサーバサイドも書いて、JSONPでクロスドメインAJAXな感じ。

// なぜかjqueryの古いバージョンで開発してたという痛恨のミス。動かなくて焦った。

2010-09-25

正規表現チェッカー

久々の投稿。

正規表現にマッチした部分を色付けするツール。

ちょっとした確認をしたい時に使えるかなと。

正規表現チェッカー - jsdo.it - share JavaScript, HTML5 and CSS

色付けの方法はgオプション以外は単純にreplaceすればいいんだけど、gオプション有りの場合はRegExp.execとRegExp.lastIndexの組み合わせでマッチ部分を1つずつ取得していく感じ。

しかし、IEのfilterでCSS3っぽい事もできるっちゃできるけど、それに限らずブラウザの差異を埋めるのは容易じゃないな。