ライブラリなしで実装する定番UI
- カテゴリー
- JavaScript >
- JavaScriptの実践
- HTML/CSS >
- HTML/CSSの実践
ライブラリを使わず、標準のHTML、CSS、JavaScriptだけを用いて定番のUIを実装してみましょう。ライブラリがなければ難しいと思っていた実装も、ポイントを押さえつつ、きちんと行うことができます。
第31回 ツリービュー：aria-ownsを使ったパターン
ノードのテキストをリンクとして機能させたい場合の実装として、aria-owns属性を利用した例紹介します。aria-owns属性を使うと、HTMLだけでは親子関係を表現できないツリービューの構造を支援技術に伝えられます。
第30回 ツリービュー：キーボード操作への対応 2
引き続きキーボードでのツリービューの操作を実装します。残っているのは、Enterキーまたはスペースキーでのノード選択と、文字キーによるフォーカス移動です。
第29回 ツリービュー：キーボード操作への対応 1
カーソルキーなどによるフォーカス移動、アスタリスクにより一斉展開など、キーボード操作への対応を行います。要件を書き出すとややこしく見えますが、実装自体はシンプルな形で行えます。
第28回 ツリービュー：アイコンの表示と開閉機能
開閉状態を表すアイコンの設定と、JavaScriptを用いた開閉機能を実装します。開閉自体はシンプルなものですが、aria-expanded属性の値に注意しましょう。
第27回 ツリービュー：スタイル調整
フォーカスリングと選択ノードのスタイルの指定と、それに伴うHTMLの調整を行います。スタイルに関わるJavaScript部分も作成しましょう。
第26回 ツリービュー：基本となるHTML
ツリー構造を表示するためのUI、ツリービューを実装していきます。まずはその仕様を整理し、基本となるHTMLを書いていきましょう。
第25回 セレクトボックス：文字キー入力による選択肢項目ジャンプ
最後に残ったキーボード操作処理である、文字キーによる選択肢ジャンプを作ります。これで、すべてを制作者がコントロールするセレクトボックスが完成します。
第24回 セレクトボックス：キーボード操作によるメニューの移動と折りたたみ
キーボード操作における、展開された選択肢項目間の移動と、選択またはキャンセルによるメニューの折りたたみを実装します。また、視覚的フォーカスのWAI-ARIA対応も行いましょう。
第23回 セレクトボックス：キーボード操作によるメニューの展開
今回からはキーボード操作に対応するための実装を行います。セレクトボックスのキーボード処理はやることが多いのですが、ひとつひとつ対応していきましょう。
第22回 セレクトボックス：初期値の設定
セレクトボックスの選択項目の初期状態を設定します。ネイティブの動作を確認し、それからカスタムのセレクトボックスに実装してみましょう。
第21回 セレクトボックス：マウス操作への対応（後編）
マウス操作への対応を続けます。開閉処理と選択された項目の反映という、他の動作からも使われる処理をメソッドとして作成します。
第20回 セレクトボックス：マウス操作への対応（前編）
すべてのUIを制作者が実装する方法でセレクトボックスを作成します。作成したHTMLとCSSにJavaScriptで機能を実装していきます。まずはマウス操作に対応しましょう。
第19回 セレクトボックス：基礎部分のHTMLとスタイル設定
セレクトUIの見た目だけでなく、選択肢メニューも含めたすべてのUIをカスタムしていきます。まずはベースとなるHTMLとCSSの設定を見てみましょう。
第18回 セレクトボックス：最低限のカスタムで実装する
セレクトUIの見た目だけをカスタムする方法を実装します。ブラウザネイティブのセレクトボックスをそのまま利用できるので、各OSとブラウザの多様な選択肢メニューも利用できる方法です。
第17回 セレクトボックス：ブラウザによる違いの確認と独自実装の検討
セレクトボックスはブラウザネイティブのUIが用意されており、意外と高機能です。まずはブラウザネイティブの機能を確認して、どこまで独自の実装を行うか検討していきます。
第16回 カルーセルUI：番外編 Pointer Eventsを使ったタッチ環境以外への対応
前回でカルーセルUIが完成しました。番外編として、今回の要件には含まれていませんが、「タッチ操作に加えて、マウスやペンでもスワイプ動作を行う」という対応について解説します。
第15回 カルーセルUI：自動再生のアクセシビリティ対応
カルーセルUIに自動再生機能を実装する場合は、アクセシビリティについて考慮することが望ましいと言えます。そのため、実装した自動再生の開始／停止ボタンとその処理の関連付けを行います。
第14回 カルーセルUI：自動再生機能の実装
スワイプアクションまで実装したカルーセルUIに、自動再生機能を加えていきます。バナーとして使うことを想定し、パネル上にカーソルがある場合は一時的に自動再生を停止するようにしましょう。
第13回 カルーセルUI：スワイプアクションへの対応 その2
タッチ動作を検知するためのもう一つの方法である、Pointer Everntsを実装します。イベントハンドラで実行する処理は前回解説したTouch Eventsと変わりありませんので、イベント処理に気をつけて行いましょう。
第12回 カルーセルUI：スワイプアクションへの対応 その1
カルーセルUIに、タッチスクリーンのスワイプ動作を実装します。Touch EventsとPointer Eventsという、タッチ動作を検知する2つの方法のうち、まずはTouch Eventsを実装していきます。
第11回 カルーセルUI：各種ナビゲーションの実装その2
前回に引き続き、サンプルにカルーセルUIの機能を実装していきます。JavaScriptでインジケータ部分を作り、CSSでレイアウトを調整し、各種ナビゲーションを完成させます。
第10回 カルーセルUI：各種ナビゲーションの実装その1
レイアウトとアニメーション動作ができたサンプルに、カルーセルUIの各種ナビゲーションを実装していきます。今回はCSSでレイアウトしやすいようにHTMLを作り、JavaScriptで前／次ボタンを実装します。
第9回 カルーセルUI：要件決定とアニメーション動作の作成
ECサイトやコーポレートサイトでよく見かける、カルーセルUIの実装を解説していきます。ライブラリやプラグインは数多くありますが、基本的な作り方を学ぶことでさまざまな要件に対応できるようになりましょう。
第8回 タブUI：キーボードインタラクション
マークアップとスタイル指定、タブの切り替え機能まで作成したタブUIに、キーボードインタラクションを実装していきます。非選択状態のタブにキーボード操作で到達する方法を考えていきましょう。
第7回 タブUI：スタイル指定とJSの実装
マークアップだけを行ったタブUIに、スタイルを指定します。さらに、タブをクリックしたらタブパネルが切り替わるという、タブUIとしての機能を作成していきましょう。
第6回 タブUI：マークアップの各要素
ウェブページでよく見かけるUIのひとつ、タブUIの実装を解説していきます。タブUIはマークアップ自体は一見難しくなさそうですが、考えるべきことは意外と多いUIです。
第5回 スティッキーナビ：違和感のない動作の実装
スティッキーナビとは、ある一定の位置までスクロールしていくとナビゲーションが画面上に固定配置されるという動作のUIです。違和感のない動作になるように、注意して実装してみましょう。
第4回 ローディング画面：実装とそのポイント
今回は1回の記事でファイルのローディング時に表示される画面の実装を解説します。くるくる回るグラフィックを表示する画面にしてみましょう。roleやaria属性を適切に使うことが大切です。
第3回 ドロワーナビ：フォーカスの制御
Tabキーでフォーカスを移動したり、Escキーでドロワーを閉じたりといったキーボードでの操作を実装します。この実装はドロワーの動きとのタイミング設定が重要です。実装だけでなく、要件もじっくり考えましょう。
第2回 ドロワーナビ：スクロール関連の制御
ドロワーナビの土台はできましたが、ドロワー開閉時のコンテンツ表示に細かな不具合が残っています。それはスクロールバーの出現を踏まえた適切な処理が行われていないからです。今回はこの処理を実装します。
第1回 ドロワーナビの基本
ライブラリを使わず、標準のHTML、CSS、JavaScriptだけを用いて、ドロワータイプのナビゲーションを実装してみましょう。今回はまず全体の大枠を決め、ポイントを押さえながら、基本的な動作までを作ります。