タグ

関連タグで絞り込む (118)

タグの絞り込みを解除

JavaScriptに関するTensorのブックマーク (118)

  • jQueryで作るAmazon流リキッドレイアウト (1/5)

    国内外を問わず、多くのECサイトがお手とする「Amazon.co.jp」。この連載でも以前、Amazonが採用する「カルーセル」(回転表示するスライドパネル)の作り方を紹介しましたが(関連記事)、Amazonは優れたユーザーインターフェイス(UI)の宝庫でもあります。 中でも、過去の閲覧履歴などからページの大半が動的に生成されるAmazon.co.jpのトップページは、ユーザーを商品購入へと導くさまざまな仕掛けが組み込まれています。今回は、このAmazon.co.jpのトップページに注目します。 今回のお手サイト:『Amazon.co.jp』 米アマゾン・ドットコムの日法人アマゾンジャパンが2000年から運営するECサイト。書籍販売から始まり、現在ではペットボトル飲料水や紙おむつ、キッチン家電まで1000万点超の膨大な商品を扱っている。取扱商品の拡大に合わせて、2008年4月に大規模

    jQueryで作るAmazon流リキッドレイアウト (1/5)
  • 目的を持ってAjaxを使うためにjQueryの文法を知ろう

    目的を持ってAjaxを使うためにjQueryの文法を知ろう:jQueryで学ぶ簡単で効果的なAjaxの使い方(2)(1/3 ページ) いま話題の「jQuery」を使って、目的を持ったAjax開発の効率化や使いどころ・注意点などについてサンプルを見ながら解説していきます。Webデザイナ/プロデューサーも必見! 連載第1回の「Aptanaで始めるJavaScriptライブラリ『jQuery』超入門」では、Ajaxを使うためのJavaScriptライブラリとしてjQueryの使い方を紹介しました。実際にAjaxを使ったシステムを作るときに、Ajaxを使うことが目的になってしまっている場合があります。残念ながら、このようなプロジェクトは失敗することの方が多いのが現実です。来の目的というものは、Ajaxを使ったシステムによる業務の効率化であったり、ユーザビリティの改善によるリピータの確保であったり

    目的を持ってAjaxを使うためにjQueryの文法を知ろう
  • jQuery入門(その1)(1/7):CodeZine

    はじめに 実を言うと、私はずっとJavaScriptを嫌っていました。JavaScriptのコードを書くのが嫌でしたし、いろいろなブラウザに対応するために大量のスクリプトコードを使わなければならないのも嫌でした。そうした点は今でも変わらないのですが、最近になってJavaScriptへの理解が深まったことと、jQueryという小さなJavaScriptクライアントライブラリのおかげで、クライアント中心のAJAXスクリプトコードを書かなければならないときでも恐怖を抱かなくなりました。それどころか、今では喜んで引き受けるほどになっています。クライアントロジックがもっと複雑になり、ブラウザの機能や実装の多様化がさらに進んだとしても、jQueryをはじめとするクライアントライブラリが、JavaScriptHTML DOMを扱う際に必要な正規化を提供してくれます。 私はJavaScriptの初心者と

    jQuery入門(その1)(1/7):CodeZine
  • jQueryでエクスプローラ風メニューに! (1/2)

    ネットショップや情報サイトなど、複雑な階層構造のWebサイトでは、なるべく分かりやすくて見栄えのいいナビゲーションを設置したい、というニーズがあります。今回は、jQueryプラグインのひとつ、「Treeview」を使って、リストをツリー風に格好よく表示する方法を紹介しましょう。 ui/li要素をツリー表示する「Treeview」 Treeviewプラグインは、HTMLのul/li要素でマークアップしたリストをツリー風に表示するJavaScriptです。要素をクリックで開閉したり、Windowsのエクスプローラのようなフォルダ/ファイルアイコンを表示したりと、いろいろカスタマイズできるのが特徴です。開発者はJorn Zaefferer氏(Jornの「o」の上に点が2つ付きます)で、MITライセンスで公開されています。 Treeviewプラグインは、以下のページで配布されています。ページの先頭

    jQueryでエクスプローラ風メニューに! (1/2)
  • Yahoo!の流れるパネルをJSライブラリで再現 (1/5)

    最大のポータルサイト「Yahoo! JAPAN」のトップページがリニューアルしたのは、2008年1月のこと。従来の2カラムから3カラムのレイアウトに変わり、世界各国のYahoo!に合わせる形でデザインも一新されました。同時に行なわれたのが、ユーザーインターフェイス(UI)のリッチ化です。新しいYahoo! JAPANのページには、タブ/アコーディオンパネル/フローティングウィンドウなど、ここ数年のトレンドであるAjaxを使ったUIが随所に盛り込まれています。 こうした流れは、トップページだけではありません。リニューアルと前後して、Yahoo! JAPANではさまざまなサービスのUIの改善が実施されています。今回はその中のひとつ、「Yahoo!知恵袋」に注目してみましょう。今年2月にリニューアルされたばかりのこのQ&Aサービスの新しいトップページが、今回のお手です。 今回のお手サイト

    Yahoo!の流れるパネルをJSライブラリで再現 (1/5)
  • 【ハウツー】jQueryでアニメーションならコレで決まり?! 新星フレームワーク「GX」 (1) GXの特徴とインストール方法 | エンタープライズ | マイコミジャーナル

    Riccardo Degni氏は10日(イタリア時間)、アニメーション効果に特化したJavaScriptフルフィーチャフレームワーク「GX」を公開した。GXはMIT Licenseのもとで公開されているオープンソースソフトウェア。未圧縮の状態で10kb前後と軽量でありながら、クロスブラウザ対応(IE 6+, Firefox 2+, Opera 9.25+, Safari 3+, Google Chrome)、おおくのアニメーション効果をサポートするJavaScriptライブラリだ。いまのところGXはjQueryをベースに構成されているため、使用するにはjQueryも一緒にロードする必要があることに注意されたい。 GXのWebサイト 同氏のブログによると、GXは"Write Less, Do More", "DRY (Don't Repeat Yourself)"の2点を念頭において開発をお

  • Google Visualization APIを使ってWebアプリケーションにグラフィカルデータを表示する

    はじめに 最近は、ネットワーク上に存在するデータがますます増えており、その形式や場所もさまざまです。こうした傾向から、ビジュアル分析、つまりネット上のデータから必要な情報を抽出して一目で分かるように提示する機能が重要になっています。開発者の多くは、このようなデータを集めて分析し、ダッシュボード、レポート、グラフのようなフォームにまとめて公開する役割も担っています。その際に威力を発揮するのが、表現力の高い画像や図表です。 こうした新たな要求に応えるために、Google Visualization APIは、開発者がビジュアル分析を行う一元的な方法と、データをビジュアル化するほとんどの状況に対応できる豊富なグラフィックコンポーネントやグラフ作成コンポーネントを提供します。このAPIは、データ交換の仕様と一連のライブラリで構成されています。これらのライブラリを利用することで、開発者は、構造化され

    Google Visualization APIを使ってWebアプリケーションにグラフィカルデータを表示する
  • Cutting Edge: jQuery によるリッチなクライアント スクリプトについて (第 1 部)

    注意 このページにアクセスするには、承認が必要です。 サインインまたはディレクトリの変更を試すことができます。 このページにアクセスするには、承認が必要です。 ディレクトリの変更を試すことができます。 March 2009 Volume 24 Number 03 Cutting Edge: jQuery によるリッチなクライアント スクリプトについて (第 1 部) Dino Esposito | March 2009 目次 jQuery オブジェクト セレクタ フィルタ フォーム フィルタ ラップされたセットの操作 jQuery のチェーン機能 HTML を理解する 言うまでもないことですが、Web ブラウザからより多くの機能を引き出すには、より多くの JavaScript コードを記述する必要があります。HTML ページで実行できる動作を増やすために 1995 年頃登場した JavaS

    Cutting Edge: jQuery によるリッチなクライアント スクリプトについて (第 1 部)
  • javascriptでマウスの長押しをハンドリング

    javascriptでユーザーのマウス操作をハンドリングする際、 click dblclick mouseover mouseout mousedown mouseup と、よく使うイベントハンドラがありますが、 マウスボタンの長押しをハンドリングするハンドラがありません。 Webページで長押しを使いたいケースがあったので、簡単なライブラリを作成しました。 興味のある方はどうぞ。 マウスの長押しでスクリプトを実行  マウスボタンの長押し Windowユーザーの方はマウスボタンの長押しにはなじみがないかもしれませんが、 Macでは昔から利用されている操作方法です。  アイコンやリンクなどの領域をマウスボタンを押した状態で少しキープすることで、 クリックとは異なる機能を呼び出すことができるものです。  ※このエントリは builder メンバーにより投稿されたものです。シーネットネットワークス

  • Script.aculo.usで実現できる、さまざまな視覚効果

    はじめに 先に「Script.aculo.usで、ビジュアルなWebページを!」で、Ajaxを利用した各種のGUIコンポーネントについて説明をしました。今回は、Script.aculo.usのもう1つの柱である「視覚効果」について説明しましょう。 視覚効果は、特定の要素に対し、さまざまな表示の変化を与えるものです。例えば、消したり表示したり、動かしたり、スタイルを変えたり……。Script.aculo.usの視覚効果は、それらの経過時間や開始・終了時の状態などを細かに設定することができます。 実際にサンプルをいくつか試してみれば、「あれ? この効果、どこかのサイトで見たことあるぞ?」と思うものがいくつも見つかることでしょう。Script.aculo.usの視覚効果は、非常に簡単に導入することができます。実際にサンプルを動かしながら、自分の目で確かめてみてください。 対象読者 JavaScr

    Script.aculo.usで実現できる、さまざまな視覚効果
  • ASP.NET AJAXの開発をさらにサポート「ASP.NET 3.5 SP1」

    Visual Studio 2008 Service Pack1から、ScriptManagerコントロールの機能強化が行われ、AJAX機能のサポートが行われています。また、ASP.NET Controls for Silverlightにより、Silverlightのメディアやコンテンツをサポートするコントロールの追加も行われています。稿では、ASP.NET 3.5 SP1/ASP.NET Controls for Silverlightの概要とアプリケーションの作成について学びたいと思います。 はじめに Visual Studio 2008 Service Pack1(以下、VS2008)の追加機能の一つにASP.NET AJAXのScriptManager(ScriptManagerProxyも含む)コントロールの機能強化があります。また、11月にリリースされた、ASP.NET C

    ASP.NET AJAXの開発をさらにサポート「ASP.NET 3.5 SP1」
  • あのFlashサイトのUIをjQueryで作る (1/5)

    「見た目に美しく、ユーザーに楽しさや心地よさを与えるUIを作りたい」 そう考えたときに参考になるのが、Flashで制作されたWebサイトです。最近では、JavaScriptによるリッチなUIを持つWebサイトも増えてきていますが、長年、さまざまなUIが実験的に生み出されてきたFlashの世界には、まだまだユニークなサイトが多くあります。 たとえば、今回紹介する「ハーズ実験デザイン研究所」のWebサイトは、フルFlashで制作された“楽しい”コーポレートサイトです。同社が手がけてきた過去の作品を、時間の経過とともにゆっくりと切り換えていく様子は、まるで1の映像作品を見ているよう。メニューのちょっとした動きひとつをとっても、ユーザーを楽しませようという意図が感じられます。 Flashサイトのような美しくて楽しいUIを、JavaScriptでも作れないか――それが今回のテーマです。 今回のお手

    あのFlashサイトのUIをjQueryで作る (1/5)
  • 技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方

    Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ

    技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方
  • いま一番美しい、JavaScriptが効果的な新サイト

    FlashからJavaScriptへ――。ソニーグループのコーポレートサイトがJavaScriptを使って全面リニューアルされるなど(関連記事)、JavaScriptの勢いが感じられた。そんな2008年の年末にまた1つ、注目のWebサイトが国内で誕生していた。「榊田倫之建築設計事務所」のコーポレートサイト(http://www.sakakida.com/)だ。 細かな黒のチェック模様の上に浮かぶ、白いレクタングル。細いサンセリフのフォントで綴られた英文の会社名に、小さなテキストで示されたメニュー。そんなシンプルな榊田倫之建築設計事務所のWebサイトは、無駄な要素を極力削ぎ落とした“最小限”のデザインが印象的なサイト。今年2月に発表された「第4回JWDA WEBデザインアワード」(主催:日WEBデザイナーズ協会)では、奨励賞に選ばれた。 このサイトの主役は、同サイトのオーナーである建築家・

    いま一番美しい、JavaScriptが効果的な新サイト
  • テクノロジー : 日経電子版

    1回の充電で東京―大阪間に相当する500キロメートルを走れるリチウムイオン電池技術の開発が活発だ。積水化学工業の技術は突破のメドがたち、旭化成も近づいた。いずれも既存の電極を使うこ…続き 再エネ効率的に貯蔵、「ナトリウムイオン電池」寿命・容量が増大 [有料会員限定] トヨタの全固体電池 2025~30年EVが化ける [有料会員限定]

    テクノロジー : 日経電子版
  • 【ハウツー】Web開発者必見! jQuery UI ウィジェット3選 (1) シンプルでかつ強力なウィジェット群 | エンタープライズ | マイコミジャーナル

    7月3日に掲載した記事「jQueryを使ってるならコレ! ウィジェットライブラリの決定版 - jQuery UI」ではjQuery UIの簡単な概要と、jQuery UI/SliderとjQuery API/CSSを組み合わせたサンプルコードをいくつか紹介した。簡単なコードを追加するだけで、工夫次第でさまざまな使い方ができるUIを作成可能ことがおわかりいただけたと思うが、jQuery UIには他にも汎用性の高いコア機能とウィジェットが用意されている。稿ではその中でもとくに興味深いウィジェット「Datepicker」「Dialog」「Tabs」を紹介する。 なおWebブラウザ実行環境と使用したJavaScriptファイルは次のとおり。 Microsoft Windows XP SP3 / Microsoft Internet Explorer 7 FreeBSD 8-current / M

  • 【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (1) ドラッグ&ドロップでカラム幅を変更可能 | エンタープライズ | マイコミジャーナル

    Webアプリケーションの操作性を向上させるために、いまや欠かすことのできないJavaScript。Prototype.jsやjQueryといった各種フレームワークを使用して、ユーザビリティを高めている開発者も少なくないだろう。 ここ数年の間でYahoo! UI LibraryやExt JS、Dojo Toolkitといった、開発のしやすさや・操作性の向上はもちろんのこと、綺麗なデザインも兼ね備えているライブラリが増えてきた。既存のWebアプリケーションに少しのコードを追加するだけで、機能もデザインも付加できるこれらのライブラリは非常に魅力的だ。 ここではテーブルで組んだリストに対して、まるで表計算ソフトのような操作性を提供するFlexigridライブラリを紹介したい。 ネイティブアプリケーション並みのリストを実現 FlexigridとはPaulo P. Marinas氏が開発・公開している

  • jQuery UI

    jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.14? Compatibility with recent jQuery versions (up to 3.7): Usage of deprecated jQuery API

  • moto-mono.net

    This domain may be for sale!

  • JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)

    HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手サイト: 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器

    JavaScriptでびゅんびゅんスライド!ページ切換法 (1/5)