さてここから、実際にAjaxアプリケーションの制作に入っていきたい。まず今回は、フォトアルバムで画像を表示する際のフレームとなる部品を作る。サンプルを見てみよう。 リンクをクリックすると、まず写真風のフレームがフェードインで表示され、画像自体はロードが完了してからフェードインする。このサンプルではXMLHTTPRequestを使っていないが、イベントやローディングをJavaScriptで制御しながら、ユーザーにはそれを感じさせないなめらかなインターフェイスを与えるこのようなアプローチは、まさにAjaxの発想だ。 今回のサンプルを試してみるために、まずはPrototypeとscript.aculo.usのソースをダウンロードする必要がある。現在Prototypeは1.3.1、script.aculo.usは1.0が正式リリースされているが、本連載では開発バージョンであるPrototype 1
ブログパーツなるものがある。 ちょっとした画像やらツールやらを簡単なコードを貼り付けるだけで設置することができるものだ。 ブログが普及するにつれ、さまざまなものがブログパーツとして提供されつつあるようだ。 その一つがUntitled Statesだ。このサイトではさまざまな画像に自分のメッセージを埋め込み、それをブログに貼り付けることができる。 こうしたメッセージ埋め込み型の画像を生成するサービスは今までもあったが、ブログパーツにしているところがなかなかよい。メッセージを埋め込める画像は随時追加されていくようですよ。 他にどんなものがブログパーツになっていてもらいたいか、ちょっと考えてみるといいですね。
SOAとかWebサービスなどが騒がれているが、一つのデータにみんなでよってたかって違う切り口を見つけよう、という発想はゼロから発想するよりも多くの発見がある。 そういうわけでFlickrAlbumもなるほどな、と思った次第だ。 このサイトではFlickrのユーザー名 and/or タグを指定すると、そこから検索される写真をフォトアルバム風に仕上げてくれるというサービスを展開している。 シンプルでセンス良い仕上がりももちろんだが、ページの端をめくるように次のページを見ていくというインターフェースも小気味良い。 新しいアイデアはいつでも求められているのだが、まったくゼロから考えるよりも、身近にあるデータに対して他のどんな切り口があるか考えてみるといいですね。灯台下暗し、と。
JavaScript を使わずに、CSS を使ってサムネール画像の拡大画像をマウスオーバーで表示せる方法「CSS ~ Image Pop UP」を参考に、拡大画像をその場で表示させるサンプルを作ってみた。 popup.html 最初に拡大画像を高さ 1px 幅 1px に指定しておき、hover で正寸を指定させることによって実現させている。ちなみに、hover の指定に背景色を指定しないと IE でうまく動作しない。 .photo a.popup:hover { background-color: #fff; } 何となく微妙な感じだけど、サムネールをいっぱい並べて画面遷移なしで拡大画像をみせたい場合に使えるかも。 あの頃のように… - CSS で画像ポップアップさせる (2005年6月10日 19:02) CSS で画像ポップアップ私の中ではかなりの革命です。なぜ今までこれに気が付かな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く