90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length

大きい画像を限られた領域内に表示し、Googleマップのようにマウスのクリックとドラッグでその画像をアニメーションでスライドできるスクリプトを紹介します。 SpryMap デモページ [ad#ad-2] スクリプトはjQueryなどの他のライブラリは必要とせず、単独で動作します。 SpryMapの特徴 他のライブラリに依存せずに動作する超軽量（3KB）のスクリプト。 画像を表示する領域はピクセル単位で指定が可能。 画像を最初に表示する座標を設定可能。 スクロールのアニメーションの時間を設定可能。 SpryMapの実装 実装は簡単で、画像にidを指定して使用します。 HTML スクリプトでラッパーとなるdiv要素を追加します。divのclassはオプションで設定できます。 <img id="worldMap" src="map.jpg" alt="A map of the world." /

<textarea name="code" class="html" cols="60" rows="5"> <div class="slidegrid"> <div class="cell bigcell">Big Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> <div class="cell">Cell 4</div> </textarea>

ブロック要素等をアニメーションで他に切り替えるならコレ「transm.js」。 例えば、ページヘッダーのメイン画像なんかをアニメーションさせながら別の画像に切替えるような際に使えます。 ↓アニメーション↓ これでもか、というぐらい大量のアニメーションが用意されていて、ページ上のデモで動作確認することができます。 Transition で 最初から選択されている、random を選んで「Transition area」をクリックしてアニメーションが確認できます。アニメーションの種類だけでなく、Tweeningによって加速度なんかの設定もできます 少ないスペースで時間によって出し分けたい、そしてアニメーションさせて注目を集めたいというようなシーンでかなり力を発揮してくれそうなライブラリですね。 対応ブラウザとして、Mozilla Firefox 1.5+, Opera 9+, Safari 2

またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」 2009年12月16日- またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」。 Ext.js ばりにきれいなUIと多機能さで今後が期待されるJSフレームワークです。 次のような綺麗でリッチなインターネットアプリケーションが作れます。 デモページには多数のコンポーネントが掲載されていて色々できることがわかります。 GoogleMapや、各種UIパーツの他、３Dグラフなんかも面白いです。 JavaScript でクネクネ動く3Dグラフです。 以下のページを参照してください。 Ajax.org - The real-time collaborative application platform

ボタンを綺麗に修飾してくれるライブラリ「sexybuttons」。 次のようにデフォルトのボタンを綺麗に修飾してくれます。 デフォルトボタン 修飾後ボタン 他にも色々なボタンに変更することができます。 サポートブラウザは以下みたいです Mozilla Firefox 3.5 Internet Explorer 6+ Safari 4 Google Chrome Opera 10 以下のサイトを参照してください。 sexybuttons - Project Hosting on Google Code

1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」。 次のような、左右のナビゲーションとページ番号がついたスライドショーの実装スクリプトの紹介です。 jQueryプラグインではありませんが、jQueryバリに簡単に実装できる模様です。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', // スライドショー用のdivのID auto:3, // 自動再生の秒数 vertical:false, // 垂直方向に移動するかどうか navid:'pagination', // ナビゲーションのID activeclass:'current', // ナビゲーションLIのアクティブなクラス名 position:0 // 最初のスライド位置 }); カスタマイズも容易ですね。 デモと

JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル

yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLとCSS、JavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ！12/8正午から申し込み開始と

Create a Vertical Sliding Bar Thumbnail Effect demo 上下にスライドするアニメーションはとても軽快で、ぜひデモページで実際に試してみてください。 パネルは分割する必要はなく、スクリプトのオプションではインとアウトのスピードやバウンスなどの調整ができます。 スクリプトのベースにはjQueryが使用されているため、実装にはjquery.jsが必要です。

YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。

jQueryを使いドロップダウン変更によって文字を大きくするスニペットが公開されています。 1から実装しても全く難しいものではありませんが、それなりに使えそうなのでご紹介です。 ↓ドロップダウン選択で文字が大きくなります↓ 次のように2行で実現しているところがjQueryの素晴らしいところ。 セレクタを変えれば、特定の部分だけを大きくすることが出来ますね。 var size = $(this).val(); $("#main").css('font-size', size+'px'); ペラの１ページだけのサイトなんかに入れておくと文字を大きくできて便利かもしれませんね。 Zooming with jQuery and CSS. クッキーでサイズを保存するような機能は付いていないので、欲しい場合は付ける必要がありますが、jQuery Cookie pluginなんかを使えばこれも簡単ですね

jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス

Creating a Draggable Sitemap with JQuery ・Boagworld ドラッグ＆ドロップできるサイトマップ作成チュートリアルが公開されています。 次のようなツリー形状でツリー間を移動することが可能な物を作成します。 サイトマップでなくとも、階層構造をドラッグ＆ドロップさせるようなＵＩの実装の際に参考に出来ますね。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 PHPとjQueryのAjax連携の学習用チュートリアル jQueryでアコーディオン作成のチュートリアル

Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。

divで配置したパネルをスクロールできるようにする超軽量のスクリプトをleigeberから紹介します。 TinyScroller JavaScript Scrollable Div – 1.7KB demo スクリプトの容量は約1.7KB（圧縮時）で、対応ブラウザはIE6/7/8, Fx, Op, Safari, Chromeとなっています。 設置も簡単で、パネルのdiv要素と同列に下記のスクロールバーとなるdiv要素を配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="scrollbar"> <div id="scroller" class="scroller"></div> </div> </textarea>

シンプルなのにクールなJavaScriptショッピングカートシステム「simpleCart」 「ADD TO CART」で画面遷移なしにカートに移動し、個数の調整も簡単に行えます。 １ページに多数のアイテムを並べるというシンプルな動きなので、使い方にも迷うことはなさそうです。 デフォルトで、Paypal と Google Checkout による決済が出来るようです（日本では使えないかもしれません） 非常に軽快でクールなカートシステムなので、ストレス無く買い物ができてしまいそうです。 覚えておいて損はないかもしれませんね。 ドキュメントページもシンプルで分かりやすいです simpleCart(js) - Javascript Shopping Cart by The Wojo Group

HONGKIATで、ドロップダウンメニューを作るスクリプトがまとまっています。 ざっといくつかご紹介。 » CSS Drop-Down Menu Framework GNUライセンスのCSSドロップダウンメニューフレームワーク » CSS Express Drop-Down Menus CSSでさくっとドロップダウンメニューを作る方法 » JavaScript Dropdown Menu with Multi Levels javascriptを使ったマルチレベルのドロップダウンメニュー » Smooth Navigational Menu jQueryを使ったマルチレベルのナビゲーション » Mega Drop-Down Menu メニューの中にグループを設定できるメガドロップダウンメニュー » Mega Drop-Down Menu MooTools1.2を使ったシンプルなドロップダウ

Ajaxed Sliding Shopping Cart With jQuery カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組みが公開されています。 実際の動作を見るにはデモページを参照するのがよいかもしれません。 デモページ これは新しい動きですね 関連エントリ 超かっこいいJavaScriptショッピングカート「simpleCart(js)」 PHP製のショッピングカートシステムいろいろ