From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../learn/css/building_blocks/index.html | 331 ++++++ .../css/building_blocks/styling_tables/index.html | 478 +++++++++ .../building_blocks/values_and_units/index.html | 349 +++++++ .../ja/conflicting/learn/css/css_layout/index.html | 285 ++++++ .../css/styling_text/styling_lists/index.html | 246 +++++ .../javascript_basics/index.html | 303 ++++++ .../author_fast-loading_html_pages/index.html | 201 ++++ .../learn/html/introduction_to_html/index.html | 87 ++ .../javascript/building_blocks/events/index.html | 89 ++ .../manipulating_documents/index.html | 149 +++ .../learn/javascript/objects/index.html | 381 +++++++ files/ja/conflicting/mdn/contribute/index.html | 97 ++ .../index.html | 31 + files/ja/conflicting/mdn/yari/index.html | 53 + files/ja/conflicting/mozilla/add-ons/index.html | 248 +++++ .../how_to_submit_a_patch/index.html | 55 + .../conflicting/mozilla/developer_guide/index.html | 143 +++ .../mozilla/firefox/releases/index.html | 416 ++++++++ .../tools/debugger/how_to/search/index.html | 69 ++ .../how_to/set_watch_expressions/index.html | 47 + .../tools/keyboard_shortcuts/index.html | 100 ++ .../tools/memory/basic_operations/index.html | 15 + .../ja/conflicting/tools/page_inspector/index.html | 69 ++ .../tools/page_inspector/ui_tour/index.html | 35 + .../tools/performance/call_tree/index.html | 114 +++ files/ja/conflicting/tools/performance/index.html | 145 +++ .../tools/responsive_design_mode/index.html | 71 ++ .../conflicting/web/accessibility/aria/index.html | 1063 ++++++++++++++++++++ .../web/api/canvas_api/tutorial/index.html | 60 ++ .../index.html | 213 ++++ .../web/api/crypto/getrandomvalues/index.html | 113 +++ .../index.html | 31 + .../web/api/document/characterset/index.html | 26 + .../web/api/document/createevent/index.html | 32 + .../web/api/document_object_model/index.html | 5 + .../index.html | 16 + .../index.html | 37 + .../index.html | 52 + .../documentorshadowroot/getselection/index.html | 13 + .../web/api/documentorshadowroot/index.html | 79 ++ .../index.html | 83 ++ .../api/element/compositionstart_event/index.html | 80 ++ files/ja/conflicting/web/api/element/index.html | 50 + .../api/formdata/using_formdata_objects/index.html | 145 +++ .../web/api/globaleventhandlers/onclick/index.html | 45 + .../api/globaleventhandlers/onmousedown/index.html | 48 + .../api/globaleventhandlers/onmouseup/index.html | 57 ++ .../web/api/html_drag_and_drop_api/index.html | 9 + files/ja/conflicting/web/api/index.html | 58 ++ .../web/api/mediastream_recording_api/index.html | 187 ++++ .../web/api/mouseevent/button/index.html | 60 ++ files/ja/conflicting/web/api/navigator/index.html | 620 ++++++++++++ files/ja/conflicting/web/api/node/index.html | 33 + .../index.html | 21 + files/ja/conflicting/web/api/url/index.html | 101 ++ .../conflicting/web/api/web_storage_api/index.html | 14 + .../tutorial/using_textures_in_webgl/index.html | 16 + .../conflicting/web/api/websockets_api/index.html | 23 + .../conflicting/web/api/window/moveto/index.html | 11 + .../web/api/windoworworkerglobalscope/index.html | 116 +++ .../index.html | 119 +++ .../conflicting/web/api/xsltprocessor/index.html | 12 + .../index.html | 125 +++ files/ja/conflicting/web/css/@media/index.html | 5 + .../index.html | 17 + files/ja/conflicting/web/css/@viewport/index.html | 86 ++ .../index.html | 77 ++ .../index.html | 71 ++ .../index.html | 78 ++ .../index.html | 89 ++ .../index.html | 91 ++ .../web/css/_colon_placeholder-shown/index.html | 59 ++ .../web/css/box-ordinal-group/index.html | 66 ++ .../resizing_background_images/index.html | 103 ++ .../using_multiple_backgrounds/index.html | 74 ++ .../index.html | 47 + .../backwards_compatibility_of_flexbox/index.html | 368 +++++++ .../typical_use_cases_of_flexbox/index.html | 191 ++++ files/ja/conflicting/web/css/float/index.html | 32 + .../ja/conflicting/web/css/font-variant/index.html | 37 + files/ja/conflicting/web/css/index.html | 31 + .../media_queries/using_media_queries/index.html | 412 ++++++++ files/ja/conflicting/web/css/reference/index.html | 189 ++++ files/ja/conflicting/web/css/url()/index.html | 98 ++ files/ja/conflicting/web/css/width/index.html | 29 + .../index.html | 37 + .../index.html | 28 + .../creating_and_triggering_events/index.html | 28 + files/ja/conflicting/web/guide/index.html | 81 ++ .../introduction_to_web_development/index.html | 113 +++ files/ja/conflicting/web/guide/mobile/index.html | 18 + files/ja/conflicting/web/html/element/index.html | 585 +++++++++++ .../conflicting/web/html/element/title/index.html | 19 + .../web/html/global_attributes/index.html | 27 + .../html/global_attributes/spellcheck/index.html | 32 + .../connection_management_in_http_1.x/index.html | 38 + .../web/http/headers/user-agent/firefox/index.html | 175 ++++ .../http/headers/x-dns-prefetch-control/index.html | 35 + .../ja/conflicting/web/javascript/guide/index.html | 44 + .../index.html | 10 + .../reference/global_objects/escape/index.html | 34 + .../global_objects/intl/datetimeformat/index.html | 88 ++ .../reference/global_objects/json/index.html | 95 ++ .../global_objects/string/lastindexof/index.html | 18 + .../reference/global_objects/unescape/index.html | 34 + .../global_objects/webassembly/instance/index.html | 64 ++ .../global_objects/webassembly/memory/index.html | 71 ++ .../global_objects/webassembly/table/index.html | 75 ++ .../reference/lexical_grammar/index.html | 89 ++ .../web/javascript/reference/operators/index.html | 232 +++++ .../reference/operators/yield/index.html | 7 + .../index.html | 295 ++++++ files/ja/conflicting/web/opensearch/index.html | 73 ++ .../web/progressive_web_apps/index.html | 77 ++ .../progressive_web_apps/introduction/index.html | 65 ++ .../web/svg/svg_1.1_support_in_firefox/index.html | 781 ++++++++++++++ .../index.html | 411 ++++++++ .../index.html | 94 ++ 118 files changed, 14503 insertions(+) create mode 100644 files/ja/conflicting/learn/css/building_blocks/index.html create mode 100644 files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html create mode 100644 files/ja/conflicting/learn/css/css_layout/index.html create mode 100644 files/ja/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html create mode 100644 files/ja/conflicting/learn/html/introduction_to_html/index.html create mode 100644 files/ja/conflicting/learn/javascript/building_blocks/events/index.html create mode 100644 files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/ja/conflicting/learn/javascript/objects/index.html create mode 100644 files/ja/conflicting/mdn/contribute/index.html create mode 100644 files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html create mode 100644 files/ja/conflicting/mdn/yari/index.html create mode 100644 files/ja/conflicting/mozilla/add-ons/index.html create mode 100644 files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html create mode 100644 files/ja/conflicting/mozilla/developer_guide/index.html create mode 100644 files/ja/conflicting/mozilla/firefox/releases/index.html create mode 100644 files/ja/conflicting/tools/debugger/how_to/search/index.html create mode 100644 files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html create mode 100644 files/ja/conflicting/tools/keyboard_shortcuts/index.html create mode 100644 files/ja/conflicting/tools/memory/basic_operations/index.html create mode 100644 files/ja/conflicting/tools/page_inspector/index.html create mode 100644 files/ja/conflicting/tools/page_inspector/ui_tour/index.html create mode 100644 files/ja/conflicting/tools/performance/call_tree/index.html create mode 100644 files/ja/conflicting/tools/performance/index.html create mode 100644 files/ja/conflicting/tools/responsive_design_mode/index.html create mode 100644 files/ja/conflicting/web/accessibility/aria/index.html create mode 100644 files/ja/conflicting/web/api/canvas_api/tutorial/index.html create mode 100644 files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html create mode 100644 files/ja/conflicting/web/api/crypto/getrandomvalues/index.html create mode 100644 files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html create mode 100644 files/ja/conflicting/web/api/document/characterset/index.html create mode 100644 files/ja/conflicting/web/api/document/createevent/index.html create mode 100644 files/ja/conflicting/web/api/document_object_model/index.html create mode 100644 files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html create mode 100644 files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html create mode 100644 files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html create mode 100644 files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html create mode 100644 files/ja/conflicting/web/api/documentorshadowroot/index.html create mode 100644 files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html create mode 100644 files/ja/conflicting/web/api/element/compositionstart_event/index.html create mode 100644 files/ja/conflicting/web/api/element/index.html create mode 100644 files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html create mode 100644 files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html create mode 100644 files/ja/conflicting/web/api/html_drag_and_drop_api/index.html create mode 100644 files/ja/conflicting/web/api/index.html create mode 100644 files/ja/conflicting/web/api/mediastream_recording_api/index.html create mode 100644 files/ja/conflicting/web/api/mouseevent/button/index.html create mode 100644 files/ja/conflicting/web/api/navigator/index.html create mode 100644 files/ja/conflicting/web/api/node/index.html create mode 100644 files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html create mode 100644 files/ja/conflicting/web/api/url/index.html create mode 100644 files/ja/conflicting/web/api/web_storage_api/index.html create mode 100644 files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 files/ja/conflicting/web/api/websockets_api/index.html create mode 100644 files/ja/conflicting/web/api/window/moveto/index.html create mode 100644 files/ja/conflicting/web/api/windoworworkerglobalscope/index.html create mode 100644 files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html create mode 100644 files/ja/conflicting/web/api/xsltprocessor/index.html create mode 100644 files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html create mode 100644 files/ja/conflicting/web/css/@media/index.html create mode 100644 files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html create mode 100644 files/ja/conflicting/web/css/@viewport/index.html create mode 100644 files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html create mode 100644 files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html create mode 100644 files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html create mode 100644 files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html create mode 100644 files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html create mode 100644 files/ja/conflicting/web/css/_colon_placeholder-shown/index.html create mode 100644 files/ja/conflicting/web/css/box-ordinal-group/index.html create mode 100644 files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html create mode 100644 files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/ja/conflicting/web/css/float/index.html create mode 100644 files/ja/conflicting/web/css/font-variant/index.html create mode 100644 files/ja/conflicting/web/css/index.html create mode 100644 files/ja/conflicting/web/css/media_queries/using_media_queries/index.html create mode 100644 files/ja/conflicting/web/css/reference/index.html create mode 100644 files/ja/conflicting/web/css/url()/index.html create mode 100644 files/ja/conflicting/web/css/width/index.html create mode 100644 files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html create mode 100644 files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html create mode 100644 files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/ja/conflicting/web/guide/index.html create mode 100644 files/ja/conflicting/web/guide/introduction_to_web_development/index.html create mode 100644 files/ja/conflicting/web/guide/mobile/index.html create mode 100644 files/ja/conflicting/web/html/element/index.html create mode 100644 files/ja/conflicting/web/html/element/title/index.html create mode 100644 files/ja/conflicting/web/html/global_attributes/index.html create mode 100644 files/ja/conflicting/web/html/global_attributes/spellcheck/index.html create mode 100644 files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/ja/conflicting/web/http/headers/user-agent/firefox/index.html create mode 100644 files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html create mode 100644 files/ja/conflicting/web/javascript/guide/index.html create mode 100644 files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/json/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/operators/yield/index.html create mode 100644 files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html create mode 100644 files/ja/conflicting/web/opensearch/index.html create mode 100644 files/ja/conflicting/web/progressive_web_apps/index.html create mode 100644 files/ja/conflicting/web/progressive_web_apps/introduction/index.html create mode 100644 files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html create mode 100644 files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html (limited to 'files/ja/conflicting') diff --git a/files/ja/conflicting/learn/css/building_blocks/index.html b/files/ja/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..379b38949d --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: Boxes +slug: Web/Guide/CSS/Getting_started/Boxes +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} これは CSS Getting Started チュートリアルの第11章です。ここでは、要素が表示されるとき、要素の占めるスペースを CSS で操作する方法について述べます。実際に文書を作り、間隔の調整や装飾ルールの追加を試してください。

+ +

ボックスについて

+ +

ブラウザに表示されると、要素は一定のスペースを占有します。このスペースは4つの部分で構成されています。

+ +

中央に、要素（element）がその内容を表示するのに必要なスペースがあります。その周りに パディング（padding） があり、その周りに ボーダー（border） があります。その周りには マージン（margin） があって、他要素とその要素を隔てています。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

薄い灰色がレイアウトの部品を示します。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

パディング、ボーダー、マージンは要素の上下左右で異なるサイズにできます。一部または全部をゼロにすることもできます。

+ +

彩色

+ +

パディングは常に要素の背景色と同じ色です。このため背景色を設定すると、その色は要素自身とそのパディングに適用されます。マージンは常に透明です。

+ + + + + + + + +
+
+

マージン

+ +

ボーダー

+ +
+

パディング

+ +
+

要素

+
+
+
+ +

要素の背景色は緑です。

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

要素

+
+
+
+ +

ブラウザではこう見えます。

+
+ +

ボーダー

+ +

ボーダーを使って、要素を線や枠囲みで装飾できます。

+ +

要素の境界線をすべて同じにするには、{{cssxref("border")}} プロパティを使います。幅（画面表示されるときの単位は通常 pixel です）、スタイル、色を定義します。

+ +

選べるスタイル:

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

また、スタイルを none か hidden にして、明示的にボーダーを消したり、色を transparent にして、レイアウトを変えずにボーダーを透明にしたりできます。

+ +

一辺ずつボーダーを定義するには、次のプロパティを使います: {{cssxref("border-top")}}、{{cssxref("border-right")}}、{{cssxref("border-bottom")}}、{{cssxref("border-left")}}。これを使うと、一辺だけボーダーを定義したり、辺ごとに違うボーダーを定義したりできます。

+ +
+
例
+ +

次のルールは、見出し要素の背景色と上辺のボーダーを定義します:

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+}
+ +

結果は次のようになります:

+ + + + + + + +
+

スタイルつきの見出し

+
+ +

次のルールは、画像をミッドグレーの枠で取り囲んで見やすくします:

+ +
img {border: 2px solid #ccc;}
+
+
+ +

結果は次のようになります:

+ + + + + + + + +
画像:Image:Blue-rule.png
+ +

マージンとパディング

+ +

マージンとパディングで要素の位置を調整し、周りに余白を作ります。

+ +

{{cssxref("margin")}} プロパティと {{cssxref("padding")}} プロパティでそれぞれ、マージンの幅、パディングの幅を設定します。

+ +

幅を一つだけ記述すると、要素の全ての枠（top（上辺）、right（右辺）、bottom（下辺）、left（左辺））に適用されます。

+ +

幅を2つ記述すると、1番目が top と bottom に、2番めが right と left に適用されます。

+ +

4つすべての幅を定義するには、次の順番で記述します: top、 right、bottom、left

+ +
+
例
+ +

次のルールは、remark クラスを持つ段落に、四辺すべてを囲むような赤い枠を与えます。

+ +

パディングで囲むことで、テキストから枠が少し離れます。

+ +

左マージンは段落を他のテキストからインデントします:

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

結果は次のようになります:

+ + + + + + + +
+

ここは通常の段落です。

+ +

ここは remark 用の段落です。

+
+
+ +
+
さらに詳しく
+ +

マージンとパディングで要素の配置方法を調整すると、そのスタイルのルールとブラウザのデフォルトが、複雑な方法で相互作用します。

+ +

ブラウザによって、要素の配置方法が異なります。スタイルシートで変えなければ、結果は同じに見えるかもしれません。このため、時折スタイルシートのもたらす結果に驚くことがあります。

+ +

望む結果を得るには、文書のマークアップを変更する必要があるかもしれません。このチュートリアルの次のページで、このことについてもっと触れています。

+ +

パディング、マージン、ボーダーについての詳しい情報は、リファレンスの ボックスモデル をご覧ください。

+
+ +

実習: ボーダーの追加

+ +

CSS ファイル style2.css を編集します。次のルールを追加して、見出しのそれぞれで、ページを横切る線を描くようにしてください:

+ +
h3 {border-top: 1px solid gray;}
+
+ +

前のページのチャレンジを終えていれば、そこで作ったルールを編集するか、次の新しいルールを追加して、各リスト項目の真下にスペースを置くようにしてください:

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

ブラウザを更新すると次の結果になります:

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
チャレンジ
+ +

スタイルシートに一つルールを追加して、リスト項目全体を囲むような広い枠を作り、海を連想するような色にしてください — 次のような感じです:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

（幅や色を正確に同じにする必要はありません。）

+
+ +

このチャレンジの解答を見る。

+ +

さて次は？

+ +

{{nextPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}マージンやパディングを指定して、文書のレイアウトを変えることができました。次のページでは、他の方法で文書の レイアウト を変えます。

diff --git a/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..1f0905d1ec --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,478 @@ +--- +title: Tables +slug: Web/Guide/CSS/Getting_started/Tables +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +
+ {{CSSTutorialTOC}}{{previousPage("/ja/docs/CSS/Getting_Started/Layout", "Layout")}}
+

これは CSS Getting Started チュートリアルの第 13 章です。ここではさらに高度なセレクタと、テーブルのスタイルづけに特有の方法を述べます。テーブルを含む新しいサンプル文書と、スタイルシートを作ってください。

+

表（テーブル）について

+

テーブルは、縦軸 / 横軸のデータ構造を持つ情報の並びです。テーブルは複雑になることがあり、複雑なテーブルはブラウザによって違った表示になる場合があります。

+

文書を設計する際には、テーブルを細かな情報同士の 関係性 を示すのに使ってください。そうすれば、ブラウザによって少し違った表示がされても問題ありません。目的が依然はっきりしているためです。

+

精密な視覚的レイアウトを作るために、テーブルの変わった使い方をしないでください。そういった目的には、このチュートリアルの前のページにある技法（レイアウト）のほうが適しています。

+

テーブルの構造

+

テーブルでは、情報の一つ一つが セル（cell） に入れて表示されます。

+

ページを横切るように並ぶセルが、 行（row）を作ります。

+

テーブルによっては、行はグループ化されているかもしれません。テーブルの初めにある特殊な行グループが、ヘッダー（header）です。テーブルの終わりにある特殊な行グループが、フッター（footer）です。テーブルの中心的な行が ボディ（body）で、これも、グループに入っているかもしれません。

+

ページ下方に向けて並ぶセルは列（column）を作りますが、CSS のテーブルでは、列の用途には制限があります。

+
+
+ 例
+

Selectors ページの Selectors based on relationships の表には、行が 5 つ、セルが 10 個あります。

+

最初の行はヘッダーです。残りの 4 つの行はボディです。フッターはありません。

+

列は 2 つあります。

+
+

このチュートリアルでは結果が予測できるような、簡単なテーブルしか扱いません。簡単なテーブルでは、各セルがどれも 1 つの行と 1 つの列を占めます。セルが 1 行や 1 列以上に 伸びた（span）複雑なテーブルにも CSS を使えますが、そういったテーブルはこの基本チュートリアルの範疇を超えています。

+

ボーダー

+

セルにはマージンがありません。

+

セルにはボーダーとパディングがあります。デフォルトでは、ボーダーはテーブルの {{cssxref("border-spacing")}} プロパティで決められます。テーブルの {{cssxref("border-collapse")}} プロパティを collapse にすると、間隔を完全に取り除くことができます。

+
+
+ 例
+

テーブルが 3 つあります。

+

左のテーブルには 0.5em 幅のボーダーがあります。中央のテーブルには幅ゼロのボーダーがあります。右のテーブルには 折り畳まれた（collapsed）ボーダーがあります:
+ （表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

キャプション

+

{{HTMLElement("caption")}} 要素はテーブル全体に当てられるラベルです。デフォルトでは、テーブルの一番上に表示されます。

+

底部に移動させるには、{{cssxref("caption-side")}} プロパティを bottom にします。プロパティは継承されるので、テーブルに設定することも、祖先要素に設定することもできます。

+

キャプションの文字にスタイルをつけるには、通常のテキスト用のプロパティを使ってください。

+
+
+ 例
+

このテーブルは底部にキャプションがあります

+

（表示例は、この wiki の制限により、正しく表示されていないかもしれません）

+ 
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

空のセル

+

テーブル要素に {{cssxref("empty-cells")}}: show; と定義すると、空のセル（これはつまりセルのボーダーと背景です）を表示できます。

+

隠すには empty-cells: hide; と定義します。こうすると、セルの親要素に背景があるとき、空のセル越しに見ることができます。

+
+
+ 例
+

次のテーブルは薄い緑の背景を持っています。各セルは薄い灰色の背景と濃い灰色のボーダーを持っています。

+

左のテーブルでは、空セルが見えています。右のテーブルでは隠されています:

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+
+
+ 詳細
+

テーブルについての詳しい情報は、CSS 仕様書の Tables をご覧ください。

+

そこにある情報はこのチュートリアルを超えたものになりますが、そこでは、複雑なテーブルに影響する、ブラウザ間の相違については触れていません。

+
+

実習: テーブルのスタイルづけ

+
    +
  1. 新しい HTML 文書 doc3.html を作ってください。次の内容をコピー＆ペーストしてください。スクロールさせて、コピー漏れがないか確認してください: +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. 新しいスタイルシート style3.css を作ります。次の内容をコピー＆ペーストしてください。スクロールして、コピー漏れがないことを確認します: + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. 文書をブラウザで開きます。次の内容に似たものになるでしょう: + + + + + + +
    +
    +

    Oceans

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    +
    +
    +
    +
    4. +
  4. 表示されたテーブルとスタイルシートにあるルールを比較して、各行の働きを理解できているか確かめてください。自信のないルールを見つけたら、そのルールをコメントアウトしてブラウザを更新し、何が起きるか見てみましょう。このテーブルに関する注意点は次のとおりです: +
      +
    • キャプションはテーブルのボーダーより外側に置かれています。
      • +
    • もしオプションでフォントの最小値を設定していれば、 km2 の上付き文字に影響します。
      • +
    • 空セルが 3 つあります。そのうち2つは、テーブルの背景を透過しています。 3 つ目は背景と上辺にボーダーを持ちます。
      • +
    • コロンはスタイルシートで追加しています。
      • +
    +
    5. +
+
+
+ チャレンジ
+

スタイルシートを、テーブルが次のようになるように変えてください:

+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+

Oceans

+
+
+
+

チャレンジの解答を見る。

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Media", "Media")}} このページは、CSS のプロパティと値に主眼を置いたチュートリアルの最後のページです。プロパティと値についてのすべての概要については、CSS 仕様書の Full property table をご覧ください。

+

次のページでは、CSS スタイルシートの目的と構造をもう一度見ていきます。

diff --git a/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..4d080bc3a4 --- /dev/null +++ b/files/ja/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,349 @@ +--- +title: 色 +slug: Web/Guide/CSS/Getting_started/Color +tags: + - CSS + - 'CSS:Getting_Started' + - Getting_Started +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +

この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。

+ +

サンプルスタイルシートに、背景色を指定出来るようになります。

+ +

{{ 英語版章題("Information: Color") }}

+ +

解説: 色

+ +

このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 black gray silver white 
プライマリーred lime blue 
セカンダリーyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
+ +

 

+ + + + + + + + +
詳細情報
ブラウザが上記以上の名前付きの色をサポートしている可能性もあります + + + + + + + + + + + + + + + +
dodgerblue peachpuff tan firebrick aquamarine 
+ +

拡張された色の名前リストについては、CSS 3 カラーモジュールの SVG 色キーワード を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。

+
+ +

より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の16 進数 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
+ +

完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
+ +

これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。

+ + + + + + + + + + + +
Examples
少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
赤から始めます #f00
桃色に近づけるため、緑・青を追加 #f77
橙に近づけるため、緑を追加 #fa7
暗くするため、全ての色を減らす #c74
飽和を減らすため、色の値を近づける #c98
色同士を完全に同じにすると、灰色 #ccc
+
空色のようなパステル調を出すには: + + + + + + + + + + + + + +
白から始めます: #fff
他の色の値を少し減らします: #eef
+
+ +

 

+ + + + + + + + +
More details
色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。 +

たとえば、次の色はマロン (濃い赤) になります :

+ +
+ 
+rgb(128, 0, 0)
+
+
+ +


+ 色指定の詳細については、CSS 仕様書の 色 をご覧ください。

+ +

メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。

+
+ +


+ {{ 英語版章題("Color properties") }}

+ +

色のプロパティー

+ +

color プロパティーをすでに利用しました。

+ +

同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。

+ +

背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。

+ + + + + + + + +
Example
このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。 +
+ 
+background-color: #fffff4;
+
+
+ +

より詳細は のボックスは淡灰色を使っています。

+ +
+ 
+background-color: #f4f4f4;
+
+
+
+ +

{{ 英語版章題("Action: Using color codes") }}

+ +

試してみましょう: カラーコードを利用する

+ +

CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)

+ +
+
/*** CSS Tutorial: Color page ***/
+
+/* page font */
+body {font: 16px "Comic Sans MS", cursive;}
+
+/* paragraphs */
+p {color: blue;}
+#first {font-style: italic;}
+
+/* initial letters */
+strong {
+  color: red;
+  background-color: #ddf;
+  font: 200% serif;
+  }
+
+.carrot {color: red;}
+.spinach {color: green;}
+
+
+ +

ブラウザを再読み込みして結果を見てみましょう。

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

 

+ + + + + + + + +
Challenge
結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。 +

(完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)

+
+ +


+ {{ 英語版章題("What next?") }}

+ +

次は ?

+ +

あなたのサンプルは完全にスタイルと中身に分離されました。

+ +

次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content

diff --git a/files/ja/conflicting/learn/css/css_layout/index.html b/files/ja/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..e8bd18d944 --- /dev/null +++ b/files/ja/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,285 @@ +--- +title: Layout +slug: Web/Guide/CSS/Getting_started/Layout +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +
+ {{CSSTutorialTOC}} {{previousPage("/ja/docs/CSS/Getting_Started/Boxes", "Boxes")}}
+

これは CSS Getting Started チュートリアルの第 12 章です。ここでは、文書のレイアウトを調整する方法をいくつか述べます。サンプル文書のレイアウトを変えてみましょう。

+

レイアウトについて

+

CSS を使うと、文書のレイアウトを変えるような様々な視覚効果を定義できます。レイアウト定義の手法には、上級者向けで、この基本チュートリアルの範疇を超えるようなものもあります。

+

多くのブラウザで同じ見た目になるようレイアウトを設計すると、スタイルシートはブラウザのデフォルトのスタイルシートやレイアウトエンジンと、入り組んだ方法で相互作用します。これもまた基本チュートリアルの範疇を超えた、上級者向けの話題です。

+

このページでは、あなたが試せるような簡単な技法をいくつか述べます。

+

文書の構造

+

文書のレイアウトを操作するなら、その構造を変える必要があるかもしれません。

+

お使いのマークアップ言語には、構造化のための汎用タグがあるかもしれません。たとえば、HTML では構造化に {{HTMLElement("div")}} 要素を使うことができます。

+
+
+ 例
+

サンプル文書では、2 番目の見出しの下にある、番号づけされた段落はどれも、入れ物に入っていません。

+

セレクタで指定する要素がないため、スタイルシートでこれらの段落の周囲に枠を描くことができません。

+

この構造的な問題を直すために、段落の周りに {{HTMLElement("div")}} タグを一つ追加します。このタグは一意で、id 属性で見分けられます。

+ 
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+

これで、両方のリストの周りに枠を定義するルールをスタイルシートに追加できます。

+ 
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+

サイズの単位（Size units）

+

このチュートリアルではこれまで、サイズを pixels (px) で定義してきました。これはコンピューターの画面のようなディスプレイデバイスでの用途にはふさわしいものです。しかし、ユーザがフォントサイズを変えると、レイアウトがおかしくなる可能性があります。

+

多くの用途で、サイズをパーセンテージか ems (em) で定義するのがよいでしょう。em は通常、現在のフォントサイズを指します（文字 m の幅）。ユーザがフォントサイズを変えると、レイアウトが自動的に調整されます。

+
+
+ 例
+

次のテキストの左辺のボーダーは pixel 単位のサイズで定義されています。

+

右辺のボーダーは ems 単位のサイズで定義されています。

+

ブラウザの表示フォントサイズを変えて、右辺のボーダーが調整されることと、左辺のボーダーはされないことを確認してください:

+ + + + + + +
+
+ 僕の大きさを変えてお願い
+
+
+
+
+ さらに詳しく
+

その他のデバイスには、これ以外の長さの単位が適しています。

+

これについては、このチュートリアルの後半のページにもっと情報があります。

+

すべての利用可能な値と単位の詳細は、CSS 仕様書の Values をご覧ください。

+
+

テキストのレイアウト

+

2 つのプロパティで、要素の内容がどのように文字寄せされるか定義します。これは、単純なレイアウトの調整にも使えます。

+
+
+ {{cssxref("text-align")}}
+
+ 文字寄せを行います。次のうちいずれかの値を使います: left, right, center, justify
+
+ {{cssxref("text-indent")}}
+
+ 指定した幅でインデントを行います。
+
+

これらのプロパティは要素内のテキストだけではなく、テキストに似たコンテンツにも適用されます。これらのルールが要素の子に継承されることを忘れないでください。結果を見て驚かないように、子要素で明示的にこれらをオフにする必要があるかもしれません。

+
+
+ 例: 見出しを中央寄せする
+ 
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+

表示結果:

+ + + + + + +
+

(A) The oceans

+
+

HTML 文書では、見出しの下に見える内容は構造的には見出しに含まれていません。したがって見出しを文字寄せしても、見出しの下にあるタグにそのスタイルは継承されません。

+
+

フロート（Floats、浮動体）

+

{{cssxref("float")}} プロパティは、要素を左または右に押しつけます。これは要素の位置やサイズを操作する簡単な方法です（以降、float 指定された要素のことをフローティング要素と呼びます）。

+

文書の残りのコンテンツは通常、フローティング要素の周囲に流れ込み（flow）ます。{{cssxref("clear")}} プロパティを使うと、残りの要素をフローティング要素から離して、この流れを制御できます。

+
+
+ 例
+

サンプル文書では、リストはウィンドウいっぱいに広がります。これは、左側に浮動させると回避できます。

+

見出しを定位置に留めるには、その左側にあるフローティング要素から、見出しを離れさせるような定義も必要です。

+ 
ul,
+#numbered { float: left; }
+h3 { clear: left; }
+
+
+

結果は次のようになります:

+ + + + + + +
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+

（ボックスの右側でボーダーがテキストに近すぎるので、少しパディングが必要です）

+

位置取り

+

{{cssxref("position")}} プロパティと次の値のうちの 1 つを指定すると、要素の位置を 4 つの方法で定義できます。

+

これは高度なプロパティです。基本チュートリアルで取り上げるのは、これが簡単に使えるためです。しかし、複雑なレイアウトに使うなら難しくなります。

+
+
+ relative
+
+ 相対的。要素の位置は通常位置に比べて相対的に移動します。指定量だけ要素を動かす場合にこれを使ってください。場合によっては、要素のマージンを使って同じ効果が得られることがあります。
+
+ fixed
+
+ 固定。要素の位置は固定されます。文書のウィンドウに対する相対値で指定してください。文書の他の部分がスクロールしても、要素は固定されたままです。
+
+ absolute
+
+ 絶対的。要素は祖先要素の内、直近のポジショニング要素 (position プロパティの値が relative、fixed 、absolute の何れかの要素 ) に対する絶対位置に、もしくはポジショニング要素が無い場合はルート要素に対する絶対位置に配置されます。親要素自身に位置指定が必要無い場合には position:relative を用いる事により親要素自身への影響を回避できます。
+
+ static
+
+ 静止。デフォルトです。明示的に位置づけをオフにしたいときにこの値を使ってください。
+
+

position プロパティ（static を除く）の値といっしょに、次のプロパティから一つかそれ以上を指定します: top 、 right 、 bottom 、 left 、 width 、 height これにより、要素の現れる場所やおそらくはそのサイズも指定します。

+
+
+ 例: 複数の要素を重ねる
+

2 つの要素を重なり合うように位置づけるには、文書に入れ物になる親要素を作り、その中に 2 つの要素を入れます:

+ 
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+

スタイルシートで、親要素の position を relative にします。移動量を指定する必要はありません。子要素の position を absolute にします。

+ 
#parent-div {
+  position: relative;
+  font: bold 200% sans-serif;
+}
+
+#forward, #back {
+  position: absolute;
+  margin: 0; /* 要素の周囲のマージンを 0 に */
+  top: 0; /* 上部からの距離 */
+  left: 0; /*  左部からの距離 */
+}
+
+#forward {
+  color: blue;
+}
+
+#back {
+  color: red;
+}
+
+

結果は、スラッシュの上にバックスラッシュが乗り、次のようになります。

+
+

/

+

\

+
+ + + + + + +
 
+
+
+
+ さらに詳しく
+

位置決めに関する完全な記事は、 CSS 仕様書の複雑な 2 つの章: Visual formatting model と Visual formatting model details にあります。

+

多くのブラウザで機能するようにスタイルシートをデザインするつもりなら、ブラウザごとの標準の解釈の仕方や、おそらくは特定ブラウザの特定バージョンのバグについても考慮する必要があります。

+
+

実習: レイアウトの定義

+
    +
  1. サンプル文書 doc2.html と スタイルシート style2.css を、上の『文書の構造』と『フロート』の各章にある例を使って変更してください。
    2. +
  2. フロート の例にパディングを追加し、右のボーダーからテキストを 0.5em 離してください。
    3. +
+
+
+ チャレンジ
+

サンプル文書 doc2.html を変更して、文書の末尾近く、</body> の直前に次のタグを追加します。

+ 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+

もし初めの方のチュートリアルで画像ファイルをダウンロードしていなければ、いま行なって、他のサンプルファイルと同じディレクトリに置いてください。

+

+

画像が文書内のどこに現れるか予測してみてください。ブラウザを更新して、予測が正しかったかどうかを見ます。

+

スタイルシートにルールを追加して、文書の右上に画像が置かれるようにしてください。

+

ブラウザを更新し、ウィンドウを小さくします。文書をスクロールしても、画像が右上に留まることを確認しましょう。

+
+
+

(A) The oceans

+
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

(B) Numbered paragraphs

+
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+

 

+
+ Yellow map pin
+
+
+
+

このチャレンジの解答を見る

+

さて次は？

+

{{nextPage("/ja/docs/CSS/Getting_Started/Tables", "Tables")}} あなたは、この基本チュートリアルのほとんどすべてのトピックスを踏破しました。次のページでは CSS ルールのもっと高度なセレクタと、テーブル のスタイルづけに特有のやり方をいくつか述べます。

diff --git a/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..212947f4f6 --- /dev/null +++ b/files/ja/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,246 @@ +--- +title: Lists +slug: Web/Guide/CSS/Getting_started/Lists +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/ja/docs/CSS/Getting_Started/Content", "Content") }} これは CSS Getting Started チュートリアルの第10章です。CSS を使ってリストの外見を決める方法について述べます。リストを含む新しいサンプル文書と、リストの体裁を決めるスタイルシートを作ってください。

+

リストについて

+

前章 のチャレンジでは、どの要素の直前にでも、コンテンツを追加してリスト項目のように表示する方法がわかりました。

+

CSS にはリスト用に作られた特別なプロパティがあります。使えるときには使ったほうがたいてい便利です。

+

リストにスタイルを定義するには、{{ cssxref("list-style") }} プロパティを使ってマーカーの種類を指定します。

+

CSS ルールでは、セレクタにリスト項目要素を選ぶこともできますし（例：{{ HTMLElement("li") }}）、親のリスト要素を選んで、リスト要素がスタイルを継承するようにもできます（例：{{ HTMLElement ("ul") }}））。

+

箇条書きリスト（unordered list）

+

箇条書きリストでは、すべてのリスト項目に同じ方法でマーカーがつきます。

+

CSS には3種類のマーカーがあり、ブラウザは次のように表示します:

+ +

もしくは、画像の URL を指定できます。

+
+
+ 例
+

次のルールはリスト項目のクラス別に異なったマーカーを定義します:

+ 
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+

リスト内でこれらのクラスを使うと、open と closed の項目の区別がはっきりします（例：to-doリスト):

+ 
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+

結果は次のようになるでしょう:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

番号順リスト（ordered lists）

+

番号順リストでは、リスト項目は各々違ったマーカーをつけられ、順番を表します。

+

マーカーの種類を定義するには {{ cssxref("list-style") }} プロパティを使ってください:

+ +
+
+ 例
+

これは info クラスの {{ HTMLElement("ol") }} 要素についてのルールで、項目が大文字のアルファベットで識別されます。

+ 
ol.info {list-style: upper-latin;}
+
+

リスト内の {{ HTMLElement("li") }} 要素はこのスタイルを継承します:

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+
+
+ さらに詳しく
+

{{ cssxref("list-style") }} は略記用のプロパティです。複雑なスタイルシートでは、値ごとに個別のプロパティを使いたくなるかもしれません。これら個別のプロパティや、CSS がリストを定義する方法については、リファレンス {{ cssxref("list-style") }} をご覧ください。

+

箇条書きリスト ({{ HTMLElement("ul") }}) や番号リスト ({{ HTMLElement("ol") }}) の慣例的なタグを定めている HTML のようなマークアップ言語を使うなら、その意図通りにタグを使うのはよい練習になります。しかしながら、CSSでは お望みであれば {{ HTMLElement("ul") }} に番号リストを表示させたり、{{ HTMLElement("ol") }} に箇条書きリストを表示させたりもできます。

+

リストのスタイルづけはブラウザによって実装方法が異なります。どのブラウザでも同じ結果が出るとは思わないでください。

+
+

カウンター

+
+

注:  一部のブラウザーはカウンターをサポートしていません。Quirks Mode site の CSS contents and browser compatibility ページに、カウンターや他の CSS 機能についてのブラウザの実装状況の詳しい表があります。このサイトの CSS Reference の各ページにもブラウザ実装状況の表があります。

+
+

カウンターはリスト項目だけでなく、どの要素にも番号をつけられます。例えば、ある文書では見出しや章を数えたいかもしれません。

+

通し番号を定義するには、独自に名前をつけた counter が必要です。

+

カウントが開始されるより前の要素のいずれかで、{{ cssxref("counter-reset") }} プロパティとカウンター名を使ってカウンターをリセットしてください。これは数える要素の親で行うのが適していますが、リスト項目より前に現れる要素ならどれでも使えます。

+

番号が増える要素の各々に {{ cssxref("counter-increment") }} プロパティとカウンター名を使ってください。

+

カウンターを表示するには、セレクタに {{ cssxref(":before") }} または {{ cssxref(":after") }} を追加し、content プロパティを使います（前のページ コンテンツ で行った要領です）。

+

content プロパティの値として、counter() とカウンター名を記述します。オプションとして種類を記述します。種類は上の 番号順リスト の欄にあるものと同じです。

+

通常、カウンターを表示する要素もまたカウンターを増やします。

+
+
+ 例
+

次のルールは numbered クラスを持つ {{ HTMLElement("h3") }} 要素が現れるたびにカウンターを初期化します:

+ 
h3.numbered {counter-reset: mynum;}
+
+

 

+

次のルールは numbered クラスを持つ {{ HTMLELement("p") }} 要素が現れるたびにカウンターを表示し、番号を増やします:

+ 
p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+

結果は次のようになります:

+ + + + + + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+
+ さらに詳しく
+

読者がみな、カウンターをサポートするブラウザを使っているとわからなければ、カウンターは使えません。

+

カウンターを使えると、リストの項目と切り離してカウンターにスタイルをつけられる利点があります。上の例では、カウンターは太字ですがリスト項目は違います。

+

もっと複雑な方法でカウンターを使えます — 例えば、様式に沿う文書の章、見出し、サブ見出し、段落を数えます。詳しくは、CSS 仕様書の Automatic counters and numbering をご覧ください。

+
+

実習: スタイルづけされたリスト

+

新しいHTML文書、doc2.html を作成してください。次の内容をコピー＆ペーストします:

+
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+

新しいスタイルシート、style2.css を作成してください。次の内容をコピー＆ペーストします:

+
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+

レイアウトやコメントが気に入らなければ変えてください。

+

ブラウザで文書を開きます。カウンター対応のブラウザなら下の例に似たものが見えるでしょう。非対応のブラウザなら、数字が見えません（おそらくコロンも）:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+ チャレンジ
+

スタイルシートに一つルールを追加して、リスト項目に i から v のローマ数字で番号をつけてください:

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

 

+

次のように、見出しを括弧内の大文字のアルファベットで識別するように、スタイルシートを変更してください:

+ + + + + + +
+

(A) The oceans

+

. . .

+

(B) Numbered paragraphs

+

. . .

+
+
+

チャレンジの解答を見る。

+

さて次は？

+

{{ nextPage("/ja/docs/CSS/Getting_Started/Boxes", "ボックス") }} 文書を表示するとき、ブラウザは要素をページ上に並べる際に、要素を囲むようにスペースを作ります。次のページでは、要素の基礎となる形である ボックス（boxes）を CSS で扱う方法について述べます。

diff --git a/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..b87febbe05 --- /dev/null +++ b/files/ja/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,303 @@ +--- +title: Getting Started (Javascript Tutorial) +slug: Web/JavaScript/Getting_Started +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

Why JavaScript?

+

JavaScript is a powerful, complicated, and often misunderstood computer language. It enables the rapid development of applications in which users can enter data and view results easily.

+

The primary advantage to JavaScript, which is also known as ECMAScript, centers around the Web browser, thus having the ability to produce the same results on all platforms supported by the browser. The examples on this page, just like Google Maps, run on Linux, Windows, and Mac OS. With the recent growth of numerous JavaScript libraries it is now easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. Unlike the hype around other technologies pushed by various proprietary interests, JavaScript is really the only cross-platform, client-side programming language that is both free and universally adopted.

+

What you should already know

+

JavaScript is a very easy language to start programming with. All you need is a text editor and a Web browser to get started.

+

There are many other technologies that can be integrated into and developed along with JavaScript that are beyond the scope of this document. Don't expect to make a whole application like Google Maps all on your first day!

+

Getting started

+

Getting started with JavaScript is very easy. You don't have to have complicated development programs installed. You don't have to know how to use a shell, program Make, or use a compiler. JavaScript is interpreted by your Web browser. All you have to do is save your program as a text file and then open it up in your Web browser. That's it!

+

JavaScript is a great programming language for introductory computer languages. It allows instant feedback to the new student and teaches them about tools they will likely find useful in their real life. This is in stark contrast to C, C++, and Java which are really only useful for dedicated software developers.

+

Browser compatibility issues

+

There are variations between what functionality is available in the different browsers. Mozilla, Microsoft IE, Apple Safari, and Opera fluctuate in behavior. We intend on documenting these variations. You can mitigate these issues by using the various cross-platform JavaScript APIs that are available. These APIs provide common functionality and hide these browser fluctuations from you.

+

How to try the examples

+

The examples below have some sample code. There are many ways to try these examples out. If you already have your own website, then you should be able to just save these examples as new Web pages on your website.

+

If you do not have your own website, you can save these examples as files on your computer and open them up with the Web browser you are using now. JavaScript is a very easy language to use for beginning programmers for this reason. You don't need a compiler or a development environment; you and your browser are all you need to get started!

+

Example: Catching a mouse click

+

The specifics of event handling (event types, handler registration, propagation, etc.) are too extensive to be fully covered in this simple example. However, this example cannot demonstrate catching a mouse click without delving a little into the JavaScript event system. Just keep in mind that this example will only graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities described here, read more about the JavaScript event system.

+

'Mouse' events are a subset of the total events issued by a Web browser in response to user actions. The following is a list of the events emitted in response to a user's mouse action:

+ +

Note that in the latest versions of HTML, the inline event handlers, i.e. the ones added as tag attributes, are expected to be all lowercase and that event handlers in script are always all lowercase.

+

The simplest method for capturing these events, to register event handlers - using HTML - is to specify the individual events as attributes for your element. Example:

+
  <span onclick="alert('Hello World!');">Click Here</span>
+

The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

+
<script type="text/javascript">
+  function clickHandler () {
+     alert ("Hello, World!");
+  }
+</script>
+<span onclick="clickHandler();">Click Here</span>
+

Additionally, the event object which is issued can be captured and referenced, providing the developer with access to specifics about the event such as which object received the event, the event's type, and which mouse button was clicked. Using the inline example again:

+
<script type="text/javascript">
+  function clickHandler(event) {
+    var eType = event.type;
+    /* the following is for compatibility */
+    /* Moz populates the target property of the event object */
+    /* IE populates the srcElement property */
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
+  }
+</script>
+<span onclick="clickHandler(event);">Click Here</span>
+

In addition to registering to receive events in your HTML, you can likewise set the same attributes of any HTMLElement objects generated by your JavaScript. The example below instantiates a span object, appends it to the page body, and registers the span object to receive mouse-over, mouse-out, mouse-down, and mouse-up events.

+
<body></body>
+<script type="text/javascript">
+  function mouseeventHandler(event) {
+    /* The following is for compatibility */
+    /* IE does NOT by default pass the event object */
+    /* obtain a ref to the event if one was not given */
+    if (!event) event = window.event;
+
+    /* obtain event type and target as earlier */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' event on element with id: '+ eTarget.id);
+  }
+
+ function onloadHandler () {
+   /* obtain a ref to the 'body' element of the page */
+   var body = document.body;
+   /* create a span element to be clicked */
+   var span = document.createElement('span');
+   span.id = 'ExampleSpan';
+   span.appendChild(document.createTextNode ('Click Here!'));
+
+   /* register the span object to receive specific mouse events -
+      notice the lowercase of the events but the free choice in the names of the handlers you replace them with.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* display the span on the page */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // since we replace the handler, we do NOT have () after the function name
+</script>
+

Example: Catching a keyboard event

+

Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.

+

The list of available keyboard events emitted in response to a keyboard action is considerably smaller than those available for mouse:

+ +

In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g., 'a'), charCode is set to the code of that character, respecting the letter case (i.e., charCode takes into account whether the shift key is held down). Otherwise, the code of the pressed key is stored in keyCode.

+

The simplest method for capturing keyboard events is again to register event handlers within the HTML, specifying the individual events as attributes for your element. Example:

+
  <input type="text" onkeypress="alert ('Hello World!');" />
+
+

As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or you can call a function which has been defined in a <script> block within the HTML page:

+
<script type="text/javascript">
+  function keypressHandler() {
+    alert ("Hello, World!");
+  }
+</script>
+
+<input onkeypress="keypressHandler();" />
+
+

Capturing the event and referencing the target (i.e., the actual key that was pressed) is achieved in a similar way to mouse events:

+
<script type="text/javascript">
+  function keypressHandler(evt) {
+      var eType = evt.type; // Will return "keypress" as the event type
+      /* here we again need to use a cross browser method
+         mozilla based browsers return which and others keyCode.
+         The Conditional operator or ternary is a good choice */
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + String.fromCharCode(keyCode); // or evt.charCode
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);" />
+

Capturing any key event from the page can be done by registering the event at the document level and handling it in a function:

+
<script type="text/javascript">
+  document.onkeypress = keypressHandler(event);
+  document.onkeydown = keypressHandle(event);
+  document.onkeyup =keypressHandle(event)
+
+</script>
+

Here is a complete example that shows key event handling:

+
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var exampleKey = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
+      var keychar = String.fromCharCode(key);
+      if (key==exampleKey) { metaChar = true; }
+      if (key!=exampleKey) {
+         if (metaChar) {
+            alert("Combination of metaKey + " + keychar)
+            metaChar = false;
+         } else { alert("Key pressed " + key); }
+      }
+    }
+    function metaKeyUp (event) {
+      var key = event.keyCode || event.which;
+      if (key==exampleKey) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+    Try pressing any key!
+</body>
+</html>
+

Browser bugs and quirks

+

The two properties made available through the key events are keyCode and charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while charCode is intended to return that key's ASCII value. These two values may not necessarily be the same; for instance, a lower case 'a' and an upper case 'A' have the same keyCode, because the user presses the same key, but a different charCode because the resulting character is different.

+

The way in which browsers interpret the charCode is not a consistently-applied process. For example, Internet Explorer and Opera do not support charCode. However, they give the character information in keyCode, but only onkeypress. Onkeydown and onkeyup keyCode contain key information. Firefox uses a different word, "which", to distinguish the character.

+

Refer to the Mozilla Documentation on Keyboard Events for a further treatment of keyboard events.

+

{{ draft() }}

+

Example: Dragging images around

+

The following example allows moving the image of Firefox around the page:

+
<!DOCTYPE html>
+<html>
+<head>
+<style type='text/css'>
+img { position: absolute; }
+</style>
+
+<script type='text/javascript'>
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // e.srcElement holds the target element in IE, whereas e.target holds the target element in Firefox
+    // Both properties return the HTML element the event took place on.
+
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    } else {
+        return false;
+    }
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64" />
+  <p>Drag and drop around the image in this page.</p>
+</body>
+
+</html>
+

Example: Resizing things

+
+ Example of resizing an image (the actual image is not resized, only the image's rendering.) + 
  <!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        #resizeImage {
+          margin-left: 100px;
+        }
+      </style>
+      <script>
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      </script>
+    </head>
+
+    <body>
+      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64" />
+      <p>Click on the image and drag for resizing.</p>
+    </body>
+
+  </html>
+
+

Example: Drawing Lines

+

{{todo("Need Content. Or, remove headline")}}

diff --git a/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..08f5330b89 --- /dev/null +++ b/files/ja/conflicting/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,201 @@ +--- +title: 読み込みが速い HTML ページを作成するための Tips +slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web + - Web Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +

これらの豆知識は、一般の知識や実験に基づくものです。

+ +

ウェブページを最適化すると、訪問者に対して応答性のよいサイトを提供するだけでなく、ウェブサーバーやインターネット接続の負荷を低減する効果もあります。これは大規模なサイトや、緊急事態で通信量が急増するニュース速報のようなサイトでは重要でしょう。

+ +

ページの読み込みパフォーマンスの最適化は、低速なダイヤルアップ接続やモバイルデバイスの利用者向けコンテンツのためだけではありません。ブロードバンド向けコンテンツでも重要であり、高速接続の利用者であっても劇的な改善につながるでしょう。

+ +

豆知識

+ +

ページの量の削減

+ +

ページの量は、ページ読み込みパフォーマンスにおいて断然重要な要素です。

+ +

最小化として知られる不要なホワイトスペースやコメントの削除、インラインのスクリプトや CSS の外部ファイルへの移動によりページの量を削減することで、ページの構造変更を最小限にしてダウンロードの性能を向上できるでしょう。

+ +

HTML Tidy のようなツールを利用すると、妥当な HTML ソースから行頭のホワイトスペースや過剰な空行を自動的に取り除くことができます。他に JavaScript ソースを、書式変更や難読化および長い識別子を短いものに置き換えることで 「{{原語併記("圧縮", "compress")}}」するツールもあります。

+ +

ファイル数の最少化

+ +

ウェブページが参照するファイル数を削減することで、ページのダウンロードに必要な HTTP コネクションの数が減り、それによってリクエストを送信したり、レスポンスを受け取ったりする時間が短縮できます。

+ +

ブラウザーのキャッシュ設定によっては、ブラウザーが各ファイルの If-Modified-Since ヘッダーで、ファイルが最後にダウンロードされてから変更されているかどうかを確認するリクエストを送信することがあります。ページをレンダリングする前に、ブラウザがこれらの各ファイルの変更時刻をチェックする必要があるため、参照されたファイルの最終変更時刻をチェックするのに時間がかかり過ぎると、ウェブページの初期表示が遅くなることがあります。

+ +

CSS で多数の背景画像を使用している場合は、画像スプライトと呼ばれる方法でで画像を 1 つに結合することで必要な HTTP による参照の数を減らすことができます。すなわち、背景として用いる画像ファイルは毎回同じものを適用し、それを適切な x/y 座標に調整します。これは寸法が限られている要素について最善の方法ですが、適用できない場合もあるでしょう。しかし、HTTP リクエストを少なくしてキャッシュする画像を単一にすることで、ページの読み込み時間を削減できます。

+ +

コンテンツ配信ネットワーク (CDN) を使用する

+ +

この記事の目的のために、CDN はサーバーと訪問者の間の物理的な距離を縮めるための手段です。サーバーの起点と訪問者の間の距離が長くなると、読み込み時間が長くなります。ウェブサイトのサーバーがアメリカにあり、インドからの訪問者がいるとします。米国からの訪問者と比較して、ページの読み込み時間はインドの訪問者の方がはるかに長くなります。

+ +

CDN は地理的に分散したサーバーネットワークで、ユーザーとウェブサイトの距離を縮めるために連携して機能します。CDN はキャッシュされたウェブサイトのバージョンを保存し、それらをユーザーに最も近いネットワークノードを介して訪問者に提供するので、待ち時間が短縮されます。

+ +

参考文献:

+ + + +

ドメイン検索の削減

+ +

ドメインが分かれていると DNS の参照に時間がかかるため、CSS の link や JavaScript や画像の src に多数のドメインが現れるほど、ページの読み込み時間が長くなるでしょう。

+ +

現実的でない場合があるかもしれませんが、ページがあるドメインと異なるドメインの使用数は必要最低限にするよう注意すべきです。

+ +

再利用されるコンテンツのキャッシュ

+ +

どんなコンテンツでも、キャッシュできるか、キャッシュされているか、キャッシュ期限が適切であるかを確認してください。

+ +

特に、Last-Modified ヘッダーに注意してください。これは、効率のよいページのキャッシュができるようにします。このヘッダーは、ファイルを読み込もうとしているユーザーエージェントに、ファイルがいつ更新されたかなどの情報を伝えます。多くのウェブサーバーは、静的なページ (.html、.css など) にはファイルシステムに格納されている最終更新日に基づいて、自動的に Last-Modified ヘッダーを追加します。もちろん、動的なページ (.php、.aspx など) については取得できないので、ヘッダーを送信しません。

+ +

そのため、特に動的に生成されるページについては、この件について調べてみると有益です。よって特に、動的に生成されるページのためにこの問題について調べることは有益です。少し厄介ですが、通常キャッシュできないページのリクエストを大幅に節約できるでしょう。

+ +

詳細情報:

+ +
    +
  1. HTTP Conditional Get for RSS Hackers
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. Wikipedia の HTTP ETag の記事
    4. +
  4. Caching in HTTP
    5. +
+ +

ページのコンポーネントの最適な順序

+ +

最初の表示に必要な CSS または JavaScript と共に、ページコンテンツをまずダウンロードすると、ページの読み込み中にユーザーに最もすばやくページを表示させることができます。このコンテンツは通常テキストであるため、転送中のテキスト圧縮の効率が良く、ユーザーへの反応がもっと早くなります。

+ +

使用される前にページの読み込みが完了する必要がある動的機能は、最初は無効にしておき、ページの読み込みが完了した後でのみ有効にするようにしましょう。これにより、JavaScript がページコンテンツの後に読み込まれるようになり、ページ読み込み時に全体が表示されるまでの時間が短縮されます。

+ +

インラインスクリプト数の削減

+ +

インラインスクリプトがあると、インラインスクリプトのパース中にページの構造が変わる可能性があるとパーサーが想定しなければならないため、ページの読み込みにおいて重荷になることがあります。一般的にはインラインスクリプトの使用を減らし、また特に document.write() を用いたコンテンツの出力を減らすことで、ページ読み込みのパフォーマンスが向上するでしょう。 document.write() に基づく旧来のコンテンツ操作方法ではなく、最新のブラウザー向けの方法である AJAX を使用してください。

+ +

最新の CSS と正しいマークアップの使用

+ +

最新の CSS を用いるとマークアップの量を削減し、レイアウトの点で (スペーサーの) 画像使用を減らし、また多くの場合スタイル付けした文字列の画像を置き換えることが可能です。画像は CSS と文字列の組み合わせに比べ、多大なコストがかかります。

+ +

正しいマークアップを使用することは、ほかにも利点があります。第一に、ブラウザーが HTML を解釈する際にエラー訂正を行う必要がなくなります (ユーザーの記述法の多様性を認めるかどうかという哲学的な問題とは別です。厳密な、許容範囲のない書式を強制するというより、プログラム的に「正しく」または正規化しましょう)

+ +

さらに、正しいマークアップをすることによって、ウェブページをプリプロセスができる他のツールが自由に利用できるようになります。例えば、HTML Tidy はホワイトスペースや省略可能な終了タグを除去することができます。しかし、重大なマークアップの誤りがあるページではツールを実行できません。

+ +

コンテンツをまとめる

+ +

テーブルをレイアウトのために使うのは陳腐化した方法であり、もはや使うべきではありません。レイアウトを行うには、代わりに floats、positioning、フレックスボックス、グリッドを使用してください。

+ +

テーブルは現在でも妥当なマークアップと考えられていますが、表形式のデータを表示するために用いるべきです。ブラウザーがページを迅速に表示するためには、テーブルを入れ子にしないようにしてください。

+ +

以下のように深い入れ子のテーブルを使用する代わりに、

+ +
<table>
+  <table>
+    <table>
+          ...
+    </table>
+  </table>
+</table>
+ +

以下のように入れ子にしないテーブルや div を用いてください。

+ +
<table>...</table>
+<table>...</table>
+<table>...</table>
+
+ +

CSS Flexible Box Layout と CSS Grid Layout の仕様書も参照してください。

+ +

SVG の資産を最小化し圧縮する

+ +

多くの描画アプリケーションで作成された SVG は、不必要なメタデータを含んでいることが多く、削除することができます。サーバーで SVG 資産を gzip で圧縮するよう設定しましょう。

+ +

画像を縮小して圧縮する

+ +

画像が大きいと、ページの読み込みに時間がかかります。画像をページに追加する前に、圧縮することを検討してください。 Compress Jpeg、Tiny PNG、その他多くのツールがオンラインで利用可能です。photoshop などのオフラインツールも使用できます。

+ +

画像やテーブルのサイズ指定

+ +

ブラウザーが直ちに画像やテーブルの高さや幅を決めることができれば、ブラウザーはコンテンツの再配置を行うことなくウェブページを表示できます。これはページの表示を高速化するだけでなく、ページの読み込みが完了するまでにレイアウトが不安定に変化することを防ぎます。よって、可能な限り画像には height と width を指定するべきです。

+ +

テーブルは以下のセレクターとプロパティの組み合わせを用いるべきです:

+ +
  table-layout: fixed;
+
+ +

そして、 <col> 要素および <colgroup> 要素を用いて列の幅を指定しましょう。

+ +

ユーザーエージェント要件の賢い選択

+ +

ページデザインを最大限に改善するには、プロジェクトのユーザーエージェントの要件を合理的なものにしましょう。すべてのブラウザー、特に古いバージョンのブラウザーでコンテンツがピクセル単位で正確に見えるように要求しないでください。

+ +

理想的には、適切な標準仕様に対応している最新のブラウザーを最低要件にするよう考慮するべきです。これには、最近のバージョンの Firefox、Internet Explorer、Google Chrome、Opera、Safari が含まれます。

+ +

ただし、この記事に記載している秘訣の多くはあらゆるユーザーエージェントに適用できる汎用的なテクニックであり、かつブラウザーの対応要件にかかわらずどのようなウェブページにでも適用できます。

+ +

可能なら async や defer を使用する

+ +

async と defer 属性の両方と互換性のある JavaScript を使用し、特に、複数の script タグがある場合、可能ならば async をいつでも使用してください。
+
+ これにより、ページで JavaScript が読み込み中である間はレンダリングを中断できます。さもなければ、ブラウザーはこれらの属性を持たない script タグの後にあるコンテンツをレンダリングしないでしょう。

+ +

注意: これらの属性が初回のページ読み込みに大きな効果があるとしても、属性は使用するべきですがすべてのブラウザーで動作するとは考えないようにしてください。よい JavaScript コードを作るためのガイドラインすべてに従っていれば、コードを変更する必要はありません。

+ +

ページ構造の例

+ +

· HTML

+ +
+
· HEAD
+
+ +
+
+
+
· LINK ...
+ ページの外観に必要な CSS ファイルです。管理のために関連性のない CSS は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
+
+
· SCRIPT ...
+ ページの読み込み中に必要な機能の JavaScript ファイルです。ページの読み込み後にしか実行しない DHTML は含めないようにしてください。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
+
+
+ +
+
· BODY
+
· 小さな塊 (tables / divs) のページコンテンツは、ページ全体の読み込みを待つことなく表示することができます。
+
+ +
+
+
+
· SCRIPT ...
+ DHTML を実行するのに用いるスクリプトです。DHTML のスクリプトはたいてい、ページが完全に読み込まれて必要なオブジェクトがすべて初期化された後にのみ実行します。よって、ページのコンテンツより先に読み込む必要はありません。先に読み込むと、ページが最初に表示されるのが遅くなります。
+
管理のために関連性のない JavaScript は別のファイルに分けるとともに、パフォーマンスのためにファイル数は最小限にしてください。
+
ロールオーバー効果で用いる画像がある場合は、ページのコンテンツをダウンロードした後に画像の先読みをしておきましょう。
+
+
+
+ + + + diff --git a/files/ja/conflicting/learn/html/introduction_to_html/index.html b/files/ja/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..1c8a7cc261 --- /dev/null +++ b/files/ja/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,87 @@ +--- +title: Historical artifacts to avoid +slug: Web/Guide/HTML/Obsolete_things_to_avoid +tags: + - HTML + - NeedsContent + - NeedsTechnicalReview +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Web/Guide/HTML/Obsolete_things_to_avoid +--- +

導入

+ +

多くの人々はページのソースを見てコピー & ペーストすることで、元のサイトが上手に作成されているかを考えることなく HTML、CSS、JavaScript を学習しました。これは、過去には必要であったかもしれないが現在は無意味になっているコーディングの慣習を習得してしまうことを意味します。このページでは、時間がたつにつれて不要あるいは悪い慣習になった事柄を説明します。

+ +

Doctype

+ +

(X)HTML には 10 種類ほどの doctype があります。それらの違いはわずかです (違いがない場合もあります)。HTML5 の doctype の使用を推奨します。

+ +
<!DOCTYPE html>
+ +

これはすべてのブラウザ (Internet Explorer 6 を含む) で標準準拠モードになります。

+ +

<meta> 要素と charset 属性

+ +

以下の記述を含むソースコードを見ることがよくあります:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+ +

ところが、すべての Web ブラウザ (Internet Explorer 6 を含む) は以下のように短縮した場合でも同様に動作します:

+ +
<meta charset="UTF-8" />
+
+ +

すばらしい リバースエンジニアリング や プラグマティズム によってこの知識を獲得しました。これを使用してください。

+ + + +

存在しない <meta> 要素

+ +

多数の非推奨、非標準、不使用な値がいまだにサイトからサイトへコピーされています。特に以下の値は使用しないでください:

+ + + +

スクリプト内の HTML コメント

+ +

かつては一部のブラウザのみが {{ HTMLElement("script") }} タグを認識していました。そのためスクリプトとして解釈されるべきテキストを、ブラウザが表示してしまうことがありました。この現象に対する自然なアイデアは、スクリプトを HTML のコメントに収めることでした。この方法では、スクリプトを実行するブラウザはそのスクリプトを実行し、スクリプトを認識しないブラウザはスクリプトを無視しました。

+ +

そのような時期から、我々は以下のような記述を受け継いできました:

+ +
<script><!--
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "bla.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+//-->
+</script>
+
+ +

または以下のような記述:

+ +
<script type="text/javascript">
+<!--//--><![CDATA[//><!--
+Blabla.extend(MyFramework.settings, { "basePath": "/" });
+//--><!]]>
+</script>
+
+ +

このような記述は、今日では無意味です。スクリプトを実行しないブラウザであっても、 {{ HTMLElement("script") }} タグを無視します。スクリプトだけを {{ HTMLElement("script") }} 要素の開始タグと終了タグの間に記述してください。また、{{ htmlattrxref("src", "script") }} 属性で指定する別のファイルにスクリプトを含めることもよいです。合わせて、HTML5 の {{ htmlattrxref("async", "script") }} 属性や {{ htmlattrxref("defer", "script") }} 属性を用いることも考えてみましょう。

+ +

もはや使用すべきではない要素

+ +

font

+ +

<font> タグに代わり、CSS を用いて要素や id/class セレクタにフォントスタイルを適用してください。

+ +

b, i, u

+ +

これらは少々議論の余地がありますが、適切な場合はできる限り、それぞれ {{ HTMLElement("strong") }}、 {{ HTMLElement("em") }}、CSS (text-decoration:underline) を適用した {{ HTMLElement("span") }} を用いるようにしてください。

+ +

これらのうちどの要素を選択するかは、裁量に任せます。一部の開発者向けページでは、単純に {{ HTMLElement("b") }} を {{ HTMLElement("strong") }} で、{{ HTMLElement("i") }} を {{ HTMLElement("em") }} で置き換えるようにアドバイスしています。このアドバイスに従うことは悪い考えです。 {{ HTMLElement("strong") }} は特に重要な記述のため、一方 {{ HTMLElement("em") }} はそれ以外に強調する記述のための要素です。たとえば、文字をイタリック体にする目的で単純に {{ HTMLElement("em") }} を用いるのは悪い考えです。強調しないイタリック体の文字列は、CSS で font-style:italic を用いて実現してください。同様に、書籍や芸術作品のタイトルは伝統的にイタリック体のテキストで記載しますが、このような箇所は {{ HTMLElement("em") }} や {{ HTMLElement("i") }} より {{ HTMLElement("cite") }} 用を用いる方が、より意味を持ちます。

diff --git a/files/ja/conflicting/learn/javascript/building_blocks/events/index.html b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..0c2047bce5 --- /dev/null +++ b/files/ja/conflicting/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,89 @@ +--- +title: Event 属性 +slug: Web/Guide/HTML/Event_attributes +tags: + - Beginner + - Guide + - HTML + - Intermediate + - JavaScript +translation_of: >- + Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these +translation_of_original: Web/Guide/HTML/Event_attributes +--- +

すべての HTML 要素は、特定のイベントが発生したときの JavaScript の実行が許可された属性の集合から成り立ちます。これらは Event 属性と呼ばれ、その属性名には "on" の接頭辞が付きます。例えば、ユーザーが要素をクリックしたときに JavaScript を実行するために、JavaScript を onclick 属性の中に書きます。

+ +

イベントの応答として JavaScript のコードが実行された場合、this スコープは HTML 要素となり、このスコープ内にある event 変数を通して {{domxref("Event")}} オブジェクトにアクセスできます。

+ +
+

警告: これらの属性を使うことは避けるべきです。これは HTML を巨大化し可読性を下げます。情報と振る舞いの関心事が正しく分離されておらず、発見が困難なバグを生み出します。その上に、Event 属性の使い方はほとんどの場合、{{domxref("Window")}} オブジェクト上のグローバル関数にスクリプトを晒す原因になります。これはグローバルの名前空間を汚染します。

+
+ +

これらの属性が魅力的で簡単に使うことができたとしても、これを使うのは避けるべきです。代わりに、イベントリスナーを追加する為には {{domxref("EventTarget.addEventListener()")}} 関数を使ってください。

+ +

この Event 属性は、'unsafe-inline' キーワードを使わない限りすべてのインラインスクリプトをブロックするコンテンツ・セキュリティ・ポリシーを使うことよって ブロックされる可能性があります。

+ +

Event 属性の使用例

+ +

この例は {{HTMLElement("div")}} がクリックされる度にテキストを要素に追加します。

+ +
+

注意: これは、これらの属性の 1 つを使用する例であり、するべきではない方法です。

+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>Event 属性の例</title>
+    <script>
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
+      }
+    </script>
+  </head>
+  <body>
+    <div onclick="doSomething();">クリック!</div>
+    <div id="thanks"></div>
+  </body>
+</html>
+
+ +

この例を実行してみてください:

+ +

{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}

+ +

イベントリスナーの使用例

+ +

代わりに、以下に示すように {{domxref("EventTarget.addEventListener()")}} を使うべきです。

+ +
<!doctype html>
+<html>
+  <head>
+    <title>Event 属性の例</title>
+    <script>
+      function doSomething() {
+        document.getElementById("thanks").innerHTML += "<p>クリックしてくれてありがとう!</p>";
+      }
+
+      // ページのロードが完了した時に呼ばれる;
+      // ここは、ページ内の要素にイベントリスナを追加するなど、何でも必要な設定を実行する場所です。
+
+      function setup() {
+        document.getElementById("click").addEventListener("click", doSomething, true);
+      }
+      // ウィンドウ内のドキュメントのロードが完了したことを知る為の、
+      // "load" イベントを受け取る為にイベントリスナを window オブジェクトに追加する
+
+      window.addEventListener("load", setup, true);
+    </script>
+  </head>
+  <body>
+    <div id="click">クリック!</div>
+    <div id="thanks"></div>
+  </body>
+</html>
+ +

この動作を以下の例から確認できます:

+ +

{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}

+ diff --git a/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..fc2fa7a3b4 --- /dev/null +++ b/files/ja/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,149 @@ +--- +title: JavaScript and CSS +slug: Web/Guide/CSS/Getting_started/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +
+ {{CSSTutorialTOC}}
+

これは CSS チュートリアル 第2部の、第 1 章です。第 2 部には、他のウェブや Mozilla の技術とともに使われる CSS の応用例があります。

+

第 2 部の各ページで、 CSS とその他の技術を相互作用させる方法を説明します。これらのページは、その他の技術の使い方を学べるようには作られていません。その他の技術の詳細を学ぶなら、他のチュートリアルを探してみてください。

+

代わりに CSS の数々の用途を解説していきます。読むために CSS の知識が少し必要ですが、その他の技術について何も知っている必要はありません。

+

前の章（第 1 部）: メディア
+ 次の章: SVG

+

JavaScriptについて

+

JavaScript はプログラミング言語 です。JavaScript はウェブサイトやアプリケーションで、インタラクティブ性を作るのに広く使われています。

+

JavaScript はスタイルシートと相互に作用でき、文書のスタイルを動的に変えるプログラムを書けます。

+

3 つの方法があります:

+ + + + + + + + +
+ さらに詳しく
JavaScript, についてのさらに詳しい情報は、この wiki の JavaScript のページをご覧ください。
+

実習: JavaScript の実演

+

新規 HTML 文書 doc5.html を作ってください。以下の内容をコピー＆ペーストしてください（スクロールしてすべてをコピーできているか確認してください）:

+
+ 
<!DOCTYPE html>
+<html>
+
+<head>
+<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
+<link rel="stylesheet" type="text/css" href="style5.css" />
+<script type="text/javascript" src="script5.js"></script>
+</head>
+
+<body>
+<h1>JavaScript sample</h1>
+
+<div id="square"></div>
+
+<button type="button" onclick="doDemo(this);">Click Me</button>
+
+</body>
+</html>
+
+
+

新規 CSS ファイル style5.css を作り、次の内容をコピー＆ペーストしてください:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+}
+
+button {
+  padding: .5em 2em;
+}
+
+
+

新規テキストファイル script5.js を作り、以下の内容をコピー＆ペーストしてください:

+
+ 
// JavaScript demonstration
+function doDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "#fa4";
+  button.setAttribute("disabled", "true");
+  setTimeout(clearDemo, 2000, button);
+}
+
+function clearDemo (button) {
+  var square = document.getElementById("square");
+  square.style.backgroundColor = "transparent";
+  button.removeAttribute("disabled");
+}
+
+
+

ブラウザで HTML 文書を開いて、ボタンを押してください。

+

この wiki はページ内に JavaScript を含められないため、ここで実際の表示をお見せすることはできません。ボタンを押す前と押した後で、結果は次のような感じになるでしょう:

+ + + + + + + +
+ + + + + + + + + +
+

JavaScript sample

+
 
+ 		+ + + + + + + + + +
+

JavaScript sample

+
 
+
+
+ この実演についての重要な補足: + +
+ + + + + + + +
+ チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
+

チャレンジの解答を見る。

+

さて次は？

+

このページにわかりづらいところやご意見があれば Discussion ページに参加してください。

+

この実演では、ボタン要素だけがスクリプトを使っているのに、HTML 文書にスクリプトがリンクされていました。Mozilla は CSS を拡張して、JavaScript コード（あるいはコンテンツや他のスタイルシート）を選択した要素にリンクできるようにしています。次のページではこの実演を行います: XBL bindings

diff --git a/files/ja/conflicting/learn/javascript/objects/index.html b/files/ja/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..cbe9e10a0a --- /dev/null +++ b/files/ja/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,381 @@ +--- +title: オブジェクト指向 JavaScript 入門 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +tags: + - Constructor + - Encapsulation + - Inheritance + - Intermediate + - JavaScript + - Members + - Namespace + - OOP + - Object + - Object-Oriented +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +
{{jsSidebar("Introductory")}}
+ +

オブジェクト指向を追求することで、JavaScript は強力かつ柔軟な{{Glossary("OOP", "オブジェクト指向プログラミング")}}能力を特色としています。この記事ではまずオブジェクト指向プログラミングの入門から始め、JavaScript のオブジェクトモデルの復習、そして最後に JavaScript のオブジェクト指向プログラミングの概念を説明します。

+ +

JavaScript の復習

+ +

変数、型、関数、スコープといった JavaScript の概念について自信がないのでしたら、JavaScript「再」入門で該当するトピックをご覧いただくとよいでしょう。また、JavaScript ガイドもご覧ください。

+ +

オブジェクト指向プログラミング

+ +

オブジェクト指向プログラミング (OOP) は、実世界を元にしたモデルの作成に{{glossary("abstraction", "抽象化")}}を使用する、プログラミングのパラダイムです。OOP は{{glossary("modularity", "モジュラリティ")}}、{{glossary("polymorphism", "ポリモーフィズム")}}、{{glossary("encapsulation", "カプセル化")}}といった、これまでに確立されたパラダイム由来の技術を複数使用しています。今日、人気がある多くのプログラミング言語 (Java、JavaScript、C#、C++、Python、PHP、Ruby、Objective-C など) が OOP をサポートしています。

+ +

OOP はソフトウェアを関数の集まりや単なるコマンドのリスト（これまでの伝統的な見方）としてではなく、協調して動作するオブジェクトの集まりであると考えます。OOP では、各々のオブジェクトがメッセージを受信し、データを処理し、また他のオブジェクトへメッセージを送信できます。各々のオブジェクトは明確な役割や責任を持つ、独立した小さな機械であると見なせます。

+ +

OOP はプログラミングにおける柔軟性や保守性の向上を促し、大規模ソフトウェアエンジニアリングにおいて広く普及しています。OOP はモジュラリティを強く重視しているため、オブジェクト指向によるコードは開発をシンプルにします。また、コードを後から理解することが容易になります。オブジェクト指向によるコードはモジュラリティが低いプログラミング方法よりも、直接的な分析、コーディング、複雑な状況や手続きの理解を促進します。1

+ +

用語集

+ +
+
{{Glossary("Namespace", "ネームスペース")}} （名前空間）
+
開発者があらゆる機能をアプリケーション固有の一意な名前にまとめることができる一種の容器のことです。
+
{{Glossary("Class", "クラス")}}
+
オブジェクトの特性を定義するものです。クラスは、オブジェクトのプロパティやメソッドを定義するテンプレートです。
+
{{Glossary("Object", "オブジェクト")}}
+
クラスの実体です。
+
{{Glossary("Property", "プロパティ")}}
+
「色」などといったオブジェクトの特性です。
+
{{Glossary("Method", "メソッド")}}
+
「歩く」などといった、オブジェクトの能力です。これは、クラスに関連付けられたサブルーチンや関数です。
+
{{Glossary("Constructor", "コンストラクタ")}}
+
インスタンス化するときに呼び出されるメソッドです。コンストラクタの名前は通常、クラスの名前と同じです。
+
{{Glossary("Inheritance", "継承")}}
+
あるクラスが別のクラスから特性を引き継ぐことを指します。
+
{{Glossary("Encapsulation", "カプセル化")}}
+
データと、そのデータを使用するメソッドとをまとめる手法のことです。
+
{{Glossary("Abstraction", "抽象化")}}
+
実世界のモデルが、オブジェクトの複雑な継承、メソッド、プロパティの集合体によって適切に再現されている状態を指します。
+
{{Glossary("Polymorphism", "ポリモーフィズム")}}
+
Poly は "many"、morphism は "forms" を意味します。別々のクラスが同じメソッドやプロパティを定義可能であることを表します。
+
+ +

オブジェクト指向プログラミングのより広範な説明については、Wikipedia の {{interwiki("wikipedia", "オブジェクト指向プログラミング")}} をご覧ください。

+ +

プロトタイプベースプログラミング

+ +

プロトタイプベースのプログラミングはクラスを使用せず、既存のプロトタイプオブジェクトをデコレート（あるいは拡張）してそのオブジェクトの持つ挙動を再利用する（クラスベースの言語における継承と同等）ことで実現される OOP モデルです（クラスレス、プロトタイプ指向、あるいはインスタンスベースプログラミングとも呼ばれます）。

+ +

プロトタイプベース言語として先駆けの（そしてもっとも正統な）代表例は、David Ungar 氏と Randall Smith 氏によって開発された {{interwiki("wikipedia", "Self")}} です。とはいえ、クラスレスのプログラミングスタイルは最近ますます人気が高まり、JavaScript、Cecil、NewtonScript、Io、MOO、REBOL、Kevo、Squeak （ソフトウェア Morphic のコンポーネント操作の際の Viewer フレームワークとして使われています）などのプログラミング言語に採用されました。

+ +

JavaScript のオブジェクト指向プログラミング

+ +

ネームスペース

+ +

ネームスペース（名前空間）とは、開発者が一意なアプリケーション固有の名前を付けて、機能をまとめることができる一種の容器です。JavaScript では、ネームスペースはメソッド、プロパティ、オブジェクトを包含する別のオブジェクトとなります。

+ +

{{note('JavaScript では通常のオブジェクトとネームスペースとの間に、言語レベルの違いがない点に留意することが重要です。これは他の多くのオブジェクト指向言語とは異なっており、新たな JavaScript プログラマを混乱させることがあります。')}}

+ +

JavaScript でネームスペースを作成する考え方はシンプルです。グローバルオブジェクトをひとつ作成して、すべての変数、メソッド、関数をそのオブジェクトのプロパティとすればよいのです。ネームスペースを使用すると、アプリケーション内で名前が衝突する可能性が低下します。これは各アプリケーションのオブジェクトが、アプリケーションで定義したグローバルオブジェクトのプロパティとなるからです。

+ +

MYAPP という名前のグローバルオブジェクトを作成しましょう :

+ +
// グローバルネームスペース
+var MYAPP = MYAPP || {};
+ +

上記のサンプルコードでは、始めに MYAPP が（同じファイルまたは別のファイルで）すでに定義されているかを確認します。定義されている場合は、既存の MYAPP グローバルオブジェクトを使用します。定義されていない場合はメソッド、関数、変数、オブジェクトをカプセル化する、MYAPP という名前の空のオブジェクトを作成します。

+ +

サブネームスペースも作成できます（グローバルオブジェクトを最初に定義する必要があることに注意）:

+ +
// サブネームスペース
+MYAPP.event = {};
+ +

ネームスペースを作成して変数、関数、メソッドを追加する構文は以下のようになります :

+ +
// 共通のメソッドやプロパティ向けに MYAPP.commonMethod という名前のコンテナを作成
+MYAPP.commonMethod = {
+  regExForName: "", // 名前を検証するための正規表現を定義
+  regExForPhone: "", // 電話番号を検証するための正規表現を定義
+  validateName: function(name){
+    // 名前に対してなんらかの処理を行う。"this.regExForName" を使用して
+    // 変数 regExForName にアクセス可能
+  },
+
+  validatePhoneNo: function(phoneNo){
+    // 電話番号に対してなんらかの処理を行う
+  }
+}
+
+// オブジェクトとともにメソッドを定義する
+MYAPP.event = {
+    addListener: function(el, type, fn) {
+    // 処理
+    },
+    removeListener: function(el, type, fn) {
+    // 処理
+    },
+    getEvent: function(e) {
+    // 処理
+    }
+
+    // 他のメソッドやプロパティを追加できる
+}
+
+// addListener メソッドを使用する構文:
+MYAPP.event.addListener("yourel", "type", callback);
+ +

標準ビルトインオブジェクト

+ +

JavaScript は、例えば Math、Object、Array、String といったコアに組み込まれたオブジェクトがあります。以下の例では、乱数を取得するために Math オブジェクトの random() メソッドを使用する方法を示したものです。

+ +
console.log(Math.random());
+
+ +
註: この例、および以降の例では、{{domxref("console.log()")}} という名前の関数がグローバルで定義されていると仮定しています。実際は、console.log() 関数は JavaScript そのものの一部ではありませんが、多くのブラウザがデバッグ用に実装しています。
+ +

JavaScript におけるコアオブジェクトの一覧については、JavaScript リファレンスの標準ビルトインオブジェクトをご覧ください。

+ +

JavaScript ではすべてのオブジェクトが Object オブジェクトのインスタンスであり、それゆえに Object の全プロパティおよび全メソッドを継承します。

+ +

カスタムオブジェクト

+ +

クラス

+ +

JavaScript はプロトタイプベースの言語であり、C++ や Java でみられる class 文がありません。これは時に、class 文を持つ言語に慣れているプログラマを混乱させます。その代わりに、JavaScript ではクラスのコンストラクタとして関数を使用します。クラスの定義は、関数の定義と同じほど簡単です。以下の例では、空のコンストラクタを使って Person という名前の新たなクラスを定義しています。

+ +
var Person = function () {};
+
+ +

オブジェクト（クラスのインスタンス）

+ +

obj オブジェクトの新たなインスタンスを生成するには new obj 文を使用し、その結果（obj 型を持つ）を、後からアクセスするための変数に代入します。

+ +

前出の例で、Person という名前のクラスを定義しました。以下の例では、2 つのインスタンス（person1 と person2）を生成しています。

+ +
var person1 = new Person();
+var person2 = new Person();
+
+ +
註: 初期化されていないインスタンスを生成する、新たに追加されたインスタンス化方法については、 {{jsxref("Object.create()")}} をご覧ください。
+ +

コンストラクタ

+ +

コンストラクタは、インスタンス化の際（オブジェクトのインスタンスが生成されたとき）に呼び出されます。コンストラクタは、クラスのメソッドです。JavaScript では、関数がオブジェクトのコンストラクタとして働きます。したがって、コンストラクタメソッドを明示的に定義する必要はありません。クラス内で定義されたすべてのアクションが、インスタンス化の際に実行されます。

+ +

コンストラクタはオブジェクトのプロパティの設定や、オブジェクトの使用準備を行うメソッドの呼び出しを行うために使用されます。クラスのメソッドの追加やメソッドの定義は別の構文を使用して行うことについては、後ほど説明します。

+ +

以下の例では Person をインスタンス化する際に、コンストラクタがメッセージをログに出力します。

+ +
var Person = function () {
+  console.log('instance created');
+};
+
+var person1 = new Person();
+var person2 = new Person();
+
+ +

プロパティ（オブジェクトの属性）

+ +

プロパティは、クラス内にある変数です。オブジェクトのインスタンスはすべて、それらのプロパティを持ちます。プロパティがそれぞれのインスタンスで作成されるように、プロパティはコンストラクタ（関数）内で設定されます。

+ +

カレントオブジェクトを示す this キーワードを使用して、クラス内でプロパティを扱うことができます。クラス外からプロパティにアクセス（読み取りや書き込み）するには、InstanceName.Property という構文を使用します。これは C++、Java、その他の言語と同じ構文です（クラスの内部では、プロパティの値の取得や設定に this.Property 構文を使用します)。

+ +

以下の例では、Person クラスをインスタンス化する際に firstName プロパティを定義しています:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+  console.log('Person instantiated');
+};
+
+var person1 = new Person('Alice');
+var person2 = new Person('Bob');
+
+// オブジェクトの firstName プロパティを表示する
+console.log('person1 is ' + person1.firstName); // "person1 is Alice" と出力
+console.log('person2 is ' + person2.firstName); // "person2 is Bob" と出力
+
+ +

メソッド

+ +

メソッドは関数です（また、関数と同じように定義されます）が、他はプロパティと同じ考え方に従います。メソッドの呼び出しはプロパティへのアクセスと似ていますが、メソッド名の終わりに () を付加して、引数を伴うことがあります。メソッドを定義するには、クラスの prototype プロパティの名前付きプロパティに、関数を代入します。関数を代入した名前を使用して、オブジェクトのメソッドを呼び出すことができます。

+ +

以下の例では、Person クラスで sayHello() メソッドを定義および使用しています。

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+
+// Person の sayHello メソッドを呼び出す
+person1.sayHello(); // "Hello, I'm Alice" と出力
+person2.sayHello(); // "Hello, I'm Bob" と出力
+
+ +

JavaScript のメソッドはオブジェクトにプロパティとして割り付けられた通常の関数であり、「状況に関係なく」呼び出せます。以下のサンプルコードについて考えてみましょう:

+ +
var Person = function (firstName) {
+  this.firstName = firstName;
+};
+
+Person.prototype.sayHello = function() {
+  console.log("Hello, I'm " + this.firstName);
+};
+
+var person1 = new Person("Alice");
+var person2 = new Person("Bob");
+var helloFunction = person1.sayHello;
+
+// "Hello, I'm Alice" と出力
+person1.sayHello();
+
+// "Hello, I'm Bob" と出力
+person2.sayHello();
+
+// "Hello, I'm undefined" と出力
+// (strict モードでは TypeError で失敗する)
+helloFunction();
+
+// true と出力
+console.log(helloFunction === person1.sayHello);
+
+// true と出力
+console.log(helloFunction === Person.prototype.sayHello);
+
+// "Hello, I'm Alice" と出力
+helloFunction.call(person1);
+ +

この例で示すように、sayHello 関数を参照しているもの（person1、Person.prototype、helloFunction 変数など）すべてが、同一の関数を示しています。関数を呼び出しているときの this の値は、関数の呼び出し方に依存します。もっとも一般的な、オブジェクトのプロパティから関数にアクセスする形式 (person1.sayHello()) で this を呼び出すときは、その関数を持つオブジェクト (person1) を this に設定します。これが、person1.sayHello() で名前として "Alice"、person2.sayHello() で名前として "Bob" が使用される理由です。一方、他の方法で呼び出す場合は this に設定されるものが変わります。変数 (helloFunction()) から this を呼び出すと、グローバルオブジェクト（ブラウザでは window）を this に設定します。このオブジェクトは（おそらく）firstName プロパティを持っていないため、"Hello, I'm undefined" になります（これは loose モードの場合です。strict モードでは異なる結果（エラー）になりますが、ここでは混乱を避けるために詳細は割愛します）。あるいは、例の最後で示したように Function#call （または Function#apply）を使用して、this を明示的に設定できます。

+ +
註: this について、詳しくは {{jsxref("Global_Objects/Function/call","Function#call")}} および {{jsxref("Global_Objects/Function/apply","Function#apply")}} をご覧ください。
+ +

継承

+ +

継承は、1 つ以上のクラスを特化したバージョンとしてクラスを作成する方法です（JavaScript は単一継承のみサポートしています）。特化したクラスは一般的に子と呼ばれ、またそれ以外のクラスは一般的に親と呼ばれます。JavaScript では親クラスのインスタンスを子クラスに代入して、特化させることにより継承を行います。現代のブラウザでは、継承の実装に {{jsxref("Global_Objects/Object/create","Object.create","#Classical_inheritance_with_Object.create()")}} を使用することもできます。

+ +
+

註: JavaScript は子クラスの prototype.constructor（{{jsxref("Global_Objects/Object/prototype","Object.prototype")}} をご覧ください）を検出しないため、手動で明示しなければなりません。Stackoverflow に投稿された質問 "Why is it necessary to set the prototype constructor?" をご覧ください。

+
+ +

以下の例では、Person の子クラスとして Student クラスを定義しています。そして、sayHello() メソッドの再定義と sayGoodBye() メソッドの追加を行っています。

+ +
// Person コンストラクタを定義する
+var Person = function(firstName) {
+  this.firstName = firstName;
+};
+
+// Person.prototype にメソッドを 2 つ追加する
+Person.prototype.walk = function(){
+  console.log("I am walking!");
+};
+
+Person.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName);
+};
+
+// Student コンストラクタを定義する
+function Student(firstName, subject) {
+  // 親のコンストラクタを呼び出す。呼び出しの際に "this" が
+  // 適切に設定されるようにする (Function#call を使用)
+  Person.call(this, firstName);
+
+  // Student 固有のプロパティを初期化する
+  this.subject = subject;
+};
+
+// Person.prototype を継承する、Student.prototype オブジェクトを作成する
+// 註: ここでよくある間違いが、Student.prototype を生成するために
+// "new Person()" を使用することです。これは様々な理由で間違っていますが、
+// まずこれでは Person の "firstName" 引数に渡すものがありません。
+// Person を呼び出す正しい場所はこれより前の、
+// Student から呼び出します。
+Student.prototype = Object.create(Person.prototype); // 以下の注釈を参照
+
+// "constructor" プロパティが Student を指すように設定する
+Student.prototype.constructor = Student;
+
+// "sayHello" メソッドを置き換える
+Student.prototype.sayHello = function(){
+  console.log("Hello, I'm " + this.firstName + ". I'm studying "
+              + this.subject + ".");
+};
+
+// "sayGoodBye" メソッドを追加する
+Student.prototype.sayGoodBye = function(){
+  console.log("Goodbye!");
+};
+
+// 使用例:
+var student1 = new Student("Janet", "Applied Physics");
+student1.sayHello();   // "Hello, I'm Janet. I'm studying Applied Physics."
+student1.walk();       // "I am walking!"
+student1.sayGoodBye(); // "Goodbye!"
+
+// instanceof が正常に機能するかをチェック
+console.log(student1 instanceof Person);  // true
+console.log(student1 instanceof Student); // true
+
+ +

Student.prototype = Object.create(Person.prototype); という行について :
+ {{jsxref("Global_Objects/Object/create","Object.create")}} が存在しない古い JavaScript エンジンでは、「{{原語併記("ポリフィル","polyfill")}}」 （"shim" とも呼ばれます。リンク先の記事をご覧ください）または同様の結果になる以下のような関数を使用できます。:

+ +
function createObject(proto) {
+    function ctor() { }
+    ctor.prototype = proto;
+    return new ctor();
+}
+
+// 使用法:
+Student.prototype = createObject(Person.prototype);
+
+ +
註: Object.create や古いエンジン向けの shim が何を行っているかについては、{{jsxref("Global_Objects/Object/create","Object.create")}} をご覧ください。
+ +

オブジェクトをインスタンス化する方法を問わずに、this の参照先を適切に指定するのは時に難しいものです。ですが、これを容易にするシンプルなイディオムがあります。

+ +
var Person = function(firstName) {
+  if (this instanceof Person) {
+    this.firstName = firstName;
+  } else {
+    return new Person(firstName);
+  }
+}
+
+ +

カプセル化

+ +

前の例では、Person クラスによる walk() メソッドの実装状況を Student が知らなくても、そのメソッドを使用できました。Student クラスは変更の必要がない限り、そのメソッドを明示的に定義する必要はありません。すべてのクラスのデータとメソッドがひとつのユニットに収められていることから、これをカプセル化と呼びます。

+ +

情報を隠蔽することは、他の言語でも private または protected なメソッドやプロパティという形で一般的な機能です。JavaScript でも同様のことをシミュレートできますが、オブジェクト指向プログラミングに必須というわけではありません。2

+ +

抽象化

+ +

抽象化は、取り組んでいる問題の箇所を継承（特殊化）や合成によってモデル化することを可能にする仕組みです。JavaScript では継承によって特殊化を、クラスのインスタンスを別のオブジェクトの属性値にすることで合成を実現しています。

+ +

JavaScript の Function クラスは Object クラスから継承しています（これはモデルを特殊化している一例です）。また、Function.prototype プロパティは Object のインスタンスです (これは合成の一例です)。

+ +
var foo = function () {};
+
+// "foo is a Function: true" と出力
+console.log('foo is a Function: ' + (foo instanceof Function));
+
+// "foo.prototype is an Object: true" と出力
+console.log('foo.prototype is an Object: ' + (foo.prototype instanceof Object));
+ +

ポリモーフィズム

+ +

すべてのメソッドやプロパティが prototype プロパティの内部で実装されているのと同じように、異なるクラスで同じ名前のメソッドを定義できます。メソッドは 2 つのクラスに親子関係（すなわち、あるクラスが別のクラスから継承されている）がない限り、自身が定義されたクラスに収められます。

+ +

注記

+ +

これらは JavaScript でオブジェクト指向プログラミングを実装する唯一の方法ではありません。この点で JavaScript はとても融通がききます。同様に、ここで示した技術は言語ハックをまったくしていませんし、他言語のオブジェクト理論における実装を模倣してもいません。

+ +

このほかにも、JavaScript によるより高度なオブジェクト指向プログラミングのテクニックがありますが、この入門記事で扱う範囲を超えます。

+ +

参考情報

+ +
    +
  1. Wikipedia: "Object-oriented programming" (日本語版)
    2. +
  2. Wikipedia: "Encapsulation (object-oriented programming)" (日本語版)
    3. +
diff --git a/files/ja/conflicting/mdn/contribute/index.html b/files/ja/conflicting/mdn/contribute/index.html new file mode 100644 index 0000000000..96d5ef691e --- /dev/null +++ b/files/ja/conflicting/mdn/contribute/index.html @@ -0,0 +1,97 @@ +--- +title: MDN へ貢献するには +slug: MDN_at_ten/Contributing_to_MDN +translation_of: MDN_at_ten/Contributing_to_MDN +--- +
+
+

MDNへ貢献するには

+ +

MDN への貢献は、誤字・脱字の修正や、最新の情報への更新、間違いの修正など、簡単なことから始められます。現在見ているページを修正する場合にはページ上部に表示されている青い「編集」ボタンをクリックしてください。また、存在しないページを新規作成する場合は、 ここにあるいずれかの方法で新しくページを作成してください。あなたが作成したページはコミュニティ内のレビュワーや編集者が、作成したドキュメントがスタイルガイドに適合しているかどうかチェックしてくれます。なので、ページのデザインや装飾など最初から完璧な物を作る必要はありません。みんなで助け合いながら良いものにしていきましょう！

+ +

具体的には？

+ +

具体的にどのようなことをしたらよいのかは、How-to ガイドをご覧ください。

+
+ +
+
+
+

参加しよう！

+ +

Web開発を助けるオープンなドキュメントを一緒に作っていきましょう！

+ +

詳しくはこちら

+
+
+
+
+ +
+
+

主な貢献者のプロフィール

+ +

MDNはMDNを支える貢献者による大きなコミュニティです。我々は貢献者のすべてのプロフィールを提供することはできませんが、その一部(英語)を下で紹介します。

+ +
+
+

Chris Blizzard
+ Former Director of Evangelism, Mozilla

+ +

Blizzard oversaw and drove Mozilla Developer Center's transition from focusing on Mozilla-specific material to a community-maintained resource useful to a variety of Web developers.

+ +

Nickolay Ponomarev
+ Volunteer

+ +

Nickolay was one of the earliest contributors, helping with the initial DevEdge clean-up effort. He has continued contributing in many areas, both for Web standards and Mozilla products, ever since.

+ +

Andrew Overholt
+ Engineering Manager

+ +

Andrew leads developers on the Web API team. As part of his job, he encourages all DOM and API developers to help make sure documentation is great by providing information the writing team needs, reviewing documentation, and assisting with sample code. This example makes the MDN team very, very happy.

+ +

Jérémie Patonnier
+ Project Manager

+ +

Jérémie began contributing to MDN in 2011 by documenting SVG properties, because he needed this information for his own work. Jérémie has become a leader in the MDN French community, hosting regular "Mercredi Docs" (Wednesday Docs) sessions in the Mozilla Paris office. Currently, he is leading efforts to create the Learning area and to improve and regularize browser compatibility data across MDN.

+ +

Julien (Sphinx)
+ Volunteer

+ +

Julien contributed the "lion's share" of effort to translate the entire JavaScript section of MDN into French. Many other contributors also helped in this effort, but Julien spent many nights and weekends over several months, translating JavaScript articles.

+
+ +
+

Jeff Walden
+ Software Engineer, JavaScript Engine

+ +

Jeff Walden is now on the SpiderMonkey team, who has contributed to MDN since its beginning, and across many topic areas, including XPCOM, Mozilla build and test, JavaScript, CSS, and more.

+ +

Priyanka Nag
+ Volunteer

+ +

Priyanka Nag joined MDN in 2012, but she became active with the MDN community only after the Mozilla Summit in 2013, where she met and worked with Luke Crouch and David Walsh from the MDN development team; this acted as her main inspiration to start contributing to MDN. Priyanka mainly enjoys evangelizing MDN, hosting MDN events and introducing more people to MDN, along with making some edits on the wiki at times. She is currently working as a Technical writer at Red Hat and she proudly claims that her interest in technical writing started through her MDN contributions, which ended up influencing her career decision in a great way.

+ +

Saurabh Nair
+ Volunteer

+ +

Saurabh has been contributing to MDN since 2011, and became more active in the last year. He is on the “spam watch” team, who look out for spam pages, deleting them and banning the spammers as soon as they appear. Since he lives in India, he can do this while MDN staff members in Europe and North America are sleeping.

+ +

Sebastian Zartner
+ Volunteer

+ +

Sebastian's first contributions to MDN were in 2007, to German translations, but he soon started working on English ones. He has has contributed a lot to both the content and structure of the CSS reference, including creating a JSON API for CSS pages, and a macro for CSS syntax.

+
+
+
+ +
+
+
Mozilla docs for JavaScript are made from a mixture of gold and rainbows. Lots of rainbows. They're that magical.
+— Nathan Dimitriades
+ +
+
I love MDN because I can't even remember the structure of APIs I designed.
+— Jake Archibald
+
+
diff --git a/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html b/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html new file mode 100644 index 0000000000..18e7425832 --- /dev/null +++ b/files/ja/conflicting/mdn/contribute_b4eeb7c50b999a53684260de17d44d1b/index.html @@ -0,0 +1,31 @@ +--- +title: FAQ +slug: MDN/Contribute/FAQ +tags: + - MDN +translation_of: MDN/Contribute +translation_of_original: MDN/Contribute/FAQ +--- +
{{MDNSidebar}}

Mozilla Developer Networkとは何か ?

+ +

Mozilla Developer Network (MDN)は(以前のMozilla Developer Center) 、web標準とMozillaプロジェクトの開発用文書化のための、Mozillaを支援するコミュニティwebサイトです。

+ +

新しく編集者として参加する方法は ?

+ +

MDNを編集する事の良い点を全て知るのは時間がかかりますが、今すぐに書き始める事ができます。コミュニティは新人に新しい事を学ぶように約束します。参加するには次の簡単な手順に従って下さい。

+ +
    +
  1. MDNのアカウントを作成します。
    2. +
  2. dev-mdc のメーリングリストを購読します (必須ではありませんが強く推奨されます)。
    3. +
  3. 記事を編集する事で、最初の貢献を始めます。 (新しい記事も作成できますが、まずメーリングリストで協議してその記事が必要かを確認して下さい。)
    4. +
  4. レビューを待ち、それから学習します。
    5. +
  5. 実習して定期的に貢献します。
    6. +
+ +

MDNを書くことのメリットは ?

+ +

コミュニティと一緒に作業する体験が得られて、筆記のコミュニケーションスキルが上達するでしょう。あなたの履歴書に何行か追加するのにも役立つでしょう。

+ +

次にする事は ?

+ +

単にMDNに参加するの記事にある手順に従って下さい。

diff --git a/files/ja/conflicting/mdn/yari/index.html b/files/ja/conflicting/mdn/yari/index.html new file mode 100644 index 0000000000..9e7fc695c3 --- /dev/null +++ b/files/ja/conflicting/mdn/yari/index.html @@ -0,0 +1,53 @@ +--- +title: Kuma プロジェクトに貢献する +slug: MDN/Kuma/コントリビュート +tags: + - Kuma + - MDN +translation_of: MDN/Kuma +translation_of_original: MDN/Kuma/Contributing +--- +
{{MDNSidebar}}
+ +

Kuma プロジェクトに貢献して我々の優れた Wiki プラットフォームの構築を助け、Mozilla Developer Network サイトを改善したいのであれば、以下のドキュメントがプロジェクトに参加して活動する助けになるでしょう。

+ +
+
+

Kuma への貢献

+ +
+
Kuma をはじめる
+
Kuma を GitHub からフォークして開発環境を構築する方法。
+
望んでいる手助け
+
我々は Kuma のバグをたくさん報告しています。この記事のリストは我々が心から助けに貢献してほしいと思うものです。
+
+ +

ツールとタスク

+ +
+
バグ
+
Kuma のバグのリストです。気兼ねなく見渡してあなたが修正できるものを見つけてください。このリンクは Bugzilla へのログインが必要です。
+
バグを報告する
+
Kuma の問題に遭遇したときや改善するためのアイデアを思いついたときは、バグ報告してください。
+
変更ログ
+
最近反映された変更のリストです。これは最近何がおこっているかを見つけるのに最高の場所です。
+
+ + +
+ +
+

MDN 開発者コミュニティ

+ +

開発者と話をしたい場合や、Kuma プラットフォームのビルドや改善を助けたい場合は、開発者コミュニティに参加してください。

+ +
    +
  • Join the conversation on IRC: #mdndev
    • +
  • Read the MDN developer forum: {{DiscussionList("dev-mdn", "mozilla.dev.mdn")}}
    • +
+ +

Don't forget about the netiquette...

+
+
+ +

すべて見る...

diff --git a/files/ja/conflicting/mozilla/add-ons/index.html b/files/ja/conflicting/mozilla/add-ons/index.html new file mode 100644 index 0000000000..03b01cfbdd --- /dev/null +++ b/files/ja/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,248 @@ +--- +title: Building an Extension +slug: Building_an_Extension +tags: + - Add-ons + - Extensions +--- +

 

+

序章

+

このチュートリアルでは、基本的な拡張機能を作る手順を段階を追って説明していきます。まずはFirefoxのステータスバーパネルに「Hello, World!」を表示してみましょう。

+
+

注意 このチュートリアルは、Firefox 1.5 の拡張機能の作成方法です。それ以前のバージョンの作成方法については、別のチュートリアルを参照してください。

+
+

開発環境を準備する

+

拡張機能は、ZIPファイルの形式で固めて配布するか、さもなくば 拡張子がxpiのファイル（実体はZIP形式です）をバンドルします。XPIファイルの構造は下記のとおりです。

+
extension.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+
+

自作のソースをzipに固めるのにMakefileやシェルスクリプトを書きたくないのであれば、上記と同じようにファイルを配置してみるのが一番簡単です。たとえ準備ができているとしても、一度このように広げて確認してみると、Firefox 1.5 のアドオンの仕組みがずっと簡単になります。

+

それでは始めましょう。まずハードディスク上に、拡張機能用のフォルダ（例：「C:\extensions\myExtension\」や「~/extensions/myExtension/」等）を作って下さい。このフォルダの中に「chrome」という名前のフォルダを作成します。この「chrome」の中に「content」というフォルダを作成します。（UNIX系のシステムであれば、拡張機能のrootディレクトリから「mkdir -p chrome/content」と叩くだけで2つのディレクトリが作成できます。）

+

次に、あなたの拡張機能用フォルダ（root とします）に、chrome フォルダと並んで 2つの新規ファイルを作成します。1つは「chrome.manifest」で、もう1つは「install.rdf」です。

+

開発環境の準備に関するもっと多くの助言が、Mozillazine Knowledge Base にもありますので、そちらも参考にしてください。

+

インストールマニフェストを作る

+

拡張機能の root フォルダに作った install.rdf を開いて、下記のように書いて下さい。

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@foo.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.5.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>Sample!</em:name>
+    <em:description>A test extension</em:description>
+    <em:creator>Your Name Here</em:creator>
+    <em:homepageURL>http://www.foo.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

Install Manifests には必須のプロパティもオプションのプロパティも全て網羅されています。

+

ファイルを保存します。

+

XUL でブラウザを拡張する

+

Firefox のユーザインタフェースは XUL と JavaScript で書かれます。XUL はボタン、メニュー、ツールバー、ツリーといったユーザインタフェースの部品を提供するための XML の文法です。ユーザーの行動は JavaScript を使って関数のように結び付いています。

+

ブラウザを拡張するために、我々は部品を加えるか修正することでブラウザのユーザーインタフェースの一部を修正します。我々は新しい XUL DOM 要素をブラウザウインドウに挿入することによって部品を追加し、スクリプトにイベントハンドラを付加することによって修正します。

+

ブラウザは browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar に含まれる content/browser/browser.xul)と呼ばれる XUL ファイルに実装されています。browser.xul では、ステータスバーについてこんな風に定義されているのを見つける事ができます。

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<statusbar id="status-bar"> は、XUL オーバーレイ方式のための「マージポイント」です。

+
XUL オーバレイ方式
+

XUL オーバレイ方式とは、動的に他の UI 部品を XUL ドキュメントに紐付ける方法です。XUL オーバーレイ方式は、拡張子「.xul」のファイルに XUL のかたまりを記述しておくと、「マスター」ドキュメントにあるマージポイントで紐付けて追加してくれます。これらのかたまりで部品を追加したり削除したり変更したりが可能になるのです。

+

XUL オーバレイ方式の例

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"/>
+ </statusbar>
+</overlay>
+
+

status-bar という名前の <statusbar> で、ブラウザウィンドウの中のくっつけたい「マージポイント」を指定しています。

+

<statusbarpanel> はその子要素で、マージポイントに追加したい部品です。

+

上記のサンプルコードを sample.xul という名前のファイルに書いて、先ほど作った chrome/content に保存して下さい。

+

オーバーレイを使っての部品の追加やユーザーインターフェースの修正に関する詳細は、下記を参照して下さい。

+

Chrome URIの書式

+

XUL ファイルは、 "Chrome パッケージ" と呼ばれる ユーザーインターフェースコンポーネントのかたまりの一部です。これらは「file://」といったURIではなく、「chrome://」といった URI で呼び出されます（これはプラットフォームの依存度を下げるためです）。XUL ファイルの URI を インストールされたアプリケーションに引き継ぐために、Mozillaの開発者がこの解決策を考えつきました。

+

ブラウザのウィンドウは chrome://browser/content/browser.xul です。試しにこの URL を Firefox のロケーションバーに打ち込んでみてください！

+

Chrome URI はいくつかの要素から成り立っています。

+ +

つまり、chrome://foo/skin/bar.png だと、foo テーマの skin セクションの bar.png というファイルを呼び出すのです。

+

あなたが Chrome URI を使って内容をロードするとき、 Firefox はこれらのURIを実際のディスク上のソースファイル(もしくはJARパッケージ)に変換するのに、Chromeレジストリを使用します。

+

Chrome Manifestの作成

+

Chrome Manifest に関するさらに詳細な情報と、それがサポートするプロパティについては、Chrome Manifest を参照して下さい。

+

先ほど root フォルダに chrome というディレクトリと並べて作成した chrome.manifest を開いて下さい。

+

下記の一文を追加します。

+
content     sample    chrome/content/
+
+

(最後のスラッシュ "/" を忘れない事！ さもないと、拡張機能はロードされません。)

+

注意: Firefox/Thunderbird 2 とそれ以前のバージョンでは混合/大文字をサポートしていないので、必ず小文字のパッケージ名 ("sample") を使ってください。 - {{ Bug(132183) }}

+

ここで指定しているのは、

+
    +
  1. chrome パッケージの物の種類
    2. +
  2. chrome パッケージの名前
    3. +
  3. chrome パッケージファイルの場所
    4. +
+

つまりこの行は、「chrome パッケージ名が sample」で「content ファイルが chrome/content (chrome.manifestの相対パス) にある」という事を表しているのです。

+

「content」「locale」「skin」に相当するファイルは、それぞれchrome のサブディレクトリである「content」「locale」「skin」のディレクトリ下に配置しなくてはならない事を注意してください。

+

ファイルを保存して下さい。あなたが拡張機能を入れて Firefox を起動した時に(このチュートリアルの後で)、chrome パッケージが登録されます。

+

オーバーレイの登録

+

Firefoxでオーバーレイを表示する時はいつでも、そのオーバーレイをブラウザウィンドウにマージする必要があります。ですから、 chrome.manifest ファイルに次の一文を追加して下さい。

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+

これはFirefox に、「 browser.xul をロードする時に sample.xul を browser.xul にマージする」という意味です。

+

テスト

+

最初に、我々はあなたの拡張機能の存在を Firefox に伝えなくてはなりません。昔、Firefox 1.0 の頃にはこれは、あなたの拡張機能を XPI としてパッケージ化して、ユーザインタフェースを通じてそれをインストールする事を意味していました。これが実に辛い。でも、今はもっとずっと簡単です。

+
    +
  1. あなたの環境の プロファイルフォルダを開いてください。
    2. +
  2. そこにある extensions という名前のフォルダを開いて下さい。(なければ作成して下さい。)
    3. +
  3. 新しいテキストファイルを作成して、その中にあなたの機能拡張フォルダのパス（例：「C:\extensions\myExtension\」とか「~/extensions/myExtension」とか。）を書いて、そのファイルをあなたの拡張機能のIDと同じ名前（例：「sample@foo.net」）で保存して下さい。
    4. +
+

これで拡張機能のテストの準備ができました！

+

Firefoxを起動します。Firefox はあなたの拡張機能のディレクトリへのテキストリンクを検出して、そして拡張機能をインストールしてくれます。ブラウザウインドウが表示されると、ステータスバーパネルの右側でテキスト「Hello, World!」と表示されているのが見えるでしょう。

+

戻って「.xul」ファイルを修正した場合も、ファイルを閉じて Firefox を再起動すれば、その結果が反映されます。

+

These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER

+

パッケージ化

+

あなたの拡張機能が動作する今、あなたは配備とインストールのためにそれをパッケージすることができます。

+

あなたの拡張機能のフォルダのコンテンツ（rootフォルダ自体を圧縮するのではなく、中身だけ）をZipで圧縮し、そのZipファイルの拡張子を「.xpi」に変更します。Windows XP ではもっと簡単で、root フォルダの下の全てのファイル・ディレクトリを選択して右クリックして、「送る」->「圧縮(zip形式)フォルダ」を選択します。これで拡張子「.zip」のファイルができます。あとはファイル名を変更すればおしまい！

+

次に「.xpi」ファイルをあなたのサーバーにアップロードして、MIMEタイプが「application/x-xpinstall」になっている事を確認して下さい。これであなたはリンクを張って、みんながダウンロードしてFirefoxにインストールする事を可能にできます。

+
addons.mozilla.org の利用
+

Mozilla Update は、あなたが無料であなたの拡張機能を配布する事ができるサイトです。あなたの拡張機能は、非常に人気が高くなっても安定的にダウンロードできるように、Mozillaのミラーサーバー上にも格納されます。Mozillaのサイトはまた、ユーザーにより容易なインストレーションを提供し、さらにあなたが新バージョンをアップロードした時には、既存のユーザーにその新バージョンを自動で提供します。さらに Mozilla Update では、ユーザーのコメントをあなたにフィードバックさせる事も可能です。あなたがあなたの拡張機能を Mozilla Update で配布する事は、強く推奨されているのです！

+

http://addons.mozilla.org/developers/|http://addons.mozilla.org/developersを訪ねて、アカウントを作って機能拡張を配布してみて下さい。

+

注意: あなたの拡張機能は、もし丁寧な説明文と動作のスクリーンショットがあれば、より早く知られて、もっとダウンロードされるでしょう。

+
拡張機能のWindowsレジストリへの登録
+

Windows では、拡張機能の情報をレジストリに登録する事ができます。これによって拡張機能は次回自動的に呼び出されてアプリケーションが起動されます。これはアプリケーションインストーラに拡張機能として容易にインテグレーションフックを加えることを許すものです。詳細はWindowsレジストリへの拡張機能の登録を参照の事。

+

XUL オーバーレイ方式の追加情報

+

UI部品をマージポイントに追加するだけでなく、XUL のかたまりをオーバーレイの中で使う事もできます。

+ +
+
+
+
+ （例：「<statusbar id="status-bar" hidden="true"/>」(ステータスバーを隠す)）
+
+
+
+ +
+
+
+
+ （例：「<statusbar id="status-bar" removeelement="true"/>」）
+
+
+
+ +
<statusbarpanel position="1" .../>
+
+<statusbarpanel insertbefore="other-id" .../>
+
+<statusbarpanel insertafter="other-id" .../>
+
+

新しいユーザーインターフェースコンポーネントの作成

+

自分で作ったウィンドウとダイアログボックスを「.xul」ファイルを分けて作ったり、UI部品を操作するためのDOMメソッドを「.js」ファイルに実装する事で、機能として提供できます。また、「.css」ファイルにスタイルを定義しておけば、色の設定など、見た目を触る事もできます。

+

XUL開発のためのもっと詳しい情報は、XULの文章を参照して下さい。

+

Defaults ファイル

+

Defaults ファイルは、拡張機能の root フォルダの下の defaults/ というフォルダにあって、ユーザーのプロファイルを後押しするのに使います。デフォルトの情報はdefaults/preferences/ の下の「.js」ファイルに格納されます。ファイルをここに置いておけば Firefoxのプリファレンスシステムが起動時に自動的に読み込んでくれますので、あなたのプログラムはプリファレンスAPIを通じてデフォルトの情報を参照する事が可能です。

+

XPCOM コンポーネント

+

Firefox は拡張機能で XPCOM コンポーネントの利用をサポートしています。ですからあなたは JavaScript や C++ で(Gecko SDKを使って) 簡単にあなたのコンポーネントを作る事ができます。

+

自作の「.js」「.dll」ファイルはcomponents/ ディレクトリに置いて下さい。そうすれば拡張機能をインストールした最初のFirefox起動時に、自動的に登録されます。

+

詳細については How to Build an XPCOM Component in Javascript および Creating XPCOM Components bookを参照してください。

+
アプリケーションコマンドラインの操作
+

カスタム XPCOMコンポーネントの可能な用途のひとつは、Firefox または Thunderbird にコマンドラインハンドラを追加することです。このテクニックを使えば、あなたの拡張機能をアプリケーションとして実行できます:

+
 firefox.exe -myapp
+
+

I should move the useful parts of this to the Command Line page. -Nickolay ファンクションを含んだコンポーネントを追加する事によって、これは実行されます。 function NSGetModule(comMgr, fileSpec) { return myAppHandlerModule; } このファンクションはFirefox 起動を起動するたびに、Firefox から呼び出されます。 #Firefox はmyAppHandlerModuleの「registerSelf()」を呼ぶことによって、 myAppHandlerModule を登録します。 #それから「getClassObject()」によって myAppHandlerModule のハンドラファクトリを入手します。 #ハンドラファクトリはその「createInstance()」を使ってハンドルを作るために使われます。 #最終的にハンドルの「handle(cmdline)」で、コマンドライン(cmdline)の 「handleFlagWithParam()」と「handleFlag()」を処理します。 詳細については、Chrome: Command Lineと forum Discussion を参照して下さい。

+

Localization (地域化)

+

複数言語をサポートするために、あなたは エンティティや文字列のバンドル を使ってコンテンツから文字列を分離するべきです。開発時にやっておけば、後から戻ってきてやるよりもずっと楽ですよ！

+

拡張機能の地域化の情報は、「locale」ディレクトリの中に格納します。例えば、サンプル機能拡張に国依存の情報を追加したい場合、ディレクトリ「chrome」(「content」ディレクトリがあるのと同じ場所です）の中に「locale」ディレクトリを作り、そこにファイル「chrome.manifest」を作成して下記の一文を記述します。

+
locale sample sampleLocale chrome/locale/
+
+

XULで地域化した属性値を与えるためには、その値を「.ent」ファイル（または「.dtd」ファイル）に記述します。これは「locale」ディレクトリに、こんな感じで書いておきます。

+
<!ENTITY  button.label     "Click Me!">
+<!ENTITY  button.accesskey "C">
+
+

そうしたら、今度はあなたが書いた XUL ドキュメントの先頭（但し "<?xml version"1.0"?>" よりは下）に下記のように書きます。

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
+
+

ここで window というのは地域名 であり、XUL文書のルート要素となります。SYSTEM プロパティは、エンティティファイルへの chrome URI です。例えばサンプルの拡張機能で言うと、ルート要素はoverlayです。

+

エンティティを使うために、XUL を下記のように修正して下さい。

+
<button label="&button.label;" accesskey="&button.accesskey;"/>
+
+

Chrome レジストリは確かに指定された地域名に対応するローカリゼーションバンドルからエンティティをロードしている事が確認できましたね。

+

スクリプトの中で文字列を使う時には、「.properties」ファイルを作成して、下記の書式で１つ１行で指定します。

+
key=value
+
+

スクリプト中で値を取得するには、nsIStringBundleService/nsIStringBundleや、<stringbundle> タグを使用します。

+

ブラウザを理解する

+

ブラウザウィンドウや他のXULウィンドウの検査をするのには、DOMインスペクタを使用します。 (これはFirefoxの「標準」インストールには含まれませんので、「カスタムインストール」で再インストールして「開発者ツール」を選択すれば、ブラウザのツールメニューに「DOM Inspector」が表示されます）

+

DOMインスペクタのツールバーの左上の「ノードファインダボタン」を押してから、検査したいウィンドウのオブジェクトをクリックすると、視覚的に選択したものの情報が表示されます。この時、DOMインスペクタのDOMツリービューは、あなたがクリックしたものの所にジャンプルするでしょう。

+

DOMインスペクタの右側のパネルでマージポイントとあなたがオーバーレイから追加した要素を見つけるのにも使います。もしあなたがマージした要素が見つけられないのであれば、マスターのXULウィンドウが呼び出された(loadイベントが発行された)タイミングで、あなたのオーバーレイでスクリプト割り付けて要素を追加する必要があるかもしれません。

+

拡張機能のデバッグ

+

デバッグ用の分析ツール

+ +

printf デバッグ

+ +

さらに上のデバッグ

+ +

クイック・スタート

+

機能する簡単な拡張機能を作るために Extension Wizard オンラインツールを使えます。

+

Extension Wizard を使って作ったのと同じような Hello World 拡張機能 の一行一行の説明が another tutorial from MozillaZine Knowledge Base にあります。

diff --git a/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html b/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html new file mode 100644 index 0000000000..c4163517cb --- /dev/null +++ b/files/ja/conflicting/mozilla/developer_guide/how_to_submit_a_patch/index.html @@ -0,0 +1,55 @@ +--- +title: Hacking Mozilla +slug: Hacking_Mozilla +tags: + - Developing Mozilla +--- +

このページは、Mozilla の CVS リポジトリにプログラムコードをチェックインする方法を知りたい方のために設けられました。もしあなたが、今まで一度も Mozilla をビルドしたことがなければ、ソースコード のページを参照して、ビルドすることから始めた方がよいでしょう。そして Mozilla のハックを始めるためのガイド を調べてみてください。 +

+

パッチのライフサイクル

+

もし、パッチ作成に関心があれば、以下のガイドラインが役に立つでしょう +

+ +

もし、あなたがパッチを持っていたら、それを Bugzilla へのバグ報告に添付してください。私たちはコードレビューに大きな信頼を置いています。なので、CVS リポジトリにコードをチェックインする前に、適切な モジュールオーナー か、その同僚によるレビューを受ける必要があります。モジュールは完全には直接 Bugzilla コンポーネントに対応しません。しかし、強い相関があります。レビューを受けるには： +

+ +

いくつかのケースで、次の数日以内に返答を受け取ることが出来るでしょう。不幸にして、忙しすぎるので彼らのバグ情報すべてに追いつけていない人々もいます。なので、あなたが 1 週間以内に返事を受け取れなくて、あなたがそのパッチに (言うならば、1 年やそこらでなく) すぐに対応する価値があると考えるなら、このようなことが出来ます。 +

+ +

レビューワはあなたが取り組んでほしいあなたのパッチに対してコメントするでしょう。彼らが満足したとき、かれらはパッチをレビュー済みと印付けし、バグ (訳注：Bugzilla) で "r=<user>"と言うでしょう。 +

たいていの場合、"スーパーレビュー"として知られる追加のレベルのレビューが必要です。スーパーレビュー ドキュメントはスーパーレビューを受けるために何をすべきかについて詳しく述べています。また、スーパーレビューはパッチに変更を求めるかもしれません。彼らが満足すると、バグ (Bugzilla) の中でそう言うでしょう。 +

レビューとスーパーレビューを受けて、パッチが十分な水準に達していたら、ツリーにチェックインできます。あなたが CVS アカウントを持っていない場合、代わりにチェックインしてくれる人を探さなければなりません。これは実に簡単です。checkin-needed キーワードをバグに追加するだけです。数少ないコミッターがこのキーワードの検索を設定しており、ちょくちょく調べてはコミットされていないパッチをコミットします。通常はキーワードが追加されてから 1 ～ 2 週間のうちにはコミットされるでしょう。2 週間以上たってもコミットされない場合、IRC に行って誰かにあなたのパッチをコミットするように (そして checkin-needed が付いたバグを調べるように、それらのバグにパッチを提供した人たちも同じように待たされているでしょうから) 言ってみる価値はあるでしょう。 +

時折、ツリーはリリースを試みるために少しより厳重にロックされ、"approval" (承認) と呼ばれる第三段階がチェックインのために必要になります。それらの時期には、Tinderbox は approval が必要であると先頭でうたって注意を促します。approval を依頼するには、パッチ添付ファイルを変更して approval フラグに ? をセットしてください。もし、approval が断られた場合、リリースが行われるか、リリースへ向けての開発がブランチとなるまで、1 週間程度パッチのチェックインを待たなければなりません。 +

これらのプロセスの中で、他に問題を抱えているか、ガイドが必要なら、Gerv にメールすることです。 +

+

CVS Commit Access ルール

+

あなたがパッチでの貢献を頻繁に行って、品質の良いコードについて定評のある業績を残したとき、CVS コミット権限を得る のプロセスを始めることが出来ます。CVS コミット権限は、以下のルールが伴います。 +

もっとも重要なルールは、ビルドのプロセスに関してです。それを無視することは、多くの人々の時間を浪費することになります。図々しい違反者は、ルールに従う事に悩まされるでしょう。抵抗は無駄です。 +

+ +

Happy hacking! +

+
+

原文書の情報

+ +
+
+
+{{ languages( { "en": "en/Hacking_Mozilla" } ) }} diff --git a/files/ja/conflicting/mozilla/developer_guide/index.html b/files/ja/conflicting/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..80eb0d79bc --- /dev/null +++ b/files/ja/conflicting/mozilla/developer_guide/index.html @@ -0,0 +1,143 @@ +--- +title: Mozilla Hacker's Getting Started Guide +slug: Mozilla_Hacker's_Getting_Started_Guide +tags: + - Developing Mozilla +--- +

もし、このドキュメントについて、誤りを見つけたとか、更新に貢献したいとか、セクションを追加したいとか、そういうときには Kai Engert までコンタクトを。

+

Mozilla とは？

+

Mozillaは オープンソースプロジェクトであり、クロスプラットフォームのインターネットクライアントソフトウェアを開発する組織です。ソースコードごとに定められた (MPL、NPL、GPL、LGPLが混在している) ライセンス に従う必要があるとはいえ、Mozilla がオープンソースであるために、ソースコードは誰にでも利用可能です。

+

Mozilla.org は、このプロジェクトの開発者を助けるための基盤を提供する組織の名前です。mozilla.org は Mozilla プロジェクトのための中心となる Web サイトのアドレスでもあります。

+

動機

+

Mozilla は最大規模のオープンソースプロジェクトの一つです。Mozilla は 何百万行のコードで作られています。そのため、この巨大プロジェクトに参加するのは簡単ではありません。このドキュメントの意図は、Mozilla をハックするために何に気を付けなくてはならないかについての概要を示すことにあります。このドキュメントで Mozilla プロジェクトで使われている多くの異なったテクノロジーの間の橋渡しをしようとしています。

+

私が Mozilla の内部に目を向け始めたとき、私はこのようなドキュメントがあればと願いました (^^)

+

対象者

+

このドキュメントは第一に Mozilla のどの部分かで作業できることを望む開発者のために書かれました。参加希望者は、オブジェクト指向プログラミングについて十分な理解が求められます。そして、特に、このプロジェクトで主にプログラム言語で用いられている C言語と C++ についての経験が求められます。

+

しかし、もしあなたが、例えば JavaScript と XUL UI (XUL ユーザインタフェース) だけのように、コードの一部でだけ作業することを望んでいるとしても、この文書は参考になるでしょう。

+

このドキュメントの範囲

+

このドキュメントは以下の疑問に答えようとしています。

+ +

Netscape 社はこのプロジェクトに何をすべきなのか？

+

Mozilla が創造された時、それは Netscape のものでした。ある時期に、会社としての Netscape は、会社が所有していて、他者の著作権に抵触しないソースコードの部分を公開することにしました。

+

Mozilla は完成された製品ではありませんでした。なので、Mozilla プロジェクトはたくさんのコードを新たに書かなくてはなりませんでした。それに加えて、多くの部分を書き直しました。他のコンポーネントのいくつかは維持され、拡張されました。これが、このドキュメントや、Mozilla プロジェクトについて議論するときに Netscape という単語を目にする、耳にする機会があるの理由の一つです。

+

C++ と JavaScript

+

Mozilla では幅広く使われているため、Mozilla のソースコードで JavaScript と C++ が互いにどう関係しているかを説明するのは意味のあることです。C++ はコンパイル型の言語で、JacaScript はインタプリタ型の言語です。JavaScript は Web サイトをインプリメントするのに使われるテクノロジーとして最も共通のものとして知られています。しかし、Mozilla 開発者は、Mozilla ソースコード自身を両方の言語の混合で成り立たせることを選びました。

+

Mozilla ブラウザを起動したとき、C言語 と C++ のコンポーネントがまず開始します。しかし、起動処理の速い時点で XPConnect と呼ばれるテクノロジーが実行時にインタプリタ解釈された JavaScript を使用可能に初期化します。実際、Mozilla ブラウザは、コンパイルされた C++ と、コンパイルされない JavaScriptの両方で構成されています。

+

JavaScript は、OS によって直接に実行できるようにコンパイルすることが出来ないことに注意してください。そのために、われわれは C言語と C++ をプログラムのバックエンドで使用し、JavaScript は Mozilla の内部で動作します。

+

そして、JavaScript を使用した Web ページをネットサーフするとき、その JavaScript はサンドボックス (隔離された安全地帯) の範囲内で動作し、Mozilla の内部オブジェクトにアクセスすることは出来ないことも覚えておいてください。DOM (ドキュメント・オブジェクト・モデル Document Object Model) によって露出したオブジェクトだけが アクセス可能です。

+

このドキュメントで JavaScript に言及がある時はいつでも、Mozilla 内部の機能性に寄与するテクノロジーを意味します。JavaScript は、ユーザインタフェースイベント (ユーザの操作によるブラウザの動作) の処理を行うソースコードの部分に最もよく使われています。以下のドキュメントのほとんどは、アプリケーションの C++ 部分の概観について説明します。

+

NSPR - Netscape ポータブル・ランタイム

+

Mozilla プロジェクトでのソフトウェア開発のために第一に必要なのは、例えば、特定の OS に制限されてはいけないなどのように、クロスプラットフォームであることです。

+

C++ がポータブルな言語を意図している一方、そのポータブル性の概観は、一般的なプログラミングロジックとデータ構造に限られます。もし、特定の OS のためのソフトウェアを書きたいならば、その OS の特有の機能を使う必要があります。しばしば、すべての OS 上で同じ機能を使いたくなりますが、それをするためにはプラットフォーム毎に特有のコードを書かなくてはなりません。

+

NSPR の意図するところは、OS と Mozilla ソースコードの間に、Mozilla ソースコードの他のエリアのコードをシンプルにしやすくするためのレイヤー (層) を提供することです。C言語のライブラリ関数を利用しようとするとき、まずはクロスプラットフォームなインプリメントのものが NSPR により提供されていないかチェックすることが必要です。

+

スレッド

+

Mozilla はマルチスレッドアプリケーションです。Mozilla のコードにトライするまえに、それが何を意味するかを知る必要があります。

+

NSPR はマルチスレッドプログラムのための OS 非依存の機能を提供しています。例えば、すべてのネットワークデータ転送はデータ転送をしている間にも、ユーザインタフェースが応答可能なままとするために、スレッドごとに行われます。

+

C++ コードのために必要なことの一つは、マルチスレッド対応 (スレッドセーフ) であることです。

+

オブジェクト指向プログラミング & モジュール化

+

Mozilla の C++ ソースコードは、OOP (オブジェクト指向プログラミング) のルールに従うことを意図しています。そのルールには、モジュール化コンポーネント設計も含まれており、そこでは、あなたのクラスの public なインターフェースを使用した場合のみ、内部データ (変数) に対するアクセスが許可される、あるいは可能になります。

+

たいていのシンプルな C++ プロジェクトにおいて、これはそれだけの意味です。クラスを適切に public/protected/private を使い分けるのには注意深くデザインするというだけの意味です。しかし、すべてのソースコードはどこでも利用可能な状態のままです。例えば、いつでも、クラスのコンポーネントを private から public へ変更することが出来ます。そうすると、それはプロジェクトの中の他の箇所から利用可能となります。これは、Mozilla には当てはまりません。Mozilla では、よりモジュール化することが望まれます。

+

Mozilla のソースコードは分離されたコンポーネントで組織されています。一つのコンポーネントの中に限れば、前段落に記した単純なプロジェクトのように、すべてが自由ですが、複数のコンポーネント間においては、同じレベルの柔軟性はありません。

+

コンポーネント同士が通信するとき、コンポーネント・オブジェクト・モデル (COM component object model) を使ったうまく定義されたインタフェースだけを使って行います。

+

インタフェース

+

インタフェースのコンセプトは、CORBA テクノロジーで使われているもののようなものです。例えば、CORBA も Mozilla もインタフェースを記述するのに XPIDL (IDL とはインタフェース定義言語を意味します Interface Definition Language) という同様の言語を用いています。

+

CORBA 環境を使用する事は、制限が多く難しいものです。なぜならば、Mozilla では頻繁には用いないようなプロセス間、ネットワーク間通信を伴うためです。正式に流通している CORBA 環境ではインタフェースのコンポーネントを変更するのは同時にしばしば実行しているシステムすべてを入れ替えることが出来ないために困難です。何か変更を加えたいとき、新しいバージョンのインタフェースを定義しなくてはなりません。しかし、前のバージョンのサポートも続けることが求められます。

+

Mozilla は本稿執筆時点において正式に流通しているアプリケーションではないので、現在のところ多くのインタフェースは開発プロセスの必要に応じて変更することが可能です。しかし、Mozilla ブラウザはいくつかの環境に埋め込まれて実行されるので、それらの環境は確定したインタフェースを信頼できなくてはなりません。したがって、インタフェースは凍結されることができます。この状況は、しばしば、インターフェースが定義されている状態で表されます。時間の経過とともに Mozilla が安定化する、または、魔法のパージョン番号 1.0 に近づくにつれ、凍結されていないインタフェースに対する凍結されているものの割合は増えるでしょう。

+

Mozilla ビルドする一つのステップは、インタフェース定義ファイルを自動的に C言語 /C++ ヘッダファイルに翻訳することです。これは Mozilla の持つ IDL コンパイラである xipdl の仕事です。

+

メソッドとメンバデータに加えて、インタフェースは追加の属性を持っています。インタフェースは UUID というインタフェースごとに唯一に識別可能な番号を持っています。インタフェースはスクリプト記述可能な属性を持つことが出来ます。これは、インタフェースに JavaScript のコードからもアクセス可能であるということです。スクリプト記述可能なインタフェースは JavaScript ランタイムの範囲内で有効なパラメータのためのデータタイプを使うためだけに限定されています。

+

XPCOM / nsISupports / nsCOMPtr

+

XPCOM は Mozilla 自身の COM (コンポーネント・オブジェクト・モデル component object model) のインプリメンテーションです。名前の頭につく XP は、それがクロスプラットフォームであることを意味します (この XP がつくということを、特定の OS 製品のためのように見えるので、XP のつくこの名前で混乱しないこと)。実際のところ、クロスプラットフォームであるので、XPCOM は、他の形の COM より、用途は広いです。

+

最終的には、mozilla.org にある紹介ドキュメント XPCOM を読むべきでしょう。ハックを始めるためには、XPCOM は COM のコンセプトを働かすエンジンだということができます。これは、オブジェクト仲介人の役割を演じることも含まれています。

+

一般に、インタフェースはジョブを行うために使われることのできるオブジェクトを記述します。もし、しなければならないジョブがあるなら、インタフェースで提供される インプリメントをリクエストする必要があります。そのインプリメントは他のコンポーネントの範囲内に属することが出来ます。あなたの望む特定のインプリメントに決定するために、テキストベースの識別子である規約 ID を利用しています。規約 ID は、細部まで定義されたインターフェースを使用することで利用しやすくなる、インプリメントの動作上の契約です。XPCOM ランタイムシステムは、どのクラスが規約 ID でインプリメントされているか、どのコンポーネントがそれを提供しているかを知っています。

+

たとえ、あなたのコードが単独のコンポーネント内だけのものであり、COM の使用が必要条件ではないとしても、COM はいずれにせよとてもしばしば使われます。一つの理由は柔軟さにあります。他の理由として、JavaScript を利用してインプリメントされた Mozilla のロジックのある部分と機能を共有することを許すためです。Mozilla は実行時にインタプリタ言語の JavaScript と コンパイル言語の C++ の間でコミュニケーション可能とする XPConnect と呼ばれる技術を提供しています。

+

実行時に COM オブジェクトのインスタンスが必要なときにはいつでも、クラスオブジェクトは作成され、インタフェースのポインタが与えられます。いくつかの理由でこれらのインスタンスが参照をカウントされることが決められました。一つの理由は効率です。そのために、オブジェクトの不要なコピーは省かれるべきです。他の理由は、データオブジェクトはスレッド間で渡されるべきですが、すべてがメモリ上の同じデータオブジェクトに対するポインタを維持するためです。だからです。最後に、同じデータオブジェクトは多数のコンポーネントに参照されたり、多数のリストに貯えられたりすべきだからです。

+

参照の生存期間は異なるため、どのくらいしばしば現在何かに参照されているという状態であるか覚えておくためには、それぞれのオブジェクトが参照のカウントを保持するのが最も簡単な方法です。オブジェクトから参照されたとき (XPCOM エンジンによる直接参照もしくは、関数呼び出しによって)、リファレンスのカウントのケアを確実にする必要があります。オブジェクトへの参照を維持するかどうかや、参照を終えられるかどうかを教え、参照を削除しなくてはなりません。そのように、オブジェクトはそれがまだ必要とされているかどうかを自分自身で判断することが出来ます。オブジェクトがもう不要なら、自分自身でメモリから削除します。

+

この一般的な機能を満たすために、インタフェースをインプリメントする Mozilla のすべてのクラスは参照カウント機能と自動破棄機能を備えた nsISupports という共通基礎クラスを共有しています。このような共通基礎クラスは、どんな COM のインプリメントにも存在します。

+

あなたが割り当てたものは、あなたが掃除 (削除) しなければならない、という一般的なルールがあります。例えば、参照を追加したいとき、もう不要となったときすぐさま参照を解放することを強く促します。そうしなければメモリリークといった問題を引き起こすことになるでしょう。

+

C++ では、nsISupports 基本クラスのメソッドの明白なメソッド呼び出しによって行われます。しかし、それらのメソッド呼び出しは、忘れやすいだけでなく、コードの可読性も低下させます。特に多くの関数やメソッドは複数の出口を持っているからです (例：return 文など)。

+

関数やメソッドの出口毎にすべてのオブジェクトへの参照を解放することを確実にしなければなりません。これを楽にするために、解放の呼び出しを繰り返さなくて良いために、一般的な補助クラスは nsCOMPtr という名前の COM オブジェクトへのポインタを扱うために提供されています。これは XPCOM の特徴の一つで、COM コーディングをより楽にします。これは、特定のオペレータのオーバーライドを通してポインタをシミュレートします。いくつかの例外的ケースがありうるにも関わらず、このような一般的なルールはほとんどすべてのコードで守られています。：ポインタ変数 "interface*" をインタフェースをインプリメントしたオブジェクトとして使うつもりがあるときにはいつでもローカル "nsCOMPtr<interface>" 変数をかわりに使う。このポインタが "スコープ範囲外" となったらすぐに、可能ならデストラクタが自動的に参照カウントを減らします。

+

インタプリタ言語の JavaScript では、これはコード上で簡単に行えます。それは、ガベージコレクションのためです。可能なときに参照を自動的に減少させる魔法があるのです。しかし、この魔法は循環参照しないことを必要とします。例えば、もし、二つのオブジェクトがあり、お互いへの参照を含んでいても、他のオブジェクトがそれらを参照していないとき、それらのオブジェクトは検出されません。それらのオブジェクトはプログラム実行の残りの間メモリに存在しつづけます。

+

例外 / nsresult

+

コード実行が実行時に失敗することもあります。失敗を扱うプログラミングメカニズムが例外 (エクセプション) を用いることです。Mozilla では JavaScript 部分で例外を使っており、C++ 部分では使っていません。以前やったことがスタックの中にあるため、例外はいつでもポータブルというわけではないというのが、そのいくつかの理由のうちの一つです。Mozilla の C++ のコードは戻り値で例外を真似ています。つまり、JavaScript の中では、tyr-catch のブロックを使うことが出来、C++ の中では、インタフェースのメソッドを使う場合はいつでも戻り値を見なくてはなりません。その戻り値は nsresult 型です。このため、IDL ファイルで定義されている論理的な戻り値型は、C++ コードの中の追加のメソッドのパラメータにマッピングされています。

+

nsresult 型は、失敗理由の付加情報も運ぶことを意図しています。成功か失敗かという単純なレポートの代わりに、整数型を使い、多くの異なったエラーコードを定義することを許しています。

+

いくつかの戻り値があります。例えば、NS_OK は、何事もうまくいっていて、そのままプログラムを続けることが出来るという場合に使われ、NS_ERROR_FAILURE は、何か異常が発生しているけれども、今のところそれ以上の詳細は必要ないといった場合に使われます。

+

それに加え、互いのコンポーネントはアプリケーションの他のエリアで使用していない失敗コードを上書きしないエラーコードの定義をするために、独自の範囲の整数をリクエストすることが出来ます。詳細な情報は mozilla/xpcom/base/nsError.h を参照のこと。

+

C++ における文字列

+

多くのアプリケーションやクラスライブラリでは、単なる簡単な string (文字列) クラスを使用することを決めている中で、Mozilla 開発者は、文字列により強力な機能を求めました。実行時の動的な振る舞いを異なったシチュエーションのために最適化することを許すために、いくつかの文字列クラス階層をインプリメントしました。時には文字列のサイズを変更するだけでしょうし、時には、自動的にサイズが大きくなる文字列が必要でしょう。そのため、たとえば、ただの平坦な文字列ではなく、断片化された文字列型も使用可能です。

+

さらなる要求としては、Mozilla は完全な多言語対応をしなくてはならないということです。ユーザにみせる情報を扱う文字列は、そのためにマルチバイトな Unicode 文字列を使っています。

+

文字列型はテンプレートに基づき、可変型のような文字列型を伴い、通常文字列と Unicode 文字列を使うのを同じロジックで扱えるようにしています。

+

多くの文字列クラスを持つというアプローチは多くの柔軟性を意味する一方、欠点としてMozilla の文字列クラスを学ぶのが易しい作業ではなくなる、ということがあります

+

GUI (グラフィカル・ユーザ・インタフェース) / XUL

+

たいていの OS では、GUI を開発するための独自の方法を定義していて、それぞれたいてい異なっています。

+

Mozilla のようなクロスプラットフォームアプリケーションにとっては、アプリケーションのロジックから OS 依存のロジックを隠すテクノロジーをもつということは、重大なことです。

+

今までに、多くの C 言語と C++ のライブラリはクロスプラットフォームに書かれてきました。私の知るところによると、それらは Mozilla には使われていません。またしても、独自のグラフィックシステムを作りました。

+

GUI のレイアウトを定義するとき、二つの可能性のいずれかを共にするかを選ぶことが出来ます。まず、表示させたいそれぞれの UI (ユーザ・インタフェース： user interface) 要素の絶対位置を定義する方法があります。この方法は、実際に多くの GUI ライブラリで選ばれています。しかし、これには欠点があります。エレメントが加わってレイアウトが変わったとき、十分な柔軟性がないことです。それは、すべての要素を新しい位置に計算し直す必要があるからです。それは、どのエレメントが重なっているかなどのフィードバックをいちはやく得るために、よりグラフィカルにしなくてはなりません。しかし、いまだ、UI は異なるメトリクスをもつフォントが使われなくてはならないとき、意図したように見えないかもしれません。このことは、UI が使い物にならないと判断させます。

+

Mozilla の開発者は、より柔軟性のあるものを求めました。Mozilla はクロスプラットフォームなので、フォントにより注意を払う柔軟性を備えることが必要です。

+

Mozilla 開発者は、論理的なもので UI のコンテンツがデザインされたところというアプローチを使うことを選びました。現在は UI エディタを使っていません。UI がどうみえるべきかを指示するファイルを書きました。実行時にレイアウトエンジンはどのフォントが利用可能か決定し、UI 詳細に定義されたすべての要求を考慮し、実際の UI を動的に生成します。これは、Web ブラウザが Web ページをどのように表示するかと似ています。

+

Web は大部分がテキストベースのシステムから多くのプログラムのようなユーザインタフェースをもつとてもグラフィカルで裕福な環境へ移り変わってきました。そのため、Web ブラウザにとって、独自のユーザインタフェースを定義するために Web 言語を使うことはもっとも自然なことです。XUL(extensible user-interface language 拡張ユーザインタフェース言語) と呼ばれる UI 内容の記述のための XML ベースの文法を選びました (XUL についての良いリファレンスとして XULPlanet が利用できます)。

+

XUL ファイルは、どの要素が UI を構成しているか、どこに要素が現れているかを記述します。XUL 言語は制御に反応してどういう働きがあるかをプログラマが定義することを許す属性を定義します。動的なアプリケーションのふるまいを定義するために、ある場合には特定のユーザインタフェースイベントが発生したときに呼ばれる JavaScript 関数を定義することが出来ます。それらの JavaScript 関数の中では、直接アプリケーションのふるまいを記述するか C++ で定義されたロジックを含む COM オブジェクトの利用可能な他のアプリケーションロジックを呼び出すかすることが出来ます。

+

UI の論理的表現に加え、人々は UI のかわいらしい見た目を望んだりもします。UI の詳細な特徴を定義するために、例えば特定の UI 要素を表示するのに使われる画像を定義する CSS を使うこともあります。これは、"テーマ"や"スキン"を参照するアプリケーションのための追加の"ルックス"の定義を柔軟にします。Mozilla には、現在 Mozilla 開発者によって活発にメンテナンスされている「クラシック」と「モダン」という２つの「テーマ」が定義されています。Mozilla のための追加のテーマが存在するということは、それだけのバージョンの Mozilla が存在するということです。UI に毎日起こるすべての変化に同期をとりつづけることは、「テーマ」のデザイナにとって大きな仕事です。

+

ビルドシステムとツリー

+

現在、Mozilla は主に実行時に必要に応じて動的にロードされた多くの共有ライブラリの集まりのように使われています。COM システムによって、ソースコードの複数の場所を変更した場合でも、再コンパイルする必要があるのはアプリケーションの一部だけで良い場合が多い、という開発環境が可能となっています。これは、とても便利な開発環境です。しかし、これは実行の速度低下を意味します。一方、内部コンポーネントの大部分を静的にリンクした Mozilla バイナリを作ることも可能です。アプリケーションのサイズのため、このリンクステップには多くの時間がかかります。ディストリビューション向けのパッケージを準備するときに、この意味が良くわかるでしょう。

+

それぞれのコンポーネントはその独自のディレクトリを Mozilla のルートディレクトリの中に持ちます。それはまた、呼び出したモジュールの範囲内でサブのコンポーネントを持つということです。Mozilla をどのようにビルドするか教えるツリーの全体にわたるメイクファイル (Make File) があります。

+

プラットフォーム依存のコードのほとんどは、ツリーの少しの場所にだけ含まれます。OS と Mozilla の他のコードの間にあるレイヤーはこのコードによってインプリメントされたインタフェースです。ビルドが発生するものの中のプラットフォームを準備するプラットフォーム依存のコードだけがビルドされます。

+

OS からのメッセージはプラットフォーム依存のコードによって集められています。そして、同じ方法でプラットフォームに独立したコードへ送られます。

+

Mozilla プロジェクトに関する部品はプラットフォーム依存のレンダリング技術を使って書かれた OS 独立の部品です。

+

ツリーの範囲内で、public と名づけられたディレクトリはたいていインタフェースのヘッダを含み、src と名づけられたディレクトリはたいていインタフェースのインプリメントやインタフェースのヘッダでないものを含みます。

+

このプログラムのビルドはこのように大きなプロジェクトに慣れない人をひるませるかもしれません。ビルドには、パワフルなワークステーションで 20 分、古い PC なら 2 時間はかかるでしょう。まず、ソースを入手しなくてはなりません。そして、ビルド資料 に含まれるルールを使ってそれをビルドします。ビルドしている間、ヘッダファイルのディレクトリを特に指定する必要がないように、すべてのヘッダファイルは dist/include ディレクトリに移動するでしょう。(集合としては chrome と呼ばれる) XUL 、画像、JavaScript ファイルもすべて chrome ディレクトリ (Mozilla のバイナリを含むディレクトリの子ディレクトリ) にコピーされるでしょう。これらは jar.mn と呼ばれるファイルの中で定義される chrome:// という URL にマッピングされます。Mozilla のリリースバージョンでは、chrome ディレクトリは、.jar ファイルだけが含まれるでしょう。

+

Mozilla をビルドするというのは、プロセスの一部に過ぎません。もし、開発したければ、CVS と呼ばれるプログラムを使ったツリーのメンテナンスをしなくてはなりません。ビルドに失敗した時には、あなたのツリーの中のファイルとレポジトリの中のファイルとの結合が失敗した際に生じた競合を解消しなくてはなりません。また、ツリーをハックするとき、修正したツリーの部分をビルドしなくてはなりません。時折、depending と呼ばれるプロセスを使ってツリー全体を再ビルドしなくてはならないでしょう。ソースファイル間の依存を決定しなくてはならないからです。また、時折、ツリーを再ビルドするでしょう。たいていは、これをしている間、ツリーへの自身の行った変更をメンテナンスしていて、他人の変更と同期をとろうとしているでしょう。

+

アプリケーションの開始

+

Mozilla の COM システムは、タイプライブラリと、実行可能なコンポーネントの内部レジストリと、インタフェースに頼っています。アプリケーションを開始している間、レジストリが今も最新のものかのチェックが行われます。もし、変更されたライブラリを検知したとき、レジストリは更新されます。それぞれのコンポーネントはそのレジストレーションフェーズの間に初期化を行うことが許されます。もし、変更されたライブラリを検知したとき、それらはロードされ、初期化ロジックが実行されます。変更ライブラリに加え、それらのアプリケーションコンポーネントだけが必要とされたようにロードされます。

+

内部通知システム

+

このセクションでは Mozilla 内部で利用可能な機構について記述します。めったにこれは必要になりません。しかし、特定のイベントに対処する必要のある時には、このシステムを知ることが助けとなるでしょう。OOP (オブジェクト指向プログラミング) の考え方は、各々が各々自身の役割を果たすことというものです。しかし、それはしばしば他のコンポーネントがコンポーネント B で起きたあるアクションの引き金を引くとき、コンポーネント A がそれに対応しなくてはなりません。しかし、コードは部分で分離されているほうが好ましいため、B はそれを起こすのに何が必要かの詳細を知るべきではないのです。ここで必要なのは、次のような事です。もし、他のコンポーネントが B のアクションに反応する必要があるのであれば、B はそのアクションに対する引き金が引かれたら通知を送信するように拡張されるべきです。それに加え、B は誰が通知されるのを待っているか覚えているリストを実行時に動的に保持します。実行時に、A が初期化されたとき、A は B に通知リストの対象に加えてほしいと告知します。

+

これをより一般化するため、中央観察サービス (central observer service) を使うことを決めました。コンポーネント B がアクションの引き金を引いたとき、観察サービスにすぐに通知し、記述的にイベントの名前を明確にします。A のようなコンポーネントは観察サービスに観察したいイベントの名前をもらえるよう申請します。その原則を使用し、観察サービスだけがイベントを見るコンポーネントのリストを扱わなくてはなりません。観察サービスはイベントの通知を受けると、その通知を、そのイベントへのすべてのコンポーネントリストに引き渡します。詳細は nsIObserver を参照のこと。

+

ローカライゼーション

+

Mozilla は人間の言語からコードを分離するデザインがされています。ユーザに見せる必要があるためにテキスト文字列が必要なときはいつでも JavaScript や C++ ファイルの中に直接文字列を保存することは許されません。かわりに、C++ や JavaScript のコードで使われるテキストのために記述的識別子を定義します。その識別子をキーとして使い、実際のテキストを取り出すための文字列集合インタフェースのメンバーを呼び出します。テキスト自身はテキストだけ格納された分離されたファイルに格納されます。Mozilla はモジュールの集合であるため、多くのファイルがあり、分離されたモジュールにそれぞれ所属します。その分離にともなって、翻訳者がテキストファイルの言語別バージョンを作るのが簡単なのです。

+

UI を定義するとき、2 種類の文字列があります。ある文字列は、入力フィールドのテキストやヘルプの中にだけ出てくるテキストのようにアプリケーションがコンパイルされ、パッケージ化されたその時に知られるもので、またある文字列は、実行時に動的に組み立てられます。

+

実行時にアクセスされる必要のないテキストを定義するときはいつでも、DTD ファイルの中に定義してください。XUL ファイルの中でそのテキストを直接参照することが出来ます。

+

実行時にテキストを伴った動作が必要なとき、例えばテキストが実行時に入力される必要のあるユーザ名のための代替文字列を含むとき、properties ファイルにテキストを定義してください。

+

コーディングとレビューのルール

+

Mozilla ダウンロード、コードの変更、独自の変更を含むバージョンでの作業などがフリーで行えます。

+

しかし、Mozilla で使われているオープンソースの背後にある一つの考え方に次のようなものがあります。ソースをフリーで入手できるかわりに、ソースに変更を加えたら、コミュニティに何がしかの還元を考えるべきです。そうすることにより、貢献者となるのです。

+

しかし、Mozilla コミュニティは公開の中央 Mozilla コードに組み込まれるという変更をただ受け入れることは出来ないと決定しました。自分のコードをその中の一部にしたければ、次のようなルールに従わなければなりません。それは法律のようなものではありません。しかし、基本的に、あなたは、あなたの変更が良いものであると他の人々が認めるよう説得しなければなりません。

+

この考え方は、Mozilla のコードをより正しい状態にするために作られた多くの効果があります。Mozilla のコードはどのソフトウェアの一部と同様に、完璧からはほど遠く、人々は保守性を低下させるものは何でも取り除こうとし、正しいと思われるコードだけを受け入れます。

+

これを達成するために、Mozilla コミュニティはすべてのコードは他のすでによく知られた Mozilla ハッカーたちに受け入れられる必要があると決めました。ここに２つの段階のレビューがあります。まず、コード変更希望者は、変更したいコードの部分の所有者から最初のレビュー (r=) を受ける必要があります。要求された修正を行うことが期待されます。そうでなければここで終わりです。もし、最初のレビューが終われば、たいていの場合スーパーレビュー (sr=) と呼ばれるレビューを受ける必要があります。限られたメンバーである " Mozilla 導師 " という、どのコードがよく、どこを変更するべきかについての判断が優れていると認められている人々がいます。一度、両方のレビューを受ければ、ほとんどの場合、コードはチェックインされます。ある特定の事例では、他のレベルのレビューがあり、それは別の場所に記述されます。

+

多くの人々が Mozilla を変えています。みんなが Mozilla をよりよくしようとする一方、どの変更も思いがけない面への影響というリスクがあります。これは、変更の結果、アプリケーションの機能が動かなくなるといったものから、Mozilla ソースコードがコンパイルできなくなるといった単純な問題にまで及びます。後者は、"ツリーが壊れている、燃え上がっている、赤い"と表現され、ここでツリーとは CVS リポジトリの事です。

+

ある OS とコンパイラの組み合わせの上でだけ開発をしていて、移植性について (Mozilla.org のドキュメント参照のこと) 注意を払っていないとき、ツリーは簡単に壊れてしまいます。ツリーを壊さないためにベストを尽くす必要があり、レビューを受けることで、願わくば、変更点をチェックインするより早く潜在的な問題を発見したいのです。

+

ツリーが壊れてしまったとき、Mozilla コミュニティは、ツリーが壊れている間ほかのチェックインを許さないというルールを決定します。これは、この問題を修正する人を助けます。ほかの変更を許すことは、新しいチェックインがあたらしい問題を含んでいるかもしれないために、問題のほんとうの原因を見つけることを難しくします。

+

マイルストーン

+

数週間ごとに、Mozilla.org はソースレポジトリの新しいスナップショットを出します。この考え方は、世界の人々が現在のスナップショットを試してみて、彼らの見つけた問題 (バグ) を報告すべきだというものです。しかし、Mozilla.org はそれらのマイルストーンはテスト目的だけのために出されたということを強調したいのです。

+

より安定したマイルストーンを準備するために、ソースコードレポジトリを変更するためのルールは、新しいマイルストーンを準備する前にはより厳格なものになります。Mozilla.org は、スケジュールを引き、マイルストーン目標日の前の２日間、Mozilla.org の"ドライバ"と呼ばれる人たちに認可されたチェックインだけが許されます。ドライバは、Mozilla レポジトリに関して、最高の権限をもっている人の集団です。ドライバはまた、マイルストーンが準備できているのか、よりマイルストーンを安定させるためにマイルストーンを出すためより多くの修正を許すために日程を遅らせるかどうかも決定します。

+

Bugzilla

+

Bugzilla は Mozilla.org の Web ベースのバグ追跡システムです。問題に遭遇したときはいつでも、ユーザは新しいバグ (時には問題に切符を切ることとして知られてもいます) を、よく詳細に何が起こったかとともに申し立てるよう依頼されます。バグが公表されるなり、番号を発給するなりします。この番号は問題について話されるときに使われます。開発者は"バグ"について署名し、コメントします。そして、修正方法を知っていればどのように問題の修正方法を提案するかを見せるために、パッチを添付するでしょう。レビューも、このシステムの内部で進みます。

+

バグという単語はしばしばソフトウェアのエラーという意味にみなされます。しかし、Bugzilla の内部では、バグは追跡されるべきものとなります。これはソフトウェアのエラーから、機能拡張のリクエストに及びます。例えば、このドキュメントの発展は {{ Bug(123230) }} で追跡されています。

+

もし、C++ の開発者でないなら、Bugzilla で貢献できます。これは、簡単なバグ報告ツールとして出発し、ほかのプロジェクト (例えば Redhat のような) まで多くのユーザに使われる機能的な複雑なシステムにすっかり変わりました。

+

Webtools / LXR / Bonsai

+

Webtools は情報を貯えるツールをベースとしたサーバで、その情報を表示されることやときに操作することまで許します。そのシステムには Mozilla のように Web ブラウザを使ってアクセスできます。

+

Mozilla 開発者は開発を容易にするためにいくつかのツールを作りました。すでにお話した Bugzilla もそうです。

+

LXR は Mozilla のソースコードのためのハイパーテキスト検索エンジンです。識別子やテキストを調べることが出来、Mozilla の中のどこでそれが使われているかを見られるでしょう。検索結果項目をクリックすることで、直接現在のソースコードが得られます。コードはページに表示され、識別子にはハイパーリンクがはられ、それはクリックすると、その識別子についての LXR 検索結果を得られます。LXR はソースコードを表示し、それを通してすぐにナビゲートするのに使うことが出来ます。これは、Linux プロジェクトの glimpse のエンジンに内部修正を加えたものをベースにしています。

+

Tinderbox はソースコードレポジトリの現在の状況を表示するツールです。Mozilla.org は、多くの異なった OS のために、繰り返し、絶え間なく中央レポジトリから新しいソースコードを手に入れ (チェックアウトし)、コンパイルを試みるマシンをホストしています。コンパイルが終わったとき、プログラムがまだ正しく動作するかをチェックするためのいくつかの自動テストが実行されます。コンパイルとテストの結果は中央の Tinderbox システムにレポートされます。Tinderbox ページにアクセスすると、ソースコードレポジトリが現在いい状態にあるかどうかこの数時間の間にどんな変化があったのかを見ることが出来ます。Tinderbox は縦軸が時間を示し、横軸が OS ごとの状態を示すグラフを表示します。それぞれのコンパイル・テストフェーズはビルドの要求された時間で定義されたバーで表されます。

+

バーは色付けられています。緑は Good を示します。黄色はコンパイル中であることを示します。オレンジはコンパイルとビルドが終わったけれども自動テストに失敗したことを示します。赤はソースコードのコンパイルが成功していないことを示します。もしツリーが赤になると、開発を停滞させます。

+

Tinderbox はとても有用なツールで、ソースコードレポジトリに変更を加える人は誰でも、例えば、自分の変更がなにか問題を起こしていないかのような"ツリーを見る" ことを期待できます。

+

より援助とするため、追加の情報が Tinderbox ページで利用できます。チェックインしたときに、その人の名前がページに現れます。行われた変更の一覧へのリンクがあります。もし、コンパイルかテストが失敗したとき、ボックスはコンパイル失敗理由を示すコンパイラからのアウトプットへのリンクも含みます。ページのいつかのテキストはパフォーマンス測定の結果も示します。

+

ほかの Web ツールとして、Bonsai があります。Bonsai はソースコードレポジトリのすべての変更を追跡します。誰かの行ったすべての変更の一覧を取り出すことが出来ます。Bonsai は変更一覧の問い合わせのための強力なインタフェースも提供します。

+

更なる情報を探す

+

一般的なプログラミング技術について述べられたものについてもっと知りたければ、Web でフリーのドキュメントを捜し求めることを勧めます。うまくいけば、そのドキュメントでの言及が導いてくれるでしょう。もし、本を読むことをより好むなら、一般的な説明を著者が試みている本であって、いくつかの特定の OS に集中していない本を選ぶことを勧めます。

+

Mozilla に関するたいていのドキュメントは www.mozilla.org の Web サイトに掲載されています。もし、探しているものがなければ、サーチエンジンを使うことを試してみてください。いくつかのポピュラーなサーチエンジンは、特定の Web サイトに限定して検索することのできる上級 (詳細) 検索オプションを提供しています。

+
+

原文書の情報

+ +
+
+  
diff --git a/files/ja/conflicting/mozilla/firefox/releases/index.html b/files/ja/conflicting/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..8067ad603e --- /dev/null +++ b/files/ja/conflicting/mozilla/firefox/releases/index.html @@ -0,0 +1,416 @@ +--- +title: リリースノート +slug: Tools/Release_notes +translation_of: Mozilla/Firefox/Releases +translation_of_original: Tools/Release_notes +--- +
{{ToolsSidebar}}

Firefox 52

+ + + +

Firefox 51 から Firefox 52 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 51

+ + + +

Firefox 50 から Firefox 51 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 50

+ + + +

Firefox 49 から Firefox 50 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 49

+ + + +

Firefox 48 から Firefox 49 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 48

+ +

ハイライト:

+ + + +

Firefox 47 から Firefox 48 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 47

+ +

ハイライト:

+ + + +

Firefox 46 から Firefox 47 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 46

+ +

ハイライト:

+ + + +

Firefox 45 から Firefox 46 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 45

+ +

ハイライト:

+ + + +

Firefox 44 から Firefox 45 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 44

+ +

ハイライト:

+ + + +

Firefox 43 から Firefox 44 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 43

+ +

ハイライト:

+ + + +

Firefox 42 から Firefox 43 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 42

+ +

ハイライト:

+ + + +

Firefox 41 から Firefox 42 の間に解決した開発ツール関連のバグ一覧。

+ +

Firefox 41

+ +

ハイライト:

+ + + +

Firefox 40 から Firefox 41 の間に解決した開発ツール関連のバグ一覧。特にパフォーマンスツールに関係する、これらのバグ修正の多くは Firefox 40 に反映されました。

+ +

Firefox 40

+ +

ハイライト:

+ + + +

さらに:

+ + + +

Firefox 39 から Firefox 40 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 39

+ +

ハイライト:

+ + + +

Firefox 38 から Firefox 39 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 38

+ +

ハイライト:

+ + + +

Firefox 37 から Firefox 38 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 37

+ +

ハイライト:

+ + + +

Firefox 36 から Firefox 37 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 36

+ +

ハイライト:

+ + + +

Firefox 35 から Firefox 36 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 35

+ +

ハイライト:

+ + + +

Firefox 34 から Firefox 35 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 34

+ +

ハイライト:

+ + + +

Firefox 33 から Firefox 34 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 33

+ +

ハイライト:

+ + + +

さらに:

+ + + +

Firefox 32 から Firefox 33 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 32

+ +

ハイライト:

+ + + +

さらに:

+ + + +

Firefox 31 から Firefox 32 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 31

+ +

ハイライト:

+ + + +

さらに:

+ + + +

Firefox 30 から Firefox 31 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 30

+ +

ハイライト:

+ + + +

さらに:

+ + + +

Firefox 29 から Firefox 30 の間に解決した開発ツール関連のバグ一覧

+ +

Firefox 29

+ +

Firefox 29 Hacks ブログの記事。ハイライト:

+ + + +

Firefox 28

+ +

Firefox 28 Hacks ブログ記事。ハイライト:

+ + + +

Firefox 27

+ +

Firefox 27 Hacks ブログ記事。ハイライト:

+ + diff --git a/files/ja/conflicting/tools/debugger/how_to/search/index.html b/files/ja/conflicting/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..4f3391c8b1 --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/search/index.html @@ -0,0 +1,69 @@ +--- +title: 検索とフィルタ +slug: Tools/Debugger/How_to/Search_and_filter +translation_of: Tools/Debugger/How_to/Search +translation_of_original: Tools/Debugger/How_to/Search_and_filter +--- +
{{ToolsSidebar}}

ツールバーのスクリプトフィルタを使用して、デバッガ内にある項目を検索できます:

+ +

+ +

接頭辞をつけずに文字列を入力すると、ソースリストペインに一覧表示されているソースから検索します。

+ +

いずれかの特殊文字による検索演算子を接頭辞として付加することで、さまざまな検索機能を提供します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
接頭辞機能
なしソースリストペインに表示しているスクリプトの絞り込みを行います。
!すべてのファイルから文字列を検索します。
@すべてのファイルから、指定した文字列を含む関数定義を検索します。
# +

現在ソースペインで開いているファイルから文字列を検索します。

+ +

検索した後に Enter キーを押下すると、マッチした箇所を巡ります。

+
:現在ソースペインで開いているファイルで、指定した行へ移動します。
*変数ペインに表示している変数の絞り込みを行います。
+ +

これらのオプションは、フィルタ内をクリックしたときにポップアップ表示します。また、ソースペインのコンテキストメニューでもアクセスできます。

+ +

接頭辞を組み合わせて、より強力な問い合わせが可能です。例えば:

+ + + + + + + + + + + + +
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
diff --git a/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..74c0db4345 --- /dev/null +++ b/files/ja/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,47 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +
{{ToolsSidebar}}
+

この機能は、まだ新しいデバッガーでサポートしていません。現時点で必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" を false に設定して、古いデバッガーに戻すことができます。

+ +

古いデバッガーのドキュメントは、デバッガー (Firefox 52 より前) をご覧ください。

+
+ +

変数を調査する

+ +

コードがブレークポイントで停止したときはデバッガーの 変数ペイン で、変数の状態を調査できます:

+ +

+ +

変数はスコープによってグループ化されます: Function スコープには user や greeting といった関数で定義したローカル変数はもちろん、ビルトインの arguments および this 変数も表示します。同様にグローバルスコープでは localStorage や console といったビルトインのグローバル変数だけでなく、greetme といった独自に定義したグローバル変数も表示します。

+ +

それぞれのオブジェクトは三角印をクリックすると、プロパティを表示するように拡張できます。

+ +

変数名にマウスポインターを重ねると、その変数に関する付加情報を提供するツールチップを表示します。これらのプロパティの意味について、詳しくは Object.defineProperty() をご覧ください。

+ +

スクリプトフィルター で "*" 修飾子を使用するか、(デバッガーの設定 で有効にしている場合は) 変数フィルターボックスに入力することで、表示する変数をフィルターできます。

+ +

{{EmbedYouTube("dxCvnixpM_Q")}}

+ +

ソース内に存在する変数が JavaScript エンジンの最適化により削除されている場合は、変数ビューに変数を表示しますが値は (optimized away) となっており、編集ができません。以下のスクリーンショットでは、変数 upvar が最適化で削除されています:

+ +

+ +

変数を変更する

+ +

コードがブレークポイントで停止したときに、デバッガーの 変数ペイン で変数を変更できます。変数の現在の値をクリックすると、そこに入力できるようになります:

+ +

{{EmbedYouTube("FKG-jkvSpq8")}}

+ +

式をウォッチする

+ +

ウォッチ式は、実行が停止するたびに評価される式です。よって、これらの式の結果を調査できます。これらは、コード内で必ずしも調査を行える状態であるとは限らない不変量の調査ができる点が役に立ちます。"ウォッチ式を追加" と表示されているボックスをクリックして、コードをステップ実行したときに出力内容を監視したい JavaScript 式を入力することで、ウォッチ式を追加します。

+ +

そして、コードの実行を開始します。コードのステップ実行を始めるまでウォッチ式は何も行いませんので、ブレークポイントに達するまでは何も起きません。ブレークポイントに達すると、アクティブな式とその値を表示するボックスが現れます:

+ +

{{EmbedYouTube("CwGU-5wKRw0")}}

+ +

コードをステップ実行して、値の変化に応じた式の結果をウォッチできます。値が変わるたびに、ボックスが一時的に黄色に光ります。式の隣にある "x" 印のアイコンをクリックすると、ウォッチ式を削除できます。またもちろん、ウォッチ式は同時に複数設定できます。

diff --git a/files/ja/conflicting/tools/keyboard_shortcuts/index.html b/files/ja/conflicting/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..f546812c77 --- /dev/null +++ b/files/ja/conflicting/tools/keyboard_shortcuts/index.html @@ -0,0 +1,100 @@ +--- +title: ソースエディタの使用 +slug: Tools/Using_the_Source_Editor +translation_of: tools/Keyboard_shortcuts#Source_editor +translation_of_original: Tools/Using_the_Source_Editor +--- +
{{ToolsSidebar}}

ソースエディタは source-editor.jsm によって提供されるエディタコンポーネントで、スクラッチパッド や スタイルエディタ などの開発ツールで共用しています。また、Firefox の拡張機能から使用することもできます。この記事では、テキストを編集するときのエディタ自身の使い方を説明します。

+ +

キーボードコマンド

+ +

以下は、各コマンドの標準的なキーボードショートカットです。これは一部のアドオンで異なる場合があることに注意してください。ただし、Firefox では常にこれらを使用します。

+ +
注意: Mac OS X では、control キーの代わりに Command キーを使用します。
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能キーボード
すべて選択Ctrl-A
コピーCtrl-C
検索Ctrl-F
再検索Ctrl-G
指定行へ移動Ctrl-L
やり直しCtrl-Shift-Z
貼り付けCtrl-V
切り取りCtrl-X
元に戻すCtrl-Z
行のインデントTab
行のインデント解除Shift-Tab
前の行へ移動Alt-↑ (Mac OS X では Ctrl-Option-↑)
後の行へ移動Alt-↓ (Mac OS X では Ctrl-Option-↓)
選択範囲のコメント化とコメント解除Ctrl-/ {{ fx_minversion_inline("14.0") }}
開き括弧へ移動Ctrl-[ {{ fx_minversion_inline("14.0") }}
閉じ括弧へ移動Ctlr-] {{ fx_minversion_inline("14.0") }}
+ +

 

+ +

参考情報

+ + diff --git a/files/ja/conflicting/tools/memory/basic_operations/index.html b/files/ja/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..74fa47f372 --- /dev/null +++ b/files/ja/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,15 @@ +--- +title: ヒープのスナップショットを比較する +slug: Tools/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +--- +
{{ToolsSidebar}}
+

これは Firefox 45 の新機能です。

+
+ +

Firefox 45 より、2 つのヒープのスナップショットの差分を確認できます。これは 2 つのスナップショット間で、メモリのアロケートや空き状態の違いを表示します。

+ +

差分を作成するにはカメラのアイコンの隣にある "+/-" ボタンを押下して、基準とするスナップショットを選択します。そして、比較するスナップショットを選択してください。ツールが 2 つのスナップショットの差分を表示します。単体のスナップショットの場合と同じビューを使用して、差分を分析できます。

+ +

{{EmbedYouTube("rbDHVxCzqhU")}}

diff --git a/files/ja/conflicting/tools/page_inspector/index.html b/files/ja/conflicting/tools/page_inspector/index.html new file mode 100644 index 0000000000..bbfb74ccca --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/index.html @@ -0,0 +1,69 @@ +--- +title: Style panel +slug: Tools/Page_Inspector/Style_panel +translation_of: Tools/Page_Inspector#CSS_pane +translation_of_original: Tools/Page_Inspector/Style_panel +--- +
{{ToolsSidebar}}

ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。

+ +

{{ 英語版章題("The Rules view") }}

+ +

ルールビュー

+ +

style-rules.pngルールビュー (左図) では、スタイルがスタイルシートの編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の style 属性を用いて適用されたスタイルをリスト化します。

+ +

継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。

+ +

また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。

+ +

加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。

+ +

閉じ括弧 ("}") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。

+ +

すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

+ +

例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:

+ +

font-size.png

+ +

フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。

+ +

{{ 英語版章題("New features in Firefox 13") }}

+ +

ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態でスタイルエディタが開きます。

+ +

宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。

+ +

編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:

+ +

style-panel-warning-icon.png

+ +

{{ 英語版章題("The Properties view") }}

+ +

プロパティビュー

+ +

一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。

+ +

style-properties.png既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。

+ +

検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。

+ +

プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。

+ +

{{ 英語版章題("Learning more about properties") }}

+ +

プロパティについて詳しく学ぶ

+ +

showing-info-icon.pngよく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。

+ +

{{ 英語版章題("See also") }}

+ +

参考情報

+ + + +

{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}

diff --git a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..3210682298 --- /dev/null +++ b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,35 @@ +--- +title: HTML panel +slug: Tools/Page_Inspector/HTML_panel +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("10.0") }}

+ +

ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。

+ +
注意: HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。
+ +

HTML のナビゲートを行う

+ +

HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。

+ +

html-panel.png

+ +

HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。

+ +

属性の実験を行う

+ +

ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:

+ +

edit-html-attr.png

+ +

参考情報

+ + + +

{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}

diff --git a/files/ja/conflicting/tools/performance/call_tree/index.html b/files/ja/conflicting/tools/performance/call_tree/index.html new file mode 100644 index 0000000000..858b944015 --- /dev/null +++ b/files/ja/conflicting/tools/performance/call_tree/index.html @@ -0,0 +1,114 @@ +--- +title: プロファイラのチュートリアル +slug: Tools/Performance/Profiler_walkthrough +translation_of: Tools/Performance/Call_Tree +translation_of_original: Tools/Performance/Profiler_walkthrough +--- +
{{ToolsSidebar}}

JavaScript プロファイラは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。

+ +

プロファイルを分析する

+ +

パフォーマンスツールがどのようにプロファイルを提供するかを理解するには、例を見ていくことがもっとも簡単です。以下のコードは 2 から 10,000 までの数値について素数であるかを確認して、その結果を表示します。少しおもしろくするため、素数の確認は setTimeout のコールバックとして実行します:

+ +
function isPrime(i) {
+  for (var c = 2; c <= Math.sqrt(i); ++c) {
+    if (i % c === 0) {
+        console.log(i + " is not prime");
+        return;
+     }
+  }
+  console.log(i + " is prime");
+}
+
+function timedIsPrime(i) {
+  setTimeout(function() {
+    isPrime(i);
+  }, 100);
+}
+
+function testPrimes() {
+  var n = 10000;
+  for (var i = 2; i != n; ++i) {
+    timedIsPrime(i);
+  }
+}
+
+var testPrimesButton = document.getElementById("test-primes");
+testPrimesButton.addEventListener("click", testPrimes, false);
+ +

このコードを Web ページに貼り付けて実行すると、コンソールへ以下のように出力します:

+ +
"2 is prime"
+"3 is prime"
+"4 is not prime"
+"5 is prime"
+"6 is not prime"
+ +

このコードのプロファイルを取得すると、以下のように表示されるでしょう:

+ +

+ +

最初の行は、関数列が常に (ルート) になります。ここでは 2 つのことを示しています: プロファイリングに 1,121.95 ミリ秒かかっており、またその間に 78 個のサンプルを取得しました。(ルート) の下に、サンプルの取得中にプログラムで経由した、さまざまなパスのツリーを表示します。(ルート) の直下に、スタックの底にあるトップレベルの関数が現れます。この例では、トップレベルの関数が 2 つあります:

+ + + +

testPrimes() の行を見ていきましょう:

+ +

+ +

ここでは、78 個のサンプルのうち 29 個を testPrimes() 内で取得したことがわかります。合計コストの列は、サンプル数をパーセント値に置き換えたものです: (29/78) * 100 = 37.17

+ +

ところが時間とコストは、ともに 0 です。これは、そのスタックフレームのコードを実行している間に取得したサンプルがないためです。サンプルはすべて、関数内にネストしているブロックまたは testPrimes() が呼び出した関数の内部で取得したものです。これは次の行でわかります:

+ +

+ +

この行も testPrimes という名称です。これは 19 行目から始まる for ループが作成した、testPrimes() の新たなスタックフレームを指しています。前のフレームのコストが 0 であったことから予想されるとおり、このフレームのサンプル列も 29 です。

+ +

しかし、コストと時間は 0 ではありません。これはいくつかのサンプルが、このフレームを実行しているときに取得されたことを表します。プロファイルではサンプルをいくつ取得したかを明示していませんが、次の timedIsPrime という名前の行で取得したサンプルが 24 個であることから、5 個取得したはずです。これは簡単に確認できます。(5/78) * 100 = 6.41 であり、コストの値と一致します。

+ +

この分岐で残る 24 個のサンプル (全体の 30.76%) は timedIsPrime() で取得されました。つまり、setTimeout() (12 行目) を呼び出している部分です。

+ +

コールツリーの別の分岐は、setTimeout() (13 行目) に渡した無名のコールバック関数から始まっています。ここではサンプルを 1 個取得しており、残り 48 個のサンプル (全体の 61.53%) はコールバックで呼び出す isPrime() で取得されました。

+ +

総括すると、もっとも多くのサンプルを isPrime() で取得しており (全体の 61.53%)、その次が timedIsPrime() (全体の 30.76%)、残りは取るに足らない量です。統計的に言えば、おそらくこれらの関数がほとんどの時間を消費していますので、プログラムを高速化したい場合の有力な最適化候補になります。

+ +

合計時間と時間

+ +

合計時間と時間の列は合計コストとコストから算出していますが、直接反映したものではありません。規則的にサンプルを取得しようとしていますが、そのとおりに取得できない場合もあります。適切な時期にサンプルを取得できなかった場合は、その不規則性を補正しようとします。

+ +

呼び出しツリーを反転

+ +

既定では、プロファイラは一般的なコールスタックと同様に、呼び出しツリーを根から葉の順に表示します。つまりそれぞれのトップレベル関数、トップレベル関数が呼び出す関数、その関数から呼び出される関数、といった順になります:

+ +
testPrimes
+
+  -> timedIsPrime
+
+
+
+(setTimeout callback)
+
+  -> isPrime
+ +

これは論理的かつスタックが積み上げられる時系列に従っており、コールスタックを表現するための慣習的な方法でもあります。一方、時間がかかっている場所が呼び出しツリーの深部にあることがよくあります。前出の例でわかるとおり、全サンプルの 90% は 2 つの主要な分岐の終端で発生しています。

+ +

多くのサンプルを記録したスタックフレームに注目させるため、呼び出しツリーを反転させるオプションがプロファイラにあります。このオプションを選択すると、プロファイラは以下のようになります:

+ + + +

例えば testPrimes の例を、既定の表示でもう一度示します:

+ +

+ +

呼び出しツリーを反転すると以下のようになります:

+ +

+ +

反転した表示では、プログラムで時間がかかっている場所を効果的に目立たせていることがわかるでしょう。

diff --git a/files/ja/conflicting/tools/performance/index.html b/files/ja/conflicting/tools/performance/index.html new file mode 100644 index 0000000000..c05f177c25 --- /dev/null +++ b/files/ja/conflicting/tools/performance/index.html @@ -0,0 +1,145 @@ +--- +title: JavaScript プロファイラ +slug: Tools/Profiler +tags: + - Debugging + - Firefox + - Guide + - Profiler + - Profiling + - Tools +translation_of: Tools/Performance +translation_of_original: Tools/Profiler +--- +
{{ToolsSidebar}}

プロファイラツールを使用して、JavaScript コードのボトルネックを見つけましょう。プロファイラは周期的に、サンプルについて現在の JavaScript コールスタックやコンパイルの統計情報を抽出します。

+ +

"Web 開発" メニューから "プロファイラ" を選択することで、プロファイラを起動できます。"Web 開発" メニューは、Linux や OS X では "ツール" メニューの配下に、Windows では "Firefox" メニューの直下にあります。

+ +

ツールボックスが開いて、プロファイラが選択されます。

+ +

サンプリング型プロファイラ

+ +

JavaScript プロファイラは、サンプリング型のプロファイラです。これは JavaScript エンジンの状態を定期的にサンプリングして、その時点のコード実行のスタックを記録します。統計的に、個々の関数を実行しているときに取得したサンプル数はブラウザが実行にかけた時間に対応しますので、コード内のボトルネックを発見できます。
+
+ 例えば、以下のようなプログラムについて考えてみましょう:

+ +
function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                   // -> サンプル A
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;
+}
+
+function logTheValue(x) {
+ console.log(x);               // -> サンプル B、サンプル C
+}
+
+doSomething();
+ +

プロファイラをアクティブにしてこのプログラムを実行したら、実行時にプロファイラは上記のインラインコメントで示したように 3 つのサンプルを取得します。

+ +

これらはすべて doSomething() の内部から取得されますが、2 番目の 2 つは doSomething() から呼び出された logTheValue() 関数の内部です。よってプロファイルは、以下のように 3 つのスタックトレースで構成されます:

+ +
サンプル A: doSomething()
+サンプル B: doSomething() > logTheValue()
+サンプル C: doSomething() > logTheValue()
+ +

これは私たちに何も伝えられない不十分なデータであることが明らかですが、より多くのサンプルにより、logTheValue() がコード内のボトルネックであると断定できるかもしれません。

+ +

プロファイルの作成

+ +

プロファイラでストップウォッチのボタンをクリックして、サンプルの記録を始めます。プロファイラが記録を行っている間は、ストップウォッチのボタンがハイライトされます。ボタンを再度押すと記録を停止して、新たなプロファイルを保存します:

+ +

+ +

"終了" をクリックすると、新しいプロファイルが自動的に開きます:

+ +

+ +

このペインは 2 つのパーツに分かれています:

+ + + +

プロファイルの分析

+ +

プロファイルは 2 つのパーツに分かれています:

+ + + +

プロファイルのタイムライン

+ +

プロファイルのタイムラインは、プロファイル表示の上部を占めています:

+ +

横軸は時間、縦軸はサンプルにおけるコールスタックのサイズを表します。コールスタックは、サンプルを取得したときにアクティブであった関数の量を表します。

+ +

チャートで赤色のサンプルは、そのときにブラウザが応答していなかったことを示しており、ユーザはアニメーションや応答性が止まったことに気づいたかもしれません。プロファイルに赤色のサンプルがある場合は、そのコードをいくつかのイベントに分解することを検討したり、requestAnimationFrame や Worker の使用について調べたりしましょう。

+ +

タイムラインでクリックアンドドラッグすることで、プロファイル内の特定の範囲を調査できます:

+ +

+ +

タイムラインの上に "サンプリング範囲 [AAA, BBB]" というラベルがついた、新たなボタンが現れます。そのボタンを押すとプロファイルがズームされて、そのタイムスライスの詳細なビューが下部に表示されます:

+ +


+

+ +

プロファイルの詳細

+ +

プロファイルの詳細は、プロファイル表示の下部を占めています:

+ +

始めに新しいサンプルを開くと、サンプルペインには上のスクリーンショットのように "(total)" という名前の行があります。"(total)" の隣にある三角印をクリックすると、サンプル内にあるすべてのトップレベル関数がリストアップされます。

+ +

+ +

実行時間は当該関数が現れたサンプルの総数を示し1、その後ろにプロファイル内で当該関数が現れた全サンプルのパーセント値があります。最上段の行はプロファイル全体で 2021 のサンプルがあることを表し、また 2 行目は 1914 サンプルすなわち全体の 94.7% が、detectImage() 関数内にいたことを表します。

+ +

滞在 は当該関数そのものを実行する間に取得したサンプル数を示しており、関数を呼び出しているときではありません。前出のシンプルな例では、doSomething() は実行時間が 3 (サンプル A、B、C) ですが、滞在の値は 1 (サンプル A) になるでしょう。

+ +

3 列目は関数名およびファイル名と行数 (ローカルの関数) またはベースネームとドメイン名を表示します。灰色の関数はブラウザ組み込みの関数です。黒色の関数がページで読み込んだ JavaScript を表します。行にマウスポインタを乗せると、関数の識別名の右側に矢印が現れます: 矢印をクリックすると関数のソースを表示します。

+ +

コールツリーの展開

+ +

ある行で、この関数から呼び出された関数に滞在している間のサンプルが存在する場合 (すなわち、実行時間がその行の滞在より大きい場合) は、関数名の左側に三角印が表示され、コールツリーを展開できます。

+ +

前出のシンプルな例では、完全に展開したコールツリーは以下のようになります:

+ + + + + + + + + + + + + + + + + + + +
実行時間滞在 
3            100%1doSomething()
2              67%2logTheValue()
+ +

より実際的な例を見ましょう: 前出のスクリーンショットで、上から 2 行目を見ると detectImage() 関数の内部で 1914 サンプルかかっていることがわかります。しかし、そのすべては detectImage() から呼び出された関数でかかっています (滞在 セルが 0 です)。コールツリーを展開して、ほとんどのサンプルがかかっていたとき実際に実行していた関数は何かを明らかにできます:

+ +

+ +

これは、detectAtScale() を実際に実行しているときに 6 サンプル、getRect() の実行に 12 サンプルかかっていたことなどを表します。

+ +

脚注

+ +
    +
  1. 関数がさまざまなソースから複数回呼び出される場合、プロファイラの出力にも複数回現れます。よって、forEach など汎用的な関数はコールツリー内に複数回現れるでしょう。
    2. +
diff --git a/files/ja/conflicting/tools/responsive_design_mode/index.html b/files/ja/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..90596180ce --- /dev/null +++ b/files/ja/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,71 @@ +--- +title: レスポンシブデザインモード (Firefox 52 より前) +slug: Tools/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

このページでは、Firefox 52 より前のバージョンのレスポンシブデザインモードについて説明します。Firefox 52 以降については、レスポンシブデザインモード をご覧ください。

+
+ +

レスポンシブデザイン は、携帯電話やタブレットのようなさまざまなデバイスに適した体裁を提供するため、さまざまなスクリーンサイズに適応します。レスポンシブデザインモードは、ウェブサイトやウェブアプリがさまざまなスクリーンサイズでどのように見えるかの確認を容易にします。

+ +

以下のスクリーンショットは Wikipedia のモバイル版を、コンテンツエリアのサイズが 320x480 の状態で表示した例です。

+ +

+ +

レスポンシブデザインモードは、コンテンツエリアのサイズをすばやくかつ正確に変更できるので便利です。

+ +

もちろん、ブラウザーのウィンドウサイズを変えることもできるでしょう。しかしブラウザーのウィンドウを小さくするとほかのタブもすべて小さくなってしまい、ブラウザーのインターフェイスが使用しづらくなります。

+ +

レスポンシブデザインモードを有効にした状態で、コンテンツエリアがリサイズされたまま通常どおりにブラウジングを続けることができます。

+ +

有効化と無効化

+ +

レスポンシブデザインモードの有効化方法は 3 つあります:

+ + + +

また、レスポンシブデザインモードを無効化する方法も 3 つあります:

+ + + +

リサイズ

+ +

コンテンツエリアのサイズを変更する方法は 2 つあります:

+ + + +

クリックアンドドラッグでリサイズする場合、Control キー (Mac OS X では Cmd キー) を押しながら操作するとリサイズ時の移動速度が遅くなります。これにより、精密なサイズ設定が容易になります。

+ +

レスポンシブデザインモードの操作

+ +

+ +

レスポンシブデザインモードでページを表示しているときは、ウィンドウの上部に 5 個のコントロールがあります:

+ +
+
終了
+
レスポンシブデザインモードを終了して、通常のブラウジングに戻ります。
+
サイズ選択
+
いくつかの幅と高さのプリセット、または独自に定義したサイズから選択します。
+
高さと幅を入れ替え
+
スクリーンの向きのポートレートとランドスケープを切り替えます。
+
タッチイベントをシミュレート
+
touch イベントのシミュレーションを有効化/無効化します。touch イベントのシミュレーションを有効化すると、mouse イベントを touch イベント に変換します。
+
スクリーンショット
+
コンテンツエリアのスクリーンショットを取得します。スクリーンショットは、Firefox の既定のダウンロード先に保存します。
+
Custom User Agent を設定
+
Firefox 47 の新機能。ユーザーエージェント文字列を入力して、入力ボックスからフォーカスを外します。入力ボックスを青色でハイライト表示して、入力した UA 文字列を使用していることを示します。Firefox はカレントタブから実行するリクエストに限り、指定した UA 文字列を含めます。これは、UA スニッフィング によってブラウザーごとに異なるコンテンツを提供するサイトで役に立ちます。文字列を選択および削除すると、通常の UA 文字列に戻ります。
+
diff --git a/files/ja/conflicting/web/accessibility/aria/index.html b/files/ja/conflicting/web/accessibility/aria/index.html new file mode 100644 index 0000000000..df17bbcfbb --- /dev/null +++ b/files/ja/conflicting/web/accessibility/aria/index.html @@ -0,0 +1,1063 @@ +--- +title: Accessible Rich Internet Applications +slug: ARIA/Accessible_Rich_Internet_Applications +tags: + - AJAX + - Accessibility + - DHTML + - DOM +translation_of: Web/Accessibility/ARIA +translation_of_original: ARIA/Accessible_Rich_Internet_Applications +--- +

 

+

Accessibility Rich Internet Applications(ARIA) の Firefox による実装は、ツリービューやメニューバー、表計算などのデスクトップスタイルのウィジェットを、キーボードとスクリーンリーダや拡大鏡、代替入力機器などの支援技術から利用可能にします。また、ページ上で一部を AJAX スタイルのライブアップデートを行う際のアクセシビリティの解決策を提供します。

+

ARIA は、以前は DHTML アクセシビリティとして知られており、W3C - World Wide Web Consortium にて開発中の標準です。すべての文書は Protocols and Formats Working Group 公式ページ で利用可能です。ここには、ARIA ロードマップ および ARIA roles 仕様, states モジュール が含まれます。

+

Firefox における ARIA のためのソースコードは IBM によって寄贈されています。

+

また、ARIA のよくある質問とその答え(FAQ) もご覧ください。

+


+ ARIA の例は Firefox の実装で説明することができます。コミュニティが W3C の Protocols and Formats グループがいくつかの標準化プロセスを経て ARIA 実装へと移行するのを待つ間、今日のウェブサイトはすでに Firefox の ARIA サポートを利用して書かれています。バグ修正と小さな改良は続いており、Firefox における ARIA サポートは進化し続けています。 {{ 英語版章題("Keyboard navigation") }}

+

キーボードによる操作

+

キーボードナビゲーションは二通りの方法でサポートされています:

+
    +
  1. HTML の tabindex 属性を通して、どの HTML 要素へもタブで移動可能にし、また少なくとも、スクリプトやマウスを通してフォーカスすることができます。タブで移動可能な要素と単にフォーカス可能な要素を区別することによって、コンテナ内の子要素を矢印キーを使って移動できる、ツリービューや表計算のようなコンテナウィジェットを開発することができます。現在、これは Internet Explorer や Firefox, Opera で動作します。Safari では動作しません。キーボードから操作可能な DHTML ウィジェットの tabindex コードの書き方は、Practical documentation on building key navigable custom widgets を参照してください。
    2. +
  2. aria-activedescendant 属性を通して。これを利用すると、とても簡単です。(例えば、list や tree, grid などの) コンテナウィジェット 上に tabindex="0" を置くだけで、ウィジェットがタブの移動順に追加されます。そして、aria-activedescendant="{{ mediawiki.external('id') }}" 属性を持つ、現在フォーカスされたものの子孫にフォーカスが移ります。コンテナウィジェット上の keydown ハンドラは、そのフォーカスが移った子孫に変更され、現在の項目がそれと分かるように (border や background color によって) スタイル付けされます。この方法は、すべてのブラウザで動作させることができます。この動作を直接描いた例は、listbox example のソースコードをご覧ください。
    3. +
+

{{ 英語版章題("Basic support for assistive technologies") }}

+

支援技術のための基本的なサポート

+

支援技術のサポートには、Firefox 2 以降と、各ウィジェットを記述するために ARIA マークアップを使用するコンテンツを必要とします。例えば、各ウィジェットの種類を指定するために ARIA role を使用する必要があります。ウィジェットの種類にはメニューやスライダー、プログレスバーなどがあります。各 role は、checked および selected, required, invalid, expanded などの追加の property 属性をサポートします。 {{ 英語版章題("What does the markup look like?") }}

+

マークアップ例

+

ARIA の勧告が変更され、名前空間がマークアップ内で使用されなくなったため、HTML 内で使用できるようになりました。

+

例えば、checkbox は以下のように指定します: {{ 英語版章題("In HTML (requires Firefox 3)") }}

+

HTML では (要 Firefox 3)

+
<span tabindex="0" role="checkbox"
+      aria-checked="true"
+      onkeydown="return checkBoxEvent(event);"
+      onclick="return checkBoxEvent(event);">
+  チェックボックスのラベル
+</span>
+
+

{{ 英語版章題("Historical Namespace approach (no longer supported)") }}

+

伝統的な名前空間によるアプローチ (サポートされません)

+

これは、歴史に残しておくための名前空間によるアプローチです。この方法は宣言が使用されるため、XHTML が必要です。Firefox 3 ではサポートされません:

+
<span tabindex="0" role="wairole:checkbox"
+      aaa:checked="true"
+      onkeydown="return checkBoxEvent(event);"
+      onclick="return checkBoxEvent(event);">
+  チェックボックスのラベル
+</span>
+
+


+ 上記の checkbox はカスタム構成です。しかし、支援技術とユーザに関しては通常の checkbox のように動作します。作者が望めば、CSS を通してビジュアルな外観にすることができます。以下に各属性の意味を解説します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性意味
tabindex="0"<span> ベースのチェックボックスをタブで移動する順番に含め、マウスでクリックしてフォーカスできるようにします。対照的に、tabindex="-1" はスクリプトやマウスクリックから要素をフォーカスできるようにしますが、既定のタブで移動する順番には含まれません。
role="checkbox"これが checkbox であることを指定します。スクリーンリーダなどの支援技術は、これが checkbox であることを知ることができます。
aria-checked="true"checkbox はチェックが入っているかどうかをサポートしています。この指定により、checkbox がチェック可能であることを示しています。property は支援技術にも向いています。
onkeydown="return checkBoxEvent(event);"スペースキーでチェックの切り替えができるようにします。checkBoxEvent() メソッドでこれを実装しています。同様に、(消費された)イベントが伝達され続けるべきではない場合に false を返します。
onclick="return checkBoxEvent(event);"キーボードハンドラに加えて、これも必要です。checkbox をクリックすると checkbox の値を切り替えます。
+

このマークアップが使用されている例は、ARIA サンプル をご覧ください。Firefox はこれらのマークアップ role と property を + + MSAA - Microsoft Active Accessibility + と + + ATK - Accessibility Toolkit + (from Gnome Accessibility Project) から実装しています。これは、Windows と Linux 上でのアクセシビリティ API 標準です。ウィジェットの情報がアクセシビリティ API 標準を通して公開されているため、支援技術はこれらのウィジェットを用いて、新しいコードなしで多くの互換性を得ることができます。現在、最も完全なスクリーンリーダによるサポートには + + Window-Eyes 5.5 + が必要です。 + + ZoomText + などのスクリーン拡大鏡もまた、ARIA と互換性があります。

+

Internet Explorer による role や property のサポートは現在利用できません。Internet Explorer は現在、これらのウィジェットのキーボード操作のみサポートしています。支援技術ベンダーは、Internet Explorer を変更せずに DOM と DOM 変更イベントを直接探すことによって、ARIA のセマンティクスをサポートできるようにするべきです。 {{ 英語版章題("Choosing XHTML or HTML") }}

+

XHTML と HTML のどちらを選ぶか

+

XHTML と HTML (または SVG と XUL) のどちらを使用するかという問題はなくなりました。Firefox は名前空間なしの新しいマークアップを、他のものと同じ方法で処理します。content type の心配をしなくても、ARIA マークアップ宣言を使用し、それを他のものと同様に動的に設定することができます。初期の ARIA の扱いに比べれば、これは劇的な向上です! {{ 英語版章題("Sample widgets") }}

+

サンプルウィジェット

+

{{ 英語版章題("Testing with keyboard and mouse navigation") }}

+

キーボードとマウスによる操作をテストする

+

キーボードまたはマウスによる操作は、Internet Explorer と Firefox のどちらでも可能です。サンプルの HTML バージョンのみが Internet Explorer 上でテストし、動作するように作られているので注意してください。サンプルの XHTML バージョンはそうではありません。 {{ 英語版章題("Testing with Firefox Accessibility Extension") }}

+

Firefox のアクセシビリティ拡張でテストする

+

Firefox Accessibility Extension は ARIA role のアクセシビリティをテストする機能を持っています。 {{ 英語版章題("Testing with screen readers") }}

+

スクリーンリーダでテストする

+

スクリーンリーダのサポートは Firefox 1.5 以降でのみ利用可能です。以下のコンポーネントをインストールする必要があります:

+
    +
  1. Firefox: Firefox からダウンロードしてインストールしてください。
    2. +
  2. スクリーンリーダ: スクリーンリーダでテストするには Window-Eyes 5.5 以降が必要です。加えて、JAWS 7.x が ARIA の一部をサポートしています。また、Orca 2.20 以降が Firefox 3.0 のほとんどの ARIA ウィジェット型をサポートしています。
    3. +
+

{{ 英語版章題("Where can I find samples?") }}

+

サンプルはどこにありますか?

+

注意: 以下の例は、次のセクションの role/property にもあります。 {{ 英語版章題("Dojo Toolkit") }}

+
Dojo Toolkit
+

Dojo 1.0 widget toolkit のすべての Dijit ウィジェットコアは ARIA をサポートしています。スクリーンリーダをサポートする Dojo の例は、Firefox 2 または Firefox 3 で開かなくてはなりません。 {{ 英語版章題("University of Illinois") }}

+
イリノイ大学
+

イリノイ大学の ARIA テストスイートは、スクリーンリーダのサポートに Firefox 3 が必要です。 {{ 英語版章題("Mozilla bare bones examples") }}

+
Mozilla ベアボーンの例
+

Mozilla.org の ARIA テストページは、ここから学ぶためのいくつかの例を提供しています。スクリーンリーダのサポートは Firefox 3 が必要です:

+
    +
  1. Checkbox, 説明つき Button
    2. +
  2. グラフィカルな slider, 簡単な slider, Progress bar
    3. +
  3. Alert
    4. +
  4. menubar 付きの Grid (spreadsheet)
    5. +
  5. タブパネル
    6. +
  6. Listbox
    7. +
  7. Tree ビュー, Tree ビュー #2
    8. +
+

{{ 英語版章題("CLC World: live region examples") }}

+
CLC World: live region の例
+

現在の live region の例 は Fire Vox 内で動作します。Fire Vox スクリーンリーダ拡張の実行は、Firefox のどのバージョンを使用しても問題ありません。 {{ 英語版章題("Supported roles") }}

+

サポートされている role

+

ここには、Firefox に対応した使用例のある role と 各 role に対応する property の表があります。一部の property は "universal properties" であり、すべての要素上で動作することに注意してください。詳しくは、対応する property のセクションをご覧ください。

+

他の方法で指示されていない限り、property はブーリアン値で true または false に対応します。ブーリアン値である場合は、値が設定されていない属性には false が設定されます。

+

ただし、checked および selected, expanded 属性は特別です。属性に false が提供されている場合は、ウィジェットが checkable/selectable/expandable であると指示され、false が無いものとは異なります。

+

また私たちは、これらの情報を Firefox がどのように Windows(MSAA) や Linux(ATK) 上のアクセシビリティ API を通して公開しているか、技術の詳細を提供しています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Roleサポートされている作者が定義した property †自動的にサポートされる property使用例Firefox 1.5 対応Firefox 2 対応Firefox 3 テストビルド対応
alert 子コンテンツまたは title 属性からの名前Mozilla.org alert,Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降
alertdialog 子コンテンツまたは title 属性からの名前 なしWindow-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、ZoomText 9.1 以降、JAWS 7.1 以降
application  Mozilla.org Grid (spreadsheet) と menubarWindow-Eyes 5.5 以降Window-Eyes 5.5 以降、Orca 2.20 以降
button +
    +
  • disabled
    • +
  • pressed
    • +
+ 		子コンテンツまたは title 属性からの名前Weba11y button 説明付きの Mozilla.org button, UIUC buttonWindow-Eyes 5.5 以降、JAWS 8.0 以降Window-Eyes 5.5 以降、JAWS 8.0 以降、Orca 2.20 以降
checkbox +
    +
  • checked
    • +
  • disabled
    • +
  • readonly
    • +
  • required
    • +
  • invalid
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org checkbox, UIUC checkboxWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
columnheader +
    +
  • disabled
    • +
  • selected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • readonly
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org grid (spreadsheet) と menubarWindow-Eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
combobox +
    +
  • disabled
    • +
  • readonly
    • +
  • expanded
    • +
+ 		title 属性からの名前Mozilla.org combo boxWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
description 子コンテンツまたは title 属性からの名前Mozilla.org buttonWindow-Eyes 5.5 以降、JAWS 7.0 以降
+ 要素上では、その要素のための記述と共に aria-describedby を使用する必要があります。		Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
dialog  Dojo dialog Orca 2.20 以降
directory   公開されているが、対応する特別な支援技術は無い
document   Window-Eyes 5.5 以降
grid +
    +
  • disabled
    • +
  • readonly
    • +
  • multiselectable
    • +
+ 		title 属性からの名前Mozilla.org grid (spreadsheet) と menubar, UIUC grid +
    +
  • Window-Eyes 5.5 以降は完全対応
    • +
  • JAWS 7.1 以降は一部対応(JAWS は row/column ヘッダを読まないため)
    • +
  • まだ公開されていなかったため、Firefox 1.5 では multiselectable に未対応。
    • +
+ 		+
    +
  • Window-Eyes 5.5 以降は完全対応
    • +
  • JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)
    • +
  • multiselectable に対応している場合、検証データをテストする必要あり
    • +
+ 		+
    +
  • Window-Eyes 5.5 以降は完全対応
    • +
  • Orca 2.20 以降は完全対応
    • +
  • JAWS 7.1 以降は一部対応(row/column ヘッダを読まないため)
    • +
  • multiselectable に対応している場合、検証データをテストする必要あり
    • +
+
gridcell +
    +
  • disabledselected=true|false (selected 属性が無いときは選択できないない状態を指示)
    • +
  • readonly
    • +
  • invalid
    • +
  • required
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org grid (spreadsheet) と menubar, UIUC grid +
    +
  • Window-Eyes 5.5 以降は完全対応
    • +
  • JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)
    • +
+ 		+
    +
  • Window-Eyes 5.5 以降は完全対応
    • +
  • JAWS 7.1 以降は一部対応(各セルに関連する row ヘッダまたは column ヘッダセルを読まないため)
    • +
  • Orca 2.20 以降
    • +
+
group title 属性からの名前UIUC tree, Mozilla.org progress barWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
img title 属性からの名前Mozilla.org 並べられた image未対応未対応Orca 2.20 以降
label 子コンテンツまたは title 属性からの名前 Window-Eyes 5.5 以降、JAWS 7.1 以降
link 子コンテンツまたは title 属性からの名前、linked(常に true)disabled名前の処理が不正確名前の処理が不正確Window-Eyes 5.5 以降、JAWS 7.1 以降
list +
    +
  • readonly
    • +
  • multiselectable
    • +
+ 		title 属性からの名前 Window-Eyes 5.5 以降、JAWS 7.1 以降
listbox +
    +
  • disabledreadonly
    • +
  • multiselectable
    • +
+ 		title 属性からの名前Mozilla.org listboxなしWindow-Eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
listitem +
    +
  • disabledselected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • checked=true|false (checked 属性が無いときは checkable ではない状態を指示)
    • +
+ 		子コンテンツまたは title 属性からの名前 Window-Eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
log (チャットログ、ゲームログ、エラーログなど。デフォルトで実況)  AJAX チャット公開されているが、現在は対応する特別な支援技術は無い
menudisabledtitle 属性からの名前Mozilla.org grid (spreadsheet) と menubarWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
menubardisabledtitle 属性からの名前Mozilla.org grid (spreadsheet) と menubar, UIUC menubarWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
menuitem +
    +
  • disabled
    • +
  • checked=true|false|mixed
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org grid (spreadsheet) と menubar, UIUC menubarWindow-Eyes 5.5, JAWS 7.1 以降 (checked=mixed には未対応)Window-Eyes 5.5, JAWS 7.1 以降 (checked=mixed に対応している場合、検証データをテストする必要あり)Window-Eyes 5.5, Orca 2.20 以降、JAWS 7.1 以降 (checked=mixed に対応している場合、検証データをテストする必要あり)
menuitemcheckbox +
    +
  • checked
    • +
  • disabled
    • +
+ 		checkable, 子コンテンツまたは title 属性からの名前 なし検証データをテストする必要あり検証データをテストする必要あり
menuitemradio +
    +
  • checked
    • +
  • disabled
    • +
+ 		checkable, 子コンテンツまたは title 属性からの名前 検証データをテストする必要あり検証データをテストする必要あり検証データをテストする必要あり
option +
    +
  • selected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • checked=true|false (checked 属性が無いときは checkable ではない状態を指示)
    • +
  • disabled
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org listboxなしWindow-Eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
presentation これらの項目はアクセシビリティの階層から自動的に削除されます。table 上に置いたときは、table 以下のすべての子孫もまたアクセシビリティの階層から自動的に削除されます。 MSAA や ATK のようにアクセシビリティ API を使用する、DOM ベースでない支援技術すべて
+ 例えば、Window-Eyes 5.5 以降、JAWS 7.0 以降、ZoomText 9.1 以降、Orca 2.20 以降で動作するが、Fire Vox では動作しない
progressbar +
    +
  • disabled
    • +
  • valuenow="#"|"unknown"
    • +
  • valuemin="#"
    • +
  • valuemax="#"
    • +
+ 		title 属性からの名前Mozilla.org progress barWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
radio +
    +
  • checked
    • +
  • disabled
    • +
+ 		子コンテンツまたは title 属性からの名前模擬 radio buttons ATRC radio buttons (ARIA の名前空間のみ), UIUC radio buttonsWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
radiogroup +
    +
  • disabled
    • +
  • invalid
    • +
  • required
    • +
+ 		title 属性からの名前UIUC radio buttonsWindow-eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
region   公開されているが、対応する特別な支援技術は無い
row +
    +
  • disabled
    • +
  • selected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • checked=true|false|mixed (checked 属性が無いときは checkable ではない状態を指示)
    • +
  • expanded=true|false (expanded 属性が無いものは展開できない状態を指示)
    • +
+ 		子コンテンツまたは title 属性からの名前 なしなしFirefox 3 に向けて作業中
rowheader +
    +
  • disabled
    • +
  • selected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • readonly
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org grid (spreadsheet) と menubarWindow-Eyes 5.5 以降、JAWS 7.1 以降Window-Eyes 5.5 以降、JAWS 7.1 以降、Orca 2.20 以降
separator   検証データをテストする必要あり
slider +
    +
  • disabled
    • +
  • invalid
    • +
  • readonly
    • +
  • required
    • +
  • valuenow="#"
    • +
  • valuemin="#"
    • +
  • valuemax="#"
    • +
+ 		title 属性からの名前Mozilla.org 平坦な slider, Mozilla.org グラフィカルな slider, UIUC sliderWindow-Eyes 5.5 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)Window-Eyes 5.5 以降、Orca 2.20 以降、JAWS 7.1 以降 (JAWS 8.0 では矢印キーによる操作不可)
spinbutton +
    +
  • disabled
    • +
  • invalid
    • +
  • readonly
    • +
  • required
    • +
  • valuenow="#"
    • +
  • valuemin="#"
    • +
  • valuemax="#"
    • +
+ 		title 属性からの名前Dojo spinner Orca 2.20 以降
tabdisabled子コンテンツまたは title 属性からの名前Mozilla.org tab panel, UIUC tab panelWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降
tablist  Mozilla.org tab panel, UIUC tab panelWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降
tabpanel  Mozilla.org tab panel, UIUC tab panelWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.21.5 以降
textbox +
    +
  • disabled
    • +
  • readonly
    • +
  • multiline
    • +
+ 		title 属性からの名前UIUC textfield未対応未対応Window-Eyes 5.5 以降、JAWS 7.0 以降
toolbardisabled  公開されているが、どの支援技術がこれに対応しているか、または必要としているかが不明確
tooltip  Mozilla.org tooltip   
tree +
    +
  • disabled
    • +
  • multiselectable
    • +
  • readonly
    • +
+ 		title 属性からの名前Mozilla.org tree, UIUC treeWindows-Eyes 5.5 以降、JAWS 7.0Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降
treegrid +
    +
  • disabled
    • +
  • multiselectable
    • +
  • readonly
    • +
+ 		title 属性からの名前 なしなしFirefox で作業中のため未サポート
treeitem +
    +
  • disabled
    • +
  • selected=true|false (selected 属性が無いときは選択できない状態を指示)
    • +
  • checked=true|false|mixed (checked 属性が無いときは checkable ではない状態を指示)
    • +
  • expanded=true|false (expanded 属性が無いものは展開できない状態を指示)
    • +
+ 		子コンテンツまたは title 属性からの名前Mozilla.org tree, UIUC treeWindows-Eyes 5.5 以降、JAWS 7.0 以降、checked=mixed には未対応Windows-Eyes 5.5 以降、JAWS 7.0Windows-Eyes 5.5 以降、JAWS 7.0, Orca 2.20 以降
+

† 下記の表において、適用性の列が "すべての要素" と書かれているすべての要素が universal property を許容します。 {{ 英語版章題("Landmark Roles from XHTML role attribute module") }}

+

代表的な XHTML の role 属性モジュール

+

XHTML の role 属性モジュール は次の role を定義しています: banner, contentinfo, definition, main, navigation, note, search, secondary, seealso

+

XHTML では、これらの代表的な role を "wairole:" プレフィックス無しで使用することができます (例: <div role="main">)。理想的なスクリーンリーダーは、これらの role を用いてナビゲーション機構を提供するか、ユーザがメインコンテンツに入ると自動的にナビゲーションを開始します。スクリーン拡大鏡や携帯電話もまた、メインコンテンツから開始するか、特別なハイライトやナビゲーション機構を提供します。しかしながら、これらの role は MSAA 下の role を通じて公開されており、現在ある支援技術には特別なサポートが知られていません。 {{ 英語版章題("Supported properties") }}

+

サポートされている property

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Property 名適用性使用例Firefox 1.5 対応Firefox 2 対応Firefox 3 テストビルド対応
aria-activedescendant="{{ mediawiki.external('id') }}"すべての要素Mozilla.org Listbox無し無しWindow-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
aria-atomic="true"すべての要素 + + Fire Vox 2.7 以降Fire Vox 2.7 以降Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない
aria-busy="true" or "false" or "error"すべての要素  未実装未実装
aria-channel="main" (default) or "notify"すべての要素 未実装未実装未実装
aria-checked="true"
+ aria-checked="false" (チェック可能だがチェックされていない)		roles: checkbox, menuitem, menuitemcheckbox, menuitemradio, listitem, option, radio, treeitemMozilla.org checkbox, +

UIUC checkbox

+ 		Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
aria-checked="mixed" (チェック可能だが未確定)roles: checkbox, menuitem, treeitemMozilla.org checkbox検証データをテストする必要あり検証データをテストする必要あり検証データをテストする必要あり
aria-controls=IDLISTすべての要素 + + Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない		Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない		Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない
aria-datatype="xsd:DATATYPE"すべての要素 無し無し公開されているが、対応する支援技術は無い
aria-describedby=IDLISTすべての要素Mozilla.org button with aria-describedby +

Live region with aria-describedby

+ 		Window-Eyes 5.5 以降Window-Eyes 5.5 以降Window-Eyes 5.5 以降、Orca 2.20 以降
aria-disabled="true"roles: button, checkbox, columnheader, combobox, grid, gridcell, link, listbox, menu, menubar, menuitem, menuitemcheckbox, menuitemradio, option, progressbar, radio, radiogroup, row, rowheader, slider, spinbutton, tab, textbox, toolbar, tree, treegrid, treeitem Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降 (span への参照点なし)
aria-dropeffect="copy" または "move", "reference", "none"すべての要素 未実装未実装未実装
aria-expanded="true"roles: treeitem, region, (combobox?)Mozilla.org tree, +

UIUC tree

+ 		  Orca 2.20 以降
aria-flowto=IDLISTすべての要素 公開されているが、対応する支援技術は無い公開されているが、対応する支援技術は無い公開されているが、対応する支援技術は無い
aria-grab= "true" または "false", "supported"すべての要素 未実装未実装未実装
aria-haspopup="true"すべての要素 Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
aria-hidden="true"すべての要素 要素のスタイルに display: none がある場合に動作要素のスタイルに display: none がある場合に動作要素のスタイルに display: none がある場合に動作
aria-invalid="true"すべての要素ATRC alert, +

Mozilla.org checkbox

+ 		Window-Eyes 5.5 以降Window-Eyes 5.5 以降Window-Eyes 5.5 以降
aria-labelledby="{{ mediawiki.external('IDLIST') }}"すべての要素aria-labelledby=IDLISTWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
aria-level=POSITIVE_NUMBERすべての要素、特に treeitem 上で有用 無し無しツリービューでのみ動作、Window-Eyes 5.5 以降および JAWS 7.0 以降
aria-live=POLITENESSすべての要素 + + Fire Vox 2.7 以降Fire Vox 2.7 以降Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない
aria-multiselectable="true"roles: grid, list, treeUIUC grid未対応未対応検証データをテストする必要あり
aria-ownsすべての要素 無し無し無し
aria-pressed="true"roles: buttonUIUC button検証データをテストする必要あり検証データをテストする必要ありOrca 2.20 以降
aria-posinset=POSITIVE_NUMBER (treeitem 上の場合、aria-setsize および aria-level と共に使用)すべての要素、特に option, listitem, treeitem 上で有用模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)無し無しWindow-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作
aria-readonly="true"roles: checkbox, columnheader grid, gridcell, list, rowheader, spinbutton, textarea, textfield Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
aria-relevant=RELEVANCE_LISTすべての要素 + + Fire Vox 2.7 以降Fire Vox 2.7 以降Fire Vox 2.7 以降
+ アクセシビリティ API を通じて公開されているが、一般的な目的の支援技術にはまだ使用されていない
role="{{ mediawiki.external('rolename') }}"すべての要素上記の role 表をご覧ください上記の role 表をご覧ください上記の role 表をご覧ください上記の role 表をご覧ください
aria-required="true"すべての要素Mozilla.org checkboxWindow-Eyes 5.5 以降Window-Eyes 5.5 以降Window-Eyes 5.5 以降
selected="true"
+ selected="false" (選択可能だが、選択されていない)		roles: columnheader, gridcell, listitem, option, rowheaderUIUC grid検証データをテストする必要あり検証データをテストする必要あり検証データをテストする必要あり
aria-setsize=POSITIVE_NUMBER (treeitem 上の場合、aria-setsize および aria-level と共に使用)すべての要素、特に option, listitem, treeitem 上で有用模擬 radio buttons (名前空間付き/xhtml/FF2 のみ)無し無しWindow-Eyes 5.5 以降および JAWS 7.0 以降、Orca 2.20 以降において、option および listitem, treeitem のみ動作
aria-sort=SORT_TYPEすべての要素 無し無しアクセシビリティ API を通して公開されているが、一般的な目的の支援技術にはまだ使用されていない
tabindexすべての HTML 要素 すべての支援技術、同様に IE 5 以降も対応すべての支援技術、同様に IE 5 以降も対応すべての支援技術、同様に IE 5 以降も対応
valuenow="#"
+ valuemin="#"
+ valuemax="#"		roles: progressbar, slider, spinbuttonMozilla.org 平坦な slider Mozilla.org グラフィカルな slider Mozilla.org plain progress barWindow-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降Window-Eyes 5.5 以降、JAWS 7.0 以降、Orca 2.20 以降
valuenow の設定なし (値が未確定)roles: progressbar 検証データをテストする必要あり検証データをテストする必要あり検証データをテストする必要あり
+

{{ 英語版章題("Live regions") }}

+

Live regions

+

一部のウェブページには、ユーザのアクションや現実世界のイベントによって更新することができる Live region(動的更新が可能な領域) があります。ユーザのアクションによる変更の例は、この wiki のオプションページです。現実世界のイベントによる変更の例には、チャット領域 や 試合状況のライブ更新, 金融情報のライブ更新 があります。

+

今のところ、スクリーンリーダの Live region のためのアクセシビリティには問題があります。スクリーンリーダがページ上のすべての変更を逐次読み上げてしまうと、ユーザにとって迷惑になります。もし、スクリーンリーダがそれらを読み上げなければ、ユーザは極めて重要な情報を失うことになります。

+

解決策は ARIA を通して開発されており、ウェブページの作者がそこにある Live region が何かを指定し、また Live region についての追加の役立つ情報を指定することができます。これは、スクリーンリーダが何をいつ読み上げればよいかを決められるようにします。

+

これらの ARIA プロパティには、aria-live および aria-atomic, aria-relevant, aria-controls, aria-labelledby, aria-describedby があります。現在のサポートは、標準仕様の執筆活動を前進させ、ウェブ開発者コミュニティに対して WAI-ARIA を採用する利点を実証し、またスクリーンリーダ開発者コミュニティがエンドユーザに WAI-ARIA の 動作を体験できることを示すため、Fire Vox スクリーン読み上げ拡張機能で開発されています。

+

さらに詳しい情報:

+ +

Firefox 3 の登場までに、Live region がスクリーンリーダのすべての目的に対応することは期待されていません。 {{ 英語版章題("Standards development for ARIA") }}

+

ARIA のための標準開発

+

W3C の Web Accessibility Initiative の中身は Protocols and Formats Working Group (PFWG) です。このグループは、Dynamic Web Content Accessibility Work roadmap と呼ばれるものに大きく焦点を当てており、すべての重要な格差を埋める長期的な努力と同時に、基本的な role および properties を定義する短期間の努力をしています。 {{ 英語版章題("Open Bugs in Firefox") }}

+

Firefox の公開バグ

+

完全な Firefox の ARIA バグ一覧 では、Firefox の ARIA 対応の進捗を追跡することができます。 {{ 英語版章題("Future of ARIA") }}

+

将来の ARIA

+

追加の ARIA サポートは将来のリリースで計画されています。この作業は W3C PF グループの安定した標準から得ることに依存しています。これらの変更には、作者が既存の role を継承して新しい role を定義したり、動作を記述したり、要素間の関係を新たに指定したり、またブラウザと Web ページの間でのキーボード・アクセラレータの今日のような衝突を避けるセマンティック・アクセスキーのサポートが含まれます。 {{ 英語版章題("ARIA IRC channel and mailing list") }}

+

ARIA IRC チャンネルとメーリングリスト

+

WAI-ARIA について公共の場で討議するには #wai-aria チャンネル (irc.w3.org:6665) に参加してください。メンバーは内部ドラフト案を #pf で審議してください。

+

公共の討議をするメーリングリストは wai-xtech です。wai-xtech に参加したい方は PFWG 議長 (wai-pf-call@w3.org) に購読希望のメールを出してください。

+
+  
+

{{ languages( { "en": "en/ARIA/Accessible_Rich_Internet_Applications", "fr": "fr/ARIA/Applications_riches_Internet_accessibles" } ) }}

diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..b84af866ef --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,60 @@ +--- +title: canvas チュートリアル +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas> 要素は、スクリプト (一般的に JavaScript) を使って図形を描くために使われる新しい HTML 要素です。例えば、グラフを描く、写真を合成する、または簡単な (またはあまり簡単ではない) アニメーションに使うことができます。このページの画像は後でこのチュートリアルの中でみる <canvas> を実際に使った例です。

+
+ +

このチュートリアルでは、2D グラフィックスを描画するために <canvas> 要素を使用する方法を、基礎から説明します。提供する例は、<canvas> で出来ることの、いくつかの明確なアイデアと、それをあなた自身のコンテンツで作成開始できるようなコードスニペットを提供します。

+ +

<canvas> は Apple によって OS X の Dashboard のために WebKit へ初めて導入され、後にブラウザーに実装されました。現在は、あらゆる主要ブラウザーがサポートしています。

+ +

始める前に

+ +

<canvas> を使うことはそれほど難しくはありませんが、HTML と JavaScript の基本的な理解が必要です。一部の古いブラウザーは <canvas> 要素をサポートしていませんが、最近のバージョンの主要ブラウザーはすべてサポートしています。canvas のデフォルトのサイズは、300 px × 150 px (幅 × 高さ) です。しかし、HTML の height および width プロパティを使用して、独自のサイズを定義することができます。canvas にグラフィックスを描画するためには、JavaScript コンテキストオブジェクトを使用します。このオブジェクトは、グラフィックスをオンザフライで生成します。

+ +

チュートリアル

+ + + +

関連情報

+ + + +

貢献者への注記

+ +

2013 年 6 月 17 日の週に発生した不運な技術的エラーにより、すべての過去の貢献者の属性を含む、このチュートリアルの履歴情報が失われました。この問題についておわびするとともに、この不運な事故を容赦願います。

+ +
{{Next("Web/API/Canvas_API/Tutorial/Basic_usage")}}
diff --git a/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html new file mode 100644 index 0000000000..be09a119f7 --- /dev/null +++ b/files/ja/conflicting/web/api/canvas_api/tutorial_3cd5468edc15a1ef1ddc0d2b17e1fa5d/index.html @@ -0,0 +1,213 @@ +--- +title: canvas に絵を描く +slug: Web/API/Canvas_API/Drawing_graphics_with_canvas +tags: + - HTML + - HTML5 + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +
+

このページには、一部古い内容が含まれています。

+
+ +

イントロダクション

+ +

Firefox 1.5 より、 Firefox はプログラム可能な画像のための新しい HTML 要素を含みます。<canvas> は WHATWG の canvas の仕様を基にしています。WhatWG canvas 仕様自体は Safari で実装された Apple の <canvas> を基にしています。クライアント上でグラフ、UI 要素、および他のカスタムグラフィックスの描画に使用することができます。

+ +

<canvas> は 1 つ以上の描画コンテクスト を公開した固定サイズの描画表面を作ります。現在は 2 次元描画コンテクストのみが実装されています。 3D グラフィックスの描画には、 WebGL レンダリングコンテクストを用いると良いでしょう。

+ +

2 次元描画コンテクスト

+ +

初歩的な例

+ +

始めに、2 つの交差した長方形を描く簡単な例を見てみましょう。片方の長方形は透明度を持っています。

+ +
function draw() {
+  var myCanvas = document.getElementById('canvas');
+  var ctx = myCanvas.getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+
+ + + +
{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}
+ +

draw 関数は、まず canvas 要素を取得し、次にその canvas 要素 の 2 次元レンダリングコンテクストを取得しています。 ctx オブジェクトは canvas に実際に描画するのに使うことができます。例では CSS color 仕様による 2 つの異なる色を fillStyle プロパティで設定し、fillRect メソッドにより 2 つの長方形を単純に塗りつぶしています。 2 つ目の fillStyle は色と一緒に透明度を定義するために rgba() を使っています。

+ +

fillRect() は矩形状の塗りつぶし、strokeRect() は矩形状の輪郭線の描画、 clearRect() はコンテクストの指定部分の消去に用います。より複雑な形を描画するにはパスを用います。

+ +

パスの利用

+ +

beginPath メソッドは新しいパスの作成を開始します。そして moveTo、lineTo、arcTo、arc などのメソッドはパスにセグメントを加えるのに使われます。パスは closePath メソッドによって閉じることが可能です。パスの作成後、fill か stroke を使って canvas コンテクストにパスを描画します。

+ +
function draw() {
+  var myCanvas = document.getElementById('canvas');
+  var ctx = myCanvas.getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); これは間違い
+
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- これが正しい書式 ->
+
+  ctx.lineTo(30, 30);
+
+  ctx.fill();
+}
+ + + +
{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}
+ +

fill() か stroke() を呼ぶと現在のパスが使われます。 もう一度塗りつぶしか輪郭線を描くにはパスを再作成しなくてはなりません。

+ +

レンダリングコンテクストの状態

+ +

fillStyle 、strokeStyle 、lineWidth 、 lineJoin のようなコンテクストの属性は、現在のレンダリングコンテクストの状態の一部です。 コンテクストは現在の状態を状態スタックに格納したり取り出したりするために save() と restore() という 2 つのメソッドを提供してます。

+ +

より複雑な例

+ +

パス、状態、変換行列を用いた少し複雑な例を紹介します。 translate() 、scale() 、rotate() のコンテクストメソッドは全て現在の行列を変換します。 全ての描画された点は最初にこの行列により変換されます。

+ +
function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "black";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 以後の全て変換はこの変換から相対的であることに注意
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // 不要
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+
+ + + +
{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}
+ +

drawBotie 関数及び dot 関数を定義し、 draw 関数内で 4 回使用しています。 それぞれを呼び出す前に、translate() 及び rotate() を現在の変換行列を用意するために用いています。その変換行列は順番に点と蝶ネクタイを配置します。 dot 関数は (0, 0) を中心に小さな黒い正方形を描画します。 dot は変換行列によって移動されます。 drawBowtie は第 1 引数に指定した塗りつぶしスタイルを使い、単純な蝶ネクタイのパスを描画します。

+ +

行列の操作は累積されるので、save() 及び restore() はそれぞれが設定した元の canvas の状態に復帰するために使われます。 注目すべきは、回転が常に現在の基点の周りで起こるということです。 従って translate() rotate() translate() の連続は translate() translate() rotate() の連続実行とは異なった結果を生みます。

+ +

Apple の <canvas> との互換性

+ +

<canvas> は Apple の実装とその他の実装で互換性があります。 しかし、いくつかの注意すべき問題があります。

+ +

必須の </canvas> タグ このセクションの内容には古い情報が含まれます

+ +

Apple の Safari の実装においては、<canvas> は <img> とほぼ同じような方法で実装された要素で、終了タグを持っていません。 しかしながら、<canvas> がウェブで広く普及するために、 代替内容のための何らかの方法を提供しなければなりません。 したがって、Mozilla の実装では、 終了タグが必須となっています。

+ +

代替内容が必要無い場合、単純に <canvas id="foo" ...></canvas> とすれば、Safari は終了タグを無視し、 Safari と Mozilla の両方で完全に互換性を持つでしょう。

+ +

もし代替内容が望まれるならば、(canvas だけが描画されるべき) Safari から代替内容を隠すために、そして(代替内容が表示されるべき) IE から canvas 自体を隠すためにいくつかの CSS のトリックを使わなければなりません。

+ +

現在は canvas 要素の内容には代替コンテンツを配置するように仕様書で定められています。

+ +

その他の機能

+ +

canvas への Web コンテンツの描画

+ +
この機能は Chrome 特権コードの実行時のみに存在します。通常の HTML ページでは許可されていません。理由についてはソースをお読みください。
+ +

Mozilla の canvas は {{domxref("CanvasRenderingContext2D", "drawWindow()", "drawWindow()")}} メソッドで拡張できます。このメソッドは DOM window の中身のスナップショットを canvas に描画します。以下に例を示します。

+ +
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+ +

上記の例では、現在のウィンドウの、左上から (0, 0, 100, 200) 座標にある四角形の中身を、黒色背景の canvas に描き込みます。 遅くなりますが、 "rgba(255, 255, 255, 0)" と色を指定すれば、透過背景の上に中身を描画することになります。

+ +

このメソッドにより、隠し IFRAME に任意の内容 (たとえば、CSS でスタイル付けされた HTML テキストや SVG) を入れて、その内容を canvas に描画することも可能です。その場合、現在の変形にしたがって、拡大縮小・回転が行われます。

+ +

Ted Mielczarek の tab preview 拡張では、 Web ページのサムネイルを提供するために chrome の中でこのテクニックを使われています。ソースコードを参照してみてください。

+ +
注記: Using canvas.drawWindow() while handling a document's onload event doesn't work. In Firefox 3.5 or later, you can do this in a handler for the MozAfterPaint event to successfully draw HTML content into a canvas on page load.
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..5972564d98 --- /dev/null +++ b/files/ja/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,113 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - RandomSource + - Reference + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +

{{APIRef("Web Crypto API")}}

+ +

RandomSource は、暗号的に安全な乱数値のソースを表します。これは、グローバルオブジェクトの {{domxref("Crypto")}} オブジェクトを通して利用可能です。ウェブページ上では {{domxref("Window.crypto")}}、Worker 内では {{domxref("WorkerGlobalScope.crypto")}} が利用できます。

+ +

RandomSource は、インターフェイスでも、作成できるこの種類のオブジェクトでもありません。

+ +

プロパティ

+ +

RandomSource はどのプロパティも定義または継承しません。

+ +
+
+ +

メソッド

+ +
+
{{ domxref("RandomSource.getRandomValues()") }}
+
渡された {{ domxref("ArrayBufferView") }} を意味不明の乱数値で埋めます。
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}初期定義
+ +

ブラウザーの実装状況

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート11.0 {{ webkitbug("22049") }}{{CompatVersionUnknown}}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{ CompatNo() }}23{{CompatVersionUnknown}}{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
+
+ +

[1] RandomSource は Firefox 26 からのみ利用可能ですが、機能は Firefox 21 から利用可能でした。

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c09e67595e --- /dev/null +++ b/files/ja/conflicting/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,31 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +tags: + - DOM +--- +

要素の幅と高さを知るためのプロパティはいくつかあり、本当に求めているプロパティがどれであるかわかりにくいことがあります。このページでは目的に応じてどのプロパティを使用すれば良いか説明します。

+ +

表示に使用されている領域の大きさはどのくらいか？

+ +

表示されているコンテンツ、スクロールバー(あれば)、padding の幅を含む element の占有スペースの総量を知る必要があるならば、offsetWidth プロパティと offsetHeight プロパティを利用するのが良いです:

+ +

Image:Dimensions-offset.png

+ +

表示されているコンテンツのサイズは何か?

+ +

border、margins、スクロールバーを含まない、実際に表示されているコンテンツの padding のみがどれくらいのスペースを取るか知る必要があるならば、 clientWidth プロパティと clientHeight プロパティを利用するのが良いです:

+ +

Image:Dimensions-client.png

+ +

コンテンツの大きさはどのくらいか?

+ +

現在どのくらい表示されているかに関わらず、コンテンツの実サイズを知る必要があるならば、scrollWidth プロパティと scrollHeight プロパティを利用するのが良いです。たとえ現在スクロールバーの使用のために一部分だけが見えているとしても、これらは element の全コンテンツの幅と高さを返します。

+ +

たとえば、600×400ピクセルの element が300x300ピクセルのスクロールボックスの中に表示されているならば、scrollHeightは400を、scrollWidthは600を返します。

+ +

リファレンス

+ +

MSDN: Measuring Element Dimension and Location

+ +

{{ languages( {"en": "en/Determining_the_dimensions_of_elements"}) }}

diff --git a/files/ja/conflicting/web/api/document/characterset/index.html b/files/ja/conflicting/web/api/document/characterset/index.html new file mode 100644 index 0000000000..bc128b09e8 --- /dev/null +++ b/files/ja/conflicting/web/api/document/characterset/index.html @@ -0,0 +1,26 @@ +--- +title: document.inputEncoding +slug: Web/API/Document/inputEncoding +tags: + - DOM + - Document + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document/characterSet +translation_of_original: Web/API/Document/inputEncoding +--- +

{{ApiRef}} {{deprecated_header}}

+

概要

+

文書パース時のエンコーディングを表す文字列（※ ISO-8859-1 等）を返します。

+
+ 注記: このメソッドは DOM 4 仕様書ドラフトから削除されており、Gecko の実装からも削除される可能性があります。使用しないようにしてください。
+

構文

+
encoding = document.inputEncoding;
+ +

仕様書

+ diff --git a/files/ja/conflicting/web/api/document/createevent/index.html b/files/ja/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..d9dc6aef3f --- /dev/null +++ b/files/ja/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,32 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

新規イベントを生成します。生成されたイベントは初期化処理が必須です。

+ +

構文

+ +
document.createEvent(type)
+ +
+
type
+
生成するイベントタイプ名
+
+ +

このメソッドは指定されたイベントタイプの新規DOM {{ domxref("Event") }} オブジェクトを返り値として返します。

+ +

オブジェクトには初期化処理が必須です。

+ +

例

+ +
var newEvent = document.createEvent("UIEvents");
+ +

仕様書

+ + diff --git a/files/ja/conflicting/web/api/document_object_model/index.html b/files/ja/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..5bd2ec6ada --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,5 @@ +--- +title: DOM Client Object Cross-Reference +slug: DOM_Client_Object_Cross-Reference +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html new file mode 100644 index 0000000000..736d3074ba --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_226486dcf4878082093d6899a9e478cc/index.html @@ -0,0 +1,16 @@ +--- +title: DOM (Document Object Model) について +slug: DOM/About_the_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +

DOM とは何か?

+

Document Object Model は HTML と XML ドキュメントへの API です。これは、ドキュメントの構造的な表現、その内容を変更可能にすること、そして視覚的なプレゼンテーションを提供します。本質的には、ウェブページをスクリプト又はプログラミング言語と結合します。

+

ウェブ開発者がウェブページを操作及び作成するのに役立つ全てのプロパティ、メソッド、そしてイベントは、objects に組込まれています。(例えば、document オブジェクトはドキュメントそのもの、table オブジェクトは HTML テーブル要素を表すなど)。これらのオブジェクトは最新のウェブブラウザのスクリプティング言語を通してアクセス可能です。

+

DOM は JavaScript との関連において最も頻繁に使われます。JavaScript で書かれたコードは、しかしウェブページとその要素にアクセスするのには DOM を使う為です。しかしながら、 DOM はあらゆる個々のプログラミング言語から独立して設計され、ドキュメントの構造的な表現の作成が、単独で、一貫した API により利用できます。当サイトでは終始 JavaScript に焦点を置きますが、DOM の実装はあらゆる言語 でビルドする事が出来ます。

+

World Wide Web Consortium は W3C DOM と呼ばれる DOM 標準を設けました。今こそ、有力なブラウザは正しくこれを実装し、強力なクロスブラウザアプリケーションを可能にすべきです。

+

何故 Mozilla が DOM をサポートすることが重要か

+

"Dynamic HTML" (DHTML) は、あるベンダーが、HTML、スタイルシート、及びドキュメントを活発にするスクリプトの組み合わせを表現するのに使われる一方言です。 W3C DOM ワーキンググループは、必ずや相互実行可能且つ言語的に中立なソリューションが合意に至るよう熱心に努めています(W3C FAQ も見てください)。Mozilla が "ウェブアプリケーションプラットフォーム" を標榜するならば、DOM のサポートは最も求められる機能の一つであり、もし Mozilla が他のブラウザの代替として成功したいのなら、欠かせないものです。

+

さらにより重要なことは、Mozilla (Firefox や Thunderbird も然り) のユーザインタフェースが XUL -- XML User interface Language でビルドされているという事実です。故に Mozilla は自身の UI を操作する為に DOM を使います。

diff --git a/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..dcee4acf84 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,37 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

{{draft}}

+ +

Document Object Model はHTML と XML ドキュメントのための API です。 DOM はドキュメントの構造的表現を提供しており、開発者がコンテンツ自身や、ドキュメントの表示を変更することができるようになります。基本的に、スクリプトやプログラミング言語を通して、ページを繋げています。

+ +

obuject（例、ドキュメントオブジェクトはドキュメント自身を表したり、テーブルオブジェクトはhtmlのテーブル要素を表す、など）内に組み込まれているウェブページを作成したり、操作するためのすべてのプロパティやメソッド、イベントはweb開発者が使用可能です。これらのオブジェクトにはjavascript等のスクリプト言語でアクセス可能です。

+ +

 

+ +

DOMはほぼ大抵 JavaScript と合わせて使用されます。しかし、DOMはどんなプログラミング言語にも非依存なものとして設計されました。 a single, consistent API を使用してドキュメントの構造的な表現を作ることが可能です。このサイトでは私たちはJavaScriptにフォーカスを当てていますが、DOMを実装するのはどのような言語でも可能です。

+ +

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

+ +

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

+ +

DOMはなぜ重要なのか?

+ +

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ).

+ +

As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

+ +

 

+ +

DOMについてもっと知る

+ +

{{LandingPageListSubpages}}

diff --git a/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html new file mode 100644 index 0000000000..4a390b9177 --- /dev/null +++ b/files/ja/conflicting/web/api/document_object_model_8435a25d5137b436d5d7161e1b813c02/index.html @@ -0,0 +1,52 @@ +--- +title: 序文 +slug: Web/API/Document_Object_Model/Preface +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +
+ {{ApiRef}}
+

この資料について

+

この節では、このガイドそのものについて説明します。誰のための資料で、どんな情報があって、あなた独自の DOM 開発を行うにあたってこの資料のなかの例をどのように使えるのか、について説明します。

+

この文書は書きかけなので、Gecko に実装されている DOM 関数と属性がきれいにまとめられてはいません。ただし、資料に含まれる各オブジェクトに関する文書 (DOM Document リファレンス など） は完結しています。多数の API に含まれるさまざまな資料が準備でき次第、この資料に追加します。

+

この資料の対象となる読者

+

Gecko DOM リファレンス の読者は web 開発者や web ページの仕組みを知っている web の利用者です。この資料では、読者の専門知識を前提とはしていません。DOM、XML、web サーバ、web 標準、読者が DOM にアクセスするための言語である JavaScript に関する知識があるとは限らないものとしています。ですが、web ページの基本である HTML とブラウザとスタイルシートなどは押さえているものとして書かれています。

+

「導入の記述がある」 「例が多様」 「説明が詳しい」 という点では、「初心者向け」 のハッキングガイドと言うこともできます。ただし、一般的に言って、技術資料というものは web 開発の経験があっても無くても、その人たちにとって有用な資料である必要があります。

+

Gecko とは？

+

Mozilla と Firefox、Netscape 6 以上、そのほかの Mozilla をもとにしたブラウザの DOM 実装は同一のものです。というのも、これらのブラウザは同じ技術を使用しているからです。naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain

+

Gecko はこれらのブラウザの中にあるソフトウェアコンポーネントのことで、HTML の解析、ページのレイアウト、ドキュメント・オブジェクト・モデル、そしてアプリケーション・インタフェースの描画も処理しています。Gecko は、速く、標準に準拠した描画エンジンで、W3C の DOM 標準や DOM に類似した（しかし標準化されていない）ブラウザ・オブジェクト・モデル（例：window など）を、web ページやブラウザのアプリケーション・インタフェース（chrome）において、実装します。

+

ブラウザによって表示されるアプリケーション・インタフェースやコンテントは実際には異なりますが、DOM はこれらを一律にノードの階層として提示します。(commenting this incomplete sentence out for now...) The tree structure of the DOM (which in its application to the user

+

API 構文

+

各資料には、構文、入出力の引数 (return 型が与えられている return 型の場所) 、例、補足、該当仕様へのリンクがあります。

+

とくに読みとり専用属性の文法は基本的に一行だけです。なぜなら、それらのプロパティは設定できずアクセスしかできないからです。例えば、screen オブジェクトの availHeight は読取専用の属性なので、次のような構文で書かれています。

+
iAvail = window.screen.availHeight
+
+

つまり、式の右辺の属性だけが利用できるということです。それに対して、読み書き可能な属性の場合は、次の例でも分かるように、値を設定することもできます。

+
msg = window.status
+window.status = msg
+
+

一般に、メンバの記述があるオブジェクトの場合、その構文は簡潔な型になります。例えば、要素ならなんでも element ですし、document オブジェクトなら document ですし、TABLE オブジェクトなら TABLE といった具合です (データ型について詳しくは重要なデータ型 を参照してください)。

+

例の使い方

+

資料にある例のうち、その多くは単独のファイルとして完結しているものです。新しいファイルにコピーしてブラウザで開くと、きちんと動作します。コード断片もあります。断片の場合は、その断片を JavaScript コールバック関数内で使うことができます。例えば、 window.document 属性の資料にある例を次のように関数内に入れて、ボタンが押されたら呼ばれるような確認コードを書くことができます。

+
<!DOCTYPE html>
+<html>
+<head>
+<title>Test Page</title>
+<script>
+function testWinDoc() {
+  doc = window.document;
+  alert(doc.title);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="testWinDoc();">test document property</button>
+</body>
+</html>
+
+

すぐに利用できるように梱包されていないオブジェクトのメンバーについても、上記のような関数やページを作り出すことができます。「テスト実行環境」 の導入部分にある DOM API のテスト の節を参照してください。それを使うと、一度に、たくさんの API の動作を確認できます。

diff --git a/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..740d006c66 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,13 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +tags: + - DOM + - Document + - Reference + - Selection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

DOM の getSelection() メソッドは、 {{domxref("Window")}} インタフェース及び {{domxref("Document")}} インタフェースで利用可能です。
+ 詳細については {{domxref("window.getSelection()")}} の頁を参照して下さい。

diff --git a/files/ja/conflicting/web/api/documentorshadowroot/index.html b/files/ja/conflicting/web/api/documentorshadowroot/index.html new file mode 100644 index 0000000000..a7953136e6 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot/index.html @@ -0,0 +1,79 @@ +--- +title: DocumentOrShadowRoot.nodeFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodeFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodeFromPoint + - メソッド + - 標準外 +translation_of: Web/API/DocumentOrShadowRoot +translation_of_original: Web/API/DocumentOrShadowRoot/nodeFromPoint +--- +
{{APIRef("DOM")}}{{Non-standard_header}}
+ +

{{domxref("DocumentOrShadowRoot")}} インターフェイスの nodeFromPoint() プロパティは、 (ビューポートからの相対で) 指定された座標にある最上位のノードを返します。

+ +

現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。

+ +

構文

+ +
var node = document.nodeFromPoint(x, y);
+ +

引数

+ +
+
x
+
点の水平座標を表す倍精度浮動小数値。
+
y
+
点の垂直座標を表す倍精度浮動小数値。
+
+ +

返値

+ +

{{domxref('Node')}} オブジェクト。

+ +

例

+ +

HTML Content

+ +
<div>
+  <p>Some text</p>
+</div>
+<p>Top node at point 30, 20:</p>
+<div id="output"></div>
+
+ +

JavaScript Content

+ +
var output = document.getElementById("output");
+if (document.nodeFromPoint) {
+  var node = document.nodeFromPoint(30, 20);
+    output.textContent += node.localName;
+} else {
+  output.innerHTML = "<span style=\"color: red;\">" +
+     "Browser does not support <code>document.nodeFromPoint()</code>" +
+     "</span>";
+}
+ +

{{EmbedLiveSample('Example', '420', '120')}}

+ +

仕様書

+ +

現在はどの仕様書にも含まれていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.DocumentOrShadowRoot.nodeFromPoint")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html new file mode 100644 index 0000000000..d3f79b8d11 --- /dev/null +++ b/files/ja/conflicting/web/api/documentorshadowroot_20ea0e1d91453a020aad3a16dbce16f1/index.html @@ -0,0 +1,83 @@ +--- +title: DocumentOrShadowRoot.nodesFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodesFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodesFromPoint + - メソッド +translation_of: Web/API/DocumentOrShadowRoot +translation_of_original: Web/API/DocumentOrShadowRoot/nodesFromPoint +--- +
{{APIRef("DOM")}}{{Non-standard_header}}
+ +

{{domxref("DocumentOrShadowRoot")}} インターフェイスの nodesFromPoint() プロパティは、 (ビューポートからの相対で) 指定された座標のすべてのノードの配列を返します。

+ +

現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。

+ +

構文

+ +
var nodes = document.nodesFromPoint(x, y);
+ +

引数

+ +
+
x
+
点の水平座標。
+
y
+
点の垂直座標。
+
+ +

返値

+ +

{{domxref('Node')}} オブジェクトの配列。

+ +

例

+ +

HTML コンテンツ

+ +
<div>
+  <p>Some text</p>
+</div>
+<p>Nodes at point 30, 20:</p>
+<div id="output"></div>
+
+ +

JavaScript コンテンツ

+ +
var output = document.getElementById("output");
+if (document.nodesFromPoint) {
+  var nodes = document.nodesFromPoint(30, 20);
+  for(var i = 0; i < nodes.length; i++) {
+    output.textContent += nodes[i].localName;
+    if (i < nodes.length - 1) {
+      output.textContent += " < ";
+    }
+  }
+} else {
+  output.innerHTML = "<span style=\"color: red;\">" +
+     "Browser does not support <code>document.nodesFromPoint()</code>" +
+     "</span>";
+}
+ +

{{EmbedLiveSample('Example', '420', '120')}}

+ +

仕様書

+ +

現在はどの仕様書にも含まれていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("api.DocumentOrShadowRoot.nodesFromPoint")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/api/element/compositionstart_event/index.html b/files/ja/conflicting/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..e02e6c35ef --- /dev/null +++ b/files/ja/conflicting/web/api/element/compositionstart_event/index.html @@ -0,0 +1,80 @@ +--- +title: compositionstart +slug: Web/Events/compositionstart +tags: + - DOM + - Event + - Gecko DOM Reference + - events + - 要更新 +translation_of: Web/API/Element/compositionstart_event +translation_of_original: DOM/DOM_event_reference/compositionstart +--- +

DOM compositionstart イベントはユーザがIMEで未確定文字列の入力を開始した時のように、間接的なテキスト入力を開始した時に同期的に発生します。このイベントは {{ domxref("CompositionEvent") }} インターフェースを持ちます。

+
+ 注釈: このイベントはテキストが編集が始まる前に発生すべきではあるのですが、Gecko では編集を始めた直後に発生します。
+ +

仕様書

+

DOM Level3 Events

+

ブラウザ間の互換性

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本的なサポート +

{{ CompatVersionUnknown() }}

+

data 属性値は仕様と違っています。

+ 		{{ CompatGeckoDesktop("9.0") }} +

{{ CompatVersionUnknown() }}

+

data 属性値は常に空です。

+ 		{{ CompatNo() }}{{ CompatUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本的なサポート{{ CompatUnknown() }}{{ CompatGeckoMobile("9.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Gecko の動作メモ

+

DOM Level 3 仕様書では compositionstart はキャンセル可能と定義されています。しかし、 Gecko では現在のところ、キャンセルをできないようにしています。

+

Gecko はこのイベントをIMEが編集を開始した時に発生させます。また、プラットフォームによっては開始された編集を取り消すAPIがありません。さらに、Gecko は IME が実際に編集を開始するまで各キーイベントがそのきっかけとなるかどうか知ることができません。これらの理由から、compositionstart イベントの {{ domxref("event.preventDefault()") }} は Gecko では機能しません。

diff --git a/files/ja/conflicting/web/api/element/index.html b/files/ja/conflicting/web/api/element/index.html new file mode 100644 index 0000000000..859be5e107 --- /dev/null +++ b/files/ja/conflicting/web/api/element/index.html @@ -0,0 +1,50 @@ +--- +title: Slotable +slug: Web/API/Slotable +tags: + - API + - Interface + - Reference + - Slotable + - Web Components + - shadow dom +translation_of: Web/API/Slottable +translation_of_original: Web/API/Slotable +--- +

{{APIRef("Shadow DOM")}}

+ +

Slotable mixin は、ノードを {{htmlelement("slot")}} 要素のコンテンツにする機能を定義します。— 次の機能が {{domxref("Element")}} と {{domxref("Text")}} の両方に含まれています。

+ +

プロパティ

+ +
+
{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}
+
ノードが挿入されている {{htmlelement("slot")}} を返します。
+
+ +

メソッド

+ +

なし。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('DOM WHATWG','#slotable','Slotable')}}{{Spec2('DOM WHATWG')}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.Slotable")}}

diff --git a/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..605885878f --- /dev/null +++ b/files/ja/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,145 @@ +--- +title: FormData オブジェクトの利用 +slug: Web/Guide/Using_FormData_Objects +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +

FormData オブジェクトは、XMLHttpRequest を使用して送信するためのキーと値のペアのセットを収集可能にします。本来はフォームデータの送信に使用することを想定していましたが、キーのついたデータを伝送するためにフォームとは独立して使用することもできます。伝送されるデータは、フォームのエンコードタイプが multipart/form-data に設定されている場合に、{{domxref("HTMLFormElement.submit","submit()")}} メソッドで送信する際に使用するデータと同じ形式です。

+ +

スクラッチから FormData オブジェクトを作成する

+ +

以下のように FormData オブジェクトはあなた自身で作成でき、インスタンス化したら {{domxref("FormData.append","append()")}} メソッドを呼び出すことでフィールドに付加します:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // 数値 123456 は直ちに文字列 "123456" へ変換されます
+
+// HTML の file input でユーザが選択したファイル
+formData.append("userfile", fileInputElement.files[0]);
+
+// ファイルのような JavaScript オブジェクト
+var content = '<a id="a"><b id="b">hey!</b></a>'; // 新しいファイルのボディ...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
注記: フィールド "userfile" および "webmasterfile" はどちらも、ファイルを含んでいます。フィールド "accountnum" に与えた数値は FormData.append() メソッドにより直ちに文字列へ変換されます (フィールドの値として {{domxref("Blob")}}、{{domxref("File")}}、または文字列をとることができます: 値が Blob でもファイルでもない場合は、文字列に変換されます)。
+ +

このサンプルでは "username"、"accountnum"、"userfile"、"webmasterfile" という名前のフィールドの値を持つ FormData のインスタンスを作成しており、またフォームのデータを送信するために XMLHttpRequest の send() メソッドを使用しています。フィールド "webmasterfile" は {{domxref("Blob")}} です。Blob オブジェクトはファイルに似たオブジェクトで、イミュータブルな生デーです。Blob は必ずしも JavaScript ネイティブ形式のデータを表すとは限りません。{{domxref("File")}} インターフェイスは Blob を基にしており、blob の機能性を継承しつつユーザのシステムにあるファイル向けのサポートを拡張しています。Blob を作成するために、{{domxref("Blob.Blob","Blob()")}} コンストラクタを呼び出すことができます。

+ +

HTML フォームから FormData オブジェクトを取り出す

+ +

既存の {{HTMLElement("form")}} のデータを含む FormData オブジェクトを構築するために、FormData オブジェクトを作成する際にその form 要素を指定します:

+ +
var formData = new FormData(someFormElement);
+
+ +

例:

+ +
var formElement = document.querySelector("form");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

以下のように、FormData オブジェクトをフォームより取得してから送信するまでの間に、追加のデータを付加することもできます:

+ +
var formElement = document.querySelector("form");
+var formData = new FormData(formElement);
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

これにより、必ずしもユーザが編集可能である必要がない追加情報を含めるために、送信前にフォームデータを拡張することができます。

+ +

FormData オブジェクトを使用してファイルを送信する

+ +

FormData を使用してファイルを送信することもできます。type が "file" である {{HTMLElement("input")}} 要素を、{{htmlelement("form")}} に含めます:

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div></div>
+
+ +

そして、以下のようなコードを使用して送信できます:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var oOutput = document.querySelector("div"),
+      oData = new FormData(form);
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

注記: フォームへの参照を渡した場合は、open() の呼び出しで指定したメソッドよりもフォームで指定したメソッドを優先します。

+
+ +

以下のように、{{domxref("FormData")}} オブジェクトへ直接 {{domxref("File")}} や {{domxref("Blob")}} を追加することもできます:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

{{domxref("FormData.append","append()")}} メソッドを使用する際は省略可能な第 3 引数を使用して、Content-Disposition ヘッダに含めるファイル名を渡すことができます。これはサーバへ送信されます。ファイル名を指定しない (あるいは引数がサポートされない) 場合は、"blob" という名前を使用します。

+ +

正しいオプションを設定することで、jQuery と共に FormData を使用することもできます:

+ +
var fd = new FormData(document.querySelector("form"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // jQuery がデータを処理しないよう指定
+  contentType: false   // jQuery が contentType を設定しないよう指定
+});
+
+ +

FormData オブジェクトを使用せずに AJAX でフォームやファイルを送信する

+ +

FormData オブジェクトを使用せずに、AJAX でシリアライズや送信する方法を知りたい場合は、 こちらの節をご覧ください。

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..ac36968fa6 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,45 @@ +--- +title: window.onclick +slug: Web/API/Window/onclick +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onclick +translation_of_original: Web/API/Window/onclick +--- +
+ {{ApiRef}}
+

概要

+

カーソルがウィンドウ内にある時にユーザがマウスボタンをクリックした場合に呼び出されます。このイベントはどのマウスボタンを押下した場合でも発生します。イベントが発生した地点はイベントのプロパティから取得する事が出来ます。

+

構文

+
window.onclick =funcRef;
+
+ +

例

+
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>onclick のテスト</title>
+<script>
+function clickPage () {
+  alert("click event detected!");
+}
+
+window.onclick = clickPage;
+</script>
+</head>
+
+<body>
+
+<p>このページ上でマウスボタンをクリックしてみてください。</p>
+
+</body>
+</html>
+

ユーザが Window 内をクリックすると click イベントが発生します。

+

仕様

+

どの仕様書にも含まれていません。

diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..b5f947f8be --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,48 @@ +--- +title: window.onmousedown +slug: Web/API/Window/onmousedown +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmousedown +translation_of_original: Web/API/Window/onmousedown +--- +
+ {{ApiRef}}
+

概要

+

{{domxref("window")}} 上での mousedown イベントに対応するイベントハンドラです。

+

構文

+
window.onmousedown = funcRef;
+
+ +

例

+
window.onmousedown = doFunc;
+
+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8" />
+<title>onmousedown のテスト</title>
+
+<script>
+window.onmousedown = mousedown;
+
+function mousedown() {
+  alert("mousedown イベントが発生しました。");
+}
+</script>
+
+</head>
+<body>
+<p>ページ上でのマウスクリック（右クリック、左クリック、中ボタン）で  mousedown イベントが発生します。</p>
+</body>
+</html>
+
+

注記

+

ページ上の任意の場所でマウスボタンをクリックすると mousedown イベントが発生し、アラートを表示する関数が呼び出されます。

+

仕様

+

標準仕様書には含まれていません。

diff --git a/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..f7133126a9 --- /dev/null +++ b/files/ja/conflicting/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,57 @@ +--- +title: window.onmouseup +slug: Web/API/Window/onmouseup +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onmouseup +translation_of_original: Web/API/Window/onmouseup +--- +
+ {{ApiRef}}
+

概要

+

{{domxref("window")}} 上の mouseup イベントに対応するイベントハンドラです。

+

構文

+
window.onmouseup = funcRef;
+
+ +

例

+
function doFunc() {
+  alert("こんにちは！");
+}
+
+window.onmouseup = doFunc;
+
+
window.onmouseup = function() {
+  alert("こんばんは！");
+};
+
+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8" />
+<title>onmouseup のテスト</title>
+
+<script>
+window.onmouseup = mouseup;
+
+function mouseup() {
+  alert("mouseup イベントを検出!");
+}
+</script>
+
+</head>
+<body>
+<p>ページ上をマウスのボタンでクリックし、数秒押し続け、ボタンを放します。
+マウスのボタンを放すことで、 mouseup イベントが発生します。</p>
+</body>
+</html>
+
+

注記

+

mouseup イベントは、ドキュメント内のどこででも、ユーザがマウスの左ボタンを放すことによって発生します。

+

仕様

+

標準仕様書には含まれていません。

diff --git a/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..6b9a4be242 --- /dev/null +++ b/files/ja/conflicting/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,9 @@ +--- +title: DragDrop +slug: DragDrop +--- +

 

+ +

This page was auto-generated because a user created a sub-page to this page.

+ +

 

diff --git a/files/ja/conflicting/web/api/index.html b/files/ja/conflicting/web/api/index.html new file mode 100644 index 0000000000..e069431e6e --- /dev/null +++ b/files/ja/conflicting/web/api/index.html @@ -0,0 +1,58 @@ +--- +title: element.name +slug: Web/API/Element/name +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +

{{ ApiRef() }}

+

概要

+

name はDOM オブジェクトのname 属性を取得または設定します。

+

ただし、この属性が適用されるのは次の要素に限られます。

+

{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("option") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, {{ HTMLelement("textarea") }}.

+

name は、 {{ domxref("document.getElementsByName()") }} メソッドか、 form と form.elements のコレクションで使用することができます。 form や form.elements のコレクションで使われた場合、一つの要素かコレクションを返します。

+

構文

+
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var fControl = HTMLFormElement.elementName;
+var controlCollection = HTMLFormElement.elements.elementName;
+
+

例

+
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // form の最初の要素の参照を取得します。
+  var formElement = document.forms['formA'].elements[0];
+
+  // name 属性を設定します。
+  formElement.name = 'inputA';
+
+  // input の value を表示します。
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+

注記

+

Internet Explorer (IE)では、 {{ domxref("document.createElement()") }}を使って作成されたDOM オブジェクトの name 属性 は、設定および変更をすることができません。

+

仕様

+

W3C DOM 2 HTML Specification:

+ +

{{ languages( { "en" :"en/DOM/element.name", "fr": "fr/DOM/element.name", "pl": "pl/DOM/element.name" } ) }}

diff --git a/files/ja/conflicting/web/api/mediastream_recording_api/index.html b/files/ja/conflicting/web/api/mediastream_recording_api/index.html new file mode 100644 index 0000000000..a2e3ec8eaf --- /dev/null +++ b/files/ja/conflicting/web/api/mediastream_recording_api/index.html @@ -0,0 +1,187 @@ +--- +title: MediaRecorder API +slug: Web/API/MediaRecorder_API +translation_of: Web/API/MediaStream_Recording_API +translation_of_original: Web/API/MediaRecorder_API +--- +
+

MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 {{ domxref("Navigator.getUserMedia()") }} を単体で利用する際の利用が想定されています。

+
+ +

キーコンセプトと利用例

+ +

MediaRecorder を {{ domxref("Navigator.getUserMedia()") }} とともに利用することで、メディアデータを記録できます。単純には、 {{ domxref("MediaRecorder.start()") }} メソッドを呼ぶことで記録を開始できます。MediaStream の終了、もしくは {{ domxref("MediaRecorder.stop()") }} や{{ domxref("MediaRecorder.requestData()") }} の呼び出しによって記録用のデータが準備できた際には、dataavailable イベントが発生します。現在のところ、データはプラットホームの標準でエンコードされ、 dataavailableの data 属性に {{ domxref("Blob") }} として配置されます。

+ +

アプリは利用可能なエンコード方式を問い合わせ、その中から利用するものを選択することも可能です。またデータをより小さなバッファとして一定間隔で受け取ることもできます。間隔は {{ domxref("MediaRecorder.start()") }} を呼ぶ際に指定できます。

+ +
+

注意: MediaRecorder API の基本的な利用方法については MediaRecorder API の利用  をご覧ください。

+
+ +

MediaRecorder インタフェース

+ +
+
{{ domxref("MediaRecorder") }}
+
MediaRecorder API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 MediaRecorder() コンストラクタによって作成される。
+
{{ domxref("BlobEvent") }}
+
{{ domxref("MediaRecorder") }} によって記録されたメディアデータを保持する {{ domxref("Blob") }} オブジェクトへのアクセス手段を提供する。
+
+ +

例

+ +
if (navigator.getUserMedia) {
+   console.log('getUserMedia supported.');
+   navigator.getUserMedia (
+      // constraints - only audio needed for this app
+      {
+         audio: true
+      },
+
+      // Success callback
+      function(stream) {
+           var mediaRecorder = new MediaRecorder(stream);
+
+           record.onclick = function() {
+               mediaRecorder.start();
+               console.log("recorder started");
+           }
+
+           stop.onclick = function() {
+               mediaRecorder.stop();
+               console.log("recorder stopped");
+           }
+
+           mediaRecorder.ondataavailable = function(e) {
+             console.log("data available after MediaRecorder.stop() called.");
+
+             var audio = document.createElement('audio');
+             audio.setAttribute('controls', '');
+             var audioURL = window.URL.createObjectURL(e.data);
+             audio.src = audioURL;
+           }
+      },
+
+      // Error callback
+      function(err) {
+         console.log('The following gUM error occured: ' + err);
+      }
+   );
+} else {
+   console.log('getUserMedia not supported on your browser!');
+}
+ +
+

注意: このサンプルコードはWeb Dictaphoneのデモを参考にしています。コードを簡単にする為にいくつかの行は省略されています。完全なコードは 元ソース を参照して下さい。

+
+ +

ブラウザ互換性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{ CompatChrome(47.0) }}

+ 		{{ CompatGeckoDesktop("25.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{ CompatChrome(47.0) }}{{ CompatGeckoDesktop("25.0") }}1.3{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] The initial Firefox OS implementation only supported audio recording.

+ +

[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable experimental Web Platform features from the chrome://flags page.

+ +

[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('MediaStream Recording', '#MediaRecorderAPI')}}{{Spec2('MediaStream Recording')}}
+ +

関連項目

+ + + + diff --git a/files/ja/conflicting/web/api/mouseevent/button/index.html b/files/ja/conflicting/web/api/mouseevent/button/index.html new file mode 100644 index 0000000000..572f611ebc --- /dev/null +++ b/files/ja/conflicting/web/api/mouseevent/button/index.html @@ -0,0 +1,60 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/MouseEvent/button +translation_of_original: Web/API/event.button +--- +

{{ ApiRef() }}

+

Summary

+

イベントを発生させたマウスのボタンを示しています。

+

Syntax

+
var buttonCode = event.button;
+
+

state を変えたボタンを示す整数値を返します。

+ +

ボタンの順序はどのようにポインティングデバイスが設定されているかによります。

+

Example

+
<script type="text/javascript">
+
+function whichButton(e)
+{
+  // Handle different event models
+  var e = e || window.event;
+  var btnCode;
+
+  if ('object' == typeof e){
+    btnCode = e.button;
+
+    switch (btnCode){
+      case 0  : alert('Left button clicked');
+                break;
+      case 1  : alert('Middle button clicked');
+                break;
+      case 2  : alert('Right button clicked');
+                break;
+      default : alert('Unexpected code: ' + btnCode);
+    }
+  }
+}
+
+</script>
+
+<p onclick="whichButton(event);">Click with mouse...</p>
+
+
+

Notes

+

マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック（通常は左クリック）でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。

+

ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。

+

Specification

+

DOM 2 Events Specification: button

+
+  
+

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

diff --git a/files/ja/conflicting/web/api/navigator/index.html b/files/ja/conflicting/web/api/navigator/index.html new file mode 100644 index 0000000000..141fc19189 --- /dev/null +++ b/files/ja/conflicting/web/api/navigator/index.html @@ -0,0 +1,620 @@ +--- +title: navigator +slug: DOM_Client_Object_Cross-Reference/navigator +translation_of: Web/API/Navigator +translation_of_original: DOM_Client_Object_Cross-Reference/navigator +--- +

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ユーザエージェントプロパティ読み取り専用データ型デフォルト値
Gecko-1.0.1appCodeNametruestringMozilla
Gecko-1.4appCodeNametruestringMozilla
Gecko-1.7.8appCodeNametruestringMozilla
IE-6.0appCodeNametruestringMozilla
Opera-8.0appCodeNamefalsestringMozilla
IE-6.0appMinorVersiontruestring{{ mediawiki.external('hotfixes installed') }}
Opera-8.0appMinorVersionfalsestring +
Gecko-1.0.1appNametruestringNetscape
Gecko-1.4appNametruestringNetscape
Gecko-1.7.8appNametruestringNetscape
IE-6.0appNametruestringMicrosoft Internet Explorer
Opera-8.0appNamefalsestringMicrosoft Internet Explorer
Gecko-1.0.1appVersiontruestringdepends on Operating System
Gecko-1.4appVersiontruestring5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }};)
Gecko-1.7.8appVersiontruestring5.0 ({{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})
IE-6.0appVersiontruestring4.0 (compatible; MSIE 6.0; ...)
Opera-8.0appVersionfalsestring4.0 (compatible; MSIE 6.0; {{ mediawiki.external('platform') }}; {{ mediawiki.external('language') }})
IE-6.0browserLanguagetruestring{{ mediawiki.external('depends on language') }}
Opera-8.0browserLanguagefalsestringen
Gecko-1.0.1cookieEnabledtruebooleantrue
Gecko-1.4cookieEnabledtruebooleantrue
Gecko-1.7.8cookieEnabledtruebooleanfalse
IE-6.0cookieEnabledtruebooleantrue
Opera-8.0cookieEnabledfalsebooleantrue
IE-6.0cpuClasstruestringdepends on CPU
Gecko-1.0.1javaEnabledtruefunction +
Gecko-1.4javaEnabledtruefunction +
Gecko-1.7.8javaEnabledtruefunction +
IE-6.0javaEnabledtruefunction +
Opera-8.0javaEnabledtruefunction +
Gecko-1.0.1languagetruestringdepends on default language
Gecko-1.4languagetruestringen-US
Gecko-1.7.8languagetruestringen-US
Opera-8.0languagefalsestringen
Gecko-1.0.1mimeTypestrueobject{{ mediawiki.external('object MimeTypeArray') }}
Gecko-1.4mimeTypestrueobject{{ mediawiki.external('object MimeTypeArray') }}
Gecko-1.7.8mimeTypestrueobject{{ mediawiki.external('object MimeTypeArray') }}
IE-6.0mimeTypestrueobject +
Opera-8.0mimeTypesfalseobject{{ mediawiki.external('object MimeTypes') }}
IE-6.0onLinetruebooleantrue
IE-6.0opsProfiletrueobject +
Gecko-1.0.1oscputruestringdepends on Operating System
Gecko-1.4oscputruestring +
Gecko-1.7.8oscputruestring{{ mediawiki.external('depends on Operating System') }}
Gecko-1.0.1platformtruestringdepends on Operating System
Gecko-1.4platformtruestring +
Gecko-1.7.8platformtruestring{{ mediawiki.external('depends on Operating System') }}
IE-6.0platformtruestringdepends on Operating System
Opera-8.0platformfalsestring{{ mediawiki.external('depends on Operating System') }}
Gecko-1.0.1pluginstrueobject{{ mediawiki.external('object PluginArray') }}
Gecko-1.4pluginstrueobject{{ mediawiki.external('object PluginArray') }}
Gecko-1.7.8pluginstrueobject{{ mediawiki.external('object PluginArray') }}
IE-6.0pluginstrueobject +
Opera-8.0pluginsfalseobject{{ mediawiki.external('object PluginArray') }}
Gecko-1.0.1preferencetruefunction +
Gecko-1.4preferencetruefunction +
Gecko-1.7.8preferencetruefunction +
Gecko-1.0.1producttruestringGecko
Gecko-1.4producttruestringGecko
Gecko-1.7.8producttruestringGecko
Gecko-1.0.1productSubtruestringCCYYMMDD - build date
Gecko-1.4productSubtruestringCCYYMMDD
Gecko-1.7.8productSubtruestring20050511
Gecko-1.0.1securityPolicytruestring +
Gecko-1.4securityPolicytruestring +
Gecko-1.7.8securityPolicytruestring +
IE-6.0systemLanguagetruestringdepends on default langauge
Gecko-1.0.1taintEnabledtruefunction +
Gecko-1.4taintEnabledtruefunction +
Gecko-1.7.8taintEnabledtruefunctionfalse {{ Obsolete_inline() }}
IE-6.0taintEnabledtruefunction +
Opera-8.0taintEnabledtruefunction +
Gecko-1.0.1userAgenttruestringMozilla/5.0 (...; rv:1.0.1) Gecko/CCYYMMDD Vendor/version
Gecko-1.4userAgenttruestringMozilla/5.0 (...; rv:1.4) Gecko/20030624
Gecko-1.7.8userAgenttruestringMozilla/5.0 (...; rv:1.7.8) Gecko/20050511
IE-6.0userAgenttruestringMozilla/4.0 (compatible; MSIE 6.0; ...)
Opera-8.0userAgentfalsestringMozilla/4.0 (compatible; MSIE 6.0; ...) Opera 8.0
IE-6.0userLanguagetruestringdepends on default langauge
Opera-8.0userLanguagefalsestringen
IE-6.0userProfiletrueobject +
Gecko-1.0.1vendortruestringempty if Mozilla, otherwise matches Vendor in userAgent
Gecko-1.4vendortruestring +
Gecko-1.7.8vendortruestring +
Gecko-1.0.1vendorSubtruestringempty if Mozilla, otherwise matches version in userAgent
Gecko-1.4vendorSubtruestring +
Gecko-1.7.8vendorSubtruestring +
+{{ languages( { "en": "en/DOM_Client_Object_Cross-Reference/navigator" } ) }} diff --git a/files/ja/conflicting/web/api/node/index.html b/files/ja/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..1de7600c48 --- /dev/null +++ b/files/ja/conflicting/web/api/node/index.html @@ -0,0 +1,33 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - DOM + - DOM 3 + - Gecko + - Node +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +
{{ApiRef}} {{Fx_minversion_header("3")}} {{Non-standard_header}}
+ +

概要

+ +

baseURIObject は、文書の基底 URL (base URL) を示す {{Interface("nsIURI")}} オブジェクトを返します。

+ +

このプロパティは、HTML 、 XUL、 SVG、 MathML 等のノード全てに存在します。但し、このプロパティの使用を試みるスクリプトが UniversalXPConnect 特権を持つ場合に限ります。

+ +

基底 URL の詳細については {{domxref("Node.baseURI")}} の頁をご覧下さい。

+ +

構文

+ +
uriObj = element.baseURIObject
+
+ +

注記

+ +

このプロパティは読取専用です。書込を試みた場合、例外がスローされます。また、このプロパティには、特権を持つコードからのみアクセス可能です。

+ +

仕様書

+ +

標準仕様書には含まれません。

diff --git a/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..41547615f2 --- /dev/null +++ b/files/ja/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,21 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +
+ {{ApiRef}}{{Fx_minversion_header("3")}}{{Non-standard_header}}
+

概要

+

nodePrincipal は、ノードの現在のセキュリティ・コンテキストを表す {{interface("nsIPrincipal")}} オブジェクトを返します

+

{{note("このプロパティは、HTML 、XUL 、SVG 、MathML などの全てのノードに存在しますが、スクリプトが使用を試みた場合にのみ、 UniversalXPConnect 特権を持ちます。")}}

+

構文

+
principalObj = element.nodePrincipal
+

注記

+

このプロパティは読取専用です。書込みを試みた場合、例外がスローされます。また、このプロパティには特権コードからのみアクセス可能です。

+

仕様書

+

仕様書はありません。

diff --git a/files/ja/conflicting/web/api/url/index.html b/files/ja/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..ac758d1b3b --- /dev/null +++ b/files/ja/conflicting/web/api/url/index.html @@ -0,0 +1,101 @@ +--- +title: window.URL +slug: Web/API/Window/URL +tags: + - API + - DOM + - Property + - Reference + - Window +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +

{{ApiRef("Window")}}{{SeeCompatTable}}

+ +

Window.URL プロパティは、オブジェクト URL の作成や操作に用いる静的なメソッドを提供します。

+ +

{{AvailableInWorkers}}

+ +

構文

+ +

静的なメソッドの呼び出し:

+ +
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
+ +

新しいオブジェクトの構築:

+ +
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}初期定義。
+ +

ブラウザー実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
+ 7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
+
+ +

[1] Gecko 2 (Firefox 4) から Gecko 18 まで、Gecko は非標準の nsIDOMMozURLProperty 内部型を返していました。 実際には、何の違いもありません。

+ +

[2] 非標準の webkitURL という名前で実装されています。

diff --git a/files/ja/conflicting/web/api/web_storage_api/index.html b/files/ja/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..72c9a903e3 --- /dev/null +++ b/files/ja/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,14 @@ +--- +title: DOM Storage +slug: DOM/Storage +tags: + - DOM + - Gecko + - HTML5 + - JavaScript + - Offline web applications + - 要更新 +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +

REDIRECT Web Storage API

diff --git a/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..15dcbf30e3 --- /dev/null +++ b/files/ja/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,16 @@ +--- +title: Cross-Domain Textures +slug: Web/API/WebGL_API/Cross-Domain_Textures +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures +translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +--- +

WebGL のテクスチャの読み込みは、クロスドメインアクセス制御に従います。コンテンツで他のドメインからテクスチャを読み込むためには、CORS で許可を得る必要があります。CORS について詳しくは、HTTP access control をご覧ください。

+

CORS で許可された画像を WebGL のテクスチャとして使用する方法の説明を こちらの hacks.mozilla.org の記事 に掲載していますので、サンプル と合わせてご覧ください。

+

{{ gecko_callout_heading("8.0") }}

WebGL テクスチャ向けの CORS サポートと、画像要素の crossOrigin 属性が Gecko 8 {{ geckoRelease("8.0") }} で実装されました。

+
+

汚染された (書き込みのみ) 2D canvas を WebGL のテクスチャとして使用することはできません。2D {{ HTMLElement("canvas") }} が汚染されたとは例えば、クロスドメインの画像が canvas 上に描画された状態を指します。

+

{{ gecko_callout_heading("9.0") }}

Canvas 2D drawImage 向けの CORS サポートが Gecko 9 {{ geckoRelease("9.0") }} で実装されました。これは、CORS で許可されたクロスドメインの画像が 2D canvas を汚染しないので、2D canvas を WebGL のテクスチャ素材として使用することが可能であり続けることを意味します。

+
+

{{ gecko_callout_heading("12.0") }}

クロスドメインの動画に対する CORS サポートと、{{ HTMLElement("video") }} 要素のcrossorigin 属性を Gecko 12 {{ geckoRelease("12.0") }} で実装しました。

+
+

{{ languages( { "en": "en/WebGL/Cross-Domain_Textures"} ) }}

diff --git a/files/ja/conflicting/web/api/websockets_api/index.html b/files/ja/conflicting/web/api/websockets_api/index.html new file mode 100644 index 0000000000..d924ac2328 --- /dev/null +++ b/files/ja/conflicting/web/api/websockets_api/index.html @@ -0,0 +1,23 @@ +--- +title: WebSockets リファレンス +slug: Web/API/WebSockets_API/WebSockets_reference +tags: + - WebSocket + - WebSockets +translation_of: Web/API/WebSockets_API +translation_of_original: Web/API/WebSockets_API/WebSockets_reference +--- +
{{draft}}
+

以下のページは、WebSocket API のインタフェースに関する文書です。

+ + +
+
WebSocket
+
WebSocket のサーバに接続し、その接続上でデータを送受信するためのプライマリインターフェイス
+ +
CloseEvent
+
接続を閉じる際に WebSocket オブジェクトによって送信されるイベント
+ +
MessageEvent
+
サーバからのメッセージの受信時に Websocket オブジェクトによって送出されるイベント
+
diff --git a/files/ja/conflicting/web/api/window/moveto/index.html b/files/ja/conflicting/web/api/window/moveto/index.html new file mode 100644 index 0000000000..1510d2870e --- /dev/null +++ b/files/ja/conflicting/web/api/window/moveto/index.html @@ -0,0 +1,11 @@ +--- +title: Window.restore() +slug: Web/API/Window/restore +translation_of: Web/API/Window/moveTo +translation_of_original: Web/API/Window/restore +--- +

{{APIRef}}

+ +

このメソッドは現在動作していませんが、代わりに次のメソッドを利用することができます:

+ +

window.moveTo(window.screenX, window.screenY);

diff --git a/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..760541b9c5 --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,116 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..549969232f --- /dev/null +++ b/files/ja/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,119 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/ja/conflicting/web/api/xsltprocessor/index.html b/files/ja/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..ca2a707fb7 --- /dev/null +++ b/files/ja/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,12 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +

XSLTProcesor は、Mozilla の XSLT エンジンへのインタフェースを提供するオブジェクトです。特権のない JavaScript で利用可能です。

+ + diff --git a/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..1df9691cb1 --- /dev/null +++ b/files/ja/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,125 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile +translation_of: Web/API +translation_of_original: WebAPI +--- +

WebAPI はデバイス間の互換性を提供する機能一式であり、Web アプリやコンテンツがデバイスに保存されているデータ (カレンダーや連絡先など) やデバイスハードウェア (バッテリーの状態やデバイスのバイブレーションハードウェアなど) へアクセスできるようにする API を指す用語です。これらの API を追加することにより今日の Web ができることを増やすとともに、従来はプロプライエタリなプラットフォームでしかできなかったことに広がることを望んでいます。

+ +
+

注記: 各バッジの簡単な説明については、パッケージ型アプリのドキュメントをご覧ください。

+
+ +
+
+

コミュニケーション API

+ +
+
Network Information API
+
接続速度など、現在のネットワーク接続に関する基本的な情報を提供します。
+
Bluetooth {{NonStandardBadge}}
+
WebBluetooth API は、デバイスのBluetooth ハードウェアに対する低水準のアクセス手段を提供します。
+
Mobile Connection API {{NonStandardBadge}}
+
信号強度やオペレーター情報など、デバイスのセルラー接続に関する情報を公開します。
+
Network Stats API {{NonStandardBadge}}
+
データの使用状況をモニタリングして、そのデータを特権アプリケーションに公開します。
+
Telephony {{NonStandardBadge}}
+
アプリが電話を発着信したり、内蔵の電話機能のユーザインターフェイスを使用したりすることが可能です。
+
WebSMS {{NonStandardBadge}}
+
アプリに対して、デバイスに保存しているメッセージのアクセスや管理だけでなく、SMS テキストメッセージの送受信を可能にします。
+
WiFi Information API {{NonStandardBadge}}
+
信号強度、現在接続しているネットワークの名称、利用可能な WiFi ネットワークなどの情報を提供する特権 API です。
+
+ +

ハードウェアアクセス API

+ +
+
Ambient Light Sensor API
+
環境光センサーへのアクセス手段を提供します。これにより、アプリがデバイス付近の環境光のレベルを検出できます。
+
Battery Status API
+
バッテリーの残量や、デバイスが電源に接続されて充電中であるかといった情報を提供します。
+
Geolocation API
+
デバイスの物理的な位置に関する情報を提供します。
+
Pointer Lock API
+
アプリがマウスへのアクセスをロックして、絶対座標ではなく移動量の差分にアクセスできます。これはゲームに対して重要です。
+
Proximity API
+
ユーザの顔など、近くにある物体とデバイスとの近接度を検出できます。
+
Device Orientation API
+
デバイスの向きが変化したときに通知します。
+
Screen Orientation API
+
スクリーンの向きが変化したときに通知します。この API は、アプリにとってどの向きが望ましいかを示すことにも使用できます。
+
Vibration API
+
ゲームでの触覚フィードバックなどのために、アプリがデバイスのバイブレーションハードウェアを制御できます。これは通知のためのバイブレーションといった用途向けではありません。通知については Alarm API をご覧ください。
+
Camera API {{NonStandardBadge}}
+
デバイス内蔵のカメラを使用して、アプリが写真や動画を撮影できます。
+
Power Management API {{NonStandardBadge}}
+
アプリがスクリーン、CPU、デバイスの電源などをオン・オフできるようにします。また、リソースロックイベントのリスニングや調査もサポートします。
+
+ +

すべて見る...

+
+ +
+

データ管理 API

+ +
+
FileHandle API {{NonStandardBadge}}
+
ロック機能とともに、書き込み可能なファイルをサポートします。
+
IndexedDB
+
パフォーマンスが高い検索機能をサポートする、クライアントサイドの構造化データ用ストレージです。
+
Settings API {{NonStandardBadge}}
+
デバイスへ永続的に保存されるシステム全体の設定オプションを、アプリが調査したり変更したりすることが可能です。
+
+ +

その他の API

+ +
+
Alarm API
+
アプリが通知を予定することが可能です。特定の時刻にアプリを自動起動する機能もサポートします。
+
Simple Push API
+
プラットフォームが特定のアプリケーションに通知メッセージを送信できます。
+
Web Notifications
+
アプリケーションが、システムレベルで表示される通知を送信できます。
+
Apps API {{NonStandardBadge}}
+
Open WebApps API は、Web アプリのインストールや管理をサポートします。また、アプリが課金情報を調べることを可能にします。
+
Web Activities {{NonStandardBadge}}
+
あるアプリが別のアプリにアクティビティを渡すことができます。例えばあるアプリが別のアプリに対して、写真を選択 (または作成) して返すように依頼するでしょう。一般的に、ユーザはどのアクティビティにどのアプリを使用するかを設定できます。
+
WebPayment API {{NonStandardBadge}}
+
Web コンテンツが、仮想的な物品に対する支払いや払い戻しの処理を開始できます。
+
Browser API {{NonStandardBadge}}
+
Web 技術を完全に使用する Web ブラウザの構築をサポートします (要するに、ブラウザの中にあるブラウザです)。
+
Idle API
+
ユーザが能動的にデバイスを使用していないときに、アプリが通知を受け取れます。
+
Permissions API {{NonStandardBadge}}
+
集中化された場所で、アプリの許可設定を管理します。設定アプリで使用されます。
+
Time/Clock API {{NonStandardBadge}}
+
現在時刻の設定をサポートします。タイムゾーンは Settings API で設定します。
+
+ +

WebAPI コミュニティ

+ +

これらの API について支援が必要になったとしても、それらの使用方法について他の開発者と語る手段がいくつかあります。

+ +
    +
  • WebAPI フォーラムで相談する: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • +
  • WebAPI IRC チャンネルを訪問する: #webapi
    • +
+ +

ネチケットを忘れないでください...

+ + + +
    +
  • Document Object Model (DOM) は、HTML ドキュメントをツリーとして表現するものです。
    • +
  • JavaScript - Web 向けのスクリプト言語です。
    • +
  • Doc status: WebAPI のトピック一覧と、それらのドキュメント化の状況です。
    • +
+
+
+ +

 

diff --git a/files/ja/conflicting/web/css/@media/index.html b/files/ja/conflicting/web/css/@media/index.html new file mode 100644 index 0000000000..5bf2140f1d --- /dev/null +++ b/files/ja/conflicting/web/css/@media/index.html @@ -0,0 +1,5 @@ +--- +title: Media +slug: Web/CSS/Media +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html new file mode 100644 index 0000000000..87ca6f864c --- /dev/null +++ b/files/ja/conflicting/web/css/@media_dcb6ae28d731b140b24729ff941686e7/index.html @@ -0,0 +1,17 @@ +--- +title: Visual +slug: Web/CSS/Media/Visual +tags: + - CSS + - CSS Reference + - MDC Project + - NeedsContent +translation_of: Web/CSS/@media +translation_of_original: Web/CSS/media/visual +--- +
{{ CSSRef() }}
+

CSS 標準で定義されたメディアグループ。

+

{{ 英語版章題("See also") }}参照

+

W3C Media Types Spec

+

Interwiki Languages Links

+
{{ languages( { "en": "en/CSS/Media/Visual", "es": "es/CSS/Media/Visual", "fr": "fr/CSS/M\u00e9dia/Visuel", "pl": "pl/CSS/Media/Visual", "zh-cn": "cn/CSS/Media/Visual" } ) }}
diff --git a/files/ja/conflicting/web/css/@viewport/index.html b/files/ja/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..38f093896b --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport/index.html @@ -0,0 +1,86 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +
{{CSSRef}}
+ +

height は CSS の記述子で、ビューポートの {{cssxref("@viewport/min-height", "min-height")}} と {{cssxref("@viewport/max-height", "max-height")}} の両記述子を指定する一括指定記述子です。ビューポートの寸法を1つ指定すると、高さの最小値と最大値の両方を指定された値に設定します。

+ +

ビューポートのを2つ指定した場合は、1つ目の値は最小の高さを設定し、2つ目の値は最大の高さを設定します。

+ +

構文

+ +
/* 1つの値 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* Two values */
+height: 320px 200px;
+
+ +

値

+ +
+
auto
+
使用値は他の CSS 記述子の値から計算されます。
+
<length>
+
負の数ではない絶対的または相対的な長さです。
+
<percentage>
+
拡大率 1.0 の初期ビューポートの幅や高さに対する相対的なパーセント値で、それぞれ水平方向と垂直方向の長さを表します。負の数であってはいけません。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

高さの最小値と最大値の設定

+ +
@viewport {
+  height: 500px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.height")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..0e9f9079f0 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +
{{CSSRef}}
+ +

CSS の max-height 記述子は、{{cssxref("@viewport")}} @-規則で定義された文書のビューポートの最大の高さを指定します。

+ +

最大の高さの制約を考慮して、最初の高さは初期ビューポートの高さにできるだけ近い値に設定されます。

+ +

{{cssinfo}}

+ +

構文

+ +
/* Keyword value */
+max-height: auto;
+
+/* <length> values */
+max-height: 400px;
+max-height: 50em;
+max-height: 20cm;
+
+/* <percentage> value */
+max-height: 75%;
+ +

値

+ +
+
auto
+
使用する値は他の CSS 記述子の値から計算されます。
+
<length>
+
負ではない絶対値または相対値。
+
<percentage>
+
垂直方向の長さについて、初期ビューポートの高さである表示倍率1.0 に対するパーセンテージの値。値は負ではない必要があります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +
@viewport {
+  max-height: 600px;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}{{Spec2('CSS3 Device')}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("css.at-rules.viewport.max-height")}}

diff --git a/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..01b0ae54b2 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,71 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - '@viewport' + - CSS + - CSS 記述子 + - リファレンス +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +
{{CSSRef}}
+ +

CSS の min-zoom 記述子は、 {{cssxref("@viewport")}} @-規則で定義され、文書の最小表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより縮小することができません。

+ +

表示倍率 が 1.0 又は 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

{{cssinfo}}

+ +

構文

+ +
/* キーワード値 */
+min-zoom: auto;
+
+/* <number> 値 */
+min-zoom: 0.8;
+min-zoom: 2.0;
+
+/* <percentage> 値 */
+min-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の下限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の下限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の下限です。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("css.at-rules.viewport.min-zoom")}}

diff --git a/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..97814ca702 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,78 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - CSS 記述子 + - Experimental + - Reference + - モバイル + - 画面レイアウト +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

CSS の viewport-fit {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "記述子")}}は、文書のビューポートが画面をどのように埋めるかを制御します。

+ +

構文

+ +
/* キーワード値 */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

値

+ +
+
auto
+
この値は初期状態のレイアウトビューポートに影響せず、ウェブページ全体が見えます。
+
contain
+
ビューポートは、画面内に内接する最も大きな長方形に合うように拡大縮小されます。
+
cover
+
ビューポートは、端末の画面の埋め尽くすように拡大縮小されます。これは重要なコンテンツが画面の外に出ないことを保証するために、安全領域差し込み変数を使用するために強く推奨されます。
+
+ +

形式文法

+ +
auto | contain | cover
+
+ + + +

アクセシビリティの考慮事項

+ +

viewport-fit 記述子を使用するとき、すべての端末の画面が長方形であるとは限らなないので、安全領域差し込み変数を使用してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..483e5c214f --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,89 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +
{{CSSRef}}
+ +

min-zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義され、文書の最大表示倍率を設定します。ブラウザーは自動的にもユーザーのリクエストでも、これより拡大することができません。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+max-zoom: auto;
+
+/* <number> 値 */
+max-zoom: 0.8;
+max-zoom: 2.0;
+
+/* <percentage> 値 */
+max-zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の上限を設定します。
+
{{cssxref("<number>")}}
+
非負の数値で、表示倍率の上限です。
+
{{cssxref("<percentage>")}}
+
非負のパーセント値で、表示倍率の上限です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

max-zoom の設定

+ +
@viewport {
+  max-zoom: 1.5;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.max-zoom")}}

+ +

See also

+ + diff --git a/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..f05447a501 --- /dev/null +++ b/files/ja/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,91 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - '@viewport' + - At-rule descriptor + - CSS + - CSS Descriptor + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +
{{CSSRef}}
+ +

zoom は CSS の記述子で、 {{cssxref("@viewport")}} アット規則で定義された文書の表示倍率の初期値を設定します。

+ +

表示倍率 が 1.0 または 100% が、拡大縮小なしに対応します。より大きい値は拡大、より小さい値は縮小です。

+ +

構文

+ +
/* キーワード値 */
+zoom: auto;
+
+/* <number> 値 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> 値 */
+zoom: 150%;
+
+ +

値

+ +
+
auto
+
{{glossary("user agent", "ユーザーエージェント")}}が文書の表示倍率の初期値を設定します。ユーザーエージェントは表示倍率を決めるために、文書が表示されるキャンバス領域の寸法を使用することがあります。
+
{{cssxref("<number>")}}
+
表示倍率として使われる非負の数値です。
+
{{cssxref("<percentage>")}}
+
表示倍率として使われる非負のパーセント値です。
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

ビューポートの zoom 係数の設定

+ +
@viewport {
+  zoom: 2.0;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.at-rules.viewport.zoom")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..f9e7367a09 --- /dev/null +++ b/files/ja/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,59 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-moz-placeholder' +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ gecko_minversion_header("2.0") }}

+ +
Note: The :-moz-placeholder pseudo-class is deprecated in Firefox 19 in favor of the {{ cssxref('::-moz-placeholder') }} pseudo-element.
+ +
Note: The CSSWG have decided to introduce :placeholder-shown. This functionality will be reintroduced in Gecko at some point in the future, unprefixed and under the new name.  {{bug(1069012)}}
+ +

概要

+ +

:-moz-placeholder はプレースホルダを表示するフォーム要素にマッチします。この擬似クラスにより、Web 開発者やテーマデザイナーがプレースホルダの表示 (デフォルトは薄い灰色) をカスタマイズすることができます。

+ +

たとえば、フォームフィールドの背景色をプレースホルダの色と似た色に変更した場合、プレースホルダが目立たなくなりうまく機能しません。しかし、この擬似クラスを利用してプレースホルダの文字色を変更すればいいのです。

+ +

例

+ +

この例はプレースホルダの文字色を緑色に変更しています。

+ +
<!doctype html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

View this example live.

+ +

Bugzilla

+ +

{{ Bug(457801) }}

+ +

注記

+ +
Note: このページは Gecko 1.9 {{ geckoRelease("1.9") }} のリリース時に、全く異なる目的 から間違って作られていました。
+ +

参考

+ + diff --git a/files/ja/conflicting/web/css/box-ordinal-group/index.html b/files/ja/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..147bdbd9b4 --- /dev/null +++ b/files/ja/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Mozilla 拡張 + - Non-standard + - Reference + - フレックスボックス +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}{{warning("これは CSS フレックスボックスレイアウトモジュールの初期の草稿にあったプロパティであり、その後の草稿で置き換えられました。")}}

+ +

このプロパティの代わりに何を使用するべきかについての詳細情報は フレックスボックスをご覧ください。

+ +

概要

+ +

要素が属する序数グループを示します。低い序数グループを持つ要素は、より高い序数を有するものの前に表示されます。

+ +

値

+ +

値はゼロより大きい整数でなければなりません。このプロパティの既定値は1です。

+ +

例

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..fa7ce58677 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,103 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/Scaling_background_images +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +translation_of_original: Web/CSS/CSS_Background_and_Borders/Scaling_background_images +--- +

CSS の {{cssxref("background-size")}} プロパティによって、フルサイズの画像がタイル状に配置されるという既定の動作の代わりに、背景画像のサイズを調節することができるようになります。画像を望むように拡大または縮小することができます。

+ +

大きな画像をタイル状に配置する

+ +

1233 × 1233 の大きな Firefox のロゴ画像を考えてみましょう。 300 × 300 四方に、この画像の 4 つのコピーをタイル状に配置したい（ぞっとするほど悪いサイトデザインを含むいくつかの理由で）場合、結果としてこうなります。

+ +

screenshot1.png

+ +

これは以下の CSS を使うことで達成されます。

+ +
.square {
+  width: 300px;
+  height: 300px;
+  background-image: url(fxlogo.png);
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+  background-size: 150px;
+}
+
+ +

もし、とても古いブラウザをターゲットにするのであれば、いくつかの接頭辞を付したバージョンを加えることを考えるかもしれませんが、もう {{cssxref("background-size")}} に接頭辞を付すことは必要ありません。

+ +

画像を引き伸ばす

+ +

以下のように、画像の水平方向と垂直方向の両方のサイズを記述することもできます。

+ +
background-size: 300px 150px;
+
+ +

その結果はこのようになります。

+ +

screenshot3.png

+ +

画像を拡大する

+ +

この範囲のもう 1 つの終端では、画像を背景の中で拡大することができます。 ここで、300 × 300 ピクセルに 16 × 16 ピクセルの favicon を拡大します。

+ +

screenshot2.png

+ +
.square2 {
+  width: 300px;
+  height: 300px;
+  background-image: url(favicon.png);
+  background-size: 300px;
+  border: solid 2px;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

ご覧のとおり、 CSS は実際には本質的に同一で、画像ファイル名は安全です。

+ +

特別な値の「contain」と「cover」

+ +

CSS の {{cssxref("background-size")}} には、 {{cssxref("<length>")}} の値の他に、 contain と cover の 2 つの特別なサイズの値が提示されています。これらについて見てみましょう。

+ +

contain

+ +

contain は、コンテナとなるボックスのサイズにかかわらず、背景画像は　コンテナの対応する辺の長さを超えないように、可能な限り大きくなるようにそれぞれの辺を拡大縮小されるべきことを指定します。下記の実演中の例からこのことを確認するため、 Firefox 3.6 以降のような、背景画像の拡大縮小に対応したブラウザを使って、ウィンドウのサイズを変えてみて下さい。

+ +
+

このウィンドウのサイズを変えて、何が起こるかを見て下さい。

+
+ +

上の例の CSS は以下のようなものです。

+ +
width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: contain;
+border: solid 2px;
+
+ +

cover

+ +

cover は、背景画像の両方の寸法が、コンテナの対応するサイズより大きくなる、または同じになることを確保しつつ、背景画像を可能な限り小さい大きさになるべきことを指定します。

+ +
+

このウィンドウのサイズを変えて、何が起こるかを見て下さい。

+
+ +

この例では以下の CSS を使用しています。

+ +
width: 100%;
+height: 200px;
+background-image: url(https://developer.mozilla.org/files/2917/fxlogo.png);
+background-size: cover;
+border: solid 2px;
+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..4c7327f6c1 --- /dev/null +++ b/files/ja/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,74 @@ +--- +title: CSS での複数の背景の利用方法 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

CSS3 より、要素に複数の背景を適用できるようになりました。複数の背景は、最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。

+ +

複数の背景は、以下の様に各レイヤーをカンマで区切る事だけの簡単な構文で記述可能です。

+ +
.myclass {
+  background: 背景1, 背景2, ..., 背景N;
+}
+ +

この方法は、ショートハンドプロパティの {{cssxref("background")}} でも、{{cssxref("background-color")}} 以外の個別のプロパティ（※{{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}） のどちらでも利用可能です。

+ +

例

+ +

次の例では、上位レイヤーから

+ +
    +
  1. Firefox のロゴ
    2. +
  2. 線形グラデーション
    3. +
  3. 花の画像
    4. +
+ +

の順で、3 つの背景が重ねられています。記述量が多くなる場合は、例の様にカンマ毎に改行するとコードが読みやすくなるかもしれません。

+ +
.multi_bg_example {
+  background-image:
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png"), /* 最前面の背景レイヤーの背景画像 */
+    linear-gradient( to right, rgba(255,255,255,0),  #fff ),
+    url("http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg");
+
+  background-repeat:
+    no-repeat, /* 最前面の背景レイヤーに対応 */
+	no-repeat,
+	repeat;
+
+  background-position:
+    bottom right, /* 最前面の背景レイヤーに対応 */
+	left,
+	right;
+}
+ + + + + + + + + + +
スクリーンショット
css_multibg.png
+ +

スクリーンショットで表示されているとおり、最初に記述した Firefox のアイコン画像が最前面、次にグラデーション、最後に花の画像が重ねて描画されます。 {{cssxref("background-repeat")}} と {{cssxref("background-position")}} に指定した複数の値は、それぞれ background-image で記述した各値に対し、同じ順番で適用されます。つまり、background-image の最初の値として指定した FireFox のアイコンの画像に対し、
+ {{cssxref("background-repeat")}} は "bottom left"、
+ {{cssxref("background-position")}} は "no-repeat"
+ が適用され、その結果、Firefox のアイコンの画像は、最前面のレイヤーの右下に、ひとつだけ 表示されるのです。

+ +

関連記事

+ + diff --git a/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..fc56bb1de6 --- /dev/null +++ b/files/ja/conflicting/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,47 @@ +--- +title: cursor のプロパティーに URL 値を使用する +slug: Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +--- +

 

+

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) では、CSS2 cursor プロパティー で URL 値が使用できます。これにより、自由な画像 — Gecko がサポートする画像形式なら — がマウスカーソルとして利用できます。

+

構文

+

このプロパティーの記述方式は以下のようになります。

+
cursor: [<url>,]* keyword;
+
+

これは、カンマ区切りのゼロ個以上の URL が指定可能で、その後ろに CSS 規格で定義されている auto や pointer といったキーワードを一つ指定する必要があります。

+

たとえば、以下のような指定は可能です :

+
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+

この場合、最初に foo.cur を読み込もうとします。もし、存在しないかその他の理由により利用できない場合、bar.gif を試しますが、両方利用できない場合は auto が利用されます。

+

cursor 値での CSS3 書式 のサポートが Gecko 1.8beta3 で付け加えられました。(そのため、Firefox 1.5 でも動作します) このことにより、カーソルのホットスポットの座標を指定できるようになります。もし、指定されていなければ、ホットスポットの座標はファイルそのもの (CUR もしくは XBM ファイル) か、画像の左上端に設定されます。CSS3 における書式のサンプルは

+
cursor: url(foo.png) 4 12, auto;
+
+

となります。

+

最初の値が x 座標、二つ目の値が y 座標になります。サンプルではホットスポットが、左上端 (0,0) に対して (4,12) のピクセルに設定されます。

+

制限事項

+

Gecko でサポートされているすべての画像形式が利用可能です。これは、BMP、JPG、CUR、GIF などが利用できることを意味します。しかしながら、ANI はサポートされていません。また、アニメーション GIF を指定した場合でも、カーソルはアニメーションを行いません。この制限は、将来のリリースで除かれる可能性があります。

+

Gecko それ自体には、カーソルサイズの制限はありません。しかしながら、OS やプラットフォームの互換性のために、最大サイズを 32x32 にするのがよいでしょう。特に、このサイズより大きなカーソルは、Windows 9x (95, 98, Me) では動作しません。

+

半透明カーソルは、Windows XP より前ではサポートされていません。これは、OS の制限です。透明度はすべてのプラットフォームで動作します。

+

Windows、OS/2 と Linux (GTK+ 2.4 以上の場合) での Mozilla リリースでのみ、カーソルにURL 値が利用できます。その他のプラットフォームでのサポートは、将来のリリースで加えられる予定です。(Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

ほかのブラウザとの互換性

+

Microsoft Internet Explorer でも cursor プロパティーに URL 値を利用できます。しかしながら、CUR と ANI フォーマットのみをサポートしています。

+

また、cursor プロパティーの書式の制限もゆるいです。これは、

+
cursor: url(foo.cur);
+
+

または:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

なども、MSIE では動作することを意味しますが、Geckoブラウザでは動作しません。Gecko との互換性と CSS 規格との整合性からも、URI リストを最初に、最後にキーワード値を一つ入れるべきです。

+
+
+ + To-do: MSIE が CSS3 ホットスポット座標について行うことについて記述 +
+
+
+  
diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,368 @@ +--- +title: クロスブラウザのフレックスボックスのミックスイン +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - CSS フレックスボックス + - ミックスイン + - リファレンス +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +
{{cssref}}
+ +

この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。

+ +

このセットは次のものを使用します。

+ + + +

原文:

+ + + +

参考文献:

+ + + +
メモ: ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。
+ +

フレックスボックスのコンテナー

+ +

{{cssxref("display")}} プロパティに flex の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 inline-flex の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。

+ + + +
@mixin flexbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+//Using this mixin
+%flexbox { @include flexbox; }
+ +
+
@mixin inline-flex {
+  display: -webkit-inline-box;
+  display: -moz-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+%inline-flex { @include inline-flex; }
+
+ +

フレックスボックスの方向

+ +

The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.

+ + + +
+
@mixin flex-direction($value: row) {
+  @if $value == row-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: reverse;
+    -moz-box-orient: horizontal;
+  } @else if $value == column {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: normal;
+    -moz-box-orient: vertical;
+  } @else if $value == column-reverse {
+    -webkit-box-direction: reverse;
+    -webkit-box-orient: vertical;
+    -moz-box-direction: reverse;
+    -moz-box-orient: vertical;
+  } @else {
+    -webkit-box-direction: normal;
+    -webkit-box-orient: horizontal;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+  }
+  -webkit-flex-direction: $value;
+  -ms-flex-direction: $value;
+  flex-direction: $value;
+}
+
+// Shorter version:
+@mixin flex-dir($args...) { @include flex-direction($args...); }
+
+ +

フレックスボックスの折り返し

+ +

The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.

+ + + +
+
@mixin flex-wrap($value: nowrap) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-wrap: $value;
+  @if $value == nowrap {
+    -ms-flex-wrap: none;
+  } @else {
+    -ms-flex-wrap: $value;
+  }
+  flex-wrap: $value;
+}
+
+ +

フレックスボックスのフロー (一括指定)

+ +

The {{cssxref("flex-flow")}} property is shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container's main and cross axes.

+ + + +
+
@mixin flex-flow($values: (row nowrap)) {
+  // No Webkit/FF Box fallback.
+  -webkit-flex-flow: $values;
+  -ms-flex-flow: $values;
+  flex-flow: $values;
+}
+
+ +

フレックスボックスの順序

+ +

The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.

+ + + +
+
@mixin order($int: 0) {
+  -webkit-box-ordinal-group: $int + 1;
+  -moz-box-ordinal-group: $int + 1;
+  -webkit-order: $int;
+  -ms-flex-order: $int;
+  order: $int;
+}
+
+ +

フレックスボックスの伸長

+ +

The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.

+ + + +
+
@mixin flex-grow($int: 1) {
+  -webkit-box-flex: $int;
+  -moz-box-flex: $int;
+  -webkit-flex-grow: $int;
+  -ms-flex: $int;
+  flex-grow: $int;
+}
+
+ +

フレックスボックスの縮小

+ +

The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.

+ + + +
+
@mixin flex-shrink($int: 0) {
+  -webkit-flex-shrink: $int;
+  -moz-flex-shrink: $int;
+  -ms-flex: $int;
+  flex-shrink: $int;
+}
+
+ +

フレックスボックスの basis

+ +

The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.

+ + + +
+
@mixin flex-basis($value: auto) {
+  -webkit-flex-basis: $value;
+  flex-basis: $value;
+}
+
+ +

フレックスボックスの "flex" (一括指定)

+ +

The {{cssxref("flex")}} property specifies the components of a flexible length; flex-grow factor, flex-shrink factor, and the flex-basis. When an element is a flex item, flex is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, flex has no effect.

+ + + +
+
@mixin flex($fg: 1, $fs: 0, $fb: auto) {
+
+  // Set a variable to be used by box-flex properties
+  $fg-boxflex: $fg;
+
+  // Box-Flex only supports a flex-grow value so lets grab the
+  // first item in the list and just return that.
+  @if type-of($fg) == 'list' {
+    $fg-boxflex: nth($fg, 1);
+  }
+
+  -webkit-box: $fg-boxflex;
+  -moz-box: $fg-boxflex;
+  -webkit-flex: $fg $fs $fb;
+  -ms-flexbox: $fg $fs $fb;
+  flex: $fg $fs $fb;
+}
+
+ +

フレックスボックスのコンテンツの位置揃え

+ +

The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

+ +
+

Note: space-* values not supported in older syntaxes.

+
+ + + +
+
@mixin justify-content($value: flex-start) {
+  @if $value == flex-start {
+    -webkit-box-pack: start;
+    -moz-box-pack: start;
+    -ms-flex-pack: start;
+  } @else if $value == flex-end {
+    -webkit-box-pack: end;
+    -moz-box-pack: end;
+    -ms-flex-pack: end;
+  } @else if $value == space-between {
+    -webkit-box-pack: justify;
+    -moz-box-pack: justify;
+    -ms-flex-pack: justify;
+  } @else if $value == space-around {
+    -ms-flex-pack: distribute;
+  } @else {
+    -webkit-box-pack: $value;
+    -moz-box-pack: $value;
+    -ms-flex-pack: $value;
+  }
+  -webkit-justify-content: $value;
+  justify-content: $value;
+}
+  // Shorter version:
+  @mixin flex-just($args...) { @include justify-content($args...); }
+
+ +

フレックスボックスの項目の配置

+ +

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, align-self always matches the value of align-items on their associated flex container.)

+ + + +
+
@mixin align-items($value: stretch) {
+  @if $value == flex-start {
+    -webkit-box-align: start;
+    -moz-box-align: start;
+    -ms-flex-align: start;
+  } @else if $value == flex-end {
+    -webkit-box-align: end;
+    -moz-box-align: end;
+    -ms-flex-align: end;
+  } @else {
+    -webkit-box-align: $value;
+    -moz-box-align: $value;
+    -ms-flex-align: $value;
+  }
+  -webkit-align-items: $value;
+  align-items: $value;
+}
+
+ +

フレックスボックスの自己配置

+ +

Values: auto (default) | flex-start | flex-end | center | baseline | stretch

+ +

Spec: https://drafts.csswg.org/css-flexbox/#align-items-property

+ +
+
@mixin align-self($value: auto) {
+  // No Webkit Box Fallback.
+  -webkit-align-self: $value;
+  @if $value == flex-start {
+    -ms-flex-item-align: start;
+  } @else if $value == flex-end {
+    -ms-flex-item-align: end;
+  } @else {
+    -ms-flex-item-align: $value;
+  }
+  align-self: $value;
+}
+
+ +

フレックスボックスのコンテンツの配置

+ +

The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.

+ + + +
+
@mixin align-content($value: stretch) {
+  // No Webkit Box Fallback.
+  -webkit-align-content: $value;
+  @if $value == flex-start {
+    -ms-flex-line-pack: start;
+  } @else if $value == flex-end {
+    -ms-flex-line-pack: end;
+  } @else {
+    -ms-flex-line-pack: $value;
+  }
+  align-content: $value;
+}
+
diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..4458dddff2 --- /dev/null +++ b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,191 @@ +--- +title: Web アプリケーションのレイアウトに flexbox を使用する +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - Advanced + - CSS + - CSS Flexible Boxes + - Example + - Guide + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +
{{CSSRef}}
+ +

flexbox は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、絶対位置指定、JavaScript による細工をなくして、数行の CSS だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:

+ + + +

この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで flexbox を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、CSS flexible box の使用に関する、より一般的なガイドをご覧ください。

+ +

基本

+ +

任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに flex を、また {{cssxref("flex-flow")}} に row (要素を水平に並べたい場合) または column (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 wrap も指定します。

+ +

そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:

+ + + +

もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。

+ +

ページ内の中央に要素を配置する

+ +

このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。

+ +

CSS コンテンツ

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.horizontal-box {
+  display: flex;
+  flex-flow: row;
+}
+.spacer {
+  flex: auto;
+  background-color: black;
+}
+.centered-element {
+  flex: none;
+  background-color: white;
+}
+
+ +

HTML コンテンツ

+ +
<div class="vertical-box">
+  <div class="spacer"></div>
+  <div class="centered-element horizontal-box">
+    <div class="spacer"></div>
+    <div class="centered-element">Centered content</div>
+     <div class="spacer"></div>
+  </div>
+  <div class="spacer"></div>
+</div>
+
+ +

結果

+ +

{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}

+ +

複数のコンテナを垂直方向に並べる

+ +

ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを auto に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを none にすることで実現できます。

+ +

CSS コンテンツ

+ +
.vertical-box {
+  display: flex;
+  height: 400px;
+  width: 400px;
+  flex-flow: column;
+}
+.fixed-size {
+  flex: none;
+  height: 30px;
+  background-color: black;
+  text-align: center;
+}
+.flexible-size {
+  flex: auto;
+  background-color: white;
+}
+
+ +

HTML コンテンツ

+ +
<div id="document" class="vertical-box">
+  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
+  <div id="flexible-content" class="flexible-size"></div>
+  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
+</div>
+
+ +

Javascript コンテンツ

+ +
var height = 400;
+document.getElementById('increase-size').onclick=function() {
+  height += 10;
+  if (height > 500) height = 500;
+  document.getElementById('document').style.height = (height + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  height -= 10;
+  if (height < 300) height = 300;
+  document.getElementById('document').style.height = (height + "px");
+}
+ +

結果

+ +

{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}

+ +

この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。

+ +

折り返される水平方向のコンテナを作成する

+ +

スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 wrap を追加すると実現できます。

+ +

CSS コンテンツ

+ +
.horizontal-container {
+  display: flex;
+  width: 300px;
+  flex-flow: row wrap;
+}
+.fixed-size {
+  flex: none;
+  width: 100px;
+  background-color: black;
+  color: white;
+  text-align: center;
+}
+
+ +

HTML コンテンツ

+ +
<div id="container" class="horizontal-container">
+  <div class="fixed-size">Element 1</div>
+  <div class="fixed-size">Element 2</div>
+  <div class="fixed-size">Element 3</div>
+</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
+
+ +

Javascript コンテンツ

+ +
var width = 300;
+
+document.getElementById('increase-size').onclick=function() {
+  width += 100;
+  if (width > 300) width = 300;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+document.getElementById('decrease-size').onclick=function() {
+  width -= 100;
+  if (width < 100) width = 100;
+  document.getElementById('container').style.width = (width + "px");
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/float/index.html b/files/ja/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..562347725e --- /dev/null +++ b/files/ja/conflicting/web/css/float/index.html @@ -0,0 +1,32 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +
+ {{CSSRef()}}
+

概要

+

none キーワードは、多くの CSS プロパティで使用される共通の値です。デフォルト値であることが多いですが、そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{ Cssxref("normal") }} が有ります。

+

none 値が使用可能な CSS プロパティ

+ diff --git a/files/ja/conflicting/web/css/font-variant/index.html b/files/ja/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..4f1a3acf6b --- /dev/null +++ b/files/ja/conflicting/web/css/font-variant/index.html @@ -0,0 +1,37 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS Reference +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +
+ {{CSSRef}}
+

概要

+

normal は幾つかの CSS プロパティで使用される一般的な値です。そのプロパティの「標準値」を意味し、多くの場合は初期値となります。よく似た値として {{Cssxref("none")}} が有ります。

+

normal が使用可能な CSS プロパティ

+
+
+ {{Cssxref("font-weight")}}
+
+ normal を指定した場合、font-weight プロパティの基準値（400）と同等となります。太字にも細字にもなりません。
+
+ {{Cssxref("font-style")}}
+
+ normal を指定した場合、italic や oblique でない、通常のスタイルで文字がレンダリングされます。
+
+ {{Cssxref("word-spacing")}}
+
+ normal を指定した場合、フォントの標準的な字間で文字がレンダリングされます。
+
+

他にも、以下の様なプロパティ等で normal が指定可能です。

+ diff --git a/files/ja/conflicting/web/css/index.html b/files/ja/conflicting/web/css/index.html new file mode 100644 index 0000000000..7eed5bdf59 --- /dev/null +++ b/files/ja/conflicting/web/css/index.html @@ -0,0 +1,31 @@ +--- +title: CSS-2 Quick Reference +slug: CSS-2_Quick_Reference +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS +translation_of_original: CSS-2_Quick_Reference +--- +

この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +

<big>CSS-2 クイックリファレンス(一括)</big> +

さらに詳しい情報とブラウザのサポート: +

<big> +セレクタ
+ボックスモデル
+視覚的構成モデル
+視覚的構成の詳細
+視覚効果
+リスト
+カラーと背景
+フォント
+テキスト
+表組み
+ユーザインタフェース
+単位
+</big> +

+
+
+{{ languages( { "en": "en/CSS-2_Quick_Reference", "fr": "fr/Pr\u00e9cis_CSS_2", "pl": "pl/Szybka_dokumentacja_CSS-2" } ) }} diff --git a/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..961536b070 --- /dev/null +++ b/files/ja/conflicting/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,412 @@ +--- +title: メディアクエリ +slug: Web/Guide/CSS/Media_queries +tags: + - CSS + - CSS Reference +--- +

{{ gecko_minversion_header("1.9.1") }}

+ +

CSS 3 ではメディア依存のスタイルシートのサポートが強化され、よりメディアの特性に適したスタイルシートを適用できます。メディアクエリは、メディアタイプと、メディア特性を利用してスタイルシートの適用条件を決定 (limits the style sheets' scope) する一つ以上の式からなります。メディア特性には、メディアの幅と高さ、色数などがあります。メディアクエリにより、コンテンツそのものを変更せずに、出力デバイスに合わせてコンテンツを表現することができます。

+ +

構文

+ +

メディアクエリは、メディアタイプと、メディア特性を必要とする一つ以上の式からなります。この式の結果は、true または false になります。クエリの結果は、ドキュメントが表示されるデバイスの種類がメディアクエリで指定されたメディアタイプにマッチし、さらにメディアクエリのすべての式が true のとき、true になります。

+ +

論理演算子

+ +

論理演算子を使用して複雑なメディアクエリを記述できます。論理演算子には、not および and, only があります。

+ +

また、複数のメディアクエリをカンマ区切りのリスト形式で併記することもできます。リスト内のいずれかのメディアクエリが true であれば、関連付けられたスタイルシートが適用されます。これは論理演算子の "or" と等価です。

+ +

not キーワードは、クエリの結果を否定します。例えば、"all and (not color)" のクエリは、モノクロデバイスではメディアタイプに関係なく true になります。

+ +

only キーワードは、メディアクエリに対応していない古いブラウザからスタイルシートを隠します:

+ +
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+
+ +

擬似 BNF (この表記を好む方のために)

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

メディアクエリは大文字と小文字を区別しません。メディアクエリに書かれた未知のメディアタイプは常に false になります。

+ +
注記: 式 (expression) の前後には括弧が必要です。括弧を書かないとエラーになります。
+ +

メディア特性

+ +

ほとんどのメディア特性には、特性が式の値 "以上" または "以下" であることを明示的に制約する "min-" または "max-" 前置詞を付けられます。これは、HTML や XML に干渉する "<" および ">" 記号の使用を避けるためのものです。値を指定せずにメディア特性を使用した場合、特性の値が 0 でなくても、式の結果は true になります。

+ +
注記: メディア特性がブラウザを実行中のデバイスに適用されない場合、メディア特性に記述された式の値は常に false になります。例えば、音声デバイスに対するアスペクト比の問い合わせは常に false になります。
+ +

color

+ +

値: {{cssxref("<color>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラーコンポーネントあたりのビット数を指示します。デバイスがカラー表示可能なものでない場合、この値は 0 になります。

+ +
注記: カラーコンポーネントがカラーコンポーネントごとに異なるビット数を持つ場合、最も小さな数値が使用されます。例えば、ディスプレイが、青は 5 ビット、赤と緑は 6 ビットのカラーコンポーネントで構成されている場合、デバイスはカラーコンポーネントあたり 5 ビット使用するものとみなされ、color テーブルではビット数の最小値が使用されます。
+ +

例

+ +

すべてのカラー表示可能なデバイスにスタイルシートを適用するには:

+ +
@media all and (color) { ... }
+
+ +

カラーコンポーネントあたり最低 4 ビットのデバイスにスタイルシートを適用するには:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのカラー検索テーブルのエントリ数を指示します。

+ +

例

+ +

インデックス化されたカラーを使用するすべてのデバイスにスタイルシートを適用するよう指示するには:

+ +
@media all and (color-index) { ... }
+
+ +

最低 256 色を持つインデックス化されたカラーデバイスにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの対象とする表示領域のアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、表示領域が、その高さよりも幅が広い場合に使用される、特別なスタイルシートを選択します。

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

これは、アスペクト比が 1:1 以上の場合のスタイルを選択します。

+ +

device-aspect-ratio

+ +

値: 整数 / 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスのアスペクト比を記述します。この値は、スラッシュ文字 ("/") で区切られた 2 つの正の整数です。これは、水平ピクセル数 / 垂直ピクセル数を表します。

+ +

例

+ +

以下は、ワイドスクリーンディスプレイに使用する特別なスタイルシートを選択します。

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

これは、アスペクト比が 16:9 または 16:10 の場合のスタイルを選択します。

+ +

device-height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの高さを記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

例

+ +

幅 800 ピクセル未満のスクリーンに表示されるドキュメントにスタイルシートを適用するには:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

device-width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの幅を記述します (ドキュメントウィンドウなどの描画領域ではなく、スクリーンや用紙全体を意味します)。

+ +

grid

+ +

値: 整数
+ メディア: all
+ min/max 前置詞の使用: 不可

+ +

出力デバイスがグリッドデバイスとビットマップデバイスのどちらなのかを決定します。デバイスがグリッドベース (tty ターミナルや電話機のディスプレイなど表示部が一行ずつ) の場合、値は 1 になります。ビットマップデバイスの場合は 0 になります。

+ +
注記: Gecko (および Firefox) は現在グリッドデバイスに対応していないため、このメディア特性はサポートされていません。
+ +

例

+ +

ディスプレイの表示幅が 15 文字以下の handheld デバイスにスタイルを適用するには:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
注記: "em" 単位はグリッドデバイスで特別な意味を持ちます。"em" 単位の正確な幅を特定することができないため、1em はグリッドセル一つ分の幅と高さであると仮定されます。
+ +

height

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

height メディア特性には、出力デバイスの描画域の高さを記述します (viewport の高さやプリンタのページ印刷領域の高さなど)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

monochrome

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 可

+ +

モノクロ (グレースケール) デバイス上のピクセルあたりのビット数を指示します。デバイスがモノクローム表示でない場合、デバイスの値は 0 になります。

+ +

例

+ +

すべてのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (monochrome) { ... }
+
+ +

ピクセルあたり最低 8 ビットのモノクロデバイスにスタイルシートを適用するには:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

値: landscape | portrait
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが横置き (landscape: 高さより幅が広い表示) と縦置き (portrait: 幅より高さが高い表示) のどちらのモードなのかを指示します。

+ +

例

+ +

縦置き方向のときにだけスタイルシートを適用するには:

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

値: {{cssxref("<resolution>")}}
+ メディア: {{cssxref("Media/Bitmap", "bitmap")}}
+ min/max 前置詞の使用: 可

+ +

出力デバイスの解像度 (ピクセル密度) を指示します。解像度は、1 インチあたりのドット数 (dpi) または 1 センチメートルあたりのドット数 (dpcm) で指定されます。

+ +

例

+ +

解像度が最低 300 dpi のデバイスにスタイルシートを適用するには:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

scan

+ +

値: progressive | interlace
+ メディア: {{cssxref("Media/TV", "tv")}}
+ min/max 前置詞の使用: 不可

+ +

テレビ出力デバイスの走査方式を記述します。

+ +
注記: Gecko (および Firefox) は現在 tv メディアタイプをサポートしていないため、このメディア特性も同様にサポートされていません。
+ +

例

+ +

プログレッシブ方式で走査するテレビにだけスタイルシートを適用するには:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

値: {{cssxref("<length>")}}
+ メディア: {{cssxref("Media/Visual", "visual")}}, {{cssxref("Medium/Tactile", "tactile")}}
+ min/max 前置詞の使用: 可

+ +

width メディア特性には、出力デバイスの描画域の幅を記述します (viewport の幅やプリンタのページ印刷領域の幅など)。

+ +
注記: ユーザがウィンドウの大きさを変更すると、width や height メディア特性を使用したメディアクエリを基に、Firefox がスタイルシートを適切なものに切り替えます。
+ +

例

+ +

幅 20 em 以上の handheld デバイスまたは screen デバイスにスタイルシートを指定したいときは:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

次のメディアクエリは、印刷された幅が 8.5 インチ以上のメディアに適用されるスタイルシートを指定します:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

次のメディアクエリは、viewport の幅が 500 ピクセルから 800 ピクセルの場合に使用されるスタイルシートを指定します:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+ +

Mozilla 独自のメディア特性

+ +

{{ gecko_minversion_header("1.9.2") }}

+ +

Mozilla はいくつかの Gecko 独自のメディア特性を提供しています。これらの一部は公式のメディア特性として提案される予定です。

+ +

-moz-images-in-menus

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

メニューに画像が表示できるデバイスの場合、この値は 1 になります。そうでない場合は 0 になります。これは、{{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS 擬似クラスに相当します。

+ +

-moz-mac-graphite-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

Mac OS X で、ユーザがデバイスのアピアランスを "Graphite" に設定している場合、この値は 1 になります。ユーザが標準の青色のアピアランスを使用しているか Mac OS X でない場合、この値は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS 擬似クラスに相当します。

+ +

-moz-maemo-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Maemo でオリジナルのテーマを使用している場合、この値は 1 になります。新しい Fremantle テーマを使用している場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-end-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの終わりに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-backward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、戻る矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-start-forward

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、進む矢印ボタンをスクロールバーの始めに表示する場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS 擬似クラスに相当します。

+ +

-moz-scrollbar-thumb-proportional

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスのユーザインタフェースが、スクロールバーのトンボのサイズを変化させる (ドキュメント全体に対する表示部分の割り合いによる) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS 擬似クラスに相当します。

+ +

-moz-touch-enabled

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

デバイスが (タッチスクリーンの) タッチイベントをサポートしている場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS 擬似クラスに相当します。

+ +

例

+ +

例えば、ユーザがタッチスクリーンデバイスで操作している場合に、指で押しやすくするため、ボタンを大きめに描画することが考えられます。

+ +

-moz-windows-classic

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows でテーマを適用していない (uxtheme を使用する代わりにクラシックモードで使用している) 場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-classic)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-compositor

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが Windows で DWM compositor を使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS 擬似クラスに相当します。

+ +

-moz-windows-default-theme

+ +

値: 整数
+ メディア: {{cssxref("Media/Visual", "visual")}}
+ min/max 前置詞の使用: 不可

+ +

ユーザが現在 Windows の既定のテーマ (Luna, Royale, Zune または Vista Basic, Vista Advanced, Aero Glass を含む Aero) の一つを使用している場合、この値は 1 になります。そうでない場合は 0 になります。

+ +

これは、{{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS 擬似クラスに相当します。

+ +

参照

+ + diff --git a/files/ja/conflicting/web/css/reference/index.html b/files/ja/conflicting/web/css/reference/index.html new file mode 100644 index 0000000000..9d20688007 --- /dev/null +++ b/files/ja/conflicting/web/css/reference/index.html @@ -0,0 +1,189 @@ +--- +title: All in a page +slug: CSS-2_Quick_Reference/All_in_a_page +tags: + - CSS + - CSS2_Quick_Reference + - CSS_2.1 +translation_of: Web/CSS/Reference +translation_of_original: CSS-2_Quick_Reference/All_in_a_page +--- +

+

この文書は、初心者からエキスパートまでのための CSS-2 仕様のクイックリファレンスです。スタイルプロパティは簡単な文法で書かれています。 +

+

ボックスモデル

+

+margin-top : length | percentage | auto;
+margin-right : length | percentage | auto;
+margin-bottom : length | percentage | auto;
+margin-left : length | percentage | auto;
+margin : margin-top margin-right margin-bottom margin-left;
+

padding-top : length | percentage;
+padding-right : length | percentage;
+padding-bottom : length | percentage;
+padding-left : length | percentage;
+padding : padding-top padding-right padding-bottom padding-left;
+

border-top-width : thin | medium | thick | length;
+border-right-width : thin | medium | thick | length;
+border-bottom-width : thin | medium | thick | length;
+border-left-width : thin | medium | thick | length;
+border-width : thin | medium | thick | length;
+

border-top-color : color | transparent;
+border-right-color : color | transparent;
+border-bottom-color : color | transparent;
+border-left-color : color | transparent;
+border-color : border-top-color border-right-color border-bottom-color border-left-color;
+

border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
+border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
+border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
+border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
+border-style : border-top-style border-right-style border-bottom-style border-left-style;
+

border-top : border-width border-style border-color;
+border-right : border-width border-style border-color;
+border-bottom : border-width border-style border-color;
+border-left : border-width border-style border-color;
+border : border-width border-style border-color;

+

視覚的構成モデル

+

+display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;
+

position : static | relative | absolute | fixed;
+

top : length | percentage | auto; +right : length | percentage | auto; +bottom : length | percentage | auto; +left : length | percentage | auto; +

float : left | right | none;
+clear : none | left | right | both;
+

z-index : auto | integer;
+

direction : ltr | rtl;
+unicode-bidi : normal | embed | bidi-override;

+

視覚的構成の詳細

+

+width : length | percentage | auto; +min-width : length | percentage; +max-width : length | percentage | none; +

height : length | percentage | auto; +min-height : length | percentage; +max-height : length | percentage | none; +

line-height : normal | number | length | percentage; +

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length;

+

視覚効果

+

+overflow : visible | hidden | scroll | auto;
+

clip : rect(top,right,bottom,left) | auto;
+

visibility : visible | hidden | collapse;

+

リスト

+

+list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;
+list-style-image : uri | none;
+list-style-position : inside | outside;
+list-style : list-style-type list-style-position list-style-image; + +

+

カラーと背景

+

+color : color;
+

background-color : color | transparent;
+background-image : uri | none;
+background-repeat : repeat | repeat-x | repeat-y | no-repeat;
+background-attachment : scroll | fixed;
+background-position : {{ mediawiki.external('percentage | length | left | center | right') }} {{ mediawiki.external('percentage | length | top | center | bottom') }}  ;
+background : background-color background-image background-repeat background-attachment background-position;

+

フォント

+

+font-family: family-name | generic-family, family-name | generic-family, ... ;
+font-style: normal | italic | oblique;
+font-variant: normal | small-caps;
+font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
+font-size: absolute-size | relative-size | length | percentage;
+font: {{ mediawiki.external('font-style font-variant font-weight') }} font-size {{ mediawiki.external('/line-height') }} font-family; + +

+

テキスト

+

+text-indent : length | percentage;
 +text-align : left | right | center | justify ;
 +text-decoration : none | {{ mediawiki.external(' underline overline line-through blink ') }};
 +text-transform : capitalize | uppercase | lowercase | none;
 +
+letter-spacing : normal | length;
 +word-spacing : normal | length;
 +white-space : normal | pre | nowrap | pre-wrap | pre-line;
 +

+

+

表組み

+

+caption-side : top | bottom;
+

table-layout : auto | fixed;
+

vertical-align : baseline | top | bottom | middle;
+

border-collapse : collapse | separate;
+border-spacing : length {{ mediawiki.external('length') }};
+

empty-cells : show | hide;

+

ユーザインタフェース

+

+cursor : {{ mediawiki.external('uri') }} {{ mediawiki.external(' auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ') }}, ...;
+

outline-color : color | invert;
+outline-style : border-style;
+outline-width : border-width;
+outline : outline-color outline-style outline-width;

+

単位

+

+相対単位 : em, ex, px +

+ +

絶対単位 : in, cm, mm, pt, pc +

+ +

カラーの単位 : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%) +

+ +

+

+

セレクタ

+

+型セレクタ
+h1 { text-decoration: underline; }
+

クラスセレクタ
+.myclass { text-decoration: underline; }
+

一意セレクタ
+#myid { text-decoration: underline; }
+

子孫セレクタ
+#mainpage h1 { text-decoration: underline; }
+

リンク擬似クラスセレクタ
+a:link { color: blue; }
+a:visited { color: purple; }
+

動的擬似クラスセレクタ
+a:hover { text-decoration: underline; }
+a:active { color: #666666; }
+a:focus { outline: 1px dashed red; }
+

印刷用擬似要素セレクタ
+p:first-line { font-weight: bold; }
+p:first-letter { font-size: 2em; }
+

コンテンツ擬似要素セレクタ
+p:before { content: "["; }
+p:after { content: "]"; }
+

子セレクタ
+#title > p { font-weight: bold; }
+

first-child 擬似クラスセレクタ
+p:first-child { margin-top: 0; }
+

隣接セレクタ
+h1 + p { font-style: italic; }
+

属性セレクタ
+option{{ mediawiki.external('selected') }} { color: #ff0000; }
+input{{ mediawiki.external('type=\"password\"') }} { color: #cccccc; }
+a{{ mediawiki.external('rel~=\"next\"') }} { background: #ffffff; }
+*{{ mediawiki.external('lang|=\"en\"') }} { color: red; }

+
+
+{{ languages( { "en": "en/CSS-2_Quick_Reference/All_in_a_page", "fr": "fr/Pr\u00e9cis_CSS_2/Tout_en_un" } ) }} diff --git a/files/ja/conflicting/web/css/url()/index.html b/files/ja/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..2ca334be5a --- /dev/null +++ b/files/ja/conflicting/web/css/url()/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - CSS データ型 + - Reference + - URI + - URL + - urn + - レイアウト +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +
{{CssRef}}
+ +

CSS の <url> データ型は、画像やフォントなどのリソースへのポインターを記述します。 URL は {{Cssxref("background-image")}}, {{Cssxref("cursor")}}, {{cssxref("list-style")}} のような様々な CSS のプロパティで使用することができます。

+ +
+

URI か URL か？ {{Glossary("URI")}} と {{Glossary("URL")}} との間には違いがあります。 URI は単純にリソースを識別します。 URL は URI の一種で、リソースの場所を記述します。 URI はリソースの URL または名前 ({{Glossary("URN")}}) であることがあります。

+ +

CSS Level 1 では、 url() 関数記法は真に URL のみを記述していました。 CSS Level 2 では、 url() の定義はあらゆる URI、 URL または URN のどちらかを記述するように拡張されました。ややこしいことに、これは url() を CSS の <uri> データ型の生成のために使用することができることを意味していました。この変更は紛らわしいばかりでなく、議論になりやすく、 URN が実際の CSS で使用されることはほぼあり得ないため不必要でした。混乱を軽減するために、 CSS Level 3 ではより狭い初めの定義まで戻りました。現在では、 url() は真に <url> のみを記述します。

+
+ +

構文

+ +

<url> データ型は url() 関数表記を使用して指定します。引用符なしでも、単一引用符または二重引用符で囲んでも書くことができます。相対 URL も使用することができ、そのスタイルシートの URL からの相対になります (ウェブページの URL ではありません)。

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

メモ: Firefox 15以降、 0x7e より大きな制御文字は、引用符で囲まない URL では許可されなくなりました。詳細は {{Bug(752230)}} をご覧ください。

+
+ +

例

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Values', '#urls', '<url>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}}CSS Level 2 (Revision 1) から重要な変更なし
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}}CSS Level 1 から重要な変更なし
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("css.types.url")}}
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/css/width/index.html b/files/ja/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..cae634e45a --- /dev/null +++ b/files/ja/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +
+ {{CSSRef}}
+

概要

+

ユーザエージェントによって自動的に計算される値です。その具体的な効果は auto が適用されたプロパティ毎にそれぞれ異なります。

+

auto 値の使用が可能なプロパティ

+ diff --git a/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html new file mode 100644 index 0000000000..aad9d6d606 --- /dev/null +++ b/files/ja/conflicting/web/css/width_eaae26a6fb20ed3ef54fb23bfa0b1fcc/index.html @@ -0,0 +1,37 @@ +--- +title: width +slug: width +tags: + - Disambiguation +translation_of: Web/CSS/width +translation_of_original: width +--- +

width は多くの文脈で用いられます。

+ +

CSS

+ + + +

DOM

+ + + +

SVG

+ + + +

XUL

+ + + +

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

diff --git a/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html new file mode 100644 index 0000000000..fe471649c2 --- /dev/null +++ b/files/ja/conflicting/web/css_eb0c7d23f84df658710ebb6b4bdec8ea/index.html @@ -0,0 +1,28 @@ +--- +title: Other Resources +slug: Web/CSS/Other_Resources +tags: + - CSS +translation_of: Web/CSS +translation_of_original: Web/CSS/Other_Resources +--- +

W3C の文書

+ + + +

その他の資料

+ diff --git a/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..a544b714ed --- /dev/null +++ b/files/ja/conflicting/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,28 @@ +--- +title: dispatchEvent example +slug: DOM/dispatchEvent_example +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +
+ {{ApiRef}}
+

次の例では DOM メソッドを使用してチェックボックスのクリックをシミュレート（※スクリプトでクリックイベントを生成）しています。

+
function simulateClick() {
+  var evt = document.createEvent("MouseEvents");
+  evt.initMouseEvent("click", true, true, window,
+    0, 0, 0, 0, 0, false, false, false, false, 0, null);
+  var cb = document.getElementById("checkbox");
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+

実際の表示を確認

diff --git a/files/ja/conflicting/web/guide/index.html b/files/ja/conflicting/web/guide/index.html new file mode 100644 index 0000000000..534c441e19 --- /dev/null +++ b/files/ja/conflicting/web/guide/index.html @@ -0,0 +1,81 @@ +--- +title: Web 開発 +slug: Web_Development +tags: + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +

ウェブ開発 は、ウェブサイトやウェブアプリケーションの開発のすべての側面を含んでいます。

+ +

ここで見つけられる記事を熟読して、単純なウェブサイトから最新のウェブ技術を用いた複雑で非常にインタラクティブなウェブサイトまでを作成する方法を学んでください。

+ + + + + + + + +
+

ドキュメンテーショントピックス

+ +

技術

+ +
+
ウェブ開発の初歩
+
Web 向けの開発方法を学ぶためのガイド。
+
HTML
+
HyperText Markup Language はウェブページやブラウザーで表示される他のドキュメントを作成するための基本言語です。
+
CSS
+
Cascading Style Sheets によって Web 上で高度なレイアウトとページデザインを行うことが可能になります。
+
JavaScript
+
JavaScript はウェブアプリケーションを開発するために最も一般的に用いられているスクリプト言語です。Mozilla ベースのソフトウェアの開発にも用いられています。
+
DOM
+
Document Object Model は HTML と XML ドキュメントのための API であり、見た目の表現を変更するために変更可能であるドキュメントの構造的な表現を提供します。
+
AJAX
+
Asynchronous JavaScript and XML はひとつの技術ではなく複数の技術の組み合わせです。動的なウェブアプリケーションを作成するために JavaScript と他のモダンなウェブ技術を共に用いることを指します。
+
XHTML
+
Extensible HyperText Markup Language は HTML よりも厳格な構文を提供する XML ベースの HTML 風の言語です。
+
SVG
+
Scalable Vector Graphics は 2D ベクターグラフィックを扱うための XML マークアップ言語です。
+
+ +

方針

+ +
+
Web 標準
+
オープンな Web と互換性を持つことであなたのウェブサイトまたはアプリケーションを最も多くのユーザーに提供するための方法を学んでください。
+
Responsive Web design
+
同じコンテンツを携帯電話から高解像度のデスクトップディスプレイまですべてのハードウェア環境で提供できるよう、CSS を使用してください。
+
Writing forward-compatible websites
+
ブラウザーが更新されても壊れることのないウェブサイトを作成するためのベストプラクティスを紹介します。
+
Mobile Web development
+
モバイル機器で表示されるウェブサイトを開発する際は、デスクトップブラウザー向けの開発に慣れた人々にはあまり知られていない独特の手法を必要とします。
+
Mozilla Web developer FAQ
+
ウェブ開発者からのよく聞かれる質問です。答えもあります!
+
+ +

すべてみる...

+ 		+

コミュニティ

+ + + +

ツール

+ + + +

すべてみる...

+
diff --git a/files/ja/conflicting/web/guide/introduction_to_web_development/index.html b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html new file mode 100644 index 0000000000..73086c9207 --- /dev/null +++ b/files/ja/conflicting/web/guide/introduction_to_web_development/index.html @@ -0,0 +1,113 @@ +--- +title: Introduction to Web development +slug: Web_Development/Introduction_to_Web_development +--- +

Web開発の初歩

+ +

ここに示すリンクは、Web開発を始めたばかりの方であってもWebのすごさへの新しい領域に踏み込もうとしている方であっても手助けになるはずです。

+ +
注: 本ページの推奨リソースは変更される可能性があります。
+ + + + + + + + +
+

 

+ +

項目

+ +

 

+ +

HTML

+ + + +
+
はじめに 
+
+ +
    +
+ +

CSS

+ + + + + +
+
はじめに 
+
中級者向け
+
+ +
    +
+ +

JavaScript

+ + + + + + + +
+
はじめに 
+
中級者向け
+
上級者向け
+
+ +
    +
+ 		+

リソース

+ +
+
Opera's Web Standards Curriculum
+
webデザイン、HTML、HTML5、CSS、Javascriptとそのアクセス法について。多くの分野を通じてweb開発の基礎を学習しようとしている初心者にとってここはよいスタートポイントになります。
+
SitePoint
+
異なるブラウザーやブラウザーに関する既知のバグを通じてのサポートにも言及している、HTML、CSS、Javascriptを学習するために信頼できるサイト
+
HTMLDog
+
初心者向け、HTMLとCSSに関する優秀で包括的なリファレンスサイト
+
Google's HTML, CSS, and Javascript from the Ground Up
+
Googleのプロのweb開発者による易しいビデオチュートリアルがHTML、CSS、Javascriptの基本をカバーします
+
CSSTutorial.net Beginner Tutorials
+
A broad range of useful text and video tutorials that cover the basics through to intermediate aspects of CSS.
+
Tizag CSS Tutorials
+
An easy-to-follow reference for those wishing to learn CSS through short, concise tutorials.
+
jQuery Fundamentals
+
An open-source reference book featuring detailed introductions to both JavaScript and jQuery Fundamentals for beginners.
+
JavaScript From Null: A Video Series
+
A video series on JavaScript for absolute beginners looking for more 'visual'-based learning
+
+
diff --git a/files/ja/conflicting/web/guide/mobile/index.html b/files/ja/conflicting/web/guide/mobile/index.html new file mode 100644 index 0000000000..cc288a9c45 --- /dev/null +++ b/files/ja/conflicting/web/guide/mobile/index.html @@ -0,0 +1,18 @@ +--- +title: Mobile Web development +slug: Web_Development/Mobile +tags: + - Mobile + - NeedsTranslation + - TopicStub + - Web Development +translation_of: Web/Guide/Mobile +translation_of_original: Web_Development/Mobile +--- +

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

+ diff --git a/files/ja/conflicting/web/html/element/index.html b/files/ja/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..b5da7466db --- /dev/null +++ b/files/ja/conflicting/web/html/element/index.html @@ -0,0 +1,585 @@ +--- +title: HTML5 の要素 +slug: Web/Guide/HTML/HTML5/HTML5_element_list +tags: + - HTML + - HTML5 +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +

This page list all standard HTML5 elements, described by their opening tag and grouped by function. Contrary to the HTML Element index which lists all possible tags, standard, non-standard, valid, obsolete or deprecated ones, this list only the valid HTML5 elements. Only those should be used in new Web sites.

+ +

The symbol この要素は HTML5 で追加された要素です。 indicates that the element has been added in HTML5. Note that other elements listed here may have been modified or extended by the HTML5 specification.

+ +

ルート要素

+ + + + + + + + + + + + + + +
要素説明
{{HTMLElement("html")}}HTML 文書、XHTML 文書のルート（基点）要素。他の全ての要素はこの要素の子孫要素として配置しなくてはなりません。
+ +

文書メタデータ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("head")}}Represents a collection of metadata about the document, including links to or definitions of scripts and style sheets.
{{HTMLElement("title")}}Defines the title of the document, shown in a browser's title bar or on the page's tab. It can only contain text and any contained tags are not interpreted.
{{HTMLElement("base")}}Defines the base URL for relative URL in the page.
{{HTMLElement("link")}}Used to link JavaScript and external CSS with the current HTML document.
{{HTMLElement("meta")}}Defines metadata that can't be defined using other HTML element.
{{HTMLElement("style")}}Style tag is used to write inline CSS.
+ +

スクリプティング要素

+ + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("script")}}Defines either an internal script or link to an external script. The script language is JavaScript
{{HTMLElement("noscript")}}Defines an alternative content to display when the browser doesn't support scripting.
+ +

セクショニング要素と見出し要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("body")}} +
Represents the main content of an HTML document. There is only one <body> element in a document.
+
{{HTMLElement("section")}} この要素は HTML5 で追加された要素です。Defines a section in a document
{{HTMLElement("nav")}} この要素は HTML5 で追加された要素です。Defines a section that contains only navigation links
{{HTMLElement("article")}} この要素は HTML5 で追加された要素です。Defines self-contained content that could exist independantly of the rest of the content
{{HTMLElement("aside")}} この要素は HTML5 で追加された要素です。Defines some content set aside from the rest of page content. If it is removed, the remaining content still make sence.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.
{{HTMLElement("hgroup")}} この要素は HTML5 で追加された要素です。Groups a set of <h1> to <h6> elements when a heading has multiple levels
{{HTMLElement("header")}} この要素は HTML5 で追加された要素です。Defines the header of a page or section. It often contains a logo, the title of the Web site and a navigational table of content.
{{HTMLElement("footer")}} この要素は HTML5 で追加された要素です。Defines the footer for a page or section. It often contains a copyright notice, some links to legal information or addresses to give feedback.
{{HTMLElement("address")}}Defines a section containing contact information.
+ +

グループ化要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("p")}}Defines a portion that should be displayed as a paragrah.
{{HTMLElement("hr")}}Represents a thematic break between paragraphs of a section or article or any longer content.
{{HTMLElement("pre")}}Indicates that its content is preformatted and that this format must be preserved.
{{HTMLElement("blockquote")}}Represents a citation.
{{HTMLElement("ol")}}Defines an ordered list of items, that is a list which change its meaning if we change the order of its elements
{{HTMLElement("ul")}}Defines an unordered list of items.
{{HTMLElement("li")}}Defines a item of a enumeration list often preceded by a bullet in English.
{{HTMLElement("dl")}}Defines a definition list, that is a list of terms and their associated definitions.
{{HTMLElement("dt")}}Represents a term defined by the next <dd>.
{{HTMLElement("dd")}}Represents the definition of the terms immediately listed before it.
{{HTMLElement("figure")}} この要素は HTML5 で追加された要素です。Represents a figure illustrated a part of the document.
{{HTMLElement("figcaption")}} この要素は HTML5 で追加された要素です。Represents the legend of a figure.
{{HTMLElement("div")}}Represents a generic container with no special meaning.
+ +

テキストレベル・セマンティクス要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("a")}}ハイパーリンク。他の文書などへのリンク機能を提供します。
{{HTMLElement("em")}}Representsemphasized text, like a stress accent.
{{HTMLElement("strong")}}Represents especiallyimportant text.
{{HTMLElement("small")}}Represents aside comment, that is text like a disclaimer, a copyright which is not essential to the comprehension of the document.
{{HTMLElement("s")}}Represents content that is nolonger accurate or relevant.
{{HTMLElement("cite")}}Represents thetitle of a work.
{{HTMLElement("q")}}インラインの短い引用。段落をまたぐ様な引用には blockquote 要素を用います。
{{HTMLElement("dfn")}}Represents a term whosedefinition is contained in its nearest ancestor content.
{{HTMLElement("abbr")}}Represents anabbreviation or anacronym, eventually with its meaning.
{{HTMLElement("data")}} この要素は HTML5 で追加された要素です。Associates to its content amachine-readable equivalent. (This element is only in the WHATWG version of the HTML standard, and not in the W3C version of HTML5).
{{HTMLElement("time")}} この要素は HTML5 で追加された要素です。Represents adate andtime value, eventually with a machine-readable equivalent.
{{HTMLElement("code")}}コンピューターのコード
{{HTMLElement("var")}}Represents avariable, that is an actual mathematical expression or programming context, an identifier representing a constant, a symbol identifying a physical quantity, a function parameter, or a mere placeholder in prose.
{{HTMLElement("samp")}}Represents theoutput of a program or a computer.
{{HTMLElement("kbd")}}キーボードのキーコマンドや音声コマンドなどのユーザ入力を表します（※名称が「キーボード要素」であるにも関わらず、キーボード以外のユーザ入力も表せる点に注意が必要です）
{{HTMLElement("sub")}},{{HTMLElement("sup")}}Represents asubscript, respectively asuperscript.
{{HTMLElement("i")}}Represents some text in analternate voice or mood, or at least of different quality, such as a taxonomic designation, a technical term, an idiomatic phrase, a thought or a ship name.
{{HTMLElement("b")}}Represents a text which to which attention is drawn forutilitarian purposes. It doesn't convey extra importance and doesn't implicate an alternate voice.
{{HTMLElement("u")}}Representsunarticulate non-textual annoatation, such labeling the text as being misspelt or labeling a proper name in Chinese text.
{{HTMLElement("mark")}} この要素は HTML5 で追加された要素です。Represents text highlighted forreference purposes, that is for its relevance in another context.
{{HTMLElement("ruby")}} この要素は HTML5 で追加された要素です。Represents content to be marked withruby annotations, short runs of text presented alongside the text. This is often used in conjunction with East Asian language where the annotations act as a guide for pronunciation, like the Japanesefurigana.
{{HTMLElement("rt")}} この要素は HTML5 で追加された要素です。Represents thetext of a ruby annotation.
{{HTMLElement("rp")}} この要素は HTML5 で追加された要素です。Representsparenthesis around a ruby annotation, used to display the annotation in an alternate way by browsers not supporting the standard display for annotations.
{{HTMLElement("bdi")}} この要素は HTML5 で追加された要素です。Represents text that must beisolated from its surrounding for bidirectional text formatting. It allows to embed span of text with a different, or unknown, directionality.
{{HTMLElement("bdo")}}Represents thedirectionality of its children, in order to explicitly override the Unicode bidirectional algorithm.
{{HTMLElement("span")}}Represents text with no specific meaning. This has to be used when noother text-semantic element conveys an adequate meaning, which, in this case, is often brought by global attributes like class, lang, or dir.
{{HTMLElement("br")}}改行（ HTML のソースコード内での改行コードは、特定の要素内のもの、或いは特定のスタイルが指定された要素内のものしか表示される文書に改行として反映されません ）
{{HTMLElement("wbr")}} この要素は HTML5 で追加された要素です。Represents aline break opportunity, that is a suggested wrapping point in order to improve readability of text split on several lines.
+ +

変更要素

+ + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("ins")}}文書に追加された内容である事を示す
{{HTMLElement("del")}}文書から削除された内容である事を示す
+ +

埋め込みコンテンツ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("img")}}画像
{{HTMLElement("iframe")}}Represents anested browsing context, that is an embedded HTML document.
{{HTMLElement("embed")}} この要素は HTML5 で追加された要素です。Represents aintegration point for an external, often non_HTML, application or interactive content.
{{HTMLElement("object")}}Represents anexternal resource, which will be treated as an image, an HTML sub-document or an external resource to be processed by a plugin.
{{HTMLElement("param")}}Definesparameters for use by plugins invoked by <object> elements.
{{HTMLElement("video")}} この要素は HTML5 で追加された要素です。Represents avideo, and its associated audio files and captions, with the necessary interface to play it.
{{HTMLElement("audio")}} この要素は HTML5 で追加された要素です。Represents asound, or anaudio stream.
{{HTMLElement("source")}} この要素は HTML5 で追加された要素です。Allows authors to specify alternative media resources for media elements like <video> or <audio>.
{{HTMLElement("track")}} この要素は HTML5 で追加された要素です。Allows authors to specify timedtext track for media elements like <video>or <audio>.
{{HTMLElement("canvas")}} この要素は HTML5 で追加された要素です。Represents abitmap area that scripts can be used to render graphics, like graphs, game graphics, any visual images on the fly.
{{HTMLElement("map")}}In conjunction with <area>, defines animage map.
{{HTMLElement("area")}}In conjunction with <map>, defines animage map.
{{SVGElement("svg")}} この要素は HTML5 で追加された要素です。Defines an embeddedvectorial image.
{{MathMLElement("math")}} この要素は HTML5 で追加された要素です。Defines amathematical formula.
+ +

テーブルデータ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("table")}}行と列を持つ図表。テーブル。
{{HTMLElement("caption")}}テーブルのキャプション
{{HTMLElement("colgroup")}}テーブルの、一つ以上の列グループを表す
{{HTMLElement("col")}}テーブルの列を表す
{{HTMLElement("tbody")}}Represents the block of rows that describes theconcrete data of a table.
{{HTMLElement("thead")}}Represents the block of rows that describes thecolumn labels of a table.
{{HTMLElement("tfoot")}}Represents the block of rows that describes thecolumn summaries of a table.
{{HTMLElement("tr")}}Represents arow of cells in a table.
{{HTMLElement("td")}}Represents adata cell in a table.
{{HTMLElement("th")}}Represents aheader cell in a table.
+ +

フォーム関連要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("form")}}Represents aformular, consisting of controls, that can be submitted to a server for processing.
{{HTMLElement("fieldset")}}フォームコントロール要素のグループ化に用いる
{{HTMLElement("legend")}}<fieldset> のキャプション
{{HTMLElement("label")}}フォームコントロールのキャプション
{{HTMLElement("input")}}Represents atyped data field allowing the user to edit the data.
{{HTMLElement("button")}}Represents abutton.
{{HTMLElement("select")}}Represents a control allowing theselection among a set of options.
{{HTMLElement("datalist")}} この要素は HTML5 で追加された要素です。Represents aset of predefined options for other controls.
{{HTMLElement("optgroup")}}Represents aset of options, logically grouped.
{{HTMLElement("option")}}Represents anoption in a <select> element, or a suggestion of a <datalist> element.
{{HTMLElement("textarea")}}Represents amultiline text edit control.
{{HTMLElement("keygen")}} この要素は HTML5 で追加された要素です。Represents akey pair generator control.
{{HTMLElement("output")}} この要素は HTML5 で追加された要素です。Represents theresult of a calculation.
{{HTMLElement("progress")}} この要素は HTML5 で追加された要素です。Represents thecompletion progress of a task.
{{HTMLElement("meter")}} この要素は HTML5 で追加された要素です。Represents a scalarmeasurement (or a fractional value), within a known range
+ +

インタラクティブコンテンツ要素

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
要素説明
{{HTMLElement("details")}} この要素は HTML5 で追加された要素です。Represents awidget from which the user can obtain additional information or controls.
{{HTMLElement("summary")}} この要素は HTML5 で追加された要素です。Represents asummary,caption, orlegend for a given <details>.
{{HTMLElement("command")}} この要素は HTML5 で追加された要素です。Represents acommand that the user can invoke.
{{HTMLElement("menu")}} この要素は HTML5 で追加された要素です。Represents alist of commands.
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/html/element/title/index.html b/files/ja/conflicting/web/html/element/title/index.html new file mode 100644 index 0000000000..ab170f7d35 --- /dev/null +++ b/files/ja/conflicting/web/html/element/title/index.html @@ -0,0 +1,19 @@ +--- +title: title +slug: title +tags: + - Disambiguation +translation_of: Web/HTML/Element/title +translation_of_original: title +--- +

title は、その文脈により異なるものを指す場合があります。

+ + + +

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

diff --git a/files/ja/conflicting/web/html/global_attributes/index.html b/files/ja/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..aee67a75d0 --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,27 @@ +--- +title: Global attribute (グローバル属性) +slug: Glossary/Global_attribute +tags: + - Attribute + - CodingScripting + - Glossary + - HTML +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +

グローバル属性は、すべての{{glossary("element","要素")}}で使用できる{{glossary("attribute","属性")}}です（ただし、一部の要素には影響を与えないこともあります）。

+ +

HTML 要素には、次のいくつかの属性を使用できます。

+ + + +

より詳しく知る

+ + diff --git a/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html new file mode 100644 index 0000000000..07cdb135ef --- /dev/null +++ b/files/ja/conflicting/web/html/global_attributes/spellcheck/index.html @@ -0,0 +1,32 @@ +--- +title: HTML フォームのスペルチェックを制御する +slug: Controlling_spell_checking_in_HTML_forms +tags: + - Configuration management + - HTML +--- +

{{ Fx_minversion_header(2) }} Firefox 2 はウェブフォームのテキストエリア{{ 訳注("複数行のテキスト入力欄") }}とテキストフィールド{{ 訳注("一行のテキスト入力欄") }}のスペルチェックのサポートを導入します。ユーザーは about:config インターフェースを使って、スペルチェックを有効にするか、テキストエリアとテキストフィールドの両方でチェックするかを設定することができます。

+

標準では、テキストエリアと designMode ドキュメントではスペルチェックが行われますが、一行の入力ボックスでは行われません。なぜなら、Firefox が ユーザ ID や E メールアドレスを誤ってマークしてしまうと、ユーザの気を散らしてしまうからです。

+

しかし、この動作が必ずしも適切でない状況があるでしょう。例えば、HTML や他の非散文データを編集するためにテキストエリアの使用が意図されているなら、スペルチェッカは助けよりむしろ妨害でしょう。 同じようにウェブサイトが特定のテキストフィールドでスペルチェック可能にすることを Firefox に勧めたい場合があるかもしれません。例えば、検索ボックスや E メールの件名フィールドなど。

+

ウェブサイトが特定の <input> 要素にスペルチェックを使わせたい、あるいは使わせたくない場合は、spellcheck 属性を使うことができます。スペルチェックを勧めるには true を、使わせたくないときには false を設定します。

+

もしユーザが layout.spellcheckDefault を 0 に設定してスペルチェックを完全に無効化しているなら、サイトからの勧めは無視されることを覚えておいてください。もし layout.spellcheckDefault が他の値なら勧めは考慮に入れられるでしょう。

+

一行のテキストフィールド(HTML の <input> 要素) でスペルチェックを有効化するには、HTML で次のようにコードを書きます:

+
<input type="text" size="50" spellcheck="true">
+
+

同様にテキストエリアでスペルチェックを無効にするには、HTML で次のようにコードを書きます:

+
<textarea spellcheck="false"></textarea>
+
+

spellcheck 属性をドキュメントの <body> 要素に設定することによって、ドキュメントの designMode (一般的に、リッチテキスト編集の実装に使用されます) を制御することができます。

+

あなたは spellcheck 属性を <span> と <div> のような他の要素にも同じように適用ですます。それらに含まれた全ての <input> 要素は親によって設定されたスペルチェックの設定が継承されます。もし祖先の要素で何も設定されていない場合、ユーザの標準設定が使われます。

+

例えば

+
<div spellcheck="true">
+  <label>文章を入力してください: </label><input type="text" size="50">
+  <br />
+  <label>さらに入力してください: </label><input type="text" size="50">
+</div>
+<br />
+<label>3 番目を入力してください: </label><input type="text" size="50">
+
+

この HTML の断片では、最初の 2 つのテキストフィールドはスペルチェックされるのに対して 3 番目はスペルチェックされません。

+
+  
diff --git a/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html new file mode 100644 index 0000000000..adb8b20a69 --- /dev/null +++ b/files/ja/conflicting/web/http/connection_management_in_http_1.x/index.html @@ -0,0 +1,38 @@ +--- +title: HTTP Pipelining FAQ +slug: HTTP_Pipelining_FAQ +tags: + - Necko +translation_of: Web/HTTP/Connection_management_in_HTTP_1.x +translation_of_original: Web/HTTP/Pipelining_FAQ +--- +

HTTP/1.1 パイプライン化 FAQ +

+

HTTP パイプライン化とは？

+

通常、HTTP リクエストは、次のリクエストは完全に受け取られた現在のリクエストに対するレスポンスのあとにだけ発行されるという形で、連続して発行されます。ネットワークの待ち時間と帯域幅の制限により、次のリクエストがサーバによって受け取られるまでに、著しい遅れを生じさせることもあります。 +

HTTP/1.1 では、複数 HTTP リクエストを対応するレスポンスを待つことなくソケットに同時に書き出すことを許しています。リクエスト発行者は、リクエストされた順序での到着のためのレスポンスを待っています。リクエストの「パイプライン化」の作用でページ読み込み時に劇的に改善をみせることもあります。高い待ち時間をともなう接続においては特にそうです。 +

パイプライン化はまた、TCP/IP パケットの数を劇的に減少させることもあります。536 ～ 1460 バイトの典型的な MSS (最大セグメントサイズ) で、1 つの TCP/IP パケットにいくつかの HTTP リクエストが可能です。少ないパケットは通常、IP ルータとネットワークの負荷を減らすため、読み込みに必要なパケットの数を減らすことは、全体としてはインターネットに利益になります。 +

HTTP/1.1 に合致するサーバはパイプライン化のサポートが必要とされています。これはサーバにパイプライン化したレスポンスが必要とされることを意味するわけではありません。しかし、クライアントがパイプライン化したリクエストを選択した時に失敗してはいけないことを要求します。著名な Mozilla 以外のブラウザがパイプライン化を実装していないため、これは明らかにエバンジェリズム (啓蒙) に関する新しいカテゴリのバグとなる可能性があります。 +

+

パイプライン化したリクエストをいつすべきですか？

+

GET や HEAD といったリクエストのように独立したリクエストだけが、パイプライン化可能です。POST と PUT といったリクエストはパイプライン化すべきではありません。新しいコネクションの上でもまた、パイプライン化したリクエストをすべきではありません。なぜなら、相手のサーバ (もしくはプロキシ) が HTTP/1.1 をサポートしているかどうかまだわからないからです。そのために、パイプライン化は存在する「keep-alive」接続の再利用時のみ可能です。 +

+

どのくらいの数のリクエストのパイプライン化をすべきでしょうか？

+

うーん。多くのリクエストのパイプライン化は、もし早い時点でコネクションが切断された場合コストが高くつきます。新しいコネクションの上でだけ繰り返せばいいのに、ネットワークへリクエストを書き出す時間を浪費するからです。そのうえ、最初のリクエストが完了するのに長い時間がかかると、長いパイプライン化は実際にユーザに知覚されてしまうほどの遅れを引き起こします。サーバあたり、2 つの「keep-alive」接続を超えないという制限を勧めます。明らかに、それはアプリケーションに依存します。Web ブラウザはたぶん、前述の理由のためにあまりに長いパイプライン化は望まないでしょう。2 というのは適切な値でしょう。しかし、この数値にはまだ試行により変えられる余地があります。 +

+

もし、リクエストがキャンセルされたらどうなるのでしょうか？

+

もし、リクエストがキャンセルされたとき、パイプライン全体がキャンセルされるのでしょうか？ それとも、パイプラインに属する他のリクエストを繰り返すことを強いてはいけないので、キャンセルされたリクエストだけがただ単に捨てられるべきなのでしょうか？ 答えは、受け取られていないままキャンセルされたリクエストに対するレスポンスの破片のサイズを含むいくつかの要素に依存します。実直なアプローチでは、ただパイプラインをキャンセルし、すべてのリクエストを再発行するというのもあるでしょう。これは、リクエストが一度の発行で何度も利用できるときだけできることです。パイプライン化さているリクエストは大抵、キャンセルされている同じ読み込みのグループ (ページ) に属するので、この実直なアプローチはよく筋が通っています。 +

+

コネクションに失敗するとどうなるのでしょうか？

+

もし、コネクションが失敗するか、サーバによってパイプライン化されたレスポンスのダウンロードの一部へ放り込まれた時、Web ブラウザは失ったリクエストの再開始の能力がなくてはなりません。この場合、単純にも、上述の取り消された場合と等価にハンドリンクされているでしょう。 +

+
+

原文書の情報

+
  • 著者: Darin Fisher +
  • 最終更新日: March 20, 2005 +
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 +
+
+
+
+{{ languages( { "en": "en/HTTP_Pipelining_FAQ" } ) }} diff --git a/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html new file mode 100644 index 0000000000..c14a549f89 --- /dev/null +++ b/files/ja/conflicting/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,175 @@ +--- +title: User Agent Strings Reference +slug: User_Agent_Strings_Reference +tags: + - 要更新 +translation_of: Web/HTTP/Headers/User-Agent/Firefox +translation_of_original: User_Agent_Strings_Reference +--- +

このドキュメントの状況

+

これは、元の user-agent のバージョン文字列提議の改訂版です。元の、時代遅れの提議 と、netscape.public.mozilla.seamonkey 及び netscape.public.mozilla.netlibでの議論を改訂の参考にしてください。

+

This document is the official Mozilla user-agent string specification. However, the following issues are under review and may be revised in the near future:

+ +

目標点

+

元の目標は:

+ +

議論の中で出てきた他の事項は:

+ +

提議

+

Mozillaに基づくブラウザは、user-agentのバージョン文字列を以下の形式にすべきである:

+

MozillaProductToken (MozillaComment) GeckoProductToken *(VendorProductToken|VendorComment)

+

Gecko レイアウトエンジンが埋め込まれたアプリケーションの user-agent のバージョン文字列は以下の形式に従うべきである:

+

ApplicationProductToken (ApplicationComment) GeckoProductToken *(VendorProductToken|VendorComment)

+

上記の定義中の参照は以下の通り:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MozillaProductTokenMozilla/ MozillaVersion
MozillaVersionMajor . minor
Majorメジャーリリース番号を示す整数値。In practice, always 5.
Minorもし 0 でないなら、3 桁の 0 で埋められた数字であるべきで、たとえば 001 である。もし 0 なら、0 とするのが望ましい。
MozillaComment( Platform ; Security ; OS-or-CPU ; Localization information ; GeckoVersion ) *[; Optional Other Comments] )
Platform使用してよい文字列: +
    +
  • Windows: 全ての Windows 環境
    • +
  • Macintosh: 全ての Mac OS 環境
    • +
  • X11: 全ての X-Window システム環境
    • +
  • etc.
    • +
+
Security使用してよい文字列: +
    +
  • N: セキュリティー無し
    • +
  • U: 強化セキュリティーバージョン
    • +
  • I: 弱いセキュリティーバージョン
    • +
+
OS-or-CPUWindows システム用の文字列: +
    +
  • Win3.11: Windows 3.11
    • +
  • WinNT3.51: Windows NT 3.11
    • +
  • WinNT4.0: Windows NT 4.0
    • +
  • Windows NT 5.0: Windows 2000
    • +
  • Win95: Windows 95
    • +
  • Win98: Windows 98
    • +
  • Win 9x 4.90: Windows Me
    • +
  • etc.
    • +
+ MacOS システム用の文字列: +
    +
  • 68K: 68k ハードウエア
    • +
  • PPC: PowerPC ハードウエア
    • +
  • etc.
    • +
+ Unix システム用の文字列: コマンド uname -sm の出力を用いる。(also accessible as the sysname and machine fields of the utsname structure.) (Previous versions of this document said they should be the output of uname -srm, but the release field of the utsname structure was considered to reveal too much information about the system, such as potential security holes.)
Localization Information文字コードの表現は、RFC 1945 及び RFC 2068 の規格に従う。例としては
+ en, en-US, es, es-CO, ja, ja-JPなどがあげられる。
GeckoVersionString starting with "rv:" followed by the Gecko version.  This is a set of numbers separated by periods, possibly followed by a pre-release indicator (e.g. "a1" for the first alpha).
GeckoProductTokenGecko/GeckoDate +

Mozilla を含む、Gecko エンジンに基づく製品には、Gecko 製品文字列をその二次製品であることを明確にするために利用を許可する。

+
GeckoDateYYYYMMDD 形式の日付。正式な Mozilla ビルドにおいては、これは BuildID の中の日付に一致させる。Mozilla の公開版においては、GeckoDate はソースコードが mozilla.org から取り出された日付と一致させなければならず、必ずしも生成された BuildID の日付部分とは一致しない。複数のブランチが同時に公開される場合、この日付からは Gecko のバージョンを特定できない。
ApplicationProductToken, Application CommentGecko レイアウトエンジンに基づくアプリケーションが使用する部分である。それらの製品文字列とコメントの形式はここで指定するものではないが、HTTP 標準に基づくべきである。
( VendorProductToken | VendorComment )Mozilla に基づくアプリケーションの製品文字列を記述する部分である。形式や内容はベンダー規定とするが、HTTP 標準に基づくべきであり、上記の GeckoVersion を含むことが望ましい。
*0 かそれ以上のトークンを入れることを指定する記号
?0 か 1 つのトークンを入れることを指定する記号
+

例

+ + + + + + + + + + + + + + + + + + + + + + + +
mozilla.org のブラウザMozilla/5.001 (windows; U; NT4.0; en-US; rv:1.0) Gecko/25250101
上のブラウザと同じソースに基づいて作られた商標リリースMozilla/5.001 (Macintosh; N; PPC; ja; rv:1.0) Gecko/25250101 MegaCorpBrowser/1.0 (MegaCorp, Inc.)
再構成リリースMozilla/9.876 (X11; U; Linux 2.2.12-20 i686, en; rv:2.0) Gecko/25250101 Netscape/5.432b1 (C-MindSpring)
Gecko に基づくブラウザTinyBrowser/2.0 (TinyBrowser Comment; rv:1.9.1a2pre) Gecko/20201231
+

Implementation notes for applications, vendors, and extensions

+

Starting with Mozilla 1.8 beta2, the best way for applications, vendors, and extensions (if needed) to add to default preferences to add VendorProductTokens or VendorComments is to add a default preference of the form general.useragent.extra.identifier. All of the general.useragent.extra.* preferences will have their string values added to the User-Agent string in alphabetical order by identifier. For example:

+ +
+

これに対するコメントは netscape.public.mozilla.netlib または dbaron@dbaron.org まで

diff --git a/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html new file mode 100644 index 0000000000..f6ef54e17d --- /dev/null +++ b/files/ja/conflicting/web/http/headers/x-dns-prefetch-control/index.html @@ -0,0 +1,35 @@ +--- +title: DNS プリフェッチの制御 +slug: Controlling_DNS_prefetching +--- +

{{ fx_minversion_header(3.5) }}

+

Firefox 3.5 では DNS prefetching が導入されました。これにより、 Firefox は文書中に埋め込まれたアンカーに加え、画像、CSS、JavaScript などの文書内で参照されている外部リソースの URL に対し、予めドメインの名前解決を行います。

+

このプリフェッチはバックグラウンドで行われるため、実際にリソースが必要となった際には既に名前解決が終了していることになります。これにより、例えばユーザーがリンクをクリックした際の待ち時間を減らすことができます。

+

背景

+

DNS による名前解決に必要な帯域幅は小さなものですが、それにかかる時間は非常に大きく、特にモバイル環境では顕著なものとなります。予め名前解決を行っておくことで、例えばユーザーがリンクをクリックした際に、ページが表示されるまでの待ち時間を大きく削減することができ、場合によっては秒単位の効果が現れる場合もあります。

+

Firefox での実装においては、実際のページコンテンツの取得と並行して DNS による名前解決が行われるため、名前解決に時間がかかっても実際のページコンテンツの取得に遅れが生じることはありません。

+

特にモバイル環境においては、 DNS プリフェッチによりページの読み込みにかかる時間が劇的に改善されます。例えば、多数の画像が表示されるページにおいて、画像が要求される前に名前解決が行われている場合では読み込み時間が 5% 以上削減されるでしょう。

+

ブラウザーでのプリフェッチ制御

+

通常、ユーザーはプリフェッチ機能に対して何ら設定する必要はありません。が、何らかの理由でプリフェッチ機能を無効にしたい場合は、 network.dns.disablePrefetch を true に設定してください。

+

また、既定では HTTPS にて読み込まれた文書に対する埋め込みリンクのホスト名は事前に解決されないように設定されています。これを変更するにはnetwork.dns.disablePrefetchFromHTTPS を false としてください。

+

コンテンツでのプリフェッチ制御

+

コンテンツ・プロバイダー側でもプリフェッチ機能をある程度制御することができます。これは、 Google Chrome が DNS プリフェッチをコントロールする 際の手法と互換性があります。

+

プリフェッチのオン・オフ

+

まず、サーバーはコンテンツの配信時に x-dns-prefetch-control HTTP ヘッダを "off" とすることで、DNS プリフェッチ機能をオプト・アウトとして（ユーザーの意志とは関係なく）実装することができます。

+

同様に個々の文書に対して制御を行うことも可能で、 meta 要素の http-equiv 属性を次のように設定することで実現できます:

+
<meta http-equiv="x-dns-prefetch-control" content="off">
+
+

逆に、 content 属性を "on" とすることで、プリフェッチが有効になります。

+

特定のホスト名の名前解決を強制する

+

コンテンツ・プロバイダーは、文書内にアンカーを埋め込まずとも、特定のホスト名に対する DNS の事前解決を強制することができます。これは、 link 要素に以下のように記述します:

+
<link rel="dns-prefetch" href="http://www.spreadfirefox.com/">
+
+

この例では、 Firefox は "www.spreadfirefox.com" について、予め名前解決を行うよう試みます。

+

また、 link 要素中に必ずしも完全なアドレスを記述せずとも、ホスト名の前に二つのスラッシュを加えることで名前解決が行われます:

+
<link rel="dns-prefetch" href="//www.spreadfirefox.com">
+
+

特定のホスト名について強制的に予め名前解決を行うというのは、次のような場合に有効と考えられます: トップページそのものでは参照されていないものの、サイト内の他のページでは頻繁に参照されている外部ドメインをトップページにて強制的に名前解決を行うことで、トップページ自体の速度向上は望めませんが、サイト全体でのパフォーマンス向上が期待できます。

+

参考文献

+ +

 

diff --git a/files/ja/conflicting/web/javascript/guide/index.html b/files/ja/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..79c30b670a --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide/index.html @@ -0,0 +1,44 @@ +--- +title: Function Object +slug: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects/Function_Object +--- +

 

+

Function オブジェクト

+

定義済みの Function オブジェクトは、関数としてコンパイルさせたい JavaScript コードの文字列を指定します。

+

Function オブジェクトを作成するには次のようにします。

+
functionObjectName = new Function ([arg1, arg2, ... argn], functionBody)
+
+

functionObjectName は変数名または既存のオブジェクトのプロパティ名です。オブジェクトに小文字のイベントハンドラ名を続けて、window.onerror のようにして指定することもできます。

+

arg1, arg2, ... argn は関数が仮引数名として使用する引数です。それぞれが JavaScript の識別子として妥当な文字列である必要があります。例えば、"x" や "theForm" などです。

+

functionBody は関数の本体としてコンパイルさせたい JavaScript コードを表す文字列です。

+

Function オブジェクトはそれが使用されるたびに評価されます。これは関数を宣言し、それをコード内で呼び出す方法よりも非効率的です。宣言された関数はコンパイルされるからです。

+

ここで説明した関数の定義方法に加えて、function 文と関数式を用いることもできます。詳しくは コア JavaScript 1.5 リファレンス を参照してください。

+

次のコードは関数を変数 setBGColor に代入します。この関数は開いている文書の背景色をセットします。

+
var setBGColor = new Function("document.bgColor='antiquewhite'")
+
+

Function オブジェクトを呼び出すには、それがあたかも関数であるかのように変数名を指定すればいいのです。次のコードは setBGColor 変数で指定された関数を実行します。

+
var colorChoice="antiquewhite"
+if (colorChoice=="antiquewhite") {setBGColor()}
+
+

次のどちらかの方法を使用することでイベントハンドラに関数を代入することができます。

+
1. document.form1.colorButton.onclick=setBGColor
+2. <INPUT NAME="colorButton" TYPE="button"
+      VALUE="Change background color"
+      onClick="setBGColor()">
+
+

上記の変数 setBGColor を作成することは次の関数を宣言することと同じようなことです。

+
function setBGColor() {
+   document.bgColor='antiquewhite'
+}
+
+

関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。

+ +

関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。

+ +

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Date_Object", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Math_Object") }}

diff --git a/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html new file mode 100644 index 0000000000..88bf9acbe7 --- /dev/null +++ b/files/ja/conflicting/web/javascript/guide_552be6201ec831852573aad295c96538/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete Pages +slug: Web/JavaScript/Guide/Obsolete_Pages +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages +--- +

This is a list of pages that have been merged into chapters (in alphabetical order):

+ + +
{{tree}}
diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html new file mode 100644 index 0000000000..48ab4cab3b --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/escape/index.html @@ -0,0 +1,34 @@ +--- +title: window.escape +slug: Web/API/Window/escape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/escape +translation_of_original: Web/API/Window.escape +--- +
+ {{ApiRef}}
+

概要

+

文字列をエンコードし、16 進エスケープシーケンスで表された特定の文字に置換します。

+

構文

+
escaped = escape(regular);
+
+ +

例

+
alert( escape("http://www.cnn.com") ); // 表示結果: http%3A//www.cnn.com
+
+

注記

+

escape() メソッドは、特別な文字（通常のテキストや数字ではない文字）を 16 進文字にエンコードします。これは、特に、クッキーの値を設定するために必要となります。また、GET リクエストや AJAX GET/POST リクエストの URL で + + name=value + のような組のデータを渡すときにも役立ちます。

+

{{domxref("window.unescape")}} 、encodeURIComponent も参照してください。

+

仕様

+

{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。

diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..5705852c36 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,88 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +tags: + - DateTimeFormat + - Internationalization + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +
{{JSRef}}
+ +

Intl.DateTimeFormat.prototype プロパティは、 {{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}} コンストラクターに対するプロトタイプオブジェクトを表します。

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

解説

+ +

Intl.DateTimeFormat インスタンスの解説については {{jsxref("DateTimeFormat")}} を確認して下さい。

+ +

{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスは Intl.DateTimeFormat.prototype から継承します。プロトタイプオブジェクトへの変更はすべての {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} インスタンスによって継承されます。

+ +

プロパティ

+ +
+
Intl.DateTimeFormat.prototype.constructor
+
{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} への参照です。
+
+ +

メソッド

+ +
+
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}
+
ロケールおよびこの {{jsxref("DateTimeFormat", "DateTimeFormat")}} オブジェクトの書式化オプションに則って日付を書式化するゲッター関数です。
+
{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
+
Returns an {{jsxref("Array")}} of objects representing the date string in parts that can be used for custom locale-aware formatting.
+
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+
ローケルを反映しているプロパティとオブジェクトの初期化中に計算されたオプションをもった新しいオブジェクトを返します。
+
{{jsxref("DateTimeFormat.formatRange", "Intl.DateTimeFormat.prototype.formatRange()")}}
+
This method receives two Dates and formats the date range in the most concise way based on the locale and options provided when instantiating {{jsxref("DateTimeFormat", "DateTimeFormat")}}.
+
{{jsxref("DateTimeFormat.formatRangeToParts", "Intl.DateTimeFormat.prototype.formatRangeToParts()")}}
+
This method receives two Dates and returns an Array of objects containing the locale-specific tokens representing each part of the formatted date range.
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}}
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}初回定義
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..a4f38307ea --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,95 @@ +--- +title: ネイティブ JSON を使う +slug: Using_native_JSON +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +translation_of_original: Web/JavaScript/Guide/Using_native_JSON +--- +
{{gecko_minversion_header("1.9.1")}}
+ +

この文書では、 Gecko 1.9.1 で追加された ECMAScript 5 互換のネイティブ JSON オブジェクトについて説明します。以前のバージョンの Firefox で JSON を扱う際の基本的な情報については、JSON のページをご覧下さい。

+ +

ネイティブ JSON オブジェクトは 2 つの重要なメソッドをもっています。JSON.parse() メソッドは JSON 文字列をパースし、 JavaScript のオブジェクトに変換します。JSON.stringify() メソッドは、 JavaScript オブジェクトを JSON 文字列に変換します。

+ +
注意:JSON オブジェクトは循環的な構造の変換には対応していません。そのようなオブジェクトを JSON 文字列に変換しようとすると、TypeError 例外が起こります。
+ +

JSON 文字列のパース

+ +

JSON 文字列を JavaScript オブジェクトに変換するには、以下の例のように JSON 文字列を単純に JSON.parse() に渡すだけで済みます。

+ +
var jsObject = JSON.parse(jsonString);
+
+ +

JavaScript 1.8.5 (Firefox 4) 以降では JSON.parse() では末尾のカンマを許可しません。

+ +
// JavaScript 1.8.5 ではいずれも構文エラーとなります
+var jsObject = JSON.parse("[1, 2, 3, 4, ]");
+var jsObject = JSON.parse("{ \"foo\" : 1, }");
+
+ +

オブジェクトを JSON に変換

+ +

JavaScript オブジェクトを JSON 文字列に変換するには、オブジェクトをJSON.stringify() メソッドに渡します:

+ +
var foo = {};
+foo.bar = "new property";
+foo.baz = 3;
+
+var jsonString = JSON.stringify(foo);
+
+ +

jsStringは'{"bar":"new property","baz":3}' と変換されます。

+ +

Firefox 3.5.4 以降では JSON.stringify() オプションの引数で挙動をカスタマイズ可能になります。構文は次の通りです:

+ +

jsonString = JSON.stringify(value [, replacer [, space]])

+ +
+
value
+
JSON 文字列に変換する JavaScript オブジェクト。
+
replacer
+
文字列化プロセスの振る舞いを変更する関数、または value オブジェクトのプロパティのうち JSON 文字列出力に含めるホワイトリストを指定する String もしくは Number オブジェクトの配列。この値が null もしくは指定されなかった場合、オブジェクトのすべてのプロパティが JSON 文字列の出力に含まれます。
+
space
+
出力される JSON 文字列を読みやすくするために挿入する空白文字を指定する String もしくは Number オブジェクト。Number が指定された場合、ホワイトスペースの空白文字数として扱われます。但し 10 を超える数値を指定しても 10 を指定したものとして扱われます。1 より小さい値を指定するとホワイトスペースは含められません。String が指定された場合、空白文字の代わりにその文字列(または 10 文字を越える場合は最初の 10 文字)が使われます。この値が null もしくは指定されなかった場合、ホワイトスペースは含まれません。
+
+ +

replacer パラメータ

+ +

replacer パラメータには関数または配列を指定できます。

+ +

replacer が関数である場合、文字列化するプロパティのキーと値二つをパラメータとして受け取ります。キーが見つかったオブジェクトは this パラメータとして渡されます。最初空文字列をキー、value パラメータのオブジェクトを値として関数を呼び出します。関数の返り値がオブジェクト(もしくは配列)であれば順次そのプロパティの名前と値を引数として関数を呼び出します。出力される JSON 文字列は関数の返値に応じて次のようになります:

+ + + +
注記: 配列の要素を除外するためには replacer は使えません。オブジェクトのプロパティについては undefined または関数を返すとそのプロパティがスキップされますが、関数の要素の場合は null が出力されます。
+ +

例

+ +
function replacer(key, value) {
+  if (typeof value === "string") {
+    return undefined;
+  }
+  return value;
+}
+
+var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
+var jsonString = JSON.stringify(foo, replacer);
+
+ +

結果として得られる JSON 文字列は {"week":45,"month":7} となります。

+ +

replacer が配列である場合、オブジェクトのプロパティのうち JSON 文字列出力に含まれるべきプロパティ名のリストとして扱われます。

+ +

参考文献

+ + diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html new file mode 100644 index 0000000000..1dc9e038db --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/string/lastindexof/index.html @@ -0,0 +1,18 @@ +--- +title: lastIndexOf +slug: lastIndexOf +tags: + - Disambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/String/lastIndexOf +translation_of_original: lastIndexOf +--- +

lastIndexOf は、いくつかの JavaScript オブジェクトが持つメソッドです。

+ +

JavaScript

+ + + +

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html new file mode 100644 index 0000000000..07564a02ee --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/unescape/index.html @@ -0,0 +1,34 @@ +--- +title: window.unescape +slug: Web/API/Window/unescape +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/JavaScript/Reference/Global_Objects/unescape +translation_of_original: Web/API/Window.unescape +--- +
+ {{ApiRef}}
+

概要

+

16 進でエンコードされた値（例えば、クッキー）をデコードします。

+

構文

+
regular = window.unescape(escaped)
+ +

例

+
alert( unescape("%5C") );  // 表示結果: "\"
+
+alert( unescape("https%3A//developer.mozilla.org") );  // 表示結果: "https://developer.mozilla.org"
+
+

仕様

+

{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。

+

関連情報

+ diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..fedccef945 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,64 @@ +--- +title: WebAssembly.Instance.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

WebAssembly.Instance.prototype プロパティは {{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプを表します。

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

説明

+ +

全ての {{jsxref("WebAssembly.Instance")}} インスタンスは Instance.prototype を継承します。{{jsxref("WebAssembly.Instance()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Instance")}} インスタンスに影響するように変更可能です。 

+ +

プロパティ

+ +
+
Instance.prototype.constructor
+
このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは  {{jsxref("WebAssembly.Instance()")}} コンストラクタです。
+
Instance.prototype.exports {{readonlyinline}}
+
WebAssembly モジュールインスタンスからエクスポートされた全ての関数をメンバとして持つオブジェクトを返します。これらは、JavaScriptからアクセスして使用することができます。
+
+ +

メソッド

+ +

なし。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}{{Spec2('WebAssembly JS')}}初回ドラフト定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}

+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..6d837f2f73 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Memory.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +tags: + - JavaScript + - Property + - Prototype + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

WebAssembly.Memory.prototype プロパティは {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプを表します。

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

説明

+ +

全ての {{jsxref("WebAssembly.Memory")}} インスタンスは Memory.prototype を継承します。 {{jsxref("WebAssembly.Memory()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Memory")}} インスタンスに影響するように変更可能です。

+ +

プロパティ

+ +
+
Memory.prototype.constructor
+
このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは {{jsxref("WebAssembly.Memory()")}} コンストラクタです。
+
{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}
+
メモリーに格納されているバッファを返すアクセサプロパティ。
+
+

メソッド

+
+
{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}
+
指定した WebAssembly ページの数 (64KBを1単位とする) で Memory インスタンスのサイズを増やします。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}{{Spec2('WebAssembly JS')}}初回ドラフト定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}

+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..84709eb736 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,75 @@ +--- +title: WebAssembly.Table.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +tags: + - JavaScript + - Property + - Prototype + - WebAssembly + - table +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

WebAssembly.Table.prototype プロパティは {{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプを表します。

+ +
{{js_property_attributes(0, 0, 0)}}
+ +

説明

+ +

全ての {{jsxref("WebAssembly.Table")}} インスタンスは Table.prototype を継承します。{{jsxref("WebAssembly.Table()")}} コンストラクタのプロトタイプオブジェクトは全ての {{jsxref( "WebAssembly.Table")}} インスタンスに影響するように変更可能です。

+ +

プロパティ

+ +
+
Table.prototype.constructor
+
このオブジェクトのインスタンスを生成した関数を返します。デフォルトでは  {{jsxref("WebAssembly.Table()")}} コンストラクタです。
+
{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}
+
テーブルの長さを返します。すなわち、要素数です。
+
+

メソッド

+
+
{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}
+
アクセサ関数。インデックスから格納された要素を取得します。
+
{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}
+
指定した要素数で Table インスタンスを拡張します。
+
{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}
+
指定したインデックスに要素を格納します。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様策定状況コメント
{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}{{Spec2('WebAssembly JS')}}初回ドラフト定義
+ +

ブラウザ実装状況

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}

+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..fabc275890 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,89 @@ +--- +title: 予約語 +slug: Web/JavaScript/Reference/Reserved_Words +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +

以下は予約語であり、変数、関数、メソッド、あるいはオブジェクトの識別子として用いることはできません。以下は ECMAScript の仕様で既存のキーワードとして予約されているものです。

+ +
+ +
+ +

将来の使用を見越した予約語

+ +

以下は ECMAScript の仕様で将来のキーワードとして予約されているものです。現在は特別な機能を持っていませんが、将来機能を持つときのために、識別子として使用できません。このキーワードは、厳格モード、非厳格モードの両方で使用できません。

+ +
注記: Firefox 5 (JavaScript 1.8.6) より以前では、これらのキーワードは厳格モードでないときには使用できました。この ECMAScript 違反は Firefox 5 で修正されました。
+ +
+ +
+ +

以下は 厳格モードのコード として実行されたときに 、ECMAScript の仕様で将来のキーワードとして 予約されているものです。ただし、JavaScript 1.7 以上では let と yield は伝統的な Mozilla 特有の機能を持っています。

+ +
+
    +
  • implements
    • +
  • interface
    • +
  • let
    • +
  • package
    • +
  • private
    • +
  • protected
    • +
  • public
    • +
  • static
    • +
  • yield
    • +
+
+ +

const は ECMAScript の仕様によって将来のキーワードとして予約されていますが、Mozilla やほとんどの他のブラウザが非標準の拡張として実装していることに注意してください。さらに、 export と import はかつて Mozilla で実装されていましたが、現在では予約語となっています。

+ +

加えて、 null 、 true 、 false リテラルは ECMAScript の仕様で予約されています。

+ +

予約語の利用

+ +

実際に、予約語は識別子のみに適用されます。es5.github.com/#A.1 の記述にあるように、これらは全て予約語を排除しない識別名です。

+ +

a.import
+ a["import"]
+ a = { import: "test" }.

+ +

反対に、以下は識別子であるので違反です。識別子は関数宣言や関数式に使用されます。

+ +

function import() {}

diff --git a/files/ja/conflicting/web/javascript/reference/operators/index.html b/files/ja/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..5010c8eb89 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,232 @@ +--- +title: 比較演算子 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +tags: + - JavaScript + - Operator + - Reference + - 演算子 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript には、厳密な比較と型変換の比較の両方があります。厳密な比較 (例: ===) は、オペランドが同じ型で、内容も一致している場合にのみ真になります。もっとよく使用される抽象的な比較 (例: ==) は、比較する前にオペランドを同じ型に変換します。抽象的な関係比較 (例: <=) では、比較前にまずオペランドがプリミティブ型に変換され、それから同じ型に変換されます。

+ +

文字列は Unicode 値を使用した標準的な辞書順に基づいて比較されます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}
+ +
+
{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}
+
+ +
+ + + +

比較の機能は以下のとおりです。

+ + + +

等価演算子

+ +

等価 (==)

+ +

等価演算子は、2 つのオペランドが同じ型でないならばオペランドを変換して、それから厳密な比較を行います。両方のオペランドがオブジェクトならば、 JavaScript は内部参照を比較するので、オペランドがメモリ内の同じオブジェクトを参照するときに等しくなります。

+ +

構文

+ +
x == y
+
+ +

例

+ +
1    ==  1         // true
+'1'  ==  1         // true
+1    == '1'        // true
+0    == false      // true
+0    == null       // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 == object2 // false
+0    == undefined  // false
+null == undefined  // true
+
+ +

不等価 (!=)

+ +

不等価演算子は、オペランド同士が等しくないならば真を返します。2 つのオペランドが同じ型でないならば、JavaScript は適切な型にオペランドを変換して比較しようとします。両方のオペランドがオブジェクトならば、JavaScript は内部参照を比較するので、オペランドがメモリ内の異なるオブジェクトを参照するときには等しくなりません。

+ +

構文

+ +
x != y
+ +

例

+ +
1 !=   2     // true
+1 !=  '1'    // false
+1 !=  "1"    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

一致 / 厳密等価 (===)

+ +

厳密等価演算子は、型変換なしでオペランド同士が (上に示した通り) 厳密に等しければ真を返します。

+ +

構文

+ +
x === y
+ +

例

+ +
3 === 3   // true
+3 === '3' // false
+var object1 = {'key': 'value'}, object2 = {'key': 'value'};
+object1 === object2 //false
+ +

不一致 / 厳密不等価 (!==)

+ +

厳密不等価演算子は、オペランド同士が等しくないか、型が等しくない、あるいはその両方ならば真を返します。

+ +

構文

+ +
x !== y
+ +

例

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

関係演算子

+ +

これらの演算子のそれぞれは、比較が行われる前に、そのオペランドをプリミティブに{{Glossary("Type_coercion", "型強制")}}します。両方とも文字列として終わる場合は、辞書順で比較され、そうでない場合は数値に変換されて比較されます。 NaN との比較は常に false を生み出します。

+ +

大なり演算子 (>)

+ +

大なり演算子は、左オペランドが右オペランドより大きければ、真を返します。

+ +

構文

+ +
x > y
+ +

例

+ +
4 > 3 // true
+
+ +

大なりイコール演算子 (>=)

+ +

大なりイコール演算子は、左オペランドが右オペランド以上ならば、真を返します。

+ +

構文

+ +
 x >= y
+ +

例

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

小なり演算子 (<)

+ +

小なり演算子は、左オペランドが右オペランドより小さければ、真を返します。

+ +

構文

+ +
 x < y
+ +

例

+ +
3 < 4 // true
+
+ +

小なりイコール演算子 (<=)

+ +

小なりイコール演算子は、左オペランドが右オペランド以下ならば、真を返します。

+ +

構文

+ +
 x <= y
+ +

例

+ +
3 <= 4 // true
+3 <= 3 // true
+
+ +

等価演算子の使用

+ +

標準等価演算子 (== と !=) は 2 つのオペランドの比較に抽象的等価比較アルゴリズムを使用します。オペランドの型が異なる場合は、比較を行う前にそれらを同じ型に変換しようとします。例えば 5 == '5' という式では、比較を行う前に右オペランドの文字列を数値に変換します。

+ +

厳密等価演算子 (=== と !==) は厳密等価比較アルゴリズムを使用して、オペランドの型が同一かどうかに関する比較も行います。オペランドの型が異なれば、例えば 5 と '5' の比較では、同一性比較 5 !== '5' は true と評価され、 5 === '5' のチェックは false 評価されます。

+ +

厳密等価演算子を使うのは、オペランドが特定の型の特定の値でなければならない場合、言い換えればオペランドの正確な型が重要な場合です。それ以外では、2 つのオペランドが同じ型でなくても比較が可能になる、標準的な等価演算子を使えます。

+ +

比較に型の変換が関わるとき (つまり厳密でない比較のとき)、 JavaScript は以下のように {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 型のオペランドを変換します。

+ + + +
メモ: String オブジェクトはオブジェクト型であり、文字列型ではありません！ String オブジェクトはほとんど使わないので、次の結果に驚くかもしれません。
+ +
// 両方のオペランドが文字列型 (すなわちプリミティブな文字列) なので、true
+'foo' === 'foo'
+
+var a = new String('foo');
+var b = new String('foo');
+
+// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false
+a == b
+
+// a と b はオブジェクト型で、異なるオブジェクトを参照しているので、false
+a === b
+
+// a と 'foo' は異なる型で、比較前にオブジェクト (a) は
+// 文字列 'foo' に変換されるので、真
+a == 'foo'
+ +

仕様書

+ + + + + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.operators.comparison")}}

+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/javascript/reference/operators/yield/index.html b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html new file mode 100644 index 0000000000..69be44e8d9 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators/yield/index.html @@ -0,0 +1,7 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Statements/yield +translation_of: Web/JavaScript/Reference/Operators/yield +translation_of_original: Web/JavaScript/Reference/Statements/yield +--- +

『 JavaScript 1.7 の新機能』、『イテレータとジェネレータ』 を参照して下さい。

diff --git a/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html new file mode 100644 index 0000000000..8b43c3de26 --- /dev/null +++ b/files/ja/conflicting/web/javascript/reference/operators_f71733c8e7001a29c3ec40d8522a4aca/index.html @@ -0,0 +1,295 @@ +--- +title: 論理演算子 +slug: Web/JavaScript/Reference/Operators/Logical_Operators +tags: + - JavaScript + - Operator +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operators")}}
+ +

概要

+ +

{{ 原語併記("論理演算子", "Logical operators") }} は、基本的に真偽（論理）値とともに用いられ真偽値を返します。しかし、&& および || 演算子は真偽値ではない値も使うことができるため、その場合は、真偽値ではない値を返すことがあります。その場合の考え方は以下の「説明」の欄の記載の通りとなります。

+ +

説明

+ +

論理演算子を以下の表で説明します。:

+ + + + + + + + + + + + + + + + + + + + + + + + +
演算子使用法説明
論理 AND(&&)expr1 && expr2expr1 を false と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象の両方が true ならば、&& は、true を返し、そうでなければ、false を返します。
論理 OR (||)expr1 || expr2expr1 を true と見ることができる場合は、expr1 を返します。そうでない場合は、expr2 を返します。したがって、真偽値と共に使われた場合、 演算対象のどちらかが true ならば、|| は、true を返し、両方とも false の場合は、false を返します。
論理 NOT (!)!expr単一の演算対象が true と見ることができる場合は、false を返します。そうでない場合は、true を返します。
+ +

true に変換できる値は、いわゆる {{Glossary("truthy")}} です。false に変換できる値は、いわゆる {{Glossary("falsy")}} です。

+ +

false と見ることができる式の例は、null、0、空文字列 ("")、あるいは、undefined と評価されるものです。

+ +

&& と || 演算子が真偽値ではない値である演算対象とともに用いることができても、それらは、真偽演算子と考えることができます。なぜなら、それらの戻り値は、常に、真偽値と見ることができるからです。

+ +

ショートサーキット評価

+ +

論理演算子は左から右へ評価されるため、論理演算子で左辺を評価した時点で論理式の結果が確定した場合には右辺の評価を行わないことを、ショートサーキット評価といいます。例えば、A && Bという論理式があった場合、Aがfalseなら、その時点で式全体の結果はfalseで確定するため、Bがどうであるかについてはチェックしません。:

+ + + +

　上記の式の anything の部分は評価されません。また、上記の式の anything の部分は (括弧で示しているとおり) ひとつの論理式ですので注意してください。

+ +

例えば、以下の 2 つの関数は等価です。

+ +
function shortCircuitEvaluation() {
+  doSomething() || doSomethingElse()
+}
+
+function equivalentEvaluation() {
+  var flag = doSomething();
+  if (!flag) {
+    doSomethingElse();
+  }
+}
+
+ +

しかし、以下の式は等価ではありません。これは演算子の優先順位のためであり、右側の演算子をひとつの式にする (必要に応じて括弧でグループ化する) 必要性の重要度を高めています。

+ +
false && true  || true      // true を返す
+false && (true || true)     // false を返す
+ +

論理 AND (&&)

+ +

以下のコードは、&& (論理 AND) 演算子の例を示しています。

+ +
a1 = true  && true      // t && t true を返します。
+a2 = true  && false     // t && f false を返します。
+a3 = false && true      // f && t false を返します。
+a4 = false && (3 == 4)  // f && f false を返します。
+a5 = "Cat" && "Dog"     // t && t "Dog" を返します。
+a6 = false && "Cat"     // f && t false を返します。
+a7 = "Cat" && false     // t && f false を返します。
+
+ +

論理 OR (||)

+ +

以下のコードは、|| (論理 OR) 演算子の例を示しています。

+ +
o1 = true  || true       // t || t true を返します。
+o2 = false || true       // f || t true を返します。
+o3 = true  || false      // t || f true を返します。
+o4 = false || (3 == 4)   // f || f false を返します。
+o5 = "Cat" || "Dog"      // t || t "Cat" を返します。
+o6 = false || "Cat"      // f || t "Cat" を返します。
+o7 = "Cat" || false      // t || f "Cat" を返します。
+
+ +

論理 NOT (!)

+ +

以下のコードは、! (論理 NOT) 演算子の例を示しています。

+ +
n1 = !true              // !t false を返します。
+n2 = !false             // !f true を返します。
+n3 = !"Cat"             // !t false を返します。
+
+ +

変換規則

+ +

AND から OR への変換

+ +

Boolean について以下の演算を行います:

+ +
bCondition1 && bCondition2
+ +

これは以下の演算と等価です:

+ +
!(!bCondition1 || !bCondition2)
+ +

OR から AND への変換

+ +

Boolean について以下の演算を行います:

+ +
bCondition1 || bCondition2
+ +

これは以下の演算と等価です:

+ +
!(!bCondition1 && !bCondition2)
+ +

NOT 間の変換

+ +

Boolean について以下の演算を行います:

+ +
!!bCondition
+ +

これは以下の演算と等価です:

+ +
bCondition
+ +

入れ子の括弧を削除する

+ +

論理演算子は左から右へ評価されるため、複雑な式の中にある括弧をいくつかの規則に従って削除することができます。

+ +

入れ子の AND を削除する

+ +

Boolean について以下の複雑な演算を行います:

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

これは以下の演算と等価です:

+ +
bCondition1 || bCondition2 && bCondition3
+ +

入れ子の OR を削除する

+ +

Boolean について以下の複雑な演算を行います:

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

これは以下の演算と等価です:

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('ES1')}}{{Spec2('ES1')}}最初期の定義
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}仕様書内のいくつかのセクションで定義: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}仕様書内のいくつかのセクションで定義: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}仕様書内のいくつかのセクションで定義: Logical NOT Operator, Binary Logical Operators
+ +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
論理 AND (&&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
論理 OR (||){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
論理 NOT (!){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
論理 AND (&&){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
論理 OR (||){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
論理 NOT (!){{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

関連情報

+ + diff --git a/files/ja/conflicting/web/opensearch/index.html b/files/ja/conflicting/web/opensearch/index.html new file mode 100644 index 0000000000..f7c679aae4 --- /dev/null +++ b/files/ja/conflicting/web/opensearch/index.html @@ -0,0 +1,73 @@ +--- +title: ウェブページからの検索エンジンの追加 +slug: Adding_search_engines_from_web_pages +tags: + - Add-ons + - Search plugins +translation_of: Web/OpenSearch +translation_of_original: Web/API/Window/sidebar/Adding_search_engines_from_Web_pages +--- +

Firefox では JavaScript コードから検索プラグインをインストールすることができ、OpenSearch と Sherlock という 2 つの検索プラグインフォーマットをサポートしています。

+ +
注意: Firefox 2 からは、OpenSearch が Firefox の検索フォーマットとして推奨されています。Sherlock のサポートは将来廃止する予定です ({{bug(862137)}})。
+ +

JavaScript コードが検索プラグインをインストールしようとすると、Firefox はユーザにプラグインのインストールを許可するか尋ねる警告を表示します。

+ +

{{ 英語版章題("Installing OpenSearch plugins") }}

+ +

OpenSearch プラグインのインストール

+ +

OpenSearch プラグインをインストールするには、window.external.AddSearchProvider() DOM メソッドを使う必要があります。このメソッドの構文はこのようになります。

+ +
window.external.AddSearchProvider(engineURL);
+
+ +

engineURLは検索プラグイン XML ファイルへの絶対 URL です。

+ +
注意: OpenSearch は Firefox 2 以降でのみサポートされています。
+ +

{{ 英語版章題("Installing Sherlock plugins") }}

+ +

Sherlock プラグインのインストール

+ +
{{obsolete_header}}
+ +
+

window.sidebar.addSearchEngine のサポートは Firefox 44 で廃止しました。

+
+ +

Sherlock プラグインをインストールするには、window.sidebar.addSearchEngine() を呼び出す必要があり、その構文は以下のとおりです。

+ +
window.sidebar.addSearchEngine(engineURL,iconURL,suggestedName,suggestedCategory);
+
+ + + +

Sherlock の詳細は http://developer.apple.com/macosx/sherlock/ を参照ください。

+ +

{{ 英語版章題("Browser search engine capability detection") }}

+ +

ブラウザの検索エンジン機能の検出

+ +

検索エンジンを追加するための API は Firefox 1.5 から Firefox 2 までに変更されており、また Firefox 1.5 は OpenSearch 記述ファイルをサポートしていません。このため、検索エンジンを追加する時に後方互換性を維持したい場合、すなわち Firefox 1.5, Firefox 2.0, IE7 で動作するようにしたい場合、Web ページの製作者は Sherlock と OpenSearch の両方のフォーマットに対応し、またブラウザの機能を適宜検出しなければなりません。次のコード片はこういったことを行う一つの例です。

+ +
function installSearchEngine() {
+ if (window.external && ("AddSearchProvider" in window.external)) {
+   // Firefox 2 と IE 7 では OpenSearch を使う
+   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
+ } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
+   // Firefox 1.5 以下では Sherlock を使う
+   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
+                                  "http://example.com/search-icon.png",
+                                  "Search Plugin", "");
+ } else {
+   // 検索エンジンはサポートされていない (IE 6, Opera など)
+   alert("No search engine support");
+ }
+}
+
diff --git a/files/ja/conflicting/web/progressive_web_apps/index.html b/files/ja/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..36724f3ba5 --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,77 @@ +--- +title: レスポンシブデザイン +slug: Web_Development/Mobile/Responsive_design +tags: + - Apps + - Mobile + - Responsive Design + - Web Development +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Guide/Responsive_design +--- +

モバイル向けとデスクトップ向けの Web サイトの開発に対する 別々のサイト 手法に関連する問題に対する反応として、比較的新しい (実際は とても古い) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 A List Apart で紹介され、レスポンシブ Web デザイン として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。

+ +

長所

+ +

最初は、モバイルサイトを作成するための手法として提案されたものではありませんでしたが、分離したモバイルサイトの代わりにレスポンシブデザインは最近、モバイル・フレンドリーに対する第一歩として多くの注目を浴び始めました。

+ +
    +
  1. デバイスごとに異なる Web サイトをメンテナンスする必要がなくなるため、時間と費用を削減できます。
    2. +
  2. レスポンシブデザインは、1 つの URL だけで、すべてのデバイスのページを表示できます。
    3. +
  3. モバイルとデスクトップの Web ページで 1 つの URL を使用しているため、ソーシャルシェアの統計 (Facebook の「いいね」、Twitter のツイート数、Google plus の +1) が分離されません。
    4. +
  4. レスポンシブデザインはユーザーエージェントを気に掛ける必要がありません。
    5. +
+ +

この手法には本当に素晴らしい側面があります。ユーザーエージェント判別によらないため、サイトを分離する手法よりも柔軟性が高く、古くなりにくい点です。単純なサイトに対しては、他の選択肢よりも改修やメンテナンスが簡単です。

+ +

短所

+ +

この手法に何も制限がないわけではありません。コンテンツがクライアント側の JavaScript で処理されるため、変更は最小限となることが推奨されます。一般に、同じ DOM を動作させるために、別々に 2 つの JavaScript を記述すると、劇的に悪化することも改善することもあります。これが、Web アプリケーションがこの手法に適応していない大きな理由です。

+ +

もし フレキシブルなレイアウト に対応していなければ、既存のサイトをレスポンシブデザインにするには、スタイルシートも書き直す必要があります。これは不幸中の幸いと言えます。レイアウトをレスポンシブデザインに対応することは、CSS を近代化しきれいにする良い機会となるからです。

+ +

最後に、スクリプトやスタイルのコードを追加するため、分離サイト手法よりもパフォーマンスが悪化するかもしれません。これに対する回避策はありません。スクリプトやスタイルコードをリファクタリングして、根気強くバイト数を削減するしかありません。

+ +

この選択肢を選ぶとき

+ +

teixido_responsive-300x177.png上述したように、コンテンツの変更は難しいため、この手法を取り扱うとき、複雑なコードを追加せずにユーザに対してモバイルデバイスで異なる体験を与えることはできません。つまり、デスクトップとモバイルのサイトがとても似ているのであれば、この手法は素晴らしい選択肢となります。文章中心でユースケースが複数のデバイスにまたがっているのサイトによく適しています。以下に示す例が、すべてブログやポートフォリオであることに気づくでしょう！

+ +

用例

+ +

分離サイト手法ほどの人気はありませんが、日に日により多くの Web サイトがこの技術を採用し始めています。幸運にも、すべてのコードはクライアント側にあるため、この手法がサイトで技術的にどのように実装されているか見たければ、サイトを訪問して、“ページのソースを表示” をクリックしてください。

+ + + +

比較的若い手法であるにもかかわらず、既にいくつかベストプラクティスが現れています。例えば、サイトを一からデザインするのに、この選択肢を使おうと考えているなら、モバイルには初めから制約があるため、まず小さい画面で作成する のがよいでしょう。また、メディアクエリで既存のサイトの要素を隠す代わりに、進歩した機能をスタイルに使用することもよいことです。この方法は、メディアクエリをサポートしてない古いブラウザで正しくレイアウトすることができます。この手法のメリットについての素晴らしいプレゼンテーションが ここ から利用できます。

+ +

モバイル Web 開発手法

+ +

以下の記事は、モバイルプラットフォーム向け開発の背景や手法です。

+ + + +

関連文書

+ + + +
+

元の文書

+ +

Mozilla Webdev ブログの "Approaches to Mobile Web Development Part 3 - Responsive Design" の記事として 2011 年 5 月 27 日に Jason Grlicky によって発行されました。

+
+ +

 

diff --git a/files/ja/conflicting/web/progressive_web_apps/introduction/index.html b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..b7d3a2dc7b --- /dev/null +++ b/files/ja/conflicting/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,65 @@ +--- +title: プログレッシブウェブアプリの利点 +slug: Web/Progressive_web_apps/Advantages +tags: + - PWA + - Progressive web apps + - advantages + - concepts +translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications +translation_of_original: Web/Progressive_web_apps/Advantages +--- +

プログレッシブウェブアプリ（Progressive web apps、PWA）には、以下のセクションにリストされているすべての利点があります。

+ +

 

+ +

発見可能

+ +

最終的な目的は、ウェブアプリが検索エンジンでより適切に表現され、公開されやすく、カタログ化とランク付けされ、ブラウザーにメタデータを使用してそれらに特別な機能を提供することです。

+ +

一部の機能は、Open Graph のような独自の技術によって特定のウェブベースのプラットフォームですでにできるようになっています。 Open Graph は、メタタグを使用して HTML の <head> で類似のメタデータを指定するための形式を提供します。

+ +

ここで関連するウェブ標準はウェブアプリマニフェスト（Web app manifest）です。 これは、名前、アイコン、スプラッシュスクリーン、テーマカラーなどのアプリの機能を JSON 形式のマニフェストファイルで定義します。 これは、アプリ一覧やデバイスのホーム画面などのコンテキストで使用するためのものです。

+ + + +

インストール可能

+ +

アプリエクスペリエンスの中心的な部分は、ユーザーが自分のホーム画面にアプリアイコンを表示して、タップしてアプリをネイティブコンテナに開くことができることで、基盤となるプラットフォームとうまく統合されていると感じます。

+ +

最新のウェブアプリは、ウェブアプリマニフェスト内で設定されたプロパティや、ホーム画面に追加と呼ばれる最新のスマートフォンのブラウザーで利用可能な機能を介して、このネイティブアプリの感じを持つことができます。

+ +

リンク可能

+ +

ウェブの最も強力な機能の1つは、特定の URL でアプリにリンクできることです — アプリストアは不要で、複雑なインストールプロセスも不要です。 これこそがいつものことです。

+ +

ネットワーク非依存

+ +

最新のウェブアプリは、ネットワークの信頼性が低い場合、または存在しない場合でも機能します。 ネットワークの独立性の背景にある基本的な考え方は、次のことができるようにすることです。

+ + + +

これは技術の組み合わせによって達成されます — ページ要求を制御するサービスワーカー（オフラインでの保存など）、ネットワーク要求への応答をオフラインで保存するための Cache API（サイトアセット（静的なコンテンツ）の保存に非常に便利）、アプリケーションデータをオフラインで格納するための Web Storage や IndexedDB などのクライアント側のデータストレージ技術です。

+ +

プログレッシブ

+ +

最新のウェブアプリは、完全対応のブラウザーには非常にクールなエクスペリエンスを提供し、完全ではない対応のブラウザーには（あまり魅力的ではないが）許容可能なエクスペリエンスを提供するように開発できます。 プログレッシブエンハンスメント（progressive enhancement）などのベストプラクティスを使って、これを長年にわたって行ってきました。

+ +

再エンゲージ可能

+ +

ネイティブプラットフォームの大きな利点の1つは、アプリを見ていないときやデバイスを使用していないときでも、ユーザーが更新や新しいコンテンツに簡単に再エンゲージ（係り合い）できることです。 最新のウェブアプリでも、新しい技術を使用してこれを実行できます — ページを制御するためのサービスワーカー（Service Worker）、サービスワーカーを介してサーバーからアプリに直接更新を送信するための Web Push API 、ユーザーがブラウザーを見ていないときにユーザーとのエンゲージを援助するシステム通知を生成するための Notifications API といったもの。

+ +

レスポンシブ

+ +

レスポンシブウェブアプリ（Responsive web apps）では、メディアクエリやビューポートなどの技術を使用して、その UI があらゆる形状（デスクトップ、モバイル、タブレット、または次に来るものは何でも）に適合することを確認します。

+ +

安全

+ +

ウェブプラットフォームは、HTTPS を利用してセキュリティを念頭に置いてアプリを開発する限り、スヌーピング（覗き見）を防ぎ、コンテンツが改ざんされていないことを保証する安全な配信メカニズムを提供します。 さらに、PWA が正しい URL にあることを確認することで、PWA の本質を検証できます。 一方、アプリストア内のアプリは、多くの場合1つのもののように見えますが別のものになります（例）。

+ +

 

diff --git a/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..8def32aa25 --- /dev/null +++ b/files/ja/conflicting/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,781 @@ +--- +title: Firefox の SVG 実装状況 +slug: SVG_in_Firefox +tags: + - Firefox + - SVG +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +

W3C SVG test suite に、いくつかの基本的な SVG 構文と使用例があります。

+
+

{{gecko_callout_heading("2.0")}}

+

Gecko は 現在、SMIL を用いての SVG アニメーションをサポートしています。概要については、『SMIL を用いた SVG アニメーション』 をご覧下さい。SVG の完全なドキュメントはまだ完成に向けて作成中です。

+
+

要素の実装状況

+

SVG 1.1 要素の簡単な概要および現在のネイティブサポート状況を以下に列挙します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
要素注記
Structure モジュール
svg +
    +
  • 実装済
    • +
  • currentScale 属性と currentTranslate 属性は実装されていますが、パンとズームのユーザインターフェースは有りません。
    • +
  • SVGSVGElement +
      +
    • 未実装の属性 : contentScriptType 、 contentStyleType 、 viewport 、 currentView
      • +
    • 未実装のバインディング : getIntersectionList 、 getEnclosureList 、 checkIntersection 、 checkEnclosure 、 deselectAll
      • +
    • 最近実装されたバインディング : +
        +
      • pauseAnimations 、 unpauseAnimations 、 animationsPaused 、 getCurrentTime 、 setCurrentTime {{gecko_minversion_inline("2")}} 、 getElementById {{gecko_minversion_inline("11")}} 、 useCurrentView {{gecko_minversion_inline("15")}}
        • +
      +
      • +
    +
    • +
+
g +
    +
  • 実装済
    • +
+
defs +
    +
  • 実装済
    • +
+
desc +
    +
  • 実装済
    • +
  • DOM に保存されるだけでユーザインタフェースは無し
    • +
+
title +
    +
  • 実装済
    • +
  • Gecko 2.0 より、SVG オブジェクトにマウスを重ねると title 属性値が表示されるようになった {{gecko_minversion_inline("2")}}
    • +
+
metadata +
    +
  • 実装済
    • +
  • DOM に保存されるだけでユーザインタフェースは無し
    • +
+
symbol +
    +
  • 実装済
    • +
+
use +
    +
  • 実装済
    • +
  • Firefox 3.5/Gecko 1.9.1 で外部文書への参照が実装された ({{Bug(269482)}})
    • +
  • <svg:use> カスケーディング規則に完全に従っていない ({{Bug(265894)}})
    • +
  • SVGElementInstance ツリーにイベントを伝えない ({{Bug(265895)}})
    • +
+
Conditional Processing モジュール
switch +
    +
  • 実装済
    • +
+
Image モジュール
image +
    +
  • 実装済
    • +
  • Gecko 2.0 以前では <svg:image> はラスタ画像のみサポート ({{Bug(272288)}}).
    • +
  • Gecko 2.0 より、 <svg:image> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}
    • +
+
Style モジュール
style +
    +
  • 実装済
    • +
+
Shape モジュール
path +
    +
  • 実装済
    • +
  • SVGPathElement Interface +
      +
    • 未実装の属性 : normalizedPathSegList, animatedNormalizedPathSegList
      • +
    +
    • +
+
rect +
    +
  • 実装済
    • +
+
circle +
    +
  • 実装済
    • +
+
line +
    +
  • 実装済
    • +
+
ellipse +
    +
  • 実装済
    • +
+
polyline +
    +
  • 実装済
    • +
+
polygon +
    +
  • 実装済
    • +
+
Text モジュール
text +
    +
  • 実装済
    • +
  • 多くのプレゼンテーション属性が動作せず : (alignment-baseline, baseline-shift, dominant-baseline, font-variant, kerning, letter-spacing, word-spacing, text-decoration, direction, unicode-bidi, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)
    • +
  • x, y, dx, dy 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}
    • +
  • SVGTextElement +
      +
    • 未実装の属性 : textLength 、 lengthAdjust
      • +
    • 未実装のバインディング : selectSubString
      • +
    • 追加属性 : rotate {{gecko_minversion_inline("2")}}
      • +
    +
    • +
+
tspan +
    +
  • 実装済
    • +
  • 多くのプレゼンテーション属性が動作せず : (alignment-baseline, baseline-shift, dominant-baseline, font-variant, kerning, letter-spacing, word-spacing, text-decoration, direction, unicode-bidi, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical)
    • +
  • x, y, dx, dy 属性が複数の値を取れるようになった。 {{gecko_minversion_inline("2")}}
    • +
  • SVGTSpanElement +
      +
    • 未実装の属性 : textLength 、 lengthAdjust
      • +
    • 未実装のバインディング : selectSubString
      • +
    • 追加属性 : rotate {{gecko_minversion_inline("2")}}
      • +
    +
    • +
+
tref +
    +
  • 未実装 ({{Bug(273171)}}).
    • +
+
textPath +
    +
  • 実装済
    • +
  • 未実装バインディング : selectSubString
    • +
+
altGlyph +
    +
  • Gecko 2.0 では tspan として実装され、フォント機能は無い ({{Bug(456286)}} / {{Bug(571808)}}).
    • +
+
altGlyphDef +
    +
  • 未実装
    • +
+
altGlyphItem +
    +
  • 未実装
    • +
+
glyphRef +
    +
  • 未実装
    • +
+
Marker モジュール
marker +
    +
  • 実装済
    • +
+
Color Profile モジュール
color-profile +
    +
  • 未実装 ({{Bug(427713)}}).
    • +
+
Gradient モジュール
linearGradient +
    +
  • 実装済
    • +
+
radialGradient +
    +
  • 実装済
    • +
+
stop +
    +
  • 実装済
    • +
+
Pattern モジュール
pattern +
    +
  • 実装済
    • +
+
Clip モジュール
clipPath +
    +
  • 実装済
    • +
+
Mask モジュール
mask +
    +
  • 実装済
    • +
+
Filter モジュール
filter +
    +
  • 実装済
    • +
  • 擬似入力として次のものが実装されている : SourceGraphic 、 SourceAlpha 、 FillPaint {{gecko_minversion_inline("17")}}
    + StrokePaint が実装済 {{gecko_minversion_inline("17")}}
    • +
  • 未実装の擬似入力ないしフィルタ要素を使った場合、フィルタは無視され対応する図形はフィルタ無しで表示される
    • +
+
feBlend +
    +
  • 実装済
    • +
+
feColorMatrix +
    +
  • 実装済
    • +
+
feComponentTransfer +
    +
  • 実装済
    • +
+
feComposite +
    +
  • 実装済
    • +
+
feConvolveMatrix +
    +
  • 実装済
    • +
+
feDiffuseLighting +
    +
  • 実装済
    • +
+
feDisplacementMap +
    +
  • 実装済
    • +
+
feFlood +
    +
  • 実装済
    • +
+
feGaussianBlur +
    +
  • 実装済
    • +
+
feImage +
    +
  • 実装済
    • +
  • Gecko 2.0 以前は <svg:feImage> はラスタ画像のみサポート
    • +
  • Gecko 2.0 より、 <svg:feImage> はラスタ画像と SVG 画像をサポート {{gecko_minversion_inline("2")}}
    • +
  • ドキュメントフラグメントは <svg:feImage> で未サポート ({{bug(455986)}})
    • +
+
feMerge +
    +
  • 実装済
    • +
+
feMergeNode +
    +
  • 実装済
    • +
+
feMorphology +
    +
  • 実装済
    • +
+
feOffset +
    +
  • 実装済
    • +
+
feSpecularLighting +
    +
  • 実装済
    • +
+
feTile +
    +
  • 実装済
    • +
+
feTurbulence +
    +
  • 実装済
    • +
+
feDistantLight +
    +
  • 実装済
    • +
+
fePointLight +
    +
  • 実装済
    • +
+
feSpotLight +
    +
  • 実装済
    • +
+
feFuncR +
    +
  • 実装済
    • +
+
feFuncG +
    +
  • 実装済
    • +
+
feFuncB +
    +
  • 実装済
    • +
+
feFuncA +
    +
  • 実装済
    • +
+
Cursor モジュール
cursor +
    +
  • 未実装 ({{Bug(177193)}}).
    • +
+
Hyperlinking モジュール
a +
    +
  • 次の属性のみ実装 : xlink:href 、 xlink:show 、 xlink:target 、 xlink:title
    • +
+
View モジュール
view +
    +
  • Gecko 15.0 で実装済 ({{Bug(512525)}}) {{gecko_minversion_inline("15.0")}}
    • +
+
Scripting モジュール
script +
    +
  • 実装済
    • +
+
Animation モジュール
animate +
    +
  • Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}
    • +
+
set +
    +
  • Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}
    • +
+
animateMotion +
    +
  • Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}
    • +
+
animateTransform +
    +
  • Gecko 2.0 で実装済 {{gecko_minversion_inline("2.0")}}
    • +
+
animateColor +
    +
  • 未実装 ({{Bug(436296)}}).
    • +
+
mpath +
    +
  • Gecko 2.0 で実装済 ({{Bug(436418)}}). {{gecko_minversion_inline("2.0")}}
    • +
+
Font モジュール
font +
    +
  • 未実装 ({{Bug(119490)}}).
    • +
+
font-face +
    +
  • 未実装
    • +
+
glyph +
    +
  • 未実装
    • +
+
missing-glyph +
    +
  • 未実装
    • +
+
hkern +
    +
  • 未実装
    • +
+
vkern +
    +
  • 未実装
    • +
+
font-face-src +
    +
  • 未実装
    • +
+
font-face-uri +
    +
  • 未実装
    • +
+
font-face-format +
    +
  • 未実装
    • +
+
font-face-name +
    +
  • 未実装
    • +
+
definition-src +
    +
  • 未実装
    • +
+
Extensibility モジュール
foreignObject +
    +
  • 実装済
    • +
+
diff --git a/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..8d63ce70da --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,411 @@ +--- +title: JavaScript で XPath を使用する +slug: Web/JavaScript/Introduction_to_using_XPath_in_JavaScript +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +--- +

このドキュメントでは、JavaScript の内部、拡張機能、そして Web サイトから XPath を使用するためのインターフェイスについて説明します。Mozilla は DOM 3 XPath をかなりの量実装しており、XPath 式は HTML と XML ドキュメントの両方に対して実行できます。

+ +

XPath を使用するための主なインターフェースは、Document オブジェクトの evaluate 関数です。

+ +

document.evaluate

+ +

このメソッドは、XML ベースのドキュメント (HTML ドキュメントを含む) に対して XPath 式を評価し、XPathResult オブジェクトを返します。このメソッドの既存のドキュメントは document.evaluate にありますが、今のところ我々が必要としているものには乏しいです。

+ +
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+
+ +

Parameters

+ +

evaluate 関数は合計5つのパラメータを取ります。

+ + + +

Return Value

+ +

resultType パラメータで指定された型の XPathResult オブジェクトを返します。XPathResult インターフェースはここで定義されています。

+ +

Implementing a Default Namespace Resolver

+ +

document オブジェクトの createNSResolver メソッドを使用して名前空間リゾルバを作成します。

+ +
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+
+ +

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> そして、namespaceResolver パラメータとして nsResolver 変数である document.evaluate を渡します。

+ +

注意: XPath は、ヌル名前空間の要素にのみマッチするように、接頭辞のない QNames を定義しています。XPath では、通常の要素参照 (例: xmlns='http://www.w3.org/1999/xhtml' の p[@id='_myid']) に適用されるデフォルトの名前空間を拾う方法はありません。NULL ではない名前空間のデフォルト要素にマッチさせるには、['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] のような形式を使用して特定の要素を参照する必要があります (このアプローチは、名前空間がわからない動的な XPath の場合にうまく機能します)。後者の方法を取りたい場合は、ユーザ定義の名前空間リゾルバを作成する方法を参照してください。

+ +

Notes

+ +

任意の DOM ノードを名前空間を解決するように適応させ、 XPath 式をドキュメント内で出現したノードのコンテキストからの相対評価を簡単に行えるようにします。このアダプタは、ノード上の DOM Level 3 メソッド lookupNamespaceURI と同様に動作し、 lookupNamespaceURI が呼び出された時点でのノードの階層内で利用可能な現在の情報を使用して、指定したプレフィックスから namespaceURI を解決します。また、暗黙の xml 接頭辞も正しく解決します。

+ +

Specifying the Return Type

+ +

The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

+ +

Simple Types

+ +

resultType に希望する結果タイプがどちらかに指定されている場合。

+ + + +

XPathResult オブジェクトの以下のプロパティにそれぞれアクセスして、式の戻り値を取得します。

+ + + +
Example
+ +

The following uses the XPath expression count(//p) to obtain the number of <p> elements in an HTML document:

+ +
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
+
+ +

Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the stringValue property is requested, so the following code will not work:

+ +
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+
+ +

Instead, it will return an exception with the code NS_DOM_TYPE_ERROR.

+ +

Node-Set Types

+ +

The XPathResult object allows node-sets to be returned in 3 principal different types:

+ + + +
Iterators
+ +

When the specified result type in the resultType parameter is either:

+ + + +

The XPathResult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the iterateNext() method of the XPathResult.

+ +

Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

+ +

Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

+ +
Iterator Example
+ +
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
+
+try {
+  var thisNode = iterator.iterateNext();
+
+  while (thisNode) {
+    alert( thisNode.textContent );
+    thisNode = iterator.iterateNext();
+  }
+}
+catch (e) {
+  alert( 'Error: Document tree modified during iteration ' + e );
+}
+
+ +
Snapshots
+ +

When the specified result type in the resultType parameter is either:

+ + + +

The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

+ +

Snapshots do not change with document mutations, so unlike the iterators, the snapshot does not become invalid, but it may not correspond to the current document, for example, the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.

+ +
Snapshot Example
+ +
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
+{
+  alert( nodesSnapshot.snapshotItem(i).textContent );
+}
+
+ +
First Node
+ +

When the specified result type in the resultType parameter is either:

+ + + +

The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

+ +

Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.

+ +
First Node Example
+ +
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+alert( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+
+ +

The ANY_TYPE Constant

+ +

When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

+ +

It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

+ +

To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

+ +

Examples

+ +

Within an HTML Document

+ +

The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.

+ +

To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

+ +
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+
+ +

Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

+ +

Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

+ +

The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the iterateNext() method of the returned object:

+ +
var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+
+ +

Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

+ +

Evaluating against an XML document within an Extension

+ +

The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

+ +
<?xml version="1.0"?>
+<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
+  <person>
+	<name first="george" last="bush" />
+	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
+	<phoneNumber>202-456-1111</phoneNumber>
+  </person>
+  <person>
+	<name first="tony" last="blair" />
+	<address street="10 downing street" city="london" country="uk"/>
+	<phoneNumber>020 7925 0918</phoneNumber>
+  </person>
+</people>
+
+ +

To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

+ +

JavaScript used in the extensions xul/js documents.

+ +
var req = new XMLHttpRequest();
+
+req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
+req.send(null);
+
+var xmlDoc = req.responseXML;
+
+var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
+
+var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

Note

+ +

When the XPathResult object is not defined, the constants can be retrieved in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

+ +
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
+ +

Appendix

+ +

Implementing a User Defined Namespace Resolver

+ +

This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

+ +
'//xhtml:td/mathml:math'
+
+ +

will select all MathML expressions that are the children of (X)HTML table data cell elements.

+ +

In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

+ +
function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+
+ +

Our call to document.evaluate would then looks like:

+ +
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

Implementing a default namespace for XML documents

+ +

As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

+ +
<?xml version="1.0" encoding="UTF-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+    <entry />
+    <entry />
+    <entry />
+</feed>
+
+ +

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

+ +

One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:

+ +
function resolver() {
+    return 'http://www.w3.org/2005/Atom';
+}
+doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
+
+ +

Note that a more complex resolver will be required if the document uses multiple namespaces.

+ +

An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

+ +

Using XPath functions to reference elements with a default namespace

+ +

Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

+ +

Getting specifically namespaced elements and attributes regardless of prefix

+ +

If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.

+ +

While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).

+ +

For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

+ +

This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

+ +

In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

+ +
var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
+var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
+var thisitemEl = thislevel.iterateNext();
+
+ +

XPathResult Defined Constants

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Result Type Defined ConstantValueDescription
ANY_TYPE0A result set containing whatever type naturally results from the evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
+ +

See also

+ + + +
+

Original Document Information

+ +
    +
  • Based Upon Original Document Mozilla XPath Tutorial
    • +
  • Original Source Author: James Graham.
    • +
  • Other Contributors: James Thompson.
    • +
  • Last Updated Date: 2006-3-25.
    • +
+
diff --git a/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html new file mode 100644 index 0000000000..9186a55b76 --- /dev/null +++ b/files/ja/conflicting/web/xpath/introduction_to_using_xpath_in_javascript_caa7dfd0899fa1d0dfa5b1eb32e49ac7/index.html @@ -0,0 +1,94 @@ +--- +title: Using XPath +slug: Using_XPath +tags: + - AJAX + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +

+

XPath は XML 文書の一部を指し示すための言語であり、W3C 勧告です。 +

この記事では JavaScript のコードから XPath の機能を使うための Mozilla のインターフェイスについて説明します。これらは DOM Level 3 XPath (現時点では W3C Working Group Note) に記載されているものです。 +

この記事は XPath それ自体について教えるものではありません。XPath についてよく知らなければ、 W3Schools XPath tutorial を参照して下さい。 +

{{ 英語版章題("Wrapper function") }} +

+

ラッパ関数

+

次の関数を使うと、特定の XML ノードに対して XPath 式を評価する事ができます。第一引数は DOM ノードもしくは Document オブジェクトで、第二引数は XPath 式を定義した文字列です。 +

+
// 特定の DOM ノードもしくは Document オブジェクト (aNode) に対して
+// XPath 式 aExpression を評価し、その結果を配列として返す。
+// 最初の作業を行った wanderingstan at morethanwarm dot mail dot com に感謝します。
+function evaluateXPath(aNode, aExpr) {
+  var xpe = new XPathEvaluator();
+  var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
+    aNode.documentElement : aNode.ownerDocument.documentElement);
+  var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
+  var found = [];
+  var res;
+  while (res = result.iterateNext())
+    found.push(res);
+  return found;
+}
+
+

この関数では new XPathEvaluator() を使用しています。このコンストラクタは Mozilla 固有のものです。他のブラウザで使用される可能性のある Web ページのスクリプトでは、 new XPathEvaluator() の呼び出しを次のコードに置き換えて下さい。 +

+
  // XPathEvaluator は Document を実装するオブジェクトに実装されている
+  var xpe = aNode.ownerDocument || aNode;
+
+

この場合、 XPathNSResolver の作成は次のように単純にできます。 +

+
  var nsResolver = xpe.createNSResolver(xpe.documentElement);
+
+

ただ、 createNSResolver は、 XPath 式の中の名前空間接頭辞が検索対象の文書のものと一致する場合にしか使うべきではないということに注意してください。一致しない場合には、独自の XPathNSResolver の実装を用意しなければなりません。 +

XMLHttpRequest を使って (Parsing and serializing XML にあるように) ローカルもしくはリモートの XML ファイルを DOM ツリーに読み込んだ場合には、 evaluateXPath() の第一引数に req.responseXML を指定します。 +

{{ 英語版章題("Sample usage") }} +

+

使用例

+

次のような XML 文書があるとします。 (How to create a DOM tree と Parsing and serializing XML も参照して下さい) +

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

関数 evaluateXPath を使って、XPath 式でこの文書を「クエリ」する事ができます。DOM ツリーを走査しても同様の結果を得られますが、XPath 式を使った方がずっと高速で強力です。id 属性に頼る事ができれば document.getElementById() は強力ですが、XPath の強力さには全く及びません。いくつか例を示します。 +

+
// 文書内の全ての人物の苗字を表示する
+var results = evaluateXPath(people, "//person/@last-name");
+for (var i in results)
+  alert("Person #" + i + " has the last name " + results[i].value);
+
+// 2 人目の人物のノードを得る
+results = evaluateXPath(people, "/people/person[2]");
+
+// デンバーに住所を持つ全ての人物ノードを得る
+results = evaluateXPath(people, "//person[address/@city='denver']");
+
+// 通りの名前に "south" が含まれる全ての住所を得る
+results = evaluateXPath(people,  "//address[contains(@street, 'south')]");
+alert(results.length);
+
+

{{ 英語版章題("Resources") }} +

+

資料

+ +

 

+ +

{{ languages( { "en": "en/Using_XPath", "fr": "fr/Utilisation_de_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}

-- cgit v1.2.3-54-g00ecf