続：レスポンシブのサイトでスマホの時だけtelリンクを有効にする ｜ Tips Note by TAM
前回の記事「レスポンシブのサイトでスマホの時だけtelリンクを有効にする」の続きです。 前回紹介した記事の記述では、単純に 「ユーザーエージェントが『iPhone』『Android』であるデバイス」のみ、 電話番号にtelリンクを設定しました。 しかし、実はこれだけでは以下のような問題があります。 ユーザーエージェントに「iPhone」を持つデバイスの中には、「iPod」も含まれる。 ユーザーエージェントに「Android」を持つデバイスの中には、「Androidタブレット」も含まれる。 電話をかけることのできないiPodやタブレットで、 電話番号にtelリンクが設定されるのは好ましくありません。 そこで、 「ユーザーエージェントに『iPhone』を持つデバイスのうち、『iPod』も含むものを除外」し、 「ユーザーエージェントに『Android』と『Mobile』を含むもの」にtelリンク
Tikku.com
Overview The jQuery TubePlayer Plugin was originally created in July 2010. The plugin is a jQuery wrapper around the YouTube Player API. It has evolved over time and is still the simplest interface to control and manage YouTube Player(s). The plugin allows developers to focus on functionality as opposed to infrastructure around the YouTube player. The plugin exposes meaningful methods that are tri
iPhone4のRetinaディスプレイで閲覧したらjQueryでRetina向け画像(@2xのやつ)に自動で切り替える
iPhone4のRetinaディスプレイで閲覧 された際に自動で高解像度の画像に 自動で切り替えるjQueryのコード。 @2xが付くアレです。ちょっと今更 な話題なので誰も見て無さそうな 日曜日に書いて置こうと思います。 jQuery Retinaっていうプラグインがありますが、このライブラリのように色々宜しくやってくれるようなものじゃなく、ただのスニペットです。実際にはもうちょい工夫しないとならないと思いますので参考程度で。というか僕がRetinaなんとかの事を良く分かって無いでｓ コードif (window.devicePixelRatio > 1) $('img').each(function() { var t = $(this); t.attr('src', t.attr('src').replace(/(\.[a-z]+)$/i, "@2x$1")); });window.d
[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina
Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retina Plugin jQuery Retina -GitHub [ad#ad-2] jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加える。 画像のファイル名に「-2x」を加える。 コールバック関数を使ってファイル名を指定する。 表示はどの方法を使っても一緒ですが、下記にそれぞれの方法で実装したデモがあります。 デモページ [ad#ad-2] jQuery Retinaの使い方 jQuery Retinaの使い方は簡単です。
パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」:phpspot開発日誌
パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 2011年10月03日- Azoff Design | Overscroll | An iOS scrolling emulator for jQuery パソコンのブラウザ上でもiOSみたいなスクロールが実現できるjQueryプラグイン「Overscroll」 Googleマップみたいな感じといえばそうなんですが、加速度がついてアニメーションしながら移動する点なんかも再現されています。 使い方が簡単でスクリプトを読み込んだら、iOSちっくにしたい部分を $(element).overscroll() だけで設定できるのが熱いです。 ホイールにも対応していて芸が細かいです。 使いどころは色々ありそうですが、スマホアプリの紹介ページなんかでつかってもインパクトがありそうですね。 関連エ
iPhoneやiPadにも対応の、ページをめくるようなエフェクトを実装出来るjQueryプラグイン・FlipPage
面白そうなアイデアが生まれそうな気がして なんとなくメモ。よくあるページめくりの エフェクトを実装するjQueryプラグインで、 iPadやiPhoneにも対応しているので個人的 にはむしろ、タッチデバイス向けに使いたい という気もしています。Android等でも使え るそうですよ。 フリック対応ならiPad用って考えてもいいかも、とか思いました。シンプルでマークアップもかなり楽です。 ちょっと分かりにくいですけどめくれてるんです。divで囲った要素ごとにめくるので画像だけでなく、テキストでも何でも出来るのが素敵。 実機でテストしましたが、確かにフリックでめくることが可能でした。が、ネイティブアプリのような軽快な動きは期待しないほうがいいですかね。スパイス的な役割として使いたいところです。それか、誰か改良して！ 一応マウスでも操作できるのでお試し下さい。Result押せばデモを確認出来ます
PhotoSwipe
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage
FlipPage 右端がぺらっとしてますが、キャプチャだと分かりにくいですね。 [ad#ad-2] FlipPageの実装 HTML 画像を配置したdiv要素をdiv要素で内包します。 <div id="exemples"> <div><img src="img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img1.jpg" style="margin-left: -250px;" /></div> <div><img src="img2.jpg" style="margin-left: 0px;" /></div> <div><img src="img2.jpg" style="margin-left: -250px;" /></div> <div><img src="img3.jpg" style="margin-le
iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」:phpspot開発日誌
Roto | jQuery Plugins iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 PCオンリーでも使えるのですが、iPhoneでもスワイプで画像をドラッグ＆ドロップで送れるプラグインです。 PCで見るとボタンが表示されて画像を送ることができますし、iPhoneでアクセスするとボタンは非表示で画像をカルーセルできます。 横に一列というだけじゃなくて、縦にもスライドできます。 HTML5アプリとしてphonegapなんかを使ってiPhoneアプリを作る場合なんかにもいいかもしれません。 関連エントリ スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 ソーシャルな活動を１個にまとめて配信できるjQueryプラグイン「LifeStream」 オープンソースのマルチタッチ用ジェスチャーアイコンセ
[JS]ブラウザでiPhoneのような滑らかスクロールを実現するスクリプト -Overscroll
デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。 Overscroll デモページ [ad#ad-2] Overscrollのデモ デモではコンテンツを「Click+Drag」することで、滑らかスクロールでコンテンツを表示します。 デモページ Overscrollの実装 デモを例に実装方法を紹介します。 HTML スクロールするコンテンツに必要な箇所は「div id=screen」です。 デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリーンの箇所が表示されます。 <div id="ithing"> <div id="screen"> <img alt="loading..." src="/static/img/sfmap.jpg" /> </div>
ke-tai.org > Blog Archive > iPhoneでjQueryをつかってシェイクジェスチャー（振る操作）を検出するサンプル
iPhoneでjQueryをつかってシェイクジェスチャー（振る操作）を検出するサンプル Tweet 2011/7/8 金曜日 matsui Posted in iPhone, 記事紹介・リンク | 1 Comment » タグ: iPhone, jQuery 最近の記事 2013/6/1に第四回札幌MySQL勉強会開催を行います 2013/1/26に札幌で「LOCAL DEVELOPER DAY ’13 / Infra & Security」が開催されます 2012年11月にEZwebのIPアドレス帯域の一部削除がありました Titanium Mobile で Android, iOS 両対応のアプリを開発する際の注意点 2012年11月にEZwebのIPアドレス帯域の一部が削除されるようです One Response to “iPhoneでjQueryをつかってシェイクジェスチャー（振る
iOS4.2+ / モバイルSafariの「振る動作（シェイクジェスチャー）」をjQueryを使って検知する
iPhoneを振る動作（シェイクジェスチャー） によって呼び出されるモーションイベント をjQueryで検知するgShakeのご紹介。 iOS4.2以上 / Safariでは加速度センサー をJavaScript経由で使うことが出来ますが、 これをjQueryでやろう、という内容です。 備忘録です。別にjQueryじゃなくてもいいじゃんみたいな話なんですけど、まぁjQuery大人気ライブラリだし覚えておいて損は無いんじゃないでしょうか。 この件に関しては以前カヤックのえどさん(@edo_m18)が記事とデモを用意してくれてるのであわせて参考にして頂ければ幸いです。 iOS4.2のSafariから追加された加速度センサーでシェイクジェスチャを作るgShake 3KBと軽量で、導入も簡単です。 以下サンプルご用意しました。iOS4.2以上のモバイルSafariで軽く( ﾟ∀ﾟ)o彡゜すればアラ
jQueryやHTML5を使ってiPhoneやiPad向け電子書籍を作成する為のフレームワーク・Laker
iPadや、iPhoneなどのタッチデバイス の普及で、個人的にも電子書籍への 関心がかなり高まりました。そんな中、 割と良さそうな電子書籍専用のフレーム ワークがあったのでメモがてらご紹介。 こういうの覚えておくと重宝しそうですね。 なかなか動きが良かったです。ただ読むだけの電子書籍ではなく、HTML5やjQueryを使って、より「電子」らしく表現出来ると楽しそうですね。 HTML5で作る電子書籍用のフレームワークです。jQueryやiPadのようなタッチデバイス向けのフレームワークとなっています。 複数フレームワークを併用 Lakerには定番のjQueryや、iPhone、iPadで黄金比を保つcssフレームワークのLess Framework、HTML5+jQuery製動画プレイヤーのjPlayer、スワイプイベントをサポートする為のライブラリ、TouchSwipeなども搭載されてい
HTML5やCSS、jQueryなど、Web制作に関する日本語スライドを集約したSlideFinderが便利っぽい
結構便利だったのでシェア。Web制作 に関する日本語スライドを集約している フォロワーさん作のWebサービスです。 話題のHTML5やCSS、iPhoneの事や jQueryからPHPやRubyと幅広くサポート してあります。 人気のスライド共有サイト、SlideShareで日本語のスライドのみを集めています。スライドはその場でLightbox風にポップアップして見れます。英語が苦手な方も探す手間が省けるのでは。 @deeekiさん作のWebサービスです。クックパッドのエンジニア向け「第2回 開発コンテスト24」に応募する予定だったようで、数時間で作成されたみたいで見た目はシンプルですね。 カテゴリもHTML5やjQuery、PHPやiPhone、WordPressなど多岐にわたりサポートされていますので全Web屋さん向けと言えそうです。 日本語のスライドのみを集約 集められたスライドは全
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」:phpspot開発日誌
iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」 2011年02月17日- Skinkers Labs : TouchSwipe iPhone/iPad用サイト作成時に使えるスワイプイベント実装jQueryプラグイン「TouchSwipe」。 タッチパネルを触って左にスライド、右にスライドといった操作をスワイプといいますが、このイベントを取得するjQueryプラグインのご紹介です。 1本指だけではなく、2本指でスワイプした際のイベントを取ることも出来ます（それぞれ区別可能） ブラウザ上でiPhoneアプリっぽい動作を簡単に実現できますね。 demoをiPhone等で見てみましょう(違和感なくスワイプできるはずです） 1本指スワイプのデモ 2本指スワイプのデモ スワイプを使った画像ギャラリー 実装はjQueryベースということでや
18 free UI elements packs for your web designs and apps
Looking to make your web design process faster? These sets of PSD and vectors of UI elements should help you. 1. jQuery UI widgets jQuery must be the most popular javascript framework out there, this set of UI widget will make the development process much quicker. 2. Modern Web UI Set A well-organized PSD, with vector layers you can edit to blend perfectly in your web design or application. 3. Web
ke-tai.org > Blog Archive > スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」
スマートフォン向けJavaScriptフレームワークであるjQueryMobileの使い方がわかりやすく解説されている記事「はじめてのjQueryMobile」 Tweet 2010/11/16 火曜日 matsui Posted in 記事紹介・リンク | No Comments » つい先日Alpha2がリリースされ、来年早々には正式版がリリースされる予定となっている、スマートフォン向けJavaScriptフレームワークである「jQueryMobile」ですが、その使い方をわかりやすく解説しているブログエントリーがありましたのでご紹介します。 → Mach3.laBlog はじめてのjQueryMobile [blog.mach3.jp] 1ページの短い記事ですが、前提知識の解説から、HelloWorld、ページ遷移、コンポーネントの使い方と、基本的な部分が抑えられている感じです。 サ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Toggles | Simon Tabor
[JS]大量ページの本やマンガをiPad/iPhoneで表示できる -Diva.js
5509.me