タッチデバイスのコーディングに.on()を使ったらタップハイライトの位置で悩んだ

jQuery スマホ

今回は、スマホ・タブレットに対応するサイトを作るときに気をつけよう！となった、jQueryでクリックの処理をつけるときのお話です。 

.on()を使ったら何が起きたのか 

.on('click')でボタンに処理を書きました。

こんなんがありまして。

f:id:nonloso7:20130803163349p:plain		 f:id:nonloso7:20130803164158p:plain

通常はこのようになります。

f:id:nonloso7:20130803163359p:plain

 

だがしかし、

f:id:nonloso7:20130803163355p:plain

 f:id:nonloso7:20130803164158p:plain

どうしてこうなった！

f:id:nonloso7:20130803163404p:plain

ここでの外側というのがbodyレベルの大枠だったんです。

なので、ハイライトが画面全体に出ていたらしく、なにも反応がないように見えてしまっていました。処理が"クリックしてモーダル表示"だったので尚更だった。

思った通りにハイライトがつく箇所と、つかない箇所があった

実際には、このようなbtnになっているものが複数ありまして。

その中でなぜか「このページのだけハイライト出ないね。」という事が起きました…

同じだよ？何が違うのさ〜(´・ω・｀)

同じじゃなかったのさ…！

▼OK

