第8回 sound.js | gihyo.jp
連載8回目は、ブラウザで音を鳴らすためのライブラリ、sound.jsを解説します。ページにちょっとした効果音をつけることで、ユーザの注意を引きつけることができます。音声制御の機能としては、再生と停止だけの、単純なものしか用意されていないので、例えば、以下のような用途が向いています。 時間のかかるアップロードの終了時に音を鳴らす（このときブラウザのウィンドウが隠れていても大丈夫です） チャットのお知らせ音 認証失敗のビープ音 後戻りできない処理の警告音 短い音声による案内 内部的には、ページにembedタグを挿入して、ブラウザのQuickTimeプラグインを使うことで実現されています。IEでは、ページにbgsoundタグを挿入して、IEに固有の音声再生機能を使います。 なぜFlashを使わないのかについては、いまだ議論の余地がありますが、最近はQuickTimeプラグインがiTunesの成功
JavaScript 1.6-1.9はECMAScript 4へ至るコード名だって? | エンタープライズ | マイコミジャーナル
Mozilla Foundation, JavaScript Evangelist, John Resig氏は22日(米国時間)、JavaScriptやそれを取り巻くバージョンについて説明に混乱があったとし、Webブラウザとそれが実装しているECMAScript/JavaScriptのバージョンについてまとめている。同氏は同月16日(米国時間)、 Planning JavaScript 1.9においてすでにFirefox 3に搭載する機能は決定されており、今後は以後のバージョンでどこまでJavaScriptの機能を実装していくか検討する段階にきたという説明をしているが、この辺りの説明をさしてバージョンとその意味するところを明確にしたい狙いがあるとみられる。 同氏の説明によるとWebブラウザとその実装しているECMAScript/JavaScriptのバージョンは次のとおり。 IE6-7:
XMLHttpRequestでRefererをセットする - FAX
JavaScript 追記Firefox 3.0で確認したところエラーになった。 Firefox 2.0.0.13で確認しました。 var url = 'http://localhost:8080/index.html'; var referrer = 'http://www.hatena.ne.jp/'; var req = new XMLHttpRequest(); req.open('GET', url, true); req.onreadystatechange = function(){ // 1: 読み込み中 if(req.readyState == 1) req.setRequestHeader('Referer', referrer); // 4: 準備完了 if(req.readyState != 4) return; console.log(req.responseTe
CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」:phpspot開発日誌
Saving canvas data to image file This is a small library that lets you easily save a WHATWG canvas element as an imagefile. CanvasデータをPNG/JPEG等の１枚画像に変換するJS「Canvas2Image」。 Flashを使わずに、ブラウザ上でお絵かきして、画像に変換できます。 次のように、Canvasに対して１行で変換できます。。 var oCanvas = document.getElementById("thecanvas"); Canvas2Image.saveAsPNG(oCanvas); Canvasの使えないブラウザでは当然、使うことは出来ませんが、描画したものをそのまま画像にする、というのは使いどころがありそうです。
Apple 謹製の JavaScript デバッガ「Drosera」が便利な件 - IT戦記
Drosera とは 1000speakers 後のハッカソンで 山岸くん が「Drosera っていうアプリがある！」って発見して、教えてもらいました。 Drosera は WebKit 用の JavaScript デバッガで、 Windows XP でも Mac でも動くみたいです。 WebKit Build Archives | WebKit からダウンロードした WebKit のアーカイブの中に同封されています。 で、実際に使ってみた感じ できること ステップ実行 コールスタックを見る レキシカルな変数をウォッチする などなどです。 まとめ Web インスペクタと併用すれば効果抜群ですね！
blog.katsuma.tv
GmailやLDRなどもそうですが、最近はWebアプリケーションでも「起動させっぱなし」を基本路線に置いているものも増えてきています。そういうときにポイントとなるのが「(サーバ側で変更が発生したときに)サーバからの通知をブラウザにどうやって知らせるか？」ということ。ブラウザでページを開かれている場合だと、変更箇所を専用のボックスエリアを設けて、適当に目立たせておけばいいのですが、別タブで開かれている場合などには、タブをユーザが切り替えるまでは、その変更を通知することができません。そんなときに、「差分の大きな複数のfavicon(*)を動的に変更させることで通知と同等の効果が期待できないか？」という話。(全然違うfaviconをアニメーションさせることで目立たせられないか？という狙い) faviconの変更は割と単純 まずfaviconが動的に変更させることができないか？の検証ページを作って
[JS]jQueryのプラグイン33 1選 -2008年3月 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]巨大なテーブルでも省スペースに表示するスクリプト -Super Tables
Super Tablesは、テーブルのヘッダを固定表示にし、縦横にスクロールバーを表示させるスクリプトです。
HTMLヘルプ形式のJavaScriptリファレンス「jsref.chm」を公開した。 - こせきの技術日記
MozillaのJavaScriptドキュメントとECMA Scriptの言語仕様を、まとめてHTMLヘルプ(chm)形式にコンパイルしました。Windows用です。 (2008-05-27 追記) OS XならChemrがいいみたいです。(参考) http://cid-57544de2edadf883.skydrive.live.com/self.aspx/jsref/jsref.chm *1 以下のドキュメントが入っています。 Core JavaScript 1.5 リファレンス http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference Core JavaScript 1.5 ガイド http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Guide G
Code — Kate Morley
This section of my site contains code and programming tutorials. Data structures and algorithms Online binary file viewer Vertical label placement Compressing the Wordle dictionary AmigaGuide reference HAKMEM Item 175 HTML and CSS Styling checkboxes and radio buttons A star rating widget Tree views Border box sizing JavaScript Detecting caps lock PHP Creating CSV downloads Iterating over graphemes
iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう:phpspot開発日誌
"jQuery checkbox v.1.0.0" demo iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう。 「jQuery checkbox」を使うことで次のようなＵＩが作れるようです。 ON/OFFを分かりやすく選択してもらいたい場合、チェックボックスよりも適切なＵＩかもしれませんね。 Safari skin というSafariのチェックボックス風にすることも出来るよう。
クロスブラウザのJavaScriptコードを書くときに気をつけること | エンタープライズ | マイコミジャーナル
Mozilla Foundation, JavaScript Evangelist, John Resig氏は2月29日(米国時間)、自身のブログにおいてBad Object DetectionのタイトルのもとクロスブラウザのJavaScriptコードを記述する際の注意事項をまとめている。同氏はJavaScript Ajax WebアプリケーションフレームワークjQueryの主要開発者であり、このあたりの事情に精通している。 オブジェクト検出の記述例 同氏はクロスブラウザのJavaScriptコードを記述するには、使いたい機能ごとに使えるかどうかを検出する方法が一般的なやり方だと説明。オブジェクト検出の方法はケースバイケースで違うとし、いくつかの例を紹介している。特定のプロパティが存在するかどうかで機能の有無を判断する方法が紹介されている。 ただしこうした方法は、未知のブラウザに対しての動
JavaScript 2.0へ向け、ECMAScript Edition 4参照実装最新版 | エンタープライズ | マイコミジャーナル
次期JavaScript 2.0のベース仕様になるとみられるECMAScript Edition 4だが、先日The Ecma TG1 groupから参照実装のアーリーアクセス(マイルストーン2)が提供された。ソースコードが提供されているほか、Windows、Mac OS X、Linuxのバイナリが用意されている。 M2で実装されている機能は次のとおり。 クラスおよびインタフェース 名前空間 pragmas let / const / let-const イテレータ enumerability control type expressions / definitions / アノテーション ランタイム型チェック(スタンダードモード) nullability destructuring assignment スライスシンタックス ハッシュコード catchalls map / vector
CSSとJavaScriptで実装するタブ型インターフェイス37選 -noupe | コリス
noupeのエントリー「37+ Great Ajax, CSS Tab-Based Interfaces」から、CSSとJavaScriptで実装するタブ型インターフェイス37選の紹介です。 37+ Great Ajax, CSS Tab-Based Interfaces 自動で切り替わるタブ型インターフェイス Easy Tabs 1.2 - now with autochange Rotating jQuery tabs example Tab Content Script (v 2.1) スライド式のタブ型インターフェイス Sliding Tabs Coda-Slider Perspective Tabs AJAXを使用したタブ型インターフェイス Ajax Tabs Content Script (v 2.1) 閉じることも可能なタブ型インターフェイス Tab Panels Close
画像を同一Window内でスムーズにズームしてくれるJSライブラリ色々:phpspot開発日誌
画像を同一Window内でスムーズにポップアップしてくれるJSライブラリ色々。 LightBox風ではなく、クリックした画像がそのままズームイン、されるライブラリを紹介。 FancyZoom 1.1 - 最近リリースされたFancyZoom。クリックでアニメーションしながら画像がズーム Highslide JS - 以前にも紹介した、Highslide JS。FancyZoomと動きはほぼ同じ。 Live Thumbnail Demo - 画像をその場でズイズイっとリサイズ (参照記事: サムネイルと元画像の見せ方) 今回新しく紹介する「FancyZoom」は、スクリプトを読み込んで、初期化するだけで、<a href="大きい画像"><img src="小さい画像(サムネイル)"></a> のマークアップにズーム機能が追加されるという点で実装はすごく容易でマークアップも綺麗にできます。
JavaScriptを並列処理言語Erlangへコンパイルする"ErlyJS"とは | エンタープライズ | マイコミジャーナル
Roberto Saccon氏がErlyJSと呼ばれる興味深いコンパイラの開発をはじめている。まだ開発は初期段階だが、発想がおもしろくかなり興味をひく。ErlyJS (JavaScript to Erlang compiler)はJavaScriptをErlang仮想マシン向けにコンパイルするコンパイラ。それ自身もErlang仮想マシンで動作する。 Erlangは並列処理に注力して開発されたプログラミング言語およびその実行環境。ErlyJSはJavaScriptをErlangで動作するコードにコンパイルするためのもので、クライアントアプリケーションの開発を目指している。Erlangで開発されたサーバ上で、ErlyJSを使ってコンパイルされたJavaScriptコードがクライアントアプリケーションとして動作するという寸法だ。 公開されている情報によればJavaScriptコードはErlang
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート:phpspot開発日誌
JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート 2008年02月07日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App.JavaScriptでの進捗表示に便利な「jsProgressBarHandler」がアップデート。 『進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」』で紹介した
Adobe高速JavaScript実装、バイトコードにForthを採用 | エンタープライズ | マイコミジャーナル
A Quick Introduction to Tamarin Tracing - by Chris Double氏 Webシステム開発用の言語としてJavaScriptが日に日に重要な位置を獲得しつつある。複雑なシステムを開発するとなるとその実行速度が問題視されるJavaScriptだが、コンパイル技術の導入やJITの導入で状況は改善されようとしている。特にFirefox 4で導入が予定されているAdobe Systemsから寄贈されたTamarinはJavaScriptの実行速度を劇的に向上させることになる。 Chris Double氏が3日(米国時間)、同氏のブログにおいてA Quick Introduction to Tamarin Tracingのタイトルのもと興味深いドキュメントを公開た。同氏は同ドキュメントで"tracing jit"と呼ばれる技術を活用した実装"Tamari
PHPで使える便利関数をJavaScriptでも使えるようにする「php.js」:phpspot開発日誌
PHP.JS Licensing This article is part of the 'Porting PHP to Javascript' Project, which aims to decrease the gap between developing for PHP & Javascript. PHPで使える便利関数をJavaScriptでも使えるようにする「php.js」。 php.js をインクルードすれば、次のPHP関数と同名かつ同機能を使うことが出来ます。 abs, addslashes, array_change_key_case, array_chunk, array_combine, array_count_values, array_diff, array_diff_assoc, array_diff_key, array_fill, array_flip, a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った、クールな写真ギャラリーを作るためのライブラリ『galleria』 | IDEA*IDEA