ASCII.jp:jQuery Mobileによる問い合わせフォームの作成|西畑一馬のjQuery Mobileデザイン入門
jQuery Mobileによるスマートフォンサイトの制作方法を解説する本連載。前回に続き、簡単な会社案内サイトを作成ながらjQuery Mobileの基本を学びましょう。今回は、jQuery MobileのフォームUIを使って、以下のような「お問い合わせ」ページ(#contact)を作成し、会社案内サイトを完成させます。
Read more: http://ascii.jp/elem/000/000/615/615017/#ixzz1QYYqh800
フォームUIの課題とjQuery Mobileによる解決
スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適しません。スマートフォンサイトの制作ではフォームをスマートフォンに最適化することが重要です。
以下は、jQuery Mobileを使わずに作成したお問い合わせページをiPhone/Androidで表示したものです。
Read more: http://ascii.jp/elem/000/000/615/615017/#ixzz1QYYvGYMc
jQuery Mobile Alpha 3 Released | jQuery Mobile
jQuery Mobile Alpha 3 Released
480のコミット、150個のバグFIX、240個のユニットテスト項目の追加
使ってみよう! Bing API/SDK:第14回 使ってみよう! Bing Maps AJAX Control──地図をWebページに貼り付け(2)|gihyo.jp … 技術評論社
Webページに地図を貼り付けられるBing Maps AJAX Controlの2回目です。今回は地図上にプッシュピン(図1)や図形を表示してみましょう。
図1 プッシュピン
Bing Maps AJAX Controlを利用すると地図上にプッシュピンの表示や,線や領域の描画などが可能です。多機能ではありませんが,簡単に使えます。
JavaScript と Ajax のパフォーマンスを最大にする
Firebug、Safari Web インスペクタ、YUI Profiler、および YSlow によるパフォーマンス測定
概要: Web アプリケーションで Ajax と JavaScript の使用が際立ってきている現在、JavaScript コードと Ajax リクエストが最適なパフォーマンスを達成するように細かく調整されていることがますます重要になってきています。この記事ではまず、JavaScript コードを作成し Ajax リクエストを実行する際のベスト・プラクティスを紹介します。続いて、既存のアプリケーションのパフォーマンスを測定し、コードに含まれる一般的なボトルネックを突き止める方法、パフォーマンスに関連する問題を修正する方法、さらにはアプリケーションの実行速度を最大にするためにさまざまに用意されている各種ツールの使い方も学んでください。
初期の頃の Web では、Web ページのパフォーマンスを最大にするということは、不要な HTML マークアップを使用しない、JavaScript コードの量を最小限にする、そして画像のファイル・サイズを大幅に減らすことを意味するのが一般でした。そうすれば、ページがロードされるまで、典型的なネット・サーファーが席を立ってコーヒーを淹れに行くことがなくなります。
Web のさまざまな側面が進歩した今、開発者の目の前には、まったく新しいパフォーマンス上の考慮事項が出現しています。DSL とブロードバンドは、高速インターネット・アクセスを多くの人々にとって身近な存在にしましたが、その一方で、ロード時間と応答性に対する人々の期待を高くしたのも事実です。現在私たちは、ページでアクションを起こすと同時に結果が返ってくることを期待するまでになっています。Ajax (Asynchronous JavaScript and XML) の登場により、イベントに応答する前にページ全体をロードする必要がなくなり、開発者は Web アプリケーションでデスクトップのようなエクスペリエンスを実現できるようになりました。これは明らかなメリットですが、このおかげで平均的な Web ユーザーが、このような応答性をあらゆる Web アプリケーションに求めるようになりました。さらに、最近のモバイル Web の急増により、前衛的な Web ユーザーの要求に応えるという新たな課題もあります。しかもこの課題には、画面が小さく、処理能力にしても、接続速度にしても制約のある機器で動作するようにしなければなりません。
この記事の焦点は、読者の皆さんに JavaScript および Ajax Web アプリケーションのパフォーマンスを最大にするために考慮すべき点を知ってもらうことです。記事では、新しいアプリケーションと既存のアプリケーションのどちらに組み込むかに関わらず、新しく作成するコードに取り組むための最善の方法について一連のガイドラインを提供します。また、アプリケーションのパフォーマンスを測定するために利用できる各種のツールと手法について説明し、最後に、既存のコードを変更することなく、パフォーマンスを改善するさまざまな方法を紹介します。
Struts 2にリッチUIを提供する「Struts2 jQueryプラグイン」(1/5):CodeZine
はじめに
本稿ではStruts 2にjQueryとjQuery UIを使ったリッチクライアントを提供するStruts 2 jQueryプラグインを紹介します。
jQueryとjQuery UIについて
jQueryとはJavaScriptとHTML、CSSの相互作用を強化する軽量なJavaScriptライブラリです。軽量ながらも簡単な操作で扱え、HTMLの操作、AJAXによる非同期リクエストも扱えるのが特徴です。
jQuery UIとは、jQueryの公式ユーザインターフェイス群です。ボタンやタブ表示など基本的なものから、カレンダーやカラーピッカーのような良く使われるユーザインターフェイスを提供します。なお、CSSのテンプレートも提供します。
対象読者
Struts 2のWebアプリケーション開発に興味ある方。
必要な環境
最低動作環境は以下のとおりです。
Java SE 5
Struts 2.1.8.1が動作する環境
Tomcat 5.5.x / 6.0.x
Struts 2 jQuery プラグインとは
Struts 2 jQuery プラグインとは、Struts 2アプリケーションで扱う画面、例えばJSP上でjQuery、jQuery UIを扱えるようにしたものです。バージョンアップの頻度もかなり高く、さらにはjQuery UI以外にも外部のjQuery用のプラグインを取り込んで、さらなるユーザインターフェイスの強化が図られています。
今回は執筆時点での最新版である2.3.1で解説します。
Struts 2 jQuery プラグインでできること
Struts 2 jQuery プラグインを導入することで、JSPでのjQueryの導入はもちろんのこと、利用できる機能はたくさんあります。
Struts 2 jQuery プラグインで提供されていないものでも、カスタマイズしたスクリプトはもちろんのこと、追加したjQueryのプラグインも利用することができます。現在の最新版ではグリッド機能とリッチなユーザインターフェイスが手軽に使えるようになり、さらにAJAX通信を利用した画面もjQueryのコードを記述することなく利用することができるというメリットもあります。もちろんStruts 2がもっていた従来の機能も損なうことがありません(※1)。
本稿ではこのプラグインの基本的な使い方を、1つの入力画面を通して紹介していきます。
以下の表に、ウィジェット一覧と、インタラクション(段落の操作)一覧をまとめます。公式の機能一覧はStruts 2 jQuery Pluginならびに実際に動作するサンプルアプリケーションとしてStruts 2 jQuery Plugin Showcaseで公開されていますので参考にしてください。
ASCII.jp:Web制作者向けjQueryセミナー、開催迫る!
Web制作者を対象にした無料セミナー「クライアントの声にこたえる jQuery UIデザイン」の開催が今月26日(月)に迫っている。主催はサイバーガーデンbiz、会場はアップルストア銀座。
本セミナーは、「Web制作の現場で使うjQueryデザイン入門」(西畑一馬著、Web Professional Books)の刊行を記念して開催されるもの。著者の西畑一馬氏(to-R代表)が、クライアント(顧客)からのニーズが高いユーザーインターフェイス(UI)を、jQueryを使って実現する方法を解説する。また、第2部ではjQueryに関する質問に西畑氏が対応する。
ASCII.jp:AJAXサイトをクローラブルにする - 検索エンジンフレンドリーなAJAX実装方法
米Googleが、AJAXベースのウェブサイトをコンテンツを検索エンジンに登録する方法についての、最新ドキュメントを公開しました。昨年10月に検討段階の実装方法が公式サイトで紹介されましたが、それのアップデート版になります。
最初におさらいをします。AJAX(エイジャックス)は、ページ遷移なしにサーバとデータ通信を行うことで、動的なWebアプリケーションの開発が可能です。しかし、いまブラウザで表示している内容と対になるURLが存在しないために、クローラが個々のコンテンツをクロールできないこと、また、仮にステートフルURLを用意しても(クローラは)JavaScriptを実行できないためコンテンツを読み取ることができないため、検索エンジンに登録することは困難な状況でした。
jQuery 1.4.2、マイナーアップもさらに高速化 | エンタープライズ | マイコミジャーナル
19日(米国時間)、jQueryの最新版となるjQuery 1.4.2が公開された。jQueryはJavaScriptで開発されたAjaxアプリケーションフレームワーク。軽量で高速、さまざまなシーンで採用されるもっとも人気のあるフレームワークのひとつ。jQuery 1.4.2はjQuery 1.4系のマイナーアップデートという位置づけだが、パフォーマンス向上とバグ修正という2点で注目に値するバージョンに仕上がっている。
ASCII.jp:JS超えた!? UIZE Frameworkの特殊効果を見せます!
JavaScriptとは思えない特殊ワイプ効果 「UIZE JavaScript Framework」(以下、UIZE Framework、「ユーアイズ」と読む)で目をひくのが、JavaScriptとは思えないほどの表現力豊かな特殊ワイプ効果です。従来の JavaScriptライブラリーのエフェクトといえば、画像の不透明度が変化したり、画像が特定方向にスライドして切り替わる、といったものがほとんどでしたが、UIZE Frameworkでは膨大な数の特殊ワイプ効果が用意されています。
ASCII.jp:IE6対応!jQueryで透過PNGのロールオーバーを作る
前回はナビゲーションメニューに「ロールオーバー」効果を付けるスクリプトを作成しました。今回は、Webデザインの幅を広げる透過PNG画像を使ったロールオーバーの作成方法を解説します。透過PNGはInternet Explorer(IE) 6が標準でサポートしていないため、クロスブラウザー対応には工夫が必要です。
ASCII.jp:透過PNG対応!jQueryでオリジナルツールチップ
「ツールチップ」は、テキストや画像の上にマウスカーソルを重ねたときに「ふき出し」のように補足テキストを表示するUIです。ツールチップ自体は、 title属性やimg要素のalt属性にテキストを記述すれば表示されますが、ブラウザーによってデザインや挙動が異なり、HTMLやCSSでカスタマイズできません。
ASCII.jp:Yahoo! UI Library 3で驚きのアニメーションを作成
YUI 3のアニメーション機能を使ってみよう 9月末にリリースされた「YUI(Yahoo! UI Library)」の最新版「YUI 3」。前回はYUI 3の基本的な使い方と簡単なマウスオーバーのサンプルを作りました。今回はYUI 3のアニメーション機能を使って、Webページに動きを付ける方法を紹介します。
Virtualization With AJAX and Java @ FLEX DEVELOPER'S JOURNAL
Includes customizable, drag-and-drop, AJAX dashboard
AJAX Performance Analysis @ FLEX DEVELOPER'S JOURNAL
Developers are increasingly treating AJAX as a must-have component for their Web applications
MS、ASP.NET AJAX 1.0の無償提供を開始 (MYCOMジャーナル)
Microsoftは23日(米国時間)、同社のWebアプリケーション開発フレームワーク「Microsoft ASP.NET AJAX 1.0」(以下、ASP.NET AJAX 1.0)のオンラインによる無償提供を開始した
最人気Ajaxフレームワーク最新版Prototype 1.5 - 待望のAPIドキュメントも (MYCOMジャーナル)
Prototype Javascript Library easing the development of dynamic web applications
ITmedia エンタープライズ:Google、Ajaxアプリ開発ツールのβ版公開
Google Web ToolkitではJavaを使ってGoogle MapsやGmailのようなAjaxアプリケーションを開発し、GWTコンパイラでJavaScriptとHTMLに変換できる。
ITmedia エンタープライズ:Adobe、Ajax対応ページ作成用の「Spry」公開
Adobe Labs - Spry framework for Ajax
AdobeはWebページにAjaxを組み込むためのWebデザイナー向けフレームワークを公開した。HTML、CSS、JavaScriptの基本的な知識があれば簡単に導入できるという。
ITmedia D モバイル:Ajax対応の携帯フルブラウザを開発へ
HOWSとイノシスは、Ajaxを活用した携帯フルブラウザの開発に向け技術提携する。画像の拡大・縮小やポインタによる高速スクロールをストレスなく行えるフルブラウザを開発するという。
AJAXを使ったJava製プロジェクトトラッキングツール - TrackIt 1.0.0 (MYCOM PC WEB)
The TrackIt teamは14日(米国時間)、TrackItの最新版であるTrackIt 1.0.0を正式に公開した。TrackIt 1.0.0はJavaで実装されたWebベースのプロジェクトトラッキングツール
Ajax技術の目に見えない通信内容をのぞいてみよう 〓 @IT
Ajax(エイジャックス)の登場によって、ブラウザのプラグインソフトに頼らなくても、見た目が華やかで動きも面白いWebアプリケーションの開発が可能となりつつあります。
WEB(ウェブ)デザイン制作・ホームページ制作・FLASH(フラッシュ)デザイン製作・SEOの事ならOFFICE TAKASAKIへ