JSCapture JS＋HTML5でスクリーンキャプチャ＆デスクトップ操作の動画撮影「JSCapture」 Chromeをお使いの方は、以下の手順をふんだあと、こちらのライブラリを使えば、JS+HTML5でスクリーンキャプチャが実現可能 chrome://flags/#enable-usermedia-screen-capture を開く Enable - "Enable screen capture support in getUserMedia()" getUserMedia() でスクリーン キャプチャのサポートを有効にします。 ブラウザをリスタート ちょっと危ない気もしますが、設定すればこういうことも可能だということも知っておいてよさそうです 関連エントリ Chrome、FF、IE等クロスブラウザで使えるブラウザキャプチャツール「qSnap」
InstantClick ? JS lib to make your website instant リンク先を先読みしてページの速度をあげるJSライブラリ「InstantClick」 リンクにマウスホバーした時点でAJAXでリンク先を先読みします。ホバーした時点でクリックしそうである、ということでロードに行き、実際にクリックした際にページの表示速度が早くなるというもの。 先読みというとWEBサーバに負荷をかけるというあまりよい印象はなかったりしますが、ホバー時のみであり自サイト内での利用に留め、サイト高速化による恩恵を受けられるという判断であれば実装してもよいのかと思います 関連エントリ Mediumのアバターズーム風エフェクトがかけられるJSライブラリ「Zoomerang.js」 画像の一部分を虫眼鏡のように拡大できるJSライブラリ「Magnifier.js」 Twitter製の高速な
Flash界のコーディングゴッドGSkinnerがJavaScriptのCanvasをFlashライクに使うライブラリを作った。 この人、確か僕と同い年ぐらいかちょい下なんだよね。。。会う度に超へこむ。 画期的というか、確実にかゆいところに手が届くライブラリで、下みたいなのがサクサクJSでいける。あいかわらずソースは美しいし、ドキュメントも完備。 game sparkles rollover localToGlobal globalToLocal sprite sheets ざっと見た感じFlashでいうところの、Stage, MovieClip, Sprite, Bitmap, Matrix, Stage, EnterFrameとキーフレームアニメがサポートされてる感じ。これは素敵。 このライブラリそのものもスゴいんだけどポイントは、GSkinnerがJSやりだしたってことは、365日以
Echo.js, simple JavaScript image lazy loading 単体1KB以下で動作する遅延ローダーライブラリ「Echo.js」。 スクロールがいってはじめて画像を読み込むライブラリ。jQueryなどに依存せず、軽量。 空の画像をsrcに設定しておきつつdata-echoでソースを指定するだけです。 読込中の画像にはローディングアニメーションもついてます 関連エントリ LazyLoadを実現する1KBを切るjQueryプラグイン「Unveil」
Audio Synthの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="audiosynth.js"></script> <script src="audiosynth.view.js"></script> Step 2: HTML キーボードを配置します。 <div class="keyboard-options"> <select ID="sound"> <option value="0" selected>Keyboard</option> <option value="1">Organ</option> <option value="2">Acoustic Guitar</option> <option value="3">EDM, bro!</option> </select> <div ID="keyboard" c
QuestionMark.js 先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」 キーボードの？を押すとサイトに実装されたキーボードショートカットが表示されます。 なんと、TwitterやGithub、GmailやGoogle+ではこの機能が実装されていますが知っていましたか？ 依存ライブラリがなく軽量サイズなライブラリとなっています 関連エントリ CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットだけど立体的なCSS3アニ
$.onScreen(); 画面上にエレメントが表示された際のイベントハンドラを設定できる「onScreen()」 1ページに沢山のコンテンツを読み込んでいるサイトにおいては、その画面が表示されないでもHTMLを出力し、転送量を必要とし、表示スピードに影響を及ぼします。 そのエレメントがスクリーンに表示された時点で、コンテンツを表示するように設計すれば無駄な転送がなくなり、スピードも速くなりますね。 これを簡単に実現できるのが、このライブラリです。 実装は次のように、初期化します。doIn, doOut という感じで関数内に定義すればよいみたいです。 lazyloaderや、ページの自動読込、更に、利用者がどこまで見たか？をトラックする場合にもAnalytics等と組み合わせて使えそう。 関連エントリ ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
Resumable.js, JavaScript magic for simultaneous, stable and resumable uploads HTML5のAPIでブラウザでのファイルアップロードをレジューム可能にする「Resumable.js」。 単体のファイルだけではなく、複数のファイルアップロードにも対応しているみたい。 大きなファイルをアップロードする必要のあるようなサイトを作る場合に使えそうですね。 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 DropBoxからファイルアップロードをする＆切り取って保存するデモ POSTやファイルアップロード等がPHPから簡単に行えるHTTPライブラリ「Unirest」
ContextJS Bootstrap風な右クリックメニューが実装できる「ContextJS」 デフォルトのBootstrapでは右クリックメニューは実装されていませんが、こちらのスクリプトを使えば簡単に実装できます。 Bootstrapがなくとも単独でも動作するようです。 どんどん便利になっていくBootstrap。 こうしてBootstrapのUIライブラリでのデファクトスタンダード的な地位は確固たる物になっていくのかも。 関連エントリ ページ上で独自の右クリックメニューを作れるjQueryプラグイン「contextMenu.js」 リアルなWindows風ツリービューが実装できるjQueryプラグイン「dynatree」
maman/JVFloat.js GitHub HTML5のプレースホルダをもっと良くする「JVFloat.js」。 inputの中にグレーで入力するもののヒントを表示できるプレースホルダですが、入力しちゃうと、あれ、これなんだっけ？となる場合がありそうです。 入力数が多くて、曖昧な入力が多いと、使い勝手が悪くなってしまうかも。というわけで、プレースホルダはそのまま表示しつつ、テキストを入力すると、入力したものの上にラベルでヒントを表示してくれるようにするJSライブラリです。 内容を入力すると、ヒントが小さくなって入力したものの上に表示されて分かりやすい また一歩、フォームが進化したかもしれないと思いました。 関連エントリ フィールドへの適切な入力文字数を分かりやすく教えてくれるjQueryプラグイン「wChar」 次世代のクレジット番号入力を提供するプライスレスなJS「Skeuocard
Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。 ここでは背景色をグレーに変更。 Equal Column Heights 2.0の使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 各パネルを内包するラッパーを用意します。 <div class="hoge"> <div>パネル</div> <div>パネル</div> <div>パネル</div> </div> Step 3: JavaScript jQuery
オプションを変更したキャプチャ diamonds.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="diamonds.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.diamonds.js"></script> Step 2: HTML ダイアモンド状に配置する各アイテムのclassに「.item」を添え、ラッパーで包みます。 <div class="d
Mergely - Online diff, merge documents テキストの差分をグラフィカルにブラウザ上で描画できるJSライブラリ「Mergely」 ブラウザ上でテキストを変更する際などに、どこを変更したのかが、リアルタイムかつグラフィカルに分かるようなUIを実装することが出来ます テキストのリアルタイムな差分を示すっていうのは大変そうですが、ライブラリを使うだけなら簡単そうですね。 サイトのテキスト編集ツールに統合したりすることで編集ツールを便利にすることが出来そうですね。 関連エントリ フルページスクロールするサイトを作るのに使える「fullPage.js」 カスタマイズが容易なカレンダー生成jQueryプラグイン「CLNDR.js」 高速なCSSアニメーションをJSで制御できる「animo.js」 WEBページをJSで自動操作できるようにできる「SlimerJS」 iO
2番目のパラグラフに移動して、ハイライト表示 Scrollocueの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery-2.0.3.js"></script> <script src="js/scrollocue.js"></script> Step 2: HTML スクロールのキューとなるパラグラフを配置し、適用する範囲を指定できるようラッパーで包みます。 適用範囲のラッパー：#container <div id="container"> <h1>Scrollocue</h1> <div class="section meta"> <p>A simple autocue/teleprompter system.</p> <p>Just use the arrows or spacebar t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
