Plugins | jQuery Plugins
jQuery Swipe For iPhone & iPod Touch mobile apps iPhone and iPod Touch swipe gesture support using Safari JavaScript for onTouchStart, onTouchMove, onTouchEnd and onTouchCancel. This plugin uses Mobile Safari's built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
iPhone clickイベント - kotaroito's notes
li要素をタップしたら、ほげほげ（アラート出す、ハイライトする、etc）させたかったのでonclickを使ってたんだが、どうも動きがもっさり。ググってみるとこんな記事が。 Remove onClick delay on webkit for iPhone Developing on the webkit for iPhone I encountered a curious delay on onClick events. It seems that the click is triggered with about 300 milliseconds delay. While this is unnoticeable on a standard web page, it can be annoying on a web application. Fortunately the click e
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
jQuery Mobileとは――スマホ時代の到来とWeb制作 (1/3)
「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対応したスマートフォンサイトを手軽に制作できます。 jQuery Mobileを使ったスマホサイト制作の基本から実践的なテクニックまで、ベストセラー「Web制作の現場で使う jQueryデザイン入門」（Web Professional Books）の著者・西畑一馬さんが解説します。（編集部） 「jQuery Mobile」は、モバイルWebアプリケーションやスマートフォンサイトの構築でいまもっとも注目されているフレームワークです。jQuery Mobileを使えば、iPhone/Androidをはじめ、さまざまなスマートフォンのブラウザーに対
スマートフォン向けサイトの作り方エントリのまとめ:phpspot開発日誌
スマートフォン向けサイトの作り方エントリのまとめ。 スマートフォン元年といわれる2011年ですが、注目を集めているせいか、サイト作成法についてのエントリも盛り上がりをみせていますね。 個人的にもしっかり覚えておきたかったのでまとめてみました。 基本的には解像度が大きく異なるので、それにあったインタフェースに変えましょうね、という点と、HTML5/CSS3が使えるので駆使して楽にＵＩデザインしましょうという点、ユーザインタフェースがマウスではなくタッチである、という３点以外は、普通のサイト作りと変わりませんが、クセやバグがあったり、テクニックもあるので、しっかり押さえておきたいですね。 基本 スマートフォン向けサイトの作り方｜ユージック サイトの幅、高さ viewportによるズーム指定の方法 便利なJSライブラリ ユーザエージェント シュミレーター 等の有用情報 Androidサイトは横幅
iPhone,iPadをPC上でエミュレータ「iBBDemo2.0」使い方？快適にシミュレーター可能
あなたのサイトやブログは今大流行中のアップルのiPhoneやiPad（日本ではソフトバンク販売）でどのように見えるだろうか？iPhoneやiPadが手元になくても見える方法はないのか？このブログはiPhoneで以下のように見えました。 iPadでは以下のようにシミュレーション（デモンストレーション）できました。 私のこのブログはＰＣでシミュレーションしてiPhoneやiPadを画像にあるように見えることを確認しました。日本語がないので苦労しましたが、このシミュレーションを可能にした無料エミュレータのソフトの「iBBDemo2.0」の使い方とは？ 無料ソフトのエミュレータ「iBBDemo2.0」の使い方 iPhoneやiPadでどのように見えるのかを簡単にＰＣでシミュレーションしてくれるエミュレータが「iBBDemo2.0」ですね。この優れもののソフトはアップルのＳａｆａｒｉ（サファリ）とい
PCからMacにiTunesの同期環境を移行してみた - もとまかのiPhone・iPod touch戯れ日記
不慣れなことをすると、痛い目に会うわけですが(^^;;まあ折角なので、色々やってみた結果をメモしてみます。 アプリケーションの同期をするには、AppStoreとコンピュータの認証が必要。 ※iTunesのメニューから「Store」−「コンピュータを認証」を選択 認証できるのは５台のコンピュータまで、の様子。 ただし、同時にアプリケーションの同期が出来るのは１台だけ。 今回の私のように、PCのiTunesと同期していてMacに環境を移したい場合は普通に同期したら、「Mac（空っぽ）→iPhone」という経路で同期されてしまい、iPhoneのアプリが消えてしまう様子。 うーん・・・・いちいちAppStoreからダウンロードしてくるのも面倒だしなぁ。 ってことで、簡単にアプリ環境を再構築する方法のメモです。 １．PCの以下のフォルダにアプリのファイルがあるのでMacに移動する。（拡張子がipaの
iPhone向けWebサイトの制作等に役立ちそうな情報まとめ
iPhone向けのWebサイトを制作する 際に役立ちそうな情報のまとめです。 情報が多くて混乱し始めたので、個人 的なメモ。iPhone関連のWeb制作情 報は基本的に載せています。アプリ 制作とかそっち系はたいして無いの でご了承下さい。 個人的にグッと来たiPhone / iPad周りの情報をメモ的にまとめておきます。素材とかフレームワークとかTipsとかそういうの中心で、SDKとかObjective-C的な情報は無いです。順不同。 フレームワークとかスクリプトWebアプリとかiPhoneサイト向けのフレームワークとか。 jQuery Mobile スマートフォン向けのjQuery公式ライブラリ。リリースが待ち遠しいですね。 jQuery Mobile Sencha 以前触ってみたので記事にしました。HTML5とjsのみのWebアプリ向けフレームワーク。 Sencha Titanium
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する PC向けに作ったサイトをiPhoneやiPadでも利用できるようにする際に注意しなくてはいけないのがJavaScriptのイベントです。 iPhone/iPadではonmouseoverやonmousedownなどのonMouse系のイベントが利用できず、代わりにontouchstartやontouchmove、ontouchendなどのonTouch系のイベントが用意されています。 使い分けとしてはだいたい次のようになります。 ontouchstart = onmousedown ontouchmove = onmousemove ontouchend ≒onmouseup ですのでjQueryを利用した場合、 var ua =navigator.userAgent; if(ua.indexOf('iPhone'
給湯器の調子が悪い、交換したいそんな時はどうすればいいの？
給湯器の調子が悪い時の合図は何があるの？ 石油やガスの給湯器が何となく調子が悪い、そう感じたら早めの修理や交換がお勧めです。もし今、使用している給湯器がかなりの年代物ならぜひ交換を検討してみてください。実際には、どのような状態になったら給湯器は修理・交換のタイミングなのでしょうか？詳しく解説します。 給湯温度が安定しない 蛇口からでてくるお湯の温度が急激に熱くなったり、ぬるくなったり、冷たい水が出てきたりと安定しない時は給湯器が故障しているかもしれません。またオート・フルオートタイプの給湯器でお湯を張った時に設定した温度より温い場合も給湯器の故障が考えられます。 もし10年以上使い続けている給湯器なら修理をすることができませんので、思い切って交換したほうが良いでしょう。 大きな音がする 給湯器から出るボンっという音が出ることがありますが、この爆発音がいつもより大きい場合には注意しましょう。
iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhone/iPadに溜まっている未読メールを一瞬で既読にする方法 – TouchNavi（たっちなび）
iOS3対応をする時のCSS3注意点 | Nega Universe