Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している
This shop will be powered by Are you the store owner? Log in here
Facebox 1.0 Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. LightBox風に角丸で可愛く画像をポップアップしてくれる「Facebox」。 リンクをクリックで次のように画像をポップアップしてくれます。 これはFacebookでも使われているポップアップ方法のようで、知っている人は知っている、ポップアップの仕方のようです。 コードは次のように非常にシンプルです。 rel="facebox" でポップアップしてくれるみたいです。 <a href="/facebox/remote.html" rel="facebox">text</a> jQueryベースなので軽量な点もうれしいところ。 ちょっと気分を変えたい方は導入
jQuery、ProtoType、.Netなどのフレームワークを使ったサンプル、デモが豊富にあります。しかも、サンプルをダウンロード可能。サンプルやデモを見ているだけでも、インスピレーションが沸いてきます。 詳細は、以下から。AjaxRain かなりのサンプル数があるので探していた物を見つけることができるかも。タグで分別されているので、探すのは意外と簡単にできそうです。ちなみにサンプルの1ページあたりの表示数を変更できるのですが、100以上を入れると100にされます。 毎月このサイトでAJAXなどを使ったコードのコンテストをしているので、腕に自信のある方は応募してみては。詳しくはこちらから。 AjaxRain.com Rain Fest
システム開発は何らかの出力をもって完結する。メール送信する場合や、画面出力等がある。業務システム系であれば、帳票や一覧表も考えられる。その中でよく要望に挙がるのがグラフ表示だろう。 グラフ用のライブラリを導入したり、表示のプロットが面倒だったりして、最終的には表計算ソフトウェアに逃げてしまうことが多い。既存データへのグラフ表示機能を追加するのにJavaScriptという選択肢はいかがだろう。 今回紹介するオープンソース・ソフトウェアはWT Toolkit、グラフ表示をはじめとするリッチなコンポーネントを提供するJavaScriptライブラリだ。 まずは何といってもグラフ表示機能だろう。デモで見られるのは3D円グラフ、棒グラフさらにレーダーチャートなど。どれもWebブラウザ上で動的に変更できる。ただし日本語はグラフ上は文字化けするのでご注意いただきたい。 他にもツリービューや表計算風シートの
WEB制作に役立つWebサービスやツール等、合計37のブックマークまとめ。 とりあえず全て無料をあつめました。 Webサイト作成のお供にFLASH関連 Wink デスクトップのマウスの操作を含めた動きを全てFLASHへ変換するソフト。 途中注意書きを追加したり、要らない部分のカット等も出来ます。完成したムービーに次へボタンをつけたりも出来ますし、ローディングバーもつけれます。 使い方 2.0にバージョンアップ その他使いやすいデスクトップを動画にするキャプチャ マニュアル作成が10倍楽になるソフトがありました Flashできれいなパイチャートや円グラフを無料で作る いまはやりの丸グラを作るのにフラッシュの知識がなくても簡単に作れるツール。 動画をまとめて配信するフラッシュコンテンツの作成 各種動画サイトの複数映像をまとめて表示するツール。 役立つWEBサービス 白地図、世界地図、日本地図が
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo!やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
javascriptのprototypeはなかなか理解してもらえないですねぇ。 ここ1年間でマジマジと実感しました。 特に、大規模開発をしているとこだと、いろんな知識が入り乱れていて(ホームページ時代からAjax本を読んだ人とか)が、javascriptが単なる関数型列挙な言語(語弊があるけど)という見方が大多数を占めているように見えます。 そんな中で "String.prototype.trim" みたいなコードを見せても、説明下手なのか中々上手く伝わらないですねぇ。 ということで(?)、僕がjavascriptのprototypeを身に着けるまでやったこと、とか。これも備忘 prototype.jsのソースコードを眺める Array.mapとかEnumerable, Hashは勉強になりますねー。 ただ、prototype継承されすぎて、ちょっと多すぎなこともあります。 var
NoFunc Nomadic Functions 超シンプルで使い勝手のよいJavaScriptコード集「Nomadic Functions」。 他のどのライブラリにも依存しない、★投票システムや、Ajaxリクエスト、カラーピッカー、ドラッグ&ドロップ、テーブルソートなどを実現するためのJavaScriptコード集です。 例えば、ajaxリクエストをするのに、次の関数があって、wReq('http://www.YourDomain.com/',0,function(v) { alert(v); }); のようにシンプルに呼び出せるコードが紹介されています。 function wReq(u,s,change) { var r=[function(){ return new XMLHttpRequest(); },function(){ return new ActiveXObject("Ms
ColumNav Documentation ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component. iPod風の階層的なナビゲーションを実装する面白UIサンプル「ColumNav」。 一見、アイコンのついたコンボボックス風UIでiPodライクな次のようなナビゲーションを実装する方法. ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。 動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。 Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。 ソースも次のようにクリーンになるので使いやすそう。 <ul id="basketball-list"> <li>
Comeeko - Creating comic strips from your photos Ajaxを駆使した超リッチUIで4コマ漫画が作れるサービス「Comeeko」 アカウントを作成する必要がありますが、これは1開発者として1回使ってみたいUIなので是非使ってみましょう。 尚、EメールアドレスのValidateは必要ないようで、登録後、すぐつかえます。 「Create」タブを押して作成を開始。 1) 漫画のコマ数を決める 4コマ、と書きましたが、2〜9コマ漫画まで作成できます。 好きなレイアウトを選択したら、ページ下部の「Step 2 Adjust Layout」に移ります。 ここでは3コマにしてみました。 2) 漫画の枠線のボーダーの色、幅などを決める Ajaxによってリアルタイム反映なので、UI的に非常に便利なものとなっています。 3) 元画像のアップロード or Flick
yahooがyahooには似合わないくらいにかっこいいサービスを出した。その名も Pipes: Rewire the web とすごいサブタイトルがついています。rewriteはいい過ぎだけど。(よくみたらrewriteじゃなくてrewireだった) Pipes is a hosted service that lets you remix feeds and create new data mashups in a visual programming environment. と書いてあって、要するにフィードを混ぜたりするツール。UNIXのようにXMLデータをパイプをつないで処理したりできると便利だよね、というのは IBM dW : XML : XMLの論考: マイクロフォーマットのパイプストリーム - Japan にも書かれていた話。IBM dW の話は一般的なXMLの話で、行を単
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
Ajaxライブラリの全体像を把握しよう Ajaxライブラリ(*注1)はすでに数多くのものが出回っていますが、多過ぎて全体像がつかめていないのではないでしょうか。今回は代表的なAjaxライブラリの一部を挙げ、それぞれを比較しながらAjaxライブラリの全体像を把握していきたいと思います。 どうして、Webアプリ開発にAjaxライブラリが必要なのか どのようなプログラミング言語でもライブラリが存在するように、Ajaxにおいてもライブラリが存在します。 初めにAjaxライブラリの必要性について見ていきたいと思いますが、ここではAjax開発ならではのライブラリの必要性を2点取り上げます(ほかの言語のライブラリと共通する必要性はあらためて取り上げません)。 クロスブラウザ対応 Ajaxの利点として、さまざまな環境における一般的なWebブラウザ上で実行できることが挙げられます。しかしWebブラウザの実装
Web2.0とは何か?というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
WeeblyのAjaxを利用したサイト制作サービスは要チェックというエントリーより。 ユーザーはWeeblyのAjaxを利用したインタフェース上で、ドラッグ&ドロップとクリックを何回か繰り返すだけで簡単に複数ページのウェブサイトを制 作することができる。ユーザーはできあがったサイトをWeeblyのサーバに保存してもよいし、他のサーバで利用するためにダウンロードしてもよい。 TechCrunch Japaneseで紹介されていた「Weebly」というサービスはなかなか凄いです。 Ajaxを利用したウェブ構築ツールで、ドラッグ&ドロップでサイト構築をすることが可能です。できたサイトはそのまま運用することもできるし、ダウンロードして自分の領域にアップロードすることもできるという便利さです。 通常のテキスト、画像処理ツール、RSSのサポートにI加えて、Weebly はJavascriptベースの要
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く