このページは Cloud Translation API によって翻訳されました。

クロスプラットフォームのブラウザ機能を使用してログインフォームを作成する

Sam Dutton

この Codelab では、安全でアクセスしやすく使いやすいログインフォームの作成方法について説明します。

1. わかりやすい HTML を使用する

ジョブ用に作成された次の要素を使用します。

<form>
<section>
<label>
<button>

これらの要素により、組み込みブラウザ機能が有効になり、アクセシビリティが向上し、マークアップに意味が付加されます。

[リミックス] をクリックして編集し、プロジェクトを編集可能にします。

<body> 要素に次のコードを追加します。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

この時点での index.html ファイルは次のようになります。

[View App] をクリックして、ログインフォームをプレビューします。追加した HTML は有効かつ正確なものですが、デフォルトのブラウザのスタイル設定では、特にモバイルデバイスでは見づらく、使いづらくなっています。
[View Source] をクリックしてソースコードに戻ります。

2. 指で操作しやすくするデザイン

パディング、余白、フォントサイズを調整し、モバイルでの入力が適切に機能するようにします。

次の CSS をコピーして、style.css ファイルに貼り付けます。
[View App] をクリックすると、スタイルの新しいログインフォームが表示されます。
[View Source] をクリックして、style.css ファイルに戻ります。

大量のコードになりました。主な注意すべき点は、サイズの変更です。

padding と margin が入力に追加されます。
font-size はモバイルとパソコンで異なります。

:invalid セレクタは、入力に無効な値がある場合を示すために使用されます。これはまだ機能しません。

CSS レイアウトはモバイルファーストです。

デフォルトの CSS は、幅が 450 ピクセル未満のビューポート用です。
メディアクエリセクションでは、幅が 450 ピクセル以上のビューポートのオーバーライドを設定しています。

このような独自のフォームを作成する場合は、プロセスのこの時点で、パソコンとモバイルの実際のデバイスでコードをテストすることが非常に重要です。

ラベルと入力テキストは、特にロービジョンの方が読みやすいですか？
入力ボタンと [ログイン] ボタンは、親指のタップターゲットとして十分な大きさですか？

3. 組み込みのブラウザ機能を有効にするには、入力属性を追加してください

ブラウザで入力値の保存と自動入力を行えるようにし、組み込みのパスワード管理機能にアクセスできるようにします。

フォームの HTML に属性を追加して、次のようになります。

<form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

アプリをもう一度表示し、[メール] をクリックします。

フォーカスがメール入力に移動することを確認します。これは、ラベルが for="email" 属性を介して入力に関連付けられているためです。また、ラベルまたはそのラベルに関連付けられた入力がフォーカスされると、ラベルのテキストを読み上げます。
モバイルデバイスでメール入力にフォーカスします。

キーボードがメールアドレスの入力用に最適化されていることに注目してください。たとえば、メインキーボードに @ 文字と . 文字が表示され、オペレーティングシステムによってキーボードの上に保存されているメールアドレスが表示されることがあります。これらはすべて、type="email" 属性が <input> 要素に適用されるために発生します。
パスワード入力欄にテキストを入力します。

type="password" 属性が要素に適用されているため、テキストはデフォルトで非表示になっています。

autocomplete、name、id、type の各属性は、後で自動入力に使用できるデータを保存するための入力の役割をブラウザが把握するのに役立ちます。

デスクトップデバイスでメール入力にフォーカスして、テキストを入力します。 全画面アイコンをクリックすると、アプリの URL を確認できます。ブラウザにメールアドレスを保存している場合は、保存されているメールアドレスを選択するためのダイアログが表示されます。これは、autocomplete="username" 属性がメール入力に適用されたために発生します。

autocomplete="username" と autocomplete="current-password" により、ブラウザは保存された値を使用して入力を自動入力できます。

注: メールアドレスの入力には autocomplete="username" を使用してください。username は、最新のブラウザのパスワードマネージャーで認識されます。これは type="email" を使用する必要があり、id="email" と name="email" を使用することをおすすめします。

ブラウザが異なれば、さまざまな手法でフォーム入力の役割が明らかになり、さまざまなウェブサイトに対して自動入力が行われます。

属性を追加、削除して、ご自身でお試しください。

複数のプラットフォームで動作をテストすることは非常に重要です。各種デバイス、各種ブラウザを使用して値を入力し、フォームを送信してください。オープンソースプロジェクトは無料の BrowserStack を使用すると、さまざまなプラットフォームで簡単にテストできます。試してみよう:

この時点での index.html ファイルは次のようになります。

4. パスワードの表示を切り替える UI を追加

