JavaScript のフリックイベントでカードをめくる

参考:

フリック(またはスワイプ)イベント

ちょっと検索してみると、onFlickとかonSwipeとかいう都合のいいイベントハンドラは無いので、touch関係のイベント

  • touchstart
  • touchmove
  • touchend
  • touchcancel
  • gesturestart
  • gesturechange
  • gestureend

を使って、タッチしてから放すまでの間に、どのくらい指が動いたかをチェックして、指定した距離以上移動したら(場合によっては何秒以内に、という条件をつけて)、フリック(スワイプ)したと判断する。

シンプルにイベントハンドラだけ実装してるjQuery Touchwipe Pluginは、touchstartとtouchmoveだけチェックしてる。フリックしてエレメントを動かす(切り替える)のが目的のjQuery.flickSimpleはtouchendもチェックしている。「実装してみる」の記事やjQuery Mobileでは、それに加えてtouchstartからtouchendまでの時間もチェック(素早く動かした時をフリックと判断)。

カードを捲る

表用と裏用のコンテンツを用意して重ねて表示しておき、回転させた時にそれぞれの裏面が見えないように backface-visiblity を hidden にする。裏面用のコンテンツはあらかじめ rotateY(180deg) として裏にひっくり返しておく。

横向きのフリックイベントが発生した時に、カードに対して class を適用してアニメーションさせる。

サンプル

HTML:

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
    <title>flick test</title>
    <link rel="stylesheet" type="text/css" href="flicktest.css" media="all" />

</head>
<body>

<div id="card">
    <div id="face">
        <div id="front">F</div>
        <div id="back" class="reversed">B</div>
    </div>
</div>

<a href="http://code.jquery.com/jquery-1.7.1.min.js">http://code.jquery.com/jquery-1.7.1.min.js</a>
<a href="http://flicktest.js">http://flicktest.js</a>
</body>
</html>

CSS:

#card {
    border: 1px solid #999;
    width: 240px;
    height: 320px;
    -webkit-perspective: 1000;
    -webkit-transform-style: preserve-3d;
}

#face {
    padding: 5px;
    width: 240px;
    height: 320px;
}

#front {
    background: #ccd;
    position: absolute;
    width: 230px;
    height: 310px;
    -webkit-backface-visibility: hidden;
}

#back {
    background: #dcc;
    width: 230px;
    height: 310px;
    position: absolute;
    -webkit-backface-visibility: hidden;
}

.reversed {
    -webkit-transform: rotateY(180deg);
}


/** Animation: Turn Left **/
.turnleft {
    -webkit-animation-duration: 300ms;
    -webkit-animation-name: turnleft;
}

@-webkit-keyframes turnleft {
    0% { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(180deg); }
}

/** Animation: Turn Right **/
.turnright {
    -webkit-animation-duration: 300ms;
    -webkit-animation-name: turnright;
}

@-webkit-keyframes turnright {
    0% { -webkit-transform: rotateY(0deg); }
    100% { -webkit-transform: rotateY(-180deg); }
}

JavaScript:

$(document).ready(function(){
    var cardEl  = $("#card");
    var frontEl = $("#front");
    var backEl  = $("#back");
    var touchDevice = typeof cardEl[0].ontouchstart !== "undefined";

    var startX = null;
    var minX   = 40;

    cardEl.bind("touchstart mousedown", touchStart);

    function touchStart(e) {
        e.stopPropagation();

        var ev = touchDevice ? e.originalEvent.touches[0] : e;
        startX = ev.clientX;

        cardEl.bind("touchmove mousemove", touchMove);
    }

    function touchMove(e) {
        e.preventDefault();
        var ev = touchDevice ? e.originalEvent.touches[0] : e;
        var diffX = ev.clientX - startX;

        if (Math.abs(diffX) > minX) {
            startX = null;
            cardEl.unbind("touchmove mousemove");
            turnCard(diffX);
        }
    }

    function animationEnd(e) {
        cardEl.removeClass();
        frontEl.toggleClass("reversed");
        backEl.toggleClass("reversed");
        cardEl.unbind("webkitAnimationEnd");
    }

    function turnCard(diffX) {
        cardEl.bind("webkitAnimationEnd", animationEnd);

        if (diffX < 0) {
            cardEl.addClass("turnleft");
        } else {
            cardEl.addClass("turnright");
        }
    }
});
Advertisements
JavaScript のフリックイベントでカードをめくる

SoftBankメール ver.2.4 の不具合

普段携帯でメールしないから全然気づかなかったが、2011/12/21頃にアップデートした Android の SoftBank メール でMMSの送受信ができなくなってた。SMSは問題なかった。参ったと思って調べたら、価格.com の掲示板に対処法が書いてあって、それを試したら直った。

Softbankメールアプリで不具合!

以下の手順でアクセスポイントを初期化してみてください。

[menu]ボタン
→設定
→無線とネットワーク
→モバイルネットワーク設定
→アクセスポイント名
→[menu]ボタン
→初期設定にリセット

SIMロックフリーの端末使ってる人は、アクセスポイントを設定し直す必要があるから、ちょっと手間がかかる。

参考:

などなど。

(銀SIMの場合)

  • Name: (任意)
  • APN:open.softbank.ne.jp
  • Proxy: (未設定)
  • Port: (未設定)
  • Username: opensoftbank
  • Password: (自粛)
  • Server: (未設定)
  • MMSC:http://mms/
  • MMS: mmsopen.softbank.ne.jp
  • MMS Port: 8080
  • MMS protocol: WAP2.0
  • MCC: 440
  • MNC: 20
  • Authentication type: (未設定)
  • APN type: (未設定)

(水色SIMだと APN とかが違うらしい。)

SoftBankメール ver.2.4 の不具合

iPhone でウェブページをアプリっぽく表示する

何か作ろうと思って、ちょっと調べたのでメモ。

参考:

meta タグ

<meta name="viewport" content="width=device-width , user-scalable=no , inicial-scale=1 , maximum-scale=1" />

ページのサイズや拡大縮小できるかを指定。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

フルスクリーンモードにするかどうかと、ステータスバーのスタイル。

アイコン

<link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114.png" />

3G、iPad、4 (retina)それぞれ別に指定できる。ファイル名に “precomposed” と付けると、光沢処理がされない (例: apple-touch-icon-precomposed.png)

アドレスバーを隠す

function hideAddressBar(){
    setTimeout(scrollTo(0,1),500);
};

$(document).ready(function(){ hideAddressBar(); });
$("body").bind("orientationchange", hideAddressBar);

JavaScriptでスクロールさせる。

height 100% の box を作る

HTML:

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="container">
</div>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
}

#container {
    height: 100%;
    min-height: 100%;
}
iPhone でウェブページをアプリっぽく表示する