スマホだと反応が遅れる :hover を心地良くする方法
スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。（あ、具体的な実装はまた次回ご紹介したいと思います。） 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい？ マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ
TechCrunch | Startup and Technology News
Welcome to Startups Weekly — Haje‘s weekly recap of everything you can’t miss from the world of startups. Sign up here to get it in your inbox every Friday. In…
Androidのoverflow:auto/scroll対策
Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか？ 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性（イベントが競合しても調整しやすいように）を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは？ 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応（Android4.0.4の標準ブラウザ&Chromeで確認）、
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
Tappable by cheeaun
A simple, standalone library to invoke the tap event for touch-friendly web browsers. View the Project on GitHub cheeaun/tappable Download ZIP File Download TAR Ball Fork On GitHub Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers. Currently it's only tested on iOS Mobile Safari as I don't have any other smartphones to test with. The codebase is heavi
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
arctic.js at master from DeNADev/Arctic.js - GitHub
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
スマホ対応の参考に。JavaScriptでウェブページがどのくらい拡大されているのかを取得する方法。
こんにちは。開発担当の林です。 iPhone / iPad のウェブブラウザでページを見ているとき、けっこうな割合でピンチイン・ピンチアウトすると思いますが、それがどのくらい拡大されているのかを取得する方法を書きます。 また、応用でピンチイン・ピンチアウトされても、見た目のサイズを維持するにはどのくらい拡大すれば良いかということにも触れたいと思います。 広告バナーなんかでよく使われてるアレの仕組みです。何かのお役に立てれば幸いです。 ウェブページがどのくらい拡大されているのかを取得する // ページの幅 ÷ 表示されている幅（この行だけでいいかな） var zoomer = document.body.clientWidth / window.innerWidth; // 以下で拡大率を目視できるでしょう alert( zoomer ); // 小数点がたくさんつくので、第二位までに丸め込
UnitePlayer.js 作ったよ - latest log
UnitePlayer はモバイルとゲームに特化した HTML5 な音楽再生プレイヤー UnitePlayer は、モバイルブラウザ上で動作するゲームに音をもたらします。 扱いが難しい Mobile Safari や Android ブラウザの音周りをフォーマット化し、とっても扱いやすくします。 フィーチャーフォン用のソーシャルゲームが大流行な昨今ですが、 フィーチャーフォン用のゲームって音が無いですよね? そのゲームをそのままスマートフォン向けにコンバートしても、音がならずに寂しい感じですよね? 2012年は UnitePlayer で BGM も SE も鳴らしちゃいましょう。 そして没入感や色々なものを高めちゃいましょう! PCブラウザでもそのまま動くから、横展開もお手軽に! UnitePlayer なら iPhone でも BGM と SE を擬似的に同時再生できますよ。 Unit
スマホ用JavaScriptフレームワーク5つ＋1を徹底研究（1/5） - ＠IT
スマホ用JavaScriptフレームワーク5つ ＋1を徹底研究 jQuery Mobile、iUI、jQTouch、 Sencha Touch、Wink toolkit、PhoneGapとは アシアル株式会社 鴨田健次 2011/6/22 スマートフォン向けJavaScriptフレームワーク／ライブラリを使うと、スマートフォンアプリっぽい見た目のページデザイン、UI（ユーザーインターフェイス）パーツやページ遷移アニメーションを簡単に実装できます。多くは、おのおののフレームワークのルールにのっとったHTMLを書くことで、それらの機能を実現します。 本稿では、jQuery Mobileを筆頭として、いくつか発表されているスマートフォンサイト向けJavaScriptフレームワークを紹介します。 ■ PCサイト向けJavaScriptフレームワークについて PCサイト向けJavaScriptフレー
Webクリエイター向けにHTMLやJSの記述をObjective-Cに置き換えてみた（UILabel編）
Web系の人でiPhoneアプリ作ってみたいなーと思ってる人って多いのかな？どうなんだろ？ 個人的には、HTML5技術とか進んでて、Webアプリでもかなりのものが作れるようになってきてますけど、やっぱりまだまだネイティブの方が有利な部分が多いと思ってます。あと、iPhoneの仕様を深く知る上でもいいんじゃないかなーと。 ちょっとしたアプリ作るなら、Titanium Mobileとかで全然いいと思うんですが、Titanium MobileのAPIに無いことをやろうとするとObjective-Cしかありません。 Objective-C自体はそんなに難しくないと思うんですよ。どちらかというと、APIやら仕様やらの情報がわかりにくい。それさえ調べ調べやれば、Web系の人でもアプリ作れます。 ということで、Web系の人でObjective-C学んでみたいという人向けに、ちょっとまとめてみました。 た
iPadなどのタブレット端末に激しく使えそうなJavaScript「Kaiten browser」
twitter facebook hatena google pocket スマートフォンにとってのjQuery Mobileがあるように、iPadなどのタブレット端末には「Kaiten browser」なのかもしれません。 とりあえず、紹介のみ。 Via：Kaiten sponsors Kaitenのデモを触っていただければわかるかと思いますが、タブレット端末に適しているナビゲーションと動きを与えられます。 初期画面 TwitterのTLを表示 フルスクリーンで表示 サイトを表示 ファイルはこちらからダウンロード可能です。 Kaiten browser | jQuery Plugins 基本的にすべてJavaScriptでごりごりと書いていくようです。 下記Hello Worldの例 (function($){ // keep a reference to Kaiten's contai
スマートフォンで使えるフォーム入力内容を消す×ボタンを実装するJSライブラリ :: 5509
タイトルが長い・・・入力テキストを消去するUIは検索ボックス（type=search）にだけ有効で、他の（type=textなど）では使えないんですね。でもこの×ボタンの使いやすさは間違いないので。。 1ヶ月くらい前に作ったのにサンプルを作るのを面倒くさがって公開してなかったものを、サンプルキレイにして公開しておきます。 Delete Valueのサンプル サンプルはiOSとAndroid（※1）でしか動作しません。。 問題点もあるのですが、それは後述。 使い方 ダウンロード ファイルをGithubからダウンロードしてください ファイルの読み込みと実行 必要なファイルはdeleteValue.jsだけです。jQueryは必要ありません。実行はsmartDeleteValueメソッドを実行するだけです。実行対象はjQueryでお馴染みCSSセレクタで指定します オプション 実行時の第二引数で
UEI、HTML5/JavaScriptベースのスマートフォン用ゲームエンジン “enchant.js”をリリース
株式会社ユビキタスエンターテインメント(以下 UEI、ヨミ：ユーイーアイ、本社：東京都文京区、代表取締役社長 兼 CEO：清水 亮)はスマートフォンの本格普及をにらみ、スマートフォンのブラウザ上で動作する HTML5/JavaScriptベースのゲームエンジン“enchant.js”(エンチャント・ドット・ジェイエス)のβバージョンの提供を開始致しました。“enchant.js”は誰もが無料で利用することができます。 UEIでは現在、2011年5月1日より株式会社ディーツー コミュニケーションズと共同で開催する青少年プログラマ育成を目指したコンテストプログラム「9leap(ナインリープ)」( http://9leap.net )を企画しております。 簡単に扱え、iPhone(R)/Android(TM)の両方で動作するゲーム製作ができるゲームエンジンを開発、提供することで、一人でも多くの青
モバイルアプリケーション開発のためのHTML/CSS/JavaScript関連技術まとめ
モバイルアプリケーションをHTML/CSS/JavaScriptなどのWeb標準技術を用いて開発するためのさまざまなツールや環境が登場しています。1つ前の記事で紹介した「jQuery Mobile」もその1つですが、それ以外のものもここでまとめて紹介しましょう。 jQuery Mobile jQuery Mobileは、JavaScriptライブラリとして知られるjQueryのプラグインです。オープンソースで提供されています。 「マークアップドリブン」をコンセプトとし、HTMLを記述していくことで、あらかじめ用意されているボタン、メニュー、ダイアログボックス、などのモバイル対応のタッチユーザーインターフェイスを備えたアプリケーションを開発できます。 クロスプラットフォームに対応し、iOS、Android、WebOS、Windows Phone、Symbianなど多数のデバイスでそのまま動作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
GitHub - cheeaun/tappable: A simple, standalone library to invoke the tap event for touch-friendly web browsers.
http://retinajs.com/
http://yuki.xenophy.com/?p=106