はてなブックマーク

今回はAjaxストリーミングの実装を具体的に見ていこうと思います。ストリーミングの方法はブラウザによって違いがあり、それがかなり厄介でした。特にInternet Explorerは、バージョン8でようやくストリーミングが可能になったばかりで、それより前のバージョン（6、7）ではひとつのHTTPコネクションで複数のレスポンスを得るといったことができず、ロングポーリング（Comet）といった手法で代替するしかありません。IEを除くと、FirefoxやChromeの最新バージョンは問題ありません。ただし、これらもバージョンが古いと正常に動作しないかもしれません。このようにAjaxストリーミングのクロスブラウザ化はかなり困難さを伴うものであるようです。 まず、ひとつの簡単なサンプルを作ることにしました。サーバーサイド(PHP5)でデータを小出しにするコードを書いて、それをクライアントサイドのAja

以前公開したjQueryとSoundManager 2の簡易BGMプレイヤーをマイナーチェンジすることにしました。前のバージョンで明らかにこれは・・・というダメな部分を修正しつつ、 ボリューム調整など新たな機能を盛り込んで作り直しています。 前回からの変更点１：SoundManager 2を通常ロードにする これまでSM2のロードをJavaScriptで動的に行っていたものの、これは時に起動失敗を招く無意味な処置であったことが判明。今回はHTMLのheadタグ内に始めから書く方法に変えています。 変更点２：jQuery Context Menuの代わりにJeegooContextを使用 右クリック時にメニューが表示されるように、前バージョンではjQuery Context Menuというプラグインを使っていましたが、 今回は同じ機能を持つJeegooContextというプラグインに変更しま

Text on YouTube - YouTube動画上にテキストを表示するjQueryプラグイン Text on YouTubeは、字幕inやニコニコ動画のようにYouTubeの動画上にテキストを表示させるjQueryプラグインです。 現在ベータ版を公開しています。 YouTubeの字幕機能と違うのは、テキスト表示部分をJavaScriptで制御していることと、 YouTubeにアップロードされている動画なら誰のでも利用できるところです（動画自体を加工するわけではないからです）。 また、テキストの表示にjQueryのEffectsクラスを使用しているので、単純なshow/hideメソッドから、 animateメソッドまで幅広くエフェクトを利用できます。 ただし専用エディタがないので、字幕表示のためにはJavaScriptやJSON文法の理解がある程度必要になります。一方で、簡単なコードを

私はどちらかというとPrototype.jsライブラリをよく使ってきたのですが、最近はjQuery寄りになっていて、プラグインをいくつか作る機会が出てきました。今回は自分が参考にしたサイトなどを頼りにjQueryプラグイン作成方法をまとめてみたいと思います。 参考サイト：　jQuery を扱う: 第 3 回 中級レベルの jQuery: 独自のプラグインを作成する 内容はややデベロッパー向けですが、以下のWeb技術を扱った一連のドキュメント群も非常にためになります。 技術文書一覧 プラグイン作成のマナー 別に強制力があるわけではないですが、jQueryサイドで最低限守ってほしいという規則を載せておきます。 １、ファイル名はjquery.「あなたのプラグイン名」.jsとする。 例：　jquery.clickablecanvas.js ２、メソッドはjQuery.fnオブジェクトにアタッチし、

ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン２を公開しています。詳しくはこちらのデモページへ！ 10/11/18　Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応

以前JavaScriptでツールチップの導入がはやった時期がありました（いきなり過去形ですが）。マウスをリンクや画像の上などに乗せると出てくる小さなポップアップのようなあれです。 手軽にユーザビリティを向上させられるツールチップの需要は案外高く、その上簡単なスクリプトで作れることから、いろんなタイプのツールチップが数年前から公開されています。 今回はデザイン的になかなかクールなclueTipというツールチップを見つけたので、紹介してみます。 また、これはjQueryのプラグインなので使用するページでjQueryライブラリを読み込んでおく必要があります。ただ、同時にjQuery UIの膨大なテーマを利用することを考えており、 何がデザイン的にふさわしい組み合わせかサンプルを踏まえながら見ていく予定です。 ここにカーソルを合わせてみてください。 長いので目次付き 導入に必要なもの （１）jQu

jQueryプレイヤーの新バージョンを公開しました。JeeGooContextプラグインを使用し、いくつか機能が追加されています。 以前Prototype.jsとSoundManager2で作成したミュージックプレーヤーを、jQueryのプラグインに置き換えてリメイクしました。 サンプルはこちら SoundManager2はここからダウンロードできます。 まずはセットアップ このスクリプトではjQueryとjQuery Context Menuというライブラリを利用しています。 jQueryはここから、（バージョンは最新のv1.4.1以上を利用してください） jQuery Context Menuはこのページからダウンロードできます。 jQuery Context Menuに関しては、JavaScriptファイル とCSSファイルがそれぞれ必要になります。 ファイルを用意したら、まずjQu