DeNA Creative Seminar vol.1

ねぎやまねぎこ@2026W @negiyama

RT @DeNA_Career: 失礼致しました。配信チャンネルはこちらです。訂正致します。http://t.co/fJYTzcnq #denacrt

ねぎやまねぎこ@2026W @negiyama

参加中 まずは西畑さんのお話し。 #denacrt

ペンペン @t_yamatoya

UIのタッチイベント：TouchStart、TouchMove。タッチで問題になるのは、縦のスクロールと横のスライド両方の操作をするので、ユーザがどちらの操作をしたのかを判定しなければならない。　#denacrt

ペンペン @t_yamatoya

縦スクロール中は、横スクロールが死ぬ実装になってしまうので回避するには、CSS3の　-webkit-transform:translate3d(100px,0,0); を使用すると良い。#denacrt

sou @sou

#denacrt Android ktkr

ペンペン @t_yamatoya

Androidでは、３D系のtransformにバグが多く悩まされる。forcus位置がずれていく。改行があったらずれたり、ずれなかったり……全然別のところでマージを指定したら、ずれたりずれなかったり。しかもGPUに切り替わらない。　#denacrt

黒曜ゆーたす @U_TAS

REGZAちゃんwwwやっぱりだめなこ… #denacrt

なつき🐰Webデザイン&AI @Stocker_jp

REGZA Phoneの方がマシだと…！ #denacrt

ペンペン @t_yamatoya

Androidには、Touchmoveイベントをロスとしてしまうバグというか、仕様がある。端末によって、快適に動作したり動作しなかったり端末関西が多い。回避方法としては、TouchStart時に縦スクロールを止めるといい。　#denacrt

黒曜ゆーたす @U_TAS

えっ！？レグザちゃんがだめって話ではなかった…だと… #denacrt

ペンペン @t_yamatoya

Androidのスワイプギャラリ実装として多いのは次の３点。e.preventedfault()型/縦スクロールさせない touchmove無視型/touchmoveの対応有無で切り替え　フリック型/指にはついてこないが動きが終わった際についてくる。　#denacrt

ペンペン @t_yamatoya

Androidの場合、iPhoneのようにきれいなスワイプに対応できないことが多い。なので、Androidの場合は、スワイプ非対応にしてクリックにしてしまうこともある。　#denacrt

黒曜ゆーたす @U_TAS

Androidダメな子と言わざるを得ないけど、捨てるわけにはいかない… #denacrt

ペンペン @t_yamatoya

固定配置。ヘッダーや、右下のメニュー常時表示など常に同じパーツを同じ位置で見せ続ける実装。　#denacrt

TSUCHIYA Tomokazu @to_tsuchiya

固定ヘッダ、フッタはjavascriptで意地で対応。 #denacrt

TSUCHIYA Tomokazu @to_tsuchiya

よく使われるライブラリは、iscroll4というもの。 #denacrt

ペンペン @t_yamatoya

固定配置の実装は、JavaScriptで疑似配置？それともCSS? position-fixedは、搭載されているけどバグが多いのでJavaScriptで実装される。よく使用されるライブラリは、iScrollである。　 http://t.co/fGC2AXk5 　#denacrt

TSUCHIYA Tomokazu @to_tsuchiya

スライド貰える？やったー #denacrt

あくやん @akuyan

position:fixdは実装されてるけどバグが多いので、iScrollを使う。Androidだと縦の動きが一部ロストする #denacrt

ペンペン @t_yamatoya

JavaScriptで固定配置の疑似配置をすると、アドレスバーが表示されて醜くなってしまうので、ブラウザサイズを取得してずらすような実装をすることになる。参考実装コードは配布するスライドを参照してほしい。Android、縦スクロールイベントをロスとすることがある　#denacrt

ペンペン @t_yamatoya

オーバーレイ。スターバックスのモバイルサイトがうまく使用している。モーダルを使用する際には、裏側のリンクなどが反応してしまうなどの問題がある。　#denacrt

✧ のりぞー ✧ @nrkkkkk

RT @akuyan: position:fixdは実装されてるけどバグが多いので、iScrollを使う。Androidだと縦の動きが一部ロストする #denacrt

あくやん @akuyan

オーバーレイを使ったUIの場合、Androidだと下のレイヤーにフォーカスが当たってしまう場合があるので、上レイヤーを表示するときは、それ以外の<a>要素を透明にする #denacrt

めっち of Blue Steel @IBN5000

カメラ邪魔過ぎワロタ #denacrt

ペンペン @t_yamatoya

レイヤー下のテキスト位置でハイライトカラーやUI要素などの動作がおかしいことがある。Andooidでは、下にテキストがありモーダルにテキストボックスを表示すると、テキストボックスが動くなる仕様がある。　#denacrt