Flight by Twitter
A lightweight, component-based JavaScript framework for assigning behavior to DOM nodes.Flight A lightweight, component-based JavaScript framework from Twitter View on GitHub Overview Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we've including a simple email client demo (browse the sou
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
HTML5とjQuery Mobileを使い、わずか1週間でできたモバイル版Publickey
昨日、Publickeyのモバイル対応版「Publickey Smart Edition」を発表しました。Publickeyのモバイル対応はずっと課題だったのですが、jQuery Mobileが登場したとき「これで簡単にモバイル対応ができる」と思い、jQuery Mobileが安定するタイミングを待っていました。 8月に「そろそろ大丈夫だろう」と思って開発を始めたところわずか1週間程度でモバイル対応ができあがってしまい、今週jQuery Mobileのβ3が出てフィーチャーフリーズになったのに合わせて試験運用を開始しました。 Publikceyのモバイル版の開発は、おおむね3つのステップ「モバイル用HTMLの生成」「jQuery Mobileによるタッチインターフェイスの構築」「小さな画面に合わせた画像縮小」から構成されています。ここではその裏側を少し紹介しましょう。 CMSでモバイル用H
ベターJavaScript!? CoffeeScriptが注目されるワケ：Rails Hub情報局：エンジニアライフ
JavaScriptへコンパイルして実行することを前提としたスクリプト言語「CoffeeScript」がちょっとした注目を集めています。CoffeeScript自体は2009年末に登場し、その1年後の2010年12月にバージョン1.0がリリースされていますが、注目を集めたのは、数日前（2011年4月13日）にRuby on Railsの生みの親であるDHHが、次期バージョンのRails3.1でjQueryやSCSSと合わせて、CoffeeScriptをデフォルトとして採用するとTwitter上で発言して議論が巻き起こったからです。 Yes, it's true, Rails 3.1 is going to ship with CoffeeScript and SCSS in the box for use with the new asset pipeline. It's bad ass.
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」:phpspot開発日誌
画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 2011年01月31日- Activity Indicator 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」。 通常こうしたローディングイメージを実装するにはアニメーションgif等で対応しますが、このプラグインを使うと、画像なしに綺麗なアニメーション付きの読み込みエフェクトを実装出来ます。 SVGやVMLを使ってクロスブラウザで動作するように設計されており、なんとIE6等でもＯＫだそう。 背景が何色だって気にする必要もありません。 関連エントリ クリックした位置にそのままローディング画像を出せるjQueryプラグイン「Spinner」 現在ローディング中であることをマウスカーソル近くにちょこんと可愛く出せる「prettyLoade
MOONGIFT : jQueryベースのカレンダープラグイン「FullCalendar」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
スケジュールソフトウェアに対する需要は意外と多い。グループウェアのような多彩な機能をもつものではなく、ただiCalファイルを読み込んで表示するだけのものといったシンプルな使い方ができるものに対する需要がある。 ドラッグアンドドロップでスケジュールを変更できるカレンダー ただ表示するだけなら問題ないだろうが、そこにちょっとした編集機能を付けるとなると面倒になる。そこで試したいのがFullCalendarだ。 今回紹介するオープンソース・ソフトウェアはFullCalendar、jQueryベースのAjax対応カレンダープラグインだ。 FullCalendarはその名の通り、フルサイズで提供されるカレンダーシステムだ。とは言え実際にはCSSで幅を制御しているので、小さなサイズにすることもできる。JavaScriptベースで、次の月/前の月への移動がページ遷移なしで行える。 サイズを小さくすること
Googleカレンダーライクな動作を実現するにはこれ·dhtmlxScheduler MOONGIFT
GoogleがAjaxを頑張りすぎているせいで、一般的なWebシステム開発においてもAjaxを多用したシステムが求められるようになっている。特に表計算やカレンダー、メールなどそれまでローカルで使っていたものを置き換えようとした際に起こる問題だ。 カレンダーを導入しようと思った時に「Googleカレンダーみたいにドラッグできないの？」なんて言われたことはないだろうか。そんな時にはdhtmlxSchedulerの採用を検討しよう。 今回紹介するオープンソース・ソフトウェアはdhtmlxScheduler、JavaScriptによるカレンダーライブラリだ。 dhtmlxSchedulerはまさにGoogleカレンダーライクな操作が可能になっている。ドラッグして予定の時間を選択すれば、タイトル入力欄に変わる。そこで予定のタイトルを入れれば完了だ。編集ももちろんできる。表示は日/週/月と切り替えるこ
スマートフォン最適化サイトの本命か·jQuery Mobile MOONGIFT
jQuery MobileはjQuery公式が開発したスマートフォン向けサイト開発用ライブラリ。 MOONGIFTはこう見る jQuery Mobileは数ヶ月前に開発が発表され、ついに1.0α版が登場した待ちに待たれたライブラリ。既に幾つかこの手のライブラリはあるが、本家が打ち出してくる以上、人気は集まるだろう。既に機能も多いので、大抵のスマートフォンサイトならこなせそうだ。 jQTouchは不具合とは言わないまでも、利用に際してはコツを掴む必要があった。jQuery Mobileはぜひそのテツは踏まず、PC向けライブラリ同様の使い勝手を維持してほしいと願ってしまう。 jQuery MobileはJavaScript/jQuery製のオープンソース・ソフトウェア。iOS、特にiPhone/iPad用のWebサイトを作るための専用ライブラリは数多い。最適化され、iPhoneなどで見やすい画
[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル
ツールチップのスクリプトやプラグインは、数多くリリースされています。 ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。 Simple Tooltip w/ jQuery & CSS デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 1. マークアップ -HTML 2. スタイル -CSS 3. エフェクト -jQuery 4. スクリプトのロジック 5. 注意点 1. マークアップ -HTML マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。 メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入ってるので参考程度に・・ Horizontal Subnav マウスオーバーでサブメニューがプルダウンするcssメニューです。サブメ
半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」:phpspot開発日誌
A Zoomable jQuery Image Gallery Called jPhotoGrid 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」が公開されています。 LightBoxのようなものですが、サムネイルから直接、オリジナルの画像へとアニメーション表示されます。背景部分が半透明なのがなかなかクールです。 黒の背景にいい感じにマッチしそうなギャラリーになってます。 関連エントリ 拡大の仕方がクールなLightBox実装jQueryプラグイン「YoxView」 表示法が新しくセクシーなLightBox「SexyLightBox」 カスタマイズできる多機能LightBox「Lightview」
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」:phpspot開発日誌
これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」 2010年01月26日- jQuery.sheet これは凄い、Excelの関数も使えちゃうスプレッドシート実装jQueryプラグイン「jQuery.sheet」。 参照に対応していて、A1 に 2 が入っていたとして、A2に「=A1*2」とするとちゃんと4と表示されたり、色々なおなじみのExcel 関数(ABS, AVERAGE, CEILING, COUNT, IF, MAX, MIN, PI, ROUNDなど)をそのまま使うこともできてしまいます。 デモページ 単にソート機能がついたり、そのまま編集できるだけではなく、本当にExcel っぽいところがすごいですね。 デザインは上記固定ではなく、色々なデザインテーマを適用することもできるようです。 あと、実装もjQueryプラ
基幹システムのテーブル表示などで役立ちそうなRailsプラグイン·jQuery grid plugin MOONGIFT
jQuery grid pluginはRuby製のオープンソース・ソフトウェア。企業システムでもRailsを使って構築するケースが増えてきた。安定してきたのに加えて開発効率が高いことが選ばれる要因になっているのだろう。そして基幹システムで良くあるのがデータのテーブル表示だ。 高機能なテーブル表示 テーブル表示して終わりかと言えばそんなことはない。データを選んで一括処理したり並び替えたり絞り込みをしたりと一覧表に対する要望は多い。一つ一つ実装していると工数がとても膨らんでしまうだろう。そこで使ってみたいのがjQuery grid pluginだ。 jQuery grid pluginはRailsのプラグインでデータのテーブル表示に加えてその操作が一つにまとまって提供される。カラムを使った並び替え、Ajaxを使ったページネーション、表示件数の変更、検索機能など何でもござれだ。 インライン編集（
へぼへぼCTO日記 - javascriptからsocketが扱えるJSocketを作りました
javascriptからsocketを扱いたいなぁという事象が発生したんですが(それについては別エントリで)、SocketJSというのがあるんですがDownloadするところがなぜかSSLになっていてCAがCAcertでfirefoxだとデフォルトでは見れないので、かっとなって自分で作ってみました。今も反省していません。 コードはgithubからどうぞ。 使い方はjs/jsocket.jsに軽く書いてあります。 /* * Jsocket - Socket on Javascript * Author: Masahiro Chiba * Depends: * - jQuery: http://jquery.com/ * - jQuery TOOLS - Flashembed: http://flowplayer.org/tools/flashembed.html * SYNOPSIS:
jQBinder, ブラウザー側でのHTML templateを可能にするjQuery plug-in
一昨日はMVCの話で妙に盛り上がってしまったが、考えてみるとModel/View/Controller間の分離が不十分という話はサーバー側だけの話ではなく、クライアント側にも言える事。事実、私自身も div.innerHTML = "<span class='red'>" + message + "</span>"; みたいなHTMLが混ざったJavaScriptコードを書く事は良くある。特に、最近はJSONとして取得して来たデータセットをリストとして表示するケースが増えて来たが、そんな時に「サーバー側のようなHTMLテンプレートが使えたらいいな」と思う事は良くある。手っ取り早くとりあえず動くものを作るのにはHTML埋め込み型のJavaScriptで良いのかも知れないが、後々のメンテナンスを考えると少なくともModelとViewぐらいはキチンと切り話しておいた方が良い事は確か。 ということ
便利！jQueryのアクションをビジュアル的に作成する·IxEdit MOONGIFT
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ！ 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site Under Maintenance
フォームのテキストエリアをより使いやすくするテクニック集