$(".btn").cick(function(){…
$(".btn").on('click',function(){…

▼NG

$(".wrap").on('click','.btn',function(){…

NGの方の書き方、セレクター指定の仕方がちょっと違いますね。

普通に書くとボタン（.btn）に処理を付けてやりますが、NG側の書き方は、外側（.wrap）の中のボタン（.btn）に付ける、という書き方になります。

こ　れ　や　

最終的に指定されているのは'.btn'ですが、かかっているのは$('.wrap')です。

だからそっちにハイライトが反応しているんですね！「ああ、うん、わかるわ…」と思いつつ、タップの反応って、発動させるセレクターについてるんじゃないんだ〜という事を改めて認識してびっくり。

 

割と、なんでだよう！と思って検証していたので、気付いて数分間は、「そりゃそうか…そうだよね…いやでも…えーそうなの…」という感じでした。

なるほどねー。

 

ちなみに、なぜこの書き方をしていた箇所があったかというと、非同期処理を使って生成・表示をしていたから。

.on() | Qrefy - jQuery日本語リファレンス

このメソッドは呼び出し元のjQueryオブジェクトの要素にハンドラをバインドするため、その対象要素はメソッドを呼び出す時点でページ上に存在していなければなりません。

上で、「NG側」なんて書きましたが、処理自体は全然ダメな書き方ではないです。後から生成した要素にもまとめてクリックの処理を付けるための、スマートな書き方だと思います。

ただ、タッチデバイスだとこのようにハイライトが付いてしまうというのが、今回では困ったことになってしまったということでした。

 

最終的には、要素を生成する時やした後などにむにゃむにゃ色々付け加えて対応( ˘ω˘)

若干冗長な処理にはなりましたが、無事、思った通りの位置にハイライトを表示するようにしました。

ハイライト表示は大事だと思う

タッチデバイスのタップハイライトって、やっぱり操作に対してのフィードバックとしてとても大事だし、使い心地にも関わってきます。

バグとかではないので、「ハイライト非表示」なんかで対応するのではなく、きちんと気を遣っていければいいですね。

第5回Creators MeetUpに参加してきました

行ってきました 勉強会

 

 というわけで6/22（土）に開催されたCreators MeetUpに初参加してきました。

同僚のちばちゃん（@rechiba3）が第1回からずっと参加しているということもあり、前々から興味があったものの、UST見たりハッシュタグ追ったりしかできていなかったのですが。

やっと！今回やっと！行ってくることができました。

 

プログラム

はこちら。

15:20-15:35 Session01「Illustratorでプロトタイピング」
Webデザインカンプをイラレで作りながら、デザインのガイドラインとなる色・文字・イメージの管理方法などを紹介		 金澤 直毅さん
15:35-15:50 Session02「仕事で使えるPhotoShopのショートカット集」
10年の使用歴から選りすぐりの小技を集めたので、かゆいところに手が届くTipsがきっと見つかるはず！		 新井 克哉さん
15:50-16:05 休憩（15分間） 　
16:05-16:20 Session03「マインドマップ発想法×ロジックツリー手法によるコンテンツ設計」
設計のミニマムワークフローで夢中にさせちゃうぞっ♡
多種多様なアイデア発想・手法の中でも、コンテンツ設計に特化した2つをご紹介		 千葉 礼美さん
16:20-16:35 Session04「ドメインとＤＮＳこれだけ知ろう５つの技」
独自ドメインを使うときに知っておきたい、知っておくと便利なことを紹介。ドメイン周りのそれを知ってれば苦労しなかった！みたいなことを少しでも減らせれば嬉しいです。		 松田 顕さん
16:35-16:50 Session05「セキュリティ、はじめのいっぽ」
最近の話題も取り混ぜながら、セキュリティの考え方を紹介		 こばやし たけしさん
16:50-17:05 休憩（15分間） 　
17:05-17:20 Session06「魔法少女 Laravel」
世界で最も人気がある次世代 PHP フレームワークである Laravel の紹介です。他の PHPフレームワークと比較をしながら紹介します。		 向井 賢一さん
17:20-17:35 Session07「仲間とのモノづくりをハッピーにするために知っておきたいこと」
2人以上でクリエイティブワークする時に、よいポテンシャルで仕事をするためのコミュニケーション方法		 椋橋 良さん

  

お話聴いてる間のが第5回 Creators MeetUp #cmujpでまとめてもらっているのでざっくりと感想を書きたいと思います。

いやー、ほんとにね、行ってよかった。

今まで 一方的に（というとあれですけど）お話を聴いて「ふむふむ！」みたいな勉強会に参加することはあったのですが、CMUのように「相互に」という場に行くのは初めてでした。

WEB関係の知り合いもほとんど居ないに等しいノンアクティブなもぶさんなので、楽しみ半分気負い半分なところ少なからずあったのですが、完全に杞憂でした。

 

プログラムの内容もとてもバランスがよく、15分というちょっと短く感じる時間もいい意味でさくっとです。しかしお話の内容はもちろん充実(｀・ω・´)

改めてまだまだ知らないことがいっぱいあるなーとか、なんて見やすいスライドだ！という、ライトなことから「作る」ということ、周りの人たちと関わること、自分がやりたいこと、というようなディープ？なことまで

LT聴いている間いろいろと頭が動きました。

 

イラレでサイトデザインやってみたくなったり！

Psのショートカット試したくなったり！（とりあえずチンパンジーの写真探すとこからな）

サーバ周りの勉強したくなったり！

ララベルたんーーー♡だったり！

とりあえずお酒飲みに行こう( ^ω^ )と言いたくなったり！

 

行ってない人なんのこっちゃかもしれないですが、勿論のこと発表スライドはWebにあるので、ハッシュタグ辿って各スライドをば。

いっぱいやりたいことあるなあと思えました。

んで改めて「ものを作る人」って素敵だし好きだし楽しいなーって。

 

懇親会も最後まで参加させてもらって、沢山お話ができて本当に充実でした。

いっぱい話せた方も、少ししか話せなかった方も居ましたが、これからどんどん絡んでいけたらいいなぁと思います。

ちばの発表もやっと生で見れて良い刺激にもなりましたし。

 

と、 とりあえず個人名刺作りたいね…！！

 

次回もぜひ参加したいと思います✌('ω')✌

 

css3の@keyframesでポップアップなアニメーション

css3 jQuery

ぽよーんとなるアニメーションをcss3で作ってみました。

もぶcss3アニメーションだいすきーヽ('ω')ﾉ わー

DEMO

css3 @keyframesとは

cssでキーフレームのアニメーションが指定できるものです。そのままですね。

詳しくはこちらのリファレンスで！

http://www.htmq.com/css3/animation-name.shtml

 

DEMOのソースを見ながら解説をばー

HTML

<div class="main_area">
    <a href="#" class="btn">pop up!</a>
</div>
<div class="pop_box">
    //~pop up window
</div>

ボタンとポップアップのdivがあるだけ。

CSS

-webkit-animation-duration: 1.4s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: bottom center;

このプロパティがcss3アニメーションの基本の指定になります。

アニメの秒数や、動きの基準地点などを設定できます。

 

@-webkit-keyframes animation_on {
  20% {-webkit-transform: scale(1.2);}
  30% {-webkit-transform: scale(1);}
  40% {-webkit-transform: scale(1.06);}
  0%, 50%, 60%, 80%, 100% {-webkit-transform: scale(1);}
}

で、こちらはキーフレームの指定。-moz-は省いて記載しています。

「animation_on」という名前のアニメ―ションにしました。

全体のアニメの長さを100%として、そいつを%で区切ることでtransform（変形）のタイミングと内容を決めます。

今回はぽよーんとscaleだけのアニメですね。

 

.on{
  display: block;
  -webkit-animation-name: animation_on;
  -moz-animation-name: animation_on;
}

 "on" は「どのキーフレームアニメーションを付加するか」を指定しています。

さっきの「animation_on」を指定しているので、『onってクラスが付いたらanimation_onをさせるよ～』てことです。

ポイントはここ！

このanimation-nameの指定なんですが、通常はCSSの最初にでてきたdurationあたりに含めていることが多いのです。

click したときに "on" を付けて「表示 / 非表示」だけ切り替えればええやん(＾ω＾)

と思うところ。実は…

それだとFire Foxでは動きません！

 

なんでanimation-nameを同時に書くと動かないの？

ページを読み込んだときにアニメーションが走ってしまいます。

なので、正確には動かないとは少し違っていますが…

 

display:noneにしてても対象の要素が存在していると、アニメーションしてしまうようですね。

ボタンをクリックする度にぽよーんができなくなってしまうということです。

今回のようにモーダルだとページ表示してボタン押すまでに1.4秒なんて過ぎてしまうので、アニメーションがないみたいに見えます。

 

ChromeやSafariの場合はこの点、display:noneにしている要素は「存在しない」ものとして見てくれるらしく、一緒に指定していてもその度にアニメーションします。

というわけで

都度、アニメーションをつけるためには”on”と一緒にアニメーションをしてやると良いでしょう。

逆にこっちにdurationとかもまとめちゃってもいいんですけどね。

「アニメーションする要素」と「アニメーションの内容」が分かれてるほうが見やすいのでもぶはこうします。

 

以上、ぽよーんcssでした(((・ω・)))

 

about

webmob / ウェブモブ

は、もぶが作ったものや日々のナレッジやtipsなどをゆるゆる発信するwebblogです。

備忘録でもありますが、少しでもどこかの誰かの為になるwebのことを書いていければと思います。

ここに書いた情報が役に立った！もしくは、それ違うよ！

なことがあればどんどん教えてもらえると嬉しいです。

ウェブモブって言い辛いとか、カタカナで書いたときのもっさり感、とかは気にしないふりをしたい。

mobについて

@nonloso7

恵比寿でwebクリエイターをしています。

HTML5やっほー！css3ぺろぺろ！jQueryさまさま！なゆとり。（もっともっと技術勉強していきたい）

コーディングが大好きな引きこもりです。

たまにFlashやデザインもやっています。趣味でイラストを描いたりもします。

キーワード：うどん / 方向音痴 /　うどんが食べれなくなったら多分しぬ。

 

●制作環境
iMac, Macbook Air, Windows7
iPhone5(iOS6.1)
Adobe CS5：Photoshop, Illustrator, Fireworks, Flash
Sublime Text2

▲Top