diff options
Diffstat (limited to 'files/ja/web/html/element/input/week/index.html')
| -rw-r--r-- | files/ja/web/html/element/input/week/index.html | 398 |
1 files changed, 398 insertions, 0 deletions
diff --git a/files/ja/web/html/element/input/week/index.html b/files/ja/web/html/element/input/week/index.html new file mode 100644 index 0000000000..4434d448d9 --- /dev/null +++ b/files/ja/web/html/element/input/week/index.html @@ -0,0 +1,398 @@ +--- +title: <input type="week"> +slug: Web/HTML/Element/input/week +tags: + - Element + - Forms + - HTML + - HTML Input Types + - HTML forms + - HTML input + - Input + - Input Element + - Input Type + - Input Types + - Reference + - Week + - Weeks +translation_of: Web/HTML/Element/input/week +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>week</code></strong> 型は、年と、その年の <a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">ISO 8601 週番号</a> (つまり、第1週から第<a href="https://en.wikipedia.org/wiki/ISO_8601#Week_dates">52または53</a>週) を簡単に入力することができる入力欄を生成します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>コントロールのユーザーインターフェイスは、ブラウザーによって様々です。現時点ではブラウザー間の対応は限定的で、 Chrome/Opera と Microsoft Edge のみが対応しています。対応していないブラウザーでは、このコントロールは単純な <code><a href="/ja/docs/Web/HTML/Element/input/text"><input type="text"></a></code> に格下げされます。</p> + +<p>Chrome/Opera では、 <code>week</code> コントロールは週と年の値を埋めるスロット、もっと視覚的に選択するためのポップアップカレンダーインターフェイス、コントロールの値を消去するための "X" ボタンを提供します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></p> + +<p>Edge の <code>week</code> コントロールはもう少し凝っており、年と週を選ぶスライドするリールが開きます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>年と週を表す {{domxref("DOMString")}}、または空欄</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>{{domxref("DOMString")}} で、入力欄に入力された年と週を表します。この入力型で使われる日時値の形式は、 <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Format_of_a_valid_week_string">HTML で使われる日付や時刻の形式</a>で説明しています。</p> + +<p>次のように {{htmlattrxref("value", "input")}} 属性に値を入れることで、既定値を設定することができます。</p> + +<pre class="brush: html notranslate"><label for="week">どの週に始めたいですか。</label> +<input id="week" type="week" name="week" value="2017-W01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 60)}}</p> + +<p>一点気を付けなければならないことは、実際の <code>value</code> は常に <code>yyyy-Www</code> の書式であり、表示される書式はこれとは異なる可能性があるということです。例えば、上記の値をサーバーに送信すると、ブラウザーは <code>Week 01, 2017</code> のように表示するかもしれませんが、送信される値は常に <code>week=2017-W01</code> のようになります。</p> + +<p>次のように、 JavaScript から入力要素の {{domxref("HTMLInputElement.value", "value")}} プロパティを使用して、値を取得したり設定したりすることもできます。</p> + +<pre class="brush: js notranslate">var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45';</pre> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 型で共通する属性に加え、 <code>week</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>妥当な入力として受け付ける最も遅い年と週</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>妥当な入力として受け付ける最も早い年と週</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>論理属性で、存在する場合、入力欄の内容はユーザーが編集できないことを示す</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>ユーザーインターフェイスや制約検証に使用する刻み値 (許される値の間隔)</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>受け付ける (時間的に) 最も遅い年と週番号で、上記の{{anch("Value", "値")}}の節で説明した文字列書式です。要素に入力された {{htmlattrxref("value", "input")}} がこれを超えた場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が妥当な週の文字列ではない場合、要素は最大値を持ちません。</p> + +<p>この値は <code>min</code> 属性で指定されたものより後か、同じ年と週を指定する必要があります。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最も早い年と週です。要素の {{htmlattrxref("value", "input")}} がこれより小さいと、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。属性の値が妥当な週の文字列ではない場合、要素は最小値を持ちません。</p> + +<p>この値は <code>max</code> 属性で指定されたものより前か、同じ年と週を指定する必要があります。</p> + +<p>{{page("/ja/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>week</code> 入力欄では、 <code>step</code> の値は週数で指定され、 604,800,000 が乗じられます (ミリ秒単位の数値であるため)。 <code>step</code> の既定値は 1 であり、1週を表します。既定の刻みの既定値は -259,200,000 で、これは1970年の最初の週 (<code>1970-W01</code>) です。</p> + +<p><em>現時点で、 <code>week</code> 入力欄で <code>step</code> に <code>any</code> の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。</em></p> + +<h2 id="Using_week_inputs" name="Using_week_inputs">week 入力欄の使用</h2> + +<p>week 入力欄は一見すると便利に見えます。簡単に週を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <code><input type="week"></code> には問題があります。</p> + +<p><code><input type="week"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}}を参照してください)。</p> + +<h3 id="Basic_uses_of_week" name="Basic_uses_of_week">week の基本的な使用</h3> + +<p>もっとも単純な <code><input type=week></code> の使用方法は、次のように基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week"> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_week', 600, 40)}}</p> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="week"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 <a href="/ja/docs/Web/CSS">CSS</a> を使用する必要があります。</p> + +<h3 id="Using_the_step_attribute" name="Using_the_step_attribute">step 属性の使用</h3> + +<p>{{htmlattrxref("step", "input")}} 属性を使用して、週の番号が増加または減少するときに飛ばす番号を変更することができるはずですが、対応しているブラウザーでも何も動作していないようです。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定で、 <code><input type="week"></code> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、妥当な年と週でないものの入力をさせず、これは便利ですが、それでも入力欄を空のままにすることができ、また選択できる週の範囲を制限したくなるかもしれません。</p> + +<h3 id="Setting_maximum_and_minimum_weeks" name="Setting_maximum_and_minimum_weeks">週の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択することができる有効な週を制限することができます。以下の例では、最小値を <code>Week 01, 2017</code> に、最大値を <code>Week 52, 2017</code> に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52"> + <span class="validity"></span> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_weeks', 600, 40)}}</p> + +<p>上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>この結果は、対応するブラウザーでは2017年の第1週から第52週の間が有効に見え、選択することができます。</p> + +<h3 id="Making_week_values_required" name="Making_week_values_required">週の値を必須にする</h3> + +<p>加えて、 {{htmlattrxref("required", "input")}} 属性を使用して、週の入力を必須にすることができます。結果として、対応するブラウザーでは週の入力欄が空欄の場合にエラーを表示します。</p> + +<p>例を見てみましょう。週の最小値と最大値を設定し、かつフィールドを必須に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Submit form"> + </div> +</form></pre> + +<p>フォームに値を設定せずに送信しようとすると、ブラウザーはエラーを表示します。例を実行してみてください。</p> + +<p>{{EmbedLiveSample('Making_week_values_required', 600, 120)}}</p> + +<p>対応していないブラウザーを使用したときのスクリーンショットです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> + +<div class="warning"> +<p><strong>重要</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) が送信された場合に災害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で week 入力欄を利用する上で一番の問題はブラウザーの互換性です。デスクトップでは Safari と Firefox は対応しておらず、 IE の古いバージョンも対応していません。</p> + +<p>Android や iOS のようなモバイルプラットフォームは、このような入力型が実に有効であり、タッチスクリーン環境で実に簡単に値を選択できる専用のユーザーインターフェイスコントロールを提供します。例えば、 Android 版 Chrome の <code>week</code> 選択は、次のようになっています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは安全にテキスト入力欄に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの二つの問題を生じます。</p> + +<p>二つ目の問題はより深刻です。すでに述べたように、 <code>week</code> 入力欄では、実際の値が常に <code>yyyy-Www</code> の書式で正規化されます。ブラウザーが一般的なテキスト入力欄にフォールバックした場合、ユーザーが正しい書式で入力するよう案内することができません (そして、おそらく認識できません)。人間が週の値を書くには、次のように色々な方法があります。</p> + +<ul> + <li><code>Week 1 2017</code></li> + <li><code>Jan 2-8 2017</code></li> + <li><code>2017-W01</code></li> + <li>etc.</li> +</ul> + +<p>ブラウザーに依存しない方法によってフォームで年と週を扱う最善の方法は、現時点では年と週を別々なコントロール ({{htmlelement("select")}} 要素で入力するものが一般的です。以下の実装を見てください) にするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、週を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <code><input type="week"></code> 入力欄と、 <code>week</code> 入力欄に対応しない古いブラウザーで年と週を選択するための、２つの {{htmlelement("select")}} 要素です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 140)}}</p> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeWeekPicker"> + <label for="week">どの週から始めたいですか。</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2018-W52" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">どの週から始めたいですか。</p> + <div class="fallbackWeekPicker"> + <div> + <span> + <label for="week">Week:</label> + <select id="fallbackWeek" name="week"> + </select> + </span> + <span> + <label for="year">Year:</label> + <select id="year" name="year"> + <option value="2017" selected>2017</option> + <option value="2018">2018</option> + </select> + </span> + </div> + </div> +</form></pre> + +<p>週の値は以下の JavaScript のコードで動的に生成されます。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<p>もう一つの面白い部分は、機能の検出コードです。ブラウザーが <code><input type="week"></code> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>week</code> に設定てみて、すぐに type に何が設定されたかをチェックします。 <code>datetime-local</code> 型に対応していないブラウザーでは、 <code>week</code> 型が <code>text</code> 型へフォールバックされます。 <code><input type="week"></code> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。</p> + +<pre class="brush: js notranslate">// 変数を定義 +var nativePicker = document.querySelector('.nativeWeekPicker'); +var fallbackPicker = document.querySelector('.fallbackWeekPicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var weekSelect = document.querySelector('#fallbackWeek'); + +// 最初はフォールバックを非表示にする +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'week'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 週を動的に生成する + populateWeeks(); +} + +function populateWeeks() { + // 週の選択肢を52週で生成 + for(var i = 1; i <= 52; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + weekSelect.appendChild(option); + } +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください（<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照）。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '<input type="week">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-week")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使用される日付と時刻の書式</a></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> |