入門
ライブラリなしで実装する定番UI
16

前回でカルーセルUIが完成しました。番外編として、今回の要件には含まれていませんが、「タッチ操作に加えて、マウスやペンでもスワイプ動作を行う」という対応について解説します。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

カルーセルUIに自動再生機能を実装する場合は、アクセシビリティについて考慮することが望ましいと言えます。そのため、実装した自動再生の開始/停止ボタンとその処理の関連付けを行います。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

スワイプアクションまで実装したカルーセルUIに、自動再生機能を加えていきます。バナーとして使うことを想定し、パネル上にカーソルがある場合は一時的に自動再生を停止するようにしましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

タッチ動作を検知するためのもう一つの方法である、Pointer Everntsを実装します。イベントハンドラで実行する処理は前回解説したTouch Eventsと変わりありませんので、イベント処理に気をつけて行いましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

カルーセルUIに、タッチスクリーンのスワイプ動作を実装します。Touch EventsとPointer Eventsという、タッチ動作を検知する2つの方法のうち、まずはTouch Eventsを実装していきます。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

前回に引き続き、サンプルにカルーセルUIの機能を実装していきます。JavaScriptでインジケータ部分を作り、CSSでレイアウトを調整し、各種ナビゲーションを完成させます。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

レイアウトとアニメーション動作ができたサンプルに、カルーセルUIの各種ナビゲーションを実装していきます。今回はCSSでレイアウトしやすいようにHTMLを作り、JavaScriptで前/次ボタンを実装します。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ECサイトやコーポレートサイトでよく見かける、カルーセルUIの実装を解説していきます。ライブラリやプラグインは数多くありますが、基本的な作り方を学ぶことでさまざまな要件に対応できるようになりましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

マークアップとスタイル指定、タブの切り替え機能まで作成したタブUIに、キーボードインタラクションを実装していきます。非選択状態のタブにキーボード操作で到達する方法を考えていきましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

マークアップだけを行ったタブUIに、スタイルを指定します。さらに、タブをクリックしたらタブパネルが切り替わるという、タブUIとしての機能を作成していきましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ウェブページでよく見かけるUIのひとつ、タブUIの実装を解説していきます。タブUIはマークアップ自体は一見難しくなさそうですが、考えるべきことは意外と多いUIです。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

スティッキーナビとは、ある一定の位置までスクロールしていくとナビゲーションが画面上に固定配置されるという動作のUIです。違和感のない動作になるように、注意して実装してみましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

今回は1回の記事でファイルのローディング時に表示される画面の実装を解説します。くるくる回るグラフィックを表示する画面にしてみましょう。roleやaria属性を適切に使うことが大切です。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

Tabキーでフォーカスを移動したり、Escキーでドロワーを閉じたりといったキーボードでの操作を実装します。この実装はドロワーの動きとのタイミング設定が重要です。実装だけでなく、要件もじっくり考えましょう。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ドロワーナビの土台はできましたが、ドロワー開閉時のコンテンツ表示に細かな不具合が残っています。それはスクロールバーの出現を踏まえた適切な処理が行われていないからです。今回はこの処理を実装します。

國仲 義則
國仲 義則 | フロントエンド・エンジニア

ライブラリを使わず、標準のHTML、CSS、JavaScriptだけを用いて、ドロワータイプのナビゲーションを実装してみましょう。今回はまず全体の大枠を決め、ポイントを押さえながら、基本的な動作までを作ります。

國仲 義則
國仲 義則 | フロントエンド・エンジニア