あけましておめでとうございます。休み中に収集したニュースを一気に放出です。大量です。。 Prototype.jsなど、数多くあるJavaScript用のフレームワークですが「JimpleJS」という、その名の通りシンプルなフレームワークがあります。 このフレームワーク、ファイルサイズが 10KB弱。準備されているメソッドも10個程度しかありません。 しかし、Ajax通信をしての内容の書き換えやフェードイン・アウト、スライドイン・アウトなど取り急ぎ必要そうなエフェクト群は準備されています。 使い方も非常に簡単で、次のようにページ内に書き込むだけ。 <script> $opacity('objectID', 20, 100, 1200); </script> ちょっとしたプログラムを作るときには、この程度のフレームワークがよいかも知れませんね。 【ニュース元】 SimpleJS 超軽量J

昨日のニュース記事でご紹介した、簡単アニメーションライブラリ「Animator.js」ですが、早速私も使ってみましたので、サンプルの作り方を紹介しましょう。まずは、オフィシャルサイトからライブラリをダウンロードします。Bernie's Better Animation Class http://berniecode.com/writing/animator.htmlこのライブラリは、Prototyeを内部で利用しているため、こちらも合わせてダウンロードしてきます。Prototype JavaScript Framework: Class-style OO, Ajax, and more http://prototype.conio.net/ Prototypeは、ダウンロードした圧縮ファイルを解凍して「dist」フォルダの中に入っている「prototype.js」だけを好きなフォルダにコピ

JonDesign's Smooth SlideShow Library v2.0は、簡単に写真のスライドショートを作れるライブラリです。オープンソースで、GPLライセンスで配布されています。使い方も簡単。（とはいえ、ちょっと JavaScriptの知識が必要です。）ライブラリを取り込んで、スライドショーに登録する写真を配列として登録するだけ。オフィシャルサイトで詳しく紹介されています。 旅の記録などで使うと、面白いサイトが作れそうですね。JonDesign's Smooth SlideShow Library v2.0 はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング

AsHというBlogサイト（？）で、126個もの Ajaxサンプルが紹介されてされています。カテゴリ別に分けられていて、Bookmarklet、Chat、Drag and drop、Dynamic Content Loadingといった具合。 すべて、別サイトへのリンクになっているので、ちょっと見にくいですが「ドラッグドロップで並び替えられるリストの作り方」とか「Ajaxでサブミットするフォームの作り方」などなど、さまざまなサンプルが紹介されています。このBlogサイトは、他にも技術系の話題がかなり充実しているので、RSSリーダーに登録しておくとよいかも知れませんね。AsH: Top 126 Ajax Tutorials はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニュース TECH:入門記事・技術解説 S

前回、「住所検索を作る」というプログラムで住所から緯度・経度に変換ができましたが、緯度・経度と来たらやっぱり Googleマップ。 というわけで、今回は前回の続きとしてGoogleマップにその緯度・経度情報を与えて、移動できるプログラムを作ってみたいと思います。 Google Maps APIの使い方は、 さまざまなサイトで紹介されていますし、それほど難しくはありません。こちらのサイトから APIキーを取得します。 Google Maps API - Sign Up 規約に同意して、使うURLを入力したらボタンをクリック。なお、ここで申請したURL以外では使うことができないので、ご注意ください。ローカル環境などで開発することもできません。ちょっと不便。。サンプルコードを取得して、新しいファイルを作りましょう。<div id="map">から始まる地図表示用のdiv要素を崩さなければデザイ

Gucciいわずと知れた、ファッションブランド「グッチ」。まずは、なにも言わずにサイトを見ていただきたい。 良くある Flashのサイトかと思うが、ソースを見れば一目瞭然、Flashは全く使われていない。代わりにあるのは、膨大すぎる JavaScriptのソースコードだ。 Gucciは、自社サイトを Prototype.jsや script.aculo.usなどを使ってフルリニューアルしたのだ。この演出力といい、操作の気持ちよさといい、技術者の努力が伺えます。 ただ、JavaScriptを切ると画面がなにも表示されなくなってしまうのは、ちょっといただけません。。せっかくの JavaScriptサイトなので、そこまで気を回せるとベストでしたね。とはいえ、これは Good Job!です。 はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のペ

