Natalie Downeから、PDF、MP3、DOCファイルなどにリンクした際、自動でファイル容量を表示するスクリプト「addSizes.js」を紹介します。 addSizes.js Snazzy automatic link file-size generation デモ addSizes.jsでファイル容量を表示するのは簡単で、「addSizes.js」と「jquery.js」を外部ファイルとして設置し、PDFファイルへのリンクを「http://」から記述するだけです。 ※リンクの記述は、絶対パスのみ有効です。 対応ファイルは初期設定では、「.pdf」「.doc」「.mp3」「.m4u」となっています。 他の種類のファイルを追加する場合は、addSizes.jsのL.2に追加します。 例：「.jpg」を追加する場合 <textarea name="code" class="js" c

こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです

NDC10分類記号またはキーワードを入力してください。 リスト上でクリックすると、クリックしたNDC10分類記号が入力欄に入力されます。 「蔵書検索」ボタンを押すと、NDC10分類記号を用いて 大阪公立大学図書館OPAC 、または 国立国会図書館サーチ で蔵書検索を行います。 大阪公立大学図書館OPAC 国立国会図書館サーチ

Leightbox I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. 同一画面内でポップアップウィンドウを開くGreyBox というのを先日紹介しました。 GreyBoxはポップアップ内容をJavascriptとIFRAMEを使って動的にページにロードしていましたが、 LeightBoxではページ内HTMLに記述されている特定のdiv要素をLightBox風にポッ

TurboWidgets, presented by TurboAjax Group TurboWidgets are JavaScript client-side controls that provide a rich user-interface experience for AJAX-style web applications. 以前紹介した、AjaxなphpMyAdmin のページで、TurboWidgetsというAjax部品集がリリースされていたので紹介。 例えば、次のイメージはTurboGridというコンポーネント。かなりクオリティ高いです。 その他にも、次のようなプログレスバー(ぐんぐん伸びるイメージがカッコいい) 高品質なボタンコンポーネント集(一見デスクトップ風) ツリービュー(アイコン表示できる) タブコンポーネント(Appleのサイトっぽい) ドラッグアンドドロッ

via O’Reilley Radar Yahoo! UI Library で、Yahoo! が実際に使っている Javascript のライブラリ集が公開されている。 Yahoo! のどこでこんなユーザインタフェースが使われてるんだろう? と思うぐらい、サンプルで見せられる UI パーツは豊富だ。それぞれの “Example” を見てまわるだけでもおなかいっぱいだ。 コアユーティリティ アニメーション クロスブラウザ対応の XMLHttpRequest ラッパ DOM 操作 ドラッグアンドドロップ イベントハンドリング UI コントロール部品 カレンダー スライダー ツリー ドラッグアンドドロップなんかは、ファンタジースポーツで使われているのを見たことがあるので知っていた。複数のリスト間でアイテムの移動や並べ替えを行うときには使えるパーツだろう。 日本語カレンダーなんかも、いい感じで再利

● [Rails] IPE (In Place Editor) In Place Editor は表示された項目をクリックすることで、そのまま編集モードに移行してしまう Ajax の便利機能です。SoftwareDesign(2005-12) やsecondlife さんのページの TODO デモを見て衝撃を受けた人も多いでしょう。controls.js に含まれていますので、 new Ajax.InPlaceEditor( element, url, [options]); と直接 JavaScript を記述して利用することもできますが、Rails ではヘルパが用意されていますのでそちらを利用してみます。

amix.dk : GreyBox - a pop up window that doesn't suck GreyBoxを使えば、同一ページ内で別のページをポップアップ表示することが可能です。 次のような感じでGoogleもLightbox.jsを使った時っぽく開けます。 右上のclose windowボタンでポップアップを閉じることが出来ます。 デモはこちら （Launch Google でGoogleが開きます） ページに組み込むのも簡単で、必要ファイルをインクルードした後、次の関数を呼び出すだけでOK。 GB_show(caption, url, height, width) 例: <a href="#" onclick="GB_show('Google', 'http://google.com', 470, 600)">Launch Google</a> 新しいウィンドウをtar

このページはAjaxを勉強してみたい人向けの学習用ページです。サーバーを入れ替えたため一部CGIを使用したものが動作していません。時間のある時に修正します。また、書いてから、かなり時間が経過しているため内容的に古いものもあります。ご了承ください。 Ajaxで利用されるエフェクトに関しては別ページ(Ajax Effect)に移動しました。 Ajax関連書籍に関してはAjax関連書籍一覧ページを用意しました。 Prototype系ライブラリ サンプルプログラム【New !!】のページを用意しましたので、Prototype系のライブラリを利用している方は参考にしてみてください。 ミスや間違いなどがありましたらopenspc@po.shiojiri.ne.jpまでお願いします。 第一章　Ajaxって？ AjaxとRIA AjaxとDHTML AjaxとFlash Ajaxに必要な知識と技術 Aja

