Adobe Edge

さてはて年度末の忙しい時期、書き溜めていた記事がほとんど尽きてしまいました。
ということで、今回も簡単な記事だけです。
 
現在AdobeがHTML5、CSS3、javascriptを利用したコンテンツを開発する
アプリ「Adobe Edge」を準備中と言うことでメモ。
参考:Adobe Edgeの検索結果
 
HTML5、CSS3、javascriptなのでスマートフォン向けのリッチコンテンツ開発にも
良いのかもしれません。
 
 
 

web shocker : css3の3D Transforms


制作会社のiPhone向けサイト。画面の切り替え演出に力が入っています。
worksのページ切り替えでは左右へのスライドアニメーション。そして各事例に
移動するときはcss3の3D Transformsを利用したフリップの演出。
※pcでもsafariやchromeで閲覧可能です。
 
参考サイト:くるくるフリップを CSS 3 で作る実験
 
 
 

jQuery:オリジナルのフリック

flipsnap.jsや13_flicksimple.jsは簡単に利用できるのでオリジナルのコードを
組むつもりはないのですが、以前Android(IS11T)を購入した際に機能しなかった
オリジナルのフリックをデバッグしました。
以前の記事:iOS+jQuery:部分横スクロール(3)androidでの検証
 
原因はタップ位置を取得するコードにありました。以前のコードは以下の様に
タップ位置を取得していたのですが、この方法ではスマートフォンでのタップ位置は
取得できません。というか何故iOSだと機能するのかが不思議です。下記のように
書き換えたら、iOSでもAndroidでも正常に機能するようになりました。

click_X = eo.pageX;

スマートフォンではマルチタッチに対応しているため、どのタッチポイントの座標かを
指定する必要があり、以下の様に書かなければならないのです。

click_X = eo.touches[0].pageX;
デバッグ済サンプル
サンプル:20_original.html
※PCでは動作確認できません、jQueryのソースはhtmlに書いてあります。

 
おしまい
 
 
 

スマートフォン:flipsnap(5)

バグ取りには時間がかかります…。
前回の最後で紹介した画像がずれるバグですが、結果から言うとcssで簡単に対処できました。
※デバッグしやすいように一定時間でページが切り替わる処理は外しています。

デバッグ用サンプル
サンプル:18_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
flipsnap.jsのコードを調べて、フリックの位置がcurrentXで管理されていることを
確認したので、currentXがどのようにずれるのかを調べました。
以下のjQueryを追加してタッチ後のcurrentXを確認するようにしていました。

$(document).on("touchend mouseup",function(){
 var myX = flipsnap.currentX;
 $(".debug").text(myX);
})

しかしバグが発生した状態でもcurrentXは正常の値を表示しており問題はありませんでした。
ここで早速手詰まりになったのですが、PCで動作確認中に表示されていた横スクロールを
移動してcurrentXを表示させたのです。すると見た目はずれているのにcurrentXは正常の
値となり、バグと同じ現象ではないか!となったのです。

 
つまりスマートフォンでは横スクロールは見えていなくても、操作が可能で希に操作されてしまう
ことでバグが発生していたのだと。ということで#showcaseのcssにoverflow:hidden;を
設定しスクロールバーを表示しないようにしました。

#showcase {
 width: 100%;
 position:relative;
 overflow:hidden;
}

そしたらバグは発生しないようになりました。めでたし、めでたし。
 
 
 

スマートフォン:flipsnap(4)

今回は一定時間ごとにページを切り替えるようにします。ポイントなのは
タッチしている間はページを切り替えないようにする点です。
 
 

一定時間ごとにページを切り替える

一定時間ごとにページを切り替えるにはjavaScriptのsetIntervalを利用します。
このサンプルはタッチ中にもページが切り替わってしまいます。そしてタッチ中に
ページが切り替わると画像がずれるバグとなります…。

一定時間ごとにページを切り替える
サンプル:16_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
注意点は以下のjQueryです。三項演算子を利用して次のページが最大ページを
越えていたら最初のページに移動し、そうでなければ次のページに移動します。
変数maxPageはjQueryの最初の部分で設定しています。