ユーザビリティの専門家は、アイコンやボタンを追加して [パスワード] フィールドに入力したテキストをユーザーが確認できるようにすることを強くおすすめします。これを行う方法は組み込まれていないため、JavaScript を使ってご自身で実装する必要があります。

この機能を追加するコードは簡単です。この例では、アイコンではなくテキストを使用しています。

index.html、style.css、script.js の各ファイルを次のように更新します。

index.html ファイルのパスワードセクションに切り替えボタンを追加します。

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

style.css ファイルの末尾に次の CSS を追加します。
```
button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}
```
これにより、[パスワードを表示] ボタンが書式なしテキストに変わり、パスワードセクションの右上に表示されます。

次の JavaScript を script.js ファイルに追加して、パスワードの表示を切り替え、適切な aria-label を設定します。

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

パスワード表示ロジックを今すぐ試してみましょう。
1. アプリを表示します。
2. パスワードフィールドにテキストを入力します。
3. [Show password]（パスワードを表示）をクリックします。
異なるオペレーティングシステムの複数のブラウザで、4 つ目の手順を繰り返します。

UX デザインを考えましょう。「パスワードを表示」でユーザーに気づかれ、理解できるか。この機能を実現するもっと良い方法はありますか？この機会に、少人数の友人や同僚で割引ユーザビリティテストを試すことをおすすめします。

スクリーンリーダーでのこの機能の仕組みを理解するには、ChromeVox Classic 拡張機能をインストールしてフォーム内を移動してください。aria-label 値は意図したとおりに機能していますか？

Gmail など一部のウェブサイトでは、パスワードの表示を切り替えるためにテキストではなくアイコンが使用されます。この Codelab を完了したら、SVG 画像を使ってこれを実装します。マテリアルデザインでは、無料でダウンロードできる高品質なアイコンが提供されています。

この時点でのコードは次のようになります。

5. フォームの検証を追加する

ユーザーがデータを正しく入力できるように、フォーム送信前にデータを検証し、変更が必要な箇所をユーザーに示すことができます。

HTML のフォーム要素と属性には、基本的な検証用の機能が組み込まれていますが、JavaScript を使用して、ユーザーがデータを入力するときや、フォームを送信するときに、より堅牢な検証を行う必要もあります。

このステップでは、Constraint Validation API（幅広くサポート）を使用して、フォーカスを設定してプロンプトを表示する組み込みのブラウザ UI でカスタム検証を追加します。

パスワードやその他の入力に関する制約をユーザーに知らせます。当てはまらないで！

index.html ファイルの password セクションを更新します。

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

これにより、次の 2 つの新機能が追加されます。

パスワードの制約に関する情報
パスワード入力用の aria-describedby 属性（スクリーンリーダーはラベルのテキスト、入力タイプ（password）、説明を読み上げます）。

style.css ファイルの末尾に次の CSS を追加します。

div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

次の JavaScript を script.js ファイルに追加します。

passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

試してみましょう。

最近のすべてのブラウザにはフォーム検証機能が組み込まれており、JavaScript による検証がサポートされています。
1. 無効なメールアドレスを入力して [ログイン] をクリックします。ブラウザには警告が表示されます。JavaScript は必要ありません。
2. 有効なメールアドレスを入力し、パスワードの値なしで [ログイン] をクリックします。必要な値が入力されていないことがブラウザによって警告され、パスワード入力がフォーカスされます。
3. 無効なパスワードを入力して [ログイン] をクリックします。問題に応じて異なるメッセージが表示されます。
ユーザーがメールアドレスとパスワードを入力するさまざまな方法を試します。パスワードフォームフィールドの改善に便利なヒントがあります。

この時点でのコードは次のようになります。

さらに便利なサービス

この Codelab では説明していませんが、ログインフォームには次の 4 つの重要な機能が必要です。

[パスワードをお忘れの場合] ボタンを追加します。このボタンを使用すると、ユーザーは簡単にパスワードを再設定できます。
利用規約とプライバシーポリシーに関するドキュメントをリンクし、ユーザーデータの保護方法をユーザーに知らせる。
スタイルとブランディングを検討し、これらの追加機能がウェブサイトの他の部分と一致するようにしてください。
アナリティクスと RUM を追加して、フォームデザインのパフォーマンスとユーザビリティをテストしてモニタリングできるようにします。

クロス プラットフォームのブラウザ機能を使用してログイン フォームを作成する

1. わかりやすい HTML を使用する

2. 指で操作しやすくするデザイン

3. 組み込みのブラウザ機能を有効にするには、入力属性を追加してください

4. パスワードの表示を切り替える UI を追加

5. フォームの検証を追加する

さらに便利なサービス

クロスプラットフォームのブラウザ機能を使用してログインフォームを作成する