ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript（マルチタッチ編）
90秒で理解するiPhone JavaScript（マルチタッチ編） Tweet 2008/7/28 月曜日 matsui Posted in iPhone | 10 Comments » 仕事でiPhone向けサイトを作ることになるかもしれず、色々と調査中です。 まずはiPhoneならではの機能ということで、マルチタッチについて調べてみました。 ここまでわかったことをメモ代わりに記載したいと思います。 今回はひとまず座標の取得までです。 ゆくゆくは、こちらのムービーのように凝ったギミックを作りこみたいと思っています。 マルチタッチの座標を取得するのは思ったより簡単で、抑えるポイントは4つだけです。 Safari自体のスクロールや拡大・縮小は動作しないようにした方が無難 タッチのイベントは、リスナーまたは「onTouchXXX」から取得 タッチ数は「event.touches.length
[JS]限られた領域内で大きい画像をドラッグでスライドできるスクリプト -SpryMap
大きい画像を限られた領域内に表示し、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." /
ブロック要素等をアニメーションで他に切り替えるならコレ「transm.js」:phpspot開発日誌
ブロック要素等をアニメーションで他に切り替えるならコレ「transm.js」。 例えば、ページヘッダーのメイン画像なんかをアニメーションさせながら別の画像に切替えるような際に使えます。 ↓アニメーション↓ これでもか、というぐらい大量のアニメーションが用意されていて、ページ上のデモで動作確認することができます。 Transition で 最初から選択されている、random を選んで「Transition area」をクリックしてアニメーションが確認できます。アニメーションの種類だけでなく、Tweeningによって加速度なんかの設定もできます 少ないスペースで時間によって出し分けたい、そしてアニメーションさせて注目を集めたいというようなシーンでかなり力を発揮してくれそうなライブラリですね。 対応ブラウザとして、Mozilla Firefox 1.5+, Opera 9+, Safari 2
またまた登場！凄くリッチなWEBアプリ作成フレームワーク「Ajax.org Platform」:phpspot開発日誌
またまた登場！凄くリッチな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
1.5KBで実装できるスライドショー用JavaScript ライブラリ「TinySlider」:phpspot開発日誌
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のみで実現するクールなドロップダウンのサンプル:phpspot開発日誌
JavaScriptなしでCSSのみで実現するクールなドロップダウンのサンプルが公開されています。 次のように、明らかにJavaScript 使ってるんじゃないか？と思うのですが、CSSのみでelement:hoverを使って実現されています。 ソースコードも解説されているのでこのテクニックについて覚えておいてもよさそう。 以下のエントリを参照してください。 Incredible Drop Down Menu Solution With CSS Only | AEXT.NET 関連エントリ jQueryで幅の大きなドロップダウンメニュー作成チュートリアル セクシーなドロップダウンメニュー実装サンプル
サイト内リンクでページ遷移するAjaxサイトの作り方 – creamu
yensdesignというサイトで、サイト内リンクでページ遷移するAjaxサイトの作り方が公開されています。 ↑がナビゲーションになっていて、クリックすると、「#home」や「#tutorials」という形でパラメータがついて、ページ遷移します。 リロードが必要ないので、ページ移動がスムーズで気持ちいいですね。 デモは以下から。 Try the tutorial! XHTMLとCSS、JavaScriptソースが載っているので、一度見てみてください。 Creating AJAX websites based on anchor navigation Amebaとロクナナのイベントが発表されました。友人がイベントに興味を持っていたので、以前打ち合わせにきてもらったのです。その後実現に至ったようでうれしいですね。 名村くんと浦野くんも出ますね。興味のある方はぜひ！12/8正午から申し込み開始と
[JS]打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプト
YouTubeで実装されているプレイヤーのサイズ変更のように、打ち出しエリアのサイズをユーザーの任意で変更可能にするスクリプトをJanko At Warp Speedから紹介します。
jQueryを使いドロップダウン変更によって文字を大きくするスニペット:phpspot開発日誌
jQueryを使いドロップダウン変更によって文字を大きくするスニペットが公開されています。 1から実装しても全く難しいものではありませんが、それなりに使えそうなのでご紹介です。 ↓ドロップダウン選択で文字が大きくなります↓ 次のように2行で実現しているところがjQueryの素晴らしいところ。 セレクタを変えれば、特定の部分だけを大きくすることが出来ますね。 var size = $(this).val(); $("#main").css('font-size', size+'px'); ペラの１ページだけのサイトなんかに入れておくと文字を大きくできて便利かもしれませんね。 Zooming with jQuery and CSS. クッキーでサイズを保存するような機能は付いていないので、欲しい場合は付ける必要がありますが、jQuery Cookie pluginなんかを使えばこれも簡単ですね
スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」:phpspot開発日誌
jScrollPane スクロールのデザインするならコレが便利なjQueryプラグイン「jScrollPane」。 ちょっと前に話題になっていたような気がしますが便利なのでご紹介。 デザインサイトなどで、スクロールを使ってしまうとOSによって見栄えが変わってきてしまって全体のデザインを崩してしまいますが、このプラグインを使えばそういうこともなさそうですし、更に拡張された機能を使うことができます。以下にピックアップします。 デザイニング 次のような自由にデザインされたスクロール付きブロックを実装可能 プラットフォームに関わらずWinXPスタイルのスクロールバー実装 同様にMacOS Xみたいなスクロールバーも実装できます 拡張機能 さらに面白いのが、スクロール内でさらにスクロールさせるという機能。 スクロール要素をネストできます あと、スクローラー外部からの<A>タグをクリックで指定位置にス
ヤフー、JavaScriptライブラリ「YUI 3.0.0」を公開
Yahooは米国時間9月29日、「Yahoo User Interface（YUI）」ライブラリのバージョン3をリリースした。同ライブラリは、JavaScriptやCSS（Cascading Style Sheet）で記述された装飾的なユーザーインターフェースエレメントをウェブサイトに付加することのできる、プログラマ向けのソフトウェアコレクションである。 YahooのEric Miraglia氏は29日付のブログ投稿で、「YUI 3のコアインフラとそのユーティリティスイートは、今日リリースされたバージョンでプロダクションレディの状態になったと考えている」と述べた。「われわれが今日、バージョン3.0.0としてリリースしたコードは、新しいYahooのホームページで使用されているものと同じコードであり、積極的にかつ広範囲にすでに利用されており、自信をもって提供できる」（Miraglia氏のブログ
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
[JS]簡単に設置できる超軽量のコンテンツスクローラーのスクリプト -TinyScroller
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」:phpspot開発日誌
シンプルなのにクールなJavaScriptショッピングカートシステム「simpleCart」 「ADD TO CART」で画面遷移なしにカートに移動し、個数の調整も簡単に行えます。 １ページに多数のアイテムを並べるというシンプルな動きなので、使い方にも迷うことはなさそうです。 デフォルトで、Paypal と Google Checkout による決済が出来るようです（日本では使えないかもしれません） 非常に軽快でクールなカートシステムなので、ストレス無く買い物ができてしまいそうです。 覚えておいて損はないかもしれませんね。 ドキュメントページもシンプルで分かりやすいです simpleCart(js) - Javascript Shopping Cart by The Wojo Group
ドロップダウンメニューを作るならこのスクリプト – creamu
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を使ったシンプルなドロップダウ
カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組み:phpspot開発日誌
Ajaxed Sliding Shopping Cart With jQuery カートが目立たず、いい感じにスライドしてくれるショッピングカートの仕組みが公開されています。 実際の動作を見るにはデモページを参照するのがよいかもしれません。 デモページ これは新しい動きですね 関連エントリ 超かっこいいJavaScriptショッピングカート「simpleCart(js)」 PHP製のショッピングカートシステムいろいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]ブラウザのサイズに合わせてレイアウトがアニメーションで変更されるスクリプト -Sliding Resizable Grid
ボタンを綺麗に修飾してくれるライブラリ「sexybuttons」:phpspot開発日誌
[JS]画像をダイナミックな上下のスライドで変更するスクリプト | コリス
ドラッグ＆ドロップできるサイトマップ作成チュートリアル:phpspot開発日誌