No.126

Transcript

1. 2024.10.22 KAWAMURA パソコンとスマホの違い スマホ実装パターンなど クリックとタップ
2. 操作名称の一覧 パソコン クリック（左） ボタンやリンクを選択して実 行 右クリック コンテキストメニューを表示 ダブルクリック 階層移動など特定のアクショ ンを実行するために使用 ドラッグ＆ドロップ 要素の移動に使用 スクロール ページを上下に移動 ホバー 要素にカーソルがある状態 アクティブ クリックされている状態 ビジット アクティブがなされた要素 フォーカス クリックやタブ移動などで要 素が選択されている状態 スマートフォン タップ（一本指） クリックに相当 ダブルタップ（一本指） ズームやスタンプなど特定の アクションを実行 二本指タップ 指を2本どうじにタップする ロ ング タップ (タッチアンドホールド) 右 クリックに相当 スワイ プ 指を画面 上で滑らせ る フリック スワイ プの短 いバ ージョン ピンチイン/ピンチアウト 2本指で摘む/拡げ る動作 ドラ ッグ 指で押 し続け 要素を移動 スクロ ール 指を上下に動か す アクティブ タッチ された瞬間 ビジット アクティブがなされた要素 フォーカス タッチ して選択された状態
3. スマートフォンの操作デモ JSのtouchstart/touchend/touchmoveで実装した操作 ダブルタップ デモサイト 二本指タップ デモサイト スワイプとフリック デモサイト ピンチイン/アウト デモサイト CSSのユーザー操作擬似クラスで実装した操作 ホバー デモサイト アクティブ デモサイト ビジット デモサイト フォーカス デモサイト
4. タッチデバイス特有の注意点 hoverの問題点 タッチデバイスでは指でタップするため、ホ バーの概念がほとんど存在しない。内容に よっては、ホバーの代替としてJavaScriptで タップイベントを使う。 focusのタイミング タッチデバイスでは、リンクやフォーム要素 に対してフォーカスが機能するが、TAB移動 がないため、活用が難しい。 ロングタップとactive タッチデバイスでactive状態を維持するに は、タップし続ける必要があるがロングタッ プになってしまうので、実装内容によっては 考慮が必要。 ロングタップの無効化や制御方法 テキスト選択を無効にする（cssで可能）、 JavaScriptでより詳細な制御を行う（長押し イベントtouchstartやmousedownを検出） 場合はエンジニアさんとの連携が必要
5. スマホ実装のパターン① WebView（ウェブビュー） HTMLコーディングあり アプリ上にブラウザのような機能を埋め込み、アプリの中でWebサイトを表示できるようにする機能のこと です。 「アプリ内ブラウザ」や「ウェブアプリケーション」とも呼ばれ、アプリ内でもChromeやSafariな どと同じようにWebページを開くことを可能にします。 ウェブビューには豊富な設計要素がありますが、デバイスの機能にアクセスするのが難しく制限が多いので 注意が必要です。 ネイティブアプリ HTMLコーディング不要（※WebViewを使ってHTML表示可能） デバイスにダウンロードしてインストールできるアプリを意味し、モバイルデバイス専用に開発されていま す。 ネイティブアプリ、ネイティブモバイルアプリ、モバイルアプリなどと呼ぶこともあります。 ネイティブアプリでは、ユーザーはデバイスの機能を操作できたりアクセス権を付与できます。
6. スマホ実装のパターン② Progressive Web Apps (PWA) HTMLコーディングあり PWAは、Web技術を使用して作成されたアプリで、ネイティブアプリのように動作します。HTML、CSS、 JavaScriptを使用し、ブラウザで実行されますが、インストール可能でオフラインでも動作します。 デバイスの機能にアクセスする場合は制限が多いです。 ハイブリッドアプリ HTMLコーディングも可能 ハイブリッドアプリは、ネイティブアプリとWebアプリの特徴を組み合わせたものです。対応したフレーム ワークを使うことで、HTML、CSS、JavaScriptを使用してアプリを開発できます。アプリはネイティブの コンテナで実行され、ネイティブ機能にアクセスできます。 デメリットとしては、ネイティブアプリよりも遅延が発生しやすいことや、使えない機能が存在することが あります。