2006.1.15 試作品の作成開始 2006.1.22 だいぶ出来てきた 2006.2.5 β版公開 2006.2.25 郵便番号によるアドレスマッチング機能追加 2007.9.16 API ver2.0にやっと対応、文字化け問題修正 Google Mapsで遊ぶため+Ajaxの勉強用に作成したサイトです。 まだ作りこみの足りない所はありますが、とりあえずβ版として公開します。 無料ですのでぜひ使ってみてください。 ユーザー登録をすれば、あなた専用の地図が作成できます。地図には複数のマーカーを設置でき、各マーカーには情報ウィンドウを表示できます。 マーカー位置は、経度緯度の直接入力はもちろん、郵便番号や住所、駅名、地名、公共施設名の入力でも指定可能です。 情報ウィンドウの内容はHTMLで自由に記述できます。 マップは公開、非公開の選択が可能で、非公開のマップを閲覧するにはパス

Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES

年の暮れだからこそ、今年の技術的なトレンドへ乗り遅れないように復習をしたいもの。 Web2.0が脚光を浴びた2005年。とりあえずこの5つの分野から苦手分野をきっちり潰していきたいと思います。（多分にぼくの偏見と苦手分野の重視が影響している点はご了承ください。） Ajax Ruby on Rails HTML/CSS Javascript 正規表現 ということで、おすすめの書籍やサイトを総括。 Ajax 2005年はこれしかないでしょう。猫も杓子もAjaxと連呼した年でした。 Ajax: Web アプリケーション開発の新しいアプローチ http://antipop.gs/docs/translations/ajax.html これがなくちゃ始まらないですから。 Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ http://satoshi.blogs.com/life

* Ajaxという未来をWEBという歴史にどう接続するか Pragmatic Ajaxという本のベータ版が公開されている。これはAjaxという今最も注目されているWEBの技術についての解説書だが、徹底的に技術指向でありながら、深く考えさせる内容を含んでいる。 技術解説書というのは、読者に新しい技術を勉強させよう目論むものだから、「Ajaxって凄いよ!あれもできるよ!これもできるよ!こんなに嬉しいよ」という話に終始しがちなのだが、この本の最後の「7.2 It isn’t all Just Wine and Roses...」という章は、Ajaxの暗黒面に焦点を合てている。 技術の長所と同時に短所もきちんと理解して使うのが、まさに " Pragmatic "なやり方なのだが、同時に、そこには「未来をどうやって歴史に接続するか」という、技術を超えた難問に対する思索の結果が見えてくる。 この章は、

Ajax うきうき Watchでは、Ajaxを使ったWebアプリケーションやサービス提供者、ベンダの動向から「うきうきするような」面白いもの、確実に押さえておきたいものを厳選してお届けしていきます。 Ajax、それはWebアプリケーションのユーザビリティを改善する切り札である。古い技術を組み合わせ、魔術のごとく生まれ変わった新しいファッションである。 今回より、なるべく密に、Ajaxの動向をウォッチングしていきたいと思う。 基本的には、新しい話題を中心に、厳選した面白い話題を提供していきたいと思うが、今回だけは初回でもあり、これまでのAjaxに関する話題から面白いもの、確実に押さえておきたいものをピックアップしてみたい。 なお、ここでは主に日本語で読める情報について取り上げていく。ただし、特に重要なものについては、英語の情報を扱う場合がある。 Ajax: Web アプリケーション開発の新し

ホリデープログラミング第3弾もAjax。本当は先週できていたのですが公開が遅くなってしまいました。 ytab（サンプル） 最近公開されたYahoo!のAPIを利用した検索です。インターフェイスをちょっと工夫。 検索エンジンを使っていてときどき「ぁ、さっき検索した結果が見たいな」と思ったときにブラウザの戻るボタンでは発見できず、検索語に何を使ったか覚えていないと悲しいときがあります。それを解消すべくタブブラウザのように検索結果をタブでどんどん保存しておける、という仕組み。 yahoo.phpのソースは以下。他はJavaScriptなので直接上記サンプルのソースをご覧ください。設置はindex.phpとyahoo.phpを置くだけ。IEとFirefoxで動作確認しています。 <?php define("YAHOO_APPID", "redcruise"); define("YAHOO_LANG