ドットインストール代表のライフハックブログ
前回は,従来型のPHPアプリケーションとAjaxアプリケーションを比較することで,Ajaxアプリケーションが従来型アプリケーションのどのような点を改善するものなのかを概観しました。今回は,前回紹介したコードを詳しく見ていくことにします。 本連載のテーマであるAjaxという意味で注目する必要があるのは,クライアント側のコード(リスト1)です。サーバーサイド・アプリケーション(searchAjax.php)は前回見たように,クライアントから受け取ったISBNコードに基づいて対応する書名を出力するだけのごくシンプルなプログラムなので説明は省略します。 リスト1●AjaxアプリケーションのHTMLファイル(searchAjax.html)<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
「プロが作ったWebサイトのあの“技”をウチのサイトでも(それもタダで)マネしたい!」――。そんな欲求に応えてくれる JavaScriptライブラリ/フレームワークが、ネット上にはたくさん公開されています。この連載では、国内外の商用サイトの優れたUIをお手本にして、なるべくカンタンに、手間をかけずに自分のWebサイトをブラッシュアップしていく方法を紹介します。
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8 / Safari CSSのみで伸びるグラフを実現します。とは言ってもCSSのみでは動的に数値を変更する事は出来ないので、他にサーバーサイドスクリプトと連動させる必要がありますがFlashに頼らず動的にグラフの長さを変更することが出来ます。 アンケートフォームの結果や、ヒットカウンタなどと連動すれば面白いものが出来るかもしれません。 サンプル 今ココだよ! ソース <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>FLASHに頼らないCSSで出来る伸びるグラフ</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
数あるJavaScriptフレームワーク、あなたはどれをよく使う? Webアプリケーションの開発現場において、JavaScriptは切っても切りはなせない存在だ。特に業務支援系Webアプリケーションの場合は、エンドユーザに対して「どれだけわかりやすく、入力・操作しやすいUIを提供できるか」がカギとなる。 最近ではJavaScriptフレームワーク自体に各種の用途・目的に合わせたウィジェットが増えてきており、デベロッパは自前で複雑な実装をすることなくさまざまな機能・UIを簡単に導入することができるようになってきた。 jQuery UI、Dojo Toolkit、Yahoo! User Interface Library(以下、Yahoo UI)、script.aculo.us、Ext JS……、ライセンスや稼動環境、エンドユーザの要望、デベロッパの嗜好などでさまざまな選択肢があるが、どのフレ
もう間もなく投開票を迎える米国の大統領選挙。候補者である共和党のジョン・マケイン氏、民主党のバラック・オバマ氏の両者のWebサイトを見ると、インターネットを重要な選挙ツールとして位置づけていることが伺えます。ネットを使った選挙活動が制限されている日本とは事情が異なるせいもあるでしょうが、両者ともに公式サイトの充実ぶりがすごいのです。ブログや動画の活用は当たり前。グッズのネットショップや、サポーター向けのコミュニティ機能など、ちょっとしたポータルサイトのような凝った作りです。 そんな気合の入ったWebサイトだけに、デザインの面でも参考になる面が多々あります。今回は特に、Ajaxを活用したユーザーインターフェイスを持つ、オバマ候補の公式サイトをお手本とさせていただきましょう。 今回のお手本サイト: 『Barack Obama and Joe Biden』 11月4日に開催される米国大統領選挙に
はじめに 筆者はDevXの以前の記事で、動的なWebアプリケーションの開発に役立つJavaScriptフレームワーク「Prototype」を取り上げましたが、その記事の最後で、PrototypeをベースにしたUIライブラリであるScript.aculo.usについて少し触れました。本稿ではScript.aculo.usが提供するオートコンプリータ、インプレースエディタ、スライダというWebコントロールについて説明します。 Script.aculo.usは大きなライブラリなので、1つの記事で網羅的に説明することはできません。しかし、本稿の説明を読めば、Script.aculo.usのWebコントロールを利用してエンドユーザーエクスペリエンスを向上させることができるでしょう。環境のセットアップ まずブラウザでPrototypeのホームページにアクセスし、最新バージョン(本稿の執筆時点では1.6
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く