コメント( 0 ) | トラックバック( 1 ) Ajaxは、まだまだ Webブラウザ依存が強く、同じ機能を実現するにもブラウザによって処理を変える必要があることが多いです。そんなとき、これまではエージェント情報（Webブラウザ情報）を取得して、条件分岐で取得するなどして工夫していましたが、prototype.jsを使えば簡単です。 Try.These()というメソッドは、「とりあえず試してみて失敗したら、次を試す」というもの。例えば、さまざまな入門書籍などで語られていますが、現状 IEとそれ以外のブラウザでは Ajaxを形作るオブジェクトが違っています。その為、最初にブラウザを分岐を入れて・・if(window.XMLHttpRequest) {     // 一般的なブラウザ     ajax = new XMLHttpRequest(); } else {     // IE    

lightboxを使って、フォトアルバムを作るチュートリアルがGoodPic.comに掲載されていました。 完成すると、画面写真のようなアルバムができるようです。バックエンド技術に PHPが使われていて、PHPと Ajaxの連携の勉強にもなりそうですね。とはいえ、lightboxの利用方法は非常に簡単なので、Ajaxらしいプログラムは期待できないですが・・lightbox.jsとPHPで手軽にフォト・アルバムを作成 / Goodpic  はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニュース TECH:入門記事・技術解説 SITE:サイト紹介 INFO:おしらせ BOOK:参考書籍 Animator.js Firebug jQuery prototype.js 「Spryがすばらしい 5つの理由」を投稿しまし

補足情報の表示や、ちょっとした情報入力などで小さなウィンドウを表示すると言うことは良くあります。しかし、今は JavaScriptによる新規ウィンドウのオープンは厳しく制限されていて、なかなか現実的ではありません。そんなとき、Prototype Window Classが便利です。 このプログラムは、Prototype.jsをベースにしながら、さまざまなWindowクラスを定義していて、簡単な手続きで、さまざまなウィンドウを表示することができます。詳しくはサンプルを見ていくと分かりますが、Macスタイルのウィンドウから警告画面、確認ダイアログなどなど、すぐに使えそうなサンプルばかり。ぜひ、チャレンジしてみましょう。Prototype Window Class  はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニ

今や、Webサイト制作にバリアフリーの精神は常識です。バリアフリーの中でも、なかなか気が行き届かないのが「色の選定」。それを助けてくれるのが、この Accessibility Color Wheelです。 このサイトでは、良くあるカラーピッカーを提供してくれます。画像の上にマウスを乗せると、Ajaxでそのカラーコードを表示。ここまでは、良くあるサービスですが、このサイトでは下に色盲などの方向けのお勧め配色を教えてくれます。Deuteranope（第2色盲） Protanope（第1色盲） Tritanope（第3色盲）でそれぞれ見ることができます。ぜひ参考にしましょう。Accessibility Color Wheel  はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニュース TECH:入門記事・技術解説 S

コメント( 0 ) | トラックバック( 0 ) Ajaxへの積極的な取り組みで有名な Googleですが、いよいよ Googleの心臓部、検索部分が Ajaxで登場です。 Google AJAX Search APIを、自分のサイトに取り込めば、Googleの検索結果を Ajaxで取り出すことができます。Ajaxだから、検索結果をサイト本体とは独立させることができ、非常にスムーズに表示させることができます。 しかも、キーワードから Web、Video、Blogなどを一気に検索することができます。このあたりもおそらくカスタマイズできるだろうと思われます。私も、ドキュメントなどを読んでみて、またレポートなどできればと思います。 Ajaxプログラマには、また面白そうな「おもちゃ」が提供されましたね！Google AJAX Search API   はてなブックマークに保存 [PR] Rece

コメント( 0 ) | トラックバック( 0 ) このBlogをご覧の方ならご存じの方も多いとおもいますが、今や Ajaxの代名詞的な存在の Lightbox。写真を、非常にシンプルかつクールな表現で見せてくれる Ajaxツールです。 それを使って、写真以外にもさまざまなものを表示できるツールを Chris Campbellさんが開発しました。 これを使うと、写真はもちろんですが、テキスト、HTMLを Lightbox風の演出で見せられるため、フォームなどを表示することもできます。詳しくはデモをご覧ください。デモ 組み込み方などはサイトに書いてありますので、興味がある方はぜひやってみましょう。Particletree・Lightbox Gone Wild!  はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニュ

コメント( 0 ) | トラックバック( 0 ) Macをお使いの方には、おなじみの演出だと思いますが、アップルなどが良くやる演出に「鏡面に映り込んだような演出」があります。これを、JavaScriptで簡単にやるツールが登場しました。 これを使えば、Photohopなどの画像加工ツールを使わなくても、簡単に鏡面反射の演出ができますし、反射率を変更することもできます。単純に画像を置くだけではつまらない、でも自分には画像加工ができない・・ なんて言うときには、ぜひ使ってみましょう。ただし、使いすぎにはご注意を。Reflection.js  はてなブックマークに保存 [PR] Recently Ajaxメルマガ限定、人気記事ランキング 最初のページへ NEWS:最新ニュース TECH:入門記事・技術解説 SITE:サイト紹介 INFO:おしらせ BOOK:参考書籍 Animator.js F

コメント( 0 ) | トラックバック( 0 ) 現代の Ajax開発は、すべてを1から構築するよりも、「ライブラリ」や「フレームワーク」を使うことがほとんどです。 その中でも、現在非常に多く使われているライブラリが、今回紹介する「prototype.js」です。シンプルな作りな上に、さまざまな機能を提供してくれているため、このライブラリを使って作られているツール群もたくさん存在しています。 ここでは、そんな prototype.jsの使い方を数回にわたって、少しずつ解説してみたいと思います。いつまで続くか分かりませんが、お付き合いくださいませ。インストールしようまずは、インストールしましょう。といっても方法は簡単で、ファイルを一つコピーするだけです。 prototype.jsは、オフィシャルサイトから無料で配布されています。以下のサイトに訪れましょう。http://prototype