進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」:phpspot開発日誌
進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」 2007年09月06日- Bram.us jsProgressBarHandler (Dynamic Unobtrusive Javascript Progress/Percentage Bar) jsProgressBarHandler is a rewrite of the (unfortunately wrongly named) AJAX Progress / Percentage Bar by Webappers. 進捗状況を分かりやすくプログレスバーで表示できるJSライブラリ「jsProgressBarHandler」。 プログレスバーがなめらかなアニメーション表示されるので、進捗状況が非常に分かりやすく表示できます。 デモページはこちら 利用にはprototype.js
Flash と Ajax を使った使いやすいファイルアップロードライブラリ「 FancyUpload 」
digitarald FancyUpload Swf meets Ajax for beautiful uploads. The release of the long awaited MooTools upload widget thats allows queued multiple-file upload including progress bars. FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpload」。 FancyUpload を使えば、インタラクティブで複数ファイルのアップロードも簡単な、次のようなアップローダーが作れます。 「Browse Files」ボタンでファイルを選ぶと、右側のペインに アップロード予定のファイルとして追加されます。 「Start Upload」ボタンによってファイルのアップロードを開始します。 アップロードの
TAKESAKO @ Yet another Cybozu Labs: Operaでも非同期リクエストが並列処理できる img-JSONP
先日金床さんに教えてもらったOperaで非同期並列JSONPを実行させる方法を実際に試してみたら意外とすんなり動いてしまったので報告します。 最速インターフェース研究会 :: OperaでJSONPを非同期リクエストするより JSONP が Opera だと非同期処理できない http://d.hatena.ne.jp/secondlife/20060906/1157515075 に書かれているとおりOperaだとscript要素を足した瞬間にJavaScriptの実行が止まって、ロード完了まで後続のスクリプトが実行されなくなります。 サンプルコード 改善前（普通のJSONP） Operaはスクリプトを追加するとタイマーが止まる（サンプルページ） http://la.ma.la/misc/js/opera_jsonp_test.html function test(){ var s = d
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
jQuery版script.aculo.usの「Interface elements」がすごい:phpspot開発日誌
Interface elements for jQuery - Real examples of Interface elements jQuery版script.aculo.usの「Interface elements」。 script.aculo.us 同様、エフェクト、ドラッグ＆ドロップ、アニメーション、スライダー、オートコンプリートのほか、 ３Dアニメーション、アイテム選択用UI、テキストエリアリサイズ、ツールチップヒント、MacOS X の Dock 風UI を実装するためのライブラリが同梱されています。 詳しくは以下のデモを使ってみればそのすごさが分かるはず。 Effects [opens in new window] (combined showcase) Test new animate function [opens in new window] Use new func
gmailで添付ファイルが自動でアップロードされるしくみ - bits and bytes
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています！ 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
【ハウツー】Googleからの新たな贈り物、「Google AJAX Feed API」を試そう | エンタープライズ | マイコミジャーナル
Google AJAX Feed APIとは? Googleは16日、「Google AJAX Feed API」を公開した。Google AJAX Feed APIは、RSS/Atomなどの各種フィードを取得するためのJavaScript APIだ。 これまで、JavaScriptでフィードを取得し、取り扱うには以下のような問題があった。 JavaScriptはセキュリティ制限上、生成元のホストにしかXMLHttpRequestなどを使用したネットワークアクセスを行うことができない(これを同一生成元ポリシーと呼ぶ)。そのため、単純に他のホストからフィードを取得するようなコードを書くことができず、自ホストのサーバにプロキシを置いておき、そのプロキシ経由でフィードを取得するなどの対処が必要であった フィードの形式が乱立している。これで困るのはJavaScriptに限った話ではないが、ことサイ
あるＳＥのつぶやき: 07.Ajax開発支援ツールまとめ
Ajax開発支援ツールをまとめておきます。 | コーディング | ブラウザ | テスト | デザイン | JSツール | 画像 | リファレンス | | チートシート | JSお勉強 | リンク | 編集履歴 | ・コーディング支援ツール ↑TOP aptana eclipseのプラグインのJS,CSS,HTML,XML,PHP,AIR等のエディタ コード補完機能やJavaScriptのクラスの階層表示もサポート 解説記事1 ，解説記事2，正式版情報 JSEclipse Adobe提供のecliseプラグイン。こちらも参照 コード補完機能や、オープンソースライブラリもサポート Spket IDE eclipseプラグインのJavaScript,XMLエディタ XUL/XBL,SVG,Lzszlo,Yahoo! Widgetをサポート Googlipse Google Web Tookit用
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
Prototype.jsベースのグラフィックス描画フレームワーク:phpspot開発日誌
Prototype Graphic Framework This open-source framework is developed for my new project NeoMeeting. Prototype.jsベースのグラフィックス描画フレームワークの紹介。 四角形、円形、多角形などを SVG/VML/Canvas の方式で描画することが出来ます。 コードは次のようにオブジェクト指向でシンプルに記述できます。(SVG描画の場合) // Create an SVG renderer var renderer = new SVGRenderer("whiteboard"); // Create a rectangle with some attributes like color and bounds var rect = new Graphic.Rectangle(rendere
秋元@サイボウズラボ・プログラマー・ブログ: Yahoo UIライブラリの各ファイルがYahooから直接ホストされるように
via Yahoo! User Interface Blog Ajaxパーツやページデザイン/レイアウト支援のYahoo! UI ライブラリの各ファイルが、Yahooのサーバから直接提供されるようになったという発表があった。(←リンク先には各ファイルのURLも載っている) YUIに含まれるCSS, Javascript, 画像ファイルについて、直接 yahooapi.com サーバにあるものを指して使っていいということ。(従来通り、ダウンロードしてローカルのサーバに置くことももちろん可能) つまり、YUIのファイルを改変したりせずそのまま使ったネットサービスを作った場合、これらのファイルを自分のサーバでホストしなくていい、ということになる。 yahooapi.com にはYahooの分散システムが適用されているので、ファイルの取得はネットワーク的に近いサーバから行なわれるということだ。自前
hail2u.net - Weblog - Google AJAX Search APIのJSONPを利用したサイト内検索
Google AJAX Search APIは、動的にGoogle検索結果を自分のページに挿入することができるAPI(あまり使っているサイトを見ないけど)。Ajaxっつっても内部はJSONP(みたいなもの)だったりするので、普通にGwebSearchクラスのsetSiteRestriction()メソッドを使うのではなく、JSONPを直接叩いてサイト内検索を実装することもできる。もちろんサイト内検索に限った話ではないけど。 Google AJAX Search APIのGwebSearchクラスによる検索は、 http://www.google.com/uds/GwebSearch?callback={コールバック関数名}&context=0&lstkp=0&hl=ja&q={検索文字列}&key={Google AJAX Search API key}&v=0.1 というURLへリクエス
JavaScriptによる全文検索エンジン - llameradaの日記
JavaScriptでインデックス型の全文検索エンジンを作ってみた。全文検索エンジンを作る際に問題となるのは、インデックスデータを部分的に読み込む方法である。通常はmmapやpreadなどを使ってファイルの一部を部分的に読み込むのだが、もちろん、ブラウザには使えない。ブラウザでファイルの一部分を読み込むには2通りの方法がある。1つは、ファイルを多数のファイルに分割する方法であり、もう1つはHTTPリクエストのRangeヘッダを利用して、ファイルの一部を取得する方法である。前者の利点は、ブラウザのキャッシュが効くことや、対応ブラウザが多いことである。後者の利点は、ファイル数が少なくなるので、インデックスの管理が容易になることである。今回はRangeヘッダの実用性にも興味があったので、後者の方法を用いた。 参考ページ：最速インターフェース研究会 :: Ajaxを使ったシンプルなチャット 転置イ
最速配信研究会 - Web2.0とC10Kに関する数々の誤解
Web2.0 = Ajax/Cometなの？とかプロセスIDは今でも16ビットなの？とかはサテオキ、 個々のクライアントがサーバに要求する処理量は小さなものでハードウェアの性能上は問題がなくても、あまりにもクライアントの数が多くなるとサーバがパンクする――。これが最近Web開発者の間で話題となっている「C10K問題」（クライアント1万台問題）だ。 AjaxやCometなどのクライアント側技術に伴うサーバ側の問題に関していろいろ誤解があるようなので,書いておきたい.きっとlingrの中の人はこの記事読んでニヤニヤしてるはず. 以下、記事にないことも書いてあるのでそのつもりで. 誤解その1 AjaxによるWebアプリの台頭でサーバ側の負荷が増大する Ajaxの典型的な使い方はサーバに問い合わせてページの一部分だけを 変化させるというモノだ.これはページ全体を書き換える従来の方法と違い, すでに
地図Ｚ::簡単に地図を作成できるサイト
は、間単にGoogle Mapを利用した地図を作成できます。 道順を線で示したり、ランドマークにマーカーをつけたりできます。目的地への道順を友達に紹介したり。お店までの道順を紹介したりできます。 しかも無料で作成できます。 作成した地図はこのサイトに保存されいつでも誰でも見ることが出来るようになります。 地図をブログに埋め込んだり、印刷することもできます。 ■サンプル 東京タワーへの案内地図 エジプトの三大ピラミッド(サテライト) 作成した地図はブログやサイトに埋め込むことが可能です。 東京タワーへの案内埋め込み用 ■地図をつくる 新しく地図を作るのはこちらから（解説付き） ■掲示板 ご意見 感想 不具合はこちらに書き込みお願いします！ ■作成された地図 今までに作成された地図一覧 このサイトはGoogle Mapを利用しています。 地域検索の経緯度値はCSIS シンプルジオコーディング実
[ThinkIT] 第3回：テーブルにスクロールバーを実装する (1/3)
前回紹介したサーバ側のクラスは、データベースのインターフェースとしてはとても簡単なものでした。しかし、接続のためのメソッドなどは、JavaScriptとして出力したくありません。そのためこのクラスを元に、JavaScriptに出力するためのラッパークラスを作成するのが便利です。これにより、クライアントと通信する前にデータの整合性を取ったり、複数のメソッドを1つにまとめたりと、色々なメリットが生じます。 筆者は、これらのクラスを作成する際には、メソッド名に小文字を使っています。すると、JavaScriptには小文字でPHPメソッドが出力されるため、残りのクラスがcamelCase形式であってもわかりやすくなります。これにより、ソースコードがわかりやすくなり、JavaScriptのプロキシクラスで扱えるメソッドが一目瞭然でわかります。 今回、JavaScriptに出力するために作成したプロキシ
prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法:phpspot開発日誌
prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法 2006年12月15日- Ajax.PeriodicalUpdater - Ajaxで指定エレメントの内容を定期的に書き換える - prototype.jsリファレンス prototype.jsのAjax.PeriodicalUpdaterをIEでも正しく動かす方法。 prototype.jsのAjax.PeriodicalUpdaterとは、指定のDIV要素(例えば <div id="content"></div>)を指定秒数で定期的に上書きするための機能です。 主に、チャットなど、定期的に特定部分をAjaxによってサーバの返す値に書き換えたい場合に用います。 しかし、IEでは、 http://example.com/server.php というURLにリクエストした場合、2回目以降、キャッ
prototype.jsでクロスブラウザなWYSIWIGエディタ - AUSGANG SOFT
これは何？ prototype.jsベースで、IE、Firefox、Opera、SafariをサポートするWYSIWYGエディタライブラリです。 車輪の再発明もいいところなのですが、なるべくシンプルなWYSIWYGエディタライブラリが欲しくて作りました。 どんなもの？ ↓使ってみてください。RSSリーダーで購読されてる方は、こちらからご覧ください。 "コードを整える"のチェックをはずすとブラウザ本来のHTMLを出力します。 文字サイズの変更は、Firefoxのみ動作します。 基本コード サンプルはこちらからダウンロードできます。 まだ荒削りなので、実際に使えるかわかりませんけれど。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="crossedit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Socialbrowse - the easiest way to share and discuss links - Socialbrowse.com
http://youmos.com/news/modalbox.html