jQueryで地震分布図を作成しよう
地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。 対象読者 JavaScriptの経験者、地図アプリに興味のある方。 必要環境 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。 プログラム実行時
JavaScript のフリックイベントでカードをめくる - STONEDSOUL
参考: jQuery.flickSimple 縦フリックに対応しました。 jQuery Touchwipe Plugin JavascriptとCSSアニメーションでフリック操作を実装してみる 続きの続き jQuery Mobile Super Cool CSS Flip Effect with Webkit Animation (via カードをぺろっと裏返すエフェクトを実装するスタイルシート) フリック(またはスワイプ)イベント ちょっと検索してみると、onFlickとかonSwipeとかいう都合のいいイベントハンドラは無いので、touch関係のイベント touchstart touchmove touchend touchcancel gesturestart gesturechange gestureend を使って、タッチしてから放すまでの間に、どのくらい指が動いたかをチェックし
グラフを表示するjQueryプラグイン 前編
はじめに 今回は、簡単に綺麗なグラフを表示できるjQueryプラグイン「jQuery Visualize」を解説します。HTML5のcanvas要素を使って見栄えの良いグラフを描画するプラグインで、折れ線グラフ・棒グラフ・円グラフなど多くの種類のグラフを描くことができます。また、豊富なオプションにより、大きさや色などを自在に変化させることができ、好みのデザインで表示させることができます。 対象読者 jQueryプラグインに興味があり、使ってみたい方 必要な環境と準備 執筆時点のjQueryの最新版は、1.7.2です。第1回を参考に、ダウンロードしてください。また、jQueryプラグインの基本的な使い方は、第3回を参照してください。 サンプルでは、htmlファイルと同じ階層に「plugins」というフォルダを作成し、使用するプラグイン関連のファイルはここにまとめて配置し、説明を進めます。また
[JS]ウェブページにGitHubのリポジトリを簡単に埋め込めるスクリプト -Repo.js
Rope.js: Basic Embed (with a hawt repo) Repo.jsの使い方 実装は3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="repo.min.js"></script> Step 2: HTML GitHubのリポジトリを配置する領域をdiv要素で記述します。 <div id="repo"></div> Step 3: JavaScript jQueryのセレクタで指定し、GitHubのuserとnameを指定します。 <script> jQuery(function($){ $('#repo').rep
Google Chart APIで作成する電力使用状況グラフ
Google Chart APIで作成する電力使用状況グラフ：クラウドとgaedirectでできる緊急対応マッシュアップ（2）（1/3 ページ） gaedirectで緊急時対応マッシュアップする事例 連載第1回の『BigtableをjQueryで操作できる「gaedirect」とは』では、gaedirectの基本機能について紹介しました。gaedirectを使用すれば、緊急時対応サイトなどを、可用性が高くアクセス数急増にも耐えられるクラウド上にJavaScript／jQueryの簡単な記述だけで構築しやすくなります。 今回からは、実際に緊急時対応としてよく使われるサイト表現にgaedirectを適用（マッシュアップ）するサンプルを紹介していきます。その最初となる今回は、gaedirectとWeｂ APIを使用して数値データをグラフ表示します。 なお、gaedirectの公開予定を含めた、今
BigtableをjQueryで操作できる「gaedirect」とは
BigtableをjQueryで操作できる「gaedirect」とは：クラウドとgaedirectでできる緊急対応マッシュアップ（1）（1/3 ページ） 緊急時の“クラウド”の有用性 このたびの東日本大震災で被災された皆さま、ご家族ならびに関係者の皆さまに、心からお見舞いを申し上げます。今回の大震災では、多くのWebサイトでアクセス不能状態が発生したのは、記憶に新しいところです。緊急時こそ、必要な情報を入手するために多くの人がWebサイトにアクセスするわけですが、このような切実に情報が必要とされるときに限って、トラフィック増大によるアクセス不能が発生してしまう状況が多々見られました。 しかし、このような緊急時対応サイトをGoogle App Engine（以後、GAE）などによってクラウド化しておけば、このような問題は解決できたといえます。クラウドを使用すれば、ユーザーアクセスが急激に増加
画像を効果的に見せるjQueryプラグイン
はじめに 第4回「手軽に扱えるjQueryプラグインを使ってみよう」では、jQueryのユーザーインタフェースを拡張するjQueryプラグインの中から、メニューバー、タブ、画像のスライダー、ズーム機能、Twitterのタイムライン表示を紹介しました。第5回では、画像の切り替えや見せ方をテーマに以下のようなプラグインを解説していきます。 画像のスライドショー（Simple Fade SlideShowプラグイン） 画像の円形スライド（MobilyBlocksプラグイン） 画像上にポップアップを表示する（MobilyMapプラグイン） パノラマ画像の表示（panorerプラグイン） 対象読者 jQueryプラグインに興味があり、使ってみたい方 必要な環境と準備 jQueryのダウンロード 執筆時点のjQueryの最新版は、1.4.4です。第1回を参考に、ダウンロードしてください。また、jQue
フォーム入力に役立つjQueryプラグイン
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
jQueryとTwitterのAPIを使ったWindows 7アプリを作ってみた
jQueryとTwitterのAPIを使ったWindows 7アプリを作ってみた：楽しいWindows 7アプリ作成入門（5） 「あんなこといいな」「できたらいいな」というアイデアをWindows 7の表現力で具体的な“アプリ”という形にするには、どうすればいいのだろうか？ 具体的なコードやデモとともに一から教えます Twitterのフォロワーを画像を一覧表示して投稿もできる 本稿では、Webデザイナ／プログラマの方でもテキストエディタとWebブラウザで簡単に作成できる、TwitterのAPIを使ったWindows 7デスクトップガジェット（以下、Windows 7ガジェット）の作り方を紹介します。Windows 7デスクトップガジェットの基礎については、記事「HTML＋JavaScriptで作れるWindows 7デスクトップアプリの基礎知識」を参照しておいてください。 実装する機能は、
第7回 エフェクト編
連載目次 showメソッドは、非表示状態の要素を表示状態にします。引数speedには、表示にかける時間（ミリ秒）、もしくは、あらかじめ決められた値として、slow、normal、fastのいずれかを指定します。引数fncは、要素が表示状態になったときに実行するコールバック関数を表します。 具体的な例も見てみましょう。以下は、ページ・ロード時に非表示状態のアイコン画像を、5秒（＝5000ミリ秒）かけて表示状態にするサンプルです。 <script type="text/javascript"> $(function() { // <div>要素の内容を5000ミリ秒かけて表示状態に $('div').show(5000, function() { // 表示完了時にダイアログを表示 window.alert('表示されました。'); }); }); </script> ……中略…… <div
第6回 イベント編
特定の要素セットに対して、イベント・リスナを設定したり、指定したイベントを実行したりするためのメソッドをまとめた、すぐに役立つ13本を一挙公開。 連載目次 このシリーズでは、jQueryの基本機能を逆引きリファレンスの形式でまとめています。リファレンスという性質上、入門レベルでの解説は割愛しています。jQueryの基本構文、Visual Studio上でjQueryを利用する方法などについては、拙稿「ASP.NETプログラマーのためのjQuery入門」を併せて参照することをお勧めします。 さて、本連載も第6回となる今回はイベント編です。特定の要素セットに対して、イベント・リスナを関連付けたり、指定したイベントを実行したりするためのメソッドについて解説します。 要素セットにイベント・リスナを設定するには？（1） － <event>(fnc) － 要素セットに関連付いたイベント・リスナを実行す
第1回 ASP.NETによる3階層Webアプリ「ITブック」構築（1/4） - ＠IT
連載：改造WebアプリケーションUIビフォー／アフター 第1回 ASP.NETによる3階層Webアプリ「ITブック」構築 葛西秋雄 2010/02/05 はじめに はじめまして、フレンドリーソフトの葛西です。今回は、ASP.NET 3.5で作成した仮想ネットショップである「ITブック」のUI（User Interface）を改善する連載を3回シリーズで投稿します。 連載の第1回では、ASP.NET 3.5のデータコントール（DataList、 Repeater、GridView）を使用して、3階層の「ITブック」を構築する方法を解説します。第2回では、第3回で利用するjQueryとjQuery UIの各種プラグインの基本的な使い方を説明します。そして、第3回では、今回作成した「ITブック」のUIをjQueryとjQuery UIのプラグインを利用して改善します。 本稿を読み進める前に、「I
画像を美しく魅せる効果を加えるjQueryプラグイン3選
画像を美しく魅せる効果を加えるjQueryプラグイン3選：CSSの書き方も分かるjQueryプラグイン実践活用法（4）（1/3 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 2つ重ねて比較・部分切り替え・ズーム/カーテンなど 本連載の第3回「jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示」では、最新のjQueryの機能をいくつか紹介し、jQuery UIの「Tabs」プラグインを利用してタブを表示する方法を紹介しました。また、自作のタブでは、CSSでタブとコンテンツを結合するテクニックについて解説しました。 今回は、以下のjQuery
第4回 要素の操作＆ユーティリティ編
要素セットに対して要素の追加／置換／削除などを行うためのメソッドと便利なユーティリティ機能をまとめた、すぐに役立つ18本を一挙公開。 連載目次 このシリーズでは、jQueryの基本機能を逆引きリファレンスの形式でまとめています。リファレンスという性質上、本稿では入門レベルからの解説は行っていません。jQueryの基本、また、Visual StudioでjQueryを利用する方法などについては、拙稿「ASP.NETプログラマーのためのjQuery入門」も併せて参照してください。 さて、第4回となる今回は、要素の操作（Manipulation）＆ユーティリティ編です。 前半の「要素の操作」編では、要素セットに対して要素を追加／置換／削除するなどの操作を行うためのメソッドについて扱います。 現在の要素セットに対してコンテンツを追加するには？ － append(c)／prepend(c)／afte
jQuery 1.4の新機能8選＋Tabsプラグインでタブ表示
本稿ではまず、そのいくつかを紹介しましょう。 すぐにjQuery 1.4.1がリリース！ CDNも対応 また、jQuery 1.4記念キャンペーン中にバグ修正版のjQuery 1.4.1がリリースされました。その後、jQuery 1.4.1のリリースに伴い、グーグルとマイクロソフトからCDN（Content Delivery Network、詳細は連載第1回「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」を参照）もリリースされています。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/jQuery/jquer
第3回 トラバーシング編
要素セットに対してフィルタリングしたり、親子・兄弟関係にある要素を取得したりするメソッドについてまとめた、すぐに役立つ13本を一挙公開。 連載目次 このシリーズでは、jQueryの基本機能を目的別リファレンスの形式でまとめています。リファレンスという性質上、本稿では入門レベルからの解説は行っていません。jQueryの基本、また、Visual StudioでjQueryを利用する方法などについては、拙稿「ASP.NETプログラマーのためのjQuery入門」も併せて参照してください。 さて、第3回となる今回は、トラバーシング（Traversing）編。「Traverse」とは英語で「行き来する」という意味で、jQueryの場合、$()関数で取得した要素セットに対してさらに絞り込みをかけたり、相対的な親子／兄弟関係にある要素を取得したりすることをいいます（要は、要素間を行き来する、というわけです
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エフェクトをプラスするjQueryプラグイン
ちょっとしたUI効果をプラスするjQueryプラグイン
手軽に扱えるjQueryプラグインを使ってみよう
