タグ

script.aculo.usに関するlizyのブックマーク (27)

  • script.aculo.us - web 2.0 javascript

    This is a bugfix release that bumps script.aculo.us to version 1.9.0. Most importantly, the included Prototype 1.7 provides performance and compatibility improvements with the latest browsers. One other fix is includes, that makes the script.aculo.us loader work better if you use script tags in the BODY of your page. Download at http://script.aculo.us/, or grab/fork the source at http://github.com

  • Prototype & script.aculo.us

    prototype.jsとscript.aculo.usが持つ豊かな機能を実用的なサンプルコードを多用しながら解説します。初心者はライブラリの使い方だけでなく、PHPRubyRuby on Railsといったサーバサイドの定番技術と組み合わせて使う方法も学ぶことができます。パワーユーザーであればライブラリの設計哲学を学ぶとともに、自分のニーズに合わせてライブラリを拡張する方法や、ライブラリ開発に貢献する方法についての理解を深めることもできるでしょう。prototype.js 1.6、script.aculo.us 1.8対応。 監訳者まえがき 推薦の言葉 賞賛の声 まえがき I部 Prototype 1章 Prototypeを理解する 1.1 Prototypeとは何であり、何ではないか 1.2 プロジェクトでPrototypeを使う方法 1.2.1 Prototypeの入手方法 1.

    Prototype & script.aculo.us
  • 第9回 unittest.js(前編) | gihyo.jp

    Ruby on RailsがリポジトリをGitHubに移したのにあわせて、Script.aculo.usも、リポジトリとWikiを移転しました。私もこれからGitを覚えようと思っています。 今回解説するunittest.jsは、JavaScript用のテストライブラリです。たくさんの種類のアサートが用意されているのが特徴です。テストの結果はきれいな表組みになって、成功、失敗の数や、エラーの理由が、一覧表示されます。機能はそれだけにとどまらず、テストとテストの間に指定時間のウェイトを挟む機能、マウスの動きやキーボードイベントをシミュレートする機能、処理時間を計測する機能もあります。さらに、これは実験的にですが、RSpecのようなBDDスタイルの記述をサポートしています。 Script.aculo.us自体も、このライブラリを使って入念なテストが書かれています。このテストは、単純にバグを減らす

    第9回 unittest.js(前編) | gihyo.jp
  • Script.aculo.usのコントロールでWebアプリケーションをもっと使いやすく:CodeZine

    はじめに 筆者はDevXの以前の記事で、動的なWebアプリケーションの開発に役立つJavaScriptフレームワーク「Prototype」を取り上げましたが、その記事の最後で、PrototypeをベースにしたUIライブラリであるScript.aculo.usについて少し触れました。稿ではScript.aculo.usが提供するオートコンプリータ、インプレースエディタ、スライダというWebコントロールについて説明します。 Script.aculo.usは大きなライブラリなので、1つの記事で網羅的に説明することはできません。しかし、稿の説明を読めば、Script.aculo.usのWebコントロールを利用してエンドユーザーエクスペリエンスを向上させることができるでしょう。環境のセットアップ まずブラウザでPrototypeのホームページにアクセスし、最新バージョン(稿の執筆時点では1.6

  • 第2回 controls.js(前編)Autocompleter | gihyo.jp

    今回と次回は、script.aculo.usの中でも斬新なGUI部品のライブラリが詰まっているcontrols.jsを解説します。 controls.jsには、Autocompleter(入力補完機能)と、次回解説予定のInPlaceEditor(その場で編集機能)が入っていますが、それぞれに依存関係はありませんので、回ごとに別々にお読みいただけます。 入力補完機能を加えるAutocompleter 今回は、ブラウザの入力エリアに入力補完(オートコンプリート)機能をつける、Autocompleterというライブラリのコードについて解説します。ブラウザが持っている入力補完機能は貧弱で、ユーザが過去に入力したものしか補完してくれません。検索窓については、Googleサジェストが、膨大な検索インデックスから検索頻度や人気度をもとにユーザの入力を予想し補完してくれるおかげで、ずいぶん便利になりまし

    第2回 controls.js(前編)Autocompleter | gihyo.jp
  • 【連載】いまからはじめるScript.aculo.us (6) 実行テストとクリックのシミュレーション | エンタープライズ | マイコミジャーナル

    JavaScriptプログラム開発では、テスト環境が限られることが多い。また、Webブラウザごとに動作を確認しなくてはならないこともある。それなら、ライブラリ自身にテストツールが用意されていれば、テストの手間がいくらかでも軽減できるのではないか。 そこで連載の最後となる今回は、Script.aculo.usが持つテスト関連機能を取り上げる。バージョン1.8.1、Windows環境の場合で説明する。 テスト関連機能の概要 Script.aculo.usのテスト関連機能は、unittest.jsというファイルにソースコードが記述されている。注意すべきは、このファイルはscriptaculous.jsの自動ロードに対応していないことだ。つまり、このファイルを用いるときは、必ず<script>で読み込まなくてはならない。 このとき、以下のa.のようにファイル名を直接指定してもよいし、b.のようにl

  • 第1回 scriptaculous.js | gihyo.jp

    はじめに script.aculo.usは、Web 2.0なサイトを簡単に作れるJavaScriptライブラリです。 Thomas Fuchs氏を中心に、2005年にMITライセンスで公開されてから、現在にいたるまで、活発な開発が続けられています。 AppleやGucciといった、テクノロジとデザインに敏感な企業のWebサイトに導入された実績があります。 script.aculo.usというと、Web2.0なデザインを簡単に実現できるライブラリとして、派手なエフェクトにばかり注目が集まりますが、Ajaxを使った入力補完やドラッグアンドドロップなど、ユーザビリティの向上に大きな威力を発揮する点も見逃せません。 prototype.jsに大きく依存しているのも特徴のひとつです。 この連載では、script.aculo.usを読み解き、これらの機能が、いったいどんなコードで実現されているのかを解

    第1回 scriptaculous.js | gihyo.jp
  • 【連載】いまからはじめるScript.aculo.us (5) Ajaxを用いたコンポーネント | エンタープライズ | マイコミジャーナル

    Script.aculo.usには、Ajaxを利用した動作を行うコンポーネントが存在する。今回はそれを紹介したい。バージョンは引き続き1.8.1だ。オプションなどの詳細はWikiページを参照していただきたい。なお、実行画面はIE7で示す。 ローカルデータで自動補完 - Autocompleter.Local まず、Ajaxとはいってもサーバにはアクセスせず、JavaScriptプログラム内に持ち合わせたデータで自動補完を行うAutocompleter.Localから紹介しよう。 自動補完とは、ユーザーがフィールドにデータの一部を入力したら、実際のデータの候補をフィールドの近くで自動的に表示させるものだ。 図1は、ユーザーが「Ja」まで入力しているとき、候補として「Java」「JavaScript」の2つを示しているところだ。これらはクリックや矢印キーで選択できる。こうすることで、ユーザーは

  • 【連載】いまからはじめるScript.aculo.us (4) ドラッグ&ドロップを応用した画面コンポーネント | エンタープライズ | マイコミジャーナル

    前回はドラッグ&ドロップを実現する方法を紹介したが、今回はそれを応用した画面コンポーネントであるSortableとSliderを使ってみよう。なお、今回は都合によりメソッドやオプションをごく一部しか紹介できない。詳細は画面コントロールのWikiページを参照していただきたい。 項目の並べ替え Sortable.create( IDまたはDOMオブジェクト [, オプション] ); // 並べ替え可能にする Sortable.destroy( IDまたはDOMオブジェクト ); // 並べ替え不能にする Sortableは、<ul>などで列挙した項目をドラッグによって並べ替えられるようにする。項目をドラッグしている間は、その表示位置のみが変更されるが、ドロップ後は、その位置に最も近いところにHTMLタグの構成も変更される。 【例】「マイコミジャーナル」という項目をドラッグで最上行に移動する

  • 【連載】いまからはじめるScript.aculo.us (3) ドラッグ&ドロップの実現 | エンタープライズ | マイコミジャーナル

    前回までにさまざまな演出効果を紹介してきた。今回からはScript.aculo.usのコンポーネントを紹介していきたい。最初はドラッグ&ドロップを実現するDraggableとDroppablesだ。 なお、Script.aculo.usのバージョンは、新年早々にリリースされた1.8.1である(CHANGELOG)。詳細はWikiページで確認していただきたい。なお、紹介するオプションはすべて省略可能だ。 要素をドラッグ可能にする new Draggable( IDもしくはDOMオブジェクト, { オプション } ); マウスのドラッグによって、要素の位置を移動できるようにする。ドラッグ中の要素はデフォルトで透明度が0.7に設定されるが、この動作はstarteffect, endeffectオプションを上書きすることで変更できる。 [主なオプション] 名称 値の内容 デフォルト revert

  • 【連載】いまからはじめるScript.aculo.us (2) 複合的な動きによる演出効果 | エンタープライズ | マイコミジャーナル

    前回は基的な演出効果を実現する方法を紹介した。今回はそれらを組み合わせて複合的な動きをする演出効果を紹介したい。Script.aculo.usのバージョンは引き続き1.8である。詳細はWikiページで確認していただきたい。 なお、オプション以外で省略可能な記述は[〜]で表す。オプションはすべて省略可能だ。また、画面上での動作を示すために、要素の元の大きさを点線で示す別の要素を重ねて表示させている(画像はInternet Explorer 7で実行したもの)。 表示済みの要素に動きを与える Effect.Shake( IDもしくはDOMオブジェクト, { オプション } ); または $( IDもしくはDOMオブジェクト ).shake( { オプション } ); 左右に揺れる。durationとdistanceを短く設定すれば、ブルブルと震えてあたかも首を「イヤイヤ」と横に振っている

  • Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト

    Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト:パターンとライブラリで作るAjaxおいしいレシピ(4)(1/4 ページ) script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax(JavaScript)フレームワークです。 ビジュアルエフェクト ドラッグ&ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し

    Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト
  • [rails plugin] javascript_test - script.aculo.usのunittest.jsでTDD&BDD:TKMR.blog.show

    [rails plugin] javascript_test - script.aculo.usのunittest.jsでTDD&BDD JavaScript Rails 2008-01-06 via Dr Nic - Autotesting Javascript in Rails script.aculo.usのunittest.jsを使ったRailsプラグインの javascript_test なかなか良さそう。generatorでテストのひな形作成、auto_testに対応してくれる。unittest.js単体もBDD的な記述、ベンチマーク、辺りが良い。 #インストール ruby script/plugin install javascript_test mkdir test/javascript ln -s vendor/plugins/javascript_test/assets

  • script.aculo.us付属のユニットテスト(unittest.js)の使い方 後編 - Yaks

    前回に引き続き、script.aculo.usに付属の ユニットテスト(unittest.js)の使い方です。 今回は、ベンチマーク関数やマウス、キーボードのシミュレート関数の使い方を解説していきます。 benchmark関数 benchmark関数は、前回挙げた assert系とはちょっと動きが異なり、その名の通り、任意の関数のベンチマーク(処理時間の計測)を取るために使います。 benchmark( func [, times] ) funcを timesで指定した回数だけ実行し、処理にかかった時間をログに表示します。timesを省略すると、一回だけ実行されます。 例えば、こんな感じで使います。 var domOperation = function(){ var div = document.createElement( 'div' ); document.body.appendCh

  • script.aculo.usのUnitTestの使い方 前編 (Yak blog)

    Javascript用のテストライブラリを探していたのですが、そういえば script.aculo.usについてるじゃん、と思い見てみるとなんか使えそう。 じゃあもう少し詳しく調べて・・・みようと思ったら、資料があんまりない。公式サイトのドキュメントもめっちゃ書きかけ。 しょうがないので、結局 script.aculo.us自身のテストを読むことに・・・ というわけで、せっかくなので UnitTestの使い方の解説をしてみようと思います。なんかここんとこ技術系の話題に向きが振れ気味。そしてまた 2回にわかれます・・・ 1.用意するもの とりあえず script.aculo.usの一部なので、ベースとなるprototype.jsは必須です。 script.aculo.usに最新の prototype.jsが同梱されているので、それを使えばよいでしょう。 というわけで、prototype.js

  • Prototype/Sciptaculousをギュッと圧縮1割超、入替検討を | エンタープライズ | マイコミジャーナル

    Webアプリケーション開発者にとって、1ページあたりのダウンロード容量を最小限に抑えつつ最大限の効果をあげるのは大きな課題のひとつだ。使うライブラリを増やせばそれだけ高度な機能が使えるが、最初にページを開く際にダウンロードすべきデータの量も増えてしまう。初見でこのサイトは重いと思われることは、Webアプリケーションとしてはなんとしても避けたい。 JavaScript Ajaxアプリケーションフレームワークとしてここ数年、常に高い人気を誇ってきたフレームワークはPrototypeとSciptaculousだ。20日(米国時間)、John-David Dalton氏はPrototypeとSciptaculousを圧縮したファイルの最新版「protopacked_v2.17」を公開した。 protopacked_v2.17に含まれているのはPrototypeのv1.4、v1.5、v1.5.1.1

  • 【連載】いまからはじめるScript.aculo.us (1) 概要と基本的な演出効果 | エンタープライズ | マイコミジャーナル

    Script.aculo.usは、Thomas Fuchs氏を中心とするチームにより開発されているJavaScriptライブラリだ。MITライセンスが採用されており、2005年から公開を始め、執筆時点では11月に公開されたバージョン1.8が最新版になる。稿では、そのバージョン1.8を使って(連載継続中にバージョンアップした場合はそちらに変更する可能性がある)、同ライブラリの基を6回にわたって紹介しよう。 なお、Script.aculo.usを扱ううえでの必須知識となるPrototype.jsの使用法については、連載『いまからはじめるPrototype.js』で解説しているので、そちらをご覧いただきたい。 Script.aculo.usの概要 Script.aculo.usはPrototype.jsをベースに動作するライブラリだが、Prototype.jsが1つのファイルにすべての機能を

  • script.aculo.us 1.8.0登場、すべてのユーザにアップグレードを推奨 | エンタープライズ | マイコミジャーナル

    script.aculo.us 1.8.0 登場 6日(ドイツ時間)、script.aculo.usの最新版となる「script.aculo.us 1.8.0」が公開された。script.aculo.usはJavaScriptで開発されたAjax Webアプリケーションフレームワーク。The MIT Licenseのもとで提供され、Prototypeに対してアニメーションフレームワーク、ドラッグ&ドロップ機能、Ajax制御機能、DOMユーティリティ、ユニットテストなどの機能を追加する役割を担っている。プラグインとして機能するため、基的にscript.aculo.usを使う場合にはPrototypeも使うことになる。 1.8.0はひとつ前の1.8.0 preview 0からとくに大きな変更はない。多少の変更と、同梱するPrototypeが1.6.0 finalに変更された程度だ。すべてのs

  • 人気のAjaxフレームワーク"script.aculo.us"、1.8へ向けたプレビュー版公開 | エンタープライズ | マイコミジャーナル

    script.aculo.usの主要開発者であるThomas Fuchs氏は12日(ドイツ時間)、次期script.aculo.usへ向けたプレビュー版となる「script.aculo.us 1.8 preview 0」を公開した。script.aculo.usはJavaScriptで開発されたAjax Webアプリケーションフレームワーク。Prototypeに対するアドオンとして機能する。プロダクトはThe MIT Licenseの下で提供され、Prototypeに対してアニメーションフレームワーク、ドラッグ&ドロップ、Ajax制御、DOMユーティリティ、ユニットテストなどの機能を追加する。 script.aculo.usの最新安定版は2007年1月19日(ドイツ時間)にリリースされたscript.aculo.us 1.7.0。script.aculo.us 1.8 previewは次期

  • クールで滑らかに動作するscript.aculo.usベースのアコーディオンUI「Accordion v2.0」:phpspot開発日誌

    クールで滑らかに動作するscript.aculo.usベースのアコーディオンUI「Accordion v2.0」 2007年09月25日- Accordion v2.0 Demo クールで滑らかに動作するscript.aculo.usベースのアコーディオンUI「Accordion v2.0」。 おなじみのアコーディオン風に伸縮するUIをscript.aculo.us で実装するライブラリが公開されました。 実装は、ライブラリの読み込み&DIVの定義をおこなったあと、次のようなコードで初期化するのみです。 // Horizontal example var horizontalAccordion = new accordion('#top_container', { classNames : { toggle : 'horizontal_accordion_toggle', toggleAc