「絶対に起きるWEB目覚まし」 を作りました。

絶対に起きるWEB目覚まし ログイン画面

HTML5のaudioを使用しています。
canPlayTypeを使用し、wavなどを再生できるかどうかでブラウザを判別しています。

----------------
if (objAlarm1.canPlayType) {
	var bWav = ('' !== objAlarm1.canPlayType('audio/wav'));
----------------

漫画で使い方の簡単な説明ページも用意してみました。
http://tatsuaki.net/web_timer/manga1.html

設定した時間の5分前、3分前、1分前になると目覚まし声が鳴るのですが、特徴的な音声にしてみたので、よろしければ一度使って聞いていただけたらと思います。

1DIV サラリーマン(全身) forked: 1DIV リラックマ – jsdo.it – share JavaScript, HTML5 and CSS

(「PLAY」押すとサラリーマンが表示されます。jsdo.itのサイトに遷移しFullscreen表示すると全身が表示されます)

css3を使い、divタグ一つでサラリーマンを書いてみました。
cssの擬似要素のbeforeとafterを使い、基本box-shadowで表現しています。
メガネフレームや髪は、影をいくつも重ねて作りました。

以前作った レコメガール のように、ページ下部にくっつき、ウィンドウサイズに合わせて可変するフッターのサンプルです。

可変フッターサンプル

position: absolute と bottom だけだと、ウィンドウの縦幅が狭いときは上のコンテンツにフッターがかぶってしまうことがあります。
HTML5用に !doctype html と宣言するとdivをheight 100% としてもウィンドウの縦幅いっぱいにdivが拡がらないので、htmlとbodyにheight 100% を指定し、min-heightで最小幅を指定することで、ある程度の縦幅があるときはウィンドウの大きさに合わせて可変し、縦幅が狭いときは可変しないフッターを実装することができます。

----------------
html,body {
	height:100%;
}
#wrap {
	height:100%;
	min-height:300px;
	position: relative;
}
#footer {
	position: absolute;
	width:100%;
	height:40px;
	bottom:30px;
	background-color: #999;
}
----------------

※IE6など、古いブラウザではmin-heightは実装されておらず、下記のような方法で対応する必要があります。
【参考】IE で min-width を指定する方法 – lucky bag

jsとHTML5で 『停電の夜のベースボール』 というサイトを作りました。

http://www.tatsuaki.net/nighter/
nighter_top

イントロの動画を含め10分以内で全部見れるサイトとなっております。
HTML5のサイトですが、主要なブラウザ全て対応いたしました。(safari、chrome、firefox、IE9)

ブラウザごとのメディアファイル(audioやvideo)の出しわけは、modernizr.js というライブラリを使用しました。
下記のように対応のコーデック名などで判別ができるため、とても使いやすかったです。

-------------------
if ((!Modernizr.audio.ogg && !Modernizr.audio.mp3) ||
(!Modernizr.video.ogg && !Modernizr.video.h264) ||
-------------------

firefoxのaudioのloop機能が、うまくできなかったため、loopのプロパティを使わずに、firefoxでの音楽のloopは、下記のように再生し終わったら0秒に戻すという処理でループするようにしています。

-------------------
// firefox doesn't support audio loop property
if (window.navigator.userAgent.toLowerCase().indexOf('firefox') >= 0) {
audio.addEventListener('ended', function() {
audio.currentTime = 0;
}, false);
}
-------------------

全ソースを、githubへ登録しておりますので、詳細につきましてはそちらをご覧ください。
cou929 / Outage-Night-Baseball

画像がマウスに沿って動く部分は、以前jsdo.itで作った 『アップルストア上海 のぐりぐり写真』 (参考:ぐりぐり写真を作ろう) のソースを元にしました。
この連番画像の作成は、AfterEffectsとPhotoshopの自動化を行い縦長画像を作っています。
自動化したjsなどについては、別途記載いたしました。
【関連】ぐりぐり写真用 Photoshop自動化javascript
 

東京てら子Vol.16 『ドキッ、JavaScriptだらけの240分』 内で作り方など発表させていただきました。

アップルストア上海を、360度写真で撮って動かせるようにし、jsdo.itに投稿させていただきました。(HTML5でできています)

参考:ぐりぐり写真を作ろう

夜はリンゴマークが浮かびあがって幻想的でした。

夜のアップルストア上海
夜のアップルストア上海

 
追記: 後日、jsdo.it の Hot code 入りし、トップページの目立つところに載りました。
favoritesしてくださった方やRTしてくださった方、本当にありがとうございました。

jsdo.it Hot code
hc

【関連】 海外用ポケットwifi MiFi (上海に行ってきました その2)
【関連】 羽田空港国際線のwifiやパソコンの電源について (上海に行ってきました その1)