2009年3月 便利なjQueryプラグイン集:phpspot開発日誌
10 Best jQuery Plugins - March 2009 | AjaxLine 2009年3月 便利なjQueryプラグイン集。 怒涛の如く、どんどん出てくるjQueryプラグイン。追うのも大変ですが、色々簡単にできるようになるのは開発者としては嬉しいですね。 jQuery Sparklines ミニグラフを描画できるプラグイン Internal Links 内部リンクの場合にアイコンをつけるプラグイン Boxy FaceBookスタイルのオーバーレイダイアログボックス uploadify - a file upload plugin for jQuery 複数アップロードも可能なリアルタイムアップロードプラグイン jQuery Grid plugin 多機能グリッドの実現が出来るプラグイン リンク先のBoxyとうプラグインのサイト、現在は消えているようですが、マルウェア発見
JavaScriptで任意の場所にスクロールバーを付ける·jScrollPane MOONGIFT
JavaのSwingにあるJScrollPaneクラス。ウィンドウをはじめとした他のコンポーネントにスクロールバーの機能をつけることができる。これにより狭い範囲であっても多くの情報を載せられるようになる。 スキンにも対応したスクロール機能を提供する Webページでもそれは同様だ。溢れてしまった文字の扱いをどうするかCSSで設定するのがoverflowだが、それをもっと高機能にしたのがjScrollPaneだ。 今回紹介するオープンソース・ソフトウェアはjScrollPane、jQueryプラグインのスクロールプラグインだ。 jScrollPaneはDivタグに対して使う機能で、文字がはみ出した場合にスクロールバーを付けてくれるプラグインだ。スキン機能に対応し、Windows XP風やMac OSX風を使えたり、スクロールバーを一般的な右側でなく、左側にもうけることもできる。 多段のスクロー
Aptanaで始めるJavaScriptライブラリ「jQuery」超入門
JavaScriptライブラリ「jQuery」とは？ 最近、Flashの代わりにJavaScriptを利用してリッチなデザインのWebサイトを構築する事例が増えてきました。特にグーグルのサービスは、JavaScriptをうまく取り入れている例として誰もがご存じでしょう。 例えばGoogleマップは、Webブラウザ上でマウスをドラッグ＆ドロップするだけで、地図を自由に操作できます。このような操作感は、まるでWebサイトであることを意識させない作りになっています。 本来、JavaScript自体はインターネットが広まり始めたころから存在していて、決して目新しい技術ではないのですが、Webブラウザの種類やバージョンによって挙動が異なることから、JavaScriptを使って大掛かりな仕組みを作ることは不可能だと考えられてきました。 しかし、最近ではWebブラウザは自動的にバージョンアップされるよう
JavaScriptを活用した軽快なポータルを作るためのフレームワーク「jPolite」:phpspot開発日誌
Lightweight jQuery Portal JavaScriptを活用した軽快なポータルを作るためのフレームワーク「jPolite」. iGoogleみたいなポータルを作るようなjQueryベースのフレームワークです。 デモページ タブをクリックで画面が軽快にアニメーションでいい感じに切り替わります。 ページ内には小窓がコンポーネントとして登録できて中身に自由にHTMLが記述できます。 各ページは、１ページあたり１枚のHTMLモジュールとしてJavaScriptで定義できて、非常に簡単かつシンプルにポータルが作れるフレームワークになっています。 JSでモジュール定義の例 var _modules={ m101:{l:"m101.html", t:"Motivation", c:"red"}, m102:{l:"m102.html", t:"Philisophy", c:"yello
各種ブラウザで使えるクリップボードへのコピーライブラリ·Zero Clipboard MOONGIFT
確かIEではクリップボードのコピーをJavaScriptから実現することができる。これは便利な反面、若干の怖さもある。そのためか他のブラウザではできないようになっている。とは言え、場合によってはとても便利な機能になるはずだ。 ブラウザで任意の文字列コピーを実現するライブラリ そのブラウザからクリック一つでコピーを実現するライブラリがZero Clipboardだ。 今回紹介するオープンソース・ソフトウェアはZero Clipboard、各種ブラウザで使えるコピーライブラリだ。 Zero Clipboardではその機能実現にFlashを利用している。FlashではsetClipboardを使うことでクリップボードへの任意の文字列コピーを実現する。Zero Clipboardではその機能を提供しているので、Flashさえ使えるブラウザであればコピー機能が実現できる。 エレメントのデータをクリッ
第25回 Live Search API 2.0 ── JavaScriptからの利用 | gihyo.jp
Sourcesには複数の値を指定でき、一度のリクエストで複数対象の結果を得ることができます。例えば「Sources=Web+RelatedSearch」のように指定します。 ※１ 日本向けサービスは現在提供されていません オプションパラメータ 動作を細かく指定するためにいくつかオプションで指定するパラメータもあります。パラメータはSource共通のものとSource固有のものがあります。ここではWebで使用する主なものを紹介します。 Market 国・地域情報を指定します。日本の場合は「ja-jp」です。 Web.Count 取得する件数を指定します。デフォルトは10です。最大50まで指定できます。 Web.Offset オフセット値を指定します。デフォルトは0です。10と指定すると検索結果上位11番目からの結果を取得できることになります。最大1000まで指定可能です。 Options 「
Google、JavaScript APIを手軽に試せる「AJAX API Playground」を公開
Googleがオープンソース開発者向けにAPI情報の公開やさまざまなサポートを行っている「Google Code」で、Google AJAX APIのサンプルコードをウェブ上で手軽に試すことができる「AJAX API Playground」が公開されて話題を呼んでいる。 Googleがオープンソース開発者向けにAPI情報の公開やさまざまなサポートを行っている「Google Code」で、Google AJAX APIのサンプルコードをウェブ上で手軽に試すことができる「AJAX API Playground」が公開されて話題を呼んでいる。GoogleのエンジニアであるBen Lisbakken氏が20％タイム（*1）で開発し、1月21日に「Google Code Blog」の「Playing around with Google's AJAX APIs」というエントリで発表した。 AJAX
jQuery1.3 リリースノート - jQuery 日本語リファレンス
2009年1月14日に、jQuery 1.3がリリースされました。 主な変更点を、以下に挙げます。 概要 セレクターエンジンをSizzleに変更 jQueryのCSSセレクターエンジンが、Sizzleと呼ばれる新たなものに変更されました。 このエンジンはjQueryの生みの親であるJohn Resig氏が別に進めていたプロジェクトで、他のJavascriptライブラリでも利用されるように汎用的な設計がされています。以前よりjQueryのエンジンをこれに差し替えるモジュールは公開されていましたが、今回ついに正式に差し換わることになったようです。 Sizzleの目指す姿が、次のように端的に語られています。 最速拡張可能スタンドアロン このうち、最初に挙げた「最速」については、特に使用頻度の高い書式についてこだわっています。CSS3にも対応し、かなりマニアックな記述もできるようになっていますが、
[JS]jQuery 1.3 リリース、主な変更点など
jQuery 1.3 and the jQuery Foundation 下記、主な変更点を紹介します。 Release:jQuery 1.3 [@attr]の「@」は、無くなりました。 アップグレードの際は、「@」を削除してください。 ※この変更点により、当サイトで配布している「jquery.page-scroller.js」も「3.0.5」にバージョンアップしました。 ready()は、スタイルシートがロードされるのを待つことを保証しません。 全てのスタイルシートは、スクリプトの前にページに配置してください。 "a, b, c"のスタイルセレクターは、将来リリースされる1.3.xで変更になるでしょう。 Standards modeで、ページを作成してください。 Quirks Modeで動作しない周知の問題があります。 詳しくは、jQuery 1.3 -Changesを参照ください。
JavaScript + XMLで動作するブログシステム·FeedBlog Script MOONGIFT
ブログを専用のブログエンジンで書こうと思うと、PHPやRuby、Perlなどのスクリプト言語が必要になることが多い。静的なHTMLを出力してブログライクにすることもできるが、検索機能がなかったり一覧性+記事詳細のつなぎが悪くて使い勝手は良くない。 JavaScriptで実装されたブログエンジン そこで考え出されたのがJavaScriptによるブログエンジンだ。記述フォーマットに何を使うかと言えば、XMLを介するのだ。 今回紹介するオープンソース・ソフトウェアはFeedBlog Script、JavaScriptによるブログエンジンだ。 FeedBlog Scriptはサーバサイドのプログラミング言語は全く利用しない。全てJavaScriptで実装されている。記事の一覧やパーマネントリンク（ただしアンカー）、検索、過去記事一覧などが実現されている。 検索機能もある データフォーマットとしてX
2008年に注目を集めた使えるJavaScriptライブラリ集:phpspot開発日誌
Best of 2008 - JavaScript | Design Shack 2008年に注目を集めた使えるJavaScriptライブラリ集が紹介されていました。 どれも非常に便利でサイト構築に役立ってくれるでしょう。 sIFR Lite Javascriptでテキスト文字列を綺麗な画像にしてくれるライブラリ。 画像部分にはFlashを採用している。検索クローラーフレンドリ。 <h3>How is this different than the original sIFR?</h3> ↓ DD_belatedPNG IE6でも透過PNGに簡単に対応させられるライブラリ The EqualHeights jQuery Plugin 異なる高さのブロックを統一してくれるライブラリ ↓ DD_roundies 角丸の簡単実現ライブラリ jQuery.popeye ポップアップではなく、サイト
チェック必須！GUIインタフェースを作るようにWebインタフェースを作成できる·Sigma Visual Ajax GUI Builder MOONGIFT
Visual StudioやMS Accessの良い所は画面のデザインが誰でも簡単に作成できることだろう。そのため、整ったデザインにはならないこともあるが、それでも誰でも作成できてしまうというのは大きな利点だ。 ドラッグアンドドロップでWebアプリケーションの画面を設計できる Webの場合はHTMLを色々と修正する分、インタフェースの作成が面倒だった。そう、それは過去の話になるかも知れない。 今回紹介するオープンソース・ソフトウェアはSigma Visual Ajax GUI Builder、GUi並みの操作性でWebインタフェースを作成できるソフトウェアだ。 Sigma Visual Ajax GUI BuilderはWebアプリケーションを容易に開発することができるIDEライクなソフトウェアだ。多数のコンポーネントをドラッグアンドドロップで配置し、キャプションや値、アクションを指定でき
Firebugで探索アルゴリズムを見ていこう
Firebugで探索アルゴリズムを見ていこう：コーディングに役立つ！ アルゴリズムの基本（6）（1/4 ページ） プログラマたるものアルゴリズムとデータ構造は知っていて当然の知識です。しかし、教科書的な知識しか知らなくて、実践的なプログラミングに役立てることができるでしょうか（編集部） 今回紹介するのは探索のアルゴリズムです。探索もアルゴリズムのテーマとしてはメジャーなもので、とても重要な用語や考え方が出てきます。 あるデータの集合があったとします。それぞれのデータには、個々を識別するためのIDが付いています。このIDをキーと呼びます。このキーに対応するデータを探すのが探索です。 データベースを知っている方なら主キーで検索する動作だと思ってください。例えば、商品のリストがあり、それぞれの商品に商品コードが付いています。商品コード「7100」に対応する商品データ「トマト」を検索するプログラム
FirebugでRESTfulなDBアプリに挑戦!!（1/5） － ＠IT
これまでは、Ruby on Railsの環境づくりや、既存の表（レガシー表）に対してActiveRecordを使用する方法などを説明してきました。今回は、いよいよRuby on RailsにおけるREST（REpresentational State Transfer）に迫っていきます。Ruby on Rails2.0では、script/generate scaffoldがREST対応になったことや、ActiveResourceの標準搭載、AtomPub対応など、RESTfulサービスの実装が進みました。本稿では、RESTによるデータベース操作を、さまざまな方法で体験してみましょう。 Firebugを利用したデバッグ 本稿はスクリプトの確認にFirebugというFirefoxアドインを使用します。 Firebugを利用するにはFirefoxが必要です。お持ちでない方は、以下のURLより事前
ハタさんのブログ : Javascriptによる大規模開発の覚え書き。高速化編
前回書いた「Javascriptによる大規模開発の覚え書き」が凄いことになってました。 今回は、省略した「5.高速化せよ」について書きます。 僕にとってjavascriptは非常に高速な言語です。それは何が高速か 開発速度が高速である 開発速度、及びそこに至るまでの修得速度はとても高速です。動的言語を上手く操る開発者はもちろん、開発に不慣れな(言葉が悪いけど)新人達でさえ「動く」モノをサクっと作ってしまえる。 また、プラットフォーム(? というかブラウザ)が広く普及しているので、ググればスグに問題解決もできる。 それにローカルで簡単に作れる。javascript、それは動作環境を含めて高速です。 高速にUI操作ができる(UI操作が非常に簡単である) swingとかでUI操作をするには多くのオブジェクト操作をしなければならないけど、javascript(もといDHTML)は非常に簡単に
jQueryを使うときに気をつけるべき8のポイント : tech.kayac.com - KAYAC engineers' blog
DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryベースの多機能グリッドテーブル「DataTables」:phpspot開発日誌