UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#308 範囲入力(Range Input)を使用した音量調整のシンプルなUI

記入日:2023-11-12 編集日:2023-11-12

範囲入力(Range Input)を使用した音量調整のシンプルなUIに関して解説してみようと思います。

この記事を読むと(約5分)
範囲入力(Range Input)を使用した音量調整のシンプルなUIに関してイメージできます。

Range Inputを使用した音量調整

50
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Range Input Example</title>
</head>
<body>

  <form>
    <label for="volume">音量:</label>
    <input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50">
    <output for="volume" id="volumeOutput">50</output>
  </form>

  <script>
    // スライダーの値が変更されたときに呼び出される関数
    document.getElementById('volume').addEventListener('input', function() {
      // スライダーの値を表示するoutput要素を更新
      document.getElementById('volumeOutput').textContent = this.value;
    });
  </script>

</body>
</html>

このコードは、HTMLとJavaScriptを使用して、音量を調整するための範囲入力(range input)要素を含む単純なウェブページを作成しています。以下にコードの主な要素とその動作を解説します。

1. HTMLの構造:

  • <!DOCTYPE html> HTML5の文書型宣言です。
  • <html lang="ja"> HTML文書のルート要素で、言語を"en"(英語)に指定しています。
  • <head> ドキュメントのヘッダー情報が含まれるセクションです。
  • <meta charset="UTF-8"> 文字エンコーディングをUTF-8に指定します。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> ページがモバイルデバイスに対応し、ビューポートの幅と初期倍率を設定します。
  • <title>Range Input Example</title> ページのタイトルを指定します。
  • <body> ドキュメントの本体で、実際のコンテンツが含まれます。

2. フォーム:

  • <form> フォーム要素です。
  • <label for="volume">音量:</label> スライダーのラベルを表示します。for属性がvolumeのlabel要素は、volumeというIDを持つ入力要素と関連付けられています。
  • <input type="range" id="volume" name="volume" min="0" max="100" step="1" value="50"> 範囲入力(スライダー)要素で、音量を0から100までの範囲で調整できます。1単位ごとに変更可能で、初期値は50です。
  • <output for="volume" id="volumeOutput">50</output> スライダーの値を表示するためのoutput要素で、for属性がvolumeのinput要素と関連付けられています。

3. JavaScript:

  • <script> JavaScriptコードが含まれるセクションです。
  • document.getElementById('volume').addEventListener('input', function() {...}); volumeというIDを持つ範囲入力要素に対して、inputイベントが発生したときに指定された関数を実行するイベントリスナーを追加しています。
  • 関数内では、スライダーの値が変更されたときに、volumeOutputというIDを持つoutput要素のテキストコンテンツをスライダーの値に更新しています。

このコードは、ユーザーがスライダーを操作すると、その値が即座に表示される単純な音量調整のUIを提供します。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。