Touch in a Web App? No ProblemYouTube↗  IA↗(long shot)
Science & Technology  14.2K views 156 likes 0 dislikes   25 Jun 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
こんにちは。
Привет!
デベロッパーアドボケートの マット・ゴーントです。
Я Мэтт Гонт, инженер-разработчик компании Google.
モバイルの重要性が増し タッチスクリーンが
Думаю, вы согласитесь, что мобильные телефоны играют все более важную роль,
普通の機能となったのは 誰もが認めています。
а сенсорные экраны становятся их неотъемлемой частью.
ではどうしたらWebアプリに タッチ実装ができるでしょうか。
Возникает вопрос: как внедрить сенсорную поддержку в ваше приложение?
タッチサポートは主に 2つの領域に分かれます。
Для меня сенсорная поддержка имеет три ключевых области.
まず、ユーザーのタッチに反応する
Во-первых, вы можете использовать самый простой способ внедрения отклика
最も基本的な方法では アクティブでフォーカスした
на касания пользователей – добавить стили состояний
疑似クラスで 状態のスタイルを追加します。
с активным и фокусным псевдоклассом.
次は、自分のジェスチャーを 実装するタッチイベントです。
Во-вторых, события касания позволяют внедрить собственные жесты.
アクティブでフォーカスした 状態から始めます。
Давайте начнем с активного и фокусного псевдокласса.
サイトを設計する際は常に 要素のデフォルト、
При разработке сайта необходимо продумывать
アクティブ、およびフォーカス 状態のスタイルについて
стили для состояния ваших элементов
考えることが必要です。
по умолчанию, а также активного и фокусного состояния.
これらのスタイル含めて UIを変更すると
При изменении интерфейса с помощью данных стилей
ユーザーは自分のタッチが 認識されたかどうかを、
у пользователя не возникает вопрос, был ли распознан его
不安に感じずにすみ、 Webアプリの待ち時間短縮を
жест или нет, что сокращает время видимой задержки работы
実感できます。
веб-приложения.
そのためサイトはスムーズで 反応よく感じられます。
Это позволяет вашему сайту работать быстро и с высоким откликом.
デフォルトで ほとんどのブラウザは
По умолчанию многие браузеры часто выделяют
要素に何らかの 強調表示を加えます。
некоторые элементы тем или иным способом.
左側では、細いオレンジの フォーカスリングがボタンに
Слева приведена оранжевая фокусная обводка кнопки.
追加され、右側のアンカータグ では青いタップが
А справа отображается выделенный синим цветом
強調表示されます。
тег привязки.
個人的には、自分のUIが デザインにそぐわない
Лично я терпеть не могу, когда мой интерфейс
バラバラなスタイルで 変わるのは
меняется с помощью произвольных стилей, которые
好きではありません。
не подходят к моему дизайну.
アクティブでフォーカスされた スタイルを追加すれば
При добавлении активного и фокусного стиля
サイトはもっとずっと洗練されます。
вы получаете намного более высокий уровень оформления сайта.
これが最も基本的な タッチレスポンスです。
Это самый основной вариант добавления сенсорного взаимодействия.
カスタムジェスチャーの実装は どうしたらよいでしょう。
Что делать, если вы хотите внедрить собственные жесты?
ここでタッチイベントを 使い始めます。
Здесь мы начинаем использовать события касания.
タッチイベントを操作した ことがない場合は
Если вы раньше никогда не работали с событиями касания,
タッチスタート、タッチムーブ、 タッチエンド、タッチキャンセルの
вам необходимо зарегистрировать обработчики начала касания, движения касания,
イベントリスナーを登録します。
завершения касания и отмены касания.
これらイベントはジェスチャー のライフサイクル全体を
И эти события будут происходит в процессе всего выполнения
通して発生します。
жеста.
1回のタッチスタートイベントの後、 1回以上のタッチムーブ、
Вы увидите начало касания, затем одно или несколько движений
最後にタッチエンドまたは タッチキャンセルの
касаний и завершение или отмена касания
イベントが発生します。
в конце.
使い方はきわめて簡単です。
Процесс использования очень прост.
通常どおり、クエリ セレクタを使うか、IDで
Получите элемент как обычно с помощью селектора запроса
getElementを取得します。
или команды getElement и идентификатора.
イベント名とコールバックで イベントリスナーを
Добавьте обработчики с именем события и функцию
追加します。
оповещения.
これでイベントオブジェクトを 使用できます。
Здесь можно использовать объект события,
このオブジェクトが コールバックに渡され
который передается в оповещение
xとyの座標が出てジェスチャーに
для получения координат x и y, и затем реагировать
反応します。
на жест.
全ての要素がまとまった だいたいの概要がこれです。
Это краткое описание работы всего процесса.
ただし、従うべきいくつかの ベストプラクティスがあります。
Но существует несколько передовых методик, которыми необходимо
そうしないと毎秒の フレーム数がかなり低下します。
руководствоваться, иначе количество фреймов в секунду может существенно снизиться.
ここで説明する ベストプラクティスとは
Я вам расскажу о таких методах, как
バインドローとバインドレイトです。
слабое связывание и позднее связывание.
タッチコールバック内は常に できるだけ小さくすることを
Сводите до минимума все действия в оповещениях о касании, что, впрочем,
お勧めします。
всегда правильно.
requestAnimateFramesを使います。
И используйте requestAnimateFrames.
バインドローとバインドレイト から始めましょう。
Итак, начнем со слабого и позднего связывания.
バインドローとは ドキュメント全体ではなく
Слабое связывание – это привязка обработчиков события
ユーザーにタッチさせたい 要素にイベントリスナーを
к элементу, которого будут касаться пользователи,
バインドするという意味です。
а не ко всему документу.
これにより、ブラウザの パフォーマンスが向上します。
Это необходимо потому, что помогает повысить эффективность
なぜならブラウザは メインスレッドのみにホップし
работы браузера, поскольку он будет только осуществлять
関心のある リスナーを伴った要素に
переход в главный поток и выполнять JavaScript
タッチすると、JavaScriptを
при касании элемента с обработчиком,
実行するからです。
что вам, собственно говоря, и требуется.
本文にタッチイベントリスナー を追加した場合は
В противном случае при добавлении обработчиков событий касания
たとえ全く関心のない 要素でタッチが
в тело документа JavaScript всегда выполняется
発生した場合でも 常にメインスレッド上で
в главном потоке, даже если выполняется касание
JavaScriptを実行します。
ненужного нам элемента.
バインドローは要素自体との バインドを意味します。
Поэтому слабое связывание означает связывание с самим элементом.
バインドレイトは タッチムーブ、タッチエンド、
Позднее связывание – это максимально позднее связывание
タッチキャンセルイベントと 要素をできるだけ遅く
движения касания, завершения касания
バインドすることを指します。
и отмены касания с элементом.
そこでこの例では すべてのタッチイベントを
В данном примере нам требуется обработка всех
スワイプ可能ボックスか、 タッチスタートが
событий касания с помощью прокручиваемых полей
スワイプミー領域で発生した場合は
или областей, когда в них происходит
その中で処理します。
начало касания.
タッチスタートイベント コールバックの文書全体に
Для этого добавляем события движения касания, завершения касания,
タッチムーブ、タッチエンド、 タッチキャンセルの
и отмены касания ко всему телу документа внутри
イベントを追加します。
оповещения о начале касания.
タッチエンドやタッチキャンセル のイベントを受け取ると
После этого, при получении события о завершении или отмене касания,
本文からすべての イベントを削除します。
мы удалим все события из тела документа.
そのためできるだけ遅く バインドします。
Таким образом, мы выполняем связывание как можно позже.
Chrome DevTools内の Show Potential Scroll
Ознакомьтесь с функцией Show Potential Scroll Bottlenecks
Bottlenecks機能をチェック します。これはロジックが
в инструментах Chrome DevTools, которая
意図どおりに機能するよう 確保し、潜在的問題を
позволяет проверить правильность работы и
明らかにするのに役立ちます。
выявить потенциальные проблемы.
これはハンバーガーメニュー アイコンを押すと現れる
Она располагается на вкладке преобразования, которая
レンダリングタブの下にあります。
отображается при нажатии меню с изображением гамбургера.
バインドローとバインドレイトです。
Это что касается слабого и позднего связывания.
次に頭に入れておくことは
Следующее, о чем необходимо помнить,
タッチコールバック内を できるだけ小さくすることです。
это сведение до минимума всех действий в оповещении о касании.
なぜでしょう？
Почему?
不思議に思えますね。
Я уже слышу ваш вопрос.
コールバックがメインスレッド で実行されるからです。
Потому что оповещение будет выполняться в главном потоке.
そのため、中で多くの作業を すると、サイトの
Поэтому при большом количестве выполняемых в нем действий
フレームレートが低下します。 誰も望んでいないことです。
вы можете существенно снизить частоту фреймов, что нежелательно.
ですから、コールバック内は できるだけ迅速化します。
Постарайтесь свести количество действий в оповещении до минимума.
しかしここで次のような問題が 発生します。イベント内の
Но здесь возникает вопрос: если я получу координаты
タッチのxy座標を取得した場合、
x и y касания в событии, как мне работать
メインスレッドをブロックせずに
с этими значениями, чтобы это не привело
それらの値で何ができるのでしょうか？
к блокировке главного потока?
requestAnimationFrame の登場です。
Вот здесь и оказывается полезным requestAnimationFrame.
requestAnimationFrameは バッチ処理変更の手法で
requestAnimationFrame – это способ пакетных изменений, которые
ブラウザに対してではなく ブラウザを使った作業時に
необходимо внести в интерфейс именно тогда,
UIに対して行うものです。
когда браузеру это удобно, а не наоборот.
requestAnimationFrameを 呼び出して関数で渡します。
Вы вызываете requestAnimationFrame
これは基本的にブラウザに対し
и передаете функцию, которая заставляет браузер
レンダリングループの適切な時点で
выполнять ее в подходящий момент
関数の実行を求めるものです。
в цикле преобразования.
アニメーションフレームの コールバック実行時に
После выполнения оповещения о фрейме анимации
既知の最新タッチイベントに 基づきUIを更新できます。
вы можете обновить интерфейс на основе последнего события касания.
全体の流れは、アニメーション フレームを要求し、
Весь процесс выглядит так: вы запрашиваете фрейм анимации,
タッチムーブイベントの 発生を待機し、
ждете начала событий движения касания,
ブラウザが準備完了したら メソッドを呼び出すので、
а затем, когда браузер готов, будет активирован ваш метод,
その後UIを変更できます。
и вы сможете изменить интерфейс.
重要なのは、各タッチムーブの
Важно то, что вам не приходится изменять
要素スタイルを 変更するのではなく
стили элементов для каждого движения касания, что может
レンダリングフレーム間で 複数のイベントが発生する
вызвать появление множества событий между фреймами преобразования.
可能性があるので、既知の 最新のタッチムーブに基づき
Вместо этого вы вносите изменения на основе последнего
変更をすることです。 本当に重要な作業は
движения касания, что на самом деле является
ただこれだけです。
единственным необходимым действием.
これでお分かりでしょう。
Итак, теперь вы знаете об этом.
Webをタッチしましょう。 アクティブでフォーカスした
Сенсорная поддержка в приложении – это
疑似クラスを持った ユーザーのタッチに反応する
самый простой способ реагирования на касания пользователя с помощью активного
最も基本的な方法です。
и фокусного псевдокласса.
独自のジェスチャーが必要なら タッチイベントを使います。
И в том случае, если вы хотите, чтобы ваши жесты использовали события касания.
Web FundamentalsのURLで ベストプラクティスや、
Заходите на следующие веб-сайты, где можно узнать о передовых методах,
クロスブラウザの実装の詳細、
узнать о перекрестном внедрении в браузер,
つまりポインタイベントや コードを借用できるサンプル
например, о событиях курсора, и посмотреть примеры, из которых
などを確認してください。
можно почерпнуть полезные коды.
ありがとうございました。
Удачи!
Similar videos:

Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201464% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201447% match


What's new in WebView
Google for Developers
19.8K views 121 likes 6 dislikes 25 Jun 201446% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201438% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201437% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201435% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201435% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201434% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201434% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201433% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201433% match

Building Node.js applications with App Engine and Custom Runtimes
Google for Developers
26.1K views 168 likes 4 dislikes 25 Jun 201432% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201432% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201432% match

Building a WebRTC app - LIVE!
Google for Developers
85.6K views 322 likes 36 dislikes 30 Jun 201431% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201431% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201431% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201431% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201430% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201430% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201430% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201429% match

Building location-based apps with the Places API
Google for Developers
79.8K views 530 likes 22 dislikes 25 Jun 201428% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201427% match

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201427% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201427% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201427% match

WebRTC tutorial
Google for Developers
134.5K views 649 likes 23 dislikes 30 Jun 201426% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201426% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201426% match


Settings Privacy About Contact Donate