About The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Simple enough, right? Have a look at the demos to see it in action. Features rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. Cross-browse

QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」

設置も簡単、TwitterやFacebookなど複数のソーシャルメディアのカウント数を合算して表示する超軽量(2kb)スクリプトを紹介します。 Share Count [ad#ad-2] Share Countのデモ Share Countの実装 Share Countのデモ 設定したソーシャルメディアのカウント数は、合算して一緒に表示されます。 デモのようにアイコンを添えるといい感じです。 Share Count JSの右サイドバーに設置 [ad#ad-2] Share Countの実装 実装は、簡単です。 HTML 「class=sharecount」をつけたdiv要素を配置します。 <div class="sharecount">Share</div> 特定のサイトのカウントを表示する場合は、a要素を使用します。 例：www.google.com <a href="http://ww

画像を一切使用せず、既存のフォームをかわいらしいデザインに変更するjQueryのプラグインを紹介します。 チェックボックスのチェックも画像ではないですよ。 Ideal Forms デモ [ad#ad-2] Ideal Formsのデモ フォームの外観は画像は使用せずスタイルシートでデザインされているので、自分用のカラーに変更することも可能です。 デモでは、3つのスタイルが用意されています。 スタイル：Comix Ideal Formsの主な特徴 フォームに美しい外観を与える軽量（14Kb）のスクリプト。 カスタマイズも簡単で、非常に使いやすいです。 画像は必要なく、スタイルシートでデザインを適用しています。 [ad#ad-2] Ideal Formsの実装 ファイルのアップロード 以下の2つをフォルダごとアップロードします。 css/idealForms js/idealForms.js

JavaScriptやFlashを使用せず、パネルをにょいーんとアニメーションで表示・非表示するスタイルシートを紹介します。 デモページ 実装 デモページを例に実装方法を紹介します。 HTML 最初のチェックボックスはdisplay:none;で非表示で、その後にlabel要素を実装します。 <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> <input type="checkbox" id="doggiezzz" class="popUpControl"> <label for="doggiezzz" class="header-button"> More dogs! <span class="box"><img src="ht

iPhoneアプリのようなリッチなUIをブラウザで実現！Web 2.0 Touchが凄すぎる！ 2011年8月25日 in iPhone, Web Web 2.0 Touchは、WebKitエンジン上で動作するJavaScriptライブラリです。 2011/8/22に公開されたばかりの模様。 iPhoneアプリのようなリッチなUIをブラウザでも簡単に作ることができます。 iPhone・iPad・Androidに対応しています。 どんな動きが出来るのか、これを見ると一目瞭然です。 アニメーション 上下左右のフリップ(画面が反転する動き)、ポップイン、ポップアウト、上下左右のスライドが出来ます。 テーブル表示 お馴染みのテーブル表示もこの通り。角丸タイプのテーブルも作れるようです。 ボタンやタブ表示、吹き出し タブ表示は便利な機能ですが、自分ではとても作れないところなので、需要ありそう

リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 When (and when not to) use an anchor tag? [ad#ad-2] 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました。 例えば、Gmailのソースを調べてみると、クリック可能な大部分の箇所はdiv要素を使用しています。これはJavaScriptのイベント用のもので、a要素を使用すべきではないものです。 では、そのa要素を使用しない場合、ユーザーにそれがクリック可能であるように見せるために、どのようにしたらよい

複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン

概要 ユーザがフォームに入力したとき、指定の形式 (半角,全角,ひらがな,全角カタカナ) に自動で変換してあげるための JavaScript ライブラリです。 動作確認用の demo ダウンロード 使い方と説明 動作させるためには、ダウンロードした valueconvertor.js を (X)HTML ファイルの head 要素内などで読み込みます。 <script type="text/javascript" src="js/valueconvertor.js"></script> さらに、変換の動作の目印とするための class 属性値を設定します。<input type="text" class="ascii" />のように、input 要素に対して、指定の class 属性値をつけると動作します。class 属性値と動作の内容の対応表については以下の通りです。 値の形式 clas

解釈が間違っている点がある可能性が御座いますのでご了承くださいませ。記事の内容としては「Node.js なら他のサーバよりもこんなに簡単に WebSocket が扱える(ライブラリがある)」というような内容となっていますので、ご了承いただければと思います。 Node.js って何？ Node.js についてよくわからず最初は以下のページを読んでました。 Node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌 例えば、ログイン中の2人がいて、1人がチャットのリクエストをしたとします。でもラグが30秒ほどあって、気付かずに閉じちゃうなんてことがなくなります。 メンバーAのブラウザがメンバーBのブラウザに直接プッシュするってことかと最初は思っていましたが違いました。この点について深く考えていくこととなります。 Node.js を使うと何ができるのか node.js を使

モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS

Run Linux or other Operating Systems in your browser! The following emulated systems are available: CPUOSUser InterfaceVFsync accessStartup LinkTEMU ConfigComment

<ul> <li><span>Fruit</span> <ul> <li><span>Apples</span></li> <li><span>Oranges</span></li> <li><span>Watermelons</span></li> </ul> </li><!-- Fruit --> <li><span>Vegetables</span> <ul> <li><span>Leaf Vegetables <a href="linktothisitem">#</a></span> <ul> <li><span>Arugula</span></li> <li><span>Cabbage</span></li> <li><span>Lettuce</span></li> <li><span>Spinach</span></li> </ul> </li><!-- Leaf Veget

IE6/7/8, Firefox, Operaを含む主要ブラウザ全てに、HTML5のaudio要素を使ってMP3を再生できるようにするスクリプトを紹介します。 audio.js デモページ [ad#ad-2] audio要素のサポート状況 audioはHTML5の要素で、サポートしているブラウザは限られたものとなっています。 audio要素のブラウザのサポート状況 IE9 Firefox 3.5+ Chrome Safari Opera 9.6+ また、対応している音声ファイルのフォーマットも異なり、現在音声ファイルの主流のMP3はChromeのみが対応しています（Safariも一応再生可）。 「audio.js」は、audio要素に非対応のIE6/7/8、MP3に非対応のFirefox, Safari, Operaで、audio要素を使ってMP3ファイルを再生できるようにします。 [ad

大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。 SpryMap デモページ [ad#ad-2] スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。 SpryMapの特徴 他のライブラリに依存せずに動作する超軽量（3KB）のスクリプト。 画像を表示する領域はピクセル単位で指定が可能。 画像を最初に表示する座標を設定可能。 スクロールのアニメーションの時間を設定可能。 SpryMapの実装 実装は簡単で、画像にidを指定して使用します。 HTML スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。 <img id="worldMap" src="map.jpg" alt="A map of the world." /

jsdo.itではInternetExplorerやFirefoxなどのWebブラウザだけでコードが書けちゃいます。

JavaScript。「ジャヴァスクリプト」と読みます。主にWebページに動きを与えるものです。 現在では結構多くのページに使われていますが、その多くはとてもレベルが低く不適切なものです。もっと質の高いJavaScriptを使える人が増えるといいなという思いから、このページを作りました。 初級者の基礎知識 本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない人は、この辺を読んでみましょう。 基礎第一回 基礎第二回 基礎第三回 基礎第四回 基礎第五回 基礎第六回 第一章　オブジェクト オブジェクトとは オブジェクトの実体 配列のコピー オブジェクトと関数 第二章　DOMの基礎 HTMLと木構造 DOMとは 基本的な操作とテキストノード 木構造の操作：ノードの除去 木構造の操作：ノードの追加 木構造の操作：さまざまな機能 木構造の操作