カテゴリ:Ajax

2007-08-03 Fri


Ajax Webアプリケーションフレームワーク Ext 1.1 [Javascript][Ajax]


http://journal.mycom.co.jp/news/2007/08/02/047/index.html



2007-05-22 Tue


Spry(すぷらい) [Ajax][よもやま]


今日の勉強会で少し触れられていた話。Spry は Adobe の Ajax フレームワーク。「すぷらい」と読むらしい。


2006-03-10 Fri


OpenLaszlo は Flash にも Ajax にも対応 [Ajax]


OpenLaszlo
http://www.openlaszlo.org/

Flexのように、Flash コンテンツを生成することで知られていた OpenLaszlo ですが、なんと最近のリリースでは、DHTML(Ajax)版も吐き出せるらしい。

Flash版のデモ
DHTML(Ajax)版のデモ

ほとんど見分けがつかない……凄すぎ。

via http://ajaxian.com/archives/laszlo-demonstrates-ajax-runtime


2006-02-19 Sun


Scriptaculous を使ってみる [Javascript][Ajax]


先日 [2006-02-16-3] とりあえげた Javascript のライブラリ群に、Scriptaculous があります。

Scriptaculous
http://script.aculo.us/

Scriptaculous は、Prototype(Ajax とともに使われたりする Javascript Library の名前です)をベースにしたものですが、この手のライブラリを使ったことがなかったのでちょこっと勉強がてら、使ってみました。

Scriptaculous をダウンロードして解凍すると

- builder.js
- controls.js
- dragdrop.js
- effects.js
- prototype.js
- scriptaculous.js
- slider.js
- unittest.js

のように、機能別にライブラリがわかれています。たとえば、エフェクト、Draag & Dropを使いたければ <head></head> の間に

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>


みたいに、指定してやります。全機能使うんだ!ということであれば

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>


だけでよい......はず。

エフェクトとかの利用は、わりと簡単で、エフェクトを掛けたいところのタグに id を

<table id="blind-test">
<tr>
    <th>日本語</th><th>英語</th>
</tr>
<tr>
    <td>りんご</td><td>Apple</td>
</tr>
</table>


このように talbe タグに直接 id を振ってみたり、<div id="hogehoge"></div> で囲ってやったりします。

<div id="blind-test">
  <table>
  <tr>
      <th>日本語</th><th>英語</th>
  </tr>
  <tr>
      <td>りんご</td><td>Apple</td>
  </tr>
  </table>
</div>


あとは、掛けたいエフェクトからこの id を呼び出せば OK です。で呼び出し方としては、勝手に実行させる場合には

<script type="text/javascript">new Effect.BlindDown('blind-test')</script>


こんな感じで HTML 内に記述して、実行させます。クリックして実行とかをしたければ

<input type="button" value="消えたり" id="SubmitBtn" onclick="Effect.BlindUp('blind-test');">
<a href="#" onclick="Effect.BlindDown('blind-test');">現れたり</a>


というおなじみの指定でOKです。

で、実際のデモ。クリックするとテーブルがずるずると表示されたり、消えたりします(消えてるのに、また"消えたり"をクリックすると、消えっぱなしになるなぁ......そういうもの?)


日本語英語
りんごApple


上記のソースコード(HTML部分)を表示

ドラッグ & ドロップも同様に

<script type="text/javascript">new Draggable('drag-test')</script>


としてしてやれば移動できるようになります。

で、デモ。下の表は、マウスで、Drag & Drop できます。出来たところで、意味はないですが(^^;

#ドラッグ中は半透明になったりして、芸が細かい......

日本語英語
りんごApple


上記のソースコード(HTML部分)を表示

こんな感じでエフェクトはもちろんのこと、Ajax 用の機能もあったりします。そっちは、バックエンドの CGI 込みで作らないとあまり意味がないと思うので、後日遊んで見る予定。

ともあれ、あまりおもしろがってエフェクトを追加して行っても、ユーザ的にはどうだろ? 使いどころを間違えると、うざったがられるだけかもしれないので、気をつけないとね。

とりあえずこれでおおまかな使い方がわかったので、下記で挙げた、はてな技術発表会日記をじっくり読んで、もうちょこっと遊んでみよう(^-^;

参考:
Scriptaculous Demo
http://wiki.script.aculo.us/scriptaculous/show/Demos

はてな技術発表会日記 テーマ - script.aculo.us -
http://hatena.g.hatena.ne.jp/hatenatech/20051111