function changeFunc() {
 maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
}
setInterval(changeFunc,5000);

 
 
 

タッチ中はページを切り替えないようにする

16_flipsnap.htmlはタッチ中にページが切り替わると画像がずれるバグがでます。
ですので、flicksimple.jsのようにタッチ中はページが切り替わらないように
しました。

タッチ中はページを切替えない
サンプル:17_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
flipsnapではタッチ中というフラグがないので、それはjQueryで補います。
以下の様にイベントハンドラを設定し、タッチ中はtouchFlgをtrueにします。

$("#showcase").on("touchstart mousedown" ,function(){touchFlg = true});
$("#showcase").on("touchend touchcancel mouseup" ,function(){touchFlg = false});

そして、ページ切り替えの際にtouchFlgがtrueだったら切り替えをしないようにします。

function changeFunc() {
 if ( touchFlg ) return;//----タッチ中であれば処理しない
 maxPage < flipsnap.currentPoint+1 ? flipsnap.moveToPoint(0) : flipsnap.toNext();
}

 
 
 

バグがでたよ〜〜

17_flipsnap.htmlはAndroidでもlockされないので、非常に実用的だと思うのですが
いろいろ動作確認をしていたら、バグを見つけました...。
縦スクロールとフリックが同時に発生するような動作(斜めの動き)で画像が
ずれることがあるのです...。Androidでは縦スクロールとフリックが同時に発生する
事はないようなのでバグは出せませんでした。

 
むむぅ。次回以降で何とか修正に挑戦したいと思います。
 
 
 

スマートフォン:flipsnap(3)

flicksimpleもステキだとは思うのですが、縦スクロールのロックがどうしても気になって
しまいます…。ですがflipsnap.jsではAndroidでも縦スクロールしているので、再度
flipsnap.jsに着目し、これを発展させてflicksimple.jpと同じようなことが
できるようにしたいと思います。
 
 

全幅対応:レイアウトが変わったら再設定をする

これまで紹介したflipsnapのサンプルでは指定したエリア内で画像を切り替えます。
まずは、これをブラウザの全幅を利用した仕様に変更しましょう。
全幅にするためにjavaScriptを追加する必要はありません。flicksimpleの
サンプルと同じようにCSSで設定しています。
 
ここで注意しなければいけないのが、縦向き/横向きにレイアウトを変更した際の
処理についてです。具体的に言うと、レイアウトが変わった際に初期化しないと
計算が合わなくなり、正常に機能しないのです。
 
しかし、flipsnapには初期化のためのrefreshというメソッドが搭載されており
これを実行すればブラウザの幅に合わせて再設定できます。これで問題が解決できます。

next/prevボタンの追加
サンプル:14_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
ポイントとなるjQueryは以下の部分です。flipsnapではflicksimpleと異なり
独自のイベントを持っていないので、代わりにjQueryのresizeイベントを利用して
ブラウザのサイズが変わったらリフレッシュ(再設定)します。
これで全幅にしても問題なくレイアウト変更に対応できます。

$(window).resize(function(){
 flipsnap.refresh();
})

 
 
 

ブラウザの幅に合わせて画像を拡大する

続いてブラウザの幅に合わせて画像を拡大するようにしました。これもjQueryの
resizeイベントを利用します。

next/prevボタンの追加
サンプル:15_flipsnap.html  ここで利用しているcssはこちら
※jQueryのソースはhtmlに書いてあります。

 
以下の様に再設定の処理に画像のサイズ変更の処理を追加しています。また
最初に一度、resizeFuncを実行するようにしました。これを実行しないと最初は
cssの設定通りの画像サイズになるため、横レイアウトで起動した際に画像が大きく
ならないからです。

$(window).resize(resizeFunc);				
function resizeFunc() {
 var myWidth = $(document).width();
 myImage.css("width", myWidth);
 myImage.css("height", myWidth*0.5625);
 flipsnap.refresh();
}
※myImageはjQueryの最初の方で設定している画像のセレクタです

これで横レイアウトにしたときに画像が拡大されるようになりました。しかも
flicksimple.jsと異なりAndroidでも縦スクロールできます。
 
次回は一定時間でページを切り替えるようにします。