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 --- files/ja/about/index.html | 5 - .../index.html | 33 - files/ja/adding_feed_readers_to_firefox/index.html | 49 - .../index.html | 73 - .../index.html | 24 - .../ant_script_to_assemble_an_extension/index.html | 74 - .../index.html | 1063 --------- files/ja/bugzilla-ja/2.20-ja/index.html | 54 - files/ja/bugzilla-ja/3.0-ja/index.html | 62 - files/ja/bugzilla-ja/index.html | 84 - files/ja/bugzilla-ja/l10n/index.html | 15 - .../guide/about/accountcreation/index.html | 23 - .../bugzilla-jp/guide/about/bugdetails/index.html | 90 - .../guide/about/changeaccountprefs/index.html | 34 - files/ja/bugzilla-jp/guide/about/index.html | 16 - .../guide/about/productsandcomponents/index.html | 52 - .../guide/about/trunkandbranch/index.html | 17 - .../bugzilla-jp/guide/about/whatisbug/index.html | 10 - .../guide/about/whatisbugzilla/index.html | 14 - files/ja/bugzilla-jp/guide/comment/index.html | 19 - .../bugzilla-jp/guide/comment/linkrules/index.html | 23 - files/ja/bugzilla-jp/guide/contribute/index.html | 34 - files/ja/bugzilla-jp/guide/grossary/index.html | 220 -- files/ja/bugzilla-jp/guide/index.html | 65 - files/ja/bugzilla-jp/guide/lifecycle/index.html | 33 - .../bugzilla-jp/guide/lifecycle/mozilla/index.html | 65 - .../guide/lifecycle/mozillagumi/index.html | 46 - .../guide/lifecycle/qamozilla/index.html | 40 - .../guide/lifecycle/webstandard/index.html | 56 - .../guide/lifecycle/webtools/index.html | 31 - .../guide/management/deleteaccount/index.html | 9 - files/ja/bugzilla-jp/guide/management/index.html | 11 - .../guide/management/stopaccount/index.html | 16 - .../guide/management/upgradeaccount/index.html | 30 - .../bugzilla-jp/guide/report/crashbugs/index.html | 24 - .../guide/report/enhancement/index.html | 10 - files/ja/bugzilla-jp/guide/report/index.html | 39 - .../guide/report/memoryleakbugs/index.html | 10 - .../guide/report/renderingbugs/index.html | 14 - .../guide/report/securitybugs/index.html | 12 - .../ja/bugzilla-jp/guide/report/uibugs/index.html | 15 - .../bugzilla-jp/guide/search/advanced/index.html | 21 - files/ja/bugzilla-jp/guide/search/hints/index.html | 39 - files/ja/bugzilla-jp/guide/search/index.html | 8 - .../ja/bugzilla-jp/guide/search/simple/index.html | 23 - files/ja/bugzilla-jp/guide/tracking/index.html | 14 - files/ja/bugzilla-jp/index.html | 16 - .../ja/building_a_mozilla_distribution/index.html | 123 -- files/ja/building_an_extension/index.html | 248 --- files/ja/building_with_vc8_express/index.html | 13 - files/ja/code_snippets/toolbar/index.html | 55 - files/ja/components/index.html | 16 - .../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 + files/ja/controlling_dns_prefetching/index.html | 35 - .../index.html | 32 - .../index.html | 145 -- files/ja/creating_toolbar_buttons/index.html | 169 -- .../css-2_quick_reference/all_in_a_page/index.html | 189 -- files/ja/css-2_quick_reference/index.html | 31 - files/ja/debnews/index.html | 9 - .../index.html | 31 - files/ja/developing_add-ons/index.html | 8 - files/ja/developing_mozilla/index.html | 67 - files/ja/devnews/20060705/index.html | 14 - files/ja/devnews/20060706/index.html | 47 - files/ja/devnews/20060712/index.html | 35 - files/ja/devnews/20060713/index.html | 12 - files/ja/devnews/20060719/index.html | 46 - files/ja/devnews/20060726/index.html | 13 - files/ja/devnews/20060802/index.html | 12 - files/ja/devnews/20060809/index.html | 38 - files/ja/devnews/20060817/index.html | 10 - files/ja/devnews/20060818/index.html | 10 - files/ja/devnews/20060821/index.html | 8 - files/ja/devnews/20060822-02/index.html | 8 - files/ja/devnews/20060822/index.html | 12 - files/ja/devnews/20060823/index.html | 16 - files/ja/devnews/20060825/index.html | 21 - files/ja/devnews/20060828/index.html | 36 - files/ja/devnews/20061002-02/index.html | 22 - files/ja/devnews/20061002/index.html | 15 - files/ja/devnews/20061025/index.html | 36 - files/ja/devnews/20061106/index.html | 45 - files/ja/devnews/20061107/index.html | 16 - files/ja/devnews/20061108/index.html | 15 - files/ja/devnews/20061114/index.html | 9 - files/ja/devnews/20061129/index.html | 10 - files/ja/devnews/20061208/index.html | 11 - files/ja/devnews/20061219/index.html | 17 - files/ja/devnews/20070207/index.html | 19 - files/ja/devnews/20070213/index.html | 12 - files/ja/devnews/20070219/index.html | 15 - files/ja/devnews/20070223/index.html | 17 - files/ja/devnews/20070302/index.html | 17 - files/ja/devnews/20070304/index.html | 20 - files/ja/devnews/20070312/index.html | 15 - files/ja/devnews/20070315/index.html | 28 - files/ja/devnews/20070320/index.html | 17 - files/ja/devnews/20070322/index.html | 12 - files/ja/devnews/20070323/index.html | 19 - files/ja/devnews/20070411/index.html | 8 - files/ja/devnews/20070424/index.html | 11 - files/ja/devnews/20070427/index.html | 19 - files/ja/devnews/20070501/index.html | 16 - files/ja/devnews/20070502/index.html | 29 - files/ja/devnews/20070509/index.html | 10 - files/ja/devnews/20070512/index.html | 10 - files/ja/devnews/20070523-2/index.html | 21 - files/ja/devnews/20070523/index.html | 10 - files/ja/devnews/20070529-2/index.html | 10 - files/ja/devnews/20070529/index.html | 9 - files/ja/devnews/20070530-02/index.html | 19 - files/ja/devnews/20070530/index.html | 14 - files/ja/devnews/20070604/index.html | 13 - files/ja/devnews/20070606-2/index.html | 46 - files/ja/devnews/20070606/index.html | 28 - files/ja/devnews/20070626/index.html | 10 - files/ja/devnews/20070628/index.html | 8 - files/ja/devnews/20070702/index.html | 29 - files/ja/devnews/20070710/index.html | 12 - files/ja/devnews/20070717/index.html | 8 - files/ja/devnews/20070718/index.html | 17 - files/ja/devnews/20070719/index.html | 17 - files/ja/devnews/20070730/index.html | 19 - files/ja/devnews/20070801/index.html | 17 - files/ja/devnews/20070803/index.html | 42 - files/ja/devnews/20070808/index.html | 8 - files/ja/devnews/20070910/index.html | 11 - files/ja/devnews/20070913/index.html | 19 - files/ja/devnews/20070918/index.html | 18 - files/ja/devnews/20070920/index.html | 35 - files/ja/devnews/20071005/index.html | 18 - files/ja/devnews/20071008/index.html | 31 - files/ja/devnews/20071012/index.html | 12 - files/ja/devnews/20071018/index.html | 14 - files/ja/devnews/20071101/index.html | 15 - files/ja/devnews/20071115/index.html | 16 - files/ja/devnews/20071126/index.html | 64 - files/ja/devnews/20071203/index.html | 75 - files/ja/devnews/20071210-02/index.html | 15 - files/ja/devnews/20071210/index.html | 90 - files/ja/devnews/20071211/index.html | 24 - files/ja/devnews/20071217/index.html | 78 - files/ja/devnews/20071218/index.html | 27 - files/ja/devnews/20080107/index.html | 86 - files/ja/devnews/20080115/index.html | 80 - files/ja/devnews/20080122/index.html | 78 - files/ja/devnews/20080129/index.html | 82 - files/ja/devnews/20080205/index.html | 72 - files/ja/devnews/20080207-2/index.html | 15 - files/ja/devnews/20080207/index.html | 10 - files/ja/devnews/20080212/index.html | 74 - files/ja/devnews/20080219/index.html | 74 - files/ja/devnews/20080226/index.html | 76 - files/ja/devnews/20080304/index.html | 79 - files/ja/devnews/20080310/index.html | 25 - files/ja/devnews/20080311/index.html | 79 - files/ja/devnews/20080318/index.html | 99 - files/ja/devnews/20080325/index.html | 71 - files/ja/devnews/20080401/index.html | 83 - files/ja/devnews/20080408/index.html | 90 - files/ja/devnews/20080415/index.html | 76 - files/ja/devnews/20080422/index.html | 82 - files/ja/devnews/20080429/index.html | 81 - files/ja/devnews/20080501/index.html | 16 - files/ja/devnews/20080506/index.html | 97 - files/ja/devnews/20080513/index.html | 91 - files/ja/devnews/20080520/index.html | 94 - files/ja/devnews/20080527/index.html | 76 - files/ja/devnews/20080603/index.html | 76 - files/ja/devnews/20080610/index.html | 104 - files/ja/devnews/20080617/index.html | 94 - files/ja/devnews/20080624/index.html | 82 - files/ja/devnews/20080630/index.html | 34 - files/ja/devnews/20080708/index.html | 82 - files/ja/devnews/20080715/index.html | 42 - files/ja/devnews/20080722/index.html | 56 - files/ja/devnews/20080728/index.html | 30 - files/ja/devnews/20080729/index.html | 42 - files/ja/devnews/20080805/index.html | 44 - files/ja/devnews/20080810/index.html | 22 - files/ja/devnews/20080812/index.html | 44 - files/ja/devnews/20080819/index.html | 44 - files/ja/devnews/20080826/index.html | 72 - files/ja/devnews/20080902/index.html | 50 - files/ja/devnews/20080909/index.html | 78 - files/ja/devnews/20080916/index.html | 64 - files/ja/devnews/20080923/index.html | 58 - files/ja/devnews/20080930-2/index.html | 22 - files/ja/devnews/20080930/index.html | 42 - files/ja/devnews/20081007/index.html | 58 - files/ja/devnews/20081014/index.html | 60 - files/ja/devnews/20081021/index.html | 58 - files/ja/devnews/20081028/index.html | 46 - files/ja/devnews/20081104/index.html | 42 - files/ja/devnews/20081111/index.html | 40 - files/ja/devnews/20081118/index.html | 70 - files/ja/devnews/20081125/index.html | 50 - files/ja/devnews/20081202/index.html | 52 - files/ja/devnews/20081209/index.html | 58 - files/ja/devnews/20081216/index.html | 64 - files/ja/devnews/20081223/index.html | 76 - files/ja/devnews/20090113/index.html | 46 - files/ja/devnews/20090120/index.html | 27 - files/ja/devnews/20090310/index.html | 58 - files/ja/devnews/20090324/index.html | 54 - files/ja/devnews/20090904/index.html | 11 - files/ja/devnews/index.html | 242 --- files/ja/dhtml/index.html | 19 - .../dom/about_the_document_object_model/index.html | 16 - files/ja/dom/dispatchevent_example/index.html | 28 - files/ja/dom/storage/index.html | 14 - .../dom_client_object_cross-reference/index.html | 5 - .../navigator/index.html | 620 ------ files/ja/dom_improvements_in_firefox_3/index.html | 29 - files/ja/dom_inspector/index.html | 69 - files/ja/dom_inspector/internals/index.html | 245 --- .../introduction_to_dom_inspector/index.html | 96 - files/ja/dom_inspector_faq/index.html | 44 - files/ja/dragdrop/drag_operations/index.html | 350 --- .../index.html | 108 - files/ja/dragdrop/index.html | 9 - .../ja/dragdrop/recommended_drag_types/index.html | 228 -- files/ja/drawing_text_using_a_canvas/index.html | 174 -- .../index.html | 89 - files/ja/e4x/processing_xml_with_e4x/index.html | 265 --- files/ja/feed_content_access_api/index.html | 167 -- files/ja/findbar_api/index.html | 93 - files/ja/full_page_zoom/index.html | 41 - .../index.html | 106 + .../index.html | 106 - .../tutorials/2d_breakout_game_phaser/index.html | 63 + .../2d_breakout_game_phaser/physics/index.html | 90 + .../bounce_off_the_walls/index.html | 105 + .../build_the_brick_field/index.html | 112 + .../collision_detection/index.html | 132 ++ .../create_the_canvas_and_draw_on_it/index.html | 112 + .../finishing_up/index.html | 97 + .../game_over/index.html | 86 + .../2d_breakout_game_pure_javascript/index.html | 49 + .../mouse_controls/index.html | 57 + .../move_the_ball/index.html | 140 ++ .../paddle_and_keyboard_controls/index.html | 128 ++ .../track_the_score_and_win/index.html | 94 + files/ja/games/tutorials/index.html | 25 + .../workflows/2d_breakout_game_phaser/index.html | 63 - .../2d_breakout_game_phaser/physics/index.html | 90 - .../bounce_off_the_walls/index.html | 105 - .../build_the_brick_field/index.html | 112 - .../collision_detection/index.html | 132 -- .../create_the_canvas_and_draw_on_it/index.html | 112 - .../finishing_up/index.html | 97 - .../game_over/index.html | 86 - .../2d_breakout_game_pure_javascript/index.html | 49 - .../mouse_controls/index.html | 57 - .../move_the_ball/index.html | 140 -- .../paddle_and_keyboard_controls/index.html | 128 -- .../track_the_score_and_win/index.html | 94 - files/ja/games/workflows/index.html | 25 - files/ja/glossary/base64/index.html | 558 +++++ files/ja/glossary/closure/index.html | 24 + .../constant(\345\256\232\346\225\260)/index.html" | 20 - files/ja/glossary/constant/index.html | 20 + files/ja/glossary/dhtml/index.html | 19 + files/ja/glossary/firewall/index.html | 22 + files/ja/glossary/global_attribute/index.html | 27 - files/ja/glossary/localization/index.html | 47 + files/ja/glossary/namespace/index.html | 21 + files/ja/glossary/routers/index.html | 29 + files/ja/glossary/signature/function/index.html | 59 + files/ja/glossary/signature/security/index.html | 37 + .../index.html" | 37 - .../signature/\351\226\242\346\225\260/index.html" | 59 - files/ja/glossary/slug/index.html | 23 + files/ja/glossary/ssl/index.html | 36 + files/ja/glossary/ssl_glossary/index.html | 36 - .../index.html" | 24 - .../index.html" | 23 - .../index.html" | 22 - .../index.html" | 29 - files/ja/hacking_mozilla/index.html | 55 - .../ja/how_mozilla's_build_system_works/index.html | 195 -- files/ja/html_element_cross_reference/index.html | 28 - files/ja/http_pipelining_faq/index.html | 38 - files/ja/installing_extensions/index.html | 53 - .../index.html | 70 - files/ja/introduction_to_dom_inspector/index.html | 38 - .../index.html | 440 ---- files/ja/javascript_modules/index.html | 25 - files/ja/javascript_presentations/index.html | 16 - files/ja/jetpack/ui/slidebar/index.html | 24 - .../index.html" | 7 - .../key-navigable_custom_dhtml_widgets/index.html | 115 - files/ja/lastindexof/index.html | 18 - .../building_blocks/a_cool_looking_box/index.html | 100 + .../creating_fancy_letterheaded_paper/index.html | 108 + .../fundamental_css_comprehension/index.html | 133 ++ files/ja/learn/css/howto/css_faq/index.html | 231 ++ .../fundamental_css_comprehension/index.html | 133 -- .../styling_boxes/a_cool_looking_box/index.html | 100 - .../creating_fancy_letterheaded_paper/index.html | 108 - .../ja/learn/css/styling_text/web_fonts/index.html | 219 ++ .../index.html" | 219 -- .../learn/forms/advanced_form_styling/index.html | 556 +++++ .../advanced_styling_for_html_forms/index.html | 556 ----- .../forms/basic_native_form_controls/index.html | 339 +++ .../example_1/index.html | 415 ++++ .../example_2/index.html | 212 ++ .../example_3/index.html | 246 +++ .../example_4/index.html | 296 +++ .../example_5/index.html | 289 +++ .../how_to_build_custom_form_controls/index.html | 901 ++++++++ .../example_1/index.html | 415 ---- .../example_2/index.html | 212 -- .../example_3/index.html | 246 --- .../example_4/index.html | 296 --- .../example_5/index.html | 289 --- .../how_to_build_custom_form_widgets/index.html | 901 -------- .../how_to_structure_a_web_form/example/index.html | 164 ++ .../forms/how_to_structure_a_web_form/index.html | 329 +++ .../example/index.html | 164 -- .../forms/how_to_structure_an_html_form/index.html | 329 --- files/ja/learn/forms/styling_html_forms/index.html | 399 ---- files/ja/learn/forms/styling_web_forms/index.html | 399 ++++ .../learn/forms/the_native_form_widgets/index.html | 339 --- .../publishing_your_website/index.html | 133 ++ .../index.html" | 133 -- files/ja/learn/how_to_contribute/index.html | 86 - .../author_fast-loading_html_pages/index.html | 120 ++ files/ja/localization/index.html | 47 - .../localizing_extension_descriptions/index.html | 92 - files/ja/map/index.html | 229 -- files/ja/mcd/getting_started/index.html | 54 - files/ja/mcd/index.html | 56 - files/ja/mdn/about/linking_to_mdn/index.html | 88 - files/ja/mdn/at_ten/history_of_mdn/index.html | 223 ++ files/ja/mdn/at_ten/index.html | 36 + files/ja/mdn/community/conversations/index.html | 53 - files/ja/mdn/community/doc_sprints/index.html | 121 -- files/ja/mdn/community/index.html | 54 - files/ja/mdn/community/whats_happening/index.html | 42 - .../mdn/community/working_in_community/index.html | 114 - files/ja/mdn/contribute/faq/index.html | 31 - .../howto/create_an_mdn_account/index.html | 46 - .../howto/create_learning_pathways/index.html | 70 - .../howto/do_a_technical_review/index.html | 60 - .../howto/do_an_editorial_review/index.html | 58 - .../howto/remove__experimental__macros/index.html | 48 - .../index.html | 34 - .../howto/set_the_summary_for_a_page/index.html | 116 - .../howto/tag_javascript_pages/index.html | 76 - .../howto/use_navigation_sidebars/index.html | 91 - .../write_an_api_reference/sidebars/index.html | 132 ++ .../index.html | 113 - .../index.html | 99 - files/ja/mdn/contribute/onboarding/index.html | 99 - .../browser_information_resources/index.html | 67 - .../cross-team_collaboration_tactics/index.html | 64 - .../requesting_elevated_privileges/index.html | 24 - files/ja/mdn/dashboards/editors/index.html | 21 - files/ja/mdn/dashboards/index.html | 17 - files/ja/mdn/editor/basics/attachments/index.html | 79 - files/ja/mdn/editor/basics/index.html | 73 - .../ja/mdn/editor/basics/page_controls/index.html | 37 - files/ja/mdn/editor/basics/page_info/index.html | 48 - files/ja/mdn/editor/basics/tags/index.html | 41 - files/ja/mdn/editor/basics/toolbar/index.html | 257 --- files/ja/mdn/editor/images/index.html | 70 - files/ja/mdn/editor/index.html | 21 - files/ja/mdn/editor/keyboard_shortcuts/index.html | 141 -- files/ja/mdn/editor/links/index.html | 182 -- files/ja/mdn/editor/redirects/index.html | 29 - files/ja/mdn/editor/source_mode/index.html | 137 -- files/ja/mdn/editor/syntax_highlighting/index.html | 45 - files/ja/mdn/editor/tables/index.html | 160 -- files/ja/mdn/kuma/index.html | 25 - files/ja/mdn/kuma/server_charts/index.html | 63 - .../index.html" | 53 - .../api_reference_sidebars/index.html | 132 -- files/ja/mdn/structures/api_references/index.html | 58 - .../what_does_an_api_reference_need/index.html | 168 -- .../simple_live_sample_demo/index.html | 37 - .../index.html | 12 - files/ja/mdn/tools/add-ons_and_plug-ins/index.html | 33 - files/ja/mdn/tools/document_parameters/index.html | 95 - files/ja/mdn/tools/feeds/index.html | 53 - files/ja/mdn/tools/page_deletion/index.html | 61 - files/ja/mdn/tools/page_moving/index.html | 57 - files/ja/mdn/tools/page_regeneration/index.html | 34 - files/ja/mdn/tools/page_watching/index.html | 49 - files/ja/mdn/tools/put_api/index.html | 208 -- files/ja/mdn/tools/revision_dashboard/index.html | 117 - files/ja/mdn/tools/template_editing/index.html | 38 - files/ja/mdn/tools/unsupported_get_api/index.html | 95 + files/ja/mdn/troubleshooting/index.html | 86 - files/ja/mdn/yari/index.html | 25 + files/ja/mdn_at_ten/contributing_to_mdn/index.html | 97 - files/ja/mdn_at_ten/history_of_mdn/index.html | 223 -- files/ja/mdn_at_ten/index.html | 36 - .../microsummary_xml_grammar_reference/index.html | 174 -- .../index.html | 1235 ----------- files/ja/monitoring_http_activity/index.html | 41 - files/ja/monitoring_wifi_access_points/index.html | 77 - files/ja/mozilla-central/index.html | 52 - .../api/devtools.inspectedwindow/eval/index.html | 211 -- .../api/devtools.inspectedwindow/index.html | 79 - .../api/devtools.inspectedwindow/tabid/index.html | 77 - .../webextensions/api/devtools.network/index.html | 74 - .../webextensions/api/devtools.panels/index.html | 105 - .../api/devtools/inspectedwindow/eval/index.html | 211 ++ .../api/devtools/inspectedwindow/index.html | 79 + .../api/devtools/inspectedwindow/tabid/index.html | 77 + .../webextensions/api/devtools/network/index.html | 74 + .../webextensions/api/devtools/panels/index.html | 105 + .../index.html | 21 + .../packaging_and_installation/index.html | 219 -- .../porting_from_google_chrome/index.html | 24 - .../add-ons/webextensions/prerequisites/index.html | 17 + .../publishing_your_webextension/index.html | 68 - .../index.html" | 21 - .../add-ons/webextensions/walkthrough/index.html | 451 ---- .../your_second_webextension/index.html | 451 ++++ .../index.html" | 17 - .../how_mozilla_s_build_system_works/index.html | 195 ++ .../windows_prerequisites/index.html | 13 + .../developer_guide/mozilla-central/index.html | 52 + .../source_code/getting_comm-central/index.html | 50 + .../index.html | 50 - .../index.html | 33 + .../1.5/using_firefox_1.5_caching/index.html | 191 ++ .../2/adding_feed_readers_to_firefox/index.html | 49 + .../releases/2/updating_extensions/index.html | 37 + .../releases/3.5/updating_extensions/index.html | 73 + .../firefox/releases/3/dom_improvements/index.html | 29 + .../firefox/releases/3/full_page_zoom/index.html | 41 + .../releases/3/notable_bugs_fixed/index.html | 32 + .../firefox/releases/3/svg_improvements/index.html | 56 + .../releases/3/updating_extensions/index.html | 157 ++ .../3/updating_web_applications/index.html | 107 + .../firefox/releases/4/the_add-on_bar/index.html | 76 + .../index.html | 143 -- .../index.html | 62 - files/ja/mozilla_svg_status/index.html | 30 - files/ja/mozistorageservice/index.html | 155 -- files/ja/mozmill/index.html | 47 - files/ja/my_chrome_oven/index.html | 5 - files/ja/namespace/index.html | 21 - files/ja/new_in_javascript_1.8/index.html | 94 - .../ja/notable_bugs_fixed_in_firefox_3/index.html | 32 - files/ja/npapi/constants/index.html | 13 - files/ja/nsidomhtmlmediaelement/index.html | 345 --- files/ja/nsidynamiccontainer/index.html | 87 - files/ja/orphaned/about/index.html | 5 + .../index.html | 24 + .../ant_script_to_assemble_an_extension/index.html | 74 + files/ja/orphaned/bugzilla-ja/2.20-ja/index.html | 54 + files/ja/orphaned/bugzilla-ja/3.0-ja/index.html | 62 + files/ja/orphaned/bugzilla-ja/index.html | 84 + files/ja/orphaned/bugzilla-ja/l10n/index.html | 15 + .../guide/about/accountcreation/index.html | 23 + .../bugzilla-jp/guide/about/bugdetails/index.html | 90 + .../guide/about/changeaccountprefs/index.html | 34 + .../ja/orphaned/bugzilla-jp/guide/about/index.html | 16 + .../guide/about/productsandcomponents/index.html | 52 + .../guide/about/trunkandbranch/index.html | 17 + .../bugzilla-jp/guide/about/whatisbug/index.html | 10 + .../guide/about/whatisbugzilla/index.html | 14 + .../orphaned/bugzilla-jp/guide/comment/index.html | 19 + .../bugzilla-jp/guide/comment/linkrules/index.html | 23 + .../bugzilla-jp/guide/contribute/index.html | 34 + .../orphaned/bugzilla-jp/guide/grossary/index.html | 220 ++ files/ja/orphaned/bugzilla-jp/guide/index.html | 65 + .../bugzilla-jp/guide/lifecycle/index.html | 33 + .../bugzilla-jp/guide/lifecycle/mozilla/index.html | 65 + .../guide/lifecycle/mozillagumi/index.html | 46 + .../guide/lifecycle/qamozilla/index.html | 40 + .../guide/lifecycle/webstandard/index.html | 56 + .../guide/lifecycle/webtools/index.html | 31 + .../guide/management/deleteaccount/index.html | 9 + .../bugzilla-jp/guide/management/index.html | 11 + .../guide/management/stopaccount/index.html | 16 + .../guide/management/upgradeaccount/index.html | 30 + .../bugzilla-jp/guide/report/crashbugs/index.html | 24 + .../guide/report/enhancement/index.html | 10 + .../orphaned/bugzilla-jp/guide/report/index.html | 39 + .../guide/report/memoryleakbugs/index.html | 10 + .../guide/report/renderingbugs/index.html | 14 + .../guide/report/securitybugs/index.html | 12 + .../bugzilla-jp/guide/report/uibugs/index.html | 15 + .../bugzilla-jp/guide/search/advanced/index.html | 21 + .../bugzilla-jp/guide/search/hints/index.html | 39 + .../orphaned/bugzilla-jp/guide/search/index.html | 8 + .../bugzilla-jp/guide/search/simple/index.html | 23 + .../orphaned/bugzilla-jp/guide/tracking/index.html | 14 + files/ja/orphaned/bugzilla-jp/index.html | 16 + .../building_a_mozilla_distribution/index.html | 123 ++ files/ja/orphaned/code_snippets/toolbar/index.html | 55 + files/ja/orphaned/components/index.html | 16 + .../orphaned/creating_toolbar_buttons/index.html | 169 ++ files/ja/orphaned/debnews/index.html | 9 + files/ja/orphaned/developing_add-ons/index.html | 8 + files/ja/orphaned/developing_mozilla/index.html | 67 + files/ja/orphaned/devnews/20060705/index.html | 14 + files/ja/orphaned/devnews/20060706/index.html | 47 + files/ja/orphaned/devnews/20060712/index.html | 35 + files/ja/orphaned/devnews/20060713/index.html | 12 + files/ja/orphaned/devnews/20060719/index.html | 46 + files/ja/orphaned/devnews/20060726/index.html | 13 + files/ja/orphaned/devnews/20060802/index.html | 12 + files/ja/orphaned/devnews/20060809/index.html | 38 + files/ja/orphaned/devnews/20060817/index.html | 10 + files/ja/orphaned/devnews/20060818/index.html | 10 + files/ja/orphaned/devnews/20060821/index.html | 8 + files/ja/orphaned/devnews/20060822-02/index.html | 8 + files/ja/orphaned/devnews/20060822/index.html | 12 + files/ja/orphaned/devnews/20060823/index.html | 16 + files/ja/orphaned/devnews/20060825/index.html | 21 + files/ja/orphaned/devnews/20060828/index.html | 36 + files/ja/orphaned/devnews/20061002-02/index.html | 22 + files/ja/orphaned/devnews/20061002/index.html | 15 + files/ja/orphaned/devnews/20061025/index.html | 36 + files/ja/orphaned/devnews/20061106/index.html | 45 + files/ja/orphaned/devnews/20061107/index.html | 16 + files/ja/orphaned/devnews/20061108/index.html | 15 + files/ja/orphaned/devnews/20061114/index.html | 9 + files/ja/orphaned/devnews/20061129/index.html | 10 + files/ja/orphaned/devnews/20061208/index.html | 11 + files/ja/orphaned/devnews/20061219/index.html | 17 + files/ja/orphaned/devnews/20070207/index.html | 19 + files/ja/orphaned/devnews/20070213/index.html | 12 + files/ja/orphaned/devnews/20070219/index.html | 15 + files/ja/orphaned/devnews/20070223/index.html | 17 + files/ja/orphaned/devnews/20070302/index.html | 17 + files/ja/orphaned/devnews/20070304/index.html | 20 + files/ja/orphaned/devnews/20070312/index.html | 15 + files/ja/orphaned/devnews/20070315/index.html | 28 + files/ja/orphaned/devnews/20070320/index.html | 17 + files/ja/orphaned/devnews/20070322/index.html | 12 + files/ja/orphaned/devnews/20070323/index.html | 19 + files/ja/orphaned/devnews/20070411/index.html | 8 + files/ja/orphaned/devnews/20070424/index.html | 11 + files/ja/orphaned/devnews/20070427/index.html | 19 + files/ja/orphaned/devnews/20070501/index.html | 16 + files/ja/orphaned/devnews/20070502/index.html | 29 + files/ja/orphaned/devnews/20070509/index.html | 10 + files/ja/orphaned/devnews/20070512/index.html | 10 + files/ja/orphaned/devnews/20070523-2/index.html | 21 + files/ja/orphaned/devnews/20070523/index.html | 10 + files/ja/orphaned/devnews/20070529-2/index.html | 10 + files/ja/orphaned/devnews/20070529/index.html | 9 + files/ja/orphaned/devnews/20070530-02/index.html | 19 + files/ja/orphaned/devnews/20070530/index.html | 14 + files/ja/orphaned/devnews/20070604/index.html | 13 + files/ja/orphaned/devnews/20070606-2/index.html | 46 + files/ja/orphaned/devnews/20070606/index.html | 28 + files/ja/orphaned/devnews/20070626/index.html | 10 + files/ja/orphaned/devnews/20070628/index.html | 8 + files/ja/orphaned/devnews/20070702/index.html | 29 + files/ja/orphaned/devnews/20070710/index.html | 12 + files/ja/orphaned/devnews/20070717/index.html | 8 + files/ja/orphaned/devnews/20070718/index.html | 17 + files/ja/orphaned/devnews/20070719/index.html | 17 + files/ja/orphaned/devnews/20070730/index.html | 19 + files/ja/orphaned/devnews/20070801/index.html | 17 + files/ja/orphaned/devnews/20070803/index.html | 42 + files/ja/orphaned/devnews/20070808/index.html | 8 + files/ja/orphaned/devnews/20070910/index.html | 11 + files/ja/orphaned/devnews/20070913/index.html | 19 + files/ja/orphaned/devnews/20070918/index.html | 18 + files/ja/orphaned/devnews/20070920/index.html | 35 + files/ja/orphaned/devnews/20071005/index.html | 18 + files/ja/orphaned/devnews/20071008/index.html | 31 + files/ja/orphaned/devnews/20071012/index.html | 12 + files/ja/orphaned/devnews/20071018/index.html | 14 + files/ja/orphaned/devnews/20071101/index.html | 15 + files/ja/orphaned/devnews/20071115/index.html | 16 + files/ja/orphaned/devnews/20071126/index.html | 64 + files/ja/orphaned/devnews/20071203/index.html | 75 + files/ja/orphaned/devnews/20071210-02/index.html | 15 + files/ja/orphaned/devnews/20071210/index.html | 90 + files/ja/orphaned/devnews/20071211/index.html | 24 + files/ja/orphaned/devnews/20071217/index.html | 78 + files/ja/orphaned/devnews/20071218/index.html | 27 + files/ja/orphaned/devnews/20080107/index.html | 86 + files/ja/orphaned/devnews/20080115/index.html | 80 + files/ja/orphaned/devnews/20080122/index.html | 78 + files/ja/orphaned/devnews/20080129/index.html | 82 + files/ja/orphaned/devnews/20080205/index.html | 72 + files/ja/orphaned/devnews/20080207-2/index.html | 15 + files/ja/orphaned/devnews/20080207/index.html | 10 + files/ja/orphaned/devnews/20080212/index.html | 74 + files/ja/orphaned/devnews/20080219/index.html | 74 + files/ja/orphaned/devnews/20080226/index.html | 76 + files/ja/orphaned/devnews/20080304/index.html | 79 + files/ja/orphaned/devnews/20080310/index.html | 25 + files/ja/orphaned/devnews/20080311/index.html | 79 + files/ja/orphaned/devnews/20080318/index.html | 99 + files/ja/orphaned/devnews/20080325/index.html | 71 + files/ja/orphaned/devnews/20080401/index.html | 83 + files/ja/orphaned/devnews/20080408/index.html | 90 + files/ja/orphaned/devnews/20080415/index.html | 76 + files/ja/orphaned/devnews/20080422/index.html | 82 + files/ja/orphaned/devnews/20080429/index.html | 81 + files/ja/orphaned/devnews/20080501/index.html | 16 + files/ja/orphaned/devnews/20080506/index.html | 97 + files/ja/orphaned/devnews/20080513/index.html | 91 + files/ja/orphaned/devnews/20080520/index.html | 94 + files/ja/orphaned/devnews/20080527/index.html | 76 + files/ja/orphaned/devnews/20080603/index.html | 76 + files/ja/orphaned/devnews/20080610/index.html | 104 + files/ja/orphaned/devnews/20080617/index.html | 94 + files/ja/orphaned/devnews/20080624/index.html | 82 + files/ja/orphaned/devnews/20080630/index.html | 34 + files/ja/orphaned/devnews/20080708/index.html | 82 + files/ja/orphaned/devnews/20080715/index.html | 42 + files/ja/orphaned/devnews/20080722/index.html | 56 + files/ja/orphaned/devnews/20080728/index.html | 30 + files/ja/orphaned/devnews/20080729/index.html | 42 + files/ja/orphaned/devnews/20080805/index.html | 44 + files/ja/orphaned/devnews/20080810/index.html | 22 + files/ja/orphaned/devnews/20080812/index.html | 44 + files/ja/orphaned/devnews/20080819/index.html | 44 + files/ja/orphaned/devnews/20080826/index.html | 72 + files/ja/orphaned/devnews/20080902/index.html | 50 + files/ja/orphaned/devnews/20080909/index.html | 78 + files/ja/orphaned/devnews/20080916/index.html | 64 + files/ja/orphaned/devnews/20080923/index.html | 58 + files/ja/orphaned/devnews/20080930-2/index.html | 22 + files/ja/orphaned/devnews/20080930/index.html | 42 + files/ja/orphaned/devnews/20081007/index.html | 58 + files/ja/orphaned/devnews/20081014/index.html | 60 + files/ja/orphaned/devnews/20081021/index.html | 58 + files/ja/orphaned/devnews/20081028/index.html | 46 + files/ja/orphaned/devnews/20081104/index.html | 42 + files/ja/orphaned/devnews/20081111/index.html | 40 + files/ja/orphaned/devnews/20081118/index.html | 70 + files/ja/orphaned/devnews/20081125/index.html | 50 + files/ja/orphaned/devnews/20081202/index.html | 52 + files/ja/orphaned/devnews/20081209/index.html | 58 + files/ja/orphaned/devnews/20081216/index.html | 64 + files/ja/orphaned/devnews/20081223/index.html | 76 + files/ja/orphaned/devnews/20090113/index.html | 46 + files/ja/orphaned/devnews/20090120/index.html | 27 + files/ja/orphaned/devnews/20090310/index.html | 58 + files/ja/orphaned/devnews/20090324/index.html | 54 + files/ja/orphaned/devnews/20090904/index.html | 11 + files/ja/orphaned/devnews/index.html | 242 +++ .../index.html | 89 + .../e4x/processing_xml_with_e4x/index.html | 265 +++ .../ja/orphaned/feed_content_access_api/index.html | 167 ++ files/ja/orphaned/findbar_api/index.html | 93 + .../html_element_cross_reference/index.html | 28 + files/ja/orphaned/installing_extensions/index.html | 53 + .../index.html | 70 + .../introduction_to_dom_inspector/index.html | 38 + files/ja/orphaned/javascript_modules/index.html | 25 + .../orphaned/javascript_presentations/index.html | 16 + files/ja/orphaned/jetpack/ui/slidebar/index.html | 24 + .../index.html" | 7 + .../key-navigable_custom_dhtml_widgets/index.html | 115 + .../ja/orphaned/learn/how_to_contribute/index.html | 86 + .../learn/html/forms/html5_updates/index.html | 46 + .../localizing_extension_descriptions/index.html | 92 + files/ja/orphaned/map/index.html | 229 ++ files/ja/orphaned/mcd/getting_started/index.html | 54 + files/ja/orphaned/mcd/index.html | 56 + .../orphaned/mdn/about/linking_to_mdn/index.html | 88 + .../mdn/community/conversations/index.html | 53 + .../orphaned/mdn/community/doc_sprints/index.html | 121 ++ files/ja/orphaned/mdn/community/index.html | 54 + .../mdn/community/whats_happening/index.html | 42 + .../mdn/community/working_in_community/index.html | 114 + .../howto/create_an_mdn_account/index.html | 46 + .../howto/create_learning_pathways/index.html | 70 + .../howto/do_a_technical_review/index.html | 60 + .../howto/do_an_editorial_review/index.html | 58 + .../howto/remove_experimental_macros/index.html | 48 + .../index.html | 34 + .../howto/set_the_summary_for_a_page/index.html | 116 + .../howto/tag_javascript_pages/index.html | 76 + .../howto/use_navigation_sidebars/index.html | 91 + .../index.html | 113 + .../index.html | 99 + .../orphaned/mdn/contribute/onboarding/index.html | 99 + .../browser_information_resources/index.html | 67 + .../cross-team_collaboration_tactics/index.html | 64 + .../requesting_elevated_privileges/index.html | 24 + .../ja/orphaned/mdn/dashboards/editors/index.html | 21 + files/ja/orphaned/mdn/dashboards/index.html | 17 + .../mdn/editor/basics/attachments/index.html | 79 + files/ja/orphaned/mdn/editor/basics/index.html | 73 + .../mdn/editor/basics/page_controls/index.html | 37 + .../mdn/editor/basics/page_info/index.html | 48 + .../ja/orphaned/mdn/editor/basics/tags/index.html | 41 + .../orphaned/mdn/editor/basics/toolbar/index.html | 257 +++ files/ja/orphaned/mdn/editor/images/index.html | 70 + files/ja/orphaned/mdn/editor/index.html | 21 + .../mdn/editor/keyboard_shortcuts/index.html | 141 ++ files/ja/orphaned/mdn/editor/links/index.html | 182 ++ files/ja/orphaned/mdn/editor/redirects/index.html | 29 + .../ja/orphaned/mdn/editor/source_mode/index.html | 137 ++ .../mdn/editor/syntax_highlighting/index.html | 45 + files/ja/orphaned/mdn/editor/tables/index.html | 160 ++ .../ja/orphaned/mdn/kuma/server_charts/index.html | 63 + .../mdn/structures/api_references/index.html | 58 + .../what_does_an_api_reference_need/index.html | 168 ++ .../simple_live_sample_demo/index.html | 37 + .../index.html | 12 + .../mdn/tools/add-ons_and_plug-ins/index.html | 33 + files/ja/orphaned/mdn/tools/feeds/index.html | 53 + .../ja/orphaned/mdn/tools/page_deletion/index.html | 61 + files/ja/orphaned/mdn/tools/page_moving/index.html | 57 + .../mdn/tools/page_regeneration/index.html | 34 + .../ja/orphaned/mdn/tools/page_watching/index.html | 49 + files/ja/orphaned/mdn/tools/put_api/index.html | 208 ++ .../mdn/tools/revision_dashboard/index.html | 117 + .../orphaned/mdn/tools/template_editing/index.html | 38 + files/ja/orphaned/mdn/troubleshooting/index.html | 86 + .../microsummary_xml_grammar_reference/index.html | 174 ++ .../index.html | 1235 +++++++++++ .../orphaned/monitoring_http_activity/index.html | 41 + .../monitoring_wifi_access_points/index.html | 77 + .../package_your_extension_/index.html | 68 + .../porting_a_google_chrome_extension/index.html | 24 + .../temporary_installation_in_firefox/index.html | 219 ++ .../index.html | 62 + files/ja/orphaned/mozistorageservice/index.html | 155 ++ files/ja/orphaned/mozmill/index.html | 47 + files/ja/orphaned/my_chrome_oven/index.html | 5 + files/ja/orphaned/new_in_javascript_1.8/index.html | 94 + .../ja/orphaned/nsidomhtmlmediaelement/index.html | 345 +++ files/ja/orphaned/nsidynamiccontainer/index.html | 87 + .../index.html | 12 + .../reftest_opportunities_files/index.html | 2245 ++++++++++++++++++++ .../index.html | 56 + .../index.html | 75 + .../toolkit_api/official_references/index.html | 15 + .../dom_inspector/dom_inspector_faq/index.html | 44 + .../tools/add-ons/dom_inspector/index.html | 69 + .../add-ons/dom_inspector/internals/index.html | 245 +++ .../introduction_to_dom_inspector/index.html | 96 + files/ja/orphaned/tools/add-ons/index.html | 18 + files/ja/orphaned/tools/css_coverage/index.html | 149 ++ .../limitations_of_the_new_debugger/index.html | 29 + .../disable_breakpoints/index.html | 18 + .../how_to/access_debugging_in_add-ons/index.html | 32 + .../how_to/black_box_a_source/index.html | 28 + .../how_to/break_on_a_dom_event/index.html | 22 + .../how_to/debug_eval_sources/index.html | 36 + .../how_to/disable_breakpoints/index.html | 22 + .../index.html | 46 + .../highlight_and_inspect_dom_nodes/index.html | 16 + .../debugger_(before_firefox_52)/how_to/index.html | 13 + .../how_to/open_the_debugger/index.html | 21 + .../how_to/pretty-print_a_minified_file/index.html | 18 + .../how_to/search_and_filter/index.html | 74 + .../how_to/set_a_breakpoint/index.html | 29 + .../how_to/set_a_conditional_breakpoint/index.html | 22 + .../how_to/step_through_code/index.html | 21 + .../how_to/use_a_source_map/index.html | 20 + .../tools/debugger_(before_firefox_52)/index.html | 55 + .../keyboard_shortcuts/index.html | 16 + .../settings/index.html | 63 + .../ui_tour/index.html | 129 ++ files/ja/orphaned/tutorials/index.html | 172 ++ .../audiocontext/mozaudiochanneltype/index.html | 95 + .../readablestreamdefaultcontroller/index.html | 107 + .../web/api/window/getattention/index.html | 25 + .../broken_table_layout.html/index.html | 67 + .../compatibility_faq/cut_off_text.html/index.html | 60 + .../empty_background_color.html/index.html | 58 + files/ja/orphaned/web/compatibility_faq/index.html | 91 + .../invalid_icon_size.html/index.html | 92 + .../misaligned_icon.html/index.html | 128 ++ .../misaligned_text.html/index.html | 116 + .../misaligned_text_inside_icon.html/index.html | 100 + .../no_background_shown.html/index.html | 60 + .../no_border_line_shown.html/index.html | 60 + .../no_checkbox_check_shown.html/index.html | 54 + .../no_decoreation_shown.html/index.html | 82 + .../no_icon_shown.html/index.html | 147 ++ .../web/compatibility_faq/no_wrap.html/index.html | 122 ++ .../overwrapped_icon.html/index.html | 62 + .../overwrapped_navigation.html/index.html | 83 + .../tips_default_style_difference.html/index.html | 62 + .../tips_vendor_prefix.html/index.html | 198 ++ .../underline_color_diffrence.html/index.html | 77 + files/ja/orphaned/web/css/@media/index/index.html | 12 + .../web/css/_colon_-moz-alt-text/index.html | 19 + files/ja/orphaned/web/css/index/index.html | 10 + .../web/guide/ajax/other_resources/index.html | 21 + .../orphaned/web/html/element/command/index.html | 109 + .../orphaned/web/html/element/element/index.html | 64 + .../web/html/global_attributes/dropzone/index.html | 48 + .../orphaned/web/html/html_extensions/index.html | 12 + .../index.html | 25 + .../guide/core_language_features/index.html | 10 + .../guide/creating_a_regular_expression/index.html | 31 + .../defining_getters_and_setters/index.html | 89 + .../defining_methods/index.html | 39 + .../index.html | 13 + .../deleting_properties/index.html | 20 + .../guide/creating_new_objects/index.html | 17 + .../indexing_object_properties/index.html | 9 + .../using_a_constructor_function/index.html | 57 + .../using_object_initializers/index.html | 23 + .../using_this_for_object_references/index.html | 25 + .../web/javascript/guide/expressions/index.html | 16 + .../loop_statements/break_statement/index.html | 24 + .../loop_statements/continue_statement/index.html | 46 + .../do...while_statement/index.html | 19 + .../guide/loop_statements/for_statement/index.html | 50 + .../javascript/guide/loop_statements/index.html | 17 + .../loop_statements/label_statement/index.html | 19 + .../loop_statements/while_statement/index.html | 35 + .../object_manipulation_statements/index.html | 51 + .../guide/objects_and_properties/index.html | 32 + .../operators/arithmetic_operators/index.html | 47 + .../operators/assignment_operators/index.html | 61 + .../operators/comparison_operators/index.html | 67 + .../guide/operators/logical_operators/index.html | 63 + .../guide/operators/special_operators/index.html | 197 ++ .../guide/operators/string_operators/index.html | 8 + .../escape_and_unescape_functions/index.html | 14 + .../predefined_functions/eval_function/index.html | 12 + .../guide/predefined_functions/index.html | 17 + .../creating_the_hierarchy/index.html | 134 ++ .../guide/the_employee_example/index.html | 31 + .../object_properties/adding_properties/index.html | 19 + .../object_properties/index.html | 13 + .../inheriting_properties/index.html | 24 + .../guide/using_the_arguments_object/index.html | 36 + .../web/javascript/guide/variables/index.html | 62 + .../index.html | 193 ++ .../global_objects/array/index/index.html | 22 + .../global_objects/array/input/index.html | 25 + .../global_objects/array/prototype/index.html | 176 ++ .../asyncfunction/prototype/index.html | 109 + .../finalizationregistry/cleanupsome/index.html | 74 + .../reference/operators/special/index.html | 5 + .../operators/special_operators/index.html | 5 + .../orphaned/web/manifest/serviceworker/index.html | 77 + .../information_security_basics/index.html | 39 + .../ja/orphaned/web/specification_list/index.html | 614 ++++++ .../web_components/status_in_firefox/index.html | 58 + .../index.html | 25 + .../working_with_windows_in_chrome_code/index.html | 7 + files/ja/orphaned/xpcom_components_list/index.html | 19 + files/ja/orphaned/xpcom_part_1/index.html | 5 + files/ja/orphaned/xpcom_part_2/index.html | 5 + files/ja/orphaned/xpcom_part_3/index.html | 5 + files/ja/orphaned/xpcom_part_4/index.html | 5 + files/ja/orphaned/xpcom_part_5/index.html | 5 + files/ja/orphaned/xpcom_plans/index.html | 32 + .../index.html | 12 - files/ja/plugins/guide/constants/index.html | 13 + files/ja/reftest_opportunities_files/index.html | 2245 -------------------- .../index.html | 56 - files/ja/svg_improvements_in_firefox_3/index.html | 56 - files/ja/svg_in_firefox/index.html | 781 ------- files/ja/the_add-on_bar/index.html | 76 - .../index.html | 75 - .../index.html | 120 -- files/ja/title/index.html | 19 - .../ja/toolkit_api/official_references/index.html | 15 - files/ja/tools/3d_view/index.html | 103 + files/ja/tools/add-ons/index.html | 18 - files/ja/tools/css_coverage/index.html | 149 -- .../debugger/break_on_dom_mutation/index.html | 23 + .../debugger/how_to/black_box_a_source/index.html | 20 - .../how_to/break_on_a_dom_event/index.html | 23 - .../index.html | 47 - .../debugger/how_to/ignore_a_source/index.html | 20 + .../debugger/how_to/search_and_filter/index.html | 69 - .../limitations_of_the_new_debugger/index.html | 29 - .../disable_breakpoints/index.html | 18 - .../how_to/access_debugging_in_add-ons/index.html | 32 - .../how_to/black_box_a_source/index.html | 28 - .../how_to/break_on_a_dom_event/index.html | 22 - .../how_to/debug_eval_sources/index.html | 36 - .../how_to/disable_breakpoints/index.html | 22 - .../index.html | 46 - .../highlight_and_inspect_dom_nodes/index.html | 16 - .../debugger_(before_firefox_52)/how_to/index.html | 13 - .../how_to/open_the_debugger/index.html | 21 - .../how_to/pretty-print_a_minified_file/index.html | 18 - .../how_to/search_and_filter/index.html | 74 - .../how_to/set_a_breakpoint/index.html | 29 - .../how_to/set_a_conditional_breakpoint/index.html | 22 - .../how_to/step_through_code/index.html | 21 - .../how_to/use_a_source_map/index.html | 20 - .../tools/debugger_(before_firefox_52)/index.html | 55 - .../keyboard_shortcuts/index.html | 16 - .../settings/index.html | 63 - .../ui_tour/index.html | 129 -- .../memory/comparing_heap_snapshots/index.html | 15 - files/ja/tools/page_inspector/3d_view/index.html | 103 - .../page_inspector/how_to/edit_fonts/index.html | 233 ++ .../page_inspector/how_to/view_fonts/index.html | 233 -- .../index.html | 86 + .../animations_examples/index.html | 86 - .../ja/tools/page_inspector/html_panel/index.html | 35 - .../ja/tools/page_inspector/style_panel/index.html | 69 - .../performance/profiler_walkthrough/index.html | 114 - files/ja/tools/profiler/index.html | 145 -- files/ja/tools/release_notes/index.html | 416 ---- .../index.html | 68 + .../index.html | 68 - .../index.html | 71 - files/ja/tools/using_the_source_editor/index.html | 100 - files/ja/tools/view_source/index.html | 75 + .../web_console/opening_the_web_console/index.html | 25 - files/ja/tools/web_console/ui_tour/index.html | 25 + files/ja/tutorials/index.html | 172 -- .../updating_extensions_for_firefox_2/index.html | 37 - .../updating_extensions_for_firefox_3.1/index.html | 73 - .../updating_extensions_for_firefox_3/index.html | 157 -- .../index.html | 107 - files/ja/user_agent_strings_reference/index.html | 175 -- files/ja/using_firefox_1.5_caching/index.html | 191 -- files/ja/using_native_json/index.html | 95 - .../index.html | 47 - files/ja/using_xpath/index.html | 94 - files/ja/view_source/index.html | 75 - .../web/accessibility/accessibility_faq/index.html | 26 - .../using_the_button_role/index.html | 123 -- .../using_the_checkbox_role/index.html | 63 - .../aria/roles/button_role/index.html | 123 ++ .../aria/roles/checkbox_role/index.html | 63 + files/ja/web/accessibility/faq/index.html | 26 + files/ja/web/api/ambient_light_events/index.html | 68 + .../api/audiobuffersourcenode/onended/index.html | 108 - .../web/api/audiobuffersourcenode/stop/index.html | 120 -- .../web/api/audiocontext/createanalyser/index.html | 154 -- .../api/audiocontext/createbiquadfilter/index.html | 126 -- .../web/api/audiocontext/createbuffer/index.html | 174 -- .../api/audiocontext/createbuffersource/index.html | 143 -- .../audiocontext/createchannelmerger/index.html | 133 -- .../audiocontext/createchannelsplitter/index.html | 133 -- .../api/audiocontext/createconvolver/index.html | 131 -- .../ja/web/api/audiocontext/createdelay/index.html | 143 -- .../createdynamicscompressor/index.html | 138 -- .../ja/web/api/audiocontext/creategain/index.html | 128 -- .../api/audiocontext/createoscillator/index.html | 111 - .../web/api/audiocontext/createpanner/index.html | 198 -- .../api/audiocontext/createperiodicwave/index.html | 139 -- .../audiocontext/createscriptprocessor/index.html | 69 - .../api/audiocontext/createstereopanner/index.html | 128 -- .../ja/web/api/audiocontext/currenttime/index.html | 112 - .../api/audiocontext/decodeaudiodata/index.html | 155 -- .../ja/web/api/audiocontext/destination/index.html | 114 - files/ja/web/api/audiocontext/listener/index.html | 112 - .../audiocontext/mozaudiochanneltype/index.html | 95 - .../web/api/audiocontext/onstatechange/index.html | 101 - .../ja/web/api/audiocontext/samplerate/index.html | 112 - files/ja/web/api/audiocontext/state/index.html | 66 - .../audioscheduledsourcenode/onended/index.html | 108 + .../api/audioscheduledsourcenode/stop/index.html | 120 ++ .../api/baseaudiocontext/createanalyser/index.html | 154 ++ .../baseaudiocontext/createbiquadfilter/index.html | 126 ++ .../api/baseaudiocontext/createbuffer/index.html | 174 ++ .../baseaudiocontext/createbuffersource/index.html | 143 ++ .../createchannelmerger/index.html | 133 ++ .../createchannelsplitter/index.html | 133 ++ .../baseaudiocontext/createconvolver/index.html | 131 ++ .../api/baseaudiocontext/createdelay/index.html | 143 ++ .../createdynamicscompressor/index.html | 138 ++ .../web/api/baseaudiocontext/creategain/index.html | 128 ++ .../baseaudiocontext/createoscillator/index.html | 111 + .../api/baseaudiocontext/createpanner/index.html | 198 ++ .../baseaudiocontext/createperiodicwave/index.html | 139 ++ .../createscriptprocessor/index.html | 69 + .../baseaudiocontext/createstereopanner/index.html | 128 ++ .../api/baseaudiocontext/currenttime/index.html | 112 + .../baseaudiocontext/decodeaudiodata/index.html | 155 ++ .../api/baseaudiocontext/destination/index.html | 114 + .../web/api/baseaudiocontext/listener/index.html | 112 + .../api/baseaudiocontext/onstatechange/index.html | 101 + .../web/api/baseaudiocontext/samplerate/index.html | 112 + files/ja/web/api/baseaudiocontext/state/index.html | 66 + .../drawing_graphics_with_canvas/index.html | 213 -- .../tutorial/advanced_animations/index.html | 380 ++++ .../tutorial/applying_styles_and_colors/index.html | 725 +++++++ .../tutorial/basic_animations/index.html | 711 +++++++ .../api/canvas_api/tutorial/basic_usage/index.html | 152 ++ .../canvas_api/tutorial/drawing_shapes/index.html | 577 +++++ .../canvas_api/tutorial/drawing_text/index.html | 174 ++ .../web/api/canvas_api/tutorial/finale/index.html | 51 + .../tutorial/optimizing_canvas/index.html | 118 + .../pixel_manipulation_with_canvas/index.html | 264 +++ .../canvas_api/tutorial/transformations/index.html | 282 +++ .../canvas_api/tutorial/using_images/index.html | 337 +++ files/ja/web/api/css_painting_api/guide/index.html | 540 +++++ .../index.html" | 540 ----- files/ja/web/api/cssmatrix/index.html | 94 - files/ja/web/api/deviceacceleration/index.html | 47 - .../api/devicemotioneventacceleration/index.html | 47 + files/ja/web/api/document/activeelement/index.html | 144 -- files/ja/web/api/document/async/index.html | 45 - .../web/api/document/elementfrompoint/index.html | 50 - files/ja/web/api/document/getanimations/index.html | 81 - files/ja/web/api/document/getselection/index.html | 13 - files/ja/web/api/document/inputencoding/index.html | 26 - .../web/api/document/onselectionchange/index.html | 62 - .../api/document_object_model/preface/index.html | 52 - .../documentorshadowroot/activeelement/index.html | 144 ++ .../elementfrompoint/index.html | 50 + .../documentorshadowroot/getanimations/index.html | 81 + .../documentorshadowroot/nodefrompoint/index.html | 79 - .../documentorshadowroot/nodesfrompoint/index.html | 83 - files/ja/web/api/dommatrix/index.html | 94 + files/ja/web/api/element/accesskey/index.html | 23 - files/ja/web/api/element/name/index.html | 58 - files/ja/web/api/event/button/index.html | 60 - files/ja/web/api/event/createevent/index.html | 32 - .../gamepad_api/using_the_gamepad_api/index.html | 347 +++ .../web/api/globaleventhandlers/onreset/index.html | 57 + .../api/globaleventhandlers/onresize/index.html | 78 + .../onselectionchange/index.html | 62 + .../drag_operations/index.html | 350 +++ .../multiple_items/index.html | 108 + .../recommended_drag_types/index.html | 228 ++ files/ja/web/api/htmlelement/accesskey/index.html | 23 + files/ja/web/api/installtrigger/index.html | 15 + files/ja/web/api/mediarecorder_api/index.html | 187 -- files/ja/web/api/node/baseuriobject/index.html | 33 - files/ja/web/api/node/nodeprincipal/index.html | 21 - files/ja/web/api/page_visibility_api/index.html | 272 +++ files/ja/web/api/proximity_events/index.html | 84 + files/ja/web/api/randomsource/index.html | 113 - .../readablestreamdefaultcontroller/index.html | 107 - files/ja/web/api/slotable/index.html | 50 - files/ja/web/api/vibration_api/index.html | 101 + .../api/vrdevice/cancelanimationframe/index.html | 104 - files/ja/web/api/vrdevice/capabilities/index.html | 62 - files/ja/web/api/vrdevice/depthfar/index.html | 99 - files/ja/web/api/vrdevice/depthnear/index.html | 99 - files/ja/web/api/vrdevice/displayid/index.html | 58 - .../web/api/vrdevice/geteyeparameters/index.html | 104 - .../web/api/vrdevice/getimmediatepose/index.html | 101 - files/ja/web/api/vrdevice/getlayers/index.html | 53 - files/ja/web/api/vrdevice/getpose/index.html | 101 - files/ja/web/api/vrdevice/index.html | 129 -- files/ja/web/api/vrdevice/isconnected/index.html | 97 - files/ja/web/api/vrdevice/ispresenting/index.html | 97 - .../api/vrdevice/requestanimationframe/index.html | 109 - .../ja/web/api/vrdevice/requestpresent/index.html | 162 -- files/ja/web/api/vrdevice/resetpose/index.html | 105 - .../ja/web/api/vrdevice/stageparameters/index.html | 49 - files/ja/web/api/vrdevice/submitframe/index.html | 106 - .../api/vrdisplay/cancelanimationframe/index.html | 104 + files/ja/web/api/vrdisplay/capabilities/index.html | 62 + files/ja/web/api/vrdisplay/depthfar/index.html | 99 + files/ja/web/api/vrdisplay/depthnear/index.html | 99 + files/ja/web/api/vrdisplay/displayid/index.html | 58 + .../web/api/vrdisplay/geteyeparameters/index.html | 104 + .../web/api/vrdisplay/getimmediatepose/index.html | 101 + files/ja/web/api/vrdisplay/getlayers/index.html | 53 + files/ja/web/api/vrdisplay/getpose/index.html | 101 + files/ja/web/api/vrdisplay/index.html | 129 ++ files/ja/web/api/vrdisplay/isconnected/index.html | 97 + files/ja/web/api/vrdisplay/ispresenting/index.html | 97 + .../api/vrdisplay/requestanimationframe/index.html | 109 + .../ja/web/api/vrdisplay/requestpresent/index.html | 162 ++ files/ja/web/api/vrdisplay/resetpose/index.html | 105 + .../web/api/vrdisplay/stageparameters/index.html | 49 + files/ja/web/api/vrdisplay/submitframe/index.html | 106 + files/ja/web/api/vrlayer/index.html | 91 - files/ja/web/api/vrlayer/rightbounds/index.html | 68 - files/ja/web/api/vrlayer/source/index.html | 59 - files/ja/web/api/vrlayerinit/index.html | 91 + .../ja/web/api/vrlayerinit/rightbounds/index.html | 68 + files/ja/web/api/vrlayerinit/source/index.html | 59 + .../api/webgl_api/cross-domain_textures/index.html | 16 - .../websockets_api/websockets_reference/index.html | 23 - files/ja/web/api/window.opener/index.html | 33 - files/ja/web/api/window.stop/index.html | 58 - files/ja/web/api/window/arguments/index.html | 7 - files/ja/web/api/window/escape/index.html | 34 - files/ja/web/api/window/getattention/index.html | 25 - files/ja/web/api/window/onafterprint/index.html | 55 - files/ja/web/api/window/onappinstalled/index.html | 57 + files/ja/web/api/window/onclick/index.html | 45 - files/ja/web/api/window/oninstall/index.html | 57 - files/ja/web/api/window/onmousedown/index.html | 48 - files/ja/web/api/window/onmouseup/index.html | 57 - files/ja/web/api/window/onreset/index.html | 57 - files/ja/web/api/window/onresize/index.html | 78 - files/ja/web/api/window/opener/index.html | 33 + files/ja/web/api/window/restore/index.html | 11 - files/ja/web/api/window/stop/index.html | 58 + files/ja/web/api/window/unescape/index.html | 34 - files/ja/web/api/window/url/index.html | 101 - files/ja/web/api/windowbase64/atob/index.html | 93 - .../base64_encoding_and_decoding/index.html | 558 ----- files/ja/web/api/windowbase64/index.html | 116 - .../windoweventhandlers/onafterprint/index.html | 55 + .../api/windoworworkerglobalscope/atob/index.html | 93 + .../windoworworkerglobalscope/caches/index.html | 82 + .../clearinterval/index.html | 122 ++ .../web/api/windowtimers/clearinterval/index.html | 122 -- files/ja/web/api/windowtimers/index.html | 119 -- .../ja/web/api/workerglobalscope/caches/index.html | 82 - files/ja/web/api/xmldocument/async/index.html | 45 + files/ja/web/api/xmlserializer/index.html | 101 + .../broken_table_layout.html/index.html | 67 - .../compatibility_faq/cut_off_text.html/index.html | 60 - .../empty_background_color.html/index.html | 58 - files/ja/web/compatibility_faq/index.html | 91 - .../invalid_icon_size.html/index.html | 92 - .../misaligned_icon.html/index.html | 128 -- .../misaligned_text.html/index.html | 116 - .../misaligned_text_inside_icon.html/index.html | 100 - .../no_background_shown.html/index.html | 60 - .../no_border_line_shown.html/index.html | 60 - .../no_checkbox_check_shown.html/index.html | 54 - .../no_decoreation_shown.html/index.html | 82 - .../no_icon_shown.html/index.html | 147 -- .../web/compatibility_faq/no_wrap.html/index.html | 122 -- .../overwrapped_icon.html/index.html | 62 - .../overwrapped_navigation.html/index.html | 83 - .../tips_default_style_difference.html/index.html | 62 - .../tips_vendor_prefix.html/index.html | 198 -- .../underline_color_diffrence.html/index.html | 77 - files/ja/web/css/-moz-box-ordinal-group/index.html | 66 - files/ja/web/css/-ms-high-contrast/index.html | 94 - .../ja/web/css/@media/-ms-high-contrast/index.html | 94 + files/ja/web/css/@media/aural/index.html | 41 + files/ja/web/css/@media/index/index.html | 12 - files/ja/web/css/@viewport/height/index.html | 86 - files/ja/web/css/@viewport/max-height/index.html | 77 - files/ja/web/css/@viewport/max-zoom/index.html | 89 - files/ja/web/css/@viewport/min-zoom/index.html | 71 - files/ja/web/css/@viewport/viewport-fit/index.html | 78 - files/ja/web/css/@viewport/zoom/index.html | 91 - files/ja/web/css/_colon_-moz-alt-text/index.html | 19 - .../ja/web/css/_colon_-moz-placeholder/index.html | 59 - .../ja/web/css/_colon_-webkit-autofill/index.html | 34 - files/ja/web/css/_colon_autofill/index.html | 34 + files/ja/web/css/aural/index.html | 41 - files/ja/web/css/auto/index.html | 29 - files/ja/web/css/common_css_questions/index.html | 231 -- .../using_css_multiple_backgrounds/index.html | 74 - .../resizing_background_images/index.html | 143 ++ .../scaling_background_images/index.html | 143 -- .../css/css_flexible_box_layout/mixins/index.html | 368 ---- .../index.html | 191 -- files/ja/web/css/index/index.html | 10 - files/ja/web/css/media/index.html | 5 - files/ja/web/css/media/visual/index.html | 17 - files/ja/web/css/none/index.html | 32 - files/ja/web/css/normal/index.html | 37 - files/ja/web/css/other_resources/index.html | 28 - .../web/css/scaling_background_images/index.html | 103 - files/ja/web/css/url/index.html | 98 - files/ja/web/events/compositionstart/index.html | 80 - files/ja/web/guide/ajax/other_resources/index.html | 21 - files/ja/web/guide/api/gamepad/index.html | 347 --- files/ja/web/guide/api/vibration/index.html | 101 - .../web/guide/css/getting_started/boxes/index.html | 331 --- .../web/guide/css/getting_started/color/index.html | 349 --- .../css/getting_started/javascript/index.html | 149 -- .../guide/css/getting_started/layout/index.html | 285 --- .../web/guide/css/getting_started/lists/index.html | 246 --- .../guide/css/getting_started/tables/index.html | 478 ----- files/ja/web/guide/css/media_queries/index.html | 412 ---- files/ja/web/guide/dom/index.html | 37 - .../canvas_tutorial/advanced_animations/index.html | 380 ---- .../applying_styles_and_colors/index.html | 725 ------- .../canvas_tutorial/basic_animations/index.html | 711 ------- .../html/canvas_tutorial/basic_usage/index.html | 152 -- .../html/canvas_tutorial/drawing_shapes/index.html | 577 ----- .../guide/html/canvas_tutorial/finale/index.html | 51 - files/ja/web/guide/html/canvas_tutorial/index.html | 60 - .../canvas_tutorial/optimizing_canvas/index.html | 118 - .../pixel_manipulation_with_canvas/index.html | 264 --- .../canvas_tutorial/transformations/index.html | 282 --- .../html/canvas_tutorial/using_images/index.html | 337 --- .../ja/web/guide/html/event_attributes/index.html | 89 - .../guide/html/html5/html5_element_list/index.html | 585 ----- .../guide/html/obsolete_things_to_avoid/index.html | 87 - .../index.html | 201 -- .../using_the_page_visibility_api/index.html | 272 --- .../ja/web/guide/using_formdata_objects/index.html | 145 -- .../writing_forward-compatible_websites/index.html | 81 + files/ja/web/html/element/command/index.html | 109 - files/ja/web/html/element/element/index.html | 64 - files/ja/web/html/forms_in_html/index.html | 46 - .../web/html/global_attributes/dropzone/index.html | 48 - files/ja/web/html/html_extensions/index.html | 12 - .../proxy_auto-configuration_(pac)_file/index.html | 731 ------- .../proxy_auto-configuration_pac_file/index.html | 731 +++++++ files/ja/web/http/public_key_pinning/index.html | 163 ++ files/ja/web/javascript/getting_started/index.html | 303 --- .../index.html | 25 - .../guide/core_language_features/index.html | 10 - .../guide/creating_a_regular_expression/index.html | 31 - .../defining_getters_and_setters/index.html | 89 - .../defining_methods/index.html | 39 - .../index.html | 13 - .../deleting_properties/index.html | 20 - .../guide/creating_new_objects/index.html | 17 - .../indexing_object_properties/index.html | 9 - .../using_a_constructor_function/index.html | 57 - .../using_object_initializers/index.html | 23 - .../using_this_for_object_references/index.html | 25 - .../ja/web/javascript/guide/expressions/index.html | 16 - .../loop_statements/break_statement/index.html | 24 - .../loop_statements/continue_statement/index.html | 46 - .../do...while_statement/index.html | 19 - .../guide/loop_statements/for_statement/index.html | 50 - .../javascript/guide/loop_statements/index.html | 17 - .../loop_statements/label_statement/index.html | 19 - .../loop_statements/while_statement/index.html | 35 - .../object_manipulation_statements/index.html | 51 - .../guide/objects_and_properties/index.html | 32 - .../web/javascript/guide/obsolete_pages/index.html | 10 - .../function_object/index.html | 44 - .../operators/arithmetic_operators/index.html | 47 - .../operators/assignment_operators/index.html | 61 - .../operators/comparison_operators/index.html | 67 - .../guide/operators/logical_operators/index.html | 63 - .../guide/operators/special_operators/index.html | 197 -- .../guide/operators/string_operators/index.html | 8 - .../escape_and_unescape_functions/index.html | 14 - .../predefined_functions/eval_function/index.html | 12 - .../guide/predefined_functions/index.html | 17 - .../creating_the_hierarchy/index.html | 134 -- .../guide/the_employee_example/index.html | 31 - .../object_properties/adding_properties/index.html | 19 - .../object_properties/index.html | 13 - .../inheriting_properties/index.html | 24 - .../guide/using_the_arguments_object/index.html | 36 - files/ja/web/javascript/guide/variables/index.html | 62 - .../index.html | 193 -- .../index.html | 381 ---- .../index.html | 411 ---- .../global_objects/array/index/index.html | 22 - .../global_objects/array/input/index.html | 25 - .../global_objects/array/prototype/index.html | 176 -- .../asyncfunction/prototype/index.html | 109 - .../global_objects/atomics/notify/index.html | 142 ++ .../global_objects/atomics/wake/index.html | 142 -- .../finalizationregistry/cleanupsome/index.html | 74 - .../intl/datetimeformat/prototype/index.html | 88 - .../webassembly/instance/prototype/index.html | 64 - .../webassembly/memory/prototype/index.html | 71 - .../webassembly/table/prototype/index.html | 75 - .../operators/comparison_operators/index.html | 232 -- .../operators/logical_operators/index.html | 295 --- .../reference/operators/special/index.html | 5 - .../operators/special_operators/index.html | 5 - .../javascript/reference/reserved_words/index.html | 89 - .../reference/statements/yield/index.html | 7 - files/ja/web/manifest/serviceworker/index.html | 77 - files/ja/web/opensearch/index.html | 145 ++ .../web/progressive_web_apps/advantages/index.html | 65 - .../information_security_basics/index.html | 39 - .../ja/web/security/public_key_pinning/index.html | 163 -- files/ja/web/specification_list/index.html | 614 ------ .../web/svg/svg_1.1_support_in_firefox/index.html | 30 + .../web_components/status_in_firefox/index.html | 58 - .../index.html | 440 ++++ .../index.html | 25 - files/ja/web_development/index.html | 81 - .../introduction_to_web_development/index.html | 113 - files/ja/web_development/mobile/index.html | 18 - .../mobile/responsive_design/index.html | 77 - .../writing_forward-compatible_websites/index.html | 81 - files/ja/webapi/index.html | 125 -- files/ja/webapi/proximity/index.html | 84 - files/ja/webapi/using_light_events/index.html | 68 - files/ja/width/index.html | 37 - files/ja/xmlserializer/index.html | 101 - files/ja/xpcom_components_list/index.html | 19 - files/ja/xpcom_part_1/index.html | 5 - files/ja/xpcom_part_2/index.html | 5 - files/ja/xpcom_part_3/index.html | 5 - files/ja/xpcom_part_4/index.html | 5 - files/ja/xpcom_part_5/index.html | 5 - files/ja/xpcom_plans/index.html | 32 - .../installtrigger_object/index.html | 15 - files/ja/xsltprocessor/index.html | 12 - 1400 files changed, 64780 insertions(+), 64780 deletions(-) delete mode 100644 files/ja/about/index.html delete mode 100644 files/ja/adapting_xul_applications_for_firefox_1.5/index.html delete mode 100644 files/ja/adding_feed_readers_to_firefox/index.html delete mode 100644 files/ja/adding_search_engines_from_web_pages/index.html delete mode 100644 files/ja/addons.mozilla.org_(amo)_api_developers'_guide/index.html delete mode 100644 files/ja/ant_script_to_assemble_an_extension/index.html delete mode 100644 files/ja/aria/accessible_rich_internet_applications/index.html delete mode 100644 files/ja/bugzilla-ja/2.20-ja/index.html delete mode 100644 files/ja/bugzilla-ja/3.0-ja/index.html delete mode 100644 files/ja/bugzilla-ja/index.html delete mode 100644 files/ja/bugzilla-ja/l10n/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/accountcreation/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/bugdetails/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/changeaccountprefs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/productsandcomponents/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/trunkandbranch/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/whatisbug/index.html delete mode 100644 files/ja/bugzilla-jp/guide/about/whatisbugzilla/index.html delete mode 100644 files/ja/bugzilla-jp/guide/comment/index.html delete mode 100644 files/ja/bugzilla-jp/guide/comment/linkrules/index.html delete mode 100644 files/ja/bugzilla-jp/guide/contribute/index.html delete mode 100644 files/ja/bugzilla-jp/guide/grossary/index.html delete mode 100644 files/ja/bugzilla-jp/guide/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/mozilla/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/mozillagumi/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/qamozilla/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/webstandard/index.html delete mode 100644 files/ja/bugzilla-jp/guide/lifecycle/webtools/index.html delete mode 100644 files/ja/bugzilla-jp/guide/management/deleteaccount/index.html delete mode 100644 files/ja/bugzilla-jp/guide/management/index.html delete mode 100644 files/ja/bugzilla-jp/guide/management/stopaccount/index.html delete mode 100644 files/ja/bugzilla-jp/guide/management/upgradeaccount/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/crashbugs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/enhancement/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/memoryleakbugs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/renderingbugs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/securitybugs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/report/uibugs/index.html delete mode 100644 files/ja/bugzilla-jp/guide/search/advanced/index.html delete mode 100644 files/ja/bugzilla-jp/guide/search/hints/index.html delete mode 100644 files/ja/bugzilla-jp/guide/search/index.html delete mode 100644 files/ja/bugzilla-jp/guide/search/simple/index.html delete mode 100644 files/ja/bugzilla-jp/guide/tracking/index.html delete mode 100644 files/ja/bugzilla-jp/index.html delete mode 100644 files/ja/building_a_mozilla_distribution/index.html delete mode 100644 files/ja/building_an_extension/index.html delete mode 100644 files/ja/building_with_vc8_express/index.html delete mode 100644 files/ja/code_snippets/toolbar/index.html delete mode 100644 files/ja/components/index.html 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 delete mode 100644 files/ja/controlling_dns_prefetching/index.html delete mode 100644 files/ja/controlling_spell_checking_in_html_forms/index.html delete mode 100644 files/ja/creating_opensearch_plugins_for_firefox/index.html delete mode 100644 files/ja/creating_toolbar_buttons/index.html delete mode 100644 files/ja/css-2_quick_reference/all_in_a_page/index.html delete mode 100644 files/ja/css-2_quick_reference/index.html delete mode 100644 files/ja/debnews/index.html delete mode 100644 files/ja/determining_the_dimensions_of_elements/index.html delete mode 100644 files/ja/developing_add-ons/index.html delete mode 100644 files/ja/developing_mozilla/index.html delete mode 100644 files/ja/devnews/20060705/index.html delete mode 100644 files/ja/devnews/20060706/index.html delete mode 100644 files/ja/devnews/20060712/index.html delete mode 100644 files/ja/devnews/20060713/index.html delete mode 100644 files/ja/devnews/20060719/index.html delete mode 100644 files/ja/devnews/20060726/index.html delete mode 100644 files/ja/devnews/20060802/index.html delete mode 100644 files/ja/devnews/20060809/index.html delete mode 100644 files/ja/devnews/20060817/index.html delete mode 100644 files/ja/devnews/20060818/index.html delete mode 100644 files/ja/devnews/20060821/index.html delete mode 100644 files/ja/devnews/20060822-02/index.html delete mode 100644 files/ja/devnews/20060822/index.html delete mode 100644 files/ja/devnews/20060823/index.html delete mode 100644 files/ja/devnews/20060825/index.html delete mode 100644 files/ja/devnews/20060828/index.html delete mode 100644 files/ja/devnews/20061002-02/index.html delete mode 100644 files/ja/devnews/20061002/index.html delete mode 100644 files/ja/devnews/20061025/index.html delete mode 100644 files/ja/devnews/20061106/index.html delete mode 100644 files/ja/devnews/20061107/index.html delete mode 100644 files/ja/devnews/20061108/index.html delete mode 100644 files/ja/devnews/20061114/index.html delete mode 100644 files/ja/devnews/20061129/index.html delete mode 100644 files/ja/devnews/20061208/index.html delete mode 100644 files/ja/devnews/20061219/index.html delete mode 100644 files/ja/devnews/20070207/index.html delete mode 100644 files/ja/devnews/20070213/index.html delete mode 100644 files/ja/devnews/20070219/index.html delete mode 100644 files/ja/devnews/20070223/index.html delete mode 100644 files/ja/devnews/20070302/index.html delete mode 100644 files/ja/devnews/20070304/index.html delete mode 100644 files/ja/devnews/20070312/index.html delete mode 100644 files/ja/devnews/20070315/index.html delete mode 100644 files/ja/devnews/20070320/index.html delete mode 100644 files/ja/devnews/20070322/index.html delete mode 100644 files/ja/devnews/20070323/index.html delete mode 100644 files/ja/devnews/20070411/index.html delete mode 100644 files/ja/devnews/20070424/index.html delete mode 100644 files/ja/devnews/20070427/index.html delete mode 100644 files/ja/devnews/20070501/index.html delete mode 100644 files/ja/devnews/20070502/index.html delete mode 100644 files/ja/devnews/20070509/index.html delete mode 100644 files/ja/devnews/20070512/index.html delete mode 100644 files/ja/devnews/20070523-2/index.html delete mode 100644 files/ja/devnews/20070523/index.html delete mode 100644 files/ja/devnews/20070529-2/index.html delete mode 100644 files/ja/devnews/20070529/index.html delete mode 100644 files/ja/devnews/20070530-02/index.html delete mode 100644 files/ja/devnews/20070530/index.html delete mode 100644 files/ja/devnews/20070604/index.html delete mode 100644 files/ja/devnews/20070606-2/index.html delete mode 100644 files/ja/devnews/20070606/index.html delete mode 100644 files/ja/devnews/20070626/index.html delete mode 100644 files/ja/devnews/20070628/index.html delete mode 100644 files/ja/devnews/20070702/index.html delete mode 100644 files/ja/devnews/20070710/index.html delete mode 100644 files/ja/devnews/20070717/index.html delete mode 100644 files/ja/devnews/20070718/index.html delete mode 100644 files/ja/devnews/20070719/index.html delete mode 100644 files/ja/devnews/20070730/index.html delete mode 100644 files/ja/devnews/20070801/index.html delete mode 100644 files/ja/devnews/20070803/index.html delete mode 100644 files/ja/devnews/20070808/index.html delete mode 100644 files/ja/devnews/20070910/index.html delete mode 100644 files/ja/devnews/20070913/index.html delete mode 100644 files/ja/devnews/20070918/index.html delete mode 100644 files/ja/devnews/20070920/index.html delete mode 100644 files/ja/devnews/20071005/index.html delete mode 100644 files/ja/devnews/20071008/index.html delete mode 100644 files/ja/devnews/20071012/index.html delete mode 100644 files/ja/devnews/20071018/index.html delete mode 100644 files/ja/devnews/20071101/index.html delete mode 100644 files/ja/devnews/20071115/index.html delete mode 100644 files/ja/devnews/20071126/index.html delete mode 100644 files/ja/devnews/20071203/index.html delete mode 100644 files/ja/devnews/20071210-02/index.html delete mode 100644 files/ja/devnews/20071210/index.html delete mode 100644 files/ja/devnews/20071211/index.html delete mode 100644 files/ja/devnews/20071217/index.html delete mode 100644 files/ja/devnews/20071218/index.html delete mode 100644 files/ja/devnews/20080107/index.html delete mode 100644 files/ja/devnews/20080115/index.html delete mode 100644 files/ja/devnews/20080122/index.html delete mode 100644 files/ja/devnews/20080129/index.html delete mode 100644 files/ja/devnews/20080205/index.html delete mode 100644 files/ja/devnews/20080207-2/index.html delete mode 100644 files/ja/devnews/20080207/index.html delete mode 100644 files/ja/devnews/20080212/index.html delete mode 100644 files/ja/devnews/20080219/index.html delete mode 100644 files/ja/devnews/20080226/index.html delete mode 100644 files/ja/devnews/20080304/index.html delete mode 100644 files/ja/devnews/20080310/index.html delete mode 100644 files/ja/devnews/20080311/index.html delete mode 100644 files/ja/devnews/20080318/index.html delete mode 100644 files/ja/devnews/20080325/index.html delete mode 100644 files/ja/devnews/20080401/index.html delete mode 100644 files/ja/devnews/20080408/index.html delete mode 100644 files/ja/devnews/20080415/index.html delete mode 100644 files/ja/devnews/20080422/index.html delete mode 100644 files/ja/devnews/20080429/index.html delete mode 100644 files/ja/devnews/20080501/index.html delete mode 100644 files/ja/devnews/20080506/index.html delete mode 100644 files/ja/devnews/20080513/index.html delete mode 100644 files/ja/devnews/20080520/index.html delete mode 100644 files/ja/devnews/20080527/index.html delete mode 100644 files/ja/devnews/20080603/index.html delete mode 100644 files/ja/devnews/20080610/index.html delete mode 100644 files/ja/devnews/20080617/index.html delete mode 100644 files/ja/devnews/20080624/index.html delete mode 100644 files/ja/devnews/20080630/index.html delete mode 100644 files/ja/devnews/20080708/index.html delete mode 100644 files/ja/devnews/20080715/index.html delete mode 100644 files/ja/devnews/20080722/index.html delete mode 100644 files/ja/devnews/20080728/index.html delete mode 100644 files/ja/devnews/20080729/index.html delete mode 100644 files/ja/devnews/20080805/index.html delete mode 100644 files/ja/devnews/20080810/index.html delete mode 100644 files/ja/devnews/20080812/index.html delete mode 100644 files/ja/devnews/20080819/index.html delete mode 100644 files/ja/devnews/20080826/index.html delete mode 100644 files/ja/devnews/20080902/index.html delete mode 100644 files/ja/devnews/20080909/index.html delete mode 100644 files/ja/devnews/20080916/index.html delete mode 100644 files/ja/devnews/20080923/index.html delete mode 100644 files/ja/devnews/20080930-2/index.html delete mode 100644 files/ja/devnews/20080930/index.html delete mode 100644 files/ja/devnews/20081007/index.html delete mode 100644 files/ja/devnews/20081014/index.html delete mode 100644 files/ja/devnews/20081021/index.html delete mode 100644 files/ja/devnews/20081028/index.html delete mode 100644 files/ja/devnews/20081104/index.html delete mode 100644 files/ja/devnews/20081111/index.html delete mode 100644 files/ja/devnews/20081118/index.html delete mode 100644 files/ja/devnews/20081125/index.html delete mode 100644 files/ja/devnews/20081202/index.html delete mode 100644 files/ja/devnews/20081209/index.html delete mode 100644 files/ja/devnews/20081216/index.html delete mode 100644 files/ja/devnews/20081223/index.html delete mode 100644 files/ja/devnews/20090113/index.html delete mode 100644 files/ja/devnews/20090120/index.html delete mode 100644 files/ja/devnews/20090310/index.html delete mode 100644 files/ja/devnews/20090324/index.html delete mode 100644 files/ja/devnews/20090904/index.html delete mode 100644 files/ja/devnews/index.html delete mode 100644 files/ja/dhtml/index.html delete mode 100644 files/ja/dom/about_the_document_object_model/index.html delete mode 100644 files/ja/dom/dispatchevent_example/index.html delete mode 100644 files/ja/dom/storage/index.html delete mode 100644 files/ja/dom_client_object_cross-reference/index.html delete mode 100644 files/ja/dom_client_object_cross-reference/navigator/index.html delete mode 100644 files/ja/dom_improvements_in_firefox_3/index.html delete mode 100644 files/ja/dom_inspector/index.html delete mode 100644 files/ja/dom_inspector/internals/index.html delete mode 100644 files/ja/dom_inspector/introduction_to_dom_inspector/index.html delete mode 100644 files/ja/dom_inspector_faq/index.html delete mode 100644 files/ja/dragdrop/drag_operations/index.html delete mode 100644 files/ja/dragdrop/dragging_and_dropping_multiple_items/index.html delete mode 100644 files/ja/dragdrop/index.html delete mode 100644 files/ja/dragdrop/recommended_drag_types/index.html delete mode 100644 files/ja/drawing_text_using_a_canvas/index.html delete mode 100644 files/ja/dynamically_modifying_xul-based_user_interface/index.html delete mode 100644 files/ja/e4x/processing_xml_with_e4x/index.html delete mode 100644 files/ja/feed_content_access_api/index.html delete mode 100644 files/ja/findbar_api/index.html delete mode 100644 files/ja/full_page_zoom/index.html create mode 100644 files/ja/games/introduction_to_html5_game_development/index.html delete mode 100644 files/ja/games/introduction_to_html5_game_gevelopment_(summary)/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_phaser/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html create mode 100644 files/ja/games/tutorials/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_phaser/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_phaser/physics/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/collision_detection/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/finishing_up/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html delete mode 100644 files/ja/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html delete mode 100644 files/ja/games/workflows/index.html create mode 100644 files/ja/glossary/base64/index.html create mode 100644 files/ja/glossary/closure/index.html delete mode 100644 "files/ja/glossary/constant(\345\256\232\346\225\260)/index.html" create mode 100644 files/ja/glossary/constant/index.html create mode 100644 files/ja/glossary/dhtml/index.html create mode 100644 files/ja/glossary/firewall/index.html delete mode 100644 files/ja/glossary/global_attribute/index.html create mode 100644 files/ja/glossary/localization/index.html create mode 100644 files/ja/glossary/namespace/index.html create mode 100644 files/ja/glossary/routers/index.html create mode 100644 files/ja/glossary/signature/function/index.html create mode 100644 files/ja/glossary/signature/security/index.html delete mode 100644 "files/ja/glossary/signature/\343\202\273\343\202\255\343\203\245\343\203\252\343\203\206\343\202\243/index.html" delete mode 100644 "files/ja/glossary/signature/\351\226\242\346\225\260/index.html" create mode 100644 files/ja/glossary/slug/index.html create mode 100644 files/ja/glossary/ssl/index.html delete mode 100644 files/ja/glossary/ssl_glossary/index.html delete mode 100644 "files/ja/glossary/\343\202\257\343\203\255\343\203\274\343\202\270\343\203\243/index.html" delete mode 100644 "files/ja/glossary/\343\202\271\343\203\251\343\202\260/index.html" delete mode 100644 "files/ja/glossary/\343\203\225\343\202\241\343\202\244\343\202\242\343\202\246\343\202\251\343\203\274\343\203\253/index.html" delete mode 100644 "files/ja/glossary/\343\203\253\343\203\274\343\202\277\343\203\274/index.html" delete mode 100644 files/ja/hacking_mozilla/index.html delete mode 100644 files/ja/how_mozilla's_build_system_works/index.html delete mode 100644 files/ja/html_element_cross_reference/index.html delete mode 100644 files/ja/http_pipelining_faq/index.html delete mode 100644 files/ja/installing_extensions/index.html delete mode 100644 files/ja/installing_extensions_and_themes_from_web_pages/index.html delete mode 100644 files/ja/introduction_to_dom_inspector/index.html delete mode 100644 files/ja/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ja/javascript_modules/index.html delete mode 100644 files/ja/javascript_presentations/index.html delete mode 100644 files/ja/jetpack/ui/slidebar/index.html delete mode 100644 "files/ja/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" delete mode 100644 files/ja/key-navigable_custom_dhtml_widgets/index.html delete mode 100644 files/ja/lastindexof/index.html create mode 100644 files/ja/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ja/learn/css/howto/css_faq/index.html delete mode 100644 files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html delete mode 100644 files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html delete mode 100644 files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ja/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" create mode 100644 files/ja/learn/forms/advanced_form_styling/index.html delete mode 100644 files/ja/learn/forms/advanced_styling_for_html_forms/index.html create mode 100644 files/ja/learn/forms/basic_native_form_controls/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html create mode 100644 files/ja/learn/forms/how_to_build_custom_form_controls/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html delete mode 100644 files/ja/learn/forms/how_to_build_custom_form_widgets/index.html create mode 100644 files/ja/learn/forms/how_to_structure_a_web_form/example/index.html create mode 100644 files/ja/learn/forms/how_to_structure_a_web_form/index.html delete mode 100644 files/ja/learn/forms/how_to_structure_an_html_form/example/index.html delete mode 100644 files/ja/learn/forms/how_to_structure_an_html_form/index.html delete mode 100644 files/ja/learn/forms/styling_html_forms/index.html create mode 100644 files/ja/learn/forms/styling_web_forms/index.html delete mode 100644 files/ja/learn/forms/the_native_form_widgets/index.html create mode 100644 files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 "files/ja/learn/getting_started_with_the_web/\343\202\246\343\202\247\343\203\226\343\202\265\343\202\244\343\203\210\343\202\222\345\205\254\351\226\213\343\201\231\343\202\213/index.html" delete mode 100644 files/ja/learn/how_to_contribute/index.html create mode 100644 files/ja/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 files/ja/localization/index.html delete mode 100644 files/ja/localizing_extension_descriptions/index.html delete mode 100644 files/ja/map/index.html delete mode 100644 files/ja/mcd/getting_started/index.html delete mode 100644 files/ja/mcd/index.html delete mode 100644 files/ja/mdn/about/linking_to_mdn/index.html create mode 100644 files/ja/mdn/at_ten/history_of_mdn/index.html create mode 100644 files/ja/mdn/at_ten/index.html delete mode 100644 files/ja/mdn/community/conversations/index.html delete mode 100644 files/ja/mdn/community/doc_sprints/index.html delete mode 100644 files/ja/mdn/community/index.html delete mode 100644 files/ja/mdn/community/whats_happening/index.html delete mode 100644 files/ja/mdn/community/working_in_community/index.html delete mode 100644 files/ja/mdn/contribute/faq/index.html delete mode 100644 files/ja/mdn/contribute/howto/create_an_mdn_account/index.html delete mode 100644 files/ja/mdn/contribute/howto/create_learning_pathways/index.html delete mode 100644 files/ja/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/ja/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 files/ja/mdn/contribute/howto/remove__experimental__macros/index.html delete mode 100644 files/ja/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html delete mode 100644 files/ja/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/ja/mdn/contribute/howto/tag_javascript_pages/index.html delete mode 100644 files/ja/mdn/contribute/howto/use_navigation_sidebars/index.html create mode 100644 files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html delete mode 100644 files/ja/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 files/ja/mdn/contribute/howto/write_interface_reference_documentation/index.html delete mode 100644 files/ja/mdn/contribute/onboarding/index.html delete mode 100644 files/ja/mdn/contribute/processes/browser_information_resources/index.html delete mode 100644 files/ja/mdn/contribute/processes/cross-team_collaboration_tactics/index.html delete mode 100644 files/ja/mdn/contribute/processes/requesting_elevated_privileges/index.html delete mode 100644 files/ja/mdn/dashboards/editors/index.html delete mode 100644 files/ja/mdn/dashboards/index.html delete mode 100644 files/ja/mdn/editor/basics/attachments/index.html delete mode 100644 files/ja/mdn/editor/basics/index.html delete mode 100644 files/ja/mdn/editor/basics/page_controls/index.html delete mode 100644 files/ja/mdn/editor/basics/page_info/index.html delete mode 100644 files/ja/mdn/editor/basics/tags/index.html delete mode 100644 files/ja/mdn/editor/basics/toolbar/index.html delete mode 100644 files/ja/mdn/editor/images/index.html delete mode 100644 files/ja/mdn/editor/index.html delete mode 100644 files/ja/mdn/editor/keyboard_shortcuts/index.html delete mode 100644 files/ja/mdn/editor/links/index.html delete mode 100644 files/ja/mdn/editor/redirects/index.html delete mode 100644 files/ja/mdn/editor/source_mode/index.html delete mode 100644 files/ja/mdn/editor/syntax_highlighting/index.html delete mode 100644 files/ja/mdn/editor/tables/index.html delete mode 100644 files/ja/mdn/kuma/index.html delete mode 100644 files/ja/mdn/kuma/server_charts/index.html delete mode 100644 "files/ja/mdn/kuma/\343\202\263\343\203\263\343\203\210\343\203\252\343\203\223\343\203\245\343\203\274\343\203\210/index.html" delete mode 100644 files/ja/mdn/structures/api_references/api_reference_sidebars/index.html delete mode 100644 files/ja/mdn/structures/api_references/index.html delete mode 100644 files/ja/mdn/structures/api_references/what_does_an_api_reference_need/index.html delete mode 100644 files/ja/mdn/structures/live_samples/simple_live_sample_demo/index.html delete mode 100644 files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html delete mode 100644 files/ja/mdn/tools/add-ons_and_plug-ins/index.html delete mode 100644 files/ja/mdn/tools/document_parameters/index.html delete mode 100644 files/ja/mdn/tools/feeds/index.html delete mode 100644 files/ja/mdn/tools/page_deletion/index.html delete mode 100644 files/ja/mdn/tools/page_moving/index.html delete mode 100644 files/ja/mdn/tools/page_regeneration/index.html delete mode 100644 files/ja/mdn/tools/page_watching/index.html delete mode 100644 files/ja/mdn/tools/put_api/index.html delete mode 100644 files/ja/mdn/tools/revision_dashboard/index.html delete mode 100644 files/ja/mdn/tools/template_editing/index.html create mode 100644 files/ja/mdn/tools/unsupported_get_api/index.html delete mode 100644 files/ja/mdn/troubleshooting/index.html create mode 100644 files/ja/mdn/yari/index.html delete mode 100644 files/ja/mdn_at_ten/contributing_to_mdn/index.html delete mode 100644 files/ja/mdn_at_ten/history_of_mdn/index.html delete mode 100644 files/ja/mdn_at_ten/index.html delete mode 100644 files/ja/microsummary_xml_grammar_reference/index.html delete mode 100644 files/ja/migrate_apps_from_internet_explorer_to_mozilla/index.html delete mode 100644 files/ja/monitoring_http_activity/index.html delete mode 100644 files/ja/monitoring_wifi_access_points/index.html delete mode 100644 files/ja/mozilla-central/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/prerequisites/index.html delete mode 100644 files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html delete mode 100644 "files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" delete mode 100644 files/ja/mozilla/add-ons/webextensions/walkthrough/index.html create mode 100644 files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html delete mode 100644 "files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" create mode 100644 files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html create mode 100644 files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html create mode 100644 files/ja/mozilla/developer_guide/mozilla-central/index.html create mode 100644 files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html delete mode 100644 files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html create mode 100644 files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html create mode 100644 files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html create mode 100644 files/ja/mozilla/firefox/releases/2/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html create mode 100644 files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html delete mode 100644 files/ja/mozilla_hacker's_getting_started_guide/index.html delete mode 100644 files/ja/mozilla_modules_and_module_ownership/index.html delete mode 100644 files/ja/mozilla_svg_status/index.html delete mode 100644 files/ja/mozistorageservice/index.html delete mode 100644 files/ja/mozmill/index.html delete mode 100644 files/ja/my_chrome_oven/index.html delete mode 100644 files/ja/namespace/index.html delete mode 100644 files/ja/new_in_javascript_1.8/index.html delete mode 100644 files/ja/notable_bugs_fixed_in_firefox_3/index.html delete mode 100644 files/ja/npapi/constants/index.html delete mode 100644 files/ja/nsidomhtmlmediaelement/index.html delete mode 100644 files/ja/nsidynamiccontainer/index.html create mode 100644 files/ja/orphaned/about/index.html create mode 100644 files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html create mode 100644 files/ja/orphaned/ant_script_to_assemble_an_extension/index.html create mode 100644 files/ja/orphaned/bugzilla-ja/2.20-ja/index.html create mode 100644 files/ja/orphaned/bugzilla-ja/3.0-ja/index.html create mode 100644 files/ja/orphaned/bugzilla-ja/index.html create mode 100644 files/ja/orphaned/bugzilla-ja/l10n/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/comment/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/contribute/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/grossary/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/management/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/search/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/guide/tracking/index.html create mode 100644 files/ja/orphaned/bugzilla-jp/index.html create mode 100644 files/ja/orphaned/building_a_mozilla_distribution/index.html create mode 100644 files/ja/orphaned/code_snippets/toolbar/index.html create mode 100644 files/ja/orphaned/components/index.html create mode 100644 files/ja/orphaned/creating_toolbar_buttons/index.html create mode 100644 files/ja/orphaned/debnews/index.html create mode 100644 files/ja/orphaned/developing_add-ons/index.html create mode 100644 files/ja/orphaned/developing_mozilla/index.html create mode 100644 files/ja/orphaned/devnews/20060705/index.html create mode 100644 files/ja/orphaned/devnews/20060706/index.html create mode 100644 files/ja/orphaned/devnews/20060712/index.html create mode 100644 files/ja/orphaned/devnews/20060713/index.html create mode 100644 files/ja/orphaned/devnews/20060719/index.html create mode 100644 files/ja/orphaned/devnews/20060726/index.html create mode 100644 files/ja/orphaned/devnews/20060802/index.html create mode 100644 files/ja/orphaned/devnews/20060809/index.html create mode 100644 files/ja/orphaned/devnews/20060817/index.html create mode 100644 files/ja/orphaned/devnews/20060818/index.html create mode 100644 files/ja/orphaned/devnews/20060821/index.html create mode 100644 files/ja/orphaned/devnews/20060822-02/index.html create mode 100644 files/ja/orphaned/devnews/20060822/index.html create mode 100644 files/ja/orphaned/devnews/20060823/index.html create mode 100644 files/ja/orphaned/devnews/20060825/index.html create mode 100644 files/ja/orphaned/devnews/20060828/index.html create mode 100644 files/ja/orphaned/devnews/20061002-02/index.html create mode 100644 files/ja/orphaned/devnews/20061002/index.html create mode 100644 files/ja/orphaned/devnews/20061025/index.html create mode 100644 files/ja/orphaned/devnews/20061106/index.html create mode 100644 files/ja/orphaned/devnews/20061107/index.html create mode 100644 files/ja/orphaned/devnews/20061108/index.html create mode 100644 files/ja/orphaned/devnews/20061114/index.html create mode 100644 files/ja/orphaned/devnews/20061129/index.html create mode 100644 files/ja/orphaned/devnews/20061208/index.html create mode 100644 files/ja/orphaned/devnews/20061219/index.html create mode 100644 files/ja/orphaned/devnews/20070207/index.html create mode 100644 files/ja/orphaned/devnews/20070213/index.html create mode 100644 files/ja/orphaned/devnews/20070219/index.html create mode 100644 files/ja/orphaned/devnews/20070223/index.html create mode 100644 files/ja/orphaned/devnews/20070302/index.html create mode 100644 files/ja/orphaned/devnews/20070304/index.html create mode 100644 files/ja/orphaned/devnews/20070312/index.html create mode 100644 files/ja/orphaned/devnews/20070315/index.html create mode 100644 files/ja/orphaned/devnews/20070320/index.html create mode 100644 files/ja/orphaned/devnews/20070322/index.html create mode 100644 files/ja/orphaned/devnews/20070323/index.html create mode 100644 files/ja/orphaned/devnews/20070411/index.html create mode 100644 files/ja/orphaned/devnews/20070424/index.html create mode 100644 files/ja/orphaned/devnews/20070427/index.html create mode 100644 files/ja/orphaned/devnews/20070501/index.html create mode 100644 files/ja/orphaned/devnews/20070502/index.html create mode 100644 files/ja/orphaned/devnews/20070509/index.html create mode 100644 files/ja/orphaned/devnews/20070512/index.html create mode 100644 files/ja/orphaned/devnews/20070523-2/index.html create mode 100644 files/ja/orphaned/devnews/20070523/index.html create mode 100644 files/ja/orphaned/devnews/20070529-2/index.html create mode 100644 files/ja/orphaned/devnews/20070529/index.html create mode 100644 files/ja/orphaned/devnews/20070530-02/index.html create mode 100644 files/ja/orphaned/devnews/20070530/index.html create mode 100644 files/ja/orphaned/devnews/20070604/index.html create mode 100644 files/ja/orphaned/devnews/20070606-2/index.html create mode 100644 files/ja/orphaned/devnews/20070606/index.html create mode 100644 files/ja/orphaned/devnews/20070626/index.html create mode 100644 files/ja/orphaned/devnews/20070628/index.html create mode 100644 files/ja/orphaned/devnews/20070702/index.html create mode 100644 files/ja/orphaned/devnews/20070710/index.html create mode 100644 files/ja/orphaned/devnews/20070717/index.html create mode 100644 files/ja/orphaned/devnews/20070718/index.html create mode 100644 files/ja/orphaned/devnews/20070719/index.html create mode 100644 files/ja/orphaned/devnews/20070730/index.html create mode 100644 files/ja/orphaned/devnews/20070801/index.html create mode 100644 files/ja/orphaned/devnews/20070803/index.html create mode 100644 files/ja/orphaned/devnews/20070808/index.html create mode 100644 files/ja/orphaned/devnews/20070910/index.html create mode 100644 files/ja/orphaned/devnews/20070913/index.html create mode 100644 files/ja/orphaned/devnews/20070918/index.html create mode 100644 files/ja/orphaned/devnews/20070920/index.html create mode 100644 files/ja/orphaned/devnews/20071005/index.html create mode 100644 files/ja/orphaned/devnews/20071008/index.html create mode 100644 files/ja/orphaned/devnews/20071012/index.html create mode 100644 files/ja/orphaned/devnews/20071018/index.html create mode 100644 files/ja/orphaned/devnews/20071101/index.html create mode 100644 files/ja/orphaned/devnews/20071115/index.html create mode 100644 files/ja/orphaned/devnews/20071126/index.html create mode 100644 files/ja/orphaned/devnews/20071203/index.html create mode 100644 files/ja/orphaned/devnews/20071210-02/index.html create mode 100644 files/ja/orphaned/devnews/20071210/index.html create mode 100644 files/ja/orphaned/devnews/20071211/index.html create mode 100644 files/ja/orphaned/devnews/20071217/index.html create mode 100644 files/ja/orphaned/devnews/20071218/index.html create mode 100644 files/ja/orphaned/devnews/20080107/index.html create mode 100644 files/ja/orphaned/devnews/20080115/index.html create mode 100644 files/ja/orphaned/devnews/20080122/index.html create mode 100644 files/ja/orphaned/devnews/20080129/index.html create mode 100644 files/ja/orphaned/devnews/20080205/index.html create mode 100644 files/ja/orphaned/devnews/20080207-2/index.html create mode 100644 files/ja/orphaned/devnews/20080207/index.html create mode 100644 files/ja/orphaned/devnews/20080212/index.html create mode 100644 files/ja/orphaned/devnews/20080219/index.html create mode 100644 files/ja/orphaned/devnews/20080226/index.html create mode 100644 files/ja/orphaned/devnews/20080304/index.html create mode 100644 files/ja/orphaned/devnews/20080310/index.html create mode 100644 files/ja/orphaned/devnews/20080311/index.html create mode 100644 files/ja/orphaned/devnews/20080318/index.html create mode 100644 files/ja/orphaned/devnews/20080325/index.html create mode 100644 files/ja/orphaned/devnews/20080401/index.html create mode 100644 files/ja/orphaned/devnews/20080408/index.html create mode 100644 files/ja/orphaned/devnews/20080415/index.html create mode 100644 files/ja/orphaned/devnews/20080422/index.html create mode 100644 files/ja/orphaned/devnews/20080429/index.html create mode 100644 files/ja/orphaned/devnews/20080501/index.html create mode 100644 files/ja/orphaned/devnews/20080506/index.html create mode 100644 files/ja/orphaned/devnews/20080513/index.html create mode 100644 files/ja/orphaned/devnews/20080520/index.html create mode 100644 files/ja/orphaned/devnews/20080527/index.html create mode 100644 files/ja/orphaned/devnews/20080603/index.html create mode 100644 files/ja/orphaned/devnews/20080610/index.html create mode 100644 files/ja/orphaned/devnews/20080617/index.html create mode 100644 files/ja/orphaned/devnews/20080624/index.html create mode 100644 files/ja/orphaned/devnews/20080630/index.html create mode 100644 files/ja/orphaned/devnews/20080708/index.html create mode 100644 files/ja/orphaned/devnews/20080715/index.html create mode 100644 files/ja/orphaned/devnews/20080722/index.html create mode 100644 files/ja/orphaned/devnews/20080728/index.html create mode 100644 files/ja/orphaned/devnews/20080729/index.html create mode 100644 files/ja/orphaned/devnews/20080805/index.html create mode 100644 files/ja/orphaned/devnews/20080810/index.html create mode 100644 files/ja/orphaned/devnews/20080812/index.html create mode 100644 files/ja/orphaned/devnews/20080819/index.html create mode 100644 files/ja/orphaned/devnews/20080826/index.html create mode 100644 files/ja/orphaned/devnews/20080902/index.html create mode 100644 files/ja/orphaned/devnews/20080909/index.html create mode 100644 files/ja/orphaned/devnews/20080916/index.html create mode 100644 files/ja/orphaned/devnews/20080923/index.html create mode 100644 files/ja/orphaned/devnews/20080930-2/index.html create mode 100644 files/ja/orphaned/devnews/20080930/index.html create mode 100644 files/ja/orphaned/devnews/20081007/index.html create mode 100644 files/ja/orphaned/devnews/20081014/index.html create mode 100644 files/ja/orphaned/devnews/20081021/index.html create mode 100644 files/ja/orphaned/devnews/20081028/index.html create mode 100644 files/ja/orphaned/devnews/20081104/index.html create mode 100644 files/ja/orphaned/devnews/20081111/index.html create mode 100644 files/ja/orphaned/devnews/20081118/index.html create mode 100644 files/ja/orphaned/devnews/20081125/index.html create mode 100644 files/ja/orphaned/devnews/20081202/index.html create mode 100644 files/ja/orphaned/devnews/20081209/index.html create mode 100644 files/ja/orphaned/devnews/20081216/index.html create mode 100644 files/ja/orphaned/devnews/20081223/index.html create mode 100644 files/ja/orphaned/devnews/20090113/index.html create mode 100644 files/ja/orphaned/devnews/20090120/index.html create mode 100644 files/ja/orphaned/devnews/20090310/index.html create mode 100644 files/ja/orphaned/devnews/20090324/index.html create mode 100644 files/ja/orphaned/devnews/20090904/index.html create mode 100644 files/ja/orphaned/devnews/index.html create mode 100644 files/ja/orphaned/dynamically_modifying_xul-based_user_interface/index.html create mode 100644 files/ja/orphaned/e4x/processing_xml_with_e4x/index.html create mode 100644 files/ja/orphaned/feed_content_access_api/index.html create mode 100644 files/ja/orphaned/findbar_api/index.html create mode 100644 files/ja/orphaned/html_element_cross_reference/index.html create mode 100644 files/ja/orphaned/installing_extensions/index.html create mode 100644 files/ja/orphaned/installing_extensions_and_themes_from_web_pages/index.html create mode 100644 files/ja/orphaned/introduction_to_dom_inspector/index.html create mode 100644 files/ja/orphaned/javascript_modules/index.html create mode 100644 files/ja/orphaned/javascript_presentations/index.html create mode 100644 files/ja/orphaned/jetpack/ui/slidebar/index.html create mode 100644 "files/ja/orphaned/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" create mode 100644 files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html create mode 100644 files/ja/orphaned/learn/how_to_contribute/index.html create mode 100644 files/ja/orphaned/learn/html/forms/html5_updates/index.html create mode 100644 files/ja/orphaned/localizing_extension_descriptions/index.html create mode 100644 files/ja/orphaned/map/index.html create mode 100644 files/ja/orphaned/mcd/getting_started/index.html create mode 100644 files/ja/orphaned/mcd/index.html create mode 100644 files/ja/orphaned/mdn/about/linking_to_mdn/index.html create mode 100644 files/ja/orphaned/mdn/community/conversations/index.html create mode 100644 files/ja/orphaned/mdn/community/doc_sprints/index.html create mode 100644 files/ja/orphaned/mdn/community/index.html create mode 100644 files/ja/orphaned/mdn/community/whats_happening/index.html create mode 100644 files/ja/orphaned/mdn/community/working_in_community/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html create mode 100644 files/ja/orphaned/mdn/contribute/onboarding/index.html create mode 100644 files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html create mode 100644 files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html create mode 100644 files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html create mode 100644 files/ja/orphaned/mdn/dashboards/editors/index.html create mode 100644 files/ja/orphaned/mdn/dashboards/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/attachments/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/page_controls/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/page_info/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/tags/index.html create mode 100644 files/ja/orphaned/mdn/editor/basics/toolbar/index.html create mode 100644 files/ja/orphaned/mdn/editor/images/index.html create mode 100644 files/ja/orphaned/mdn/editor/index.html create mode 100644 files/ja/orphaned/mdn/editor/keyboard_shortcuts/index.html create mode 100644 files/ja/orphaned/mdn/editor/links/index.html create mode 100644 files/ja/orphaned/mdn/editor/redirects/index.html create mode 100644 files/ja/orphaned/mdn/editor/source_mode/index.html create mode 100644 files/ja/orphaned/mdn/editor/syntax_highlighting/index.html create mode 100644 files/ja/orphaned/mdn/editor/tables/index.html create mode 100644 files/ja/orphaned/mdn/kuma/server_charts/index.html create mode 100644 files/ja/orphaned/mdn/structures/api_references/index.html create mode 100644 files/ja/orphaned/mdn/structures/api_references/what_does_an_api_reference_need/index.html create mode 100644 files/ja/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html create mode 100644 files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html create mode 100644 files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html create mode 100644 files/ja/orphaned/mdn/tools/feeds/index.html create mode 100644 files/ja/orphaned/mdn/tools/page_deletion/index.html create mode 100644 files/ja/orphaned/mdn/tools/page_moving/index.html create mode 100644 files/ja/orphaned/mdn/tools/page_regeneration/index.html create mode 100644 files/ja/orphaned/mdn/tools/page_watching/index.html create mode 100644 files/ja/orphaned/mdn/tools/put_api/index.html create mode 100644 files/ja/orphaned/mdn/tools/revision_dashboard/index.html create mode 100644 files/ja/orphaned/mdn/tools/template_editing/index.html create mode 100644 files/ja/orphaned/mdn/troubleshooting/index.html create mode 100644 files/ja/orphaned/microsummary_xml_grammar_reference/index.html create mode 100644 files/ja/orphaned/migrate_apps_from_internet_explorer_to_mozilla/index.html create mode 100644 files/ja/orphaned/monitoring_http_activity/index.html create mode 100644 files/ja/orphaned/monitoring_wifi_access_points/index.html create mode 100644 files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html create mode 100644 files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html create mode 100644 files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html create mode 100644 files/ja/orphaned/mozilla_modules_and_module_ownership/index.html create mode 100644 files/ja/orphaned/mozistorageservice/index.html create mode 100644 files/ja/orphaned/mozmill/index.html create mode 100644 files/ja/orphaned/my_chrome_oven/index.html create mode 100644 files/ja/orphaned/new_in_javascript_1.8/index.html create mode 100644 files/ja/orphaned/nsidomhtmlmediaelement/index.html create mode 100644 files/ja/orphaned/nsidynamiccontainer/index.html create mode 100644 files/ja/orphaned/participating_in_the_mozilla_project/index.html create mode 100644 files/ja/orphaned/reftest_opportunities_files/index.html create mode 100644 files/ja/orphaned/setting_up_extension_development_environment/index.html create mode 100644 files/ja/orphaned/the_importance_of_correct_html_commenting/index.html create mode 100644 files/ja/orphaned/toolkit_api/official_references/index.html create mode 100644 files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html create mode 100644 files/ja/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html create mode 100644 files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html create mode 100644 files/ja/orphaned/tools/add-ons/index.html create mode 100644 files/ja/orphaned/tools/css_coverage/index.html create mode 100644 files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html create mode 100644 files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html create mode 100644 files/ja/orphaned/tutorials/index.html create mode 100644 files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html create mode 100644 files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html create mode 100644 files/ja/orphaned/web/api/window/getattention/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html create mode 100644 files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html create mode 100644 files/ja/orphaned/web/css/@media/index/index.html create mode 100644 files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html create mode 100644 files/ja/orphaned/web/css/index/index.html create mode 100644 files/ja/orphaned/web/guide/ajax/other_resources/index.html create mode 100644 files/ja/orphaned/web/html/element/command/index.html create mode 100644 files/ja/orphaned/web/html/element/element/index.html create mode 100644 files/ja/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/ja/orphaned/web/html/html_extensions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/core_language_features/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/expressions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/predefined_functions/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/variables/index.html create mode 100644 files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/operators/special/index.html create mode 100644 files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html create mode 100644 files/ja/orphaned/web/manifest/serviceworker/index.html create mode 100644 files/ja/orphaned/web/security/information_security_basics/index.html create mode 100644 files/ja/orphaned/web/specification_list/index.html create mode 100644 files/ja/orphaned/web/web_components/status_in_firefox/index.html create mode 100644 files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html create mode 100644 files/ja/orphaned/working_with_windows_in_chrome_code/index.html create mode 100644 files/ja/orphaned/xpcom_components_list/index.html create mode 100644 files/ja/orphaned/xpcom_part_1/index.html create mode 100644 files/ja/orphaned/xpcom_part_2/index.html create mode 100644 files/ja/orphaned/xpcom_part_3/index.html create mode 100644 files/ja/orphaned/xpcom_part_4/index.html create mode 100644 files/ja/orphaned/xpcom_part_5/index.html create mode 100644 files/ja/orphaned/xpcom_plans/index.html delete mode 100644 files/ja/participating_in_the_mozilla_project/index.html create mode 100644 files/ja/plugins/guide/constants/index.html delete mode 100644 files/ja/reftest_opportunities_files/index.html delete mode 100644 files/ja/setting_up_extension_development_environment/index.html delete mode 100644 files/ja/svg_improvements_in_firefox_3/index.html delete mode 100644 files/ja/svg_in_firefox/index.html delete mode 100644 files/ja/the_add-on_bar/index.html delete mode 100644 files/ja/the_importance_of_correct_html_commenting/index.html delete mode 100644 files/ja/tips_for_authoring_fast-loading_html_pages/index.html delete mode 100644 files/ja/title/index.html delete mode 100644 files/ja/toolkit_api/official_references/index.html create mode 100644 files/ja/tools/3d_view/index.html delete mode 100644 files/ja/tools/add-ons/index.html delete mode 100644 files/ja/tools/css_coverage/index.html create mode 100644 files/ja/tools/debugger/break_on_dom_mutation/index.html delete mode 100644 files/ja/tools/debugger/how_to/black_box_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html delete mode 100644 files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html create mode 100644 files/ja/tools/debugger/how_to/ignore_a_source/index.html delete mode 100644 files/ja/tools/debugger/how_to/search_and_filter/index.html delete mode 100644 files/ja/tools/debugger/limitations_of_the_new_debugger/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/settings/index.html delete mode 100644 files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html delete mode 100644 files/ja/tools/memory/comparing_heap_snapshots/index.html delete mode 100644 files/ja/tools/page_inspector/3d_view/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/view_fonts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html delete mode 100644 files/ja/tools/page_inspector/html_panel/index.html delete mode 100644 files/ja/tools/page_inspector/style_panel/index.html delete mode 100644 files/ja/tools/performance/profiler_walkthrough/index.html delete mode 100644 files/ja/tools/profiler/index.html delete mode 100644 files/ja/tools/release_notes/index.html create mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html delete mode 100644 files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html delete mode 100644 files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html delete mode 100644 files/ja/tools/using_the_source_editor/index.html create mode 100644 files/ja/tools/view_source/index.html delete mode 100644 files/ja/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ja/tools/web_console/ui_tour/index.html delete mode 100644 files/ja/tutorials/index.html delete mode 100644 files/ja/updating_extensions_for_firefox_2/index.html delete mode 100644 files/ja/updating_extensions_for_firefox_3.1/index.html delete mode 100644 files/ja/updating_extensions_for_firefox_3/index.html delete mode 100644 files/ja/updating_web_applications_for_firefox_3/index.html delete mode 100644 files/ja/user_agent_strings_reference/index.html delete mode 100644 files/ja/using_firefox_1.5_caching/index.html delete mode 100644 files/ja/using_native_json/index.html delete mode 100644 files/ja/using_url_values_for_the_cursor_property/index.html delete mode 100644 files/ja/using_xpath/index.html delete mode 100644 files/ja/view_source/index.html delete mode 100644 files/ja/web/accessibility/accessibility_faq/index.html delete mode 100644 files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html delete mode 100644 files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html create mode 100644 files/ja/web/accessibility/aria/roles/button_role/index.html create mode 100644 files/ja/web/accessibility/aria/roles/checkbox_role/index.html create mode 100644 files/ja/web/accessibility/faq/index.html create mode 100644 files/ja/web/api/ambient_light_events/index.html delete mode 100644 files/ja/web/api/audiobuffersourcenode/onended/index.html delete mode 100644 files/ja/web/api/audiobuffersourcenode/stop/index.html delete mode 100644 files/ja/web/api/audiocontext/createanalyser/index.html delete mode 100644 files/ja/web/api/audiocontext/createbiquadfilter/index.html delete mode 100644 files/ja/web/api/audiocontext/createbuffer/index.html delete mode 100644 files/ja/web/api/audiocontext/createbuffersource/index.html delete mode 100644 files/ja/web/api/audiocontext/createchannelmerger/index.html delete mode 100644 files/ja/web/api/audiocontext/createchannelsplitter/index.html delete mode 100644 files/ja/web/api/audiocontext/createconvolver/index.html delete mode 100644 files/ja/web/api/audiocontext/createdelay/index.html delete mode 100644 files/ja/web/api/audiocontext/createdynamicscompressor/index.html delete mode 100644 files/ja/web/api/audiocontext/creategain/index.html delete mode 100644 files/ja/web/api/audiocontext/createoscillator/index.html delete mode 100644 files/ja/web/api/audiocontext/createpanner/index.html delete mode 100644 files/ja/web/api/audiocontext/createperiodicwave/index.html delete mode 100644 files/ja/web/api/audiocontext/createscriptprocessor/index.html delete mode 100644 files/ja/web/api/audiocontext/createstereopanner/index.html delete mode 100644 files/ja/web/api/audiocontext/currenttime/index.html delete mode 100644 files/ja/web/api/audiocontext/decodeaudiodata/index.html delete mode 100644 files/ja/web/api/audiocontext/destination/index.html delete mode 100644 files/ja/web/api/audiocontext/listener/index.html delete mode 100644 files/ja/web/api/audiocontext/mozaudiochanneltype/index.html delete mode 100644 files/ja/web/api/audiocontext/onstatechange/index.html delete mode 100644 files/ja/web/api/audiocontext/samplerate/index.html delete mode 100644 files/ja/web/api/audiocontext/state/index.html create mode 100644 files/ja/web/api/audioscheduledsourcenode/onended/index.html create mode 100644 files/ja/web/api/audioscheduledsourcenode/stop/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createanalyser/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createbuffer/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createbuffersource/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createchannelmerger/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createconvolver/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createdelay/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html create mode 100644 files/ja/web/api/baseaudiocontext/creategain/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createoscillator/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createpanner/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createperiodicwave/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html create mode 100644 files/ja/web/api/baseaudiocontext/createstereopanner/index.html create mode 100644 files/ja/web/api/baseaudiocontext/currenttime/index.html create mode 100644 files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html create mode 100644 files/ja/web/api/baseaudiocontext/destination/index.html create mode 100644 files/ja/web/api/baseaudiocontext/listener/index.html create mode 100644 files/ja/web/api/baseaudiocontext/onstatechange/index.html create mode 100644 files/ja/web/api/baseaudiocontext/samplerate/index.html create mode 100644 files/ja/web/api/baseaudiocontext/state/index.html delete mode 100644 files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 files/ja/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/ja/web/api/css_painting_api/guide/index.html delete mode 100644 "files/ja/web/api/css_painting_api/\343\202\254\343\202\244\343\203\211/index.html" delete mode 100644 files/ja/web/api/cssmatrix/index.html delete mode 100644 files/ja/web/api/deviceacceleration/index.html create mode 100644 files/ja/web/api/devicemotioneventacceleration/index.html delete mode 100644 files/ja/web/api/document/activeelement/index.html delete mode 100644 files/ja/web/api/document/async/index.html delete mode 100644 files/ja/web/api/document/elementfrompoint/index.html delete mode 100644 files/ja/web/api/document/getanimations/index.html delete mode 100644 files/ja/web/api/document/getselection/index.html delete mode 100644 files/ja/web/api/document/inputencoding/index.html delete mode 100644 files/ja/web/api/document/onselectionchange/index.html delete mode 100644 files/ja/web/api/document_object_model/preface/index.html create mode 100644 files/ja/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/ja/web/api/documentorshadowroot/elementfrompoint/index.html create mode 100644 files/ja/web/api/documentorshadowroot/getanimations/index.html delete mode 100644 files/ja/web/api/documentorshadowroot/nodefrompoint/index.html delete mode 100644 files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html create mode 100644 files/ja/web/api/dommatrix/index.html delete mode 100644 files/ja/web/api/element/accesskey/index.html delete mode 100644 files/ja/web/api/element/name/index.html delete mode 100644 files/ja/web/api/event/button/index.html delete mode 100644 files/ja/web/api/event/createevent/index.html create mode 100644 files/ja/web/api/gamepad_api/using_the_gamepad_api/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onreset/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onselectionchange/index.html create mode 100644 files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html create mode 100644 files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html create mode 100644 files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html create mode 100644 files/ja/web/api/htmlelement/accesskey/index.html create mode 100644 files/ja/web/api/installtrigger/index.html delete mode 100644 files/ja/web/api/mediarecorder_api/index.html delete mode 100644 files/ja/web/api/node/baseuriobject/index.html delete mode 100644 files/ja/web/api/node/nodeprincipal/index.html create mode 100644 files/ja/web/api/page_visibility_api/index.html create mode 100644 files/ja/web/api/proximity_events/index.html delete mode 100644 files/ja/web/api/randomsource/index.html delete mode 100644 files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html delete mode 100644 files/ja/web/api/slotable/index.html create mode 100644 files/ja/web/api/vibration_api/index.html delete mode 100644 files/ja/web/api/vrdevice/cancelanimationframe/index.html delete mode 100644 files/ja/web/api/vrdevice/capabilities/index.html delete mode 100644 files/ja/web/api/vrdevice/depthfar/index.html delete mode 100644 files/ja/web/api/vrdevice/depthnear/index.html delete mode 100644 files/ja/web/api/vrdevice/displayid/index.html delete mode 100644 files/ja/web/api/vrdevice/geteyeparameters/index.html delete mode 100644 files/ja/web/api/vrdevice/getimmediatepose/index.html delete mode 100644 files/ja/web/api/vrdevice/getlayers/index.html delete mode 100644 files/ja/web/api/vrdevice/getpose/index.html delete mode 100644 files/ja/web/api/vrdevice/index.html delete mode 100644 files/ja/web/api/vrdevice/isconnected/index.html delete mode 100644 files/ja/web/api/vrdevice/ispresenting/index.html delete mode 100644 files/ja/web/api/vrdevice/requestanimationframe/index.html delete mode 100644 files/ja/web/api/vrdevice/requestpresent/index.html delete mode 100644 files/ja/web/api/vrdevice/resetpose/index.html delete mode 100644 files/ja/web/api/vrdevice/stageparameters/index.html delete mode 100644 files/ja/web/api/vrdevice/submitframe/index.html create mode 100644 files/ja/web/api/vrdisplay/cancelanimationframe/index.html create mode 100644 files/ja/web/api/vrdisplay/capabilities/index.html create mode 100644 files/ja/web/api/vrdisplay/depthfar/index.html create mode 100644 files/ja/web/api/vrdisplay/depthnear/index.html create mode 100644 files/ja/web/api/vrdisplay/displayid/index.html create mode 100644 files/ja/web/api/vrdisplay/geteyeparameters/index.html create mode 100644 files/ja/web/api/vrdisplay/getimmediatepose/index.html create mode 100644 files/ja/web/api/vrdisplay/getlayers/index.html create mode 100644 files/ja/web/api/vrdisplay/getpose/index.html create mode 100644 files/ja/web/api/vrdisplay/index.html create mode 100644 files/ja/web/api/vrdisplay/isconnected/index.html create mode 100644 files/ja/web/api/vrdisplay/ispresenting/index.html create mode 100644 files/ja/web/api/vrdisplay/requestanimationframe/index.html create mode 100644 files/ja/web/api/vrdisplay/requestpresent/index.html create mode 100644 files/ja/web/api/vrdisplay/resetpose/index.html create mode 100644 files/ja/web/api/vrdisplay/stageparameters/index.html create mode 100644 files/ja/web/api/vrdisplay/submitframe/index.html delete mode 100644 files/ja/web/api/vrlayer/index.html delete mode 100644 files/ja/web/api/vrlayer/rightbounds/index.html delete mode 100644 files/ja/web/api/vrlayer/source/index.html create mode 100644 files/ja/web/api/vrlayerinit/index.html create mode 100644 files/ja/web/api/vrlayerinit/rightbounds/index.html create mode 100644 files/ja/web/api/vrlayerinit/source/index.html delete mode 100644 files/ja/web/api/webgl_api/cross-domain_textures/index.html delete mode 100644 files/ja/web/api/websockets_api/websockets_reference/index.html delete mode 100644 files/ja/web/api/window.opener/index.html delete mode 100644 files/ja/web/api/window.stop/index.html delete mode 100644 files/ja/web/api/window/arguments/index.html delete mode 100644 files/ja/web/api/window/escape/index.html delete mode 100644 files/ja/web/api/window/getattention/index.html delete mode 100644 files/ja/web/api/window/onafterprint/index.html create mode 100644 files/ja/web/api/window/onappinstalled/index.html delete mode 100644 files/ja/web/api/window/onclick/index.html delete mode 100644 files/ja/web/api/window/oninstall/index.html delete mode 100644 files/ja/web/api/window/onmousedown/index.html delete mode 100644 files/ja/web/api/window/onmouseup/index.html delete mode 100644 files/ja/web/api/window/onreset/index.html delete mode 100644 files/ja/web/api/window/onresize/index.html create mode 100644 files/ja/web/api/window/opener/index.html delete mode 100644 files/ja/web/api/window/restore/index.html create mode 100644 files/ja/web/api/window/stop/index.html delete mode 100644 files/ja/web/api/window/unescape/index.html delete mode 100644 files/ja/web/api/window/url/index.html delete mode 100644 files/ja/web/api/windowbase64/atob/index.html delete mode 100644 files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html delete mode 100644 files/ja/web/api/windowbase64/index.html create mode 100644 files/ja/web/api/windoweventhandlers/onafterprint/index.html create mode 100644 files/ja/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/ja/web/api/windoworworkerglobalscope/caches/index.html create mode 100644 files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html delete mode 100644 files/ja/web/api/windowtimers/clearinterval/index.html delete mode 100644 files/ja/web/api/windowtimers/index.html delete mode 100644 files/ja/web/api/workerglobalscope/caches/index.html create mode 100644 files/ja/web/api/xmldocument/async/index.html create mode 100644 files/ja/web/api/xmlserializer/index.html delete mode 100644 files/ja/web/compatibility_faq/broken_table_layout.html/index.html delete mode 100644 files/ja/web/compatibility_faq/cut_off_text.html/index.html delete mode 100644 files/ja/web/compatibility_faq/empty_background_color.html/index.html delete mode 100644 files/ja/web/compatibility_faq/index.html delete mode 100644 files/ja/web/compatibility_faq/invalid_icon_size.html/index.html delete mode 100644 files/ja/web/compatibility_faq/misaligned_icon.html/index.html delete mode 100644 files/ja/web/compatibility_faq/misaligned_text.html/index.html delete mode 100644 files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_background_shown.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_border_line_shown.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_icon_shown.html/index.html delete mode 100644 files/ja/web/compatibility_faq/no_wrap.html/index.html delete mode 100644 files/ja/web/compatibility_faq/overwrapped_icon.html/index.html delete mode 100644 files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html delete mode 100644 files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html delete mode 100644 files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html delete mode 100644 files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html delete mode 100644 files/ja/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/ja/web/css/-ms-high-contrast/index.html create mode 100644 files/ja/web/css/@media/-ms-high-contrast/index.html create mode 100644 files/ja/web/css/@media/aural/index.html delete mode 100644 files/ja/web/css/@media/index/index.html delete mode 100644 files/ja/web/css/@viewport/height/index.html delete mode 100644 files/ja/web/css/@viewport/max-height/index.html delete mode 100644 files/ja/web/css/@viewport/max-zoom/index.html delete mode 100644 files/ja/web/css/@viewport/min-zoom/index.html delete mode 100644 files/ja/web/css/@viewport/viewport-fit/index.html delete mode 100644 files/ja/web/css/@viewport/zoom/index.html delete mode 100644 files/ja/web/css/_colon_-moz-alt-text/index.html delete mode 100644 files/ja/web/css/_colon_-moz-placeholder/index.html delete mode 100644 files/ja/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/ja/web/css/_colon_autofill/index.html delete mode 100644 files/ja/web/css/aural/index.html delete mode 100644 files/ja/web/css/auto/index.html delete mode 100644 files/ja/web/css/common_css_questions/index.html delete mode 100644 files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html delete mode 100644 files/ja/web/css/css_flexible_box_layout/mixins/index.html delete mode 100644 files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html delete mode 100644 files/ja/web/css/index/index.html delete mode 100644 files/ja/web/css/media/index.html delete mode 100644 files/ja/web/css/media/visual/index.html delete mode 100644 files/ja/web/css/none/index.html delete mode 100644 files/ja/web/css/normal/index.html delete mode 100644 files/ja/web/css/other_resources/index.html delete mode 100644 files/ja/web/css/scaling_background_images/index.html delete mode 100644 files/ja/web/css/url/index.html delete mode 100644 files/ja/web/events/compositionstart/index.html delete mode 100644 files/ja/web/guide/ajax/other_resources/index.html delete mode 100644 files/ja/web/guide/api/gamepad/index.html delete mode 100644 files/ja/web/guide/api/vibration/index.html delete mode 100644 files/ja/web/guide/css/getting_started/boxes/index.html delete mode 100644 files/ja/web/guide/css/getting_started/color/index.html delete mode 100644 files/ja/web/guide/css/getting_started/javascript/index.html delete mode 100644 files/ja/web/guide/css/getting_started/layout/index.html delete mode 100644 files/ja/web/guide/css/getting_started/lists/index.html delete mode 100644 files/ja/web/guide/css/getting_started/tables/index.html delete mode 100644 files/ja/web/guide/css/media_queries/index.html delete mode 100644 files/ja/web/guide/dom/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/finale/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/transformations/index.html delete mode 100644 files/ja/web/guide/html/canvas_tutorial/using_images/index.html delete mode 100644 files/ja/web/guide/html/event_attributes/index.html delete mode 100644 files/ja/web/guide/html/html5/html5_element_list/index.html delete mode 100644 files/ja/web/guide/html/obsolete_things_to_avoid/index.html delete mode 100644 files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html delete mode 100644 files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html delete mode 100644 files/ja/web/guide/using_formdata_objects/index.html create mode 100644 files/ja/web/guide/writing_forward-compatible_websites/index.html delete mode 100644 files/ja/web/html/element/command/index.html delete mode 100644 files/ja/web/html/element/element/index.html delete mode 100644 files/ja/web/html/forms_in_html/index.html delete mode 100644 files/ja/web/html/global_attributes/dropzone/index.html delete mode 100644 files/ja/web/html/html_extensions/index.html delete mode 100644 files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html create mode 100644 files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html create mode 100644 files/ja/web/http/public_key_pinning/index.html delete mode 100644 files/ja/web/javascript/getting_started/index.html delete mode 100644 files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html delete mode 100644 files/ja/web/javascript/guide/core_language_features/index.html delete mode 100644 files/ja/web/javascript/guide/creating_a_regular_expression/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html delete mode 100644 files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html delete mode 100644 files/ja/web/javascript/guide/expressions/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/break_statement/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/continue_statement/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/for_statement/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/label_statement/index.html delete mode 100644 files/ja/web/javascript/guide/loop_statements/while_statement/index.html delete mode 100644 files/ja/web/javascript/guide/object_manipulation_statements/index.html delete mode 100644 files/ja/web/javascript/guide/objects_and_properties/index.html delete mode 100644 files/ja/web/javascript/guide/obsolete_pages/index.html delete mode 100644 files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html delete mode 100644 files/ja/web/javascript/guide/operators/arithmetic_operators/index.html delete mode 100644 files/ja/web/javascript/guide/operators/assignment_operators/index.html delete mode 100644 files/ja/web/javascript/guide/operators/comparison_operators/index.html delete mode 100644 files/ja/web/javascript/guide/operators/logical_operators/index.html delete mode 100644 files/ja/web/javascript/guide/operators/special_operators/index.html delete mode 100644 files/ja/web/javascript/guide/operators/string_operators/index.html delete mode 100644 files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html delete mode 100644 files/ja/web/javascript/guide/predefined_functions/eval_function/index.html delete mode 100644 files/ja/web/javascript/guide/predefined_functions/index.html delete mode 100644 files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html delete mode 100644 files/ja/web/javascript/guide/the_employee_example/index.html delete mode 100644 files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html delete mode 100644 files/ja/web/javascript/guide/the_employee_example/object_properties/index.html delete mode 100644 files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html delete mode 100644 files/ja/web/javascript/guide/using_the_arguments_object/index.html delete mode 100644 files/ja/web/javascript/guide/variables/index.html delete mode 100644 files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html delete mode 100644 files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html delete mode 100644 files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/array/index/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/array/input/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/array/prototype/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/ja/web/javascript/reference/global_objects/atomics/notify/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/atomics/wake/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html delete mode 100644 files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html delete mode 100644 files/ja/web/javascript/reference/operators/comparison_operators/index.html delete mode 100644 files/ja/web/javascript/reference/operators/logical_operators/index.html delete mode 100644 files/ja/web/javascript/reference/operators/special/index.html delete mode 100644 files/ja/web/javascript/reference/operators/special_operators/index.html delete mode 100644 files/ja/web/javascript/reference/reserved_words/index.html delete mode 100644 files/ja/web/javascript/reference/statements/yield/index.html delete mode 100644 files/ja/web/manifest/serviceworker/index.html create mode 100644 files/ja/web/opensearch/index.html delete mode 100644 files/ja/web/progressive_web_apps/advantages/index.html delete mode 100644 files/ja/web/security/information_security_basics/index.html delete mode 100644 files/ja/web/security/public_key_pinning/index.html delete mode 100644 files/ja/web/specification_list/index.html create mode 100644 files/ja/web/svg/svg_1.1_support_in_firefox/index.html delete mode 100644 files/ja/web/web_components/status_in_firefox/index.html create mode 100644 files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ja/web_content_accessibility_guidelines_1.0/index.html delete mode 100644 files/ja/web_development/index.html delete mode 100644 files/ja/web_development/introduction_to_web_development/index.html delete mode 100644 files/ja/web_development/mobile/index.html delete mode 100644 files/ja/web_development/mobile/responsive_design/index.html delete mode 100644 files/ja/web_development/writing_forward-compatible_websites/index.html delete mode 100644 files/ja/webapi/index.html delete mode 100644 files/ja/webapi/proximity/index.html delete mode 100644 files/ja/webapi/using_light_events/index.html delete mode 100644 files/ja/width/index.html delete mode 100644 files/ja/xmlserializer/index.html delete mode 100644 files/ja/xpcom_components_list/index.html delete mode 100644 files/ja/xpcom_part_1/index.html delete mode 100644 files/ja/xpcom_part_2/index.html delete mode 100644 files/ja/xpcom_part_3/index.html delete mode 100644 files/ja/xpcom_part_4/index.html delete mode 100644 files/ja/xpcom_part_5/index.html delete mode 100644 files/ja/xpcom_plans/index.html delete mode 100644 files/ja/xpinstall_api_reference/installtrigger_object/index.html delete mode 100644 files/ja/xsltprocessor/index.html (limited to 'files/ja') diff --git a/files/ja/about/index.html b/files/ja/about/index.html deleted file mode 100644 index 3de59876a7..0000000000 --- a/files/ja/about/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: About -slug: About ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/adapting_xul_applications_for_firefox_1.5/index.html b/files/ja/adapting_xul_applications_for_firefox_1.5/index.html deleted file mode 100644 index 7106e1df16..0000000000 --- a/files/ja/adapting_xul_applications_for_firefox_1.5/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Firefox 1.5 に XUL アプリケーションを対応させる -slug: Adapting_XUL_Applications_for_Firefox_1.5 -tags: - - Add-ons - - Extensions - - XUL -translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 ---- -

 

- -

このページでは、Firefox 1.5 の変更点のうち、XUL アプリケーション開発者に影響するものについて、リストで示します。

- -

仕様の変更

- - - -

その他の情報

- - diff --git a/files/ja/adding_feed_readers_to_firefox/index.html b/files/ja/adding_feed_readers_to_firefox/index.html deleted file mode 100644 index 8139208689..0000000000 --- a/files/ja/adding_feed_readers_to_firefox/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Firefox へのフィードリーダーの追加 -slug: Adding_feed_readers_to_Firefox -tags: - - Configuration management -translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox ---- -
- {{ Fx_minversion_header(2) }}
-

Firefox 2 より、Firefox はフィードを読む際に使う RSS または Atom フィードリーダを選択できるようになっています。この記事ではデフォルトではサポートされていないリーダを追加サポートさせる方法について説明します。

-

新しいウェブベースのフィードリーダの追加

-

新しいウェブベースのフィードリーダを追加サポートさせるためにやらなければならないことは、3 つの新しい設定項目を追加することだけです。

-
-
- browser.contentHandlers.types.number.title
-
- フィードリーダの名前。
-
- browser.contentHandlers.types.number.type
-
- フィードリーダに使用するため、ここは "application/vnd.mozilla.maybe.feed" にする。
-
- browser.contentHandlers.types.number.uri
-
- フィードリーダの URI。フィードの URL が挿入されるべき部分に "%s" を使用する。
-
-

number は既に使われている数のうち最大のものよりもより 1 つ大きな数で置き換えてください。例えば "Easy Reader" という新しいフィードリーダを追加したい場合、かつ 0 から 4 までの数が指定されたコンテンツハンドラが既に定義されている場合、このように number には 5 を使用してください。

- -

about:config を使うことでこれらの設定項目を手動で追加できます。拡張機能で新しいフィードリーダをインストールしたいのであれば、プログラム側で行うこともできます。

-

ウェブアプリケーションからのフィードリーダの追加

-

ウェブ上の JavaScript コードから簡単にフィードリーダを追加することができます。このためには、このような {{domxref("navigator.registerContentHandler()")}} 関数を使用します。

-
navigator.registerContentHandler(
-    "application/vnd.mozilla.maybe.feed",
-    "http://www.theeasyreaderurl.com?feed=%s",
-    "Easy Reader"
-);
-

新しいフィードリーダアプリケーションの追加

-

これを最も簡単に行う方法というのは、単に設定（あるいは オプション、ご使用のプラットフォームによります）ウィンドウの フィード パネルという既存のユーザインタフェースを使用することです。

-
- 注意: Firefox 8 よりフィードパネルは無くなっています。フィードリーダーの開発者が、Web フィードの処理の為のオプションをご自分で追加する場合、上記の同様の JavaScript コードを実装することをお勧めします。
-

これも拡張機能からプログラムで行うこともできます。フィードリーダに使うアプリケーションのパス名を browser.feeds.handlers.application オプションの値に設定することで可能です。

-

関連情報

- diff --git a/files/ja/adding_search_engines_from_web_pages/index.html b/files/ja/adding_search_engines_from_web_pages/index.html deleted file mode 100644 index f7c679aae4..0000000000 --- a/files/ja/adding_search_engines_from_web_pages/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -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/addons.mozilla.org_(amo)_api_developers'_guide/index.html b/files/ja/addons.mozilla.org_(amo)_api_developers'_guide/index.html deleted file mode 100644 index cd89ae4cae..0000000000 --- a/files/ja/addons.mozilla.org_(amo)_api_developers'_guide/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: addons.mozilla.org (AMO) API Developers' Guide -slug: addons.mozilla.org_(AMO)_API_Developers'_Guide -tags: - - AMO - - AMO API - - Add-ons ---- -

AMO APIは、あなたのウェブまたは他のアプリケーションのためのインターフェースをAMOに提供します。APIはRESTをサポートし、レスポンスはXMLフォーマットで返されます。

-

現在、2つのコンポーネントがAPIにあります:

- - -

The generic AMO API

-

これはFirefoxアドオンマネージャーにより用いられるAPI呼び出しのセットです。現在これは読み取り専用です。 一つ或いは複数のアドオングループについてデータを検索するか、アドオンを探すことが出来ます。このAPIは利用のために認証またはAPIキーを必要としません。

- - -

The Bandwagon API

-

バンドワゴンAPI はアドオンコレクションとの相互作用を可能にします。これは読込み/書込みAPIです。既存のAMOアカウントを使った認証を必要とします。

-
-
- - -

利用規約

-

ここで利用規約 を読んでください。

diff --git a/files/ja/ant_script_to_assemble_an_extension/index.html b/files/ja/ant_script_to_assemble_an_extension/index.html deleted file mode 100644 index 3c9a0fca59..0000000000 --- a/files/ja/ant_script_to_assemble_an_extension/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: ant script to assemble an extension -slug: ant_script_to_assemble_an_extension -tags: - - Extensions - - 'Extensions:Tools' - - Tools ---- -

この ant スクリプトは拡張機能のパッケージ化に役立ちます。 -

-
<?xml version="1.0"?>
-This build file was written by Régis Décamps <decamps@users.sf.net>
-
-<project name="blogmark" default="createxpi">
-       <property name="VERSION" value="1.3-rc1"/>
-       <property name="DESCRIPTION" value="New context-menu item to add
-                                           the current page in your Blogmarks"/>
-       XPI file is created after "chrome/blogmark.jar"               is created, which is then stuffed into "blogmark.xpi"
-       <target name="createxpi" depends="createjar"
-               description="Assemble the final build blogmark.xpi">
-               <zip destfile="blogmark-${VERSION}.xpi">
-                        <zipfileset dir="." includes="chrome/blogmark.jar" />
-                        <zipfileset dir="." includes="install.rdf" />
-                </zip>
-        </target>
-
-       Everything inside the chrome directory is zipped into chrome/blogmark.jar
-       <target name="createjar" depends="templates" description="Assemble the jar">
-                <jar destfile="chrome/blogmark.jar">
-                       <fileset dir="chrome/">
-                               <include name="**/*"/>
-                               <exclude name="**/*~"/>
-                               <exclude name="**/*.tpl.*"/>
-                               <exclude name="blogmark.jar"/>
-                       </fileset>
-                </jar>
-        </target>
-
-       <target name="templates" description="Generate files from templates.">
-               <copy file="chrome/content/blogmark/contents.rdf.tpl.xml"
-                     tofile="chrome/content/blogmark/contents.rdf"
-                     overwrite="true">
-                       <filterchain>
-                               <replacetokens>
-                                       <token key="VERSION" value="${VERSION}"/>
-                                       <token key="DESCRIPTION" value="${DESCRIPTION}"/>
-                               </replacetokens>
-                       </filterchain>
-               </copy>
-               <copy file="chrome/content/blogmark/about.xul.tpl.xml"
-                       tofile="chrome/content/blogmark/about.xul"
-                       overwrite="true">
-                       <filterchain>
-                               <replacetokens>
-                                       <token key="VERSION" value="${VERSION}"/>
-                               </replacetokens>
-                       </filterchain>
-               </copy>
-               <copy file="install.rdf.tpl.xml"
-                       tofile="install.rdf"
-                       overwrite="true">
-                       <filterchain>
-                               <replacetokens>
-                                       <token key="VERSION" value="${VERSION}"/>
-                                       <token key="DESCRIPTION" value="${DESCRIPTION}"/>
-                               </replacetokens>
-                       </filterchain>
-               </copy>
-       </target>
-</project>
-
-
-
-{{ languages( { "en": "en/Ant_script_to_assemble_an_extension" } ) }} diff --git a/files/ja/aria/accessible_rich_internet_applications/index.html b/files/ja/aria/accessible_rich_internet_applications/index.html deleted file mode 100644 index df17bbcfbb..0000000000 --- a/files/ja/aria/accessible_rich_internet_applications/index.html +++ /dev/null @@ -1,1063 +0,0 @@ ---- -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/bugzilla-ja/2.20-ja/index.html b/files/ja/bugzilla-ja/2.20-ja/index.html deleted file mode 100644 index f2375fd43a..0000000000 --- a/files/ja/bugzilla-ja/2.20-ja/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 2.20-ja -slug: Bugzilla-ja/2.20-ja ---- -

配布

-

2.20.1-ja の修正版 (Bugzilla-ja 2.20.1-ja-04 以降) については、 -svn にて提供しております。 -

-
svn co http://svn.mozilla.gr.jp/bugzilla/2.20/code/trunk/
-
-

などのコマンドにて取得してください。 -

2.20.1-ja までは、すべての修正項目を含む一つのパッチの形で、FTP サイト にて提供していました。 -配付ファイル (全てを含む一つのパッチファイル) へのリンク (上のほうが新しいです) は以下のとおり。 -

-
  1. 2.20.1-ja -03 (2.20-ja へのパッチ) -
  2. 2.20.1-ja -03 -
  3. 2.20-ja -03 -
  4. 2.20-ja -02 -
  5. 2.20-ja -01 -
-

将来的には、各修正項目ごとのパッチを提供する予定です。(予定で終わりました。) -また、それらを本家 Bugzilla.org へ提出することで、 -Bugzilla の国際化に貢献することも目標としています。 -

-

リリースバージョン

-

Bugzilla-ja での修正項目・機能追加については、Bugzilla-ja 修正項目リスト (準備中) をご覧ください。なお、公開されている svn 管理移行時 -以降については、以下のリストをご参照ください。 -

-
  1. rev. 54 : code tag rel2.20.4-ja -
  2. rev. 53 : template tag rel2.20.4-ja -
  3. rev. 47 : template tag rel2.20.3-ja -
  4. rev. 46 : code tag rel2.20.3-ja -
  5. rev. 45 : fix Bugzilla-jp 5544 -
  6. rev. 44 : fix Bugzilla-jp 5502 -
  7. rev. 43 : fix Bugzilla-jp 5536 -
  8. rev. 37 : fix Bugzilla-jp 5354 (Bugzilla-ja 2.20.1-ja final) -
  9. rev. 29 : fix Bugzilla-jp 5346 -
  10. rev. 23 : fix Bugzilla-jp 5327 -
-


-

-

作業記録

-

Bugzilla のリビジョン (2.20.1 など) ごとに Bugzilla-jp -にメタバグを立てています。そちらを妨害しているバグをご覧ください。 -

-
  1. Bugzilla-ja 2.20.3-ja (Bug# 5501) -
  2. ">Bugzilla-ja 2.20.1-ja (Bug# 5195) -
  3. ">Bugzilla-ja 2.20-ja (Bug# 4893) -
-

連絡先

-

Bugzilla-ja のバグについては、Bugzilla-jp まで報告してください。 -Bugzilla-ja についてのお問い合わせは、Bugzilla-ja プロジェクト -までお願いいたします。 -

diff --git a/files/ja/bugzilla-ja/3.0-ja/index.html b/files/ja/bugzilla-ja/3.0-ja/index.html deleted file mode 100644 index bf979af99e..0000000000 --- a/files/ja/bugzilla-ja/3.0-ja/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 3.0-ja -slug: Bugzilla-ja/3.0-ja ---- -

About trunk

- -

Bugzilla-jp は基本的に Bugzilla-ja 3.0 trunk を利用しています。 ただし、時々コミット後に重大なバグが発見されることがあります。

- -

現在の最新版は、Bugzilla-ja 3.0.3-ja.7 です。

- -

常用可能かもしれない revision (trunk)

- -

Bugzilla-jp で実運用されている (and/or されたことがある) revision のリストです。

- -
r 185
- -

Bugzilla-ja 3.0.3-ja.7 リリース候補

- -
r 170
- -

trunk r 166 で発生した 5855 が修正されています。

- -
r 149
- -

Bugzilla 3.0.1 相当のセキュリティーパッチが当たったバージョン。 {{ Bug(386942) }} (5806) が r108、{{ Bug(386860) }} が r148、{{ Bug(382056) }} が r149 で修正されています。

- -

tag リリース一覧

- -

3.0-ja.1

- -

3.0-ja.2

- -

3.0-ja.3

- -

3.0-ja.4

- -

3.0-ja.5

- -

クリティカルなバグ 5855 があります。3.0-ja.6 を利用してください。

- -

3.0-ja.6

- -

現在の最新版です。(2007/09/05)

- -

3.0.3-ja.7

- -

Bugzilla 3.0.3 にあわせてリリースしたバージョン。

- - - -

パラメータで、utf8関係のものは'on'にしなければ、multibyte UTF8 (日本語を含む) 環境では動作は保証されません。

- -

なお、MySQL環境についてのみ試験が行われています。PostgreSQLに関して、DB ドライバに依存する部分にバグがあるかもしれません。

- -

branch 一覧

- -

3.1.1 (abolished)

- -

Bugzilla.org tag BUGZILLA-3_0rc1 以降に出たパッチのうち、3.0 に適用可能なものを適用、試験を行うためのブランチ。

diff --git a/files/ja/bugzilla-ja/index.html b/files/ja/bugzilla-ja/index.html deleted file mode 100644 index 512cc4f06a..0000000000 --- a/files/ja/bugzilla-ja/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Bugzilla-ja -slug: Bugzilla-ja ---- -

Bugzilla-ja とは

- -

Bugzilla-ja は、Bugzilla を日本語環境で利用できるように i18n (国際化) 対応および日本語化するプロジェクトです。ユーザグループの立ち上げと公式サイトの構築中です。l10n -ja の作業に興味のある方は、Bugzilla-ja l10n のドキュメントを参照してください。

- -

Bugzilla-ja は、3.0.3 (or 3.1+)以降、日本語環境(もしくはCJK)のみで必要な独自パッチ以外については、Bugzilla 本家に その成果をマージする方向で活動しています。 詳細に関しては、bmo の Bugzilla プロダクトの各国際化に関するバグ、 もしくは Bugzilla Localization Working Group を参照してください。

- -

Bugzilla Users Group in Japan ( bug-ja.org) を立ち上げ中です。ご興味がおありの方はbugzilla@jpmozまでご連絡ください。なお、プロジェクトの作業メモは公開されております。Bugzilla-ja に関するアナウンスについてはプロジェクトマネージャーのblogなどを参照してください。

- -

We are now planning to build a new community named Bugzilla Users Group in Japan (bug-ja.org). And refer the project manager's blog for newer announces.

- -

バグ報告・日本語での議論

- -

日本語でのバグ報告は、bugzilla@jpmozのbug-jaプロダクトで行えます。主に、日本語にも影響する国際化に関する問題がターゲットですが、それ以外の一般的なバグの報告も受け付けています。bmoにすでに登録されているものはそれに紐付け、それ以外については問題を特定してからbmoへ持っていきます。(すべてのパッチはbmoでのレビューが必要です。bugzilla@jpmozでは、機能要望については受け付けますが対象としません。)

- -

日本語での議論・サポートに関しては、IRCが利用可能です。反応がいつもすぐに返るとは限りませんのでご注意ください。

- -

Bugzilla とは

- -

Bugzilla とは、「問題追跡システム」または「バグ追跡システム」と呼ばれるもので、開発者が個人やグループで、製品に存在する問題を洗い出して追跡し、 効果的な解決の手助けをするシステムです。商用のバグ追跡システムもありますが、Mozilla プロジェクトではオープンソースソフトウェアとして、 誰もが自由に利用できるようにしています。Bugzilla の評価は非常に高く、多くの企業・団体 で採用されています。2008年11月には、NASAのスペースシャトル計画 (および将来的な宇宙機開発プロジェクト) の問題追跡システムにも採用されました。(*1 *2)

- -

Bugzilla-ja for trunk

- -

Bugzilla trunk向けのレポジトリが利用できます。なお、このテンプレートパックは定期的にしか更新されていませんので、最新のBugzilla trunkとあわせて動作する保障はありません。

- -

最新の開発版は3.5.1です。

- -

Bugzilla-ja 3.4 branch

- -

Bugzilla 3.4の日本語化パックは、bug-ja.orgで配布されており、レポジトリも利用可能です。現在の最新版は3.4.3です。

- -

Bugzilla-ja 3.2 branch

- -

Bugzilla 3.2の日本語化パックは、bug-ja.orgで配布されており、レポジトリも利用可能です。現在の最新版は3.2.5です。なお、3.2をご利用の方は、3.4へのアップグレードを早急にご検討ください。まもなく日本語版のサポートは終了します。

- -

サポート終了済みの過去のバージョン

- -

Bugzilla-ja 3.0

- -

詳細については、3.0-ja を参照してください。なお、3.0ブランチはすでに更新停止しております。bmoにある最近のパッチがそのまま適用可能であろうことはチェックしていますが、レポジトリへの展開や確認はされておりません。

- -

Bugzilla-ja に含まれる日本語テンプレートは、Bugzilla 3.0 向けではありますが、bugzilla.org 配布の Bugzilla 3.0 とともに利用することは推奨しません。

- -

We strongly recommand not to use our Bugzilla-ja 3.0 template pack with bugzilla.org's 3.0. Such site will NEVER work properly.

- -

Bugzilla-ja 2.20

- -

注 : Bugzilla-ja 2.20シリーズはすでにサポートされていません。bugzilla.orgでの2.20シリーズのサポートは、Bugzilla 3.2リリース(2008/07予定)までです。

- -

目的

- -

データベースの文字コードが UTF-8 となった Bugzilla 2.20 について、 マルチバイト UTF-8 など i18n (国際化) で必要なパッチを提供します。 そのうえで日本語環境で必要な送信されるメールの文字コードについてなど の問題を解決し、日本語環境でも問題なく今までと同様に利用できるようにした Bugzilla (Bugzilla-ja) を提供するプロジェクトです。

- -

なお、過去の Bugzilla-ja 2.16-ja からのアップグレードを行うためのスクリプト・手順 も提供します。

- -

詳細は、2.20-ja を参照してください。

- -

 

- -

Bugzilla-ja 2.16

- -
注：Bugzilla 2.16 の利用は推奨されていません。新規利用の方は、最新版の利用を検討してください。
- -

目的

- -

Bugzilla (-2.16) を日本語化し、利用、配布可能にすることを目的としていました。

- -

配布

- -

もじら組 FTP サイト にあります。

- -

作業記録と担当者

- -

Bugzilla-jp 2228, 2796 等のコメントをご覧ください。

- -
    -
  1. Ryuzi Kambe
    2. -
  2. おこめ (ドキュメント和訳)
    3. -
  3. Itou Hiroki
    4. -
  4. 他
    5. -
diff --git a/files/ja/bugzilla-ja/l10n/index.html b/files/ja/bugzilla-ja/l10n/index.html deleted file mode 100644 index 3360cb2817..0000000000 --- a/files/ja/bugzilla-ja/l10n/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: 日本語パック -slug: Bugzilla-ja/l10n ---- -

参加するには

-

参加するには 2 通りの方法があります。 一つ目は、公開されるレポジトリに対してのコミット権限も持つ方法で、興味のある方はbugzilla@jpmozまでバグとして登録してください。 二つ目は、試験サイトや公開レポジトリを参照し、翻訳に問題があると思われる部分を指摘するという方法です。 こちらでは、特にアカウント登録などの必要はありません。(詳細は、下の問題の指摘方法をご覧ください。)

-

一つ目の方法での参加を希望の方は、希望するアカウント名、メーリングリスト登録用メールアドレスをつけてbugzilla@jpmozにバグを登録してください。アカウントなどの情報をお送りします。 

-

メーリングリスト

-

メーリングリストは準備中です。

-

レポジトリ

-

専用の Subversion レポジトリを用意しています。公開レポジトリ (仮URL)と、それに対してのコミットが可能になる SSL 経由でのレポジトリが用意されています。 コミットのたびに、試験サイトの中身が自動的に更新されます。また、この更新履歴はメーリングリストに流れます。

-

試験用サイト

-

試験用サイトは準備中です。

-

問題の指摘方法

-

テンプレートに関する問題の指摘は、bugzilla@jpmoz までバグとして登録してください。 問題が再現できる url もしくはテンプレートファイル名をつけてお願いします。(パッチを書ける方は、できればレポジトリへのアクセス権限を取得して自分でコミットしていただければ助かります。)

diff --git a/files/ja/bugzilla-jp/guide/about/accountcreation/index.html b/files/ja/bugzilla-jp/guide/about/accountcreation/index.html deleted file mode 100644 index 2fc84cf909..0000000000 --- a/files/ja/bugzilla-jp/guide/about/accountcreation/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: AccountCreation -slug: Bugzilla-jp/Guide/About/AccountCreation ---- -

アカウントを作成する

-

Bugzilla-jpを利用するにはアカウントを作成する必要があります。バグを参照する場合のみ、アカウントは必要ありませんが、バグを追跡したり、発言したりするためにはアカウントが必ず必要です。

-

アカウントを取得するのに必要なのは有効なメールアドレスのみです。ただし、Bugzilla上ではアカウントの表示に際して、メールアドレスも露出することになるので、そのメールアドレスにはほぼ確実にスパムメールが来ることになります。現在、常用されているメールアドレスよりもBugzillaアカウント用のメールアドレスを用意することを推奨します。

-

アカウントを作成するには以下のURIにアクセスします。(Bugzilla-jpのトップページから、「新規アカウント」でも同じです。)

-

http://bugzilla.mozilla.gr.jp/createaccount.cgi

-

ここで、次のようなフォームが表示されます。

-

アカウント作成フォームのスクリーンショット

-

まず、Bugzilla-jpのアカウントとして利用するメールアドレスを入力してください。次に、メールの文字コードも指定できますが、ここは空白のままにしてください。

-

メモ: Yahoo!メールのようにUTF-8に対応していないWebメールやメールクライアント(MUA)を利用されている場合はiso-2022-jpも利用可能です。ただし、Bugzilla-jpではUTF-8で利用可能な文字全てが入力可能ですので、ISO-2022-JPでは全てのメッセージを読むことはできませんので、Bugzilla-jpの利用においてUTF-8を利用できないメール環境の利用は推奨されません。

-

すると、次のようなメールが送信されます。

-

アカウント作成の確認メール

-

ここで、そのままアカウントの作成を続ける時は一つ目のURLをブラウザで開いてください。すると、次のようなフォームが表示されます。

-

アカウント作成の確認フォームのスクリーンショット

-

実名はオプションなので入力しなくてもかまいませんが、設定されることをお勧めします。実名が未設定の場合、メールアドレスが実名の代わりに表示されます。また、他の人があなたの名前を記述する場合に、メールアドレスが直に書かれることになります。これはスパムメールをより呼び込みやすくなってしまうことに注意してください。

-

多くの人がBugzilla-jp上では本名で活動していますが、実名は必ずしも本名である必要はありません。既にインターネット上でよく利用しているハンドルネームがあるなら、それを利用するのも良いでしょう。

-

「パスワード」と「パスワード再入力」では、あなたのアカウントでログインする時に使うパスワードを設定します。なりすましを避けるためにもある程度複雑なものを使用してください。

-

「送信メール文字コード」は、あなたのメールアドレスに送信されるメールの文字コードを指定します。ここは最初のフォームと同じく空白のままでかまいません。

-

必要な項目を入力し、「登録」ボタンを押すと作業完了です。

-

なお、これ以降、Bugzilla-jpを利用する際にはCookieは有効にしておいてください。BugzillaではCookieによってセッション管理を行っていますので、Cookie無しではログインできません。

diff --git a/files/ja/bugzilla-jp/guide/about/bugdetails/index.html b/files/ja/bugzilla-jp/guide/about/bugdetails/index.html deleted file mode 100644 index d7be725063..0000000000 --- a/files/ja/bugzilla-jp/guide/about/bugdetails/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: BugDetails -slug: Bugzilla-jp/Guide/About/BugDetails ---- -

バグの詳細情報

-

Bugzillaのバグはフォーラムで言う一つのスレッドを一つのバグとして管理しています。各バグにはそのバグを端的に表す情報部分と、一度書き込むと修正できないコメント部分があります。情報部分はコメント部分に書き込まれた内容に基づいて、必要なら修正されます。

-

Bug #

-

バグを一意に表現するための番号、バグのIDです。 登録されたときに採番され、変更されることはありません。

-

プロダクト、コンポーネント

-

バグがどの製品の、どの部分のバグなのかを示す情報です。 詳細は、プロダクトとコンポーネントを参照してください。

-

ステータス、処理方法

-

バグの状態や、解決済みのバグであれば、その処理方法を示します。 この状態や処理方法の意味はプロダクトごとに違いがあります。 詳細は、バグのライフサイクル以下のプロダクトごとのドキュメントを参照してください。

-

担当者

-

そのバグの担当者のアカウントを示します。担当者は実際にバグの修正に関与している場合もありますし、単にそのバグの動向を追跡しているだけの場合もあります。また、プロダクトによって担当者の役割が異なることがあります。詳細はバグのライフサイクル以下のプロダクトごとのドキュメントを参照してください。また、それをふまえて、各バグのコメントも参照してください。

-

QAコンタクト

-

QAコンタクトは直訳すると品質管理担当者を意味します。この項目は一般の利用者は特に気にする必要はありません。Bugzilla-jpでは一部のコンポーネントを除き、原則としてデフォルトの担当者は存在しません。その代わりに、各コンポーネントをデフォルトのQAコンタクトが統括管理しています。

-

URL

-

そのバグが再現する実在のサイトやテストケースへのURLです。決して報告者の運営するWebサイトを宣伝するためのものではありません。

-

要約

-

そのバグの症状や原因、条件を端的に示す、そのバグにつけられた要約です。

-

Bugzilla-jpではコンポーネントが細分化されていないため、特定の部位のバグを要約内で、{{ mediawiki.external('と') }}を使って明示していることがあります。よくあるものでは、{{ mediawiki.external('Cairo') }}や{{ mediawiki.external('CSS3') }}等があります。また、特定のプラットフォームでのみ発生するバグを明記するために、{{ mediawiki.external('Win') }}、{{ mediawiki.external('Mac') }}といった使い方もされています。

-

ホワイトボード

-

スタッフがバグの進捗を示すためにメモ書きとして使うためのフィールドです。一般的に、関連づけしたBugzilla-orgのバグIDを記述したり、そのバグの状態(FIXED等)を記述したりします。

-

キーワード

-

この項目にはあらかじめ登録されているキーワードをカンマ区切りで記述しています。キーワードの一覧と、各キーワードの説明は、Bugzilla-jpのキーワードの説明を参照してください。

-

プラットフォーム

-

バグが発生するプラットフォーム(ハードウェア)を示します。

-
All
-

全てのプラットフォームで発生するバグです。

-
Macintosh
-

Apple社のMacintoshで発生するバグです。Intel MacはMacintoshではなくPCになります。

-
PC
-

一般的なIntel系CPUを搭載したPCか、もしくはIntel Macで発生するバグです。

-
Sun
-

Sun Microsystems社のワークステーションで発生するバグです。

-
Other
-

上記に無いプラットフォームで発生するバグである場合、これが選択されますが、大抵の場合はWebサイトの問題等、分類不可能なバグの場合に利用されています。

-

OS

-

バグが発生するOSを示します。

-
All
-

全てのOSで発生するバグです。(実質的には、二つ以上のOSで発生する場合にAllとされます。)

-
Windows 95、Windows 98、Windows ME、Windows 2000、Windows NT、Windows XP、Windows Vista
-

Windowsで発生するバグです。一般的に、Windowsのバージョンに関係なく発生することが多いので最初にバグが確認されたWindowsのバージョンが選択されていることを示します。

-
Mac System 7、Mac System 7.5、Mac System 7.6.1、Mac System 8.0、Mac System 8.5、Mac System 8.6、Mac System 9.0
-

旧Mac OSで発生するバグです。現在は新規には取り扱っていません。

-
Mac OS X Server、Mac OS X
-

Mac OS Xで発生するバグです。

-
Linux
-

Linuxで発生するバグです。ディストリビューション等はコメント本文を確認する必要があります。

-
FreeBSD、Solaris
-

各UNIX互換OSで発生するバグです。

-
OS/2
-

OS/2で発生するバグです。

-
BeOS
-

BeOSで発生するバグです。

-
other
-

上記に無いOSで発生するバグである場合、これが選択されます。また、Webサイトの問題等、分類不可能なバグの場合に利用されています。

-

バージョン

-

バグの発生するバージョンを示します。unspecifiedは不明な場合や、適切なバージョンが無い場合に利用されます。Trunk、Branch等の意味はTrunkとBranchの違いと注意を参照してください。

-

優先順位

-

そのバグを修正する人が考えている、そのバグの優先順位です。Bugzilla-orgのバグと関連づけられているバグは、Bugzilla-orgの設定しているものと同じ値になります。P1が最も優先順位が高く、P5は最も優先順位が低いことを示します。--は未設定であることを示しています。

-

あくまでも目安以上の意味はありません。P1よりもP2のバグが先に修正されることもよくあります。

-

深刻度

-

そのバグがどの程度深刻な問題であるかを示します。

-
blocker
-

最も重大なバグであることを意味します。例えば、プロダクトをビルドできない、起動時にクラッシュする、日本語入力が全くできない等、テストのための利用すら困難なバグが該当します。

-
critical
-

blocker程では無いにしても重大な問題であることを意味します。例えば、クラッシュや、ハングアップ、データの損失に関しては無条件にcriticalに設定されます。また、それ以外でも特に重大なバグであるものの、blockerには当たらないバグが該当します。

-
major
-

特定の機能の大部分が機能しないような大きめのバグであることを意味します。例えば、文字化けが原因で使い物にならない状態に陥ったり、IMEの一部機能が全く利用できない場合等がこれに該当します。

-
normal
-

通常のバグであることを意味します。

-
minor
-

あまり多くの人に利用されていない機能のバグや、修正されなくても特に困らないようなバグがこれに該当します。

-
trivial
-

UIの表記ミスや、機能にはほとんど影響の無いような細かいバグがこれに該当します。

-
enhancement
-

要望であることを意味します。一般的な用語としてのバグには該当しないものです。

-

ターゲットマイルストーン

-

そのバグを修正する人が考えている、最初に修正されるリリース(アルファリリース、ベータリリースを含む)を示します。あくまでも目標であって、必ずそこまでに修正される、というものではありません。もし、Futureとなっている場合はバグを修正する目処が立っていないことを意味します。つまり、新たに別の人が修正に名乗り出ない限り、なかなか修正されないでしょう。

-

また、修正済みのバグの場合、そのバグが修正された最初のリリースを示します。ですが、1.8 branch以前はこの設定を行っていなかったので、修正済みのバグに関してこの項目を信用できるのはそれ以降のもののみです。FirefoxやThunderbirdのバージョンで言い直すと、1.5以降、ということになります。

-

Bug xxxxが依存する

-

そのバグが依存しているバグの一覧を示します。依存しているとは、例えばその依存しているバグが修正されないと、修正できない場合や、依存しているバグが修正されたら、同時にそのバグも修正されるであろう場合を言います。

-

バグIDだけでは分かりにくいので「依存ツリーを表示」を利用すると、より分かりやすいでしょう。

-

Bug xxxxが妨害する

-

そのバグが修正を妨害している他のバグの一覧を示します。妨害しているとは、「依存する」の逆です。そのバグが修正されないと、他のバグが修正できない、という状況です。

-

regressionバグの場合、その原因となったバグを妨害するものとして登録します。なぜなら、そのregressionが解消されないと、その原因となったバグの修正が完了したとは言えないからです。

-

こちらは、「依存グラフを表示」を利用しても見やすくはないかもしれません。

-

Bug の動きを見る

-

これまでの項目の修正履歴を一覧表の形で見ることができます。

diff --git a/files/ja/bugzilla-jp/guide/about/changeaccountprefs/index.html b/files/ja/bugzilla-jp/guide/about/changeaccountprefs/index.html deleted file mode 100644 index 35047a3f8d..0000000000 --- a/files/ja/bugzilla-jp/guide/about/changeaccountprefs/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: ChangeAccountPrefs -slug: Bugzilla-jp/Guide/About/ChangeAccountPrefs ---- -

アカウントの設定を変更する

-

Bugzillaではアカウントに関するいくつかの設定をユーザ自身で変更可能です。ここではその中でも特に有益なものを紹介しておきます。なお、アカウントの削除はできません。アカウントの削除に関してはアカウントの削除申請を参照してください。

-

アカウントの設定を行うには、環境設定にアクセスしてください。

-

パスワードを変更する

-

アカウントのパスワードは名前とパスワードで変更できます。

-

このアカウント設定で、「パスワード」欄に現在のパスワードを、「新しいパスワード」欄と、「もう一度」欄に新しいパスワードを入力して、「変更の保存」ボタンを押せば、新しいパスワードに変更されます。

-

名前を変更する

-

名前を変更する場合も名前とパスワードで、「パスワード」欄に現在のパスワードを入力してください。「名前 (オプション、でも推奨)」欄には既に現在の名前が設定されているので、これを新しい名前に変更し、「変更の保存」ボタンを押してください。

-

メールアドレスを変更する

-

メールアドレスを変更する場合も名前とパスワードで、「パスワード」欄に現在のパスワードを入力してください。そして、「新しいメールアドレス」に新しいメールアドレスを入力して、「変更の保存」ボタンを押してください。

-

そうすると、現在のメールアドレスと、新しいメールアドレスの双方に以下のようなメールが届きます。

-

現在のアドレスに届くメール

-

新しいアドレスに届くメール

-

新しいアドレスに届いたメール(下側のスクリーンショット)の一つめのURIにアクセスすると、現在のメールアドレスを確認するフォームが表示されるので、現在のメールアドレスを入力し、送信してください。

-

これで変更が完了しました。

-

なお、上記の確認メールのうち、古い方のアドレスに送られたURIに三日以内にアクセスすると、新しいメールアドレスは無効化され、設定が元に戻されます。これはセキュリティのための措置ですので、自分で変更した場合は誤ってアクセスしないように注意してください。

-

メールの送信設定を変更する

-

Bugzillaはバグに関する様々な変更をメールで各アカウントに通知します。多くの変更通知はバグを追跡していく上で有用なものでしょう。しかし、期待しないメールの着信は大切なメールの埋没につながるので好ましいことではありません。デフォルト設定ではかなりのケースにおいてメールが送信されるようになっているので、設定で送信する条件をより限定することができます。(もちろん、更に条件を広げることもできます。)

-

メールに関する設定はメール関係で行います。

-
全体設定
-

「誰かがフラグを要請した時にメールで通知する」と「要請したフラグが設定されたときにメールで通知する」の二つがありますが、前者は絶対にオフにしないでください。前者はあなたへの問い合わせを知らせるメールの設定ですので変更しないでください。もし、これが届かないとBugzilla-jpの運用を妨害してしまいます。

-
フィールド・受信条件特有の設定
-

フィールド・受信条件特有の設定のスクリーンショット

-

このスクリーンショットはデフォルト設定のままです。デフォルト設定に戻したい場合はこのスクリーンショットの通りに設定してください。

-
ユーザ監視
-

「ユーザ監視」は便利な機能です。カンマ区切りで「ユーザを監視対象に追加する (カンマ区切りリスト)」に追跡したいユーザのメールアドレスを列挙することができます。あなたと共通の関心を持つスタッフのアカウントをここに登録しておくと、新しいバグを小まめにチェックしなくても、そのスタッフへの送信メールからプロダクトの動向を常にメールで受けとることができます。

-
Bugzilla-jp からのメールの文字コード
-

ここにiso-2022-jpと入れると、Bugzilla-jpからの通知メールをISO-2022-JPでエンコードしたものを受け取れます。ただし、バグがいくつか確認されており、まだ正常に機能しません。ここは空白のままにしておいてください。

-
-

必要な項目を変更したら、ページの下部にある「変更の保存」ボタンで送信してください。それで設定は保存されます。

diff --git a/files/ja/bugzilla-jp/guide/about/index.html b/files/ja/bugzilla-jp/guide/about/index.html deleted file mode 100644 index b07971d226..0000000000 --- a/files/ja/bugzilla-jp/guide/about/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: About -slug: Bugzilla-jp/Guide/About ---- -

Bugzilla-jpとは

-

Bugzilla-jp(バグジラ・ジェイ・ピーと発音します)とは、バグ管理システム(Bug Tracking System、略してBTS)であるBugzillaを日本語化したBugzilla-jaを使い、Mozilla関連プロダクト(Firefox、Thunderbird、Camino、SeaMonkey等)のバグを管理、追跡、修正を行う日本語の開発者向けコミュニティです。

-

Mozilla関連プロダクトのバグは全てmozilla.orgのBugzillaにおいて管理されています。(Bugzilla-jpではmozilla.orgの運営しているBugzillaのことを本家、Bugzilla-orgと呼んでいます。Bugzilla-jpでは普段は、本家という呼び方を使いますが、このドキュメントでは文意を明確にするためにBugzilla-orgと記述します。)しかし、Bugzilla-orgでは公用語が英語である上に、登録されているバグの件数も2006年初頭で32万件を超えていますので、日本人にとっては検索するだけでも大変な作業になりがちです。

-

そこで、英語に自信が無くても日本人の開発者が不自由しないように、報告者や開発者と、Bugzilla-orgとの仲介を行っているのがBugzilla-jpです。

-

Bugzilla-jpは開発者のためのコミュニティです

-

Bugzilla-jpは開発者のためのコミュニティで開発現場です。つまり、バグの報告やコメントの追加を行うと開発者の一員という位置づけになり、その発言内容には技術的な根拠が要求されます。普通の掲示板やBBS、フォーラム等とは明確に異なっていることを理解してください。

-

もちろん、サポートセンターでもありません。

-

Bugzilla-jpは独立したコミュニティです

-

Bugzilla-jpはもじら組内にありますが、運用は別の独立したコミュニティで行われています。もちろん、もじら組のスタッフも参加していますが、Bugzilla-jpでのみ活動されている方もいます。また、Mozilla Foundation、Mozilla Corporation、Mozilla Japanからも独立したコミュニティです。(これらの企業の関係者も参加していますが、あくまでコミュニティの一員です。)

-

Bugzilla-jpの参加者は全員ボランティアです

-

Bugzilla-jpの参加者は全員がボランティアです。フルタイムで従事している人は居ますが、あくまでもその所属企業から派遣されたボランティアで、Bugzilla-jpの従業員ではありません。

-

つまり、全ての参加者はBugzilla-jp内では貢献度に応じて平等であるべきです。

diff --git a/files/ja/bugzilla-jp/guide/about/productsandcomponents/index.html b/files/ja/bugzilla-jp/guide/about/productsandcomponents/index.html deleted file mode 100644 index dcebea6cc1..0000000000 --- a/files/ja/bugzilla-jp/guide/about/productsandcomponents/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: ProductsAndComponents -slug: Bugzilla-jp/Guide/About/ProductsAndComponents ---- -

プロダクトとコンポーネント

-

Bugzilla上ではバグは常に何らかのプロダクトと、コンポーネントに関連づけられています。

-

プロダクトとは文字通り、そのバグが発生する製品の名前を指します。コンポーネントとは、プロダクト内で、更にどういった部位のバグであるのかを細分化するものです。Bugzilla-jpでは以下のようなプロダクトとコンポーネントを用意しています。

-

Core

-

コンポーネント一覧。

-

全てのMozilla関連プロダクトで共有しているGeckoエンジンや、ネットワークコンポーネントであるNecko、FirefoxやThunderbirdで使われている共通部品のtoolkit、 XPCOMやNSPRといった基盤技術に関するバグを扱っています。

-

また、他のプロダクトに当てはまらないChatZillaやDOM Inspectorといった独立したXULアプリケーションも扱っています。

-

Firefox

-

コンポーネント一覧。

-

Firefox固有のバグを扱っています。主に、FirefoxのUIに関するバグや、移行ツール(migration)、ブックマークや履歴、ページ内検索といった固有のバグが対象となります。

-

Thunderbird

-

コンポーネント一覧。

-

Thunderbird固有のバグを扱っています。主に、ThunderbirdのUIに関するバグや、移行ツール(migration)が対象となります。

-

Firefoxとは異なり、多くのコードがCoreで共有されているため、実際にはこのプロダクトに分類されるバグは多くありません。

-

Camino

-

コンポーネント一覧。

-

Camino固有のバグを扱っています。主に、CaminoのUIに関するバグが対象となります。

-

Mozilla Application Suite

-

コンポーネント一覧。

-

Mozilla Application Suiteと、その後継となるSeaMonkey固有のバグを扱っています。主にSeaMonkeyのUIに関するバグや、ブックマークや履歴といった各種の機能が対象となります。

-

Calendar

-

コンポーネント一覧。

-

Sunbird固有のバグを扱っていますが、残念ながら正式リリースの目処もたっていないこのプロダクトでアクティブに活動しているスタッフは居ません。もし、あなたがSunbirdのバグ管理に興味があるなら是非私たちに協力してください。

-

L10N(日本語化)

-

コンポーネント一覧。

-

各プロダクトの日本語版固有のバグ(誤訳や誤記等)を扱っています。

-

mozilla.gr.jp

-

コンポーネント一覧。

-

もじら組のドキュメントのバグ(誤記や誤情報、もじら組フォーラムのバグ)を扱っています。

-

Web標準化

-

コンポーネント一覧。

-

Web標準仕様に従っていないために、FirefoxやSeaMonkeyで表示や動作に問題があるもじら組以外のWebサイトやページを扱っています。

-

他のプロダクトとは違い、そのバグを担当する人が問題のサイトの管理者、もしくは制作者に修正依頼を出して修正してもらうという作業になります。

-

Webtools

-

コンポーネント一覧。

-

Bugzillaそのもののバグを扱っています。

-

TestProduct

-

コンポーネント一覧。

-

これはいかなる製品のバグも取り扱っていません。このプロダクトは、バグ投稿の練習用のものです。Bugzillaの動作テスト、確認にも利用されます。

-

このプロダクトに登録されているバグは不定期にデータベースから削除されるので、恒久的に情報を残すことはできません。

-

談話室ばぐじら

-

コンポーネント一覧。

-

雑談用のプロダクトです。スタッフが運用のためのディスカッションを行ったり、他のプロダクトに当てはまらないディスカッションが必要な場合等に利用されます。

-
-

原則として、ここにリストアップされていないプロダクトは扱っていません。例えばNetscapeに代表される他企業の製品や、Mozilla Japanのサイトに関する問題等は扱っていません。これら、他企業の問題は、その企業に直接コンタクトをとるようにしてください。

-

テーマや、拡張に関するバグも取り扱っていません。テーマや、拡張のバグは、その作者に直接コンタクトをとるようにしてください。

-

あなたが拡張の作者であり、Bugzilla-jpをあなたの拡張のバグ管理に利用したいのであれば談話室ばぐじらを通じてスタッフにコンタクトをとってください。あなたの熱心さがスタッフに伝われば拡張用のプロダクトが新設されるかもしれません。

-

もし、あなたがBugzilla-jpで取り扱われるべきプロダクトが他にもあると思う場合は、談話室ばぐじらを通じてスタッフにリクエストを出すことができます。ただし、リクエストした場合、あなたが積極的かつ、継続してそのプロダクトに貢献することが望まれるでしょう。貢献するつもりが無いのにリクエストすることはご遠慮ください。

diff --git a/files/ja/bugzilla-jp/guide/about/trunkandbranch/index.html b/files/ja/bugzilla-jp/guide/about/trunkandbranch/index.html deleted file mode 100644 index 766df5ae8b..0000000000 --- a/files/ja/bugzilla-jp/guide/about/trunkandbranch/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: TrunkAndBranch -slug: Bugzilla-jp/Guide/About/TrunkAndBranch ---- -

TrunkとBranchの違いと注意

-

Mozilla関連製品は開発中の状態をTrunk(トランク)、リリース版の元となるものをBranch(ブランチ)と呼びます。

-

Branchは製品のリリース毎に作成され、そのGeckoのバージョンからBranchの名前が決まります。例えば、Gecko1.8をベースとしたFirefox1.5/Thunderbird1.5は1.8.0Branchから、Gecko1.8.1をベースとしたFirefox2/Thunderbird2は1.8Branchから作成されています。

-

Bugzilla-jpでは基本的にTrunkのバグを扱います。Branchは最初のリリースが行われた時点で開発は終了しているためです。

-

Branchのバグであっても受け付けるのは、

-
    -
  1. セキュリティバグ
    2. -
  2. 重大なバグで修正しないと製品として成り立たないもの
    3. -
-

のみです。後者はあいまいですが、修正のリスクと効果が天秤にかけられることになりますが、よほどのバグでない限り、リスクがある修正は行われません。

-

Trunkビルドの入手方法

-

Trunkビルドの最新版は毎晩、Nightly Build(ナイトリービルド)としてリリースされています。Firefox、Thunderbird、SeaMonkeyと、それぞれ公開されています。

-

また、自分でCVSからソースコードを取得し、ビルドしてみても良いでしょう。この独自ビルドを元に報告する場合はその旨(いつのソースコードなのか)もあわせて報告してください。

diff --git a/files/ja/bugzilla-jp/guide/about/whatisbug/index.html b/files/ja/bugzilla-jp/guide/about/whatisbug/index.html deleted file mode 100644 index d108bca732..0000000000 --- a/files/ja/bugzilla-jp/guide/about/whatisbug/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: WhatIsBug -slug: Bugzilla-jp/Guide/About/WhatIsBug ---- -

バグとは

-

バグ(bug)とはコンピュータ用語で不具合を意味します。ある機能が設計として定められている通りに動作しないというようなプログラムの問題や、あらかじめ定められている仕様や規約などに反する設計などを一般にバグと呼びます。

-

Bugzilla-org、及びBugzilla-jpで言うバグとは、そういった不具合はもちろんの事、「この製品にはこの機能が必要だ」というような新しい機能の提案も「製品が備える事が望ましいと考えられる機能が備わっていない」という観点と積極的姿勢によりバグと扱われます。(ただし、不具合という意味ではなく、「機能強化が必要」という意味です。)

-

Mozilla関連プロダクトでは一般的に、プロダクトそのものへの機能追加と、Web標準への対応強化がこれに当てはまります。

-

前者は基本的にはBugzilla-jpでは扱っていません。また、後者は既に一般化している標準仕様の場合は、通常のバグとして扱われ、草案段階の仕様の先行実装は要望として扱われることに注意してください。

-

Bugzilla-jpでは基本的には要望を受け付けていません。これに関する詳しい情報は 要望を報告するを参照してください。

diff --git a/files/ja/bugzilla-jp/guide/about/whatisbugzilla/index.html b/files/ja/bugzilla-jp/guide/about/whatisbugzilla/index.html deleted file mode 100644 index 16ab752071..0000000000 --- a/files/ja/bugzilla-jp/guide/about/whatisbugzilla/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: WhatIsBugzilla -slug: Bugzilla-jp/Guide/About/WhatIsBugzilla ---- -

-

-

Bugzillaとは

-

Bugzilla(バグジラと発音します)とは、mozilla.orgによって開発された、Webブラウザでアクセス可能なバグ管理システム(Bug Tracking System、略してBTS)です。 -

BTSとは、バグの記録や内容の検索と参照、そして状態管理を行なうシステムの事です。おおざっぱな言い方をすれば、バグ管理専用のデータベースシステムとも言えます。 -

バグを単にメーリングリストや表などを使って手作業で管理するよりも、BTSでバグの記録や内容の検索と参照、そして状態管理を行なう事により、効率良く品質の高い作業を行う事ができるようになります。 -

バグの情報が色々な場所に散在するとそれらバグを開発者が把握する事が困難になり、また管理も煩雑で効率の悪いものになりますので、Bugzillaで集中的に管理する事が重要です。 -

また、Bugzillaでは何らかの情報を投稿するにはアカウントが必要です。(内容を見るだけならアカウントは必要ありません。)バグを追跡するにもアカウントは必要ですので注意してください。 -

Bugzillaに関するより詳細な情報は公式サイト、Home :: Bugzilla :: bugzilla.orgを、日本語版のBugzilla-jaに関しては、もじら組内のBugzilla-jaについてを参照してください。 -

diff --git a/files/ja/bugzilla-jp/guide/comment/index.html b/files/ja/bugzilla-jp/guide/comment/index.html deleted file mode 100644 index 1baec04568..0000000000 --- a/files/ja/bugzilla-jp/guide/comment/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Comment -slug: Bugzilla-jp/Guide/Comment ---- -

バグにコメントを付ける

-

バグにコメントを付ける場合、以下のことに注意してください。

-

HTMLのタグは使えない

-

書き込んだ内容はそのまま(ワードラップのみ適当に処理されますが)表示されます。&lt;や&gt;、&amp;等に注意を払う必要もありません。一部のテキストは自動的にアンカーとして処理されます。その詳しいルールはBugzilla-jpの自動リンク機能を参照してください。

-

書き込む際にそのバグのメールを受け取れるようにする

-

Bugzilla-jpでは書き込み時にあなたがそのバグで何の役割も持たない場合(報告者でもなく、担当者でもなく、QAコンタクトでも無い場合)、自動的にCCリストにあなたを加えるように設定しています。これを無効にすることはできますが、そうしないでください。なぜなら、そのバグであなたのコメントに対して他の貢献者からコメントがあった場合に、あなたに連絡が行き届くべきだからです。

-

また、書き込んだ内容に対して返答等がある可能性があるのでBugzilla-jpのアカウントとして登録したメールのチェックは必ず行ってください。

-

隠語や一般的ではない略語等は使わない

-

Bugzilla-jp内のバグは全ての技術者に意味の通じるものであるべきです。Bugzilla-jp内で使われている特殊な用語を除き、一部のコミュニティ等でしか通じない隠語や略語等の使用はしないでください。(例えば、炎狐、串、鯖、等々)

-

開発者を煽る内容の書き込みをしない

-

Bugzillaではよく、「まだこのバージョンでこのバグは再現する」、とか「なぜこのバグを誰も修正しないのか」といった、開発者を煽る内容の書き込みをする人が居ます。これは非常に迷惑な行為なので書かないでください。(ひどい場合はアカウント停止の可能性もあります。)

-

特定のバグが修正されないことにいらだちを覚え、我慢できないのであれば自分自身で修正すべきです。

-

返答の仕方

-

Bugzillaでは他人のコメントに対して返答することがよくあります。この際に元の文章を引用しておく方が便利なことがあります。(後から見た人や、返答を読むべき人が内容を把握しやすい。)

-

特定のコメントに対して返答する場合、そのコメントにある{{ mediawiki.external('返信') }}というリンクをクリックしてください。そうすると、コメント入力欄に自動的にそのコメントが引用されます。ここから不要な部分を削除して利用してください。

diff --git a/files/ja/bugzilla-jp/guide/comment/linkrules/index.html b/files/ja/bugzilla-jp/guide/comment/linkrules/index.html deleted file mode 100644 index fb8ddc1657..0000000000 --- a/files/ja/bugzilla-jp/guide/comment/linkrules/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: LinkRules -slug: Bugzilla-jp/Guide/Comment/LinkRules ---- -

Bugzilla-jpの自動リンク機能

-

Bugzillaではプレーンテキストしか使えません。ですが、それだけでは不便なのでいくつかの自動リンク機能が用意されています。

-

URLを記述した場合は自動的にリンクされます

-

URLの記述時には自動的にそのURLの文字列がそのURLへのリンクとなります。対応しているスキームはhttp、https、ftpです。国際化ドメインにも対応しています。

-

また、URLに続けて日本語を記述する場合、半角のスペースをはさんでください。国際化されたURLに対応するため、非ASCII文字でもURLの一部と判定されてリンクの対象となります。閉じ括弧")"でもURLは終了したとみなされることに注意してください。

-

Bugzilla-jp内のバグへのリンク

-

Bugzilla-jp内の別のバグへのリンクは"bug xxxx"という書式で生成されます。(xxxxはリンクしたいバグの番号)

-

また、そのバグの要約も生成されたリンクのtitle属性に自動的に入るので、明示する必要はありません。

-

コメントへのリンク

-

特定のコメントへのリンクは"comment yyyy"という書式で生成されます。(yyyyはリンクしたいコメントの番号、報告時のコメントは0)

-

別のバグのコメントへは"bug xxxx comment yyyy"という書式で生成されます。

-

Bugzilla-orgのバグへのリンク

-

Bugzilla-orgのバグへのリンクは"bug-org xxxx"という書式で生成されます。 Bug-orgのバグのコメントへは"bug-org xxxx comment yyyy"となります。

-

添付ファイルへのリンク

-

Bugzilla-jp内の添付ファイルへのリンクは"attachment xxxx"という書式で生成されます。全てのバグを通して添付ファイルはユニークなIDを持つのでコメントのようにバグ番号を明示する必要はありません。

-

Bugzilla-orgの添付ファイルへのリンク

-

Bugzilla-orgにある添付ファイルへのリンクは"attachment-org xxxx"という書式で生成されます。

-

クラッシュログへのリンク

-

Quality Feedback AgentやBreakpadのログのIDは独特の形式を持つので、そのまま書き込めば自動的にそれを解析した結果へのリンクとなります。特に接頭辞等は必要ありません。

diff --git a/files/ja/bugzilla-jp/guide/contribute/index.html b/files/ja/bugzilla-jp/guide/contribute/index.html deleted file mode 100644 index 73bd7fd2d3..0000000000 --- a/files/ja/bugzilla-jp/guide/contribute/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Contribute -slug: Bugzilla-jp/Guide/Contribute ---- -

-

-

どのような貢献が求められていますか?

-

Bugzilla-jpでは常に貢献者を募集中です。 -

まず、貢献者は前提としてこのドキュメントに書かれているBugzilla-jpの運用ルールを理解し、従う必要があります。ですが、それ以外に特に必要なことはありません。具体的に、私たちは以下の作業に貢献してくれる人を待っています。 -

-

テストし、適切にバグを報告する

-

たとえば様々なWebページを作成し、標準仕様とは異なるレンダリングが行われないかテストし、バグがあれば報告する、といった作業が求められています。 -

-

不十分な報告内容に対するヒアリング

-

報告されるバグの内容は十分とは言えないことが多いです。報告に欠けている情報を報告者に問い合わせたり、自分でテストを行ってその結果から、補足するべきことがあれば補足を行うといった作業が求められています。 -

-

テストケースの作成

-

シンプルでわかりやすいテストケースの作成はかなり難しいものです。報告された内容を再現させる簡単なテストケースを作ることは原因を絞り込むための第一歩です。この作業を行える人材が求められています。 -

-

Bugzilla-orgのバグを探す

-

報告されたバグがBugzilla-orgに報告されているバグのどれにあたるのかを調査するという作業が求められています。もちろん、英語を読む能力と、そのバグをテストできる程度の知識が必要です。 -

-

Bugzilla-orgにバグを報告する

-

Bugzilla-jpに報告されたバグがBugzilla-orgには登録されていない場合、英語でBugzilla-orgにも登録する必要があります。この作業者はBugzilla-orgのcanconfirm権限を持っていることが望まれます。 -

-

Bugzilla-orgに報告されているバグをBugzilla-jpにも報告する

-

もちろん無闇に行われては困りますが、Bugzilla-orgにしか報告されていないバグでも重要なバグは多々あります。そういったバグをBugzilla-jpにも登録しておけば、日本語でそういったバグも検索可能になります。もちろん、報告したバグは報告者が担当してください。 -

-

Bugzilla-orgのバグの状況を確認する

-

Bugzilla-jpのバグの担当者は非常に多くのバグを担当しているため、Bugzilla-orgでの状態の変更を見落としていることが多々あります。もし、Bugzilla-jpのバグとBugzilla-orgのバグの状態がずれている場合、それを担当者に警告する必要があります。もちろん、その警告はBugzilla-jp上で行います。メール等で直接行うと、他のスタッフのサポートが期待できないからです。 -

-

バグを修正できるパッチを提案する

-

バグの修正が可能な技術者はパッチを提案することができます。私たちは新たなハッカーの登場を常に待ちわびています。 -

diff --git a/files/ja/bugzilla-jp/guide/grossary/index.html b/files/ja/bugzilla-jp/guide/grossary/index.html deleted file mode 100644 index debd4db861..0000000000 --- a/files/ja/bugzilla-jp/guide/grossary/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Grossary -slug: Bugzilla-jp/Guide/Grossary ---- -

Bugzilla-jp用語集

-

A～I

-
-
- alpha
-
- 開発初期段階でのテスタ向けリリースをalpha版と呼ぶ。Mozilla関連製品では通常、a1、a2がリリースされる。リスクのある修正や大規模な修正はこの段階で終了しなくてはけない。
-
-
-
- beta
-
- 開発初期段階が終了するとbeta版と呼ばれるビルドがリリースされる。Mozilla関連製品では通常、b1、b2がリリースされる。ほぼ全ての修正はこの段階で終了していなくてはならない。
-
-
-
- branch
-
- TrunkとBranchの違いと注意参照。
-
-
-
- bug
-
- バグとは参照。
-
-
-
- bugzilla
-
- Bugzillaとは参照。
-
-
-
- bugzilla-org
-
- 本家のこと。
-
-
-
- bug-org
-
- 本家のこと。
-
-
-
- CVS
-
- Mozilla関連製品の開発に使われているバージョン管理ソフト。
-
-
-
- fx
-
- Firefoxの略。
-
-
-
- IME
-
- Input Method Editorの略。もともとWindowsの日本語入力用ソフトの名称だが、Mozilla関連製品の開発では全てのプラットフォームで日本語入力プログラムの総称として使われている。他のプラットフォームではIMやTSMといった呼称もあるが、Mozillaのソースコードではプラットフォーム固有のコードでない限りはIMEが用いられる。(固有部分でもIMEという単語は多用されている。)
-
-
-
- i18n
-
- internationalizationの略。
-
-
-
- internationalization
-
- 国際化とも。製品が特定の言語や文化に依存せずにあらゆる言語等で利用可能とすることを言う。例えば、英語版の製品であっても日本語の表示や入力に対応させること。
-
-
-
- INVA
-
- INVALIDの略。
-
-

J～Z

-
-
- JLP
-
- 日本語版の言語パック。英語版のMozilla関連プロダクトでも、その製品用のJLPがあれば日本語化可能。
-
-
-
- l10n
-
- localizationの略。
-
-
-
- localization
-
- 地域化とも。UI等の翻訳を主に指す。Bugzilla-jpでは主に英語版の製品を日本語版にすること等を指して使う。
-
-
-
- RC
-
- Release Candidateのこと。製品りリリース候補版。Mozillaの場合、RC1ではまだいくつかの修正が必要なことが多いが、RC2はそのまま最終版としてリリースされることがある。
-
-
-
- regression
-
- リグレッション。直訳すると後退。なんらかのバグの修正によって別のバグが発生した場合、そのバグをこう呼ぶ。
-
-
-
- suite
-
- Mozilla Application Suiteの略。既に開発は終了し、SeaMonkeyとして再スタートしている。
-
-
-
- tb
-
- Thunderbirdの略。
-
-
-
- trunk
-
- TrunkとBranchの違いと注意参照。
-
-
-
- WFM
-
- WORKSFORMEの略。
-
-

あ・か・さ行

-
-
- クラッシュ
-
- アプリケーションがなんらかのバグにより、使用途中に強制終了してしまうこと。クラッシュは原因によってはセキュリティバグとして扱われる。
-
-
-
- 国際化
-
- internationalizationのこと。
-
-
-
- コンテキストメニュー
-
- Windows/GTK2/Macで右クリックで表示されるメニューのこと。
-
-

た・な・は行

-
-
- 地域化
-
- localizationのこと。
-
-
-
- チェックイン
-
- 修正パッチを開発ツリーに入れる作業。これが終わるとバグが修正される。
-
-
-
- バグ
-
- バグとは参照。
-
-
-
- バックアウト
-
- CVSに入れられたパッチの逆のパッチをチェックインすること。つまり、もとのチェックインを無かったことにする。
-
-
-
- パッチ
-
- プログラムの差分を表す小さなテキストファイル。diffコマンドで生成されたもの。
-
-
-
- ハングアップ
-
- ハングアップはなんらかのバグにより、アプリケーションからの応答が無くなった状態を指す。再現条件から原因を判断するしか無いため、一般的にクラッシュバグよりも原因究明に手間がかかる。
-
-
-
- 本家
-
- mozilla.orgの運営するBugzillaのこと。このドキュメント内では検索エンジン等で表示された場合にも文意を明確にするため、bugzilla-orgという表記を用いているが、普段Bugzilla-jpでは本家という記述が一般的。
-
-

ま・や・ら・わ行

-
-
- メタバグ
-
- メタバグを利用するを参照。
-
-
-
- も組
-
- もじら組の略。
-
-
-
- リグレッション
-
- regression参照。
-
diff --git a/files/ja/bugzilla-jp/guide/index.html b/files/ja/bugzilla-jp/guide/index.html deleted file mode 100644 index 537447a41f..0000000000 --- a/files/ja/bugzilla-jp/guide/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Guide -slug: Bugzilla-jp/Guide ---- -

はじめてのバグジラ

-

このドキュメントはBugzilla-jpを利用するのに必要な知識やノウハウを提供しています。もし、このドキュメントの内容が不十分だったり、間違った記述を発見した場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグとして報告してください。

-

このドキュメントの読み方

-

このドキュメントは目的に応じて読み分けることができるように、複数の章に分割されています。Bugzilla-jpを利用する全ての利用者は第一章と第二章は必ず目を通す必要があります。

-

そして、それ以外にもあなたのとりたい行動(たとえばバグを報告したい等)にあわせて、その手順を紹介したドキュメントを読む必要があります。

-

このドキュメントは各手順の単なる説明書ではなく、その際に決まっている様々なルールを明文化しています。このルールに従わない方の参加は多くの開発者の仕事を妨害してしまう可能性がありますので、Bugzilla-jpの利用前に必ず目を通し、理解していただけますよう、お願いいたします。

-

目次

-
    -
  1. Bugzilla-jpとは -
      -
    1. Bugzillaとは
      2. -
    2. バグとは
      3. -
    3. バグの詳細情報
      4. -
    4. プロダクトとコンポーネント
      5. -
    5. アカウントの作成
      6. -
    6. アカウントの設定を変更する
      7. -
    7. TrunkとBranchの違いと注意
      8. -
    -
    2. -
  2. バグのライフサイクル -
      -
    1. Mozilla関連製品に関するバグのライフサイクル
      2. -
    2. Web標準化プロダクトに関するバグのライフサイクル
      3. -
    3. Webtoolsプロダクトに関するバグのライフサイクル
      4. -
    4. もじら組のコンテンツに関するバグのライフサイクル
      5. -
    5. 談話室ばぐじらに関するバグのライフサイクル
      6. -
    -
    3. -
  3. バグの情報を探す -
      -
    1. 簡単な検索
      2. -
    2. 詳細な検索
      3. -
    3. 検索のコツ
      4. -
    -
    4. -
  4. バグを追跡する
    5. -
  5. バグを報告する -
      -
    1. Webの表示に関するバグを報告する
      2. -
    2. ユーザインターフェースに関するバグを報告する
      3. -
    3. クラッシュするバグを報告する
      4. -
    4. セキュリティに関するバグを報告する
      5. -
    5. メモリリークに関するバグを報告する
      6. -
    6. 要望を報告する
      7. -
    -
    6. -
  6. バグにコメントを付ける -
      -
    1. Bugzilla-jpの自動リンク機能
      2. -
    -
    7. -
  7. 運用ガイド -
      -
    1. アカウントの削除申請
      2. -
    2. アカウントの権限昇格
      3. -
    3. アカウントの緊急停止
      4. -
    -
    8. -
  8. どのような貢献が求められていますか?
    9. -
  9. Bugzilla-jp用語集
    10. -
diff --git a/files/ja/bugzilla-jp/guide/lifecycle/index.html b/files/ja/bugzilla-jp/guide/lifecycle/index.html deleted file mode 100644 index 6ebe17962e..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: LifeCycle -slug: Bugzilla-jp/Guide/LifeCycle ---- -

バグのライフサイクル

-

各バグはステータスによって状態を管理されています。ステータスには以下のものがあります。

-

UNCONFIRMED

-

通常のアカウントから報告された直後のバグの状態です。つまり、そのバグは未だに関係者によって再現が確認されていません。バグ報告としてはまだ成立していない状態ですので、再現しにくいバグの場合、報告者の助けが重要なウエイトを占めることがあります。もし、報告者の協力が得られない場合は、そのままバグを閉じられてしまうことも多々あります。

-

NEW

-

バグの存在が確認された状態です。UNCONFIRMEDの状態のバグがスタッフによって確認された場合にこの状態に変更されます。

-

また、スタッフや、canconfirm権限のあるアカウントで報告された場合は最初からこの状態になっています。

-

ASSIGNED

-

バグについて担当者が作業を開始した場合にこの状態に変更されます。担当者が行う作業はプロダクトごとに異なっています。詳しくは次ページ以降を参照してください。

-

RESOLVED

-

そのバグに対して何らかの決着がついたことを示す状態です。 一般的には、そのバグに対する作業が終了したことを示しています。 この時、同時に処理方法がFIXED、INVALID、WONTFIX、LATER、REMIND、WORKSFORME、DUPLICATEのいずれかに設定されます。DUPLICATE以外の処理方法の意味は、プロダクトによって異なってきますので、詳細はページ末尾からリンクしているプロダクトごとの解説を参照してください。

-

DUPLICATEとなった場合、そのバグは別の登録されているバグと同じものでした。報告者はこの時、同時に同じ内容だった別のバグへとCCされます。もし、重複が誤りであると思うのであれば、自分が報告した方のバグに何らかのコメントを付けてください。決して、この目的でもうひとつのバグの方にコメントを付けないように注意してください。

-

VERIFIED

-

RESOLVEDとなったバグに対して、 別のスタッフか報告者がその事実を確認した状態です。 この状態になっていれば、そのバグは完全に決着が着いた状態であると言えます。

-

REOPENED

-

VERIFIEDとなったバグが、実はまだ解決していなかったことが分かった場合にこの状態になります。この際に、設定されていた処理方法はリセットされ、空白に戻ります。

-

多くの場合、RESOLVEDになった時に設定された処理方法が適切ではなかった場合に、一度REOPENEDとなり、適切な処理方法を再設定して、RESOLVEDに戻すために利用されます。

-

バグの修正が不十分だった場合にREOPENEDになることもありますが、実際にはそれは希です。大抵、修正が不十分だった場合は別の問題が発覚したということなので、新たにバグが登録されるからです。

-

なお、一度修正されたバグが再発しても、REOPENEDにはなりません。バグの再発は異なる原因で再発していることが大半だからです。また、バグの担当者は既にBugzilla-jpでは作業していないかもしれません。このような場合、REOPENEDは適当な処理とは言えません。この場合も新たにバグを登録しなおすのが適当です。

-
-

ステータスはバグの管理において、最も重要な要素のうちのひとつです。Bugzilla-jpでの運用経験の少ないアカウントはこれを変更してはいけません。もし、ステータスが変更されるべきなのにスタッフ、もしくは開発者のミスで変更が行われない場合、コメントでその旨をスタッフに伝えて、スタッフの判断を待ってください。

-

プロダクトごとのより細かいライフサイクルと、処理方法の意味は以下のドキュメントを参考にしてください。

-
    -
  1. Mozilla関連製品に関するバグのライフサイクル
    2. -
  2. Web標準化プロダクトに関するバグのライフサイクル
    3. -
  3. Webtoolsプロダクトに関するバグのライフサイクル
    4. -
  4. もじら組のコンテンツに関するバグのライフサイクル
    5. -
  5. 談話室ばぐじらに関するバグのライフサイクル
    6. -
diff --git a/files/ja/bugzilla-jp/guide/lifecycle/mozilla/index.html b/files/ja/bugzilla-jp/guide/lifecycle/mozilla/index.html deleted file mode 100644 index 42631b17be..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/mozilla/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Mozilla -slug: Bugzilla-jp/Guide/LifeCycle/Mozilla ---- -

-

-

Mozilla関連製品に関するバグのライフサイクル

-

Mozilla関連製品のバグとは、Core、Firefox、Thunderbird、Camino、Mozilla Application Suite、Calendar、L10N(日本語化)プロダクトのバグのことを指します。 -

これらのプロダクトのステータスはTrunkでの開発状況を示します。これはBugzilla-jpで修正済みであるとされたバグであっても、次にリリースされる公式のビルドで修正されているとは限らないことに注意してください。 -

これらのバグで行われる作業とは、報告されたバグの確認とテスト、Bugzilla-orgの該当バグとの関連づけと、その追跡です。担当者はバグを修正するのではなく、そのバグの状態を追跡するのが仕事です。 -

処理方法の各意味は次のように定義されています。 -

-

FIXED

-

このバグはTrunkにおいて修正済みです。 -

-

WORKSFORME

-

このバグはTrunkにおいて再現しません。もしくは、報告者以外の環境で再現しませんでした。 -

-

INVALID

-

このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -

-

INCOMPLETE

-

何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -

-

WONTFIX

-

このバグはバグですが修正されません。標準仕様がまずい場合や、実装するとパフォーマンスが著しく低下してしまうような場合、修正が著しく困難な場合、要望が受け入れられない場合等に用いられます。 -

-

OBSOLETE

-

このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。 -

-

DUPLICATE

-

このバグは別のバグと同じ内容でした。 -

-

LATER

-

使用しません。 -

-

REMIND

-

使用しません。 -

-<hr> -

これらのプロダクトでは、担当の決定までのプロセスで、 -報告のされ方から三つのパターンが考えられます。 -

一つめは、Trunkの最新のNightly Buildで確認されたバグを報告されたものです。 -このバグは大抵の場合、すぐにスタッフによって確認が行われ、バグが確認されるとNEWになり、スタッフがBugzilla-orgから該当のバグを探す作業に入ります。Bugzilla-orgで該当のバグが発見されると、発見した人か、別のスタッフがバグの担当に就任し、ASSIGNEDとなり、Bugzilla-orgの該当バグの追跡を開始します。 -

もし発見できなかった場合は新たにBugzilla-orgにバグを報告し、報告者が担当に就任してBugzilla-orgの該当バグの追跡を開始します。 -

二つめは、最新のリリースビルドを使って確認されたバグを報告されたものです。このバグの場合、Trunkの最新のNightly Buildで再現確認が行われます。もし、再現した場合は一つめのケースと同様に処理されることになります。しかし、再現しなかった場合は少し面倒です。 -

まず、同じリリースビルドで再現するかどうかが確認されます。もし、ここで確認された場合、Trunkでは修正されているということで、Bugzilla-orgで該当の修正済みのバグを探すことになります。 -

もし、バグが見つかれば、Bugzilla-orgのバグがREOPENEDに戻らないか、監視するために誰かが担当に就任して、そのままRESOLVED FIXEDとなります。見つからなかった場合は、担当者不在のまま、RESOLVED WORKSFORMEとなります。 -

もし、リリースビルドでも再現できなかった場合は報告者とのやりとりによって、再現に努めることになりますが、適当な所で作業が打ち切られて、RESOLVED WORKSFORMEもしくは、RESOLVED INVALIDとなることもあります。 -

三つめは、Bugzilla-orgに報告されていて、再現するバグをBugzilla-orgのバグID付きで報告される場合です。この場合、報告者がそのまま担当に就任するか、スタッフが担当に就任し、ASSIGNEDとなります。 -

担当者によりバグの追跡が開始されると、多くの場合、そのバグの更新は修正されるまで停滞することになります。日本人開発者がそのバグの修正に取りかかった場合、日本人間でのディスカッションが必要ならそのバグで議論が行われますが、それは希です。 -

Bugzilla-orgの関連したバグで何らかの動きがあれば、担当者はその動きを報告してくれるかもしれません。しかし、担当者にその義務はありませんので、担当者次第です。リアルタイムに情報が欲しい場合は関連づけられたBugzilla-orgのバグを自分で追跡する必要があります。 -

Bugzilla-orgの該当バグがRESOLVEDになった場合、その結果によって以下の四つの対処が担当者によって行われます。 -

一つめは、Bugzilla-orgでFIXEDまたは、WORKSFORMEとなった場合です。この場合、担当者はバグのホワイトボードにBug-org [Bugzilla-orgのバグの番号] [FIXED|WORKSFORME]と、関連バグの処理結果をメモします。 -

そして、担当者、またはテストできる人間が、バグの修正、または、再現しないことを確認すると、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。また、同時に、修正されたタイミングを明確化させるために、現在のTrunkのサイクルから適切な値をターゲットマイルストーンに設定します。 -

さらに別のスタッフ、もしくは報告者自身が修正を確認した場合、VERIFIEDとなります。 -

もし、修正を確認できなかった場合、関連づけていたBugzilla-orgとは関係なかった可能性があるので再調査となります。 -

二つめは、Bugzilla-orgでINVALIDまたはWONTFIXとなった場合です。この場合、担当者はバグのホワイトボードにBug-org [Bugzilla-orgのバグの番号] [INVALID|WONTFIX]と、関連バグの処理結果をメモし、その根拠となったコメントを要約(翻訳)して、その理由をBugzilla-jp上でも明記し、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。さらに別のスタッフがその根拠を受け入れた場合、VERIFIEDとなります。 -

もしスタッフ以外でこの結果に納得できない人がいる場合、 -その人はスタッフに事情を説明して説得するか、 -直にBugzilla-orgの担当者と英語でディスカッションする必要があります。 -

三つめは日本人開発者がバグを修正した場合です。この場合、ホワイトボードに一つめの場合と同様の記述を行い、直ちにRESOLVED FIXEDとなります。これは、バグの修正課程において日本人の環境下でその修正がテストされているためです。 -

後に、別のスタッフが修正を確認するとVERIFIEDとなります。 -

四つめは関連づけていたBugzilla-orgのバグがRESOLVED DUPLICATEとなった場合です。この場合、担当者は新たに重複していた元のバグの監視を継続することになります。 -

diff --git a/files/ja/bugzilla-jp/guide/lifecycle/mozillagumi/index.html b/files/ja/bugzilla-jp/guide/lifecycle/mozillagumi/index.html deleted file mode 100644 index fa276563bf..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/mozillagumi/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: MozillaGumi -slug: Bugzilla-jp/Guide/LifeCycle/MozillaGumi ---- -

-

-

もじら組のコンテンツに関するバグのライフサイクル

-

このプロダクトではもじら組内のコンテンツ全般のバグ報告を扱っています。 -

またBugzilla-jpの運用方針に関するディスカッションもコンポーネント:bugzilla-jpで行っています。 -

このプロダクトのステータスは問題とされたコンテンツのバグの修正状況や、ディスカッションの状態を示します。 -

処理方法の各意味は次のように定義されています。 -

-

FIXED

-

このバグは既に修正済みです。 -

もしくは、ディスカッションは決着しました。 -

-

WORKSFORME

-

このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。 -

ディスカッションでは使用されません。 -

-

INVALID

-

このバグはバグではありません(仕様通りです)。または、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) -

ディスカッションの場合、提案は却下されました。 -

-

WONTFIX

-

このバグはバグですが修正されません。 -

ディスカッションの場合、提案の内容は的を射ていましたが、対応不能です。 -

-

OBSOLETE

-

このバグは修正された訳ではありませんが、再現不可能になっています。バグのあったページが削除された場合等に使用されます。 -

-

DUPLICATE

-

このバグは別のバグと同じ内容でした。 -

-

LATER

-

使用しません。 -

-

REMIND

-

使用しません。 -

-<hr> -

このプロダクトでは報告された内容がバグであると確認されるか、ディスカッションすべき内容であると確認されると、NEWとなります。 -

もし、バグではない場合や、的を射ていない提案の場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合や、提案は実現不能と考えられた場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。 -

もし報告されたバグが修正可能で、担当者が作業を開始するとASSIGNEDとなります。ディスカッションの場合は誰かが議論の中心に立つ場合、担当者となりASSIGNEDとなります。 -

そして修正が完了、もしくは決着すると、RESOLVED FIXEDとなり、別のスタッフがそれを確認すると、VERIFIEDとなります。 -

diff --git a/files/ja/bugzilla-jp/guide/lifecycle/qamozilla/index.html b/files/ja/bugzilla-jp/guide/lifecycle/qamozilla/index.html deleted file mode 100644 index 360bef3837..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/qamozilla/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: QAMozilla -slug: Bugzilla-jp/Guide/LifeCycle/QAMozilla ---- -

-

-

談話室ばぐじらに関するバグのライフサイクル

-

このプロダクトは他に適当なコンポーネントが無いディスカッションのために用いられます。 -

このプロダクトのステータスは話題の状態を示します。NEWもしくはASSIGNEDならまだ話題についての議論は続いているのでしょう。逆に、RESOLVEDやVERIFIEDならおそらく議論には決着が着いています。 -

処理方法は概ね次のような意味かもしれませんが、明確な定義はありません。 -そのバグの下の方のコメントを読んで、自分で判断するべきでしょう。 -

-

FIXED

-

この議論は決着したのかもしれません。もしくは、コメントが大量に付いたため、 -新たにバグを登録して、そちらでの議論に移ったのかもしれません。 -

-

WORKSFORME

-

おそらく使用されません。 -

-

INVALID

-

話題は的を射ていないことだったのかもしれません。 -

-

INCOMPLETE

-

その議論の提案者にしか判断できない議論なのに、提案者から応答が得られなかったようです。 -

-

WONTFIX

-

議論は決着が着かなかったのかもしれません。 -

-

OBSOLETE

-

議論の内容に意味がなくなったのかもしれません。 -

-

DUPLICATE

-

この話題は別のバグと同じ内容でした。 -

-

LATER

-

おそらく使用されません。 -

-

REMIND

-

おそらく使用されません。 -

diff --git a/files/ja/bugzilla-jp/guide/lifecycle/webstandard/index.html b/files/ja/bugzilla-jp/guide/lifecycle/webstandard/index.html deleted file mode 100644 index d08f2ff17a..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/webstandard/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: WebStandard -slug: Bugzilla-jp/Guide/LifeCycle/WebStandard ---- -

-

-

Web標準化プロダクトに関するバグのライフサイクル

-

このプロダクトのステータスは問題のあるサイトの管理者とのコンタクト状況や、 -問題のサイトの修正状況を示します。 -

このプロダクトで行われる作業とは、報告された問題に関する仕様の調査と、修正方法(標準仕様に準拠した代替方法)の検討、問題のあるサイトへの修正依頼と、そのサイトの監視です。担当者は問題のあるサイトにコンタクトをとった人物で、サイトの監視義務はありません。 -

注意:このプロダクトに報告された問題は、報告された時にスタッフによりチェックされますが、(色々な意味で)興味深い問題ではなく、さほど公益性のあるサイトで無い場合には誰も担当しない可能性があります。 -

ただし、興味深い問題に関しては、Web標準普及プロジェクトや、Geckoそのものにフィードバックが行われることがあり、この場合、そのサイトが修正されなくても大きな意義があります。 -

処理方法の各意味は次のように定義されています。 -

-

FIXED

-

問題のあるサイトはGeckoに対応させるために修正してくれました。 -

-

WORKSFORME

-

問題のあるサイト、またはページが無くなりました。または、Geckoの仕様変更により、最新のリリースビルドで非標準への妥協があり、Geckoでのアクセスには問題なくなりました。 -

-

INVALID

-

INCOMPLETE導入前はINVALIDが代わりに利用されていましたが、現在は利用されていません。 -

-

INCOMPLETE

-

妥当な報告として成立しませんでした。 -

-

WONTFIX

-

問題のあるサイトにコンタクトを取りましたが、長期間に渡って反応がありませんでした。もしくは、問題のあるサイトから、修正しない旨の返事がありました。 -

-

OBSOLETE

-

使用しません。 -

-

DUPLICATE

-

この問題は既に報告されていました。(同一のサイトであることが条件です。) -

-

LATER

-

問題のあるサイトにコンタクトを取ったところ、後ほど(例えば、次のリニューアル時に)対応すると返事がありました。 -

-

REMIND

-

問題のあるサイトにコンタクトを取ったところ、検討するという返事がありました。 -

-<hr> -

このプロダクトでは報告があると、まず、 -発生している問題がWeb標準仕様に準拠していなためであることを確認します。 -もし、Geckoのバグが原因である場合はプロダクトが変更され、{{ mediawiki.external('Bugzilla-jp:Guide:LifeCycle:Mozilla|Mozilla関連製品に関するバグのライフサイクル') }}として処理されます。 -

サイト側の問題であることが確認されると、ステータスをNEWとして、次のように処理します。 -

まず、Web標準普及プロジェクトのWeb標準化Tipsに記載されている既知の問題の場合、ドキュメント内に原因や修正方法が既に記載されているので、サイトの管理者にそのドキュメントのURIを提示し、修正を依頼します。 -

Web標準化Tipsに記載されていない問題の場合、修正案を作成し、コメントに修正方法を記述するか、添付ファイルで差分を提出します。もし、別のスタッフに修正案を確認してもらう必要がある場合、差分を提出し、レビューを依頼します。そして、修正案が固まったら、サイトの管理者にコンタクトをとり、修正方法の提示と、修正依頼を行います。 -

修正依頼を行う相手は、サイト上に連絡先が明記されている場合には、その連絡先になります。連絡先が明記されていない場合で、ドメインを他のサイトと共有していないサイトの場合、WHOISサービスを使って、サーバの管理者を調べ、その管理者にメールでコンタクトを取ります。もし、他のサイトと共有しているサーバで連絡先が不明な場合はコンタクトを断念し、RESOLVED WONTFIXとなります。 -

サイト側とコンタクトを取ることに成功すると、その人が、担当に就任し、ステータスをASSIGNEDとします。 -

コンタクトをとった場合、サイトから返事が返ってくることがあります。 -この場合、その内容に従って必要ならステータスを変更し、 -処理方法に適切なものを設定します。 -

連絡が無い場合はそのサイトを適当に監視するしかありません。もし、サイトが更新され、問題に変化があった場合はその旨をコメントします。スタッフがそれを確認したら、適宜、ステータスを変更し、適切な処理方法でバグを閉じます。その後、別のスタッフによって再確認が行われると、VERIFIEDとなります。 -

もし、長期間に渡って問題が改善されず、不特定多数が利用する特にメジャーなサイトでは無い場合、RESOLVED WONTFIXとして監視を中断することもあります。 -

diff --git a/files/ja/bugzilla-jp/guide/lifecycle/webtools/index.html b/files/ja/bugzilla-jp/guide/lifecycle/webtools/index.html deleted file mode 100644 index d0c251cfd4..0000000000 --- a/files/ja/bugzilla-jp/guide/lifecycle/webtools/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: WebTools -slug: Bugzilla-jp/Guide/LifeCycle/WebTools ---- -

Webtoolsプロダクトに関するバグのライフサイクル

-

このプロダクトは特殊で、コンポーネントによって異なります。このプロダクトにはBugzillaそのもののバグを取り扱うBugzillaコンポーネントと、Bugzilla-jpでカスタマイズしている部分のバグを取り扱うBugzilla-jpコンポーネントの二つがあります。前者については、Bugzilla.orgのプロダクトのバグのため、Mozilla関連製品に関するバグのライフサイクルと同じライフサイクルとなりますので、そちらを参考にしてください。このページでは、後者、Bugzilla-jpコンポーネントの場合についてのみ説明しています。

-

このプロダクトのステータスはBugzilla-jpのバグの修正状況を示します。

-

処理方法の各意味は次のように定義されています。

-

FIXED

-

このバグは既に修正済みです。

-

WORKSFORME

-

このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。

-

INVALID

-

このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)

-

INCOMPLETE

-

何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)

-

WONTFIX

-

このバグはバグですが修正されません。例えば、あまりにも巨大な修正が必要なバグは解決できません。

-

OBSOLETE

-

このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。

-

DUPLICATE

-

このバグは別のバグと同じ内容でした。

-

LATER

-

使用しません。

-

REMIND

-

使用しません。

-
-

このプロダクトでは報告された内容がバグであると確認されると、NEWとなります。

-

もし、バグではない場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。

-

もし報告されたバグが修正可能で、担当者が修正を開始するとASSIGNEDとなります。

-

そして修正が完了すると、RESOLVED FIXEDとなり、別のスタッフが修正を確認すると、VERIFIEDとなります。

diff --git a/files/ja/bugzilla-jp/guide/management/deleteaccount/index.html b/files/ja/bugzilla-jp/guide/management/deleteaccount/index.html deleted file mode 100644 index 0ebe0c4373..0000000000 --- a/files/ja/bugzilla-jp/guide/management/deleteaccount/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: DeleteAccount -slug: Bugzilla-jp/Guide/Management/DeleteAccount ---- -

アカウントの削除申請

-

Bugzillaにはアカウントを削除する機能がありません。

-

単にメールの配信を止めたいだけであれば、 メールの送信設定を変更するを参考に、メールの配信を止めてください。

-

なんらかの理由でそれだけではなく、アカウントそのものを完全に削除したい場合、プロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで削除要請のバグをたてて、理由を説明してください。

-

データベースの構造上、基本的にはアカウントの削除はできませんので、全てのケースにおいて、削除申請が受理されるとは限らないことに注意してください。

diff --git a/files/ja/bugzilla-jp/guide/management/index.html b/files/ja/bugzilla-jp/guide/management/index.html deleted file mode 100644 index 17475eef3b..0000000000 --- a/files/ja/bugzilla-jp/guide/management/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Management -slug: Bugzilla-jp/Guide/Management ---- -

運用ガイド

-

以下のドキュメントは権限が関係したりする、運用ルールについてまとめています。もし、ここで明記すべきルールが他にもある場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグを登録してください。

-
    -
  1. アカウントの削除申請
    2. -
  2. アカウントの権限昇格
    3. -
  3. アカウントの緊急停止
    4. -
diff --git a/files/ja/bugzilla-jp/guide/management/stopaccount/index.html b/files/ja/bugzilla-jp/guide/management/stopaccount/index.html deleted file mode 100644 index 45b187ed86..0000000000 --- a/files/ja/bugzilla-jp/guide/management/stopaccount/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: StopAccount -slug: Bugzilla-jp/Guide/Management/StopAccount ---- -

-

-

アカウントの緊急停止

-

特定のアカウントが故意であるか否かに関わらず、Bugzilla-jpへの適切ではない投稿や、その他の行為があった場合に、即時停止されます。 -

これはBugzilla-jpのデータや運用に対する被害を最小限に抑えるために一切の事前通告等はありません。 -

もし、スタッフが問題視した行動が故意ではなかったことが判明したり、そのような行動を二度と行わないと判断された場合には、そのアカウントは再び通常の状態に戻されます。 -

アカウントを停止させたスタッフは停止メッセージの中で停止解除のための連絡先を明記すべきです。もし、停止に納得できず、連絡先が明記されていない場合、xxx@xxxに連絡してその旨を説明してください。 -

-
-

すみません。まだ緊急時の連絡先はまだ決定しておりません。それまでは停止メッセージの中に連絡先が記述されているはずです。 -

-
diff --git a/files/ja/bugzilla-jp/guide/management/upgradeaccount/index.html b/files/ja/bugzilla-jp/guide/management/upgradeaccount/index.html deleted file mode 100644 index 23d1ea5b1a..0000000000 --- a/files/ja/bugzilla-jp/guide/management/upgradeaccount/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: UpgradeAccount -slug: Bugzilla-jp/Guide/Management/UpgradeAccount ---- -

-

-

アカウントの権限昇格

-

アカウント毎に編集に関する権限設定が存在します。登録しただけのアカウントではNEWのバグすら登録することはできません。もし、あなたがBugzilla-jpの権限が足りずに困っているのであれば、以下の要件を確認した上でアカウントの権限昇格を申請するバグをプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで登録してください。 -

-

canconfirm権限を取得する

-

canconfirm権限とはNEWのバグを登録したり、ガイドモードを利用せずにバグを登録したり、UNCONFIRMEDのバグをNEWに変更することが可能です。他人の登録したバグの編集権限はありませんが、この権限は簡単に取得することができます。 -

要件として、あなたが報告したバグが3件以上必要です。また、それらのバグはこのドキュメントで説明されているような的確で分かりやすいバグである必要があります。 -

つまり、私たちはあなたのバグ報告能力をこの権限を持つに適当なものであるかどうかを確認する必要があります。 -

-

editbugs権限を取得する

-

editbugs権限とは他人の報告したバグを編集することができる権限です。この権限があればあなたは多くの仕事をBugzilla-jp上ですることが可能になりますが、それ故に、この権限の取得にはある程度の実績が必要です。 -

あなたがパッチやテストケースを頻繁にBugzilla-jpを利用して提出するのであれば、この権限は短期間で付与されます。 -

あなたが1年以上、長期的にBugzilla-jpに貢献している(例えば多くのバグで担当者を名乗り出る等)場合もこの権限を持つ対象となります。 -

もちろん、これらの条件を満たしていなくても、スタッフがあなたはこの権限を持つべきであると判断した場合には権限は付与されます。 -

-

セキュリティバグを見る権限を取得する

-

この権限はほとんどのアカウントに付与されません。 -

特定のセキュリティバグであなたの助けが必要であるとスタッフが判断した場合、あなたをそのバグのCCリストに追加し、そのバグを見ることができるようにするでしょう。 -

全てのセキュリティバグを見ることができる権限はそういった助けが常に必要であると思われる方(つまり、セキュリティバグに関する知識や、これをむやみに公表しない人であるといった印象が必要)にはスタッフ側から適時、この権限が付与されます。 -

-

Bugzilla-jpの運営に関わる権限を取得する

-

原則としてこの権限はほとんどのアカウントに付与されません。 -

あなたがBugzilla-jpの運営に関するディスカッションに頻繁に参加し、この権限を持つべき人だと多くのスタッフが判断した場合、あなたの意志を確認した後に付与されます。 -

この権限はアクティブな貢献者のみが持つべきものです。 -

diff --git a/files/ja/bugzilla-jp/guide/report/crashbugs/index.html b/files/ja/bugzilla-jp/guide/report/crashbugs/index.html deleted file mode 100644 index 4dd639bbe4..0000000000 --- a/files/ja/bugzilla-jp/guide/report/crashbugs/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: CrashBugs -slug: Bugzilla-jp/Guide/Report/CrashBugs ---- -

クラッシュするバグを報告する

-

クラッシュするバグの報告は簡単です。

-

Firefox2/Thunderbird2以前

-

まず、Firefox2/Thunderbird2以前では、Quality Feedback Agent(日本語版だと品質フィードバックエージェント)をインストールした状態でそのバグを再現させてください。

-

インストールしているかどうか分からない場合はアドオンマネージャでTalkbackという拡張がインストールされているか確認してください。インストールしていない場合は、Firefoxを上書きで再インストールします。その際に、カスタムインストールを使用してQuality Feedback Agentをインストールしてください。

-

シャットダウン時等、特殊な状況でのクラッシュバグを除き、大抵、クラッシュ時にQuality Feedback Agentが自動的に起動します。初回起動時のみ、英語で以下のようなツールの説明等が出てきます。

-

Quality Feedback Agentの初回起動時のダイアログのスクリーンショット

-

この最初の画面と次の画面と両方でNextボタンを押し、最後に出てくる、次の画面で「Turn Agent On」にチェックを入れ、Finishボタンを押してください。

-

Quality Feedback Agentの初回起動時のダイアログの最後の画面のスクリーンショット

-

そうすると以下のような実際のリポート画面が出てきますので、そのまま何も入力せずにSendボタンを押してください。

-

Quality Feedback Agentの送信画面

-

次に、Firefoxのインストールしたフォルダにある、talkback.exeを実行してください。そうすると、今までに送信した情報のIncident IDが表示されます。

-

Quality Feedback Agentの送信済みリストのスクリーンショット

-

この中から、Bugzilla-jpに報告したいクラッシュを選択し、コンテキストメニューからIncident IDをコピーして、それを私たちに報告してください。

-

その際に、そのクラッシュさせる手順も書き込んでください。Incident IDのみでのクラッシュの報告は再現確認等が行えないためです。

-

Trunk/Firefox3以降

-

TrunkではQuality Feedback Agentに代わり、Breakpadというツールが利用されるようになりました。

-
-

Breakpadの利用手順は後日紹介予定です。

-
diff --git a/files/ja/bugzilla-jp/guide/report/enhancement/index.html b/files/ja/bugzilla-jp/guide/report/enhancement/index.html deleted file mode 100644 index ae0e1c108b..0000000000 --- a/files/ja/bugzilla-jp/guide/report/enhancement/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Enhancement -slug: Bugzilla-jp/Guide/Report/Enhancement ---- -

要望を報告する

-

バグとはで述べたように、Bugzilla-orgやBugzilla-jpでは製品に対する要望、機能強化もバグとして扱われます。ですが、現在、Bugzilla-jpでは要望を受け付けていません。

-

要望を挙げるのは簡単ですが、実際にそれに賛同し、パッチを作成し、更にそのコードをメンテナンスする人はまず居ないと考えてください。あなたにとって、とても有用で、素晴らしいアイデアがあったとしても、それが万人に必要とされ、受け入れられるものであることは非常に希です。(ユーザインターフェースに関するバグを報告するも参照してください。)

-

どうしても実現したい要望があり、パッチも作るし、メンテナンスもするというのであれば、Bugzilla-jpをディスカッションの場として利用されることを私たちは拒否しません。その場合、「深刻度」を「enhancement」として登録してください。また、本家への登録やそのバグの担当もあなた自身で行ってください。(担当になる権限が無い場合、Bugzilla-jpのスタッフがあなたを担当に割り振ります。)

-

つまり、私たちを頼って要望を出さないようにしてください。

-

メモ: Bugzilla-orgにバグがあり、それを追跡する目的でのBugzilla-jpへの登録はかまいませんが、そのBugzilla-orgに登録されている要望はあなた以外が登録している必要があります。

diff --git a/files/ja/bugzilla-jp/guide/report/index.html b/files/ja/bugzilla-jp/guide/report/index.html deleted file mode 100644 index 80a32fc898..0000000000 --- a/files/ja/bugzilla-jp/guide/report/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Report -slug: Bugzilla-jp/Guide/Report ---- -

バグを報告する

-

Bugzilla-jpにバグを報告する際にはいくかの決まりがあります。報告する人それぞれがガイドライン無く報告を行うと、開発者にとって必要な情報が不足したり、あなたが報告するバグを探している人が、うまくあなたの報告を見つけられないということが発生します。いわゆる「駄目な報告」はバグを処理する開発者にとっても、実際にそのバグで困っている報告者自身も不幸なものです。

-

ここではバグを報告する際のガイドラインと、開発者が報告してもらいたいと考えている情報をバグの種類ごとに紹介します。

-

バグを報告する際には、bugzilla-jpの画面上にある「新規登録」というリンクが移動します。報告する際にはまず以下のことについて注意してください。

-

テストは最新のTrunkでも行う

-

原則としてテストは最新のTrunkでも行ってください。

-

もし、あなたがリリース版を常用している場合、発見したバグは報告する前に最新のTrunkビルドでも再現するかどうか確認をとってください。

-

セキュリティバグ、もしくは重大なバグ以外の場合、最新のTrunkビルドで再現しない場合は既に修正済みのバグであり、リリース版で修正されることはほとんどありません。

-

バグが再現するビルドを明記する

-

リリース版でのみ再現するバグであれば、リリースバージョン(2.0.0.4等)でかまいませんが、Trunkでのテストの場合、HelpのAboutで表示されるUser Agent名(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a6pre) Gecko/20070622 Minefield/3.0a6pre等)を書いてください。

-

MinefieldのAbout画面

-

既に同じバグが登録されていないか検索する

-

既に同じバグが報告されている場合は報告の必要がありません。まずは検索してみてください。検索に関するヒントも用意していますので、参考にしてください。

-

見つからない場合は是非、報告してみてください。実際には重複となる報告だったとしても、そのバグが知られないままでいる方が問題です。

-

一回の報告で二つ以上のバグを報告しない

-

Bugzilla上ではバグ単位でステータスを管理します。そのため、ひとつの報告に二つ以上のバグを報告されると管理できなくなってしまいます。

-

例えば、同じWebページで二つのバグを見つけて、それを箇条書きにして一つの報告にまとめてはいけません。この場合、二つのバグをそれぞれ、別々に報告しなくてはいけません。

-

スタッフが後からバグを分割するだろうという期待はしないでください。それは非常に迷惑なことです。なぜなら、Bugzillaでは一度投稿されたコメントは修正できないため、あなたの当初の不適切な報告はそのままになってしまいます。それをスタッフが分割したとしても、そのバグを検索した第三者はそのバグが何を取り扱っているのかを知るためには分割作業が終わるところまでコメントを読む必要が出てきます。これでは、バグのデータベースとしては非常に品質の低いデータとなってしまいます。

-

つまり、最初の報告者のコメントの文面だけでバグの詳細を理解できるのが理想的です。

-

バグの再現条件を細かく調査してから報告する

-

バグの再現条件がいい加減なままで報告しないでください。

-

例えば、特定のパソコンでのみ再現する、といった報告は良くありません。私たちがあなたよりもあなたのパソコンの環境に詳しいということはありません。

-

しかし、どうしても再現条件の絞り込みが困難な場合はこの限りではありません。

-

セーフモードでもテストする

-

報告する際は、拡張を無効にした状態でも確認をしてください。あなたが報告しようとしている不具合は、拡張によるものかもしれません。報告の前に拡張をアンインストールするか、セーフモードで実行し、Mozilla製品単体で再現するかを確認してください。なお、Bugzilla-jpでは現在、拡張や(デフォルト以外の)テーマの不具合は受付けておりません。

-
-

以下、バグの種類ごとにおける特殊な注意事項については以下のドキュメントを参照してください。

-
    -
  1. Webの表示に関するバグを報告する
    2. -
  2. ユーザインターフェースに関するバグを報告する
    3. -
  3. クラッシュするバグを報告する
    4. -
  4. セキュリティに関するバグを報告する
    5. -
  5. メモリリークに関するバグを報告する
    6. -
  6. 要望を報告する
    7. -
diff --git a/files/ja/bugzilla-jp/guide/report/memoryleakbugs/index.html b/files/ja/bugzilla-jp/guide/report/memoryleakbugs/index.html deleted file mode 100644 index 4559769c30..0000000000 --- a/files/ja/bugzilla-jp/guide/report/memoryleakbugs/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: MemoryLeakBugs -slug: Bugzilla-jp/Guide/Report/MemoryLeakBugs ---- -

-

-

メモリリークに関するバグを報告する

-

Bugzilla-jpにメモリリークバグを報告する場合は、必ず原因となるコードを特定するか、Bugzilla-orgのバグのIDと共に報告してください。Bugzilla-orgではここまで厳しい要求を報告者に求めていませんが、現象のみからBugzilla-jpにバグを報告されても、これをBugzilla-orgの特定のバグを同じバグであると判断することができないため、私たちはこれをあなたに要求するしかありません。 -

もちろん、コード上から直接発見した場合を除き、実際にそのメモリリークがどうやれば発生するのかも報告してください。 -

diff --git a/files/ja/bugzilla-jp/guide/report/renderingbugs/index.html b/files/ja/bugzilla-jp/guide/report/renderingbugs/index.html deleted file mode 100644 index cad3c72272..0000000000 --- a/files/ja/bugzilla-jp/guide/report/renderingbugs/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: RenderingBugs -slug: Bugzilla-jp/Guide/Report/RenderingBugs ---- -

-

-

Webの表示に関するバグを報告する

-

Webコンテンツの表示に関するバグを報告する場合、Web標準仕様に関する最低限の知識は必要になります。他のブラウザとは表示結果が違うということを理由に報告しないでください。その判断は多くの場合、間違っています。他のブラウザとの表示結果の違いはバグを見つける良いきっかけですが、それがGeckoのバグであるかどうかはWeb標準仕様に照らし合わせて検証する必要があります。つまり、Geckoにバグがあるため、表示結果が異なったという確証を私たちは仕様書に求めます。報告する際に仕様書のどこの記述に違反しているのかを明示してください。 -

なお、仕様書は有志によって和訳された仕様書でかまいません。和訳された仕様書が利用できる場合、Bugzilla-jpではよくそれを資料として利用しています。 -

ただし、根拠として挙げようとする仕様書が勧告前のものである場合は注意してください。まず、既に先行実装していること自体にバグがある場合は報告してください。先行実装の失敗は明らかにGeckoのバグであると言えるからです。そのバグは修正されなくてはいけません。 -

ですが、先行実装すべきである、して欲しい、というバグは、あなたが実作業を行う場合を除き、報告しないでください。私たちは実現するかどうか分からない要望がBugzilla-jpにあふれかえる状態を好ましい状態とは考えていないためです。 -

また、非常にシンプルなテストケースを私たちは必要としています。何百行もあるtableレイアウトのWebページを示されて、その一部の表示にバグがあると言われても、その検証には時間がかかります。あなたが報告した後に、簡単なテストケースを添付してくれることで私たちはその時間を自分の仕事に割り当てることができます。(コメント欄にソースコードを貼り付けないでください。それをテストするにはファイルを作成する必要があるため、確認を行うだけで貴重な労力を必要としてしまいます。) -

なお、ひとつひとつのバグについて個別に報告していただけるようにお願いします。例えば、ひとつのWebページで二つのバグが同時に見つかったからといって、それらをまとめて一つの報告にしないでください。なぜなら、それらのバグが同時に修正される訳ではないからです。二つのバグがある場合、バグ報告もテストケースの作成も二件に分けるようにお願いします。 -

diff --git a/files/ja/bugzilla-jp/guide/report/securitybugs/index.html b/files/ja/bugzilla-jp/guide/report/securitybugs/index.html deleted file mode 100644 index 8918cc217b..0000000000 --- a/files/ja/bugzilla-jp/guide/report/securitybugs/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: SecurityBugs -slug: Bugzilla-jp/Guide/Report/SecurityBugs ---- -

-

-

セキュリティに関するバグを報告する

-

もしあなたが見つけたバグがセキュリティに関わる(つまり、他のユーザがあなたの報告によって攻撃者から被害を受ける可能性がある)場合、あなたはそのバグを非公開のバグとして報告することができます。 -

バグを報告する際に「Bug 報告を送信」ボタンの直前にある「Mozilla/Firefoxのセキュリティ問題を扱うグループ」にチェックを入れてから、送信してください。このフラグが付けられたバグはスタッフと信頼できる貢献者の方々とあなたにしか見えなくなります。 -

もし、報告されたセキュリティバグが既にBugzilla-orgで公開されているものだったり、危険の無いものであった場合、スタッフによって通常の公開されたバグに変更されます。ですから、どちらか判断できない場合、セキュリティバグとして報告してもらった方が問題ありません。 -

あなたが同時にBugzilla-orgにも同一の内容を報告した場合、そのバグIDも報告してください。また、スタッフからそのバグのCCへの追加要請があった場合、対応をお願いします。 -

diff --git a/files/ja/bugzilla-jp/guide/report/uibugs/index.html b/files/ja/bugzilla-jp/guide/report/uibugs/index.html deleted file mode 100644 index c469d5929b..0000000000 --- a/files/ja/bugzilla-jp/guide/report/uibugs/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: UIBugs -slug: Bugzilla-jp/Guide/Report/UIBugs ---- -

-

-

ユーザインターフェースに関するバグを報告する

-

ユーザインターフェース(以下、UI)に関するバグは、いわゆるバグと、こうあるべきだという要望の二種類に分けて考えた場合、圧倒的に要望が多く寄せられるものです。ですが、UIに関する要望を行うことは原則的にやめてください。特に、既存の動作と賛否両論が分かれるような要望は受け付けられません。 -

何故かと言うと、現在のMozilla関連製品は全て「独裁的な」開発体制によってUIの仕様が決定されています。これは過去に様々な要望を取り込む「民主的な」開発体制で失敗した経験を持っているためです。 -

Bugzilla-orgではUIに関する議論も行われていますが、これはBugzilla-jpという"架け橋"ではできないことです。つまり、UIに関して議論が行いたい場合、Bugzilla-jpという場は良い場ではありません。 -

また、この開発体制が全ての人の要望を満たすことができない、という事実に対する回答として「拡張機能(アドオン)」という仕組みが整備されました。UI仕様に対して要望がある場合、まずは拡張機能での開発を検討してください。それが適さない場合には報告していただいてもかまいませんが、そのバグはあなたがリーダーシップを発揮して、Bugzilla-orgと連携をとる必要があります。つまり、自分で開発できない場合、要望をBugzilla-jpに報告することはできません。 -

要望ではないバグを見つけた場合は、是非その現象を報告してください。報告の際にはその再現手順、実際の挙動、そしてあるべき挙動を事細かく、あなたにとって、「くどい」ぐらいに細かく報告してください。意外とUIの挙動のバグ報告というのは難しいものです。それを実感するには -bug 4102は良い例かもしれません。 -

また、それがバグであるという根拠も論理的に説明してください。例えば、そのOSの他のアプリケーションとは挙動や表示が異なっているというのは良い根拠です(それが意図的な結果であることもありますが)。 -

diff --git a/files/ja/bugzilla-jp/guide/search/advanced/index.html b/files/ja/bugzilla-jp/guide/search/advanced/index.html deleted file mode 100644 index ced7b16734..0000000000 --- a/files/ja/bugzilla-jp/guide/search/advanced/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Advanced -slug: Bugzilla-jp/Guide/Search/Advanced ---- -

詳細な検索

-

Bugzillaというシステムに慣れてくると、簡単な検索に不便を感じるかもしれません。そのために、Bugzillaにはより詳細に検索することができる、「高度な検索」が用意されています。簡易検索の画面の右上にある、「高度な検索」というリンクで移動するとその画面が表示されます。

-

「高度な検索」を開くと、非常に多くの項目が表示されるでしょう。この検索画面を使うにはBugzillaと、Bugzilla-jpの基本的なことが分かっていなければいけません。そのため、基本的な各項目の説明は省略し、いくつかの注意点のみを紹介することにします。

-

キーワード

-

キーワードを用いた検索は通常の文字列検索とは異なります。キーワードは予めスタッフによって定義されたもののみで、この定義に無い文字列で検索することはできません。

-

例えば、"html"というキーワードの付いたバグを検索するために"ht"と入力してもエラーが表示されるだけで、検索することはできません。

-

リストで選択できる項目

-

プロダクト、コンポーネント、バージョン、ターゲットマイルストーン、ステータス、処理方法、深刻度、優先順位、ハードウェア、OS、そして「Bug の変更」にあるリストボックスは全て、複数項目を同時に選択することができます。

-

ひとつのリストボックス内で複数選択した場合、それらのうちのいずれかを含むバグが検索対象となります。

-

Bugの変更の期間入力方法

-

特定の期間になんらかの変更のあったバグを検索するのに便利な機能です。

-

YYYY-MM-DD形式以外にも、相対日数が入力可能となっていますが、 その説明が通常の画面にはなく、分かりにくいのでここに説明文を引用しておきます。

-
- 開始・終了日時を、YYYY-MM-DD 形式 (オプションで HH:mm 形式の24時間制の時刻をつけられます) もしくは、1h, 2d, 3w, 4m, 5y といった相対時間で指定してください。 それぞれ、時間、日、週、月、年を示します。0d は直前の真夜中、 0h, 0w, 0m, 0y もそれぞれの開始時を示します。
-
-

もし、この説明を読んでも入力項目において何か分からないことがあるなら、要約の入力欄の左上にある、「ヘルプをつける」というリンクでフォームを再読込すると良いかもしれません。このモードになると、マウスが各項目の上に移動した際に、その項目の簡単な説明がポップアップ表示されます。

-

また、最後にあるブーリアンチャートを使った高度な検索は非常に特殊で、通常の利用者はまずこれを利用する必要はありません。ですので、これに関する説明はこのドキュメントでは行いません。

diff --git a/files/ja/bugzilla-jp/guide/search/hints/index.html b/files/ja/bugzilla-jp/guide/search/hints/index.html deleted file mode 100644 index 9532ffdd55..0000000000 --- a/files/ja/bugzilla-jp/guide/search/hints/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Hints -slug: Bugzilla-jp/Guide/Search/Hints ---- -

-

-

検索のコツ

-

検索をスムーズに行うには、Bugzilla-jp内で用いられる様々なルールを知っておく必要があります。最初は検索が期待通りにできないかもしれませんが、バグの件数がそれほど多い訳ではないので、以下に挙げる例を利用すればそれなりに検索可能なのではないかと思います。 -

-

未解決のバグを探しても見つからない場合は修正済みのものを探す

-

最新の製品版を使っていて遭遇する場合なのに、未修正のバグを検索しても出てこない、そういう場合は既に開発版では修正が終わっている、つまりバグは閉じられている可能性があります。こういう場合には修正済みのバグを探すしかありません(簡易検索なら「CLOSED」)。 -

Bugzilla-jpでは製品版が最新版であるということは絶対にあり得ません。製品版がリリースされる時には開発版は既にその先を行っているからです。詳しくは開発サイクルに関するドキュメントも読んでおくと良いでしょう。 -

-

製品のバグを探す場合、「Core」も調べる

-

Firefoxのバグを調べようとした時に、プロダクトを「Firefox」のみにすると、表示に関わる問題や、IMEに絡んだ問題等が全く出てこないことも少なくありません。 -

なぜなら、Bugzilla-jpでは複数の製品、例えばFirefoxでもThunderbird -でも発生するバグは「Core」プロダクトで管理しているためです。 -

簡易検索の場合はプロダクトを「All」にし、詳細検索の場合は「Core」も選択するようにしましょう。 -

-

用語の語尾を伸ばさない

-

技術用語では語尾が長音の場合、表記では長音符号「ー」を削除してしまう慣例があります。例えば、"Server"は、「サーバー」ではなく、「サーバ」として表記されます。 -

語尾の長音符号を削除して検索すると、語尾に長音符号がついていてもヒットするようになるで、検索の際には削除しましょう。 -

-

全角の英数字、半角のカタカナは使用しない

-

Bugzilla-jpでは基本的にこれらの文字は使用されていません。これらの文字で検索を行っても期待通りの結果は得られないでしょう。 -

-

詳細検索では一部の項目は信用しない

-

Bugzilla-jpでは、バグの症状に対して一定の基準を持って設定を行っていますが、明確な場合を除き、どうしてもスタッフの主観が入ってくることがあります。 -

例えば、「深刻度」と「優先順位」は検索のキーワードとしては信用できるものではありません。また、設定が不適切だったり、忘れられたりすることの多い、「バージョン」と「ターゲットマイルストーン」も信頼できません。 -

これらの項目での絞り込みはやめておく方が良いでしょう。 -

-

詳細検索を使って、キーワードとステータスのみで検索する

-

Bugzilla-jpでは特定のジャンルのバグや、表記揺れが激しいものについてはキーワードを予め用意しています。 -

詳細検索でキーワードと、ステータス、もしくは処理方法の指定のみで検索を行うとそのキーワードのついたバグが全て列挙されます。Bugzilla-jpにあるバグの数はそれほど多くないので、そのリストから目的のバグを見つけることができるかもしれません。 -

-

メタバグを利用する

-

メタバグとは複数のバグに対するリンクを持った(具体的には複数のバグに依存している)バグです。これは特定のジャンルのバグを管理する際に作成され、キーワードに必ずmetaが指定されています。メタバグの一覧は、Bugzilla-jpのトップページにある「メタバグ一覧」を参照してください。 -

あなたの手助けとなるメタバグを発見した場合、そのバグで「依存ツリーを表示」というリンクで移動すると、そのメタバグに関連したバグが一覧で表示されるようになっています。メタバグのコメントにあるバグへのURIは情報が古いかもしれないので無視した方が良いでしょう。 -

diff --git a/files/ja/bugzilla-jp/guide/search/index.html b/files/ja/bugzilla-jp/guide/search/index.html deleted file mode 100644 index 17c93374b8..0000000000 --- a/files/ja/bugzilla-jp/guide/search/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Search -slug: Bugzilla-jp/Guide/Search ---- -

バグの情報を探す

-

Bugzilla-jpに既に登録されているバグを検索し、参照することができます。バグを検索するには、Bugzilla-jp内のページのフッタ部分にある、「検索」というリンクから検索用の画面に移動します。

-

検索には簡単にバグを検索する「特定の Bug を検索」というモードと、 ステータス等から高度に絞り込みを行う「高度な検索」の二種類があります。最初は「特定の Bug を検索」で十分かもしれませんが、Bugzillaのシステムに慣れてくると「高度な検索」の方が使いやすいかもしれません。

-

バグを検索することによってどのような情報が得られるのか、また、実際に検索結果を参照する際にバグの状態について意味が分からない場合は、バグの詳細情報やプロダクトとコンポーネントやバグのライフサイクルを参照してください。

diff --git a/files/ja/bugzilla-jp/guide/search/simple/index.html b/files/ja/bugzilla-jp/guide/search/simple/index.html deleted file mode 100644 index 832b6e7f36..0000000000 --- a/files/ja/bugzilla-jp/guide/search/simple/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Simple -slug: Bugzilla-jp/Guide/Search/Simple ---- -

簡単な検索

-

Bugzilla-jp でバグを検索しようとすると、まずは「特定の Bug を検索」という画面が表示されます。これは以下のスクリーンショットから分かるように、とてもシンプルなものです。

-

簡易検索画面のスクリーンショット

-

ステータス

-

ステータスのドロップダウンリストには Open、Close、All の三種類が用意されています。

-

Open の場合、 UNCONFIRMED、NEW、ASSIGNED、 REOPENED のバグが検索対象となります。これらのバグはまだ解決されていなかったり、結論が出ていない、"生きている"バグです。

-

Closedの場合、Open以外の既に閉じられたバグが検索対象となります。具体的には RESOLVED と、VERIFIED、そしてごく初期にのみ使われていた CLOSED のバグです。

-

All の場合、全てのバグが検索対象となります。

-

プロダクト

-

プロダクトはどの製品のバグを対象とするのかを選択します。基本的には初期値の All で全てのプロダクトを対象としたままで検索した方が良いでしょう。例えば Firefox についてのバグを調べたい場合、そのバグの種類によって、Firefox 以外に Core となっている可能性があります。

-

何故このような一見すると不便な仕様になっているのかというと、Mozilla 製品は全ての製品で共通しているコードが非常に多く、これらのバグを製品ごとに管理していたのでは同じバグを複数のプロダクトで管理しなくてはいけなくなるためです。

-

しかし、All の場合、検索結果に TestProduct が含まれてしまいます。これは練習投稿や、Bugzilla-jp 自体のテストに利用されているものですので無視してください。この中に有益な情報は存在しません。

-

複数のプロダクトに対して同時に検索を行う必要がある場合には、詳細な検索を利用するしかありませんが、残念ながら手軽に使えるというものではありません。

-

All では効率悪いし、詳細な検索は使い方が分からない、という場合には、 目的のプロダクトと Core で二回に分けて検索を行うしかありません。

-

検索語

-

検索したい単語を半角スペースで区切り、入力します。 検索対象はバグの要約と、バグに付けられているコメント全文です。複数の単語を入力している場合は、いずれかの単語を含むバグが出てきます。

-

半角英字の大文字小文字は区別されませんが、ひらがな、カタカナといった日本語固有の曖昧さは全て別の文字として検索されます。

-
-

これだけの情報ではきっと、どういった言葉を検索して良いのか分からないかもしれません。あわせて、検索のコツについても目を通しておくと良いかもしれません。

diff --git a/files/ja/bugzilla-jp/guide/tracking/index.html b/files/ja/bugzilla-jp/guide/tracking/index.html deleted file mode 100644 index b3c17bb4eb..0000000000 --- a/files/ja/bugzilla-jp/guide/tracking/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Tracking -slug: Bugzilla-jp/Guide/Tracking ---- -

バグを追跡する

-

Bugzillaではバグ毎に、メールによって変更通知を逐一受け取ることができます。

-

バグのCCリストに自分のアカウントを追加する

-

まず、Bugzilla-jpにログインして、追跡したいバグを表示します。バグのコメント追加欄のすぐ下に「XXXX<YYY@ZZZ> を CC に追加する」というチェックボックスがあるので、これにチェックを入っていることを確認し、追加コメントは何も書かずにそのまま「Commit」ボタンを押します。そうすると、あなたのアカウントがそのバグのCCに加えられ、以降、そのバグに何か変更があった場合にあなたのメールアドレスにメールが配信されます。

-

バグの追跡を中止する

-

バグの追跡を中止したい場合、ログイン後、そのバグを表示します。そして、「CC:」のリストの中からあなたのアカウントを選択し、そのリストのすぐ下にある「選択された CC を削除」というチェックボックスにチェックを入れ、追加コメントは何も書かずにそのまま「Commit」ボタンを押してください。

-

受け取りたくないメールが配信されてくる

-

バグを追跡していると、デフォルト設定のままでは、あなたにとっては些細な変更の度にメールが配信されてくるかもしれません。その場合、Bugzilla-jpのフッタにある「環境」の「メール設定」からメールの配信条件を編集することができます。詳細は メールの送信設定を変更するを参考にしてください。

-

コンポーネントの全てのバグを追跡する

-

Bugzilla-jpではQAコンタクトにメタアカウントと呼ばれる特殊なアカウントを割り当てています。メタアカウントは最後が".bugs"で終わる、本来あり得ないメールアドレスになっています。つまり、メタアカウントは特定の個人のためのアカウントではありません。これをあなたのアカウントで監視することで、特定のコンポーネントのバグを全て追跡することが可能です。

diff --git a/files/ja/bugzilla-jp/index.html b/files/ja/bugzilla-jp/index.html deleted file mode 100644 index 58f2ab557d..0000000000 --- a/files/ja/bugzilla-jp/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Bugzilla-jp -slug: Bugzilla-jp -tags: - - Bugzilla-jp - - Developing Mozilla - - 開発文書 ---- -

-

-

Bugzilla-jp

-

Bugzilla-jp関連コンテンツ -

-
  1. はじめてのバグジラ -
  2. Bugzilla-ja -
diff --git a/files/ja/building_a_mozilla_distribution/index.html b/files/ja/building_a_mozilla_distribution/index.html deleted file mode 100644 index ec60cdfc12..0000000000 --- a/files/ja/building_a_mozilla_distribution/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Building a Mozilla Distribution -slug: Building_a_Mozilla_Distribution -tags: - - Build documentation - - Developing Mozilla ---- -

-

ここでは、どうやって独自のマイルストーンビルドまたは他のディストリビューションを作るのかを説明します。独自のディストリビューシュンを作成したいというのは以下のような場合が考えられます。我々の ftp サイトに通常は置かれていないプラットフォーム用のビルドを作りたいとか、標準のビルドではサポートされていない機能を有効にしたい、などです。 -

-
    -
  1. -専用のマイルストーンソースの tar ボールをダウンロードし、自分用の通常のツリーからではなく、その tar ボールからビルドしてください。もし tar ボールがみつからない場合には、マイルストーンディレクトリの README ファイルに CVS でどうやって適切なソースを持ってくることができるかが書いてあります。必ず正しい タグ を持ってくるようにしてください。例えば次のようにします。 
    cvs co -r MOZILLA_1_0_2_RELEASE mozilla/client.mk
-cd mozilla
-gmake -f client.mk checkout
-
    -
    2. -
  2. -ビルドオプションを次のように設定します：デバッグシンボルを無効にする、コードを最適化する、ビルドの日付 (Bugzilla で使っているもの) を設定する、その他については適宜選択してください。 -
    3. -
  3. -作成したビルドの動作確認テストをしてください。この際、アプリケーションの右端の下あたりにある BuildID を必ずメモしてください。 BuildID は 2001102513 のようなもので、パッケージをビルドした日時を表しています。 -
    4. -
  4. -README ファイルを作り、以下のような項目についてできる限り記述してください。
    • 連絡先。これには自分の Bugzilla ID を入れてください。こうしておけば、あるパッケージに特有の問題を発見した人がそのバグについてパケージ作成者に連絡できるようになります。 -
    • BuildID -
    • ライブラリの依存関係。 -
    • ビルド作成時に使用にしたオプション一覧。 -
    • ビルド時に有効 (あるいは無効) にした非標準のも のなんでも。例えば、適用したパッチやそのパッチへのリンクなどです。 -
    -
    5. -
  5. -tar ボールをどこかに公開し、こちらに連絡をください。そうすれば私達が tar ボールを ftp サイトに移します。 さらに、tar ボール用の md5 checksum ファイルを作っておくとよ いでしょう。作成した md5sum ファイルに電子署名をしておくと さらによいでしょう。 
    md5sum mozilla-i686-pc-linux-gnu-0.9.5.tar.gz
-       > mozilla-i686-pc-linux-gnu-0.9.5.tar.gz.md5sum
-
    -
    6. -
-

ディストリビューションを作成する

-

ビルド方法 と Unix Build Configurator の使い方に慣れておくと、mozconfig ファイルの作成に役立ちます。 -

-

ソースをダウンロードしてください

-

最新のマイルストーンソースの tar ボールを ダウンロード してください。または、最新のマイルストーンの README ファイルに書いてある方法に従って、CVS から tag でもってきてください。(独自のツリーでコードからディストリビューションを作成した場合には、おそらく、最初に gmake -f client.mk distclean をする必要があります。) -

-

ビルド環境を設定してください

-

tar ボールから作成されたツリーにファイルを作り mozilla/.mozconfig としてください。以下にあげるようなオプションを付けるとディストリビューションのサイズを小さくすることができます。<tt>--disable-debug</tt> オプションはとても重要です。これを指定しないとパッケージが 50MB あるいはそれ以上になってしまいます。パッケージのサイズは通常 10MB くらいです。<tt>--enable-optimize</tt> オプションを付けるとコンパイラは最適化されたバイナリを作成します。オフィシャルビルドでは有効になっていない SVG などの他のオプションは適宜選択してください。 -

ビルドしているバイナリがさまざまなシステムに配布される予定であったり、実行時にリンクする共通ライブラリと全く同一のライブラリ一式がビルドしているバイナリに含まれていない場合には、Mozilla の zlib や jpeg のライブラリをビルドして配布するようにするといいでしょう。 -

-
ac_add_options --disable-tests
-ac_add_options --disable-debug
-ac_add_options --enable-optimize
-ac_add_options --without-system-nspr
-ac_add_options --without-system-zlib
-ac_add_options --without-system-jpeg
-ac_add_options --without-system-png
-ac_add_options --without-system-mng
-ac_add_options --enable-crypto #PSM/SSL のサポートを無効にするにはこの行をコメントアウトする
-
-

以下の環境変数を設定してください。ビルドの日付が正確になります。 -

Unix または Mac OS X の場合: -

-
MOZILLA_OFFICIAL=1
-export MOZILLA_OFFICIAL
-BUILD_OFFICIAL=1
-export BUILD_OFFICIAL
-
-

Win32 の場合: -

-
set MOZILLA_OFFICIAL=1
-set BUILD_OFFICIAL=1
-
-

ツリーをビルドしてください

-

普段使う build コマンドは、マイルストーンビルドをコンパイルするのに決して使わないでください。CVS アップデートをしたいわけではないのです。ツリーと同期をとってしまうと最新版からビルドしていることになり、マイルストーンビルドではなくなってしまいます。 -

-
gmake -f client.mk build
-
-

README ファイルを添えてください

-

README ファイルを mozilla/dist/bin にコピーしてください。こうすれば、次のステップで作成される tar ボールに README ファイルが含まれるようになります。ldd のある UNIX の場合には、以下のコマンドを実行し UNIX ビルド用の依存関係一覧を作成してください。 -

-
ldd mozilla-bin components/*.so | awk '{ if (/=/ && !/not found/ ) print $3 }' | sort | uniq
-
-

If using tcsh, you may need to escape the ! . -

-

パッケージを作成してください

-
tar ボール( または zip や dmg) を作るには
-

packager ディレクトリにある makefile でパッケージのディレクトリに tar ボールを作成します。パッケージは mozilla/dist に配置されます。 -

OS/2 と Win32 用のビルドの場合、デフォルトのパッケージタイプは zip です。Mac OS X 用の場合、デフォルトのパッケージタイプは dmg です。その他のビルドの場合には、デフォルトのタイプは tar.gz です。 -

-
gmake -C mozilla/xpinstall/packager
-
-
UNIX のインストーラを作るには
-

UNIX インストーラをビルドするには、カレントディレクトリを xpinstall builder に変更し perl スクリプトを実行してください。すると mozilla/installer に mozilla-$platform$-installer.exe が作成されます。 -

-
cd mozilla/xpinstall/packager/unix/
-perl deliver.pl <version> <urlpath> <stubname> <blobname>
-</blobname></stubname></urlpath></version>
-
-
Win32 のインストーラを作るには
-

以下のものが必要になります: -

- -

Win32 インストーラをビルドするには、カレントディレクトリを xpinstall builder に変更し perl のスクリプトを実行してください。すると mozilla\dist\install に mozilla-win32-installer.exe が作成されます。 -

-
cd mozilla\xpinstall\wizard\windows\builder
-perl build.pl
-
-

テスト

-

パッケージの動作確認テストをしてください。スモークテスト はこのテストのために設計されています。 -

-

配布

-

tar ボールをどこかに公開し、こちらに連絡をください。そうすれば私達が tar ボールを ftp サイトに移します。連絡してほしい項目は、BuildID およびビルド環境について有益だと思われることなんでもです。例えば、OS のバージョン、ディストリビューションの名前、含まれているオプションコンポーネント、または、非標準のコンパイラを使ったかどうか、などです。

各パッケージには必ず README ファイルを添 えてください。 -

-
-

原文書の情報

- -
-
-
-{{ languages( { "en": "en/Building_a_Mozilla_Distribution" } ) }} diff --git a/files/ja/building_an_extension/index.html b/files/ja/building_an_extension/index.html deleted file mode 100644 index 03b01cfbdd..0000000000 --- a/files/ja/building_an_extension/index.html +++ /dev/null @@ -1,248 +0,0 @@ ---- -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/building_with_vc8_express/index.html b/files/ja/building_with_vc8_express/index.html deleted file mode 100644 index b69868d0d8..0000000000 --- a/files/ja/building_with_vc8_express/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Building with VC8 Express -slug: Building_with_VC8_Express -tags: - - Build documentation - - Developing Mozilla ---- -

-

このページは破棄されました。標準の Windows ビルドに必要な環境は現在、Microsoft Visual C++ バージョン 8 Express Edition が使用されています。 -

-
-
-{{ languages( { "en": "en/Building_with_VC8_Express" } ) }} diff --git a/files/ja/code_snippets/toolbar/index.html b/files/ja/code_snippets/toolbar/index.html deleted file mode 100644 index 7a5020da7a..0000000000 --- a/files/ja/code_snippets/toolbar/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Toolbar -slug: Code_snippets/Toolbar -tags: - - Add-ons - - Extensions ---- -

 

-

 

-

{{ 英語版章題("Adding a toolbar button") }}

-

ツールバーボタンを追加する

-

二つのチュートリアルが参照可能です。

- -

{{ 英語版章題("Adding button by default") }}

-

Adding button by default

-

スタマイズされたツールバーパレット用のツールバーボタンを入れて、あなたの拡張を開発・配布したとしても、デフォルトではボタンは有効になりません。ユーザはボタンをツールバーへドラッグする必要があります。下のコードを利用することで、あなたのボタンが最初のインストールおよび XPI の再起動後にデフォルトで表示されるようにできます。

-
-

ボタンをデフォルトで追加するのは、正しく行うのが非常に難しいという点で、ほぼ間違いなく悪習慣です。ユーザはあなたがボタンを追加したツールバーを非表示にしているかもしれませんし、追加したコードが正常に動作しないようにツールバーをカスタマイズしているかもしれません。

-

Firefox がこの目的に API を提供することに対しては、バグが立てられています。need the bug #

-
-

{{ 英語版章題("Notes") }}

-

メモ

-
    -
  1. このサンプルは、Firefox 独自のものですが、Thunderbird でも正しいノードをターゲットに変更することで動作します。
    2. -
  2. デフォルトでボタンを追加するのは、正しい値とともに追加可能で、あなたの拡張のよく利用される機能に対してである場合だけにしてください。ユーザに限られた UI スペースしかないかもしれないことを考慮し、本当に必要かどうか検討してください。
    3. -
  3. このコードは browser.xul のオーバーレイに含められる必要があります。
    4. -
-

{{ 英語版章題("Example") }}

-

サンプル

-
 try {
-   var firefoxnav = document.getElementById("nav-bar");
-   var curSet = firefoxnav.currentSet;
-   if (curSet.indexOf("my-extension-button") == -1)
-   {
-     var set;
-     // Place the button before the urlbar
-     if (curSet.indexOf("urlbar-container") != -1)
-       set = curSet.replace(/urlbar-container/, "my-extension-button,urlbar-container");
-     else  // at the end
-       set = firefoxnav.currentSet + ",my-extension-button";
-     firefoxnav.setAttribute("currentset", set);
-     firefoxnav.currentSet = set;
-     document.persist("nav-bar", "currentset");
-     // If you don't do the following call, funny things happen
-     try {
-       BrowserToolboxCustomizeDone(true);
-     }
-     catch (e) { }
-   }
- }
- catch(e) { }
-
diff --git a/files/ja/components/index.html b/files/ja/components/index.html deleted file mode 100644 index a40066683c..0000000000 --- a/files/ja/components/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Components -slug: Components -tags: - - Disambiguation ---- - - -

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

- -
 
- -

{{ languages( { "en": "en/Components", "fr": "fr/Components", "ko": "ko/Components" } ) }}

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" } ) }}

diff --git a/files/ja/controlling_dns_prefetching/index.html b/files/ja/controlling_dns_prefetching/index.html deleted file mode 100644 index f6ef54e17d..0000000000 --- a/files/ja/controlling_dns_prefetching/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -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/controlling_spell_checking_in_html_forms/index.html b/files/ja/controlling_spell_checking_in_html_forms/index.html deleted file mode 100644 index 07cdb135ef..0000000000 --- a/files/ja/controlling_spell_checking_in_html_forms/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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/creating_opensearch_plugins_for_firefox/index.html b/files/ja/creating_opensearch_plugins_for_firefox/index.html deleted file mode 100644 index 91cf05bed8..0000000000 --- a/files/ja/creating_opensearch_plugins_for_firefox/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Creating OpenSearch plugins for Firefox -slug: Creating_OpenSearch_plugins_for_Firefox -tags: - - Add-ons - - Search plugins -translation_of: Web/OpenSearch ---- -

OpenSearch

-

Firefox 2 は検索プラグインとして OpenSearch 記述フォーマットをサポートしています。OpenSearch 記述シンタックスを使ったプラグインは IE 7 と Firefox で互換性があります。このため、ウェブでの利用で推奨されたフォーマットです。

-

Firefox は{{ 訳語("検索サジェスト", "search suggestions") }}と SearchForm 要素のような OpenSearch 記述シンタックスに含まれていない追加の検索機能もサポートします。この記事では Firefox 特有の機能をサポートした OpenSearch 互換の検索プラグインの作成にフォーカスをあてていきます。

-

OpenSearch 記述ファイルは検索プラグインの自動検出に書かれているように通知でき、Web ページから検索エンジンを追加するに書かれているようにプログラム的にインストールできます。

-

OpenSearch 記述ファイル

-

検索エンジンを記述した XML ファイルはとてもシンプルで、以下の基本的なテンプレートに従います。あなたが書いている検索エンジンに応じて、斜体になっている箇所をカスタマイズする必要があります。

-
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
-                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
-<ShortName>engineName</ShortName>
-<Description>engineDescription</Description>
-<InputEncoding>inputEncoding</InputEncoding>
-<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
-<Url type="text/html" method="method" template="searchURL">
-  <Param name="paramName1" value="paramValue1"/>
-  ...
-  <Param name="paramNameN" value="paramValueN"/>
-</Url>
-<Url type="application/x-suggestions+json" template="suggestionURL"/>
-<moz:SearchForm>searchFormURL</moz:SearchForm>
-</OpenSearchDescription>
-
-
-
- ShortName
-
- 検索エンジンの短い名前。
-
-
-
- Description
-
- 検索エンジンの簡単な説明。
-
-
-
- InputEncoding
-
- 検索エンジンがデータの入力に使っているエンコーディング。
-
-
-
- Image
-
- 検索エンジンを表す Base-64 でエンコードされた 16x16 のアイコン。ここに置くためのデータを作成するのに使える便利なツールの一つはここで見付かります: The data: URI kitchen。
-
-
-
- Url
-
- 検索に使う 1 つまたは複数の URL を記述します。method 属性は結果を得るために GET と POST リクエストのどちらを使うか指定します。template 属性は検索クエリのベースとなる URL を指定します。
-
-
- 注意: Internet Explorer 7 は POST リクエストをサポートしていません。
-
-
-
-
- Firefox がサポートしている URL タイプは 2 つです:
-
- -
-
- どちらの URL のタイプでも、ユーザが検索バーに入力した検索語句に置き換えられる {searchTerms} を使うことができます。サポートしている他の動的な検索パラメータは OpenSearch 1.1 パラメータに記述されています。
-
-
-
- 検索サジェストのクエリに指定された URL のテンプレートは JavaScript Object Notation (JSON) フォーマットで補完リストを取得するために使われます。サーバ上で検索サジェストのサポートを実装する方法の詳細は 検索プラグインでの検索サジェストのサポートを見てください。
-
-

Image:SearchSuggestionSample.png

-
-
- Param
-
- 検索クエリともに通過させるために必要なキー/値のペアのパラメータです。この値を指定する際にはユーザが検索バーに入力した検索語句を挿入するための {searchTerms} を使うことができます。
-
-
- 注意: Internet Explorer 7 はこの要素をサポートしていません。
-
-
-
-
- SearchForm
-
- プラグインのサイトの検索ページを開くための URL。これは Firefox にユーザが直接 Web サイトを訪れる方法を提供します。
-
-
- 注意: この要素は Firefox 特有で OpenSearch 仕様の一部ではないため、この要素をサポートしていない他のユーザエージェントが安全に無視できるようにするために、上の例では "moz:" XML 名前空間接頭辞を使っています。
-
-
-

検索プラグインの{{ 訳語("自動検出", "Autodiscovery") }}

-

検索プラグインを提供しているウェブサイトは Firefox ユーザがプラグインを簡単にダウンロードしてインストールできるように通知することができます。

-

自動検出をサポートするには、ウェブページの <HEAD> セクションに単に一行追加するだけです。

-
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
-
-

斜体の項目を以下で説明されているように置き換えてください。

-
-
- searchTitle
-
- "MDC を検索" や 'Yahoo! 検索" のような実行する検索の名前です。この値は、プラグインファイルの ShortName と一致させる必要があります。
-
-
-
- pluginURL
-
- ブラウザがダウンロードできる XML 検索プラグインの URL です。
-
-

もしあなたのサイトが複数の検索プラグインを提供しているなら、それら全ての自動検出をサポートすることができます。例:

-
<link rel="search" type="application/opensearchdescription+xml" title="MySite: 著者" href="http://www.mysite.com/mysiteauthor.xml">
-<link rel="search" type="application/opensearchdescription+xml" title="MySite: タイトル" href="http://www.mysite.com/mysitetitle.xml">
-
-

この方法であなたのサイトは著者による検索とタイトルによる検索を行うプラグインを別々のものとしてを提供することができます。

-

トラブルシューティングのヒント

-

検索プラグインの XML に問題があると、検出されたプラグインを Firefox 2 に追加する際にエラーが発生するでしょう。エラーメッセージは完全な参考になるわけではありません、しかし、以下のヒントが問題を探す手助けになるでしょう。

- -

ファイルを Firefox に直接読みこませることによって確認できます。テンプレート URL の中のアンパサンド(&)は &amp; でエスケープされている必要があり、タグは最後のスラッシュか一致する終了タグで閉じられている必要があります。

- -


- さらに、検索プラグインサービスはプラグイン開発者が使うであろうログの仕組みを提供します。about:config を使い 'browser.search.log' を true にしてください。検索プラグインが追加されるとログ情報が Firefox のエラーコンソール(ツール -> エラーコンソール)に表示されます。

-

参考資料

- diff --git a/files/ja/creating_toolbar_buttons/index.html b/files/ja/creating_toolbar_buttons/index.html deleted file mode 100644 index 01d73d198e..0000000000 --- a/files/ja/creating_toolbar_buttons/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Creating toolbar buttons -slug: Creating_toolbar_buttons -tags: - - Add-ons - - Extensions ---- -

 

-

この記事ではツールキットアプリケーション（Firefox、Thunderbird、Nvu など）に オーバレイ を使用してツールバーボタンを追加する方法を説明します。XUL と CSS の基礎知識を備えた 拡張機能 の開発者が対象です。

-

また、Firefox の拡張機能の作り方の基礎に通じており、Hello World 拡張機能 を動作させられることも前提です。別のチュートリアルも 利用可能 です。そちらは全体の過程を最初から見ていく形式です。

-

オーバレイの作成

-

はじめに、機能を強化させたいツールバーを含む文書への オーバレイ を作成する必要があります。オーバレイの説明はこのチュートリアルでは扱いません。XUL チュートリアル をご覧ください。

-

文書をオーバレイするには、その文書の URI を知らなければなりません。よくオーバレイされる文書の URI は このページの最後 にあります。

-
- 注意： - - chrome://messenger/content/mailWindowOverlay.xul - にオーバレイする人がいます。これによって mailWindowOverlay.xul が適用されるすべてのウィンドウ（たとえばメインウィンドウやメッセージ表示ウィンドウ）にボタンが現れます。確認してください。
-

ツールバーボタンの追加

-

ツールキットアプリケーションのツールバーはカスタマイズ可能です。そのため、拡張機能の練習として、直接ツールバーにボタンを追加するのではなく、ツールバーボタンをツールバーパレットに追加するというものがよくあります。直接追加することも可能ですが、非推奨であり、実装も面倒です。

-

ツールバーパレットにボタンを追加するのはとても簡単です。このようにこのコードをオーバレイに追加するだけです：

-
<toolbarpalette id="BrowserToolbarPalette">
-  <toolbarbutton id="myextension-button" class="toolbarbutton-1"
-    label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
-    oncommand="MyExtension.onToolbarButtonCommand(event);"/>
-</toolbarpalette>
-
-

注意：

- -
onclick: function(event) {
-  switch(event.button) {
-    case 0:
-      // Left click
-      break;
-    case 1:
-      // Middle click
-      break;
-    case 2:
-      // Right click
-      break;
-  }
-}
-
-

さらにボタンを追加するには、<toolbarbutton> 要素を <toolbarpalette> 要素の内側にさらに追加してください。<toolbarbutton> 以外の要素は <toolbaritem> 内に内包するようにしてください。

-

ボタンの装飾

-

ツールバーボタンのほとんどはアイコンが付いています。ボタンに画像を付けるには Mozilla のスキン機能を使用します。これについてよく知らないのであれば、Jonah Bishop によるすばらしいツールバーチュートリアルのスキンの使用に関するセクション を読んでおくことをお勧めします。その記事ではボタンを作るだけというよりもむしろツールバー全体を作ることを扱っていますが、私たちがここで使うテクニックの説明としてはすばらしいものです。

-

アイコンのサイズ

-

ツールバーボタンは大小 2 種類のサイズを持ちえます。つまり、ツールバーボタンにそれぞれ 2 つのアイコンを持たせる必要があるということです。さまざまなアプリケーションでの大小両方のアイコンの寸法は以下の表のとおりです（他のアプリケーションについての情報もご自由に追加してください【訳註：英語版に追加すべき】）：

- - - - - - - - - - - - - - - - - - -
アプリケーション（テーマ名）大きいアイコンのサイズ小さいアイコンのサイズ
Firefox 1.0 (Winstripe)24x2416x16
Thunderbird 1.0 (Qute)24x2416x16
-

スタイルシート

-

ツールバーボタンに画像を指定するために、以下の CSS ルールを使用してください：

-
/*  skin/toolbar-button.css  */
-
-#myextension-button {
-  list-style-image: url("chrome://myextension/skin/btn_large.png");
-}
-
-toolbar[iconsize="small"] #myextension-button {
-  list-style-image: url("chrome://myextension/skin/btn_small.png");
-}
-
-

スタイルシートの適用

-

作成したスタイルシートをオーバレイファイルと Customize Toolbar ウィンドウの両方に適用するのを忘れないでください。オーバレイファイルに適用するには、この処理命令 (PI) をオーバレイファイルの頭に付けてください：

-
<?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?>
-
-

Customize Toolbar ウィンドウ (<tt>chrome://global/content/customizeToolbar.xul</tt>) に適用するには、以下のような <tt>skin/contents.rdf</tt> を使用することのがよいでしょう：

-
<?xml version="1.0"?>
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
-
-  <Seq about="urn:mozilla:skin:root">
-    <li resource="urn:mozilla:skin:classic/1.0"/>
-  </Seq>
-
-  <Description about="urn:mozilla:skin:classic/1.0">
-    <chrome:packages>
-      <Seq about="urn:mozilla:skin:classic/1.0:packages">
-        <li resource="urn:mozilla:skin:classic/1.0:myextension"/>
-      </Seq>
-    </chrome:packages>
-  </Description>
-
-  <Seq about="urn:mozilla:stylesheets">
-    <li resource="chrome://global/content/customizeToolbar.xul"/>
-  </Seq>
-
-  <Seq about="chrome://global/content/customizeToolbar.xul">
-    <li>chrome://myextension/skin/toolbar-button.css</li>
-  </Seq>
-</RDF>
-
-

Firefox/Thunderbird 1.5 向けの拡張機能では代わりに以下のような chrome.manifest を使用すべきです：

-
skin	myextension	classic/1.0	chrome/skin/
-style	chrome://global/content/customizeToolbar.xul	chrome://myextension/skin/toolbar-button.css
-
-

よくある間違い

-

これは拡張機能作者がよく起こす間違いとその症状、そしてその解決策のリストです。

-

問題点： ツールバー上や Customize Toolbars ウィンドウ内に自分のアイコンではなく、デフォルトのボタン全体が表示される。

-

原因： スタイルシートが正しく記述されていないか、またはスタイルシートが適用されていない。

-

解決法： スタイルシートに誤りがないか、<tt>contents.rdf</tt>（または <tt>chrome.manifest</tt>）に誤りがないかを確認し、確実に <tt>customizeToolbar.xul</tt> に スタイルシートを適用する。

-

よくオーバレイされるツールバーを持つウィンドウのリスト

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
URLアプリケーションと影響のあるウィンドウパレット id
chrome://browser/content/browser.xulFirefox - メインウィンドウBrowserToolbarPalette
chrome://messenger/content/messenger.xulThunderbird - メインウィンドウMailToolbarPalette
chrome://messenger/content/messenger...gercompose.xulThunderbird - 編集ウィンドウMsgComposeToolbarPalette
chrome://messenger/content/addressbo...ddressbook.xulThunderbird - アドレス帳AddressBookToolbarPalette
chrome://editor/content/editor.xulNvu - メインウィンドウNvuToolbarPalette
chrome://calendar/content/calendar.xulSunbird - メインウィンドウcalendarToolbarPalette
-

詳細情報

- diff --git a/files/ja/css-2_quick_reference/all_in_a_page/index.html b/files/ja/css-2_quick_reference/all_in_a_page/index.html deleted file mode 100644 index 9d20688007..0000000000 --- a/files/ja/css-2_quick_reference/all_in_a_page/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -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/css-2_quick_reference/index.html b/files/ja/css-2_quick_reference/index.html deleted file mode 100644 index 7eed5bdf59..0000000000 --- a/files/ja/css-2_quick_reference/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/debnews/index.html b/files/ja/debnews/index.html deleted file mode 100644 index 6af90cc9c0..0000000000 --- a/files/ja/debnews/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: DebNews -slug: DebNews ---- -

 

- -

This page was auto-generated because a user created a sub-page to this page.

- -

 

diff --git a/files/ja/determining_the_dimensions_of_elements/index.html b/files/ja/determining_the_dimensions_of_elements/index.html deleted file mode 100644 index c09e67595e..0000000000 --- a/files/ja/determining_the_dimensions_of_elements/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/developing_add-ons/index.html b/files/ja/developing_add-ons/index.html deleted file mode 100644 index 3fd1d5d376..0000000000 --- a/files/ja/developing_add-ons/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: アドオンを開発する -slug: Developing_add-ons ---- -

Mozilla ベースのソフトウェアはたいていアドオンを通して拡張可能です。アドオンには、拡張機能、プラグイン、テーマの 3 つの主なタイプがあります。このページはFirefox、Thunderbird、あるいは、Mozilla プラットフォームをベースにしたその他のソフトウェア向けのアドオンを作成するために必要となる情報、および、作成したアドオンを配布する方法のガイドを提供します。

- -

アドオンに関するトピックス
アドオンを AMO に提出する
アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。
拡張機能
拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。
プラグイン
Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。
Jetpack
あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。
テーマ
テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。
検索エンジンプラグイン
Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。
addons.mozilla.org (AMO) API Developers' Guide
AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。
Mozilla プラットフォーム
API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。
-

{{ languages( { "en": "en/Developing_add-ons", "zh-cn": "cn/Developing_add-ons"} ) }}

diff --git a/files/ja/developing_mozilla/index.html b/files/ja/developing_mozilla/index.html deleted file mode 100644 index e8cd7049ba..0000000000 --- a/files/ja/developing_mozilla/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Developing Mozilla -slug: Developing_Mozilla -tags: - - Developing Mozilla ---- -

-

バグの修正を手伝いたいけれど、どこから始めたらいいのか分からない? これは獣をハックするためのすべてのスタート地点です。ここでは、ソースの取得方法とそのビルド方法、パッチの作成や、それらを tree にチェックインする方法、その他の Mozilla ハッカーが知らなければならない基本的なことを見つけられるでしょう。 -

- - -
-

ドキュメンテーション

-
mozilla.org のハッキングガイド -
ハッキングに関連する他のページ。 これは作成途中です。 -
-
コードの断片 で Firefox をハッキング -
フロントエンド開発にどのように関わるか。 -
-
Firefox や Thunderbird、その他のアプリケーションのビルド -
このセクションには、Firefox や Thunderbird、その他の Mozilla ベースのアプリケーションをビルド方法についてのドキュメントが含まれています。 -
-
Mozilla の開発戦略 -
Mozilla プロジェクトで効率良く作業するためのヒント。 -
-
開発製品のテスト -
製品をテストするための情報 と テスト自動化ツール。 -
-
デバッグについての FAQ -
デバッグのヒントはプラットフォームごとに異なります。Windows または Linux, Mac OS X のいずれかを選んでください。 -
-
パッチの作成とレビューおよびコミットのために -
パッチの作成と tree に変更を加えるためのヒント。 -
-
Mozilla のソースコードをオンラインで表示、検索する -
Mozilla クロスリファレンス (MXR) システムを利用して、すべての Mozilla 製品のソースコードを表示、検索します。 -
-
Getting commit access to Mozilla source code -
Find out how you can get access to commit changes directly into the source code. -
-

すべて見る... -

-		 -

コミュニティ

- -

ツール

- -

すべて見る... -

-

関連項目

-
品質保証 -
-
-

Categories -

Interwiki Language Links -


-

{{ languages( { "de": "de/Mozilla_entwickeln", "en": "en/Developing_Mozilla", "es": "es/Desarrollando_Mozilla", "fr": "fr/D\u00e9veloppement_de_Mozilla", "pl": "pl/Programowanie_Mozilli", "pt": "pt/Desenvolvimento_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla" } ) }} diff --git a/files/ja/devnews/20060705/index.html b/files/ja/devnews/20060705/index.html deleted file mode 100644 index f8e572fb51..0000000000 --- a/files/ja/devnews/20060705/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: "Firefox 2.0 ベータ 1 は今夜 11:59 (PDT) にコードフリーズします\_!" -slug: DevNews/20060705 -tags: - - DevNews - - 'DevNews:General' ---- -

やあ、みんな。

- -

来週のリリースに向けて今夜{{ 訳注("現地時間, 2006 年 7 月 5 日") }}は Firefox 2.0 ベータ 1 のコードフリーズ、という念のためのお知らせです。私達はここで ベータ 1 の深刻なバグのリストを追跡しています。

- -

私達のパッチの作成とレビューやバグの確認で皆さんの助けを必要としています。もしあなたがブロッカーバグ{{ 訳注("リリースを妨害するほど深刻なバグ") }}リストにやることがある - もしくはコメントやレビューを尋ねられていたら、出来るかぎり早く私達を助けてください。

- -

また、私達は優先的なバグのクエリを 1.8 の Tinderbox ページに追加しました。もしあなたがブロッカーバグのリストでできることがありましたら、手伝ってください。

diff --git a/files/ja/devnews/20060706/index.html b/files/ja/devnews/20060706/index.html deleted file mode 100644 index 94d577d629..0000000000 --- a/files/ja/devnews/20060706/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Firefox 2 ベータ 1 の現状 -slug: DevNews/20060706 -tags: - - DevNews - - 'DevNews:General' ---- -

やあ、みんな。

- -

これを書いている間に JavaScript 1.7 がランドしました。残っている問題はブランドの変更 (BonEcho から Firefox 2) と設定画面のクリーンアップだけです。うまくいけばこれらは今夜ランドされます - 明日早くまでにはランドされます。

- -

最後のチェックインが完了したときの私たちのタイムラインは以下の通りです:

- - - -

リリース候補ができても、入手可能だと公表する前の全ての準備のために最大24時間(ミラーを同期させる時間、他)かかります。

- -

ベータ 1 が小さくなるために私たちの受付窓口が変化します、私たちは本当にベータを妨げるパッチだけを受け入れるだけでしょう。つまり以下のものです。

- - - -

このカテゴリに適当と考えるものが何かありましたら Bugzilla の Flag をブロッキング(blocking‑firefox2?) か 1.8.1 (blocking1.8.1?)を指定して、Bugzilla の Target Milestone を「Firefox 2 beta1」に設定してください。

- -

Beta 2 に含まれるべきブロッキングバグの巨大なリストがあります。CVS ツリーが Beta 1 を片付けたら、私たちはそれらの承認とランドを始めます。

- -

私たちは、必要に応じて 1 日 1 度か 1 日 2 度、優先順位付けの会議をし続けるつもりです。ダイアルイン/IRC は Bon Echo ミーティング(866-216-2181/#bonecho)と同じです。もしあなたが疑問があればいつでも IRC に参加してください。

- -

では。

- -

Schrep

- -

追伸 Beltzner 氏の今日のステータスミーティングの素晴らしい記録に感謝します。:

- -

http://wiki.mozilla.org/Firefox2/Sta...ngs/2006-07-06

- -

詳細を知りたい場合に参照してください。

diff --git a/files/ja/devnews/20060712/index.html b/files/ja/devnews/20060712/index.html deleted file mode 100644 index 39ac2fe5a2..0000000000 --- a/files/ja/devnews/20060712/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Firefox 2 ベータ 1 マイルストーンがリリースされた -slug: DevNews/20060712 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

注意: 私たちは開発者とテスター以外には Firefox 2 ベータ 1 マイルストーンリリースのダウンロードをすすめていません。テスト目的のみを意図しています。

- -

Firefox 2 ベータ 1 はダウンロード可能になりました。これは Firefox 2 に予定された多くの新機能とプラットフォームの変更によってもたらされたコア機能のテストに焦点を当てた開発者向けの 4 番目のマイルストーンです。mozilla.dev.planning や irc.mozilla.org の #bonecho と同じようにでも Firefox 2 の進行中の計画を追いかけることができます。

- -

このマイルストーンのフィードバックが必要な新機能と変更には以下が含まれます。

- - - -

Firefox 2 Beta 1 プロジェクトページはテスタにフィードバックの提供とバグの報告を楽にします。幾つかの言語で Windows と Mac OSX と Linux の Firefox 2 ベータ 1のビルドをダウンロードできます。テスタは既知の問題を知るためにリリースノートを読むべきです。開発者は Mozilla Developer Center の開発者のための Firefox 2 に目を通すべきです。

- -

注意: ダウンロードサイトに直接リンクを張らないでください。かわりに私達はこの Firefox 2 ベータ 1 アナウンスへのリンクを強く勧めます。なぜなら全ての人にこのマイルストーンが何であり、彼らに何が求められ、誰がこの開発段階のテストに参加するためにダウンロードすべきかを知るべきだからです。

diff --git a/files/ja/devnews/20060713/index.html b/files/ja/devnews/20060713/index.html deleted file mode 100644 index 3dd4449c8e..0000000000 --- a/files/ja/devnews/20060713/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: メモ - 今週の金曜日ツリーの閉鎖と土曜日の不稼働時間 -slug: DevNews/20060713 -tags: - - DevNews - - 'DevNews:General' ---- -

こんにちは。

- -

今週の土曜日 CVS と tinderbox 全て、bonsai、lxr、bugzilla は予定された保守期間の間、全て利用できなくなります。

- -

Tinderbox を順番に再始動させるために金曜日の午後 4 時 PDT から全てのツリーが閉じられます。メンテナンス後、全てが復旧し機能し次第、すぐに私たちはそれらを再び開きます。もし疑問がありましたら mozilla.dev.planning を追いかけてください。

diff --git a/files/ja/devnews/20060719/index.html b/files/ja/devnews/20060719/index.html deleted file mode 100644 index 4e59065b28..0000000000 --- a/files/ja/devnews/20060719/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Firefox 2/Gecko 1.8.1 の承認されたバグ -slug: DevNews/20060719 -tags: - - DevNews - - 'DevNews:General' ---- -

Firefox 2 ベータ 2 まで数週間となり最終リリースまで数ヵ月となりました。1.8.1 は昔からの (5 から 7 年前!) 大量のバグの修正を含んでいます。これを書いているときまでに 2300 以下のバグを修正しました (750 以下が Firefox 1.5/Gecko 1.8 以前のものです)。これらの修正全てが Firefox 2.0 をこれまでで最高の Firefox リリースにすることを助けています。

- -

私たちは最終リリースにどんどん迫っており、リリースを本当に妨げる問題に時間を集中するようになりました。これは金曜日 (2006 年 07 月 27 日) から 午前10時 PDT に以下の評価基準の1つにあわない限りリリース選別チームがバグを承認しなくなることを意味します:

- - - -

以下のルールが全てのバグにまだ適用されることに注意してください:

- - - -

これはあなたがこの評価基準にあわないバグかパッチをノミネートすると、それが拒否されるか Bugzilla の Flag が - にされることを意味します。

- -

私たちは mozilla.dev.planning か毎日午前 10 時 PDTのリリース選別に電話で常に議論できます。

diff --git a/files/ja/devnews/20060726/index.html b/files/ja/devnews/20060726/index.html deleted file mode 100644 index ca855ff97c..0000000000 --- a/files/ja/devnews/20060726/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: '20060726' -slug: DevNews/20060726 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性とセキュリティ更新の取組の一環として、Firefox 1.5.0.5 が Windows と Mac 及び Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちは全ての利用者にこの最新リリースに更新することを強く推奨します。この更新はドイツ語、フランス語、スペイン語、日本語、簡体および繁体中国語、韓国語およびそのたの言語を含む 39 の言語で直ちに利用できます。

- -

もしあなたが既に Firefox 1.5 をもっているなら、24 時間から 48 時間以内に自動更新の通知を受けるでしょう。この更新はいつでもヘルプメニューの「更新を確認」を選択して手動で適用できます。また Mozilla Corporation は Firefox 1.0 ユーザにセキュリティと安定性の重要な改善を活かせるように、この Firefox 1.5 最新リリースにアップグレードすることを強く推奨しています。Firefox 1.5 にはユーザが確実に最新のアップデートで常に最新の状態を保てる自動更新機構を含んでいます。

- -

さらなる情報は Firefox 1.5.0.5 のリリースノートを参照してください。

diff --git a/files/ja/devnews/20060802/index.html b/files/ja/devnews/20060802/index.html deleted file mode 100644 index ab4bbe77c7..0000000000 --- a/files/ja/devnews/20060802/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: '20060802' -slug: DevNews/20060802 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Mozilla Corporation の安定性の更新の取組の一環として、Firefox 1.5.0.6 が Windows と Mac 及び Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちは全ての利用者にこの最新リリースに更新することを強く推奨します。この更新はドイツ語、フランス語、スペイン語、日本語、簡体および繁体中国語、韓国語およびそのたの言語を含む 39 の言語で直ちに利用できます。

- -

もしあなたが既に Firefox 1.5 をもっているなら、24 時間から 48 時間以内に自動更新の通知を受けるでしょう。この更新はいつでもヘルプメニューの「ソフトウェアの更新を確認」を選択して手動で適用できます。また Mozilla Corporation は Firefox 1.0 ユーザにセキュリティと安定性の重要な改善を活かせるように、この Firefox 1.5 最新リリースにアップグレードすることを強く推奨しています。Firefox 1.5 はユーザが確実に最新のアップデートで常に最新の状態を保つ自動更新機構を含んでいます。

- -

さらなる情報は Firefox 1.5.0.6 のリリースノートを参照してください。

diff --git a/files/ja/devnews/20060809/index.html b/files/ja/devnews/20060809/index.html deleted file mode 100644 index 4646545be6..0000000000 --- a/files/ja/devnews/20060809/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: 'Bon Echo のスケジュールの更新: Firefox 2 ベータ 2 の新しい日程' -slug: DevNews/20060809 -tags: - - DevNews - - 'DevNews:General' ---- -

8 月 8 日の Bon Echo ステータスミーティングで議論されたように、Gecko 1.8.1 と Firefox 2 のブロッキングに多くのブロッキングバグがリストされているので、私たちは Firefox 2 ベータ 2 を再びずらす以外ありませんでした。本当に、これで最後にしましょう。

- -

新しい日程は:

- - - -

私はこの情報で  を更新しました。さらにリリース候補と最終リリース日へのこれの影響に関していくつかの (たぶん楽観的な) 推測をしました。

- -

私達が直面している現在の“long poles” (では詳細が利用可能です) は:

- - - -

バグにはすべて範囲があり、私たちが今必要としている全ては、以下の形でのサポートと支援です。

- - - -

いつもと同じように、議論とドライバは mozilla.dev.planning ニューズグループと IRC の #bonecho でみつけられます。

diff --git a/files/ja/devnews/20060817/index.html b/files/ja/devnews/20060817/index.html deleted file mode 100644 index eea1d07e70..0000000000 --- a/files/ja/devnews/20060817/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 1.8 ブランチの状況の手短なメモ -slug: DevNews/20060817 -tags: - - DevNews - - 'DevNews:General' ---- -

やあ、みんな、

- -

私たちは ベータ 2 への作業を終えようとしています。結果として 1.8 ブランチは適切に承認をされたベータ 2 のブロッカーバグを除いて閉じられます。私たちが全てのブロッカーバグをランドさせると、私たちは当面の問題が無いかを確認するために 1 日から 2 日ツリーを閉じ、ベータ 2 のためにツリーにタグをつけ、最終テストとベータ 2 リリースのためのビルドの準備をするチェックインのために再び開くつもりです。

diff --git a/files/ja/devnews/20060818/index.html b/files/ja/devnews/20060818/index.html deleted file mode 100644 index 849c7aef96..0000000000 --- a/files/ja/devnews/20060818/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Minefield と Bon Echo のナイトリーの更新が遅れます -slug: DevNews/20060818 -tags: - - DevNews - - 'DevNews:General' ---- -

ナイトリービルドを走らせている人は trunk (Minefiled) やブランチ (Bon Echo) のアップデートがまだ出ていない事に気づいている出しょう。これは提供すべきでないものを提供している tinderbox のためだと判明しています {{ bug(349183) }} を参照)。すぐに修正されるはずです !

- -

更新: ブランチは再び動きだしたようで、実際の所は違う問題でした。しかし依然として trunk には更新がありません

diff --git a/files/ja/devnews/20060821/index.html b/files/ja/devnews/20060821/index.html deleted file mode 100644 index cbdbb286c5..0000000000 --- a/files/ja/devnews/20060821/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Mozilla 1.8 ブランチが Firefox 2 Beta 2 のために閉じられました -slug: DevNews/20060821 -tags: - - DevNews - - 'DevNews:General' ---- -

昨夜、真夜中 (PDT) の直後、MOZILLA_1_8_BRANCH は来る Firefox 2 ベータ 2 リリースのビルド候補のため閉じられました。リリース及び QA チームはリリース候補ビルドでスモークテストを行い、リスピンの引き金となるバグがないか確認しており、ツリーは RC1 チェックインのため明日の午後には開かれる予定です。Mozilla 1.8 Tinderbox ページで最新のツリーの状態とバグリストを確認してください。私たちはここと mozilla.dev.planning でアナウンスをするつもりです。

diff --git a/files/ja/devnews/20060822-02/index.html b/files/ja/devnews/20060822-02/index.html deleted file mode 100644 index 18b83fd834..0000000000 --- a/files/ja/devnews/20060822-02/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Mozilla 1.8 ブランチは承認されたチェックインのために再び開かれました -slug: DevNews/20060822-02 -tags: - - DevNews - - 'DevNews:General' ---- -

1.8 ツリーは RC1 に備えた承認されたチェックインのために再び開かれました。最新のツリーの状態とバグリストを Mozilla 1.8 Tinderbox ページで確認してください。

diff --git a/files/ja/devnews/20060822/index.html b/files/ja/devnews/20060822/index.html deleted file mode 100644 index ce60902bfe..0000000000 --- a/files/ja/devnews/20060822/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: XULRunner 1.8.0.4 セキュリティおよび安定性アップデート -slug: DevNews/20060822 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

XULRunner 1.8.0.4 セキュリティおよび安定性のアップデートが利用可能になりました。このリリースは Mozilla XULRunner アプリケーションフレームワークの安定した開発者向けプレビューです。XULRunner 1.8.0.4 の基礎となる Gecko エンジンは Firefox 1.5.0.4 と一致しています。既存のユーザ全てはアップグレードを推奨されています。詳しい情報はリリースノートを参照してください。

- -

さらに、XULRunnerのこのリリースを準備している間、ビルドチームは XPCOM コンポーネント開発のために公式の Gecko SDK をリリースしました。SDKに関する詳しい情報に関しては、ドキュメンテーションを見てください。

diff --git a/files/ja/devnews/20060823/index.html b/files/ja/devnews/20060823/index.html deleted file mode 100644 index e5e3313590..0000000000 --- a/files/ja/devnews/20060823/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: cvs.mozilla.org の緊急メンテナンスが進行中 -slug: DevNews/20060823 -tags: - - DevNews - - 'DevNews:General' ---- -

更新: 12:12 PDT : サーバは復旧しています。 Update: 12:12 PDT: Server is back up.

- -

先週メインの cvs.mozilla.org サーバがカーネルパニックになりました。初期調査によって迅速なファームウェアのアップグレード行いました。その後、Ops チームは記憶モジュールの 1 つで一時 ECC メモリのエラーを発見しています。彼らは今日そのモジュールの置き換えを試みましたが、きちんと成功しませんでした。現在 (メインハードドライブを除く) マシン全体は正常だとわかっている新しいハードウェアに交換されています。

- -

結果としてそのサーバはこれを書いている間ダウンしています。しかしすぐに復旧するはずです。

- -

通常これらの問題は私たちの定期保守時期に処理されていますが、さらなるクラッシュや不正に対して いかなる危険も冒したいと思いません。

- -

あなたの辛抱に感謝します!

diff --git a/files/ja/devnews/20060825/index.html b/files/ja/devnews/20060825/index.html deleted file mode 100644 index f2799b46c6..0000000000 --- a/files/ja/devnews/20060825/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Schrep と Mozilla の IRC チャットしよう -slug: DevNews/20060825 -tags: - - DevNews - - 'DevNews:General' ---- -

Mozilla に関わっているすばらしいスタッフはたくさんいます。それゆえ皆が何を手がけているか、何が起こっているか遅れずについていくことは難しくなっているかもしれません。そこで古い伝統を復活して Schrep と とても非公式の IRC の Q&A チャットしてみようと思います。これは、以下のようなものについて議論するためにはすばらしい場所でしょう。

- - - -

私はチャットできない人々のために質問をまとめてここ/自分のブログに再び投稿することができます。 2006 年 9 月 1 日(金)

- -

午前11時 午後 1 時 PDT、#mozillazine で試してみましょう。

diff --git a/files/ja/devnews/20060828/index.html b/files/ja/devnews/20060828/index.html deleted file mode 100644 index e7341894bd..0000000000 --- a/files/ja/devnews/20060828/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Firefox 2/Gecko 1.8.1 の承認されたバグ -slug: DevNews/20060828 -tags: - - DevNews - - 'DevNews:General' ---- -

私たちは Firefox 2 ベータ 2 最終リリースのごく近くまでやってきました。Gecko 1.8.1/Firefox 2 は昔からの (あるものは 6 年前!) バグの修正を大量に含んでいます。これを書いているときまでに 3300 にものぼるバグを修正しました。私たちは最終リリースに迫っており、リリースを本当に妨げる問題に時間を集中するようになりました。これは以下の評価基準の1つにあわない限りリリース選別チームがバグを承認しなくなることを意味します:

- - - -

以下のルールが全てのバグにまだ適用されることに注意してください:

- - - -

これはあなたがこの評価基準にあわないバグかパッチをノミネートする と、それが拒否されるか Bugzilla の Flag が - にされることを意味します。

- -

私たちは mozilla.dev.planning か毎日午前 10 時 PDT のリリース選別の電話で常に議論できます。

diff --git a/files/ja/devnews/20061002-02/index.html b/files/ja/devnews/20061002-02/index.html deleted file mode 100644 index fa963c8923..0000000000 --- a/files/ja/devnews/20061002-02/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: '更新: Toorcon で脆弱性の有力な候補が報告された' -slug: DevNews/20061002-02 -tags: - - DevNews - - 'DevNews:General' ---- -

以前言及した JavaScript のセキュリティ問題の有力な候補を報告した、Toorcon の講演者の Mischa Spiegelmock 氏と話す機会を我々は得ました。彼はより多くの動作するコードを我々に与え、この声明を作成し私がここに投稿することに同意しました。

- -
-
私たちの講演の主な目的はユーモラスであることでした。
-
私たちの話の一部として、リモートのコードを実行する結果となるスタックオーバーフローをもたらすことができたと以前知られている Firefox の脆弱性があったと言及しました。しかし私たちが提示したコードは実際にはこれを行いませんでした。私個人はコードの実行を引き起こさせていませんし、それを行った人をだれも知りません。
-
私はこのコードによってクラッシュとシステムリソースを使い果たす以外は何も成功していません。他の誰かのコンピュータを乗っ取り、任意のコードを実行するためには一切それを使用していません。
-
私は 30 個の未公開の Firefox の脆弱性を持っていません。かつて私はこれを主張したこともありません。私は未公開の Firefox の脆弱性を 1 つも持っていません。 私と話していた人がこの主張をしました。私は彼がそれらを持っているかどうか正直分かりません。
-
私はかかわった全ての方に謝罪します。私ができる限り全てを明確にしたと願っています。
-
敬具
-
Mischa Spiegelmock
-
- -

Mischa はコードの実行をできませんでしたが、我々はこの問題を深刻に受け止めています。 我々は調査し続けるつもりです。

- -

-Window Snyder

diff --git a/files/ja/devnews/20061002/index.html b/files/ja/devnews/20061002/index.html deleted file mode 100644 index 2411fb6303..0000000000 --- a/files/ja/devnews/20061002/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Toorcon で脆弱性の有力な候補が報告された -slug: DevNews/20061002 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Security' ---- -

誰かが脆弱性を特定したと言ったとき、我々はそれが脆弱性ではないと確認できるまで本物として扱います。我々はすぐに調査し修正を試み始めます。これは我々がどれだけ早く修正を出荷できるかということです。

- -

今週末 Toorcon で 2 人の講演者が JavaScript VM で脆弱性を発見したと主張しました。当然我々はこれを深刻だと認識しています。

- -

今までのところ、我々は彼らの話の間に得られた情報に基づいてを再現することができました。いくつかの場合これを基にからクラッシュを引き起こします。我々は現時点で持っている情報に基づいて攻撃者がコードを実行できるかどうかを確認できませんでした。私たちはまだ調査しており、更新し続けるつもりです。

- -

-Window Snyder

diff --git a/files/ja/devnews/20061025/index.html b/files/ja/devnews/20061025/index.html deleted file mode 100644 index d0234e658b..0000000000 --- a/files/ja/devnews/20061025/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Firefox 2 がリリースされました! -slug: DevNews/20061025 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Mozilla は Firefox ブラウザのメジャーアップデートである Firefox 2 がたった今利用可能になったことをアナウンスすることを嬉しく思います。この製品は 35 を越える言語で Windows, Mac あるいは Linux オペレーティングシステム向けに www.getfirefox.com からダウンロードできます。私たちは全てのユーザにこの最新リリースにアップグレードすることを勧めます。

- -

Firefox 2 の最新情報

- -
-
ビジュアルリフレッシュ
-
Firefox 2 のテーマとユーザインターフェースはブラウジング体験の親しみやすさを変えることなくユーザビリティを改善しました。
-
組込みフィッシング保護
-
フィッシング保護はユーザが偽造ウェブサイトにであった時に警告し、ホームページに戻ることを提案します。フィッシング保護は標準で機能し、フィッシングサイトを知っているローカルかオンラインのリストでサイトをチェックすることで動作します。フィッシング保護機能が有効な場合、このリストは自動的にダウンロードされ、定期的に更新されます。
-
強化された検索能力
-
Google か Yahoo! あるいは Answers.com を使って、統合された検索ボックスでユーザが入力すると検索候補が表示されます。新しい検索エンジンマネージャは検索エンジンの追加、削除、並べ替えを容易にし、Firefox はユーザがインストールを望んでいるかもしれない新しい検索エンジンを提供しているウェブサイトに出会ったら注意を呼びかけます。
-
改善されたタブブラウズ
-
標準で Firefox は新しいウィンドウではなく新しいタブでリンクを開きます。そしてそれぞれのタブには閉じるボタンがつきました。1 つのウィンドウに収まりきらないタブを開くパワーユーザはタブの間を前後にスクロールするタブストリップの左右の端の矢印をみつけるでしょう。履歴メニューは最近閉じたタブのリストを保持し、誤って閉じられたタブを簡単に開き直しやすくします。
-
ブラウジングセッションを再開
-
セッション復元機能はアプリケーションの更新か拡張のインストールをした時にウィンドウ、タブ、フォームに入力した文字、途中だったダウンロードを復元します。さらにシステムがクラッシュしたときに前回のセッションを再開したいか確認するでしょう。
-
ウェブフィードのプレビューと購読
-
ユーザはウェブフィード (このような) の処理の仕方をウェブサービスかスタンドアローンの RSS リーダで購読させる、あるいはライブブックマークに追加するの中から選ぶことができます。ウェブサービスのオプションとして My Yahoo! と Bloglines, Google Reader が事前に読み込まれていますが、ユーザはフィードを処理するどんなサービスでも追加できます。
-
インラインスペルチェック
-
組込みスペルチェッカによって別のアプリケーションを使うことなくユーザは簡単にウェブフォーム (このような)に入力された文字のスペルをチェックできます。
-
- -

…。さらにもっと。

- -

Mozilla Firefox 2 の完全な概要は Firefox 2 機能概要を、さらなる詳細はリリースノートを読んでください。

- -

アップグレード作業

- -

あなたが既に Firefox 1.5.x を使っているなら、数週間のうちに Firefox 2 へのアップグレードの提案を受け取るでしょう。待ちきれないなら www.getfirefox.com から Firefox 2.0 をいますぐダウンロードできます。

diff --git a/files/ja/devnews/20061106/index.html b/files/ja/devnews/20061106/index.html deleted file mode 100644 index 714f007252..0000000000 --- a/files/ja/devnews/20061106/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Mozilla Toolkit のためのユニットテスト -slug: DevNews/20061106 -tags: - - DevNews - - 'DevNews:General' ---- -

Gecko 1.9 / Firefox 3 企画会議で出た 最重要目標 の一つに、自動試験の実現と、われわれのコードでのテスト容易性の評価があります。将来の目標として、ツールキットモジュールへの全てのチェックインに対する新しいユニットテストのポリシーを立ち上げようとしています。

- -

テストを行うことの重要性

- -

ユニットテストはさまざまな効果をもたらします :

- - - -

このように、統合されたユニットテストには、全ての個々の変更のコストとリスクを小さくする効果があります。これによりプロジェクトは Mozilla 2 に向けた主要なアーキテクチャの向上を速くそして確かなものにできるでしょう。

- -

完全な範囲 (Complete Coverage)

- -

ユニットテストによって目標を達成するためには、新しいコードに対するユニットテストを作成する必要があります。そして、テストは定期的に実行され、結果を開発者向けに公表し修正されるようにしなければなりません。Mozilla においては、クライアントに関するコードの大半のテストをビルドシステムの make check の段階で実行しなければならないことを意味します。そして、その結果を TUnit のように tinderbox へ報告しなければなりません。

- -

わたしは、全ての toolkit コードにおいて完全にユニットテストを実行したいと考えています。そのために、チェックインポリシーに次の項目を追加しようとしています。

- - - -

また、toolkit の古いバグ全てについてボランティアに次のことをお願いします。in-testsuite? か in-testsuite- フラグをもつ FIXED とされたバグに優先順位をつけて、2007 年 3 月 1 日までに適切なテストケースを作成するのを助けてください。これは、意欲的な目標ですが、実現できると考えています。そして Mozilla 2 ブランチに必要とされる前に完全に行うことが重要です。

- -

Robert Sayre はツールキットのユニットテスト管理者として活動することを容認してくれました。もしあなたが開発者で、ユニットテストをどう書くかについてや、どのユニットテストフレームワークが利用可能かについて質問があれば、最初にドキュメントを読んでからコンタクトを取ってください (IRC では sayrer です)。彼にユニットテストを書いてくれ、とは頼まないでください ;-) 。Dave Liebrech (IRC では davel です) もユニットテストフレームワークのデザインと実装について質問に答え、助けになってくれるでしょう。

- -

Review と Testing は相補関係

- -

ユニットテストがレビューの代用品となるわけではないことを明記しておくのは重要でしょう。テストはコードが思ったとおりに動作することを確認するために重要です。レビューは、コードが文書になっており、人間が理解できる形であり、ほかのコードと動くように設計されていることを保障するために重要です。Mozilla では昔からレビュー要求についてはうまく動いており、ユニットテストについても同じような環境を構築したいと考えています。ユニットテストとレビューは相補性にある活動で、われわれのコードを改善し続けるには両方とも必要なものです。

- -

注 : このポリシーに関しての質問や議論は、mozilla.dev.platform ニュースグループ (NNTP か google groups 経由など) にお願いします。

diff --git a/files/ja/devnews/20061107/index.html b/files/ja/devnews/20061107/index.html deleted file mode 100644 index 5aece56536..0000000000 --- a/files/ja/devnews/20061107/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: JavaScript の生みの親であり Mozilla CTO の Brendan Eich との開発者向けチャット -slug: DevNews/20061107 -tags: - - DevNews - - 'DevNews:General' ---- -

更新 : Brendan の今日の開発者向けチャットの特別ゲストは、Kevin Lynch (Adobe のチーフソフトウェアアーキテクト) になりました。Brendan と Kevin は Adobe が オープンソース化 し、Tamarin という新しいプロジェクト名で Mozilla に提供されることになった ActionScript™ Virtual Machine について議論します。もし、Mozilla の JavaScript 実装の将来について興味があるならば、この機会を逃さないでください！

- -

今週火曜日、11 月 7 日の午前 10 時 (PST / UTC-8) に、Brendan Eich と数名の特別ゲストが、Mozilla 2 に導入される刺激的な新技術について開発者向けのチャットを開催します。Brendan の Mozilla 2 ロードマップについての投稿を読んでいないなら、火曜日のチャットに向けて以下の抜粋に目を通してください。

- -
-
Mozilla 2 は、来るべき ECMAScript Edition 4 ("JS2") をサポートした JIT 指向の JavaScript VM （詳細は近日） を備えているだろう。この VM に望ましいものの一つが、conservative でインクリメンタルな garbage collector (GC) だ。うまくいくようであれば、DOM オブジェクトのメモリ管理に、XPCOM のリファレンス・カウンティングではなく、この GC モジュールが使えるだろう。また、conservative なスキャニング・コードは、cycle collection を手助けできるだろう。さらに、JIT が直接 DOM glue code のエントリ・ポイントを呼び出すことができるだろう （JavaScript の mutation がメソッドのプロパティ値を上書きしていない、という前提だが）。そうなれば、XPConnect の、パワフルではあるが相対的に遅い typelib ベースのディスパッチ機構を経由する必要がなくなる。
-
- -

もし、これが興味深く感じたなら、Brendan と議論できるこの機会を失うわけには行きません。火曜日の午前 10 時 (PST / UTC-8) に IRC サーバ irc.mozilla.org の #javascript チャンネルで、この面白いイベントに参加しましょう。

diff --git a/files/ja/devnews/20061108/index.html b/files/ja/devnews/20061108/index.html deleted file mode 100644 index cd8705519e..0000000000 --- a/files/ja/devnews/20061108/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Firefox 1.5.0.8 セキュリティと安定性アップデート -slug: DevNews/20061108 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性とセキュリティーのためのアップデートの一環として、Firefox 1.5.0.8 が Windows, Mac, Linux 向けに提供され、mozilla.com (http://www.mozilla.com/en-US/firefox/all-older.html) から無料でダウンロード可能です。全ての Firefox 1.5.x ユーザにこの最新のリリースにアップグレードすることを強く推奨します。このアップデートは、ドイツ語、フランス語、スペイン語、日本語、簡体字中国語、繁体字中国語、韓国語を含む 37 言語で同時に利用可能です。

- -

注意: Firefox 1.5.0.x はセキュリティーや安定性についてのみ 2007 年 4 月 24 日までアップデートが提供されます。全てのユーザに Firefox 2 (http://www.getfirefox.com) へアップグレードすることを推奨します。

- -

Firefox 1.5 を利用しているなら、24 から 48 時間以内に自動アップデートの通知を受け取るでしょう。これらのアップデートの入手は、ヘルプメニューの「ソフトウェアの更新を確認」から手動で行うことも可能です。Mozilla Corporation は、セキュリティーや安定性の改善の成果を受けるためにも Firefox 1.0 ユーザに最新の Firefox 1.5 へアップグレードすることを推奨します。Firefox 1.5 はユーザが常に最新のアップデート版を利用できるように自動アップデート機能を含んでいます。

- -

より詳細については、Firefox 1.5.0.8 リリースノートを参照してください。 (http://www.mozilla.com/firefox/releases/1.5.0.8.html).

diff --git a/files/ja/devnews/20061114/index.html b/files/ja/devnews/20061114/index.html deleted file mode 100644 index b7c680d9be..0000000000 --- a/files/ja/devnews/20061114/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: アンチフィッシング試験の結果 -slug: DevNews/20061114 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Security' ---- -

現在進めているセキュリティに関する解析と試験についての努力の一環として、SmartWare と契約しフィッシング保護機能の効果について試験しました。Firefox 2 フィッシング保護と IE 7 フィッシングフィルタについて、PhishTank コミュニティーによって評価された既知のフィッシングサイトで試験を行いました。PhishTank をデータソースとして利用したのは、われわれが URL ブロックリストを作成する際に利用しているフィードと完全に独立しているものだからです。IE は警告もしくはブロックを行いますが、この試験の目的を果たすために両方ともをブロックとして取り扱いました。試験をできるだけ公平に行うために、IE と Firefox の試験は最初に試験したブラウザから切り替えて 15 分以内にもうひとつのブラウザで試験した試験用 URL のみを数えました。試験結果は、ここ にあります。

diff --git a/files/ja/devnews/20061129/index.html b/files/ja/devnews/20061129/index.html deleted file mode 100644 index 88ec69581b..0000000000 --- a/files/ja/devnews/20061129/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Gecko 1.9 アルファリリースのためにコードツリークローズ -slug: DevNews/20061129 -tags: - - DevNews - - 'DevNews:General' ---- -

Gecko 1.9 alpha のツリーはたったいまクローズされました。blocking1.9a+ と (bugzilla のステータスホワイトボードに) マークされているバグのみが修正対象となります。これは、いまから数多くリリースされるであろう Gecko 1.9 アルファの最初のリリースで、何か不具合が起こったとしてもパニックにならないでください。6 から 8 週間後(さらに、その後 1 ヵ月から 1 ヵ月半後)には別のアルファがリリースされます。このアルファで修正されるべき小さく重要な問題がありましたら、vlad, bz, schrep もしくは stuart に連絡してください。

- -

明日のある時点で行うビルドが終了し、ツリーが再開されるまでツリーは閉じられたままになります。ビルドについては Developer News blog への投稿でアナウンスがあります。これは、Gecko の初期の試験のためや、ウェブ開発者が既存のビルドでサイトをテストするためを目的とする、コアの Gecko レンダリングエンジンのみのアルファリリースです。Firefox 2 からフロントエンド部分での変更はありません。

diff --git a/files/ja/devnews/20061208/index.html b/files/ja/devnews/20061208/index.html deleted file mode 100644 index 23b1492378..0000000000 --- a/files/ja/devnews/20061208/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Gran Paradiso Alpha 1 がダウンロード可能に -slug: DevNews/20061208 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 1 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期リリースです。Gran Paradiso Alpha 1 はテスト目的でのみ提供されており、ウェブアプリケーション開発者や私達 (Mozilla) のテストコミュニティを対象としています。 現在の Mozilla Firefox のユーザは Gran Paradiso Alpha 1 を利用すべきではありません。Gran Paradiso Alpha 1 のユーザインターフェースには目立った変更はありませんが、コアのレイアウトやレンダリングのかなりの部分が向上されています。今回のリリースは、 Gran Paradiso/Gecko 1.9 で予定されているかなり頻繁なアルファ版リリースの最初のものになります。

- -

より詳細な情報やダウンロード方法については、Gran Paradiso Alpha 1 リリースノートを参照してください。

diff --git a/files/ja/devnews/20061219/index.html b/files/ja/devnews/20061219/index.html deleted file mode 100644 index 934d4eb0d1..0000000000 --- a/files/ja/devnews/20061219/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 'Firefox 1.5.0.9, Firefox 2.0.0.1 と Thunderbird 1.5.0.9 のアップデートが利用可能に' -slug: DevNews/20061219 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性とセキュリティーのためのアップデートの一環として、Firefox 1.5.0.9, Firefox 2.0.0.1 と Thunderbird 1.5.0.9 が Windows, Mac, Linux 向けに提供され、getfirefox.com と getthunderbird.com から無料でダウンロード可能です。

- -

全ての Firefox ユーザにこの最新版へアップグレードすることを推奨します。このアップデートは、スペイン語、日本語、アラビア語、ハンガリー語を含む 37 言語で同時に利用可能になりました。

- -

注意: Firefox 1.5.0.x はセキュリティや安定性についてのみ 2007 年 4 月 24 日までアップデートが提供されます。全てのユーザに Firefox 2 へアップグレードすることを推奨します。Firefox 1.5.0.9 は http://www.mozilla.com/en-US/firefox/all-older.html からダウンロードできます。

- -

Firefox 1.5.x, Firefox 2.0.x や Thunderbird 1.5.x をすでに利用しているなら、24 から 48 時間以内に自動更新の通知を受け取るでしょう。これらのアップデートの入手は、ヘルプメニューの "ソフトウェアの更新を確認" から手動で行うことも可能です。

- -

より詳細な情報については、Firefox 1.5.0.9 リリースノート Firefox 2.0.0.1 リリースノート Thunderbird 1.5.0.9 リリースノート を参照してください。

diff --git a/files/ja/devnews/20070207/index.html b/files/ja/devnews/20070207/index.html deleted file mode 100644 index 94e03da912..0000000000 --- a/files/ja/devnews/20070207/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Gran Paradiso Alpha 2 がダウンロード可能に -slug: DevNews/20070207 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 2 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期リリースです。Gran Paradiso Alpha 2 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達 (Mozilla) のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha2 を使うべきではありません。Gran Paradiso Alpha 2 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

- -

Gran Paradiso Alpha 2 は以下のプラットフォームで利用可能です:

- - - -

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/devnews/20070213/index.html b/files/ja/devnews/20070213/index.html deleted file mode 100644 index 7ce00e0466..0000000000 --- a/files/ja/devnews/20070213/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: いくつかの nsIDOM*Listener インターフェースを削除 -slug: DevNews/20070213 -tags: - - DevNews - - 'DevNews:General' ---- -

次のイベントリスナインターフェースは trunk で削除されます : nsIDOMMutationListener.h, nsIDOMPaintListener.h, nsIDOMScrollListener.h そして nsIDOMPageTransitionListener.h これらは、Gecko では利用されたことはなかったか、これまで長い間利用されないままでした。

- -

もし、これらのインターフェースを現在利用しているなら、コードを通常の DOM の addEventListener() と handleEvent() メソッドを利用するように書き換えてください。

- -

また、seamonkey/dom/public/coreEvents にあるインタフェースはどれも利用すべきではありません。 (Gecko:Obsolete_API)

diff --git a/files/ja/devnews/20070219/index.html b/files/ja/devnews/20070219/index.html deleted file mode 100644 index 11afaae252..0000000000 --- a/files/ja/devnews/20070219/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: 3 月に Mozilla Developer Days を開催 -slug: DevNews/20070219 -tags: - - DevNews - - 'DevNews:General' ---- -

Mozilla は 2 回の developer days を 3 月に Boston と Mountain View で開催します。

- - - -

詳細は wiki を参照してください。そして、興味を持ったならどちらか、もしくは両方に参加してください !

diff --git a/files/ja/devnews/20070223/index.html b/files/ja/devnews/20070223/index.html deleted file mode 100644 index 6495f88777..0000000000 --- a/files/ja/devnews/20070223/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Firefox 2.0.0.2 と Firefox 1.5.0.10 セキュリティ及び安定性アップデート -slug: DevNews/20070223 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性とセキュリティへの取組の一環として Firefox 1.5.0.10 と Firefox 2.0.0.2 が Windows と Mac、Linux で getfirefox.com から無償でダウンロードできるようになりました。

- -

セキュリティの修正が含まれるため私たちは全ての Firefox ユーザに最新のリリースにアップグレードすることを強く勧めます。

- -
注意: Firefox 1.5.0.x のセキュリティと安定性のアップデートがメンテナンスされるのは 2007 年 4 月 24 日までです。全てのユーザに Firefox 2 へアップグレードすることを勧めます。Firefox 1.5.0.10 は http://www.mozilla.com/firefox/all-older.html からダウンロードできます。
- -

もし Firefox 1.5.0.x か Firefox 2.0.0.x を既にもっているなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは今日の遅くから「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

- -

変更点やらさらなる詳細については Firefox 1.5.0.10 リリースノートと Firefox 2.0.0.2 リリースノートを確認してください。

diff --git a/files/ja/devnews/20070302/index.html b/files/ja/devnews/20070302/index.html deleted file mode 100644 index a74d6ad413..0000000000 --- a/files/ja/devnews/20070302/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Thunderbird 1.5.0.10 セキュリティーと安定性のアップデート -slug: DevNews/20070302 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性とセキュリティへの取組の一環として Thunderbird 1.5.0.10 が Windows と Mac、Linux で getthunderbird.com から無償でダウンロードできるようになりました。

- -

セキュリティの修正が含まれるため私たちは全ての Thunderbird ユーザにこの最新のリリースにアップグレードすることを強く勧めます。

- -

もし Thunderbird 1.5.0.x を既に利用しているなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは今日の遅くから「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

- -

変更点やらさらなる詳細については Thunderbird 1.5.0.10 リリースノート を確認してください。

- -

 

diff --git a/files/ja/devnews/20070304/index.html b/files/ja/devnews/20070304/index.html deleted file mode 100644 index 995c578944..0000000000 --- a/files/ja/devnews/20070304/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Firefox 2.0.0.3 と 2.0.0.4 -slug: DevNews/20070304 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

いくつかの重大なリグレッションを修正するために、最近のリグレッションのうちいくつかについての修正を導入した 2.0.0.3 と 1.5.0.11 のリリースを早急に行うことを検討しています。 2.0.0.4 と 1.5.0.12 が次の通常のセキュリティー修正、安定版リリースとなる予定です。

- -

この数日間の間に、以下の条件を基準として、導入する修正の選択を行う予定です。

- - - -

この条件は非常に厳しいものですので、火曜日午後 6 時 PST に確定させられるものと考えており (全ての妨害バグはパッチが提出されている必要があります)、試験のためのビルドは水曜日の早いうちには準備できるでしょう。もし、上記の基準に合致するようなバグがあるならば、できるだけ早くに知らせてください。 は毎朝 10 時 PST にミーティングを行い、提案されたバグを調査、承認します。

- -

直接の質問は、dev.planning スレッドまでお願いします。

diff --git a/files/ja/devnews/20070312/index.html b/files/ja/devnews/20070312/index.html deleted file mode 100644 index 8d0bd1005e..0000000000 --- a/files/ja/devnews/20070312/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: 2.0.0.3/1.5.0.11 候補完成 -slug: DevNews/20070312 -tags: - - DevNews - - 'DevNews:General' ---- -

2.0.0.3 と 1.5.0.11 の新しいリリース候補のビルドが完成しました。2.0.0.2 からすぐにこれらをリリースする理由がいくつかの重大なレグレッションが存在したことですので、われわれはできるだけ多くの人に最終リリース前にテストをしてほしいと考えています。2.0.0.2 以降のリグレッションが一つでも見つかればバグとして登録し、blocker として推薦してください。

- -

リリース候補は次のリンクからダウンロードできます :

- - diff --git a/files/ja/devnews/20070315/index.html b/files/ja/devnews/20070315/index.html deleted file mode 100644 index 06e19b11c7..0000000000 --- a/files/ja/devnews/20070315/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Firefox コミュニティーベータプログラム -slug: DevNews/20070315 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Firefox 2 にたどり着くまでに、コミュニティーベータプログラムの一環で、われわれはベータビルドやリリース候補を幅広いテストとフィードバックを目的として公開しました。これらのリリース前のバージョンの Firefox をダウンロードしインストールした誰もが、このベータプログラムの参加者となり、最終的に Firefox 2 のリリース版に自動的にアップデートしました。

- -

Firefox 2 のクォリティーを向上し続けるためにも、同様のプログラムをセキュリティーと安定性のための Firefox 2 リリースにも実施しようとしています。いまから 24 時間以内に、ベータプロセスに参加したい人は誰でも、次のセキュリティーと安定性のためのアップデートのリリース前バージョンを入手できるようになるでしょう。

- -

もし、このプログラムに参加するなら、われわれはあなたの協力に感謝いたします。問題や論点がありましたら何でもわれわれの コミュニティーフィードバックサイト にお寄せください。

- -

Firefox 2.0.0.3 の最終リリースはこのプログラムを通じた幅広いテストが完了してすぐになります。全てのプレスに関しての問い合わせは、直接 press@mozilla.com までお願いします。

- -

ベータプログラムに参加しないなら、単に Firefox の最新の製品版 をダウンロードしてインストールしてください。

- -

近い将来、われわれはこのコミュニティーベータプログラムに新しい人を迎えるでしょう。参加方法に関しては Mozilla Developer News  にすぐに投稿されると思います。

- -

技術的メモ : 以下の方法でベータプログラムに参加しているかを確認できます

- - diff --git a/files/ja/devnews/20070320/index.html b/files/ja/devnews/20070320/index.html deleted file mode 100644 index 5be4076906..0000000000 --- a/files/ja/devnews/20070320/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Firefox 2.0.0.3 と Firefox 1.5.0.11 セキュリティ及び安定性アップデート -slug: DevNews/20070320 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Firefox 1.5.0.11 と Firefox 2.0.0.3 が http://getfirefox.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Firefox ユーザに最新のリリースへアップグレードすることを強く勧めます。

- -
注意: Firefox 1.5.0.x のセキュリティと安定性のアップデートがメンテナンスされるのは 2007 年 4 月 24 日までです。全てのユーザに Firefox 2 へアップグレードすることを勧めます。Firefox 1.5.0.11 は http://www.mozilla.com/firefox/all-older.html からダウンロードできます。
- -

もし Firefox 1.5.0.x か Firefox 2.0.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

- -

変更点や更なる詳細については Firefox 1.5.0.11 リリースノートと Firefox 2.0.0.3 リリースノートで確認してください。

diff --git a/files/ja/devnews/20070322/index.html b/files/ja/devnews/20070322/index.html deleted file mode 100644 index 91c855a3a6..0000000000 --- a/files/ja/devnews/20070322/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: ヤツの名前は Kit … Developer Kit -slug: DevNews/20070322 -tags: - - DevNews - - 'DevNews:General' ---- -

ウェブ開発者へ : 新しいウェブにおけるオープンスタンダードの旗手が登場しました。彼は 1 フィートしかないように見えますが、非常に効果的に登場しました。SXSW Interactive 2007 で騒ぎを巻き起こし、DL.TV. にもすでに出演しました。若くて小さいヤツでしか無いですが、われわれは、Kit … そう、Developer Kit と呼んでいます。

- -

もっとも、いままで名前は出てきませんでした。生まれたのは、Renardo での 2006 Firefox Developer's Summit の会場で、本当にすばらしい Adobe Illustrator の技術を持つ Sean Martell によってトラックパッドのみで生み出されました。まもなく Mozilla Store をいくつかのアイテムとしてかざり、あなたも無料で手に入れることができるでしょう。Kit のデスクトップ壁紙を手に入れ、次世代のウェブサイトの開発でオープンスタンダードを利用するように世界に訴えましょう。壁紙は Creative Commons でライセンスされ、Mozilla のトレードマークポリシーに注意する限り自由に利用できます。

- -

今すぐ、非常にかわいい "Developer Kit" の壁紙を飾ることで、オープンウェブスタンダードを使うことに協力してください !

diff --git a/files/ja/devnews/20070323/index.html b/files/ja/devnews/20070323/index.html deleted file mode 100644 index 493ca19458..0000000000 --- a/files/ja/devnews/20070323/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Gran Paradiso Alpha 3 がダウンロード可能に -slug: DevNews/20070323 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 3 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Gran Paradiso Alpha 3 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha 3 を使うべきではありません。Gran Paradiso Alpha 3 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

- -

Gran Paradiso Alpha 3 は以下のプラットフォームで利用可能です:

- - - -

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/devnews/20070411/index.html b/files/ja/devnews/20070411/index.html deleted file mode 100644 index 17acb7aae1..0000000000 --- a/files/ja/devnews/20070411/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: MDC 新規アカウント作成を一時無効化 -slug: DevNews/20070411 -tags: - - DevNews - - 'DevNews:General' ---- -

破壊行為が行われていることから、Mozilla Developer Center wiki への新規アカウント作成機能は一時的に無効化することになりました。現在、古いバージョンの MediaWiki を利用していることから、ボットからの防御策をとるのが難しくなっていますので、アップグレードが完了するまでの措置となります。この作業は、できる限り早く行えるように努力中です。失望される方もいらっしゃるでしょうし、また不便をおかけしますが、ご了承ください。

diff --git a/files/ja/devnews/20070424/index.html b/files/ja/devnews/20070424/index.html deleted file mode 100644 index 3214e73517..0000000000 --- a/files/ja/devnews/20070424/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Mozilla Firefox 1.5 に何が起こっているのか? -slug: DevNews/20070424 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Mozilla は今年 5 月中旬までのみ Firefox 1.5 セキュリティと安定性のアップグレードを提供することをコミュニティにお知らせしたかったのです。私たちは全ての Firefox 1.5 ユーザに今日、http://getfirefox.com を訪れて Firefox の最新版をダウンロードすることを推奨します。期限が近くなるまで、私たちはアップデートを提供するつもりです。

- -

私たちはより速く より安全なオンライン経験の提供に焦点をあてています。私たちのユーザ全てが Firefox 2.0 における新機能の利益を享受してほしいと思います。

diff --git a/files/ja/devnews/20070427/index.html b/files/ja/devnews/20070427/index.html deleted file mode 100644 index 1896629ee1..0000000000 --- a/files/ja/devnews/20070427/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Gran Paradiso Alpha 4 がダウンロード可能に -slug: DevNews/20070427 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 4 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Gran Paradiso Alpha 4 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha 4 を使うべきではありません。Gran Paradiso Alpha 4 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

- -

Gran Paradiso Alpha 4 は以下のプラットフォームで利用可能です:

- - - -

このリリースのさらなる情報と既知の問題はリリースノート{{ 訳注("日本語訳") }}を参照してください。

diff --git a/files/ja/devnews/20070501/index.html b/files/ja/devnews/20070501/index.html deleted file mode 100644 index 98b4dbb4ee..0000000000 --- a/files/ja/devnews/20070501/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Mozilla Developer Center のアップグレードに向けたテストにご協力を -slug: DevNews/20070501 -tags: - - DevNews - - 'DevNews:General' ---- -

MediaWiki 1.9.3 へのアップグレードに向けた to-do リストに上がっていた全ての作業が完了し、重要な試験を行う時が来ました。試験サイト へ行き、今日中に、何も壊れているところが無いことを確認するための、閲覧、編集、そしてそれ以外のコンテンツに対する変更作業といった試験を行ってください。

- -

特に、新規文書の追加や文書の編集が実際に可能かや、Nutch 検索 (検索ボックスや Special:Nutch 検索ページ) が正常かどうかを確認する必要があります。

- -

このアップデートにおける最大の目標は、MediaWiki 1.9.3 にアップグレードすることです。そのほかの変更もいくつか行われていますが、それらについては現時点では特に緊急に確認が必要なものではありません。

- -

このアップグレードを実行し、完了すれば、MDC wiki を編集するためのユーザアカウント作成を再有効化する予定です。試験のフィードバックに良好な答えが帰ってき次第、できる限り早くアップグレードを実行する予定です。

- -

もし、懸念事項や何か問題がありましたら、Eric Shepherd までメールを送ってください。

diff --git a/files/ja/devnews/20070502/index.html b/files/ja/devnews/20070502/index.html deleted file mode 100644 index 2452144c61..0000000000 --- a/files/ja/devnews/20070502/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 新しい Firefox と Thunderbird のプリリリースアナウンスメーリングリスト -slug: DevNews/20070502 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Mozilla では、アナウンスとフィードバック収集のためのいくつかのメーリングリスト (兼、ニュースグループ) が利用可能になったことをお知らせいたします。これらの新メーリングリストの主な目的は、オフィシャルリリースより前に修正されるべき、ウェブサイトにおける互換性や他のプロダクトの問題を特定する手助けになるような、幅広いテストのための調整を行うためのものです。

- -

どうもありがとうございます。そして、テストを楽しんでください。

- -

もし、RC やアルファといった Firefox や Thunderbird 早期リリースでの試験についてのお知らせに興味があるなら、プリリリースアナウンスリストに参加してください。

- -

Firefox & Thunderbird プリリリースに関する案内は以下の3つのいずれかの方法で受け取ることができます。

- - - -

また、同時に RC やアルファリリースに関するフィードバックを受けるためと議論のために、いくつかのフォーラムを作成しています。以下の 3 つのいくつかの方法でフィードバックを読んだり、共有できます。

- - diff --git a/files/ja/devnews/20070509/index.html b/files/ja/devnews/20070509/index.html deleted file mode 100644 index 411bec89f8..0000000000 --- a/files/ja/devnews/20070509/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 'Developer Day パリ: 2007年6月23日' -slug: DevNews/20070509 -tags: - - DevNews - - 'DevNews:General' ---- -

Mozilla プロジェクトアップデートミーティング でも何度か触れたように、3度目の Developer Day of 2007 をパリで、2007/07/23 に開く予定です。より詳細は、興味を持って参加するときのためのページもある wiki ページ を参照してください。また、他の Mozilla 開発者と議論したいなら トピックを提案するためのページ を、何かデモを行う場合 を参照してください。

- -

Developer Days はマウンテンビューとボストンで 3 月に開催され、マウンテンビューで楽しめたのだから、パリでもどれだけ楽しいことが出来るかと考えています ! 開催場所はまだ確定していませんが、intra-muros (ダウンタウン) あたりになるでしょう。Xulfr.org コミュニティーや、Disruptive Innovations のような熱狂している連中のベテラン開発者、そしてヨーロッパでの Mozilla 開発の長い物語からエネルギーを受けて、すばらしいイベントの現場になるでしょう。 現地でお会いできるのを楽しみにしています !

diff --git a/files/ja/devnews/20070512/index.html b/files/ja/devnews/20070512/index.html deleted file mode 100644 index a4cb14c5d7..0000000000 --- a/files/ja/devnews/20070512/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Firefox Developer Conference 東京 2007年6月16日 -slug: DevNews/20070512 -tags: - - DevNews - - 'DevNews:General' ---- -

Mozilla Japan は、Firefox Developer Conference を 6/16 に東京で開きます。これはわれわれの Developer Days よりはより構造化されており、Firefox 開発経験者とともに、新しい開発者にも同様にためになるイベントになるでしょう。もし、何か発表したい拡張機能を開発している、もしくは Firefox アプリケーションプラットフォームで開発を始めるための勉強をやりたい場合、6/16 に東京へ、青山 TEPIA ホールへお集まりください。

- -

イベント情報は、日本語 でも見ることができます。また、Mozilla Japan スタッフブログ へフィードバックとして、コメントをお送りください。

diff --git a/files/ja/devnews/20070523-2/index.html b/files/ja/devnews/20070523-2/index.html deleted file mode 100644 index d3353e3259..0000000000 --- a/files/ja/devnews/20070523-2/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Places によるブックマークが Firefox 3 alpha 5 で有効に -slug: DevNews/20070523-2 -tags: - - DevNews - - 'DevNews:General' ---- -

Firefox Places チームは、この月末に予定されている Firefox 3 Alpha 5 リリースに Places によるブックマーク実装を間に合わせるという大きな仕事を成し遂げました。そして、皆さんご存知のとおり、先週の trunk からブックマークの Places による実装が有効化されたことに興奮しています。もちろんこれからすべきことはまだたくさん残されていますが、これは非常に重要なマイルストーンとなるでしょう。

- -

しかし、混乱や涙そして死の脅迫を防ぐためにも、いくつかの点を確実に確認してください。

- - - -

Thanks!

- -

Places チーム

diff --git a/files/ja/devnews/20070523/index.html b/files/ja/devnews/20070523/index.html deleted file mode 100644 index 7689e0b4ff..0000000000 --- a/files/ja/devnews/20070523/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Firefox 1.5.0.12rc2 と 2.0.0.4rc3 がベータチャンネルであなたの元へ -slug: DevNews/20070523 -tags: - - DevNews - - 'DevNews:General' ---- -

5 月 23 日の PDT 午後 4 時に、Firefox 1.5.0.x と 2.0.0.x ユーザで "beta" アップデートチャンネル を利用しているユーザは、それぞれ Firefox 1.5.0.12rc2 と 2.0.0.4rc3 へのアップデートを受け取るでしょう。

- -

リリース候補版へのフィードバックは、mozilla.feedback.firefox.prerelease ニュースグループへお願いします。

diff --git a/files/ja/devnews/20070529-2/index.html b/files/ja/devnews/20070529-2/index.html deleted file mode 100644 index d4306e8adb..0000000000 --- a/files/ja/devnews/20070529-2/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Alpha 5 が凍結 -slug: DevNews/20070529-2 -tags: - - DevNews - - 'DevNews:General' ---- -

私たちは明日(5月30日)の夜 (午後11:59 PDT) に Gran Paradiso Alpha 5 に向けた凍結を行う予定です。現在投稿されているスケジュールは凍結を今夜に予定していますが、凍結前の最終更新として Gecko 1.9 会議に対応するため、私たちはアルファ版を水曜日に移動しました。

- -

私はこの凍結とリリース過程を調整し、ブロッカーバグと遅いランドの主要ドライバーを務める予定です。 質問か興味がありましたら、私にメールするか IRCで確認してください。

diff --git a/files/ja/devnews/20070529/index.html b/files/ja/devnews/20070529/index.html deleted file mode 100644 index f2a28f158f..0000000000 --- a/files/ja/devnews/20070529/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: まもなく Firefox 1.5.0.12 と Firefox 2.0.0.4 が利用可能に -slug: DevNews/20070529 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

5 月 30 日の水曜日に自動更新を通して私たちは Firefox 1.5.0.12 と Firefox 2.0.0.4 の配布を開始するつもりです。これらはユーザの高速で安全なオンライン体験を約束するためにブラウザの標準的な安定性とセキュリティの更新を含んでいます。私たちはこれがバージョン 1.5 製品群の安定性およびセキュリティの最終リリースになると予想しています。Firefox 1.5.0.12 はユーザが Firefox 2 への移行できるようにする自動更新機構を含んでいます。アップグレードの案内は 2, 3 週間以内に有効になるでしょう。私たちは、検索およびコミュニケーション、オンラインセキュリティをより効果的にする機能を得るために、今すぐ www.getfirefox.com から Firefox 2 をダウンロードすることを強く推奨します。

diff --git a/files/ja/devnews/20070530-02/index.html b/files/ja/devnews/20070530-02/index.html deleted file mode 100644 index 92e60bb955..0000000000 --- a/files/ja/devnews/20070530-02/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Firefox 2.0.0.4 と Firefox 1.5.0.12 セキュリティ及び安定性アップデート -slug: DevNews/20070530-02 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Firefox 1.5.0.12 と Firefox 2.0.0.4 が http://getfirefox.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Firefox ユーザに最新のリリースへアップグレードすることを強く勧めます。

- -
注意: 私たちは これが Firefox 1.5.0.x シリーズ最後のリリースになると予想します。通常 Mozilla はメジャーリリース後 6カ月間、前のリリースのサポートを継続します。 以前 Mozilla はアップデート機能の最新の変更に対応するため、1.5.0.x シリーズに予定されていたを延長しました。Firefox 1.5.0.12 は http://www.mozilla.com/firefox/all-older.html からダウンロードできますが、全てのユーザに Firefox 2 へアップグレードすることを勧めます。
- -

もし Firefox 1.5.0.x か Firefox 2.0.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

- -

変更点や更なる詳細については Firefox 1.5.0.12 リリースノートと Firefox 2.0.0.4 リリースノートで確認してください。

- -

今後数週間に 1.5.0.12 ユーザは Mozilla から Firefox 2 への「メジャーアップデート」の案内を通知するメッセージを提示されるでしょう。ユーザの確認により、ユーザのブラウザは 1.5.0.12 から 2.0.0.4 にアップグレードされます。

diff --git a/files/ja/devnews/20070530/index.html b/files/ja/devnews/20070530/index.html deleted file mode 100644 index 133dd307c1..0000000000 --- a/files/ja/devnews/20070530/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: アドオンの更新 -slug: DevNews/20070530 -tags: - - DevNews - - 'DevNews:Security' ---- -

Firefox 用に何千もの信じられないほど多様なアドオンがあります。サードパーティ開発者による、この背極的な参加は多くのユーザのブラウジングを高めています。アドオンは Firefox の重要な部分であるため、Mozilla は開発者が安全なアドオンを作成できるように努力しています。今週上で配布されている更新についての懸念が浮上しました。(HTTPS の代わりに) HTTP を使った通信は攻撃者によって悪意のあるサーバにリダイレクトされ、潜在的に悪意のあるコードをインストールすることが可能です。

- -

Mozilla Add-ons サイトでホストされているアドオンは HTTPS 上で提供され、ハッシュで検証されています。これらのアドオンはこの攻撃に対して脆弱ではありません。私たちは拡張開発者に上記の攻撃を防ぐため、更新に SSL を必須とすることを強く推奨します。

- -

Firefox 3 のために、私たちはアドオン開発者が安全では無い経路を使うことを防ぐ方法を考え、普遍的にアドオンの更新を改良する方法を調査しています。考えられる多くの選択肢があり、その全てが安全な拡張を簡単に書けるように設計されています。この議論に参加したいなら news://news.mozilla.org/mozilla.dev.apps.firefox の Firefox 開発者ディスカッショングループに参加してください。

- -

開発者のための更なる情報はここで手に入ります http://developer.mozilla.org/en/docs...ests#updateURL

diff --git a/files/ja/devnews/20070604/index.html b/files/ja/devnews/20070604/index.html deleted file mode 100644 index d7e7310994..0000000000 --- a/files/ja/devnews/20070604/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Thunderbird 1.5.0.12 セキュリティ及び安定性アップデート -slug: DevNews/20070604 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Thunderbird 1.5.0.12 が Thunderbird アーカイブ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。 セキュリティ修正のため、全ての Thunderbird ユーザに最新のリリースへアップグレードすることを強く勧めます。

- -
注意: メールクライアントの 最新版 は Thunderbird 2 で、最新版が http://getthunderbird.com からダウンロードできます。
- -

もし Thunderbird 1.5.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。 変更点や更なる詳細については Thunderbird 1.5.0.12 リリースノート で確認してください。

diff --git a/files/ja/devnews/20070606-2/index.html b/files/ja/devnews/20070606-2/index.html deleted file mode 100644 index 65ad327e49..0000000000 --- a/files/ja/devnews/20070606-2/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Firefox 1.5 から 2.0 へのメジャーアップデート公表 -slug: DevNews/20070606-2 -tags: - - DevNews - - 'DevNews:Releases' ---- -

以前 Mozilla は Firefox 1.5 製品シリーズで Firefox 1.5.0.12 が最終リリースになるだろう とおしらせしました。ユーザが サポートされている Firefox の最新リリースへ移行するのを助けるため、メジャーアップデート機能が開発されました。

- -

今週 Mozilla は 自動アップデートサービス (AUS) “beta” チャンネルのユーザにメジャーアップデートのテストを開始し、2 週間以内に“release”チャンネルの一般ユーザに提供するでしょう。

- -

Mozilla は 6月7日(木)午後 (PDT) からメジャーアップデートのおしらせを提示しはじめるでしょう。“beta”チャンネルの Firefox 1.5.0.12 ユーザは Firefox 2.0.0.4 へのメジャーアップデートの提案を受けるでしょう。以下のダイアログボックスがユーザに提示されるでしょう。

- -

http://www.mozilla.org/projects/fire...update/MU1.png

- -

これはどのように動作するか:

- - - -

ここにメジャーアップデートの流れのスクリーンショットが少しあります:

- -

http://www.mozilla.org/projects/fire...update/MU2.png

- -

http://www.mozilla.org/projects/fire...update/MU3.png

- -

http://www.mozilla.org/projects/fire...update/MU4.png

- -

http://www.mozilla.org/projects/fire...update/MU5.png

- -

最終的にユーザは以下のアップデートに成功したページを見ることになるでしょう。

- -

http://www.mozilla.org/projects/fire...update/MU6.png

- -

私たちは Firefox プレリリースフィードバックメーリングリスト/ニューズグループへの このアップデートのテストに対する どんなフィードバックや問題にも感謝します。

- - - -

Thanks.

diff --git a/files/ja/devnews/20070606/index.html b/files/ja/devnews/20070606/index.html deleted file mode 100644 index fc1d86d98d..0000000000 --- a/files/ja/devnews/20070606/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Firefox 3.0 Alpha 5 がダウンロード可能に -slug: DevNews/20070606 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Firefox 3.0 (別名 Gran Paradiso) Alpha 5 は、Firefox 3 と 次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Firefox 3.0 Alpha 5 はテスト目的に限って提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザはアルファリリースを使うべきではありません。Firefox 3.0 Alpha 5 に含まれる変更のいくつかは以下の通りです。

- - - -

Gran Paradiso Alpha 5 は以下のプラットフォームで利用可能です:

- - - -

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/devnews/20070626/index.html b/files/ja/devnews/20070626/index.html deleted file mode 100644 index e7e0afdfde..0000000000 --- a/files/ja/devnews/20070626/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 'Alpha 6 が 2007/06/27 23:59 PDT にフリーズ' -slug: DevNews/20070626 -tags: - - DevNews - - 'DevNews:General' ---- -

Gran Paradiso Alpha 6 は、明日 2007/06/27 の深夜 PM 11:59 PDT にフリーズされます。過去のフリーズスケジュールのポストでは今晩となっておりましたが、Alpha のフリーズは Gecko 1.9 ミーティングによる最後のアップデートを待つために水曜日に移動しました。

- -

これらのフリーズとリリースプロセスはわたし  が調整しており、ブロッカーや遅れについてキードライバーとして対応しています。もし、何か質問や意見がありましたら、メールもしくは IRC にてご連絡ください。

diff --git a/files/ja/devnews/20070628/index.html b/files/ja/devnews/20070628/index.html deleted file mode 100644 index d59c4f41ab..0000000000 --- a/files/ja/devnews/20070628/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Firefox 1.5.0.12 から 2.0.0.4 へのメジャーアップデート公開 -slug: DevNews/20070628 -tags: - - DevNews - - 'DevNews:Releases' ---- -

過去にアナウンス しました (日本語版は Firefox 1.5 から 2.0 へのメジャーアップデート公表) ように、Firefox 1.5.0.12 ユーザは Firefox 2.0.0.4 へのメジャーアップデートの通知を受け取ることになります。メジャーアップデートは今日の午後 (2007/06/28 PDT) から公開されます。

diff --git a/files/ja/devnews/20070702/index.html b/files/ja/devnews/20070702/index.html deleted file mode 100644 index e7e8b67aa1..0000000000 --- a/files/ja/devnews/20070702/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Firefox 3.0 Alpha 6 がダウンロード可能に -slug: DevNews/20070702 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Firefox 3.0 (コードネーム Gran Paradiso) Alpha 6 は Firefox 3 や Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Firefox 3.0 Alpha 6 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Firefox 3.0 Apha 6 に含まれる変更点は次のリストです。

- - - -

Gran Paradiso Alpha 6 は次のプラットフォームで利用可能です

- - - -

追加情報やこのリリースでの既知の障害については リリースノートを参照してください。

diff --git a/files/ja/devnews/20070710/index.html b/files/ja/devnews/20070710/index.html deleted file mode 100644 index b800335058..0000000000 --- a/files/ja/devnews/20070710/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: パッチをチェックインするには -slug: DevNews/20070710 -tags: - - DevNews - - 'DevNews:General' ---- -

あなたが、適切にレビューを受け、適切に承認された、Mozilla にチェックイン可能な状態のパッチを書いたけれど、自分自身ではコミットする権限が無い場合、Bugzilla の該当するバグにcheckin-needed キーワードを追加してください。パッチに関する特別な要請 (ブランチにもチェックインが必要、など) に関しては、ステータスホワイトボードへ書き込んでください。

- -

これにより、check-in 担当者が見回って、あなたのパッチを 1 ～ 2 週間の間にコミットするでしょう。もし、あなたが check-in 担当者の一人であれば、このような状態になっているパッチには気軽に対処してください。

- -

また、checkin-needed キーワードが追加されるべきであるのに追加されていないパッチがあれば追加し、パッチ作者に次の時には自分でキーワードを追加すべきであることを知らせてください。

diff --git a/files/ja/devnews/20070717/index.html b/files/ja/devnews/20070717/index.html deleted file mode 100644 index cdfe1346a7..0000000000 --- a/files/ja/devnews/20070717/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: –disable-places と –disable-places-bookmarks の configure フラグが廃止 -slug: DevNews/20070717 -tags: - - DevNews - - 'DevNews:General' ---- -

ビルド設定 (configuration) スイッチ  を利用したビルドを行っている方への重要なお知らせです。{{ Bug(386392) }} へのパッチが --disable-places と --disable-places-bookmarks の configure フラグの実装を廃止し、今日の早い時間以降にリリースされた Firefox ビルド環境で利用できなくなりました。--disable-places フラグはブラウザでないアプリケーションのためにまだ有効ですが、--disable-places-bookmarks は完全に取り除かれ、ビルドシステムによって無視されます。

diff --git a/files/ja/devnews/20070718/index.html b/files/ja/devnews/20070718/index.html deleted file mode 100644 index cae751ec55..0000000000 --- a/files/ja/devnews/20070718/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Firefox 2.0.0.5 セキュリティアップデート -slug: DevNews/20070718 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.5 が http://getfirefox.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Firefox ユーザへ最新リリースへのアップグレードを強く勧めます。

- -

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知がくるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.5 リリースノートでご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/devnews/20070719/index.html b/files/ja/devnews/20070719/index.html deleted file mode 100644 index ac4d77d6ef..0000000000 --- a/files/ja/devnews/20070719/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Thunderbird 2.0.0.5 セキュリティアップデート -slug: DevNews/20070719 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.5 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

- -

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Thunderbird 2.0.0.5 リリースノートをご覧ください。

- -

Thunderbird 2.0.0.5 で解決されたセキュリティ脆弱性は Thunderbird 1.5.0.x ユーザには影響しませんので、Thunderbird 1.5.0.x シリーズのユーザの方はアップデートの必要はありません。

diff --git a/files/ja/devnews/20070730/index.html b/files/ja/devnews/20070730/index.html deleted file mode 100644 index 7422183d12..0000000000 --- a/files/ja/devnews/20070730/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Firefox 2.0.0.6 セキュリティアップデート -slug: DevNews/20070730 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.6 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正であるため、全ての Firefox ユーザに最新リリースへのアップグレードを強く勧めます。

- -

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.6 リリースノートをご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

- -

 

diff --git a/files/ja/devnews/20070801/index.html b/files/ja/devnews/20070801/index.html deleted file mode 100644 index 507c907537..0000000000 --- a/files/ja/devnews/20070801/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Thunderbird 2.0.0.6 セキュリティアップデート -slug: DevNews/20070801 -tags: - - DevNews - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.6 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

- -

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Thunderbird 2.0.0.6 リリースノートをご覧ください。

- -

- Thunderbird チーム

diff --git a/files/ja/devnews/20070803/index.html b/files/ja/devnews/20070803/index.html deleted file mode 100644 index 99df0ce693..0000000000 --- a/files/ja/devnews/20070803/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Gran Paradiso Alpha 7 がダウンロード可能に -slug: DevNews/20070803 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 7 は Firefox 3 と、Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Gran Paradiso Alpha 7 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Gran Paradiso Alpha 7 に含まれる変更点のいくつかは以下の通りです。

- - - -

Gran Paradiso Alpha 7 は次のプラットフォームで利用可能です

- - - -

追加情報やこのリリースでの既知の問題については リリースノートを参照してください。

diff --git a/files/ja/devnews/20070808/index.html b/files/ja/devnews/20070808/index.html deleted file mode 100644 index 46ddb17a32..0000000000 --- a/files/ja/devnews/20070808/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: wiki.mozilla.org がアップデートされ、１年の遅れを取り戻す -slug: DevNews/20070808 -tags: - - DevNews - - 'DevNews:General' ---- -

直近の計画されていた Mozilla システムダウンタイム の間に、wiki.mozilla.org で動いているソフトウェアが MediaWiki 1.6.8 から 1.10.1 へ、1 年間に開発された分を飛び越えてアップグレードされました。このアップグレードにより、悪意の投稿から記事を守るためのよりよいツールを含む いくつかの新機能 が追加されました。

diff --git a/files/ja/devnews/20070910/index.html b/files/ja/devnews/20070910/index.html deleted file mode 100644 index 2a59776361..0000000000 --- a/files/ja/devnews/20070910/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Firefox trunk の M8 のための freeze は少し延長されます -slug: DevNews/20070910 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Firefox trunk は最後の Gran Paradiso M8 blocker が解決されるまで freeze のままおかれます。この延長期間、Gecko 1.9/Firefox 3 のドライバーは 承認された要望 に優先順位をつけるために毎日会合をもち、高い効果と低いリスクを備えたパッチのみを受け入れる予定です。

- -

これらの最終のバグは早めに片付けられるものと考えており、最終のリリースが行われた後、ツリーは再開されます。それまでしばらくおまちください。

diff --git a/files/ja/devnews/20070913/index.html b/files/ja/devnews/20070913/index.html deleted file mode 100644 index f41a2254a7..0000000000 --- a/files/ja/devnews/20070913/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: "Firefox trunk の freeze が解除されました (ただし closed のままです\_!)" -slug: DevNews/20070913 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Firefox trunk は、今日 freeze 解除されましたが、すぐに {{ Bug(396064) }} にあるパフォーマンス上のリグレッションにより閉じられました。

- -

このリグレッションの原因が特定され、修正されれば、ツリーは再開されるでしょう。これは orange レベル であり、次の条件を満たす必要があります。

- -
    -
  1. approval1.9+ を必要としない、blocking1.9+ もしくは blocking-firefox3+ が付いているバグに対するパッチのチェックイン
    2. -
  2. Firefox (browser/ と toolkit/ を含む) に影響するそのほか全てのパッチのチェックインは 該当するドライバー による approval1.9+ の付与が必要
    3. -
  3. 通常と同じく、Firefox に影響しない通常のレビュー要件を満たすパッチのチェックインはツリーが開いている限り可能
    4. -
- -

関係者の方で必要があれば、dev.planning ニュースグループもしくは IRC #granparadiso にてツリーの扱いについて問い合わせてください

diff --git a/files/ja/devnews/20070918/index.html b/files/ja/devnews/20070918/index.html deleted file mode 100644 index 36fbe33798..0000000000 --- a/files/ja/devnews/20070918/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Firefox 2.0.0.7 セキュリティーアップデート -slug: DevNews/20070918 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' - - 'DevNews:Security' ---- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.7 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正であるため、全ての Firefox ユーザに最新リリースへのアップグレードを強く勧めます。

- -

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.7 リリースノートをご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/devnews/20070920/index.html b/files/ja/devnews/20070920/index.html deleted file mode 100644 index 1fc8dab94d..0000000000 --- a/files/ja/devnews/20070920/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Gran Paradiso Alpha 8 がダウンロード可能に -slug: DevNews/20070920 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Gran Paradiso Alpha 8 は Firefox 3 と、Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Gran Paradiso Alpha 7 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Gran Paradiso Alpha 7 に含まれる変更点のいくつかは以下の通りです。

- - - -


- Gran Paradiso Alpha 8 は以下のプラットフォームで利用可能です

- - - -

追加情報やこのリリースでの既知の問題については リリースノートを参照してください。

diff --git a/files/ja/devnews/20071005/index.html b/files/ja/devnews/20071005/index.html deleted file mode 100644 index c36e6547b6..0000000000 --- a/files/ja/devnews/20071005/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: "インドで開催される FOSS.IN であいましょう\_!" -slug: DevNews/20071005 -tags: - - DevNews - - 'DevNews:General' ---- -

Mozilla は、インドにおいて最大のフリー & オープンソースイベントである FOSS.IN と共同でプロジェクトデイを 12 月の最初の週にバンガロールで開催します。

- -

この日を成功に導くために皆さんの協力をお待ちしております。助けが必要な部分は

- - - -

何か考えがあるなら教えてください。FOSS.IN の日にさまざまなコミュニティーメンバーが参加してもらえることを本当に希望しています。

diff --git a/files/ja/devnews/20071008/index.html b/files/ja/devnews/20071008/index.html deleted file mode 100644 index 57e4e94c7b..0000000000 --- a/files/ja/devnews/20071008/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: blocker バグに注目せよ -slug: DevNews/20071008 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

未解決の blocker バグの数は、マイルストーンや最終的なリリースまでにどの程度の作業が必要かの見積もりに使えます。バグを "Gecko 1.9" や "Firefox 3" などのように分割された複雑なラベル付けを行っているために、Bugzilla でこれらの数を求めるのは面倒です。Mike Conner によって作成されたいくつかの保存された検索 (あなたの Bugzilla の設定ページで "保存された検索" (saved searches) 画面から、フッタ追加してください) が利用できます。

- - - -

興味がある人向けに、M9 のみについては次のようになります。

- - - -

これらの検索から、次のことが分かります。(元記事が書かれた時点に置いて)

- - - -

これらの数をモニタリングすることで、次のマイルストーンや最終の製品リリースまでにどのような作業が必要かを知ることができます。これらを簡単に行うために、Dietrich Ayala さん作の Bugzilla 検索用のマイクロサマリージェネレーター が利用できます。

diff --git a/files/ja/devnews/20071012/index.html b/files/ja/devnews/20071012/index.html deleted file mode 100644 index 5993e769d0..0000000000 --- a/files/ja/devnews/20071012/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: "Gran Paradiso M9 コードフリーズ日が変更に\_!" -slug: DevNews/20071012 -tags: - - DevNews - - 'DevNews:General' ---- -

今週の Firefox 3 と Gecko 1.9 のステータスミーティング での議論の通り、未解決の blocker バグ が多いことから Gran Paradiso M9 のコードフリーズ日が来週の水曜日から変更になりました。

- -

新しいコードフリーズ日は来週の Gecko 1.9 ステータスミーティングで決定されますが、blocker バグの数次第で 10 月 24 日から 31 日の間のどこかになる予定です。その間、コードツリーは "orange" レベルにとどめられ (いつでも tinderbox を現在のチェックイン状態の確認に利用してください) blocker バグへのパッチやドライバーがチェックインを許可したパッチのみを投入できます。全ての貢献者とドライバーは、問題を最小限に抑えるために、チェックインする前にパッチのメモリリークとレグレッションのテストを行い、投入後はその影響を必ず確認してください。

- -

コードフリーズ日が決定されれば、Mozilla Developer News と mozilla.developer.planning ニュースグループでアナウンスされます。このとき、ツリーが "red" になる日、つまりレグレッションのリスクをできる限り減らすため、全てのチェックインにドライバーの最終的な許可が必要になる日を同時にお知らせする予定です。

diff --git a/files/ja/devnews/20071018/index.html b/files/ja/devnews/20071018/index.html deleted file mode 100644 index c686644991..0000000000 --- a/files/ja/devnews/20071018/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Firefox 2.0.0.8 セキュリティーアップデート -slug: DevNews/20071018 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.8 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.8 リリースノートをご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/devnews/20071101/index.html b/files/ja/devnews/20071101/index.html deleted file mode 100644 index e770cdc8c3..0000000000 --- a/files/ja/devnews/20071101/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Firefox 2.0.0.9 安定性のためのアップデート -slug: DevNews/20071101 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.9 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.9 リリースノートをご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/devnews/20071115/index.html b/files/ja/devnews/20071115/index.html deleted file mode 100644 index 030ff36208..0000000000 --- a/files/ja/devnews/20071115/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Thunderbird 2.0.0.9 セキュリティーおよび安定性のためのアップデート -slug: DevNews/20071115 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.9 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

- -

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Thunderbird 2.0.0.9 リリースノートをご覧ください。

- -

(注: 前のオフィシャルリリースは 2.0.0.6 でした。いくつかのバージョン番号は、Firefox とあわせるために飛ばされました。)

diff --git a/files/ja/devnews/20071126/index.html b/files/ja/devnews/20071126/index.html deleted file mode 100644 index b64b1f56c8..0000000000 --- a/files/ja/devnews/20071126/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'about:mozilla - 2007年11月26日号' -slug: DevNews/20071126 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

モジラの書

- -

about:mozilla の創刊号へようこそ。これは、Mozilla プロジェクトのコミニュティニュースレターです。毎週月曜日にプロジェクトの至る所からの最新のニュース、情報、アナウンスをお届けします。 このニュースレターを読めば、今週のミーティングとイベントの予定を知ることができます。また で起こっていることを把握する助けにもなるでしょう。

- -

コミュニティのメンバーには、about:mozilla のためにニュースのネタを提供するように勧めています。もし、このニュースレターに含めるべきだと思うものがあれば、それを mozilla-news-submissions@mozilla.org に送ってください。質問やコメントがある場合は、news-editor@mozilla.org で編集者に連絡することができます。フィードバックは、常に歓迎しますし、それに対して感謝します。

- -

Mozilla Foundation が直接的な寄付プログラムを開始

- -

Mozilla Foundation へ寄付するとき、4つ の選ばれたプロジェクト（Bugzilla、SeaMonkey、Camino、障害がある人々のための Mozilla アクセシビリティ）の中からどれかひとつに対して直接寄付できるという選択肢ができました。従来の、プロジェクトを限定しない 寄付 をすることも同様に可能です。 Mozilla Foundation は、あなたの選択を記録し、いくらのお金が各プロジェクトに寄付されているかを把握しています。その結果は、各プロジェクトの責任のある人々に働きかけ、価値のあるプロジェクトに関連する率先件を出すことにつながります。それに対しては、それらの指定された寄付を使って資金が出されることになります。

- -

このプログラムが開始されたことを支援する特別の奨励として、Mozilla Foundation は、今から2007年末までにあなたが指定した各プロジェクトへの全ての寄付に対してそれぞれ 2 倍の金額（ただし、上限 10,000 ドル）を支払います。詳細は、Frank Hecker の ブログ投稿 を参照してください。

- -

Firefox 3 Beta 1 が現在ダウンロード可能です

- -

Firefox 3 Beta 1 が 現在ダウンロード可能 です。 これは 9 番目の開発マイルストーンであり、Firefox 3 として予定されているプラットフォームのための多くの新しい機能と変更によってもたらされるコア機能のテストに焦点を当てています。Firefox 3 の計画の進行状況については、Firefox 3 Planning Center、mozilla.dev.planning、irc.mozilla.org の #granparadiso で得ることができます。

- -

Proto：ベータ段階の新しい Mac テーマ

- -

もし、あなたが Mac ユーザならば、最初に その Beta版 を起動したときに、Proto を入手するように勧められる画面を見るでしょう。Proto は、OS X のための 新しい Firefox 3 のテーマのプロトタイプです。 Proto は新しい Mac テーマの作業の最初の段階であり、よりプラットフォームのネイティブな見た目と感じに近づけています。第二段階として、 他のアプリケーションと Firefox の違いとなるクロスプラットフォームの形状とコントロールセットを含めるように、Proto を改変する予定です。最終目標は、OS X のネイティブさが感じられ、もちろん、Firefox さも感じられるブラウザとなることです。Proto アドオンをインストールしたならば、テーマの新しいバージョンが利用可能になったときに更新通知が受けられます。Proto についてのフィードバックをしたいなら、 Alex Faaborg の ブログ投稿にコメントしてください。現在のバグをレポートしたいなら、{{ Bug(397723) }} にコメントを追加してください。

- -

メモリリークと Mozilla

- -

Stuart Parmenter が、メモリの動作に関する Mozilla の「新しい」焦点についてのいくつかの少し誤った解説の投稿への反応として、素晴らしいブログ投稿 を書きました。その投稿では、メモリの動作は常にプロジェクトの中でいかに優先度を持っていたかについて話をしています。「1998 年に私がプロジェクトを稼働させたときから、私たちは、メモリのフットプリントを小さく維持し、リークを最小に維持することに常に焦点を当ててきました。各リリースの開発サイクルの早期から、私たちはメモリとパフォーマンスを目標に設定してきたのです。私たちは常に越えるべき目標を以前のリリースに設定しています。」これは、プロジェクト、直面した挑戦、そして、いくつかの私たちが用いている戦略について話している、非常に読む価値のあるものです。

- -

Extend Firefox 2 add-on contest

- -

みなさんは、Firefox の最も良い点の一つが、やりたいことをやりたいようにカスタマイズできることであることを知っています。アドオンはこの魔術の中心ですが、私たちは、2回目の アドオン開発コンテストを開催します。

- -

コンテストは、12月31日まで行われます。そして、今年の 3 つの大賞と 12 の入賞が選ばれます。提出作品は、ユーザエクスペリエンス、創造性、開かれた標準の使用によって評価されます。ですから、今こそ、最大限の努力をし、ハッキングするべき時なのです。コンテスト、評価、賞、応募方法についての詳細は、Extend Firefox の Web サイト を参照してください。

- -

開発カレンダー

- -

11月26日月曜日

- - - -

11月27日火曜日

- - - -

11月28日水曜日

- - - -

このニュースレターを Email で受け取るには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20071203/index.html b/files/ja/devnews/20071203/index.html deleted file mode 100644 index 7cce6f3326..0000000000 --- a/files/ja/devnews/20071203/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'about:mozilla - コードフリーズ、マーケットシェア、Canvas 3D などなど' -slug: DevNews/20071203 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

Firefox 3 Beta 2 のためのコードフリーズ

- -

Firefox 3 Beta 2 のためのコードフリーズが、現在のところ、明日の 12月4日 火曜日に予定されています。目標は、クリスマスより前に Beta 2 をリリースするために、金曜日までにコードを完全なものにすることです。

- -

Friends of the Tree～11月26日のミーティングから～

- -

今週の Friends of the Tree は、Reed Loden によって選ばれました。彼は、「私は、長年存在していた GTK ウィジットのバグを修正するという素晴らしい仕事をした Michael Ventnor と Teune van Steeg を Friends of the Tree に選びたいと思います。彼らの仕事によって、Linux ユーザにとっての Firefox 3 は、今までの中での最高のリリースになるでしょう。」と書いています。もし、Friends of the Tree に選びたい人々がいるなら、Asa Dotzler に E メールを送ってください。

- -

Firefox 2.0.0.10 と 2.0.0.11 がリリースされました

- -

過去の週で、1 つではなく、2 つ の Firefox がリリースがされたことはありませんでした。2.0.0.10 は、月曜日にリリースされ、3 つのセキュリティの問題が修正されました。2.0.0.11 は、たった 4 日後の金曜日にリリースされ、2.0.0.10 で生じたリグレッションが修正されました。修正の速度が好転したことに対して、驚きと心を込めた祝福を、関係したみなさん（特に、Build 及び QA チーム）に送りたいと思います。

- -

 

- -

Canvas 3D: GL のパワー、 ウェブスタイル

- -

数か月間以上をかけて、Vlad Vukicevic が、Canvas のための OpenGL コンテキストで見ることができるものをプレビューする Firefox 3 のための拡張を作成しました。 これは、Firefox 3 Beta 1（もしくは、それ以降のナイトリー、ただし、ナイトリーと互換性があるかどうかは保証できません）で実行する必要があります。 （Windows、MacOS X x86、Linux x86 専用）拡張をインストールしたら、Web コンテンツが 3D canvas コンテキストにアクセスすることを許可するために、アドオンマネージャを開き、 Canvas 3D Extension の設定を選択し、“Enable 3D canvas in web content” をチェックするようにしてください。 この機能を動作させるためには、（GL ES 1.1 コンテキストのために）デスクトップ OpenGL 1.5 をフル実装しており、オプションで、（2.0 コンテキストのために）OpenGL 2.0 が利用可能になっていなければなりません。（多くの）さらなる情報は、 Vlad のブログ投稿を参照してください。

- -

Mozilla と Firefox のマーケットシェア

- -

Mozilla Corporation の Chief Operating Officer である John Lilly が、我々が調べている、人々がどのように Web を利用しているかを示すデータについての、一連のブログ投稿の最初を書いています。彼は、なぜ、Mozilla が、インターネットのオープン性と参加性を保持するということを主たる目的とする公共的利益のための努力とつじつまが合わないようにときどき思える、マーケットシェアのことを気にしているのかを説明しています。また、John は、我々が、42千万を超えるアクティブデイリーユーザ量である世界中に少なくとも 125,000,000 の Firefox ユーザがいると信じていることを明かしています。それは、Firefox のアクティブデイリーユーザが、過去年の 2 倍になったことを示すものです。この投稿は、興味深く、非常に有益なものです。

- -

Joseph Smarr の high performance JavaScript

- -

先月、Plaxo の Chief Platform Architect である、Joseph Smarr が、High Performance JavaScript: Why Everything You’ve Been Taught is Wrong（高パフォーマンスな JavaScript:なぜあなたが教わったことは間違っているのか） について話をするために、Mozilla オフィスに来ました。Joseph の プレゼンテーションのビデオが現在視聴可能です。プレゼンテーションのスライドもオンラインに用意されています。ですから、チェックしてみてください。

- -

拡張開発についての 101（入門） ビデオ

- -

Mike Beltzner が拡張についてのベストプラクティスとデザインパターンについて説明したテクニカルセッションを見逃しているのなら、それを オンライン で見ることが現在可能です。素晴らしい内容と質問を絶対にチェックしてください。

- -

Mozilla Worldwide - 今後のイベント

- -

世界規模での今後のイベントの早見表です。

- - - -

開発カレンダー

- -

12月3日月曜日

- - - -

12月4日火曜日

- - - -

12月5日水曜日

- - diff --git a/files/ja/devnews/20071210-02/index.html b/files/ja/devnews/20071210-02/index.html deleted file mode 100644 index 120b5858ca..0000000000 --- a/files/ja/devnews/20071210-02/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Firefox 3 Beta 2 は 12 月下旬の予定 -slug: DevNews/20071210-02 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

本日 PM 11:10 PST 、ブランチ分けとタグ付けのために開発チームからビルドチームに管理が委譲され、Firefox 3 Beta 2 となる予定のビルドを構築およびテストする作業が開始されました。

- -

いつものように、ビルドチームは一連のリリース候補版を作成し、それを品質保証チームがテストします。この活動に協力したければ、今週の金曜日 12/14 に行われる Firefox 3 Test Day にどなたでも参加できます。

- -

テストが完了していないリリースの配布を制限するため、リリース候補版のダウンロードディレクトリへのリンクはすべてこの告知にリダイレクトされます。ユーザーの皆さんが注意と情熱を払っていただくのはありがたいのですが、テストが完了するまでは待っていただきたいと思います。テストがすべてうまくいけば、太平洋標準時刻 (PST) の 12/21 昼過ぎには Firefox 3 Beta 2 がリリースされるでしょう。Firefox 3 Beta 2 のリリースチェックリストで経過を追う事ができます。

- -

(開発者へのメモ: beta 3 に向けた作業のためツリーは再び開かれました。)

diff --git a/files/ja/devnews/20071210/index.html b/files/ja/devnews/20071210/index.html deleted file mode 100644 index 4ec36a9497..0000000000 --- a/files/ja/devnews/20071210/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'about:mozilla - 賞、Mozilla 2、Community Loaner Program などなど' -slug: DevNews/20071210 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

新しい Mozilla 2 のためのミーティング

- -

Mozilla 2 に関する作業は、急速に進んでいて、定期的なミーティングを始めるべきだというところまで来ています。このミーティングは、Firefox と Gecko のためのミーティング（"Firefox/Gecko meeting" と適切に名付けられているもの）と合同で行われます。水曜日 11時（太平洋時間）の時間帯が空いているならば、Mozilla 2 のために使ってください。

- -

ミーティングの詳細

- - - -

Mozilla Community “Loaner” Program

- -

Giving and Empowerment Program は、1年間以上、Mozilla コミュニティにリソースを支給し、数百千ドルを、助成金、ハードウェア、ソフトウェア、その他のサービスを Mozilla コミュニティにすでに支給しいています。

- -

私たちは、Mozilla コミュニティにリソースを提供するための、より実験的な方法について考え続け、新しいアイデアを思いつくに至りました。今なら、かなりの長期間プロジェクトに関わる貢献者のためのハードウェアを購入することに加えて、私たちは、必要に応じてコミュニティに支給され得るリソースの、制限されたプールを作成しています。 私たちは、わずかながらのテストケースを今年末までに実施出来ればと考えています。もし、適用を受けたい、質問がある、もしくは、このプログラムについてもっと知りたいならば、このプロジェクトについての Seth のブログ投稿を見てください。

- -

Camino 1.5.4 がリリースされました

- -

Camino ブラウザプロジェクトは、 Camino 1.5.3 からの様々なセキュリティと安定性アップデートを含むメンテナンスリリースである、Camino 1.5.4 をリリースしました。全てのユーザに対してアップデートを推奨します。

- -

Mozilla プロジェクトに対する数々の賞

- -

Mozilla プロジェクトは、先週、ほんの少しの数の賞を受賞しました。:

- - - -

“For the Record” プロジェクトが再始動

- -

“For the Record” (FTR) は、次のことを行うために Mozilla コミュニティの 活動力と知識を利用する、コミュニティ主導の広報及び報道対応プログラムです。1) Mozilla Project のオンライン報道の全てを一覧化する、2) オンライン報道に対応する権利を与えられると感じられるようなスポークスマンの集団を、維持できる集団となるように育てる、3) 話の要点とよく寄せられる質問への回答の一覧を作成する。

- -

もし、For the Record チームに参加したい、このプログラムをさらに発展させるために私たちを支援したいならば、手軽にメーリングリストを購読してください。さらなる情報と詳細は、このプロジェクトについての Asa のブログ投稿を見てください。

- -

なぜ Firefox 2.0.0.11 はこんなにも早くリリースされたのか

- -

先月の初めに、プロジェクトの歴史上初めて、同じ週に 2 つのバージョンの Firefox がリリースされるということを私たちは体験しました。Firefox 2.0.0.10 は月曜日に登場し、Firefox 2.0.0.11 は、続く金曜日に登場しました。このようなことが起こった理由と、起こったことについての全てを知りたいならば、何が起こり、なぜこのようなことが起こったかについて説明した John Resig のブログ投稿を見てください。

- -

JavaScript 2 and the open web

- -

Brendan Eich は、最近、イギリス、ロンドンでの @media ajax conference で話をしました。彼は、自分のプレゼンテーションを投稿しています（解説とともに）。: JavaScript 2 and the open web

- -

今後のイベント

- -

12月 13-16日: Hispalinux Congress - スペインでの Hispalinux で、Pascal Chevrel が、Mozilla を広めるのを促進する方法について話します。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - diff --git a/files/ja/devnews/20071211/index.html b/files/ja/devnews/20071211/index.html deleted file mode 100644 index 2b29bddd00..0000000000 --- a/files/ja/devnews/20071211/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Firefox 3 に向けたアドオンとテーマの互換性確保 -slug: DevNews/20071211 -tags: - - DevNews - - 'DevNews:General' ---- -

Firefox 3 のリリースが近付くにつれて、この新しいブラウザに対して拡張機能やテーマの互換性を確保する事が重要な課題となりつつあります。拡張機能に互換性が無かったり、安全な更新手段を提供していないために、ユーザーが Firefox 3 を起動した時にすべての拡張機能が無効にされてしまうようなことが無いようにしなければなりません。

- -

拡張機能の開発者は、Firefox 3 向けに拡張機能を更新する時に影響を与える以下の変更点に注意しなければなりません。

- - - -

重要: 現在から Firefox 3 のリリースまでには多くの変更がなされる可能性があるので、addons.mozilla.org にホストされている拡張機能はまだ 3.0.* というバージョンを指定することはできず、現在のベータリリースのバージョンを指定しなければなりません。maxVersion に 3.0.* または 3.0.0.* というバージョンを指定していた拡張機能は、3.0b2 となるように変更されています。現在 AMO で使用できるバージョンの一覧はここにあります。

- - - -

注意事項としては、アドオンを新しいリリースに対応させるために必要な変更点が install.rdf の maxVersion を上げることだけである場合、addons.mozilla.org の開発者用コントロールパネルで maxVersion を変更すれば、インターネットに接続できる環境にあるユーザーならば Firefox や Thunderbird に新しいバージョンのアドオンをインストールできるようになります。バージョンの互換性を上げるためだけに新しいバージョンをアップロードしてレビューを受けさせる必要はありません。

- -

Mozilla Developer Center の 拡張機能を Firefox 3 に対応させる という記事でより詳しい情報を得ることができます。

diff --git a/files/ja/devnews/20071217/index.html b/files/ja/devnews/20071217/index.html deleted file mode 100644 index 4ae71535a3..0000000000 --- a/files/ja/devnews/20071217/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'about:mozilla - Beta 2 出荷、Firefox 3 アイコンプレビュー、アドオンの互換性、グラフィックスアーキテクチャ などなど' -slug: DevNews/20071217 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

about:mozilla 休暇中の休刊

- -

休暇シーズンがやってきますが、このニュースレターも 2 週間後まで発行されません。通常発行は、2008 年 1 月 7 日からです。よい休暇を！

- -

Firefox 3 Beta 2 出荷

- -

ビルド 及び QA チーム に権限が移譲されると共に、Firefox 3 Beta 2 の リリース候補版をビルドしテストする作業が、先週開始されました。もし作業が全て上手く進んだ場合、このベータ版は、12 月 21 日 までにはリリースされるでしょう。進行中の作業を追いかけたい場合、 Firefox 3 Beta 2 リリースチェックリスト でその経過を追うことができます。さらなる情報は、DevNews の投稿（日本語版）を参照してください。

- -

Firefox 3 に向けたアドオンとテーマの互換性確保

- -

Firefox 3 のリリースが近付くにつれて、この新しいブラウザに対して拡張機能やテーマの互換性を確保する事が重要な課題となりつつあります。拡張機能に互換性が無かったり、安全な更新手段を提供していないために、ユーザーが Firefox 3 を起動した時にすべての拡張機能が無効にされてしまうようなことが無いようにしなければなりません。 アドオンとテーマの更新、及び、いくつかの新機能とバージョン情報についての詳細は、 こちらの DevNews の投稿（日本語版）を参照してください。

- -

Firefox 3 のアイコンが初公開

- -

Alex Faaborg が、新しい Firefox 3 のアイコンセットが開発されていることに関連した進行中の作業についての、興味深い投稿を書きました。Firefox 3 は、4 つのプラットフォームのそれぞれに、約 120 のアイコン（サイズ違いをカウントするなら、190）を含んでいます。これらの新しいアイコンの多くは、いまだ草案であったり、まだ存在していなかったり、また、プラットフォーム間でいくつかの不一致があります。さらなる情報と議論は、Alex のブログ投稿を参照してください。

- -

Get Firefox ビデオアワード

- -

Firefox Flicks コンテストを覚えている人もいるでしょうが、Mozilla Japan が、アーティストネットワークであるロフトワークと、ソニーのビデオホスティングサービスである eyeVio と共に、似たようなコンテストを日本で企画しました。それが、Get Firefox ビデオアワードです。このコンテストは、10 月初旬に開始され、12 月に応募が締め切られました。さらなる情報（リンク先は英語）は、Gen Kenai のブログ投稿を参照してください。.

- -

緑の goo 版 Firefox

- -

今週の初めに、Mozilla Japan は、日本の代表的なポータルサイトである、 NTT レゾナントの “goo” ポータルとの新しいパートナーシップをアナウンスしました。“goo”は、長い間、日本での Firefox のサポーターであり、検索広告によって 得られた収益の一部を非営利の団体に寄付する Green Label” 検索サービスをサポートする Firefox の 新しいディストリビューションのために、数か月前に、私たちのところにやって来ました。Mozilla Japan は、NTT レゾナントとそのようなプロジェクトを行うことが出来て光栄でした。そして、私たちは、緑の goo 版 Firefox を先週火曜日にデビューさせました。もしあなたが現在 Firefox を使っているのなら、英語版の Firefox 向けの 緑の goo アドオン を試すことができます。そのアドオンは、エコ/グリーン テーマ、新しい検索プラグイン、そして、ホームボタンの隣に位置する、検索する回数に応じて成長する小さな木を含みます。

- -

Mozilla のグラフィックスアーキテクチャ

- -

Vlad Vukicevic は、Mozilla における 新しいグラフィックスアーキテクチャと、グラフィックスチームが Thebes と Cairo に関して作業していることについてのプレゼンテーションをまとめました。彼は、そのプレゼンにおいて、Gecko のレンダリングエンジンを Cairo に変更する理由、Thebes が提供するもの、そして、どのようにその他のレイアウトエンジンと相互作用するのかについて説明しています。コメント付きの完全なプレゼンテーションが、Vlad のブログにあります。

- -

カナダ最大の大学が Firefox と Thunderbird を標準化

- -

David Humphrey が、とても素晴らしいニュースを投稿しています。: セネカカレッジの IT 部門が Mozilla Firefox と Mozilla Thunderbird をサポートすることを選択しました。「カナダ最大の大学が、組織を通して Firefox と Thunderbird に乗り換えたことが意味することは何か？それは、100,000 人の学生（私たちのプラグラミングの学生は、この小さな一部分です）が、彼らの教育の一部分として、開かれた Web にさらされるだろうということを意味します。HR から 学長の事務所への給料支払いまで、数千の教授、管理スタッフ、他の従業員もそれを利用するでしょう。」さらなる詳細と情報は、David のブログ投稿を通して得ることができます。

- -

Camino 1.6 Alpha 1 がリリースされました

- -

Camino 1.6 のプレビューリリースである、Camino 1.6 Alpha 1 が、現在入手可能です。これは、アルファ版のソフトウェアであり、不安定で、日々の利用には適さないかもしれません。Camino の安定したバージョンを利用したいなら、Camino 1.5.4 をダウンロードしてください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20071218/index.html b/files/ja/devnews/20071218/index.html deleted file mode 100644 index 8b90618c02..0000000000 --- a/files/ja/devnews/20071218/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Firefox 3 Beta 2 がダウンロード可能に -slug: DevNews/20071218 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

注意: 開発者とテスター以外の方には Firefox 3 Beta 2 マイルストーンリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを対象としています。

- -

Firefox 3 Beta 2 がダウンロード可能になりました。これは開発者向けの 10 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。

- -

このマイルストーンでフィードバックが求められている新機能と変更は以下の通りです。

- - - -

(リリースノート の 「新機能」 セクションでこれらすべての機能についての詳細を見ることができます。)

- -

テスターは 25 以上の異なる言語に対応した Windows、Mac OS X、および Linux 用の Firefox 3 Beta 2 ビルド をダウンロードできます。このプレビュー版を使用する前に、必ず リリースノート をすべて読んでください。開発者は Mozilla Developer Center の 開発者のための Firefox 3 に目を通すべきです。

- -

注意: ダウンロードサイトに直接リンクを張らないでください。代わりに、この Firefox 3 Beta 2 マイルストーンの告知へリンクすることを強く推奨します。これは、このマイルストーンがどういうものなのか、何を期待すべきなのか、ダウンロードしてこの開発段階でのテストに参加するべきなのはどういう人なのかをすべての人に知ってもらうためです。

diff --git a/files/ja/devnews/20080107/index.html b/files/ja/devnews/20080107/index.html deleted file mode 100644 index 0e3d5222fe..0000000000 --- a/files/ja/devnews/20080107/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: 'about:mozilla - Beta 2 が出荷された、 Weave 立ち上げ、2007 年の反省、フォクすけ、ライブチャットサポート、などなど…' -slug: DevNews/20080107 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

about:mozilla は、火曜日に変更になります

- -

様々な理由があって、about:mozilla ニュースレターの発行を火曜日に変更することにしました。 このことによって、提出の締切が金曜日までに延長され、発行プロセスが単純化されます。この変更についての意見や質問は、直接、news-editor@mozilla.org へ送ってください。

- -

Firefox 3 Beta 2

- -

Firefox 3 Beta 2 が、12 月 18 日にリリースされ、ダウンロード可能になっています。これは開発者向けの 10 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。さらなる詳細と情報は、DevNews の投稿（日本語版 を参照してください）。

- -

アドオン開発者たちへ - Firefox 3 がやって来る！

- -

Firefox 3 Beta 2 が登場したのに伴い、今こそ、アドオン開発者が自らのアドオンを Firefox 3 対応に更新するための絶好の機会です。 addons.mozilla.org のメンバーが、そこでホストされている拡張の更新で考慮すべきいくつかの情報を提供しています。Mozilla Developer Center は、Firefox 3 での新しい機能と変更についてのページを提供しています。さらなる情報は、Mark Finkle のブログ投稿を参照してください。

- -

Weave の紹介

- -

Web が発展し続け、私たちの生活のより多くの部分がオンラインに移行するにつれて、私たちは、Firefox のような Web ブラウザが、それらのデータと個人情報に対するユーザコントロールを高める一方で、豊かな体験を提供するためにより多くのことができる、また、するべきだと、信じています。探究すべき重要なものの一つは、ブラウザとオンラインサービスのより深い統合を通した、デスクトップと Web の融合です。

- -

Weave は、私たちがこの統合を正式に探究する中での新しい Mozilla Labs のプロジェクトです。Weave は、Firefox のおもてなしを促進し、個人情報に対するユーザコントロールを高め、そして、開発者が革新的なオンライン体験を構築するための新しい機会を提供するための方法を見つけることに焦点を当てています。 さらなる情報は、Mozilla Labs のブログ投稿を参照してください。

- -

support.mozilla.com が、ライブチャットによるサポートを開始

- -

12 月 28 日に、Mozilla は、Firefox ユーザに対してのライブチャットサポートを公式に開始しました。ナレッジベースやフォーラムでサポート質問への回答を見つけることができないユーザが、よりスキルがある Firefox ユーザから、問題を解決するためのヘルプをリアルタイムで受けることができます。

- -

私たちは、月曜日から、金曜日までの一日 3 時間 を設定し、私たちの現在のボランティアがオンラインで質問を受け付けます。 より多くの人々が他の時間帯に参加すれば、私たちは時間を拡大するつもりです。しかし、時間を拡大するためには、より多くの Firefox ヘルパーが必要です。あなたが上級ユーザの助けを必要としないならば、経験をサポートの手助けとして提供してください。これは、Mozilla コミュニティを発展させる素晴らしい方法です。さらなる情報は、SUMO に用意されています。

- -

2007 年の反省

- -

Mitchell Baker は、いくつかの 2007 年の彼女の反省をブログに書いています。「私たちは、より多くのことをし、それらの全てが Mozilla のオープンソースの DNA と共同的作業スタイルに深く根ざしています。私たちの旗艦製品である Firefox を恒常的に使う人々の数が今年 2 倍になりました。私たちは、Firefox 単体で 125 百万人を超える人々をサポートしています。私たちは彼らに参加、共有された意思決定、透過性の原則を組織化することを基にした世界クラスのおもてなしを提供しています。世界中の人々が Mozilla を彼ら自身のものにし、私たちは本当にグローバルな現象になっています」。さらなる内容は、彼女のブログ投稿を参照してください。

- -

Spread Firefox 2 が稼働

- -

Spread Firefox (SFX) の真新しいバージョンが立ち上がりました。小さく、非営利組織であるので、Mozilla Foundation は、Firefox を世界に売り出すという目的のためのリソースが非常に限られています。SpreadFirefox は、この欠点を補うために作られ、開発を動かし、Firefox をテストするコミュニティ発展の同じ原則で設立されました。私たちは、熱狂的なボランティアからなる大きなコミュニティが達成できないことは何もないと信じています。そして、このサイトは、コミュニティを、制限のないリソースを持つ競争者さえ匹敵することができない、一つの結束したマーケティング力に一体化させるために存在します。さらなる情報と、発展のために、全てが新しい Spread Firefox サイトを訪れてください！

- -

Red Herring Global 100 内に Mozilla

- -

「10 年間、Red Herring の編集部が世界中の企業家精神を勤勉に調査しました。技術産業の経営陣、投資者、オブザーバーが Red Herring 100 のリストを、分裂と革新の次の波を導くであろう幸先の良いスタートアップを発見し、擁護する貴重なものだとみなしました」。 Red Herring 100 Global Winners は、シアトル、ワシントンでの Red Herring Global 2007 Awards Ceremony で発表され、私たちはとても光栄なことに、Mozilla が 2007 年のこの権威あるリストに含まれているとの発表を受けました。

- -

フォクすけテーマが用意されました！

- -

Mozilla Japan のマスコットキャラクターである、フォクすけが、真新しい Firefox テーマになりました。このテーマだと、ページが読み込まれる間、小さなフォクすけが走るのを楽しむことができます。試して、彼で楽しんでください！

- -

Firefox 3 のローカライズされたブラウザのデフォルトのガイドライン

- -

ローカライズされたブラウザのデフォルト（検索プラグイン、RSS リーダー、ブックマーク、プロトコルハンドラ）を選択するためのガイドラインのまとめが用意されました。私たちはこれらのガイドラインがローカライザーが彼らの言語とロケールでのブラウザのデフォルトの推奨を作る助けになることを望みます。変更を作成するための手続きは、Firefox 2 のときと同じです。変更の締切は、Firefox 3 Beta 3（予定では:2008 年 1 月 中旬） までです。何か質問がある場合は、Mic（mic@mozilla.com）に連絡してください。さらなる特定の情報と指定は、ガイドラインを参照してください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080115/index.html b/files/ja/devnews/20080115/index.html deleted file mode 100644 index 482a7fa6ed..0000000000 --- a/files/ja/devnews/20080115/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 'about:mozilla - 新しい CEO、FOSDEM、SeaMonkey、Places Testday、2 つの賞、などなど' -slug: DevNews/20080115 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

John Lilly が、Mozilla Corporation の CEO に任命されました

- -

2008 年1 月 7日に、Mozilla は、John Lilly が Mozilla Corporation の最高執行責任者 (COO) から最高経営責任者 (CEO) に異動することを 発表しました。Mitchell Baker は、Mozilla Corporation の会長として引き続きその任に当たります。詳細は、公式プレスリリース（Mozilla Japan による和訳）と FAQ（Mozilla Japan による和訳）を参照してください。また、John と Mitchell 両人が、この変更に関するブログ記事を書いています。

- -

ブリュッセルで行われる FOSDEM 2008 に、Mozilla が参加します

- -

ヨーロッパにおける最大のフリーソフトウェアとオープンソースのイベントである、FOSDEM が、2月 23、24日の週末にかけて、ブリュッセルで行われます。入場は無料です。

- -

2日間のイベントの間、Mozilla や他のオープンソースの貢献者が集まり、全ての人のために開かれている、多くの Developer Room を訪れます。Mozilla Europe のメンバーの多くがそこにいます。また、海外からの訪問者も何人かいます。

- -

私たちの FOSDEM 2008 ウィキページへ行けば、さらなる情報を見つけることができます。ホテルやトラベルのためのスポンサーシップへの申込みに興味があるならば、Wiki でsそのことを表明し、Anne-Julie Ligneau (ajligneau -at- mozilla-europe.org) に連絡してください。Mozilla Room で話したい人も探していますので、Mozilla が好きな人たちと知識を共有したいと思ったなら、 Brian King (brian -at- mozdev.org) に連絡してください。 - まだわずかに空きがあります。

- -

SeaMonkey: 新しい Council、Alpha 基準

- -

Mozilla のインターネット統合アプリケーションの開発を続けるコミュニティの取り組みである、SeaMonkey プロジェクト（日本語での SeaMonkey プロジェクトの情報は、もじら組もじら団 のサイトを参照してください）は、「SeaMonkey Council」と呼ばれている コミュニティを主導しているプロジェクトを再編成しました。 Chris Thomas がチームを去り、Mark Banner、Karsten Düsterloh、そして、Andrew Schultz が Council に参加することになりました。

- -

開発者サイドでは、Firefox、Thunderbird 及び他の Mozilla ベースアプリケーションと共有している、よりモダンなフレームワークをスイートで利用するための作り直しで忙しくなっています。この SeaMonkey 2 の最初のアルファリリースのための一連の基準が 投稿されています。

- -

1 月 18 日金曜日は、Places Testday

- -

1 月 18 日金曜日に行われる予定の Places Testday のために、Mozilla QA コミュニティに参加してください。Firefox 3 Beta 3 のための準備として、新しい「Places」によるブックマークと履歴システムをテストすることになっています。このイベントは、午前 7 時から午後 5 時まで行われる予定です。Test day のため準備の仕方と参加方法についてのさらなる情報については、Mozilla の QA ポータルである QMO を参照してください。

- -

Mozilla Support コミュニティは、ボランティアを探しています

- -

Mozilla コミュニティに参加したいならば、今がチャンスです。Mozilla Support コミュニティは、SUMO (support.mozilla.com) での新しい 「Live Chat」機能のスタッフを助けるためのより多くのボランティアを探しています。ライブチャットは、月曜、水曜、金曜の午前 9 時から午後 3 時、及び、火曜、木曜の午後 12 時から午後 4 時まで行われています。しかしながら、より多くのボランティアが必要です。参加したいのでしたら、さらなる詳細は、Majken のブログの投稿を参照してください。

- -

Planet Mozilla への最近の追加

- -

Mozilla コミュニティの主要なブログアグリゲータである、Planet Mozilla は、何人かの新しいメンバーをブログロールに加えました。 これらには、SeaMonkey trunk tracker の feed、Majken Connor、Madhava Enros、Matthew Gertner の「Just Browsing」ブログ、 Mic Berman、Michael Ventnor、Smokey Ardison、Zbigniew Braniecki、そして、Brad Lassey が含まれています。 Planet Mozilla ブログに、これらのメンバーと彼らが何をしているのかについてのさらなる情報があります。

- -

Mozilla が「Top 20 Companies to Watch in 2008」のうちの 1 つに

- -

Linux Magazine は、Mozilla を「Top 20 Companies to Watch in 2008」に選びました。 「水平線上の Firefox 3.0 に関連して、私たちは、MozCorps のメンバーが2つの理由で注目するほど重要だと考えています。第一に、Firefox は、過去数年間に渡って、ゆっくりながらも確実にマーケットシェアを伸ばしているからです。第二に、Web アプリケーションは、ユーザにとってますます重要になりつつあり、Firefox は、より充実した Web アプリケーションを可能にする最前線に立っています。特に、Firefox 3.0 で予定されているオフラインアプリケーション上の動作は、Web アプリケーションを作成するベンダーにとって非常に重要なものとなり、それらのアプリのユーザにとっても重要になるだろうからです」。さらなる詳細は、Linux Magazine の投稿を参照してください。

- -

Firefox が .Net Magazine の「Open Source Application of the Year」を勝ち取りました

- -

Firefox は、.Net Magazine がスポンサーをしている .Net Awards において、Open Source Application of the Year を勝ち取りました。 入賞者は、全て素晴らしいオープンソースプロジェクトである、Ruby on Rails、WordPress、Drupal、そして、Open Office です。解説、コメントの引用、さらなる情報は、.Net magazine award の発表にあります。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080122/index.html b/files/ja/devnews/20080122/index.html deleted file mode 100644 index 663e283939..0000000000 --- a/files/ja/devnews/20080122/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 'about:mozilla - NVDA への助成金、Fx3b3 スケジュールが更新、SUMO、Tamarin、アドオン、などなど' -slug: DevNews/20080122 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla Foundation が NVDA へ助成金

- -

Mozilla Foundation の気前のよさと支援のおかけで、NV Access は、James Teh を NVDA (NonVisual Desktop Access) の開発に取り組むためのフルタイムの開発者として雇うことが可能になりました。Mozilla Foundation は、 NVDA に大変興味を持っていて、このプロジェクトの目標の一つは、Firefox や Thunderbird のような Mozilla 製品に対する素晴らしいサポートを提供することです。

- -

2008 年に渡って US$80,000 を提供するこの助成金は、NV Access が Mozilla 製品へ主な焦点をおいて、NVDA の改善と保守に取り組むために James Teh をフルタイムで雇用することを可能にします。NV Access と Mozilla は、ともに、視覚障害ユーザが常に Microsoft Windows オペレーティングシステム上のアプリケーションにアクセスするときの自由な選択肢及びフリー・オープンソース製品を用いて他のコミュニティに移行する選択肢を保証することを望んでいます。さらなる情報は、NVDA プロジェクトのブログの投稿を参照してください。

- -

Firefox 3 Beta 3 のスケジュールが更新

- -

1 月 15 日の Firefox 3 ミーティングで、1 月 29 日に フリーズ日が延期することが決定されました。この計画は、ビルドが始まる前の週の残りに静かなフリーズを設けるためのもので、Beta 2 で用いられたのと同じタイムラインです。このスケジュールでは、ビルドが 2 月 4 日月曜日の午前に始まることになっています。Beta 3 に含みたいローカライゼーションの変更は、全て、UTC 午前 8 時までにチェックされる必要があります。さらなる情報は、Mike Connor の mozilla.dev.planning への投稿を参照してください。

- -

SUMO が Firefox のヘルプコンテンツをインポート中

- -

全てのローカライザーは、support.mozilla.com (SUMO) チームが現在の製品内のヘルプコンテンツを Firefox から SUMO の Web サイトにインポートすることを開始したことに注目すべきです。まず SUMO に コンテンツを移動した後、それを Firefox 3 のためにアップデートすることになっています。Firefox 3 は、ヘルプメニューから直接 SUMO の Web サイトを参照する予定になっているので、コンテンツの移行と更新は、最優先事項です。

- -

ヘルプコンテンツは Firefox 内ではなく、SUMO 上に存在することになるので、全てのローカライザーは、古い場所に大きなコンテンツのチェックインをすることを避けるべきです。それらの変更は、SUMO に再インポートしなければならないかもしれないからです。このプロジェクトについての最近のニュースは、mozilla.dev.l10n ニュースグループを参照してください。

- -

FOSDEM での Firefox 3 Add-on Compatibility Workshop

- -

ヨーロッパのアドオン開発者であるか、FOSDEM カンファレンスに参加する予定ならば、2月 23 日、24 日に行われるアドオンを Firefox 3 互換にするためのワークショップ/ハッキングセッションに参加してください。Mark Finkle (mfinkle) が、新しい API と Firefox 3 で実装されるものの利点を得るためのテクニックの解説を行う予定です。Carsten Book (tomcat) は、アドオンのメモリ使用とパフォーマンスをチェックするためのテストの試みについての解説と案内を行う予定です。

- -

このワークショップは、他のアドオン開発者と出会い、アイデアを交換するための、また、アドオンの文書化と開発をどのように向上させるかを私たちにフィードバックするための素晴らしい機会を提供します。 参加に興味があるなら、Mozilla Wiki にサインアップシートが用意されています。私たちもまた、このセッションがカンファレンスの前の金曜日に計画されるべきかどうかのフィードバックを求めています。イベントについてのさらなる情報は、chofmann-at-mozilla.org に連絡してください。

- -

Tamarin Tech Summit - 2 月 1 日、サンフランシスコ

- -

Adobe Systems は、Tamarin Tech Summit を 2 月 1 日、Adobe サンフランシスコで行います。このミーティングの目的は、アクティブかつ潜在的な貢献者とプロジェクトのためのツール、進行レポート及び計画を一緒に共有することです。

- -

ディスカッションのトピックには、プロファイリングツール群、ES3 との互換性とパフォーマンス、Firefox への取り込み（ActionMonkey)、トレースベースのコンパイルが含まれています。さらなる情報が、tamarin-devel メーリングリストの投稿にあります。また、会議事項の予定が Mozilla Wiki に投稿されています、

- -

Camino 1.6 Beta 2 がリリースされました

- -

Camino 1.6 の機能の最新のプレビューである、Camino 1.6 Beta 2 が、今利用可能です。このバージョンには、OpenSearch 検索エンジンのサポート、新しい検索ツールバー、Spotlight と Quarantine のメタデータに対するサポートの拡張が含まれています。このリリースはベータソフトウェアであり、不安定で、日々の利用には適さないかもしれません。Camino の安定したバージョンを利用したいなら、Camino 1.5.4 をダウンロードしてください。

- -

Firefox に対して、Developer.com Award

- -

1月15日に、Developer.com Product of the Year Awards の受賞者が発表され、Mozilla Firefox は、「Development Utility of the Year」を受賞しました。受賞者と最終選考者の完全な一覧は、Developer.com にあります。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080129/index.html b/files/ja/devnews/20080129/index.html deleted file mode 100644 index d7bd127127..0000000000 --- a/files/ja/devnews/20080129/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 'about:mozilla - 10 年、Firefox 3 ベータフリーズ, Mozilla モバイル、APNG、などなど' -slug: DevNews/20080129 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla: 祝 10 年

- -

1998 年 1 月 22 日に、Netscape は、Netscape Communicator のソースコードをリリースし、Mozilla Project のための基金を用意するという計画を初めて発表しました。10 年後の現在、 Mitchell Baker は、「2008 年は祝うべき年です。Mozilla は、今年で 10 年を迎えました。オープンソースの歴史、コミットメント、製品開発、コミュニティの成立と遂行の10 年間。驚きの視点と多様性を持ったオープンソースプロジェクト。誰もが想像したよりも開かれ、参加方式であるインターネットの一部。インターネットが何であるべきかという強い声。これが、素晴らしい10年です。」Mitchell の投稿の残りは、彼女のブログ上で読んでください。

- -

Firefox 3 Beta 3 のコードフリーズは今日です！

- -

Firefox 3 Beta 3 のコードフリーズは今日だという単なるリマインダです。ちなみに、ローカリゼーションのためのストリングフリーズは、先週金曜日に行われました。計画では、ビルドを始める前の週に静かなフリーズ期間を設けることになっています。これは、Beta 2 で用いられたのと同じタイムラインです。このスケジュールでは、2 月 4 日の月曜日の朝にビルドが始まることになります。さらなる情報は、Mike Connor と Mike Beltzner の mozilla.dev.planning への投稿を参照してください。

- -

EV 証明書が Firefox 3 ナイトリーで表示されるようになりました

- -

EV 証明書サポートが Firefox 3 ナイトリービルドで有効になり、Verisign の EV ルート証明書がテスト目的で認証されています。これが意味することは、例えば、British Airways のサイトのような、Verisign が発行した EV 証明書を持つサイトに行ったときに、サイト識別ボタンがサイトオーナーの名前をピックアップし、それを緑の背景で表示します。さらなる情報、スクリーンショット、テストとフィードバックのためのリクエストは、Johnathan Nightingale のブログ投稿を参照してください。

- -

Mozilla Mobile プロトタイプユーザインターフェースが投稿されました

- -

Mozilla Mobile チームは、楽しめる 2 つのプロトタイプモバイルユーザインタフェースを投稿しました。一つは、ボタン操作のデバイスで、もう一つは、タッチスクリーンのデバイスです。今こそ、モバイルプロジェクトに参加する素晴らしいタイミングであり、チームはこれらの UI についてのフィードバックを歓迎します。さらなる情報が Doug Turner のウェブログにあります。また、Ars Technica が、このプロトタイプについての短い記事を書いています。

- -

Mozilla Europe が 1月 29～31日 にパリで行われる Solutions Linux and OpenSource 2008 に参加します

- -

Mozilla Europe が 1 月 29 日（今日）から 1 月 31 日までパリで行われる Solutions Linux and OpenSource 2008 カンファレンスに参加します。Mozilla Europe ブースにあいさつをするために立ち寄ってください。もしくは、イベントの間、彼らが参加するカンファレンスに出席してください。

- -

Firefox 2.0.0.12 が 2 月 12 日にリリースされる予定です

- -

Firefox 2.0.0.12 がコードフリーズに入り、現在、2 月 12 日のリリースが予定されています。リリースとスケジュールについてのさらなる情報は、Firefox 2.0.0.12 リリースウィキページにあります。

- -

「アドオン衛生学」ハッキングソーシャルは、今夜です!

- -

Mozilla ハッカーとホビイストは、今夜午後 6 時にピザとドリンクのためにマウンテンビューの Mozilla HQ に来てください。addons.mozilla.org のエディターになるための概要を提示し、そこからリリースされていない拡張のレビューとテストを行います。さらなる情報は、Upcoming のイベントページにあります。参加する予定があるなら、そこで返答すべきです！

- -

Super Techies インタビュー：Brendan Eich

- -

「Super Techies インタビューで、Mozilla CTO の Brendan Eich が、ZDNet の編集長の Dan Farber に、シリコンバレーでのプログラマとしての彼のキャリアについて語っています。Eich は、Netscape での彼の初期の仕事である JavaScript プログラミング言語の開発、ブラウザ戦争における Microsoft との戦い、そして、彼の Mozilla での現在の役割を説明し、企業の旗艦製品である Firefox ブラウザのための新しい技術の拡大を展望しています。」ZDNet でビデオを見てください（builder by ZDNet Japan の日本語字幕付き版）。

- -

新しい APNG ポータルサイト

- -

Stuart Parmenter は、次の内容のブログを投稿しています。「私は最近、セネカカレッジの Brendan Sera-Shriar から、彼が PHUG からのメンバーと一緒に最近立ち上げたこの APNG ポータルサイト についての話を聞いた。このサイトは、素晴らしく、Firefox 3（と Opera 9.5 と続く他の製品）における素晴らしい新機能についての豊富な情報を提供する助けになると思います。そこには、いくつかのクールなサンプルがあり、提供があるならば、さらに加えられるでしょう。」

- -

アドオン開発者へ: Firefox 3 への更新を開始する時です！

- -

Mark Finkle は、「私たちは、拡張開発者に対して彼らの拡張を Firefox 3 でも動作するように更新する作業を始めるべきだとの呼びかけをしています。Firefox の変更のために拡張が動作しなくなることは、決して楽しいものではありません。しかし、全ての人が、プラットフォームをより良くしたいと望んでいます。そうするために、私たちはいくつかの卵を割らなけらばなりませんでした。」拡張を Firefox 3 に対応させる手助けをする多くの情報があります。開発者のための Firefox3、拡張機能を Firefox 3 用に更新する方法、Firefox 3 に対してアドオンとテーマの互換性を保証する方法、そして、Mark のブログ投稿、その他です。助けを得ることができる IRC チャンネルもあります。irc.mozilla.org サーバの #extdev です。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080205/index.html b/files/ja/devnews/20080205/index.html deleted file mode 100644 index e52703b67d..0000000000 --- a/files/ja/devnews/20080205/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 'about:mozilla - Firefox 2、Firefox 3、Thunderbird、アドオン、アイスクリーム、などなど' -slug: DevNews/20080205 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 2.0.0.12 のスケジュール

- -

1 月 29 日に Mozilla は、新しいセキュリティ脆弱性のレベルの評価を高に上げました。私たちのユーザのセキュリティは最も重要ですから、Firefox 2.0.0.12 のリリーススケジュールは、可能な限り、押し上げられています。現在予定されているリリーススケジュールは、2 月 7 日か 8 日です。セキュリティの脆弱性についてのさらなる情報は、Mozilla Security ウェブログを参照してください。 2.0.0.12 についての追加情報は、Firefox 2.0.0.12 プランニングページを参照してください。

- -

Firefox 3 Beta 3 のコードがフリーズされました

- -

Mozilla Developer Center でのアナウンスによると、Firefox 3 Beta 3 のコードフリーズが 1 月 29 日 遅くに行われました。コードフリーズと現在のツリーマネジメントの工程についてのさらなる情報は、DevNews の投稿を参照してください。さらに、Firefox 3 ベータの 4 番目についての計画が現在ありますが、現在用意されているスケジュールはありません。

- -

フランスにおける Thunderbird

- -

David Ascher は、ブログに次のように書いています。『AFP（France の最大のニュース機関） は、 フランス国家憲兵隊が、7 万席を Ubuntu、OpenOffice、Firefox、Thunderbird を使用する、オープンソーススタックへ移行する決定を挙げて、「フランスは、Microsoft に打撃を与えた」と報じています。

- -

同様に印象的なこととして、Tristan Nitot が フランス国防省代表者との会話で、彼らが Postfix を メールサーバーとして、また、20 万 ユーザ（これは、上述の 7 万 を含みません）になる、多くのユーザに対して、Thunderbird を推奨メールクライアントとして推奨することを指摘していることを報告（フランス語で）しています。』

- -

Firefox アドオン が 6 億ダウンロード達成

- -

Blog of Metrics は、次のように報告しています。「今週のはじめに、AMO が 600 億回目のアドオンのダウンロードを提供しました。それは、新規ダウンロードであり、更新を含んでいません。私たちは、現在、4000 以上のアドオンをサイト上にホストしていて、毎日 80 万から 100 万ほどダウンロードされています。サイトは 1 日あたり 450 万のページビューがあり、これは、更新のチェックやブロックリスティングを含んでいません。」 アドオン更新 ping の詳細とこれが意味することについてのさらなる情報は、Metrics のブログ投稿を参照してください。

- -

Mitchell Baker が McKinsey Quarterly でインタビューされました

- -

数か月前に、Bob Sutton と Lenny Mendonca が Mitchell Baker にインタビューを行い、そのインタビューが最近 McKinsey Quarterly（要登録ですが、無料です） 内に掲載されました。Mitchell は、Netscape 内でのオリジナルのオープンソースプロジェクトの主導と、Mozilla を始めるためのプロジェクトのスピンアウトについて話しています。さらなる情報は、Bob Sutton のブログ投稿を参照してください。

- -

Mozilla Toronto が CBC に登場

- -

2 月 1 日に、Mozilla Toronto が CBC Toronto ニュースで特集されます。この特集の内容は、セネカカレッジと Mozilla Toronto オフィス両方の映像を含む Firefox についての話と Dave Humphrey と Mike Shaver 両人へのインタビューです。その完全なビデオが、現在 Google video にあります。

- -

about:icecream

- -

時々私たちのコミュニティのメンバーのうちの一人が、特別なことについて書き、 全員の一日を Mozilla にします。 Melissa が彼女のウェブログで説明しているように、先週の火曜日は、これらの日々の一つで、Brody という名前の少年が、手紙と 2 つの絵を書きました。それから、これらの絵の一つは、 about:icecream という Firefox のアドオンに含まれるようになり、それは、私たちを毎日とってもハッピーにしてくれます。微笑みが欲しいならば、メリッサのブログ投稿をチェックしてください。そして、Firefox 3 ベータを実行しているなら、今日、about:icecream をインストールしてください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080207-2/index.html b/files/ja/devnews/20080207-2/index.html deleted file mode 100644 index ad94ed2bff..0000000000 --- a/files/ja/devnews/20080207-2/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: セキュリティと安定性が更新された Firefox 2.0.0.12 が現在ダウンロード可能です -slug: DevNews/20080207-2 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.12 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Firefox 2.0.0.12 リリースノートをご確認ください。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/devnews/20080207/index.html b/files/ja/devnews/20080207/index.html deleted file mode 100644 index 7a92c2a581..0000000000 --- a/files/ja/devnews/20080207/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Firefox 3 Beta 3 は 来週初めの予定 -slug: DevNews/20080207 -tags: - - DevNews - - 'DevNews:General' ---- -

月曜日 PM 07:20 PST 、ブランチ分けとタグ付けのために開発チームからビルドチームに管理が委譲され、Firefox 3 Beta 3 となる予定のビルドを構築およびテストする作業が開始されました。いつものように、ビルドチームは一連のリリース候補版を作成し、それを品質保証チームがテストします。この活動に協力したければ、今週の金曜日 02/08 に行われる Firefox 3 Test Day にどなたでも参加できます。

- -

テストが完了していないリリースの配布を制限するため、リリース候補版のダウンロードディレクトリへのリンクはすべてこの告知にリダイレクトされます。ユーザーの皆さんが注意と情熱を払っていただくのはありがたいのですが、テストが完了するまでは待っていただきたいと思います。テストがすべてうまくいけば、太平洋標準時刻 (PST) の 02/12 夕方には Firefox 3 Beta 3 がリリースされるでしょう。Firefox 3 Beta 3 のリリースチェックリストで経過を追う事ができます。

diff --git a/files/ja/devnews/20080212/index.html b/files/ja/devnews/20080212/index.html deleted file mode 100644 index c732591ba0..0000000000 --- a/files/ja/devnews/20080212/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '20080212' -slug: DevNews/20080212 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla モバイルチームが東京に

- -

Mozilla のモバイルチームの Christian Sejersen と Jay Sullivan が、2 月 18 日に行われる Mobile Monday Tokyo に出席するために東京へやってきます。彼らは、Mozilla のモバイル戦略について話し、様々なプロトタイプと作業中のモデルを紹介する予定です。残念なことにイベント参加は無料ではありませんが、Mobile Monday Tokyo Web サイトで参加登録することができます。

- -

SUMO - l10n は今！

- -

Firefox のサポート Web サイトである、support.mozilla.com には、現在、より良いローカリゼーションツールがあります。もちろん、なされるべき、より多くの作業がありますが、ブラウザの受け入れ言語の設定に基づく自動言語判定、ページ URL への定義済みロケール指定、そして、いくつかの他のツールとプロセスへの改善を含む、多くの重要といえる便利な機能が提供されるようになりました。最近の変更についてのさらに多くの情報は、SUMO ブログにあります。

- -

John Lilly が GigaOM ショーに登場

- -

Mozilla の新 CEO、John Lilly が先週の GigaOM ショーに登場し、そこで彼は、最近の経営上の変化、Firefox 3 のリリース予定、Mozilla のミッション、Mozilla の子会社である新しい「MailCo」、そして、いくつかの他の話題について話しました。たった 15 分以下の長さである ビデオが Revision 3 で視聴可能です。

- -

Mozilla の Web サイトプライバシーポリシーの修正版候補

- -

Mozilla の Web サイトは、トップ訪問 Web サイトのうちのいくつかになるまでに成長し、この莫大なトラフィックの増加は、現在の Web 解析ツールの許容量を超えてしまいました。新しいツールが選定されれば、新しい必要量を満たすようにスケールアップしますが、いくつかの既存の Web サイトプライバシーポリシーの変更が必要になります。Basil Hashem は、提案されている変更についてブログに書き、Mozilla コミュニティからのフィードバックを求めています。提案されている変更とフィードバックを提供するためのフォーラムへのリンクを含むさらなる情報は、Basil の ウェブログを参照してください。

- -

Firefox 2.0.0.12 がリリースされました

- -

先週の木曜日に、Firefox 2 の最新のセキュリティと安定性の更新となる、Firefox 2.0.0.12 がリリースされました。最新のセキュリティの修正のバッチの恩恵を得るために、すべてのユーザがこの最新のリリースに更新することが推奨されています。もしあなたがいまだに Firefox 1.5.0.x を利用しているならば、Firefox 2 シリーズに更新することを強くお勧めします。なぜなら、Mozilla は、2007 年 5 月 に Firefox 1.5.0.x のサポートを中止しているからです。更新を行うには、単に、ヘルプメニューから「ソフトウェアの更新を確認...」を選ぶだけです。このリリースについてのさらなる情報は、Firefox 2.0.0.12 リリースノートを参照してください。

- -

Camino 1.5.5 がリリースされました

- -

Camino プロジェクトは、最近、多くのセキュリティと安定性の更新を含むメンテナンスリリースである、Camino 1.5.5 をリリースしました。すべての Camino ユーザがこの最新のリリースに更新することが推奨されています。さらなる情報は、Camino 1.5.5 リリースノートにあります。

- -

Seamonkey 1.1.8 がリリースされました

- -

先週の木曜日に、SeaMonkey プロジェクトは、オールインワンインターネットスイートの新しいバージョンをリリースしました。このリリースは、いくつかのセキュリティの脆弱性を修正し、旧バージョンで発見されたいくつかの小さな問題を修正しています。すべての SeaMonkey ユーザがこの最新バージョンに更新することを強く推奨します。さらなる情報は、SeaMonkey ブログにあります。

- -

XPCOM リファレンス が更新されました

- -

先週、Neil Deakin が、XULPlanet の XPCOM リファレンスが最新の XPCOM の変更を反映するために更新され、Mozilla 1.9 と Firefox 3 に対応した最新のものになっている、とブログに書いています。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080219/index.html b/files/ja/devnews/20080219/index.html deleted file mode 100644 index 33e44e608d..0000000000 --- a/files/ja/devnews/20080219/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: '20080219' -slug: DevNews/20080219 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla Messaging 設立

- -

メールに焦点を当てた、非営利法人 Mozilla Foundation の子会社である新組織、Mozilla Messaging が、今日、業務を開始したことを発表しました。Mozilla Messaging が最初に注力することは、カレンダーの統合、より良い検索、全体的なユーザエクスペリエンスの充実を含む、重要な改善が行われるであろう、Thunderbird 3 の開発です。Thunderbird は、世界中の何百万人に利用され、Firefox と同じオープンソース開発モデルを用いて開発されている、無料で、オープンソースの E-mail アプリケーションです。Mozilla Messaging 設立についてのさらなる情報は、プレスリリース（Mozilla Japan による和訳）を参照してください。

- -

Firefox 3 Beta 3 がリリースされました

- -

Firefox 3 Beta 3 が、現在ダウンロード可能です。これは、開発者向けの 11 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。フィードバックを必要とする新機能の概要については、Beta アナウンスをしている DevNews のブログ投稿を参照してください。

- -

Extend Firefox 2 コンテスト の受賞者

- -

Extend Firefox 2 コンテストが終了し、受賞者が発表されました！コンテストには、世界中の人々から、数千時間という大変な作業に相当する、100 エントリを超える応募がありました。3 人の大賞受賞者は、次の通りです。:Tony Farndon (UK) による Minimap Sidebar Exension、Massimiliano Mirra (Italy) による SamePlace、 Jay Meattle (USA) による Shareaholic。12 人の 入賞者と様々な受賞パッケージを含む、コンテストについてのさらなる情報は、Mozilla Labs のブログ投稿を参照してください。

- -

YDN で Flickr のアップローダー についてのビデオが公開

- -

Flickr Uploadr の バージョン 3.0 が登場したとき、Flickr ユーザは、彼らの写真をオンラインに投稿するための非常により役立つツールを手に入れました。その出来事の裏にある重要な変更点として、Mozilla の技術、具体的に言うと、 Mozilla ランタイムパッケージである XULRunner を用いて、Flickr Uploadr が作成されるようになったということがあります。Yahoo Developer Network (YDN) は、Jeremy Zawodny が Richard Crowley とともに Flickr Uploadr 開発について説明している Experts at Work ビデオを作成しました。Yahoo Developer Network で そのビデオをチェックしてください。

- -

FOSDEM ‘08

- -

FOSDEM ‘08 カンファレンスが 2 月 23 日から 24 日にかけてブリュッセルで行われます。Mozilla は、Mozilla Developer Room で数々のトークをホストしています。そのスケジュールは FOSDEM サイトで現在公開されています。トークについてのさらなる詳細な説明は、 にあります。 Mark Finkle と Carsten Book によって主導される拡張ワークショップも日曜日に行われますし、Philipp Kewisch が、開発者たちに Mozilla Calendar Project に参加するように勧めるためのハンズオンワークショップを行う予定です。Brian King がこの来るイベントについてブログに書いていますし、Mozilla Wiki の にさらなる情報が用意されています。

- -

Firefox 3 の新機能のついての記事

- -

非常に役に立つ Mozilla Links ウェブログ（日本語版）の作者である、Percy Cabello が、Firefox 3 と その基礎をなす、Gecko レンダリングエンジンの多くの新機能の概要をまとめた、素晴らしい、とても詳細な記事を書きました。Percy は、ビジュアルの一新、Places（新しい 履歴/ブックマーク 機能）、ロケーションバーの変更、タブブラウジング、検索エンジンなどの機能を取り上げています。4 ページの記事である、A deep look into Firefox 3 Beta 3 は、あなたが Firefox 3 の新機能に含まれる予定のものに興味があるならば、断然チェックする価値があります。

- -

Seamonkey 1.1.8 がリリースされました

- -

先週の木曜日に、SeaMonkey プロジェクトは、オールインワンインターネットスイートの新しいバージョンをリリースしました。このリリースは、いくつかのセキュリティの脆弱性を修正し、旧バージョンで発見されたいくつかの小さな問題を修正しています。すべての SeaMonkey ユーザがこの最新バージョンに更新することを強く推奨します。さらなる情報は、SeaMonkey ブログにあります。

- -

Mitchell Baker がヨーロッパへ

- -

先週、Mitchell Baker が、2 月 14 日の French Senate で 「Software - a source of technological and social innovation」の話題について話すために招かれ、ヨーロッパ遊説旅行を行いました。パリへの旅行の間、Mitchell は、ジャーナリストに会う前に数日間 2つの他の国を訪れることにしました。Jane Finette と Tristan Nitot がともに Mitchell の訪問について、ブログに書いています。また、Tristan は、いくつかの写真も投稿しています。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080226/index.html b/files/ja/devnews/20080226/index.html deleted file mode 100644 index b20c422025..0000000000 --- a/files/ja/devnews/20080226/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: '20080226' -slug: DevNews/20080226 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

5 億ダウンロード、私たちが FreeRice.com で祝うことを支援してください

- -

Firefox が、5 億ダウンロードを達成しました。これは、Firefox の歴史の中でまったく驚くべき記録です。この数字が意味することを想像するのは、ちょっと難しいでしょう。いくつか、例を挙げると、ローマのコロッセオ1 万個分のおおざっぱな収容観客数。キログラムで表すなら、ボーイング 747 型飛行機 8500 台分の重さ。5 億ドルあれば、あなたとあなたの 15 人の友だちが、国際宇宙ステーションへ行くことができます。その代わりに、これらの 15 人の友だちにあるひとつのゲームで遊ぶように勧めることで、2 万 5 千人の人々を養うこともできます。あなたの支援によって、私たちは、FreeRice.com で5 億粒の米を必要な人々に寄付するという、もうひとつの記録を打ち立てることができます。私たちを新しいボキャブラリを獲得しながら空腹を満たすのを支援することによっても祝ってください！

- -

Firefox 3 T シャツデザインコンテスト

- -

Mozilla は、Firefox 3 の T シャツコンテストを開始しました。Mozilla コミュニティ(（とそのほか）への私たちの挑戦は、最もクールで、面白い、Firefox 3 をインスパイアした T シャツデザインをつくることです。入賞者は、公開投票で決定され、その作品は、Mozilla Store で 公式の Firefox 3 T シャツとして販売され、その収入は、Mozilla Foundation の利益になります。デザイン応募の締切は、3 月 16 日までです。良いアイデアをひねりだして、あなたの最高の作品を送ってください！さらなる詳細と情報は、Spread Firefox のコンテストページ（参考和訳）を見てください。

- -

新しいアドオンサイトのプレビュー

- -

Mozilla Add-ons のサイト（addons.mozilla.org、もしくは、 「AMO」）は新しいデザインになり、チームは、Firefox 3 が公開される時までに仕上げるためにあなたの助けを必要としています。preview.addons.mozilla.org へ行き、しばらくサイト内を巡ってサイトをチェックしてください。フィードバックをするためには、AMO チームにあなたが思ったことを伝える、もしくは、より重要な問題に対してバグを立てることができます。irc.mozilla.org の #amo チャンネルに参加することもできますし、Webdev ウェブログを追うことで進捗に注目することもできます。新しい点と相違点についての詳細を含んだ、さらなる情報は、Webdev ブログの投稿をチェックしてください。

- -

Mozilla Messaging：参加するには

- -

Mozilla Messaging が先週立ち上がりましたが、彼らは、助けを求めています。Mozilla Messaging プロジェクトに参加する多くの方法があります。単語を拡げたり、開発を助けたり、テストの作業をしたり、翻訳作業に時間を割くなどです。参加するためについてのさらなる情報は、Mozilla Messaging ウェブサイトに用意されています。あなたが Thunderbird を愛し、E メールを素晴らしいものにすることを助けたいと思うならば、サイトをチェックし、今日から参加してください。

- -

今日のセキュリティで最も影響力のある人物の一人に Window Snyder

- -

Mozilla の「」 である、Window Snyder が、eWeek.com による 15 人の今日のセキュリティで最も影響力のある人物の一人という称号を得ました。「前 Microsoft のセキュリティ戦略担当者である、Window Snyder は、レッドモンドのプレイブックから 1 ページを借り、包括的な脅威モデリングと侵入テストルーチンを紹介しました。 Snyder の裏でのセキュリティに関する努力 - 外部のハッカーチームが Firefox 3 上 での模擬攻撃を指揮することを含む - は、オープンソースの代替 Web ブラウザに対して良い結果を生むことになると確信しています。」さらなる情報とリストアップされた他の人物を見るには、eWeek の記事をチェックしてください。

- -

Chris Beard が東京に

- -

Gen Kanai は、Mozilla Labs の VP である、Chirs Beard が、2 件の話をする約束で今週東京に来るだろうということをブログに書いています。2 月 28 日は、ZDNet Japan の 「builder techday: open apis and beyond」で、Mozilla の 観点からの「Open Web」について話します。2 月 29 日は、オープンソースカンファレンス 2008 Tokyo/Spring で講演します。彼は、エキサイティングな新しい Mozilla Labs の開発プロジェクトについての情報を含む Mozilla での最近の活動の概要を参加者に提供します。彼はまた Web の将来に対しての彼のビジョンとオンライン生活を発展させるためのオープンソースの役割についても話します。これらのイベントについてのさらなる情報は、Gen のブログ投稿を参照してください。

- -

Firefox が Webware 100 のファイナリストに

- -

Firefox は、「Webware 100」アワードの「ブラウザ」カテゴリでのファイナリストの称号を得ました。アワードへの投票は公開でなされ、昨日始まりました。勝者は、サンフランシスコで行われる Web 2.0 Expo の前日である、4 月 21 日に発表される予定です。さらなる情報、及び、投票するために、Web 2.0 Expo の Webware 100 アワード Web サイトを参照してください。

- -

EFF Pioneer アワード

- -

 は、最近、「EEF Pioneer Awards」の 2008 年の受賞者を発表し、Mitchel Baker と Mozilla Foundation は、受賞者の称号を得ました。「Mitchell Baker は、Mozilla Foundation の 会長であり、オープンソースの Mozilla プロジェクトのスポンサーシップを通して、インターネットのオープン性、イノベーション、機会を促進することに献身しています。Mozilla Foundation は、Firefox ブラウザ、Thunderbird E メールアプリケーション、その他の Mozilla ソフトウェアが関係する開発プロジェクトに対して、助成金、法律サービス、その他のサポートを提供しています。」今年の他の受賞者を含む、アワードについてのさらなる情報は、EFF Pioneer AWards のサイトとブログ投稿を参照してください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080304/index.html b/files/ja/devnews/20080304/index.html deleted file mode 100644 index ec31f9e325..0000000000 --- a/files/ja/devnews/20080304/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '20080304' -slug: DevNews/20080304 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

Firefox 3 Beta 4 及び 現在のツリーステータス

- -

先週の Firefox/Gecko ミーティングで議論されたように、Firefox 3 Beta 4 は、数日間コードフリーズされた後、ビルドチームにタギングとリリースのために移譲されます。リリースプロセスについての更新情報は、Firefox 3 Beta 4 リリーストラッキングページを参照してください。DevNews の投稿で概要が説明されているように、ツリーは、ブロッカーと許可されたパッチのために再び開かれました。現在のツリーステータスは、いつものように、Tree Status Wiki ページで確認可能です。

- -

Thunderbird 2.0.0.12 リリース

- -

Mozilla Corporation の安定性とセキュリティ更新プロセスの前進の一部として、 Thunderbird 2.0.0.12 が、Windows、Mac、Linux 向けに、www.getthunderbird.com から自由にダウンロード可能になっています。セキュリティの修正が含まれているため、全ての Thunderbird ユーザがこの最新リリースに更新することを強く推奨します。さらなる情報は、Thunderbird 2.0.0.12 の リリースアナウンスとリリースノート（Mozilla Japan による日本語訳）を参照してください。

- -

お願い：いまだに Thunderbird 1.5.0.x を使用しているなら、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいますので、www.getthunderbird.com から Thunderbird 2 をダウンロードし、アップグレードしてください。

- -

新しい ウィークリー Thunderbird ミーティング

- -

今日（3 月 4 日）から、Thunderbird Project の ウィークリーステータスミーティングが行われる予定です。これらのミーティングは、現在、午前 9:30 太平洋時間に実施が予定されており、週毎の 議題と ダイアル番号とともに、詳細は、mozilla.dev.planning ニュースグループ に投稿されます。さらなる情報は、Thunderbird ステータスミーティング Wiki ページに用意されています。

- -

Google summer of code 始動

- -

Gervase Markham は、ブログに次のように書いています。「Google Summer of Code 2008 が始動しました。Mozilla Project は、今年も参加する要望を出すつもりです。そのためには、2 週間後までに、参加するにふさわしいプロジェクトの一覧を作成する必要があります。去年のように、私たちは、 Firefox、Thunderbird、Camino、Seamonkey、Bugzilla、そして、L10n のためのアイデアを集めています。計画を持っているならば、Brainstorming ページへ進んでください。」さらなる詳細と情報は、Gerv のブログ投稿と Google Summer of Code 2008 のサイトを参照してください。

- -

ロイターにおける Mozilla China の分析

- -

ロイターは、Li Gong が主導している Mozilla China チームの分析をまとめました:Mozilla seeks growth and tie-ups in China market（Mozilla は成長を模索し、中国市場とタイアップする）。Gen Kenai がこの非常に興味深い記事についてブログで取り上げ、参考となるいくつかのリンクを紹介しています。

- -

NPR での Asa Dotzler へのインタビュー

- -

NPR のウェブサイトより「Firefox が小さなブラウザだったときのことを覚えていますか？Mozilla Firefox は、祝 5 億ダウンロードを達成しました。Mozilla の Community Development Director が、オレンジの狐の未来には何があるのかを語ります。」 8 分ほどの音声インタビューを聞くために、NPR のサイトに進んでください。

- -

ECMAScript4 の実装が更新

- -

John Resig は、次のように書いています。「ECMAScript 4 の開発は、重要なフェーズに移行しています。実装者は、上手くやっています。言い換えれば、 ECMAScript 4 の計画を実装し始めているということです。多くの機能が、この時点で考えられており、実装者は、エンジンに必要な変更を統合するために懸命に作業をしています。」現在の ES4 実装ステータス、及び、2 番目のマイルストーンリリースへのリンクについてのさらなる情報は、John のブログ投稿を参照してください。

- -

Miro、Firefox、Joost が、Webware 100 のファイナリストに

- -

Mozilla Links の Percy Cabello は、次にように書いています。「昨年と同様、Firefox が、お気に入りの Web 2.0 アプリケーションの年間アワードである、Webware 100 の ブラウジングカテゴリのファイナリストに選ばれています。今年は、二つの他の Mozilla ベースのプロダクトがビデオカテゴリにノミネートされています。オープンソースのビデオプレイヤー及びアグリゲイターである、Miro と商業の インターネット TV を提供する Joost です。投票は、3 月 31 日までです。」

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080310/index.html b/files/ja/devnews/20080310/index.html deleted file mode 100644 index a540c2af11..0000000000 --- a/files/ja/devnews/20080310/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Firefox 3 Beta 4 がダウンロード可能に -slug: DevNews/20080310 -tags: - - DevNews - - 'DevNews:General' ---- -

注意: 開発者とテスター以外の方には Firefox 3 Beta 4 マイルストーンリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを対象としています。

- -

Firefox 3 Beta 4 がダウンロード可能になりました。これは開発者向けの 12 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。

- -

このマイルストーンでフィードバックが求められている新機能と変更は以下の通りです。

- - - -

(リリースノート の 「新機能」 セクションでこれらすべての機能についての詳細を見ることができます。)

- -

テスターは 35 以上の異なる言語に対応した Windows、Mac OS X、および Linux 用の Firefox 3 Beta 4 ビルド をダウンロードできます。このプレビュー版を使用する前に、必ず リリースノート をすべて読んでください。開発者は Mozilla Developer Center の 開発者のための Firefox 3 に目を通すべきです。

- -

注意: ダウンロードサイトに直接リンクを張らないでください。代わりに、この Firefox 3 Beta 4 マイルストーンの告知へリンクすることを強く推奨します。これは、このマイルストーンがどういうものなのか、何を期待すべきなのか、ダウンロードしてこの開発段階でのテストに参加するべきなのはどういう人なのかをすべての人に知ってもらうためです。

diff --git a/files/ja/devnews/20080311/index.html b/files/ja/devnews/20080311/index.html deleted file mode 100644 index 513aaf0ba7..0000000000 --- a/files/ja/devnews/20080311/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: '20080311' -slug: DevNews/20080311 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3 Beta 4 出荷

- -

Firefox 3 Beta 4 がダウンロード可能になりました。開発者とテスター以外の方には このベータリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを想定していることに注意してください。いつものように、Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。このベータ版でテストする必要がある新しい機能と変更はについてのさらなる情報は、DevNews のブログ投稿（日本語版）を参照してください。

- -

Firefox 3 Beta 5 の予定

- -

で、Firefox 開発チームは、残っている blocker バグの数に基づき、Firefox 3 には 5 つ目のベータが必要であるとの結論を出しました。この追加ベータ版によって、Web サイトの互換性に影響するだろう変更やユーザエクスペリエンスを、フィードバックとテストのために幅広い利用者にさらすことが保証されるでしょう。Beta 5 のための String フリーズの締め切りはすでに過ぎていて、コードフリーズは現在、3 月 18 日に予定されています。このベータ版とその予定についてのさらなる情報は、DevNews のブログ投稿を参照してください。

- -

あなたのアドオン を Firefox 3 対応に更新して、無料の T シャツをもらおう！

- -

Alex Polvi は、次のように書いています「AMO に拡張を登録していますか？それは、Firefox 3 で動作しますか？もしそうならば、AMO へ向かい、Add-ons Developer T シャツを要求してください（Developer Tools > T-Shirt Request からも可能です）。もしあなたの拡張が現在互換性がないならば、の要求は、3 月 18 日までに行ってください。また、あなたのアドオンがチームによって開発されていて、さらにもう 1 枚 T シャツを必要としているなら、私たちに連絡してください。手配するために私たちは全力を尽くします」。アドオンの更新の仕方、もし必要とするならば、助けを得る方法についてのさらなる情報は、Alex のブログ投稿を参照してください。

- -

セネカカレッジに Mozilla Foundation が援助金

- -

Mozilla Foundation は、Mozilla と セネカカレッジの Centre for Development of Open Technology のコラボレーションを推し進めるために、サポートするためにセネカカレッジに 10 万 米ドルの援助金を提供しました。Centre では、セネカカレッジの全教職員と生徒が、Firefox のような Mozilla ソフトウェア製品の開発への貢献を行います。この資金は、新しいカリキュラムを設けたり、すでに存在するカリキュラムを拡張したり、他のアカデミックな団体が利用するための Mozilla カリキュラムを準備するためにために利用されます。セネカカレッジの Mozilla 関連コース、プロジェクト、リソースの完全な一覧は、セネカカレッジの Wiki をチェックしてください。援助金についてのさらなる情報は、プレスリリースを通して得ることができます。

- -

Dehydra：Mozilla コードのための新しい静的チェックツール

- -

Benjamin Smedberg は、Mozilla のコードの質と開発サイクルの改善を助ける新しい静的チェックツールについてブログに書いています。Taras と David によって開発された Dehydra は、コンパイル時に適用されるアプリケーション特有の規則にしたがって、時間を節約し、いくつかの簡単に生成できるコーディングエラーを見つけ出すことを必要とする試みを助けることを可能にします。Dehydra は、まだ開発進行中であり、チームは、このプロジェクトを手伝ってくれるハッカーを探しています。Dehydra、手伝う方法、ツールのビルドの仕方などについてにさらなる情報は、Benjamin のブログ投稿「Statically checking the Mozilla codebase」を参照してください。

- -

Prism のメジャーアップデート、ブラウザ統合への最初のプロトタイプ

- -

Mozilla Labs は、新しいデスクトップ統合の可能性を持ち、より簡単にインストール出来る、ブラウザ統合の最初のプロトタイプを含んでいるメジャーアップデートをリリースしました。Prism は、ユーザに Web アプリケーションをブラウザ外に切り離し、デスクトップ上で直接実行することを可能にさせるオープンソースクラスプラットフォームのプロトタイプです。これは、Web と デスクトップの間にあるユーザエクスペリエンスの断絶を橋渡しし、これら両者の境界線を曖昧にするような新しいユーザビリティモデルを模索する一連の Mozilla Labs の実験の一部です。Prism とこの最新リリースについてのさらなる情報は、Mozilla Labs ブログの投稿を参照してください。

- -

Mozilla が GNOME アクセシビリティ推進プログラムを資金援助

- -

GNOME Foundation は、GNOME のアクセシビリティの全体的な質を改善するとともに、GNOME と 幅広いフリーソフトウェアコミュニティの間にソフトウェアのアクセシビリティへの気づきを宣伝するためのアクセシビリティを推進するプログラムを実施しています。Mozilla Foundation は、GNOME Foundation、Google、Canonical、Novell とともに、5 万米ドルプロジェクトのスポンサーの中の一つです。プログラムは、3 月 1 日にアプリケーションの受け付けを開始し、年末まで継続します。プログラムに参加することに興味がある人は、プロジェクト Web サイトをチェックしてください。さらなる情報は、プレスリリースで得ることができます。

- -

3 人の Mozilla 関係者へのインタビュー

- -

最近、3 人の Mozilla 関係者がインタビューを受けました。John Lilly が、Sarah Lacy に Yahoo でインタビューされました。Johnathan Nightingale が、Crazy Engineers のメンバーに、Firefox と Mozilla での仕事についてインタビューされました。そして、Vladimir Vukicevic が、InternetNews.com にインタビューされました。

- -

Planet Mozilla への最近の追加

- -

最も最近の Planet Mozilla ブログアグリゲーターへの追加は、 Bryan Clark、Mark Smith、Laura Thomson、Marcio Galli、Gavin Sharp、Code Simplicity、Stephen Lau、Jane Finette、 For the Record、そして、Carsten Book の面々です。さらなる情報は、Planet Mozilla ブログを参照してください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080318/index.html b/files/ja/devnews/20080318/index.html deleted file mode 100644 index 21c296f1f0..0000000000 --- a/files/ja/devnews/20080318/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: '20080318' -slug: DevNews/20080318 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3 のメモリ使用量

- -

Web と Web ブラウザが成熟してくるのに連れて、人々は、それまでとは違うものに期待し始めました。Firefox が初めてリリースされたとき、タブでブラウジングし、大量のアドオンを利用していた人々はわずかでした。ブラウザの使用パターンが変化してくるのに連れて、メモリのようなシステムリソースをどのように効果的に利用するかに関しての Mozilla の方針も変化してきました。多くの変更が Firefox 3 を構築するプラットフォームになされていますが、その中に、ブラウザのメモリのフットプリントを減らすことを目的とした多くの変更が含まれています。特に、最近リリースされた Firefox 3 Beta 4 において、Firefox 3 がメモリ使用量で他のモダン Web ブラウザの全てを打ち負かすようになったことを示すテストの結果が出たことは、劇的です。

- -

Stuart Parmenter が、Firefox 3 のメモリ使用について、彼のウェブログの投稿で説明しています。彼の説明に言及した投稿がいくつかあり、その中には、John Resig、Tristan Nitot、そして、Chris Blizzard のウェブログが含まれています。Ars Technica も、この話題に関する記事を書いています。

- -

Mozilla QA Companion がリリースされました

- -

Mozilla の チームは、人々が Firefox をテストすることを助けることによって Mozilla プロジェクトに参加することをより簡単にするために作成された、新しい「Mozilla QA Companion」Firefox アドオンをリリースしました。このアドオンは、Litmus からテストケースを引っ張り出し、簡単に使える応答フォームを提供し、ユーザに QMO サイトとフォーラムのライブフィードを通して Bug Days のようなイベントの更新を通知します。Chatzilla も同梱していているので、ワンクリックで Quality Assurance の IRC チャンネル (#qa) にアクセスできます。このアドオンは、現在ベータですので、まだいくつかの細かい問題とバグが残っている可能性があります。さらなる情報とこのアドオンのダウンロードリンクは、QA ブログを参照してください。

- -

 

- -

Mozilla at SXSW

- -

年一回の South by Southwest(SXSW) インタクラティブカンファレンスが、先週、暖かなテキサスのオースティンで行われました。数千人の Web 開発者たちが、最新の技術を聞き、少しでも良い Web 開発コミュニティと知り合うために国を越えて集まりました。Mozilla もしっかりと参加しました。Aza Raskin (User Experience Lead for Mozilla Labs)は、インテリジェントなユーザインターフェースをデザインすることについての議論を企画し、John Resig (JavaScript Evangelist) は、Secrets of JavaScript Libraries についてのパネルディスカッションを企画し、そして、Brendan Eich (CTO of Mozilla Corporation) は、多くの主要ブラウザベンダとともに 「Browser Wars」パネルディスカッションに参加しました。

- -

Mozilla は、Firefox のユーザと開発者がつながる機会を得るための開発者懇談会も企画しました。その中で、私たちは、新しい Firefox アドオンのための面白いアイデアを募集するクイックコンテストを実施しました。3 人の受賞者は次の方々です。

- - - - - - - -

私たちは懇談会に来てくれたみなさんとアドオンコンペに参加してくれた方々に感謝したいと思います。私たちはみなさんと話せて素晴らしい時間を過ごせました。 来年また会えることを期待しています！

- -

John Lilly と Mike Schroepfer が Matt Asay にインタビューされました

- -

Matt Asay は、Mozilla の CEO である John Lilly と 技術担当バイスプレジデントである Mike Schroepfer に一時間かけてインタビューしました。Matt は、Lilly と Schroepferg との会話を非常に面白くまとめています。その内容は、Webware ブログ（CNET Japan による日本語訳）で読むことができます。

- -

Effortless Good Firefox アドオン

- -

Participatory Culture Foundation は、どんな努力もすること無しに良いことをすることを支援する、新しい Firefox アドオンをリリースしました。クリックでアドオンをインストールして、好きなときに Amazon で買い物をするだけで、買い物の一部が、四つの非営利組織 - Rainforest Alliance、Save the Children、Grameen Foundation、そして、Participatory Culture Foundation に寄付されます。このアドオンは、現在、アメリカ、イギリス、カナダ、フランス、ドイツ、そして、日本で動作し、Amazon をブラウジングしているときに URL に リファレンスコードを追加するだけの機能を持っています。あなたが何かを購入したときに、Amazaon の 紹介料が PCF の元に集まり、四つの非営利組織に配分されます。さらなる情報と、アドオンのインストールのために、Effortless Good の Web サイトに今日向かってください。

- -

Gecko の年

- -

Mozilla の Chief Evangelist である Mike Shaver は、2008 年は、「Gecko の年」であると宣言しました。Gecko は、Mozilla プロジェクトを構成する（Firefox も含む）プラットフォームであり、そのプラットフォームで実現されるパフォーマンスが新たに向上し、まさにそれを用いてソフトウェアを構成し始めるのにふさわしいときです。Shaver は、次のように書いています。「速い、小さい、クロスプラットフォーム、業界トップの安定性、堅実な OS 統合、素晴らしい標準サポート、生産的なアプリケーションプラットフォーム、アクセシブル、徹底的な地域化、上から下までオープンソース：今こそ Gecko を利用するのにふさわしいときですが、Firefox 3 はまだ始まったばかりです。私たちが次のリリースのために取ってあるものを見るまで待ってください。」Shaver のウェブログで続きを読んでください。

- -

Executive Director 募集の件の最新情報

- -

現在、Mozilla Foundation は、新しい Executive Director を探しています。Mitchell Baker は、彼女のウェブログに過程についての最新情報を投稿し、次のように書いています。「私たちは、Mozilla の複雑さと歴史を理解でき、主導できる人々の数は少なく難しいのではないかと思いましたが、その考えは正しかったのです。」これまでの Executive Director 探しの概要を含む、さらなる情報は、彼女のブログにあります。

- -

無料の T シャツを手に入れるラストチャンスです！

- -

3 月 18 日（今日です！）は、アドオンを Firefox 3 に更新して無料の T シャツを手に入れるための最終締め切りです。Alex Polvi のウェブログに全ての詳細がありますが、早く動いてください。今日が無料の T シャツを提供できる最後の日です。

- -

Beta 4 での Firefox 3 の AwesomeBar の変更

- -

新しい Firefox 3 の「AwesomeBar」の責任開発者の一人である、Edward Lee が、Firefox 3 Beta 4 の新しいロケーションバーに含まれている新機能についてブログに書いています。適応学習システムはドロップダウンメニューで単語を入力しなくても動作します。ですから、キーボード入力からだけでなく、マウスからでも恩恵を得ることができます。さらに、ロケーションバーで複数の単語で検索することが可能になりました。また、検索対象には、ブックマークしたページに追加したタグが含まれるようになっています。他にも、より先進的なユーザのために追加された多くの変更と機能があり、Edward は、それらについても、彼のブログ投稿で詳細に説明しています。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080325/index.html b/files/ja/devnews/20080325/index.html deleted file mode 100644 index a1f6d098fc..0000000000 --- a/files/ja/devnews/20080325/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: '20080325' -slug: DevNews/20080325 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Extend Firefox 3 コンテストを実施します

- -

Extend Firefox 3 は、Firefox 3 製品版リリースのための新しい Firefox アドオンの開発に対して賞を与える、グローバルなデベロッパーコンテストです。応募作品は、専門家の集まりによって審査され、大賞及び入賞作品は、 Firefox 3 において導入された新しい機能を活用し、ユーザエクスペリンス、イノベーション、オープンスタンダードの利点を説明しているアドオンから選ばれます。コンテストについてのさらなる情報は、Mozilla Labs の告知を参照してください。

- -

Firefox 3 T シャツコンテンストの投票が開始されました

- -

Firefox 3 の T シャツデザインコンテストですが、現在、応募締め切りは過ぎ、5 つの最終選考作品が選ばれました。投票が現在開始され、あなたの参加を待っています！Mozilla Store の Firefox 3 T シャツコンテストの投票ページへ行き、最終選考作品の 5 つからお気に入りを選んでください。投票は、7 日間実施され、勝者は、Mozilla Store で公式 Firefox 3 T シャツ として取り扱われます。コンテストについてのさらなる情報は、公式コンテストサイトをチェックしてください。

- -

Firefox 3 Beta 5 では新しい言語が加わります

- -

来る Firefox 3 Beta 5 には、5 つの新しい言語（アフリカ語、インドネシア語、モンゴル語、ノルウェー語ニーノシュク、セルビア語）が含まれる予定になっています。これらの新しいローカライゼーションのレビュー及びテストに対して提供できるどんな助けもおおいに歓迎します。それらは、 Firefox 3 Beta 5 の「all-beta download page」からダウンロード可能になる予定です。もし問題を見つけたら、バグ報告するか、フィードバックを Mic Berman に彼女のブログ投稿を通して送ってください。

- -

Mike Shaver へのインタビュー

- -

「How Software is Built」サイトは、Mozilla のチーフエヴァンジェリストである、Mike Shaver の長大なインタビューを掲載しました。このインタビューは、プロジェクトの統括、どのように人々が参加するか、重要な役割を占める貢献者の変化、オープンソースプロジェクトにおける高いユーザビリティの確保、開かれた開発モデルと閉じられた開発モデルの検討、その他を含む、幅広い範囲のトピックをカバーしています。How Software is Built でインタビュー全文を読んでください。

- -

Mozilla at FISL

- -

Mozilla は、4 月 17 日から 4 月 19 日までブラジルで行われる Forum Internacional Software Livre (International Free Software Forum) に参加する予定です。Mitchell Baker は、Mozilla Project について話します。Felipe Tassario Gomes は、XULRunner、JavaScript、そして、SQLite について話します。Chris Hofmann、Marcio Galli、そして、Christopher Blizzard は、ブラジルでの Firefox についてのパネルディスカッションを行います。そして、Mozilla ルームとワークショップもあります。さらなる情報は、 FISL のウェブサイト、Mozilla wiki、もしくは、Chris Blizzard のブログ投稿を参照してください。

- -

Summer of Code の申込が開始されました

- -

Google Summer of Code の学生申込期間が今週初めに開始されました。提案されたプロジェクトのうちの Mozilla に関するものの一覧化は、現在ほとんど完了していますが、学生は、もちろん自由に、一覧以外のアイデアを提案できます。Mozilla コミュニティのメンバーは、学生に私たちに頼むように知らせてください。Mozilla が Google Summer of Code に参加することについてのさらなる情報は、Gervase Markham のウェブログを参照してください。

- -

更新された mozilla.org のライセンスポリシーの草稿がレビュー可能になっています

- -

Gervase Markham は、mozilla.org のラインセンスポリシーについて作業していますが、その草稿が現在閲覧可能になっています。特に、あなたが Bugzilla、Rhino、Tinderbox、などのような mozilla.org プロジェクトのオーナーならば、草稿文書をレビューすることを強く推奨します。草稿とレビューが必要な部分についての情報についてのさらなる情報は、Gerv のウェブログを参照してください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080401/index.html b/files/ja/devnews/20080401/index.html deleted file mode 100644 index 0a8ccbeefb..0000000000 --- a/files/ja/devnews/20080401/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: '20080401' -slug: DevNews/20080401 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla 10 周年

- -

1998 年 3 月 31 日は、Mozilla が公式に活動を開始した日です。この日に、最初の Mozilla のコードが公式なオープンソースライセンス条項の元で公に公開され、プロジェクトの運営組織 - Mozilla Organization - が公的な活動を開始しました。10 年前、ひとつの急進的な考えが具体化されました。その考えは、オープンソースコミュニティが、巨大な商業ベンダーではできない、主要なインターネットテクノロジーに選択と革新をもたらすというものでした。この考えが Mozilla プロジェクトとして具体化されたのです。

- -

3/31 からずっと、私たちは、その急速な考えを持ち、そのパワーを証明し続けてきました。私たちは、その考えを最初の頃からの想像を超えて広めてきました。そして、次の十年においても、私たちは、開放、参加、機会、選択、そして、革新というような基本的な性質をインターネット自身の基本インフラに構築するべく、急進的であり続けます。Mitchell のブログ投稿を参照して、この記念日、過去 10 年の私たちが達成したこと、そして、目の前にある素晴らしい機会についてさらに読んでください。

- -

フォクすけがディズニーに

- -

アメリカのアニメーションの巨人が日本のアニメーションスタジオととともに映画製作をするという最近のニュースに関連し、Mozilla Japan は、フォクすけをウォルト・ディズニー社の新しい日本のアニメーション製作会社とのジョイントベンチャーに非公開価格で売却することを発表しました。Mozilla Japan マーケティングマネージャの Kaori Negoro は、「私たちは、フォクすけが成長の次なるステージのためのグローバルステージを手に入れることになったことを喜んでいます。フォクすけは、日本における Firefox のマスコットキャラクターであり、日本の 7000 人を超えるコミュニティメンバーのコンテストで名前が付けられました

- -

Paul Kim が TreeHugger にインタビューされました

- -

先週、TreeHugger（緑に関するニュース、ソリューション、そして、製品インフォメーションのためのワンストップショップ）が Mozilla の Marketing VP である Paul Kim にインタビューしました。「素晴らしい Firefox Web ブラウザのクリエイターである Mozilla コーポレーションは、ソフトウェアが 100 % オーガニックであることを宣言します。いいえ、それは食べられません。しかし、Paul Kim へのこのインタビューにおいて、彼は、なぜ表現がその適切なのかを説明しています。」TreeHugger で完全なインタビューをチェックしてください。

- -

Mozilla Toronto オフィスが移転

- -

膨大な計画と重労働の後、Mozilla Toronto オフィスが、Toronto のダウンタウンの中心部であり、世界中でも最も高い建物の一つである CN タワーがある 301 Front Street に移転しました。新しいオフィスへの訪問者は、70 秒間エレベータに乗り、128 階まで上がります。そこにある Mozilla オフィスからは、素晴らしい眺めが広がっています。さらにアスレチックな訪問者には、吹き抜けがあります！Johnathan と Mike を含む、何人かの 地元 Mozilla コミュニティのメンバーが、移転についてブログに書いています。

- -

addons.mozilla.org (AMO) リデザイン & 再始動

- -

この数か月間、AMO チームはメジャーサイトのリデザインに関する作業に懸命に取り組んできましたが、ついに新しい AMO サイトの稼働を発表できたことを喜んでいます。これはサイトにとって重要なリリースであり、エンドユーザとアドオン開発者双方に良いことがたくさんあります。圧倒的に、見た目が一新されたことに目が行きがちですが、それが今回の作業の全てではありません。多数の変更の完全な一覧は、Basil のウェブログにあります。 John Slater、Mike Morgan、Madhava Enros を含む、他のメンバも、この新しいサイトについてブログに書いています。

- -

Firefox 3 Beta 5 での新機能

- -

Firefox 3 Beta 5 は、Gecko 1.9 に搭載されるロボティック Web テクノロジーについてもっと知りたいユーザへのサポートが含まれいます。魔法との区別がつかないこれらの先進的なテクノロジーは、改ざん防止装置のように、主要なユーザインタフェースからは隠れています。改ざんが検知されると、そのページは、自身の存在を守るための対策を講じます。私たちはこのページをセキュアにする方法について作業中ですが、その間に、ユーザは用心深さを鍛えるべきです。

- -

Firefox Gold Edition 発表

- -

Firefox Gold 1.0 は、ユーザに、より簡単な作成、編集、及び、ライブオンラインドキュメントのナビゲートのためのエクスペリエンスレベルの全てを提供する次世代のソフトウェアツールです。World Wide Web が持つリッチな表現と電子メール、スレッドディスカッショングループ、そして、ファイル転送機能に加え、Firefox Gold では強力な WYSIWYG ドキュンメント作成機能をコア Firefox 環境に統合することによって、Web、E-mail、あるいは、ニュースグループをシンプルなカットアントペーストとドラッグアンドドロッププロセスで編集することが可能になっています。

- -

Firefox Gold におけるドキュメント作成機能は、コンテンツ作成者の経験者と初心者双方にオンラインドキュメントの編集と発行のためのシンプルながらパワフルなソリューションを提供するようにデザインされています。Firefox Gold は、 Adobe Acrobat、Macromedia Director、Progressive Networks RealAudio、などの多くのインラインプラグインもサポートすることにより、インターネットサイトに組み込まれたリッチマルチメディアコンテンツを可能にしています。

- -

Module Ownership 計画

- -

2 つに分けられたブログ投稿において、Mitchell は、Mozilla プロジェクトのモジュールオーナーシップシステムのための責任を追うためのグループを作成するための新しい計画の概要を述べています。そのグループは、日々の基礎となる膨大な量の作業を行いませんが、モジュールオーナーシップの監督のための責任を負うことになります。それは、モジュールオーナーの一覧のレビューと更新を含み、他の関連する事柄をそれらが発生したときに扱います。今まで、これらの仕事は、様々な個人（David Baron、Brendan、Stuart）にいって行われていましたが、最近、そのグループの所有下に置かれるようになりました。Mitchell のブログでは、計画と理由を詳細に説明しています。彼女の Module Ownership - Part 1 及び Module Ownership - Part 2 の投稿を読んでください。

- -

事務処理が混乱：5 億粒の米

- -

Mozilla プロジェクトは、先週、自身の成功の犠牲になりました。5 億粒の米が freerice.com を通してコミュニティによって寄付され、マウンテンビューの Mozilla HQ に到着しました。United Nations World Food Program とともに意図した受け取り者のために米を集めるように整理がなされましたが、それがいくつかの面倒なことを引き起こしています。Mozilla の Marketing & Foodstuffs の VP である Paul Kim は、次のようにコメントしています。「米がいたるところにあります。私たちはドアを開けることができません。ですから、私たちは外出にグランドフロアの窓を利用しています。誰も木曜日から Stuart を見ていません。しかし、私たちのメモリの数字は、より良い方向に向かい続けています。ですから、彼は元気だと私たちは思います。」

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080408/index.html b/files/ja/devnews/20080408/index.html deleted file mode 100644 index 72b1cdf476..0000000000 --- a/files/ja/devnews/20080408/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: '20080408' -slug: DevNews/20080408 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

Firefox 3 Beta 5 がリリースされました

- -

Firefox 3 Beta 5 がダウンロード可能になりました。インストールの前にリリースノートと既知の問題を読んでください。このマイルストーンは、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning、irc.mozilla.org の #granparadiso で追うことができます。このリリースについてのさらなる情報は、DevNews のブログ投稿を参照してください。

- -

Firefox 3 に参加してください！

- -

今後予定されている Firefox 3 のリリースについての素晴らしい成果の全てを聞いて、それに参加したいとは思っていませんか？開発とテストが全て終わっても、まだすべき重要な仕事が残っています！ユーザサポートを提供することによって、Firefox 2 から更新しようとするユーザや初めて Firefox 3 を利用しようとするユーザのためにリリースがスムーズに進むことが保証されることにつながります。

- -

SUMO (support.mozilla.com) チームは、SUMO についてと、他の Firefox ユーザがお気に入りのブラウザを楽しむことを助けるための SUMO サイトの使い方を知ることができる日を設けました。もし Firefox のユーザサポートを助けようと思ったことがありながらどこから始めるべきかわからなかったなら、この日はあなたのための日です。さらなる情報と詳細は、SUMO のブログ投稿と SUMO Day 情報ページを参照してください。

- -

新しい Thunderbird Bugdays

- -

ユーザと質への焦点を高めるための一環として、Thunderbird チームは Thunderbird Bugdays を毎週木曜日に行うことを告知しました。この Bug Days の目的は：1) Bugzilla データベースに登録されているバグの数をもっと管理できるレベルにまで減らすこと、2) もっとタイムリーにバグレポーターに対して応え、支援すること、3) 開発者がもっと簡単に手を出せるように Bugzilla データベースに登録されているバグの質を向上させること。

- -

Bug Day は、バグ潰しの日であり、初心者、ベテラン双方の Thunderbird ユーザを引き合わせます。irc.mozilla.org の #bugday は、経験を積んだバグハンターが新しい参加者に助言をする場所であり、また、全員がお互いに助け合い、バグと戦い、楽しむことができる場所です。

- -

Thunderbird チームは、Bug Days を実りあるものかつ楽しいものにするためにあなたの助けを必要としています。ですから、どうか、私たちの計画案を見て、あなたの考えを Wiki に書き加えるか、開発者ニュースグループに投稿してください。

- -

Mitchell Baker が The Guardian でインタビューされました

- -

今年初め、Jack Schofield が Guardian の Technology 部の記事として Mitchell Baker にインタビューしました。彼はインタビューの記録を記事よりも長い未編集のまま Guardian Technology ブログに投稿しました。その中で彼と Mitchell は、Mozilla と Microsoft、マーケットシェアを競うよりももっと重要なこと、なぜ Mozilla は Thunderbird をもっとプッシュするために Firefox を使おうとしないのか、そして、なぜ Mozilla は真剣にモバイルに取り組んでいるのか、について話しています。Guardian ブログで記事の全文を読んでください。

- -

Acid3 テストに対する David Baron の意見

- -

Acid テストは、Web Standards Project によって公開されている一連の「Web 標準準拠」テストです。一番最新のものは、Acid3 であり、JavaScript、DOM、SVG への準拠（他のものも含まれます）をテストします。著名な Mozilla 開発者であり、W3C CSS ワーキングループのメンバーである David Baron は、Acid3 テストは様々なブラウザの物差しとして使うべきであるということについてどのように考えているか、テストを完璧にすることに関しての Mozilla の方針は何か、というような Acid 3 テストについての彼の意見をブログに書いています。David のブログで詳細を読むことができます。

- -

Mozilla Labs の更新情報

- -

Mozilla Labs の先頭に立つ、Chris Beard がラボにおいて何が進んでいるかということについての手短な更新情報を投稿しています。先週見たものは、Weave と Personas を含む、多くの Labs のプロジェクトのメジャーアップデートの開始でした。また、ユーザテストフレームワークと Labs プロジェクト周辺のコミュニティの強化を目的とした、新しい Test Pilot プロジェクトも紹介されています。さらに Chris は最近、数時間に渡ってインタビューされました。その結果は、Firefox 4 will push out the edges of the browser （Firefox 4 はブラウザの限界を超える、CNET Japan による日本語訳）及び Mozilla wants to put a Firefox in the cloud and in your pocket（Mozilla は Firefox を雲の中とポケットの中に入れたい）という 2 本の記事になっていて、チェックする価値があるものとなっています。さらなる詳細は、Chris のブログ投稿を参照してください。

- -

クラッシュレポートシステムが変更に

- -

Mozilla WebDev チームは、最近、システムのユーザビリティとパフォマーンスの両方の改善を目的としたクラッシュレポータシステム（コードネーム：Socorro）のための重要な更新を発表しました。これらの変更はプロセッサコード（Breakpad サーバアーキテクチャ の 1/3） の幅広いリファクタリングとリクエストされたレポートの即時のキューを可能にする更新を含みます。さらなる詳細は、WebDev ブログの投稿を参照してください。

- -

10 周年記念パーティの写真

- -

オリジナルの Netscape のソースコードがリリースされた 3 月 31 日に、私たちは Mozilla プロジェクトの開始から 10 周年記念を迎えました。私たちは 2008 年を通して「Mozilla の 10 周年」を祝いますが、31 日にこの特別な日を祝おうというささかやかなパーティがあり、自然と数台以上のデジタルカメラが持ち込まれました。このイベントの写真は「Mozilla Anniversary」キーワードと「mozillaturns10」キーワードが付けられて、Flickr に投稿されていて、David Rolnitzky のアカウントから直接見ることができます。参加者全員にとって良い時間だったことがわかるでしょう。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080415/index.html b/files/ja/devnews/20080415/index.html deleted file mode 100644 index eb13926deb..0000000000 --- a/files/ja/devnews/20080415/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: '20080415' -slug: DevNews/20080415 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3: ツリーが RC1 のためにロックダウン

- -

4 月 8 日に、Firefox ツリーは Firefox3 Release Candidate 1 のリリースを準備するためのロックダウン段階に入りました。このリリースのために過去のベータと同様のプロセスが行われます。つまり、blocker リストをゼロにする作業が行われ、より厳しく退行バグの潜在をコントロールするために、明白に認められたパッチだけが許可されます。さらなる情報は、DevNews のブログ投稿を参照してください。

- -

LeakTest と UnitTest のための新しい Tinderbox ツリー

- -

Chris Cooper と Dave Miller が最近二つの新しいツリーを tinderbox.mozilla.org に加えました。UnitTest と LeakTest です。想像通り、これらの新しいツリーはユニットテスト群、JavaScript テストマシン、そして、リークテスト群のための実施環境を収容します。失敗している MozillaTest で何かを探しているならば、そこを見るべきです。

- -

彼がそうする間、Chris は Windows での ユニットテストの網羅度を改善するために二つの新しいマシンを Firefox の Tinderbox ツリーに追加しました。qm-win2k3-02 と qm-win2k3-03 と名付けられたこれらの新しいマシンは追加情報を提供し、単一マシンでの失敗の診断の手助けをするでしょう。更なる情報は、Chris の ウェブログ投稿を参照してください。

- -

Ars Technica が Fennec をレビュー

- -

Ars Technica が Mozilla の最初のモバイル Firefox プロトタイプである Fennec の最初のプレアルファテストビルドをレビューしました。「Firefox 3 がもうすぐ登場するときに、Mozilla のトカゲ世話役主任は、世界のブラウザを支配するための計画の次の段階へと注目を向けさせようとしています。去年の 10 月に初めて発表された Mozilla Mobile の試みは、機能的なプロトタイプの段階まで到達しました。開発者たちはコードネーム Fennec という、モバイル Firefox のプロトタイプであるプレアルファテストビルドをリリースしました。私たちはそれをテストし、Mozilla Mobile ディレクターである Jay Sullivan と話しました。」記事の続きは、Ars Technica で読んでください。

- -

Mitchell Baker ビデオインタビュー in Paris パート 1/2

- -

2 週間前、Mitchell Baker は French Senate でのキーノートのためのパリにいました。カンファレスの後、彼女と Mozilla Europe のメンバーは一連の報道インタビューを受け、その間、Tristan Nitot が Mitchell への 2 本のビデオインタビューを録画しました。これらのインタビューの一本目が Tristan のウェブログに投稿されています。

- -

Mozilla の Web サイト、Web 解析、プライバシー

- -

Mitchell Baker が Mozilla の Web サイトに対する Web 解析ツールアプリケーションについての記事を書きました。「私たちはデータの世界に生きています。ですから、私たちはどのデータとその影響度について注意深く考えるべきです。Mozilla コミュニティの中心は、プライバシーと一人一人が個人情報を理解し制御できるようにすることに強く焦点を当てています。これを考慮して、私は、私を満足させる安全防護策を伴った特別なデータ収集目的についての議論を集めています。」この記事の続きは、Mitchell のウェブログで読むことができます。

- -

最近の AMO リリースについてのフィードバック

- -

addons.mozilla.org 3.2 のリリース以来、AMO チームは活発にユーザが多くのチャンネルを通して送ってきたフィードバックをレビューしています。いくつかのフィードバックに対しての返答として、Mike Morgan が新しいデザインの理論的根拠とトレードオフ、及び、AMO にやってくる様々な利用者 - 初めてのユーザ、年季の入った熟練者、そして、アドオン制作者と発行者の要求のバランスを取ろうとする試みについての説明を投稿しています。Basil Hashem もチームが受け取ったフィードバックについての投稿を書いていて、そこでは、彼らが聞いた意見で多かったものの上位がまとめられ、AMO サイトの次の改善の計画の概要が述べられています。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080422/index.html b/files/ja/devnews/20080422/index.html deleted file mode 100644 index 3f0db7f064..0000000000 --- a/files/ja/devnews/20080422/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '20080422' -slug: DevNews/20080422 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 2.0.0.14 がリリースされました

- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.14 が[ GetFirefox.com. http://getfirefox.com/] から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。このリリースについてのさらなる情報は、DevNews のブログ投稿を参照してください。

- -

Camino 1.6 がリリースされました

- -

Camino プロジェクトは Camino Web ブラウザ のメジャーアップデートである Camino 1.6 をリリースしました。このリリースは、ツールバー Web 検索フィールド、ページ内検索バー、ソフトウェアアップデート、タブバーのスクロール、拡大された AppleScript サポートを含む、多くの新機能と改善点を含んでいます。さらなる情報は、リリースノート及びリリースアナウンスメントを参照してください。

- -

Mozilla プライバシーポリシーの変更案

- -

2 月に、Basil Hashem は、Mozilla のプライバシーポリシーのいくつかの変更案についてブログに書きました。それに対してのフィードバックとコメントを考慮した後にポリシー案は修正され、Basil はそれについて再びブログに書きました。「新ポリシーは初期の議論で寄せられたコメントを反映しています。多く寄せられた反対理由となるものを削除して、私たちはポリシーを計画通り更新し、直ちに Web 解析ツールを埋め込むことを計画しています。今回最も注目すべき今までとの違いは Google Analytics は関係していないということです。Omniture のみが考慮の対象となっています。」更なる情報と、修正されたポリシーの写しは、Basil のこのトピックに関する最新のブログ投稿を参照してください。

- -

AMO 3.2 の今後

- -

addons.mozilla.org (AMO) リデザインのためにユーザエクスペリエンスを主導する、Madhava Enros は AMO 3.2 リリースの根拠と今後についての詳細な説明を投稿しました。「3.2 リデザインにおける、私たちのゴールは、アドオンとはどのようなものかを新しい人々が理解し、幅広いアドオンを集め、人々が立ち寄りたいと思い、素早く彼らのオンライン体験を改善するものを見つけ、再び利用したいと思うような、使い心地を改善することです。今まで述べたことの全ては、… AMO が成功するには、アドオン開発者とアドオンのテストとレビューの先頭に立つ先進的なユーザをサポートしなければなりません。」続きを読むには、Madhava のブログ投稿を参照してください。

- -

コミュニティ調査の結果

- -

2007 年の終わり、Stats Malolepszy と Seth Bindernagel は Mozilla の最初のコミュニティ調査を終了し、回答の解析と集まったデータから得られる結論を引出し始めました。彼らはついに結果を発表できる準備ができているポイントまで到達しました。生データの多くは、もっと早い時期、2 月の FOSDEM でも発表されていましたが、彼らは学んだことを洗練するために時間を費やしました。これらの洗練された結論は、一連のブログ投稿として発表されています。最初の 4 つは次のものです。Measuring the Temperature of the Community Part 1、Part 2、Part 3、Part 4。

- -

セキュリティの数値化の問題

- -

Asa Dotzler は For the Record プロジェクトの一部分として、セキュリティの数値化、及びセキュリティの数値化が引き起こしていることについての議論をブログに詳細な形で投稿しました。「数多くの報道記事が…効果的なセキュリティと Web ブラウザの安全さは単純にベンダーが公表したソフトウェアの脆弱性の数を数えることによって測定することができるという紛らわしく、そして誤った結論を提供しています。この種類の計測はいくつかの理由で欠点を持っています。そして、そのすべてがそれらが利用者にオンラインの安全について知識に基づいた決定をすることをより難しくさせていることに関連しています。」この記事の続きは、For the Record の Asa の投稿を参照してください。

- -

Firefox が Webware 100 の「ブラウザ」カテゴリで勝利しました

- -

2008 Webware 100 Awards は、今日利用可能であるベストな Web 2.0 サイト、サービス、そして、アプリケーションを表彰しました。Webware 100 に選ばれるための 5,000 以上のノミネートを受け付けた後、エディターが 300 の最終選考を選び、それらを対象にして Web ユーザによって投票が行われ、2 百万近くの投票により、100 の トップ製品 - 10 カテゴリ毎に 10 ずつ - が選ばれました。私たちは Firefox が今年の「ブラウザ」カテゴリの勝者として投票されたことが発表されたことを誇りに思います。この賞についてのさらなる情報は、Firefox の Wabware 100 Web ページをチェックしてください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080429/index.html b/files/ja/devnews/20080429/index.html deleted file mode 100644 index c4654f5c27..0000000000 --- a/files/ja/devnews/20080429/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: '20080429' -slug: DevNews/20080429 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mitchell Baker 氏の Web 2.0 基調講演

- -

4 月 24 日、Mitchell Baker が Web 2.0 カンファレンスで基調講演を行いました。Doug Turner がハイライトのいくつかを書き、彼の ウェブログ上に講演のビデオを貼り付けて提供しています。講演から：「ひとつの Web だけがあります。Firefox はひとつの Web を手に入れるために最高で最も効果的なプラットフォームです。私たちはモバイルで革新と興奮を巻き起こすための Firefox を開発しています。これを為すために私たちは開かれた Web ベースの開発プラットフォームを必要としています。私たちは Firefox をこのプラットフォームとみなしています。」続きは、完全なビデオを見るか、Doug の ウェブログへ行くか、他のメディアの記事をチェックしてください。

- - - -

ヨーロッパでの Firefox の広がり

- -

Tristan Nitot が Firefox マーケットシェアに関する最新の統計が出たことについてブログに書いています。「Xiti によると、Firefox は ヨーロッパで 29% に近づいています。過去 12 か月で 4.5 パーセントポイント増加しています。」また、「Gemius (Rankings.hu) によると、Firefox 2 はハンガリーにおいて現在勢力のあるブラウザバージョンです。」さらなるマーケットシェアニュースとこれらの話題へのリンクは、Tristan のブログ投稿を参照してください。

- -

AMO のメインでおすすめするアドオンへの変更点

- -

Basil Hashem は addons.mozilla.org (AMO) ウェブサイトの「メインでおすすめする」アドオンの部分への最近の変更点について投稿しました。「最新の AMO リデザインで導入された変更点のひとつは幅広い様々なアドオンに光を当てる機能です。単一のリストの代わりに、おすすめはアプリケーションごと、カテゴリごと、そして、ロケールベースごとになりました。これはコミュニティにより素晴らしい柔軟さを与え、アドオンの出番と露出を増加させます。」最近の変更点についてのさらなる情報と詳細は Basil のウェブログを参照してください。

- -

Firefox 3 リリースへの準備

- -

Paul Kim が Firefox 3 マーケティングのための計画についてブログに書いています。「過去の各バージョンリリースと同様に、私たちは伝統的なマーケティングと コミュニティと草の根拡張の PR プログラムの組み合わせを利用するつもりです。この組み合わせは私たちに過去 4 年間で 世界中 の 1 億 6 千万以上の人々に採用を働きかけ、Firefox ブランドを確立し、リリースでの参加に意義ある機会を提供するのに役立ちました。」Firefox 3 リリースマーケティング計画についてのさらなる情報は、Paul の投稿を参照してください。

- -

Firefox 3 のブックマーク

- -

先週 Deb Richardson が Firefox 3 の新しいブックマーク機能の素晴らしい紹介を書きました。多くの人々のように、彼女は忘れられたリンクのゴミ箱になってしまう以前のブラウザのブックマークの状態に関するいらだちについて話しています。「Firefox 3 は利用するのが非常により簡単になり、一般にはより役立ち、私のような破滅的にまとまりのない人たちにとっては特に非常により役立つ、わずかな新しい機能を導入しています。」あなたのことのように思えたなら、記事全体をチェックしてください。

- -

開発者が語る Flickr Uploadr

- -

Flickr の XUL ベースのクロスプラットフォームアップローダユーティリティの開発者である Richard Crowley が彼らが XUL を選んだ理由と開発中に彼が乗り越えたハードルの概要について述べている素晴らしい記事を書きました。彼がプロジェクトの開発中（及び開発に関して）書いた詳細なブログ投稿へのリンクの一覧が含まれています。これは素晴らしい記事でかつ一見の価値があるものです。Flickr の開発ブログでそれをチェックしてください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080501/index.html b/files/ja/devnews/20080501/index.html deleted file mode 100644 index 22cea44ba8..0000000000 --- a/files/ja/devnews/20080501/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: '20080501' -slug: DevNews/20080501 -tags: - - DevNews - - 'DevNews:Releases' ---- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.14 が www.getthunderbird.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

- -

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

- -

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

変更の一覧と詳細は Thunderbird 2.0.0.14 リリースノートをご覧ください。

- -

注意：まだ Thunderbird 1.5.0.x を利用されている場合、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいます。www.getthunderbird.com から Thunderbird 2.0.0.14 をダウンロードし、Thunderbird 2 にアップグレードしてください。

diff --git a/files/ja/devnews/20080506/index.html b/files/ja/devnews/20080506/index.html deleted file mode 100644 index 1d3775596c..0000000000 --- a/files/ja/devnews/20080506/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: '20080506' -slug: DevNews/20080506 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox スクリーンキャストコンテスト！

- -

SUMO (support.mozilla.com) と Spread Firefox 合同で Firefox スクリーンキャストコンテストを行います！「私たちは 5 月 19 日の朝から Spread Firefox で SUMO の knowledge base から 100 位までのサポート記事を提示します。1 つか、2 つ、あるいは、それらの全てのためのスクリーンキャストを作成してください！」好きなだけの数の記事に対してのスクリーンキャストを応募することができますが、記事ごとに 1 つだけにしてください。コンテストは 6 月 15 日まで行われます。

- -

次のことが最も興奮する部分でしょうか？各 100 記事ごとに受賞者が決められ、各 100 記事の授賞者には特別な Firefox スクリーンキャストコンテスト T シャツが与えられます。この T シャツは 100 枚だけしか作られないので、このコンテストだけがこの独自のコレクターズアイテムを手に入れる方法です。さらなる情報は、SUMO ブログへ行って、コンテストの告知の全文を読んでください。

- -

Thunderbird 2.0.0.14 がリリースされました

- -

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.14 が www.getthunderbird.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました（日本語訳）。セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。変更の一覧と詳細は Thunderbird 2.0.0.14 リリースノートをご覧ください。

- -

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

まだ Thunderbird 1.5.0.x を利用されている場合、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいます。できるだけ早く Thunderbird 2.0.0.14 にアップグレードしてください。

- -

新しい Weave ウィークリーミーティング

- -

今週から、Weave プロジェクトは公式ミーティングを週 1 回行う予定です。第 1 回目のミーティングは 5 月 7日水曜日 午後 1:00 太平洋時間（午後 4:00 東部時間、21:00 UTC）の予定です。ミーティングの議題とダイヤルイン情報は Mozilla Wiki の Weave Meetings ページにあります。

- -

5 月 8 日・9 日は Mozilla 組み込みミートアップ

- -

Chris Blizzard は 次の Mozilla 組み込みミートアップが 5 月 8 日と 9 日（今週の木曜日と金曜日）にマウンテンビューで予定されていることをにみなさんに知ってほしいと思っています。目的は、新しい組み込み API に焦点を当て、いくつかの実際のコードをまとめ始めることです。これはオープンミーティングとして実施される予定です。ですから、この地域にいて、参加したい場合は、Chris に連絡を撮ってください。さらなる情報は、Chris のこのミーティングについてのブログ投稿、及び彼の以前のミートアップについての投稿を参照してください。

- -

5 月 9 日に Pascal Chevrel がセビリア大学で話します

- -

5 月 9 日金曜日に、Pascal Chevrel が スペインのセビリア大学主催の Concurso Universitario de Software Libre で Mozilla プロジェクトの組織について話す予定です。

- -

アドオンの互換性状況についての更新情報

- -

Alex Polvi が、Firefox 3 とまだ互換性がない上位 10 個のアドオンについての状況について報告する、週毎の「アドオンの状況」レポートを開始しました。今週の一覧には次のものが含まれています。Skype Toolbar for Firefox、Foxmarks Bookmark Synchronizer、FoxyTunes、Firebug、そして、PicLens などです。完全な一覧、さらなる詳細、そして、手伝う方法についての情報は、Polvi のブログ投稿を読んでください。

- -

Mozilla Labs、高等教育、そして、新しい機会

- -

Aza Raskin は Mozilla Labs の、開かれた Web の革新プロセスを幅広いコミュニティに広めることを軸として展開される、今年の目標のいくつかについて投稿しています。彼らは多くの新しいプログラム上で作業していますが、そのうちのひとつは、高等教育と連携するためのよりフォーマルな方法です。Labs チームは学術的に協力できる新しいグループを見つけたことに本当に気分が高まっています。また、このブログ投稿では彼らの初期の努力について少しだけ概要を述べています。Mozilla Labs ウェブログにある投稿の全文を読んでください。

- - - -

MicroB 開発者である Antonio Gomes が MozillaLinks の Percy Cabello にインタビューされました。Percy は次のように書いています。「Mozilla は Web での存在を拡大するためにモバイルプラットフォームへゆるやかに注目を高めてきていますが、MicroB は別のプロジェクトであり、すでに Nokia Tablet PC プラットフォームに対して Mozilla ベースのソリューションを提供しています。」インタビューの中で、 Antonio は MicroB プロジェクト、MicroB と Mozilla プロジェクトの相互連携、MicroB の Mobile Firefox との関係などについて話しています。素晴らしい MozillaLinks ウェブログでインタビューの全てを読んでください。

- -

Mozilla の Summer of Code プロジェクトについての情報

- -

Google Summer of Code (SoC) 2008 が進行中です。過去 3 年間で、SoC は 1500 人の学生と 2000 人のメンターを 世界中の 90 か国から引き合わせています。Mozilla には「自動カレンダーイベント生成のための自然言語の解釈」から Bugzilla への OpenID サポートの実装までの幅広さを持った、進行中の SoC プロジェクトが数多くあります。全てのうち 11 個のプロジェクトに関しては、Mozilla プロジェクトのための違ったエキサイティングで生産的な夏が予定されています。プロジェクトの全てについての詳細な説明を含むさらなる情報は、Mozilla SoC 情報ページをチェックしてください。

- -

2008 Linux Journal Reader’s Choice Awards

- -

Thunderbird と Firefox が 2008 Linux Journal Reader’s Choice Awards を それぞれ「Favorite E-mail Client」と「Favorite Web Browser」カテゴリで受賞しました。今年は 6000 人近い読者が投票しましたので、これらは本当に素晴らしい賞です。公式な発表は 5 月 1 日に行われ、受賞者の発表をしている記事は Linux Journal で見つけることができます。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080513/index.html b/files/ja/devnews/20080513/index.html deleted file mode 100644 index 6095bb664f..0000000000 --- a/files/ja/devnews/20080513/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: '20080513' -slug: DevNews/20080513 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

about:mozilla 読者調査

- -

Mozilla は先月の 11 月から about:mozilla ニュースレターを発行しています。約 6 ヵ月続けてきて、私たちはそろそろ読者のフィードバックを集める時期だと思い「about:mozilla ニュースレター」コミュニティ調査を実施することにしました。

- -

もしこのニュースレターの常連読者であるなら、 Mozilla Europe のサイトにあるこの調査に答えるための時間を設けていただけると幸いです。調査の最後に、追加のコメント、アイデア、考えや批判を記入するための欄があります。このニュースレターについての私たちへのフィードバックがあればあるほど、将来のニュースレターがより良いものになるでしょう。

- -

どうか、この about:mozilla ニュースレター調査に答えることで私たちを助けるための時間を設けていただけないでしょうか。

- -

Mozilla Party JP 9.0

- -

日本の Mozilla コミュニティである、もじら組は 9 回目の定例パーティイベントを 5 月 31 日土曜日に日本の東京で行う予定です。スピーカーは、もじら組の松澤太郎、Mozilla Corporation の John Daggett （プラットフォームデベロッパー）と David Tenser（SUMO マネージャ）、Mozilla Korea コミュニティの Channy Yun、Open Office 日本語プロジェクトの中本さん、そして、（日本）独立行政法人産業技術総合研究所の高木浩光博士、そのほかです。このイベントは一般者向けで無料です。日本語での情報はもじら組のサイトにあります。

- -

Firefox 3: オフラインアプリのデモ

- -

Mark Finkle が Firefox 3 の新しいオフライン機能のデモを行っている単純なデモについてまとめました。「オフラインモード」または「オフラインキャッシング」は Firefox 3 がインターネットにつながっていない状態にあるときでも Web アプリケーションが動かすことを可能にする HTML 5 での新機能です。Finkle のでもは「Task Helper」と呼ばれ、それについての詳細は彼のウェブログで読むことができます。Firefox 3 のオフラインリソースの使用についてのさらなる情報は、Mozilla Developer Center でのこのトピックに関する記事を参照してください。

- -

Tristan、Firefox 3、そして、BBC の dot.life ブログ

- -

Tristan Nitot は最近ロンドンで 「The dangers of the proprietary web - Future of the Internet and Open Source（独占 Web の危険 - インターネットとオープンソースの未来）」という、Internet World での基調講演を行いました。イギリスにいる間、Tristan は BBC の 技術ブログ「dot.life」を書いている BBC の技術記者、Rory Cellan-Jones と面会しました。Rory は Tristan にオープンソース、Mozilla のバックグラウンド、そして、新しい Firefox 3 のことについてインタビューしています。BBC の dot.life ウェブログで記事を読み、Tristan が Firefox 3 のデモを行っている Rory のビデオをチェックしてください。

- -

プレスリリースの緩やかな死

- -

不屈の Public Relations（広報）リーダーである、Melissa Shapiro が Mozilla はなぜもっとプレスリリースを出さないのか、また、Public Relations が産業としてどのように変化しているか（もしくは、変化する必要があるか）についてを話題にした面白い記事を書きました。「PR 産業は数年毎に一度よりも多く次世代のコンセプトの再検討を必要とします。メディアは常に変化しています。PR はペースを保つ必要があります、さもなければ、FAX 同報の道を進むことになるでしょう。それはいまだに出回っていますが完全に現代と離れている状態にあります。」Melissa の投稿は Mozilla の PR の努力の内的な仕事の魅惑的な一面を伝えていて、これらのプロセスをより透明にアクセシブルにしています。Melisa のウェブログでの投稿全文をチェックしてください。

- -

Firefox 3 アドオンの互換性状況についての更新情報

- -

Alex Polvi が、Firefox 3 とまだ互換性がない上位のアドオンの現在の状態の概要について述べている Firefox 3 アドオン互換性レポートの新しいものを投稿しました。今週の一覧には次のものが含まれています。：Firebug、Tab Mix Plus、FireFTP、Foxmarks、FoxyTunes、Blue Ice、RedShift V2、ColorfulTabs、他です。Alex はいくつかの助けを求めています。ですから、もし Firefox リリースに関して手伝うことに参加したいなら、彼のブログに行き、始め方を参照してください。

- -

SUMO のすべて: Mozilla の 2 回目のコミュニティ調査

- -

コミュニティ調査チームは SUMO（support.mozilla.com）を助けているコミュニティについてより学ぶことに焦点を当てた Mozilla の 2 回目のコミュニティ調査の結果の発表を始めました。これらの最初の 2 つの記事において、彼らは調査の準備、調査の発表、そして、結果のいくつかの初期解析の背景にあるプロセスの概要を述べています。この調査からより多くのことが発表されていますが、Mozilla Community Survey ウェブログでまず最初の 2 つの記事 — その 1 と その 2 — をチェックしてください。

- -

Firefox 3: サイト認証ボタン

- -

Firefox 3 の最も刺激的な新しいセキュリティ機能の一つは サイト認証ボタンです。ボタンは長い間ブラウザで用いられている主要なセキュリティインジケータであるユビキタスな「南京錠」アイコンを置き換えて進化しました。単に南京錠を表示するだけではなく、Firefox 3 ではブラウズされているサイトについて知ることができる限りの情報を知ることができ、ボタンを単純にクリックすることによってその情報に簡単にアクセスすることを可能にしています。この機能を通して Firefox 3 はユーザに異なったセキュリティレベルの範囲をカバーする情報を提供します。新しいサイト認証ボタンについて多くのさらなる情報は Deb Richardson のウェブログで記事全文をチェックしてください。

- -

Processing.js

- -

Mozilla の エヴァンジェリズムチームの一員である John Resig が（完全に彼の余暇で）Processing という視覚化言語を Canvas 要素を用いて JavaScript に移植しました。このプロジェクトは先週の木曜日に John のウェブログで始まり、彼が書きあげたものには、プロジェクト開発に関する詳細、Processing の API、デモのホスト、完全なソースコードへのリンク、そして、それの使用方法が含まれています。デモはすべて Firefox のベータページからダウンロードできる最新の Firefox 3 ベータ版で動作します。多くのさらなる情報は John のウェブログに用意されています。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080520/index.html b/files/ja/devnews/20080520/index.html deleted file mode 100644 index abc9a16dc8..0000000000 --- a/files/ja/devnews/20080520/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: '20080520' -slug: DevNews/20080520 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

about:mozilla 読者調査

- -

先週私たちは初めての about:mozilla 読者調査を開始しました。まだ回答する機会がなかったならば、今がチャンスです。調査は 5 月 27 日まで実施される予定です。調査を締切ったその日から私たちは回答結果の分析を始める予定です。

- -

このニュースレターをより良いものにするためにぜひこの調査を通してフィードバックを送ってください。

- -

Firefox スクリーンキャストコンテストが始まりました!

- -

Firefox スクリーンキャストコンテストが始まりました! Firefox Support knowledge base (SUMO) のためのスクリーンキャストサポートビデオを作成することで Firefox のために才能と情熱を活かすことができる良いチャンスです。

- -

SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、あなたに 1 つ、2 つ、3つ、あるいは、その全てのスクリーンキャストを作成することを求めています！全部で 100 人の受賞者 - 各記事ごとに 1 人- が選ばれ、各受賞者に独自の Firefox スクリーンキャストコンテスト T シャツが与えられます。これがこの独自のコレクターアイテム T シャツを手に入れるための唯一の方法ですから、今日からスクリーンキャストを作り始めてください！

- -

また、100 の受賞ビデオのベストエントリーに対して大賞が選出されます。何かがもらえるわけではありませんが、この賞はさらにより多くの写真とビデオを撮ろうというやる気につながるでしょう。

- -

コンテストは 5 月 19 日 から 6 月 15 日午後 11:59 (GMT-7) まで行われます。チームは応募作品のすべてを見ることを楽しみにしています！さらなる情報は、公式のコンテスト告知の投稿をチェックしてください。

- -

Support Firefox day が今週の金曜日に開催されます！

- -

金曜日に、SUMO チームは “Support Firefox”day を #sumo IRC チャンネルで開催します。 彼らは Mozilla の「名士」（John Lilly、Asa Dotzler、Mike Beltzner、Mike Connor）との Q&A セッションを用意しています。彼らは特定の Mozilla トピックと彼らがどのようにユーザ対ユーザサポートプロジェクト SUMO に関わっているかについて話します。加えて、彼らは 3 つのワークショップを用意しています。 - SUMO Live Chat システムを通して協力する方法、Firefox のトラブルシューティングの方法、そして、Dietrich Ayala による新しい Places（ブックマークと履歴）システムについてのゲストワークショップがあります。

- -

これらのセッションは常に楽しみに満ち溢れており、Mozilla プロジェクトに参加するための本当に素晴らしい方法です。ですから、金曜日かそれより前に irc.mozilla.org の #sumo チャンネルに行くことで準備を整え、Firefox と SUMO プロジェクトで活動している素晴らしい仲間たちに会うことができます。さらなる情報は SUMO ウェブログに用意されています。

- -

Firefox 3 Release Candidate 1 がダウンロード可能に

- -

最初の Firefox 3 リリース候補版 がダウンロード可能になりました。このマイルストーンはプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、Firefox 3 Planning Center や mozilla.dev.planning、irc.mozilla.org の #granparadiso で追うことができます。

- -

このマイルストーンにはいくつかの新機能と変更が含まれています。：ユーザインタフェースの改善、ロケーションバー、ブックマークバックアップ、そして、フルページズームにような新機能のための変更と修正、さらなるセキュリティ、互換性、安定性の修正、そして、JavaScript エンジンを含む継続したパフォーマンスの改善。このリリースについてのさらなる情報は、リリースノートに用意されています。さらなる情報とソフトウェアをダウンロードするためのリンクは公式アナウンスメントを参照してください。

- -

アドオン開発者へ：Firefox 3 最終 MaxVersion アップデート

- -

Firefox 3 Release Candidate 1 が利用可能になった今、addons.mozilla.org (AMO) は Firefox 3 のための最終製品バージョン番号を修正し容認する予定です。特に、私たちは妥当な Firefox 互換可能バージョンとして “3.0″ と “3.0.*”を追加しました。完全なアプリケーションの互換性リストは AMO に用意されています。

- -

アドオン開発者にとってこのことが意味することは Firefox 3 リリース候補版でテストした後、AMO の Developer Tools セクションを用いて全く新しいバージョンをアップロードする必要無しに自分のアドオンのバージョンナンバーを上げることができるということです。さらなる情報は Basil Hashemと Mark Finkle のブログ投稿を参照してください。

- -

Mozilla が LiMo Foundation に参加

- -

Jay Sullivan が Mozilla Corporation が最近 LiMo Foundation に参加したことについてブログに書いています。「Linux はモバイルプラットフォームとしての素晴らしいポテンシャルを秘めています。しかし、過去数年間の分裂によって妨げられてきました。Limo は多くの主要なデバイス生産者、ネットワークオペレーター、そして、モバイルエコシステムにおけるその他の人々を一同に会して、Linux ベースのモバイルミドルウェアプラットフォームの作成で協力しようというものです。私たちは Web ブラウジング、Web ウィジット/ランタイム、そして、セキュリティに関する Limo プラットフォームの側面のすべてで活発に参加することを意図しています。また私たちは成功するオープンソースコミュニティを構築することに関する自分たちの経験を共有することを計画しています。」さらなる詳細は、Jay のブログ投稿を読んでください。

- -

Thunderbird “Shredder” alpha 1 がダウンロード可能に

- -

Thunderbird の次のバージョンの最初のアルファリリースである Shredder alpha 1 がダウンロード可能になりました。非常にわずかな機能の変更だけですから、Thunderbird 2 との大きな違いを期待しないでください。しかし、Shredder は実質上修正されたコードベース上でビルドされています。そのコードベースは将来の機能の変更を構築可能にする素晴らしい土台を提供するものです。これは初期のアルファリリースであり、開発とテスト目的のためのみを意図としたものであることに注意してください。このリリースは重大なバグを含み、また、扱いに注意すべきものであるため、製品としては使用できません。このアルファリリースについてのさらなる情報は、David Ascher のウェブログ投稿を参照してください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080527/index.html b/files/ja/devnews/20080527/index.html deleted file mode 100644 index 0395c582b8..0000000000 --- a/files/ja/devnews/20080527/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: '20080527' -slug: DevNews/20080527 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

ニュースレター調査 - 最後の呼びかけです！

- -

 今日は最初の about:mozilla 読者調査に回答できる最後の日です！まだ回答する機会を得ていないなら、今が（最後）のチャンスです！今日が終わった後に、私たちは調査を終了して結果を解析し始めることができるようになります。今日の時間のうちの数分を費やして、このニュースレターをより良くするための手助けをしてはもらえないでしょうか。すでに回答いただいたみなさまには本当に感謝します！

- -

新しい about:addons ニュースレター

- -

Mozilla は アドオンに関連したニュース項目と情報に特化した新しいニュースレター about:addons を開始しました。最近の Firefox リリースサイクルの間にアドオンの作成、ホストする方法に多くの変更がなされていて、同様に addons.mozilla.org (AMO) での変更も数多くあります。それらのすべてを Mozilla から出される他の情報のすべてとともに追い続けることは困難であり、そのため、私たちはこの専用のニュースレターにまとめることにしました。登録するには about:addons 購読フォームへ行ってください。また、さらなる情報は、Mark Finkle のウェブログをチェックしてください。about:addons の最初の号はすでに発行され、DevNews のウェブログで読むことができます。

- -

Firefox 3 のマルウェア防御機能の説明

- -

Mozilla のセキュリティ UI リーダーである、Johnathan Nightingale が Firefox 3 の新しいマルウェア防御システムを説明したブログ投稿を書いています。「Firefox 3 では、2、3 個の非常に強硬的な方法で防御を強化しています。まず最初に、Firefox 2 でブロックした偽サイトに加えて、ネット上に存在している報告されたマルウェアサイトのすべてを追跡する 第 2 のリストを追加しました。次に、コンピュータがリスクにさらされないように、ページを読み込む前の最初の時点でブロックするようになりました。そして三番目として、好奇心の強い人のために、起こり得る悪影響を的確に説明するマルウェアサイトのレポートを提供します。」Johnath のウェブログで記事の全文を読むことができます。

- -

Firefox スクリーンキャストコンテストが実施中

- -

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

- -

Firefox 3 アドオンの互換性状況についての更新情報

- -

Alex Polvi が Firefox 3 と現在互換性がないアドオンの現在の状態の概要について述べている Firefox 3 アドオン互換性レポートの新しいものを投稿しました。今週の一覧には次のものが含まれています。：Firebug、MinimizeToTray、Tab Mix Plus、Noia 2.0、FireFTP、Foxmarks Bookmark Synchronizer、そして、RedShift V2。詳細と手助けする方法についての情報は、Alex のブログの投稿全文を読んでください。

- -

Firefox 3 対応の 上位 20 個のアドオン

- -

Firefox 3 アドオン互換性情報ニュースより後に、Deb Richardson が Firefox 3 対応の 上位 20 個のアドオンについてブログに書いています。「私は多くの人々がテストを手伝うことに飛び込もうとするより以前にアドオンが更新されることを待っているのを知っています。しかし、どれだけのチャンスであることでしょう。数十のアドオンが毎日更新され続けていて、数千がすでに用意ができています。」Deb が話題にしているアドオンの一覧には次のものが含まれています。：Adblock Plus、Faviconize Tab、Flashgot、Forecastfox、ScribeFire、Shareaholic、などなど。Deb のウェブログで投稿全文を読んでください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080603/index.html b/files/ja/devnews/20080603/index.html deleted file mode 100644 index 9404ebbcd2..0000000000 --- a/files/ja/devnews/20080603/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: '20080603' -slug: DevNews/20080603 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

ギネス世界記録達成に協力してください！

- -

Firefox コミュニティは Firefox への情熱を宣言するために、常に素晴らしい、協力し合う方法を計画しています。24 時間で最も多くソフトウェアをダウンロードするというギネス世界記録を達成するために結束するということよりもこれを為すためのより良い方法があるでしょうか？

- -

あなたが為すべきことは Download Day - 6月中のいつか 中に Firefox 3 をダウンロードすることだけです。それまでの間、Download Day キャンペーンサイトをチェックし、Firefox 3 をダウンロードする誓約をしてください。私たちは Firefox 3 がリリースされたとき、24 時間の試みが開始されたことをあなたに知らせます。

- -

Firefox 3 Release Candidate 2

- -

Firefox 3 開発チームはリリース前に Firefox 3 の新しいリリース候補版を出すことを決定しました。これは 6 月下旬に予定されている最終リリース日を変えるものではありませんが、RC1 の期間中に発見された問題の少数の追加修正を含みます。RC2 で修正された問題の多くがすでにパッチが出され、レビューされ、承認され、チェックインされています。また、いくつかのローカライゼーションアップデートも受け入れられています。Release Candidate 2 は現在、6 月 4 日水曜日に利用可能になる見込みです。このことについてのさらなる情報は、mozilla.dev.apps.firefox の Mike Beltzner の投稿、及び、5 月 27 日の Firefox 3 ステータスミーティングのノートを参照してください。

- -

New York Times の記事で Firefox を特集

- -

New York Times が最近のブラウザ開発での加速する競争と革新についての記事で Firefox を特集しました。「3 年間の開発と 6 か月間の公式テストの後、Netscape のなきがらからよみがえった暴れブラウザ開発者である、Mozilla は、Firefox 3 をリリースします。Firefox 3 の機能に、人々が最も頻繁に訪れるサイトを整理して探し出す方法を変化させるわずかな仕掛けがあります。さらに Microsoft に競争力の面で打撃を与え、Firefox は高度な技術産業のためにブラウザの財政的及び戦略的価値をも増強します。」記事の全文は NYTimes の ウェブサイトに用意されています。

- -

最新の Firefox 3 アドオン更新情報

- -

Alex Polvi は Lifehacker の Gina Trapani と協力して Firefox 3 のアドオン互換性状況について記事にすることになりました。Lifehacker は毎週金曜日に週毎の「アドオンの状況」をレポートすることを計画しています。

- -

現在 addons.mozilla.org (AMO) には Firefox 3 と互換性がある 800 以上のアドオンがあります。これはアドオンの総量の約 60% に相当します。5 つの最近更新されたアドオンは以下です。：ForecastFox、FoxMarks、Firefox Companion for eBay、Gmail Manager、そして、translator。5 つの依然として更新が必要とされるアドオンは以下です。：Mouse Gestures、Greasemonkey、Tab Mix Plus、FoxyTunes、そして、ColorfulTabs。続きを読むには、また、協力の仕方についてにさらなる情報を得るには、Alex のウェブログに行ってください。

- -

Firefox スクリーンキャストコンテストが実施中

- -

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080610/index.html b/files/ja/devnews/20080610/index.html deleted file mode 100644 index b5d0f7f6c3..0000000000 --- a/files/ja/devnews/20080610/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: '20080610' -slug: DevNews/20080610 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3 RC 2 がリリースされました

- -

Firefox 3 Release Candidate 2 が 6 月 4 日にダウンロードおよびテスト可能になりました。これは開発者のテストとコミュニティのフィードバックを意図したパブリックプレビューリリースです。インストールする前にリリースノートと既知の問題についてのページを読むことを推奨します。Firefox 3 RC2 のリリースについてのさらなる情報は Developer News ウェブログにあります。

- -

ガバナンス及びモジュールオーナーシップ

- -

モジュールオーナーシップシステムの健全な状態を管理及び維持するために Mozilla プロジェクトが進めている試みの一部として、Mitchell Baker はシステムを管理するための方法を更新するための計画を 3 月に投稿しました。その計画は現在実装され、Mitchell が彼女のウェブログにその詳細を投稿しています。

- -

Jesse Ruderman が質問に答えます

- -

「Ask a Developer（開発者に聞く）」インタビューシリーズの一つとして、Asa Dotzler が最近 Mozilla のセキュリティエキスパートの一人である Jesse Ruderman に質問に答えてもらうようにお願いしました。Jesse はこれらの質問に答え、Asa はその答えを彼のウェブログに投稿しています。インタビューの全文を Asa のウェブログで読んでください。

- -

Litmus にアクセシビリティテストケースが用意されました

- -

Litmus はテストケースのセットを行い、そのテストをパスしたかどうかをフィードバックすることによって、 誰でも Firefox や 他の Mozilla 製品のテストを可能にするMozilla のコミュニティテストプラットフォームです。Mozilla QA チームはこれらのテストを利用しています。基本的な機能のテスト（各ベータリリースの前に行う）、全ての機能のテスト（リリースあるいはリリース候補の前に行う）や、製品の特定の部分が期待通りに動作することを保証するための他の機会にこれらのテストを利用しています。

- -

Mozilla のアクセシビリティ QA リーダーである Marco Zehe が Firefox 3 のアクセシビリティ機能のテストケースを作成しました。Firefox のアクセシビリティテストに協力することに興味があるなら、Marco のブログ投稿をチェックすべきです。

- -

HTML コンテントに SVG の効果を適用する

- -

Robert O’Callahan が最近取り組んでいる一つの問題は SVG の機能を用いて HTML コンテントを拡張することは現在難しいということです。「例えば、HTML 要素を直角ではない部分にクリップしたり、HTML 要素にアルファマスクを適用したり、あるいは、HTML 要素にカラーチャンネル操作のような画像処理効果を適用するための簡単な方法はありません。SVG にはこれらの機能がありますが、それらは SVG 要素にしか適用されません。」Robert は SVG の効果を HTML コンテントの適用するためのより良い方法を実験しており、その最初の段階として、HTML コンテントに適用されたときに動作する SVG の「clip-path」、「mask」、そして、「filter」プロパティを作成しました。Robert は彼のブログに詳細の全てを書いています。

- -

Firefox のテストに協力し、QA Bugdays に参加してください

- -

Carsten Book が Mozilla の QA Bugdays について話題にしている記事を書きました。私たちはユーザとテスターのコミュニティによって毎日報告される非常にたくさんの数のバグレポートを目にし、Bugdays は未確認のバグが確認されたり閉じられたりする場所です。それらは Mozilla の開発の試みに参加するための素晴らしい方法であり、以前そのプロジェクトに参加したことがあるかどうかは問題になりません。つまり、誰でも参加でき、価値ある貢献者になれるです。Bugdays は定期的に行われており、週毎に作業の焦点が変わります。QA の Bugdays についてさらに多くことを知るために、Carsten のブログ投稿を参照してください。

- -

Acid 3 に近づく 5 つのポイント

- -

現在、3.0 以降の Firefox リリースのためのソースコードレポジトリである mozilla-central が開かれ、Acid 3 テストの得点に影響するバグを修正するパッチ群がチェックインされています。：

- - - -

Mozilla T シャツヒストリープロジェクト

- -

John Slater が新しいプロジェクト、The T-Shirt History of Mozilla に取り組んでいます。Mozilla コミュニティ周辺に多くの時間を費やしたことがある人なら誰でも知っているように、T シャツは私たちの文化に重要な部分です。John はできるだけたくさんの異なった Mozilla あるいは Mozilla に関連する T シャツの写真を集めることに取り組んでいて、今までのところ 53 種を集めました。コレクションすべてを見るために Flickr へ行き、まだ含まれていない T シャツを持っているなら、John に知らせてください。

- -

ギネス世界記録達成に協力してください！

- -

Firefox コミュニティは Firefox への情熱を宣言するために、常に素晴らしい、協力し合う方法を計画しています。24 時間で最も多くソフトウェアをダウンロードするというギネス世界記録を達成するために結束するということよりもこれを為すためのより良い方法があるでしょうか？

- -

あなたが為すべきことは Download Day - 6月中のいつか 中に Firefox 3 をダウンロードすることだけです。それまでの間、Download Day キャンペーンサイトをチェックし、Firefox 3 をダウンロードする誓約をしてください。私たちは Firefox 3 がリリースされたとき、24 時間の試みが開始されたことをあなたに知らせます。

- -

Firefox スクリーンキャストコンテストが実施中

- -

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080617/index.html b/files/ja/devnews/20080617/index.html deleted file mode 100644 index 89cace7a32..0000000000 --- a/files/ja/devnews/20080617/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: '20080617' -slug: DevNews/20080617 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3 のリリース日は今日です！

- -

私たちは成し遂げました！ 約 3 年間の開発期間を経て、Firefox 3 が今日リリースされます。数千人の人々 -- 開発者、デザイナー、ローカライザー、テスター、マーケター、ユーザサポーター、ドキュメント執筆者 -- の貢献によって Firefox 3 は産み出されました。これは世界で最も素晴らしいオープンソースコミュニティの一つによるものです。私たちは全員非常にそれを誇りに思い、ついに数百万の人々の手に渡ることになることに素晴らしく興奮しています。

- -

過去数週間、Mozilla コミュニティのメンバーはブラウザでわかる新しい機能及び改善された機能を幅広く書いてきました。新機能は非常に目立ち勝負の形勢を変化させるものから、あまり目立たないために Firefox の利用がなんとなくより簡単にかつより良くなったことに気づくまで注目しないかもしれないものまで全範囲に渡っています。改善された機能も似たようなものです。バックエンドシステム全体はスクラッチから構築し直された一方、他の機能はほんの少しの変更がなされたか、細かくリデザインされました。まとめると、その結果、今までの Firefox のバージョン中、最も早く、最も安全で、最もスリムで、そして、最も簡単に利用できるようになったということです。もっと知るために、Field Guide to Firefox 3（日本語版）を読んでください。

- -

もしまだなら、Firefox Download Day サイトへも行き、一日に最もダウンロードされたソフトウェアという新しいギネス世界記録の達成に協力するべきです。それが終わったなら、Mozilla Party Central へ行き、参加するイベントを見つけるか企画してください。私たちはみなさんが今まで最高の Firefox のリリースを祝うために協力することに参加してくれることを望んでいます。

- -

Walt Mossberg が Firefox 3 をレビュー

- -

7 月 5日、Wall Street Journal のコラムニストである、Walt Mossberg が 「ベストな Web ブラウザが私たちのもとにもうすぐ」と題した、Firefox 3 の素晴らしいレビューを執筆しました。「機能、速度、セキュリテイで IE と Safari の両方の現在のバージョンを上回っています。インストールすることは簡単で、主流の、技術的に詳しくないユーザでも、利用することも簡単です。」

- -

明らかに、そのような名高いレビュアーからそのような素晴らしいレビューをもらったことに私たちは非常に興奮しています。記事の全文とそれに付随したビデオポッドキャストが Wall Street Journal online にあります。

- -

Mitchell Baker が 6 月 17 日-19 日 に韓国に

- -

6 月 17 日と 18日に、Mitchell Baker は韓国で行われる OECD Ministerial Meeting on The Future of the Internet - “Shaping Policies for Creativity, Confidence and Convergence in the Digital World（創造性のためのポリシーの形成、デジタル世界における信用と収束）”で話します。Mitchell は 6 月 18 日の Mozilla Korea コミュニティとの夕食にも出席し、世界同時リリースとともに彼らの努力を祝います。最後に、Mitchell は 6 月 19 日の Future Web Forum 2008: Global Web Technology Workshop で基調講演を行います。詳細については、Gen Kanai の Mozilla in Asia ブログを訪れてください。

- -

6 月 20 日は Support Firefox Day

- -

SUMO (support.mozilla.com) コミュニティは Firefox 3 リリースの一部分としてスペシャルイベントを企画しました。6 月 20 日の Support Firefox Day です。新しいブラウザにすみやかに移行できるように Firefox 3 の新機能のうち最も重要な機能を紹介するインタラクティブなデモを設ける予定です。これは コードを書いた人々から Tips と実際を直接知るチャンスです。それに加え、新しいユーザベースのオンラインサポートシステムを披露し、それに参加し、Mozilla Support チームの一員となり、世界で最高のブラウザ上で自分らしさを出すのがどんなに簡単かを示す予定です。

- -

さらなる情報、登録、そして、SUMO コミュニティのメンバーの素晴らしいビデオのために、Support Firefox Day ページをチェックしてください。

- -

SUMO についてのすべて: David Tenser インタビュー

- -

SUMO (support.mozilla.com) は私たちの新しいコミュニティパワーによる Firefox のユーザサポートサイトです。Firefox についての質問や問題があるなら、SUMO は ドキュメンテーション、良く聞かれる質問（FAQ）への答え、活発なコミュニティフォーラム、そして、新しい Live Chat で素晴らしく助けになる仲間で見つけるために向かうべき場所です。

- -

David Tenser は Mozilla コミュニティに何年間も関わり、現在は SUMO プロジェクトのリーダーをしてます。彼はますます忙しくなるスケジュールを割いて Deb Richardson のいくつかの質問に答えてくれました。インタビューの全文は Deb の ウェブログにあります。

- -

Johnathan Nightingale が Firefox 3 のセキュリティ機能を語る

- -

CNET の Robert Vamosi は 先週 Mozilla の「Human Shield」（aka セキュリティユーザインタフェースデザイナー）である、Johnathan Nightingale と話しました。インタビューの中で、Johnathan は Firefox 3 の一部分である新しいセキュリティ機能について説明しています。さらなる情報と音声のみのポッドキャストへのリンクは CNET の Security Bites ウェブログにあります。

- -

Firefox Mobile コンセプトビデオ

- -

Mozilla Labs でのユーザエクスペリエンスのリーダーである Aza Raskin が Firefox Mobile のユーザインタフェースコンセプトデモのビデオをまとめました。「ユーザエクスペリエンスは今切実に求められているモバイル製品で最も重要なものです。タイピングに骨が折れ、スクリーンサイズが極めて小さなものである場合、ちょっとした操作性と表示されるピクセルまでもが重要となります。メニュー、常に表示される UI、そして、カーソルのような、多くの標準的な操作モデルは、モバイルにおいては通用しません。とてもワクワクする課題であり、解決へ向けての無数の挑戦がなされてきました」。ビデオ付きの詳細な投稿は Aza のウェブログにあります。

- -

Eweek による Brendan Eich インタビュー: The New Browser War

- -

「Brendan Eich は誰よりも最近のブラウザに、より多くではないにせよ、非常に影響を与えたと主張されるでしょう。Netscape Communications で、彼は Netscape Navigator ブラウザのために JavaScript を作りました。彼は Mozilla.org の Co-Founder であり、Mozilla Foundation のスピンアウトに協力しました。そこで彼はテクノロジストのリーダー及び Board of Directors の一員となりました。2005 年に Eich は Mozilla Corp の Chief Technology Officer になりました。Eich は、幅広いトピックについて話すためのこのスプリントの前に、Senior Editor の Darryl K. Taft とともにカリフォルニア、マウンテンビューの Mozilla の本部で座りました。彼らの議論からのこの抜粋は JavaScript とその予定について焦点が当てられています。」Eweek で 4 ページのインタビューを読んでください。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080624/index.html b/files/ja/devnews/20080624/index.html deleted file mode 100644 index 533cf4f442..0000000000 --- a/files/ja/devnews/20080624/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '20080624' -slug: DevNews/20080624 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3 がリリースされました！

- -

Firefox 3 が 先週の火曜、7 月 17 日にリリースされました。リリース日祭りの一部として、一日で最もダウンロードされたソフトウェアの新ギネス世界記録達成に協力するようにみなさんに頼んだ「Download Day 2008」が行われました。24 時間で、非公式カウントで 800 万以上の Firefox 3 がダウンロードされました！ギネスが記録の妥当性を審査中であり、Spread Firefox チームは認められたときにその結果を発表することを準備中です。それ以降、さらに 1000 万 の Firefox 3 がダウンロードされ、最初の週で合計 1800 万以上に達しました。

- -

 

- -

公式 Firefox 3 T シャツが入手可能になりました

- -

今年の初めにコミュニティでのデザインコンテストによって選ばれた公式 Firefox 3 T シャツが Mozilla Store にて男性向け・女性向けの両方で入手可能になりました。ストアではアンケートも実施しており、ストアに追加されるべき次のアイテムを選ぶ協力をすることができます！こちらで投票してください。

- -

ブラウザセキュリティの活性化

- -

SecurityFocus 貢献者の Federico Biancuzzi は Firefox 3 のセキュリティ機能についてさらに学ぶため、Mozilla のセキュリティチームの二人のキーメンバー、Window Snyder と Johnathan Nightingale に会いました。彼らはマルウェアからの防御、より安全なアドオンの更新、バグ発見への賞金、JavaScript の堅牢化、そして、Mozilla セキュリティのプロセスなどの話題について話しました。SecurityFocus でインタビュー全文を読んでください。

- -

Mozilla Developer Resource Kit

- -

David Humphrey が彼の Mozilla Developer Resource Kit (MDRK) プロジェクトについてブログに書いています。「生徒を Mozilla の世界に参加させることを手伝うことに 3 年間を費やして、私は Mozilla にやって来る新しい開発者が活動をちょっとだけより簡単にするための方法についてわずかながらの考えを持つようになりました。MDRK は秋へ向けて作業する予定ですが、私は現段階でそのいくつかの断片を共有したいと思いました。」これは素晴らしく興味深いプロジェクトであり、David のウェブログで彼の紹介全文をチェックすることができます。

- -

新しい Mozilla.com：忍者に注目

- -

Mozilla のクラックマーケティングチームの一人である John Slater が新しい Mozilla.com サイトについてブログに書き、また、新しい Firefox 3 プロモーションビデオを紹介しています。 「Mozilla.com のリデザインの最大の目標の一つは、言うならば、Firefox 3 のプレゼンテーションをほんの少し違うものにすることです。その点を考慮して、私たちは本当にサイトにおける Firefox のセクションを拡大し、詳細な機能についてのページ、Tips & Tricks、セキュリティとアドオンについての情報などを追加しました。私たちはまた、説明するよりも示した方がより簡単であることから、サイトに初めての人向けのビデオを追加するための良い機会だと思いました。」John のウェブログで投稿の全文を読み、ビデオを見てください。

- -

月例 Mozilla Labs ミーティング

- -

Mozilla Labs チームは「今月から私たちは定期月例ミーティングを行うことを始める予定です。このミーティングは、Labs のプロジェクトについてより知り、参加したい人々を集めて、パブリックリソースとしてのラボの革新を推し進めることを目的にしています。最初のミーティングは今週の水曜日、7 月 25 日 午後 6 時から行われます。場所は、カリフォルニア州マウンテンビューの Landings Drive 1981 にある Mozilla のオフィスです。」とアナウンスしました。興味があり、出席できるなら、Labs のブログ投稿上にコメントを残すことによって出席を表明してください。

- -

来週はニュースレターはお休みです

- -

about:mozilla ニュースレターは短いお休みをいただきます。来週火曜、7 月 1 日はニュースレターを発行しません。7 月 8 日から通常発行スケジュールに戻ります。

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080630/index.html b/files/ja/devnews/20080630/index.html deleted file mode 100644 index 33a85c22b2..0000000000 --- a/files/ja/devnews/20080630/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 'about:mobile - 創刊号、Fennec M4 が利用可能に、モバイルネットワークプロファイリングツール、などなど…' -slug: DevNews/20080630 -tags: - - DevNews - - 'DevNews:about-mobile' ---- -

創刊号

- -

about:mobile 創刊号にようこそ。このニュースレターは Mozilla Mobile コミュニティで起こっていることを月一ペースでカバーする予定です。コメントと提案を about-mobile@mozilla.com に送ってください。このニュースレターは Mozilla Developer News ウェブログまたは E メールリスト経由で購読することができます。メールの一番下にあるリンクからいつでもメーリングリストの購読を解除することができます。

- -

Fennec M4 がテスト可能に

- -

Fennec の M4 マイルストーンリリースがテスト用として N800 と N810 向けに利用可能になりました。このリリースの主要な機能は、Stuart Parmenter と Gavin Sharp によって主に書かれた、実に良いスクロールとパンです。これは依然として非常に初期のマイルストーンリリースであり、不完全であったり、不安定である多くの機能がこのビルドには存在します。この Fennec マイルストーンリリースを N800 シリーズタブレットにインストールする方法の手引きとこのリリースに関する Mark の投稿を参照してください。この手引きに従えば、マイルストーンの更新も、利用可能になりしだい、取得することができるはずです。M5 マイルストーンは今から数週間後に登場する予定です。

- -

参加したいのなら、mozilla.dev.platforms.mobile ニュースグループ上の Mozilla モバイルコミュニティか、IRC 経由で irc.mozilla.org の #mobile に参加することができることを覚えておいてください。

- -

新しい Fennec の動作 UI デザイン

- -

Madhava Enros が Fennec の動作 UI デザインを更新しました。現在のデザインの目的は必要なタイピングを最低限にし、素早い検索を簡単に行えるようにし、そして、Web コンテンツに割り当てられる画面スペースを最大限にすることです。主要なブラウザコントロールとタブサムネイルはページの端に移動しますが、必要なときに素早くドラッグしてくることができます。完全に把握するために Wiki のモバイルセクションの更新されたモックアップを参照してください。

- -

新しいモバイルネットワークプロファイリングツール

- -

Pat McManus はモバイルのネットワークパフォーマンスを計測する作業に取り組んでいます。この一部として彼は Linux 上の Fennec をまるで様々な異なるワイアレスネットワークを通してインターネットに接続しているようにするネットワークエミュレーションツールを作成しました。彼は GPRS、3G、bluetooth、その他の設定を作成しました。ツールへのフィードバック、特に、提供されているプロファイルと反応が鈍いページの報告を非常に歓迎します。ツールの入手方法と使用方法の詳細はニュースグループの告知にあります。

- -

Aza Raskin によるモバイルコンセプトビデオ

- -

Mozilla Labs の Aza Raskin がモバイルタッチデバイス上の移動について彼が考えているいくつかのアイデアの概要を説明しているビデオとブログ記事を投稿しました。それは 1 本の指で操作するようにデザインされており、Aza は 人々がどのようにタブからタブへ、あるいは、ブラウザからブックマークへ移動するかについてのいくつかのアイデアを調査しています。視覚的な運動量及び現実的な物理的特性への注目がデモを完成させています。さらに知るために素晴らしいスクリーンキャストを含んだ Aza の投稿を参照してください。

- -

組み込み

- -

Pelle Johnsen と Dave Camp は Mozilla の新しい組み込み APIに懸命に取り組んでいます。それは依然としてとてもとても初期段階のものですが、Pelle はいくつかのサポートされたプラットフォーム向けの組み込み API をビルドする方法についての手引きを投稿しました。現在は Windows 上の Qt、単独のネイティブ win32 バージョン、Linux 上の GTK+ での動作をサポートし、また、Tristan Van Berkom が Windows 上の GTK+ での動作をサポートしています。加えて、Pelle は API の共通部分の概要を示した初期段階の doxygen ドキュメントを投稿しています。

- -

組み込みコミュニティに参加したいなら、irc.mozilla.org の #embedding か mozilla.dev.embedding ニュースグループに参加してください。

diff --git a/files/ja/devnews/20080708/index.html b/files/ja/devnews/20080708/index.html deleted file mode 100644 index 6cf12d46b7..0000000000 --- a/files/ja/devnews/20080708/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '20080708' -slug: DevNews/20080708 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

公式世界記録！

- -

Firefox コミュニティは新しいギネス世界記録の誇るべき保持者になりました。7 月 2 日、Mozilla はギネスから 最終的な合計 800 万 2530 ダウンロードとなった「24 時間で最も多くダウンロードされたソフトウェア」という記録を公式に達成したという認定を受けました。これは私たちのコミュニティが成し遂げてきた素晴らしい記録の歴史に加えられるものの一つです。Firefox は 2004 年に誕生して以来、Firefox のサポーターがその単語を広めることに協力してくれるということを信じ続けてきました。そして、現在、230 ヶ国以上に 1 億 8 千万以上のユーザがいます。これは驚くべき成果であり、全員、非常にうれしく思っています。自分専用の Download Day 証明書を手に入れるのを忘れないでください！

- -

 

- -

Firefox 2.0.0.15 がリリースされました

- -

Mozilla Corporation の安定性の向上とセキュリティ更新プロセスの一環として、 Firefox 2.0.0.15 が Windows、Mac、Linux 向けに現在ダウンロード可能になりました。 Firefox 2.0.0.x は 2008 年 12 月中旬までしかセキュリティと安定性の更新に伴うメンテナンスが行われないことに注意してください。GetFirefox.com で現在入手できる Firefox 3 にアップグレードすることをおすすめします。さらなる情報は、DevNews のブログ投稿を参照してください。

- -

Mozilla セキュリティメトリックプロジェクト

- -

Mozilla はセキュリティの調査家かつ分析家である Rich Mogull とともに 長期間にわたって Firefox に関連するセキュリティを計測するためのメトリックモデルの開発に取り組んでいます。チームは、長い時間をかけて、単純なバグカウントを超え、セキュアな開発努力の効果とユーザに関連するリスクの両方により正確に反映されるようなモデルを開発しようとしています。プロジェクトの第一段階の目的は長期間にわたって発展させることができるベースラインモデルを構築することです。プロジェクトの目的の前段階のバージョンとモデルのスプレッドシートがチームによって公開されました。これらは、プロジェクトについてのさらなる情報とともに、Mozilla セキュリティブログを通して入手可能です。

- -

Weave 0.2 開発マイルストーン

- -

Weave は ブラウザへのオンラインサービスを構築することに焦点を当てた Mozilla Labs のプロジェクトです。プロジェクトの目的は新しい Firefox ユーザエクスペリエンスを拡大し、ユーザがどのようにしてコンピュータ間、他人と個人情報を共有するかを管理することを促進させることです。Version 0.2 は Weave クライアントとそれを管理するサーバーのメジャーアップデートであり、重要な新機能が含まれています。変更についての詳細を含むさらなる情報を得るために、または、自分自身で試してみるために、Mozilla Labs ウェブログの投稿（日本語訳をチェックしてください。

- -

about:* ニュースレターファミリーの 2 つの新しいメンバー

- -

Mozilla は新しい 2 つのニュースレターを開始しました。about:addons と about:mobile です。about:addons は、アドオンに関連するニュースと開発情報を扱うことに絞ったニュースレターであり、増加しつつある大きく活気に満ちたアドオン開発者コミュニティにターゲットを絞っています。about:addons よりもさらに最近加わった about:mobile は、Mozilla の 新しく始まったモバイルプロジェクトについての全てを扱っているニュースレターです。両方のニュースレターは月一ペースで発行される計画であり、E メール、Web、RSS フィードによって購読することができます。登録方法を含むさらなる情報は、about:addons については Mark Finkle のブログ投稿、 about:mobile については Chris Blizzard のブログ投稿を参照してください。

- -

新しい Mozilla Developer Center のテスト稼働に協力してください！

- -

Mozilla の 開発者向けドキュメンテーションリーダーであり、MDC プロジェクトのコーディネーターである、Eric Shepherd が新しい Mozilla Developer Center のシステムとデザインについてのテストへの協力を求めています。協力する前に、重要なこととして、テストサーバへの変更はリアルデータベースには反映されないことに注意してください。サイトのテストバージョンは http://devmo.dekiwiki.mozilla.org です。さらなる情報とサーバーの状態とテストについて日々更新される詳細は、Eric のウェブログを参照してください

- -

次世代の JavaScripting

- -

Mozilla Labs の Aza Raskin が Labs のウェブログを通して「次世代の JavaScripting」について投稿しました。その中で彼は最近、Mozilla コミュニティのメンバーによって行われている 3 つの非常に興味深い JavaScript に関連するプロジェクトに注目しています。Java ベースの Processing プログラミング言語の移植である、John Resig の Processing.js、JavaScript ベースの Z-Machine  インタプリンタである、Atul Varma の Parchment プロジェクト、そして、印象的な画像を描くこと、最小のコードで芸術を作成することに焦点を当てたプロジェクトである、Aza 自身による ContextFree.js です。さらなる詳細は、ブログ投稿の全文（日本語訳）を参照してください

- -

開発カレンダー

- -

月曜日

- - - -

火曜日

- - - -

水曜日

- - - -

木曜日

- - - -

金曜日

- - - -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080715/index.html b/files/ja/devnews/20080715/index.html deleted file mode 100644 index fe8cd7977e..0000000000 --- a/files/ja/devnews/20080715/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: '20080715' -slug: DevNews/20080715 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox マーケティングとコミュニティ

- -

「Mozilla は 現在、Firefox3 ブラウザで 24 時間で最も多くダウンロードされたソフトウェアという新ギネス世界記録を公式に達成したことを祝うことに沸いています。しかし、企業で一人喜んでいるのではありません。この勝利をコミュニティと楽しんでいるのです。その成功に協力したものは正当に証明を受けることができます。」Jennifer Leggio による ZDNetの 記事は、ソーシャルネットワークと口伝えによる約束が支配している、Mozilla の伝統にとらわれないマーケティング戦略の興味深い調査です。Mozilla のマーケティング VP である Paul Kim へのインタビューで、Jennifer は、Spread Firefox、Facebook、Twitter、そして YouTube などで行われた、最近の Firefox 3 Download Day 運動の宣伝活動で使われた方法を掘り下げています。記事全文は ZDNet にあります。

- -

Mozilla のギネス世界記録証明書

- -

2008 年 7 月 9 日に Mozilla は「24 時間で最も多くダウンロードされたソフトウェア」という公式のギネス世界記録証明書を受け取りました。証明書に記載された最終的かつ公式な数は 8,002,530 です。これは信じ難い達成であり、コミュニティ全体が誇るべきことです。Tristan Nitot が Firefox コミュニティを代表して証明書を Guinness World Records 社のインターネットと技術を対象とした記録の管理者である Gareth Deaves から受け取りました。その証明書は Firefox 3 リリースと世界記録達成を祝うためにセントラルロンドンに集まった 300 強のコミュニティの前で授与されました。祝宴での写真とさらなる詳細は Mozilla Blog にあります。

- -

Colbert Bump - Firefox 3 がその存在を証明

- -

Firefox 3 Download Day の夜、「The Colbert Report」の Stephen Colbert が Firefox 3 に「Colbert Bump」を与え、リリースのために努力した仲間たちのうち、すでに舞い上がって疲れ切った者たちをさらに支持しました。Mozilla メトリックチームは「Colbert Bump」が実際に Web サイトのトラフィックに何らかの影響を与えたかどうかを見つけるためにダウンロードログをくまなく調べました。「Download Day は素晴らしい成功を収めました。そして、私たちはいくつかの感謝と名誉を Stephen と共有できて幸せです。しかし、わずかな疑問が自然と出てきます。例えば、Colbert Bump の直接的なインパクトは何だったのか？そして、その効果を正確に測定することができるのか？」「the Bump」の後に確かに 1、2 分だけダウンロードの大きな山があったことが明らかになりました。詳細は、Blog of Metrics の投稿全文を読んでください。

- -

あなたが知らないかもしれない Firefox 3 の機能

- -

Percy Cabello が Mozilla Links（日本語版） で Firefox 3 であまり知られていない機能のいくつかを取り上げた記事を公開しました。「、ダウロンロードの中断と再開、マルウェアプロテクション、新しいテーマ、劇的なパフォーマンスの改善は恐らく Firefox 3 で導入された最も代表的な機能です。他にも役立つ機能があることを紹介しましょう…」Percy のリストに含まれているものは、タブの複製、タブを異なるウィドウに移動する、検索バーのリサイズ、検索キーワードの追加、などです。 MozillaLinks ウェブログで記事全文を読んでください（日本語版記事）。

- -

Video 及び Audio 要素のパッチがチェックイン

- -

Chris Double は「WHATWG の video 及び audio 要素のサポートを追加するパッチが Firefox の mozilla-central レポジトリに導入されました。これは -enable-media configure flag を指定することで “video” と “audio” 要素をサポートした Firefox をビルドできるソースを手に入れることができるようになったことを意味します。チェックインされたパッチにはまだバックエンドデコーダーは含まれていません。つまり、ビデオを再生することはできません。これは様々なバックエンドがチェックインされることで修正されるでしょう。」さらなる情報は、Chris の ウェブログの投稿を参照してください。

- -

Mozilla コミュニティカレンダー

- -

Deb Richardson は 週毎/定期で行われている公式プロジェクトミーティングと他のイベントの広範囲に渡るリストをまとめました。その Wiki ページはこれです：コミュニティカレンダー。最終的には誰もが購読できる共有公開カレンダーとして強化されたバージョンを公開する予定です。Wiki ページをチェックし必要な変更、追加をしてください。

- -

Party in Taiwan は 7 月 19 日

- -

台湾における素晴らしい Mozilla コミュニティである MozillaTW.org は「Firefox Party 3.0」を 7 月 19 日に台北で行います。台湾にいるなら、これを逃さないでください！Gen Kenai のブログ投稿にかわいい Firefox Party のバナーがあります。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080722/index.html b/files/ja/devnews/20080722/index.html deleted file mode 100644 index faaf031812..0000000000 --- a/files/ja/devnews/20080722/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: '20080722' -slug: DevNews/20080722 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mark Surman と Mozilla Foundation

- -

Mitchell Baker が次のように書いています。「私は我々が信頼する人物が Mozilla Foundation を新しい活動のステージへ導くべきだという認識で一致したことを報告することにとても喜んでいます。その人物とは Mark Surman であり、役職は Mozilla Foundation Executive Director です。Mozilla Foundation Board of Directors と Mark は Mozilla コミュニティと Mark を我々が最終決定を下す前に合わせたいと思っています。我々は Mark と、Mark と Mozilla プロジェクトがいかに上手く協調できるかという気持ちを育てるために、Mozilla Foundation と Executive Director の役割について語るための興味深いパーティを企画しています。」さらなる情報は Mitchell のウェブログにあります。

- -

今週水曜日は Air Mozilla

- -

Asa Dotzler が今回もエキサイティングな Air Mozilla Live を 水曜日、太平洋時間 7 月 23日 午前 11 時に行う予定です。今週のゲストは Mitchell Baker と Mark Surman です。Air Mozilla の放送は Mark に Mozilla Foundation と彼が現在就任する予定である Executive Director の役職についての質問をするための機会です。ライブ放送を視聴できない場合、質問を放送時間までに E メールで受け付けます。さらなる詳細は、Asa のウェブログにあります。

- -

今週木曜日は Mozilla Labs Meetup

- -

今月の Mozilla Labs 月例ミートアップの時期です。今月のミートアップは今週の木曜日、7 月 24 日、午後 6 時から Mozilla オフィス（1981 Landings Drive, bldg K in Mountain View, California）で行います。自由な形式でのライトニングトークと様々な Labs のプロジェクトの進行状況報告があり、また、十分なディスカッションとハッキングの時間もあります。私たちは夕方 Labs サイトでストリーミングする予定です。Bay Area にいて出席したいのなら、時間をとって Mozilla Labs ブログの投稿にコメントをすることによって出席表明をしてください。

- -

Firefox スクリーンキャストコンテストの受賞者

- -

Firefox スクリーンキャストコンテストが終了し、現在 50 の新しいビデオが SUMO Knowledge Base の記事中に追加されています。コンテストチームはその結果をとてもうれしく思っており、ついに受賞者を発表できることに興奮しています。コンテストの審査員は大賞の受賞者に 「How to customize the toolbar」を制作した Cameron Roy を選びました。他の受賞者（各記事のベストスクリーンキャストの制作者）には賞品についての連絡が近々来るでしょう。コンテストに参加してくれたみなさんに感謝します。あなた方の助けにより Knowledge Base は計り知れないほど改善し、制作物は Firefox の 1億 8000 万以上のユーザの印象に残り続けるでしょう。さらなる詳細は SUMO のウェブログ投稿をチェックしてください。

- -

Control-Tab: Firefox の新しい（将来の）機能

- -

Jennifer Boriss が次のように書いています。「Dao Gottwald が長い期間をかけて Ctrl-Tab という Firefox 拡張の開発に取り組んでいます。Ctrl-Tab には 2 つの部分があります。ユーザが最近使ったタブにジャンプすることを可能にするフィルムスライドとタブプレビューモードです。私たちは最近表示したタブのフィルムスライドが今日チェックインされ、明日のナイトリーに Firefox の新機能としてお披露目できるであろうことを発表することをうれしく思います。」この機能は Firefox 3.1 で実装されることが現在期待されています。この新機能についての多くのさらなる情報と Firefox ユーザのワークフローにどのような影響を与えるかが Jennifer のウェブログにあります。

- -

Firefox 3.1: text 属性のサポート及びスペルチェックのサポート

- -

Marco Zehe が次のように書いています。「金曜日のナイトリービルドには Firefox 3.1 に向けたアクセシビリティの大きな新機能が一つ含まれています。それは text 属性とスペルチェックサポートです。」このことは が font-family、font-weight、アンダーラインスタイル、style、color、そして、テキストの背景色、また、テキストの言語などについての情報を取得できるようになったことを意味します。加えて、編集時に、単語がスペルミスしていいれば、その単語に「invalid:misspelling」属性が含まれるようになります。これらの新機能は数週間後には上手く調整される予定ですが、チームは、あなたが協力できるならば、フィードバックを求めています。さらなる詳細は、Marco のウェブログ投稿を参照してください。

- -

Mozilla コミュニティカレンダー

- -

Deb Richardson は 週毎/定期で行われている公式プロジェクトミーティングと他のイベントの広範囲に渡るリストをまとめました。その ための Wiki ページは Mozilla 公式 Wiki 上のコミュニティカレンダーです。最終的には誰もが購読できる共有公開カレンダーとして強化されたバージョンを公開する予定です。Wiki ページをチェックし必要な変更、追加をしてください。

- -

Firefox 3.0.1 がリリースされました

- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.1 がgetfirefox.com から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 3 を利用されている場合は、すぐに自動更新が通知されるでしょう。変更の一覧を含む、さらなる情報は Mozilla Developer News ウェブログを参照してください。

- -

Firefox 2.0.0.16 がリリースされました

- -

Firefox 3.0.1 のリリースに加えて、Firefox 2 も更新され、Firefox 2.0.0.14 が http://www.mozilla.com/firefox/all-older.html から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2 を利用されている場合は、自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

- -

2.0.0.x に対してセキュリティおよび安定性のアップデートを伴うメンテナンスが行われるのは 2008 年 12 月中旬までです。全てのユーザは Firefox 3 にアップグレードすることを勧めます。

- -

SeaMonkey 1.1.11 セキュリティリリース

- -

SeaMonkey Project News のレポートによると、SeaMonkey プロジェクトはオールインワンのインターネットスイートの新しいバージョンを 2008 年 7 月 15 日にリリースしました。「SeaMonkey 1.1.11 は いくつかのセキュリティ脆弱性を修正し、以前のバージョンで見つかった、いくつかのより小さな問題を修正します。SeaMonkey は Firefox 2 と同じ安全対策のレベルの修正にとどまります。Firefox 2 は同様に今週同じ問題のために最新版をリリースしています。」さらなる情報は、SeaMonkey Project News（日本語版）ページを参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080728/index.html b/files/ja/devnews/20080728/index.html deleted file mode 100644 index 4432e6842c..0000000000 --- a/files/ja/devnews/20080728/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: '20080728' -slug: DevNews/20080728 -tags: - - DevNews - - 'DevNews:General' - - 'DevNews:Releases' ---- -

Firefox の次のリリースの最初の開発者マイルストーン（コードネーム名 Shiretoko Alpha 1）がダウンロード可能になりました。Shiretoko は Firefox のような リッチインターネットアプリケーションのコアを成す Gecko 1.9.1 プラットフォームのプレリリース版で作成されています。このリリースは開発者及びテスタに向けてのみを意図していることに注意してください。

- -

この Shiretoko / Gecko 1.9.1 Alpha 版はいくつかの新機能を導入しています：

- - - -

Shiretoko に興味があるならばダウンロードの前にリリースノートと Mozilla Developer Center の Firefox 3.1 For Developers（日本語訳）の記事を読むべきです。以下のリンクから Shiretoko をダウンロードしてください：

- - - -

私たちはあなたのフィードバックやあなたが発見するかもしれないバグの報告（日本語訳）を歓迎します。

diff --git a/files/ja/devnews/20080729/index.html b/files/ja/devnews/20080729/index.html deleted file mode 100644 index ab1b8e317a..0000000000 --- a/files/ja/devnews/20080729/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: '20080729' -slug: DevNews/20080729 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3.1 Alpha 1 がダウンロード可能に

- -

最初の開発者マイルストーン（コードネーム名 Shiretoko Alpha 1）がダウンロード可能になりました。Shiretoko は Firefox のような リッチインターネットアプリケーションのコアを成す Gecko 1.9.1 プラットフォームのプレリリース版で作成されています。このリリースは開発者及びテスタに向けてのみを意図していることに注意してください。新機能の一覧とリリースノートへのリンクを含むさらなる情報は、DevNews のブログ投稿（日本語版）を参照してください。

- -

l10n 目標のレビュー

- -

Seth Bindernagel が次のように書いています。「先週、l10n-drivers チームの一部がパリで会い、Firefox 3 のリリースへの道筋を示す前に昨年 11 月に設定した目標のレビューを含む、l10n に関する多くのことを話し合いました。目標は野心的であり、チームが前向きな効果を作りだすことができる多くの方法が列挙されていました。私たちの仕事の週の一部分はこれらの目標をレビューし、何が上手く出来て、何が上手く出来なかったのかを発見することであり、より良く出来るように次の 4 半期の目標を作成することです。」Seth のウェブログの投稿では各目標の詳細についての記述が続き、上手く進んだことと将来改善できることについて議論しています。

- -

AMO エディタになるには

- -

Mozilla Add-ons (AMO) は Mozilla の最も人気で重要なサイトの一つですが、その Add-ons エディタたちが 100 万のアドオンユーザに素晴らしいおもてなしを提供し続けるには危機的な状態にあります。AMO チームの Justin Scott が エディタの活動及びその活動への参加の仕方の概要を Justin のウェブログに投稿しています。

- -

Canvas のテキストが双方向に

- -

Eric Butler が次のように書いています。「WHATWG Canvas text API に関する最後の主要な目立ったバグのパッチがチェックインされ、Firefox 3.1 Alpha 1 までにほぼ仕様に沿った実装が完成することになりました。Canvas がテキスト描画関数で テキストと双方向のテキストの分解をサポートするようになって私は喜んでいます。」Canvas は変化中であり、他にも変更がなされるでしょう。さらなる情報が Eric の ウェブログにあります。

- -

Mozilla が SA 翻訳チームを支援

- -

Tectonic が次のように報告しています。「南アフリカの賞を勝ち取ったマルチリンガルソフトウェアデベロッパーである、Translate.org.za が 自身の翻訳ツールを拡張するために Mozilla Corporation から助成金を得ることになりました。Mozilla は Translate.org.za に Web ベース翻訳ツールである Pootle と Translate Toolkit のさらなる開発に対して助成金を出しました。助成金はリリースされたオフライン翻訳ツールも対象としています。」さらなる詳細は、Tectonic の記事全文と Seth Bindernagel のオリジナルブログ投稿を読んでください。

- -

Firefox 3.1: スマートロケーションバーの改善

- -

スマートロケーションバー（いわゆる「」）の主要な開発者である Edward Lee は Firefox 3.1 で実装される予定の次世代スマートロケーションバーの変更のいくつかについての概要をブログ投稿に書いています。「履歴（かつ訪れていないブックマークではない）のみ表示する、もしくは、タイトルを含めずに URL のみにマッチさせるように結果を絞りこむようなスマートロケーションバーでの新しい検索方法があります。加えて、スマートキーワードクエリもドロップダウンで見ることができるようになります」。さらなる詳細は、Edward のブログ投稿全文を参照してください（日本語では、えむもじらの Firefox 3.1: スマートロケーションバーの絞込み の記事が参考になります。）

- -

Mozilla のローカライゼーションダッシュボード

- -

Seth Bindernagel が Axel Hecht が作成した Mozilla の新しい「ローカライゼーションダッシュボード」について投稿しています。「私たちのチームは l10n プロセスにおいて能率とローカライザへの働きかけ/サービスを改善することに挑戦します。このツールは私たちがローカライゼーションに関連するコミュニティのニーズに焦点を当て反応するための素晴らしい助けになるでしょう。」Seth の投稿はあなたが始めるための助けになるダッシュボードの機能のいくつかについて説明しています。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080805/index.html b/files/ja/devnews/20080805/index.html deleted file mode 100644 index fb04a0d8f3..0000000000 --- a/files/ja/devnews/20080805/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: >- - about:mozilla - Mozilla Summit、Mozilla Labs、Add-ons ワークショップ、Canvas を IE - に、Theora、Ogg、などなど… -slug: DevNews/20080805 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla Firefox Plus Summit 2008

- -

2008 Mozilla Firefox Plus Summit のために先週、400 人の Mozilla 貢献者がカナダのウィスラーに集まりました。3 日間の話し合いは非常に幅広い話題をカバーし、自発的な自由な形式でのブレイクアウトセッションがしばしば行われました（そしてしばしばとても夜遅くまで続きました）。Summit は素晴らしい成功をおさめ、非常に多くの（まだ増加中）数の写真が Flickr にあり、長い（逆時系列順で）Twitter ストリームと数多くの Sumiit についてのブログ投稿が Planet Mozilla にあります。クマがいたり、道をふさぐがけ崩れが発生したり、停電したり、7 月に雪が降ったりさえしましたが、すべてのおかげで良い時間が過ごせたと言っても良いでしょう。

- -

Mozilla Labs コンセプトシリーズ

- -

Mozilla Labs はとてもエキサイティングな「コンセプトシリーズ」構想を紹介し、参加を呼びかけています。「私たちは産業、高等教育、そして世界中の人々に対して参加とアイデアと専門的技術の共有を呼びかけています。そうすることで私たちは集合的に Web の将来の方向を探究しデザインすることができます。参加するためにソフトウェアエンジニアである必要はなく、プログラムを持っている必要もありません。みなさんの参加を歓迎します。私たちは特にオープンソースプロジェクトにほぼ参加したことがないデザイナーと一緒に取組むことに興味があります。また私たちは実装が終了していない幅広い参加に偏っています。」少しだけの初期コンセプトビデオとディスカッションフォーラムへのリンクを含む、多くのさらなる情報は Mozilla Labs ウェブログにあります。

- -

Add-ons ワークショップをパリで開催

- -

ヨーロッパの Mozilla マーケティングチームの一員である、William が次のように書いています。「私は Mozilla Add-ons ワークショップを 2008 年 9 月 20 日にパリで行うことを公式に発表できてとてもうれしいです。一日ワークショップの目標は興味を促進し特定のロケールをターゲットにした拡張開発を勧めることです。最初のワークショップは、フランス、ベルギー、ルクセンブルク、そして、スイスからの開発者を集めて、フランス語での拡張に焦点を置きますが、私たちはヨーロッパ中で多くの通常のワークショップを同様に行いたいと思っています。」一日のおおざっぱなスケジュールを含むさらなる情報は、William のブログ投稿を参照してください。

- -

取り残されるブラウザはない - Canvas を IE に

- -

Vladimir Vukićević は Firefox と同じレンダリングコアをベースにした Microsoft Internet Explorer 向けのネイティブ Canvas 実装を開発しています。Microsoft は IE7 で Canvas をサポートしていませんし、IE8 でもサポートしない予定のままです。これは Canvas 技術の幅広い採用に対する大きな障害の一つとなっています。Vlad は次のように書いています。「object タグ、少しの CSS、そして 1 行の script で HTML での canvas 要素は IE で正しく動作しています。私はこの試みが成功したことに興奮しています。なぜなら、IE での Canvas サポートの欠如は人々が Canvas を避けて代わりに Flash 及び他の技術の方に向いてしまう理由の一つだからです。」バイナリビルドは現在存在していませんが、hg レポジトリで開発を追いかけることができます。さらなる情報は Vlad の投稿を、Canvas の使い方を学ぶためには MDC の Canvas チュートリアル（日本語版）を参照してください。

- -

Firefox 向けの Theora video バックエンドがチェックイン

- -

Mozilla Summit で Firefox が HTML 5 media 要素のためにネイティブで Theora 及び Vorbis をサポートすることが発表されました。Chris Double は次のように書いています。「バックエンドがメインの Mozilla ソースコードにコミットされ、デフォルトで有効になりました。ナイトリービルドをダウンロードすることでテストすることができます。video を用いている現存のサイトの例は Wikimedia video アーカイブです。この最初のコミットは作業進行中であり、選別されるべき未実装の部分、バグ、などがあります。しかし、すべてのプラットフォームで共通のコーデックを用いることが開始され、3.1 リリースに向けて実装される予定です。」

- -

なぜ Ogg が重要なのか

- -

Robert O’Callahan は Ogg Vorbis と Theora が Firefox で重要である理由の概要についてブログ投稿に書いています。「私たちの目標は厄介事がなく、ロイヤリティフリーで、オープンソースにフレンドリーなオーディオとビデオの再生機構を Web 上に用意することです。Vorbis と Theora は 1 億人以上の Firefox ユーザに届くでしょう。全員ではありませんが、しかし良いスタートです！残りの人々に届けるために、私たちが人々を Firefox ユーザにさせ続け、Apple、Microsoft、その他のベンダーに Vorbis と Theora と サポートするようにプレッシャーをかけます。ベンダーへのプレッシャーはコンテンツを（Firefox で優れた再生機構が提供されている）フリーフォーマットで利用可能にさせることに熱心なコンテンツプロバイダから来なければなりません。Wikimedia はステップアップしうまくいけば他も追随するでしょう。」さらなる技術的な詳細とミニ FAQ は Roc のウェブログにあります。

- -

テストケースの減らし方のドキュメントが MDC に

- -

Jesse Ruderman が次のように書いています。「私は古い Gecko BugAThon ページを置き換えるために Reducing testcases というページを作成しました。」これはバグレポートのためにテストケースを減らす作業のときに利用できるよりモダンなドキュメントです。ページは Mozilla Developer Center Wiki にあり、Jesse はみなさんにそれを改善させる協力を求めています。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080810/index.html b/files/ja/devnews/20080810/index.html deleted file mode 100644 index b92c934395..0000000000 --- a/files/ja/devnews/20080810/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 'about:mobile - Fennec M6、Windows Mobile などなど…' -slug: DevNews/20080810 -tags: - - DevNews - - 'DevNews:about-mobile' ---- -

Fennec M6 が利用可能に

- -

私たちは Fennec の 6 番目のマイルストーンリリースを作成しました。M6 は 2、3 個の主要な機能を含んでいます。タブ風インターフェースの初めてのサポート、「mailto:」と 「tel:」URL のサポート、そして、M5 に対するいくつか安定性の修正です。mailto: URL をクリックすれば、N810 のメーラーが開き、tel: URL をクリックすれば、タブレット上の SIP クライアントを用いて電話をかけようとするでしょう。さらなる情報はリリースノートにあります。Mark Finkle もこのリリースについて投稿しており、新しいタブ風インターフェースのスクリーンショットもあります。

- -

Windows Mobile での状況

- -

Brad Lassey が Windows Mobile に対するサポートの追加についての進捗レポートを投稿しました。Windows Mobile はとても人気があり、私たちが Fennec のサポート対象にしているプラットフォームの一つです。彼は 現在の Windows コードに対して Windows Mobile 特有の API に移植する際の変更点についての詳細の多くをカバーしています。深い詳細に興味があるなら、彼の投稿をチェックすべきです。

- -

新しいモバイルネットワーク分析

- -

Pat McManus は 彼の http 最適化を 7 月からの新しいデータで更新しました【訳注: PDF】 。先月の間彼は私たちの現在の http スタックを調整するために多くの時間を費やし、いくつかの モバイルネットワーク上のパフォーマンスが 58% 程度に改善するまでに調整しました。また、彼はパイプライン化とリクエスト順に関するいくつかの部分を特定し、恐らくそのことにより多大な改善が見込めるでしょう。彼の更新は多くのデータ上の背景を含み、読む価値のあるものです。彼の現在の最適化はすでに Fennec のソースコードにチェックインされ Fennec M7 ビルドに含まれています。さらなる情報はバグ報告を参照してください。

- -

Fennec でのジオロケーション

- -

最近行われた Mozilla 2008 Summit で、Doug Turner が Firefox 3.1 の開発版の一部分としてチェックインされ始め、私たちのモバイルビルドにも同様に導入される予定のいくつかの新しいジオロケーションの将来性をデモンストレーションしました。主要な機能は Web 開発者が JavaScript から位置情報の検索のために用いることができる navigator.geolocation オブジェクトです。この情報はユーザが特定の Web サイトで共有することを許可した場合にのみ利用可能になります。Doug が彼のブログでスクリーンショット、サンプルページ、そして、他の技術情報を含めた完全な概要を公開しています。

diff --git a/files/ja/devnews/20080812/index.html b/files/ja/devnews/20080812/index.html deleted file mode 100644 index 3ed954e5ba..0000000000 --- a/files/ja/devnews/20080812/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: >- - About:mozilla - Toronto MozCamp、Firefox 3 アーカイブ、Snowl、Fennec、Camino、組み込み - API、などなど… -slug: DevNews/20080812 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

9 月に Toronto MozCamp を開催

- -

Mark Finkle は次のように投稿しています。「私たちは 9 月下旬に Toronto で開発者イベントを計画しています。以前の Developer Days よりはやや形式的なものになる予定です。予定では、Mozilla の技術を扱っているセッションで埋め尽くした日程を作ることになっています。これは一度も Mozilla の技術を利用したことがない、あるいは、ちょうどプラットフォームの異なる部分についてより多くのことを学びたいと思っていた人向けのイベントです。セネカカレッジは親切にもこのイベントを主催することを提案してくれました。参加することに興味があるなら、サインアップすることで出席する意思を伝えてください。セッションへの提案も投稿してください。」扱われる予定の話題の一覧を含むさらなる詳細は、Mark のウェブログにあります。

- -

 Firefox 3 リリースに関連する写真とビデオのコレクション

- -

Alix は次のように書いています。「Firefox のリリースでは世界中のイベントに驚かされました。Download Day 祭り、リリースパーティなどなど！私たちはみなさんと共有するためにリリースに関連する写真、ビデオ、ストーリーを集めたいと思っています。これを行うた めに私たちは新しいグループを spreadfirefox 内に作りました。その Firefox 3 リリースアーカイブではあなたのリリースの思い出へのリンクを投稿することができます。写真を flickr に投稿し、それを共有したいなら、ff3launchというタグをつけてください。そうすれば私たちはそれを簡単に見つけることができます。」このアーカイブについての更なる情報は、Alix のウェブログ投稿を参照してください。

- -

Snowl の紹介

- -

Myk Melez は最近、彼の新しいプロジェクトである「Snowl」を Mozilla Labs ウェブログ経由で紹介しました。「会話（メッセージングとも）は一般的なオンライン活動であり、多くのデスクトップ Web アプリケーションがサポートしています。しかし、様々なプロトコロルとサービス元が増えるに従って、会話すべてを追いかけるのがますます難しくなっていま す。Web ブラウザがオンライン上の会話を追いかけ、それに参加するための手助けができないものでしょうか？Snowl はその疑問に対する素晴らしい答えです。」プロトタイプを手に入れる場所と議論への参加の仕方を含む、Snowl についての多くのさらなる情報は、Mozilla Labs のブログ投稿を参照してください。

- -

Fennec M6 が利用可能に

- -

最新号の about:mobile（日本語版） ニュースレターは初期の開発段階にある Mozilla の新しいモバイル向けの試みである Fennec の最新のマイルストーンが利用可能になったことを報告しています。「私たちは Fennec の 6 番目のマイルストーンリリースを作成しました。Fennec M6 は 2、3 の主要な機能を含んでいます。タブ風インターフェースの初めてのサポート、「mailto:」と 「tel:」 URL のサポート、そして、M5 に対するいくつか安定性の修正です。」さらなる情報はリリースノートに用意されており、Mark Finkle がこの最新リリースについて投稿しています。

- -

私たちが持っているものではない、私たちが欲しい世界を構築する

- -

Mike Schroepfer がなぜ Firefox 3.1 で「video」と「audio」タグの新しいサポートしたことが重要であるかの概要について説明した長い投稿を書きました。「すぐに 100 万人のユーザが Web ブラウザでビデオを見ることができます。しかし、独占フォーマットをサポートするためにいくつかの独占プラグインのうちのひとつを必要とします。 Firefox においてロイヤリティフリーオープンソースフォーマットとともに HTML 5 の「video」と「audio」が実装されたことによって私たちはこれらのフォーマットが一般に利用されるようになることを通してユビキタスになること を望みます。ロイヤリティフリーオープンソースフォーマットによってすべての Web ブラウザメーカーが制限を受けること無く、すべてのプラットフォーム、デバイス、環境でネイティブなビデオ及び音声の再生を行うことができるようになるで しょう。コンテンツへのユビキタスなアクセス。これが私たちが望んでいた世界です」。さらなる詳細とこれらの技術についてのいくつかのより一般的なよくあ る質問への答えは Schroepfer の投稿全文を読んでください。

- -

Camino 1.6.3 がリリースされました

- -

Camino の最新リリースが Camino ブログでアナウンスされました。「私たちは Camino 1.6.3 をリリースしました。これは様々なセキュリティと安定性の更新を含むメンテナンスリリースです。すべてのユーザは更新することを勧めます。」さらなる情報はウェブログ投稿にあります。

- -

Mozilla の組み込み API が更新

- -

Chris Blizzard が Mozilla 埋め込み API に関する更新を投稿しました。「Pelle Johnsen は多くの作業に取り組み、新しい埋め込み API のページ群をメンテナンスしています。そこには私たちがサポートするプラットフォーム向けのビルド手順、コードのあるレポジトリへのリンク、API 文書、そして、TODO リストが含まれています。」さらなる埋め込み API ニュースについての情報は、Chris のブログ投稿を参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080819/index.html b/files/ja/devnews/20080819/index.html deleted file mode 100644 index e729869fc6..0000000000 --- a/files/ja/devnews/20080819/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: >- - about:mozilla - パリでのワークショップ、Mobile Firefox デザイン、Aurora、border-image、ECMAScript - Harmony、などなど… -slug: DevNews/20080819 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

9 月 20 日にパリで Mozilla アドオンワークショップを開催

- -
-

Paul Rouget が次のように投稿しています。「パリでの Mozilla Add-ons Workshop (MAOW) の申込みが開始されました！このイベントは 9 月 20 日土曜日に行われます。私たちの目的は Moフランス語を話せる XUL 開発者、ハッカー、Web 開発者を集め、Mozilla の技術について議論することです。」MOAW についての更なる情報は Mozilla Wiki の MAOW ページに（フランス語で）あります。また、出席するつもりなら、XULfr.org ワークショップページで登録してください。ワークショップについてのさらなる情報が英語とフランス語両方で用意されています。

- -

Mobile Firefox デザインプロセスの一端

- -

Aza Raskin が次のように書いています。「Mozilla でデザインすることは面白い工程です。私たちはオープンにデザインし、重要な立場にコミュニティを巻き込むように全力で努力していますが、それでもなお、 私たちは委員会によるデザインを避けなければなりません。最近の話題である Firefox Mobile のためのユーザエクスペリエンスの反復のために、Madhava Enros と私は私たちの議論セッションを録画しています。これは実験ですから、私には 2 つほど疑問があります。1) これは行って役立つことなのでしょうか。つまり、あなたは私たちのフィルタリングされていない直接の会議を見ることに価値を見出せますか？ 2) どのようにすれば私たちはこれをあなたにとってより価値あるものにすることができるでしょうか？」Aza と Madhava は次の 2 つのビデオを投稿しています。Fennec における設定、アドオン、ダウンロード、そして、Fennec でのページ内検索。彼らはフィードバックを求めています。ですから、付け加えたい何かがあれば、ブログ投稿にコメントしてください。

- -

Mozilla Labs と Adaptive Path の「Aurora」ブラウザコンセプトシリーズ

- -

Mozilla Labs と Adaptive Path は技術、ブラウザ、Web の将来の一つのビジョンを描いたコンセプトビデオを作成しました。「Aurora」と呼ばれるコンセプトビデオは 4 つ（それぞれ異なったブラウザの利用シナリオを扱っています）公開され、それらは Adaptive Path Aurora ページに置かれています。また、サイトに公開されているものには Aurora のデザインテーマと工程、及び、オープンソースデザインや全体として Aurora の背景にあるビジョンに関する考えについての記事も含まれています。Aurora はデザイナーと開発者がブラウザと Web の将来のビジョンを共有することを支援するために継続して行われる、Mozilla Lab のブラウザコンセプトシリーズのスタートの一部として開発され、公開されました。

- -

Firefox での border-image

- -

John Resig が Firefox 3.1 の一部である新しい CSS 3 の border-image 実装のいくつかのデモをまとめました。「これは画像の正確な切りだし（と要素周りでの配置）をとても簡単にする新しい CSS 3 モジュールです。最も明白な利用ケースは構造的な美しい可変ボタンです。」John のデモを動作させるには、Firefox のナイトリーリリースを必要とします。彼の記事にはコードサンプルとデモの広範囲にわたる説明が含まれています。

- -

ECMAScript Harmony: JavaScript の活動における革新

- -

最 近の ECMAScript（JavaScript の開発ガイドとなる仕様）に関連するイベントは普通ではない量の興奮と報道を引き起こしました。問題の要点は次のようなものです。ECMAScript 4 の仕様がとても長い間開発されてきました。これらの参加者（主に、Adobe、Mozilla、Opera、Google）は彼らが実装されるべきと考え た一連の機能に同意し、その枠組み周辺の仕様を作成しました。

- -

他の人々（主に Microsoft と Yahoo）は ES4 仕様のいくつかがそのように実装されることに同意しませんでした。ECMAScript 3.1 活動の枠組みの中で、彼らは ECMAScript 3 の変更を選択することを主張し、ES4 の構文の変更点のいくつかに反対しました。ほぼ必然的に、この分裂は ECMAScript 3.1 グループが ECMAScript 4 の開発に影響を与えるであろう変更を加えたいという状況を引き起こし、結果として、この 1 年間で仕様の策定が引き延ばされるほどのグループ間の衝突を招きました。

- -

今月初めの 2008 7 月 オソロミーティングで、これら 2 つのグループ間の議論がついに友好的な結論に到達しました。しかし、結果として、単純で実用的な言語追加に焦点を当て直すことで協力していくことになりま した。この共同の努力は現在の ECMAScript 3.1 の仕様を改善する作業となり、同時に、より大きな言語追加を含む「ECMAScript Harmony」と呼ばれる新しい後継となる仕様の作業をすることとなります。

- -

これらの開発は他のブロガーとポッドキャストに よって広くカバーされています。次で全文を読むことができます。ECMAScript Harmony に関する John Resig のブログ投稿、Arun Ranganathan の Thoughts on Harmony and Evolution、 ECMAScript Harmony に関する Open Web Podcast。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

-
diff --git a/files/ja/devnews/20080826/index.html b/files/ja/devnews/20080826/index.html deleted file mode 100644 index 144b4bdbdf..0000000000 --- a/files/ja/devnews/20080826/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: >- - about:mozilla - メジャーアップデート、Labs meetup、MozCamps、Web tech ブログ、 - MDC、JavaScript、Firebug、Extend Firefox、などなど… -slug: DevNews/20080826 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -
-

Firefox 2 がメジャーアップデート通知を受け取るように

- -

昨 日の夜から、最新バージョンの Firefox 2 のユーザは自動的に Firefox 3 への更新通知を受けるようになりました。 Firefox 2.0.0.17 を実行しているなら、数日中にその通知を見ることになりますが、待ち切れないならば、「ヘルプ」メニューの「更新を確認」を利用することができます。さら なる情報を得たいなら、Firefox チームがこのアップデートについての広範な詳細を Mozilla Developer News ウェブログに投稿しています。

- -

月例 Labs Meetup が 8 月 28 日木曜日にサンフランシスコで開催

- -

Rhian Baker が次のように書いています。「月例ミートアップの時期がやってきました。今月のミートアップは 8 月 28 日 午後 6 時に Twitter オフィス（539 Bryant St. Suite 402, San Francisco）で開催されます。様々な活動中の Labs のプロジェクトの進行状況の発表があり、議論とハッキングの機会も十分に提供されます。そして、もちろんピザもです。もしあなたがベイアリーナにいるなら ば、私たちはあなたの参加を待っています！」出席する予定ならば、Mozilla Labs ウェブログにコメントすることで参加表明をしてください。

- -

Toronto MozCamp: 9 月 15、16 日に行われるワークショップ

- -

Mark Finkle が 9 月 15、16 日にセネカカレッジで行われる予定の来る Toronto MozCamp についてのさらなる情報を投稿しています。「私たちは 2 日目を‘Hands-on Workshop’day として利用することを決定しました。このワークショップは開発とテストのトラックに分かれています。開発トラックはチュートリアルとプロジェクトで作業し ている関係者に協力している何人かの Mozilla 開発者によって実施される予定で、XUL アプリケーション、拡張、そして、XPCOM コンポーネントがハックする対象です。テストトラックは Mozilla のテスト工程に関連する話題をカバーしており、ユニットテストの書き方、私たちの Firefox での自動テストの仕方が含まれています。Clint Talbert がこのワークショップについてのさらなる情報を提供しています。

- -

Mozilla Camp Europe が 10 月 25、26 日に開催

- -

Mozilla Europe が 長き 2 日間にわたる Mozilla カンファレンスである Mozilla Camp Europe を発表しました。このカンファレンスは 2008 年 10 月 25、26 日の週末にバルセルナで開催されます。「イベントの目的は Mozilla 好きな人々を 3 つの領域（開発、ローカライゼーション、QA）から集めることです。イベントはバルセロナの Citilab で行われ、私たちはヨーロッパから 150 人のコミュニティメンバーを招待するのに十分な場所を確保したいと思っています。」さらなる情報は、仮のスケジュール、トラック、その他の詳細を含む、 Mozilla Camp Europe の Wiki ページを参照してください。Mozilla Europe チームが用意出来しだいさらなる情報を William のウェブログと Wiki ページに投稿する予定です。

- -

Mark Surman: 新しい Mozilla Foundation Executive Director

- -

適 任者を長く広範囲にわたって探し続けた結果、Mitchell Baker は Mark Surman が 新しい Executive Director として Mozilla Foundation に参加することになったことを発表しました。Mark もこの転職について次のように書いてます。「私はこのことについて本当にわくわくしています。Mozilla は新しい種類の財団であり、強い根を持つ、参加、透明性、そして、革新を伴った財団です。それは援助金を出したり、大胆な声明を作る（これらは有用で行う べきことだけれども）ということについてだけではなく、多くの数の人々を物事を作ることに巻き込むことについてもです。特に、インターネットをよりオープ ンにすることがそうでしょう。財団をどのように機能させるかを再考案するために力を尽くしている者のために、これより興奮する仕事はありません。」 Mark は 2008 年 9 月 22 日に公式に彼の仕事を始める予定です。

- -

新しい Mozilla Web Tech ウェブログ

- -

Mozilla の開発を追い続けるのは、決して簡単ではなく、特に新しい、もしくは、改善された Web 技術開発とサポートに関する詳細はそうです。この問題を解決する助けとするために Mozilla 開発コミュニティは新しい「Web Tech」ウェブログを作りました。そこに、Mozilla 開発者が Web 開発者に興味深い話題について投稿し議論します。例えば、最近の投稿には word-wrap: 単語の改行サポート、CSS 2.1 生成内容、querySelector[All] が含まれています。質問と議論を歓迎します。ですから、このウェブログをチェックし、最近の Mozilla Web 技術のすべてについて最新の情報を得てください。

- -

新しくかつ改善された Mozilla Developer Center

- -

先 週、Mozilla Developer Center が MediaWiki を利用したものから、昨年の後半から進行中の巨大なタスクであった、MindTouch Deki によって動作するものに切り替わりました。新しいサイトにはユーザフレンドリな WYSIWYG エディタ、カスタマイズのためのスクリプティングシステムを用いた動作のしやすさ、メンテナンスすることが非常により簡単になったソフトウェア、そして、 1 つの Wiki でローカライゼーションを可能にする多言語を扱うための解決策があります。チームは機能を追加するために MindTouch で直接作業しているので、MDC の要求に対してより良く調整されています。さらなる開発状況について興味があるなら、Eric Shepherd のブログと dev-mdc ニュースグループをウォッチすべきです。

- -

Firefox 3.1 で予定されている JavaScript パフォーマンスの改善

- -

Mike Shaver が次のように書いています。「この 1 年で、JavaScript パフォーマンスは著しい革命を経験しました。事実上各ブラウザはエンジンを改善し、実行スピードを劇的に速くしました。例えば、Firefox 3 は、様々な JavaScript ベンチマークで Firefox 2 よりも約 3 倍速くなりました。私たちはまだ為し得ていません。私たちの現存の JavaScript インタプリタでの作業に加えて、私たちは将来の JavaScript のパフォーマンスアップも検討しています。昨日私たちは TraceMonkey を Firefox 3.1 の開発ツリーにチェックインしました。そして、私たちはこれを Firefox 3.1 の一部とするために必要とする作業に対してフルスピードで突き進んでいます。」初期テストは劇的なスピードとパフォーマンスの改善を示しています。 TraceMonkey は関係する様々な人々のブログに詳細に書かれています。

- - - -

Firebug 1.2 がリリースされました

- -

Firebug 1.2 の最終バージョンがリリースされ、Mozilla Add-ons サイトと GetFirebug.com から入手可能になりました。数多くの改善とバグの修正がなされており、それらには、Firefox 3 サポートの追加、質の向上、各パネル毎に有効にするか選択できるようになったこと、Firebug 自体のサスペンド/レジューム機能が含まれています。加えて、Firebug 1.3 の開発が既に進行中であり、パフォーマンス、質、テストに焦点を当てる予定となっています。さらなる情報は、Firebug 1.2 のリリースを伝えている John Resig のブログ投稿を参照してください。

- -

Extend Firefox 3 コンテストの受賞者

- -

Firefox 3 Web ブラウザ向けのアドオンを新しく公開した、もしくは、アドオンを更新した者を対象としたコンテストである Extend Firefox 3 が終了し、受賞者が発表されました。多くは実験的開発の初期段階にありますが、すべてが強力な新しいツールであり、審査員が表彰するにふさわしいと感じた プロトタイプです。受賞者の一覧とコンテストのさらなる詳細については、Mozilla Labs のウェブログを参照してください。

- -

Firefox Mobile デザインセッション: ブックマーク

- -

Aza Raskin が次のように書いています。「Firefox Mobile デザインディスカッションの 3 回目は、ブックマークがテーマです。ブックマークは Mosaic の時代からブラウザの基本的な機能です。Mobile にはそのような形で存在するのでしょうか？より良い方向性はあるでしょうか？どのように表示されるべきでしょうか？タブとブックマークの違いは何でしょう か？それはデバイスのメモリにあるものという問題だけでしょうか？」これらは Firefox Mobile デザインセッションの 3 回目のビデオでやり取りされた疑問のいくつかです。チームはあなたの考えとフィードバックを求めています。さらなる情報は Aza のウェブログにあります。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

-
- -

          

diff --git a/files/ja/devnews/20080902/index.html b/files/ja/devnews/20080902/index.html deleted file mode 100644 index 8dbd7d4e3a..0000000000 --- a/files/ja/devnews/20080902/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: 'about:mozilla - Ubiquity、Fennec、Shredder、Firefox ロゴ、Chrome、今後のイベント、などなど…' -slug: DevNews/20080902 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

Ubiquity の紹介

- -

Mozilla Labs は 先週 「あらゆる者が一般的な Web タスクをより素早くかつ簡単に行うことを可能にする新しいユーザインターフェースを見つけることを目的とした、言語で Web に接続する試み」である Ubiquity プロジェクトを紹介しました。発表と同時に、Labs は Ubiquity の背景にあるコンセプトのいくつかをデモンストーレーションする初期の実験プロトタイプをリリースしました。プロトタイプをインストールし、チュートリアルを読み、Ubiquity の深層についてさらに学ぶことができます。さらなる情報は Mozilla Labs の発表と Aza Raskin のウェブログにあります。

- -

John Lilly: Chrome に関する見解など

- -

Mozilla の CEO の John Lilly が次のように書いています。「最近ブラウザの世界では興味深い開発が行われています。IE8 の新しいベータ版と Google による（Chrome と呼ばれる）新しいブラウザのベータ版のリリースの間に、言うまでもない興味深い成果が Mozilla チームによってもなされ、私が覚えているなかで今までにないまでに多くのことが起こっています。ここからが始まりです。より優秀な人々が一般の人にとって 良い Web を作る方法について考えることは本当に良いことです。競争はしばしばなんらかの革新をもたらします。今年の劇的な JavaScript パフォーマンスの向上、セキュリティ対応の前進、そして、ユーザインターフェースの躍進を見れば、ブラウザにおいてはこれが真実だと言い切れることがわか ると思います。私は Google が参加するようになったことで革新が今後も続くことを期待しています。」

- -

Lilly は Google の「Chrome」プロジェクトのリリースが Mozilla にどのように影響に与え、Mozilla と Google の関係にとってこれが何を意味するか、そして、Mozilla がどのようにブラウザの世界でユニークであり続けるかについて説明を続けています。「Mozilla のミッションは Web をオープンかつ参加可能なものに保つことです。ですから、この市場での独自性としては、私たちは公益の非営利法人（Mozilla Corporation は Mozilla Foundation の完全子会社です）であることで、他の目的や営利動機は全く持っていません。私たちはこの道を今後も歩み続け、私たちの製品と技術をオープンで、コミュニ ティベースで、協同的な方法を用いて開発し続けます。」Lilly のブログで全文を読んでください。

- -

Mobile Firefox 「Fennec」 Milestone 7 がリリースされました

- -

Mozilla Mobile チームが最新のリリースを発表しました。「Fennec (Mobile Firefox) は マイルストーン 7（M7）になりました。これは Nokia N8×0 にインストールしてテストすることができます。私たちはいくつかの良いフィードバック（とバグ報告）を M6 でもらい、おかげで M7 にはわずかなバグ修正以上のものが盛り込まれています。他に追加されたものとしてはより良いアドオンのサポート、初期実装の加速度スクロール、モードレス パスワードマネージャ、そして、いくつかのズームの調整があります。Fennec M7 を試し、バグを報告してください。」Mobile チームはインストール方法と M7 Readme を投稿しています。また、Mark Finkle のウェブログでリリース発表の全文を読むことができます。

- -

Thunderbird 「Shredder」 Alpha 2 がリリースされました

- -

8 月 12 日に Mozilla Messaging が Thunderbird 「Shredder」 Alpha 2 のリリースを発表しました。「Shredder Alpha 2 は Thunderbird の次のメジャーバージョンのための開発者向けプレビューリリースであり、Mozilla のレイアウトエンジンの次の世代である、Gecko 1.9 を用いてビルドされています。Shredder Alpha 2 はテスト目的でのみ利用可能であり、開発者とテストコミュニティ向けです。このリリースは最終製品を表現していません。いくつかの機能が非常に実験的であ り、最終製品前に変更されるでしょう。Shredder Alpha 2 を製品環境で使わないでください。」さらなるリリースの詳細、機能と強化された機能の一覧、FAQ、ダウンロードリンクを含むさらなる情報は Shredder Alpha 2 リリースノートを参照してください。

- -

Mozilla と 認証局

- -

Frank Hecker が次のように書いています。「Johnathan Nightingale が、なぜ Firefox は自己署名 SSL 証明書を妥当なものとして自動的に受け入れられないのか、という非常によく聞かれる質問について最近言及しました。私が Johnathan の自己署名証明書に関する問題についての説明に多く付け加えるべきことはありませんが、Mozilla Foundation を代表して話すとすれば、私は SSL 証明書、認証局（CA)、そして Mozilla に関連する人々を見てきた中でのコメントのいくつかについて言及したいと思います。」Frank のブログ投稿は Mozilla と CA に関連する誤解のいくつかについて説明し、この話題周辺に存在するより一般的に繰り返される神話についての正体を暴いています。

- -

Firefox ロゴスタイルの定義

- -

John Slater と Tara Shahain は Firefox ロゴ向けの新しく改善されたスタイルガイドの開発に取り組んでいます。目的は現存のガイドラインを洗練し、幅広い意見を得ることです。このプロジェクトの 一部として、John と Tara は最近の Firefox Plus Summit で話し、Royal Orderとともにガイドを制作する作業を始めました。彼らはまた可能な限りプロセスをオープンに保ちたいと強く望んでいるので、John は次の数週間に議論のための様々な話題をブログに書く予定です。さらに、彼らはプロジェクトのための非公式の諮問委員会を設け、Mozilla 貢献者コミュニティの何人かのベテランメンバーの専門的意見と経験を参考にすることにしました。諮問委員会のメンバーの一覧を含めた、さらなる情報は、 John のブログ投稿を参考にしてください。

- -

今後のイベント

- -

バルセロナ、10月 25-26 日、MozCamp: 2008 年 10 月 25-26 日の週末にバルセロナで行われる大規模な、2 日間の Mozilla カンファレンスです。さらなる情報は Mozilla Camp Europe Wiki ページを参照してください。

- -

パリ、 9 月 20 日、アドオンワークショップ: フランス語を話す XUL 開発者、ハッカー、そして、Web 開発者が Mozilla の技術を議論するために集結する 1 日間のイベントです。さらなる情報は Mozilla Wiki の MAOW ページを参照してください。

- -

トロント、9 月 15-16 日、MozCamp: トーク、チュートリアル、そして、ワークショップで埋め尽くされた 2 日間の開発者イベントです。さらなる情報は トロントの MozCamp Wiki ページを参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080909/index.html b/files/ja/devnews/20080909/index.html deleted file mode 100644 index 2a13042adb..0000000000 --- a/files/ja/devnews/20080909/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: >- - about:mozilla - Firefox 3.1、TraceMonkey、Mobile Firefox、言語ベースインターフェース、 Drag and - Drop、などなど… -slug: DevNews/20080909 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3.1 Alpha 2 が利用可能に

- -

Firefox 3.1 の 2 番目のアルファバージョンがダウンロード可能になりました。Firefox 3.1 Alpha2 は Gecko 1.9.1 プラットフォームのプレリリースバージョンでビルドされており、このリリースは開発者とテスタ向けであることにくれぐれも注意してください。

- -

Firefox 3.1 Alpha 2 はブラウザに次のようないくつかの新しい新機能を導入しています。HTML 5 の 「video」要素のサポート、Web ワーカースレッドの初期段階のサポート、ブラウザウィンドウ間のタブのドラッグ ＆ ドロップ、XUL において Aero スタイル「Glass」の領域を生成する新しいセレクタ、新しい CSS 2.1 と CSS 3.1 のプロパティのサポート、そして、カラーマネジメントプロファイルサポートのパフォーマンスの改善と新しい設定値。

- -

この Firefox 3.1 のアルファリリースは新しい TraceMonkey JavaScript エンジンを含んでいないことに注意してください。TraceMonkey は ナイトリービルドにおいて利用可能であり、現在は標準では無効化されています。さらなる情報は、TraceMonkey Wiki ページを参照してください。

- -

Firefox 3.1 Alpha 2 をダウンロードしテストするつもりならば、最初にリリースノートと Firefox　3.1　for　developers（日本語版）の記事を読んでください。さらなる情報とダウンロードのためのリンクは DevNews のリリース発表記事にあります。

- -

Drag and Drop が実装

- -

Neil Deakin が Mozilla の ナイトリービルドにおける HTML5 の Drag and Drop API の実装についての開発の進捗状況を投稿しました。「これは IE と Safari が長年サポートしたきた API です。Firefox でもそれを同様にサポートするようになり、Web ページにおいてどこかに Drag and Drop できるコンテンツを作ることが可能になりました。同様の API が Firefox 拡張と XUL アプリケーションで用いられています。」ドラッグ可能にする方法についての例を含む、さらなる情報は、Neil の ウェブログ投稿を参照してくだださい。Drag and drop のドキュメントは Mozilla Developer Center にあります。

- -

Mozilla、Firefox と Google Chrome

- -

多 くのブラウザ界ウォッチャーが知っているように、Google は「Google Chrome」と呼ばれる新しいブラウザのベータバージョンをリリースしました。そのときに John Lilly がそのことについて投稿し、その後、Mitchell Baker がこのことについて書き、どのように、そして、なぜ Mozilla と Firefox が競争と革新が再び普通になった発展を続ける健全なブラウザ市場でユニークかつ活発であり続けるのかを説明しています。

- -

Mitchell は次のように書いています。「Mozilla は個々の人間の利益、社会の利益、市民の利益が最も重要であるインターネットの一部分を構築する存在です。私たちは公共の利益にのみ専念する独立したブラウザが健全なインターネットを構築するのに必要なものであるとずっと昔に気づいていました。Firefox はインターネットを構築することにおいての私たちの最初のステップです。明らかに私たちは素晴らしい製品を作成し、競争市場で主導権を握り続けることを必要としています。Mozilla は Firefox での成功を通してこの競争環境を作り上げ、私は John と同様に Mozilla の将来に自信を持っています。

- -

「私たちはブラウザ界で競争し続け、上手くことをなし続けるでしょう。私たちは人々が自分たちのものと選び、信頼し、理解する製品を生み出し続けます。私たちは自らの総合的なミッション - 個人、市民、そして、社会の価値が最も重要であること の一部分としてこのことをなし続けます。」Mitchell のウェブログで彼女の投稿全文を読んでください。

- -

Andreas Gal の TraceMonkey JavaScript エンジンについての投稿

- -

過 去 2 ヶ月間、 Andreas Gal は Mozilla チームとともに Firefox における JavaScript エンジンのための just-in-time (JIT) コンパイラの作成に取り組んできました。8 月 25 日にそのプロジェクト（コードネーム「TraceMonkey」）がメインの Firefox 開発コードベースに追加されました。

- -

Andreas は次のように書いています。「TraceMonkey はトレースベース（.zip PDF) の JIT コンパイラで、JavaScript パフォーマンスの限界に挑戦します。平均では、Apple のポピュラーな SunSpider ベンチマークで Firefox の最新リリースの 4.6 倍にスピードアップしています。コア JavaScript 言語機能に焦点を当てている SunSpider ubench スィートでは、22 倍のスピードアップを達成しました。どの分析を用いても、Firefox は世界で最も速い JavaScript エンジンを持つようになったのです。」Andreas の投稿はトレースでの動的コンパイル、トレースツリーとネストされたトレースツリー、そして、型特化を含む、TraceMonkey のコンセプトと背景について詳細に説明を続けています。Andreas のウェブログで記事全文を読むことができます 。

- -

TraceMonkey VS V8: JavaScript パフォーマンス

- -

JavaScript は、多くの Web アプリケーション（Web メール、オンラインワードプロセッサ、その他）が中心となる機能で複雑な JavaScript プログラムに大きく頼っているために、Web ブラウザパフォーマンスのますます重要な部分になっています。この 1 年間に、いくつかの異なるプロジェクトに取り組んでいる JavaScript 開発者によってなされた強靱な進歩で、JavaScript パフォーマンスは多少再生しました。2 つの最も最近の開発は Mozilla と Google によるもの - Firefox 3.1 の開発の一部である Mozilla の新しい TraceMonkey エンジン、Google Chrome ベータの一部である Google の新しい V8 エンジンです。

- -

Brendan Eich はいくつかのパフォーマンステストを実行し、Windows XP と Windows Vista (Google Chrome は Mac、Linux では利用できません) で SunSpider テストスィートを用いてお互いにエンジンを戦わせた直接対決の結果を投稿しました。Brendan は次のように書いています。「TraceMonkey はそれぞれ 1.28 倍および 1.19 倍勝っています。」しかし、SunSpider は「ひとつのポピュラーですが議論の余地がある代表的とはいえないベンチマークスィートです。」彼は「このコンテストは互いの競争する VM が与えられた誇大なイベントポイントで排除されるプレイオフではありません」と指摘することで締めくくっており、チームがさらなる TraceMonkey のパフォーマンスを改善を達成するためのアプローチのおおまかな概要を描いています。

- -

Brendan の完全なテスト結果とコメントは彼のウェブログにあります。TraceMonkey と JavaScript パフォーマンスについてのさらなる情報は Mike Shaver、Andreas Gal、そして、John Resig らの Web の投稿によって得ることができます。

- -

Mobile Firefox にアドオン機能

- -

Fennec（Mobile Firefox のコードネーム）の最新リリースである Milestone 7 には、モバイルブラウザ向けのアドオンマネージャという革新的な追加が含まれています。Mark Finkle は Firefox との様々な類似点と相違点を説明しながら、アドオンを開発することについての話題をあつかった詳細な投稿をしています。「Fennec は XULRunner アプリケーションであり、開発者が Firefox で用いられているのと同じ構造になっている XPCOM システムにアクセスすることができる拡張を提供します。拡張を作成するプロセス（日本語版）は他の Mozilla ベースのアプリケーションと同じです。」

- -

同様に、大きな違いも存在します。「Fennec は Firefox ではありません。完全に違うアプリケーションです。また、Fennec の UI も Firefox と非常に異なっています。これはつまり、Firefox (もしくは Thunderbird や Songbird）の拡張を Fennec に放り込んでも、動作することは期待できないということです。Fennec に拡張を作成、移植する際に拡張作者が扱う必要があるだろういくつかの基本的なことがあります。」これらの違いには次のようなものが含まれています。異なったアプリケーション ID、非常に異なった XUL UI、UI コードにおける異なった JavaScript オブジェクトと関数、その他。

- -

Mark は現在の何ができるかを理解するための最も良い方法はソースコードを読むことだと提言しています。質問があれば、Mozilla IRC の #mobile チャンネルに行ってください。助けてくれる誰かがいるはずです。また、Mark は Fennec の拡張のいくつかの例を彼のブログ投稿からリンクしています。

- -

Mobile Firefox 向けテーマのデザイン

- -

Madhava Enros と Sean Martell は Fennex ウェブブラウザ（「Fennec」は Mobile Firefox のコードネームです）向けのデフォルトテーマの作成に取り組んでいます。Madhava は次のように書いています。「私たちはデスクトップの Firefox の流れを取り入れる一方で、小さなスクリーンの指で操作できるデバイス向けに適したものに挑戦しています。Sean が投稿したいくつかの最近の成果が彼のブログにあり、彼はさらに私たちが取り組んだ成果を投稿するつもりです。これはいまだ非常に進行中の成果であり、あ なたの提案を必要としていますので、ぜひ見てみてください。貢献のために Fennec UI のディスカッションスレッドが準備されています。」さらなる情報といくつかのテーマのモックアップは、Madhava のブログ投稿を参照してください。

- -

言語ベースインターフェース

- -

Jonatha DiCarlo は言語ベースインターフェース - 本当の言語でコマンドを入力することで望んだ動作が起こることを可能にするインターフェース について説明した一連のブログ投稿を書きました。「現在行きたい場所を伝えるのと同じくらい簡単にやりたいことを伝えることができるような Web とは何でしょうか？」

- -

Mozilla Labs は最近開始された Ubiquity プロジェクトを第一弾とする、そのようなことをするためにデザインされた言語インターフェースの実験を始めました。Jonathan の投稿はコンセプト、疑問、そして、実験の背景にある考えについて非常によく検討しており、彼は次の 3 つの記事を書いています。 Language-based interfaces: The problem（言語ベースインターフェース：その問題）、Language-based interfaces: Where do we stand now?（言語ベースインターフェース：今私たちはどこに立っているのか？）、そして、Language-based interfaces: Report card for Ubiquity（言語ベースインターフェース：Ubiquity のための報告カード）。これらのアプローチとアイデアに本当に興味があるなら、Jonathan のブログ投稿を読み、Ubiquity プロジェクトへ行き、これらの実験に取り組んでいる成長中のコミュニティに参加するべきです。

- -

今後のイベント

- -

トロント、9 月 15-16 日、MozCamp: トーク、チュートリアル、そして、ワークショップで埋め尽くされた 2 日間の開発者イベントです。さらなる情報は トロントの MozCamp Wiki ページを参照してください。

- -

パ リ、9 月 20 日、アドオンワークショップ: フランス語を話す XUL 開発者、ハッカー、そして、Web 開発者が Mozilla の技術を議論するために集結する 1 日間のイベントです。さらなる情報は Mozilla Wiki の MAOW ページを参照してください。

- -

バ ルセロナ、10月 25-26 日、MozCamp: 2008 年 10 月 25-26 日の週末にバルセロナで行われる大規模な、2 日間の Mozilla カンファレンスです。さらなる情報は Mozilla Camp Europe Wiki ページを参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080916/index.html b/files/ja/devnews/20080916/index.html deleted file mode 100644 index 1fae329212..0000000000 --- a/files/ja/devnews/20080916/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 'about:mozilla - 2010 年までの目標、アドオンに関する調査、TraceMonkey、SUMO、ベンチマークの質、カオス、などなど…' -slug: DevNews/20080916 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -
 
- -

Mozilla: 私たちの 2010 年までの目標を定義

- -

Mitchell Baker が Mozilla の 2010 年までの目標を定義することに対する取り組みを主導していますが、提案されている目標の草稿版を最近投稿しました。このような対象が幅広い大望的な目標を設定することは非常に重要です。なぜなら、「幅広い、一般に共有された大望の設定をはっきりとさせることは多くの異なったグループが彼ら自身を組織化し、私たちの大望を現実のものにする非常に実践的で、具体的な課題に取り組むことの助けになります。」2010 年までの目標は「人々がそれらに応じることができ、進行中の範囲を評価する意味を提供できるほど十分なものにするべきです。恐らくさらに重要なことは、これらの目標は計画の実施を指定することよりも重要な考えを表現するべきということです。」

- -

Mitchell の最初の投稿では目標の設定プロセスの背景と目的の概要が述べられており、2 番目の投稿には Firefox Summit の間に集められたフィードバックを含む様々な議論によって出された提案段階の 2010 年までの目標の原案が含まれています。長期的な目標の設定と Mozilla プロジェクト方向性に興味があるなら、Mitchell は次のように頼んでいます。「時間を割いて、提案された目標のレビューをし、意見し、質問し、そして、新しい提案を作っていただけないでしょうか。」あなたはこの議論に参加することができます。なぜなら、これらの目標は Mozilla がするべきこと、目指すべきものの基本を形作るものだからです。みなさんの参加を歓迎します。

- -

この議論に参加するには、 Mitchell の ウェブログと、さらなる議論のトピックが投稿されている mozilla.governance newsgroup を読むべきです。これらの目標に関するリアルタイムの議論に参加することができる IRC (irc.mozilla.org) の 新しい 「#2010goals」チャンネルも あります。

- -

Firefox アドオン開発者への調査

- -

addons.mozilla.org (AMO) チームはアドオン開発環境を改善するために協力を求めています。「Firefox（もしくは他のアプリケーション）向けのアドオンを開発した、もしくは、 開発しようとしたことがあるならば、私たちにフィードバックを送ってください。そうすれば、私たちはドキュメンテーション、ツール、機能を通して環境を改善するためにできることが何かないかを知ることができます。数分時間を割いていただければ、調査は終わります。回答は無記名であり、私たちはすべての回答に目を通します。私たちは結果を数週間以内にまとめる予定です。」アドオンは Firefox のエコシステムに欠かせない部分であり、Add-ons Developer Survey に提供されるどんな協力もおおいにプロジェクト全体にとって有益です。

- -

TraceMonkey と Firefox Mobile

- -

数週間をかけて、Vladimir Vukicevic は TraceMonkey を モバイルとハンドヘルドデバイスでしばしば用いられる ARM アーキテクチャ（日本語版）で動作させることに取り組みました。「モバイルとハンドヘルドプラットフォームは急速にフル Web の消費者になっており、コアパフォーマンスの成長は非常により劇的にユーザが感じられるほどのパフォーマンスの改善を生み出しています。この成果がもたら したことは、これらのユーザがサーバサイドではなくブラウザ上の方でより多くの動作を行うモダンな Web アプリケーションの利点を得ることができるようになったことによって、モバイルと組み込みデバイス上での Web 環境がよりリッチになったことです。」Vlad の TraceMonkey の成果は Firefox のナイトリービルドでテスターが TraceMonkey を有効にするのと同じ方法で設定を有効にすることによって Fennec（Firefox Mobile のコードネーム）の次のアルファリリースのテスト向けに用意されています。多くの技術的詳細を含む、さらなる情報は、Vlad の Web ログを見てください。

- -

Firefox サポート：将来の見通し

- -

Mozilla の SUMO プロジェクトのリーダである David Tenser が Firefox サポートプロジェクトの将来の取り組みのビジョンについての概要を述べた複数のエントリからなる ウェブログ投稿を書きました。「SUMO チームが公式に作られて以来、私たちは内輪的な少人数の人々によって管理されたややバグのある Web サイトから、週毎 70 人以上の活発な貢献者たちがいる本当のコミュニティの力によるサポートチャンネルに成長しました。これは Mozilla コミュニティの力を本当に示す驚くような達成です。」それでもなお、SUMO のミッションは完了していません。David は次のように続けています。「私の見通しからすれば、まだ始まったばかりです。私は SUMO を次のレベル、例の Summit でチームとこれについて議論したときに私が冗談で 「SUMO 2.0」 と呼んだものに引き上げるために私たちがすべきことについてたくさんのことを考えています。」David は SUMO のビジョンについての概要を述べた 次の 5 つの投稿を書いています：Part 1: Listen as hard as we can（私たちが可能な限り懸命に聞くこと）、Part 2: Understanding the bigger picture（より大きな図式を理解すること）、Part 3: Increasing community participation（コミュニティの参加を増やすこと）、 Part 4: Having our finger on the pulse（実状を正確に把握すること）、 Part 5: Localization（ローカライゼーション）。

- -

もし SUMO プロジェクトに協力するボランティア活動に興味があるなら、David の ウェブログに注目し、SUMO Knowledge Base の貢献者ガイド（日本語版）のページを読んでください。ユーザサポートに協力することは Mozilla プロジェクトに参加するための素晴らしい、簡単な方法です。

- -

Firefox の洗練

- -

Firefox のビジュアルとインタラクティブ性の洗練のレベルを改善するための努力として、Alex Faaborg が今から Firefox 3.1 リリースまでの間の毎週月曜日、最優先度となっているユーザエクスペリエンスバグの手短なリストを投稿します。彼は次のように書いています。「これらのバグは Firefox 3 の UI のおおざっぱとなっている領域の修正、リリース前にチェックインするつもりであるアイコンのチェックイン、そして、各最後のピクセルを完全なものにしようとする試みを含むことになるでしょう。」チームはこれらのバグを完了させて閉じるための協力を必要としています。時間があり、協力することに興味があるなら、ぜひ参加してください。また、提言されるべき必要があると考えられる洗練するべき事項があれば、Alex はバグを立て、彼の投稿のコメント欄に言及を残していくように求めています。

- -

「Powered by Mozilla」のためのガイドラインの作成

- -

David Boswell はどのように「Powered by Mozilla」ロゴをプロジェクトおよび製品の一部分として利用できるようにするかを決めるためのガイドラインを作成することに取り組んでいます。「ガイドラインの指定を必要としているのは、私たちのレポジトリから 1 つのファイルだけチェックアウトし、それらのアプリケーションは Powered by Mozilla であると主張して欲しくないからです。問題は Mozilla コミュニティが作成している再利用可能な技術の現在のリストがあるとは思われないことです。」こういう事情で、David は時間をかけてこれらの技術と基準の草案リストをまとめましたが、そのリストが完全であるか、全く理にかなっているかどうか確信していません。彼は自分のウェブログにリストを投稿しています。フィードバックやこれらについて意見があるなら、彼は自分のブログ投稿にコメントを残すか Wiki ページを直接編集するように求めています。

- -

Firefox ロゴスタイルガイドの進捗

- -

以前に述べたように、Tara Shahain と John Slater は Royal Order と非公式諮問委員会としての役割を果たしているコミュニティのボランティアの小さなチームと協力して新しい Firefox ロゴスタイルガイドに取り組んでいます。多くの前進がなされ、Tara は初期段階のロゴの一覧表（32 ありました）と 8 つのコアセットに絞り込んでいくまでの考えのプロセスについて取り上げている新しいブログ投稿を書いています。Tara の投稿を彼女のウェブログで読み、そこで議論に参加することができます。

- -

JavaScript ベンチマークの質

- -

JavaScript エンジンのパフォーマンスが再生をし続けている一方、JavaScript ベンチマークテストはペースを保てず、見たことがない高速なパフォーマンスの増加に上手く適応していません。John Resig が問題を解析した投稿をまとめ、3 つの異なるベンチマークスィート - SunSpider、Dromaeo、V8 Benchmark - と、ブラウザがますます高速にテストを実行できるようになっているためにそれらがエラーレベルが増加する問題を防ぐためにしていることについて考察してい ます。John のウェブログで彼の全文を読むことができ、その投稿では詳細かつ興味深い JavaScript ベンチマークの世界を垣間見ることができます。

- -

カオス の中で/と共に/の周りで/によって 管理する

- -

John Lilly が最近 Stanford で Mozilla の構造と意思決定プロセスについて話しました。「これはどのように Mozilla が組織化され、どんな風に私たちが意思決定を私たちが持っているあらゆる組織の端にまで伝えるのかについてです。つまり、これは本当に組織のデザインと振る舞いについての話です。」プレゼンテーションはMozilla の背景にある考え方とカオスと秩序が混じったシステムを検討している興味深いものです。John は彼のスライドを Slideshare に投稿していて、Stanford Presentation on Mozilla で見ることができます。

- -

Ars Technica での Firefox、Gecko、WebKit の記事

- -

先週、Ars Technica の Ryan Paul はなぜ Mozilla は Webkit の人気が上昇し続けているに関わらず Gecko にコミットし続けるのかということを説明する興味深い 2 ページに渡る記事を投稿しました。 WebKit はより多くのブラウザに採用されているのを受けて、Ryan は次のように書いています。「何人かのテクノロジ狂は Mozilla の Gecko レンダリングエンジンの余命がいくばくもないのではないかと思い始めています。」しかし、全員がそう思っているわけではなく、「2 つのレンダリングエンジンの違いを理解し、Gecko の技術的強さを評価している人々は Mozilla が Firefox の将来のバージョンで Webkit を採用する可能性について推測する根拠がないことに気づいています。」記事では、Ryan は Webkit の強み、Apple が 2003 年に Gecko ではなく Webkit を選択した理由、Gecko がどのように発達し改善しているか、Gecko がサードパーティの開発者のホストに好まれる理由、などを論じています。

- -

記事を書く中で、Ryan は Mozilla の エンジニアリング担当バイスプレジデント Mike Shaver と話しています。「Shaver は Webkit の技術的達成を評価していますが、彼は Webkit の開発モデルと Webkit エコシステムの分断が Firefox にはふさわしくない困難な挑戦になるだろうと信じています。」Shaver は Ars Technica サイトの記事中でより詳細に語っています。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080923/index.html b/files/ja/devnews/20080923/index.html deleted file mode 100644 index 7b55fa78a1..0000000000 --- a/files/ja/devnews/20080923/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - about:mozilla - Labs meetup、AMO 開発者ツール、SVG と - HTML、CSS、カラープロファイル、L10N、Mozdev、などなど… -slug: DevNews/20080923 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Labs Meetup が今週木曜日にマウンテンビューで開催

- -

Mozilla Labs は月例ミートアップを 9 月 25 日、今週木曜日にマウンテンビューの Mozilla HQ (1981 Landings Drive, Bldg K) で開催する予定です。今月の議題は Web の将来に焦点を当てる予定です。「私たちはあなたの声をお聞きしたいのです！Web の将来に対する大きなアイデアは何ですか？コンセプトシリーズに 付け加えたい考えはありますか？私たちはあなたを刺激するものは何なのかを聞きたいと強く 思っています！」みなさんが立ち寄り、ミートアップに参加することを歓迎します！ベイアリーナにいるならば、立ち寄る時間を作って、この議論に参加するべ きです。出席する予定ならば、Mozilla Labs ミートアップの投稿にコメントを残して参加の表明をしてください。

- -

AMO 開発者ツールがテスト開始

- -

Justin Scott が addons.mozilla.org の新しいツールの開発について書き、これらのツールがテスト開始になったことを発表しました。「en-US の Developer Tools のインデックスで、新しいツールを試すように促す案内を見ることができるはずです。試そうとすると、新しい『Developer Dashboard』に移動します。次の更新まで古いインデックスを利用することで古いツールを利用し続けることができます。次の更新時には新しいツール がデフォルトかつ唯一のツールになります。」

- -

実際の AMO データベースに変化を加えないで新しいツールを試すことができる テストサイトも用意されています。様々な新しいツールについての詳細を知るためには、Justin のブログ投稿からリンクされている以前の投稿のすべてを読んでください。

- -

HTML の内容に SVG による効果を適用

- -

Robert O’Callahan は SVG による効果を HTML の内容に適用できる機能を Firefox に追加することに取り組んでいます。彼は最初にこの取り組みについて 6 月に投稿し、SVG の「clip-path」、「mask」そして、「filter」プロパティを HTML の内容に適用したときにそれらのプロパティの効果を その HTML の内容に作用させるという彼の試みを説明しました。先週 Robert はこの取り組みがメインの Mozilla コードベースに追加されたことを発表し、さらに彼は SVG 仕様標準化のための SVG ワーキンググループに自分の提案を提出しました。動作しているスクリーンショットと動作デモを含むこれらの新機能についてのさらなる情報は、Web Tech ウェブログの Robert の投稿を参照してください。

- -

CSS Transforms

- -

Web Tech ウェブログに Gecko（Mozilla のレイアウトエンジン）ナイトリービルドが新しい 「-moz-transform」CSS プロパティがサポートするようになったことが投稿されています。Webkit でほぼ同じようにサポートされているこのプロパティは「変形関数（一般的なアフィン線型変換）のリストをその値とし、それらの変形が順番に、そのプロパティが適 用されている HTML 要素に適用される CSS プロパティ」と説明されています。プロパティの利用方法のいくつかの例とそれが何をするものなのかということについての説明が Web Tech の投稿に用意されています。「開発者にとって CSS Transforms の使い道を見つけようとすることは興味深いことだと思います。かつてはプラグインに取られていた多くの機能を CSS と JavaScript で直接統合することができるようになりました。」さらなる情報とコードサンプルは Web Tech の記事に用意されています。

- -

カラープロファイルサポートの変更

- -

Bobby Holley が Mozilla のカラーマネジメントのバックエンドをリファインし、「プライムタイム」に備えてパフォーマンスの改善と機能の洗練に取り組んでいます。最新の Firefox ナイトリービルドではタグ付けられた画像に対してカラープロファイルサポートがデフォルトで有効になったように、これらの努力は明確に期待の成果を上げています。この文脈での「タグ付けられた画像」とは Web ブラウザで表示される ICC カラープロファイルが埋め込まれた画像、言い換えれば、指定されたかつ正確な色変換を行うことを必要とする情報を含んだ画像です。Bobby の投稿ではこれらの変更の技術面のすべてについての詳細な説明が続き、カラーマネジメントが今まですべてのものに対して有効にならなかった理由についても説明しています。Percy Cabello もこれらの変更について Mozilla Links （日本語版）に投稿しています。

- -

HTTP トラフィックに割り込める nsITraceableChannel

- -

Jan Odvarko が次のように書いています。「bug 430155（『 new nsHttpChannel interface to allow examination of HTTP data before it is passed to the channel’s creator（チャンネルのクリエイタに渡される前に HTTP データを実行するための新しい nsHttpChannel インターフェース）』）が修正されたことで、Firefox の拡張で HTTP トラフィックに割り込むことができるようになりました！」Jan はこの修正は Firefox 3.0.3 (訳注：3.0.3 はパスワードマネージャに関するバグ（bug 454708）の修正だけを目的としたリリースとなったため、 この修正は 3.0.4 にずれ込む見込みです。）の一部となるだろうと見積もり、この機能は アドオンの機能とのひとつとして ページ毎に生成された HTTP リクエストのレスポンスを表示する機能を持つ Firebug にとって重要であると指摘しています。今まで、Firebug は この機能を実装するために Firefox キャッシュと XHR モニタリングを利用していましたが、次善策であったこのアプローチにはいくつかの問題がありました。Firefox アドオンで利用する方法の例を含む、この機能についてのさらなる情報は、Jan の Software is hard ウェブログでの彼の記事を読んでください。

- -

ローカライゼーションドライバーの見える度

- -

Mozilla のローカライゼーションディレクターである Seth Bindernagel はローカライゼーションドライバーチームがローカライゼーションの活発度の見える度を増加させ、プロジェクトのコミュニケーションを改善しようとしている いくつかのステップについて最近ブログに書きました。彼らが用いている 2 つの主要なツールはローカライゼーションダッシュボードと高優先度の課題を早急に分けることを保証するチームの新しい週毎のトリアージミーティングです。 くわえて、チームは新しい Firefox 3 l10n リリースのトラッカーバグを作り、新しいローカライゼーションチームがより簡単に私たちのプロセスの初期の段階に進めるようにすることに取り組んでいま す。Seth が 3.0.2 と 3.0.3 リリースでの 2 つのマイナーアップデートの間での大きな成果として Firefox では 13 のさらなる言語が追加されるだろうと発表したように、これらの努力の結果は明らかです。さらなる Mozilla のローカライゼーションへの取り組みについては、Seth のブログ投稿を参照してください。

- -

新しい Mozilla Foundation T シャツ

- -

David Boswell が次のように書いています。「新しい Mozilla シャツが Mozilla ストアで購入可能になったことをお知らせします。この新しいデザインは古い時代の Hack シャツに非常に影響されています。」Mozilla Store での購入のすべては直接 Mozilla Foundation の収益になります。Mozilla Store で T シャツをチェックし（注文して）ください！

- -

Mozdev 8 周年

- -

Mozdev チームは次のように書いています。「2000 年 9 月に mozdev.org は Mozilla アプリケーションと拡張開発者のサポートに専念するためのサイトとして始まりました。昨年までに私たちは数千の活発なプロジェクトのホストを提供し続けてきており、そこには現在数十以上の Mozilla ベースアプリケーション向けのアドオンがあります。開発プロジェクトがさらにより簡単になる新機能とさらなるアップデートも予定されています。私たちは今までの 8 年間、時間、精力、お金を分け与えていただいたみなさんに感謝します。そして私たちはこれからも Mozilla コミュニティに協力できることを楽しみにしています。」

- -

最新の about:addons ニュースレター

- -

Mozilla Add-ons チームは 月刊 about:addons ニュースレターの最新号を発行し、Mozilla アドオン開発の世界から最新で素晴らしいニュースと情報を提供しています。Mozilla Developer Center でニュースレターの全文を読むことができ、また、簡単な購読フォームを用いて、将来の号を直接メールの受信箱に受け取れるように申し込むことができます。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20080930-2/index.html b/files/ja/devnews/20080930-2/index.html deleted file mode 100644 index 8b5fb14fdb..0000000000 --- a/files/ja/devnews/20080930-2/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 'about:mobile - Fennec M8、カメラ入力タグ などなど…' -slug: DevNews/20080930-2 -tags: - - DevNews - - 'DevNews:about-mobile' ---- -

Fennec M8

- -

Mark Finkle が Fennec M8 がリリースされたことについて書いています。M8 は 最終的に Firefox Mobile になる予定である Fennec モバイルブラウザーの最新のプレアルファマイルストーンリリースです。M8 には Sean Martell と Madhava Enros が作成した新しいアイコンセット、改善されたレンダリングパフォーマンス、UI の改善、そして、多くの他の要素が含まれています。完全な概要は Mark の投稿にあります。

- -

カメラ入力タグ

- -

Ajaxan での投稿で説明されているように、Brad Lassey は Fennec でカメラから入力させて、それを Web アプリケーションで利用可能にするスクリーンショットを投稿しました。この種類の機能はまさにハードドライブからのファイルの代わりに写真をアップロー ドするファイル入力タグのように動作します。これはつまり、Web サイトが簡単に扱いにくいギャラリーとファイルアップロード手順の代わりにブラウザから直接写真のアップロードのサポートを含むことができる可能性があることを意味します。完全な詳細は Brad の投稿を読んでください。

- -

Fennec 向け TraceMonkey

- -

Vladimir Vukićević が TraceMonkey を ARM プラットフォームに移植した作業について投稿しました。TraceMonkey は Firefox 3.1 に含まれる予定の Mozilla の高速 JavaScript 実装です。ARM 上でのスピードアップは x86 ベースシステムで測定されたものと似ています。いくつかの命令は SunSpider テスト全体での約 2 倍のスピードアップとともに 30 倍高速になっています。これらのスピードアップは多くの Web サイトでユーザが体感可能な改善をもたらすでしょう。しかし Fennec の多くは JavaScript で書かれているため、全体としてのブラウザのパフォーマンスも改善されるでしょう。さらなる情報は Vlad の投稿を読んでください。

- -

Mobile 向けのアドオン

- -

拡張は デスクトップ上の Firefox の最も良い部分のひとつであり、Mozilla も Fennec に同じ拡張環境を移植することに懸命に取り組んでいます。いち早い初期段階の拡張サポートは Fennec M7 に含まれ、M8 で改善されています。Mark Finkle は拡張作者に必要とされる予定のものおよび人々が分解できる 2 個のサンプルアドオンを投稿しています。

diff --git a/files/ja/devnews/20080930/index.html b/files/ja/devnews/20080930/index.html deleted file mode 100644 index 9efc33022e..0000000000 --- a/files/ja/devnews/20080930/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 'about:mozilla - Mobile Firefox、Weave、データ、ロゴ、FAQ、などなど…' -slug: DevNews/20080930 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mobile Firefox: マイルストーン 8 リリース

- -

Mark Finkle は Fennec（Mobile Firefox のコードネーム）のマイルストーン 8（M8） をリリースしたことについて投稿しました。このリリースは Nokia N8×0 にインストールしてテストすることができます。「このマイルストーンがリリースされるまででの大きな改善のひとつは 数人の Mozilla QA チームのメンバーが加わったことです。Fennec は現在とても懸命にテストされ続けています。また、そのテストはバグを見つけることが大好きな人々によっても行われています。現在、私たちは多くの問題を 見つけ修正し続けています。恐らく、M8 における最も大きい目に見える変更は新しいテーマでしょう。それはまだ完全にチェックインされていませんが、デザインを繰り返し、いくつかの変更が行われ る見込みです。」この投稿では Fennec の予定されている変更についての話題が続いています。「Fennec はいまだに Nokia N8×0 だけをターゲットにしていますが、もうすぐこの状況は変化するはずです。Windows Mobile 上での作業はかなり盛り上がっています。」M8 のハイライトを含む、さらなる情報は、Mark の投稿全文を参照してください。

- -

Weave: これまでの話

- -

Dan Mills は Mozilla Labs の「Weave」プロジェクトの背景、現在の状態、そして、予想される将来についてのいくつかの疑問の設定についての概要を述べている、広範囲に渡る更新 状況を書きました。「私たちは Weave はいまだ長い道のりのプロジェクトでありだと考えており、次のようなことをとても疑問に思っています。：私たちのビジョンに近づくためにする必要があるこ とは何か？現時点での主要な問題は何か？そして、私たちは以前の決心に立ち返る必要はないのか？長い間この思案をし続けてきましたが、今、これらの疑問に 答え始めることができると私は思います。」Dab の投稿はプロジェクトが直面している主要な課題のいくつかについての説明に続いていき、彼は次回以降の投稿でさらに深く展開していくつもりです。彼のウェ ブログで彼の現時点での投稿の全文を読むことができます。

- -

データの利用方法: いくつかの基本的な例

- -

Mitchell Baker は以前、インターネット利用についての基本的な、かつ、集合的な、また、匿名化された情報をより広く利用可能にすることが必要だと信じていると書きまし た。「インターネットの基本的な利用方法についてのデータが閉鎖的で独占的なものだとしたら、オープンプラットフォームとしてのインターネットは損害をこ うむるでしょう。」Mitchell は「データの利用方法」を意味するものの例として、私たちが集合的な匿名化された形態として最も見ることに慣れているものを取り上げ、投稿しました。これ らにはサイトの帯域幅の利用方法、1 日、もしくは、1 ヶ月 のサイト「トラフィック」、そして、ソフトウェアダウンロード数が含まれます。「これらの例は明らかに非常に一般的なものです。この理由のために私はそれ らをまさに利用しているといえます。つまり、私たちがこの種類のデータの利便性とそれが集合的な匿名化された形態で存在することをすでに理解していること を実証していることになります。、集合的な匿名データの他の形態も、インターネットがどのように使われているかを理解し、また、最終的に、インターネットとは本質的に何かを理解するのに同様に役立ち得えます。」Mitcell の投稿の全文を読むためには、彼女のウェブログを訪れてください。

- -

新しい SUMO ロゴデザインへの協力を

- -

support.mozilla.com (a.k.a. SUMO) プロジェクトは 1 年以上経過し、世界中の数百万人の Firefox ユーザに影響を与える素晴らしいコミュニティパワーによるサポートチャンネルになりました。SUMO チームは SUMO の将来を計画し、領域と参加の両面で成長するに連れて起こるサービスの革命を概念化することに取り組んでいます。この革命の一部として、Tara Shahain と David Tenser は SUMO と その進行中のミッションを包含する力強い Visual Identity を作りたいと思っています。この一部にはプロジェクトのための新しいロゴを作成することが含まれますが、彼らは協力を必要としています。「もっと具体的にいうと、私たちはデザインコンセプトと SUMO を視覚的に表すために最も良い方法に関するアイデアのブレインストーミングでの協力を必要としています。以前においては SUMO はそのリソースを Firefox に専念していたため、主に『Firefox Support』として知られていました。しかし、David が彼のブログに書いているように、SUMO はより広い領域を目指しています。」プロジェクトについて、および、ロゴデザインプロセスに参加する方法を知るためには、Tara のウェブログ投稿を参照してください。

- -

新しい Firefox ロゴスタイルガイド

- -

John Slater と Tara Shahain は既存のガイドラインをリファインし、より幅広い人々に知ってもらうという目的の元に Firefox ロゴのための新しく改善されたスタイルガイド制作に取り組んでいます。先週の金曜日、John は新しいスタイルガイドがリリースされたことを発表しました。「私たちの望みはこのガイドがロゴをどのように利用したらよいか（またはいけないか）についての多くの共通して尋ねられる質問の答えになることです。また、様々な調整済みのロゴをダウンロードすることができるセクションも含まれているので、何が 公式のバージョンなのかということにとまどうことはないでしょう。私たちはこのスタイルガイドをベータリリースと現在呼んでいます。なぜなら私たちは全体 としてのコミュニティが私たちが公式にそれを最終版とする前にレビューし介入することを確信しているからです。ですから、質問、考え、もしくは、コメントがあれば、私か Tara に知らせるか、フィードバックを Spread Firefox のディスカッションページに投稿してください。」さらなる詳細は、John のウェブログの投稿全文を参照してください。

- -

Powered by Mozilla FAQ

- -

David Boswell はプロジェクトと製品の一部として「Powered by Mozilla」ロゴをどのように使うことができるかを定めるためのいくつかのガイドラインの作成に取り組んでいます。彼は最近、彼がロゴについてよく尋ねられる質問に答えるための Powered by Mozilla FAQ を投稿しました。「まだいくつかのさらなる情報（ロゴについてのガイドラインとロゴを使うことを求めるアプリケーション）が投稿される必要があり、それらの部分はもうすぐ行われるでしょう。今のところ、私は他の部分が完了する前に人々にさらなるフィードバックをしてもらうために FAQ を投稿しています。」FAQ と Powered by Mozilla プロジェクトについてのさらなる情報は David のウェブログ投稿に用意されています。

- -

Mozilla Community Store: もうすぐオープン！

- -

Firefox 3 リリースの一部には 公式 Firefox 3 T シャツを作成するための「オープンソースな」デザインプロセスで行われた T シャツコンテストが含まれていました。私たちは素晴らしい受賞シャツを手に入れただけでなく、他にも大変数多くの素晴らしいデザインを受け取りました。これらのコミュニティデザインをもっと多く商品として扱えるようにするための高まる需要があるのではないかと考え、数ヶ月間マーケーティングチームはこれを 可能にするための法的および物流的な挑戦を整理してきました。Tara Shahain は最近次のような良いニュースを発表しました。「私たちは『Mozilla Community Store』を作るために、つまり、コミュニティによって作成された製品のための新しく開かれたチャンネルとなるであろうオリジナルの Mozilla Store の仲間として、Zazzle.com とパートナー契約を結びました。Community Store はまだ完成していませんが、私は来月ぐらいには準備ができると思っています。あなたのデザインを考え始めていてください！オープンしたときに、私たちは全課程通してあなたをガイドするための多くの詳細を発表するつもりです。今後も注目していてください！」このプロジェクトについてのさらなる情報は Tara のウェブログにあります。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081007/index.html b/files/ja/devnews/20081007/index.html deleted file mode 100644 index f9b6078538..0000000000 --- a/files/ja/devnews/20081007/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - about:mozilla - Impact Mozilla、FSOSS、Mobile Firefox、SFX、Public - Relations、SUMO、アドオンに関する調査の結果、などなど… -slug: DevNews/20081007 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Impact Mozilla: コミュニティマーケティングチャレンジ

- -

先週 Mozilla のマーケティングチームは Impact Mozilla と呼ばれる新しいコミュニティに焦点を当てたマーケティングチェレンジを開始しました。このアイデアは Mozilla のマーケティングプロセスをコミュニティにさらに開かれたものにし、誰が一番良いアイデアを思いつくかを見ることができるようにするためのものです。このチャレンジは Firefox ユーザの継続率の増加、つまり、 Firefox をダウンロードしてインストールした後に使い続ける人々の数の増加を支援するアイデアを集めて育てることに特に焦点を当てています。

- -

「私たちは Firefox をダウンロードした人々がレギュラーユーザになることを保証する革新的な方法を求めています。興味がありますか？私たちにあなたのアイデアとあなたとあなたのチームがどのようにそれらを実行するかの概要の要約を送ることによって始めてください。あなたの最初の戦略がカットされているならば、私たちはあなたの解決策を詳しく説明する完全な計画を尋ねるでしょう。あなたの計画が最優秀として選ばれた場合、あなたは技術界でトップブランドのひとつのためのマーケティングキャンペーンを管理する機会を持つことになります。私たちはあなたの解決策を実現させるためのリソースをあなたに与え、加えて、最優秀提案のために 3000 ドルを与えます。」始め方と計画の提出方法を含む、詳細のすべては、Impact Mozilla ウェブサイトを参照してください。

- -

Free Software and Open Source Symposium (FSOSS)

- -

David Humphrey が次のように書いています。「Free Software and Open Source Symposium (FSOSS) が 10 月 23 日と 10 月 24 日に予定されており、オンライン登録が開始されました。多くの早い行動は評価されますから、早く登録してください。今年のラインアップには多くのよく知られた Mozilla に関わっている面々が含まれています。スピーカーの一覧は長く多様であり、Web で一番良いもの、オープンソースデスクトップ、オープンソースビジネス、ポリシー、法律などを代表しています。私たちもまた Teaching Open Source の 1 トラックを実施し、生徒をオープンソースプロジェクトに引き込むことの潜在性とチャレンジを議論するために教授、生徒、管理者、そして、コミュニティリーダーを集める予定です。」さらなる情報は David のブログ投稿全文をチェックし、FSOSS の Web サイトをチェックしてください。

- -

Mobile Firefox: ユーザエクスペリエンスの開発

- -

Mobile Firefox (「Fennec」のコードネーム) は最近マイルストーン 8（M8）リリースを達成しました。Mark Finkle がリリース時にリリースについてブログに投稿し、その後、Madhava Enros がモバイルブラウザへのユーザエクスペリエンスの変更と追加についてブログに投稿しています。「これはユーザエクスペリエンスの見地からエキサイティングなことです。なぜなら、機能と安定性の改善とともに、このマイルストーンは Fennec がルックアンドフィールを初めて意識したものだからです。ある意味では、私たちは遊び、評価し、改善する価値がある UI を持つようになったということです」。Madhava の投稿にはチェックすることができる多数にスクリーンショットが含まれています。Mobile Firefox の UI についての議論に参加したければ、Mobile 開発 グループに向かうべきです。

- -

Spread Firefox Affiliates プログラム

- -

David Rolnitzky は最近 Spread Firefox Affiliates プログラムの多くの改善を発表しました。Affiliates プログラムは Web サイトボタンとバナー、また、トップの Firefox リファラを獲得したユーザへの年 4 回の賞品を提供することによって、私たちのコミュニティがより簡単に Firefox についての言葉を広げることができるようにデザインされています。「改善のいくつかはユーザから見えるものもあれば、すぐには明白にではありませんが、プログラムに素晴らしい恩恵をもたらすバックエンドの改善もあります。この改善計画の最初の詳細はここにあります。」改善には、始め方、ポイントシステムの動作方法、ボタンとバナーのより良いグループ化、国際的ボタンの新しい選択肢、カスタムボタンの生成機能、そして、新しい奨励システムについてのより明白な情報が含まれています。完全な詳細は David のブログ投稿を読んでください  。そして、 Affiliates プログラムサイトへ行き、サインアップし、Firefox をさらにより良いものにする方法を学んでください。

- -

SpreadFirefox.com の次の段階

- -

夏の間に多くの改善が SpreadFirefox.com (SFX) になされ、Alix Franquet はその仕事に深く関わっていました。Alix は SFX の次の段階についてブログに書き、ホームページと全体的なサイトナビゲーションの改善を引き受けた 3 つの部分のリデザインの概要を示しています。これらの 3 つの部分には次のものが含まれています。：SFX が何であるかをより良く説明し、コミュニティスポットライトと行動の呼びかけを含む、単純化されたホームページの作成、SFX メンバーがイベント、新しいグループ、新しい投稿が含まれるサイト上で何が起こっているかをもっと良く理解できるように活動を追いかけることができる新しいページ、そして、全体的なユーザビリティの改善のためのサイトナビゲーションの更新。計画された変更の多くのさらなる詳細は Alix のブログ投稿にあり、SFX でも完全な計画を読むことができます。私たちは常に SFX に対するさらなる協力を求めています。ですから、これは Mozilla のコミュニティマーケティングプロジェクトに飛び込み参加するための素晴らしい機会です。

- -

Mozilla Public Relations 分析

- -

Mozilla の Public Relations チームは PR プロセスを解放し、より透明にし、また、より Mozilla のオープンソース DNA にフィットさせることに取り組んでいます。最も最近の取り組みは Melissa Shapiro により書かれた投稿で、その投稿において、彼女は PR 分析について説明しています。「私たちは影響の基準となる方向性がない場合に自分たちがより良くなっているかどうかをどのように知るのでしょうか。答えは純粋な科学ではありません。本当の PR 分析は単純に定量的ではなく、定性的でもあります。定量分析は記事、報道での取り上げ、国単位での分布範囲の総数のようなものを探します。定性分析にはメッセージの浸透と聴衆と調子の分析が含まれます。Mozilla の主要な PR イニシアティブの成功を評価することにおいてそれらは等しく重要だということがわかります。」

- -

記事は私たちが Moziia での PR プロセスの一部として探し出す様々な種類の定量的および定性的な分析についての説明に続き、各々の利用ケースと Firefox 2 と Firefox 3 リリースので パブリックリレーションズの活動を比較する例の概要を述べています。パブリックリレーションズの普通では明らかにされない世界についてさらに学ぶことに興味があるなら、Melissa のブログのこの記事や他の記事をチェックすべきです。

- -

SUMO のビジョン - Part 8: Live Chat

- -

David Tenser は Support.mozilla.com (SUMO) プロジェクトの範囲と役割の総合的なビジョンについて説明したブログ投稿の長きに渡るシリーズを公開しています。彼は最近、シリーズの 8 番目の投稿を公開しました。この投稿は革新的で素晴らしく役に立つ「Live Chat」機能に焦点を当てたものです。「問題がまだ Knowledge Base でカバーされていない場合、もしくは、記事での指示が難しくて理解できない場合に、Live Chat は ユーザが Firefox のエキスパートに連絡を取り、問題を解決するために実践支援を得ることができる強力な方法です。Live Chat は貢献者がサポートを提供するためのとても面白い方法でもあります。貢献者が Live Chat で協力することは単にユーザを助けるだけではなく、彼らがお互いに話し合うのと同様に、必要なときに他の協力者に支援を提供することができます。このことは普通は助けているユーザとやり取りをしているのはあなた一人だけでも、あなたは決して一人きりではないということを意味します。」

- -

David はさらに完全に統合化されたチャットクライアント、単純なスケジューリングの解決法、English 以外の言語でのサポート、自動的にチャットログを保存し、ユーザの満足度に関連付けることなどを含む、サービスのいくつかの可能性のある将来の改善について説明しています。Live Chat の将来に興味があり、チームが将来の改善についてどのように考えているかを知りたいなら、Firefox Support Blog で投稿全文を読んでください。

- -

アドオン開発者への調査: そのままの結果

- -

Addons.mozilla.org (AMO) サイトの信頼できるチームは最近アドオン開発者コミュニティの調査を行いました。 総数 265 人が調査に回答し、最初の結果が公開されました。「一般的な概要を示すと、多くの回答者は 2 年かそれ以上のアドオン開発経験がある独立した開発者でした。当然彼らは JavaScript と XUL に親しんでいます。彼らは主に Firefox のためにアドオンを作成し、それを自身でホストしています。」完全な結果は公開されていますが、それらは単純にそのままの結果です。チームはさらに興味深い発見と結論を引き出すためにいくつかの相関分析を適用する予定です。これらの最初の結果を見て議論するために、Basil のウェブログの投稿を参照してください。

- -

2 人の Mozilla 関係者が BusinessWeek の「25 Most Influential」に

- -

Mitchell Baker と Joi Ito が BusinessWeek の 25 人の Web で最も影響のある人々の一覧に含まれていることが最近発表されました。「毎年、私たちは読者と BusinessWeek の Best of the Web list スタッフにインターネットの大物の一覧向けの名前を寄稿してもらうように頼んでいます。」すべての 25 人の受賞者を含むスライドショーのすべてを BusinessWeek で見てください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081014/index.html b/files/ja/devnews/20081014/index.html deleted file mode 100644 index 71ad25d61c..0000000000 --- a/files/ja/devnews/20081014/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: >- - about:mozilla - Labs 出張、Geode、新しい PR ブログ、SUMO、SVG、Firefox 3.1 - 関連ドキュメント、Ubiquity、MozAfterPaint、などなど… -slug: DevNews/20081014 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla Labs が来週ヨーロッパへ

- -

Aza Raskin が次のように書いています。「Mozilla Labs はコミュニティメンバー、ハッカー、ブロガー、メディア、一般的な行動家に会うために来週ヨーロッパへ行きます。私たちはロンドン、ベルリン、バルセロナに滞在する予定です。私たちは Labs night、Hack セッション、あるいは飲み会を各都市で行う予定です。これらのイベントはみんなのためにオープンなものになっています。私たちはあなたの参加を望んでいます！」イベントのおおまかなスケジュールを含む、さらなる詳細は、Aza のウェブログにあります。

- -

Geode の紹介

- -

Geode は開発者が Firefox 3 におけるジオロケーションの技術とコンセプトに関する実験を始めることを可能にする新しいアドオンです。Firefox の将来のバージョンは新しい Mozilla Labs ブログの投稿には Geode がどのように動作し、どこでそれをダウンロードできるか、どのように使われるかについてのいくつかのアイデア、そしてアイデアと可能な試みの議論への参加の仕方についての多くの情報が含まれています。Aza Raskin も最初のリリース以降アドオンについて出ているいくつかの疑問を追求する Geode についてのフォローアップの投稿を書いています。

- -

新しい Mozilla パブリックリレーションズウェブログ

- -

Mozilla の PR チームは「Above the Fold: Mozilla in the News」と呼ばれる完全に新しいウェブログを公開しました。「Above the Fold はコミュニティが Mozilla でのパブリックリレーションズに注目を高めるための場所です。私たちはアナウンスメント、競争相手のニュース、そして、一般的な業界トレンド周辺のニュースサイクルを追い続けます。それから私たちはなぜ特定の記事と話題が Mozilla に重要なのかということについての背景を提供します。」パブリックリレーションズがどのように働き、何を意味するのかに興味があるなら、Above the Fold に注目すべきです。

- -

SUMO: 記事編集者のアイデアを求めています

- -

support.mozilla.com (SUMO) のチームは SUMO Knowledge Base 編集者システムをどのように改善するかについてのアイデアを求めています。議論とフィードバックは SUMO 貢献者フォーラムで行われており、現在の編集者とこれらの問題を修正するために考えられる方法についてのあなたの考えとアイデアを投稿するための時間がまだあります。すでに投稿済みのいくつかの問題と解決策の一覧は SUMO ブログにあります。

- -

Firefox アクセシビリティチームはあなたの協力を必要としています

- -

Marco Zehe が次のように書いています。「もしあなたがその手をほんの少し汚すことを恐れず、Firefox アクセシビリティチームに協力したいなら、今こそ参加する良い機会です。生成されたアクセシブルのための名前を算出するコードが長い間に大きくなり、ほとんどの部分でメンテナンスし難くなってしまいました。aria-label プロパティサポートの追加のような新機能は HTML と XUL のコードの重複を要求し、一般的にもコードには多くの汚い部分があります。私たちのチームはコードをより良い形にするためにコードのクリーンアップとリファクタリング作業を開始しました。」どのようなリファクタリングでも、軽視することができないリグレッションのリスクがあります。チームはこれらの可能性のあるリグレッションのためのテストへの協力と用意されたテストケースのスイートに存在する不足を埋めることへの協力を求めています。これは Mozilla の開発作業に参加するための本当に素晴らしい方法です。協力することに興味があるなら、始めるために Marco のブログ投稿を読むべきです。

- -

SVG 外部文書参照

- -

Web Tech ウェブログの投稿で、SVG 外部文書参照が Gecko 1.9.1 及び Firefox 3.1 の 2 番目のベータに間に合うように trunk にチェックインされたことが発表されました。「これは塗りつぶし、clip path、マスク、フィルター、svg:use ターゲット、あるいは、マーカーとして使われる SVG 要素が塗りつぶされる、マスクされるなどする要素と同じ文書内にある必要が無くなったことを意味します。特にこれは HTML の内容における SVG の効果についての以前の投稿が XHTML だけでなく HTML 文書にも適用されることになったことを意味します。」さらなる詳細と小さなデモへのリンクは、Web Tech ブログの投稿を参照してください。Robert O’Callahan も最近の SVG 開発について彼のウェブログに書いています。

- -

Audio、Video、Geolocation、及び Media queries のドキュメンテーション

- -

Eric Shepherd が Firefox 3.1 に含まれることが予定されているエキサイティングな新しい Web 技術のいくつかのドキュメントを書くことに懸命に取り組みました。これらの一番最初は HTML もしくは XHTML 文書に音声コンテンツを埋め込む HTML 5 の audio 要素です。同じように、HTML 5 の video 要素ドキュメンテーションも用意されており、映像コンテンツを埋め込むためにこの要素をどう使うかが説明されています。Eric は Firefox 3.1 で開発されている新しいジオロケーション API を紹介する「ジオロケーションの使用」という記事もまとめました。ついには、非常に正確な判断に基づいて異なったスタイルシートを選択可能にする CSS media queries のドキュメンテーションを完了しました。

- -

協力求む: QA Companion Firefox アドオン

- -

Clint Talbert が次のように書いています。「Zach Lipton と Ben Hsieh が QA Companion アドオンを作成しました。これは Firefox または Thunderbird のウィンドウの外側に小さく表示され、アプリケーションに対する litmus テストの実行を支援する拡張です。Firefox のテストを行うとき数千人の人々は協力してくれており、QA Test Day イベントの中心となっています。QA Companion は素晴らしいポテンシャルを持っており、これを用いて多くの人々が Nightly Tester Tool の機能のいくつかを統合したり、Mozilla の自動化 UI を統合化することを含む、より面白いマッシュアップを行う方法について考えています。アドオンに取り組みたいといつも思っているけれど始めることに大きな壁を感じているなら、これは素晴らしい機会です。ベースコードはすでに書かれており、とても簡単です。いっしょに、私たちはツールの新しい方向性をデザインし、それを Mozilla の世界ですべてのテスタにとって本当に役に立つものにすることができます。」QA チームに Companion の開発とメンテナンスで協力することに興味があるなら、Clint は彼のブログ投稿にコメントをするように求めています。

- -

Ubiquity の進捗状況

- -

Ubiquity 0.1.2 に向けたリリース候補が利用可能になり、チームはテストに協力してくれるように求めています。0.1.2 は Jonathan DiCarlo が以前のブログ投稿で説明していた parser-localization API の準備的なバージョンです。また、彼は自分の parser localization API チュートリアルを詳細に説明しています。0.1.2 の完全なリリースノートとさらなる情報及びリリース候補のダウンロードリンクは Jonathan のウェブログにあります。

- -

SUMO: Live Chat とコミュニティ参加

- -

SUMO Live Chat プロジェクトの新しいリーダーである Matthew Middleton が Live Chat の便利さとその貢献者コミュニティについての興味深い記事を書いています。「コミュニティとしてのサポートについてのひとつの素晴らしいことはユーザと支援者の間の線がはっきりとしないことです。多くの現在のサポートボランティアは質問をすることから始め、自分自身の問題の解決することで学んだ情報を用いて他の人々を助けるためにとどまっています。ほとんどのユーザには定期的にコミットする時間がない一方、多くのユーザが問題を解決するために特別に時間を費やし、最終的に問題を修正するためのことを私たちに知らせ、フォーラムでアドバイスを投稿しています。サポートコミュニティは活発にユーザが問題を解決するのを助けている一方で、新しい支援者が Mozilla と一般的なサポートについて学ぶことを可能にしています。」いつものように、SUMO チームはより多くの協力を望んでおり、Live Chat があなたにふさわしいと考えるなら、始め方を知るために Mathew の投稿を読むべきです。

- -

MozAfterPaint: 新しい実験的 API

- -

Web Tech ブログに投稿されたように、Firefox 3.1 チームはコンテントが塗り直される毎にイベントを発生させる Firefox 3.1 向けの非常に実験的な API を作成しました。「イベントは MozAfterPaint と呼ばれ、文書で発生し、ウィンドウにバブルアップします。イベントは getClientRects and getBoundingClientRect メソッドと同じオブジェクトおよび座標システムを用いている、塗り直されたものを伝えるための clientRects と boundingClientRect の 2 つの属性を提供します。これは ウィンドウのコンテントをキャプチャするために canvas.drawWindow メソッドを用いているかもしれない Firefox の拡張と他の『chrome』コードにとって非常に役立ちます。また、Firebug のようなツールにとっても役に立ちます。しかし、通常のコンテントにとっても潜在的に役立つ可能性があり、例えば、 Firefox によって塗られたものを測るためにページにいくつかの軽量の JS 計測を加えたい場合です。 」この新しい API についてのさらなる情報は、Web Tech での投稿を読んでください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081021/index.html b/files/ja/devnews/20081021/index.html deleted file mode 100644 index 473e4a9d44..0000000000 --- a/files/ja/devnews/20081021/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - about:mozilla - Firefox 3.1、Thunderbird、Mobile Firefox、Impact - Mozilla、ローカライゼーション、2010 年までの目標、Ubiquity、などなど… -slug: DevNews/20081021 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3.1 Beta 1 がダウンロード可能に

- -

Firefox 3.1 Beta 1 がダウンロード可能になりました。このマイルストーンは Firefox 3.1 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。このリリースに向けた計画の進行状況は Planning Center と mozilla.dev.planning ディスカッショングループ、そして、IRC 上の #shiretoko チャンネルで追うことができます。

- -

このリリースの新機能と変更には次のものが含まれています。： Web 標準の改善、CSS 2.1 と CSS 3 のサポートの追加、切り替えようとしているタブのプレビューを表示する新しいタブ切り替えショートカット、スマートロケーションバーでの改善されたコントロール、W3C Geolocation API の追加、JavaScript Query Selectors、Web Worker Thereds、SVG transforms、そして、オフラインアプリケーション向けの改善されたサポート。

- -

これらの機能のさらなる情報は Mozilla Developer Center の Firefox 3.1 for Developers（日本語版）という記事、および、Web Tech ブログの Overview of features for Web Developers（Web 開発者向け機能の概略）という投稿を含む、いくつかの場所にあります。

- -

Thunderbird “Shredder” Alpha 3 がリリース

- -

Thunderbird の 3 番目の初期リリース（コードネーム Shredder）がダウンロード可能になりました。このリリースは初期段階の状態であることと普通の、日常的な利用に適さないことを強調するために「Alpha 3」と呼ばれています。Alpha リリースはテスタ、拡張開発者、そして Thunderbird の次のリリースの開発を追いかけることに熱心な他の人々向けに用意されています。Shredder Alpha 3 にはいくつかの新機能の初期段階のバージョンが含まれており、さらなる詳細はリリースページとリリースノートにあります。

- -

最初の Mobile Firefox Alpha がリリース

- -

Mobile Firefox（コードネーム Fennec）が最初の Alpha である Milestone 9 をリリースしました。チームはこれを「User Experience alpha」と呼んでいます。また、それは Nokia N800/N810 インターネットタブレットをターゲットにしています。Windows Mobile バージョンも素晴らしい前進がなされていますが、まだ一般的な使用に耐えるまでには達していないためこのリリースには含まれていません。ですが、 Fennec の新しいデスクトップバージョンが用意されました。つまり、一体何が起きているかを見るために（もちろん、テストへの協力とフィードバックのためにも）Windows、OS X、Linux デスクトップ上にモバイルブラウザをインストールすることが可能になったということです。

- -

Fennec Alpha 1 リリースノートには最初の一歩、ブラウザのインストール方法、このリリースでの新しいこと、既知のバグの一覧、そして、フィードバックを提供する方法についての情報が含まれています。Firefox Mobile プロジェクトに参加することに興味があるならば、Fennec をインストールし、ウォークスルービデオを見て、始めるための素晴らしい時です。

- -

Impact Mozilla: 応募の最後の呼びかけ

- -

Impact Mozilla コミュニティマーケティングチャレンジは 10 月 24 日金曜日に締め切られます。ですから、これは 1 つか 2 つのページのアイデアの要約を応募するための最後の機会です。このチャレンジの目的は Firefox ユーザの継続を改善するこを支援することです。私たちは数千万の人々が Firefox をダウンロードしても現在は使い続けてはいないことを知っています。これらの過去のユーザをどのように取り戻すことができるでしょうか？Firefox を一度ダウンロードしたらその後もずっと利用し続けてくれるようにする方法は？この問題を解決する方法についてアイデアがあれば、それを書いて Impact Mozilla ウェブサイトを通して次の金曜日までに応募してください。

- -

Firefox 3.1 Beta 2 のローカライゼーションスケジュール

- -

Seth Bindernagel は Firefox 3.1 Beta 2 のローカライゼーションスケジュールを投稿しました。String フリーズは今から 1 週間後の 10 月 30 日木曜日午後 11:59（マウンテンビュー時間）に行われる予定です。コードフリーズは 11 月 4 日火曜日午後 11:59（マウンテンビュー時間）の予定です。あなたが Firefox 3.1 Beta 1 作成に参加していないのなら、この次のベータリリースでの参加を望みます。私たちは完全にローカライズされたベータをリリースすることを目標としています。ですから、2 番目のベータにあなたが参加するのに私たちが協力できることを私たちに知らせてください。さらなる情報とローカライゼーションチームツールへのリンクは、Seth のウェブログの投稿を参照してください。

- -

Mozilla の提案されている 2010 年までの目標についての議論

- -

先月、Mitchell Baker は Mozilla が 2010 年までに達成するように取り組むべきだと確信する、提案されている目標の一覧を投稿しました。現在 Mitcell はこれらの目標についての議論を広げながら続けていきたいと思っており、Mozilla コミュニティ全体が議論に参加し意見とフィードバックを提供することができるようにするという次の段階についての概要を示したブログ投稿を書きました。「Mozilla には Mozilla の製品、技術、採用、そして、ミッションの特定の面でともに作業している人々の多くのグループがあります。これらのグループは Mozilla プロジェクトの総合的な目標の議論、および、人々が貢献する動機付けのためには自然な状態です。その点を考慮して、私たちはより多くの人々が気楽に参加することができる議論の設定を計画しています。これらのいくつかは直接顔を合わせてのミーティングになる予定です。その他のものはオンラインディスカッションになるでしょう。」これらのより小さなグループディスカッションと進行中のフィードバックが可能である他のフォーラムについての情報は、Michell のブログ投稿を参照してください。

- -

開発者ツールと Open Web

- -

Mozilla Labs は最近、開発者ツールと Open Web の研究と開発に焦点を当てる予定の新しいグループの形態を発表しました。「私たちは開発者の生産性を増加させ、賞賛せずにはいられないユーザエクスペエンスを可能にし、そして、オープンスタンダードを宣伝するツールにおける革新のための素晴らしい機会だと信じています。」Ajaxian、Ajax Ecperience の共同設立者、そして、Open Web の長きに渡る支援者である、Dion Almaer と Ben Galbraith が新しいプロジェクトを率いるためにフルタイムで Mozilla に加わりました。さらなる情報は、Mozilla Labs ブログの投稿を参照してください。

- -

Ubiquity: ブックマークレットをコマンドに変換する

- -

Aza Raskin は Firefox のブックマークレットを Ubiquity コマンドに変換する方法を説明した短いビデオチュートリアルをまとめました。「ブックマークレットはブラウザのブックマークツールバーに追加することができるクリックで実行されるアクション（技術的にはいくつかの JavaScript を含むリンク）です。それらは訪問するウェブサイトに欲しい新しい機能をどんなものでも追加することを可能にするので、Web のコントロールをユーザの手に取り戻すための良い方法です。ブックマークレットの主な問題はそれらが自らの機能にアクセスするための幅広い解決策を提供しないことです。あなたは多くのボタンをツールバーに置くことになるのでそれらは役に立たなくなります。」任意のブックマークレットを Ubiquity コマンドに変換することを容易にする Ubiquity の新しいユーティリティファンクションがあり、Aza のビデオチュートリアルはその使い方を説明します。

- -

アドオン開発者へ: 再びそのときです。

- -

Justin Scott が次のように書いています。「Firefox 3.1 の最初のベータのリリースとともにみなさんが大好きなリリースタイム祭り（拡張互換性の更新）がやって来ました！あなたが 3.0.* かそれ未満の maxVersion を使用している拡張開発者ならば、3.1 b1 との互換性を宣言する前に自分の拡張をテストしてください。拡張開発者向けの変更のいくつかが Mozilla Developer Center に一覧化されています（日本語版）。3.1.b1 は AMO で許可されるバージョンですが、3.1.* は最終リリースに近づくまで追加されません。あなたのユーザがどれだけ 3.1 ベータを利用しており、非互換/無効 としてマークしているかもしれないことを知るために Developer Statistics Dashboard を常に見ることができることを覚えておいてください。」さらなる情報を得るために Justin のブログ投稿をチェックするべきです。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081028/index.html b/files/ja/devnews/20081028/index.html deleted file mode 100644 index 4e1b46f265..0000000000 --- a/files/ja/devnews/20081028/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: >- - about:mozilla - 2010 年までの目標、Camino、Firefox - UI、ローカライゼーション、Ubiquity、セキュリティメトリック、などなど… -slug: DevNews/20081028 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -
 
- -

2010 年までの目標: データディスカッションは今日です！

- -

Mozilla の提案された 2010 年までの目標についての進行中の議論の一部として、Mitchell Baker は今日、10 月 28 日 木曜日午後 1 時太平洋時間にプライバシーとデータに関する目標についての公式ディスカッションを行う予定です。このディスカッションは Air Mozilla で配信される予定であり、また、質問に対応するために irc.mozilla.org の #2010goals IRC チャンネルを使う予定です。さらなる情報は、Mitchell のブログ投稿を参照してください。

- -

Camino 2.0 Alpha 1 がダウンロード可能に

- -

Samuel Sidler が次のように書いています。「Camino 1.6 をリリースして以降、Camino Project は懸命な作業を何ヶ月も続けてきましたが、今、自信を持って Camino 2 のファーストプレビューリリースを発表します。Camino 2.0 Alpha 1 には、タブオーバービュー、完全なコンテンツズーム、ブラウザウィンドウでの完全なキーボードアクセスのより良いサポート、そして、「最近閉じたページ」メニューを含む、いくつかの注目すべき改善が含まれています。また、Camino 2.0 Alpha 1 は人気のあるプラグイン利用でのより良いパフォーマンスと Web 標準のサポートの拡大につながる、Mozilla の Gecko レンダリングエンジンの バージョン 1.9.0 における改善のすべてを含んでいます。さらなる情報を入手し、ダウンロードするために、プレビューサイトを訪れてください。」

- -

Mozilla の 2010 年までのモバイルに関する目標についての考え

- -

Jay Sullivan は Mozilla がモバイルでの取り組みでなすべき、可能性のある、2010 年までの目標についての彼の考えを考察した広範囲に及ぶブログ投稿を書きました。「Web は他のプラットフォームにはない革新と選択が可能です。そして、私たちのミッションを行い続けるために、私たちは Web 開発者がモバイルデバイスのために素晴らしいソフトウェアを作成できるようにする必要があります。適切な方法でこれを行うために、私たちはアプリケーション開発者のニーズに対処し、Web を可能な限り最も良いモバイルプラットフォームにする必要があります。ネイティブの機能との比較は私たちがどのように進んでいくかを調べるための良い方法です。私は 2010 年までにリッチさがこのレベルに達したモバイルプラットフォームとしての Web を思い描くことが私たちが集めることができ、いくつかの方法で測定できる目標の集まりを促進することを助けると思っています」。投稿の全文を読み、議論に参加するために、Jay のウェブログを訪れてください。

- -

Firefox テーマ: Alex Faaborg による Firefox ツールバー UI についての考察

- -

Alex が次のように書いています。「私たちが Firefox 3 の Windows テーマの開発の間にフィードバックを受け取っていたとき、一つの質問が多くのことを想起させました。なぜメインツールバーに 3 つの異なったコントロールの見た目のスタイルがあるのでしょうか？」Alex のブログの投稿は Firefox 3 のツールバーの見た目の階層の背景にある理由を考察し、なぜ異なった重み付けをされたコントロールが同じ重み付けをされたコントロールよりも役に立ち、効果的なのかを説明しています。この記事は UI チームの Firefox 3 についての決定と選択されたデザインの裏にある考えとセオリーのいくつかの背景にある深いところまで探求している興味がそそられる投稿です。Alex のウェブログで彼の投稿全文を読んでください。

- -

Firefox 3.0.4 での 6 つの新しいローカライゼーション

- -

Seth Bindernagel が Firefox 3.0.4 のリリースで 6 つの新しい言語が Firefox に追加されるということについて書いています。新しい言語は次のものです。：ブルガリア語、エスペラント、エストニア語、ラトビア語、オック語、そして、ウェールズ語。「Ogi (bg)、Eduardo (eo)、Sander (et)、Raivis (lv)、Yannig (oc)、そして Dewi と David (cy) の懸命な作業に感謝します！このリリースの技術的な面を推し進めた Pike、このリリースの Web サービスを管理した Stas、そして、webparts担当の Pascal にも特に感謝します。最後に、Gandalf がリリース前のその日の午前 5 時頃に少しのパッチを書き、コードをチェックするために参加しました。それは本当のチームプロセスでした。」さらなる情報は、Seth のブログ投稿を参照してください。

- -

Ubiquity の更新情報

- -

Aza Raskin が Ubiquity 0.1.2. のリリースを発表しました。「私たちは Ubiquity について立ち上げ直後から非常にたくさんの量のフィードバックをもらいました。主なポイントの一つは Ubiquity に含まれるコマンドとより多くのコマンドのための欲しい機能とバグの修正でした。このリリースでの最新の更新は組み込みコマンドのすべてが HTTPS で保証された ubiquity.mozilla.com から配信されるようになったことです。また、コマンドを書くつもりの人々のために、私たちは素晴らしく改善された Ubiquity コマンドエディタを用意しました。」アドオンの変更の完全な一覧は、Wiki のリリースノートを参照してください。

- -

Window Snyder への Mozilla のセキュリティメトリックに関するインタビュー

- -

Gen kanai が次のような記事を投稿しています。「CNet の Robert Vamosi が Mozilla のセキュリティ最高責任者である Window Snyder に Mozilla でのセキュリティメトリックについてとどのように私たちがオープンソースプロジェクトプラットフォームにおけるセキュリティをより良く理解しようとしているかについてインタビューしています。Mozilla での、セキュリティプラクティスについて暴露しています。」それは Window がセキュリティ測定の難しさ、私たちが Mozilla で用いているメトリック、そして、なぜそしてどのように長い時間をかけてセキュリティを測定するのかということに関する疑問について説明している興味深いインタビューです。CNet news ウェブサイトで元記事を読みそれに付属したビデオを見ることができます。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081104/index.html b/files/ja/devnews/20081104/index.html deleted file mode 100644 index b30e1574a1..0000000000 --- a/files/ja/devnews/20081104/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: >- - about:mozilla: Firefox が 20% マーケットシェアを達成、Fennec 向けアドオン、Firefox 3.1 - でのプライベートブラウジングなどなど… -slug: DevNews/20081104 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox が 20% 世界規模マーケットシェアを達成

- -

世界中の Web サイトでブラウザ使用率を調査しているサービス、Net Applications によると、Firefox の世界規模でのマーケットシェアが 10 月中に初めて 20% を超えました。Firefox の使用率は国によってごくわずかに変化します。例えば、ヨーロッパでの使用率を調査している、Xiti Monitor は最近のレポートで、 Firefox がヨーロッパ大陸で 30% のマーケットシェアを持っていると指摘しています。しかし、Net Applications レポートでは Firefox が世界中で 20% 以上の利用率を示すのは初めてです。さらなる情報は、Mozilla Metrics ブログを参照してください。

- -

Fennec 向けアドオン

- -

Firefox モバイルブラウザのコードネームである Fennec 向けの最初のアドオンが登場しました。Chris Finke は自身の URL Fixer アドオンに Fennec との互換性を追加しました。Madhava Enros が彼のウェブログの投稿に Fennec で実行されているアドオンのスクリーンショットを掲載しています。

- -

また、Mark Finkle も add-ons.mozilla.org が Fennec のサポートを追加したと書いています。このことは Fennec の内部からアドオンを検索できるようになり、アドオン作者がアドオンをアップロードまたはアップデートするときに Fennec との互換性を含めることができるようになったことを意味します。

- -

Firefox 3.1 でのプライベートブラウジング

- -

Ehsan Akhgari が Firefox 3.1 の新機能の一つであるプライベートブラウジングを紹介する投稿を書きました。プライベートブラウジングは Web のブラウズ中に Firefox が履歴と Cookie 情報を保存することを OFF にすることを可能にします。この機能は Firefox 3.1 Beta 2 に初めて含まれる予定です。さらなる情報と機能のスクリーンショットは彼の投稿を参照してください。

- -

Mozilla Camp Europe 2008

- -

10 月 25 日と 26 日に、約 150 人の Mozilla 貢献者がスペインのバルセロナに集まりました。Firefox からローカライゼーション、アドオン、コミュニティ開発、そして多くのその他の話題まであらゆることを話すために人々がヨーロッパ中とアメリカからやって来ました。Jane Finette、Tristan Nitot そして Brian King がイベントについて投稿しています。また、Mozilla Foundation の新しい Executive Director である Mark Surman もこのイベントでの Mozilla の 2010 年までの目標についてのディスカッションについての話題を投稿しています。

- -

コンセプトシリーズ の Design Jams

- -

Mozilla Labs のコンセプトシリーズはミシガン大学で続けられています。Human Computer Interaction 専攻の生徒がよりタブ、履歴、自動化と Web アプリケーションを含む、より良いブラウザを作成することに関するブレインストーミングを行っています。出されたアイデアへのリンクが Mozilla Labs ウェブログでの投稿にあります。

- -

Firefox が ISDA に認められる

- -

Nicole Loux は Above the Fold ウェブログで次のように書いています。「Mike Beltzner と Firefox 2 チームは 2008 ISDA International Design Excellence Awards の Interactive Product Experiences カテゴリで最終選考に選ばれたことを発表しました。ISDA はデザインの質と前向きな印象を推進する、工業デザイン業者の代弁者です。」Mike と Firefox チームのみなさんおめでとうございます。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081111/index.html b/files/ja/devnews/20081111/index.html deleted file mode 100644 index a05d7670d3..0000000000 --- a/files/ja/devnews/20081111/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: >- - about:mozilla: Firefox 4 周年、Impact Mozilla 最終選考発表、東京での Developers Conference - などなど… -slug: DevNews/20081111 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 4 周年

- -

2004 年 11 月 9 日、Firefox 1.0 がリリースされました。それからの 4 年間、Firefox は Web の変化の触媒となってきました。Tristan は次のように書いています。「ちょうど 4 年間で、ブラウザ空間においての物事が非常に大きく変わりました。例えば、より多くの革新が起こり、参加者が増えました。全体的には、Web は以前より非常により良い形になり、前途は非常により明るくなりました。2003 年頃、誰もが Web サイトを、その時はメンテナンスされていないブラウザであった、Internet Explorer だけを対象に作っていたことを思い出してください。それからどれだけのことが変わったでしょうか！スペイン、フランス、ドイツ、そして、ポーランドのようなところでは、Firefox はインターネットユーザの 30 から 40% によって使われています。」Mozilla Blog にも投稿があり、Mozilla Links にも同様に素晴らしい記事があります。

- -

Impact Mozilla 最終選考発表

- -

Firefox ユーザの継続率を改善するためのオープンマーケティングチャレンジである、Impact Mozilla は 世界中から 300 以上の応募を受け取りました。これらの応募の中から、10 の最終選考者が 12 月の最終投票のために選ばれました。さらなる情報は Impact Mozilla ブログの投稿を参照してください。

- -

フィードバックの呼びかけ：アドオン開発者と Firefox 3.1

- -

Paul Rouget が Firefox 3.1 に移行しようとしているアドオン開発者に出会った問題を報告してもらうための呼びかけを公開しました。彼はアドオンの移植に問題がある開発者にブログ投稿にコメントしてもらうように頼んでいます。また、バグを立てるつもりの人々のために、dev.apps.firefox の投稿で Paul が開発者へバグに特定のキーワードをつけるように頼んでいます。さらなる情報は、アドオンブログでの彼の投稿とニュースグループでの彼の投稿を参照してください。

- -

あなたのアドオンをプライベートブラウジングに対応させてください

- -

Ehsan Akhgari がFirefox 3.1 の新しいプライベートブラウジング機能を取り込みたいアドオン開発者のために素晴らしい技術記事を書きました。彼はブラウジングモードの変更を探知するための API とプライベートブラウジングモードがテーマ作者にどのような影響を与えるかについての両方をカバーしています。さらなる情報は彼のウェブログの投稿を参照してください。

- -

今週末: 東京での Mozilla Developers Conference

- -

2008 年 16 日日曜日に、Firefox Developer’s Conference 2008 が日本の東京で行われます。スピーカーは Mozilla Labs から Aza Raskin、Mozilla の Moveile VP である Jay Sullivan などです。ディスカッションはモバイルから最新の Web 標準、Mozilla Labs で予定されていることまでに渡る予定です。さらなる情報は Spread Firefox の投稿か Mozilla Labs ウェブログの投稿を参照してください。

- -

今週末：サンフランシスコの Green Festival に Mozilla が参加

- -

今週末（11 月 14-16 日）にサンフランシスコにいるなら、Mozilla が Green Festival に参加しています。Green Festival はアメリカで最大のグリーン会議です。Mozilla の仲間がそこで私たちのミッションとグローバルコミュニティについて話し、また、グリーンコンピューティング問題に興味がある似たグループと一緒に取り組む予定です。さらなる情報は Mozilla Blog の投稿を参照してください。

- -

開発カレンダー

- -

来 る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

も し、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081118/index.html b/files/ja/devnews/20081118/index.html deleted file mode 100644 index 77f873843c..0000000000 --- a/files/ja/devnews/20081118/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 'about:mozilla: Fashion Your Firefox、Firefox 中国版、about:labs などなど…' -slug: DevNews/20081118 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Fashion Your Firefox

- -

数千のアドオンが Firefox には用意されていますが、ときどき目的のものを見つけるのに苦労することがあります。今日、Mozilla は Web の使い方に基づいたアドオンの集まりを選ぶことができる Fashion Your Firefox を発表しました。カテゴリには Shutterbug（アマチュアカメラマン）、News Junkie（ニュースマニア）、Social Butterfly（SNS 好き）などがあります。Official Mozilla Blog の Fashion Your Firefox の投稿、FAQ、もしくは David Rolnitzky のブログ投稿を参照してください。

- -

Firefox 中国版がリリースされました

- -

今 日、Mozilla は Firefox 中国版が利用可能になったことを発表する予定です。Li Gong は次のように書いています。「今日、私たちは Firefox 中国版をリリースしました。これは g-fox.cn と他の人気ダウンロードサイトでダウンロードできます。大変成功した Firefox 3 に基づいて、中国版は中国でのインターネットユーザにあらゆる恩恵を提供する大変充実したバージョンです。」Mike Beltzner は中国において人々がインターネットをどのように使うか、そして、中国版がどのように中国でのユーザのためにローカライズされた環境を作り上げようとしたかについての彼の意見のいくつかを書いた素晴らしいエントリを投稿しています。g-fox.cn から中国版をダウンロードできます。

- -

about:labs - Mozilla Labs についての新しい週刊ニュースレター

- -

Mozilla Labs チームは Mozilla Labs で起こっているエキサイティングなことを伝えるための週刊ニュースレターを始めました。about:labs の第 1 号は Weave、Ubiquity、Snowl、そして、Concepts of the Week を取り上げています。Mozilla Labs Blog ですぐに購読することができます。将来は about:mozilla のように E メール形式でニュースレターを購読できるようになる予定です。

- -

Bugzilla が NASA で導入されました

- -

CNet が問題を追いかけ、より効果的にコミュニケーションするために NASA 内部で使われているツールについて報道しています（Firefox Hacks 翻訳日記による私的な日本語訳）。Problem Reporting Analysis and Corrective Action (PRACA) システムは Bugzilla と呼ばれる Mozilla 自身のオープンソースバグトラッキングシステムがベースになっています。記事では次のように伝えています。「Ames Human-Computer Interaction Group のリーダーである、Alonso Vera によると、単一の、どこからでもアクセス可能な PRACA パッケージはシャトルのエコシステムの多くの異なる部局で過去 30 年 以上使われてきた 40 以上の異なるデータベースシステムを置き換えることになります。」mozillalinks.org の記事（日本語版）と Max Kanat-Alexander による投稿でこのことについてもっと読むことができます。

- -

Firefox 3.0.4 と Firefox 2.0.0.18 がリリースされました

- -

Mozilla は 既存製品の継続的サポートの一環として Firefox 3.0.4 と Firefox 2.0.0.18 をリリースしました。これらの更新には安定性とセキュリティの修正が含まれており、すべてのユーザにブラウザのこれらのバージョンに更新することを推奨します。さらなる詳細は Mozilla Blog の投稿を参照してください。

- -

Spread Thunderbird

- -

Mozilla Messaging は Thunderbird を愛する人々が集まり、宣伝に取り組むためのサイトである Spread Thunderbird を立ち上げました。さらなる情報は Mozilla Blog の Mary による発表を参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

- -

Fashion Your Firefox

- -

数千のアドオンが Firefox には用意されていますが、ときどき目的のものを見つけるのに苦労することがあります。今日、Mozilla は Web の使い方に基づいたアドオンの集まりを選ぶことができる Fashion Your Firefox を発表しました。カテゴリには Shutterbug（アマチュアカメラマン）、News Junkie（ニュースマニア）、Social Butterfly（SNS 好き）などがあります。Official Mozilla Blog の Fashion Your Firefox の投稿、FAQ、もしくは David Rolnitzky のブログ投稿を参照してください。

- -

Firefox 中国版がリリースされました

- -

今 日、Mozilla は Firefox 中国版が利用可能になったことを発表する予定です。Li Gong は次のように書いています。「今日、私たちは Firefox 中国版をリリースしました。これは g-fox.cn と他の人気ダウンロードサイトでダウンロードできます。大変成功した Firefox 3 に基づいて、中国版は中国でのインターネットユーザにあらゆる恩恵を提供する大変充実したバージョンです。」Mike Beltzner は中国において人々がインターネットをどのように使うか、そして、中国版がどのように中国でのユーザのためにローカライズされた環境を作り上げようとしたかについての彼の意見のいくつかを書いた素晴らしいエントリを投稿しています。g-fox.cn から中国版をダウンロードできます。

- -

about:labs - Mozilla Labs についての新しい週刊ニュースレター

- -

Mozilla Labs チームは Mozilla Labs で起こっているエキサイティングなことを伝えるための週刊ニュースレターを始めました。about:labs の第 1 号は Weave、Ubiquity、Snowl、そして、Concepts of the Week を取り上げています。Mozilla Labs Blog ですぐに購読することができます。将来は about:mozilla のように E メール形式でニュースレターを購読できるようになる予定です。

- -

Bugzilla が NASA で導入されました

- -

CNet が問題を追いかけ、より効果的にコミュニケーションするために NASA 内部で使われているツールについて報道しています（Firefox Hacks 翻訳日記による私的な日本語訳）。Problem Reporting Analysis and Corrective Action (PRACA) システムは Bugzilla と呼ばれる Mozilla 自身のオープンソースバグトラッキングシステムがベースになっています。記事では次のように伝えています。「Ames Human-Computer Interaction Group のリーダーである、Alonso Vera によると、単一の、どこからでもアクセス可能な PRACA パッケージはシャトルのエコシステムの多くの異なる部局で過去 30 年 以上使われてきた 40 以上の異なるデータベースシステムを置き換えることになります。」mozillalinks.org の記事（日本語版）と Max Kanat-Alexander による投稿でこのことについてもっと読むことができます。

- -

Firefox 3.0.4 と Firefox 2.0.0.18 がリリースされました

- -

Mozilla は 既存製品の継続的サポートの一環として Firefox 3.0.4 と Firefox 2.0.0.18 をリリースしました。これらの更新には安定性とセキュリティの修正が含まれており、すべてのユーザにブラウザのこれらのバージョンに更新することを推奨します。さらなる詳細は Mozilla Blog の投稿を参照してください。

- -

Spread Thunderbird

- -

Mozilla Messaging は Thunderbird を愛する人々が集まり、宣伝に取り組むためのサイトである Spread Thunderbird を立ち上げました。さらなる情報は Mozilla Blog の Mary による発表を参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081125/index.html b/files/ja/devnews/20081125/index.html deleted file mode 100644 index 1a346cbdf1..0000000000 --- a/files/ja/devnews/20081125/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: 'about:mozilla - 会計報告、ロゴ、アドオン、Foundation レポート、2010 年までの目標、などなど…' -slug: DevNews/20081125 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla 会計報告: 不確かな時代における持続可能性

- -

Mozilla は最近 2007 年の監査済財務諸表 を、これらの諸表について聞かれる最も一般的な質問をカバーする FAQ とともに公開しました。Mitchell Baker も Mozilla の会計報告についてブログに書き、2007 年も会計的および組織的に健全な年であり、Mozilla は現在の難しい経済情勢の間も重要性と有効性を維持するために良い位置にいることを指摘しています。さらなる情報は、Mitcell のウェブログを参照してください。

- -

新しい Firefox 3.1 ロゴ

- -

真新しい Firefox 3.1 のロゴが Mozilla Marketing チームによって用意されました。John Slater が次のように書いています。「出来たての、公式 Firefox 3.1 ロゴを利用および楽しめるようになりました。私の希望は別のバージョンが幅広く周りに広がることを避けて 3.1 関連のコミュニケーションのすべてにおいてこれらを利用し始めることができるようにすることです。」ホットなうちにゲットしてください。

- -

10 億のアドオンがダウンロードされました

- -

先週の初めに、Mozilla Add-ons コミュニティは重要なマイルストーンに達しました。Mozilla Add-ons ウェブサイトを通して 10 億のアドオンが提供されたのです。「この素晴らしい出来事はアドオンユーザ、開発者、および、熱心な人たち、同様に、ほんの数例ですが、Thunderbird、SeaMonkey、Sunbird、Komodo、Flock、そして Songbird のような Mozilla アドオンを包含する Firefox 以外のアプリケーションの巨大なコミュニティによって可能になったものです。」さらなる情報は Mozilla Add-ons Blog を参照してください。

- -

Fashion your Firefox デビュー

- -

先週、Mozilla は、あなたの興味とオンラインの活動に基づいて Firefox ブラウザをカスタマイズするシンプルな Web アプリケーションである、Fashion Your Firefox を立ち上げました。Fashion Your Firefox は活動に基づいたカテゴリにおけるアドオンを簡単に見つけてインストールする機能を提供します。カテゴリには次のものが含まれています。Shutterbug (アマチュアカメラマン)、Rock Star (ロックスター)、News Junkie (ニュースマニア)、Shopaholic (買い物依存症)、Digital Pack Rat (情報収集家)、Social Butterfly (SNS 好き)、などなど。さらなる情報は Mozilla Blog にあります。

- -

Mozilla Foundation: 11 月の役員会レポート

- -

Mozilla Foundation の Executive Director に最近任命された Mark Surman が彼のウェブログに 11 月の Mozilla Foundation Board Report（役員会レポート）を投稿しています。「先月は物事を進めることに焦点を当てました。プログラミングの実験の定義。チームの構成。Mozilla の幅広いかつ Foudation 特有の計画。MozDev、MoCo、MoMo、そして、特に、Mozilla Europe という Mozilla ファミリーとの架け橋を造ることについても。膨大な量の今月の Mark の時間がお決まりのチャリティー団体報告に投入されました。みなさん、良い月を。」さらなる詳細を知るために、完全なレポートは Mark のウェブログで読めます。

- -

Mozilla の 2010 年までの目標、ビデオインタビュー

- -

Tristan Nitot は Mitcell Baker との短いビデオインタビューを投稿しました。彼らはそのビデオで、進行中の 2010 年までの目標プロジェクトについて議論してます。「目標について重要なことは Mozilla コミュニティを参加する気にすることと組織として私たちがしていることをすべて誇りに思い、それらに参加したいと思うことです。」Mozilla の 2010 年の目標を設定することに関連する議論に参加することを強くおすすすめします。Tristan が彼のブログの投稿の最後にその方法についての概要を書いています。

- -

Brendan Eich がインタビューされました

- -

数週間前、Brendan Eich が C10 Sessions と呼ばれる CNET のシリーズでインタビューされました。最近、そのビデオがそれらのサイトに投稿されました。Brandan と CNET の Dan Farber が Mozilla、Firefox、そして、Web の将来について素晴らしい議論をしています。CNET Web サイトでビデオが見られます。

- -

Firefox に関する調査の結果

- -

9 月に Mozilla Marketing チームが試験的な「Firefox in your country」調査を行い、9506 の回答を得ました。調査はブラジル、インド、ドイツ、インドネシア、ポーランド、スペイン、そして、オーストラリアという 7 つの国を対象としましたが、世界中から回答が集まりました。熱心な回答が寄せられたため、質問を修正し新しい国々を対象としたもうひとつの調査を 12 月に行う予定です。調査のローカライズ、もしくは、あなたの国にこの調査を宣伝することに協力したいと思っているなら、Alix Franquet が協力者を探しています。さらなる情報は、Alix のウェブログを参照してください。

- -

予定されている Mozilla Europe コミュニティのイベント

- -

Mozilla Europe の一員である、William Quiviger が数ヶ月後にヨーロッパで行われる予定の Mozilla コミュニティ関連イベントの一覧を投稿しました。一覧化されたイベントが行われる範囲は 11 月から来年の 3 月まで、行われる場所はパリ、ブカレスト、マドリード、ブリュッセル、そして、ベルリンとなっています。完全な一覧と詳細に関するすべては William のウェブログを参照してください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081202/index.html b/files/ja/devnews/20081202/index.html deleted file mode 100644 index 4f979da33f..0000000000 --- a/files/ja/devnews/20081202/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: >- - about:mozilla - Add-on-Con、ツリーの構造、アドオンの更新、Mozilla - Manifesto、Bugzilla、Firefox、Thunderbird、などなど… -slug: DevNews/20081202 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Add-on-Con: 12/11、カリフォルニア州、マウンテンビュー

- -

Mozilla は 12 月 11 日にマウンテンビューの Computer History Museum で行われる予定の Add-on-Con に参加する予定です。「Google、Microsoft、そして Mozilla がブラウザプラットフォームの将来について議論するために一堂に会する予定です。産業のリーダーからブラウザアドオンの技術とビジネスについて学んでください。あなたの同業者と情報を交換してください。」Mozilla の Engineering 部門 VP である Mike Shaver に総括講演の任が与えられており、また、Mark Finkle もカンファレンスでプレゼンテーションを行う予定です。さらなる情報は Add-on-Con ウェブサイトをチェックしてください。

- -

Firefox: ツリーの構造、移行、チェックイン規則

- -

最近 Mike Beltzner が開発活動の場所が mozilla-central から mozilla-1.9.1 レポジトリに移行した Firefox 3.1 / Gecko 1.9.1 コードレポジトリの変更について投稿しました。ツリーが再び開かれた後、Tree status Wiki ページでレビュー可能になっている新しいチェックイン規則が登場しました。関連する Bugzilla と Tinderbox の変更を含む、さらなる情報は Mozilla Developer News サイトの Beltzner のブログ投稿にあります。

- -

Add-ons: Firefox 3.1 Beta 2 に対応し始める時期です

- -

Paul Roguet が次のように書いています。「Firefox 3.1 Beta 2 が 12 月の最初の週にリリースされる予定になっています。Beta 2 以降は、アドオンの動作を阻害するようなインタフェースの変更は行わないことを約束します。ですから、今こそ、対応を始めるときです。」また、Firefox チームもスケジュールに 3 番目のベータを追加し、そこで活発に Firefox をユーザに勧め始める予定です。このことは多くのアドオンが Beta 3 の前に Firefox 3.1 に対応することが非常に重要であることを意味します。そうすることで多くのユーザが更新可能になるだろうからです。ドキュメンテーションへのリンクを含むさらなる情報は、Mozilla Add-ons ウェブログの Paul の投稿全文を参照してください。

- -

Mozilla Manifesto が 12 を越える言語で閲覧可能になりました。

- -

Mozilla Manifesto が 12 を越える異なる言語で閲覧可能になりました。最近、Mozilla.org のサイトがすでに存在していたテキストの様々な翻訳へのリンクを提供するために更新され、ローカライゼーションコミュニティがとても活発に追加すべき新しいバージョンを提供しています。現在、Manifesto は中国語（簡体字）、中国語（繁体字）、オランダ語、英語、フランス語、フリジア語、ガリーシア語、ギリシャ語、イタリア語、韓国語、ポーランド語、ブラジル・ポルトガル語、ルーマニア語、および、ベトナム語で読めます。このことに協力するために手間暇をかけてくれたみなさんに感謝します。

- -

11 月の Firefox マーケットシェア

- -

Asa Dotzler は Firefox が 11 月のグローバルマーケットで 20.72% を記録したことを示している NetApplications の月間ブラウザマーケットシェアレポートについて投稿しました。「これは 10 月から非常に堅実に飛躍しています。しかし、また、前年の第三四半期に見られた Firefox の成長とも非常に一致しています。」さらなる情報といくつかの素晴らしいグラフを Asa のブログ投稿でチェックしてください。

- -

Bugzilla 3.2 がリリースされました

- -

約 1 年半の開発期間を経て、Bugzilla 3.2 がリリースされました（Mozilla Japan ブログの記事）。この新しいリリースでは多くの数の変更がある一方、“4.0" とは呼ばれないメジャーリリースです。その理由は最新の Bugzilla Status Update（himorin's blog の日本語によるアナウンス）で説明されています。このリリースについてのさらなる情報とそこに至るまでのすべてについては Max Kanat-Alexander のウェブログ投稿を参照してください（日本語版については himorin's blogの記事を参照してください）。

- -

Performance dashboard (v2)

- -

約 1 年前、Johnathan Nightingale が Firefox のパフォーマンス分析を一目で見るためのダッシュボードを作りました。これは退行バグを見つけ、ツリーの状態を評価することをより簡単にするものです。彼はそのダッシュボードの新しいバージョンをリリースしました。「今はまだ初期の段階です。1.9.1/Firefox 3 branch のデータだけを引っ張り、2、3 個のテストだけを引っ張っていますが。これらは簡単に追加できます。」機能を追加することに興味があるなら、Johnathan は公開 hg レポジトリを通してコードを参照可能にしています。さらなる詳細は Johnathan のブログ投稿にあります。

- -

Thunderbird Beta 1 は 38 言語で

- -

Simon Paquet が次のように書いています。「3 週間ほど前、私が Beta 1 のための String フリーズの計画を告知したとき、このリリースでサポートされるロケールの数を 30 もしくは（私の最も楽観的な考えで）35 ロケールまで増やしたいと望んでいると言いました。それで、現在のところ 38 ロケール（en-US を含む）が Thunderbird 3 Beta 1 で選択可能であり、つまりは全体として私の期待を越えました。これは注目すべきことです。なぜなら、すでに Beta 1 で Thunderbird 2 最終リリースと比べて 1 ロケール足りないだけなのですから。l10n コミュニティのみなさんに大変感謝します。あなたたちは最高です！」

- -

Mitchell Baker が Investors Business Daily で紹介されました

- -

Investor’s Business Daily が Mozilla の Mitchell Baker についての興味深い紹介を書きました。「Baker は インターネットのパイオニアの Netscape Communications の一部門である、Mozilla Organization を新しく設立することを任されました。2001 年の技術崩壊の真っ直中、Baker はクビのなってもなお去ることを拒みました。『重役たちは 1 週間後に打ち負かされました。そのとき彼らは彼女がいまだにプロジェクトで働き続け、電話をかけ続けていることを知ったのです。』Mozilla の 最高技術責任者である Brendan Eich は言っています。『彼女はそうすることができました。なぜなら Mozilla はコミュニティプロジェクトになっていたからです。もはや Netscape に支配されたものではなかったのです。』Mitchell は Mozilla Project で常に重要な役割を演じていました。そして、IBD の紹介は彼女のこだわり、ビジョン、そして、熱心さが長年の間どのように尊敬に値するものであったかを説明しています。プロジェクトの歴史のいくつかに興味があるならば特に、素晴らしく読む価値があります。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

も し、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081209/index.html b/files/ja/devnews/20081209/index.html deleted file mode 100644 index 057fc4d853..0000000000 --- a/files/ja/devnews/20081209/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - about:mozilla - Beta 2、Community - Store、メジャーアップデート、マルウェアについての情報、目標、ミッション、会計報告、マーケットシェア、賞、などなど… -slug: DevNews/20081209 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3.1 Beta 2 がダウンロード可能になりました

- -

Firefox 3.1 Beta 2 がダウンロード可能になりました。このマイルストーンは Firefox 3.1 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3.1 に向けた計画の進行状況は Planning Center と mozilla.dev.planning、そして、irc.mozilla.org 上の #shiretoko で追うことができます。Beta 2 は 54 の言語で利用可能であり、新しい機能であるプライベートブラウジングモードが搭載されています。また、他にも多くの変更と追加を含んでいます。このベータ版をダウンロードする方法を含むさらなる情報は、Mozilla Developer News ウェブログの Firefox 3.1 Beta 2 アナウンスメントを参照してください。

- -

Mozilla Community Store がオープンしました!

- -

莫大な尽力をかけて、Mozilla マーケティングチームは素晴らしい新しい Mozilla Community Store をオープンさせました。このストアは誰でもオリジナル T シャツデザインを投稿でき、それらを一般の人々が購入できるようにするという Mozilla の T シャツ作成プロセスのための新しいコミュニティソースアプローチを取っています。

- -

「Store ギャラリーは完全に世界中のコミュニティが作成した作品から成っています。それらのすべては Zazzle を通して完全にカスタマイズ可能です。そのプロセスは非常に簡単で選べる多くのオプションがあります。」Mozilla Community Store は 多数の素晴らしく高いクオリティのデザインとそれらをさらにプリント可能にするべきという要求をもたらした Firefox 3 T シャツデザインコンテストに感化されています。Community Store の収益のすべては Mozilla Foundation に寄付され、また、12 月 25 日までのオープン特別 20 % 割引もあります。

- -

さらなる情報は、オリジナルのオープン告知をチェックしてください。また、Thunderbird および Calendar チームが彼らのプロジェクトのための Community Store T シャツデザインに貢献してくれる人々を探しています。もしあなたが芸術肌の人ならば、これは Mozilla コミュニティに飛び込んで参加する素晴らしい方法です！

- -

Firefox 2.0.0.18 ユーザに対してメジャーアップデートが提供されています

- -

Firefox 2 ユーザが簡単に自分のブラウザを Firefox 3 にアップグレードできる「メジャアップデート」を提供してから 4 ヶ月経ちました。この期間に Firefox 3 はさらに改善され、主要なアドオンも新しいブラウザで動くように更新されました。Firefox 2 は早々に Mozilla がセキュリティと安定性の更新を活発に提供することがなくなる日を迎えてしまいますので、私たちは強くユーザが Firefox 3 にアップグレードすることを推奨します。このメジャーアップデートについてのさらなる情報は Mike Beltzner のオリジナルの告知とブログ投稿を参照してください。

- -

Mark Surman: One Mozilla

- -

Mark Surman が Mozilla の 2010 年までの目標を決めるプロセスに勤勉に取り組んでいて、考えを改善することを助けたり、議論を促進したり、一般的にプロセスをできるだけオープンに透明にしようとしています。この一部として、最近、彼は、多くの構成部分から作り上げられる「1 つの Mozilla」だけがあるということについて取り上げた思慮深く、考えが刺激される記事を投稿しました。

- -

「本当にたった 1 つの Mozilla だけがあります。そう、私たちは多くの異なる組織、チーム、コミュニティを持っていて、Foundation チームもその 1 つです。しかし、私の考えでは、私たちはみんな Mozilla であり、同じ包括的な目標に向かって取り組むべきです。」Mark の投稿は、特に、あなたが Mozilla プロジェクト、その目的、その将来についての高いレベルでの議論について興味があるなら、本当に読む価値のあるものです。

- -

Firefox のマルウェア?

- -

Mozilla のセキュリティチームメンバーの一人である Johnathan Nightingale が最近ニュースで報道されたいわゆる「Firefox のマルウェア」について取り上げた記事を投稿しました。「胸くそ悪いことが先週起こりました。誰かが Firefox に感染するマルウェアを作ったのです。私たちはもちろんまったく非常にそれを好いていませんが、いくつかの混乱が生じているので、私は何が起こり、何が起こっていないのかを明らかにしておきたいと思います。」Johnathan はそのマルウェアは何なのか、それは何をするのか、感染している場合に見つける方法、そして、簡単にそれを無効にする方法を説明しています。また、彼はどのようにそしてなぜこのマルウェア攻撃が Firefox がセキュアでないことを意味しないのかも説明しています。さらなる情報と Johnathan の投稿全文は、彼のウェブログを参照してください。

- -

Mozilla のミッションと会計報告

- -

Chris Blizzard が Mitchell Baker が最近投稿した Mozilla の 2007 年の会計報告申告に関する議論を構成することを助ける素晴らしい投稿を書きました。「あなたが活動の最も激しいところ、例えば、出荷、フィードバック、プログラムの作成、実行、そして、毎日人々に話かけることなどにいるなら、ときどき 1 歩引いて、この数年間何が起こってきて、Mozilla がプロジェクトとしてどれだけ成長してきたのかについて真剣に考えることは難しいことです。Mitchell の投稿はプロジェクトがとても健全であることを思い出させてくれるものです。」Chris の投稿全文は彼のウェブログにあります。

- -

Ubiquity 0.1.3 プレビュー版が利用可能に

- -

新しい Mozilla Labs の Ubiquity アドオンのプレビューリリースが利用可能になりました。「現在、私たちは Ubiquity の応答性を改善し、スキンのサポートを追加したリリースである、Ubiquity 0.1.3 に取り組んでいます。このための準備として、私は最初の Ubiquity 0.1.3 Release Candidate をリリースしました。気軽にダウンロードしてください。新しいリリース候補版、および、最後の 0.1.3 リリースにはそれが用意されしだい自動的にアップグレードされます。バグはバグデータベースやメーリングリストに報告可能であり、私たちはそれを歓迎します。」このリリース候補版についてのさらなる情報は、Atul Varma のオリジナルの告知を参照してください。Ubiquity についてのさらなる情報は、輝くほど新しくなった Ubiquity ウェブサイトをチェックしてください。

- -

Firefox がより多くの地域で 50% マーケットシェアを上回る

- -

Firefox が 20% の世界規模マーケットシェアを達成したという興奮するニュースに加えて、Firefox が 50% のマーケットシェアを 2 つの新たな地域、スロベニアとマケドニアで達成したというニュースが飛び込んできました。Ken Kovash は次のように書いています。「とてつもない量の功績が Mozilla コミュニティにもたらされました。John Lilly はこれを最も素晴らしい形で要約しています。『開かれた Web は今までよりも活気があり、世界中の数千人の Mozilla への貢献者たちがそのようなことを実現するために主要な役割を果たしています。」』Blog of Metrics で Ken の投稿全文を読んでください。

- -

Firefox がブラジルでソフトウェアの賞を受賞

- -

Alix Franquet が次のように書いています。「Firefox が Info Magazine によって 2008 年のベストソフトウェアおよびベストブラウザに選ばれました。今年のノミネートおよび賞の完全な一覧は Info ウェブサイトを参照してください。Mozilla は Bruno Magrani、Mario Rinaldi そして、Clauber Stipkovic が代表として賞を受け取りました。」授賞式の写真が閲覧可能で、また、新しい Mozilla Brazil ウェブログで他の Mozilla Brazil のニュースを追うことができます。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081216/index.html b/files/ja/devnews/20081216/index.html deleted file mode 100644 index 342c55a525..0000000000 --- a/files/ja/devnews/20081216/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: >- - about:mozilla - 2010 年までの目標、Thunderbird 3、Labs ミートアップ、アドオンの更新、Foundation - レポート、Impact Mozilla、などなど… -slug: DevNews/20081216 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

 

- -

Thunderbird 3 Beta 1 がダウンロード可能になりました!

- -

Thunderbird 3 Beta 1 がダウンロード可能になりました。このマイルストーンは Thunderbird 3 に実装される予定である新機能とプラットフォームに関する変更のコア機能のテストに焦点を当てています。Thunderbird 3 Beta 1 にはメールを探す新しい方法を素早く構築することを可能にする新しいデータベース技術 が実装されています。さらなる背景と実験的アドオンのプレビューは David Ascher のブログ投稿「Thunderbird 3 beta 1 - a platform for innovation shapes up」を参照してください。

- -

このマイルストーンにはフィードバックを必要とする次の新機能と変更が含まれています。：メールのためのタブインターフェース、より速くメッセージを閲覧するための IMAP に対する改善、改善されたメッセージビュー、新しいアドオンマネージャ、改善されたアドレスブックインターフェース、改善された他のメールクライアントか らのメールのインポート、Windows Vista サーチとの統合、そして、Mac OS X アドレスブックとの統合。

- -

ダウンロードする前に、リリースノートを読んで、既知の問題を含むこのリリースについてのさらなる情報を得てください。テスターは 38 の異なる言語で Windows、Mac OS X、Linux 向けの Thunderbird 3 Beta 1 ビルドをダウンロードすることが出来ます。さらなる情報は、リリース告知全文を参照してください。

- -

今日：2010 年までの目標をテーマにしたブラウンバッグミーティング

- -

Mitchell Baker は かなり長い間 Mozilla コミュニティ内で議論中である Mozilla の 2010 年までの目標の仕上げのプロセスの段階にいます。Mitchell は次のように書いています。「私は数日内に新しいバージョンに更新するために受け取ったフィードバックを整理してまとめるつもりです。私は最終フィードバックのためにブラウンバッグ [プレゼンテーションと議論] ミーティングを 12 月 16 日火曜日太平洋時間の 12:30 (GMT で午後 8:30) に行う予定です。私たちは Air Mozilla で議論をストリーミング配信し、議論を管理するチャットを #brownbag に用意します。私たちは多くの議論を行ってきましたからこのセッションに多くの興味はないかもしれません。かまいません。興味があるならそれもまた素晴らしいです。次のバージョンは、最終版それ自身でないとしても、非常に最終版に近いものになるでしょう。ですから、あなたがまだ表明したことがない考えを持っているなら、できるだけ早く表明してください。」提案されている目標の修正された草稿は、Mitchell の ウェブログに投稿されていて、「Firefox」の目標、「データ」の目標、「モバイル」の目標、そして、「中心」の目標が含まれています。

- -

Mozilla Labs ミートアップ：今週の木曜日にマウンテンビューにて

- -

Mozilla Labs チームが次のように書いています。「今月の月例ミートップの時期です。今月の Labs Night は 12 月 18 日木曜日午後 6 時に Mozilla オフィス（1981 Landings Drive, bldg K in Mountain View, California）で行います。

- -

先月の Seedcamp チームとのミートアップは素晴らしく、出席したすべての方々にはとても感謝しています。今週 - 2008 年の最終ミートアップ！ - は様々な活動中の Labs プロジェクトの進捗更新情報を聞く予定です。その気があるなら、私たちはあなたの意見を聞きたいと思っています。いつものように、十分な議論とハッキングの機会があります。そしてもちろん、ピザも！

- -

ベイアリーナにいるならぜひお会いしましょう！どれくらい期待されているかを知るために出席表明をしてください。感謝します！」

- -

Firefox 3.1 Beta 2 向けにアドオンを更新する方法

- -

Paul Rouget が Firefox Beta 2 向けにアドオンを更新する方法についての素晴らしい投稿を書きました。「多くのアドオンが Beta 2 で上手く動作するはずです。他のものは少しの調整を必要とするでしょう。もしあなたがテストし、あなたの拡張が Firefox 3.1 Beta 2 で動作すると確信したなら、コードを更新する必要はありません。ただ AMO ダッシュボードで互換バージョン (3.1b2) を更新するだけです。コードを更新しなければならないことがわかった場合は、それを行い、install.rdf ファイルを更新し（あなたの拡張のバージョンを上げ、maxVersion を 3.1b2 に更新）、xpi ファイルをアップロードしてください。アドオンの更新の方法が良くわかっていないなら、Paul が懇切丁寧な説明をブログ投稿全文の中で行っています。Mozilla Add-ons ブログでその内容をチェックしてください。

- -

Mozilla Foundation: 12 月分役員会レポート

- -

Mark Surman は Mozilla Foudation の12月分役員会レポートを彼のウェブログに投稿しました。「先月はいろいろなことを試し、計画立てとチーム構成の話題が続きました。教育に関するアイデ アはより具体的になってきています。『社会運動としての Mozilla』についての話し合いが続き、それには、コミュニティワークショップでの（中止された）試みと Mozilla Manifesto に関する新たなエネルギーも含まれていました。私たちは参加と開放性を持った政府を助けるほんの小さな努力に関わっています。教育に関する次の段階の考えがほんの少しだけより具体的になりました。最前線で、Michell が私たちの 990  と会計報告について投稿しています」。来月の優先事項の一覧を含めた詳細は、Mark のウェブログにあります。

- -

ローカライゼーション：QA とテストに関する調査

- -

Mozilla のローカライゼーションドライバチーム（通称:l10n-drivers）がローカライザーが製品リリースにつなげるテスト計画とテストローカライゼーションをどのように作成すれば良いか分析することを支援するための QA とテストに関する調査を始めました。あなたがローカライゼーションチームの一員であったり、何らかの形でローカライゼーションに貢献しているなら、この 「Mozilla L10n QA and Testing 調査」に回答してください。調査は 4 セクション で 20 の質問があり、およそ 10 分間で回答し終わるでしょう。可能な限り正確に注意深く答えてください。

- -

Impact Mozilla: 投票してください！

- -

Ken Kovash が次のように書いています。「Impact Mozilla コンペは最終局面に到達し、勝者を決めるのはあなたの番になりました。懸命な取り組みをして 1 ヶ月、10 人の最終選考者の全員が練られた戦略と完璧なマーケティング計画を持って戻ってきました。」10 のエントリーのすべてを判定するために、impactmozilla.com/vote に行き、十分な時間（約 1 時間）を取って複数の計画を読み注意深く最終選考者のすべてを吟味してください。最も投票されたエントリは Impact Mozilla コンペの勝者になるでしょう。全員に投票権がありますが、一人一票だけです。また、投票締め切りは 12 月 17 日水曜日です。Mozilla は勝者のアイデアを 2009 年の始めに実行する予定です。さらなる情報は、Ken のオリジナル投稿と Imapact Mozilla 最終選考者を紹介している継続中の一連の投稿（Part I、Part II、Part III、および Part IV 以降）を参照してください。

- -

あなたの国の Firefox 調査：第 2 弾

- -

先週 Mozilla マーケティングチームは新しい国の一覧と新しくかつ改善された質問を伴ったあなたの国の Firefox 調査の第 2 弾を始めました。調査は 12 月 26 日まで行われています。今回、チームは次の国々の人々からの回答を望んでいます。：アルゼンチン、ボリビア、チリ、チェコ共和国、フランス、ギリシャ、イスラエル、イタリア、メキシコ、ペルー、ルーマニア、スリランカ、スペイン、オランダ、そして、ベトナム。Firefox を使っているかどうかに関わらず、世界を他の人々に広げることに協力してください。調査へのリンクはすべて同じで、ページは自動的に適切な言語で調査を表示します。誤った言語を表示する場合、右上にあるプルダウンメニューから変更してください。さらなる情報は、Alix Franquet のウェブログ投稿にあります。

- -

about:mozilla - 休暇中の休刊

- -

わたしたちに休暇の時期 がやってきました。つまり、それは about:mozilla の毎年恒例の休暇中の休刊を意味します！12 月の最終週の間はニュースも不足するでしょうから、ニュースレターは 12 月 30 日は発行されないでしょう。同様に 1 月 6 日を休刊するかどうかは保留します。その時点で伝えるべきニュースがあるかどうかしだいです。

- -

私たちは常にこのニュースレターについてのフィードバックを待っています。ですから、何かコメント、質問、改善方法についての考えがあれば、about-mozilla@mozilla.com まで送ってくることを大変歓迎します。お読みいただき、ありがとうございました。良い休日を。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20081223/index.html b/files/ja/devnews/20081223/index.html deleted file mode 100644 index 4ea10680c1..0000000000 --- a/files/ja/devnews/20081223/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: >- - about:mozilla - Fennec、Firefox、Impact - Mozilla、Camino、Firebug、QMO、ビデオ、デザインコミュニティ、などなど… -slug: DevNews/20081223 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mobile Firefox (Fennec) Alpha 2 がリリースされました

- -

Stuart Parmenter が次のように書いています。「私たちは Fennec の 2 番目のアルファリリースを告知できることをとてもうれしく思います。私たちは以前のアルファ版での大部分を私たちが望んだユーザエクスペリエンスを得ることに焦点を当てる一方、私たちはパフォーマンスの改善に焦点を当てることに時間を費やしてきました。私たちは起動パフォーマンス、パンニングおよびズーミングパフォーマンス、そしてページが読み込まれている間の反応を改善するという重要な前進を成し遂げました。私たちは多くの量のフロントエンドコードをリファクタリングした結果、十分に速度が改善し、拡張作者が拡張を作成するためのより良いベースを提供をすることができるようになりました。」

- -

加えて、Fennec チームは Fennec Alpha 1 のときと同様、Windows、OS X、および Linux 向けにダウンロード（日本語版）できるモバイルブラウザのデスクトップバージョンをリリースしました。これらのビルドはコンテンツおよび拡張作者にデスクトップ上でモバイルブラウザ環境を提供します。ブラウザをインストールする方法、新着情報、既知の問題、およびフィードバックを提供する方法が含まれた Fennec Alpha 2 のリリースノートが参照可能です。さらなる情報は Stuart のオリジナル告知で見つけることが出来ます。

- -

Firefox 3.0.5 と 2.0.0.20 が利用可能になりました

- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.5 と Firefox 2.0.0.20 が Windows、Mac、および Linux 向けに利用可能になりました。Mozilla は Firefox 2 向けのさらなるセキュリティおよび安定性アップデートを計画していません。ですから、できるだけ早く Firefox 3 にアップグレードすることを推奨します。加えて、フィッシング詐欺警告サービスは Firefox 2 ユーザはもう利用できません。Firefox 3 には新しく改善された フィッシング詐欺およびマルウェア警告サービスが提供されています。ですから、再度言いますが、Firefox 3 にアップグレードすることを強くお勧めします。GetFirefox.com から Firefox 3 をダウンロードすることができます。

- -

「Fox For All」 が Impact Mozilla の勝者に

- -

Mozilla は「Fox For All」が Impact Mozilla の大賞を勝ち取ったことを発表できることを誇りに思います。「Fox For All」はインドの Phani Kumar Vadrevu と Uttam Byragoni によって作られました。「私たちは 10 の最終選考者全員に大変感謝します。多くの懸命な取り組みと多様なアイデアが期待のすべてをはるかに越えるチームによって提供されました。Impact Mozilla は Mozilla コミュニティの伝統的な一員ではないグループ（例えば、MBA 学生）にまで範囲を広げることに成功しました。」Impact Mozilla の総括についてのさらなる情報は Mozilla Blog にあります。

- -

Camino 1.6.6 がリリースされました

- -

Camino ブラウザチームが様々なセキュリティおよび安定性アップデートを含むメンテナンスリリースである Camino 1.6.6 をリリースしました。Camino ユーザのすべてにアップデートすることを勧めます。加えて、Camino 1.6.6 は次の言語で利用可能です。：カタルーニャ語、チェコ語、オランダ語、英語（米）、フランス語、ドイツ語、イタリア語、日本語、ノルウェー語（ブークモー ル）、ポーランド語、ブラジル・ポルトガル語、ロシア語、スペイン語（カスティーリャ語）、およびスウェーデン語。Camino は CaminoBrowser.org でダウンロードできます。

- -

Fireunit、Firebug 内でのテスト

- -

Jan Odvarko と John Resig は新しい Fireunit と呼ばれる Firebug 拡張に懸命に取り組んでいます。Fireunit はテストを行い、その結果を Firebug の新しいタブの中に表示するためのシンプルな JavaScript API を提供します。Jan は次のように書いています。「この非常に期待できる拡張は Firefox 拡張自動テストフレームワークを意図しており、将来的には Web ページをテストすることにも役立つようになるはずです。まだ始まったばかりですが、Firebug 自身のテストには非常に役立ち始めています。」さらなる情報は、Jan のブログ投稿と John のブログ投稿で読むことができ、この拡張は Fireunit.org からダウンロードできます。

- -

Firefox 3.1b2 以上での Firebug

- -

Rob Campbell が書いたブログ投稿において彼は最近の Firebug と Firefox 3.1 との互換性についてのいくつかの混乱を明確なものにしています。Firebug 1.2.1 だけでなく、Firebug 1.3 も Firefox 3.1 と互換性がないのです。「Firefox 3.1 で Firebug を使いたければ、Firebug 1.4 を使う必要があるでしょう。リリースディレクトリから最新のバージョンを手に入れてインストールしてください。互換性のオーバーライドは必要ありません。アルファバージョンタグを怖がらないでください。それは本当にごくまともなものです。a11 ではパネルの仕様変更に日本語 locale が追いついていないために、日本語 locale だと正常にパネルが表示されないバグがあります。」異なるバージョンについての詳細は GetFirebug.com のリリースページにあります。

- -

Firebug 向け JSON エクスプローラ

- -

もうひとつの最近の Firebug のニュースとして、Jan Odvarko が次のように書いています。「Ashish Datta のおかげで、Firebug はネットレスポンスにおける JSON の分析を新しくサポートしました。この機能は JSON を展開可能な項目のツリーに整形して表示させ、それらを Firebug の DOM タブを用いて探索可能にするものです。表示は Net パネル内で行われ、JSON リクエストが展開されるとすぐに見ることができます。この機能は Firebug 1.4a11 の一部となるはずです。Ashish はタフツ大学の 4 年生であり、彼はこの取り組みを彼のオープンソース開発に焦点を当てた授業の一部として行いました。Firebug 周辺のコミュニティが成長し、この不可欠なツールを提供しようとされている様子が見られることは素晴らしいことです！」さらなる情報は Jan のブログ投稿を参照してください。また、Firebug のさらなる情報については GetFirebug.com で得ることができます。

- -

新しい Mozilla デザインコミュニティメーリングリスト

- -

Mozilla のとても面白いマーケティングチームの一員である、John Slater が次のように書いています。「開発者、ローカライザー、マーケター、QA テスター、などの成功例に続いて、私たちはビジュアルデザインコミュニティを組織し成長させることに大きな力を入れることにしました。私はさらなる詳細をすぐに公開するつもりです。それにはアートワークを投稿し共有するための新しいサイトを作成するための計画が含まれるでしょう。しかし、より多くを知りたいと強く思っているのなら、まずするべきことは新しいデザインメーリングリストへの登録です。」

- -

「もちろん、すでに Mozilla のデザインコミュニティはあります。 — 私たちの Firefox 3 T シャツデザインコンテストに参加してくれた人や Google で Firefox アートを探しただけでも 3500 以上の人たちがいます。 — しかし、できるだけもっと多くの人たちが必要なのです。これは最も素晴らしい利点を上手く利用し、また、たくさんの素晴らしいスタッフを得ることができるだろうまったく新しい方法です。その可能性はものすごく興奮するものです。」さらなる情報は、John の投稿を参照し、メーリングリストに登録してください。

- -

ローカライゼーションのテストと QA に関する調査

- -

の 最近、l10n ドライバチームは テストと ローカライゼーションコミュニティを対象としたテストとQA に関する調査を始めました。調査は 12 月 26 日まで行われています。Stas Malolepszy は次のように書いています。「多くのローカライゼーションチームがテストに関する彼ら自身の習慣と手続きを作り出しました。ですから、Mozilla がローカライゼーションのテスト計画を考え始めたときに、最初にすでに発明され、上手く行くことが証明されたことを検討するのは自然なことです。多くのローカライゼーションチームがあり、各々がローカライゼーションをテストするための彼ら自身の方法を持ち、それは、彼らの要求に適合し、彼らの取り組みと過去の経験の結果から成り立っています。私たちがこれらの習慣を共有し、他のチームがそれらを採用することを助けることができたならどうでしょうか？これは手短に調査の目的を要約したものです。」あなたが Mozilla ローカライゼーションコミュニティの一員で協力したいなら、調査に回答することを強くおすすめします。さらなる情報は、Stas のブログ投稿を参照してください。

- -

インタビュー: Mozilla Weave プロジェクトリーダー

- -

Mozilla Labs の Weave プロジェクトの主任エンジニアである Dan Mills が Aza Rasikin と簡単な語り合いに応じました。このビデオで彼は Weave とは何か、それの良いところ、Firefox モバイルとどう連携するか、ユーザの手に渡るのはいつか、そして、あなたが協力できることは何かということについて話しています。ビデオインタビュー全体を見てください。

- -

品質保証コミュニティサイトがベータ版に

- -

Jay Patel が次のように書いています。「実験、議論、デザイン、開発、そしてテスト…の一年半以上後に、『公式』QMO ベータの開始を告知できることを私は誇りに思います。私たちはチームのメーリングリストと mozillaZine の QA ブログに頼っていましたが、これからは Mozilla QA チームと成長しているボランティアのコミュニティがいっしょに集まって協力すると私は信じているしっかりとしたコミュニティウェブサイトを持つことになります。私たちは Mozilla 製品とサービスのすべての質を改善するためにより良い共同作業をすることができるでしょう。また、QMO は他人が私たちに加わり、より Mozilla QA について知るための場所を提供します。」さらなる情報は、Jay のブログ投稿を参照するか、新しい QMO ウェブサイトに行ってください。

- -

自動プロジェクト作成が Mozdev に導入予定

- -

silfreed が次のように書いています。「長い時間がかかりましたが、プロジェクト作成プロセスのスピードアップをという要求が実現することになりました。過去数年間、新しいプロジェクトを構成するのに二つの重大な悩み事がありました。的確に処理されたことを確かめるためにリクエストを追跡することと、実際にプロジェクトを作成することです。私たちはついに、、その場でプロジェクトのリクエストを追跡することを処理してプロジェクトを作成するためのツールを手に入れました。私たちにはいまだにやるべきいくつかの作業がありますが、これらのことが実現するまであと少しです。」さらなる詳細は silfeed のウェブログにあり、Mozdev サイト自身でプロジェクトをリクエストすることができます。

- -

mozilla.com に新しい Firefox の機能についてのビデオ

- -

Mozilla Blog が次のように報告しています。「私たちは mozilla.com に Firefox の多くの素晴らしい機能のいくつかが活用されるようにすることを支援するための新しいビデオセクションを作りました。機能の紹介に特化しているビデオはそれらを Firefox に実装することに協力した人々によってナレーションが付けられています。新しいビデオセクションは Firefox をインストールする方法の段階的な説明も含まれています。それは人々を乗り換えさせるのに完璧なものです。」現在、ビデオには次のものが含まれています。：Aza Dotzler による Firefox 3 の概要、Firefox に乗り換える方法、Johnathan Nightingale による Firefox 3 のセキュリティ機能、Alex Faaborg による Bookmarks とタグ、Seth Spitzer による Awesomebar（すごいバー）。

- -

2008 年の最終号！

- -

これは 2008 年 の about:mozilla の最終号であるという簡単なリマインダです。私たちは休暇後に通常の週刊スケジュールを再開する予定ですが、1 月 6 日 か 1 月 13 日かは最初の週にどれだけのニュースが報告されるかしだいです。みなさん良い休日を、そして、安全で楽しい新しい年をお迎えください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20090113/index.html b/files/ja/devnews/20090113/index.html deleted file mode 100644 index 2de888c55a..0000000000 --- a/files/ja/devnews/20090113/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 'about:mozilla - 2010 年までの目標最終版、Firebug、アドオン、Labs、Snowl、コミュニティテーマ、Camino、などなど…' -slug: DevNews/20090113 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Mozilla の 2010 年までの目標が最終化

- -

Mitchell Baker は最終版となる、 Mozilla の 2010 年までの目標の統合化されたものを投稿しました。まだ指摘されていない重要な問題があると強く思うなら、まだフィードバックをすることができます。しかし、議論の段階と過程を通した関与を考えれば、これは最終版といえるでしょう。4 つの目標はオープン性、データ、モバイル、そして、Firefox を中心としており、Mitchell のウェブログで一覧の最終版すべてを読むことができます。

- -

Firebug 1.3.0 最終版がリリースされました

- -

Rob Campbell は Firebug 1.3.0 がリリースされ、addons.mozilla.org を通して利用可能になったことを投稿しました。「以前説明したように、このバージョンは Firefox 3.1(Shiretoko)とそれ以降との互換性はありません。Firebug 1.4 alpha が getfirebug.com のリリースディレクトリにあるのでそれを利用してください。注意事項はリリースページにあります。」Firebug 1.3 は Net パネル、Script パネル、デバッグ機能、そして、コンソールの改善を含んでいます。新しい Tracing パネルが Firebug 自身のデバッグのために用意され、チームは新しい FireUnit システムを用いたユニットテストカバレッジに取り組み始めています。更なる情報は、Rob のオリジナルブログ投稿を参照してください。

- -

あなたのアドオンを Firefox 3.1 に更新させるときです

- -

Firefox 3.1 の開発とテストは急速に続いており、Add-ons Blog の優れたメンバーがアドオン開発者は Firefox 3.1 最終リリースのために更新を始めるときだということを投稿しました。「3.1b2 と同様に、アドオンの互換性に影響するような変更は予定されていません。ためらわれないでください！ベータが出る毎により多くの人々が乗り換えます。そして、3.1 との互換性を持たせることはユーザにシームレスなアップグレード体験を保証するでしょう。」役に立つリンクとさらなる情報を含む詳細は、Add-ons ブログの投稿を参照してください。

- -

2008 年 12 月の Labs の更新情報

- -

Mozilla Labs のチームは彼らの 12 月の更新情報を投稿しました。それは最近のイベントをカバーし、アクティブな Mozilla Labs の実験のすべての状況の手短な更新情報を提供しています。含まれているものには、ミシガン大学の Design Jam についての記録、大学への働きかけについてのニュース、そして、最も最近の、進行中のコンセプトシリーズプロジェクトからの「今月のコンセプト」があります。実験の更新情報は Personas、Snowl、Ubiquity、Weave、そして Prism について提供されています。Mozilla Labs ウェブログで更新情報のすべてを読んでください。

- -

Snowl: 新しいリリースとブログ投稿

- -

Myk Melez はメッセージングをブラウザに統合する Mozilla Labs の実験である Snowl の最新リリースについて告知しました。リリース版である Snowl 0.2 は Snowl Central からダウンロードおよびインストールできます。さらに、Myk は Snowl についての 3 つの示唆に富み、先進的なブログ記事を投稿しました。その記事では実験の理念、将来、行き先について論じています。Labs のプロジェクトもしくは Firefox にメッセージングを統合するというアイデアに興味があるなら、これらの投稿はこの最新リリースをテストしながら Snowl プロジェクトについて読み、考え始めるには素晴らしいものです。

- -

Mozilla コミュニティテーマ

- -

Tara Shahian が次のように書いています。「先週ローカライゼーションチームが私たちのコミュニティへより良いリソースを提供するための進行中の努力の一部としてのカスタマイズ可能な Web ツールのセットをデプロイしました。ツールキットにはまったく新しい Mozilla Community Theme ですべてスキニングされたコミュニティウェブサイト、Wiki、ブログ、そして、フォーラムのためのテンプレートが含まれています。これはコミュニティ が Web での存在感をより簡単に確立するのを助けるだけでなく、それを採用することを選んだ異なったコミュニティサイト間を一致したプロフロッショナルな見た目にします。」新しいコミュニティテーマについてのさらなる情報は、Tara のブログ投稿をチェックしてください。

- -

Firefox をダウンロードするときのユーザエクスペリエンス

- -

最 近、Mozilla Metrics のメンバーが、元は Firefox ユーザエクスペリエンスの完全なサイクルをより良く理解するために 2007 年に始まった、Funnelcake プロジェクトを再開しました。11 月版はいくつかの洞察を提供し、それらは彼らのブログで公開されています。「この議論のために、私たちは別の領域に焦点を当てたいと思っています。新しい ユーザがダウンロードボタンを押すまさにその瞬間のエクスペリエンスは何なのでしょうか？最初は一見、これはごく簡単な試みのように思えるかもしれませ ん。しかし、ユーザがそれらのエクスペリエンスにおけるこの瞬間で導かなければならない全く異なった望みがあるのです。」Funnelcake プロジェクトとこの最も最新の分析についてさらに読むには、Blog of Metrics の投稿をチェックしてください。

- -

Camino 2.0 Beta 1 がリリースされました

- -

Camino プロジェクトは懸命に作業に取り組み続け、Camino 2.1 Beta 1 をリリースしました。「Camino 2.0 Beta 1 にはドロッグアンドドロップで並べ替え可能なタブのサポート、サイト毎に「Flash アニメーションをブロック」する機能、タブ一覧、完全なコンテンツズーム、ブラウザウィンドウでのフルキーボードアクセスのより良いサポート、そして、「最近閉じたページ」を含む、いくつかの注目すべき改善が含まれています。Camino 2.0 Beta 1 には人気のあるプラグインのより良いパフォーマンスと Web 標準のサポートの拡大を可能にする、Mozilla の Gecko レンダリングエンジンの 1.9.0 の改善がすべて含まれています。」ダウンロードするには、Camino プレビューサイトを訪れてください。

- -

開発カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

- -

Email ニュースレターを購読するには

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20090120/index.html b/files/ja/devnews/20090120/index.html deleted file mode 100644 index 3ceda650c4..0000000000 --- a/files/ja/devnews/20090120/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: >- - about:mozilla - - アドオンの更新、コミュニティストア、Ubiquity、Personas、Firebug、Fennec、XULRunner、などなど･･･ -slug: DevNews/20090120 -tags: - - DevNews - - 'DevNews:about-mozilla' - - 要更新 ---- -

Add-on developers: time to update for Firefox 3.1

-

Firefox 3.1 development is well under way. Nick Nguyen writes, “3.1 is coming! We know that many add-on developers have held off on testing for 3.1 compatibility because they’re waiting for a near-final release to test against. I’m happy to report that as of Firefox 3.1b2, no changes are planned which should affect add-on compatibility. Don’t hesitate! With each subsequent beta, more people make the switch and having 3.1 compatibility will ensure a seamless upgrade experience for your users.” For more information, see Nick’s original blog post at the Add-ons weblog. The Mozilla Developer Center also has an article about Updating extensions for Firefox 3.1.

-

Mozilla Community Store

-

Tara Shahian writes, “The Community Store garnered a lot of excitement when it launched, and a big part of its success can be attributed to the collection of great designs that were already on display in the gallery.” In addition to the artwork available when the store opened, some fantastic new designs have been added since. Also, if you like the illustration style of a particular artist, simply click on the artist name to view a portfolio of all their submitted work. You can submit your own designs, too — just head over to the Upload Tool to get started.

-

Ubiquity add-on update

-

Mozilla Labs has announced the most recent release of Ubiquity, an experimental add-on that aims to make the Web easier to use through natural language. “We are proud to announce Ubiquity 0.1.5. Since the last major update, Ubiquity has gained a sleeker look and a smarter, more stable core.” Ubiquity can now also be skinned using simple CSS. If you already have Ubiquity, it will automatically update itself, or you can get the latest version at the project site. For more information about this release, see the original Labs blog post.

-

Mozilla Labs’ Personas add-on

-

The Mozilla Labs team has released another video interview, this one about the Mozilla Labs’ Personas experiment. “Mozilla Labs’ Personas — although still in beta — is an extension that adds lightweight theming to your browser, allowing dynamic changes to how your Firefox looks. Suneel Gupta sat down to talk about what it means to have the browser’s look-and-feel reflect our personality, passions, and mood. And he’s looking for feedback.” You can download and try this experimental add-on through GetPersonas.com.

-

Firebug test cases online

-

John J. Barton has blogged that the Firebug test cases are now online. “Often users will have a sequence of Firebug operations that fails for them, but we need a page to try the sequence. Now when a user has a bug report without a test case we can offer some example files for their test procedure.” For more information, see John’s blog post.

-

Testing Fennec

-

The mobile team is getting ready to deliver its first beta of Fennec (aka “Firefox Mobile”) next month, and the Mozilla Quality Assurance community is looking for help with testing this release. “This is exciting news as everybody who has seen Fennec has great things to say about it. If you haven’t had a chance to see Fennec first hand, I encourage you to download it and give it a try (it also works on your desktop). With mobile internet becoming a cornerstone for many of the new devices, there is a much greater need for Fennec. We just recently added Symbian as a supported OS which makes 3 following Maemo and Windows Mobile. The beta we will be delivering next month will be for Maemo only as that is the most stable platform.” There are lots of opportunities if you want to get involved with the Fennec testing project, and more information is available on the QMO weblog.

-

XULRunner releases

-

Mark Finkle recently posted about two XULRunner releases — one official, and one unofficial. “The newest official XULRunner has been released. XULRunner 1.9.0.5 matches the Firefox 3.0.5 release. For XULRunner developers, most of the changes in 1.9.0.5 are related to security fixes. You can also look at the full list of fixed bugs.” The unofficial builds are for XULRunner 1.9.1. “These are unofficial and may not be configured exactly the same as official builds. I was not able to get the Mac Universal build working. If you’re an extension, XUL app or plugin developer, these builds should help you move ahead with your Firefox 3.1 (Mozilla 1.9.1) development.” See Mark’s weblog for more information and comments.

-

Developer calendar

-

For an up-to-date list of the coming week’s Mozilla project meetings and events, please see the Mozilla Community Calendar wiki page.

-

This entry was posted by dria on Tuesday, January 20th, 2009 at 10:17 am and is filed under about-mozilla.

diff --git a/files/ja/devnews/20090310/index.html b/files/ja/devnews/20090310/index.html deleted file mode 100644 index 5acc45e8eb..0000000000 --- a/files/ja/devnews/20090310/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: >- - about:mozilla - - Firefox、セキュリティメトリック、トレードマーク、Shiretoko、ローカライゼーション、プロトタイプ、Ubiquity、Bespin、Weave、などなど… -slug: DevNews/20090310 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox 3.0.7 がリリースされました

- -

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.7 が Windows、Mac、および Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちはすべての Firefox ユーザにこの最新リリースにアップグレードすることを強く推奨します。すでに Firefox 3 を使っているなら、自動更新が通知されるでしょう。もしくは、「ヘルプ」メニューの「ソフトウェアの更新を確認…」を選択することによって更新を手動で適用することもできます。変更点の一覧とさらなる情報は、Firefox 3.0.7 リリースノートを参照してください。

- -

セキュリティメトリックには用心深く

- -

Mozilla のセキュリテイエンジニアリングディレクターである Lucas Adamski が Secunia が最近リリースした 2008 セキュリティレポート（PDF ファイルへのリンク）への反応を投稿しました。「セキュリティメトリックを上手く行うことは非常に難しく、下手に行うことは簡単です。例えば、最近の Secunia 2008 レポートをちょっと見てください。それはブラウザによって報告された脆弱性を分析しようと試みていますが･･･手早く読んだところでは、まるで Firefox のセキュリティ上の問題が IE もしくは Safari の約 4 倍であるかのように見えます。ですが、その結論はひどく間違ったものです。Mozilla は Firefox におけるすべてのセキュリティ上の問題を修正し、それらがどのように発見されたかに関わらず、その内容を公表してリリースしています。内部開発者、QA、もしくは、セキュリティーコントラクターによって報告された問題は公表せず、外部の独立した団体から報告された問題だけを公表する他のベンダーとは違います。ですから、比較するためにこれらの数を提示することは、役に立たないというよりも、むしろ、誤解を招くことです。」Luas の投稿全文と Mozilla およびブラウザセキュリティについてのさらなる情報は、Mozilla Security Blog を参照してください。

- -

Mozilla トレードマークの誤用の報告

- -

David Rolnitzky は次のように報告しています。「Mozilla.com に最近作られた新しいフォームは Mozilla トレードマークの誤用の報告を簡単にします。 Alex と私たち Webdev チームと一緒に Catherine、Harvey、そして、Mozilla 法律チームが誰でも疑問が生じる行動を報告することを簡単に行えるようにするという素晴らしい仕事を成し遂げました。コミュニティが Web を開かれた安全なものに保つことに集中するために、私たちがいっしょに悪いものたちを注意することは本当に重要なことです。ですから、疑わしそうなものを見たときは、このフォームから報告するようにしてください。」

- -

Shiretoko が Firefox 3.1 から Firefox 3.5 に改名

- -

Mike Beltzner が Mozilla DevNews ブログに、現在の開発バージョンである Shiretoko が当初計画されていた Firefox 3.1 ではなく Firefox 3.5 と呼ばれることになる、との投稿をしました。「Shiretoko プロジェクトのバージョンナンバーは予定されている 4 番目の ベータリリースの前にFirefox 3.5 に変更されます。バージョンナンバーを変更するというプロセスには多くの影響があると予想され、そのプロセスは Sam Sidler (irc.mozilla.org では ss) によって調整される予定です。アドオン開発者は addons.mozilla.org でホストされている拡張やテーマにへの影響についての発表を待つべきです。」

- -

Mozilla のローカライゼーションドキュメンテーション

- -

Seth Bindernagel が、私たちのプロセスについて、新しいローカライゼーションの始め方、もしくは、公式ローカライゼーションになるためにするべき必要があることのすべてを 追いかける方法について学びたいと思っているローカライザー向けの情報の要約を投稿しました。「私は過去にこのことについて投稿しましたが、有益な情報で すから、再度投稿します。また、私は旅をしていたときに数人のローカライザーからプロセスはまだ明確ではないと聞きました。そして、私たちは彼らが参加す るようにレビューすべき情報の良いチェックリストを必要としています。」Seth は彼のウェブログで必要とされている情報へのリンク集を提供しています。

- -

新しいタブページのプロトタイプ

- -

Mozilla Labs と Firefox チームが共に新しい「新しいタブページ」デザインのプロトタイプ作りに取り組んでいます。Aza Raskin は一番最近提案されたデザイン候補とプロトタイプを投稿しました。「新しいタブを開く毎に、どこかに行くためにそれを開きます。それは検索をするためのときもあります。新しい URL を打つためのときもあります。選択したアドレスをチェックするためのときもあります。言い切れる唯一のことは、空白のページを開きたいのではないということです。」チームは新しいタブのコンセプトの最終 2 つの段階からのフィードバックを取り入れ、新しいデザインをスケッチしています。それは Mozilla Labs ブログでプロジェクトが達成しようとしていることとその理由について全体的なもっとより多くの情報とともに見ることができます。

- -

Ubiquity ユーザテストについてのニュース

- -

Jono DiCarlo が次のように書いています。「秋の四半期から、HCI の生徒であり Ubiquity 貢献者の Zac Lym が新しいユーザに Ubiquity をテストしてもらうという良い仕事をしています。その研究にはわずかな数のユーザしか参加していませんが、それは重要なものです。なぜなら、それは私たちが Ubiquity で持つ最初で唯一の厳格に得られたユーザビリティデータだからです。調査から得られている主要な検討材料はユーザたちの行動を撮影した一連のビデオです。Zac はこれらのビデオを彼の手法と彼の所見をまとめたものと共に Mozilla Wiki から閲覧可能にしました。これらの所見は Ubiquity のユーザエクスペリエンスの改善に興味がある者にとって大変読む価値があるものです。」Jono のいくつかの所見の解析を含んださらなる情報は、投稿全文を参照してください。

- -

3 月 27 日、パリで Mozilla Labs Cafe

- -

Mozilla Europe が Mozilla Labs Cafe を 3 月 27 日の午後にパリで開催します。「Mozilla Labs Cafe は短時間の、Mozilla 好きの人、技術エヴァンジェリスト、開発者、ギーク、ブロガー、そして、Mozilla Labs および Labs チームが取り組んでいる様々な進行中のプロジェクトすべてについてもっと知りたいと強く思っている人なら誰でも参加できる非公式の集まりです。」日程には Tristan Nitot、Chris Beard、Rey Bango、Pascal Finette による短時間のトークが含まれています。登録が必要ですが、出席料はかかりません。さらなる情報は Labs Cafe ウィキページを参照してください。

- -

Bespin プロジェクトの更新情報

- -

Dion Almaer は Bespin プロジェクトの多数の更新情報を投稿しました。Version 0.1.4 が bespin.mozilla.com へリリースされ、このリリースには dojo への移行、多くのバグの修正、そして、エディタへのいくつかの改善を含む多くの変更点があります。加えて、拡張した点が進み、設定システムがセットアップ の調整をするために用いられるようになりました。このリリースには他の多くの取り組みが含まれており、それらは Dion が Mozilla Labs ブログの彼の投稿でさらに語っています。

- -

Weave M4 開発マイルストーン

- -

Weave 開発リーダーである Dan Mills が Mozilla Labs ブログにプロジェクトについての更新情報を投稿しました。「Weave は Web ブラウザがデータと個人情報を超えるユーザコントロールを増加させながらより良い経験の仲立ちをする機会を探る Mozilla Labs の実験です。M4 開発マイルストーンは Weave クライアントの初期版となる開発者向けリリースであり、テストだけを目的としたもので、今年後半に予定されている次のメジャーアップデートに向けて多数計画された開発マイルストーンの 1 つです。」M4 には Fennec の仮サポート、リデザインされた同期プロトコルおよびサーバアーキテクチャ、クライアント最適化、そして、services.mozilla.com が現在ホストされている新しいハードウェアサーバクラスタが含まれています。チームは常に Weave のテストおよび開発への手助けを求めています。また、さらなる詳細は Dan のブログ投稿にあります。

- -

開発者カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。以前のミーティングからのノートはカレンダーを通して同様にリンクされています。

- -

about:mozilla について

- -

about:mozilla は Mozilla コミュニティによる、Mozilla コミュニティのための、Mozilla コミュニティについてのものであり、Mozilla プロジェクトのすべての方面に関連する主要なニュース項目に焦点を当てています。このニュースレターは Deb Richardson によって書かれ、毎週火曜の朝に発行されます。次の号に含んでもらいたいニュースや告知があるなら、about-mozilla[at]mozilla.com に送ってください。

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20090324/index.html b/files/ja/devnews/20090324/index.html deleted file mode 100644 index 709288425f..0000000000 --- a/files/ja/devnews/20090324/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: >- - about:mozilla - Firefox Mobile、Mozilla - Foundation、AMO、Bespin、ビデオチュートリアル、Labs、メトリック、などなど… -slug: DevNews/20090324 -tags: - - DevNews - - 'DevNews:about-mozilla' ---- -

Firefox Mobile (Fennec) 1.0 Beta 1 がリリースされました

- -

先週、Mozilla は Fennec 1.0 Beta 1 をリリースし、このことについて Stuart Parmenter が彼のウェブログで発表を行っています。「Fennec 1.0 Beta 1 では多くの素晴らしい改善がなされていて、その中で特筆すべきはパフォーマンス周りです。私たちはフロントエンドコードに大量の最適化を行い、プラットフォームに数多くの最適化を行いました。私たちは TraceMonkey を有効化することにより、モバイルに絶大な JavaScript 速度の改善をもたらしました。これは JIT が Firefox 3.1 ベータ版にもたらしたものです。このベータ版での特徴といえるものは、プラグインが利用可能になったことです。そのおかげでお気に入りのサイトでビデオを見ることが出来ます。また、私たちはブックマーク管理の改善の最初の一歩を成し遂げました。」さらなる詳細は、Stuart のオリジナル投稿を参照するか、リリースノートをチェックしてください。

- -

Mozilla Foundation 3 月の更新情報

- -

Mark Surman が最も最近の Mozilla Foundation の更新情報を投稿しました。「2 月の間に、最も進行しており、現在 3 人以上の Foundation チームがいる領域を絞りました。これらは現在 2009 年で最もインパクトを持ち得ると考えている領域です。」ハイライトには Mozilla Education、Mozilla Research、そして、mozilla.org リデザインの初期段階が含まれています。「次の 4 半期に私たちはソーシャルマーケティングに焦点を絞った資金調達、アクセシビリティプログラム、そして、活発に前進している物事の一覧を対象とした Mozilla Research を加えることができることを望んでいます。」Mark の投稿ではいくつかのプログラムの原案の概要、Foundation が取り組んでいる計画、同様に、いくつかのコミュニティと進行中のコミュニケーションイニシアチブが述べられています。

- -

AMO チームにとって忙しい月

- -

addons.mozilla.org (AMO) チームはサイトの新しい拡張と修正に懸命に取り組んでいます。主要な変更のいくつかは次のものです。拡張された開発者ダッシュボード、固定リンクダウンロード、共有サイトへのリンク、そして、編集者の購読システム。また、チームは次についても懸命に考えています。「私たちはアドオンの発見とサポートを助け、同様に、ワークフロー、解析、そして、アドオン開発周辺コミュニティによる開発者の環境向上の拡大をする構想に焦点を絞っています。次の 4 半期には、特別に取り上げられているアドオンとそうでないアドオンの両方を簡単に発見できるエンドユーザエクスペリエンスに対する変化を見るでしょう。」チームはロードマップを公開しており、これらと他に予定されているサイトへの変更についてのさらなる情報はオリジナルブログ投稿を参照してください。

- -

Bespin コミュニティの更新情報

- -

Dion Almaer は Bespin プロジェクトについての更新情報を投稿しました。「立ち上げ後は小康状態かもしれないと思っているかもしれませんが、飛び込んできた素晴らしい貢献者のおかげで逆のことが起こっています。」立ち上げ初期以降に Bespin に加えられた強化のいくつかには、タブのサポート、再利用可能なエディタコンポーネント、Quick Open、構文チェッカー、そして doctype の統合などが含まれています。「さらに多くの予定があります。Joe Walker は Mozilla Labs の ロンドンのイベントでコラボレーションを見せてくれました。VCS は良さそうに見えますし、そして、さらなる機能が活発に開発されています。」Bespin プロジェクトについてのさらなる情報は、Dion の投稿全文を参照してください。

- -

デザインチャレンジのビデオチュートリアル

- -

Mozilla Labs は長い期間、「考えを刺激し、議論を促進し、そして、Firefox、Mozilla プロジェクト、および全体としての Web のための将来のデザインの方向性を引き出すことを目標とする」プロジェクトであるコンセプトシリーズに取り組んでいます。このプロジェクトの一部として最近のデザインチャレンジがあり、その指導的部分として Mozilla プロジェクトのメンバーが集まり、デザインチャレンジのチュートリアルをプレゼンするというものがあります。これらのチュートリアルは記録され、デザインチャレンジのサイトに投稿されています。今のところあるのは、Madhava Enros の「モバイルのためのデザイン」、John Slater の「オープンソースデザイン、Mozilla、そして、あなた」、Jono DiCarlo の「馬鹿げた/すごい拡張開発 Hacks」そして、Myk Melz の「拡張ブートキャンプ：ゼロから Hello World! までを45 分で」です。さらなるプレゼンテーションとファイルがしだいにアップされていくでしょう。ですから、サイトの更新に注目していてください！

- -

マウンテンビューの Labs ミートアップが木曜日に！

- -

Rhian Baker が次のように書いています。「Labs Night、Labsのプロジェクト、あなたのプロジェクト、そして Open Web を議論するための私たちの月に一度のミートアップの時期が再びやってきました。」3 月のミートアップは今週の木曜日、3 月 26 日 午後 6 時にカリフォルニアマウンテンビューの 1981 Landings Drive, bldg K の Mozilla オフィスで開催される予定です。「いつものように、私たちは様々な活発な Labs のプロジェクトの進捗の更新情報を聞き、あなたからも何か聞きたいと思っています！Labs プロジェクトに参加してください。あなた自身のプロジェクトにフィードバックしてください。議論とハッキングのための十分な機会があるでしょう。」

- -

SeaMonkey 1.1.15 がリリースされました

- -

先週 SeaMonkey プロジェクトが自身のオールインワンインターネットスイートの新しいバージョンをリリースしました。SeaMonkey 1.1.15 はいくつかのセキュリティの脆弱性を修正し、以前のバージョンで見つかったいくつかの小さな問題も修正しています。この最新リリースは SeaMonkey のウェブサイト（日本語版はもじら組もじら団のウェブサイト）からダウンロード可能です。

- -

Firefox のマーケットシェアとは何か？についてのメトリック

- -

Mozilla メトリックチームのリーダーである Ken Kovash が Firefox マーケットシェアについて - 報道で多く取り扱われるものおよびデータがどこから来るか - の興味深い記事を書きました。「最近数週間、私たちはブラウザマーケットシェアの 2 つの膨大なソースからメジャーアップデートあるいは新しい立ち上げを見ました。それで、これは、世の中にあるいくつかのソースの高いレベルの概観、それらのサンプルの外見、およびデータを切り刻むための各々の能力を提供するための良い機会ではないかと考えました。」Ken の記事は Gemius、 Net Applications、StatCounter、そして AT Internet Institute (旧 Xiti) についての話に続いています。

- -

Camino の Summer of Code はあなたを必要としています！

- -

Camino プロジェクトはあなたの助けを求めています！「木々と花々が咲き始めました。つまり、Google Summer of Code のために全力を傾ける時期が再びやってきたということです。毎年挑戦しているように、私たちは Camino に焦点を絞った 1 つないし 2 つのプロジェクトを持ちたいと思っています。私たちはいくつかの非常に良い貢献を過去に行い、私たちのコミュニティとオープンソースに普通に参加する生徒 を得るための素晴らしい方法を見つけました。ボールを転がすために、私たちは 私たちの SoC Wiki にいくつかのアイデアと過去のプロジェクトを用意しました。これにより、コミットメントのレベルと承認される仕事量を測ることができます。」参加したいならば何をするべきかを含む、さらなる情報は、Mike Pinkerton の投稿全文を読んでください。

- -

開発者カレンダー

- -

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。以前のミーティングからのノートはカレンダーを通して同様にリンクされています。

- -

about:mozilla について

- -

about:mozilla は Mozilla コミュニティによる、Mozilla コミュニティのための、Mozilla コミュニティについてのものであり、Mozilla プロジェクトのすべての方面に関連する主要なニュース項目に焦点を当てています。このニュースレターは Deb Richardson によってかかれ、毎週火曜の朝に発行されます。次の号に含んでもらいたいニュースや告知があるなら、about-mozilla[at]mozilla.com に送ってください。

- -

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/devnews/20090904/index.html b/files/ja/devnews/20090904/index.html deleted file mode 100644 index 8ab03f270f..0000000000 --- a/files/ja/devnews/20090904/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: プラグインを常に最新に保つための手助け -slug: DevNews/20090904 ---- -

来る Firefox 3.5.3 と Firefox 3.0.14 から、ポピュラーなプラグインである Adobe Flash Player が最新バージョンでない場合、Mozilla はユーザに警告するようになります。古いバージョンのプラグインは、クラッシュやその他の安定性の問題を引き起こしたり、重大なセキュリティリスクとなる可能性があります。今回、私たちが Adobe Flash Player に着目したのは、その人気と、一部研究によって 80% ものユーザが古いバージョンを使っている ことが示されたためです。 Firefox のセキュリティアップデートをインストールすると、古い Adobe Flash Player を使っているユーザには次のようなメッセージが表示されます： 古い Flash への警告

- -

私たちは、ユーザの注意を引くことで、彼らに直接、最新バージョンをダウンロード できる Adobe web サイトへ向かってもらいたいと考えています。 すでに最新バージョンを実行していたり、あるいは Adobe Flash Player をインストールしていないユーザには、通常、Firefox セキュリティアップデートをインストールした後に表示されるメッセージが表示されます：

- -

 

- -

Mozilla は、今後、他のプラグインベンダーとも連携して、同様のチェック機能を提供していきます。ソフトウェアを最新に保つことは、オンライン上で自らを安全に保つ上で最も重要なことの 1 つであり、Mozilla はユーザができるだけ簡単にそうしたプロセスを実行できる方法を探していきます。

diff --git a/files/ja/devnews/index.html b/files/ja/devnews/index.html deleted file mode 100644 index 1578ea6951..0000000000 --- a/files/ja/devnews/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: DevNews 日本語版 -slug: DevNews ---- -

ここは、かつて存在した DevNews （MDN が Kuma に移行するに伴って閉鎖）で提供されていた開発者向けの Mozilla に関するニュースを日本語で提供していたサイトです。

-

ページ名の命名規則は、原文の公開日付（例：20090905。同日に複数の記事がある場合は、2 つ目以降のページ名を 20090905-02などとする）になっています。

-

2009

-

2009/09

- -

2009/03

- -

2009/01

- -

2008

-

2008/12

- -

2008/11

- -

2008/10

- -

2008/09

- -

2008/08

- -

2008/07

- -

2008/06

- -

2008/05

- -

2008/04

- -

2008/03

- -

2008/02

- -

2008/01

- -

2007

-

2007/12

- -

2007/11

- -

2007/09

- -

2007/08

- -

2007/07

- -

2007/06

- -

2007/05

- -

2007/04

- -

2007/03

- -

2007/02

- -

2006

-

2006/12

- -

2006/11

- -

2006/10

- -

2006/08

- -

2006/07

- diff --git a/files/ja/dhtml/index.html b/files/ja/dhtml/index.html deleted file mode 100644 index 836477ad98..0000000000 --- a/files/ja/dhtml/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: DHTML -slug: DHTML -tags: - - CodingScripting - - DHTML - - Glossary - - HTML -translation_of: Glossary/DHTML ---- -

DHTML (Dynamic {{glossary("HTML")}}) は {{Glossary("Adobe Flash","Flash")}} や {{Glossary("Java")}} のようなプラグインを必要としないインタラクティブなウェブページを実行するコードを表します。 DHTML は {{Glossary("HTML")}}、 {{Glossary("CSS")}}、 {{Glossary("DOM")}}、 {{Glossary("JavaScript")}} の機能の組み合わせで実現されています。

- -

詳細情報

- -

一般知識

- - diff --git a/files/ja/dom/about_the_document_object_model/index.html b/files/ja/dom/about_the_document_object_model/index.html deleted file mode 100644 index 736d3074ba..0000000000 --- a/files/ja/dom/about_the_document_object_model/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -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/dom/dispatchevent_example/index.html b/files/ja/dom/dispatchevent_example/index.html deleted file mode 100644 index a544b714ed..0000000000 --- a/files/ja/dom/dispatchevent_example/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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/dom/storage/index.html b/files/ja/dom/storage/index.html deleted file mode 100644 index 72c9a903e3..0000000000 --- a/files/ja/dom/storage/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -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/dom_client_object_cross-reference/index.html b/files/ja/dom_client_object_cross-reference/index.html deleted file mode 100644 index 5bd2ec6ada..0000000000 --- a/files/ja/dom_client_object_cross-reference/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -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/dom_client_object_cross-reference/navigator/index.html b/files/ja/dom_client_object_cross-reference/navigator/index.html deleted file mode 100644 index 141fc19189..0000000000 --- a/files/ja/dom_client_object_cross-reference/navigator/index.html +++ /dev/null @@ -1,620 +0,0 @@ ---- -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/dom_improvements_in_firefox_3/index.html b/files/ja/dom_improvements_in_firefox_3/index.html deleted file mode 100644 index 95a990a367..0000000000 --- a/files/ja/dom_improvements_in_firefox_3/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: DOM improvements in Firefox 3 -slug: DOM_improvements_in_Firefox_3 -tags: - - DOM - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/DOM_improvements ---- -

{{ Fx_minversion_header(3) }} -

Firefox 3 では、特に、他のブラウザによる独自 DOM 拡張 のサポートに関するものを含む、多くの Document Object Model (DOM) 実装が追加されました。この記事は、これらの実装の一覧と詳細なドキュメントへのリンクを提供します。

- -

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

-

参照

- -
-
-{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }} diff --git a/files/ja/dom_inspector/index.html b/files/ja/dom_inspector/index.html deleted file mode 100644 index 24db8f727c..0000000000 --- a/files/ja/dom_inspector/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: DOM Inspector -slug: DOM_Inspector -tags: - - DOM - - 'DOM:Tools' - - DOM_Inspector - - Extensions - - 'Extensions:Tools' - - Themes - - 'Themes:Tools' - - Tools - - Web Development - - 'Web Development:Tools' - - XUL - - 'XUL:Tools' -translation_of: Tools/Add-ons/DOM_Inspector ---- -
{{ToolsSidebar}}

DOM Inspector（別名 DOMi）は、文書（普通はウェブページまたは XUL ウィンドウ）の Document Object Model を調査、ブラウズ、編集することができる開発ツールです。ドキュメントとその中のすべてのノードを様々な視点から見ることができる二分割ウィンドウを用いて DOM の階層を探索することができます。

- -
-

このツールは Firefox や Thunderbird のような XUL ベースのアプリケーションのためのアドオンです。 Firefox の中に組み込まれた DOM インスペクターについては、 Page Inspector のドキュメントをご覧ください。

-
- -

ドキュメンテーション

- -
-
DOM Inspector 入門
-
DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。
-
- -
-
DOM Inspector FAQ
-
DOM Inspector に関するよくある質問への解答です。
-
- -
-
MozillaZine の DOM Inspector ページ (英語)
-
DOM Inspector に関するさらなる情報が載っています。
-
DOM Inspector をビルドするには (英語)
-
ソースファイルから DOM Inspector をビルドするブログの投稿です。
-
- -

DOM Inspector の入手

- -
-
Firefox と Thunderbird
-
DOM Inspector は AMO のウェブサイトからダウンロードしてインストールできます。（AMO を Firefox で閲覧している Thunderbird のユーザーはインストールのリンクを保存するか、 DOM Inspector for Thunderbird のページに移動してください。）
-
- -
-
Thunderbird 2
-
DOM Inspector for Thunderbird 2 が Thunderbird Add-ons から利用できます。または、以下のオプションで自分自身で Thunderbird をビルドしてください。
-
- -
ac_add_options --enable-extensions="default inspector"
-ac_add_options --enable-inspector-apis
-
- -
-
Mozilla Suite と SeaMonkey
-
{{ mediawiki.external('ツール') }} メニューから {{ mediawiki.external('Web 開発') }} > {{ mediawiki.external('DOM Inspector') }} を選択してください。{{ mediawiki.external('編集') }} > {{ mediawiki.external('設定') }} > {{ mediawiki.external('詳細') }} > {{ mediawiki.external('DOM Inspector') }} でサイドバーパネルをインストールすれば、インスペクタパネルを開いたまま Web サイトを訪れるだけで DOM を検査できます。
-
- -

DOM Inspector のバグを報告する

- -

便利なように、Bugzilla の "DOM Inspector" と名付けられたコンポーネントを使用してください。

- -

そこにいる DOM Inspector のコード を知っている人を探すには、 DOM Inspector module listing 参照してください。

diff --git a/files/ja/dom_inspector/internals/index.html b/files/ja/dom_inspector/internals/index.html deleted file mode 100644 index c67e458229..0000000000 --- a/files/ja/dom_inspector/internals/index.html +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: DOM インスペクタの内部構造 -slug: DOM_Inspector/Internals -tags: - - コード - - ソース - - ツール - - 組織 -translation_of: Tools/Add-ons/DOM_Inspector/Internals ---- -
{{ToolsSidebar}}
- -

DOMインスペクタには3つの主要な面があります。 あなたが最も慣れ親しんでいるのは、inspector.xulベースの主UIです。これは、DOM Inspectorが明示的にサポートしているアプリケーション（オーバーレイを介して配置されたメニューアイテム）からCtrl + Shift + I（またはCmd + Shift + I）を押すと表示される2ペインのインスペクタです。

- -

DOM Inspector primary UI inspecting browser.xul

- -

DOMインスペクタのプライマリUIに加えて、若干異なる（オブジェクトインスペクタとSeaMonkeyで使用されるDOMインスペクタのサイドバー）2つのトップレベルのインスペクタがあります。最初に、inspector.xulとそのエントリポイントに焦点を当て、後でこれらの他のインスペクタがどのように異なるかを説明するために焦点を絞ります。

- -

高水準の観点からのDOMインスペクタ

- -

DOMインスペクタのプライマリUIは、いくつかのツールバーとパネルセットで構成されています。パネルセットには2つのパネルが含まれています。 一方のパネルは検査された文書の変更に反応し、他方のパネルは第1パネルの選択の変化に反応する。これらはそれぞれドキュメントパネルとオブジェクトパネルです。（内部的には、パネルは「ペイン」と呼ばれることがありますが、パネルセットは常に「パネルセット」と呼ばれます）。

- -

パネルの目的は利用可能なビューアを管理することです。各パネルの上部には、ビューアリストから表示するビューア、現在アクティブなビューアの名前を表示するラベル、ビューア固有のコマンドを発行するための別のメニューボタンを選択できるメニューボタンが含まれているツールバーがあります 。

- -

ビューアは動的にロードされます。 パネルをあるビューアから別のビューアに切り替えると、古いビューアが破棄され、新しいビューアがその場所にロードされます。このようにして、パネルセットとパネルはフレームセットとフレームのように機能します。各パネルには実際には匿名のbrowserが含まれており、個々のビューアはブラウザに読み込まれた別々のドキュメントに存在するため、この比較は非常に適切です。 この分離により、視聴者はXUL、CSS、またはJSの衝突を心配することなく、ビューアのXULを独自のドキュメントで定義し、独自のスコープでロードすることができます。 これのもう1つの便利な結果は、適切に設定された開発プロファイルを使用すると、現在のビューアから戻って戻るだけで、開発の変更の影響をほとんど見ることができるということです。

- -

ビューアが書かれている方法についてこれを知っているので、私たちはDOMインスペクタのソースがどのように整理されているかを見ることができます。

- -

ソースコードの構成

- -

DOM インスペクタリポジトリの最上位ディレクトリの内容は次のようになります

- - - -

ほとんどすべての興味深いものは resources/content/ にあります。その内容は次のようになります。

- - - -

オーバーレイ

- -

オーバーレイがたくさんあることに気付くでしょう。 いくつかのオーバーレイは、ホスト統合オーバーレイとして記述することも、共有構造オーバーレイとして記述することもできます。

- -

ホスト統合オーバーレイ

- -

DOM Inspectorは汎用の拡張機能であり、Mozillaツールキットホストアプリケーションでの使用に適しています。 しかし、DOM Inspectorをホストアプリケーションで使用するには、メニュー項目やCtrl + Shift + I（またはCmd + Shiftなどの省略可能なキーボードショートカットなど）でDOM Inspectorを起動する方法が必要です + I）。 ホストアプリケーションはこれらの機能を提供する必要があります（通常、DOM Inspectorにはアプリケーションもバンドルされています）。または、DOM Inspectorは、ホスト統合オーバーレイで独自のメニュー項目とキーボードショートカットを提供することによって明示的にサポートする必要があります。

- -

DOM インスペクタは、独自のホスト統合オーバーレイを提供することにより、いくつかのMozillaプロジェクトアプリケーションを明示的にサポートしています。 これらのオーバーレイは次のとおりです。

- - - -

chrome manifest をさらに調べると、DOM インスペクタはそのプライマリウィンドウで条件付きオーバーレイも使用することがわかります。

- -
overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
-overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
-
- -
overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
-
- -

これらのホスト提供のオーバーレイにより、DOM インスペクタはホストアプリケーションと同様のルックアンドフィールを採用することができます。(上記はそれぞれ SeaMonkey と Firefox)

- -

resources/contents/ ディレクトリには、ホスト統合オーバーレイのカテゴリに該当しないオーバーレイがいくつかあります。これは、DOM インスペクタも共有オーバーレイを使用して独自のUIを構築するためです。

- -

共有構造オーバーレイ

- -

DOM インスペクタのメインのUIであるinspector.xulの内容を見てみると、目に見える要素はほとんどないことがわかります。この記事の執筆時点では、空のmenubarと空のtoolbarを含むtoolboxと、空のvboxがあります。

- -
  <toolbox id="tbxInsToolbox">
-    <menubar id="mbrInspectorMain"/>
-    <toolbar id="tbInspectorPrimary"/>
-  </toolbox>
-
-  <vbox id="bxInspectorMain" flex="1"/>
-
- -

ここで定義されているメニュー、ツールバー項目などはありません。key や commandset など、表示されない要素のほとんどは inspector.xul で定義されていません。これらは一連のオーバーレイから取り込まれ、DOMインスペクタの UI を定義する XUL を個別のユニットに編成することができます。inspector.xul 自体は主な DOM インスペクタウィンドウの基本的な構造とレイアウトを説明するスケルトンであり、ほとんどのコンテンツはオーバーレイによって追加されたままになっています。

- -

モジュラーオーバーレイを使用すると、すべてのオーバーレイが複数のコンシューマによって共有されるわけではありませんが、一般的なXULをDOM インスペクタのUIを構成するさまざまなドキュメントで共有することもできます。単一コンシューマオーバレイは、組織専用です。

- -

場合によっては、オーバーレイは他のオーバーレイによってオーバーレイされます。ホスト統合に使用されるオーバーレイを無視して、オーバーレイをオーバーレイするファイルにオーバーレイを子として接続することによって得られるツリー構造を想像すると、特定のファイルのホストに依存しないオーバーレイツリーを視覚化できます。inspector.xul用に拡張されたホストに依存しないオーバーレイツリーがあります：

- - - -

(ビューアのサブディレクトリ (viewers/dom およびviewers/styleRules) からのオーバーレイは、オーバーレイされたファイル内の xul-overlay 処理命令を使用して明示的にインポートされるのではなく、DOM インスペクタのクロムマニフェストで overlay ディレクティブ の結果としてロードされることに注意してください。)

- -
-
inspectorOverlay.xul
-
-

これは、依存関係を含む最上位のインスペクタが必要とするスクリプトをインポートします。 さらに、DOMインスペクタウィンドウの本体、つまり、パネルセット、ドキュメントおよびオブジェクトビューアパネル、およびドキュメントブラウザペインのコンテンツを定義します。 （ブラウザー・ペインは、文書およびオブジェクト・パネルが存在するという意味ではビューアー・パネルではなく、パネル・セットに関して上で定義したパネルの種類であり、ここでは「ペイン」がブラウザー・ペインに関して緩やかな意味で使用されています 一般的なUIフィクスチャについて説明します）。

-
-
toolboxOverlay.xul
-
-

このオーバーレイは、ツールバーのボタン、ロケーションバー、および「Inspect」ボタンを含むインスペクタツールボックスに表示されます。 toolboxOverlay.xulは、メニュー自体の内容を定義することなく、メニューバーの構造も定義します。

-
-
popupOverlay.xul
-
-

このオーバーレイは、メニューバーのメニューの静的構造の大部分を定義していますが、いくつかの例外があります。明らかな理由から、動的メニューの内容はここでは定義されていません。動的メニューには、[ファイル]メニューの[インスペクション]メニュー（[コンテンツドキュメントの検査]および[クロムドキュメントの検査]）ポップアップ、[表示]メニューの[ドキュメントビューア]および[オブジェクトビューア]メニューがあります。そのビューアのポップアップオーバーレイ（resources / content / viewer / dom / popupOverlay.xul）によって、DOMノードビューア（「Blink Selected Element」など）のみに影響を与える「表示」メニューの設定メニューが追加されます。 DOMメニュービューア以外の他のビューアはこれらの機能をサポートしていないので、[編集]メニューの[検索]メニューと[クリックして要素を選択]メニュー項目でも同じことが当てはまります。
-
- 他の編集メニュー項目は、複数のビューアのコンテキストメニューでも使用されます。そのため、ここでは menuitems の ID だけが参照され、 editingOverlay.xul から完全な定義がインポートされます。コンテキストメニューにこれらのメニューアイテムの1つまたは複数を含むビューアは、同じプラクティスに従います。
-
- インスペクタメニューに使用されるツールチップ（文書のタイトル（存在する場合）とそのメニューアイテムのURIを示すために使用されるもの）もここで定義されます。

-
-
commandOverlay.xul
-
外部 command 要素に委譲する popupOverlay.xul で提供されるメニュー項目には、ここで定義されたコマンドがあります。
-
keysetOverlay.xul
-
いくつかの popupOverlay.xul 提供のメニュー項目には、ここで定義された key があります。この記事の執筆時点では、編集メニュー項目に対応するキーはすべて正当な理由でeditingOverlayに存在します。
-
statusbarOverlay.xul
-
これは、DOM インスペクタのステータスバーの内容を定義します。 DOM インスペクタにはステータスバーがありませんので、これはまったく役に立たないものです。
-
diff --git a/files/ja/dom_inspector/introduction_to_dom_inspector/index.html b/files/ja/dom_inspector/introduction_to_dom_inspector/index.html deleted file mode 100644 index 8cbdc19ec0..0000000000 --- a/files/ja/dom_inspector/introduction_to_dom_inspector/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: DOMインスペクタのイントロダクション -slug: DOM_Inspector/Introduction_to_DOM_Inspector -tags: - - DOM インスペクタ -translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector ---- -
{{ToolsSidebar}}
- -

DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の Tools > Web Development メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、DOMの状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。

- -
メモ: Firefox 3以降、FirefoxではデフォルトでDOMインスペクタは含まれていません。MozillaアドオンWebサイトからダウンロードしてインストールする必要があります。
- -

最初にDOM Inspectorを起動すると、Mozillaのメインブラウザのような2つのウィンドウのアプリケーションウィンドウが表示されます。 ブラウザと同様、DOMインスペクタにはアドレスバーと同じメニューがあります。 SeaMonkeyでは、追加のグローバルメニューが利用可能になります。

- -

domi.png

- -

ドキュメントの検査

- -

DOMインスペクタが開くと、ホストアプリケーションに応じて関連付けられたドキュメントが読み込まれる場合と読み込まれない場合があります。 DOM インスペクタが自動的に文書を読み込んでいない場合や、検査したい文書以外の文書を読み込んでいない場合は、目的の文書をいくつか選択することができます。

- -

コンテンツ文書の検査

- -

Inspect Content DocumentのmenupopupはFileメニューからアクセスでき、現在ロードされているコンテンツドキュメントを一覧表示します。 FirefoxとSeaMonkeyブラウザでは、これらはタブで開いたWebページになります。ThunderbirdとSeaMonkey Mail and Newsでは、表示しているメッセージはここに表示されます。domi-inspect-content-popup.png

- -

Chromeドキュメントの検査

- -

Inspect Chromeドキュメントのmenupopupには[ファイル]メニューからアクセスでき、現在ロードされているChromeウィンドウとサブドキュメントのリストが表示されます。ブラウザウィンドウとDOMインスペクタはすでに開いてこのリストに表示されている可能性があります。DOMインスペクタは、開いているすべてのウィンドウを追跡します。そのため、DOMインスペクタで特定のウィンドウのDOMを検査するには、通常通りにそのウィンドウにアクセスし、動的に更新されるmenulistからタイトルを選択します。

- -

domi-inspect-chrome-popup.png

- -

任意のURLの検査

- -

また、FileメニューのURL menuitemのInspectを使用するか、DOM InspectorのアドレスバーにURLを入力してInspectをクリックするかenterを押して、任意のURLのDOMを調べることもできます。 たとえば、アドレスバーにhttp://www.mozilla.orgを入力し、mozilla.orgホームページのDOM構造を確認できます。
-
- このアプローチを使用してクロム文書を検査しないでください。 代わりに、ドキュメントが通常の手段でロードされていることを確認し、検査のためにInspect Chromeドキュメントのmenupopupを使用して選択します。

- -

domi-inspect-chrome-popup.png

- -

この方法でWebページを検査すると、DOM Inspectorウィンドウの下部にあるブラウザペインが開き、Webページが表示されます。 これにより、別のブラウザウィンドウを使用せずに、またはアプリケーションにブラウザをまったく埋め込まなくても、DOMインスペクタを使用することができます。 ブラウザペインに余分なスペースが必要な場合は、ブラウザペインを閉じることができますが、操作の視覚的な影響を監視することはできません。

- -

DOM インスペクタの使用

- -

興味のあるページまたはクロムのドキュメントを開くと、ドキュメントペインにDOMノードビューアがロードされ、オブジェクトペインにDOMノードビューアが読み込まれます。 DOM Nodesビューアには、DOMの構造化された階層的なビューが必要です。 ドキュメントペインをクリックすると、ビューアがリンクされていることがわかります。 DOMノードビューアから新しいノードを選択するたびに、DOMノードビューアが自動的に更新され、そのノードの情報が反映されます。 リンクされたビューアは、DOMインスペクタの使用方法を学ぶときに理解した最初の主要な側面です。

- -

DOM インスペクタビューワー

- -

これらのビューアは、DOMインスペクタが提供する2人の視聴者に過ぎないことに注意してください。他のビューアを使用することは可能ですが、今のところDOMノードビューアとDOMノードビューアの説明に固執します。
-
- DOM InspectorのドキュメントペインにあるDOM Nodesビューアを使用して、興味のあるノードを見つけて調べることができます。これがあなたのウェブとアプリケーションの開発にもたらした最大かつ最も直接的な利点の1つは、ページの興味ある部分またはユーザインターフェースの部分が定義されているマークアップおよびノー​​ドを含む。 DOMインスペクタの一般的な使い方の1つは、ユーザインターフェイスで使用されている特定のアイコンの名前と場所を見つけることです。これは簡単な作業ではありません。クロムドキュメントを調べている場合、DOMノードビューアでノードを選択すると、それらのノードのレンダリングされたバージョンがユーザーインターフェイス自体で強調表示されます。 （DOM Inspector APIのフラッシャーが特定のプラットフォームで正しく機能しないようにするバグがあることに注意してください）。
-
- たとえば、メインブラウザウィンドウを調べて、DOMノードビューアでノードを選択した場合（browser.xulにロードされているスクリプト要素の無限リストの場合のように、表示可能なUIを持たない要素を除く）、ブラウザインターフェイスのさまざまな部分が赤く点滅して強調表示されています。構造をトラバースして、DOMツリーの最上部の部分から、ユーザーが選択した検索エンジンを使用してクエリを実行できるようにする "search-go-button"アイコンなど、下位レベルのノードに移動できます。

- -

domi-edit-search-onclick.png

- -

ここで、「検索 - 移動 - ボタン」ノードのようなノードを選択すると、複数のビューアのいずれかを選択して、そのノードに関する情報をDOM Inspectorアプリケーションウィンドウのオブジェクトペインに表示できます。 menupopupはオブジェクトペインの左上隅からアクセスします。

- -

domi-object-viewers.png

- -

検索の実行アイコンを表示するためにファイルの実際の名前が使用されているかどうかを確認するには、このメニューからCSSルールビューアを選択して、適用されているさまざまなセレクタとルールを確認します。要素に検索アイコンを適用するルールは、クラス単純セレクタを使用し、list-style-imageプロパティを使用して現在のテーマのファイルを指し示します。
-
- ビューアメニューから利用可能なビューアのリストは、DOMインスペクタの検査能力がどれだけ広範囲であるかを示しています。以下の説明は、これらの視聴者の概要を示しています。
-
- DOMノードビューアには、ノードノードの属性、またはテキストノード、コメント、処理命令のテキストコンテンツが表示されます。属性とテキストの内容を編集することもできます。
-
- Box Modelビューアは、配置とサイズを含むXULとHTML要素に関するさまざまな指標を提供します。
-
- XBLバインディングビューアには、要素に添付されたXBLバインディングが一覧表示されます。バインディングが別のバインディングを拡張する場合、バインディングmenulistは、それらを「ルート」バインディングに降順でリストします。
-
- CSSルールビューアには、ノードに適用されるCSSルールが表示されます。また、スタイルシートビューアと組み合わせて使用​​すると、CSSルールビューアには、そのスタイルシートから認識されたすべてのルールが順番にリストされます。プロパティを編集することもできます。擬似要素に適用されるルールは表示されません。
-
- JavaScript Objectビューアは、オブジェクトペインのサブジェクトの階層ツリーを提供します。 JavaScriptオブジェクトビューアでは、コンテキストメニューで適切なメニュー項目を選択することによってJavaScriptを評価することもできます。

- -

DOM ノードビューワーの基本的なアクション

- -

クリックで要素を選択する

- -

DOM インスペクタのもう一つの強力なインタラクティブな機能は、DOM インスペクタを開いてこの機能を有効にしたときに、Edit > Select Element をクリックして選択するか、DOM インスペクタアプリケーションの左上にある小さな虫めがねのアイコンをクリックすると、 ロードされたWebページのどこかをクリックするか、クロム文書を調べると、クリックした要素がDOMノードビューアのドキュメントペインに表示され、オブジェクトペインに表示されます。

- -

DOM内のノードの検索

- -

DOMを検査するもう1つの方法は、ID、クラス、または属性で興味のある特定の要素を検索することです。 Edit > Find Nodes... を選択するか Ctrl + F を押すと、DOM Inspectorには、さまざまな方法で要素を検索できる検索ダイアログが表示され、<F3> ショートカットキーを使用して段階的に検索します。

- -

domi-find-appcontent.png

- -

動的にDOMを更新する

- -

この序論で言及するもう1つの機能は、DOM Inspectorが、Webページ、ユーザーインターフェイス、およびその他の要素についてDOMに反映された情報を動的に更新できることです。 DOM Inspectorが特定のノードまたはサブツリーに関する情報を表示すると、個々のノードとその値が表示されます（DOMでは、属性は通常、要素のサブノードです）。 これらの属性の値を編集できるメニュー項目があるコンテキストメニューと編集メニューから、このリスト内の個々の項目に対してアクションを実行できます。

- -

domi-edit-search-onclick.png

- -

このインタラクティビティを使用すると、ディスク上のファイルに定義されているDOMを実際に変更することなく、要素のサイズを縮小したり、サイズを変更したり、アイコンを変更したり、レイアウトを微調整したりすることができます。

- -

Loving the Inspector

- -

DOM インスペクタは何かを理解することができますが、慣れてくると、Webページやインタフェースのこれらの構造化されたビューは、自分のアプリケーション開発の欠点であったことに気付くかもしれません。DOM インスペクタは、ページに関するすべての情報を明確かつ構造化された方法で提示するだけでなく、それらの構造を見つけて更新する方法を提供し、 Mozilla ブラウザで既に利用可能なショートカットやメニューから簡単にアクセスできます。Venkman (JavaScriptデバッガ) などのMozillaツールと連携して使用されるDOM Inspectorは、WebページやDOMベースのアプリケーションインターフェイスの完全な表示を提供します。

diff --git a/files/ja/dom_inspector_faq/index.html b/files/ja/dom_inspector_faq/index.html deleted file mode 100644 index 1ed0f6d538..0000000000 --- a/files/ja/dom_inspector_faq/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: DOM Inspector FAQ -slug: DOM_Inspector_FAQ -tags: - - DOM_Inspector -translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ ---- -
{{ToolsSidebar}}

Web サイトを調べるには？

- -

Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の {{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('URL を Inspect') }} を選びます。開いている XUL ウィンドウを調べたいのであれば、{{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('ウィンドウを Inspect') }} を選びます。

- -

ドキュメントの DOM ノードビューで一部のノードが赤色表示されるのはなぜ？

- -

これらのノードは 無名コンテントノード であり、元のドキュメントによって生成されて DOM にあるものではないのです。

- -

なるほど。では、これらの無名ノードを表示したくない場合はどうすればいいのでしょう？

- -

{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('無名コンテントを表示') }} からチェックを外せば Inspector の中で無名ノードを隠せます。

- -

元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？ どうして存在して、どうすれば取り除けるのでしょう？

- -

これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は {{ Bug(26179) }} で行われています。

- -

都合の良いことに、{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('ホワイトスペースノードを表示') }} からチェックを外せば、Inspector の中でこれらの ホワイトスペースノード を隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の white-space プロパティの値で制限しているノードが隠されることはありません。

- -

DOM ツリー中の特定のノードを探すのが大変です。ツリー中を探す以外にもっと手早くできる方法はありませんか？

- -

ご心配なく。ノード名、ID、あるいは属性と値の組み合わせで検索できます。検索したいドキュメントを調べている Inspector ウィンドウの {{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('ノードを検索') }} を選んで検索条件を入力すればよいのです。

- -

ノードについて何も分かっていないなら、それをクリックして選択してみることもできます。そのノードをビューの中に表示させておいて、{{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('クリックで要素を選択') }} を選び、それから調べたい要素をクリックするのです。

- -
-

原文書の情報

- -
    -
  • 著者: Christopher Aillon
    • -
  • 最終更新日: November 11, 2003
    • -
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細
    • -
-
- -
 
- -

{{ languages( { "en": "en/DOM_Inspector_FAQ" } ) }}

diff --git a/files/ja/dragdrop/drag_operations/index.html b/files/ja/dragdrop/drag_operations/index.html deleted file mode 100644 index 4739714e52..0000000000 --- a/files/ja/dragdrop/drag_operations/index.html +++ /dev/null @@ -1,350 +0,0 @@ ---- -title: ドラッグ操作 -slug: DragDrop/Drag_Operations -tags: - - Advanced - - Guide - - HTML - - HTML5 - - XUL - - ドラッグ＆ドロップ -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

以下は、ドラッグ＆ドロップ操作が行われる時の各段階についての解説です。

- -

この文書で記述されているドラッグ操作は {{domxref("DataTransfer")}} インターフェイスを使用します。この文書では {{domxref("DataTransferItem")}} インターフェイスや {{domxref("DataTransferItemList")}} インターフェイスは説明しません。

- -

draggable 属性

- -

ウェブページにおいては、既定のドラッグ＆ドロップの挙動が使われる場合がいくつかあります。文字列の選択範囲、画像、リンクなどのドラッグなどがこれにあたります。画像かリンクがドラッグされた時は、画像もしくはリンク先の URL がドラッグデータとして設定され、ドラッグ操作が始まります。その他の要素は、既定のドラッグ操作が行われるためには選択範囲に含まれていなければなりません。実際の様子を確認するには、ウェブページの一部を選択して、その上でマウスのボタンを押下し、そのまま選択範囲をドラッグしてください。ドラッグ中、選択範囲の内容を半透明で描画した物がマウスポインターに伴って表示されるでしょう。ただしこの挙動は、ドラッグされたデータを加工するイベントリスナーが存在しない場合の、既定のドラッグの挙動によるものです。

- -

HTML では、画像、リンク、選択範囲の上での既定の動作を除くと、他の要素は初期状態ではドラッグできません。 XUL では、すべての要素がドラッグ可能です。

- -

上記以外の他の HTML 要素をドラッグできるようにするには、以下の3つの事をしなくてはなりません。

- - - -

以下は、コンテンツの一部がドラッグできるようにする例です。

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
-  この文字列はドラッグが<strong>できます</strong>。
-</div>
-
- -

{{htmlattrxref("draggable")}} 属性を true に設定すると、その要素はドラッグできるようになります。この属性が設定されていない、あるいは false に設定されている場合、その要素をドラッグする事はできず、代わりにテキストが選択されるでしょう。 {{htmlattrxref("draggable")}} 属性は画像やリンクを含めてあらゆる要素に設定できます。ただし、画像とリンクについてだけは初期値がtrueとなっていますので、実際にこれらの要素で使う場合は、要素をドラッグできないようにするために {{htmlattrxref("draggable")}} 属性に false を設定するという場合がほとんどでしょう。

- -

要素がドラッグ可能になった場合、文字列やその要素に含まれている他の要素が、マウスによるクリックやドラッグなどの通常の操作では選択する事ができなくなることに注意してください。ユーザーが文字列を選択するには、通常の操作の代わりに、 Alt キーを押しながらマウスで選択するか、キーボードで操作を行う必要があります。

- -

XUL 要素では、 {{htmlattrxref("draggable")}} 属性を使う必要はありません。全ての XUL 要素はドラッグ可能です。

- -
<button label="ドラッグしてください" ondragstart="event.dataTransfer.setData('text/plain', '「ドラッグしてください」ボタン');">
-
- -

ドラッグ操作の開始

- -

この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性を使って、 {{event("dragstart")}} イベントのためのリスナーが追加されています。

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
-  この文字列はドラッグが<strong>できます</strong>。
-</div>
-
- -

ユーザーがドラッグを開始しようとした時、 {{event("dragstart")}} イベントが発行されます。この例では {{event("dragstart")}} のリスナーは、ドラッグされる要素自身に追加されていますが、他の多くのイベントがそうであるようにドラッグイベントもバブリングしますので、より上位の祖先要素でイベントを監視することもできます。 {{event("dragstart")}} イベントでは、以下で解説している「ドラッグデータ」「フィードバック画像」「ドラッグの種類」を設定することができます。ドラッグデータの指定は必須ですが、多くの状況では、フィードバック画像とドラッグの種類は既定のもので問題ありません。

- -

ドラッグデータ

- -

全ての{{domxref("DragEvent","ドラッグイベント")}}は、ドラッグデータを保持するための {{domxref("DragEvent.dataTransfer","dataTransfer")}} と呼ばれるプロパティを持っています（dataTransfer は {{domxref("DataTransfer")}} オブジェクトの一つです）。

- -

ドラッグが行われた時には、何がドラッグされているのかを識別するデータが、そのドラッグに対して関連付けられなくてはなりません。例えば、テキストボックスの中の選択された文字列がドラッグされた時は、ドラッグに関連付けられたデータは、文字列それ自体となります。同様に、ウェブページの中のリンクがドラッグされた時は、リンク先の URL がドラッグデータとなります。

- -

ドラッグデータは、データの型（データの形式）と、データの値の、2つの情報を含んでいます。データの形式はタイプ文字列（テキストデータを示すtext/plainなどのような）で指定し、データの値は文字列で指定します。ドラッグが開始された時、あなたはデータを型と値の設定で指定するでしょう。ドラッグが行われている間、dragenterおよびdragoverイベントのイベントリスナーにおいて、あなたはデータの型を、ドロップが許可されているかどうかの判定に使うでしょう。具体例としては、リンクのドロップを受け付けるドロップターゲットは、リンクの型である text/uri-list かどうかを確認するでしょう。dropイベントにおいてはリスナーは、この型の情報を元にドラッグされたデータを取得して、ドロップ位置に挿入するでしょう。

- -

型は、 text/plain や image/jpeg などのような、 MIME-type に似た形式の文字列で、独自の型を作ることもできます。広く一般的に使われている型の一覧がドラッグ型のページにあります。

- -

一つのドラッグ操作で、複数の異なる形式のデータを提供できます。この仕組みにより、独自の形式や、その形式のデータを受け取れない要素向けのフォールバック用の形式など、データをより適切な形式で引き渡すことができます。通常、最後のフォールバック先として使われる形式は、 text/plain 型として表される普通のテキストデータです。このデータは元のテキストの単純な文字列となるでしょう。

- -

データを {{domxref("DragEvent.dataTransfer","dataTransfer")}} に設定するには、 {{domxref("DataTransfer.setData","setData()")}} メソッドを使います。このメソッドは、データの型とデータの値の、2つの引数を取ります。例：

- -
event.dataTransfer.setData("text/plain", "ドラッグされたテキスト");
-
- -

この例では、データの値は「ドラッグされたテキスト」で、形式は text/plain です。

- -

データは複数の形式で提供できます。これを実現するには、異なる形式を指定して {{domxref("DataTransfer.setData","setData()")}} メソッドを複数回呼び出します。最も具体的な形式から、具体的でない形式に向けて呼び出します。

- -
var dt = event.dataTransfer;
-dt.setData("application/x-bookmark", bookmarkString);
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-
- -

これは、3つの異なる型のデータを追加する例です。最初の型の「application/x-bookmark」は独自の形式です。他のアプリケーションはこの形式をサポートしていないでしょうが、同じウェブサイトやアプリケーションの中の領域同士でのドラッグでは、このような独自の形式を利用できます。また、他の型でもデータを提供することで、このような独自形式をサポートしていない他のアプリケーション向けにも、代替の形式でドラッグできるようになります。「application/x-bookmark」型はそのアプリケーションの中ではより使いやすく詳細な情報を提供できますが、他の型で渡されるデータは、単純な1つの URL もしくは文字列となります。

- -

なお、この例では text/uri-list も text/plain も同じデータを含んでいます。このようにすることが多いのですが、こうしなければならない訳ではありません。

- -

同じ形式で2回データを登録すると、古いデータは新しいデータによって置き換えられますが、データの形式の登録の順番自体は古いデータを登録した時のままになります。

- -

登録したデータは {{domxref("DataTransfer.clearData","clearData()")}} メソッドによって削除できます。このメソッドは、削除するデータの形式を引数として求めます。

- -
event.dataTransfer.clearData("text/uri-list");
-
- -

{{domxref("DataTransfer.clearData","clearData()")}} メソッドの引数によるデータ形式の指定は省略可能です。データの形式が指定されなかった時は、全ての型のデータが削除されます。ドラッグ開始時にデータが1つも登録されなかった場合、もしくは後の処理で全てのデータが削除された場合、ドラッグ操作は発生しません。

- -

ドラッグフィードバック画像の設定

- -

ドラッグが行われた時、ドラッグ元（dragstartイベントが発行された要素）を元にして OS によって画像が生成され（例えば Windows では半透明の画像になります）、ドラッグしている間マウスポインターに伴って表示されます。この画像は自動的に生成されるため、あなたが用意する必要はありません。しかし、 {{domxref("DataTransfer.setDragImage","setDragImage()")}} によって、独自のドラッグ中のフィードバック画像を指定することができます。

- -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
- -

このメソッドは3つの引数を要求します。第1引数は一般的には画像の要素ですが、 canvas 要素やその他の要素を指定することもできます。フィードバック画像は、その画像が画面上で表示される場合と同じ形・原寸大で生成されます。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} の第2、第3引数は画像を表示するマウスポインターからの相対オフセットです。

- -

文書中に存在しないものをフィードバック画像として使うために、以下の例のようにして、画像や canvas を利用することもできます。

- -
function dragWithCustomImage(event) {
-  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
-  canvas.width = canvas.height = 50;
-
-  var ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
-
-  var dt = event.dataTransfer;
-  dt.setData('text/plain', 'ドラッグされるデータ');
-  dt.setDragImage(canvas, 25, 25);
-}
-
- -

この例では、 canvas の大きさは幅50ピクセル・高さ50ピクセルで、オフセット値はそれぞれの半分の値（各25ピクセル）となっており、画像はマウスポインターの中央に表示されます（マウスポインターが画像の中央に表示されます）。

- -

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

- -

Gecko の開発者（アドオンまたは Mozilla アプリケーションコードのどちらかを開発している人）の場合、 Gecko 9.0 {{geckoRelease("9.0")}} は XUL {{XULElem("panel")}} 要素をドラッグフィードバック画像として使用することの対応を追加します。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} に {{XULElem("panel")}} 要素に渡すだけです。

- -

この XUL {{XULElem("panel")}} を考えてみてください。

- -
<panel id="panel" style="opacity: 0.6">
-  <description id="pb">Drag Me</description>
-</panel>
-
-<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
-  <description>Drag Me</description>
-</vbox>
-
- -

ユーザーが上記の {{XULElem("vbox")}} をクリックしてドラッグを始めると、以下の startDrag() 関数が呼び出されます。

- -
function startDrag(event) {
-  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
-  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
-}
-
- -

これは "<strong>Body</strong>" という文字列が HTML 形式で入った panel をドラッグ画像として使用します。パネルをテキストエディタ―にドロップすると、 "Body" という文字列がテキスト中のドロップした場所に挿入されます。

- -

ドラッグの種類

- -

ドラッグを行う時の操作には、いくつかの種類があります。 copy （コピー）はドラッグされているデータが現在の場所からドロップ先の場所にコピーされることを示します。 move （移動）はドラッグされているデータがドロップ先に移動されることを示し、 link （リンク）はドラッグ元とドロップ先の場所との間に何らかの形での関連付けや繋がりが作られることを示します。

- -

{{event("dragstart")}} イベントのリスナーにおいて、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティに値を設定することで、 ドラッグ元について上記の3つの操作のうちどれが許可されているのかを示すことができます。

- -
event.dataTransfer.effectAllowed = "copy";
-
- -

この例では、コピーのみが許可されています。複数の種類の操作を組み合わせることもできます。

- -
-
none
-
どの操作も許可されていない（ドロップを禁止）。
-
copy
-
コピーのみが許可されている。
-
move
-
移動のみが許可されている。
-
link
-
リンクのみが許可されている。
-
copyMove
-
コピーまたは移動のみが許可されている。
-
copyLink
-
コピーまたはリンクのみが許可されている。
-
linkMove
-
リンクまたは移動のみが許可されている。
-
all
-
コピー、移行、リンクの全ての操作が許可されている。
-
- -

上に列挙されている値のいずれかと全く等しい値だけが利用可能であることに注意してください。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを copyMove に設定すると、コピーや移動の操作を許可しますが、ユーザーがリンク操作を行うことを防ぐことができます。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを変更しない場合、「all」が指定された時と同様に、全ての操作が許可されます。ですので、特定の種類の操作を除外したい場合を除いて、プロパティの値を手動で設定する必要はありません。

- -

ドラッグ操作の間、 {{event("dragenter")}} または {{event("dragover")}} イベントのリスナーは、操作が許可されているかどうかを確かめるために {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを参照できます。これらのイベントにおいて、関連するプロパティである {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティへ、実際に行われる操作の種類1つだけが指定されるべきです。 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値として妥当な物は、none、copy、move、またはlinkのみです。このプロパティへは、複数の操作を組み合わせた値は指定できません。

- -

{{event("dragenter")}} および {{event("dragover")}} イベントにおいて、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはユーザーが要求している操作に初期化されます。ユーザーは操作の種類を修飾キーを押すことにより変更することができます。実際に使用されるキーはプラットフォームごとに異なりますが、大抵の場合は Shift キーと Control キーが、コピー・移動・リンクの各操作の切り替えに使われるでしょう。マウスポインターはどの操作が望まれているのかを示すために、例えばコピーならカーソルの横に「＋」記号が表示される、といった風に変化するでしょう。

- -

{{event("dragenter")}} または {{event("dragover")}} イベントの間に {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値を変更すると、ユーザーが選択した操作の種類を上書きし、特定のドロップ操作を強制することができます。この時に指定できる操作の種類は、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティの値として列挙されている操作に含まれていなくてはならないことに注意してください。それ以外の値を設定した場合は、許可されている操作の中から代わりの値が設定されます。

- -
event.dataTransfer.dropEffect = "copy";
-
- -

この例では、「コピー」が行なわれる効果です。

- -

その場所へのドロップが禁止されていることを示すために、値として none を設定することもできます。

- -

{{event("drop")}} および {{event("dragend")}} イベントの中では、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティをチェックすることで最終的に選択されている効果を特定できます。選択された効果が「move」であれば、 {{event("dragend")}} イベントの中でドラッグ元から元のデータを削除するべきです。

- -

ドロップ先の指定

- -

{{event("dragenter")}} および {{event("dragover")}} イベントのリスナーは、ドラッグされている項目がどの場所にドロップされようとしているのかを正確に示す働きをすることが多いです。ウェブページやアプリケーションのほとんどの領域は、ドロップデータを受け取る場所としては不適切です。従って、これらのイベントに対する既定の動作はドロップを禁止する働きをします。

- -

ドロップを許可したい場合、イベントをキャンセルして既定の動作を無効化する必要があります。属性値として定義されたイベントリスナーで false を返すか、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼ぶことで、既定の動作を無効にできます。別のファイルに分けられたスクリプトで機能を定義する場合は、後者の方が便利でしょう。

- -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
- -

{{event("dragenter")}} および {{event("dragover")}} イベントのどちらにおいても、 {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すと、その場所がドロップ可能な場所であるということを示します。多くの場合は、例えばリンクがドラッグされている時だけなど、特定の状況でのみ {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出したいと思うでしょう。これを実現するには、条件を確かめて、条件が満たされている時だけイベントをキャンセルするような関数を使って下さい。条件が満たされていない時はイベントをキャンセルしないでおけば、ユーザーがマウスのボタンを放してもその場所へのドロップは行われません。

- -

ドロップを受け付けるか拒絶するかを決める最も一般的な方法は、データ転送の仕組みに含まれているドラッグデータの型を判別するものです。例えば、画像やリンク、もしくはその両方のみを受け付けるといった事ができます。これを実現するには、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} （プロパティ）の {{domxref("DataTransfer.types","types")}} プロパティを確認します。 {{domxref("DataTransfer.types","types")}} プロパティはドラッグが開始された時に登録されたタイプ文字列のリストで、最も適切なものから最も適切でないものの順で並んでいます。

- -
function contains(list, value) {
-    for( var i = 0; i < list.length; ++i ) {
-        if(list[i] === value) return true;
-    }
-    return false;
-}
-
-function doDragOver(event) {
-  var isLink = contains( event.dataTransfer.types, "text/uri-list");
-  if (isLink) {
-    event.preventDefault();
-  }
-}
- -

この例では、型のリストの中に text/uri-list 型があるかどうかを確認するために contains メソッドを使用しています。もし条件が真であれば、イベントはキャンセルされて、ドロップが許可されるでしょう。もしドラッグデータがリンクを含んでいなければ、イベントはキャンセルされず、その場所でのドロップも行われません。

- -

実際に行われる処理の種類をより適切に示すために、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} や {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティのいずれか、あるいはその両方に値を指定したいと思う事もあるでしょう。当然ですが、イベントをキャンセルするのを忘れると、これらのプロパティの値を変えても何も起こりません。

- -

DataTransfer.types の更新

- -

なお、最新の仕様書では {{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく {{domxref("DOMString")}} の凍結した配列を返すべきだとしています（Firefox 52 以降で対応されました）。

- -

結果として、 contains メソッドはこのプロパティでは動作しなくなりました。特定の種類のデータが提供されているかをチェックするためには、代わりに includes メソッドを使用してください。以下のようなコードを使用します。

- -
if ([...event.dataTransfer.types].includes('text/html')) {
-  // Do something
-}
- -

types がどちらのメソッドに対応しているかを判別する機能を使用すれば、適切なコードを実行できます。

- -

ドロップのフィードバック

- -

その場所へのドロップが許可されていることをユーザーに示す方法はいくつかあります。マウスポインターは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値に応じて適切なものに変化します。実際の正確な表示のされ方はユーザーのプラットフォームに依存しますが、通常は例えば「コピー」に対しては「＋」記号が表示され、また、ドロップが許可されていない時は「ここにはドロップできません」という意味のアイコンが表示されるでしょう。多くの場合において、このポインターによるフィードバックは十分に役立ちます。

- -

それ以外にも必要に応じて、ユーザーインターフェースを更新して挿入箇所を示したりハイライト表示したりすることもできます。単にハイライト表示するだけであれば、ドロップ対象においてCSSの-moz-drag-over疑似クラスが利用できます。

- -
.droparea:-moz-drag-over {
-  border: 1px solid black;
-}
-
- -

この例においてdropareaクラスの要素は、 {{event("dragenter")}} イベントの中で {{domxref("Event.preventDefault","preventDefault()")}} メソッドが呼ばれて有効なドロップ対象となっている間、1ピクセルの黒い枠が表示されます。この疑似クラスは {{event("dragover")}} イベントでの状態の変化には反応しませんので、この疑似クラスでの指定を適用させるには {{event("dragenter")}} イベントをキャンセルしなくてはならない事に注意してください。

- -

より凝った視覚効果のために、例えばドロップが行われる位置に要素を挿入するなど、 {{event("dragenter")}} イベントの間に他の操作をすることもできます。この例なら、挿入される要素は、挿入箇所を示すマーカーあるいはドラッグされている要素が新しい位置に挿入された時の状態のプレビューなどとして利用できるでしょう。このような効果は、例えば image や separator を生成して、 {{event("dragenter")}} イベントの処理中にドキュメント中に単に挿入するだけで実現できます。

- -

{{event("dragover")}} イベントは、マウスポインターが現在指している要素において発行されます。挿入点のマーカーを {{event("dragover")}} イベントの発行に応じて移動させたいと思うのは自然な欲求でしょう。そのような場合には、他のマウスイベントでマウスポインターの位置を取得するために使われるのと同じ要領で、イベントの {{domxref("MouseEvent.clientX","clientX")}} と {{domxref("MouseEvent.clientY","clientY")}} プロパティを利用できます。

- -

最後に、ドラッグ中にマウスポインターが要素の上を離れる時、 {{event("dragleave")}} イベントが発行されます。これは挿入点のマーカーやハイライト表示を消すのにちょうどいいタイミングです。このイベントをキャンセルする必要はありません。 -moz-drag-over 疑似クラスを使って指定されたハイライト表示やその他の視覚効果は、すべて自動的に消去されます。 {{event("dragleave")}} イベントは、ドラッグがキャンセルされた時でも常に発行されますので、このイベントによって、挿入点の消去などを確実に行うことができます。

- -

ドロップの実行

- -

ユーザーがマウスのボタンを放した時、ドラッグ＆ドロップの操作は終了します。有効なドロップ対象となっている要素の上でマウスのボタンが放された場合、最後の {{event("dragenter")}} と {{event("dragover")}} イベントはキャンセルされて、ドロップが成功し、 {{event("drop")}} イベントがそのドロップ対象において発行されます。それ以外の場所でボタンが放された場合は、ドラッグ操作はキャンセルされ、 {{event("drop")}} イベントは発行されません。

- -

{{event("drop")}} イベントの間、あなたはドロップされたデータをイベントから取得して、ドロップ位置に挿入することになります。どのドラッグ＆ドロップ操作が望まれていたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティで判別することができます。

- -

すべてのドラッグ＆ドロップ関連のイベントにおいて、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティはドラッグされた対象に関するデータを保持しています。データの取得には {{domxref("DataTransfer.getData","getData()")}} メソッドを利用することになるでしょう。

- -
function onDrop(event) {
-  var data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-
- -

{{domxref("DataTransfer.getData","getData()")}} メソッドは、取得したいデータの型を引数として取ります。実行すると、ドラッグ操作の開始時に {{domxref("DataTransfer.setData","setData()")}} メソッドによって登録された値が文字列として返されます。その型に対するデータが存在しない場合は、空文字が返されます。当然ながら、直前の {{event("dragover")}} イベントでの処理においてチェックした時と同様に、あなたはデータの正しい形式が利用可能かどうかを知りたいと思うでしょう。

- -

上記の例では、まずデータを取得し、ドロップ対象の内容テキストとしてそれを挿入しています。これは p 要素や div 要素がドロップ対象の領域として使われる事を想定しており、ドラッグされたテキストをドロップ位置に挿入するという効果をもたらします。

- -

ウェブページにおいては、ドロップを受け付けた場合、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すべきです。これによって、ブラウザ内でのドロップ時の既定の挙動がキャンセルされます。例えば、リンクがウェブページにドロップされた場合、 Firefox はそのリンク先を読み込もうとします。イベントをキャンセルすることで、この動作は抑止されます。

- -

他の形式でデータを取得することもできます。データがリンクであった場合、そのデータは text/uri-list 型でも提供されているでしょう。その場合、リンクを内容に挿入することができます。

- -
function doDrop(event) {
-  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
-  for (let line of lines) {
-    if (line.startsWith("#"))
-      continue;
-
-    let link = document.createElement("a");
-    link.href = line;
-    link.textContent = line;
-    event.target.appendChild(link);
-  }
-  event.preventDefault();
-}
-
- -

この例は、ドラッグされたデータからリンクを挿入します。名前から想像できる通り、 text/uri-list 型は実際に複数のURLの改行区切りのリストを含んでいる場合があります。このコードでは、 split を使って文字列を行ごとに分割し、各行に繰り返し処理を行って、それぞれをリンクとして文書中に挿入しています。ナンバー記号（#）で始まる物はコメントとして除外していることに注意してください。

- -

単純な使い方として、リストの中の最初の有効なURLを取得するために、特別な型 URL も利用できます。例：

- -
var link = event.dataTransfer.getData("URL");
-
- -

これによって、コメントの除外などの処理は一切不要になります。しかし、これはリストの中の最初の URL だけしか取得できないという制限があります。

- -

URL 型は特別な省略表記用の型で、 {{domxref("DataTransfer.types","types")}} プロパティで取得できる型のリストには列挙されません。

- -

時には、複数の形式をサポートして、そのうち最も適切な形式で提供されたデータを取得したいと思う事もあるでしょう。以下の例では、3つの形式がドロップ対象によってサポートされています。

- -

以下の例は、提供されたデータの中で最も適切なデータを返す例です。

- -
function doDrop(event) {
-  var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  types = supportedTypes.filter((value) => types.includes(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
-  event.preventDefault();
-}
-
- -

この例は Firefox 3 で利用可能な JavaScript の拡張された機能を使って書かれていますが、他の環境でも動作する様に書き換えることもできます。

- -

ドラッグの終了

- -

1回のドラッグ操作が終了すると、 {{event("dragend")}} イベントがドラッグ元（ {{event("dragstart")}} イベントが発行されるのと同じ要素）において発行されます。このイベントは、ドラッグ操作が成功したかキャンセルされたかに関わらず発行されます。どの操作が行われたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティを参照して知ることができます。

- -

{{event("dragend")}} イベントにおいて {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値がnoneである場合、ドラッグ操作がキャンセルされたことを意味します。それ以外の場合は、プロパティの値は実際に行われた操作の種類を示します。ドラッグ元はこの情報に基づいて、ドラッグされた項目を「移動」の操作の後に元の場所から削除することができます。 {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} プロパティの値は、ユーザーが（Escapeキーを押すなどして）ドラッグ操作をキャンセルした場合は true となり、不正なドロップ先だった場合などの他の理由でドラッグ操作がキャンセルされた場合や、ドロップに成功した場合はfalseとなります。

- -

ドロップ操作は同じウィンドウの中または他のアプリケーションの上で行われ得ます。いずれの場合も常に {{event("dragend")}} イベントは発行されます。このイベントの {{domxref("MouseEvent.screenX","screenX")}} および {{domxref("MouseEvent.screenY","screenY")}} プロパティの値には、ドロップが行われたときの画面上での座標が設定されます。

- -

{{event("dragend")}} イベントの伝搬が終了した後、ドラッグ＆ドロップの操作は完了します。

- -

[1] Gecko では、元のノードがドラッグ中（例えばドロップ中や {{event("dragover")}}）に移動したり削除されたりした場合、 {{event("dragend")}} が発行されません。 bug 460801

- -

関連情報

- - diff --git a/files/ja/dragdrop/dragging_and_dropping_multiple_items/index.html b/files/ja/dragdrop/dragging_and_dropping_multiple_items/index.html deleted file mode 100644 index aadaeb095d..0000000000 --- a/files/ja/dragdrop/dragging_and_dropping_multiple_items/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 複数の項目のドラッグ＆ドロップ -slug: DragDrop/Dragging_and_Dropping_Multiple_Items -translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items ---- -

{{ Fx_minversion_header(3.5) }} Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能はtypesプロパティやgetData、setData、clearDataの各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。

-

mozSetDataAtを使うと、dragstartイベントで複数の項目を登録することができます。これはsetDataメソッドとよく似た働きをします。

-
var dt = event.dataTransfer;
-dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0);
-dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1);
-
-

この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、setDataメソッドを呼んだのと等しく扱われます。

-

mozClearDataAtメソッドを使って、指定した項目を削除することもできます。

-
event.dataTransfer.mozClearDataAt("text/plain", 1);
-
-

あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、

-
var dt = event.dataTransfer;
-dt.mozSetDataAt("text/uri-list", "URL1", 0);
-dt.mozSetDataAt("text/plain",    "URL1", 0);
-dt.mozSetDataAt("text/uri-list", "URL2", 1);
-dt.mozSetDataAt("text/plain",    "URL2", 1);
-dt.mozSetDataAt("text/uri-list", "URL3", 2);
-dt.mozSetDataAt("text/plain",    "URL3", 2);
-// [item1] data=URL1, index=0
-// [item2] data=URL2, index=1
-// [item3] data=URL3, index=2
-
-

このように2つの形式で提供されたデータを持つ3つの項目を登録した後で、

-
dt.mozClearDataAt("text/uri-list", 1);
-dt.mozClearDataAt("text/plain", 1);
-
-

このように2番目の項目についてすべての形式のデータを削除すると、3番目だった項目が繰り上がって2番目の項目になり、インデックスが2から1に変わります。

-
// [item1] data=URL1, index=0
-// [item2] data=URL3, index=1
-
-

幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。

-

複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。

-

複数のファイルがドラッグされているかどうかを確認するには、mozItemCountプロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、effectAllowedプロパティにnoneを指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。

-

ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様にgetDataを使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。

-

それに対して、任意のインデックスの項目をデータトランスファーから取得するにはmozGetDataAtメソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。

-
function onDrop(event)
-{
-  var files = [];
-  var dt = event.dataTransfer;
-  for (var i = 0; i < dt.mozItemCount; i++)
-    files.push(dt.mozGetDataAt("application/x-moz-file", i));
-}
-
-

mozTypesAtメソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。typesプロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。typesプロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。

-
var types = event.dataTransfer.mozTypesAt(1);
-
-

文字列でないデータのドラッグ

-

上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルはapplication/x-moz-file型でnsIFileのオブジェクトとして保持されてドラッグされます。setDataメソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりにmozSetDataAtメソッドを使わなくてはなりません。

-
dt.mozSetDataAt("application/x-moz-file", file, 0);
-
-

複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。

-

同様に、ファイルやその他のオブジェクトを取得するにはmozGetDataAtメソッドを使う必要があります。もしgetDataを使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合はgetDataを使っても問題ありません。

-

複数項目のドロップの例

-

以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。

-
<html>
-<head>
-<script>
-
-function dodrop(event)
-{
-  var dt = event.dataTransfer;
-  var count = dt.mozItemCount;
-  output("Items: " + count + "\n");
-
-  for (var i = 0; i < count; i++) {
-    output(" Item " + i + ":\n");
-    var types = dt.mozTypesAt(i);
-    for (var t = 0; t < types.length; t++) {
-      output("  " + types[t] + ": ");
-      try {
-        var data = dt.mozGetDataAt(types[t], i);
-        output("(" + (typeof data) + ") : <" + data + " >\n");
-      } catch (ex) {
-        output("<<error>>\n");
-        dump(ex);
-      }
-    }
-  }
-}
-
-function output(text)
-{
-  document.getElementById("output").textContent += text;
-  dump(text);
-}
-
-</script>
-</head>
-<body>
-
-<div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;"
-     ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
-     ondragover="event.stopPropagation(); event.preventDefault();"
-     ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);">
-<div>
-
-</body>
-</html>
-
-

この例は、preventDefaultメソッドによってdragenterイベントとdragoverイベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。

-

項目をドロップした時に、dodrop関数が呼ばれます。この関数はmozItemCountプロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るためにmozTypesAtメソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。

-

この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。

-

{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}

diff --git a/files/ja/dragdrop/index.html b/files/ja/dragdrop/index.html deleted file mode 100644 index 6b9a4be242..0000000000 --- a/files/ja/dragdrop/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: DragDrop -slug: DragDrop ---- -

 

- -

This page was auto-generated because a user created a sub-page to this page.

- -

 

diff --git a/files/ja/dragdrop/recommended_drag_types/index.html b/files/ja/dragdrop/recommended_drag_types/index.html deleted file mode 100644 index eb8487d158..0000000000 --- a/files/ja/dragdrop/recommended_drag_types/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: 推奨されるドラッグのデータ型 -slug: DragDrop/Recommended_Drag_Types -tags: - - Guide - - drag and drop -translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

HTML Drag and Drop API は、プレーンテキスト、URL、HTML コード、ファイルなど、さまざまな形式のデータのドラッグをサポートしています。このドキュメントでは、一般的なドラッグ可能なデータ形式のベストプラクティスについて説明しています。

- -
-

注意事項:
- mozSetDataAt() のような moz プレフィックスを持つこのドキュメントのすべてのメソッドとプロパティは、Gecko ベースのブラウザでのみ動作します。

-
- -

テキストのドラッグ

- -

テキストをドラッグする時は、text/plain 型を使用します。2番目の引数には、ドラッグした文字列を指定します。例えば、以下のようになります。

- -
event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです");
-
- -

Web ページのテキストボックスや選択範囲の文字列のドラッグは、ブラウザが自動的に処理を行うので、自分で処理する必要はありません。

- -

そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常に text/plain 型のデータを提供することをおすすめします。そのために、データを追加する時には最後に text/plain 型のデータを登録しておいてください。

- -

注: 古いコードにおいて、text/unicode や text といった型の記述を見かけることがあるかもしれません。これらはどちらも text/plain と等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。

- - - -

ドラッグされたハイパーリンクには、text/uri-list と text/plain の2種類のデータを含める必要があります。どちらの形式もリンクの URL をデータに使用しなければなりません。例えば、以下のようになります。

- -
var dt = event.dataTransfer;
-dt.setData("text/uri-list", "https://www.mozilla.org");
-dt.setData("text/plain", "https://www.mozilla.org");
-
- -

text/uri-list 型のフォールバックとして、text/plain 型を最後に設定します。

- -

注:URL 用の型は uri-list-list で、L ではなく I であることに注意してください。

- -

複数のリンクをドラッグするには、それぞれのリンクを text/uri-list データ内で CRLF 改行で区切ってください。ナンバー記号 (#) で始まる行はコメントで、有効な URL として扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます

- -
-

複数のリンクのための text/plain 型のフォールバックは、すべての URL を含むべきですが、コメントを含めるべきではありません。

-
- -

例えば、以下のサンプル text/uri-list データには、2つのリンクと1つのコメントが含まれています。

- -
http://www.mozilla.org
-#2つ目のリンク
-http://www.example.com
-
- -

ドロップされたリンクを取得する時は、コメントを含めて複数のリンクをドラッグした場合の処理を確実に行ってください。便宜上、text/uri-list 型のデータ内の最初の有効なリンクを参照するために、特別な型として URL を使用することができます。

- -
-

URL 型でデータを追加しないでください - それを行うと、代わりに text/uri-list 型のデータとして登録されます。

-
- -
var url = event.dataTransfer.getData("URL");
-
- -

Mozilla 特有の型として、text/x-moz-url 型のデータを見かけることがあるかもしれません。この型が表示される場合は、text/uri-list 型の前に表示されるはずです。この型のデータは、リンクの URL に続いてリンクのタイトルが保持されており。例えば、以下のようになります。

- -
http://www.mozilla.org
-Mozilla
-http://www.example.com
-Example
-
- -

HTMLとXMLのドラッグ

- -

HTML の内容は text/html 型を使用します。この型のデータはドラッグされる HTML をシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素の {{domxref("Element.innerHTML","innerHTML")}} プロパティの値です。

- -

XML の内容は text/xml 型を使用することができますが、内容は整形式の XML に変換しておくべきです。

- -

また、text/plain 型を使用して、HTML または XML のプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。例えば、以下のようになります。

- -
var dt = event.dataTransfer;
-dt.setData("text/html", "こんにちは、<strong>見知らぬ人</strong>");
-dt.setData("text/plain", "こんにちは、見知らぬ人");
-
- -

ファイルのドラッグ

- -

ローカルのファイルは application/x-moz-file 型で、 nsIFile のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。

- -

ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。

- -
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
-
- -

可能であれば、text/uri-list 型と text/plain 型の両方を使ってファイルの URL を含めてください。これらの型は最後に登録されるべきで、それによって、 application/x-moz-file 型は優先度の高い、より適切な型となります。

- -

複数のファイルは、データ転送中に複数のアイテムとしてドロップ中に受信されます。これについての詳細は、複数の項目のドラッグ＆ドロップを参照してください。

- -

以下の例は、ドロップしたファイルを受信するための領域を作成する方法を示しています。

- -
<listbox ondragenter="return checkDrag(event)"
-         ondragover="return checkDrag(event)"
-         ondrop="doDrop(event)"/>
-
-<script>
-function checkDrag(event) {
-  return event.dataTransfer.types.contains("application/x-moz-file");
-}
-
-function doDrop(event) {
-  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
-  if (file instanceof Components.interfaces.nsIFile) {
-    event.currentTarget.appendItem(file.leafName);
-  }
-}
-</script>
-
- -

この例では、データ転送に application/x-moz-file 型が含まれている場合にのみ、イベントが false を返します。ドロップイベントの間、ファイル型に関連付けられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、nsISupports を返すので、nsIFile 型に変換するために、ここでは instanceof 演算子を使用していることに注意してください。これは、誤ってファイルではない型のデータを登録した場合のためのチェックとしても有効です。

- -

DataTransfer.types の更新

- -

最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。

- -

その結果、contains メソッドはもう機能しません。代わりに includes メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。

- -
if ([...event.dataTransfer.types].includes('text/html')) {
-  // 実行するコード
-}
- -

特徴検出を使用して、どのメソッドがサポートされている型なのかを判断し、適切なコードを実行することができます。

- -

画像のドラッグ

- -

画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に text/uri-list 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は データ URL である必要があります。

- -

リンクと同様に、text/plain 型のデータには URL も含まれている必要があります。しかし、データ URL は通常のテキストの内容には有用ではないので、このような状況では text/plain 型のデータを除外した方がよいでしょう。

- -

Chrome などの特権的なコードでは、画像の種類に応じて、image/jpeg、image/png、image/gif のいずれかの形式を使用することもできます。データは、nsIInputStream インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。

- -

画像がディスク上にある場合は、application/x-moz-file 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。

- -

最も適切なデータ形式からそうでない形式まで、正しい順序でデータを登録することが重要です。最初に image/jpeg のような標準的な画像型を設定し、次に application/x-moz-file 型を設定します。次に、text/uri-list 型を設定し、最後に text/plain 型を設定します。例えば、以下のようになります。

- -
var dt = event.dataTransfer;
-dt.mozSetDataAt("image/png", stream, 0);
-dt.mozSetDataAt("application/x-moz-file", file, 0);
-dt.setData("text/uri-list", imageurl);
-dt.setData("text/plain", imageurl);
-
- -

{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、テキスト以外のデータに使用されることに注意してください。内容によっては、これらの型の一部しか含まれていない場合があるので、ドロップされた画像を受信する時には、どの型が利用可能になっているかを確認することが重要です。

- -

ノードのドラッグ

- -

ドキュメント内のノードや要素は、application/x-moz-node 型を使ってドラッグすることができます。型のデータは DOM ノードでなければなりません。これにより、ドロップ対象はドラッグが開始された実際のノードを受け取ることができます。ノードがドロップされていても、異なるドメインからの呼び出し元はそのノードにアクセスできないことに注意してください。

- -

ノードの内容は常に text/plain 型の代替文字列で提供するべきです。

- -

独自データのドラッグ

- -

独自の目的のために、他の型を使うこともできます。そのデータが特定のサイトやアプリケーションに固有のものでない限り、常に text/plain 型の代替文字列を含めるようにしてください。代替テキストを用意しなかった場合は、他の場所にドロップできなくなります。

- -

OS のフォルダにファイルをドラッグ

- -

既存のドラッグイベントセッションにファイルを追加したり、コードが対象フォルダーの場所の通知を受信したときに、オペレーティングシステム内のフォルダーに対してのドロップ操作だった場合、ファイルをディスクに書き出したい場合があります。これは拡張機能（またはその他の特権コード）でのみ動作し、application/moz-file-promise 型を使用する必要があります。次のサンプルでは、この高度なケースの概要を説明します。

- -
// currentEvent is an existing drag operation event
-
-currentEvent.dataTransfer.setData("text/x-moz-url", URL);
-currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
-currentEvent.dataTransfer.setData("application/x-moz-file-promise-dest-filename", leafName);
-currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
-                  new dataProvider(success,error),
-                  0, Components.interfaces.nsISupports);
-
-function dataProvider(){}
-
-dataProvider.prototype = {
-  QueryInterface : function(iid) {
-    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
-                  || iid.equals(Components.interfaces.nsISupports))
-      return this;
-    throw Components.results.NS_NOINTERFACE;
-  },
-  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
-    if (aFlavor == 'application/x-moz-file-promise') {
-
-       var urlPrimitive = {};
-       var dataSize = {};
-
-       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
-       var url = urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data;
-       console.log("URL file orignal is = " + url);
-
-       var namePrimitive = {};
-       aTransferable.getTransferData('application/x-moz-file-promise-dest-filename', namePrimitive, dataSize);
-       var name = namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data;
-
-       console.log("target filename is = " + name);
-
-       var dirPrimitive = {};
-       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
-       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
-
-       console.log("target folder is = " + dir.path);
-
-       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
-       file.initWithPath(dir.path);
-       file.appendRelativePath(name);
-
-       console.log("output final path is =" + file.path);
-
-       // now you can write or copy the file yourself…
-    }
-  }
-}
-
- -

関連情報

- - diff --git a/files/ja/drawing_text_using_a_canvas/index.html b/files/ja/drawing_text_using_a_canvas/index.html deleted file mode 100644 index d99101e457..0000000000 --- a/files/ja/drawing_text_using_a_canvas/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: 文字を描く -slug: Drawing_text_using_a_canvas -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

前の章でスタイルや色を適用する方法を見た後は、canvas にテキストを描画する方法を見ていきます。

-
- -

テキストを描く

- -

canvas のレンダリングコンテキストでは、2 種類のテキスト描画方法を提供します:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
(x,y) で指定した位置にテキストを塗りつぶして描画します。任意で最大描画幅を指定できます。
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
(x,y) で指定した位置にテキストの輪郭を描画します。任意で最大描画幅を指定できます。
-
- -

fillText の例

- -

現在の fillStyle を使用して、テキストを塗りつぶして描画します。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = "48px serif";
-  ctx.fillText("Hello world", 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

strokeText の例

- -

現在の strokeStyle を使用して、テキストの輪郭を描画します。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = "48px serif";
-  ctx.strokeText("Hello world", 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

テキストのスタイルを設定する

- -

上記の例ではテキストをデフォルトのサイズより若干大きくするため、すでに font プロパティを使用していました。canvas にテキストを表示する形式を調整できるプロパティは、さらにいくつかあります:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
テキストを描画する際に使用するテキストのスタイルです。CSS の {{cssxref("font")}} プロパティと同じ構文にのっとった文字列です。デフォルトのフォントは 10px sans-serif です。
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
テキストの配置を設定します。使用できる値は start、end、left、right、center です。デフォルト値は start です。
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
ベースラインの位置ぞろえを設定します。使用できる値は top、hanging、middle、alphabetic、ideographic、bottom です。デフォルト値は alphabetic です。
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
書字方向を設定します。使用できる値は ltr、rtl、inherit です。デフォルト値は inherit です。
-
- -

以前に CSS を扱ったことがあれば、これらのプロパティも見慣れているでしょう。

- -

以下は WHATWG 提供の、textBaseline 属性によってサポートされている様々なベースラインを示した図です。The top of the em square is - -roughly at the top of the glyphs in a font, the hanging baseline is - -where some glyphs like आ are anchored, the middle is half-way - -between the top of the em square and the bottom of the em square, - -the alphabetic baseline is where characters like Á, ÿ, - -f, and Ω are anchored, the ideographic baseline is - -where glyphs like 私 and 達 are anchored, and the bottom - -of the em square is roughly at the bottom of the glyphs in a - -font. The top and bottom of the bounding box can be far from these - -baselines, due to glyphs extending far outside the em square.

- -

textBaseline の例

- -

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

- -
ctx.font = "48px serif";
-ctx.textBaseline = "hanging";
-ctx.strokeText("Hello world", 0, 100);
-
- - - -

{{EmbedLiveSample('Playable_code', 700, 360)}}

- -

高度なテキスト測定

- -

テキストのより詳細な情報を得る必要がある場合は、以下のメソッドでそれを測定できます。

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、{{domxref("TextMetrics")}} オブジェクトを返します。
-
- -

以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText("foo"); // TextMetrics オブジェクト
-  text.width; // 16;
-}
-
- -

Gecko 固有の注意事項

- -

Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の接頭辞付き API で、早期バージョンのテキスト描画法を実装しています。これらは非推奨化または削除されており、動作を保証しません。

- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
diff --git a/files/ja/dynamically_modifying_xul-based_user_interface/index.html b/files/ja/dynamically_modifying_xul-based_user_interface/index.html deleted file mode 100644 index 06e02a5102..0000000000 --- a/files/ja/dynamically_modifying_xul-based_user_interface/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Dynamically modifying XUL-based user interface -slug: Dynamically_modifying_XUL-based_user_interface -tags: - - Add-ons - - DOM - - Extensions - - XUL ---- -

この記事では、DOM やその他の API を使って XUL インターフェイスを操作する方法について検討します。まず DOM - - ドキュメント - の概念について説明し、DOM の呼び出しを使ってドキュメントを操作する基本的な方法の例を幾つか実演したのち、 Mozilla 固有のメソッドを使って - - 匿名 XBL コンテント - を操作する方法を実演します。

-

この記事は XUL 開発の初心者から中級者を対象にしており、読者が XUL と JavaScript の基本的な知識を持っていることを想定しています。Document Object Model について の記事や Gecko DOM リファレンス の 導入ページ といった DOM に関する入門記事も必要があればお読み下さい。

-


- {{ 英語版章題("Introduction") }}

-

はじめに

-

ご存知の通り、XUL は Firefox や Thunderbird のような様々な Mozilla ベースのアプリケーションでユーザーインターフェイスを記述するのに使われている XML 言語です。XUL アプリケーションでは動作を定義するのに JavaScript が使われており、その中では XUL ドキュメントにアクセスするのに DOM API を使っています。

-

では Document Object Model API とは何なのでしょうか？

-

DOM API はスクリプトとドキュメント間で行われるやり取りのあらゆる所で使われるインターフェイスです。一度でも XUL (または HTML) ドキュメントとやり取りするスクリプトを書いた事があるなら、あなたは既に DOM 呼び出しを使っています。最も有名な DOM メソッドはおそらく document.getElementById() で、これは与えられた id に対応する要素を返します。あなたはそれ以外にも element.setAttribute() や、拡張機能を書いた事があるなら addEventListener() といった呼び出しを使った事があるかもしれません。これらは全て DOM で定義されているものです。

-

DOM メソッドには、ドキュメントに要素を作成したり、動かしたり、削除するものもあります。これらは後のセクションで実演します。まずは、 - - ドキュメント - とは何なのかについて学びましょう。

-

{{ 英語版章題("What is a document?") }}

-

ドキュメントとは何か？

-

ドキュメントは DOM API を使って操作できるデータ構造です。あらゆるドキュメントの論理的な構造はツリー状になっており、ノードとしての要素、属性、処理命令、コメントなどで出来ています。ドキュメントのツリー表現を見るには DOM Inspector を使ってください。Todo: XUL ドキュメントとツリーの簡単な例

-

ドキュメントは、妥当な HTML や整形式の (XHTML や XUL 等の) XML の、メモリ内部の表現とみなす事が出来ます。

-

異なるウェブページは (同じウェブページの異なるインスタンスであっても) 異なるドキュメントに対応しているということを覚えておく事が重要です。それぞれの XUL ウィンドウはそれ自身の独自のドキュメントを持っており、<iframe> や <browser> 、<tabbrowser> 要素を持っている場合には一つのウィンドウにさらに幾つかの異なるドキュメントがあるということになります。このため、扱っているのが適切なドキュメントなのかを常に確認する必要があります。 (詳しくは chrome コードでウィンドウを扱う を参照。) スクリプトが <script> タグを使って読み込まれているなら、document プロパティはそのスクリプトが含まれる DOM ドキュメントを参照します。

-

{{ 英語版章題("Examples: Using DOM methods") }}

-

DOM メソッドの使用例

-

このセクションでは DOM メソッドの appendChild() 、createElement() 、insertBefore() 、removeChild() の使い方を実演します。

-

{{ 英語版章題("= Removing all children of an element =") }}

-

ある要素の子要素を全て削除する

-

この例では、id=someElement である要素の全ての子要素を現在のドキュメントから削除するために、removeChild() メソッドを呼び出して子要素が全てなくなるまで最初の子要素を削除しています。

-

hasChildNodes() と firstChild も DOM API の一部です。

-
var element = document.getElementById("someElement");
-  while(element.hasChildNodes()){
-    element.removeChild(element.firstChild);
-  }
-
-

{{ 英語版章題("= Inserting menu items to a menu =") }}

-

メニューにメニューアイテムを挿入する

-

この例では <menupopup> の最初と最後に二つの新しいメニューアイテムを追加します。アイテムを作成するのには document.createElementNS() メソッドを使用しており、作成された xml 要素を insertBefore() と appendChild() を使ってドキュメントに挿入しています。

-

注:

- -
function createMenuItem(aLabel) {
-  const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-  var item = document.createElementNS(XUL_NS, "menuitem"); // 新しい XUL メニューアイテムを作成する
-  item.setAttribute("label", aLabel);
-  return item;
-}
-var popup = document.getElementById("myPopup"); // <menupopup> 要素
-var first = createMenuItem("First item");
-var last = createMenuItem("Last item");
-popup.insertBefore(first, popup.firstChild);
-popup.appendChild(last);
-
-

appendChild() や insertBefore() は存在している要素を動かすのにも使えます。例えば次の文を上の例の最後の行に追加すれば、 "First item" とラベルが付けられたアイテムをポップアップの最後に動かす事が出来ます。

-
popup.appendChild(first);
-
-

この文はノードをドキュメントの現在の位置から削除して、ポップアップの最後に再び挿入します。

-

{{ 英語版章題("Anonymous content (XBL)") }}

-

匿名コンテント (XBL)

-

XBL は Mozilla で新しいウィジェットを定義するのに使用される言語です。XBL で定義されたウィジェットは、バインディングが設定される時に、バインドされた要素に挿入するコンテントを定義する事ができます。このコンテントは、 - - 匿名コンテント - と呼ばれ、通常の DOM メソッドによってアクセスする事は出来ません。

-

代わりに、nsIDOMDocumentXBL インターフェイスのメソッドを使う必要があります。例えば

-
// 与えられたノードの最初の匿名子要素を取得する
-document.getAnonymousNodes(node)[0];
-
-// anonid 属性が el1 である匿名要素のノードリストを返す
-document.getAnonymousElementByAttribute(node, "anonid", "el1");
-
-

より多くの情報を得るには XBL リファレンスの getAnonymousNodes と getAnonymousElementByAttribute を参照して下さい。

-

匿名ノードを得さえすえば、通常の DOM メソッドを使ってバインディングの残りのノードを操作したり処理する事が出来ます。

-

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

-

参照

- diff --git a/files/ja/e4x/processing_xml_with_e4x/index.html b/files/ja/e4x/processing_xml_with_e4x/index.html deleted file mode 100644 index a6c336c13e..0000000000 --- a/files/ja/e4x/processing_xml_with_e4x/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: E4X を用いた XML 処理 -slug: E4X/Processing_XML_with_E4X -tags: - - E4X - - JavaScript - - NeedsTechnicalReview - - XML ---- -
-

警告: E4X は非推奨です。E4X は content に対して Firefox 16 からデフォルトで無効に、chrome に対して Firefox 17 からデフォルトで無効に、そして Firefox 18 で削除される予定です。代替として、DOMParser/DOMSerializer または 非ネイティブの JXON アルゴリズムを使用してください。

-
- -
-

警告: この記事の内容は古くなっている可能性があります。 最終更新日は 2010 年 11 月 12 日です。英語版の最新の内容も合わせてご覧下さい。

-
- -

JavaScript 1.6 で初めて導入された E4X により、JavaScript 言語にネイティブ XML オブジェクトが導入され、さらに XML 文書リテラルを JavaScript コードに埋め込むための構文も追加されています。

- -

E4X の完全な定義は Ecma-357 仕様 でなされています。この章では実用的な概要を示します。完全なリファレンスではありません。

- -

- -

互換性の問題

- -

<script> 要素のサポートがブラウザの間で広く普及する前は、JavaScript をページに埋め込むときに HTML コメントタグで囲むことで、<script> を知らないブラウザが JavaScript コードをそのまま表示してしまうのを防ぐということが一般的でした。この慣習はもう不要ですが、古いコードでは残っていることがあります。後方互換性のため、E4X はコメントや CDATA セクションを無視するのがデフォルトの動作です。e4x=1 引数を <script> タグに加えることでこの制限を無効にできます。

- -
<script type="text/javascript;e4x=1">
-...
-</script>
-
- -

- -

XML オブジェクトの作成

- -

E4X には XML オブジェクトを作成する方法が 2 つあります。1 つ目は XML コンストラクタに文字列を渡す方法です。

- -
 var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>');
-
- -

2 つ目はスクリプトに XML を XML リテラルとして直接埋め込むことです。

- -
 var languages = <languages type="dynamic">
-   <lang>JavaScript</lang>
-   <lang>Python</lang>
- </languages>;
-
- -

どちらの場合も結果として得られるオブジェクトは E4X XML オブジェクトです。これには内部データにアクセスしたりそれを変更したりするための便利な構文が備わっています。

- -

XML オブジェクトは通常の JavaScript オブジェクトのように見え、そのような挙動をとりますが、その 2 つは同じものではありません。E4X では E4X XML オブジェクトにおいてのみ動作する新たな構文が導入されています。その構文は JavaScript プログラマにとって取っつきやすいように設計されていますが、E4X では XML からネイティブ JavaScript オブジェクトへの直接のマッピングが用意されていません。そう見えるだけです。

- -

- -

属性の操作

- -

上記の例を実行すると変数 languages は XML 文書の <languages> に対応する XML オブジェクトへの参照となります。このノードには type という 1 つの属性があり、それにアクセスしたり、それを変更したりする方法はいくつもあります。

- -
 alert(languages.@type); // "dynamic" というアラート
- languages.@type = "agile";
- alert(languages.@type); // "agile" というアラート
-
- -
 alert(languages.toString());
- /* アラート：
-   <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages>
- */
-
- -

- -

XML オブジェクトの操作

- -

XML オブジェクトにはその中身を検査したり変更するためのメソッドがたくさん用意されています。それらは JavaScript の通常のドットや [] という記法をサポートしていますが、オブジェクトのプロパティにアクセスするのではなく、E4X ではその要素の子にアクセスするための演算子として定義されています。

- -
var person = <person>
-  <name>Bob Smith</name>
-  <likes>
-    <os>Linux</os>
-    <browser>Firefox</browser>
-    <language>JavaScript</language>
-    <language>Python</language>
-  </likes>
-</person>;
-
-alert(person.name); // Bob Smith
-alert(person['name']); // Bob Smith
-alert(person.likes.browser); // Firefox
-alert(person['likes'].browser); // Firefox
-
- -

複数の要素がマッチするようなものにアクセスすると XMLList が返されます。

- -
alert(person.likes.language.length()); // 2
-
- -

DOM と同様に * を使うことですべての子ノードにアクセスすることができます。

- -
alert(person.likes.*.length()); // 4
-
- -

. 演算子は与えられたノードの直接の子にアクセスしますが、.. 演算子はネストの深さにかかわらずすべての子にアクセスします。

- -
alert(person..*.length()); // 11
-
- -

この場合、length() メソッドは 11 を返します。結果として得られる XMLList には要素とテキストノードがともに含まれるためです。

- -

XML 要素を表すオブジェクトには便利なメソッドがたくさん用意されています。そのうちのいくつかを以下に示します。 TODO: Add all of the methods to the JavaScript reference, link from here

- -
alert(person.name.text()) // Bob Smith
-
-var xml = person.toXMLString(); // XML からなる文字列
-
-var personCopy = person.copy(); // XML オブジェクトのディープコピー
-
-var child = person.child(1); // 2 番目の子ノード：この場合は <likes> 要素
-
- -

- -

XMLLists の操作

- -

XML オブジェクトに加えて、E4X では XMLList オブジェクトが導入されています。XMLList は XML オブジェクトの順序付きの集まりを表します。例えば、要素のリストです。上記の例に続き、次のようにすると <lang> 要素の XMLList にアクセスすることができます。

- -
 var langs = languages.lang;
-
- -

XMLList には格納している要素数を知るための length() メソッドがあります。

- -
 alert(languages.lang.length());
-
- -

JavaScript の配列とは違い、length はプロパティではなくメソッドであり、必ず length() として呼び出さなければならないことに注意してください。

- -

次のようにしてマッチする要素について繰り返すことができます。

- -
 for (var i = 0; i < languages.lang.length(); i++) {
-     alert(languages.lang[i].toString());
- }
-
- -

ここでは配列のアイテムに順にアクセスするときと全く同じ構文を使っています。このように通常の配列に似ているにもかかわらず、XMLList は forEach のような Array のメソッドをサポートしていません。また、Array.forEach() のような Array のジェネリックスも XMLList オブジェクトとは互換性がありません。

- -

JavaScript 1.6 で JavaScript の E4X サポートの一部として導入された for each...in 文 を使うこともできます。

- -
 for each (var lang in languages.lang) {
-     alert(lang);
- }
-
- -

for each...in は通常の JavaScript のオブジェクトについて使うと、そのオブジェクトに含まれる値（キーではなく）に対して繰り返すこともできます。for...in と同様、配列について使用するのは 全く推奨できません。

- -

整形式の XML を文書を作らずとも、次のような XML リテラル構文を用いて XMLList を作ることができます。

- -
 var xmllist = <>
-   <lang>JavaScript</lang>
-   <lang>Python</lang>
- </>;
-
- -

+= 演算子を使うと文書内の XMLList に要素を新たに追加することができます。

- -
 languages.lang += <lang>Ruby</lang>;
-
- -

通常の DOM メソッドで返されるノードリストとは異なり、XMLList は静的であり、DOM 内の変更が自動的には反映されません。既存の XML オブジェクトのサブセットとして XMLList を作成し、その後オリジナルの XML を変更した場合、XMLList にはその変更が反映されません。最新の状態にするには作り直す必要があります。

- -
 var languages = <languages>
-   <lang>JavaScript</lang>
-   <lang>Python</lang>
- </languages>;
-
- var lang = languages.lang;
- alert(lang.length()); // 2 というアラート
-
- languages.lang += <lang>Ruby</lang>;
- alert(lang.length()); // やはり 2 というアラート
-
- lang = languages.lang; // XMLList を作り直す
- alert(lang.length()); // 3 というアラート
-
- -

- -

検索とフィルタ

- -

E4X には特定の基準にマッチする文書内のノードを選択するための特別な演算子が用意されています。このようなフィルタ演算は丸括弧で囲んだ式で指定します。

- -
var html = <html>
-  <p id="p1">First paragraph</p>
-  <p id="p2">Second paragraph</p>
-</html>;
-
-alert(html.p.(@id == "p1")); // "First paragraph" というアラート
-
- -

式の手前のパスにマッチするノード（この場合は p 要素）は式が評価される前にスコープチェーンに追加されます。with 文 を使ってノードが指定されているかのような動作です。

- -

したがって、フィルタは現在の要素内の単一ノードの値に対しても実行することができます。

- -
var people = <people>
-  <person>
-    <name>Bob</name>
-    <age>32</age>
-  </person>
-  <person>
-    <name>Joe</name>
-    <age>46</age>
-  </person>
-</people>;
-
-alert(people.person.(name == "Joe").age); // 46 というアラート
-
- -

フィルタ式に JavaScript 関数を使うこともできます。

- -
function over40(i) {
-    return i > 40;
-}
-
-alert(people.person.(over40(parseInt(age))).name); // Joe というアラート
-
- -

- -

名前空間の処理

- -

E4X は名前空間を考慮しています。ノードや属性を表すあらゆる XML オブジェクトには QName オブジェクトを返す name() メソッドがあり、名前空間要素を簡単に検査することができます。

- -
var xhtml = <html xmlns="http://www.w3.org/1999/xhtml">
-	<head>
-		<title>Embedded SVG demo</title>
-	</head>
-	<body>
-		<h1>Embedded SVG demo</h1>
-		<svg xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 100 100">
-			<circle cx="50"
-				cy="50"
-				r="20"
-				stroke="orange"
-				stroke-width="2px"
-				fill="yellow" />
-		</svg>
-	</body>
-</html>;
-
-alert(xhtml.name().localName); // "html" というアラート
-alert(xhtml.name().uri); // "http://www.w3.org/1999/xhtml" というアラート
-
- -

名前空間内にある要素にアクセスするには、まずその名前空間についての URI を格納した Namespace オブジェクトを作ります。

- -
var svgns = new Namespace('http://www.w3.org/2000/svg');
-
- -

すると、通常の要素指定子の代わりに namespace::localName の形式で E4X クエリに使用することができます。

- -
var svg = xhtml..svgns::svg;
-alert(svg); // 文書の <svg> 部分が表示される
-
- -

diff --git a/files/ja/feed_content_access_api/index.html b/files/ja/feed_content_access_api/index.html deleted file mode 100644 index c975f41902..0000000000 --- a/files/ja/feed_content_access_api/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: Feed content access API -slug: Feed_content_access_API -tags: - - Add-ons - - Extensions ---- -

Firefox 2 と Thunderbird 2 は拡張製作者に RSS と Atom フィードへのアクセスを簡単にする一連のインターフェースを導入します。

-

フィードインタフェース

-
-
- nsIFeed
-
- RSS あるいは Atom フィードを表します。
-
- nsIFeedContainer
-
- サブクラスされたフィード関連の様々なインタフェースのベースクラス。
-
- nsIFeedElementBase
-
- サブクラスされたフィード関連の他の様々なインタフェースのベースクラス。
-
- nsIFeedEntry
-
- RSS あるいは Atom フィードの単一のエントリを表します。
-
- nsIFeedGenerator
-
- RSS あるいは Atom フィードを生成したソフトウェアを記述します。
-
- nsIFeedPerson
-
- 人を表します。人の名前とメールアドレス及びホームページアドレスを含んでいます。
-
- nsIFeedProcessor
-
- RSS と Atom フィードをパースします。
-
- nsIFeedProgressListener
-
- パース処理中にメッセージを受け取るために RSS あるいは Atom フィードをパースしたいプログラムによって実装されます。
-
- nsIFeedResult
-
- フィードのパースの結果を表現します。
-
- nsIFeedResultListener
-
- パースが完了したときに通知を受け取るために RSS あるいは Atom フィードをパースしたいプログラムによって実装されます。
-
- nsIFeedTextConstruct
-
- フィードのテキストを表します: テキストをプレーンテキストあるいは HTML でフェッチするための関数を含んでいます。
-
- nsIScriptableUnescapeHTML
-
- HTML 文字列をアンエスケープするためのユーティリティクラス。
-
-

例: Web からフィードを読む

-

フィードを読み込みパースすることは本当に簡単です。 フィードを読み込むために XMLHttpRequest を使い、次にフィードをパースするためにその文字列を nsIFeedProcessor に渡します。

-

フィードを読み込み、パーサにそれを渡すことはこのようなコードを使って行うことができます:

-
  fetch: function(feedUrl)
-  {
-    var httpRequest = null;
-
-    function infoReceived() {
-      var data = httpRequest.responseText;
-
-      var ioService = Components.classes['@mozilla.org/network/io-service;1']
-                                         .getService(Components.interfaces.nsIIOService);
-      var uri = ioService.newURI(feedUrl, null, null);
-
-      if (data.length) {
-        var parser = Components.classes["@mozilla.org/feed-processor;1"]
-                                        .createInstance(Components.interfaces.nsIFeedProcessor);
-        var listener = new FeedTestResultListener();
-        try {
-          parser.listener = listener;
-          parser.parseFromString(data, uri);
-        }
-        catch(e) {
-          alert("フィードのパースでエラーが発生しました。");
-        }
-      }
-    }
-
-    httpRequest = new XMLHttpRequest();
-
-    httpRequest.open("GET", feedUrl, true);
-    try {
-      httpRequest.onload = infoReceived;
-      httpRequest.send(null);
-    }
-    catch(e) {
-      alert(e);
-    }
-  }
-
-

nsIFeedProcessor インタフェースであなたはいくつかの可能なソースからフィードデータをパースできます; この場合、ドキュメントを文字列に読み込み、次に parseFromString() メソッドを使ってパースしています。しかし parseFromStream() を使ってファイルから、parseAsync() を使って直接 URL からパースすることもできます。

-

パースされたフィードの実際の処理は FeedTestResultListener オブジェクトの handleResult() を使って行われます。そのコードはこのようになります:

-
    FeedTestResultListener.prototype = {
-      handleResult: function(result) {
-        var feed = result.doc;
-
-        feed.QueryInterface(Components.interfaces.nsIFeed);
-
-        // 新しいウィンドウを開く
-
-        var win = window.open("", "FeedTest_Window");
-        var doc = win.document.wrappedJSObject;
-
-        doc.open();
-
-        // HTML ヘッダとページタイトルを書き込む
-
-        doc.write("<html><head><title>Feed: " + feed.title.text + "</title></head><body>");
-        doc.write("<h1>" + feed.title.text + "</h1><p>");
-
-        var itemArray = feed.items;
-        var numItems = itemArray.length;
-
-        // 記事の情報を書き込む
-
-        if (!numItems) {
-          doc.write("<i>便りのないのは良い便り!</i>");
-        }
-        else {
-          var i;
-          var theEntry;
-          var theUrl;
-          var info;
-
-          for (i=0; i<numItems; i++) {
-            theEntry = itemArray.queryElementAt(i, Components.interfaces.nsIFeedEntry);
-
-            if (theEntry) {
-              theUrl =
-              doc.write('<b><a href="' + theEntry.link.resolve("") + '">' + theEntry.title.text + '</a></b><br>');
-              if (theEntry.summary) {
-                info = theEntry.summary.text + "</p><hr><p>";
-              }
-              else {
-                info = theEntry.content.text + "</p><hr><p>";
-              }
-              doc.write("<blockquote>" + info);
-              doc.write("</blockquote><p>");
-            }
-          }
-        }
-
-        // ドキュメントを閉じる; 完了!
-
-        doc.write("</body></html>");
-        doc.close();
-      }
-    }
-
-

handleResult() 関数はフィードを表現している nsIFeedResult を引数として受け取ります。doc プロパティは全てのフィードデータを含んだ nsIFeed です。

-

フィードのタイトルを得るためには、feed.title プロパティを見てください。タイトルは様々なフォーマットのテキストを表す nsIFeedTextConstruct です。HTML エンコードされたテキストとしてフィードのタイトルを得るために、その text プロパティを取得します。代りに plainText() メソッドを使うことで、プレーンテキストに変換されたタイトルのコピーを得ることができます。

-

次に、feed.items nsIArray を見ることでフィードのアイテムの配列をスキャンしています。この配列はそれぞれのフィードアイテムを表す nsIFeedEntry オブジェクトを含んでいます。

-

それぞれのアイテムの title と link、summary そして content プロパティをみることでドキュメントのコンテンツを作り上げています。 link の完全なURL は link の resolve() メソッドを使うことで得ることができます。

-

フィードのフェッチを初期化するには、単に fetch( - - url - ) と呼びます。これはフィードコンテンツを含む新しいウィンドウを開ききます。それはそれぞれのアイテムのタイトル(記事自体へのクリック可能なリンクを持っています)を持っています。

-

フィードアクセスインタフェースそれぞれの詳細は、個別のリファレンスページを見てください。

diff --git a/files/ja/findbar_api/index.html b/files/ja/findbar_api/index.html deleted file mode 100644 index 30af4fce9c..0000000000 --- a/files/ja/findbar_api/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Findbar API -slug: Findbar_API ---- -

Mozilla 1.9 から検索バー機能が拡張や XULRunner アプリケーション向けに toolkit xul ウィジットとして利用可能になります。

- -

API

- -

findbar 要素は次のいずれかの方法で特定の browser 要素に追加されます。

- - - -

公開メソッド

- -
-
open
-
検索バーを開く。 -
    -
  • aMode - 使う検索モード。FIND_NORMAL か FIND_TYPEAHEAD、FIND_LINKS のどれか。指定されなければ最後の検索モードか、それもなければ FIND_NORMAL が使われます。
    • -
-
-
- -
-
close
-
検索バーを閉じる。
-
startFind
-
検索バーを開き、検索フィールドにフォーカスをあて中身を選択します。このメソッドを呼ぶと最初に検索バーが使われるときに内容を空にします。 -
    -
  • aMode - 使う検索モード。FIND_NORMAL か FIND_TYPEAHEAD、FIND_LINKS のどれか。指定されなければ最後の検索モードか それもなければ FIND_NORMAL が使われます。
    • -
-
-
通常、ウィンドウの検索コマンドはこのメソッドにマップされるべきです。例えば
-
- -
<command name="cmd_find" oncommand="gFindBar.startFind(gFindBar.FIND_NORMAL);"/>
-
- -
-
onFindAgainCommand
-
ウィンドウの次を検索か前を検索にはこのメソッドを使ってください。 -
    -
  • aFindPrevious - 前を検索なら true, それ以外なら false。
    • -
-
-
- -
-
toggleHighlight
-
ハイライトの有効/無効を切替える。 -
    -
  • aHighlight (boolean) - ハイライトを有効にするかどうか。
    • -
-
-
- -

プロパティ

- -
-
findMode (読み込みのみ)
-
アクティブな検索モード
-
browser
-
findbar がアタッチされる browser 要素
-
- -

属性

- -
-
browserid
-
検索バーがアタッチする browser 要素の id。この属性は検索バーが組み立てるときにのみ使われます。スクリプトから設定したり読み出すには browser プロパティを使うことになるでしょう。
-
- -
アクセスキー属性
- -

検索バーの UI 要素への標準アクセスキーは findebar.dtd で与えられれます。しかし以下の属性を使うことで上書き可能です。

- -
-
findnextaccesskey
-
「次を検索」ツールバーボタン(toolbarbutton)のアクセスキー
-
findpreviousaccesskey
-
「前を検索」ツールバーボタン(toolbarbutton)のアクセスキー
-
highlightaccesskey
-
「ハイライト」ツールバーボタン(toolbarbutton)のアクセスキー
-
matchcaseaccesskey
-
「大文字/小文字を区別」ツールバーボタン(toolbarbutton)のアクセスキー
-
- -

Find-as-you-type-beahavior

- -

テーマ

diff --git a/files/ja/full_page_zoom/index.html b/files/ja/full_page_zoom/index.html deleted file mode 100644 index c92ff3cc1b..0000000000 --- a/files/ja/full_page_zoom/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Full page zoom -slug: Full_page_zoom -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom ---- -

{{ Fx_minversion_header(3) }} -{{ Gecko_minversion_header(1.9) }} -

フルページズーム (あるいは単にフルズーム) は Firefox 3 の新機能です。 -

{{ 英語版章題("Example (XUL:browser)") }} -

-

例 (XUL:browser)

-

以下の例は、現在フォーカスがあたっているブラウザウィンドウでの利用をデモしています。これは Firefox 拡張機能での典型的な利用方法です。 -

-
var zoom = 1.5;
-var docViewer = getBrowser().selectedBrowser.markupDocumentViewer;
-docViewer.fullZoom = zoom;
-
-

{{ 英語版章題("Example (XUL:iframe)") }} -

-

例 (XUL:iframe)

-

フルズーム機能を XUL:iframe でも同様に使用することができます。しかし、iframe には markupDocumentViewer プロパティがないため、最初に以下のようにする必要があります: -

-
var zoom = 1.5;
-var iframe = document.getElementById("authorFrame");
-var contViewer = iframe.docShell.contentViewer;
-var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
-docViewer.fullZoom = zoom;
-
-

{{ 英語版章題("References") }} -

-

参考資料

- -
-
-{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page" } ) }} diff --git a/files/ja/games/introduction_to_html5_game_development/index.html b/files/ja/games/introduction_to_html5_game_development/index.html new file mode 100644 index 0000000000..0886e3fd0e --- /dev/null +++ b/files/ja/games/introduction_to_html5_game_development/index.html @@ -0,0 +1,106 @@ +--- +title: HTML5 ゲーム開発入門 (要約) +slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) +tags: + - Firefox OS + - Games + - HTML5 + - Mobile +translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
+ +
+

長所

+ +
    +
  1. HTML5 で作られたゲームはスマートフォン、タブレット、PC、スマート TV で動く。
    2. +
  2. 他のメディアと同様に、ウェブ全体でゲームを広告、宣伝できる。
    3. +
  3. 支払い。好きな支払い処理サービスを使って課金できる。
    4. +
  4. 好きな時にゲームを更新できる。
    5. +
  5. 自身のアナリティクスを集められる!
    6. +
  6. 顧客ともっと近く繋がれる。
    7. +
  7. プレイヤーはいつでもどこでもゲームをプレイできる。
    8. +
+ +

ウェブ技術

+
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能技術
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, 端末センサー, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (Emscripten を使って C/C++ を JavaScript にコンパイルする)
NetworkingWebRTC や WebSockets
StorageIndexedDB や "cloud"
WebHTML, CSS, SVG, Social API (とその他いろいろ!)
+ +
+
+
Full Screen API
+
Full screen gameplay.
+
Gamepad API
+
Use gamepads or other game controllers.
+
HTML and CSS
+
Build, style, and lay out your game's user interface.
+
HTML audio
+
Easily play simple sound effects and music.
+
IndexedDB
+
Store user data on their own computer or device.
+
JavaScript
+
Fast web プログラミング言語 to write the code for your game.
+ To easily port your existing games Emscripten or Asm.js
+
Pointer Lock API
+
Lock the mouse or other pointing device within your game's interface.
+
SVG (Scalable Vector Graphics)
+
Build vector graphics that scale smoothly regardless of the size or resolution of the user's display.
+
Typed Arrays
+
Access raw binary data from within JavaScript; Manipulate GL textures, game data, or anything else.
+
Web Audio API
+
Control the playback, synthesis, and manipulation of audio in real time.
+
WebGL
+
Create high-performance, hardware-accelerated 3D (and 2D) graphics. OpenGL ES 2.0.
+
WebRTC
+
Real-Time Communications to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users like chat.
+
WebSockets
+
Connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.
+
Web Workers
+
Spawn background threads running their own JavaScript code for multi-core processors.
+
XMLHttpRequest and File API
+
Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
+
+
+ +

 

diff --git a/files/ja/games/introduction_to_html5_game_gevelopment_(summary)/index.html b/files/ja/games/introduction_to_html5_game_gevelopment_(summary)/index.html deleted file mode 100644 index 0886e3fd0e..0000000000 --- a/files/ja/games/introduction_to_html5_game_gevelopment_(summary)/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: HTML5 ゲーム開発入門 (要約) -slug: Games/Introduction_to_HTML5_Game_Gevelopment_(summary) -tags: - - Firefox OS - - Games - - HTML5 - - Mobile -translation_of: Games/Introduction_to_HTML5_Game_Development_(summary) ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
- -
-

長所

- -
    -
  1. HTML5 で作られたゲームはスマートフォン、タブレット、PC、スマート TV で動く。
    2. -
  2. 他のメディアと同様に、ウェブ全体でゲームを広告、宣伝できる。
    3. -
  3. 支払い。好きな支払い処理サービスを使って課金できる。
    4. -
  4. 好きな時にゲームを更新できる。
    5. -
  5. 自身のアナリティクスを集められる!
    6. -
  6. 顧客ともっと近く繋がれる。
    7. -
  7. プレイヤーはいつでもどこでもゲームをプレイできる。
    8. -
- -

ウェブ技術

-
- -
 
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能技術
AudioWeb Audio API
GraphicsWebGL (OpenGL ES 2.0)
InputTouch events, Gamepad API, 端末センサー, WebRTC, Full Screen API, Pointer Lock API
LanguageJavaScript (Emscripten を使って C/C++ を JavaScript にコンパイルする)
NetworkingWebRTC や WebSockets
StorageIndexedDB や "cloud"
WebHTML, CSS, SVG, Social API (とその他いろいろ!)
- -
-
-
Full Screen API
-
Full screen gameplay.
-
Gamepad API
-
Use gamepads or other game controllers.
-
HTML and CSS
-
Build, style, and lay out your game's user interface.
-
HTML audio
-
Easily play simple sound effects and music.
-
IndexedDB
-
Store user data on their own computer or device.
-
JavaScript
-
Fast web プログラミング言語 to write the code for your game.
- To easily port your existing games Emscripten or Asm.js
-
Pointer Lock API
-
Lock the mouse or other pointing device within your game's interface.
-
SVG (Scalable Vector Graphics)
-
Build vector graphics that scale smoothly regardless of the size or resolution of the user's display.
-
Typed Arrays
-
Access raw binary data from within JavaScript; Manipulate GL textures, game data, or anything else.
-
Web Audio API
-
Control the playback, synthesis, and manipulation of audio in real time.
-
WebGL
-
Create high-performance, hardware-accelerated 3D (and 2D) graphics. OpenGL ES 2.0.
-
WebRTC
-
Real-Time Communications to control audio and video data, including teleconferencing and transmitting other application data back and forth between two users like chat.
-
WebSockets
-
Connect your app or site to a server to transmit data back and forth in real-time. Perfect for multiplayer gaming action, chat services, and so forth.
-
Web Workers
-
Spawn background threads running their own JavaScript code for multi-core processors.
-
XMLHttpRequest and File API
-
Send and receive any kind of data you want from a Web server like downloading new game levels and artwork to transmitting non-real-time game status information back and forth.
-
-
- -

 

diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/index.html b/files/ja/games/tutorials/2d_breakout_game_phaser/index.html new file mode 100644 index 0000000000..4aecfe19b7 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_phaser/index.html @@ -0,0 +1,63 @@ +--- +title: 2D breakout game using Phaser +slug: Games/Workflows/2D_breakout_game_Phaser +tags: + - 2D + - Beginner + - Canvas + - Games + - JavaScript + - NeedsTranslation + - Phaser + - TopicStub + - Tutorial +translation_of: Games/Tutorials/2D_breakout_game_Phaser +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

+ +

In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.

+ +

Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.

+ +

To get the most out of this series of articles you should already have basic to intermediate JavaScript knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.

+ +

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

+ +

Lesson details

+ +

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

+ +
    +
  1. Initialize the framework
    2. +
  2. Scaling
    3. +
  3. Load the assets and print them on screen
    4. +
  4. Move the ball
    5. +
  5. Physics
    6. +
  6. Bounce off the walls
    7. +
  7. Player paddle and controls
    8. +
  8. Game over
    9. +
  9. Build the brick field
    10. +
  10. Collision detection
    11. +
  11. The score
    12. +
  12. Win the game
    13. +
  13. Extra lives
    14. +
  14. Animations and tweens
    15. +
  15. Buttons
    16. +
  16. Randomizing gameplay
    17. +
+ +

As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, 2D breakout game using pure JavaScript.

+ +

After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.

+ +
+

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Phaser Content Kit based on this tutorial if you want to give a talk about game development with Phaser.

+
+ +

Next steps

+ +

Ok, let's get started! Head to the first part of the series — Initialize the framework.

+ +

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html new file mode 100644 index 0000000000..8ab82a8be7 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_phaser/physics/index.html @@ -0,0 +1,90 @@ +--- +title: 物理演算 +slug: Games/Workflows/2D_breakout_game_Phaser/Physics +translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

+ +
+

全 16回のゲーム開発チュートリアル の 5 回目です。 今回終了後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html でご覧になれます。

+
+ +

モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。

+ +

物理演算の追加

+ +

Phaser は Arcade Physics、P2、そして Ninja Physics  と、3 つの異なる物理演算エンジンを備えています。また商用プラグインとして Box2D も物理演算エンジンとして利用できます。チュートリアルで作成しているような単純なゲームでは、複雑な幾何計算を必要としません。そのような場合には Arcade Physics を利用すると良いでしょう。

+ +

まず Arcade Physics engine を初期化します。初期化は create 関数の先頭で、 physics.startSystem() メソッドを呼ぶことで行います：

+ +
game.physics.startSystem(Phaser.Physics.ARCADE);
+
+ +

標準では Phaser オブジェクトは物理演算エンジンを利用しません。そのため、create()  の末尾に次の行を追加して、ボールから物理演算エンジンを利用できるようにします：

+ +
game.physics.enable(ball, Phaser.Physics.ARCADE);
+
+ +

次にボールを動かします。次のように、create() 末尾で body 属性の持つ velocity 属性を設定します：

+ +
ball.body.velocity.set(150, 150);
+
+ +

以前作成した、更新処理の削除

+ +

update()関数から忘れずに、x と y の値の更新処理を削除しておきましょう：

+ +
function update() {
+    ball.x += 1;
+    ball.y += 1;
+}
+
+ +

以上で、物理演算エンジンを組み込むことができました。

+ +

最終的に作成されたコード

+ +

最終的に得られたコードは以下の通りです：

+ +
var ball;
+
+function preload() {
+    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
+    game.scale.pageAlignHorizontally = true;
+    game.scale.pageAlignVertically = true;
+    game.stage.backgroundColor = '#eee';
+    game.load.image('ball', 'img/ball.png');
+}
+
+function create() {
+    game.physics.startSystem(Phaser.Physics.ARCADE);
+    ball = game.add.sprite(50, 50, 'ball');
+    game.physics.enable(ball, Phaser.Physics.ARCADE);
+    ball.body.velocity.set(150, 150);
+}
+
+function update() {
+}
+
+ +

index.html を再読み込みすると、ボールは 1 方向に進み続けます。現在、物理エンジンには重力加速度も摩擦係数も設定されていません。重力加速度を設定すれば、ボールは落下するようになります。また、摩擦係数を設定すれば、ボールが摩擦で停止するようになります。

+ +

より進んだ内容

+ +

今回扱った内容以外にもできることはたくさんあります。例えば、 ball.body.gravity.y = 100; と追加することで、ボールに影響する重力を設定できます。その結果として、ボールが重力に引かれて、落下するようになります。

+ +

このような機能はほんの一部分です。physics documentation には、物理演算に関する数多くの関数と変数が、Arcade と P2 物理演算エンジンの使用例とともに解説されています。

+ +

自分のコードと比較しよう

+ +

上記のコードや、下記のデモと比較して、どのように動作しているかを理解しましょう。

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}

+ +

次のステップ

+ +

次のステップでは、ボールの跳ね返り を実装します。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..b8e5486a80 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html @@ -0,0 +1,105 @@ +--- +title: ボールを壁で弾ませる +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち3番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson3.htmlで入手できます。

+
+ +

ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (後ほど詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。

+ +

簡単な衝突検知

+ +

衝突を検知するためにボールが壁に触っている (衝突している) か確かめ、もし触っている場合には動く方向をそれに従って変更します。

+ +

計算を簡単にするために、描画される円の半径をもつballRadiusという変数を定義しましょう。次のコードを既にどこかにある変数定義の後に追記しましょう。

+ +
var ballRadius = 10;
+ +

あわせてdrawBall()関数内のボールを描画している行も次のように更新しましょう。

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

上端と下端で弾ませる

+ +

ボールを弾ませる壁は4つあります。まずは上端に注目しましょう。毎フレーム、ボールがCanvasの上端に触っているかどうか確認する必要があります。もし触っているなら、ボールの動きを反転させ、ボールが反対方向に動き、視界の範囲内に留まるようにしましす。座標系は左上端から始まることを思い出しながら考えてみれば、次のようなコードが思いつくでしょう。

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

もしボールの位置のyの値が0未満だったら、符号反転させた値を設定することでy軸方向の動きの向きを変えます。もしボールが上に向かって毎フレーム2ピクセルの速さで動いていたら、今度は「上」に向かって毎フレーム-2ピクセルの速さで動く、つまり下に向かって毎フレーム2ピクセルの速さで動きます。

+ +

上記のコードは上端でボールを弾ませていました。では今度は下端について考えてみましょう。

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

y座標がCanvasの高さより高かったら(左上端からyの値を数えているため、上端は0で始まり下端はCanvasの高さである480ピクセルとなることを思い出してください) 、先程のようにy軸方向の動きを反転させます。

+ +

これら2つの文を合わせればコードの冗長さを減らせます。

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

2つの文のどちらかがtrueだったら、ボールの動きを反転させます。

+ +

左端と右端で弾ませる

+ +

上端と下端を対処したところで、左端と右端を考えてみましょう。実のところとても良く似ていて、yをxで置き換えて文を繰り返すだけでよいのです。

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

ここで上記のコードをdraw()関数の、ちょうど閉じ波括弧の前に挿入しておいてください。

+ +

まだボールが壁に隠れる!

+ +

ここであなたのコードを試してみましょう。驚くはずです。Canvasの四辺全てでボールが弾んでいます! でも別の問題がありました。ボールが壁にぶつかるとき、位置を変える少し前に壁に沈んでしまいます。

+ +

+ +

壁と円周の衝突地点を計算すべきところで、壁と円の中心の衝突地点を計算しているのがこの理由です。ボールは壁に触ったときに弾むべきで、壁に半分のめり込んだときに弾んでも仕方ありません。そこで円周を含めるために文を少し調節します。最後に追加したコードを次のように書き換えます。

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

ボールの中心と辺の距離がボールの半径とちょうど等しくなったときに動く向きを変えます。半径を辺の長さから引き、もう一方では足すことで衝突検知が正しく行われたような印象が出ます。思ったとおり、壁にぶつかった時点でボールが弾むようになります。

+ +

自分のコードと比べる

+ +

もう一度、このパートを終えた後にできたコードと比べてみて、それからコードで遊んでみてください。

+ + + +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

+ + + +
+

練習: 壁に当たるたびにボールの色をランダムに変えてみてください。

+
+ +

次のステップ

+ +

ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 パドルとキーボード操作を見てみましょう。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html new file mode 100644 index 0000000000..b85ae7fccf --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html @@ -0,0 +1,112 @@ +--- +title: ブロックのかたまりを作る +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち6番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson6.htmlで入手できます。

+
+ +

ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。

+ +

ブロック変数を設定する

+ +

このレッスンのおおまかな目標は、ブロックのための、2次元配列を走査する入れ子のループを使った数行のコードを書き上げることです。しかしその前に幅と高さ、行と列などといった情報を定義するいくつかの変数が必要です。自分のコードの、以前変数を宣言した場所の下に次のコードを追加してください。

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

ここではブロックの行と列の数、幅と高さ、ブロックがくっつかないようにするブロック間の隙間、そしてキャンバスの端に描画されないようにするための上端、左端からの相対位置を定義しました。

+ +

1つの2次元配列で全てのブロックを記録します。2次元配列はブロックの列 (c) を含んでおり、列は行 (r) を含み、行はそれぞれのブロックが描画される画面上のx座標とy座標をもつオブジェクトを含んでいます。

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

上記のコードは行と列を通してループし、新しいブロックを作ります。このブロックオブジェクトは後に衝突検出のためにも使われることを覚えておいてください。

+ +

ブロック描画ロジック

+ +

配列に含まれる全てのブロックを通してループする関数を作成し、画面上に描画しましょう。コードは次のようになります。

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            bricks[c][r].x = 0;
+            bricks[c][r].y = 0;
+            ctx.beginPath();
+            ctx.rect(0, 0, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

もう一度、行と列を通してループし、それぞれのブロックのx座標とy座標を設定するとともに、1回ループを回るごとに大きさbrickWidth x brickHeightのブロックをCanvas上に描画しています。問題はそれら全てを1箇所、座標(0,0)に描画していることです。それぞれのブロックのx座標とy座標を導出する計算を一回一回のループに含める必要があります。

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+ +

それぞれの座標brickXはbrickWidth + brickPaddingに列番号cをかけ、brickOffsetLeftをたしたものとして導出されます。brickYのロジックも同様ですが、行番号r、brickHeight、そしてbrickOffsetTopが用いられます。これで、それぞれのブロックは正しい行、列に間隔を空けて置かれ、左上端から一定の位置に描画されるようになりました。

+ +

次のようにbrickXとbrickYの値を(0,0)の代わりに座標として代入するようにしたものがdrawBricks()の最終版となります。これをdrawPaddle()関数の下に追加してください。

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+            bricks[c][r].x = brickX;
+            bricks[c][r].y = brickY;
+            ctx.beginPath();
+            ctx.rect(brickX, brickY, brickWidth, brickHeight);
+            ctx.fillStyle = "#0095DD";
+            ctx.fill();
+            ctx.closePath();
+        }
+    }
+}
+ +

ブロックを描画する

+ +

drawBricks()へ呼び出しをdraw()関数のどこかに追加して、このレッスンの仕上げとしましょう。最初のあたりの、Canvasを消去する部分とボールを描画する部分の間あたりが良いでしょう。drawBall()の呼び出しのすぐ前に次の行を追加してください。

+ +
drawBricks();
+
+ +

自分のコードと比べる

+ +

ここまででゲームは更にもう少し面白くなりました。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/Lu3vtejz/","","395")}}

+ +

 

+ +
+

練習: 行や列にあるブロックの数や位置を替えてみましょう。

+
+ +

次のステップ

+ +

というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、衝突検知ではこれを変えます。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..ca89b6aaee --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html @@ -0,0 +1,132 @@ +--- +title: 衝突検出 +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち7番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson7.htmlで入手できます。

+
+ +

ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。

+ +

これをどのように実装するかは私達が決められることですが、ボールが長方形に接触しているかどうか計算するというのは、Canvasには助けになる関数もないため難しいかもしれません。このチュートリアルでは最も簡単な方法をとります。ボールの中心が与えられたブロックのどれかに衝突していないか確認するのです。これは毎回完璧な結果を返すとは限りませんし、衝突検出をするにはもっと洗練された方法がありますが、基本的な概念を学ぶには十分です。

+ +

衝突検出関数

+ +

最初の第一歩として、毎フレーム描画されるたびに全てのブロックを通してループし、ひとつひとつのブロックの位置をボールの座標と比較する衝突検出関数を作成しましょう。コードがより読みやすくなるように、衝突検出のループの中でブロックオブジェクトを保存する変数bを定義します。

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // いろいろな計算
+        }
+    }
+}
+ +

もしボールの中央がブロックの1つの座標の内部だったらボールの向きを変えます。ボールの中央がブロックの内部にあるためには次の4つの命題が全て真でなければなりません。

+ + + +

コードに書き下ろしてみましょう。

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

上記のブロックを自分のコードのkeyUpHandler()関数の下に追加してください。

+ +

ブロックが当たった後に消えるようにする

+ +

上記のコードは期待したとおり動作し、ボールの向きを変えるはずです。問題はブロックがそのままとどまっているということです。ボールに既に当たったブロックを取り除く方法を考え出さなければなりません。これはそれぞれのブロックを画面上に描画したいかどうかを示す新たなパラメーターを追加することで達成できます。ブロックを初期化している部分のコードで、それぞれのブロックオブジェクトにstatusプロパティを追加しましょう。次の部分のコードをハイライトした行で示したように更新してください。

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

次に、それぞれのブロックを描画する前にstatusプロパティの値をdrawBricks()関数で確認します。もしstatusが1なら描画します。でももし0ならそのブロックは既にボールに当たっていますから、これ以上画面上に描画されてほしくありません。自分のdrawBricks()関数を次のように更新してください。

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            if(bricks[c][r].status == 1) {
+                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+                bricks[c][r].x = brickX;
+                bricks[c][r].y = brickY;
+                ctx.beginPath();
+                ctx.rect(brickX, brickY, brickWidth, brickHeight);
+                ctx.fillStyle = "#0095DD";
+                ctx.fill();
+                ctx.closePath();
+            }
+        }
+    }
+}
+ +

衝突検出関数で状態を追跡、更新する

+ +

ここではcollisionDetection()関数内でstatusプロパティをブロックに紐づけていきます。もしブロックがアクティブ (状態が1) なら衝突が起きるかどうか確認します。もし衝突が起きるのなら、画面上に描画されないようにそのブロックの状態を0に設定します。自分のcollisionDetection()関数を以下に示すように更新してください。

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

衝突検出を有効にする

+ +

collisionDetection()関数への呼び出しをメインのdraw()関数に追加して仕上げとします。次の行をdraw()関数の、drawPaddle()の呼び出しのすぐ下に追加してください。

+ +
collisionDetection();
+
+ +

コードを比べる

+ +

これでボールの衝突検出がそれぞれのブロックに対してフレームごとに確認されるようになりました。ブロックを壊せるようになったのです。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}

+ +

 

+ +
+

練習: ボールの色をブロックに当たったときに変えましょう。

+
+ +

次のステップ

+ +

着実にゴールに近づいています。では、先に進みましょう。第8章ではどのようにスコアと勝ち負けを記録するか見てみます。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..86704e0661 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html @@ -0,0 +1,112 @@ +--- +title: Canvasを作ってその上に描画する +slug: >- + Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +translation_of: >- + Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。

+
+ +

ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと{{htmlelement("canvas")}}要素を用います。

+ +

ゲームのHTML

+ +

ゲームは全て{{htmlelement("canvas")}}要素に描画されるため、HTML文書構造は極めて簡潔です。好きなテキストエディタを使って新しいHTML文書を作成し、適当な場所にindex.htmlとして保存してください。そして、そのHTML文書に次のコードを追加します。

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScriptのコードがここに入ります
+</script>
+
+</body>
+</html>
+
+ +

charset を定義し、{{htmlelement("title")}}と簡単ななCSSをヘッダに記述しました。本体には{{htmlelement("canvas")}}と{{htmlelement("script")}}要素があり、前者にはゲームを描画し、後者にはそれを制御するJavaScriptのコードを記述します。{{htmlelement("canvas")}}要素は簡単に参照を取得できるようにmyCanvasというidを持ち、幅は480ピクセル、高さは320ピクセルとしています。このチュートリアルで書く全てのJavaScriptのコードは開始の<script>と終了の</script>タグの間に配置されます。

+ +

Canvasの基本

+ +

実際に{{htmlelement("canvas")}}要素に映像を描画するために、まずはJavaScriptから要素への参照を取得しなければなりません。次のコードを開始の<script>タグのあとに追記してください。

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

ここでは{{htmlelement("canvas")}}要素への参照をcanvasに保存しています。それから2D描画コンテキストを保存するためにctx変数を作成しています。2D描画コンテキストは実際にCanvasに描画するために使うツールとなります。

+ +

赤い四角形をキャンバスの上に表示するコード例を見てみましょう。下記のコードを先程記述したJavaScriptのあとに追記して、index.htmlをブラウザで読み込んでみてください。

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

全ての命令は{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドの間に記述されています。四角形を{{domxref("CanvasRenderingContext2D.rect()","rect()")}}を用いて定義しています。最初の2つの値は左上の角のキャンバス上での座標を指定し、あとの2つの値は幅と高さを指定しています。今回描画された四角形は画面の左端から20ピクセル、上端から40ピクセルの位置に幅50ピクセル、高さ50ピクセルの大きさで、正方形になっています。{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは{{domxref("CanvasRenderingContext2D.fill()","fill()")}}メソッドで用いられる色 (今回は赤) を保存します。

+ +

もちろん四角形だけではありません。ここでは緑の円を描画するコードを紹介します。次のコードを自分のJavaScriptの最後に追記し、保存して再読込してみてください。

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

見て分かるとおり、{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドが再び用いられています。その間にこのコードで最も重要な部分、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッドが呼び出されています。このメソッドは6つのパラメーターを持ちます。

+ + + +

{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは先程とは違う形になっています。これはCSSでそうであるように、色は16進値、色キーワード、rgba()関数、その他利用可能な色メソッドなら何でも指定することができるからです。

+ +

図形を{{domxref("CanvasRenderingContext2D.fill()","fill()")}}で塗りつぶすかわりに{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}で縁だけ色を付けることも出来ます。次のコードも自分のJavaScriptに追記してみてください。

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

上記のコードは青く縁取られたからの四角形を描画します。rgba()関数内のアルファチャネルにより青色は半透明になっています。

+ +

自分のコードと比べる

+ +

以下がJSFiddleで即実行可能な最初のレッスンのソースコード全てです。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}

+ +

 

+ +
+

練習: 与えられた図形の大きさや色を変えてみましょう。

+
+ +

次のステップ

+ +

ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進みどうやってゲーム内のボールを動かすか学びましょう。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html new file mode 100644 index 0000000000..7078862a9b --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html @@ -0,0 +1,97 @@ +--- +title: 仕上げ +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち10番目、最後のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson10.htmlで入手できます。

+
+ +

書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。

+ +

プレイヤーにライフを与える

+ +

ライフを実装するのは極めて単純です。まずは他の変数を宣言したところと同じところにライフの数を保存する変数を追加しましょう。

+ +
var lives = 3;
+ +

ライフカウンタを描画するのはスコアカウンタを描画するのとほとんど同じです。次の関数を自分のコードのdrawScore()の下に追加してください。

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

ライフがなくなるまで、ゲームをすぐ終わらせるかわりにライフの数を減らします。draw()関数内の次の2行を置き換えます。

+ +
alert("GAME OVER");
+document.location.reload();
+ +

これに以下で示すようなもう少し複雑なロジックを追加します。

+ +
lives--;
+if(!lives) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+else {
+    x = canvas.width/2;
+    y = canvas.height-30;
+    dx = 2;
+    dy = -2;
+    paddleX = (canvas.width-paddleWidth)/2;
+}
+ +

ボールが画面下端に当たったときにlives変数からライフを1つひきます。もしライフが残っていなかったらゲームは負けです。まだ残っているライフがあったらボールとパドルの位置、ボールの動きがリセットされます。

+ +

ライフ表示を描画する

+ +

draw()関数内にdrawLives()への呼び出しを追加する必要があります。drawScore()の呼び出しの下に追記してください。

+ +
drawLives();
+
+ +

requestAnimationFrame()で描画を改善する

+ +

 ではゲーム機構に直結しない部分、描画に関わる部分にとりかかりましょう。{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}}は今は{{domxref("windowTimers.setInterval()", "setInterval()")}}で実装している固定フレームレートよりもより良くブラウザがゲームを描画できるようにします。

+ +
setInterval(draw, 10);
+ +

これを簡単に次の行で置き換えます。

+ +
draw();
+ +

それから、draw()関数の一番下 (閉じ波括弧のすぐ前) に次の行を追加し、draw()関数が自分自身を何度も呼び出すようにします。

+ +
requestAnimationFrame(draw);
+ +

これでdraw()関数がrequestAnimationFrame()ループの中で何度も実行されるようになりましたが、固定の10ミリ秒のフレームレートではなくブラウザに制御を託しています。ブラウザはフレームレートを適切に同期し図形を必要なときだけ描画します。これは古いsetInterval()メソッドよりも効率的で滑らかなアニメーションループを生み出します。

+ +

自分のコードを比べる

+ +

これで全部です。ゲームの最終版が準備でき、プレイできる状態になりました。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

+ +

 

+ +
+

練習: ライフの数とパドルでボールが跳ねる角度を替えてみましょう。

+
+ +

ゲームクリア - 今のところは。

+ +

おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応するPhaserを使ったブロックくずしゲームやデバイス回転方向を使った2D 迷路ゲームチュートリアルを見てみると良いでしょう。MDNのゲームセクションで発想やより多くの知識を探してみても良いでしょう。

+ +

また、このチュートリアルシリーズの目次を見返せます。コーディングを楽しみましょう。

+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html new file mode 100644 index 0000000000..9bd90da3cd --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html @@ -0,0 +1,86 @@ +--- +title: ゲームオーバー +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

+ +
これはゲーム開発Canvasチュートリアルの10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。
+ +

ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。

+ +

ゲームオーバーを実装する

+ +

自分のゲームにゲームオーバーを実装してみましょう。3章ではボールを壁で弾むようにしました。以下はその引用です。

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

4辺全てでボールを弾ませるのではなく、3辺、すなわち上端と左右のみで弾むようにしましょう。底を打ったときゲームは終わりになります。2番目のif節を編集して、ボールがキャンバスの下端で衝突したときにゲームオーバー状態が発動するif else節にしましょう。ここでは簡単に、アラートメッセージを表示して、ページの再読込によりゲームを再開するだけにしましょう。

+ +

まず、 setInterval() を最初に呼び出しているところを置き換えます。

+ +

 

+ +
setInterval(draw, 10);
+ +

 

+ +

置き換え後

+ +
var interval = setInterval(draw, 10);
+ +

 

+ +

次に2番目のif節を次の内容で置き換えましょう。

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+    clearInterval(interval); // Needed for Chrome to end game
+}
+ +

パドルをボールに当てる

+ +

このレッスンのしあげに、ボールとパドルの衝突検出を作り、ボールが弾んでプレイエリアに戻ってくるようにしましょう。最も簡単なやり方はボールがパドルの左端と右端の間にあるか確認することです。最後に編集したコードを今度は次のように書き換えます。

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}
+ +

ボールがCanvasの下端に当たっていたら、パドルにも当たっているかどうか確認します。もしパドルに当たっていたら、思ったとおりにボールは弾みます。当たらなかったら、先ほどと同じようにゲームオーバーになります。

+ +

自分のコードと比べる

+ +

自分のコードと比べられるように、実際に動くコードを以下に示します。

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/L61c9y50/","","395")}}

+ +
+

練習: ボールがパドルに当たったときに速く動くようにしましょう。

+
+ +

次のステップ

+ +

今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章『ブロックのかたまりを作る』に進み、ボールが壊せるブロックを作りましょう。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..e708967860 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,49 @@ +--- +title: そのままのJavaScriptを使ったブロックくずしゲーム +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}

+ +

このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 {{htmlelement("canvas")}}で表示できる簡単なMDN ブロックくずしゲームを作ります。

+ +

全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを{{htmlelement("canvas")}}要素を使って実装する基本を学びましょう。

+ +

このシリーズのほとんどの記事は理解するために初歩または中級レベルのJavaScriptの知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。

+ +

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

+ +

レッスン詳細

+ +

全てのレッスン、そしてこれから一緒に作るMDNブロック崩しゲームの各バージョンはGitHub上で入手可能です:

+ +
    +
  1. Canvasを作ってその上に描画する
    2. +
  2. ボールを動かす
    3. +
  3. ボールを壁で弾ませる
    4. +
  4. パドルとキーボード操作
    5. +
  5. ゲームオーバー
    6. +
  6. ブロックのかたまりを作る
    7. +
  7. 衝突検出
    8. +
  8. スコアと勝ち負けを記録する
    9. +
  9. マウス操作
    10. +
  10. 仕上げ
    11. +
+ +

まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。

+ +
+

ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。

+
+ +
+

ノート: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいたGamedev Canvas Content Kitも利用できます。

+
+ +

次のステップ

+ +

それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。

+ +

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html new file mode 100644 index 0000000000..51da95cada --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html @@ -0,0 +1,57 @@ +--- +title: マウス操作 +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。

+
+ +

ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。

+ +

マウスの動作を監視する

+ +

マウスの操作を監視するのはキー入力を監視するのよりも簡単です。{{event("mousemove")}}イベントのリスナーさえあればよいのです。次の行を、他のイベントリスナーの近く、keyup eventのすぐ下に追記してください。

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

パドルの動きをマウスの動きと紐付ける

+ +

パドルの位置をカーソルの座標に基づいて更新することができます。次のハンドラ関数は実際にそれを行います。次の関数を自分のコードの、先程追記したコードのすぐ下に追記しましょう。

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

この関数ではまずビューポートの水平方向のマウスの位置 (e.clientX) からキャンバスの左端とビューポートの左端の距離 (canvas.offsetLeft) をひいてrelativeXの値を導出します。これはキャンバスの左端とマウスカーソルの距離とちょうど同じになります。もしカーソルの相対X座標が0より大きくCanvasの幅より小さいのならば、カーソルはキャンバス内にあります。また、座標paddleX (パドルの左端と紐付けられている) は、パドルの中点で対称に動くようにrelativeXの値からパドルの幅の半分をひいた値に設定されます。

+ +

パドルはマウスカーソルの位置を追うようになりますが、動きをCanvasの大きさに制限しているため、両端で消え失せてしまうようなことはありません。

+ +

自分のコードと比べる

+ +

比較用にコードの最新の状態を示します。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

+ +

 

+ +
+

練習: パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。

+
+ +

次のステップ

+ +

最後に微調整する準備が整った、完全なゲームが完成しました。では、仕上げに入りましょう。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..b1a53ead12 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html @@ -0,0 +1,140 @@ +--- +title: ボールを動かす +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち2番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson2.htmlで入手できます。

+
+ +

前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。

+ +

描画ループを定義する

+ +

Canvasの映像を毎フレーム、定期的に更新し続けるためには、何度も実行されるような関数を定義する必要があります。この関数には画像の位置を変えたりするために毎回違う値が与えらます。{{domxref("WindowTimers.setInterval()", "setInterval()")}}や{{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}といったJavaScriptのタイミング関数を用いれば同じ関数を何度も実行できます。

+ +

HTMLファイル内に既に書かれているJavaScriptを最初の2行を除いて全て削除し、次のコードを追記してください。draw()関数がsetIntervalの中で10ミリ秒おきに実行されます。

+ +
function draw() {
+    // 描画コード
+}
+setInterval(draw, 10);
+ +

無限に続く setInterval の性質のため、draw()は10ミリ秒おきにずっと、あるいは私達が止めるまで呼ばれ続けます。では、ボールを描画してみましょう。draw()関数の中に下記のコードを追記してください。

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

では、書き換えたコードを試してみましょう。ボールが毎フレーム再描画されるはずです。

+ +

ボール動かす

+ +

動きがないのでボールが再描画され続けていることに気づかないはずです。動きを加えてみましょう。まず、直書きされた位置 (50,50) のかわりに x、yという名の変数に開始位置を中央下端として定義し、それらを用いて円が描画される位置を定義します。

+ +

まず、xとyを定義するために自分の draw()関数の上に次の2行を追加しましょう。

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

次に、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッド内で変数xと変数yを使うようにdraw() 関数を書き換えましょう。次のハイライトされている行のとおりです。

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

ここからが大事な部分です。xとyに毎フレーム描画した後に小さな値を加え、ボールが動いているように見せるのです。その小さな値をdx、dyとして2、-2をそれぞれ設定しましょう。変数x、yの定義のあとに次のコードを追記してください。

+ +
var dx = 2;
+var dy = -2;
+
+ +

最後に残っていることがあります。フレームごとにxとyを変数dx、dyで更新して、更新されるたびにボールが新しい位置に描画されるようにするのです。次に示されている新しい2行をdraw()関数の最後に追記してください。

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

コードを保存してください。問題なく動作しますが、ボールの軌跡が残ります。

+ +

+ +

フレームの後にCanvasを消去する

+ +

前のフレームを削除せずに毎フレーム描画しているために軌跡が残ってしまいます。でも心配する必要はありません。Canvasの内容を消去するメソッド、{{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}があります。このメソッドは4つのパラメータをとります。四角形の左上端のx、y座標と四角形の右下端のx、y座標です。この四角形で囲われた領域にある内容全てが消去されます。

+ +

次のハイライトされている新しい行をdraw()関数に追記してください。

+ +
function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+
+ +

コードを保存してもう一度試してみてください。今度は軌跡のないボールがみえるはずです。10ミリ秒おきにキャンバスは消去され、青い円 (ボール) が指定された位置に描画され、 xとyの値は次のフレームに備えて更新されます。

+ +

コードを整える

+ +

次のいくつかの記事ではdraw()関数にもっと命令を追加します。ですからdraw()関数をできるだけ簡潔にしておくのは大事なことです。ボールを描画するコードを別の関数に移しましょう。

+ +

既にあるdraw()関数を次の2つの関数で置き換えてください。

+ +
function drawBall() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawBall();
+    x += dx;
+    y += dy;
+}
+ +

自分のコードと比べる

+ +

この記事で組み上げた自分のコードを下のライブデモで確認したり、書き換えたりしてどのように動いているかしっかり理解しましょう。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

+ +

 

+ +
+

練習: 動くボールの速さや向きを変えてみましょう。

+
+ +

次のステップ

+ +

ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのようにボールを壁で弾ませるか探っていきます。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html new file mode 100644 index 0000000000..1602332d81 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html @@ -0,0 +1,128 @@ +--- +title: パドルとキーボード操作 +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。

+
+ +

ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。

+ +

ボールにぶつかるパドルを定義する

+ +

そういうわけで、ボールに当てるパドルが必要になりました。パドルに用いるいくつかの変数を定義しましょう。次の変数を、他の変数と一緒にコードの一番上に追加してください。

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

ここではパドルの高さと幅、x軸上の開始地点を定義しています。続くコードではこれらを用いてさらなる計算が行われます。パドルを画面上に表示する関数を作成しましょう。drawBall()のすぐ下に次の関数を追加してください。

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

パドルを操作できるようにする

+ +

こにパドルを描画しても良いですが、ユーザーの行動に応答する必要があります。キーボード操作を実装するのです。必要なものは次のとおりです。

+ + + +

押されているボタンはこのとおり、ブーリアン値として定義、初期化できます。このコードをどこか他の変数の近くに追記してください。

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

最初は制御ボタンは押されていないため、どちらにおいてもデフォルトの値はfalseです。ボタンが押されたのを検知するため、2つのイベントリスナーを設定します。JavaScriptの最後にあるsetInterval()の行のちょうど上に次のコードを追記してください。

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

キーボードのキーのどれかに対してkeydownイベントが発火したとき (どれかが押されたとき) 、keyDownHandler()関数が実行されます。2つ目のリスナーについても同様で、(そのキーが押されなくなったき) keyupイベントはkeyUpHandler()関数を呼び出します。自分のaddEventListener()の行の下に次のコードを追記してください。

+ +
function keyDownHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = true;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = true;
+    }
+}
+
+function keyUpHandler(e) {
+    if(e.key == "Right" || e.key == "ArrowRight") {
+        rightPressed = false;
+    }
+    else if(e.key == "Left" || e.key == "ArrowLeft") {
+        leftPressed = false;
+    }
+}
+ +

キーが押されたとき、その情報は変数に保存されます。それぞれの場合で関連する変数がtrueに設定されます。キーが離されたときに変数はfalseに戻されます。

+ +

どちらの関数も変数eで表されるイベントをパラメーターとしてとります。これから有用な情報が手に入ります。keyは押されたキーについての情報を持っています。大抵のブラウザでは左右の矢印キーにそれぞれ ArrowLeft と ArrowRight が対応します。ただし IE/Edge に対応するために、 Left と Rightも確認する必要があります。 もし左カーソルが押されたら、変数leftPressedはtrueに、離されたら変数leftPressedはfalseに設定されます。右カーソルと変数rightPressedについても同様です。

+ +

パドルの移動ロジック

+ +

押されているキーについての情報を保存している変数、そして関連する関数が設定されました。ではそれらを使う実際のコードに手を入れて画面上のパドルを動かしてみましょう。draw()関数の中で、各々のフレームを描画するときに左カーソルキーが押されているか、右カーソルが押されているか確認しましょう。次のようなコードになっているでしょう。

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

左カーソルが押されていたら7ピクセル左に動き、右カーソルが押されていたら7ピクセル右に動きます。これだけでも良さそうですが、どちらかのキーを長く押し続けたらパドルがCanvasの縁から消えてしまいます。コードを次のように変えることでCanvasの境界内でのみ動くように改善できます。

+ +
if(rightPressed && paddleX < canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed && paddleX > 0) {
+    paddleX -= 7;
+}
+ +

ここで用いられている位置paddleXは期待されているように左端の0と右端のcanvas.width-paddleWidth間で動きます。

+ +

上記のコード片をdraw()関数の最後、閉じ波括弧のちょうど前に追記してください。

+ +

あとはdrawPaddle()関数をdraw()関数から呼び出し、実際に画面に表示するようにすれば完了です。次の行をdraw()関数の、ちょうどdrawBall()を呼ぶ行の下に追記してください。

+ +
drawPaddle();
+
+ +

自分のコードと比べる

+ +

自分のコードと比べられる、実際に動くコードがこちらになります。

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/t2udo69j/","","395")}}

+ +

 

+ +
+

練習: パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。

+
+ +

次のステップ

+ +

ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、ゲームオーバーでゲームの終了状態を追加することで完全に変わることになります。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html new file mode 100644 index 0000000000..44ba7aa804 --- /dev/null +++ b/files/ja/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html @@ -0,0 +1,94 @@ +--- +title: スコアと勝ち負けを記録する +slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ja/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

これはゲーム開発Canvasチュートリアルの10ステップのうち8番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson8.htmlで入手できます。

+
+ +

ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。

+ +

スコアを数える

+ +

ゲームを通してスコアを見せることができればあとで友達に自慢することができます。スコアを記録する変数が必要です。次の行を自分のJavaScriptの他の変数のあとに追記してください。

+ +
var score = 0;
+ +

スコア表示を作成し更新するためにdrawScore()関数も必要です。次のコードをcollisionDetection()関数のあとに追加してください。

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

文字をキャンバス上に描画するのは図形を描画するのと似ています。フォント定義はCSS出するものとちょうど同じように描きます。大きさとフォントの種類は{{domxref("CanvasRenderingContext2D.font","font()")}}メソッドで設定できます。それからフォントの色を設定するには{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}}を、キャンバス上に配置される実際の文章を設定するには{{domxref("CanvasRenderingContext2D.fillText","fillText()")}}を使用してください。最初のパラメーターは文章自体です。上記のコードは現在のポイントの数を表示します。最後の2つのパラメーターは文章がキャンバス上に置かれる座標です。

+ +

ブロックに当たるたびにスコアを与えるには、衝突が検出されるたびにスコア変数を増加させる1行をcollisionDetection()関数に追加します。次のハイライトされた行を自分のコードに追加してください。

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

draw()関数からdrawScore()を呼び続けることで新しいフレームごとにスコアは最新の状態に保たれます。次の行をdraw()の中、ちょうどdrawPaddle()の呼び出しの下に追加してください。

+ +
drawScore();
+ +

全てのブロックが崩されたときに勝利を伝えるメッセージを表示する

+ +

ポイントを集め続けるという動作はうまく働きますが、永久に増やし続けることは出来ません。全てのブロックが崩されたらどうなるのでしょうか。何においてもそれこそがゲームの主目標なのですから、得られる全てのポイントが集まったときには勝利を伝えるメッセージを表示すべきです。次のハイライトされた部分を自分のcollisionDetection()関数に追記してください。

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+ +

これのおかげで、全てのブロックが崩されたときにユーザーは実際にゲームに勝つことができます。ゲームにおいてはこれは非常に重要です。アラートのボタンがクリックされたらdocument.location.reload()関数はページを再読込しゲームをもう一度始めます。

+ +

自分のコードと比べる

+ +

自分のものと比べたいときのために最新のコードをいかに示します。このように見え、そして動くはずです。

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

+ +
+

練習: ブロックに当たるたびにより多くのポイントを追加し、ゲームの終わりに集めたポイントの数を表示するようにしましょう。

+
+ +

次のステップ

+ +

この時点でもこのゲームはかなりよく見えます。次のレッスンではマウス操作を追加することでゲームの魅力を広げます。

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/ja/games/tutorials/index.html b/files/ja/games/tutorials/index.html new file mode 100644 index 0000000000..9d9b5e2ff3 --- /dev/null +++ b/files/ja/games/tutorials/index.html @@ -0,0 +1,25 @@ +--- +title: Workflows for different game types +slug: Games/Workflows +tags: + - Canvas + - Games + - JavaScript + - NeedsTranslation + - TopicStub + - Web + - Workflows +translation_of: Games/Tutorials +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

This page contains articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

+ +
+
2D breakout game using pure JavaScript
+
In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.
+
2D breakout game using Phaser
+
In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thePhaser HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
+
2D maze game with device orientation
+
This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
+
diff --git a/files/ja/games/workflows/2d_breakout_game_phaser/index.html b/files/ja/games/workflows/2d_breakout_game_phaser/index.html deleted file mode 100644 index 4aecfe19b7..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_phaser/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 2D breakout game using Phaser -slug: Games/Workflows/2D_breakout_game_Phaser -tags: - - 2D - - Beginner - - Canvas - - Games - - JavaScript - - NeedsTranslation - - Phaser - - TopicStub - - Tutorial -translation_of: Games/Tutorials/2D_breakout_game_Phaser ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

- -

In this step-by-step tutorial we create a simple mobile MDN Breakout game written in JavaScript, using the Phaser framework.

- -

Every step has editable, live samples available to play with so you can see what the intermediate stages should look like. You will learn the basics of using the Phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, framework-specific helper functions, animations and tweens, and winning and losing states.

- -

To get the most out of this series of articles you should already have basic to intermediate JavaScript knowledge. After working through this tutorial you should be able to build your own simple Web games with Phaser.

- -

Gameplay screen from the game MDN Breakout created with Phaser where you can use your paddle to bounce the ball and destroy the brick field, with keeping the points and lives.

- -

Lesson details

- -

All the lessons — and the different versions of the MDN Breakout game we are building together — are available on GitHub:

- -
    -
  1. Initialize the framework
    2. -
  2. Scaling
    3. -
  3. Load the assets and print them on screen
    4. -
  4. Move the ball
    5. -
  5. Physics
    6. -
  6. Bounce off the walls
    7. -
  7. Player paddle and controls
    8. -
  8. Game over
    9. -
  9. Build the brick field
    10. -
  10. Collision detection
    11. -
  11. The score
    12. -
  12. Win the game
    13. -
  13. Extra lives
    14. -
  14. Animations and tweens
    15. -
  15. Buttons
    16. -
  16. Randomizing gameplay
    17. -
- -

As a note on learning paths — starting with pure JavaScript is the best way to get a solid knowledge of web game development. If you are not already familiar with pure JavaScript game development, we'd suggest that you first work through this series' counterpart, 2D breakout game using pure JavaScript.

- -

After that, you can pick any framework you like and use it for your projects; we've chosen Phaser as it is a good solid framework, with a good support and community available, and a good set of plugins. Frameworks speed up development time and help take care of the boring parts, allowing you to concentrate on the fun stuff. However, frameworks are not always perfect, so if something unexpected happens or you want to write some functionality that the framework doesn't provide, you'll need some pure JavaScript knowledge.

- -
-

Note: This series of articles can be used as material for hands-on game development workshops. You can also make use of the Gamedev Phaser Content Kit based on this tutorial if you want to give a talk about game development with Phaser.

-
- -

Next steps

- -

Ok, let's get started! Head to the first part of the series — Initialize the framework.

- -

{{Next("Games/Workflows/2D_Breakout_game_Phaser/Initialize_the_framework")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_phaser/physics/index.html b/files/ja/games/workflows/2d_breakout_game_phaser/physics/index.html deleted file mode 100644 index 8ab82a8be7..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_phaser/physics/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 物理演算 -slug: Games/Workflows/2D_breakout_game_Phaser/Physics -translation_of: Games/Tutorials/2D_breakout_game_Phaser/Physics ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

- -
-

全 16回のゲーム開発チュートリアル の 5 回目です。 今回終了後のソースコードは Gamedev-Phaser-Content-Kit/demos/lesson05.html でご覧になれます。

-
- -

モノ同士の衝突を正しく処理するためには、物理演算が必要になります。この文書では、Phaser での実装と、典型的な例を紹介します。

- -

物理演算の追加

- -

Phaser は Arcade Physics、P2、そして Ninja Physics  と、3 つの異なる物理演算エンジンを備えています。また商用プラグインとして Box2D も物理演算エンジンとして利用できます。チュートリアルで作成しているような単純なゲームでは、複雑な幾何計算を必要としません。そのような場合には Arcade Physics を利用すると良いでしょう。

- -

まず Arcade Physics engine を初期化します。初期化は create 関数の先頭で、 physics.startSystem() メソッドを呼ぶことで行います：

- -
game.physics.startSystem(Phaser.Physics.ARCADE);
-
- -

標準では Phaser オブジェクトは物理演算エンジンを利用しません。そのため、create()  の末尾に次の行を追加して、ボールから物理演算エンジンを利用できるようにします：

- -
game.physics.enable(ball, Phaser.Physics.ARCADE);
-
- -

次にボールを動かします。次のように、create() 末尾で body 属性の持つ velocity 属性を設定します：

- -
ball.body.velocity.set(150, 150);
-
- -

以前作成した、更新処理の削除

- -

update()関数から忘れずに、x と y の値の更新処理を削除しておきましょう：

- -
function update() {
-    ball.x += 1;
-    ball.y += 1;
-}
-
- -

以上で、物理演算エンジンを組み込むことができました。

- -

最終的に作成されたコード

- -

最終的に得られたコードは以下の通りです：

- -
var ball;
-
-function preload() {
-    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
-    game.scale.pageAlignHorizontally = true;
-    game.scale.pageAlignVertically = true;
-    game.stage.backgroundColor = '#eee';
-    game.load.image('ball', 'img/ball.png');
-}
-
-function create() {
-    game.physics.startSystem(Phaser.Physics.ARCADE);
-    ball = game.add.sprite(50, 50, 'ball');
-    game.physics.enable(ball, Phaser.Physics.ARCADE);
-    ball.body.velocity.set(150, 150);
-}
-
-function update() {
-}
-
- -

index.html を再読み込みすると、ボールは 1 方向に進み続けます。現在、物理エンジンには重力加速度も摩擦係数も設定されていません。重力加速度を設定すれば、ボールは落下するようになります。また、摩擦係数を設定すれば、ボールが摩擦で停止するようになります。

- -

より進んだ内容

- -

今回扱った内容以外にもできることはたくさんあります。例えば、 ball.body.gravity.y = 100; と追加することで、ボールに影響する重力を設定できます。その結果として、ボールが重力に引かれて、落下するようになります。

- -

このような機能はほんの一部分です。physics documentation には、物理演算に関する数多くの関数と変数が、Arcade と P2 物理演算エンジンの使用例とともに解説されています。

- -

自分のコードと比較しよう

- -

上記のコードや、下記のデモと比較して、どのように動作しているかを理解しましょう。

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/bjto9nj8/","","400")}}

- -

次のステップ

- -

次のステップでは、ボールの跳ね返り を実装します。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Move_the_ball", "Games/Workflows/2D_Breakout_game_Phaser/Bounce_off_the_walls")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html deleted file mode 100644 index b8e5486a80..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: ボールを壁で弾ませる -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち3番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson3.htmlで入手できます。

-
- -

ボールが動くのを見られたのは良いことですが、画面からすぐ消えてしまっては面白くないじゃありませんか! これを解決するためにとても簡単な衝突検知 (後ほど詳しく説明します) を導入し、Canvasの四辺でボールを弾ませます。

- -

簡単な衝突検知

- -

衝突を検知するためにボールが壁に触っている (衝突している) か確かめ、もし触っている場合には動く方向をそれに従って変更します。

- -

計算を簡単にするために、描画される円の半径をもつballRadiusという変数を定義しましょう。次のコードを既にどこかにある変数定義の後に追記しましょう。

- -
var ballRadius = 10;
- -

あわせてdrawBall()関数内のボールを描画している行も次のように更新しましょう。

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

上端と下端で弾ませる

- -

ボールを弾ませる壁は4つあります。まずは上端に注目しましょう。毎フレーム、ボールがCanvasの上端に触っているかどうか確認する必要があります。もし触っているなら、ボールの動きを反転させ、ボールが反対方向に動き、視界の範囲内に留まるようにしましす。座標系は左上端から始まることを思い出しながら考えてみれば、次のようなコードが思いつくでしょう。

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

もしボールの位置のyの値が0未満だったら、符号反転させた値を設定することでy軸方向の動きの向きを変えます。もしボールが上に向かって毎フレーム2ピクセルの速さで動いていたら、今度は「上」に向かって毎フレーム-2ピクセルの速さで動く、つまり下に向かって毎フレーム2ピクセルの速さで動きます。

- -

上記のコードは上端でボールを弾ませていました。では今度は下端について考えてみましょう。

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

y座標がCanvasの高さより高かったら(左上端からyの値を数えているため、上端は0で始まり下端はCanvasの高さである480ピクセルとなることを思い出してください) 、先程のようにy軸方向の動きを反転させます。

- -

これら2つの文を合わせればコードの冗長さを減らせます。

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

2つの文のどちらかがtrueだったら、ボールの動きを反転させます。

- -

左端と右端で弾ませる

- -

上端と下端を対処したところで、左端と右端を考えてみましょう。実のところとても良く似ていて、yをxで置き換えて文を繰り返すだけでよいのです。

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

ここで上記のコードをdraw()関数の、ちょうど閉じ波括弧の前に挿入しておいてください。

- -

まだボールが壁に隠れる!

- -

ここであなたのコードを試してみましょう。驚くはずです。Canvasの四辺全てでボールが弾んでいます! でも別の問題がありました。ボールが壁にぶつかるとき、位置を変える少し前に壁に沈んでしまいます。

- -

- -

壁と円周の衝突地点を計算すべきところで、壁と円の中心の衝突地点を計算しているのがこの理由です。ボールは壁に触ったときに弾むべきで、壁に半分のめり込んだときに弾んでも仕方ありません。そこで円周を含めるために文を少し調節します。最後に追加したコードを次のように書き換えます。

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

ボールの中心と辺の距離がボールの半径とちょうど等しくなったときに動く向きを変えます。半径を辺の長さから引き、もう一方では足すことで衝突検知が正しく行われたような印象が出ます。思ったとおり、壁にぶつかった時点でボールが弾むようになります。

- -

自分のコードと比べる

- -

もう一度、このパートを終えた後にできたコードと比べてみて、それからコードで遊んでみてください。

- - - -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","395")}}

- - - -
-

練習: 壁に当たるたびにボールの色をランダムに変えてみてください。

-
- -

次のステップ

- -

ボールが動き、かつゲームボードに留まるようになることまでこぎつけました。第4章では操作できるパドルを実装してみます。 パドルとキーボード操作を見てみましょう。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html deleted file mode 100644 index b85ae7fccf..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/build_the_brick_field/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ブロックのかたまりを作る -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち6番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson6.htmlで入手できます。

-
- -

ゲームプレイ制御を修正することにより負けることができるようになります。この大きな変更により、ついにゲームらしさを感じられるようになりました。ですが、壁とパドルでボールが弾むだけではすぐに空きてしまいます。ブロック崩しで本当に必要な要素、それはボールで崩すことができるブロックです。これが今回作り込んでいく部分になります。

- -

ブロック変数を設定する

- -

このレッスンのおおまかな目標は、ブロックのための、2次元配列を走査する入れ子のループを使った数行のコードを書き上げることです。しかしその前に幅と高さ、行と列などといった情報を定義するいくつかの変数が必要です。自分のコードの、以前変数を宣言した場所の下に次のコードを追加してください。

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

ここではブロックの行と列の数、幅と高さ、ブロックがくっつかないようにするブロック間の隙間、そしてキャンバスの端に描画されないようにするための上端、左端からの相対位置を定義しました。

- -

1つの2次元配列で全てのブロックを記録します。2次元配列はブロックの列 (c) を含んでおり、列は行 (r) を含み、行はそれぞれのブロックが描画される画面上のx座標とy座標をもつオブジェクトを含んでいます。

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

上記のコードは行と列を通してループし、新しいブロックを作ります。このブロックオブジェクトは後に衝突検出のためにも使われることを覚えておいてください。

- -

ブロック描画ロジック

- -

配列に含まれる全てのブロックを通してループする関数を作成し、画面上に描画しましょう。コードは次のようになります。

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            bricks[c][r].x = 0;
-            bricks[c][r].y = 0;
-            ctx.beginPath();
-            ctx.rect(0, 0, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

もう一度、行と列を通してループし、それぞれのブロックのx座標とy座標を設定するとともに、1回ループを回るごとに大きさbrickWidth x brickHeightのブロックをCanvas上に描画しています。問題はそれら全てを1箇所、座標(0,0)に描画していることです。それぞれのブロックのx座標とy座標を導出する計算を一回一回のループに含める必要があります。

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
- -

それぞれの座標brickXはbrickWidth + brickPaddingに列番号cをかけ、brickOffsetLeftをたしたものとして導出されます。brickYのロジックも同様ですが、行番号r、brickHeight、そしてbrickOffsetTopが用いられます。これで、それぞれのブロックは正しい行、列に間隔を空けて置かれ、左上端から一定の位置に描画されるようになりました。

- -

次のようにbrickXとbrickYの値を(0,0)の代わりに座標として代入するようにしたものがdrawBricks()の最終版となります。これをdrawPaddle()関数の下に追加してください。

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-            var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-            bricks[c][r].x = brickX;
-            bricks[c][r].y = brickY;
-            ctx.beginPath();
-            ctx.rect(brickX, brickY, brickWidth, brickHeight);
-            ctx.fillStyle = "#0095DD";
-            ctx.fill();
-            ctx.closePath();
-        }
-    }
-}
- -

ブロックを描画する

- -

drawBricks()へ呼び出しをdraw()関数のどこかに追加して、このレッスンの仕上げとしましょう。最初のあたりの、Canvasを消去する部分とボールを描画する部分の間あたりが良いでしょう。drawBall()の呼び出しのすぐ前に次の行を追加してください。

- -
drawBricks();
-
- -

自分のコードと比べる

- -

ここまででゲームは更にもう少し面白くなりました。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/Lu3vtejz/","","395")}}

- -

 

- -
-

練習: 行や列にあるブロックの数や位置を替えてみましょう。

-
- -

次のステップ

- -

というわけでついにブロックができました。でもボールはブロックに全く反応しません。第7章、衝突検知ではこれを変えます。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/collision_detection/index.html deleted file mode 100644 index ca89b6aaee..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/collision_detection/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: 衝突検出 -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち7番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson7.htmlで入手できます。

-
- -

ブロックは既に画面上に現れていますが、ボールが素通りしてしまうのでは面白くありません。ボールがブロックで弾み、ブロックが壊れるように衝突検出を追加することを考えなくてはなりません。

- -

これをどのように実装するかは私達が決められることですが、ボールが長方形に接触しているかどうか計算するというのは、Canvasには助けになる関数もないため難しいかもしれません。このチュートリアルでは最も簡単な方法をとります。ボールの中心が与えられたブロックのどれかに衝突していないか確認するのです。これは毎回完璧な結果を返すとは限りませんし、衝突検出をするにはもっと洗練された方法がありますが、基本的な概念を学ぶには十分です。

- -

衝突検出関数

- -

最初の第一歩として、毎フレーム描画されるたびに全てのブロックを通してループし、ひとつひとつのブロックの位置をボールの座標と比較する衝突検出関数を作成しましょう。コードがより読みやすくなるように、衝突検出のループの中でブロックオブジェクトを保存する変数bを定義します。

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // いろいろな計算
-        }
-    }
-}
- -

もしボールの中央がブロックの1つの座標の内部だったらボールの向きを変えます。ボールの中央がブロックの内部にあるためには次の4つの命題が全て真でなければなりません。

- - - -

コードに書き下ろしてみましょう。

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

上記のブロックを自分のコードのkeyUpHandler()関数の下に追加してください。

- -

ブロックが当たった後に消えるようにする

- -

上記のコードは期待したとおり動作し、ボールの向きを変えるはずです。問題はブロックがそのままとどまっているということです。ボールに既に当たったブロックを取り除く方法を考え出さなければなりません。これはそれぞれのブロックを画面上に描画したいかどうかを示す新たなパラメーターを追加することで達成できます。ブロックを初期化している部分のコードで、それぞれのブロックオブジェクトにstatusプロパティを追加しましょう。次の部分のコードをハイライトした行で示したように更新してください。

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

次に、それぞれのブロックを描画する前にstatusプロパティの値をdrawBricks()関数で確認します。もしstatusが1なら描画します。でももし0ならそのブロックは既にボールに当たっていますから、これ以上画面上に描画されてほしくありません。自分のdrawBricks()関数を次のように更新してください。

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            if(bricks[c][r].status == 1) {
-                var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-                var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
-                bricks[c][r].x = brickX;
-                bricks[c][r].y = brickY;
-                ctx.beginPath();
-                ctx.rect(brickX, brickY, brickWidth, brickHeight);
-                ctx.fillStyle = "#0095DD";
-                ctx.fill();
-                ctx.closePath();
-            }
-        }
-    }
-}
- -

衝突検出関数で状態を追跡、更新する

- -

ここではcollisionDetection()関数内でstatusプロパティをブロックに紐づけていきます。もしブロックがアクティブ (状態が1) なら衝突が起きるかどうか確認します。もし衝突が起きるのなら、画面上に描画されないようにそのブロックの状態を0に設定します。自分のcollisionDetection()関数を以下に示すように更新してください。

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

衝突検出を有効にする

- -

collisionDetection()関数への呼び出しをメインのdraw()関数に追加して仕上げとします。次の行をdraw()関数の、drawPaddle()の呼び出しのすぐ下に追加してください。

- -
collisionDetection();
-
- -

コードを比べる

- -

これでボールの衝突検出がそれぞれのブロックに対してフレームごとに確認されるようになりました。ブロックを壊せるようになったのです。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/kaed3hbu/","","395")}}

- -

 

- -
-

練習: ボールの色をブロックに当たったときに変えましょう。

-
- -

次のステップ

- -

着実にゴールに近づいています。では、先に進みましょう。第8章ではどのようにスコアと勝ち負けを記録するか見てみます。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html deleted file mode 100644 index 86704e0661..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Canvasを作ってその上に描画する -slug: >- - Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち1番最初のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson1.htmlで入手できます。

-
- -

ゲームの機能を書き始める前に、ゲーム内部を記述する基本的な構造を作る必要があります。これにはHTMLと{{htmlelement("canvas")}}要素を用います。

- -

ゲームのHTML

- -

ゲームは全て{{htmlelement("canvas")}}要素に描画されるため、HTML文書構造は極めて簡潔です。好きなテキストエディタを使って新しいHTML文書を作成し、適当な場所にindex.htmlとして保存してください。そして、そのHTML文書に次のコードを追加します。

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScriptのコードがここに入ります
-</script>
-
-</body>
-</html>
-
- -

charset を定義し、{{htmlelement("title")}}と簡単ななCSSをヘッダに記述しました。本体には{{htmlelement("canvas")}}と{{htmlelement("script")}}要素があり、前者にはゲームを描画し、後者にはそれを制御するJavaScriptのコードを記述します。{{htmlelement("canvas")}}要素は簡単に参照を取得できるようにmyCanvasというidを持ち、幅は480ピクセル、高さは320ピクセルとしています。このチュートリアルで書く全てのJavaScriptのコードは開始の<script>と終了の</script>タグの間に配置されます。

- -

Canvasの基本

- -

実際に{{htmlelement("canvas")}}要素に映像を描画するために、まずはJavaScriptから要素への参照を取得しなければなりません。次のコードを開始の<script>タグのあとに追記してください。

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

ここでは{{htmlelement("canvas")}}要素への参照をcanvasに保存しています。それから2D描画コンテキストを保存するためにctx変数を作成しています。2D描画コンテキストは実際にCanvasに描画するために使うツールとなります。

- -

赤い四角形をキャンバスの上に表示するコード例を見てみましょう。下記のコードを先程記述したJavaScriptのあとに追記して、index.htmlをブラウザで読み込んでみてください。

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

全ての命令は{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドの間に記述されています。四角形を{{domxref("CanvasRenderingContext2D.rect()","rect()")}}を用いて定義しています。最初の2つの値は左上の角のキャンバス上での座標を指定し、あとの2つの値は幅と高さを指定しています。今回描画された四角形は画面の左端から20ピクセル、上端から40ピクセルの位置に幅50ピクセル、高さ50ピクセルの大きさで、正方形になっています。{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは{{domxref("CanvasRenderingContext2D.fill()","fill()")}}メソッドで用いられる色 (今回は赤) を保存します。

- -

もちろん四角形だけではありません。ここでは緑の円を描画するコードを紹介します。次のコードを自分のJavaScriptの最後に追記し、保存して再読込してみてください。

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

見て分かるとおり、{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}メソッドと{{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}メソッドが再び用いられています。その間にこのコードで最も重要な部分、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッドが呼び出されています。このメソッドは6つのパラメーターを持ちます。

- - - -

{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}プロパティは先程とは違う形になっています。これはCSSでそうであるように、色は16進値、色キーワード、rgba()関数、その他利用可能な色メソッドなら何でも指定することができるからです。

- -

図形を{{domxref("CanvasRenderingContext2D.fill()","fill()")}}で塗りつぶすかわりに{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}で縁だけ色を付けることも出来ます。次のコードも自分のJavaScriptに追記してみてください。

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

上記のコードは青く縁取られたからの四角形を描画します。rgba()関数内のアルファチャネルにより青色は半透明になっています。

- -

自分のコードと比べる

- -

以下がJSFiddleで即実行可能な最初のレッスンのソースコード全てです。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","395")}}

- -

 

- -
-

練習: 与えられた図形の大きさや色を変えてみましょう。

-
- -

次のステップ

- -

ここまでで基本的なHTMLを組み上げcanvasに少し学習しました。それでは、第2章に進みどうやってゲーム内のボールを動かすか学びましょう。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/finishing_up/index.html deleted file mode 100644 index 7078862a9b..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/finishing_up/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 仕上げ -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち10番目、最後のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson10.htmlで入手できます。

-
- -

書いたゲームのどれも常に改善の余地があります。例えば、プレイヤーに1つ以上のライフを与えることができます。1回や2回間違えてもゲームを終わらせられるようにするのです。また、描画も改善できます。

- -

プレイヤーにライフを与える

- -

ライフを実装するのは極めて単純です。まずは他の変数を宣言したところと同じところにライフの数を保存する変数を追加しましょう。

- -
var lives = 3;
- -

ライフカウンタを描画するのはスコアカウンタを描画するのとほとんど同じです。次の関数を自分のコードのdrawScore()の下に追加してください。

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

ライフがなくなるまで、ゲームをすぐ終わらせるかわりにライフの数を減らします。draw()関数内の次の2行を置き換えます。

- -
alert("GAME OVER");
-document.location.reload();
- -

これに以下で示すようなもう少し複雑なロジックを追加します。

- -
lives--;
-if(!lives) {
-    alert("GAME OVER");
-    document.location.reload();
-}
-else {
-    x = canvas.width/2;
-    y = canvas.height-30;
-    dx = 2;
-    dy = -2;
-    paddleX = (canvas.width-paddleWidth)/2;
-}
- -

ボールが画面下端に当たったときにlives変数からライフを1つひきます。もしライフが残っていなかったらゲームは負けです。まだ残っているライフがあったらボールとパドルの位置、ボールの動きがリセットされます。

- -

ライフ表示を描画する

- -

draw()関数内にdrawLives()への呼び出しを追加する必要があります。drawScore()の呼び出しの下に追記してください。

- -
drawLives();
-
- -

requestAnimationFrame()で描画を改善する

- -

 ではゲーム機構に直結しない部分、描画に関わる部分にとりかかりましょう。{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}}は今は{{domxref("windowTimers.setInterval()", "setInterval()")}}で実装している固定フレームレートよりもより良くブラウザがゲームを描画できるようにします。

- -
setInterval(draw, 10);
- -

これを簡単に次の行で置き換えます。

- -
draw();
- -

それから、draw()関数の一番下 (閉じ波括弧のすぐ前) に次の行を追加し、draw()関数が自分自身を何度も呼び出すようにします。

- -
requestAnimationFrame(draw);
- -

これでdraw()関数がrequestAnimationFrame()ループの中で何度も実行されるようになりましたが、固定の10ミリ秒のフレームレートではなくブラウザに制御を託しています。ブラウザはフレームレートを適切に同期し図形を必要なときだけ描画します。これは古いsetInterval()メソッドよりも効率的で滑らかなアニメーションループを生み出します。

- -

自分のコードを比べる

- -

これで全部です。ゲームの最終版が準備でき、プレイできる状態になりました。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

- -

 

- -
-

練習: ライフの数とパドルでボールが跳ねる角度を替えてみましょう。

-
- -

ゲームクリア - 今のところは。

- -

おめでとうございます。これで全てのレッスンを終えました。ここまでで、キャンバス操作の基本をと簡単な2Dゲームの裏にあるロジックを学んだはずです。フレームワークを学びゲーム開発を続ける良い時期です。このシリーズに対応するPhaserを使ったブロックくずしゲームやデバイス回転方向を使った2D 迷路ゲームチュートリアルを見てみると良いでしょう。MDNのゲームセクションで発想やより多くの知識を探してみても良いでしょう。

- -

また、このチュートリアルシリーズの目次を見返せます。コーディングを楽しみましょう。

- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html deleted file mode 100644 index 9bd90da3cd..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/game_over/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: ゲームオーバー -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

- -
これはゲーム開発Canvasチュートリアルの10ステップのうち5番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson5.htmlで入手できます。
- -

ボールが壁で弾むのを見たりパドルを左右雨に動かしたりできるのは楽しいですが、そのことを除くとこのゲームは何もせず、進捗や最終目標といったものが全くありません。ゲームプレイの観点からすると、まず負けることができるようにするのが良いでしょう。ブロック崩しで負けるということの裏にある論理は簡潔です。もしパドルでボールを逃してボールが画面の下端についてしまったらゲームオーバーになるのです。

- -

ゲームオーバーを実装する

- -

自分のゲームにゲームオーバーを実装してみましょう。3章ではボールを壁で弾むようにしました。以下はその引用です。

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

4辺全てでボールを弾ませるのではなく、3辺、すなわち上端と左右のみで弾むようにしましょう。底を打ったときゲームは終わりになります。2番目のif節を編集して、ボールがキャンバスの下端で衝突したときにゲームオーバー状態が発動するif else節にしましょう。ここでは簡単に、アラートメッセージを表示して、ページの再読込によりゲームを再開するだけにしましょう。

- -

まず、 setInterval() を最初に呼び出しているところを置き換えます。

- -

 

- -
setInterval(draw, 10);
- -

 

- -

置き換え後

- -
var interval = setInterval(draw, 10);
- -

 

- -

次に2番目のif節を次の内容で置き換えましょう。

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-    clearInterval(interval); // Needed for Chrome to end game
-}
- -

パドルをボールに当てる

- -

このレッスンのしあげに、ボールとパドルの衝突検出を作り、ボールが弾んでプレイエリアに戻ってくるようにしましょう。最も簡単なやり方はボールがパドルの左端と右端の間にあるか確認することです。最後に編集したコードを今度は次のように書き換えます。

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-    }
-}
- -

ボールがCanvasの下端に当たっていたら、パドルにも当たっているかどうか確認します。もしパドルに当たっていたら、思ったとおりにボールは弾みます。当たらなかったら、先ほどと同じようにゲームオーバーになります。

- -

自分のコードと比べる

- -

自分のコードと比べられるように、実際に動くコードを以下に示します。

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/L61c9y50/","","395")}}

- -
-

練習: ボールがパドルに当たったときに速く動くようにしましょう。

-
- -

次のステップ

- -

今のところかなり順調に進歩してきていて、ゲームも負けるようになったことでもっと遊ぶ価値が感じられるようになってきました。第六章『ブロックのかたまりを作る』に進み、ボールが壊せるブロックを作りましょう。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/index.html deleted file mode 100644 index e708967860..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: そのままのJavaScriptを使ったブロックくずしゲーム -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}}

- -

このステップ・バイ・ステップのチュートリアルでは全てJavaScriptだけで書かれた、HTML5 {{htmlelement("canvas")}}で表示できる簡単なMDN ブロックくずしゲームを作ります。

- -

全てのステップには編集可能かつすぐに実行できるサンプルがあり、どのような過程で作るべきか確認できます。映像の描画、移動、当たり判定、操作機構、勝ち負けの状態といった基礎的なゲームの仕組みを{{htmlelement("canvas")}}要素を使って実装する基本を学びましょう。

- -

このシリーズのほとんどの記事は理解するために初歩または中級レベルのJavaScriptの知識を必要とします。このチュートリアルを一通りこなすことで簡単なWebゲームを作れるようになるでしょう。

- -

Gameplay screen from the game MDN Breakout where you can use your paddle to bounce the ball and destroy the brick field, with keeping the score and lives.

- -

レッスン詳細

- -

全てのレッスン、そしてこれから一緒に作るMDNブロック崩しゲームの各バージョンはGitHub上で入手可能です:

- -
    -
  1. Canvasを作ってその上に描画する
    2. -
  2. ボールを動かす
    3. -
  3. ボールを壁で弾ませる
    4. -
  4. パドルとキーボード操作
    5. -
  5. ゲームオーバー
    6. -
  6. ブロックのかたまりを作る
    7. -
  7. 衝突検出
    8. -
  8. スコアと勝ち負けを記録する
    9. -
  9. マウス操作
    10. -
  10. 仕上げ
    11. -
- -

まずはJavaScriptだけで始めるのがWebゲーム開発の確実な知識を手に入れる一番良い方法です。そのあと、自分のプロジェクトで使うフレームワークを選びましょう。フレームワークはJavaScript言語で書かれた単なるツールです。ですから、たとえフレームワークを用いて開発しようとしていてもまずはその言語を学び、手元で実際に何が起こっているか理解すると良いでしょう。フレームワークは開発速度を上げ、ゲームのとるに足らない部分を処理してくれますが、もし何かが思ったように動かないなんてことがあったらいつでもデバッグしたり、あるいは単にJavaScriptで自分なりの解を出すということもできるのです。

- -
-

ノート: ゲームライブラリを用いた2D Webゲーム開発に興味があるのであれば、このシリーズに対応するPhaserを使ったブロックくずしゲームも参照してください。

-
- -
-

ノート: このシリーズはゲーム開発ワークショップのハンズオンの資料として使えます。ゲーム開発全般について話すつもりならこのチュートリアルに基づいたGamedev Canvas Content Kitも利用できます。

-
- -

次のステップ

- -

それでは始めましょう! 最初の章、『Canvasを作ってその上に描画する』に進みます。

- -

{{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it")}} 

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html deleted file mode 100644 index 51da95cada..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/mouse_controls/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: マウス操作 -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち9番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson9.htmlで入手できます。

-
- -

ゲーム自体は実際に完成したので、磨き上げにかかりましょう。既にキーボード操作を追加していますが、マウス操作も簡単に追加できます。

- -

マウスの動作を監視する

- -

マウスの操作を監視するのはキー入力を監視するのよりも簡単です。{{event("mousemove")}}イベントのリスナーさえあればよいのです。次の行を、他のイベントリスナーの近く、keyup eventのすぐ下に追記してください。

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

パドルの動きをマウスの動きと紐付ける

- -

パドルの位置をカーソルの座標に基づいて更新することができます。次のハンドラ関数は実際にそれを行います。次の関数を自分のコードの、先程追記したコードのすぐ下に追記しましょう。

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

この関数ではまずビューポートの水平方向のマウスの位置 (e.clientX) からキャンバスの左端とビューポートの左端の距離 (canvas.offsetLeft) をひいてrelativeXの値を導出します。これはキャンバスの左端とマウスカーソルの距離とちょうど同じになります。もしカーソルの相対X座標が0より大きくCanvasの幅より小さいのならば、カーソルはキャンバス内にあります。また、座標paddleX (パドルの左端と紐付けられている) は、パドルの中点で対称に動くようにrelativeXの値からパドルの幅の半分をひいた値に設定されます。

- -

パドルはマウスカーソルの位置を追うようになりますが、動きをCanvasの大きさに制限しているため、両端で消え失せてしまうようなことはありません。

- -

自分のコードと比べる

- -

比較用にコードの最新の状態を示します。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

- -

 

- -
-

練習: パドル動作の境界を調節して、Canvasの両端でもパドルの半分ではなく全体が見えるようにしてください。

-
- -

次のステップ

- -

最後に微調整する準備が整った、完全なゲームが完成しました。では、仕上げに入りましょう。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html deleted file mode 100644 index b1a53ead12..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/move_the_ball/index.html +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: ボールを動かす -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち2番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson2.htmlで入手できます。

-
- -

前回のレッスンを一通りこなしてみてボールの描き方が分かりました。では今回はそれを動かしましょう。技術的には、ボールを描画し、またそれを消してからほんの少し違う位置に描画し直すという処理を毎フレームずつ行うことで動いているような印象を生み出します。ちょうど映画がどのように動くのかと同じです。

- -

描画ループを定義する

- -

Canvasの映像を毎フレーム、定期的に更新し続けるためには、何度も実行されるような関数を定義する必要があります。この関数には画像の位置を変えたりするために毎回違う値が与えらます。{{domxref("WindowTimers.setInterval()", "setInterval()")}}や{{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}といったJavaScriptのタイミング関数を用いれば同じ関数を何度も実行できます。

- -

HTMLファイル内に既に書かれているJavaScriptを最初の2行を除いて全て削除し、次のコードを追記してください。draw()関数がsetIntervalの中で10ミリ秒おきに実行されます。

- -
function draw() {
-    // 描画コード
-}
-setInterval(draw, 10);
- -

無限に続く setInterval の性質のため、draw()は10ミリ秒おきにずっと、あるいは私達が止めるまで呼ばれ続けます。では、ボールを描画してみましょう。draw()関数の中に下記のコードを追記してください。

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

では、書き換えたコードを試してみましょう。ボールが毎フレーム再描画されるはずです。

- -

ボール動かす

- -

動きがないのでボールが再描画され続けていることに気づかないはずです。動きを加えてみましょう。まず、直書きされた位置 (50,50) のかわりに x、yという名の変数に開始位置を中央下端として定義し、それらを用いて円が描画される位置を定義します。

- -

まず、xとyを定義するために自分の draw()関数の上に次の2行を追加しましょう。

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

次に、{{domxref("CanvasRenderingContext2D.arc()","arc()")}}メソッド内で変数xと変数yを使うようにdraw() 関数を書き換えましょう。次のハイライトされている行のとおりです。

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
- -

ここからが大事な部分です。xとyに毎フレーム描画した後に小さな値を加え、ボールが動いているように見せるのです。その小さな値をdx、dyとして2、-2をそれぞれ設定しましょう。変数x、yの定義のあとに次のコードを追記してください。

- -
var dx = 2;
-var dy = -2;
-
- -

最後に残っていることがあります。フレームごとにxとyを変数dx、dyで更新して、更新されるたびにボールが新しい位置に描画されるようにするのです。次に示されている新しい2行をdraw()関数の最後に追記してください。

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
- -

コードを保存してください。問題なく動作しますが、ボールの軌跡が残ります。

- -

- -

フレームの後にCanvasを消去する

- -

前のフレームを削除せずに毎フレーム描画しているために軌跡が残ってしまいます。でも心配する必要はありません。Canvasの内容を消去するメソッド、{{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}があります。このメソッドは4つのパラメータをとります。四角形の左上端のx、y座標と四角形の右下端のx、y座標です。この四角形で囲われた領域にある内容全てが消去されます。

- -

次のハイライトされている新しい行をdraw()関数に追記してください。

- -
function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
-
- -

コードを保存してもう一度試してみてください。今度は軌跡のないボールがみえるはずです。10ミリ秒おきにキャンバスは消去され、青い円 (ボール) が指定された位置に描画され、 xとyの値は次のフレームに備えて更新されます。

- -

コードを整える

- -

次のいくつかの記事ではdraw()関数にもっと命令を追加します。ですからdraw()関数をできるだけ簡潔にしておくのは大事なことです。ボールを描画するコードを別の関数に移しましょう。

- -

既にあるdraw()関数を次の2つの関数で置き換えてください。

- -
function drawBall() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBall();
-    x += dx;
-    y += dy;
-}
- -

自分のコードと比べる

- -

この記事で組み上げた自分のコードを下のライブデモで確認したり、書き換えたりしてどのように動いているかしっかり理解しましょう。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}}

- -

 

- -
-

練習: 動くボールの速さや向きを変えてみましょう。

-
- -

次のステップ

- -

ボールを描画して動くようにしましたが、そのままCanvasの縁から消えていってしまいます。第3章ではどのようにボールを壁で弾ませるか探っていきます。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html deleted file mode 100644 index 1602332d81..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: パドルとキーボード操作 -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち4番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson4.htmlで入手できます。

-
- -

ボールは壁で自由に弾み、あなたはずっとそれを見ていることができますが、今の所何の対話要素もありません。操作できないものなんてゲームじゃありません! ですからユーザーとの対話要素、操作できるパドルを追加しましょう。

- -

ボールにぶつかるパドルを定義する

- -

そういうわけで、ボールに当てるパドルが必要になりました。パドルに用いるいくつかの変数を定義しましょう。次の変数を、他の変数と一緒にコードの一番上に追加してください。

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

ここではパドルの高さと幅、x軸上の開始地点を定義しています。続くコードではこれらを用いてさらなる計算が行われます。パドルを画面上に表示する関数を作成しましょう。drawBall()のすぐ下に次の関数を追加してください。

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

パドルを操作できるようにする

- -

こにパドルを描画しても良いですが、ユーザーの行動に応答する必要があります。キーボード操作を実装するのです。必要なものは次のとおりです。

- - - -

押されているボタンはこのとおり、ブーリアン値として定義、初期化できます。このコードをどこか他の変数の近くに追記してください。

- -
var rightPressed = false;
-var leftPressed = false;
- -

最初は制御ボタンは押されていないため、どちらにおいてもデフォルトの値はfalseです。ボタンが押されたのを検知するため、2つのイベントリスナーを設定します。JavaScriptの最後にあるsetInterval()の行のちょうど上に次のコードを追記してください。

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

キーボードのキーのどれかに対してkeydownイベントが発火したとき (どれかが押されたとき) 、keyDownHandler()関数が実行されます。2つ目のリスナーについても同様で、(そのキーが押されなくなったき) keyupイベントはkeyUpHandler()関数を呼び出します。自分のaddEventListener()の行の下に次のコードを追記してください。

- -
function keyDownHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = true;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = true;
-    }
-}
-
-function keyUpHandler(e) {
-    if(e.key == "Right" || e.key == "ArrowRight") {
-        rightPressed = false;
-    }
-    else if(e.key == "Left" || e.key == "ArrowLeft") {
-        leftPressed = false;
-    }
-}
- -

キーが押されたとき、その情報は変数に保存されます。それぞれの場合で関連する変数がtrueに設定されます。キーが離されたときに変数はfalseに戻されます。

- -

どちらの関数も変数eで表されるイベントをパラメーターとしてとります。これから有用な情報が手に入ります。keyは押されたキーについての情報を持っています。大抵のブラウザでは左右の矢印キーにそれぞれ ArrowLeft と ArrowRight が対応します。ただし IE/Edge に対応するために、 Left と Rightも確認する必要があります。 もし左カーソルが押されたら、変数leftPressedはtrueに、離されたら変数leftPressedはfalseに設定されます。右カーソルと変数rightPressedについても同様です。

- -

パドルの移動ロジック

- -

押されているキーについての情報を保存している変数、そして関連する関数が設定されました。ではそれらを使う実際のコードに手を入れて画面上のパドルを動かしてみましょう。draw()関数の中で、各々のフレームを描画するときに左カーソルキーが押されているか、右カーソルが押されているか確認しましょう。次のようなコードになっているでしょう。

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

左カーソルが押されていたら7ピクセル左に動き、右カーソルが押されていたら7ピクセル右に動きます。これだけでも良さそうですが、どちらかのキーを長く押し続けたらパドルがCanvasの縁から消えてしまいます。コードを次のように変えることでCanvasの境界内でのみ動くように改善できます。

- -
if(rightPressed && paddleX < canvas.width-paddleWidth) {
-    paddleX += 7;
-}
-else if(leftPressed && paddleX > 0) {
-    paddleX -= 7;
-}
- -

ここで用いられている位置paddleXは期待されているように左端の0と右端のcanvas.width-paddleWidth間で動きます。

- -

上記のコード片をdraw()関数の最後、閉じ波括弧のちょうど前に追記してください。

- -

あとはdrawPaddle()関数をdraw()関数から呼び出し、実際に画面に表示するようにすれば完了です。次の行をdraw()関数の、ちょうどdrawBall()を呼ぶ行の下に追記してください。

- -
drawPaddle();
-
- -

自分のコードと比べる

- -

自分のコードと比べられる、実際に動くコードがこちらになります。

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/t2udo69j/","","395")}}

- -

 

- -
-

練習: パドルを速く、または遅く動くようにしたり、大きさを変えたりしてみましょう。

-
- -

次のステップ

- -

ゲームっぽい要素を追加しましょう。今問題なのはただパドルでボールを永遠に打ち続けることしか出来ないという点です。これは第5章、ゲームオーバーでゲームの終了状態を追加することで完全に変わることになります。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}}

diff --git a/files/ja/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ja/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html deleted file mode 100644 index 44ba7aa804..0000000000 --- a/files/ja/games/workflows/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: スコアと勝ち負けを記録する -slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ja/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

これはゲーム開発Canvasチュートリアルの10ステップのうち8番目のステップです。このレッスンを終えたあとの完成予想のソースコードはGamedev-Canvas-workshop/lesson8.htmlで入手できます。

-
- -

ブロックを崩せるのは最高ですが、より素晴らしいものにするためにユーザーが壊した全てのブロックに対してポイントを与え、合計スコアのカウントを更新し続けましょう。

- -

スコアを数える

- -

ゲームを通してスコアを見せることができればあとで友達に自慢することができます。スコアを記録する変数が必要です。次の行を自分のJavaScriptの他の変数のあとに追記してください。

- -
var score = 0;
- -

スコア表示を作成し更新するためにdrawScore()関数も必要です。次のコードをcollisionDetection()関数のあとに追加してください。

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

文字をキャンバス上に描画するのは図形を描画するのと似ています。フォント定義はCSS出するものとちょうど同じように描きます。大きさとフォントの種類は{{domxref("CanvasRenderingContext2D.font","font()")}}メソッドで設定できます。それからフォントの色を設定するには{{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}}を、キャンバス上に配置される実際の文章を設定するには{{domxref("CanvasRenderingContext2D.fillText","fillText()")}}を使用してください。最初のパラメーターは文章自体です。上記のコードは現在のポイントの数を表示します。最後の2つのパラメーターは文章がキャンバス上に置かれる座標です。

- -

ブロックに当たるたびにスコアを与えるには、衝突が検出されるたびにスコア変数を増加させる1行をcollisionDetection()関数に追加します。次のハイライトされた行を自分のコードに追加してください。

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

draw()関数からdrawScore()を呼び続けることで新しいフレームごとにスコアは最新の状態に保たれます。次の行をdraw()の中、ちょうどdrawPaddle()の呼び出しの下に追加してください。

- -
drawScore();
- -

全てのブロックが崩されたときに勝利を伝えるメッセージを表示する

- -

ポイントを集め続けるという動作はうまく働きますが、永久に増やし続けることは出来ません。全てのブロックが崩されたらどうなるのでしょうか。何においてもそれこそがゲームの主目標なのですから、得られる全てのポイントが集まったときには勝利を伝えるメッセージを表示すべきです。次のハイライトされた部分を自分のcollisionDetection()関数に追記してください。

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("YOU WIN, CONGRATULATIONS!");
-                        document.location.reload();
-                    }
-                }
-            }
-        }
-    }
-}
- -

これのおかげで、全てのブロックが崩されたときにユーザーは実際にゲームに勝つことができます。ゲームにおいてはこれは非常に重要です。アラートのボタンがクリックされたらdocument.location.reload()関数はページを再読込しゲームをもう一度始めます。

- -

自分のコードと比べる

- -

自分のものと比べたいときのために最新のコードをいかに示します。このように見え、そして動くはずです。

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/b3z2Lpu9/","","395")}}

- -
-

練習: ブロックに当たるたびにより多くのポイントを追加し、ゲームの終わりに集めたポイントの数を表示するようにしましょう。

-
- -

次のステップ

- -

この時点でもこのゲームはかなりよく見えます。次のレッスンではマウス操作を追加することでゲームの魅力を広げます。

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/ja/games/workflows/index.html b/files/ja/games/workflows/index.html deleted file mode 100644 index 9d9b5e2ff3..0000000000 --- a/files/ja/games/workflows/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Workflows for different game types -slug: Games/Workflows -tags: - - Canvas - - Games - - JavaScript - - NeedsTranslation - - TopicStub - - Web - - Workflows -translation_of: Games/Tutorials ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

This page contains articles that highlight different workflows for effectively creating different types of web games, whether you want to create a 2D or 3D game from scratch, or port a C++ or Flash game over to open web technologies.

- -
-
2D breakout game using pure JavaScript
-
In this step-by-step tutorial you'll implement a simple breakout clone using pure JavaScript. Along the way you will learn the basics of using the {{htmlelement("canvas")}} element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.
-
2D breakout game using Phaser
-
In this step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thePhaser HTML5 game framework. This idea here is to teach some of the fundamentals (and advantages) of working with frameworks, along with fundamental game mechanics.
-
2D maze game with device orientation
-
This tutorial shows how to create a 2D maze game using HTML5, incorporating fundamentals such as collision detection and sprite placement on a {{htmlelement("canvas")}}. This is a mobile game that uses the Device Orientation and Vibration APIs to enhance the gameplay and is built using the Phaser framework.
-
diff --git a/files/ja/glossary/base64/index.html b/files/ja/glossary/base64/index.html new file mode 100644 index 0000000000..6e0e4f28db --- /dev/null +++ b/files/ja/glossary/base64/index.html @@ -0,0 +1,558 @@ +--- +title: Base64 のエンコードとデコード +slug: Web/API/WindowBase64/Base64_encoding_and_decoding +tags: + - Advanced + - Base64 + - JavaScript + - Typed Arrays + - URI + - URL + - Unicode Problem + - atob() + - btoa() +translation_of: Glossary/Base64 +--- +

Base64 とは、バイナリーからテキストへの符号化を行う手法のグループであり、64 を基数とする表現に変換することで、バイナリーデータを ASCII 文字列で表すことができます。Base64 という呼び方は、MIME の Content-Transfer-Encoding における特定の符号化方式の名前に由来します。

+ +

Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、MIME による電子メールや XML における複合型データの格納など、多くのアプリケーションで幅広く使われています。

+ +

JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。

+ + + +

atob() 関数は、Base64 符号化方式によりエンコードされている文字列をデコードしてバイナリー文字列を作ります。逆に btoa() 関数は、バイナリー文字列から Base64 でエンコードされた ASCII 文字列を作ります。

+ +

atob() と btoa() のどちらも、文字列に対して動作します。もし ArrayBuffer に対して動作させたい場合は、この段落 を読んでください。

+ +

符号化によるサイズ増加

+ +

Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト (3×8 ビット = 24 ビット) は、4 桁の Base64 で表されます (4×6 = 24 ビット)。

+ +

このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます (33% の増加)。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、length === 1 である文字列 "a" は、エンコードされて length === 4 の文字列 "YQ==" になり、これは 300% の増加です。

+ + + + + + + + +
+

参考文書

+ +
+
データ URL
+
データ URL は、RFC 2397 により定義されており、 これにより文書中に小さなファイルを埋め込むことができます。
+
Base64
+
ウィキペディアの Base64 符号化方式に関する記事です。
+
WindowOrWorkerGlobalScope ミックスイン
+
atob と btoa を規定し、これらは RFC 4648 により規定された Base64 にエンコードすると定めています。
+
RFC 4648
+
セクション 4 で Base64 のアルゴリズムを規定し、またセクション 5 で URL 向けの "base64url" アルゴリズム (こちらは atob や btoa では使われない) も定義しています。
+
{{domxref("WindowBase64.atob","atob()")}}
+
Base64 によりエンコードされている ASCII 文字列をデコードして、バイナリー文字列を作ります。
+
{{domxref("WindowBase64.btoa","btoa()")}}
+
バイナリー文字列から、Base64 によりエンコードされた ASCII 文字列を作ります。
+
あの「Unicode の問題」
+
ほとんどのブラウザーでは、Unicode 文字列を使って btoa() を実行すると、Character Out Of Range 例外が発生します。この段落では、これに対するいくつかの対策を説明しています。
+
URIScheme
+
Mozilla のサポートした URI スキームのリスト
+
StringView
+
この記事では、次を狙いとしたライブラリーを公開しています +
    +
  • 文字列に対する C 言語に似たインターフェイス (すなわち文字のコードの配列であり、JavaScript では ArrayBufferView) を JavaScript の ArrayBuffer インターフェイスを使って作ること
    • +
  • 文字列に似たオブジェクト (これからは stringView) 向けの、不変である JavaScript 文字列に対してではなく必ず数値の配列に対して働く、メソッドのコレクションを作ること
    • +
  • JavaScript デフォルトである UTF-16 の DOMString 以外の Unicode でも動作すること
    • +
+
+
+ +

全て表示...

+ 		+

ツール

+ + + +

全て表示...

+ + + + +
+ +

あの「Unicode の問題」

+ +

DOMString は 16 ビットで符号化された文字列であるので、Unicode 文字列を使って window.btoa を実行すると、8 ビットの範囲 (0x00~0xFF) を超えた文字がある場合に、ほとんどのブラウザーで Character Out Of Range 例外が発生します。以下は、この問題を解決するための 5 つの方法です。

+ + + +

方法 1 – JavaScript の UTF-16 => Base64

+ +

Unicode 問題を解決する、非常に高速で幅広く使われている方法は、JavaScript のネイティブ UTF-16 文字列を直接 Base64 にエンコードすることです。デモのために URL data:text/plain;charset=utf-16;base64,OCY5JjomOyY8Jj4mPyY= を開いてください (このデータ URL をコピーし、新しいタブを開き、データ URL をアドレスバーに貼り付け、エンターをを押す)。この方法は、文字列を配列に割り当てるところを除き、どのような種類の変換も必要としないため、特に効率的です。次のコードは、Base64 文字列から ArrayBuffer に変換したり、その逆変換をするのにも便利です (下記参照)。

+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities (#1)
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+|*|
+|*|  Author: madmurphy
+|*|
+\*/
+
+/* Array of bytes to base64 string decoding */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlockSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+    }
+  }
+
+  return aBytes;
+}
+
+/* Base64 string to array encoding */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = "";
+
+  for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    /* Uncomment the following line in order to split the output in lines 76-character long: */
+    /*
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    */
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return  eqLen === 0 ?
+      sB64Enc
+    :
+      sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "==");
+
+}
+
+ +

テスト

+ +
var myString = "☸☹☺☻☼☾☿";
+
+/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */
+
+var aUTF16CodeUnits = new Uint16Array(myString.length);
+Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = myString.charCodeAt(idx); });
+var sUTF16Base64 = base64EncArr(new Uint8Array(aUTF16CodeUnits.buffer));
+
+/* 出力を表示する */
+
+alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY="
+
+/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */
+
+var sDecodedString = String.fromCharCode.apply(null, new Uint16Array(base64DecToArr(sUTF16Base64, 2).buffer));
+
+/* 出力を表示する */
+
+alert(sDecodedString); // "☸☹☺☻☼☾☿"
+ +

生成された Base64 文字列はどこでも使えますが、UTF-16 で表現されています。もし UTF-8 を望む場合は次の方法を参照してください。

+ +

方法 1 に対する補足: Base64 文字列を Uint8Array や ArrayBuffer にデコードする

+ +

上記の関数を使って、Base64 でエンコードされた文字列から Uint8Array や ArrayBuffer を作ることもできます。

+ +
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8)
+
+var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8)
+
+alert(myBuffer.byteLength);
+ +
注意: 関数 base64DecToArr(sBase64[, nBlockSize]) は、8 ビットの Uint8Array を返します。もし 16 ビット / 32 ビット / 64 ビットの生データのバッファを作ることが目的であれば、引数 nBlockSize を使ってください。これはバイト数であり、Uint8Array.buffer.bytesLength プロパティはその倍数になります (1 や省略された場合は ASCII、バイナリーデータ、バイナリー文字列、UTF-8 文字列向けです。2 は UTF-16 文字列向け、4 は UTF-32 文字列向けです)。
+ +

完全なライブラリーは StringView – 型付き配列に基づく C 言語に似た文字列表現 を参照してください (ソースコードは GitHub で利用できます)。

+ +

方法 2 – JavaScript の UTF-16 => UTF-8 => Base64

+ +

この方法は、JavaScript ネイティブの UTF-16 文字列を UTF-8 文字列に変換し、それを Base64 でエンコードします。これにより、純粋な ASCII 文字列から Base64 への変換は、ネイティブの btoa() のように、常に同じ結果を出力します。

+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities (#2)
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+|*|
+|*|  Author: madmurphy
+|*|
+\*/
+
+/* Array of bytes to base64 string decoding */
+
+function b64ToUint6 (nChr) {
+
+  return nChr > 64 && nChr < 91 ?
+      nChr - 65
+    : nChr > 96 && nChr < 123 ?
+      nChr - 71
+    : nChr > 47 && nChr < 58 ?
+      nChr + 4
+    : nChr === 43 ?
+      62
+    : nChr === 47 ?
+      63
+    :
+      0;
+
+}
+
+function base64DecToArr (sBase64, nBlockSize) {
+
+  var
+    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
+    nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen);
+
+  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
+    nMod4 = nInIdx & 3;
+    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
+    if (nMod4 === 3 || nInLen - nInIdx === 1) {
+      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
+        aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
+      }
+      nUint24 = 0;
+    }
+  }
+
+  return aBytes;
+}
+
+/* Base64 string to array encoding */
+
+function uint6ToB64 (nUint6) {
+
+  return nUint6 < 26 ?
+      nUint6 + 65
+    : nUint6 < 52 ?
+      nUint6 + 71
+    : nUint6 < 62 ?
+      nUint6 - 4
+    : nUint6 === 62 ?
+      43
+    : nUint6 === 63 ?
+      47
+    :
+      65;
+
+}
+
+function base64EncArr (aBytes) {
+
+  var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = "";
+
+  for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
+    nMod3 = nIdx % 3;
+    /* Uncomment the following line in order to split the output in lines 76-character long: */
+    /*
+    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
+    */
+    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
+    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
+      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
+      nUint24 = 0;
+    }
+  }
+
+  return  eqLen === 0 ?
+      sB64Enc
+    :
+      sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "==");
+
+}
+
+/* UTF-8 array to DOMString and vice versa */
+
+function UTF8ArrToStr (aBytes) {
+
+  var sView = "";
+
+  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
+    nPart = aBytes[nIdx];
+    sView += String.fromCharCode(
+      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
+        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
+        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
+        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
+        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
+        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
+      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
+        (nPart - 192 << 6) + aBytes[++nIdx] - 128
+      : /* nPart < 127 ? */ /* one byte */
+        nPart
+    );
+  }
+
+  return sView;
+
+}
+
+function strToUTF8Arr (sDOMStr) {
+
+  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
+
+  /* mapping... */
+
+  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
+    nChr = sDOMStr.charCodeAt(nMapIdx);
+    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
+  }
+
+  aBytes = new Uint8Array(nArrLen);
+
+  /* transcription... */
+
+  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
+    nChr = sDOMStr.charCodeAt(nChrIdx);
+    if (nChr < 128) {
+      /* one byte */
+      aBytes[nIdx++] = nChr;
+    } else if (nChr < 0x800) {
+      /* two bytes */
+      aBytes[nIdx++] = 192 + (nChr >>> 6);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x10000) {
+      /* three bytes */
+      aBytes[nIdx++] = 224 + (nChr >>> 12);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x200000) {
+      /* four bytes */
+      aBytes[nIdx++] = 240 + (nChr >>> 18);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else if (nChr < 0x4000000) {
+      /* five bytes */
+      aBytes[nIdx++] = 248 + (nChr >>> 24);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    } else /* if (nChr <= 0x7fffffff) */ {
+      /* six bytes */
+      aBytes[nIdx++] = 252 + (nChr >>> 30);
+      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
+      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
+      aBytes[nIdx++] = 128 + (nChr & 63);
+    }
+  }
+
+  return aBytes;
+
+}
+ +

テスト

+ +
/* テスト */
+
+var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
+
+var aMyUTF8Input = strToUTF8Arr(sMyInput);
+
+var sMyBase64 = base64EncArr(aMyUTF8Input);
+
+alert(sMyBase64); // "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="
+
+var aMyUTF8Output = base64DecToArr(sMyBase64);
+
+var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
+
+alert(sMyOutput); // "Base 64 — Mozilla Developer Network"
+ +

方法 3 – JavaScript の UTF-16 => バイナリー文字列 => Base64

+ +

これは、最も速く最もコンパクトな方法です。出力は方法 1 (UTF-16 ででエンコードされた文字列) のものと全く同じですが、{{domxref("WindowBase64.atob","atob()")}} と {{domxref("WindowBase64.btoa","btoa()")}} を書き直すのではなく、ネイティブのものを使います。この方法はエンコードまたはデコードの入力として、型付き配列の代わりに、中間フォーマットであるバイナリー文字列を使います。方法 1 (バイナリー文字列 は灰色の領域です) に比べると、これは「汚い」回避策ではありますが、問題なく動作し、必要なコードはわずか数行です。

+ +
"use strict";
+
+/*\
+|*|
+|*|  Base64 / binary data / UTF-8 strings utilities (#3)
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
+|*|
+|*|  Author: madmurphy
+|*|
+\*/
+
+function btoaUTF16 (sString) {
+
+	var aUTF16CodeUnits = new Uint16Array(sString.length);
+	Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = sString.charCodeAt(idx); });
+	return btoa(String.fromCharCode.apply(null, new Uint8Array(aUTF16CodeUnits.buffer)));
+
+}
+
+function atobUTF16 (sBase64) {
+
+	var sBinaryString = atob(sBase64), aBinaryView = new Uint8Array(sBinaryString.length);
+	Array.prototype.forEach.call(aBinaryView, function (el, idx, arr) { arr[idx] = sBinaryString.charCodeAt(idx); });
+	return String.fromCharCode.apply(null, new Uint16Array(aBinaryView.buffer));
+
+}
+ +

テスト

+ +
var myString = "☸☹☺☻☼☾☿";
+
+/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */
+
+var sUTF16Base64 = btoaUTF16(myString);
+
+/* 出力を表示する */
+
+alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY="
+
+/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */
+
+var sDecodedString = atobUTF16(sUTF16Base64);
+
+/* 出力を表示する */
+
+alert(sDecodedString); // "☸☹☺☻☼☾☿"
+
+ +

バイナリー文字列の代わりに型付き配列を使う、よりクリーンな方法については、方法 1 と方法 2 を参照してください。

+ +

方法 4 – エンコード前に文字列をエスケープ処理する

+ +
function b64EncodeUnicode(str) {
+    // 最初に encodeURIComponent を使って "%" でエンコードされた UTF-8 文字列を取得し、
+    // 次に "%" でエンコードされた文字列をバイナリー文字列に変換し、
+    // それを btoa に与えます。
+    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
+        function toSolidBytes(match, p1) {
+            return String.fromCharCode('0x' + p1);
+    }));
+}
+
+b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
+b64EncodeUnicode('\n'); // "Cg=="
+
+ +

Base64 でエンコードされた値を元の文字列に戻すには、次のようにします。

+ +
function b64DecodeUnicode(str) {
+    // 逆変換: バイナリー文字列から "%" エンコードへ、そしてオリジナルの文字列へ。
+    return decodeURIComponent(atob(str).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+}
+
+b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+b64DecodeUnicode('Cg=='); // "\n"
+
+ +

Unibabel は、この方法を使った共通の変換を実装しています。

+ +

方法 5 – DOM の atob() や btoa() を JavaScript の TypedArray と UTF-8 を使って書き換える

+ +

TextEncoder のポリフィル、例えば TextEncoding (レガシーの Windows、Mac、ISO のエンコーディングも含む) や TextEncoderLite を、モダンブラウザーと Node.js の両方で使える Buffer または base64-js や TypeScript 版の base64-js のような Base64 実装とを、組み合わせて使います。

+ +

ネイティブの TextEncoder 実装がない場合、最も軽量な方法は 方法 3 でしょう。なぜなら、とても高速であることに加え、方法 3 は標準状態の IE9 でも動作するからです。 もう一つの方法は、TextEncoderLite と base64-js を使うことです。可能な場合はブラウザーの実装を使ってください。

+ +

次の関数は、この考えを実装したものです。これは、base64-js が <script type="text/javascript" src="base64js.min.js"/> のようにインポートされていることを前提にしています。TextEncoderLite は UTF-8 でのみ機能することに注意してください。

+ +
function Base64Encode(str, encoding = 'utf-8') {
+    var bytes = new (typeof TextEncoder === "undefined" ? TextEncoderLite : TextEncoder)(encoding).encode(str);
+    return base64js.fromByteArray(bytes);
+}
+
+function Base64Decode(str, encoding = 'utf-8') {
+    var bytes = base64js.toByteArray(str);
+    return new (typeof TextDecoder === "undefined" ? TextDecoderLite : TextDecoder)(encoding).decode(bytes);
+}
+
+ +

Note: TextEncoderLite は、4 バイトの UTF-8 文字、つまり '\uD842\uDFB7' や '\u{20BB7}' のような文字を誤って解釈します。この Issue を参照してください。
+ あるいは、代わりに text-encoding を使ってください。

+ +

いくつかの場合には、UTF-8 に変換した後 Base64 にする上記の方法は、記憶領域に対してとても非効率的です。U+0800 から U+FFFF の範囲にある文字は、UTF-8 では 3 バイトにエンコードされますが UTF-16 では 2 バイトであり、これらがテキストの大部分を占める場合、UTF-8 の出力長は UTF-16 よりも長くなります。均等に分散した UTF-16 コードポイントを含む JavaScript 文字列の場合、Base64 の変換の前のエンコードを UTF-8 ではなく UTF-16 にすることで、サイズを 40% 減少できます。

diff --git a/files/ja/glossary/closure/index.html b/files/ja/glossary/closure/index.html new file mode 100644 index 0000000000..cf0931e091 --- /dev/null +++ b/files/ja/glossary/closure/index.html @@ -0,0 +1,24 @@ +--- +title: Closure (クロージャ) +slug: Glossary/クロージャ +tags: + - CodingScripting + - Glossary + - 用語集 +translation_of: Glossary/Closure +--- +

実行{{glossary("scope","範囲")}}を定義するバインディングのこと。{{glossary("JavaScript")}}では、{{glossary("function","関数")}}は閉じたコンテキストを作成します。

+ +

関連項目

+ +

一般知識

+ + + +

技術リファレンス

+ + diff --git "a/files/ja/glossary/constant(\345\256\232\346\225\260)/index.html" "b/files/ja/glossary/constant(\345\256\232\346\225\260)/index.html" deleted file mode 100644 index 40353e759b..0000000000 --- "a/files/ja/glossary/constant(\345\256\232\346\225\260)/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Constant -slug: Glossary/Constant(定数) -tags: - - CodingScripting - - Constant - - Glossary -translation_of: Glossary/Constant ---- -

定数とはプログラマーが変更できない値のことです。例えば、数値 (1, 2, 42) です。一方、{{glossary("variable","変数")}}の場合、プログラマーは既に使用されている変数名に新しい{{glossary("value","値")}}を割り当てられます。

- -

変数と同様に、定数を識別子に割り当てられることがあります。例えば、pi という識別子に 3.14... (円周率) を割り当てることがあります。

- -

詳細情報

- -

基礎知識

- - diff --git a/files/ja/glossary/constant/index.html b/files/ja/glossary/constant/index.html new file mode 100644 index 0000000000..40353e759b --- /dev/null +++ b/files/ja/glossary/constant/index.html @@ -0,0 +1,20 @@ +--- +title: Constant +slug: Glossary/Constant(定数) +tags: + - CodingScripting + - Constant + - Glossary +translation_of: Glossary/Constant +--- +

定数とはプログラマーが変更できない値のことです。例えば、数値 (1, 2, 42) です。一方、{{glossary("variable","変数")}}の場合、プログラマーは既に使用されている変数名に新しい{{glossary("value","値")}}を割り当てられます。

+ +

変数と同様に、定数を識別子に割り当てられることがあります。例えば、pi という識別子に 3.14... (円周率) を割り当てることがあります。

+ +

詳細情報

+ +

基礎知識

+ + diff --git a/files/ja/glossary/dhtml/index.html b/files/ja/glossary/dhtml/index.html new file mode 100644 index 0000000000..836477ad98 --- /dev/null +++ b/files/ja/glossary/dhtml/index.html @@ -0,0 +1,19 @@ +--- +title: DHTML +slug: DHTML +tags: + - CodingScripting + - DHTML + - Glossary + - HTML +translation_of: Glossary/DHTML +--- +

DHTML (Dynamic {{glossary("HTML")}}) は {{Glossary("Adobe Flash","Flash")}} や {{Glossary("Java")}} のようなプラグインを必要としないインタラクティブなウェブページを実行するコードを表します。 DHTML は {{Glossary("HTML")}}、 {{Glossary("CSS")}}、 {{Glossary("DOM")}}、 {{Glossary("JavaScript")}} の機能の組み合わせで実現されています。

+ +

詳細情報

+ +

一般知識

+ + diff --git a/files/ja/glossary/firewall/index.html b/files/ja/glossary/firewall/index.html new file mode 100644 index 0000000000..52c31cdd66 --- /dev/null +++ b/files/ja/glossary/firewall/index.html @@ -0,0 +1,22 @@ +--- +title: firewall (ファイアウォール) +slug: Glossary/ファイアウォール +tags: + - DDoS + - Firewall + - Glossary + - Security + - computer network +translation_of: Glossary/firewall +--- +

ファイアウォールはネットワークトラフィックをフィルタするシステムです。 特定の規則に従ってトラフィックを通過させたりブロックしたりすることができます。たとえば、特定のポートを宛先とする着信接続や、特定の IP アドレスへの発信接続をブロックすることができます。

+ +

ファイアウォールは単一のソフトウェアのようなシンプルなものから、ファイアウォールとしてのみ機能する専用マシンのような複雑なものまで存在します。

+ +

詳細情報

+ +

基礎知識

+ + diff --git a/files/ja/glossary/global_attribute/index.html b/files/ja/glossary/global_attribute/index.html deleted file mode 100644 index aee67a75d0..0000000000 --- a/files/ja/glossary/global_attribute/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -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/glossary/localization/index.html b/files/ja/glossary/localization/index.html new file mode 100644 index 0000000000..385f9f341a --- /dev/null +++ b/files/ja/glossary/localization/index.html @@ -0,0 +1,47 @@ +--- +title: Localization (ローカライゼーション) +slug: Localization +tags: + - Collaborating + - Glossary + - Intro + - Localization + - WebMechanics + - ローカライズ +translation_of: Glossary/Localization +--- +

ローカライゼーション（ローカライズ）とは、ソフトウェアのユーザーインターフェイスを特定の文化に適合させるプロセスです。

+ +

考慮するべき共通点は以下の通りです。

+ + + +

詳細情報

+ +

一般知識

+ + + +

 

+ +

 

diff --git a/files/ja/glossary/namespace/index.html b/files/ja/glossary/namespace/index.html new file mode 100644 index 0000000000..25e647788f --- /dev/null +++ b/files/ja/glossary/namespace/index.html @@ -0,0 +1,21 @@ +--- +title: Namespace (名前空間) +slug: Namespace +tags: + - CodingScripting + - Glossary + - Operating System + - オペレーティングシステム +translation_of: Glossary/Namespace +--- +

名前空間はプログラム内でコンテキストを識別する、論理的なグループの名前です。同じコンテキスト内かつ同じスコープの範囲内では、識別子は実態を一意に指定しなくてはなりません。

+ +

OS のディレクトリーは名前空間です。それぞれのファイルやサブディレクトリーは一意の名前を持たなくてはなりませんが、1 つのファイルが違うタイミングで同じ名前を使用することがあるかもしれません。

+ +

詳細情報

+ +

基礎知識

+ + diff --git a/files/ja/glossary/routers/index.html b/files/ja/glossary/routers/index.html new file mode 100644 index 0000000000..0dc24b1122 --- /dev/null +++ b/files/ja/glossary/routers/index.html @@ -0,0 +1,29 @@ +--- +title: ルーター +slug: Glossary/ルーター +translation_of: Glossary/routers +--- +

Webの世界でのルーターには2つの定義があります。

+ +
    +
  1. ネットワーク層にとって、ルーターは{{Glossary('Packet','パケット')}}の行先を決めるネットワーク機器です。
    2. +
  2. アプリケーション層の{{Glossary('SPA','SPA')}} にとって、ルーターは与えられた {{Glossary('URL', 'URL')}} に対してどのようなウェブページを提供するかを決定する{{Glossary('Library','ライブラリー')}}です。
    3. +
+ +

詳細情報

+ +

一般知識

+ +

ネットワーク層における文脈 :

+ + + +

アプリケーション層の SPA における文脈 (主要なSPAフレームワークのライブラリ) :

+ + diff --git a/files/ja/glossary/signature/function/index.html b/files/ja/glossary/signature/function/index.html new file mode 100644 index 0000000000..8a0608771e --- /dev/null +++ b/files/ja/glossary/signature/function/index.html @@ -0,0 +1,59 @@ +--- +title: Signature (functions) (シグネチャ (関数)) +slug: Glossary/Signature/関数 +tags: + - CodingScripting + - Glossary + - Java + - JavaScript +translation_of: Glossary/Signature/Function +--- +

関数シグネチャ (もしくは型シグネチャ、メソッドシグネチャ) は{{Glossary("Function", "関数")}}や{{Glossary("Method", "メソッド")}}の入力と出力を定義します。

+ +

シグネチャは以下のものを含みます:

+ + + +

さらに詳しく

+ +

JavaScript におけるシグネチャ

+ +

{{Glossary("JavaScript")}} は型付けの弱い動的言語です。なので先行して変数の型を宣言する必要がありません。プログラムが処理される間に自動的に型が決定します。JavaScript のシグネチャはそれでもやはりメソッドの情報を付与します:

+ +
MyObject.prototype.myFunction(value)
+ + + +

Java におけるシグネチャ

+ +

{{Glossary("Java")}}では、シグネチャは仮想マシンコードレベルでメソッドやクラスを区別するために使用されます。 Java コードを実行できるように変数の型をコード中で宣言する必要があります。 Java は強い型付けがなされ、コンパイル中にすべてのパラメーターが正しいかどうかをチェックします。

+ +
public static void main(String[] args)
+ + + +

さらに学ぶ

+ +

一般知識

+ + diff --git a/files/ja/glossary/signature/security/index.html b/files/ja/glossary/signature/security/index.html new file mode 100644 index 0000000000..04ddf1e918 --- /dev/null +++ b/files/ja/glossary/signature/security/index.html @@ -0,0 +1,37 @@ +--- +title: Signature (署名 (セキュリティ) ) +slug: Glossary/Signature/セキュリティ +tags: + - Cryptography + - Glossary + - Privacy + - Security +translation_of: Glossary/Signature/Security +--- +

署名 もしくは デジタル署名 とは、通信が正当であることを示す {{glossary("protocol", "プロトコル")}} です。

+ +

署名プロセスでは最初に、与えられたメッセージの {{glossary("hash", "ハッシュ")}} から、署名実体にリンクされたデジタル署名を、実体の秘密 {{glossary("key", "鍵")}} を使用して生成します。

+ +

メッセージを受信すると、認証プロセス では

+ + + +

このシステムは、秘密鍵が漏洩したり、受信者が不正に間違った公開鍵を受信した場合には機能しなくなります。

+ +

関連項目

+ +

一般知識

+ + + +

技術リファレンス

+ + diff --git "a/files/ja/glossary/signature/\343\202\273\343\202\255\343\203\245\343\203\252\343\203\206\343\202\243/index.html" "b/files/ja/glossary/signature/\343\202\273\343\202\255\343\203\245\343\203\252\343\203\206\343\202\243/index.html" deleted file mode 100644 index 04ddf1e918..0000000000 --- "a/files/ja/glossary/signature/\343\202\273\343\202\255\343\203\245\343\203\252\343\203\206\343\202\243/index.html" +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Signature (署名 (セキュリティ) ) -slug: Glossary/Signature/セキュリティ -tags: - - Cryptography - - Glossary - - Privacy - - Security -translation_of: Glossary/Signature/Security ---- -

署名 もしくは デジタル署名 とは、通信が正当であることを示す {{glossary("protocol", "プロトコル")}} です。

- -

署名プロセスでは最初に、与えられたメッセージの {{glossary("hash", "ハッシュ")}} から、署名実体にリンクされたデジタル署名を、実体の秘密 {{glossary("key", "鍵")}} を使用して生成します。

- -

メッセージを受信すると、認証プロセス では

- - - -

このシステムは、秘密鍵が漏洩したり、受信者が不正に間違った公開鍵を受信した場合には機能しなくなります。

- -

関連項目

- -

一般知識

- - - -

技術リファレンス

- - diff --git "a/files/ja/glossary/signature/\351\226\242\346\225\260/index.html" "b/files/ja/glossary/signature/\351\226\242\346\225\260/index.html" deleted file mode 100644 index 8a0608771e..0000000000 --- "a/files/ja/glossary/signature/\351\226\242\346\225\260/index.html" +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Signature (functions) (シグネチャ (関数)) -slug: Glossary/Signature/関数 -tags: - - CodingScripting - - Glossary - - Java - - JavaScript -translation_of: Glossary/Signature/Function ---- -

関数シグネチャ (もしくは型シグネチャ、メソッドシグネチャ) は{{Glossary("Function", "関数")}}や{{Glossary("Method", "メソッド")}}の入力と出力を定義します。

- -

シグネチャは以下のものを含みます:

- - - -

さらに詳しく

- -

JavaScript におけるシグネチャ

- -

{{Glossary("JavaScript")}} は型付けの弱い動的言語です。なので先行して変数の型を宣言する必要がありません。プログラムが処理される間に自動的に型が決定します。JavaScript のシグネチャはそれでもやはりメソッドの情報を付与します:

- -
MyObject.prototype.myFunction(value)
- - - -

Java におけるシグネチャ

- -

{{Glossary("Java")}}では、シグネチャは仮想マシンコードレベルでメソッドやクラスを区別するために使用されます。 Java コードを実行できるように変数の型をコード中で宣言する必要があります。 Java は強い型付けがなされ、コンパイル中にすべてのパラメーターが正しいかどうかをチェックします。

- -
public static void main(String[] args)
- - - -

さらに学ぶ

- -

一般知識

- - diff --git a/files/ja/glossary/slug/index.html b/files/ja/glossary/slug/index.html new file mode 100644 index 0000000000..2a6c4d09ec --- /dev/null +++ b/files/ja/glossary/slug/index.html @@ -0,0 +1,23 @@ +--- +title: Slug (スラグ) +slug: Glossary/スラグ +tags: + - Community + - Glossary + - Intermediate + - MDN + - URL + - Web +translation_of: Glossary/Slug +--- +

スラグは、通常はURLの最後にあるWebアドレスの固有の識別部分です。
+ MDNのコンテキストでは、"<locale> / docs /" に続くURLの部分です。

+ +

親文書の下に新しい文書が作成されたときの最終的な構成要素でもあります。
+ たとえば、このページのスラグは Glossary/スラグ です。

+ +

関連情報

+ + diff --git a/files/ja/glossary/ssl/index.html b/files/ja/glossary/ssl/index.html new file mode 100644 index 0000000000..4ee2e5e682 --- /dev/null +++ b/files/ja/glossary/ssl/index.html @@ -0,0 +1,36 @@ +--- +title: SSL +slug: Glossary/SSL_Glossary +tags: + - Glossary + - SSL + - Security + - TLS + - Web Performance + - ウェブの性能 + - セキュリティ + - 用語集 +translation_of: Glossary/SSL +--- +

SSL (Secure Sockets Layer) は古いセキュリティ標準技術で、サーバーとクライアントの間に暗号化されたネットワークリンクを作成し、そこを通過するデータが非公開で安全であることを保証するためのものでした。SSL の現在のバージョンは 3.0 で、1999年に Netscape 社がリリースしたものですが、{{Glossary("TLS", "TLS (Transport Layer Security)")}} プロトコルに置き換えられました。

+ + diff --git a/files/ja/glossary/ssl_glossary/index.html b/files/ja/glossary/ssl_glossary/index.html deleted file mode 100644 index 4ee2e5e682..0000000000 --- a/files/ja/glossary/ssl_glossary/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: SSL -slug: Glossary/SSL_Glossary -tags: - - Glossary - - SSL - - Security - - TLS - - Web Performance - - ウェブの性能 - - セキュリティ - - 用語集 -translation_of: Glossary/SSL ---- -

SSL (Secure Sockets Layer) は古いセキュリティ標準技術で、サーバーとクライアントの間に暗号化されたネットワークリンクを作成し、そこを通過するデータが非公開で安全であることを保証するためのものでした。SSL の現在のバージョンは 3.0 で、1999年に Netscape 社がリリースしたものですが、{{Glossary("TLS", "TLS (Transport Layer Security)")}} プロトコルに置き換えられました。

- - diff --git "a/files/ja/glossary/\343\202\257\343\203\255\343\203\274\343\202\270\343\203\243/index.html" "b/files/ja/glossary/\343\202\257\343\203\255\343\203\274\343\202\270\343\203\243/index.html" deleted file mode 100644 index cf0931e091..0000000000 --- "a/files/ja/glossary/\343\202\257\343\203\255\343\203\274\343\202\270\343\203\243/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Closure (クロージャ) -slug: Glossary/クロージャ -tags: - - CodingScripting - - Glossary - - 用語集 -translation_of: Glossary/Closure ---- -

実行{{glossary("scope","範囲")}}を定義するバインディングのこと。{{glossary("JavaScript")}}では、{{glossary("function","関数")}}は閉じたコンテキストを作成します。

- -

関連項目

- -

一般知識

- - - -

技術リファレンス

- - diff --git "a/files/ja/glossary/\343\202\271\343\203\251\343\202\260/index.html" "b/files/ja/glossary/\343\202\271\343\203\251\343\202\260/index.html" deleted file mode 100644 index 2a6c4d09ec..0000000000 --- "a/files/ja/glossary/\343\202\271\343\203\251\343\202\260/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Slug (スラグ) -slug: Glossary/スラグ -tags: - - Community - - Glossary - - Intermediate - - MDN - - URL - - Web -translation_of: Glossary/Slug ---- -

スラグは、通常はURLの最後にあるWebアドレスの固有の識別部分です。
- MDNのコンテキストでは、"<locale> / docs /" に続くURLの部分です。

- -

親文書の下に新しい文書が作成されたときの最終的な構成要素でもあります。
- たとえば、このページのスラグは Glossary/スラグ です。

- -

関連情報

- - diff --git "a/files/ja/glossary/\343\203\225\343\202\241\343\202\244\343\202\242\343\202\246\343\202\251\343\203\274\343\203\253/index.html" "b/files/ja/glossary/\343\203\225\343\202\241\343\202\244\343\202\242\343\202\246\343\202\251\343\203\274\343\203\253/index.html" deleted file mode 100644 index 52c31cdd66..0000000000 --- "a/files/ja/glossary/\343\203\225\343\202\241\343\202\244\343\202\242\343\202\246\343\202\251\343\203\274\343\203\253/index.html" +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: firewall (ファイアウォール) -slug: Glossary/ファイアウォール -tags: - - DDoS - - Firewall - - Glossary - - Security - - computer network -translation_of: Glossary/firewall ---- -

ファイアウォールはネットワークトラフィックをフィルタするシステムです。 特定の規則に従ってトラフィックを通過させたりブロックしたりすることができます。たとえば、特定のポートを宛先とする着信接続や、特定の IP アドレスへの発信接続をブロックすることができます。

- -

ファイアウォールは単一のソフトウェアのようなシンプルなものから、ファイアウォールとしてのみ機能する専用マシンのような複雑なものまで存在します。

- -

詳細情報

- -

基礎知識

- - diff --git "a/files/ja/glossary/\343\203\253\343\203\274\343\202\277\343\203\274/index.html" "b/files/ja/glossary/\343\203\253\343\203\274\343\202\277\343\203\274/index.html" deleted file mode 100644 index 0dc24b1122..0000000000 --- "a/files/ja/glossary/\343\203\253\343\203\274\343\202\277\343\203\274/index.html" +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: ルーター -slug: Glossary/ルーター -translation_of: Glossary/routers ---- -

Webの世界でのルーターには2つの定義があります。

- -
    -
  1. ネットワーク層にとって、ルーターは{{Glossary('Packet','パケット')}}の行先を決めるネットワーク機器です。
    2. -
  2. アプリケーション層の{{Glossary('SPA','SPA')}} にとって、ルーターは与えられた {{Glossary('URL', 'URL')}} に対してどのようなウェブページを提供するかを決定する{{Glossary('Library','ライブラリー')}}です。
    3. -
- -

詳細情報

- -

一般知識

- -

ネットワーク層における文脈 :

- - - -

アプリケーション層の SPA における文脈 (主要なSPAフレームワークのライブラリ) :

- - diff --git a/files/ja/hacking_mozilla/index.html b/files/ja/hacking_mozilla/index.html deleted file mode 100644 index c4163517cb..0000000000 --- a/files/ja/hacking_mozilla/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -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! -

-
-

原文書の情報

-
  • 最終更新日: October 1, 2007 -
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 -
-
-
-
-{{ languages( { "en": "en/Hacking_Mozilla" } ) }} diff --git a/files/ja/how_mozilla's_build_system_works/index.html b/files/ja/how_mozilla's_build_system_works/index.html deleted file mode 100644 index ee47b27b6f..0000000000 --- a/files/ja/how_mozilla's_build_system_works/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: How Mozilla's build system works -slug: How_Mozilla's_build_system_works -tags: - - Build documentation - - Developing Mozilla - - 移行 ---- -

概要

- -

本ドキュメントは、Mozilla の GNU make ベースビルドシステムを必要とする Mozilla 開発者をターゲットとしています。 本ドキュメントでは、ビルドシステムの基本概念と用語ならびに、コンポーネントのコンパイルや jar ファイルの作成といった共通的作業をどのように行うかを解説しています。

- -

本書は Mozilla をただビルドしたい人を対象にはしていません。その場合はBuild Documentationを参照してください。

- -

概念

- -

Mozilla のビルドシステムは GNU Make をベースにしたシステムです。最も基本的なレベルでは、make はターゲットを自動生成するツールで、ターゲットごとにdependencies とrules を生成します。

- -

Mozilla プロジェクトでは、make はライブラリと実行モジュールのコンパイル、chrome の jar ファイル作成、関係ファイルのコピーに使用されます。我々は、2 パスのビルドシステムを使用しています:

- - - -

いずれのフェーズでも、ターゲットを make するだけです。これは、それぞれのディレクトリは export ターゲットとともにまず一度横断し、libs ターゲットとともに、再び横断します。 二段階のビルドは、モジュール間の循環的参照のために存在します。最初にすべてのヘッダファイルを export することで、あるモジュール（Ａとする）は、別のモジュール（Ｂ）の public なヘッダファイルをインクルードしながら、モジュール（Ｂ）はモジュール（Ａ）の public なヘッダファイルをインクルードできます。

- -

その他の重要なツールとして、configure が挙げられます。これは、ビルドの最初のステップに実行されます。configure スクリプトはシステムやコンパイラの特徴を決定し、オプションを生成します。configure スクリプトから実行される重要な製品が二つあります:

- - - -

configure スクリプトは bash シェルベースのものです。このスクリプトは M4 とともに書かれた configure.in と呼ばれるファイルから生成され、最終的なスクリプトを生成するために Autoconfを使って処理します。

- -

Makefile の基礎

- -

Makefile は、非常に複雑にもなり得ますが、Mozilla チームは、大半の Makefile をとてもシンプルにすべく、多数のビルトインルールを提供しています。make についての網羅的な解説は本説明の範囲を超えますので、こちら（GNU make）を参照してください。

- -

精通しておくとよいであろう概念の一つとして、make の変数が挙げられます。変数はVARIABLE = VALUE という構文で定義され、その値は$(VARIABLE) と記述することで参照されます。すべての変数は文字列です。

- -

Mozilla のソースコードに含まれる Makefile.in ファイルはすべて同じ基本的なフォーマットで記述されています。

- -
{{ page("/ja/docs/Standard_Makefile_Header") }}
- -
# ... Makefile の中心となる本体部分がここに入ります ...
-
- -
include $(topsrcdir)/config/rules.mk
-
-# ... 追加のルールがここに入ります ...
-
- - - -

この他によく使われる変数の一つとして、特定のビルドターゲットを指定しない DIRS があります。DIR は、現在のディレクトリを再帰的に組み込むためのサブディレクトリの一覧です。サブディレクトリは親ディレクトリの後に配置されます。以下に例を示します。

- -
DIRS = \
-       public \
-       resources \
-       src \
-       $(NULL)
-
- -

上記の例は、行結合の例でもあります。行の中の最後に現れるバックスラッシュ（訳注：通常の日本の環境では￥記号に見えることも多いので注意）は、変数定義が次の行にも続いていることを示します。行の継ぎ目の余分な空白は縮められます。終端の $(NULL) は表記に一貫性を持たせる手段です。これにより、行末のバックスラッシュの有無を気にせず行の追加・削除が行えます。

- -

Makefile examples

- - - -

ライブラリのビルド

- -

Mozilla のビルドにおけるライブラリは、主として３種に分けられます:

- - - -

Non-component shared libraries

- -

non-component shared library は、複数のコンポーネントが共有しなければならない共通コードがあり、それを XPCOM を通じて共有することが、適切でないもしくは不可能な場合に有用です。 一例として、libmsgbaseutil 向けの Makefile の一部を見てみましょう。これは、mailnews コンポーネント全体からリンクされます:

- -
DEPTH           = ../../..
-topsrcdir       = @top_srcdir@
-srcdir          = @srcdir@
-VPATH           = @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-MODULE          = msgbaseutil
-LIBRARY_NAME    = msgbaseutil
-EXPORT_LIBRARY = 1
-SHORT_LIBNAME   = msgbsutl
-
- -

上述した component の例との実際問題としての相違点は、IS_COMPONENT が設定されていない事だけである点に注意してください。この値を設定しない事によって、共有ライブラリが生成され、dist/bin にインストールされるでしょう。

- -

Static libraries

- -

上述の通り、静的ライブラリの主要な使用方法としては、大規模ライブラリ（主に component）のビルドの中間段階としての使用が挙げられます。これにより、複数のサブディレクトリにソースファイルを分散させて配置することができます。静的ライブラリは実行可能モジュールにもリンクされることがあります。例として、layout/base/src の Makefile の一部を以下に示します。

- -
DEPTH           = ../../..
-topsrcdir       = @top_srcdir@
-srcdir          = @srcdir@
-VPATH           = @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-MODULE          = layout
-LIBRARY_NAME    = gkbase_s
-
-# REQUIRES and CPPSRCS omitted here for brevity #
-
-# we don't want the shared lib, but we want to force the creation of a static lib.
-FORCE_STATIC_LIB = 1
-
-include $(topsrcdir)/config/rules.mk
-
- -

ここでは FORCE_STATIC_LIB = 1 というキーが設定されています。これにより、（unix の場合)libgkbase_s.a が、Windows の場合はgkbase_s.lib が生成され、dist/lib にコピーされます。では、コンポーネントを作成するために複数の静的ライブラリを合わせてリンクする方法をざっと見てみましょう。

- -
DEPTH           = ../..
-topsrcdir       = @top_srcdir@
-srcdir          = @srcdir@
-VPATH           = @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-MODULE          = layout
-LIBRARY_NAME    = gklayout
-EXPORT_LIBRARY = 1
-IS_COMPONENT    = 1
-MODULE_NAME     = nsLayoutModule
-
-CPPSRCS         = \
-                nsLayoutModule.cpp \
-                $(NULL)
-
-SHARED_LIBRARY_LIBS = \
-                $(DIST)/lib/$(LIB_PREFIX)gkhtmlbase_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkhtmldoc_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkhtmlforms_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkhtmlstyle_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkhtmltable_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkxulbase_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkbase_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkconshared_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkxultree_s.$(LIB_SUFFIX) \
-                $(DIST)/lib/$(LIB_PREFIX)gkxulgrid_s.$(LIB_SUFFIX) \
-                $(NULL)
-
-include $(topsrcdir)/config/rules.mk
-
- -

SHARED_LIBRARY_LIBS は、本共有ライブラリにリンクすべき静的ライブラリを並べて記述します。LIB_PREFIX や LIB_SUFFIX を使用することで、すべてのプラットフォームで動作させることができることに注意してください。

- -

Jar ファイルをビルドする

- -

Jar ファイルは(XUL、JavaScript、CSSといった) chrome ファイルのパッケージングに使用します。Jar パッケージングについてのより詳細な情報は、{{ mediawiki.external('jar-packaging.html このドキュメント') }}で得られます。ここでは、Jar パッケージを行うために Makefile をどのように設定するかのみ述べます。以下に例を示します。

- -
DEPTH           = ../../../..
-topsrcdir       = @top_srcdir@
-srcdir          = @srcdir@
-VPATH           = @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-include $(topsrcdir)/config/rules.mk
- -

そうです。ここでは定義が必要な外部変数は使用されていません。Makefile.in と同じディレクトリに jar.mn ファイルがある場合、自動的に処理されるのです。jar.mn と chrome ファイルを含む resources ディレクトリを作成するのが通例ですが、ライブラリを作成するディレクトリに jar.mn を設置したいのであれば、これも動作します（処理されます）。

- -
-

著作情報

- -
    -
  • 著作者: Brian Ryner
    • -
  • 著作権情報: Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
diff --git a/files/ja/html_element_cross_reference/index.html b/files/ja/html_element_cross_reference/index.html deleted file mode 100644 index 93370becb8..0000000000 --- a/files/ja/html_element_cross_reference/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: HTML 要素クロスリファレンス -slug: HTML_Element_Cross_Reference -tags: - - HTML ---- -

{{ outdated() }} HTML 4.0 ではいくつかの新しい要素と属性が追加され、一部が削除、その他の要素と一部の属性は非推奨とされました。この技術ノートは、Netscape Navigator 4.x, Netscape 6, Internet Explorer 3.x-5.x, HTML 3.2 および HTML 4.0 を通しての HTML 4.0 における要素のサポートの要約です。

-

リファレンス

-

HTML 4.01 の最終的なリファレンスは次の通り:

- -

HTML 4.0 の新しい属性

- -

ブラウザのサポートする要素のクロスリファレンス

-

キー

-
NN4
Netscape Navigator 4.x
NS6
Netscape 6
IE3
Internet Explorer 3.x
IE4
Internet Explorer 4.x
IE5
Internet Explorer 5.x
HTML3
HTML 3.2
HTML4
HTML 4.0
-
-

クロスリファレンス表

- -
要素               備考 非推奨の属性
A NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
ABBR   NS6         HTML4    
ACRONYM   NS6   IE4 IE5   HTML4    
ADDRESS NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
APPLET NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 ALIGN, ARCHIVE, CODE, CODEBASE, HEIGHT, NAME, OBJECT, WIDTH
AREA NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
B NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BASE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BASEFONT NN4   IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨
NS6 は未対応。{{ Bug(3875) }}参照		 COLOR, FACE, SIZE
BDO         IE5   HTML4 NS6 は未対応  
BGSOUND     IE3 IE4 IE5        
BIG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BLINK NN4                
BLOCKQUOTE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BODY NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALINK, BACKGROUND, BGCOLOR, LINK, TEXT, VLINK
BR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   CLEAR
BUTTON   NS6   IE4 IE5   HTML4    
CAPTION NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
CENTER NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
CITE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
CODE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
COL   NS6 IE3 IE4 IE5   HTML4    
COLGROUP   NS6 IE3 IE4 IE5   HTML4    
COMMENT     IE3 IE4 IE5        
DD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
DEL   NS6   IE4 IE5   HTML4    
DFN   NS6 IE3 IE4 IE5 HTML3 HTML4    
DIR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COMPACT
DIV NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
DL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT
DT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
EM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
EMBED NN4 NS6 IE3 IE4 IE5        
FIELDSET   NS6   IE4 IE5   HTML4    
FONT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COLOR, FACE, SIZE
FORM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
FRAME NN4 NS6 IE3 IE4 IE5   HTML4    
FRAMESET NN4 NS6 IE3 IE4 IE5   HTML4    
H1 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H2 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H3 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H4 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H5 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H6 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
HEAD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
HR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, NOSHADE, SIZE, WIDTH
HTML NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   VERSION
I NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
IFRAME   NS6 IE3 IE4 IE5   HTML4   ALIGN
ILAYER NN4             代わりに相対位置指定の DIV に置き換え  
IMG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, BORDER, HSPACE, VSPACE
INPUT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
INS   NS6   IE4 IE5   HTML4    
ISINDEX NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 PROMPT
KBD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
KEYGEN NN4                
LABEL   NS6   IE4 IE5   HTML4    
LAYER NN4             代わりに絶対位置指定の DIV に置き換え  
LEGEND   NS6   IE4 IE5   HTML4   ALIGN
LI NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   TYPE, VALUE
LINK NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
LISTING NN4   IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
MAP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
MARQUEE     IE3 IE4 IE5        
MENU NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COMPACT
META NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
MULTICOL NN4                
NOBR NN4 NS6 IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
NOEMBED NN4                
NOFRAMES NN4 NS6 IE3 IE4 IE5   HTML4    
NOLAYER NN4             完全に削除  
NOSCRIPT NN4 NS6   IE4 IE5   HTML4    
OBJECT NN4 NS6 IE3 IE4 IE5   HTML4   ALIGN, BORDER, HSPACE, VSPACE
OL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT, START, TYPE
OPTGROUP   NS6         HTML4    
OPTION NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
P NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
PARAM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
PLAINTEXT NN4   IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
PRE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
Q   NS6 IE3 IE4 IE5   HTML4    
RT         IE5        
RUBY         IE5        
S NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
SAMP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SCRIPT NN4 NS6 IE3 IE4 IE5   HTML4    
SELECT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SERVER NN4                
SMALL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SPACER NN4                
SPAN NN4 NS6 IE3 IE4 IE5   HTML4    
STRIKE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
STRONG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
STYLE NN4 NS6 IE3 IE4 IE5   HTML4    
SUB NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SUP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TABLE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, BGCOLOR
TBODY NN4 NS6 IE3 IE4 IE5   HTML4    
TD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR, HEIGHT, NOWRAP, WIDTH
TEXTAREA NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TFOOT   NS6 IE3 IE4 IE5   HTML4    
TH NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR, HEIGHT, NOWRAP, WIDTH
THEAD   NS6 IE3 IE4 IE5   HTML4    
TITLE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR
TT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
U NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
UL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT, TYPE
VAR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
WBR NN4 NS6 IE3 IE4 IE5        
XML         IE5        
XMP NN4 NS6 IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
-
-

原文書情報

-
  • 著者: Bob Clary, Netscape Communications
  • 最終更新日: Published 01 Jul 2001
  • 著作権情報: Copyright © 2001-2003 Netscape.
  • 補足: This reprinted article was originally part of the DevEdge site.
    • -
-
-

{{ languages( { "en": "en/HTML_Element_Cross_Reference", "es": "es/Referencia_cruzada_de_elementos_HTML", "pl": "pl/Wsparcie_przegl\u0105darek_dla_element\u00f3w_HTML" } ) }}

-
diff --git a/files/ja/http_pipelining_faq/index.html b/files/ja/http_pipelining_faq/index.html deleted file mode 100644 index adb8b20a69..0000000000 --- a/files/ja/http_pipelining_faq/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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/installing_extensions/index.html b/files/ja/installing_extensions/index.html deleted file mode 100644 index 6fa4a82bdb..0000000000 --- a/files/ja/installing_extensions/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 拡張機能のインストール -slug: Installing_extensions -tags: - - Add-ons - - Extensions ---- -

{{ Gecko_minversion_header(1.9) }}

-

toolkit ベースのアプリケーション（Firefox やその他の XULRunner を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所はレジストリを使って拡張機能をインストールする方法も利用できます。

-

現在、Mac OS X および Linux においては、ユーザのコンピュータ内のあらかじめ決められた位置のディレクトリに拡張機能をコピーするだけでよいです。

-

この方法を通じてインストールされた拡張機能については、新しく作成された物・既に存在していた物を問わず、そのアプリケーションのすべてのプロファイルに対してインストールされる事に注意してください。

-

Windows

-

拡張機能を特定のユーザに対してだけインストールする場合は、ユーザのアプリケーションディレクトリ内の以下の位置にファイルを置いてください：

-
C:\Documents and Settings\Dave\Application Data\<vendor>\Extensions\<appid>
-
-

Mac OS X

-

拡張機能をその Mac OS X を使用しているすべてのユーザに対してインストールするのであれば、ファイルを以下の位置にコピーしてください：

-
/Library/Application Support/<vendor>/Extensions/<appid>
-
-

拡張機能を特定のユーザに対してだけインストールする場合は、ユーザのライブラリフォルダ内の以下の位置に置いてください：

-
~/Library/Application Support/<vendor>/Extensions/<appid>
-
-

Linux

-

拡張機能をその Linux を使用しているすべてのユーザに対してインストールするのであれば、ファイルを以下の位置にコピーしてください：

-
/usr/lib/<vendor>/extensions/<appid>
-
-

または、

-
/usr/lib64/<vendor>/extensions/<appid>
-
-

または、

-
/usr/share/<vendor>/extensions/<appid>
-
-

拡張機能を特定のユーザに対してだけインストールする場合は：

-
~/.<vendor>/extensions/<appid>
-
-

アクセス

-

あなたは、XPI ファイルを上記のディレクトリにドラッグ＆ドロップする方法と、XPI ファイルの内容をその拡張機能の id の名前のフォルダの中に展開する方法のどちらも利用できます。

-

拡張機能をフォルダに展開しない（XPI ファイルのまま置く）場合は：

- -

展開された拡張機能は暗黙的に、ユーザの権限に関わらずすべてのユーザに対してインストールされます。

-

例

-

例えば、Firefox 用のプラグインを含む Mac OS X 用のスタンドアロンのアプリケーションを作った場合、あなたが作るインストーラは拡張機能を（もしそのフォルダが存在していないのであれば作成して）以下のフォルダにコピーすることになるでしょう：

-
/Library/Application Support/Mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
-
-

"{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" は Firefox のアプリケーション ID です。

-

次に、拡張機能の XPI ファイルをそのディレクトリにコピーするか、unzip コマンドでその拡張機能の id の名前のフォルダの中に XPI の内容を展開します：

-
/Library/Application Support/Mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/{dba45d40-f69e-11dc-95ff-0800200c9a66}
-
-

"{dba45d40-f69e-11dc-95ff-0800200c9a66}" はその拡張機能の id です。

diff --git a/files/ja/installing_extensions_and_themes_from_web_pages/index.html b/files/ja/installing_extensions_and_themes_from_web_pages/index.html deleted file mode 100644 index 4f6f1a4e3e..0000000000 --- a/files/ja/installing_extensions_and_themes_from_web_pages/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Web ページから拡張機能とテーマをインストールする -slug: Installing_Extensions_and_Themes_From_Web_Pages -tags: - - Add-ons - - Extensions - - Themes ---- -

 

-

拡張機能 と テーマ を Web ページからインストールするには、XPI ファイルに直接リンクしたり、InstallTrigger オブジェクトを使用するなど様々な方法があります。

-

拡張機能と Web ページの作者はユーザに対して最高の経験を提供するように、以下にかかれた方法で XPI をインストールできるようにすることを奨励します。

-

Web スクリプトの例

-
<script type="application/x-javascript">
-<!--
-function install (aEvent)
-{
-  var params = {
-    "Foo": { URL: aEvent.target.href,
-             IconURL: aEvent.target.getAttribute("iconURL"),
-             Hash: aEvent.target.getAttribute("hash"),
-             toString: function () { return this.URL; }
-    }
-  };
-  InstallTrigger.install(params);
-
-  return false;
-}
--->
-</script>
-
-<a href="http://www.example.com/foo.xpi"
-  iconURL="http://www.example.com/foo.png"
-  hash="sha1:28857e60d043447c5f4550853f2d40770b326a13"
-  onclick="return install(event);">拡張機能をインストール!</a>
-
-

それでは、一つずつ見ていきましょう。HTML の <a> タグはインストールリンクです。href 属性は拡張機能の XPI ファイルへ直接リンクしており、リンクをマウスでポイントしたときにリンク先がロケーションバーに表示されます。ユーザは、リンクを右クリックして "名前を付けてリンク先を保存..." を選び、簡単に XPI ファイルを保存することができます。

-

リンクがクリックされると install 関数が呼び出され、パラメータがイベントオブジェクトに渡されます。

-

install 関数は、はじめにパラメータブロックを作成します:

-
var params = {
-  "Foo": { URL: aEvent.target.href,
-           IconURL: aEvent.target.getAttribute("iconURL"),
-           Hash: aEvent.target.getAttribute("hash"),
-           toString: function () { return this.URL; }
-};
-
-

これは、確認ダイアログで使用するディスプレイ名(Foo) および拡張機能への URL(href で再び呼び出されるリンク)、確認ダイアログで表示するためのアイコンへの URL(IconURL)、xpi ファイルコンテンツの(改変されたダウンロードを防ぐための)ハッシュ、このコードを Firefox 0.8 以前で動作させるための toString 関数を指定しています。また、確認ダイアログで使用するアイコンが無いときなど、古いスタイルのパラメータブロック({ "Foo": aEvent.target.href }) を使用することもできます。

-

InstallTrigger.install は拡張機能をインストールするときにパラメータブロックと共に呼び出されます。

-
return false;
-
-

この最後の部分は最も重要です。リンクをクリックしてスクリプトが実行されリンク先が見つからないとき、install 関数は false を返さなくてはなりません。この手順を省略した場合、ユーザは二つのインストールダイアログを見ることになります。実際、インストールを二度要求されます)。一つは InstallTrigger によって、もう一つはXPI ファイルを直接読み込もうとすることによってです。

-

インストールオブジェクトに利用可能なパラメータ

-

InstallTrigger.install メソッドは、オブジェクトのインストール時に使用される、いくつかのプロパティを持つ JavaScript オブジェクトをパラメータとして受け入れます。

-

URL

-

URL プロパティは、インストールする XPI ファイルの URL を指定します。このプロパティは必須です。

-

IconURL

-

IconURL プロパティは、インストールダイアログ内に表示されるアイコンを指定します。このプロパティは任意です。アイコンを指定ない場合は、デフォルトのアイコン(普通は緑色のパズルピース) が使用されます。アイコンは Firefox でサポートされた画像形式で、32×32 ピクセルの大きさにします。

-

Hash

-

Hash プロパティは XPI ファイルコンテンツのハッシュ値を指定します。これはダウンロードしたファイルを検証し、例えば、ミラーサーバによって改変されたファイルが供給されるのを防ぐために使用されます。nsICryptoHash によってサポートされた任意のハッシュ関数を使用することができます。ハッシュ値は hash function:hash value の書式で、例えば、sha1:28857e60d043447c5f4550853f2d40770b326a13 のように指定します。

-

toString()

-

toString() プロパティは、Firefox 1.0 よりも古いバージョンとの互換性のため、またSeamonkey などの他のアプリケーションのために、XPI ファイルの URL を返すべきです。

-

テーマ

-

テーマの適用については、installChrome 関数の使用を除き、ほとんどすべてのことを書きました。多くのサイトは拡張機能のインストールを、XPI ファイルに直接リンクしてインストールの確認 UI を表示する方法に頼っており、また多くのサイトがテーマの JAR ファイルも同様の (正しくない) 方法でインストールしようとするため、なぜ自動的に検出されインストールされないのか不思議に思っています。XPI ファイルは Mozilla 仕様の拡張なので特別にそれを扱うことができますが、JAR ファイルはそうではありません。すべての .jar ファイルが Firefox のテーマではないため、.jar ファイルへのリンクをクリックしても、名前を付けて保存ダイアログが表示されるだけです。そういうわけで、テーマのインストールにはいつも InstallTrigger API を使用しなければなりません。

-

updateEnabled() についての注意

-

InstallTrigger は、InstallTrigger.install を呼び出す前に updateEnabled 関数を呼び出します。これは updateEnabled 自身が内部で呼び出されるため、インストールには必要ありません。さらに、あなたの配布サイトがユーザのホワイトリストに無い場合、 updateEnabled を呼び出すことによって問題を起こすかもしれません。Firefox はインストール時や installChrome が呼び出されたとき、XPI ファイルが読み込まれたときに "インストール拒否" メッセージだけを表示します。次のようなコードが含まれ、あなたのサイトがホワイトリストに無い場合:

-
if (InstallTrigger.updateEnabled())
-  InstallTrigger.install({"Foo": "foo.xpi"});
-
-

ユーザがこのコードを呼び出すと、updateEnabled は false を返します。updateEnabled はあなたのサイトがホワイトリストに無いことを見つけ、ユーザに何の通知もせず、インストールを呼び出しません。

-

従って updateEnabled は、ソフトウェアのインストールが無効になっていること、またはあなたのサイトがホワイトリストに無いことを知らせる内容をページに表示するためだけに使用するべきです。また、ホワイトリストのインストールコードパスにはあなたのサイトを含めないでください。

-

(* ぜひとも、より大掛かりなインストールシステムの開発を止めようとはしないでください。私は、より多くの拡張機能の配布者が様々なケースでこれらを扱うことができるようにするためのガイドとして、このドキュメントを提供しています。)

diff --git a/files/ja/introduction_to_dom_inspector/index.html b/files/ja/introduction_to_dom_inspector/index.html deleted file mode 100644 index 441c8ba049..0000000000 --- a/files/ja/introduction_to_dom_inspector/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: DOM Inspector 入門 -slug: Introduction_to_DOM_Inspector ---- -

DOM Inspector はブラウザの Tools > Web Development メニューからアクセスできる Mozilla のアプリケーションです。これはウェブ開発者が DOM 全体を見たり、必要なら手動で DOM を更新したりできるようにします。

-
注意: Firefox 3 以降、DOM Inspector はデフォルトインストールには含まれなくなりました。替わりに、Mozilla add-ons サイトから ダウンロードしてインストールする 必要があります。
-

DOM Inspector を最初に起動すると、Mozilla ブラウザに似た2ペインのアプリケーションウィンドウが開きます。ブラウザのように DOM Inspector は URL バー、サイドバー（左ペイン）、メニューを持ち、Window や Tools メニューは Mail や Chatzilla やその他の小さな拡張機能やダイアログのようなブラウザスイートのメインアプリケーションへのアクセスを提供します。

-

empty DOM Inspector

-

DOM Inspector を開始する

-

DOM Inspector の利用を開始するには、以下の3つのうちのひとつを行います:

-

File > Inspect a Window >

-

Inspect a Window メニュー項目の右に表示されているサブメニューは現在ロードされている DOM ウィンドウのリストです。おそらくブラウザウィンドウと DOM Inspector はすでに開かれており、このリストに表示されます。DOM Inspector は — DOM として認識される — 開かれているすべてのウィンドウを追跡します。そのため、DOM Inspector で特定のウィンドウの DOM にアクセスするには、単に DOM Inspector アプリケーションの中で動的に更新されるリストからウィンドウを選択するだけです。例えば、Mail ウィンドウの DOM を調べるには、Mail を開き、DOM Inspector に戻って File > Inspect a Window > Inbox for yourname@yourdomain.com を選択します。

-

-

File > Inspect a URL...

-

URL から任意のウェブページの DOM を調べることが出来ます。この二つ目のメニューアイテムを使用して URL を入力し、DOM Inspector にページの DOM をロードします。アプリケーションそのもののドキュメントオブジェクトモデルを表示するウィンドウの DOM とは対照的に、この "文書" の DOM は最上位の <HTML> タグから始まるウェブページの構造を示します。このメニュー項目を使うには、例えば、www.brownhen.com を入力すると brownhen のインデックスページの DOM を見ることが出来ます。

-

DOM of a Web Page

-

Ctrl + Shift + I キーショートカット

-

最後に、Ctrl + Shift + I ショートカットキーは現在ロードしているページの DOM で DOM Inspector を開始します。例えば、Mozilla で www.cnn.com ウェブサイトを読んでいてこのキーをタイプすると、DOM Inspector はページの DOM をロードしその構造を Inspector アプリケーションウィンドウに表示します。

-

DOM Inspector が DOM をロードすると、左ペインに DOM の構造化された階層ビューを、右ペインに選択したノードの情報（属性とその値など）を表示します。

-

加えて、ウェブページの DOM を表示している間、DOM Inspector の下半分にウェブページが表示されます。

-

-

これは DOM Inspector を独立したブラウザウィンドウを持つことなく利用することが可能になり、選択したノードが DOM Inspector によりページ内でハイライト表示されるのを見るのが容易になります。（最近の Firefox 版では DOM Inspector ウィンドウ内でのウェブページ表示は行われずに、Firefox 内でハイライト表示されます。） DOM Loaded in DI

Using the DOM Inspector

-

Once you have the DOM of the page or chrome you are interested in, you can use the tree view in the left pane of the DOM Inspector to find and inspect aspects of that DOM you are interested in. One of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to find the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. One common use of the DOM Inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. As you select parts of the DOM in the left pane of the DOM Inspector, the rendered versions of those nodes are highlighted in the user interface itself. If you inspect the main browser window, for example, and select nodes in the right pane (other than the endless list of script elements that are loaded into navigator.xul and that have no visible UI), you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from largest parts (e.g., the statusbar element that sits at the top-level of the navigator DOM) to smallest parts, such as the "mini-mail" icon that lets users access the Mail application from the bottom left corner of the browser window.

-

DOM Inspector Information Types

-

When you have selected a node like the "mini-mail" node, you can select any one of several types of information to display about that node in the right pane of the DOM Inspector application window, all of which are available from the pull-down menu in the upper left corner of the right pane. In order to find out what the actual name of the file is being used to provide the small mail icon, you can select CSS Style Rules from this menu and see the various selectors and rules that have been applied for those selectors. The rule that applies the mail icon to the "mini-mail" element is ID-based (since the icon is unique to the mail item in the taskbar), and uses a list-style-image property to point to a file in the theme JAR. That file turns out to be a GIF located at: chrome://commmunicator/skin/taskbar/mail.gif. The list of types available from this pull-down menu gives you some idea about how extensive the DOM Inspector's inspecting capabilities are. The following table provides an overview of what these sets of information are about:

-
- -
DOM Node The default view. DOM Node shows the structural DOM representation of the given page or chrome.
Box Model The box model is the layout system of Mozilla's application interface. box elements

use stretchiness, flexibility, and nesting to achieve table-like layout capabilities in XUL documents. This view shows how boxes and these layout attributes are used to position elements within the interface.
XBL Bindings XBL is a language that allows you to build extensions in XUL and HTML. Where XBL bindings

are loaded into documents by means of CSS rules, this view lets you inspect them.
CSS Style Rules This view shows you all of the CSS rules that are applied to the selected nodes.
Computed Style

The computed style of an element is all of the style rules that get applied to that element, whether from explicit style declarations, from script, or from inheritance. The computed style view of an element's style rules gives you a long, flat list of rules that you can inspect and {{ mediawiki.external('#update update') }} if you wish.
JavaScript Object This view shows you all of the JavaScript objects that are used to script and manipulate a given

node. Common examples of JavaScript objects are target objects that are used to trap and get information about events fired in the interface.
-
-

Selecting Elements in a User Interface

-

Another powerful interactive feature of the DOM Inspector is that it can display the subtree of any element in any DOM it has loaded. In other words, when you have the DOM Inspector open and have enabled this functionality by choosing Search > Select Element by Click or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application, you can click anywhere in a loaded web page or the chrome of the Mozilla application interface, and the element you click will be threaded into the left pane and information about it displayed in the right.

-

Searching for Nodes in the DOM

-

Another way to inspect the DOM is to search for particular elements you're interested in by ID, class, or attribute. When you select Search > Find Nodes... or press Ctrl + F, the DOM Inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <F3> shortcut key.

-

Updating the DOM Dynamically

-

A final feature to mention in this introduction is the ability is the ability the DOM Inspector gives you to dynamically update information reflected in the DOM about web pages, user interface, and other elements. Note that when the DOM Inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the DOM, attributes are subnodes of elements, typically) in an active, sortable list. You can right-click individual items in this list and be presented with a context menu that lets you edit the values of those attributes. For example, table elements are often used to layout elements in a web page, but when something goes wrong it can be difficult to find the offending cell, especially when tables are nested several deep, as they often are on complicated web pages. You can use this dynamic editig capability of the DOM Inspector to set tables aside (i.e., by changing their background color, adding a border, and so on). This interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.

-

Loving the Inspector

-

The DOM Inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. The DOM Inspector not only presents all this information about pages in a clear and structured way, it gives you way to find and update those structures, and it's simple to access via shortcuts and menus already available in the Mozilla browser. Used in concert with Mozilla tools like Venkman, the JavaScript debugger, the DOM Inspector can give you a complete view of any web page or DOM-based application interface. It's become an ordinary tool in my own web page development and even my normal browsing—where I see a page that looks like it's been put together in some interesting way and I hit Ctrl + Shift + I to look at the DOM of the page, interesting CSS rules the author has used to present the page, or other, sometimes hidden information about that document.

-

{{ languages( { "en": "en/Introduction_to_DOM_Inspector"} ) }}

diff --git a/files/ja/introduction_to_using_xpath_in_javascript/index.html b/files/ja/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index c73f0a1a51..0000000000 --- a/files/ja/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -title: Introduction to using XPath in JavaScript -slug: Introduction_to_using_XPath_in_JavaScript -tags: - - Add-ons - - DOM - - Extensions - - Transforming_XML_with_XSLT - - Web Development - - XML - - XPath - - XSLT ---- -

この文書では拡張機能や Web サイトから JavaScript 内で XPath を使うためのインターフェースについて解説します。Mozilla は DOM 3 XPath のかなりの部分を実装しており、HTML 文書と XML 文書の双方に対して XPath 式を実行することができます。

- -

XPath を利用するための主となるインターフェースは document オブジェクトの evaluate 関数です。

- -

{{ 英語版章題("document.evaluate") }}

- -

document.evaluate

- -

このメソッドは HTML を含む XML ベースの文書に対して XPath 式を評価し、XPathResult オブジェクトを返します。 XPathResult オブジェクトは単一のノード、もしくはノードの集合になります。このメソッドの情報は DOM: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> それから 変数 nsResolver を パラメータ namespaceResolver として document.evaluate に渡します。

- -

注意すべきなのは、XPath では接頭辞のない QName は名前空間が null の要素にのみマッチすると定義されているという点です。XPath にはデフォルト名前空間を取得する手段はありません。名前空間が null ではない要素や属性にマッチさせるには、接頭辞付きの名前テストを使い、その接頭辞を名前空間にマッピングする名前空間リゾルバを作成する必要があります。詳しくは下記のユーザ定義の名前空間リゾルバを作成する方法を参照して下さい。

- -

{{ 英語版章題("Specifying the Return Type") }}

- -

戻り値の型を指定する

- -

document.evaluate から返される変数 xpathResult は、単一のノード (単純型) もしくはノードのコレクション (ノード集合型) から成ります。

- -

{{ 英語版章題("Simple Types") }}

- -

単純型

- -

resultType で要求された結果型が次のうちのどれかであった場合、

- - - -

それぞれ以下の XPathResult オブジェクトのプロパティにアクセスする事で式の戻り値を得る事ができます。

- - - -

{{ 英語版章題("Example") }}

- -
例
- -

下の例では XPath 式 count(//p) によって HTML 文書内の <p> 要素の数を取得しています。

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'この文書には ' + paragraphCount.numberValue + ' 個の段落要素が含まれています' );
-
- -

JavaScript では数値を表示しようとすると文字列に変換されますが、XPath インターフェイスは stringValue プロパティを要求しても数値の結果を自動的に変換しないので、下のコードは動作しません。

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'この文書には ' + paragraphCount.stringValue + ' 個の段落要素が含まれています' );
-
- -

これを実行すると NS_DOM_TYPE_ERROR コードの例外が返されます。

- -

{{ 英語版章題("Node-Set Types") }}

- -

ノード集合型

- -

XPathResult オブジェクトが返すノード集合には主として 3 種類の型があります。

- - - -

{{ 英語版章題("Iterators") }}

- -
イテレータ
- -

パラメータ resultType で指定された結果型が次のどちらかの場合、

- - - -

マッチしたノードのノード集合がXPathResult オブジェクトとして返されます。これはイテレータのようにふるまい、 XPathResult の iterateNext() メソッドを使ってその中に含まれる個々のノードにアクセスできます。

- -

マッチしたノードに対する反復が全て終了すると、iterateNext() は null を返します。

- -

ただし、反復処理中に文書が変異した (文書ツリーが改変された) 場合、反復処理は無効化され、XPathResult の invalidIteratorState プロパティが true に設定され、NS_ERROR_DOM_INVALID_STATE_ERR 例外が投げられます。

- -

{{ 英語版章題("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) {
-  dump( 'Error: Document tree modified during iteraton ' + e );
-}
-
- -

{{ 英語版章題("Snapshots") }}

- -
スナップショット
- -

パラメータ resultType で指定された結果型が次のどちらかの場合、

- - - -

返される XPathResult オブジェクトはマッチしたノードの静的なノード集合となり、XPathResult オブジェクトの snapshotItem(itemNumber) メソッドによってそれぞれのノードにアクセス出来ます。itemNumber は取り出すノードのインデックスです。含まれるノードの総数は snapshotLength プロパティから得られます。

- -

スナップショットは文書が変異しても変更されず、イテレータと違って無効になることはありませんが、スナップショットは現在の文書に対応しません。ノードが移動されていたり、既に存在しないノードが含まれていたり、新しいノードが追加されている可能性もあります。

- -

{{ 英語版章題("Snapshot Example") }}

- -
スナップショットの使用例
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -

{{ 英語版章題("First Node") }}

- -
ファーストノード
- -

パラメータ resultType で指定された結果型が次のどちらかの場合、

- - - -

XPath 式にマッチした最初のノードのみが XPathResult オブジェクトとして返されます。このノードには XPathResult オブジェクトの singleNodeValue プロパティによってアクセスできます。ノード集合が空ならばこのプロパティは null になります。

- -

ただし、ordered サブタイプの場合は文書順において最初にマッチしたノードであることが保証されますが、unordered サブタイプの場合、返される単一のノードは文書順において最初のものではない可能性があるので注意が必要です。

- -

{{ 英語版章題("First Node Example") }}

- -
ファーストノードの使用例
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

{{ 英語版章題("The ANY_TYPE Constant") }}

- -

ANY_TYPE 定数

- -

パラメータ resultType に指定された結果型が ANY_TYPE である場合、返される XPathResult オブジェクトは、式を評価した結果から導き出される適切な型になります。

- -

返される結果型は単純型 ( NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE ) のうちのいずれにもなり得ますが、もしノード集合であった場合には、UNORDERED_NODE_ITERATOR_TYPE にしかなり得ません。

- -

評価の後に型を判断するには、XPathResult オブジェクトの resultType プロパティを使います。このプロパティの定数値は付録に記載されています。 None Yet {{ 英語版章題("Any_Type Example") }}

- -

Any_Type Example

- -

{{ 英語版章題("Examples") }}

- -

例

- -

{{ 英語版章題("Within a HTML Document") }}

- -

HTML 文書内で

- -

下のコードは、 XPath 式を評価する対象となる HTML 文書の内部や、それにリンクされた JavaScript 内に設置するためのものです。

- -

XPath を使って HTML 文書内の全ての <h2> 見出し要素を抽出したければ、xpathExpression は単に '//h2' となります。 // は再帰下降演算子 (Recursive Descent Operator)なので、この式は文書ツリー内のあらゆる位置にある、nodeName が h2 である要素にマッチします。 link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

HTML は名前空間を持っていないため、パラメータ namespaceResolver には null を渡している事に注目してください。

- -

文書全体から見出し要素を探すため、ここでは document オブジェクト自体を contextNode として使っています。

- -

この式の結果は XPathResult オブジェクトです。返された結果の型を知りたければ、返されたオブジェクトの resultType プロパティを評価します。この場合は 4 、つまり UNORDERED_NODE_ITERATOR_TYPE と評価されるでしょう。これは XPath 式の結果がノード集合であった場合のデフォルトの結果型です。この型はノードに一つずつアクセスする事ができ、返されるノードの順序は決まっていません。返されたノードにアクセスするには、返されたオブジェクトの iterateNext() メソッドを使います。

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'この文書内のレベル 2 の見出しは、\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

反復によってノードを得られれば、そのノードの全ての標準 DOM インターフェイスにアクセスできます。式によって返される h2 要素に対する反復処理が全て終了すると、それ以降は iterateNext() を何度呼び出しても null が返されます。

- -

{{ 英語版章題("Evaluating against an XML document within an Extension") }}

- -

拡張機能内の XML 文書に対して評価する

- -

例として XML 文書が chrome://yourextension/content/peopleDB.xml にあるとします。

- -
<?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>
-
- -

拡張機能内で XML 文書の内容を取得できるようにするため、XMLHttpRequest オブジェクトを作成して文書を同期的に読み込みます。変数 xmlDoc には文書が XMLDocument オブジェクトとして格納されるので、それに対して evaluate メソッドを使う事ができます。

- -

拡張機能の xul/js 文書で使用する JavaScript は以下の通りです。

- -
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 );
-
- -

{{ 英語版章題("Appendix") }}

- -

付録

- -

{{ 英語版章題("Implementing a User Defined Namespace Resolver") }}

- -

ユーザ定義の名前空間リゾルバの実装

- -

この例は説明のためだけのものです。 この関数は、xpathExpression から名前空間接頭辞を取り、その接頭辞に対応する URI を返さなければなりません。例えば、この式は、

- -
'//xhtml:td/mathml:math'
-
- -

(X)HTML のテーブルデータセル要素の子要素である全ての MathML 式を選択します。

- -

接頭辞 'mathml:' と 名前空間 URI 'http://www.w3.org/1998/Math/MathML' を、接頭辞 'xhtml:' と URI 'http://www.w3.org/1999/xhtml' をそれぞれ関連付けるため、関数を用意します。

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

そうすると document.evaluate をこのようにして呼び出せます。

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

{{ 英語版章題("Implementing a default namespace for XML documents") }}

- -

XML 文書のデフォルト名前空間を実装する

- -

デフォルト名前空間リゾルバの実装で述べたように、デフォルトリゾルバは XML 文書のデフォルト名前空間を処理しません。たとえばこの文書では、

- -
<?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) は、nsResolver が createNSResolver によって返されたリゾルバである場合、空集合を返します。リゾルバとして null を渡しても同じです。

- -

正しいデフォルト名前空間 (この場合は Atom 名前空間) を返すカスタムリゾルバを作成すれば、この問題を解決できます。この時、XPath 式の中ではなんらかの名前空間接頭辞を使わなければならないことに注意してください。これはリゾルバ関数がその接頭辞を指定した名前空間に変換できるようにするためです。例えばこのようにします。

- -
function resolver() {
-    return 'http://www.w3.org/2005/Atom';
-}
-doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

文書で複数の名前空間が使われている場合には、より複雑なリゾルバが必要になります。

- -

{{ 英語版章題("XPathResult Defined Constants") }}

- -

XPathResult の定義済み定数

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
定義済みの結果型定数値解説
ANY_TYPE0式の評価によって導き出される適切な型を格納した結果の集合。結果がノード集合ならば、結果の型は常に UNORDERED_NODE_ITERATOR_TYPE となるので注意が必要。
NUMBER_TYPE1一つの数値を格納した結果。 count() 関数を使用した XPath 式などで有用。
STRING_TYPE2一つの文字列を格納した結果。
BOOLEAN_TYPE3一つの真偽値を格納した結果。 not() 関数を使用した XPath 式などで有用。
UNORDERED_NODE_ITERATOR_TYPE4式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。
ORDERED_NODE_ITERATOR_TYPE5式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。
UNORDERED_NODE_SNAPSHOT_TYPE6式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。
ORDERED_NODE_SNAPSHOT_TYPE7式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。
ANY_UNORDERED_NODE_TYPE8式にマッチしたノードのうちのどれか一つを格納した結果ノード集合。これは必ずしも文書内で式にマッチした最初のノードというわけではない。
FIRST_ORDERED_NODE_TYPE9文書内で式にマッチした最初のノードを格納した結果ノード集合。
- -
-

{{ 英語版章題("Original Document Information") }}

- -

原文情報

- -
    -
  • 原文 Mozilla XPath Tutorial に基づいて作成されています。
    • -
  • 原文の著者: James Graham
    • -
  • その他の貢献者: James Thompson
    • -
  • 最終更新日: 2006 年 3 月 25 日
    • -
-
- -

 

diff --git a/files/ja/javascript_modules/index.html b/files/ja/javascript_modules/index.html deleted file mode 100644 index 83ccb1849e..0000000000 --- a/files/ja/javascript_modules/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: JavaScript modules -slug: JavaScript_modules -tags: - - Firefox 3 - - JavaScript - - 'XPCOM:Language Bindings' - - XPConnect ---- -

{{ Fx_minversion_header(3) }} -

Firefox 3 で、外部モジュールから JavaScript コードをインポートする簡単な方法を提供する、新しい Components.utils.import() メソッドが導入されました。JavaScript モジュールの作成と 使い方 に関する情報を参照してください。JavaScript モジュールは、拡張機能では共有データ に利用することもできます。 -

モジュールのインポートに関しては、この方法が利用できるほか、Firefox 3 にはあらかじめ 2 つのモジュールが組み込まれています。 -

-
XPCOMUtils -
XPCOMUtils.jsm モジュールは、JavaScript コンポーネントローダーによって読み込まれる、JavaScript コンポーネントのためのユーティリティを提供します。 -
JSON -
JSON.jsm モジュールは、JSON データを操作するためのユーティリティを提供します。 -
PluralForm -
PluralForm.jsm モジュールは、複数のローカライゼーションで複数形の単語を正しく扱うためのツールを提供します。 -
-


-

-
-
-{{ languages( { "en": "en/JavaScript_modules", "es": "es/M\u00f3dulos_JavaScript", "fr": "fr/Modules_JavaScript", "pl": "pl/Modu\u0142y_JavaScript" } ) }} diff --git a/files/ja/javascript_presentations/index.html b/files/ja/javascript_presentations/index.html deleted file mode 100644 index bcf4b5f3fe..0000000000 --- a/files/ja/javascript_presentations/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: JavaScript Presentations -slug: JavaScript_Presentations -tags: - - JavaScript - - Presentations -translation_of: JavaScript_Presentations ---- -


-

-
JavaScript 2 and The Open Web -
2007-11-20, Brendan Eich -
-
-
-{{ languages( { "en": "en/JavaScript_Presentations" } ) }} diff --git a/files/ja/jetpack/ui/slidebar/index.html b/files/ja/jetpack/ui/slidebar/index.html deleted file mode 100644 index 24fb7def9e..0000000000 --- a/files/ja/jetpack/ui/slidebar/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Slidebar -slug: Jetpack/UI/Slidebar ---- -

About

- -

新しいslideBar インスタンスの作成と関連するオプション
-

-
jetpack.slideBar.append( options );
-
jetpack.selection.onSelection( fn );
-

引数
-options: あなたのslideBarインスタンスに特定の修正を加えたオブジェクト。

-

{
-  icon - uri - SlideBar内で見せるアイコンのhref
-  html - text/xml - 機能のためのhtml コンテンツ
-  url - uri - コンテンツをロードするためのurl
-  width - num - コンテンツエリアと選択したスライドサイズの横幅
-  persist - bool - 選択された時のデフォルトのslideの動作
-  autoReload - bool - 選択された時にコンテンツを自動的にリロードするか
-  onClick - func - アイコンがクリックされた時のcallback関数
-  onSelect - func - 機能が選択された時のcallback関数
-  onReady - func - 機能がロードされた時のcallback関数
-}

diff --git "a/files/ja/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" "b/files/ja/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" deleted file mode 100644 index c95caa0b18..0000000000 --- "a/files/ja/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: システム -slug: Jetpack/システム ---- -
注意！：このようなページ（英語版に対応する日本語名のページ）を作らないでください！（このページは見本として保存するためにロックされています）
-
クリップボード
OSのクリップボードを使う
システムの情報
Jetpackが動作しているプラットフォームの情報を取得する
視覚効果
OSレベルの視覚効果を使う
デバイス
デバイスへのアクセスとコントロール (ex. iPod, Zune, 携帯電話, USBデバイス)
-
diff --git a/files/ja/key-navigable_custom_dhtml_widgets/index.html b/files/ja/key-navigable_custom_dhtml_widgets/index.html deleted file mode 100644 index 8091563161..0000000000 --- a/files/ja/key-navigable_custom_dhtml_widgets/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: キー操作可能なカスタム DHTML ウィジェット -slug: Key-navigable_custom_DHTML_widgets -tags: - - AJAX - - Accessibility - - DHTML ---- -

 

- -

課題: 今日の DHTML パッケージはキーボードアクセシビリティが欠けている

- -

増加傾向にあるウェブアプリケーションは、JavaScript を使用してメニューやツリービュー、リッチテキストフィールド、タブパネルなどのようなデスクトップウィジェットを模倣しています。Web 開発者は絶えず表計算やカレンダー、構造図などのような対話的な要素を取り入れ、新たなアプリケーションは複雑化しています。現在まで、Web 開発者はスタイル付けられた <div> や <span> を基にして、正しい技術を欠いたウィジェットをキーボードで利用できるようにしようとしています。しかしながら、キーボードアクセシビリティは Web 開発者が知っておくべき最小限必要なアクセシビリティの一部でしかありません。

- -

実例を挙げると、ほとんどの DHTML メニューは、キーボードアクセスを尊重した正規のメニューのようには動作しません。キーボードでとにかくメニューを利用できるようにする場合によくある共通の間違いは、各メニュー項目(<a> 要素を使用して作られます) をタブ移動の順番に含めてしまうことです。実際のメニューの正しい振る舞いは、一度でメニュー全体にタブ移動でき、矢印キーによる操作でメニュー項目からメニュー項目へと移動できるようになっていなければなりません。これはツリービューやグリッド、タブパネルなど、その他の "グループ化された操作" にも当てはまります。

- -

HTML 作者にとっては今すぐできる正しいことです。これらのウィジェットを支援技術との互換性を持たせるためのドキュメントは、ARIA: Accessible Rich Internet Applications 以下にあります。

- -

解決法: tabindex の振る舞いを標準準拠にする

- -

Firefox 1.5 は、Microsoft Internet Explorer が先導する tabindex 属性を拡張することにより、どの要素でもフォーカスできるように変更しています。IE システムの tabindex によれば、私たちは、すでに IE でキーボード操作できるようになっているDHTML ウィジェットを Firefox 1.5 でもキーボードで操作できるようにしています。作者がカスタムウィジェットをキーボードで操作できるようにする手段をもつために、ルールは曲げられるべきです。

- -

続く表は、新しい tabindex の振る舞いについて記述しています:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
tabindex 属性マウスまたは element.focus() を用いた JavaScript でフォーカスタブ操作
なし既定の要素の振る舞いに従う。(フォームコントロールやリンクなどについては可)既定の要素の振る舞いに従う。
負の値 (例: tabindex="-1")可不可。作者は矢印キーか他のキーの押下によって element.focus() でフォーカスしなければいけません。
0 (例: tabindex="0")可タブで移動する順番は、要素のドキュメント内の位置によります。
正の値 (例: tabindex="33")可tabindex の値は、要素の位置にタブで移動する順番を手動で変更します。これらの要素へ移動する順番は、tabindex="0" を持つ要素か、そのままタブで移動できる要素の前に位置します。
- -

新しいシステムの使い方

- -

タブで操作できる簡単なウィジェットを作成するには、tabindex="0" を <div> または <span> 上に使用してください。span を基にしたチェックボックス の例は Firefox 1.5 と IE の両方で、キーボードで利用できます。(ただし、チェックボックス画像の :before ルールは IE で動作しません)

- -

メニューやタブパネル、グリッド、ツリービューなど、ウィジェットの集まりの親要素は tabindex="0" を持つべきです。また、選択肢/タブ/セル/行の子孫要素は tabindex="-1" を持つべきです。element.focus() を使用して矢印キーを観察する onkeydown イベントは、適切な子孫ウィジェットにフォーカスをセットして呼び出すことができるため、フォーカスすることができます。DHTML ツリービュー の例は Firefox の nightly ビルド上で、キーボードとスクリーンリーダで利用できます。(IE 上でも動作します)

- -

これはまだ W3C やその他の公式な標準の一部ではありません。しかし今は、完全にキーボードで利用できるようにするためにルールを曲げる必要があります。

- -

作成時のヒント

- -

onfocus を使用して現在のフォーカスを追跡する

- -

onfocus イベントおよび onblur イベントは、すべての要素で使用することができます。現在のドキュメントのフォーカスを得るための 標準的な DOM インタフェースが無いため、これを追跡し続けるには JavaScript の変数を使用します。

- -

すべてのフォーカス変更はキーイベントとマウスイベントによってのみ起こるとは仮定しないでください。スクリーンリーダなどの支援技術はフォーカスを任意のフォーカス可能な要素にセットすることができ、それらが JavaScript ウィジェットによって的確に扱われる必要があります。

- -

tabIndex プロパティを使用してフォーカス可能性を動的に変更する

- -

カスタムコントロールが無効なった場合にはフォーカスできなくし、有効になった場合にはフォーカスできるようにしたいはずです。無効になったコントロールにタブで移動するべきではありません。しかしながら、それらが操作ウィジェットの集まりの一部である場合はタブで移動できるようにします。

- -

element.focus() と setTimeout を使用してフォーカスをセットする

- -

要素にフォーカスを移すために createEvent() および initEvent(), dispatchEvent() を使用してはいけません。DOM フォーカスイベントは、何かがフォーカスされた後にシステムによって発生しますが、フォーカスのセットには使用されません。タイムアウトは、ユーザがボタンやその他のコントロールをクリックして予期しない動作を起こすスクリプトを防ぐために、IE と Firefox 1.5 の両方で必要です。要素をフォーカスする実際のコードは以下のようになります:

- -
window.setTimeout(function () { focusItem.focus(); },0);  // focusItem はスコープ内になければいけません
-
- -

フォーカスのスタイル付けに :focus または属性セレクタを使用してはいけません

- -

IE でフォーカスが表れるようにしたい場合、フォーカスのスタイル付けに :focus または属性セレクタを使用することはできません。onfocus イベントハンドラ内でスタイルをセットしてください。例えば、<div> メニュー項目のフォーカスハンドラに this.style.backgroundColor = "gray"; を追加します。

- -

プログラム的にフォーカスを受けた tabindex="-1" 項目および要素にはいつもフォーカスを描く

- -

IE はプログラム的にフォーカスを受けた項目には自動的にフォーカスの輪郭を描きません。this.style.backgroundColor = "gray"; のようにして背景色を変更するか、this.style.border = "1px dotted invert" のように点線の境界線を追加するか、どちらかを選んでください。点線の境界線にする場合は、はじめに見えない 1px の境界線を要素に指定しておく必要があります。こうしておけば、境界線のスタイルが適用されたときに要素がずれることはありません。(境界線が空白をつくり、IE は CSS の輪郭を提供しません)

- -

キーイベントの追跡には onkeypress ではなくonkeydown を使用する

- -

IE は英数字以外のキーで keypress イベントを発生させることができません。

- -

ブラウザの機能を実行するキーイベントの使用を避ける

- -

矢印キーが使用される場合は、以下のようなコードで、キーを使用をする何か(スクロールなど) からブラウザを避けてください:

- -
<span tabindex="-1" onkeydown="return handleKeyDown();">
-
- -

handleKeyDown() が false を返す場合は、イベントは消費され、キー入力して実行する動作からブラウザを避けます。

- -

キーイベントハンドラを使用して要素のアクティベーションを有効にする

- -

すべてのマウスイベントハンドラには、キーボードイベントハンドラが必要です。例えば、onclick="doSomething()" には、この要素を Enter キーでアクティベートできるようにするために、onkeydown="return event.keyCode != 13 || doSomething();" が必要です。

- -

try/catch を使用して JavaScript エラーを回避する

- -

このシステムは現在、Opera および Safari、その他の Mozilla (1.7 およびそれ以前) の古いバージョンではサポートしていません。一部のブラウザは、すべての要素上のtabIndex プロパティのような新しい能力をサポートしていないため、適切な場所で try/catch を使用してください。DTHML によるキー操作システムをサポートしていないブラウザ上では、ウィジェットをマウスで利用できるようにしておくべきです。このシステムは Opera と Safari でのサポートが WHATWG 仕様を通して計画されています。

- -

キーリピートの振る舞いは一貫していません

- -

困ったことに、onkeydown が繰り返されるかどうかは、あなたの起動している OS に依存します。Bugzilla データベースの {{ Bug(91592) }} をご覧ください。

- -

{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "fr": "fr/Contr\u00f4les_DHTML_personnalis\u00e9s_navigables_au_clavier" } ) }}

diff --git a/files/ja/lastindexof/index.html b/files/ja/lastindexof/index.html deleted file mode 100644 index 1dc9e038db..0000000000 --- a/files/ja/lastindexof/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..32aa19ca2e --- /dev/null +++ b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,100 @@ +--- +title: かっこいいボックス +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

+ +

一般的なタスク

+ + + +

ボックスの装飾

+ +

提供された {{htmlelement("p")}} に次のように装飾を設定してください。

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

このモジュール内の文書

+ + + +

 

diff --git a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..6d793d69ff --- /dev/null +++ b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,108 @@ +--- +title: 装飾的なレターヘッド付きの便箋の作成 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +tags: + - Assessment + - Background + - Beginner + - Boxes + - CSS + - CodingScripting + - border + - box + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。

+ +

メインの手紙

+ + + + + + + +

ヒントとコツ

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..c8012c9a8a --- /dev/null +++ b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,133 @@ +--- +title: 基本的な CSS の理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Syntax + - コメント + - スタイル + - セレクタ + - ボックスモデル + - ルール +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

+ + + + + + + + + + + + +
前提条件:この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。
目的:基本的な CSS 理論、構文、およびメカニズムの理解をテストする。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <img> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style> 要素に自由に配置してください。

+
+ +

プロジェクト概要

+ +

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

+ +

基本設定:

+ + + +

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

+ + + +

書く必要がある新しいルールセット：

+ + + +
+

メモ: 2番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

+
+ +

その他の考慮事項

+ + + +

ヒントとコツ

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインの外観の例を示しています。

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

評価

+ +

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/css/howto/css_faq/index.html b/files/ja/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..4307266923 --- /dev/null +++ b/files/ja/learn/css/howto/css_faq/index.html @@ -0,0 +1,231 @@ +--- +title: CSS の一般的な質問 +slug: Web/CSS/Common_CSS_Questions +tags: + - CSS + - FAQ + - Web + - questions + - ガイド + - 例 +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。

+ +

なぜ CSS が妥当なのに正しくレンダリングされないのか？

+ +

ブラウザーは DOCTYPE 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい DOCTYPE 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

+ +

現代のブラウザーは、2つの主要なレンダリングモードを備えています。

+ + + +

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードでありますAlmost Standards Mode があります。

+ +

以下は Standards Mode または Almost Standards Mode になる DOCTYPE 宣言で、もっとも一般的に使用されるものの一覧です:

+ +
<!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
+                   この doctype が推奨されます */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

可能な限り、 HTML5 の doctype を使用するべきです。

+ +

なぜ CSS が妥当なのにまったくレンダリングされないのか?

+ +

以下のような可能性があります。

+ + + +

id と class の違いは何か?

+ +

HTML の要素は、 id 属性と class 属性の片方または両方を持つことができます。 id 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 class 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の id または class 名に対してスタイルを設定できます。

+ + + +

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。

+ + + +
+

注: 詳しくは Selectors もご覧ください。

+
+ +

プロパティの既定値に戻すにはどうすればよいのか?

+ +

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: black; }
+ +

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: initial; }
+ +

スタイルを他のスタイルから派生させるにはどうすればよいか?

+ +

CSS では、あるスタイルが他の表現で定義されることを許可していません (Working Group のスタンスに関する、Eric Meyer 氏のコメントをご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 CSS 変数 が導入されました。

+ +

ひとつの要素に複数のクラスを割り当てる方法は?

+ +

HTML の要素は class 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。class 属性内のクラスの順序は関係がありません。

+ +

なぜ私のスタイル規則は正しく動作しないのか?

+ +

構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために DOM Inspector の CSS Style Rules ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。

+ +

HTML 要素の階層

+ +

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

+ +

明示的に再定義されたスタイル規則

+ +

CSS スタイルシートでは、順序こそが重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  他の規則             */
+/*  他の規則             */
+/*  他の規則             */
+.stockSymbol { font-weight: normal; }
+
+<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。

+ +

ショートハンドプロパティの使用

+ +

ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序こそが重要であるためです。

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+
+ +

* セレクタの使用

+ +

ワイルドカードセレクタ * はすべての要素を参照するものであり、特に注意して使用しなければなりません。

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

この例では、body * セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した font-weight: bold; は、body 内の全要素に適用した font-weight: normal; にオーバーライドされます。

+ +

特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

+ +

CSS の詳細度

+ +

ある要素に複数の規則を適用すると、スタイルの詳細さに従って規則が選ばれます。インラインスタイル（HTML の style 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは CSS 2.1 Specification chapter 6.4.3 でご覧いただけます。

+ +

-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?

+ +

これらのプロパティは接頭辞付きプロパティと呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

+ +

本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの -webkit- 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが -webkit- プレフィックスエイリアスを実装し始めました。

+ +

実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。

+ +

作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +
+

メモ: 接頭辞付きプロパティの処理の詳細については、クロスブラウザテストモジュールの一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理を参照してください。

+
+ +
+

メモ: Mozilla をプレフィックスとする CSS プロパティの詳細については、CSS の Mozilla 拡張ページを参照してください。

+
+ +

z-index は位置指定へどのように関係するのか?

+ +

z-index プロパティは、要素を積み重ねる順序を指定します。

+ +

z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (position:absolute、position:relative、または  position:fixed) を持つ要素に対してのみ機能します。

+ +
+

メモ: 詳細については、ポジショニング学習の記事、特に z-index の紹介セクションを参照してください。

+
diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html deleted file mode 100644 index c8012c9a8a..0000000000 --- a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: 基本的な CSS の理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Syntax - - コメント - - スタイル - - セレクタ - - ボックスモデル - - ルール -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

- - - - - - - - - - - - -
前提条件:この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。
目的:基本的な CSS 理論、構文、およびメカニズムの理解をテストする。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <img> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style> 要素に自由に配置してください。

-
- -

プロジェクト概要

- -

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

- -

基本設定:

- - - -

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

- - - -

書く必要がある新しいルールセット：

- - - -
-

メモ: 2番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

-
- -

その他の考慮事項

- - - -

ヒントとコツ

- - - -

例

- -

次のスクリーンショットは、完成したデザインの外観の例を示しています。

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

評価

- -

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

このモジュール

- - diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html deleted file mode 100644 index 32aa19ca2e..0000000000 --- a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: かっこいいボックス -slug: Learn/CSS/Styling_boxes/A_cool_looking_box -tags: - - Assessment - - Beginner - - CSS - - Learn - - backgrounds - - borders - - box - - box model - - effects -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

- - - - - - - - - - - - -
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

-
- -

プロジェクトの概要

- -

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

- -

一般的なタスク

- - - -

ボックスの装飾

- -

提供された {{htmlelement("p")}} に次のように装飾を設定してください。

- - - -

例

- -

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

- -

- -

評価

- -

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

 

- -

このモジュール内の文書

- - - -

 

diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 6d793d69ff..0000000000 --- a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 装飾的なレターヘッド付きの便箋の作成 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper -tags: - - Assessment - - Background - - Beginner - - Boxes - - CSS - - CodingScripting - - border - - box - - letter - - letterhead - - letterheaded - - paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

- - - - - - - - - - - - -
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

-
- -

プロジェクトの概要

- -

レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。

- -

メインの手紙

- - - - - - - -

ヒントとコツ

- - - -

例

- -

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

- -

- -

評価

- -

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

このモジュール内の文書

- - diff --git a/files/ja/learn/css/styling_text/web_fonts/index.html b/files/ja/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..d96b610029 --- /dev/null +++ b/files/ja/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,219 @@ +--- +title: ウェブフォント +slug: Learn/CSS/Styling_text/ウェブフォント +tags: + - '@font-face' + - Article + - Beginner + - CSS + - CSS Fonts + - Fonts + - Guide + - Learn + - Web Development + - Web Fonts Article + - Web fonts documentation + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。
+ +

フォントファミリーの復習

+ +

基本的なテキストとフォントの装飾で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆるウェブセーフフォントです。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）

+ +

ウェブフォント

+ +

しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。

+ +

まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

これより下では、@font-face の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

構文はこれより少し複雑になります。 以下で詳しく説明します。

+ +

ウェブフォントに関して留意すべき重要な点が2つあります。

+ +
    +
  1. ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。
    2. +
  2. フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。
    3. +
+ +
+

注: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！

+
+ +

能動的学習: ウェブフォントの例

+ +

この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。

+ +

コードを追加するための出発点として、web-font-start.html ファイルと web-font-start.css ファイルを使用する必要があります（ライブの例を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 web-font-start.css ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。

+ +

フォントを探す

+ +

この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。

+ + + +

いくつかのフォントを見つけましょう！ Font Squirrel に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。

+ +

いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。

+ +
+

注: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）

+
+ +

必要なコードの生成

+ +

今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。

+ +
    +
  1. 商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。
    2. +
  2. Font Squirrel の Webfont Generator（ウェブフォントジェネレータ）に行きます。
    3. +
  3. Upload Fonts（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。
    4. +
  4. "Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。
    5. +
  5. Download your kit（キットをダウンロードする）をクリックします。
    6. +
+ +

ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。

+ +

デモでのコードの実装

+ +

この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。

+ + + +

デモにこれらのフォントを実装するには、次の手順に従います。

+ +
    +
  1. 解凍したディレクトリの名前を fonts のように簡単でシンプルなものに変更します。
    2. +
  2. stylesheet.css ファイルを開き、その中に含まれている両方の @font-face ブロックを web-font-start.css ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。
    3. +
  3. 各 url() 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に fonts/ を追加します（必要に応じて調整します）。
    4. +
  4. これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。

+ +

+ +
+

注: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — web-font-finished.html と web-font-finished.css を見てください（完成した例をライブで実行してください）。

+
+ +

オンラインフォントサービスの使用

+ +

オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、@font-face コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、Adobe Fonts や Cloud.typography などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである Google Fonts は例外です。

+ +

これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として web-font-start.html と web-font-start.css のコピーを使用してください。

+ +
    +
  1. Google Fonts に行きます。
    2. +
  2. 左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）
    3. +
  3. フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。
    4. +
  4. フォントファミリーを選択したら、ページ下部の [選択数] Families Selected バーを押します。
    5. +
  5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）
    6. +
  6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。
    7. +
+ +
+

注: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を google-font.html および google-font.css で見ることができます（それをライブで見る）。

+
+ +

@font-face の詳細

+ +

Font Squirrel によって生成された @font-face 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

@font-face が普及し始めた頃の Paul Irish による投稿（Bulletproof @font-face Syntax）の後、これは "bulletproof  @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。

+ + + +
+

注: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、unicode-range の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による unicode-range を使ったカスタムフォントスタックの作成（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。

+
+ +

可変フォント

+ +

これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。

+ +

ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、Variable フォントガイドをお読みください。

+ +

あなたのスキルをテストしてください！

+ +

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。コミュニティスクールのホームページの組版を参照してください。

+ +

まとめ

+ +

テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ + + +

このモジュール内の文書

+ + diff --git "a/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" "b/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" deleted file mode 100644 index d96b610029..0000000000 --- "a/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: ウェブフォント -slug: Learn/CSS/Styling_text/ウェブフォント -tags: - - '@font-face' - - Article - - Beginner - - CSS - - CSS Fonts - - Fonts - - Guide - - Learn - - Web Development - - Web Fonts Article - - Web fonts documentation - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。

- - - - - - - - - - - - -
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。
- -

フォントファミリーの復習

- -

基本的なテキストとフォントの装飾で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆるウェブセーフフォントです。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）

- -

ウェブフォント

- -

しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。

- -

まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff");
-}
- -

これより下では、@font-face の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

構文はこれより少し複雑になります。 以下で詳しく説明します。

- -

ウェブフォントに関して留意すべき重要な点が2つあります。

- -
    -
  1. ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。
    2. -
  2. フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。
    3. -
- -
-

注: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！

-
- -

能動的学習: ウェブフォントの例

- -

この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。

- -

コードを追加するための出発点として、web-font-start.html ファイルと web-font-start.css ファイルを使用する必要があります（ライブの例を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 web-font-start.css ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。

- -

フォントを探す

- -

この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。

- - - -

いくつかのフォントを見つけましょう！ Font Squirrel に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。

- -

いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。

- -
-

注: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）

-
- -

必要なコードの生成

- -

今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。

- -
    -
  1. 商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。
    2. -
  2. Font Squirrel の Webfont Generator（ウェブフォントジェネレータ）に行きます。
    3. -
  3. Upload Fonts（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。
    4. -
  4. "Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。
    5. -
  5. Download your kit（キットをダウンロードする）をクリックします。
    6. -
- -

ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。

- -

デモでのコードの実装

- -

この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。

- - - -

デモにこれらのフォントを実装するには、次の手順に従います。

- -
    -
  1. 解凍したディレクトリの名前を fonts のように簡単でシンプルなものに変更します。
    2. -
  2. stylesheet.css ファイルを開き、その中に含まれている両方の @font-face ブロックを web-font-start.css ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。
    3. -
  3. 各 url() 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に fonts/ を追加します（必要に応じて調整します）。
    4. -
  4. これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。

- -

- -
-

注: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — web-font-finished.html と web-font-finished.css を見てください（完成した例をライブで実行してください）。

-
- -

オンラインフォントサービスの使用

- -

オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、@font-face コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、Adobe Fonts や Cloud.typography などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである Google Fonts は例外です。

- -

これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として web-font-start.html と web-font-start.css のコピーを使用してください。

- -
    -
  1. Google Fonts に行きます。
    2. -
  2. 左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）
    3. -
  3. フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。
    4. -
  4. フォントファミリーを選択したら、ページ下部の [選択数] Families Selected バーを押します。
    5. -
  5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）
    6. -
  6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。
    7. -
- -
-

注: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を google-font.html および google-font.css で見ることができます（それをライブで見る）。

-
- -

@font-face の詳細

- -

Font Squirrel によって生成された @font-face 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

@font-face が普及し始めた頃の Paul Irish による投稿（Bulletproof @font-face Syntax）の後、これは "bulletproof  @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。

- - - -
-

注: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、unicode-range の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による unicode-range を使ったカスタムフォントスタックの作成（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。

-
- -

可変フォント

- -

これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。

- -

ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、Variable フォントガイドをお読みください。

- -

あなたのスキルをテストしてください！

- -

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。コミュニティスクールのホームページの組版を参照してください。

- -

まとめ

- -

テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- - - -

このモジュール内の文書

- - diff --git a/files/ja/learn/forms/advanced_form_styling/index.html b/files/ja/learn/forms/advanced_form_styling/index.html new file mode 100644 index 0000000000..9e6cf26d94 --- /dev/null +++ b/files/ja/learn/forms/advanced_form_styling/index.html @@ -0,0 +1,556 @@ +--- +title: HTML フォームへの高度なスタイル設定 +slug: Learn/Forms/Advanced_styling_for_HTML_forms +tags: + - Advanced + - CSS + - Forms + - HTML + - Web + - ガイド + - 例 +translation_of: Learn/Forms/Advanced_form_styling +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}
+ +

本記事では、スタイル設定が難しい一部の(不良なものと劣悪なもの)フォームコントロールで CSS を使用する方法を見ていきます。前の記事で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。
目的:フォームのどの部分をスタイル設定するのが難しいのか、またなぜなのかを理解する。そこをカスタマイズするのに何ができるかを学ぶ。
+ +

始める前に、2 種類の HTML フォームウィジェットについておさらいしましょう:

+ +

不良: スタイルの設定が難しく複雑なトリックが必要であり、時に CSS3 の高度な知識が必要である要素:

+ + + +

劣悪: いくつかの要素は CSS でスタイル設定できません。これらが含まれます:

+ + + +

見た目: OS レベルのスタイル制御

+ +

前の記事では歴史的に、ウェブフォームのスタイル設定は OS で行われており、それがこのコントロールの見た目のカスタマイズの問題の一部となっていました。

+ +

{{cssxref("appearance")}} プロパティは OS やシステムレベルでウェブフォームのスタイル設定を制御する方法として作成されました。不運なことに、そのプロパティの元々の実装の動作はブラウザー間で大きく異なっており、そんなに便利ではありませんでした。最近の実装ではもっと動作が一貫してきており、十分興味深く、それは Chromium-ベースのブラウザー (Chrome, Opera, Edge), Safari, Firefox のいずれも -webkit-  のプレフィックスつきバージョン (-webkit-appearance)をサポートしています。Firefox は、ウェブ開発者の大半が -webkit- プレフィックスバージョンをサポート使っていて互換性が良いため、このように決めました。

+ +

リファレンスページを見ると -webkit-appearance の多くの値がありますが、最も便利で、おそらく唯一使うのは none です。これはあらゆるコントロールがシステムレベルのスタイル設定するのをできるだけ防止して、CSS を用いた独自のスタイル設定をできるようにします。

+ +

例えば、次のコントロールを見てみます:

+ +
<form>
+  <p>
+    <label for="search">search: </label>
+    <input id="search" name="search" type="search">
+  </p>
+  <p>
+    <label for="text">text: </label>
+    <input id="text" name="text" type="text">
+  </p>
+  <p>
+    <label for="date">date: </label>
+    <input id="date" name="date" type="datetime-local">
+  </p>
+  <p>
+    <label for="radio">radio: </label>
+    <input id="radio" name="radio" type="radio">
+  </p>
+  <p>
+    <label for="checkbox">checkbox: </label>
+    <input id="checkbox" name="checkbox" type="checkbox">
+  </p>
+  <p><input type="submit" value="submit"></p>
+  <p><input type="button" value="button"></p>
+</form>
+ +

次の CSS を適用してシステムレベルのスタイル設定を削除します。

+ +
input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+ +
+

注: プレフィックスつきのプロパティを使っているときでも、両方の定義を常に入れておくのが良いです — プレフィックス付きとなしと。プレフィックスつきのものは通常は"作業中"を意味するため、将来のブラウザーベンダーはプレフィックスを落とすよう合意することもあるでしょう。上記のコードではそのような結末となった将来でも耐用できます。

+
+ +

下記の例ではあなたのシステムでどのように見えるかを示します — デフォルトでは左で、上記の CSS が適用されると右です (その他のシステムでテストしたい場合はここも探してください)。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/appearence-tester.html", '100%', 400)}}

+ +

たいていの場合、効果は枠線を除去し、CSS でのスタイル設定を少し簡単にしますが、それは本質できありません。いくつかの場合 — 検索やラジオボタン/チェックボックスでは、もっと便利です。これを見ていきましょう。

+ +

検索ボックスを変更する

+ +

<input type="search"> は基本的に単なるテキスト入力のため、なぜ appearance: none; が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば height や font-size を自在に調整できません。この理由は macOS以外の Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは scalable となりません。

+ +

これは デフォルトの Aqua を無効にする appearance: none;で修正できます:

+ +
input[type="search"] {
+    -webkit-appearance: none;
+    appearance: none;
+}
+ +

下記の例では、2 つのスタイル設定された検索ボックスが見えます。右のものは appearance: none; が適用され、左はそうでありません。macOS Chrome で見ると左のものは正しいサイズでないように見えます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/search-appearence.html", '100%', 200)}}

+ +

興味深いことに、検索フィールドで border/background をセットしてもこの問題を解決できます、なぜならそれも Aqua を無効化や "破壊する" からです。下記のスタイル設定された検索ボックスは appearance: none; が適用されていませんが、前の例と同じ macOS Chrome の問題に悩まされていません。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}

+ +
+

注: 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、input[type="search"]::-webkit-search-cancel-button { display: none; }を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。

+
+ +

チェックボックスとラジオボタン

+ +

チェックボックスやラジオボタンのスタイリングは難しい場合があります。たとえば、チェックボックスやラジオボタンのサイズはデフォルトのデザインの変更が意図されておらず、ブラウザーで試してみると非常に異なる反応を示します。

+ +

例えば、シンプルなテストケースを考えてみます:

+ +
<span><input type="checkbox"></span>
+ +
span {
+    display: inline-block;
+    background: red;
+}
+
+input[type=checkbox] {
+    width : 100px;
+    height: 100px;
+}
+ +

さまざまなブラウザーでの処理方法は以下のとおりです:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザー描画結果
Firefox 71 (macOS)
Firefox 57 (Windows 10)
Chrome 77 (macOS), Safari 13, Opera
Chrome 63 (Windows 10)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
+ +

ラジオボタン/チェックボックスで appearance: none を使う

+ +

これまで見てきたように、チェックボックスやラジオボタンのデフォルトの見た目を {{cssxref('appearance')}}:none; で削除できます。この HTML の例を見てみましょう：

+ +
<form>
+  <fieldset>
+    <legend>Fruit preferences</legend>
+
+    <p>
+      <label>
+        <input type="checkbox" name="fruit-1" value="cherry">
+        I like cherry
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" name="fruit-2" value="banana" disabled>
+        I can't like banana
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" name="fruit-3" value="strawberry">
+        I like strawberry
+      </label>
+    </p>
+  </fieldset>
+</form>
+ +

さて、カスタムチェックボックスデザインでこれらのスタイルを設定しましょう。元のチェックボックスを解除することから始めましょう：

+ +
input[type=checkbox] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+ +

{{cssxref(":checked")}} と {{cssxref(":disabled")}} 擬似クラスを使用して、状態の変化に合わせてカスタムチェックボックスの外観を変更します：

+ +
input[type=checkbox] {
+  position: relative;
+  width: 1em;
+  height: 1em;
+  border: 1px solid gray;
+  /* Adjusts the position of the checkboxes on the text baseline */
+  vertical-align: -2px;
+  /* Set here so that Windows' High-Contrast Mode can override */
+  color: green;
+}
+
+input[type=checkbox]::before {
+  content: "✔";
+  position: absolute;
+  font-size: 1.2em;
+  right: 0;
+  top: -0.3em;
+  visibility: hidden;
+}
+
+input[type=checkbox]:checked::before {
+  /* Use `visibility` instead of `display` to avoid recalculating layout */
+  visibility: visible;
+}
+
+input[type=checkbox]:disabled {
+  border-color: black;
+  background: #ddd;
+  color: gray;
+}
+ +

こうした疑似クラスなどは、次の記事で見つけられますが、上記は次のことをしています:

+ + + +

実際の結果が表示されます。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/checkboxes-styled.html", '100%', 200)}}

+ +

もっと理解できるよう別の例もあります:

+ + + +

{{cssxref("appearance")}} や をサポートしていないブラウザーでこれらのチェックボックスを表示できます。カスタムデザインは失われますが、チェックボックスのままに見えて使用できます。

+ +
+

注記: Internet Explorer はどのバージョンの appearance もサポートしませんが、input[type=checkbox]::-ms-check にて IE のみチェックボックスをターゲットにできます。この手法は、-ms-check という名前にもかかわらず、ラジオボタンでも機能します。

+
+ +

"劣悪な"要素に何ができるか?

+ +

今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、color や datetime-local のような複合コントロールタイプ、フィードバック —  {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。

+ +

問題は、要素はブラウザー同士でいろいろな既定の見た目があって、それにスタイル設定できても、内部のいくつかはスタイル設定できないことです。

+ +

ルック＆フィールの違いを受け入れる覚悟があれば、サイズ変更を一貫したものにするためのシンプルなスタイル設定や、background-colors のような単一スタイル設定、システムレベルのスタイル設定を除去できる appearance の使用などで逃げることもできます。

+ +

例を見てみましょう、たくさんの"劣悪な" フォーム機能をつぎつぎに表示しています:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/ugly-controls.html", '100%', 750)}}

+ +

この例では下記の CSS を適用しています:

+ +
body {
+  font-family: 'Josefin Sans', sans-serif;
+  margin: 20px auto;
+  max-width: 400px;
+}
+
+form > div {
+  margin-bottom: 20px;
+}
+
+select {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.select-wrapper::after {
+  content: "▼";
+  font-size: 1rem;
+  top: 6px;
+  right: 10px;
+  position: absolute;
+}
+
+button, label, input, select, progress, meter {
+  display: block;
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 5px;
+  height: 30px;
+}
+
+input[type="text"], input[type="datetime-local"], input[type="color"], select {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}
+
+label {
+  margin-bottom: 5px;
+}
+
+button {
+  width: 60%;
+  margin: 0 auto;
+}
+ +
+

注記: 多数のブラウザーで同時にこの例をテストしたい場合、live版をここで見つけてください (ソースコードも見てください)。

+ +

また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <input type="file"> リファレンスページの例を簡単にしたバージョンです。

+
+ +

ご覧のとおり、これらをモダンブラウザー全体で均一に見せることはかなりうまくいっています。

+ +

すべてのコントロールとそのラベルに対してグローバルな CSS の正規化を適用し、サイズを同様にして、親のフォントを適用するなどを行っています。これは前の記事で述べたようなことです:

+ +
button, label, input, select, progress, meter {
+  display: block;
+  font-family: inherit;
+  font-size: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 5px;
+  height: 30px;
+}
+ +

コントロールに統一した影と角丸も与えて、意味のあるようにします:

+ +
input[type="text"], input[type="datetime-local"], input[type="color"], select {
+  box-shadow: inset 1px 1px 3px #ccc;
+  border-radius: 5px;
+}
+ +

範囲や、プログレスバーや、メーターはコントロールエリアの周りに美しくないボックスができるだけなので、意味はありません。

+ +

これらのコントロールタイプそれぞれの仕様と、ハイライトの難しさをこれからお話ししましょう。

+ +

Select とデータリスト

+ +

モダンブラウザーでは、select とデータリストは一般的に、デフォルトからルック＆フィールを大きく変えたくないようにスタイル設定する場合、悪くないものです。

+ +

これまで、ボックスの基本的な見た目をかなり均一で一貫性のあるものにしてきました。とにかくデータリストコントロールは <input type="text"> なので、問題にならないことがわかっています。

+ +

2 つのものが多少問題をはらんでいます。まず最初に、select がドロップダウンであることを示す "矢印" アイコンは、ブラウザーによって異なります。また select ボックスのサイズを増やしたり、変更したりすると、醜くなりがちです。これを修正するため、例では最初に旧友の appearance: none を使ってアイコンを除去しています:

+ +
select {
+  -webkit-appearance: none;
+  appearance: none;
+}
+ +

次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は::before/::after が <select> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):

+ +
<div class="select-wrapper"><select id="select" name="select">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select></div>
+ +

次に生成されたコンテンツを使って小さな下向き矢印を作り、正しい場所にポジショニングします:

+ +
.select-wrapper {
+  position: relative;
+}
+
+.select-wrapper::after {
+  content: "▼";
+  font-size: 1rem;
+  top: 6px;
+  right: 10px;
+  position: absolute;
+}
+ +

2 つ目のもう少し有名な問題は、<select> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<option> 要素に color と background-color を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 padding)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。

+ +

本当にオプションをスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは multiple属性を使う select の場合、これはページ上に出てくるすべてのオプションを作成し、この特殊な問題を避けることができます:

+ +
<select id="select" name="select" multiple>
+  ...
+</select>
+ +

もちろんこれでも進めているデザインにはフィットしないこともありますが、注目に値します!

+ +

日付入力タイプ

+ +

日付/時間の入力タイプ (datetime-local, time, week, month) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。

+ +

しかし、コントロールの内部パーツ (例 日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナー) はまったくスタイル設定できず、appearance: none;を使ってスタイルを除去できません。スタイル設定に完全なコントロールが必要な場合、カスタムコントロールを生成するライブラリを使うか、自分で作らねばなりません。

+ +
+

注: ここでも<input type="number"> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、number タイプを使った場合にデータは簡単に集められて、単に text 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに tel を) 代わりに使うのも簡単です

+
+ +

Range 入力タイプ

+ +

<input type="range"> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:

+ +
input[type="range"] {
+  appearance: none;
+  -webkit-appearance: none;
+  background: red;
+  height: 2px;
+  padding: 0;
+  outline: 1px solid transparent;
+}
+ +

しかし、range コントロールのドラッグハンドルをカスタマイズするのはとても難しいです — range のスタイル設定を完全完全にコントロールするには、その中に複数の非標準な、ブラウザー固有の疑似要素も含んだ、複雑な CSS コードが必要です。Styling Cross-Browser Compatible Range Inputs with CSS で必要なものを細かく書くための CSS トリックを確認します。

+ +

Color 入力タイプ

+ +

color 入力タイプはそこまでひどくないです。サポートされたブラウザーでは、単に小さな枠のある単色のブロックを提供します。

+ +

枠を削除して、色のブロックだけにするには、次のようにします:

+ +
input[type="color"] {
+  border: 0;
+  padding: 0;
+}
+ +

しかし、カスタムソリューションは大きく異るようにする唯一の方法です。

+ +

ファイル入力タイプ

+ +

ファイル入力タイプは通常は OK です — 例で見てきたように、ページの残りの部分に問題なくフィットする何かを作るのはとても簡単です — コントロールの一部分でもある出力行は、入力にそう指示している場合は親のフォントを継承して、カスタムリストに名前やサイズをお好みでスタイル設定できます; 結局は作っています。

+ +

ファイルピッカーの唯一の問題は、ファイルピッカーを開くボタンは完全にスタイル設定できないことです— サイズや色設定は不可能で、別のフォントすら指定できません。

+ +

この回避法は、フォームコントロールに関連するラベルがある場合、ラベルをクリックするとコントロールがアクティブになるという事実を利用します。つまり実際のフォーム入力を次のように隠します:

+ +
input[type="file"] {
+  height: 0;
+  padding: 0;
+  opacity: 0;
+}
+ +

次にボタンのように動作するラベルをスタイル設定し、そのラベルが押された時にファイルピッカーが期待通り開くようにします:

+ +
label[for="file"] {
+  box-shadow: 1px 1px 3px #ccc;
+  background: linear-gradient(to bottom, #eee, #ccc);
+  border: 1px solid rgb(169, 169, 169);
+  border-radius: 5px;
+  text-align: center;
+  line-height: 1.5;
+}
+
+label[for="file"]:hover {
+  background: linear-gradient(to bottom, #fff, #ddd);
+}
+
+label[for="file"]:active {
+  box-shadow: inset 1px 1px 3px #ccc;
+}
+ +

上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (styled-file-picker.html のライブと、ソースコードも見てください)。

+ +

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-file-picker.html", '100%', 200)}}

+ +

メーターとプログレスバー

+ +

<meter> と <progress> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、appearance: none を設定すると良くならず、より悪くなります。

+ +

スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、progressbar.js のようなサードパーティのソリューションを使うのは簡単です。

+ +

よりよいフォームへの道: 役に立つライブラリとポリフィル

+ +

すでにいくつか見てきたように、"劣悪な"コントロールを完全にコントロールしたい場合は、JavaScript に頼るしかありません。カスタムフォームウィジェットをビルドする方法の記事では、独自のフォームウィジェットを作成する方法を見ていきますが、そこには役に立つ便利なライブラリがいくつかあります。

+ + + +

次のライブラリはフォームだけではありませんが、HTML フォームを処理するための非常に興味深い機能を備えています：

+ + + +

CSS と JavaScript には副作用があることに注意してください。したがって、それらのライブラリのいずれかを使用することを選択した場合は、スクリプトが失敗した場合に備えて、堅牢なフォールバック HTML を用意する必要があります。スクリプトが失敗する理由はたくさんあります。特にモバイル環境では、これらのケースを可能な限り最善に処理するようにウェブサイトやアプリケーションを設計する必要があります。

+ +

スキルをテストしましょう!

+ +

この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Advanced styling を見てください。心に留めておくこととして、この評価シリーズでの質問は、次の記事の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。

+ +

まとめ

+ +

HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。

+ +

このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな UI 疑似クラスを見ていきます。

+ +

{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} 

+ +

このモジュール

+ + + +

Advanced Topics

+ + diff --git a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html b/files/ja/learn/forms/advanced_styling_for_html_forms/index.html deleted file mode 100644 index 9e6cf26d94..0000000000 --- a/files/ja/learn/forms/advanced_styling_for_html_forms/index.html +++ /dev/null @@ -1,556 +0,0 @@ ---- -title: HTML フォームへの高度なスタイル設定 -slug: Learn/Forms/Advanced_styling_for_HTML_forms -tags: - - Advanced - - CSS - - Forms - - HTML - - Web - - ガイド - - 例 -translation_of: Learn/Forms/Advanced_form_styling ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}}
- -

本記事では、スタイル設定が難しい一部の(不良なものと劣悪なもの)フォームコントロールで CSS を使用する方法を見ていきます。前の記事で見たように、テキストフィールドやボタンでの CSS 使用はまったく問題がありません。ここからは、HTML フォームへのスタイル設定の闇の部分を見ていきます。

- - - - - - - - - - - - -
前提条件:基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。
目的:フォームのどの部分をスタイル設定するのが難しいのか、またなぜなのかを理解する。そこをカスタマイズするのに何ができるかを学ぶ。
- -

始める前に、2 種類の HTML フォームウィジェットについておさらいしましょう:

- -

不良: スタイルの設定が難しく複雑なトリックが必要であり、時に CSS3 の高度な知識が必要である要素:

- - - -

劣悪: いくつかの要素は CSS でスタイル設定できません。これらが含まれます:

- - - -

見た目: OS レベルのスタイル制御

- -

前の記事では歴史的に、ウェブフォームのスタイル設定は OS で行われており、それがこのコントロールの見た目のカスタマイズの問題の一部となっていました。

- -

{{cssxref("appearance")}} プロパティは OS やシステムレベルでウェブフォームのスタイル設定を制御する方法として作成されました。不運なことに、そのプロパティの元々の実装の動作はブラウザー間で大きく異なっており、そんなに便利ではありませんでした。最近の実装ではもっと動作が一貫してきており、十分興味深く、それは Chromium-ベースのブラウザー (Chrome, Opera, Edge), Safari, Firefox のいずれも -webkit-  のプレフィックスつきバージョン (-webkit-appearance)をサポートしています。Firefox は、ウェブ開発者の大半が -webkit- プレフィックスバージョンをサポート使っていて互換性が良いため、このように決めました。

- -

リファレンスページを見ると -webkit-appearance の多くの値がありますが、最も便利で、おそらく唯一使うのは none です。これはあらゆるコントロールがシステムレベルのスタイル設定するのをできるだけ防止して、CSS を用いた独自のスタイル設定をできるようにします。

- -

例えば、次のコントロールを見てみます:

- -
<form>
-  <p>
-    <label for="search">search: </label>
-    <input id="search" name="search" type="search">
-  </p>
-  <p>
-    <label for="text">text: </label>
-    <input id="text" name="text" type="text">
-  </p>
-  <p>
-    <label for="date">date: </label>
-    <input id="date" name="date" type="datetime-local">
-  </p>
-  <p>
-    <label for="radio">radio: </label>
-    <input id="radio" name="radio" type="radio">
-  </p>
-  <p>
-    <label for="checkbox">checkbox: </label>
-    <input id="checkbox" name="checkbox" type="checkbox">
-  </p>
-  <p><input type="submit" value="submit"></p>
-  <p><input type="button" value="button"></p>
-</form>
- -

次の CSS を適用してシステムレベルのスタイル設定を削除します。

- -
input {
-  -webkit-appearance: none;
-  appearance: none;
-}
- -
-

注: プレフィックスつきのプロパティを使っているときでも、両方の定義を常に入れておくのが良いです — プレフィックス付きとなしと。プレフィックスつきのものは通常は"作業中"を意味するため、将来のブラウザーベンダーはプレフィックスを落とすよう合意することもあるでしょう。上記のコードではそのような結末となった将来でも耐用できます。

-
- -

下記の例ではあなたのシステムでどのように見えるかを示します — デフォルトでは左で、上記の CSS が適用されると右です (その他のシステムでテストしたい場合はここも探してください)。

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/appearence-tester.html", '100%', 400)}}

- -

たいていの場合、効果は枠線を除去し、CSS でのスタイル設定を少し簡単にしますが、それは本質できありません。いくつかの場合 — 検索やラジオボタン/チェックボックスでは、もっと便利です。これを見ていきましょう。

- -

検索ボックスを変更する

- -

<input type="search"> は基本的に単なるテキスト入力のため、なぜ appearance: none; が便利なのでしょうか? 答えは macOS での Chromium ベースのブラウザーでは、検索ボックスはスタイル設定の制限があります — 例えば height や font-size を自在に調整できません。この理由は macOS以外の Chrome ブラウザーはもう WebKit レンダリングエンジンを使っていません 、これは既定では、いくつかのフォームコントロールで Aqua の見た目が有効です。Aqua が有効だと、いくつかのフォームコントロールは scalable となりません。

- -

これは デフォルトの Aqua を無効にする appearance: none;で修正できます:

- -
input[type="search"] {
-    -webkit-appearance: none;
-    appearance: none;
-}
- -

下記の例では、2 つのスタイル設定された検索ボックスが見えます。右のものは appearance: none; が適用され、左はそうでありません。macOS Chrome で見ると左のものは正しいサイズでないように見えます。

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/search-appearence.html", '100%', 200)}}

- -

興味深いことに、検索フィールドで border/background をセットしてもこの問題を解決できます、なぜならそれも Aqua を無効化や "破壊する" からです。下記のスタイル設定された検索ボックスは appearance: none; が適用されていませんが、前の例と同じ macOS Chrome の問題に悩まされていません。

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-search.html", '100%', 200)}}

- -
-

注: 検索フィールドでは、Edge と Chrome で入力がフォーカスされないときに "x" の削除アイコンが消えるが、Safari では残ることに気づくこともあるでしょう。CSS で消すには、input[type="search"]::-webkit-search-cancel-button { display: none; }を使用できますが、フォーカス時のアイコンも取り除き、見た目が元に戻らないようです。

-
- -

チェックボックスとラジオボタン

- -

チェックボックスやラジオボタンのスタイリングは難しい場合があります。たとえば、チェックボックスやラジオボタンのサイズはデフォルトのデザインの変更が意図されておらず、ブラウザーで試してみると非常に異なる反応を示します。

- -

例えば、シンプルなテストケースを考えてみます:

- -
<span><input type="checkbox"></span>
- -
span {
-    display: inline-block;
-    background: red;
-}
-
-input[type=checkbox] {
-    width : 100px;
-    height: 100px;
-}
- -

さまざまなブラウザーでの処理方法は以下のとおりです:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザー描画結果
Firefox 71 (macOS)
Firefox 57 (Windows 10)
Chrome 77 (macOS), Safari 13, Opera
Chrome 63 (Windows 10)
Internet Explorer 11 (Windows 10)
Edge 16 (Windows 10)
- -

ラジオボタン/チェックボックスで appearance: none を使う

- -

これまで見てきたように、チェックボックスやラジオボタンのデフォルトの見た目を {{cssxref('appearance')}}:none; で削除できます。この HTML の例を見てみましょう：

- -
<form>
-  <fieldset>
-    <legend>Fruit preferences</legend>
-
-    <p>
-      <label>
-        <input type="checkbox" name="fruit-1" value="cherry">
-        I like cherry
-      </label>
-    </p>
-    <p>
-      <label>
-        <input type="checkbox" name="fruit-2" value="banana" disabled>
-        I can't like banana
-      </label>
-    </p>
-    <p>
-      <label>
-        <input type="checkbox" name="fruit-3" value="strawberry">
-        I like strawberry
-      </label>
-    </p>
-  </fieldset>
-</form>
- -

さて、カスタムチェックボックスデザインでこれらのスタイルを設定しましょう。元のチェックボックスを解除することから始めましょう：

- -
input[type=checkbox] {
-  -webkit-appearance: none;
-  appearance: none;
-}
- -

{{cssxref(":checked")}} と {{cssxref(":disabled")}} 擬似クラスを使用して、状態の変化に合わせてカスタムチェックボックスの外観を変更します：

- -
input[type=checkbox] {
-  position: relative;
-  width: 1em;
-  height: 1em;
-  border: 1px solid gray;
-  /* Adjusts the position of the checkboxes on the text baseline */
-  vertical-align: -2px;
-  /* Set here so that Windows' High-Contrast Mode can override */
-  color: green;
-}
-
-input[type=checkbox]::before {
-  content: "✔";
-  position: absolute;
-  font-size: 1.2em;
-  right: 0;
-  top: -0.3em;
-  visibility: hidden;
-}
-
-input[type=checkbox]:checked::before {
-  /* Use `visibility` instead of `display` to avoid recalculating layout */
-  visibility: visible;
-}
-
-input[type=checkbox]:disabled {
-  border-color: black;
-  background: #ddd;
-  color: gray;
-}
- -

こうした疑似クラスなどは、次の記事で見つけられますが、上記は次のことをしています:

- - - -

実際の結果が表示されます。

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/checkboxes-styled.html", '100%', 200)}}

- -

もっと理解できるよう別の例もあります:

- - - -

{{cssxref("appearance")}} や をサポートしていないブラウザーでこれらのチェックボックスを表示できます。カスタムデザインは失われますが、チェックボックスのままに見えて使用できます。

- -
-

注記: Internet Explorer はどのバージョンの appearance もサポートしませんが、input[type=checkbox]::-ms-check にて IE のみチェックボックスをターゲットにできます。この手法は、-ms-check という名前にもかかわらず、ラジオボタンでも機能します。

-
- -

"劣悪な"要素に何ができるか?

- -

今度は"劣悪な"コントロールに注目しましょう — これは完全にスタイル設定するのが本当に難しいものです。簡単にいうと、これはドロップダウンボックス、color や datetime-local のような複合コントロールタイプ、フィードバック —  {{HTMLElement("progress")}} や {{HTMLElement("meter")}}のような指向性コントロールです。

- -

問題は、要素はブラウザー同士でいろいろな既定の見た目があって、それにスタイル設定できても、内部のいくつかはスタイル設定できないことです。

- -

ルック＆フィールの違いを受け入れる覚悟があれば、サイズ変更を一貫したものにするためのシンプルなスタイル設定や、background-colors のような単一スタイル設定、システムレベルのスタイル設定を除去できる appearance の使用などで逃げることもできます。

- -

例を見てみましょう、たくさんの"劣悪な" フォーム機能をつぎつぎに表示しています:

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/ugly-controls.html", '100%', 750)}}

- -

この例では下記の CSS を適用しています:

- -
body {
-  font-family: 'Josefin Sans', sans-serif;
-  margin: 20px auto;
-  max-width: 400px;
-}
-
-form > div {
-  margin-bottom: 20px;
-}
-
-select {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.select-wrapper::after {
-  content: "▼";
-  font-size: 1rem;
-  top: 6px;
-  right: 10px;
-  position: absolute;
-}
-
-button, label, input, select, progress, meter {
-  display: block;
-  font-family: inherit;
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  height: 30px;
-}
-
-input[type="text"], input[type="datetime-local"], input[type="color"], select {
-  box-shadow: inset 1px 1px 3px #ccc;
-  border-radius: 5px;
-}
-
-label {
-  margin-bottom: 5px;
-}
-
-button {
-  width: 60%;
-  margin: 0 auto;
-}
- -
-

注記: 多数のブラウザーで同時にこの例をテストしたい場合、live版をここで見つけてください (ソースコードも見てください)。

- -

また JavaScript をページに追加してコントロール自身の下にあるファイルピッカー自身で選択されたファイルを一覧しているのを心に留めておいてください。これは <input type="file"> リファレンスページの例を簡単にしたバージョンです。

-
- -

ご覧のとおり、これらをモダンブラウザー全体で均一に見せることはかなりうまくいっています。

- -

すべてのコントロールとそのラベルに対してグローバルな CSS の正規化を適用し、サイズを同様にして、親のフォントを適用するなどを行っています。これは前の記事で述べたようなことです:

- -
button, label, input, select, progress, meter {
-  display: block;
-  font-family: inherit;
-  font-size: 100%;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 5px;
-  height: 30px;
-}
- -

コントロールに統一した影と角丸も与えて、意味のあるようにします:

- -
input[type="text"], input[type="datetime-local"], input[type="color"], select {
-  box-shadow: inset 1px 1px 3px #ccc;
-  border-radius: 5px;
-}
- -

範囲や、プログレスバーや、メーターはコントロールエリアの周りに美しくないボックスができるだけなので、意味はありません。

- -

これらのコントロールタイプそれぞれの仕様と、ハイライトの難しさをこれからお話ししましょう。

- -

Select とデータリスト

- -

モダンブラウザーでは、select とデータリストは一般的に、デフォルトからルック＆フィールを大きく変えたくないようにスタイル設定する場合、悪くないものです。

- -

これまで、ボックスの基本的な見た目をかなり均一で一貫性のあるものにしてきました。とにかくデータリストコントロールは <input type="text"> なので、問題にならないことがわかっています。

- -

2 つのものが多少問題をはらんでいます。まず最初に、select がドロップダウンであることを示す "矢印" アイコンは、ブラウザーによって異なります。また select ボックスのサイズを増やしたり、変更したりすると、醜くなりがちです。これを修正するため、例では最初に旧友の appearance: none を使ってアイコンを除去しています:

- -
select {
-  -webkit-appearance: none;
-  appearance: none;
-}
- -

次に生成されたコンテンツを使って独自のアイコンを作成します。コントロールの周りに特別なラッパーを置いていて、その理由は::before/::after が <select> 要素では動作しなしためです (これは生成されたコンテンツが要素がフォーマットするボックスに対し相対的に配置されますが、フォーム入力は置換された要素 — 表示がブラウザーによって生成されて順番に配置されるもの — として動作するので、1 つもないためです):

- -
<div class="select-wrapper"><select id="select" name="select">
-  <option>Banana</option>
-  <option>Cherry</option>
-  <option>Lemon</option>
-</select></div>
- -

次に生成されたコンテンツを使って小さな下向き矢印を作り、正しい場所にポジショニングします:

- -
.select-wrapper {
-  position: relative;
-}
-
-.select-wrapper::after {
-  content: "▼";
-  font-size: 1rem;
-  top: 6px;
-  right: 10px;
-  position: absolute;
-}
- -

2 つ目のもう少し有名な問題は、<select> ボックスをクリックして開いたときに出てくる、オプションを含んだボックスを制御できないことです。オプションが親でセットされたフォントを継承していないのに気づくでしょう。また余白スペースや色のようなものも一貫してセットできません。例えば、Firefox では<option> 要素に color と background-color を適用できますが、Chrome ではそうなりません。どちらも余白スペース (例 padding)を適用できません。同じことはデータリスト用に出てくるオートコンプリートのリストにも当てはまります。

- -

本当にオプションをスタイル設定する必要がある場合、カスタムコントロールを生成するライブラリを使用するか、独自のカスタムコントロールを作成するかのどちらかが必要で、あるいは multiple属性を使う select の場合、これはページ上に出てくるすべてのオプションを作成し、この特殊な問題を避けることができます:

- -
<select id="select" name="select" multiple>
-  ...
-</select>
- -

もちろんこれでも進めているデザインにはフィットしないこともありますが、注目に値します!

- -

日付入力タイプ

- -

日付/時間の入力タイプ (datetime-local, time, week, month) にはすべて同じ重大な関連した問題があります。実際のボックスはテキスト入力と同じくスタイル設定が容易であり、デモ内で得たものの見た目は良いです。

- -

しかし、コントロールの内部パーツ (例 日付をピックアップするのに使うポップアップカレンダー、値を増減するスピナー) はまったくスタイル設定できず、appearance: none;を使ってスタイルを除去できません。スタイル設定に完全なコントロールが必要な場合、カスタムコントロールを生成するライブラリを使うか、自分で作らねばなりません。

- -
-

注: ここでも<input type="number"> は触れる価値があります — これにも値を増減するスピナーがあるので、同じ問題に悩まさされます。しかし、number タイプを使った場合にデータは簡単に集められて、単に text 入力を (あるいはモバイルブラウザーで数字キーパッドを表示するのに tel を) 代わりに使うのも簡単です

-
- -

Range 入力タイプ

- -

<input type="range"> はスタイル設定が煩わしいです。下記のようなものを使ってデフォルトのスライダートラックを完全に削除してカスタムスタイル (ここでは、薄い赤のトラック)に置き換えます:

- -
input[type="range"] {
-  appearance: none;
-  -webkit-appearance: none;
-  background: red;
-  height: 2px;
-  padding: 0;
-  outline: 1px solid transparent;
-}
- -

しかし、range コントロールのドラッグハンドルをカスタマイズするのはとても難しいです — range のスタイル設定を完全完全にコントロールするには、その中に複数の非標準な、ブラウザー固有の疑似要素も含んだ、複雑な CSS コードが必要です。Styling Cross-Browser Compatible Range Inputs with CSS で必要なものを細かく書くための CSS トリックを確認します。

- -

Color 入力タイプ

- -

color 入力タイプはそこまでひどくないです。サポートされたブラウザーでは、単に小さな枠のある単色のブロックを提供します。

- -

枠を削除して、色のブロックだけにするには、次のようにします:

- -
input[type="color"] {
-  border: 0;
-  padding: 0;
-}
- -

しかし、カスタムソリューションは大きく異るようにする唯一の方法です。

- -

ファイル入力タイプ

- -

ファイル入力タイプは通常は OK です — 例で見てきたように、ページの残りの部分に問題なくフィットする何かを作るのはとても簡単です — コントロールの一部分でもある出力行は、入力にそう指示している場合は親のフォントを継承して、カスタムリストに名前やサイズをお好みでスタイル設定できます; 結局は作っています。

- -

ファイルピッカーの唯一の問題は、ファイルピッカーを開くボタンは完全にスタイル設定できないことです— サイズや色設定は不可能で、別のフォントすら指定できません。

- -

この回避法は、フォームコントロールに関連するラベルがある場合、ラベルをクリックするとコントロールがアクティブになるという事実を利用します。つまり実際のフォーム入力を次のように隠します:

- -
input[type="file"] {
-  height: 0;
-  padding: 0;
-  opacity: 0;
-}
- -

次にボタンのように動作するラベルをスタイル設定し、そのラベルが押された時にファイルピッカーが期待通り開くようにします:

- -
label[for="file"] {
-  box-shadow: 1px 1px 3px #ccc;
-  background: linear-gradient(to bottom, #eee, #ccc);
-  border: 1px solid rgb(169, 169, 169);
-  border-radius: 5px;
-  text-align: center;
-  line-height: 1.5;
-}
-
-label[for="file"]:hover {
-  background: linear-gradient(to bottom, #fff, #ddd);
-}
-
-label[for="file"]:active {
-  box-shadow: inset 1px 1px 3px #ccc;
-}
- -

上記の CSS スタイル設定の結果は、下記のライブ実行の例で見ることができます (styled-file-picker.html のライブと、ソースコードも見てください)。

- -

{{EmbedGHLiveSample("learning-area/html/forms/styling-examples/styled-file-picker.html", '100%', 200)}}

- -

メーターとプログレスバー

- -

<meter> と <progress> は多くの中で最悪かもしれません。前の例で見たように、希望する幅にだいたい正確に設定できました。しかしそれを超えると、どんな方法でもスタイル設定が本当に難しいです。高さの設定をお互いに、ブラウザー間で一貫して処理できず、背景は色付けできるものの、前面のバーはできず、appearance: none を設定すると良くならず、より悪くなります。

- -

スタイル設定を制御したい場合は、この機能のカスタムソリューションを作ったり、progressbar.js のようなサードパーティのソリューションを使うのは簡単です。

- -

よりよいフォームへの道: 役に立つライブラリとポリフィル

- -

すでにいくつか見てきたように、"劣悪な"コントロールを完全にコントロールしたい場合は、JavaScript に頼るしかありません。カスタムフォームウィジェットをビルドする方法の記事では、独自のフォームウィジェットを作成する方法を見ていきますが、そこには役に立つ便利なライブラリがいくつかあります。

- - - -

次のライブラリはフォームだけではありませんが、HTML フォームを処理するための非常に興味深い機能を備えています：

- - - -

CSS と JavaScript には副作用があることに注意してください。したがって、それらのライブラリのいずれかを使用することを選択した場合は、スクリプトが失敗した場合に備えて、堅牢なフォールバック HTML を用意する必要があります。スクリプトが失敗する理由はたくさんあります。特にモバイル環境では、これらのケースを可能な限り最善に処理するようにウェブサイトやアプリケーションを設計する必要があります。

- -

スキルをテストしましょう!

- -

この記事の最後に到達しましたが、重要な情報を覚えていますか？次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Advanced styling を見てください。心に留めておくこととして、この評価シリーズでの質問は、次の記事の知識も前提していてるので、試す前にその記事に取り組むとよいかもしれません。

- -

まとめ

- -

HTML フォームで CSS を使用するのはまだ困難ですが、しばしばそれらを回避する方法があります。クリーンでユニバーサルな解決方法はありませんが、最新のブラウザーでは新しい可能性があります。今のところ、最良の解決策は、HTML フォームウィジェットに適用されたときに異なるブラウザーが CSS をサポートする方法の詳細を学ぶことです。

- -

このガイドの次の記事では、モダンブラウザーでさまざまな状態のフォームをスタイル設定できるさまざまな UI 疑似クラスを見ていきます。

- -

{{PreviousMenuNext("Learn/Forms/Styling_web_forms", "Learn/Forms/UI_pseudo-classes", "Learn/Forms")}} 

- -

このモジュール

- - - -

Advanced Topics

- - diff --git a/files/ja/learn/forms/basic_native_form_controls/index.html b/files/ja/learn/forms/basic_native_form_controls/index.html new file mode 100644 index 0000000000..f0ddcdc09d --- /dev/null +++ b/files/ja/learn/forms/basic_native_form_controls/index.html @@ -0,0 +1,339 @@ +--- +title: 基本的なネイティブフォームコントロール +slug: Learn/Forms/The_native_form_widgets +tags: + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Basic_native_form_controls +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
+ +

直前の記事では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターリテラシーと、基本的な HTML の理解。
目的:データを収集するためにブラウザーで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。
+ +

{{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}},  {{HTMLelement('input')}}といったフォーム要素については既に見てきました。この記事では次を網羅します:

+ + + +
+

注: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、HTML フォーム要素のリファレンス、特に広範囲にわたる <input> 型の参照を参照してください。

+
+ +

テキスト入力フィールド

+ +

テキスト {{htmlelement("input", "入力")}} フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。

+ +
+

注: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチエディット (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。

+
+ +

すべてのテキストフィールドに共通する動作があります:

+ + + +
+

注: {{htmlelement("input")}} 要素は、type 属性によってさまざまなフォームとなるため、、HTML要素の中でも特別です。単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、チェックボックス、カラーピッカー、ボタンといったテキスト入力のないコントロールなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。

+
+ +

単一行のテキストフィールド

+ +

単一行のテキストフィールドは、{{htmlattrxref("type","input")}} 属性値が text に設定されている {{HTMLElement("input")}} 要素を使用するか、{{htmlattrxref("type","input")}} 属性を指定しない場合( text がデフォルト値になり)に作成されます。{{htmlattrxref("type","input")}} 属性に指定した値がブラウザーに認識されない場合 (たとえば type="color" を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。

+ +
+

注: GitHub の single-line-text-fields.html に、すべての単一行テキストフィールドタイプの例があります (こちらも参照してください)。

+
+ +

これは基本的な単一行のテキストフィールドの例です。

+ +
<input type="text" id="comment" name="comment" value="I'm a text field">
+ +

単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。

+ +

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。

+ +

Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.

+ +
+

HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。

+
+ +

パスワードフィールド

+ +

このタイプのフィールドは、{{htmlattrxref("type","input")}} 属性の値 password を使用して設定できます:

+ +
<input type="password" id="pwd" name="pwd">
+ +

password の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。

+ +

これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり https:// ... アドレスにて) 、データ送信前に暗号化することです。

+ +

最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、安全でないパスワードをご覧ください。

+ +

隠しコンテンツ

+ +

もう１つのオリジナルなテキストコントロールは hidden 入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。

+ +
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+
+ +

このような要素を作成する場合は、name 属性と value 属性の設定が必要です。この値は JavaScript にて動的にセットできます。hidden 入力タイプには関連したラベルはありません。

+ +

その他のテキストタイプ、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, と{{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。

+ +

チェック可能アイテム:チェックボックスとラジオボタン

+ +

チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、checked 属性を使用します。

+ +

これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、name 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が on という値で送信されます。

+ +
+

注: このセクションの例は、checkable-items.html として GitHub にあります (こちらも参照してください)。

+
+ +

最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。{{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、{{htmlelement("legend")}}の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。

+ +

チェックボックス

+ +

チェックボックスは、type 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定した {{HTMLElement("input")}} 要素で作成します。

+ +
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+ +

checked 属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。

+ +

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。

+ +

Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

+ +
+

注: checked 属性のあるあらゆるチェックボックスやラジオボタンには、チェックされていない場合でも、対応する {{cssxref(':default')}} 仮想クラスがあります。現在チェックされているものには{{cssxref(':checked')}} 仮想クラスがあります。

+
+ +

チェックボックスのオンオフ性質により、チェックボックスは、規定のチェックボックスを拡張してトグルスイッチのように見えるボタンを作っている開発者やデザイナーにとって、トグルボタンとして考えられます。ここで動作する例を 見ることができます(ソースコードも見られます)。

+ +

ラジオボタン

+ +

ラジオボタンは、{{htmlattrxref("type","input")}} 属性を radio に設定した {{HTMLElement("input")}} 要素で作成します。

+ +
<input type="radio" checked id="soup" name="meal">
+ +

いくつかのラジオボタンをまとめることができます。{{htmlattrxref("name","input")}} 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。

+ +
<fieldset>
+  <legend>What is your favorite meal?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soup</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+ +

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。

+ +

Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

+ +

ボタン

+ +

ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:

+ +
+
{{原語併記("送信", "Submit")}}
+
フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、type 属性 (または type の無効な値) を省略すると、送信ボタンが表示されます。
+
{{原語併記("リセット", "Reset")}}
+
すべてのフォームウィジェットをデフォルト値にリセットします。
+
button
+
自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。
+
+ +

それから、{{htmlelement("button")}} 要素それ自体もあります。これは値が submit、reset または button である type 属性をとり、上記の 3 つの <input> 種別を模倣できます。この 2 つの主な違いは実際の <button> 要素の方が多くのスタイル設定できることです。

+ +
+

注: image 入力タイプもボタンとしてレンダリングされます。それはあとで見ます。

+
+ +
+

注: このセクションの例は button-examples.html として GitHub にあります (こちらも参照してください)。

+
+ +

ボタンは {{HTMLElement("button")}} 要素か {{HTMLElement("input")}} 要素で作成します。どの種類のボタンを表示するかを指定するのは、{{htmlattrxref("type","input")}} 属性の値です:

+ +

送信

+ +
<button type="submit">
+    This a <br><strong>submit button</strong>
+</button>
+
+<input type="submit" value="This is a submit button">
+ +

リセット

+ +
<button type="reset">
+    This a <br><strong>reset button</strong>
+</button>
+
+<input type="reset" value="This is a reset button">
+ +

無名

+ +
<button type="button">
+    This an <br><strong>anonymous button</strong>
+</button>
+
+<input type="button" value="This is an anonymous button">
+ +

ボタンは {{HTMLElement("button")}} 要素でも {{HTMLElement("input")}} 要素でも、常に同じ動作になります。上記のサンプルでわかるように、{{HTMLElement("button")}} 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<button>タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり value 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。

+ +

下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。

+ +

Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

+ +

画像ボタン

+ +

画像ボタンコントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。

+ +

画像ボタンは、{{htmlattrxref("type","input")}} 属性を image に設定した {{HTMLElement("input")}} 要素で作成します。

+ +

この要素は {{HTMLElement("img")}} 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。

+ +
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+ +

画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。

+ + + +

サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 get メソッド経由で送信されて、以下のような値の追加された URL が送信されます:

+ +
http://foo.com?pos.x=123&pos.y=456
+ +

これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、フォームデータの送信の記事で詳しく説明します。

+ +

ファイルピッカー

+ +

初期のHTMLであった最後の <input> タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: フォームデータの送信。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。

+ +

ファイルピッカーウィジェットを作成するには、{{htmlattrxref("type","input")}} 属性を file に設定した {{HTMLElement("input")}} 要素を使用します。{{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、{{htmlattrxref("multiple","input")}} 属性を付加します。

+ +

例

+ +

以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。

+ +
<input type="file" name="file" id="file" accept="image/*" multiple>
+ +

いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を accept 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:

+ +
<input type="file" accept="image/*;capture=camera">
+<input type="file" accept="video/*;capture=camcorder">
+<input type="file" accept="audio/*;capture=microphone">
+ +

共通属性

+ +

フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名既定値説明
autofocusfalseこの真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。
disabledfalseこの真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。disabled 属性が設定されている包含要素がない場合は、その要素が有効になります。
formウィジェットが関連付けられている <form> 要素。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の id 属性でなければなりません。理論的には、フォームウィジェットを {{HTMLElement("form")}} 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。
name要素の名前。これはフォームデータとともに送信されます。
value要素の初期値
+ +

スキルをテストしましょう!

+ +

この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Basic controls を見てください。

+ +

まとめ

+ +

上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。

+ +

この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい type 属性の値を見ていきます。

+ +

{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

+ +

このモジュール

+ + + +

上級トピック

+ + diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html new file mode 100644 index 0000000000..1515dc573f --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_1/index.html @@ -0,0 +1,415 @@ +--- +title: 例 1 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 +--- +

これは、カスタムフォームウィジェットの作成方法を説明する最初のコード例です。

+ +

Basic state

+ +

HTML

+ +
<div class="select">
+  <span class="value">Cherry</span>
+  <ul class="optList hidden">
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+
+ +

Result for basic state

+ +
{{ EmbedLiveSample('Basic_state', 120, 130) }}
+ +

Active state

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cherry</span>
+  <ul class="optList hidden">
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

Result for active state

+ +
{{ EmbedLiveSample('Active_state', 120, 130) }}
+ +

Open state

+ +

HTML

+ +
<div class="select active">
+  <span class="value">Cherry</span>
+  <ul class="optList">
+    <li class="option highlight">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+</div>
+ +

CSS

+ +
/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFF;
+}
+ +

Result for open state

+ +
{{ EmbedLiveSample('Open_state', 120, 130) }}
diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html new file mode 100644 index 0000000000..7a547909ce --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_2/index.html @@ -0,0 +1,212 @@ +--- +title: 例 2 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 +--- +

これは、カスタムフォームウィジェットの作成方法を説明する2番目の例です。

+ +

JS

+ +

HTML コンテンツ

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+<form>
+
+ +

CSS コンテンツ

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript コンテンツ

+ +
window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+ +

JS の結果

+ +

{{ EmbedLiveSample('JS', 120, 130) }}

+ +

No JS

+ +

HTML コンテンツ

+ +
<form class="no-widget">
+  <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+<form>
+ +

CSS コンテンツ

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

No JS の結果

+ +

{{ EmbedLiveSample('No_JS', 120, 130) }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html new file mode 100644 index 0000000000..ac3763cb80 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_3/index.html @@ -0,0 +1,246 @@ +--- +title: 例 3 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 +--- +

これは、カスタムフォームウィジェットの作成方法を説明する3番目の例です。

+ +

状態を変更する

+ +

HTML コンテンツ

+ +
<form class="no-widget">
+  <select name="myFruit" tabindex="-1">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+  </select>
+
+  <div class="select" tabindex="0">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+</form>
+ +

CSS コンテンツ

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript コンテンツ

+ +
// ------- //
+// HELPERS //
+// ------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// -------------------- //
+// Function definitions //
+// -------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+// ------------- //
+// Event binding //
+// ------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    },  false);
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+ +

結果

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html new file mode 100644 index 0000000000..51fa53c27a --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_4/index.html @@ -0,0 +1,296 @@ +--- +title: 例 4 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 +--- +

これは、カスタムフォームウィジェットの作成方法を説明する4番目の例です。

+ +

状態を変更する

+ +

HTML コンテンツ

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cherry</option>
+    <option>Lemon</option>
+    <option>Banana</option>
+    <option>Strawberry</option>
+    <option>Apple</option>
+  </select>
+
+  <div class="select">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden">
+      <li class="option">Cherry</li>
+      <li class="option">Lemon</li>
+      <li class="option">Banana</li>
+      <li class="option">Strawberry</li>
+      <li class="option">Apple</li>
+    </ul>
+  </div>
+</form>
+ +

CSS コンテンツ

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript コンテンツ

+ +
// ------- //
+// HELPERS //
+// ------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// -------------------- //
+// Function definitions //
+// -------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// ------------- //
+// Event binding //
+// ------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option');
+
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+  });
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

結果

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html new file mode 100644 index 0000000000..4bad8016bb --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/example_5/index.html @@ -0,0 +1,289 @@ +--- +title: 例 5 +slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 +tags: + - Forms + - HTML +translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 +--- +

これが、カスタムフォームウィジェットの作成方法を説明する最後の例です。

+ +

状態を変更する

+ +

HTML コンテンツ

+ +
<form class="no-widget">
+  <select name="myFruit">
+    <option>Cherry</option>
+    <option>Lemon</option>
+    <option>Banana</option>
+    <option>Strawberry</option>
+    <option>Apple</option>
+  </select>
+
+  <div class="select" role="listbox">
+    <span class="value">Cherry</span>
+    <ul class="optList hidden" role="presentation">
+      <li class="option" role="option" aria-selected="true">Cherry</li>
+      <li class="option" role="option">Lemon</li>
+      <li class="option" role="option">Banana</li>
+      <li class="option" role="option">Strawberry</li>
+      <li class="option" role="option">Apple</li>
+    </ul>
+  </div>
+</form>
+ +

CSS コンテンツ

+ +
.widget select,
+.no-widget .select {
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+
+/* --------------- */
+/* Required Styles */
+/* --------------- */
+
+.select {
+  position: relative;
+  display : inline-block;
+}
+
+.select.active,
+.select:focus {
+  box-shadow: 0 0 3px 1px #227755;
+  outline: none;
+}
+
+.select .optList {
+  position: absolute;
+  top     : 100%;
+  left    : 0;
+}
+
+.select .optList.hidden {
+  max-height: 0;
+  visibility: hidden;
+}
+
+/* ------------ */
+/* Fancy Styles */
+/* ------------ */
+
+.select {
+  font-size   : 0.625em; /* 10px */
+  font-family : Verdana, Arial, sans-serif;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : 0.2em solid #000; /* 2px */
+  border-radius : 0.4em; /* 4px */
+
+  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  background : #F0F0F0;
+  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+
+  white-space   : nowrap;
+  text-overflow : ellipsis;
+  vertical-align: top;
+}
+
+.select:after {
+  content : "▼";
+  position: absolute;
+  z-index : 1;
+  height  : 100%;
+  width   : 2em; /* 20px */
+  top     : 0;
+  right   : 0;
+
+  padding-top : .1em;
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  text-align : center;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+}
+
+.select .optList {
+  z-index : 2;
+
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  background: #f0f0f0;
+  border: .2em solid #000;
+  border-top-width : .1em;
+  border-radius: 0 0 .4em .4em;
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
+
+  -moz-box-sizing : border-box;
+  box-sizing : border-box;
+
+  min-width : 100%;
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.select .option {
+  padding: .2em .3em;
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

JavaScript コンテンツ

+ +
// ------- //
+// HELPERS //
+// ------- //
+
+NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+
+// -------------------- //
+// Function definitions //
+// -------------------- //
+
+function deactivateSelect(select) {
+  if (!select.classList.contains('active')) return;
+
+  var optList = select.querySelector('.optList');
+
+  optList.classList.add('hidden');
+  select.classList.remove('active');
+}
+
+function activeSelect(select, selectList) {
+  if (select.classList.contains('active')) return;
+
+  selectList.forEach(deactivateSelect);
+  select.classList.add('active');
+};
+
+function toggleOptList(select, show) {
+  var optList = select.querySelector('.optList');
+
+  optList.classList.toggle('hidden');
+}
+
+function highlightOption(select, option) {
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  option.classList.add('highlight');
+};
+
+function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+
+function getIndex(select) {
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+
+// ------------- //
+// Event binding //
+// ------------- //
+
+window.addEventListener("load", function () {
+  var form = document.querySelector('form');
+
+  form.classList.remove("no-widget");
+  form.classList.add("widget");
+});
+
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    select.tabIndex = 0;
+    select.previousElementSibling.tabIndex = -1;
+
+    updateValue(select, selectedIndex);
+
+    optionList.forEach(function (option, index) {
+      option.addEventListener('mouseover', function () {
+        highlightOption(select, option);
+      });
+
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    select.addEventListener('click', function (event) {
+      toggleOptList(select);
+    });
+
+    select.addEventListener('focus', function (event) {
+      activeSelect(select, selectList);
+    });
+
+    select.addEventListener('blur', function (event) {
+      deactivateSelect(select);
+    });
+
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html new file mode 100644 index 0000000000..7bbd20b511 --- /dev/null +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html @@ -0,0 +1,901 @@ +--- +title: カスタムフォームコントロールの作成方法 +slug: Learn/Forms/How_to_build_custom_form_widgets +tags: + - Advanced + - Example + - Forms + - Guide + - HTML + - Web +translation_of: Learn/Forms/How_to_build_custom_form_controls +--- +
{{LearnSidebar}}
+ +

HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、{{HTMLElement("select")}} 要素のようなコントロールに高度なスタイル設定を行いたい場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。

+ +

本記事では、そのようなコントロールの作り方を見ていきます。その目的のため、次の例に取り組みます: {{HTMLElement("select")}} 要素の再構築です。このほかに独自コントロール作成をどういう方法でするか、いつするか、またそれが意味をなすのかや、コントロール作成が必須なときに何に気をつけるべきかを扱います。

+ +
+

注記: ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の重要なコードや未知のコンテキストでの DOM 操作が組み合わされており、本記事の対象から外れます。

+
+ +

デザイン、構造、セマンティクス

+ +

カスタムコントロールを作成する前に、何をしたいかをはっきりと理解することから始めるべきです。これはあなたの貴重な時間を節約するでしょう。特に、コントロールの全状態を明確に定義することが重要です。これを行うには、状態や動作がよく知られている既存のコントロールからスタートするとよいでしょう。この結果、簡単に可能な限りの模倣を行えます。

+ +

本記事の例では、{{HTMLElement("select")}} 要素を再構築します。以下が、私たちが実現したい成果です:

+ +

The three states of a select box

+ +

このスクリーンショットでは、コントロールの主要な状態 3 つを示しています: 通常状態 (左)、アクティブ状態 (中央)、そして開いた状態 (右) です。

+ +

動作の点では、ネイティブな HTML用要素を再作成します。このため、ネイティブ HTML要素と同様な動作や意味を持たせるべきです。独自のコントロールもネイティブコントロールと同様に、キーボードだけでなくマウスでも使用できるように、またスクリーンリーダーに理解できるようにしたいと考えます。コントロールがどのように各状態に達するかを定義することから始めましょう:

+ +
+
コントロールは以下のときに通常状態になります:
+
+
    +
  • ページを読み込む
    • +
  • コントロールはアクティブであったが、ユーザーがコントロール以外のどこかをクリックした
    • +
  • コントロールはアクティブであったが、キーボードを使用して別のコントロールにフォーカスを移した (例 Tab キー)
    • +
+
+
コントロールは以下のときにアクティブ状態になります:
+
+
    +
  • ユーザーがコントロール上でクリックする
    • +
  • ユーザーが Tab キーを押下して、コントロールがフォーカスを得る
    • +
  • コントロールが開いた状態で、ユーザーがコントロールをクリックする
    • +
+
+
コントロールは以下のときに開いた状態になります:
+
+
    +
  • コントロールが開いた状態ではないときに、ユーザーがコントロールをクリックした
    • +
+
+
+ +

状態をどのように変えるかを理解したら、コントロールの値をどのように変えるかの定義が重要になります:

+ +
+
以下のときに値が変わります:
+
+
    +
  • コントロールが開いた状態であるときに、ユーザーが選択肢をクリックする
    • +
  • コントロールがアクティブ状態であるときに、ユーザーが上下矢印キーを押下する
    • +
+
+
+ +
+
以下のときには値は変わりません:
+
+
    +
  • 最初のオプションが選択済みのときに、ユーザーが上矢印をクリックする
    • +
  • 最後のオプションが選択済みのときに、ユーザーが下矢印をクリックする
    • +
+
+
+ +

最後に、コントロールの選択肢がどのように動作するかを定義しましょう:

+ + + +

この例の用途としては、ここまでです。しかし注意深い読者の方は、いくつかの動作が欠けていることに気づくでしょう。例えば、コントロールが開いた状態であるときにユーザーが Tab キーを押すと何が起きると考えますか? その答えは... 何も起きません。正しい動作は明らかでしょうが、実際は私たちの仕様で定義されていないため、とても見逃されやすいのです。これは、コントロールの動作を設計する人と実装する人が異なるチーム環境で特に当てはまります。

+ +

別のおもしろい例です: コントロールが開いた状態であるときに上下矢印キーを押すと何が起きるのでしょうか? こちらはやや難しくなります。アクティブ状態と開いた状態をまったく別のものと考えるなら、その答えはやはり "何も起きません" です。これは、開いた状態でのキーボードの作用を定義していないためです。一方、アクティブ状態と開いた状態が少し重なると考えるなら、値は替わるかもしれませんがそれに対応して選択肢が強調されることはないでしょう。繰り返しになりますが、これはコントロールが開いた状態の選択肢に対するキーボードの作用を定義していないためです (コントロールが開いた状態で何が起きるかだけを定義しており、その後がないためです)。

+ +

もう少し突っ込んで考えてみます: エスケープキーはどうでしょう? Esc キーを押すと開いた select が閉じます。ネイティブの{{htmlelement('select')}}と同じ機能を提供する場合、キーボードやマウスやスクリーンリーダーへのタッチ、その他あらゆる入力デバイスまで、全てのユーザーにとっての select の動作と全く同じようにふるまうべきです。

+ +

この例では欠けている仕様が明らかですので対処するでしょうが、めずらしい新たなコントロールでは真の問題になり得ます。標準要素では、{{htmlelement('select')}} もその 1 つですが、仕様の作成者は膨大な時間をかけて全てのユースケースの全ての入力デバイスの全ての操作を指定します。新コントロールの作成は簡単ではなく、特にそれが作成されたことのないものの場合は、どのような動作が正しいかについて、わずかなアイデアですら誰も持っていないため簡単ではないです。少なくとも select はこれまでやってきたため、どうふるまうかはわかっています!

+ +

一般的に、新しい操作を設計するのは、標準を作成するに十分なリーチを持った、とても大きな産業プレイヤーだけの選択肢です。例えば、Apple は 2001年に iPod にスクロールホイールを導入しました。完全に新しい操作方法のデバイスを導入するのに成功するマーケットシェアがありましたが、たいていのデバイス会社はそうはいきません。

+ +

新しいユーザーインタラクションを発明しないのがベストです。インタラクションを追加する場合、設計段階で時間を使うのが重要です。動作の定義が貧弱であったり定義もれがあったりした場合、いったんユーザーが使い始めると動作を再定義するのが非常に困難になると思われますので、設計段階に時間をかけることは賢明です。もし疑っているのでしたら、他の人に意見を聞きましょう。また予算を持っているのでしたら、ユーザーテストの実施をためらってはいけません。このプロセスは、UX デザインと呼ばれます。この点について詳しく学びたいのでしたら、以下の役に立つリソースをご覧になるとよいでしょう:

+ + + +
+

注記: さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では Alt + Down  キー で実現できますが、この例では実装しません。しかし、仕組みはすでに click イベント向けに実装されていますので、行うのは簡単です。

+
+ +

HTML の構造とセマンティクスの定義

+ +

コントロールの基本的な機能が決まりましたので、構築を始めるときが来ました。最初のステップはコントロールの HTML 構造の定義と、基本的なセマンティクスの付与です。こちらが、{{HTMLElement("select")}} 要素の再構築に必要な HTML です:

+ +
<!-- これはコントロールの中心的なコンテナです。
+     tabindex 属性は、ユーザーがコントロールにフォーカスを当てられるようにするものです。
+     これを JavaScript で設定する方がよいことは、後で見ていきます。-->
+<div class="select" tabindex="0">
+
+  <!-- このコンテナは、コントロールの現在の値を表示するために使用します。-->
+  <span class="value">Cherry</span>
+
+  <!-- このコンテナは、コントロールで使用できるすべての選択肢を包含します。
+       これはリストですから、ul 要素を使用するとよいでしょう。-->
+  <ul class="optList">
+    <!-- 各々の選択肢は表示される値だけを包含しており、フォームのデータで送信される
+         実際の値を処理する方法は後で見ていきます。-->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+ +

クラス名の使い方に注目してください。これらは基盤となる実際の HTML とは関係なく、フォームに関するそれぞれの部分を示します。これは CSS や JavaScript を強固な HTML の構造と結びつけないようにするために重要であり、そのためにコントロールを扱うコードを壊すことなく、後から実装を変更することができます。例えば {{HTMLElement("optgroup")}} 要素と同等の機能を実装したい場合などです。

+ +

クラス名は、しかしながら、意味のある値ではありません。現在の状態では、スクリーンリーダーのユーザーのみがリストを"見る"ことができます。ARIA セマンティクスを少し追加します。

+ +

CSS でルックアンドフィールを作成する

+ +

構造ができましたので、コントロールのデザインを始められます。カスタムコントロールを作成する上でのポイントは、望むとおりにコントロールへスタイルを設定できることです。そのために、CSS を 2 つの部分に分けます: ひとつはコントロールが {{HTMLElement("select")}} 要素のように動作するために欠かせない CSS ルールであり、もうひとつは希望する見た目にするための好みのスタイルで構成されます。

+ +

必須のスタイル

+ +

必須のスタイルは、コントロールの 3 つの状態を扱うために欠かせないものです。

+ +
.select {
+  /* 選択肢のリスト向けのポジショニングコンテキストを作成します;
+     adding this to .select{{cssxref(':focus-within')}} will be a better option when fully supported
+  */
+  position: relative;
+
+  /* コントロールをテキストフローの一部かつまとまった大きさにします */
+  display : inline-block;
+}
+ +

アクティブ状態であるコントロールのルックアンドフィールを定義するため、追加で active クラスが必要です。このコントロールはフォーカスを得ることができますので、同様に動作させるためにカスタムスタイルを {{cssxref(":focus")}} 疑似クラスにも適用します。

+ +
.select.active,
+.select:focus {
+  outline: none;
+
+  /* box-shadow プロパティは必須ではありませんが、これをデフォルト値として使用するのは
+     アクティブ状態を見えるようにするために重要です。自由に書き換えてください。*/
+  box-shadow: 0 0 3px 1px #227755;
+}
+ +

次に、選択肢のリストを扱いましょう:

+ +
/* .select セレクタは、私たちが定義するクラスがコントロールの内部にあることを
+   確実にするためのシンタックスシュガーです。*/
+.select .optList {
+  /* 選択肢のリストが値の下部かつ HTML フローの外側に表示される
+     ようにします。*/
+  position : absolute;
+  top      : 100%;
+  left     : 0;
+}
+ +

選択肢のリストが隠れている状態を扱うための追加クラスも必要です。これはアクティブ状態と開いた状態で完全には一致しない相違点を扱うために必要です。

+ +
.select .optList.hidden {
+  /* これはアクセシブルな方法でリストを隠すための簡単な方法です。
+     アクセシビリティについては最後に説明します。*/
+  max-height: 0;
+  visibility: hidden;
+}
+ +
+

注: 選択肢のリストに高さと幅を与えないように transform: scale(1, 0) も使えます。

+
+ +

美化

+ +

基本的な機能性を適切に置きましたので、戯れを始められます。以下は何ができるかの例であり、本記事の冒頭で示したスクリーンショットに一致するものです。とはいえ、自由に実験して何ができるかを見てみるとよいでしょう。

+ +
.select {
+  /* アクセシビリティのため、すべてのサイズは em 単位の値で表します
+     (ユーザーがテキストのみのモードでブラウザーのズーム機能を使用したときに、
+     コントロールをリサイズ可能にします)。算出結果は、ほとんどのブラウザーで
+     デフォルト値である 1em == 16px を想定します。
+     px から em への変換がわからない場合は http://riddle.pl/emcalc/ を試してください */
+  font-size   : 0.625em; /* この値 (10px) は、本コンテキストにおける新たなフォントサイズの em 単位値です。*/
+  font-family : Verdana, Arial, sans-serif;
+
+  box-sizing : border-box;
+
+  /* 後で追加する下向き矢印のためのスペースが必要です */
+  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
+  width   : 10em; /* 100px */
+
+  border        : .2em solid #000; /* 2px */
+  border-radius : .4em; /* 4px */
+  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
+
+  /* 最初の宣言は、線形グラデーションをサポートしないブラウザー向けのものです。*/
+  background : #F0F0F0;
+  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
+}
+
+.select .value {
+  /* 値がコントロールの幅より大きくなる可能性があるため、コントロールの幅を
+     変更しないようにすることが必要です。内容物がオーバーフローした場合は、
+     省略記号をつけるとよいでしょう。*/
+  display  : inline-block;
+  width    : 100%;
+  overflow : hidden;
+  white-space : nowrap;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+ +

下向き矢印をデザインするための追加要素は不要です。代わりに {{cssxref(":after")}} 疑似要素を使用します。ただし、select クラスでシンプルな背景画像を使用することによる実装も可能です。

+ +
.select:after {
+  content : "▼"; /* Unicode 文字 U+25BC を使用します。http://www.utf8-chartable.de をご覧ください */
+  position: absolute;
+  z-index : 1; /* これは、矢印が選択肢のリストに重ならないようにするために重要です */
+  top     : 0;
+  right   : 0;
+
+  box-sizing : border-box;
+
+  height  : 100%;
+  width   : 2em;
+  padding-top : .1em;
+
+  border-left  : .2em solid #000;
+  border-radius: 0 .1em .1em 0;
+
+  background-color : #000;
+  color : #FFF;
+  text-align : center;
+}
+ +

次に、選択肢のリストにスタイルを設定しましょう:

+ +
.select .optList {
+  z-index : 2; /* 選択肢のリストが下向き矢印より上になるよう、明示的に示します。*/
+
+  /* ul 要素のデフォルトスタイルを初期化します。*/
+  list-style: none;
+  margin : 0;
+  padding: 0;
+
+  box-sizing : border-box;
+
+  /* 値の幅がコントロールの幅より小さい場合でも、選択肢のリストの幅が
+     コントロール自体と同じになるようにします。*/
+  min-width : 100%;
+
+  /* リストが長すぎる場合に、内容物が垂直方向にはみ出します (自動的に
+     垂直スクロールバーを表示します) が、水平方向にはみ出しません
+     (幅を指定しないため、リストは自身の幅へ自動的に調整されます。
+     それができない場合は、内容物が切り詰められます) 。*/
+  max-height: 10em; /* 100px */
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  border: .2em solid #000; /* 2px */
+  border-top-width : .1em; /* 1px */
+  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
+
+  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
+  background: #f0f0f0;
+}
+ +

選択肢向けに、ユーザーが選択しようとしている (あるいは選択した) 値を示せるようにするための highlight クラスを追加しなければなりません。

+ +
.select .option {
+  padding: .2em .3em; /* 2px 3px */
+}
+
+.select .highlight {
+  background: #000;
+  color: #FFFFFF;
+}
+ +

これで、3 つの状態の結果は以下のようになります:

+ + + + + + + + + + + + + + + + + + + +
通常状態アクティブ状態開いた状態
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}
ソースコードを確認する
+ +

JavaScript でコントロールに命を吹き込む

+ +

デザインや構造の準備ができましたので、コントロールが実際に動作するようにするための JavaScript コードを記述できます。

+ +
+

警告: 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。

+
+ +

なぜ動作しないのか?

+ +

始める前に、重要事項を覚えておくことが大切です: ブラウザー内の JavaScript は信頼できる技術ではありません。カスタムコントロールを作成するとき、すべてをつなぎ合わせるために必要であることから JavaScript に頼らなければならないでしょう。ところが、JavaScript をブラウザーで実行できない場合がいくつもあります:

+ + + +

このようなリスクがあるため、JavaScript が動作しない場合に何が起きるかを注意深く考えることが重要です。この問題について詳しく扱うのは、スクリプトをどれだけ汎用および再利用可能にしたいかと密接に関わりますので本記事の範囲を外れますが、本サンプルでは基本的な部分について考えていきます。

+ +

本記事の例では、JavaScript コードが実行されない場合に標準の {{HTMLElement("select")}} 要素にフォールバックします。われわれのコントロールと {{HTMLElement("select")}}を導入し、いずれが表示されるかは body 要素のり class に依存します。読み込みに成功したとき、body 要素の class がコントロールの関数をなす script により更新されます。

+ +

これを実現するには、2 つのことが必要です。

+ +

第一に、カスタムコントロールを使用する前に通常の {{HTMLElement("select")}} 要素を追加することが必要です。実際は、これは残りのフォームデータと共にカスタムコントロールのデータを送信できるようにするために必要です。詳しくは後述します。

+ +
<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
+
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
+
+</body>
+ +

第二に、不要な要素 (すなわち、スクリプトを実行する場合における "本物の" {{HTMLElement("select")}} 要素や、実行しない場合におけるカスタムコントロール) を隠せるようにするための新たなクラスが 2 つ必要です。デフォルトでは、HTML コードでカスタムコントロールを隠すことに注意してください。

+ +
.widget select,
+.no-widget .select {
+  /* この CSS セレクタの基本的な意味は:
+     - body のクラスを "widget" に設定して、本物の {{HTMLElement("select")}} 要素を隠す
+     - または body のクラスを変更せずに "no-widget" のままにしておくことで、
+       クラスが "select" である要素が隠される */
+  position : absolute;
+  left     : -5000em;
+  height   : 0;
+  overflow : hidden;
+}
+ +

この CSS は要素の 1 つを見えなくしますが、スクリーンリーダーからは利用できます。

+ +

ここで、スクリプトを実行するか否かを判断するための JavaScript スイッチが必要になります。このスイッチはとても簡単です: ページを読み込むときにスクリプトを実行したら、no-widget クラスを削除して widget クラスを追加します。これにより {{HTMLElement("select")}} 要素やカスタムコントロールの可視性を切り替えます。

+ +
window.addEventListener("load", function () {
+  document.body.classList.remove("no-widget");
+  document.body.classList.add("widget");
+});
+ + + + + + + + + + + + + + + + + +
JS なしJS あり
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}
ソースコードを確認する
+ +
+

注記: コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。

+
+ +

作業をより簡単に

+ +

作成しようとしているコードでは、必要な作業すべてのために標準の JavaScript と DOM API を使用するでしょう。ここで使用するつもりである機能は以下のとおりです:

+ +
    +
  1. {{domxref("element.classList","classList")}}
    2. +
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. +
  3. forEach
    4. +
  4. {{domxref("element.querySelector","querySelector")}} および {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. +
+ +

これら特定機能を利用できるかに加えて、作業を始める前に残されている問題があります。{{domxref("element.querySelectorAll","querySelectorAll()")}} 関数が返すオブジェクトは Array ではなく {{domxref("NodeList")}} です。これは、Array オブジェクトは forEach 関数をサポートしているが {{domxref("NodeList")}} はサポートしていないために重要な問題です。{{domxref("NodeList")}} は Array ととても似ており、また forEach はとても便利であることから、作業を楽にするため以下のように {{domxref("NodeList")}} で forEach をサポートさせることができます:

+ +
NodeList.prototype.forEach = function (callback) {
+  Array.prototype.forEach.call(this, callback);
+}
+ +

古いブラウザーをサポートする必要がある場合、そのブラウザーがこうした機能をサポートしているか確かめてください。そうでない場合、リスト内を繰り返すか、ライブラリーや pollyfill を使う必要があります。

+ +

イベントコールバックを作成する

+ +

基盤が整いましたので、ユーザーがコントロールと対話するたびに使用されるすべての関数を定義し始めることができます。

+ +
// この関数は、カスタムコントロールを非アクティブにしたいときに使用します。
+// 引数は 1 つあります。
+// select : 非アクティブにする `select` クラスの DOM ノード
+function deactivateSelect(select) {
+
+  // コントロールがアクティブではないときは何もしません。
+  if (!select.classList.contains('active')) return;
+
+  // カスタムコントロールの選択肢のリストを取得することが必要です。
+  var optList = select.querySelector('.optList');
+
+  // 選択肢のリストを閉じます。
+  optList.classList.add('hidden');
+
+  // そして、カスタムコントロール自身を非アクティブにします。
+  select.classList.remove('active');
+}
+
+// この関数は、ユーザーがコントロールをアクティブ/非アクティブにしたがっているときに使用します。
+// 引数は 2 つあります:
+// select : アクティブにする `select` クラスの DOM ノード
+// selectList : `select` クラスであるすべての DOM ノードのリスト
+function activeSelect(select, selectList) {
+
+  // コントロールがすでにアクティブであるときは何もしません。
+  if (select.classList.contains('active')) return;
+
+  // すべてのカスタムコントロールを非アクティブにすることが必要です。
+  // deactivateSelect 関数は forEach コールバック関数の要件を
+  // すべて満たしていますので、仲介する無名関数を使用せずに
+  // 直接使用しています。
+  selectList.forEach(deactivateSelect);
+
+  // そして、指定されたコントロールをアクティブ状態にします。
+  select.classList.add('active');
+}
+
+// この関数は、ユーザーが選択肢のリストを開く/閉じることを求めたときに使用します。
+// 引数は 1 つあります:
+// select : 表示を切り替えるリストの DOM ノード
+function toggleOptList(select) {
+
+  // リストはコントロールから確保します。
+  var optList = select.querySelector('.optList');
+
+  // リストのクラスを表示/非表示に切り替えます。
+  optList.classList.toggle('hidden');
+}
+
+// この関数は、選択肢を強調したいときに使用します。
+// 引数は 2 つあります:
+// select : 強調する選択肢を包含する `select` クラスの DOM ノード
+// option : 強調する `option` クラスの DOM ノード
+function highlightOption(select, option) {
+
+  // カスタムコントロールで使用可能なすべての選択肢のリストを取得します。
+  var optionList = select.querySelectorAll('.option');
+
+  // すべての選択肢から強調効果を取り除きます。
+  optionList.forEach(function (other) {
+    other.classList.remove('highlight');
+  });
+
+  // 適切な選択肢を強調します。
+  option.classList.add('highlight');
+};
+ +

以上が、カスタムコントロールのさまざまな状態を制御するために必要なもののすべてです。

+ +

次に、これらの関数と適切なイベントを関連づけます:

+ +
// ドキュメントが読み込まれたときのイベントの関連づけを制御します。
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // 各々のコントロールは初期化が必要です。
+  selectList.forEach(function (select) {
+
+    // すべての `option` も同様です。
+    var optionList = select.querySelectorAll('.option');
+
+    // ユーザーが選択肢にマウスポインタを乗せるたびに、その選択肢を強調します。
+    optionList.forEach(function (option) {
+      option.addEventListener('mouseover', function () {
+        // 注記: 変数 `select` および `option` は、関数呼び出しのスコープ内でのみ
+        // 使用可能なクロージャです。
+        highlightOption(select, option);
+      });
+    });
+
+    // ユーザーが独自の select 要素でクリックするたびに
+    select.addEventListener('click', function (event) {
+      // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ
+      // 使用可能なクロージャです。
+
+      // 選択肢のリストの可視性を切り替えます。
+      toggleOptList(select);
+    });
+
+    // コントロールが再びフォーカスを得た場合
+    // ユーザーがコントロールをクリックしたり、コントロールへアクセスするために
+    // Tab キーを使用するたびに、コントロールはフォーカスを得ます。
+    select.addEventListener('focus', function (event) {
+      // 注記: 変数 `select` および `selectList` は、関数呼び出しのスコープ内でのみ
+      // 使用可能なクロージャです。
+
+      // コントロールをアクティブにします。
+      activeSelect(select, selectList);
+    });
+
+    // コントロールがフォーカスを失った場合
+    select.addEventListener('blur', function (event) {
+      // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ
+      // 使用可能なクロージャです。
+
+      // コントロールを非アクティブにします。
+      deactivateSelect(select);
+    });
+
+    // ユーザーが`esc`を押した場合にフォーカスを外す
+    select.addEventListener('keyup', function (event) {
+
+      // deactive on keyup of `esc`
+      if (event.keyCode === 27) {
+         deactivateSelect(select);
+      }
+    });
+});
+ +

この時点でコントロールは設計どおりに状態が変わりますが、コントロール値はまだ更新されません。次の章でこれを扱います。

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_3")}}
ソースコードを確認する
+ +

コントロールの値を制御する

+ +

コントロールが動作するようになりましたので、ユーザーの入力に従って値を更新して、フォームデータと共にその値を送信できるようにするコードを追加しなければなりません。

+ +

これを行うもっとも簡単な方法は、覆い隠したネイティブコントロールを使用することです。そのようなコントロールはブラウザーが提供するすべての組み込みのコントロールと共に値の経過を保持しており、フォームを送信するときは通常どおりに値を送信します。これらすべてを行えるようにするために、車輪の再発明を行うのは無駄です。

+ +

先ほど見たように、アクセシビリティの理由からフォールバック手段としてすでにネイティブの select コントロールを使用しています。単純に、その値をカスタムコントロールの値と同期することができます:

+ +
// この関数は、表示される値を更新してネイティブコントロールの値と同期します。
+// 引数は 2 つあります:
+// select : 更新する値を持つ `select` クラスの DOM ノード
+// index  : 選択される値のインデックス
+function updateValue(select, index) {
+  // 指定されたカスタムコントロール向けのネイティブコントロールを取得することが必要です。
+  // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。
+  var nativeWidget = select.previousElementSibling;
+
+  // カスタムコントロールの値のプレースホルダーの取得も必要です。
+  var value = select.querySelector('.value');
+
+  // そして、選択肢の全リストが必要です。
+  var optionList = select.querySelectorAll('.option');
+
+  // 選択した値のインデックスを、selectedIndex に設定します。
+  nativeWidget.selectedIndex = index;
+
+  // 上記に応じて、値のプレースホルダーも更新します。
+  value.innerHTML = optionList[index].innerHTML;
+
+  // そして、カスタムコントロールで対応する選択肢を強調します。
+  highlightOption(select, optionList[index]);
+};
+
+// この関数は、ネイティブコントロールで現在選択されているインデックスを返します。
+// 引数は 1 つあります:
+// select : ネイティブコントロールに関係する `select` クラスの DOM ノード
+function getIndex(select) {
+  // 指定されたカスタムコントロール向けのネイティブコントロールにアクセスすることが必要です。
+  // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。
+  var nativeWidget = select.previousElementSibling;
+
+  return nativeWidget.selectedIndex;
+};
+ +

これら 2 つの関数で、ネイティブコントロールとカスタムコントロールを関連づけることができます:

+ +
// ドキュメントが読み込まれたときのイベントの関連づけを制御します。
+window.addEventListener('load', function () {
+  var selectList = document.querySelectorAll('.select');
+
+  // 各々のコントロールは初期化が必要です。
+  selectList.forEach(function (select) {
+    var optionList = select.querySelectorAll('.option'),
+        selectedIndex = getIndex(select);
+
+    // カスタムコントロールがフォーカスを得られるようにします。
+    select.tabIndex = 0;
+
+    // ネイティブコントロールがフォーカスを得ないようにします。
+    select.previousElementSibling.tabIndex = -1;
+
+    // デフォルトで選択されている値が正しく表示されるようにします。
+    updateValue(select, selectedIndex);
+
+    // ユーザーが選択肢をクリックするのに応じて値を更新します。
+    optionList.forEach(function (option, index) {
+      option.addEventListener('click', function (event) {
+        updateValue(select, index);
+      });
+    });
+
+    // フォーカスがあるコントロールでユーザーがキーボードを使用するのに応じて、値を更新します。
+    select.addEventListener('keyup', function (event) {
+      var length = optionList.length,
+          index  = getIndex(select);
+
+      // ユーザーが下矢印キーを押すと、次の選択肢にジャンプします。
+      if (event.keyCode === 40 && index < length - 1) { index++; }
+
+      // ユーザーが上矢印キーを押すと、前の選択肢にジャンプします。
+      if (event.keyCode === 38 && index > 0) { index--; }
+
+      updateValue(select, index);
+    });
+  });
+});
+ +

上記のコードで、tabIndex プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。

+ +

これで完了です! 結果は以下のとおりです:

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_4")}}
ソースコードを確認する
+ +

ちょっと待ってください、本当に終わったのでしょうか?

+ +

アクセシブルにする

+ +

フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!

+ +

幸いなことに解決策があり、それは ARIA と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その W3C 仕様 は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。

+ +

role 属性

+ +

ARIA で使用される主要な属性が、role 属性です。role 属性は、要素を何に使用するかを定義する値を受け入れます。それぞれのロールは、自身の要件や動作を定義します。本記事の例では、ロール listbox を使用します。これは "composite role" であり、このロールの要素は子要素を持ち、またそれぞれの子要素も特定のロールを持ちます (この例では、ロール option の子要素が少なくとも 1 つ)。

+ +

また、ARIA は標準の HTML マークアップにデフォルトで適用されるロールを定義することも特筆に値します。例えば、{{HTMLElement("table")}} 要素はロール grid に、{{HTMLElement("ul")}} 要素はロール list にマッチします。{{HTMLElement("ul")}} 要素を使用しているため、私たちのコントロールのロール listbox が、{{HTMLElement("ul")}} 要素のロール list を置き換えるようにしなければなりません。そのために、ロール presentation を使用します。このロールは要素に特別な意味はないことを示せるようにするためのものであり、単に情報を与えるために使用されます。これを {{HTMLElement("ul")}} 要素に適用します。

+ +

ロール listbox をサポートするため、HTML を以下のように更新することが必要です:

+ +
<!-- 最初の要素に role="listbox" 属性を追加します -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- ul 要素に role="presentation" を追加します -->
+  <ul class="optList" role="presentation">
+    <!-- すべての li 要素に role="option" 属性を追加します -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
+</div>
+ +
+

注記: role 属性と class 属性の両方を含める方法は、CSS 属性セレクタに対応しない古いブラウザーをサポートしたい場合にのみ必要です。

+
+ +

aria-selected 属性

+ +

role を使用するだけでは不十分です。ARIA は、状態や特性を表す多くの属性も提供します。これらをより多くまた適切に使用すると、コントロールが支援技術にもっと良く理解されるようになります。ここでは、使用する属性を 1 つに絞ります: aria-selected です。

+ +

aria-selected 属性は、どの選択肢が現在選択されているかを示すために使用します。これにより、支援技術はユーザーに現在何が選択されているかを伝えることができます。ここではユーザーが選択肢を選択するたびに、選択された選択肢を示すためにこの属性を JavaScript で動的に使用します。このために、updateValue() 関数の変更が必要です:

+ +
function updateValue(select, index) {
+  var nativeWidget = select.previousElementSibling;
+  var value = select.querySelector('.value');
+  var optionList = select.querySelectorAll('.option');
+
+  // すべての選択肢が選択されていないようにします。
+  optionList.forEach(function (other) {
+    other.setAttribute('aria-selected', 'false');
+  });
+
+  // 指定された選択肢が選択されているようにします。
+  optionList[index].setAttribute('aria-selected', 'true');
+
+  nativeWidget.selectedIndex = index;
+  value.innerHTML = optionList[index].innerHTML;
+  highlightOption(select, optionList[index]);
+};
+ +

スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。

+ +

以下がこれらの変更を施した最終結果です (NVDA や VoiceOver などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):

+ + + + + + + + + + + + + + + +
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_5")}}
ソースコードを確認する
+ +

もっと先に進むには、この例でのコードは汎用性や再利用性に改善が必要です。これは課題として挑戦できます。この2つのヒントを挙げると:すべての関数で最初の引数は同じで、つまりこれらの関数は同じコンテキストが必要です。そのコンテキストを共有するオブジェクトを作るのが賢明です。

+ +

他の方法: ラジオボタンを使う

+ +

上の例では、非動的なHTML、CSS、JavaScript を使って {{htmlelement('select')}} 要素を再発明しました。このselectは限られた選択肢から1つが選択され、それは {{htmlelement('input/radio', 'radio')}} ボタンのグループと同様な機能です。

+ +

このため、代わりにラジオボタンを使って再発明できます。このオプションを見てみましょう。

+ +

We can start with

+ +

完全に意味のある、アクセシブルで、順序のない、関連する{{htmlelement('label')}}つきの{{htmlelement('input/radio','radio')}} ボタンのリストから始めます、グループ全体を適切な意味のある{{htmlelement('fieldset')}} と{{htmlelement('legend')}} のペアにラベルづけします。.

+ +
 <fieldset>
+  <legend>Pick a fruit</legend>
+    <ul class="styledSelect">
+      <li><input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked><label for="fruitCherry">Cherry</label></li>
+      <li><input type="radio" name="fruit" value="Lemon" id="fruitLemon"><label for="fruitLemon">Lemon</label></li>
+      <li><input type="radio" name="fruit" value="Banana" id="fruitBanana"><label for="fruitBanana"">Banana</label></li>
+      <li><input type="radio" name="fruit" value="Strawberry" id="fruitStrawberry"><label for="fruitStrawberry">Strawberry</label></li>
+      <li><input type="radio" name="fruit" value="Apple" id="fruitApple"><label for="fruitApple">Apple</label></li>
+    </ul>
+  </fieldset>
+ +

(legend/fieldsetではなく)ラジオボタンリストに少しスタイルづけをして、前の例と同じ見た目にし、完了したことがわかるようにします:

+ +
.styledSelect {
+  display: inline-block;
+  padding: 0;
+}
+.styledSelect li {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+}
+.styledSelect [type=radio] {
+  position: absolute;
+  left: -100vw;
+  top: -100vh;
+}
+.styledSelect label {
+  margin: 0;
+  line-height: 2;
+  padding: 0 0 0 4px;
+}
+.styledSelect:not(:focus-within) input:not(:checked) + label {
+  height: 0;
+  outline: none;
+  overflow: hidden;
+}
+.styledSelect:not(:focus-within) input:checked + label {
+  border: .2em solid #000;
+  border-radius: .4em;
+  box-shadow: 0 .1em .2em rgba(0,0,0,.45);
+}
+.styledSelect:not(:focus-within) input:checked + label::after {
+  content : "▼";
+  background: black;
+  float: right;
+  color: white;
+  padding: 0 4px;
+  margin: 0 -4px 0 4px;
+}
+.styledSelect:focus-within {
+  border: .2em solid #000;
+  border-radius: .4em;
+  box-shadow: 0 .1em .2em rgba(0,0,0,.45);
+}
+.styledSelect:focus-within input:checked + label {
+  background-color: #333;
+  color: #fff;
+  width: 100%;
+}
+ +

JavaScriptなしで少しの CSSにて、ラジオボタンのリストをスタイルづけしてチェック済み項目のみを表示することができます。フォーカスが<fieldset>内の <ul> に来ると、リストは開いて、上下左右の矢印が前後の項目を選択するのに使えます。次で試してください:

+ +

{{EmbedLiveSample("An_alternative_approach_Using_radio_buttons",200,240)}}

+ +

これはある程度、JavaScriptなしで動作します。JavaScript が失敗しても動作する、われわれのカスタムコントロールど同じものを作ってきました。よい解決策でしょう？これはキーボードでは動作しますが、マウスクリックではそうなりません。ネイティブな意味づけのない要素を作るフレームワークに依存する代わりに、ウェブ標準をカスタムコントロールの基礎として使った方が意味があります。しかし、われわれのコントロールは <select> が自ずと持つ機能と同じものを備えていません。

+ +

いい面として、このコントロールはスクリーンリーダーにとって完全にアクセシブルでキーボードで完全に操作できます。しかし、このコントロールは {{htmlelement('select')}} 要素の置き換えではありません。異なる機能や足りない機能があります。例えば、4つの矢印は選択肢を操作できますが、最後のボタンで下を押すと最初のボタンに移動します。<select> のように上端、下端で止まりません。

+ +

この足りない機能の追加は、読者の課題としておきます。

+ +

まとめ

+ +

独自のフォームコントロールの作成方法を見てきましたが、ご覧いただいたようにこれは容易なことではありません。独自のカスタムコントロールを作る前に、HTMLに要求を十分に満たす代替要素がないかを検討してください。本当にカスタムコントロールを作成する必要がある場合、サードパーティのライブラリに頼るほうが簡単かつよいことも少なくありません。独自作成する場合、既存の要素を編集するか、準備されたコントロールを実装するフレームワークを使うようにして、実用的でアクセシブルなフォームコントロールの作成は見た目より複雑であることを忘れないでください。

+ +

自分でコーディングする前に検討するとよいライブラリをいくつか紹介します:

+ + + +

ラジオボタン、独自JavaScript 、またはサードパーティライブラリで代替コントロールを作る場合、アクセシブルかつ機能への耐性を高めましょう。すなわち Web 標準の実装状況がまちまちである、多様なブラウザーで良好に動作できるようにすることが必要です。楽しんでください!

+ +

このモジュール

+ +

学習コース

+ + + +

上級トピック

+ + diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html deleted file mode 100644 index 1515dc573f..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_1/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: 例 1 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_1 -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_1 ---- -

これは、カスタムフォームウィジェットの作成方法を説明する最初のコード例です。

- -

Basic state

- -

HTML

- -
<div class="select">
-  <span class="value">Cherry</span>
-  <ul class="optList hidden">
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
-
- -

Result for basic state

- -
{{ EmbedLiveSample('Basic_state', 120, 130) }}
- -

Active state

- -

HTML

- -
<div class="select active">
-  <span class="value">Cherry</span>
-  <ul class="optList hidden">
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

Result for active state

- -
{{ EmbedLiveSample('Active_state', 120, 130) }}
- -

Open state

- -

HTML

- -
<div class="select active">
-  <span class="value">Cherry</span>
-  <ul class="optList">
-    <li class="option highlight">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-</div>
- -

CSS

- -
/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0, 0, 0, .45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFF;
-}
- -

Result for open state

- -
{{ EmbedLiveSample('Open_state', 120, 130) }}
diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html deleted file mode 100644 index 7a547909ce..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_2/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: 例 2 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_2 -tags: - - Forms - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_2 ---- -

これは、カスタムフォームウィジェットの作成方法を説明する2番目の例です。

- -

JS

- -

HTML コンテンツ

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-<form>
-
- -

CSS コンテンツ

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript コンテンツ

- -
window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
- -

JS の結果

- -

{{ EmbedLiveSample('JS', 120, 130) }}

- -

No JS

- -

HTML コンテンツ

- -
<form class="no-widget">
-  <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-<form>
- -

CSS コンテンツ

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

No JS の結果

- -

{{ EmbedLiveSample('No_JS', 120, 130) }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html deleted file mode 100644 index ac3763cb80..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_3/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: 例 3 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_3 -tags: - - Forms - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_3 ---- -

これは、カスタムフォームウィジェットの作成方法を説明する3番目の例です。

- -

状態を変更する

- -

HTML コンテンツ

- -
<form class="no-widget">
-  <select name="myFruit" tabindex="-1">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-  </select>
-
-  <div class="select" tabindex="0">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-</form>
- -

CSS コンテンツ

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript コンテンツ

- -
// ------- //
-// HELPERS //
-// ------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// -------------------- //
-// Function definitions //
-// -------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-// ------------- //
-// Event binding //
-// ------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    },  false);
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
- -

結果

- -

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html deleted file mode 100644 index 51fa53c27a..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_4/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: 例 4 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_4 -tags: - - Advanced - - Example - - Forms - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_4 ---- -

これは、カスタムフォームウィジェットの作成方法を説明する4番目の例です。

- -

状態を変更する

- -

HTML コンテンツ

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cherry</option>
-    <option>Lemon</option>
-    <option>Banana</option>
-    <option>Strawberry</option>
-    <option>Apple</option>
-  </select>
-
-  <div class="select">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden">
-      <li class="option">Cherry</li>
-      <li class="option">Lemon</li>
-      <li class="option">Banana</li>
-      <li class="option">Strawberry</li>
-      <li class="option">Apple</li>
-    </ul>
-  </div>
-</form>
- -

CSS コンテンツ

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript コンテンツ

- -
// ------- //
-// HELPERS //
-// ------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// -------------------- //
-// Function definitions //
-// -------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// ------------- //
-// Event binding //
-// ------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option');
-
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-  });
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

結果

- -

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html deleted file mode 100644 index 4bad8016bb..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/example_5/index.html +++ /dev/null @@ -1,289 +0,0 @@ ---- -title: 例 5 -slug: Learn/Forms/How_to_build_custom_form_widgets/Example_5 -tags: - - Forms - - HTML -translation_of: Learn/Forms/How_to_build_custom_form_controls/Example_5 ---- -

これが、カスタムフォームウィジェットの作成方法を説明する最後の例です。

- -

状態を変更する

- -

HTML コンテンツ

- -
<form class="no-widget">
-  <select name="myFruit">
-    <option>Cherry</option>
-    <option>Lemon</option>
-    <option>Banana</option>
-    <option>Strawberry</option>
-    <option>Apple</option>
-  </select>
-
-  <div class="select" role="listbox">
-    <span class="value">Cherry</span>
-    <ul class="optList hidden" role="presentation">
-      <li class="option" role="option" aria-selected="true">Cherry</li>
-      <li class="option" role="option">Lemon</li>
-      <li class="option" role="option">Banana</li>
-      <li class="option" role="option">Strawberry</li>
-      <li class="option" role="option">Apple</li>
-    </ul>
-  </div>
-</form>
- -

CSS コンテンツ

- -
.widget select,
-.no-widget .select {
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
-
-/* --------------- */
-/* Required Styles */
-/* --------------- */
-
-.select {
-  position: relative;
-  display : inline-block;
-}
-
-.select.active,
-.select:focus {
-  box-shadow: 0 0 3px 1px #227755;
-  outline: none;
-}
-
-.select .optList {
-  position: absolute;
-  top     : 100%;
-  left    : 0;
-}
-
-.select .optList.hidden {
-  max-height: 0;
-  visibility: hidden;
-}
-
-/* ------------ */
-/* Fancy Styles */
-/* ------------ */
-
-.select {
-  font-size   : 0.625em; /* 10px */
-  font-family : Verdana, Arial, sans-serif;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  padding : 0.1em 2.5em 0.2em 0.5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : 0.2em solid #000; /* 2px */
-  border-radius : 0.4em; /* 4px */
-
-  box-shadow : 0 0.1em 0.2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  background : #F0F0F0;
-  background : -webkit-linear-gradient(90deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-
-  white-space   : nowrap;
-  text-overflow : ellipsis;
-  vertical-align: top;
-}
-
-.select:after {
-  content : "▼";
-  position: absolute;
-  z-index : 1;
-  height  : 100%;
-  width   : 2em; /* 20px */
-  top     : 0;
-  right   : 0;
-
-  padding-top : .1em;
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  text-align : center;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-}
-
-.select .optList {
-  z-index : 2;
-
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  background: #f0f0f0;
-  border: .2em solid #000;
-  border-top-width : .1em;
-  border-radius: 0 0 .4em .4em;
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4);
-
-  -moz-box-sizing : border-box;
-  box-sizing : border-box;
-
-  min-width : 100%;
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.select .option {
-  padding: .2em .3em;
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

JavaScript コンテンツ

- -
// ------- //
-// HELPERS //
-// ------- //
-
-NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
-
-// -------------------- //
-// Function definitions //
-// -------------------- //
-
-function deactivateSelect(select) {
-  if (!select.classList.contains('active')) return;
-
-  var optList = select.querySelector('.optList');
-
-  optList.classList.add('hidden');
-  select.classList.remove('active');
-}
-
-function activeSelect(select, selectList) {
-  if (select.classList.contains('active')) return;
-
-  selectList.forEach(deactivateSelect);
-  select.classList.add('active');
-};
-
-function toggleOptList(select, show) {
-  var optList = select.querySelector('.optList');
-
-  optList.classList.toggle('hidden');
-}
-
-function highlightOption(select, option) {
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  option.classList.add('highlight');
-};
-
-function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
-
-function getIndex(select) {
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
-
-// ------------- //
-// Event binding //
-// ------------- //
-
-window.addEventListener("load", function () {
-  var form = document.querySelector('form');
-
-  form.classList.remove("no-widget");
-  form.classList.add("widget");
-});
-
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    select.tabIndex = 0;
-    select.previousElementSibling.tabIndex = -1;
-
-    updateValue(select, selectedIndex);
-
-    optionList.forEach(function (option, index) {
-      option.addEventListener('mouseover', function () {
-        highlightOption(select, option);
-      });
-
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    select.addEventListener('click', function (event) {
-      toggleOptList(select);
-    });
-
-    select.addEventListener('focus', function (event) {
-      activeSelect(select, selectList);
-    });
-
-    select.addEventListener('blur', function (event) {
-      deactivateSelect(select);
-    });
-
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
-
- -

結果

- -

{{ EmbedLiveSample('Change_states') }}

diff --git a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html b/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html deleted file mode 100644 index 7bbd20b511..0000000000 --- a/files/ja/learn/forms/how_to_build_custom_form_widgets/index.html +++ /dev/null @@ -1,901 +0,0 @@ ---- -title: カスタムフォームコントロールの作成方法 -slug: Learn/Forms/How_to_build_custom_form_widgets -tags: - - Advanced - - Example - - Forms - - Guide - - HTML - - Web -translation_of: Learn/Forms/How_to_build_custom_form_controls ---- -
{{LearnSidebar}}
- -

HTML フォームで使用可能なコントロールだけでは十分でない場合が多くあります。例えば、{{HTMLElement("select")}} 要素のようなコントロールに高度なスタイル設定を行いたい場合や、独自の動作を提供したい場合は、あなた独自のコントロールを作成するしかありません。

- -

本記事では、そのようなコントロールの作り方を見ていきます。その目的のため、次の例に取り組みます: {{HTMLElement("select")}} 要素の再構築です。このほかに独自コントロール作成をどういう方法でするか、いつするか、またそれが意味をなすのかや、コントロール作成が必須なときに何に気をつけるべきかを扱います。

- -
-

注記: ここではコントロールの構築に注目しており、汎用かつ再利用可能なコードの作成法は見ていきません。それには JavaScript の重要なコードや未知のコンテキストでの DOM 操作が組み合わされており、本記事の対象から外れます。

-
- -

デザイン、構造、セマンティクス

- -

カスタムコントロールを作成する前に、何をしたいかをはっきりと理解することから始めるべきです。これはあなたの貴重な時間を節約するでしょう。特に、コントロールの全状態を明確に定義することが重要です。これを行うには、状態や動作がよく知られている既存のコントロールからスタートするとよいでしょう。この結果、簡単に可能な限りの模倣を行えます。

- -

本記事の例では、{{HTMLElement("select")}} 要素を再構築します。以下が、私たちが実現したい成果です:

- -

The three states of a select box

- -

このスクリーンショットでは、コントロールの主要な状態 3 つを示しています: 通常状態 (左)、アクティブ状態 (中央)、そして開いた状態 (右) です。

- -

動作の点では、ネイティブな HTML用要素を再作成します。このため、ネイティブ HTML要素と同様な動作や意味を持たせるべきです。独自のコントロールもネイティブコントロールと同様に、キーボードだけでなくマウスでも使用できるように、またスクリーンリーダーに理解できるようにしたいと考えます。コントロールがどのように各状態に達するかを定義することから始めましょう:

- -
-
コントロールは以下のときに通常状態になります:
-
-
    -
  • ページを読み込む
    • -
  • コントロールはアクティブであったが、ユーザーがコントロール以外のどこかをクリックした
    • -
  • コントロールはアクティブであったが、キーボードを使用して別のコントロールにフォーカスを移した (例 Tab キー)
    • -
-
-
コントロールは以下のときにアクティブ状態になります:
-
-
    -
  • ユーザーがコントロール上でクリックする
    • -
  • ユーザーが Tab キーを押下して、コントロールがフォーカスを得る
    • -
  • コントロールが開いた状態で、ユーザーがコントロールをクリックする
    • -
-
-
コントロールは以下のときに開いた状態になります:
-
-
    -
  • コントロールが開いた状態ではないときに、ユーザーがコントロールをクリックした
    • -
-
-
- -

状態をどのように変えるかを理解したら、コントロールの値をどのように変えるかの定義が重要になります:

- -
-
以下のときに値が変わります:
-
-
    -
  • コントロールが開いた状態であるときに、ユーザーが選択肢をクリックする
    • -
  • コントロールがアクティブ状態であるときに、ユーザーが上下矢印キーを押下する
    • -
-
-
- -
-
以下のときには値は変わりません:
-
-
    -
  • 最初のオプションが選択済みのときに、ユーザーが上矢印をクリックする
    • -
  • 最後のオプションが選択済みのときに、ユーザーが下矢印をクリックする
    • -
-
-
- -

最後に、コントロールの選択肢がどのように動作するかを定義しましょう:

- - - -

この例の用途としては、ここまでです。しかし注意深い読者の方は、いくつかの動作が欠けていることに気づくでしょう。例えば、コントロールが開いた状態であるときにユーザーが Tab キーを押すと何が起きると考えますか? その答えは... 何も起きません。正しい動作は明らかでしょうが、実際は私たちの仕様で定義されていないため、とても見逃されやすいのです。これは、コントロールの動作を設計する人と実装する人が異なるチーム環境で特に当てはまります。

- -

別のおもしろい例です: コントロールが開いた状態であるときに上下矢印キーを押すと何が起きるのでしょうか? こちらはやや難しくなります。アクティブ状態と開いた状態をまったく別のものと考えるなら、その答えはやはり "何も起きません" です。これは、開いた状態でのキーボードの作用を定義していないためです。一方、アクティブ状態と開いた状態が少し重なると考えるなら、値は替わるかもしれませんがそれに対応して選択肢が強調されることはないでしょう。繰り返しになりますが、これはコントロールが開いた状態の選択肢に対するキーボードの作用を定義していないためです (コントロールが開いた状態で何が起きるかだけを定義しており、その後がないためです)。

- -

もう少し突っ込んで考えてみます: エスケープキーはどうでしょう? Esc キーを押すと開いた select が閉じます。ネイティブの{{htmlelement('select')}}と同じ機能を提供する場合、キーボードやマウスやスクリーンリーダーへのタッチ、その他あらゆる入力デバイスまで、全てのユーザーにとっての select の動作と全く同じようにふるまうべきです。

- -

この例では欠けている仕様が明らかですので対処するでしょうが、めずらしい新たなコントロールでは真の問題になり得ます。標準要素では、{{htmlelement('select')}} もその 1 つですが、仕様の作成者は膨大な時間をかけて全てのユースケースの全ての入力デバイスの全ての操作を指定します。新コントロールの作成は簡単ではなく、特にそれが作成されたことのないものの場合は、どのような動作が正しいかについて、わずかなアイデアですら誰も持っていないため簡単ではないです。少なくとも select はこれまでやってきたため、どうふるまうかはわかっています!

- -

一般的に、新しい操作を設計するのは、標準を作成するに十分なリーチを持った、とても大きな産業プレイヤーだけの選択肢です。例えば、Apple は 2001年に iPod にスクロールホイールを導入しました。完全に新しい操作方法のデバイスを導入するのに成功するマーケットシェアがありましたが、たいていのデバイス会社はそうはいきません。

- -

新しいユーザーインタラクションを発明しないのがベストです。インタラクションを追加する場合、設計段階で時間を使うのが重要です。動作の定義が貧弱であったり定義もれがあったりした場合、いったんユーザーが使い始めると動作を再定義するのが非常に困難になると思われますので、設計段階に時間をかけることは賢明です。もし疑っているのでしたら、他の人に意見を聞きましょう。また予算を持っているのでしたら、ユーザーテストの実施をためらってはいけません。このプロセスは、UX デザインと呼ばれます。この点について詳しく学びたいのでしたら、以下の役に立つリソースをご覧になるとよいでしょう:

- - - -
-

注記: さらにほとんどのシステムでは、使用できる選択肢すべてを見るために {{HTMLElement("select")}} 要素を開く手段があります (これは {{HTMLElement("select")}} 要素をマウスでクリックするのと同じです)。これは Windows では Alt + Down  キー で実現できますが、この例では実装しません。しかし、仕組みはすでに click イベント向けに実装されていますので、行うのは簡単です。

-
- -

HTML の構造とセマンティクスの定義

- -

コントロールの基本的な機能が決まりましたので、構築を始めるときが来ました。最初のステップはコントロールの HTML 構造の定義と、基本的なセマンティクスの付与です。こちらが、{{HTMLElement("select")}} 要素の再構築に必要な HTML です:

- -
<!-- これはコントロールの中心的なコンテナです。
-     tabindex 属性は、ユーザーがコントロールにフォーカスを当てられるようにするものです。
-     これを JavaScript で設定する方がよいことは、後で見ていきます。-->
-<div class="select" tabindex="0">
-
-  <!-- このコンテナは、コントロールの現在の値を表示するために使用します。-->
-  <span class="value">Cherry</span>
-
-  <!-- このコンテナは、コントロールで使用できるすべての選択肢を包含します。
-       これはリストですから、ul 要素を使用するとよいでしょう。-->
-  <ul class="optList">
-    <!-- 各々の選択肢は表示される値だけを包含しており、フォームのデータで送信される
-         実際の値を処理する方法は後で見ていきます。-->
-    <li class="option">Cherry</li>
-    <li class="option">Lemon</li>
-    <li class="option">Banana</li>
-    <li class="option">Strawberry</li>
-    <li class="option">Apple</li>
-  </ul>
-
-</div>
- -

クラス名の使い方に注目してください。これらは基盤となる実際の HTML とは関係なく、フォームに関するそれぞれの部分を示します。これは CSS や JavaScript を強固な HTML の構造と結びつけないようにするために重要であり、そのためにコントロールを扱うコードを壊すことなく、後から実装を変更することができます。例えば {{HTMLElement("optgroup")}} 要素と同等の機能を実装したい場合などです。

- -

クラス名は、しかしながら、意味のある値ではありません。現在の状態では、スクリーンリーダーのユーザーのみがリストを"見る"ことができます。ARIA セマンティクスを少し追加します。

- -

CSS でルックアンドフィールを作成する

- -

構造ができましたので、コントロールのデザインを始められます。カスタムコントロールを作成する上でのポイントは、望むとおりにコントロールへスタイルを設定できることです。そのために、CSS を 2 つの部分に分けます: ひとつはコントロールが {{HTMLElement("select")}} 要素のように動作するために欠かせない CSS ルールであり、もうひとつは希望する見た目にするための好みのスタイルで構成されます。

- -

必須のスタイル

- -

必須のスタイルは、コントロールの 3 つの状態を扱うために欠かせないものです。

- -
.select {
-  /* 選択肢のリスト向けのポジショニングコンテキストを作成します;
-     adding this to .select{{cssxref(':focus-within')}} will be a better option when fully supported
-  */
-  position: relative;
-
-  /* コントロールをテキストフローの一部かつまとまった大きさにします */
-  display : inline-block;
-}
- -

アクティブ状態であるコントロールのルックアンドフィールを定義するため、追加で active クラスが必要です。このコントロールはフォーカスを得ることができますので、同様に動作させるためにカスタムスタイルを {{cssxref(":focus")}} 疑似クラスにも適用します。

- -
.select.active,
-.select:focus {
-  outline: none;
-
-  /* box-shadow プロパティは必須ではありませんが、これをデフォルト値として使用するのは
-     アクティブ状態を見えるようにするために重要です。自由に書き換えてください。*/
-  box-shadow: 0 0 3px 1px #227755;
-}
- -

次に、選択肢のリストを扱いましょう:

- -
/* .select セレクタは、私たちが定義するクラスがコントロールの内部にあることを
-   確実にするためのシンタックスシュガーです。*/
-.select .optList {
-  /* 選択肢のリストが値の下部かつ HTML フローの外側に表示される
-     ようにします。*/
-  position : absolute;
-  top      : 100%;
-  left     : 0;
-}
- -

選択肢のリストが隠れている状態を扱うための追加クラスも必要です。これはアクティブ状態と開いた状態で完全には一致しない相違点を扱うために必要です。

- -
.select .optList.hidden {
-  /* これはアクセシブルな方法でリストを隠すための簡単な方法です。
-     アクセシビリティについては最後に説明します。*/
-  max-height: 0;
-  visibility: hidden;
-}
- -
-

注: 選択肢のリストに高さと幅を与えないように transform: scale(1, 0) も使えます。

-
- -

美化

- -

基本的な機能性を適切に置きましたので、戯れを始められます。以下は何ができるかの例であり、本記事の冒頭で示したスクリーンショットに一致するものです。とはいえ、自由に実験して何ができるかを見てみるとよいでしょう。

- -
.select {
-  /* アクセシビリティのため、すべてのサイズは em 単位の値で表します
-     (ユーザーがテキストのみのモードでブラウザーのズーム機能を使用したときに、
-     コントロールをリサイズ可能にします)。算出結果は、ほとんどのブラウザーで
-     デフォルト値である 1em == 16px を想定します。
-     px から em への変換がわからない場合は http://riddle.pl/emcalc/ を試してください */
-  font-size   : 0.625em; /* この値 (10px) は、本コンテキストにおける新たなフォントサイズの em 単位値です。*/
-  font-family : Verdana, Arial, sans-serif;
-
-  box-sizing : border-box;
-
-  /* 後で追加する下向き矢印のためのスペースが必要です */
-  padding : .1em 2.5em .2em .5em; /* 1px 25px 2px 5px */
-  width   : 10em; /* 100px */
-
-  border        : .2em solid #000; /* 2px */
-  border-radius : .4em; /* 4px */
-  box-shadow    : 0 .1em .2em rgba(0,0,0,.45); /* 0 1px 2px */
-
-  /* 最初の宣言は、線形グラデーションをサポートしないブラウザー向けのものです。*/
-  background : #F0F0F0;
-  background : linear-gradient(0deg, #E3E3E3, #fcfcfc 50%, #f0f0f0);
-}
-
-.select .value {
-  /* 値がコントロールの幅より大きくなる可能性があるため、コントロールの幅を
-     変更しないようにすることが必要です。内容物がオーバーフローした場合は、
-     省略記号をつけるとよいでしょう。*/
-  display  : inline-block;
-  width    : 100%;
-  overflow : hidden;
-  white-space : nowrap;
-  text-overflow: ellipsis;
-  vertical-align: top;
-}
- -

下向き矢印をデザインするための追加要素は不要です。代わりに {{cssxref(":after")}} 疑似要素を使用します。ただし、select クラスでシンプルな背景画像を使用することによる実装も可能です。

- -
.select:after {
-  content : "▼"; /* Unicode 文字 U+25BC を使用します。http://www.utf8-chartable.de をご覧ください */
-  position: absolute;
-  z-index : 1; /* これは、矢印が選択肢のリストに重ならないようにするために重要です */
-  top     : 0;
-  right   : 0;
-
-  box-sizing : border-box;
-
-  height  : 100%;
-  width   : 2em;
-  padding-top : .1em;
-
-  border-left  : .2em solid #000;
-  border-radius: 0 .1em .1em 0;
-
-  background-color : #000;
-  color : #FFF;
-  text-align : center;
-}
- -

次に、選択肢のリストにスタイルを設定しましょう:

- -
.select .optList {
-  z-index : 2; /* 選択肢のリストが下向き矢印より上になるよう、明示的に示します。*/
-
-  /* ul 要素のデフォルトスタイルを初期化します。*/
-  list-style: none;
-  margin : 0;
-  padding: 0;
-
-  box-sizing : border-box;
-
-  /* 値の幅がコントロールの幅より小さい場合でも、選択肢のリストの幅が
-     コントロール自体と同じになるようにします。*/
-  min-width : 100%;
-
-  /* リストが長すぎる場合に、内容物が垂直方向にはみ出します (自動的に
-     垂直スクロールバーを表示します) が、水平方向にはみ出しません
-     (幅を指定しないため、リストは自身の幅へ自動的に調整されます。
-     それができない場合は、内容物が切り詰められます) 。*/
-  max-height: 10em; /* 100px */
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  border: .2em solid #000; /* 2px */
-  border-top-width : .1em; /* 1px */
-  border-radius: 0 0 .4em .4em; /* 0 0 4px 4px */
-
-  box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
-  background: #f0f0f0;
-}
- -

選択肢向けに、ユーザーが選択しようとしている (あるいは選択した) 値を示せるようにするための highlight クラスを追加しなければなりません。

- -
.select .option {
-  padding: .2em .3em; /* 2px 3px */
-}
-
-.select .highlight {
-  background: #000;
-  color: #FFFFFF;
-}
- -

これで、3 つの状態の結果は以下のようになります:

- - - - - - - - - - - - - - - - - - - -
通常状態アクティブ状態開いた状態
{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_1")}}
ソースコードを確認する
- -

JavaScript でコントロールに命を吹き込む

- -

デザインや構造の準備ができましたので、コントロールが実際に動作するようにするための JavaScript コードを記述できます。

- -
-

警告: 以下は教育目的のコードであり、そのままで使用するべきではありません。ご覧のとおり、さまざまな箇所に将来性のないものや古いブラウザーで動作しないものがあります。また、本番のコードでは最適化すべき冗長な箇所もあります。

-
- -

なぜ動作しないのか?

- -

始める前に、重要事項を覚えておくことが大切です: ブラウザー内の JavaScript は信頼できる技術ではありません。カスタムコントロールを作成するとき、すべてをつなぎ合わせるために必要であることから JavaScript に頼らなければならないでしょう。ところが、JavaScript をブラウザーで実行できない場合がいくつもあります:

- - - -

このようなリスクがあるため、JavaScript が動作しない場合に何が起きるかを注意深く考えることが重要です。この問題について詳しく扱うのは、スクリプトをどれだけ汎用および再利用可能にしたいかと密接に関わりますので本記事の範囲を外れますが、本サンプルでは基本的な部分について考えていきます。

- -

本記事の例では、JavaScript コードが実行されない場合に標準の {{HTMLElement("select")}} 要素にフォールバックします。われわれのコントロールと {{HTMLElement("select")}}を導入し、いずれが表示されるかは body 要素のり class に依存します。読み込みに成功したとき、body 要素の class がコントロールの関数をなす script により更新されます。

- -

これを実現するには、2 つのことが必要です。

- -

第一に、カスタムコントロールを使用する前に通常の {{HTMLElement("select")}} 要素を追加することが必要です。実際は、これは残りのフォームデータと共にカスタムコントロールのデータを送信できるようにするために必要です。詳しくは後述します。

- -
<body class="no-widget">
-  <form>
-    <select name="myFruit">
-      <option>Cherry</option>
-      <option>Lemon</option>
-      <option>Banana</option>
-      <option>Strawberry</option>
-      <option>Apple</option>
-    </select>
-
-    <div class="select">
-      <span class="value">Cherry</span>
-      <ul class="optList hidden">
-        <li class="option">Cherry</li>
-        <li class="option">Lemon</li>
-        <li class="option">Banana</li>
-        <li class="option">Strawberry</li>
-        <li class="option">Apple</li>
-      </ul>
-    </div>
-  </form>
-
-</body>
- -

第二に、不要な要素 (すなわち、スクリプトを実行する場合における "本物の" {{HTMLElement("select")}} 要素や、実行しない場合におけるカスタムコントロール) を隠せるようにするための新たなクラスが 2 つ必要です。デフォルトでは、HTML コードでカスタムコントロールを隠すことに注意してください。

- -
.widget select,
-.no-widget .select {
-  /* この CSS セレクタの基本的な意味は:
-     - body のクラスを "widget" に設定して、本物の {{HTMLElement("select")}} 要素を隠す
-     - または body のクラスを変更せずに "no-widget" のままにしておくことで、
-       クラスが "select" である要素が隠される */
-  position : absolute;
-  left     : -5000em;
-  height   : 0;
-  overflow : hidden;
-}
- -

この CSS は要素の 1 つを見えなくしますが、スクリーンリーダーからは利用できます。

- -

ここで、スクリプトを実行するか否かを判断するための JavaScript スイッチが必要になります。このスイッチはとても簡単です: ページを読み込むときにスクリプトを実行したら、no-widget クラスを削除して widget クラスを追加します。これにより {{HTMLElement("select")}} 要素やカスタムコントロールの可視性を切り替えます。

- -
window.addEventListener("load", function () {
-  document.body.classList.remove("no-widget");
-  document.body.classList.add("widget");
-});
- - - - - - - - - - - - - - - - - -
JS なしJS あり
{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_2")}}
ソースコードを確認する
- -
-

注記: コードを本当に汎用かつ再利用可能にしたい場合はクラスを切り替えるのではなく、単に {{HTMLElement("select")}} 要素を隠すためのコントロールのクラスを追加して、ページ内にあるすべての {{HTMLElement("select")}} 要素の後ろにカスタムコントロールを表す DOM ツリーを動的に追加する方がはるかによいでしょう。

-
- -

作業をより簡単に

- -

作成しようとしているコードでは、必要な作業すべてのために標準の JavaScript と DOM API を使用するでしょう。ここで使用するつもりである機能は以下のとおりです:

- -
    -
  1. {{domxref("element.classList","classList")}}
    2. -
  2. {{domxref("EventTarget.addEventListener","addEventListener")}}
    3. -
  3. forEach
    4. -
  4. {{domxref("element.querySelector","querySelector")}} および {{domxref("element.querySelectorAll","querySelectorAll")}}
    5. -
- -

これら特定機能を利用できるかに加えて、作業を始める前に残されている問題があります。{{domxref("element.querySelectorAll","querySelectorAll()")}} 関数が返すオブジェクトは Array ではなく {{domxref("NodeList")}} です。これは、Array オブジェクトは forEach 関数をサポートしているが {{domxref("NodeList")}} はサポートしていないために重要な問題です。{{domxref("NodeList")}} は Array ととても似ており、また forEach はとても便利であることから、作業を楽にするため以下のように {{domxref("NodeList")}} で forEach をサポートさせることができます:

- -
NodeList.prototype.forEach = function (callback) {
-  Array.prototype.forEach.call(this, callback);
-}
- -

古いブラウザーをサポートする必要がある場合、そのブラウザーがこうした機能をサポートしているか確かめてください。そうでない場合、リスト内を繰り返すか、ライブラリーや pollyfill を使う必要があります。

- -

イベントコールバックを作成する

- -

基盤が整いましたので、ユーザーがコントロールと対話するたびに使用されるすべての関数を定義し始めることができます。

- -
// この関数は、カスタムコントロールを非アクティブにしたいときに使用します。
-// 引数は 1 つあります。
-// select : 非アクティブにする `select` クラスの DOM ノード
-function deactivateSelect(select) {
-
-  // コントロールがアクティブではないときは何もしません。
-  if (!select.classList.contains('active')) return;
-
-  // カスタムコントロールの選択肢のリストを取得することが必要です。
-  var optList = select.querySelector('.optList');
-
-  // 選択肢のリストを閉じます。
-  optList.classList.add('hidden');
-
-  // そして、カスタムコントロール自身を非アクティブにします。
-  select.classList.remove('active');
-}
-
-// この関数は、ユーザーがコントロールをアクティブ/非アクティブにしたがっているときに使用します。
-// 引数は 2 つあります:
-// select : アクティブにする `select` クラスの DOM ノード
-// selectList : `select` クラスであるすべての DOM ノードのリスト
-function activeSelect(select, selectList) {
-
-  // コントロールがすでにアクティブであるときは何もしません。
-  if (select.classList.contains('active')) return;
-
-  // すべてのカスタムコントロールを非アクティブにすることが必要です。
-  // deactivateSelect 関数は forEach コールバック関数の要件を
-  // すべて満たしていますので、仲介する無名関数を使用せずに
-  // 直接使用しています。
-  selectList.forEach(deactivateSelect);
-
-  // そして、指定されたコントロールをアクティブ状態にします。
-  select.classList.add('active');
-}
-
-// この関数は、ユーザーが選択肢のリストを開く/閉じることを求めたときに使用します。
-// 引数は 1 つあります:
-// select : 表示を切り替えるリストの DOM ノード
-function toggleOptList(select) {
-
-  // リストはコントロールから確保します。
-  var optList = select.querySelector('.optList');
-
-  // リストのクラスを表示/非表示に切り替えます。
-  optList.classList.toggle('hidden');
-}
-
-// この関数は、選択肢を強調したいときに使用します。
-// 引数は 2 つあります:
-// select : 強調する選択肢を包含する `select` クラスの DOM ノード
-// option : 強調する `option` クラスの DOM ノード
-function highlightOption(select, option) {
-
-  // カスタムコントロールで使用可能なすべての選択肢のリストを取得します。
-  var optionList = select.querySelectorAll('.option');
-
-  // すべての選択肢から強調効果を取り除きます。
-  optionList.forEach(function (other) {
-    other.classList.remove('highlight');
-  });
-
-  // 適切な選択肢を強調します。
-  option.classList.add('highlight');
-};
- -

以上が、カスタムコントロールのさまざまな状態を制御するために必要なもののすべてです。

- -

次に、これらの関数と適切なイベントを関連づけます:

- -
// ドキュメントが読み込まれたときのイベントの関連づけを制御します。
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // 各々のコントロールは初期化が必要です。
-  selectList.forEach(function (select) {
-
-    // すべての `option` も同様です。
-    var optionList = select.querySelectorAll('.option');
-
-    // ユーザーが選択肢にマウスポインタを乗せるたびに、その選択肢を強調します。
-    optionList.forEach(function (option) {
-      option.addEventListener('mouseover', function () {
-        // 注記: 変数 `select` および `option` は、関数呼び出しのスコープ内でのみ
-        // 使用可能なクロージャです。
-        highlightOption(select, option);
-      });
-    });
-
-    // ユーザーが独自の select 要素でクリックするたびに
-    select.addEventListener('click', function (event) {
-      // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ
-      // 使用可能なクロージャです。
-
-      // 選択肢のリストの可視性を切り替えます。
-      toggleOptList(select);
-    });
-
-    // コントロールが再びフォーカスを得た場合
-    // ユーザーがコントロールをクリックしたり、コントロールへアクセスするために
-    // Tab キーを使用するたびに、コントロールはフォーカスを得ます。
-    select.addEventListener('focus', function (event) {
-      // 注記: 変数 `select` および `selectList` は、関数呼び出しのスコープ内でのみ
-      // 使用可能なクロージャです。
-
-      // コントロールをアクティブにします。
-      activeSelect(select, selectList);
-    });
-
-    // コントロールがフォーカスを失った場合
-    select.addEventListener('blur', function (event) {
-      // 注記: 変数 `select` は、関数呼び出しのスコープ内でのみ
-      // 使用可能なクロージャです。
-
-      // コントロールを非アクティブにします。
-      deactivateSelect(select);
-    });
-
-    // ユーザーが`esc`を押した場合にフォーカスを外す
-    select.addEventListener('keyup', function (event) {
-
-      // deactive on keyup of `esc`
-      if (event.keyCode === 27) {
-         deactivateSelect(select);
-      }
-    });
-});
- -

この時点でコントロールは設計どおりに状態が変わりますが、コントロール値はまだ更新されません。次の章でこれを扱います。

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_3")}}
ソースコードを確認する
- -

コントロールの値を制御する

- -

コントロールが動作するようになりましたので、ユーザーの入力に従って値を更新して、フォームデータと共にその値を送信できるようにするコードを追加しなければなりません。

- -

これを行うもっとも簡単な方法は、覆い隠したネイティブコントロールを使用することです。そのようなコントロールはブラウザーが提供するすべての組み込みのコントロールと共に値の経過を保持しており、フォームを送信するときは通常どおりに値を送信します。これらすべてを行えるようにするために、車輪の再発明を行うのは無駄です。

- -

先ほど見たように、アクセシビリティの理由からフォールバック手段としてすでにネイティブの select コントロールを使用しています。単純に、その値をカスタムコントロールの値と同期することができます:

- -
// この関数は、表示される値を更新してネイティブコントロールの値と同期します。
-// 引数は 2 つあります:
-// select : 更新する値を持つ `select` クラスの DOM ノード
-// index  : 選択される値のインデックス
-function updateValue(select, index) {
-  // 指定されたカスタムコントロール向けのネイティブコントロールを取得することが必要です。
-  // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。
-  var nativeWidget = select.previousElementSibling;
-
-  // カスタムコントロールの値のプレースホルダーの取得も必要です。
-  var value = select.querySelector('.value');
-
-  // そして、選択肢の全リストが必要です。
-  var optionList = select.querySelectorAll('.option');
-
-  // 選択した値のインデックスを、selectedIndex に設定します。
-  nativeWidget.selectedIndex = index;
-
-  // 上記に応じて、値のプレースホルダーも更新します。
-  value.innerHTML = optionList[index].innerHTML;
-
-  // そして、カスタムコントロールで対応する選択肢を強調します。
-  highlightOption(select, optionList[index]);
-};
-
-// この関数は、ネイティブコントロールで現在選択されているインデックスを返します。
-// 引数は 1 つあります:
-// select : ネイティブコントロールに関係する `select` クラスの DOM ノード
-function getIndex(select) {
-  // 指定されたカスタムコントロール向けのネイティブコントロールにアクセスすることが必要です。
-  // この例では、ネイティブコントロールはカスタムコントロールの兄弟です。
-  var nativeWidget = select.previousElementSibling;
-
-  return nativeWidget.selectedIndex;
-};
- -

これら 2 つの関数で、ネイティブコントロールとカスタムコントロールを関連づけることができます:

- -
// ドキュメントが読み込まれたときのイベントの関連づけを制御します。
-window.addEventListener('load', function () {
-  var selectList = document.querySelectorAll('.select');
-
-  // 各々のコントロールは初期化が必要です。
-  selectList.forEach(function (select) {
-    var optionList = select.querySelectorAll('.option'),
-        selectedIndex = getIndex(select);
-
-    // カスタムコントロールがフォーカスを得られるようにします。
-    select.tabIndex = 0;
-
-    // ネイティブコントロールがフォーカスを得ないようにします。
-    select.previousElementSibling.tabIndex = -1;
-
-    // デフォルトで選択されている値が正しく表示されるようにします。
-    updateValue(select, selectedIndex);
-
-    // ユーザーが選択肢をクリックするのに応じて値を更新します。
-    optionList.forEach(function (option, index) {
-      option.addEventListener('click', function (event) {
-        updateValue(select, index);
-      });
-    });
-
-    // フォーカスがあるコントロールでユーザーがキーボードを使用するのに応じて、値を更新します。
-    select.addEventListener('keyup', function (event) {
-      var length = optionList.length,
-          index  = getIndex(select);
-
-      // ユーザーが下矢印キーを押すと、次の選択肢にジャンプします。
-      if (event.keyCode === 40 && index < length - 1) { index++; }
-
-      // ユーザーが上矢印キーを押すと、前の選択肢にジャンプします。
-      if (event.keyCode === 38 && index > 0) { index--; }
-
-      updateValue(select, index);
-    });
-  });
-});
- -

上記のコードで、tabIndex プロパティを使用していることは注目に値します。このプロパティは、ネイティブコントロールにフォーカスが当たらないようにすることと、ユーザーがキーボードやマウスを使用するとカスタムコントロールがフォーカスを得るようにするために必要です。

- -

これで完了です! 結果は以下のとおりです:

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_4")}}
ソースコードを確認する
- -

ちょっと待ってください、本当に終わったのでしょうか?

- -

アクセシブルにする

- -

フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!

- -

幸いなことに解決策があり、それは ARIA と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その W3C 仕様 は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。

- -

role 属性

- -

ARIA で使用される主要な属性が、role 属性です。role 属性は、要素を何に使用するかを定義する値を受け入れます。それぞれのロールは、自身の要件や動作を定義します。本記事の例では、ロール listbox を使用します。これは "composite role" であり、このロールの要素は子要素を持ち、またそれぞれの子要素も特定のロールを持ちます (この例では、ロール option の子要素が少なくとも 1 つ)。

- -

また、ARIA は標準の HTML マークアップにデフォルトで適用されるロールを定義することも特筆に値します。例えば、{{HTMLElement("table")}} 要素はロール grid に、{{HTMLElement("ul")}} 要素はロール list にマッチします。{{HTMLElement("ul")}} 要素を使用しているため、私たちのコントロールのロール listbox が、{{HTMLElement("ul")}} 要素のロール list を置き換えるようにしなければなりません。そのために、ロール presentation を使用します。このロールは要素に特別な意味はないことを示せるようにするためのものであり、単に情報を与えるために使用されます。これを {{HTMLElement("ul")}} 要素に適用します。

- -

ロール listbox をサポートするため、HTML を以下のように更新することが必要です:

- -
<!-- 最初の要素に role="listbox" 属性を追加します -->
-<div class="select" role="listbox">
-  <span class="value">Cherry</span>
-  <!-- ul 要素に role="presentation" を追加します -->
-  <ul class="optList" role="presentation">
-    <!-- すべての li 要素に role="option" 属性を追加します -->
-    <li role="option" class="option">Cherry</li>
-    <li role="option" class="option">Lemon</li>
-    <li role="option" class="option">Banana</li>
-    <li role="option" class="option">Strawberry</li>
-    <li role="option" class="option">Apple</li>
-  </ul>
-</div>
- -
-

注記: role 属性と class 属性の両方を含める方法は、CSS 属性セレクタに対応しない古いブラウザーをサポートしたい場合にのみ必要です。

-
- -

aria-selected 属性

- -

role を使用するだけでは不十分です。ARIA は、状態や特性を表す多くの属性も提供します。これらをより多くまた適切に使用すると、コントロールが支援技術にもっと良く理解されるようになります。ここでは、使用する属性を 1 つに絞ります: aria-selected です。

- -

aria-selected 属性は、どの選択肢が現在選択されているかを示すために使用します。これにより、支援技術はユーザーに現在何が選択されているかを伝えることができます。ここではユーザーが選択肢を選択するたびに、選択された選択肢を示すためにこの属性を JavaScript で動的に使用します。このために、updateValue() 関数の変更が必要です:

- -
function updateValue(select, index) {
-  var nativeWidget = select.previousElementSibling;
-  var value = select.querySelector('.value');
-  var optionList = select.querySelectorAll('.option');
-
-  // すべての選択肢が選択されていないようにします。
-  optionList.forEach(function (other) {
-    other.setAttribute('aria-selected', 'false');
-  });
-
-  // 指定された選択肢が選択されているようにします。
-  optionList[index].setAttribute('aria-selected', 'true');
-
-  nativeWidget.selectedIndex = index;
-  value.innerHTML = optionList[index].innerHTML;
-  highlightOption(select, optionList[index]);
-};
- -

スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。

- -

以下がこれらの変更を施した最終結果です (NVDA や VoiceOver などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):

- - - - - - - - - - - - - - - -
Live example
{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_controls/Example_5")}}
ソースコードを確認する
- -

もっと先に進むには、この例でのコードは汎用性や再利用性に改善が必要です。これは課題として挑戦できます。この2つのヒントを挙げると:すべての関数で最初の引数は同じで、つまりこれらの関数は同じコンテキストが必要です。そのコンテキストを共有するオブジェクトを作るのが賢明です。

- -

他の方法: ラジオボタンを使う

- -

上の例では、非動的なHTML、CSS、JavaScript を使って {{htmlelement('select')}} 要素を再発明しました。このselectは限られた選択肢から1つが選択され、それは {{htmlelement('input/radio', 'radio')}} ボタンのグループと同様な機能です。

- -

このため、代わりにラジオボタンを使って再発明できます。このオプションを見てみましょう。

- -

We can start with

- -

完全に意味のある、アクセシブルで、順序のない、関連する{{htmlelement('label')}}つきの{{htmlelement('input/radio','radio')}} ボタンのリストから始めます、グループ全体を適切な意味のある{{htmlelement('fieldset')}} と{{htmlelement('legend')}} のペアにラベルづけします。.

- -
 <fieldset>
-  <legend>Pick a fruit</legend>
-    <ul class="styledSelect">
-      <li><input type="radio" name="fruit" value="Cherry" id="fruitCherry" checked><label for="fruitCherry">Cherry</label></li>
-      <li><input type="radio" name="fruit" value="Lemon" id="fruitLemon"><label for="fruitLemon">Lemon</label></li>
-      <li><input type="radio" name="fruit" value="Banana" id="fruitBanana"><label for="fruitBanana"">Banana</label></li>
-      <li><input type="radio" name="fruit" value="Strawberry" id="fruitStrawberry"><label for="fruitStrawberry">Strawberry</label></li>
-      <li><input type="radio" name="fruit" value="Apple" id="fruitApple"><label for="fruitApple">Apple</label></li>
-    </ul>
-  </fieldset>
- -

(legend/fieldsetではなく)ラジオボタンリストに少しスタイルづけをして、前の例と同じ見た目にし、完了したことがわかるようにします:

- -
.styledSelect {
-  display: inline-block;
-  padding: 0;
-}
-.styledSelect li {
-  list-style-type: none;
-  padding: 0;
-  display: flex;
-}
-.styledSelect [type=radio] {
-  position: absolute;
-  left: -100vw;
-  top: -100vh;
-}
-.styledSelect label {
-  margin: 0;
-  line-height: 2;
-  padding: 0 0 0 4px;
-}
-.styledSelect:not(:focus-within) input:not(:checked) + label {
-  height: 0;
-  outline: none;
-  overflow: hidden;
-}
-.styledSelect:not(:focus-within) input:checked + label {
-  border: .2em solid #000;
-  border-radius: .4em;
-  box-shadow: 0 .1em .2em rgba(0,0,0,.45);
-}
-.styledSelect:not(:focus-within) input:checked + label::after {
-  content : "▼";
-  background: black;
-  float: right;
-  color: white;
-  padding: 0 4px;
-  margin: 0 -4px 0 4px;
-}
-.styledSelect:focus-within {
-  border: .2em solid #000;
-  border-radius: .4em;
-  box-shadow: 0 .1em .2em rgba(0,0,0,.45);
-}
-.styledSelect:focus-within input:checked + label {
-  background-color: #333;
-  color: #fff;
-  width: 100%;
-}
- -

JavaScriptなしで少しの CSSにて、ラジオボタンのリストをスタイルづけしてチェック済み項目のみを表示することができます。フォーカスが<fieldset>内の <ul> に来ると、リストは開いて、上下左右の矢印が前後の項目を選択するのに使えます。次で試してください:

- -

{{EmbedLiveSample("An_alternative_approach_Using_radio_buttons",200,240)}}

- -

これはある程度、JavaScriptなしで動作します。JavaScript が失敗しても動作する、われわれのカスタムコントロールど同じものを作ってきました。よい解決策でしょう？これはキーボードでは動作しますが、マウスクリックではそうなりません。ネイティブな意味づけのない要素を作るフレームワークに依存する代わりに、ウェブ標準をカスタムコントロールの基礎として使った方が意味があります。しかし、われわれのコントロールは <select> が自ずと持つ機能と同じものを備えていません。

- -

いい面として、このコントロールはスクリーンリーダーにとって完全にアクセシブルでキーボードで完全に操作できます。しかし、このコントロールは {{htmlelement('select')}} 要素の置き換えではありません。異なる機能や足りない機能があります。例えば、4つの矢印は選択肢を操作できますが、最後のボタンで下を押すと最初のボタンに移動します。<select> のように上端、下端で止まりません。

- -

この足りない機能の追加は、読者の課題としておきます。

- -

まとめ

- -

独自のフォームコントロールの作成方法を見てきましたが、ご覧いただいたようにこれは容易なことではありません。独自のカスタムコントロールを作る前に、HTMLに要求を十分に満たす代替要素がないかを検討してください。本当にカスタムコントロールを作成する必要がある場合、サードパーティのライブラリに頼るほうが簡単かつよいことも少なくありません。独自作成する場合、既存の要素を編集するか、準備されたコントロールを実装するフレームワークを使うようにして、実用的でアクセシブルなフォームコントロールの作成は見た目より複雑であることを忘れないでください。

- -

自分でコーディングする前に検討するとよいライブラリをいくつか紹介します:

- - - -

ラジオボタン、独自JavaScript 、またはサードパーティライブラリで代替コントロールを作る場合、アクセシブルかつ機能への耐性を高めましょう。すなわち Web 標準の実装状況がまちまちである、多様なブラウザーで良好に動作できるようにすることが必要です。楽しんでください!

- -

このモジュール

- -

学習コース

- - - -

上級トピック

- - diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/example/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/example/index.html new file mode 100644 index 0000000000..2c97485087 --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_a_web_form/example/index.html @@ -0,0 +1,164 @@ +--- +title: '例: お支払いフォーム' +slug: Learn/Forms/How_to_structure_an_HTML_form/Example +translation_of: Learn/Forms/How_to_structure_a_web_form/Example +--- +

これは記事 HTML フォームの構築方法の基本的なお支払いフォームの例です。

+ +

お支払いフォーム

+ +

HTML コンテンツ

+ +
<form>
+        <h1>Payment form</h1>
+        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+        <section>
+            <h2>Contact information</h2>
+            <fieldset>
+              <legend>Title</legend>
+              <ul>
+                  <li>
+                    <label for="title_1">
+                      <input type="radio" id="title_1" name="title" value="M." >
+                      Mister
+                    </label>
+                  </li>
+                  <li>
+                    <label for="title_2">
+                      <input type="radio" id="title_2" name="title" value="Ms.">
+                      Miss
+                    </label>
+                  </li>
+              </ul>
+            </fieldset>
+            <p>
+              <label for="name">
+                <span>Name: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="text" id="name" name="username">
+            </p>
+            <p>
+              <label for="mail">
+                <span>E-mail: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="email" id="mail" name="usermail">
+            </p>
+            <p>
+              <label for="password">
+                <span>Password: </span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+              <input type="password" id="pwd" name="password">
+            </p>
+        </section>
+        <section>
+            <h2>Payment information</h2>
+            <p>
+              <label for="card">
+                <span>Card type:</span>
+              </label>
+              <select id="card" name="usercard">
+                <option value="visa">Visa</option>
+                <option value="mc">Mastercard</option>
+                <option value="amex">American Express</option>
+              </select>
+            </p>
+            <p>
+              <label for="number">
+                <span>Card number:</span>
+                <strong><abbr title="required">*</abbr></strong>
+              </label>
+                <input type="number" id="number" name="cardnumber">
+            </p>
+            <p>
+              <label for="date">
+                <span>Expiration date:</span>
+                <strong><abbr title="required">*</abbr></strong>
+                <em>formatted as mm/yy</em>
+              </label>
+              <input type="date" id="date" name="expiration">
+            </p>
+        </section>
+        <section>
+            <p> <button type="submit">Validate the payment</button> </p>
+        </section>
+    </form>
+ +

CSS コンテンツ

+ +
      h1 {
+          margin-top: 0;
+      }
+
+      ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+      }
+
+      form {
+          margin: 0 auto;
+          width: 400px;
+          padding: 1em;
+          border: 1px solid #CCC;
+          border-radius: 1em;
+      }
+
+      div+div {
+          margin-top: 1em;
+      }
+
+      label span {
+          display: inline-block;
+          width: 120px;
+          text-align: right;
+      }
+
+      input, textarea {
+          font: 1em sans-serif;
+          width: 250px;
+          box-sizing: border-box;
+          border: 1px solid #999;
+      }
+
+      input[type=checkbox], input[type=radio] {
+          width: auto;
+          border: none;
+      }
+
+      input:focus, textarea:focus {
+          border-color: #000;
+      }
+
+      textarea {
+          vertical-align: top;
+          height: 5em;
+          resize: vertical;
+      }
+
+      fieldset {
+          width: 250px;
+          box-sizing: border-box;
+          margin-left: 136px;
+          border: 1px solid #999;
+      }
+
+      button {
+          margin: 20px 0 0 124px;
+      }
+
+      label {
+        position: relative;
+      }
+
+      label em {
+        position: absolute;
+        right: 5px;
+        top: 20px;
+      }
+ +

結果

+ +

{{ EmbedLiveSample('A_payment_form', '100%', 620) }}

diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..ca3865643f --- /dev/null +++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,329 @@ +--- +title: フォームの構築方法 +slug: Learn/Forms/How_to_structure_an_HTML_form +tags: + - CodingScripting + - HTML + - Web + - ガイド + - フォーム + - 例 + - 初心者 + - 学習 + - 構造 +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+ +

基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。

+ + + + + + + + + + + + +
前提条件:基本的なコンピューターリテラシーと、HTML の基本的な理解。
目的:HTML フォームを構造化して意味を与えて使いやすくアクセシブルにする方法を理解すること。
+ +

フォームは柔軟性があるため、HTML で最も複雑な構造の 1 つとなっています。専用のフォーム要素と属性を使用して、あらゆる種類の基本フォームを作成できます。HTML フォームを構築するときに正しい構造を使用すると、フォームが使用可能でアクセスしやすいことを確実にするのに役立ちます。

+ +

<form> 要素

+ +

{{HTMLElement("form")}} 要素はフォームを正式に定義するとともに、自身の属性でフォームの動作を定義します。HTML フォームを作成しようとするたびに、この要素から始めて、すべてのコンテンツをその中に入れなければなりません。多くの支援技術やブラウザープラグインは {{HTMLElement("form")}} 要素を検出でき、またフォームを使いやすくするための特別なフックを実装できます。

+ +

前の記事ですでにこれを見ています。

+ +
警告: フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い方針です。
+ +

{{HTMLElement("form")}} 要素の外部でもフォームウィジェットを使用できますが、そのフォームウィジェットは form 属性を用いて関連付けなければ、どのフォームに対しても何も行わないことに注意してください。これは、実際には {{ HTMLElement("form") }} に包含されていない要素であっても明示的にフォームへ紐付けることを可能にします。

+ +

  次に、フォームに含まれる構造的な要素を見ていきましょう。

+ +

<fieldset> および <legend> 要素

+ +

{{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<fieldset> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。

+ +

多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば Jaws や NVDA といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。

+ +

以下に小さなサンプルを挙げます:

+ +
<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+ +
+

注: この例は fieldset-legend.html で見ることができます(ライブ版も見てください)。

+
+ +

この例では、スクリーンリーダーは最初のウィジェットを "Fruit juice size small"、2 番目を "Fruit juice size medium"、3 番目を "Fruit juice size large" と読み上げるでしょう。

+ +

このサンプルでのユースケースは、もっとも重要なことのひとつです。ラジオボタンのセットを置くたびに、それらを {{HTMLElement("fieldset")}} 要素内へ入れ子にするようにしましょう。ユースケースは他にもあり、通常は {{HTMLElement("fieldset")}} 要素でフォームを明確に区分するために使用できます。理想的には長いフォームは複数ページに分けるべきですが、フォームが長くなっても１つのページに収めないといけない場合、別々の関連セクションを別々の fieldset に入れることは使いやすさを改善します。

+ +

支援技術への影響力により、{{HTMLElement("fieldset")}} 要素はアクセシブルなフォームを作成するために重要な要素のひとつです。しかし、それを誤用しないようにするのはあなたの責務です。できれば、フォームを作成するたびにスクリーンリーダーがどのように解釈するか聞いてみましょう。変に聞こえるのであれば、フォームの構造を改善するためのよいヒントになります。

+ +

<label> 要素

+ +

これまでの記事で見てきたように、{{HTMLElement("label")}} 要素は、HTML フォームウィジェットのラベルを定義する正式な方法です。これは、アクセシブルなフォームを作成したい場合にもっとも重要な要素です — 適切に実装された時は、スクリーンリーダーはフォーム要素のラベルと関連する指示を一緒に読み上げます。前の記事で見てきたこの例を見てみます:

+ +
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+ +

<label> と<input> とがそれぞれ for と id 属性により正し関連付けられると (label の for 属性は対応するウィジェットの id 属性を参照します)、スクリーンリーダーは "Name, edit text"のように読み上げます。

+ +

フォームコントロールとラベルを関連付けるもう 1 つの方法は、フォームコントロールを <label> の中でネストすることで、暗黙的に関連付けることです。

+ +
<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+ +

この場合でも for 属性を設定することがベストプラクティスと考えられています。これは、ラベルとウィジェットの暗黙的な関係を理解できない支援技術があるためです。

+ +

ラベルがなかったり、フォームコントロールが明示的/暗黙にラベルに関連付けられていない場合、スクリーンリーダーは全く役立たない "Edit text blank" のような読み上げを行います。

+ +

ラベルもクリック可能です！

+ +

ラベルをセットアップするもう 1 つの利点は、ユーザーがラベルをクリックするとウィジェットをアクティブにすることが、あらゆるブラウザーで可能になります。これは例えば、テキスト入力で、入力と同様にラベルをクリックしてフォーカスさせることができますし、ラジオボタンやチェックボックスで特に有用です — このコントロールのヒットエリアはとても小さく、できるだけ大きくしておくのは便利です。

+ +

例えば、次の例で "I like cherry" の テキストをクリックすると選択された taste_cherry チェックボックスの状態が切り替わります:

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
+    <label for="taste_1">I like cherry</label>
+  </p>
+  <p>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
+    <label for="taste_2">I like banana</label>
+  </p>
+</form>
+ +
+

注: この例は checkbox-label.html で見ることができます(ライブ版も見てください)。

+
+ +

複数のラベル

+ +

厳密に言うと、1 つのウィジェット内に複数のラベルを入れることができますが、複数のラベルを持つウィジェットの扱いに問題がある支援技術があるかもしれません。複数のラベルがある場合、アクセシブルなフォームを作成するには1つの {{htmlelement("label")}} 要素内にウィジェットを入れ子にするとよいでしょう。

+ +

以下のサンプルについて考えてみましょう:

+ +
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
+
+<!-- 2 つの例をご覧ください: -->
+<div>
+  <label for="username">Name:</label>
+  <input id="username" type="text" name="username">
+  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
+</div>
+
+<!-- 前出の例よりは良いです: -->
+<div>
+  <label for="username">
+    <span>Name: </span>
+    <input id="username" type="text" name="username">
+    <abbr title="required" aria-label="required">*</abbr>
+  </label>
+</div>
+
+<!-- これが最も良いでしょう: -->
+<div>
+  <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label>
+  <input id="username" type="text" name="username">
+</div>
+ +

{{EmbedLiveSample("Multiple_labels", 120, 120)}}

+ +

このサンプルでは、最初の段落で入力必須の要素の規則を定義しています。ユーザーが入力必須の要素を見つける前にスクリーンリーダーのような支援技術が注意事項を表示したり読み上げたりするためには、規則をはじめに置かなければなりません。これがユーザーにアスタリスクの意味を知らせても、それに依存することはできません。スクリーンリーダーはアスタリスクが出てくると "スター" と読み上げます。視力のあるユーザーがマウスを持ってくると、title 属性によって"必須"と表示されます。タイトルはスクリーンリーダーの設定により読み上げられるので、常にスクリーンリーダーに読み上げられる aria-label 属性を入れておくのがより信頼性が高いでしょう。

+ +

上記の違いをふまえると、以降を効率よく見ていけるでしょう:

+ + + +
+

注: スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。

+
+ +
+

注: この例は GitHub の required-labels.html で見ることができます(ライブ版も見てください)。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!

+
+ +

フォームで使用される一般的な HTML 構造

+ +

ウェブフォーム特有の構造の前提として、フォームは単に HTML であると覚えておくとよいでしょう。つまり、ウェブフォームを組み立てるために HTML のすべての力を利用できるのです。

+ +

サンプルでわかるように、ラベルとそのウィジェットを {{HTMLElement("ul")}} や {{HTMLElement("ol")}} リストの中の {{HTMLElement("li")}} 要素で包み込むのが一般的な慣習です。HTML リストにあるように、{{HTMLElement("p")}} 要素と {{HTMLElement("div")}} 要素も良く使われます。リストは複数のチェックボックスやラジオボタンを構造化するのに最もよく使われます。

+ +

{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("h1")}}, {{htmlelement("h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。

+ +

とりわけ、コーディングスタイルがどうあるのが心地よく、どれがアクセシブルで使いやすいフォームとなるのかを見つけるのはあなた次第です。別の機能セクションは別の {{htmlelement("section")}} 要素と、ラジオボタンを含む {{htmlelement("fieldset")}} にそれぞれ分けておくべきです。

+ +

アクティブラーニング: フォーム構造を構築する

+ +

これらのアイデアを実践し、もう少し複雑なフォーム構造、つまり支払いフォームを作成しましょう。このフォームはあなたがまだ理解していないかもしれないウィジェットタイプをいくつも含みますが、今はそのことを心配しないでください。次の記事 (ネイティブフォームウィジェット) でそれらがどのように機能するのかがわかります。今のところ、以下の説明に沿って説明を注意深く読み、フォームを構成するためにどのラッパー要素を使用しているか、そしてその理由を理解することから始めてください。

+ +
    +
  1. あらかじめ、空のテンプレートファイルとお支払いフォームの CSS のローカルコピーをコンピューターの新しいディレクトリーに作成します。
    2. +
  2. まず最初に、HTML {{htmlelement("head")}} 内に次の行を追加して CSS を HTML に適用します。 + 
    <link href="payment-form.css" rel="stylesheet">
    +
    3. +
  3. 次に、外側の {{htmlelement("form")}} 要素を追加してフォームを作成します: + 
    <form>
+
+</form>
    +
    4. +
  4. <form> タグ内に、必須フィールドにマークを付ける方法をユーザーに通知するための見出しと段落を追加します: + 
    <h1>Payment form</h1>
+<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    +
    5. +
  5. 次に、前のエントリーの下に、より大きなコードセクションをフォームに追加します。ここでは、連絡先情報フィールドを個別の {{htmlelement("section")}} 要素内にラップしていることがわかります。さらに、2 つのラジオボタンのセットがあり、それぞれ独自のリスト ({{htmlelement("li")}}) 要素の中に入れています。最後に、2 つの標準テキスト {{htmlelement("input")}} とそれに関連する {{htmlelement("label")}} 要素があり、それぞれ {{htmlelement("p")}} の内側に含まれていて、パスワードを入力するためのパスワード入力があります。フォームにこのコードを追加してください: + 
    <section>
+    <h2>Contact information</h2>
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+          <li>
+            <label for="title_1">
+              <input type="radio" id="title_1" name="title" value="K" >
+              King
+            </label>
+          </li>
+          <li>
+            <label for="title_2">
+              <input type="radio" id="title_2" name="title" value="Q">
+              Queen
+            </label>
+          </li>
+          <li>
+            <label for="title_3">
+              <input type="radio" id="title_3" name="title" value="J">
+              Joker
+            </label>
+          </li>
+      </ul>
+    </fieldset>
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="text" id="name" name="username">
+    </p>
+    <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="email" id="mail" name="usermail">
+    </p>
+    <p>
+      <label for="pwd">
+        <span>Password: </span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="password" id="pwd" name="password">
+    </p>
+</section>
    +
    6. +
  6. それでは、フォームの 2 番目の <section> — 支払い情報に目を向けます。ここには 3 つの異なるウィジェットとそのラベルがあり、それぞれ <p> の中に含まれています。1 つ目は、クレジットカードの種類を選択するためのドロップダウンメニュー ({{htmlelement("select")}}) です。2 番目は、クレジットカード番号を入力するための tel 型の <input> 要素です。number 型を使うこともできますが、そのスピナーUIは望ましくありません。最後のものは、カードの有効期限を入力するための date 型の <input> 要素です。これは、サポートしているブラウザーでは日付選択ウィジェットが表示され、サポートしていないブラウザーでは通常のテキスト入力に戻ります。新しい入力タイプは HTML5 入力タイプで再度紹介されます。
    +
    + 前のセクションの下に次のように入力してください。 + 
    <section>
+    <h2>Payment information</h2>
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+      </label>
+      <select id="card" name="usercard">
+        <option value="visa">Visa</option>
+        <option value="mc">Mastercard</option>
+        <option value="amex">American Express</option>
+      </select>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+      <input type="tel" id="number" name="cardnumber">
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formatted as mm/dd/yyyy</em>
+      </label>
+      <input type="date" id="date" name="expiration">
+    </p>
+</section>
    +
    7. +
  7. 最後に追加するセクションはもっと単純で、フォームデータを送信するための submit タイプの {{htmlelement("button")}} のみを含みます。これをフォームの一番下に追加してください: + 
    <p> <button type="submit">Validate the payment</button> </p>
    +
    8. +
+ +

完成したフォームは以下のように動作しています (GitHub でも確認できます。payment-form.html ソースを参照してライブ実行してください)。

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

+ +

あなたのスキルをテストしてみましょう!

+ +

この記事はここまでですが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を保持しているかどうかを確認するためのテストがあります — Test your skills: Form structure を参照してください。

+ +

まとめ

+ +

ウェブフォームを適切に構築するためのあらゆる知識を得ることができました。これからここで出てきた機能を見ていき、次の記事では、ユーザーから情報を集めるのに使いたくなるすべての種類のフォームウィジェットの詳細な実装について詳しく見ていきます。

+ +

関連情報

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

+ +

このモジュール

+ + + +

上級トピック

+ + diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html deleted file mode 100644 index 2c97485087..0000000000 --- a/files/ja/learn/forms/how_to_structure_an_html_form/example/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: '例: お支払いフォーム' -slug: Learn/Forms/How_to_structure_an_HTML_form/Example -translation_of: Learn/Forms/How_to_structure_a_web_form/Example ---- -

これは記事 HTML フォームの構築方法の基本的なお支払いフォームの例です。

- -

お支払いフォーム

- -

HTML コンテンツ

- -
<form>
-        <h1>Payment form</h1>
-        <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-        <section>
-            <h2>Contact information</h2>
-            <fieldset>
-              <legend>Title</legend>
-              <ul>
-                  <li>
-                    <label for="title_1">
-                      <input type="radio" id="title_1" name="title" value="M." >
-                      Mister
-                    </label>
-                  </li>
-                  <li>
-                    <label for="title_2">
-                      <input type="radio" id="title_2" name="title" value="Ms.">
-                      Miss
-                    </label>
-                  </li>
-              </ul>
-            </fieldset>
-            <p>
-              <label for="name">
-                <span>Name: </span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="text" id="name" name="username">
-            </p>
-            <p>
-              <label for="mail">
-                <span>E-mail: </span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="email" id="mail" name="usermail">
-            </p>
-            <p>
-              <label for="password">
-                <span>Password: </span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-              <input type="password" id="pwd" name="password">
-            </p>
-        </section>
-        <section>
-            <h2>Payment information</h2>
-            <p>
-              <label for="card">
-                <span>Card type:</span>
-              </label>
-              <select id="card" name="usercard">
-                <option value="visa">Visa</option>
-                <option value="mc">Mastercard</option>
-                <option value="amex">American Express</option>
-              </select>
-            </p>
-            <p>
-              <label for="number">
-                <span>Card number:</span>
-                <strong><abbr title="required">*</abbr></strong>
-              </label>
-                <input type="number" id="number" name="cardnumber">
-            </p>
-            <p>
-              <label for="date">
-                <span>Expiration date:</span>
-                <strong><abbr title="required">*</abbr></strong>
-                <em>formatted as mm/yy</em>
-              </label>
-              <input type="date" id="date" name="expiration">
-            </p>
-        </section>
-        <section>
-            <p> <button type="submit">Validate the payment</button> </p>
-        </section>
-    </form>
- -

CSS コンテンツ

- -
      h1 {
-          margin-top: 0;
-      }
-
-      ul {
-          margin: 0;
-          padding: 0;
-          list-style: none;
-      }
-
-      form {
-          margin: 0 auto;
-          width: 400px;
-          padding: 1em;
-          border: 1px solid #CCC;
-          border-radius: 1em;
-      }
-
-      div+div {
-          margin-top: 1em;
-      }
-
-      label span {
-          display: inline-block;
-          width: 120px;
-          text-align: right;
-      }
-
-      input, textarea {
-          font: 1em sans-serif;
-          width: 250px;
-          box-sizing: border-box;
-          border: 1px solid #999;
-      }
-
-      input[type=checkbox], input[type=radio] {
-          width: auto;
-          border: none;
-      }
-
-      input:focus, textarea:focus {
-          border-color: #000;
-      }
-
-      textarea {
-          vertical-align: top;
-          height: 5em;
-          resize: vertical;
-      }
-
-      fieldset {
-          width: 250px;
-          box-sizing: border-box;
-          margin-left: 136px;
-          border: 1px solid #999;
-      }
-
-      button {
-          margin: 20px 0 0 124px;
-      }
-
-      label {
-        position: relative;
-      }
-
-      label em {
-        position: absolute;
-        right: 5px;
-        top: 20px;
-      }
- -

結果

- -

{{ EmbedLiveSample('A_payment_form', '100%', 620) }}

diff --git a/files/ja/learn/forms/how_to_structure_an_html_form/index.html b/files/ja/learn/forms/how_to_structure_an_html_form/index.html deleted file mode 100644 index ca3865643f..0000000000 --- a/files/ja/learn/forms/how_to_structure_an_html_form/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: フォームの構築方法 -slug: Learn/Forms/How_to_structure_an_HTML_form -tags: - - CodingScripting - - HTML - - Web - - ガイド - - フォーム - - 例 - - 初心者 - - 学習 - - 構造 -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
- -

基本から外れて、ここでは色々なフォームのパーツを構造化し、意味をつけるのに使われる要素を詳しく見ていきます。

- - - - - - - - - - - - -
前提条件:基本的なコンピューターリテラシーと、HTML の基本的な理解。
目的:HTML フォームを構造化して意味を与えて使いやすくアクセシブルにする方法を理解すること。
- -

フォームは柔軟性があるため、HTML で最も複雑な構造の 1 つとなっています。専用のフォーム要素と属性を使用して、あらゆる種類の基本フォームを作成できます。HTML フォームを構築するときに正しい構造を使用すると、フォームが使用可能でアクセスしやすいことを確実にするのに役立ちます。

- -

<form> 要素

- -

{{HTMLElement("form")}} 要素はフォームを正式に定義するとともに、自身の属性でフォームの動作を定義します。HTML フォームを作成しようとするたびに、この要素から始めて、すべてのコンテンツをその中に入れなければなりません。多くの支援技術やブラウザープラグインは {{HTMLElement("form")}} 要素を検出でき、またフォームを使いやすくするための特別なフックを実装できます。

- -

前の記事ですでにこれを見ています。

- -
警告: フォームの中にフォームを入れ子にすることは厳格に禁じられています。これは予期せぬ動作を発生するおそれがあるので、悪い方針です。
- -

{{HTMLElement("form")}} 要素の外部でもフォームウィジェットを使用できますが、そのフォームウィジェットは form 属性を用いて関連付けなければ、どのフォームに対しても何も行わないことに注意してください。これは、実際には {{ HTMLElement("form") }} に包含されていない要素であっても明示的にフォームへ紐付けることを可能にします。

- -

  次に、フォームに含まれる構造的な要素を見ていきましょう。

- -

<fieldset> および <legend> 要素

- -

{{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<fieldset> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。

- -

多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば Jaws や NVDA といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。

- -

以下に小さなサンプルを挙げます:

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small">
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium">
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large">
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -
-

注: この例は fieldset-legend.html で見ることができます(ライブ版も見てください)。

-
- -

この例では、スクリーンリーダーは最初のウィジェットを "Fruit juice size small"、2 番目を "Fruit juice size medium"、3 番目を "Fruit juice size large" と読み上げるでしょう。

- -

このサンプルでのユースケースは、もっとも重要なことのひとつです。ラジオボタンのセットを置くたびに、それらを {{HTMLElement("fieldset")}} 要素内へ入れ子にするようにしましょう。ユースケースは他にもあり、通常は {{HTMLElement("fieldset")}} 要素でフォームを明確に区分するために使用できます。理想的には長いフォームは複数ページに分けるべきですが、フォームが長くなっても１つのページに収めないといけない場合、別々の関連セクションを別々の fieldset に入れることは使いやすさを改善します。

- -

支援技術への影響力により、{{HTMLElement("fieldset")}} 要素はアクセシブルなフォームを作成するために重要な要素のひとつです。しかし、それを誤用しないようにするのはあなたの責務です。できれば、フォームを作成するたびにスクリーンリーダーがどのように解釈するか聞いてみましょう。変に聞こえるのであれば、フォームの構造を改善するためのよいヒントになります。

- -

<label> 要素

- -

これまでの記事で見てきたように、{{HTMLElement("label")}} 要素は、HTML フォームウィジェットのラベルを定義する正式な方法です。これは、アクセシブルなフォームを作成したい場合にもっとも重要な要素です — 適切に実装された時は、スクリーンリーダーはフォーム要素のラベルと関連する指示を一緒に読み上げます。前の記事で見てきたこの例を見てみます:

- -
<label for="name">Name:</label> <input type="text" id="name" name="user_name">
- -

<label> と<input> とがそれぞれ for と id 属性により正し関連付けられると (label の for 属性は対応するウィジェットの id 属性を参照します)、スクリーンリーダーは "Name, edit text"のように読み上げます。

- -

フォームコントロールとラベルを関連付けるもう 1 つの方法は、フォームコントロールを <label> の中でネストすることで、暗黙的に関連付けることです。

- -
<label for="name">
-  Name: <input type="text" id="name" name="user_name">
-</label>
- -

この場合でも for 属性を設定することがベストプラクティスと考えられています。これは、ラベルとウィジェットの暗黙的な関係を理解できない支援技術があるためです。

- -

ラベルがなかったり、フォームコントロールが明示的/暗黙にラベルに関連付けられていない場合、スクリーンリーダーは全く役立たない "Edit text blank" のような読み上げを行います。

- -

ラベルもクリック可能です！

- -

ラベルをセットアップするもう 1 つの利点は、ユーザーがラベルをクリックするとウィジェットをアクティブにすることが、あらゆるブラウザーで可能になります。これは例えば、テキスト入力で、入力と同様にラベルをクリックしてフォーカスさせることができますし、ラジオボタンやチェックボックスで特に有用です — このコントロールのヒットエリアはとても小さく、できるだけ大きくしておくのは便利です。

- -

例えば、次の例で "I like cherry" の テキストをクリックすると選択された taste_cherry チェックボックスの状態が切り替わります:

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
-    <label for="taste_1">I like cherry</label>
-  </p>
-  <p>
-    <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
-    <label for="taste_2">I like banana</label>
-  </p>
-</form>
- -
-

注: この例は checkbox-label.html で見ることができます(ライブ版も見てください)。

-
- -

複数のラベル

- -

厳密に言うと、1 つのウィジェット内に複数のラベルを入れることができますが、複数のラベルを持つウィジェットの扱いに問題がある支援技術があるかもしれません。複数のラベルがある場合、アクセシブルなフォームを作成するには1つの {{htmlelement("label")}} 要素内にウィジェットを入れ子にするとよいでしょう。

- -

以下のサンプルについて考えてみましょう:

- -
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
-
-<!-- 2 つの例をご覧ください: -->
-<div>
-  <label for="username">Name:</label>
-  <input id="username" type="text" name="username">
-  <label for="username"><abbr title="required" aria-label="required">*</abbr></label>
-</div>
-
-<!-- 前出の例よりは良いです: -->
-<div>
-  <label for="username">
-    <span>Name: </span>
-    <input id="username" type="text" name="username">
-    <abbr title="required" aria-label="required">*</abbr>
-  </label>
-</div>
-
-<!-- これが最も良いでしょう: -->
-<div>
-  <label for="username">Name: <abbr title="required" aria-label="required">*</abbr></label>
-  <input id="username" type="text" name="username">
-</div>
- -

{{EmbedLiveSample("Multiple_labels", 120, 120)}}

- -

このサンプルでは、最初の段落で入力必須の要素の規則を定義しています。ユーザーが入力必須の要素を見つける前にスクリーンリーダーのような支援技術が注意事項を表示したり読み上げたりするためには、規則をはじめに置かなければなりません。これがユーザーにアスタリスクの意味を知らせても、それに依存することはできません。スクリーンリーダーはアスタリスクが出てくると "スター" と読み上げます。視力のあるユーザーがマウスを持ってくると、title 属性によって"必須"と表示されます。タイトルはスクリーンリーダーの設定により読み上げられるので、常にスクリーンリーダーに読み上げられる aria-label 属性を入れておくのがより信頼性が高いでしょう。

- -

上記の違いをふまえると、以降を効率よく見ていけるでしょう:

- - - -
-

注: スクリーンリーダーによっては、少し異なる結果になる場合もあります。これは VoiceOver (と同様に動作する NVDA)でテストしています。あなたの体験を聞きたいです。

-
- -
-

注: この例は GitHub の required-labels.html で見ることができます(ライブ版も見てください)。2 や 3 のコメントを外したバージョンの例を実行しないでください — 複数の label と複数の同じ input ID があると、スクリーンリーダーは確実に混乱します!

-
- -

フォームで使用される一般的な HTML 構造

- -

ウェブフォーム特有の構造の前提として、フォームは単に HTML であると覚えておくとよいでしょう。つまり、ウェブフォームを組み立てるために HTML のすべての力を利用できるのです。

- -

サンプルでわかるように、ラベルとそのウィジェットを {{HTMLElement("ul")}} や {{HTMLElement("ol")}} リストの中の {{HTMLElement("li")}} 要素で包み込むのが一般的な慣習です。HTML リストにあるように、{{HTMLElement("p")}} 要素と {{HTMLElement("div")}} 要素も良く使われます。リストは複数のチェックボックスやラジオボタンを構造化するのに最もよく使われます。

- -

{{HTMLElement("fieldset")}} 要素に加えて、複雑なフォームの構築に HTML の見出し (例{{htmlelement("h1")}}, {{htmlelement("h2")}}) やセクション (例 {{htmlelement("section")}}) を使うことも一般的です。

- -

とりわけ、コーディングスタイルがどうあるのが心地よく、どれがアクセシブルで使いやすいフォームとなるのかを見つけるのはあなた次第です。別の機能セクションは別の {{htmlelement("section")}} 要素と、ラジオボタンを含む {{htmlelement("fieldset")}} にそれぞれ分けておくべきです。

- -

アクティブラーニング: フォーム構造を構築する

- -

これらのアイデアを実践し、もう少し複雑なフォーム構造、つまり支払いフォームを作成しましょう。このフォームはあなたがまだ理解していないかもしれないウィジェットタイプをいくつも含みますが、今はそのことを心配しないでください。次の記事 (ネイティブフォームウィジェット) でそれらがどのように機能するのかがわかります。今のところ、以下の説明に沿って説明を注意深く読み、フォームを構成するためにどのラッパー要素を使用しているか、そしてその理由を理解することから始めてください。

- -
    -
  1. あらかじめ、空のテンプレートファイルとお支払いフォームの CSS のローカルコピーをコンピューターの新しいディレクトリーに作成します。
    2. -
  2. まず最初に、HTML {{htmlelement("head")}} 内に次の行を追加して CSS を HTML に適用します。 - 
    <link href="payment-form.css" rel="stylesheet">
    -
    3. -
  3. 次に、外側の {{htmlelement("form")}} 要素を追加してフォームを作成します: - 
    <form>
-
-</form>
    -
    4. -
  4. <form> タグ内に、必須フィールドにマークを付ける方法をユーザーに通知するための見出しと段落を追加します: - 
    <h1>Payment form</h1>
-<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
    -
    5. -
  5. 次に、前のエントリーの下に、より大きなコードセクションをフォームに追加します。ここでは、連絡先情報フィールドを個別の {{htmlelement("section")}} 要素内にラップしていることがわかります。さらに、2 つのラジオボタンのセットがあり、それぞれ独自のリスト ({{htmlelement("li")}}) 要素の中に入れています。最後に、2 つの標準テキスト {{htmlelement("input")}} とそれに関連する {{htmlelement("label")}} 要素があり、それぞれ {{htmlelement("p")}} の内側に含まれていて、パスワードを入力するためのパスワード入力があります。フォームにこのコードを追加してください: - 
    <section>
-    <h2>Contact information</h2>
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-          <li>
-            <label for="title_1">
-              <input type="radio" id="title_1" name="title" value="K" >
-              King
-            </label>
-          </li>
-          <li>
-            <label for="title_2">
-              <input type="radio" id="title_2" name="title" value="Q">
-              Queen
-            </label>
-          </li>
-          <li>
-            <label for="title_3">
-              <input type="radio" id="title_3" name="title" value="J">
-              Joker
-            </label>
-          </li>
-      </ul>
-    </fieldset>
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="text" id="name" name="username">
-    </p>
-    <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="email" id="mail" name="usermail">
-    </p>
-    <p>
-      <label for="pwd">
-        <span>Password: </span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="password" id="pwd" name="password">
-    </p>
-</section>
    -
    6. -
  6. それでは、フォームの 2 番目の <section> — 支払い情報に目を向けます。ここには 3 つの異なるウィジェットとそのラベルがあり、それぞれ <p> の中に含まれています。1 つ目は、クレジットカードの種類を選択するためのドロップダウンメニュー ({{htmlelement("select")}}) です。2 番目は、クレジットカード番号を入力するための tel 型の <input> 要素です。number 型を使うこともできますが、そのスピナーUIは望ましくありません。最後のものは、カードの有効期限を入力するための date 型の <input> 要素です。これは、サポートしているブラウザーでは日付選択ウィジェットが表示され、サポートしていないブラウザーでは通常のテキスト入力に戻ります。新しい入力タイプは HTML5 入力タイプで再度紹介されます。
    -
    - 前のセクションの下に次のように入力してください。 - 
    <section>
-    <h2>Payment information</h2>
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-      </label>
-      <select id="card" name="usercard">
-        <option value="visa">Visa</option>
-        <option value="mc">Mastercard</option>
-        <option value="amex">American Express</option>
-      </select>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-      <input type="tel" id="number" name="cardnumber">
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formatted as mm/dd/yyyy</em>
-      </label>
-      <input type="date" id="date" name="expiration">
-    </p>
-</section>
    -
    7. -
  7. 最後に追加するセクションはもっと単純で、フォームデータを送信するための submit タイプの {{htmlelement("button")}} のみを含みます。これをフォームの一番下に追加してください: - 
    <p> <button type="submit">Validate the payment</button> </p>
    -
    8. -
- -

完成したフォームは以下のように動作しています (GitHub でも確認できます。payment-form.html ソースを参照してライブ実行してください)。

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

あなたのスキルをテストしてみましょう!

- -

この記事はここまでですが、最も重要な情報を覚えていますか？ 先に進む前に、この情報を保持しているかどうかを確認するためのテストがあります — Test your skills: Form structure を参照してください。

- -

まとめ

- -

ウェブフォームを適切に構築するためのあらゆる知識を得ることができました。これからここで出てきた機能を見ていき、次の記事では、ユーザーから情報を集めるのに使いたくなるすべての種類のフォームウィジェットの詳細な実装について詳しく見ていきます。

- -

関連情報

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}

- -

このモジュール

- - - -

上級トピック

- - diff --git a/files/ja/learn/forms/styling_html_forms/index.html b/files/ja/learn/forms/styling_html_forms/index.html deleted file mode 100644 index 71d463f0c7..0000000000 --- a/files/ja/learn/forms/styling_html_forms/index.html +++ /dev/null @@ -1,399 +0,0 @@ ---- -title: HTML フォームへのスタイル設定 -slug: Learn/Forms/Styling_HTML_forms -tags: - - CSS - - Example - - Forms - - Guide - - HTML - - Intermediate - - Web -translation_of: Learn/Forms/Styling_web_forms ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

- -

前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。

- - - - - - - - - - - - -
前提条件: -

基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。

-
目的:フォームのスタイル設定の問題を理解し、役立つスタイル付けのテクニックを学ぶこと。
- -

なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?

- -

1995年頃に HTML 2 仕様へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。

- -

CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。

- -

いくつかのフォームウィジェットでは、コントロールをスタイル設定できるように作成し直すのは難しいですが、ユーザービリティを破綻させないよう気をつける必要はあるものの、CSS を使って多くのフォーム機能をスタイル設定できます。

- -

CSS を伴ってもすべてのウィジェットが同等に作成されるわけではありません

- -

いまだに、フォームで CSS を使用する際に困ることが存在します。この問題は、3 つのカテゴリーに分けられます。

- -

良好

- -

いくつかの要素はプラットフォーム間の問題があるとしても、ほとんど問題なくスタイルを設定できます。これらは以下の構造的な要素が含まれます:

- -
    -
  1. {{HTMLElement("form")}}
    2. -
  2. {{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}
    3. -
  3. 単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <input type="search">を除く
    4. -
  4. 複数行の {{HTMLElement("textarea")}}
    5. -
  5. ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)
    6. -
  6. {{HTMLElement("label")}}
    7. -
  7. {{HTMLElement("output")}}
    8. -
- -

不良

- -

一部の要素はほとんどスタイル設定ができず、時に CSS3 の高度な知識やトリックが必要になるかもしれません。

- -
    -
  1. チェックボックスとラジオボタン
    2. -
  2. <input type="search">
    3. -
- -

これら特殊なケースをどのように扱うかについては、HTML フォームへの高度なスタイル設定の記事で見ていきます。

- -

劣悪

- -

一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:

- - - -

これらの要素をスタイル設定するのに関して何ができるかについては、HTML フォームへの高度なスタイル設定の記事で見ていきます。

- -

これらすべてのウィジェットの主な問題は、ウィジェットの構造がとても複雑であるという事実と、(コントロールの width や margin の変更といった)基本的なスタイル設定を超えると、現在の CSS では(例えばカレンダー日付ピッカーや、選択肢のリストを表示する<select>のボタンのような)ウィジェットの細かい部分すべてにスタイルを設定できるほどの表現力がないことによります。

- -

これらのウィジェットを完全にカスタマイズしたい場合は、HTML, CSS, JavaScript を使って独自のものを作成する必要があります。それはこのコアフォームの記事の範囲を超えますが、高度な記事のカスタムウィジェットの作成方法の記事で説明します。

- -
-

注: フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 疑似要素、例えば {{cssxref('::-moz-range-track')}}がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。

-
- -

良好

- -

CSS でのスタイル設定が容易な要素は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。

- -

上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、UI 疑似クラスで扱います。

- -

この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。

- -

フォントとテキスト

- -

CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで {{cssxref("@font-face")}} も使用できます)。ただし、ブラウザーの動作にしばしば矛盾があります。デフォルトで、一部のブラウザーは親から {{cssxref("font-family")}} や {{cssxref("font-size")}} を継承しません。代わりに多くのブラウザーでは、システムのデフォルトの体裁を使用します。フォームの体裁を他のコンテンツと一致させるには、以下のルールをスタイルシートに追加するとよいでしょう:

- -
button, input, select, textarea {
-  font-family : inherit;
-  font-size   : 100%;
-}
- -

{{cssxref('inherit')}} のプロパティ値で、プロパティ値は計算された親要素のプロパティ値に一致するようになります。つまり親の値を継承します。

- -

以下のスクリーンショットで違いを示します。左側は Mac OS X の Chrome における<input type="text">, <input type="date">, {{htmlelement('select')}}, {{htmlelement('textarea')}}, <input type="submit">, <button> 要素の既定のレンダリングで、プラットフォームのデフォルトフォントスタイルを使用しています。右側は同じ要素ですが、フォントを調和させるスタイルルールを適用したものです。

- -

Form controls with default and inherited font families. 既定では, some types are serif and others are sans serif. Inheriting should change the fonts of all to the parent's font family - in this case a paragraph. Oddly, input of type submit does not inherit from the parent paragraph.

- -

既定はいろいろと変わります。継承により、フォントは親のフォントファミリーに変更されます — ここでは親コンテナのデフォルトの serif フォントです。ほぼすべてそうですが、例外として Chrome では<input type="submit"> は親段落を継承しません。むしろ、{{cssxref('font-family#Values', 'font-family: system-ui')}}を使います。これは同等な入力タイプの中で <button> 要素を使う理由です!

- -

フォームはシステムのデフォルトスタイルを使用するか、コンテンツに合うよう設計されたカスタムスタイルを使用するかについては多くの議論があります。これを決めるのは、設計者としてサイトやウェブアプリケーションを作成するあなた次第です。

- -

ボックスモデル

- -

すべてのテキストフィールドは、CSS のボックスモデルに関する全プロパティ ({{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("margin")}}、および {{cssxref("border")}}) を完全にサポートしています。ただし前述のとおり、ブラウザーがウィジェットを表示する際はシステムのデフォルトスタイルに依存します。コンテンツに対してそれらをどのように混ぜ合わせるかを決めるのは、あなた次第です。ウィジェットでネイティブのルックアンドフィールを維持したいのでしたら、ウィジェットのサイズを調和させたい場合に若干の問題に直面するでしょう。

- -

これは各ウィジェットがボーダー、パディング、マージンについて独自のルールを持っているためです。このためさまざまなウィジェットを同じサイズにしたい場合に、{{cssxref("box-sizing")}} プロパティを使用しなければなりません:

- -
input, textarea, select, button {
-  width : 150px;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
- -

下のスクリーンショットで、左の列は<input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, {{htmlelement('select')}}, {{htmlelement('textarea')}},<input type="submit">, {{htmlelement('button')}} の既定の描画、右の列は同じ要素に上のルールを使用して作成したものです。各種のウィジェットのプラットフォームのデフォルトルールと比較して、すべての要素が同じ領域を占めるようにすることが可能な点に注目してください。

- -

box model properties effect most input types.

- -

スクリーンショットで明白でないことはラジオボタンとチェックボックスコントロールが同じであるが、水平位置が {{cssxref('width')}} プロパティで与えられる 150px の中心にあることです。他のブラウザーではウィジェットを中心揃えにしませんが、割り当てられたスペースに付着させます。

- -

legend 配置

- -

{{HTMLElement("legend")}} 要素はポジショニングを除いて、スタイル設定の問題はありません。既定では、それは親 {{HTMLElement("fieldset")}} の上ボーダーの前面に、左上の隅の近くに配置されます。これを他の場所、例えば fieldset内のどこかや、左下の隅に配置するには、配置に頼る必要があります。

- -

下記の例を見てください:

- -

{{EmbedGHLiveSample("learning-area/html/forms/native-form-widgets/positioned-legend.html", '100%', 400)}}

- -

この方法で legend を配置するには、次の CSS を使います(簡単のため他の宣言は削除しています):

- -
fieldset {
-  position: relative;
-}
-
-legend {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
- -

<fieldset> も配置される必要があり、<legend> がそれに合わせて位置が決まるように (そうでなければ <legend> は <body>に合わせて位置決めされます)

- -

{{HTMLElement("legend")}} 要素はアクセシビリティのためとても重要です — これはアシスト技術により fieldset 内の各フォーム要素のラベルとして話されます — が、上のようなテクニックの使用は良いです。legend コンテンツは同じ方法で話されます; 単に見た目の位置が変更されます。

- -
-

注: <legend>の位置決めに役立つ{{cssxref("transform")}}プロパティも使用できますが、例えばa transform: translateY();を使って配置するとき、移動はするものの <fieldset> の枠に劣悪なギャップができて、除去が困難です。

-
- -

特定のスタイル設定の例

- -

HTML フォームにスタイルを設定する方法の具体例を見ていきましょう。以下のような "はがき" 風の連絡フォームを作成します。完成バージョンはこちら。

- -

この例に従うには、postcard-start.html ファイルをコピーして、次のやり方に従ってください。

- -

HTML

- -

HTML は、ガイドの最初の記事で使用したものより少しだけ複雑です。いくつか ID やタイトルを追加しています。

- -
<form>
- <h1>to: Mozilla</h1>
-
-  <div id="from">
-    <label for="name">from:</label>
-    <input type="text" id="name" name="user_name">
-  </div>
-
-  <div id="reply">
-    <label for="mail">reply:</label>
-    <input type="email" id="mail" name="user_email">
-  </div>
-
-  <div id="message">
-    <label for="msg">Your message:</label>
-    <textarea id="msg" name="user_message"></textarea>
-  </div>
-
-  <div class="button">
-    <button type="submit">Send your message</button>
-  </div>
-</form>
- -

上記のコードを HTML の body に追加します。

- -

アセットを揃える

- -

ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:

- -
    -
  1. はがきの背景 — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。
    2. -
  2. タイプライター風フォント: fontsquirrel.com の "Secret Typewriter"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
    3. -
  3. 手書き風フォント: fontsquirrel.com の "Journal"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
    4. -
- -

始める前にフォントの処理が必要です:

- -
    -
  1. fontsquirrel Webfont Generator に移動します。
    2. -
  2. フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。
    3. -
  3. zip ファイルを展開します。
    4. -
  4. 展開した中身には 2 つの .woff ファイルと 2 つの .woff2 ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は Web fonts の記事を見てください。
    5. -
- -

CSS

- -

ここから例の CSS を見ていきましょう。{{htmlelement("style")}} 要素の中にすべてのコードブロックを一つ一つ追加します。

- -

全体レイアウト

- -

まず、{{cssxref("@font-face")}} ルールと、すべての{{HTMLElement("body")}} と {{HTMLElement("form")}} 要素に設定するスタイルを定義して準備します。fontsquirrel 出力が上記で述べたものと異なる場合、stylesheet.css ファイル内にダウンロード済みの webfont キットの中から正しい @font-face ブロックを見つけることができます(下記の @font-face ブロックをそれで置換し、パスをフォントファイルのものに更新する必要があります):

- -
@font-face {
-    font-family: 'handwriting';
-    src: url('fonts/journal-webfont.woff2') format('woff2'),
-         url('fonts/journal-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'typewriter';
-    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
-         url('fonts/veteran_typewriter-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-body {
-  font  : 1.3rem sans-serif;
-  padding : 0.5em;
-  margin  : 0;
-  background : #222;
-}
-
-form {
-  position : relative;
-  width  : 740px;
-  height : 498px;
-  margin : 0 auto;
-  padding: 1em;
-  box-sizing: border-box;
-  background : #FFF url(background.jpg);
-
-  /* we create our grid */
-  display  : grid;
-  grid-gap : 20px;
-  grid-template-columns : repeat(2, 1fr);
-  grid-template-rows    : 10em 1em 1em 1em;
-}
- -

注意として、フォームをレイアウトするのに CSS Grid と Flexbox を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:

- -
h1 {
-  font : 1em "typewriter", monospace;
-  align-self : end;
-}
-
-#message {
-   grid-row: 1 / 5;
-}
-
-#from, #reply {
-   display: flex;
-}
- -

ラベルとコントロール

- -

そして、フォーム要素自体に対するスタイル設定を始めます。まずは、{{HTMLElement("label")}} に適切なフォントを割り当てましょう。

- -
label {
-  font : .8em "typewriter", sans-serif;
-}
- -

テキストフィールドには、共通のルールがいくつか必要です。{{cssxref("border")}} や {{cssxref("background")}} の削除と {{cssxref("padding")}} や {{cssxref("margin")}} の再定義を行います。

- -
input, textarea {
-  font    : 1.4em/1.5em "handwriting", cursive, sans-serif;
-  border  : none;
-  padding : 0 10px;
-  margin  : 0;
-  width   : 80%;
-  background : none;
-}
- -

これらフィールドのひとつがフォーカスを得たときに、ライトグレー色で透過する背景で強調します。一部のブラウザーで付加されるデフォルトのフォーカス強調を取り除くため、{{cssxref("outline")}} プロパティを追加することが重要ですので注意してください。

- -
input:focus, textarea:focus {
-  background   : rgba(0,0,0,.1);
-  border-radius: 5px;
-}
- -

テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。

- -

textareaの微調整

- -

{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように resize プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が auto であるブラウザーと scroll であるブラウザーが存在します。この例では、すべてのブラウザーが auto になるようにするのがよいでしょう。

- -
textarea {
-  display : block;
-
-  padding : 10px;
-  margin  : 10px 0 0 -10px;
-  width   : 100%;
-  height  : 90%;
-
-  border-right: 1px solid;
-
-  /* resize  : none; */
-  overflow: auto;
-}
- -

送信ボタンにスタイル設定する

- -

{{HTMLElement("button")}} 要素は、CSS によってより便利になります。疑似要素を含めて、行いたいことが何でもできます!

- -
button {
-  padding      : 5px;
-  font         : bold .6em sans-serif;
-  border       : 2px solid #333;
-  border-radius: 5px;
-  background   : none;
-  cursor       : pointer;
-  transform    : rotate(-1.5deg);
-}
-
-button:after {
-  content      : " >>>";
-}
-
-button:hover,
-button:focus {
-  outline     : none;
-  background  : #000;
-  color       : #FFF;
-}
- -

最終結果

- -

これでよし! フォームは次のようになるでしょう:

- -

- -
-

注: 例が期待どおり動かず、われわれのバージョンを確認したい場合、GitHub にあります — ライブ版を見てください (ソースコードも見てください)。

-
- -

スキルを試しましょう！​

- -

この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——スキルテスト：スタイリングの基本をご覧ください。

- -

まとめ

- -

ご覧いただいたとおり、テキストフィールドとボタンだけでフォームを作成する限りでは、CSS を使用したスタイル設定は容易です。次の記事では、"不良" や "劣悪" カテゴリに入っているウィジェットの扱い方を見ていきます。

- -

{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

- -

このモジュール

- -

E

- - - -

上級トピック

- -

セクション

- - diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html new file mode 100644 index 0000000000..71d463f0c7 --- /dev/null +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -0,0 +1,399 @@ +--- +title: HTML フォームへのスタイル設定 +slug: Learn/Forms/Styling_HTML_forms +tags: + - CSS + - Example + - Forms + - Guide + - HTML + - Intermediate + - Web +translation_of: Learn/Forms/Styling_web_forms +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

+ +

前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する CSS の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。

+ + + + + + + + + + + + +
前提条件: +

基本的なコンピューターリテラシーと、HTML と CSS の基本的な理解。

+
目的:フォームのスタイル設定の問題を理解し、役立つスタイル付けのテクニックを学ぶこと。
+ +

なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?

+ +

1995年頃に HTML 2 仕様へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。

+ +

CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。

+ +

いくつかのフォームウィジェットでは、コントロールをスタイル設定できるように作成し直すのは難しいですが、ユーザービリティを破綻させないよう気をつける必要はあるものの、CSS を使って多くのフォーム機能をスタイル設定できます。

+ +

CSS を伴ってもすべてのウィジェットが同等に作成されるわけではありません

+ +

いまだに、フォームで CSS を使用する際に困ることが存在します。この問題は、3 つのカテゴリーに分けられます。

+ +

良好

+ +

いくつかの要素はプラットフォーム間の問題があるとしても、ほとんど問題なくスタイルを設定できます。これらは以下の構造的な要素が含まれます:

+ +
    +
  1. {{HTMLElement("form")}}
    2. +
  2. {{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}
    3. +
  3. 単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <input type="search">を除く
    4. +
  4. 複数行の {{HTMLElement("textarea")}}
    5. +
  5. ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)
    6. +
  6. {{HTMLElement("label")}}
    7. +
  7. {{HTMLElement("output")}}
    8. +
+ +

不良

+ +

一部の要素はほとんどスタイル設定ができず、時に CSS3 の高度な知識やトリックが必要になるかもしれません。

+ +
    +
  1. チェックボックスとラジオボタン
    2. +
  2. <input type="search">
    3. +
+ +

これら特殊なケースをどのように扱うかについては、HTML フォームへの高度なスタイル設定の記事で見ていきます。

+ +

劣悪

+ +

一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:

+ + + +

これらの要素をスタイル設定するのに関して何ができるかについては、HTML フォームへの高度なスタイル設定の記事で見ていきます。

+ +

これらすべてのウィジェットの主な問題は、ウィジェットの構造がとても複雑であるという事実と、(コントロールの width や margin の変更といった)基本的なスタイル設定を超えると、現在の CSS では(例えばカレンダー日付ピッカーや、選択肢のリストを表示する<select>のボタンのような)ウィジェットの細かい部分すべてにスタイルを設定できるほどの表現力がないことによります。

+ +

これらのウィジェットを完全にカスタマイズしたい場合は、HTML, CSS, JavaScript を使って独自のものを作成する必要があります。それはこのコアフォームの記事の範囲を超えますが、高度な記事のカスタムウィジェットの作成方法の記事で説明します。

+ +
+

注: フォームコントロールの内部コンポーネントにスタイル設定するプロプライエタリな CSS 疑似要素、例えば {{cssxref('::-moz-range-track')}}がありますが、これはブラウザー同士で整合していないので、これに頼るべきではありません。これについては後程でも触れます。

+
+ +

良好

+ +

CSS でのスタイル設定が容易な要素は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。

+ +

上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、UI 疑似クラスで扱います。

+ +

この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。

+ +

フォントとテキスト

+ +

CSS のフォントやテキストの機能は、任意のウィジェットで容易に使用できます (また、フォームウィジェットで {{cssxref("@font-face")}} も使用できます)。ただし、ブラウザーの動作にしばしば矛盾があります。デフォルトで、一部のブラウザーは親から {{cssxref("font-family")}} や {{cssxref("font-size")}} を継承しません。代わりに多くのブラウザーでは、システムのデフォルトの体裁を使用します。フォームの体裁を他のコンテンツと一致させるには、以下のルールをスタイルシートに追加するとよいでしょう:

+ +
button, input, select, textarea {
+  font-family : inherit;
+  font-size   : 100%;
+}
+ +

{{cssxref('inherit')}} のプロパティ値で、プロパティ値は計算された親要素のプロパティ値に一致するようになります。つまり親の値を継承します。

+ +

以下のスクリーンショットで違いを示します。左側は Mac OS X の Chrome における<input type="text">, <input type="date">, {{htmlelement('select')}}, {{htmlelement('textarea')}}, <input type="submit">, <button> 要素の既定のレンダリングで、プラットフォームのデフォルトフォントスタイルを使用しています。右側は同じ要素ですが、フォントを調和させるスタイルルールを適用したものです。

+ +

Form controls with default and inherited font families. 既定では, some types are serif and others are sans serif. Inheriting should change the fonts of all to the parent's font family - in this case a paragraph. Oddly, input of type submit does not inherit from the parent paragraph.

+ +

既定はいろいろと変わります。継承により、フォントは親のフォントファミリーに変更されます — ここでは親コンテナのデフォルトの serif フォントです。ほぼすべてそうですが、例外として Chrome では<input type="submit"> は親段落を継承しません。むしろ、{{cssxref('font-family#Values', 'font-family: system-ui')}}を使います。これは同等な入力タイプの中で <button> 要素を使う理由です!

+ +

フォームはシステムのデフォルトスタイルを使用するか、コンテンツに合うよう設計されたカスタムスタイルを使用するかについては多くの議論があります。これを決めるのは、設計者としてサイトやウェブアプリケーションを作成するあなた次第です。

+ +

ボックスモデル

+ +

すべてのテキストフィールドは、CSS のボックスモデルに関する全プロパティ ({{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("margin")}}、および {{cssxref("border")}}) を完全にサポートしています。ただし前述のとおり、ブラウザーがウィジェットを表示する際はシステムのデフォルトスタイルに依存します。コンテンツに対してそれらをどのように混ぜ合わせるかを決めるのは、あなた次第です。ウィジェットでネイティブのルックアンドフィールを維持したいのでしたら、ウィジェットのサイズを調和させたい場合に若干の問題に直面するでしょう。

+ +

これは各ウィジェットがボーダー、パディング、マージンについて独自のルールを持っているためです。このためさまざまなウィジェットを同じサイズにしたい場合に、{{cssxref("box-sizing")}} プロパティを使用しなければなりません:

+ +
input, textarea, select, button {
+  width : 150px;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+ +

下のスクリーンショットで、左の列は<input type="radio">, <input type="checkbox">, <input type="range">, <input type="text">, <input type="date"> input, {{htmlelement('select')}}, {{htmlelement('textarea')}},<input type="submit">, {{htmlelement('button')}} の既定の描画、右の列は同じ要素に上のルールを使用して作成したものです。各種のウィジェットのプラットフォームのデフォルトルールと比較して、すべての要素が同じ領域を占めるようにすることが可能な点に注目してください。

+ +

box model properties effect most input types.

+ +

スクリーンショットで明白でないことはラジオボタンとチェックボックスコントロールが同じであるが、水平位置が {{cssxref('width')}} プロパティで与えられる 150px の中心にあることです。他のブラウザーではウィジェットを中心揃えにしませんが、割り当てられたスペースに付着させます。

+ +

legend 配置

+ +

{{HTMLElement("legend")}} 要素はポジショニングを除いて、スタイル設定の問題はありません。既定では、それは親 {{HTMLElement("fieldset")}} の上ボーダーの前面に、左上の隅の近くに配置されます。これを他の場所、例えば fieldset内のどこかや、左下の隅に配置するには、配置に頼る必要があります。

+ +

下記の例を見てください:

+ +

{{EmbedGHLiveSample("learning-area/html/forms/native-form-widgets/positioned-legend.html", '100%', 400)}}

+ +

この方法で legend を配置するには、次の CSS を使います(簡単のため他の宣言は削除しています):

+ +
fieldset {
+  position: relative;
+}
+
+legend {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+ +

<fieldset> も配置される必要があり、<legend> がそれに合わせて位置が決まるように (そうでなければ <legend> は <body>に合わせて位置決めされます)

+ +

{{HTMLElement("legend")}} 要素はアクセシビリティのためとても重要です — これはアシスト技術により fieldset 内の各フォーム要素のラベルとして話されます — が、上のようなテクニックの使用は良いです。legend コンテンツは同じ方法で話されます; 単に見た目の位置が変更されます。

+ +
+

注: <legend>の位置決めに役立つ{{cssxref("transform")}}プロパティも使用できますが、例えばa transform: translateY();を使って配置するとき、移動はするものの <fieldset> の枠に劣悪なギャップができて、除去が困難です。

+
+ +

特定のスタイル設定の例

+ +

HTML フォームにスタイルを設定する方法の具体例を見ていきましょう。以下のような "はがき" 風の連絡フォームを作成します。完成バージョンはこちら。

+ +

この例に従うには、postcard-start.html ファイルをコピーして、次のやり方に従ってください。

+ +

HTML

+ +

HTML は、ガイドの最初の記事で使用したものより少しだけ複雑です。いくつか ID やタイトルを追加しています。

+ +
<form>
+ <h1>to: Mozilla</h1>
+
+  <div id="from">
+    <label for="name">from:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
+
+  <div id="reply">
+    <label for="mail">reply:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
+
+  <div id="message">
+    <label for="msg">Your message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
+
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+ +

上記のコードを HTML の body に追加します。

+ +

アセットを揃える

+ +

ここからがおもしろいところです! コードを書き始める前に、ここでは 3 つの追加要素が必要です:

+ +
    +
  1. はがきの背景 — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。
    2. +
  2. タイプライター風フォント: fontsquirrel.com の "Secret Typewriter"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
    3. +
  3. 手書き風フォント: fontsquirrel.com の "Journal"  — TTF ファイルを上記と同じディレクトリーにダウンロードします。
    4. +
+ +

始める前にフォントの処理が必要です:

+ +
    +
  1. fontsquirrel Webfont Generator に移動します。
    2. +
  2. フォームを使って、両方のフォントファイルをアップロードして webfont キットを生成します。キットをコンピューターにダウンロードします。
    3. +
  3. zip ファイルを展開します。
    4. +
  4. 展開した中身には 2 つの .woff ファイルと 2 つの .woff2 ファイルがあります。このファイルを、前と同じ fonts というディレクトリーにコピーします。各フォントの 2 つのファイルはブラウザー互換性を最大化するのに使います; より詳しい情報は Web fonts の記事を見てください。
    5. +
+ +

CSS

+ +

ここから例の CSS を見ていきましょう。{{htmlelement("style")}} 要素の中にすべてのコードブロックを一つ一つ追加します。

+ +

全体レイアウト

+ +

まず、{{cssxref("@font-face")}} ルールと、すべての{{HTMLElement("body")}} と {{HTMLElement("form")}} 要素に設定するスタイルを定義して準備します。fontsquirrel 出力が上記で述べたものと異なる場合、stylesheet.css ファイル内にダウンロード済みの webfont キットの中から正しい @font-face ブロックを見つけることができます(下記の @font-face ブロックをそれで置換し、パスをフォントファイルのものに更新する必要があります):

+ +
@font-face {
+    font-family: 'handwriting';
+    src: url('fonts/journal-webfont.woff2') format('woff2'),
+         url('fonts/journal-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'typewriter';
+    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
+         url('fonts/veteran_typewriter-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+
+body {
+  font  : 1.3rem sans-serif;
+  padding : 0.5em;
+  margin  : 0;
+  background : #222;
+}
+
+form {
+  position : relative;
+  width  : 740px;
+  height : 498px;
+  margin : 0 auto;
+  padding: 1em;
+  box-sizing: border-box;
+  background : #FFF url(background.jpg);
+
+  /* we create our grid */
+  display  : grid;
+  grid-gap : 20px;
+  grid-template-columns : repeat(2, 1fr);
+  grid-template-rows    : 10em 1em 1em 1em;
+}
+ +

注意として、フォームをレイアウトするのに CSS Grid と Flexbox を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:

+ +
h1 {
+  font : 1em "typewriter", monospace;
+  align-self : end;
+}
+
+#message {
+   grid-row: 1 / 5;
+}
+
+#from, #reply {
+   display: flex;
+}
+ +

ラベルとコントロール

+ +

そして、フォーム要素自体に対するスタイル設定を始めます。まずは、{{HTMLElement("label")}} に適切なフォントを割り当てましょう。

+ +
label {
+  font : .8em "typewriter", sans-serif;
+}
+ +

テキストフィールドには、共通のルールがいくつか必要です。{{cssxref("border")}} や {{cssxref("background")}} の削除と {{cssxref("padding")}} や {{cssxref("margin")}} の再定義を行います。

+ +
input, textarea {
+  font    : 1.4em/1.5em "handwriting", cursive, sans-serif;
+  border  : none;
+  padding : 0 10px;
+  margin  : 0;
+  width   : 80%;
+  background : none;
+}
+ +

これらフィールドのひとつがフォーカスを得たときに、ライトグレー色で透過する背景で強調します。一部のブラウザーで付加されるデフォルトのフォーカス強調を取り除くため、{{cssxref("outline")}} プロパティを追加することが重要ですので注意してください。

+ +
input:focus, textarea:focus {
+  background   : rgba(0,0,0,.1);
+  border-radius: 5px;
+}
+ +

テキストフィールドのスタイル設定が完了して、次は単一行および複数行のテキストフィールドの表示が同じになるよう調整しなければなりません。これは、一般的にこれらのデフォルト表示が同じでないためです。

+ +

textareaの微調整

+ +

{{HTMLElement("textarea")}} 要素はデフォルトでブロック要素としてレンダリングされるようにします。ここで重要なことは、{{cssxref("resize")}} プロパティと {{cssxref("overflow")}} プロパティの 2 つです。ここでは固定サイズでデザインしているため、ユーザーが複数行のテキストフィールドをリサイズできないように resize プロパティを使用します。{{cssxref("overflow")}} プロパティは、ブラウザー間でのフィールドの一貫性を向上させるために使用します。これのデフォルト値が auto であるブラウザーと scroll であるブラウザーが存在します。この例では、すべてのブラウザーが auto になるようにするのがよいでしょう。

+ +
textarea {
+  display : block;
+
+  padding : 10px;
+  margin  : 10px 0 0 -10px;
+  width   : 100%;
+  height  : 90%;
+
+  border-right: 1px solid;
+
+  /* resize  : none; */
+  overflow: auto;
+}
+ +

送信ボタンにスタイル設定する

+ +

{{HTMLElement("button")}} 要素は、CSS によってより便利になります。疑似要素を含めて、行いたいことが何でもできます!

+ +
button {
+  padding      : 5px;
+  font         : bold .6em sans-serif;
+  border       : 2px solid #333;
+  border-radius: 5px;
+  background   : none;
+  cursor       : pointer;
+  transform    : rotate(-1.5deg);
+}
+
+button:after {
+  content      : " >>>";
+}
+
+button:hover,
+button:focus {
+  outline     : none;
+  background  : #000;
+  color       : #FFF;
+}
+ +

最終結果

+ +

これでよし! フォームは次のようになるでしょう:

+ +

+ +
+

注: 例が期待どおり動かず、われわれのバージョンを確認したい場合、GitHub にあります — ライブ版を見てください (ソースコードも見てください)。

+
+ +

スキルを試しましょう！​

+ +

この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか？次に進む前に、テストによって知識の定着を試すことができます——スキルテスト：スタイリングの基本をご覧ください。

+ +

まとめ

+ +

ご覧いただいたとおり、テキストフィールドとボタンだけでフォームを作成する限りでは、CSS を使用したスタイル設定は容易です。次の記事では、"不良" や "劣悪" カテゴリに入っているウィジェットの扱い方を見ていきます。

+ +

{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}

+ +

このモジュール

+ +

E

+ + + +

上級トピック

+ +

セクション

+ + diff --git a/files/ja/learn/forms/the_native_form_widgets/index.html b/files/ja/learn/forms/the_native_form_widgets/index.html deleted file mode 100644 index f0ddcdc09d..0000000000 --- a/files/ja/learn/forms/the_native_form_widgets/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: 基本的なネイティブフォームコントロール -slug: Learn/Forms/The_native_form_widgets -tags: - - Example - - Forms - - Guide - - HTML - - Intermediate - - Web -translation_of: Learn/Forms/Basic_native_form_controls ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}
- -

直前の記事では、機能的なウェブフォームの例をマークアップし、いくつかのフォームコントロールとよくある構造要素を導入し、アクセシビリティのベストプラクティスを見てきました。次にさまざまなフォームコントロールやウィジェットの機能を詳しく見ていきます — 色々な種類のデータを集めるのにどんなオプションが使えるのかを見ていきます。とりわけこの記事では、ウェブの初期からある全てのブラウザーで利用できる、オリジナルのフォームコントロールを見ていきます。

- - - - - - - - - - - - -
前提条件:基本的なコンピューターリテラシーと、基本的な HTML の理解。
目的:データを収集するためにブラウザーで使用できるネイティブフォームウィジェットの種類と、それらを HTML を使用して実装する方法を理解する。
- -

{{HTMLelement('form')}}, {{HTMLelement('fieldset')}}, {{HTMLelement('legend')}}, {{HTMLelement('textarea')}}, {{HTMLelement('label')}}, {{HTMLelement('button')}},  {{HTMLelement('input')}}といったフォーム要素については既に見てきました。この記事では次を網羅します:

- - - -
-

注: この記事で説明されている機能のほとんどは、ブラウザー間で幅広くサポートされています。これに対する例外に注意しましょう。より正確な詳細が必要な場合は、HTML フォーム要素のリファレンス、特に広範囲にわたる <input> 型の参照を参照してください。

-
- -

テキスト入力フィールド

- -

テキスト {{htmlelement("input", "入力")}} フィールドは最も基本的なフォームウィジェットです。これらはユーザーがあらゆる種類のデータを入力できるとても便利な方法です。

- -
-

注: HTML フォームのテキストフィールドは単純なプレーンテキストの入力コントロールです。つまり、これらを使ってリッチエディット (太字、斜体など) を実行することはできません。見かけるすべてのリッチテキストエディタは、HTML、CSS、および JavaScript で作成されたカスタムウィジェットです。

-
- -

すべてのテキストフィールドに共通する動作があります:

- - - -
-

注: {{htmlelement("input")}} 要素は、type 属性によってさまざまなフォームとなるため、、HTML要素の中でも特別です。単一行のテキストフィールド、テキスト入力のないコントロール、時間と日付のコントロール、チェックボックス、カラーピッカー、ボタンといったテキスト入力のないコントロールなど、ほとんどのタイプのフォームウィジェットの作成に使用されます。

-
- -

単一行のテキストフィールド

- -

単一行のテキストフィールドは、{{htmlattrxref("type","input")}} 属性値が text に設定されている {{HTMLElement("input")}} 要素を使用するか、{{htmlattrxref("type","input")}} 属性を指定しない場合( text がデフォルト値になり)に作成されます。{{htmlattrxref("type","input")}} 属性に指定した値がブラウザーに認識されない場合 (たとえば type="color" を指定してブラウザーがネイティブの色ピッカーをサポートしていない場合)、この属性の値のテキストは代替値になります。

- -
-

注: GitHub の single-line-text-fields.html に、すべての単一行テキストフィールドタイプの例があります (こちらも参照してください)。

-
- -

これは基本的な単一行のテキストフィールドの例です。

- -
<input type="text" id="comment" name="comment" value="I'm a text field">
- -

単一行のテキストフィールドは、ひとつだけ厳密な制約があります: 改行を含むテキストを入力した場合、ブラウザーはデータを送信する前に改行を取り除きます。

- -

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたテキスト入力を示しています。

- -

Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.

- -
-

HTML5 では {{htmlattrxref("type","input")}} 属性に専用の値を追加することで、基本的な単一行のテキストフィールドを拡張しています。これらの値もやはり {{HTMLElement("input")}} 要素を単一行のテキストフィールドにしますが、フィールドに対して追加の制約や機能を付加します。

-
- -

パスワードフィールド

- -

このタイプのフィールドは、{{htmlattrxref("type","input")}} 属性の値 password を使用して設定できます:

- -
<input type="password" id="pwd" name="pwd">
- -

password の値は入力したテキストに対する特別な制約は付加しませんが、フィールドの値を隠します(例、ドットやアスタリスク)ので読むことができません。

- -

これはユーザーインターフェイスの機能でしかないことに注意してください。テキストは JavaScript を使用してあなた自身でエンコードしなければ、平文で送信されてしまい、セキュリティには良くありません — 悪い組織がデータを遮ってパスワードや、クレジットカードデータや、送信したあらゆるものを盗むことがあります。ユーザーからこれを保護するためにはフォームを含むあらゆるページをセキュア通信でホストし (つまり https:// ... アドレスにて) 、データ送信前に暗号化することです。

- -

最近のブラウザーは、安全でない接続を介してフォームデータを送信することによるセキュリティへの影響を認識しており、ユーザーが安全でないフォームを使用しないように警告を実装しています。Firefox が実装しているものの詳細については、安全でないパスワードをご覧ください。

- -

隠しコンテンツ

- -

もう１つのオリジナルなテキストコントロールは hidden 入力タイプです。これは他のフォームデータとともにサーバー送信されるがユーザーからは見えないデータを持つのに使われています — 例えば命令を発行するときにサーバーにタイムスタンプを送りたい場合。これは隠れているので、ユーザーが見ることも、意図せずに値を編集することもなく、フォーカスを得ることもないしスクリーンリーダーが気づくこともありません。

- -
<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
-
- -

このような要素を作成する場合は、name 属性と value 属性の設定が必要です。この値は JavaScript にて動的にセットできます。hidden 入力タイプには関連したラベルはありません。

- -

その他のテキストタイプ、{{HTMLElement("input/search", "search")}}, {{HTMLElement("input/url", "url")}}, と{{HTMLElement("input/tel", "tel")}}, は HTML5 で追加されました。これは次のチュートリアルの「HTML5 入力タイプ」にて網羅されます。

- -

チェック可能アイテム:チェックボックスとラジオボタン

- -

チェック可能アイテムは、そのものや、関連したラベルをクリックすることで状態を変更できるコントロールです。チェック可能アイテムは 2 種類あります: チェックボックスとラジオボタンです。どちらもデフォルトでチェックするかを示すために、checked 属性を使用します。

- -

これらのウィジェットは、他のフォームウィジェットと同じようには動作しない点が特筆されます。ほとんどのフォームウィジェットではフォームを送信すると、name 属性を持つすべてのウィジェットは値がなくても送信します。チェック可能アイテムでは、それらがチェックされている場合にのみ値を送信します。チェックされていない場合は、name も含めて何も送信しません。チェックされているが値がない場合、name が on という値で送信されます。

- -
-

注: このセクションの例は、checkable-items.html として GitHub にあります (こちらも参照してください)。

-
- -

最大限のユーザービリティ/アクセシビリティを実現するために、関連項目の各リストを {{htmlelement("fieldset")}} で囲み、リストの全体的な説明を示す {{htmlelement("legend")}} で囲むことをお勧めします。{{htmlelement("label")}}/{{htmlelement("input")}} 要素の個々のペアは、それぞれ独自のリスト項目 (または同様のもの) に含める必要があります。関連した {{htmlelement('label')}} はラジオボタンやチェックボックスの直後に、{{htmlelement("legend")}}の中身にラジオボタンやチェックボックスのグループの説明が置かれます。これは上の例に示されています。

- -

チェックボックス

- -

チェックボックスは、type 属性を {{HTMLElement("input/checkbox", "checkbox")}} に設定した {{HTMLElement("input")}} 要素で作成します。

- -
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
- -

checked 属性を含んだチェックボックスはページ読み込み時に自動的にチェックされます。チェックボックスまたはその関連ラベルをチェックするとチェックボックスのオン/オフがトグルされます。

- -

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効にされたチェックボックスを示しています。

- -

Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

- -
-

注: checked 属性のあるあらゆるチェックボックスやラジオボタンには、チェックされていない場合でも、対応する {{cssxref(':default')}} 仮想クラスがあります。現在チェックされているものには{{cssxref(':checked')}} 仮想クラスがあります。

-
- -

チェックボックスのオンオフ性質により、チェックボックスは、規定のチェックボックスを拡張してトグルスイッチのように見えるボタンを作っている開発者やデザイナーにとって、トグルボタンとして考えられます。ここで動作する例を 見ることができます(ソースコードも見られます)。

- -

ラジオボタン

- -

ラジオボタンは、{{htmlattrxref("type","input")}} 属性を radio に設定した {{HTMLElement("input")}} 要素で作成します。

- -
<input type="radio" checked id="soup" name="meal">
- -

いくつかのラジオボタンをまとめることができます。{{htmlattrxref("name","input")}} 属性で同じ値を共有すると、それらのラジオボタンは同じボタングループに属するとみなされます。グループ内でボタンは同時に 1 つだけチェックできます。つまり、あるラジオボタンをチェックすると、他のラジオボタンは自動的にチェックが外れます。フォームを送信するときは、チェックしているラジオボタンのみの値を送信します。何もチェックしていない場合はラジオボタンの集まり全体が未知の状態であるとみなし、フォーム送信時は値を送信しません。

- -
<fieldset>
-  <legend>What is your favorite meal?</legend>
-  <ul>
-    <li>
-      <label for="soup">Soup</label>
-      <input type="radio" checked id="soup" name="meal" value="soup">
-    </li>
-    <li>
-      <label for="curry">Curry</label>
-      <input type="radio" id="curry" name="meal" value="curry">
-    </li>
-    <li>
-      <label for="pizza">Pizza</label>
-      <input type="radio" id="pizza" name="meal" value="pizza">
-    </li>
-  </ul>
-</fieldset>
- -

下記のスクリーンショットは macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、チェックなしとチェックされたラジオボタン、フォーカスされた、また無効でチェックなしとチェックされたラジオボタンを示しています。

- -

Radio buttons on Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

- -

ボタン

- -

ラジオボタンはその名に反して、実際のボタンではありません。実際のボタンを見てみましょう! ボタンを生成するには、3 種類の入力タイプがあります:

- -
-
{{原語併記("送信", "Submit")}}
-
フォームデータをサーバーに送信します。{{HTMLElement("button")}} 要素の場合、type 属性 (または type の無効な値) を省略すると、送信ボタンが表示されます。
-
{{原語併記("リセット", "Reset")}}
-
すべてのフォームウィジェットをデフォルト値にリセットします。
-
button
-
自動的な効果のないボタンで、JavaScript コードを用いてカスタマイズできるもの。
-
- -

それから、{{htmlelement("button")}} 要素それ自体もあります。これは値が submit、reset または button である type 属性をとり、上記の 3 つの <input> 種別を模倣できます。この 2 つの主な違いは実際の <button> 要素の方が多くのスタイル設定できることです。

- -
-

注: image 入力タイプもボタンとしてレンダリングされます。それはあとで見ます。

-
- -
-

注: このセクションの例は button-examples.html として GitHub にあります (こちらも参照してください)。

-
- -

ボタンは {{HTMLElement("button")}} 要素か {{HTMLElement("input")}} 要素で作成します。どの種類のボタンを表示するかを指定するのは、{{htmlattrxref("type","input")}} 属性の値です:

- -

送信

- -
<button type="submit">
-    This a <br><strong>submit button</strong>
-</button>
-
-<input type="submit" value="This is a submit button">
- -

リセット

- -
<button type="reset">
-    This a <br><strong>reset button</strong>
-</button>
-
-<input type="reset" value="This is a reset button">
- -

無名

- -
<button type="button">
-    This an <br><strong>anonymous button</strong>
-</button>
-
-<input type="button" value="This is an anonymous button">
- -

ボタンは {{HTMLElement("button")}} 要素でも {{HTMLElement("input")}} 要素でも、常に同じ動作になります。上記のサンプルでわかるように、{{HTMLElement("button")}} 要素はラベルとして HTML コンテンツを使用できて、これは開始と終了の<button>タグの間に挿入されます。一方で{{HTMLElement("input")}} 要素は空要素です。つまり value 属性の中にラベルが挿入され、このためプレーンテキストのコンテンツのみ使用できます。

- -

下記の例は macOS での Firefox 71 と Safari と Windows 10 の Chrome 79 と Edge 18 にて、既定の、フォーカスされた、無効なボタンを示しています。

- -

Default, focused and disabled button input types in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10

- -

画像ボタン

- -

画像ボタンコントロールは {{HTMLElement("img")}} 要素とまったく同じように表示されますが、ユーザーがクリックすると送信ボタン (前述) のように動作します。

- -

画像ボタンは、{{htmlattrxref("type","input")}} 属性を image に設定した {{HTMLElement("input")}} 要素で作成します。

- -

この要素は {{HTMLElement("img")}} 要素とまったく同じ属性をサポートして、さらにフォームボタンがサポートする属性もすべてサポートします。

- -
<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
- -

画像ボタンをフォームの送信に使用する際にこのウィジェットは自身の値を送信しませんが、代わりに画像上でクリックした位置の X 座標と Y 座標を送信します (座標は画像に対して相対的、つまり画像の左上隅が座標 0, 0 になります)。座標は 2 つのキーと値の組として送信されます。

- - - -

サンプルをご覧ください。フォームの画像上の座標 (123, 456) でクリックすると、 get メソッド経由で送信されて、以下のような値の追加された URL が送信されます:

- -
http://foo.com?pos.x=123&pos.y=456
- -

これは "hot map" を作成するためにとても便利な手段です。これらの値がどのように送信あるいは取得されるかについては、フォームデータの送信の記事で詳しく説明します。

- -

ファイルピッカー

- -

初期のHTMLであった最後の <input> タイプがあります: ファイル入力タイプです。フォームで、ファイルをサーバーに送信できます。この特定操作については以下の記事で詳しく説明します: フォームデータの送信。ファイルピッカーウィジェットで、ユーザーは送信するファイルを 1 つ以上選択できます。

- -

ファイルピッカーウィジェットを作成するには、{{htmlattrxref("type","input")}} 属性を file に設定した {{HTMLElement("input")}} 要素を使用します。{{htmlattrxref("accept","input")}} 属性を使用して、受け入れるファイルの種類を制限できます。加えて、ユーザーが複数のファイルを選択できるようにしたい場合は、{{htmlattrxref("multiple","input")}} 属性を付加します。

- -

例

- -

以下の例では、画像ファイルを要求するファイルピッカーを作成しています。ユーザーは複数のファイルを指定できます。

- -
<input type="file" name="file" id="file" accept="image/*" multiple>
- -

いくつかのモバイルデバイスでは、ファイルピッカーは、次のようにキャプチャー情報を accept 属性に追加することで、端末のカメラやマイクでキャプチャーされた写真、動画、オーディオにアクセスできます:

- -
<input type="file" accept="image/*;capture=camera">
-<input type="file" accept="video/*;capture=camcorder">
-<input type="file" accept="audio/*;capture=microphone">
- -

共通属性

- -

フォームウィジェットを定義するために使用される要素の多くは、独自の属性をいくつか持っています。ただし、すべてのフォーム要素に共通の一連の属性があり、それによりウィジェットをある程度制御できます。共通属性のリストは以下のとおりです。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性名既定値説明
autofocusfalseこの真偽値属性を使用すると、ユーザーがページをロードするときに、たとえば別のコントロールを入力して上書きしない限り、要素に自動的に入力フォーカスするように指定できます。この属性を指定できるのは、文書内の 1 つのフォーム関連要素だけです。
disabledfalseこの真偽値属性は、ユーザーが要素と対話できないことを示します。この属性が指定されていない場合、要素はそれを含む要素 (例えば {{HTMLElement("fieldset")}}) からその設定を継承します。disabled 属性が設定されている包含要素がない場合は、その要素が有効になります。
formウィジェットが関連付けられている <form> 要素。属性の値は、同じ文書内の {{HTMLElement("form")}} 要素の id 属性でなければなりません。理論的には、フォームウィジェットを {{HTMLElement("form")}} 要素の外側に設定できます。しかし実際には、その機能をサポートするブラウザーはありません。
name要素の名前。これはフォームデータとともに送信されます。
value要素の初期値
- -

スキルをテストしましょう!

- -

この記事の最後に到着しましたが、最も大事な情報を覚えていますか？ 次に進む前に、この情報を保持しているか検証するテストがあります — Test your skills: Basic controls を見てください。

- -

まとめ

- -

上で見たように、利用可能なフォーム要素には多くの異なるタイプがあります。一度にこれらの詳細の全てを覚えておく必要はありません。詳細について調べるために好きなだけこの記事に戻ることができます 。

- -

この記事では古い入力タイプをカバーしてきました — これは HTML の初期の頃に導入されたオリジナルで、すべてのブラウザーでよくサポートされます。次のセクションでは、HTML 5 で追加された新しい type 属性の値を見ていきます。

- -

{{PreviousMenuNext("Learn/Forms/How_to_structure_a_web_form", "Learn/Forms/HTML5_input_types", "Learn/Forms")}}

- -

このモジュール

- - - -

上級トピック

- - diff --git a/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..df7bdd555e --- /dev/null +++ b/files/ja/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,133 @@ +--- +title: Web サイトの公開 +slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する +tags: + - FTP + - GitHub + - Google App Engine + - Learn + - Web + - 'l10n:priority' + - publishing + - web server + - コードスクリプティング + - 初心者 + - 学習 +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
+ +
+

サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。

+
+ +

どんな選択肢があるのか?

+ +

Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。

+ +

ホストとドメイン名を手に入れる

+ +

もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。

+ + + +

多くのプロの手による Web サイトはこんな風にして、公開されているわけです。

+ +

加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、{{Glossary("FTP", "File Transfer Protocol (FTP)")}} プログラムが必要です (詳しくは、どれくらいお金がかかるか: ソフトウェアのページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。

+ +

+ +

ホスティングとドメインを見つけるための TIPS(ヒント)

+ + + +

GitHub や Google App Engine のようなオンラインツールを利用する

+ +

特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。

+ + + +

これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。

+ +

CodePen のような、 Web ベースの IDE を用いる方法。

+ +

Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。

+ +

生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。

+ +

これらを試してみて、一番あなたに合ったものを見つけてみましょう。

+ + + +

+ +

GitHub 経由での公開

+ +

では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。

+ +
    +
  1. まず、 GitHub にサインアップして、あなたのメールアドレスを確認しましょう。
    2. +
  2. 次に ファイルを入れるためのリポジトリを作りましょう。
    3. +
  3. このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。
    + 例えば、私たちの友人である bob smith ならば、
    + bobsmith.github.io と入力することになります。
    + さらに、{{原語併記("README つきでこのリポジトリを初期化", "Initialize this repository with a README")}}をチェックして、{{原語併記("リポジトリの作成", "Create repository")}}をクリックします。
    4. +
  4. Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。
    + +
    +

    注: フォルダの中に index.html の名前のファイルがあるかを確認しましょう。

    +
    +
    5. +
  5. +

    では、あなたの Web サイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

    + +
    +

    注: あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。

    +
    +
    6. +
+ +

もっと詳しく知りたい人は GitHub Pages Help を見てください。

+ +

参考文献

+ + + +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

+ +

このモジュール

+ + diff --git "a/files/ja/learn/getting_started_with_the_web/\343\202\246\343\202\247\343\203\226\343\202\265\343\202\244\343\203\210\343\202\222\345\205\254\351\226\213\343\201\231\343\202\213/index.html" "b/files/ja/learn/getting_started_with_the_web/\343\202\246\343\202\247\343\203\226\343\202\265\343\202\244\343\203\210\343\202\222\345\205\254\351\226\213\343\201\231\343\202\213/index.html" deleted file mode 100644 index df7bdd555e..0000000000 --- "a/files/ja/learn/getting_started_with_the_web/\343\202\246\343\202\247\343\203\226\343\202\265\343\202\244\343\203\210\343\202\222\345\205\254\351\226\213\343\201\231\343\202\213/index.html" +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Web サイトの公開 -slug: Learn/Getting_started_with_the_web/ウェブサイトを公開する -tags: - - FTP - - GitHub - - Google App Engine - - Learn - - Web - - 'l10n:priority' - - publishing - - web server - - コードスクリプティング - - 初心者 - - 学習 -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
- -
-

サイトのコードやファイルの準備ができたら、そのサイトをほかの人が見つけられるように、ファイルやコードをすべてオンラインに置く必要があります。この記事では、シンプルなサンプルコードを少しの手間でネット上に公開する方法を説明します。

-
- -

どんな選択肢があるのか?

- -

Web サイトを公開するというのは簡単に語れることではありません。なぜなら、 Web サイトの公開の仕方には、さまざまな方法があるからです。この記事での私たちの目標は、そのすべての方法を記述することではありません。むしろ、我々は初心者の視点から、大まかに 3 つの手法の長所と短所をお話しし、その次に、今のところはこれでうまくいくという方法で一通りやってみます。

- -

ホストとドメイン名を手に入れる

- -

もし、あなたが公開した Web サイトのすべてをコントロールしたいと思うなら、次の 2 つに関してお金を払う必要があるでしょう。

- - - -

多くのプロの手による Web サイトはこんな風にして、公開されているわけです。

- -

加えて、あなたは、実際に Web サイトに関するファイルをサーバーに送るために、{{Glossary("FTP", "File Transfer Protocol (FTP)")}} プログラムが必要です (詳しくは、どれくらいお金がかかるか: ソフトウェアのページにて)。FTP プログラムは、プログラムごとに様々ですが、一般的に Web サーバーのホスティング会社が提供する詳細情報 (例えば、ユーザーネーム、パスワード、ホスト名) を使用してログインする必要があります。ログインすると、FTP プログラムは、あなたの pc のローカルファイルと、サーバー上のファイルを二つのウィンドウで表示します。その画面において、あなたはファイルを送ったり戻したりできます。

- -

- -

ホスティングとドメインを見つけるための TIPS(ヒント)

- - - -

GitHub や Google App Engine のようなオンラインツールを利用する

- -

特定のツールを使って、あなたの Web サイトをオンラインに公開することもできます。

- - - -

これらのツールは、多くのホスティングと違って、利用するのは無料です。しかし、使える機能はやはり限られています。

- -

CodePen のような、 Web ベースの IDE を用いる方法。

- -

Web 開発環境を真似た Web アプリはたくさんあります。それらで HTML や CSS、JavaScript を入力し、それらのコードを Web ページとしてレンダリングした結果を表示できます — すべてが 1 つのブラウザータブの中で。一般的に言って、これらのツールはとても簡単で、とても勉強になり、コードの共有に向いていて(例えば、テクニックを共有したり、別のオフィスの同僚にデバッグの助けを求める)、(基本的な機能は) 無料です。

- -

生成したページを固有のアドレスでホストします。しかしながら、基本的な機能はかなり限られたものであり、そのアプリは大抵において、アセット (画像など) のためのホスティングスペースを提供していません。

- -

これらを試してみて、一番あなたに合ったものを見つけてみましょう。

- - - -

- -

GitHub 経由での公開

- -

では、GitHub Pages 経由でどれくらい簡単にサイトを公開できるかを実際にやってみましょう。

- -
    -
  1. まず、 GitHub にサインアップして、あなたのメールアドレスを確認しましょう。
    2. -
  2. 次に ファイルを入れるためのリポジトリを作りましょう。
    3. -
  3. このページ上の、Repository name ボックスに username.github.io の形で、ユーザー名を入力しましょう。username のところに、あなたの名前が入ります。
    - 例えば、私たちの友人である bob smith ならば、
    - bobsmith.github.io と入力することになります。
    - さらに、{{原語併記("README つきでこのリポジトリを初期化", "Initialize this repository with a README")}}をチェックして、{{原語併記("リポジトリの作成", "Create repository")}}をクリックします。
    4. -
  4. Web サイトのフォルダをリポジトリの中にドラッグアンドドロップしたら、Commit changes をクリックしましょう。
    - -
    -

    注: フォルダの中に index.html の名前のファイルがあるかを確認しましょう。

    -
    -
    5. -
  5. -

    では、あなたの Web サイトをオンライン上で見るために、ブラウザーから username.github.io に移動しましょう。例えば、ユーザーネームが chrisdavidmills なら、chrisdavidmills.github.io に移動しましょう。

    - -
    -

    注: あなたの Web サイトに行けるようになるには少し時間がかかるかもしれません。すぐに行ってもダメなようなら、少し待ってからもう一度試してみましょう。

    -
    -
    6. -
- -

もっと詳しく知りたい人は GitHub Pages Help を見てください。

- -

参考文献

- - - -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}

- -

このモジュール

- - diff --git a/files/ja/learn/how_to_contribute/index.html b/files/ja/learn/how_to_contribute/index.html deleted file mode 100644 index bd269dd210..0000000000 --- a/files/ja/learn/how_to_contribute/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: MDN の学習エリアに貢献するには -slug: Learn/How_to_contribute -tags: - - Beginner - - Contribute - - Documentation - - Guide - - Learn - - MDN Meta - - 'l10n:priority' -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

あなたがこのページに初めて、あるいはたくさん検索した末に辿り着いたのなら、それはきっとあなたが MDN の学習エリアへの貢献に興味を持って下さったからでしょう。素晴らしいことです！

- -

このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、初心者かウェブ開発者か教師かによって決まります。

- -
-

メモ: 学習エリアの記事を書くためのガイドは、ウェブを学習する人に役立つ記事の書き方にあります。

-
- -

特定のタスクを探す

- -

学習エリアに貢献する共通の方法は、記事を読み、誤字を直し、改良を提案することです。GitHub repoへのサンプル追加も、何が必要か聞きたいと思って連絡頂くのも歓迎です。

- -

新しいことを学習するときに、貢献することは楽しめる良い方法です。道に迷った気になったり、質問があった場合は、Learning Area Discourse thread や IRC channel いずれも英語ベース (詳しくはページ最下部を見てください)。Chris Mills が Learning Area (学習エリア) のトピックドライバーです — 彼に直接 ping してもいいでしょう。

- -

下記の節では一般的なアイデアとして、やることの種類を挙げています。

- -

初心者の方なら

- -

すばらしい！初心者は学習エリアの中身にフィードバックを作るのに重要かつ貴重です。あなたにはこの記事のターゲット読者の一員で、われわれのチームの貴重なメンバーになりうるという独特の視点があります。実際に、記事を何かの学習に使ってつまったり、誤解を招く記事を見かけた場合、自分で修正するか、または我々が確実に修正できるように問題点を連絡することができます。

- -

次のように、貢献できるいくつかの方法があります:

- -
-
記事にタグを追加する (5分)
-
MDN のコンテンツをタグ付けするのは、 MDN に協力する最も簡単な方法です。タグによって状況にあわせた機能を提供できるようになるため、タグ付けはとても意味ある貢献です。タグ付けを始める前に、用語集の記事と学習記事の一覧をご覧ください。
-
用語集の記事を読んでレビューする (5分)
-
コンテンツを初心者の目線で見てもらう必要があります。用語集の記事に分かりにくい箇所があれば改善が必要なため、気軽に変更してください。自分には必要なスキルが無いと感じたら、私たちのメーリングリストに連絡してください。
-
用語集の記事を書く (20分)
-
これは新しいことを学ぶ最良の方法です。理解したい概念を選び、それについて学んだら、用語集の記事を書きましょう。何かを他人に説明することは、頭の中で知識を「定着」させ、物事を自分自身で良く理解できるようになり、さらに他人のために役立ちます。みんなが得をします！
-
学習記事を読んでレビューする (2時間)
-
これは用語集の記事のレビューとよく似ています（上記参照）。こういった記事は通常かなり長いため、より時間を要するだけです。
-
- -

ウェブ開発者なら

- -

素敵です！あなたの技術スキルは、初心者向けの技術的に正確なコンテンツを提供するために、まさに我々が必要としているものです。ここは MDN の特定の箇所としてウェブの学習専用であり、説明はできるだけ簡潔であり、簡潔すぎて役立たないのは避けないといけません。過度に正確であることよりも、理解できることがもっと重要です。

- -
-
用語集の記事を読んでレビューする (5分)
-
ウェブ開発者であるあなたには、私たちのコンテンツが複雑になりすぎずに技術的に正確であるかを確認していただく必要があります。必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は、私たちのメーリングリストまたは IRC channelでコンタクトしてください。
-
用語集の記事を書く (20分)
-
技術的な専門用語を明確にすることは、学習するのと、技術的に正確かつシンプルであるためのとても良い方法です。初心者からは感謝されるでしょう。注目すべき未定義の用語がたくさんあります。都合が良いものを選んでください。
-
学習記事を読んでレビューする (2時間)
-
これは用語集の記事のレビュー（上記）と同じことです。この記事は少し長い時間がかかるだけです。
-
新しい学習記事を書く (4時間以上)
-
MDN には、ウェブ技術（HTML, CSS, JavaScriptなど）についてのシンプルで直言的な記事が欠けています。また MDN にはレビューや作り直しをするべき古いコンテンツもあります。あなたのスキルの限界までふりしぼって、ウェブ技術が初心者でも使えるようにしてください。
-
練習、コードサンプル、インタラクティブな学習ツールの作成 (?時間)
-
全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、 JSFiddle や同等品でコードサンプルを作ることから、Thimble で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！
-
- -

教師なら

- -

MDN は技術的な卓越性において長い歴史がありますが、新人に概念を教える最良の方法についての理解は十分ではありません。ここは教師・教育者であるあなたを必要とするところです。私たちの教材が読者にとって優れた、実践的な学びの道筋を提供できるよう手助けできます。

- -
-
用語集の記事を読んでレビューする (15分)
-
用語集の記事を確認して、必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は私たちのメーリングリストまたは IRC channelでコンタクトしてください
-
用語集の記事を書く (1時間)
-
用語集にて、明確でシンプルな言葉の定義と、概念の基本的な説明は、初心者の要求を満たすのに重要です。教育者としての経験がすばらしい用語集の記事の作成に役立ちます。注目すべき未定義の用語がたくさんあります。都合が良いものを選んでください。
-
記事のイラストや図を描く (1時間)
-
ご存知のように、イラストはあらゆる学習コンテンツの中で有益な部分です。これは MDN でよく不足しているもので、あなたのスキルがそのエリアを違ったものにします。図示コンテンツが不足している記事を確認して、絵を作りたいものを選びます。
-
学習記事を読んでレビューする (2時間)
-
これは用語集の記事（上記）のレビューと同じことです。この記事は少し長い時間がかかるだけです。
-
新しい学習記事を書く (4時間)
-
ウェブのエコシステムとその周りの機能的なトピックについてのシンプルで直言的な記事が必要です。学習記事では知るべきことを全て網羅するよりも、教育的である必要があるため、何をどのように網羅すべきかを知っているあなたの経験は良い資産になるでしょう。
-
練習、クイズ、インタラクティブな学習ツールの作成 (?時間)
-
全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、クイズを作ることから、Thimble で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！
-
-
学習の進路を作る (?時間)
-
進歩的で理解できるチュートリアルを提供するため、コンテンツを学習進路に形付ける必要があります。既存のコンテンツを集めて、学習記事を作成するのに何がたりないか理解するのに良い方法です。
-
diff --git a/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..1a41de9469 --- /dev/null +++ b/files/ja/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,120 @@ +--- +title: Tips for Authoring Fast-loading HTML Pages +slug: Tips_for_Authoring_Fast-loading_HTML_Pages +tags: + - HTML +--- +

+


+Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. +これらの秘訣は、よく知られた知識や実験を元にしています。ウェブページの読込のパフォーマンスを向上させる助けとなる、さらなる助言をお持ちであれば、Discussion page of this articleにて提案してください。 +

最適化されたウェブページは、訪問者により素早く反応するサイトをもたらすだけでなく、ウェブサーバやインターネットへの接続負荷を軽減します。これは、大規模なサイト、あるいはニュース速報などの例外的な状況によってトラフィックが急増するサイトにとって、とても重大なことです。 +

ページの読込パフォーマンスの最適化とは、単に、低速なダイアルアップ回線の訪問者が見るであろうコンテンツを用意することではありません。高速回線向けのコンテンツについても同じくらい重要であり、最高速の回線を持つ訪問者にとってさえ、劇的な向上をもたらすことができます。 +


+

+

早く読み込まれるHTMLページを作成する秘訣

+

ページ容量を減らしましょう

+

ページ容量は、ページの読込パフォーマンスにおいて圧倒的に最重要の要因です。 +

不要な空白やコメントを除去したり、HTMLに直接書き込まれたスクリプトやCSSを外部ファイルに移すことで、ページの構造の変化は最小限で、ダウンロードのパフォーマンスを向上できます。 +

HTML Tidyのようなツールは、validなHTMLソースから、先頭の空白や余計な空行を自動的に取り除きます。そのほかのツールは、JavaScriptを、再フォーマット、あるいはソースの難読化や長い識別子を短いものへ縮めることにより、「圧縮」することができます。 +


+

+

ファイルの数をできるだけ少なくしましょう

+

一つのページ内で参照されるファイルの数を減らせば、ページのダウンロードに必要なHTTP接続の数が減ります。 +

ブラウザのキャッシュの設定によっては、CSS、JavaScriptあるいは画像ファイルのそれぞれについて、最後にダウンロードされたときから更新されているかどうかを確かめるため、サーバにIf-Modified-Sinceリクエストを送信するかもしれません。 +

ウェブページ内で参照されるファイルの数を減らすことにより、ブラウザからこれらのリクエストが送られ、それに対する返答が届くまでに必要となる時間が減ります。 +

ファイルの最終更新日時についての問い合わせに多くの時間が費やされると、ウェブページの最初の表示が遅れます。ブラウザはページのレンダリングを行う前に、CSSやJavaScriptファイルそれぞれの更新日時を問い合わせねばならないためです。 +


+

+

ドメイン検査を減らしましょう

+

分割された別々のドメイン一つ一つについてDNS検査するのは時間がかかるため、CSS、JavaScript、または画像を参照するのに用いる異なるドメインの数を減らすことで、ページ読込の時間が減ります。 +

これは必ずしも実用的であるとは限りません。しかしながら、ページにおける異なるドメインの数は、可能な限り最小で使うよう常に気をつけておくべきです。 +

+

再利用されるコンテンツをキャッシュしましょう

+

キャッシュされうるどのようなコンテンツでも、適切な期限切れまでの間、キャッシュされているかを確かめてください。 +

具体的にはLast-Modifiedヘッダに注意してください。これは効率的なページのキャッシュを可能にします。このヘッダを用いると、ロードしようとしているファイルが最後にいつ更新されたかについての情報が、ユーザ・エージェントに伝えられます。ほとんどのウェブサーバーは、静的なページ（例えば.htmlや.css）については、ファイルシステムに記録されている最終更新日時に基づき、自動的にLast-Modified headerを付加します。 +動的なページ（例えば.phpや.aspx）については、これは行われず、ヘッダは送られません。 +

従って、特に動的に生成されるページでは、この件について少し調べるだけでも有益です。多少複雑になることもありますが、通常はキャッシュされえないページへの多くのリクエストを抑えてくれるでしょう。 +

さらなる情報: +

+
  1. HTTP Conditional Get for RSS Hackers +
  2. HTTP 304: Not Modified +
  3. On HTTP Last-Modified and ETag +
+

ページの構成要素を並べ替えましょう

+

初めにページの内容をダウンロードさせることで、利用者はページ読込のさい明白に最も早い応答を得られます。 +

最初の表示に必要ないかなるCSSやJavaScriptよりも、ページの内容が第一にダウンロードされるべきです。この内容は通常は本文（htmlファイル）であり、これを圧縮することで、利用者に素早い応答を返すという恩恵が得られます。 +

どのようなDHTMLの機能も、それが実行される前にページが完全に読み込まれている必要があるので、初めは無効にしておき、読込の後になって有効にするべきです。 +


+

+

インラインスクリプトの数を減らしましょう

+

インラインスクリプト（HTMLに直接書き込まれたスクリプト）は、パーサが「インラインスクリプトはページ構造を修正する」と仮定してしまうので、ページの読込に高くつきます。一般に、インラインスクリプトわけても内容を出力するdocument.write()の利用を減らすことは、総合的なページの読込を向上させます。 +

最新のブラウザでページの内容を操作するには、document.write()に基づいた古い手法ではなく、 +最新のW3C DOMメソッドを用いましょう。 +

+

最新のCSSと妥当なマークアップを用いましょう

+

最新のCSSの利用は、マークアップの量を減らし、レイアウトに関する画像の必要性を減らすことができます。また、実質的には文章を画像にしただけで、それと同等の見た目を得られるCSSと文章よりも負担の大きい画像を、多くの場合に差し替えることができます。 +

妥当なマークアップの利用には、そのほかの利点があります。妥当なマークアップは、ブラウザがHTMLを構文解析する際に「誤り訂正」を行わせないばかりでなく、ウェブページの前処理を行うことができる他のツールを自由に利用することも可能にします。例えば、HTML Tidyは、空白や任意の終了タグを省略することができますが、深刻なマークアップの誤りのあるページでは動作するのを拒みます。 +

+

コンテンツを分割しましょう

+

ページの内容が完全にダウンロードされる前にページを表示できるように、<table>で作られたレイアウトを<div>のブロックに置き換えるか、表をより小さな表に分割しましょう。 +

次のような、深く入れ子になったtableよりも、 +

+
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+

次のような、入れ子になっていないtableやdivを使いましょう。 +

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+

画像や表のサイズを指定しましょう

+

もしブラウザが画像や表の高さか幅あるいはその両方を即座に決定できたら、内容をリフローする必要なくウェブページを表示することができるでしょう。これはページの表示を早めるだけでなく、読み込みが完了するときにページのレイアウトがうっとうしく変化するのを防ぎます。 +

画像（img）は、heightやwidthを指定されるべきです。 +

表（table）は、CSSのtable-layout: fixed規則を用い、縦列の幅をCOLやCOLGROUPタグを用いることで指定しておくべきです。 +

+

ユーザー・エージェントの必要条件を賢く選びましょう

+

ページデザインで最大の改善を達成するために、そのプロジェクトに適切なユーザー・エージェントの必要条件が特定されているかを確かめてください。 +

コンテンツが、すべてのブラウザとりわけ下位のブラウザで、１ピクセルのずれもなく同じに見えるようには要求しないでください。 +

理想的には、必要最小限の環境は、同じ標準に対応している現代的なブラウザに基づくべきです。それには次のブラウザが含まれます。すべてのプラットフォームのNetscape 7/Gecko 1.0.2+、WindowsのInternet Explorer（バージョン5.5以上）、WindowsのOpera（バージョン7以上）、Mac OS XのSafariです。 +

しかしながら、この技術文書に列挙されている秘訣の多くが、常識的な技法であることを気にとめておいてください。これらは、どのようなユーザー・エージェントにも適用されるし、あるページがブラウザの必要条件を満たしているかどうかに関係なく、どのようなページにも適用されうるのです。 +

+

ページ構造の例

+

· HTML +

+
· HEAD +
+
· LINK ...
ページの外観に必要なCSSファイル。ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないCSSは、保全のため別々のファイルにしておきましょう。 +
+
+
· SCRIPT ...
ページ読込の間に「必要」な機能のためのJavaScriptファイル。ただし、ページが読み込まれたあとでようやく動作できるDHTMLではありません。 +
·ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。 +
+
+
· BODY +
小さな塊（複数のtable / 複数のdiv）に分けられた、ページの内容。ページ全体がダウンロードされるのを待たずに表示されます。 +
+
· SCRIPT ...
DHTMLを実行するために使われうる、あらゆるスクリプト。DHTMLは通常は、ページが完全に読み込まれ、全ての必要なオブジェクトが初期化された後に、ようやく動作できます。ページ内容の前にこれらのスクリプトを読み込む必要はありません。読込の初期のページ表示を遅くするだけです。 +
ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。 +
ロールオーバー効果のために画像を用いるときは、ページ内容がダウンロードされた後に、ここでそれらを先読みしておくべきです。 +
+
+

関連リンク

+ +
+

元になった文書の情報

+
  • Author(s): Bob Clary, Technology Evangelist, Netscape Communications +
  • Last Updated Date: Published 04 Apr 2003 +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved. +
  • Note: This reprinted article was originally part of the DevEdge site. +
+
+
+
+{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML", "zh-cn": "cn/Tips_for_Authoring_Fast-loading_HTML_Pages" } ) }} diff --git a/files/ja/localization/index.html b/files/ja/localization/index.html deleted file mode 100644 index 385f9f341a..0000000000 --- a/files/ja/localization/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Localization (ローカライゼーション) -slug: Localization -tags: - - Collaborating - - Glossary - - Intro - - Localization - - WebMechanics - - ローカライズ -translation_of: Glossary/Localization ---- -

ローカライゼーション（ローカライズ）とは、ソフトウェアのユーザーインターフェイスを特定の文化に適合させるプロセスです。

- -

考慮するべき共通点は以下の通りです。

- - - -

詳細情報

- -

一般知識

- - - -

 

- -

 

diff --git a/files/ja/localizing_extension_descriptions/index.html b/files/ja/localizing_extension_descriptions/index.html deleted file mode 100644 index f4deda0606..0000000000 --- a/files/ja/localizing_extension_descriptions/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Localizing extension descriptions -slug: Localizing_extension_descriptions -tags: - - Add-ons - - Extensions - - Internationalization - - Localization ---- -

 

-

Gecko 1.9 におけるローカライズ

-

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

-

Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、em:localized プロパティを使って install.rdf ファイルに書かれます。em:localized それぞれが、情報が使われるべきロケールを示す em:locale プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。

-
<?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>TabSidebar@blueprintit.co.uk</em:id>
-    <em:localized>
-      <Description>
-        <em:locale>de-DE</em:locale>
-        <em:name>Tab Sidebar</em:name>
-        <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
-      </Description>
-    </em:localized>
-    <em:localized>
-      <Description>
-        <em:locale>es-ES</em:locale>
-        <em:name>Tab Sidebar</em:name>
-        <em:description>Muestra una vista previa de sus pestañas en su panel lateral.</em:description>
-      </Description>
-    </em:localized>
-    <em:localized>
-      <Description>
-        <em:locale>nl-NL</em:locale>
-        <em:name>Tab Sidebar</em:name>
-        <em:description>Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description>
-      </Description>
-    </em:localized>
-    <em:name>Tab Sidebar</em:name>
-    <em:description>Displays previews of your tabs in your sidebar.</em:description>
-  </Description>
-</RDF>
-
-

後で述べるメタデータはすべてこの方法でローカライズできます。em:localized プロパティによって提供されるローカライズ情報は、後述の一連のローカライズされたプロパティファイルで上書きされます。

-

あるロケールに対してどの em:localized プロパティを使用するかを選択する手順は以下のようになります。

-
    -
  1. そのロケールに完全に一致する em:locale でプロパティが提供されていた場合、それが使われます。
    2. -
  2. 部分的に一致するロケールが見つかった場合、最も一致する部分が多いロケールが使用されます。各部はダッシュで分割されます (例えば es は es-ES に一致し、その逆も同様です)。
    3. -
  3. 一致する部分の数が同じロケールが複数存在する場合は、もっとも一般的なロケールが使用されます (例えば、en-US を検索する際、en は en-GB よりも優先されます)。
    4. -
-

現在のアプリケーションロケールが検索された後、フォールバックとして en-US を検索します。

-

プロパティファイルが設定されておらず、現在のロケールや en-US に一致する em:localized プロパティが存在しない場合は、インストール定義ファイルで直接指定されたプロパティが、Gecko 1.9 以前で常に使われていたように、最後の手段として使われます。

-

Gecko 1.9 以前のローカライズ

-

Gecko 1.9 以前では、アドオン開発者は、Firefox や Thunderbird のようなツールキットベースのアプリケーションを対象とする拡張機能にローカライズされた説明を定義するためには以下のような特別な手順が必要でした。

- - -

ローカライズ可能な文字列

-

この方法でローカライズできるアドオンのメタデータを列挙します。

- -

ローカライズ可能なリスト

-

複数の値が存在する場合、設定名の後ろに数字を付けます。

-
extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME
-extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME
-extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME
-
-pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE");
-pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE");
-pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE");
-
-

この方法でローカライズできるアドオンのメタデータを列挙します。

- diff --git a/files/ja/map/index.html b/files/ja/map/index.html deleted file mode 100644 index 9ee6389df8..0000000000 --- a/files/ja/map/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Map -slug: Map ---- -

{{ SeeCompatTable() }}

- -

{{ warning("The SpiderMonkey Map implementation is a prototype and the Map API and semantics specifications are unstable. The SpiderMonkey implementation may not reflect the latest specification draft. It is subject to change anytime. It is provided as an experimental feature. Do not rely on it for production code.") }}

- -

Introduction

- -

Map オブジェクトはシンプルなキーバリューマップです。 キーとバリューにあらゆる値（オブジェクトとプリミティブ値）が使用できます。

- -

Key equality is based on the "same-value" algorithm: NaN is considered the same as NaN (even though NaN !== NaN), -0 and +0 are considered distinct (even though -0 === +0), and all other values are considered equal according to the semantics of the === operator.

- -

API

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ConstructorDescription
new Map([iterable])Returns a new Map object.  If iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays), then each of those key-value pairs will be added to the new Map.
MethodDescription
myMap.get(key)Returns the value associated to the key, or undefined if there is none.
myMap.set(key, value)Sets the value for the key in myMap. Returns undefined.
myMap.has(key)Returns a boolean asserting whether a value has been associated to the key in myMap or not
myMap.delete(key)Removes any value associated to the key. After such a call, myMap.has(key) will return false.
myMap.clear(){{ fx_minversion_inline("19") }} Removes all key/value pairs from myMap.
PropertyDescription
myMap.size -

Returns the number of key/value pairs in myMap.

- {{ fx_minversion_inline("19") }}In Firefox 18 and earlier, size was a method. In Firefox 19 and later it is a property.
- -

A Map object can iterate its elements in insertion order - a for..of loop will return an array of [key, value] for each iteration.

- -

Examples

- -
var myMap = new Map();
-
-var keyObj = {},
-    keyFunc = function () {},
-    keyString = "a string";
-
-// setting the values
-myMap.set(keyString, "value associated with 'a string'");
-myMap.set(keyObj, "value associated with keyObj");
-myMap.set(keyFunc, "value associated with keyFunc");
-
-myMap.size; // 3
-
-// getting the values
-myMap.get(keyString);    // "value associated with 'a string'"
-myMap.get(keyObj);       // "value associated with keyObj"
-myMap.get(keyFunc);      // "value associated with keyFunc"
-
-myMap.get("a string");   // "value associated with 'a string'"
-                         // because keyString === 'a string'
-myMap.get({});           // undefined, because keyObj !== {}
-myMap.get(function() {}) // undefined, because keyFunc !== function () {}
-
- -

NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works, because NaNs are indistinguishable from each other:

- -
var myMap = new Map();
-myMap.set(NaN, "not a number");
-
-myMap.get(NaN); // "not a number"
-
-var otherNaN = Number("foo");
-myMap.get(otherNaN); // "not a number"
-
- -

Also note that JavaScript has two zero values, +0 and -0. These two zero values are treated as different keys in Maps:

- -
var myMap = new Map();
-myMap.set(0, "positive zero");
-myMap.set(-0, "negative zero");
-
-0 === -0; // true
-
-myMap.get(-0); // "negative zero"
-myMap.get(0);  // "positive zero"
-
- -

Maps can be iterated using a for..of loop:

- -
var myMap = new Map();
-myMap.set(0, "zero");
-myMap.set(1, "one");
-for (var [key, value] of myMap) {
-  alert(key + " = " + value);
-}
-// Will show 2 alerts; first with "0 = zero" and second with "1 = one"
-
- -

Objects and maps compared

- -

Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better.

- - - -

Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.

- -

Use objects when there is logic that operates on individual elements.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31 [1]{{ CompatGeckoDesktop("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
iterable{{ CompatNo() }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Map.clear()31 [1]{{CompatGeckoDesktop("19")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
iterable{{ CompatNo() }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Map.clear(){{ CompatNo() }}{{CompatGeckoMobile("19")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

- -

See also

- - diff --git a/files/ja/mcd/getting_started/index.html b/files/ja/mcd/getting_started/index.html deleted file mode 100644 index 2e0fe5e9f2..0000000000 --- a/files/ja/mcd/getting_started/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Mozilla 製品の集中管理 - 基本編 -slug: MCD/Getting_Started -tags: - - Administration - - Configuration management - - enterprise ---- -

Firefox や Thunderbird などの Mozilla アプリケーションには、設定項目を集中管理する機能が備わっています。この機能は Netscape Communicator から引き継がれたものです。今のところ、Netscape Mission Control Desktop (MCD) のような管理者向けツールはありませんが、Mozilla アプリケーションの設定項目に詳しい方であれば、いくつかのテキストファイルを用意するだけで、簡単にこの機能を利用できます。

-

準備

-

以下は Firefox の例で説明しますが、Thunderbird でも同様です。

-

クライアントサイド

-

autoconfig.cfg と autoconfig.js という 2 つのプレーンテキストファイルをアプリケーションディレクトリ以下に追加します。ここでは Windows での標準的なパスを想定しますが、必要に応じて読み替えてください。

-

C:\Program Files\Mozilla Firefox\autoconfig.cfg

-

中身は空白にします。

-

C:\Program Files\Mozilla Firefox\defaults\pref\autoconfig.js

-

以下の 3 つの設定項目を記述します。

-
// サーバ上に置く jsc ファイルの URL (適宜変更してください)
-pref("autoadmin.global_config_url", "http://myserver/mozilla/firefox/autoconfig.jsc");
-
-// ローカルに置く cfg ファイルのファイル名
-pref("general.config.filename", "autoconfig.cfg");
-
-// 上記ファイル名の拡張子を除いた名前
-pref("general.config.vendor", "autoconfig");
-
-

サーバサイド

-

サーバ上に以下の 2 つのファイルを置きます。

-

http://myserver/mozilla/firefox/.htaccess

-

これは jsc ファイルの適切な MIME タイプを設定するものです。不明な場合はサーバ管理者に問い合わせてください。

-
AddType application/x-javascript-config jsc
-
-

http://myserver/mozilla/firefox/autoconfig.jsc

-

これが、実際に設定を記述するファイルです。ファイルの拡張子は js ではなく jsc とします。

-
// クライアントの js ファイルと同じ内容をここにも記述します。
-// ただし、lockPref によって設定項目をロックしていることに注意してください。
-lockPref("autoadmin.global_config_url", "http://myserver/mozilla/firefox/autoconfig.jsc");
-lockPref("general.config.filename", "autoconfig.cfg");
-lockPref("general.config.vendor", "autoconfig");
-
-// 以下、任意の設定項目を追加していきます。
-// 例えば以下の行ではアドオンのインストールを無効化しています。
-lockPref("xpinstall.enabled", false);
-    :
-    :
-    :
-
-

使い方

-

準備が終わったら、クライアント側でアプリケーションを起動すれば、サーバから自動的に設定項目が読み込まれ、適用されます。

-

関連記事

-

jsc ファイルでは、特定の設定項目をロックするだけでなく、環境変数の取得と条件分岐、規定値の設定、LDAP サポート (Thunderbird のみ) など、他にもいくつかの機能を利用できます。詳細は以下の記事を参照してください。

- diff --git a/files/ja/mcd/index.html b/files/ja/mcd/index.html deleted file mode 100644 index 628772cfb5..0000000000 --- a/files/ja/mcd/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: MCD -slug: MCD -tags: - - MDC Project - - NeedsEditorialReview - - NeedsTechnicalReview ---- -
-

Mozillaを企業に配備する方法についての寄稿ドキュメンテーション記事です。

-
- - - - - - - -
-

ドキュメンテーション

-
-
- ガイド
-
- - 		-

リンク

-
-
- 関連 bugzilla
-
- -
-
- リファレンス
-
- -
-

{{ languages( { "en": "en/MCD" } ) }}

diff --git a/files/ja/mdn/about/linking_to_mdn/index.html b/files/ja/mdn/about/linking_to_mdn/index.html deleted file mode 100644 index c7b7e87623..0000000000 --- a/files/ja/mdn/about/linking_to_mdn/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: MDN にリンクするには -slug: MDN/About/Linking_to_MDN -tags: - - Documentation - - Guide - - MDN -translation_of: MDN/About/Linking_to_MDN ---- -
{{MDNSidebar}}

MDN にリンクするガイドラインやそもそもリンクして良いのか聞かれることがありますが、もちろん OK です。MDN にリンクして頂いて構いません。その際のガイドラインやベストプラクティスが必要であれば続けて読んでください。

- -

MDN にリンクして良いですか？

- -

はい！是非どうぞ！ハイパーテキストリンクは Web の本質的な機能であるだけでなく、ユーザに価値あるリソースを指し示す方法であると共に、私たちのコミュニティの成果に対する信頼を示すことでもあります。

- -

ですから、MDN のコンテンツへのリンクは是非遠慮なくしてください。MDN のフロントページ、あるいは必要に応じて MDN 内の特定ページにリンクしてください。リンク先ページ選択のベストプラクティスは以下の通りです。

- -

どのページにリンクすべきですか？

- -

リンクすべき特定のページは決まっていません。あなたの読者に役立つのがどのページかというのが大事です。

- - - -

いずれにしても、リンク元ページや読者にとって最適なページにリンクしてください。リンクや私たちではなく、読者こそが大事なのですから。

- -

良いリンクの仕方は？

- -

リンクの仕方は自明ですが、良いリンクの仕方は少々難しいこともあります。リンクの仕方はいくつかあります:

- -

テキスト内でのリンク

- -

これが最も便利なリンク方法です。特定の話題に対して読者に更なる情報をリンクで提供するのです。多くの場合、このようなリンクはユーザを個別の関連情報ページにリンクするもので、Web サイトのホームページにリンクするものではありません (例外もありますが)。

- -
-

… IndexedDB API を使えば、ローカルのデータベースにデータを格納できます…

-
- -

このようなリンクはワンクリックでより詳しい情報が得られるユーザにとっても、的確な文脈で紹介してくれたことで気に入ってもらえるだろう MND にとっても、両方にとってとても価値あるものです。私たちのミッションは読者にできる限り速やかに必要な情報を届けることで、これは明らかにステキなやり方です。

- -

テキスト中のリンクで避けるべきこと

- -

テキスト中のリンクはステキで便利なものですが、留意すべき事がいくつかあります:

- - - -

バナーや画像をサイトに追加するには

- -

本文中からのリンク以外に、例えばサイドバーの画像から MDN にリンクしていただくこともできます。テキスト中のリンクはあなたが読者に情報を保管する目的でリンクするものですが、この場合は意味合いが異なります。サイドバーなどにリンク画像を追加するのは、あなたの MDN プロジェクトへの支援を表明するものであったり、MDN を宣伝するものであったり、総合的な情報源として MDN を紹介するものになります。

- -

支援を表明するのに遠慮しないでください。MDN を宣伝するには ページであなたのサイトに合わせたボタンを作ってください。ランディングページなど他のページへのリンクにしていただくのも自由です。

- -

WordPress から MDN に自動リンクするには

- -

ブログポストから用語を選んで MDN の適切なページに自動的にリンクする WordPress plugin を用意しています。このプラグインでは上記のガイドラインに沿ったかたちでリンクしながら Web 技術についてブログを書るよう助けてくれます。試しにインストールしてみて、良ければご利用ください。

- -

ご支援ありがとうございます！

- -
-

Cross-Origin Resource Sharing

- -

私達はMDNの公開する全てのデータで CORS を有効にしているつもりです。これにはほぼ全てのものが当てはまるはずです。もしあなたがなにかcross-origin requestsが使えない状態を発見したら、それは修正すべきバグです。

-
- -
-
 
-
diff --git a/files/ja/mdn/at_ten/history_of_mdn/index.html b/files/ja/mdn/at_ten/history_of_mdn/index.html new file mode 100644 index 0000000000..fd293fe4b3 --- /dev/null +++ b/files/ja/mdn/at_ten/history_of_mdn/index.html @@ -0,0 +1,223 @@ +--- +title: MDN の歴史 +slug: MDN_at_ten/History_of_MDN +tags: + - History + - MDN Meta +translation_of: MDN_at_ten/History_of_MDN +--- +
+

このトピックでは、MDN プロジェクトへの貢献者たちが、developer.mozilla.org の過去 10 年間と、来たる 10 年間を見ていきます。異なる Wiki ソフトウェア間の移行やドキュメンテーションコミュニティーがどうやって育ってきたのか、またいくつかのこのサイトの歴史におけるハイライトについて取り上げます。また現在の課題や今年の MDN コミュニティーの取り組みについても語ります。

+ +
+ +{{ EmbedLiveSample('audio', '100%', '60px') }} + +

これから、記憶や思想を共有し、そして自らの関わったある部分について詳細を語ってくれる人々について紹介します。

+
+
+ +
+
Justin Crawford + +

Justin Crawford プロダクトマネージャー, MDN

+ +

Justin 氏はこのトピックの進行役を務めます。ものを作り出す素材として、コード、言葉、自転車の部品、材木を用います。Twitter アカウントは @hoosteeno。

+
+ +
+

MDNとは？誰のためのサイト？Open Web コミュニティーの為の場所

+ +

MDN は有益な Web テクノロジーの情報を提供し、オープンな Web コミュニティーで学んだり、共有したり、教えたりすることを助けます。 MDN では、あなたも一緒になってあなた自身のため、また他者のために何かを作りあげることになります。

+Mozilla 開発者のための場所 + +

MDN はまた、Gecko や Firefox をハックする人々、アドオン開発者、Firefox OS 貢献者などのMozilla に携わる技術者のための場所でもあります。

+
+ +
Eric Shepherd + +

Eric "Sheppy" Shepherd テクニカルライター, MDN

+ +

Sheppy 氏は Mozilla の為に 2006 年から執筆を始め、MDC と MDN に結実するまでに長年の歴史（とクレイジーなアイデア）を刻んでいます。Twitter では @sheppy。

+
+ +
+

MDN の歴史 Wiki より前の時代 – Netscape DevEdge

+ +

古くは、いくつかの MDN ドキュメントの基礎を形作ることになった Netscape 社の DevEdge というものがありました。その頃の様子は archive.org で見ることができます。

+ +

Netscape DevEdge

+ +

2004 年 10 月 12 日、この人気のあった開発者向けのウェブサイトは Netscape の親会社、AOL によって閉じられました。わずか数か月後の 2005 年 2 月、Mitchell Baker は Mozilla が元 Netscape DevEdge リソースベースの新しいドキュメントを投稿したり、修正したり、作成することを許可する AOL との契約とともに DevEdge を助け出すことに成功しました。つまり、1998 年に Mozilla のソースについて起きたことが、ついに Netscape の開発者ドキュメントについても起きたのです。オープンソースになったということです！

+ +

Deb Richardson が Mozilla Foundation に技術編集者として加わり、新しい DevMo プロジェクト ── コミュニティ主体の開発者ドキュメントのプロジェクトをリードしました。

+
+ +
+

MediaWiki 最初の Wiki エンジン

+ +

MediaWiki を新しいプロジェクトのプラットフォームとして、Mozilla の開発者文書は 2005 年 7 月より誰でも編集できるようになりました。Mozilla の新しい協同的な要素が打ち立てられ、それ以来 "いいもの" を作ることを助ける人や知見を共有する人は誰でも歓迎しています。技術文書を他の言語に翻訳する新しい国際的なコミュニティーが成長し始めました。

+ +

MDC MediaWiki

+
+ +
Florian Scholz + +

Florian Scholz テクニカルライター, MDN

+ +

Florian 氏は Mozilla が焦点を当てているオープンな Web 技術のテクニカルライターです。彼は Wiki の小人で、それが花であるかのようにドキュメンテーションをガーデニングします。そして彼はコミュニティーと一緒に、Webについての文書化し、誰からもアクセスできるようにするという目標に向けて作業することが好きです。 Florian 氏はオープンソースへの情熱を持っています。彼はドイツのブレーメンに住んでいます。 @floscholz にてツイートしています。

+
+ +
+

DekiWiki 2 つ目の Wiki エンジン

+ +

2008 年 8 月、Mozilla Developer Center は技術文書のためのパワフルで新しいコンテンツ管理システム (CMS) であり、Wiki システムでもある MindTouch DekiWiki に乗り換えました。この乗り換えはコミュニティー内でとても大きい議論が巻き起こりました。MediaWiki は 2005 年から使われており、その周辺にツールもビルドされてきたからです。

+ +

MDC DekiWiki

+
+ +
Ali Spivak + +

Ali Spivak すてきな MDN ネコの飼育者

+ +

Ali Spivak は Mozilla Developer Network のコンテンツとコミュニティを管理し、Web がもっとすてきになるのを手助けする方法を考えます。彼女は自由でオープンな Web を維持することに情熱的であり、そして、2012 年に Mozilla に参加した時にオープンソースに飛び込んで以来、Mozilla での開発者コミュニティーの構築と参加に注力してきました。Twitter では @alispivak。

+
+ +
+

Kuma 3 つ目の、そして現行の Wiki エンジン

+ +

2011 年初期頃、Kitsune から fork され、2012 年 8 月 3 日に立ち上がった Kuma は Django をベースに Mozilla が構築した Wiki プラットフォームで Node.js を使った KumaScript マクロシステムも付随してます。

+ +

コードは GitHub 上にあるので、コミュニティーは、MDN の CMS にも貢献し始めました。今後、"MDN のハック" には文書を書くことと Kuma のコーディングの両方が含まれることになるでしょう。

+ +

MDN KUMA

+
+ +
David Walsh + +

David Walsh Web 開発者, MDN

+ +

Mozilla シニア Web 開発者、フロントエンドエンジニア、 MooTools コア開発者、Javascript マニア、CSS の何でも屋、PHP ハッカーで、Web とオープンソースを愛する人。David は Twitter では @davidwalshblog。

+
+ +
+

MDN の再設計 新しいデザインと Kuma

+ +

MDN の再設計はビッグプロジェクトでした。Sean Martell が新しい MDN の VI (visual identity; 法人以外のロゴのこと) をデザインしました。次には、3000 人の MDNer のベータユーザーグループと共に数か月かけた反復的プロセスでした。新しい見た目は "ワッフルフラグ" (MDN の機能フラグシステム) に隠れています。David Walsh にも大きく感謝します。彼は全体の再デザインに挑戦して、MDN にふさわしいフロントエンドデザインをもたらしました。

+Waffle flag
+ +
Janet Swisher + +

Janet Swisher コミュニティマネージャー, MDN

+ +

Janet 氏は Mozilla Developer Network の Mozilla Community Manager です。彼女はMozilla に加わったのは 2010 年、OSS への関与は 2004 年から、技術的なコミュニケーションには 20 世紀から関わっています。Twitter では @jmswisher 。

+
+ +
+

Open Web 文書の周りのコミュニティー コミュニティーが動かす、特定のブラウザーに限らないオープンなウェブのためのドキュメンテーション

+ +

2010年の時点、特にコミュニティメンバーやテクニカルライターがパリに集まった時、MDN の目標は "Firefox のすべてのドキュメントを書こう！" から "Web のドキュメントを書こう！" に確実にシフトしました。ドキュメントは整理され、数年かけて再編成され MDN の Open Web documentation は 特定のブラウザーにとらわれないものになりました。これは、Web に関わる開発をするあらゆる人々の手助けとなり、そして私たちのコンテンツの中で、もっとも広く使われるものとなりました。

+ +

いつも、いろいろなブラウザーベンダーが MDN を形作る手助けをしてくれています。このブラウザー間のコラボレーションは非常に成功していて、MDN の読者たちに高く評価されています。

+
+ +
Luke Crouch + +

Luke Crouch Web 開発者, MDN

+ +

Luke Crouch は自家醸造者で、Mozilla の Web 開発者であり、サッカーファンです。彼は 1996 年から Web を開発し続けていて 2004 年から Firefox を使っています。2006 年からオープンソースに貢献し始めて、MDN の最初のスタッフとして 2010 年に Mozilla に入社しました。Luke 氏は @groovecoder で Twitter を利用しています。

+
+ +
+

翻訳コミュニティー MDN はグローバルな利用者に向けて数々の言語に翻訳されています

+ +

ローカライゼーションは Mozilla コミュニティーの大きなパートです。これはほぼすべてのプロジェクトや製品で当てはまります。Kuma を使っている MDN も翻訳しやすく、私達の L10n コミュニティーのニーズに適しています。W3C の仕様や他のWebの機能を記述しているリソースには直接的な目標はありません。そして仕様書を複数の言語で提供するコミュニティーを持っています。特に初心者にとって、MDN は Web の技術を探求する最初のステップであり、すべての人々にとってそうなることが私達の目標です。MDN は広いユーザーを持ち、英語を母語としない人も対象です。これは世界中の人々から高く評価されています。

+
+ +
Julien + +

Julien (別名 Sphinx) フランス語 localization, MDN

+ +

Julien 氏は何か月もの間、夜と週末を費やし JavaScript の記事をフランス語に翻訳してきました。彼は開発者ではありませんが、IT の基礎を学んでおり、新しい技術について学びたいと思っています。彼はテレビを見る代わりに MDN に貢献しているのです。

+
+ +
an-Yves Perrier + +

Jean-Yves Perrier テクニカルライター, MDN

+ +

Jean-Yves 氏は 2010 年から MDN のテクニカルライターであり、2011 年の終わりに Mozilla に常勤として加わりました。彼はオープンな Web への情熱と 15 年の C++ の知識とを持っています。彼はスイス人ですがイギリスのロンドンに住んでいます。彼のエルデシュ数は 5 です。Twitter では @Teoli2003 です。

+
+ +
+

Learning Area

+ +

MDN の Learning Area はWeb の基礎スキルを教える新しい取り組みです。 これまでの 10 年を通して、MDN はたくさんの応用的な記事と貴重な情報をエキスパートの為に提供し続けてきました。このプロジェクトでは初心者に焦点を当てた記事を書き、知識ギャップを埋めることを目標としています。

+
+ +
Jérémie Patonnier + +

Jérémie Patonnier テクニカルライター, MDN

+ +

Jérémie 氏は長年 Mozilla Developer Network の貢献者として活動を続け、2000 年から Web のプロフェッショナルになりました。彼は Web 標準の擁護者であり、Web技術のドキュメントを書き続け、すべての人々に届くようにと願っています。Twitter では @JeremiePat

+
+ +
+

MDN の未来 20 周年を祝う時 MDN はどうなっているだろうか？

+ +

MDN に参加する人々はオープンな Web やアクセシビリティを気にしていまます。それが私達に数々の localization チームや貢献してくれる全ての人達がいる理由です。

+ +

MDN は、私達がそうであるべきだと感じるあり方で Web を維持し続けるための重要なプレーヤーであり続けることを望みます。

+ +

この未来を担う一つの大きな部分は、学習のための資源でしょう。次の 10 年を迎え、そこにはもっとたくさんの Web 開発者がいるでしょう。

+ +

私達の仕事のもうひとつの重要な部分は、私達がすでに持っているコンテンツのメンテナンスと情報の更新であり、いつでも Web 開発者達に適切なコンテンツを提供できるようにすることです。

+ +

今変わろうとしていること、そして変わるであろうことは、どのように情報の消費がなされるかということです。今日ではみんなが情報を求めてドキュメンテーション (MDN に限らず) を検索し、探しています。将来、MDN ドキュメントは直接コードエディターに、Firefox Developer Tool に、そして他の多くの開発者ツールやサービスに配信されるかもしれません。

+
+ +
+

偉大なる貢献者たち 他にも多くの人々がMDNですばらしい働きをしてきました

+ +
+
    +
  • Les Orchard
    • +
  • John Karahalis
    • +
  • David Walsh
    • +
  • Jannis Leidel
    • +
  • Stephanie Hobson
    • +
  • James Bennett
    • +
  • Isac Lagerblad
    • +
  • Piotrek Koszuliński
    • +
  • Craig Cook
    • +
  • Rob Hudson
    • +
  • John Whitlock
    • +
  • ...
    + ほか、たくさんの Kuma への貢献者たち。
    • +
+ +
    +
  • Chris Mills
    • +
  • Will Bamberg
    • +
  • David Bruant
    • +
  • Thierry Régagnon
    • +
  • etherthank
    • +
  • Saurabh Nair
    • +
  • Deb Richardson
    • +
  • Sebastian Zartner
    • +
  • Tooru Fujisawa
    • +
  • Karen Scarfone
    • +
  • Niklas Barning
    • +
  • ...
    + ほか数百名の Wiki 執筆者たち。
    • +
+
+The Berlin Office
+
diff --git a/files/ja/mdn/at_ten/index.html b/files/ja/mdn/at_ten/index.html new file mode 100644 index 0000000000..e79eb97940 --- /dev/null +++ b/files/ja/mdn/at_ten/index.html @@ -0,0 +1,36 @@ +--- +title: MDN は 10 周年を迎えました +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +
Web のドキュメントを作り続けて 10 周年
+ +
+
+

MDN のあゆみ

+ +

フリーで、コミュニティが作るWeb 開発者のための新しいオンラインリソースをつくる、という理想に燃えた小さなチームが作業を開始したのが 2005 年でした。彼らの働きが現在の Mozilla Developer Network の礎となっています。それから 10 年後の現在 MDN のコミュニティは大きく成長し、 Web 技術に関するドキュメントやサンプルコード、学習用の教材を作成し続けています。CSS / HTML / JavaScript に代表されるあらゆるオープンな Web 技術をカバーし、オープンな Web の力を支えています。

+ +

詳細はこちら about the history

+ +

MDN へ参加しよう

+ +

10 年にわたり、MDN のコミュニティはオープン Web に関するドキュメントを作成し、更新し続けてきました。90,000 を超えるドキュメントが Mozillan によって作成され、翻訳されています。そんなコミュニティのメンバーに参加しませんか？何か大きなことをしなくても大丈夫。新しい Web API に関する記事を 1 から書くことも、単純なタイプミスの修正も、どちらも等しく重要な貢献です。

+ +

詳細はこちら about contributing

+
+ +
+
+
MDN は「どうやって」ではなく「なぜ」を知るのに最適な場所である
+— Christian Heilmann
+
+
+ + + +
    +
  1. MDN は 10 周年を迎えました
    2. +
  2. MDN のあゆみ
    3. +
  3. MDN へ参加しよう
    4. +
diff --git a/files/ja/mdn/community/conversations/index.html b/files/ja/mdn/community/conversations/index.html deleted file mode 100644 index 2ed336eecc..0000000000 --- a/files/ja/mdn/community/conversations/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: MDN コミュニティでの対話 -slug: MDN/Community/Conversations -tags: - - Community - - Guide - - MDN Meta -translation_of: MDN/Community/Conversations ---- -
{{MDNSidebar}}
- -

MDN での"作業"は MDN のサイトで行われますが、"コミュニティ" はまた、(非同期の) ディスカッションと(同期的な) オンラインチャット、ミーティングも行っています。

- -

非同期のディスカッション

- -

情報を共有し、ディスカッションを行うため、Mozilla Discourse forum に専用のカテゴリー ("MDN") があります。ドキュメントのコンテンツ作成・翻訳・メンテナンス、MDN プラットフォームの開発、計画、目標設定、進捗管理といった、MDN に関するすべてのトピックでこのカテゴリーを使用します。

- - - -

歴史的なアーカイブ

- -

2017 年 6 月より前は MDN 関連のディスカッションを、Google グループを経由して保存されていたメーリングリストで行っていました。これら過去のディスカッションを検索したい場合は、Google グループで対応する古いメーリングリストを閲覧できます。(はい、これらの名前が重複していて混乱を招いていることは承知しています。歴史的アクシデントによるものです。申し訳ございません。)

- -
-
mozilla.dev.mdc 別名 dev-mdc
-
このメーリングリストは MDN 上のドキュメントについて議論する場でした。
-
mozilla.dev.mdn 別名 dev-mdn
-
このフォーラムは Kuma プラットフォームを支えている MDN での開発作業についての議論を行うところでした。
-
mozilla.mdn 別名 mdn@
-
これは MDN ウェブサイトや関連した取り組みに対する、ハイレベルな計画と優先順位についての議論のためのフォーラムでした。
-
- -

同期のチャット

- -

Mozilla のリアルタイムで議論を行うためののプラットフォームは Matrix で、 Mozilla 自身がサーバーを持っているチャット手法です。

- -

MDN Web docs のチャットルームは、 MDN のコンテンツを議論するための主要なチャンネルです。私たちは執筆やコンテンツの構成などについて話し合っています。また、「ウォータークーラー」のような会話もしています。この部屋は北米とヨーロッパの平日に活動している可能性が高いです。

- -

Mozilla での Matrix の使い方をもっと知りたいかもしれませんし、もしあなたが本当に興味を持っているのであれば、 Riot.im のようなスタンドアロンの Matrix アプリケーションをインストールしてみてはいかがでしょうか。

- -

IRC とは

- -

長年にわたり、 Mozilla はリアルタイムの議論のために Internet Relay Chat (IRC) を使用していました。2020年初頭の時点で、 IRC は Matrix に取って代わられて非推奨となっています。 MDN を含む多くの場所で IRC チャンネルへの言及を目にするかもしれません。 MDNで見つけた IRC チャンネルへのリンクを更新して、代わりに対応する Matrix ルームを指すようにしてください。トピックのマトリックスルームがわからない場合は、 General ルームで質問してください。アクティブでなくなったプロジェクトやトピックには Matrix ルームがないかもしれません。その場合はリンクを削除してください。

- -

ミーティングやその他のイベントに参加する

- -

MDN チームは、MDN コミュニティに開放している定期ミーティングをいくつか催しています。スケジュールやアジェンダ、過去と今後のミーティングの記録といった詳細は Mozilla Wiki の MDN Meetings のページをご覧ください。

- -

ここで紹介したものやその他のミーティング、ミートアップ、その他のイベントについては MDN イベントカレンダーをご覧ください。定期開催のミーティングは MDN ミーティングの Wiki ページにまとめられています。

diff --git a/files/ja/mdn/community/doc_sprints/index.html b/files/ja/mdn/community/doc_sprints/index.html deleted file mode 100644 index 5af4cd4a75..0000000000 --- a/files/ja/mdn/community/doc_sprints/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Doc sprints -slug: MDN/Community/Doc_sprints -translation_of: MDN/Community/Doc_sprints ---- -
{{MDNSidebar}}

{{ draft() }}

- -
-

Note: The MDN community often held doc sprints during 2010-2013. Starting in 2014, these events were broadened in scope to "Hack on MDN" events that include code hacking as well as documentation projects. Most of the advice below applies equally well to "Hack" sprints and documentation sprints.

-
- -

これは、Doc sprint（集中的な文書関連イベントを実施する短い期間）を組織化するためのガイドです。Doc sprint を組織化した経験者からのアドバイス、コツを含み、あなたが同じことがをする助けとなるものです。このガイドはまた、FLOSS Manuals Book Sprints という書籍からのアイディアを引用しています。

- -

Doc sprint とは?

- -

Doc sprint とは、短い期間に、集まってドキュメントを作成することを指します。実際に、もしくは仮想的に集まって、決められたトピックや、それに関連した文書を協力して作成します。

- -

スプリントの種類

- -

Sprints can be virtual or in-person, or some combination. For a virtual sprint, everyone participates from wherever they happen to be located, communicating solely through mediated channels. For an in-person sprint, participants gather in the same location for the duration of the sprint, so that they can communicate face-to-face. Hybrid sprints can be mostly-in-person with some remote participants, or mostly-virtual with some local gatherings. In-person sprints require more logistical planning, to secure a meeting location, to get everybody there, and to house and feed them during the sprint.

- -

Another way to categorize sprints is by topical focus. For example, a sprint might focus on a particular subject area, such as Web development, or translation into a particular language.

- -

スプリントを計画する

- -

目標を決める

- -

コミュニティとコンテンツに関して明確な目標を設定しましょう。次のようなことについて決めておくことによって、doc sprint の詳細を決めやすくなります。

- - - -

種類と想定参加者を決める

- -

決定した目標に応じて、スプリントの形式を決めましょう（仮想的に集まるのか、実際に集まるのか、それともその組み合わせなのか）。想定する参加者も、併せて決めておきましょう。

- -

例えば、コミュニティメンバーを増やすことが目的なら、その地域の人が、実際に集まって行う形が最適でしょう。なぜなら長距離の移動も必要ありませんし、参加者がお互いに会って親睦を深められるからです。また特定の領域のトピックに焦点をあてたスプリントで、想定される参加者がお互いをよく知っているけれども、地理的に分散している場合は、仮想的に集まる形式をとると良いでしょう。

- -

日時を決める

- -

長距離の移動が必要な参加者のいるスプリントの場合、開催期間を 3 日間（例：週末 2 日と平日 1 日）はとったほうが良いでしょう。ただし長すぎないように注意が必要です。公開の、ローカルな、実際に集まるsプリントの場合は、多くの人が参加できると思われる日に、1 日だけ開催すると良いでしょう。仮想的に集まるなら、平日 1 日と休日 1日の 2 日開催とすることが多いです。例えばパリの Mozilla オフィスでは、毎水曜日に、ローカルなドックスプリントが開催されています。実際にオフィスに来る参加者が大半ですが、モントリオールからリモートで参加する人もいます。

- -

参加者が全員参加するカンファレンスがあるなら、その後に開催するのも良いでしょう。その場合は、参加者がカンファレンス後にスプリントへ参加する時間を取れることを確認しておきましょう。またカンファレンスの期間中にスプリントを開催するのは避けたほうがよいでしょう。

- -

仮想的に集まる形式をとるなら十分な作業時間を取れるように、タイムゾーンに気をつけましょう。ヨーロッパとアメリカやアメリカとアジアのように、異なるタイムゾーンからの参加者がいる場合は、参加者が起きていられる時間に計画しましょう。ただし全員にとって都合のよい時間はありえないことにも留意が必要です。

- -

また、仮想的に集まる形式の場合には、2-3 週前に日程を設定できます。実際に集まる場合は、予定や移動の調整が必要なので、2-3 週よりも前に日程を決めておく必要があります。

- -

スプリントを広報する

- -

スプリントを公開し、参加者を広く募ることもできます。その際には、必ず参加できることがわかっている参加者が何人かいるようにしましょう。彼らが全員参加できるように日時を設定しましょう。非公開のスプリントの場合は、参加者を招待するだけでよいでしょう。ただし招待状は個別に送信し、なぜ参加者として選ばれたのかを詳細に説明するものである必要があります。

- -

公開のスプリントの場合は、トピックに興味のある既存グループを見つけておくと良いでしょう。例えば、特定の地域を対象とした集合型スプリントの場合、その地域で活動している Web 開発者のミートアップを見つけておくと良いでしょう。告知は送るグループにとって適切な手段でおこないましょう。告知文には、スプリントの詳細と参加登録方法が記載された Web ページへのリンクもつけておくと良いでしょう。Eventbrite と Lanyrd は参加登録も行えるサイトの例です。Mozilla の開発者向けイベントに、実際に参加するのは登録者の半数程度となっています。

- -

ターゲットとする人々に適切にリーチできるなら、SNS も利用しましょう。Web 開発者をターゲットとするなら、まず Twitter、次いで Google Plus が、Facebook や LinkedIn と比べて効果がありました。しかし地域によって SNS の利用は異なります（例えばブラジルでは Orkut の利用者が多い）。ターゲット層に多くのフォロワーを持つ人に、イベント告知のポストをシェアしてもらえるようにしておきましょう。

- -

人が集まるスプリントで必要な手配

- -

Logistics for in-person sprints are greater for longer sprints and those where sprinters travel to attend. A short or locals-only sprint need relatively little logistical support.

- -

予算と資金

- -

You need to figure out how much the event is going to cost, and where the money is going to come from.

- -

Costs to consider in your budget include:

- - - -

Some of these costs can be self-funded by participants, meaning that they pay for their own costs. There are a variety of ways to save money, which are mentioned in the following sections.

- -

It may be possible to get sponsorship from Mozilla to fund some of the costs of your event. It helps to have a clear focus for your event, and a specific plan and budget. If there is a Mozilla Rep in your area, work with them to request budget and swag through the Reps program. Otherwise, you can submit a developer events request in Bugzilla.

- -
-
会場
-
There are lots of options for meeting space. If you are in a city with a Mozilla office, you can use the community space in that office. Elsewhere, options include meeting rooms in libraries, churches, coffee shops, or businesses where you have contacts. Many cities now have coworking spaces that rent their conference rooms for a reasonable fee.
-
資源
-
Be sure that your venue has good chairs and tables, and reliable power and Internet access. Sitting all day on a bad chair is not just uncomfortable; it can lead to injury. Make sure that the number of sprinters and their computers and devices does not overwhelm the power supply and available Internet bandwidth. Be generous (but not dangerous) with extension cords, and if necessary, international plug adapters. A projector for shared viewing can be very helpful. Whiteboards and sticky notes are great for brainstorming and planning.
-
移動
-
Travel is relevant only if the sprinters do not all live close to the sprint venue. The usual strategies for saving on travel apply, and are not specific to doc sprints.
-
宿泊
-
Where sprinters stay should not be inconveniently far from the meeting venue. It can be cheaper (and possibly more fun) to split the cost of a vacation house or flat, rather than paying for individual hotel rooms. If you have a mix of visitors and (willing) locals, the visitors can stay in the homes of local community members.
-
食料
-
Sprinters need to eat! Make arrangements for food during the sprint, and inform sprinters if certain meals will not be arranged. If the group is staying in a home, you can save money by buying and cooking food rather than going out to eat. Even if food is self-funded, it can reduce hassle to pitch into a common fund for food, rather than splitting every restaurant bill. If your venue allows, have snacks (some healthy and some not) available between meals.
-
楽しみ
-
Make time for non-writing social activities. These can be informal, like going for a hike together, or more formal, like a tourist excursion. Going out for beer (at the end of the day, of course) is usually a winner. On the other hand, don't plan every hour of every day. Everybody needs some down time, especially introverts.
-
- -

sprint の期間中

- -

作業を計画する

- -

 

- -

タスクを追跡する

- -

Have a way to track what tasks need to be worked on, who is doing what, and what has been completed. For MDN doc sprints, we use a wiki page for advance planning, and an etherpad for tracking work during the sprint.

- -

Often, people want to help but don't know where to start, and deciding among many options takes too much mental effort. For any given participant, give them a couple of possible tasks ("you could do A, or B"); this simplifies their choice, without making them feel like they're being bossed around.

- -

協力する

- -

One of the benefits of in-person sprints is that people can work together in ways that they might not be able to when they're not in the same place, for example, by working out ideas together on a whiteboard or by brainstorming with sticky notes. Still, there are opportunities for collaboration and camaraderie in any type of sprint. Chatting via IRC is essential for virtual sprints, and still very helpful for in-person sprints (for example, for sharing links). For a greater sense of "virtual presence", consider using a video conferencing service, such as Google Hangout.

- -

As an organizer, look for common interests among the participants and for ways that they can work together.

- -

達成したことを祝う

- -

Be sure to take time to celebrate accomplishments at the end of the sprint. This gives participants a better feeling than when the sprint just ends without any summary. If possible, have people "demo" what they have done, even if it is just showing a new article page.

- -

Also, share the sprint accomplishments via a blog post, to celebrate publicly as well. This is important for any kind of sprint, but especially for virtual sprints, where the participants might not all be online at the official end of the sprint for a wrap-up session.

- -

 

diff --git a/files/ja/mdn/community/index.html b/files/ja/mdn/community/index.html deleted file mode 100644 index 7fdf95ca12..0000000000 --- a/files/ja/mdn/community/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: MDN Web Docs コミュニティに参加しましょう -slug: MDN/Community -tags: - - Community - - Guide - - Landing - - MDN Meta -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -
-

MDN Web Docs は wiki 以上のものです。つまりオープンなウェブ技術を利用する開発者たちのための素晴らしいリソースとして MDN を共に作り上げる、開発者たちによるコミュニティなのです。

-
- -

MDN に貢献していただけるのはもちろん大歓迎ですが、 MDN コミュニティに参加していただけるとよりありがたいです。コミュニティとつながりを持つには、こちらの簡単な3ステップを踏んでください。

- -
    -
  1. MDN アカウントを作成する。
    2. -
  2. ディスカッションに参加する。
    3. -
  3. 何が起きているのかを知り、対応する。
    4. -
- -

コミュニティはどのように機能するのか

- -

以下は、 MDN のコミュニティを説明する他の記事です。

- -
-
-
-
コミュニティでの役割
-
MDN コミュニティ内には特定の役割を持つたくさんの役割があります。
-
Doc sprints
-
これはドキュメンテーションスプリントを開催するためのガイドです。ここには doc sprints を開催した人からの助言や tips があり、あなたの開催にも役立ちます。
-
何が起きているのかを知り対応する
-
MDN は Mozilla Developer Network community によってもたらされています。ここに我々が行っていることの情報を共有する方法があります。
-
- -
-
-
- -
-
-
MDN コミュニティでの会話
-
MDN の「成果」は MDN サイトに現れますが、「コミュニティ」も (非同期の) 議論と (同期の) オンラインチャットやミーティングで行われます。
-
コミュニティでの作業
-
MDN の文書化にかなりの量で貢献する部分は、 MDN コミュニティの役割として作業する方法を知ることです。この記事では他のライターや開発チームの両方とやりとりすることを活用するのに役立つ tips を置いています。
-
-
-
diff --git a/files/ja/mdn/community/whats_happening/index.html b/files/ja/mdn/community/whats_happening/index.html deleted file mode 100644 index 097057a686..0000000000 --- a/files/ja/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: 何が起きているかを追跡する -slug: MDN/Community/Whats_happening -tags: - - Beginner - - Community - - Guide - - MDN Meta -translation_of: MDN/Community/Whats_happening ---- -
{{MDNSidebar}}
- -

MDN は MDN コミュニティ によって運営されています。私たちが何をしているのかについて、私たちが情報を共有する方法をいくつか紹介します。

- -

ブログ

- -
-
Mozilla Hacks
-
Web と Mozilla のテクノロジーと機能を詳細にカバーしたニュース。
-
Engaging Developers
-
Mozilla の MDN に関連するコミュニティの間でのプロモーション活動や議論。
-
- -

短期的な情報の発信

- - - -

ステータスボードとダッシュボード

- -

Documentation status ページを見て、MDN コンテンツをすべて横断的に見て何が起きているかを理解します。どの記事が書いたり更新したりする必要があり、どのトピックが手助けが要るのかや、もっと多くのことを見ることができます。

- -

MDN ミーティング

- -

MDN 関連のさまざまなプロジェクトとブロセスに関する進捗を追ったり共有したりする、多くの通常ミーティングがあります。MDN ミーティング wiki ページに記載されています。

- -

何が起こっているかを感じるのに、最も良いのは 2週間に 1 回水曜日の 10:00 に (10月-3月は UTC-0800、3月-10月は UTC-0700) #mdn IRC チャンネルで行われる MDN コミュニティミーティングに参加することです。MDN コミュニティミーティング wiki ページを見て、過去のアジェンダと記録を確認してください。

- -

Public MDN Events のカレンダーには MDN コミュニティミーティング、doc sprints、その他 MDN 関連イベントが含まれています。Vidyo テレビ会議システムの「mdn」チャンネルでミーティングを見たら、ウェブで会話に参加できます。

diff --git a/files/ja/mdn/community/working_in_community/index.html b/files/ja/mdn/community/working_in_community/index.html deleted file mode 100644 index 662d2321f4..0000000000 --- a/files/ja/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: コミュニティでの作業 -slug: MDN/Community/Working_in_community -tags: - - Community - - Guide - - MDN Meta -translation_of: MDN/Community/Working_in_community ---- -
{{MDNSidebar}}
- -

MDN の文書に関連して行われる、意味をなす規模での貢献の大部分は、いかに MDN コミュニティの一員として作業するかを知ることだといえます。この記事ではあなたが行う他の文書作成者、開発チームとのやりとりの多くで役に立つコツを紹介します。

- -

一般的なエチケットのガイドライン

- -

Mozilla コミュニティで作業する際の品行に関する、一般的なガイドラインを紹介します。

- - - -

機転を利かせること

- -

他者とのコミュニケーションでは、常に機転を利かせて敬意を表してください。

- -

礼儀正しくミスを指摘する

- -

誰かに連絡を取る目的が、その人たちに何か別のことをするように頼むことである場合、あるいはその人たちが行った誤り (特に、何度も行っている場合) を指摘することである場合は、メッセージを肯定的なコメントで始めてください。これはいわば打撃を和らげて、相手を悪者扱いするのではなく助けようとしていることを示します。

- -

例えば新しい貢献者がタグをつけずに多くのページを作成しており、あなたがその問題を指摘したい場合は、相手へのメッセージを以下のようにするとよいでしょう (それぞれのケースで変更しなければならない箇所に下線をつけています):

- -
-

Hi, MrBigglesworth, I've been noticing your contributions to the Wormhole API documentation, and it's fantastic to have your help! I particularly like the way you balanced your level of detail with readability. That said, though, you could make these articles even better and more helpful if you added the correct tags to the pages as you go.

- -

See the MDN tagging guide (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) for details.

- -

Thanks again, and I look forward to your future contributions!

-
- -

知識を共有する

- -

MDN プロジェクトに参加していると、何が行われているかや、コミュニティの他のメンバーが何に関わっているかを知ると役に立ちます。コミュニティ内で他者と対話することで、アイデア、更新状況などを得る (そして共有する) ことができます。また、誰が何を行ったかを知るのに役立つツールや情報リソースもあります。

- -

コミュニケーションチャネル

- -

コミュニティのメンバー (開発者と文書作成者のどちらも) と交流できる手段がいくつかあり、それぞれに固有のエチケットに関する決まりがいくらかあります。

- -

Discourse

- -

MDN Discourse フォーラムは、 MDN への協力についての一般的な質問を行い、議論を始めるのによい場所です。

- -

Chat

- -

Matrix チャットシステムを使用して、リアルタイムで連絡を取ることができます。 MDN のスタッフは MDN Web Docs ルーム におり、ヨーロッパと北米の勤務日に活動しています。他のチャットルームを見て、興味のあるトピックに関わっている人を見つけましょう。

- -

GitHub

- -

MDN で問題を見つけたり、質問したりしたい場合は GitHub sprints repo issues に問題を提出してください。これらの問題は、将来のある時点でトリアージされ、対処されることになります。

- -

Email

- -

電子メールアドレスを持っている場合は、他の人々とプライベートなメール交換をすることもあります。

- -
-

注記: 一般的に、あなたが文書化している技術に関する文書に誰かが電子メールアドレスを投稿した場合、個人的に電子メールアドレスを示された場合、あるいは広く知られた電子メールである場合は、受け入れ可能な "最初の連絡手段" が電子メールになります。あなたがそれを探し出さなければならない場合は、他に試みる連絡手段がまったくない場合を除いて、始めに Matrix やメーリングリストを使用する許可を得ることを試みましょう。

-
- -

コンテンツの状態を示すツール

- -

文書化の状態に関する情報を提供する、役に立つツールがいくつかあります。

- -
-
リビジョンダッシュボード
-
リビジョンダッシュボードは、MDN のコンテンツの変更点を確認するためのすばらしいツールです。最近の履歴を見る、確認する期間を選択する、あるいはロケールや貢献者名やトピックでフィルタリングすることができます。リビジョンのセットを見ると、それぞれのリビジョンの変更点を調べる、ページをすばやく開く、全体の履歴を調べる、あるいは変更を取り消す (権限がある場合) ことができます。
-
文書化状態の概観
-
文書化状態の概観 ページは、状態を追跡するために設定された MDN の全領域のリストを、そこにさまざまな作業が必要なページがいくつあるかという情報とともに提供します。特定のトピック領域をクリックすると、タグがないページや特定の作業が必要であることを示すタグがついたページなど、作業が必要なコンテンツの詳しい一覧を確認できます。また、長期間更新されていないページや陳腐化したと思われるページ、その領域の文書に影響があると位置づけられているバグの一覧を見ることもできます。
-
文書化プロジェクトの計画
-
私たちは計画段階の、あるいは大規模で進行中の文書作成プロジェクトをいくつか抱えており、何を行う必要があるかを追跡し続けることを支援する計画文書を作成しました。
-
MDN Taiga
-
MDN のスタッフである執筆者は、現在および将来の文書化プロジェクトを管理するために Taiga と呼ばれるツールを使用します。私たちが何をしており、またどのように進めているかを見ることができます。さらに、すぐに起こしたプロジェクトが何であるかを見ることもできます。それらのいくつかはスタッフの執筆者が引き受けますが、希望であればあなたが引き受けることも自由です! MDN チームが従っているアジャイルプロセスについて、詳しくは Mozilla wiki のプロセスのページ をご覧ください。
-
- -

開発コミュニティ

- -

MDN 文書作成コミュニティのメンバーとして、開発者と管理者の関係でもっとも重要であると思われることは、開発者とともに開発および維持することです。開発者は私たちが開発するソフトウェアを作成しますが、もっとも役に立つ情報源でもあります。開発者とよい関係を維持することはとても重要です。彼らに好かれていれば、質問に早く、正確に、また徹底的に答える可能性が高まります!

- -

また、あなたは MDN の文書作成コミュニティを代表しています。文書作成チームとのすべての交流を良好にすることで、開発チームとのすばらしい作業場の関係を維持するようにしてください。

- -

関連して、適切な話し相手を見つけるための手段が、モジュールオーナーの一覧 を見ることです。

- -

文書作成者たちのコミュニティ

- -

文書作成やのコミュニティは大規模です。きわめて頻繁に、あるいは大規模に貢献する方は比較的少数ですが、ときどき貢献する人々は数十人から数百人います。幸い、この方々は全体的にウェブ、Mozilla、文書化が純粋に好きなすばらしい人たちであり、交流することはほぼ容易です。

- -

MDN コミュニティについて詳しくは、MDN コミュニティに参加する の記事をご覧ください。

- -

他の執筆者と直接対話する機会が最も多い場所は Discourse フォーラムです。

- -

{{anch("General etiquette guidelines", "一般的なエチケットのガイドライン")}} を覚えておくことで、たいていの物事がとてもスムーズに進むことがわかるでしょう。

- -

関連項目

- - diff --git a/files/ja/mdn/contribute/faq/index.html b/files/ja/mdn/contribute/faq/index.html deleted file mode 100644 index 18e7425832..0000000000 --- a/files/ja/mdn/contribute/faq/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -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/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ja/mdn/contribute/howto/create_an_mdn_account/index.html deleted file mode 100644 index 70b2843e40..0000000000 --- a/files/ja/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: MDN アカウントを作成するには -slug: MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Beginner - - Documentation - - Guide - - Howto - - MDN Meta - - ガイド - - 初心者 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}
- -

MDN 上にあるコンテンツを編集するには、 MDN プロフィールが必要です。 MDN を読んだり、検索したりするだけの場合はプロフィールは不要です。このガイドは、 MDN のプロフィールをセットアップする手助けをします。

- -
-
MDN に登録するにはなぜメールアドレスが必要なのか
-
-メールアドレスはアカウントの回復に使用されます。また MDN の管理者がアカウントやサイトでの活動などについて連絡とる場合に必要となります。
-
-また、 (特定のページが変更されたときのような) 通知やメッセージ (例えば、ベータテストチームに参加し、テストが必要な新しい機能についてのメールを受信できます) にサインアップできます。
-
-メールアドレスは、 MDN では決して表示されず、プライバシーポリシーに従ってのみ使用されます。 - -
GitHub 経由でログインしている場合、そして GitHub でメールアドレスを ”通知しない” に設定している場合、MDN からメッセージ（あなたがページを購読した時などの通知も含まれます）は受信されないでしょう。
-
-
- -
    -
  1. MDN の各ページの上部にログインと書かれたボタンがあります。ここにマウスをポイント (モバイル端末の場合はタップ) すると、 MDN へのサインインに対応している認証サービスの一覧が表示されます。
    2. -
  2. ログインするサービスを選択します。現在は、 GitHub のみ利用できます。 GitHub を利用すると、 GitHub プロファイルへのリンクが MDN プロファイルの公開ページに追加されることに注意してください。 ユーザーがサインアップの詳細を入力するところ
    3. -
  3. サービスのプロンプトに従って、 GitHub のアカウントに接続します。 ユーザーがログインしたりアカウントを作成したりしているところ
    4. -
  4. 認証サービスから MDN に戻ると、ユーザー名とメールアドレスの入力を求められます。ユーザ名はあなたが貢献したページなどにクレジットとして公開されます。ユーザー名にメールアドレスを使用しないでください。 ユーザーがログインしたりアカウントを作成したりしているところｓ
    5. -
  5. MDN プロフィールを作成するをクリックします。
    6. -
  6. ステップ 4 で指定したメールアドレスが、認証サービスで使用しているものと同じでない場合、メールを確認し、メール内にあるリンクをクリックする必要があります。
    7. -
- -

以上です。これで MDN アカウントができました。すぐにページを編集することができます。

- -

MDN ページの上部にある自分のユーザー名をクリックすると、プロフィールを確認できます。そこで編集ボタンをクリックすると、プロフィールを変更できます。

- -
-

ユーザー名に空白や "@" を含めてはいけません。ユーザー名は、あなたが貢献したページなどに表示されることを覚えておいてください。

-
diff --git a/files/ja/mdn/contribute/howto/create_learning_pathways/index.html b/files/ja/mdn/contribute/howto/create_learning_pathways/index.html deleted file mode 100644 index d82d0877f2..0000000000 --- a/files/ja/mdn/contribute/howto/create_learning_pathways/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 学習パスの作成方法 -slug: MDN/Contribute/Howto/Create_learning_pathways -tags: - - MDN Meta - - ガイド - - 学習 - - 方法 -translation_of: MDN/Contribute/Howto/Create_learning_pathways ---- -
{{MDNSidebar}}
- -

学習領域で可能なさまざまなタスクの中で、最も重要なのは学習パスを設計することです。学習パスは基本的に、何かを学ぶために、通常は特定の順序で、読み、実行するための一連の記事です。 しかし良い・効率的なパスを作るには、いくつかの作業が必要です。このガイドは MDN の学習パスの計画と作成方法を学ぶのに役立ちます。

- -

学習パスは実際にはチュートリアルのように見えますが、その通りでそれは非常に似ています。違いは、チュートリアルは、学習の道が青写真である具体的な結果だということです。MDN で素晴らしい学習コンテンツを作成するために必要なことの詳細を見てみましょう。

- -

処方箋

- -

学習パスの設計の冒頭には、常にあなたのアイデアを定式化する時があります。そのような道筋のデザイナーとして、あなたは先生の立場にあるので、教えているレッスンを正式なものにする必要があります。要するに、あなたは次の質問に答えなければなりません：

- -
-
何を教えたいですか？
-
-

一般的な知識 (例えば、オブジェクト指向プログラミング、{{Glossary("HTML")}}、Web デザイン) もしくはより具体的な実行するタスク (例えば、Web サイトを構築する方法、ナビゲーションを設計する方法 メニュー) かもしれません。これは本当にあなた次第ですが、集中しておくことが重要です。Web はかなり大きな獣で、学ぶべきことがたくさんあります。あなたのパスから学ぶ人に明確な洞察を与えるために、教えたいことを絞り込んでください。

-
-
オーディエンスは誰ですか？
-
学習スタイル、したがって教授のアプローチは、誰が学習をしているかによって大きく異なります。あなたが子供たちに教えたいのであれば、大人を教えるときとは異なるアプローチを取ります。初心者に対して教えるときは、熟練した開発者はすぐにはっきりと分かる基本的なことに集中する必要があります。その質問に答えることで、パスに入れる必要のある情報の深みと深さを定義するのに役立ちます。
-
事前知識が必要ですか？
-
これはパスの使いやすさを定義するために重要です。パスに多くの前提条件がある場合は、難しいパスです。つまり、非常に熟練した人だけが始めることができます。初心者を対象とするパスは、前提条件が比較的少数である必要があります。たとえば、{{Glossary("WebGL")}} を教えるための学習経路を作成したい場合、その経路から学ぶ人は既に {{Glossary("JavaScript")}} を知っていなければなりません。したがって、平均的または熟練した Web 開発者だけがそのようなパスに入ることができます。 これは大丈夫ですが、最初からそれを明確にする方が良いです。
-
- -
-

プロのヒント: これを単独で行うことは困難な時があります。 あなたのアイデアを共有し、フィードバックを収集することをお勧めします。それはあなたのアイデアをテストし、物事を忘れるのを助けるでしょう。これを行うには、MDN ディスカッションフォーラム (テクニカルコンテンツについて話す) と Mozilla ラーニングフォーラム (さまざまな教授法について話す) であなたのアイデアをすべて話すことができます。また、シンプルなメモ帳ツール (Etherpad など) を使用して簡単に情報を共有したり収集したりすることもできます。

-
- -

概念

- -

あなたが誰に何を教えたいのか分かったので、それを行う方法を定義しましょう。

- -

最初に行うことは、チュートリアルのレッスンを小さな個別の部分に分割することです。
- 基本的には、画像を持っていて、ジグソーを使用してパズルのピースを作成するようなものです。小さければ小さいほど良いです。
- 一度それらのすべての作品を持っていたら、それらをグループ化して論理インクリメンタルグループにソートするときです。
- ゼロから完了までの包括的な方法を生み出すために必要なだけ繰り返します。

- -

There is no magic way to acheive this. Each lesson has its own requirement and each teacher has their own teaching method. The way you want to teach something will have a huge impact on how you'll break things into smaller parts. As a reminder, for MDN, ultimately it will be about writing articles and providing exercises for people who will learn by themselves.

- -

Also remember that there is no hard constraint on how to sort things out. If you want to build straight forward learning pathways that's fine. But if you want to build conditional pathways, that's fine too. What is important is to make things clear. You have to put yourself into the learners' shoes. Conception of a learning pathway is not very complicated but can take quite some time.

- -
-

Pro tip: When going to conception, it can be helpfull to discuss things with others (as for the ideation part, see above). Since creating a learning pathway is about structuring information, it can be very helpfull to use some of the techniques that come from UX design such as card sorting. As an example, card sorting was used to figure out how to structure the "How to build a web site" pathway. It helped us break up and sort things out by producing a clear tree of knowledge.

-
- -

作成

- -

Ultimately once you get a clear view of the pathway itself, it is important to start defining the type of content needed for each step of the pathway. On MDN, at a minimum there should be a learning article. Such articles can be associated with various active learning content (basically: exercises). Of course, you can also imagine other types of content such as videos, assessments and tests to validate knowledge, etc.

- -

Once you are clear on those various content requirements, you are ready to shape you pathway on MDN. This is very simple create a new landing page for your pathway under /Learn/tutorial. This landing page must clearly state what the reader will learn as well as any prerequisites necessary to follow that pathway. It also must contain the full list of articles to read with an excerpt for each article. Active learning content can also be listed here but it's not mandatory if they are linked directly inside the related articles.

- -

Once the landing page is ready, it "just" requires creating the necessary content. For that, you have two options:

- - -

Contact us

- - diff --git a/files/ja/mdn/contribute/howto/do_a_technical_review/index.html b/files/ja/mdn/contribute/howto/do_a_technical_review/index.html deleted file mode 100644 index 4896a6fd7d..0000000000 --- a/files/ja/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 技術レビューを行う方法 -slug: MDN/Contribute/Howto/Do_a_technical_review -tags: - - Documentation - - Guide - - Howto - - MDN Meta - - Review - - レビュー -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -

技術レビューは技術的な正確さと記事の完全性の確認と、必要に応じて修正する作業から成ります。記事の執筆者が他人に記事の技術的なコンテンツをチェックしてほしい場合、編集時に「技術レビュー」チェックボックスをチェックします。執筆者が特定の技術者に技術レビューを行うよう依頼することもありますが、その分野の技術に詳しい人は誰でも行うことができます。

- -

この記事は、技術レビューを行う方法について説明します。技術レビューをすることで、MDN のコンテンツを正確にする手助けができます。

- -
-
どのような作業か
-
記事の技術的な正確性と完全性の確認と修正です。
-
行う必要があるものはどれか
-
特に技術レビューが必要だとマークされている記事です。
-
作業を行う上で必要な知識
-
-
    -
  • レビューをする記事の話題に関するエキスパートとしての知識。もしその記事を読んで特に新しい知識が得られないようであれば、自分はエキスパートだと考えてください。
    • -
  • MDN のウィキの記事を編集する方法。
    • -
-
-
作業のステップ
-
-
    -
  1. レビューする記事を選んでください。 -
      -
    1. 技術レビューが必要なページの一覧に行きましょう。この一覧には、技術レビューが必要なページがすべて掲載されています。
      2. -
    2. 自分が詳しい話題のページを選択しましょう。
      3. -
    3. 記事のリンクをクリックしてページを読み込んでください。
      4. -
    -
    2. -
  2. 技術的な詳細に注意を払いながら、記事を読んでください。記事は正しいでしょうか？抜けていることはないでしょうか？最初に選択したページが自分に合わないようであれば、ためらわずに他のページに切り替えましょう。
    3. -
  3. エラーがなければ、レビューを完了するために記事を編集する必要はありません。ページの左のサイドバーにある「クイックレビュー」ボックスを見てください。この黄色いボックスでは、レビュー待ち項目の一覧が表示されており、レビューリクエストフラグを解除することができます。技術レビューがリクエストされていると、以下のようになります。
    - サイドバーに表示されるクイックレビューボックスに技術レビューが表示されている様子
    4. -
  4. 「技術面」のチェックを外し、［保存］をクリックしてください。
    5. -
  5. エラーを見つけて修正しなければならないときは、嬉しいことにレビューリクエストの状態をエディターから変更することができます。手順は以下の通りです。 -
      -
    1. ページを編集するために、ページの先頭付近にある［編集］ボタンを押してください。これで MDN エディター に入ります。
      2. -
    2. 正しくない技術情報を修正したり、欠けている情報を補ったりしてください。
      3. -
    3. 記事の下にあるリビジョンのコメントを入力してください。ここにはどのような編集を行ったかを短いメッセージで、「技術レビュー完了」のように書きます。情報を修正した場合は、それを「技術レビューを行い、引数の説明を修正した」のようにコメントに書いてください。これは他の協力者やサイトの編集者がなぜ変更されたのかを知る手掛かりになります。レビューの品質に達していないと感じた場合は、それを書いてもいいでしょう。
      4. -
    4. ページのリビジョンのコメントのすぐ上、「レビューが必要ですか？」下にある「技術レビュー」ボックスのチェックを外します。
      5. -
    5. ［公開］ボタンを押してください。
      6. -
    -
    6. -
- -

おめでとうございます！これで最初の技術レビューが完了しました。ご協力ありがとうございました。

-
-
diff --git a/files/ja/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ja/mdn/contribute/howto/do_an_editorial_review/index.html deleted file mode 100644 index fbcbb03e99..0000000000 --- a/files/ja/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 編集レビューを行う方法 -slug: MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Documentation - - Editorial Review - - Guide - - Howto - - MDN Meta - - 文書化 - - 編集レビュー -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -

編集レビューは、記事内の誤植、言葉遣い、文法、用法などの間違いの修正などの作業です。 MDN の技術文書に価値ある協力を行うためには執筆の専門家である必要はありませんが、記事には校正や精読が必要です。これが編集レビューで行われます。

- -

この記事は、編集レビューを行う方法について記述します。編集レビューをすることで、 MDN のコンテンツを正確かつ、良く書けたものにする手助けができます。

- -
-
何をすればいいですか？
-
編集レビューが必要であるとマークされた記事の校正と精読です。
-
レビューが必要な記事はどこにありますか？
-
記事内に、編集レビューが必要とマークされています。
-
編集レビューをするには、何を知っておく必要がありますか？
-
日本語の文法と語彙についてよく知っている必要があります。編集レビューとは、正しくわかりやすい文法や言葉を選択する作業です。また、 MDN 執筆スタイルガイドにも従ってください。
-
レビューする手順は？
-
-
    -
  1. レビューする記事を選びます。 -
      -
    1. 編集レビューが必要な記事の一覧に行ってください。この一覧には、編集レビューがリクエストされたすべてのページが表示します。
      2. -
    2. 記事のリンクをクリックしてページを読み込みます。
      - 注: この一覧は自動的に生成されますが、あまり頻繁的ではないので、編集レビューが必要なくなった記事が載っていることもあります。選択した記事に「この記事は編集レビューが必要です」というバナーが表示されていなければ、飛ばして別な記事を選んでください。
      3. -
    -
    2. -
  2. 記事を注意深く読み、誤植、言葉遣い、文法、用法などの間違いがないか確認します。選んだ記事が自分のやりたいものと違っていたら、気にせず別のページに移動してください。
    3. -
  3. これ以上直すべきところがなければ、編集はせずに、レビュー済みとしてマークしてください。ページ左のサイドバーにある「クイックレビュー」ボックスを見てください。
    - レビューリクエストボックス(日本語版)
    4. -
  4. 編集レビューのチェックボックスのチェックを解除して、保存をクリックします。
    5. -
  5. 直すべきところを見つけた場合には、次の手順に従います。 -
      -
    1. 上部にある編集ボタンをクリックします。クリックすると、MDN エディターが開きます。
      2. -
    2. 誤植、言葉遣い、文法、用法などの間違いを見つけたら修正します。一度にすべての箇所を修正しなくても構いません。ただしその場合には、記事全体のレビューが完全に終わったと考えられない限り、編集レビューのリクエストはそのままにしておいてください。
      3. -
    3. 記事の下部にある リビジョンのコメント 欄に 「編集レビュー: 誤植、文法の修正。」のようなコメントを入力します。このようなコメントを書いておけば、他の協力者やサイトの編集者たちが、どの部分がどんな理由で変更されたのかを簡単に知ることができます。
      4. -
    4. レビューが必要ですか？ の下にある 編集レビュー のチェックボックスのチェックを外します。このボックスは、ページの「リビジョンのコメント」セクションのすぐ下にあります。
      5. -
    5. 公開ボタンをクリックします。
      6. -
    -
    6. -
- -
-

あなたが行った変更は、保存直後には表示されないことがあります。背後で行っているページの処理や保存に時間がかかることがあるためです。

-
-
-
diff --git a/files/ja/mdn/contribute/howto/remove__experimental__macros/index.html b/files/ja/mdn/contribute/howto/remove__experimental__macros/index.html deleted file mode 100644 index 90c42d4705..0000000000 --- a/files/ja/mdn/contribute/howto/remove__experimental__macros/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 実験的なマクロをいつどのように削除するか -slug: MDN/Contribute/Howto/Remove__Experimental__Macros -tags: - - MDN Meta - - ガイド - - 方法 -translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros ---- -
{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}
- -

MDN 上のページには、ページによって記述された Web 技術機能が実験的でまだ標準化されていないことを読者に通知するための KumaScript マクロが含まれています。しかし、実験的としてフラグが設定されている項目は標準化されている可能性がありますが、そのページはマクロを削除するために再訪されません。これらの「実験的な」マクロを含むページを見直し、実験的でないアイテムからマクロを削除することで、MDN の改善に役立てることができます。

- -

問題のマクロはページ内の特定の項目にフラグを立てる {{TemplateLink("experimental_inline")}} と、ページ全体にフラグを立てる {{TemplateLink("SeeCompatTable")}} です。

- -
-

Warning: SeeCompatTableの使用は推奨しません。互換性に関するすべてのデータは、ブラウザの互換性表とその中の脚注内に表示されることが期待されています。

-
- -

Here is the definition of "experimental" from the MDN Definitions and Conventions article:

- -

{{page("/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions", "Experimental")}}

- -
-
Where does this task need to be done?
-
-

Pages in the following lists:

- - -
-
What do you need to know to do the task?
-
Knowledge of the standardization or implementation status of the relevant item.
-
What are the steps to do the task?
-
-
    -
  1. Review the page to see what item or items the macro is associated with.
    2. -
  2. Determine whether each item is still experimental or not. The compatibility table on the page may be more current than the the macros; you can also test using the item in multiple browsers.
    3. -
  3. If an item is no longer experimental, remove the "experimental" macro call associated with it. (Note: an item on a summary page that has the {{TemplateLink("experimental_inline")}} macro next to it is often a link to a full reference page, containing the {{TemplateLink("SeeCompatTable")}} macro.
    4. -
  4. Save the page with a comment about what you did.
    5. -
  5. If you have removed all "experimental" macros from a page (for inline macros, you might remove only some of them), force a refresh (Shift+Refresh) on the relevant search results page (linked above) to ensure that the list is updated.
    6. -
-
-
diff --git a/files/ja/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html b/files/ja/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html deleted file mode 100644 index f268a9957b..0000000000 --- a/files/ja/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 世話人のいる開発者文書リクエストの解決方法 -slug: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request -tags: - - Beginner - - Documentation - - Guide - - MDN Meta -translation_of: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request ---- -
{{MDNSidebar}}
- -

MDN Web Docs プロジェクトには、 Mozilla の Bugzilla インスタンスに、変更をリクエストする大きなバックログがあります。問題を修正してリクエストを閉じていただくことによって MDN を改善することができます。

- -

どこにで実施する必要があるのか

- -

Mentored MDN bugs on Codetribute から見つけることができます。 Bugzilla の課題は、改善のリクエストや新しい素材や機能のアイディアも含めて、すべて「バグ」と呼ばれています。このリストのバグは MDN に初めて協力している人にとって良いものと判断されたものであり、問題を解決する上でガイダンスやアドバイスを行ってくれる世話人が割り当てられています。

- -

タスクを実行するのに知っておく必要があることは何か

- -

選択した作業のリクエストの主題に詳しい必要があります。MDN の編集や Bugzilla の利用にいくらか馴染んでおくといいでしょう。

- -

どのようなステップで行うのか

- -
    -
  1. 関心のありそうで、自分の知識の範囲内にあるリクエストを選択してください。完全に分かっていないものを選択しても、その中で必要なことを合理的に学ぶことができるのであれば構いません。
    2. -
  2. リクエストを注意深く読んで、何がリクエストされているかを確認してください。また、 Mentors (世話人) フィールドに挙がっている名前に注意してください。世話人は、あなたのような人がリクエストを処理することを助けるために打ち込んでいる人です。
    3. -
  3. まだ済んでいないのであれば、 Bugzilla のアカウントを作成してください。
    4. -
  4. 処理するリクエストを決めたら、リクエストを自分自身に割り当ててください。 Assigned To フィールド (名前やメールアドレスを入れるところ) の隣にある "take" リンクをクリックし、それから Save Changes ボタンをクリックしてください。世話人はリクエストの所有権をあなたが取ったことを知ります。
    5. -
  5. MDN でリクエストを満たすために必要な作業を行います。世話人に質問する必要があれば、リクエストにコメントを追加してください。仕事が基本的に終わったか、世話人にレビューを依頼するのもいいでしょう。
    6. -
  6. リクエストが満たされたことをあなたと世話人が確認したら、 Status を RESOLVED に変更し、解決状況を FIXED にして Save Changes をクリックしてください。
    7. -
- -

以上です。文書のバグ修正は完了です。

diff --git a/files/ja/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ja/mdn/contribute/howto/set_the_summary_for_a_page/index.html deleted file mode 100644 index 0c560dbc04..0000000000 --- a/files/ja/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: ページに概要を設定するには -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Documentation - - Guide - - Howto - - MDN Meta - - SEO - - Summaries - - Summary -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -

この記事では、 MDN Web Docs サイトにおける SEO summary (description または単に summary とも) を設定する方法を示します。この概要はいくつもの用途で使用されます。

- - - -

したがって、概要は記事自体の文脈でも、他の文脈内に単独で表示された場合でも、意味が分かるようにしてください。また、概要のテキストを書く際には MDN 執筆スタイルガイドを意識しておいてください。

- -

既定の概要

- -

概要のないページは、既定の概要が明確に設定されます。既定では、概要のテキストは、 {{Glossary("HTML")}} の最初の題名ではなくテキストの内容と見られるブロックのテキスト全体です。しかし、これが使用するのに最適なテキストとはならない可能性がいくつもあり得ます。

- - - -

明示的にページの概要を設定し、概要ができるだけ有益になるようにするのが最善です。

- -

概要の設定

- -

ページの概要の設定についての方法を見てみましょう。

- -
訳注: 以下の説明は、英語版における操作方法です。英語からの翻訳ページの場合は、まず英語版の概要を修正した上で、日本語版ページ翻訳を反映してください。
- -

どのような作業か

- -

他の文脈で概要として使用するページ内のテキストをマークします。適切なテキストが利用できない場合は、適切な短いテキストを書く作業も含まれるかもしれません。

- -

どこで行う必要があるのか

- -

概要のないページ、概要があるが有益ではないページ、概要が推奨されるガイドラインに合っていないページです。

- -

この作業で必要なスキル

- -

MDN エディターが使えること。英語でよい文章を書くスキル。良い要約を書くために、主題に十分通じていること。

- -

作業のステップ

- -
    -
  1. 概要を設定するページを選択してください。すでにあるのであれば、素晴らしい！ステップ2まで飛ばしてください。そうでなければ、修正するページを探します。 -
      -
    1. MDN 文書化状況のページで、よく知っている主題 (例えば HTML) の Sections の下のセクションをクリックします。
      -
      2. -
    2. 主題についての文書化ステータスのページで、Summary 表の Pages をクリックします。その主題の節にあるすべてのページの索引が表示されます。左の列にはページへのリンクが、タグと概要は右の列に表示されます。
      -
      3. -
    3. 概要がないか、概要が良くないページを選択します。
      -
      4. -
    4. リンクをクリックしてそのページへ移動します。
      5. -
    -
    2. -
  2. 概要を追加したいページに来たら、 編集 をクリックして、ページを MDN エディター内に開きます。エディターの使用についての情報が必要であれば、 MDN エディター UI のガイドを参照してください。
    3. -
  3. 文脈の外に出しても概要として使える1～2文を探します。必要であれば、1～2文でよい概要として選択できる文になるようテキストを作成または変更します。{{anch("Crafting a good summary", "よい概要の作成")}}を見ると、適切な概要を選択したり作成したりするのに役立ちます。
    4. -
  4. 概要として使用するテキストを選択します。
    5. -
  5. エディタツールバーの Styles ウィジェットで、 SEO Summary を選択します。ページのソースでは、選択したテキストが、 class="seoSummary" をつけた {{HTMLElement("span")}} 要素で囲まれます。
    -
    6. -
  6. リビジョンのコメントをつけて変更を保存します。コメントは必須ではありませんが、付けることを強く推奨します。そうすることで、他の人が変更を追跡しやすくなります。付けるのを勧める。「SEO summary を設定」のようなものでも充分です。
    7. -
- -

よい概要の作成

- -

概要は以下のような、多数の異なるシナリオで使用されます。

- - - -

概要を作成する上で、これらのシナリオを念頭に置いておくことが重要です。これらの場面のすべてで概要がよく機能することを保証できるように、以下のガイドラインに従ってみてください。

- -
-

メモ: 他に特別に示されていない限り、これらはガイドラインであり、杓子定規の規則ではありません。これらのガイドラインに合うようにするべきですが、時には避けられない例外もあります。

-
- - - -

この概要は、本の裏表紙または表紙の内側の宣伝文句 ({{interwiki("wikipedia", "en:blurb")}}) に似ていると考えてください。この短いテキストは、すばやく読者の注意を惹き、読み進める気を起させるものです。読者の注意をすばやくキャッチし、読者に読み進めてもらう必要があります。

- -

検索エンジンの結果ページと記事テキスト自体の両方でうまく機能する概要を書くことは少し難しいかもしれませんが、現在 MDN はページの内容とは別に SEO 用の概要を作成する方法を提供していませんので、できる範囲でやってください。

- -

関連情報

- - diff --git a/files/ja/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ja/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index 22a77ce10c..0000000000 --- a/files/ja/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: JavaScript ページのタグ付け方法 -slug: MDN/Contribute/Howto/Tag_JavaScript_pages -tags: - - Guide - - Howto - - JavaScript - - MDN Meta - - ガイド - - 入門 -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}
- -

タグ付けはページにメタ情報を追加することであり、検索ツール等において関連するコンテンツをグループ化することができます。

- -
-
どこに設定すべき？
-
JavaScript 関連のページでタグの無いもの (日本語版)のどれか{{訳注("日本語版のステータスページにはタグの無いページのリストがありません")}}
-
タグ付けするために知っておくべきことは？
-
メソッドやプロパティとは何か、というような、基本的な JavaScript コーディングの知識。
-
どんな手順でやればいいの？
-
-
    -
  1. 上記リンクにあるリストから、対象のページを選びます。
    2. -
  2. 記事のリンクをクリックして、ページをロードします。
    3. -
  3. ページがロードできたら、上の方にある 編集 ボタンを押します。するとMDNエディターが始まります。
    4. -
  4. 最低でも JavaScript タグは付けるべきです。以下のようなタグも付けましょう。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    タグ使う対象のページ
    Methodメソッドのページ
    Propertyプロパティのページ
    prototypeプロトタイプのページ
    オブジェクトの型名オブジェクトのメソッドのページ。例えば、 String.fromCharCode には String タグをつけるべき
    ECMAScript6 と Experimental新しい ECMAScript バージョンで追加される機能のページ
    Deprecated非推奨の (deprecated) 機能のページ (使うことが推奨されないが、まだサポートされている機能)
    Obsolete廃止された (obsolete) 機能のページ (最近のブラウザーがサポートしない機能)
    その他これ以外にどんなタグがあるのかは、 MDN タグ付け標準をご覧ください。
    -
    5. -
  5. コメントを付けて保存します。
    6. -
  6. 完了です！
    7. -
-
-
diff --git a/files/ja/mdn/contribute/howto/use_navigation_sidebars/index.html b/files/ja/mdn/contribute/howto/use_navigation_sidebars/index.html deleted file mode 100644 index c618e45ccb..0000000000 --- a/files/ja/mdn/contribute/howto/use_navigation_sidebars/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: ナビゲーションサイドバーの使い方 -slug: MDN/Contribute/Howto/Use_navigation_sidebars -tags: - - Documentation - - Draft - - HTML - - MDN - - MDN Meta - - MDN Web Docs - - Macros - - Meta - - NeedsContent - - Tutorial - - sidebars - - マクロ -translation_of: MDN/Contribute/Howto/Use_navigation_sidebars ---- -

{{MDNSidebar}}{{Draft}}

- -

MDN の操作はよくサイドバーを用いて行われ、これは一連の記事や、同じ系列のドキュメントと MDN の他の領域の両方における関連コンテンツを列挙します。 MDN のサイドバーは自動的には生成されません。ページにサイドバーを入れるには、いくらかのマクロを作成し使用する必要があります。この記事では、 MDN サイドバーマクロの作成と記事内での使用方法の両方の手順を確認します。

- -

現在の MDN のサイドバーマクロ

- -

MDN には既に、サイドバーを生成するたくさんのマクロがあります。多くは MDN の特定のセクションに特化していますが、他に、特化したものがない文書領域のための一般的なサイドバーを生成するためのものがあります。

- -
-
{{TemplateLink("AddonSidebar")}}
-
アドオンの文書を操作するためのサイドバーを挿入します。これは主にブラウザー拡張機能の作成についてのコンテンツです。
-
{{TemplateLink("APIRef")}}
-
API インターフェイスのリファレンスページおよびサブページで使用されるサイドバーを挿入します。
-
{{TemplateLink("CanvasSidebar")}}
-
HTML/DOM Canvas の文書の中で使用されるサイドバーを挿入します。
-
{{TemplateLink("DefaultAPISidebar")}}
-
特化したサイドバーのタイプがない API の API 概要ページで使用することができる既定のサイドバーを挿入します。
-
{{TemplateLink("FirefoxSidebar")}}
-
Firefox に特化した文書で使用されるサイドバーを挿入します。
-
{{TemplateLink("GamesSidebar")}}
-
ウェブ技術を使ったゲーム開発に関する MDN のコンテンツを操作するサイドバーを挿入します。
-
{{TemplateLink("HTMLSidebar")}}
-
MDN の HTML 文書で使用されるサイドバーを挿入します。
-
{{TemplateLink("HTTPSidebar")}}
-
MDN の HTTP 文書内のページで使用するためのサイドバーを挿入します。
-
{{TemplateLink("JSSidebar")}}
-
JavaScript 文書で使用するためのサイドバーを挿入します。
-
{{TemplateLink("LearnSidebar")}}
-
学習エリアのサイドバーを挿入します。
-
{{TemplateLink("MDNSidebar")}}
-
MDN の「メタ文書」、つまり、 MDN Web Docs サイト自体の利用や編集に関する文書を操作するサイドバーを挿入します。このページで実際にマクロが使われているのを見ることができます。
-
{{TemplateLink("ServiceWorkerSidebar")}}
-
サービスワーカーについての文書で使用されるサイドバーを挿入します。
-
{{TemplateLink("SpiderMonkeySidebar")}}
-
SpiderMonkey (Mozilla の JavaScript エンジン) のページに使用するサイドバーを挿入します。
-
{{TemplateLink("ToolsSidebar")}}
-
Firefox 開発ツールについてのページを列挙するサイドバーを挿入します。
-
{{TemplateLink("WebAssemblySidebar")}}
-
WebAssembly に関するリンクを含むサイドバーを挿入します。
-
{{TemplateLink("WebExtAPISidebar")}}
-
ブラウザー拡張 (WebExtension) についての API リファレンス文書を操作するために使われるサイドバーを挿入します。
-
{{TemplateLink("WebGLSidebar")}}
-
WebGL に関するコンテンツの操作を提供するサイドバーを挿入します。
-
{{TemplateLink("WebRTCSidebar")}}
-
MDN の WebRTC 文書の操作を提供するコンテンツのサイドバーを挿入します。
-
{{TemplateLink("XSLTRef")}}
-
XSLT, EXSLT, XPath についての文書のサイドバーを挿入します。
-
- -

サイドバーの使用

- -

サイドバーをページに追加するには、正しいマクロを探し、それから、サイドバーを挿入したいページで、「編集」ボタンをクリックしてください。ページに {{HTMLElement("p")}} ブロックを追加して、中身はマクロを呼ぶだけにしてください。そうすれば、マクロ呼び出しを追加することができます。通常、サイドバーマクロは引数を必要としませんので、単に次のように書くことができます。

- -
<p>\{{MDNSidebar}}</p>
- -

通常は、これを文書の最初の行に入れてください。一部の文書では、代わりに末尾に入っています。これはうまく動作しますが、一貫性を保証するために、できれば先頭に配置してみてください。

- -

すでにマクロを呼び出す {{HTMLElement("p")}} ブロックがページの先頭にある場合、例えばバナーを生成する \{{Non-standard_Header}} などがある場合は、次のように同じ {{HTMLElement("p")}} の中にサイドバーのマクロを入れることができます。

- -
<p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p>
- -

サイドバーの作成

- -

詳細は執筆中

- -

{{TemplateLink("SidebarUtilities")}} について触れておきます。

- -

サイドバーの構築に役立つマクロがいくつかあります。

- -
-
{{TemplateLink("ListSubpagesForSidebar")}}
-
指定されたページのサブページを使用して、サイドバー内で利用するために構築されたリンクのツリーを生成します。
-
diff --git a/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html new file mode 100644 index 0000000000..6695ab0969 --- /dev/null +++ b/files/ja/mdn/contribute/howto/write_an_api_reference/sidebars/index.html @@ -0,0 +1,132 @@ +--- +title: API リファレンスサイドバー +slug: MDN/Structures/API_references/API_reference_sidebars +tags: + - API + - Documentation + - Guide + - MDN + - MDN Meta + - Reference + - groupdata + - metadata + - onboarding + - sidebars +translation_of: MDN/Structures/API_references/API_reference_sidebars +--- +
{{MDNSidebar}}
+ +

API リファレンスページにカスタムサイドバーを追加して、関連するインターフェイス、チュートリアル、およびその API に関連する他のリソースへのリンクを表示することができます。この記事ではその方法を説明します。

+ +

サイドバーの作成

+ +

API サイドバーを作成するには、次の3つの手順を実行する必要があります。

+ +
    +
  1. API リファレンスページを作成します
    2. +
  2. 特定の API の項目を KumaScript リポジトリの GroupData.json データファイルに追加します
    3. +
  3. {{TemplateLink("APIRef")}} マクロを使用して、表示したい各ページにサイドバーを挿入します
    4. +
+ +

これらのステップを順番に実行しましょう。この記事で参照する例は、Fetch API です。

+ +

API リファレンスページの作成

+ +

サイドバーをページに追加する前に、ページ自体を作成する必要があります (詳細については、API リファレンスに必要なものガイドを参照してください)。

+ +

GroupData.json への項目の追加

+ +

GroupData.json ファイルには、API 参照サイドバーに表示されるリンクに関するすべてのデータが格納されます。呼び出されると、{{TemplateLink("APIRef")}} マクロは引数として与えられた API 名を取り、GroupData.json でその名前を検索し、適切なサイドバーを作成してページに挿入します。

+ +

GroupData.json に項目を追加するには、以下を行う必要があります。

+ +
    +
  1. GitHub アカウントを持っていることを確認します
    2. +
  2. KumaScript リポジトリをフォークし、新しいブランチを作成して変更を保存し、リポジトリをローカルにクローンします
    3. +
  3. 作業を開始する前に新しいブランチをチェックアウトし、作業が終わったら変更を押してください
    4. +
  4. プルリクエストを作成して、MDN チームがあなたの作業をレビューし、必要に応じて変更を求めることができるようにします
    5. +
+ +

GitHub の使用についてサポートが必要な場合は、互換性一覧表に詳細なガイドがあります。

+ +

GroupData.json ファイルは、KumaScript リポジトリの macros ディレクトリ内にあります。それを見ると、巨大な JSON 構造があり、それぞれの API に独自のメンバーがあります。名前は API 名で、値は生成するサイドバーリンクを定義するいくつかのサブメンバーを含むオブジェクトです。

+ +

たとえば、MDN の Fetch API ページを見てください。 GroupData.json の対応する項目は次のようになります。

+ +
"Fetch API": {
+    "overview":   [ "Fetch API"],
+    "interfaces": [ "Body",
+                    "Headers",
+                    "Request",
+                    "Response",
+                    "FetchController",
+                    "FetchObserver",
+                    "FetchSignal",
+                    "ObserverCallback" ],
+    "methods":    [ "WindowOrWorkerGlobalScope.fetch()" ],
+    "properties": [],
+    "events":     []
+},
+ +

ご覧のとおり、名前には "Fetch API" を使用し、オブジェクト値の内側には多数のサブメンバーが含まれています。

+ +

GroupData 項目内に含めるサブメンバー

+ +

この節では、GroupData 項目に含めることができるすべてのサブメンバーを一覧表示します。

+ +

リストされたサブメンバーの中に含まれる値のほとんどは、リンクテキストと、表示されるリンクの最終的な URL を生成するためのメイン API インデックスページ — https://developer.mozilla.org/<language-code>/docs/Web/API — の最後に追加されたスラッグの両方に相当することに注意してください。そのため、例えば "Body" とすると、 en-US ロケールではこのようなリンクが生成されます。

+ +
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Body</a></li>
+ +

いくつかの例外があります。例えば "guides" サブメンバーには、関連するガイド/チュートリアルへのリンクを定義するリンク情報 (タイトルとスラッグ) が1つ以上含まれています。この場合、スラッグは MDN の docs ルート — https://developer.mozilla.org/<language-code>/docs — の最後に追加され、MDN のどこにでも記事を含めることができます。

+ +

以下が利用可能なメンバーです。それぞれの場合、ロケールが en-US であると仮定した例が含まれています。これらはすべて技術的にはオプションですが、これらを省略する代わりに空の配列を含めることを強く推奨します。

+ +
    +
  1. +

    "overview" — 値は配列で、 API 概要ページがあればその中にスラッグを含めます。"Fetch API" の場合、 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API へのリンクが生成されます。

    +
    2. +
  2. +

    "interfaces" — 値は配列で、その API の一部を構成するすべてのインターフェイスをリストアップする必要があります。 "Body" の場合は https://developer.mozilla.org/en-US/docs/Web/API/Body へのリンクが生成されます。

    +
    3. +
  3. +

    "methods" — 値は、 {{domxref("Navigator")}} や {{domxref("Window")}} で生成されたインスタンス化メソッドなど、仕様が他の API に関連付けられたインターフェイスに追加するメソッドを含む配列です。膨大な数のメソッドがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 "WindowOrWorkerGlobalScope.fetch()" を実行すると https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch へのリンクが張られます。同じ API が所有するインターフェイスのメンバーであるメソッドを重複してリストアップしないようにしましょう。

    +
    4. +
  4. +

    "properties" — 値は、 API に関連付けられたすべてのプロパティを含む配列です。これには API 仕様で定義されているインターフェイスのメンバーであるプロパティや、API が他のインターフェイス上で定義しているプロパティを含めることができます。膨大な数のプロパティがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に配置することを検討するとよいでしょう。 "Headers.append" を実行すると、 https://developer.mozilla.org/en-US/docs/Web/API/Headers/append へのリンクが生成されます。

    +
    5. +
  5. +

    "events" — 値は、 API の仕様やその他の場所で定義されている API に関連するすべてのイベントを含む配列です。膨大な数のイベントがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 "animationstart" を実行すると、 https://developer.mozilla.org/en-US/docs/Web/Events/animationstart へのリンクが生成されます。

    +
    6. +
  6. +

    "guides" — 値は、API の使用方法を説明するガイドへのリンクを定義する1つ以上のオブジェクトを含む配列です。各オブジェクトは、ガイド記事を指す部分的な URL を含む "url" と、リンクのリンクテストを定義する "title" の2つのサブメンバーを含みます。例として、次のようなオブジェクトがあります。

    + + 
    { "url":   "/docs/Web/API/Detecting_device_orientation",
+"title": "Detecting device orientation" }
    + +

    "Detecting device orientation" というタイトルのリンクを生成し、 https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation を指します。

    +
    7. +
  7. +

    "dictionaries" — API の一部であるすべての辞書を一覧にした文字列の配列。一般的に、特別な意味がある場合や、複数のページから参照する必要がある場合を除き、複数のプロパティやメソッドで使用される辞書のみをここにリストアップすべきです。 "RTCConfiguration" の場合は https://developer.mozilla.org/en-US/docs/Web/API/RTCConfiguration へのリンクを表示します。

    +
    8. +
  8. +

    "types" — API で定義されている型定義子と列挙型の配列。リストを短くするために、特別に重要なものや複数のページから参照されるものだけをリストアップすることもできます。 "RTCCodecType" は https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecType へのリンクを生成します。

    +
    9. +
  9. +

    "callbacks" — 値は、その API で定義されているすべてのコールバック型のリストを含む配列です。コールバック型を含む API であっても、このグループを使用する必要はないと思われるかもしれません。文字列 "RTCSessionDescriptionCallback" を含むこの配列の項目は、 https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescriptionCallback へのリンクが生成されます。

    +
    10. +
+ +

サイドバーで使用されるタグ

+ +

サブメンバーによっては、ページタグに基づいて子ページから自動的に発見されるものがあります。最上位 API 以下のページはサイドバーがレンダリングされるたびにクロールされ、メソッド ("Method" タグ)、プロパティ ("Property" タグ)、コンストラクター ("Constructor"タグ) の項目が自動的に生成されます。

+ +

サブメンバーにも、タグに基づいた警告アイコンが自動的に表示されます。実験的な ("Experimental" タグ)、標準外 ("Non Standard" または "Non-standard" タグ)、非推奨 ("Deprecated" タグ)、廃止 ("Obsolete" タグ) サブメンバーには装飾が追加されます。

+ +

タグベースの処理に関する詳細情報は、 APIRef ソースの中にあります。

+ +

サイドバーの挿入

+ +

GroupData.json に API の項目を追加してプルリクエストとして送信し、その変更がメインリポジトリに受け入れられたら、 {{TemplateLink("APIRef")}} マクロを使用して API リファレンスページに設置することができ、 GroupData の API に引数として使用されます。例として、 WebVR API のサイドバーは、各ページに次のように設置されています。

+ +
\{{APIRef("WebVR API")}}
diff --git a/files/ja/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ja/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html deleted file mode 100644 index 6f8ae106d1..0000000000 --- a/files/ja/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: ウェブ学習者に役立つ記事を書く方法 -slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Guide - - Howto - - Learn - - MDN Meta -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web ---- -
{{MDNSidebar}}
- -

MDN の学習エリアには、ウェブ開発の初心者向けの記事がまとまっています。ほとんどの内容が初心者向けであるため、知識を共有したりウェブへの入門者を手助けするのに良い場所となっています。ウェブ開発初心者でも内容を理解できることが大事なので、それについて特に注意を払っています。

- -

この記事は学習エリアのページの書き方を説明しています。

- -
-

訳注: この記事は英語の学習エリア記事を新規作成する方法について述べています。日本語の記事は英語記事を翻訳して作成してください。英語ページに該当する記事がない場合は、まず英語記事を作成してください。

-
- -

学習エリアの記事の書き方

- -

知識を持って協力を始めるには、大きな緑色のボタンをクリックし、以下の5つのステップに従ってください。アイディアを探しているのであれば、 Trello のチームのボードを参考にしてみてください。

- -
学習エリアの記事を書く
- -

この記事の場所は正しくないかもしれませんが、少なくとも MDN 上にあります。もし正しい場所へ移動するために誰かと連絡を取りたい場合、ご連絡ください。

- -

ステップ 1: 最初の2文を書く

- -

記事の1文目には、書こうとしている主題の要約を書く必要があります。2文目には記事に書こうとしている項目をもう少し具体的に書きましょう。例えば下記のようになります。

- -
-

{{glossary("HTML")}} ファイルが構造的なコンテンツを持つ一方、もうひとつの主要なウェブ技術である {{Glossary("CSS")}} は、コンテンツを望み通りの外見にします。この記事では、この技術がどのように動いているのかと、基本的な書き方のサンプルを紹介します。

-
- -

上記の例では、CSS がページをスタイルするためのウェブ技術の核であることを簡潔に説明しています。これにより、読者は記事が対象とする範囲を予想するのに十分な情報を得ることができます。

- -

学習エリアの主な対象者は初心者です。そのため個々の記事は、読者があまりにも多い情報に圧倒されないように、1 つの単刀直入なテーマを対象にすべきです。もし要約が 1行に収まらない場合、1 つの記事に過剰な内容を書こうとしているかもしれません！

- -

ステップ 2: 上部ボックスを追加する

- -

上部ボックスを追加して、読者が学習プロセスのどこにいるのか理解しやすくしてください。これは「URL とは何か」の上部ボックスの例です。記事を書く際に、この記事をモデルとして使用することができます。

- - - - - - - - - - - - -
前提知識:まずインターネットの仕組み、ウェブサーバーとは何か、および ウェブ上のリンクの背後にある概念を知っておく必要があります。
到達目標:URL の内容とウェブ上での URL の仕組みを学習します。
- -
-
前提知識
-
読者が記事を読む際に事前に知っておくべきことを書きます。可能なら、個々の前提知識に、その概念を網羅する他の学習エリア記事のリンクをつけます (本当に初歩の記事で、前提知識を網羅する要求しない場合を除く)。
-
到達目標
-
読者が記事を読んだ後に何を学べるかを簡潔に書きます。記事の冒頭に書く要約とは少し違って、この到達目標の節では、読者が記事を読むことで達成を期待されるものを具体的に示します。
-
- -
-

メモ: この表を作るには、上記の例をコピーして貼り付けるか、 MDN エディターの表ツールを使用してください。表ツールを使う場合は、 CSS に learn-box クラスを、既定値の standard-table クラスに加えて追加する必要があります。このために、表のプロパティを作成または編集する際に、「高度な設定」パネルに行きスタイルシートクラス欄に "standard-table learn-box" を設定してください。

-
- -

ステップ 3: 詳細説明を書く

- -

次に、記事で最も強調したい概念についての徹底的な概要となるような、もっと長くて詳細な説明を書きましょう。なぜ読者が時間を費やしてこの記事を読み、その内容を学ぶべきかについての説明を忘れないように！

- -

ステップ 4: 深掘りする

- -

これまでの部分をやり終えたら、トピックを深掘りしましょう。記事を好きなように構造化して問題ありません (ただし、スタイルガイドを気軽に参照ください)。この部分はあなたの記事を輝かせるチャンスです！書こうとしている内容を詳しく説明しましょう。参考情報へのリンクを加え、その技術がどのように動くのかを詳しく説明し、文法や使い方の詳細などを書きましょう。すべてあなた次第です！

- -

ガイドとして、以下は初心者向けの書き方のコツです。

- - - -

関数 — 再利用可能なコードブロックの記事には良い説明が含まれています。参考にしてみてください。

- -

ステップ 5: 「アクティブラーニング」の教材を提供する

- -

記事を解説し読者の理解を助けるために、実習、チュートリアル、達成すべきタスクを提供しましょう。読者は記事で説明されている概念を実際に使ったり、実験したりしてみることで、脳内に情報を強く結びつけることができます。

- -

用例はライブデモのように記事に直接含めることもできますし、リンクすることもできます。もしそういった価値のある教材の作成に興味があるなら、インタラクティブな学習用教材を作成する方法の記事を読んでみてください。

- -

もしアクティブラーニング教材へのリンクを提供できない (知らない・時間がなくて作れない) 場合は、記事に {{Tag("NeedsActiveLearning")}} タグを追加してください。そうすれば、他の協力者が、アクティブラーニングを必要とする記事を見つけやすくなり、収集するのを手伝うことができます。

- -

実習: 別な要素の選択 をインタラクティブな学習用教材として、 アクティブラーニング: scopeで遊んでみよう をファイルをダウンロードし、編集するステップを踏みながら学んでいくような、別のスタイルの実習サンプルとして参考にしてください。

- -

ステップ 6: 記事のレビューを受け、ナビゲーションメニューに追加する

- -

記事を書き終えたら、我々が確認とレビューを行ない、改善点を提案できるように教えてください。再掲になりますが、連絡を取るための最善の方法は連絡方法の節をご覧ください。

- -

記事を完了するためのもうひとつのタスクは、その記事を学習エリアのメインナビゲーションメニューに追加することです。このメニューは、編集するのに特別な許可が必要な LearnSidebar macro によって生成されています。そのため、追加するには我々のチームにご連絡ください。

- -

メニューは少なくとも、あなたの記事には追加すべきです。 — マクロの \{{LearnSidebar}} をページ最上部の段落に加えましょう。

- - - -

おすすめの記事

- -

何か記事を書きたいけど、何を書けばいいか分からないでしょうか？

- -

学習エリアのチームは書くべき記事のアイデアを Trello のボードで管理しています。好きなものを選んで取りかかってください！

diff --git a/files/ja/mdn/contribute/howto/write_interface_reference_documentation/index.html b/files/ja/mdn/contribute/howto/write_interface_reference_documentation/index.html deleted file mode 100644 index 5ac438ec39..0000000000 --- a/files/ja/mdn/contribute/howto/write_interface_reference_documentation/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Mozilla インターフェイスのリファレンス文書の書き方 -slug: MDN/Contribute/Howto/Write_interface_reference_documentation -tags: - - Guide - - Howto - - MDN Meta -translation_of: MDN/Contribute/Howto/Write_interface_reference_documentation ---- -

{{MDNSidebar}}

- -

この記事では、 Mozilla のインターフェイスのために、適切にフォーマットされた有用なドキュメントを作成する方法を示します。それぞれのインターフェイスは、記事のタイトルをインターフェイスの名前にして、個別の記事で文書化されなければなりません。

- -
-

重要: 私たちは、Mozilla 内部のインターフェイス (ほとんどが nsI で始まる) を MDN 上で積極的にドキュメント化することはもうありません。これらのドキュメントが将来どこに置かれるべきかの最終決定はまだ検討中ですが、それまでの間、あなたの時間を使って MDN にドキュメントを書くことは一般的にお勧めしません。

-
- -

Learn by example

- -

See our sample interface document for a fictional interface that implements all the features of a complete interface reference document. This article can serve as a helpful template when documenting an interface.

- -

Interface reference sections

- -

Each interface reference article has at least an introduction section (which has no heading). The introduction should provide an overview of what the interface is used for.

- -

Following the table of contents, use the {{TemplateLink("IFSummary")}} macro to describe the location and status of the interface in the source tree.

- -

The parameters to the IFSummary macro are:

- -
-
Path of the IDL file defining the interface
-
This is used to create a link to the interface's IDL on MXR so the reader can refer to it if they wish.
-
Parent interface
-
This is the name of the interface upon which the interface being documented is based. This will be turned into a link to that interface in the interface reference and displayed.
-
scriptable/not scriptable
-
A string indicating whether the interface is scriptable or not. You must use either "scriptable" or "not scriptable" (these are, however, case insensitive). This will be turned into an appropriate indicator in the box, colored green for scriptable interfaces or red for non-scriptable ones. The indicator will also include a link to an article explaining what this means.
-
Last changed in what Gecko version
-
This is a string indicating the version of Gecko in which the interface was last changed. It should be a string in standard Gecko version format, such as "1.9" or "1.9.2" or even "1.9.1.6".
-
Summary{{Optional_Inline}}
-
A brief textual summary of what the interface does. Should be just a sentence or two. This is only optional for backward compatibility with old interface documents using the now deprecated InterfaceStatus macro (which now calls through to this one). You should always provide this.
-
Version introduced{{Optional_Inline}}
-
If you know the version of Gecko in which the interface was introduced, include that here. This will trigger the inclusion of a version timeline diagram showing the availability of the interface in relation to the history of Gecko.
-
Version deprecated{{Optional_Inline}}
-
If the interface is deprecated, include that here. This will be used when drawing the version timeline diagram.
-
Version obsoleted{{Optional_Inline}}
-
Similarly, if the interface is obsolete and no longer available at all, include the Gecko version in which that took effect.
-
- -
-
{{todo("Should describe the 'Implemented by' section here")}}
-
- -

All other sections are usually optional, but may be necessary depending on the interface. The optional sections are:

- -

Method overview

- -

The method overview is a table that simply lists all the method signatures for each method provided by the interface. The method's name should be a clickable link to the method description itself. Ideally, the methods should be listed in alphabetical order.

- -

If a method supports multiple types for a given input parameter, you can list them using the format [type1, type2, ..., typeN].

- -

Attributes

- -

The attributes section consists of a three column table. The first column contains the names of each attribute offered by the interface. The second column indicates the types of each attribute; these types should be links for non-simple types. The third column should describe the attribute, explaining its use and providing any details needed. Please list the attributes in alphabetical order; you can sort the table after the fact by right-clicking in it; there's a "Sort Table" option in the contextual menu.

- -

定数

- -

Each group of constants should have a sub-section containing a table describing the relevant constants. The table should have three columns: Constant (the names of the constants), Value (their values), and Description (descriptive text explaining the use of the constant).

- -

Methods

- -

The methods section provides detailed documentation for each method offered by the interface. Within the methods section should be a subsection for each method. Each method's subsection name should include closing parentheses (such as "parseAsync()" in the {{Interface("nsIFeedProcessor")}} interface reference.

- -

The methods should be listed in the same order in which they appear in the "Method overview" section.

- -

Each method's subsection should begin with a description of what the method does, followed by the actual method signature itself. Each parameter to the method should be on a separate line for clarity.

- -

After the method signature should come a "Parameters" subsection. In order to avoid cluttering the table of contents for the page, we use <h5>Parameters</h5> to define the Parameters subsection's heading.

- -

The parameters are then listed with descriptions of each parameter using definition list format. If there are no parameters, write the word 'None' under the Parameters heading.

- -

If the method has a return value, include a "Return value" subsection, using the form <h5>Return value</h5>. This subsection should simply explain the return value, its type, and if applicable its possible values.

- -

If the method can throw exceptions, a similar "Exceptions thrown" subsection should be included, containing a definition list style list for each possible exception.

- -

Remarks

- -

Any general comments that apply to the interface as a whole may be placed in the Remarks section.

- -

See also

- -

If links to other interfaces, or to any other documents, might be helpful to the reader, these should be listed in the "See also" section.

- -

Categorizing articles

- -

Each article that documents an interface needs to be added to the Interfaces category by adding the "Interfaces" tag. Likewise, the article should have any other appropriate tags.

- -

Finding articles that need help

- -

Look through the interface list and see if any are marked as being in the category NeedsMarkupWork. These are interfaces that we know need to be reformatted into our new layout. If you clean one up, remove the line that adds it to that category.

diff --git a/files/ja/mdn/contribute/onboarding/index.html b/files/ja/mdn/contribute/onboarding/index.html deleted file mode 100644 index 097e2bd38b..0000000000 --- a/files/ja/mdn/contribute/onboarding/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 'MDN web docs: 搭乗ガイド' -slug: MDN/Contribute/Onboarding -tags: - - MDN Meta - - ガイド - - ドキュメント - - 初心者 - - 書き方 -translation_of: MDN/Contribute/Onboarding ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -

この文書では、 MDN でフルタイムで作業するプロのライターが、始めるにあたって知っておくべきトピックについて説明します。気軽な態度で MDN に協力する場合は、気にする必要はありません。いきなり始めることができます。また、興味があるのであれば暇な時に読んでいただいても構いません。

- -

MDN web docs とは

- - - -

ガイドライン

- -

以下は、プロのライターが一般的に新しい環境で働き始める前に知りたいと思うことです。

- - - -

MDN wiki の基本的な使い方

- -

以下の記事は、 MDN でコンテンツの作成を始めるのに必要な基本的な情報を説明しています。

- - - -

高度な使い方

- -

以下の記事では、 MDN wiki の機能のうち、すぐには必要ないかもしれませんが、最終的には遭遇する可能性のある機能について説明しています。

- - - -

プロセスとコミュニケーション

- -

この節では、 MDN コミュニティで使用されているチャンネルや、 Mozilla MDN スタッフチームで使用されているプロセスについて解説します。

- - - -

MDN web docs トピックエリア

- - diff --git a/files/ja/mdn/contribute/processes/browser_information_resources/index.html b/files/ja/mdn/contribute/processes/browser_information_resources/index.html deleted file mode 100644 index 9338fc48eb..0000000000 --- a/files/ja/mdn/contribute/processes/browser_information_resources/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: ブラウザー特有の情報源 -slug: MDN/Contribute/Processes/Browser_information_resources -tags: - - Guide - - MDN Meta - - Processes - - ガイド - - プロセス -translation_of: MDN/Contribute/Processes/Browser_information_resources ---- -

{{MDNSidebar}}

- -

各ブラウザーの開発元では、ソフトウェアの開発、課題の追跡、議論の記録のために、様々なツールや手法を用いています。この記事では、 MDN のドキュメントを書いたり、互換性に関するデータを MDN に提供したりする際に役立つ、主要なブラウザーごとのツールや情報源を列挙しています。

- -

Chrome

- -

コンテンツ作成中...

- -

Edge

- -

コンテンツ作成中...

- -

Firefox

- -

Mozilla は常にすべての詳細を簡単に見つけられるようにしているわけではありませんが、 Firefox プロジェクトに関する基本的なことはすべてオープンな状態で行われているので、すべてのものが公開されています。 Firefox のすべてのリリースのソースコードには、昔、 Netscape から最初にフォークされたときまでさかのぼって完全にアクセスすることができます。 Mozilla のバグデータベースにもアクセスすることができます。メーリングリストや Mozilla の Discourse サーバー、 IRC チャンネルでの議論にアクセスできます。ソフトウェアの更新が作成され、議論され、最終的にソースリポジトリにマージされたときに、レビューノートの交換にアクセスすることができます。

- -

重要なのは、必要な情報をすべての情報から正確に切り分けることです。目の前に広がっているのは、 Mozillian たちが皮肉を込めて「Mozilla の火の海」と呼んでいる、広大なものです。利用可能な様々なリソースのそれぞれから何を学べるのかを説明するのではなく、学ぶことができるようになるために必要なものを見つけ、求める答えを見つけることができる利用可能なリソースを通る道を特定してみましょう。

- -

ソースコード

- -

Mercurial を介してソースコードにアクセスする通常の方法に加えて、ローカルコピーを手元に置かずにソースコード内の情報を検索する方法があります。

- -

DXR

- -

ソースコードに素早くアクセスする最も簡単な方法は DXR を使うことで、これは Mozilla のソースツリー全体を閲覧して強力な検索を行うことができます。他のツリーに切り替えるオプションもあるので、過去のブランチにさかのぼって見ることができ、たとえば mozilla1.9.2 は Firefox 3.6 に対応します。また、 Firefox ESR の各リリースのコードを見ることもできます。

- -

検索は特殊な演算子に対応しています。例えば、"connect" という単語を検索することはできますが、 "connect file:.webidl" を使うと、 WebIDL ファイルのみを考慮して検索することができます。

- -

Firefox の統合リポジトリ

- -

Firefox のソースコードにアクセスするもう一つの便利な方法が Mozilla 統合リポジトリ (mozilla-unified リポジトリ) です。このリポジトリには、Firefox 3 に対応する Gecko 1.9 までの Firefox のソース履歴があります。興味のあるバージョンに対応する Mercurial タグを見つけることで、特定のバージョンの Firefox のソースコードを見ることができます。 DXR では、いくつかの非常に古いバージョンの Firefox を見ることができますが、ほとんどのバージョンを見る方法は提供されていないので、これは貴重なものです。このリポジトリではすべてのリリースを見ることができます。

- -

タグの命名システムは時間の経過とともにあちこちで変更されているので、探しているものを見つけるにはちょっとした探索が必要になります。原則として、次のようなタグを探してください。

- - - -

特定のリリースを確認したら、通常のツールを使ってコードを閲覧したり検索したり、 changelog と pushlog オプションを使って、リリースにどのような変更が加えられたかを確認することができます。

- -

Searchfox

- -

Searchfox のウェブサイトでは、Firefox のソースコードを検索するための別の方法を提供しています。 Searchfox は Firefox のリポジトリをインデックス化するツールです (最も便利なのは、メインの mozilla-central ソースコード と、興味深いことに WHATWG HTML 仕様書もインデックス化されていることです)。

- -

Opera

- -

コンテンツ作成中...

- -

Safari

- -

コンテンツ作成中...

diff --git a/files/ja/mdn/contribute/processes/cross-team_collaboration_tactics/index.html b/files/ja/mdn/contribute/processes/cross-team_collaboration_tactics/index.html deleted file mode 100644 index 70ca0612ad..0000000000 --- a/files/ja/mdn/contribute/processes/cross-team_collaboration_tactics/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: 文書作成のためのチーム間協力作戦 -slug: MDN/Contribute/Processes/Cross-team_collaboration_tactics -tags: - - Collaborating - - Guide - - MDN Meta - - Processes -translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics ---- -
{{MDNSidebar}}
- -

私たちが MDN で学んだことのひとつは、開発チームと文書作成チームが共にあるプロジェクト、API、またはある技術について密接に協力して文書を作成した場合、その文書の品質が素晴らしいということです。このガイドは開発者と文書作成者が手と手を取って協力するための戦略を示唆するものです。

- -
-

この記事は今も作成中の、生きた文書です。もしもあなたの関わる開発者/文書作成者の協力の過程で別の方法を見出したなら、是非ここにそのアイディアを追加してください!

-
- -

つながり始める

- -

理想的には、新しいテクノロジーやプロジェクトが開発され始める時に、開発チームはライターチームに対し文書化の必要のある何かが出てくると知らせるでしょう。ときどきそうはならず、MDNチームはBugzillaを監視して文書化が必要な成果がないのか見ています。しかし完全な世界では、直接的な方法で進歩していきます。

- -

MDN チームに新プロジェクトを知らせるための最良な方法は文書化リクエストのバグを報告することです。 質問の問い合わせ先のリストがあると助かります! プロジェクトに関連するバグのリンクが入っていてもとても助かります。

- -

情報を共有する

- -

情報共有の便利な方法がいくつかあります。このようなものです。

- -

バグ

- -

単に文書化チームに文書化に影響するバグでフラグを立てることですごく助かります。dev-doc-needed キーワードとコメントタグを適切に使すうのは長くかかることもあります。詳細は文書を最新化するを見てください。

- -

ミーティング

- -

開発チームは通常ミーティングをします。それが可能で役立つときには (役立つ場面は多いです)、MDN チームはミーティングに誰かを出席させようとします。何が起きているか、スケジュールはどうか、などを知るのは良い方法です。

- -

加えて、ライターは大きな文書化エリア(例えば Web API 文書)で作業し、その文書化の状況のためだけにミーティングすることもしばしばあります。ライターは開発チーム代表がこうしたミーティングに出るのを好感します; 関係する全員にとって極めて有益です。

- -

典型的にこれは短いチェックインのミーティングで、次のようなアジェンダを伴います:

- -
    -
  1. 貢献するライターの短い状況更新。
    2. -
  2. 開発チームからライターへの質問/更新: 特定文書の状況の質問や、特に急ぐ特定コンテンツの情報や、既存コンテンツの問題への注意などを含みます。
    3. -
  3. ライターから開発チームへの質問/更新: 特定のバグがもうすぐ解決しそうか否かとか、特定の文書のレビューが可能になったりするかとか、ある API の質問に答えられるエンジニアがいるのかどうかとか、ライターがそんな種類の質問をできるチャンスです。
    4. -
- -

Developer Content Coordination Meeting は毎週火曜日の太平洋時間 9 AM に、Vidyo テレビ会議システムの "mdn" チャンネル (音声のみもあり)で開催されます。このミーティングでは、MDNライターコミュニティ、開発関係チーム、API ドキュメントチーム、その他が集まって作業がどこまで進んだかや、何が出てきたかや、開発者と共有すべき最重要事項は何かといった情報交換を行います。これにより、全員がプロモーションの優先度やトピックの文書化のための同じページに乗ることができて、開発者にとって役立つ方法で知らせることのできるフィートバックを返すことにもなります。全員がそこから多くを得て、通常は30分か、少ないかくらいの時間で終わります。

- -

集中作業週間

- -

開発チームに集中作業週間やミートアップがあれば、関連ドキュメントのライターの招待を真剣に考えるべきです。これは多くの利益があり、次のようなものです:

- - - -

集中作業週間があって、あなたのトピック領域の担当のライターがいるかどうかわからない場合、ドキュメントチームのリーダーにeメールしてください(Jean-Yves Perrier まで)、そして彼が誰か派遣できるか確認します。行ける人を探します (あるいは、もっと良い場合、あなたのプロジェクト担当のライターのことも)! ただ覚えてほしいのは、しかしライティングチームは小さく、集中作業週間に参加できる人がちょっとした注意で見つかることはトリッキーです。

- -

文書化の状態を表示するページ

- -

MDN の大き目の文書化プロジェクトでは文書化ステータスページを使って、作業を完了させるのに何をしないといけないか、また何がすでに完了しているか、追跡しています。このページは達成する必要があるタスクと、各タスクのステータスとを一覧にしています。

diff --git a/files/ja/mdn/contribute/processes/requesting_elevated_privileges/index.html b/files/ja/mdn/contribute/processes/requesting_elevated_privileges/index.html deleted file mode 100644 index 85cce731eb..0000000000 --- a/files/ja/mdn/contribute/processes/requesting_elevated_privileges/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 上位権限の申請 -slug: MDN/Contribute/Processes/Requesting_elevated_privileges -tags: - - Guide - - MDN Meta - - Processes - - ガイド - - 手続 -translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges ---- -
{{MDNSidebar}}
- -

MDN の一部のツールや操作では、通常のユーザーでは利用できない昇格したアクセス権限が必要です。

- -

ツール使用の権限が欲しい、または必要な場合には以下の手順に従ってください。

- -
    -
  1. mdn-admins@mozilla.org へ (英語で) メールを書き、何が必要かと、その理由をも説明してください。 MDN アカウント名を書いてください。
    2. -
  2. 権限を求めるそれぞれのツールについて、なぜあなたがその権限を得る条件を満たしているのかを説明していることを確認してください。分からない点は、そのツールの「この権限を得る条件」の節を参照してください。
    3. -
  3. 申請が承認されると、 MDN 管理者の一人がそのツールに必要な権限を付与します。
    4. -
- -

誤った使用、濫用、重大な問題 (ツールに危険なバグが新たに発見された等) があった場合は、管理者がツールへのアクセスを停止することがあります。

diff --git a/files/ja/mdn/dashboards/editors/index.html b/files/ja/mdn/dashboards/editors/index.html deleted file mode 100644 index 5001a43f0c..0000000000 --- a/files/ja/mdn/dashboards/editors/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: 編集者 -slug: MDN/Dashboards/Editors -tags: - - MDN Meta - - MDN プロジェクト - - ダッシュボード - - ドキュメンテーション -translation_of: MDN/Dashboards/Editors ---- -
{{MDNSidebar}}
- -

編集者の総数

- -

The amount of editors grows quickly at the beginning of the MDN history from 2005-2007, then went down and stayed flat until 2010 where it started to grow a bit. A complete changed happened in 2012 and the line grows steadily to more than 1000 editors.

- -

タイプ別エディタ

- -

- -

diff --git a/files/ja/mdn/dashboards/index.html b/files/ja/mdn/dashboards/index.html deleted file mode 100644 index a78d68bf76..0000000000 --- a/files/ja/mdn/dashboards/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: ダッシュボード -slug: MDN/Dashboards -tags: - - Draft - - MDN Meta - - ダッシュボード - - 概要 -translation_of: MDN/Dashboards ---- -
{{MDNSidebar}}{{Draft}}
- -

いくつかの指標を表示するダッシュボードがいくつかあります。

- -

編集者の詳細について詳細を知る

- -

{{SubpagesWithSummaries}}

diff --git a/files/ja/mdn/editor/basics/attachments/index.html b/files/ja/mdn/editor/basics/attachments/index.html deleted file mode 100644 index 3c9b5bf8af..0000000000 --- a/files/ja/mdn/editor/basics/attachments/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: MDN エディターの添付ファイル -slug: MDN/Editor/Basics/Attachments -tags: - - Beginner - - Guide - - MDN Meta - - editor - - エディター - - ガイド - - 初心者 -translation_of: MDN/Editor/Basics/Attachments ---- -
{{MDNSidebar}}
- -

MDN エディターの添付ファイルの節では、現在の文書でどのファイルが使用されているのかを確認できるとともに、MDN コンテンツで使用するファイルを MDN にアップロードすることができます。

- -
-

この節は、ページにファイルを添付するのに必要な権限を持っている場合にのみ表示されます。既定ではユーザーはこの権限を持っていませんので、ファイルを添付する必要がある場合は、 MDN 管理者にメールで権限を申請してください。

-
- -

添付ファイルの節が表示されるのは、既存の文書を編集する場合だけです。新しい記事を編集するためのエディターには表示されません。

- -

添付ファイルのワークフロー

- -

添付ファイルアップロード機能の動作は、それぞれのアップロード後に再表示されるページの中に結果が表示されます。この時点でページに行った保存前の編集があった場合は、失われる可能性があります。したがって、添付ファイルをアップロードする前にまず編集結果を保存するのがいいでしょう。

- -

良いワークフローは以下の通りです。

- -
    -
  1. 編集を行い、画像を挿入したい場所にプレイスホルダーのテキストを作成する。
    2. -
  2. 編集を保存する。
    3. -
  3. 画像を添付する。
    4. -
  4. プレイスホルダーの場所に画像を挿入する。
    5. -
  5. 作業を再び保存して確認する。
    6. -
- -

添付ファイルをアップロードする際に未公開の編集がある場合は、下書きとして保存され、編集ボックスの上部にある下書きを復元リンクをクリックすることで復元することができます。また、添付ファイルをアップロードする前に公開して編集を継続をクリックしても構いません。しかし、時間が長すぎたり復元を忘れたりすると失われる可能性があるので、上記のワークフローをお勧めします。

- -

添付ファイルのユーザーインターフェイス

- -

ページに添付ファイルを追加するには、ファイルをアップロードボタンをクリックしてください。添付ファイルの節はこのように表示されます。

- -

エディターの添付ファイルの節のスクリーンショット、ファイルのアップロードのためのコントロール付き

- -

ご覧のとおり表があり、アップロードするファイルを選択し、タイトルと、任意で概要および追加のコメントを設定することができます。タイトルは必須で、ファイルを説明して文脈との関連付けが理解できるようにしてください。欄を埋めたらファイルを選択し、アップロードボタンを押して MDN に送信してください。

- -

添付ファイルの最も一般的な利用法は、ページへの画像の追加です。画像をアップロードする際は、画像最適化ツールを使用してファイルのダウンロードができるだけ小さくなるようにしてください。これはページの読み込み時間を改善し、全体的な MDN の性能を助けます。お持ちであればお好みのツールを使用してください。そうでなければ、手軽なウェブツールとして TinyPNG を提案します。

- -
-

MDN の添付ファイルとして許可されているのは、 GIF, JPEG, PN , HTML などのわずかなファイルタイプのみです。 Photoshop 画像は許可されていますが、非常に特殊な場合を除いて避けてください。他のファイルタイプはアップロードフォームで許可されていません。 SVG ファイルのアップロードには特殊な権限が必要ですので、 SVG ファイルをアップロードする必要があるのであれば、 MDN 執筆チームに相談してください。

-
- -

気軽にこのページをエディターで開き、最下部の添付ファイル一覧を見てみてください。

- -

ファイルが添付されると、記事に画像を追加する際に画像のプロパティダイアログボックスに (フォームで指定したタイトルで) 現れます。このインターフェイスの詳細は、画像を参照してください。

- -

アクセス制限

- -

MDN Web Docs に属さない画像のアップロードは、破壊行為やスパムにつながる可能性があることは明らかですので、このツールはすべてのユーザーが利用できる訳ではありません。

- -

この権限を持つロール

- - - -

この権限を得るための条件

- -

以下の条件を満たせば、このツールへのアクセス権を得ることができます。

- - - -

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/mdn/editor/basics/index.html b/files/ja/mdn/editor/basics/index.html deleted file mode 100644 index 0dda9a4017..0000000000 --- a/files/ja/mdn/editor/basics/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: エディターの UI 要素 -slug: MDN/Editor/Basics -tags: - - Beginner - - Documentation - - Guide - - MDN - - MDN Meta - - editor - - 要更新 -translation_of: MDN/Editor/Basics ---- -
{{MDNSidebar}}
- -

MDN に組み込まれた WYSIWYG エディターは、記事やサイト内のほとんどの作成、編集、改良ができるだけ楽になるように設計されています。エディターウィンドウには、8つのキーエリアがあります。このページは、全ての編集環境の使い方がわかるように、各セクションの情報を提供します。

- -
-

私たちは常に MDN を改良しているため、この文書やスクリーンショットがやや時代遅れになる事もあります。定期的にこの文書を更新して、使い物にならないほど遅れるのを防ぐつもりです。

-
- -

Screenshot of the editor UI (August 2017) with each section labeled

- -

上に示した通り、エディター UI は下記の部分から成っています。エディターの各部分については、下記のリンクをクリックして読んでください。

- - - -

編集ボックス

- -

編集ボックスは、もちろん、あなたが実際に執筆をするところです。

- -

編集ボックスを右クリックすると、クリックの状況に応じて適切な追加オプションが表示されます。たとえば、テーブル内を右クリックするとテーブル関連のオプションが表示され、リスト内を右クリックするとリスト関連のオプションが表示されます。既定では、エディターを右クリックしたときに独自のコンテキストメニューを使用します。(Firefox のスペルチェッカーの推奨修正リストにアクセスするためなど) ブラウザーの既定のコンテキストメニューにアクセスするには、 Shift キーまたは Control キー (Mac OS X では Command キー) を押しながらクリックしてください。

- -

編集ボックスで作業するときは、キーボードショートカットを使用できます。

- -

リビジョンコメント

- -

記事を編集した後、リビジョン (変更) にコメントを追加することを強く推奨します。これはページのリビジョン履歴に表示され、同様にあなたのリビジョンダッシュボードにも表示されます。これは作業を後でレビューする可能性がある人に、自分の変更の説明や正当化をするのに有用です。リビジョンコメントを追加するには、ページ最上部か最下部の公開ボタンを押す前に、リビジョンのコメントボックスにコメントを入力するだけです。

- -

これが役立つ理由がいくつかあります。

- - - -

レビュー要求

- -

MDN コミュニティは MDN のコンテンツの監視や品質の向上の為に、レビューを使用しています。これは記事にフラグを設定することで動作し、この記事がレビューを必要としているということを知らせます。技術レビューや編集レビューについては、 How to ガイドで知ることができます。

- -

作業している記事にレビューを求めるには、必要なレビューの隣のチェックボックスをオンにします。技術レビューは技術的なものがどのように動作するのかの説明を変更した場合に要求するべきであり、編集レビューは変更を行い、誰かに記述やスタイルの選択についてレビューしてほしい時に要求するのが良い考えでしょう。

- -

レビューのチェックボックスを選択して、記事が技術レビュー待ちや編集レビュー待ちのリストに追加されても、誰かが記事を直ちにレビューしてくれる保証はありません。技術レビューについては、関連する技術領域の主題のエキスパートに直接連絡を取るのが良いでしょう。編集レビューについては、 MDN discussion forum (英語) に投稿して、誰かに変更をレビューするよう求めることができます。

- -

レビューの要求を確定するには、チェックを入れた後に必ず公開ボタンのどれかを押してください。

- -

関連情報

- - - - diff --git a/files/ja/mdn/editor/basics/page_controls/index.html b/files/ja/mdn/editor/basics/page_controls/index.html deleted file mode 100644 index 577473bc91..0000000000 --- a/files/ja/mdn/editor/basics/page_controls/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN エディターページコントロール -slug: MDN/Editor/Basics/Page_controls -tags: - - Beginner - - Guide - - MDN Meta - - editor -translation_of: MDN/Editor/Basics/Page_controls ---- -
{{MDNSidebar}}

ページコントロールはページ全体に影響を与えるいくつかのボタンです。エディタービューの最上部と最下部の両方にあって、過度のスクロールを省きます。4つのページコントロールボタンがあります:

- -
-

If you try to save your page and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should email the writing team for help getting your content posted.

-
- -
-
公開して編集を続行
-
Saves and publishes the page without closing the editor; this lets you periodically save your work, creating an entry in the page history that you can revert to if you need to, or in case you need to stop working and come back to it later. This option is not available when creating new pages. See The revision comment box to learn how to include a revision comment on your saved article.
-
公開
-
Saves and publishes the page and closes the editor, returning you to view the page in standard browsing mode. See The revision comment box to learn how to include a revision comment on your saved article.
-
プレビュー
-
Opens a new tab or window showing the page as it exists in your private editor, but rendered as it would appear if you were browsing to it if it were public. This includes executing any macros and templates you use within the content. Note that your work is not saved yet when you use this option. This button lets you check, before your changes are made public, that you haven't made any errors in your macros, templates, or formatting that may prevent the page from rendering correctly. If you do see scripting errors, refer to Troubleshooting scripting error while previewing a page.
-
-
-

Warning: Currently some macros and templates don't execute properly in Preview-mode, leaving the Preview page missing some of its content (such as sidebars), and thus with somewhat distorted page layout; i.e. not totally WYSIWYG.  Further, if SCAYT (Spell-Check As You Type) is enabled (and possibly if the page contains certain valid macros or templates), Preview mode may still give a scripting error.

-
-
-

- 破棄
-
Cancels your edit, disposing of any changes you've made without saving them. You're returned to the page in standard browsing mode.
-
-
-

Warning: Occasionally Discard can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.

-
-
-
diff --git a/files/ja/mdn/editor/basics/page_info/index.html b/files/ja/mdn/editor/basics/page_info/index.html deleted file mode 100644 index 46b3cbbaba..0000000000 --- a/files/ja/mdn/editor/basics/page_info/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: エディターUIのページ情報部 -slug: MDN/Editor/Basics/Page_info -tags: - - Beginner - - Guide - - MDN Meta - - editor -translation_of: MDN/Editor/Basics/Page_info ---- -
{{MDNSidebar}}

ページ情報部分にはページの情報を含みますが、追加の情報を拡張することも出来ます。

- -

このページは英語版のUIを説明しています

- -

既存のページ

- -

既定では、既存のページを編集する時、ページタイトルを表示します。

- -

Edit Page Title and Properties のリンクをクリックして、追加のページコントロールの表示を切り替えることができます。この表示は次のようなものです:

- -

Page info fields for an existing article

- -

この表示は次の設定を変更できます:

- -
-
Title
-
ブラウザーのタイトルバー (やタブバー) に表示されるタイトルと、記事の最上部とパンくずリストにあるページのタイトル。これはページの URL には影響しません。
-
TOC(目次)
-
記事の見出しレベルが、目次でどれだけ深くページに自動表示されるかを決めるレベル。既定では、見出しレベル<h2> から<h4> が目次となり、よって目次は3段階の深さになります。しかし、これをどのようにも設定できて、"No TOC" (目次を全く表示しない、例えばランディングページのように) でも、目次を全レベル表示するようにもできます。
-
Rendering max age
-
このページが自動的に再レンダリングされる頻度を決めます。大半の場合において、この設定はゼロのままにします。
-
Lookup
-
ローカライズされたページでは、この項目はページの正統版から「みなしご」になったページを再度関連付けるのに役立ちます。英語が MDN ではデファクトの正統な言語であるため、英語のページでは役立ちません。
-
- -

新規のページ

- -

ページ作成権限 を取得している場合、新規のページを作成できます。ページを作成/編集する方法を見て、ページ作成のさまざまなテクニックを見てください。新規のページでは、ページ情報欄はこのようになります:

- -

Page info fields for a new page

- -

ここに、Title(タイトル) とTOC(目次) フィールドを、既存ページと同様にセットできて、ページの Slug もセットできます。slug はページを表現する URL の最後の部分です。(Parent(親ページ) が読み取り専用項目として表示され、URL のサイトのルート以降の残りで表現します) テキスト項目に入力すると、Slug 項目はタイトルと同じテキストで、スペースをアンダースコアに置換しつつ自動入力されます。

- -
-

短い slug と詳しいタイトルに価値があります; 例えば、エディターページコントロールのタイトルは "MDN editor page controls" ですがその URL は MDN/Contribute/Editor/Basics/Page_controls であり、Page_controls がページを表現する slug です。

-
- -

 

diff --git a/files/ja/mdn/editor/basics/tags/index.html b/files/ja/mdn/editor/basics/tags/index.html deleted file mode 100644 index 0b9b11d04b..0000000000 --- a/files/ja/mdn/editor/basics/tags/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: MDN エディターのタグ -slug: MDN/Editor/Basics/Tags -tags: - - Beginner - - Guide - - MDN Meta -translation_of: MDN/Editor/Basics/Tags ---- -
{{MDNSidebar}}

Page tags help categorize and organize information for searching and index pages, and they help identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.

- -

The tag box is near the bottom of the editor page. It displays any existing tags on the page, as well as an empty box in which you can type a new tag:

- -

- -

タグを追加する

- -

To add a new tag, click in the "New tag" box and start typing:

- -

- -

As you type, the editor displays existing tags that match the characters you have typed so far. You can save a few key strokes by selecting one of the displayed tags, or just use it as a reference to ensure that you spell the tag the same way as it appears on other pages.

- -

When you press Enter or Tab key (or comma), the new tag is committed to the list, and a new "New Tag" box appears:

- -

- -

For a list of recommended tags, as well as a usage guide for specific tags, please see MDN tagging standards.

- -

タグを削除する

- -

There are two ways to remove a tag:

- - - -

変更をコミットする

- -

Your changes are not saved until you click one of the Publish buttons.

diff --git a/files/ja/mdn/editor/basics/toolbar/index.html b/files/ja/mdn/editor/basics/toolbar/index.html deleted file mode 100644 index 6076640c10..0000000000 --- a/files/ja/mdn/editor/basics/toolbar/index.html +++ /dev/null @@ -1,257 +0,0 @@ ---- -title: MDN エディターのツールバー -slug: MDN/Editor/Basics/Toolbar -tags: - - Beginner - - MDN Meta - - Reference - - editor -translation_of: MDN/Editor/Basics/Toolbar ---- -
{{MDNSidebar}}

エディターのツールバーは、作業時に記事の見た目や流れを調整する機能を提供します。この記事ではツールバーの各コントロールについて記述します。

- -

2行のボタンがあり、3列目はあなたがどこにいるかを導くHTML要素があります。下記のスクリーンショットでは、例えば、トップレベルの <p> ブロックを編集しています。

- -

Screenshot of the toolbar, with labels for the button groupsツールバーボタンは9つのグループに別れます。それぞれ見ていきましょう; 各グループのボタンを左から順に詳しく見ていきます。

- - - -

ドキュメント(Document)グループ

- -

ドキュメントグループはドキュメントレベルの操作オプションを提供します。

- -
-
ソース
-
The Source button lets you toggle between editing using the WYSIWYG interface and editing in raw HTML source mode. We strongly request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode. See Using source mode in the MDN editor for details on how to use source mode and the dos and don'ts involved.
-
公開
-
メインの 公開 ボタンと同様
-
- -
-

If you try to save your edit and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should email the writing team for help getting your content posted.

-
- -
-
プレビュー
-
メインの プレビュー ボタンと同様
-
- -

編集機能(Edit functions)グループ

- -

編集機能はよくあるアプリケーションの編集メニューの対応オプションに似ています。

- -
-
貼り付け
-
システムクリップボードの中身をエディターペインに貼り付ける
-
プレーンテキストとして貼り付け
-
テキスト貼り付けのダイアログを表示する; テキストは全てスタイリングがはがされ、その結果気づかずに望まないスタイリングをサイトのコンテンツに入れることがなくなります。テキストを貼り付けたら、(追加で) 変更もできて、次にボタンをクリックして作業中の記事に挿入します。
-
-
-

When pasting content into MDN, please be aware that, if pasting styled content (including, for example, syntax highlighting in code being copied from another site), you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

-
-
-
元に戻す
-
最後の操作を元に戻します
-
やり直す
-
最後にもとに戻した操作をやり直します
-
- -

テキスト処理(Text processing)グループ

- -

テキスト処理グループではテキスト操作のオプションを提供します。

- -
-
検索
-
Opens the Find dialog box in "Find" mode, which lets you search your document for a specified string.
-
置換
-
Opens the Find dialog box in "Find and replace" mode, allowing you to find strings and replace them with new ones.
-
- -

The Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.

- -
-
スペルチェック
-
This button opens a menu with several items: -
-
Enable SCAYT/Disable SCAYT
-
Activates or deactivates Spell Check As You Type (SCAYT)
-
Options
-
If SCAYT is activated, this opens the SCAYT dialog box to the tab containing options you can configure for SCAYT.
-
Languages
-
If SCAYT is activated, this opens the SCAYT dialog box to the Languages tab, where you can select what language to use for spell-checking dictionary.
-
Dictionaries
-
If SCAYT is activated, this opens the SCAYT dialog box to the Dictionaries tab, where you can specify a personal dictionary to use with SCAYT.
-
About SCAYT
-
If SCAYT is activated, this opens the SCAYT dialog box to the About tab.
-
Check Spelling
-
This opens a Spell Checker dialog box, in which you can check spelling in batch mode on an entire document. You can use the Grammar tab to check for grammar mistakes, or use the Thesaurus tab to search for synonyms of words in the document.
-
-
-
- -

表示(Display)グループ

- -

表示グループはエディター画面の表示に影響するオプションを提供します。

- -
-
最大化
-
このボタンは、エディターインターフェイス(つまり、ツールバーと編集ボックス) をブラウザーウィンドウ全体に拡大し、記述スペースを最大限使えます。
-
ブロック表示
-
このボタンは、文書内のブロック要素の外枠を出現させます。これはソースモードを使わずに文書構造を手軽にチェックする方法です。
-
- -

インラインスタイル(Inline styles)グループ

- -

インラインスタイルグループは、テキストの塊に対して適用する、よくあるインラインスタイルを含みます。

- -
-
太字
-
Toggles boldface text mode. It creates a {{htmlelement("strong")}} element.
-
斜体
-
Toggles italic text mode. It creates an {{htmlelement("em")}} element.
-
下線
-
Toggles underlined text mode. It creates a {{htmlelement("u")}} element.
-
打ち消し線
-
Toggles strikethrough mode. It creates an {{htmlelement("s")}} element.
-
下付き
-
Toggles subscript mode. It creates a {{htmlelement("sub")}} element.
-
上付き
-
Toggles superscript mode. It creates a {{htmlelement("sup")}} element. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.
-
書式を解除
-
Removes the current inline styles from the selection.
-
コード
-
Toggles code mode. It creates a {{htmlelement("code")}} element. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.
-
- -

ハイパーリンク(Hyperlinking)グループ

- -

ハイパーリンクグループは、ハイパーリンクに関するオプションを提供します。

- -
-
リンク挿入/編集
-
Creates a new link. This button opens the link editor dialog, which is covered in Links using the toolbar.
-
リンクを削除
-
Removes the link at the insertion point.
-
アンカー挿入/編集
-
Creates an anchor at the insertion point. Note that you don't need an anchor to link to a heading; the MDN editor automatically creates an {{htmlattrxref("id")}} for each heading that is the same as the heading text, with spaces replaced by underscores. For example, the heading of this section has an id whose value is Hyperlinking_group.
-
リダイレクトを作成
-
Inserts a redirect from this page to another. See Creating redirects for further information.
-
- -

カスタムスタイル(Custom styles)グループ

- -

Styles ボタンは、特別なフォーマットオプションの選択を提供するドロップダウンメニューです。

- -

Block styles

- -
-
None
-
現ブロックの全てのスタイリングを削除します
-
Note box
-
下記のような註記のボックスを作ります。註記ボックスでは太字の "註記:" で開始します。
-
- -
-

This is a note box.

-
- -
-
Warning box
-
下記のような警告ボックスを作成します。太字の "警告:" で開始します。
-
- -
-

Warning: This is a warning box.

-
- -
-
Two columns
-
選択テキストや現ブロックのを1カラムから2カラムに、これをサポートするブラウザーでは、変更します。
-
Three columns
-
選択テキストや現ブロックのを1カラムから3カラムに、これをサポートするブラウザーでは、変更します。
-
Article summary
-
This style places its contents in a specially formatted call-out block that should contain a summary of the article. See the first paragraph of this article for an example.
-
Syntax box
-
Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a <pre> block inside it. You probably won't see the yellow box until you do.
-
Hidden when reading
-
Creates a block that is visible only in edit mode, not when normally displayed. This is not the same as an HTML comment, which is visible only in source mode.
-
- -

Inline styles

- -
-
SEO summary
-
This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.
-
- -

ブロック(Blocks)グループ

- -

ブロックグループは、HTML標準や、Kuma 独自となる、その他のブロックスタイルを提供します。

- -
-
ブロック引用文
-
Inserts a blockquote. Please do not use this. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.
-
Preformatted Text
-
Inserts a {{htmlelement("pre")}} block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.
-
Headings
-
The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in the page info box.
-
構文ハイライター
-
The syntax highlighter lets you choose a language for which to apply syntax highlighting to the {{htmlelement("pre")}} (preformatted text) block; if you're not already in such a block, this will create one for you.  Choose the language used in the  block, and it will be highlighted appropriately.
-
コードサンプルテンプレートを挿入
-
This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See Using the live sample system for details on using this and other live sample features.
-
コードサンプルの iFrame を挿入
-
Inserts into the document the appropriate macro to display a given live sample. See Using the live sample system for details on using this and other live sample features.
-
- -

Lists and flow group

- -

このブロック構造グループは、標準のブロック構造を作成、編集するオプションを提供します。

- -
-
番号つきリスト
-
Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).
-
番号なしリスト
-
Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).
-
Definition List
-
Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).
-
Definition Term
-
Creates a new term block in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.
-
Definition Value
-
Creates a new value block in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.
-
インデント解除
-
Shifts the indentation level to the left once; this is the same as pressing  Shift + Tab while in a list.
-
インデント
-
Shifts the indentation level to the right once; this is the same as pressing tab while in a list.
-
テキストの向き：左から右へ
-
Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an Arabic document, you might use this to display some English text.
-
テキストの向き：右から左へ
-
Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an English text, you might use this to display some Arabic text.
-
- -

メディア(Media)グループ

- -

メディアグループはメディアを表示・フォーマットするオプションを提供します。

- -
-
イメージ
-
Inserts a new image into the article. See Images  for details on how to use this option.
-
表
-
Inserts a table into the article. See Tables for more information on tables in articles.
-
YouTube 動画を埋め込み
-
Opens a dialog box in which you can specify a YouTube URL. From this information it creates a call to the EmbedYouTube macro. This is a secure way to embed video content.
-
Insert MathML based on (La)TeX
-
Opens a dialog box in which you can insert code in TeX or LaTeX. This code will be converted into MathML and inserted into the document in a {{htmlelement("math")}} block.
-
- -

 

diff --git a/files/ja/mdn/editor/images/index.html b/files/ja/mdn/editor/images/index.html deleted file mode 100644 index 5efe16a213..0000000000 --- a/files/ja/mdn/editor/images/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: 画像 -slug: MDN/Editor/Images -tags: - - Guide - - MDN Meta -translation_of: MDN/Editor/Images ---- -
{{MDNSidebar}}
- -

記事に画像を混ぜるのはしばしば便利です。画像は例えば、スクリーンショットや、レンダリングがどのようになるかの例や、プログラムフローのSVG図です。この記事ではMDNのコンテンツに画像を使う方法を記します。

- -
Note: When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest TinyPNG, a handy Web tool.
- -

いったん画像をページに添付したら ({{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}} を見てください)、記事内で使用できます。MDN上のどこの画像にもリンクできます。画像を挿入するには、ツールバーの "イメージ" ボタンを使用し、それはこのようなものです:

- -

画像のプロパティダイアログが、次のように出てきます:

- -

- -

3つのタブがあります。最初 (で最もよく使う) は画像情報タブです。残り2つはリンクと、高度な設定タブです。

- -

画像情報

- -

ここにはたくさんのオプションがあります:

- -
-
添付ファイル
-
このポップアップメニューはページの添付ファイル一覧を表示します。現在の編集セッションでアップロードしたものか、既にページの他の場所で使われているものだけが表示されます。
-
URL
-
添付ファイル一覧にない画像を使いたい場合 (例えば、MDNの他の場所で使われているものや、以前の編集セッションでアップロードされたもの)、この欄にURLを入力できます。
-
代替テキスト
-
画像が表示されない場合に表示される代替テキスト。このテキストは、スクリーンリーダーでも使われるので、アクセシビリティのためにも、適切な記述を入れてください。
-
幅 / 高さ
-
記事に表示される画像の幅と高さをここで調整できます。デフォルトでは、比率がロックされていますが、ロックアイコンをクリックして解除できます。
-
枠線の幅
-
オプションとして、画像の周りに黒い枠線を指定できます。ここには 0 (や未入力のまま) または 1 を入れてください、そうすると画像の背景が透明で、記事の背景から目立たせる場合に、枠線を使うかどうかの選択になります。
-
水平間隔 / 垂直間隔
-
これは、画像を囲む空白の長さを、水平/垂直それぞれ指定するものです。通常は、下記の行揃えオプションを使う場合にのみ必要となるでしょう。
-
行揃え
-
デフォルトでは、画像は独自ブロックに単独で表示されます。しかし、テキストをラップ可能にすることで、ここでは画像をフロートとして左/右寄せできます。めったにこうしません。つまり画像がとても小さく(またはとても幅が狭く縦が長い)て、その横に整形するのに十分な長さのテキストがある、特別な場合のみ使われます。少し判断が要ります。このオプションを使った場合、たぶんテキストと画像が近づき過ぎないように、水平間隔と垂直間隔をセットしたくなるでしょう。通常はそれぞれを6か8とするとうまくいきます。
-
- -

プレビューボックスは、今の設定で画像がどうなるかを例示します。

- -

リンク

- -

The Link options tab for images lets you set a URL to go to when the image is clicked on. This is most commonly used to simply link to a larger version of the image itself (by providing the same URL as in the Image Info tab). The Link panel looks like this:

- -

- -

Other than the URL field, in which you place the URL of the link's destination, you can set a target. However, please do not do so. We prefer all links to open in the same tab.

- -

サポートされる画像の種類

- -

You may upload GIF, JPEG, and PNG images, as well as SVG diagrams. For screenshots, we prefer PNG, and we're trying to transition to using SVG for diagrams because they can be translated into other languages more easily than other image types.

- -

Photoshop files may also be uploaded. However, they may not be used as images inline in content. They are only available for download.

- -

画像を削除/変更する

- -

To remove an image from the article, you can simply select it and press your delete key, or place the cursor after it and press delete.

- -
-

Note: You cannot delete attachments on MDN; we will eventually have a mechanism for this, but at this time, they remain on the server for potential later re-use.

-
- -

You can also revise the image properties for an image by double-clicking it, or right-clicking on it and choosing "Image Properties" from the context menu that appears. This will present the same dialog as above.

- -

{{EditorGuideQuicklinks}}

diff --git a/files/ja/mdn/editor/index.html b/files/ja/mdn/editor/index.html deleted file mode 100644 index ab597839dc..0000000000 --- a/files/ja/mdn/editor/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: MDN エディター UI のガイド -slug: MDN/Editor -tags: - - Documentation - - Guide - - Landing - - MDN - - MDN Meta - - ガイド -translation_of: MDN/Editor ---- -
{{MDNSidebar}}
- -

MDN Web Docs Wiki が提供する WYSIWYG (what-you-see-is-what-you-get) エディターで、簡単に新しいコンテンツの協力ができます。 MDN エディターガイドでは、エディターの使い方とともに、あなたの生産性を改善する有用な特徴についての情報を提供します。編集や新規ページ作成をする前に、Mozilla ウェブサイトの利用規約を読んで (そして従って) 下さい。

- -

MDN スタイルガイドは、コンテンツそのものの書式やスタイルの作り方について、推奨する文法や記述の規則も含めて、情報を提供します。

- -

{{LandingPageListSubpages}}

- -

{{EditorGuideQuicklinks}}

diff --git a/files/ja/mdn/editor/keyboard_shortcuts/index.html b/files/ja/mdn/editor/keyboard_shortcuts/index.html deleted file mode 100644 index 7d0926b4fa..0000000000 --- a/files/ja/mdn/editor/keyboard_shortcuts/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: MDN エディターのショートカットキー -slug: MDN/Editor/Keyboard_shortcuts -tags: - - MDN Meta - - Reference - - Reference - - editor - - エディター - - エディター -translation_of: MDN/Editor/Keyboard_shortcuts ---- -

作業中にキーボードから手を離さなくて済むように、多数の便利なキーボードショートカットが利用できます。ショートカットは Windows と Linux 用の一覧で、Mac では Control キーの代わりに Command キーを使用できます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ショートカット説明
Ctrl + A全て選択
Ctrl + Cクリップボードにコピー
Ctrl + Vクリップボードから貼り付け
Ctrl + Shift + Vクリップボードから整形されていないプレーンテキストとして貼り付け
Ctrl + Xカット
Ctrl + Zやり直し
Ctrl + Y再実行
Ctrl + Kリンクエディターを開く/新しいリンクを追加
Ctrl + Shift + K現在のカーソル位置からリンクを削除する
Ctrl + B太字
Ctrl + Iイタリック
Ctrl + O<code> スタイルをトグルする
Ctrl + Shift + O -

ソース表示モードの切り替え

- -
ソースモードでの編集は注意してください; コンテンツ標準に引き続き従う必要があります。詳しくはエディターのソースモードのガイドを見て、ソースモードの使い方と、どの場面に使用すべき/でないのか、との両方を見てください。
-
Ctrl + P現在ブロックの <pre> スタイルのオン/オフをトグルする
Ctrl + U下線
Ctrl + S変更を保存してエディターを閉じる
Ctrl + Shift + Sエディターを閉じないで変更を保存する
Ctrl + 0選択エリアのフォーマットを削除する ("O"の文字ではなくて、数字のゼロです).
Ctrl + 2 から Ctrl + 62 から 6 で見出しをつける。レベル 1 の見出しは、記事の最上部に表示されるページタイトルに予約されている。
Ctrl + Shift + L段落のフォーマットとして、黒丸リストと番号つきリストを切り替える。
Tabインデントモードではインデントレベルを増やし、それ以外では 2 つのスペースをタブとして挿入する。テーブル内では、次のセルにカーソルを移動するか、次のセルがなければ新しい行を追加する。カーソルがページタイトルか見出しにある場合、次のパラグラフにジャンプする。
Shift + Tabインデントモードではインデントを減らす。テーブル内では、前のセルにジャンプするか、前のセルがなければ新しい行を追加する。カーソルがページタイトルか見出しにある場合、次のパラグラフにジャンプする。
Shift + Spaceノーブレークスペース (&nbsp;) を挿入する。
Shift + Enter -

現在のブロックを抜ける。例えば、<pre> ブロックを編集している場合、Shift + Enter でブロックを抜けて、記事の本文に戻る。

- -
-

現在は実装されていません; {{bug('780055')}} を見てください。

-
-
- -

関連情報

- - - -
{{MDNSidebar}}
diff --git a/files/ja/mdn/editor/links/index.html b/files/ja/mdn/editor/links/index.html deleted file mode 100644 index 87fff92133..0000000000 --- a/files/ja/mdn/editor/links/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: リンク -slug: MDN/Editor/Links -tags: - - Guide - - MDN Meta - - editor - - ガイド - - 編集者 -translation_of: MDN/Editor/Links ---- -
{{MDNSidebar}}
- - - -
-

メモ: 特にリンクの推奨される方法があります。これらは MDN 書式ガイドで説明されています。

-
- -

ツールバーの使用

- -

リンクを作成するのに最も分かりやすい方法は、ツールバーの「リンク」ボタンをクリックするか、 Ctl+K (Mac では Command-K) を押してリンク作成することです。リンクボタンは The link button (as of 2015-12-04) のような外見です。この機能を使用して、最初からリンクを作成したり、既存の選択したテキストにリンクを追加したりすることができます。

- - - -

リンクボタンをクリックすると、次のようなハイパーリンクエディターのダイアログが表示されます。

- -

Screenshot of the Link dialog box, showing the Link Info tab

- -

ここで新規のリンクを作ることができます。ダイアログ内のコントロールは次の通りです。

- -
-
リンクタイプ
-
作成しているリンクのタイプ。既定は「URL」で、 MDN またはサイト外のウェブ上のどこかの URL です。「ページ内のアンカー」または「E-Mail」を選択することもできます。「ページ内のアンカー」を使用すると、ツールバーのアンカーボタンを使用して以前に挿入したアンカーにリンクすることができます。「E-Mail」を使用すると、受信者の電子メールアドレス、件名、および既定のメッセージ内容を入力して mailto: URL を設定できます。ほとんどの場合は「URL」を使用します。
-
記事タイトル検索/リンクテキスト
-
このフィールドには2つの目的があります。まず、リンク先として使用される特定のテキストを指定します (または、ダイアログボックスを開く前にドキュメント内のテキストを選択していた場合、そのテキストがリンク先として表示されます)。ここに入力されたテキストは、入力した内容と一致する MDN 上の記事を検索して、可能な宛先ページを見つけるために使用されます。たとえば、このボックスに "Array" と入力すると、次のように表示されます。
- Screenshot of the Link dialog box, showing a lookup menu for the text "Array"
-
- -
-
ここに、入力したテキストがタイトルに含まれる MDN のすべてのページのリストが表示されます。リストをスクロールしてそれらのページの1つを選択するか、入力を続けてリストを絞り込むことができます。一覧の項目にはロケールが表示されます(この場合、"[en-US]")。そのテキストはリンク先のテキストでは使用されませんが、編集中のロケールと同じロケールの記事にリンクしていることを確認するのに役立ちます。
-
添付ファイル
-
また、このリストから添付ファイルを選択して、リンクを現在のページに添付されているファイルのいずれかへのリンクにすることもできます。これはコードサンプルなどをダウンロードするためのリンクを提供する素晴らしい方法です。
-
URL
-
最後に、 URL フィールドで実際に URL を直接入力できます。「記事タイトル検索」または「添付ファイル」メニューで選択した URL も表示されます。一般的な方法は、 MDN の他の場所で作業しているページに URL を貼り付けることです。 MDN の別の記事にリンクする場合は、 URL の先頭からドメイン名 ("https://developer.mozilla.org") を削除してください。
-
- -

リンクを設定したら、 OK ボタンをクリックしてそれを挿入します。

- -
-

注意していると、ハイパーリンクエディターダイアログに2番目のタブ (Advanced、高度な設定) があることがわかります。少なくとも現時点では、定期的に使用することをお勧めするオプションはありません。将来はリンクのための代替スタイルが存在する可能性がありますが、新しいツールバーウィジェットを追加して、それらの機能が利用可能になったらそれを使用する可能性があります。

-
- -

既存テキストのリンク

- -

既存のテキストをリンクにする場合は、プロセスをいくらか簡略化することができます。ハイパーリンクエディタを開く前に、リンクにするテキストを選択します。記事タイトル検索/リンクテキストフィールドに選択したテキストがあらかじめ入力されます。たとえば、次のテキストがあるとします。

- -
-

このプロジェクトの作業中に JavaScript 配列を使用すると便利です。

-
- -

"arrays" を適切なコンテンツへのリンクにする必要があります。その単語を選択してリンクエディタを起動するだけです。前のケースと同様の事前入力済みのダイアログが表示されます。提案された記事の上にマウスを「ホバーする」と、相対スラグ (developer.mozilla.orgを基準にした相対 URL) が表示され、その場所と記事の種類をより正確に把握できます。

- -

ルックアップメニューとURLのツールチップを表示する[Link]ダイアログボックスのスクリーンショット

- -

ここでは一致候補として提案された記事のうち、"Arrays" は良い選択のように見えるので、それを選択することができます。これは自動的に URL フィールドに入力されるので、 OK をクリックすれば、テキストは次のようなリンクに変わります。

- -
-

このプロジェクトの作業中に JavaScript の配列を使用すると便利です。

-
- - - -

MDN はマクロを大量に使用しており、与えられた用語に適切なコンテンツへのリンクを自動的に作成したり、スタイルガイドに従ってスタイルを設定したりしています。これを考えてみましょう。私たちのスタイルガイドは、API の用語名、HTML の要素と属性、 CSS のプロパティ、関数名などは {{HTMLElement("code")}} 要素でスタイリングする必要があることを示しています。それらはまた、通常は、 MDN の適切なページへのリンクにする必要があります。

- -

マクロを使用してこれらのリンクを作成するには少し慣れが必要ですが、多くの利点があります。

- - - -

これらのマクロはたくさんありますが、ここではそれらをすべて見ないようにします。代わりに、最も一般的なもののいくつかの特定の例を見ていきます。詳細なリストについては、 MDN のカスタムマクロガイドのハイパーリンクの作成を参照してください。これらのマクロのいずれかの KumaScript ソースコードをいつでも見ることができます。ほとんどは、どのように動作するのか、もしあれば、さまざまなパラメータが何であるかを説明するコメントを先頭に付けています。

- -

API 文書へのリンク

- -

API へのスタイル付きリンクを作成するために非常に役立つマクロが多数あります。ここには最も有用なものがいくつかあります。いずれの場合も、 (<code> スタイリングの自動追加を抑制するなど) 出力をより詳細に制御できるようにパラメータを追加することができます。下の各マクロ名をクリックすると、マクロコード自体を読むことができます。それらはすべて、どのように動作するのか、すべてのパラメータが何であるかを説明するコメントを先頭に付けています。

- -
-
{{TemplateLink("HTMLElement")}}
-
適切にスタイル付けされ、リンクされた HTML 要素の名前を挿入します。たとえば、 \{{HTMLElement("table")}} は {{HTMLElement("table")}} を生成します。
-
{{TemplateLink("cssxref")}}
-
CSS リファレンスの CSS プロパティ、 @-規則、セレクターの文書を挿入します。たとえば、 \{{cssxref("background-color")}} は {{cssxref("background-color")}} になります。
-
{{TemplateLink("domxref")}}
-
指定された API 用語の Web API リファレンスへのリンクを挿入します。たとえば、 \{{domxref("window")}} は {{domxref("window")}} を生成し、 \{{domxref("window.scrollBy()")}} は {{domxref("window.scrollBy()")}} を挿入します。テキストをオーバーライドする追加のパラメータを指定することもでき、 \{{domxref("window.scrollBy", "scrollBy()")}} は {{domxref("window.scrollBy", "scrollBy()")}} になります。
-
{{TemplateLink("SVGElement")}}
-
SVG 要素の名前を適切にスタイル付けしてリンクしたものを挿入します。たとえば、 \{{SVGElement("circle")}} は {{SVGElement("circle")}} を生成します。
-
- -

同じ記事のセクションにリンクする

- -

同じ記事内のセクションにリンクするには、anch マクロを使用できます。構文は簡単です: \{{anch("宛先セクション名")}}。デフォルトでは、表示されているリンクテキストはそのセクションのタイトルですが、代わりに使用する代替テキストを示す2番目のオプションのパラメータを追加できます。いくつかの例を示します。

- - - -

バグにリンクする

- -

{{TemplateLink("bug")}} マクロを使って、Mozilla の Bugzilla データベースのバグにリンクすることができます。このマクロは、リンクするバグ番号という単一のパラメータを受け入れます。たとえば、\{{bug(765642)}} は {{bug(765642)}} のようになります。

- -

同様に、他のブラウザーやウェブエンジンのバグへのリンクを作成することもできます。

- -
-
WebKit (Safari, etc.)
-
{{TemplateLink("WebkitBug")}}: \{{webkitbug(31277)}} は {{webkitbug(31277)}} を生成します。
-
- -

RFCにリンクする

- -

インターネットがコアレベルで動作する方法の多くは、 RFC に文書化されています。 {{TemplateLink("RFC")}} マクロを使用して簡単に RFC を参照できます。たとえば、 \{{RFC(2616)}} は {{RFC(2616)}} になります。オプションで、記事の選択されたテキスト部分、および/またはリンク先の仕様内のセクション番号の代わりに、使用する代替リンクテキストを提供することもできます。

- -

XPCOM インターフェイスに関する情報へリンクする

- -
-

MDN スタッフはもはや XPCOM の文書を積極的に管理していませんが、ボランティアの貢献は歓迎します。

-
- -

Mozilla の内部を文書化している場合は、 XPCOM のインタフェース文書へのリンクを簡単に作成できることが役立ちます。これにはいくつかのマクロが使われています。

- -

XPCOM インターフェイスの文書全体にリンクするための構文は、 \{{interface("interfacename")}} です。たとえば、次のように書くことができます。

- -
-

When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.

-
- -

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

- -
-

When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.

-
- -

XPCOM インターフェイス上の特定のメソッドまたは属性に関する情報にリンクする必要がある場合は、 {{TemplateLink("ifmethod")}} および {{TemplateLink("ifattribute")}} マクロが必要です。これらは、インターフェイスの名前と、参照したいメソッドまたは属性の名前を引数として受け入れます。 {{TemplateLink("ifmethod")}} マクロは、メソッドの名前の後にスタイルガイドに必須のカッコを追加することによって特別なフォーマットを行うので、特に興味深いです。たとえば、 \{{ifmethod("nsIIOService", "newURI")}} の結果は {{ifmethod("nsIIOService", "newURI")}} になります。それは、あなたが将来的にスタイルガイドの変更の可能性から保護されているケースです！

- -

Mozilla 設定文書へのリンク

- -

Mozilla プリファレンスの名前を挿入し、プリファレンスリファレンスの対応するページにリンクするには、 {{TemplateLink("pref")}} マクロを使用します。これには1つのパラメータ、つまりリンク先のプリファレンスのフルネームが指定されています。たとえば、 \{{pref("javascript.options.showInConsole")}} を使用すると、 {{pref("javascript.options.showInConsole")}} を作成できます。

- -

Mozilla ソースファイルへリンクする

- -

source マクロを使用して、 Mozilla のソースツリー内のファイルにリンクすることができます (おそらくこれは頻繁ではありません)。ファイルの完全な URL を指定する代わりに、単に /source/ ディレクトリを基準にしたパスを指定することができます。例: \{{source("browser/Makefile.in")}} は {{source("browser/Makefile.in")}} というリンクを生成します。

- -

オプションで、リンクに使用する代替テキストを指定することもできます。たとえば、 \{{source("browser/Makefile.in", "ブラウザーの makefile")}} を使用すると、 {{source("browser/Makefile.in", "ブラウザーの makefile")}} のような結果になります。

- -
-

マクロの使用方法について詳しく知りたい場合は、 {{anch("Using macros")}} のドキュメントを参照してください。また、マクロシステムの詳細については、 KumaScript のドキュメントを参照してください。

-
- -

推奨コンテンツのリンク

- -

関連ページやその他のお勧め資料のリストを作成する場合は、サイドバーにクイックリンクボックスを作成してください。このメカニズムは、記事の末尾にある古い「関連情報」の見出しを置き換えるものです。クイックリンクボックスの作成方法の詳細については、クイックリンクを参照してください。

- -

URL スキーム

- -

セキュリティ上の理由から、作成するのは以下のスキームを使用するリンクのみにしてください。

- - - -

他のものは動作するかもしれないし、動作しないかもしれませんが、対応しておらず、おそらく編集スタッフによって削除されます。

- -
-

about: や chrome: のような特別な URL スキームは、 Firefox、 Google Chrome、その他のブラウザーで、設定、デバッグ情報などの特別なコンテンツへのアクセスを提供するために使用されます。これらのリンクは記事のコンテンツからは機能しませんので、 MDN の記事内でこれらのスキームを使用してリンクを作成しないでください。同様のことは javascript: と jar: スキームにも適用され、これらはセキュリティ上の予防策から、最新のブラウザーではブロックされています。

-
- -

{{EditorGuideQuicklinks}}

diff --git a/files/ja/mdn/editor/redirects/index.html b/files/ja/mdn/editor/redirects/index.html deleted file mode 100644 index 80a1d7268b..0000000000 --- a/files/ja/mdn/editor/redirects/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: リダイレクト -slug: MDN/Editor/Redirects -tags: - - Guide - - MDN Meta -translation_of: MDN/Editor/Redirects ---- -
{{MDNSidebar}}
- -

時々、単純にほかのページやほかのセクションへリダイレクトするためのページが必要なことがあります。この記事ではリダイレクトについて説明します。

- -

リダイレクトを作成する

- -

たとえば、あるページを作成した後にほかのページにマージした場合など、リダイレクトは必要になってくるでしょう。リダイレクトを作成するには、単純にこのような ツールバー上のリダイレクトボタンをクリックするだけです。

- -

そうすると、転送先の URL と名前を聞くダイアログボックスが表示されます。名前はそれほど重要ではありません。リダイレクトページ自体を見てどこのページへリダイレクトしているかを知りたいときにだけ利用します。URL は "/en-US/docs/foo" のように完全なパスである必要があります。相対 URL は動作しません。しかし、"/destination/url/here#section_name" のように、ハッシュマーク("#") 文字を含んだターゲットを使って、セクションを指定することが可能です。これでターゲットページのセクションへ直接ユーザーをリダイレクトさせることができます。

- -

リダイレクトページの内容は、リダイレクト指示のみとするべきです。それ以外の内容はリダイレクトを作成する前に、すべて新しいページへ移してください。また、オリジナルページのあらゆるレビューフラグをクリアしておき、要レビューの一覧に不思議なエントリーがあることを避けるようにします。

- -
-

注: 最も重要なことは、リダイレクトページからすべてのタグを削除することです。そうしないと、リダイレクトページは (同じタグを持っていると仮定して) 目的のページと一緒に検索結果に表示され、読者を混乱させ、検索結果ページの貴重なスペースを使ってしまいます。また、 SEO にも悪影響を及ぼす可能性があります。

-
- -

ページを削除するとき

- -

ページの削除を依頼する前に、MDN 上のほかのページにリダイレクトをすべきではないか考えてください。もしユーザーが古いリンクからこのページに来た場合には、404("page not found") エラーを返すよりも正しいページへリダイレクトさせた方がよいです。ページの完全な削除は最終手段です。スパムやその他まったく適切でない内容に対処するための手段として予約されたものです。

- -

{{EditorGuideQuicklinks}}

diff --git a/files/ja/mdn/editor/source_mode/index.html b/files/ja/mdn/editor/source_mode/index.html deleted file mode 100644 index b78db66714..0000000000 --- a/files/ja/mdn/editor/source_mode/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: ソースモード -slug: MDN/Editor/Source_mode -tags: - - Guide - - Intermediate - - MDN Meta - - editor - - ガイド -translation_of: MDN/Editor/Source_mode ---- -
{{MDNSidebar}}
- -

MDN のエディターには、ソース編集モードへ切り替えられる目立つボタンがあります。このモードでは、編集している本文の基礎となる HTML を見ることができます。このガイドでは MDN の wiki コンテンツのソース編集モードで何ができるか、これで何をすべきか、また最も重要なこととして何をすべきでないのかを理解するのに役立ちます。

- -
-

ソースモードを使用することを考える前に、使用しないことを私たちが強く主張していることにご注意ください。やっていることがスタイルガイドに合わせるための単純なことでない限り (残念ながらまだソースモードでないと作成できないものが必要とされています)、ソースモードを使用する必要はないはずです。下記の{{anch("Warnings and caveats", "警告")}}をご覧ください。

-
- -

ソースモードにアクセスする

- -

ソースモードに移るのは簡単です。エディターツールバーの左上隅にあるソースボタンをクリックしてください。

- -

ソースモードボタンが強調表示されたエディタツールバーの部分的なスクリーンショット

- -

整形や画像などによって、ソースは WYSIWYG コンテンツより (縦方向に) 短く、ソースを編集ボックス内で見つけるのに上にスクロールしないといけないことがよくあります。

- -

警告と抗議

- -

上述の通り、ソースモードを使う必要があることは滅多にありません。ソースをいじらないとできないことは少ししかありません。最終的には編集インターフェイスがこれを扱えるように更新されるでしょう。

- -

MDN 貢献者ガイドのどこにも記述されていないことはソースに追加してはいけません。つまり、

- - - -

ソースモードで作業する

- -

ソースモードでは、 Wiki ページを構成する生の HTML を編集できます。エディターでの制約を受けなくなりますが、行ったすべての作業がスタイルガイドに適合していて、安全かつ確実であることを確認してください。

- -
-

ソースモードでの編集時間を長くするのではなく、微修正のみを行うべきです。

-
- -

残念ながら、Tab キーは、ソースモードでは動作しません。 Tab キーを使用する場所では、半角スペースを 2 つ挿入してください。

- -

MDN が許可しない HTML 要素や属性を使用すると、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく一貫性を保つために再整形されます。

- -

ソースモードを正しく使用する

- -

MDN のスタイルガイドに従う唯一の方法は、いくつかの具体的な例でソースモードの使用を頼ることです。 このセクションでは、これらのケースと、他のものを壊すことなくこれらの機能を適切に実装する方法について説明します。

- -

サンプルコードの行を強調表示する

- -

ツールバーのブロックグループの PRE または 構文ハイライター ボタンを使用して設定されたサンプルコードスニペットのブロック内で、特定のコード行に特別な注意を向けることができます。これを行う唯一の方法は、ソースモードを開いてコードを含む {{HTMLElement("pre")}} ブロックを探し、<pre> タグの {{HTMLAttrxRef("class")}} 属性を編集して、次のような highlight コンポーネントを組み込むことです。

- - - -
"hightlight[" <line-number-list> "]"
-
-Where:
-<line-number-list> = [ <line-number> | <line-range> ]#
-<line-range> = <line-number> - <line-number>
-<line-number> = <number-token>
- -

たとえば、既存のタグが <pre class="brush: js"> で、4行目と7行目にハイライトを追加する場合は、それを <pre class="brush:js; highlight:[4,7]"> に変更します。

- -

より完全な例を見てみましょう。

- -
- - - - - - - - - - - - - -
ハイライト前ハイライト後
- 
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-var path1 = new Path2D();
-path1.rect(10, 10, 100, 100);
-
-var path2 = new Path2D(path1);
-path2.moveTo(220, 60);
-path2.arc(170, 60, 50, 0, 2 * Math.PI);
-
-ctx.stroke(path2);
-
- -

ここで、 {{HTMLElement("pre")}} タグは <pre class="brush: js;">

- 		- 
-var canvas = document.getElementById("canvas");
-var ctx = canvas.getContext("2d");
-
-var path1 = new Path2D();
-path1.rect(10, 10, 100, 100);
-
-var path2 = new Path2D(path1);
-path2.moveTo(220, 60);
-path2.arc(170, 60, 50, 0, 2 * Math.PI);
-
-ctx.stroke(path2);
- -

ここで <pre> タグは <pre class="brush: js; highlight:[4,7]">に変更されました。

-
-
- -

ツールバーボタンにないスタイル

- -

私たちは MDN で使用するいくつかのスタイルを持っていますが、通常のユーザーインターフェイスでは使用できません。 幸いにも、これらはあまり頻繁には使用されません。 いくつかの例があります。

- - diff --git a/files/ja/mdn/editor/syntax_highlighting/index.html b/files/ja/mdn/editor/syntax_highlighting/index.html deleted file mode 100644 index d369e0d239..0000000000 --- a/files/ja/mdn/editor/syntax_highlighting/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: シンタックスハイライト -slug: MDN/Editor/Syntax_highlighting -tags: - - Guide - - Howto - - MDN Meta -translation_of: MDN/Editor/Syntax_highlighting ---- -
{{MDNSidebar}}

この機能は、MDNの記事にコードの例を追加するとき、構文の強調表現を可能にし、適切な部分をコードから視覚的に見つけやすくするように手助けをします。コードにシンタックスハイライトを行うには、

- -
    -
  1. -

    記事にコードを記述します。

    - -

    void main(int argc, char **argv) {

    - -

    printf("Hello world\n");

    - -

    }

    -
    2. -
  2. -

    コード部分を選択し、ツールバーの PRE アイコンをクリックします。

    - - 
    void main(int argc, char **argv) {
-
-printf("Hello world\n");
-
-}
-
    -
    3. -
  3. -

    Syntax Highlighter アイコンをクリックし、コードに適したプログラミング言語を選択します。以下の例ではC/C++を選択しています。

    - - 
    void main(int argc, char **argv) {
-
-printf("Hello world\n");
-
-}
    -
    4. -
- -
-

Note: エディタ上ではシンタックスハイライトが行われません。プレビューを表示するか、変更を保存して記事を表示することでシンタックスハイライトを確認できます。

-
diff --git a/files/ja/mdn/editor/tables/index.html b/files/ja/mdn/editor/tables/index.html deleted file mode 100644 index 88278dbeb3..0000000000 --- a/files/ja/mdn/editor/tables/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: 表 -slug: MDN/Editor/Tables -tags: - - Guide - - MDN Meta - - editor -translation_of: MDN/Editor/Tables ---- -
{{MDNSidebar}}
- -

表は情報を表現する便利な方法です。この記事では MDN の表を作成し、維持する方法と、いつ作るべきでいつ作るべきでないのかをカバーします。

- -

MDNでは、主にデータ点ごとに2つを超える情報のリストを表す時に表を使います。名前と値のあるリストを作成している場合は、ふつうは表の代わりにリストを使います。つまり2列の表の使用は避けた方が良いです。これは主にモバイル端末では表の表示が難しく読みにくいことがあるためで、このためなるべく使用を避けています。

- -

表の使い方や適切な書式の詳細は MDN スタイルガイドを読んでください。しかし、表の挿入や編集の実用テクニックを見ていきましょう。

- -

表を作成する

- -

新しい表を挿入するには、ツールバーの表ボタンを押してください。外見は as of Aug-2017 のようにになっています。

- -

表のプロパティダイアログボックスが開きます。

- -

表のプロパティダイアログボックスの表のプロパティタブのスクリーンショットb

- -

ここには表のプロパティと高度な設定の2つのタブがあります。

- -

表のプロパティタブ

- -

This tab is where you'll do most of your work configuring the table, as there are very few items in the Advanced tab that we recommend using. The options here are:

- -
-
行数
-
The number of rows in your table. You may add more rows while in the editor, but this lets you quickly configure your table.
-
列数
-
The number of columns in your table.
-
ヘッダ
-
Lets you configure where your headers are, if any. By default, no header cells are added to your table; however, we generally prefer that tables have headers, so you should change this most of the time. The possible values are None, First row, First column, and Both.
-
行揃え
-
Lets you align the table along the left, right, or center of the article. Please do not use this option. Our style guide specifies that tables should always be left-aligned. There are very few exceptions to this rule.
-
キャプション
-
You may choose to add a caption to your table; however, we do not usually do so on MDN, so you will probably leave this blank.
-
表の概要
-
You should typically leave this blank, as you should be providing appropriate explanatory text adjacant to your table.
-
- -

高度な設定タブ

- -

The Advanced tab provides a few additional options, most of which we don't use on MDN and will likely remove in the future.

- -

Screenshot of the Table Properites dialog box's Advanced tab

- -

As you see here, there are only four options; they are:

- -
-
Id
-
The {{HTMLElement("table")}} element's id. We generally do not use IDs on tables on MDN.
-
文字表記の方向
-
Lets you establish the writing direction used in the table. This should be used only when localizing content.
-
スタイル
-
This field lets you hand-enter custom CSS. Do not use this field! We will probably remove your table if you do. We are trying to eliminate all uses of custom styles outside what's provided by our stylesheets.
-
スタイルシートクラス
-
This lets you specify a stylesheet class to use for the table. This should nearly always be "standard-table", which is our standard table class.
-
- -

Once you've finished configuring your table, click the OK button to create it.

- -

表を保守する

- -

Once a table has been created, working with it is very much like in any table editor, entering data into its cells. Pressing the tab key will advance you to the next cell in the table, wrapping to the next row if you're in the last cell in the row you're currently working on. If you're in the last cell of the last row when you press tab, a new row will be added to the end of the table, and the cursor will be placed in the first cell of the new row.

- -

You may right-click on the table to get an assortment of options for adjusting the cells, rows, columns, and the table itself:

- -

Screenshot of the Table context menu

- -
-
Paste
-
On browsers that support pasting via script (some, including Firefox, do not, for security purposes), selecting this option pastes the contents of the clipboard at the current point in the table.
-
Cell
-
This submenu offers options related to the selected cell or cells. See {{anch("Cell options")}}.
-
Row
-
This submenu offers options related to the selected row or rows. See {{anch("Row options")}}.
-
Column
-
This submenu offers options related to the selected column or columns. See {{anch("Column options")}}.
-
Delete Table
-
Deletes the entire table.
-
Sort Table
-
Opens a dialog box providing options for sorting the contents of the table. See {{anch("Sorting tables")}} below.
-
Table Properties
-
Opens the same table properties dialog used to create a new table.
-
- -

セルのサブメニュー

- -

The Cell submenu offers options related to manipulating and editing cells in your table, and looks like this:

- -

Screenshot of the Table context menu's Cell submenu

- -

These options should be fairly self-explanatory, with the exception that Merge Cells is available only if you have selected multiple cells; you can then use this option to combine them into a single cell. The Merge Right and Merge Down options merge the current cell with the one to the right, or below, respectively.

- -

セルプロパティのダイアログボックス

- -

The Cell Properties option opens a dialog box that gives you control over the details of a cell:

- -

Screenshot of the Cell Properties dialog box

- -

The options you can configure here are:

- -
-
Width
-
The width of the cell; you may change the units used for this value using the adjacent drop-down. Please don't use this. You shouldn't need to adjust widths of cells except in rare cases involving nesting images or example code within tables.
-
Height
-
The cell's height; this is always in pixels. Please don't use this. We prefer for cell sizes to be determined automatically, except in exceptionally rare cases.
-
Word Wrap
-
Specifies whether or not the cell's contents should be permitted to wrap. This should almost always be left at "Yes", the default.
-
Horizontal Alignment
-
Allows you to set the horizontal alignment for the cell's or cells' contents. This should almost always be left at the default.
-
Vertical Alignment
-
Lets you set the vertical alignment of the cell or cells. This should nearly always be left at the default, but may be adjusted if necessary.
-
Cell Type
-
Lets you specify whether the cell or cells contain data or header information. Making a row a header row gives it header styling that stands out from the data within the table.
-
Rows Span
-
Lets you specify how many rows the cell should take up within the table. Rarely needed, but useful for certain types of table.
-
Columns Span
-
Lets you indicate how many columns the cell should occupy within the table. You should rarely need to use this option.
-
Background Color
-
Lets you specify a background color for the cell. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.
-
Border Color
-
Lets you specify a border color for the cel. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.
-
- -

行のサブメニュー

- -

The Row submenu gives you options you may use to adjust and refine the rows in your table:

- -

Screenshot of the Table context menu's Row submenu

- -

These options are all straightforward:

- - - -

列のサブメニュー

- -

The Column submenu lets you edit the columns in your table:

- -

Screenshot of the Table context menu's Column submenu

- -

These options mirror those in the row options menu:

- - - -

{{EditorGuideQuicklinks}}

diff --git a/files/ja/mdn/kuma/index.html b/files/ja/mdn/kuma/index.html deleted file mode 100644 index af90402f86..0000000000 --- a/files/ja/mdn/kuma/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 'Kuma: MDN の wiki プラットフォーム' -slug: MDN/Kuma -tags: - - Kuma - - Landing - - MDN - - MDN Meta -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
- -

Kuma は MDN Web Docs を強力にする Django コードです。

- -

{{SubpagesWithSummaries}}

- -

Kuma に参加する

- -

Kuma に参加するには:

- - diff --git a/files/ja/mdn/kuma/server_charts/index.html b/files/ja/mdn/kuma/server_charts/index.html deleted file mode 100644 index d8664c5fa9..0000000000 --- a/files/ja/mdn/kuma/server_charts/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: サーバーチャート -slug: MDN/Kuma/Server_charts -tags: - - Kuma - - MDN Meta -translation_of: MDN/Kuma/Server_charts ---- -
{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}
- -

このページには MDN サーバのステータスチャートが一覧表示されます。

- -

直近の 30 分

- -

エラーレート

- -

{{EmbedNewRelicChart("2fKQPvMkSwU", 300)}}

- -

Kuma Web アプリのレスポンス時間 (平均)

- -

{{EmbedNewRelicChart("43yJ3xwUecU", 300)}}

- -

Kuma Web アプリのレスポンス時間 (パーセンタイル)

- -

{{EmbedNewRelicChart("6NzEi7ZBdoN", 300)}}

- -

直近の 24 時間

- -

エラーレート

- -

{{EmbedNewRelicChart("kVeeXx52g0l", 300)}}

- -

Kuma Web アプリのレスポンス時間 (平均)

- -

{{EmbedNewRelicChart("2yWkQ9WbEZW", 300)}}

- -

Kuma Web アプリのレスポンス時間 (パーセンタイル)

- -

{{EmbedNewRelicChart("aeFnbLonmvx", 300)}}

- -

直近の 3 日間

- -

エラーレート

- -

{{ EmbedNewRelicChart("iv2F4gQYjFX", 300)}}

- -

Kuma Web アプリのレスポンス時間 (平均)

- -

{{EmbedNewRelicChart("ddTq7AKgyaG", 300)}}

- -

Kuma Web アプリのレスポンス時間 (パーセンタイル)

- -

{{EmbedNewRelicChart("bRmyM6ujKA8", 300)}}

- -

直近の 3 ヶ月

- -

エラーレート

- -

{{EmbedNewRelicChart("fjJ7HnGYNLd", 300)}}

- -

Kuma Web アプリのレスポンス時間 (平均)

- -

{{EmbedNewRelicChart("sIaVOeAxNx", 300)}}

diff --git "a/files/ja/mdn/kuma/\343\202\263\343\203\263\343\203\210\343\203\252\343\203\223\343\203\245\343\203\274\343\203\210/index.html" "b/files/ja/mdn/kuma/\343\202\263\343\203\263\343\203\210\343\203\252\343\203\223\343\203\245\343\203\274\343\203\210/index.html" deleted file mode 100644 index 9e7fc695c3..0000000000 --- "a/files/ja/mdn/kuma/\343\202\263\343\203\263\343\203\210\343\203\252\343\203\223\343\203\245\343\203\274\343\203\210/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -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/mdn/structures/api_references/api_reference_sidebars/index.html b/files/ja/mdn/structures/api_references/api_reference_sidebars/index.html deleted file mode 100644 index 6695ab0969..0000000000 --- a/files/ja/mdn/structures/api_references/api_reference_sidebars/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: API リファレンスサイドバー -slug: MDN/Structures/API_references/API_reference_sidebars -tags: - - API - - Documentation - - Guide - - MDN - - MDN Meta - - Reference - - groupdata - - metadata - - onboarding - - sidebars -translation_of: MDN/Structures/API_references/API_reference_sidebars ---- -
{{MDNSidebar}}
- -

API リファレンスページにカスタムサイドバーを追加して、関連するインターフェイス、チュートリアル、およびその API に関連する他のリソースへのリンクを表示することができます。この記事ではその方法を説明します。

- -

サイドバーの作成

- -

API サイドバーを作成するには、次の3つの手順を実行する必要があります。

- -
    -
  1. API リファレンスページを作成します
    2. -
  2. 特定の API の項目を KumaScript リポジトリの GroupData.json データファイルに追加します
    3. -
  3. {{TemplateLink("APIRef")}} マクロを使用して、表示したい各ページにサイドバーを挿入します
    4. -
- -

これらのステップを順番に実行しましょう。この記事で参照する例は、Fetch API です。

- -

API リファレンスページの作成

- -

サイドバーをページに追加する前に、ページ自体を作成する必要があります (詳細については、API リファレンスに必要なものガイドを参照してください)。

- -

GroupData.json への項目の追加

- -

GroupData.json ファイルには、API 参照サイドバーに表示されるリンクに関するすべてのデータが格納されます。呼び出されると、{{TemplateLink("APIRef")}} マクロは引数として与えられた API 名を取り、GroupData.json でその名前を検索し、適切なサイドバーを作成してページに挿入します。

- -

GroupData.json に項目を追加するには、以下を行う必要があります。

- -
    -
  1. GitHub アカウントを持っていることを確認します
    2. -
  2. KumaScript リポジトリをフォークし、新しいブランチを作成して変更を保存し、リポジトリをローカルにクローンします
    3. -
  3. 作業を開始する前に新しいブランチをチェックアウトし、作業が終わったら変更を押してください
    4. -
  4. プルリクエストを作成して、MDN チームがあなたの作業をレビューし、必要に応じて変更を求めることができるようにします
    5. -
- -

GitHub の使用についてサポートが必要な場合は、互換性一覧表に詳細なガイドがあります。

- -

GroupData.json ファイルは、KumaScript リポジトリの macros ディレクトリ内にあります。それを見ると、巨大な JSON 構造があり、それぞれの API に独自のメンバーがあります。名前は API 名で、値は生成するサイドバーリンクを定義するいくつかのサブメンバーを含むオブジェクトです。

- -

たとえば、MDN の Fetch API ページを見てください。 GroupData.json の対応する項目は次のようになります。

- -
"Fetch API": {
-    "overview":   [ "Fetch API"],
-    "interfaces": [ "Body",
-                    "Headers",
-                    "Request",
-                    "Response",
-                    "FetchController",
-                    "FetchObserver",
-                    "FetchSignal",
-                    "ObserverCallback" ],
-    "methods":    [ "WindowOrWorkerGlobalScope.fetch()" ],
-    "properties": [],
-    "events":     []
-},
- -

ご覧のとおり、名前には "Fetch API" を使用し、オブジェクト値の内側には多数のサブメンバーが含まれています。

- -

GroupData 項目内に含めるサブメンバー

- -

この節では、GroupData 項目に含めることができるすべてのサブメンバーを一覧表示します。

- -

リストされたサブメンバーの中に含まれる値のほとんどは、リンクテキストと、表示されるリンクの最終的な URL を生成するためのメイン API インデックスページ — https://developer.mozilla.org/<language-code>/docs/Web/API — の最後に追加されたスラッグの両方に相当することに注意してください。そのため、例えば "Body" とすると、 en-US ロケールではこのようなリンクが生成されます。

- -
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Body</a></li>
- -

いくつかの例外があります。例えば "guides" サブメンバーには、関連するガイド/チュートリアルへのリンクを定義するリンク情報 (タイトルとスラッグ) が1つ以上含まれています。この場合、スラッグは MDN の docs ルート — https://developer.mozilla.org/<language-code>/docs — の最後に追加され、MDN のどこにでも記事を含めることができます。

- -

以下が利用可能なメンバーです。それぞれの場合、ロケールが en-US であると仮定した例が含まれています。これらはすべて技術的にはオプションですが、これらを省略する代わりに空の配列を含めることを強く推奨します。

- -
    -
  1. -

    "overview" — 値は配列で、 API 概要ページがあればその中にスラッグを含めます。"Fetch API" の場合、 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API へのリンクが生成されます。

    -
    2. -
  2. -

    "interfaces" — 値は配列で、その API の一部を構成するすべてのインターフェイスをリストアップする必要があります。 "Body" の場合は https://developer.mozilla.org/en-US/docs/Web/API/Body へのリンクが生成されます。

    -
    3. -
  3. -

    "methods" — 値は、 {{domxref("Navigator")}} や {{domxref("Window")}} で生成されたインスタンス化メソッドなど、仕様が他の API に関連付けられたインターフェイスに追加するメソッドを含む配列です。膨大な数のメソッドがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 "WindowOrWorkerGlobalScope.fetch()" を実行すると https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch へのリンクが張られます。同じ API が所有するインターフェイスのメンバーであるメソッドを重複してリストアップしないようにしましょう。

    -
    4. -
  4. -

    "properties" — 値は、 API に関連付けられたすべてのプロパティを含む配列です。これには API 仕様で定義されているインターフェイスのメンバーであるプロパティや、API が他のインターフェイス上で定義しているプロパティを含めることができます。膨大な数のプロパティがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に配置することを検討するとよいでしょう。 "Headers.append" を実行すると、 https://developer.mozilla.org/en-US/docs/Web/API/Headers/append へのリンクが生成されます。

    -
    5. -
  5. -

    "events" — 値は、 API の仕様やその他の場所で定義されている API に関連するすべてのイベントを含む配列です。膨大な数のイベントがある場合は、最も人気のあるものだけをリストアップするか、リストの先頭に置くことを検討するとよいでしょう。 "animationstart" を実行すると、 https://developer.mozilla.org/en-US/docs/Web/Events/animationstart へのリンクが生成されます。

    -
    6. -
  6. -

    "guides" — 値は、API の使用方法を説明するガイドへのリンクを定義する1つ以上のオブジェクトを含む配列です。各オブジェクトは、ガイド記事を指す部分的な URL を含む "url" と、リンクのリンクテストを定義する "title" の2つのサブメンバーを含みます。例として、次のようなオブジェクトがあります。

    - - 
    { "url":   "/docs/Web/API/Detecting_device_orientation",
-"title": "Detecting device orientation" }
    - -

    "Detecting device orientation" というタイトルのリンクを生成し、 https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation を指します。

    -
    7. -
  7. -

    "dictionaries" — API の一部であるすべての辞書を一覧にした文字列の配列。一般的に、特別な意味がある場合や、複数のページから参照する必要がある場合を除き、複数のプロパティやメソッドで使用される辞書のみをここにリストアップすべきです。 "RTCConfiguration" の場合は https://developer.mozilla.org/en-US/docs/Web/API/RTCConfiguration へのリンクを表示します。

    -
    8. -
  8. -

    "types" — API で定義されている型定義子と列挙型の配列。リストを短くするために、特別に重要なものや複数のページから参照されるものだけをリストアップすることもできます。 "RTCCodecType" は https://developer.mozilla.org/en-US/docs/Web/API/RTCCodecType へのリンクを生成します。

    -
    9. -
  9. -

    "callbacks" — 値は、その API で定義されているすべてのコールバック型のリストを含む配列です。コールバック型を含む API であっても、このグループを使用する必要はないと思われるかもしれません。文字列 "RTCSessionDescriptionCallback" を含むこの配列の項目は、 https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescriptionCallback へのリンクが生成されます。

    -
    10. -
- -

サイドバーで使用されるタグ

- -

サブメンバーによっては、ページタグに基づいて子ページから自動的に発見されるものがあります。最上位 API 以下のページはサイドバーがレンダリングされるたびにクロールされ、メソッド ("Method" タグ)、プロパティ ("Property" タグ)、コンストラクター ("Constructor"タグ) の項目が自動的に生成されます。

- -

サブメンバーにも、タグに基づいた警告アイコンが自動的に表示されます。実験的な ("Experimental" タグ)、標準外 ("Non Standard" または "Non-standard" タグ)、非推奨 ("Deprecated" タグ)、廃止 ("Obsolete" タグ) サブメンバーには装飾が追加されます。

- -

タグベースの処理に関する詳細情報は、 APIRef ソースの中にあります。

- -

サイドバーの挿入

- -

GroupData.json に API の項目を追加してプルリクエストとして送信し、その変更がメインリポジトリに受け入れられたら、 {{TemplateLink("APIRef")}} マクロを使用して API リファレンスページに設置することができ、 GroupData の API に引数として使用されます。例として、 WebVR API のサイドバーは、各ページに次のように設置されています。

- -
\{{APIRef("WebVR API")}}
diff --git a/files/ja/mdn/structures/api_references/index.html b/files/ja/mdn/structures/api_references/index.html deleted file mode 100644 index c1d806b234..0000000000 --- a/files/ja/mdn/structures/api_references/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: API リファレンス -slug: MDN/Structures/API_references -tags: - - API - - Contribute - - Guide - - Reference -translation_of: MDN/Structures/API_references ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ja/docs/MDN")}}
- -

クライアント側の JavaScript API は、ウェブ上で利用可能な技術の大部分を占めています。MDN には、これらの API で使用できる機能とその使用方法を説明する広範囲な参考資料が含まれています。このガイドセットでは MDN で API リファレンス資料を作成する方法について説明します。

- -

事前に準備するリソース

- -

API の文書化を開始する前に、次のものが必要です。

- -
    -
  1. 最新の仕様: W3C 勧告か初期の編集者の草稿かどうかに関わらず、その API をカバーする仕様の最新の草稿 (またはその仕様を参照) を参照する必要があります。通常それはウェブ検索で見つかります。最新のバージョンは「最新草稿」、またはそれに類するものの下にリストされている仕様のすべてのバージョンからリンクされることがよくあります。
    2. -
  2. 最新のウェブブラウザー: Firefox Nightly/Chrome Canary のような実験的/アルファ版のものが、あなたが文書化している機能をサポートする可能性が高いはずです。これは初期の/実験的な API を文書化している場合に特に関係します。
    3. -
  3. デモ/ブログ記事/その他の情報: できるだけ多くの情報を探しましょう。主なインターフェイス/プロパティ/メソッドが何であるか、主要な用途は何であるか、そしてそれを使って簡単な機能を書く方法を学ぶことで、API の仕組みに慣れるための時間を費やすことから始めておくと便利です。
    4. -
  4. 有益なエンジニアリングの連絡先: 仕様、API の標準化に携わっている人、またはブラウザでの実装について質問するためのフレンドリーなエンジニアリング担当者を見つけることは本当に便利です。見つけるのに適した場所は次のとおりです。 -
      -
    • 関連会社に勤めている場合は、社内のアドレス帳。
      • -
    • Mozilla の dev-platform や dev-webapi のリスト、public-webapps のような W3C のリストなど、その API の議論に関係する公開メーリングリスト。
      • -
    • 仕様そのもの。たとえば、 Web Audio API の仕様書では著者とその連絡先の詳細が上部に表示されています。
      • -
    -
    5. -
- -

高水準の構造

- -
-
What does an API reference need?
-
この記事では完全な API リファレンスに必要なページについて説明します。
-
Page types
-
MDN に繰り返し使用されるいくつかの種類のページがあります。この記事では、これらのページ種別とその目的、および新しいページを作成するときに使用する各テンプレートとテンプレートの例について説明します。
-
- -

個々のページの特徴

- -

これらの記事では、API リファレンスページに必要な個々のページの特徴を作成する方法について説明します。

- -
-
API リファレンスサイドバー
-
MDN API リファレンス記事にサイドバーを含めると、その API に関連する関連インタフェース、チュートリアル、その他のリソースへのリンクが表示されるようにカスタマイズできます。この記事では、この方法について説明します。
-
構文の節
-
MDN リファレンスページの構文の節には、その機能が持つ正確な構文 (例えば、どのような引数を受け付けるか、どの引数がオプションかなど) を定義する構文ボックスが含まれています。
-
コード例
-
MDN には、ウェブプラットフォーム機能の使用方法を示すために、ページ全体に挿入された多数のコード例があります。この記事ではコードの例をページに追加する際に使用できるさまざまなメカニズムと、使用する必要があるものとそのタイミングについて説明します。
-
仕様書一覧表
-
MDN のすべてのリファレンスページは、その API または技術が定義されている仕様または仕様に関する情報を提供する必要があります。この資料では、これらのテーブルの外観とその構成方法について説明します。
-
互換性一覧表
-
MDN には、公開されているウェブ文書の互換性一覧表の標準フォーマットがあります。つまり、すべてのブラウザーで共有されているDOM、HTML、CSS、JavaScript、SVG などの技術の文書です。この記事では、機能を使用して MDN ページに互換性データを追加する方法について説明します。
-
diff --git a/files/ja/mdn/structures/api_references/what_does_an_api_reference_need/index.html b/files/ja/mdn/structures/api_references/what_does_an_api_reference_need/index.html deleted file mode 100644 index 952c49ed70..0000000000 --- a/files/ja/mdn/structures/api_references/what_does_an_api_reference_need/index.html +++ /dev/null @@ -1,168 +0,0 @@ ---- -title: API リファレンスには何が必要ですか？ -slug: MDN/Structures/API_references/What_does_an_API_reference_need -tags: - - API - - ページ - - リファレンス -translation_of: MDN/Structures/API_references/What_does_an_API_reference_need ---- -
{{MDNSidebar}}
- -

この記事では、完全な API リファレンスに必要なページについて説明します。

- -
-

メモ: API リファレンスで作業しているときに書いたり更新したりする必要があるドキュメントのリストを作成し、完了したらチェックを外すことをお勧めします。

-
- -

API ページの概要

- -

An API reference will generally contain the following pages. You can find more details of what each page contains, examples, and templates, in our Page types article.

- -
    -
  1. Overview page
    2. -
  2. Interface pages
    3. -
  3. Constructor pages
    4. -
  4. Method pages
    5. -
  5. Property pages (including event handlers properties)
    6. -
  6. Event pages
    7. -
  7. Concept/guide pages
    8. -
  8. Examples
    9. -
- -
-

Note: We'll be referring to the Web Audio API for examples in this article.

-
- -
-

Note: To create a page as specified below, the easiest way is to go to the parent page you want it to hang off, and choose Cog icon > New sub-article. If you haven't got this option available on your MDN interface, you'll need to request this privilege (ask at mdn-admins@mozilla.org), or ask another MDN contributor to create them for you.

-
- -

概要ページ

- -

A single API overview page is used to describe the role of the API, its top-level interfaces, related features contained in other interfaces, and other high level details. Its name and slug should be the name of the API plus "API" on the end. It is placed at the top level of the API reference, as a child of https://developer.mozilla.org/en-US/docs/Web/API.

- -

例:

- - - -

インターフェイスページ

- -

Each interface will have its own page too, describing the purpose of the interface, listing any members (constructors, methods, properties, etc. it contains), and showing what browsers it is compatible with. A page's name and slug should be the name of the interface, exactly as written in the spec. Each page is placed at the top level of the API reference, as a child of https://developer.mozilla.org/en-US/docs/Web/API.

- -

例:

- - - - - -
-

Note: We document every member appearing in the interface. You should bear the following rules in mind:

- -
    -
  • We document methods defined on the prototype of an object implementing this interface (instance methods), and methods defined on the actual class itself (static methods). On the rare occasions that they both exist on the same interface, you should list them in separate sections on the page (Static methods/Instance methods). Usually only instance methods exist, in which case you can put these under the title "Methods".
    • -
  • We do not document inherited properties and methods of the interface: they are listed on the respective parent interface. We do hint at their existence though.
    • -
  • We do document properties and methods defined in mixins, though we use the mixin name as interface name. (This is not optimal as the mixin name will not appear in the console, but it prevents the duplication of documentation. We may revisit this in the future.)
    • -
  • Special methods like the stringfier (toString()) and the jsonizier (toJSON()) are also listed if they do exist.
    • -
  • Named constructors (like Image()  for {{domxref("HTMLImageElement")}} ) are also listed, if relevant.
    • -
-
- -

コンストラクタページ

- -

Each interface has 0 or 1 constructors, documented on a subpage of the interface's page. It describes the purpose of the constructor and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the constructor, which is exactly the same as the interface name, and the title is interface name, dot, constructor name, then parentheses on the end.

- -

Example:

- - - -

プロパティページ

- -

Each interface has zero or more properties, documented on subpages of the interface's page. each page describes the purpose of the property and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the property, and the title is interface name, dot, then property name.

- -

Examples:

- - - - - -
-

Note: Event handler properties are treated in the same way as regular properties; they are generally listed in a separate section on the interface page though.

-
- - - -

メソッドページ

- -

Each interface has zero or more methods, documented on subpages of the interface's page. each page describes the purpose of the method and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the method, and the title is interface name, dot, method name, then parentheses.

- -

Examples:

- - - - - -

イベントページ

- -

Each event handler property you create will have a corresponding event page, describing the event that causes the handler to fire, documented on a subpage of https://developer.mozilla.org/en-US/docs/Web/Events. Each page describes the purpose of the event and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug and title is the name of the event.

- -

Example:

- - - -

Concept/guide pages

- -

Most API references have at least one guide and sometimes also a concept page to accompany it. At minimum, an API reference should contain a guide called "Using the name-of-api", which will provide a basic guide to how to use the API. More complex APIs may require multiple usage guides to explain how to use different aspects of the API.

- -

If required, you can also including a concepts article called "name-of-api concepts", which will provide explanation of the theory behind any concepts related to the API that developers should understand to effectively use it.

- -

These articles should all be created as subpages of the API overview page. For example, the Web Audio has four guides and a concept article:

- - - -

例

- -

You should create some examples that demonstrate at least the most common use cases of the API. You can put these anywhere that is appropriate, although the recommended place is the MDN GitHub repo.

diff --git a/files/ja/mdn/structures/live_samples/simple_live_sample_demo/index.html b/files/ja/mdn/structures/live_samples/simple_live_sample_demo/index.html deleted file mode 100644 index 9e550d81ac..0000000000 --- a/files/ja/mdn/structures/live_samples/simple_live_sample_demo/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: ライブコードサンプルの簡単なデモ -slug: MDN/Structures/Live_samples/Simple_live_sample_demo -tags: - - MDN Meta - - Structures - - 例 -translation_of: MDN/Structures/Live_samples/Simple_live_sample_demo ---- -
{{MDNSidebar}}
- -

例

- -

これは、MDN でライブデモを行う方法を示す非常に簡単な例です。詳細については、ライブサンプルを参照してください。

- -
<form>
-  <label>Try me<input type="text" name="name"></label>
-  <input type="submit" value="go">
-</form>
- -
form {
-  border-radius: 10px;
-  background: powderblue;
-}
- -
var f = document.querySelector('form');
-
-f.addEventListener('submit', function(ev) {
-  ev.preventDefault();
-  document.querySelectorAll('input')[1].value = 'sending';
-}, false);
- -

{{ EmbedLiveSample('The_example', '', '', '') }}

- -
-

注: ローカライズしたページでは、最初の引数の値は、サンプルを含む見出しの ID と同じにしてください．

-
diff --git a/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html b/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html deleted file mode 100644 index a22ce9c70e..0000000000 --- a/files/ja/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: creating templates for multi-languages -slug: >- - MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages ---- -
{{MDNSidebar}}
-
註：　このページは執筆中です。
-

執筆用memo

- -

テンプレートの 2 つのタイプ

-

page.langage を使わない

diff --git a/files/ja/mdn/tools/add-ons_and_plug-ins/index.html b/files/ja/mdn/tools/add-ons_and_plug-ins/index.html deleted file mode 100644 index d89e8efbdb..0000000000 --- a/files/ja/mdn/tools/add-ons_and_plug-ins/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: MDN に関連するアドオンとプラグイン -slug: MDN/Tools/Add-ons_and_plug-ins -tags: - - Landing - - MDN Meta - - Site-wide - - Tools -translation_of: MDN/Tools/Add-ons_and_plug-ins ---- -
{{MDNSidebar}}

MDN コミュニティのメンバーは多くの楽しく、便利なプロジェクトを立ち上げています。 MDN の利用や、内容への貢献を簡単にする、ツール、アドオン、ユーテリティを作成するものがあります。

- -

こうした数々のプロジェクトのリンクがここにあります。これらの多くは完成まで手助けも要るため、あなたが助けるものを探しているコーダーである場合、ここに機会が見つかるかもしれません!

- -
-
-
MDN doc tests add-on
-
MDNの編集中に表示されるサイドバーを作成する Firefox アドオンで、コンテンツのテストと妥当性チェックを提供します。これは作業途中なので、より多くのテストを歓迎します!
-
MDN automatic translation
-
{{Glossary("Regular_expression", "正規表現")}}ベースのルールを使って、自動的によくある用語を翻訳された形に置き換える。
-
MDN Search
-
URLバーで "mdn <searchterm>" とタイプすることですばやくMDN のリファレンス素材を検索することができる WebExtension。 組み込みのMDN 検索をベースにしているが、より良い結果を出すようにロジックが追加されている。JavaScript と CSS リファレンスを探すのに最適化されている。
-
MDN Interface Documentation Generator
-
この Firefox アドオンは、XPCOM インターフェイス用に、適切にフォーマットされたスケルトン生成に役立ちます。しばらく更新されてないので、バージョン互換性の情報を正しく表示しませんが、いろいろと便利です。いくつか更新されたら、またかけがえないものに戻るでしょう。
-
 
-
Save with comment hotkey addon
-
MDNエディタのリビジョンコメント欄にすぐにスクロールさせる Firefox アドオン。つまりこれによって、あなたが編集したことに対する、小さな情報を簡単に追加できます。
-
Sublime Text MDN search plug-in
-
コーディング中にドキュメントを得るのに、MDNをすぐに検索できる Sublime Text のプラグイン。
-
Lazarus
-
定期的にフォームデータをlocal storageに自動保存する Firefox 拡張機能で、すべてのデータをクラッシュやエラーから保護します。これは MDN で作業する時に便利で、なぜなら MDN エディターのコンテンツも保存し、成果を保存する前に何か失敗した場合に戻すことができるためです。
-
-
diff --git a/files/ja/mdn/tools/document_parameters/index.html b/files/ja/mdn/tools/document_parameters/index.html deleted file mode 100644 index 6198f8ea7b..0000000000 --- a/files/ja/mdn/tools/document_parameters/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: URL 引数と文書メタデータ -slug: MDN/Tools/Document_parameters -tags: - - Documentation - - Kuma - - MDN Meta - - Page-level - - Reference - - Tools -translation_of: MDN/Tools/Document_parameters ---- -
{{MDNSidebar}}
- -
-

MDN の Kuma Wiki プラットホームには、外からアクセスする API がありません。代わりに、人間がアクセスできるリソースを機械的に扱いやすいデータに変換する手段を提供するというのが私たちのアプローチです。

-
- -
-

URL の GET 引数

- -

すべての Kuma wiki 文書の URL が HTTP GET で取得されたりブラウザーで見られる時に役立つクエリ引数オプションをサポートしています。

- -

複数のクエリ引数は最初の ? の代わりに & で区切られます (マクロの例を見てください)。

- -
-
summary
-
-

Kuma にページの概要のみを返すよう指示します。 "SEO summary" クラスでマークされたコンテンツがある場合、そのコンテンツが返されます。そのようなコンテンツがない場合、 "Summary" というタイトルのあるコンテンツが返されます。そうならない場合、最初のブロックのコンテンツが返されます。

- -
バグのお知らせ: 現在、 summary 引数は raw 引数も指定しないと文書全体を返すというバグがあります。なお、 $json 代替ビューを使用して返される JSON から概要を取得することもできます。
-
-
raw
-
Kuma に、ヘッダーやフッターなどのスキン素材のない、ページの生コンテンツを返すよう指示します。これはエディターを手軽に構築するテンプレートやスクリプトを実行しません。
-
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?raw
-
macros
-
Kuma にページ内のすべてのテンプレートを実行するよう指示します。 ?raw と組み合わせると、これはサイトラッパーを除くすべてをレンダリングした MDN コンテンツを提供します。既定では ?raw なしです (つまり、通常のサイト表示です) ?raw がある時は既定でオフです。
-
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?raw&macros
-
nomacros
-
Kuma にページ内の KumaScript テンプレートを実行しないよう指示します。通常のサイト表示では ?macros が既定で「オン」になっていますが、このオプションはオフにします。
-
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?nomacros
-
include
-
Kuma に noinclude クラスを持つブロックを除くように命じます。これは単体のページではなく、他のページに含まれた場合のような出力を得るのに便利です。よくサンプルコードなどを除きます (いつもではありませんが)。
-
例: https://developer.mozilla.org/ja/docs/XUL/Attribute/align?raw&macros&include
-
section=id
-
Kuma に指定したアンカー名を持つセクションのみのコンテンツを返すように指示します。
-
例: - - -
バグのお知らせ: 現在、 section 引数は raw 引数も使用しないと文書全体を返すというバグがあります。
-
-
expand
-
-

$children ビューと連結して、サブページごとの詳細情報つきの JSON レスポンスを展開します。これは各サブページごとの $children と $json の連結のように動作します。この方法は、サブページのタグについて学べます。

- -

例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$children?expand

-
-
-
- -
-

文書のメタデータリソース

- -

文書の URL のレスポンスを微調整するための引数と一緒に、 URL 接尾辞で指定される文書の代替ビューもいくつかあります。

- -
-
$toc
-
Kuma に HTML のページの目次のみを返すよう命じます。順序付きリスト (つまり {{HTMLElement("ol")}}) として返されます。
-
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$toc
-
$json
-
Kuma に JSON オブジェクトでページを記述するよう命じます。このオブジェクトは基本的に、 KumaScript の処理 wiki.getPage() を使用して得られるものと同じです。
-
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$json
-
$children
-
Kuma にページのトピックの子を JSON で列挙するよう命じます。このオブジェクトは基本的に、 KumaScript の処理 pages.subpages() を使用して得られるものと同じです。
-
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$children
-
(これは ?expand 引数と共に使用して、もっと詳細のレスポンスを得ることもできます。)
-
$compare
-
必須のクエリ引数 ?from および ?toで指定されたリビジョン間のソーステキスト行の違いを表示します。
-
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$compare?to=911697&from=911067
-
$edit
-
指定された文書の現在のリビジョンを、表示する代わりに編集します。
-
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$edit
-
$history
-
指定された文書の内容を表示する代わりに、最新の10リビジョンのリビジョン履歴を表示します。履歴全体は、クエリ引数の値に ?limit=all を付けることで要求できます。
-
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$history?limit=all
-
$revision
-
文書の "/" の後に指定された番号のリビジョンを表示します。
-
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$revision/915141
-
-
diff --git a/files/ja/mdn/tools/feeds/index.html b/files/ja/mdn/tools/feeds/index.html deleted file mode 100644 index 6d30d1a342..0000000000 --- a/files/ja/mdn/tools/feeds/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: MDN の Feeds API について -slug: MDN/Tools/Feeds -tags: - - Kuma - - MDN Meta - - Site-wide - - ツール - - リファレンス -translation_of: MDN/Tools/Feeds ---- -
{{MDNSidebar}}

MDN の wiki では、サイトの更新内容を追跡する為にフィード API が提供されています。この API はまだ作成中であるかもしれませんが、この情報は役立つかもしれません。

- -

フィードへのアクセス

- -

フィードは次の様な形式の ベース URL から始まります。

- -
https://developer.mozilla.org/<locale>/docs/feeds/<format>/
- -

ベース URL 内の各プレースホルダーはそれぞれ次の意味を持ちます。

- - - -

json 形式を使用する場合、オプションとして the JSONP convention で JavaScript としてデータを読み込むための ?callback=<callback name> クエリパラメーターが指定可能です。

- -

購読可能フィード

- -
-
all
-
最近の記事の変更すべてを編集日付順で。新規に作成された記事も含む。すべての変更は各記事のフィードのエントリーに結ばれています。例えば: https://developer.mozilla.org/ja/docs/feeds/rss/all
-
revisions
-
特定の記事のリビジョンを編集日付順で。新規作成も含む。各リビジョンはフィードの別々のエントリーを持ちます。例えば: https://developer.mozilla.org/ja/docs/feeds/atom/revisions
-
tag/<tagname>
-
フィードの指定タグの付いた記事の更新情報のみを編集日付順で取得。例えば: https://developer.mozilla.org/ja/docs/feeds/json/tag/CSS?callback=loadFeed
-
files
-
最近のファイルのアップロードまたは変更。例えば: https://developer.mozilla.org/ja/docs/feeds/atom/files
-
l10n-updates
-
翻訳ページの最終更新時以降に翻訳の元となる言語の記事が変更された記事のリスト (つまり、他の言語から翻訳された記事で、元の言語の記事が変更された場合)。例えば: https://developer.mozilla.org/fr/docs/feeds/atom/l10n-updates
-
needs-review[/<reviewtype>]
-
要レビューとされた記事のリスト。technical 、editorial 、kumascript の何れかに絞って取得する事も可能。 - -
-
- -

 

diff --git a/files/ja/mdn/tools/page_deletion/index.html b/files/ja/mdn/tools/page_deletion/index.html deleted file mode 100644 index e6ebdd1910..0000000000 --- a/files/ja/mdn/tools/page_deletion/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: ページの削除 -slug: MDN/Tools/Page_deletion -tags: - - Guide - - MDN - - MDN Project - - Page-level -translation_of: MDN/Tools/Page_deletion ---- -
{{MDNSidebar}}
- -

MDN からページを完全に削除することは滅多にありません。もっともよくある理由は、ページがスパムによって作成された、または間違って作成された場合です。かつては有用であったページが時代遅れの技術の記述となった場合には、削除するのではなく MDN の /Archive セクションに移動することでアーカイブされます。

- -

ページの削除の申請

- -

MDN の管理者だけがページを削除することができます。管理者以外のユーザーは、ページの削除をリクエストすることができます。

- -

ページを削除するには次のようにしてください。

- -
    -
  1. ページコンテンツの削除や変更はしないでください。ページ削除時にはその時点のコンテンツを記録しておきます。
    2. -
  2. ページに "Junk" タグを追加してください。他のタグは削除しないでください。
    3. -
  3. ページの削除に緊急を要する場合 (例えばコンテンツが不適切、攻撃的、あるいは技術的に危険なものである場合など) は、 MDN 管理者にお知らせください。
    4. -
- -

管理者は削除が適切かどうか判断した上で、随時ページを削除していきます。

- -

ページを削除するには

- -

ページを削除すると決めた管理者は、以下のようにしてください。

- -
    -
  1. 削除したいページの右上隅付近にある詳細メニューを開いてください。
    2. -
  2. このページを削除をクリックしてください。「ページの削除」画面が次のように現れます。
    -
    - 削除しようと選択したページのタイトルと、関連する一部のメタデータが表示されます。
    3. -
  3. 理由欄に "Spam" や "Junk" や "Created by mistake" など、適切な理由を入力してください。
    4. -
  4. 削除ボタンをクリックしてください。「文書が削除されました」画面が表示され、このページへのリンクがあれば表示されます。 (権限のないユーザーには、この文書を復元ボタンが表示されません。)
    5. -
- -

アクセス制限

- -

ページ削除ツールには文書の構造を破壊する可能性が存在するため、アクセスには上位の権限を必要とします。

- -

この権限を持つロール

- - - -

この権限を得るための条件

- -

このツールにアクセスする権限を得るための条件は以下のとおりです。

- - - -

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/mdn/tools/page_moving/index.html b/files/ja/mdn/tools/page_moving/index.html deleted file mode 100644 index 920c6f299c..0000000000 --- a/files/ja/mdn/tools/page_moving/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: ページの移動 -slug: MDN/Tools/Page_moving -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_moving ---- -
{{MDNSidebar}}
- -

なぜページ (またはページのツリー) を移動するのでしょう。サイトの階層の適切な場所ではなく、サイトの最上位に作成してしまったのかもしれません。あるいは既存の文書を整頓しているのかもしれませんね。古い内容をアーカイブする必要があるのかもしれません。このような理由で MDN はページを移動する機能を持っており、1つのページを移動するだけではなく、その下位のページをまとめて移動することもできます。

- -

ページ移動ツールにより、編集者は MDN ツリー内の文書およびそのすべてのサブページの URL またはスラッグを変更することができます。ページを整頓したり、間違った位置にあるページを修正したりするときに、とても手軽で強力なツールです。

- -
-

メモ: 特別な権限を持つユーザーだけが MDN でページを移動することができます。この記事を移動という選択肢が詳細 メニューに表示されない場合、使用するのに権限が必要です。この権限を得る方法については、下にあるアクセス制限 を見てください。

-
- -

ページを移動するには

- -

ページまたはページのツリーを移動するには、以下のようにします。

- -
    -
  1. MDN で移動したいページの右上の角にある詳細 メニューを開いてください。
    -
    2. -
  2. この記事を移動 をクリックしてください。下のような「ページの移動」画面が表示されます。
    -
    - 一番上には、すべて (アルファベットが) 大文字で、移動しようとしているページのタイトルが表示され、続いてページを移動するためのフォームを正しく記入する方法についての注意書きの一覧が表示されます。ページタイトルは編集可能となっていますが、ここで変更しても反映されません。この問題の状態については、 {{bug(828533)}} を参照してください。
    3. -
  3. 新しい URL スラグの隣の枠に、ページの移動先としたいスラグを入力してください。この行の上にあるのは URL のプレビューで、ここに、新しい URL スラグの値を反映した、ページ移動後のフルパスの URL が表示されます。
    4. -
  4. この移動操作によって影響を受ける全てのサブページの一覧が表示されます。N ページを移動ボタンとキャンセルボタンの下にあります。サブページがなければ、その旨が表示されます。この一覧は、ページの移動が予測しなかった副作用を与えるのか判断するのに役立つかもしれません。閲覧の多いコンテンツの移動や、一度に大量のページを移動するのには注意を払ってください。
    5. -
  5. すべてが望み通り設定されていると分かったら、 N ページを移動するボタンをクリックします。非同期のバックグラウンドプロセスが始まり、各ページを移動してかつ元のページにリダイレクトを設置します。ですので、古い URL もリダイレクトによって動作し続けます。移動のプロセスが完了したらメールが届きます。そのメールには、ページの新しい場所にクリックして移動できるリンクが含まれています。
    6. -
- -

アクセス制限

- -

内容をおかしな場所に移動することで害となる明らかな可能性が存在するため、このツールは誰もが使えるようにはなっていません。

- -

この権限を持つロール

- - - -

この権限を得るための条件

- -

このツールにアクセスする権限を得るための条件は以下のとおりです。

- - - -

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/mdn/tools/page_regeneration/index.html b/files/ja/mdn/tools/page_regeneration/index.html deleted file mode 100644 index 590eda0260..0000000000 --- a/files/ja/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: MDN 上のページのレンダリング -slug: MDN/Tools/Page_regeneration -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_regeneration ---- -
{{MDNSidebar}}
- -

MDN サイトは性能上の理由でページをキャッシュしています。 この結果、ページに対する保存済みの変更が、次回リロード時に反映されない場合があります。常にではないがしばしば、ページがの更新が処理中であることを示すバナーが表示されます。ブラウザーで強制リフレッシュしてサーバーからページをリロードできますが、サーバー上の更新が完了しないと効果がないことがあります。

- -

いくつかのページ (特に Landing ページ【訳注: 階層下のページの一覧を列挙するページ】) では、マクロを使って自動的に内容の生成と更新を行っています。Landing ページのためにこれを行うことで、作者が手動で更新しなくても、新しい記事が自動的にページに載ることが保証されます。これは長期間の貢献者には便利であり、新参者にはサイトの階層のどこにリンクすべきか分からずに成果を見失うことを避けるのに役立ちます。

- -

またあるページを別のページにトランスクルージョンする(例えば {{TemplateLink("Page")}} マクロを使って)のにも使います。

- -

MDN は性能上の理由でレンダリングしたコンテンツをキャッシュしているため、元の素材（たとえばマクロの出力や引用されるページ）に加わった変更は自動的にはページに反映されません。そのような元の素材に頻繁に変更が加わることがわかっているならば、ページの自動生成を有効にすることを検討したくなるかもしれません。

- -

自動生成を有効にするには: 【訳注: この機能は現在、英語版のページでのみ設定できます】

- -
    -
  1. EDIT ボタンをクリックし、編集モードに入ります。
    2. -
  2. ページタイトルの下にある  Edit page title and properties をクリックします。ページのメタデータフィールドが現れます。
    3. -
  3. Rendering max age に値を設定します。この値が、キャッシュされたページが(マクロの再実行も含めて)再生成されるスケジュールを決定します。普通は 4 または 8 Hours を指定します。 文書が頻繁に変更される技術に関しては、より少ない数値を指定しても良いでしょう。
    4. -
  4. 変更を保存します。リビジョンコメントに、設定内容を記録しておくのは良い習慣です。例: "Rendering max age を 4 Hours に設定"
    5. -
- -

ページは指定したスケジュールに従って再生成されます。

- -
-

注: "Edit page title and properties" オプションは、文書の作成時には現れませんので、一度保存してから開き直す必要があります。

-
diff --git a/files/ja/mdn/tools/page_watching/index.html b/files/ja/mdn/tools/page_watching/index.html deleted file mode 100644 index fe7b3a7f45..0000000000 --- a/files/ja/mdn/tools/page_watching/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: ページやページ群を監視・購読する -slug: MDN/Tools/Page_watching -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_watching ---- -
{{MDNSidebar}}
- -

MDN ページを購読することで、そのページが更新・変更された時はいつでもメールで通知を受け取ることができます。すべての MDN ページの右上の隅に、監視ボタンがあります。購読のオプションにアクセスするには、監視ボタンの上にポインターを動かして監視メニューを開くいてください。

- -

MDN の監視メニューのスクリーンショット

- -

そのページだけを購読するか、サブページも一緒に購読するかをオプションで選択してください。

- -

ページを購読する

- -

ユーザーがそのページを編集するたびにメール通知を受け取るには、ページの上部にある詳細メニューの最初のオプション「この記事を購読」をクリックします。

- -

ページとすべてのサブページを購読する

- -

2つ目のオプション「この記事と全サブ記事を購読」をクリックすると、ユーザーがそのページとすべてのサブページを編集するたびにメール通知を受け取るようになります。これは購読を要求した後に追加されたサブページも含むため、将来多くのサブページが作られた場合、その通知も同様に受け取ります。

- -

ページの購読解除

- -

購読を解除してページの監視をやめる場合は、再び監視メニューを開いて「この記事の購読を中止」をクリックしてください。ページを購読していると「この記事の購読を中止」とだけ表示されています。ページが変更されるたびにメール通知を受けることはなくなります。

- -

ページ変更のメール

- -

ページを購読すると、ページが保存されるたびにメールを受け取ります。このメールは notifications@developer.mozilla.org から MDN アカウントに登録されたメールアドレスに送信されます。各メッセージにはこの形のタイトルがあります:

- -
[MDN] ページ "ページタイトル" が ユーザー名 によって変更されました
- -

メッセージはタイトル情報の繰り返しで始まり、つぎにコンテンツの標準差分を表示して、正確に何が変更されたかを示します。変更は HTML ソースコードで表示され、 MDN のコンテンツに慣れていない場合少し読みにくいかもしれません。

- -

差分の下には、変更に対応するのに役立つ、次のようなリンクの一覧があります:

- - - -

メールの最後には、"HTML element reference とその全サブ記事に対する編集の購読を開始しました" といった、どんな購読でメールが生成されたかの通知や、購読をやめるためのリンクがあります。購読をやめるリンクをクリックすると、その監視リクエストのメッセージを受け取らなくなります。

diff --git a/files/ja/mdn/tools/put_api/index.html b/files/ja/mdn/tools/put_api/index.html deleted file mode 100644 index 6e05522016..0000000000 --- a/files/ja/mdn/tools/put_api/index.html +++ /dev/null @@ -1,208 +0,0 @@ ---- -title: PUT API -slug: MDN/Tools/PUT_API -tags: - - Advanced - - Automation - - Documentation - - Draft - - Guide - - MDN Meta - - PUT API - - Page-level - - Tools -translation_of: MDN/Tools/PUT_API ---- -
{{MDNSidebar}}
- -
 {{draft}}
- -

MDN Wiki はページの全体、または一部の更新のための実験的な HTTP PUT API を提供しています。この機能は、次のような時に便利です:

- - - -

アプリケーションをテストする

- -

MDN を実行するソフトウェアを開発する中で、次のようにいろいろなステージ上のサイトインスタンスをホストしています:

- - - -

プロダクションサイトを無駄にしないようにするには、まずステージングに対してアプリケーションを開発する必要があります。それから、あなたが望むことを合理的に実行することができたら、それをプロダクションに反映するように再構成します。また、開発に取り組むこともできますが、問題が発生する可能性があります。

- -

API キーを作成する

- -

APIキーを使うと、毎回 Persona ログインするような介入を要求せずに、アプリケーションを代理人として動作させることができます。SSL 上の HTTP ベーシック認証を使ってユーザー名とパスワードを提供します。基本的な使用のトラッキングを集めて、どのように使われているかがわかるようにします。そして、たまたま持つべきでない人々に渡った場合は、アクセスを無効にするよう API キーを削除できます。

- -

If you have the correct privileges to do so, to create an API key, sign into MDN and visit the API keys management page. This page lets you create and delete API keys, as well as inspect recent usage history.  Only Mozillians in good standing can currently get API keys, since they grant abilities to automate changes to content rapidly, so unprivileged users must request the ability by filing a bug.

- -

{{NoteStart}}The above link goes to the Production site, and the same keys do not work between Production and Staging. You can also get to this page by visiting your profile on the respective site: Click on your username in the upper right of the site. On your profile page, you should see a "Manage API Keys" button.{{NoteEnd}}

- -

From there, clicking on the "Create a new API key" button should take you to an entry form so you can submit a request for an API key.

- -

After filling out and submitting the form, you will receive a key ID and secret. These are your username and password, respectively. Copy these down somewhere safe (eg. to your application's configuration settings); the site will never display them again, and there is no recovery method. If you lose them, simply delete the API key and create another.

- -

PUT リクエストを作成する

- -

Since the PUT API works by way of HTTP, it should be compatible with the application environment and libraries of your choice. This first example uses the command-line tool cURL and a UNIX shell to demonstrate how to issue a simple PUT request to MDN.

- -

リクエスト

- -
# Base URL and API key from staging (example only; substitute your own)
-MDN_BASE_URL="https://developer.allizom.org"
-MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI"
-MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs"
-
-# Document-specific details
-DOC_USERNAME="lmorchard"  # Change this to your name
-DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample"
-DOC_TYPE="text/html"
-DOC_DATA="<b>HELLO WORLD</b>"
-
-# Putting it all together...
-curl -si -X PUT -H"Content-Type: $DOC_TYPE" -d"$DOC_DATA" -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH"
- -

Since there's a lot going on in this cURL invocation, the example is broken into variables:

- - - -

So, along with the variables, here are some general notes on the example and its use of the PUT API:

- - - -

レスポンス

- -

There are several responses you may see if you try this example: 403, 404, 201, or 205. (You may see others, but those suggest something has gone wrong with the site. That will, hopefully, be rare.)

- -

403 Forbidden

- -

If either the key ID or secret are incorrect, you'll see a 403 Forbidden response. Double check your key details and that you're using the right pair for the right server. Create a new API key, if necessary.

- -

404 Not Found

- -

If you've never created a document at the URL path /en-US/docs/User:$MDN_USERNAME, you'll see a 404 Not Found response.

- -

{{NoteStart}}The PUT API will not automatically create parent documents. If you're creating a number of documents intended to comprise a subsection of MDN, make sure to create parent documents first from the top down in the hierarchy.{{NoteEnd}}

- -

201 Created

- -

If the parent document exists, but the path itself doesn't, you should see a 201 Created response. This signifies that a new document was created, as opposed to an existing one having been updated.

- -

205 Reset Content

- -

In the case of an updated document, you'll see a 205 Reset Content response. This means that the document content has been updated, and that you should reload the document if you happen to need to see the results.

- -

{{NoteStart}}MDN performs certain filtering and processing steps on content, so what you put in may not be exactly what gets served back.{{NoteEnd}}

- -

サポートされるコンテンツのタイプ

- -

The PUT API accepts one of several content types in the request body.

- -

text/html

- -

There are actually two forms of text/html accepted: fragment and document.

- -

Fragment

- -

An HTML fragment is just an arbitrary chunk of markup, and is used as-is to revise document content. This is the simplest way to update documents.

- -

Document

- -

However, if the request body consists of an <html> element containing <head> and <body> elements, it's treated as a full HTML document. In this case, the following processing happens:

- - - -

This is a more complex way to update documents, but is intended as a convenience to accomodate submission of existing HTML pages.

- -

application/json

- -

Although the text/html content type is handy, there are more fields belonging to documents that are useful to manage. These include the following:

- - - -

These fields can be supplied as string values in a JSON-encoded object with the application/json content-type in a PUT request.

- -
# Auth Stuff
-DOC_USERNAME="lmorchard"  # Change this to your name
-MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI"
-MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs"
-
-# Base Settings (for Staging Env)
-MDN_BASE_URL="https://developer.allizom.org"
-DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample"
-DOC_TYPE="application/json"
-
-# Doc Content
-echo '{"content": "<b>Hello World</b>", "title": "New Sample Title", "show_toc": 1, "tags": "Beginner, Tutorial", "review_tags": "editorial, technical", "summary": "Sample JSON update from the API"}' > /tmp/mdn.json
-
-# Submitting Content
-curl -X PUT -H "Content-Type: $DOC_TYPE" -d @/tmp/mdn.json -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH"
-
- -

multipart/form-data

- -

This content type is handled basically like application/json - the same fields are accepted. But, it might be less useful than JSON and is supported mainly for testing purposes.

- -

1 つのセクションを更新する

- -

Normally, an HTTP PUT request replaces the entirety of a document with the submitted content in a new revision. However, you can use the query parameter ?section to constrain revision to a single section of the document and leave the rest of the content as-is. This is handy for automating changes to one part of a document that is otherwise managed by hand, or even for aggregating changes from many sources or scripts into one document.

- -

文書のセクションを作成する

- -

Documents on MDN can be broken up into sections. These sections are useful for building a table of contents, linking to specific parts, and editing subsets of document content.

- -

Using headers

- -

Headers (ie. <h2> .. <h6>) make sections in MDN documents. The text of each header is transformed automatically into an ID, and that's used for anchor links in the table of contents sidebar on most documents. Those auto-generated IDs can be overriden with the name attribute on headers. Either way, looking at the table of contents is the easiest way to see how a document is broken up into sections, and to discover the IDs for those sections.

- -

The contents of a section include its header and everything following the header up to (but not including) another header of the same or higher level. So, a section that starts with an <h2> continues until the next <h2>, including any subsections started by <h3> .. <h6>. That also means sections can be nested: An <h3> appearing after an <h2> creates a subsection, including any further nested subsections started by <h4> .. <h6>, up to the next <h3> or <h2>.

- -

@@TODO: Show an HTML example with headers, here. This is a bit confusing.

- -

Using container elements

- -

Setting an id attribute on a container element (eg. a <div> or <span> or <section>) in the source editor also creates a section, at least with respect to the PUT API. This is a bit more advanced and requires manual changes to raw HTML, rather than using the WYSIWYG editor. But, if you want to update a chunk of the page without the need for headers, this is how to do it.

- -

セクションを指定する

- - diff --git a/files/ja/mdn/tools/revision_dashboard/index.html b/files/ja/mdn/tools/revision_dashboard/index.html deleted file mode 100644 index 10c96bfa07..0000000000 --- a/files/ja/mdn/tools/revision_dashboard/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: リビジョンダッシュボード -slug: MDN/Tools/Revision_dashboard -tags: - - Guide - - MDN Meta - - Site-wide - - Tools -translation_of: MDN/Tools/Revision_dashboard ---- -
{{MDNSidebar}}
- -

リビジョンダッシュボード は MDN Web Docs Wiki の機能で MDN での最近の更新と追加を見たり、何が変更されたのか詳細を確認したり、それらの更新に対して様々な方法で行動することができます。 この記事では、リビジョンダッシュボードの使い方を説明します。

- -

外観

- -

リビジョンダッシュボードのインターフェイスは多くの要素を持ち、便利な機能が満載です。まずはインターフェイスの主要な部分の概観から始めましょう。

- -

Annotated screenshot of main revision dashboard view

- -

ここで注意すべき最も大事なことは履歴のリストで、ここでフィルターにマッチする履歴や、履歴の差分 (クリックした履歴で変更された内容が見られます) を一通り見ることができます。

- -

リビジョン一覧

- -

リビジョンダッシュボードウィンドウの中ほどにあるリビジョン一覧は、最近なされた変更を提供します。この一覧は、最近変更された記事が最初に来るように順序付けられていて、先に進むともっと古い履歴になります。

- -

リビジョン一覧のすぐ下にあるのは、検索クエリーにマッチしたページがどれくらいあり、そのうちのどこを見ているのかを示すインジゲーターです。何もフィルターをかけていない場合、MDN wiki になされたすべての履歴のページ数が見えます。

- -

一覧の各行は wiki への 1 つの変更に対応しています。"変更" とは次のいずれかからなっています:

- - - -

各行は 4 つの列からなります: リビジョン、タイトル、コメント、著者です。

- -

リビジョン列

- -

リビジョン列はなされた変更の情報が与えられます。この列ではいくつかの情報が提供されます:

- -
-
タイムスタンプ
-
リビジョンが保存された正確な日付と時間。これはリビジョン詳細ページへのリンクで、そこではリビジョンのメタデータとコンテンツが表示されます。
-
ロケール
-
記事のロケールが列のタグとして示されます。これは言語の省略コードで表示され、例えば英語では "en-US" です。
-
ファイル変更インジゲーター
-
これまで存在しない新しい記事には new のタグが表示されます。ページが削除されたことを示す場合は、deleted タグが出てきます。ページが 1 回の改訂だけで削除された場合、new と deleted タグの両方が表示されることもありえます。
-
-

タイトル列

-
-
- -
-
記事のタイトル
-
記事のタイトルは、ページにセットされているため、列に表示されます。タイトルは、直接移動して素早く簡単に見られるような、wiki 記事へのリンクでもあります。
-
記事のパス
-
記事のタイトルの下に、記事のパスが表示されます。これは記事の URL の一部分で、http://developer.mozilla.org/<locale>/docs/ の後に来るものです。
-
-

コメント列

-
-
- -
-
リビジョンコメント
-
変更の著者がリビジョンコメントを変更の保存時に追加していた場合、そこにあります。これは小さめのイタリックなテキストで表示されます。
-
移動の情報
-
リビジョンがページの移動を表す場合、wiki 上の移動元と行き先のパスが表示されます。
-
-

著者列

-
-
- -

著者の列はそのリビジョンを保存した人のユーザー名が表示されます。それをクリックしてユーザーのプロフィールページをすぐに見ることができます。

- -
-

管理者のみ: 管理者権限を持つ MDN ユーザーは著者列の見出しに Toggle IPs ボタンもあります。これをクリックするとそれぞれの著者の IP アドレスが表示され、不正なユーザーを IP アドレスによって禁止することができます。ユーザーが禁止されたら、ユーザー名の下に印が出ますが、これは管理者のみに見えます。

-
- -

フィルター

- -

MDN はいくつかの便利なフィルターオプションを提供しており、あなたのニーズに応じてリビジョンの「物」の量を削減できます。フィルターを調整して、絞り込み ボタンを押して適用します。しばらくすると、ディスプレイはフィルター結果を更新します。いくつかのフィルターを利用できます:

- -
-
ロケール
-
You may filter so that you only see changes in a specific locale. 既定では, you see changes across all locales, but this may not be useful to you. Indeed, if you're a member of a localization team, 例えば、the only locales you're likely to care about are your own and English. You can specify the locale to filter by in the URL when going to the revision dashboard by adding "locale=<localename>" to the query string. 例えば、: https://developer.mozilla.org/ja/dashboards/revisions?locale=en-US filters to show only changes to English documents.
-
ユーザー
-
Interested in what a specific user has been up to? You can look at the revisions submitted by a single user by entering it in this field. You can specify a user in the URL when going to the revision dashboard by adding "user=<username>" to the query string. 例えば、you can see changes by the user Sheppy with https://developer.mozilla.org/ja/dashboards/revisions?user=Sheppy. This box will offer suggestions as you type, to help you find exactly the person you're looking for.
-
トピック
-
If you'd like to see changes only about a given topic area, you can specify a topic string. This will be matched against the URLs of articles that have been changed and show only those whose titles include this string. You can specify the parameter "topic=<topic>" in the URL's query string to filter on this, as well. 例えば、if you'd like to see only JavaScript-related changes: https://developer.mozilla.org/ja/dashboards/revisions?topic=JavaScript.
-
開始日と終了日
-
You can specify that you want to see only revisions in a certain range of dates, or with a certain starting or ending date. The dashboard UI provides date selection widgets for these fields. You can specify these parameters in the URL's query string, but you must use your system locale's version of the date string. 例えば、: https://developer.mozilla.org/ja/dashboards/revisions?start_date=09%2F01%2F2015 for revisions starting with September 2, 2015 in the en-US locale.
-
先行期間
-
Rather than typing or selecting start or end dates, you can specify that you want to see revisions from a selected period prior to the present time, such as the last hour, day, week, or 30 days.
-
- -

フィルターを組み合わせて使うのにも注目すぺきで、ユーザーインターフェイスや URL のクエリーストリングの両方でそれは言えます。かなり複雑な検索も実効できます。例えば、ユーザー{{UserLink("evilpie")}} が書いた英語の JavaScript 記事を見つけるには、このようにします https://developer.mozilla.org/ja/dashboards/revisions?locale=en-US&user=evilpie&topic=JavaScript.

- - - -

更新の差分

- -

ページのあるリビジョンと前のリビジョンの違いを表示する「差分」を見ることができます。あるリビジョンの差分を見るには、リンクではない行のいずれかをクリックします (つまり、タイムスタンプ、記事のタイトル、著者のユーザー名以外)。この行はリビジョンの差分とリビジョンコントロールを説明します。

- -

Annotated screenshot of revision dashboard view

- -

リビジョンコントロールは次の記事操作を許可します:

- - diff --git a/files/ja/mdn/tools/template_editing/index.html b/files/ja/mdn/tools/template_editing/index.html deleted file mode 100644 index d32794f82e..0000000000 --- a/files/ja/mdn/tools/template_editing/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: テンプレートの編集 -slug: MDN/Tools/Template_editing -tags: - - Page-level -translation_of: MDN/Tools/Template_editing ---- -
{{MDNSidebar}}

MDNでは、 KumaScript で書かれたテンプレートがコンテンツの自動生成、およびページのカスタマイズに使われています。 それぞれのテンプレートは、別々の Wiki ページに置かれていて、ページ名は以下のとおりです:
- /en-US/docs/Template:テンプレートの名前

- -

MDN の Wikiを編集している人なら誰でも、マクロを通じてテンプレートを呼び出すことができます。KumaScript は強力なので、テンプレートの作成と編集のための権限は、必要な経験を持ち合わせた信頼できるユーザーのみに与えられています。

- -

この権限を持つ役割の人

- - - -

この権限を得るための条件

- -

このツールにアクセスする権限を得るための条件は以下のとおりです:

- - - -

この権限を得るためのプロセスについては、上位権限のリクエスト を見てください。

- -

テンプレート編集の権限を持っている人（peer）たち

- - diff --git a/files/ja/mdn/tools/unsupported_get_api/index.html b/files/ja/mdn/tools/unsupported_get_api/index.html new file mode 100644 index 0000000000..6198f8ea7b --- /dev/null +++ b/files/ja/mdn/tools/unsupported_get_api/index.html @@ -0,0 +1,95 @@ +--- +title: URL 引数と文書メタデータ +slug: MDN/Tools/Document_parameters +tags: + - Documentation + - Kuma + - MDN Meta + - Page-level + - Reference + - Tools +translation_of: MDN/Tools/Document_parameters +--- +
{{MDNSidebar}}
+ +
+

MDN の Kuma Wiki プラットホームには、外からアクセスする API がありません。代わりに、人間がアクセスできるリソースを機械的に扱いやすいデータに変換する手段を提供するというのが私たちのアプローチです。

+
+ +
+

URL の GET 引数

+ +

すべての Kuma wiki 文書の URL が HTTP GET で取得されたりブラウザーで見られる時に役立つクエリ引数オプションをサポートしています。

+ +

複数のクエリ引数は最初の ? の代わりに & で区切られます (マクロの例を見てください)。

+ +
+
summary
+
+

Kuma にページの概要のみを返すよう指示します。 "SEO summary" クラスでマークされたコンテンツがある場合、そのコンテンツが返されます。そのようなコンテンツがない場合、 "Summary" というタイトルのあるコンテンツが返されます。そうならない場合、最初のブロックのコンテンツが返されます。

+ +
バグのお知らせ: 現在、 summary 引数は raw 引数も指定しないと文書全体を返すというバグがあります。なお、 $json 代替ビューを使用して返される JSON から概要を取得することもできます。
+
+
raw
+
Kuma に、ヘッダーやフッターなどのスキン素材のない、ページの生コンテンツを返すよう指示します。これはエディターを手軽に構築するテンプレートやスクリプトを実行しません。
+
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?raw
+
macros
+
Kuma にページ内のすべてのテンプレートを実行するよう指示します。 ?raw と組み合わせると、これはサイトラッパーを除くすべてをレンダリングした MDN コンテンツを提供します。既定では ?raw なしです (つまり、通常のサイト表示です) ?raw がある時は既定でオフです。
+
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?raw&macros
+
nomacros
+
Kuma にページ内の KumaScript テンプレートを実行しないよう指示します。通常のサイト表示では ?macros が既定で「オン」になっていますが、このオプションはオフにします。
+
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5?nomacros
+
include
+
Kuma に noinclude クラスを持つブロックを除くように命じます。これは単体のページではなく、他のページに含まれた場合のような出力を得るのに便利です。よくサンプルコードなどを除きます (いつもではありませんが)。
+
例: https://developer.mozilla.org/ja/docs/XUL/Attribute/align?raw&macros&include
+
section=id
+
Kuma に指定したアンカー名を持つセクションのみのコンテンツを返すように指示します。
+
例: + + +
バグのお知らせ: 現在、 section 引数は raw 引数も使用しないと文書全体を返すというバグがあります。
+
+
expand
+
+

$children ビューと連結して、サブページごとの詳細情報つきの JSON レスポンスを展開します。これは各サブページごとの $children と $json の連結のように動作します。この方法は、サブページのタグについて学べます。

+ +

例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$children?expand

+
+
+
+ +
+

文書のメタデータリソース

+ +

文書の URL のレスポンスを微調整するための引数と一緒に、 URL 接尾辞で指定される文書の代替ビューもいくつかあります。

+ +
+
$toc
+
Kuma に HTML のページの目次のみを返すよう命じます。順序付きリスト (つまり {{HTMLElement("ol")}}) として返されます。
+
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$toc
+
$json
+
Kuma に JSON オブジェクトでページを記述するよう命じます。このオブジェクトは基本的に、 KumaScript の処理 wiki.getPage() を使用して得られるものと同じです。
+
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$json
+
$children
+
Kuma にページのトピックの子を JSON で列挙するよう命じます。このオブジェクトは基本的に、 KumaScript の処理 pages.subpages() を使用して得られるものと同じです。
+
例: https://developer.mozilla.org/ja/docs/Web/Guide/HTML/HTML5$children
+
(これは ?expand 引数と共に使用して、もっと詳細のレスポンスを得ることもできます。)
+
$compare
+
必須のクエリ引数 ?from および ?toで指定されたリビジョン間のソーステキスト行の違いを表示します。
+
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$compare?to=911697&from=911067
+
$edit
+
指定された文書の現在のリビジョンを、表示する代わりに編集します。
+
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$edit
+
$history
+
指定された文書の内容を表示する代わりに、最新の10リビジョンのリビジョン履歴を表示します。履歴全体は、クエリ引数の値に ?limit=all を付けることで要求できます。
+
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$history?limit=all
+
$revision
+
文書の "/" の後に指定された番号のリビジョンを表示します。
+
例: https://developer.mozilla.org/ja/docs/MDN/Contribute/Tools/Document_parameters$revision/915141
+
+
diff --git a/files/ja/mdn/troubleshooting/index.html b/files/ja/mdn/troubleshooting/index.html deleted file mode 100644 index 48b431b4b6..0000000000 --- a/files/ja/mdn/troubleshooting/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: トラブルシューティング -slug: MDN/Troubleshooting -tags: - - Documentation - - MDN - - Writing Documentation - - troubleshooting -translation_of: MDN/Troubleshooting ---- -
{{MDNSidebar}}
- -

この記事では、 MDN を利用して起こる問題と、その対処法を記します。

- -

私の古いアカウントでログインできない

- -
-
現象
-
数年前に MDN アカウントを持っていたが、今は唯一のログイン方法が GitHub なのでログインできない。あるいは GitHub でプロファイルを作成済みだが、古いアカウントに接続できない。
-
原因
-
GitHub認証 以外のログイン方法 のサポートは2016年11月1日以来削除されました。MDNプロファイルとGitHubアカウントをそれ以前にリンクさせてない場合、古いアカウントではログインできません。
-
対処法
-
Bugzillaで "Account Help" bug を提出します。古いアカウントについての情報(パスワード以外!)を提供して、新アカウントがあればそれも書きます。MDN エンジニアが反応して手助けします。
-
- -

ページを保存できない

- -
-
現象
-
あなたが変更したものを保存しようとして、変更が保存できないというメッセージを受けている。
-
原因
-
変更が MDN のスパムトラップに捕捉されています。我々の知る限り、これはときどき間違えます。
-
対処法
-
エラーメッセージに指示されいてるように、リビジョンのコピーを保存して、MDN サイト管理者 にメール送信します。管理者の1人が実際に正当な変更であることを検証して、あなたの変更と同様なものをブロックしないようにスパムフィルターを訓練して、今後はこの問題に会わないように、あなたをホワイトリストに追加します。
-
- -

公開した変更がページに出てこない

- -
-
現象
-
記事にいくらかの変更をして 公開 をクリックする。たった今行った変更が通常のページの見た目に反映されない。
-
原因
-
ページコンテンツがサーバーにキャッシュされていて、ページが変更されて以来リフレッシュされていません。
-
対処法
-
ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新されたコンテンツが見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。
-
- -

マクロで生成したコンテンツが古い

- -
-
現象
-
マクロで生成されるコンテンツを含むページを見ている。このマクロが更新されて製品に置かれているのが分かっているが、ページは古い値を表示している。
-
原因
-
マクロの出力がキャッシュされていて、マクロが更新されて以来リフレッシュされていません。このとき、マクロコードへの変更は、そのマクロを使うページに対して自動更新が強制されません。
-
対処法
-
ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新された出力が見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。
-
- -

ページのスクリプトエラー

- -
-
現象
-
ページ上にこんな恐ろしい赤いボックスが見える:
- There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below. More information about this error
-
原因
-
ページ内のマクロでの KumaScript エラーが原因です。マクロが GitHub に保存されて、製品に移される前にレビューやテストを通るようになった今は、この問題は製品ではさほど起こりません。自分自身でマクロを編集したり、マクロを破たんさせる引数と共にマクロを呼び出したりしたら見られる時もあります。ローカルでMDNプラットホームをビルドした場合でも見られるかもしれません。
-
対処法
-
マクロ呼び出しを変更した場合、マクロの引数名を KumaScript GitHub repo と見比べます。疑問のマクロを修正途中の場合、KumaScript エラーのトラブルシューティング が役立つかもしれません。
-
- -

ページプレビュー時のスクリプトエラー

- -
-
現象
-
ページを編集していて、プレビューボタンをクリックする。ページのプレビュー内に(前の節に載っている)スクリプトエラーがある。
-
原因
-
編集しているページ内に既存のスクリプトエラーがあるか、あるいはあなたがマクロの引数を変えたりすることでエラーを導入した。
-
対処法
-
-

あなたがページ内のマクロやテンプレートを修正していないのが本当に確実なとき、このエラーを無視できます。編集したページが最終的に保存されて再度通常表示されたときにエラーが消えるのが期待できます (通常表示でエラーがない限り)。

- -

あなたがエラーを導入したかどうかわからない場合、新しいウィンドウで同じページのコピーを開きます (そのページの最後に保存された版が出てきます)。編集モードに入り、すぐにプレビュー をクリックします。ここでエラーが起こった場合は、自信をもってあなたは原因ではないですし、その前に記述されたものでは消えている可能性が高いでしょう。

- -

あなたの変更について、古いウィンドウからの古いエラーと同じく新しいエラーが出ている場合、新しいウィンドウを閉じて古いウィンドウで作業を続けます。しかしながら、これらが別のエラーの場合、古いウィンドウで本当に何か壊したのかもそれませんので、注意して新しいウィンドウに変更をコピーして、そのたびにプレビュー をクリックします。古いエラーがすぐにここにも出る場合、あなたが最後に行った変更がエラーを起こした可能性が高く、その成果をよく調べるべきでしょう。最終的に、副作用として、プレビューを何度もクリックして常にプレビューウィンドウを残している場合、エディターが失敗したり成果が失われる(破棄するときに起こりかねない)場合にも、素早くて未保存のままの大半の変更のコピーが残るでしょう。

-
-
diff --git a/files/ja/mdn/yari/index.html b/files/ja/mdn/yari/index.html new file mode 100644 index 0000000000..af90402f86 --- /dev/null +++ b/files/ja/mdn/yari/index.html @@ -0,0 +1,25 @@ +--- +title: 'Kuma: MDN の wiki プラットフォーム' +slug: MDN/Kuma +tags: + - Kuma + - Landing + - MDN + - MDN Meta +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

Kuma は MDN Web Docs を強力にする Django コードです。

+ +

{{SubpagesWithSummaries}}

+ +

Kuma に参加する

+ +

Kuma に参加するには:

+ + diff --git a/files/ja/mdn_at_ten/contributing_to_mdn/index.html b/files/ja/mdn_at_ten/contributing_to_mdn/index.html deleted file mode 100644 index 96d5ef691e..0000000000 --- a/files/ja/mdn_at_ten/contributing_to_mdn/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -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/mdn_at_ten/history_of_mdn/index.html b/files/ja/mdn_at_ten/history_of_mdn/index.html deleted file mode 100644 index fd293fe4b3..0000000000 --- a/files/ja/mdn_at_ten/history_of_mdn/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: MDN の歴史 -slug: MDN_at_ten/History_of_MDN -tags: - - History - - MDN Meta -translation_of: MDN_at_ten/History_of_MDN ---- -
-

このトピックでは、MDN プロジェクトへの貢献者たちが、developer.mozilla.org の過去 10 年間と、来たる 10 年間を見ていきます。異なる Wiki ソフトウェア間の移行やドキュメンテーションコミュニティーがどうやって育ってきたのか、またいくつかのこのサイトの歴史におけるハイライトについて取り上げます。また現在の課題や今年の MDN コミュニティーの取り組みについても語ります。

- -
- -{{ EmbedLiveSample('audio', '100%', '60px') }} - -

これから、記憶や思想を共有し、そして自らの関わったある部分について詳細を語ってくれる人々について紹介します。

-
-
- -
-
Justin Crawford - -

Justin Crawford プロダクトマネージャー, MDN

- -

Justin 氏はこのトピックの進行役を務めます。ものを作り出す素材として、コード、言葉、自転車の部品、材木を用います。Twitter アカウントは @hoosteeno。

-
- -
-

MDNとは？誰のためのサイト？Open Web コミュニティーの為の場所

- -

MDN は有益な Web テクノロジーの情報を提供し、オープンな Web コミュニティーで学んだり、共有したり、教えたりすることを助けます。 MDN では、あなたも一緒になってあなた自身のため、また他者のために何かを作りあげることになります。

-Mozilla 開発者のための場所 - -

MDN はまた、Gecko や Firefox をハックする人々、アドオン開発者、Firefox OS 貢献者などのMozilla に携わる技術者のための場所でもあります。

-
- -
Eric Shepherd - -

Eric "Sheppy" Shepherd テクニカルライター, MDN

- -

Sheppy 氏は Mozilla の為に 2006 年から執筆を始め、MDC と MDN に結実するまでに長年の歴史（とクレイジーなアイデア）を刻んでいます。Twitter では @sheppy。

-
- -
-

MDN の歴史 Wiki より前の時代 – Netscape DevEdge

- -

古くは、いくつかの MDN ドキュメントの基礎を形作ることになった Netscape 社の DevEdge というものがありました。その頃の様子は archive.org で見ることができます。

- -

Netscape DevEdge

- -

2004 年 10 月 12 日、この人気のあった開発者向けのウェブサイトは Netscape の親会社、AOL によって閉じられました。わずか数か月後の 2005 年 2 月、Mitchell Baker は Mozilla が元 Netscape DevEdge リソースベースの新しいドキュメントを投稿したり、修正したり、作成することを許可する AOL との契約とともに DevEdge を助け出すことに成功しました。つまり、1998 年に Mozilla のソースについて起きたことが、ついに Netscape の開発者ドキュメントについても起きたのです。オープンソースになったということです！

- -

Deb Richardson が Mozilla Foundation に技術編集者として加わり、新しい DevMo プロジェクト ── コミュニティ主体の開発者ドキュメントのプロジェクトをリードしました。

-
- -
-

MediaWiki 最初の Wiki エンジン

- -

MediaWiki を新しいプロジェクトのプラットフォームとして、Mozilla の開発者文書は 2005 年 7 月より誰でも編集できるようになりました。Mozilla の新しい協同的な要素が打ち立てられ、それ以来 "いいもの" を作ることを助ける人や知見を共有する人は誰でも歓迎しています。技術文書を他の言語に翻訳する新しい国際的なコミュニティーが成長し始めました。

- -

MDC MediaWiki

-
- -
Florian Scholz - -

Florian Scholz テクニカルライター, MDN

- -

Florian 氏は Mozilla が焦点を当てているオープンな Web 技術のテクニカルライターです。彼は Wiki の小人で、それが花であるかのようにドキュメンテーションをガーデニングします。そして彼はコミュニティーと一緒に、Webについての文書化し、誰からもアクセスできるようにするという目標に向けて作業することが好きです。 Florian 氏はオープンソースへの情熱を持っています。彼はドイツのブレーメンに住んでいます。 @floscholz にてツイートしています。

-
- -
-

DekiWiki 2 つ目の Wiki エンジン

- -

2008 年 8 月、Mozilla Developer Center は技術文書のためのパワフルで新しいコンテンツ管理システム (CMS) であり、Wiki システムでもある MindTouch DekiWiki に乗り換えました。この乗り換えはコミュニティー内でとても大きい議論が巻き起こりました。MediaWiki は 2005 年から使われており、その周辺にツールもビルドされてきたからです。

- -

MDC DekiWiki

-
- -
Ali Spivak - -

Ali Spivak すてきな MDN ネコの飼育者

- -

Ali Spivak は Mozilla Developer Network のコンテンツとコミュニティを管理し、Web がもっとすてきになるのを手助けする方法を考えます。彼女は自由でオープンな Web を維持することに情熱的であり、そして、2012 年に Mozilla に参加した時にオープンソースに飛び込んで以来、Mozilla での開発者コミュニティーの構築と参加に注力してきました。Twitter では @alispivak。

-
- -
-

Kuma 3 つ目の、そして現行の Wiki エンジン

- -

2011 年初期頃、Kitsune から fork され、2012 年 8 月 3 日に立ち上がった Kuma は Django をベースに Mozilla が構築した Wiki プラットフォームで Node.js を使った KumaScript マクロシステムも付随してます。

- -

コードは GitHub 上にあるので、コミュニティーは、MDN の CMS にも貢献し始めました。今後、"MDN のハック" には文書を書くことと Kuma のコーディングの両方が含まれることになるでしょう。

- -

MDN KUMA

-
- -
David Walsh - -

David Walsh Web 開発者, MDN

- -

Mozilla シニア Web 開発者、フロントエンドエンジニア、 MooTools コア開発者、Javascript マニア、CSS の何でも屋、PHP ハッカーで、Web とオープンソースを愛する人。David は Twitter では @davidwalshblog。

-
- -
-

MDN の再設計 新しいデザインと Kuma

- -

MDN の再設計はビッグプロジェクトでした。Sean Martell が新しい MDN の VI (visual identity; 法人以外のロゴのこと) をデザインしました。次には、3000 人の MDNer のベータユーザーグループと共に数か月かけた反復的プロセスでした。新しい見た目は "ワッフルフラグ" (MDN の機能フラグシステム) に隠れています。David Walsh にも大きく感謝します。彼は全体の再デザインに挑戦して、MDN にふさわしいフロントエンドデザインをもたらしました。

-Waffle flag
- -
Janet Swisher - -

Janet Swisher コミュニティマネージャー, MDN

- -

Janet 氏は Mozilla Developer Network の Mozilla Community Manager です。彼女はMozilla に加わったのは 2010 年、OSS への関与は 2004 年から、技術的なコミュニケーションには 20 世紀から関わっています。Twitter では @jmswisher 。

-
- -
-

Open Web 文書の周りのコミュニティー コミュニティーが動かす、特定のブラウザーに限らないオープンなウェブのためのドキュメンテーション

- -

2010年の時点、特にコミュニティメンバーやテクニカルライターがパリに集まった時、MDN の目標は "Firefox のすべてのドキュメントを書こう！" から "Web のドキュメントを書こう！" に確実にシフトしました。ドキュメントは整理され、数年かけて再編成され MDN の Open Web documentation は 特定のブラウザーにとらわれないものになりました。これは、Web に関わる開発をするあらゆる人々の手助けとなり、そして私たちのコンテンツの中で、もっとも広く使われるものとなりました。

- -

いつも、いろいろなブラウザーベンダーが MDN を形作る手助けをしてくれています。このブラウザー間のコラボレーションは非常に成功していて、MDN の読者たちに高く評価されています。

-
- -
Luke Crouch - -

Luke Crouch Web 開発者, MDN

- -

Luke Crouch は自家醸造者で、Mozilla の Web 開発者であり、サッカーファンです。彼は 1996 年から Web を開発し続けていて 2004 年から Firefox を使っています。2006 年からオープンソースに貢献し始めて、MDN の最初のスタッフとして 2010 年に Mozilla に入社しました。Luke 氏は @groovecoder で Twitter を利用しています。

-
- -
-

翻訳コミュニティー MDN はグローバルな利用者に向けて数々の言語に翻訳されています

- -

ローカライゼーションは Mozilla コミュニティーの大きなパートです。これはほぼすべてのプロジェクトや製品で当てはまります。Kuma を使っている MDN も翻訳しやすく、私達の L10n コミュニティーのニーズに適しています。W3C の仕様や他のWebの機能を記述しているリソースには直接的な目標はありません。そして仕様書を複数の言語で提供するコミュニティーを持っています。特に初心者にとって、MDN は Web の技術を探求する最初のステップであり、すべての人々にとってそうなることが私達の目標です。MDN は広いユーザーを持ち、英語を母語としない人も対象です。これは世界中の人々から高く評価されています。

-
- -
Julien - -

Julien (別名 Sphinx) フランス語 localization, MDN

- -

Julien 氏は何か月もの間、夜と週末を費やし JavaScript の記事をフランス語に翻訳してきました。彼は開発者ではありませんが、IT の基礎を学んでおり、新しい技術について学びたいと思っています。彼はテレビを見る代わりに MDN に貢献しているのです。

-
- -
an-Yves Perrier - -

Jean-Yves Perrier テクニカルライター, MDN

- -

Jean-Yves 氏は 2010 年から MDN のテクニカルライターであり、2011 年の終わりに Mozilla に常勤として加わりました。彼はオープンな Web への情熱と 15 年の C++ の知識とを持っています。彼はスイス人ですがイギリスのロンドンに住んでいます。彼のエルデシュ数は 5 です。Twitter では @Teoli2003 です。

-
- -
-

Learning Area

- -

MDN の Learning Area はWeb の基礎スキルを教える新しい取り組みです。 これまでの 10 年を通して、MDN はたくさんの応用的な記事と貴重な情報をエキスパートの為に提供し続けてきました。このプロジェクトでは初心者に焦点を当てた記事を書き、知識ギャップを埋めることを目標としています。

-
- -
Jérémie Patonnier - -

Jérémie Patonnier テクニカルライター, MDN

- -

Jérémie 氏は長年 Mozilla Developer Network の貢献者として活動を続け、2000 年から Web のプロフェッショナルになりました。彼は Web 標準の擁護者であり、Web技術のドキュメントを書き続け、すべての人々に届くようにと願っています。Twitter では @JeremiePat

-
- -
-

MDN の未来 20 周年を祝う時 MDN はどうなっているだろうか？

- -

MDN に参加する人々はオープンな Web やアクセシビリティを気にしていまます。それが私達に数々の localization チームや貢献してくれる全ての人達がいる理由です。

- -

MDN は、私達がそうであるべきだと感じるあり方で Web を維持し続けるための重要なプレーヤーであり続けることを望みます。

- -

この未来を担う一つの大きな部分は、学習のための資源でしょう。次の 10 年を迎え、そこにはもっとたくさんの Web 開発者がいるでしょう。

- -

私達の仕事のもうひとつの重要な部分は、私達がすでに持っているコンテンツのメンテナンスと情報の更新であり、いつでも Web 開発者達に適切なコンテンツを提供できるようにすることです。

- -

今変わろうとしていること、そして変わるであろうことは、どのように情報の消費がなされるかということです。今日ではみんなが情報を求めてドキュメンテーション (MDN に限らず) を検索し、探しています。将来、MDN ドキュメントは直接コードエディターに、Firefox Developer Tool に、そして他の多くの開発者ツールやサービスに配信されるかもしれません。

-
- -
-

偉大なる貢献者たち 他にも多くの人々がMDNですばらしい働きをしてきました

- -
-
    -
  • Les Orchard
    • -
  • John Karahalis
    • -
  • David Walsh
    • -
  • Jannis Leidel
    • -
  • Stephanie Hobson
    • -
  • James Bennett
    • -
  • Isac Lagerblad
    • -
  • Piotrek Koszuliński
    • -
  • Craig Cook
    • -
  • Rob Hudson
    • -
  • John Whitlock
    • -
  • ...
    - ほか、たくさんの Kuma への貢献者たち。
    • -
- -
    -
  • Chris Mills
    • -
  • Will Bamberg
    • -
  • David Bruant
    • -
  • Thierry Régagnon
    • -
  • etherthank
    • -
  • Saurabh Nair
    • -
  • Deb Richardson
    • -
  • Sebastian Zartner
    • -
  • Tooru Fujisawa
    • -
  • Karen Scarfone
    • -
  • Niklas Barning
    • -
  • ...
    - ほか数百名の Wiki 執筆者たち。
    • -
-
-The Berlin Office
-
diff --git a/files/ja/mdn_at_ten/index.html b/files/ja/mdn_at_ten/index.html deleted file mode 100644 index e79eb97940..0000000000 --- a/files/ja/mdn_at_ten/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: MDN は 10 周年を迎えました -slug: MDN_at_ten -translation_of: MDN_at_ten ---- -
Web のドキュメントを作り続けて 10 周年
- -
-
-

MDN のあゆみ

- -

フリーで、コミュニティが作るWeb 開発者のための新しいオンラインリソースをつくる、という理想に燃えた小さなチームが作業を開始したのが 2005 年でした。彼らの働きが現在の Mozilla Developer Network の礎となっています。それから 10 年後の現在 MDN のコミュニティは大きく成長し、 Web 技術に関するドキュメントやサンプルコード、学習用の教材を作成し続けています。CSS / HTML / JavaScript に代表されるあらゆるオープンな Web 技術をカバーし、オープンな Web の力を支えています。

- -

詳細はこちら about the history

- -

MDN へ参加しよう

- -

10 年にわたり、MDN のコミュニティはオープン Web に関するドキュメントを作成し、更新し続けてきました。90,000 を超えるドキュメントが Mozillan によって作成され、翻訳されています。そんなコミュニティのメンバーに参加しませんか？何か大きなことをしなくても大丈夫。新しい Web API に関する記事を 1 から書くことも、単純なタイプミスの修正も、どちらも等しく重要な貢献です。

- -

詳細はこちら about contributing

-
- -
-
-
MDN は「どうやって」ではなく「なぜ」を知るのに最適な場所である
-— Christian Heilmann
-
-
- - - -
    -
  1. MDN は 10 周年を迎えました
    2. -
  2. MDN のあゆみ
    3. -
  3. MDN へ参加しよう
    4. -
diff --git a/files/ja/microsummary_xml_grammar_reference/index.html b/files/ja/microsummary_xml_grammar_reference/index.html deleted file mode 100644 index 42dba6b59c..0000000000 --- a/files/ja/microsummary_xml_grammar_reference/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Microsummary XML grammar reference -slug: Microsummary_XML_grammar_reference -tags: - - Microsummaries ---- -

 

-

はじめに

-

マイクロサマリジェネレータとは、ウェブページから特定の情報を抜き出し、そのページの内容に基づいてそのタイトルが変わるブックマークとして概要を表示するための方法を記述した XML 文書のことです。

-

この記事では各要素とその属性について説明しつつ、マイクロサマリジェネレータの組み立てに使用する XML の文法に関する詳細情報を提供します。マイクロサマリの作成方法についての入門記事は マイクロサマリの作成 です。

-

例

-

マイクロサマリの作成 のチュートリアルで作成したマイクロサマリジェネレータは次のものです。

-
<?xml version="1.0" encoding="UTF-8"?>
-<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Firefox Download Count">
-  <template>
-    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
-      <output method="text"/>
-      <template match="/">
-        <value-of select="id('download-count')"/>
-        <text> Fx downloads</text>
-      </template>
-    </transform>
-  </template>
-  <pages>
-    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
-  </pages>
-</generator>
-
-

名前空間

-

マイクロサマリジェネレータの XML 文書で使用する名前空間 URI は次のものです。

-
http://www.mozilla.org/microsummaries/0.1
-
-

マイクロサマリジェネレータ文書におけるすべての要素はこの名前空間内になければなりません。ただし <template> 要素の子孫は例外であり、次の XSLT 名前空間内になければなりません。

-
http://www.w3.org/1999/XSL/Transform
-
-

<generator> 要素

-

<generator> 要素は全マイクロサマリジェネレータのルートタグであり、ジェネレータを記述する XML コードの残りを格納していなければなりません。

-

属性：

-
-
- name（必須）
-
- ジェネレータによって作成されるマイクロサマリに付ける、説明的かつ人間が読める名前。
-
- uri（オプション）
-
- ジェネレータを一意的に識別する妥当な URI。Firefox のコードおよび拡張機能によって動的に作成されるジェネレータにのみ該当。nsSidebar::addMicrosummaryGenerator を通じてウェブからインストールされるジェネレータはそれがダウンロードされたリモート URL で識別される。また、そのような動作のために Firefox はこの属性の値を無視する。
-
-

子要素：

-
-
- <template>（必須）
-
- ページをマイクロサマリに変換する方法を定義する。
-
- <pages>（必須）
-
- ジェネレータがサマリを作成できるページの集合を指定する。
-
- <update>（オプション）
-
- Firefox がマイクロサマリを更新する頻度を指定する。
-
-

<template> 要素

-

<template> 要素にはウェブページをマイクロサマリに変換する XSLT スタイルシートを格納します。

-

属性：

-

- - なし。 -

-

子要素：

-
-
- <stylesheet> または <transform>（必須）
-
- 変換を行う XSLT スタイルシート。
-
-

各 XSLT について、<stylesheet> あるいは <transform> タグのどちらかを用いたスタイルシート子要素を指定します。これらはどちらも同じ機能を果たします。

-
-

注意：<template> 要素は必ずマイクロサマリ名前空間 (http://www.mozilla.org/microsummaries/0.1) 内になければなりませんが、その <stylesheet>/<transform> 子要素は必ず XSLT 名前空間 (http://www.w3.org/1999/XSL/Transform) 内になければなりません。

-
-

<pages> 要素

-

<pages> 要素はジェネレータがサマリを作成できるページの集合を指定します。

-

属性：

-

- - なし。 -

-

子要素：

-
-
- <include>（オプション）
-
- ジェネレータがサマリを作成できるページの URL にマッチする正規表現。
-
- <exclude>（オプション）
-
- ジェネレータがサマリを作成できないページの URL にマッチする正規表現。
-
-

<pages> 要素にはゼロ個以上の <include> および <exclude> 子要素を含めることができます。そのそれぞれは JavaScript と互換性のある妥当な正規表現を含んでいなければなりません。また、他のどんな要素も含んではなりません。属性は全くありません。

-

ページからサマリを作成できるかどうかを決定するためにジェネレータがチェックされる際、子要素で指定された正規表現がそのページの URL に対して評価されます。少なくとも 1 つの <include> の正規表現がページの URL にマッチし、かつ <exclude> の正規表現がページの URL にマッチしなかった場合、ジェネレータはそのページのサマリを作成可能であると判断されます。

-

<pages> 要素内に子要素が現れる順番には特に重要ではありません。子要素のタグとその中の正規表現の間のホワイトスペースも特に重要ではありません。つまり、それは正規表現の一部とは見なされず、その正規表現の評価には影響を及ぼしません。

-

次の例では www.example.com のウェブサイトにおいて about.html という名前のページ以外の全ページのサマリを作成できるジェネレータができます。

-
<pages>
-  <include>
-    ^http://www\.example\.com/
-  </include>
-  <exclude>/about\.html</exclude>
-</pages>
-
-
- 注意：マッチさせたい URL をただ含んでいるだけの URL にマッチしてしまわないようにするためにも、ページの URL の先頭にマッチさせたい正規表現はキャレット (^) から始めなければなりません。例えば、http://www\.example\.com/ という正規表現は http://www.example.com/ という URL にも http://www.evil.com/http://www.example.com/ という URL にもマッチします。しかし、^http://www\.example\.com/ という正規表現は前者の URL にしかマッチしません。
-

ジェネレータにとって妥当な正規表現の構文の詳細については Core_JavaScript_1.5_Reference:Global_Objects:RegExp のリファレンスを参照してください。また、マイクロサマリジェネレータ用正規表現の作成 では URL にマッチする正規表現の書き方を一歩一歩解説しています。

-

<include> 要素

-

<include> 要素はジェネレータがサマリを作成できるページの集合を指定します。これは <pages> 要素の子でなければなりません。また、JavaScript 互換の正規表現を含んでいなければなりません。

-

この要素の使用についての詳細は <pages> 要素 を参照してください。

-

<exclude> 要素

-

<exclude> 要素はジェネレータがサマリを作成できないページの集合を指定します。これは <pages> 要素の子でなければなりません。また、JavaScript 互換の正規表現を含んでいなければなりません。

-

この要素の使用についての詳細は <pages> 要素 を参照してください。

-

<update> 要素

-

オプションである <update> 要素はジェネレータによって作成されるマイクロサマリを Firefox が更新する頻度を指定します。この要素には絶対的な更新間隔を指定することも、サマリを作成するページの内容に基づいた一連の条件付きの間隔を指定することもできます。

-

属性：

-
-
- interval（オプション）
-
- 更新間で経過しなければならない絶対的な時間間隔。単位は分。
-
-

子要素：

-
-
- <condition>（オプション）
-
- XPath の論理式、およびその式が true に評価された場合に更新間で経過しなければならない分単位の条件付き時間間隔。
-
-

interval 属性は絶対的な間隔を分単位で定義します。その値は 1 以上の数でなければなりません。あまり実用的ではないでしょうが、小数値（例：5.5 分）も使えます。

-

<update> 要素には <condition> 子要素をいくつでも含めることができます。

-

以下のルールに従って、ジェネレータが作成するマイクロサマリにどの間隔を適用すべきかを Firefox は決定します。

-
    -
  1. Firefox は文書での順番どおりに各 <condition> 子要素を処理する。各要素について、サマリを作成するページに対してその要素の XPath の論理式を Firefox は評価する。その式が true に評価されれば Firefox はその要素の間隔を適用し、子要素の処理を停止する。このようにして、最初にマッチした <condition> によって更新間隔が決まる。
    2. -
  2. <condition> 子要素がない場合、あるいは true に評価される式がない場合、Firefox は <update> 要素の interval 属性の値を適用する。
    3. -
  3. <update> 要素に interval 属性が含まれていない場合、Firefox は browser.microsummary.updateInterval という設定項目で指定された間隔を適用する。
    4. -
  4. その設定項目が未設定の場合、Firefox はそのデフォルトの更新間隔である 30 分を適用する。
    5. -
-

注意：

- -

<condition> 要素

-

オプションである <condition> 要素は XPath の論理式、およびサマリを作成するページに対してその式が true に評価された場合に更新間で経過しなければならない分単位の条件付き時間間隔を指定します。<update> 要素の子でなければなりません。

-

属性：

-
-
- expression（必須）
-
- サマリを作成するページに対して評価する XPath の論理式。
-
- interval（必須）
-
- 式が true に評価された場合に更新間で経過しなければならない時間間隔。単位は分。
-
-

子要素：

-

- - なし。 -

-

この要素の使用についての詳細は <update> 要素 を参照してください。

-

関連項目

- diff --git a/files/ja/migrate_apps_from_internet_explorer_to_mozilla/index.html b/files/ja/migrate_apps_from_internet_explorer_to_mozilla/index.html deleted file mode 100644 index 5ed7c8dd6c..0000000000 --- a/files/ja/migrate_apps_from_internet_explorer_to_mozilla/index.html +++ /dev/null @@ -1,1235 +0,0 @@ ---- -title: Migrate apps from Internet Explorer to Mozilla -slug: Migrate_apps_from_Internet_Explorer_to_Mozilla -tags: - - 要更新 ---- -

イントロダクション

- -

Netscape が Mozilla ブラウザを始めたときには、W3C 標準をサポートすると明確に決めていました。その結果、Mozilla は Netscape Navigator 4.x 系や Microsoft Internet Explorer のレガシコードと完全に後方互換ではなくなっています。たとえば、Mozilla は、後述する <layer> タグをサポートしません。W3C 標準というコンセプトがもたらされる前に開発された Internet Explorer 4 のようなブラウザは、さまざまな特異な仕様を引き継いでいます。この記事では、Internet Explorer やその他のレガシブラウザとの強力な HTML 後方互換を実現するための Mozilla の quirks モードについて解説します。
-
- さらに、ここでは、当時 W3C と同等のものがなかったために Mozilla がサポートしている XMLHttpRequest やリッチテキスト編集などのなどの非標準技術についても触れます。そこには次のものが含まれます:

- - - -

一般的なクロスブラウザコーディングの tips

- -

Web 標準は存在しているものの、ブラウザごとに挙動は違いますす(実際には、同じブラウザもプラットフォームによって挙動が変わります)。Internet Explorer を含む多くのブラウザは、W3C 以前の API をサポートし、W3C を遵守した拡張を行わずにいます。

- -

Mozilla と Internet Explorer の違いに触れる前に、新たなブラウザをサポートするために Web アプリを拡張しやすくする方法の基本を説明しましょう。

- -

同じ機能でもブラウザごとに異なる API を使うことがあるので、ブラウザごとに処理を変えるために if() else() ブロックをあちこちに含んだコードをしばしば見かけます。次のコードは、Internet Explorer を指定したブロックを含んでいます:

- -
. . .
-
-var elm;
-
-if (ns4)
-  elm = document.layers["myID"];
-else if (ie4)
-  elm = document.all["myID"]
- -

このコードは、拡張性に欠けています。新たなブラウザをサポートしたくなったときに、Web アプリケーション全体のこういったブロックを修正する必要が出てくるからです。

- -

新たなブラウザをサポートするときの修正を不要にするための最も簡単な方法として、処理部分を関数として抽出するというのがあります。何箇所も if() else() ブロックを書くよりも、こういった共通の処理を探して独自の関数として抽出してしまうほうがずっと効率的です。これはコードの可読性を高めるだけでなく、新たなクライアントを簡単に追加できるようにします。

- -
var elm = getElmById("myID");
-
-function getElmById(aID){
-  var element = null;
-
-  if (isMozilla || isIE5)
-    element = document.getElementById(aID);
-  else if (isNetscape4)
-    element = document.layers[aID];
-  else if (isIE4)
-    element = document.all[aID];
-
-  return element;
-}
-
- -

それでもまだ上記のコードはブラウザ判定を行っています。ブラウザ判定はしばしば次のようにユーザエージェント情報を使って行われます:

- -
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
-
- -

ブラウザ判定のためにユーザエージェント情報を使うと、使用中のブラウザについての詳細な情報を扱うことになり、ユーザエージェント情報を使ったコードは、新たなブラウザのバージョンが加わったときにミスが発生しやすくなり、コードの修正が必要になってきます。

- -

ブラウザの能力やオブジェクトの機能のサポート状況を使ってブラウザを判定した方がずっと良く、信頼性も上がります。 これは、必要な機能が実装されているかどうかを JavaScript で確認すればできます。たとえば、こんな風に書くよりも

- -
if (isMozilla || isIE5)
-
- -

こうした方がいいでしょう

- -
if (document.getElementById)
-
- -

こうすることで、W3C 標準のメソッドをサポートした Opera や Safari でも、変更することなく動くようになります。

- -

ユーザエージェント判定が有効なのは、たとえば特定のブラウザの特定のバージョンでのバグに対処する場合など、ごく限られたケースだけです。それ以外の目的ならば、想定しているブラウザがその機能をサポートするかどうかではなく、必要な機能が実際に使えるかをチェックすればよいのです。

- -

JavaScript では、コードの可読性を良くする三項演算子が使えます:

- -
var foo = (condition) ? conditionIsTrue : conditionIsFalse;
-
- -

例えば、要素を取得するのに、次のような書き方をします:

- -
function getElement(aID){
-  return (document.getElementById) ? document.getElementById(aID)
-                                   : document.all[aID]);
-}
-
- -

 

- -

Mozilla と Internet Explorer の違い

- -

まず最初に、Mozilla と Internet Explorer の HTML のふるまいの違いを比較してみます。

- -

ツールチップ

- -

レガシブラウザは、リンクの上に alt 属性値を表示するツールチップを HTML に導入しました。最新の W3C HTML の仕様では、リンクの詳しい記述を含めることを目的とした title 属性が作られています。新しめのブラウザはツールチップの表示に title 属性値を使います。Mozilla も、alt ではなく、この title 属性を表示するようなツールチップのサポートをしています。

- -

エンティティ

- -

HTML マークアップには、W3C web standards body の定めているいくつかのエンティティを使うことができます。これらのエンティティは、数字または文字による参照によって利用することができます。たとえば、ノーブレークスペース文字は &#160; もしくは同等の文字列参照 &nbsp; で参照します。

- -

Internet Explorer のような古いブラウザは、末尾の ; (セミコロン) のかわりに通常文字が来るような実体参照を許してしまうという特異な挙動をします:

- -
&nbsp Foo
-&nbsp&nbsp Foo
-
- -

Internet Explorer は、W3C 仕様に反して、上のほうの &nbsp をホワイトスペースとして表示します。ブラウザは、直後に通常文字が続くような &nbsp という記述をパースしないはずです。たとえば次のような表記です:

- -
&nbsp12345
-
- -

このコードは Mozilla では動きません。これは W3C web 標準に反するからです。ブラウザ間の挙動が変わらないよう、常に正しい形式 (&nbsp;) を使ってください。

- -

DOM の相違

- -

ドキュメントオブジェクトモデル (DOM) は、ドキュメントの要素を含んだ木構造です。W3C の標準化した JavaScript API を用いてこれを操作することができます。しかし、W3C による標準化よりも前に、Netscape 4 と Internet Explorer 1は同様に API 1を実装しました。Mozilla は、W3C ウェブスタンダードでは達成できない場合についてのみ、レガシ API を実装しています。

- -

要素へのアクセス

- -

クロスブラウザなアプローチによって要素にアクセスするには、Internet Explorer 5.0 以上、Mozilla ベースのブラウザ、およびその他 W3C 互換のブラウザで利用可能で、DOM Level 1 の機能に含まれる document.getElementById(aID)を使用します。
-
- Mozilla は、Internet Explorer で利用可能な document.elementName や要素の name による要素へのアクセス (グローバル名前空間の汚染ともいわれています) をサポートしていません。また、Mozilla は、Netscape 4 の document.layers メソッドや Internet Explorer の document.all をサポートしません。 Netscape 4 document.layers method and Internet Explorer's document.all. While document.getElementById lets you retrieve one element, you can also use document.layers and document.all to obtain a list of all document elements with a certain tag name, such as all <div> elements.
-
- W3C DOM Level 1 のメソッドは、getElementsByTagName() によって、同じ name の要素をすべて取得します。このメソッドは、JavaScript で配列を返し、document 要素やその他のノードに対して実行することで、その要素以下に連なる木構造のみに含まれる要素を検索することができます。DOM 木構造に含まれるすべての要素の配列を取得するには、getElementsByTagName("*") を使用します。

- -

The DOM Level 1 methods, as shown in Table 1, are commonly used to move an element to a certain position and toggle its visibility (menus, animations). Netscape 4 used the <layer> tag, which Mozilla does not support, as an HTML element that can be positioned anywhere. In Mozilla, you can position any element using the <div> tag, which Internet Explorer uses as well and which you'll find in the HTML specification.

- - - - - - - - - - - - - - - - - -
Table 1. Methods used to access elements
MethodDescription
document.getElementById( aId )Returns a reference to the element with the specified ID.
document.getElementsByTagName( aTagName )Returns an array of elements with the specified name in the document.
- -

Traverse the DOM

- -

Mozilla supports the W3C DOM APIs for traversing the DOM tree through JavaScript (see Table 2). The APIs exist for each node in the document and allow walking the tree in any direction. Internet Explorer supports these APIs as well, but it also supports its legacy APIs for walking a DOM tree, such as the children property.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 2. Methods used to traverse the DOM
Property/MethodDescription
childNodesReturns an array of all child nodes of the element.
firstChildReturns the first child node of the element.
getAttribute( aAttributeName )Returns the value for the specified attribute.
hasAttribute( aAttributeName )Returns a boolean stating if the current node has an attribute defined with the specified name.
hasChildNodes()Returns a boolean stating whether the current node has any child nodes.
lastChildReturns the last child node of the element.
nextSiblingReturns the node immediately following the current one.
nodeNameReturns the name of the current node as a string.
nodeTypeReturns the type of the current node. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValueDescription
1Element Node
2Attribute Node
3Text Node
4CDATA Section Node
5Entity Reference Node
6Entity Node
7Processing Instruction Node
8Comment Node
9Document Node
10Document Type Node
11Document Fragment Node
12Notation Node
-
nodeValueReturns the value of the current node. For nodes that contain text, such as text and comment nodes, it will return their string value. For attribute nodes, the attribute value is returned. For all other nodes, null is returned.
ownerDocumentReturns the document object containing the current node.
parentNodeReturns the parent node of the current node.
previousSiblingReturns the node immediately preceding the current one.
removeAttribute( aName )Removes the specified attribute from the current node.
setAttribute( aName, aValue )Sets the value of the specified attribute with the specified value.
- -

Internet Explorer has a nonstandard quirk, where many of these APIs will skip white space text nodes that are generated, for example, by new line characters. Mozilla will not skip these, so sometimes you need to distinguish these nodes. Every node has a nodeType property specifying the node type. For example, an element node has type 1, while a text node has type 3 and a comment node is type 8. The best way to only process element nodes is to iterate over all child nodes and only process those with a nodeType of 1:

- -
HTML:
-  <div id="foo">
-    <span>Test</span>
-  </div>
-
-JavaScript:
-  var myDiv = document.getElementById("foo");
-  var myChildren = myDiv.childNodes;
-  for (var i = 0; i < myChildren.length; i++) {
-    if (myChildren[i].nodeType == 1){
-      // element node
-    };
-  };
-
- -

Generate and manipulate content

- -

Mozilla supports the legacy methods for adding content into the DOM dynamically, such as document.write, document.open and document.close. Mozilla also supports Internet Explorer's innerHTML method, which it can call on almost any node. It does not, however, support outerHTML (which adds markup around an element, and has no standard equivalent) and innerText (which sets the text value of the node, and which you can achieve in Mozilla by using textContent).

- -

Internet Explorer has several content manipulation methods that are nonstandard and unsupported in Mozilla, including retrieving the value, inserting text and inserting elements adjacent to a node, such as getAdjacentElement and insertAdjacentHTML. Table 3 shows how the W3C standard and Mozilla manipulate content, all of which are methods of any DOM node.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 3. Methods Mozilla uses to manipulate content
MethodDescription
appendChild( aNode )Creates a new child node. Returns a reference to the new child node.
cloneNode( aDeep )Makes a copy of the node it is called on and returns the copy. If aDeep is true, it copies over the node's entire subtree.
createElement( aTagName )Creates and returns a new and parentless DOM node of the type specified by aTagName.
createTextNode( aTextValue )Creates and returns a new and parentless DOM textnode with the data value specified by aTextValue.
insertBefore( aNewNode, aChildNode )Inserts aNewNode before aChildNode, which must be a child of the current node.
removeChild( aChildNode )Removes aChildNode and returns a reference to it.
replaceChild( aNewNode, aChildNode )Replaces aChildNode with aNewNode and returns a reference to the removed node.
- -

Document fragments

- -

For performance reasons, you can create documents in memory, rather than working on the existing document's DOM. DOM Level 1 Core introduced document fragments, which are lightweight documents that contain a subset of a normal document's interfaces. For example, getElementById does not exist, but appendChild does. You can also easily add document fragments to existing documents.

- -

Mozilla creates document fragments through document.createDocumentFragment(), which returns an empty document fragment.

- -

Internet Explorer's implementation of document fragments, however, does not comply with the W3C web standards and simply returns a regular document.

- -

JavaScript の相違

- -

Most differences between Mozilla and Internet Explorer are usually blamed on JavaScript. However, the issues usually lie in the APIs that a browser exposes to JavaScript, such as the DOM hooks. The two browsers possess few core JavaScript differences; issues encountered are often timing related.

- -

JavaScript の date の相違

- -

Date にかかわる唯一の相違点は、getYear メソッドです。As per the ECMAScript specification (which is the specification JavaScript follows), running new Date().getYear() in 2004 will return "104". Per the ECMAScript specification, getYear returns the year minus 1900, originally meant to return "98" for 1998. getYear was deprecated in ECMAScript Version 3 and replaced with getFullYear(). Internet Explorer uses an obsolete behavior for getYear(), similar to Netscape 4 and earlier, returning the year minus 1900 for years 1900-1999, and the full year for any other year. (i.e. for 1999, getYear() returns 99, for 2000, it returns 2000).

- -

JavaScript execution differences

- -

Different browsers execute JavaScript differently. For example, the following code assumes that the div node already exists in the DOM by the time the script block executes:

- -
...
-<div id="foo">Loading...</div>
-
-<script>
-  document.getElementById("foo").innerHTML = "Done.";
-</script>
-
- -

However, this is not guaranteed. To be sure that all elements exist, you should use the onload event handler on the <body> tag:

- -
<body onload="doFinish();">
-
-<div id="foo">Loading...</div>
-
-<script>
-  function doFinish() {
-    var element = document.getElementById("foo");
-    element.innerHTML = "Done.";
-  }
-</script>
-...
-
- -

Such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. One concrete example is window.open, which opens a new window:

- -
<script>
-  function doOpenWindow(){
-    var myWindow = window.open("about:blank");
-    myWindow.location.href = "http://www.ibm.com";
-  }
-</script>
-
- -

The problem with the code is that window.open is asynchronous -- it does not block the JavaScript execution until the window has finished loading. Therefore, you may execute the line after the window.open line before the new window has finished. You can deal with this by having an onload handler in the new window and then call back into the opener window (using window.opener).

- -

Differences in JavaScript-generating HTML

- -

JavaScript can, through document.write, generate HTML on the fly from a string. The main issue here is when JavaScript, embedded inside an HTML document (thus, inside an <script> tag), generates HTML that contains a <script> tag. If the document is in strict rendering mode, it will parse the </script> inside the string as the closing tag for the enclosing <script>. The following code illustrates this best:

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-...
-<script>
-  document.write("<script type='text/javascript'>alert('Hello');</script>")
-</script>
-
- -

Since the page is in strict mode, Mozilla's parser will see the first <script> and parse until it finds a closing tag for it, which would be the first </script>. This is because the parser has no knowledge about JavaScript (or any other language) when in strict mode. In quirks mode, the parser is aware of JavaScript when parsing (which slows it down). Internet Explorer is always in quirks mode, as it does not support true XHTML. To make this work in strict mode in Mozilla, separate the string into two parts:

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-...
-<script>
-  document.write("<script type='text\/javascript'>alert('Hello');</" + "script>")
-</script>
-
- -

Debug JavaScript

- -

Mozilla provides several ways to debug JavaScript-related issues found in applications created for Internet Explorer. The first tool is the built-in JavaScript console, shown in Figure 1, where errors and warnings are logged. You can access it in Mozilla by going to Tools -> Web Development -> JavaScript Console or in Firefox (the standalone browser product from Mozilla) at Tools -> JavaScript Console.

- -

Figure 1. JavaScript console

- -

Javascript Console

- -

The JavaScript console can show the full log list or just errors, warnings, and messages. The error message in Figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns70. Clicking on the link will open Mozilla's internal view source window with the offending line highlighted.

- -

The console also allows you to evaluate JavaScript. To evaluate the entered JavaScript syntax, type in 1+1 into the input field and press Evaluate, as Figure 2 shows.

- -

Figure 2. JavaScript console evaluating

- -

JavaScript Console evaluating

- -

Mozilla's JavaScript engine has built-in support for debugging, and thus can provide powerful tools for JavaScript developers. Venkman, shown in Figure 3, is a powerful, cross-platform JavaScript debugger that integrates with Mozilla. It is usually bundled with Mozilla releases; you can find it at Tools -> Web Development -> JavaScript Debugger. For Firefox, the debugger isn't bundled; instead, you can download and install it from the Venkman Project Page. You can also find tutorials at the development page, located at the Venkman Development Page.

- -

Figure 3. Mozilla's JavaScript debugger

- -

Mozilla's JavaScript debugger

- -

The JavaScript debugger can debug JavaScript running in the Mozilla browser window. It supports such standard debugging features as breakpoint management, call stack inspection, and variable/object inspection. All features are accessible through the user interface or through the debugger's interactive console. With the console, you can execute arbitrary JavaScript in the same scope as the JavaScript currently being debugged.

- -

CSS の相違

- -

Internet Explorer やその他のブラウザと比べ、Mozilla ベースの製品は、CSS1 のほとんど、CSS2.1、および CSS3 の一部を含んだカスケーディングスタイルシート (CSS)  のサポートでは最も強力です。

- -

下記で言及するような問題が発生した場合、Mozilla  は JavaScript コンソールにエラーまたは警告を表示します。CSS 関連の問題に遭遇したとは、JavaScript コンソールを開いて確認するとよいでしょう。

- -

Mimetypes (when CSS files are not applied)

- -

The most common CSS-related issue is that CSS definitions inside referenced CSS files are not applied. This is usually due to the server sending the wrong mimetype for the CSS file. The CSS specification states that CSS files should be served with the text/css mimetype. Mozilla will respect this and only load CSS files with that mimetype if the Web page is in strict standards mode. Internet Explorer will always load the CSS file, no matter with which mimetype it is served. Web pages are considered in strict standards mode when they start with a strict doctype. To solve this problem, you can make the server send the right mimetype or remove the doctype. I'll discuss more about doctypes in the next section.

- -

CSS and units

- -

Many Web applications do not use units with their CSS, especially when you use JavaScript to set the CSS. Mozilla tolerates this, as long as the page is not rendered in strict mode. Since Internet Explorer does not support true XHTML, it does not care if no units are specified. If the page is in strict standards mode, and no units are used, then Mozilla ignores the style:

- -
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-  "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-   <title>CSS and units example</title>
-  </head>
-  <body>
-    // works in strict mode
-    <div style="width: 40px; border: 1px solid black;">
-      Text
-    </div>
-
-    // will fail in strict mode
-    <div style="width: 40; border: 1px solid black;">
-      Text
-    </div>
-  </body>
-</html>
-
- -

Since the above example has a strict doctype, the page is rendered in strict standards mode. The first div will have a width of 40px, since it uses units, but the second div won't get a width, and thus will default to 100% width. The same would apply if the width were set through JavaScript.

- -

JavaScript and CSS

- -

Since Mozilla supports the CSS standards, it also supports the CSS DOM standard for setting CSS through JavaScript. You can access, remove, and change an element's CSS rules through the element's style member:

- -
<div id="myDiv" style="border: _fckstyle="border: 1px solid black;">
-  Text
-</div>
-
-<script>
-  var myElm = document.getElementById("myDiv");
-  myElm.style.width = "40px";
-</script>
-
- -

You can reach every CSS attribute that way. Again, if the Web page is in strict mode, you must set a unit or else Mozilla will ignore the command. When you query a value, say through .style.width, in Mozilla and Internet Explorer, the returned value will contain the unit, meaning a string is returned. You can convert the string into a number through parseFloat("40px").

- -

CSS overflow differences

- -

CSS added the notion of overflow, which allows you to define how to handle overflow; for example, when the contents of a div with a specified height are taller than that height. The CSS standard defines that if no overflow behavior is set in this case, the div contents will overflow. However, Internet Explorer does not comply with this and will expand the div beyond its set height in order to hold the contents. Below is an example that shows this difference:

- -
<div style="height: _fckstyle="height: 100px; border: 1px solid black;">
-  <div style="height: 150px; border: 1px solid red; margin: 10px;">
-    a
-  </div>
-</div>
-
- -

As you can see in Figure 4, Mozilla acts like the W3C standard specifies. The W3C standard says that, in this case, the inner div overflows to the bottom since the inner content is taller than its parent. If you prefer the Internet Explorer behavior, simply do not specify a height on the outer element.

- -

Figure 4. DIV overflow

- -

DIV Overflow

- -

hover differences

- -

The nonstandard CSS hover behavior in Internet Explorer occurs on quite a few web sites. It usually manifests itself by changing text style when hovered over in Mozilla, but not in Internet Explorer. This is because the a:hover CSS selector in Internet Explorer matches <a href="">...</a> but not <a name="">...</a>, which sets anchors in HTML. The text changes occur because authors encapsulate the areas with the anchor-setting markup:

- -
CSS:
-  a:hover {color: green;}
-
-HTML:
-  <a href="foo.com">This text should turn green when you hover over it.</a>
-
-  <a name="anchor-name">
-    This text should change color when hovered over, but doesn't
-    in Internet Explorer.
-  </a>
-
- -

Mozilla follows the CSS specification correctly and will change the color to green in this example. You can use two ways to make Mozilla behave like Internet Explorer and not change the color of the text when hovered over:

- - - -

Quirks versus standards mode

- -

Older legacy browsers, such as Internet Explorer 4, rendered with so-called quirks under certain conditions. While Mozilla aims to be a standards-compliant browser, it has three modes that support older Web pages created with these quirky behaviors. The page's content and delivery determine which mode Mozilla will use. Mozilla will indicate the rendering mode in View -> Page Info (or Ctrl+I) ; Firefox will list the rendering mode in Tools -> Page Info. The mode in which a page is located depends on its doctype.

- -

Doctypes (short for document type declarations) look like this:

- -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

- -

The section in blue is called the public identifier, the green part is the system identifier, which is a URI.

- -

Standards mode

- -

Standards mode is the strictest rendering mode -- it will render pages per the W3C HTML and CSS specifications and will not support any quirks. Mozilla uses it for the following conditions:

- - - -

Almost standards mode

- -

Mozilla introduced almost standards mode for one reason: a section in the CSS 2 specification breaks designs based on a precise layout of small images in table cells. Instead of forming one image to the user, each small image ends up with a gap next to it. The old IBM homepage shown in Figure 5 offers an example.

- -

Figure 5. Image gap

- -

Image Gap

- -

Almost standards mode behaves almost exactly as standards mode, except when it comes to an image gap issue. The issue occurs often on standards-compliant pages and causes them to display incorrectly.

- -

Mozilla uses almost standards mode for the following conditions:

- - - -

You can read more about the image gap issue.

- -

Quirks mode

- -

Currently, the Web is full of invalid HTML markup, as well as markup that only functions due to bugs in browsers. The old Netscape browsers, when they were the market leaders, had bugs. When Internet Explorer arrived, it mimicked those bugs in order to work with the content at that time. As newer browsers came to market, most of these original bugs, usually called quirks, were kept for backwards compatibility. Mozilla supports many of these in its quirks rendering mode. Note that due to these quirks, pages will render slower than if they were fully standards-compliant. Most Web pages are rendered under this mode.

- -

Mozilla uses quirks mode for the following conditions:

- - - -

For further reading, check out: Mozilla Quirks Mode Behavior and Mozilla's DOCTYPE sniffing.

- -

Event differences

- -

Mozilla and Internet Explorer are almost completely different in the area of events. The Mozilla event model follows the W3C and Netscape model. In Internet Explorer, if a function is called from an event, it can access the event object through window.event. Mozilla passes an event object to event handlers. They must specifically pass the object on to the function called through an argument.

- -

A cross-browser event handling example follows (note that it means you can't define a global variable named event in your code):

- -
<div onclick="handleEvent(event);">Click me!</div>
-
-<script>
-  function handleEvent(aEvent) {
-    var myEvent = window.event ? window.event : aEvent;
-  }
-</script>
-
- -

The properties and functions that the event object exposes are also often named differently in Mozilla and Internet Explorer, as Table 4 shows.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 4. Event properties differences between Mozilla and Internet Explorer
Internet Explorer NameMozilla NameDescription
altKeyaltKeyBoolean property that returns whether the alt key was pressed during the event.
cancelBubblestopPropagation()Used to stop the event from bubbling farther up the tree.
clientXclientXThe X coordinate of the event, in relation to the element viewport.
clientYclientYThe Y coordinate of the event, in relation to the element viewport.
ctrlKeyctrlKeyBoolean property that returns whether the Ctrl key was pressed during the event.
fromElementrelatedTargetFor mouse events, this is the element from which the mouse moved away.
keyCodekeyCodeFor keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events. For keypress events (not keydown/keyup) of keys that produce output, the Mozilla equivalent is charCode, not keyCode.
returnValuepreventDefault()Used to prevent the event's default action from occurring.
screenXscreenXThe X coordinate of the event, in relation to the screen.
screenYscreenYThe Y coordinate of the event, in relation to the screen.
shiftKeyshiftKeyBoolean property that returns whether the Shift key was pressed during the event.
srcElementtargetThe element to which the event was originally dispatched.
toElementcurrentTargetFor mouse events, this is the element to which the mouse moved.
typetypeReturns the name of the event.
- -

Attach event handlers

- -

Mozilla supports two ways to attach events through JavaScript. The first, supported by all browsers, sets event properties directly on objects. To set a click event handler, a function reference is passed to the object's onclick property:

- -
<div id="myDiv">Click me!</div>
-
-<script>
-  function handleEvent(aEvent) {
-    // if aEvent is null, means the Internet Explorer event model,
-    // so get window.event.
-    var myEvent = aEvent ? aEvent : window.event;
-  }
-
-  function onPageLoad(){
-    document.getElementById("myDiv").onclick = handleEvent;
-  }
-</script>
-
- -

Mozilla fully supports the W3C standard way of attaching listeners to DOM nodes. You use the addEventListener() and removeEventListener() methods, and have the benefit of being able to set multiple listeners for the same event type. Both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase. If the boolean is set to false, it will only catch bubbling events. W3C events have three phases: capturing, at target, and bubbling. Every event object has an eventPhase attribute indicating the phase numerically (0 indexed). Every time you trigger an event, the event starts at the DOM's outermost element, the element at the top of the DOM tree. It then walks the DOM using the most direct route toward the target, which is the capturing phase. When the event reaches the target, the event is in the target phase. After arriving at the target, it walks up the DOM tree back to the outermost node; this is bubbling. Internet Explorer's event model only has the bubbling phase; therefore, setting the third parameter to false results in Internet Explorer-like behavior:

- -
<div id="myDiv">Click me!</div>
-
-<script>
-
-  function handleEvent(aEvent) {
-    // if aEvent is null, it is the Internet Explorer event model,
-    // so get window.event.
-    var myEvent = aEvent ? aEvent : window.event;
-  }
-
-  function onPageLoad() {
-    var element = document.getElementById("myDiv");
-    element.addEventListener("click", handleEvent, false);
-  }
-</script>
-
- -

One advantage of addEventListener() and removeEventListener() over setting properties is that you can have multiple event listeners for the same event, each calling another function. Thus, to remove an event listener requires all three parameters be the same as the ones you use when adding the listener.

- -

Mozilla does not support Internet Explorer's method of converting <script> tags into event handlers, which extends <script> with for and event attributes (see Table 5). It also does not support the attachEvent and detachEvent methods. Instead, you should use the addEventListener and removeEventListener methods. Internet Explorer does not support the W3C events specification. However, IE can be remediated to support addEventListener and removeEventListener.

- - - - - - - - - - - - - - - - - - - - -
Table 5. Event method differences between Mozilla and Internet Explorer
Internet Explorer MethodMozilla MethodDescription
attachEvent(aEventType, aFunctionReference)addEventListener(aEventType, aFunctionReference, aUseCapture)Adds an event listener to a DOM element.
detachEvent(aEventType, aFunctionReference)removeEventListener(aEventType, aFunctionReference, aUseCapture)Removes an event listener to a DOM element.
- -

Rich text editing

- -

While Mozilla prides itself with being the most W3C web standards compliant browser, it does support nonstandard functionality, such as innerHTML and rich text editing, if no W3C equivalent exists.

- -

Mozilla 1.3 introduced an implementation of Internet Explorer's designMode feature, which turns an HTML document into a rich text editor field. Once turned into the editor, commands can run on the document through the execCommand command. Mozilla also supports Internet Explorer's contentEditable attribute for making any widget editable. Alternatively, you could use an iframe to add a rich text editor.

- -

Rich text differences

- -

Mozilla supports the W3C standard of accessing iframe's document object through IFrameElmRef.contentDocument, while Internet Explorer requires you to access it through document.frames{{ mediawiki.external('\"IframeName\"') }} and then access the resulting document:

- -
<script>
-function getIFrameDocument(aID) {
-  var rv = null;
-
-  // if contentDocument exists, W3C compliant (Mozilla)
-  if (document.getElementById(aID).contentDocument){
-    rv = document.getElementById(aID).contentDocument;
-  } else {
-    // IE
-    rv = document.frames[aID].document;
-  }
-  return rv;
-}
-</script>
-
- -

Another difference between Mozilla and Internet Explorer is the HTML that the rich text editor creates. Mozilla defaults to using CSS for the generated markup. However, Mozilla allows you to toggle between HTML and CSS mode using the useCSS execCommand and toggling it between true and false. Internet Explorer always uses HTML markup.

- -
Mozilla (CSS):
-  <span style="color: blue;">Big Blue</span>
-
-Mozilla (HTML):
-  <font color="blue">Big Blue</font>
-
-Internet Explorer:
-  <FONT color="blue">Big Blue</FONT>
-
- -

Below is a list of commands that execCommand in Mozilla supports:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 6. Rich text editing commands
Command NameDescriptionArgument
boldToggles the selection's bold attribute.---
createlinkGenerates an HTML link from the selected text.The URL to use for the link
deleteDeletes the selection.---
fontnameChanges the font used in the selected text.The font name to use (Arial, for example)
fontsizeChanges the font size used in the selected text.The font size to use
fontcolorChanges the font color used in the selected text.The color to use
indentIndents the block where the caret is.---
inserthorizontalruleInserts an <hr> element at the cursor's position.---
insertimageInserts an image at the cursor's position.URL of the image to use
insertorderedlistInserts an ordered list (<ol>) element at the cursor's position.---
insertunorderedlistInserts an unordered list (<ul>) element at the cursor's position.---
italicToggles the selection's italicize attribute.---
justifycenterCenters the content at the current line.---
justifyleftJustifies the content at the current line to the left.---
justifyrightJustifies the content at the current line to the right.---
outdentOutdents the block where the caret is.---
redoRedoes the previous undo command.---
removeformatRemoves all formatting from the selection.---
selectallSelects everything in the rich text editor.---
strikethroughToggles the strikethrough of the selected text.---
subscriptConverts the current selection into subscript.---
superscriptConverts the current selection into superscript.---
underlineToggles the underline of the selected text.---
undoUndoes the last executed command.---
unlinkRemoves all link information from the selection.---
useCSSToggles the usage of CSS in the generated markup.Boolean value
- -

For more information, visit Rich-Text Editing in Mozilla.

- -

XML differences

- -

Mozilla has strong support for XML and XML-related technologies, such as XSLT and Web services. It also supports some non-standard Internet Explorer extensions, such as XMLHttpRequest.

- -

How to handle XML

- -

As with standard HTML, Mozilla supports the W3C XML DOM specification, which allows you to manipulate almost any aspect of an XML document. Differences between Internet Explorer's XML DOM and Mozilla are usually caused by Internet Explorer's nonstandard behaviors. Probably the most common difference is how they handle white space text nodes. Often when XML generates, it contains white spaces between XML nodes. Internet Explorer, when using Node.childNodes, will not contain these white space nodes. In Mozilla, those nodes will be in the array.

- -
XML:
-  <?xml version="1.0"?>
-  <myXMLdoc xmlns:myns="http://myfoo.com">
-    <myns:foo>bar</myns:foo>
-  </myXMLdoc>
-
-JavaScript:
-  var myXMLDoc = getXMLDocument().documentElement;
-  alert(myXMLDoc.childNodes.length);
-
- -

The first line of JavaScript loads the XML document and accesses the root element (myXMLDoc) by retrieving the documentElement. The second line simply alerts the number of child nodes. Per the W3C specification, the white spaces and new lines merge into one text node if they follow each other. For Mozilla, the myXMLdoc node has three children: a text node containing a new line and two spaces; the myns:foo node; and another text node with a new line. Internet Explorer, however, does not abide by this and will return "1" for the above code, namely only the myns:foo node. Therefore, to walk the child nodes and disregard text nodes, you must distinguish such nodes.

- -

As mentioned earlier, every node has a nodeType property representing the node type. For example, an element node has type 1, while a document node has type 9. To disregard text nodes, you must check for types 3 (text node) and 8 (comment node).

- -
XML:
-  <?xml version="1.0"?>
-  <myXMLdoc xmlns:myns="http://myfoo.com">
-    <myns:foo>bar</myns:foo>
-  </myXMLdoc>
-
-JavaScript:
-  var myXMLDoc = getXMLDocument().documentElement;
-  var myChildren = myXMLDoc.childNodes;
-
-  for (var run = 0; run < myChildren.length; run++){
-    if ( (myChildren[run].nodeType != 3) &&
-          myChildren[run].nodeType != 8) ){
-      // not a text or comment node
-    };
-  };
-
- -

See Whitespace in the DOM for more detailed discussion and a possible solution.

- -

XML data islands

- -

Internet Explorer has a nonstandard feature called XML data islands, which allow you to embed XML inside an HTML document using the nonstandard HTML tag <xml>. Mozilla does not support XML data islands and handles them as unknown HTML tags. You can achieve the same functionality using XHTML; however, because Internet Explorer's support for XHTML is weak, this is usually not an option.

- -

IE XML data island:

- -
<xml id="xmldataisland">
-  <foo>bar</foo>
-</xml>
-
- -

One cross-browser solution is to use DOM parsers, which parse a string that contains a serialized XML document and generates the document for the parsed XML. Mozilla uses the DOMParser object, which takes the serialized string and creates an XML document out of it. In Internet Explorer, you can achieve the same functionality using ActiveX. The object created using new ActiveXObject("Microsoft.XMLDOM") has a loadXML method that can take in a string and generate a document from it. The following code shows you how:

- -
var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
-var myDocument;
-
-if (window.DOMParser) {
-  // This browser appears to support DOMParser
-  var parser = new DOMParser();
-  myDocument = parser.parseFromString(xmlString, "text/xml");
-} else if (window.ActiveXObject){
-  // Internet Explorer, create a new XML document using ActiveX
-  // and use loadXML as a DOM parser.
-  myDocument = new ActiveXObject("Microsoft.XMLDOM");
-  myDocument.async = false;
-
-  myDocument.loadXML(xmlString);
-} else {
-  // Not supported.
-}
-
- -

See Using XML Data Islands in Mozilla for an alternative approach.

- -

XMLHttpRequest

- -

Internet Explorer allows you to send and retrieve XML files using MSXML's XMLHTTP class, which is instantiated through ActiveX using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP"). Since there is no standard method of doing this, Mozilla provides the same functionality in the global JavaScript XMLHttpRequest object. Since version 7 IE also supports the "native" XMLHttpRequest object.

- -

After instantiating the object using new XMLHttpRequest(), you can use the open method to specify what type of request (GET or POST) you use, which file you load, and if it is asynchronous or not. If the call is asynchronous, then give the onload member a function reference, which is called once the request has completed.

- -

Synchronous request:

- -
var myXMLHTTPRequest = new XMLHttpRequest();
-myXMLHTTPRequest.open("GET", "data.xml", false);
-
-myXMLHTTPRequest.send(null);
-
-var myXMLDocument = myXMLHTTPRequest.responseXML;
-
- -

Asynchronous request:

- -
var myXMLHTTPRequest;
-
-function xmlLoaded() {
-  var myXMLDocument = myXMLHTTPRequest.responseXML;
-}
-
-function loadXML(){
-  myXMLHTTPRequest = new XMLHttpRequest();
-  myXMLHTTPRequest.open("GET", "data.xml", true);
-  myXMLHTTPRequest.onload = xmlLoaded;
-  myXMLHTTPRequest.send(null);
-}
-
- -

Table 7 features a list of available methods and properties for Mozilla's XMLHttpRequest.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 7. XMLHttpRequest methods and properties
NameDescription
void abort()Stops the request if it is still running.
string getAllResponseHeaders()Returns all response headers as one string.
string getResponseHeader(string headerName)Returns the value of the specified header.
functionRef onerrorIf set, the references function will be called whenever an error occurs during the request.
functionRef onloadIf set, the references function will be called when the request completes successfully and the response has been received. Use when an asynchronous request is used.
void open (string HTTP_Method, string URL)
-
- void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the send() method after initialization. If async is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.
int readyStateState of the request. Possible values: - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ValueDescription
0UNINITIALIZED - open() has not been called yet.
1LOADING - send() has not been called yet.
2LOADED - send() has been called, headers and status are available.
3INTERACTIVE - Downloading, responseText holds the partial data.
4COMPLETED - Finished with all operations.
-
string responseTextString containing the response.
DOMDocument responseXMLDOM Document containing the response.
void send(variant body)Initiates the request. If body is defined, it is sent as the body of the POST request. body can be an XML document or a string serialized XML document.
void setRequestHeader (string headerName, string headerValue)Sets an HTTP request header for use in the HTTP request. Has to be called after open() is called.
string statusThe status code of the HTTP response.
- -

XSLT differences

- -

Mozilla supports XSL Transformations (XSLT) 1.0. It also allows JavaScript to perform XSLT transformations and allows running XPath on a document.

- -

Mozilla requires that you send the XML and XSLT files with an XML mimetype (text/xml or application/xml). This is the most common reason why XSLT won't run in Mozilla but will in Internet Explorer. Mozilla is strict in that way.

- -

Internet Explorer 5.0 and 5.5 supported XSLT's working draft, which is substantially different than the final 1.0 recommendation. The easiest way to distinguish what version an XSLT file was written against is to look at the namespace. The namespace for the 1.0 recommendation is http://www.w3.org/1999/XSL/Transform, while the working draft's namespace is http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supports the working draft for backwards compatibility, but Mozilla does not support the working draft, only the final recommendation.

- -

If XSLT requires you to distinguish the browser, you can query the "xsl:vendor" system property. Mozilla's XSLT engine will report itself as "Transformiix" and Internet Explorer will return "Microsoft".

- -
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
-  <!-- Mozilla specific markup -->
-</xsl:if>
-<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
-  <!-- Internet Explorer specific markup -->
-</xsl:if>
-
- -

Mozilla also provides JavaScript interfaces for XSLT, allowing a Web site to complete XSLT transformations in memory. You can do this using the global XSLTProcessor JavaScript object. XSLTProcessor requires you to load the XML and XSLT files, because it needs their DOM documents. The XSLT document, imported by the XSLTProcessor, allows you to manipulate XSLT parameters.

- -

XSLTProcessor can generate a standalone document using transformToDocument(), or it can create a document fragment using transformToFragment(), which you can easily append into another DOM document. Below is an example:

- -
var xslStylesheet;
-var xsltProcessor = new XSLTProcessor();
-
-// load the xslt file, example1.xsl
-var myXMLHTTPRequest = new XMLHttpRequest();
-myXMLHTTPRequest.open("GET", "example1.xsl", false);
-myXMLHTTPRequest.send(null);
-
-// get the XML document and import it
-xslStylesheet = myXMLHTTPRequest.responseXML;
-
-xsltProcessor.importStylesheet(xslStylesheet);
-
-// load the xml file, example1.xml
-myXMLHTTPRequest = new XMLHttpRequest();
-myXMLHTTPRequest.open("GET", "example1.xml", false);
-myXMLHTTPRequest.send(null);
-
-var xmlSource = myXMLHTTPRequest.responseXML;
-
-var resultDocument = xsltProcessor.transformToDocument(xmlSource);
-
- -

After creating an XSLTProcessor, you load the XSLT file using XMLHttpRequest. The XMLHttpRequest's responseXML member contains the XML document of the XSLT file, which is passed to importStylesheet. You then use the XMLHttpRequest again to load the source XML document that must be transformed; that document is then passed to the transformToDocument method of XSLTProcessor. Table 8 features a list of XSLTProcessor methods.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table 8. XSLTProcessor methods
MethodDescription
void importStylesheet(Node styleSheet)Imports the XSLT stylesheet. The styleSheet argument is the root node of an XSLT stylesheet's DOM document.
DocumentFragment transformToFragment(Node source, Document owner)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and generates a DocumentFragment. owner specifies what DOM document the DocumentFragment should belong to, making it appendable to that DOM document.
Document transformToDocument(Node source)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and returns a standalone DOM document.
void setParameter(String namespaceURI, String localName, Variant value)Sets a parameter in the imported XSLT stylesheet.
Variant getParameter(String namespaceURI, String localName)Gets the value of a parameter in the imported XSLT stylesheet.
void removeParameter(String namespaceURI, String localName)Removes all set parameters from the imported XSLT stylesheet and makes them default to the XSLT-defined defaults.
void clearParameters()Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.
void reset()Removes all parameters and stylesheets.
- -
-

Original Document Information

- - -
diff --git a/files/ja/monitoring_http_activity/index.html b/files/ja/monitoring_http_activity/index.html deleted file mode 100644 index 6fd97a5a38..0000000000 --- a/files/ja/monitoring_http_activity/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: HTTP アクティビティのモニタリング -slug: Monitoring_HTTP_activity ---- -

 {{ gecko_minversion_header("1.9.2") }}

-

Gecko は {{ interface("nsIHttpActivityObserver") }} インターフェースを含んでおり、コールバックを受け取る形でHTTPトランザクションをリアルタイムにモニタすることができます。

-

HTTP activity observer を作る

-

HTTP上のアクティビティを観察するには、コード内で {{ interface("nsIHttpActivityObserver") }} を実装する必要があります。このインターフェースはとても単純で、 {{ ifmethod("nsIHttpActivityObserver", "observeActivity") }} という1つのメソッドを実装するだけです。このメソッドはHTTPチャンネルで対象となるアクションが発生するごとに呼び出されます。

-
// インターフェースへの参照を定義する
var nsIHttpActivityObserver = Components.interfaces.nsIHttpActivityObserver;
-
-var httpObserver =
-{
-    observeActivity: function(aHttpChannel, aActivityType, aActivitySubtype, aTimestamp, aExtraSizeData, aExtraStringData)
-    {
-      if (aActivityType == nsIHttpActivityObserver.ACTIVITY_TYPE_HTTP_TRANSACTION) {
-        switch(aActivitySubtype) {
-          case nsIHttpActivityObserver.ACTIVITY_SUBTYPE_RESPONSE_HEADER:
-            // received response header
-            break;
-          case nsIHttpActivityObserver.ACTIVITY_SUBTYPE_RESPONSE_COMPLETE:
-            // received complete HTTP response
-            break;
-        }
-      }
-    }
-};
-
-

次に、activity observer を実際に組み込む必要があります。これは {{ interface("nsIHttpActivityDistributor") }} の{{ ifmethod("nsIHttpActivityDistributor", "addObserver") }} メソッドを用いて行います：

-
var activityDistributor = Components.classes["@mozilla.org/network/http-activity-distributor;1"]
-                                    .getService(Components.interfaces.nsIHttpActivityDistributor);
-activityDistributor.addObserver(httpObserver);
-
-

アクティビティを観察する

-

観察可能なクラスは2つあります： ソケットレベルで発生するものと、HTTPトランザクションレベルで発生するものです。

-

観察可能なソケットのアクティビティ

-

{{ interface("nsIHttpActivityDistributor") }} メソッドに報告された アクティビティが ACTIVITY_TYPE_SOCKET_TRANSPORT の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは socket transport status code となります。

-

観察可能な HTTP のアクティビティ

-

アクティビティタイプ が ACTIVITY_TYPE_HTTP_TRANSACTION の場合、アクティビティサブタイプは activity subtype 定数 のうちの1つとなります。これらは送信されるHTTPリクエストヘッダやボディ、受信するHTTPヘッダなどを含むHTTPトランザクション全体を観察するための機能も含みます。

-

参照

- diff --git a/files/ja/monitoring_wifi_access_points/index.html b/files/ja/monitoring_wifi_access_points/index.html deleted file mode 100644 index 90ae306903..0000000000 --- a/files/ja/monitoring_wifi_access_points/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: WiFi アクセスポイントのモニタリング -slug: Monitoring_WiFi_access_points ---- -

{{ gecko_minversion_header("1.9.1") }}

-

UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた geolocation サービスのために導入されました。

-

例

-

この例では、利用可能なアクセスポイントの一覧を出力します。

-
注意: wiki の仕様上、 21 行目の表示がおかしくなることがあります。最初の "dd" は単純に "d" ですが、どういうわけか余分な1文字が付いてしまうようです。
-
<html>
-<head>
-<title>WiFi Monitor Example</title>
-<script>
-
-var count = 0;
-
-function test() {
-}
-
-test.prototype =
-{
-  onChange: function (accessPoints)
-  {
-    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
-    var d = document.getElementById("d");
-    d.innerHTML = "";
-
-    for (var i=0; i<accessPoints.length; i++) {
-      var a = accessPoints[i];
-      d.innerHTML += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>";
-    }
-
-    var c = document.getElementById("c");
-    c.innerHTML = "<p>" + count++ + "</p>";
-
-  },
-
-  onError: function (value) {
-     alert("error: " +value);
-  },
-
-  QueryInterface: function(iid) {
-        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
-        if (iid.equals(Components.interfaces.nsIWifiListener) ||
-            iid.equals(Components.interfaces.nsISupports))
-            return this;
-        throw Components.results.NS_ERROR_NO_INTERFACE;
-   },
-}
-
-  netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
-
-  var listener = new test();
-  var wifi_service = Components.classes["@mozilla.org/wifi/monitor;1"].getService(Components.interfaces.nsIWifiMonitor);
-
-  wifi_service.startWatching(listener);
-
-</script>
-</head>
-
-<body>
-<div id="d"><p></p></div>
-<div id="c"><p></p></div>
-</body>
-</html>
-
-

nsIWifiListener オブジェクト

-

上述のコードでは、まずアクセスポイントの一覧に変更が起こった時点で通知を受け取るリスナーオブジェクトのプロトタイプが作成されます。このオブジェクトは11行目から40行目にかけての部分に相当します。

-

onChange() メソッド(13～27行目)は UniversalXPConnect 特権を有効にすることから始まり、次にアクセスポイントの一覧を表示する div (d) の内部 HTML を消去します。19～22行目の for ループ部分では、 accessPoints 配列に渡されたアクセスポイントの一覧を、 MAC アドレス、 SSID 、信号強度に分けて div 要素内に HTML として出力します。

-

そして、 div (c) は一覧が読み込まれるたびに更新されます。

-

onError() メソッドは、単に受け取ったエラーコードを表示するメッセージボックスを開きます。

-

アクセスポイントのモニタリングを始める

-

アクセスポイントのモニタリングを始めるためには、まず44行目のようにリスナーオブジェクトのインスタンスを作成しなければなりません。その後、45行目で示すように WiFi モニターインターフェースへアクセスを行い、47行目で WiFi モニタリングサービスの startWatching() メソッドを呼び出すことでモニタリングが始まります。

-

参考文献

- -

 

diff --git a/files/ja/mozilla-central/index.html b/files/ja/mozilla-central/index.html deleted file mode 100644 index ffad18d62b..0000000000 --- a/files/ja/mozilla-central/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: mozilla-central -slug: mozilla-central -tags: - - Developing Mozilla - - Mercurial -translation_of: Mozilla/Developer_guide/mozilla-central ---- -

mozilla-central は Mozilla ソースコードの Mercurial リポジトリです: http://hg.mozilla.org/mozilla-central 。これは、Mozilla 2 コードベースに編入される変更のための、安定した統合ポイントです。 -

mozilla-central の Tinderbox ページは http://tinderbox.mozilla.org/showbui...?tree=Mozilla2 に位置しています。 -{{ Note("Mozilla CVS リポジトリとは異なり、mozilla-central には Firefox と XULRunner のソースのみが含まれています。他のアプリケーションやプロジェクト固有のコードについては別のリポジトリが使用されます。") }} -{{ 英語版章題("mozilla-central tree rules") }} -

-

mozilla-central ツリー規則

-

mozilla-central コードベースは、tier-1 プラットフォーム上では常に stable でなくてはなりません: -

- -

{{ 英語版章題("API Changes") }} -

-

API の変更

-

1.9.1 への準備のため、API の変更については以下の規則が適用されます: -

- -

この規則は 1.9.1 branch の後で変更されます。 -

{{ 英語版章題("Pushing changes to mozilla-central") }} -

-

mozilla-central に変更をプッシュする

-

CVS チェックインアクセス権をもつすべての開発者は、バグを投稿して、hg.mozilla.org にプッシュするための LDAP ログインの詳細が書かれた Email を受信してください。変更セットをサーバにプッシュするには <tt>hg push</tt> コマンドを使用します。 -

- -

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

-

参照

- -
-
-{{ languages( { "en": "en/Mozilla-central", "es": "es/Mozilla-central" } ) }} diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html deleted file mode 100644 index 5ed0d6580f..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/eval/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: devtools.inspectedWindow.eval() -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval ---- -
{{AddonSidebar()}}
- -

devtools が接続されているウィンドウで JavaScript を実行します。

- -

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。

- -

第1に、JavaScript はブラウザが通常 devtools コンソール実装で提供する特別なコマンドのセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。

- -

次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、ページスクリプトが読み込まれなかった場合に存在するページを表示するコンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり eval() を使用してこの保護を放棄する場合は非常に注意する必要があり、eval() を使用する必要がない限りコンテンツスクリプトを使用する必要があります。

- -

スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。

- -

"about:addons" などの特権ブラウザウィンドウで eval() を呼び出すことはできません。

- -

オプションで options パラメータを指定できます。options パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ options パラメータをサポートしていないことに注意してください。

- -

eval() 関数は、スクリプトの評価結果またはエラーを解決する Promise を返します。

- -

ヘルパー

- -

The script gets access to a number of objects that help the injected script interact with the developer tools. The following helpers are currently supported:

- -
-
$0
-
Contains a reference to the element that's currently selected in the devtools Inspector.
-
inspect()
-
Given an object, if it is an DOM element in the page, selects it in the devtools Inspector, otherwise it creates an object preview in the webconsole.
-
- -

See some examples.

- -

Syntax

- -
var evaluating = browser.devtools.inspectedWindow.eval(
-  expression,       // string
-  options           // object
-)
-
- -

Parameters

- -
-
expression
-
string. The JavaScript expression to evaluate. The string must evaluate to a object that can be represented as JSON, or an exception will be thrown. For example, expression must not evaluate to a function.
-
options{{optional_inline}}
-
object. Options for the function (Note that Firefox does not yet support this options), as follows:
-
-
-
frameURL{{optional_inline}}
-
string. The URL of the frame in which to evaluate the expression. If this is omitted, the expression is evaluated in the main frame of the window.
-
useContentScriptContext{{optional_inline}}
-
boolean. If true, evaluate the expression in the context of any content scripts that this extension has attached to the page. If you set this option, then you must have actually attached some content scripts to the page, or a Devtools error will be thrown.
-
contextSecurityOrigin {{optional_inline}}
-
string. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides useContentScriptContext.
-
-
-
- -

Return value

- -

A Promise that will be fulfilled with an array containing two elements.

- -

If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be undefined.

- -

If an error occurred, element 0 will be undefined, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:

- - - -

ブラウザの対応状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

- - - -

例

- -

This tests whether jQuery is defined in the inspected window, and logs the result. Note that this wouldn't work in a content script, because even if jQuery were defined, the content script would not see it.

- -
function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  console.log(result);
-  if (result[0] !== undefined) {
-    console.log(`jQuery: ${result[0]}`);
-  } else if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-const checkjQuery = "typeof jQuery != 'undefined'";
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(checkjQuery)
-    .then(handleResult);
-});
- -

Helper examples

- -

This uses the $0 helper to set the background color of the element that's currently selected in the Inspector:

- -
const evalButton = document.querySelector("#reddinate");
-const evalString = "$0.style.backgroundColor = 'red'";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-evalButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(evalString)
-    .then(handleResult);
-});
-
- -

This uses the inspect() helper to select the first <h1> element in the page:

- -
const inspectButton = document.querySelector("#inspect");
-const inspectString = "inspect(document.querySelector('h1'))";
-
-function handleError(error) {
-  if (error.isError) {
-    console.log(`Devtools error: ${error.code}`);
-  } else {
-    console.log(`JavaScript error: ${error.value}`);
-  }
-}
-
-function handleResult(result) {
-  if (result[1]) {
-    handleError(result[1]);
-  }
-}
-
-inspectButton.addEventListener("click", () => {
-  browser.devtools.inspectedWindow.eval(inspectString)
-    .then(handleResult);
-});
-
- -

{{WebExtExamples}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.devtools API.

- -

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html deleted file mode 100644 index e7a8f7181d..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: devtools.inspectedWindow -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.inspectedWindow -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow ---- -
{{AddonSidebar}}
- -
-

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.inspectedWindow API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は developer tools の拡張 を見てください。

- -

プロパティ

- -
-
devtools.inspectedWindow.tabId
-
開発ツールが付属しているウィンドウの ID
-
- -

Functions

- -
-
devtools.inspectedWindow.eval()
-
ターゲットウィンドウ内の  JavaScript を評価する
-
devtools.inspectedWindow.reload()
-
ターゲットウィンドウのドキュメントを再読み込みする
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.inspectedWindow API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html deleted file mode 100644 index 6837e95e36..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.inspectedwindow/tabid/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: devtools.inspectedWindow.tabId -slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId ---- -
{{AddonSidebar()}}
- -

devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。

- -

これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:

- -
// devtools-panel.js
-
-const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
-
-attachContentScriptButton.addEventListener("click", () => {
-  browser.runtime.sendMessage({
-    tabId: browser.devtools.inspectedWindow.tabId,
-    script: scriptToAttach
-  });
-});
- -
// background.js
-
-function handleMessage(request, sender, sendResponse) {
-  browser.tabs.executeScript(request.tabId, {
-    code: request.script
-  });
-}
-
-browser.runtime.onMessage.addListener(handleMessage);
- -

ブラウザの対応状況

- -

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

- - - -

{{WebExtExamples}}

- -
謝辞 - -

この API は Chromium の chrome.devtools API に基づいています。

- -

Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html deleted file mode 100644 index b5d97b1b1e..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.network/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: devtools.network -slug: Mozilla/Add-ons/WebExtensions/API/devtools.network -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.network -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network ---- -
{{AddonSidebar}}
- -
-

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.network API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

- -

Events

- -
-
devtools.network.onNavigated
-
ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.network")}}

- -

{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.network API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

- -

 

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html deleted file mode 100644 index efb826a25f..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/api/devtools.panels/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: devtools.panels -slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels -tags: - - API - - Add-ons - - Extensions - - Reference - - WebExtensions - - devtools.panels -translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels ---- -
{{AddonSidebar}}
- -
-

このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

-
- -

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

- -

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

- -

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

- -

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

- -

型

- -
-
devtools.panels.ElementsPanel
-
ブラウザーの開発ツールの HTML/CSS インスペクターを表す
-
devtools.panels.ExtensionPanel
-
拡張機能によって作られた開発ツールパネルを表す
-
devtools.panels.ExtensionSidebarPane
-
ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す
-
- -

プロパティ

- -
-
devtools.panels.elements
-
ElementsPanel オブジェクトの参照
-
devtools.panels.themeName
-
現在の開発ツールテーマの名前
-
- -

関数

- -
-
devtools.panels.create()
-
開発ツールを作成する
-
- -

イベント

- -
-
devtools.panels.onThemeChanged
-
開発ツールテーマが変更された時に発火する
-
- -

ブラウザ実装状況

- -

{{Compat("webextensions.api.devtools.panels", 2)}}

- -

{{WebExtExamples("h2")}}

- -
謝辞 - -

この API は Chromium の chrome.devtools.panels API に基づいています。

- -

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

- -

 

-
- - diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html new file mode 100644 index 0000000000..5ed0d6580f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.html @@ -0,0 +1,211 @@ +--- +title: devtools.inspectedWindow.eval() +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval +--- +
{{AddonSidebar()}}
+ +

devtools が接続されているウィンドウで JavaScript を実行します。

+ +

これは {{WebExtAPIRef("tabs.executeScript()")}} を使用してコンテンツスクリプトを添付することに似ていますが、主に2つの違いがあります。

+ +

第1に、JavaScript はブラウザが通常 devtools コンソール実装で提供する特別なコマンドのセットを使用できます。たとえば、"$0" を使用してインスペクタで現在選択されている要素を参照します。

+ +

次に、実行する JavaScript はページが読み込んだスクリプトによってページに加えられた変更を確認できます。これは、ページスクリプトが読み込まれなかった場合に存在するページを表示するコンテンツスクリプトとは対照的です。ただし、コンテンツスクリプトによって提供される分離は意図的なセキュリティ機能であり、DOM 関数とプロパティを再定義することにより、悪意のあるまたは単に非協力的な Web ページがWebExtensions API を混乱または破壊することを困難にすることを目的としています。つまり eval() を使用してこの保護を放棄する場合は非常に注意する必要があり、eval() を使用する必要がない限りコンテンツスクリプトを使用する必要があります。

+ +

スクリプトは、ページのメインフレームでデフォルトで評価されます。スクリプトは、JSON として表現できる値に評価する必要があります (たとえば、関数または関数を含むオブジェクトには評価されない可能性があることを意味します)。デフォルトでは、スクリプトはページに添付されたコンテンツスクリプトを表示しません。

+ +

"about:addons" などの特権ブラウザウィンドウで eval() を呼び出すことはできません。

+ +

オプションで options パラメータを指定できます。options パラメータには、異なるフレームまたは添付コンテンツスクリプトのコンテキストでスクリプトを評価するオプションが含まれます。Firefox はまだ options パラメータをサポートしていないことに注意してください。

+ +

eval() 関数は、スクリプトの評価結果またはエラーを解決する Promise を返します。

+ +

ヘルパー

+ +

The script gets access to a number of objects that help the injected script interact with the developer tools. The following helpers are currently supported:

+ +
+
$0
+
Contains a reference to the element that's currently selected in the devtools Inspector.
+
inspect()
+
Given an object, if it is an DOM element in the page, selects it in the devtools Inspector, otherwise it creates an object preview in the webconsole.
+
+ +

See some examples.

+ +

Syntax

+ +
var evaluating = browser.devtools.inspectedWindow.eval(
+  expression,       // string
+  options           // object
+)
+
+ +

Parameters

+ +
+
expression
+
string. The JavaScript expression to evaluate. The string must evaluate to a object that can be represented as JSON, or an exception will be thrown. For example, expression must not evaluate to a function.
+
options{{optional_inline}}
+
object. Options for the function (Note that Firefox does not yet support this options), as follows:
+
+
+
frameURL{{optional_inline}}
+
string. The URL of the frame in which to evaluate the expression. If this is omitted, the expression is evaluated in the main frame of the window.
+
useContentScriptContext{{optional_inline}}
+
boolean. If true, evaluate the expression in the context of any content scripts that this extension has attached to the page. If you set this option, then you must have actually attached some content scripts to the page, or a Devtools error will be thrown.
+
contextSecurityOrigin {{optional_inline}}
+
string. Evaluate the expression in the context of a content script attached by a different extension, whose origin matches the value given here. This overrides useContentScriptContext.
+
+
+
+ +

Return value

+ +

A Promise that will be fulfilled with an array containing two elements.

+ +

If no error occurred, element 0 will contain the result of evaluating the expression, and element 1 will be undefined.

+ +

If an error occurred, element 0 will be undefined, and element 1 will contain an object giving details about the error. Two different sorts of errors are distinguished:

+ + + +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.eval")}}

+ + + +

例

+ +

This tests whether jQuery is defined in the inspected window, and logs the result. Note that this wouldn't work in a content script, because even if jQuery were defined, the content script would not see it.

+ +
function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  console.log(result);
+  if (result[0] !== undefined) {
+    console.log(`jQuery: ${result[0]}`);
+  } else if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+const checkjQuery = "typeof jQuery != 'undefined'";
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(checkjQuery)
+    .then(handleResult);
+});
+ +

Helper examples

+ +

This uses the $0 helper to set the background color of the element that's currently selected in the Inspector:

+ +
const evalButton = document.querySelector("#reddinate");
+const evalString = "$0.style.backgroundColor = 'red'";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+evalButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(evalString)
+    .then(handleResult);
+});
+
+ +

This uses the inspect() helper to select the first <h1> element in the page:

+ +
const inspectButton = document.querySelector("#inspect");
+const inspectString = "inspect(document.querySelector('h1'))";
+
+function handleError(error) {
+  if (error.isError) {
+    console.log(`Devtools error: ${error.code}`);
+  } else {
+    console.log(`JavaScript error: ${error.value}`);
+  }
+}
+
+function handleResult(result) {
+  if (result[1]) {
+    handleError(result[1]);
+  }
+}
+
+inspectButton.addEventListener("click", () => {
+  browser.devtools.inspectedWindow.eval(inspectString)
+    .then(handleResult);
+});
+
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.devtools API.

+ +

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html new file mode 100644 index 0000000000..e7a8f7181d --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.html @@ -0,0 +1,79 @@ +--- +title: devtools.inspectedWindow +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.inspectedWindow +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.inspectedWindow API によって開発ツール拡張機能では開発ツールが割当てられたウィンドウと相互作用できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。詳細は developer tools の拡張 を見てください。

+ +

プロパティ

+ +
+
devtools.inspectedWindow.tabId
+
開発ツールが付属しているウィンドウの ID
+
+ +

Functions

+ +
+
devtools.inspectedWindow.eval()
+
ターゲットウィンドウ内の  JavaScript を評価する
+
devtools.inspectedWindow.reload()
+
ターゲットウィンドウのドキュメントを再読み込みする
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow")}}{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.inspectedWindow API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html new file mode 100644 index 0000000000..6837e95e36 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/tabid/index.html @@ -0,0 +1,77 @@ +--- +title: devtools.inspectedWindow.tabId +slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId +--- +
{{AddonSidebar()}}
+ +

devtools のこのインスタンスがアタッチされる {{WebExtAPIRef("tabs.Tab", "tab")}} の ID。番号で表されます。

+ +

これは拡張機能のバックグラウンドページに送信できるため、バックグラウンドページは {{WebExtAPIRef("tabs")}} API を使用してタブと対話できます:

+ +
// devtools-panel.js
+
+const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";
+
+attachContentScriptButton.addEventListener("click", () => {
+  browser.runtime.sendMessage({
+    tabId: browser.devtools.inspectedWindow.tabId,
+    script: scriptToAttach
+  });
+});
+ +
// background.js
+
+function handleMessage(request, sender, sendResponse) {
+  browser.tabs.executeScript(request.tabId, {
+    code: request.script
+  });
+}
+
+browser.runtime.onMessage.addListener(handleMessage);
+ +

ブラウザの対応状況

+ +

{{Compat("webextensions.api.devtools.inspectedWindow.tabId")}}

+ + + +

{{WebExtExamples}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools API に基づいています。

+ +

Microsoft Edge の互換性データは Microsoft Corporation によって提供され、Creative Commons Attribution 3.0 United States License に含まれています。

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html new file mode 100644 index 0000000000..b5d97b1b1e --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/network/index.html @@ -0,0 +1,74 @@ +--- +title: devtools.network +slug: Mozilla/Add-ons/WebExtensions/API/devtools.network +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.network +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.network +--- +
{{AddonSidebar}}
+ +
+

このページは Firefox 54 に存在する WebExtensions devtools APIs を記述しています。このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.network API によって開発ツール拡張機能では開発ツールが付属しているウィンドウ(インスペクト対象ウィンドウ)に関連するネットワークリクエストの情報を取得できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えば拡張機能が作ったパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

Events

+ +
+
devtools.network.onNavigated
+
ユーザーが新規ページのインスペクト対象ウィンドウに移動した時に発火します
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.network")}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.network API に基づいています。また、このドキュメントは bookmarks.json における Chromium のコードに基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html new file mode 100644 index 0000000000..efb826a25f --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/api/devtools/panels/index.html @@ -0,0 +1,105 @@ +--- +title: devtools.panels +slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels +tags: + - API + - Add-ons + - Extensions + - Reference + - WebExtensions + - devtools.panels +translation_of: Mozilla/Add-ons/WebExtensions/API/devtools.panels +--- +
{{AddonSidebar}}
+ +
+

このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

+
+ +

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

+ +

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

+ +

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

+ +

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

+ +

型

+ +
+
devtools.panels.ElementsPanel
+
ブラウザーの開発ツールの HTML/CSS インスペクターを表す
+
devtools.panels.ExtensionPanel
+
拡張機能によって作られた開発ツールパネルを表す
+
devtools.panels.ExtensionSidebarPane
+
ブラウザーの開発ツールの HTML/CSS インスペクターに、拡張機能が追加したペインを表す
+
+ +

プロパティ

+ +
+
devtools.panels.elements
+
ElementsPanel オブジェクトの参照
+
devtools.panels.themeName
+
現在の開発ツールテーマの名前
+
+ +

関数

+ +
+
devtools.panels.create()
+
開発ツールを作成する
+
+ +

イベント

+ +
+
devtools.panels.onThemeChanged
+
開発ツールテーマが変更された時に発火する
+
+ +

ブラウザ実装状況

+ +

{{Compat("webextensions.api.devtools.panels", 2)}}

+ +

{{WebExtExamples("h2")}}

+ +
謝辞 + +

この API は Chromium の chrome.devtools.panels API に基づいています。

+ +

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

+ +

 

+
+ + diff --git a/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html new file mode 100644 index 0000000000..a6e6fd4bc6 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.html @@ -0,0 +1,21 @@ +--- +title: ThunderbirdにおけるWebExtensionsによるアドイン開発 +slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 +translation_of: Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird +--- +

{{AddonSidebar}}{{Draft}}

+ +

Thunderbirdのアドイン開発はFirefoxと同様の方法でコーディングすることが可能です。
+ テキストエディタや、あなたの選んだコーディングツールで。

+ +

APIの違い

+ +

両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。
+ 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

+ +

参考

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html b/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html deleted file mode 100644 index 4afb4fe00e..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/packaging_and_installation/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: パッケージ化とインストール -slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation ---- -
{{AddonSidebar}}
- -

この記事では、WebExtension を Firefox にインストールする方法を 2 つ紹介します。

- - - -

{{英語版章題("Loading from disk")}}

- -

ディスクから読み込む

- -

WebExtension を Firefox で動作させるには、この方法が最もシンプルです。また、ブートストラップ型拡張機能 や Add-on SDK を使ったアドオン といった、再起動の要らないアドオンはすべてこの方法でインストールできます。

- -

ここでは Firefox 45 以降が必要となります。

- -

ディスクから読み込むには、

- - - -

これでアドオンがインストールされ、Firefox を再起動するまで有効になります。

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

{{英語版章題("Updating a temporary add-on")}}

- -

一時的なアドオンの更新

- -

この方法でアドオンをインストールした場合、アドオンのファイルを更新すると何が起きるでしょうか？

- -

{{英語版章題("Before Firefox 48")}}

- -

Firefox 47 以前

- - - -
-

Firefox 47 以前では、Firefox を再起動せずに「一時的なアドオンを読み込む」をクリックしても更新は反映されない ことに注意してください。

-
- -

{{英語版章題("Firefox 48 onwards")}}

- -

Firefox 48 以降

- - - -
-

Firefox 48 のみに関する注意点として、about:debugging と about:addons に表示されるアドオンの名前と説明文は、「リロード」ボタンをクリックしても更新されません。この問題は Firefox 49 で修正されます。

-
- -

{{英語版章題("Package and install")}}

- -

パッケージ化してインストールする

- -

ディスクからの読込は 開発 / テスト / デバッグ のサイクルにおいては有効です。しかし、アドオンを他の人と共有したい場合は、アドオンを インストール可能な形式にパッケージ化する必要があります。

- -

{{英語版章題("Packaging")}}

- -

パッケージ化

- -

Firefox のアドオンは XPI ファイルでパッケージ化されます。XPI ファイルとは単なる ZIP ファイルですが、ファイルの拡張子は ".xpi" となります。

- -

一つ注意しなければならないのは、アドオンのファイルを含んだディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルとする必要がある点です。

- -

Windows

- -
    -
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. -
  2. ファイルすべてを選択します。
    3. -
  3. 右クリックして "送る" → "圧縮（zip 形式）フォルダー" を選択します。
    4. -
  4. 作成されたファイルの名前を "something.zip" から "something.xpi" に変更します。
    5. -
- -

- -

Mac OS X

- -
    -
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. -
  2. ファイルすべてを選択します。
    3. -
  3. 右クリックして "n 項目を圧縮" を選択します。
    4. -
  4. 作成されたファイルの名前を Archive.zip から something.xpi に変更します。
    5. -
- -

- -

Linux / Mac OS X Terminal

- -
    -
  1. cd path/to/my-addon/
    2. -
  2. zip -r ../my-addon.xpi *
    3. -
- -

{{英語版章題("Installation")}}

- -

インストール

- -

XPI ファイルをインストールする前に、次のどちらかの手順を踏む必要があります。

- - - -

{{英語版章題("Getting your add-on signed")}}

- -

アドオンに署名する

- -

XPI ファイルに署名するには、Signing and distributing your Add-on の記事を参照してください。

- -

{{英語版章題("Enabling unsigned add-ons")}}

- -

未署名のアドオンを有効にする

- -

未署名のアドオンを有効にするには、以下の手順に従ってください。

- - - -

{{EmbedYouTube("HgtBYDWtH4w")}}

- -

{{英語版章題("Installing an XPI in Firefox")}}

- -

XPI ファイルを Firefox にインストールする

- -

XPI ファイルに署名した場合でも、署名の制約を無効化した場合でも、XPI ファイルをインストールする手順はどちらも同じです。

- -
    -
  1. about:addons に移動します。
    2. -
  2. XPI ファイルをページにドラッグ & ドロップするか、歯車アイコンのメニューを開いて "ファイルからアドオンをインストール" を選択します。
    3. -
  3. 表示されたダイアログで "インストール" をクリックします。
    4. -
- -

他にも、"ファイル" → "開く" から XPI ファイルを選択したり、Control+O (Command+O) で選択することも可能です。

- -

{{英語版章題("Installing your extension of Firefox OS")}}

- -

アドオンを Firefox OS にインストールする

- -

USB か Wifi で接続されたデスクトップ PC で WebIDE を起動すれば、WebIDE からアドオンをインストールすることができます。WebIDE で "path/to/my-extension" をパッケージ型アプリとして開いてください。

- -

manifest.json の認証状況が正しければ、接続されたデバイス（Firefox OS の nightly ビルドで動作しているもの）にアドオンをインストールし、実行することができます。

- -

このアドオンの初回実行時は、Firefox OS のデバイスで Settings → Add-ons で有効にする必要があります。

- -

{{英語版章題("Troubleshooting")}}

- -

トラブルシューティング

- -

起こりやすい問題には以下のようなものがあります。

- -

"This add-on could not be installed because it has not been verified."

- - - -

"This add-on could not be installed because it appears to be corrupt."

- - - -

{{英語版章題("Nothing happens")}}

- -

何も起こらない

- - - -

{{英語版章題("Check the console")}}

- -

コンソールを確認する

- -

アドオンが解凍されたり読み込まれる過程に関して、他のエラーメッセージが ブラウザコンソール に表示されている場合があります。

diff --git a/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html b/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html deleted file mode 100644 index 3baef65043..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/porting_from_google_chrome/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Google Chrome からの移行 -slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension ---- -
{{AddonSidebar}}
- -

WebExtension API で開発する拡張機能は、ブラウザー間で互換性が維持されるように設計されており、大半は Google Chrome や Opera でサポートされている extension API とコード互換性があります。これらのブラウザー向けに書かれた拡張機能はほとんどの場合、少しの変更を加えるだけで Firefox でも動くようになります。ほぼすべての WebExtension API は、Chrome と同様に chrome 名前空間のコールバック関数を使ってサポートされています。chrome 名前空間でサポートされない唯一の API は、わざと Chrome と互換性がないものです。こうしたまれな場合は、API ドキュメントページでは明示的に、browser 名前空間だけでサポートされることを述べています。Chrome や Opera から拡張機能を移行する手順は下記の通り:

- -
    -
  1. manifest.json の設定項目や使用している WebExtensionAPI が Chrome との非互換性リファレンスに載っているか確認します。もし Firefox でサポートされていない設定項目や API を利用している場合、まだ移行できないかもしれません。 Mozilla はこの手順を自動化するサービスを次にて提供しています: https://www.extensiontest.com/.
    2. -
  2. 拡張機能を Firefox にインストールしてテストします。
    3. -
  3. もし何か問題が見つかったら、 dev-addons mailing list または IRC の  #webextensions に連絡してください。
    4. -
  4. アドオンの署名と配布を行うため、アドオンを AMO に送ります。
    5. -
- -

展開された拡張機能をロードするのに Chrome のコマンドラインオプションを使用していた場合、開発用に Firefox へ自動的に仮インストールを行う web-ext ツールを使用してみてください。  

- - - -
diff --git a/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html b/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html new file mode 100644 index 0000000000..751de9fe15 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/prerequisites/index.html @@ -0,0 +1,17 @@ +--- +title: 前提条件 +slug: Mozilla/Add-ons/WebExtensions/前提条件 +translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites +--- +

WebExtension API を使って開発するには、いくつかの小さいセットアップが必要です。

+ + diff --git a/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html deleted file mode 100644 index 8b78f7bf11..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/publishing_your_webextension/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 拡張機能をパッケージ化する -slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ ---- -
{{AddonSidebar}}
- -

 

- -
-
-

Firefox ではパッケージされた拡張機能を "XPI ファイル" と呼び、これは単に色々な拡張機能を集めた ZIP ファイルです。

- -

AMO にアップロードする時に、XPI 拡張機能を使う必要はありません。

-
-
- -

 

- -

開発期間中、拡張機能は manifest.json ファイルとその他の必要なファイル—スクリプト、アイコン、HTML 文書などを含む 1 つのディレクトリで構成されるでしょう。AMO にアップロードするにはこれを 1 つの zip ファイルにまとめる必要があります。

- -

web-ext を使っている場合、拡張機能をパッケージ化するのに web-ext build を使います。その他の場合、下記の OS ごとの手順に従ってください。

- -
-

Tip. ZIP ファイルは拡張機能を構成するファイル自身でなくてはならず、これらを含んだディレクトリであってはいけません。

-
- -

Windows

- -
    -
  1. あなたの拡張機能を格納したフォルダを開きます。
    2. -
  2. すべてのファイルを選択します。
    3. -
  3. 右クリックメニューの「送る」 から zip圧縮を選びます。
    4. -
- -

- -

Mac OS X

- -
    -
  1. あなたの拡張機能を格納したディレクトリを開きます。
    2. -
  2. すべてのファイルを選択します。
    3. -
  3. 右クリックメニューから圧縮を選びます。
    4. -
- -

- -
-
コマンドについて http://www.info-zip.org/mans/zip.html.
-
- -

Linux / Mac OS X ターミナル

- -
    -
  1. ターミナルを開きます。
    2. -
  2. 拡張機能を含むディレクトリを開きます、そのコマンドは
    - cd path/to/my-extension/
    3. -
  3. ディレクトリの中身を ZIP します、そのコマンドは
    - zip -r -FS ../my-extension.zip *
    4. -
- -

 

- -

 

- -

 

diff --git "a/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" "b/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" deleted file mode 100644 index a6e6fd4bc6..0000000000 --- "a/files/ja/mozilla/add-ons/webextensions/thunderbird\343\201\253\343\201\212\343\201\221\343\202\213webextensions\343\201\253\343\202\210\343\202\213\343\202\242\343\203\211\343\202\244\343\203\263\351\226\213\347\231\272/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: ThunderbirdにおけるWebExtensionsによるアドイン開発 -slug: Mozilla/Add-ons/WebExtensions/ThunderbirdにおけるWebExtensionsによるアドイン開発 -translation_of: Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird ---- -

{{AddonSidebar}}{{Draft}}

- -

Thunderbirdのアドイン開発はFirefoxと同様の方法でコーディングすることが可能です。
- テキストエディタや、あなたの選んだコーディングツールで。

- -

APIの違い

- -

両者ともGeckoベースであるため、いくつかの違いはあるものの、Thunderbirdでは、Firefoxで使えるAPIの多くをサポートしています。
- 詳細は、browser compatibility for manifest.json と browser support for JavaScript APIsを参照してください。

- -

参考

- - diff --git a/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html b/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html deleted file mode 100644 index 3eb93ad7c9..0000000000 --- a/files/ja/mozilla/add-ons/webextensions/walkthrough/index.html +++ /dev/null @@ -1,451 +0,0 @@ ---- -title: 2 つめの拡張機能 -slug: Mozilla/Add-ons/WebExtensions/Walkthrough -tags: - - WebExtensions -translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension ---- -
{{AddonSidebar}} -

初めての拡張機能を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。

- -

この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。

- -

これらの機能を以下のように実装していきます。

- -
    -
  • ブラウザーアクション （Firefox のツールバーに表示させるボタン）を定義
    - このボタン用に次のものを用意します。 -
      -
    • "beasts-32.png" というアイコン
      • -
    • ボタン押下時に開くポップアップ（HTML / CSS / JavaScript で記述）
      • -
    -
    • -
  • 拡張機能のアイコンを定義（ファイル名: "beasts-48.png"）。これはアドオンマネージャーに表示されます。
    • -
  • ウェブページに読み込ませるコンテンツスクリプト "beastify.js" を作成
    - このスクリプトによってウェブページが実際に変更されます。
    • -
  • ウェブページを置き換える動物の画像をパッケージ化
    - 画像を "web-accessible なリソース" とし、ウェブページから参照できるようにします。
    • -
- -

この拡張機能は次のような全体構成になっています。

- -

- -

この拡張機能はシンプルですが、WebExtensions API の基本的なコンセプトを多く含んでいます。

- -
    -
  • ツールバーにボタンを追加する
    • -
  • HTML / CSS / JavaScript を用いてポップアップのパネルを定義する
    • -
  • ウェブページにコンテンツスクリプトを差し込む
    • -
  • 拡張機能の中においてコンテンツスクリプトと他のスクリプトとを通信させる
    • -
  • ウェブページで用いるリソースを拡張機能にパッケージ化する
    • -
- -

ソースコード一式は GitHub で参照できます 。

- -

この拡張機能を作成するには、Firefox 45 以上が必要です。

- -

拡張機能を書く

- -

新しいディレクトリーを作成し、そのディレクトリーに移動します。

- -
mkdir beastify
-cd beastify
- -

manifest.json

- -

それでは、"beastify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

- -
{
-
-  "manifest_version": 2,
-  "name": "Beastify",
-  "version": "1.0",
-
-  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
-  "icons": {
-    "48": "icons/beasts-48.png"
-  },
-
-  "permissions": [
-    "activeTab"
-  ],
-
-  "browser_action": {
-    "default_icon": "icons/beasts-32.png",
-    "default_title": "Beastify",
-    "default_popup": "popup/choose_beast.html"
-  },
-
-  "web_accessible_resources": [
-    "beasts/frog.jpg",
-    "beasts/turtle.jpg",
-    "beasts/snake.jpg"
-  ]
-
-}
- -
    -
  • 最初の 3 つのキー manifest_version、name、version は必須であり、拡張機能の基本的なメタデータを指定します
    • -
  • description と homepage_url は省略可能ですが、設定しておくことをお勧めします。これは拡張機能についての役立つ情報となります
    • -
  • icons は省略可能ですが、設定しておくことをお勧めします。この値は拡張機能のアイコンを指定するものであり、アイコンはアドオンマネージャーに表示されます
    • -
  • permissions は拡張機能に必要なパーミッションのリストです。ここでは activeTab パーミッション を要請しています
    • -
  • browser_action はツールバーのボタンを指定するものです。ここでは 3 つの情報を指定しています -
      -
    • default_icon ではボタンのアイコンを指定します（必須項目）
      • -
    • default_title ではツールチップの文字列を指定します（省略可）
      • -
    • default_popup ではユーザーがボタンをクリックした際に表示されるポップアップを指定します。今回はポップアップを表示させたいので、拡張機能に含める HTML ファイルを defualt_popup キーで指定しています
      • -
    -
    • -
  • web_accessible_resources はウェブページからアクセスしたいファイルのリストです。この拡張機能では、拡張機能に同梱した画像でウェブページを置き換えるため、画像をウェブページからアクセス可能にする必要があります
    • -
- -

パスはすべて manifest.json 自身からの相対パスで指定することに注意します。

- -

アイコン

- -

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーで拡張機能のリスト横に表示されます（アドオンマネージャーは "about:addons" の URL から確認できます）。今回の manifest.json では "icons/beasts-48.png" を用意していると宣言しています。

- -

"icons" ディレクトリーを作成して、そこにアイコンを "beasts-48.png" という名前で 保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Aha-Soft’s Free Retina iconset から引用したものであり、該当する ライセンス の下で使用しています）。

- -

アイコンを自分で用意する場合 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイに 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

- -
"icons": {
-  "48": "icons/beasts-48.png",
-  "96": "icons/beasts-96.png"
-}
- -

ツールバーのボタン

- -

ツールバーのボタンにもアイコンが必要です。今回の manifest.json では "icons/beasts-32.png" を用意していると宣言しています。

- -

アイコンを "beasts-32.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは IconBeast Lite のアイコン集 から引用したものであり、該当する ライセンス の下で使用しています）。

- -

ポップアップを使わない場合、ユーザーがボタンをクリックした際にはクリックイベントが拡張機能に向けて送出されます。ポップアップを使う場合にはクリックイベントは送出されず、代わりにポップアップが開きます。今回はポップアップが必要なので、次の項で作成しましょう。

- -

ポップアップ

- -

今回のポップアップでは、ユーザーが 3 つの動物から 1 つ選択できる機能を持つこととします。

- -

拡張機能のルートディレクトリー配下に "popup" というディレクトリーを新しく作成します。ここにはポップアップ用のコードを保管します。ポップアップは次の 3 ファイルから構成されます。

- -
    -
  • choose_beast.html パネルのコンテンツを定義する
    • -
  • choose_beast.css コンテンツのスタイルを指定する
    • -
  • choose_beast.js アクティブなタブでコンテンツスクリプトを実行し、ユーザーの選択を処理する
    • -
- -
mkdir popup
-cd popup
-touch choose_beast.html choose_beast.css choose_beast.js
- -

choose_beast.html

- -

HTML ファイルは次のようになります。

- -
<!DOCTYPE html>
-
-<html>
-  <head>
-    <meta charset="utf-8">
-    <link rel="stylesheet" href="choose_beast.css"/>
-  </head>
-
-<body>
-  <div id="popup-content">
-    <div class="button beast">Frog</div>
-    <div class="button beast">Turtle</div>
-    <div class="button beast">Snake</div>
-    <div class="button reset">Reset</div>
-  </div>
-  <div id="error-content" class="hidden">
-    <p>Can't beastify this web page.</p><p>Try a different page.</p>
-  </div>
-  <script src="choose_beast.js"></script>
-</body>
-
-</html>
- -

"popup-content" という ID の <div> 要素があって、動物の選択をする要素が入っています。"error-content" という ID の <div> 要素と "hidden" クラスもあります。それはポップアップの初期化に問題がある場合に使います。

- -

通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。

- -

choose_beast.css

- -

この CSS ではポップアップのサイズを固定し、3 つの選択肢がポップアップを埋めるようにし、基本的なスタイリングを施しています。また要素を class="hidden" で隠してもいます: つまり "error-content" <div> は既定では隠れています。

- -
html, body {
-  width: 100px;
-}
-
-.hidden {
-  display: none;
-}
-
-.button {
-  margin: 3% auto;
-  padding: 4px;
-  text-align: center;
-  font-size: 1.5em;
-  cursor: pointer;
-}
-
-.beast:hover {
-  background-color: #CFF2F2;
-}
-
-.beast {
-  background-color: #E5F2F2;
-}
-
-.reset {
-  background-color: #FBFBC9;
-}
-
-.reset:hover {
-  background-color: #EAEA9D;
-}
- -

choose_beast.js

- -

これがポップアップ用の JavaScript です:

- -

-/**
- * ページのすべてを隠す CSS、ただし
- * "beastify-image" クラスを持つ要素は除く
- */
-const hidePage = `body > :not(.beastify-image) {
-                    display: none;
-                  }`;
-
-/**
- * ボタンクリックをリッスンし、ページ内のコンテンツスクリプトに
- * 適切なメッセージを送る
- */
-function listenForClicks() {
-  document.addEventListener("click", (e) => {
-
-    /**
-     * 動物の名前を受け取って、対応する画像の URL を取得する
-     */
-    function beastNameToURL(beastName) {
-      switch (beastName) {
-        case "Frog":
-          return browser.extension.getURL("beasts/frog.jpg");
-        case "Snake":
-          return browser.extension.getURL("beasts/snake.jpg");
-        case "Turtle":
-          return browser.extension.getURL("beasts/turtle.jpg");
-      }
-    }
-
-    /**
-     * アクティブなタブにページを隠す CSS を挿入して
-     * 動物の URL を取得し、
-     * アクティブなタブのコンテンツスクリプトに "beastify" メッセージを送る
-     */
-    function beastify(tabs) {
-      browser.tabs.insertCSS({code: hidePage}).then(() => {
-        let url = beastNameToURL(e.target.textContent);
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "beastify",
-          beastURL: url
-        });
-      });
-    }
-
-    /**
-     * アクティブなタブからページを隠す CSS を削除し、
-     * アクティブなタブのコンテンツスクリプトに "reset" メッセージを送る
-     */
-    function reset(tabs) {
-      browser.tabs.removeCSS({code: hidePage}).then(() => {
-        browser.tabs.sendMessage(tabs[0].id, {
-          command: "reset",
-        });
-      });
-    }
-
-    /**
-     * ただコンソールにエラーをログ出力する
-     */
-    function reportError(error) {
-      console.error(`Could not beastify: ${error}`);
-    }
-
-    /**
-     * アクティブなタブを取得し、
-     * "beastify()" か "reset()" を適切に呼び出す
-     */
-    if (e.target.classList.contains("beast")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(beastify)
-        .catch(reportError);
-    }
-    else if (e.target.classList.contains("reset")) {
-      browser.tabs.query({active: true, currentWindow: true})
-        .then(reset)
-        .catch(reportError);
-    }
-  });
-}
-
-/**
- * スクリプトにエラーがあった。
- * ポップアップのエラーメッセージを表示し、通常の UI を隠す。
- */
-function reportExecuteScriptError(error) {
-  document.querySelector("#popup-content").classList.add("hidden");
-  document.querySelector("#error-content").classList.remove("hidden");
-  console.error(`Failed to execute beastify content script: ${error.message}`);
-}
-
-/**
- * ポップアップを読み込んだ時、コンテンツスクリプトをアクティブなタブに挿入し、
- * クリックハンドラーを追加する。
- * スクリプトの挿入ができない場合、エラー処理をする。
- */
-browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
-.then(listenForClicks)
-.catch(reportExecuteScriptError);
- -

開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は browser.tabs.executeScript() API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。

- -

browser.tabs.executeScript() の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、addons.mozilla.org ドメイン内のページでも実行できません。失敗した場合、reportExecuteScriptError() は "popup-content" <div> を隠して、"error-content" <div> を表示し、エラーを console にログ出力します。

- -

コンテンツスクリプトの実行が成功したら、listenForClicks() を呼び出します。これはポップアップのクリックをリッスンします。

- -
    -
  • class="beast" の付いたボタンがクリックされたら、beastify() を呼び出す
    • -
  • class="reset" の付いたボタンがクリックされたら、reset() を呼び出す
    • -
- -

beastify() 関数は次の 3 つを行います:

- -
    -
  • 特定の動物画像を指す URL をボタンクリックに割り当てる
    • -
  • CSS を挿入してページの全コンテンツを隠し、その手段は browser.tabs.insertCSS() API
    • -
  • コンテンツスクリプトに "beastify" 送り、その手段は browser.tabs.sendMessage() API。ページを動物化するか尋ねて、動物画像への URL を渡す
    • -
- -

reset() 関数は動物化を取り消す:

- -
    -
  • 追加した CSS を削除し、その手段は browser.tabs.removeCSS() API
    • -
  • コンテンツスクリプトにページをリセットする "reset" メッセージを送る
    • -
- -

コンテンツスクリプト

- -

拡張機能のルートディレクトリー配下に "content_scripts" というディレクトリーを新しく作成します。続いてそこに "beastify.js" という名前のファイルを作成し、下記のスクリプトを記述します。

- -
(function() {
-  /**
-   * グローバルなガード変数をチェック、設定する。
-   * コンテンツスクリプトが再び同じページに挿入された場合、
-   * 次は何もしない。
-   */
-  if (window.hasRun) {
-    return;
-  }
-  window.hasRun = true;
-
-  /**
-   * 動物の画像の URL を受け取り、既存の動物をすべて削除し、次に
-   * 画像を指す IMG 要素の作成・スタイル適用を行い、
-   * 作成したノードをドキュメント内に挿入する
-   */
-  function insertBeast(beastURL) {
-    removeExistingBeasts();
-    let beastImage = document.createElement("img");
-    beastImage.setAttribute("src", beastURL);
-    beastImage.style.height = "100vh";
-    beastImage.className = "beastify-image";
-    document.body.appendChild(beastImage);
-  }
-
-  /**
-   * ページからすべての動物を削除する
-   */
-  function removeExistingBeasts() {
-    let existingBeasts = document.querySelectorAll(".beastify-image");
-    for (let beast of existingBeasts) {
-      beast.remove();
-  }
-  }
-
-  /**
-   * バックグラウンドスクリプトからのメッセージをリッスンし、
-   * "beastify()" か "reset()" を呼び出す。
-   */
-  browser.runtime.onMessage.addListener((message) => {
-    if (message.command === "beastify") {
-      insertBeast(message.beastURL);
-    } else if (message.command === "reset") {
-      removeExistingBeasts();
-    }
-  });
-
-})();
- -

このコンテンツスクリプトが最初にすることは、グローバル変数の window.hasRun のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ window.hasRun をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。

- -

その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は browser.runtime.onMessage API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"

- -
    -
  • メッセージが "beastify" なら、動物画像を指す URL が含まれるはずです。以前の "beastify" 呼び出しで追加された動物をすべて削除して、<img> 要素を作成、追加して、その src 属性に動物の URL をセットします。
    • -
  • メッセージが "reset" なら、ただ追加された動物をすべて削除します。
    • -
- -

動物

- -

最後に、動物の画像を用意しておく必要があります。

- -

拡張機能のルートディレクトリー配下に   "beasts" という名前のディレクトリーを新しく作成し、その中に 3 つの画像を適切な名前で保存します。画像は GitHub リポジトリ から、またはここからでも取得できます。

- -

- -

動かしてみよう

- -

正しいファイルが正しい場所にあるかどうか、もう一度確認してください。

- -
beastify/
-
-    beasts/
-        frog.jpg
-        snake.jpg
-        turtle.jpg
-
-    content_scripts/
-        beastify.js
-
-    icons/
-        beasts-32.png
-        beasts-48.png
-
-    popup/
-        choose_beast.css
-        choose_beast.html
-        choose_beast.js
-
-    manifest.json
- -

Firefox 45 以降では、拡張機能をディスクから一時的にインストールできるようになりました。

- -

Firefox で "about:debugging" を開き、"一時的なアドオンを読み込む" をクリックし、自分で作成した manifest.json ファイルを選択してください。拡張機能のアイコンが Firefox のツールバーに表示されているはずです。

- -

{{EmbedYouTube("sAM78GU4P34")}}

- -

適当なウェブページを開き、拡張機能のアイコンをクリックし、動物を選択してください。するとウェブページが動物の画像に置き換わるはずです。

- -

{{EmbedYouTube("YMQXyAQSiE8")}}

- -

コマンドラインから開発する

- -

仮インストールを web-ext ツールを用いて自動化できます。次を試してください:

- -
cd beastify
-web-ext run
-
diff --git a/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html new file mode 100644 index 0000000000..3eb93ad7c9 --- /dev/null +++ b/files/ja/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -0,0 +1,451 @@ +--- +title: 2 つめの拡張機能 +slug: Mozilla/Add-ons/WebExtensions/Walkthrough +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +
{{AddonSidebar}} +

初めての拡張機能を一通り読んでいる場合、既に拡張機能の書き方を知っていることと思います。この記事では、API の使い方をより詳しく説明するため、前回よりも少し複雑なアドオンを書いてみます。

+ +

この拡張機能では Firefox のツールバーにボタンを新しく追加します。ユーザーがこのボタンをクリックすると、動物を選択できるポップアップが表示されます。ユーザーが動物を選択すると、ウェブページのコンテンツが選択した動物の画像に置き換わります。

+ +

これらの機能を以下のように実装していきます。

+ +
    +
  • ブラウザーアクション （Firefox のツールバーに表示させるボタン）を定義
    + このボタン用に次のものを用意します。 +
      +
    • "beasts-32.png" というアイコン
      • +
    • ボタン押下時に開くポップアップ（HTML / CSS / JavaScript で記述）
      • +
    +
    • +
  • 拡張機能のアイコンを定義（ファイル名: "beasts-48.png"）。これはアドオンマネージャーに表示されます。
    • +
  • ウェブページに読み込ませるコンテンツスクリプト "beastify.js" を作成
    + このスクリプトによってウェブページが実際に変更されます。
    • +
  • ウェブページを置き換える動物の画像をパッケージ化
    + 画像を "web-accessible なリソース" とし、ウェブページから参照できるようにします。
    • +
+ +

この拡張機能は次のような全体構成になっています。

+ +

+ +

この拡張機能はシンプルですが、WebExtensions API の基本的なコンセプトを多く含んでいます。

+ +
    +
  • ツールバーにボタンを追加する
    • +
  • HTML / CSS / JavaScript を用いてポップアップのパネルを定義する
    • +
  • ウェブページにコンテンツスクリプトを差し込む
    • +
  • 拡張機能の中においてコンテンツスクリプトと他のスクリプトとを通信させる
    • +
  • ウェブページで用いるリソースを拡張機能にパッケージ化する
    • +
+ +

ソースコード一式は GitHub で参照できます 。

+ +

この拡張機能を作成するには、Firefox 45 以上が必要です。

+ +

拡張機能を書く

+ +

新しいディレクトリーを作成し、そのディレクトリーに移動します。

+ +
mkdir beastify
+cd beastify
+ +

manifest.json

+ +

それでは、"beastify" ディレクトリー配下に新しいファイル "manifest.json" を作成します。以下の内容を書き込んで保存してください。

+ +
{
+
+  "manifest_version": 2,
+  "name": "Beastify",
+  "version": "1.0",
+
+  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/ja/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "icons": {
+    "48": "icons/beasts-48.png"
+  },
+
+  "permissions": [
+    "activeTab"
+  ],
+
+  "browser_action": {
+    "default_icon": "icons/beasts-32.png",
+    "default_title": "Beastify",
+    "default_popup": "popup/choose_beast.html"
+  },
+
+  "web_accessible_resources": [
+    "beasts/frog.jpg",
+    "beasts/turtle.jpg",
+    "beasts/snake.jpg"
+  ]
+
+}
+ +
    +
  • 最初の 3 つのキー manifest_version、name、version は必須であり、拡張機能の基本的なメタデータを指定します
    • +
  • description と homepage_url は省略可能ですが、設定しておくことをお勧めします。これは拡張機能についての役立つ情報となります
    • +
  • icons は省略可能ですが、設定しておくことをお勧めします。この値は拡張機能のアイコンを指定するものであり、アイコンはアドオンマネージャーに表示されます
    • +
  • permissions は拡張機能に必要なパーミッションのリストです。ここでは activeTab パーミッション を要請しています
    • +
  • browser_action はツールバーのボタンを指定するものです。ここでは 3 つの情報を指定しています +
      +
    • default_icon ではボタンのアイコンを指定します（必須項目）
      • +
    • default_title ではツールチップの文字列を指定します（省略可）
      • +
    • default_popup ではユーザーがボタンをクリックした際に表示されるポップアップを指定します。今回はポップアップを表示させたいので、拡張機能に含める HTML ファイルを defualt_popup キーで指定しています
      • +
    +
    • +
  • web_accessible_resources はウェブページからアクセスしたいファイルのリストです。この拡張機能では、拡張機能に同梱した画像でウェブページを置き換えるため、画像をウェブページからアクセス可能にする必要があります
    • +
+ +

パスはすべて manifest.json 自身からの相対パスで指定することに注意します。

+ +

アイコン

+ +

拡張機能にはアイコンを用意すると良いでしょう。このアイコンは、アドオンマネージャーで拡張機能のリスト横に表示されます（アドオンマネージャーは "about:addons" の URL から確認できます）。今回の manifest.json では "icons/beasts-48.png" を用意していると宣言しています。

+ +

"icons" ディレクトリーを作成して、そこにアイコンを "beasts-48.png" という名前で 保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは Aha-Soft’s Free Retina iconset から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

アイコンを自分で用意する場合 48x48 ピクセルのサイズにする必要があります。高解像度のディスプレイに 96x96 ピクセルのアイコンを表示させたい場合は、manifest.json の icons オブジェクトに 96 というプロパティで設定してください。

+ +
"icons": {
+  "48": "icons/beasts-48.png",
+  "96": "icons/beasts-96.png"
+}
+ +

ツールバーのボタン

+ +

ツールバーのボタンにもアイコンが必要です。今回の manifest.json では "icons/beasts-32.png" を用意していると宣言しています。

+ +

アイコンを "beasts-32.png" という名前で "icons" ディレクトリー内に保存します。必要であれば サンプルで使用しているアイコン を利用しても構いません（このアイコンは IconBeast Lite のアイコン集 から引用したものであり、該当する ライセンス の下で使用しています）。

+ +

ポップアップを使わない場合、ユーザーがボタンをクリックした際にはクリックイベントが拡張機能に向けて送出されます。ポップアップを使う場合にはクリックイベントは送出されず、代わりにポップアップが開きます。今回はポップアップが必要なので、次の項で作成しましょう。

+ +

ポップアップ

+ +

今回のポップアップでは、ユーザーが 3 つの動物から 1 つ選択できる機能を持つこととします。

+ +

拡張機能のルートディレクトリー配下に "popup" というディレクトリーを新しく作成します。ここにはポップアップ用のコードを保管します。ポップアップは次の 3 ファイルから構成されます。

+ +
    +
  • choose_beast.html パネルのコンテンツを定義する
    • +
  • choose_beast.css コンテンツのスタイルを指定する
    • +
  • choose_beast.js アクティブなタブでコンテンツスクリプトを実行し、ユーザーの選択を処理する
    • +
+ +
mkdir popup
+cd popup
+touch choose_beast.html choose_beast.css choose_beast.js
+ +

choose_beast.html

+ +

HTML ファイルは次のようになります。

+ +
<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="choose_beast.css"/>
+  </head>
+
+<body>
+  <div id="popup-content">
+    <div class="button beast">Frog</div>
+    <div class="button beast">Turtle</div>
+    <div class="button beast">Snake</div>
+    <div class="button reset">Reset</div>
+  </div>
+  <div id="error-content" class="hidden">
+    <p>Can't beastify this web page.</p><p>Try a different page.</p>
+  </div>
+  <script src="choose_beast.js"></script>
+</body>
+
+</html>
+ +

"popup-content" という ID の <div> 要素があって、動物の選択をする要素が入っています。"error-content" という ID の <div> 要素と "hidden" クラスもあります。それはポップアップの初期化に問題がある場合に使います。

+ +

通常のウェブページと同じように CSS と JS ファイルを読み込んでいることに注意してください。

+ +

choose_beast.css

+ +

この CSS ではポップアップのサイズを固定し、3 つの選択肢がポップアップを埋めるようにし、基本的なスタイリングを施しています。また要素を class="hidden" で隠してもいます: つまり "error-content" <div> は既定では隠れています。

+ +
html, body {
+  width: 100px;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  margin: 3% auto;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.5em;
+  cursor: pointer;
+}
+
+.beast:hover {
+  background-color: #CFF2F2;
+}
+
+.beast {
+  background-color: #E5F2F2;
+}
+
+.reset {
+  background-color: #FBFBC9;
+}
+
+.reset:hover {
+  background-color: #EAEA9D;
+}
+ +

choose_beast.js

+ +

これがポップアップ用の JavaScript です:

+ +

+/**
+ * ページのすべてを隠す CSS、ただし
+ * "beastify-image" クラスを持つ要素は除く
+ */
+const hidePage = `body > :not(.beastify-image) {
+                    display: none;
+                  }`;
+
+/**
+ * ボタンクリックをリッスンし、ページ内のコンテンツスクリプトに
+ * 適切なメッセージを送る
+ */
+function listenForClicks() {
+  document.addEventListener("click", (e) => {
+
+    /**
+     * 動物の名前を受け取って、対応する画像の URL を取得する
+     */
+    function beastNameToURL(beastName) {
+      switch (beastName) {
+        case "Frog":
+          return browser.extension.getURL("beasts/frog.jpg");
+        case "Snake":
+          return browser.extension.getURL("beasts/snake.jpg");
+        case "Turtle":
+          return browser.extension.getURL("beasts/turtle.jpg");
+      }
+    }
+
+    /**
+     * アクティブなタブにページを隠す CSS を挿入して
+     * 動物の URL を取得し、
+     * アクティブなタブのコンテンツスクリプトに "beastify" メッセージを送る
+     */
+    function beastify(tabs) {
+      browser.tabs.insertCSS({code: hidePage}).then(() => {
+        let url = beastNameToURL(e.target.textContent);
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "beastify",
+          beastURL: url
+        });
+      });
+    }
+
+    /**
+     * アクティブなタブからページを隠す CSS を削除し、
+     * アクティブなタブのコンテンツスクリプトに "reset" メッセージを送る
+     */
+    function reset(tabs) {
+      browser.tabs.removeCSS({code: hidePage}).then(() => {
+        browser.tabs.sendMessage(tabs[0].id, {
+          command: "reset",
+        });
+      });
+    }
+
+    /**
+     * ただコンソールにエラーをログ出力する
+     */
+    function reportError(error) {
+      console.error(`Could not beastify: ${error}`);
+    }
+
+    /**
+     * アクティブなタブを取得し、
+     * "beastify()" か "reset()" を適切に呼び出す
+     */
+    if (e.target.classList.contains("beast")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(beastify)
+        .catch(reportError);
+    }
+    else if (e.target.classList.contains("reset")) {
+      browser.tabs.query({active: true, currentWindow: true})
+        .then(reset)
+        .catch(reportError);
+    }
+  });
+}
+
+/**
+ * スクリプトにエラーがあった。
+ * ポップアップのエラーメッセージを表示し、通常の UI を隠す。
+ */
+function reportExecuteScriptError(error) {
+  document.querySelector("#popup-content").classList.add("hidden");
+  document.querySelector("#error-content").classList.remove("hidden");
+  console.error(`Failed to execute beastify content script: ${error.message}`);
+}
+
+/**
+ * ポップアップを読み込んだ時、コンテンツスクリプトをアクティブなタブに挿入し、
+ * クリックハンドラーを追加する。
+ * スクリプトの挿入ができない場合、エラー処理をする。
+ */
+browser.tabs.executeScript({file: "/content_scripts/beastify.js"})
+.then(listenForClicks)
+.catch(reportExecuteScriptError);
+ +

開始するのは 96行です。ポップアップスクリプトはポップアップが読み込まれ次第、アクティブなタブのコンテンツスクリプトを実行し、その手段は browser.tabs.executeScript() API です。コンテンツスクリプトの実行が成功したら、タブが閉じられるかユーザーが別のページに移動するまで、コンテンツスクリプトがページにロードされたままになります。

+ +

browser.tabs.executeScript() の呼び出しがよく失敗する理由は、コンテンツスクリプトをすべてのページでは実行できないことです。例えば、about:debugging のような権限のあるブラウザーページでは実行できませんし、addons.mozilla.org ドメイン内のページでも実行できません。失敗した場合、reportExecuteScriptError() は "popup-content" <div> を隠して、"error-content" <div> を表示し、エラーを console にログ出力します。

+ +

コンテンツスクリプトの実行が成功したら、listenForClicks() を呼び出します。これはポップアップのクリックをリッスンします。

+ +
    +
  • class="beast" の付いたボタンがクリックされたら、beastify() を呼び出す
    • +
  • class="reset" の付いたボタンがクリックされたら、reset() を呼び出す
    • +
+ +

beastify() 関数は次の 3 つを行います:

+ +
    +
  • 特定の動物画像を指す URL をボタンクリックに割り当てる
    • +
  • CSS を挿入してページの全コンテンツを隠し、その手段は browser.tabs.insertCSS() API
    • +
  • コンテンツスクリプトに "beastify" 送り、その手段は browser.tabs.sendMessage() API。ページを動物化するか尋ねて、動物画像への URL を渡す
    • +
+ +

reset() 関数は動物化を取り消す:

+ +
    +
  • 追加した CSS を削除し、その手段は browser.tabs.removeCSS() API
    • +
  • コンテンツスクリプトにページをリセットする "reset" メッセージを送る
    • +
+ +

コンテンツスクリプト

+ +

拡張機能のルートディレクトリー配下に "content_scripts" というディレクトリーを新しく作成します。続いてそこに "beastify.js" という名前のファイルを作成し、下記のスクリプトを記述します。

+ +
(function() {
+  /**
+   * グローバルなガード変数をチェック、設定する。
+   * コンテンツスクリプトが再び同じページに挿入された場合、
+   * 次は何もしない。
+   */
+  if (window.hasRun) {
+    return;
+  }
+  window.hasRun = true;
+
+  /**
+   * 動物の画像の URL を受け取り、既存の動物をすべて削除し、次に
+   * 画像を指す IMG 要素の作成・スタイル適用を行い、
+   * 作成したノードをドキュメント内に挿入する
+   */
+  function insertBeast(beastURL) {
+    removeExistingBeasts();
+    let beastImage = document.createElement("img");
+    beastImage.setAttribute("src", beastURL);
+    beastImage.style.height = "100vh";
+    beastImage.className = "beastify-image";
+    document.body.appendChild(beastImage);
+  }
+
+  /**
+   * ページからすべての動物を削除する
+   */
+  function removeExistingBeasts() {
+    let existingBeasts = document.querySelectorAll(".beastify-image");
+    for (let beast of existingBeasts) {
+      beast.remove();
+  }
+  }
+
+  /**
+   * バックグラウンドスクリプトからのメッセージをリッスンし、
+   * "beastify()" か "reset()" を呼び出す。
+   */
+  browser.runtime.onMessage.addListener((message) => {
+    if (message.command === "beastify") {
+      insertBeast(message.beastURL);
+    } else if (message.command === "reset") {
+      removeExistingBeasts();
+    }
+  });
+
+})();
+ +

このコンテンツスクリプトが最初にすることは、グローバル変数の window.hasRun のチェックです: セットされていればスクリプトは早くリターンし、そうでなければ window.hasRun をセットして処理し続けます。こうする理由は、ユーザーがポップアップを開くたびに、ポップアップはアクティブなタブのコンテンツスクリプトを実行して、そのために 1 つのタブに複数の実行スクリプトのインスタンスができてしまいます。これが起きると、最初のインスタンスだけが処理するのを確かめる必要があります。

+ +

その次に、始まる場所は 40行で、ここでコンテンツスクリプトはポップアップからのメッセージをリッスンし、その手段は browser.runtime.onMessage API です。上で見たように、ポップアップスクリプトは 2種類の異なるメッセージを送ります: "beastify" と "reset"

+ +
    +
  • メッセージが "beastify" なら、動物画像を指す URL が含まれるはずです。以前の "beastify" 呼び出しで追加された動物をすべて削除して、<img> 要素を作成、追加して、その src 属性に動物の URL をセットします。
    • +
  • メッセージが "reset" なら、ただ追加された動物をすべて削除します。
    • +
+ +

動物

+ +

最後に、動物の画像を用意しておく必要があります。

+ +

拡張機能のルートディレクトリー配下に   "beasts" という名前のディレクトリーを新しく作成し、その中に 3 つの画像を適切な名前で保存します。画像は GitHub リポジトリ から、またはここからでも取得できます。

+ +

+ +

動かしてみよう

+ +

正しいファイルが正しい場所にあるかどうか、もう一度確認してください。

+ +
beastify/
+
+    beasts/
+        frog.jpg
+        snake.jpg
+        turtle.jpg
+
+    content_scripts/
+        beastify.js
+
+    icons/
+        beasts-32.png
+        beasts-48.png
+
+    popup/
+        choose_beast.css
+        choose_beast.html
+        choose_beast.js
+
+    manifest.json
+ +

Firefox 45 以降では、拡張機能をディスクから一時的にインストールできるようになりました。

+ +

Firefox で "about:debugging" を開き、"一時的なアドオンを読み込む" をクリックし、自分で作成した manifest.json ファイルを選択してください。拡張機能のアイコンが Firefox のツールバーに表示されているはずです。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

適当なウェブページを開き、拡張機能のアイコンをクリックし、動物を選択してください。するとウェブページが動物の画像に置き換わるはずです。

+ +

{{EmbedYouTube("YMQXyAQSiE8")}}

+ +

コマンドラインから開発する

+ +

仮インストールを web-ext ツールを用いて自動化できます。次を試してください:

+ +
cd beastify
+web-ext run
+
diff --git "a/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" "b/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" deleted file mode 100644 index 751de9fe15..0000000000 --- "a/files/ja/mozilla/add-ons/webextensions/\345\211\215\346\217\220\346\235\241\344\273\266/index.html" +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 前提条件 -slug: Mozilla/Add-ons/WebExtensions/前提条件 -translation_of: Mozilla/Add-ons/WebExtensions/Prerequisites ---- -

WebExtension API を使って開発するには、いくつかの小さいセットアップが必要です。

- - diff --git a/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html b/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html new file mode 100644 index 0000000000..ee47b27b6f --- /dev/null +++ b/files/ja/mozilla/developer_guide/build_instructions/how_mozilla_s_build_system_works/index.html @@ -0,0 +1,195 @@ +--- +title: How Mozilla's build system works +slug: How_Mozilla's_build_system_works +tags: + - Build documentation + - Developing Mozilla + - 移行 +--- +

概要

+ +

本ドキュメントは、Mozilla の GNU make ベースビルドシステムを必要とする Mozilla 開発者をターゲットとしています。 本ドキュメントでは、ビルドシステムの基本概念と用語ならびに、コンポーネントのコンパイルや jar ファイルの作成といった共通的作業をどのように行うかを解説しています。

+ +

本書は Mozilla をただビルドしたい人を対象にはしていません。その場合はBuild Documentationを参照してください。

+ +

概念

+ +

Mozilla のビルドシステムは GNU Make をベースにしたシステムです。最も基本的なレベルでは、make はターゲットを自動生成するツールで、ターゲットごとにdependencies とrules を生成します。

+ +

Mozilla プロジェクトでは、make はライブラリと実行モジュールのコンパイル、chrome の jar ファイル作成、関係ファイルのコピーに使用されます。我々は、2 パスのビルドシステムを使用しています:

+ + + +

いずれのフェーズでも、ターゲットを make するだけです。これは、それぞれのディレクトリは export ターゲットとともにまず一度横断し、libs ターゲットとともに、再び横断します。 二段階のビルドは、モジュール間の循環的参照のために存在します。最初にすべてのヘッダファイルを export することで、あるモジュール（Ａとする）は、別のモジュール（Ｂ）の public なヘッダファイルをインクルードしながら、モジュール（Ｂ）はモジュール（Ａ）の public なヘッダファイルをインクルードできます。

+ +

その他の重要なツールとして、configure が挙げられます。これは、ビルドの最初のステップに実行されます。configure スクリプトはシステムやコンパイラの特徴を決定し、オプションを生成します。configure スクリプトから実行される重要な製品が二つあります:

+ + + +

configure スクリプトは bash シェルベースのものです。このスクリプトは M4 とともに書かれた configure.in と呼ばれるファイルから生成され、最終的なスクリプトを生成するために Autoconfを使って処理します。

+ +

Makefile の基礎

+ +

Makefile は、非常に複雑にもなり得ますが、Mozilla チームは、大半の Makefile をとてもシンプルにすべく、多数のビルトインルールを提供しています。make についての網羅的な解説は本説明の範囲を超えますので、こちら（GNU make）を参照してください。

+ +

精通しておくとよいであろう概念の一つとして、make の変数が挙げられます。変数はVARIABLE = VALUE という構文で定義され、その値は$(VARIABLE) と記述することで参照されます。すべての変数は文字列です。

+ +

Mozilla のソースコードに含まれる Makefile.in ファイルはすべて同じ基本的なフォーマットで記述されています。

+ +
{{ page("/ja/docs/Standard_Makefile_Header") }}
+ +
# ... Makefile の中心となる本体部分がここに入ります ...
+
+ +
include $(topsrcdir)/config/rules.mk
+
+# ... 追加のルールがここに入ります ...
+
+ + + +

この他によく使われる変数の一つとして、特定のビルドターゲットを指定しない DIRS があります。DIR は、現在のディレクトリを再帰的に組み込むためのサブディレクトリの一覧です。サブディレクトリは親ディレクトリの後に配置されます。以下に例を示します。

+ +
DIRS = \
+       public \
+       resources \
+       src \
+       $(NULL)
+
+ +

上記の例は、行結合の例でもあります。行の中の最後に現れるバックスラッシュ（訳注：通常の日本の環境では￥記号に見えることも多いので注意）は、変数定義が次の行にも続いていることを示します。行の継ぎ目の余分な空白は縮められます。終端の $(NULL) は表記に一貫性を持たせる手段です。これにより、行末のバックスラッシュの有無を気にせず行の追加・削除が行えます。

+ +

Makefile examples

+ + + +

ライブラリのビルド

+ +

Mozilla のビルドにおけるライブラリは、主として３種に分けられます:

+ + + +

Non-component shared libraries

+ +

non-component shared library は、複数のコンポーネントが共有しなければならない共通コードがあり、それを XPCOM を通じて共有することが、適切でないもしくは不可能な場合に有用です。 一例として、libmsgbaseutil 向けの Makefile の一部を見てみましょう。これは、mailnews コンポーネント全体からリンクされます:

+ +
DEPTH           = ../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = msgbaseutil
+LIBRARY_NAME    = msgbaseutil
+EXPORT_LIBRARY = 1
+SHORT_LIBNAME   = msgbsutl
+
+ +

上述した component の例との実際問題としての相違点は、IS_COMPONENT が設定されていない事だけである点に注意してください。この値を設定しない事によって、共有ライブラリが生成され、dist/bin にインストールされるでしょう。

+ +

Static libraries

+ +

上述の通り、静的ライブラリの主要な使用方法としては、大規模ライブラリ（主に component）のビルドの中間段階としての使用が挙げられます。これにより、複数のサブディレクトリにソースファイルを分散させて配置することができます。静的ライブラリは実行可能モジュールにもリンクされることがあります。例として、layout/base/src の Makefile の一部を以下に示します。

+ +
DEPTH           = ../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = layout
+LIBRARY_NAME    = gkbase_s
+
+# REQUIRES and CPPSRCS omitted here for brevity #
+
+# we don't want the shared lib, but we want to force the creation of a static lib.
+FORCE_STATIC_LIB = 1
+
+include $(topsrcdir)/config/rules.mk
+
+ +

ここでは FORCE_STATIC_LIB = 1 というキーが設定されています。これにより、（unix の場合)libgkbase_s.a が、Windows の場合はgkbase_s.lib が生成され、dist/lib にコピーされます。では、コンポーネントを作成するために複数の静的ライブラリを合わせてリンクする方法をざっと見てみましょう。

+ +
DEPTH           = ../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE          = layout
+LIBRARY_NAME    = gklayout
+EXPORT_LIBRARY = 1
+IS_COMPONENT    = 1
+MODULE_NAME     = nsLayoutModule
+
+CPPSRCS         = \
+                nsLayoutModule.cpp \
+                $(NULL)
+
+SHARED_LIBRARY_LIBS = \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmldoc_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlforms_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmlstyle_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkhtmltable_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxulbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkbase_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkconshared_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxultree_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)gkxulgrid_s.$(LIB_SUFFIX) \
+                $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+ +

SHARED_LIBRARY_LIBS は、本共有ライブラリにリンクすべき静的ライブラリを並べて記述します。LIB_PREFIX や LIB_SUFFIX を使用することで、すべてのプラットフォームで動作させることができることに注意してください。

+ +

Jar ファイルをビルドする

+ +

Jar ファイルは(XUL、JavaScript、CSSといった) chrome ファイルのパッケージングに使用します。Jar パッケージングについてのより詳細な情報は、{{ mediawiki.external('jar-packaging.html このドキュメント') }}で得られます。ここでは、Jar パッケージを行うために Makefile をどのように設定するかのみ述べます。以下に例を示します。

+ +
DEPTH           = ../../../..
+topsrcdir       = @top_srcdir@
+srcdir          = @srcdir@
+VPATH           = @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+include $(topsrcdir)/config/rules.mk
+ +

そうです。ここでは定義が必要な外部変数は使用されていません。Makefile.in と同じディレクトリに jar.mn ファイルがある場合、自動的に処理されるのです。jar.mn と chrome ファイルを含む resources ディレクトリを作成するのが通例ですが、ライブラリを作成するディレクトリに jar.mn を設置したいのであれば、これも動作します（処理されます）。

+ +
+

著作情報

+ +
    +
  • 著作者: Brian Ryner
    • +
  • 著作権情報: Portions of this content are © 1998–2006 by individual mozilla.org contributors; content available under a Creative Commons license
    • +
+
diff --git a/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html b/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html new file mode 100644 index 0000000000..b69868d0d8 --- /dev/null +++ b/files/ja/mozilla/developer_guide/build_instructions/windows_prerequisites/index.html @@ -0,0 +1,13 @@ +--- +title: Building with VC8 Express +slug: Building_with_VC8_Express +tags: + - Build documentation + - Developing Mozilla +--- +

+

このページは破棄されました。標準の Windows ビルドに必要な環境は現在、Microsoft Visual C++ バージョン 8 Express Edition が使用されています。 +

+
+
+{{ languages( { "en": "en/Building_with_VC8_Express" } ) }} diff --git a/files/ja/mozilla/developer_guide/mozilla-central/index.html b/files/ja/mozilla/developer_guide/mozilla-central/index.html new file mode 100644 index 0000000000..ffad18d62b --- /dev/null +++ b/files/ja/mozilla/developer_guide/mozilla-central/index.html @@ -0,0 +1,52 @@ +--- +title: mozilla-central +slug: mozilla-central +tags: + - Developing Mozilla + - Mercurial +translation_of: Mozilla/Developer_guide/mozilla-central +--- +

mozilla-central は Mozilla ソースコードの Mercurial リポジトリです: http://hg.mozilla.org/mozilla-central 。これは、Mozilla 2 コードベースに編入される変更のための、安定した統合ポイントです。 +

mozilla-central の Tinderbox ページは http://tinderbox.mozilla.org/showbui...?tree=Mozilla2 に位置しています。 +{{ Note("Mozilla CVS リポジトリとは異なり、mozilla-central には Firefox と XULRunner のソースのみが含まれています。他のアプリケーションやプロジェクト固有のコードについては別のリポジトリが使用されます。") }} +{{ 英語版章題("mozilla-central tree rules") }} +

+

mozilla-central ツリー規則

+

mozilla-central コードベースは、tier-1 プラットフォーム上では常に stable でなくてはなりません: +

+ +

{{ 英語版章題("API Changes") }} +

+

API の変更

+

1.9.1 への準備のため、API の変更については以下の規則が適用されます: +

+ +

この規則は 1.9.1 branch の後で変更されます。 +

{{ 英語版章題("Pushing changes to mozilla-central") }} +

+

mozilla-central に変更をプッシュする

+

CVS チェックインアクセス権をもつすべての開発者は、バグを投稿して、hg.mozilla.org にプッシュするための LDAP ログインの詳細が書かれた Email を受信してください。変更セットをサーバにプッシュするには <tt>hg push</tt> コマンドを使用します。 +

+ +

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

+

参照

+ +
+
+{{ languages( { "en": "en/Mozilla-central", "es": "es/Mozilla-central" } ) }} diff --git a/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html b/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html new file mode 100644 index 0000000000..581da56b72 --- /dev/null +++ b/files/ja/mozilla/developer_guide/source_code/getting_comm-central/index.html @@ -0,0 +1,50 @@ +--- +title: Getting comm-central Source Code Using Mercurial +slug: >- + Mozilla/Developer_Guide/Source_Code/Getting_comm-central_Source_Code_Using_Mercurial +translation_of: Mozilla/Developer_guide/Source_Code/Getting_comm-central +--- +

Mercurial は、ソースコードの変更をローカルで追跡し、それらの変更を他のユーザと共有するためのソースコード管理ツールです。Mozilla プロジェクトはソースコードの管理を、Mozilla 1.9 開発用の CVS から Mozilla 1.9.1 とその先の製品開発用の Mercurial へ移行しています。

+
Thunderbird 2.0 や SeaMonkey 1.1, Firefox 3.0 の開発のためのパッチを提出したいときは、CVS を使用してください。
+

クライアントの設定

+

設定は Firefox 3.5/xulrunner 1.9.1 の開発と同じです。次の記事を参照してください。

+

Mozilla_Source_Code_(Mercurial)#Client_settings.

+

ソースツリーのチェックアウト

+

Thunderbird と Seamonkey のソースコードはそれぞれ異なるリポジトリに含まれています。comm-central は、それらのアプリケーション開発用のメインの統合リポジトリです。Thunderbird および Sunbird, SeaMonkey に必要とされるソースコードが含まれています。また、他のソースコードを入手するための client.py スクリプトも含まれています。

+

comm-central のソースコードを入手するには (Mercurial の用語で、リポジトリを "clone" します):

+
# Mozilla ソースコードを src/ フォルダに pull します。
+# 数百メガバイトの履歴が .hg フォルダにダウンロードされるため、しばらく時間がかかります。
+hg clone http://hg.mozilla.org/comm-central/ src
+
+cd src
+
+
すでに mozilla-central ツリーを clone している場合は、mozilla-central 全体を再び pull してしまうことを避けるため、ここでは src/mozilla に clone してください。
+

client.py を使用して、必要な他のすべてのソースコードを更新または pull してください:

+
python client.py checkout
+
+
+
  • "No module named subprocess" というエラーメッセージが表示された場合は、Python 2.4 以降をインストールする必要があります。
  • このステップでは数百メガバイトのデータがダウンロードされます。ネットワークの接続速度によっては、しばらく時間がかかります。
    • +
+
+

client.py は以下のタスクを行います:

+ +

リポジトリの更新

+

リポジトリを更新するには、client.py を再び実行します:

+
python client.py checkout
+
+

comm-central の異なるブランチ を pull するには、 http://hg.mozilla.org/comm-central をブランチの場所に置きかえて、上に書かれた最初のステップを行ってください。ブランチの場所は comm-central ページのブランチ章で指定されています。

+
関連するリポジトリを pull すると、同じソースディレクトリを使用して上述のソフトウェアを開発してビルドすることができますが、リポジトリをまたがる変更 (chengeset) を作成できるわけではありません。リポジトリをまたがるパッチを作成するときは、各リポジトリごとの変更 (chengeset) が必要です。
+

ビルド

+

comm-central のアプリケーションについては、次のリンク先をご覧ください:

+ +

Firefox と xulrunner

+

必要であれば、このツリーから Firefox や xulrunner をビルドすることができます。client.py によって mozilla-central リポジトリが pull されるため、Firefox や xulrunner のビルドと開発は comm-central からのリポジトリ内で行うことができます。ただ一つの違いは、ビルドコマンドを実行する前に mozilla/ ディレクトリに移動する必要があることです:

+
cd src/mozilla
+make -f client.mk build
+
+

参照

+ +

{{ languages( { "en": "En/Developer_Guide/Source_Code/Getting_comm-central", "fr": "fr/Code_source_de_comm-central_(Mercurial)" } ) }}

diff --git a/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html b/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html deleted file mode 100644 index 581da56b72..0000000000 --- a/files/ja/mozilla/developer_guide/source_code/getting_comm-central_source_code_using_mercurial/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Getting comm-central Source Code Using Mercurial -slug: >- - Mozilla/Developer_Guide/Source_Code/Getting_comm-central_Source_Code_Using_Mercurial -translation_of: Mozilla/Developer_guide/Source_Code/Getting_comm-central ---- -

Mercurial は、ソースコードの変更をローカルで追跡し、それらの変更を他のユーザと共有するためのソースコード管理ツールです。Mozilla プロジェクトはソースコードの管理を、Mozilla 1.9 開発用の CVS から Mozilla 1.9.1 とその先の製品開発用の Mercurial へ移行しています。

-
Thunderbird 2.0 や SeaMonkey 1.1, Firefox 3.0 の開発のためのパッチを提出したいときは、CVS を使用してください。
-

クライアントの設定

-

設定は Firefox 3.5/xulrunner 1.9.1 の開発と同じです。次の記事を参照してください。

-

Mozilla_Source_Code_(Mercurial)#Client_settings.

-

ソースツリーのチェックアウト

-

Thunderbird と Seamonkey のソースコードはそれぞれ異なるリポジトリに含まれています。comm-central は、それらのアプリケーション開発用のメインの統合リポジトリです。Thunderbird および Sunbird, SeaMonkey に必要とされるソースコードが含まれています。また、他のソースコードを入手するための client.py スクリプトも含まれています。

-

comm-central のソースコードを入手するには (Mercurial の用語で、リポジトリを "clone" します):

-
# Mozilla ソースコードを src/ フォルダに pull します。
-# 数百メガバイトの履歴が .hg フォルダにダウンロードされるため、しばらく時間がかかります。
-hg clone http://hg.mozilla.org/comm-central/ src
-
-cd src
-
-
すでに mozilla-central ツリーを clone している場合は、mozilla-central 全体を再び pull してしまうことを避けるため、ここでは src/mozilla に clone してください。
-

client.py を使用して、必要な他のすべてのソースコードを更新または pull してください:

-
python client.py checkout
-
-
-
  • "No module named subprocess" というエラーメッセージが表示された場合は、Python 2.4 以降をインストールする必要があります。
  • このステップでは数百メガバイトのデータがダウンロードされます。ネットワークの接続速度によっては、しばらく時間がかかります。
    • -
-
-

client.py は以下のタスクを行います:

- -

リポジトリの更新

-

リポジトリを更新するには、client.py を再び実行します:

-
python client.py checkout
-
-

comm-central の異なるブランチ を pull するには、 http://hg.mozilla.org/comm-central をブランチの場所に置きかえて、上に書かれた最初のステップを行ってください。ブランチの場所は comm-central ページのブランチ章で指定されています。

-
関連するリポジトリを pull すると、同じソースディレクトリを使用して上述のソフトウェアを開発してビルドすることができますが、リポジトリをまたがる変更 (chengeset) を作成できるわけではありません。リポジトリをまたがるパッチを作成するときは、各リポジトリごとの変更 (chengeset) が必要です。
-

ビルド

-

comm-central のアプリケーションについては、次のリンク先をご覧ください:

- -

Firefox と xulrunner

-

必要であれば、このツリーから Firefox や xulrunner をビルドすることができます。client.py によって mozilla-central リポジトリが pull されるため、Firefox や xulrunner のビルドと開発は comm-central からのリポジトリ内で行うことができます。ただ一つの違いは、ビルドコマンドを実行する前に mozilla/ ディレクトリに移動する必要があることです:

-
cd src/mozilla
-make -f client.mk build
-
-

参照

- -

{{ languages( { "en": "En/Developer_Guide/Source_Code/Getting_comm-central", "fr": "fr/Code_source_de_comm-central_(Mercurial)" } ) }}

diff --git a/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..7106e1df16 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html @@ -0,0 +1,33 @@ +--- +title: Firefox 1.5 に XUL アプリケーションを対応させる +slug: Adapting_XUL_Applications_for_Firefox_1.5 +tags: + - Add-ons + - Extensions + - XUL +translation_of: Mozilla/Firefox/Releases/1.5/Adapting_XUL_Applications_for_Firefox_1.5 +--- +

 

+ +

このページでは、Firefox 1.5 の変更点のうち、XUL アプリケーション開発者に影響するものについて、リストで示します。

+ +

仕様の変更

+ + + +

その他の情報

+ + diff --git a/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html new file mode 100644 index 0000000000..a2c0c54ea7 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -0,0 +1,191 @@ +--- +title: Using Firefox 1.5 caching +slug: Using_Firefox_1.5_caching +tags: + - Add-ons + - DOM + - Extensions + - HTML + - JavaScript + - Web Development +translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +--- +

{{FirefoxSidebar}}

+ +

はじめに

+ +

Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。

+ +

Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。

+ + + +

この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。

+ + + +

ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。

+ +

ブラウザの新しいイベント

+ +

これらの新しいイベントを使用すると、そのページは他のブラウザでは今までどおりにきちんと表示され（過去の Firefox、Internet Explorer、Opera、Safari でテスト済み）、Firefox 1.5 でロードしたときにこの新しいキャッシュ機能が使用されるようになります。

+ +

ウェブページの標準的な挙動は次のとおりです。

+ +
    +
  1. ユーザがページにナビゲートする。
    2. +
  2. ページロード時にインラインスクリプトが実行される。
    3. +
  3. ページがロードされると onload ハンドラが実行される。
    4. +
+ +

4 ステップ目があるページもあります。ページが unload ハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unload ハンドラが存在しているとそのページはキャッシュされません。

+ +

ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません（ステップ 2 および 3）。ほとんどの場合、これらのスクリプトの効果が保存されているためです。

+ +

そのページにユーザがナビゲートするたびにロード中に実行されるようにしたいスクリプトや他の動作がそのページに含まれている場合、あるいはいつユーザがキャッシュされたページにナビゲートしたかを知りたい場合は、新しい pageshow イベントを使用します。

+ +

ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。

+ +

pageshow イベント

+ +

このイベントは load イベントと同じように動作しますが、ページがロードされるたびに実行される点で異なります（一方、Firefox 1.5 ではページがキャッシュからロードされたときには load イベントは発動しません）。初めてページがロードされるとき、load イベントの発動直後に pageshow イベントが発動します。pageshow イベントは 初回ロード時には false がセットされる persisted という真偽値プロパティを使用します。初回ロードでなければ true がセットされます（つまり、そのページがキャッシュされているときに true がセットされます）。

+ +

ページロードのたびに実行したい JavaScript は pageshow イベントの発動時に実行されるようにセットします。

+ +

この記事で後に示すサンプルのように、JavaScript の関数を pageshow イベントの一部として呼び出す場合、pageshow イベントを load イベントの一部として呼び出すことで、ページが Firefox 1.5 以外のブラウザでロードされたときにもその関数を呼び出せるようになります。

+ +

pagehide イベント

+ +

ユーザがそのページから去るナビゲートをするときに実行する動作を定義したいものの、unload イベント（そのページがキャッシュされなくなる）を使用したくないという場合は、新しい pagehide イベントを使用することができます。pageshow のように、pagehide イベントは persisted という真偽値プロパティを使用します。このプロパティは、ブラウザがそのページをキャッシュしていなければ false がセットされ、ブラウザがそのページをキャッシュしていれば true がセットされます。このプロパティに false がセットされているとき、unload があれば pagehide イベントの直後にそれが発動します。

+ +

Firefox 1.5 は、そのページの初回ロード時と同じ順番でロードに関するイベントをシミュレートします。フレームはトップレベルの文書と同じように扱われます。そのページにフレームがあると、キャッシュされたページがロードされるときに次のことが起こります。

+ + + +

サンプルコード

+ +

下のサンプルは load イベントと pageshow イベントの両方を使用したページです。このサンプルページは次のような挙動をとります。

+ + + + + + + +

この例では次のことが起こります。

+ + + +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+<HTML>
+<head>
+<title>Order query : Firefox 1.5 Example</title>
+<style type="text/css">
+body, p {
+	font-family: Verdana, sans-serif;
+	font-size: 12px;
+   	}
+</style>
+<script type="text/javascript">
+function onLoad() {
+	loadOnlyFirst();
+	onPageShow();
+}
+
+function onPageShow() {
+// 現在時刻の算出
+
+	var currentTime= new Date();
+	var year=currentTime.getFullYear();
+	var month=currentTime.getMonth()+1;
+	var day=currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
+<h2>Order query</h2>
+
+<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
+<label for="timefield">Date and time:</label>
+<input type="text" id="timefield"><br>
+<label for="name">Name:</label>
+<input type="text" id="name"><br>
+<label for="address">Email address:</label>
+<input type="text" id="address"><br>
+<label for="order">Order number:</label>
+<input type="text" id="order"><br>
+<input type="submit" name="submit" value="Submit Query">
+</form>
+</body>
+</html>
+
+ +

一方、上記のページが pageshow イベントをリスンせず、すべての計算を load イベントの一部として扱う（そして代わりに下のサンプルコード片で置き換える）ものだとすると、ユーザがそのページから去るナビゲーションをするとカーソル位置も日時も Firefox 1.5 にキャッシュされます。ユーザがそのページに戻ると、キャッシュされた日時が表示されます。

+ +
<script>
+function onLoad() {
+	loadOnlyFirst();
+
+// 現在時刻の算出
+	var currentTime= new Date();
+	var year = currentTime.getFullYear();
+	var month = currentTime.getMonth()+1;
+	var day = currentTime.getDate();
+	var hour=currentTime.getHours();
+	var min=currentTime.getMinutes();
+	var sec=currentTime.getSeconds();
+	var mil=currentTime.getMilliseconds();
+	var displayTime = (month + "/" + day + "/" + year + " " +
+		hour + ":" + min + ":" + sec + ":" + mil);
+	document.getElementById("timefield").value=displayTime;
+}
+
+function loadOnlyFirst() {
+	document.zipForm.name.focus();
+}
+</script>
+</head>
+
+<body onload="onLoad();">
+
+ +

Firefox 用拡張機能の開発

+ +

Firefox 1.5 の 拡張機能 はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては load イベントをリスンし、キャッシュされないようにするトリガについては pageshow イベントをリスンしてください。

+ +

例えば Firefox 用 Google ツールバーは、1.5 とそれより前のバージョンの両方と互換性を持たせるためには、autolink 関数については load イベントをリスンすべきであり、PageRank 関数については pageshow イベントをリスンすべきです。

diff --git a/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html new file mode 100644 index 0000000000..8139208689 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/2/adding_feed_readers_to_firefox/index.html @@ -0,0 +1,49 @@ +--- +title: Firefox へのフィードリーダーの追加 +slug: Adding_feed_readers_to_Firefox +tags: + - Configuration management +translation_of: Mozilla/Firefox/Releases/2/Adding_feed_readers_to_Firefox +--- +
+ {{ Fx_minversion_header(2) }}
+

Firefox 2 より、Firefox はフィードを読む際に使う RSS または Atom フィードリーダを選択できるようになっています。この記事ではデフォルトではサポートされていないリーダを追加サポートさせる方法について説明します。

+

新しいウェブベースのフィードリーダの追加

+

新しいウェブベースのフィードリーダを追加サポートさせるためにやらなければならないことは、3 つの新しい設定項目を追加することだけです。

+
+
+ browser.contentHandlers.types.number.title
+
+ フィードリーダの名前。
+
+ browser.contentHandlers.types.number.type
+
+ フィードリーダに使用するため、ここは "application/vnd.mozilla.maybe.feed" にする。
+
+ browser.contentHandlers.types.number.uri
+
+ フィードリーダの URI。フィードの URL が挿入されるべき部分に "%s" を使用する。
+
+

number は既に使われている数のうち最大のものよりもより 1 つ大きな数で置き換えてください。例えば "Easy Reader" という新しいフィードリーダを追加したい場合、かつ 0 から 4 までの数が指定されたコンテンツハンドラが既に定義されている場合、このように number には 5 を使用してください。

+ +

about:config を使うことでこれらの設定項目を手動で追加できます。拡張機能で新しいフィードリーダをインストールしたいのであれば、プログラム側で行うこともできます。

+

ウェブアプリケーションからのフィードリーダの追加

+

ウェブ上の JavaScript コードから簡単にフィードリーダを追加することができます。このためには、このような {{domxref("navigator.registerContentHandler()")}} 関数を使用します。

+
navigator.registerContentHandler(
+    "application/vnd.mozilla.maybe.feed",
+    "http://www.theeasyreaderurl.com?feed=%s",
+    "Easy Reader"
+);
+

新しいフィードリーダアプリケーションの追加

+

これを最も簡単に行う方法というのは、単に設定（あるいは オプション、ご使用のプラットフォームによります）ウィンドウの フィード パネルという既存のユーザインタフェースを使用することです。

+
+ 注意: Firefox 8 よりフィードパネルは無くなっています。フィードリーダーの開発者が、Web フィードの処理の為のオプションをご自分で追加する場合、上記の同様の JavaScript コードを実装することをお勧めします。
+

これも拡張機能からプログラムで行うこともできます。フィードリーダに使うアプリケーションのパス名を browser.feeds.handlers.application オプションの値に設定することで可能です。

+

関連情報

+ diff --git a/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html new file mode 100644 index 0000000000..546bd25562 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/2/updating_extensions/index.html @@ -0,0 +1,37 @@ +--- +title: Updating extensions for Firefox 2 +slug: Updating_extensions_for_Firefox_2 +tags: + - Add-ons + - Extensions +translation_of: Mozilla/Firefox/Releases/2/Updating_extensions +--- +

この記事は、開発者が彼らの拡張機能を更新して Firefox 2 で動作させるために役立つ情報を提供しています。 +

{{ 英語版章題("Step 1: Update the install manifest") }} +

+

ステップ 1: インストール定義ファイルの更新

+

最初のステップ -- ほとんどの拡張機能で唯一必要なこと -- は、インストール定義ファイル <tt>install.rdf</tt> を更新し、Firefox 2 との互換性を持たせることです。 +

単純に、Firefox の最大互換バージョンを指示する行を探します (次のように Firefox 1.5 向けになっています): +

+
 <em:maxVersion>1.5.0.*</em:maxVersion>
+
+

これを変更して Firefox 2 と互換性を持たせます: +

+
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+

そして、拡張機能を再インストールしてみます。 +

{{ 英語版章題("Step 2: Update XUL overlays") }} +

+

ステップ 2: XUL オーバーレイの更新

+

Firefox 2 はデフォルトのテーマに変更を加えています。さらに、一部のユーザインタフェース要素が変更、または移動されているため、あなたの拡張機能の XUL オーバーレイに依存する部分が影響を受けます。 +

拡張機能の XUL オーバーレイに影響する変更箇所について学ぶには、Firefox 2 におけるテーマの変更点の記事に目を通してください。 +

{{ 英語版章題("Step 3: Test") }} +

+

ステップ 3: テスト

+

公式にリリースする前に、必ず拡張機能を Firefox 2 上でテストしてください。最後にすることは、Firefox のリリース時に起こる問題報告のラッシュに、あなたの拡張機能の新バージョンが責任を持つことです。 +

{{ 英語版章題("Step 4: Release") }} +

+

ステップ 4: リリース

+

http://addons.mozilla.org 上のあなたの拡張機能のエントリを更新してください。ユーザが更新を見つけられるようになります。 +

さらに、あなたの拡張機能のインストール定義ファイルで updateURL を提供している場合は、必ず update manifest を更新し、Firefox が自動的に拡張機能の新バージョンを見つけられるようにしてください。こうすることによって、ユーザが Firefox 2 にアップグレードした後で最初にあなたの拡張機能を実行した時、新バージョンを自動的にインストールさせることができます。 +

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "fr": "fr/Mise_\u00e0_jour_des_extensions_pour_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html new file mode 100644 index 0000000000..a644ae451a --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html @@ -0,0 +1,73 @@ +--- +title: Updating extensions for Firefox 3.1 +slug: Updating_extensions_for_Firefox_3.1 +--- +

{{ fx_minversion_header(3.1) }}

+

この記事は、自分の拡張機能を Firefox 3.1 で正しく動作するよう更新しようとしている拡張機能開発者のために役立つ情報を提供します。

+

更新の基本

+

この節では、Firefox の新しいバージョンに向けて拡張機能を更新する際に必ず行わなければならないことの基本を説明します。

+

拡張機能のテスト

+

まずはじめに、拡張機能の install.rdf ファイルを編集して、(Firefox 3.1 beta 2 でテストを行っている場合は) maxVersion を 3.1b2 に更新し、それに合わせて version を上げましょう。

+

Firefox のプロファイルを新規作成し、テストが常用のプロファイルに影響しないようにします。 Firefox が含まれるディレクトリに移動して、以下のコマンドを実行します。

+
firefox -createProfile testBeta2
+
+

Mac では、Firefox のアプリケーションバンドル内へはるばる移動する必要があります。

+
cd /Applications/Firefox.app/Contents/MacOS/
+firefox -createProfile testBeta2
+
+

コマンドライン上で以下のコマンドを実行し、新規プロファイルで Firefox を起動します。

+
firefox -P testBeta2
+
+

自分の拡張機能を徹底的にテストします。 JavaScript のあらゆる警告や例外を通知するために、以下の設定項目を true に設定しておくことをお勧めします。

+ +

拡張機能の更新

+

テスト中に何か問題を発見した場合は、コードを更新して問題を修正しましょう。 この記事には、若干の更新作業が必要な箇所についての役立つ情報が載っています。

+

テストが完了したら、今度は常用のプロファイルを使って、再度その拡張機能を使ってみます。 この作業は、保存されている既存のデータとの互換性を確認するのに役立ちます。

+

addons.mozilla.org に登録されている拡張機能の更新

+

ついに、更新した拡張機能を公開するときが来ました。 もし自分の拡張機能に一切コードの変更が必要ない場合は、AMO のダッシュボードにログインして、互換性のあるバージョンを更新するだけで済みます。 何らかの変更を加えた場合は、新しいバージョンを AMO にアップロードする必要があります。

+

詳しくは AMO へのアドオンの登録 を参照してください。

+

Places データベースへのアクセス

+

Firefox 3.1 以前は、Storage API を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。

+
var places = Components.classes["@mozilla.org/file/directory_service;1"].
+                        getService(Components.interfaces.nsIProperties).
+                        get("ProfD", Components.interfaces.nsIFile);
+places.append("places.sqlite");
+var db = Components.classes["@mozilla.org/storage/service;1"].
+                    getService(Components.interfaces.mozIStorageService).openDatabase(places);
+
+

これは places.sqlite データベースファイルへのパスを自力で作成し、Storage アクセスのためのファイルを開くものでした。

+

Firefox 3.1 には、Places データベースへアクセスするための便利な方法を提供する、専用のサービスが追加されており、上記の方法は Firefox 3.1 以降では機能しません。

+
var db = Components.classes["@mozilla.org/browser/nav-history-service;1"].
+                    getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
+
+

テキストボックスの検索

+

textbox の種類のひとつ、timed は廃止予定となりました。代わりに search を使ってください。

+

Firefox 3 では、以下のようなコードが使われていたはずです。

+
<textbox type="timed" timeout="1000" oncommand="alert(this.value);"/>
+
+

Firefox 3.1 では、これを以下のように書き換える必要があります。

+
<textbox type="search" timeout="1000" oncommand="alert(this.value);"/>
+
+

JSON

+

JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、Firefox で JSON を使用する をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、JSON のページからリンクされている記事を参照してください。

+

Firefox 3 と Firefox 3.1 の両方について互換性を確保するには、以下のように記述します。

+
if (typeof(JSON) == "undefined") {
+  Components.utils.import("resource://gre/modules/JSON.jsm");
+  JSON.parse = JSON.fromString;
+  JSON.stringify = JSON.toString;
+}
+
+

JSON がネイティブサポートされていない場合は JSON.jsm JavaScript モジュールをインポートして、そのモジュールによって提供されているメソッドをネイティブ JSON で使われているものにマッピングします。これによって、同じ呼び出しが可能になります。

+

また、{{ interface("nsIJSON") }} インタフェースを直接利用することでも、この問題を回避できます。

+

クローム登録に関する変更

+

Firefox 3.1 では、リモートのクロームを利用可能にするセキュリティホールが修正されています。 これは、chrome.manifest ファイルに Web サイトを参照するリソースが含まれているすべてのアドオンに影響します。

+

この問題は {{ Bug(466582) }} で詳しく説明されています。{{ interface("nsIProtocolHandler") }} インタフェースに追加された新しいフラグ URI_IS_LOCAL_RESOURCE によって、そのプロトコルがクロームとして登録しても安全であることを示すことができます。 独自のプロトコルハンドラを作成し、それを chrome.manifest 内で登録しようとするアドオンは、正しく動作するようにこのフラグを追加する必要があります。

+

カスタマイズ可能なツールバー

+

Firefox 3.1 では、カスタマイズ可能なツールバーの挙動が次のように変更されました。<xul:toolbar/> バインディングは、関連付けられた <xul:toolbarpalette/> からツールバー削除、もしくはツールバーへ追加するようになりました。これまでは、項目を複製してツールバーへコピーしていました。 つまり、パレットには、ツールバー上に存在しないアイテムしか含めることができません。これまでの挙動では、ツールバー上に表示されているかどうかに関わらず、カスタマイズ可能なすべての要素が含まれていました。 これは、<xul:toolbarpalette/> からカスタマイズ可能なすべてのツールバー項目を取得できることに依存した処理を行っていたり、ツールバーのカスタマイズ中に動的にパレットへ項目を挿入し、それらを利用可能にしようとしているアドオンで問題となる可能性があります。 詳しくは、{{ Bug(407725) }} と {{ Bug(467045) }} をご覧ください。

+

興味深い新機能

+

すべてのタブのイベントを監視する

+

Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、すべてのタブのイベントを監視する をご覧ください。

+

テーマ開発者の方へ

+ diff --git a/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html b/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..95a990a367 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/dom_improvements/index.html @@ -0,0 +1,29 @@ +--- +title: DOM improvements in Firefox 3 +slug: DOM_improvements_in_Firefox_3 +tags: + - DOM + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/DOM_improvements +--- +

{{ Fx_minversion_header(3) }} +

Firefox 3 では、特に、他のブラウザによる独自 DOM 拡張 のサポートに関するものを含む、多くの Document Object Model (DOM) 実装が追加されました。この記事は、これらの実装の一覧と詳細なドキュメントへのリンクを提供します。

+ +

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

+

参照

+ +
+
+{{ languages( { "en": "en/DOM_improvements_in_Firefox_3", "es": "es/Mejoras_DOM_en_Firefox_3", "fr": "fr/Am\u00e9liorations_DOM_dans_Firefox_3", "pl": "pl/Poprawki_DOM_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..c92ff3cc1b --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/full_page_zoom/index.html @@ -0,0 +1,41 @@ +--- +title: Full page zoom +slug: Full_page_zoom +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom +--- +

{{ Fx_minversion_header(3) }} +{{ Gecko_minversion_header(1.9) }} +

フルページズーム (あるいは単にフルズーム) は Firefox 3 の新機能です。 +

{{ 英語版章題("Example (XUL:browser)") }} +

+

例 (XUL:browser)

+

以下の例は、現在フォーカスがあたっているブラウザウィンドウでの利用をデモしています。これは Firefox 拡張機能での典型的な利用方法です。 +

+
var zoom = 1.5;
+var docViewer = getBrowser().selectedBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+

{{ 英語版章題("Example (XUL:iframe)") }} +

+

例 (XUL:iframe)

+

フルズーム機能を XUL:iframe でも同様に使用することができます。しかし、iframe には markupDocumentViewer プロパティがないため、最初に以下のようにする必要があります: +

+
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+

{{ 英語版章題("References") }} +

+

参考資料

+ +
+
+{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..abef2a2cfd --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/notable_bugs_fixed/index.html @@ -0,0 +1,32 @@ +--- +title: Notable bugs fixed in Firefox 3 +slug: Notable_bugs_fixed_in_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed +--- +

この記事は、ドキュメントで必ずしも明白に説明されていない、Firefox 3 で修正された重要なバグの修正の一覧を提供します。 +

+ +

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

+

参照

+ +
+
+{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html b/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..268528b155 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/svg_improvements/index.html @@ -0,0 +1,56 @@ +--- +title: SVG improvements in Firefox 3 +slug: SVG_improvements_in_Firefox_3 +tags: + - Firefox 3 + - SVG +translation_of: Mozilla/Firefox/Releases/3/SVG_improvements +--- +

{{ Fx_minversion_header(3) }} +

Firefox 3 では、以前のバージョンの Firefox よりも改善された Scalable Vector Graphics (SVG) サポートが追加されました。これらの機能は、別の場所で文書化されていますが、この記事は、便利な一覧を提供することで、どの機能が Firefox 3 で追加されたのかを判別しやすくします。 +

+ +

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

+

参照

+ +


+


+


+

+
+
+{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }} diff --git a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..f4237195d7 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html @@ -0,0 +1,157 @@ +--- +title: Updating extensions for Firefox 3 +slug: Updating_extensions_for_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +

このドキュメントは、拡張機能を更新して Firefox 3 に対応させたいと考える開発者のために役立つ情報を提供します。

+ +

読み進める前に、私たちからひとつだけ参考になるヒントをお教えしましょう。もしあなたの拡張機能に必要な変更がインストール定義ファイル内の maxVersion 項目の更新だけで、なおかつ addons.mozilla.org に拡張機能を登録している場合、新しいバージョンの拡張機能をアップロードする必要はありません！ AMO 上の「開発者用コントロールパネル」を使って maxVersion を更新するだけで作業は完了です。この方法なら、拡張機能が再度レビューに回ることもありません。

+ +

Step 1: インストール定義ファイルを更新する

+ +

最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために インストール定義ファイル (install.rdf) を更新する作業です。

+ +

ファイルを開いて、互換性がある Firefox の最高バージョンを示す行を見つけます。Firefox 2 向けの拡張機能であれば、以下のように書かれているはずです。

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

これを Firefox 3 との互換性を示すように変更します。

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

次にアドオンを再インストールします。

+ +

なお、Firefox 3 ではバージョン番号の余計な「.0」が廃止されますので、「3.0.0.*」の代わりに「3.0.*」と書くだけで済みます。

+ +

これまでに、一部の拡張機能に影響すると思われる API の変更がいくつも行われています (まだ今後も変更は行われるでしょう)。私たちは現在、これらの変更の完全なリストを作成中です。

+ +
註: もしあなたの拡張機能が、インストール定義ファイル の代わりに、まだ Install.js スクリプトを使っている場合は、今回インストール定義ファイルに移行していただく必要があります。Firefox 3 は XPI ファイル内の install.js スクリプトをサポートしません。
+ +

インストール定義ファイルに翻訳を追加する

+ +

Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは 拡張機能の説明の翻訳 をご覧ください。

+ +

Step 2: 安全な更新を提供しているか確認する

+ +

あなたが独自にアドオンを配布していて、addons.mozilla.org のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは 安全な更新 をご覧ください。

+ +

Step 3: 変更された API に対応する

+ +

いくつかの API は様々な方法で変更が行われています。それらの中で、多くの拡張機能に影響を与えることが予想される最も大幅な変更を以下にまとめました。

+ +

DOM

+ +

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは + document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については + W3C DOM FAQ を参照してください。

+ +

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 + 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

+ +

ブックマークと履歴

+ +

あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、Places という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、Places への移行ガイド で詳しく解説しています。

+ +

ダウンロードマネージャ

+ +

RDF データ形式から Storage API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは nsIDownloadManager、nsIDownloadProgressListener、ダウンロードの監視 を参照してください。

+ +

パスワードマネージャ

+ +

あなたの拡張機能からパスワードマネージャを利用してユーザのログイン情報にアクセスしている場合、新しいログインマネージャ API を利用するように更新する必要があります。

+ + + +

あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは ログインマネージャ用ストレージモジュールの作成 をご覧ください。

+ +

ポップアップ (メニュー、コンテキストメニュー、ツールチップ、パネル)

+ +

XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては ポップアップの使用 ガイドをご覧ください。特筆すべき点は、popup.showPopup が非推奨となり、新しい popup.openPopup と popup.openPopupAtScreen に置き換えられたことです。

+ +

自動補完

+ +

nsIAutoCompleteController インタフェースの handleEnter() メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。

+ +

DOMParser

+ + + +

削除されたインタフェース

+ +

以下のインタフェースは、Firefox 3 の基盤である Gecko 1.9 から削除されました。あなたの拡張機能でいずれかを使用している場合、コードを更新する必要があるでしょう。

+ + + +

Step 4: 関連するクローム周りの変更を確認する

+ +

あなたのコードに修正を加える必要があるかもしれない小さな変更がクロームに対して行われました。「browser-bottombox」と呼ばれる新しい vbox が追加されました。これは、ブラウザウィンドウの下部にあるページ内検索バーとステータスバーを含むものです。この変更は見た目には影響しませんが、あなたの拡張機能がこれらの要素に関するクロームにオーバーレイを行っている場合、影響を受ける可能性があります。

+ +

例えばこれまで、次のように、ステータスバーの直前にクロームをオーバーレイしていた場合、

+ +
<window id="main-window">
+<something insertbefore="status-bar" />
+</window>
+
+ +

今後は次のようにオーバーレイを行う必要があります。

+ +
<vbox id="browser-bottombox">
+<something insertbefore="status-bar" />
+</vbox>
+
+ +

その他の変更

+ +

もし、拡張機能を Firefox 3 対応にするために必要な小さい変更があったら、ここに追加してください。

+ + + +

  

+ +

  

+ +
+ +
+ +

 

diff --git a/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..1ea0118570 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/3/updating_web_applications/index.html @@ -0,0 +1,107 @@ +--- +title: Updating web applications for Firefox 3 +slug: Updating_web_applications_for_Firefox_3 +tags: + - Firefox 3 + - 要更新 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +

{{ Fx_minversion_header(3) }} 来たる Firefox 3 では、あなたが利用したいであろう新機能と同様に、ウェブサイトやウェブアプリケーションに影響するであろう多くの変更が施されています。この記事は Firefox 3 を最大限活用するためにあなたのコンテンツを更新する作業の出発点となるでしょう。

+ +

{{ 英語版章題("DOM changes") }}

+ +

DOM の変更

+ +

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは + document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については + W3C DOM FAQ を参照してください。

+ +

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 + 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

+ +

{{ 英語版章題("HTML changes") }}

+ +

HTML の変更

+ +

{{ 英語版章題("Changes to character set inheritance") }}

+ +

キャラクタセット継承に対する変更

+ +

Firefox 3 では、frame や iframe が親のキャラクタセットを継承できてしまうセキュリティ上のバグが修正されています。これにより、場合によっては問題が起こる可能性があります。フレームが親のキャラクタセットを継承できるのは、フレームと親がともに同じサーバーから読み込まれている場合に限られます。もしあなたのページが、他のサーバーから読み込まれたフレームが同じキャラクタセットを継承することを前提に作られているなら、フレームの HTML を更新してキャラクタセットを明確に指定するべきです。

+ +

{{ 英語版章題("Change to the SCRIPT element") }}

+ +

SCRIPT 要素に対する変更

+ +

text/html 文書における <script> 要素は、たとえ 間に内容を含めなくても、HTML 4 文書における 閉じ タグである </script> を必要とするようになりました。以前のバージョンの Firefox では、以下のようにすることが可能でした。：

+ +
<script ... />
+
+ +

今バージョンからマークアップは HTML の仕様に従わなければならず（それが実際に HTML である場合）、以下のように実際に閉じなければなりません。：

+ +
<script ...></script>
+
+ +

これは互換性とセキュリティの両方を改善します。

+ +

{{ 英語版章題("CSS changes") }}

+ +

CSS の変更

+ +

{{ 英語版章題("Change to font-size based on em, ex units") }}

+ +

em、ex 単位に基づいた font-size に対する変更

+ +

em、ex 単位での font-size の値はユーザの最小フォントサイズ設定の影響を受けていました。例えば、フォントが最小フォントサイズより大きく表示されるなら、em と ex 単位で font-size を指定されたフォントは最小フォントサイズ設定に従って拡大されるでしょう。これは割合に基づいたフォントサイズの振る舞いと矛盾していました。

+ +

em 及び ex 単位での font-size の値は、ユーザの最小フォントサイズの影響を受けることなく、"意図されたフォントサイズ" に基づくようになりました。言い換えれば、フォントサイズは常にデザイナーの意図に従って計算され、その後に最小フォントサイズのための調整が行われるようになったということです。

+ +

デモは https://bugzilla.mozilla.org/attachment.cgi?id=322943 を参照してください（違いを知るためには最小フォントサイズを 6 以上にして見る必要があります。二つの箱のカスケードは Firefox 2 では異なった振る舞いをします。なぜなら、em ベースのフォントサイズは最小フォントサイズの "影響を受ける" からです）。

+ +

{{ 英語版章題("Security changes") }}

+ +

セキュリティに関する変更

+ +

{{ 英語版章題("Chrome access") }}

+ +

クロームへのアクセス

+ +

Firefox のこれまでのバージョンでは、Web ページは chrome:// プロトコルを使ってクロームからスクリプトや画像を読み込むことが可能でした。特に、このような仕様によって、アドオンがインストールされているかどうかをサイトが判別することが可能でした。これは、ブラウザにセキュリティ機能を追加するアドオンを回避して、ユーザのセキュリティを侵害するのに利用される恐れがありました。

+ +

Firefox 3 では、Web コンテンツは chrome://browser/ および chrome://toolkit/ 以下にあるコンテンツに限ってアクセスできます。これらのファイルは Web コンテンツからアクセスされることを意図したものです。他のクロームコンテンツはすべて、Web からのアクセスが禁止されます。

+ +

ただし、拡張機能が、内部のコンテンツを Web からアクセス可能にする方法があります。その方法とは、以下のように、chrome.manifest ファイルに特別なフラグを指定することです。

+ +

content mypackage location/ contentaccessible=yes

+ +

これは頻繁に必要となるものではありませんが、Web からのアクセスが必要な、まれなケースのために用意されています。Firefox はユーザに拡張が contentaccessible フラグをこのような方法で用いることで潜在的セキュリティリスクになることを警告するかもしれないことに注意してください。

+ +
注意: Firefox 2 では contentaccessible フラグが認識されない (フラグを含む行全体が無視されてしまう) ことから、アドオンを Firefox 2 と Firefox 3 の両方に対応させたい場合は、以下のように指定します。 + +
content mypackage location/
+content mypackage location/ contentaccessible=yes
+
+
+ +

{{ 英語版章題("File upload fields") }}

+ +

ファイルアップロード用フォーム項目

+ +

Firefox のこれまでのバージョンでは、ユーザがファイルをアップロードするために送信する際、そのファイルのフルパスが Web アプリケーションに公開されてしまう場合がありました。このプライバシーの懸念は、Firefox 3 で、ファイル名のみをWeb アプリケーションに公開するよう仕様を変更することで解決されました。

+ +

{{ 英語版章題("JavaScript changes") }}

+ +

JavaScript の変更

+ +

Firefox 3 は JavaScript 1.8 をサポートします。あなたの Web サイトや Web アプリケーションの更新が必要となりうる重要な変更点としては、時代遅れであり非標準の Script オブジェクトがサポートされなくなることが挙げられます。これは <script> タグではなく、標準化されることのなかった JavaScript オブジェクトのことです。どちらにしてもあなたが使用していた可能性は低いでしょうから、これが問題になることは恐らくないでしょう。

+ +

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

+ +

参考

+ + diff --git a/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html new file mode 100644 index 0000000000..2fd58a9985 --- /dev/null +++ b/files/ja/mozilla/firefox/releases/4/the_add-on_bar/index.html @@ -0,0 +1,76 @@ +--- +title: アドオンバー +slug: The_add-on_bar +tags: + - Add-ons + - Extensions + - Firefox 4 + - Toolbar + - 要更新 +translation_of: Mozilla/Firefox/Releases/4/The_add-on_bar +--- +
{{fx_minversion_header("4")}} {{draft}}
+

Firefox 4 よりウィンドウの下部に新しいツールバーを実装する為、ブラウザウィンドウの下部からステータスバーが削除されます。この新しいツールバーは ID "addon-bar" を持った、標準の XUL {{XULElem("toolbar")}} です。アドオンはこのバーにコンテンツを挿入することが可能であり、また、ユーザーはツールバーのカスタマイズ中にボタンをアドオンバーにドラッグすることができます。これがアドオンバーと旧ステータスバーの間の主な相違点です。標準のツールバーであるため、どの XUL 要素でもアドオンバーに配置することができます。

+
+ 注記: 当面は、Firefox にはステータスバーが存在することを期待するアドオンがうまく動作するようにするためのシムが噛ませてあります。但しこれは一時的な措置であり、じきに削除されます。アドオンをアップデートしてください。
+

アドオンバーに要素を加える

+

アドオンバーは ID "addon-bar" を持つ XUL ツールバーです。次のコードは、一番最近使われたウィンドウを探し出し、XUL {{XULElem("label")}} 要素を用いて単に "Hello world!" のテキストを表示する新しいアイテムをアドオンバーに加えます。

+
// 一番最近使われたウィンドウを探す
+
+var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
+                  .getService(Components.interfaces.nsIWindowMediator);
+var doc = mediator.getMostRecentWindow("navigator:browser").document;
+
+// そのウィンドウのアドオンバーを取得する
+var addonBar = doc.getElementById("addon-bar");
+
+// 新しいツールバーアイテムを構築する
+var newItem = doc.createElement("toolbaritem");
+var itemLabel = doc.createElement("label");
+
+// アイテムをツールバーに追加しテキストラベルをセットする
+newItem.appendChild(itemLabel);
+addonBar.appendChild(newItem);
+itemLabel.value = "Hello world!";
+
+

To add the button only once create a bool pref to check if it is the first run. For example:

+
var firstrun = Services.prefs.getBoolPref("extensions.YOUREXT.firstrun");
+
+var curVersion = "0.0.0";
+
+if (firstrun) {
+  Services.prefs.setBoolPref("extensions.YOUREXT.firstrun", false);
+  Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
+  /* Code related to firstrun */
+} else {
+  try {
+    var installedVersion = Services.prefs.getCharPref("extensions.YOUREXT.installedVersion");
+    if (curVersion > installedVersion) {
+      Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
+      /* Code related to upgrade */
+    }
+  } catch (ex) {
+    /* Code related to a reinstall */
+  }
+}
+
+

Firefox の各バージョンでのオーバーレイの使用方法

+

Firefox 3.6 とそれ以前のバージョンとの互換性を保持したままアドオンバーのサポートを追加するには、2 つのオーバーレイを使用する必要があります。
+ The chrome.manifest file can specify which file is used by which Firefox version by using manifest flags:

+
overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlayold.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<4.0
+overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion>=4.0
+
+

注記: the appversion has to be at least 2 digits long or it won't work with versions of Gecko before 1.8.0.13 and 1.8.1.5.

+

デフォルトでボタンを追加

+

参照 : Adding a button by default

+

見た目の違い

+ +

関連情報

+ diff --git a/files/ja/mozilla_hacker's_getting_started_guide/index.html b/files/ja/mozilla_hacker's_getting_started_guide/index.html deleted file mode 100644 index 80eb0d79bc..0000000000 --- a/files/ja/mozilla_hacker's_getting_started_guide/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -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 サイトに限定して検索することのできる上級 (詳細) 検索オプションを提供しています。

-
-

原文書の情報

-
    -
  • 著者: Kai Engert
    • -
  • 最終更新日: September 24, 2004
    • -
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細
    • -
-
-
-  
diff --git a/files/ja/mozilla_modules_and_module_ownership/index.html b/files/ja/mozilla_modules_and_module_ownership/index.html deleted file mode 100644 index eec08886fc..0000000000 --- a/files/ja/mozilla_modules_and_module_ownership/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Mozilla Modules and Module Ownership -slug: Mozilla_Modules_and_Module_Ownership -tags: - - Developing Mozilla ---- -

Mozilla モジュールの特徴、モジュールオーナーの役割、モジュール所有者の基準、モジュールオーナーの指名。 -

-

意思決定の分散

-

コードの適切性、品質、または CVS ソースレポジトリにチェックインされる準備が整っているのかという点に関して mozilla.org のスタッフメンバーが決定を下していない事項が多数あります。スタッフがこのような作業を行うには Mozilla プロジェクトがあまりに大きすぎるためです。プロジェクトにはコアテクノロジーセット (レイアウトエンジン、ネットワークライブラリ、クロスプラットフォームコンポーネントモデルなど)とこれらのテクノロジーで構築されたアプリケーションセット (ブラウザ、メール/ニュースリーダー、Internet Relay Chat クライアント) の両方が含まれています。mozilla.org のスタッフは、現行の開発に必要な大量の決定を下すための態勢が整っていません。ひとつには、mozilla.org スタッフがコードのあらゆる分野の専門家であると思うのはおこがましいことだと考えるからです。間違いなくそんなことはありません。もうひとつには、スタッフが少人数であることが挙げられます。特定のコードに関する大半の決定を mozilla.org のスタッフが下そうとしたならばプロジェクトはなかなか進捗しなくなってしまいます。 -

この代わりとして、mozilla.org は「モジュール」およびモジュールオーナーシップを通じて広範な参加者に意思決定を分散しています。モジュールとは、合理的に定義された境界を持つ機能の一部分を実装するファイルセットです。モジュールは、アクセシビリティのための「accessible」などディレクトリ内のファイルセットの場合があります。または「スタイルシート」などのようにより概念的な場合があります。このような場合、モジュールにはソースツリーのさまざまな領域内に多数のファイルが含まれます。モジュールが C または C++ で記述されている場合には、.h ファイルと、.c または .cpp ファイルの 2 ファイルのみを含むことができます (一例は xpcom/ds/pldhash.{{ mediawiki.external('ch') }} で、これは xpcom の他の要素とは個別に処理されます)。 -

「合理的に定義された境界」といっても、絶対的に明確ではないのは当然です。特定の機能が終了し別の機能が開始する場合に重複やあいまいさがある場合、この定義自体がコードを反映するため、私たちはこの定義を使用します。絶対的な定義を作成しようとすると、複雑なルールや例外が要求されますが、これらはほとんどの場合必要とされません。このような定義を考案するためにエネルギーを使うよりも、必要に応じて mozilla.org のスタッフが仲介となってモジュールオーナーに重複または共有したオーナーシップを可能であれば管理していただきたいと考えています。 -

-

モジュールオーナーシップの役割

-

「モジュールオーナー」は mozilla.org のスタッフがモジュールの開発のリーダーシップを委ねた人を指します。モジュールオーナーの責任範囲は、コードの品質を改善する、適宜改訂と刷新を実施する、残りのコードベースの開発との調整を図る、モジュールの方向性に関する共通の理解を構築および維持する、適宜 API を開発する、可能な限り多くの文書を作成する、コードの貢献に適切に対応する、提言を策定したり、コミュニティから述べられたニーズをまとめる、有能な新規参加者を喜んで受け入れる環境を作るなど、広範囲に及びます。 -

コードをそのモジュールにチェックインするためには、モジュールオーナーの承認が必要です。これと引き換えに、私たちはモジュールオーナーに対して、受け取るものに注意を払う、他の人によって実行されたパッチに対応する、そして他の人によって開発されたコードを正当に評価することを期待しています。この役割を果たす方法についてはかなりの柔軟性がモジュールオーナーに与えられています。mozilla.org のスタッフは、モジュールオーナーがモジュールを管理する方法についての複雑なルールや手順を規定しません。作業がうまくいき、コミュニティ全体が満足すれば、これに越したことはありません。そうでない場合には、うまくいくように問題点を見つけて正していけばいいのです。 -

モジュールオーナーはモジュールの管理作業すべてを自分で行う必要はありません。モジュールオーナーは、モジュールにチェックインするためにコードを認可する能力のある他の人を指名することができます。これらの開発者は「ピア」と呼ばれ、優れたモジュールオーナーに求められる資質の多くを持つ人がその任に就くべきです。モジュールオーナーは、自分自身が作成したコードを評価する場合、ピアを指名して評価してもらわなければなりません。モジュールオーナー自身が自分のコードのレビューをすることは許されません。モジュールオーナーがいない場合には、そのモジュールをコードにチェックインするためにピアの承認があれば十分です。 -

モジュールオーナーは専制的な支配者ではありません。コミュニティからの入力を基に、そしてコミュニティの利益を最優先にして決定する権限を与えられています。コードの記述はコミュニティが行うので、モジュールオーナーに記述は求められません (もちろん、他の人たちと同じように、モジュールオーナーの雇用者やコミュニティが記述を求めるなどさまざまな理由から、モジュールオーナーがコードを記述してもかまいません)。モジュールオーナーはそのモジュールに実行されるパッチに注意を払う必要があります。といっても、「注意を払う」ということはすべてのパッチに同意することを意味するわけではありません。Mozilla にとって意味のないパッチもあれば、実装してもうまくいかないパッチもあるかもしれません。モジュールオーナーにはパッチを拒否する権限が与えられています。これはモジュールオーナーの不可欠な役割のひとつです。mozilla.org はモジュールオーナーに、パッチへの変更を求める理由、パッチを拒否する理由、または一定期間レビューを延期する理由など該当するバグのレポートをお願いしています。使えるパッチにするためにパッチをリライトすることはお願いも期待もしていません。同様に、次回の期日を考慮するとある有望なパッチのレビューを延期しなければならない場合があります。たとえば、パッチに関心はあるが、次のマイルストーンに向かないという場合です。このような場合には、マイルストーンに必要な状況が整うまでパッチのレビューを延期する方が得策です。該当するバグのレポートにその旨を記述してください。そして当然のことですが、mozilla.org スタッフによるレビューを行わずに頻繁にまた長期間にわたって延期し続けることはできません。 -

-

mozilla.org スタッフのレビュー

-

論争に発展した場合やその他の方法で解決できない場合には、mozilla.org が関与します。モジュールオーナーが特定のアクションに同意する公式見解を mozilla.org に求める場合もあれば、モジュールオーナーが改善できるであろう方法をその他の貢献者が提案する場合もあります。現在論争が展開されている場合もあります。可能であればこれらの問題をコミュニティが解決するのが望ましいと考えますが、常にそうはいかないということも分かっています。「こうでなければならない」というような絶対的な決定は避けようと努めますが、必要な場合には絶対的な決定を下します。 -

-

モジュールオーナーシップの基準

-

優れたモジュールオーナーシップにとって重要な要素は多数あります。もちろん第一は問題のコードに対する個人の専門的な知識です。しかしこれまでの経験から、付加的な基準も重要であること、また優れたハッカーがモジュールオーナーに適しているとは限らないことが分かっています。優れたモジュールオーナーのための基準は以下のとおりです。 -

-
  1. モジュールのコードに対する専門知識 -
  2. そのモジュールに現在関与している -
  3. モジュールの進むべき方向性を深く理解し、ビジョンを持っている -
  4. Mozilla コードベース全体、ならびにコードベースとモジュールの関係を正しく理解している -
  5. パッチや新機能への貢献を含み、そのモジュールのコードを評価する能力 -
  6. コードベースの他の部分に対するコードの影響を評価する能力 -
  7. 多様で地理的に分散しているコミュニティとのコミュニケーション能力 -
  8. 出処に関係なく (つまり「ここで開発されたものではない」シンドロームに罹っていない)、真価で貢献を評価しようとする姿勢 -
  9. そのモジュールの対象となるさまざまなコンシューマの多様な視点とニーズを考慮する能力 -
  10. 適宜ファクタリングやその他の抽出技法によってさまざまなニーズを解決する能力 -
-

モジュールオーナーの指名

-

ある個人が一定期間モジュールで作業を行い、モジュールを完了させるまでの間、基準のほとんど (完璧を求めるほど世間知らずではありません) を満たすことができる能力を証明し、そしてこの人をモジュールオーナーとして指名することへの総意が生まれることが望ましいと考えています。このように、指名は任命というよりはむしろ確認です。これまで常にそうしてきたわけではなく、また常にこの方法がうまくいったわけでもありませんが、今後よりよい仕事をしていこうと思っています。 -

これは、モジュールオーナーが不在の時があるということを意味します。特にほとんど注目されてなかったモジュールや廃り始めたモジュール、また勇敢な人が状況を把握し再び軌道に乗せるために尽力してくれる場合には、モジュールオーナーが不在です。これらの人たちの取り組みに対して大いに感謝するものです。ただし、これらの人たちをモジュールオーナーに指名することはすぐにはできません。当然のことながら、このモジュールの作業に相応の時間を費やさないと、この人が基準のいくつか、特に 1 から 5 の基準を満たしていることを証明することは困難です。この作業を行うことができるだけの幅広いそして深い専門知識をある人が持っているというのは十分にあり得ることですが、これはどちらかといえば例外だと思います。 -

モジュールオーナーを決定する際、上記の基準が各モジュールに対して同じ重要性を持っているとは限りません。モジュールごとに特定の要素の重要性は変わります。たとえば、基準 4 (Mozilla コードベース全体、ならびにコードベースとモジュールの関係を正しく理解している) と 6 (コードベースの他の部分に対するコードの影響を評価する能力) は自己完結型のモジュールにはあまり重要ではありませんが、コードの他の部分に多大な影響を及ぼすコアテクノロジーを含むモジュールにとっては非常に重要です。同様に、基準 9 (そのモジュールの対象となるさまざまなコンシューマの多様な視点とニーズを考慮する能力) と 10 (適宜ファクタリングやその他の抽出技法によってさまざまなニーズを解決する能力) は、少人数の貢献者のために明確に定義された機能を果たすモジュールにはあまり重要ではありませんが、さまざまな用途と広範な貢献者グループをサポートするモジュールには不可欠です。 -

-

Despot によるモジュールオーナーとピアデータの追跡

-

mozilla.org は「Despot」(despot.mozilla.org) として知られているデータベースを使用してモジュール、モジュールオーナーおよびピアを追跡しています。データは www.mozilla.org/owners.html をご覧ください。このページには、各モジュールを構成するコードの指示も記載されています。 -

-

モジュールオーナーシップの譲渡

-

モジュールオーナーシップの譲渡は mozilla.org を通じて行われます。モジュールオーナーを辞任するためには、staff@mozilla.org にメールを送信してください。遠慮なく新しいモジュールオーナーの推薦をメールに記載してください。モジュールによっては、モジュールオーナーシップの基準を満たしていることが証明済みで、モジュールオーナーになることに興味を持っており、継承者となることを概ね了承しているピアがいる場合もあります。このような場合には、mozilla.org のスタッフが Despot にオーナーシップの変更を行います。それ以外の場合には、そのモジュールに関するオーナーシップの基準を満たしていることを証明済みの人はいないでしょう。このような場合には、オーナーが育つまでオーナー不在でモジュールを進行し、モジュールのピアがそのモジュールにチェックインするために必要なレビューと承認を行います。 -

-

Bugzilla コンポーネントオーナーシップとの関係

-

モジュールオーナー/ピアの役割と Bugzilla コンポーネントの既定のオーナーの役割が不明瞭な場合があります。しかし役割は全く異なっています。コンポーネントオーナーは、特定のコンポーネントに対するバグレポートの受け取りに最も適した人のことで、モジュールの方向性やコードのレビューに関しての決定を下すために最適な人とは限りません。これにはいくつかの理由があります。第一に、Bugzilla コンポーネントはモジュールに正確に対応してはいません。これは、コンポーネントがバグを確認および経験する方法を反映しているが、コードの構造を必ずしも反映していないためです。第二に、バグの管理は、モジュールのコード管理とは異なる作業です。必要となるスキルが異なります。したがって、非常に優れたハッカーであっても、バグレポートを定期的にレビューする、進捗状況を追跡する、正しいオーナーにバグを再度割り当てる、テストケースが存在することを確認するなどの作業を得意としない場合があります。これらのスキルに優れていてもモジュールオーナーにふさわしくない貢献者もいます。Bugzilla コンポーネントオーナーとモジュールオーナーが同一人物の場合もありますが、多くの場合、別の人物がそれぞれのオーナーです。 -

-

モジュールのメンテナンス不良

-

モジュールのメンテナンス状態が悪く、残りのコードベースとうまく動かない場合があります。モジュールオーナーが不在である、または指名されたモジュールオーナーが他の作業に忙しくてそのモジュールのメンテナンスができない場合に発生します。あるいはモジュールオーナーはいるが、コミュニティ全般が不適切だと考えるモジュールへのアプローチをとった場合にも発生する可能性があります。mozilla.org のスタッフは、開発コミュニティがこのようなモジュールを確認し、解決策を提案して改善策を実施することを望んでいます。何らかの理由で不可能な場合には、mozilla.org のスタッフが可能な限り最善の解決策を見つけ出すために尽力させていただきます。 -

-
-

原文書の情報

-
  • 最終更新日: September 3, 2006 -
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 -
-
-
-
-{{ languages( { "en": "en/Mozilla_Modules_and_Module_Ownership" } ) }} diff --git a/files/ja/mozilla_svg_status/index.html b/files/ja/mozilla_svg_status/index.html deleted file mode 100644 index 7dcb1173e2..0000000000 --- a/files/ja/mozilla_svg_status/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Mozilla SVG Status -slug: Mozilla_SVG_Status -tags: - - SVG ---- -
-

この文書は現在の開発バージョン ("trunk") の Mozilla SVG の現状を取り扱っています。もし Firefox 2 の SVG 機能に関する情報をお探しの場合、別のページ に情報があります。 -

-
-

要素の実装状況

-

SVG 1.1 の要素とネイティブサポートの状況の概略です。章は現在の状態 (サポート済み、サポート中、現在未サポート) によってマークされています。未実装部分のほとんどは 3 つの大きなモジュール (フォントとフィルタ、アニメーション) に該当します。 -

- - -
要素 備考
Structure モジュール {{ 訳注("日本語訳") }}
svg {{ 訳注() }}
  • 実装済み。
  • DOM 属性 currentScale と currentTranslate は実装されていますが、パンとズームのユーザーインターフェースはありません。
  • SVGSVGElement
    • 未実装の属性: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • 未実装のバインディング: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, getElementById
g {{ 訳注("日本語訳") }}
  • 実装済み。
defs {{ 訳注("日本語訳") }}
  • 実装済み。
desc {{ 訳注("日本語訳") }}
  • 実装済み。
  • DOM に保存されるのみでユーザインタフェースなし。
title {{ 訳注("日本語訳") }}
  • 実装済み。
metadata {{ 訳注("日本語訳") }}
  • 実装済み。
  • DOM に保存されるのみでユーザインタフェースなし。
symbol {{ 訳注("日本語訳") }}
  • 実装済み。
use {{ 訳注("日本語訳") }}
  • 実装済み。
  • ドキュメント内の参照のみ動作 ({{ Bug(269482) }}).
  • <svg:use> カスケーディング規則に完全に従っていない ({{ Bug(265894) }}).
  • SVGElementInstance ツリーにイベントを伝えない ({{ Bug(265895) }}).
Conditional Processing モジュール {{ 訳注("日本語訳") }}
switch {{ 訳注("日本語訳") }}
  • 実装済み。
Image モジュール {{ 訳注("日本語訳") }}
image {{ 訳注("日本語訳") }}
  • 実装済み。
  • ラスタ画像のみ動作 ({{ Bug(272288) }})。
Style モジュール {{ 訳注("日本語訳") }}
style {{ 訳注("日本語訳") }}
  • 実装済み。
Shape モジュール {{ 訳注("日本語訳") }}
path {{ 訳注("日本語訳") }}
  • 実装済み。
  • SVGPathElement
    • 未実装の属性: normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
rect {{ 訳注("日本語訳") }}
  • 実装済み。
circle {{ 訳注("日本語訳") }}
  • 実装済み。
line {{ 訳注("日本語訳") }}
  • 実装済み。
ellipse {{ 訳注("日本語訳") }}
  • 実装済み。
polyline {{ 訳注("日本語訳") }}
  • 実装済み。
polygon {{ 訳注("日本語訳") }}
  • 実装済み。
Text モジュール {{ 訳注("日本語訳") }}
text {{ 訳注("日本語訳") }}
  • 実装済み。
  • フォントフェイスの選択はフェイスの候補リストの最初の項目しか試しません。
  • SVGTextElement
    • 未実装の属性: rotate, textLength, lengthAdjust
    • 未実装のバインディング: selectSubString
tspan {{ 訳注("日本語訳") }}
  • 実装済み。
  • SVGTSpanElement
    • 未実装の属性: rotate, textLength, lengthAdjust
    • 未実装のバインディング: selectSubString
tref {{ 訳注("日本語訳") }}
  • 未実装。
textPath {{ 訳注("日本語訳") }}
  • 実装済み。
  • 未実装のバインディング: selectSubString
altGlyph {{ 訳注("日本語訳") }}
  • 未実装。
altGlyphDef {{ 訳注("日本語訳") }}
  • 未実装。
altGlyphItem {{ 訳注("日本語訳") }}
  • 未実装。
glyphRef {{ 訳注("日本語訳") }}
  • 未実装。
Marker モジュール {{ 訳注("日本語訳") }}
marker {{ 訳注("日本語訳") }}
  • 実装済み。
Color Profile モジュール {{ 訳注("日本語訳") }}
color-profile {{ 訳注("日本語訳") }}
  • 未実装。
Gradient モジュール {{ 訳注("日本語訳") }}
linearGradient {{ 訳注("日本語訳") }}
  • 実装済み。
radialGradient {{ 訳注("日本語訳") }}
  • 実装済み。
stop {{ 訳注("日本語訳") }}
  • 実装済み。
Pattern モジュール {{ 訳注("日本語訳") }}
pattern {{ 訳注("日本語訳") }}
  • 実装済み。
Clip モジュール {{ 訳注("日本語訳") }}
clipPath {{ 訳注("日本語訳") }}
  • 実装済み。
Mask モジュール {{ 訳注("日本語訳") }}
mask {{ 訳注("日本語訳") }}
  • 実装済み。
Filter モジュール {{ 訳注("日本語訳") }}
filter {{ 訳注("日本語訳") }}
  • 実装済み。
  • 擬似画像入力は SourceGraphic and SourceAlpha のみ実装。
  • 未実装の擬似画像入力かフィルタ要素を使うとそのフィルタは無視され、参照された画像はフィルタ無しで表示されます。
feBlend {{ 訳注("日本語訳") }}
  • 実装済み。
feColorMatrix {{ 訳注("日本語訳") }}
  • 実装済み。
feComponentTransfer {{ 訳注("日本語訳") }}
  • 実装済み。
feComposite {{ 訳注("日本語訳") }}
  • 実装済み。
feConvolveMatrix {{ 訳注("日本語訳") }}
  • 実装済み。
feDiffuseLighting {{ 訳注("日本語訳") }}
  • 実装済み。
feDisplacementMap {{ 訳注("日本語訳") }}
  • {{ Bug(389746) }}
feFlood {{ 訳注("日本語訳") }}
  • 実装済み。
feGaussianBlur {{ 訳注("日本語訳") }}
  • 実装済み。
feImage {{ 訳注("日本語訳") }}
  • {{ Bug(390379) }}
feMerge {{ 訳注("日本語訳") }}
  • 実装済み。
feMergeNode {{ 訳注("日本語訳") }}
  • 実装済み。
feMorphology {{ 訳注("日本語訳") }}
  • 実装済み。
feOffset {{ 訳注("日本語訳") }}
  • 実装済み。
feSpecularLighting {{ 訳注("日本語訳") }}
  • 実装済み。
feTile {{ 訳注("日本語訳") }}
  • 実装済み。
feTurbulence {{ 訳注("日本語訳") }}
  • 実装済み。
feDistantLight {{ 訳注("日本語訳") }}
  • 実装済み。
fePointLight {{ 訳注("日本語訳") }}
  • 実装済み。
feSpotLight {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncR {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncG {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncB {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncA {{ 訳注("日本語訳") }}
  • 実装済み。
Cursor モジュール {{ 訳注("日本語訳") }}
cursor {{ 訳注("日本語訳") }}
  • 未実装。
Hyperlinking モジュール {{ 訳注("日本語訳") }}
a {{ 訳注("日本語訳") }}
  • xlink:href と xlink:show 属性のみ実装済み。
View モジュール {{ 訳注("日本語訳") }}
view {{ 訳注("日本語訳") }}
  • 未実装。
Scripting モジュール {{ 訳注("日本語訳") }}
script {{ 訳注("日本語訳") }}
  • 実装済み。
Animation モジュール {{ 訳注("日本語訳") }}
animate {{ 訳注("日本語訳") }}
  • {{ Bug(216462) }}
set {{ 訳注("日本語訳") }}
  • 未実装。
animateMotion {{ 訳注("日本語訳") }}
  • 未実装。
animateTransform {{ 訳注("日本語訳") }}
  • {{ Bug(216462) }}
animateColor {{ 訳注("日本語訳") }}
  • 未実装。
mpath {{ 訳注("日本語訳") }}
  • 未実装。
Font モジュール {{ 訳注("日本語訳") }}
font {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
font-face {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
glyph {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
missing-glyph {{ 訳注("日本語訳") }}
  • 未実装。
hkern {{ 訳注("日本語訳") }}
  • 未実装。
vkern {{ 訳注("日本語訳") }}
  • 未実装。
font-face-src {{ 訳注("日本語訳") }}
  • 未実装。
font-face-uri {{ 訳注("日本語訳") }}
  • 未実装。
font-face-format {{ 訳注("日本語訳") }}
  • 未実装。
font-face-name {{ 訳注("日本語訳") }}
  • 未実装。
definition-src {{ 訳注("日本語訳") }}
  • 未実装。
Extensibility モジュール {{ 訳注("日本語訳") }}
foreignObject {{ 訳注("日本語訳") }}
  • 実装済み。
-

実装のその他の注意

-

onload イベントは externalResourcesRequired 属性を考慮しません ({{ Bug(277955) }})。 -

-
-

原文書の情報

-
  • 著者: Tim Rowley -
  • 貢献者: Jonathan Watt, Steffen Wilberg -
  • 最終更新日: July 31, 2007 -
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 -
-
-
-
-{{ languages( { "en": "en/Mozilla_SVG_Status" } ) }} diff --git a/files/ja/mozistorageservice/index.html b/files/ja/mozistorageservice/index.html deleted file mode 100644 index 51f9fdce73..0000000000 --- a/files/ja/mozistorageservice/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: mozIStorageService -slug: mozIStorageService ---- -

このインタフェースを使うことでデータベースへのmozIStorageConnectionを開くことができます、また開かれていないデータベースファイルのバックアップを作成することもできます。

-

-
storage/public/mozIStorageService.idlScriptable
- - -Please add a summary to this article. - - -
-  -最終更新: Gecko 1.9 (Firefox 3)
-

-

継承元: nsISupports

-

メソッド概要

- - - - - - - - - - - - - - - -
nsIFile backupDatabaseFile(in nsIFile aDBFile, in AString aBackupFileName, [optional] in nsIFile aBackupParentDirectory);
mozIStorageConnection openDatabase(in nsIFile aDatabaseFile);
mozIStorageConnection openSpecialDatabase(in string aStorageKey);
mozIStorageConnection openUnsharedDatabase(in nsIFile aDatabaseFile);
-

メソッド

-

backupDatabaseFile()

-

指定されたファイルのバックアップを作成します。データベースは開かれていない必要があります、またはこのメソッドを呼び出す際にデータベースに対する操作が行われないことが確かである必要があります。指定されたファイル名はあくまでもサジェスチョンになります。すでにファイル名が使われている場合、ユニークなファイル名になるように処理されます。実際のバックアップファイルは戻り値になり、実際のファイル名もそこから取得することができます。

-
nsIFile backupDatabaseFile(
-  in nsIFile aDBFile,
-  in AString aBackupFileName,
-  [optional] in nsIFile aBackupParentDirectory
-);
-
-
引数
-
-
- aDBFile
-
- バックアップを取るデータベースファイル
-
- aBackupFileName
-
- 新しく作成するバックアップファイルの名前
-
- aBackupParentDirectory
-
- バックアップファイルを格納するディレクトリの名前。この引数が指定されない場合はオリジナルのデータベースファイルと同じ場所にバックアップファイルが作成されます。
-
-
戻り値
-

新しいバックアップデータベースファイルを意味するnsIFileオブジェクト

-

openSpecialDatabase()

-

要求されたストレージのタイプを特定する命名された特別なデータベースストレージへの接続を開きます。

-

註: プロファイルデータベースへはメインスレッドからのみアクセスしてください。(他の呼び出しが利用している可能性があります。)

-
引数
-
-
- aStorageKey
-
- 要求されたストレージタイプを特定するキー文字列。"profile"および"memory"が有効です。
-
-
戻り値
-

指定されたデータベースへの接続を提供する新しいmozIStorageConnectionオブジェクト

-
例外
-
-
- NS_ERROR_INVALID_ARG
-
- aStorageKeyが不正な場合
-
-

openDatabase()

-

指定されたファイルへのデータベース接続を開きます。このメソッドがNS_ERROR_FILE_CORRUPTED例外をスローする場合、mozIStorageService.backupDatabaseFile()メソッドをデータベースをバックアップするために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)

-

-

警告: 単一のファイルに対して複数の接続を確立する場合、必ず毎回大文字小文字を含め正確に同じ名前を使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは破損してしまうでしょう。

-

-

もし、仮想テーブルをデータベース中に含むのであれば(例えば、全文インデックスなど)、mozIStorageService.openUnsharedDatabase()を開く際に使うべきです。なぜならばこのようなテーブルは共有キャッシュが使えないためです。このメソッドを仮想テーブルを含むデータベースへの接続を開くために用いた場合、データベースの破損とNS_ERROR_FILE_CORRUPTED例外のスローが発生するでしょう。

-
mozIStorageConnection openDatabase(
-  in nsIFile aDatabaseFile
-);
-
-
引数
-
-
- aDatabaseFile
-
- データベースとして開くためのnsIFileオブジェクト
-
-
戻り値
-

開かれたデータベース接続であるmozIStorageConnectionオブジェクト

-
例外
-
-
- NS_ERROR_FAILURE
-
- データベースを開こうとした際にエラーが起こった場合発生
-
- NS_ERROR_FILE_CORRUPTED
-
- データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生
-
- NS_ERROR_OUT_OF_MEMORY
-
- 新しいストレージオブジェクトの割り当てが失敗した場合に発生
-
-

openUnsharedDatabase()

-

共有キャッシュを使わずに指定されたファイルへのデータベース接続を開きます。このメソッドがNS_ERROR_FILE_CORRUPTED例外をスローする場合、mozIStorageService.backupDatabaseFile()メソッドをデータベースバックアップのために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)

-

-

警告: 単一のファイルに対して複数の接続を確立する場合、必ず毎回大文字小文字を含め正確に同じ名前を使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは破損してしまうでしょう。

-

-
mozIStorageConnection openUnsharedDatabase(
-  in nsIFile aDatabaseFile
-);
-
-
引数
-
-
- aDatabaseFile
-
- データベースとして開くためのnsIFileオブジェクト
-
-
戻り値
-

開かれたデータベース接続であるmozIStorageConnectionオブジェクト

-
例外
-
-
- NS_ERROR_FAILURE
-
- データベースを開こうとした際にエラーが起こった場合発生
-
- NS_ERROR_FILE_CORRUPTED
-
- データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生
-
- NS_ERROR_OUT_OF_MEMORY
-
- 新しいストレージオブジェクトの割り当てが失敗した場合に発生
-
-

参照

- -
-
-  
-
diff --git a/files/ja/mozmill/index.html b/files/ja/mozmill/index.html deleted file mode 100644 index 8d143acee0..0000000000 --- a/files/ja/mozmill/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Mozmill -slug: Mozmill -tags: - - MozMill ---- -

MozMill はテストツールであり、Gecko ベースのアプリケーション (Firefox, Thunderbird, Songbird 等) の自動テストを書くためのフレームワークです。これは、拡張機能 としてビルドされており、IDE (integrated development environment) も含まれています。また、コマンドライン版のクライアントもあり、テストを書いたり実行したり、テストのデバッグの助けにもなります。MozMill には、ユーザとの対話をシミュレートする機能的なテストを書く助けとなる、大規模な API が用意されています。同様に、完全な ユニットテスト API もあります。

-

Mozmill テスト自動化プロジェクト は、2009 年 1 月に開始され、Firefox のための自動テスト作業をカバーしています。プロジェクトのページをご覧になるか、Mozmill Tests のドキュメントを見て、テスト書きへの貢献や MozMill テストの実行についてのイメージをつかんでください。既存のテストは、新しい Firefox のリリースのための リリーステストのサイクルで実行されます。

-

また、Mozilla Messaging チームには、MozMill による Thunderbird のテストを扱うアクティブなプロジェクトがあります。

-

インストール

-

Mozmill は、2 通りの異なる方法でインストールできます。多くの場合は、add-ons.mozilla.org からダウンロードできる Mozmill Extension をお勧めします。この拡張機能には統合された開発環境といくつかのオーサリングツール、テストを実行するためのグラフィカルなインタフェースが含まれています。再起動テストとオペレーティングシステムの対話に興味のある上級ユーザには、python pip (or setuptools) パッケージインストーラを使用した コマンドライン版のクライアント のインストールをお勧めします。

-

拡張機能版

-

拡張機能版をインストールするには、アドオンマネージャの "アドオンを入手" タブを開いて Mozmill を検索し、インストールするだけです。addons.mozilla.org の Web サイトから直接インストールすることもできます。アプリケーションを再起動してインストールを完了してください。

-

コマンドライン版のクライアント

-

コマンドライン版の MozMill をインストールするには、さらにいくつかの手順が必要になります。この手順はオペレーティングシステムにより多少異なります。

-

Windows

-

MozMill の前に、MozillaBuildSetup パッケージをシステムにインストールしてください。このパッケージの 最新ビルドを入手し、手動でインストールしてください。l10n.bat ファイルを実行した後、MozMill コマンドライン版のクライアントをインストールしてください。

-
$ easy_install pip
-$ pip install mozmill
-$ pip install mercurial     (Visual Studio がインストールされていない環境では、この レジストリファイル をダウンロードして適用し、MozMill のバイナリパッケージ を手動でインストール (setup ファイルまたは setup.cmd をコマンドプロンプトで実行) してください。)
-
-

Mac OS X

-

Mac OS X 10.4 の環境の場合は、先に python.org から Python 2.5 以降のバージョンをダウンロードしてインストールする必要があります。その後、MozMill を setuptools でインストールしてください。

-
$ curl -O http://peak.telecommunity.com/dist/ez_setup.py
-$ sudo python ez_setup.py
-$ sudo easy_install pip
-$ sudo pip install mozmill mercurial
-
-

Ubuntu

-

MozMill を Ubuntu にインストールするには、ターミナルで次の 2 つのコマンドを実行するだけです:

-
$ sudo apt-get install python-pip python-dev
-$ sudo pip install mozmill mercurial
-

MozMill の更新

-

MozMill を拡張機能としてインストールした場合は、新しいバージョンがリリースされた時に、アプリケーションから自動的に通知されます。コマンドライン版のクライアントを更新するには、次のコマンドを実行してください (sudo は Windows 環境では不要です):

-
$ sudo pip install --upgrade mozmill
-
-

さらに読むべきもの

-

他にも、いくつかの MozMill の概要を説明するページがあります。後で参照するため、これらのページをブックマークに追加しておくと良いでしょう。

- -

リファレンスデスク

- -

バグ

-

Mozmill は、Mozilla プロジェクト内の多くのテストシステムと同様に、開発段階にあります。バグを見つけたときは、既知のバグ のリストですでに報告されていないか確認してください。まだ報告されていない場合は、"Testing" の製品カテゴリの "Mozmill" コンポーネント下に 新たなバグとして報告してください。バグ報告の際は、バグを再現するためのできるだけ詳細な情報と MozMill のテストを添付してください。よろしくお願いします！

-

{{ languages( { "en": "en/Mozmill" } ) }}

-
diff --git a/files/ja/my_chrome_oven/index.html b/files/ja/my_chrome_oven/index.html deleted file mode 100644 index 4e24f2512a..0000000000 --- a/files/ja/my_chrome_oven/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: My Chrome Oven -slug: My_Chrome_Oven ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/namespace/index.html b/files/ja/namespace/index.html deleted file mode 100644 index 25e647788f..0000000000 --- a/files/ja/namespace/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Namespace (名前空間) -slug: Namespace -tags: - - CodingScripting - - Glossary - - Operating System - - オペレーティングシステム -translation_of: Glossary/Namespace ---- -

名前空間はプログラム内でコンテキストを識別する、論理的なグループの名前です。同じコンテキスト内かつ同じスコープの範囲内では、識別子は実態を一意に指定しなくてはなりません。

- -

OS のディレクトリーは名前空間です。それぞれのファイルやサブディレクトリーは一意の名前を持たなくてはなりませんが、1 つのファイルが違うタイミングで同じ名前を使用することがあるかもしれません。

- -

詳細情報

- -

基礎知識

- - diff --git a/files/ja/new_in_javascript_1.8/index.html b/files/ja/new_in_javascript_1.8/index.html deleted file mode 100644 index f8eb147290..0000000000 --- a/files/ja/new_in_javascript_1.8/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: New in JavaScript 1.8 -slug: New_in_JavaScript_1.8 -tags: - - JavaScript - - JavaScript_version_overviews ---- -
- {{Fx_minversion_header(3)}}
-

JavaScript 1.8 は（Firefox 3 に組み込まれている） Gecko 1.9 の一部分です。これは JavaScript 1.7 よりは大きな更新ではありませんが、ECMAScript 4/JavaScript 2 の進歩に追随するための更新がいくつか含まれています。このリリースは JavaScript 1.6 および JavaScript 1.7 で仕様化された新機能の全てを含んでいます。

-

JavaScript 1.8 の開発状況を追うためには、{{Bug(380236)}} を参照してください。この文書の地位については {{Bug(421027)}} を参照してください。

-
- {{英語版章題("Using JavaScript 1.8")}}
-

JavaScript 1.8 の使用

-

JavaScript 1.8 のいくつかの新機能を HTML で使用するためには、以下のようにしてください:

-
<script type="application/javascript;version=1.8"> ... あなたのコード ... </script>
-

もう 1 つの（推奨されない）方法として、<script> の非推奨の language 属性を使い、"JavaScript1.8" と定義することでもできます。

-

JavaScript shell や JavaScript XPCOM コンポーネント、XUL の <script> 要素を使うときは、JS の最新バージョン（Mozilla 1.9 では JS1.8）が自動的に使われます（{{Bug(381031)}}, {{Bug(385159)}}）。

-

新たなキーワードである "yield" と "let" を使う必要がある機能は、バージョン 1.7 以上を指定しなければなりません。 なぜなら、既存のコードがそれらのキーワードを変数や関数の名前として使っているかもしれないからです。新しいキーワードを導入していない機能（例えばジェネレータ式）は、JavaScript のバージョンを指定することなく使うことができます。

-
- {{英語版章題("Expression Closures")}}
-

式クロージャ

-

この追加機能は、典型的な ラムダ記法（日本語版）に似た表現を与える、単純な関数を書くための簡略表現に過ぎません。

-

JavaScript 1.7 以前:

-
function(x) { return x * x; }
-

JavaScript 1.8:

-
function(x) x * x
-

この構文を使うことによって、中括弧と 'return' 文を省くことができます（それらは暗黙的に補われます）。この方式でコードを書くことには、コードを構文的に短くするメリットしかありません。

-

例:

-

イベントリスナーを渡す簡略表現:

-
document.addEventListener("click", function() false, true);
-

JavaScript 1.6 からの array のメソッドである some とともにこの記法を使うと:

-
elems.some(function(elem) elem.type == "text");
-
- {{英語版章題("Generator Expressions")}}
-

ジェネレータ式

-

この追加により、ジェネレータ（JavaScript 1.7 で導入されたものです）を簡単に作成することが可能になります。ジェネレータを生成するには、通常は内部に yield を含むカスタム関数を作成しなければなりませんでしたが、この追加により、配列内包に似た構文を使って同じ性質のジェネレータ文を作成することができるようになります。

-

JavaScript 1.7 では、あるオブジェクトのためのカスタムジェネレータを作成するために、以下のようなものを書くことでしょう:

-
function add3(obj) {
-  for ( let i in obj )
-    yield i + 3;
-}
-
-let it = add3(someObj);
-
-try {
-  while (true) {
-    document.write(it.next() + "<br>\n");
-  }
-} catch (err if err instanceof StopIteration) {
-  document.write("End of record.<br>\n");
-}
-
-

JavaScript 1.8 では、ジェネレータ式を代わりに使うことで、カスタムジェネレータ関数を作成する必要性が無くなります:

-
let it = (i + 3 for (i in someObj));
-
-try {
-  while (true) {
-    document.write(it.next() + "<br>\n");
-  }
-} catch (err if err instanceof StopIteration) {
-  document.write("End of record.<br>\n");
-}
-
-

ジェネレータ式は、関数に値として渡すこともできます。これは配列があらかじめ生成される典型的な配列内包の場合と違って、本当に必要とされるまでジェネレータが実行されないので、特に注目に値します。その違いの例を挙げます:

-

JavaScript 1.7 の配列内包を使った場合

-
handleResults([ i for ( i in obj ) if ( i > 3 ) ]);
-
-function handleResults( results ) {
-  for ( let i in results )
-    // ...
-}
-
-

JavaScript 1.8 のジェネレータ式を使った場合

-
handleResults( i for ( i in obj ) if ( i > 3 ) );
-
-function handleResults( results ) {
-  for ( let i in results )
-    // ...
-}
-
-

この 2 つの例の大きな違いは、配列内包を使った場合には配列を内包するときと繰り返し処理を行うときの 2 度 "obj" 構造に対してループが実行されるのに対して、ジェネレータ式を使った場合には 1 度しかループが実行されずに済むという点です。

-
- {{英語版章題("More Array Extras")}}
-

さらなる Array の拡張

-

JavaScript 1.8 では、 Array オブジェクトに 2 つの新しい繰り返しのメソッドが導入されました:

- -
- {{英語版章題("Changes in destructuring for..in")}}
-

for..in の分配方法の変更

-

JavaScript 1.8 のリリースで生じた変更に、JavaScript 1.7 で導入された配列のキー/値の組への分割代入に関連するバグ修正があります。これまでは for ( var [key, value] in array ) を使うことで、配列のキー/値の組を分割代入することができました。しかしこのせいで、配列の配列において値を分割代入することが不可能になっていました。現在この問題は解決しています。({{Bug("366941")}})

diff --git a/files/ja/notable_bugs_fixed_in_firefox_3/index.html b/files/ja/notable_bugs_fixed_in_firefox_3/index.html deleted file mode 100644 index abef2a2cfd..0000000000 --- a/files/ja/notable_bugs_fixed_in_firefox_3/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Notable bugs fixed in Firefox 3 -slug: Notable_bugs_fixed_in_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed ---- -

この記事は、ドキュメントで必ずしも明白に説明されていない、Firefox 3 で修正された重要なバグの修正の一覧を提供します。 -

- -

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

-

参照

- -
-
-{{ languages( { "en": "en/Notable_bugs_fixed_in_Firefox_3", "es": "es/Bugs_importantes_solucionados_en_Firefox_3", "fr": "fr/Bugs_importants_corrig\u00e9s_dans_Firefox_3", "pl": "pl/Istotne_b\u0142\u0119dy_poprawione_w_Firefoksie_3" } ) }} diff --git a/files/ja/npapi/constants/index.html b/files/ja/npapi/constants/index.html deleted file mode 100644 index 3553d98300..0000000000 --- a/files/ja/npapi/constants/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Constants -slug: NPAPI/Constants -translation_of: Plugins/Guide/Constants -translation_of_original: NPAPI/Constants ---- -

このセクションはプラグイン API で使用されるプログラム定義のリファレンスです。すべてのプラグイン定義は npapi.h にあります。 -


-

-

エラーコード

- -
コード 値 説明
NPERR_NO_ERROR 0 エラーは起こりませんでした
NPERR_GENERIC_ERROR 1 特定のエラーコードを持たないエラーが起こりました
NPERR_INVALID_INSTANCE_ERROR 2 プラグインへ無効なインスタンスが渡されました
NPERR_INVALID_FUNCTABLE_ERROR 3 関数表が無効です
NPERR_MODULE_LOAD_FAILED_ERROR 4 プラグインの読み込みに失敗しました
NPERR_OUT_OF_MEMORY_ERROR 5 メモリの割り当てに失敗しました
NPERR_INVALID_PLUGIN_ERROR 6 プラグインが見つからないか無効です
NPERR_INVALID_PLUGIN_DIR_ERROR 7 プラグインディレクトリが見つからないか無効です
NPERR_INCOMPATIBLE_VERSION_ERROR 8 プラグインと Communicator のバージョンが一致しません
NPERR_INVALID_PARAM 9 パラメータが無いか無効です
NPERR_INVALID_URL 10 URL が見つからないか無効です
NPERR_FILE_NOT_FOUND 11 ファイルが見つからないか無効です
NPERR_NO_DATA 12 ストリームにデータが含まれていません
NPERR_STREAM_NOT_SEEKABLE 13 シークできるストリームが期待されます
-{{ languages( { "en": "en/NPAPI/Constants" } ) }} diff --git a/files/ja/nsidomhtmlmediaelement/index.html b/files/ja/nsidomhtmlmediaelement/index.html deleted file mode 100644 index 34450a8b9b..0000000000 --- a/files/ja/nsidomhtmlmediaelement/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: nsIDOMHTMLMediaElement -slug: NsIDOMHTMLMediaElement ---- -

- -

nsIDOMHTMLMediaElement インターフェースは HTML 5 における audio および video 要素の実装に用いられています。

- -
注意: cue ranges 機能の仕様は現在流動的な状況にあり、 HTML 5 標準においては大幅に改訂が加えられるか、置き換えられてしまう可能性があります。そのため、現時点では Firefox ではこの機能に対応していません。
- -

-
dom/public/idl/html/nsIDOMHTMLMediaElement.idlScriptable
- - -Please add a summary to this article. - - -
-  -最終更新: Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)
-

- -

Inherits from: nsIDOMHTMLElement

- -

メソッド概要 (Method Overview)

- - - - - - - - - - - - - - - - - - - - - - -
void addCueRange(in DOMString className, in float start, in float end, in boolean pauseOnExit, in nsIDOMHTMLVoidCallback enterCallback, in nsIDOMHTMLVoidCallback exitCallback);
DOMString canPlayType(in DOMString type);
void load();
void pause();
void play();
void removeCueRanges(in DOMString className);
- -

属性 (Attributes)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性型意味
autoplaybooleantrue if playback should automatically begin as soon as enough media is available to do so without interruption.
bufferedTimeRangesA static, normalized TimeRanges object describing the time ranges of the media that have been buffered.  Read only.  未実装
bufferedBytesByteRangesA static, normalized ByteRanges object describing the byte ranges of the media that have been buffered.  Read only.  未実装
bufferingRatefloatThe average number of bits per second for the current download over the past few seconds.  If there is no download in progress, this value is 0.0.  Read only.  未実装
bufferingThrottledbooleantrue if Firefox is intentionally throttling the bandwidth used by the download (such as when the download is paused), otherwise false. Read only.  未実装
controlsbooleantrue if user interface for controlling the media should be presented.
currentSrcDOMStringThe absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the networkState is EMPTY. Read only.
currentTimefloatThe current playback time, in seconds.  Setting this value will seek the media to the new time.
defaultPlaybackRatefloatThe default playback rate for the media.  The Ogg backend does not support this.  1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.  The value 0.0 is invalid and throws a NOT_SUPPORTED_ERR exception.
durationfloatThe length of the media in seconds, or zero if no media data is available.  If the media data is available but the length is unknown, this value is NaN.  If the media is streamed and has no predefined length, the value is Inf.  Read only.
endedbooleantrue if playback has finished.  Read only.
errornsIDOMHTMLMediaErrorThe media's error status.  Read only.
mutedbooleantrue if the audio is muted, otherwise false.
networkStateunsigned short -

The current state of the fetch of the media. Read only.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
定数値意味
EMPTY0There is no data yet.  The readyState will also be HAVE_NOTHING.
LOADING1The media is loading.
LOADED_METADATA2The media's metadata has been loaded.
LOADED_FIRST_FRAME3The media's first frame has been loaded.
LOADED4The media has been fully loaded.
-
pausedbooleantrue if the media playback is currently paused.  Read only.
playbackRatefloatThe current rate at which the media is being played back.  This is used to implement user controls for fast forward, slow motion, and so forth.  The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.  Not supported by the Ogg backend.
readyStateunsigned short -

The media's current readiness state.  Read only.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
定数値意味
HAVE_NOTHING0No information is available about the media resource.
HAVE_METADATA1Enough of the media resource has been retrieved that the metadata attributes are initialized.  Seeking will no longer raise an exception.
HAVE_SOME_DATA2Data for the current playback position is not available, but there is at least one playback position for which data is available.
HAVE_CURRENT_DATA3Data is available for the current playback position, but not enough to actually play more than one frame.
HAVE_FUTURE_DATA4Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
HAVE_ENOUGH_DATA5Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.
-
seekingbooleantrue if the media is in the process of seeking to a new position, otherwise false. Read only.
srcDOMStringThe URL of the media to present.
totalBytesunsigned longThe length, in bytes, of the media resource.  If the length is unknown, or the content is streamed and therefore has no specified length, this value is 0.  Read only.
volumefloatThe current audio volume, from 0.0 (silent) to 1.0 (maximum).
- -

メソッド (Methods)

- -

addCueRange()

- -
Note: This method is not yet implemented, as its definition is in flux in the HTML 5 standard.
- -

Adds a cue range to the media element.

- -
void addCueRange(
-  in DOMString className,
-  in float start,
-  in float end,
-  in boolean pauseOnExit,
-  in nsIDOMHTMLVoidCallback enterCallback,
-  in nsIDOMHTMLVoidCallback exitCallback
-);
-
- -
Parameters
- -

xxx

- -

canPlayType()

- -

Determines whether or not the specified media type can be played back.

- -
DOMString canPlayType(
-  in DOMString type
-);
- -
Parameters
- -
-
type
-
The media type to test for, such as "video/ogg".
-
- -
Return value
- - - -

Because media formats are complicated, and it's impossible to judge every possible detail from the type string, there is no such thing as 100% certain that the specified type can be played; the best you can do is "probably".

- -

load()

- -

Begins loading the media content from the server.

- -
 void load();
- -
Parameters
- -

None.

- -

pause()

- -

Pauses the media playback.

- -
 void pause();
-
- -
Parameters
- -

None.

- -

play()

- -

Begins playback of the media.

- -
 void play();
-
- -
Parameters
- -

None.

- -

removeCueRanges()

- -
Note: This function is not yet implemented, as its definition in the HTML 5 standard is in flux.
- -
void removeCueRanges(
-  in DOMString className
-);
-
- -
Parameters
- -

xxx

- -

参考資料

- - diff --git a/files/ja/nsidynamiccontainer/index.html b/files/ja/nsidynamiccontainer/index.html deleted file mode 100644 index ce38f086b4..0000000000 --- a/files/ja/nsidynamiccontainer/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: nsIDynamicContainer -slug: nsIDynamicContainer -tags: - - Developing Mozilla - - Extensions - - Interfaces - - 'Interfaces:Scriptable' - - Places - - XPCOM - - XPCOM API Reference ---- -

nsIDynamicContainerインタフェースは一時的なコンテンツのコンテナを提供するベースクラスを提供します。この機能はコンテナがオープンされたタイミングで、ノードを直接満たすことができます。すべてのリザルトノードのプロパティをそれぞれのアイテムに関連したデータを保存するのに利用できます。（例えばディスク上でのフルパスなど)また、それぞれのコンテナに対してサービスに関連付けられた追加のコンテナを作成することができます。
-
-

-
toolkit/components/places/public/nsIDynamicContainer.idlScriptable
- - -Please add a summary to this article. - - -
-  -最終更新: Gecko 1.9 (Firefox 3)
-

-

継承元: nsISupports

-


- メソッドの概要

-

void onContainerNodeOpening(in nsINavHistoryContainerResultNode aContainer, in nsINavHistoryQueryOptions aOptions);
- void onContainerNodeClosed(in nsINavHistoryContainerResultNode aContainer);
- void onContainerRemoving(in long long aItemId);
- void onContainerMoved(in long long aItemId, in long long aNewParent, in long aNewIndex);

-

メソッド

-

onContainerNodeOpening()

-

与えられたコンテナノードが新たにノードが作成されようとするときに呼ばれます。
- 必要であればノードの作成を実行することができます。

-

註: 状態を保存したい場合は全てのリザルトノードはプロパティバッグをインプリメントします

-
void onContainerNodeOpening(
-  in nsINavHistoryContainerResultNode aContainer,
-  in nsINavHistoryQueryOptions aOptions
-);
-
-
引数
-
-
- aContainer
-
- これから開かれようとしているコンテナノード
-
- aOptions
-
- このクエリを生成するために使われるオプション。コンテナは可能ならばこれらに従います。もしクエリとフォルダノードをコンテナに追加しようとしている場合、実装は可能ならばこの値を使用しないといけません。この値を変更してはいけません。
-
-

onContainerNodeClosed()

-

与えられたコンテナがなくなるときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドが呼びだされることは保証されていません。具体的にはクエリがどこかへ行ってしまったときには呼ばれません。この現象はコンテナ自身がopen状態からclose状態へ遷移したときにのみ起こります。実際の処理ではかなり大量の動的に生成されたノードがこのメソッドをクリーンアップ処理のために呼び出します。

-
void onTainerNodeClosed(
-  in nsINavHistoryContainerResultNode aContainer
-);
-
-
引数
-
-
- aContainer
-
- hoge
-
-

onContainerRemoving()

-

与えられたコンテナがブックマークテーブルから削除されようとするときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドはコンテナが削除される前に呼ばれます、従って処理では依然としてコンテナを参照することができます。

-
void onContainerRemoving(
-  in long long aItemId
-);
-
-
引数
-
-
- aItemId
-
- コンテナアイテムのアイテムID。
-
-

onContainerMoved()

-

与えられたコンテナが丁度移動されようとしているときに呼ばれます。bookkeepingを行う処理に備えて存在します。このメソッドはコンテナが移動された後に呼ばれます。

-

関連記事

- diff --git a/files/ja/orphaned/about/index.html b/files/ja/orphaned/about/index.html new file mode 100644 index 0000000000..3de59876a7 --- /dev/null +++ b/files/ja/orphaned/about/index.html @@ -0,0 +1,5 @@ +--- +title: About +slug: About +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html b/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html new file mode 100644 index 0000000000..cd89ae4cae --- /dev/null +++ b/files/ja/orphaned/addons.mozilla.org_(amo)_api_developers'_guide/index.html @@ -0,0 +1,24 @@ +--- +title: addons.mozilla.org (AMO) API Developers' Guide +slug: addons.mozilla.org_(AMO)_API_Developers'_Guide +tags: + - AMO + - AMO API + - Add-ons +--- +

AMO APIは、あなたのウェブまたは他のアプリケーションのためのインターフェースをAMOに提供します。APIはRESTをサポートし、レスポンスはXMLフォーマットで返されます。

+

現在、2つのコンポーネントがAPIにあります:

+ + +

The generic AMO API

+

これはFirefoxアドオンマネージャーにより用いられるAPI呼び出しのセットです。現在これは読み取り専用です。 一つ或いは複数のアドオングループについてデータを検索するか、アドオンを探すことが出来ます。このAPIは利用のために認証またはAPIキーを必要としません。

+ + +

The Bandwagon API

+

バンドワゴンAPI はアドオンコレクションとの相互作用を可能にします。これは読込み/書込みAPIです。既存のAMOアカウントを使った認証を必要とします。

+
+
+ + +

利用規約

+

ここで利用規約 を読んでください。

diff --git a/files/ja/orphaned/ant_script_to_assemble_an_extension/index.html b/files/ja/orphaned/ant_script_to_assemble_an_extension/index.html new file mode 100644 index 0000000000..3c9a0fca59 --- /dev/null +++ b/files/ja/orphaned/ant_script_to_assemble_an_extension/index.html @@ -0,0 +1,74 @@ +--- +title: ant script to assemble an extension +slug: ant_script_to_assemble_an_extension +tags: + - Extensions + - 'Extensions:Tools' + - Tools +--- +

この ant スクリプトは拡張機能のパッケージ化に役立ちます。 +

+
<?xml version="1.0"?>
+This build file was written by Régis Décamps <decamps@users.sf.net>
+
+<project name="blogmark" default="createxpi">
+       <property name="VERSION" value="1.3-rc1"/>
+       <property name="DESCRIPTION" value="New context-menu item to add
+                                           the current page in your Blogmarks"/>
+       XPI file is created after "chrome/blogmark.jar"               is created, which is then stuffed into "blogmark.xpi"
+       <target name="createxpi" depends="createjar"
+               description="Assemble the final build blogmark.xpi">
+               <zip destfile="blogmark-${VERSION}.xpi">
+                        <zipfileset dir="." includes="chrome/blogmark.jar" />
+                        <zipfileset dir="." includes="install.rdf" />
+                </zip>
+        </target>
+
+       Everything inside the chrome directory is zipped into chrome/blogmark.jar
+       <target name="createjar" depends="templates" description="Assemble the jar">
+                <jar destfile="chrome/blogmark.jar">
+                       <fileset dir="chrome/">
+                               <include name="**/*"/>
+                               <exclude name="**/*~"/>
+                               <exclude name="**/*.tpl.*"/>
+                               <exclude name="blogmark.jar"/>
+                       </fileset>
+                </jar>
+        </target>
+
+       <target name="templates" description="Generate files from templates.">
+               <copy file="chrome/content/blogmark/contents.rdf.tpl.xml"
+                     tofile="chrome/content/blogmark/contents.rdf"
+                     overwrite="true">
+                       <filterchain>
+                               <replacetokens>
+                                       <token key="VERSION" value="${VERSION}"/>
+                                       <token key="DESCRIPTION" value="${DESCRIPTION}"/>
+                               </replacetokens>
+                       </filterchain>
+               </copy>
+               <copy file="chrome/content/blogmark/about.xul.tpl.xml"
+                       tofile="chrome/content/blogmark/about.xul"
+                       overwrite="true">
+                       <filterchain>
+                               <replacetokens>
+                                       <token key="VERSION" value="${VERSION}"/>
+                               </replacetokens>
+                       </filterchain>
+               </copy>
+               <copy file="install.rdf.tpl.xml"
+                       tofile="install.rdf"
+                       overwrite="true">
+                       <filterchain>
+                               <replacetokens>
+                                       <token key="VERSION" value="${VERSION}"/>
+                                       <token key="DESCRIPTION" value="${DESCRIPTION}"/>
+                               </replacetokens>
+                       </filterchain>
+               </copy>
+       </target>
+</project>
+
+
+
+{{ languages( { "en": "en/Ant_script_to_assemble_an_extension" } ) }} diff --git a/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html b/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html new file mode 100644 index 0000000000..f2375fd43a --- /dev/null +++ b/files/ja/orphaned/bugzilla-ja/2.20-ja/index.html @@ -0,0 +1,54 @@ +--- +title: 2.20-ja +slug: Bugzilla-ja/2.20-ja +--- +

配布

+

2.20.1-ja の修正版 (Bugzilla-ja 2.20.1-ja-04 以降) については、 +svn にて提供しております。 +

+
svn co http://svn.mozilla.gr.jp/bugzilla/2.20/code/trunk/
+
+

などのコマンドにて取得してください。 +

2.20.1-ja までは、すべての修正項目を含む一つのパッチの形で、FTP サイト にて提供していました。 +配付ファイル (全てを含む一つのパッチファイル) へのリンク (上のほうが新しいです) は以下のとおり。 +

+
  1. 2.20.1-ja -03 (2.20-ja へのパッチ) +
  2. 2.20.1-ja -03 +
  3. 2.20-ja -03 +
  4. 2.20-ja -02 +
  5. 2.20-ja -01 +
+

将来的には、各修正項目ごとのパッチを提供する予定です。(予定で終わりました。) +また、それらを本家 Bugzilla.org へ提出することで、 +Bugzilla の国際化に貢献することも目標としています。 +

+

リリースバージョン

+

Bugzilla-ja での修正項目・機能追加については、Bugzilla-ja 修正項目リスト (準備中) をご覧ください。なお、公開されている svn 管理移行時 +以降については、以下のリストをご参照ください。 +

+
  1. rev. 54 : code tag rel2.20.4-ja +
  2. rev. 53 : template tag rel2.20.4-ja +
  3. rev. 47 : template tag rel2.20.3-ja +
  4. rev. 46 : code tag rel2.20.3-ja +
  5. rev. 45 : fix Bugzilla-jp 5544 +
  6. rev. 44 : fix Bugzilla-jp 5502 +
  7. rev. 43 : fix Bugzilla-jp 5536 +
  8. rev. 37 : fix Bugzilla-jp 5354 (Bugzilla-ja 2.20.1-ja final) +
  9. rev. 29 : fix Bugzilla-jp 5346 +
  10. rev. 23 : fix Bugzilla-jp 5327 +
+


+

+

作業記録

+

Bugzilla のリビジョン (2.20.1 など) ごとに Bugzilla-jp +にメタバグを立てています。そちらを妨害しているバグをご覧ください。 +

+
  1. Bugzilla-ja 2.20.3-ja (Bug# 5501) +
  2. ">Bugzilla-ja 2.20.1-ja (Bug# 5195) +
  3. ">Bugzilla-ja 2.20-ja (Bug# 4893) +
+

連絡先

+

Bugzilla-ja のバグについては、Bugzilla-jp まで報告してください。 +Bugzilla-ja についてのお問い合わせは、Bugzilla-ja プロジェクト +までお願いいたします。 +

diff --git a/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html b/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html new file mode 100644 index 0000000000..bf979af99e --- /dev/null +++ b/files/ja/orphaned/bugzilla-ja/3.0-ja/index.html @@ -0,0 +1,62 @@ +--- +title: 3.0-ja +slug: Bugzilla-ja/3.0-ja +--- +

About trunk

+ +

Bugzilla-jp は基本的に Bugzilla-ja 3.0 trunk を利用しています。 ただし、時々コミット後に重大なバグが発見されることがあります。

+ +

現在の最新版は、Bugzilla-ja 3.0.3-ja.7 です。

+ +

常用可能かもしれない revision (trunk)

+ +

Bugzilla-jp で実運用されている (and/or されたことがある) revision のリストです。

+ +
r 185
+ +

Bugzilla-ja 3.0.3-ja.7 リリース候補

+ +
r 170
+ +

trunk r 166 で発生した 5855 が修正されています。

+ +
r 149
+ +

Bugzilla 3.0.1 相当のセキュリティーパッチが当たったバージョン。 {{ Bug(386942) }} (5806) が r108、{{ Bug(386860) }} が r148、{{ Bug(382056) }} が r149 で修正されています。

+ +

tag リリース一覧

+ +

3.0-ja.1

+ +

3.0-ja.2

+ +

3.0-ja.3

+ +

3.0-ja.4

+ +

3.0-ja.5

+ +

クリティカルなバグ 5855 があります。3.0-ja.6 を利用してください。

+ +

3.0-ja.6

+ +

現在の最新版です。(2007/09/05)

+ +

3.0.3-ja.7

+ +

Bugzilla 3.0.3 にあわせてリリースしたバージョン。

+ + + +

パラメータで、utf8関係のものは'on'にしなければ、multibyte UTF8 (日本語を含む) 環境では動作は保証されません。

+ +

なお、MySQL環境についてのみ試験が行われています。PostgreSQLに関して、DB ドライバに依存する部分にバグがあるかもしれません。

+ +

branch 一覧

+ +

3.1.1 (abolished)

+ +

Bugzilla.org tag BUGZILLA-3_0rc1 以降に出たパッチのうち、3.0 に適用可能なものを適用、試験を行うためのブランチ。

diff --git a/files/ja/orphaned/bugzilla-ja/index.html b/files/ja/orphaned/bugzilla-ja/index.html new file mode 100644 index 0000000000..512cc4f06a --- /dev/null +++ b/files/ja/orphaned/bugzilla-ja/index.html @@ -0,0 +1,84 @@ +--- +title: Bugzilla-ja +slug: Bugzilla-ja +--- +

Bugzilla-ja とは

+ +

Bugzilla-ja は、Bugzilla を日本語環境で利用できるように i18n (国際化) 対応および日本語化するプロジェクトです。ユーザグループの立ち上げと公式サイトの構築中です。l10n -ja の作業に興味のある方は、Bugzilla-ja l10n のドキュメントを参照してください。

+ +

Bugzilla-ja は、3.0.3 (or 3.1+)以降、日本語環境(もしくはCJK)のみで必要な独自パッチ以外については、Bugzilla 本家に その成果をマージする方向で活動しています。 詳細に関しては、bmo の Bugzilla プロダクトの各国際化に関するバグ、 もしくは Bugzilla Localization Working Group を参照してください。

+ +

Bugzilla Users Group in Japan ( bug-ja.org) を立ち上げ中です。ご興味がおありの方はbugzilla@jpmozまでご連絡ください。なお、プロジェクトの作業メモは公開されております。Bugzilla-ja に関するアナウンスについてはプロジェクトマネージャーのblogなどを参照してください。

+ +

We are now planning to build a new community named Bugzilla Users Group in Japan (bug-ja.org). And refer the project manager's blog for newer announces.

+ +

バグ報告・日本語での議論

+ +

日本語でのバグ報告は、bugzilla@jpmozのbug-jaプロダクトで行えます。主に、日本語にも影響する国際化に関する問題がターゲットですが、それ以外の一般的なバグの報告も受け付けています。bmoにすでに登録されているものはそれに紐付け、それ以外については問題を特定してからbmoへ持っていきます。(すべてのパッチはbmoでのレビューが必要です。bugzilla@jpmozでは、機能要望については受け付けますが対象としません。)

+ +

日本語での議論・サポートに関しては、IRCが利用可能です。反応がいつもすぐに返るとは限りませんのでご注意ください。

+ +

Bugzilla とは

+ +

Bugzilla とは、「問題追跡システム」または「バグ追跡システム」と呼ばれるもので、開発者が個人やグループで、製品に存在する問題を洗い出して追跡し、 効果的な解決の手助けをするシステムです。商用のバグ追跡システムもありますが、Mozilla プロジェクトではオープンソースソフトウェアとして、 誰もが自由に利用できるようにしています。Bugzilla の評価は非常に高く、多くの企業・団体 で採用されています。2008年11月には、NASAのスペースシャトル計画 (および将来的な宇宙機開発プロジェクト) の問題追跡システムにも採用されました。(*1 *2)

+ +

Bugzilla-ja for trunk

+ +

Bugzilla trunk向けのレポジトリが利用できます。なお、このテンプレートパックは定期的にしか更新されていませんので、最新のBugzilla trunkとあわせて動作する保障はありません。

+ +

最新の開発版は3.5.1です。

+ +

Bugzilla-ja 3.4 branch

+ +

Bugzilla 3.4の日本語化パックは、bug-ja.orgで配布されており、レポジトリも利用可能です。現在の最新版は3.4.3です。

+ +

Bugzilla-ja 3.2 branch

+ +

Bugzilla 3.2の日本語化パックは、bug-ja.orgで配布されており、レポジトリも利用可能です。現在の最新版は3.2.5です。なお、3.2をご利用の方は、3.4へのアップグレードを早急にご検討ください。まもなく日本語版のサポートは終了します。

+ +

サポート終了済みの過去のバージョン

+ +

Bugzilla-ja 3.0

+ +

詳細については、3.0-ja を参照してください。なお、3.0ブランチはすでに更新停止しております。bmoにある最近のパッチがそのまま適用可能であろうことはチェックしていますが、レポジトリへの展開や確認はされておりません。

+ +

Bugzilla-ja に含まれる日本語テンプレートは、Bugzilla 3.0 向けではありますが、bugzilla.org 配布の Bugzilla 3.0 とともに利用することは推奨しません。

+ +

We strongly recommand not to use our Bugzilla-ja 3.0 template pack with bugzilla.org's 3.0. Such site will NEVER work properly.

+ +

Bugzilla-ja 2.20

+ +

注 : Bugzilla-ja 2.20シリーズはすでにサポートされていません。bugzilla.orgでの2.20シリーズのサポートは、Bugzilla 3.2リリース(2008/07予定)までです。

+ +

目的

+ +

データベースの文字コードが UTF-8 となった Bugzilla 2.20 について、 マルチバイト UTF-8 など i18n (国際化) で必要なパッチを提供します。 そのうえで日本語環境で必要な送信されるメールの文字コードについてなど の問題を解決し、日本語環境でも問題なく今までと同様に利用できるようにした Bugzilla (Bugzilla-ja) を提供するプロジェクトです。

+ +

なお、過去の Bugzilla-ja 2.16-ja からのアップグレードを行うためのスクリプト・手順 も提供します。

+ +

詳細は、2.20-ja を参照してください。

+ +

 

+ +

Bugzilla-ja 2.16

+ +
注：Bugzilla 2.16 の利用は推奨されていません。新規利用の方は、最新版の利用を検討してください。
+ +

目的

+ +

Bugzilla (-2.16) を日本語化し、利用、配布可能にすることを目的としていました。

+ +

配布

+ +

もじら組 FTP サイト にあります。

+ +

作業記録と担当者

+ +

Bugzilla-jp 2228, 2796 等のコメントをご覧ください。

+ +
    +
  1. Ryuzi Kambe
    2. +
  2. おこめ (ドキュメント和訳)
    3. +
  3. Itou Hiroki
    4. +
  4. 他
    5. +
diff --git a/files/ja/orphaned/bugzilla-ja/l10n/index.html b/files/ja/orphaned/bugzilla-ja/l10n/index.html new file mode 100644 index 0000000000..3360cb2817 --- /dev/null +++ b/files/ja/orphaned/bugzilla-ja/l10n/index.html @@ -0,0 +1,15 @@ +--- +title: 日本語パック +slug: Bugzilla-ja/l10n +--- +

参加するには

+

参加するには 2 通りの方法があります。 一つ目は、公開されるレポジトリに対してのコミット権限も持つ方法で、興味のある方はbugzilla@jpmozまでバグとして登録してください。 二つ目は、試験サイトや公開レポジトリを参照し、翻訳に問題があると思われる部分を指摘するという方法です。 こちらでは、特にアカウント登録などの必要はありません。(詳細は、下の問題の指摘方法をご覧ください。)

+

一つ目の方法での参加を希望の方は、希望するアカウント名、メーリングリスト登録用メールアドレスをつけてbugzilla@jpmozにバグを登録してください。アカウントなどの情報をお送りします。 

+

メーリングリスト

+

メーリングリストは準備中です。

+

レポジトリ

+

専用の Subversion レポジトリを用意しています。公開レポジトリ (仮URL)と、それに対してのコミットが可能になる SSL 経由でのレポジトリが用意されています。 コミットのたびに、試験サイトの中身が自動的に更新されます。また、この更新履歴はメーリングリストに流れます。

+

試験用サイト

+

試験用サイトは準備中です。

+

問題の指摘方法

+

テンプレートに関する問題の指摘は、bugzilla@jpmoz までバグとして登録してください。 問題が再現できる url もしくはテンプレートファイル名をつけてお願いします。(パッチを書ける方は、できればレポジトリへのアクセス権限を取得して自分でコミットしていただければ助かります。)

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html new file mode 100644 index 0000000000..2fc84cf909 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/accountcreation/index.html @@ -0,0 +1,23 @@ +--- +title: AccountCreation +slug: Bugzilla-jp/Guide/About/AccountCreation +--- +

アカウントを作成する

+

Bugzilla-jpを利用するにはアカウントを作成する必要があります。バグを参照する場合のみ、アカウントは必要ありませんが、バグを追跡したり、発言したりするためにはアカウントが必ず必要です。

+

アカウントを取得するのに必要なのは有効なメールアドレスのみです。ただし、Bugzilla上ではアカウントの表示に際して、メールアドレスも露出することになるので、そのメールアドレスにはほぼ確実にスパムメールが来ることになります。現在、常用されているメールアドレスよりもBugzillaアカウント用のメールアドレスを用意することを推奨します。

+

アカウントを作成するには以下のURIにアクセスします。(Bugzilla-jpのトップページから、「新規アカウント」でも同じです。)

+

http://bugzilla.mozilla.gr.jp/createaccount.cgi

+

ここで、次のようなフォームが表示されます。

+

アカウント作成フォームのスクリーンショット

+

まず、Bugzilla-jpのアカウントとして利用するメールアドレスを入力してください。次に、メールの文字コードも指定できますが、ここは空白のままにしてください。

+

メモ: Yahoo!メールのようにUTF-8に対応していないWebメールやメールクライアント(MUA)を利用されている場合はiso-2022-jpも利用可能です。ただし、Bugzilla-jpではUTF-8で利用可能な文字全てが入力可能ですので、ISO-2022-JPでは全てのメッセージを読むことはできませんので、Bugzilla-jpの利用においてUTF-8を利用できないメール環境の利用は推奨されません。

+

すると、次のようなメールが送信されます。

+

アカウント作成の確認メール

+

ここで、そのままアカウントの作成を続ける時は一つ目のURLをブラウザで開いてください。すると、次のようなフォームが表示されます。

+

アカウント作成の確認フォームのスクリーンショット

+

実名はオプションなので入力しなくてもかまいませんが、設定されることをお勧めします。実名が未設定の場合、メールアドレスが実名の代わりに表示されます。また、他の人があなたの名前を記述する場合に、メールアドレスが直に書かれることになります。これはスパムメールをより呼び込みやすくなってしまうことに注意してください。

+

多くの人がBugzilla-jp上では本名で活動していますが、実名は必ずしも本名である必要はありません。既にインターネット上でよく利用しているハンドルネームがあるなら、それを利用するのも良いでしょう。

+

「パスワード」と「パスワード再入力」では、あなたのアカウントでログインする時に使うパスワードを設定します。なりすましを避けるためにもある程度複雑なものを使用してください。

+

「送信メール文字コード」は、あなたのメールアドレスに送信されるメールの文字コードを指定します。ここは最初のフォームと同じく空白のままでかまいません。

+

必要な項目を入力し、「登録」ボタンを押すと作業完了です。

+

なお、これ以降、Bugzilla-jpを利用する際にはCookieは有効にしておいてください。BugzillaではCookieによってセッション管理を行っていますので、Cookie無しではログインできません。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html new file mode 100644 index 0000000000..d7be725063 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/bugdetails/index.html @@ -0,0 +1,90 @@ +--- +title: BugDetails +slug: Bugzilla-jp/Guide/About/BugDetails +--- +

バグの詳細情報

+

Bugzillaのバグはフォーラムで言う一つのスレッドを一つのバグとして管理しています。各バグにはそのバグを端的に表す情報部分と、一度書き込むと修正できないコメント部分があります。情報部分はコメント部分に書き込まれた内容に基づいて、必要なら修正されます。

+

Bug #

+

バグを一意に表現するための番号、バグのIDです。 登録されたときに採番され、変更されることはありません。

+

プロダクト、コンポーネント

+

バグがどの製品の、どの部分のバグなのかを示す情報です。 詳細は、プロダクトとコンポーネントを参照してください。

+

ステータス、処理方法

+

バグの状態や、解決済みのバグであれば、その処理方法を示します。 この状態や処理方法の意味はプロダクトごとに違いがあります。 詳細は、バグのライフサイクル以下のプロダクトごとのドキュメントを参照してください。

+

担当者

+

そのバグの担当者のアカウントを示します。担当者は実際にバグの修正に関与している場合もありますし、単にそのバグの動向を追跡しているだけの場合もあります。また、プロダクトによって担当者の役割が異なることがあります。詳細はバグのライフサイクル以下のプロダクトごとのドキュメントを参照してください。また、それをふまえて、各バグのコメントも参照してください。

+

QAコンタクト

+

QAコンタクトは直訳すると品質管理担当者を意味します。この項目は一般の利用者は特に気にする必要はありません。Bugzilla-jpでは一部のコンポーネントを除き、原則としてデフォルトの担当者は存在しません。その代わりに、各コンポーネントをデフォルトのQAコンタクトが統括管理しています。

+

URL

+

そのバグが再現する実在のサイトやテストケースへのURLです。決して報告者の運営するWebサイトを宣伝するためのものではありません。

+

要約

+

そのバグの症状や原因、条件を端的に示す、そのバグにつけられた要約です。

+

Bugzilla-jpではコンポーネントが細分化されていないため、特定の部位のバグを要約内で、{{ mediawiki.external('と') }}を使って明示していることがあります。よくあるものでは、{{ mediawiki.external('Cairo') }}や{{ mediawiki.external('CSS3') }}等があります。また、特定のプラットフォームでのみ発生するバグを明記するために、{{ mediawiki.external('Win') }}、{{ mediawiki.external('Mac') }}といった使い方もされています。

+

ホワイトボード

+

スタッフがバグの進捗を示すためにメモ書きとして使うためのフィールドです。一般的に、関連づけしたBugzilla-orgのバグIDを記述したり、そのバグの状態(FIXED等)を記述したりします。

+

キーワード

+

この項目にはあらかじめ登録されているキーワードをカンマ区切りで記述しています。キーワードの一覧と、各キーワードの説明は、Bugzilla-jpのキーワードの説明を参照してください。

+

プラットフォーム

+

バグが発生するプラットフォーム(ハードウェア)を示します。

+
All
+

全てのプラットフォームで発生するバグです。

+
Macintosh
+

Apple社のMacintoshで発生するバグです。Intel MacはMacintoshではなくPCになります。

+
PC
+

一般的なIntel系CPUを搭載したPCか、もしくはIntel Macで発生するバグです。

+
Sun
+

Sun Microsystems社のワークステーションで発生するバグです。

+
Other
+

上記に無いプラットフォームで発生するバグである場合、これが選択されますが、大抵の場合はWebサイトの問題等、分類不可能なバグの場合に利用されています。

+

OS

+

バグが発生するOSを示します。

+
All
+

全てのOSで発生するバグです。(実質的には、二つ以上のOSで発生する場合にAllとされます。)

+
Windows 95、Windows 98、Windows ME、Windows 2000、Windows NT、Windows XP、Windows Vista
+

Windowsで発生するバグです。一般的に、Windowsのバージョンに関係なく発生することが多いので最初にバグが確認されたWindowsのバージョンが選択されていることを示します。

+
Mac System 7、Mac System 7.5、Mac System 7.6.1、Mac System 8.0、Mac System 8.5、Mac System 8.6、Mac System 9.0
+

旧Mac OSで発生するバグです。現在は新規には取り扱っていません。

+
Mac OS X Server、Mac OS X
+

Mac OS Xで発生するバグです。

+
Linux
+

Linuxで発生するバグです。ディストリビューション等はコメント本文を確認する必要があります。

+
FreeBSD、Solaris
+

各UNIX互換OSで発生するバグです。

+
OS/2
+

OS/2で発生するバグです。

+
BeOS
+

BeOSで発生するバグです。

+
other
+

上記に無いOSで発生するバグである場合、これが選択されます。また、Webサイトの問題等、分類不可能なバグの場合に利用されています。

+

バージョン

+

バグの発生するバージョンを示します。unspecifiedは不明な場合や、適切なバージョンが無い場合に利用されます。Trunk、Branch等の意味はTrunkとBranchの違いと注意を参照してください。

+

優先順位

+

そのバグを修正する人が考えている、そのバグの優先順位です。Bugzilla-orgのバグと関連づけられているバグは、Bugzilla-orgの設定しているものと同じ値になります。P1が最も優先順位が高く、P5は最も優先順位が低いことを示します。--は未設定であることを示しています。

+

あくまでも目安以上の意味はありません。P1よりもP2のバグが先に修正されることもよくあります。

+

深刻度

+

そのバグがどの程度深刻な問題であるかを示します。

+
blocker
+

最も重大なバグであることを意味します。例えば、プロダクトをビルドできない、起動時にクラッシュする、日本語入力が全くできない等、テストのための利用すら困難なバグが該当します。

+
critical
+

blocker程では無いにしても重大な問題であることを意味します。例えば、クラッシュや、ハングアップ、データの損失に関しては無条件にcriticalに設定されます。また、それ以外でも特に重大なバグであるものの、blockerには当たらないバグが該当します。

+
major
+

特定の機能の大部分が機能しないような大きめのバグであることを意味します。例えば、文字化けが原因で使い物にならない状態に陥ったり、IMEの一部機能が全く利用できない場合等がこれに該当します。

+
normal
+

通常のバグであることを意味します。

+
minor
+

あまり多くの人に利用されていない機能のバグや、修正されなくても特に困らないようなバグがこれに該当します。

+
trivial
+

UIの表記ミスや、機能にはほとんど影響の無いような細かいバグがこれに該当します。

+
enhancement
+

要望であることを意味します。一般的な用語としてのバグには該当しないものです。

+

ターゲットマイルストーン

+

そのバグを修正する人が考えている、最初に修正されるリリース(アルファリリース、ベータリリースを含む)を示します。あくまでも目標であって、必ずそこまでに修正される、というものではありません。もし、Futureとなっている場合はバグを修正する目処が立っていないことを意味します。つまり、新たに別の人が修正に名乗り出ない限り、なかなか修正されないでしょう。

+

また、修正済みのバグの場合、そのバグが修正された最初のリリースを示します。ですが、1.8 branch以前はこの設定を行っていなかったので、修正済みのバグに関してこの項目を信用できるのはそれ以降のもののみです。FirefoxやThunderbirdのバージョンで言い直すと、1.5以降、ということになります。

+

Bug xxxxが依存する

+

そのバグが依存しているバグの一覧を示します。依存しているとは、例えばその依存しているバグが修正されないと、修正できない場合や、依存しているバグが修正されたら、同時にそのバグも修正されるであろう場合を言います。

+

バグIDだけでは分かりにくいので「依存ツリーを表示」を利用すると、より分かりやすいでしょう。

+

Bug xxxxが妨害する

+

そのバグが修正を妨害している他のバグの一覧を示します。妨害しているとは、「依存する」の逆です。そのバグが修正されないと、他のバグが修正できない、という状況です。

+

regressionバグの場合、その原因となったバグを妨害するものとして登録します。なぜなら、そのregressionが解消されないと、その原因となったバグの修正が完了したとは言えないからです。

+

こちらは、「依存グラフを表示」を利用しても見やすくはないかもしれません。

+

Bug の動きを見る

+

これまでの項目の修正履歴を一覧表の形で見ることができます。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html new file mode 100644 index 0000000000..35047a3f8d --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/changeaccountprefs/index.html @@ -0,0 +1,34 @@ +--- +title: ChangeAccountPrefs +slug: Bugzilla-jp/Guide/About/ChangeAccountPrefs +--- +

アカウントの設定を変更する

+

Bugzillaではアカウントに関するいくつかの設定をユーザ自身で変更可能です。ここではその中でも特に有益なものを紹介しておきます。なお、アカウントの削除はできません。アカウントの削除に関してはアカウントの削除申請を参照してください。

+

アカウントの設定を行うには、環境設定にアクセスしてください。

+

パスワードを変更する

+

アカウントのパスワードは名前とパスワードで変更できます。

+

このアカウント設定で、「パスワード」欄に現在のパスワードを、「新しいパスワード」欄と、「もう一度」欄に新しいパスワードを入力して、「変更の保存」ボタンを押せば、新しいパスワードに変更されます。

+

名前を変更する

+

名前を変更する場合も名前とパスワードで、「パスワード」欄に現在のパスワードを入力してください。「名前 (オプション、でも推奨)」欄には既に現在の名前が設定されているので、これを新しい名前に変更し、「変更の保存」ボタンを押してください。

+

メールアドレスを変更する

+

メールアドレスを変更する場合も名前とパスワードで、「パスワード」欄に現在のパスワードを入力してください。そして、「新しいメールアドレス」に新しいメールアドレスを入力して、「変更の保存」ボタンを押してください。

+

そうすると、現在のメールアドレスと、新しいメールアドレスの双方に以下のようなメールが届きます。

+

現在のアドレスに届くメール

+

新しいアドレスに届くメール

+

新しいアドレスに届いたメール(下側のスクリーンショット)の一つめのURIにアクセスすると、現在のメールアドレスを確認するフォームが表示されるので、現在のメールアドレスを入力し、送信してください。

+

これで変更が完了しました。

+

なお、上記の確認メールのうち、古い方のアドレスに送られたURIに三日以内にアクセスすると、新しいメールアドレスは無効化され、設定が元に戻されます。これはセキュリティのための措置ですので、自分で変更した場合は誤ってアクセスしないように注意してください。

+

メールの送信設定を変更する

+

Bugzillaはバグに関する様々な変更をメールで各アカウントに通知します。多くの変更通知はバグを追跡していく上で有用なものでしょう。しかし、期待しないメールの着信は大切なメールの埋没につながるので好ましいことではありません。デフォルト設定ではかなりのケースにおいてメールが送信されるようになっているので、設定で送信する条件をより限定することができます。(もちろん、更に条件を広げることもできます。)

+

メールに関する設定はメール関係で行います。

+
全体設定
+

「誰かがフラグを要請した時にメールで通知する」と「要請したフラグが設定されたときにメールで通知する」の二つがありますが、前者は絶対にオフにしないでください。前者はあなたへの問い合わせを知らせるメールの設定ですので変更しないでください。もし、これが届かないとBugzilla-jpの運用を妨害してしまいます。

+
フィールド・受信条件特有の設定
+

フィールド・受信条件特有の設定のスクリーンショット

+

このスクリーンショットはデフォルト設定のままです。デフォルト設定に戻したい場合はこのスクリーンショットの通りに設定してください。

+
ユーザ監視
+

「ユーザ監視」は便利な機能です。カンマ区切りで「ユーザを監視対象に追加する (カンマ区切りリスト)」に追跡したいユーザのメールアドレスを列挙することができます。あなたと共通の関心を持つスタッフのアカウントをここに登録しておくと、新しいバグを小まめにチェックしなくても、そのスタッフへの送信メールからプロダクトの動向を常にメールで受けとることができます。

+
Bugzilla-jp からのメールの文字コード
+

ここにiso-2022-jpと入れると、Bugzilla-jpからの通知メールをISO-2022-JPでエンコードしたものを受け取れます。ただし、バグがいくつか確認されており、まだ正常に機能しません。ここは空白のままにしておいてください。

+
+

必要な項目を変更したら、ページの下部にある「変更の保存」ボタンで送信してください。それで設定は保存されます。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/index.html new file mode 100644 index 0000000000..b07971d226 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/index.html @@ -0,0 +1,16 @@ +--- +title: About +slug: Bugzilla-jp/Guide/About +--- +

Bugzilla-jpとは

+

Bugzilla-jp(バグジラ・ジェイ・ピーと発音します)とは、バグ管理システム(Bug Tracking System、略してBTS)であるBugzillaを日本語化したBugzilla-jaを使い、Mozilla関連プロダクト(Firefox、Thunderbird、Camino、SeaMonkey等)のバグを管理、追跡、修正を行う日本語の開発者向けコミュニティです。

+

Mozilla関連プロダクトのバグは全てmozilla.orgのBugzillaにおいて管理されています。(Bugzilla-jpではmozilla.orgの運営しているBugzillaのことを本家、Bugzilla-orgと呼んでいます。Bugzilla-jpでは普段は、本家という呼び方を使いますが、このドキュメントでは文意を明確にするためにBugzilla-orgと記述します。)しかし、Bugzilla-orgでは公用語が英語である上に、登録されているバグの件数も2006年初頭で32万件を超えていますので、日本人にとっては検索するだけでも大変な作業になりがちです。

+

そこで、英語に自信が無くても日本人の開発者が不自由しないように、報告者や開発者と、Bugzilla-orgとの仲介を行っているのがBugzilla-jpです。

+

Bugzilla-jpは開発者のためのコミュニティです

+

Bugzilla-jpは開発者のためのコミュニティで開発現場です。つまり、バグの報告やコメントの追加を行うと開発者の一員という位置づけになり、その発言内容には技術的な根拠が要求されます。普通の掲示板やBBS、フォーラム等とは明確に異なっていることを理解してください。

+

もちろん、サポートセンターでもありません。

+

Bugzilla-jpは独立したコミュニティです

+

Bugzilla-jpはもじら組内にありますが、運用は別の独立したコミュニティで行われています。もちろん、もじら組のスタッフも参加していますが、Bugzilla-jpでのみ活動されている方もいます。また、Mozilla Foundation、Mozilla Corporation、Mozilla Japanからも独立したコミュニティです。(これらの企業の関係者も参加していますが、あくまでコミュニティの一員です。)

+

Bugzilla-jpの参加者は全員ボランティアです

+

Bugzilla-jpの参加者は全員がボランティアです。フルタイムで従事している人は居ますが、あくまでもその所属企業から派遣されたボランティアで、Bugzilla-jpの従業員ではありません。

+

つまり、全ての参加者はBugzilla-jp内では貢献度に応じて平等であるべきです。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html new file mode 100644 index 0000000000..dcebea6cc1 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/productsandcomponents/index.html @@ -0,0 +1,52 @@ +--- +title: ProductsAndComponents +slug: Bugzilla-jp/Guide/About/ProductsAndComponents +--- +

プロダクトとコンポーネント

+

Bugzilla上ではバグは常に何らかのプロダクトと、コンポーネントに関連づけられています。

+

プロダクトとは文字通り、そのバグが発生する製品の名前を指します。コンポーネントとは、プロダクト内で、更にどういった部位のバグであるのかを細分化するものです。Bugzilla-jpでは以下のようなプロダクトとコンポーネントを用意しています。

+

Core

+

コンポーネント一覧。

+

全てのMozilla関連プロダクトで共有しているGeckoエンジンや、ネットワークコンポーネントであるNecko、FirefoxやThunderbirdで使われている共通部品のtoolkit、 XPCOMやNSPRといった基盤技術に関するバグを扱っています。

+

また、他のプロダクトに当てはまらないChatZillaやDOM Inspectorといった独立したXULアプリケーションも扱っています。

+

Firefox

+

コンポーネント一覧。

+

Firefox固有のバグを扱っています。主に、FirefoxのUIに関するバグや、移行ツール(migration)、ブックマークや履歴、ページ内検索といった固有のバグが対象となります。

+

Thunderbird

+

コンポーネント一覧。

+

Thunderbird固有のバグを扱っています。主に、ThunderbirdのUIに関するバグや、移行ツール(migration)が対象となります。

+

Firefoxとは異なり、多くのコードがCoreで共有されているため、実際にはこのプロダクトに分類されるバグは多くありません。

+

Camino

+

コンポーネント一覧。

+

Camino固有のバグを扱っています。主に、CaminoのUIに関するバグが対象となります。

+

Mozilla Application Suite

+

コンポーネント一覧。

+

Mozilla Application Suiteと、その後継となるSeaMonkey固有のバグを扱っています。主にSeaMonkeyのUIに関するバグや、ブックマークや履歴といった各種の機能が対象となります。

+

Calendar

+

コンポーネント一覧。

+

Sunbird固有のバグを扱っていますが、残念ながら正式リリースの目処もたっていないこのプロダクトでアクティブに活動しているスタッフは居ません。もし、あなたがSunbirdのバグ管理に興味があるなら是非私たちに協力してください。

+

L10N(日本語化)

+

コンポーネント一覧。

+

各プロダクトの日本語版固有のバグ(誤訳や誤記等)を扱っています。

+

mozilla.gr.jp

+

コンポーネント一覧。

+

もじら組のドキュメントのバグ(誤記や誤情報、もじら組フォーラムのバグ)を扱っています。

+

Web標準化

+

コンポーネント一覧。

+

Web標準仕様に従っていないために、FirefoxやSeaMonkeyで表示や動作に問題があるもじら組以外のWebサイトやページを扱っています。

+

他のプロダクトとは違い、そのバグを担当する人が問題のサイトの管理者、もしくは制作者に修正依頼を出して修正してもらうという作業になります。

+

Webtools

+

コンポーネント一覧。

+

Bugzillaそのもののバグを扱っています。

+

TestProduct

+

コンポーネント一覧。

+

これはいかなる製品のバグも取り扱っていません。このプロダクトは、バグ投稿の練習用のものです。Bugzillaの動作テスト、確認にも利用されます。

+

このプロダクトに登録されているバグは不定期にデータベースから削除されるので、恒久的に情報を残すことはできません。

+

談話室ばぐじら

+

コンポーネント一覧。

+

雑談用のプロダクトです。スタッフが運用のためのディスカッションを行ったり、他のプロダクトに当てはまらないディスカッションが必要な場合等に利用されます。

+
+

原則として、ここにリストアップされていないプロダクトは扱っていません。例えばNetscapeに代表される他企業の製品や、Mozilla Japanのサイトに関する問題等は扱っていません。これら、他企業の問題は、その企業に直接コンタクトをとるようにしてください。

+

テーマや、拡張に関するバグも取り扱っていません。テーマや、拡張のバグは、その作者に直接コンタクトをとるようにしてください。

+

あなたが拡張の作者であり、Bugzilla-jpをあなたの拡張のバグ管理に利用したいのであれば談話室ばぐじらを通じてスタッフにコンタクトをとってください。あなたの熱心さがスタッフに伝われば拡張用のプロダクトが新設されるかもしれません。

+

もし、あなたがBugzilla-jpで取り扱われるべきプロダクトが他にもあると思う場合は、談話室ばぐじらを通じてスタッフにリクエストを出すことができます。ただし、リクエストした場合、あなたが積極的かつ、継続してそのプロダクトに貢献することが望まれるでしょう。貢献するつもりが無いのにリクエストすることはご遠慮ください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html new file mode 100644 index 0000000000..766df5ae8b --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/trunkandbranch/index.html @@ -0,0 +1,17 @@ +--- +title: TrunkAndBranch +slug: Bugzilla-jp/Guide/About/TrunkAndBranch +--- +

TrunkとBranchの違いと注意

+

Mozilla関連製品は開発中の状態をTrunk(トランク)、リリース版の元となるものをBranch(ブランチ)と呼びます。

+

Branchは製品のリリース毎に作成され、そのGeckoのバージョンからBranchの名前が決まります。例えば、Gecko1.8をベースとしたFirefox1.5/Thunderbird1.5は1.8.0Branchから、Gecko1.8.1をベースとしたFirefox2/Thunderbird2は1.8Branchから作成されています。

+

Bugzilla-jpでは基本的にTrunkのバグを扱います。Branchは最初のリリースが行われた時点で開発は終了しているためです。

+

Branchのバグであっても受け付けるのは、

+
    +
  1. セキュリティバグ
    2. +
  2. 重大なバグで修正しないと製品として成り立たないもの
    3. +
+

のみです。後者はあいまいですが、修正のリスクと効果が天秤にかけられることになりますが、よほどのバグでない限り、リスクがある修正は行われません。

+

Trunkビルドの入手方法

+

Trunkビルドの最新版は毎晩、Nightly Build(ナイトリービルド)としてリリースされています。Firefox、Thunderbird、SeaMonkeyと、それぞれ公開されています。

+

また、自分でCVSからソースコードを取得し、ビルドしてみても良いでしょう。この独自ビルドを元に報告する場合はその旨(いつのソースコードなのか)もあわせて報告してください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html new file mode 100644 index 0000000000..d108bca732 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbug/index.html @@ -0,0 +1,10 @@ +--- +title: WhatIsBug +slug: Bugzilla-jp/Guide/About/WhatIsBug +--- +

バグとは

+

バグ(bug)とはコンピュータ用語で不具合を意味します。ある機能が設計として定められている通りに動作しないというようなプログラムの問題や、あらかじめ定められている仕様や規約などに反する設計などを一般にバグと呼びます。

+

Bugzilla-org、及びBugzilla-jpで言うバグとは、そういった不具合はもちろんの事、「この製品にはこの機能が必要だ」というような新しい機能の提案も「製品が備える事が望ましいと考えられる機能が備わっていない」という観点と積極的姿勢によりバグと扱われます。(ただし、不具合という意味ではなく、「機能強化が必要」という意味です。)

+

Mozilla関連プロダクトでは一般的に、プロダクトそのものへの機能追加と、Web標準への対応強化がこれに当てはまります。

+

前者は基本的にはBugzilla-jpでは扱っていません。また、後者は既に一般化している標準仕様の場合は、通常のバグとして扱われ、草案段階の仕様の先行実装は要望として扱われることに注意してください。

+

Bugzilla-jpでは基本的には要望を受け付けていません。これに関する詳しい情報は 要望を報告するを参照してください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html new file mode 100644 index 0000000000..16ab752071 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/about/whatisbugzilla/index.html @@ -0,0 +1,14 @@ +--- +title: WhatIsBugzilla +slug: Bugzilla-jp/Guide/About/WhatIsBugzilla +--- +

+

+

Bugzillaとは

+

Bugzilla(バグジラと発音します)とは、mozilla.orgによって開発された、Webブラウザでアクセス可能なバグ管理システム(Bug Tracking System、略してBTS)です。 +

BTSとは、バグの記録や内容の検索と参照、そして状態管理を行なうシステムの事です。おおざっぱな言い方をすれば、バグ管理専用のデータベースシステムとも言えます。 +

バグを単にメーリングリストや表などを使って手作業で管理するよりも、BTSでバグの記録や内容の検索と参照、そして状態管理を行なう事により、効率良く品質の高い作業を行う事ができるようになります。 +

バグの情報が色々な場所に散在するとそれらバグを開発者が把握する事が困難になり、また管理も煩雑で効率の悪いものになりますので、Bugzillaで集中的に管理する事が重要です。 +

また、Bugzillaでは何らかの情報を投稿するにはアカウントが必要です。(内容を見るだけならアカウントは必要ありません。)バグを追跡するにもアカウントは必要ですので注意してください。 +

Bugzillaに関するより詳細な情報は公式サイト、Home :: Bugzilla :: bugzilla.orgを、日本語版のBugzilla-jaに関しては、もじら組内のBugzilla-jaについてを参照してください。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/comment/index.html b/files/ja/orphaned/bugzilla-jp/guide/comment/index.html new file mode 100644 index 0000000000..1baec04568 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/comment/index.html @@ -0,0 +1,19 @@ +--- +title: Comment +slug: Bugzilla-jp/Guide/Comment +--- +

バグにコメントを付ける

+

バグにコメントを付ける場合、以下のことに注意してください。

+

HTMLのタグは使えない

+

書き込んだ内容はそのまま(ワードラップのみ適当に処理されますが)表示されます。&lt;や&gt;、&amp;等に注意を払う必要もありません。一部のテキストは自動的にアンカーとして処理されます。その詳しいルールはBugzilla-jpの自動リンク機能を参照してください。

+

書き込む際にそのバグのメールを受け取れるようにする

+

Bugzilla-jpでは書き込み時にあなたがそのバグで何の役割も持たない場合(報告者でもなく、担当者でもなく、QAコンタクトでも無い場合)、自動的にCCリストにあなたを加えるように設定しています。これを無効にすることはできますが、そうしないでください。なぜなら、そのバグであなたのコメントに対して他の貢献者からコメントがあった場合に、あなたに連絡が行き届くべきだからです。

+

また、書き込んだ内容に対して返答等がある可能性があるのでBugzilla-jpのアカウントとして登録したメールのチェックは必ず行ってください。

+

隠語や一般的ではない略語等は使わない

+

Bugzilla-jp内のバグは全ての技術者に意味の通じるものであるべきです。Bugzilla-jp内で使われている特殊な用語を除き、一部のコミュニティ等でしか通じない隠語や略語等の使用はしないでください。(例えば、炎狐、串、鯖、等々)

+

開発者を煽る内容の書き込みをしない

+

Bugzillaではよく、「まだこのバージョンでこのバグは再現する」、とか「なぜこのバグを誰も修正しないのか」といった、開発者を煽る内容の書き込みをする人が居ます。これは非常に迷惑な行為なので書かないでください。(ひどい場合はアカウント停止の可能性もあります。)

+

特定のバグが修正されないことにいらだちを覚え、我慢できないのであれば自分自身で修正すべきです。

+

返答の仕方

+

Bugzillaでは他人のコメントに対して返答することがよくあります。この際に元の文章を引用しておく方が便利なことがあります。(後から見た人や、返答を読むべき人が内容を把握しやすい。)

+

特定のコメントに対して返答する場合、そのコメントにある{{ mediawiki.external('返信') }}というリンクをクリックしてください。そうすると、コメント入力欄に自動的にそのコメントが引用されます。ここから不要な部分を削除して利用してください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html b/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html new file mode 100644 index 0000000000..fb8ddc1657 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/comment/linkrules/index.html @@ -0,0 +1,23 @@ +--- +title: LinkRules +slug: Bugzilla-jp/Guide/Comment/LinkRules +--- +

Bugzilla-jpの自動リンク機能

+

Bugzillaではプレーンテキストしか使えません。ですが、それだけでは不便なのでいくつかの自動リンク機能が用意されています。

+

URLを記述した場合は自動的にリンクされます

+

URLの記述時には自動的にそのURLの文字列がそのURLへのリンクとなります。対応しているスキームはhttp、https、ftpです。国際化ドメインにも対応しています。

+

また、URLに続けて日本語を記述する場合、半角のスペースをはさんでください。国際化されたURLに対応するため、非ASCII文字でもURLの一部と判定されてリンクの対象となります。閉じ括弧")"でもURLは終了したとみなされることに注意してください。

+

Bugzilla-jp内のバグへのリンク

+

Bugzilla-jp内の別のバグへのリンクは"bug xxxx"という書式で生成されます。(xxxxはリンクしたいバグの番号)

+

また、そのバグの要約も生成されたリンクのtitle属性に自動的に入るので、明示する必要はありません。

+

コメントへのリンク

+

特定のコメントへのリンクは"comment yyyy"という書式で生成されます。(yyyyはリンクしたいコメントの番号、報告時のコメントは0)

+

別のバグのコメントへは"bug xxxx comment yyyy"という書式で生成されます。

+

Bugzilla-orgのバグへのリンク

+

Bugzilla-orgのバグへのリンクは"bug-org xxxx"という書式で生成されます。 Bug-orgのバグのコメントへは"bug-org xxxx comment yyyy"となります。

+

添付ファイルへのリンク

+

Bugzilla-jp内の添付ファイルへのリンクは"attachment xxxx"という書式で生成されます。全てのバグを通して添付ファイルはユニークなIDを持つのでコメントのようにバグ番号を明示する必要はありません。

+

Bugzilla-orgの添付ファイルへのリンク

+

Bugzilla-orgにある添付ファイルへのリンクは"attachment-org xxxx"という書式で生成されます。

+

クラッシュログへのリンク

+

Quality Feedback AgentやBreakpadのログのIDは独特の形式を持つので、そのまま書き込めば自動的にそれを解析した結果へのリンクとなります。特に接頭辞等は必要ありません。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html b/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html new file mode 100644 index 0000000000..73bd7fd2d3 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/contribute/index.html @@ -0,0 +1,34 @@ +--- +title: Contribute +slug: Bugzilla-jp/Guide/Contribute +--- +

+

+

どのような貢献が求められていますか?

+

Bugzilla-jpでは常に貢献者を募集中です。 +

まず、貢献者は前提としてこのドキュメントに書かれているBugzilla-jpの運用ルールを理解し、従う必要があります。ですが、それ以外に特に必要なことはありません。具体的に、私たちは以下の作業に貢献してくれる人を待っています。 +

+

テストし、適切にバグを報告する

+

たとえば様々なWebページを作成し、標準仕様とは異なるレンダリングが行われないかテストし、バグがあれば報告する、といった作業が求められています。 +

+

不十分な報告内容に対するヒアリング

+

報告されるバグの内容は十分とは言えないことが多いです。報告に欠けている情報を報告者に問い合わせたり、自分でテストを行ってその結果から、補足するべきことがあれば補足を行うといった作業が求められています。 +

+

テストケースの作成

+

シンプルでわかりやすいテストケースの作成はかなり難しいものです。報告された内容を再現させる簡単なテストケースを作ることは原因を絞り込むための第一歩です。この作業を行える人材が求められています。 +

+

Bugzilla-orgのバグを探す

+

報告されたバグがBugzilla-orgに報告されているバグのどれにあたるのかを調査するという作業が求められています。もちろん、英語を読む能力と、そのバグをテストできる程度の知識が必要です。 +

+

Bugzilla-orgにバグを報告する

+

Bugzilla-jpに報告されたバグがBugzilla-orgには登録されていない場合、英語でBugzilla-orgにも登録する必要があります。この作業者はBugzilla-orgのcanconfirm権限を持っていることが望まれます。 +

+

Bugzilla-orgに報告されているバグをBugzilla-jpにも報告する

+

もちろん無闇に行われては困りますが、Bugzilla-orgにしか報告されていないバグでも重要なバグは多々あります。そういったバグをBugzilla-jpにも登録しておけば、日本語でそういったバグも検索可能になります。もちろん、報告したバグは報告者が担当してください。 +

+

Bugzilla-orgのバグの状況を確認する

+

Bugzilla-jpのバグの担当者は非常に多くのバグを担当しているため、Bugzilla-orgでの状態の変更を見落としていることが多々あります。もし、Bugzilla-jpのバグとBugzilla-orgのバグの状態がずれている場合、それを担当者に警告する必要があります。もちろん、その警告はBugzilla-jp上で行います。メール等で直接行うと、他のスタッフのサポートが期待できないからです。 +

+

バグを修正できるパッチを提案する

+

バグの修正が可能な技術者はパッチを提案することができます。私たちは新たなハッカーの登場を常に待ちわびています。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html b/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html new file mode 100644 index 0000000000..debd4db861 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/grossary/index.html @@ -0,0 +1,220 @@ +--- +title: Grossary +slug: Bugzilla-jp/Guide/Grossary +--- +

Bugzilla-jp用語集

+

A～I

+
+
+ alpha
+
+ 開発初期段階でのテスタ向けリリースをalpha版と呼ぶ。Mozilla関連製品では通常、a1、a2がリリースされる。リスクのある修正や大規模な修正はこの段階で終了しなくてはけない。
+
+
+
+ beta
+
+ 開発初期段階が終了するとbeta版と呼ばれるビルドがリリースされる。Mozilla関連製品では通常、b1、b2がリリースされる。ほぼ全ての修正はこの段階で終了していなくてはならない。
+
+
+
+ branch
+
+ TrunkとBranchの違いと注意参照。
+
+
+
+ bug
+
+ バグとは参照。
+
+
+
+ bugzilla
+
+ Bugzillaとは参照。
+
+
+
+ bugzilla-org
+
+ 本家のこと。
+
+
+
+ bug-org
+
+ 本家のこと。
+
+
+
+ CVS
+
+ Mozilla関連製品の開発に使われているバージョン管理ソフト。
+
+
+
+ fx
+
+ Firefoxの略。
+
+
+
+ IME
+
+ Input Method Editorの略。もともとWindowsの日本語入力用ソフトの名称だが、Mozilla関連製品の開発では全てのプラットフォームで日本語入力プログラムの総称として使われている。他のプラットフォームではIMやTSMといった呼称もあるが、Mozillaのソースコードではプラットフォーム固有のコードでない限りはIMEが用いられる。(固有部分でもIMEという単語は多用されている。)
+
+
+
+ i18n
+
+ internationalizationの略。
+
+
+
+ internationalization
+
+ 国際化とも。製品が特定の言語や文化に依存せずにあらゆる言語等で利用可能とすることを言う。例えば、英語版の製品であっても日本語の表示や入力に対応させること。
+
+
+
+ INVA
+
+ INVALIDの略。
+
+

J～Z

+
+
+ JLP
+
+ 日本語版の言語パック。英語版のMozilla関連プロダクトでも、その製品用のJLPがあれば日本語化可能。
+
+
+
+ l10n
+
+ localizationの略。
+
+
+
+ localization
+
+ 地域化とも。UI等の翻訳を主に指す。Bugzilla-jpでは主に英語版の製品を日本語版にすること等を指して使う。
+
+
+
+ RC
+
+ Release Candidateのこと。製品りリリース候補版。Mozillaの場合、RC1ではまだいくつかの修正が必要なことが多いが、RC2はそのまま最終版としてリリースされることがある。
+
+
+
+ regression
+
+ リグレッション。直訳すると後退。なんらかのバグの修正によって別のバグが発生した場合、そのバグをこう呼ぶ。
+
+
+
+ suite
+
+ Mozilla Application Suiteの略。既に開発は終了し、SeaMonkeyとして再スタートしている。
+
+
+
+ tb
+
+ Thunderbirdの略。
+
+
+
+ trunk
+
+ TrunkとBranchの違いと注意参照。
+
+
+
+ WFM
+
+ WORKSFORMEの略。
+
+

あ・か・さ行

+
+
+ クラッシュ
+
+ アプリケーションがなんらかのバグにより、使用途中に強制終了してしまうこと。クラッシュは原因によってはセキュリティバグとして扱われる。
+
+
+
+ 国際化
+
+ internationalizationのこと。
+
+
+
+ コンテキストメニュー
+
+ Windows/GTK2/Macで右クリックで表示されるメニューのこと。
+
+

た・な・は行

+
+
+ 地域化
+
+ localizationのこと。
+
+
+
+ チェックイン
+
+ 修正パッチを開発ツリーに入れる作業。これが終わるとバグが修正される。
+
+
+
+ バグ
+
+ バグとは参照。
+
+
+
+ バックアウト
+
+ CVSに入れられたパッチの逆のパッチをチェックインすること。つまり、もとのチェックインを無かったことにする。
+
+
+
+ パッチ
+
+ プログラムの差分を表す小さなテキストファイル。diffコマンドで生成されたもの。
+
+
+
+ ハングアップ
+
+ ハングアップはなんらかのバグにより、アプリケーションからの応答が無くなった状態を指す。再現条件から原因を判断するしか無いため、一般的にクラッシュバグよりも原因究明に手間がかかる。
+
+
+
+ 本家
+
+ mozilla.orgの運営するBugzillaのこと。このドキュメント内では検索エンジン等で表示された場合にも文意を明確にするため、bugzilla-orgという表記を用いているが、普段Bugzilla-jpでは本家という記述が一般的。
+
+

ま・や・ら・わ行

+
+
+ メタバグ
+
+ メタバグを利用するを参照。
+
+
+
+ も組
+
+ もじら組の略。
+
+
+
+ リグレッション
+
+ regression参照。
+
diff --git a/files/ja/orphaned/bugzilla-jp/guide/index.html b/files/ja/orphaned/bugzilla-jp/guide/index.html new file mode 100644 index 0000000000..537447a41f --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/index.html @@ -0,0 +1,65 @@ +--- +title: Guide +slug: Bugzilla-jp/Guide +--- +

はじめてのバグジラ

+

このドキュメントはBugzilla-jpを利用するのに必要な知識やノウハウを提供しています。もし、このドキュメントの内容が不十分だったり、間違った記述を発見した場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグとして報告してください。

+

このドキュメントの読み方

+

このドキュメントは目的に応じて読み分けることができるように、複数の章に分割されています。Bugzilla-jpを利用する全ての利用者は第一章と第二章は必ず目を通す必要があります。

+

そして、それ以外にもあなたのとりたい行動(たとえばバグを報告したい等)にあわせて、その手順を紹介したドキュメントを読む必要があります。

+

このドキュメントは各手順の単なる説明書ではなく、その際に決まっている様々なルールを明文化しています。このルールに従わない方の参加は多くの開発者の仕事を妨害してしまう可能性がありますので、Bugzilla-jpの利用前に必ず目を通し、理解していただけますよう、お願いいたします。

+

目次

+
    +
  1. Bugzilla-jpとは +
      +
    1. Bugzillaとは
      2. +
    2. バグとは
      3. +
    3. バグの詳細情報
      4. +
    4. プロダクトとコンポーネント
      5. +
    5. アカウントの作成
      6. +
    6. アカウントの設定を変更する
      7. +
    7. TrunkとBranchの違いと注意
      8. +
    +
    2. +
  2. バグのライフサイクル +
      +
    1. Mozilla関連製品に関するバグのライフサイクル
      2. +
    2. Web標準化プロダクトに関するバグのライフサイクル
      3. +
    3. Webtoolsプロダクトに関するバグのライフサイクル
      4. +
    4. もじら組のコンテンツに関するバグのライフサイクル
      5. +
    5. 談話室ばぐじらに関するバグのライフサイクル
      6. +
    +
    3. +
  3. バグの情報を探す +
      +
    1. 簡単な検索
      2. +
    2. 詳細な検索
      3. +
    3. 検索のコツ
      4. +
    +
    4. +
  4. バグを追跡する
    5. +
  5. バグを報告する +
      +
    1. Webの表示に関するバグを報告する
      2. +
    2. ユーザインターフェースに関するバグを報告する
      3. +
    3. クラッシュするバグを報告する
      4. +
    4. セキュリティに関するバグを報告する
      5. +
    5. メモリリークに関するバグを報告する
      6. +
    6. 要望を報告する
      7. +
    +
    6. +
  6. バグにコメントを付ける +
      +
    1. Bugzilla-jpの自動リンク機能
      2. +
    +
    7. +
  7. 運用ガイド +
      +
    1. アカウントの削除申請
      2. +
    2. アカウントの権限昇格
      3. +
    3. アカウントの緊急停止
      4. +
    +
    8. +
  8. どのような貢献が求められていますか?
    9. +
  9. Bugzilla-jp用語集
    10. +
diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html new file mode 100644 index 0000000000..6ebe17962e --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/index.html @@ -0,0 +1,33 @@ +--- +title: LifeCycle +slug: Bugzilla-jp/Guide/LifeCycle +--- +

バグのライフサイクル

+

各バグはステータスによって状態を管理されています。ステータスには以下のものがあります。

+

UNCONFIRMED

+

通常のアカウントから報告された直後のバグの状態です。つまり、そのバグは未だに関係者によって再現が確認されていません。バグ報告としてはまだ成立していない状態ですので、再現しにくいバグの場合、報告者の助けが重要なウエイトを占めることがあります。もし、報告者の協力が得られない場合は、そのままバグを閉じられてしまうことも多々あります。

+

NEW

+

バグの存在が確認された状態です。UNCONFIRMEDの状態のバグがスタッフによって確認された場合にこの状態に変更されます。

+

また、スタッフや、canconfirm権限のあるアカウントで報告された場合は最初からこの状態になっています。

+

ASSIGNED

+

バグについて担当者が作業を開始した場合にこの状態に変更されます。担当者が行う作業はプロダクトごとに異なっています。詳しくは次ページ以降を参照してください。

+

RESOLVED

+

そのバグに対して何らかの決着がついたことを示す状態です。 一般的には、そのバグに対する作業が終了したことを示しています。 この時、同時に処理方法がFIXED、INVALID、WONTFIX、LATER、REMIND、WORKSFORME、DUPLICATEのいずれかに設定されます。DUPLICATE以外の処理方法の意味は、プロダクトによって異なってきますので、詳細はページ末尾からリンクしているプロダクトごとの解説を参照してください。

+

DUPLICATEとなった場合、そのバグは別の登録されているバグと同じものでした。報告者はこの時、同時に同じ内容だった別のバグへとCCされます。もし、重複が誤りであると思うのであれば、自分が報告した方のバグに何らかのコメントを付けてください。決して、この目的でもうひとつのバグの方にコメントを付けないように注意してください。

+

VERIFIED

+

RESOLVEDとなったバグに対して、 別のスタッフか報告者がその事実を確認した状態です。 この状態になっていれば、そのバグは完全に決着が着いた状態であると言えます。

+

REOPENED

+

VERIFIEDとなったバグが、実はまだ解決していなかったことが分かった場合にこの状態になります。この際に、設定されていた処理方法はリセットされ、空白に戻ります。

+

多くの場合、RESOLVEDになった時に設定された処理方法が適切ではなかった場合に、一度REOPENEDとなり、適切な処理方法を再設定して、RESOLVEDに戻すために利用されます。

+

バグの修正が不十分だった場合にREOPENEDになることもありますが、実際にはそれは希です。大抵、修正が不十分だった場合は別の問題が発覚したということなので、新たにバグが登録されるからです。

+

なお、一度修正されたバグが再発しても、REOPENEDにはなりません。バグの再発は異なる原因で再発していることが大半だからです。また、バグの担当者は既にBugzilla-jpでは作業していないかもしれません。このような場合、REOPENEDは適当な処理とは言えません。この場合も新たにバグを登録しなおすのが適当です。

+
+

ステータスはバグの管理において、最も重要な要素のうちのひとつです。Bugzilla-jpでの運用経験の少ないアカウントはこれを変更してはいけません。もし、ステータスが変更されるべきなのにスタッフ、もしくは開発者のミスで変更が行われない場合、コメントでその旨をスタッフに伝えて、スタッフの判断を待ってください。

+

プロダクトごとのより細かいライフサイクルと、処理方法の意味は以下のドキュメントを参考にしてください。

+
    +
  1. Mozilla関連製品に関するバグのライフサイクル
    2. +
  2. Web標準化プロダクトに関するバグのライフサイクル
    3. +
  3. Webtoolsプロダクトに関するバグのライフサイクル
    4. +
  4. もじら組のコンテンツに関するバグのライフサイクル
    5. +
  5. 談話室ばぐじらに関するバグのライフサイクル
    6. +
diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html new file mode 100644 index 0000000000..42631b17be --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozilla/index.html @@ -0,0 +1,65 @@ +--- +title: Mozilla +slug: Bugzilla-jp/Guide/LifeCycle/Mozilla +--- +

+

+

Mozilla関連製品に関するバグのライフサイクル

+

Mozilla関連製品のバグとは、Core、Firefox、Thunderbird、Camino、Mozilla Application Suite、Calendar、L10N(日本語化)プロダクトのバグのことを指します。 +

これらのプロダクトのステータスはTrunkでの開発状況を示します。これはBugzilla-jpで修正済みであるとされたバグであっても、次にリリースされる公式のビルドで修正されているとは限らないことに注意してください。 +

これらのバグで行われる作業とは、報告されたバグの確認とテスト、Bugzilla-orgの該当バグとの関連づけと、その追跡です。担当者はバグを修正するのではなく、そのバグの状態を追跡するのが仕事です。 +

処理方法の各意味は次のように定義されています。 +

+

FIXED

+

このバグはTrunkにおいて修正済みです。 +

+

WORKSFORME

+

このバグはTrunkにおいて再現しません。もしくは、報告者以外の環境で再現しませんでした。 +

+

INVALID

+

このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) +

+

INCOMPLETE

+

何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) +

+

WONTFIX

+

このバグはバグですが修正されません。標準仕様がまずい場合や、実装するとパフォーマンスが著しく低下してしまうような場合、修正が著しく困難な場合、要望が受け入れられない場合等に用いられます。 +

+

OBSOLETE

+

このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。 +

+

DUPLICATE

+

このバグは別のバグと同じ内容でした。 +

+

LATER

+

使用しません。 +

+

REMIND

+

使用しません。 +

+<hr> +

これらのプロダクトでは、担当の決定までのプロセスで、 +報告のされ方から三つのパターンが考えられます。 +

一つめは、Trunkの最新のNightly Buildで確認されたバグを報告されたものです。 +このバグは大抵の場合、すぐにスタッフによって確認が行われ、バグが確認されるとNEWになり、スタッフがBugzilla-orgから該当のバグを探す作業に入ります。Bugzilla-orgで該当のバグが発見されると、発見した人か、別のスタッフがバグの担当に就任し、ASSIGNEDとなり、Bugzilla-orgの該当バグの追跡を開始します。 +

もし発見できなかった場合は新たにBugzilla-orgにバグを報告し、報告者が担当に就任してBugzilla-orgの該当バグの追跡を開始します。 +

二つめは、最新のリリースビルドを使って確認されたバグを報告されたものです。このバグの場合、Trunkの最新のNightly Buildで再現確認が行われます。もし、再現した場合は一つめのケースと同様に処理されることになります。しかし、再現しなかった場合は少し面倒です。 +

まず、同じリリースビルドで再現するかどうかが確認されます。もし、ここで確認された場合、Trunkでは修正されているということで、Bugzilla-orgで該当の修正済みのバグを探すことになります。 +

もし、バグが見つかれば、Bugzilla-orgのバグがREOPENEDに戻らないか、監視するために誰かが担当に就任して、そのままRESOLVED FIXEDとなります。見つからなかった場合は、担当者不在のまま、RESOLVED WORKSFORMEとなります。 +

もし、リリースビルドでも再現できなかった場合は報告者とのやりとりによって、再現に努めることになりますが、適当な所で作業が打ち切られて、RESOLVED WORKSFORMEもしくは、RESOLVED INVALIDとなることもあります。 +

三つめは、Bugzilla-orgに報告されていて、再現するバグをBugzilla-orgのバグID付きで報告される場合です。この場合、報告者がそのまま担当に就任するか、スタッフが担当に就任し、ASSIGNEDとなります。 +

担当者によりバグの追跡が開始されると、多くの場合、そのバグの更新は修正されるまで停滞することになります。日本人開発者がそのバグの修正に取りかかった場合、日本人間でのディスカッションが必要ならそのバグで議論が行われますが、それは希です。 +

Bugzilla-orgの関連したバグで何らかの動きがあれば、担当者はその動きを報告してくれるかもしれません。しかし、担当者にその義務はありませんので、担当者次第です。リアルタイムに情報が欲しい場合は関連づけられたBugzilla-orgのバグを自分で追跡する必要があります。 +

Bugzilla-orgの該当バグがRESOLVEDになった場合、その結果によって以下の四つの対処が担当者によって行われます。 +

一つめは、Bugzilla-orgでFIXEDまたは、WORKSFORMEとなった場合です。この場合、担当者はバグのホワイトボードにBug-org [Bugzilla-orgのバグの番号] [FIXED|WORKSFORME]と、関連バグの処理結果をメモします。 +

そして、担当者、またはテストできる人間が、バグの修正、または、再現しないことを確認すると、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。また、同時に、修正されたタイミングを明確化させるために、現在のTrunkのサイクルから適切な値をターゲットマイルストーンに設定します。 +

さらに別のスタッフ、もしくは報告者自身が修正を確認した場合、VERIFIEDとなります。 +

もし、修正を確認できなかった場合、関連づけていたBugzilla-orgとは関係なかった可能性があるので再調査となります。 +

二つめは、Bugzilla-orgでINVALIDまたはWONTFIXとなった場合です。この場合、担当者はバグのホワイトボードにBug-org [Bugzilla-orgのバグの番号] [INVALID|WONTFIX]と、関連バグの処理結果をメモし、その根拠となったコメントを要約(翻訳)して、その理由をBugzilla-jp上でも明記し、Bugzilla-orgと同様の処理方法で、RESOLVEDとします。さらに別のスタッフがその根拠を受け入れた場合、VERIFIEDとなります。 +

もしスタッフ以外でこの結果に納得できない人がいる場合、 +その人はスタッフに事情を説明して説得するか、 +直にBugzilla-orgの担当者と英語でディスカッションする必要があります。 +

三つめは日本人開発者がバグを修正した場合です。この場合、ホワイトボードに一つめの場合と同様の記述を行い、直ちにRESOLVED FIXEDとなります。これは、バグの修正課程において日本人の環境下でその修正がテストされているためです。 +

後に、別のスタッフが修正を確認するとVERIFIEDとなります。 +

四つめは関連づけていたBugzilla-orgのバグがRESOLVED DUPLICATEとなった場合です。この場合、担当者は新たに重複していた元のバグの監視を継続することになります。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html new file mode 100644 index 0000000000..fa276563bf --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/mozillagumi/index.html @@ -0,0 +1,46 @@ +--- +title: MozillaGumi +slug: Bugzilla-jp/Guide/LifeCycle/MozillaGumi +--- +

+

+

もじら組のコンテンツに関するバグのライフサイクル

+

このプロダクトではもじら組内のコンテンツ全般のバグ報告を扱っています。 +

またBugzilla-jpの運用方針に関するディスカッションもコンポーネント:bugzilla-jpで行っています。 +

このプロダクトのステータスは問題とされたコンテンツのバグの修正状況や、ディスカッションの状態を示します。 +

処理方法の各意味は次のように定義されています。 +

+

FIXED

+

このバグは既に修正済みです。 +

もしくは、ディスカッションは決着しました。 +

+

WORKSFORME

+

このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。 +

ディスカッションでは使用されません。 +

+

INVALID

+

このバグはバグではありません(仕様通りです)。または、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。) +

ディスカッションの場合、提案は却下されました。 +

+

WONTFIX

+

このバグはバグですが修正されません。 +

ディスカッションの場合、提案の内容は的を射ていましたが、対応不能です。 +

+

OBSOLETE

+

このバグは修正された訳ではありませんが、再現不可能になっています。バグのあったページが削除された場合等に使用されます。 +

+

DUPLICATE

+

このバグは別のバグと同じ内容でした。 +

+

LATER

+

使用しません。 +

+

REMIND

+

使用しません。 +

+<hr> +

このプロダクトでは報告された内容がバグであると確認されるか、ディスカッションすべき内容であると確認されると、NEWとなります。 +

もし、バグではない場合や、的を射ていない提案の場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合や、提案は実現不能と考えられた場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。 +

もし報告されたバグが修正可能で、担当者が作業を開始するとASSIGNEDとなります。ディスカッションの場合は誰かが議論の中心に立つ場合、担当者となりASSIGNEDとなります。 +

そして修正が完了、もしくは決着すると、RESOLVED FIXEDとなり、別のスタッフがそれを確認すると、VERIFIEDとなります。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html new file mode 100644 index 0000000000..360bef3837 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/qamozilla/index.html @@ -0,0 +1,40 @@ +--- +title: QAMozilla +slug: Bugzilla-jp/Guide/LifeCycle/QAMozilla +--- +

+

+

談話室ばぐじらに関するバグのライフサイクル

+

このプロダクトは他に適当なコンポーネントが無いディスカッションのために用いられます。 +

このプロダクトのステータスは話題の状態を示します。NEWもしくはASSIGNEDならまだ話題についての議論は続いているのでしょう。逆に、RESOLVEDやVERIFIEDならおそらく議論には決着が着いています。 +

処理方法は概ね次のような意味かもしれませんが、明確な定義はありません。 +そのバグの下の方のコメントを読んで、自分で判断するべきでしょう。 +

+

FIXED

+

この議論は決着したのかもしれません。もしくは、コメントが大量に付いたため、 +新たにバグを登録して、そちらでの議論に移ったのかもしれません。 +

+

WORKSFORME

+

おそらく使用されません。 +

+

INVALID

+

話題は的を射ていないことだったのかもしれません。 +

+

INCOMPLETE

+

その議論の提案者にしか判断できない議論なのに、提案者から応答が得られなかったようです。 +

+

WONTFIX

+

議論は決着が着かなかったのかもしれません。 +

+

OBSOLETE

+

議論の内容に意味がなくなったのかもしれません。 +

+

DUPLICATE

+

この話題は別のバグと同じ内容でした。 +

+

LATER

+

おそらく使用されません。 +

+

REMIND

+

おそらく使用されません。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html new file mode 100644 index 0000000000..d08f2ff17a --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webstandard/index.html @@ -0,0 +1,56 @@ +--- +title: WebStandard +slug: Bugzilla-jp/Guide/LifeCycle/WebStandard +--- +

+

+

Web標準化プロダクトに関するバグのライフサイクル

+

このプロダクトのステータスは問題のあるサイトの管理者とのコンタクト状況や、 +問題のサイトの修正状況を示します。 +

このプロダクトで行われる作業とは、報告された問題に関する仕様の調査と、修正方法(標準仕様に準拠した代替方法)の検討、問題のあるサイトへの修正依頼と、そのサイトの監視です。担当者は問題のあるサイトにコンタクトをとった人物で、サイトの監視義務はありません。 +

注意:このプロダクトに報告された問題は、報告された時にスタッフによりチェックされますが、(色々な意味で)興味深い問題ではなく、さほど公益性のあるサイトで無い場合には誰も担当しない可能性があります。 +

ただし、興味深い問題に関しては、Web標準普及プロジェクトや、Geckoそのものにフィードバックが行われることがあり、この場合、そのサイトが修正されなくても大きな意義があります。 +

処理方法の各意味は次のように定義されています。 +

+

FIXED

+

問題のあるサイトはGeckoに対応させるために修正してくれました。 +

+

WORKSFORME

+

問題のあるサイト、またはページが無くなりました。または、Geckoの仕様変更により、最新のリリースビルドで非標準への妥協があり、Geckoでのアクセスには問題なくなりました。 +

+

INVALID

+

INCOMPLETE導入前はINVALIDが代わりに利用されていましたが、現在は利用されていません。 +

+

INCOMPLETE

+

妥当な報告として成立しませんでした。 +

+

WONTFIX

+

問題のあるサイトにコンタクトを取りましたが、長期間に渡って反応がありませんでした。もしくは、問題のあるサイトから、修正しない旨の返事がありました。 +

+

OBSOLETE

+

使用しません。 +

+

DUPLICATE

+

この問題は既に報告されていました。(同一のサイトであることが条件です。) +

+

LATER

+

問題のあるサイトにコンタクトを取ったところ、後ほど(例えば、次のリニューアル時に)対応すると返事がありました。 +

+

REMIND

+

問題のあるサイトにコンタクトを取ったところ、検討するという返事がありました。 +

+<hr> +

このプロダクトでは報告があると、まず、 +発生している問題がWeb標準仕様に準拠していなためであることを確認します。 +もし、Geckoのバグが原因である場合はプロダクトが変更され、{{ mediawiki.external('Bugzilla-jp:Guide:LifeCycle:Mozilla|Mozilla関連製品に関するバグのライフサイクル') }}として処理されます。 +

サイト側の問題であることが確認されると、ステータスをNEWとして、次のように処理します。 +

まず、Web標準普及プロジェクトのWeb標準化Tipsに記載されている既知の問題の場合、ドキュメント内に原因や修正方法が既に記載されているので、サイトの管理者にそのドキュメントのURIを提示し、修正を依頼します。 +

Web標準化Tipsに記載されていない問題の場合、修正案を作成し、コメントに修正方法を記述するか、添付ファイルで差分を提出します。もし、別のスタッフに修正案を確認してもらう必要がある場合、差分を提出し、レビューを依頼します。そして、修正案が固まったら、サイトの管理者にコンタクトをとり、修正方法の提示と、修正依頼を行います。 +

修正依頼を行う相手は、サイト上に連絡先が明記されている場合には、その連絡先になります。連絡先が明記されていない場合で、ドメインを他のサイトと共有していないサイトの場合、WHOISサービスを使って、サーバの管理者を調べ、その管理者にメールでコンタクトを取ります。もし、他のサイトと共有しているサーバで連絡先が不明な場合はコンタクトを断念し、RESOLVED WONTFIXとなります。 +

サイト側とコンタクトを取ることに成功すると、その人が、担当に就任し、ステータスをASSIGNEDとします。 +

コンタクトをとった場合、サイトから返事が返ってくることがあります。 +この場合、その内容に従って必要ならステータスを変更し、 +処理方法に適切なものを設定します。 +

連絡が無い場合はそのサイトを適当に監視するしかありません。もし、サイトが更新され、問題に変化があった場合はその旨をコメントします。スタッフがそれを確認したら、適宜、ステータスを変更し、適切な処理方法でバグを閉じます。その後、別のスタッフによって再確認が行われると、VERIFIEDとなります。 +

もし、長期間に渡って問題が改善されず、不特定多数が利用する特にメジャーなサイトでは無い場合、RESOLVED WONTFIXとして監視を中断することもあります。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html new file mode 100644 index 0000000000..d0c251cfd4 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/lifecycle/webtools/index.html @@ -0,0 +1,31 @@ +--- +title: WebTools +slug: Bugzilla-jp/Guide/LifeCycle/WebTools +--- +

Webtoolsプロダクトに関するバグのライフサイクル

+

このプロダクトは特殊で、コンポーネントによって異なります。このプロダクトにはBugzillaそのもののバグを取り扱うBugzillaコンポーネントと、Bugzilla-jpでカスタマイズしている部分のバグを取り扱うBugzilla-jpコンポーネントの二つがあります。前者については、Bugzilla.orgのプロダクトのバグのため、Mozilla関連製品に関するバグのライフサイクルと同じライフサイクルとなりますので、そちらを参考にしてください。このページでは、後者、Bugzilla-jpコンポーネントの場合についてのみ説明しています。

+

このプロダクトのステータスはBugzilla-jpのバグの修正状況を示します。

+

処理方法の各意味は次のように定義されています。

+

FIXED

+

このバグは既に修正済みです。

+

WORKSFORME

+

このバグは現在再現しません。もしくは、報告者以外の環境で再現しませんでした。

+

INVALID

+

このバグはバグではありません(仕様通りです)。または、INCOMPLETE導入前のバグで、何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)

+

INCOMPLETE

+

何らかの報告内容の不備により、妥当なバグ報告として成立しませんでした。(例えば、スタッフからの問い合わせに報告者が応答しませんでした。)

+

WONTFIX

+

このバグはバグですが修正されません。例えば、あまりにも巨大な修正が必要なバグは解決できません。

+

OBSOLETE

+

このバグは修正された訳ではありませんが、再現不可能になっています。バグが再現していた条件がサポート対象外となった場合や、設計変更等により、そのバグが発生していた要件が揃わなくなった場合に用いられます。

+

DUPLICATE

+

このバグは別のバグと同じ内容でした。

+

LATER

+

使用しません。

+

REMIND

+

使用しません。

+
+

このプロダクトでは報告された内容がバグであると確認されると、NEWとなります。

+

もし、バグではない場合は、RESOLVED INVALIDに、バグが修正できないと判断された場合は、RESOLVED WONTFIXに、バグが再現しない場合は、RESOLVED WORKSFORMEとなります。そして、別のスタッフがこれに同意すれば、VERIFIEDとなります。

+

もし報告されたバグが修正可能で、担当者が修正を開始するとASSIGNEDとなります。

+

そして修正が完了すると、RESOLVED FIXEDとなり、別のスタッフが修正を確認すると、VERIFIEDとなります。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html new file mode 100644 index 0000000000..0ebe0c4373 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/management/deleteaccount/index.html @@ -0,0 +1,9 @@ +--- +title: DeleteAccount +slug: Bugzilla-jp/Guide/Management/DeleteAccount +--- +

アカウントの削除申請

+

Bugzillaにはアカウントを削除する機能がありません。

+

単にメールの配信を止めたいだけであれば、 メールの送信設定を変更するを参考に、メールの配信を止めてください。

+

なんらかの理由でそれだけではなく、アカウントそのものを完全に削除したい場合、プロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで削除要請のバグをたてて、理由を説明してください。

+

データベースの構造上、基本的にはアカウントの削除はできませんので、全てのケースにおいて、削除申請が受理されるとは限らないことに注意してください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/index.html new file mode 100644 index 0000000000..17475eef3b --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/management/index.html @@ -0,0 +1,11 @@ +--- +title: Management +slug: Bugzilla-jp/Guide/Management +--- +

運用ガイド

+

以下のドキュメントは権限が関係したりする、運用ルールについてまとめています。もし、ここで明記すべきルールが他にもある場合、Bugzilla-jpにプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpでバグを登録してください。

+
    +
  1. アカウントの削除申請
    2. +
  2. アカウントの権限昇格
    3. +
  3. アカウントの緊急停止
    4. +
diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html new file mode 100644 index 0000000000..45b187ed86 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/management/stopaccount/index.html @@ -0,0 +1,16 @@ +--- +title: StopAccount +slug: Bugzilla-jp/Guide/Management/StopAccount +--- +

+

+

アカウントの緊急停止

+

特定のアカウントが故意であるか否かに関わらず、Bugzilla-jpへの適切ではない投稿や、その他の行為があった場合に、即時停止されます。 +

これはBugzilla-jpのデータや運用に対する被害を最小限に抑えるために一切の事前通告等はありません。 +

もし、スタッフが問題視した行動が故意ではなかったことが判明したり、そのような行動を二度と行わないと判断された場合には、そのアカウントは再び通常の状態に戻されます。 +

アカウントを停止させたスタッフは停止メッセージの中で停止解除のための連絡先を明記すべきです。もし、停止に納得できず、連絡先が明記されていない場合、xxx@xxxに連絡してその旨を説明してください。 +

+
+

すみません。まだ緊急時の連絡先はまだ決定しておりません。それまでは停止メッセージの中に連絡先が記述されているはずです。 +

+
diff --git a/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html b/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html new file mode 100644 index 0000000000..23d1ea5b1a --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/management/upgradeaccount/index.html @@ -0,0 +1,30 @@ +--- +title: UpgradeAccount +slug: Bugzilla-jp/Guide/Management/UpgradeAccount +--- +

+

+

アカウントの権限昇格

+

アカウント毎に編集に関する権限設定が存在します。登録しただけのアカウントではNEWのバグすら登録することはできません。もし、あなたがBugzilla-jpの権限が足りずに困っているのであれば、以下の要件を確認した上でアカウントの権限昇格を申請するバグをプロダクト:mozilla.gr.jp、コンポーネント:bugzilla-jpで登録してください。 +

+

canconfirm権限を取得する

+

canconfirm権限とはNEWのバグを登録したり、ガイドモードを利用せずにバグを登録したり、UNCONFIRMEDのバグをNEWに変更することが可能です。他人の登録したバグの編集権限はありませんが、この権限は簡単に取得することができます。 +

要件として、あなたが報告したバグが3件以上必要です。また、それらのバグはこのドキュメントで説明されているような的確で分かりやすいバグである必要があります。 +

つまり、私たちはあなたのバグ報告能力をこの権限を持つに適当なものであるかどうかを確認する必要があります。 +

+

editbugs権限を取得する

+

editbugs権限とは他人の報告したバグを編集することができる権限です。この権限があればあなたは多くの仕事をBugzilla-jp上ですることが可能になりますが、それ故に、この権限の取得にはある程度の実績が必要です。 +

あなたがパッチやテストケースを頻繁にBugzilla-jpを利用して提出するのであれば、この権限は短期間で付与されます。 +

あなたが1年以上、長期的にBugzilla-jpに貢献している(例えば多くのバグで担当者を名乗り出る等)場合もこの権限を持つ対象となります。 +

もちろん、これらの条件を満たしていなくても、スタッフがあなたはこの権限を持つべきであると判断した場合には権限は付与されます。 +

+

セキュリティバグを見る権限を取得する

+

この権限はほとんどのアカウントに付与されません。 +

特定のセキュリティバグであなたの助けが必要であるとスタッフが判断した場合、あなたをそのバグのCCリストに追加し、そのバグを見ることができるようにするでしょう。 +

全てのセキュリティバグを見ることができる権限はそういった助けが常に必要であると思われる方(つまり、セキュリティバグに関する知識や、これをむやみに公表しない人であるといった印象が必要)にはスタッフ側から適時、この権限が付与されます。 +

+

Bugzilla-jpの運営に関わる権限を取得する

+

原則としてこの権限はほとんどのアカウントに付与されません。 +

あなたがBugzilla-jpの運営に関するディスカッションに頻繁に参加し、この権限を持つべき人だと多くのスタッフが判断した場合、あなたの意志を確認した後に付与されます。 +

この権限はアクティブな貢献者のみが持つべきものです。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html new file mode 100644 index 0000000000..4dd639bbe4 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/crashbugs/index.html @@ -0,0 +1,24 @@ +--- +title: CrashBugs +slug: Bugzilla-jp/Guide/Report/CrashBugs +--- +

クラッシュするバグを報告する

+

クラッシュするバグの報告は簡単です。

+

Firefox2/Thunderbird2以前

+

まず、Firefox2/Thunderbird2以前では、Quality Feedback Agent(日本語版だと品質フィードバックエージェント)をインストールした状態でそのバグを再現させてください。

+

インストールしているかどうか分からない場合はアドオンマネージャでTalkbackという拡張がインストールされているか確認してください。インストールしていない場合は、Firefoxを上書きで再インストールします。その際に、カスタムインストールを使用してQuality Feedback Agentをインストールしてください。

+

シャットダウン時等、特殊な状況でのクラッシュバグを除き、大抵、クラッシュ時にQuality Feedback Agentが自動的に起動します。初回起動時のみ、英語で以下のようなツールの説明等が出てきます。

+

Quality Feedback Agentの初回起動時のダイアログのスクリーンショット

+

この最初の画面と次の画面と両方でNextボタンを押し、最後に出てくる、次の画面で「Turn Agent On」にチェックを入れ、Finishボタンを押してください。

+

Quality Feedback Agentの初回起動時のダイアログの最後の画面のスクリーンショット

+

そうすると以下のような実際のリポート画面が出てきますので、そのまま何も入力せずにSendボタンを押してください。

+

Quality Feedback Agentの送信画面

+

次に、Firefoxのインストールしたフォルダにある、talkback.exeを実行してください。そうすると、今までに送信した情報のIncident IDが表示されます。

+

Quality Feedback Agentの送信済みリストのスクリーンショット

+

この中から、Bugzilla-jpに報告したいクラッシュを選択し、コンテキストメニューからIncident IDをコピーして、それを私たちに報告してください。

+

その際に、そのクラッシュさせる手順も書き込んでください。Incident IDのみでのクラッシュの報告は再現確認等が行えないためです。

+

Trunk/Firefox3以降

+

TrunkではQuality Feedback Agentに代わり、Breakpadというツールが利用されるようになりました。

+
+

Breakpadの利用手順は後日紹介予定です。

+
diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html new file mode 100644 index 0000000000..ae0e1c108b --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/enhancement/index.html @@ -0,0 +1,10 @@ +--- +title: Enhancement +slug: Bugzilla-jp/Guide/Report/Enhancement +--- +

要望を報告する

+

バグとはで述べたように、Bugzilla-orgやBugzilla-jpでは製品に対する要望、機能強化もバグとして扱われます。ですが、現在、Bugzilla-jpでは要望を受け付けていません。

+

要望を挙げるのは簡単ですが、実際にそれに賛同し、パッチを作成し、更にそのコードをメンテナンスする人はまず居ないと考えてください。あなたにとって、とても有用で、素晴らしいアイデアがあったとしても、それが万人に必要とされ、受け入れられるものであることは非常に希です。(ユーザインターフェースに関するバグを報告するも参照してください。)

+

どうしても実現したい要望があり、パッチも作るし、メンテナンスもするというのであれば、Bugzilla-jpをディスカッションの場として利用されることを私たちは拒否しません。その場合、「深刻度」を「enhancement」として登録してください。また、本家への登録やそのバグの担当もあなた自身で行ってください。(担当になる権限が無い場合、Bugzilla-jpのスタッフがあなたを担当に割り振ります。)

+

つまり、私たちを頼って要望を出さないようにしてください。

+

メモ: Bugzilla-orgにバグがあり、それを追跡する目的でのBugzilla-jpへの登録はかまいませんが、そのBugzilla-orgに登録されている要望はあなた以外が登録している必要があります。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/index.html new file mode 100644 index 0000000000..80a32fc898 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/index.html @@ -0,0 +1,39 @@ +--- +title: Report +slug: Bugzilla-jp/Guide/Report +--- +

バグを報告する

+

Bugzilla-jpにバグを報告する際にはいくかの決まりがあります。報告する人それぞれがガイドライン無く報告を行うと、開発者にとって必要な情報が不足したり、あなたが報告するバグを探している人が、うまくあなたの報告を見つけられないということが発生します。いわゆる「駄目な報告」はバグを処理する開発者にとっても、実際にそのバグで困っている報告者自身も不幸なものです。

+

ここではバグを報告する際のガイドラインと、開発者が報告してもらいたいと考えている情報をバグの種類ごとに紹介します。

+

バグを報告する際には、bugzilla-jpの画面上にある「新規登録」というリンクが移動します。報告する際にはまず以下のことについて注意してください。

+

テストは最新のTrunkでも行う

+

原則としてテストは最新のTrunkでも行ってください。

+

もし、あなたがリリース版を常用している場合、発見したバグは報告する前に最新のTrunkビルドでも再現するかどうか確認をとってください。

+

セキュリティバグ、もしくは重大なバグ以外の場合、最新のTrunkビルドで再現しない場合は既に修正済みのバグであり、リリース版で修正されることはほとんどありません。

+

バグが再現するビルドを明記する

+

リリース版でのみ再現するバグであれば、リリースバージョン(2.0.0.4等)でかまいませんが、Trunkでのテストの場合、HelpのAboutで表示されるUser Agent名(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a6pre) Gecko/20070622 Minefield/3.0a6pre等)を書いてください。

+

MinefieldのAbout画面

+

既に同じバグが登録されていないか検索する

+

既に同じバグが報告されている場合は報告の必要がありません。まずは検索してみてください。検索に関するヒントも用意していますので、参考にしてください。

+

見つからない場合は是非、報告してみてください。実際には重複となる報告だったとしても、そのバグが知られないままでいる方が問題です。

+

一回の報告で二つ以上のバグを報告しない

+

Bugzilla上ではバグ単位でステータスを管理します。そのため、ひとつの報告に二つ以上のバグを報告されると管理できなくなってしまいます。

+

例えば、同じWebページで二つのバグを見つけて、それを箇条書きにして一つの報告にまとめてはいけません。この場合、二つのバグをそれぞれ、別々に報告しなくてはいけません。

+

スタッフが後からバグを分割するだろうという期待はしないでください。それは非常に迷惑なことです。なぜなら、Bugzillaでは一度投稿されたコメントは修正できないため、あなたの当初の不適切な報告はそのままになってしまいます。それをスタッフが分割したとしても、そのバグを検索した第三者はそのバグが何を取り扱っているのかを知るためには分割作業が終わるところまでコメントを読む必要が出てきます。これでは、バグのデータベースとしては非常に品質の低いデータとなってしまいます。

+

つまり、最初の報告者のコメントの文面だけでバグの詳細を理解できるのが理想的です。

+

バグの再現条件を細かく調査してから報告する

+

バグの再現条件がいい加減なままで報告しないでください。

+

例えば、特定のパソコンでのみ再現する、といった報告は良くありません。私たちがあなたよりもあなたのパソコンの環境に詳しいということはありません。

+

しかし、どうしても再現条件の絞り込みが困難な場合はこの限りではありません。

+

セーフモードでもテストする

+

報告する際は、拡張を無効にした状態でも確認をしてください。あなたが報告しようとしている不具合は、拡張によるものかもしれません。報告の前に拡張をアンインストールするか、セーフモードで実行し、Mozilla製品単体で再現するかを確認してください。なお、Bugzilla-jpでは現在、拡張や(デフォルト以外の)テーマの不具合は受付けておりません。

+
+

以下、バグの種類ごとにおける特殊な注意事項については以下のドキュメントを参照してください。

+
    +
  1. Webの表示に関するバグを報告する
    2. +
  2. ユーザインターフェースに関するバグを報告する
    3. +
  3. クラッシュするバグを報告する
    4. +
  4. セキュリティに関するバグを報告する
    5. +
  5. メモリリークに関するバグを報告する
    6. +
  6. 要望を報告する
    7. +
diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html new file mode 100644 index 0000000000..4559769c30 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/memoryleakbugs/index.html @@ -0,0 +1,10 @@ +--- +title: MemoryLeakBugs +slug: Bugzilla-jp/Guide/Report/MemoryLeakBugs +--- +

+

+

メモリリークに関するバグを報告する

+

Bugzilla-jpにメモリリークバグを報告する場合は、必ず原因となるコードを特定するか、Bugzilla-orgのバグのIDと共に報告してください。Bugzilla-orgではここまで厳しい要求を報告者に求めていませんが、現象のみからBugzilla-jpにバグを報告されても、これをBugzilla-orgの特定のバグを同じバグであると判断することができないため、私たちはこれをあなたに要求するしかありません。 +

もちろん、コード上から直接発見した場合を除き、実際にそのメモリリークがどうやれば発生するのかも報告してください。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html new file mode 100644 index 0000000000..cad3c72272 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/renderingbugs/index.html @@ -0,0 +1,14 @@ +--- +title: RenderingBugs +slug: Bugzilla-jp/Guide/Report/RenderingBugs +--- +

+

+

Webの表示に関するバグを報告する

+

Webコンテンツの表示に関するバグを報告する場合、Web標準仕様に関する最低限の知識は必要になります。他のブラウザとは表示結果が違うということを理由に報告しないでください。その判断は多くの場合、間違っています。他のブラウザとの表示結果の違いはバグを見つける良いきっかけですが、それがGeckoのバグであるかどうかはWeb標準仕様に照らし合わせて検証する必要があります。つまり、Geckoにバグがあるため、表示結果が異なったという確証を私たちは仕様書に求めます。報告する際に仕様書のどこの記述に違反しているのかを明示してください。 +

なお、仕様書は有志によって和訳された仕様書でかまいません。和訳された仕様書が利用できる場合、Bugzilla-jpではよくそれを資料として利用しています。 +

ただし、根拠として挙げようとする仕様書が勧告前のものである場合は注意してください。まず、既に先行実装していること自体にバグがある場合は報告してください。先行実装の失敗は明らかにGeckoのバグであると言えるからです。そのバグは修正されなくてはいけません。 +

ですが、先行実装すべきである、して欲しい、というバグは、あなたが実作業を行う場合を除き、報告しないでください。私たちは実現するかどうか分からない要望がBugzilla-jpにあふれかえる状態を好ましい状態とは考えていないためです。 +

また、非常にシンプルなテストケースを私たちは必要としています。何百行もあるtableレイアウトのWebページを示されて、その一部の表示にバグがあると言われても、その検証には時間がかかります。あなたが報告した後に、簡単なテストケースを添付してくれることで私たちはその時間を自分の仕事に割り当てることができます。(コメント欄にソースコードを貼り付けないでください。それをテストするにはファイルを作成する必要があるため、確認を行うだけで貴重な労力を必要としてしまいます。) +

なお、ひとつひとつのバグについて個別に報告していただけるようにお願いします。例えば、ひとつのWebページで二つのバグが同時に見つかったからといって、それらをまとめて一つの報告にしないでください。なぜなら、それらのバグが同時に修正される訳ではないからです。二つのバグがある場合、バグ報告もテストケースの作成も二件に分けるようにお願いします。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html new file mode 100644 index 0000000000..8918cc217b --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/securitybugs/index.html @@ -0,0 +1,12 @@ +--- +title: SecurityBugs +slug: Bugzilla-jp/Guide/Report/SecurityBugs +--- +

+

+

セキュリティに関するバグを報告する

+

もしあなたが見つけたバグがセキュリティに関わる(つまり、他のユーザがあなたの報告によって攻撃者から被害を受ける可能性がある)場合、あなたはそのバグを非公開のバグとして報告することができます。 +

バグを報告する際に「Bug 報告を送信」ボタンの直前にある「Mozilla/Firefoxのセキュリティ問題を扱うグループ」にチェックを入れてから、送信してください。このフラグが付けられたバグはスタッフと信頼できる貢献者の方々とあなたにしか見えなくなります。 +

もし、報告されたセキュリティバグが既にBugzilla-orgで公開されているものだったり、危険の無いものであった場合、スタッフによって通常の公開されたバグに変更されます。ですから、どちらか判断できない場合、セキュリティバグとして報告してもらった方が問題ありません。 +

あなたが同時にBugzilla-orgにも同一の内容を報告した場合、そのバグIDも報告してください。また、スタッフからそのバグのCCへの追加要請があった場合、対応をお願いします。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html b/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html new file mode 100644 index 0000000000..c469d5929b --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/report/uibugs/index.html @@ -0,0 +1,15 @@ +--- +title: UIBugs +slug: Bugzilla-jp/Guide/Report/UIBugs +--- +

+

+

ユーザインターフェースに関するバグを報告する

+

ユーザインターフェース(以下、UI)に関するバグは、いわゆるバグと、こうあるべきだという要望の二種類に分けて考えた場合、圧倒的に要望が多く寄せられるものです。ですが、UIに関する要望を行うことは原則的にやめてください。特に、既存の動作と賛否両論が分かれるような要望は受け付けられません。 +

何故かと言うと、現在のMozilla関連製品は全て「独裁的な」開発体制によってUIの仕様が決定されています。これは過去に様々な要望を取り込む「民主的な」開発体制で失敗した経験を持っているためです。 +

Bugzilla-orgではUIに関する議論も行われていますが、これはBugzilla-jpという"架け橋"ではできないことです。つまり、UIに関して議論が行いたい場合、Bugzilla-jpという場は良い場ではありません。 +

また、この開発体制が全ての人の要望を満たすことができない、という事実に対する回答として「拡張機能(アドオン)」という仕組みが整備されました。UI仕様に対して要望がある場合、まずは拡張機能での開発を検討してください。それが適さない場合には報告していただいてもかまいませんが、そのバグはあなたがリーダーシップを発揮して、Bugzilla-orgと連携をとる必要があります。つまり、自分で開発できない場合、要望をBugzilla-jpに報告することはできません。 +

要望ではないバグを見つけた場合は、是非その現象を報告してください。報告の際にはその再現手順、実際の挙動、そしてあるべき挙動を事細かく、あなたにとって、「くどい」ぐらいに細かく報告してください。意外とUIの挙動のバグ報告というのは難しいものです。それを実感するには +bug 4102は良い例かもしれません。 +

また、それがバグであるという根拠も論理的に説明してください。例えば、そのOSの他のアプリケーションとは挙動や表示が異なっているというのは良い根拠です(それが意図的な結果であることもありますが)。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html new file mode 100644 index 0000000000..ced7b16734 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/search/advanced/index.html @@ -0,0 +1,21 @@ +--- +title: Advanced +slug: Bugzilla-jp/Guide/Search/Advanced +--- +

詳細な検索

+

Bugzillaというシステムに慣れてくると、簡単な検索に不便を感じるかもしれません。そのために、Bugzillaにはより詳細に検索することができる、「高度な検索」が用意されています。簡易検索の画面の右上にある、「高度な検索」というリンクで移動するとその画面が表示されます。

+

「高度な検索」を開くと、非常に多くの項目が表示されるでしょう。この検索画面を使うにはBugzillaと、Bugzilla-jpの基本的なことが分かっていなければいけません。そのため、基本的な各項目の説明は省略し、いくつかの注意点のみを紹介することにします。

+

キーワード

+

キーワードを用いた検索は通常の文字列検索とは異なります。キーワードは予めスタッフによって定義されたもののみで、この定義に無い文字列で検索することはできません。

+

例えば、"html"というキーワードの付いたバグを検索するために"ht"と入力してもエラーが表示されるだけで、検索することはできません。

+

リストで選択できる項目

+

プロダクト、コンポーネント、バージョン、ターゲットマイルストーン、ステータス、処理方法、深刻度、優先順位、ハードウェア、OS、そして「Bug の変更」にあるリストボックスは全て、複数項目を同時に選択することができます。

+

ひとつのリストボックス内で複数選択した場合、それらのうちのいずれかを含むバグが検索対象となります。

+

Bugの変更の期間入力方法

+

特定の期間になんらかの変更のあったバグを検索するのに便利な機能です。

+

YYYY-MM-DD形式以外にも、相対日数が入力可能となっていますが、 その説明が通常の画面にはなく、分かりにくいのでここに説明文を引用しておきます。

+
+ 開始・終了日時を、YYYY-MM-DD 形式 (オプションで HH:mm 形式の24時間制の時刻をつけられます) もしくは、1h, 2d, 3w, 4m, 5y といった相対時間で指定してください。 それぞれ、時間、日、週、月、年を示します。0d は直前の真夜中、 0h, 0w, 0m, 0y もそれぞれの開始時を示します。
+
+

もし、この説明を読んでも入力項目において何か分からないことがあるなら、要約の入力欄の左上にある、「ヘルプをつける」というリンクでフォームを再読込すると良いかもしれません。このモードになると、マウスが各項目の上に移動した際に、その項目の簡単な説明がポップアップ表示されます。

+

また、最後にあるブーリアンチャートを使った高度な検索は非常に特殊で、通常の利用者はまずこれを利用する必要はありません。ですので、これに関する説明はこのドキュメントでは行いません。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html new file mode 100644 index 0000000000..9532ffdd55 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/search/hints/index.html @@ -0,0 +1,39 @@ +--- +title: Hints +slug: Bugzilla-jp/Guide/Search/Hints +--- +

+

+

検索のコツ

+

検索をスムーズに行うには、Bugzilla-jp内で用いられる様々なルールを知っておく必要があります。最初は検索が期待通りにできないかもしれませんが、バグの件数がそれほど多い訳ではないので、以下に挙げる例を利用すればそれなりに検索可能なのではないかと思います。 +

+

未解決のバグを探しても見つからない場合は修正済みのものを探す

+

最新の製品版を使っていて遭遇する場合なのに、未修正のバグを検索しても出てこない、そういう場合は既に開発版では修正が終わっている、つまりバグは閉じられている可能性があります。こういう場合には修正済みのバグを探すしかありません(簡易検索なら「CLOSED」)。 +

Bugzilla-jpでは製品版が最新版であるということは絶対にあり得ません。製品版がリリースされる時には開発版は既にその先を行っているからです。詳しくは開発サイクルに関するドキュメントも読んでおくと良いでしょう。 +

+

製品のバグを探す場合、「Core」も調べる

+

Firefoxのバグを調べようとした時に、プロダクトを「Firefox」のみにすると、表示に関わる問題や、IMEに絡んだ問題等が全く出てこないことも少なくありません。 +

なぜなら、Bugzilla-jpでは複数の製品、例えばFirefoxでもThunderbird +でも発生するバグは「Core」プロダクトで管理しているためです。 +

簡易検索の場合はプロダクトを「All」にし、詳細検索の場合は「Core」も選択するようにしましょう。 +

+

用語の語尾を伸ばさない

+

技術用語では語尾が長音の場合、表記では長音符号「ー」を削除してしまう慣例があります。例えば、"Server"は、「サーバー」ではなく、「サーバ」として表記されます。 +

語尾の長音符号を削除して検索すると、語尾に長音符号がついていてもヒットするようになるで、検索の際には削除しましょう。 +

+

全角の英数字、半角のカタカナは使用しない

+

Bugzilla-jpでは基本的にこれらの文字は使用されていません。これらの文字で検索を行っても期待通りの結果は得られないでしょう。 +

+

詳細検索では一部の項目は信用しない

+

Bugzilla-jpでは、バグの症状に対して一定の基準を持って設定を行っていますが、明確な場合を除き、どうしてもスタッフの主観が入ってくることがあります。 +

例えば、「深刻度」と「優先順位」は検索のキーワードとしては信用できるものではありません。また、設定が不適切だったり、忘れられたりすることの多い、「バージョン」と「ターゲットマイルストーン」も信頼できません。 +

これらの項目での絞り込みはやめておく方が良いでしょう。 +

+

詳細検索を使って、キーワードとステータスのみで検索する

+

Bugzilla-jpでは特定のジャンルのバグや、表記揺れが激しいものについてはキーワードを予め用意しています。 +

詳細検索でキーワードと、ステータス、もしくは処理方法の指定のみで検索を行うとそのキーワードのついたバグが全て列挙されます。Bugzilla-jpにあるバグの数はそれほど多くないので、そのリストから目的のバグを見つけることができるかもしれません。 +

+

メタバグを利用する

+

メタバグとは複数のバグに対するリンクを持った(具体的には複数のバグに依存している)バグです。これは特定のジャンルのバグを管理する際に作成され、キーワードに必ずmetaが指定されています。メタバグの一覧は、Bugzilla-jpのトップページにある「メタバグ一覧」を参照してください。 +

あなたの手助けとなるメタバグを発見した場合、そのバグで「依存ツリーを表示」というリンクで移動すると、そのメタバグに関連したバグが一覧で表示されるようになっています。メタバグのコメントにあるバグへのURIは情報が古いかもしれないので無視した方が良いでしょう。 +

diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/index.html new file mode 100644 index 0000000000..17c93374b8 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/search/index.html @@ -0,0 +1,8 @@ +--- +title: Search +slug: Bugzilla-jp/Guide/Search +--- +

バグの情報を探す

+

Bugzilla-jpに既に登録されているバグを検索し、参照することができます。バグを検索するには、Bugzilla-jp内のページのフッタ部分にある、「検索」というリンクから検索用の画面に移動します。

+

検索には簡単にバグを検索する「特定の Bug を検索」というモードと、 ステータス等から高度に絞り込みを行う「高度な検索」の二種類があります。最初は「特定の Bug を検索」で十分かもしれませんが、Bugzillaのシステムに慣れてくると「高度な検索」の方が使いやすいかもしれません。

+

バグを検索することによってどのような情報が得られるのか、また、実際に検索結果を参照する際にバグの状態について意味が分からない場合は、バグの詳細情報やプロダクトとコンポーネントやバグのライフサイクルを参照してください。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html b/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html new file mode 100644 index 0000000000..832b6e7f36 --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/search/simple/index.html @@ -0,0 +1,23 @@ +--- +title: Simple +slug: Bugzilla-jp/Guide/Search/Simple +--- +

簡単な検索

+

Bugzilla-jp でバグを検索しようとすると、まずは「特定の Bug を検索」という画面が表示されます。これは以下のスクリーンショットから分かるように、とてもシンプルなものです。

+

簡易検索画面のスクリーンショット

+

ステータス

+

ステータスのドロップダウンリストには Open、Close、All の三種類が用意されています。

+

Open の場合、 UNCONFIRMED、NEW、ASSIGNED、 REOPENED のバグが検索対象となります。これらのバグはまだ解決されていなかったり、結論が出ていない、"生きている"バグです。

+

Closedの場合、Open以外の既に閉じられたバグが検索対象となります。具体的には RESOLVED と、VERIFIED、そしてごく初期にのみ使われていた CLOSED のバグです。

+

All の場合、全てのバグが検索対象となります。

+

プロダクト

+

プロダクトはどの製品のバグを対象とするのかを選択します。基本的には初期値の All で全てのプロダクトを対象としたままで検索した方が良いでしょう。例えば Firefox についてのバグを調べたい場合、そのバグの種類によって、Firefox 以外に Core となっている可能性があります。

+

何故このような一見すると不便な仕様になっているのかというと、Mozilla 製品は全ての製品で共通しているコードが非常に多く、これらのバグを製品ごとに管理していたのでは同じバグを複数のプロダクトで管理しなくてはいけなくなるためです。

+

しかし、All の場合、検索結果に TestProduct が含まれてしまいます。これは練習投稿や、Bugzilla-jp 自体のテストに利用されているものですので無視してください。この中に有益な情報は存在しません。

+

複数のプロダクトに対して同時に検索を行う必要がある場合には、詳細な検索を利用するしかありませんが、残念ながら手軽に使えるというものではありません。

+

All では効率悪いし、詳細な検索は使い方が分からない、という場合には、 目的のプロダクトと Core で二回に分けて検索を行うしかありません。

+

検索語

+

検索したい単語を半角スペースで区切り、入力します。 検索対象はバグの要約と、バグに付けられているコメント全文です。複数の単語を入力している場合は、いずれかの単語を含むバグが出てきます。

+

半角英字の大文字小文字は区別されませんが、ひらがな、カタカナといった日本語固有の曖昧さは全て別の文字として検索されます。

+
+

これだけの情報ではきっと、どういった言葉を検索して良いのか分からないかもしれません。あわせて、検索のコツについても目を通しておくと良いかもしれません。

diff --git a/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html b/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html new file mode 100644 index 0000000000..b3c17bb4eb --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/guide/tracking/index.html @@ -0,0 +1,14 @@ +--- +title: Tracking +slug: Bugzilla-jp/Guide/Tracking +--- +

バグを追跡する

+

Bugzillaではバグ毎に、メールによって変更通知を逐一受け取ることができます。

+

バグのCCリストに自分のアカウントを追加する

+

まず、Bugzilla-jpにログインして、追跡したいバグを表示します。バグのコメント追加欄のすぐ下に「XXXX<YYY@ZZZ> を CC に追加する」というチェックボックスがあるので、これにチェックを入っていることを確認し、追加コメントは何も書かずにそのまま「Commit」ボタンを押します。そうすると、あなたのアカウントがそのバグのCCに加えられ、以降、そのバグに何か変更があった場合にあなたのメールアドレスにメールが配信されます。

+

バグの追跡を中止する

+

バグの追跡を中止したい場合、ログイン後、そのバグを表示します。そして、「CC:」のリストの中からあなたのアカウントを選択し、そのリストのすぐ下にある「選択された CC を削除」というチェックボックスにチェックを入れ、追加コメントは何も書かずにそのまま「Commit」ボタンを押してください。

+

受け取りたくないメールが配信されてくる

+

バグを追跡していると、デフォルト設定のままでは、あなたにとっては些細な変更の度にメールが配信されてくるかもしれません。その場合、Bugzilla-jpのフッタにある「環境」の「メール設定」からメールの配信条件を編集することができます。詳細は メールの送信設定を変更するを参考にしてください。

+

コンポーネントの全てのバグを追跡する

+

Bugzilla-jpではQAコンタクトにメタアカウントと呼ばれる特殊なアカウントを割り当てています。メタアカウントは最後が".bugs"で終わる、本来あり得ないメールアドレスになっています。つまり、メタアカウントは特定の個人のためのアカウントではありません。これをあなたのアカウントで監視することで、特定のコンポーネントのバグを全て追跡することが可能です。

diff --git a/files/ja/orphaned/bugzilla-jp/index.html b/files/ja/orphaned/bugzilla-jp/index.html new file mode 100644 index 0000000000..58f2ab557d --- /dev/null +++ b/files/ja/orphaned/bugzilla-jp/index.html @@ -0,0 +1,16 @@ +--- +title: Bugzilla-jp +slug: Bugzilla-jp +tags: + - Bugzilla-jp + - Developing Mozilla + - 開発文書 +--- +

+

+

Bugzilla-jp

+

Bugzilla-jp関連コンテンツ +

+
  1. はじめてのバグジラ +
  2. Bugzilla-ja +
diff --git a/files/ja/orphaned/building_a_mozilla_distribution/index.html b/files/ja/orphaned/building_a_mozilla_distribution/index.html new file mode 100644 index 0000000000..ec60cdfc12 --- /dev/null +++ b/files/ja/orphaned/building_a_mozilla_distribution/index.html @@ -0,0 +1,123 @@ +--- +title: Building a Mozilla Distribution +slug: Building_a_Mozilla_Distribution +tags: + - Build documentation + - Developing Mozilla +--- +

+

ここでは、どうやって独自のマイルストーンビルドまたは他のディストリビューションを作るのかを説明します。独自のディストリビューシュンを作成したいというのは以下のような場合が考えられます。我々の ftp サイトに通常は置かれていないプラットフォーム用のビルドを作りたいとか、標準のビルドではサポートされていない機能を有効にしたい、などです。 +

+
    +
  1. +専用のマイルストーンソースの tar ボールをダウンロードし、自分用の通常のツリーからではなく、その tar ボールからビルドしてください。もし tar ボールがみつからない場合には、マイルストーンディレクトリの README ファイルに CVS でどうやって適切なソースを持ってくることができるかが書いてあります。必ず正しい タグ を持ってくるようにしてください。例えば次のようにします。 
    cvs co -r MOZILLA_1_0_2_RELEASE mozilla/client.mk
+cd mozilla
+gmake -f client.mk checkout
+
    +
    2. +
  2. +ビルドオプションを次のように設定します：デバッグシンボルを無効にする、コードを最適化する、ビルドの日付 (Bugzilla で使っているもの) を設定する、その他については適宜選択してください。 +
    3. +
  3. +作成したビルドの動作確認テストをしてください。この際、アプリケーションの右端の下あたりにある BuildID を必ずメモしてください。 BuildID は 2001102513 のようなもので、パッケージをビルドした日時を表しています。 +
    4. +
  4. +README ファイルを作り、以下のような項目についてできる限り記述してください。
    • 連絡先。これには自分の Bugzilla ID を入れてください。こうしておけば、あるパッケージに特有の問題を発見した人がそのバグについてパケージ作成者に連絡できるようになります。 +
    • BuildID +
    • ライブラリの依存関係。 +
    • ビルド作成時に使用にしたオプション一覧。 +
    • ビルド時に有効 (あるいは無効) にした非標準のも のなんでも。例えば、適用したパッチやそのパッチへのリンクなどです。 +
    +
    5. +
  5. +tar ボールをどこかに公開し、こちらに連絡をください。そうすれば私達が tar ボールを ftp サイトに移します。 さらに、tar ボール用の md5 checksum ファイルを作っておくとよ いでしょう。作成した md5sum ファイルに電子署名をしておくと さらによいでしょう。 
    md5sum mozilla-i686-pc-linux-gnu-0.9.5.tar.gz
+       > mozilla-i686-pc-linux-gnu-0.9.5.tar.gz.md5sum
+
    +
    6. +
+

ディストリビューションを作成する

+

ビルド方法 と Unix Build Configurator の使い方に慣れておくと、mozconfig ファイルの作成に役立ちます。 +

+

ソースをダウンロードしてください

+

最新のマイルストーンソースの tar ボールを ダウンロード してください。または、最新のマイルストーンの README ファイルに書いてある方法に従って、CVS から tag でもってきてください。(独自のツリーでコードからディストリビューションを作成した場合には、おそらく、最初に gmake -f client.mk distclean をする必要があります。) +

+

ビルド環境を設定してください

+

tar ボールから作成されたツリーにファイルを作り mozilla/.mozconfig としてください。以下にあげるようなオプションを付けるとディストリビューションのサイズを小さくすることができます。<tt>--disable-debug</tt> オプションはとても重要です。これを指定しないとパッケージが 50MB あるいはそれ以上になってしまいます。パッケージのサイズは通常 10MB くらいです。<tt>--enable-optimize</tt> オプションを付けるとコンパイラは最適化されたバイナリを作成します。オフィシャルビルドでは有効になっていない SVG などの他のオプションは適宜選択してください。 +

ビルドしているバイナリがさまざまなシステムに配布される予定であったり、実行時にリンクする共通ライブラリと全く同一のライブラリ一式がビルドしているバイナリに含まれていない場合には、Mozilla の zlib や jpeg のライブラリをビルドして配布するようにするといいでしょう。 +

+
ac_add_options --disable-tests
+ac_add_options --disable-debug
+ac_add_options --enable-optimize
+ac_add_options --without-system-nspr
+ac_add_options --without-system-zlib
+ac_add_options --without-system-jpeg
+ac_add_options --without-system-png
+ac_add_options --without-system-mng
+ac_add_options --enable-crypto #PSM/SSL のサポートを無効にするにはこの行をコメントアウトする
+
+

以下の環境変数を設定してください。ビルドの日付が正確になります。 +

Unix または Mac OS X の場合: +

+
MOZILLA_OFFICIAL=1
+export MOZILLA_OFFICIAL
+BUILD_OFFICIAL=1
+export BUILD_OFFICIAL
+
+

Win32 の場合: +

+
set MOZILLA_OFFICIAL=1
+set BUILD_OFFICIAL=1
+
+

ツリーをビルドしてください

+

普段使う build コマンドは、マイルストーンビルドをコンパイルするのに決して使わないでください。CVS アップデートをしたいわけではないのです。ツリーと同期をとってしまうと最新版からビルドしていることになり、マイルストーンビルドではなくなってしまいます。 +

+
gmake -f client.mk build
+
+

README ファイルを添えてください

+

README ファイルを mozilla/dist/bin にコピーしてください。こうすれば、次のステップで作成される tar ボールに README ファイルが含まれるようになります。ldd のある UNIX の場合には、以下のコマンドを実行し UNIX ビルド用の依存関係一覧を作成してください。 +

+
ldd mozilla-bin components/*.so | awk '{ if (/=/ && !/not found/ ) print $3 }' | sort | uniq
+
+

If using tcsh, you may need to escape the ! . +

+

パッケージを作成してください

+
tar ボール( または zip や dmg) を作るには
+

packager ディレクトリにある makefile でパッケージのディレクトリに tar ボールを作成します。パッケージは mozilla/dist に配置されます。 +

OS/2 と Win32 用のビルドの場合、デフォルトのパッケージタイプは zip です。Mac OS X 用の場合、デフォルトのパッケージタイプは dmg です。その他のビルドの場合には、デフォルトのタイプは tar.gz です。 +

+
gmake -C mozilla/xpinstall/packager
+
+
UNIX のインストーラを作るには
+

UNIX インストーラをビルドするには、カレントディレクトリを xpinstall builder に変更し perl スクリプトを実行してください。すると mozilla/installer に mozilla-$platform$-installer.exe が作成されます。 +

+
cd mozilla/xpinstall/packager/unix/
+perl deliver.pl <version> <urlpath> <stubname> <blobname>
+</blobname></stubname></urlpath></version>
+
+
Win32 のインストーラを作るには
+

以下のものが必要になります: +

+ +

Win32 インストーラをビルドするには、カレントディレクトリを xpinstall builder に変更し perl のスクリプトを実行してください。すると mozilla\dist\install に mozilla-win32-installer.exe が作成されます。 +

+
cd mozilla\xpinstall\wizard\windows\builder
+perl build.pl
+
+

テスト

+

パッケージの動作確認テストをしてください。スモークテスト はこのテストのために設計されています。 +

+

配布

+

tar ボールをどこかに公開し、こちらに連絡をください。そうすれば私達が tar ボールを ftp サイトに移します。連絡してほしい項目は、BuildID およびビルド環境について有益だと思われることなんでもです。例えば、OS のバージョン、ディストリビューションの名前、含まれているオプションコンポーネント、または、非標準のコンパイラを使ったかどうか、などです。

各パッケージには必ず README ファイルを添 えてください。 +

+
+

原文書の情報

+
  • 著者: Dawn Endico +
  • 最終更新日: January 20, 2007 +
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 +
+
+
+
+{{ languages( { "en": "en/Building_a_Mozilla_Distribution" } ) }} diff --git a/files/ja/orphaned/code_snippets/toolbar/index.html b/files/ja/orphaned/code_snippets/toolbar/index.html new file mode 100644 index 0000000000..7a5020da7a --- /dev/null +++ b/files/ja/orphaned/code_snippets/toolbar/index.html @@ -0,0 +1,55 @@ +--- +title: Toolbar +slug: Code_snippets/Toolbar +tags: + - Add-ons + - Extensions +--- +

 

+

 

+

{{ 英語版章題("Adding a toolbar button") }}

+

ツールバーボタンを追加する

+

二つのチュートリアルが参照可能です。

+ +

{{ 英語版章題("Adding button by default") }}

+

Adding button by default

+

スタマイズされたツールバーパレット用のツールバーボタンを入れて、あなたの拡張を開発・配布したとしても、デフォルトではボタンは有効になりません。ユーザはボタンをツールバーへドラッグする必要があります。下のコードを利用することで、あなたのボタンが最初のインストールおよび XPI の再起動後にデフォルトで表示されるようにできます。

+
+

ボタンをデフォルトで追加するのは、正しく行うのが非常に難しいという点で、ほぼ間違いなく悪習慣です。ユーザはあなたがボタンを追加したツールバーを非表示にしているかもしれませんし、追加したコードが正常に動作しないようにツールバーをカスタマイズしているかもしれません。

+

Firefox がこの目的に API を提供することに対しては、バグが立てられています。need the bug #

+
+

{{ 英語版章題("Notes") }}

+

メモ

+
    +
  1. このサンプルは、Firefox 独自のものですが、Thunderbird でも正しいノードをターゲットに変更することで動作します。
    2. +
  2. デフォルトでボタンを追加するのは、正しい値とともに追加可能で、あなたの拡張のよく利用される機能に対してである場合だけにしてください。ユーザに限られた UI スペースしかないかもしれないことを考慮し、本当に必要かどうか検討してください。
    3. +
  3. このコードは browser.xul のオーバーレイに含められる必要があります。
    4. +
+

{{ 英語版章題("Example") }}

+

サンプル

+
 try {
+   var firefoxnav = document.getElementById("nav-bar");
+   var curSet = firefoxnav.currentSet;
+   if (curSet.indexOf("my-extension-button") == -1)
+   {
+     var set;
+     // Place the button before the urlbar
+     if (curSet.indexOf("urlbar-container") != -1)
+       set = curSet.replace(/urlbar-container/, "my-extension-button,urlbar-container");
+     else  // at the end
+       set = firefoxnav.currentSet + ",my-extension-button";
+     firefoxnav.setAttribute("currentset", set);
+     firefoxnav.currentSet = set;
+     document.persist("nav-bar", "currentset");
+     // If you don't do the following call, funny things happen
+     try {
+       BrowserToolboxCustomizeDone(true);
+     }
+     catch (e) { }
+   }
+ }
+ catch(e) { }
+
diff --git a/files/ja/orphaned/components/index.html b/files/ja/orphaned/components/index.html new file mode 100644 index 0000000000..a40066683c --- /dev/null +++ b/files/ja/orphaned/components/index.html @@ -0,0 +1,16 @@ +--- +title: Components +slug: Components +tags: + - Disambiguation +--- + + +

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

+ +
 
+ +

{{ languages( { "en": "en/Components", "fr": "fr/Components", "ko": "ko/Components" } ) }}

diff --git a/files/ja/orphaned/creating_toolbar_buttons/index.html b/files/ja/orphaned/creating_toolbar_buttons/index.html new file mode 100644 index 0000000000..01d73d198e --- /dev/null +++ b/files/ja/orphaned/creating_toolbar_buttons/index.html @@ -0,0 +1,169 @@ +--- +title: Creating toolbar buttons +slug: Creating_toolbar_buttons +tags: + - Add-ons + - Extensions +--- +

 

+

この記事ではツールキットアプリケーション（Firefox、Thunderbird、Nvu など）に オーバレイ を使用してツールバーボタンを追加する方法を説明します。XUL と CSS の基礎知識を備えた 拡張機能 の開発者が対象です。

+

また、Firefox の拡張機能の作り方の基礎に通じており、Hello World 拡張機能 を動作させられることも前提です。別のチュートリアルも 利用可能 です。そちらは全体の過程を最初から見ていく形式です。

+

オーバレイの作成

+

はじめに、機能を強化させたいツールバーを含む文書への オーバレイ を作成する必要があります。オーバレイの説明はこのチュートリアルでは扱いません。XUL チュートリアル をご覧ください。

+

文書をオーバレイするには、その文書の URI を知らなければなりません。よくオーバレイされる文書の URI は このページの最後 にあります。

+
+ 注意： + + chrome://messenger/content/mailWindowOverlay.xul + にオーバレイする人がいます。これによって mailWindowOverlay.xul が適用されるすべてのウィンドウ（たとえばメインウィンドウやメッセージ表示ウィンドウ）にボタンが現れます。確認してください。
+

ツールバーボタンの追加

+

ツールキットアプリケーションのツールバーはカスタマイズ可能です。そのため、拡張機能の練習として、直接ツールバーにボタンを追加するのではなく、ツールバーボタンをツールバーパレットに追加するというものがよくあります。直接追加することも可能ですが、非推奨であり、実装も面倒です。

+

ツールバーパレットにボタンを追加するのはとても簡単です。このようにこのコードをオーバレイに追加するだけです：

+
<toolbarpalette id="BrowserToolbarPalette">
+  <toolbarbutton id="myextension-button" class="toolbarbutton-1"
+    label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;"
+    oncommand="MyExtension.onToolbarButtonCommand(event);"/>
+</toolbarpalette>
+
+

注意：

+ +
onclick: function(event) {
+  switch(event.button) {
+    case 0:
+      // Left click
+      break;
+    case 1:
+      // Middle click
+      break;
+    case 2:
+      // Right click
+      break;
+  }
+}
+
+

さらにボタンを追加するには、<toolbarbutton> 要素を <toolbarpalette> 要素の内側にさらに追加してください。<toolbarbutton> 以外の要素は <toolbaritem> 内に内包するようにしてください。

+

ボタンの装飾

+

ツールバーボタンのほとんどはアイコンが付いています。ボタンに画像を付けるには Mozilla のスキン機能を使用します。これについてよく知らないのであれば、Jonah Bishop によるすばらしいツールバーチュートリアルのスキンの使用に関するセクション を読んでおくことをお勧めします。その記事ではボタンを作るだけというよりもむしろツールバー全体を作ることを扱っていますが、私たちがここで使うテクニックの説明としてはすばらしいものです。

+

アイコンのサイズ

+

ツールバーボタンは大小 2 種類のサイズを持ちえます。つまり、ツールバーボタンにそれぞれ 2 つのアイコンを持たせる必要があるということです。さまざまなアプリケーションでの大小両方のアイコンの寸法は以下の表のとおりです（他のアプリケーションについての情報もご自由に追加してください【訳註：英語版に追加すべき】）：

+ + + + + + + + + + + + + + + + + + +
アプリケーション（テーマ名）大きいアイコンのサイズ小さいアイコンのサイズ
Firefox 1.0 (Winstripe)24x2416x16
Thunderbird 1.0 (Qute)24x2416x16
+

スタイルシート

+

ツールバーボタンに画像を指定するために、以下の CSS ルールを使用してください：

+
/*  skin/toolbar-button.css  */
+
+#myextension-button {
+  list-style-image: url("chrome://myextension/skin/btn_large.png");
+}
+
+toolbar[iconsize="small"] #myextension-button {
+  list-style-image: url("chrome://myextension/skin/btn_small.png");
+}
+
+

スタイルシートの適用

+

作成したスタイルシートをオーバレイファイルと Customize Toolbar ウィンドウの両方に適用するのを忘れないでください。オーバレイファイルに適用するには、この処理命令 (PI) をオーバレイファイルの頭に付けてください：

+
<?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?>
+
+

Customize Toolbar ウィンドウ (<tt>chrome://global/content/customizeToolbar.xul</tt>) に適用するには、以下のような <tt>skin/contents.rdf</tt> を使用することのがよいでしょう：

+
<?xml version="1.0"?>
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
+
+  <Seq about="urn:mozilla:skin:root">
+    <li resource="urn:mozilla:skin:classic/1.0"/>
+  </Seq>
+
+  <Description about="urn:mozilla:skin:classic/1.0">
+    <chrome:packages>
+      <Seq about="urn:mozilla:skin:classic/1.0:packages">
+        <li resource="urn:mozilla:skin:classic/1.0:myextension"/>
+      </Seq>
+    </chrome:packages>
+  </Description>
+
+  <Seq about="urn:mozilla:stylesheets">
+    <li resource="chrome://global/content/customizeToolbar.xul"/>
+  </Seq>
+
+  <Seq about="chrome://global/content/customizeToolbar.xul">
+    <li>chrome://myextension/skin/toolbar-button.css</li>
+  </Seq>
+</RDF>
+
+

Firefox/Thunderbird 1.5 向けの拡張機能では代わりに以下のような chrome.manifest を使用すべきです：

+
skin	myextension	classic/1.0	chrome/skin/
+style	chrome://global/content/customizeToolbar.xul	chrome://myextension/skin/toolbar-button.css
+
+

よくある間違い

+

これは拡張機能作者がよく起こす間違いとその症状、そしてその解決策のリストです。

+

問題点： ツールバー上や Customize Toolbars ウィンドウ内に自分のアイコンではなく、デフォルトのボタン全体が表示される。

+

原因： スタイルシートが正しく記述されていないか、またはスタイルシートが適用されていない。

+

解決法： スタイルシートに誤りがないか、<tt>contents.rdf</tt>（または <tt>chrome.manifest</tt>）に誤りがないかを確認し、確実に <tt>customizeToolbar.xul</tt> に スタイルシートを適用する。

+

よくオーバレイされるツールバーを持つウィンドウのリスト

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
URLアプリケーションと影響のあるウィンドウパレット id
chrome://browser/content/browser.xulFirefox - メインウィンドウBrowserToolbarPalette
chrome://messenger/content/messenger.xulThunderbird - メインウィンドウMailToolbarPalette
chrome://messenger/content/messenger...gercompose.xulThunderbird - 編集ウィンドウMsgComposeToolbarPalette
chrome://messenger/content/addressbo...ddressbook.xulThunderbird - アドレス帳AddressBookToolbarPalette
chrome://editor/content/editor.xulNvu - メインウィンドウNvuToolbarPalette
chrome://calendar/content/calendar.xulSunbird - メインウィンドウcalendarToolbarPalette
+

詳細情報

+ diff --git a/files/ja/orphaned/debnews/index.html b/files/ja/orphaned/debnews/index.html new file mode 100644 index 0000000000..6af90cc9c0 --- /dev/null +++ b/files/ja/orphaned/debnews/index.html @@ -0,0 +1,9 @@ +--- +title: DebNews +slug: DebNews +--- +

 

+ +

This page was auto-generated because a user created a sub-page to this page.

+ +

 

diff --git a/files/ja/orphaned/developing_add-ons/index.html b/files/ja/orphaned/developing_add-ons/index.html new file mode 100644 index 0000000000..3fd1d5d376 --- /dev/null +++ b/files/ja/orphaned/developing_add-ons/index.html @@ -0,0 +1,8 @@ +--- +title: アドオンを開発する +slug: Developing_add-ons +--- +

Mozilla ベースのソフトウェアはたいていアドオンを通して拡張可能です。アドオンには、拡張機能、プラグイン、テーマの 3 つの主なタイプがあります。このページはFirefox、Thunderbird、あるいは、Mozilla プラットフォームをベースにしたその他のソフトウェア向けのアドオンを作成するために必要となる情報、および、作成したアドオンを配布する方法のガイドを提供します。

+ +

アドオンに関するトピックス
アドオンを AMO に提出する
アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。
拡張機能
拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。
プラグイン
Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。
Jetpack
あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。
テーマ
テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。
検索エンジンプラグイン
Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。
addons.mozilla.org (AMO) API Developers' Guide
AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。
Mozilla プラットフォーム
API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。
+

{{ languages( { "en": "en/Developing_add-ons", "zh-cn": "cn/Developing_add-ons"} ) }}

diff --git a/files/ja/orphaned/developing_mozilla/index.html b/files/ja/orphaned/developing_mozilla/index.html new file mode 100644 index 0000000000..e8cd7049ba --- /dev/null +++ b/files/ja/orphaned/developing_mozilla/index.html @@ -0,0 +1,67 @@ +--- +title: Developing Mozilla +slug: Developing_Mozilla +tags: + - Developing Mozilla +--- +

+

バグの修正を手伝いたいけれど、どこから始めたらいいのか分からない? これは獣をハックするためのすべてのスタート地点です。ここでは、ソースの取得方法とそのビルド方法、パッチの作成や、それらを tree にチェックインする方法、その他の Mozilla ハッカーが知らなければならない基本的なことを見つけられるでしょう。 +

+ + +
+

ドキュメンテーション

+
mozilla.org のハッキングガイド +
ハッキングに関連する他のページ。 これは作成途中です。 +
+
コードの断片 で Firefox をハッキング +
フロントエンド開発にどのように関わるか。 +
+
Firefox や Thunderbird、その他のアプリケーションのビルド +
このセクションには、Firefox や Thunderbird、その他の Mozilla ベースのアプリケーションをビルド方法についてのドキュメントが含まれています。 +
+
Mozilla の開発戦略 +
Mozilla プロジェクトで効率良く作業するためのヒント。 +
+
開発製品のテスト +
製品をテストするための情報 と テスト自動化ツール。 +
+
デバッグについての FAQ +
デバッグのヒントはプラットフォームごとに異なります。Windows または Linux, Mac OS X のいずれかを選んでください。 +
+
パッチの作成とレビューおよびコミットのために +
パッチの作成と tree に変更を加えるためのヒント。 +
+
Mozilla のソースコードをオンラインで表示、検索する +
Mozilla クロスリファレンス (MXR) システムを利用して、すべての Mozilla 製品のソースコードを表示、検索します。 +
+
Getting commit access to Mozilla source code +
Find out how you can get access to commit changes directly into the source code. +
+

すべて見る... +

+		 +

コミュニティ

+ +

ツール

+ +

すべて見る... +

+

関連項目

+
品質保証 +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "de": "de/Mozilla_entwickeln", "en": "en/Developing_Mozilla", "es": "es/Desarrollando_Mozilla", "fr": "fr/D\u00e9veloppement_de_Mozilla", "pl": "pl/Programowanie_Mozilli", "pt": "pt/Desenvolvimento_Mozilla", "zh-cn": "cn/\u5f00\u53d1Mozilla" } ) }} diff --git a/files/ja/orphaned/devnews/20060705/index.html b/files/ja/orphaned/devnews/20060705/index.html new file mode 100644 index 0000000000..f8e572fb51 --- /dev/null +++ b/files/ja/orphaned/devnews/20060705/index.html @@ -0,0 +1,14 @@ +--- +title: "Firefox 2.0 ベータ 1 は今夜 11:59 (PDT) にコードフリーズします\_!" +slug: DevNews/20060705 +tags: + - DevNews + - 'DevNews:General' +--- +

やあ、みんな。

+ +

来週のリリースに向けて今夜{{ 訳注("現地時間, 2006 年 7 月 5 日") }}は Firefox 2.0 ベータ 1 のコードフリーズ、という念のためのお知らせです。私達はここで ベータ 1 の深刻なバグのリストを追跡しています。

+ +

私達のパッチの作成とレビューやバグの確認で皆さんの助けを必要としています。もしあなたがブロッカーバグ{{ 訳注("リリースを妨害するほど深刻なバグ") }}リストにやることがある - もしくはコメントやレビューを尋ねられていたら、出来るかぎり早く私達を助けてください。

+ +

また、私達は優先的なバグのクエリを 1.8 の Tinderbox ページに追加しました。もしあなたがブロッカーバグのリストでできることがありましたら、手伝ってください。

diff --git a/files/ja/orphaned/devnews/20060706/index.html b/files/ja/orphaned/devnews/20060706/index.html new file mode 100644 index 0000000000..94d577d629 --- /dev/null +++ b/files/ja/orphaned/devnews/20060706/index.html @@ -0,0 +1,47 @@ +--- +title: Firefox 2 ベータ 1 の現状 +slug: DevNews/20060706 +tags: + - DevNews + - 'DevNews:General' +--- +

やあ、みんな。

+ +

これを書いている間に JavaScript 1.7 がランドしました。残っている問題はブランドの変更 (BonEcho から Firefox 2) と設定画面のクリーンアップだけです。うまくいけばこれらは今夜ランドされます - 明日早くまでにはランドされます。

+ +

最後のチェックインが完了したときの私たちのタイムラインは以下の通りです:

+ + + +

リリース候補ができても、入手可能だと公表する前の全ての準備のために最大24時間(ミラーを同期させる時間、他)かかります。

+ +

ベータ 1 が小さくなるために私たちの受付窓口が変化します、私たちは本当にベータを妨げるパッチだけを受け入れるだけでしょう。つまり以下のものです。

+ + + +

このカテゴリに適当と考えるものが何かありましたら Bugzilla の Flag をブロッキング(blocking‑firefox2?) か 1.8.1 (blocking1.8.1?)を指定して、Bugzilla の Target Milestone を「Firefox 2 beta1」に設定してください。

+ +

Beta 2 に含まれるべきブロッキングバグの巨大なリストがあります。CVS ツリーが Beta 1 を片付けたら、私たちはそれらの承認とランドを始めます。

+ +

私たちは、必要に応じて 1 日 1 度か 1 日 2 度、優先順位付けの会議をし続けるつもりです。ダイアルイン/IRC は Bon Echo ミーティング(866-216-2181/#bonecho)と同じです。もしあなたが疑問があればいつでも IRC に参加してください。

+ +

では。

+ +

Schrep

+ +

追伸 Beltzner 氏の今日のステータスミーティングの素晴らしい記録に感謝します。:

+ +

http://wiki.mozilla.org/Firefox2/Sta...ngs/2006-07-06

+ +

詳細を知りたい場合に参照してください。

diff --git a/files/ja/orphaned/devnews/20060712/index.html b/files/ja/orphaned/devnews/20060712/index.html new file mode 100644 index 0000000000..39ac2fe5a2 --- /dev/null +++ b/files/ja/orphaned/devnews/20060712/index.html @@ -0,0 +1,35 @@ +--- +title: Firefox 2 ベータ 1 マイルストーンがリリースされた +slug: DevNews/20060712 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

注意: 私たちは開発者とテスター以外には Firefox 2 ベータ 1 マイルストーンリリースのダウンロードをすすめていません。テスト目的のみを意図しています。

+ +

Firefox 2 ベータ 1 はダウンロード可能になりました。これは Firefox 2 に予定された多くの新機能とプラットフォームの変更によってもたらされたコア機能のテストに焦点を当てた開発者向けの 4 番目のマイルストーンです。mozilla.dev.planning や irc.mozilla.org の #bonecho と同じようにでも Firefox 2 の進行中の計画を追いかけることができます。

+ +

このマイルストーンのフィードバックが必要な新機能と変更には以下が含まれます。

+ + + +

Firefox 2 Beta 1 プロジェクトページはテスタにフィードバックの提供とバグの報告を楽にします。幾つかの言語で Windows と Mac OSX と Linux の Firefox 2 ベータ 1のビルドをダウンロードできます。テスタは既知の問題を知るためにリリースノートを読むべきです。開発者は Mozilla Developer Center の開発者のための Firefox 2 に目を通すべきです。

+ +

注意: ダウンロードサイトに直接リンクを張らないでください。かわりに私達はこの Firefox 2 ベータ 1 アナウンスへのリンクを強く勧めます。なぜなら全ての人にこのマイルストーンが何であり、彼らに何が求められ、誰がこの開発段階のテストに参加するためにダウンロードすべきかを知るべきだからです。

diff --git a/files/ja/orphaned/devnews/20060713/index.html b/files/ja/orphaned/devnews/20060713/index.html new file mode 100644 index 0000000000..3dd4449c8e --- /dev/null +++ b/files/ja/orphaned/devnews/20060713/index.html @@ -0,0 +1,12 @@ +--- +title: メモ - 今週の金曜日ツリーの閉鎖と土曜日の不稼働時間 +slug: DevNews/20060713 +tags: + - DevNews + - 'DevNews:General' +--- +

こんにちは。

+ +

今週の土曜日 CVS と tinderbox 全て、bonsai、lxr、bugzilla は予定された保守期間の間、全て利用できなくなります。

+ +

Tinderbox を順番に再始動させるために金曜日の午後 4 時 PDT から全てのツリーが閉じられます。メンテナンス後、全てが復旧し機能し次第、すぐに私たちはそれらを再び開きます。もし疑問がありましたら mozilla.dev.planning を追いかけてください。

diff --git a/files/ja/orphaned/devnews/20060719/index.html b/files/ja/orphaned/devnews/20060719/index.html new file mode 100644 index 0000000000..4e59065b28 --- /dev/null +++ b/files/ja/orphaned/devnews/20060719/index.html @@ -0,0 +1,46 @@ +--- +title: Firefox 2/Gecko 1.8.1 の承認されたバグ +slug: DevNews/20060719 +tags: + - DevNews + - 'DevNews:General' +--- +

Firefox 2 ベータ 2 まで数週間となり最終リリースまで数ヵ月となりました。1.8.1 は昔からの (5 から 7 年前!) 大量のバグの修正を含んでいます。これを書いているときまでに 2300 以下のバグを修正しました (750 以下が Firefox 1.5/Gecko 1.8 以前のものです)。これらの修正全てが Firefox 2.0 をこれまでで最高の Firefox リリースにすることを助けています。

+ +

私たちは最終リリースにどんどん迫っており、リリースを本当に妨げる問題に時間を集中するようになりました。これは金曜日 (2006 年 07 月 27 日) から 午前10時 PDT に以下の評価基準の1つにあわない限りリリース選別チームがバグを承認しなくなることを意味します:

+ + + +

以下のルールが全てのバグにまだ適用されることに注意してください:

+ + + +

これはあなたがこの評価基準にあわないバグかパッチをノミネートすると、それが拒否されるか Bugzilla の Flag が - にされることを意味します。

+ +

私たちは mozilla.dev.planning か毎日午前 10 時 PDTのリリース選別に電話で常に議論できます。

diff --git a/files/ja/orphaned/devnews/20060726/index.html b/files/ja/orphaned/devnews/20060726/index.html new file mode 100644 index 0000000000..ca855ff97c --- /dev/null +++ b/files/ja/orphaned/devnews/20060726/index.html @@ -0,0 +1,13 @@ +--- +title: '20060726' +slug: DevNews/20060726 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性とセキュリティ更新の取組の一環として、Firefox 1.5.0.5 が Windows と Mac 及び Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちは全ての利用者にこの最新リリースに更新することを強く推奨します。この更新はドイツ語、フランス語、スペイン語、日本語、簡体および繁体中国語、韓国語およびそのたの言語を含む 39 の言語で直ちに利用できます。

+ +

もしあなたが既に Firefox 1.5 をもっているなら、24 時間から 48 時間以内に自動更新の通知を受けるでしょう。この更新はいつでもヘルプメニューの「更新を確認」を選択して手動で適用できます。また Mozilla Corporation は Firefox 1.0 ユーザにセキュリティと安定性の重要な改善を活かせるように、この Firefox 1.5 最新リリースにアップグレードすることを強く推奨しています。Firefox 1.5 にはユーザが確実に最新のアップデートで常に最新の状態を保てる自動更新機構を含んでいます。

+ +

さらなる情報は Firefox 1.5.0.5 のリリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20060802/index.html b/files/ja/orphaned/devnews/20060802/index.html new file mode 100644 index 0000000000..ab4bbe77c7 --- /dev/null +++ b/files/ja/orphaned/devnews/20060802/index.html @@ -0,0 +1,12 @@ +--- +title: '20060802' +slug: DevNews/20060802 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Mozilla Corporation の安定性の更新の取組の一環として、Firefox 1.5.0.6 が Windows と Mac 及び Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちは全ての利用者にこの最新リリースに更新することを強く推奨します。この更新はドイツ語、フランス語、スペイン語、日本語、簡体および繁体中国語、韓国語およびそのたの言語を含む 39 の言語で直ちに利用できます。

+ +

もしあなたが既に Firefox 1.5 をもっているなら、24 時間から 48 時間以内に自動更新の通知を受けるでしょう。この更新はいつでもヘルプメニューの「ソフトウェアの更新を確認」を選択して手動で適用できます。また Mozilla Corporation は Firefox 1.0 ユーザにセキュリティと安定性の重要な改善を活かせるように、この Firefox 1.5 最新リリースにアップグレードすることを強く推奨しています。Firefox 1.5 はユーザが確実に最新のアップデートで常に最新の状態を保つ自動更新機構を含んでいます。

+ +

さらなる情報は Firefox 1.5.0.6 のリリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20060809/index.html b/files/ja/orphaned/devnews/20060809/index.html new file mode 100644 index 0000000000..4646545be6 --- /dev/null +++ b/files/ja/orphaned/devnews/20060809/index.html @@ -0,0 +1,38 @@ +--- +title: 'Bon Echo のスケジュールの更新: Firefox 2 ベータ 2 の新しい日程' +slug: DevNews/20060809 +tags: + - DevNews + - 'DevNews:General' +--- +

8 月 8 日の Bon Echo ステータスミーティングで議論されたように、Gecko 1.8.1 と Firefox 2 のブロッキングに多くのブロッキングバグがリストされているので、私たちは Firefox 2 ベータ 2 を再びずらす以外ありませんでした。本当に、これで最後にしましょう。

+ +

新しい日程は:

+ + + +

私はこの情報で  を更新しました。さらにリリース候補と最終リリース日へのこれの影響に関していくつかの (たぶん楽観的な) 推測をしました。

+ +

私達が直面している現在の“long poles” (では詳細が利用可能です) は:

+ + + +

バグにはすべて範囲があり、私たちが今必要としている全ては、以下の形でのサポートと支援です。

+ + + +

いつもと同じように、議論とドライバは mozilla.dev.planning ニューズグループと IRC の #bonecho でみつけられます。

diff --git a/files/ja/orphaned/devnews/20060817/index.html b/files/ja/orphaned/devnews/20060817/index.html new file mode 100644 index 0000000000..eea1d07e70 --- /dev/null +++ b/files/ja/orphaned/devnews/20060817/index.html @@ -0,0 +1,10 @@ +--- +title: 1.8 ブランチの状況の手短なメモ +slug: DevNews/20060817 +tags: + - DevNews + - 'DevNews:General' +--- +

やあ、みんな、

+ +

私たちは ベータ 2 への作業を終えようとしています。結果として 1.8 ブランチは適切に承認をされたベータ 2 のブロッカーバグを除いて閉じられます。私たちが全てのブロッカーバグをランドさせると、私たちは当面の問題が無いかを確認するために 1 日から 2 日ツリーを閉じ、ベータ 2 のためにツリーにタグをつけ、最終テストとベータ 2 リリースのためのビルドの準備をするチェックインのために再び開くつもりです。

diff --git a/files/ja/orphaned/devnews/20060818/index.html b/files/ja/orphaned/devnews/20060818/index.html new file mode 100644 index 0000000000..849c7aef96 --- /dev/null +++ b/files/ja/orphaned/devnews/20060818/index.html @@ -0,0 +1,10 @@ +--- +title: Minefield と Bon Echo のナイトリーの更新が遅れます +slug: DevNews/20060818 +tags: + - DevNews + - 'DevNews:General' +--- +

ナイトリービルドを走らせている人は trunk (Minefiled) やブランチ (Bon Echo) のアップデートがまだ出ていない事に気づいている出しょう。これは提供すべきでないものを提供している tinderbox のためだと判明しています {{ bug(349183) }} を参照)。すぐに修正されるはずです !

+ +

更新: ブランチは再び動きだしたようで、実際の所は違う問題でした。しかし依然として trunk には更新がありません

diff --git a/files/ja/orphaned/devnews/20060821/index.html b/files/ja/orphaned/devnews/20060821/index.html new file mode 100644 index 0000000000..cbdbb286c5 --- /dev/null +++ b/files/ja/orphaned/devnews/20060821/index.html @@ -0,0 +1,8 @@ +--- +title: Mozilla 1.8 ブランチが Firefox 2 Beta 2 のために閉じられました +slug: DevNews/20060821 +tags: + - DevNews + - 'DevNews:General' +--- +

昨夜、真夜中 (PDT) の直後、MOZILLA_1_8_BRANCH は来る Firefox 2 ベータ 2 リリースのビルド候補のため閉じられました。リリース及び QA チームはリリース候補ビルドでスモークテストを行い、リスピンの引き金となるバグがないか確認しており、ツリーは RC1 チェックインのため明日の午後には開かれる予定です。Mozilla 1.8 Tinderbox ページで最新のツリーの状態とバグリストを確認してください。私たちはここと mozilla.dev.planning でアナウンスをするつもりです。

diff --git a/files/ja/orphaned/devnews/20060822-02/index.html b/files/ja/orphaned/devnews/20060822-02/index.html new file mode 100644 index 0000000000..18b83fd834 --- /dev/null +++ b/files/ja/orphaned/devnews/20060822-02/index.html @@ -0,0 +1,8 @@ +--- +title: Mozilla 1.8 ブランチは承認されたチェックインのために再び開かれました +slug: DevNews/20060822-02 +tags: + - DevNews + - 'DevNews:General' +--- +

1.8 ツリーは RC1 に備えた承認されたチェックインのために再び開かれました。最新のツリーの状態とバグリストを Mozilla 1.8 Tinderbox ページで確認してください。

diff --git a/files/ja/orphaned/devnews/20060822/index.html b/files/ja/orphaned/devnews/20060822/index.html new file mode 100644 index 0000000000..ce60902bfe --- /dev/null +++ b/files/ja/orphaned/devnews/20060822/index.html @@ -0,0 +1,12 @@ +--- +title: XULRunner 1.8.0.4 セキュリティおよび安定性アップデート +slug: DevNews/20060822 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

XULRunner 1.8.0.4 セキュリティおよび安定性のアップデートが利用可能になりました。このリリースは Mozilla XULRunner アプリケーションフレームワークの安定した開発者向けプレビューです。XULRunner 1.8.0.4 の基礎となる Gecko エンジンは Firefox 1.5.0.4 と一致しています。既存のユーザ全てはアップグレードを推奨されています。詳しい情報はリリースノートを参照してください。

+ +

さらに、XULRunnerのこのリリースを準備している間、ビルドチームは XPCOM コンポーネント開発のために公式の Gecko SDK をリリースしました。SDKに関する詳しい情報に関しては、ドキュメンテーションを見てください。

diff --git a/files/ja/orphaned/devnews/20060823/index.html b/files/ja/orphaned/devnews/20060823/index.html new file mode 100644 index 0000000000..e5e3313590 --- /dev/null +++ b/files/ja/orphaned/devnews/20060823/index.html @@ -0,0 +1,16 @@ +--- +title: cvs.mozilla.org の緊急メンテナンスが進行中 +slug: DevNews/20060823 +tags: + - DevNews + - 'DevNews:General' +--- +

更新: 12:12 PDT : サーバは復旧しています。 Update: 12:12 PDT: Server is back up.

+ +

先週メインの cvs.mozilla.org サーバがカーネルパニックになりました。初期調査によって迅速なファームウェアのアップグレード行いました。その後、Ops チームは記憶モジュールの 1 つで一時 ECC メモリのエラーを発見しています。彼らは今日そのモジュールの置き換えを試みましたが、きちんと成功しませんでした。現在 (メインハードドライブを除く) マシン全体は正常だとわかっている新しいハードウェアに交換されています。

+ +

結果としてそのサーバはこれを書いている間ダウンしています。しかしすぐに復旧するはずです。

+ +

通常これらの問題は私たちの定期保守時期に処理されていますが、さらなるクラッシュや不正に対して いかなる危険も冒したいと思いません。

+ +

あなたの辛抱に感謝します!

diff --git a/files/ja/orphaned/devnews/20060825/index.html b/files/ja/orphaned/devnews/20060825/index.html new file mode 100644 index 0000000000..f2799b46c6 --- /dev/null +++ b/files/ja/orphaned/devnews/20060825/index.html @@ -0,0 +1,21 @@ +--- +title: Schrep と Mozilla の IRC チャットしよう +slug: DevNews/20060825 +tags: + - DevNews + - 'DevNews:General' +--- +

Mozilla に関わっているすばらしいスタッフはたくさんいます。それゆえ皆が何を手がけているか、何が起こっているか遅れずについていくことは難しくなっているかもしれません。そこで古い伝統を復活して Schrep と とても非公式の IRC の Q&A チャットしてみようと思います。これは、以下のようなものについて議論するためにはすばらしい場所でしょう。

+ + + +

私はチャットできない人々のために質問をまとめてここ/自分のブログに再び投稿することができます。 2006 年 9 月 1 日(金)

+ +

午前11時 午後 1 時 PDT、#mozillazine で試してみましょう。

diff --git a/files/ja/orphaned/devnews/20060828/index.html b/files/ja/orphaned/devnews/20060828/index.html new file mode 100644 index 0000000000..e7341894bd --- /dev/null +++ b/files/ja/orphaned/devnews/20060828/index.html @@ -0,0 +1,36 @@ +--- +title: Firefox 2/Gecko 1.8.1 の承認されたバグ +slug: DevNews/20060828 +tags: + - DevNews + - 'DevNews:General' +--- +

私たちは Firefox 2 ベータ 2 最終リリースのごく近くまでやってきました。Gecko 1.8.1/Firefox 2 は昔からの (あるものは 6 年前!) バグの修正を大量に含んでいます。これを書いているときまでに 3300 にものぼるバグを修正しました。私たちは最終リリースに迫っており、リリースを本当に妨げる問題に時間を集中するようになりました。これは以下の評価基準の1つにあわない限りリリース選別チームがバグを承認しなくなることを意味します:

+ + + +

以下のルールが全てのバグにまだ適用されることに注意してください:

+ + + +

これはあなたがこの評価基準にあわないバグかパッチをノミネートする と、それが拒否されるか Bugzilla の Flag が - にされることを意味します。

+ +

私たちは mozilla.dev.planning か毎日午前 10 時 PDT のリリース選別の電話で常に議論できます。

diff --git a/files/ja/orphaned/devnews/20061002-02/index.html b/files/ja/orphaned/devnews/20061002-02/index.html new file mode 100644 index 0000000000..fa963c8923 --- /dev/null +++ b/files/ja/orphaned/devnews/20061002-02/index.html @@ -0,0 +1,22 @@ +--- +title: '更新: Toorcon で脆弱性の有力な候補が報告された' +slug: DevNews/20061002-02 +tags: + - DevNews + - 'DevNews:General' +--- +

以前言及した JavaScript のセキュリティ問題の有力な候補を報告した、Toorcon の講演者の Mischa Spiegelmock 氏と話す機会を我々は得ました。彼はより多くの動作するコードを我々に与え、この声明を作成し私がここに投稿することに同意しました。

+ +
+
私たちの講演の主な目的はユーモラスであることでした。
+
私たちの話の一部として、リモートのコードを実行する結果となるスタックオーバーフローをもたらすことができたと以前知られている Firefox の脆弱性があったと言及しました。しかし私たちが提示したコードは実際にはこれを行いませんでした。私個人はコードの実行を引き起こさせていませんし、それを行った人をだれも知りません。
+
私はこのコードによってクラッシュとシステムリソースを使い果たす以外は何も成功していません。他の誰かのコンピュータを乗っ取り、任意のコードを実行するためには一切それを使用していません。
+
私は 30 個の未公開の Firefox の脆弱性を持っていません。かつて私はこれを主張したこともありません。私は未公開の Firefox の脆弱性を 1 つも持っていません。 私と話していた人がこの主張をしました。私は彼がそれらを持っているかどうか正直分かりません。
+
私はかかわった全ての方に謝罪します。私ができる限り全てを明確にしたと願っています。
+
敬具
+
Mischa Spiegelmock
+
+ +

Mischa はコードの実行をできませんでしたが、我々はこの問題を深刻に受け止めています。 我々は調査し続けるつもりです。

+ +

-Window Snyder

diff --git a/files/ja/orphaned/devnews/20061002/index.html b/files/ja/orphaned/devnews/20061002/index.html new file mode 100644 index 0000000000..2411fb6303 --- /dev/null +++ b/files/ja/orphaned/devnews/20061002/index.html @@ -0,0 +1,15 @@ +--- +title: Toorcon で脆弱性の有力な候補が報告された +slug: DevNews/20061002 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Security' +--- +

誰かが脆弱性を特定したと言ったとき、我々はそれが脆弱性ではないと確認できるまで本物として扱います。我々はすぐに調査し修正を試み始めます。これは我々がどれだけ早く修正を出荷できるかということです。

+ +

今週末 Toorcon で 2 人の講演者が JavaScript VM で脆弱性を発見したと主張しました。当然我々はこれを深刻だと認識しています。

+ +

今までのところ、我々は彼らの話の間に得られた情報に基づいてを再現することができました。いくつかの場合これを基にからクラッシュを引き起こします。我々は現時点で持っている情報に基づいて攻撃者がコードを実行できるかどうかを確認できませんでした。私たちはまだ調査しており、更新し続けるつもりです。

+ +

-Window Snyder

diff --git a/files/ja/orphaned/devnews/20061025/index.html b/files/ja/orphaned/devnews/20061025/index.html new file mode 100644 index 0000000000..d0234e658b --- /dev/null +++ b/files/ja/orphaned/devnews/20061025/index.html @@ -0,0 +1,36 @@ +--- +title: Firefox 2 がリリースされました! +slug: DevNews/20061025 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Mozilla は Firefox ブラウザのメジャーアップデートである Firefox 2 がたった今利用可能になったことをアナウンスすることを嬉しく思います。この製品は 35 を越える言語で Windows, Mac あるいは Linux オペレーティングシステム向けに www.getfirefox.com からダウンロードできます。私たちは全てのユーザにこの最新リリースにアップグレードすることを勧めます。

+ +

Firefox 2 の最新情報

+ +
+
ビジュアルリフレッシュ
+
Firefox 2 のテーマとユーザインターフェースはブラウジング体験の親しみやすさを変えることなくユーザビリティを改善しました。
+
組込みフィッシング保護
+
フィッシング保護はユーザが偽造ウェブサイトにであった時に警告し、ホームページに戻ることを提案します。フィッシング保護は標準で機能し、フィッシングサイトを知っているローカルかオンラインのリストでサイトをチェックすることで動作します。フィッシング保護機能が有効な場合、このリストは自動的にダウンロードされ、定期的に更新されます。
+
強化された検索能力
+
Google か Yahoo! あるいは Answers.com を使って、統合された検索ボックスでユーザが入力すると検索候補が表示されます。新しい検索エンジンマネージャは検索エンジンの追加、削除、並べ替えを容易にし、Firefox はユーザがインストールを望んでいるかもしれない新しい検索エンジンを提供しているウェブサイトに出会ったら注意を呼びかけます。
+
改善されたタブブラウズ
+
標準で Firefox は新しいウィンドウではなく新しいタブでリンクを開きます。そしてそれぞれのタブには閉じるボタンがつきました。1 つのウィンドウに収まりきらないタブを開くパワーユーザはタブの間を前後にスクロールするタブストリップの左右の端の矢印をみつけるでしょう。履歴メニューは最近閉じたタブのリストを保持し、誤って閉じられたタブを簡単に開き直しやすくします。
+
ブラウジングセッションを再開
+
セッション復元機能はアプリケーションの更新か拡張のインストールをした時にウィンドウ、タブ、フォームに入力した文字、途中だったダウンロードを復元します。さらにシステムがクラッシュしたときに前回のセッションを再開したいか確認するでしょう。
+
ウェブフィードのプレビューと購読
+
ユーザはウェブフィード (このような) の処理の仕方をウェブサービスかスタンドアローンの RSS リーダで購読させる、あるいはライブブックマークに追加するの中から選ぶことができます。ウェブサービスのオプションとして My Yahoo! と Bloglines, Google Reader が事前に読み込まれていますが、ユーザはフィードを処理するどんなサービスでも追加できます。
+
インラインスペルチェック
+
組込みスペルチェッカによって別のアプリケーションを使うことなくユーザは簡単にウェブフォーム (このような)に入力された文字のスペルをチェックできます。
+
+ +

…。さらにもっと。

+ +

Mozilla Firefox 2 の完全な概要は Firefox 2 機能概要を、さらなる詳細はリリースノートを読んでください。

+ +

アップグレード作業

+ +

あなたが既に Firefox 1.5.x を使っているなら、数週間のうちに Firefox 2 へのアップグレードの提案を受け取るでしょう。待ちきれないなら www.getfirefox.com から Firefox 2.0 をいますぐダウンロードできます。

diff --git a/files/ja/orphaned/devnews/20061106/index.html b/files/ja/orphaned/devnews/20061106/index.html new file mode 100644 index 0000000000..714f007252 --- /dev/null +++ b/files/ja/orphaned/devnews/20061106/index.html @@ -0,0 +1,45 @@ +--- +title: Mozilla Toolkit のためのユニットテスト +slug: DevNews/20061106 +tags: + - DevNews + - 'DevNews:General' +--- +

Gecko 1.9 / Firefox 3 企画会議で出た 最重要目標 の一つに、自動試験の実現と、われわれのコードでのテスト容易性の評価があります。将来の目標として、ツールキットモジュールへの全てのチェックインに対する新しいユニットテストのポリシーを立ち上げようとしています。

+ +

テストを行うことの重要性

+ +

ユニットテストはさまざまな効果をもたらします :

+ + + +

このように、統合されたユニットテストには、全ての個々の変更のコストとリスクを小さくする効果があります。これによりプロジェクトは Mozilla 2 に向けた主要なアーキテクチャの向上を速くそして確かなものにできるでしょう。

+ +

完全な範囲 (Complete Coverage)

+ +

ユニットテストによって目標を達成するためには、新しいコードに対するユニットテストを作成する必要があります。そして、テストは定期的に実行され、結果を開発者向けに公表し修正されるようにしなければなりません。Mozilla においては、クライアントに関するコードの大半のテストをビルドシステムの make check の段階で実行しなければならないことを意味します。そして、その結果を TUnit のように tinderbox へ報告しなければなりません。

+ +

わたしは、全ての toolkit コードにおいて完全にユニットテストを実行したいと考えています。そのために、チェックインポリシーに次の項目を追加しようとしています。

+ + + +

また、toolkit の古いバグ全てについてボランティアに次のことをお願いします。in-testsuite? か in-testsuite- フラグをもつ FIXED とされたバグに優先順位をつけて、2007 年 3 月 1 日までに適切なテストケースを作成するのを助けてください。これは、意欲的な目標ですが、実現できると考えています。そして Mozilla 2 ブランチに必要とされる前に完全に行うことが重要です。

+ +

Robert Sayre はツールキットのユニットテスト管理者として活動することを容認してくれました。もしあなたが開発者で、ユニットテストをどう書くかについてや、どのユニットテストフレームワークが利用可能かについて質問があれば、最初にドキュメントを読んでからコンタクトを取ってください (IRC では sayrer です)。彼にユニットテストを書いてくれ、とは頼まないでください ;-) 。Dave Liebrech (IRC では davel です) もユニットテストフレームワークのデザインと実装について質問に答え、助けになってくれるでしょう。

+ +

Review と Testing は相補関係

+ +

ユニットテストがレビューの代用品となるわけではないことを明記しておくのは重要でしょう。テストはコードが思ったとおりに動作することを確認するために重要です。レビューは、コードが文書になっており、人間が理解できる形であり、ほかのコードと動くように設計されていることを保障するために重要です。Mozilla では昔からレビュー要求についてはうまく動いており、ユニットテストについても同じような環境を構築したいと考えています。ユニットテストとレビューは相補性にある活動で、われわれのコードを改善し続けるには両方とも必要なものです。

+ +

注 : このポリシーに関しての質問や議論は、mozilla.dev.platform ニュースグループ (NNTP か google groups 経由など) にお願いします。

diff --git a/files/ja/orphaned/devnews/20061107/index.html b/files/ja/orphaned/devnews/20061107/index.html new file mode 100644 index 0000000000..5aece56536 --- /dev/null +++ b/files/ja/orphaned/devnews/20061107/index.html @@ -0,0 +1,16 @@ +--- +title: JavaScript の生みの親であり Mozilla CTO の Brendan Eich との開発者向けチャット +slug: DevNews/20061107 +tags: + - DevNews + - 'DevNews:General' +--- +

更新 : Brendan の今日の開発者向けチャットの特別ゲストは、Kevin Lynch (Adobe のチーフソフトウェアアーキテクト) になりました。Brendan と Kevin は Adobe が オープンソース化 し、Tamarin という新しいプロジェクト名で Mozilla に提供されることになった ActionScript™ Virtual Machine について議論します。もし、Mozilla の JavaScript 実装の将来について興味があるならば、この機会を逃さないでください！

+ +

今週火曜日、11 月 7 日の午前 10 時 (PST / UTC-8) に、Brendan Eich と数名の特別ゲストが、Mozilla 2 に導入される刺激的な新技術について開発者向けのチャットを開催します。Brendan の Mozilla 2 ロードマップについての投稿を読んでいないなら、火曜日のチャットに向けて以下の抜粋に目を通してください。

+ +
+
Mozilla 2 は、来るべき ECMAScript Edition 4 ("JS2") をサポートした JIT 指向の JavaScript VM （詳細は近日） を備えているだろう。この VM に望ましいものの一つが、conservative でインクリメンタルな garbage collector (GC) だ。うまくいくようであれば、DOM オブジェクトのメモリ管理に、XPCOM のリファレンス・カウンティングではなく、この GC モジュールが使えるだろう。また、conservative なスキャニング・コードは、cycle collection を手助けできるだろう。さらに、JIT が直接 DOM glue code のエントリ・ポイントを呼び出すことができるだろう （JavaScript の mutation がメソッドのプロパティ値を上書きしていない、という前提だが）。そうなれば、XPConnect の、パワフルではあるが相対的に遅い typelib ベースのディスパッチ機構を経由する必要がなくなる。
+
+ +

もし、これが興味深く感じたなら、Brendan と議論できるこの機会を失うわけには行きません。火曜日の午前 10 時 (PST / UTC-8) に IRC サーバ irc.mozilla.org の #javascript チャンネルで、この面白いイベントに参加しましょう。

diff --git a/files/ja/orphaned/devnews/20061108/index.html b/files/ja/orphaned/devnews/20061108/index.html new file mode 100644 index 0000000000..cd8705519e --- /dev/null +++ b/files/ja/orphaned/devnews/20061108/index.html @@ -0,0 +1,15 @@ +--- +title: Firefox 1.5.0.8 セキュリティと安定性アップデート +slug: DevNews/20061108 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性とセキュリティーのためのアップデートの一環として、Firefox 1.5.0.8 が Windows, Mac, Linux 向けに提供され、mozilla.com (http://www.mozilla.com/en-US/firefox/all-older.html) から無料でダウンロード可能です。全ての Firefox 1.5.x ユーザにこの最新のリリースにアップグレードすることを強く推奨します。このアップデートは、ドイツ語、フランス語、スペイン語、日本語、簡体字中国語、繁体字中国語、韓国語を含む 37 言語で同時に利用可能です。

+ +

注意: Firefox 1.5.0.x はセキュリティーや安定性についてのみ 2007 年 4 月 24 日までアップデートが提供されます。全てのユーザに Firefox 2 (http://www.getfirefox.com) へアップグレードすることを推奨します。

+ +

Firefox 1.5 を利用しているなら、24 から 48 時間以内に自動アップデートの通知を受け取るでしょう。これらのアップデートの入手は、ヘルプメニューの「ソフトウェアの更新を確認」から手動で行うことも可能です。Mozilla Corporation は、セキュリティーや安定性の改善の成果を受けるためにも Firefox 1.0 ユーザに最新の Firefox 1.5 へアップグレードすることを推奨します。Firefox 1.5 はユーザが常に最新のアップデート版を利用できるように自動アップデート機能を含んでいます。

+ +

より詳細については、Firefox 1.5.0.8 リリースノートを参照してください。 (http://www.mozilla.com/firefox/releases/1.5.0.8.html).

diff --git a/files/ja/orphaned/devnews/20061114/index.html b/files/ja/orphaned/devnews/20061114/index.html new file mode 100644 index 0000000000..b7c680d9be --- /dev/null +++ b/files/ja/orphaned/devnews/20061114/index.html @@ -0,0 +1,9 @@ +--- +title: アンチフィッシング試験の結果 +slug: DevNews/20061114 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Security' +--- +

現在進めているセキュリティに関する解析と試験についての努力の一環として、SmartWare と契約しフィッシング保護機能の効果について試験しました。Firefox 2 フィッシング保護と IE 7 フィッシングフィルタについて、PhishTank コミュニティーによって評価された既知のフィッシングサイトで試験を行いました。PhishTank をデータソースとして利用したのは、われわれが URL ブロックリストを作成する際に利用しているフィードと完全に独立しているものだからです。IE は警告もしくはブロックを行いますが、この試験の目的を果たすために両方ともをブロックとして取り扱いました。試験をできるだけ公平に行うために、IE と Firefox の試験は最初に試験したブラウザから切り替えて 15 分以内にもうひとつのブラウザで試験した試験用 URL のみを数えました。試験結果は、ここ にあります。

diff --git a/files/ja/orphaned/devnews/20061129/index.html b/files/ja/orphaned/devnews/20061129/index.html new file mode 100644 index 0000000000..88ec69581b --- /dev/null +++ b/files/ja/orphaned/devnews/20061129/index.html @@ -0,0 +1,10 @@ +--- +title: Gecko 1.9 アルファリリースのためにコードツリークローズ +slug: DevNews/20061129 +tags: + - DevNews + - 'DevNews:General' +--- +

Gecko 1.9 alpha のツリーはたったいまクローズされました。blocking1.9a+ と (bugzilla のステータスホワイトボードに) マークされているバグのみが修正対象となります。これは、いまから数多くリリースされるであろう Gecko 1.9 アルファの最初のリリースで、何か不具合が起こったとしてもパニックにならないでください。6 から 8 週間後(さらに、その後 1 ヵ月から 1 ヵ月半後)には別のアルファがリリースされます。このアルファで修正されるべき小さく重要な問題がありましたら、vlad, bz, schrep もしくは stuart に連絡してください。

+ +

明日のある時点で行うビルドが終了し、ツリーが再開されるまでツリーは閉じられたままになります。ビルドについては Developer News blog への投稿でアナウンスがあります。これは、Gecko の初期の試験のためや、ウェブ開発者が既存のビルドでサイトをテストするためを目的とする、コアの Gecko レンダリングエンジンのみのアルファリリースです。Firefox 2 からフロントエンド部分での変更はありません。

diff --git a/files/ja/orphaned/devnews/20061208/index.html b/files/ja/orphaned/devnews/20061208/index.html new file mode 100644 index 0000000000..23b1492378 --- /dev/null +++ b/files/ja/orphaned/devnews/20061208/index.html @@ -0,0 +1,11 @@ +--- +title: Gran Paradiso Alpha 1 がダウンロード可能に +slug: DevNews/20061208 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 1 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期リリースです。Gran Paradiso Alpha 1 はテスト目的でのみ提供されており、ウェブアプリケーション開発者や私達 (Mozilla) のテストコミュニティを対象としています。 現在の Mozilla Firefox のユーザは Gran Paradiso Alpha 1 を利用すべきではありません。Gran Paradiso Alpha 1 のユーザインターフェースには目立った変更はありませんが、コアのレイアウトやレンダリングのかなりの部分が向上されています。今回のリリースは、 Gran Paradiso/Gecko 1.9 で予定されているかなり頻繁なアルファ版リリースの最初のものになります。

+ +

より詳細な情報やダウンロード方法については、Gran Paradiso Alpha 1 リリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20061219/index.html b/files/ja/orphaned/devnews/20061219/index.html new file mode 100644 index 0000000000..934d4eb0d1 --- /dev/null +++ b/files/ja/orphaned/devnews/20061219/index.html @@ -0,0 +1,17 @@ +--- +title: 'Firefox 1.5.0.9, Firefox 2.0.0.1 と Thunderbird 1.5.0.9 のアップデートが利用可能に' +slug: DevNews/20061219 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性とセキュリティーのためのアップデートの一環として、Firefox 1.5.0.9, Firefox 2.0.0.1 と Thunderbird 1.5.0.9 が Windows, Mac, Linux 向けに提供され、getfirefox.com と getthunderbird.com から無料でダウンロード可能です。

+ +

全ての Firefox ユーザにこの最新版へアップグレードすることを推奨します。このアップデートは、スペイン語、日本語、アラビア語、ハンガリー語を含む 37 言語で同時に利用可能になりました。

+ +

注意: Firefox 1.5.0.x はセキュリティや安定性についてのみ 2007 年 4 月 24 日までアップデートが提供されます。全てのユーザに Firefox 2 へアップグレードすることを推奨します。Firefox 1.5.0.9 は http://www.mozilla.com/en-US/firefox/all-older.html からダウンロードできます。

+ +

Firefox 1.5.x, Firefox 2.0.x や Thunderbird 1.5.x をすでに利用しているなら、24 から 48 時間以内に自動更新の通知を受け取るでしょう。これらのアップデートの入手は、ヘルプメニューの "ソフトウェアの更新を確認" から手動で行うことも可能です。

+ +

より詳細な情報については、Firefox 1.5.0.9 リリースノート Firefox 2.0.0.1 リリースノート Thunderbird 1.5.0.9 リリースノート を参照してください。

diff --git a/files/ja/orphaned/devnews/20070207/index.html b/files/ja/orphaned/devnews/20070207/index.html new file mode 100644 index 0000000000..94e03da912 --- /dev/null +++ b/files/ja/orphaned/devnews/20070207/index.html @@ -0,0 +1,19 @@ +--- +title: Gran Paradiso Alpha 2 がダウンロード可能に +slug: DevNews/20070207 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 2 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期リリースです。Gran Paradiso Alpha 2 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達 (Mozilla) のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha2 を使うべきではありません。Gran Paradiso Alpha 2 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

+ +

Gran Paradiso Alpha 2 は以下のプラットフォームで利用可能です:

+ + + +

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20070213/index.html b/files/ja/orphaned/devnews/20070213/index.html new file mode 100644 index 0000000000..7ce00e0466 --- /dev/null +++ b/files/ja/orphaned/devnews/20070213/index.html @@ -0,0 +1,12 @@ +--- +title: いくつかの nsIDOM*Listener インターフェースを削除 +slug: DevNews/20070213 +tags: + - DevNews + - 'DevNews:General' +--- +

次のイベントリスナインターフェースは trunk で削除されます : nsIDOMMutationListener.h, nsIDOMPaintListener.h, nsIDOMScrollListener.h そして nsIDOMPageTransitionListener.h これらは、Gecko では利用されたことはなかったか、これまで長い間利用されないままでした。

+ +

もし、これらのインターフェースを現在利用しているなら、コードを通常の DOM の addEventListener() と handleEvent() メソッドを利用するように書き換えてください。

+ +

また、seamonkey/dom/public/coreEvents にあるインタフェースはどれも利用すべきではありません。 (Gecko:Obsolete_API)

diff --git a/files/ja/orphaned/devnews/20070219/index.html b/files/ja/orphaned/devnews/20070219/index.html new file mode 100644 index 0000000000..11afaae252 --- /dev/null +++ b/files/ja/orphaned/devnews/20070219/index.html @@ -0,0 +1,15 @@ +--- +title: 3 月に Mozilla Developer Days を開催 +slug: DevNews/20070219 +tags: + - DevNews + - 'DevNews:General' +--- +

Mozilla は 2 回の developer days を 3 月に Boston と Mountain View で開催します。

+ + + +

詳細は wiki を参照してください。そして、興味を持ったならどちらか、もしくは両方に参加してください !

diff --git a/files/ja/orphaned/devnews/20070223/index.html b/files/ja/orphaned/devnews/20070223/index.html new file mode 100644 index 0000000000..6495f88777 --- /dev/null +++ b/files/ja/orphaned/devnews/20070223/index.html @@ -0,0 +1,17 @@ +--- +title: Firefox 2.0.0.2 と Firefox 1.5.0.10 セキュリティ及び安定性アップデート +slug: DevNews/20070223 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性とセキュリティへの取組の一環として Firefox 1.5.0.10 と Firefox 2.0.0.2 が Windows と Mac、Linux で getfirefox.com から無償でダウンロードできるようになりました。

+ +

セキュリティの修正が含まれるため私たちは全ての Firefox ユーザに最新のリリースにアップグレードすることを強く勧めます。

+ +
注意: Firefox 1.5.0.x のセキュリティと安定性のアップデートがメンテナンスされるのは 2007 年 4 月 24 日までです。全てのユーザに Firefox 2 へアップグレードすることを勧めます。Firefox 1.5.0.10 は http://www.mozilla.com/firefox/all-older.html からダウンロードできます。
+ +

もし Firefox 1.5.0.x か Firefox 2.0.0.x を既にもっているなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは今日の遅くから「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

+ +

変更点やらさらなる詳細については Firefox 1.5.0.10 リリースノートと Firefox 2.0.0.2 リリースノートを確認してください。

diff --git a/files/ja/orphaned/devnews/20070302/index.html b/files/ja/orphaned/devnews/20070302/index.html new file mode 100644 index 0000000000..a74d6ad413 --- /dev/null +++ b/files/ja/orphaned/devnews/20070302/index.html @@ -0,0 +1,17 @@ +--- +title: Thunderbird 1.5.0.10 セキュリティーと安定性のアップデート +slug: DevNews/20070302 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性とセキュリティへの取組の一環として Thunderbird 1.5.0.10 が Windows と Mac、Linux で getthunderbird.com から無償でダウンロードできるようになりました。

+ +

セキュリティの修正が含まれるため私たちは全ての Thunderbird ユーザにこの最新のリリースにアップグレードすることを強く勧めます。

+ +

もし Thunderbird 1.5.0.x を既に利用しているなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは今日の遅くから「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

+ +

変更点やらさらなる詳細については Thunderbird 1.5.0.10 リリースノート を確認してください。

+ +

 

diff --git a/files/ja/orphaned/devnews/20070304/index.html b/files/ja/orphaned/devnews/20070304/index.html new file mode 100644 index 0000000000..995c578944 --- /dev/null +++ b/files/ja/orphaned/devnews/20070304/index.html @@ -0,0 +1,20 @@ +--- +title: Firefox 2.0.0.3 と 2.0.0.4 +slug: DevNews/20070304 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

いくつかの重大なリグレッションを修正するために、最近のリグレッションのうちいくつかについての修正を導入した 2.0.0.3 と 1.5.0.11 のリリースを早急に行うことを検討しています。 2.0.0.4 と 1.5.0.12 が次の通常のセキュリティー修正、安定版リリースとなる予定です。

+ +

この数日間の間に、以下の条件を基準として、導入する修正の選択を行う予定です。

+ + + +

この条件は非常に厳しいものですので、火曜日午後 6 時 PST に確定させられるものと考えており (全ての妨害バグはパッチが提出されている必要があります)、試験のためのビルドは水曜日の早いうちには準備できるでしょう。もし、上記の基準に合致するようなバグがあるならば、できるだけ早くに知らせてください。 は毎朝 10 時 PST にミーティングを行い、提案されたバグを調査、承認します。

+ +

直接の質問は、dev.planning スレッドまでお願いします。

diff --git a/files/ja/orphaned/devnews/20070312/index.html b/files/ja/orphaned/devnews/20070312/index.html new file mode 100644 index 0000000000..8d0bd1005e --- /dev/null +++ b/files/ja/orphaned/devnews/20070312/index.html @@ -0,0 +1,15 @@ +--- +title: 2.0.0.3/1.5.0.11 候補完成 +slug: DevNews/20070312 +tags: + - DevNews + - 'DevNews:General' +--- +

2.0.0.3 と 1.5.0.11 の新しいリリース候補のビルドが完成しました。2.0.0.2 からすぐにこれらをリリースする理由がいくつかの重大なレグレッションが存在したことですので、われわれはできるだけ多くの人に最終リリース前にテストをしてほしいと考えています。2.0.0.2 以降のリグレッションが一つでも見つかればバグとして登録し、blocker として推薦してください。

+ +

リリース候補は次のリンクからダウンロードできます :

+ + diff --git a/files/ja/orphaned/devnews/20070315/index.html b/files/ja/orphaned/devnews/20070315/index.html new file mode 100644 index 0000000000..06e19b11c7 --- /dev/null +++ b/files/ja/orphaned/devnews/20070315/index.html @@ -0,0 +1,28 @@ +--- +title: Firefox コミュニティーベータプログラム +slug: DevNews/20070315 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Firefox 2 にたどり着くまでに、コミュニティーベータプログラムの一環で、われわれはベータビルドやリリース候補を幅広いテストとフィードバックを目的として公開しました。これらのリリース前のバージョンの Firefox をダウンロードしインストールした誰もが、このベータプログラムの参加者となり、最終的に Firefox 2 のリリース版に自動的にアップデートしました。

+ +

Firefox 2 のクォリティーを向上し続けるためにも、同様のプログラムをセキュリティーと安定性のための Firefox 2 リリースにも実施しようとしています。いまから 24 時間以内に、ベータプロセスに参加したい人は誰でも、次のセキュリティーと安定性のためのアップデートのリリース前バージョンを入手できるようになるでしょう。

+ +

もし、このプログラムに参加するなら、われわれはあなたの協力に感謝いたします。問題や論点がありましたら何でもわれわれの コミュニティーフィードバックサイト にお寄せください。

+ +

Firefox 2.0.0.3 の最終リリースはこのプログラムを通じた幅広いテストが完了してすぐになります。全てのプレスに関しての問い合わせは、直接 press@mozilla.com までお願いします。

+ +

ベータプログラムに参加しないなら、単に Firefox の最新の製品版 をダウンロードしてインストールしてください。

+ +

近い将来、われわれはこのコミュニティーベータプログラムに新しい人を迎えるでしょう。参加方法に関しては Mozilla Developer News  にすぐに投稿されると思います。

+ +

技術的メモ : 以下の方法でベータプログラムに参加しているかを確認できます

+ + diff --git a/files/ja/orphaned/devnews/20070320/index.html b/files/ja/orphaned/devnews/20070320/index.html new file mode 100644 index 0000000000..5be4076906 --- /dev/null +++ b/files/ja/orphaned/devnews/20070320/index.html @@ -0,0 +1,17 @@ +--- +title: Firefox 2.0.0.3 と Firefox 1.5.0.11 セキュリティ及び安定性アップデート +slug: DevNews/20070320 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Firefox 1.5.0.11 と Firefox 2.0.0.3 が http://getfirefox.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Firefox ユーザに最新のリリースへアップグレードすることを強く勧めます。

+ +
注意: Firefox 1.5.0.x のセキュリティと安定性のアップデートがメンテナンスされるのは 2007 年 4 月 24 日までです。全てのユーザに Firefox 2 へアップグレードすることを勧めます。Firefox 1.5.0.11 は http://www.mozilla.com/firefox/all-older.html からダウンロードできます。
+ +

もし Firefox 1.5.0.x か Firefox 2.0.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

+ +

変更点や更なる詳細については Firefox 1.5.0.11 リリースノートと Firefox 2.0.0.3 リリースノートで確認してください。

diff --git a/files/ja/orphaned/devnews/20070322/index.html b/files/ja/orphaned/devnews/20070322/index.html new file mode 100644 index 0000000000..91c855a3a6 --- /dev/null +++ b/files/ja/orphaned/devnews/20070322/index.html @@ -0,0 +1,12 @@ +--- +title: ヤツの名前は Kit … Developer Kit +slug: DevNews/20070322 +tags: + - DevNews + - 'DevNews:General' +--- +

ウェブ開発者へ : 新しいウェブにおけるオープンスタンダードの旗手が登場しました。彼は 1 フィートしかないように見えますが、非常に効果的に登場しました。SXSW Interactive 2007 で騒ぎを巻き起こし、DL.TV. にもすでに出演しました。若くて小さいヤツでしか無いですが、われわれは、Kit … そう、Developer Kit と呼んでいます。

+ +

もっとも、いままで名前は出てきませんでした。生まれたのは、Renardo での 2006 Firefox Developer's Summit の会場で、本当にすばらしい Adobe Illustrator の技術を持つ Sean Martell によってトラックパッドのみで生み出されました。まもなく Mozilla Store をいくつかのアイテムとしてかざり、あなたも無料で手に入れることができるでしょう。Kit のデスクトップ壁紙を手に入れ、次世代のウェブサイトの開発でオープンスタンダードを利用するように世界に訴えましょう。壁紙は Creative Commons でライセンスされ、Mozilla のトレードマークポリシーに注意する限り自由に利用できます。

+ +

今すぐ、非常にかわいい "Developer Kit" の壁紙を飾ることで、オープンウェブスタンダードを使うことに協力してください !

diff --git a/files/ja/orphaned/devnews/20070323/index.html b/files/ja/orphaned/devnews/20070323/index.html new file mode 100644 index 0000000000..493ca19458 --- /dev/null +++ b/files/ja/orphaned/devnews/20070323/index.html @@ -0,0 +1,19 @@ +--- +title: Gran Paradiso Alpha 3 がダウンロード可能に +slug: DevNews/20070323 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 3 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Gran Paradiso Alpha 3 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha 3 を使うべきではありません。Gran Paradiso Alpha 3 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

+ +

Gran Paradiso Alpha 3 は以下のプラットフォームで利用可能です:

+ + + +

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20070411/index.html b/files/ja/orphaned/devnews/20070411/index.html new file mode 100644 index 0000000000..17acb7aae1 --- /dev/null +++ b/files/ja/orphaned/devnews/20070411/index.html @@ -0,0 +1,8 @@ +--- +title: MDC 新規アカウント作成を一時無効化 +slug: DevNews/20070411 +tags: + - DevNews + - 'DevNews:General' +--- +

破壊行為が行われていることから、Mozilla Developer Center wiki への新規アカウント作成機能は一時的に無効化することになりました。現在、古いバージョンの MediaWiki を利用していることから、ボットからの防御策をとるのが難しくなっていますので、アップグレードが完了するまでの措置となります。この作業は、できる限り早く行えるように努力中です。失望される方もいらっしゃるでしょうし、また不便をおかけしますが、ご了承ください。

diff --git a/files/ja/orphaned/devnews/20070424/index.html b/files/ja/orphaned/devnews/20070424/index.html new file mode 100644 index 0000000000..3214e73517 --- /dev/null +++ b/files/ja/orphaned/devnews/20070424/index.html @@ -0,0 +1,11 @@ +--- +title: Mozilla Firefox 1.5 に何が起こっているのか? +slug: DevNews/20070424 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Mozilla は今年 5 月中旬までのみ Firefox 1.5 セキュリティと安定性のアップグレードを提供することをコミュニティにお知らせしたかったのです。私たちは全ての Firefox 1.5 ユーザに今日、http://getfirefox.com を訪れて Firefox の最新版をダウンロードすることを推奨します。期限が近くなるまで、私たちはアップデートを提供するつもりです。

+ +

私たちはより速く より安全なオンライン経験の提供に焦点をあてています。私たちのユーザ全てが Firefox 2.0 における新機能の利益を享受してほしいと思います。

diff --git a/files/ja/orphaned/devnews/20070427/index.html b/files/ja/orphaned/devnews/20070427/index.html new file mode 100644 index 0000000000..1896629ee1 --- /dev/null +++ b/files/ja/orphaned/devnews/20070427/index.html @@ -0,0 +1,19 @@ +--- +title: Gran Paradiso Alpha 4 がダウンロード可能に +slug: DevNews/20070427 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 4 は、次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Gran Paradiso Alpha 4 はテスト目的でのみ提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザは Gran Paradiso Alpha 4 を使うべきではありません。Gran Paradiso Alpha 4 のユーザインタフェースには目立った変更はありませんが、コアのレイアウトとレンダリングの改善点が数多くあります。

+ +

Gran Paradiso Alpha 4 は以下のプラットフォームで利用可能です:

+ + + +

このリリースのさらなる情報と既知の問題はリリースノート{{ 訳注("日本語訳") }}を参照してください。

diff --git a/files/ja/orphaned/devnews/20070501/index.html b/files/ja/orphaned/devnews/20070501/index.html new file mode 100644 index 0000000000..98b4dbb4ee --- /dev/null +++ b/files/ja/orphaned/devnews/20070501/index.html @@ -0,0 +1,16 @@ +--- +title: Mozilla Developer Center のアップグレードに向けたテストにご協力を +slug: DevNews/20070501 +tags: + - DevNews + - 'DevNews:General' +--- +

MediaWiki 1.9.3 へのアップグレードに向けた to-do リストに上がっていた全ての作業が完了し、重要な試験を行う時が来ました。試験サイト へ行き、今日中に、何も壊れているところが無いことを確認するための、閲覧、編集、そしてそれ以外のコンテンツに対する変更作業といった試験を行ってください。

+ +

特に、新規文書の追加や文書の編集が実際に可能かや、Nutch 検索 (検索ボックスや Special:Nutch 検索ページ) が正常かどうかを確認する必要があります。

+ +

このアップデートにおける最大の目標は、MediaWiki 1.9.3 にアップグレードすることです。そのほかの変更もいくつか行われていますが、それらについては現時点では特に緊急に確認が必要なものではありません。

+ +

このアップグレードを実行し、完了すれば、MDC wiki を編集するためのユーザアカウント作成を再有効化する予定です。試験のフィードバックに良好な答えが帰ってき次第、できる限り早くアップグレードを実行する予定です。

+ +

もし、懸念事項や何か問題がありましたら、Eric Shepherd までメールを送ってください。

diff --git a/files/ja/orphaned/devnews/20070502/index.html b/files/ja/orphaned/devnews/20070502/index.html new file mode 100644 index 0000000000..2452144c61 --- /dev/null +++ b/files/ja/orphaned/devnews/20070502/index.html @@ -0,0 +1,29 @@ +--- +title: 新しい Firefox と Thunderbird のプリリリースアナウンスメーリングリスト +slug: DevNews/20070502 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Mozilla では、アナウンスとフィードバック収集のためのいくつかのメーリングリスト (兼、ニュースグループ) が利用可能になったことをお知らせいたします。これらの新メーリングリストの主な目的は、オフィシャルリリースより前に修正されるべき、ウェブサイトにおける互換性や他のプロダクトの問題を特定する手助けになるような、幅広いテストのための調整を行うためのものです。

+ +

どうもありがとうございます。そして、テストを楽しんでください。

+ +

もし、RC やアルファといった Firefox や Thunderbird 早期リリースでの試験についてのお知らせに興味があるなら、プリリリースアナウンスリストに参加してください。

+ +

Firefox & Thunderbird プリリリースに関する案内は以下の3つのいずれかの方法で受け取ることができます。

+ + + +

また、同時に RC やアルファリリースに関するフィードバックを受けるためと議論のために、いくつかのフォーラムを作成しています。以下の 3 つのいくつかの方法でフィードバックを読んだり、共有できます。

+ + diff --git a/files/ja/orphaned/devnews/20070509/index.html b/files/ja/orphaned/devnews/20070509/index.html new file mode 100644 index 0000000000..411bec89f8 --- /dev/null +++ b/files/ja/orphaned/devnews/20070509/index.html @@ -0,0 +1,10 @@ +--- +title: 'Developer Day パリ: 2007年6月23日' +slug: DevNews/20070509 +tags: + - DevNews + - 'DevNews:General' +--- +

Mozilla プロジェクトアップデートミーティング でも何度か触れたように、3度目の Developer Day of 2007 をパリで、2007/07/23 に開く予定です。より詳細は、興味を持って参加するときのためのページもある wiki ページ を参照してください。また、他の Mozilla 開発者と議論したいなら トピックを提案するためのページ を、何かデモを行う場合 を参照してください。

+ +

Developer Days はマウンテンビューとボストンで 3 月に開催され、マウンテンビューで楽しめたのだから、パリでもどれだけ楽しいことが出来るかと考えています ! 開催場所はまだ確定していませんが、intra-muros (ダウンタウン) あたりになるでしょう。Xulfr.org コミュニティーや、Disruptive Innovations のような熱狂している連中のベテラン開発者、そしてヨーロッパでの Mozilla 開発の長い物語からエネルギーを受けて、すばらしいイベントの現場になるでしょう。 現地でお会いできるのを楽しみにしています !

diff --git a/files/ja/orphaned/devnews/20070512/index.html b/files/ja/orphaned/devnews/20070512/index.html new file mode 100644 index 0000000000..a4cb14c5d7 --- /dev/null +++ b/files/ja/orphaned/devnews/20070512/index.html @@ -0,0 +1,10 @@ +--- +title: Firefox Developer Conference 東京 2007年6月16日 +slug: DevNews/20070512 +tags: + - DevNews + - 'DevNews:General' +--- +

Mozilla Japan は、Firefox Developer Conference を 6/16 に東京で開きます。これはわれわれの Developer Days よりはより構造化されており、Firefox 開発経験者とともに、新しい開発者にも同様にためになるイベントになるでしょう。もし、何か発表したい拡張機能を開発している、もしくは Firefox アプリケーションプラットフォームで開発を始めるための勉強をやりたい場合、6/16 に東京へ、青山 TEPIA ホールへお集まりください。

+ +

イベント情報は、日本語 でも見ることができます。また、Mozilla Japan スタッフブログ へフィードバックとして、コメントをお送りください。

diff --git a/files/ja/orphaned/devnews/20070523-2/index.html b/files/ja/orphaned/devnews/20070523-2/index.html new file mode 100644 index 0000000000..d3353e3259 --- /dev/null +++ b/files/ja/orphaned/devnews/20070523-2/index.html @@ -0,0 +1,21 @@ +--- +title: Places によるブックマークが Firefox 3 alpha 5 で有効に +slug: DevNews/20070523-2 +tags: + - DevNews + - 'DevNews:General' +--- +

Firefox Places チームは、この月末に予定されている Firefox 3 Alpha 5 リリースに Places によるブックマーク実装を間に合わせるという大きな仕事を成し遂げました。そして、皆さんご存知のとおり、先週の trunk からブックマークの Places による実装が有効化されたことに興奮しています。もちろんこれからすべきことはまだたくさん残されていますが、これは非常に重要なマイルストーンとなるでしょう。

+ +

しかし、混乱や涙そして死の脅迫を防ぐためにも、いくつかの点を確実に確認してください。

+ + + +

Thanks!

+ +

Places チーム

diff --git a/files/ja/orphaned/devnews/20070523/index.html b/files/ja/orphaned/devnews/20070523/index.html new file mode 100644 index 0000000000..7689e0b4ff --- /dev/null +++ b/files/ja/orphaned/devnews/20070523/index.html @@ -0,0 +1,10 @@ +--- +title: Firefox 1.5.0.12rc2 と 2.0.0.4rc3 がベータチャンネルであなたの元へ +slug: DevNews/20070523 +tags: + - DevNews + - 'DevNews:General' +--- +

5 月 23 日の PDT 午後 4 時に、Firefox 1.5.0.x と 2.0.0.x ユーザで "beta" アップデートチャンネル を利用しているユーザは、それぞれ Firefox 1.5.0.12rc2 と 2.0.0.4rc3 へのアップデートを受け取るでしょう。

+ +

リリース候補版へのフィードバックは、mozilla.feedback.firefox.prerelease ニュースグループへお願いします。

diff --git a/files/ja/orphaned/devnews/20070529-2/index.html b/files/ja/orphaned/devnews/20070529-2/index.html new file mode 100644 index 0000000000..d4306e8adb --- /dev/null +++ b/files/ja/orphaned/devnews/20070529-2/index.html @@ -0,0 +1,10 @@ +--- +title: Alpha 5 が凍結 +slug: DevNews/20070529-2 +tags: + - DevNews + - 'DevNews:General' +--- +

私たちは明日(5月30日)の夜 (午後11:59 PDT) に Gran Paradiso Alpha 5 に向けた凍結を行う予定です。現在投稿されているスケジュールは凍結を今夜に予定していますが、凍結前の最終更新として Gecko 1.9 会議に対応するため、私たちはアルファ版を水曜日に移動しました。

+ +

私はこの凍結とリリース過程を調整し、ブロッカーバグと遅いランドの主要ドライバーを務める予定です。 質問か興味がありましたら、私にメールするか IRCで確認してください。

diff --git a/files/ja/orphaned/devnews/20070529/index.html b/files/ja/orphaned/devnews/20070529/index.html new file mode 100644 index 0000000000..f2a28f158f --- /dev/null +++ b/files/ja/orphaned/devnews/20070529/index.html @@ -0,0 +1,9 @@ +--- +title: まもなく Firefox 1.5.0.12 と Firefox 2.0.0.4 が利用可能に +slug: DevNews/20070529 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

5 月 30 日の水曜日に自動更新を通して私たちは Firefox 1.5.0.12 と Firefox 2.0.0.4 の配布を開始するつもりです。これらはユーザの高速で安全なオンライン体験を約束するためにブラウザの標準的な安定性とセキュリティの更新を含んでいます。私たちはこれがバージョン 1.5 製品群の安定性およびセキュリティの最終リリースになると予想しています。Firefox 1.5.0.12 はユーザが Firefox 2 への移行できるようにする自動更新機構を含んでいます。アップグレードの案内は 2, 3 週間以内に有効になるでしょう。私たちは、検索およびコミュニケーション、オンラインセキュリティをより効果的にする機能を得るために、今すぐ www.getfirefox.com から Firefox 2 をダウンロードすることを強く推奨します。

diff --git a/files/ja/orphaned/devnews/20070530-02/index.html b/files/ja/orphaned/devnews/20070530-02/index.html new file mode 100644 index 0000000000..92e60bb955 --- /dev/null +++ b/files/ja/orphaned/devnews/20070530-02/index.html @@ -0,0 +1,19 @@ +--- +title: Firefox 2.0.0.4 と Firefox 1.5.0.12 セキュリティ及び安定性アップデート +slug: DevNews/20070530-02 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Firefox 1.5.0.12 と Firefox 2.0.0.4 が http://getfirefox.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Firefox ユーザに最新のリリースへアップグレードすることを強く勧めます。

+ +
注意: 私たちは これが Firefox 1.5.0.x シリーズ最後のリリースになると予想します。通常 Mozilla はメジャーリリース後 6カ月間、前のリリースのサポートを継続します。 以前 Mozilla はアップデート機能の最新の変更に対応するため、1.5.0.x シリーズに予定されていたを延長しました。Firefox 1.5.0.12 は http://www.mozilla.com/firefox/all-older.html からダウンロードできますが、全てのユーザに Firefox 2 へアップグレードすることを勧めます。
+ +

もし Firefox 1.5.0.x か Firefox 2.0.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。

+ +

変更点や更なる詳細については Firefox 1.5.0.12 リリースノートと Firefox 2.0.0.4 リリースノートで確認してください。

+ +

今後数週間に 1.5.0.12 ユーザは Mozilla から Firefox 2 への「メジャーアップデート」の案内を通知するメッセージを提示されるでしょう。ユーザの確認により、ユーザのブラウザは 1.5.0.12 から 2.0.0.4 にアップグレードされます。

diff --git a/files/ja/orphaned/devnews/20070530/index.html b/files/ja/orphaned/devnews/20070530/index.html new file mode 100644 index 0000000000..133dd307c1 --- /dev/null +++ b/files/ja/orphaned/devnews/20070530/index.html @@ -0,0 +1,14 @@ +--- +title: アドオンの更新 +slug: DevNews/20070530 +tags: + - DevNews + - 'DevNews:Security' +--- +

Firefox 用に何千もの信じられないほど多様なアドオンがあります。サードパーティ開発者による、この背極的な参加は多くのユーザのブラウジングを高めています。アドオンは Firefox の重要な部分であるため、Mozilla は開発者が安全なアドオンを作成できるように努力しています。今週上で配布されている更新についての懸念が浮上しました。(HTTPS の代わりに) HTTP を使った通信は攻撃者によって悪意のあるサーバにリダイレクトされ、潜在的に悪意のあるコードをインストールすることが可能です。

+ +

Mozilla Add-ons サイトでホストされているアドオンは HTTPS 上で提供され、ハッシュで検証されています。これらのアドオンはこの攻撃に対して脆弱ではありません。私たちは拡張開発者に上記の攻撃を防ぐため、更新に SSL を必須とすることを強く推奨します。

+ +

Firefox 3 のために、私たちはアドオン開発者が安全では無い経路を使うことを防ぐ方法を考え、普遍的にアドオンの更新を改良する方法を調査しています。考えられる多くの選択肢があり、その全てが安全な拡張を簡単に書けるように設計されています。この議論に参加したいなら news://news.mozilla.org/mozilla.dev.apps.firefox の Firefox 開発者ディスカッショングループに参加してください。

+ +

開発者のための更なる情報はここで手に入ります http://developer.mozilla.org/en/docs...ests#updateURL

diff --git a/files/ja/orphaned/devnews/20070604/index.html b/files/ja/orphaned/devnews/20070604/index.html new file mode 100644 index 0000000000..d7e7310994 --- /dev/null +++ b/files/ja/orphaned/devnews/20070604/index.html @@ -0,0 +1,13 @@ +--- +title: Thunderbird 1.5.0.12 セキュリティ及び安定性アップデート +slug: DevNews/20070604 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性及びセキュリティアップデート活動の一環として、Thunderbird 1.5.0.12 が Thunderbird アーカイブ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。 セキュリティ修正のため、全ての Thunderbird ユーザに最新のリリースへアップグレードすることを強く勧めます。

+ +
注意: メールクライアントの 最新版 は Thunderbird 2 で、最新版が http://getthunderbird.com からダウンロードできます。
+ +

もし Thunderbird 1.5.0.x が既にあるなら、24 時間から 48 時間以内に自動更新の通知を受け取るでしょう。このアップデートは、今日の午後から、「ヘルプ」メニューの「更新を確認」を選択して手動で適用することもできます。 変更点や更なる詳細については Thunderbird 1.5.0.12 リリースノート で確認してください。

diff --git a/files/ja/orphaned/devnews/20070606-2/index.html b/files/ja/orphaned/devnews/20070606-2/index.html new file mode 100644 index 0000000000..65ad327e49 --- /dev/null +++ b/files/ja/orphaned/devnews/20070606-2/index.html @@ -0,0 +1,46 @@ +--- +title: Firefox 1.5 から 2.0 へのメジャーアップデート公表 +slug: DevNews/20070606-2 +tags: + - DevNews + - 'DevNews:Releases' +--- +

以前 Mozilla は Firefox 1.5 製品シリーズで Firefox 1.5.0.12 が最終リリースになるだろう とおしらせしました。ユーザが サポートされている Firefox の最新リリースへ移行するのを助けるため、メジャーアップデート機能が開発されました。

+ +

今週 Mozilla は 自動アップデートサービス (AUS) “beta” チャンネルのユーザにメジャーアップデートのテストを開始し、2 週間以内に“release”チャンネルの一般ユーザに提供するでしょう。

+ +

Mozilla は 6月7日(木)午後 (PDT) からメジャーアップデートのおしらせを提示しはじめるでしょう。“beta”チャンネルの Firefox 1.5.0.12 ユーザは Firefox 2.0.0.4 へのメジャーアップデートの提案を受けるでしょう。以下のダイアログボックスがユーザに提示されるでしょう。

+ +

http://www.mozilla.org/projects/fire...update/MU1.png

+ +

これはどのように動作するか:

+ + + +

ここにメジャーアップデートの流れのスクリーンショットが少しあります:

+ +

http://www.mozilla.org/projects/fire...update/MU2.png

+ +

http://www.mozilla.org/projects/fire...update/MU3.png

+ +

http://www.mozilla.org/projects/fire...update/MU4.png

+ +

http://www.mozilla.org/projects/fire...update/MU5.png

+ +

最終的にユーザは以下のアップデートに成功したページを見ることになるでしょう。

+ +

http://www.mozilla.org/projects/fire...update/MU6.png

+ +

私たちは Firefox プレリリースフィードバックメーリングリスト/ニューズグループへの このアップデートのテストに対する どんなフィードバックや問題にも感謝します。

+ + + +

Thanks.

diff --git a/files/ja/orphaned/devnews/20070606/index.html b/files/ja/orphaned/devnews/20070606/index.html new file mode 100644 index 0000000000..fc1d86d98d --- /dev/null +++ b/files/ja/orphaned/devnews/20070606/index.html @@ -0,0 +1,28 @@ +--- +title: Firefox 3.0 Alpha 5 がダウンロード可能に +slug: DevNews/20070606 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Firefox 3.0 (別名 Gran Paradiso) Alpha 5 は、Firefox 3 と 次世代の Mozilla レイアウトエンジンである Gecko 1.9 の開発者向け初期マイルストーンです。Firefox 3.0 Alpha 5 はテスト目的に限って提供されており、ウェブアプリケーション開発者と私達のテストコミュニティを対象としています。 現在の Mozilla Firefox ユーザはアルファリリースを使うべきではありません。Firefox 3.0 Alpha 5 に含まれる変更のいくつかは以下の通りです。

+ + + +

Gran Paradiso Alpha 5 は以下のプラットフォームで利用可能です:

+ + + +

このリリースのさらなる情報と既知の問題はリリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20070626/index.html b/files/ja/orphaned/devnews/20070626/index.html new file mode 100644 index 0000000000..e7e0afdfde --- /dev/null +++ b/files/ja/orphaned/devnews/20070626/index.html @@ -0,0 +1,10 @@ +--- +title: 'Alpha 6 が 2007/06/27 23:59 PDT にフリーズ' +slug: DevNews/20070626 +tags: + - DevNews + - 'DevNews:General' +--- +

Gran Paradiso Alpha 6 は、明日 2007/06/27 の深夜 PM 11:59 PDT にフリーズされます。過去のフリーズスケジュールのポストでは今晩となっておりましたが、Alpha のフリーズは Gecko 1.9 ミーティングによる最後のアップデートを待つために水曜日に移動しました。

+ +

これらのフリーズとリリースプロセスはわたし  が調整しており、ブロッカーや遅れについてキードライバーとして対応しています。もし、何か質問や意見がありましたら、メールもしくは IRC にてご連絡ください。

diff --git a/files/ja/orphaned/devnews/20070628/index.html b/files/ja/orphaned/devnews/20070628/index.html new file mode 100644 index 0000000000..d59c4f41ab --- /dev/null +++ b/files/ja/orphaned/devnews/20070628/index.html @@ -0,0 +1,8 @@ +--- +title: Firefox 1.5.0.12 から 2.0.0.4 へのメジャーアップデート公開 +slug: DevNews/20070628 +tags: + - DevNews + - 'DevNews:Releases' +--- +

過去にアナウンス しました (日本語版は Firefox 1.5 から 2.0 へのメジャーアップデート公表) ように、Firefox 1.5.0.12 ユーザは Firefox 2.0.0.4 へのメジャーアップデートの通知を受け取ることになります。メジャーアップデートは今日の午後 (2007/06/28 PDT) から公開されます。

diff --git a/files/ja/orphaned/devnews/20070702/index.html b/files/ja/orphaned/devnews/20070702/index.html new file mode 100644 index 0000000000..e7e8b67aa1 --- /dev/null +++ b/files/ja/orphaned/devnews/20070702/index.html @@ -0,0 +1,29 @@ +--- +title: Firefox 3.0 Alpha 6 がダウンロード可能に +slug: DevNews/20070702 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Firefox 3.0 (コードネーム Gran Paradiso) Alpha 6 は Firefox 3 や Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Firefox 3.0 Alpha 6 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Firefox 3.0 Apha 6 に含まれる変更点は次のリストです。

+ + + +

Gran Paradiso Alpha 6 は次のプラットフォームで利用可能です

+ + + +

追加情報やこのリリースでの既知の障害については リリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20070710/index.html b/files/ja/orphaned/devnews/20070710/index.html new file mode 100644 index 0000000000..b800335058 --- /dev/null +++ b/files/ja/orphaned/devnews/20070710/index.html @@ -0,0 +1,12 @@ +--- +title: パッチをチェックインするには +slug: DevNews/20070710 +tags: + - DevNews + - 'DevNews:General' +--- +

あなたが、適切にレビューを受け、適切に承認された、Mozilla にチェックイン可能な状態のパッチを書いたけれど、自分自身ではコミットする権限が無い場合、Bugzilla の該当するバグにcheckin-needed キーワードを追加してください。パッチに関する特別な要請 (ブランチにもチェックインが必要、など) に関しては、ステータスホワイトボードへ書き込んでください。

+ +

これにより、check-in 担当者が見回って、あなたのパッチを 1 ～ 2 週間の間にコミットするでしょう。もし、あなたが check-in 担当者の一人であれば、このような状態になっているパッチには気軽に対処してください。

+ +

また、checkin-needed キーワードが追加されるべきであるのに追加されていないパッチがあれば追加し、パッチ作者に次の時には自分でキーワードを追加すべきであることを知らせてください。

diff --git a/files/ja/orphaned/devnews/20070717/index.html b/files/ja/orphaned/devnews/20070717/index.html new file mode 100644 index 0000000000..cdfe1346a7 --- /dev/null +++ b/files/ja/orphaned/devnews/20070717/index.html @@ -0,0 +1,8 @@ +--- +title: –disable-places と –disable-places-bookmarks の configure フラグが廃止 +slug: DevNews/20070717 +tags: + - DevNews + - 'DevNews:General' +--- +

ビルド設定 (configuration) スイッチ  を利用したビルドを行っている方への重要なお知らせです。{{ Bug(386392) }} へのパッチが --disable-places と --disable-places-bookmarks の configure フラグの実装を廃止し、今日の早い時間以降にリリースされた Firefox ビルド環境で利用できなくなりました。--disable-places フラグはブラウザでないアプリケーションのためにまだ有効ですが、--disable-places-bookmarks は完全に取り除かれ、ビルドシステムによって無視されます。

diff --git a/files/ja/orphaned/devnews/20070718/index.html b/files/ja/orphaned/devnews/20070718/index.html new file mode 100644 index 0000000000..cae751ec55 --- /dev/null +++ b/files/ja/orphaned/devnews/20070718/index.html @@ -0,0 +1,17 @@ +--- +title: Firefox 2.0.0.5 セキュリティアップデート +slug: DevNews/20070718 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.5 が http://getfirefox.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Firefox ユーザへ最新リリースへのアップグレードを強く勧めます。

+ +

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知がくるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.5 リリースノートでご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/orphaned/devnews/20070719/index.html b/files/ja/orphaned/devnews/20070719/index.html new file mode 100644 index 0000000000..ac4d77d6ef --- /dev/null +++ b/files/ja/orphaned/devnews/20070719/index.html @@ -0,0 +1,17 @@ +--- +title: Thunderbird 2.0.0.5 セキュリティアップデート +slug: DevNews/20070719 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.5 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

+ +

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Thunderbird 2.0.0.5 リリースノートをご覧ください。

+ +

Thunderbird 2.0.0.5 で解決されたセキュリティ脆弱性は Thunderbird 1.5.0.x ユーザには影響しませんので、Thunderbird 1.5.0.x シリーズのユーザの方はアップデートの必要はありません。

diff --git a/files/ja/orphaned/devnews/20070730/index.html b/files/ja/orphaned/devnews/20070730/index.html new file mode 100644 index 0000000000..7422183d12 --- /dev/null +++ b/files/ja/orphaned/devnews/20070730/index.html @@ -0,0 +1,19 @@ +--- +title: Firefox 2.0.0.6 セキュリティアップデート +slug: DevNews/20070730 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.6 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正であるため、全ての Firefox ユーザに最新リリースへのアップグレードを強く勧めます。

+ +

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.6 リリースノートをご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

+ +

 

diff --git a/files/ja/orphaned/devnews/20070801/index.html b/files/ja/orphaned/devnews/20070801/index.html new file mode 100644 index 0000000000..507c907537 --- /dev/null +++ b/files/ja/orphaned/devnews/20070801/index.html @@ -0,0 +1,17 @@ +--- +title: Thunderbird 2.0.0.6 セキュリティアップデート +slug: DevNews/20070801 +tags: + - DevNews + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.6 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

+ +

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Thunderbird 2.0.0.6 リリースノートをご覧ください。

+ +

- Thunderbird チーム

diff --git a/files/ja/orphaned/devnews/20070803/index.html b/files/ja/orphaned/devnews/20070803/index.html new file mode 100644 index 0000000000..99df0ce693 --- /dev/null +++ b/files/ja/orphaned/devnews/20070803/index.html @@ -0,0 +1,42 @@ +--- +title: Gran Paradiso Alpha 7 がダウンロード可能に +slug: DevNews/20070803 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 7 は Firefox 3 と、Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Gran Paradiso Alpha 7 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Gran Paradiso Alpha 7 に含まれる変更点のいくつかは以下の通りです。

+ + + +

Gran Paradiso Alpha 7 は次のプラットフォームで利用可能です

+ + + +

追加情報やこのリリースでの既知の問題については リリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20070808/index.html b/files/ja/orphaned/devnews/20070808/index.html new file mode 100644 index 0000000000..46ddb17a32 --- /dev/null +++ b/files/ja/orphaned/devnews/20070808/index.html @@ -0,0 +1,8 @@ +--- +title: wiki.mozilla.org がアップデートされ、１年の遅れを取り戻す +slug: DevNews/20070808 +tags: + - DevNews + - 'DevNews:General' +--- +

直近の計画されていた Mozilla システムダウンタイム の間に、wiki.mozilla.org で動いているソフトウェアが MediaWiki 1.6.8 から 1.10.1 へ、1 年間に開発された分を飛び越えてアップグレードされました。このアップグレードにより、悪意の投稿から記事を守るためのよりよいツールを含む いくつかの新機能 が追加されました。

diff --git a/files/ja/orphaned/devnews/20070910/index.html b/files/ja/orphaned/devnews/20070910/index.html new file mode 100644 index 0000000000..2a59776361 --- /dev/null +++ b/files/ja/orphaned/devnews/20070910/index.html @@ -0,0 +1,11 @@ +--- +title: Firefox trunk の M8 のための freeze は少し延長されます +slug: DevNews/20070910 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Firefox trunk は最後の Gran Paradiso M8 blocker が解決されるまで freeze のままおかれます。この延長期間、Gecko 1.9/Firefox 3 のドライバーは 承認された要望 に優先順位をつけるために毎日会合をもち、高い効果と低いリスクを備えたパッチのみを受け入れる予定です。

+ +

これらの最終のバグは早めに片付けられるものと考えており、最終のリリースが行われた後、ツリーは再開されます。それまでしばらくおまちください。

diff --git a/files/ja/orphaned/devnews/20070913/index.html b/files/ja/orphaned/devnews/20070913/index.html new file mode 100644 index 0000000000..f41a2254a7 --- /dev/null +++ b/files/ja/orphaned/devnews/20070913/index.html @@ -0,0 +1,19 @@ +--- +title: "Firefox trunk の freeze が解除されました (ただし closed のままです\_!)" +slug: DevNews/20070913 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Firefox trunk は、今日 freeze 解除されましたが、すぐに {{ Bug(396064) }} にあるパフォーマンス上のリグレッションにより閉じられました。

+ +

このリグレッションの原因が特定され、修正されれば、ツリーは再開されるでしょう。これは orange レベル であり、次の条件を満たす必要があります。

+ +
    +
  1. approval1.9+ を必要としない、blocking1.9+ もしくは blocking-firefox3+ が付いているバグに対するパッチのチェックイン
    2. +
  2. Firefox (browser/ と toolkit/ を含む) に影響するそのほか全てのパッチのチェックインは 該当するドライバー による approval1.9+ の付与が必要
    3. +
  3. 通常と同じく、Firefox に影響しない通常のレビュー要件を満たすパッチのチェックインはツリーが開いている限り可能
    4. +
+ +

関係者の方で必要があれば、dev.planning ニュースグループもしくは IRC #granparadiso にてツリーの扱いについて問い合わせてください

diff --git a/files/ja/orphaned/devnews/20070918/index.html b/files/ja/orphaned/devnews/20070918/index.html new file mode 100644 index 0000000000..36fbe33798 --- /dev/null +++ b/files/ja/orphaned/devnews/20070918/index.html @@ -0,0 +1,18 @@ +--- +title: Firefox 2.0.0.7 セキュリティーアップデート +slug: DevNews/20070918 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' + - 'DevNews:Security' +--- +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.7 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正であるため、全ての Firefox ユーザに最新リリースへのアップグレードを強く勧めます。

+ +

既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.7 リリースノートをご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/orphaned/devnews/20070920/index.html b/files/ja/orphaned/devnews/20070920/index.html new file mode 100644 index 0000000000..1fc8dab94d --- /dev/null +++ b/files/ja/orphaned/devnews/20070920/index.html @@ -0,0 +1,35 @@ +--- +title: Gran Paradiso Alpha 8 がダウンロード可能に +slug: DevNews/20070920 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Gran Paradiso Alpha 8 は Firefox 3 と、Mozilla の次期レイアウトエンジンである Gecko 1.9 の開発者向け早期マイルストーンリリースです。Gran Paradiso Alpha 7 は テスト目的でのみ 提供されており、ウェブアプリケーション開発者やわれわれのテストコミュニティーをターゲットにしています。現在の Mozilla Firefox ユーザはアルファリリースを 利用するべきではありません。Gran Paradiso Alpha 7 に含まれる変更点のいくつかは以下の通りです。

+ + + +


+ Gran Paradiso Alpha 8 は以下のプラットフォームで利用可能です

+ + + +

追加情報やこのリリースでの既知の問題については リリースノートを参照してください。

diff --git a/files/ja/orphaned/devnews/20071005/index.html b/files/ja/orphaned/devnews/20071005/index.html new file mode 100644 index 0000000000..c36e6547b6 --- /dev/null +++ b/files/ja/orphaned/devnews/20071005/index.html @@ -0,0 +1,18 @@ +--- +title: "インドで開催される FOSS.IN であいましょう\_!" +slug: DevNews/20071005 +tags: + - DevNews + - 'DevNews:General' +--- +

Mozilla は、インドにおいて最大のフリー & オープンソースイベントである FOSS.IN と共同でプロジェクトデイを 12 月の最初の週にバンガロールで開催します。

+ +

この日を成功に導くために皆さんの協力をお待ちしております。助けが必要な部分は

+ + + +

何か考えがあるなら教えてください。FOSS.IN の日にさまざまなコミュニティーメンバーが参加してもらえることを本当に希望しています。

diff --git a/files/ja/orphaned/devnews/20071008/index.html b/files/ja/orphaned/devnews/20071008/index.html new file mode 100644 index 0000000000..57e4e94c7b --- /dev/null +++ b/files/ja/orphaned/devnews/20071008/index.html @@ -0,0 +1,31 @@ +--- +title: blocker バグに注目せよ +slug: DevNews/20071008 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

未解決の blocker バグの数は、マイルストーンや最終的なリリースまでにどの程度の作業が必要かの見積もりに使えます。バグを "Gecko 1.9" や "Firefox 3" などのように分割された複雑なラベル付けを行っているために、Bugzilla でこれらの数を求めるのは面倒です。Mike Conner によって作成されたいくつかの保存された検索 (あなたの Bugzilla の設定ページで "保存された検索" (saved searches) 画面から、フッタ追加してください) が利用できます。

+ + + +

興味がある人向けに、M9 のみについては次のようになります。

+ + + +

これらの検索から、次のことが分かります。(元記事が書かれた時点に置いて)

+ + + +

これらの数をモニタリングすることで、次のマイルストーンや最終の製品リリースまでにどのような作業が必要かを知ることができます。これらを簡単に行うために、Dietrich Ayala さん作の Bugzilla 検索用のマイクロサマリージェネレーター が利用できます。

diff --git a/files/ja/orphaned/devnews/20071012/index.html b/files/ja/orphaned/devnews/20071012/index.html new file mode 100644 index 0000000000..5993e769d0 --- /dev/null +++ b/files/ja/orphaned/devnews/20071012/index.html @@ -0,0 +1,12 @@ +--- +title: "Gran Paradiso M9 コードフリーズ日が変更に\_!" +slug: DevNews/20071012 +tags: + - DevNews + - 'DevNews:General' +--- +

今週の Firefox 3 と Gecko 1.9 のステータスミーティング での議論の通り、未解決の blocker バグ が多いことから Gran Paradiso M9 のコードフリーズ日が来週の水曜日から変更になりました。

+ +

新しいコードフリーズ日は来週の Gecko 1.9 ステータスミーティングで決定されますが、blocker バグの数次第で 10 月 24 日から 31 日の間のどこかになる予定です。その間、コードツリーは "orange" レベルにとどめられ (いつでも tinderbox を現在のチェックイン状態の確認に利用してください) blocker バグへのパッチやドライバーがチェックインを許可したパッチのみを投入できます。全ての貢献者とドライバーは、問題を最小限に抑えるために、チェックインする前にパッチのメモリリークとレグレッションのテストを行い、投入後はその影響を必ず確認してください。

+ +

コードフリーズ日が決定されれば、Mozilla Developer News と mozilla.developer.planning ニュースグループでアナウンスされます。このとき、ツリーが "red" になる日、つまりレグレッションのリスクをできる限り減らすため、全てのチェックインにドライバーの最終的な許可が必要になる日を同時にお知らせする予定です。

diff --git a/files/ja/orphaned/devnews/20071018/index.html b/files/ja/orphaned/devnews/20071018/index.html new file mode 100644 index 0000000000..c686644991 --- /dev/null +++ b/files/ja/orphaned/devnews/20071018/index.html @@ -0,0 +1,14 @@ +--- +title: Firefox 2.0.0.8 セキュリティーアップデート +slug: DevNews/20071018 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.8 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.8 リリースノートをご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/orphaned/devnews/20071101/index.html b/files/ja/orphaned/devnews/20071101/index.html new file mode 100644 index 0000000000..e770cdc8c3 --- /dev/null +++ b/files/ja/orphaned/devnews/20071101/index.html @@ -0,0 +1,15 @@ +--- +title: Firefox 2.0.0.9 安定性のためのアップデート +slug: DevNews/20071101 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.9 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.9 リリースノートをご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/orphaned/devnews/20071115/index.html b/files/ja/orphaned/devnews/20071115/index.html new file mode 100644 index 0000000000..030ff36208 --- /dev/null +++ b/files/ja/orphaned/devnews/20071115/index.html @@ -0,0 +1,16 @@ +--- +title: Thunderbird 2.0.0.9 セキュリティーおよび安定性のためのアップデート +slug: DevNews/20071115 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.9 が http://getthunderbird.com/ から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

+ +

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは今日午後から「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Thunderbird 2.0.0.9 リリースノートをご覧ください。

+ +

(注: 前のオフィシャルリリースは 2.0.0.6 でした。いくつかのバージョン番号は、Firefox とあわせるために飛ばされました。)

diff --git a/files/ja/orphaned/devnews/20071126/index.html b/files/ja/orphaned/devnews/20071126/index.html new file mode 100644 index 0000000000..b64b1f56c8 --- /dev/null +++ b/files/ja/orphaned/devnews/20071126/index.html @@ -0,0 +1,64 @@ +--- +title: 'about:mozilla - 2007年11月26日号' +slug: DevNews/20071126 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

モジラの書

+ +

about:mozilla の創刊号へようこそ。これは、Mozilla プロジェクトのコミニュティニュースレターです。毎週月曜日にプロジェクトの至る所からの最新のニュース、情報、アナウンスをお届けします。 このニュースレターを読めば、今週のミーティングとイベントの予定を知ることができます。また で起こっていることを把握する助けにもなるでしょう。

+ +

コミュニティのメンバーには、about:mozilla のためにニュースのネタを提供するように勧めています。もし、このニュースレターに含めるべきだと思うものがあれば、それを mozilla-news-submissions@mozilla.org に送ってください。質問やコメントがある場合は、news-editor@mozilla.org で編集者に連絡することができます。フィードバックは、常に歓迎しますし、それに対して感謝します。

+ +

Mozilla Foundation が直接的な寄付プログラムを開始

+ +

Mozilla Foundation へ寄付するとき、4つ の選ばれたプロジェクト（Bugzilla、SeaMonkey、Camino、障害がある人々のための Mozilla アクセシビリティ）の中からどれかひとつに対して直接寄付できるという選択肢ができました。従来の、プロジェクトを限定しない 寄付 をすることも同様に可能です。 Mozilla Foundation は、あなたの選択を記録し、いくらのお金が各プロジェクトに寄付されているかを把握しています。その結果は、各プロジェクトの責任のある人々に働きかけ、価値のあるプロジェクトに関連する率先件を出すことにつながります。それに対しては、それらの指定された寄付を使って資金が出されることになります。

+ +

このプログラムが開始されたことを支援する特別の奨励として、Mozilla Foundation は、今から2007年末までにあなたが指定した各プロジェクトへの全ての寄付に対してそれぞれ 2 倍の金額（ただし、上限 10,000 ドル）を支払います。詳細は、Frank Hecker の ブログ投稿 を参照してください。

+ +

Firefox 3 Beta 1 が現在ダウンロード可能です

+ +

Firefox 3 Beta 1 が 現在ダウンロード可能 です。 これは 9 番目の開発マイルストーンであり、Firefox 3 として予定されているプラットフォームのための多くの新しい機能と変更によってもたらされるコア機能のテストに焦点を当てています。Firefox 3 の計画の進行状況については、Firefox 3 Planning Center、mozilla.dev.planning、irc.mozilla.org の #granparadiso で得ることができます。

+ +

Proto：ベータ段階の新しい Mac テーマ

+ +

もし、あなたが Mac ユーザならば、最初に その Beta版 を起動したときに、Proto を入手するように勧められる画面を見るでしょう。Proto は、OS X のための 新しい Firefox 3 のテーマのプロトタイプです。 Proto は新しい Mac テーマの作業の最初の段階であり、よりプラットフォームのネイティブな見た目と感じに近づけています。第二段階として、 他のアプリケーションと Firefox の違いとなるクロスプラットフォームの形状とコントロールセットを含めるように、Proto を改変する予定です。最終目標は、OS X のネイティブさが感じられ、もちろん、Firefox さも感じられるブラウザとなることです。Proto アドオンをインストールしたならば、テーマの新しいバージョンが利用可能になったときに更新通知が受けられます。Proto についてのフィードバックをしたいなら、 Alex Faaborg の ブログ投稿にコメントしてください。現在のバグをレポートしたいなら、{{ Bug(397723) }} にコメントを追加してください。

+ +

メモリリークと Mozilla

+ +

Stuart Parmenter が、メモリの動作に関する Mozilla の「新しい」焦点についてのいくつかの少し誤った解説の投稿への反応として、素晴らしいブログ投稿 を書きました。その投稿では、メモリの動作は常にプロジェクトの中でいかに優先度を持っていたかについて話をしています。「1998 年に私がプロジェクトを稼働させたときから、私たちは、メモリのフットプリントを小さく維持し、リークを最小に維持することに常に焦点を当ててきました。各リリースの開発サイクルの早期から、私たちはメモリとパフォーマンスを目標に設定してきたのです。私たちは常に越えるべき目標を以前のリリースに設定しています。」これは、プロジェクト、直面した挑戦、そして、いくつかの私たちが用いている戦略について話している、非常に読む価値のあるものです。

+ +

Extend Firefox 2 add-on contest

+ +

みなさんは、Firefox の最も良い点の一つが、やりたいことをやりたいようにカスタマイズできることであることを知っています。アドオンはこの魔術の中心ですが、私たちは、2回目の アドオン開発コンテストを開催します。

+ +

コンテストは、12月31日まで行われます。そして、今年の 3 つの大賞と 12 の入賞が選ばれます。提出作品は、ユーザエクスペリエンス、創造性、開かれた標準の使用によって評価されます。ですから、今こそ、最大限の努力をし、ハッキングするべき時なのです。コンテスト、評価、賞、応募方法についての詳細は、Extend Firefox の Web サイト を参照してください。

+ +

開発カレンダー

+ +

11月26日月曜日

+ + + +

11月27日火曜日

+ + + +

11月28日水曜日

+ + + +

このニュースレターを Email で受け取るには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20071203/index.html b/files/ja/orphaned/devnews/20071203/index.html new file mode 100644 index 0000000000..7cce6f3326 --- /dev/null +++ b/files/ja/orphaned/devnews/20071203/index.html @@ -0,0 +1,75 @@ +--- +title: 'about:mozilla - コードフリーズ、マーケットシェア、Canvas 3D などなど' +slug: DevNews/20071203 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

Firefox 3 Beta 2 のためのコードフリーズ

+ +

Firefox 3 Beta 2 のためのコードフリーズが、現在のところ、明日の 12月4日 火曜日に予定されています。目標は、クリスマスより前に Beta 2 をリリースするために、金曜日までにコードを完全なものにすることです。

+ +

Friends of the Tree～11月26日のミーティングから～

+ +

今週の Friends of the Tree は、Reed Loden によって選ばれました。彼は、「私は、長年存在していた GTK ウィジットのバグを修正するという素晴らしい仕事をした Michael Ventnor と Teune van Steeg を Friends of the Tree に選びたいと思います。彼らの仕事によって、Linux ユーザにとっての Firefox 3 は、今までの中での最高のリリースになるでしょう。」と書いています。もし、Friends of the Tree に選びたい人々がいるなら、Asa Dotzler に E メールを送ってください。

+ +

Firefox 2.0.0.10 と 2.0.0.11 がリリースされました

+ +

過去の週で、1 つではなく、2 つ の Firefox がリリースがされたことはありませんでした。2.0.0.10 は、月曜日にリリースされ、3 つのセキュリティの問題が修正されました。2.0.0.11 は、たった 4 日後の金曜日にリリースされ、2.0.0.10 で生じたリグレッションが修正されました。修正の速度が好転したことに対して、驚きと心を込めた祝福を、関係したみなさん（特に、Build 及び QA チーム）に送りたいと思います。

+ +

 

+ +

Canvas 3D: GL のパワー、 ウェブスタイル

+ +

数か月間以上をかけて、Vlad Vukicevic が、Canvas のための OpenGL コンテキストで見ることができるものをプレビューする Firefox 3 のための拡張を作成しました。 これは、Firefox 3 Beta 1（もしくは、それ以降のナイトリー、ただし、ナイトリーと互換性があるかどうかは保証できません）で実行する必要があります。 （Windows、MacOS X x86、Linux x86 専用）拡張をインストールしたら、Web コンテンツが 3D canvas コンテキストにアクセスすることを許可するために、アドオンマネージャを開き、 Canvas 3D Extension の設定を選択し、“Enable 3D canvas in web content” をチェックするようにしてください。 この機能を動作させるためには、（GL ES 1.1 コンテキストのために）デスクトップ OpenGL 1.5 をフル実装しており、オプションで、（2.0 コンテキストのために）OpenGL 2.0 が利用可能になっていなければなりません。（多くの）さらなる情報は、 Vlad のブログ投稿を参照してください。

+ +

Mozilla と Firefox のマーケットシェア

+ +

Mozilla Corporation の Chief Operating Officer である John Lilly が、我々が調べている、人々がどのように Web を利用しているかを示すデータについての、一連のブログ投稿の最初を書いています。彼は、なぜ、Mozilla が、インターネットのオープン性と参加性を保持するということを主たる目的とする公共的利益のための努力とつじつまが合わないようにときどき思える、マーケットシェアのことを気にしているのかを説明しています。また、John は、我々が、42千万を超えるアクティブデイリーユーザ量である世界中に少なくとも 125,000,000 の Firefox ユーザがいると信じていることを明かしています。それは、Firefox のアクティブデイリーユーザが、過去年の 2 倍になったことを示すものです。この投稿は、興味深く、非常に有益なものです。

+ +

Joseph Smarr の high performance JavaScript

+ +

先月、Plaxo の Chief Platform Architect である、Joseph Smarr が、High Performance JavaScript: Why Everything You’ve Been Taught is Wrong（高パフォーマンスな JavaScript:なぜあなたが教わったことは間違っているのか） について話をするために、Mozilla オフィスに来ました。Joseph の プレゼンテーションのビデオが現在視聴可能です。プレゼンテーションのスライドもオンラインに用意されています。ですから、チェックしてみてください。

+ +

拡張開発についての 101（入門） ビデオ

+ +

Mike Beltzner が拡張についてのベストプラクティスとデザインパターンについて説明したテクニカルセッションを見逃しているのなら、それを オンライン で見ることが現在可能です。素晴らしい内容と質問を絶対にチェックしてください。

+ +

Mozilla Worldwide - 今後のイベント

+ +

世界規模での今後のイベントの早見表です。

+ + + +

開発カレンダー

+ +

12月3日月曜日

+ + + +

12月4日火曜日

+ + + +

12月5日水曜日

+ + diff --git a/files/ja/orphaned/devnews/20071210-02/index.html b/files/ja/orphaned/devnews/20071210-02/index.html new file mode 100644 index 0000000000..120b5858ca --- /dev/null +++ b/files/ja/orphaned/devnews/20071210-02/index.html @@ -0,0 +1,15 @@ +--- +title: Firefox 3 Beta 2 は 12 月下旬の予定 +slug: DevNews/20071210-02 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

本日 PM 11:10 PST 、ブランチ分けとタグ付けのために開発チームからビルドチームに管理が委譲され、Firefox 3 Beta 2 となる予定のビルドを構築およびテストする作業が開始されました。

+ +

いつものように、ビルドチームは一連のリリース候補版を作成し、それを品質保証チームがテストします。この活動に協力したければ、今週の金曜日 12/14 に行われる Firefox 3 Test Day にどなたでも参加できます。

+ +

テストが完了していないリリースの配布を制限するため、リリース候補版のダウンロードディレクトリへのリンクはすべてこの告知にリダイレクトされます。ユーザーの皆さんが注意と情熱を払っていただくのはありがたいのですが、テストが完了するまでは待っていただきたいと思います。テストがすべてうまくいけば、太平洋標準時刻 (PST) の 12/21 昼過ぎには Firefox 3 Beta 2 がリリースされるでしょう。Firefox 3 Beta 2 のリリースチェックリストで経過を追う事ができます。

+ +

(開発者へのメモ: beta 3 に向けた作業のためツリーは再び開かれました。)

diff --git a/files/ja/orphaned/devnews/20071210/index.html b/files/ja/orphaned/devnews/20071210/index.html new file mode 100644 index 0000000000..4ec36a9497 --- /dev/null +++ b/files/ja/orphaned/devnews/20071210/index.html @@ -0,0 +1,90 @@ +--- +title: 'about:mozilla - 賞、Mozilla 2、Community Loaner Program などなど' +slug: DevNews/20071210 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

新しい Mozilla 2 のためのミーティング

+ +

Mozilla 2 に関する作業は、急速に進んでいて、定期的なミーティングを始めるべきだというところまで来ています。このミーティングは、Firefox と Gecko のためのミーティング（"Firefox/Gecko meeting" と適切に名付けられているもの）と合同で行われます。水曜日 11時（太平洋時間）の時間帯が空いているならば、Mozilla 2 のために使ってください。

+ +

ミーティングの詳細

+ + + +

Mozilla Community “Loaner” Program

+ +

Giving and Empowerment Program は、1年間以上、Mozilla コミュニティにリソースを支給し、数百千ドルを、助成金、ハードウェア、ソフトウェア、その他のサービスを Mozilla コミュニティにすでに支給しいています。

+ +

私たちは、Mozilla コミュニティにリソースを提供するための、より実験的な方法について考え続け、新しいアイデアを思いつくに至りました。今なら、かなりの長期間プロジェクトに関わる貢献者のためのハードウェアを購入することに加えて、私たちは、必要に応じてコミュニティに支給され得るリソースの、制限されたプールを作成しています。 私たちは、わずかながらのテストケースを今年末までに実施出来ればと考えています。もし、適用を受けたい、質問がある、もしくは、このプログラムについてもっと知りたいならば、このプロジェクトについての Seth のブログ投稿を見てください。

+ +

Camino 1.5.4 がリリースされました

+ +

Camino ブラウザプロジェクトは、 Camino 1.5.3 からの様々なセキュリティと安定性アップデートを含むメンテナンスリリースである、Camino 1.5.4 をリリースしました。全てのユーザに対してアップデートを推奨します。

+ +

Mozilla プロジェクトに対する数々の賞

+ +

Mozilla プロジェクトは、先週、ほんの少しの数の賞を受賞しました。:

+ + + +

“For the Record” プロジェクトが再始動

+ +

“For the Record” (FTR) は、次のことを行うために Mozilla コミュニティの 活動力と知識を利用する、コミュニティ主導の広報及び報道対応プログラムです。1) Mozilla Project のオンライン報道の全てを一覧化する、2) オンライン報道に対応する権利を与えられると感じられるようなスポークスマンの集団を、維持できる集団となるように育てる、3) 話の要点とよく寄せられる質問への回答の一覧を作成する。

+ +

もし、For the Record チームに参加したい、このプログラムをさらに発展させるために私たちを支援したいならば、手軽にメーリングリストを購読してください。さらなる情報と詳細は、このプロジェクトについての Asa のブログ投稿を見てください。

+ +

なぜ Firefox 2.0.0.11 はこんなにも早くリリースされたのか

+ +

先月の初めに、プロジェクトの歴史上初めて、同じ週に 2 つのバージョンの Firefox がリリースされるということを私たちは体験しました。Firefox 2.0.0.10 は月曜日に登場し、Firefox 2.0.0.11 は、続く金曜日に登場しました。このようなことが起こった理由と、起こったことについての全てを知りたいならば、何が起こり、なぜこのようなことが起こったかについて説明した John Resig のブログ投稿を見てください。

+ +

JavaScript 2 and the open web

+ +

Brendan Eich は、最近、イギリス、ロンドンでの @media ajax conference で話をしました。彼は、自分のプレゼンテーションを投稿しています（解説とともに）。: JavaScript 2 and the open web

+ +

今後のイベント

+ +

12月 13-16日: Hispalinux Congress - スペインでの Hispalinux で、Pascal Chevrel が、Mozilla を広めるのを促進する方法について話します。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + diff --git a/files/ja/orphaned/devnews/20071211/index.html b/files/ja/orphaned/devnews/20071211/index.html new file mode 100644 index 0000000000..2b29bddd00 --- /dev/null +++ b/files/ja/orphaned/devnews/20071211/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox 3 に向けたアドオンとテーマの互換性確保 +slug: DevNews/20071211 +tags: + - DevNews + - 'DevNews:General' +--- +

Firefox 3 のリリースが近付くにつれて、この新しいブラウザに対して拡張機能やテーマの互換性を確保する事が重要な課題となりつつあります。拡張機能に互換性が無かったり、安全な更新手段を提供していないために、ユーザーが Firefox 3 を起動した時にすべての拡張機能が無効にされてしまうようなことが無いようにしなければなりません。

+ +

拡張機能の開発者は、Firefox 3 向けに拡張機能を更新する時に影響を与える以下の変更点に注意しなければなりません。

+ + + +

重要: 現在から Firefox 3 のリリースまでには多くの変更がなされる可能性があるので、addons.mozilla.org にホストされている拡張機能はまだ 3.0.* というバージョンを指定することはできず、現在のベータリリースのバージョンを指定しなければなりません。maxVersion に 3.0.* または 3.0.0.* というバージョンを指定していた拡張機能は、3.0b2 となるように変更されています。現在 AMO で使用できるバージョンの一覧はここにあります。

+ + + +

注意事項としては、アドオンを新しいリリースに対応させるために必要な変更点が install.rdf の maxVersion を上げることだけである場合、addons.mozilla.org の開発者用コントロールパネルで maxVersion を変更すれば、インターネットに接続できる環境にあるユーザーならば Firefox や Thunderbird に新しいバージョンのアドオンをインストールできるようになります。バージョンの互換性を上げるためだけに新しいバージョンをアップロードしてレビューを受けさせる必要はありません。

+ +

Mozilla Developer Center の 拡張機能を Firefox 3 に対応させる という記事でより詳しい情報を得ることができます。

diff --git a/files/ja/orphaned/devnews/20071217/index.html b/files/ja/orphaned/devnews/20071217/index.html new file mode 100644 index 0000000000..4ae71535a3 --- /dev/null +++ b/files/ja/orphaned/devnews/20071217/index.html @@ -0,0 +1,78 @@ +--- +title: 'about:mozilla - Beta 2 出荷、Firefox 3 アイコンプレビュー、アドオンの互換性、グラフィックスアーキテクチャ などなど' +slug: DevNews/20071217 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

about:mozilla 休暇中の休刊

+ +

休暇シーズンがやってきますが、このニュースレターも 2 週間後まで発行されません。通常発行は、2008 年 1 月 7 日からです。よい休暇を！

+ +

Firefox 3 Beta 2 出荷

+ +

ビルド 及び QA チーム に権限が移譲されると共に、Firefox 3 Beta 2 の リリース候補版をビルドしテストする作業が、先週開始されました。もし作業が全て上手く進んだ場合、このベータ版は、12 月 21 日 までにはリリースされるでしょう。進行中の作業を追いかけたい場合、 Firefox 3 Beta 2 リリースチェックリスト でその経過を追うことができます。さらなる情報は、DevNews の投稿（日本語版）を参照してください。

+ +

Firefox 3 に向けたアドオンとテーマの互換性確保

+ +

Firefox 3 のリリースが近付くにつれて、この新しいブラウザに対して拡張機能やテーマの互換性を確保する事が重要な課題となりつつあります。拡張機能に互換性が無かったり、安全な更新手段を提供していないために、ユーザーが Firefox 3 を起動した時にすべての拡張機能が無効にされてしまうようなことが無いようにしなければなりません。 アドオンとテーマの更新、及び、いくつかの新機能とバージョン情報についての詳細は、 こちらの DevNews の投稿（日本語版）を参照してください。

+ +

Firefox 3 のアイコンが初公開

+ +

Alex Faaborg が、新しい Firefox 3 のアイコンセットが開発されていることに関連した進行中の作業についての、興味深い投稿を書きました。Firefox 3 は、4 つのプラットフォームのそれぞれに、約 120 のアイコン（サイズ違いをカウントするなら、190）を含んでいます。これらの新しいアイコンの多くは、いまだ草案であったり、まだ存在していなかったり、また、プラットフォーム間でいくつかの不一致があります。さらなる情報と議論は、Alex のブログ投稿を参照してください。

+ +

Get Firefox ビデオアワード

+ +

Firefox Flicks コンテストを覚えている人もいるでしょうが、Mozilla Japan が、アーティストネットワークであるロフトワークと、ソニーのビデオホスティングサービスである eyeVio と共に、似たようなコンテストを日本で企画しました。それが、Get Firefox ビデオアワードです。このコンテストは、10 月初旬に開始され、12 月に応募が締め切られました。さらなる情報（リンク先は英語）は、Gen Kenai のブログ投稿を参照してください。.

+ +

緑の goo 版 Firefox

+ +

今週の初めに、Mozilla Japan は、日本の代表的なポータルサイトである、 NTT レゾナントの “goo” ポータルとの新しいパートナーシップをアナウンスしました。“goo”は、長い間、日本での Firefox のサポーターであり、検索広告によって 得られた収益の一部を非営利の団体に寄付する Green Label” 検索サービスをサポートする Firefox の 新しいディストリビューションのために、数か月前に、私たちのところにやって来ました。Mozilla Japan は、NTT レゾナントとそのようなプロジェクトを行うことが出来て光栄でした。そして、私たちは、緑の goo 版 Firefox を先週火曜日にデビューさせました。もしあなたが現在 Firefox を使っているのなら、英語版の Firefox 向けの 緑の goo アドオン を試すことができます。そのアドオンは、エコ/グリーン テーマ、新しい検索プラグイン、そして、ホームボタンの隣に位置する、検索する回数に応じて成長する小さな木を含みます。

+ +

Mozilla のグラフィックスアーキテクチャ

+ +

Vlad Vukicevic は、Mozilla における 新しいグラフィックスアーキテクチャと、グラフィックスチームが Thebes と Cairo に関して作業していることについてのプレゼンテーションをまとめました。彼は、そのプレゼンにおいて、Gecko のレンダリングエンジンを Cairo に変更する理由、Thebes が提供するもの、そして、どのようにその他のレイアウトエンジンと相互作用するのかについて説明しています。コメント付きの完全なプレゼンテーションが、Vlad のブログにあります。

+ +

カナダ最大の大学が Firefox と Thunderbird を標準化

+ +

David Humphrey が、とても素晴らしいニュースを投稿しています。: セネカカレッジの IT 部門が Mozilla Firefox と Mozilla Thunderbird をサポートすることを選択しました。「カナダ最大の大学が、組織を通して Firefox と Thunderbird に乗り換えたことが意味することは何か？それは、100,000 人の学生（私たちのプラグラミングの学生は、この小さな一部分です）が、彼らの教育の一部分として、開かれた Web にさらされるだろうということを意味します。HR から 学長の事務所への給料支払いまで、数千の教授、管理スタッフ、他の従業員もそれを利用するでしょう。」さらなる詳細と情報は、David のブログ投稿を通して得ることができます。

+ +

Camino 1.6 Alpha 1 がリリースされました

+ +

Camino 1.6 のプレビューリリースである、Camino 1.6 Alpha 1 が、現在入手可能です。これは、アルファ版のソフトウェアであり、不安定で、日々の利用には適さないかもしれません。Camino の安定したバージョンを利用したいなら、Camino 1.5.4 をダウンロードしてください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20071218/index.html b/files/ja/orphaned/devnews/20071218/index.html new file mode 100644 index 0000000000..8b90618c02 --- /dev/null +++ b/files/ja/orphaned/devnews/20071218/index.html @@ -0,0 +1,27 @@ +--- +title: Firefox 3 Beta 2 がダウンロード可能に +slug: DevNews/20071218 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

注意: 開発者とテスター以外の方には Firefox 3 Beta 2 マイルストーンリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを対象としています。

+ +

Firefox 3 Beta 2 がダウンロード可能になりました。これは開発者向けの 10 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。

+ +

このマイルストーンでフィードバックが求められている新機能と変更は以下の通りです。

+ + + +

(リリースノート の 「新機能」 セクションでこれらすべての機能についての詳細を見ることができます。)

+ +

テスターは 25 以上の異なる言語に対応した Windows、Mac OS X、および Linux 用の Firefox 3 Beta 2 ビルド をダウンロードできます。このプレビュー版を使用する前に、必ず リリースノート をすべて読んでください。開発者は Mozilla Developer Center の 開発者のための Firefox 3 に目を通すべきです。

+ +

注意: ダウンロードサイトに直接リンクを張らないでください。代わりに、この Firefox 3 Beta 2 マイルストーンの告知へリンクすることを強く推奨します。これは、このマイルストーンがどういうものなのか、何を期待すべきなのか、ダウンロードしてこの開発段階でのテストに参加するべきなのはどういう人なのかをすべての人に知ってもらうためです。

diff --git a/files/ja/orphaned/devnews/20080107/index.html b/files/ja/orphaned/devnews/20080107/index.html new file mode 100644 index 0000000000..0e3d5222fe --- /dev/null +++ b/files/ja/orphaned/devnews/20080107/index.html @@ -0,0 +1,86 @@ +--- +title: 'about:mozilla - Beta 2 が出荷された、 Weave 立ち上げ、2007 年の反省、フォクすけ、ライブチャットサポート、などなど…' +slug: DevNews/20080107 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

about:mozilla は、火曜日に変更になります

+ +

様々な理由があって、about:mozilla ニュースレターの発行を火曜日に変更することにしました。 このことによって、提出の締切が金曜日までに延長され、発行プロセスが単純化されます。この変更についての意見や質問は、直接、news-editor@mozilla.org へ送ってください。

+ +

Firefox 3 Beta 2

+ +

Firefox 3 Beta 2 が、12 月 18 日にリリースされ、ダウンロード可能になっています。これは開発者向けの 10 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。さらなる詳細と情報は、DevNews の投稿（日本語版 を参照してください）。

+ +

アドオン開発者たちへ - Firefox 3 がやって来る！

+ +

Firefox 3 Beta 2 が登場したのに伴い、今こそ、アドオン開発者が自らのアドオンを Firefox 3 対応に更新するための絶好の機会です。 addons.mozilla.org のメンバーが、そこでホストされている拡張の更新で考慮すべきいくつかの情報を提供しています。Mozilla Developer Center は、Firefox 3 での新しい機能と変更についてのページを提供しています。さらなる情報は、Mark Finkle のブログ投稿を参照してください。

+ +

Weave の紹介

+ +

Web が発展し続け、私たちの生活のより多くの部分がオンラインに移行するにつれて、私たちは、Firefox のような Web ブラウザが、それらのデータと個人情報に対するユーザコントロールを高める一方で、豊かな体験を提供するためにより多くのことができる、また、するべきだと、信じています。探究すべき重要なものの一つは、ブラウザとオンラインサービスのより深い統合を通した、デスクトップと Web の融合です。

+ +

Weave は、私たちがこの統合を正式に探究する中での新しい Mozilla Labs のプロジェクトです。Weave は、Firefox のおもてなしを促進し、個人情報に対するユーザコントロールを高め、そして、開発者が革新的なオンライン体験を構築するための新しい機会を提供するための方法を見つけることに焦点を当てています。 さらなる情報は、Mozilla Labs のブログ投稿を参照してください。

+ +

support.mozilla.com が、ライブチャットによるサポートを開始

+ +

12 月 28 日に、Mozilla は、Firefox ユーザに対してのライブチャットサポートを公式に開始しました。ナレッジベースやフォーラムでサポート質問への回答を見つけることができないユーザが、よりスキルがある Firefox ユーザから、問題を解決するためのヘルプをリアルタイムで受けることができます。

+ +

私たちは、月曜日から、金曜日までの一日 3 時間 を設定し、私たちの現在のボランティアがオンラインで質問を受け付けます。 より多くの人々が他の時間帯に参加すれば、私たちは時間を拡大するつもりです。しかし、時間を拡大するためには、より多くの Firefox ヘルパーが必要です。あなたが上級ユーザの助けを必要としないならば、経験をサポートの手助けとして提供してください。これは、Mozilla コミュニティを発展させる素晴らしい方法です。さらなる情報は、SUMO に用意されています。

+ +

2007 年の反省

+ +

Mitchell Baker は、いくつかの 2007 年の彼女の反省をブログに書いています。「私たちは、より多くのことをし、それらの全てが Mozilla のオープンソースの DNA と共同的作業スタイルに深く根ざしています。私たちの旗艦製品である Firefox を恒常的に使う人々の数が今年 2 倍になりました。私たちは、Firefox 単体で 125 百万人を超える人々をサポートしています。私たちは彼らに参加、共有された意思決定、透過性の原則を組織化することを基にした世界クラスのおもてなしを提供しています。世界中の人々が Mozilla を彼ら自身のものにし、私たちは本当にグローバルな現象になっています」。さらなる内容は、彼女のブログ投稿を参照してください。

+ +

Spread Firefox 2 が稼働

+ +

Spread Firefox (SFX) の真新しいバージョンが立ち上がりました。小さく、非営利組織であるので、Mozilla Foundation は、Firefox を世界に売り出すという目的のためのリソースが非常に限られています。SpreadFirefox は、この欠点を補うために作られ、開発を動かし、Firefox をテストするコミュニティ発展の同じ原則で設立されました。私たちは、熱狂的なボランティアからなる大きなコミュニティが達成できないことは何もないと信じています。そして、このサイトは、コミュニティを、制限のないリソースを持つ競争者さえ匹敵することができない、一つの結束したマーケティング力に一体化させるために存在します。さらなる情報と、発展のために、全てが新しい Spread Firefox サイトを訪れてください！

+ +

Red Herring Global 100 内に Mozilla

+ +

「10 年間、Red Herring の編集部が世界中の企業家精神を勤勉に調査しました。技術産業の経営陣、投資者、オブザーバーが Red Herring 100 のリストを、分裂と革新の次の波を導くであろう幸先の良いスタートアップを発見し、擁護する貴重なものだとみなしました」。 Red Herring 100 Global Winners は、シアトル、ワシントンでの Red Herring Global 2007 Awards Ceremony で発表され、私たちはとても光栄なことに、Mozilla が 2007 年のこの権威あるリストに含まれているとの発表を受けました。

+ +

フォクすけテーマが用意されました！

+ +

Mozilla Japan のマスコットキャラクターである、フォクすけが、真新しい Firefox テーマになりました。このテーマだと、ページが読み込まれる間、小さなフォクすけが走るのを楽しむことができます。試して、彼で楽しんでください！

+ +

Firefox 3 のローカライズされたブラウザのデフォルトのガイドライン

+ +

ローカライズされたブラウザのデフォルト（検索プラグイン、RSS リーダー、ブックマーク、プロトコルハンドラ）を選択するためのガイドラインのまとめが用意されました。私たちはこれらのガイドラインがローカライザーが彼らの言語とロケールでのブラウザのデフォルトの推奨を作る助けになることを望みます。変更を作成するための手続きは、Firefox 2 のときと同じです。変更の締切は、Firefox 3 Beta 3（予定では:2008 年 1 月 中旬） までです。何か質問がある場合は、Mic（mic@mozilla.com）に連絡してください。さらなる特定の情報と指定は、ガイドラインを参照してください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週月曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080115/index.html b/files/ja/orphaned/devnews/20080115/index.html new file mode 100644 index 0000000000..482a7fa6ed --- /dev/null +++ b/files/ja/orphaned/devnews/20080115/index.html @@ -0,0 +1,80 @@ +--- +title: 'about:mozilla - 新しい CEO、FOSDEM、SeaMonkey、Places Testday、2 つの賞、などなど' +slug: DevNews/20080115 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

John Lilly が、Mozilla Corporation の CEO に任命されました

+ +

2008 年1 月 7日に、Mozilla は、John Lilly が Mozilla Corporation の最高執行責任者 (COO) から最高経営責任者 (CEO) に異動することを 発表しました。Mitchell Baker は、Mozilla Corporation の会長として引き続きその任に当たります。詳細は、公式プレスリリース（Mozilla Japan による和訳）と FAQ（Mozilla Japan による和訳）を参照してください。また、John と Mitchell 両人が、この変更に関するブログ記事を書いています。

+ +

ブリュッセルで行われる FOSDEM 2008 に、Mozilla が参加します

+ +

ヨーロッパにおける最大のフリーソフトウェアとオープンソースのイベントである、FOSDEM が、2月 23、24日の週末にかけて、ブリュッセルで行われます。入場は無料です。

+ +

2日間のイベントの間、Mozilla や他のオープンソースの貢献者が集まり、全ての人のために開かれている、多くの Developer Room を訪れます。Mozilla Europe のメンバーの多くがそこにいます。また、海外からの訪問者も何人かいます。

+ +

私たちの FOSDEM 2008 ウィキページへ行けば、さらなる情報を見つけることができます。ホテルやトラベルのためのスポンサーシップへの申込みに興味があるならば、Wiki でsそのことを表明し、Anne-Julie Ligneau (ajligneau -at- mozilla-europe.org) に連絡してください。Mozilla Room で話したい人も探していますので、Mozilla が好きな人たちと知識を共有したいと思ったなら、 Brian King (brian -at- mozdev.org) に連絡してください。 - まだわずかに空きがあります。

+ +

SeaMonkey: 新しい Council、Alpha 基準

+ +

Mozilla のインターネット統合アプリケーションの開発を続けるコミュニティの取り組みである、SeaMonkey プロジェクト（日本語での SeaMonkey プロジェクトの情報は、もじら組もじら団 のサイトを参照してください）は、「SeaMonkey Council」と呼ばれている コミュニティを主導しているプロジェクトを再編成しました。 Chris Thomas がチームを去り、Mark Banner、Karsten Düsterloh、そして、Andrew Schultz が Council に参加することになりました。

+ +

開発者サイドでは、Firefox、Thunderbird 及び他の Mozilla ベースアプリケーションと共有している、よりモダンなフレームワークをスイートで利用するための作り直しで忙しくなっています。この SeaMonkey 2 の最初のアルファリリースのための一連の基準が 投稿されています。

+ +

1 月 18 日金曜日は、Places Testday

+ +

1 月 18 日金曜日に行われる予定の Places Testday のために、Mozilla QA コミュニティに参加してください。Firefox 3 Beta 3 のための準備として、新しい「Places」によるブックマークと履歴システムをテストすることになっています。このイベントは、午前 7 時から午後 5 時まで行われる予定です。Test day のため準備の仕方と参加方法についてのさらなる情報については、Mozilla の QA ポータルである QMO を参照してください。

+ +

Mozilla Support コミュニティは、ボランティアを探しています

+ +

Mozilla コミュニティに参加したいならば、今がチャンスです。Mozilla Support コミュニティは、SUMO (support.mozilla.com) での新しい 「Live Chat」機能のスタッフを助けるためのより多くのボランティアを探しています。ライブチャットは、月曜、水曜、金曜の午前 9 時から午後 3 時、及び、火曜、木曜の午後 12 時から午後 4 時まで行われています。しかしながら、より多くのボランティアが必要です。参加したいのでしたら、さらなる詳細は、Majken のブログの投稿を参照してください。

+ +

Planet Mozilla への最近の追加

+ +

Mozilla コミュニティの主要なブログアグリゲータである、Planet Mozilla は、何人かの新しいメンバーをブログロールに加えました。 これらには、SeaMonkey trunk tracker の feed、Majken Connor、Madhava Enros、Matthew Gertner の「Just Browsing」ブログ、 Mic Berman、Michael Ventnor、Smokey Ardison、Zbigniew Braniecki、そして、Brad Lassey が含まれています。 Planet Mozilla ブログに、これらのメンバーと彼らが何をしているのかについてのさらなる情報があります。

+ +

Mozilla が「Top 20 Companies to Watch in 2008」のうちの 1 つに

+ +

Linux Magazine は、Mozilla を「Top 20 Companies to Watch in 2008」に選びました。 「水平線上の Firefox 3.0 に関連して、私たちは、MozCorps のメンバーが2つの理由で注目するほど重要だと考えています。第一に、Firefox は、過去数年間に渡って、ゆっくりながらも確実にマーケットシェアを伸ばしているからです。第二に、Web アプリケーションは、ユーザにとってますます重要になりつつあり、Firefox は、より充実した Web アプリケーションを可能にする最前線に立っています。特に、Firefox 3.0 で予定されているオフラインアプリケーション上の動作は、Web アプリケーションを作成するベンダーにとって非常に重要なものとなり、それらのアプリのユーザにとっても重要になるだろうからです」。さらなる詳細は、Linux Magazine の投稿を参照してください。

+ +

Firefox が .Net Magazine の「Open Source Application of the Year」を勝ち取りました

+ +

Firefox は、.Net Magazine がスポンサーをしている .Net Awards において、Open Source Application of the Year を勝ち取りました。 入賞者は、全て素晴らしいオープンソースプロジェクトである、Ruby on Rails、WordPress、Drupal、そして、Open Office です。解説、コメントの引用、さらなる情報は、.Net magazine award の発表にあります。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080122/index.html b/files/ja/orphaned/devnews/20080122/index.html new file mode 100644 index 0000000000..663e283939 --- /dev/null +++ b/files/ja/orphaned/devnews/20080122/index.html @@ -0,0 +1,78 @@ +--- +title: 'about:mozilla - NVDA への助成金、Fx3b3 スケジュールが更新、SUMO、Tamarin、アドオン、などなど' +slug: DevNews/20080122 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla Foundation が NVDA へ助成金

+ +

Mozilla Foundation の気前のよさと支援のおかけで、NV Access は、James Teh を NVDA (NonVisual Desktop Access) の開発に取り組むためのフルタイムの開発者として雇うことが可能になりました。Mozilla Foundation は、 NVDA に大変興味を持っていて、このプロジェクトの目標の一つは、Firefox や Thunderbird のような Mozilla 製品に対する素晴らしいサポートを提供することです。

+ +

2008 年に渡って US$80,000 を提供するこの助成金は、NV Access が Mozilla 製品へ主な焦点をおいて、NVDA の改善と保守に取り組むために James Teh をフルタイムで雇用することを可能にします。NV Access と Mozilla は、ともに、視覚障害ユーザが常に Microsoft Windows オペレーティングシステム上のアプリケーションにアクセスするときの自由な選択肢及びフリー・オープンソース製品を用いて他のコミュニティに移行する選択肢を保証することを望んでいます。さらなる情報は、NVDA プロジェクトのブログの投稿を参照してください。

+ +

Firefox 3 Beta 3 のスケジュールが更新

+ +

1 月 15 日の Firefox 3 ミーティングで、1 月 29 日に フリーズ日が延期することが決定されました。この計画は、ビルドが始まる前の週の残りに静かなフリーズを設けるためのもので、Beta 2 で用いられたのと同じタイムラインです。このスケジュールでは、ビルドが 2 月 4 日月曜日の午前に始まることになっています。Beta 3 に含みたいローカライゼーションの変更は、全て、UTC 午前 8 時までにチェックされる必要があります。さらなる情報は、Mike Connor の mozilla.dev.planning への投稿を参照してください。

+ +

SUMO が Firefox のヘルプコンテンツをインポート中

+ +

全てのローカライザーは、support.mozilla.com (SUMO) チームが現在の製品内のヘルプコンテンツを Firefox から SUMO の Web サイトにインポートすることを開始したことに注目すべきです。まず SUMO に コンテンツを移動した後、それを Firefox 3 のためにアップデートすることになっています。Firefox 3 は、ヘルプメニューから直接 SUMO の Web サイトを参照する予定になっているので、コンテンツの移行と更新は、最優先事項です。

+ +

ヘルプコンテンツは Firefox 内ではなく、SUMO 上に存在することになるので、全てのローカライザーは、古い場所に大きなコンテンツのチェックインをすることを避けるべきです。それらの変更は、SUMO に再インポートしなければならないかもしれないからです。このプロジェクトについての最近のニュースは、mozilla.dev.l10n ニュースグループを参照してください。

+ +

FOSDEM での Firefox 3 Add-on Compatibility Workshop

+ +

ヨーロッパのアドオン開発者であるか、FOSDEM カンファレンスに参加する予定ならば、2月 23 日、24 日に行われるアドオンを Firefox 3 互換にするためのワークショップ/ハッキングセッションに参加してください。Mark Finkle (mfinkle) が、新しい API と Firefox 3 で実装されるものの利点を得るためのテクニックの解説を行う予定です。Carsten Book (tomcat) は、アドオンのメモリ使用とパフォーマンスをチェックするためのテストの試みについての解説と案内を行う予定です。

+ +

このワークショップは、他のアドオン開発者と出会い、アイデアを交換するための、また、アドオンの文書化と開発をどのように向上させるかを私たちにフィードバックするための素晴らしい機会を提供します。 参加に興味があるなら、Mozilla Wiki にサインアップシートが用意されています。私たちもまた、このセッションがカンファレンスの前の金曜日に計画されるべきかどうかのフィードバックを求めています。イベントについてのさらなる情報は、chofmann-at-mozilla.org に連絡してください。

+ +

Tamarin Tech Summit - 2 月 1 日、サンフランシスコ

+ +

Adobe Systems は、Tamarin Tech Summit を 2 月 1 日、Adobe サンフランシスコで行います。このミーティングの目的は、アクティブかつ潜在的な貢献者とプロジェクトのためのツール、進行レポート及び計画を一緒に共有することです。

+ +

ディスカッションのトピックには、プロファイリングツール群、ES3 との互換性とパフォーマンス、Firefox への取り込み（ActionMonkey)、トレースベースのコンパイルが含まれています。さらなる情報が、tamarin-devel メーリングリストの投稿にあります。また、会議事項の予定が Mozilla Wiki に投稿されています、

+ +

Camino 1.6 Beta 2 がリリースされました

+ +

Camino 1.6 の機能の最新のプレビューである、Camino 1.6 Beta 2 が、今利用可能です。このバージョンには、OpenSearch 検索エンジンのサポート、新しい検索ツールバー、Spotlight と Quarantine のメタデータに対するサポートの拡張が含まれています。このリリースはベータソフトウェアであり、不安定で、日々の利用には適さないかもしれません。Camino の安定したバージョンを利用したいなら、Camino 1.5.4 をダウンロードしてください。

+ +

Firefox に対して、Developer.com Award

+ +

1月15日に、Developer.com Product of the Year Awards の受賞者が発表され、Mozilla Firefox は、「Development Utility of the Year」を受賞しました。受賞者と最終選考者の完全な一覧は、Developer.com にあります。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080129/index.html b/files/ja/orphaned/devnews/20080129/index.html new file mode 100644 index 0000000000..d7bd127127 --- /dev/null +++ b/files/ja/orphaned/devnews/20080129/index.html @@ -0,0 +1,82 @@ +--- +title: 'about:mozilla - 10 年、Firefox 3 ベータフリーズ, Mozilla モバイル、APNG、などなど' +slug: DevNews/20080129 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla: 祝 10 年

+ +

1998 年 1 月 22 日に、Netscape は、Netscape Communicator のソースコードをリリースし、Mozilla Project のための基金を用意するという計画を初めて発表しました。10 年後の現在、 Mitchell Baker は、「2008 年は祝うべき年です。Mozilla は、今年で 10 年を迎えました。オープンソースの歴史、コミットメント、製品開発、コミュニティの成立と遂行の10 年間。驚きの視点と多様性を持ったオープンソースプロジェクト。誰もが想像したよりも開かれ、参加方式であるインターネットの一部。インターネットが何であるべきかという強い声。これが、素晴らしい10年です。」Mitchell の投稿の残りは、彼女のブログ上で読んでください。

+ +

Firefox 3 Beta 3 のコードフリーズは今日です！

+ +

Firefox 3 Beta 3 のコードフリーズは今日だという単なるリマインダです。ちなみに、ローカリゼーションのためのストリングフリーズは、先週金曜日に行われました。計画では、ビルドを始める前の週に静かなフリーズ期間を設けることになっています。これは、Beta 2 で用いられたのと同じタイムラインです。このスケジュールでは、2 月 4 日の月曜日の朝にビルドが始まることになります。さらなる情報は、Mike Connor と Mike Beltzner の mozilla.dev.planning への投稿を参照してください。

+ +

EV 証明書が Firefox 3 ナイトリーで表示されるようになりました

+ +

EV 証明書サポートが Firefox 3 ナイトリービルドで有効になり、Verisign の EV ルート証明書がテスト目的で認証されています。これが意味することは、例えば、British Airways のサイトのような、Verisign が発行した EV 証明書を持つサイトに行ったときに、サイト識別ボタンがサイトオーナーの名前をピックアップし、それを緑の背景で表示します。さらなる情報、スクリーンショット、テストとフィードバックのためのリクエストは、Johnathan Nightingale のブログ投稿を参照してください。

+ +

Mozilla Mobile プロトタイプユーザインターフェースが投稿されました

+ +

Mozilla Mobile チームは、楽しめる 2 つのプロトタイプモバイルユーザインタフェースを投稿しました。一つは、ボタン操作のデバイスで、もう一つは、タッチスクリーンのデバイスです。今こそ、モバイルプロジェクトに参加する素晴らしいタイミングであり、チームはこれらの UI についてのフィードバックを歓迎します。さらなる情報が Doug Turner のウェブログにあります。また、Ars Technica が、このプロトタイプについての短い記事を書いています。

+ +

Mozilla Europe が 1月 29～31日 にパリで行われる Solutions Linux and OpenSource 2008 に参加します

+ +

Mozilla Europe が 1 月 29 日（今日）から 1 月 31 日までパリで行われる Solutions Linux and OpenSource 2008 カンファレンスに参加します。Mozilla Europe ブースにあいさつをするために立ち寄ってください。もしくは、イベントの間、彼らが参加するカンファレンスに出席してください。

+ +

Firefox 2.0.0.12 が 2 月 12 日にリリースされる予定です

+ +

Firefox 2.0.0.12 がコードフリーズに入り、現在、2 月 12 日のリリースが予定されています。リリースとスケジュールについてのさらなる情報は、Firefox 2.0.0.12 リリースウィキページにあります。

+ +

「アドオン衛生学」ハッキングソーシャルは、今夜です!

+ +

Mozilla ハッカーとホビイストは、今夜午後 6 時にピザとドリンクのためにマウンテンビューの Mozilla HQ に来てください。addons.mozilla.org のエディターになるための概要を提示し、そこからリリースされていない拡張のレビューとテストを行います。さらなる情報は、Upcoming のイベントページにあります。参加する予定があるなら、そこで返答すべきです！

+ +

Super Techies インタビュー：Brendan Eich

+ +

「Super Techies インタビューで、Mozilla CTO の Brendan Eich が、ZDNet の編集長の Dan Farber に、シリコンバレーでのプログラマとしての彼のキャリアについて語っています。Eich は、Netscape での彼の初期の仕事である JavaScript プログラミング言語の開発、ブラウザ戦争における Microsoft との戦い、そして、彼の Mozilla での現在の役割を説明し、企業の旗艦製品である Firefox ブラウザのための新しい技術の拡大を展望しています。」ZDNet でビデオを見てください（builder by ZDNet Japan の日本語字幕付き版）。

+ +

新しい APNG ポータルサイト

+ +

Stuart Parmenter は、次の内容のブログを投稿しています。「私は最近、セネカカレッジの Brendan Sera-Shriar から、彼が PHUG からのメンバーと一緒に最近立ち上げたこの APNG ポータルサイト についての話を聞いた。このサイトは、素晴らしく、Firefox 3（と Opera 9.5 と続く他の製品）における素晴らしい新機能についての豊富な情報を提供する助けになると思います。そこには、いくつかのクールなサンプルがあり、提供があるならば、さらに加えられるでしょう。」

+ +

アドオン開発者へ: Firefox 3 への更新を開始する時です！

+ +

Mark Finkle は、「私たちは、拡張開発者に対して彼らの拡張を Firefox 3 でも動作するように更新する作業を始めるべきだとの呼びかけをしています。Firefox の変更のために拡張が動作しなくなることは、決して楽しいものではありません。しかし、全ての人が、プラットフォームをより良くしたいと望んでいます。そうするために、私たちはいくつかの卵を割らなけらばなりませんでした。」拡張を Firefox 3 に対応させる手助けをする多くの情報があります。開発者のための Firefox3、拡張機能を Firefox 3 用に更新する方法、Firefox 3 に対してアドオンとテーマの互換性を保証する方法、そして、Mark のブログ投稿、その他です。助けを得ることができる IRC チャンネルもあります。irc.mozilla.org サーバの #extdev です。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080205/index.html b/files/ja/orphaned/devnews/20080205/index.html new file mode 100644 index 0000000000..e52703b67d --- /dev/null +++ b/files/ja/orphaned/devnews/20080205/index.html @@ -0,0 +1,72 @@ +--- +title: 'about:mozilla - Firefox 2、Firefox 3、Thunderbird、アドオン、アイスクリーム、などなど' +slug: DevNews/20080205 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 2.0.0.12 のスケジュール

+ +

1 月 29 日に Mozilla は、新しいセキュリティ脆弱性のレベルの評価を高に上げました。私たちのユーザのセキュリティは最も重要ですから、Firefox 2.0.0.12 のリリーススケジュールは、可能な限り、押し上げられています。現在予定されているリリーススケジュールは、2 月 7 日か 8 日です。セキュリティの脆弱性についてのさらなる情報は、Mozilla Security ウェブログを参照してください。 2.0.0.12 についての追加情報は、Firefox 2.0.0.12 プランニングページを参照してください。

+ +

Firefox 3 Beta 3 のコードがフリーズされました

+ +

Mozilla Developer Center でのアナウンスによると、Firefox 3 Beta 3 のコードフリーズが 1 月 29 日 遅くに行われました。コードフリーズと現在のツリーマネジメントの工程についてのさらなる情報は、DevNews の投稿を参照してください。さらに、Firefox 3 ベータの 4 番目についての計画が現在ありますが、現在用意されているスケジュールはありません。

+ +

フランスにおける Thunderbird

+ +

David Ascher は、ブログに次のように書いています。『AFP（France の最大のニュース機関） は、 フランス国家憲兵隊が、7 万席を Ubuntu、OpenOffice、Firefox、Thunderbird を使用する、オープンソーススタックへ移行する決定を挙げて、「フランスは、Microsoft に打撃を与えた」と報じています。

+ +

同様に印象的なこととして、Tristan Nitot が フランス国防省代表者との会話で、彼らが Postfix を メールサーバーとして、また、20 万 ユーザ（これは、上述の 7 万 を含みません）になる、多くのユーザに対して、Thunderbird を推奨メールクライアントとして推奨することを指摘していることを報告（フランス語で）しています。』

+ +

Firefox アドオン が 6 億ダウンロード達成

+ +

Blog of Metrics は、次のように報告しています。「今週のはじめに、AMO が 600 億回目のアドオンのダウンロードを提供しました。それは、新規ダウンロードであり、更新を含んでいません。私たちは、現在、4000 以上のアドオンをサイト上にホストしていて、毎日 80 万から 100 万ほどダウンロードされています。サイトは 1 日あたり 450 万のページビューがあり、これは、更新のチェックやブロックリスティングを含んでいません。」 アドオン更新 ping の詳細とこれが意味することについてのさらなる情報は、Metrics のブログ投稿を参照してください。

+ +

Mitchell Baker が McKinsey Quarterly でインタビューされました

+ +

数か月前に、Bob Sutton と Lenny Mendonca が Mitchell Baker にインタビューを行い、そのインタビューが最近 McKinsey Quarterly（要登録ですが、無料です） 内に掲載されました。Mitchell は、Netscape 内でのオリジナルのオープンソースプロジェクトの主導と、Mozilla を始めるためのプロジェクトのスピンアウトについて話しています。さらなる情報は、Bob Sutton のブログ投稿を参照してください。

+ +

Mozilla Toronto が CBC に登場

+ +

2 月 1 日に、Mozilla Toronto が CBC Toronto ニュースで特集されます。この特集の内容は、セネカカレッジと Mozilla Toronto オフィス両方の映像を含む Firefox についての話と Dave Humphrey と Mike Shaver 両人へのインタビューです。その完全なビデオが、現在 Google video にあります。

+ +

about:icecream

+ +

時々私たちのコミュニティのメンバーのうちの一人が、特別なことについて書き、 全員の一日を Mozilla にします。 Melissa が彼女のウェブログで説明しているように、先週の火曜日は、これらの日々の一つで、Brody という名前の少年が、手紙と 2 つの絵を書きました。それから、これらの絵の一つは、 about:icecream という Firefox のアドオンに含まれるようになり、それは、私たちを毎日とってもハッピーにしてくれます。微笑みが欲しいならば、メリッサのブログ投稿をチェックしてください。そして、Firefox 3 ベータを実行しているなら、今日、about:icecream をインストールしてください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080207-2/index.html b/files/ja/orphaned/devnews/20080207-2/index.html new file mode 100644 index 0000000000..ad94ed2bff --- /dev/null +++ b/files/ja/orphaned/devnews/20080207-2/index.html @@ -0,0 +1,15 @@ +--- +title: セキュリティと安定性が更新された Firefox 2.0.0.12 が現在ダウンロード可能です +slug: DevNews/20080207-2 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.12 が http://getfirefox.com/ から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Firefox 2.0.0.12 リリースノートをご確認ください。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。

diff --git a/files/ja/orphaned/devnews/20080207/index.html b/files/ja/orphaned/devnews/20080207/index.html new file mode 100644 index 0000000000..7a92c2a581 --- /dev/null +++ b/files/ja/orphaned/devnews/20080207/index.html @@ -0,0 +1,10 @@ +--- +title: Firefox 3 Beta 3 は 来週初めの予定 +slug: DevNews/20080207 +tags: + - DevNews + - 'DevNews:General' +--- +

月曜日 PM 07:20 PST 、ブランチ分けとタグ付けのために開発チームからビルドチームに管理が委譲され、Firefox 3 Beta 3 となる予定のビルドを構築およびテストする作業が開始されました。いつものように、ビルドチームは一連のリリース候補版を作成し、それを品質保証チームがテストします。この活動に協力したければ、今週の金曜日 02/08 に行われる Firefox 3 Test Day にどなたでも参加できます。

+ +

テストが完了していないリリースの配布を制限するため、リリース候補版のダウンロードディレクトリへのリンクはすべてこの告知にリダイレクトされます。ユーザーの皆さんが注意と情熱を払っていただくのはありがたいのですが、テストが完了するまでは待っていただきたいと思います。テストがすべてうまくいけば、太平洋標準時刻 (PST) の 02/12 夕方には Firefox 3 Beta 3 がリリースされるでしょう。Firefox 3 Beta 3 のリリースチェックリストで経過を追う事ができます。

diff --git a/files/ja/orphaned/devnews/20080212/index.html b/files/ja/orphaned/devnews/20080212/index.html new file mode 100644 index 0000000000..c732591ba0 --- /dev/null +++ b/files/ja/orphaned/devnews/20080212/index.html @@ -0,0 +1,74 @@ +--- +title: '20080212' +slug: DevNews/20080212 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla モバイルチームが東京に

+ +

Mozilla のモバイルチームの Christian Sejersen と Jay Sullivan が、2 月 18 日に行われる Mobile Monday Tokyo に出席するために東京へやってきます。彼らは、Mozilla のモバイル戦略について話し、様々なプロトタイプと作業中のモデルを紹介する予定です。残念なことにイベント参加は無料ではありませんが、Mobile Monday Tokyo Web サイトで参加登録することができます。

+ +

SUMO - l10n は今！

+ +

Firefox のサポート Web サイトである、support.mozilla.com には、現在、より良いローカリゼーションツールがあります。もちろん、なされるべき、より多くの作業がありますが、ブラウザの受け入れ言語の設定に基づく自動言語判定、ページ URL への定義済みロケール指定、そして、いくつかの他のツールとプロセスへの改善を含む、多くの重要といえる便利な機能が提供されるようになりました。最近の変更についてのさらに多くの情報は、SUMO ブログにあります。

+ +

John Lilly が GigaOM ショーに登場

+ +

Mozilla の新 CEO、John Lilly が先週の GigaOM ショーに登場し、そこで彼は、最近の経営上の変化、Firefox 3 のリリース予定、Mozilla のミッション、Mozilla の子会社である新しい「MailCo」、そして、いくつかの他の話題について話しました。たった 15 分以下の長さである ビデオが Revision 3 で視聴可能です。

+ +

Mozilla の Web サイトプライバシーポリシーの修正版候補

+ +

Mozilla の Web サイトは、トップ訪問 Web サイトのうちのいくつかになるまでに成長し、この莫大なトラフィックの増加は、現在の Web 解析ツールの許容量を超えてしまいました。新しいツールが選定されれば、新しい必要量を満たすようにスケールアップしますが、いくつかの既存の Web サイトプライバシーポリシーの変更が必要になります。Basil Hashem は、提案されている変更についてブログに書き、Mozilla コミュニティからのフィードバックを求めています。提案されている変更とフィードバックを提供するためのフォーラムへのリンクを含むさらなる情報は、Basil の ウェブログを参照してください。

+ +

Firefox 2.0.0.12 がリリースされました

+ +

先週の木曜日に、Firefox 2 の最新のセキュリティと安定性の更新となる、Firefox 2.0.0.12 がリリースされました。最新のセキュリティの修正のバッチの恩恵を得るために、すべてのユーザがこの最新のリリースに更新することが推奨されています。もしあなたがいまだに Firefox 1.5.0.x を利用しているならば、Firefox 2 シリーズに更新することを強くお勧めします。なぜなら、Mozilla は、2007 年 5 月 に Firefox 1.5.0.x のサポートを中止しているからです。更新を行うには、単に、ヘルプメニューから「ソフトウェアの更新を確認...」を選ぶだけです。このリリースについてのさらなる情報は、Firefox 2.0.0.12 リリースノートを参照してください。

+ +

Camino 1.5.5 がリリースされました

+ +

Camino プロジェクトは、最近、多くのセキュリティと安定性の更新を含むメンテナンスリリースである、Camino 1.5.5 をリリースしました。すべての Camino ユーザがこの最新のリリースに更新することが推奨されています。さらなる情報は、Camino 1.5.5 リリースノートにあります。

+ +

Seamonkey 1.1.8 がリリースされました

+ +

先週の木曜日に、SeaMonkey プロジェクトは、オールインワンインターネットスイートの新しいバージョンをリリースしました。このリリースは、いくつかのセキュリティの脆弱性を修正し、旧バージョンで発見されたいくつかの小さな問題を修正しています。すべての SeaMonkey ユーザがこの最新バージョンに更新することを強く推奨します。さらなる情報は、SeaMonkey ブログにあります。

+ +

XPCOM リファレンス が更新されました

+ +

先週、Neil Deakin が、XULPlanet の XPCOM リファレンスが最新の XPCOM の変更を反映するために更新され、Mozilla 1.9 と Firefox 3 に対応した最新のものになっている、とブログに書いています。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080219/index.html b/files/ja/orphaned/devnews/20080219/index.html new file mode 100644 index 0000000000..33e44e608d --- /dev/null +++ b/files/ja/orphaned/devnews/20080219/index.html @@ -0,0 +1,74 @@ +--- +title: '20080219' +slug: DevNews/20080219 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla Messaging 設立

+ +

メールに焦点を当てた、非営利法人 Mozilla Foundation の子会社である新組織、Mozilla Messaging が、今日、業務を開始したことを発表しました。Mozilla Messaging が最初に注力することは、カレンダーの統合、より良い検索、全体的なユーザエクスペリエンスの充実を含む、重要な改善が行われるであろう、Thunderbird 3 の開発です。Thunderbird は、世界中の何百万人に利用され、Firefox と同じオープンソース開発モデルを用いて開発されている、無料で、オープンソースの E-mail アプリケーションです。Mozilla Messaging 設立についてのさらなる情報は、プレスリリース（Mozilla Japan による和訳）を参照してください。

+ +

Firefox 3 Beta 3 がリリースされました

+ +

Firefox 3 Beta 3 が、現在ダウンロード可能です。これは、開発者向けの 11 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。フィードバックを必要とする新機能の概要については、Beta アナウンスをしている DevNews のブログ投稿を参照してください。

+ +

Extend Firefox 2 コンテスト の受賞者

+ +

Extend Firefox 2 コンテストが終了し、受賞者が発表されました！コンテストには、世界中の人々から、数千時間という大変な作業に相当する、100 エントリを超える応募がありました。3 人の大賞受賞者は、次の通りです。:Tony Farndon (UK) による Minimap Sidebar Exension、Massimiliano Mirra (Italy) による SamePlace、 Jay Meattle (USA) による Shareaholic。12 人の 入賞者と様々な受賞パッケージを含む、コンテストについてのさらなる情報は、Mozilla Labs のブログ投稿を参照してください。

+ +

YDN で Flickr のアップローダー についてのビデオが公開

+ +

Flickr Uploadr の バージョン 3.0 が登場したとき、Flickr ユーザは、彼らの写真をオンラインに投稿するための非常により役立つツールを手に入れました。その出来事の裏にある重要な変更点として、Mozilla の技術、具体的に言うと、 Mozilla ランタイムパッケージである XULRunner を用いて、Flickr Uploadr が作成されるようになったということがあります。Yahoo Developer Network (YDN) は、Jeremy Zawodny が Richard Crowley とともに Flickr Uploadr 開発について説明している Experts at Work ビデオを作成しました。Yahoo Developer Network で そのビデオをチェックしてください。

+ +

FOSDEM ‘08

+ +

FOSDEM ‘08 カンファレンスが 2 月 23 日から 24 日にかけてブリュッセルで行われます。Mozilla は、Mozilla Developer Room で数々のトークをホストしています。そのスケジュールは FOSDEM サイトで現在公開されています。トークについてのさらなる詳細な説明は、 にあります。 Mark Finkle と Carsten Book によって主導される拡張ワークショップも日曜日に行われますし、Philipp Kewisch が、開発者たちに Mozilla Calendar Project に参加するように勧めるためのハンズオンワークショップを行う予定です。Brian King がこの来るイベントについてブログに書いていますし、Mozilla Wiki の にさらなる情報が用意されています。

+ +

Firefox 3 の新機能のついての記事

+ +

非常に役に立つ Mozilla Links ウェブログ（日本語版）の作者である、Percy Cabello が、Firefox 3 と その基礎をなす、Gecko レンダリングエンジンの多くの新機能の概要をまとめた、素晴らしい、とても詳細な記事を書きました。Percy は、ビジュアルの一新、Places（新しい 履歴/ブックマーク 機能）、ロケーションバーの変更、タブブラウジング、検索エンジンなどの機能を取り上げています。4 ページの記事である、A deep look into Firefox 3 Beta 3 は、あなたが Firefox 3 の新機能に含まれる予定のものに興味があるならば、断然チェックする価値があります。

+ +

Seamonkey 1.1.8 がリリースされました

+ +

先週の木曜日に、SeaMonkey プロジェクトは、オールインワンインターネットスイートの新しいバージョンをリリースしました。このリリースは、いくつかのセキュリティの脆弱性を修正し、旧バージョンで発見されたいくつかの小さな問題を修正しています。すべての SeaMonkey ユーザがこの最新バージョンに更新することを強く推奨します。さらなる情報は、SeaMonkey ブログにあります。

+ +

Mitchell Baker がヨーロッパへ

+ +

先週、Mitchell Baker が、2 月 14 日の French Senate で 「Software - a source of technological and social innovation」の話題について話すために招かれ、ヨーロッパ遊説旅行を行いました。パリへの旅行の間、Mitchell は、ジャーナリストに会う前に数日間 2つの他の国を訪れることにしました。Jane Finette と Tristan Nitot がともに Mitchell の訪問について、ブログに書いています。また、Tristan は、いくつかの写真も投稿しています。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080226/index.html b/files/ja/orphaned/devnews/20080226/index.html new file mode 100644 index 0000000000..b20c422025 --- /dev/null +++ b/files/ja/orphaned/devnews/20080226/index.html @@ -0,0 +1,76 @@ +--- +title: '20080226' +slug: DevNews/20080226 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

5 億ダウンロード、私たちが FreeRice.com で祝うことを支援してください

+ +

Firefox が、5 億ダウンロードを達成しました。これは、Firefox の歴史の中でまったく驚くべき記録です。この数字が意味することを想像するのは、ちょっと難しいでしょう。いくつか、例を挙げると、ローマのコロッセオ1 万個分のおおざっぱな収容観客数。キログラムで表すなら、ボーイング 747 型飛行機 8500 台分の重さ。5 億ドルあれば、あなたとあなたの 15 人の友だちが、国際宇宙ステーションへ行くことができます。その代わりに、これらの 15 人の友だちにあるひとつのゲームで遊ぶように勧めることで、2 万 5 千人の人々を養うこともできます。あなたの支援によって、私たちは、FreeRice.com で5 億粒の米を必要な人々に寄付するという、もうひとつの記録を打ち立てることができます。私たちを新しいボキャブラリを獲得しながら空腹を満たすのを支援することによっても祝ってください！

+ +

Firefox 3 T シャツデザインコンテスト

+ +

Mozilla は、Firefox 3 の T シャツコンテストを開始しました。Mozilla コミュニティ(（とそのほか）への私たちの挑戦は、最もクールで、面白い、Firefox 3 をインスパイアした T シャツデザインをつくることです。入賞者は、公開投票で決定され、その作品は、Mozilla Store で 公式の Firefox 3 T シャツとして販売され、その収入は、Mozilla Foundation の利益になります。デザイン応募の締切は、3 月 16 日までです。良いアイデアをひねりだして、あなたの最高の作品を送ってください！さらなる詳細と情報は、Spread Firefox のコンテストページ（参考和訳）を見てください。

+ +

新しいアドオンサイトのプレビュー

+ +

Mozilla Add-ons のサイト（addons.mozilla.org、もしくは、 「AMO」）は新しいデザインになり、チームは、Firefox 3 が公開される時までに仕上げるためにあなたの助けを必要としています。preview.addons.mozilla.org へ行き、しばらくサイト内を巡ってサイトをチェックしてください。フィードバックをするためには、AMO チームにあなたが思ったことを伝える、もしくは、より重要な問題に対してバグを立てることができます。irc.mozilla.org の #amo チャンネルに参加することもできますし、Webdev ウェブログを追うことで進捗に注目することもできます。新しい点と相違点についての詳細を含んだ、さらなる情報は、Webdev ブログの投稿をチェックしてください。

+ +

Mozilla Messaging：参加するには

+ +

Mozilla Messaging が先週立ち上がりましたが、彼らは、助けを求めています。Mozilla Messaging プロジェクトに参加する多くの方法があります。単語を拡げたり、開発を助けたり、テストの作業をしたり、翻訳作業に時間を割くなどです。参加するためについてのさらなる情報は、Mozilla Messaging ウェブサイトに用意されています。あなたが Thunderbird を愛し、E メールを素晴らしいものにすることを助けたいと思うならば、サイトをチェックし、今日から参加してください。

+ +

今日のセキュリティで最も影響力のある人物の一人に Window Snyder

+ +

Mozilla の「」 である、Window Snyder が、eWeek.com による 15 人の今日のセキュリティで最も影響力のある人物の一人という称号を得ました。「前 Microsoft のセキュリティ戦略担当者である、Window Snyder は、レッドモンドのプレイブックから 1 ページを借り、包括的な脅威モデリングと侵入テストルーチンを紹介しました。 Snyder の裏でのセキュリティに関する努力 - 外部のハッカーチームが Firefox 3 上 での模擬攻撃を指揮することを含む - は、オープンソースの代替 Web ブラウザに対して良い結果を生むことになると確信しています。」さらなる情報とリストアップされた他の人物を見るには、eWeek の記事をチェックしてください。

+ +

Chris Beard が東京に

+ +

Gen Kanai は、Mozilla Labs の VP である、Chirs Beard が、2 件の話をする約束で今週東京に来るだろうということをブログに書いています。2 月 28 日は、ZDNet Japan の 「builder techday: open apis and beyond」で、Mozilla の 観点からの「Open Web」について話します。2 月 29 日は、オープンソースカンファレンス 2008 Tokyo/Spring で講演します。彼は、エキサイティングな新しい Mozilla Labs の開発プロジェクトについての情報を含む Mozilla での最近の活動の概要を参加者に提供します。彼はまた Web の将来に対しての彼のビジョンとオンライン生活を発展させるためのオープンソースの役割についても話します。これらのイベントについてのさらなる情報は、Gen のブログ投稿を参照してください。

+ +

Firefox が Webware 100 のファイナリストに

+ +

Firefox は、「Webware 100」アワードの「ブラウザ」カテゴリでのファイナリストの称号を得ました。アワードへの投票は公開でなされ、昨日始まりました。勝者は、サンフランシスコで行われる Web 2.0 Expo の前日である、4 月 21 日に発表される予定です。さらなる情報、及び、投票するために、Web 2.0 Expo の Webware 100 アワード Web サイトを参照してください。

+ +

EFF Pioneer アワード

+ +

 は、最近、「EEF Pioneer Awards」の 2008 年の受賞者を発表し、Mitchel Baker と Mozilla Foundation は、受賞者の称号を得ました。「Mitchell Baker は、Mozilla Foundation の 会長であり、オープンソースの Mozilla プロジェクトのスポンサーシップを通して、インターネットのオープン性、イノベーション、機会を促進することに献身しています。Mozilla Foundation は、Firefox ブラウザ、Thunderbird E メールアプリケーション、その他の Mozilla ソフトウェアが関係する開発プロジェクトに対して、助成金、法律サービス、その他のサポートを提供しています。」今年の他の受賞者を含む、アワードについてのさらなる情報は、EFF Pioneer AWards のサイトとブログ投稿を参照してください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080304/index.html b/files/ja/orphaned/devnews/20080304/index.html new file mode 100644 index 0000000000..ec31f9e325 --- /dev/null +++ b/files/ja/orphaned/devnews/20080304/index.html @@ -0,0 +1,79 @@ +--- +title: '20080304' +slug: DevNews/20080304 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

Firefox 3 Beta 4 及び 現在のツリーステータス

+ +

先週の Firefox/Gecko ミーティングで議論されたように、Firefox 3 Beta 4 は、数日間コードフリーズされた後、ビルドチームにタギングとリリースのために移譲されます。リリースプロセスについての更新情報は、Firefox 3 Beta 4 リリーストラッキングページを参照してください。DevNews の投稿で概要が説明されているように、ツリーは、ブロッカーと許可されたパッチのために再び開かれました。現在のツリーステータスは、いつものように、Tree Status Wiki ページで確認可能です。

+ +

Thunderbird 2.0.0.12 リリース

+ +

Mozilla Corporation の安定性とセキュリティ更新プロセスの前進の一部として、 Thunderbird 2.0.0.12 が、Windows、Mac、Linux 向けに、www.getthunderbird.com から自由にダウンロード可能になっています。セキュリティの修正が含まれているため、全ての Thunderbird ユーザがこの最新リリースに更新することを強く推奨します。さらなる情報は、Thunderbird 2.0.0.12 の リリースアナウンスとリリースノート（Mozilla Japan による日本語訳）を参照してください。

+ +

お願い：いまだに Thunderbird 1.5.0.x を使用しているなら、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいますので、www.getthunderbird.com から Thunderbird 2 をダウンロードし、アップグレードしてください。

+ +

新しい ウィークリー Thunderbird ミーティング

+ +

今日（3 月 4 日）から、Thunderbird Project の ウィークリーステータスミーティングが行われる予定です。これらのミーティングは、現在、午前 9:30 太平洋時間に実施が予定されており、週毎の 議題と ダイアル番号とともに、詳細は、mozilla.dev.planning ニュースグループ に投稿されます。さらなる情報は、Thunderbird ステータスミーティング Wiki ページに用意されています。

+ +

Google summer of code 始動

+ +

Gervase Markham は、ブログに次のように書いています。「Google Summer of Code 2008 が始動しました。Mozilla Project は、今年も参加する要望を出すつもりです。そのためには、2 週間後までに、参加するにふさわしいプロジェクトの一覧を作成する必要があります。去年のように、私たちは、 Firefox、Thunderbird、Camino、Seamonkey、Bugzilla、そして、L10n のためのアイデアを集めています。計画を持っているならば、Brainstorming ページへ進んでください。」さらなる詳細と情報は、Gerv のブログ投稿と Google Summer of Code 2008 のサイトを参照してください。

+ +

ロイターにおける Mozilla China の分析

+ +

ロイターは、Li Gong が主導している Mozilla China チームの分析をまとめました:Mozilla seeks growth and tie-ups in China market（Mozilla は成長を模索し、中国市場とタイアップする）。Gen Kenai がこの非常に興味深い記事についてブログで取り上げ、参考となるいくつかのリンクを紹介しています。

+ +

NPR での Asa Dotzler へのインタビュー

+ +

NPR のウェブサイトより「Firefox が小さなブラウザだったときのことを覚えていますか？Mozilla Firefox は、祝 5 億ダウンロードを達成しました。Mozilla の Community Development Director が、オレンジの狐の未来には何があるのかを語ります。」 8 分ほどの音声インタビューを聞くために、NPR のサイトに進んでください。

+ +

ECMAScript4 の実装が更新

+ +

John Resig は、次のように書いています。「ECMAScript 4 の開発は、重要なフェーズに移行しています。実装者は、上手くやっています。言い換えれば、 ECMAScript 4 の計画を実装し始めているということです。多くの機能が、この時点で考えられており、実装者は、エンジンに必要な変更を統合するために懸命に作業をしています。」現在の ES4 実装ステータス、及び、2 番目のマイルストーンリリースへのリンクについてのさらなる情報は、John のブログ投稿を参照してください。

+ +

Miro、Firefox、Joost が、Webware 100 のファイナリストに

+ +

Mozilla Links の Percy Cabello は、次にように書いています。「昨年と同様、Firefox が、お気に入りの Web 2.0 アプリケーションの年間アワードである、Webware 100 の ブラウジングカテゴリのファイナリストに選ばれています。今年は、二つの他の Mozilla ベースのプロダクトがビデオカテゴリにノミネートされています。オープンソースのビデオプレイヤー及びアグリゲイターである、Miro と商業の インターネット TV を提供する Joost です。投票は、3 月 31 日までです。」

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080310/index.html b/files/ja/orphaned/devnews/20080310/index.html new file mode 100644 index 0000000000..a540c2af11 --- /dev/null +++ b/files/ja/orphaned/devnews/20080310/index.html @@ -0,0 +1,25 @@ +--- +title: Firefox 3 Beta 4 がダウンロード可能に +slug: DevNews/20080310 +tags: + - DevNews + - 'DevNews:General' +--- +

注意: 開発者とテスター以外の方には Firefox 3 Beta 4 マイルストーンリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを対象としています。

+ +

Firefox 3 Beta 4 がダウンロード可能になりました。これは開発者向けの 12 番目のマイルストーンであり、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。

+ +

このマイルストーンでフィードバックが求められている新機能と変更は以下の通りです。

+ + + +

(リリースノート の 「新機能」 セクションでこれらすべての機能についての詳細を見ることができます。)

+ +

テスターは 35 以上の異なる言語に対応した Windows、Mac OS X、および Linux 用の Firefox 3 Beta 4 ビルド をダウンロードできます。このプレビュー版を使用する前に、必ず リリースノート をすべて読んでください。開発者は Mozilla Developer Center の 開発者のための Firefox 3 に目を通すべきです。

+ +

注意: ダウンロードサイトに直接リンクを張らないでください。代わりに、この Firefox 3 Beta 4 マイルストーンの告知へリンクすることを強く推奨します。これは、このマイルストーンがどういうものなのか、何を期待すべきなのか、ダウンロードしてこの開発段階でのテストに参加するべきなのはどういう人なのかをすべての人に知ってもらうためです。

diff --git a/files/ja/orphaned/devnews/20080311/index.html b/files/ja/orphaned/devnews/20080311/index.html new file mode 100644 index 0000000000..513aaf0ba7 --- /dev/null +++ b/files/ja/orphaned/devnews/20080311/index.html @@ -0,0 +1,79 @@ +--- +title: '20080311' +slug: DevNews/20080311 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3 Beta 4 出荷

+ +

Firefox 3 Beta 4 がダウンロード可能になりました。開発者とテスター以外の方には このベータリリースのダウンロードをお勧めしません。このリリースはテストを目的にした使用のみを想定していることに注意してください。いつものように、Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning 、 irc.mozilla.org の #granparadiso で追うことができます。このベータ版でテストする必要がある新しい機能と変更はについてのさらなる情報は、DevNews のブログ投稿（日本語版）を参照してください。

+ +

Firefox 3 Beta 5 の予定

+ +

で、Firefox 開発チームは、残っている blocker バグの数に基づき、Firefox 3 には 5 つ目のベータが必要であるとの結論を出しました。この追加ベータ版によって、Web サイトの互換性に影響するだろう変更やユーザエクスペリエンスを、フィードバックとテストのために幅広い利用者にさらすことが保証されるでしょう。Beta 5 のための String フリーズの締め切りはすでに過ぎていて、コードフリーズは現在、3 月 18 日に予定されています。このベータ版とその予定についてのさらなる情報は、DevNews のブログ投稿を参照してください。

+ +

あなたのアドオン を Firefox 3 対応に更新して、無料の T シャツをもらおう！

+ +

Alex Polvi は、次のように書いています「AMO に拡張を登録していますか？それは、Firefox 3 で動作しますか？もしそうならば、AMO へ向かい、Add-ons Developer T シャツを要求してください（Developer Tools > T-Shirt Request からも可能です）。もしあなたの拡張が現在互換性がないならば、の要求は、3 月 18 日までに行ってください。また、あなたのアドオンがチームによって開発されていて、さらにもう 1 枚 T シャツを必要としているなら、私たちに連絡してください。手配するために私たちは全力を尽くします」。アドオンの更新の仕方、もし必要とするならば、助けを得る方法についてのさらなる情報は、Alex のブログ投稿を参照してください。

+ +

セネカカレッジに Mozilla Foundation が援助金

+ +

Mozilla Foundation は、Mozilla と セネカカレッジの Centre for Development of Open Technology のコラボレーションを推し進めるために、サポートするためにセネカカレッジに 10 万 米ドルの援助金を提供しました。Centre では、セネカカレッジの全教職員と生徒が、Firefox のような Mozilla ソフトウェア製品の開発への貢献を行います。この資金は、新しいカリキュラムを設けたり、すでに存在するカリキュラムを拡張したり、他のアカデミックな団体が利用するための Mozilla カリキュラムを準備するためにために利用されます。セネカカレッジの Mozilla 関連コース、プロジェクト、リソースの完全な一覧は、セネカカレッジの Wiki をチェックしてください。援助金についてのさらなる情報は、プレスリリースを通して得ることができます。

+ +

Dehydra：Mozilla コードのための新しい静的チェックツール

+ +

Benjamin Smedberg は、Mozilla のコードの質と開発サイクルの改善を助ける新しい静的チェックツールについてブログに書いています。Taras と David によって開発された Dehydra は、コンパイル時に適用されるアプリケーション特有の規則にしたがって、時間を節約し、いくつかの簡単に生成できるコーディングエラーを見つけ出すことを必要とする試みを助けることを可能にします。Dehydra は、まだ開発進行中であり、チームは、このプロジェクトを手伝ってくれるハッカーを探しています。Dehydra、手伝う方法、ツールのビルドの仕方などについてにさらなる情報は、Benjamin のブログ投稿「Statically checking the Mozilla codebase」を参照してください。

+ +

Prism のメジャーアップデート、ブラウザ統合への最初のプロトタイプ

+ +

Mozilla Labs は、新しいデスクトップ統合の可能性を持ち、より簡単にインストール出来る、ブラウザ統合の最初のプロトタイプを含んでいるメジャーアップデートをリリースしました。Prism は、ユーザに Web アプリケーションをブラウザ外に切り離し、デスクトップ上で直接実行することを可能にさせるオープンソースクラスプラットフォームのプロトタイプです。これは、Web と デスクトップの間にあるユーザエクスペリエンスの断絶を橋渡しし、これら両者の境界線を曖昧にするような新しいユーザビリティモデルを模索する一連の Mozilla Labs の実験の一部です。Prism とこの最新リリースについてのさらなる情報は、Mozilla Labs ブログの投稿を参照してください。

+ +

Mozilla が GNOME アクセシビリティ推進プログラムを資金援助

+ +

GNOME Foundation は、GNOME のアクセシビリティの全体的な質を改善するとともに、GNOME と 幅広いフリーソフトウェアコミュニティの間にソフトウェアのアクセシビリティへの気づきを宣伝するためのアクセシビリティを推進するプログラムを実施しています。Mozilla Foundation は、GNOME Foundation、Google、Canonical、Novell とともに、5 万米ドルプロジェクトのスポンサーの中の一つです。プログラムは、3 月 1 日にアプリケーションの受け付けを開始し、年末まで継続します。プログラムに参加することに興味がある人は、プロジェクト Web サイトをチェックしてください。さらなる情報は、プレスリリースで得ることができます。

+ +

3 人の Mozilla 関係者へのインタビュー

+ +

最近、3 人の Mozilla 関係者がインタビューを受けました。John Lilly が、Sarah Lacy に Yahoo でインタビューされました。Johnathan Nightingale が、Crazy Engineers のメンバーに、Firefox と Mozilla での仕事についてインタビューされました。そして、Vladimir Vukicevic が、InternetNews.com にインタビューされました。

+ +

Planet Mozilla への最近の追加

+ +

最も最近の Planet Mozilla ブログアグリゲーターへの追加は、 Bryan Clark、Mark Smith、Laura Thomson、Marcio Galli、Gavin Sharp、Code Simplicity、Stephen Lau、Jane Finette、 For the Record、そして、Carsten Book の面々です。さらなる情報は、Planet Mozilla ブログを参照してください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080318/index.html b/files/ja/orphaned/devnews/20080318/index.html new file mode 100644 index 0000000000..21c296f1f0 --- /dev/null +++ b/files/ja/orphaned/devnews/20080318/index.html @@ -0,0 +1,99 @@ +--- +title: '20080318' +slug: DevNews/20080318 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3 のメモリ使用量

+ +

Web と Web ブラウザが成熟してくるのに連れて、人々は、それまでとは違うものに期待し始めました。Firefox が初めてリリースされたとき、タブでブラウジングし、大量のアドオンを利用していた人々はわずかでした。ブラウザの使用パターンが変化してくるのに連れて、メモリのようなシステムリソースをどのように効果的に利用するかに関しての Mozilla の方針も変化してきました。多くの変更が Firefox 3 を構築するプラットフォームになされていますが、その中に、ブラウザのメモリのフットプリントを減らすことを目的とした多くの変更が含まれています。特に、最近リリースされた Firefox 3 Beta 4 において、Firefox 3 がメモリ使用量で他のモダン Web ブラウザの全てを打ち負かすようになったことを示すテストの結果が出たことは、劇的です。

+ +

Stuart Parmenter が、Firefox 3 のメモリ使用について、彼のウェブログの投稿で説明しています。彼の説明に言及した投稿がいくつかあり、その中には、John Resig、Tristan Nitot、そして、Chris Blizzard のウェブログが含まれています。Ars Technica も、この話題に関する記事を書いています。

+ +

Mozilla QA Companion がリリースされました

+ +

Mozilla の チームは、人々が Firefox をテストすることを助けることによって Mozilla プロジェクトに参加することをより簡単にするために作成された、新しい「Mozilla QA Companion」Firefox アドオンをリリースしました。このアドオンは、Litmus からテストケースを引っ張り出し、簡単に使える応答フォームを提供し、ユーザに QMO サイトとフォーラムのライブフィードを通して Bug Days のようなイベントの更新を通知します。Chatzilla も同梱していているので、ワンクリックで Quality Assurance の IRC チャンネル (#qa) にアクセスできます。このアドオンは、現在ベータですので、まだいくつかの細かい問題とバグが残っている可能性があります。さらなる情報とこのアドオンのダウンロードリンクは、QA ブログを参照してください。

+ +

 

+ +

Mozilla at SXSW

+ +

年一回の South by Southwest(SXSW) インタクラティブカンファレンスが、先週、暖かなテキサスのオースティンで行われました。数千人の Web 開発者たちが、最新の技術を聞き、少しでも良い Web 開発コミュニティと知り合うために国を越えて集まりました。Mozilla もしっかりと参加しました。Aza Raskin (User Experience Lead for Mozilla Labs)は、インテリジェントなユーザインターフェースをデザインすることについての議論を企画し、John Resig (JavaScript Evangelist) は、Secrets of JavaScript Libraries についてのパネルディスカッションを企画し、そして、Brendan Eich (CTO of Mozilla Corporation) は、多くの主要ブラウザベンダとともに 「Browser Wars」パネルディスカッションに参加しました。

+ +

Mozilla は、Firefox のユーザと開発者がつながる機会を得るための開発者懇談会も企画しました。その中で、私たちは、新しい Firefox アドオンのための面白いアイデアを募集するクイックコンテストを実施しました。3 人の受賞者は次の方々です。

+ + + + + + + +

私たちは懇談会に来てくれたみなさんとアドオンコンペに参加してくれた方々に感謝したいと思います。私たちはみなさんと話せて素晴らしい時間を過ごせました。 来年また会えることを期待しています！

+ +

John Lilly と Mike Schroepfer が Matt Asay にインタビューされました

+ +

Matt Asay は、Mozilla の CEO である John Lilly と 技術担当バイスプレジデントである Mike Schroepfer に一時間かけてインタビューしました。Matt は、Lilly と Schroepferg との会話を非常に面白くまとめています。その内容は、Webware ブログ（CNET Japan による日本語訳）で読むことができます。

+ +

Effortless Good Firefox アドオン

+ +

Participatory Culture Foundation は、どんな努力もすること無しに良いことをすることを支援する、新しい Firefox アドオンをリリースしました。クリックでアドオンをインストールして、好きなときに Amazon で買い物をするだけで、買い物の一部が、四つの非営利組織 - Rainforest Alliance、Save the Children、Grameen Foundation、そして、Participatory Culture Foundation に寄付されます。このアドオンは、現在、アメリカ、イギリス、カナダ、フランス、ドイツ、そして、日本で動作し、Amazon をブラウジングしているときに URL に リファレンスコードを追加するだけの機能を持っています。あなたが何かを購入したときに、Amazaon の 紹介料が PCF の元に集まり、四つの非営利組織に配分されます。さらなる情報と、アドオンのインストールのために、Effortless Good の Web サイトに今日向かってください。

+ +

Gecko の年

+ +

Mozilla の Chief Evangelist である Mike Shaver は、2008 年は、「Gecko の年」であると宣言しました。Gecko は、Mozilla プロジェクトを構成する（Firefox も含む）プラットフォームであり、そのプラットフォームで実現されるパフォーマンスが新たに向上し、まさにそれを用いてソフトウェアを構成し始めるのにふさわしいときです。Shaver は、次のように書いています。「速い、小さい、クロスプラットフォーム、業界トップの安定性、堅実な OS 統合、素晴らしい標準サポート、生産的なアプリケーションプラットフォーム、アクセシブル、徹底的な地域化、上から下までオープンソース：今こそ Gecko を利用するのにふさわしいときですが、Firefox 3 はまだ始まったばかりです。私たちが次のリリースのために取ってあるものを見るまで待ってください。」Shaver のウェブログで続きを読んでください。

+ +

Executive Director 募集の件の最新情報

+ +

現在、Mozilla Foundation は、新しい Executive Director を探しています。Mitchell Baker は、彼女のウェブログに過程についての最新情報を投稿し、次のように書いています。「私たちは、Mozilla の複雑さと歴史を理解でき、主導できる人々の数は少なく難しいのではないかと思いましたが、その考えは正しかったのです。」これまでの Executive Director 探しの概要を含む、さらなる情報は、彼女のブログにあります。

+ +

無料の T シャツを手に入れるラストチャンスです！

+ +

3 月 18 日（今日です！）は、アドオンを Firefox 3 に更新して無料の T シャツを手に入れるための最終締め切りです。Alex Polvi のウェブログに全ての詳細がありますが、早く動いてください。今日が無料の T シャツを提供できる最後の日です。

+ +

Beta 4 での Firefox 3 の AwesomeBar の変更

+ +

新しい Firefox 3 の「AwesomeBar」の責任開発者の一人である、Edward Lee が、Firefox 3 Beta 4 の新しいロケーションバーに含まれている新機能についてブログに書いています。適応学習システムはドロップダウンメニューで単語を入力しなくても動作します。ですから、キーボード入力からだけでなく、マウスからでも恩恵を得ることができます。さらに、ロケーションバーで複数の単語で検索することが可能になりました。また、検索対象には、ブックマークしたページに追加したタグが含まれるようになっています。他にも、より先進的なユーザのために追加された多くの変更と機能があり、Edward は、それらについても、彼のブログ投稿で詳細に説明しています。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080325/index.html b/files/ja/orphaned/devnews/20080325/index.html new file mode 100644 index 0000000000..a1f6d098fc --- /dev/null +++ b/files/ja/orphaned/devnews/20080325/index.html @@ -0,0 +1,71 @@ +--- +title: '20080325' +slug: DevNews/20080325 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Extend Firefox 3 コンテストを実施します

+ +

Extend Firefox 3 は、Firefox 3 製品版リリースのための新しい Firefox アドオンの開発に対して賞を与える、グローバルなデベロッパーコンテストです。応募作品は、専門家の集まりによって審査され、大賞及び入賞作品は、 Firefox 3 において導入された新しい機能を活用し、ユーザエクスペリンス、イノベーション、オープンスタンダードの利点を説明しているアドオンから選ばれます。コンテストについてのさらなる情報は、Mozilla Labs の告知を参照してください。

+ +

Firefox 3 T シャツコンテンストの投票が開始されました

+ +

Firefox 3 の T シャツデザインコンテストですが、現在、応募締め切りは過ぎ、5 つの最終選考作品が選ばれました。投票が現在開始され、あなたの参加を待っています！Mozilla Store の Firefox 3 T シャツコンテストの投票ページへ行き、最終選考作品の 5 つからお気に入りを選んでください。投票は、7 日間実施され、勝者は、Mozilla Store で公式 Firefox 3 T シャツ として取り扱われます。コンテストについてのさらなる情報は、公式コンテストサイトをチェックしてください。

+ +

Firefox 3 Beta 5 では新しい言語が加わります

+ +

来る Firefox 3 Beta 5 には、5 つの新しい言語（アフリカ語、インドネシア語、モンゴル語、ノルウェー語ニーノシュク、セルビア語）が含まれる予定になっています。これらの新しいローカライゼーションのレビュー及びテストに対して提供できるどんな助けもおおいに歓迎します。それらは、 Firefox 3 Beta 5 の「all-beta download page」からダウンロード可能になる予定です。もし問題を見つけたら、バグ報告するか、フィードバックを Mic Berman に彼女のブログ投稿を通して送ってください。

+ +

Mike Shaver へのインタビュー

+ +

「How Software is Built」サイトは、Mozilla のチーフエヴァンジェリストである、Mike Shaver の長大なインタビューを掲載しました。このインタビューは、プロジェクトの統括、どのように人々が参加するか、重要な役割を占める貢献者の変化、オープンソースプロジェクトにおける高いユーザビリティの確保、開かれた開発モデルと閉じられた開発モデルの検討、その他を含む、幅広い範囲のトピックをカバーしています。How Software is Built でインタビュー全文を読んでください。

+ +

Mozilla at FISL

+ +

Mozilla は、4 月 17 日から 4 月 19 日までブラジルで行われる Forum Internacional Software Livre (International Free Software Forum) に参加する予定です。Mitchell Baker は、Mozilla Project について話します。Felipe Tassario Gomes は、XULRunner、JavaScript、そして、SQLite について話します。Chris Hofmann、Marcio Galli、そして、Christopher Blizzard は、ブラジルでの Firefox についてのパネルディスカッションを行います。そして、Mozilla ルームとワークショップもあります。さらなる情報は、 FISL のウェブサイト、Mozilla wiki、もしくは、Chris Blizzard のブログ投稿を参照してください。

+ +

Summer of Code の申込が開始されました

+ +

Google Summer of Code の学生申込期間が今週初めに開始されました。提案されたプロジェクトのうちの Mozilla に関するものの一覧化は、現在ほとんど完了していますが、学生は、もちろん自由に、一覧以外のアイデアを提案できます。Mozilla コミュニティのメンバーは、学生に私たちに頼むように知らせてください。Mozilla が Google Summer of Code に参加することについてのさらなる情報は、Gervase Markham のウェブログを参照してください。

+ +

更新された mozilla.org のライセンスポリシーの草稿がレビュー可能になっています

+ +

Gervase Markham は、mozilla.org のラインセンスポリシーについて作業していますが、その草稿が現在閲覧可能になっています。特に、あなたが Bugzilla、Rhino、Tinderbox、などのような mozilla.org プロジェクトのオーナーならば、草稿文書をレビューすることを強く推奨します。草稿とレビューが必要な部分についての情報についてのさらなる情報は、Gerv のウェブログを参照してください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080401/index.html b/files/ja/orphaned/devnews/20080401/index.html new file mode 100644 index 0000000000..0a8ccbeefb --- /dev/null +++ b/files/ja/orphaned/devnews/20080401/index.html @@ -0,0 +1,83 @@ +--- +title: '20080401' +slug: DevNews/20080401 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla 10 周年

+ +

1998 年 3 月 31 日は、Mozilla が公式に活動を開始した日です。この日に、最初の Mozilla のコードが公式なオープンソースライセンス条項の元で公に公開され、プロジェクトの運営組織 - Mozilla Organization - が公的な活動を開始しました。10 年前、ひとつの急進的な考えが具体化されました。その考えは、オープンソースコミュニティが、巨大な商業ベンダーではできない、主要なインターネットテクノロジーに選択と革新をもたらすというものでした。この考えが Mozilla プロジェクトとして具体化されたのです。

+ +

3/31 からずっと、私たちは、その急速な考えを持ち、そのパワーを証明し続けてきました。私たちは、その考えを最初の頃からの想像を超えて広めてきました。そして、次の十年においても、私たちは、開放、参加、機会、選択、そして、革新というような基本的な性質をインターネット自身の基本インフラに構築するべく、急進的であり続けます。Mitchell のブログ投稿を参照して、この記念日、過去 10 年の私たちが達成したこと、そして、目の前にある素晴らしい機会についてさらに読んでください。

+ +

フォクすけがディズニーに

+ +

アメリカのアニメーションの巨人が日本のアニメーションスタジオととともに映画製作をするという最近のニュースに関連し、Mozilla Japan は、フォクすけをウォルト・ディズニー社の新しい日本のアニメーション製作会社とのジョイントベンチャーに非公開価格で売却することを発表しました。Mozilla Japan マーケティングマネージャの Kaori Negoro は、「私たちは、フォクすけが成長の次なるステージのためのグローバルステージを手に入れることになったことを喜んでいます。フォクすけは、日本における Firefox のマスコットキャラクターであり、日本の 7000 人を超えるコミュニティメンバーのコンテストで名前が付けられました

+ +

Paul Kim が TreeHugger にインタビューされました

+ +

先週、TreeHugger（緑に関するニュース、ソリューション、そして、製品インフォメーションのためのワンストップショップ）が Mozilla の Marketing VP である Paul Kim にインタビューしました。「素晴らしい Firefox Web ブラウザのクリエイターである Mozilla コーポレーションは、ソフトウェアが 100 % オーガニックであることを宣言します。いいえ、それは食べられません。しかし、Paul Kim へのこのインタビューにおいて、彼は、なぜ表現がその適切なのかを説明しています。」TreeHugger で完全なインタビューをチェックしてください。

+ +

Mozilla Toronto オフィスが移転

+ +

膨大な計画と重労働の後、Mozilla Toronto オフィスが、Toronto のダウンタウンの中心部であり、世界中でも最も高い建物の一つである CN タワーがある 301 Front Street に移転しました。新しいオフィスへの訪問者は、70 秒間エレベータに乗り、128 階まで上がります。そこにある Mozilla オフィスからは、素晴らしい眺めが広がっています。さらにアスレチックな訪問者には、吹き抜けがあります！Johnathan と Mike を含む、何人かの 地元 Mozilla コミュニティのメンバーが、移転についてブログに書いています。

+ +

addons.mozilla.org (AMO) リデザイン & 再始動

+ +

この数か月間、AMO チームはメジャーサイトのリデザインに関する作業に懸命に取り組んできましたが、ついに新しい AMO サイトの稼働を発表できたことを喜んでいます。これはサイトにとって重要なリリースであり、エンドユーザとアドオン開発者双方に良いことがたくさんあります。圧倒的に、見た目が一新されたことに目が行きがちですが、それが今回の作業の全てではありません。多数の変更の完全な一覧は、Basil のウェブログにあります。 John Slater、Mike Morgan、Madhava Enros を含む、他のメンバも、この新しいサイトについてブログに書いています。

+ +

Firefox 3 Beta 5 での新機能

+ +

Firefox 3 Beta 5 は、Gecko 1.9 に搭載されるロボティック Web テクノロジーについてもっと知りたいユーザへのサポートが含まれいます。魔法との区別がつかないこれらの先進的なテクノロジーは、改ざん防止装置のように、主要なユーザインタフェースからは隠れています。改ざんが検知されると、そのページは、自身の存在を守るための対策を講じます。私たちはこのページをセキュアにする方法について作業中ですが、その間に、ユーザは用心深さを鍛えるべきです。

+ +

Firefox Gold Edition 発表

+ +

Firefox Gold 1.0 は、ユーザに、より簡単な作成、編集、及び、ライブオンラインドキュメントのナビゲートのためのエクスペリエンスレベルの全てを提供する次世代のソフトウェアツールです。World Wide Web が持つリッチな表現と電子メール、スレッドディスカッショングループ、そして、ファイル転送機能に加え、Firefox Gold では強力な WYSIWYG ドキュンメント作成機能をコア Firefox 環境に統合することによって、Web、E-mail、あるいは、ニュースグループをシンプルなカットアントペーストとドラッグアンドドロッププロセスで編集することが可能になっています。

+ +

Firefox Gold におけるドキュメント作成機能は、コンテンツ作成者の経験者と初心者双方にオンラインドキュメントの編集と発行のためのシンプルながらパワフルなソリューションを提供するようにデザインされています。Firefox Gold は、 Adobe Acrobat、Macromedia Director、Progressive Networks RealAudio、などの多くのインラインプラグインもサポートすることにより、インターネットサイトに組み込まれたリッチマルチメディアコンテンツを可能にしています。

+ +

Module Ownership 計画

+ +

2 つに分けられたブログ投稿において、Mitchell は、Mozilla プロジェクトのモジュールオーナーシップシステムのための責任を追うためのグループを作成するための新しい計画の概要を述べています。そのグループは、日々の基礎となる膨大な量の作業を行いませんが、モジュールオーナーシップの監督のための責任を負うことになります。それは、モジュールオーナーの一覧のレビューと更新を含み、他の関連する事柄をそれらが発生したときに扱います。今まで、これらの仕事は、様々な個人（David Baron、Brendan、Stuart）にいって行われていましたが、最近、そのグループの所有下に置かれるようになりました。Mitchell のブログでは、計画と理由を詳細に説明しています。彼女の Module Ownership - Part 1 及び Module Ownership - Part 2 の投稿を読んでください。

+ +

事務処理が混乱：5 億粒の米

+ +

Mozilla プロジェクトは、先週、自身の成功の犠牲になりました。5 億粒の米が freerice.com を通してコミュニティによって寄付され、マウンテンビューの Mozilla HQ に到着しました。United Nations World Food Program とともに意図した受け取り者のために米を集めるように整理がなされましたが、それがいくつかの面倒なことを引き起こしています。Mozilla の Marketing & Foodstuffs の VP である Paul Kim は、次のようにコメントしています。「米がいたるところにあります。私たちはドアを開けることができません。ですから、私たちは外出にグランドフロアの窓を利用しています。誰も木曜日から Stuart を見ていません。しかし、私たちのメモリの数字は、より良い方向に向かい続けています。ですから、彼は元気だと私たちは思います。」

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080408/index.html b/files/ja/orphaned/devnews/20080408/index.html new file mode 100644 index 0000000000..72b1cdf476 --- /dev/null +++ b/files/ja/orphaned/devnews/20080408/index.html @@ -0,0 +1,90 @@ +--- +title: '20080408' +slug: DevNews/20080408 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

Firefox 3 Beta 5 がリリースされました

+ +

Firefox 3 Beta 5 がダウンロード可能になりました。インストールの前にリリースノートと既知の問題を読んでください。このマイルストーンは、Firefox 3 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、 や mozilla.dev.planning、irc.mozilla.org の #granparadiso で追うことができます。このリリースについてのさらなる情報は、DevNews のブログ投稿を参照してください。

+ +

Firefox 3 に参加してください！

+ +

今後予定されている Firefox 3 のリリースについての素晴らしい成果の全てを聞いて、それに参加したいとは思っていませんか？開発とテストが全て終わっても、まだすべき重要な仕事が残っています！ユーザサポートを提供することによって、Firefox 2 から更新しようとするユーザや初めて Firefox 3 を利用しようとするユーザのためにリリースがスムーズに進むことが保証されることにつながります。

+ +

SUMO (support.mozilla.com) チームは、SUMO についてと、他の Firefox ユーザがお気に入りのブラウザを楽しむことを助けるための SUMO サイトの使い方を知ることができる日を設けました。もし Firefox のユーザサポートを助けようと思ったことがありながらどこから始めるべきかわからなかったなら、この日はあなたのための日です。さらなる情報と詳細は、SUMO のブログ投稿と SUMO Day 情報ページを参照してください。

+ +

新しい Thunderbird Bugdays

+ +

ユーザと質への焦点を高めるための一環として、Thunderbird チームは Thunderbird Bugdays を毎週木曜日に行うことを告知しました。この Bug Days の目的は：1) Bugzilla データベースに登録されているバグの数をもっと管理できるレベルにまで減らすこと、2) もっとタイムリーにバグレポーターに対して応え、支援すること、3) 開発者がもっと簡単に手を出せるように Bugzilla データベースに登録されているバグの質を向上させること。

+ +

Bug Day は、バグ潰しの日であり、初心者、ベテラン双方の Thunderbird ユーザを引き合わせます。irc.mozilla.org の #bugday は、経験を積んだバグハンターが新しい参加者に助言をする場所であり、また、全員がお互いに助け合い、バグと戦い、楽しむことができる場所です。

+ +

Thunderbird チームは、Bug Days を実りあるものかつ楽しいものにするためにあなたの助けを必要としています。ですから、どうか、私たちの計画案を見て、あなたの考えを Wiki に書き加えるか、開発者ニュースグループに投稿してください。

+ +

Mitchell Baker が The Guardian でインタビューされました

+ +

今年初め、Jack Schofield が Guardian の Technology 部の記事として Mitchell Baker にインタビューしました。彼はインタビューの記録を記事よりも長い未編集のまま Guardian Technology ブログに投稿しました。その中で彼と Mitchell は、Mozilla と Microsoft、マーケットシェアを競うよりももっと重要なこと、なぜ Mozilla は Thunderbird をもっとプッシュするために Firefox を使おうとしないのか、そして、なぜ Mozilla は真剣にモバイルに取り組んでいるのか、について話しています。Guardian ブログで記事の全文を読んでください。

+ +

Acid3 テストに対する David Baron の意見

+ +

Acid テストは、Web Standards Project によって公開されている一連の「Web 標準準拠」テストです。一番最新のものは、Acid3 であり、JavaScript、DOM、SVG への準拠（他のものも含まれます）をテストします。著名な Mozilla 開発者であり、W3C CSS ワーキングループのメンバーである David Baron は、Acid3 テストは様々なブラウザの物差しとして使うべきであるということについてどのように考えているか、テストを完璧にすることに関しての Mozilla の方針は何か、というような Acid 3 テストについての彼の意見をブログに書いています。David のブログで詳細を読むことができます。

+ +

Mozilla Labs の更新情報

+ +

Mozilla Labs の先頭に立つ、Chris Beard がラボにおいて何が進んでいるかということについての手短な更新情報を投稿しています。先週見たものは、Weave と Personas を含む、多くの Labs のプロジェクトのメジャーアップデートの開始でした。また、ユーザテストフレームワークと Labs プロジェクト周辺のコミュニティの強化を目的とした、新しい Test Pilot プロジェクトも紹介されています。さらに Chris は最近、数時間に渡ってインタビューされました。その結果は、Firefox 4 will push out the edges of the browser （Firefox 4 はブラウザの限界を超える、CNET Japan による日本語訳）及び Mozilla wants to put a Firefox in the cloud and in your pocket（Mozilla は Firefox を雲の中とポケットの中に入れたい）という 2 本の記事になっていて、チェックする価値があるものとなっています。さらなる詳細は、Chris のブログ投稿を参照してください。

+ +

クラッシュレポートシステムが変更に

+ +

Mozilla WebDev チームは、最近、システムのユーザビリティとパフォマーンスの両方の改善を目的としたクラッシュレポータシステム（コードネーム：Socorro）のための重要な更新を発表しました。これらの変更はプロセッサコード（Breakpad サーバアーキテクチャ の 1/3） の幅広いリファクタリングとリクエストされたレポートの即時のキューを可能にする更新を含みます。さらなる詳細は、WebDev ブログの投稿を参照してください。

+ +

10 周年記念パーティの写真

+ +

オリジナルの Netscape のソースコードがリリースされた 3 月 31 日に、私たちは Mozilla プロジェクトの開始から 10 周年記念を迎えました。私たちは 2008 年を通して「Mozilla の 10 周年」を祝いますが、31 日にこの特別な日を祝おうというささかやかなパーティがあり、自然と数台以上のデジタルカメラが持ち込まれました。このイベントの写真は「Mozilla Anniversary」キーワードと「mozillaturns10」キーワードが付けられて、Flickr に投稿されていて、David Rolnitzky のアカウントから直接見ることができます。参加者全員にとって良い時間だったことがわかるでしょう。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080415/index.html b/files/ja/orphaned/devnews/20080415/index.html new file mode 100644 index 0000000000..eb13926deb --- /dev/null +++ b/files/ja/orphaned/devnews/20080415/index.html @@ -0,0 +1,76 @@ +--- +title: '20080415' +slug: DevNews/20080415 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3: ツリーが RC1 のためにロックダウン

+ +

4 月 8 日に、Firefox ツリーは Firefox3 Release Candidate 1 のリリースを準備するためのロックダウン段階に入りました。このリリースのために過去のベータと同様のプロセスが行われます。つまり、blocker リストをゼロにする作業が行われ、より厳しく退行バグの潜在をコントロールするために、明白に認められたパッチだけが許可されます。さらなる情報は、DevNews のブログ投稿を参照してください。

+ +

LeakTest と UnitTest のための新しい Tinderbox ツリー

+ +

Chris Cooper と Dave Miller が最近二つの新しいツリーを tinderbox.mozilla.org に加えました。UnitTest と LeakTest です。想像通り、これらの新しいツリーはユニットテスト群、JavaScript テストマシン、そして、リークテスト群のための実施環境を収容します。失敗している MozillaTest で何かを探しているならば、そこを見るべきです。

+ +

彼がそうする間、Chris は Windows での ユニットテストの網羅度を改善するために二つの新しいマシンを Firefox の Tinderbox ツリーに追加しました。qm-win2k3-02 と qm-win2k3-03 と名付けられたこれらの新しいマシンは追加情報を提供し、単一マシンでの失敗の診断の手助けをするでしょう。更なる情報は、Chris の ウェブログ投稿を参照してください。

+ +

Ars Technica が Fennec をレビュー

+ +

Ars Technica が Mozilla の最初のモバイル Firefox プロトタイプである Fennec の最初のプレアルファテストビルドをレビューしました。「Firefox 3 がもうすぐ登場するときに、Mozilla のトカゲ世話役主任は、世界のブラウザを支配するための計画の次の段階へと注目を向けさせようとしています。去年の 10 月に初めて発表された Mozilla Mobile の試みは、機能的なプロトタイプの段階まで到達しました。開発者たちはコードネーム Fennec という、モバイル Firefox のプロトタイプであるプレアルファテストビルドをリリースしました。私たちはそれをテストし、Mozilla Mobile ディレクターである Jay Sullivan と話しました。」記事の続きは、Ars Technica で読んでください。

+ +

Mitchell Baker ビデオインタビュー in Paris パート 1/2

+ +

2 週間前、Mitchell Baker は French Senate でのキーノートのためのパリにいました。カンファレスの後、彼女と Mozilla Europe のメンバーは一連の報道インタビューを受け、その間、Tristan Nitot が Mitchell への 2 本のビデオインタビューを録画しました。これらのインタビューの一本目が Tristan のウェブログに投稿されています。

+ +

Mozilla の Web サイト、Web 解析、プライバシー

+ +

Mitchell Baker が Mozilla の Web サイトに対する Web 解析ツールアプリケーションについての記事を書きました。「私たちはデータの世界に生きています。ですから、私たちはどのデータとその影響度について注意深く考えるべきです。Mozilla コミュニティの中心は、プライバシーと一人一人が個人情報を理解し制御できるようにすることに強く焦点を当てています。これを考慮して、私は、私を満足させる安全防護策を伴った特別なデータ収集目的についての議論を集めています。」この記事の続きは、Mitchell のウェブログで読むことができます。

+ +

最近の AMO リリースについてのフィードバック

+ +

addons.mozilla.org 3.2 のリリース以来、AMO チームは活発にユーザが多くのチャンネルを通して送ってきたフィードバックをレビューしています。いくつかのフィードバックに対しての返答として、Mike Morgan が新しいデザインの理論的根拠とトレードオフ、及び、AMO にやってくる様々な利用者 - 初めてのユーザ、年季の入った熟練者、そして、アドオン制作者と発行者の要求のバランスを取ろうとする試みについての説明を投稿しています。Basil Hashem もチームが受け取ったフィードバックについての投稿を書いていて、そこでは、彼らが聞いた意見で多かったものの上位がまとめられ、AMO サイトの次の改善の計画の概要が述べられています。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080422/index.html b/files/ja/orphaned/devnews/20080422/index.html new file mode 100644 index 0000000000..3f0db7f064 --- /dev/null +++ b/files/ja/orphaned/devnews/20080422/index.html @@ -0,0 +1,82 @@ +--- +title: '20080422' +slug: DevNews/20080422 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 2.0.0.14 がリリースされました

+ +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 2.0.0.14 が[ GetFirefox.com. http://getfirefox.com/] から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

Mozilla は 2007 年 5 月で Firefox 1.5.0.x のサポートを打ち切ったため、まだ Firefox 1.5.0.x をお使いの場合は Firefox 2 シリーズへのアップグレードを強くお勧めします。アップグレードを始めるには「ヘルプ」メニューの「更新を確認」を選ぶだけです。このリリースについてのさらなる情報は、DevNews のブログ投稿を参照してください。

+ +

Camino 1.6 がリリースされました

+ +

Camino プロジェクトは Camino Web ブラウザ のメジャーアップデートである Camino 1.6 をリリースしました。このリリースは、ツールバー Web 検索フィールド、ページ内検索バー、ソフトウェアアップデート、タブバーのスクロール、拡大された AppleScript サポートを含む、多くの新機能と改善点を含んでいます。さらなる情報は、リリースノート及びリリースアナウンスメントを参照してください。

+ +

Mozilla プライバシーポリシーの変更案

+ +

2 月に、Basil Hashem は、Mozilla のプライバシーポリシーのいくつかの変更案についてブログに書きました。それに対してのフィードバックとコメントを考慮した後にポリシー案は修正され、Basil はそれについて再びブログに書きました。「新ポリシーは初期の議論で寄せられたコメントを反映しています。多く寄せられた反対理由となるものを削除して、私たちはポリシーを計画通り更新し、直ちに Web 解析ツールを埋め込むことを計画しています。今回最も注目すべき今までとの違いは Google Analytics は関係していないということです。Omniture のみが考慮の対象となっています。」更なる情報と、修正されたポリシーの写しは、Basil のこのトピックに関する最新のブログ投稿を参照してください。

+ +

AMO 3.2 の今後

+ +

addons.mozilla.org (AMO) リデザインのためにユーザエクスペリエンスを主導する、Madhava Enros は AMO 3.2 リリースの根拠と今後についての詳細な説明を投稿しました。「3.2 リデザインにおける、私たちのゴールは、アドオンとはどのようなものかを新しい人々が理解し、幅広いアドオンを集め、人々が立ち寄りたいと思い、素早く彼らのオンライン体験を改善するものを見つけ、再び利用したいと思うような、使い心地を改善することです。今まで述べたことの全ては、… AMO が成功するには、アドオン開発者とアドオンのテストとレビューの先頭に立つ先進的なユーザをサポートしなければなりません。」続きを読むには、Madhava のブログ投稿を参照してください。

+ +

コミュニティ調査の結果

+ +

2007 年の終わり、Stats Malolepszy と Seth Bindernagel は Mozilla の最初のコミュニティ調査を終了し、回答の解析と集まったデータから得られる結論を引出し始めました。彼らはついに結果を発表できる準備ができているポイントまで到達しました。生データの多くは、もっと早い時期、2 月の FOSDEM でも発表されていましたが、彼らは学んだことを洗練するために時間を費やしました。これらの洗練された結論は、一連のブログ投稿として発表されています。最初の 4 つは次のものです。Measuring the Temperature of the Community Part 1、Part 2、Part 3、Part 4。

+ +

セキュリティの数値化の問題

+ +

Asa Dotzler は For the Record プロジェクトの一部分として、セキュリティの数値化、及びセキュリティの数値化が引き起こしていることについての議論をブログに詳細な形で投稿しました。「数多くの報道記事が…効果的なセキュリティと Web ブラウザの安全さは単純にベンダーが公表したソフトウェアの脆弱性の数を数えることによって測定することができるという紛らわしく、そして誤った結論を提供しています。この種類の計測はいくつかの理由で欠点を持っています。そして、そのすべてがそれらが利用者にオンラインの安全について知識に基づいた決定をすることをより難しくさせていることに関連しています。」この記事の続きは、For the Record の Asa の投稿を参照してください。

+ +

Firefox が Webware 100 の「ブラウザ」カテゴリで勝利しました

+ +

2008 Webware 100 Awards は、今日利用可能であるベストな Web 2.0 サイト、サービス、そして、アプリケーションを表彰しました。Webware 100 に選ばれるための 5,000 以上のノミネートを受け付けた後、エディターが 300 の最終選考を選び、それらを対象にして Web ユーザによって投票が行われ、2 百万近くの投票により、100 の トップ製品 - 10 カテゴリ毎に 10 ずつ - が選ばれました。私たちは Firefox が今年の「ブラウザ」カテゴリの勝者として投票されたことが発表されたことを誇りに思います。この賞についてのさらなる情報は、Firefox の Wabware 100 Web ページをチェックしてください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080429/index.html b/files/ja/orphaned/devnews/20080429/index.html new file mode 100644 index 0000000000..c4654f5c27 --- /dev/null +++ b/files/ja/orphaned/devnews/20080429/index.html @@ -0,0 +1,81 @@ +--- +title: '20080429' +slug: DevNews/20080429 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mitchell Baker 氏の Web 2.0 基調講演

+ +

4 月 24 日、Mitchell Baker が Web 2.0 カンファレンスで基調講演を行いました。Doug Turner がハイライトのいくつかを書き、彼の ウェブログ上に講演のビデオを貼り付けて提供しています。講演から：「ひとつの Web だけがあります。Firefox はひとつの Web を手に入れるために最高で最も効果的なプラットフォームです。私たちはモバイルで革新と興奮を巻き起こすための Firefox を開発しています。これを為すために私たちは開かれた Web ベースの開発プラットフォームを必要としています。私たちは Firefox をこのプラットフォームとみなしています。」続きは、完全なビデオを見るか、Doug の ウェブログへ行くか、他のメディアの記事をチェックしてください。

+ + + +

ヨーロッパでの Firefox の広がり

+ +

Tristan Nitot が Firefox マーケットシェアに関する最新の統計が出たことについてブログに書いています。「Xiti によると、Firefox は ヨーロッパで 29% に近づいています。過去 12 か月で 4.5 パーセントポイント増加しています。」また、「Gemius (Rankings.hu) によると、Firefox 2 はハンガリーにおいて現在勢力のあるブラウザバージョンです。」さらなるマーケットシェアニュースとこれらの話題へのリンクは、Tristan のブログ投稿を参照してください。

+ +

AMO のメインでおすすめするアドオンへの変更点

+ +

Basil Hashem は addons.mozilla.org (AMO) ウェブサイトの「メインでおすすめする」アドオンの部分への最近の変更点について投稿しました。「最新の AMO リデザインで導入された変更点のひとつは幅広い様々なアドオンに光を当てる機能です。単一のリストの代わりに、おすすめはアプリケーションごと、カテゴリごと、そして、ロケールベースごとになりました。これはコミュニティにより素晴らしい柔軟さを与え、アドオンの出番と露出を増加させます。」最近の変更点についてのさらなる情報と詳細は Basil のウェブログを参照してください。

+ +

Firefox 3 リリースへの準備

+ +

Paul Kim が Firefox 3 マーケティングのための計画についてブログに書いています。「過去の各バージョンリリースと同様に、私たちは伝統的なマーケティングと コミュニティと草の根拡張の PR プログラムの組み合わせを利用するつもりです。この組み合わせは私たちに過去 4 年間で 世界中 の 1 億 6 千万以上の人々に採用を働きかけ、Firefox ブランドを確立し、リリースでの参加に意義ある機会を提供するのに役立ちました。」Firefox 3 リリースマーケティング計画についてのさらなる情報は、Paul の投稿を参照してください。

+ +

Firefox 3 のブックマーク

+ +

先週 Deb Richardson が Firefox 3 の新しいブックマーク機能の素晴らしい紹介を書きました。多くの人々のように、彼女は忘れられたリンクのゴミ箱になってしまう以前のブラウザのブックマークの状態に関するいらだちについて話しています。「Firefox 3 は利用するのが非常により簡単になり、一般にはより役立ち、私のような破滅的にまとまりのない人たちにとっては特に非常により役立つ、わずかな新しい機能を導入しています。」あなたのことのように思えたなら、記事全体をチェックしてください。

+ +

開発者が語る Flickr Uploadr

+ +

Flickr の XUL ベースのクロスプラットフォームアップローダユーティリティの開発者である Richard Crowley が彼らが XUL を選んだ理由と開発中に彼が乗り越えたハードルの概要について述べている素晴らしい記事を書きました。彼がプロジェクトの開発中（及び開発に関して）書いた詳細なブログ投稿へのリンクの一覧が含まれています。これは素晴らしい記事でかつ一見の価値があるものです。Flickr の開発ブログでそれをチェックしてください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080501/index.html b/files/ja/orphaned/devnews/20080501/index.html new file mode 100644 index 0000000000..22cea44ba8 --- /dev/null +++ b/files/ja/orphaned/devnews/20080501/index.html @@ -0,0 +1,16 @@ +--- +title: '20080501' +slug: DevNews/20080501 +tags: + - DevNews + - 'DevNews:Releases' +--- +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.14 が www.getthunderbird.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました。

+ +

セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。

+ +

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

変更の一覧と詳細は Thunderbird 2.0.0.14 リリースノートをご覧ください。

+ +

注意：まだ Thunderbird 1.5.0.x を利用されている場合、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいます。www.getthunderbird.com から Thunderbird 2.0.0.14 をダウンロードし、Thunderbird 2 にアップグレードしてください。

diff --git a/files/ja/orphaned/devnews/20080506/index.html b/files/ja/orphaned/devnews/20080506/index.html new file mode 100644 index 0000000000..1d3775596c --- /dev/null +++ b/files/ja/orphaned/devnews/20080506/index.html @@ -0,0 +1,97 @@ +--- +title: '20080506' +slug: DevNews/20080506 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox スクリーンキャストコンテスト！

+ +

SUMO (support.mozilla.com) と Spread Firefox 合同で Firefox スクリーンキャストコンテストを行います！「私たちは 5 月 19 日の朝から Spread Firefox で SUMO の knowledge base から 100 位までのサポート記事を提示します。1 つか、2 つ、あるいは、それらの全てのためのスクリーンキャストを作成してください！」好きなだけの数の記事に対してのスクリーンキャストを応募することができますが、記事ごとに 1 つだけにしてください。コンテストは 6 月 15 日まで行われます。

+ +

次のことが最も興奮する部分でしょうか？各 100 記事ごとに受賞者が決められ、各 100 記事の授賞者には特別な Firefox スクリーンキャストコンテスト T シャツが与えられます。この T シャツは 100 枚だけしか作られないので、このコンテストだけがこの独自のコレクターズアイテムを手に入れる方法です。さらなる情報は、SUMO ブログへ行って、コンテストの告知の全文を読んでください。

+ +

Thunderbird 2.0.0.14 がリリースされました

+ +

Mozilla Corporation による安定性およびセキュリティアップデート活動の一環として、Thunderbird 2.0.0.14 が www.getthunderbird.com から Windows と Mac、Linux 向けに無償でダウンロードできるようになりました（日本語訳）。セキュリティ修正のため、全ての Thunderbird ユーザへ最新リリースへのアップグレードを強く勧めます。変更の一覧と詳細は Thunderbird 2.0.0.14 リリースノートをご覧ください。

+ +

既に Thunderbird 2.0.0.x を利用されている場合は、24 時間から 48 時間以内に自動更新の通知が届くでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

まだ Thunderbird 1.5.0.x を利用されている場合、そのバージョンはもうサポートされず、既知のセキュリティ脆弱性を含んでいます。できるだけ早く Thunderbird 2.0.0.14 にアップグレードしてください。

+ +

新しい Weave ウィークリーミーティング

+ +

今週から、Weave プロジェクトは公式ミーティングを週 1 回行う予定です。第 1 回目のミーティングは 5 月 7日水曜日 午後 1:00 太平洋時間（午後 4:00 東部時間、21:00 UTC）の予定です。ミーティングの議題とダイヤルイン情報は Mozilla Wiki の Weave Meetings ページにあります。

+ +

5 月 8 日・9 日は Mozilla 組み込みミートアップ

+ +

Chris Blizzard は 次の Mozilla 組み込みミートアップが 5 月 8 日と 9 日（今週の木曜日と金曜日）にマウンテンビューで予定されていることをにみなさんに知ってほしいと思っています。目的は、新しい組み込み API に焦点を当て、いくつかの実際のコードをまとめ始めることです。これはオープンミーティングとして実施される予定です。ですから、この地域にいて、参加したい場合は、Chris に連絡を撮ってください。さらなる情報は、Chris のこのミーティングについてのブログ投稿、及び彼の以前のミートアップについての投稿を参照してください。

+ +

5 月 9 日に Pascal Chevrel がセビリア大学で話します

+ +

5 月 9 日金曜日に、Pascal Chevrel が スペインのセビリア大学主催の Concurso Universitario de Software Libre で Mozilla プロジェクトの組織について話す予定です。

+ +

アドオンの互換性状況についての更新情報

+ +

Alex Polvi が、Firefox 3 とまだ互換性がない上位 10 個のアドオンについての状況について報告する、週毎の「アドオンの状況」レポートを開始しました。今週の一覧には次のものが含まれています。Skype Toolbar for Firefox、Foxmarks Bookmark Synchronizer、FoxyTunes、Firebug、そして、PicLens などです。完全な一覧、さらなる詳細、そして、手伝う方法についての情報は、Polvi のブログ投稿を読んでください。

+ +

Mozilla Labs、高等教育、そして、新しい機会

+ +

Aza Raskin は Mozilla Labs の、開かれた Web の革新プロセスを幅広いコミュニティに広めることを軸として展開される、今年の目標のいくつかについて投稿しています。彼らは多くの新しいプログラム上で作業していますが、そのうちのひとつは、高等教育と連携するためのよりフォーマルな方法です。Labs チームは学術的に協力できる新しいグループを見つけたことに本当に気分が高まっています。また、このブログ投稿では彼らの初期の努力について少しだけ概要を述べています。Mozilla Labs ウェブログにある投稿の全文を読んでください。

+ + + +

MicroB 開発者である Antonio Gomes が MozillaLinks の Percy Cabello にインタビューされました。Percy は次のように書いています。「Mozilla は Web での存在を拡大するためにモバイルプラットフォームへゆるやかに注目を高めてきていますが、MicroB は別のプロジェクトであり、すでに Nokia Tablet PC プラットフォームに対して Mozilla ベースのソリューションを提供しています。」インタビューの中で、 Antonio は MicroB プロジェクト、MicroB と Mozilla プロジェクトの相互連携、MicroB の Mobile Firefox との関係などについて話しています。素晴らしい MozillaLinks ウェブログでインタビューの全てを読んでください。

+ +

Mozilla の Summer of Code プロジェクトについての情報

+ +

Google Summer of Code (SoC) 2008 が進行中です。過去 3 年間で、SoC は 1500 人の学生と 2000 人のメンターを 世界中の 90 か国から引き合わせています。Mozilla には「自動カレンダーイベント生成のための自然言語の解釈」から Bugzilla への OpenID サポートの実装までの幅広さを持った、進行中の SoC プロジェクトが数多くあります。全てのうち 11 個のプロジェクトに関しては、Mozilla プロジェクトのための違ったエキサイティングで生産的な夏が予定されています。プロジェクトの全てについての詳細な説明を含むさらなる情報は、Mozilla SoC 情報ページをチェックしてください。

+ +

2008 Linux Journal Reader’s Choice Awards

+ +

Thunderbird と Firefox が 2008 Linux Journal Reader’s Choice Awards を それぞれ「Favorite E-mail Client」と「Favorite Web Browser」カテゴリで受賞しました。今年は 6000 人近い読者が投票しましたので、これらは本当に素晴らしい賞です。公式な発表は 5 月 1 日に行われ、受賞者の発表をしている記事は Linux Journal で見つけることができます。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080513/index.html b/files/ja/orphaned/devnews/20080513/index.html new file mode 100644 index 0000000000..6095bb664f --- /dev/null +++ b/files/ja/orphaned/devnews/20080513/index.html @@ -0,0 +1,91 @@ +--- +title: '20080513' +slug: DevNews/20080513 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

about:mozilla 読者調査

+ +

Mozilla は先月の 11 月から about:mozilla ニュースレターを発行しています。約 6 ヵ月続けてきて、私たちはそろそろ読者のフィードバックを集める時期だと思い「about:mozilla ニュースレター」コミュニティ調査を実施することにしました。

+ +

もしこのニュースレターの常連読者であるなら、 Mozilla Europe のサイトにあるこの調査に答えるための時間を設けていただけると幸いです。調査の最後に、追加のコメント、アイデア、考えや批判を記入するための欄があります。このニュースレターについての私たちへのフィードバックがあればあるほど、将来のニュースレターがより良いものになるでしょう。

+ +

どうか、この about:mozilla ニュースレター調査に答えることで私たちを助けるための時間を設けていただけないでしょうか。

+ +

Mozilla Party JP 9.0

+ +

日本の Mozilla コミュニティである、もじら組は 9 回目の定例パーティイベントを 5 月 31 日土曜日に日本の東京で行う予定です。スピーカーは、もじら組の松澤太郎、Mozilla Corporation の John Daggett （プラットフォームデベロッパー）と David Tenser（SUMO マネージャ）、Mozilla Korea コミュニティの Channy Yun、Open Office 日本語プロジェクトの中本さん、そして、（日本）独立行政法人産業技術総合研究所の高木浩光博士、そのほかです。このイベントは一般者向けで無料です。日本語での情報はもじら組のサイトにあります。

+ +

Firefox 3: オフラインアプリのデモ

+ +

Mark Finkle が Firefox 3 の新しいオフライン機能のデモを行っている単純なデモについてまとめました。「オフラインモード」または「オフラインキャッシング」は Firefox 3 がインターネットにつながっていない状態にあるときでも Web アプリケーションが動かすことを可能にする HTML 5 での新機能です。Finkle のでもは「Task Helper」と呼ばれ、それについての詳細は彼のウェブログで読むことができます。Firefox 3 のオフラインリソースの使用についてのさらなる情報は、Mozilla Developer Center でのこのトピックに関する記事を参照してください。

+ +

Tristan、Firefox 3、そして、BBC の dot.life ブログ

+ +

Tristan Nitot は最近ロンドンで 「The dangers of the proprietary web - Future of the Internet and Open Source（独占 Web の危険 - インターネットとオープンソースの未来）」という、Internet World での基調講演を行いました。イギリスにいる間、Tristan は BBC の 技術ブログ「dot.life」を書いている BBC の技術記者、Rory Cellan-Jones と面会しました。Rory は Tristan にオープンソース、Mozilla のバックグラウンド、そして、新しい Firefox 3 のことについてインタビューしています。BBC の dot.life ウェブログで記事を読み、Tristan が Firefox 3 のデモを行っている Rory のビデオをチェックしてください。

+ +

プレスリリースの緩やかな死

+ +

不屈の Public Relations（広報）リーダーである、Melissa Shapiro が Mozilla はなぜもっとプレスリリースを出さないのか、また、Public Relations が産業としてどのように変化しているか（もしくは、変化する必要があるか）についてを話題にした面白い記事を書きました。「PR 産業は数年毎に一度よりも多く次世代のコンセプトの再検討を必要とします。メディアは常に変化しています。PR はペースを保つ必要があります、さもなければ、FAX 同報の道を進むことになるでしょう。それはいまだに出回っていますが完全に現代と離れている状態にあります。」Melissa の投稿は Mozilla の PR の努力の内的な仕事の魅惑的な一面を伝えていて、これらのプロセスをより透明にアクセシブルにしています。Melisa のウェブログでの投稿全文をチェックしてください。

+ +

Firefox 3 アドオンの互換性状況についての更新情報

+ +

Alex Polvi が、Firefox 3 とまだ互換性がない上位のアドオンの現在の状態の概要について述べている Firefox 3 アドオン互換性レポートの新しいものを投稿しました。今週の一覧には次のものが含まれています。：Firebug、Tab Mix Plus、FireFTP、Foxmarks、FoxyTunes、Blue Ice、RedShift V2、ColorfulTabs、他です。Alex はいくつかの助けを求めています。ですから、もし Firefox リリースに関して手伝うことに参加したいなら、彼のブログに行き、始め方を参照してください。

+ +

SUMO のすべて: Mozilla の 2 回目のコミュニティ調査

+ +

コミュニティ調査チームは SUMO（support.mozilla.com）を助けているコミュニティについてより学ぶことに焦点を当てた Mozilla の 2 回目のコミュニティ調査の結果の発表を始めました。これらの最初の 2 つの記事において、彼らは調査の準備、調査の発表、そして、結果のいくつかの初期解析の背景にあるプロセスの概要を述べています。この調査からより多くのことが発表されていますが、Mozilla Community Survey ウェブログでまず最初の 2 つの記事 — その 1 と その 2 — をチェックしてください。

+ +

Firefox 3: サイト認証ボタン

+ +

Firefox 3 の最も刺激的な新しいセキュリティ機能の一つは サイト認証ボタンです。ボタンは長い間ブラウザで用いられている主要なセキュリティインジケータであるユビキタスな「南京錠」アイコンを置き換えて進化しました。単に南京錠を表示するだけではなく、Firefox 3 ではブラウズされているサイトについて知ることができる限りの情報を知ることができ、ボタンを単純にクリックすることによってその情報に簡単にアクセスすることを可能にしています。この機能を通して Firefox 3 はユーザに異なったセキュリティレベルの範囲をカバーする情報を提供します。新しいサイト認証ボタンについて多くのさらなる情報は Deb Richardson のウェブログで記事全文をチェックしてください。

+ +

Processing.js

+ +

Mozilla の エヴァンジェリズムチームの一員である John Resig が（完全に彼の余暇で）Processing という視覚化言語を Canvas 要素を用いて JavaScript に移植しました。このプロジェクトは先週の木曜日に John のウェブログで始まり、彼が書きあげたものには、プロジェクト開発に関する詳細、Processing の API、デモのホスト、完全なソースコードへのリンク、そして、それの使用方法が含まれています。デモはすべて Firefox のベータページからダウンロードできる最新の Firefox 3 ベータ版で動作します。多くのさらなる情報は John のウェブログに用意されています。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080520/index.html b/files/ja/orphaned/devnews/20080520/index.html new file mode 100644 index 0000000000..abc9a16dc8 --- /dev/null +++ b/files/ja/orphaned/devnews/20080520/index.html @@ -0,0 +1,94 @@ +--- +title: '20080520' +slug: DevNews/20080520 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

about:mozilla 読者調査

+ +

先週私たちは初めての about:mozilla 読者調査を開始しました。まだ回答する機会がなかったならば、今がチャンスです。調査は 5 月 27 日まで実施される予定です。調査を締切ったその日から私たちは回答結果の分析を始める予定です。

+ +

このニュースレターをより良いものにするためにぜひこの調査を通してフィードバックを送ってください。

+ +

Firefox スクリーンキャストコンテストが始まりました!

+ +

Firefox スクリーンキャストコンテストが始まりました! Firefox Support knowledge base (SUMO) のためのスクリーンキャストサポートビデオを作成することで Firefox のために才能と情熱を活かすことができる良いチャンスです。

+ +

SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、あなたに 1 つ、2 つ、3つ、あるいは、その全てのスクリーンキャストを作成することを求めています！全部で 100 人の受賞者 - 各記事ごとに 1 人- が選ばれ、各受賞者に独自の Firefox スクリーンキャストコンテスト T シャツが与えられます。これがこの独自のコレクターアイテム T シャツを手に入れるための唯一の方法ですから、今日からスクリーンキャストを作り始めてください！

+ +

また、100 の受賞ビデオのベストエントリーに対して大賞が選出されます。何かがもらえるわけではありませんが、この賞はさらにより多くの写真とビデオを撮ろうというやる気につながるでしょう。

+ +

コンテストは 5 月 19 日 から 6 月 15 日午後 11:59 (GMT-7) まで行われます。チームは応募作品のすべてを見ることを楽しみにしています！さらなる情報は、公式のコンテスト告知の投稿をチェックしてください。

+ +

Support Firefox day が今週の金曜日に開催されます！

+ +

金曜日に、SUMO チームは “Support Firefox”day を #sumo IRC チャンネルで開催します。 彼らは Mozilla の「名士」（John Lilly、Asa Dotzler、Mike Beltzner、Mike Connor）との Q&A セッションを用意しています。彼らは特定の Mozilla トピックと彼らがどのようにユーザ対ユーザサポートプロジェクト SUMO に関わっているかについて話します。加えて、彼らは 3 つのワークショップを用意しています。 - SUMO Live Chat システムを通して協力する方法、Firefox のトラブルシューティングの方法、そして、Dietrich Ayala による新しい Places（ブックマークと履歴）システムについてのゲストワークショップがあります。

+ +

これらのセッションは常に楽しみに満ち溢れており、Mozilla プロジェクトに参加するための本当に素晴らしい方法です。ですから、金曜日かそれより前に irc.mozilla.org の #sumo チャンネルに行くことで準備を整え、Firefox と SUMO プロジェクトで活動している素晴らしい仲間たちに会うことができます。さらなる情報は SUMO ウェブログに用意されています。

+ +

Firefox 3 Release Candidate 1 がダウンロード可能に

+ +

最初の Firefox 3 リリース候補版 がダウンロード可能になりました。このマイルストーンはプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3 に向けた計画の進行状況は、Firefox 3 Planning Center や mozilla.dev.planning、irc.mozilla.org の #granparadiso で追うことができます。

+ +

このマイルストーンにはいくつかの新機能と変更が含まれています。：ユーザインタフェースの改善、ロケーションバー、ブックマークバックアップ、そして、フルページズームにような新機能のための変更と修正、さらなるセキュリティ、互換性、安定性の修正、そして、JavaScript エンジンを含む継続したパフォーマンスの改善。このリリースについてのさらなる情報は、リリースノートに用意されています。さらなる情報とソフトウェアをダウンロードするためのリンクは公式アナウンスメントを参照してください。

+ +

アドオン開発者へ：Firefox 3 最終 MaxVersion アップデート

+ +

Firefox 3 Release Candidate 1 が利用可能になった今、addons.mozilla.org (AMO) は Firefox 3 のための最終製品バージョン番号を修正し容認する予定です。特に、私たちは妥当な Firefox 互換可能バージョンとして “3.0″ と “3.0.*”を追加しました。完全なアプリケーションの互換性リストは AMO に用意されています。

+ +

アドオン開発者にとってこのことが意味することは Firefox 3 リリース候補版でテストした後、AMO の Developer Tools セクションを用いて全く新しいバージョンをアップロードする必要無しに自分のアドオンのバージョンナンバーを上げることができるということです。さらなる情報は Basil Hashemと Mark Finkle のブログ投稿を参照してください。

+ +

Mozilla が LiMo Foundation に参加

+ +

Jay Sullivan が Mozilla Corporation が最近 LiMo Foundation に参加したことについてブログに書いています。「Linux はモバイルプラットフォームとしての素晴らしいポテンシャルを秘めています。しかし、過去数年間の分裂によって妨げられてきました。Limo は多くの主要なデバイス生産者、ネットワークオペレーター、そして、モバイルエコシステムにおけるその他の人々を一同に会して、Linux ベースのモバイルミドルウェアプラットフォームの作成で協力しようというものです。私たちは Web ブラウジング、Web ウィジット/ランタイム、そして、セキュリティに関する Limo プラットフォームの側面のすべてで活発に参加することを意図しています。また私たちは成功するオープンソースコミュニティを構築することに関する自分たちの経験を共有することを計画しています。」さらなる詳細は、Jay のブログ投稿を読んでください。

+ +

Thunderbird “Shredder” alpha 1 がダウンロード可能に

+ +

Thunderbird の次のバージョンの最初のアルファリリースである Shredder alpha 1 がダウンロード可能になりました。非常にわずかな機能の変更だけですから、Thunderbird 2 との大きな違いを期待しないでください。しかし、Shredder は実質上修正されたコードベース上でビルドされています。そのコードベースは将来の機能の変更を構築可能にする素晴らしい土台を提供するものです。これは初期のアルファリリースであり、開発とテスト目的のためのみを意図としたものであることに注意してください。このリリースは重大なバグを含み、また、扱いに注意すべきものであるため、製品としては使用できません。このアルファリリースについてのさらなる情報は、David Ascher のウェブログ投稿を参照してください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080527/index.html b/files/ja/orphaned/devnews/20080527/index.html new file mode 100644 index 0000000000..0395c582b8 --- /dev/null +++ b/files/ja/orphaned/devnews/20080527/index.html @@ -0,0 +1,76 @@ +--- +title: '20080527' +slug: DevNews/20080527 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

ニュースレター調査 - 最後の呼びかけです！

+ +

 今日は最初の about:mozilla 読者調査に回答できる最後の日です！まだ回答する機会を得ていないなら、今が（最後）のチャンスです！今日が終わった後に、私たちは調査を終了して結果を解析し始めることができるようになります。今日の時間のうちの数分を費やして、このニュースレターをより良くするための手助けをしてはもらえないでしょうか。すでに回答いただいたみなさまには本当に感謝します！

+ +

新しい about:addons ニュースレター

+ +

Mozilla は アドオンに関連したニュース項目と情報に特化した新しいニュースレター about:addons を開始しました。最近の Firefox リリースサイクルの間にアドオンの作成、ホストする方法に多くの変更がなされていて、同様に addons.mozilla.org (AMO) での変更も数多くあります。それらのすべてを Mozilla から出される他の情報のすべてとともに追い続けることは困難であり、そのため、私たちはこの専用のニュースレターにまとめることにしました。登録するには about:addons 購読フォームへ行ってください。また、さらなる情報は、Mark Finkle のウェブログをチェックしてください。about:addons の最初の号はすでに発行され、DevNews のウェブログで読むことができます。

+ +

Firefox 3 のマルウェア防御機能の説明

+ +

Mozilla のセキュリティ UI リーダーである、Johnathan Nightingale が Firefox 3 の新しいマルウェア防御システムを説明したブログ投稿を書いています。「Firefox 3 では、2、3 個の非常に強硬的な方法で防御を強化しています。まず最初に、Firefox 2 でブロックした偽サイトに加えて、ネット上に存在している報告されたマルウェアサイトのすべてを追跡する 第 2 のリストを追加しました。次に、コンピュータがリスクにさらされないように、ページを読み込む前の最初の時点でブロックするようになりました。そして三番目として、好奇心の強い人のために、起こり得る悪影響を的確に説明するマルウェアサイトのレポートを提供します。」Johnath のウェブログで記事の全文を読むことができます。

+ +

Firefox スクリーンキャストコンテストが実施中

+ +

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

+ +

Firefox 3 アドオンの互換性状況についての更新情報

+ +

Alex Polvi が Firefox 3 と現在互換性がないアドオンの現在の状態の概要について述べている Firefox 3 アドオン互換性レポートの新しいものを投稿しました。今週の一覧には次のものが含まれています。：Firebug、MinimizeToTray、Tab Mix Plus、Noia 2.0、FireFTP、Foxmarks Bookmark Synchronizer、そして、RedShift V2。詳細と手助けする方法についての情報は、Alex のブログの投稿全文を読んでください。

+ +

Firefox 3 対応の 上位 20 個のアドオン

+ +

Firefox 3 アドオン互換性情報ニュースより後に、Deb Richardson が Firefox 3 対応の 上位 20 個のアドオンについてブログに書いています。「私は多くの人々がテストを手伝うことに飛び込もうとするより以前にアドオンが更新されることを待っているのを知っています。しかし、どれだけのチャンスであることでしょう。数十のアドオンが毎日更新され続けていて、数千がすでに用意ができています。」Deb が話題にしているアドオンの一覧には次のものが含まれています。：Adblock Plus、Faviconize Tab、Flashgot、Forecastfox、ScribeFire、Shareaholic、などなど。Deb のウェブログで投稿全文を読んでください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080603/index.html b/files/ja/orphaned/devnews/20080603/index.html new file mode 100644 index 0000000000..9404ebbcd2 --- /dev/null +++ b/files/ja/orphaned/devnews/20080603/index.html @@ -0,0 +1,76 @@ +--- +title: '20080603' +slug: DevNews/20080603 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

ギネス世界記録達成に協力してください！

+ +

Firefox コミュニティは Firefox への情熱を宣言するために、常に素晴らしい、協力し合う方法を計画しています。24 時間で最も多くソフトウェアをダウンロードするというギネス世界記録を達成するために結束するということよりもこれを為すためのより良い方法があるでしょうか？

+ +

あなたが為すべきことは Download Day - 6月中のいつか 中に Firefox 3 をダウンロードすることだけです。それまでの間、Download Day キャンペーンサイトをチェックし、Firefox 3 をダウンロードする誓約をしてください。私たちは Firefox 3 がリリースされたとき、24 時間の試みが開始されたことをあなたに知らせます。

+ +

Firefox 3 Release Candidate 2

+ +

Firefox 3 開発チームはリリース前に Firefox 3 の新しいリリース候補版を出すことを決定しました。これは 6 月下旬に予定されている最終リリース日を変えるものではありませんが、RC1 の期間中に発見された問題の少数の追加修正を含みます。RC2 で修正された問題の多くがすでにパッチが出され、レビューされ、承認され、チェックインされています。また、いくつかのローカライゼーションアップデートも受け入れられています。Release Candidate 2 は現在、6 月 4 日水曜日に利用可能になる見込みです。このことについてのさらなる情報は、mozilla.dev.apps.firefox の Mike Beltzner の投稿、及び、5 月 27 日の Firefox 3 ステータスミーティングのノートを参照してください。

+ +

New York Times の記事で Firefox を特集

+ +

New York Times が最近のブラウザ開発での加速する競争と革新についての記事で Firefox を特集しました。「3 年間の開発と 6 か月間の公式テストの後、Netscape のなきがらからよみがえった暴れブラウザ開発者である、Mozilla は、Firefox 3 をリリースします。Firefox 3 の機能に、人々が最も頻繁に訪れるサイトを整理して探し出す方法を変化させるわずかな仕掛けがあります。さらに Microsoft に競争力の面で打撃を与え、Firefox は高度な技術産業のためにブラウザの財政的及び戦略的価値をも増強します。」記事の全文は NYTimes の ウェブサイトに用意されています。

+ +

最新の Firefox 3 アドオン更新情報

+ +

Alex Polvi は Lifehacker の Gina Trapani と協力して Firefox 3 のアドオン互換性状況について記事にすることになりました。Lifehacker は毎週金曜日に週毎の「アドオンの状況」をレポートすることを計画しています。

+ +

現在 addons.mozilla.org (AMO) には Firefox 3 と互換性がある 800 以上のアドオンがあります。これはアドオンの総量の約 60% に相当します。5 つの最近更新されたアドオンは以下です。：ForecastFox、FoxMarks、Firefox Companion for eBay、Gmail Manager、そして、translator。5 つの依然として更新が必要とされるアドオンは以下です。：Mouse Gestures、Greasemonkey、Tab Mix Plus、FoxyTunes、そして、ColorfulTabs。続きを読むには、また、協力の仕方についてにさらなる情報を得るには、Alex のウェブログに行ってください。

+ +

Firefox スクリーンキャストコンテストが実施中

+ +

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080610/index.html b/files/ja/orphaned/devnews/20080610/index.html new file mode 100644 index 0000000000..b5d0f7f6c3 --- /dev/null +++ b/files/ja/orphaned/devnews/20080610/index.html @@ -0,0 +1,104 @@ +--- +title: '20080610' +slug: DevNews/20080610 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3 RC 2 がリリースされました

+ +

Firefox 3 Release Candidate 2 が 6 月 4 日にダウンロードおよびテスト可能になりました。これは開発者のテストとコミュニティのフィードバックを意図したパブリックプレビューリリースです。インストールする前にリリースノートと既知の問題についてのページを読むことを推奨します。Firefox 3 RC2 のリリースについてのさらなる情報は Developer News ウェブログにあります。

+ +

ガバナンス及びモジュールオーナーシップ

+ +

モジュールオーナーシップシステムの健全な状態を管理及び維持するために Mozilla プロジェクトが進めている試みの一部として、Mitchell Baker はシステムを管理するための方法を更新するための計画を 3 月に投稿しました。その計画は現在実装され、Mitchell が彼女のウェブログにその詳細を投稿しています。

+ +

Jesse Ruderman が質問に答えます

+ +

「Ask a Developer（開発者に聞く）」インタビューシリーズの一つとして、Asa Dotzler が最近 Mozilla のセキュリティエキスパートの一人である Jesse Ruderman に質問に答えてもらうようにお願いしました。Jesse はこれらの質問に答え、Asa はその答えを彼のウェブログに投稿しています。インタビューの全文を Asa のウェブログで読んでください。

+ +

Litmus にアクセシビリティテストケースが用意されました

+ +

Litmus はテストケースのセットを行い、そのテストをパスしたかどうかをフィードバックすることによって、 誰でも Firefox や 他の Mozilla 製品のテストを可能にするMozilla のコミュニティテストプラットフォームです。Mozilla QA チームはこれらのテストを利用しています。基本的な機能のテスト（各ベータリリースの前に行う）、全ての機能のテスト（リリースあるいはリリース候補の前に行う）や、製品の特定の部分が期待通りに動作することを保証するための他の機会にこれらのテストを利用しています。

+ +

Mozilla のアクセシビリティ QA リーダーである Marco Zehe が Firefox 3 のアクセシビリティ機能のテストケースを作成しました。Firefox のアクセシビリティテストに協力することに興味があるなら、Marco のブログ投稿をチェックすべきです。

+ +

HTML コンテントに SVG の効果を適用する

+ +

Robert O’Callahan が最近取り組んでいる一つの問題は SVG の機能を用いて HTML コンテントを拡張することは現在難しいということです。「例えば、HTML 要素を直角ではない部分にクリップしたり、HTML 要素にアルファマスクを適用したり、あるいは、HTML 要素にカラーチャンネル操作のような画像処理効果を適用するための簡単な方法はありません。SVG にはこれらの機能がありますが、それらは SVG 要素にしか適用されません。」Robert は SVG の効果を HTML コンテントの適用するためのより良い方法を実験しており、その最初の段階として、HTML コンテントに適用されたときに動作する SVG の「clip-path」、「mask」、そして、「filter」プロパティを作成しました。Robert は彼のブログに詳細の全てを書いています。

+ +

Firefox のテストに協力し、QA Bugdays に参加してください

+ +

Carsten Book が Mozilla の QA Bugdays について話題にしている記事を書きました。私たちはユーザとテスターのコミュニティによって毎日報告される非常にたくさんの数のバグレポートを目にし、Bugdays は未確認のバグが確認されたり閉じられたりする場所です。それらは Mozilla の開発の試みに参加するための素晴らしい方法であり、以前そのプロジェクトに参加したことがあるかどうかは問題になりません。つまり、誰でも参加でき、価値ある貢献者になれるです。Bugdays は定期的に行われており、週毎に作業の焦点が変わります。QA の Bugdays についてさらに多くことを知るために、Carsten のブログ投稿を参照してください。

+ +

Acid 3 に近づく 5 つのポイント

+ +

現在、3.0 以降の Firefox リリースのためのソースコードレポジトリである mozilla-central が開かれ、Acid 3 テストの得点に影響するバグを修正するパッチ群がチェックインされています。：

+ + + +

Mozilla T シャツヒストリープロジェクト

+ +

John Slater が新しいプロジェクト、The T-Shirt History of Mozilla に取り組んでいます。Mozilla コミュニティ周辺に多くの時間を費やしたことがある人なら誰でも知っているように、T シャツは私たちの文化に重要な部分です。John はできるだけたくさんの異なった Mozilla あるいは Mozilla に関連する T シャツの写真を集めることに取り組んでいて、今までのところ 53 種を集めました。コレクションすべてを見るために Flickr へ行き、まだ含まれていない T シャツを持っているなら、John に知らせてください。

+ +

ギネス世界記録達成に協力してください！

+ +

Firefox コミュニティは Firefox への情熱を宣言するために、常に素晴らしい、協力し合う方法を計画しています。24 時間で最も多くソフトウェアをダウンロードするというギネス世界記録を達成するために結束するということよりもこれを為すためのより良い方法があるでしょうか？

+ +

あなたが為すべきことは Download Day - 6月中のいつか 中に Firefox 3 をダウンロードすることだけです。それまでの間、Download Day キャンペーンサイトをチェックし、Firefox 3 をダウンロードする誓約をしてください。私たちは Firefox 3 がリリースされたとき、24 時間の試みが開始されたことをあなたに知らせます。

+ +

Firefox スクリーンキャストコンテストが実施中

+ +

Firefox スクリーンキャストコンテストが 5 月 19 日に開始されましたが、これはSUMO のためのスクリーンキャストサポートビデオを作成する手助けをすることで Firefox のために才能と情熱を活かすことができる素晴らしい機会です。SUMO チームは knowledge base から人気 100 位までのサポート記事の一覧を作成し、それらのすべてのスクリーンキャストを作成することを求めています。各記事で応募された中で一番のスクリーンキャストに対して賞が与えられ、一番のビデオのすべての中から 1 つの大賞が選ばれます。コンテストは 6 月 15 日までしか実施されませんから、さらなる情報を得て、参加するために SUMO ブログへ行くべきです！

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080617/index.html b/files/ja/orphaned/devnews/20080617/index.html new file mode 100644 index 0000000000..89cace7a32 --- /dev/null +++ b/files/ja/orphaned/devnews/20080617/index.html @@ -0,0 +1,94 @@ +--- +title: '20080617' +slug: DevNews/20080617 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3 のリリース日は今日です！

+ +

私たちは成し遂げました！ 約 3 年間の開発期間を経て、Firefox 3 が今日リリースされます。数千人の人々 -- 開発者、デザイナー、ローカライザー、テスター、マーケター、ユーザサポーター、ドキュメント執筆者 -- の貢献によって Firefox 3 は産み出されました。これは世界で最も素晴らしいオープンソースコミュニティの一つによるものです。私たちは全員非常にそれを誇りに思い、ついに数百万の人々の手に渡ることになることに素晴らしく興奮しています。

+ +

過去数週間、Mozilla コミュニティのメンバーはブラウザでわかる新しい機能及び改善された機能を幅広く書いてきました。新機能は非常に目立ち勝負の形勢を変化させるものから、あまり目立たないために Firefox の利用がなんとなくより簡単にかつより良くなったことに気づくまで注目しないかもしれないものまで全範囲に渡っています。改善された機能も似たようなものです。バックエンドシステム全体はスクラッチから構築し直された一方、他の機能はほんの少しの変更がなされたか、細かくリデザインされました。まとめると、その結果、今までの Firefox のバージョン中、最も早く、最も安全で、最もスリムで、そして、最も簡単に利用できるようになったということです。もっと知るために、Field Guide to Firefox 3（日本語版）を読んでください。

+ +

もしまだなら、Firefox Download Day サイトへも行き、一日に最もダウンロードされたソフトウェアという新しいギネス世界記録の達成に協力するべきです。それが終わったなら、Mozilla Party Central へ行き、参加するイベントを見つけるか企画してください。私たちはみなさんが今まで最高の Firefox のリリースを祝うために協力することに参加してくれることを望んでいます。

+ +

Walt Mossberg が Firefox 3 をレビュー

+ +

7 月 5日、Wall Street Journal のコラムニストである、Walt Mossberg が 「ベストな Web ブラウザが私たちのもとにもうすぐ」と題した、Firefox 3 の素晴らしいレビューを執筆しました。「機能、速度、セキュリテイで IE と Safari の両方の現在のバージョンを上回っています。インストールすることは簡単で、主流の、技術的に詳しくないユーザでも、利用することも簡単です。」

+ +

明らかに、そのような名高いレビュアーからそのような素晴らしいレビューをもらったことに私たちは非常に興奮しています。記事の全文とそれに付随したビデオポッドキャストが Wall Street Journal online にあります。

+ +

Mitchell Baker が 6 月 17 日-19 日 に韓国に

+ +

6 月 17 日と 18日に、Mitchell Baker は韓国で行われる OECD Ministerial Meeting on The Future of the Internet - “Shaping Policies for Creativity, Confidence and Convergence in the Digital World（創造性のためのポリシーの形成、デジタル世界における信用と収束）”で話します。Mitchell は 6 月 18 日の Mozilla Korea コミュニティとの夕食にも出席し、世界同時リリースとともに彼らの努力を祝います。最後に、Mitchell は 6 月 19 日の Future Web Forum 2008: Global Web Technology Workshop で基調講演を行います。詳細については、Gen Kanai の Mozilla in Asia ブログを訪れてください。

+ +

6 月 20 日は Support Firefox Day

+ +

SUMO (support.mozilla.com) コミュニティは Firefox 3 リリースの一部分としてスペシャルイベントを企画しました。6 月 20 日の Support Firefox Day です。新しいブラウザにすみやかに移行できるように Firefox 3 の新機能のうち最も重要な機能を紹介するインタラクティブなデモを設ける予定です。これは コードを書いた人々から Tips と実際を直接知るチャンスです。それに加え、新しいユーザベースのオンラインサポートシステムを披露し、それに参加し、Mozilla Support チームの一員となり、世界で最高のブラウザ上で自分らしさを出すのがどんなに簡単かを示す予定です。

+ +

さらなる情報、登録、そして、SUMO コミュニティのメンバーの素晴らしいビデオのために、Support Firefox Day ページをチェックしてください。

+ +

SUMO についてのすべて: David Tenser インタビュー

+ +

SUMO (support.mozilla.com) は私たちの新しいコミュニティパワーによる Firefox のユーザサポートサイトです。Firefox についての質問や問題があるなら、SUMO は ドキュメンテーション、良く聞かれる質問（FAQ）への答え、活発なコミュニティフォーラム、そして、新しい Live Chat で素晴らしく助けになる仲間で見つけるために向かうべき場所です。

+ +

David Tenser は Mozilla コミュニティに何年間も関わり、現在は SUMO プロジェクトのリーダーをしてます。彼はますます忙しくなるスケジュールを割いて Deb Richardson のいくつかの質問に答えてくれました。インタビューの全文は Deb の ウェブログにあります。

+ +

Johnathan Nightingale が Firefox 3 のセキュリティ機能を語る

+ +

CNET の Robert Vamosi は 先週 Mozilla の「Human Shield」（aka セキュリティユーザインタフェースデザイナー）である、Johnathan Nightingale と話しました。インタビューの中で、Johnathan は Firefox 3 の一部分である新しいセキュリティ機能について説明しています。さらなる情報と音声のみのポッドキャストへのリンクは CNET の Security Bites ウェブログにあります。

+ +

Firefox Mobile コンセプトビデオ

+ +

Mozilla Labs でのユーザエクスペリエンスのリーダーである Aza Raskin が Firefox Mobile のユーザインタフェースコンセプトデモのビデオをまとめました。「ユーザエクスペリエンスは今切実に求められているモバイル製品で最も重要なものです。タイピングに骨が折れ、スクリーンサイズが極めて小さなものである場合、ちょっとした操作性と表示されるピクセルまでもが重要となります。メニュー、常に表示される UI、そして、カーソルのような、多くの標準的な操作モデルは、モバイルにおいては通用しません。とてもワクワクする課題であり、解決へ向けての無数の挑戦がなされてきました」。ビデオ付きの詳細な投稿は Aza のウェブログにあります。

+ +

Eweek による Brendan Eich インタビュー: The New Browser War

+ +

「Brendan Eich は誰よりも最近のブラウザに、より多くではないにせよ、非常に影響を与えたと主張されるでしょう。Netscape Communications で、彼は Netscape Navigator ブラウザのために JavaScript を作りました。彼は Mozilla.org の Co-Founder であり、Mozilla Foundation のスピンアウトに協力しました。そこで彼はテクノロジストのリーダー及び Board of Directors の一員となりました。2005 年に Eich は Mozilla Corp の Chief Technology Officer になりました。Eich は、幅広いトピックについて話すためのこのスプリントの前に、Senior Editor の Darryl K. Taft とともにカリフォルニア、マウンテンビューの Mozilla の本部で座りました。彼らの議論からのこの抜粋は JavaScript とその予定について焦点が当てられています。」Eweek で 4 ページのインタビューを読んでください。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080624/index.html b/files/ja/orphaned/devnews/20080624/index.html new file mode 100644 index 0000000000..533cf4f442 --- /dev/null +++ b/files/ja/orphaned/devnews/20080624/index.html @@ -0,0 +1,82 @@ +--- +title: '20080624' +slug: DevNews/20080624 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3 がリリースされました！

+ +

Firefox 3 が 先週の火曜、7 月 17 日にリリースされました。リリース日祭りの一部として、一日で最もダウンロードされたソフトウェアの新ギネス世界記録達成に協力するようにみなさんに頼んだ「Download Day 2008」が行われました。24 時間で、非公式カウントで 800 万以上の Firefox 3 がダウンロードされました！ギネスが記録の妥当性を審査中であり、Spread Firefox チームは認められたときにその結果を発表することを準備中です。それ以降、さらに 1000 万 の Firefox 3 がダウンロードされ、最初の週で合計 1800 万以上に達しました。

+ +

 

+ +

公式 Firefox 3 T シャツが入手可能になりました

+ +

今年の初めにコミュニティでのデザインコンテストによって選ばれた公式 Firefox 3 T シャツが Mozilla Store にて男性向け・女性向けの両方で入手可能になりました。ストアではアンケートも実施しており、ストアに追加されるべき次のアイテムを選ぶ協力をすることができます！こちらで投票してください。

+ +

ブラウザセキュリティの活性化

+ +

SecurityFocus 貢献者の Federico Biancuzzi は Firefox 3 のセキュリティ機能についてさらに学ぶため、Mozilla のセキュリティチームの二人のキーメンバー、Window Snyder と Johnathan Nightingale に会いました。彼らはマルウェアからの防御、より安全なアドオンの更新、バグ発見への賞金、JavaScript の堅牢化、そして、Mozilla セキュリティのプロセスなどの話題について話しました。SecurityFocus でインタビュー全文を読んでください。

+ +

Mozilla Developer Resource Kit

+ +

David Humphrey が彼の Mozilla Developer Resource Kit (MDRK) プロジェクトについてブログに書いています。「生徒を Mozilla の世界に参加させることを手伝うことに 3 年間を費やして、私は Mozilla にやって来る新しい開発者が活動をちょっとだけより簡単にするための方法についてわずかながらの考えを持つようになりました。MDRK は秋へ向けて作業する予定ですが、私は現段階でそのいくつかの断片を共有したいと思いました。」これは素晴らしく興味深いプロジェクトであり、David のウェブログで彼の紹介全文をチェックすることができます。

+ +

新しい Mozilla.com：忍者に注目

+ +

Mozilla のクラックマーケティングチームの一人である John Slater が新しい Mozilla.com サイトについてブログに書き、また、新しい Firefox 3 プロモーションビデオを紹介しています。 「Mozilla.com のリデザインの最大の目標の一つは、言うならば、Firefox 3 のプレゼンテーションをほんの少し違うものにすることです。その点を考慮して、私たちは本当にサイトにおける Firefox のセクションを拡大し、詳細な機能についてのページ、Tips & Tricks、セキュリティとアドオンについての情報などを追加しました。私たちはまた、説明するよりも示した方がより簡単であることから、サイトに初めての人向けのビデオを追加するための良い機会だと思いました。」John のウェブログで投稿の全文を読み、ビデオを見てください。

+ +

月例 Mozilla Labs ミーティング

+ +

Mozilla Labs チームは「今月から私たちは定期月例ミーティングを行うことを始める予定です。このミーティングは、Labs のプロジェクトについてより知り、参加したい人々を集めて、パブリックリソースとしてのラボの革新を推し進めることを目的にしています。最初のミーティングは今週の水曜日、7 月 25 日 午後 6 時から行われます。場所は、カリフォルニア州マウンテンビューの Landings Drive 1981 にある Mozilla のオフィスです。」とアナウンスしました。興味があり、出席できるなら、Labs のブログ投稿上にコメントを残すことによって出席を表明してください。

+ +

来週はニュースレターはお休みです

+ +

about:mozilla ニュースレターは短いお休みをいただきます。来週火曜、7 月 1 日はニュースレターを発行しません。7 月 8 日から通常発行スケジュールに戻ります。

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080630/index.html b/files/ja/orphaned/devnews/20080630/index.html new file mode 100644 index 0000000000..33a85c22b2 --- /dev/null +++ b/files/ja/orphaned/devnews/20080630/index.html @@ -0,0 +1,34 @@ +--- +title: 'about:mobile - 創刊号、Fennec M4 が利用可能に、モバイルネットワークプロファイリングツール、などなど…' +slug: DevNews/20080630 +tags: + - DevNews + - 'DevNews:about-mobile' +--- +

創刊号

+ +

about:mobile 創刊号にようこそ。このニュースレターは Mozilla Mobile コミュニティで起こっていることを月一ペースでカバーする予定です。コメントと提案を about-mobile@mozilla.com に送ってください。このニュースレターは Mozilla Developer News ウェブログまたは E メールリスト経由で購読することができます。メールの一番下にあるリンクからいつでもメーリングリストの購読を解除することができます。

+ +

Fennec M4 がテスト可能に

+ +

Fennec の M4 マイルストーンリリースがテスト用として N800 と N810 向けに利用可能になりました。このリリースの主要な機能は、Stuart Parmenter と Gavin Sharp によって主に書かれた、実に良いスクロールとパンです。これは依然として非常に初期のマイルストーンリリースであり、不完全であったり、不安定である多くの機能がこのビルドには存在します。この Fennec マイルストーンリリースを N800 シリーズタブレットにインストールする方法の手引きとこのリリースに関する Mark の投稿を参照してください。この手引きに従えば、マイルストーンの更新も、利用可能になりしだい、取得することができるはずです。M5 マイルストーンは今から数週間後に登場する予定です。

+ +

参加したいのなら、mozilla.dev.platforms.mobile ニュースグループ上の Mozilla モバイルコミュニティか、IRC 経由で irc.mozilla.org の #mobile に参加することができることを覚えておいてください。

+ +

新しい Fennec の動作 UI デザイン

+ +

Madhava Enros が Fennec の動作 UI デザインを更新しました。現在のデザインの目的は必要なタイピングを最低限にし、素早い検索を簡単に行えるようにし、そして、Web コンテンツに割り当てられる画面スペースを最大限にすることです。主要なブラウザコントロールとタブサムネイルはページの端に移動しますが、必要なときに素早くドラッグしてくることができます。完全に把握するために Wiki のモバイルセクションの更新されたモックアップを参照してください。

+ +

新しいモバイルネットワークプロファイリングツール

+ +

Pat McManus はモバイルのネットワークパフォーマンスを計測する作業に取り組んでいます。この一部として彼は Linux 上の Fennec をまるで様々な異なるワイアレスネットワークを通してインターネットに接続しているようにするネットワークエミュレーションツールを作成しました。彼は GPRS、3G、bluetooth、その他の設定を作成しました。ツールへのフィードバック、特に、提供されているプロファイルと反応が鈍いページの報告を非常に歓迎します。ツールの入手方法と使用方法の詳細はニュースグループの告知にあります。

+ +

Aza Raskin によるモバイルコンセプトビデオ

+ +

Mozilla Labs の Aza Raskin がモバイルタッチデバイス上の移動について彼が考えているいくつかのアイデアの概要を説明しているビデオとブログ記事を投稿しました。それは 1 本の指で操作するようにデザインされており、Aza は 人々がどのようにタブからタブへ、あるいは、ブラウザからブックマークへ移動するかについてのいくつかのアイデアを調査しています。視覚的な運動量及び現実的な物理的特性への注目がデモを完成させています。さらに知るために素晴らしいスクリーンキャストを含んだ Aza の投稿を参照してください。

+ +

組み込み

+ +

Pelle Johnsen と Dave Camp は Mozilla の新しい組み込み APIに懸命に取り組んでいます。それは依然としてとてもとても初期段階のものですが、Pelle はいくつかのサポートされたプラットフォーム向けの組み込み API をビルドする方法についての手引きを投稿しました。現在は Windows 上の Qt、単独のネイティブ win32 バージョン、Linux 上の GTK+ での動作をサポートし、また、Tristan Van Berkom が Windows 上の GTK+ での動作をサポートしています。加えて、Pelle は API の共通部分の概要を示した初期段階の doxygen ドキュメントを投稿しています。

+ +

組み込みコミュニティに参加したいなら、irc.mozilla.org の #embedding か mozilla.dev.embedding ニュースグループに参加してください。

diff --git a/files/ja/orphaned/devnews/20080708/index.html b/files/ja/orphaned/devnews/20080708/index.html new file mode 100644 index 0000000000..6cf12d46b7 --- /dev/null +++ b/files/ja/orphaned/devnews/20080708/index.html @@ -0,0 +1,82 @@ +--- +title: '20080708' +slug: DevNews/20080708 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

公式世界記録！

+ +

Firefox コミュニティは新しいギネス世界記録の誇るべき保持者になりました。7 月 2 日、Mozilla はギネスから 最終的な合計 800 万 2530 ダウンロードとなった「24 時間で最も多くダウンロードされたソフトウェア」という記録を公式に達成したという認定を受けました。これは私たちのコミュニティが成し遂げてきた素晴らしい記録の歴史に加えられるものの一つです。Firefox は 2004 年に誕生して以来、Firefox のサポーターがその単語を広めることに協力してくれるということを信じ続けてきました。そして、現在、230 ヶ国以上に 1 億 8 千万以上のユーザがいます。これは驚くべき成果であり、全員、非常にうれしく思っています。自分専用の Download Day 証明書を手に入れるのを忘れないでください！

+ +

 

+ +

Firefox 2.0.0.15 がリリースされました

+ +

Mozilla Corporation の安定性の向上とセキュリティ更新プロセスの一環として、 Firefox 2.0.0.15 が Windows、Mac、Linux 向けに現在ダウンロード可能になりました。 Firefox 2.0.0.x は 2008 年 12 月中旬までしかセキュリティと安定性の更新に伴うメンテナンスが行われないことに注意してください。GetFirefox.com で現在入手できる Firefox 3 にアップグレードすることをおすすめします。さらなる情報は、DevNews のブログ投稿を参照してください。

+ +

Mozilla セキュリティメトリックプロジェクト

+ +

Mozilla はセキュリティの調査家かつ分析家である Rich Mogull とともに 長期間にわたって Firefox に関連するセキュリティを計測するためのメトリックモデルの開発に取り組んでいます。チームは、長い時間をかけて、単純なバグカウントを超え、セキュアな開発努力の効果とユーザに関連するリスクの両方により正確に反映されるようなモデルを開発しようとしています。プロジェクトの第一段階の目的は長期間にわたって発展させることができるベースラインモデルを構築することです。プロジェクトの目的の前段階のバージョンとモデルのスプレッドシートがチームによって公開されました。これらは、プロジェクトについてのさらなる情報とともに、Mozilla セキュリティブログを通して入手可能です。

+ +

Weave 0.2 開発マイルストーン

+ +

Weave は ブラウザへのオンラインサービスを構築することに焦点を当てた Mozilla Labs のプロジェクトです。プロジェクトの目的は新しい Firefox ユーザエクスペリエンスを拡大し、ユーザがどのようにしてコンピュータ間、他人と個人情報を共有するかを管理することを促進させることです。Version 0.2 は Weave クライアントとそれを管理するサーバーのメジャーアップデートであり、重要な新機能が含まれています。変更についての詳細を含むさらなる情報を得るために、または、自分自身で試してみるために、Mozilla Labs ウェブログの投稿（日本語訳をチェックしてください。

+ +

about:* ニュースレターファミリーの 2 つの新しいメンバー

+ +

Mozilla は新しい 2 つのニュースレターを開始しました。about:addons と about:mobile です。about:addons は、アドオンに関連するニュースと開発情報を扱うことに絞ったニュースレターであり、増加しつつある大きく活気に満ちたアドオン開発者コミュニティにターゲットを絞っています。about:addons よりもさらに最近加わった about:mobile は、Mozilla の 新しく始まったモバイルプロジェクトについての全てを扱っているニュースレターです。両方のニュースレターは月一ペースで発行される計画であり、E メール、Web、RSS フィードによって購読することができます。登録方法を含むさらなる情報は、about:addons については Mark Finkle のブログ投稿、 about:mobile については Chris Blizzard のブログ投稿を参照してください。

+ +

新しい Mozilla Developer Center のテスト稼働に協力してください！

+ +

Mozilla の 開発者向けドキュメンテーションリーダーであり、MDC プロジェクトのコーディネーターである、Eric Shepherd が新しい Mozilla Developer Center のシステムとデザインについてのテストへの協力を求めています。協力する前に、重要なこととして、テストサーバへの変更はリアルデータベースには反映されないことに注意してください。サイトのテストバージョンは http://devmo.dekiwiki.mozilla.org です。さらなる情報とサーバーの状態とテストについて日々更新される詳細は、Eric のウェブログを参照してください

+ +

次世代の JavaScripting

+ +

Mozilla Labs の Aza Raskin が Labs のウェブログを通して「次世代の JavaScripting」について投稿しました。その中で彼は最近、Mozilla コミュニティのメンバーによって行われている 3 つの非常に興味深い JavaScript に関連するプロジェクトに注目しています。Java ベースの Processing プログラミング言語の移植である、John Resig の Processing.js、JavaScript ベースの Z-Machine  インタプリンタである、Atul Varma の Parchment プロジェクト、そして、印象的な画像を描くこと、最小のコードで芸術を作成することに焦点を当てたプロジェクトである、Aza 自身による ContextFree.js です。さらなる詳細は、ブログ投稿の全文（日本語訳）を参照してください

+ +

開発カレンダー

+ +

月曜日

+ + + +

火曜日

+ + + +

水曜日

+ + + +

木曜日

+ + + +

金曜日

+ + + +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080715/index.html b/files/ja/orphaned/devnews/20080715/index.html new file mode 100644 index 0000000000..fe8cd7977e --- /dev/null +++ b/files/ja/orphaned/devnews/20080715/index.html @@ -0,0 +1,42 @@ +--- +title: '20080715' +slug: DevNews/20080715 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox マーケティングとコミュニティ

+ +

「Mozilla は 現在、Firefox3 ブラウザで 24 時間で最も多くダウンロードされたソフトウェアという新ギネス世界記録を公式に達成したことを祝うことに沸いています。しかし、企業で一人喜んでいるのではありません。この勝利をコミュニティと楽しんでいるのです。その成功に協力したものは正当に証明を受けることができます。」Jennifer Leggio による ZDNetの 記事は、ソーシャルネットワークと口伝えによる約束が支配している、Mozilla の伝統にとらわれないマーケティング戦略の興味深い調査です。Mozilla のマーケティング VP である Paul Kim へのインタビューで、Jennifer は、Spread Firefox、Facebook、Twitter、そして YouTube などで行われた、最近の Firefox 3 Download Day 運動の宣伝活動で使われた方法を掘り下げています。記事全文は ZDNet にあります。

+ +

Mozilla のギネス世界記録証明書

+ +

2008 年 7 月 9 日に Mozilla は「24 時間で最も多くダウンロードされたソフトウェア」という公式のギネス世界記録証明書を受け取りました。証明書に記載された最終的かつ公式な数は 8,002,530 です。これは信じ難い達成であり、コミュニティ全体が誇るべきことです。Tristan Nitot が Firefox コミュニティを代表して証明書を Guinness World Records 社のインターネットと技術を対象とした記録の管理者である Gareth Deaves から受け取りました。その証明書は Firefox 3 リリースと世界記録達成を祝うためにセントラルロンドンに集まった 300 強のコミュニティの前で授与されました。祝宴での写真とさらなる詳細は Mozilla Blog にあります。

+ +

Colbert Bump - Firefox 3 がその存在を証明

+ +

Firefox 3 Download Day の夜、「The Colbert Report」の Stephen Colbert が Firefox 3 に「Colbert Bump」を与え、リリースのために努力した仲間たちのうち、すでに舞い上がって疲れ切った者たちをさらに支持しました。Mozilla メトリックチームは「Colbert Bump」が実際に Web サイトのトラフィックに何らかの影響を与えたかどうかを見つけるためにダウンロードログをくまなく調べました。「Download Day は素晴らしい成功を収めました。そして、私たちはいくつかの感謝と名誉を Stephen と共有できて幸せです。しかし、わずかな疑問が自然と出てきます。例えば、Colbert Bump の直接的なインパクトは何だったのか？そして、その効果を正確に測定することができるのか？」「the Bump」の後に確かに 1、2 分だけダウンロードの大きな山があったことが明らかになりました。詳細は、Blog of Metrics の投稿全文を読んでください。

+ +

あなたが知らないかもしれない Firefox 3 の機能

+ +

Percy Cabello が Mozilla Links（日本語版） で Firefox 3 であまり知られていない機能のいくつかを取り上げた記事を公開しました。「、ダウロンロードの中断と再開、マルウェアプロテクション、新しいテーマ、劇的なパフォーマンスの改善は恐らく Firefox 3 で導入された最も代表的な機能です。他にも役立つ機能があることを紹介しましょう…」Percy のリストに含まれているものは、タブの複製、タブを異なるウィドウに移動する、検索バーのリサイズ、検索キーワードの追加、などです。 MozillaLinks ウェブログで記事全文を読んでください（日本語版記事）。

+ +

Video 及び Audio 要素のパッチがチェックイン

+ +

Chris Double は「WHATWG の video 及び audio 要素のサポートを追加するパッチが Firefox の mozilla-central レポジトリに導入されました。これは -enable-media configure flag を指定することで “video” と “audio” 要素をサポートした Firefox をビルドできるソースを手に入れることができるようになったことを意味します。チェックインされたパッチにはまだバックエンドデコーダーは含まれていません。つまり、ビデオを再生することはできません。これは様々なバックエンドがチェックインされることで修正されるでしょう。」さらなる情報は、Chris の ウェブログの投稿を参照してください。

+ +

Mozilla コミュニティカレンダー

+ +

Deb Richardson は 週毎/定期で行われている公式プロジェクトミーティングと他のイベントの広範囲に渡るリストをまとめました。その Wiki ページはこれです：コミュニティカレンダー。最終的には誰もが購読できる共有公開カレンダーとして強化されたバージョンを公開する予定です。Wiki ページをチェックし必要な変更、追加をしてください。

+ +

Party in Taiwan は 7 月 19 日

+ +

台湾における素晴らしい Mozilla コミュニティである MozillaTW.org は「Firefox Party 3.0」を 7 月 19 日に台北で行います。台湾にいるなら、これを逃さないでください！Gen Kenai のブログ投稿にかわいい Firefox Party のバナーがあります。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080722/index.html b/files/ja/orphaned/devnews/20080722/index.html new file mode 100644 index 0000000000..faaf031812 --- /dev/null +++ b/files/ja/orphaned/devnews/20080722/index.html @@ -0,0 +1,56 @@ +--- +title: '20080722' +slug: DevNews/20080722 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mark Surman と Mozilla Foundation

+ +

Mitchell Baker が次のように書いています。「私は我々が信頼する人物が Mozilla Foundation を新しい活動のステージへ導くべきだという認識で一致したことを報告することにとても喜んでいます。その人物とは Mark Surman であり、役職は Mozilla Foundation Executive Director です。Mozilla Foundation Board of Directors と Mark は Mozilla コミュニティと Mark を我々が最終決定を下す前に合わせたいと思っています。我々は Mark と、Mark と Mozilla プロジェクトがいかに上手く協調できるかという気持ちを育てるために、Mozilla Foundation と Executive Director の役割について語るための興味深いパーティを企画しています。」さらなる情報は Mitchell のウェブログにあります。

+ +

今週水曜日は Air Mozilla

+ +

Asa Dotzler が今回もエキサイティングな Air Mozilla Live を 水曜日、太平洋時間 7 月 23日 午前 11 時に行う予定です。今週のゲストは Mitchell Baker と Mark Surman です。Air Mozilla の放送は Mark に Mozilla Foundation と彼が現在就任する予定である Executive Director の役職についての質問をするための機会です。ライブ放送を視聴できない場合、質問を放送時間までに E メールで受け付けます。さらなる詳細は、Asa のウェブログにあります。

+ +

今週木曜日は Mozilla Labs Meetup

+ +

今月の Mozilla Labs 月例ミートアップの時期です。今月のミートアップは今週の木曜日、7 月 24 日、午後 6 時から Mozilla オフィス（1981 Landings Drive, bldg K in Mountain View, California）で行います。自由な形式でのライトニングトークと様々な Labs のプロジェクトの進行状況報告があり、また、十分なディスカッションとハッキングの時間もあります。私たちは夕方 Labs サイトでストリーミングする予定です。Bay Area にいて出席したいのなら、時間をとって Mozilla Labs ブログの投稿にコメントをすることによって出席表明をしてください。

+ +

Firefox スクリーンキャストコンテストの受賞者

+ +

Firefox スクリーンキャストコンテストが終了し、現在 50 の新しいビデオが SUMO Knowledge Base の記事中に追加されています。コンテストチームはその結果をとてもうれしく思っており、ついに受賞者を発表できることに興奮しています。コンテストの審査員は大賞の受賞者に 「How to customize the toolbar」を制作した Cameron Roy を選びました。他の受賞者（各記事のベストスクリーンキャストの制作者）には賞品についての連絡が近々来るでしょう。コンテストに参加してくれたみなさんに感謝します。あなた方の助けにより Knowledge Base は計り知れないほど改善し、制作物は Firefox の 1億 8000 万以上のユーザの印象に残り続けるでしょう。さらなる詳細は SUMO のウェブログ投稿をチェックしてください。

+ +

Control-Tab: Firefox の新しい（将来の）機能

+ +

Jennifer Boriss が次のように書いています。「Dao Gottwald が長い期間をかけて Ctrl-Tab という Firefox 拡張の開発に取り組んでいます。Ctrl-Tab には 2 つの部分があります。ユーザが最近使ったタブにジャンプすることを可能にするフィルムスライドとタブプレビューモードです。私たちは最近表示したタブのフィルムスライドが今日チェックインされ、明日のナイトリーに Firefox の新機能としてお披露目できるであろうことを発表することをうれしく思います。」この機能は Firefox 3.1 で実装されることが現在期待されています。この新機能についての多くのさらなる情報と Firefox ユーザのワークフローにどのような影響を与えるかが Jennifer のウェブログにあります。

+ +

Firefox 3.1: text 属性のサポート及びスペルチェックのサポート

+ +

Marco Zehe が次のように書いています。「金曜日のナイトリービルドには Firefox 3.1 に向けたアクセシビリティの大きな新機能が一つ含まれています。それは text 属性とスペルチェックサポートです。」このことは が font-family、font-weight、アンダーラインスタイル、style、color、そして、テキストの背景色、また、テキストの言語などについての情報を取得できるようになったことを意味します。加えて、編集時に、単語がスペルミスしていいれば、その単語に「invalid:misspelling」属性が含まれるようになります。これらの新機能は数週間後には上手く調整される予定ですが、チームは、あなたが協力できるならば、フィードバックを求めています。さらなる詳細は、Marco のウェブログ投稿を参照してください。

+ +

Mozilla コミュニティカレンダー

+ +

Deb Richardson は 週毎/定期で行われている公式プロジェクトミーティングと他のイベントの広範囲に渡るリストをまとめました。その ための Wiki ページは Mozilla 公式 Wiki 上のコミュニティカレンダーです。最終的には誰もが購読できる共有公開カレンダーとして強化されたバージョンを公開する予定です。Wiki ページをチェックし必要な変更、追加をしてください。

+ +

Firefox 3.0.1 がリリースされました

+ +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.1 がgetfirefox.com から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 3 を利用されている場合は、すぐに自動更新が通知されるでしょう。変更の一覧を含む、さらなる情報は Mozilla Developer News ウェブログを参照してください。

+ +

Firefox 2.0.0.16 がリリースされました

+ +

Firefox 3.0.1 のリリースに加えて、Firefox 2 も更新され、Firefox 2.0.0.14 が http://www.mozilla.com/firefox/all-older.html から Windows および Mac、Linux 向けに無償でダウンロードできるようになりました。全ての Firefox ユーザに最新版のリリースへアップグレードすることを強く勧めます。既に Firefox 2 を利用されている場合は、自動更新が通知されるでしょう。このアップデートは「ヘルプ」メニューの「更新を確認」から手動で適用することもできます。

+ +

2.0.0.x に対してセキュリティおよび安定性のアップデートを伴うメンテナンスが行われるのは 2008 年 12 月中旬までです。全てのユーザは Firefox 3 にアップグレードすることを勧めます。

+ +

SeaMonkey 1.1.11 セキュリティリリース

+ +

SeaMonkey Project News のレポートによると、SeaMonkey プロジェクトはオールインワンのインターネットスイートの新しいバージョンを 2008 年 7 月 15 日にリリースしました。「SeaMonkey 1.1.11 は いくつかのセキュリティ脆弱性を修正し、以前のバージョンで見つかった、いくつかのより小さな問題を修正します。SeaMonkey は Firefox 2 と同じ安全対策のレベルの修正にとどまります。Firefox 2 は同様に今週同じ問題のために最新版をリリースしています。」さらなる情報は、SeaMonkey Project News（日本語版）ページを参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080728/index.html b/files/ja/orphaned/devnews/20080728/index.html new file mode 100644 index 0000000000..4432e6842c --- /dev/null +++ b/files/ja/orphaned/devnews/20080728/index.html @@ -0,0 +1,30 @@ +--- +title: '20080728' +slug: DevNews/20080728 +tags: + - DevNews + - 'DevNews:General' + - 'DevNews:Releases' +--- +

Firefox の次のリリースの最初の開発者マイルストーン（コードネーム名 Shiretoko Alpha 1）がダウンロード可能になりました。Shiretoko は Firefox のような リッチインターネットアプリケーションのコアを成す Gecko 1.9.1 プラットフォームのプレリリース版で作成されています。このリリースは開発者及びテスタに向けてのみを意図していることに注意してください。

+ +

この Shiretoko / Gecko 1.9.1 Alpha 版はいくつかの新機能を導入しています：

+ + + +

Shiretoko に興味があるならばダウンロードの前にリリースノートと Mozilla Developer Center の Firefox 3.1 For Developers（日本語訳）の記事を読むべきです。以下のリンクから Shiretoko をダウンロードしてください：

+ + + +

私たちはあなたのフィードバックやあなたが発見するかもしれないバグの報告（日本語訳）を歓迎します。

diff --git a/files/ja/orphaned/devnews/20080729/index.html b/files/ja/orphaned/devnews/20080729/index.html new file mode 100644 index 0000000000..ab1b8e317a --- /dev/null +++ b/files/ja/orphaned/devnews/20080729/index.html @@ -0,0 +1,42 @@ +--- +title: '20080729' +slug: DevNews/20080729 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3.1 Alpha 1 がダウンロード可能に

+ +

最初の開発者マイルストーン（コードネーム名 Shiretoko Alpha 1）がダウンロード可能になりました。Shiretoko は Firefox のような リッチインターネットアプリケーションのコアを成す Gecko 1.9.1 プラットフォームのプレリリース版で作成されています。このリリースは開発者及びテスタに向けてのみを意図していることに注意してください。新機能の一覧とリリースノートへのリンクを含むさらなる情報は、DevNews のブログ投稿（日本語版）を参照してください。

+ +

l10n 目標のレビュー

+ +

Seth Bindernagel が次のように書いています。「先週、l10n-drivers チームの一部がパリで会い、Firefox 3 のリリースへの道筋を示す前に昨年 11 月に設定した目標のレビューを含む、l10n に関する多くのことを話し合いました。目標は野心的であり、チームが前向きな効果を作りだすことができる多くの方法が列挙されていました。私たちの仕事の週の一部分はこれらの目標をレビューし、何が上手く出来て、何が上手く出来なかったのかを発見することであり、より良く出来るように次の 4 半期の目標を作成することです。」Seth のウェブログの投稿では各目標の詳細についての記述が続き、上手く進んだことと将来改善できることについて議論しています。

+ +

AMO エディタになるには

+ +

Mozilla Add-ons (AMO) は Mozilla の最も人気で重要なサイトの一つですが、その Add-ons エディタたちが 100 万のアドオンユーザに素晴らしいおもてなしを提供し続けるには危機的な状態にあります。AMO チームの Justin Scott が エディタの活動及びその活動への参加の仕方の概要を Justin のウェブログに投稿しています。

+ +

Canvas のテキストが双方向に

+ +

Eric Butler が次のように書いています。「WHATWG Canvas text API に関する最後の主要な目立ったバグのパッチがチェックインされ、Firefox 3.1 Alpha 1 までにほぼ仕様に沿った実装が完成することになりました。Canvas がテキスト描画関数で テキストと双方向のテキストの分解をサポートするようになって私は喜んでいます。」Canvas は変化中であり、他にも変更がなされるでしょう。さらなる情報が Eric の ウェブログにあります。

+ +

Mozilla が SA 翻訳チームを支援

+ +

Tectonic が次のように報告しています。「南アフリカの賞を勝ち取ったマルチリンガルソフトウェアデベロッパーである、Translate.org.za が 自身の翻訳ツールを拡張するために Mozilla Corporation から助成金を得ることになりました。Mozilla は Translate.org.za に Web ベース翻訳ツールである Pootle と Translate Toolkit のさらなる開発に対して助成金を出しました。助成金はリリースされたオフライン翻訳ツールも対象としています。」さらなる詳細は、Tectonic の記事全文と Seth Bindernagel のオリジナルブログ投稿を読んでください。

+ +

Firefox 3.1: スマートロケーションバーの改善

+ +

スマートロケーションバー（いわゆる「」）の主要な開発者である Edward Lee は Firefox 3.1 で実装される予定の次世代スマートロケーションバーの変更のいくつかについての概要をブログ投稿に書いています。「履歴（かつ訪れていないブックマークではない）のみ表示する、もしくは、タイトルを含めずに URL のみにマッチさせるように結果を絞りこむようなスマートロケーションバーでの新しい検索方法があります。加えて、スマートキーワードクエリもドロップダウンで見ることができるようになります」。さらなる詳細は、Edward のブログ投稿全文を参照してください（日本語では、えむもじらの Firefox 3.1: スマートロケーションバーの絞込み の記事が参考になります。）

+ +

Mozilla のローカライゼーションダッシュボード

+ +

Seth Bindernagel が Axel Hecht が作成した Mozilla の新しい「ローカライゼーションダッシュボード」について投稿しています。「私たちのチームは l10n プロセスにおいて能率とローカライザへの働きかけ/サービスを改善することに挑戦します。このツールは私たちがローカライゼーションに関連するコミュニティのニーズに焦点を当て反応するための素晴らしい助けになるでしょう。」Seth の投稿はあなたが始めるための助けになるダッシュボードの機能のいくつかについて説明しています。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080805/index.html b/files/ja/orphaned/devnews/20080805/index.html new file mode 100644 index 0000000000..fb04a0d8f3 --- /dev/null +++ b/files/ja/orphaned/devnews/20080805/index.html @@ -0,0 +1,44 @@ +--- +title: >- + about:mozilla - Mozilla Summit、Mozilla Labs、Add-ons ワークショップ、Canvas を IE + に、Theora、Ogg、などなど… +slug: DevNews/20080805 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla Firefox Plus Summit 2008

+ +

2008 Mozilla Firefox Plus Summit のために先週、400 人の Mozilla 貢献者がカナダのウィスラーに集まりました。3 日間の話し合いは非常に幅広い話題をカバーし、自発的な自由な形式でのブレイクアウトセッションがしばしば行われました（そしてしばしばとても夜遅くまで続きました）。Summit は素晴らしい成功をおさめ、非常に多くの（まだ増加中）数の写真が Flickr にあり、長い（逆時系列順で）Twitter ストリームと数多くの Sumiit についてのブログ投稿が Planet Mozilla にあります。クマがいたり、道をふさぐがけ崩れが発生したり、停電したり、7 月に雪が降ったりさえしましたが、すべてのおかげで良い時間が過ごせたと言っても良いでしょう。

+ +

Mozilla Labs コンセプトシリーズ

+ +

Mozilla Labs はとてもエキサイティングな「コンセプトシリーズ」構想を紹介し、参加を呼びかけています。「私たちは産業、高等教育、そして世界中の人々に対して参加とアイデアと専門的技術の共有を呼びかけています。そうすることで私たちは集合的に Web の将来の方向を探究しデザインすることができます。参加するためにソフトウェアエンジニアである必要はなく、プログラムを持っている必要もありません。みなさんの参加を歓迎します。私たちは特にオープンソースプロジェクトにほぼ参加したことがないデザイナーと一緒に取組むことに興味があります。また私たちは実装が終了していない幅広い参加に偏っています。」少しだけの初期コンセプトビデオとディスカッションフォーラムへのリンクを含む、多くのさらなる情報は Mozilla Labs ウェブログにあります。

+ +

Add-ons ワークショップをパリで開催

+ +

ヨーロッパの Mozilla マーケティングチームの一員である、William が次のように書いています。「私は Mozilla Add-ons ワークショップを 2008 年 9 月 20 日にパリで行うことを公式に発表できてとてもうれしいです。一日ワークショップの目標は興味を促進し特定のロケールをターゲットにした拡張開発を勧めることです。最初のワークショップは、フランス、ベルギー、ルクセンブルク、そして、スイスからの開発者を集めて、フランス語での拡張に焦点を置きますが、私たちはヨーロッパ中で多くの通常のワークショップを同様に行いたいと思っています。」一日のおおざっぱなスケジュールを含むさらなる情報は、William のブログ投稿を参照してください。

+ +

取り残されるブラウザはない - Canvas を IE に

+ +

Vladimir Vukićević は Firefox と同じレンダリングコアをベースにした Microsoft Internet Explorer 向けのネイティブ Canvas 実装を開発しています。Microsoft は IE7 で Canvas をサポートしていませんし、IE8 でもサポートしない予定のままです。これは Canvas 技術の幅広い採用に対する大きな障害の一つとなっています。Vlad は次のように書いています。「object タグ、少しの CSS、そして 1 行の script で HTML での canvas 要素は IE で正しく動作しています。私はこの試みが成功したことに興奮しています。なぜなら、IE での Canvas サポートの欠如は人々が Canvas を避けて代わりに Flash 及び他の技術の方に向いてしまう理由の一つだからです。」バイナリビルドは現在存在していませんが、hg レポジトリで開発を追いかけることができます。さらなる情報は Vlad の投稿を、Canvas の使い方を学ぶためには MDC の Canvas チュートリアル（日本語版）を参照してください。

+ +

Firefox 向けの Theora video バックエンドがチェックイン

+ +

Mozilla Summit で Firefox が HTML 5 media 要素のためにネイティブで Theora 及び Vorbis をサポートすることが発表されました。Chris Double は次のように書いています。「バックエンドがメインの Mozilla ソースコードにコミットされ、デフォルトで有効になりました。ナイトリービルドをダウンロードすることでテストすることができます。video を用いている現存のサイトの例は Wikimedia video アーカイブです。この最初のコミットは作業進行中であり、選別されるべき未実装の部分、バグ、などがあります。しかし、すべてのプラットフォームで共通のコーデックを用いることが開始され、3.1 リリースに向けて実装される予定です。」

+ +

なぜ Ogg が重要なのか

+ +

Robert O’Callahan は Ogg Vorbis と Theora が Firefox で重要である理由の概要についてブログ投稿に書いています。「私たちの目標は厄介事がなく、ロイヤリティフリーで、オープンソースにフレンドリーなオーディオとビデオの再生機構を Web 上に用意することです。Vorbis と Theora は 1 億人以上の Firefox ユーザに届くでしょう。全員ではありませんが、しかし良いスタートです！残りの人々に届けるために、私たちが人々を Firefox ユーザにさせ続け、Apple、Microsoft、その他のベンダーに Vorbis と Theora と サポートするようにプレッシャーをかけます。ベンダーへのプレッシャーはコンテンツを（Firefox で優れた再生機構が提供されている）フリーフォーマットで利用可能にさせることに熱心なコンテンツプロバイダから来なければなりません。Wikimedia はステップアップしうまくいけば他も追随するでしょう。」さらなる技術的な詳細とミニ FAQ は Roc のウェブログにあります。

+ +

テストケースの減らし方のドキュメントが MDC に

+ +

Jesse Ruderman が次のように書いています。「私は古い Gecko BugAThon ページを置き換えるために Reducing testcases というページを作成しました。」これはバグレポートのためにテストケースを減らす作業のときに利用できるよりモダンなドキュメントです。ページは Mozilla Developer Center Wiki にあり、Jesse はみなさんにそれを改善させる協力を求めています。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080810/index.html b/files/ja/orphaned/devnews/20080810/index.html new file mode 100644 index 0000000000..b92c934395 --- /dev/null +++ b/files/ja/orphaned/devnews/20080810/index.html @@ -0,0 +1,22 @@ +--- +title: 'about:mobile - Fennec M6、Windows Mobile などなど…' +slug: DevNews/20080810 +tags: + - DevNews + - 'DevNews:about-mobile' +--- +

Fennec M6 が利用可能に

+ +

私たちは Fennec の 6 番目のマイルストーンリリースを作成しました。M6 は 2、3 個の主要な機能を含んでいます。タブ風インターフェースの初めてのサポート、「mailto:」と 「tel:」URL のサポート、そして、M5 に対するいくつか安定性の修正です。mailto: URL をクリックすれば、N810 のメーラーが開き、tel: URL をクリックすれば、タブレット上の SIP クライアントを用いて電話をかけようとするでしょう。さらなる情報はリリースノートにあります。Mark Finkle もこのリリースについて投稿しており、新しいタブ風インターフェースのスクリーンショットもあります。

+ +

Windows Mobile での状況

+ +

Brad Lassey が Windows Mobile に対するサポートの追加についての進捗レポートを投稿しました。Windows Mobile はとても人気があり、私たちが Fennec のサポート対象にしているプラットフォームの一つです。彼は 現在の Windows コードに対して Windows Mobile 特有の API に移植する際の変更点についての詳細の多くをカバーしています。深い詳細に興味があるなら、彼の投稿をチェックすべきです。

+ +

新しいモバイルネットワーク分析

+ +

Pat McManus は 彼の http 最適化を 7 月からの新しいデータで更新しました【訳注: PDF】 。先月の間彼は私たちの現在の http スタックを調整するために多くの時間を費やし、いくつかの モバイルネットワーク上のパフォーマンスが 58% 程度に改善するまでに調整しました。また、彼はパイプライン化とリクエスト順に関するいくつかの部分を特定し、恐らくそのことにより多大な改善が見込めるでしょう。彼の更新は多くのデータ上の背景を含み、読む価値のあるものです。彼の現在の最適化はすでに Fennec のソースコードにチェックインされ Fennec M7 ビルドに含まれています。さらなる情報はバグ報告を参照してください。

+ +

Fennec でのジオロケーション

+ +

最近行われた Mozilla 2008 Summit で、Doug Turner が Firefox 3.1 の開発版の一部分としてチェックインされ始め、私たちのモバイルビルドにも同様に導入される予定のいくつかの新しいジオロケーションの将来性をデモンストレーションしました。主要な機能は Web 開発者が JavaScript から位置情報の検索のために用いることができる navigator.geolocation オブジェクトです。この情報はユーザが特定の Web サイトで共有することを許可した場合にのみ利用可能になります。Doug が彼のブログでスクリーンショット、サンプルページ、そして、他の技術情報を含めた完全な概要を公開しています。

diff --git a/files/ja/orphaned/devnews/20080812/index.html b/files/ja/orphaned/devnews/20080812/index.html new file mode 100644 index 0000000000..3ed954e5ba --- /dev/null +++ b/files/ja/orphaned/devnews/20080812/index.html @@ -0,0 +1,44 @@ +--- +title: >- + About:mozilla - Toronto MozCamp、Firefox 3 アーカイブ、Snowl、Fennec、Camino、組み込み + API、などなど… +slug: DevNews/20080812 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

9 月に Toronto MozCamp を開催

+ +

Mark Finkle は次のように投稿しています。「私たちは 9 月下旬に Toronto で開発者イベントを計画しています。以前の Developer Days よりはやや形式的なものになる予定です。予定では、Mozilla の技術を扱っているセッションで埋め尽くした日程を作ることになっています。これは一度も Mozilla の技術を利用したことがない、あるいは、ちょうどプラットフォームの異なる部分についてより多くのことを学びたいと思っていた人向けのイベントです。セネカカレッジは親切にもこのイベントを主催することを提案してくれました。参加することに興味があるなら、サインアップすることで出席する意思を伝えてください。セッションへの提案も投稿してください。」扱われる予定の話題の一覧を含むさらなる詳細は、Mark のウェブログにあります。

+ +

 Firefox 3 リリースに関連する写真とビデオのコレクション

+ +

Alix は次のように書いています。「Firefox のリリースでは世界中のイベントに驚かされました。Download Day 祭り、リリースパーティなどなど！私たちはみなさんと共有するためにリリースに関連する写真、ビデオ、ストーリーを集めたいと思っています。これを行うた めに私たちは新しいグループを spreadfirefox 内に作りました。その Firefox 3 リリースアーカイブではあなたのリリースの思い出へのリンクを投稿することができます。写真を flickr に投稿し、それを共有したいなら、ff3launchというタグをつけてください。そうすれば私たちはそれを簡単に見つけることができます。」このアーカイブについての更なる情報は、Alix のウェブログ投稿を参照してください。

+ +

Snowl の紹介

+ +

Myk Melez は最近、彼の新しいプロジェクトである「Snowl」を Mozilla Labs ウェブログ経由で紹介しました。「会話（メッセージングとも）は一般的なオンライン活動であり、多くのデスクトップ Web アプリケーションがサポートしています。しかし、様々なプロトコロルとサービス元が増えるに従って、会話すべてを追いかけるのがますます難しくなっていま す。Web ブラウザがオンライン上の会話を追いかけ、それに参加するための手助けができないものでしょうか？Snowl はその疑問に対する素晴らしい答えです。」プロトタイプを手に入れる場所と議論への参加の仕方を含む、Snowl についての多くのさらなる情報は、Mozilla Labs のブログ投稿を参照してください。

+ +

Fennec M6 が利用可能に

+ +

最新号の about:mobile（日本語版） ニュースレターは初期の開発段階にある Mozilla の新しいモバイル向けの試みである Fennec の最新のマイルストーンが利用可能になったことを報告しています。「私たちは Fennec の 6 番目のマイルストーンリリースを作成しました。Fennec M6 は 2、3 の主要な機能を含んでいます。タブ風インターフェースの初めてのサポート、「mailto:」と 「tel:」 URL のサポート、そして、M5 に対するいくつか安定性の修正です。」さらなる情報はリリースノートに用意されており、Mark Finkle がこの最新リリースについて投稿しています。

+ +

私たちが持っているものではない、私たちが欲しい世界を構築する

+ +

Mike Schroepfer がなぜ Firefox 3.1 で「video」と「audio」タグの新しいサポートしたことが重要であるかの概要について説明した長い投稿を書きました。「すぐに 100 万人のユーザが Web ブラウザでビデオを見ることができます。しかし、独占フォーマットをサポートするためにいくつかの独占プラグインのうちのひとつを必要とします。 Firefox においてロイヤリティフリーオープンソースフォーマットとともに HTML 5 の「video」と「audio」が実装されたことによって私たちはこれらのフォーマットが一般に利用されるようになることを通してユビキタスになること を望みます。ロイヤリティフリーオープンソースフォーマットによってすべての Web ブラウザメーカーが制限を受けること無く、すべてのプラットフォーム、デバイス、環境でネイティブなビデオ及び音声の再生を行うことができるようになるで しょう。コンテンツへのユビキタスなアクセス。これが私たちが望んでいた世界です」。さらなる詳細とこれらの技術についてのいくつかのより一般的なよくあ る質問への答えは Schroepfer の投稿全文を読んでください。

+ +

Camino 1.6.3 がリリースされました

+ +

Camino の最新リリースが Camino ブログでアナウンスされました。「私たちは Camino 1.6.3 をリリースしました。これは様々なセキュリティと安定性の更新を含むメンテナンスリリースです。すべてのユーザは更新することを勧めます。」さらなる情報はウェブログ投稿にあります。

+ +

Mozilla の組み込み API が更新

+ +

Chris Blizzard が Mozilla 埋め込み API に関する更新を投稿しました。「Pelle Johnsen は多くの作業に取り組み、新しい埋め込み API のページ群をメンテナンスしています。そこには私たちがサポートするプラットフォーム向けのビルド手順、コードのあるレポジトリへのリンク、API 文書、そして、TODO リストが含まれています。」さらなる埋め込み API ニュースについての情報は、Chris のブログ投稿を参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080819/index.html b/files/ja/orphaned/devnews/20080819/index.html new file mode 100644 index 0000000000..e729869fc6 --- /dev/null +++ b/files/ja/orphaned/devnews/20080819/index.html @@ -0,0 +1,44 @@ +--- +title: >- + about:mozilla - パリでのワークショップ、Mobile Firefox デザイン、Aurora、border-image、ECMAScript + Harmony、などなど… +slug: DevNews/20080819 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

9 月 20 日にパリで Mozilla アドオンワークショップを開催

+ +
+

Paul Rouget が次のように投稿しています。「パリでの Mozilla Add-ons Workshop (MAOW) の申込みが開始されました！このイベントは 9 月 20 日土曜日に行われます。私たちの目的は Moフランス語を話せる XUL 開発者、ハッカー、Web 開発者を集め、Mozilla の技術について議論することです。」MOAW についての更なる情報は Mozilla Wiki の MAOW ページに（フランス語で）あります。また、出席するつもりなら、XULfr.org ワークショップページで登録してください。ワークショップについてのさらなる情報が英語とフランス語両方で用意されています。

+ +

Mobile Firefox デザインプロセスの一端

+ +

Aza Raskin が次のように書いています。「Mozilla でデザインすることは面白い工程です。私たちはオープンにデザインし、重要な立場にコミュニティを巻き込むように全力で努力していますが、それでもなお、 私たちは委員会によるデザインを避けなければなりません。最近の話題である Firefox Mobile のためのユーザエクスペリエンスの反復のために、Madhava Enros と私は私たちの議論セッションを録画しています。これは実験ですから、私には 2 つほど疑問があります。1) これは行って役立つことなのでしょうか。つまり、あなたは私たちのフィルタリングされていない直接の会議を見ることに価値を見出せますか？ 2) どのようにすれば私たちはこれをあなたにとってより価値あるものにすることができるでしょうか？」Aza と Madhava は次の 2 つのビデオを投稿しています。Fennec における設定、アドオン、ダウンロード、そして、Fennec でのページ内検索。彼らはフィードバックを求めています。ですから、付け加えたい何かがあれば、ブログ投稿にコメントしてください。

+ +

Mozilla Labs と Adaptive Path の「Aurora」ブラウザコンセプトシリーズ

+ +

Mozilla Labs と Adaptive Path は技術、ブラウザ、Web の将来の一つのビジョンを描いたコンセプトビデオを作成しました。「Aurora」と呼ばれるコンセプトビデオは 4 つ（それぞれ異なったブラウザの利用シナリオを扱っています）公開され、それらは Adaptive Path Aurora ページに置かれています。また、サイトに公開されているものには Aurora のデザインテーマと工程、及び、オープンソースデザインや全体として Aurora の背景にあるビジョンに関する考えについての記事も含まれています。Aurora はデザイナーと開発者がブラウザと Web の将来のビジョンを共有することを支援するために継続して行われる、Mozilla Lab のブラウザコンセプトシリーズのスタートの一部として開発され、公開されました。

+ +

Firefox での border-image

+ +

John Resig が Firefox 3.1 の一部である新しい CSS 3 の border-image 実装のいくつかのデモをまとめました。「これは画像の正確な切りだし（と要素周りでの配置）をとても簡単にする新しい CSS 3 モジュールです。最も明白な利用ケースは構造的な美しい可変ボタンです。」John のデモを動作させるには、Firefox のナイトリーリリースを必要とします。彼の記事にはコードサンプルとデモの広範囲にわたる説明が含まれています。

+ +

ECMAScript Harmony: JavaScript の活動における革新

+ +

最 近の ECMAScript（JavaScript の開発ガイドとなる仕様）に関連するイベントは普通ではない量の興奮と報道を引き起こしました。問題の要点は次のようなものです。ECMAScript 4 の仕様がとても長い間開発されてきました。これらの参加者（主に、Adobe、Mozilla、Opera、Google）は彼らが実装されるべきと考え た一連の機能に同意し、その枠組み周辺の仕様を作成しました。

+ +

他の人々（主に Microsoft と Yahoo）は ES4 仕様のいくつかがそのように実装されることに同意しませんでした。ECMAScript 3.1 活動の枠組みの中で、彼らは ECMAScript 3 の変更を選択することを主張し、ES4 の構文の変更点のいくつかに反対しました。ほぼ必然的に、この分裂は ECMAScript 3.1 グループが ECMAScript 4 の開発に影響を与えるであろう変更を加えたいという状況を引き起こし、結果として、この 1 年間で仕様の策定が引き延ばされるほどのグループ間の衝突を招きました。

+ +

今月初めの 2008 7 月 オソロミーティングで、これら 2 つのグループ間の議論がついに友好的な結論に到達しました。しかし、結果として、単純で実用的な言語追加に焦点を当て直すことで協力していくことになりま した。この共同の努力は現在の ECMAScript 3.1 の仕様を改善する作業となり、同時に、より大きな言語追加を含む「ECMAScript Harmony」と呼ばれる新しい後継となる仕様の作業をすることとなります。

+ +

これらの開発は他のブロガーとポッドキャストに よって広くカバーされています。次で全文を読むことができます。ECMAScript Harmony に関する John Resig のブログ投稿、Arun Ranganathan の Thoughts on Harmony and Evolution、 ECMAScript Harmony に関する Open Web Podcast。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

+
diff --git a/files/ja/orphaned/devnews/20080826/index.html b/files/ja/orphaned/devnews/20080826/index.html new file mode 100644 index 0000000000..144b4bdbdf --- /dev/null +++ b/files/ja/orphaned/devnews/20080826/index.html @@ -0,0 +1,72 @@ +--- +title: >- + about:mozilla - メジャーアップデート、Labs meetup、MozCamps、Web tech ブログ、 + MDC、JavaScript、Firebug、Extend Firefox、などなど… +slug: DevNews/20080826 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +
+

Firefox 2 がメジャーアップデート通知を受け取るように

+ +

昨 日の夜から、最新バージョンの Firefox 2 のユーザは自動的に Firefox 3 への更新通知を受けるようになりました。 Firefox 2.0.0.17 を実行しているなら、数日中にその通知を見ることになりますが、待ち切れないならば、「ヘルプ」メニューの「更新を確認」を利用することができます。さら なる情報を得たいなら、Firefox チームがこのアップデートについての広範な詳細を Mozilla Developer News ウェブログに投稿しています。

+ +

月例 Labs Meetup が 8 月 28 日木曜日にサンフランシスコで開催

+ +

Rhian Baker が次のように書いています。「月例ミートアップの時期がやってきました。今月のミートアップは 8 月 28 日 午後 6 時に Twitter オフィス（539 Bryant St. Suite 402, San Francisco）で開催されます。様々な活動中の Labs のプロジェクトの進行状況の発表があり、議論とハッキングの機会も十分に提供されます。そして、もちろんピザもです。もしあなたがベイアリーナにいるなら ば、私たちはあなたの参加を待っています！」出席する予定ならば、Mozilla Labs ウェブログにコメントすることで参加表明をしてください。

+ +

Toronto MozCamp: 9 月 15、16 日に行われるワークショップ

+ +

Mark Finkle が 9 月 15、16 日にセネカカレッジで行われる予定の来る Toronto MozCamp についてのさらなる情報を投稿しています。「私たちは 2 日目を‘Hands-on Workshop’day として利用することを決定しました。このワークショップは開発とテストのトラックに分かれています。開発トラックはチュートリアルとプロジェクトで作業し ている関係者に協力している何人かの Mozilla 開発者によって実施される予定で、XUL アプリケーション、拡張、そして、XPCOM コンポーネントがハックする対象です。テストトラックは Mozilla のテスト工程に関連する話題をカバーしており、ユニットテストの書き方、私たちの Firefox での自動テストの仕方が含まれています。Clint Talbert がこのワークショップについてのさらなる情報を提供しています。

+ +

Mozilla Camp Europe が 10 月 25、26 日に開催

+ +

Mozilla Europe が 長き 2 日間にわたる Mozilla カンファレンスである Mozilla Camp Europe を発表しました。このカンファレンスは 2008 年 10 月 25、26 日の週末にバルセルナで開催されます。「イベントの目的は Mozilla 好きな人々を 3 つの領域（開発、ローカライゼーション、QA）から集めることです。イベントはバルセロナの Citilab で行われ、私たちはヨーロッパから 150 人のコミュニティメンバーを招待するのに十分な場所を確保したいと思っています。」さらなる情報は、仮のスケジュール、トラック、その他の詳細を含む、 Mozilla Camp Europe の Wiki ページを参照してください。Mozilla Europe チームが用意出来しだいさらなる情報を William のウェブログと Wiki ページに投稿する予定です。

+ +

Mark Surman: 新しい Mozilla Foundation Executive Director

+ +

適 任者を長く広範囲にわたって探し続けた結果、Mitchell Baker は Mark Surman が 新しい Executive Director として Mozilla Foundation に参加することになったことを発表しました。Mark もこの転職について次のように書いてます。「私はこのことについて本当にわくわくしています。Mozilla は新しい種類の財団であり、強い根を持つ、参加、透明性、そして、革新を伴った財団です。それは援助金を出したり、大胆な声明を作る（これらは有用で行う べきことだけれども）ということについてだけではなく、多くの数の人々を物事を作ることに巻き込むことについてもです。特に、インターネットをよりオープ ンにすることがそうでしょう。財団をどのように機能させるかを再考案するために力を尽くしている者のために、これより興奮する仕事はありません。」 Mark は 2008 年 9 月 22 日に公式に彼の仕事を始める予定です。

+ +

新しい Mozilla Web Tech ウェブログ

+ +

Mozilla の開発を追い続けるのは、決して簡単ではなく、特に新しい、もしくは、改善された Web 技術開発とサポートに関する詳細はそうです。この問題を解決する助けとするために Mozilla 開発コミュニティは新しい「Web Tech」ウェブログを作りました。そこに、Mozilla 開発者が Web 開発者に興味深い話題について投稿し議論します。例えば、最近の投稿には word-wrap: 単語の改行サポート、CSS 2.1 生成内容、querySelector[All] が含まれています。質問と議論を歓迎します。ですから、このウェブログをチェックし、最近の Mozilla Web 技術のすべてについて最新の情報を得てください。

+ +

新しくかつ改善された Mozilla Developer Center

+ +

先 週、Mozilla Developer Center が MediaWiki を利用したものから、昨年の後半から進行中の巨大なタスクであった、MindTouch Deki によって動作するものに切り替わりました。新しいサイトにはユーザフレンドリな WYSIWYG エディタ、カスタマイズのためのスクリプティングシステムを用いた動作のしやすさ、メンテナンスすることが非常により簡単になったソフトウェア、そして、 1 つの Wiki でローカライゼーションを可能にする多言語を扱うための解決策があります。チームは機能を追加するために MindTouch で直接作業しているので、MDC の要求に対してより良く調整されています。さらなる開発状況について興味があるなら、Eric Shepherd のブログと dev-mdc ニュースグループをウォッチすべきです。

+ +

Firefox 3.1 で予定されている JavaScript パフォーマンスの改善

+ +

Mike Shaver が次のように書いています。「この 1 年で、JavaScript パフォーマンスは著しい革命を経験しました。事実上各ブラウザはエンジンを改善し、実行スピードを劇的に速くしました。例えば、Firefox 3 は、様々な JavaScript ベンチマークで Firefox 2 よりも約 3 倍速くなりました。私たちはまだ為し得ていません。私たちの現存の JavaScript インタプリタでの作業に加えて、私たちは将来の JavaScript のパフォーマンスアップも検討しています。昨日私たちは TraceMonkey を Firefox 3.1 の開発ツリーにチェックインしました。そして、私たちはこれを Firefox 3.1 の一部とするために必要とする作業に対してフルスピードで突き進んでいます。」初期テストは劇的なスピードとパフォーマンスの改善を示しています。 TraceMonkey は関係する様々な人々のブログに詳細に書かれています。

+ + + +

Firebug 1.2 がリリースされました

+ +

Firebug 1.2 の最終バージョンがリリースされ、Mozilla Add-ons サイトと GetFirebug.com から入手可能になりました。数多くの改善とバグの修正がなされており、それらには、Firefox 3 サポートの追加、質の向上、各パネル毎に有効にするか選択できるようになったこと、Firebug 自体のサスペンド/レジューム機能が含まれています。加えて、Firebug 1.3 の開発が既に進行中であり、パフォーマンス、質、テストに焦点を当てる予定となっています。さらなる情報は、Firebug 1.2 のリリースを伝えている John Resig のブログ投稿を参照してください。

+ +

Extend Firefox 3 コンテストの受賞者

+ +

Firefox 3 Web ブラウザ向けのアドオンを新しく公開した、もしくは、アドオンを更新した者を対象としたコンテストである Extend Firefox 3 が終了し、受賞者が発表されました。多くは実験的開発の初期段階にありますが、すべてが強力な新しいツールであり、審査員が表彰するにふさわしいと感じた プロトタイプです。受賞者の一覧とコンテストのさらなる詳細については、Mozilla Labs のウェブログを参照してください。

+ +

Firefox Mobile デザインセッション: ブックマーク

+ +

Aza Raskin が次のように書いています。「Firefox Mobile デザインディスカッションの 3 回目は、ブックマークがテーマです。ブックマークは Mosaic の時代からブラウザの基本的な機能です。Mobile にはそのような形で存在するのでしょうか？より良い方向性はあるでしょうか？どのように表示されるべきでしょうか？タブとブックマークの違いは何でしょう か？それはデバイスのメモリにあるものという問題だけでしょうか？」これらは Firefox Mobile デザインセッションの 3 回目のビデオでやり取りされた疑問のいくつかです。チームはあなたの考えとフィードバックを求めています。さらなる情報は Aza のウェブログにあります。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

+
+ +

          

diff --git a/files/ja/orphaned/devnews/20080902/index.html b/files/ja/orphaned/devnews/20080902/index.html new file mode 100644 index 0000000000..8dbd7d4e3a --- /dev/null +++ b/files/ja/orphaned/devnews/20080902/index.html @@ -0,0 +1,50 @@ +--- +title: 'about:mozilla - Ubiquity、Fennec、Shredder、Firefox ロゴ、Chrome、今後のイベント、などなど…' +slug: DevNews/20080902 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

Ubiquity の紹介

+ +

Mozilla Labs は 先週 「あらゆる者が一般的な Web タスクをより素早くかつ簡単に行うことを可能にする新しいユーザインターフェースを見つけることを目的とした、言語で Web に接続する試み」である Ubiquity プロジェクトを紹介しました。発表と同時に、Labs は Ubiquity の背景にあるコンセプトのいくつかをデモンストーレーションする初期の実験プロトタイプをリリースしました。プロトタイプをインストールし、チュートリアルを読み、Ubiquity の深層についてさらに学ぶことができます。さらなる情報は Mozilla Labs の発表と Aza Raskin のウェブログにあります。

+ +

John Lilly: Chrome に関する見解など

+ +

Mozilla の CEO の John Lilly が次のように書いています。「最近ブラウザの世界では興味深い開発が行われています。IE8 の新しいベータ版と Google による（Chrome と呼ばれる）新しいブラウザのベータ版のリリースの間に、言うまでもない興味深い成果が Mozilla チームによってもなされ、私が覚えているなかで今までにないまでに多くのことが起こっています。ここからが始まりです。より優秀な人々が一般の人にとって 良い Web を作る方法について考えることは本当に良いことです。競争はしばしばなんらかの革新をもたらします。今年の劇的な JavaScript パフォーマンスの向上、セキュリティ対応の前進、そして、ユーザインターフェースの躍進を見れば、ブラウザにおいてはこれが真実だと言い切れることがわか ると思います。私は Google が参加するようになったことで革新が今後も続くことを期待しています。」

+ +

Lilly は Google の「Chrome」プロジェクトのリリースが Mozilla にどのように影響に与え、Mozilla と Google の関係にとってこれが何を意味するか、そして、Mozilla がどのようにブラウザの世界でユニークであり続けるかについて説明を続けています。「Mozilla のミッションは Web をオープンかつ参加可能なものに保つことです。ですから、この市場での独自性としては、私たちは公益の非営利法人（Mozilla Corporation は Mozilla Foundation の完全子会社です）であることで、他の目的や営利動機は全く持っていません。私たちはこの道を今後も歩み続け、私たちの製品と技術をオープンで、コミュニ ティベースで、協同的な方法を用いて開発し続けます。」Lilly のブログで全文を読んでください。

+ +

Mobile Firefox 「Fennec」 Milestone 7 がリリースされました

+ +

Mozilla Mobile チームが最新のリリースを発表しました。「Fennec (Mobile Firefox) は マイルストーン 7（M7）になりました。これは Nokia N8×0 にインストールしてテストすることができます。私たちはいくつかの良いフィードバック（とバグ報告）を M6 でもらい、おかげで M7 にはわずかなバグ修正以上のものが盛り込まれています。他に追加されたものとしてはより良いアドオンのサポート、初期実装の加速度スクロール、モードレス パスワードマネージャ、そして、いくつかのズームの調整があります。Fennec M7 を試し、バグを報告してください。」Mobile チームはインストール方法と M7 Readme を投稿しています。また、Mark Finkle のウェブログでリリース発表の全文を読むことができます。

+ +

Thunderbird 「Shredder」 Alpha 2 がリリースされました

+ +

8 月 12 日に Mozilla Messaging が Thunderbird 「Shredder」 Alpha 2 のリリースを発表しました。「Shredder Alpha 2 は Thunderbird の次のメジャーバージョンのための開発者向けプレビューリリースであり、Mozilla のレイアウトエンジンの次の世代である、Gecko 1.9 を用いてビルドされています。Shredder Alpha 2 はテスト目的でのみ利用可能であり、開発者とテストコミュニティ向けです。このリリースは最終製品を表現していません。いくつかの機能が非常に実験的であ り、最終製品前に変更されるでしょう。Shredder Alpha 2 を製品環境で使わないでください。」さらなるリリースの詳細、機能と強化された機能の一覧、FAQ、ダウンロードリンクを含むさらなる情報は Shredder Alpha 2 リリースノートを参照してください。

+ +

Mozilla と 認証局

+ +

Frank Hecker が次のように書いています。「Johnathan Nightingale が、なぜ Firefox は自己署名 SSL 証明書を妥当なものとして自動的に受け入れられないのか、という非常によく聞かれる質問について最近言及しました。私が Johnathan の自己署名証明書に関する問題についての説明に多く付け加えるべきことはありませんが、Mozilla Foundation を代表して話すとすれば、私は SSL 証明書、認証局（CA)、そして Mozilla に関連する人々を見てきた中でのコメントのいくつかについて言及したいと思います。」Frank のブログ投稿は Mozilla と CA に関連する誤解のいくつかについて説明し、この話題周辺に存在するより一般的に繰り返される神話についての正体を暴いています。

+ +

Firefox ロゴスタイルの定義

+ +

John Slater と Tara Shahain は Firefox ロゴ向けの新しく改善されたスタイルガイドの開発に取り組んでいます。目的は現存のガイドラインを洗練し、幅広い意見を得ることです。このプロジェクトの 一部として、John と Tara は最近の Firefox Plus Summit で話し、Royal Orderとともにガイドを制作する作業を始めました。彼らはまた可能な限りプロセスをオープンに保ちたいと強く望んでいるので、John は次の数週間に議論のための様々な話題をブログに書く予定です。さらに、彼らはプロジェクトのための非公式の諮問委員会を設け、Mozilla 貢献者コミュニティの何人かのベテランメンバーの専門的意見と経験を参考にすることにしました。諮問委員会のメンバーの一覧を含めた、さらなる情報は、 John のブログ投稿を参考にしてください。

+ +

今後のイベント

+ +

バルセロナ、10月 25-26 日、MozCamp: 2008 年 10 月 25-26 日の週末にバルセロナで行われる大規模な、2 日間の Mozilla カンファレンスです。さらなる情報は Mozilla Camp Europe Wiki ページを参照してください。

+ +

パリ、 9 月 20 日、アドオンワークショップ: フランス語を話す XUL 開発者、ハッカー、そして、Web 開発者が Mozilla の技術を議論するために集結する 1 日間のイベントです。さらなる情報は Mozilla Wiki の MAOW ページを参照してください。

+ +

トロント、9 月 15-16 日、MozCamp: トーク、チュートリアル、そして、ワークショップで埋め尽くされた 2 日間の開発者イベントです。さらなる情報は トロントの MozCamp Wiki ページを参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080909/index.html b/files/ja/orphaned/devnews/20080909/index.html new file mode 100644 index 0000000000..2a13042adb --- /dev/null +++ b/files/ja/orphaned/devnews/20080909/index.html @@ -0,0 +1,78 @@ +--- +title: >- + about:mozilla - Firefox 3.1、TraceMonkey、Mobile Firefox、言語ベースインターフェース、 Drag and + Drop、などなど… +slug: DevNews/20080909 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3.1 Alpha 2 が利用可能に

+ +

Firefox 3.1 の 2 番目のアルファバージョンがダウンロード可能になりました。Firefox 3.1 Alpha2 は Gecko 1.9.1 プラットフォームのプレリリースバージョンでビルドされており、このリリースは開発者とテスタ向けであることにくれぐれも注意してください。

+ +

Firefox 3.1 Alpha 2 はブラウザに次のようないくつかの新しい新機能を導入しています。HTML 5 の 「video」要素のサポート、Web ワーカースレッドの初期段階のサポート、ブラウザウィンドウ間のタブのドラッグ ＆ ドロップ、XUL において Aero スタイル「Glass」の領域を生成する新しいセレクタ、新しい CSS 2.1 と CSS 3.1 のプロパティのサポート、そして、カラーマネジメントプロファイルサポートのパフォーマンスの改善と新しい設定値。

+ +

この Firefox 3.1 のアルファリリースは新しい TraceMonkey JavaScript エンジンを含んでいないことに注意してください。TraceMonkey は ナイトリービルドにおいて利用可能であり、現在は標準では無効化されています。さらなる情報は、TraceMonkey Wiki ページを参照してください。

+ +

Firefox 3.1 Alpha 2 をダウンロードしテストするつもりならば、最初にリリースノートと Firefox　3.1　for　developers（日本語版）の記事を読んでください。さらなる情報とダウンロードのためのリンクは DevNews のリリース発表記事にあります。

+ +

Drag and Drop が実装

+ +

Neil Deakin が Mozilla の ナイトリービルドにおける HTML5 の Drag and Drop API の実装についての開発の進捗状況を投稿しました。「これは IE と Safari が長年サポートしたきた API です。Firefox でもそれを同様にサポートするようになり、Web ページにおいてどこかに Drag and Drop できるコンテンツを作ることが可能になりました。同様の API が Firefox 拡張と XUL アプリケーションで用いられています。」ドラッグ可能にする方法についての例を含む、さらなる情報は、Neil の ウェブログ投稿を参照してくだださい。Drag and drop のドキュメントは Mozilla Developer Center にあります。

+ +

Mozilla、Firefox と Google Chrome

+ +

多 くのブラウザ界ウォッチャーが知っているように、Google は「Google Chrome」と呼ばれる新しいブラウザのベータバージョンをリリースしました。そのときに John Lilly がそのことについて投稿し、その後、Mitchell Baker がこのことについて書き、どのように、そして、なぜ Mozilla と Firefox が競争と革新が再び普通になった発展を続ける健全なブラウザ市場でユニークかつ活発であり続けるのかを説明しています。

+ +

Mitchell は次のように書いています。「Mozilla は個々の人間の利益、社会の利益、市民の利益が最も重要であるインターネットの一部分を構築する存在です。私たちは公共の利益にのみ専念する独立したブラウザが健全なインターネットを構築するのに必要なものであるとずっと昔に気づいていました。Firefox はインターネットを構築することにおいての私たちの最初のステップです。明らかに私たちは素晴らしい製品を作成し、競争市場で主導権を握り続けることを必要としています。Mozilla は Firefox での成功を通してこの競争環境を作り上げ、私は John と同様に Mozilla の将来に自信を持っています。

+ +

「私たちはブラウザ界で競争し続け、上手くことをなし続けるでしょう。私たちは人々が自分たちのものと選び、信頼し、理解する製品を生み出し続けます。私たちは自らの総合的なミッション - 個人、市民、そして、社会の価値が最も重要であること の一部分としてこのことをなし続けます。」Mitchell のウェブログで彼女の投稿全文を読んでください。

+ +

Andreas Gal の TraceMonkey JavaScript エンジンについての投稿

+ +

過 去 2 ヶ月間、 Andreas Gal は Mozilla チームとともに Firefox における JavaScript エンジンのための just-in-time (JIT) コンパイラの作成に取り組んできました。8 月 25 日にそのプロジェクト（コードネーム「TraceMonkey」）がメインの Firefox 開発コードベースに追加されました。

+ +

Andreas は次のように書いています。「TraceMonkey はトレースベース（.zip PDF) の JIT コンパイラで、JavaScript パフォーマンスの限界に挑戦します。平均では、Apple のポピュラーな SunSpider ベンチマークで Firefox の最新リリースの 4.6 倍にスピードアップしています。コア JavaScript 言語機能に焦点を当てている SunSpider ubench スィートでは、22 倍のスピードアップを達成しました。どの分析を用いても、Firefox は世界で最も速い JavaScript エンジンを持つようになったのです。」Andreas の投稿はトレースでの動的コンパイル、トレースツリーとネストされたトレースツリー、そして、型特化を含む、TraceMonkey のコンセプトと背景について詳細に説明を続けています。Andreas のウェブログで記事全文を読むことができます 。

+ +

TraceMonkey VS V8: JavaScript パフォーマンス

+ +

JavaScript は、多くの Web アプリケーション（Web メール、オンラインワードプロセッサ、その他）が中心となる機能で複雑な JavaScript プログラムに大きく頼っているために、Web ブラウザパフォーマンスのますます重要な部分になっています。この 1 年間に、いくつかの異なるプロジェクトに取り組んでいる JavaScript 開発者によってなされた強靱な進歩で、JavaScript パフォーマンスは多少再生しました。2 つの最も最近の開発は Mozilla と Google によるもの - Firefox 3.1 の開発の一部である Mozilla の新しい TraceMonkey エンジン、Google Chrome ベータの一部である Google の新しい V8 エンジンです。

+ +

Brendan Eich はいくつかのパフォーマンステストを実行し、Windows XP と Windows Vista (Google Chrome は Mac、Linux では利用できません) で SunSpider テストスィートを用いてお互いにエンジンを戦わせた直接対決の結果を投稿しました。Brendan は次のように書いています。「TraceMonkey はそれぞれ 1.28 倍および 1.19 倍勝っています。」しかし、SunSpider は「ひとつのポピュラーですが議論の余地がある代表的とはいえないベンチマークスィートです。」彼は「このコンテストは互いの競争する VM が与えられた誇大なイベントポイントで排除されるプレイオフではありません」と指摘することで締めくくっており、チームがさらなる TraceMonkey のパフォーマンスを改善を達成するためのアプローチのおおまかな概要を描いています。

+ +

Brendan の完全なテスト結果とコメントは彼のウェブログにあります。TraceMonkey と JavaScript パフォーマンスについてのさらなる情報は Mike Shaver、Andreas Gal、そして、John Resig らの Web の投稿によって得ることができます。

+ +

Mobile Firefox にアドオン機能

+ +

Fennec（Mobile Firefox のコードネーム）の最新リリースである Milestone 7 には、モバイルブラウザ向けのアドオンマネージャという革新的な追加が含まれています。Mark Finkle は Firefox との様々な類似点と相違点を説明しながら、アドオンを開発することについての話題をあつかった詳細な投稿をしています。「Fennec は XULRunner アプリケーションであり、開発者が Firefox で用いられているのと同じ構造になっている XPCOM システムにアクセスすることができる拡張を提供します。拡張を作成するプロセス（日本語版）は他の Mozilla ベースのアプリケーションと同じです。」

+ +

同様に、大きな違いも存在します。「Fennec は Firefox ではありません。完全に違うアプリケーションです。また、Fennec の UI も Firefox と非常に異なっています。これはつまり、Firefox (もしくは Thunderbird や Songbird）の拡張を Fennec に放り込んでも、動作することは期待できないということです。Fennec に拡張を作成、移植する際に拡張作者が扱う必要があるだろういくつかの基本的なことがあります。」これらの違いには次のようなものが含まれています。異なったアプリケーション ID、非常に異なった XUL UI、UI コードにおける異なった JavaScript オブジェクトと関数、その他。

+ +

Mark は現在の何ができるかを理解するための最も良い方法はソースコードを読むことだと提言しています。質問があれば、Mozilla IRC の #mobile チャンネルに行ってください。助けてくれる誰かがいるはずです。また、Mark は Fennec の拡張のいくつかの例を彼のブログ投稿からリンクしています。

+ +

Mobile Firefox 向けテーマのデザイン

+ +

Madhava Enros と Sean Martell は Fennex ウェブブラウザ（「Fennec」は Mobile Firefox のコードネームです）向けのデフォルトテーマの作成に取り組んでいます。Madhava は次のように書いています。「私たちはデスクトップの Firefox の流れを取り入れる一方で、小さなスクリーンの指で操作できるデバイス向けに適したものに挑戦しています。Sean が投稿したいくつかの最近の成果が彼のブログにあり、彼はさらに私たちが取り組んだ成果を投稿するつもりです。これはいまだ非常に進行中の成果であり、あ なたの提案を必要としていますので、ぜひ見てみてください。貢献のために Fennec UI のディスカッションスレッドが準備されています。」さらなる情報といくつかのテーマのモックアップは、Madhava のブログ投稿を参照してください。

+ +

言語ベースインターフェース

+ +

Jonatha DiCarlo は言語ベースインターフェース - 本当の言語でコマンドを入力することで望んだ動作が起こることを可能にするインターフェース について説明した一連のブログ投稿を書きました。「現在行きたい場所を伝えるのと同じくらい簡単にやりたいことを伝えることができるような Web とは何でしょうか？」

+ +

Mozilla Labs は最近開始された Ubiquity プロジェクトを第一弾とする、そのようなことをするためにデザインされた言語インターフェースの実験を始めました。Jonathan の投稿はコンセプト、疑問、そして、実験の背景にある考えについて非常によく検討しており、彼は次の 3 つの記事を書いています。 Language-based interfaces: The problem（言語ベースインターフェース：その問題）、Language-based interfaces: Where do we stand now?（言語ベースインターフェース：今私たちはどこに立っているのか？）、そして、Language-based interfaces: Report card for Ubiquity（言語ベースインターフェース：Ubiquity のための報告カード）。これらのアプローチとアイデアに本当に興味があるなら、Jonathan のブログ投稿を読み、Ubiquity プロジェクトへ行き、これらの実験に取り組んでいる成長中のコミュニティに参加するべきです。

+ +

今後のイベント

+ +

トロント、9 月 15-16 日、MozCamp: トーク、チュートリアル、そして、ワークショップで埋め尽くされた 2 日間の開発者イベントです。さらなる情報は トロントの MozCamp Wiki ページを参照してください。

+ +

パ リ、9 月 20 日、アドオンワークショップ: フランス語を話す XUL 開発者、ハッカー、そして、Web 開発者が Mozilla の技術を議論するために集結する 1 日間のイベントです。さらなる情報は Mozilla Wiki の MAOW ページを参照してください。

+ +

バ ルセロナ、10月 25-26 日、MozCamp: 2008 年 10 月 25-26 日の週末にバルセロナで行われる大規模な、2 日間の Mozilla カンファレンスです。さらなる情報は Mozilla Camp Europe Wiki ページを参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080916/index.html b/files/ja/orphaned/devnews/20080916/index.html new file mode 100644 index 0000000000..1fae329212 --- /dev/null +++ b/files/ja/orphaned/devnews/20080916/index.html @@ -0,0 +1,64 @@ +--- +title: 'about:mozilla - 2010 年までの目標、アドオンに関する調査、TraceMonkey、SUMO、ベンチマークの質、カオス、などなど…' +slug: DevNews/20080916 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +
 
+ +

Mozilla: 私たちの 2010 年までの目標を定義

+ +

Mitchell Baker が Mozilla の 2010 年までの目標を定義することに対する取り組みを主導していますが、提案されている目標の草稿版を最近投稿しました。このような対象が幅広い大望的な目標を設定することは非常に重要です。なぜなら、「幅広い、一般に共有された大望の設定をはっきりとさせることは多くの異なったグループが彼ら自身を組織化し、私たちの大望を現実のものにする非常に実践的で、具体的な課題に取り組むことの助けになります。」2010 年までの目標は「人々がそれらに応じることができ、進行中の範囲を評価する意味を提供できるほど十分なものにするべきです。恐らくさらに重要なことは、これらの目標は計画の実施を指定することよりも重要な考えを表現するべきということです。」

+ +

Mitchell の最初の投稿では目標の設定プロセスの背景と目的の概要が述べられており、2 番目の投稿には Firefox Summit の間に集められたフィードバックを含む様々な議論によって出された提案段階の 2010 年までの目標の原案が含まれています。長期的な目標の設定と Mozilla プロジェクト方向性に興味があるなら、Mitchell は次のように頼んでいます。「時間を割いて、提案された目標のレビューをし、意見し、質問し、そして、新しい提案を作っていただけないでしょうか。」あなたはこの議論に参加することができます。なぜなら、これらの目標は Mozilla がするべきこと、目指すべきものの基本を形作るものだからです。みなさんの参加を歓迎します。

+ +

この議論に参加するには、 Mitchell の ウェブログと、さらなる議論のトピックが投稿されている mozilla.governance newsgroup を読むべきです。これらの目標に関するリアルタイムの議論に参加することができる IRC (irc.mozilla.org) の 新しい 「#2010goals」チャンネルも あります。

+ +

Firefox アドオン開発者への調査

+ +

addons.mozilla.org (AMO) チームはアドオン開発環境を改善するために協力を求めています。「Firefox（もしくは他のアプリケーション）向けのアドオンを開発した、もしくは、 開発しようとしたことがあるならば、私たちにフィードバックを送ってください。そうすれば、私たちはドキュメンテーション、ツール、機能を通して環境を改善するためにできることが何かないかを知ることができます。数分時間を割いていただければ、調査は終わります。回答は無記名であり、私たちはすべての回答に目を通します。私たちは結果を数週間以内にまとめる予定です。」アドオンは Firefox のエコシステムに欠かせない部分であり、Add-ons Developer Survey に提供されるどんな協力もおおいにプロジェクト全体にとって有益です。

+ +

TraceMonkey と Firefox Mobile

+ +

数週間をかけて、Vladimir Vukicevic は TraceMonkey を モバイルとハンドヘルドデバイスでしばしば用いられる ARM アーキテクチャ（日本語版）で動作させることに取り組みました。「モバイルとハンドヘルドプラットフォームは急速にフル Web の消費者になっており、コアパフォーマンスの成長は非常により劇的にユーザが感じられるほどのパフォーマンスの改善を生み出しています。この成果がもたら したことは、これらのユーザがサーバサイドではなくブラウザ上の方でより多くの動作を行うモダンな Web アプリケーションの利点を得ることができるようになったことによって、モバイルと組み込みデバイス上での Web 環境がよりリッチになったことです。」Vlad の TraceMonkey の成果は Firefox のナイトリービルドでテスターが TraceMonkey を有効にするのと同じ方法で設定を有効にすることによって Fennec（Firefox Mobile のコードネーム）の次のアルファリリースのテスト向けに用意されています。多くの技術的詳細を含む、さらなる情報は、Vlad の Web ログを見てください。

+ +

Firefox サポート：将来の見通し

+ +

Mozilla の SUMO プロジェクトのリーダである David Tenser が Firefox サポートプロジェクトの将来の取り組みのビジョンについての概要を述べた複数のエントリからなる ウェブログ投稿を書きました。「SUMO チームが公式に作られて以来、私たちは内輪的な少人数の人々によって管理されたややバグのある Web サイトから、週毎 70 人以上の活発な貢献者たちがいる本当のコミュニティの力によるサポートチャンネルに成長しました。これは Mozilla コミュニティの力を本当に示す驚くような達成です。」それでもなお、SUMO のミッションは完了していません。David は次のように続けています。「私の見通しからすれば、まだ始まったばかりです。私は SUMO を次のレベル、例の Summit でチームとこれについて議論したときに私が冗談で 「SUMO 2.0」 と呼んだものに引き上げるために私たちがすべきことについてたくさんのことを考えています。」David は SUMO のビジョンについての概要を述べた 次の 5 つの投稿を書いています：Part 1: Listen as hard as we can（私たちが可能な限り懸命に聞くこと）、Part 2: Understanding the bigger picture（より大きな図式を理解すること）、Part 3: Increasing community participation（コミュニティの参加を増やすこと）、 Part 4: Having our finger on the pulse（実状を正確に把握すること）、 Part 5: Localization（ローカライゼーション）。

+ +

もし SUMO プロジェクトに協力するボランティア活動に興味があるなら、David の ウェブログに注目し、SUMO Knowledge Base の貢献者ガイド（日本語版）のページを読んでください。ユーザサポートに協力することは Mozilla プロジェクトに参加するための素晴らしい、簡単な方法です。

+ +

Firefox の洗練

+ +

Firefox のビジュアルとインタラクティブ性の洗練のレベルを改善するための努力として、Alex Faaborg が今から Firefox 3.1 リリースまでの間の毎週月曜日、最優先度となっているユーザエクスペリエンスバグの手短なリストを投稿します。彼は次のように書いています。「これらのバグは Firefox 3 の UI のおおざっぱとなっている領域の修正、リリース前にチェックインするつもりであるアイコンのチェックイン、そして、各最後のピクセルを完全なものにしようとする試みを含むことになるでしょう。」チームはこれらのバグを完了させて閉じるための協力を必要としています。時間があり、協力することに興味があるなら、ぜひ参加してください。また、提言されるべき必要があると考えられる洗練するべき事項があれば、Alex はバグを立て、彼の投稿のコメント欄に言及を残していくように求めています。

+ +

「Powered by Mozilla」のためのガイドラインの作成

+ +

David Boswell はどのように「Powered by Mozilla」ロゴをプロジェクトおよび製品の一部分として利用できるようにするかを決めるためのガイドラインを作成することに取り組んでいます。「ガイドラインの指定を必要としているのは、私たちのレポジトリから 1 つのファイルだけチェックアウトし、それらのアプリケーションは Powered by Mozilla であると主張して欲しくないからです。問題は Mozilla コミュニティが作成している再利用可能な技術の現在のリストがあるとは思われないことです。」こういう事情で、David は時間をかけてこれらの技術と基準の草案リストをまとめましたが、そのリストが完全であるか、全く理にかなっているかどうか確信していません。彼は自分のウェブログにリストを投稿しています。フィードバックやこれらについて意見があるなら、彼は自分のブログ投稿にコメントを残すか Wiki ページを直接編集するように求めています。

+ +

Firefox ロゴスタイルガイドの進捗

+ +

以前に述べたように、Tara Shahain と John Slater は Royal Order と非公式諮問委員会としての役割を果たしているコミュニティのボランティアの小さなチームと協力して新しい Firefox ロゴスタイルガイドに取り組んでいます。多くの前進がなされ、Tara は初期段階のロゴの一覧表（32 ありました）と 8 つのコアセットに絞り込んでいくまでの考えのプロセスについて取り上げている新しいブログ投稿を書いています。Tara の投稿を彼女のウェブログで読み、そこで議論に参加することができます。

+ +

JavaScript ベンチマークの質

+ +

JavaScript エンジンのパフォーマンスが再生をし続けている一方、JavaScript ベンチマークテストはペースを保てず、見たことがない高速なパフォーマンスの増加に上手く適応していません。John Resig が問題を解析した投稿をまとめ、3 つの異なるベンチマークスィート - SunSpider、Dromaeo、V8 Benchmark - と、ブラウザがますます高速にテストを実行できるようになっているためにそれらがエラーレベルが増加する問題を防ぐためにしていることについて考察してい ます。John のウェブログで彼の全文を読むことができ、その投稿では詳細かつ興味深い JavaScript ベンチマークの世界を垣間見ることができます。

+ +

カオス の中で/と共に/の周りで/によって 管理する

+ +

John Lilly が最近 Stanford で Mozilla の構造と意思決定プロセスについて話しました。「これはどのように Mozilla が組織化され、どんな風に私たちが意思決定を私たちが持っているあらゆる組織の端にまで伝えるのかについてです。つまり、これは本当に組織のデザインと振る舞いについての話です。」プレゼンテーションはMozilla の背景にある考え方とカオスと秩序が混じったシステムを検討している興味深いものです。John は彼のスライドを Slideshare に投稿していて、Stanford Presentation on Mozilla で見ることができます。

+ +

Ars Technica での Firefox、Gecko、WebKit の記事

+ +

先週、Ars Technica の Ryan Paul はなぜ Mozilla は Webkit の人気が上昇し続けているに関わらず Gecko にコミットし続けるのかということを説明する興味深い 2 ページに渡る記事を投稿しました。 WebKit はより多くのブラウザに採用されているのを受けて、Ryan は次のように書いています。「何人かのテクノロジ狂は Mozilla の Gecko レンダリングエンジンの余命がいくばくもないのではないかと思い始めています。」しかし、全員がそう思っているわけではなく、「2 つのレンダリングエンジンの違いを理解し、Gecko の技術的強さを評価している人々は Mozilla が Firefox の将来のバージョンで Webkit を採用する可能性について推測する根拠がないことに気づいています。」記事では、Ryan は Webkit の強み、Apple が 2003 年に Gecko ではなく Webkit を選択した理由、Gecko がどのように発達し改善しているか、Gecko がサードパーティの開発者のホストに好まれる理由、などを論じています。

+ +

記事を書く中で、Ryan は Mozilla の エンジニアリング担当バイスプレジデント Mike Shaver と話しています。「Shaver は Webkit の技術的達成を評価していますが、彼は Webkit の開発モデルと Webkit エコシステムの分断が Firefox にはふさわしくない困難な挑戦になるだろうと信じています。」Shaver は Ars Technica サイトの記事中でより詳細に語っています。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080923/index.html b/files/ja/orphaned/devnews/20080923/index.html new file mode 100644 index 0000000000..7b55fa78a1 --- /dev/null +++ b/files/ja/orphaned/devnews/20080923/index.html @@ -0,0 +1,58 @@ +--- +title: >- + about:mozilla - Labs meetup、AMO 開発者ツール、SVG と + HTML、CSS、カラープロファイル、L10N、Mozdev、などなど… +slug: DevNews/20080923 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Labs Meetup が今週木曜日にマウンテンビューで開催

+ +

Mozilla Labs は月例ミートアップを 9 月 25 日、今週木曜日にマウンテンビューの Mozilla HQ (1981 Landings Drive, Bldg K) で開催する予定です。今月の議題は Web の将来に焦点を当てる予定です。「私たちはあなたの声をお聞きしたいのです！Web の将来に対する大きなアイデアは何ですか？コンセプトシリーズに 付け加えたい考えはありますか？私たちはあなたを刺激するものは何なのかを聞きたいと強く 思っています！」みなさんが立ち寄り、ミートアップに参加することを歓迎します！ベイアリーナにいるならば、立ち寄る時間を作って、この議論に参加するべ きです。出席する予定ならば、Mozilla Labs ミートアップの投稿にコメントを残して参加の表明をしてください。

+ +

AMO 開発者ツールがテスト開始

+ +

Justin Scott が addons.mozilla.org の新しいツールの開発について書き、これらのツールがテスト開始になったことを発表しました。「en-US の Developer Tools のインデックスで、新しいツールを試すように促す案内を見ることができるはずです。試そうとすると、新しい『Developer Dashboard』に移動します。次の更新まで古いインデックスを利用することで古いツールを利用し続けることができます。次の更新時には新しいツール がデフォルトかつ唯一のツールになります。」

+ +

実際の AMO データベースに変化を加えないで新しいツールを試すことができる テストサイトも用意されています。様々な新しいツールについての詳細を知るためには、Justin のブログ投稿からリンクされている以前の投稿のすべてを読んでください。

+ +

HTML の内容に SVG による効果を適用

+ +

Robert O’Callahan は SVG による効果を HTML の内容に適用できる機能を Firefox に追加することに取り組んでいます。彼は最初にこの取り組みについて 6 月に投稿し、SVG の「clip-path」、「mask」そして、「filter」プロパティを HTML の内容に適用したときにそれらのプロパティの効果を その HTML の内容に作用させるという彼の試みを説明しました。先週 Robert はこの取り組みがメインの Mozilla コードベースに追加されたことを発表し、さらに彼は SVG 仕様標準化のための SVG ワーキンググループに自分の提案を提出しました。動作しているスクリーンショットと動作デモを含むこれらの新機能についてのさらなる情報は、Web Tech ウェブログの Robert の投稿を参照してください。

+ +

CSS Transforms

+ +

Web Tech ウェブログに Gecko（Mozilla のレイアウトエンジン）ナイトリービルドが新しい 「-moz-transform」CSS プロパティがサポートするようになったことが投稿されています。Webkit でほぼ同じようにサポートされているこのプロパティは「変形関数（一般的なアフィン線型変換）のリストをその値とし、それらの変形が順番に、そのプロパティが適 用されている HTML 要素に適用される CSS プロパティ」と説明されています。プロパティの利用方法のいくつかの例とそれが何をするものなのかということについての説明が Web Tech の投稿に用意されています。「開発者にとって CSS Transforms の使い道を見つけようとすることは興味深いことだと思います。かつてはプラグインに取られていた多くの機能を CSS と JavaScript で直接統合することができるようになりました。」さらなる情報とコードサンプルは Web Tech の記事に用意されています。

+ +

カラープロファイルサポートの変更

+ +

Bobby Holley が Mozilla のカラーマネジメントのバックエンドをリファインし、「プライムタイム」に備えてパフォーマンスの改善と機能の洗練に取り組んでいます。最新の Firefox ナイトリービルドではタグ付けられた画像に対してカラープロファイルサポートがデフォルトで有効になったように、これらの努力は明確に期待の成果を上げています。この文脈での「タグ付けられた画像」とは Web ブラウザで表示される ICC カラープロファイルが埋め込まれた画像、言い換えれば、指定されたかつ正確な色変換を行うことを必要とする情報を含んだ画像です。Bobby の投稿ではこれらの変更の技術面のすべてについての詳細な説明が続き、カラーマネジメントが今まですべてのものに対して有効にならなかった理由についても説明しています。Percy Cabello もこれらの変更について Mozilla Links （日本語版）に投稿しています。

+ +

HTTP トラフィックに割り込める nsITraceableChannel

+ +

Jan Odvarko が次のように書いています。「bug 430155（『 new nsHttpChannel interface to allow examination of HTTP data before it is passed to the channel’s creator（チャンネルのクリエイタに渡される前に HTTP データを実行するための新しい nsHttpChannel インターフェース）』）が修正されたことで、Firefox の拡張で HTTP トラフィックに割り込むことができるようになりました！」Jan はこの修正は Firefox 3.0.3 (訳注：3.0.3 はパスワードマネージャに関するバグ（bug 454708）の修正だけを目的としたリリースとなったため、 この修正は 3.0.4 にずれ込む見込みです。）の一部となるだろうと見積もり、この機能は アドオンの機能とのひとつとして ページ毎に生成された HTTP リクエストのレスポンスを表示する機能を持つ Firebug にとって重要であると指摘しています。今まで、Firebug は この機能を実装するために Firefox キャッシュと XHR モニタリングを利用していましたが、次善策であったこのアプローチにはいくつかの問題がありました。Firefox アドオンで利用する方法の例を含む、この機能についてのさらなる情報は、Jan の Software is hard ウェブログでの彼の記事を読んでください。

+ +

ローカライゼーションドライバーの見える度

+ +

Mozilla のローカライゼーションディレクターである Seth Bindernagel はローカライゼーションドライバーチームがローカライゼーションの活発度の見える度を増加させ、プロジェクトのコミュニケーションを改善しようとしている いくつかのステップについて最近ブログに書きました。彼らが用いている 2 つの主要なツールはローカライゼーションダッシュボードと高優先度の課題を早急に分けることを保証するチームの新しい週毎のトリアージミーティングです。 くわえて、チームは新しい Firefox 3 l10n リリースのトラッカーバグを作り、新しいローカライゼーションチームがより簡単に私たちのプロセスの初期の段階に進めるようにすることに取り組んでいま す。Seth が 3.0.2 と 3.0.3 リリースでの 2 つのマイナーアップデートの間での大きな成果として Firefox では 13 のさらなる言語が追加されるだろうと発表したように、これらの努力の結果は明らかです。さらなる Mozilla のローカライゼーションへの取り組みについては、Seth のブログ投稿を参照してください。

+ +

新しい Mozilla Foundation T シャツ

+ +

David Boswell が次のように書いています。「新しい Mozilla シャツが Mozilla ストアで購入可能になったことをお知らせします。この新しいデザインは古い時代の Hack シャツに非常に影響されています。」Mozilla Store での購入のすべては直接 Mozilla Foundation の収益になります。Mozilla Store で T シャツをチェックし（注文して）ください！

+ +

Mozdev 8 周年

+ +

Mozdev チームは次のように書いています。「2000 年 9 月に mozdev.org は Mozilla アプリケーションと拡張開発者のサポートに専念するためのサイトとして始まりました。昨年までに私たちは数千の活発なプロジェクトのホストを提供し続けてきており、そこには現在数十以上の Mozilla ベースアプリケーション向けのアドオンがあります。開発プロジェクトがさらにより簡単になる新機能とさらなるアップデートも予定されています。私たちは今までの 8 年間、時間、精力、お金を分け与えていただいたみなさんに感謝します。そして私たちはこれからも Mozilla コミュニティに協力できることを楽しみにしています。」

+ +

最新の about:addons ニュースレター

+ +

Mozilla Add-ons チームは 月刊 about:addons ニュースレターの最新号を発行し、Mozilla アドオン開発の世界から最新で素晴らしいニュースと情報を提供しています。Mozilla Developer Center でニュースレターの全文を読むことができ、また、簡単な購読フォームを用いて、将来の号を直接メールの受信箱に受け取れるように申し込むことができます。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20080930-2/index.html b/files/ja/orphaned/devnews/20080930-2/index.html new file mode 100644 index 0000000000..8b5fb14fdb --- /dev/null +++ b/files/ja/orphaned/devnews/20080930-2/index.html @@ -0,0 +1,22 @@ +--- +title: 'about:mobile - Fennec M8、カメラ入力タグ などなど…' +slug: DevNews/20080930-2 +tags: + - DevNews + - 'DevNews:about-mobile' +--- +

Fennec M8

+ +

Mark Finkle が Fennec M8 がリリースされたことについて書いています。M8 は 最終的に Firefox Mobile になる予定である Fennec モバイルブラウザーの最新のプレアルファマイルストーンリリースです。M8 には Sean Martell と Madhava Enros が作成した新しいアイコンセット、改善されたレンダリングパフォーマンス、UI の改善、そして、多くの他の要素が含まれています。完全な概要は Mark の投稿にあります。

+ +

カメラ入力タグ

+ +

Ajaxan での投稿で説明されているように、Brad Lassey は Fennec でカメラから入力させて、それを Web アプリケーションで利用可能にするスクリーンショットを投稿しました。この種類の機能はまさにハードドライブからのファイルの代わりに写真をアップロー ドするファイル入力タグのように動作します。これはつまり、Web サイトが簡単に扱いにくいギャラリーとファイルアップロード手順の代わりにブラウザから直接写真のアップロードのサポートを含むことができる可能性があることを意味します。完全な詳細は Brad の投稿を読んでください。

+ +

Fennec 向け TraceMonkey

+ +

Vladimir Vukićević が TraceMonkey を ARM プラットフォームに移植した作業について投稿しました。TraceMonkey は Firefox 3.1 に含まれる予定の Mozilla の高速 JavaScript 実装です。ARM 上でのスピードアップは x86 ベースシステムで測定されたものと似ています。いくつかの命令は SunSpider テスト全体での約 2 倍のスピードアップとともに 30 倍高速になっています。これらのスピードアップは多くの Web サイトでユーザが体感可能な改善をもたらすでしょう。しかし Fennec の多くは JavaScript で書かれているため、全体としてのブラウザのパフォーマンスも改善されるでしょう。さらなる情報は Vlad の投稿を読んでください。

+ +

Mobile 向けのアドオン

+ +

拡張は デスクトップ上の Firefox の最も良い部分のひとつであり、Mozilla も Fennec に同じ拡張環境を移植することに懸命に取り組んでいます。いち早い初期段階の拡張サポートは Fennec M7 に含まれ、M8 で改善されています。Mark Finkle は拡張作者に必要とされる予定のものおよび人々が分解できる 2 個のサンプルアドオンを投稿しています。

diff --git a/files/ja/orphaned/devnews/20080930/index.html b/files/ja/orphaned/devnews/20080930/index.html new file mode 100644 index 0000000000..9efc33022e --- /dev/null +++ b/files/ja/orphaned/devnews/20080930/index.html @@ -0,0 +1,42 @@ +--- +title: 'about:mozilla - Mobile Firefox、Weave、データ、ロゴ、FAQ、などなど…' +slug: DevNews/20080930 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mobile Firefox: マイルストーン 8 リリース

+ +

Mark Finkle は Fennec（Mobile Firefox のコードネーム）のマイルストーン 8（M8） をリリースしたことについて投稿しました。このリリースは Nokia N8×0 にインストールしてテストすることができます。「このマイルストーンがリリースされるまででの大きな改善のひとつは 数人の Mozilla QA チームのメンバーが加わったことです。Fennec は現在とても懸命にテストされ続けています。また、そのテストはバグを見つけることが大好きな人々によっても行われています。現在、私たちは多くの問題を 見つけ修正し続けています。恐らく、M8 における最も大きい目に見える変更は新しいテーマでしょう。それはまだ完全にチェックインされていませんが、デザインを繰り返し、いくつかの変更が行われ る見込みです。」この投稿では Fennec の予定されている変更についての話題が続いています。「Fennec はいまだに Nokia N8×0 だけをターゲットにしていますが、もうすぐこの状況は変化するはずです。Windows Mobile 上での作業はかなり盛り上がっています。」M8 のハイライトを含む、さらなる情報は、Mark の投稿全文を参照してください。

+ +

Weave: これまでの話

+ +

Dan Mills は Mozilla Labs の「Weave」プロジェクトの背景、現在の状態、そして、予想される将来についてのいくつかの疑問の設定についての概要を述べている、広範囲に渡る更新 状況を書きました。「私たちは Weave はいまだ長い道のりのプロジェクトでありだと考えており、次のようなことをとても疑問に思っています。：私たちのビジョンに近づくためにする必要があるこ とは何か？現時点での主要な問題は何か？そして、私たちは以前の決心に立ち返る必要はないのか？長い間この思案をし続けてきましたが、今、これらの疑問に 答え始めることができると私は思います。」Dab の投稿はプロジェクトが直面している主要な課題のいくつかについての説明に続いていき、彼は次回以降の投稿でさらに深く展開していくつもりです。彼のウェ ブログで彼の現時点での投稿の全文を読むことができます。

+ +

データの利用方法: いくつかの基本的な例

+ +

Mitchell Baker は以前、インターネット利用についての基本的な、かつ、集合的な、また、匿名化された情報をより広く利用可能にすることが必要だと信じていると書きまし た。「インターネットの基本的な利用方法についてのデータが閉鎖的で独占的なものだとしたら、オープンプラットフォームとしてのインターネットは損害をこ うむるでしょう。」Mitchell は「データの利用方法」を意味するものの例として、私たちが集合的な匿名化された形態として最も見ることに慣れているものを取り上げ、投稿しました。これ らにはサイトの帯域幅の利用方法、1 日、もしくは、1 ヶ月 のサイト「トラフィック」、そして、ソフトウェアダウンロード数が含まれます。「これらの例は明らかに非常に一般的なものです。この理由のために私はそれ らをまさに利用しているといえます。つまり、私たちがこの種類のデータの利便性とそれが集合的な匿名化された形態で存在することをすでに理解していること を実証していることになります。、集合的な匿名データの他の形態も、インターネットがどのように使われているかを理解し、また、最終的に、インターネットとは本質的に何かを理解するのに同様に役立ち得えます。」Mitcell の投稿の全文を読むためには、彼女のウェブログを訪れてください。

+ +

新しい SUMO ロゴデザインへの協力を

+ +

support.mozilla.com (a.k.a. SUMO) プロジェクトは 1 年以上経過し、世界中の数百万人の Firefox ユーザに影響を与える素晴らしいコミュニティパワーによるサポートチャンネルになりました。SUMO チームは SUMO の将来を計画し、領域と参加の両面で成長するに連れて起こるサービスの革命を概念化することに取り組んでいます。この革命の一部として、Tara Shahain と David Tenser は SUMO と その進行中のミッションを包含する力強い Visual Identity を作りたいと思っています。この一部にはプロジェクトのための新しいロゴを作成することが含まれますが、彼らは協力を必要としています。「もっと具体的にいうと、私たちはデザインコンセプトと SUMO を視覚的に表すために最も良い方法に関するアイデアのブレインストーミングでの協力を必要としています。以前においては SUMO はそのリソースを Firefox に専念していたため、主に『Firefox Support』として知られていました。しかし、David が彼のブログに書いているように、SUMO はより広い領域を目指しています。」プロジェクトについて、および、ロゴデザインプロセスに参加する方法を知るためには、Tara のウェブログ投稿を参照してください。

+ +

新しい Firefox ロゴスタイルガイド

+ +

John Slater と Tara Shahain は既存のガイドラインをリファインし、より幅広い人々に知ってもらうという目的の元に Firefox ロゴのための新しく改善されたスタイルガイド制作に取り組んでいます。先週の金曜日、John は新しいスタイルガイドがリリースされたことを発表しました。「私たちの望みはこのガイドがロゴをどのように利用したらよいか（またはいけないか）についての多くの共通して尋ねられる質問の答えになることです。また、様々な調整済みのロゴをダウンロードすることができるセクションも含まれているので、何が 公式のバージョンなのかということにとまどうことはないでしょう。私たちはこのスタイルガイドをベータリリースと現在呼んでいます。なぜなら私たちは全体 としてのコミュニティが私たちが公式にそれを最終版とする前にレビューし介入することを確信しているからです。ですから、質問、考え、もしくは、コメントがあれば、私か Tara に知らせるか、フィードバックを Spread Firefox のディスカッションページに投稿してください。」さらなる詳細は、John のウェブログの投稿全文を参照してください。

+ +

Powered by Mozilla FAQ

+ +

David Boswell はプロジェクトと製品の一部として「Powered by Mozilla」ロゴをどのように使うことができるかを定めるためのいくつかのガイドラインの作成に取り組んでいます。彼は最近、彼がロゴについてよく尋ねられる質問に答えるための Powered by Mozilla FAQ を投稿しました。「まだいくつかのさらなる情報（ロゴについてのガイドラインとロゴを使うことを求めるアプリケーション）が投稿される必要があり、それらの部分はもうすぐ行われるでしょう。今のところ、私は他の部分が完了する前に人々にさらなるフィードバックをしてもらうために FAQ を投稿しています。」FAQ と Powered by Mozilla プロジェクトについてのさらなる情報は David のウェブログ投稿に用意されています。

+ +

Mozilla Community Store: もうすぐオープン！

+ +

Firefox 3 リリースの一部には 公式 Firefox 3 T シャツを作成するための「オープンソースな」デザインプロセスで行われた T シャツコンテストが含まれていました。私たちは素晴らしい受賞シャツを手に入れただけでなく、他にも大変数多くの素晴らしいデザインを受け取りました。これらのコミュニティデザインをもっと多く商品として扱えるようにするための高まる需要があるのではないかと考え、数ヶ月間マーケーティングチームはこれを 可能にするための法的および物流的な挑戦を整理してきました。Tara Shahain は最近次のような良いニュースを発表しました。「私たちは『Mozilla Community Store』を作るために、つまり、コミュニティによって作成された製品のための新しく開かれたチャンネルとなるであろうオリジナルの Mozilla Store の仲間として、Zazzle.com とパートナー契約を結びました。Community Store はまだ完成していませんが、私は来月ぐらいには準備ができると思っています。あなたのデザインを考え始めていてください！オープンしたときに、私たちは全課程通してあなたをガイドするための多くの詳細を発表するつもりです。今後も注目していてください！」このプロジェクトについてのさらなる情報は Tara のウェブログにあります。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081007/index.html b/files/ja/orphaned/devnews/20081007/index.html new file mode 100644 index 0000000000..f9b6078538 --- /dev/null +++ b/files/ja/orphaned/devnews/20081007/index.html @@ -0,0 +1,58 @@ +--- +title: >- + about:mozilla - Impact Mozilla、FSOSS、Mobile Firefox、SFX、Public + Relations、SUMO、アドオンに関する調査の結果、などなど… +slug: DevNews/20081007 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Impact Mozilla: コミュニティマーケティングチャレンジ

+ +

先週 Mozilla のマーケティングチームは Impact Mozilla と呼ばれる新しいコミュニティに焦点を当てたマーケティングチェレンジを開始しました。このアイデアは Mozilla のマーケティングプロセスをコミュニティにさらに開かれたものにし、誰が一番良いアイデアを思いつくかを見ることができるようにするためのものです。このチャレンジは Firefox ユーザの継続率の増加、つまり、 Firefox をダウンロードしてインストールした後に使い続ける人々の数の増加を支援するアイデアを集めて育てることに特に焦点を当てています。

+ +

「私たちは Firefox をダウンロードした人々がレギュラーユーザになることを保証する革新的な方法を求めています。興味がありますか？私たちにあなたのアイデアとあなたとあなたのチームがどのようにそれらを実行するかの概要の要約を送ることによって始めてください。あなたの最初の戦略がカットされているならば、私たちはあなたの解決策を詳しく説明する完全な計画を尋ねるでしょう。あなたの計画が最優秀として選ばれた場合、あなたは技術界でトップブランドのひとつのためのマーケティングキャンペーンを管理する機会を持つことになります。私たちはあなたの解決策を実現させるためのリソースをあなたに与え、加えて、最優秀提案のために 3000 ドルを与えます。」始め方と計画の提出方法を含む、詳細のすべては、Impact Mozilla ウェブサイトを参照してください。

+ +

Free Software and Open Source Symposium (FSOSS)

+ +

David Humphrey が次のように書いています。「Free Software and Open Source Symposium (FSOSS) が 10 月 23 日と 10 月 24 日に予定されており、オンライン登録が開始されました。多くの早い行動は評価されますから、早く登録してください。今年のラインアップには多くのよく知られた Mozilla に関わっている面々が含まれています。スピーカーの一覧は長く多様であり、Web で一番良いもの、オープンソースデスクトップ、オープンソースビジネス、ポリシー、法律などを代表しています。私たちもまた Teaching Open Source の 1 トラックを実施し、生徒をオープンソースプロジェクトに引き込むことの潜在性とチャレンジを議論するために教授、生徒、管理者、そして、コミュニティリーダーを集める予定です。」さらなる情報は David のブログ投稿全文をチェックし、FSOSS の Web サイトをチェックしてください。

+ +

Mobile Firefox: ユーザエクスペリエンスの開発

+ +

Mobile Firefox (「Fennec」のコードネーム) は最近マイルストーン 8（M8）リリースを達成しました。Mark Finkle がリリース時にリリースについてブログに投稿し、その後、Madhava Enros がモバイルブラウザへのユーザエクスペリエンスの変更と追加についてブログに投稿しています。「これはユーザエクスペリエンスの見地からエキサイティングなことです。なぜなら、機能と安定性の改善とともに、このマイルストーンは Fennec がルックアンドフィールを初めて意識したものだからです。ある意味では、私たちは遊び、評価し、改善する価値がある UI を持つようになったということです」。Madhava の投稿にはチェックすることができる多数にスクリーンショットが含まれています。Mobile Firefox の UI についての議論に参加したければ、Mobile 開発 グループに向かうべきです。

+ +

Spread Firefox Affiliates プログラム

+ +

David Rolnitzky は最近 Spread Firefox Affiliates プログラムの多くの改善を発表しました。Affiliates プログラムは Web サイトボタンとバナー、また、トップの Firefox リファラを獲得したユーザへの年 4 回の賞品を提供することによって、私たちのコミュニティがより簡単に Firefox についての言葉を広げることができるようにデザインされています。「改善のいくつかはユーザから見えるものもあれば、すぐには明白にではありませんが、プログラムに素晴らしい恩恵をもたらすバックエンドの改善もあります。この改善計画の最初の詳細はここにあります。」改善には、始め方、ポイントシステムの動作方法、ボタンとバナーのより良いグループ化、国際的ボタンの新しい選択肢、カスタムボタンの生成機能、そして、新しい奨励システムについてのより明白な情報が含まれています。完全な詳細は David のブログ投稿を読んでください  。そして、 Affiliates プログラムサイトへ行き、サインアップし、Firefox をさらにより良いものにする方法を学んでください。

+ +

SpreadFirefox.com の次の段階

+ +

夏の間に多くの改善が SpreadFirefox.com (SFX) になされ、Alix Franquet はその仕事に深く関わっていました。Alix は SFX の次の段階についてブログに書き、ホームページと全体的なサイトナビゲーションの改善を引き受けた 3 つの部分のリデザインの概要を示しています。これらの 3 つの部分には次のものが含まれています。：SFX が何であるかをより良く説明し、コミュニティスポットライトと行動の呼びかけを含む、単純化されたホームページの作成、SFX メンバーがイベント、新しいグループ、新しい投稿が含まれるサイト上で何が起こっているかをもっと良く理解できるように活動を追いかけることができる新しいページ、そして、全体的なユーザビリティの改善のためのサイトナビゲーションの更新。計画された変更の多くのさらなる詳細は Alix のブログ投稿にあり、SFX でも完全な計画を読むことができます。私たちは常に SFX に対するさらなる協力を求めています。ですから、これは Mozilla のコミュニティマーケティングプロジェクトに飛び込み参加するための素晴らしい機会です。

+ +

Mozilla Public Relations 分析

+ +

Mozilla の Public Relations チームは PR プロセスを解放し、より透明にし、また、より Mozilla のオープンソース DNA にフィットさせることに取り組んでいます。最も最近の取り組みは Melissa Shapiro により書かれた投稿で、その投稿において、彼女は PR 分析について説明しています。「私たちは影響の基準となる方向性がない場合に自分たちがより良くなっているかどうかをどのように知るのでしょうか。答えは純粋な科学ではありません。本当の PR 分析は単純に定量的ではなく、定性的でもあります。定量分析は記事、報道での取り上げ、国単位での分布範囲の総数のようなものを探します。定性分析にはメッセージの浸透と聴衆と調子の分析が含まれます。Mozilla の主要な PR イニシアティブの成功を評価することにおいてそれらは等しく重要だということがわかります。」

+ +

記事は私たちが Moziia での PR プロセスの一部として探し出す様々な種類の定量的および定性的な分析についての説明に続き、各々の利用ケースと Firefox 2 と Firefox 3 リリースので パブリックリレーションズの活動を比較する例の概要を述べています。パブリックリレーションズの普通では明らかにされない世界についてさらに学ぶことに興味があるなら、Melissa のブログのこの記事や他の記事をチェックすべきです。

+ +

SUMO のビジョン - Part 8: Live Chat

+ +

David Tenser は Support.mozilla.com (SUMO) プロジェクトの範囲と役割の総合的なビジョンについて説明したブログ投稿の長きに渡るシリーズを公開しています。彼は最近、シリーズの 8 番目の投稿を公開しました。この投稿は革新的で素晴らしく役に立つ「Live Chat」機能に焦点を当てたものです。「問題がまだ Knowledge Base でカバーされていない場合、もしくは、記事での指示が難しくて理解できない場合に、Live Chat は ユーザが Firefox のエキスパートに連絡を取り、問題を解決するために実践支援を得ることができる強力な方法です。Live Chat は貢献者がサポートを提供するためのとても面白い方法でもあります。貢献者が Live Chat で協力することは単にユーザを助けるだけではなく、彼らがお互いに話し合うのと同様に、必要なときに他の協力者に支援を提供することができます。このことは普通は助けているユーザとやり取りをしているのはあなた一人だけでも、あなたは決して一人きりではないということを意味します。」

+ +

David はさらに完全に統合化されたチャットクライアント、単純なスケジューリングの解決法、English 以外の言語でのサポート、自動的にチャットログを保存し、ユーザの満足度に関連付けることなどを含む、サービスのいくつかの可能性のある将来の改善について説明しています。Live Chat の将来に興味があり、チームが将来の改善についてどのように考えているかを知りたいなら、Firefox Support Blog で投稿全文を読んでください。

+ +

アドオン開発者への調査: そのままの結果

+ +

Addons.mozilla.org (AMO) サイトの信頼できるチームは最近アドオン開発者コミュニティの調査を行いました。 総数 265 人が調査に回答し、最初の結果が公開されました。「一般的な概要を示すと、多くの回答者は 2 年かそれ以上のアドオン開発経験がある独立した開発者でした。当然彼らは JavaScript と XUL に親しんでいます。彼らは主に Firefox のためにアドオンを作成し、それを自身でホストしています。」完全な結果は公開されていますが、それらは単純にそのままの結果です。チームはさらに興味深い発見と結論を引き出すためにいくつかの相関分析を適用する予定です。これらの最初の結果を見て議論するために、Basil のウェブログの投稿を参照してください。

+ +

2 人の Mozilla 関係者が BusinessWeek の「25 Most Influential」に

+ +

Mitchell Baker と Joi Ito が BusinessWeek の 25 人の Web で最も影響のある人々の一覧に含まれていることが最近発表されました。「毎年、私たちは読者と BusinessWeek の Best of the Web list スタッフにインターネットの大物の一覧向けの名前を寄稿してもらうように頼んでいます。」すべての 25 人の受賞者を含むスライドショーのすべてを BusinessWeek で見てください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081014/index.html b/files/ja/orphaned/devnews/20081014/index.html new file mode 100644 index 0000000000..71ad25d61c --- /dev/null +++ b/files/ja/orphaned/devnews/20081014/index.html @@ -0,0 +1,60 @@ +--- +title: >- + about:mozilla - Labs 出張、Geode、新しい PR ブログ、SUMO、SVG、Firefox 3.1 + 関連ドキュメント、Ubiquity、MozAfterPaint、などなど… +slug: DevNews/20081014 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla Labs が来週ヨーロッパへ

+ +

Aza Raskin が次のように書いています。「Mozilla Labs はコミュニティメンバー、ハッカー、ブロガー、メディア、一般的な行動家に会うために来週ヨーロッパへ行きます。私たちはロンドン、ベルリン、バルセロナに滞在する予定です。私たちは Labs night、Hack セッション、あるいは飲み会を各都市で行う予定です。これらのイベントはみんなのためにオープンなものになっています。私たちはあなたの参加を望んでいます！」イベントのおおまかなスケジュールを含む、さらなる詳細は、Aza のウェブログにあります。

+ +

Geode の紹介

+ +

Geode は開発者が Firefox 3 におけるジオロケーションの技術とコンセプトに関する実験を始めることを可能にする新しいアドオンです。Firefox の将来のバージョンは新しい Mozilla Labs ブログの投稿には Geode がどのように動作し、どこでそれをダウンロードできるか、どのように使われるかについてのいくつかのアイデア、そしてアイデアと可能な試みの議論への参加の仕方についての多くの情報が含まれています。Aza Raskin も最初のリリース以降アドオンについて出ているいくつかの疑問を追求する Geode についてのフォローアップの投稿を書いています。

+ +

新しい Mozilla パブリックリレーションズウェブログ

+ +

Mozilla の PR チームは「Above the Fold: Mozilla in the News」と呼ばれる完全に新しいウェブログを公開しました。「Above the Fold はコミュニティが Mozilla でのパブリックリレーションズに注目を高めるための場所です。私たちはアナウンスメント、競争相手のニュース、そして、一般的な業界トレンド周辺のニュースサイクルを追い続けます。それから私たちはなぜ特定の記事と話題が Mozilla に重要なのかということについての背景を提供します。」パブリックリレーションズがどのように働き、何を意味するのかに興味があるなら、Above the Fold に注目すべきです。

+ +

SUMO: 記事編集者のアイデアを求めています

+ +

support.mozilla.com (SUMO) のチームは SUMO Knowledge Base 編集者システムをどのように改善するかについてのアイデアを求めています。議論とフィードバックは SUMO 貢献者フォーラムで行われており、現在の編集者とこれらの問題を修正するために考えられる方法についてのあなたの考えとアイデアを投稿するための時間がまだあります。すでに投稿済みのいくつかの問題と解決策の一覧は SUMO ブログにあります。

+ +

Firefox アクセシビリティチームはあなたの協力を必要としています

+ +

Marco Zehe が次のように書いています。「もしあなたがその手をほんの少し汚すことを恐れず、Firefox アクセシビリティチームに協力したいなら、今こそ参加する良い機会です。生成されたアクセシブルのための名前を算出するコードが長い間に大きくなり、ほとんどの部分でメンテナンスし難くなってしまいました。aria-label プロパティサポートの追加のような新機能は HTML と XUL のコードの重複を要求し、一般的にもコードには多くの汚い部分があります。私たちのチームはコードをより良い形にするためにコードのクリーンアップとリファクタリング作業を開始しました。」どのようなリファクタリングでも、軽視することができないリグレッションのリスクがあります。チームはこれらの可能性のあるリグレッションのためのテストへの協力と用意されたテストケースのスイートに存在する不足を埋めることへの協力を求めています。これは Mozilla の開発作業に参加するための本当に素晴らしい方法です。協力することに興味があるなら、始めるために Marco のブログ投稿を読むべきです。

+ +

SVG 外部文書参照

+ +

Web Tech ウェブログの投稿で、SVG 外部文書参照が Gecko 1.9.1 及び Firefox 3.1 の 2 番目のベータに間に合うように trunk にチェックインされたことが発表されました。「これは塗りつぶし、clip path、マスク、フィルター、svg:use ターゲット、あるいは、マーカーとして使われる SVG 要素が塗りつぶされる、マスクされるなどする要素と同じ文書内にある必要が無くなったことを意味します。特にこれは HTML の内容における SVG の効果についての以前の投稿が XHTML だけでなく HTML 文書にも適用されることになったことを意味します。」さらなる詳細と小さなデモへのリンクは、Web Tech ブログの投稿を参照してください。Robert O’Callahan も最近の SVG 開発について彼のウェブログに書いています。

+ +

Audio、Video、Geolocation、及び Media queries のドキュメンテーション

+ +

Eric Shepherd が Firefox 3.1 に含まれることが予定されているエキサイティングな新しい Web 技術のいくつかのドキュメントを書くことに懸命に取り組みました。これらの一番最初は HTML もしくは XHTML 文書に音声コンテンツを埋め込む HTML 5 の audio 要素です。同じように、HTML 5 の video 要素ドキュメンテーションも用意されており、映像コンテンツを埋め込むためにこの要素をどう使うかが説明されています。Eric は Firefox 3.1 で開発されている新しいジオロケーション API を紹介する「ジオロケーションの使用」という記事もまとめました。ついには、非常に正確な判断に基づいて異なったスタイルシートを選択可能にする CSS media queries のドキュメンテーションを完了しました。

+ +

協力求む: QA Companion Firefox アドオン

+ +

Clint Talbert が次のように書いています。「Zach Lipton と Ben Hsieh が QA Companion アドオンを作成しました。これは Firefox または Thunderbird のウィンドウの外側に小さく表示され、アプリケーションに対する litmus テストの実行を支援する拡張です。Firefox のテストを行うとき数千人の人々は協力してくれており、QA Test Day イベントの中心となっています。QA Companion は素晴らしいポテンシャルを持っており、これを用いて多くの人々が Nightly Tester Tool の機能のいくつかを統合したり、Mozilla の自動化 UI を統合化することを含む、より面白いマッシュアップを行う方法について考えています。アドオンに取り組みたいといつも思っているけれど始めることに大きな壁を感じているなら、これは素晴らしい機会です。ベースコードはすでに書かれており、とても簡単です。いっしょに、私たちはツールの新しい方向性をデザインし、それを Mozilla の世界ですべてのテスタにとって本当に役に立つものにすることができます。」QA チームに Companion の開発とメンテナンスで協力することに興味があるなら、Clint は彼のブログ投稿にコメントをするように求めています。

+ +

Ubiquity の進捗状況

+ +

Ubiquity 0.1.2 に向けたリリース候補が利用可能になり、チームはテストに協力してくれるように求めています。0.1.2 は Jonathan DiCarlo が以前のブログ投稿で説明していた parser-localization API の準備的なバージョンです。また、彼は自分の parser localization API チュートリアルを詳細に説明しています。0.1.2 の完全なリリースノートとさらなる情報及びリリース候補のダウンロードリンクは Jonathan のウェブログにあります。

+ +

SUMO: Live Chat とコミュニティ参加

+ +

SUMO Live Chat プロジェクトの新しいリーダーである Matthew Middleton が Live Chat の便利さとその貢献者コミュニティについての興味深い記事を書いています。「コミュニティとしてのサポートについてのひとつの素晴らしいことはユーザと支援者の間の線がはっきりとしないことです。多くの現在のサポートボランティアは質問をすることから始め、自分自身の問題の解決することで学んだ情報を用いて他の人々を助けるためにとどまっています。ほとんどのユーザには定期的にコミットする時間がない一方、多くのユーザが問題を解決するために特別に時間を費やし、最終的に問題を修正するためのことを私たちに知らせ、フォーラムでアドバイスを投稿しています。サポートコミュニティは活発にユーザが問題を解決するのを助けている一方で、新しい支援者が Mozilla と一般的なサポートについて学ぶことを可能にしています。」いつものように、SUMO チームはより多くの協力を望んでおり、Live Chat があなたにふさわしいと考えるなら、始め方を知るために Mathew の投稿を読むべきです。

+ +

MozAfterPaint: 新しい実験的 API

+ +

Web Tech ブログに投稿されたように、Firefox 3.1 チームはコンテントが塗り直される毎にイベントを発生させる Firefox 3.1 向けの非常に実験的な API を作成しました。「イベントは MozAfterPaint と呼ばれ、文書で発生し、ウィンドウにバブルアップします。イベントは getClientRects and getBoundingClientRect メソッドと同じオブジェクトおよび座標システムを用いている、塗り直されたものを伝えるための clientRects と boundingClientRect の 2 つの属性を提供します。これは ウィンドウのコンテントをキャプチャするために canvas.drawWindow メソッドを用いているかもしれない Firefox の拡張と他の『chrome』コードにとって非常に役立ちます。また、Firebug のようなツールにとっても役に立ちます。しかし、通常のコンテントにとっても潜在的に役立つ可能性があり、例えば、 Firefox によって塗られたものを測るためにページにいくつかの軽量の JS 計測を加えたい場合です。 」この新しい API についてのさらなる情報は、Web Tech での投稿を読んでください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081021/index.html b/files/ja/orphaned/devnews/20081021/index.html new file mode 100644 index 0000000000..473e4a9d44 --- /dev/null +++ b/files/ja/orphaned/devnews/20081021/index.html @@ -0,0 +1,58 @@ +--- +title: >- + about:mozilla - Firefox 3.1、Thunderbird、Mobile Firefox、Impact + Mozilla、ローカライゼーション、2010 年までの目標、Ubiquity、などなど… +slug: DevNews/20081021 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3.1 Beta 1 がダウンロード可能に

+ +

Firefox 3.1 Beta 1 がダウンロード可能になりました。このマイルストーンは Firefox 3.1 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。このリリースに向けた計画の進行状況は Planning Center と mozilla.dev.planning ディスカッショングループ、そして、IRC 上の #shiretoko チャンネルで追うことができます。

+ +

このリリースの新機能と変更には次のものが含まれています。： Web 標準の改善、CSS 2.1 と CSS 3 のサポートの追加、切り替えようとしているタブのプレビューを表示する新しいタブ切り替えショートカット、スマートロケーションバーでの改善されたコントロール、W3C Geolocation API の追加、JavaScript Query Selectors、Web Worker Thereds、SVG transforms、そして、オフラインアプリケーション向けの改善されたサポート。

+ +

これらの機能のさらなる情報は Mozilla Developer Center の Firefox 3.1 for Developers（日本語版）という記事、および、Web Tech ブログの Overview of features for Web Developers（Web 開発者向け機能の概略）という投稿を含む、いくつかの場所にあります。

+ +

Thunderbird “Shredder” Alpha 3 がリリース

+ +

Thunderbird の 3 番目の初期リリース（コードネーム Shredder）がダウンロード可能になりました。このリリースは初期段階の状態であることと普通の、日常的な利用に適さないことを強調するために「Alpha 3」と呼ばれています。Alpha リリースはテスタ、拡張開発者、そして Thunderbird の次のリリースの開発を追いかけることに熱心な他の人々向けに用意されています。Shredder Alpha 3 にはいくつかの新機能の初期段階のバージョンが含まれており、さらなる詳細はリリースページとリリースノートにあります。

+ +

最初の Mobile Firefox Alpha がリリース

+ +

Mobile Firefox（コードネーム Fennec）が最初の Alpha である Milestone 9 をリリースしました。チームはこれを「User Experience alpha」と呼んでいます。また、それは Nokia N800/N810 インターネットタブレットをターゲットにしています。Windows Mobile バージョンも素晴らしい前進がなされていますが、まだ一般的な使用に耐えるまでには達していないためこのリリースには含まれていません。ですが、 Fennec の新しいデスクトップバージョンが用意されました。つまり、一体何が起きているかを見るために（もちろん、テストへの協力とフィードバックのためにも）Windows、OS X、Linux デスクトップ上にモバイルブラウザをインストールすることが可能になったということです。

+ +

Fennec Alpha 1 リリースノートには最初の一歩、ブラウザのインストール方法、このリリースでの新しいこと、既知のバグの一覧、そして、フィードバックを提供する方法についての情報が含まれています。Firefox Mobile プロジェクトに参加することに興味があるならば、Fennec をインストールし、ウォークスルービデオを見て、始めるための素晴らしい時です。

+ +

Impact Mozilla: 応募の最後の呼びかけ

+ +

Impact Mozilla コミュニティマーケティングチャレンジは 10 月 24 日金曜日に締め切られます。ですから、これは 1 つか 2 つのページのアイデアの要約を応募するための最後の機会です。このチャレンジの目的は Firefox ユーザの継続を改善するこを支援することです。私たちは数千万の人々が Firefox をダウンロードしても現在は使い続けてはいないことを知っています。これらの過去のユーザをどのように取り戻すことができるでしょうか？Firefox を一度ダウンロードしたらその後もずっと利用し続けてくれるようにする方法は？この問題を解決する方法についてアイデアがあれば、それを書いて Impact Mozilla ウェブサイトを通して次の金曜日までに応募してください。

+ +

Firefox 3.1 Beta 2 のローカライゼーションスケジュール

+ +

Seth Bindernagel は Firefox 3.1 Beta 2 のローカライゼーションスケジュールを投稿しました。String フリーズは今から 1 週間後の 10 月 30 日木曜日午後 11:59（マウンテンビュー時間）に行われる予定です。コードフリーズは 11 月 4 日火曜日午後 11:59（マウンテンビュー時間）の予定です。あなたが Firefox 3.1 Beta 1 作成に参加していないのなら、この次のベータリリースでの参加を望みます。私たちは完全にローカライズされたベータをリリースすることを目標としています。ですから、2 番目のベータにあなたが参加するのに私たちが協力できることを私たちに知らせてください。さらなる情報とローカライゼーションチームツールへのリンクは、Seth のウェブログの投稿を参照してください。

+ +

Mozilla の提案されている 2010 年までの目標についての議論

+ +

先月、Mitchell Baker は Mozilla が 2010 年までに達成するように取り組むべきだと確信する、提案されている目標の一覧を投稿しました。現在 Mitcell はこれらの目標についての議論を広げながら続けていきたいと思っており、Mozilla コミュニティ全体が議論に参加し意見とフィードバックを提供することができるようにするという次の段階についての概要を示したブログ投稿を書きました。「Mozilla には Mozilla の製品、技術、採用、そして、ミッションの特定の面でともに作業している人々の多くのグループがあります。これらのグループは Mozilla プロジェクトの総合的な目標の議論、および、人々が貢献する動機付けのためには自然な状態です。その点を考慮して、私たちはより多くの人々が気楽に参加することができる議論の設定を計画しています。これらのいくつかは直接顔を合わせてのミーティングになる予定です。その他のものはオンラインディスカッションになるでしょう。」これらのより小さなグループディスカッションと進行中のフィードバックが可能である他のフォーラムについての情報は、Michell のブログ投稿を参照してください。

+ +

開発者ツールと Open Web

+ +

Mozilla Labs は最近、開発者ツールと Open Web の研究と開発に焦点を当てる予定の新しいグループの形態を発表しました。「私たちは開発者の生産性を増加させ、賞賛せずにはいられないユーザエクスペエンスを可能にし、そして、オープンスタンダードを宣伝するツールにおける革新のための素晴らしい機会だと信じています。」Ajaxian、Ajax Ecperience の共同設立者、そして、Open Web の長きに渡る支援者である、Dion Almaer と Ben Galbraith が新しいプロジェクトを率いるためにフルタイムで Mozilla に加わりました。さらなる情報は、Mozilla Labs ブログの投稿を参照してください。

+ +

Ubiquity: ブックマークレットをコマンドに変換する

+ +

Aza Raskin は Firefox のブックマークレットを Ubiquity コマンドに変換する方法を説明した短いビデオチュートリアルをまとめました。「ブックマークレットはブラウザのブックマークツールバーに追加することができるクリックで実行されるアクション（技術的にはいくつかの JavaScript を含むリンク）です。それらは訪問するウェブサイトに欲しい新しい機能をどんなものでも追加することを可能にするので、Web のコントロールをユーザの手に取り戻すための良い方法です。ブックマークレットの主な問題はそれらが自らの機能にアクセスするための幅広い解決策を提供しないことです。あなたは多くのボタンをツールバーに置くことになるのでそれらは役に立たなくなります。」任意のブックマークレットを Ubiquity コマンドに変換することを容易にする Ubiquity の新しいユーティリティファンクションがあり、Aza のビデオチュートリアルはその使い方を説明します。

+ +

アドオン開発者へ: 再びそのときです。

+ +

Justin Scott が次のように書いています。「Firefox 3.1 の最初のベータのリリースとともにみなさんが大好きなリリースタイム祭り（拡張互換性の更新）がやって来ました！あなたが 3.0.* かそれ未満の maxVersion を使用している拡張開発者ならば、3.1 b1 との互換性を宣言する前に自分の拡張をテストしてください。拡張開発者向けの変更のいくつかが Mozilla Developer Center に一覧化されています（日本語版）。3.1.b1 は AMO で許可されるバージョンですが、3.1.* は最終リリースに近づくまで追加されません。あなたのユーザがどれだけ 3.1 ベータを利用しており、非互換/無効 としてマークしているかもしれないことを知るために Developer Statistics Dashboard を常に見ることができることを覚えておいてください。」さらなる情報を得るために Justin のブログ投稿をチェックするべきです。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081028/index.html b/files/ja/orphaned/devnews/20081028/index.html new file mode 100644 index 0000000000..4e1b46f265 --- /dev/null +++ b/files/ja/orphaned/devnews/20081028/index.html @@ -0,0 +1,46 @@ +--- +title: >- + about:mozilla - 2010 年までの目標、Camino、Firefox + UI、ローカライゼーション、Ubiquity、セキュリティメトリック、などなど… +slug: DevNews/20081028 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +
 
+ +

2010 年までの目標: データディスカッションは今日です！

+ +

Mozilla の提案された 2010 年までの目標についての進行中の議論の一部として、Mitchell Baker は今日、10 月 28 日 木曜日午後 1 時太平洋時間にプライバシーとデータに関する目標についての公式ディスカッションを行う予定です。このディスカッションは Air Mozilla で配信される予定であり、また、質問に対応するために irc.mozilla.org の #2010goals IRC チャンネルを使う予定です。さらなる情報は、Mitchell のブログ投稿を参照してください。

+ +

Camino 2.0 Alpha 1 がダウンロード可能に

+ +

Samuel Sidler が次のように書いています。「Camino 1.6 をリリースして以降、Camino Project は懸命な作業を何ヶ月も続けてきましたが、今、自信を持って Camino 2 のファーストプレビューリリースを発表します。Camino 2.0 Alpha 1 には、タブオーバービュー、完全なコンテンツズーム、ブラウザウィンドウでの完全なキーボードアクセスのより良いサポート、そして、「最近閉じたページ」メニューを含む、いくつかの注目すべき改善が含まれています。また、Camino 2.0 Alpha 1 は人気のあるプラグイン利用でのより良いパフォーマンスと Web 標準のサポートの拡大につながる、Mozilla の Gecko レンダリングエンジンの バージョン 1.9.0 における改善のすべてを含んでいます。さらなる情報を入手し、ダウンロードするために、プレビューサイトを訪れてください。」

+ +

Mozilla の 2010 年までのモバイルに関する目標についての考え

+ +

Jay Sullivan は Mozilla がモバイルでの取り組みでなすべき、可能性のある、2010 年までの目標についての彼の考えを考察した広範囲に及ぶブログ投稿を書きました。「Web は他のプラットフォームにはない革新と選択が可能です。そして、私たちのミッションを行い続けるために、私たちは Web 開発者がモバイルデバイスのために素晴らしいソフトウェアを作成できるようにする必要があります。適切な方法でこれを行うために、私たちはアプリケーション開発者のニーズに対処し、Web を可能な限り最も良いモバイルプラットフォームにする必要があります。ネイティブの機能との比較は私たちがどのように進んでいくかを調べるための良い方法です。私は 2010 年までにリッチさがこのレベルに達したモバイルプラットフォームとしての Web を思い描くことが私たちが集めることができ、いくつかの方法で測定できる目標の集まりを促進することを助けると思っています」。投稿の全文を読み、議論に参加するために、Jay のウェブログを訪れてください。

+ +

Firefox テーマ: Alex Faaborg による Firefox ツールバー UI についての考察

+ +

Alex が次のように書いています。「私たちが Firefox 3 の Windows テーマの開発の間にフィードバックを受け取っていたとき、一つの質問が多くのことを想起させました。なぜメインツールバーに 3 つの異なったコントロールの見た目のスタイルがあるのでしょうか？」Alex のブログの投稿は Firefox 3 のツールバーの見た目の階層の背景にある理由を考察し、なぜ異なった重み付けをされたコントロールが同じ重み付けをされたコントロールよりも役に立ち、効果的なのかを説明しています。この記事は UI チームの Firefox 3 についての決定と選択されたデザインの裏にある考えとセオリーのいくつかの背景にある深いところまで探求している興味がそそられる投稿です。Alex のウェブログで彼の投稿全文を読んでください。

+ +

Firefox 3.0.4 での 6 つの新しいローカライゼーション

+ +

Seth Bindernagel が Firefox 3.0.4 のリリースで 6 つの新しい言語が Firefox に追加されるということについて書いています。新しい言語は次のものです。：ブルガリア語、エスペラント、エストニア語、ラトビア語、オック語、そして、ウェールズ語。「Ogi (bg)、Eduardo (eo)、Sander (et)、Raivis (lv)、Yannig (oc)、そして Dewi と David (cy) の懸命な作業に感謝します！このリリースの技術的な面を推し進めた Pike、このリリースの Web サービスを管理した Stas、そして、webparts担当の Pascal にも特に感謝します。最後に、Gandalf がリリース前のその日の午前 5 時頃に少しのパッチを書き、コードをチェックするために参加しました。それは本当のチームプロセスでした。」さらなる情報は、Seth のブログ投稿を参照してください。

+ +

Ubiquity の更新情報

+ +

Aza Raskin が Ubiquity 0.1.2. のリリースを発表しました。「私たちは Ubiquity について立ち上げ直後から非常にたくさんの量のフィードバックをもらいました。主なポイントの一つは Ubiquity に含まれるコマンドとより多くのコマンドのための欲しい機能とバグの修正でした。このリリースでの最新の更新は組み込みコマンドのすべてが HTTPS で保証された ubiquity.mozilla.com から配信されるようになったことです。また、コマンドを書くつもりの人々のために、私たちは素晴らしく改善された Ubiquity コマンドエディタを用意しました。」アドオンの変更の完全な一覧は、Wiki のリリースノートを参照してください。

+ +

Window Snyder への Mozilla のセキュリティメトリックに関するインタビュー

+ +

Gen kanai が次のような記事を投稿しています。「CNet の Robert Vamosi が Mozilla のセキュリティ最高責任者である Window Snyder に Mozilla でのセキュリティメトリックについてとどのように私たちがオープンソースプロジェクトプラットフォームにおけるセキュリティをより良く理解しようとしているかについてインタビューしています。Mozilla での、セキュリティプラクティスについて暴露しています。」それは Window がセキュリティ測定の難しさ、私たちが Mozilla で用いているメトリック、そして、なぜそしてどのように長い時間をかけてセキュリティを測定するのかということに関する疑問について説明している興味深いインタビューです。CNet news ウェブサイトで元記事を読みそれに付属したビデオを見ることができます。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081104/index.html b/files/ja/orphaned/devnews/20081104/index.html new file mode 100644 index 0000000000..b30e1574a1 --- /dev/null +++ b/files/ja/orphaned/devnews/20081104/index.html @@ -0,0 +1,42 @@ +--- +title: >- + about:mozilla: Firefox が 20% マーケットシェアを達成、Fennec 向けアドオン、Firefox 3.1 + でのプライベートブラウジングなどなど… +slug: DevNews/20081104 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox が 20% 世界規模マーケットシェアを達成

+ +

世界中の Web サイトでブラウザ使用率を調査しているサービス、Net Applications によると、Firefox の世界規模でのマーケットシェアが 10 月中に初めて 20% を超えました。Firefox の使用率は国によってごくわずかに変化します。例えば、ヨーロッパでの使用率を調査している、Xiti Monitor は最近のレポートで、 Firefox がヨーロッパ大陸で 30% のマーケットシェアを持っていると指摘しています。しかし、Net Applications レポートでは Firefox が世界中で 20% 以上の利用率を示すのは初めてです。さらなる情報は、Mozilla Metrics ブログを参照してください。

+ +

Fennec 向けアドオン

+ +

Firefox モバイルブラウザのコードネームである Fennec 向けの最初のアドオンが登場しました。Chris Finke は自身の URL Fixer アドオンに Fennec との互換性を追加しました。Madhava Enros が彼のウェブログの投稿に Fennec で実行されているアドオンのスクリーンショットを掲載しています。

+ +

また、Mark Finkle も add-ons.mozilla.org が Fennec のサポートを追加したと書いています。このことは Fennec の内部からアドオンを検索できるようになり、アドオン作者がアドオンをアップロードまたはアップデートするときに Fennec との互換性を含めることができるようになったことを意味します。

+ +

Firefox 3.1 でのプライベートブラウジング

+ +

Ehsan Akhgari が Firefox 3.1 の新機能の一つであるプライベートブラウジングを紹介する投稿を書きました。プライベートブラウジングは Web のブラウズ中に Firefox が履歴と Cookie 情報を保存することを OFF にすることを可能にします。この機能は Firefox 3.1 Beta 2 に初めて含まれる予定です。さらなる情報と機能のスクリーンショットは彼の投稿を参照してください。

+ +

Mozilla Camp Europe 2008

+ +

10 月 25 日と 26 日に、約 150 人の Mozilla 貢献者がスペインのバルセロナに集まりました。Firefox からローカライゼーション、アドオン、コミュニティ開発、そして多くのその他の話題まであらゆることを話すために人々がヨーロッパ中とアメリカからやって来ました。Jane Finette、Tristan Nitot そして Brian King がイベントについて投稿しています。また、Mozilla Foundation の新しい Executive Director である Mark Surman もこのイベントでの Mozilla の 2010 年までの目標についてのディスカッションについての話題を投稿しています。

+ +

コンセプトシリーズ の Design Jams

+ +

Mozilla Labs のコンセプトシリーズはミシガン大学で続けられています。Human Computer Interaction 専攻の生徒がよりタブ、履歴、自動化と Web アプリケーションを含む、より良いブラウザを作成することに関するブレインストーミングを行っています。出されたアイデアへのリンクが Mozilla Labs ウェブログでの投稿にあります。

+ +

Firefox が ISDA に認められる

+ +

Nicole Loux は Above the Fold ウェブログで次のように書いています。「Mike Beltzner と Firefox 2 チームは 2008 ISDA International Design Excellence Awards の Interactive Product Experiences カテゴリで最終選考に選ばれたことを発表しました。ISDA はデザインの質と前向きな印象を推進する、工業デザイン業者の代弁者です。」Mike と Firefox チームのみなさんおめでとうございます。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081111/index.html b/files/ja/orphaned/devnews/20081111/index.html new file mode 100644 index 0000000000..a05d7670d3 --- /dev/null +++ b/files/ja/orphaned/devnews/20081111/index.html @@ -0,0 +1,40 @@ +--- +title: >- + about:mozilla: Firefox 4 周年、Impact Mozilla 最終選考発表、東京での Developers Conference + などなど… +slug: DevNews/20081111 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 4 周年

+ +

2004 年 11 月 9 日、Firefox 1.0 がリリースされました。それからの 4 年間、Firefox は Web の変化の触媒となってきました。Tristan は次のように書いています。「ちょうど 4 年間で、ブラウザ空間においての物事が非常に大きく変わりました。例えば、より多くの革新が起こり、参加者が増えました。全体的には、Web は以前より非常により良い形になり、前途は非常により明るくなりました。2003 年頃、誰もが Web サイトを、その時はメンテナンスされていないブラウザであった、Internet Explorer だけを対象に作っていたことを思い出してください。それからどれだけのことが変わったでしょうか！スペイン、フランス、ドイツ、そして、ポーランドのようなところでは、Firefox はインターネットユーザの 30 から 40% によって使われています。」Mozilla Blog にも投稿があり、Mozilla Links にも同様に素晴らしい記事があります。

+ +

Impact Mozilla 最終選考発表

+ +

Firefox ユーザの継続率を改善するためのオープンマーケティングチャレンジである、Impact Mozilla は 世界中から 300 以上の応募を受け取りました。これらの応募の中から、10 の最終選考者が 12 月の最終投票のために選ばれました。さらなる情報は Impact Mozilla ブログの投稿を参照してください。

+ +

フィードバックの呼びかけ：アドオン開発者と Firefox 3.1

+ +

Paul Rouget が Firefox 3.1 に移行しようとしているアドオン開発者に出会った問題を報告してもらうための呼びかけを公開しました。彼はアドオンの移植に問題がある開発者にブログ投稿にコメントしてもらうように頼んでいます。また、バグを立てるつもりの人々のために、dev.apps.firefox の投稿で Paul が開発者へバグに特定のキーワードをつけるように頼んでいます。さらなる情報は、アドオンブログでの彼の投稿とニュースグループでの彼の投稿を参照してください。

+ +

あなたのアドオンをプライベートブラウジングに対応させてください

+ +

Ehsan Akhgari がFirefox 3.1 の新しいプライベートブラウジング機能を取り込みたいアドオン開発者のために素晴らしい技術記事を書きました。彼はブラウジングモードの変更を探知するための API とプライベートブラウジングモードがテーマ作者にどのような影響を与えるかについての両方をカバーしています。さらなる情報は彼のウェブログの投稿を参照してください。

+ +

今週末: 東京での Mozilla Developers Conference

+ +

2008 年 16 日日曜日に、Firefox Developer’s Conference 2008 が日本の東京で行われます。スピーカーは Mozilla Labs から Aza Raskin、Mozilla の Moveile VP である Jay Sullivan などです。ディスカッションはモバイルから最新の Web 標準、Mozilla Labs で予定されていることまでに渡る予定です。さらなる情報は Spread Firefox の投稿か Mozilla Labs ウェブログの投稿を参照してください。

+ +

今週末：サンフランシスコの Green Festival に Mozilla が参加

+ +

今週末（11 月 14-16 日）にサンフランシスコにいるなら、Mozilla が Green Festival に参加しています。Green Festival はアメリカで最大のグリーン会議です。Mozilla の仲間がそこで私たちのミッションとグローバルコミュニティについて話し、また、グリーンコンピューティング問題に興味がある似たグループと一緒に取り組む予定です。さらなる情報は Mozilla Blog の投稿を参照してください。

+ +

開発カレンダー

+ +

来 る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

も し、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081118/index.html b/files/ja/orphaned/devnews/20081118/index.html new file mode 100644 index 0000000000..77f873843c --- /dev/null +++ b/files/ja/orphaned/devnews/20081118/index.html @@ -0,0 +1,70 @@ +--- +title: 'about:mozilla: Fashion Your Firefox、Firefox 中国版、about:labs などなど…' +slug: DevNews/20081118 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Fashion Your Firefox

+ +

数千のアドオンが Firefox には用意されていますが、ときどき目的のものを見つけるのに苦労することがあります。今日、Mozilla は Web の使い方に基づいたアドオンの集まりを選ぶことができる Fashion Your Firefox を発表しました。カテゴリには Shutterbug（アマチュアカメラマン）、News Junkie（ニュースマニア）、Social Butterfly（SNS 好き）などがあります。Official Mozilla Blog の Fashion Your Firefox の投稿、FAQ、もしくは David Rolnitzky のブログ投稿を参照してください。

+ +

Firefox 中国版がリリースされました

+ +

今 日、Mozilla は Firefox 中国版が利用可能になったことを発表する予定です。Li Gong は次のように書いています。「今日、私たちは Firefox 中国版をリリースしました。これは g-fox.cn と他の人気ダウンロードサイトでダウンロードできます。大変成功した Firefox 3 に基づいて、中国版は中国でのインターネットユーザにあらゆる恩恵を提供する大変充実したバージョンです。」Mike Beltzner は中国において人々がインターネットをどのように使うか、そして、中国版がどのように中国でのユーザのためにローカライズされた環境を作り上げようとしたかについての彼の意見のいくつかを書いた素晴らしいエントリを投稿しています。g-fox.cn から中国版をダウンロードできます。

+ +

about:labs - Mozilla Labs についての新しい週刊ニュースレター

+ +

Mozilla Labs チームは Mozilla Labs で起こっているエキサイティングなことを伝えるための週刊ニュースレターを始めました。about:labs の第 1 号は Weave、Ubiquity、Snowl、そして、Concepts of the Week を取り上げています。Mozilla Labs Blog ですぐに購読することができます。将来は about:mozilla のように E メール形式でニュースレターを購読できるようになる予定です。

+ +

Bugzilla が NASA で導入されました

+ +

CNet が問題を追いかけ、より効果的にコミュニケーションするために NASA 内部で使われているツールについて報道しています（Firefox Hacks 翻訳日記による私的な日本語訳）。Problem Reporting Analysis and Corrective Action (PRACA) システムは Bugzilla と呼ばれる Mozilla 自身のオープンソースバグトラッキングシステムがベースになっています。記事では次のように伝えています。「Ames Human-Computer Interaction Group のリーダーである、Alonso Vera によると、単一の、どこからでもアクセス可能な PRACA パッケージはシャトルのエコシステムの多くの異なる部局で過去 30 年 以上使われてきた 40 以上の異なるデータベースシステムを置き換えることになります。」mozillalinks.org の記事（日本語版）と Max Kanat-Alexander による投稿でこのことについてもっと読むことができます。

+ +

Firefox 3.0.4 と Firefox 2.0.0.18 がリリースされました

+ +

Mozilla は 既存製品の継続的サポートの一環として Firefox 3.0.4 と Firefox 2.0.0.18 をリリースしました。これらの更新には安定性とセキュリティの修正が含まれており、すべてのユーザにブラウザのこれらのバージョンに更新することを推奨します。さらなる詳細は Mozilla Blog の投稿を参照してください。

+ +

Spread Thunderbird

+ +

Mozilla Messaging は Thunderbird を愛する人々が集まり、宣伝に取り組むためのサイトである Spread Thunderbird を立ち上げました。さらなる情報は Mozilla Blog の Mary による発表を参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

+ +

Fashion Your Firefox

+ +

数千のアドオンが Firefox には用意されていますが、ときどき目的のものを見つけるのに苦労することがあります。今日、Mozilla は Web の使い方に基づいたアドオンの集まりを選ぶことができる Fashion Your Firefox を発表しました。カテゴリには Shutterbug（アマチュアカメラマン）、News Junkie（ニュースマニア）、Social Butterfly（SNS 好き）などがあります。Official Mozilla Blog の Fashion Your Firefox の投稿、FAQ、もしくは David Rolnitzky のブログ投稿を参照してください。

+ +

Firefox 中国版がリリースされました

+ +

今 日、Mozilla は Firefox 中国版が利用可能になったことを発表する予定です。Li Gong は次のように書いています。「今日、私たちは Firefox 中国版をリリースしました。これは g-fox.cn と他の人気ダウンロードサイトでダウンロードできます。大変成功した Firefox 3 に基づいて、中国版は中国でのインターネットユーザにあらゆる恩恵を提供する大変充実したバージョンです。」Mike Beltzner は中国において人々がインターネットをどのように使うか、そして、中国版がどのように中国でのユーザのためにローカライズされた環境を作り上げようとしたかについての彼の意見のいくつかを書いた素晴らしいエントリを投稿しています。g-fox.cn から中国版をダウンロードできます。

+ +

about:labs - Mozilla Labs についての新しい週刊ニュースレター

+ +

Mozilla Labs チームは Mozilla Labs で起こっているエキサイティングなことを伝えるための週刊ニュースレターを始めました。about:labs の第 1 号は Weave、Ubiquity、Snowl、そして、Concepts of the Week を取り上げています。Mozilla Labs Blog ですぐに購読することができます。将来は about:mozilla のように E メール形式でニュースレターを購読できるようになる予定です。

+ +

Bugzilla が NASA で導入されました

+ +

CNet が問題を追いかけ、より効果的にコミュニケーションするために NASA 内部で使われているツールについて報道しています（Firefox Hacks 翻訳日記による私的な日本語訳）。Problem Reporting Analysis and Corrective Action (PRACA) システムは Bugzilla と呼ばれる Mozilla 自身のオープンソースバグトラッキングシステムがベースになっています。記事では次のように伝えています。「Ames Human-Computer Interaction Group のリーダーである、Alonso Vera によると、単一の、どこからでもアクセス可能な PRACA パッケージはシャトルのエコシステムの多くの異なる部局で過去 30 年 以上使われてきた 40 以上の異なるデータベースシステムを置き換えることになります。」mozillalinks.org の記事（日本語版）と Max Kanat-Alexander による投稿でこのことについてもっと読むことができます。

+ +

Firefox 3.0.4 と Firefox 2.0.0.18 がリリースされました

+ +

Mozilla は 既存製品の継続的サポートの一環として Firefox 3.0.4 と Firefox 2.0.0.18 をリリースしました。これらの更新には安定性とセキュリティの修正が含まれており、すべてのユーザにブラウザのこれらのバージョンに更新することを推奨します。さらなる詳細は Mozilla Blog の投稿を参照してください。

+ +

Spread Thunderbird

+ +

Mozilla Messaging は Thunderbird を愛する人々が集まり、宣伝に取り組むためのサイトである Spread Thunderbird を立ち上げました。さらなる情報は Mozilla Blog の Mary による発表を参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081125/index.html b/files/ja/orphaned/devnews/20081125/index.html new file mode 100644 index 0000000000..1a346cbdf1 --- /dev/null +++ b/files/ja/orphaned/devnews/20081125/index.html @@ -0,0 +1,50 @@ +--- +title: 'about:mozilla - 会計報告、ロゴ、アドオン、Foundation レポート、2010 年までの目標、などなど…' +slug: DevNews/20081125 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla 会計報告: 不確かな時代における持続可能性

+ +

Mozilla は最近 2007 年の監査済財務諸表 を、これらの諸表について聞かれる最も一般的な質問をカバーする FAQ とともに公開しました。Mitchell Baker も Mozilla の会計報告についてブログに書き、2007 年も会計的および組織的に健全な年であり、Mozilla は現在の難しい経済情勢の間も重要性と有効性を維持するために良い位置にいることを指摘しています。さらなる情報は、Mitcell のウェブログを参照してください。

+ +

新しい Firefox 3.1 ロゴ

+ +

真新しい Firefox 3.1 のロゴが Mozilla Marketing チームによって用意されました。John Slater が次のように書いています。「出来たての、公式 Firefox 3.1 ロゴを利用および楽しめるようになりました。私の希望は別のバージョンが幅広く周りに広がることを避けて 3.1 関連のコミュニケーションのすべてにおいてこれらを利用し始めることができるようにすることです。」ホットなうちにゲットしてください。

+ +

10 億のアドオンがダウンロードされました

+ +

先週の初めに、Mozilla Add-ons コミュニティは重要なマイルストーンに達しました。Mozilla Add-ons ウェブサイトを通して 10 億のアドオンが提供されたのです。「この素晴らしい出来事はアドオンユーザ、開発者、および、熱心な人たち、同様に、ほんの数例ですが、Thunderbird、SeaMonkey、Sunbird、Komodo、Flock、そして Songbird のような Mozilla アドオンを包含する Firefox 以外のアプリケーションの巨大なコミュニティによって可能になったものです。」さらなる情報は Mozilla Add-ons Blog を参照してください。

+ +

Fashion your Firefox デビュー

+ +

先週、Mozilla は、あなたの興味とオンラインの活動に基づいて Firefox ブラウザをカスタマイズするシンプルな Web アプリケーションである、Fashion Your Firefox を立ち上げました。Fashion Your Firefox は活動に基づいたカテゴリにおけるアドオンを簡単に見つけてインストールする機能を提供します。カテゴリには次のものが含まれています。Shutterbug (アマチュアカメラマン)、Rock Star (ロックスター)、News Junkie (ニュースマニア)、Shopaholic (買い物依存症)、Digital Pack Rat (情報収集家)、Social Butterfly (SNS 好き)、などなど。さらなる情報は Mozilla Blog にあります。

+ +

Mozilla Foundation: 11 月の役員会レポート

+ +

Mozilla Foundation の Executive Director に最近任命された Mark Surman が彼のウェブログに 11 月の Mozilla Foundation Board Report（役員会レポート）を投稿しています。「先月は物事を進めることに焦点を当てました。プログラミングの実験の定義。チームの構成。Mozilla の幅広いかつ Foudation 特有の計画。MozDev、MoCo、MoMo、そして、特に、Mozilla Europe という Mozilla ファミリーとの架け橋を造ることについても。膨大な量の今月の Mark の時間がお決まりのチャリティー団体報告に投入されました。みなさん、良い月を。」さらなる詳細を知るために、完全なレポートは Mark のウェブログで読めます。

+ +

Mozilla の 2010 年までの目標、ビデオインタビュー

+ +

Tristan Nitot は Mitcell Baker との短いビデオインタビューを投稿しました。彼らはそのビデオで、進行中の 2010 年までの目標プロジェクトについて議論してます。「目標について重要なことは Mozilla コミュニティを参加する気にすることと組織として私たちがしていることをすべて誇りに思い、それらに参加したいと思うことです。」Mozilla の 2010 年の目標を設定することに関連する議論に参加することを強くおすすすめします。Tristan が彼のブログの投稿の最後にその方法についての概要を書いています。

+ +

Brendan Eich がインタビューされました

+ +

数週間前、Brendan Eich が C10 Sessions と呼ばれる CNET のシリーズでインタビューされました。最近、そのビデオがそれらのサイトに投稿されました。Brandan と CNET の Dan Farber が Mozilla、Firefox、そして、Web の将来について素晴らしい議論をしています。CNET Web サイトでビデオが見られます。

+ +

Firefox に関する調査の結果

+ +

9 月に Mozilla Marketing チームが試験的な「Firefox in your country」調査を行い、9506 の回答を得ました。調査はブラジル、インド、ドイツ、インドネシア、ポーランド、スペイン、そして、オーストラリアという 7 つの国を対象としましたが、世界中から回答が集まりました。熱心な回答が寄せられたため、質問を修正し新しい国々を対象としたもうひとつの調査を 12 月に行う予定です。調査のローカライズ、もしくは、あなたの国にこの調査を宣伝することに協力したいと思っているなら、Alix Franquet が協力者を探しています。さらなる情報は、Alix のウェブログを参照してください。

+ +

予定されている Mozilla Europe コミュニティのイベント

+ +

Mozilla Europe の一員である、William Quiviger が数ヶ月後にヨーロッパで行われる予定の Mozilla コミュニティ関連イベントの一覧を投稿しました。一覧化されたイベントが行われる範囲は 11 月から来年の 3 月まで、行われる場所はパリ、ブカレスト、マドリード、ブリュッセル、そして、ベルリンとなっています。完全な一覧と詳細に関するすべては William のウェブログを参照してください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081202/index.html b/files/ja/orphaned/devnews/20081202/index.html new file mode 100644 index 0000000000..4f979da33f --- /dev/null +++ b/files/ja/orphaned/devnews/20081202/index.html @@ -0,0 +1,52 @@ +--- +title: >- + about:mozilla - Add-on-Con、ツリーの構造、アドオンの更新、Mozilla + Manifesto、Bugzilla、Firefox、Thunderbird、などなど… +slug: DevNews/20081202 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Add-on-Con: 12/11、カリフォルニア州、マウンテンビュー

+ +

Mozilla は 12 月 11 日にマウンテンビューの Computer History Museum で行われる予定の Add-on-Con に参加する予定です。「Google、Microsoft、そして Mozilla がブラウザプラットフォームの将来について議論するために一堂に会する予定です。産業のリーダーからブラウザアドオンの技術とビジネスについて学んでください。あなたの同業者と情報を交換してください。」Mozilla の Engineering 部門 VP である Mike Shaver に総括講演の任が与えられており、また、Mark Finkle もカンファレンスでプレゼンテーションを行う予定です。さらなる情報は Add-on-Con ウェブサイトをチェックしてください。

+ +

Firefox: ツリーの構造、移行、チェックイン規則

+ +

最近 Mike Beltzner が開発活動の場所が mozilla-central から mozilla-1.9.1 レポジトリに移行した Firefox 3.1 / Gecko 1.9.1 コードレポジトリの変更について投稿しました。ツリーが再び開かれた後、Tree status Wiki ページでレビュー可能になっている新しいチェックイン規則が登場しました。関連する Bugzilla と Tinderbox の変更を含む、さらなる情報は Mozilla Developer News サイトの Beltzner のブログ投稿にあります。

+ +

Add-ons: Firefox 3.1 Beta 2 に対応し始める時期です

+ +

Paul Roguet が次のように書いています。「Firefox 3.1 Beta 2 が 12 月の最初の週にリリースされる予定になっています。Beta 2 以降は、アドオンの動作を阻害するようなインタフェースの変更は行わないことを約束します。ですから、今こそ、対応を始めるときです。」また、Firefox チームもスケジュールに 3 番目のベータを追加し、そこで活発に Firefox をユーザに勧め始める予定です。このことは多くのアドオンが Beta 3 の前に Firefox 3.1 に対応することが非常に重要であることを意味します。そうすることで多くのユーザが更新可能になるだろうからです。ドキュメンテーションへのリンクを含むさらなる情報は、Mozilla Add-ons ウェブログの Paul の投稿全文を参照してください。

+ +

Mozilla Manifesto が 12 を越える言語で閲覧可能になりました。

+ +

Mozilla Manifesto が 12 を越える異なる言語で閲覧可能になりました。最近、Mozilla.org のサイトがすでに存在していたテキストの様々な翻訳へのリンクを提供するために更新され、ローカライゼーションコミュニティがとても活発に追加すべき新しいバージョンを提供しています。現在、Manifesto は中国語（簡体字）、中国語（繁体字）、オランダ語、英語、フランス語、フリジア語、ガリーシア語、ギリシャ語、イタリア語、韓国語、ポーランド語、ブラジル・ポルトガル語、ルーマニア語、および、ベトナム語で読めます。このことに協力するために手間暇をかけてくれたみなさんに感謝します。

+ +

11 月の Firefox マーケットシェア

+ +

Asa Dotzler は Firefox が 11 月のグローバルマーケットで 20.72% を記録したことを示している NetApplications の月間ブラウザマーケットシェアレポートについて投稿しました。「これは 10 月から非常に堅実に飛躍しています。しかし、また、前年の第三四半期に見られた Firefox の成長とも非常に一致しています。」さらなる情報といくつかの素晴らしいグラフを Asa のブログ投稿でチェックしてください。

+ +

Bugzilla 3.2 がリリースされました

+ +

約 1 年半の開発期間を経て、Bugzilla 3.2 がリリースされました（Mozilla Japan ブログの記事）。この新しいリリースでは多くの数の変更がある一方、“4.0" とは呼ばれないメジャーリリースです。その理由は最新の Bugzilla Status Update（himorin's blog の日本語によるアナウンス）で説明されています。このリリースについてのさらなる情報とそこに至るまでのすべてについては Max Kanat-Alexander のウェブログ投稿を参照してください（日本語版については himorin's blogの記事を参照してください）。

+ +

Performance dashboard (v2)

+ +

約 1 年前、Johnathan Nightingale が Firefox のパフォーマンス分析を一目で見るためのダッシュボードを作りました。これは退行バグを見つけ、ツリーの状態を評価することをより簡単にするものです。彼はそのダッシュボードの新しいバージョンをリリースしました。「今はまだ初期の段階です。1.9.1/Firefox 3 branch のデータだけを引っ張り、2、3 個のテストだけを引っ張っていますが。これらは簡単に追加できます。」機能を追加することに興味があるなら、Johnathan は公開 hg レポジトリを通してコードを参照可能にしています。さらなる詳細は Johnathan のブログ投稿にあります。

+ +

Thunderbird Beta 1 は 38 言語で

+ +

Simon Paquet が次のように書いています。「3 週間ほど前、私が Beta 1 のための String フリーズの計画を告知したとき、このリリースでサポートされるロケールの数を 30 もしくは（私の最も楽観的な考えで）35 ロケールまで増やしたいと望んでいると言いました。それで、現在のところ 38 ロケール（en-US を含む）が Thunderbird 3 Beta 1 で選択可能であり、つまりは全体として私の期待を越えました。これは注目すべきことです。なぜなら、すでに Beta 1 で Thunderbird 2 最終リリースと比べて 1 ロケール足りないだけなのですから。l10n コミュニティのみなさんに大変感謝します。あなたたちは最高です！」

+ +

Mitchell Baker が Investors Business Daily で紹介されました

+ +

Investor’s Business Daily が Mozilla の Mitchell Baker についての興味深い紹介を書きました。「Baker は インターネットのパイオニアの Netscape Communications の一部門である、Mozilla Organization を新しく設立することを任されました。2001 年の技術崩壊の真っ直中、Baker はクビのなってもなお去ることを拒みました。『重役たちは 1 週間後に打ち負かされました。そのとき彼らは彼女がいまだにプロジェクトで働き続け、電話をかけ続けていることを知ったのです。』Mozilla の 最高技術責任者である Brendan Eich は言っています。『彼女はそうすることができました。なぜなら Mozilla はコミュニティプロジェクトになっていたからです。もはや Netscape に支配されたものではなかったのです。』Mitchell は Mozilla Project で常に重要な役割を演じていました。そして、IBD の紹介は彼女のこだわり、ビジョン、そして、熱心さが長年の間どのように尊敬に値するものであったかを説明しています。プロジェクトの歴史のいくつかに興味があるならば特に、素晴らしく読む価値があります。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

も し、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081209/index.html b/files/ja/orphaned/devnews/20081209/index.html new file mode 100644 index 0000000000..057fc4d853 --- /dev/null +++ b/files/ja/orphaned/devnews/20081209/index.html @@ -0,0 +1,58 @@ +--- +title: >- + about:mozilla - Beta 2、Community + Store、メジャーアップデート、マルウェアについての情報、目標、ミッション、会計報告、マーケットシェア、賞、などなど… +slug: DevNews/20081209 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3.1 Beta 2 がダウンロード可能になりました

+ +

Firefox 3.1 Beta 2 がダウンロード可能になりました。このマイルストーンは Firefox 3.1 に向けて計画されているプラットフォームへの多くの新機能と変更によってもたらされたコア機能のテストに焦点を当てています。Firefox 3.1 に向けた計画の進行状況は Planning Center と mozilla.dev.planning、そして、irc.mozilla.org 上の #shiretoko で追うことができます。Beta 2 は 54 の言語で利用可能であり、新しい機能であるプライベートブラウジングモードが搭載されています。また、他にも多くの変更と追加を含んでいます。このベータ版をダウンロードする方法を含むさらなる情報は、Mozilla Developer News ウェブログの Firefox 3.1 Beta 2 アナウンスメントを参照してください。

+ +

Mozilla Community Store がオープンしました!

+ +

莫大な尽力をかけて、Mozilla マーケティングチームは素晴らしい新しい Mozilla Community Store をオープンさせました。このストアは誰でもオリジナル T シャツデザインを投稿でき、それらを一般の人々が購入できるようにするという Mozilla の T シャツ作成プロセスのための新しいコミュニティソースアプローチを取っています。

+ +

「Store ギャラリーは完全に世界中のコミュニティが作成した作品から成っています。それらのすべては Zazzle を通して完全にカスタマイズ可能です。そのプロセスは非常に簡単で選べる多くのオプションがあります。」Mozilla Community Store は 多数の素晴らしく高いクオリティのデザインとそれらをさらにプリント可能にするべきという要求をもたらした Firefox 3 T シャツデザインコンテストに感化されています。Community Store の収益のすべては Mozilla Foundation に寄付され、また、12 月 25 日までのオープン特別 20 % 割引もあります。

+ +

さらなる情報は、オリジナルのオープン告知をチェックしてください。また、Thunderbird および Calendar チームが彼らのプロジェクトのための Community Store T シャツデザインに貢献してくれる人々を探しています。もしあなたが芸術肌の人ならば、これは Mozilla コミュニティに飛び込んで参加する素晴らしい方法です！

+ +

Firefox 2.0.0.18 ユーザに対してメジャーアップデートが提供されています

+ +

Firefox 2 ユーザが簡単に自分のブラウザを Firefox 3 にアップグレードできる「メジャアップデート」を提供してから 4 ヶ月経ちました。この期間に Firefox 3 はさらに改善され、主要なアドオンも新しいブラウザで動くように更新されました。Firefox 2 は早々に Mozilla がセキュリティと安定性の更新を活発に提供することがなくなる日を迎えてしまいますので、私たちは強くユーザが Firefox 3 にアップグレードすることを推奨します。このメジャーアップデートについてのさらなる情報は Mike Beltzner のオリジナルの告知とブログ投稿を参照してください。

+ +

Mark Surman: One Mozilla

+ +

Mark Surman が Mozilla の 2010 年までの目標を決めるプロセスに勤勉に取り組んでいて、考えを改善することを助けたり、議論を促進したり、一般的にプロセスをできるだけオープンに透明にしようとしています。この一部として、最近、彼は、多くの構成部分から作り上げられる「1 つの Mozilla」だけがあるということについて取り上げた思慮深く、考えが刺激される記事を投稿しました。

+ +

「本当にたった 1 つの Mozilla だけがあります。そう、私たちは多くの異なる組織、チーム、コミュニティを持っていて、Foundation チームもその 1 つです。しかし、私の考えでは、私たちはみんな Mozilla であり、同じ包括的な目標に向かって取り組むべきです。」Mark の投稿は、特に、あなたが Mozilla プロジェクト、その目的、その将来についての高いレベルでの議論について興味があるなら、本当に読む価値のあるものです。

+ +

Firefox のマルウェア?

+ +

Mozilla のセキュリティチームメンバーの一人である Johnathan Nightingale が最近ニュースで報道されたいわゆる「Firefox のマルウェア」について取り上げた記事を投稿しました。「胸くそ悪いことが先週起こりました。誰かが Firefox に感染するマルウェアを作ったのです。私たちはもちろんまったく非常にそれを好いていませんが、いくつかの混乱が生じているので、私は何が起こり、何が起こっていないのかを明らかにしておきたいと思います。」Johnathan はそのマルウェアは何なのか、それは何をするのか、感染している場合に見つける方法、そして、簡単にそれを無効にする方法を説明しています。また、彼はどのようにそしてなぜこのマルウェア攻撃が Firefox がセキュアでないことを意味しないのかも説明しています。さらなる情報と Johnathan の投稿全文は、彼のウェブログを参照してください。

+ +

Mozilla のミッションと会計報告

+ +

Chris Blizzard が Mitchell Baker が最近投稿した Mozilla の 2007 年の会計報告申告に関する議論を構成することを助ける素晴らしい投稿を書きました。「あなたが活動の最も激しいところ、例えば、出荷、フィードバック、プログラムの作成、実行、そして、毎日人々に話かけることなどにいるなら、ときどき 1 歩引いて、この数年間何が起こってきて、Mozilla がプロジェクトとしてどれだけ成長してきたのかについて真剣に考えることは難しいことです。Mitchell の投稿はプロジェクトがとても健全であることを思い出させてくれるものです。」Chris の投稿全文は彼のウェブログにあります。

+ +

Ubiquity 0.1.3 プレビュー版が利用可能に

+ +

新しい Mozilla Labs の Ubiquity アドオンのプレビューリリースが利用可能になりました。「現在、私たちは Ubiquity の応答性を改善し、スキンのサポートを追加したリリースである、Ubiquity 0.1.3 に取り組んでいます。このための準備として、私は最初の Ubiquity 0.1.3 Release Candidate をリリースしました。気軽にダウンロードしてください。新しいリリース候補版、および、最後の 0.1.3 リリースにはそれが用意されしだい自動的にアップグレードされます。バグはバグデータベースやメーリングリストに報告可能であり、私たちはそれを歓迎します。」このリリース候補版についてのさらなる情報は、Atul Varma のオリジナルの告知を参照してください。Ubiquity についてのさらなる情報は、輝くほど新しくなった Ubiquity ウェブサイトをチェックしてください。

+ +

Firefox がより多くの地域で 50% マーケットシェアを上回る

+ +

Firefox が 20% の世界規模マーケットシェアを達成したという興奮するニュースに加えて、Firefox が 50% のマーケットシェアを 2 つの新たな地域、スロベニアとマケドニアで達成したというニュースが飛び込んできました。Ken Kovash は次のように書いています。「とてつもない量の功績が Mozilla コミュニティにもたらされました。John Lilly はこれを最も素晴らしい形で要約しています。『開かれた Web は今までよりも活気があり、世界中の数千人の Mozilla への貢献者たちがそのようなことを実現するために主要な役割を果たしています。」』Blog of Metrics で Ken の投稿全文を読んでください。

+ +

Firefox がブラジルでソフトウェアの賞を受賞

+ +

Alix Franquet が次のように書いています。「Firefox が Info Magazine によって 2008 年のベストソフトウェアおよびベストブラウザに選ばれました。今年のノミネートおよび賞の完全な一覧は Info ウェブサイトを参照してください。Mozilla は Bruno Magrani、Mario Rinaldi そして、Clauber Stipkovic が代表として賞を受け取りました。」授賞式の写真が閲覧可能で、また、新しい Mozilla Brazil ウェブログで他の Mozilla Brazil のニュースを追うことができます。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081216/index.html b/files/ja/orphaned/devnews/20081216/index.html new file mode 100644 index 0000000000..342c55a525 --- /dev/null +++ b/files/ja/orphaned/devnews/20081216/index.html @@ -0,0 +1,64 @@ +--- +title: >- + about:mozilla - 2010 年までの目標、Thunderbird 3、Labs ミートアップ、アドオンの更新、Foundation + レポート、Impact Mozilla、などなど… +slug: DevNews/20081216 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

 

+ +

Thunderbird 3 Beta 1 がダウンロード可能になりました!

+ +

Thunderbird 3 Beta 1 がダウンロード可能になりました。このマイルストーンは Thunderbird 3 に実装される予定である新機能とプラットフォームに関する変更のコア機能のテストに焦点を当てています。Thunderbird 3 Beta 1 にはメールを探す新しい方法を素早く構築することを可能にする新しいデータベース技術 が実装されています。さらなる背景と実験的アドオンのプレビューは David Ascher のブログ投稿「Thunderbird 3 beta 1 - a platform for innovation shapes up」を参照してください。

+ +

このマイルストーンにはフィードバックを必要とする次の新機能と変更が含まれています。：メールのためのタブインターフェース、より速くメッセージを閲覧するための IMAP に対する改善、改善されたメッセージビュー、新しいアドオンマネージャ、改善されたアドレスブックインターフェース、改善された他のメールクライアントか らのメールのインポート、Windows Vista サーチとの統合、そして、Mac OS X アドレスブックとの統合。

+ +

ダウンロードする前に、リリースノートを読んで、既知の問題を含むこのリリースについてのさらなる情報を得てください。テスターは 38 の異なる言語で Windows、Mac OS X、Linux 向けの Thunderbird 3 Beta 1 ビルドをダウンロードすることが出来ます。さらなる情報は、リリース告知全文を参照してください。

+ +

今日：2010 年までの目標をテーマにしたブラウンバッグミーティング

+ +

Mitchell Baker は かなり長い間 Mozilla コミュニティ内で議論中である Mozilla の 2010 年までの目標の仕上げのプロセスの段階にいます。Mitchell は次のように書いています。「私は数日内に新しいバージョンに更新するために受け取ったフィードバックを整理してまとめるつもりです。私は最終フィードバックのためにブラウンバッグ [プレゼンテーションと議論] ミーティングを 12 月 16 日火曜日太平洋時間の 12:30 (GMT で午後 8:30) に行う予定です。私たちは Air Mozilla で議論をストリーミング配信し、議論を管理するチャットを #brownbag に用意します。私たちは多くの議論を行ってきましたからこのセッションに多くの興味はないかもしれません。かまいません。興味があるならそれもまた素晴らしいです。次のバージョンは、最終版それ自身でないとしても、非常に最終版に近いものになるでしょう。ですから、あなたがまだ表明したことがない考えを持っているなら、できるだけ早く表明してください。」提案されている目標の修正された草稿は、Mitchell の ウェブログに投稿されていて、「Firefox」の目標、「データ」の目標、「モバイル」の目標、そして、「中心」の目標が含まれています。

+ +

Mozilla Labs ミートアップ：今週の木曜日にマウンテンビューにて

+ +

Mozilla Labs チームが次のように書いています。「今月の月例ミートップの時期です。今月の Labs Night は 12 月 18 日木曜日午後 6 時に Mozilla オフィス（1981 Landings Drive, bldg K in Mountain View, California）で行います。

+ +

先月の Seedcamp チームとのミートアップは素晴らしく、出席したすべての方々にはとても感謝しています。今週 - 2008 年の最終ミートアップ！ - は様々な活動中の Labs プロジェクトの進捗更新情報を聞く予定です。その気があるなら、私たちはあなたの意見を聞きたいと思っています。いつものように、十分な議論とハッキングの機会があります。そしてもちろん、ピザも！

+ +

ベイアリーナにいるならぜひお会いしましょう！どれくらい期待されているかを知るために出席表明をしてください。感謝します！」

+ +

Firefox 3.1 Beta 2 向けにアドオンを更新する方法

+ +

Paul Rouget が Firefox Beta 2 向けにアドオンを更新する方法についての素晴らしい投稿を書きました。「多くのアドオンが Beta 2 で上手く動作するはずです。他のものは少しの調整を必要とするでしょう。もしあなたがテストし、あなたの拡張が Firefox 3.1 Beta 2 で動作すると確信したなら、コードを更新する必要はありません。ただ AMO ダッシュボードで互換バージョン (3.1b2) を更新するだけです。コードを更新しなければならないことがわかった場合は、それを行い、install.rdf ファイルを更新し（あなたの拡張のバージョンを上げ、maxVersion を 3.1b2 に更新）、xpi ファイルをアップロードしてください。アドオンの更新の方法が良くわかっていないなら、Paul が懇切丁寧な説明をブログ投稿全文の中で行っています。Mozilla Add-ons ブログでその内容をチェックしてください。

+ +

Mozilla Foundation: 12 月分役員会レポート

+ +

Mark Surman は Mozilla Foudation の12月分役員会レポートを彼のウェブログに投稿しました。「先月はいろいろなことを試し、計画立てとチーム構成の話題が続きました。教育に関するアイデ アはより具体的になってきています。『社会運動としての Mozilla』についての話し合いが続き、それには、コミュニティワークショップでの（中止された）試みと Mozilla Manifesto に関する新たなエネルギーも含まれていました。私たちは参加と開放性を持った政府を助けるほんの小さな努力に関わっています。教育に関する次の段階の考えがほんの少しだけより具体的になりました。最前線で、Michell が私たちの 990  と会計報告について投稿しています」。来月の優先事項の一覧を含めた詳細は、Mark のウェブログにあります。

+ +

ローカライゼーション：QA とテストに関する調査

+ +

Mozilla のローカライゼーションドライバチーム（通称:l10n-drivers）がローカライザーが製品リリースにつなげるテスト計画とテストローカライゼーションをどのように作成すれば良いか分析することを支援するための QA とテストに関する調査を始めました。あなたがローカライゼーションチームの一員であったり、何らかの形でローカライゼーションに貢献しているなら、この 「Mozilla L10n QA and Testing 調査」に回答してください。調査は 4 セクション で 20 の質問があり、およそ 10 分間で回答し終わるでしょう。可能な限り正確に注意深く答えてください。

+ +

Impact Mozilla: 投票してください！

+ +

Ken Kovash が次のように書いています。「Impact Mozilla コンペは最終局面に到達し、勝者を決めるのはあなたの番になりました。懸命な取り組みをして 1 ヶ月、10 人の最終選考者の全員が練られた戦略と完璧なマーケティング計画を持って戻ってきました。」10 のエントリーのすべてを判定するために、impactmozilla.com/vote に行き、十分な時間（約 1 時間）を取って複数の計画を読み注意深く最終選考者のすべてを吟味してください。最も投票されたエントリは Impact Mozilla コンペの勝者になるでしょう。全員に投票権がありますが、一人一票だけです。また、投票締め切りは 12 月 17 日水曜日です。Mozilla は勝者のアイデアを 2009 年の始めに実行する予定です。さらなる情報は、Ken のオリジナル投稿と Imapact Mozilla 最終選考者を紹介している継続中の一連の投稿（Part I、Part II、Part III、および Part IV 以降）を参照してください。

+ +

あなたの国の Firefox 調査：第 2 弾

+ +

先週 Mozilla マーケティングチームは新しい国の一覧と新しくかつ改善された質問を伴ったあなたの国の Firefox 調査の第 2 弾を始めました。調査は 12 月 26 日まで行われています。今回、チームは次の国々の人々からの回答を望んでいます。：アルゼンチン、ボリビア、チリ、チェコ共和国、フランス、ギリシャ、イスラエル、イタリア、メキシコ、ペルー、ルーマニア、スリランカ、スペイン、オランダ、そして、ベトナム。Firefox を使っているかどうかに関わらず、世界を他の人々に広げることに協力してください。調査へのリンクはすべて同じで、ページは自動的に適切な言語で調査を表示します。誤った言語を表示する場合、右上にあるプルダウンメニューから変更してください。さらなる情報は、Alix Franquet のウェブログ投稿にあります。

+ +

about:mozilla - 休暇中の休刊

+ +

わたしたちに休暇の時期 がやってきました。つまり、それは about:mozilla の毎年恒例の休暇中の休刊を意味します！12 月の最終週の間はニュースも不足するでしょうから、ニュースレターは 12 月 30 日は発行されないでしょう。同様に 1 月 6 日を休刊するかどうかは保留します。その時点で伝えるべきニュースがあるかどうかしだいです。

+ +

私たちは常にこのニュースレターについてのフィードバックを待っています。ですから、何かコメント、質問、改善方法についての考えがあれば、about-mozilla@mozilla.com まで送ってくることを大変歓迎します。お読みいただき、ありがとうございました。良い休日を。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20081223/index.html b/files/ja/orphaned/devnews/20081223/index.html new file mode 100644 index 0000000000..4ea10680c1 --- /dev/null +++ b/files/ja/orphaned/devnews/20081223/index.html @@ -0,0 +1,76 @@ +--- +title: >- + about:mozilla - Fennec、Firefox、Impact + Mozilla、Camino、Firebug、QMO、ビデオ、デザインコミュニティ、などなど… +slug: DevNews/20081223 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mobile Firefox (Fennec) Alpha 2 がリリースされました

+ +

Stuart Parmenter が次のように書いています。「私たちは Fennec の 2 番目のアルファリリースを告知できることをとてもうれしく思います。私たちは以前のアルファ版での大部分を私たちが望んだユーザエクスペリエンスを得ることに焦点を当てる一方、私たちはパフォーマンスの改善に焦点を当てることに時間を費やしてきました。私たちは起動パフォーマンス、パンニングおよびズーミングパフォーマンス、そしてページが読み込まれている間の反応を改善するという重要な前進を成し遂げました。私たちは多くの量のフロントエンドコードをリファクタリングした結果、十分に速度が改善し、拡張作者が拡張を作成するためのより良いベースを提供をすることができるようになりました。」

+ +

加えて、Fennec チームは Fennec Alpha 1 のときと同様、Windows、OS X、および Linux 向けにダウンロード（日本語版）できるモバイルブラウザのデスクトップバージョンをリリースしました。これらのビルドはコンテンツおよび拡張作者にデスクトップ上でモバイルブラウザ環境を提供します。ブラウザをインストールする方法、新着情報、既知の問題、およびフィードバックを提供する方法が含まれた Fennec Alpha 2 のリリースノートが参照可能です。さらなる情報は Stuart のオリジナル告知で見つけることが出来ます。

+ +

Firefox 3.0.5 と 2.0.0.20 が利用可能になりました

+ +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.5 と Firefox 2.0.0.20 が Windows、Mac、および Linux 向けに利用可能になりました。Mozilla は Firefox 2 向けのさらなるセキュリティおよび安定性アップデートを計画していません。ですから、できるだけ早く Firefox 3 にアップグレードすることを推奨します。加えて、フィッシング詐欺警告サービスは Firefox 2 ユーザはもう利用できません。Firefox 3 には新しく改善された フィッシング詐欺およびマルウェア警告サービスが提供されています。ですから、再度言いますが、Firefox 3 にアップグレードすることを強くお勧めします。GetFirefox.com から Firefox 3 をダウンロードすることができます。

+ +

「Fox For All」 が Impact Mozilla の勝者に

+ +

Mozilla は「Fox For All」が Impact Mozilla の大賞を勝ち取ったことを発表できることを誇りに思います。「Fox For All」はインドの Phani Kumar Vadrevu と Uttam Byragoni によって作られました。「私たちは 10 の最終選考者全員に大変感謝します。多くの懸命な取り組みと多様なアイデアが期待のすべてをはるかに越えるチームによって提供されました。Impact Mozilla は Mozilla コミュニティの伝統的な一員ではないグループ（例えば、MBA 学生）にまで範囲を広げることに成功しました。」Impact Mozilla の総括についてのさらなる情報は Mozilla Blog にあります。

+ +

Camino 1.6.6 がリリースされました

+ +

Camino ブラウザチームが様々なセキュリティおよび安定性アップデートを含むメンテナンスリリースである Camino 1.6.6 をリリースしました。Camino ユーザのすべてにアップデートすることを勧めます。加えて、Camino 1.6.6 は次の言語で利用可能です。：カタルーニャ語、チェコ語、オランダ語、英語（米）、フランス語、ドイツ語、イタリア語、日本語、ノルウェー語（ブークモー ル）、ポーランド語、ブラジル・ポルトガル語、ロシア語、スペイン語（カスティーリャ語）、およびスウェーデン語。Camino は CaminoBrowser.org でダウンロードできます。

+ +

Fireunit、Firebug 内でのテスト

+ +

Jan Odvarko と John Resig は新しい Fireunit と呼ばれる Firebug 拡張に懸命に取り組んでいます。Fireunit はテストを行い、その結果を Firebug の新しいタブの中に表示するためのシンプルな JavaScript API を提供します。Jan は次のように書いています。「この非常に期待できる拡張は Firefox 拡張自動テストフレームワークを意図しており、将来的には Web ページをテストすることにも役立つようになるはずです。まだ始まったばかりですが、Firebug 自身のテストには非常に役立ち始めています。」さらなる情報は、Jan のブログ投稿と John のブログ投稿で読むことができ、この拡張は Fireunit.org からダウンロードできます。

+ +

Firefox 3.1b2 以上での Firebug

+ +

Rob Campbell が書いたブログ投稿において彼は最近の Firebug と Firefox 3.1 との互換性についてのいくつかの混乱を明確なものにしています。Firebug 1.2.1 だけでなく、Firebug 1.3 も Firefox 3.1 と互換性がないのです。「Firefox 3.1 で Firebug を使いたければ、Firebug 1.4 を使う必要があるでしょう。リリースディレクトリから最新のバージョンを手に入れてインストールしてください。互換性のオーバーライドは必要ありません。アルファバージョンタグを怖がらないでください。それは本当にごくまともなものです。a11 ではパネルの仕様変更に日本語 locale が追いついていないために、日本語 locale だと正常にパネルが表示されないバグがあります。」異なるバージョンについての詳細は GetFirebug.com のリリースページにあります。

+ +

Firebug 向け JSON エクスプローラ

+ +

もうひとつの最近の Firebug のニュースとして、Jan Odvarko が次のように書いています。「Ashish Datta のおかげで、Firebug はネットレスポンスにおける JSON の分析を新しくサポートしました。この機能は JSON を展開可能な項目のツリーに整形して表示させ、それらを Firebug の DOM タブを用いて探索可能にするものです。表示は Net パネル内で行われ、JSON リクエストが展開されるとすぐに見ることができます。この機能は Firebug 1.4a11 の一部となるはずです。Ashish はタフツ大学の 4 年生であり、彼はこの取り組みを彼のオープンソース開発に焦点を当てた授業の一部として行いました。Firebug 周辺のコミュニティが成長し、この不可欠なツールを提供しようとされている様子が見られることは素晴らしいことです！」さらなる情報は Jan のブログ投稿を参照してください。また、Firebug のさらなる情報については GetFirebug.com で得ることができます。

+ +

新しい Mozilla デザインコミュニティメーリングリスト

+ +

Mozilla のとても面白いマーケティングチームの一員である、John Slater が次のように書いています。「開発者、ローカライザー、マーケター、QA テスター、などの成功例に続いて、私たちはビジュアルデザインコミュニティを組織し成長させることに大きな力を入れることにしました。私はさらなる詳細をすぐに公開するつもりです。それにはアートワークを投稿し共有するための新しいサイトを作成するための計画が含まれるでしょう。しかし、より多くを知りたいと強く思っているのなら、まずするべきことは新しいデザインメーリングリストへの登録です。」

+ +

「もちろん、すでに Mozilla のデザインコミュニティはあります。 — 私たちの Firefox 3 T シャツデザインコンテストに参加してくれた人や Google で Firefox アートを探しただけでも 3500 以上の人たちがいます。 — しかし、できるだけもっと多くの人たちが必要なのです。これは最も素晴らしい利点を上手く利用し、また、たくさんの素晴らしいスタッフを得ることができるだろうまったく新しい方法です。その可能性はものすごく興奮するものです。」さらなる情報は、John の投稿を参照し、メーリングリストに登録してください。

+ +

ローカライゼーションのテストと QA に関する調査

+ +

の 最近、l10n ドライバチームは テストと ローカライゼーションコミュニティを対象としたテストとQA に関する調査を始めました。調査は 12 月 26 日まで行われています。Stas Malolepszy は次のように書いています。「多くのローカライゼーションチームがテストに関する彼ら自身の習慣と手続きを作り出しました。ですから、Mozilla がローカライゼーションのテスト計画を考え始めたときに、最初にすでに発明され、上手く行くことが証明されたことを検討するのは自然なことです。多くのローカライゼーションチームがあり、各々がローカライゼーションをテストするための彼ら自身の方法を持ち、それは、彼らの要求に適合し、彼らの取り組みと過去の経験の結果から成り立っています。私たちがこれらの習慣を共有し、他のチームがそれらを採用することを助けることができたならどうでしょうか？これは手短に調査の目的を要約したものです。」あなたが Mozilla ローカライゼーションコミュニティの一員で協力したいなら、調査に回答することを強くおすすめします。さらなる情報は、Stas のブログ投稿を参照してください。

+ +

インタビュー: Mozilla Weave プロジェクトリーダー

+ +

Mozilla Labs の Weave プロジェクトの主任エンジニアである Dan Mills が Aza Rasikin と簡単な語り合いに応じました。このビデオで彼は Weave とは何か、それの良いところ、Firefox モバイルとどう連携するか、ユーザの手に渡るのはいつか、そして、あなたが協力できることは何かということについて話しています。ビデオインタビュー全体を見てください。

+ +

品質保証コミュニティサイトがベータ版に

+ +

Jay Patel が次のように書いています。「実験、議論、デザイン、開発、そしてテスト…の一年半以上後に、『公式』QMO ベータの開始を告知できることを私は誇りに思います。私たちはチームのメーリングリストと mozillaZine の QA ブログに頼っていましたが、これからは Mozilla QA チームと成長しているボランティアのコミュニティがいっしょに集まって協力すると私は信じているしっかりとしたコミュニティウェブサイトを持つことになります。私たちは Mozilla 製品とサービスのすべての質を改善するためにより良い共同作業をすることができるでしょう。また、QMO は他人が私たちに加わり、より Mozilla QA について知るための場所を提供します。」さらなる情報は、Jay のブログ投稿を参照するか、新しい QMO ウェブサイトに行ってください。

+ +

自動プロジェクト作成が Mozdev に導入予定

+ +

silfreed が次のように書いています。「長い時間がかかりましたが、プロジェクト作成プロセスのスピードアップをという要求が実現することになりました。過去数年間、新しいプロジェクトを構成するのに二つの重大な悩み事がありました。的確に処理されたことを確かめるためにリクエストを追跡することと、実際にプロジェクトを作成することです。私たちはついに、、その場でプロジェクトのリクエストを追跡することを処理してプロジェクトを作成するためのツールを手に入れました。私たちにはいまだにやるべきいくつかの作業がありますが、これらのことが実現するまであと少しです。」さらなる詳細は silfeed のウェブログにあり、Mozdev サイト自身でプロジェクトをリクエストすることができます。

+ +

mozilla.com に新しい Firefox の機能についてのビデオ

+ +

Mozilla Blog が次のように報告しています。「私たちは mozilla.com に Firefox の多くの素晴らしい機能のいくつかが活用されるようにすることを支援するための新しいビデオセクションを作りました。機能の紹介に特化しているビデオはそれらを Firefox に実装することに協力した人々によってナレーションが付けられています。新しいビデオセクションは Firefox をインストールする方法の段階的な説明も含まれています。それは人々を乗り換えさせるのに完璧なものです。」現在、ビデオには次のものが含まれています。：Aza Dotzler による Firefox 3 の概要、Firefox に乗り換える方法、Johnathan Nightingale による Firefox 3 のセキュリティ機能、Alex Faaborg による Bookmarks とタグ、Seth Spitzer による Awesomebar（すごいバー）。

+ +

2008 年の最終号！

+ +

これは 2008 年 の about:mozilla の最終号であるという簡単なリマインダです。私たちは休暇後に通常の週刊スケジュールを再開する予定ですが、1 月 6 日 か 1 月 13 日かは最初の週にどれだけのニュースが報告されるかしだいです。みなさん良い休日を、そして、安全で楽しい新しい年をお迎えください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20090113/index.html b/files/ja/orphaned/devnews/20090113/index.html new file mode 100644 index 0000000000..2de888c55a --- /dev/null +++ b/files/ja/orphaned/devnews/20090113/index.html @@ -0,0 +1,46 @@ +--- +title: 'about:mozilla - 2010 年までの目標最終版、Firebug、アドオン、Labs、Snowl、コミュニティテーマ、Camino、などなど…' +slug: DevNews/20090113 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Mozilla の 2010 年までの目標が最終化

+ +

Mitchell Baker は最終版となる、 Mozilla の 2010 年までの目標の統合化されたものを投稿しました。まだ指摘されていない重要な問題があると強く思うなら、まだフィードバックをすることができます。しかし、議論の段階と過程を通した関与を考えれば、これは最終版といえるでしょう。4 つの目標はオープン性、データ、モバイル、そして、Firefox を中心としており、Mitchell のウェブログで一覧の最終版すべてを読むことができます。

+ +

Firebug 1.3.0 最終版がリリースされました

+ +

Rob Campbell は Firebug 1.3.0 がリリースされ、addons.mozilla.org を通して利用可能になったことを投稿しました。「以前説明したように、このバージョンは Firefox 3.1(Shiretoko)とそれ以降との互換性はありません。Firebug 1.4 alpha が getfirebug.com のリリースディレクトリにあるのでそれを利用してください。注意事項はリリースページにあります。」Firebug 1.3 は Net パネル、Script パネル、デバッグ機能、そして、コンソールの改善を含んでいます。新しい Tracing パネルが Firebug 自身のデバッグのために用意され、チームは新しい FireUnit システムを用いたユニットテストカバレッジに取り組み始めています。更なる情報は、Rob のオリジナルブログ投稿を参照してください。

+ +

あなたのアドオンを Firefox 3.1 に更新させるときです

+ +

Firefox 3.1 の開発とテストは急速に続いており、Add-ons Blog の優れたメンバーがアドオン開発者は Firefox 3.1 最終リリースのために更新を始めるときだということを投稿しました。「3.1b2 と同様に、アドオンの互換性に影響するような変更は予定されていません。ためらわれないでください！ベータが出る毎により多くの人々が乗り換えます。そして、3.1 との互換性を持たせることはユーザにシームレスなアップグレード体験を保証するでしょう。」役に立つリンクとさらなる情報を含む詳細は、Add-ons ブログの投稿を参照してください。

+ +

2008 年 12 月の Labs の更新情報

+ +

Mozilla Labs のチームは彼らの 12 月の更新情報を投稿しました。それは最近のイベントをカバーし、アクティブな Mozilla Labs の実験のすべての状況の手短な更新情報を提供しています。含まれているものには、ミシガン大学の Design Jam についての記録、大学への働きかけについてのニュース、そして、最も最近の、進行中のコンセプトシリーズプロジェクトからの「今月のコンセプト」があります。実験の更新情報は Personas、Snowl、Ubiquity、Weave、そして Prism について提供されています。Mozilla Labs ウェブログで更新情報のすべてを読んでください。

+ +

Snowl: 新しいリリースとブログ投稿

+ +

Myk Melez はメッセージングをブラウザに統合する Mozilla Labs の実験である Snowl の最新リリースについて告知しました。リリース版である Snowl 0.2 は Snowl Central からダウンロードおよびインストールできます。さらに、Myk は Snowl についての 3 つの示唆に富み、先進的なブログ記事を投稿しました。その記事では実験の理念、将来、行き先について論じています。Labs のプロジェクトもしくは Firefox にメッセージングを統合するというアイデアに興味があるなら、これらの投稿はこの最新リリースをテストしながら Snowl プロジェクトについて読み、考え始めるには素晴らしいものです。

+ +

Mozilla コミュニティテーマ

+ +

Tara Shahian が次のように書いています。「先週ローカライゼーションチームが私たちのコミュニティへより良いリソースを提供するための進行中の努力の一部としてのカスタマイズ可能な Web ツールのセットをデプロイしました。ツールキットにはまったく新しい Mozilla Community Theme ですべてスキニングされたコミュニティウェブサイト、Wiki、ブログ、そして、フォーラムのためのテンプレートが含まれています。これはコミュニティ が Web での存在感をより簡単に確立するのを助けるだけでなく、それを採用することを選んだ異なったコミュニティサイト間を一致したプロフロッショナルな見た目にします。」新しいコミュニティテーマについてのさらなる情報は、Tara のブログ投稿をチェックしてください。

+ +

Firefox をダウンロードするときのユーザエクスペリエンス

+ +

最 近、Mozilla Metrics のメンバーが、元は Firefox ユーザエクスペリエンスの完全なサイクルをより良く理解するために 2007 年に始まった、Funnelcake プロジェクトを再開しました。11 月版はいくつかの洞察を提供し、それらは彼らのブログで公開されています。「この議論のために、私たちは別の領域に焦点を当てたいと思っています。新しい ユーザがダウンロードボタンを押すまさにその瞬間のエクスペリエンスは何なのでしょうか？最初は一見、これはごく簡単な試みのように思えるかもしれませ ん。しかし、ユーザがそれらのエクスペリエンスにおけるこの瞬間で導かなければならない全く異なった望みがあるのです。」Funnelcake プロジェクトとこの最も最新の分析についてさらに読むには、Blog of Metrics の投稿をチェックしてください。

+ +

Camino 2.0 Beta 1 がリリースされました

+ +

Camino プロジェクトは懸命に作業に取り組み続け、Camino 2.1 Beta 1 をリリースしました。「Camino 2.0 Beta 1 にはドロッグアンドドロップで並べ替え可能なタブのサポート、サイト毎に「Flash アニメーションをブロック」する機能、タブ一覧、完全なコンテンツズーム、ブラウザウィンドウでのフルキーボードアクセスのより良いサポート、そして、「最近閉じたページ」を含む、いくつかの注目すべき改善が含まれています。Camino 2.0 Beta 1 には人気のあるプラグインのより良いパフォーマンスと Web 標準のサポートの拡大を可能にする、Mozilla の Gecko レンダリングエンジンの 1.9.0 の改善がすべて含まれています。」ダウンロードするには、Camino プレビューサイトを訪れてください。

+ +

開発カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。

+ +

Email ニュースレターを購読するには

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20090120/index.html b/files/ja/orphaned/devnews/20090120/index.html new file mode 100644 index 0000000000..3ceda650c4 --- /dev/null +++ b/files/ja/orphaned/devnews/20090120/index.html @@ -0,0 +1,27 @@ +--- +title: >- + about:mozilla - + アドオンの更新、コミュニティストア、Ubiquity、Personas、Firebug、Fennec、XULRunner、などなど･･･ +slug: DevNews/20090120 +tags: + - DevNews + - 'DevNews:about-mozilla' + - 要更新 +--- +

Add-on developers: time to update for Firefox 3.1

+

Firefox 3.1 development is well under way. Nick Nguyen writes, “3.1 is coming! We know that many add-on developers have held off on testing for 3.1 compatibility because they’re waiting for a near-final release to test against. I’m happy to report that as of Firefox 3.1b2, no changes are planned which should affect add-on compatibility. Don’t hesitate! With each subsequent beta, more people make the switch and having 3.1 compatibility will ensure a seamless upgrade experience for your users.” For more information, see Nick’s original blog post at the Add-ons weblog. The Mozilla Developer Center also has an article about Updating extensions for Firefox 3.1.

+

Mozilla Community Store

+

Tara Shahian writes, “The Community Store garnered a lot of excitement when it launched, and a big part of its success can be attributed to the collection of great designs that were already on display in the gallery.” In addition to the artwork available when the store opened, some fantastic new designs have been added since. Also, if you like the illustration style of a particular artist, simply click on the artist name to view a portfolio of all their submitted work. You can submit your own designs, too — just head over to the Upload Tool to get started.

+

Ubiquity add-on update

+

Mozilla Labs has announced the most recent release of Ubiquity, an experimental add-on that aims to make the Web easier to use through natural language. “We are proud to announce Ubiquity 0.1.5. Since the last major update, Ubiquity has gained a sleeker look and a smarter, more stable core.” Ubiquity can now also be skinned using simple CSS. If you already have Ubiquity, it will automatically update itself, or you can get the latest version at the project site. For more information about this release, see the original Labs blog post.

+

Mozilla Labs’ Personas add-on

+

The Mozilla Labs team has released another video interview, this one about the Mozilla Labs’ Personas experiment. “Mozilla Labs’ Personas — although still in beta — is an extension that adds lightweight theming to your browser, allowing dynamic changes to how your Firefox looks. Suneel Gupta sat down to talk about what it means to have the browser’s look-and-feel reflect our personality, passions, and mood. And he’s looking for feedback.” You can download and try this experimental add-on through GetPersonas.com.

+

Firebug test cases online

+

John J. Barton has blogged that the Firebug test cases are now online. “Often users will have a sequence of Firebug operations that fails for them, but we need a page to try the sequence. Now when a user has a bug report without a test case we can offer some example files for their test procedure.” For more information, see John’s blog post.

+

Testing Fennec

+

The mobile team is getting ready to deliver its first beta of Fennec (aka “Firefox Mobile”) next month, and the Mozilla Quality Assurance community is looking for help with testing this release. “This is exciting news as everybody who has seen Fennec has great things to say about it. If you haven’t had a chance to see Fennec first hand, I encourage you to download it and give it a try (it also works on your desktop). With mobile internet becoming a cornerstone for many of the new devices, there is a much greater need for Fennec. We just recently added Symbian as a supported OS which makes 3 following Maemo and Windows Mobile. The beta we will be delivering next month will be for Maemo only as that is the most stable platform.” There are lots of opportunities if you want to get involved with the Fennec testing project, and more information is available on the QMO weblog.

+

XULRunner releases

+

Mark Finkle recently posted about two XULRunner releases — one official, and one unofficial. “The newest official XULRunner has been released. XULRunner 1.9.0.5 matches the Firefox 3.0.5 release. For XULRunner developers, most of the changes in 1.9.0.5 are related to security fixes. You can also look at the full list of fixed bugs.” The unofficial builds are for XULRunner 1.9.1. “These are unofficial and may not be configured exactly the same as official builds. I was not able to get the Mac Universal build working. If you’re an extension, XUL app or plugin developer, these builds should help you move ahead with your Firefox 3.1 (Mozilla 1.9.1) development.” See Mark’s weblog for more information and comments.

+

Developer calendar

+

For an up-to-date list of the coming week’s Mozilla project meetings and events, please see the Mozilla Community Calendar wiki page.

+

This entry was posted by dria on Tuesday, January 20th, 2009 at 10:17 am and is filed under about-mozilla.

diff --git a/files/ja/orphaned/devnews/20090310/index.html b/files/ja/orphaned/devnews/20090310/index.html new file mode 100644 index 0000000000..5acc45e8eb --- /dev/null +++ b/files/ja/orphaned/devnews/20090310/index.html @@ -0,0 +1,58 @@ +--- +title: >- + about:mozilla - + Firefox、セキュリティメトリック、トレードマーク、Shiretoko、ローカライゼーション、プロトタイプ、Ubiquity、Bespin、Weave、などなど… +slug: DevNews/20090310 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox 3.0.7 がリリースされました

+ +

Mozilla Corporation の安定性およびセキュリティアップデート活動の一環として、Firefox 3.0.7 が Windows、Mac、および Linux 向けに GetFirefox.com から無償でダウンロードできるようになりました。私たちはすべての Firefox ユーザにこの最新リリースにアップグレードすることを強く推奨します。すでに Firefox 3 を使っているなら、自動更新が通知されるでしょう。もしくは、「ヘルプ」メニューの「ソフトウェアの更新を確認…」を選択することによって更新を手動で適用することもできます。変更点の一覧とさらなる情報は、Firefox 3.0.7 リリースノートを参照してください。

+ +

セキュリティメトリックには用心深く

+ +

Mozilla のセキュリテイエンジニアリングディレクターである Lucas Adamski が Secunia が最近リリースした 2008 セキュリティレポート（PDF ファイルへのリンク）への反応を投稿しました。「セキュリティメトリックを上手く行うことは非常に難しく、下手に行うことは簡単です。例えば、最近の Secunia 2008 レポートをちょっと見てください。それはブラウザによって報告された脆弱性を分析しようと試みていますが･･･手早く読んだところでは、まるで Firefox のセキュリティ上の問題が IE もしくは Safari の約 4 倍であるかのように見えます。ですが、その結論はひどく間違ったものです。Mozilla は Firefox におけるすべてのセキュリティ上の問題を修正し、それらがどのように発見されたかに関わらず、その内容を公表してリリースしています。内部開発者、QA、もしくは、セキュリティーコントラクターによって報告された問題は公表せず、外部の独立した団体から報告された問題だけを公表する他のベンダーとは違います。ですから、比較するためにこれらの数を提示することは、役に立たないというよりも、むしろ、誤解を招くことです。」Luas の投稿全文と Mozilla およびブラウザセキュリティについてのさらなる情報は、Mozilla Security Blog を参照してください。

+ +

Mozilla トレードマークの誤用の報告

+ +

David Rolnitzky は次のように報告しています。「Mozilla.com に最近作られた新しいフォームは Mozilla トレードマークの誤用の報告を簡単にします。 Alex と私たち Webdev チームと一緒に Catherine、Harvey、そして、Mozilla 法律チームが誰でも疑問が生じる行動を報告することを簡単に行えるようにするという素晴らしい仕事を成し遂げました。コミュニティが Web を開かれた安全なものに保つことに集中するために、私たちがいっしょに悪いものたちを注意することは本当に重要なことです。ですから、疑わしそうなものを見たときは、このフォームから報告するようにしてください。」

+ +

Shiretoko が Firefox 3.1 から Firefox 3.5 に改名

+ +

Mike Beltzner が Mozilla DevNews ブログに、現在の開発バージョンである Shiretoko が当初計画されていた Firefox 3.1 ではなく Firefox 3.5 と呼ばれることになる、との投稿をしました。「Shiretoko プロジェクトのバージョンナンバーは予定されている 4 番目の ベータリリースの前にFirefox 3.5 に変更されます。バージョンナンバーを変更するというプロセスには多くの影響があると予想され、そのプロセスは Sam Sidler (irc.mozilla.org では ss) によって調整される予定です。アドオン開発者は addons.mozilla.org でホストされている拡張やテーマにへの影響についての発表を待つべきです。」

+ +

Mozilla のローカライゼーションドキュメンテーション

+ +

Seth Bindernagel が、私たちのプロセスについて、新しいローカライゼーションの始め方、もしくは、公式ローカライゼーションになるためにするべき必要があることのすべてを 追いかける方法について学びたいと思っているローカライザー向けの情報の要約を投稿しました。「私は過去にこのことについて投稿しましたが、有益な情報で すから、再度投稿します。また、私は旅をしていたときに数人のローカライザーからプロセスはまだ明確ではないと聞きました。そして、私たちは彼らが参加す るようにレビューすべき情報の良いチェックリストを必要としています。」Seth は彼のウェブログで必要とされている情報へのリンク集を提供しています。

+ +

新しいタブページのプロトタイプ

+ +

Mozilla Labs と Firefox チームが共に新しい「新しいタブページ」デザインのプロトタイプ作りに取り組んでいます。Aza Raskin は一番最近提案されたデザイン候補とプロトタイプを投稿しました。「新しいタブを開く毎に、どこかに行くためにそれを開きます。それは検索をするためのときもあります。新しい URL を打つためのときもあります。選択したアドレスをチェックするためのときもあります。言い切れる唯一のことは、空白のページを開きたいのではないということです。」チームは新しいタブのコンセプトの最終 2 つの段階からのフィードバックを取り入れ、新しいデザインをスケッチしています。それは Mozilla Labs ブログでプロジェクトが達成しようとしていることとその理由について全体的なもっとより多くの情報とともに見ることができます。

+ +

Ubiquity ユーザテストについてのニュース

+ +

Jono DiCarlo が次のように書いています。「秋の四半期から、HCI の生徒であり Ubiquity 貢献者の Zac Lym が新しいユーザに Ubiquity をテストしてもらうという良い仕事をしています。その研究にはわずかな数のユーザしか参加していませんが、それは重要なものです。なぜなら、それは私たちが Ubiquity で持つ最初で唯一の厳格に得られたユーザビリティデータだからです。調査から得られている主要な検討材料はユーザたちの行動を撮影した一連のビデオです。Zac はこれらのビデオを彼の手法と彼の所見をまとめたものと共に Mozilla Wiki から閲覧可能にしました。これらの所見は Ubiquity のユーザエクスペリエンスの改善に興味がある者にとって大変読む価値があるものです。」Jono のいくつかの所見の解析を含んださらなる情報は、投稿全文を参照してください。

+ +

3 月 27 日、パリで Mozilla Labs Cafe

+ +

Mozilla Europe が Mozilla Labs Cafe を 3 月 27 日の午後にパリで開催します。「Mozilla Labs Cafe は短時間の、Mozilla 好きの人、技術エヴァンジェリスト、開発者、ギーク、ブロガー、そして、Mozilla Labs および Labs チームが取り組んでいる様々な進行中のプロジェクトすべてについてもっと知りたいと強く思っている人なら誰でも参加できる非公式の集まりです。」日程には Tristan Nitot、Chris Beard、Rey Bango、Pascal Finette による短時間のトークが含まれています。登録が必要ですが、出席料はかかりません。さらなる情報は Labs Cafe ウィキページを参照してください。

+ +

Bespin プロジェクトの更新情報

+ +

Dion Almaer は Bespin プロジェクトの多数の更新情報を投稿しました。Version 0.1.4 が bespin.mozilla.com へリリースされ、このリリースには dojo への移行、多くのバグの修正、そして、エディタへのいくつかの改善を含む多くの変更点があります。加えて、拡張した点が進み、設定システムがセットアップ の調整をするために用いられるようになりました。このリリースには他の多くの取り組みが含まれており、それらは Dion が Mozilla Labs ブログの彼の投稿でさらに語っています。

+ +

Weave M4 開発マイルストーン

+ +

Weave 開発リーダーである Dan Mills が Mozilla Labs ブログにプロジェクトについての更新情報を投稿しました。「Weave は Web ブラウザがデータと個人情報を超えるユーザコントロールを増加させながらより良い経験の仲立ちをする機会を探る Mozilla Labs の実験です。M4 開発マイルストーンは Weave クライアントの初期版となる開発者向けリリースであり、テストだけを目的としたもので、今年後半に予定されている次のメジャーアップデートに向けて多数計画された開発マイルストーンの 1 つです。」M4 には Fennec の仮サポート、リデザインされた同期プロトコルおよびサーバアーキテクチャ、クライアント最適化、そして、services.mozilla.com が現在ホストされている新しいハードウェアサーバクラスタが含まれています。チームは常に Weave のテストおよび開発への手助けを求めています。また、さらなる詳細は Dan のブログ投稿にあります。

+ +

開発者カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。以前のミーティングからのノートはカレンダーを通して同様にリンクされています。

+ +

about:mozilla について

+ +

about:mozilla は Mozilla コミュニティによる、Mozilla コミュニティのための、Mozilla コミュニティについてのものであり、Mozilla プロジェクトのすべての方面に関連する主要なニュース項目に焦点を当てています。このニュースレターは Deb Richardson によって書かれ、毎週火曜の朝に発行されます。次の号に含んでもらいたいニュースや告知があるなら、about-mozilla[at]mozilla.com に送ってください。

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20090324/index.html b/files/ja/orphaned/devnews/20090324/index.html new file mode 100644 index 0000000000..709288425f --- /dev/null +++ b/files/ja/orphaned/devnews/20090324/index.html @@ -0,0 +1,54 @@ +--- +title: >- + about:mozilla - Firefox Mobile、Mozilla + Foundation、AMO、Bespin、ビデオチュートリアル、Labs、メトリック、などなど… +slug: DevNews/20090324 +tags: + - DevNews + - 'DevNews:about-mozilla' +--- +

Firefox Mobile (Fennec) 1.0 Beta 1 がリリースされました

+ +

先週、Mozilla は Fennec 1.0 Beta 1 をリリースし、このことについて Stuart Parmenter が彼のウェブログで発表を行っています。「Fennec 1.0 Beta 1 では多くの素晴らしい改善がなされていて、その中で特筆すべきはパフォーマンス周りです。私たちはフロントエンドコードに大量の最適化を行い、プラットフォームに数多くの最適化を行いました。私たちは TraceMonkey を有効化することにより、モバイルに絶大な JavaScript 速度の改善をもたらしました。これは JIT が Firefox 3.1 ベータ版にもたらしたものです。このベータ版での特徴といえるものは、プラグインが利用可能になったことです。そのおかげでお気に入りのサイトでビデオを見ることが出来ます。また、私たちはブックマーク管理の改善の最初の一歩を成し遂げました。」さらなる詳細は、Stuart のオリジナル投稿を参照するか、リリースノートをチェックしてください。

+ +

Mozilla Foundation 3 月の更新情報

+ +

Mark Surman が最も最近の Mozilla Foundation の更新情報を投稿しました。「2 月の間に、最も進行しており、現在 3 人以上の Foundation チームがいる領域を絞りました。これらは現在 2009 年で最もインパクトを持ち得ると考えている領域です。」ハイライトには Mozilla Education、Mozilla Research、そして、mozilla.org リデザインの初期段階が含まれています。「次の 4 半期に私たちはソーシャルマーケティングに焦点を絞った資金調達、アクセシビリティプログラム、そして、活発に前進している物事の一覧を対象とした Mozilla Research を加えることができることを望んでいます。」Mark の投稿ではいくつかのプログラムの原案の概要、Foundation が取り組んでいる計画、同様に、いくつかのコミュニティと進行中のコミュニケーションイニシアチブが述べられています。

+ +

AMO チームにとって忙しい月

+ +

addons.mozilla.org (AMO) チームはサイトの新しい拡張と修正に懸命に取り組んでいます。主要な変更のいくつかは次のものです。拡張された開発者ダッシュボード、固定リンクダウンロード、共有サイトへのリンク、そして、編集者の購読システム。また、チームは次についても懸命に考えています。「私たちはアドオンの発見とサポートを助け、同様に、ワークフロー、解析、そして、アドオン開発周辺コミュニティによる開発者の環境向上の拡大をする構想に焦点を絞っています。次の 4 半期には、特別に取り上げられているアドオンとそうでないアドオンの両方を簡単に発見できるエンドユーザエクスペリエンスに対する変化を見るでしょう。」チームはロードマップを公開しており、これらと他に予定されているサイトへの変更についてのさらなる情報はオリジナルブログ投稿を参照してください。

+ +

Bespin コミュニティの更新情報

+ +

Dion Almaer は Bespin プロジェクトについての更新情報を投稿しました。「立ち上げ後は小康状態かもしれないと思っているかもしれませんが、飛び込んできた素晴らしい貢献者のおかげで逆のことが起こっています。」立ち上げ初期以降に Bespin に加えられた強化のいくつかには、タブのサポート、再利用可能なエディタコンポーネント、Quick Open、構文チェッカー、そして doctype の統合などが含まれています。「さらに多くの予定があります。Joe Walker は Mozilla Labs の ロンドンのイベントでコラボレーションを見せてくれました。VCS は良さそうに見えますし、そして、さらなる機能が活発に開発されています。」Bespin プロジェクトについてのさらなる情報は、Dion の投稿全文を参照してください。

+ +

デザインチャレンジのビデオチュートリアル

+ +

Mozilla Labs は長い期間、「考えを刺激し、議論を促進し、そして、Firefox、Mozilla プロジェクト、および全体としての Web のための将来のデザインの方向性を引き出すことを目標とする」プロジェクトであるコンセプトシリーズに取り組んでいます。このプロジェクトの一部として最近のデザインチャレンジがあり、その指導的部分として Mozilla プロジェクトのメンバーが集まり、デザインチャレンジのチュートリアルをプレゼンするというものがあります。これらのチュートリアルは記録され、デザインチャレンジのサイトに投稿されています。今のところあるのは、Madhava Enros の「モバイルのためのデザイン」、John Slater の「オープンソースデザイン、Mozilla、そして、あなた」、Jono DiCarlo の「馬鹿げた/すごい拡張開発 Hacks」そして、Myk Melz の「拡張ブートキャンプ：ゼロから Hello World! までを45 分で」です。さらなるプレゼンテーションとファイルがしだいにアップされていくでしょう。ですから、サイトの更新に注目していてください！

+ +

マウンテンビューの Labs ミートアップが木曜日に！

+ +

Rhian Baker が次のように書いています。「Labs Night、Labsのプロジェクト、あなたのプロジェクト、そして Open Web を議論するための私たちの月に一度のミートアップの時期が再びやってきました。」3 月のミートアップは今週の木曜日、3 月 26 日 午後 6 時にカリフォルニアマウンテンビューの 1981 Landings Drive, bldg K の Mozilla オフィスで開催される予定です。「いつものように、私たちは様々な活発な Labs のプロジェクトの進捗の更新情報を聞き、あなたからも何か聞きたいと思っています！Labs プロジェクトに参加してください。あなた自身のプロジェクトにフィードバックしてください。議論とハッキングのための十分な機会があるでしょう。」

+ +

SeaMonkey 1.1.15 がリリースされました

+ +

先週 SeaMonkey プロジェクトが自身のオールインワンインターネットスイートの新しいバージョンをリリースしました。SeaMonkey 1.1.15 はいくつかのセキュリティの脆弱性を修正し、以前のバージョンで見つかったいくつかの小さな問題も修正しています。この最新リリースは SeaMonkey のウェブサイト（日本語版はもじら組もじら団のウェブサイト）からダウンロード可能です。

+ +

Firefox のマーケットシェアとは何か？についてのメトリック

+ +

Mozilla メトリックチームのリーダーである Ken Kovash が Firefox マーケットシェアについて - 報道で多く取り扱われるものおよびデータがどこから来るか - の興味深い記事を書きました。「最近数週間、私たちはブラウザマーケットシェアの 2 つの膨大なソースからメジャーアップデートあるいは新しい立ち上げを見ました。それで、これは、世の中にあるいくつかのソースの高いレベルの概観、それらのサンプルの外見、およびデータを切り刻むための各々の能力を提供するための良い機会ではないかと考えました。」Ken の記事は Gemius、 Net Applications、StatCounter、そして AT Internet Institute (旧 Xiti) についての話に続いています。

+ +

Camino の Summer of Code はあなたを必要としています！

+ +

Camino プロジェクトはあなたの助けを求めています！「木々と花々が咲き始めました。つまり、Google Summer of Code のために全力を傾ける時期が再びやってきたということです。毎年挑戦しているように、私たちは Camino に焦点を絞った 1 つないし 2 つのプロジェクトを持ちたいと思っています。私たちはいくつかの非常に良い貢献を過去に行い、私たちのコミュニティとオープンソースに普通に参加する生徒 を得るための素晴らしい方法を見つけました。ボールを転がすために、私たちは 私たちの SoC Wiki にいくつかのアイデアと過去のプロジェクトを用意しました。これにより、コミットメントのレベルと承認される仕事量を測ることができます。」参加したいならば何をするべきかを含む、さらなる情報は、Mike Pinkerton の投稿全文を読んでください。

+ +

開発者カレンダー

+ +

来る週の Mozilla プロジェクトミーティングとイベントの日々更新されるリストは、Mozilla コミュニティカレンダー Wiki ページを参照してください。以前のミーティングからのノートはカレンダーを通して同様にリンクされています。

+ +

about:mozilla について

+ +

about:mozilla は Mozilla コミュニティによる、Mozilla コミュニティのための、Mozilla コミュニティについてのものであり、Mozilla プロジェクトのすべての方面に関連する主要なニュース項目に焦点を当てています。このニュースレターは Deb Richardson によってかかれ、毎週火曜の朝に発行されます。次の号に含んでもらいたいニュースや告知があるなら、about-mozilla[at]mozilla.com に送ってください。

+ +

もし、このニュースレターを Email で受け取りたいなら、about:mozilla ニュースレター購読フォームから登録するだけです。新鮮なニュースが、毎週火曜日に、あなたの受信箱に届けられます。

diff --git a/files/ja/orphaned/devnews/20090904/index.html b/files/ja/orphaned/devnews/20090904/index.html new file mode 100644 index 0000000000..8ab03f270f --- /dev/null +++ b/files/ja/orphaned/devnews/20090904/index.html @@ -0,0 +1,11 @@ +--- +title: プラグインを常に最新に保つための手助け +slug: DevNews/20090904 +--- +

来る Firefox 3.5.3 と Firefox 3.0.14 から、ポピュラーなプラグインである Adobe Flash Player が最新バージョンでない場合、Mozilla はユーザに警告するようになります。古いバージョンのプラグインは、クラッシュやその他の安定性の問題を引き起こしたり、重大なセキュリティリスクとなる可能性があります。今回、私たちが Adobe Flash Player に着目したのは、その人気と、一部研究によって 80% ものユーザが古いバージョンを使っている ことが示されたためです。 Firefox のセキュリティアップデートをインストールすると、古い Adobe Flash Player を使っているユーザには次のようなメッセージが表示されます： 古い Flash への警告

+ +

私たちは、ユーザの注意を引くことで、彼らに直接、最新バージョンをダウンロード できる Adobe web サイトへ向かってもらいたいと考えています。 すでに最新バージョンを実行していたり、あるいは Adobe Flash Player をインストールしていないユーザには、通常、Firefox セキュリティアップデートをインストールした後に表示されるメッセージが表示されます：

+ +

 

+ +

Mozilla は、今後、他のプラグインベンダーとも連携して、同様のチェック機能を提供していきます。ソフトウェアを最新に保つことは、オンライン上で自らを安全に保つ上で最も重要なことの 1 つであり、Mozilla はユーザができるだけ簡単にそうしたプロセスを実行できる方法を探していきます。

diff --git a/files/ja/orphaned/devnews/index.html b/files/ja/orphaned/devnews/index.html new file mode 100644 index 0000000000..1578ea6951 --- /dev/null +++ b/files/ja/orphaned/devnews/index.html @@ -0,0 +1,242 @@ +--- +title: DevNews 日本語版 +slug: DevNews +--- +

ここは、かつて存在した DevNews （MDN が Kuma に移行するに伴って閉鎖）で提供されていた開発者向けの Mozilla に関するニュースを日本語で提供していたサイトです。

+

ページ名の命名規則は、原文の公開日付（例：20090905。同日に複数の記事がある場合は、2 つ目以降のページ名を 20090905-02などとする）になっています。

+

2009

+

2009/09

+ +

2009/03

+ +

2009/01

+ +

2008

+

2008/12

+ +

2008/11

+ +

2008/10

+ +

2008/09

+ +

2008/08

+ +

2008/07

+ +

2008/06

+ +

2008/05

+ +

2008/04

+ +

2008/03

+ +

2008/02

+ +

2008/01

+ +

2007

+

2007/12

+ +

2007/11

+ +

2007/09

+ +

2007/08

+ +

2007/07

+ +

2007/06

+ +

2007/05

+ +

2007/04

+ +

2007/03

+ +

2007/02

+ +

2006

+

2006/12

+ +

2006/11

+ +

2006/10

+ +

2006/08

+ +

2006/07

+ diff --git a/files/ja/orphaned/dynamically_modifying_xul-based_user_interface/index.html b/files/ja/orphaned/dynamically_modifying_xul-based_user_interface/index.html new file mode 100644 index 0000000000..06e02a5102 --- /dev/null +++ b/files/ja/orphaned/dynamically_modifying_xul-based_user_interface/index.html @@ -0,0 +1,89 @@ +--- +title: Dynamically modifying XUL-based user interface +slug: Dynamically_modifying_XUL-based_user_interface +tags: + - Add-ons + - DOM + - Extensions + - XUL +--- +

この記事では、DOM やその他の API を使って XUL インターフェイスを操作する方法について検討します。まず DOM + + ドキュメント + の概念について説明し、DOM の呼び出しを使ってドキュメントを操作する基本的な方法の例を幾つか実演したのち、 Mozilla 固有のメソッドを使って + + 匿名 XBL コンテント + を操作する方法を実演します。

+

この記事は XUL 開発の初心者から中級者を対象にしており、読者が XUL と JavaScript の基本的な知識を持っていることを想定しています。Document Object Model について の記事や Gecko DOM リファレンス の 導入ページ といった DOM に関する入門記事も必要があればお読み下さい。

+


+ {{ 英語版章題("Introduction") }}

+

はじめに

+

ご存知の通り、XUL は Firefox や Thunderbird のような様々な Mozilla ベースのアプリケーションでユーザーインターフェイスを記述するのに使われている XML 言語です。XUL アプリケーションでは動作を定義するのに JavaScript が使われており、その中では XUL ドキュメントにアクセスするのに DOM API を使っています。

+

では Document Object Model API とは何なのでしょうか？

+

DOM API はスクリプトとドキュメント間で行われるやり取りのあらゆる所で使われるインターフェイスです。一度でも XUL (または HTML) ドキュメントとやり取りするスクリプトを書いた事があるなら、あなたは既に DOM 呼び出しを使っています。最も有名な DOM メソッドはおそらく document.getElementById() で、これは与えられた id に対応する要素を返します。あなたはそれ以外にも element.setAttribute() や、拡張機能を書いた事があるなら addEventListener() といった呼び出しを使った事があるかもしれません。これらは全て DOM で定義されているものです。

+

DOM メソッドには、ドキュメントに要素を作成したり、動かしたり、削除するものもあります。これらは後のセクションで実演します。まずは、 + + ドキュメント + とは何なのかについて学びましょう。

+

{{ 英語版章題("What is a document?") }}

+

ドキュメントとは何か？

+

ドキュメントは DOM API を使って操作できるデータ構造です。あらゆるドキュメントの論理的な構造はツリー状になっており、ノードとしての要素、属性、処理命令、コメントなどで出来ています。ドキュメントのツリー表現を見るには DOM Inspector を使ってください。Todo: XUL ドキュメントとツリーの簡単な例

+

ドキュメントは、妥当な HTML や整形式の (XHTML や XUL 等の) XML の、メモリ内部の表現とみなす事が出来ます。

+

異なるウェブページは (同じウェブページの異なるインスタンスであっても) 異なるドキュメントに対応しているということを覚えておく事が重要です。それぞれの XUL ウィンドウはそれ自身の独自のドキュメントを持っており、<iframe> や <browser> 、<tabbrowser> 要素を持っている場合には一つのウィンドウにさらに幾つかの異なるドキュメントがあるということになります。このため、扱っているのが適切なドキュメントなのかを常に確認する必要があります。 (詳しくは chrome コードでウィンドウを扱う を参照。) スクリプトが <script> タグを使って読み込まれているなら、document プロパティはそのスクリプトが含まれる DOM ドキュメントを参照します。

+

{{ 英語版章題("Examples: Using DOM methods") }}

+

DOM メソッドの使用例

+

このセクションでは DOM メソッドの appendChild() 、createElement() 、insertBefore() 、removeChild() の使い方を実演します。

+

{{ 英語版章題("= Removing all children of an element =") }}

+

ある要素の子要素を全て削除する

+

この例では、id=someElement である要素の全ての子要素を現在のドキュメントから削除するために、removeChild() メソッドを呼び出して子要素が全てなくなるまで最初の子要素を削除しています。

+

hasChildNodes() と firstChild も DOM API の一部です。

+
var element = document.getElementById("someElement");
+  while(element.hasChildNodes()){
+    element.removeChild(element.firstChild);
+  }
+
+

{{ 英語版章題("= Inserting menu items to a menu =") }}

+

メニューにメニューアイテムを挿入する

+

この例では <menupopup> の最初と最後に二つの新しいメニューアイテムを追加します。アイテムを作成するのには document.createElementNS() メソッドを使用しており、作成された xml 要素を insertBefore() と appendChild() を使ってドキュメントに挿入しています。

+

注:

+ +
function createMenuItem(aLabel) {
+  const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+  var item = document.createElementNS(XUL_NS, "menuitem"); // 新しい XUL メニューアイテムを作成する
+  item.setAttribute("label", aLabel);
+  return item;
+}
+var popup = document.getElementById("myPopup"); // <menupopup> 要素
+var first = createMenuItem("First item");
+var last = createMenuItem("Last item");
+popup.insertBefore(first, popup.firstChild);
+popup.appendChild(last);
+
+

appendChild() や insertBefore() は存在している要素を動かすのにも使えます。例えば次の文を上の例の最後の行に追加すれば、 "First item" とラベルが付けられたアイテムをポップアップの最後に動かす事が出来ます。

+
popup.appendChild(first);
+
+

この文はノードをドキュメントの現在の位置から削除して、ポップアップの最後に再び挿入します。

+

{{ 英語版章題("Anonymous content (XBL)") }}

+

匿名コンテント (XBL)

+

XBL は Mozilla で新しいウィジェットを定義するのに使用される言語です。XBL で定義されたウィジェットは、バインディングが設定される時に、バインドされた要素に挿入するコンテントを定義する事ができます。このコンテントは、 + + 匿名コンテント + と呼ばれ、通常の DOM メソッドによってアクセスする事は出来ません。

+

代わりに、nsIDOMDocumentXBL インターフェイスのメソッドを使う必要があります。例えば

+
// 与えられたノードの最初の匿名子要素を取得する
+document.getAnonymousNodes(node)[0];
+
+// anonid 属性が el1 である匿名要素のノードリストを返す
+document.getAnonymousElementByAttribute(node, "anonid", "el1");
+
+

より多くの情報を得るには XBL リファレンスの getAnonymousNodes と getAnonymousElementByAttribute を参照して下さい。

+

匿名ノードを得さえすえば、通常の DOM メソッドを使ってバインディングの残りのノードを操作したり処理する事が出来ます。

+

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

+

参照

+ diff --git a/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html b/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html new file mode 100644 index 0000000000..a6c336c13e --- /dev/null +++ b/files/ja/orphaned/e4x/processing_xml_with_e4x/index.html @@ -0,0 +1,265 @@ +--- +title: E4X を用いた XML 処理 +slug: E4X/Processing_XML_with_E4X +tags: + - E4X + - JavaScript + - NeedsTechnicalReview + - XML +--- +
+

警告: E4X は非推奨です。E4X は content に対して Firefox 16 からデフォルトで無効に、chrome に対して Firefox 17 からデフォルトで無効に、そして Firefox 18 で削除される予定です。代替として、DOMParser/DOMSerializer または 非ネイティブの JXON アルゴリズムを使用してください。

+
+ +
+

警告: この記事の内容は古くなっている可能性があります。 最終更新日は 2010 年 11 月 12 日です。英語版の最新の内容も合わせてご覧下さい。

+
+ +

JavaScript 1.6 で初めて導入された E4X により、JavaScript 言語にネイティブ XML オブジェクトが導入され、さらに XML 文書リテラルを JavaScript コードに埋め込むための構文も追加されています。

+ +

E4X の完全な定義は Ecma-357 仕様 でなされています。この章では実用的な概要を示します。完全なリファレンスではありません。

+ +

+ +

互換性の問題

+ +

<script> 要素のサポートがブラウザの間で広く普及する前は、JavaScript をページに埋め込むときに HTML コメントタグで囲むことで、<script> を知らないブラウザが JavaScript コードをそのまま表示してしまうのを防ぐということが一般的でした。この慣習はもう不要ですが、古いコードでは残っていることがあります。後方互換性のため、E4X はコメントや CDATA セクションを無視するのがデフォルトの動作です。e4x=1 引数を <script> タグに加えることでこの制限を無効にできます。

+ +
<script type="text/javascript;e4x=1">
+...
+</script>
+
+ +

+ +

XML オブジェクトの作成

+ +

E4X には XML オブジェクトを作成する方法が 2 つあります。1 つ目は XML コンストラクタに文字列を渡す方法です。

+ +
 var languages = new XML('<languages type="dynamic"><lang>JavaScript</lang><lang>Python</lang></languages>');
+
+ +

2 つ目はスクリプトに XML を XML リテラルとして直接埋め込むことです。

+ +
 var languages = <languages type="dynamic">
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </languages>;
+
+ +

どちらの場合も結果として得られるオブジェクトは E4X XML オブジェクトです。これには内部データにアクセスしたりそれを変更したりするための便利な構文が備わっています。

+ +

XML オブジェクトは通常の JavaScript オブジェクトのように見え、そのような挙動をとりますが、その 2 つは同じものではありません。E4X では E4X XML オブジェクトにおいてのみ動作する新たな構文が導入されています。その構文は JavaScript プログラマにとって取っつきやすいように設計されていますが、E4X では XML からネイティブ JavaScript オブジェクトへの直接のマッピングが用意されていません。そう見えるだけです。

+ +

+ +

属性の操作

+ +

上記の例を実行すると変数 languages は XML 文書の <languages> に対応する XML オブジェクトへの参照となります。このノードには type という 1 つの属性があり、それにアクセスしたり、それを変更したりする方法はいくつもあります。

+ +
 alert(languages.@type); // "dynamic" というアラート
+ languages.@type = "agile";
+ alert(languages.@type); // "agile" というアラート
+
+ +
 alert(languages.toString());
+ /* アラート：
+   <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages>
+ */
+
+ +

+ +

XML オブジェクトの操作

+ +

XML オブジェクトにはその中身を検査したり変更するためのメソッドがたくさん用意されています。それらは JavaScript の通常のドットや [] という記法をサポートしていますが、オブジェクトのプロパティにアクセスするのではなく、E4X ではその要素の子にアクセスするための演算子として定義されています。

+ +
var person = <person>
+  <name>Bob Smith</name>
+  <likes>
+    <os>Linux</os>
+    <browser>Firefox</browser>
+    <language>JavaScript</language>
+    <language>Python</language>
+  </likes>
+</person>;
+
+alert(person.name); // Bob Smith
+alert(person['name']); // Bob Smith
+alert(person.likes.browser); // Firefox
+alert(person['likes'].browser); // Firefox
+
+ +

複数の要素がマッチするようなものにアクセスすると XMLList が返されます。

+ +
alert(person.likes.language.length()); // 2
+
+ +

DOM と同様に * を使うことですべての子ノードにアクセスすることができます。

+ +
alert(person.likes.*.length()); // 4
+
+ +

. 演算子は与えられたノードの直接の子にアクセスしますが、.. 演算子はネストの深さにかかわらずすべての子にアクセスします。

+ +
alert(person..*.length()); // 11
+
+ +

この場合、length() メソッドは 11 を返します。結果として得られる XMLList には要素とテキストノードがともに含まれるためです。

+ +

XML 要素を表すオブジェクトには便利なメソッドがたくさん用意されています。そのうちのいくつかを以下に示します。 TODO: Add all of the methods to the JavaScript reference, link from here

+ +
alert(person.name.text()) // Bob Smith
+
+var xml = person.toXMLString(); // XML からなる文字列
+
+var personCopy = person.copy(); // XML オブジェクトのディープコピー
+
+var child = person.child(1); // 2 番目の子ノード：この場合は <likes> 要素
+
+ +

+ +

XMLLists の操作

+ +

XML オブジェクトに加えて、E4X では XMLList オブジェクトが導入されています。XMLList は XML オブジェクトの順序付きの集まりを表します。例えば、要素のリストです。上記の例に続き、次のようにすると <lang> 要素の XMLList にアクセスすることができます。

+ +
 var langs = languages.lang;
+
+ +

XMLList には格納している要素数を知るための length() メソッドがあります。

+ +
 alert(languages.lang.length());
+
+ +

JavaScript の配列とは違い、length はプロパティではなくメソッドであり、必ず length() として呼び出さなければならないことに注意してください。

+ +

次のようにしてマッチする要素について繰り返すことができます。

+ +
 for (var i = 0; i < languages.lang.length(); i++) {
+     alert(languages.lang[i].toString());
+ }
+
+ +

ここでは配列のアイテムに順にアクセスするときと全く同じ構文を使っています。このように通常の配列に似ているにもかかわらず、XMLList は forEach のような Array のメソッドをサポートしていません。また、Array.forEach() のような Array のジェネリックスも XMLList オブジェクトとは互換性がありません。

+ +

JavaScript 1.6 で JavaScript の E4X サポートの一部として導入された for each...in 文 を使うこともできます。

+ +
 for each (var lang in languages.lang) {
+     alert(lang);
+ }
+
+ +

for each...in は通常の JavaScript のオブジェクトについて使うと、そのオブジェクトに含まれる値（キーではなく）に対して繰り返すこともできます。for...in と同様、配列について使用するのは 全く推奨できません。

+ +

整形式の XML を文書を作らずとも、次のような XML リテラル構文を用いて XMLList を作ることができます。

+ +
 var xmllist = <>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </>;
+
+ +

+= 演算子を使うと文書内の XMLList に要素を新たに追加することができます。

+ +
 languages.lang += <lang>Ruby</lang>;
+
+ +

通常の DOM メソッドで返されるノードリストとは異なり、XMLList は静的であり、DOM 内の変更が自動的には反映されません。既存の XML オブジェクトのサブセットとして XMLList を作成し、その後オリジナルの XML を変更した場合、XMLList にはその変更が反映されません。最新の状態にするには作り直す必要があります。

+ +
 var languages = <languages>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </languages>;
+
+ var lang = languages.lang;
+ alert(lang.length()); // 2 というアラート
+
+ languages.lang += <lang>Ruby</lang>;
+ alert(lang.length()); // やはり 2 というアラート
+
+ lang = languages.lang; // XMLList を作り直す
+ alert(lang.length()); // 3 というアラート
+
+ +

+ +

検索とフィルタ

+ +

E4X には特定の基準にマッチする文書内のノードを選択するための特別な演算子が用意されています。このようなフィルタ演算は丸括弧で囲んだ式で指定します。

+ +
var html = <html>
+  <p id="p1">First paragraph</p>
+  <p id="p2">Second paragraph</p>
+</html>;
+
+alert(html.p.(@id == "p1")); // "First paragraph" というアラート
+
+ +

式の手前のパスにマッチするノード（この場合は p 要素）は式が評価される前にスコープチェーンに追加されます。with 文 を使ってノードが指定されているかのような動作です。

+ +

したがって、フィルタは現在の要素内の単一ノードの値に対しても実行することができます。

+ +
var people = <people>
+  <person>
+    <name>Bob</name>
+    <age>32</age>
+  </person>
+  <person>
+    <name>Joe</name>
+    <age>46</age>
+  </person>
+</people>;
+
+alert(people.person.(name == "Joe").age); // 46 というアラート
+
+ +

フィルタ式に JavaScript 関数を使うこともできます。

+ +
function over40(i) {
+    return i > 40;
+}
+
+alert(people.person.(over40(parseInt(age))).name); // Joe というアラート
+
+ +

+ +

名前空間の処理

+ +

E4X は名前空間を考慮しています。ノードや属性を表すあらゆる XML オブジェクトには QName オブジェクトを返す name() メソッドがあり、名前空間要素を簡単に検査することができます。

+ +
var xhtml = <html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Embedded SVG demo</title>
+	</head>
+	<body>
+		<h1>Embedded SVG demo</h1>
+		<svg xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 100 100">
+			<circle cx="50"
+				cy="50"
+				r="20"
+				stroke="orange"
+				stroke-width="2px"
+				fill="yellow" />
+		</svg>
+	</body>
+</html>;
+
+alert(xhtml.name().localName); // "html" というアラート
+alert(xhtml.name().uri); // "http://www.w3.org/1999/xhtml" というアラート
+
+ +

名前空間内にある要素にアクセスするには、まずその名前空間についての URI を格納した Namespace オブジェクトを作ります。

+ +
var svgns = new Namespace('http://www.w3.org/2000/svg');
+
+ +

すると、通常の要素指定子の代わりに namespace::localName の形式で E4X クエリに使用することができます。

+ +
var svg = xhtml..svgns::svg;
+alert(svg); // 文書の <svg> 部分が表示される
+
+ +

diff --git a/files/ja/orphaned/feed_content_access_api/index.html b/files/ja/orphaned/feed_content_access_api/index.html new file mode 100644 index 0000000000..c975f41902 --- /dev/null +++ b/files/ja/orphaned/feed_content_access_api/index.html @@ -0,0 +1,167 @@ +--- +title: Feed content access API +slug: Feed_content_access_API +tags: + - Add-ons + - Extensions +--- +

Firefox 2 と Thunderbird 2 は拡張製作者に RSS と Atom フィードへのアクセスを簡単にする一連のインターフェースを導入します。

+

フィードインタフェース

+
+
+ nsIFeed
+
+ RSS あるいは Atom フィードを表します。
+
+ nsIFeedContainer
+
+ サブクラスされたフィード関連の様々なインタフェースのベースクラス。
+
+ nsIFeedElementBase
+
+ サブクラスされたフィード関連の他の様々なインタフェースのベースクラス。
+
+ nsIFeedEntry
+
+ RSS あるいは Atom フィードの単一のエントリを表します。
+
+ nsIFeedGenerator
+
+ RSS あるいは Atom フィードを生成したソフトウェアを記述します。
+
+ nsIFeedPerson
+
+ 人を表します。人の名前とメールアドレス及びホームページアドレスを含んでいます。
+
+ nsIFeedProcessor
+
+ RSS と Atom フィードをパースします。
+
+ nsIFeedProgressListener
+
+ パース処理中にメッセージを受け取るために RSS あるいは Atom フィードをパースしたいプログラムによって実装されます。
+
+ nsIFeedResult
+
+ フィードのパースの結果を表現します。
+
+ nsIFeedResultListener
+
+ パースが完了したときに通知を受け取るために RSS あるいは Atom フィードをパースしたいプログラムによって実装されます。
+
+ nsIFeedTextConstruct
+
+ フィードのテキストを表します: テキストをプレーンテキストあるいは HTML でフェッチするための関数を含んでいます。
+
+ nsIScriptableUnescapeHTML
+
+ HTML 文字列をアンエスケープするためのユーティリティクラス。
+
+

例: Web からフィードを読む

+

フィードを読み込みパースすることは本当に簡単です。 フィードを読み込むために XMLHttpRequest を使い、次にフィードをパースするためにその文字列を nsIFeedProcessor に渡します。

+

フィードを読み込み、パーサにそれを渡すことはこのようなコードを使って行うことができます:

+
  fetch: function(feedUrl)
+  {
+    var httpRequest = null;
+
+    function infoReceived() {
+      var data = httpRequest.responseText;
+
+      var ioService = Components.classes['@mozilla.org/network/io-service;1']
+                                         .getService(Components.interfaces.nsIIOService);
+      var uri = ioService.newURI(feedUrl, null, null);
+
+      if (data.length) {
+        var parser = Components.classes["@mozilla.org/feed-processor;1"]
+                                        .createInstance(Components.interfaces.nsIFeedProcessor);
+        var listener = new FeedTestResultListener();
+        try {
+          parser.listener = listener;
+          parser.parseFromString(data, uri);
+        }
+        catch(e) {
+          alert("フィードのパースでエラーが発生しました。");
+        }
+      }
+    }
+
+    httpRequest = new XMLHttpRequest();
+
+    httpRequest.open("GET", feedUrl, true);
+    try {
+      httpRequest.onload = infoReceived;
+      httpRequest.send(null);
+    }
+    catch(e) {
+      alert(e);
+    }
+  }
+
+

nsIFeedProcessor インタフェースであなたはいくつかの可能なソースからフィードデータをパースできます; この場合、ドキュメントを文字列に読み込み、次に parseFromString() メソッドを使ってパースしています。しかし parseFromStream() を使ってファイルから、parseAsync() を使って直接 URL からパースすることもできます。

+

パースされたフィードの実際の処理は FeedTestResultListener オブジェクトの handleResult() を使って行われます。そのコードはこのようになります:

+
    FeedTestResultListener.prototype = {
+      handleResult: function(result) {
+        var feed = result.doc;
+
+        feed.QueryInterface(Components.interfaces.nsIFeed);
+
+        // 新しいウィンドウを開く
+
+        var win = window.open("", "FeedTest_Window");
+        var doc = win.document.wrappedJSObject;
+
+        doc.open();
+
+        // HTML ヘッダとページタイトルを書き込む
+
+        doc.write("<html><head><title>Feed: " + feed.title.text + "</title></head><body>");
+        doc.write("<h1>" + feed.title.text + "</h1><p>");
+
+        var itemArray = feed.items;
+        var numItems = itemArray.length;
+
+        // 記事の情報を書き込む
+
+        if (!numItems) {
+          doc.write("<i>便りのないのは良い便り!</i>");
+        }
+        else {
+          var i;
+          var theEntry;
+          var theUrl;
+          var info;
+
+          for (i=0; i<numItems; i++) {
+            theEntry = itemArray.queryElementAt(i, Components.interfaces.nsIFeedEntry);
+
+            if (theEntry) {
+              theUrl =
+              doc.write('<b><a href="' + theEntry.link.resolve("") + '">' + theEntry.title.text + '</a></b><br>');
+              if (theEntry.summary) {
+                info = theEntry.summary.text + "</p><hr><p>";
+              }
+              else {
+                info = theEntry.content.text + "</p><hr><p>";
+              }
+              doc.write("<blockquote>" + info);
+              doc.write("</blockquote><p>");
+            }
+          }
+        }
+
+        // ドキュメントを閉じる; 完了!
+
+        doc.write("</body></html>");
+        doc.close();
+      }
+    }
+
+

handleResult() 関数はフィードを表現している nsIFeedResult を引数として受け取ります。doc プロパティは全てのフィードデータを含んだ nsIFeed です。

+

フィードのタイトルを得るためには、feed.title プロパティを見てください。タイトルは様々なフォーマットのテキストを表す nsIFeedTextConstruct です。HTML エンコードされたテキストとしてフィードのタイトルを得るために、その text プロパティを取得します。代りに plainText() メソッドを使うことで、プレーンテキストに変換されたタイトルのコピーを得ることができます。

+

次に、feed.items nsIArray を見ることでフィードのアイテムの配列をスキャンしています。この配列はそれぞれのフィードアイテムを表す nsIFeedEntry オブジェクトを含んでいます。

+

それぞれのアイテムの title と link、summary そして content プロパティをみることでドキュメントのコンテンツを作り上げています。 link の完全なURL は link の resolve() メソッドを使うことで得ることができます。

+

フィードのフェッチを初期化するには、単に fetch( + + url + ) と呼びます。これはフィードコンテンツを含む新しいウィンドウを開ききます。それはそれぞれのアイテムのタイトル(記事自体へのクリック可能なリンクを持っています)を持っています。

+

フィードアクセスインタフェースそれぞれの詳細は、個別のリファレンスページを見てください。

diff --git a/files/ja/orphaned/findbar_api/index.html b/files/ja/orphaned/findbar_api/index.html new file mode 100644 index 0000000000..30af4fce9c --- /dev/null +++ b/files/ja/orphaned/findbar_api/index.html @@ -0,0 +1,93 @@ +--- +title: Findbar API +slug: Findbar_API +--- +

Mozilla 1.9 から検索バー機能が拡張や XULRunner アプリケーション向けに toolkit xul ウィジットとして利用可能になります。

+ +

API

+ +

findbar 要素は次のいずれかの方法で特定の browser 要素に追加されます。

+ + + +

公開メソッド

+ +
+
open
+
検索バーを開く。 +
    +
  • aMode - 使う検索モード。FIND_NORMAL か FIND_TYPEAHEAD、FIND_LINKS のどれか。指定されなければ最後の検索モードか、それもなければ FIND_NORMAL が使われます。
    • +
+
+
+ +
+
close
+
検索バーを閉じる。
+
startFind
+
検索バーを開き、検索フィールドにフォーカスをあて中身を選択します。このメソッドを呼ぶと最初に検索バーが使われるときに内容を空にします。 +
    +
  • aMode - 使う検索モード。FIND_NORMAL か FIND_TYPEAHEAD、FIND_LINKS のどれか。指定されなければ最後の検索モードか それもなければ FIND_NORMAL が使われます。
    • +
+
+
通常、ウィンドウの検索コマンドはこのメソッドにマップされるべきです。例えば
+
+ +
<command name="cmd_find" oncommand="gFindBar.startFind(gFindBar.FIND_NORMAL);"/>
+
+ +
+
onFindAgainCommand
+
ウィンドウの次を検索か前を検索にはこのメソッドを使ってください。 +
    +
  • aFindPrevious - 前を検索なら true, それ以外なら false。
    • +
+
+
+ +
+
toggleHighlight
+
ハイライトの有効/無効を切替える。 +
    +
  • aHighlight (boolean) - ハイライトを有効にするかどうか。
    • +
+
+
+ +

プロパティ

+ +
+
findMode (読み込みのみ)
+
アクティブな検索モード
+
browser
+
findbar がアタッチされる browser 要素
+
+ +

属性

+ +
+
browserid
+
検索バーがアタッチする browser 要素の id。この属性は検索バーが組み立てるときにのみ使われます。スクリプトから設定したり読み出すには browser プロパティを使うことになるでしょう。
+
+ +
アクセスキー属性
+ +

検索バーの UI 要素への標準アクセスキーは findebar.dtd で与えられれます。しかし以下の属性を使うことで上書き可能です。

+ +
+
findnextaccesskey
+
「次を検索」ツールバーボタン(toolbarbutton)のアクセスキー
+
findpreviousaccesskey
+
「前を検索」ツールバーボタン(toolbarbutton)のアクセスキー
+
highlightaccesskey
+
「ハイライト」ツールバーボタン(toolbarbutton)のアクセスキー
+
matchcaseaccesskey
+
「大文字/小文字を区別」ツールバーボタン(toolbarbutton)のアクセスキー
+
+ +

Find-as-you-type-beahavior

+ +

テーマ

diff --git a/files/ja/orphaned/html_element_cross_reference/index.html b/files/ja/orphaned/html_element_cross_reference/index.html new file mode 100644 index 0000000000..93370becb8 --- /dev/null +++ b/files/ja/orphaned/html_element_cross_reference/index.html @@ -0,0 +1,28 @@ +--- +title: HTML 要素クロスリファレンス +slug: HTML_Element_Cross_Reference +tags: + - HTML +--- +

{{ outdated() }} HTML 4.0 ではいくつかの新しい要素と属性が追加され、一部が削除、その他の要素と一部の属性は非推奨とされました。この技術ノートは、Netscape Navigator 4.x, Netscape 6, Internet Explorer 3.x-5.x, HTML 3.2 および HTML 4.0 を通しての HTML 4.0 における要素のサポートの要約です。

+

リファレンス

+

HTML 4.01 の最終的なリファレンスは次の通り:

+ +

HTML 4.0 の新しい属性

+ +

ブラウザのサポートする要素のクロスリファレンス

+

キー

+
NN4
Netscape Navigator 4.x
NS6
Netscape 6
IE3
Internet Explorer 3.x
IE4
Internet Explorer 4.x
IE5
Internet Explorer 5.x
HTML3
HTML 3.2
HTML4
HTML 4.0
+
+

クロスリファレンス表

+ +
要素               備考 非推奨の属性
A NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
ABBR   NS6         HTML4    
ACRONYM   NS6   IE4 IE5   HTML4    
ADDRESS NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
APPLET NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 ALIGN, ARCHIVE, CODE, CODEBASE, HEIGHT, NAME, OBJECT, WIDTH
AREA NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
B NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BASE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BASEFONT NN4   IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨
NS6 は未対応。{{ Bug(3875) }}参照		 COLOR, FACE, SIZE
BDO         IE5   HTML4 NS6 は未対応  
BGSOUND     IE3 IE4 IE5        
BIG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BLINK NN4                
BLOCKQUOTE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
BODY NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALINK, BACKGROUND, BGCOLOR, LINK, TEXT, VLINK
BR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   CLEAR
BUTTON   NS6   IE4 IE5   HTML4    
CAPTION NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
CENTER NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
CITE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
CODE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
COL   NS6 IE3 IE4 IE5   HTML4    
COLGROUP   NS6 IE3 IE4 IE5   HTML4    
COMMENT     IE3 IE4 IE5        
DD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
DEL   NS6   IE4 IE5   HTML4    
DFN   NS6 IE3 IE4 IE5 HTML3 HTML4    
DIR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COMPACT
DIV NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
DL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT
DT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
EM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
EMBED NN4 NS6 IE3 IE4 IE5        
FIELDSET   NS6   IE4 IE5   HTML4    
FONT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COLOR, FACE, SIZE
FORM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
FRAME NN4 NS6 IE3 IE4 IE5   HTML4    
FRAMESET NN4 NS6 IE3 IE4 IE5   HTML4    
H1 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H2 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H3 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H4 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H5 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
H6 NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
HEAD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
HR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, NOSHADE, SIZE, WIDTH
HTML NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   VERSION
I NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
IFRAME   NS6 IE3 IE4 IE5   HTML4   ALIGN
ILAYER NN4             代わりに相対位置指定の DIV に置き換え  
IMG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, BORDER, HSPACE, VSPACE
INPUT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
INS   NS6   IE4 IE5   HTML4    
ISINDEX NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 PROMPT
KBD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
KEYGEN NN4                
LABEL   NS6   IE4 IE5   HTML4    
LAYER NN4             代わりに絶対位置指定の DIV に置き換え  
LEGEND   NS6   IE4 IE5   HTML4   ALIGN
LI NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   TYPE, VALUE
LINK NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
LISTING NN4   IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
MAP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
MARQUEE     IE3 IE4 IE5        
MENU NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨 COMPACT
META NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
MULTICOL NN4                
NOBR NN4 NS6 IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
NOEMBED NN4                
NOFRAMES NN4 NS6 IE3 IE4 IE5   HTML4    
NOLAYER NN4             完全に削除  
NOSCRIPT NN4 NS6   IE4 IE5   HTML4    
OBJECT NN4 NS6 IE3 IE4 IE5   HTML4   ALIGN, BORDER, HSPACE, VSPACE
OL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT, START, TYPE
OPTGROUP   NS6         HTML4    
OPTION NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
P NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN
PARAM NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
PLAINTEXT NN4   IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
PRE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
Q   NS6 IE3 IE4 IE5   HTML4    
RT         IE5        
RUBY         IE5        
S NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
SAMP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SCRIPT NN4 NS6 IE3 IE4 IE5   HTML4    
SELECT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SERVER NN4                
SMALL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SPACER NN4                
SPAN NN4 NS6 IE3 IE4 IE5   HTML4    
STRIKE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
STRONG NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
STYLE NN4 NS6 IE3 IE4 IE5   HTML4    
SUB NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
SUP NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TABLE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   ALIGN, BGCOLOR
TBODY NN4 NS6 IE3 IE4 IE5   HTML4    
TD NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR, HEIGHT, NOWRAP, WIDTH
TEXTAREA NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TFOOT   NS6 IE3 IE4 IE5   HTML4    
TH NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR, HEIGHT, NOWRAP, WIDTH
THEAD   NS6 IE3 IE4 IE5   HTML4    
TITLE NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
TR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   BGCOLOR
TT NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
U NN4 NS6 IE3 IE4 IE5 HTML3 HTML4 HTML 4.0 で非推奨  
UL NN4 NS6 IE3 IE4 IE5 HTML3 HTML4   COMPACT, TYPE
VAR NN4 NS6 IE3 IE4 IE5 HTML3 HTML4    
WBR NN4 NS6 IE3 IE4 IE5        
XML         IE5        
XMP NN4 NS6 IE3 IE4 IE5 HTML3   HTML 4.0 から削除  
+
+

原文書情報

+
  • 著者: Bob Clary, Netscape Communications
  • 最終更新日: Published 01 Jul 2001
  • 著作権情報: Copyright © 2001-2003 Netscape.
  • 補足: This reprinted article was originally part of the DevEdge site.
    • +
+
+

{{ languages( { "en": "en/HTML_Element_Cross_Reference", "es": "es/Referencia_cruzada_de_elementos_HTML", "pl": "pl/Wsparcie_przegl\u0105darek_dla_element\u00f3w_HTML" } ) }}

+
diff --git a/files/ja/orphaned/installing_extensions/index.html b/files/ja/orphaned/installing_extensions/index.html new file mode 100644 index 0000000000..6fa4a82bdb --- /dev/null +++ b/files/ja/orphaned/installing_extensions/index.html @@ -0,0 +1,53 @@ +--- +title: 拡張機能のインストール +slug: Installing_extensions +tags: + - Add-ons + - Extensions +--- +

{{ Gecko_minversion_header(1.9) }}

+

toolkit ベースのアプリケーション（Firefox やその他の XULRunner を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所はレジストリを使って拡張機能をインストールする方法も利用できます。

+

現在、Mac OS X および Linux においては、ユーザのコンピュータ内のあらかじめ決められた位置のディレクトリに拡張機能をコピーするだけでよいです。

+

この方法を通じてインストールされた拡張機能については、新しく作成された物・既に存在していた物を問わず、そのアプリケーションのすべてのプロファイルに対してインストールされる事に注意してください。

+

Windows

+

拡張機能を特定のユーザに対してだけインストールする場合は、ユーザのアプリケーションディレクトリ内の以下の位置にファイルを置いてください：

+
C:\Documents and Settings\Dave\Application Data\<vendor>\Extensions\<appid>
+
+

Mac OS X

+

拡張機能をその Mac OS X を使用しているすべてのユーザに対してインストールするのであれば、ファイルを以下の位置にコピーしてください：

+
/Library/Application Support/<vendor>/Extensions/<appid>
+
+

拡張機能を特定のユーザに対してだけインストールする場合は、ユーザのライブラリフォルダ内の以下の位置に置いてください：

+
~/Library/Application Support/<vendor>/Extensions/<appid>
+
+

Linux

+

拡張機能をその Linux を使用しているすべてのユーザに対してインストールするのであれば、ファイルを以下の位置にコピーしてください：

+
/usr/lib/<vendor>/extensions/<appid>
+
+

または、

+
/usr/lib64/<vendor>/extensions/<appid>
+
+

または、

+
/usr/share/<vendor>/extensions/<appid>
+
+

拡張機能を特定のユーザに対してだけインストールする場合は：

+
~/.<vendor>/extensions/<appid>
+
+

アクセス

+

あなたは、XPI ファイルを上記のディレクトリにドラッグ＆ドロップする方法と、XPI ファイルの内容をその拡張機能の id の名前のフォルダの中に展開する方法のどちらも利用できます。

+

拡張機能をフォルダに展開しない（XPI ファイルのまま置く）場合は：

+ +

展開された拡張機能は暗黙的に、ユーザの権限に関わらずすべてのユーザに対してインストールされます。

+

例

+

例えば、Firefox 用のプラグインを含む Mac OS X 用のスタンドアロンのアプリケーションを作った場合、あなたが作るインストーラは拡張機能を（もしそのフォルダが存在していないのであれば作成して）以下のフォルダにコピーすることになるでしょう：

+
/Library/Application Support/Mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+
+

"{ec8030f7-c20a-464f-9b0e-13a3a9e97384}" は Firefox のアプリケーション ID です。

+

次に、拡張機能の XPI ファイルをそのディレクトリにコピーするか、unzip コマンドでその拡張機能の id の名前のフォルダの中に XPI の内容を展開します：

+
/Library/Application Support/Mozilla/Extensions/{ec8030f7-c20a-464f-9b0e-13a3a9e97384}/{dba45d40-f69e-11dc-95ff-0800200c9a66}
+
+

"{dba45d40-f69e-11dc-95ff-0800200c9a66}" はその拡張機能の id です。

diff --git a/files/ja/orphaned/installing_extensions_and_themes_from_web_pages/index.html b/files/ja/orphaned/installing_extensions_and_themes_from_web_pages/index.html new file mode 100644 index 0000000000..4f6f1a4e3e --- /dev/null +++ b/files/ja/orphaned/installing_extensions_and_themes_from_web_pages/index.html @@ -0,0 +1,70 @@ +--- +title: Web ページから拡張機能とテーマをインストールする +slug: Installing_Extensions_and_Themes_From_Web_Pages +tags: + - Add-ons + - Extensions + - Themes +--- +

 

+

拡張機能 と テーマ を Web ページからインストールするには、XPI ファイルに直接リンクしたり、InstallTrigger オブジェクトを使用するなど様々な方法があります。

+

拡張機能と Web ページの作者はユーザに対して最高の経験を提供するように、以下にかかれた方法で XPI をインストールできるようにすることを奨励します。

+

Web スクリプトの例

+
<script type="application/x-javascript">
+<!--
+function install (aEvent)
+{
+  var params = {
+    "Foo": { URL: aEvent.target.href,
+             IconURL: aEvent.target.getAttribute("iconURL"),
+             Hash: aEvent.target.getAttribute("hash"),
+             toString: function () { return this.URL; }
+    }
+  };
+  InstallTrigger.install(params);
+
+  return false;
+}
+-->
+</script>
+
+<a href="http://www.example.com/foo.xpi"
+  iconURL="http://www.example.com/foo.png"
+  hash="sha1:28857e60d043447c5f4550853f2d40770b326a13"
+  onclick="return install(event);">拡張機能をインストール!</a>
+
+

それでは、一つずつ見ていきましょう。HTML の <a> タグはインストールリンクです。href 属性は拡張機能の XPI ファイルへ直接リンクしており、リンクをマウスでポイントしたときにリンク先がロケーションバーに表示されます。ユーザは、リンクを右クリックして "名前を付けてリンク先を保存..." を選び、簡単に XPI ファイルを保存することができます。

+

リンクがクリックされると install 関数が呼び出され、パラメータがイベントオブジェクトに渡されます。

+

install 関数は、はじめにパラメータブロックを作成します:

+
var params = {
+  "Foo": { URL: aEvent.target.href,
+           IconURL: aEvent.target.getAttribute("iconURL"),
+           Hash: aEvent.target.getAttribute("hash"),
+           toString: function () { return this.URL; }
+};
+
+

これは、確認ダイアログで使用するディスプレイ名(Foo) および拡張機能への URL(href で再び呼び出されるリンク)、確認ダイアログで表示するためのアイコンへの URL(IconURL)、xpi ファイルコンテンツの(改変されたダウンロードを防ぐための)ハッシュ、このコードを Firefox 0.8 以前で動作させるための toString 関数を指定しています。また、確認ダイアログで使用するアイコンが無いときなど、古いスタイルのパラメータブロック({ "Foo": aEvent.target.href }) を使用することもできます。

+

InstallTrigger.install は拡張機能をインストールするときにパラメータブロックと共に呼び出されます。

+
return false;
+
+

この最後の部分は最も重要です。リンクをクリックしてスクリプトが実行されリンク先が見つからないとき、install 関数は false を返さなくてはなりません。この手順を省略した場合、ユーザは二つのインストールダイアログを見ることになります。実際、インストールを二度要求されます)。一つは InstallTrigger によって、もう一つはXPI ファイルを直接読み込もうとすることによってです。

+

インストールオブジェクトに利用可能なパラメータ

+

InstallTrigger.install メソッドは、オブジェクトのインストール時に使用される、いくつかのプロパティを持つ JavaScript オブジェクトをパラメータとして受け入れます。

+

URL

+

URL プロパティは、インストールする XPI ファイルの URL を指定します。このプロパティは必須です。

+

IconURL

+

IconURL プロパティは、インストールダイアログ内に表示されるアイコンを指定します。このプロパティは任意です。アイコンを指定ない場合は、デフォルトのアイコン(普通は緑色のパズルピース) が使用されます。アイコンは Firefox でサポートされた画像形式で、32×32 ピクセルの大きさにします。

+

Hash

+

Hash プロパティは XPI ファイルコンテンツのハッシュ値を指定します。これはダウンロードしたファイルを検証し、例えば、ミラーサーバによって改変されたファイルが供給されるのを防ぐために使用されます。nsICryptoHash によってサポートされた任意のハッシュ関数を使用することができます。ハッシュ値は hash function:hash value の書式で、例えば、sha1:28857e60d043447c5f4550853f2d40770b326a13 のように指定します。

+

toString()

+

toString() プロパティは、Firefox 1.0 よりも古いバージョンとの互換性のため、またSeamonkey などの他のアプリケーションのために、XPI ファイルの URL を返すべきです。

+

テーマ

+

テーマの適用については、installChrome 関数の使用を除き、ほとんどすべてのことを書きました。多くのサイトは拡張機能のインストールを、XPI ファイルに直接リンクしてインストールの確認 UI を表示する方法に頼っており、また多くのサイトがテーマの JAR ファイルも同様の (正しくない) 方法でインストールしようとするため、なぜ自動的に検出されインストールされないのか不思議に思っています。XPI ファイルは Mozilla 仕様の拡張なので特別にそれを扱うことができますが、JAR ファイルはそうではありません。すべての .jar ファイルが Firefox のテーマではないため、.jar ファイルへのリンクをクリックしても、名前を付けて保存ダイアログが表示されるだけです。そういうわけで、テーマのインストールにはいつも InstallTrigger API を使用しなければなりません。

+

updateEnabled() についての注意

+

InstallTrigger は、InstallTrigger.install を呼び出す前に updateEnabled 関数を呼び出します。これは updateEnabled 自身が内部で呼び出されるため、インストールには必要ありません。さらに、あなたの配布サイトがユーザのホワイトリストに無い場合、 updateEnabled を呼び出すことによって問題を起こすかもしれません。Firefox はインストール時や installChrome が呼び出されたとき、XPI ファイルが読み込まれたときに "インストール拒否" メッセージだけを表示します。次のようなコードが含まれ、あなたのサイトがホワイトリストに無い場合:

+
if (InstallTrigger.updateEnabled())
+  InstallTrigger.install({"Foo": "foo.xpi"});
+
+

ユーザがこのコードを呼び出すと、updateEnabled は false を返します。updateEnabled はあなたのサイトがホワイトリストに無いことを見つけ、ユーザに何の通知もせず、インストールを呼び出しません。

+

従って updateEnabled は、ソフトウェアのインストールが無効になっていること、またはあなたのサイトがホワイトリストに無いことを知らせる内容をページに表示するためだけに使用するべきです。また、ホワイトリストのインストールコードパスにはあなたのサイトを含めないでください。

+

(* ぜひとも、より大掛かりなインストールシステムの開発を止めようとはしないでください。私は、より多くの拡張機能の配布者が様々なケースでこれらを扱うことができるようにするためのガイドとして、このドキュメントを提供しています。)

diff --git a/files/ja/orphaned/introduction_to_dom_inspector/index.html b/files/ja/orphaned/introduction_to_dom_inspector/index.html new file mode 100644 index 0000000000..441c8ba049 --- /dev/null +++ b/files/ja/orphaned/introduction_to_dom_inspector/index.html @@ -0,0 +1,38 @@ +--- +title: DOM Inspector 入門 +slug: Introduction_to_DOM_Inspector +--- +

DOM Inspector はブラウザの Tools > Web Development メニューからアクセスできる Mozilla のアプリケーションです。これはウェブ開発者が DOM 全体を見たり、必要なら手動で DOM を更新したりできるようにします。

+
注意: Firefox 3 以降、DOM Inspector はデフォルトインストールには含まれなくなりました。替わりに、Mozilla add-ons サイトから ダウンロードしてインストールする 必要があります。
+

DOM Inspector を最初に起動すると、Mozilla ブラウザに似た2ペインのアプリケーションウィンドウが開きます。ブラウザのように DOM Inspector は URL バー、サイドバー（左ペイン）、メニューを持ち、Window や Tools メニューは Mail や Chatzilla やその他の小さな拡張機能やダイアログのようなブラウザスイートのメインアプリケーションへのアクセスを提供します。

+

empty DOM Inspector

+

DOM Inspector を開始する

+

DOM Inspector の利用を開始するには、以下の3つのうちのひとつを行います:

+

File > Inspect a Window >

+

Inspect a Window メニュー項目の右に表示されているサブメニューは現在ロードされている DOM ウィンドウのリストです。おそらくブラウザウィンドウと DOM Inspector はすでに開かれており、このリストに表示されます。DOM Inspector は — DOM として認識される — 開かれているすべてのウィンドウを追跡します。そのため、DOM Inspector で特定のウィンドウの DOM にアクセスするには、単に DOM Inspector アプリケーションの中で動的に更新されるリストからウィンドウを選択するだけです。例えば、Mail ウィンドウの DOM を調べるには、Mail を開き、DOM Inspector に戻って File > Inspect a Window > Inbox for yourname@yourdomain.com を選択します。

+

+

File > Inspect a URL...

+

URL から任意のウェブページの DOM を調べることが出来ます。この二つ目のメニューアイテムを使用して URL を入力し、DOM Inspector にページの DOM をロードします。アプリケーションそのもののドキュメントオブジェクトモデルを表示するウィンドウの DOM とは対照的に、この "文書" の DOM は最上位の <HTML> タグから始まるウェブページの構造を示します。このメニュー項目を使うには、例えば、www.brownhen.com を入力すると brownhen のインデックスページの DOM を見ることが出来ます。

+

DOM of a Web Page

+

Ctrl + Shift + I キーショートカット

+

最後に、Ctrl + Shift + I ショートカットキーは現在ロードしているページの DOM で DOM Inspector を開始します。例えば、Mozilla で www.cnn.com ウェブサイトを読んでいてこのキーをタイプすると、DOM Inspector はページの DOM をロードしその構造を Inspector アプリケーションウィンドウに表示します。

+

DOM Inspector が DOM をロードすると、左ペインに DOM の構造化された階層ビューを、右ペインに選択したノードの情報（属性とその値など）を表示します。

+

加えて、ウェブページの DOM を表示している間、DOM Inspector の下半分にウェブページが表示されます。

+

+

これは DOM Inspector を独立したブラウザウィンドウを持つことなく利用することが可能になり、選択したノードが DOM Inspector によりページ内でハイライト表示されるのを見るのが容易になります。（最近の Firefox 版では DOM Inspector ウィンドウ内でのウェブページ表示は行われずに、Firefox 内でハイライト表示されます。） DOM Loaded in DI

Using the DOM Inspector

+

Once you have the DOM of the page or chrome you are interested in, you can use the tree view in the left pane of the DOM Inspector to find and inspect aspects of that DOM you are interested in. One of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to find the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. One common use of the DOM Inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. As you select parts of the DOM in the left pane of the DOM Inspector, the rendered versions of those nodes are highlighted in the user interface itself. If you inspect the main browser window, for example, and select nodes in the right pane (other than the endless list of script elements that are loaded into navigator.xul and that have no visible UI), you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from largest parts (e.g., the statusbar element that sits at the top-level of the navigator DOM) to smallest parts, such as the "mini-mail" icon that lets users access the Mail application from the bottom left corner of the browser window.

+

DOM Inspector Information Types

+

When you have selected a node like the "mini-mail" node, you can select any one of several types of information to display about that node in the right pane of the DOM Inspector application window, all of which are available from the pull-down menu in the upper left corner of the right pane. In order to find out what the actual name of the file is being used to provide the small mail icon, you can select CSS Style Rules from this menu and see the various selectors and rules that have been applied for those selectors. The rule that applies the mail icon to the "mini-mail" element is ID-based (since the icon is unique to the mail item in the taskbar), and uses a list-style-image property to point to a file in the theme JAR. That file turns out to be a GIF located at: chrome://commmunicator/skin/taskbar/mail.gif. The list of types available from this pull-down menu gives you some idea about how extensive the DOM Inspector's inspecting capabilities are. The following table provides an overview of what these sets of information are about:

+
+ +
DOM Node The default view. DOM Node shows the structural DOM representation of the given page or chrome.
Box Model The box model is the layout system of Mozilla's application interface. box elements

use stretchiness, flexibility, and nesting to achieve table-like layout capabilities in XUL documents. This view shows how boxes and these layout attributes are used to position elements within the interface.
XBL Bindings XBL is a language that allows you to build extensions in XUL and HTML. Where XBL bindings

are loaded into documents by means of CSS rules, this view lets you inspect them.
CSS Style Rules This view shows you all of the CSS rules that are applied to the selected nodes.
Computed Style

The computed style of an element is all of the style rules that get applied to that element, whether from explicit style declarations, from script, or from inheritance. The computed style view of an element's style rules gives you a long, flat list of rules that you can inspect and {{ mediawiki.external('#update update') }} if you wish.
JavaScript Object This view shows you all of the JavaScript objects that are used to script and manipulate a given

node. Common examples of JavaScript objects are target objects that are used to trap and get information about events fired in the interface.
+
+

Selecting Elements in a User Interface

+

Another powerful interactive feature of the DOM Inspector is that it can display the subtree of any element in any DOM it has loaded. In other words, when you have the DOM Inspector open and have enabled this functionality by choosing Search > Select Element by Click or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application, you can click anywhere in a loaded web page or the chrome of the Mozilla application interface, and the element you click will be threaded into the left pane and information about it displayed in the right.

+

Searching for Nodes in the DOM

+

Another way to inspect the DOM is to search for particular elements you're interested in by ID, class, or attribute. When you select Search > Find Nodes... or press Ctrl + F, the DOM Inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <F3> shortcut key.

+

Updating the DOM Dynamically

+

A final feature to mention in this introduction is the ability is the ability the DOM Inspector gives you to dynamically update information reflected in the DOM about web pages, user interface, and other elements. Note that when the DOM Inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the DOM, attributes are subnodes of elements, typically) in an active, sortable list. You can right-click individual items in this list and be presented with a context menu that lets you edit the values of those attributes. For example, table elements are often used to layout elements in a web page, but when something goes wrong it can be difficult to find the offending cell, especially when tables are nested several deep, as they often are on complicated web pages. You can use this dynamic editig capability of the DOM Inspector to set tables aside (i.e., by changing their background color, adding a border, and so on). This interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.

+

Loving the Inspector

+

The DOM Inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. The DOM Inspector not only presents all this information about pages in a clear and structured way, it gives you way to find and update those structures, and it's simple to access via shortcuts and menus already available in the Mozilla browser. Used in concert with Mozilla tools like Venkman, the JavaScript debugger, the DOM Inspector can give you a complete view of any web page or DOM-based application interface. It's become an ordinary tool in my own web page development and even my normal browsing—where I see a page that looks like it's been put together in some interesting way and I hit Ctrl + Shift + I to look at the DOM of the page, interesting CSS rules the author has used to present the page, or other, sometimes hidden information about that document.

+

{{ languages( { "en": "en/Introduction_to_DOM_Inspector"} ) }}

diff --git a/files/ja/orphaned/javascript_modules/index.html b/files/ja/orphaned/javascript_modules/index.html new file mode 100644 index 0000000000..83ccb1849e --- /dev/null +++ b/files/ja/orphaned/javascript_modules/index.html @@ -0,0 +1,25 @@ +--- +title: JavaScript modules +slug: JavaScript_modules +tags: + - Firefox 3 + - JavaScript + - 'XPCOM:Language Bindings' + - XPConnect +--- +

{{ Fx_minversion_header(3) }} +

Firefox 3 で、外部モジュールから JavaScript コードをインポートする簡単な方法を提供する、新しい Components.utils.import() メソッドが導入されました。JavaScript モジュールの作成と 使い方 に関する情報を参照してください。JavaScript モジュールは、拡張機能では共有データ に利用することもできます。 +

モジュールのインポートに関しては、この方法が利用できるほか、Firefox 3 にはあらかじめ 2 つのモジュールが組み込まれています。 +

+
XPCOMUtils +
XPCOMUtils.jsm モジュールは、JavaScript コンポーネントローダーによって読み込まれる、JavaScript コンポーネントのためのユーティリティを提供します。 +
JSON +
JSON.jsm モジュールは、JSON データを操作するためのユーティリティを提供します。 +
PluralForm +
PluralForm.jsm モジュールは、複数のローカライゼーションで複数形の単語を正しく扱うためのツールを提供します。 +
+


+

+
+
+{{ languages( { "en": "en/JavaScript_modules", "es": "es/M\u00f3dulos_JavaScript", "fr": "fr/Modules_JavaScript", "pl": "pl/Modu\u0142y_JavaScript" } ) }} diff --git a/files/ja/orphaned/javascript_presentations/index.html b/files/ja/orphaned/javascript_presentations/index.html new file mode 100644 index 0000000000..bcf4b5f3fe --- /dev/null +++ b/files/ja/orphaned/javascript_presentations/index.html @@ -0,0 +1,16 @@ +--- +title: JavaScript Presentations +slug: JavaScript_Presentations +tags: + - JavaScript + - Presentations +translation_of: JavaScript_Presentations +--- +


+

+
JavaScript 2 and The Open Web +
2007-11-20, Brendan Eich +
+
+
+{{ languages( { "en": "en/JavaScript_Presentations" } ) }} diff --git a/files/ja/orphaned/jetpack/ui/slidebar/index.html b/files/ja/orphaned/jetpack/ui/slidebar/index.html new file mode 100644 index 0000000000..24fb7def9e --- /dev/null +++ b/files/ja/orphaned/jetpack/ui/slidebar/index.html @@ -0,0 +1,24 @@ +--- +title: Slidebar +slug: Jetpack/UI/Slidebar +--- +

About

+ +

新しいslideBar インスタンスの作成と関連するオプション
+

+
jetpack.slideBar.append( options );
+
jetpack.selection.onSelection( fn );
+

引数
+options: あなたのslideBarインスタンスに特定の修正を加えたオブジェクト。

+

{
+  icon - uri - SlideBar内で見せるアイコンのhref
+  html - text/xml - 機能のためのhtml コンテンツ
+  url - uri - コンテンツをロードするためのurl
+  width - num - コンテンツエリアと選択したスライドサイズの横幅
+  persist - bool - 選択された時のデフォルトのslideの動作
+  autoReload - bool - 選択された時にコンテンツを自動的にリロードするか
+  onClick - func - アイコンがクリックされた時のcallback関数
+  onSelect - func - 機能が選択された時のcallback関数
+  onReady - func - 機能がロードされた時のcallback関数
+}

diff --git "a/files/ja/orphaned/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" "b/files/ja/orphaned/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" new file mode 100644 index 0000000000..c95caa0b18 --- /dev/null +++ "b/files/ja/orphaned/jetpack/\343\202\267\343\202\271\343\203\206\343\203\240/index.html" @@ -0,0 +1,7 @@ +--- +title: システム +slug: Jetpack/システム +--- +
注意！：このようなページ（英語版に対応する日本語名のページ）を作らないでください！（このページは見本として保存するためにロックされています）
+
クリップボード
OSのクリップボードを使う
システムの情報
Jetpackが動作しているプラットフォームの情報を取得する
視覚効果
OSレベルの視覚効果を使う
デバイス
デバイスへのアクセスとコントロール (ex. iPod, Zune, 携帯電話, USBデバイス)
+
diff --git a/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html b/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html new file mode 100644 index 0000000000..8091563161 --- /dev/null +++ b/files/ja/orphaned/key-navigable_custom_dhtml_widgets/index.html @@ -0,0 +1,115 @@ +--- +title: キー操作可能なカスタム DHTML ウィジェット +slug: Key-navigable_custom_DHTML_widgets +tags: + - AJAX + - Accessibility + - DHTML +--- +

 

+ +

課題: 今日の DHTML パッケージはキーボードアクセシビリティが欠けている

+ +

増加傾向にあるウェブアプリケーションは、JavaScript を使用してメニューやツリービュー、リッチテキストフィールド、タブパネルなどのようなデスクトップウィジェットを模倣しています。Web 開発者は絶えず表計算やカレンダー、構造図などのような対話的な要素を取り入れ、新たなアプリケーションは複雑化しています。現在まで、Web 開発者はスタイル付けられた <div> や <span> を基にして、正しい技術を欠いたウィジェットをキーボードで利用できるようにしようとしています。しかしながら、キーボードアクセシビリティは Web 開発者が知っておくべき最小限必要なアクセシビリティの一部でしかありません。

+ +

実例を挙げると、ほとんどの DHTML メニューは、キーボードアクセスを尊重した正規のメニューのようには動作しません。キーボードでとにかくメニューを利用できるようにする場合によくある共通の間違いは、各メニュー項目(<a> 要素を使用して作られます) をタブ移動の順番に含めてしまうことです。実際のメニューの正しい振る舞いは、一度でメニュー全体にタブ移動でき、矢印キーによる操作でメニュー項目からメニュー項目へと移動できるようになっていなければなりません。これはツリービューやグリッド、タブパネルなど、その他の "グループ化された操作" にも当てはまります。

+ +

HTML 作者にとっては今すぐできる正しいことです。これらのウィジェットを支援技術との互換性を持たせるためのドキュメントは、ARIA: Accessible Rich Internet Applications 以下にあります。

+ +

解決法: tabindex の振る舞いを標準準拠にする

+ +

Firefox 1.5 は、Microsoft Internet Explorer が先導する tabindex 属性を拡張することにより、どの要素でもフォーカスできるように変更しています。IE システムの tabindex によれば、私たちは、すでに IE でキーボード操作できるようになっているDHTML ウィジェットを Firefox 1.5 でもキーボードで操作できるようにしています。作者がカスタムウィジェットをキーボードで操作できるようにする手段をもつために、ルールは曲げられるべきです。

+ +

続く表は、新しい tabindex の振る舞いについて記述しています:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tabindex 属性マウスまたは element.focus() を用いた JavaScript でフォーカスタブ操作
なし既定の要素の振る舞いに従う。(フォームコントロールやリンクなどについては可)既定の要素の振る舞いに従う。
負の値 (例: tabindex="-1")可不可。作者は矢印キーか他のキーの押下によって element.focus() でフォーカスしなければいけません。
0 (例: tabindex="0")可タブで移動する順番は、要素のドキュメント内の位置によります。
正の値 (例: tabindex="33")可tabindex の値は、要素の位置にタブで移動する順番を手動で変更します。これらの要素へ移動する順番は、tabindex="0" を持つ要素か、そのままタブで移動できる要素の前に位置します。
+ +

新しいシステムの使い方

+ +

タブで操作できる簡単なウィジェットを作成するには、tabindex="0" を <div> または <span> 上に使用してください。span を基にしたチェックボックス の例は Firefox 1.5 と IE の両方で、キーボードで利用できます。(ただし、チェックボックス画像の :before ルールは IE で動作しません)

+ +

メニューやタブパネル、グリッド、ツリービューなど、ウィジェットの集まりの親要素は tabindex="0" を持つべきです。また、選択肢/タブ/セル/行の子孫要素は tabindex="-1" を持つべきです。element.focus() を使用して矢印キーを観察する onkeydown イベントは、適切な子孫ウィジェットにフォーカスをセットして呼び出すことができるため、フォーカスすることができます。DHTML ツリービュー の例は Firefox の nightly ビルド上で、キーボードとスクリーンリーダで利用できます。(IE 上でも動作します)

+ +

これはまだ W3C やその他の公式な標準の一部ではありません。しかし今は、完全にキーボードで利用できるようにするためにルールを曲げる必要があります。

+ +

作成時のヒント

+ +

onfocus を使用して現在のフォーカスを追跡する

+ +

onfocus イベントおよび onblur イベントは、すべての要素で使用することができます。現在のドキュメントのフォーカスを得るための 標準的な DOM インタフェースが無いため、これを追跡し続けるには JavaScript の変数を使用します。

+ +

すべてのフォーカス変更はキーイベントとマウスイベントによってのみ起こるとは仮定しないでください。スクリーンリーダなどの支援技術はフォーカスを任意のフォーカス可能な要素にセットすることができ、それらが JavaScript ウィジェットによって的確に扱われる必要があります。

+ +

tabIndex プロパティを使用してフォーカス可能性を動的に変更する

+ +

カスタムコントロールが無効なった場合にはフォーカスできなくし、有効になった場合にはフォーカスできるようにしたいはずです。無効になったコントロールにタブで移動するべきではありません。しかしながら、それらが操作ウィジェットの集まりの一部である場合はタブで移動できるようにします。

+ +

element.focus() と setTimeout を使用してフォーカスをセットする

+ +

要素にフォーカスを移すために createEvent() および initEvent(), dispatchEvent() を使用してはいけません。DOM フォーカスイベントは、何かがフォーカスされた後にシステムによって発生しますが、フォーカスのセットには使用されません。タイムアウトは、ユーザがボタンやその他のコントロールをクリックして予期しない動作を起こすスクリプトを防ぐために、IE と Firefox 1.5 の両方で必要です。要素をフォーカスする実際のコードは以下のようになります:

+ +
window.setTimeout(function () { focusItem.focus(); },0);  // focusItem はスコープ内になければいけません
+
+ +

フォーカスのスタイル付けに :focus または属性セレクタを使用してはいけません

+ +

IE でフォーカスが表れるようにしたい場合、フォーカスのスタイル付けに :focus または属性セレクタを使用することはできません。onfocus イベントハンドラ内でスタイルをセットしてください。例えば、<div> メニュー項目のフォーカスハンドラに this.style.backgroundColor = "gray"; を追加します。

+ +

プログラム的にフォーカスを受けた tabindex="-1" 項目および要素にはいつもフォーカスを描く

+ +

IE はプログラム的にフォーカスを受けた項目には自動的にフォーカスの輪郭を描きません。this.style.backgroundColor = "gray"; のようにして背景色を変更するか、this.style.border = "1px dotted invert" のように点線の境界線を追加するか、どちらかを選んでください。点線の境界線にする場合は、はじめに見えない 1px の境界線を要素に指定しておく必要があります。こうしておけば、境界線のスタイルが適用されたときに要素がずれることはありません。(境界線が空白をつくり、IE は CSS の輪郭を提供しません)

+ +

キーイベントの追跡には onkeypress ではなくonkeydown を使用する

+ +

IE は英数字以外のキーで keypress イベントを発生させることができません。

+ +

ブラウザの機能を実行するキーイベントの使用を避ける

+ +

矢印キーが使用される場合は、以下のようなコードで、キーを使用をする何か(スクロールなど) からブラウザを避けてください:

+ +
<span tabindex="-1" onkeydown="return handleKeyDown();">
+
+ +

handleKeyDown() が false を返す場合は、イベントは消費され、キー入力して実行する動作からブラウザを避けます。

+ +

キーイベントハンドラを使用して要素のアクティベーションを有効にする

+ +

すべてのマウスイベントハンドラには、キーボードイベントハンドラが必要です。例えば、onclick="doSomething()" には、この要素を Enter キーでアクティベートできるようにするために、onkeydown="return event.keyCode != 13 || doSomething();" が必要です。

+ +

try/catch を使用して JavaScript エラーを回避する

+ +

このシステムは現在、Opera および Safari、その他の Mozilla (1.7 およびそれ以前) の古いバージョンではサポートしていません。一部のブラウザは、すべての要素上のtabIndex プロパティのような新しい能力をサポートしていないため、適切な場所で try/catch を使用してください。DTHML によるキー操作システムをサポートしていないブラウザ上では、ウィジェットをマウスで利用できるようにしておくべきです。このシステムは Opera と Safari でのサポートが WHATWG 仕様を通して計画されています。

+ +

キーリピートの振る舞いは一貫していません

+ +

困ったことに、onkeydown が繰り返されるかどうかは、あなたの起動している OS に依存します。Bugzilla データベースの {{ Bug(91592) }} をご覧ください。

+ +

{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "fr": "fr/Contr\u00f4les_DHTML_personnalis\u00e9s_navigables_au_clavier" } ) }}

diff --git a/files/ja/orphaned/learn/how_to_contribute/index.html b/files/ja/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..bd269dd210 --- /dev/null +++ b/files/ja/orphaned/learn/how_to_contribute/index.html @@ -0,0 +1,86 @@ +--- +title: MDN の学習エリアに貢献するには +slug: Learn/How_to_contribute +tags: + - Beginner + - Contribute + - Documentation + - Guide + - Learn + - MDN Meta + - 'l10n:priority' +translation_of: Learn/How_to_contribute +--- +
{{LearnSidebar}}
+ +

あなたがこのページに初めて、あるいはたくさん検索した末に辿り着いたのなら、それはきっとあなたが MDN の学習エリアへの貢献に興味を持って下さったからでしょう。素晴らしいことです！

+ +

このページでは、 MDN の学習コンテンツの改良に協力し始めるのに必要となる全てが見つかるでしょう。できることはたくさんあって、それはあなたがどれくらい時間を使えるか、初心者かウェブ開発者か教師かによって決まります。

+ +
+

メモ: 学習エリアの記事を書くためのガイドは、ウェブを学習する人に役立つ記事の書き方にあります。

+
+ +

特定のタスクを探す

+ +

学習エリアに貢献する共通の方法は、記事を読み、誤字を直し、改良を提案することです。GitHub repoへのサンプル追加も、何が必要か聞きたいと思って連絡頂くのも歓迎です。

+ +

新しいことを学習するときに、貢献することは楽しめる良い方法です。道に迷った気になったり、質問があった場合は、Learning Area Discourse thread や IRC channel いずれも英語ベース (詳しくはページ最下部を見てください)。Chris Mills が Learning Area (学習エリア) のトピックドライバーです — 彼に直接 ping してもいいでしょう。

+ +

下記の節では一般的なアイデアとして、やることの種類を挙げています。

+ +

初心者の方なら

+ +

すばらしい！初心者は学習エリアの中身にフィードバックを作るのに重要かつ貴重です。あなたにはこの記事のターゲット読者の一員で、われわれのチームの貴重なメンバーになりうるという独特の視点があります。実際に、記事を何かの学習に使ってつまったり、誤解を招く記事を見かけた場合、自分で修正するか、または我々が確実に修正できるように問題点を連絡することができます。

+ +

次のように、貢献できるいくつかの方法があります:

+ +
+
記事にタグを追加する (5分)
+
MDN のコンテンツをタグ付けするのは、 MDN に協力する最も簡単な方法です。タグによって状況にあわせた機能を提供できるようになるため、タグ付けはとても意味ある貢献です。タグ付けを始める前に、用語集の記事と学習記事の一覧をご覧ください。
+
用語集の記事を読んでレビューする (5分)
+
コンテンツを初心者の目線で見てもらう必要があります。用語集の記事に分かりにくい箇所があれば改善が必要なため、気軽に変更してください。自分には必要なスキルが無いと感じたら、私たちのメーリングリストに連絡してください。
+
用語集の記事を書く (20分)
+
これは新しいことを学ぶ最良の方法です。理解したい概念を選び、それについて学んだら、用語集の記事を書きましょう。何かを他人に説明することは、頭の中で知識を「定着」させ、物事を自分自身で良く理解できるようになり、さらに他人のために役立ちます。みんなが得をします！
+
学習記事を読んでレビューする (2時間)
+
これは用語集の記事のレビューとよく似ています（上記参照）。こういった記事は通常かなり長いため、より時間を要するだけです。
+
+ +

ウェブ開発者なら

+ +

素敵です！あなたの技術スキルは、初心者向けの技術的に正確なコンテンツを提供するために、まさに我々が必要としているものです。ここは MDN の特定の箇所としてウェブの学習専用であり、説明はできるだけ簡潔であり、簡潔すぎて役立たないのは避けないといけません。過度に正確であることよりも、理解できることがもっと重要です。

+ +
+
用語集の記事を読んでレビューする (5分)
+
ウェブ開発者であるあなたには、私たちのコンテンツが複雑になりすぎずに技術的に正確であるかを確認していただく必要があります。必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は、私たちのメーリングリストまたは IRC channelでコンタクトしてください。
+
用語集の記事を書く (20分)
+
技術的な専門用語を明確にすることは、学習するのと、技術的に正確かつシンプルであるためのとても良い方法です。初心者からは感謝されるでしょう。注目すべき未定義の用語がたくさんあります。都合が良いものを選んでください。
+
学習記事を読んでレビューする (2時間)
+
これは用語集の記事のレビュー（上記）と同じことです。この記事は少し長い時間がかかるだけです。
+
新しい学習記事を書く (4時間以上)
+
MDN には、ウェブ技術（HTML, CSS, JavaScriptなど）についてのシンプルで直言的な記事が欠けています。また MDN にはレビューや作り直しをするべき古いコンテンツもあります。あなたのスキルの限界までふりしぼって、ウェブ技術が初心者でも使えるようにしてください。
+
練習、コードサンプル、インタラクティブな学習ツールの作成 (?時間)
+
全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、 JSFiddle や同等品でコードサンプルを作ることから、Thimble で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！
+
+ +

教師なら

+ +

MDN は技術的な卓越性において長い歴史がありますが、新人に概念を教える最良の方法についての理解は十分ではありません。ここは教師・教育者であるあなたを必要とするところです。私たちの教材が読者にとって優れた、実践的な学びの道筋を提供できるよう手助けできます。

+ +
+
用語集の記事を読んでレビューする (15分)
+
用語集の記事を確認して、必要に応じて気軽に変更を加えてください。編集の前に内容を議論したい場合は私たちのメーリングリストまたは IRC channelでコンタクトしてください
+
用語集の記事を書く (1時間)
+
用語集にて、明確でシンプルな言葉の定義と、概念の基本的な説明は、初心者の要求を満たすのに重要です。教育者としての経験がすばらしい用語集の記事の作成に役立ちます。注目すべき未定義の用語がたくさんあります。都合が良いものを選んでください。
+
記事のイラストや図を描く (1時間)
+
ご存知のように、イラストはあらゆる学習コンテンツの中で有益な部分です。これは MDN でよく不足しているもので、あなたのスキルがそのエリアを違ったものにします。図示コンテンツが不足している記事を確認して、絵を作りたいものを選びます。
+
学習記事を読んでレビューする (2時間)
+
これは用語集の記事（上記）のレビューと同じことです。この記事は少し長い時間がかかるだけです。
+
新しい学習記事を書く (4時間)
+
ウェブのエコシステムとその周りの機能的なトピックについてのシンプルで直言的な記事が必要です。学習記事では知るべきことを全て網羅するよりも、教育的である必要があるため、何をどのように網羅すべきかを知っているあなたの経験は良い資産になるでしょう。
+
練習、クイズ、インタラクティブな学習ツールの作成 (?時間)
+
全ての学習記事は「アクティブラーニング」と呼ぶ記事を必要としています。その理由は人は自分で何かやってみるのが学ぶのに最良だからです。この素材は、ユーザーが記事に述べられる概念を適用・操作するのを助ける、練習やインタラクティブコンテンツです。アクティブラーニングのコンテンツを作るには多数の方法があり、クイズを作ることから、Thimble で完全にハック可能なインタラクティブコンテンツを作ることまであります。創造性を解き放って！
+
+
学習の進路を作る (?時間)
+
進歩的で理解できるチュートリアルを提供するため、コンテンツを学習進路に形付ける必要があります。既存のコンテンツを集めて、学習記事を作成するのに何がたりないか理解するのに良い方法です。
+
diff --git a/files/ja/orphaned/learn/html/forms/html5_updates/index.html b/files/ja/orphaned/learn/html/forms/html5_updates/index.html new file mode 100644 index 0000000000..abf99e2af7 --- /dev/null +++ b/files/ja/orphaned/learn/html/forms/html5_updates/index.html @@ -0,0 +1,46 @@ +--- +title: Forms in HTML5 +slug: Web/HTML/Forms_in_HTML +translation_of: Learn/HTML/Forms/HTML5_updates +--- +

{{ gecko_minversion_header("2") }}

+

HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。

+

このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。

+

<input> 要素

+

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。

+ +

{{ HTMLElement("input") }} 要素には新しい属性も追加されています。

+

<form> 要素

+

{{ HTMLElement("form") }} 要素に新しい属性が追加されました。

+ +

<datalist> 要素

+

{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。

+

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。

+

<output> 要素

+

{{ HTMLElement("output") }} 要素は計算結果を表示します。

+

{{ htmlattrxref("for", "output") }} 属性を使って、output 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。

+

{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。

+

placeholder 属性

+

{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。

+

autofocus 属性

+

{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。autofocus 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、{{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が hidden を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。

+

label.control DOM プロパティ

+

HTMLLabelElement DOM インターフェースは HTML の {{ HTMLElement("label") }} 要素が持つ属性に加えて、新しいプロパティを備えています。control プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。

+

フォーム検証

+

HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。

+

{{ HTMLElement("input") }} 要素に title 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは setCustomValidity() メソッドで指定) が使用されます。

+
Note: フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。
+

フォーム検証の HTML 構文

+

次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。

+ +

{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に submit もしくは image を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。

+

フォーム検証 API

+

次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。

+ +

{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}

+

{{ HTML5ArticleTOC() }}

diff --git a/files/ja/orphaned/localizing_extension_descriptions/index.html b/files/ja/orphaned/localizing_extension_descriptions/index.html new file mode 100644 index 0000000000..f4deda0606 --- /dev/null +++ b/files/ja/orphaned/localizing_extension_descriptions/index.html @@ -0,0 +1,92 @@ +--- +title: Localizing extension descriptions +slug: Localizing_extension_descriptions +tags: + - Add-ons + - Extensions + - Internationalization + - Localization +--- +

 

+

Gecko 1.9 におけるローカライズ

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、em:localized プロパティを使って install.rdf ファイルに書かれます。em:localized それぞれが、情報が使われるべきロケールを示す em:locale プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。

+
<?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>TabSidebar@blueprintit.co.uk</em:id>
+    <em:localized>
+      <Description>
+        <em:locale>de-DE</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>es-ES</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Muestra una vista previa de sus pestañas en su panel lateral.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>nl-NL</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description>
+      </Description>
+    </em:localized>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Displays previews of your tabs in your sidebar.</em:description>
+  </Description>
+</RDF>
+
+

後で述べるメタデータはすべてこの方法でローカライズできます。em:localized プロパティによって提供されるローカライズ情報は、後述の一連のローカライズされたプロパティファイルで上書きされます。

+

あるロケールに対してどの em:localized プロパティを使用するかを選択する手順は以下のようになります。

+
    +
  1. そのロケールに完全に一致する em:locale でプロパティが提供されていた場合、それが使われます。
    2. +
  2. 部分的に一致するロケールが見つかった場合、最も一致する部分が多いロケールが使用されます。各部はダッシュで分割されます (例えば es は es-ES に一致し、その逆も同様です)。
    3. +
  3. 一致する部分の数が同じロケールが複数存在する場合は、もっとも一般的なロケールが使用されます (例えば、en-US を検索する際、en は en-GB よりも優先されます)。
    4. +
+

現在のアプリケーションロケールが検索された後、フォールバックとして en-US を検索します。

+

プロパティファイルが設定されておらず、現在のロケールや en-US に一致する em:localized プロパティが存在しない場合は、インストール定義ファイルで直接指定されたプロパティが、Gecko 1.9 以前で常に使われていたように、最後の手段として使われます。

+

Gecko 1.9 以前のローカライズ

+

Gecko 1.9 以前では、アドオン開発者は、Firefox や Thunderbird のようなツールキットベースのアプリケーションを対象とする拡張機能にローカライズされた説明を定義するためには以下のような特別な手順が必要でした。

+ + +

ローカライズ可能な文字列

+

この方法でローカライズできるアドオンのメタデータを列挙します。

+ +

ローカライズ可能なリスト

+

複数の値が存在する場合、設定名の後ろに数字を付けます。

+
extensions.EXTENSION_ID.contributor.1=FIRST_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.2=SECOND_LOCALIZED_CONTRIBUTOR_NAME
+extensions.EXTENSION_ID.contributor.3=THRID_LOCALIZED_CONTRIBUTOR_NAME
+
+pref("extensions.EXTENSION_ID.contributor.1", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.2", "PATH_TO_LOCALIZATION_FILE");
+pref("extensions.EXTENSION_ID.contributor.3", "PATH_TO_LOCALIZATION_FILE");
+
+

この方法でローカライズできるアドオンのメタデータを列挙します。

+ diff --git a/files/ja/orphaned/map/index.html b/files/ja/orphaned/map/index.html new file mode 100644 index 0000000000..9ee6389df8 --- /dev/null +++ b/files/ja/orphaned/map/index.html @@ -0,0 +1,229 @@ +--- +title: Map +slug: Map +--- +

{{ SeeCompatTable() }}

+ +

{{ warning("The SpiderMonkey Map implementation is a prototype and the Map API and semantics specifications are unstable. The SpiderMonkey implementation may not reflect the latest specification draft. It is subject to change anytime. It is provided as an experimental feature. Do not rely on it for production code.") }}

+ +

Introduction

+ +

Map オブジェクトはシンプルなキーバリューマップです。 キーとバリューにあらゆる値（オブジェクトとプリミティブ値）が使用できます。

+ +

Key equality is based on the "same-value" algorithm: NaN is considered the same as NaN (even though NaN !== NaN), -0 and +0 are considered distinct (even though -0 === +0), and all other values are considered equal according to the semantics of the === operator.

+ +

API

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstructorDescription
new Map([iterable])Returns a new Map object.  If iterable is an Array or other iterable object whose elements are key-value pairs (2-element Arrays), then each of those key-value pairs will be added to the new Map.
MethodDescription
myMap.get(key)Returns the value associated to the key, or undefined if there is none.
myMap.set(key, value)Sets the value for the key in myMap. Returns undefined.
myMap.has(key)Returns a boolean asserting whether a value has been associated to the key in myMap or not
myMap.delete(key)Removes any value associated to the key. After such a call, myMap.has(key) will return false.
myMap.clear(){{ fx_minversion_inline("19") }} Removes all key/value pairs from myMap.
PropertyDescription
myMap.size +

Returns the number of key/value pairs in myMap.

+ {{ fx_minversion_inline("19") }}In Firefox 18 and earlier, size was a method. In Firefox 19 and later it is a property.
+ +

A Map object can iterate its elements in insertion order - a for..of loop will return an array of [key, value] for each iteration.

+ +

Examples

+ +
var myMap = new Map();
+
+var keyObj = {},
+    keyFunc = function () {},
+    keyString = "a string";
+
+// setting the values
+myMap.set(keyString, "value associated with 'a string'");
+myMap.set(keyObj, "value associated with keyObj");
+myMap.set(keyFunc, "value associated with keyFunc");
+
+myMap.size; // 3
+
+// getting the values
+myMap.get(keyString);    // "value associated with 'a string'"
+myMap.get(keyObj);       // "value associated with keyObj"
+myMap.get(keyFunc);      // "value associated with keyFunc"
+
+myMap.get("a string");   // "value associated with 'a string'"
+                         // because keyString === 'a string'
+myMap.get({});           // undefined, because keyObj !== {}
+myMap.get(function() {}) // undefined, because keyFunc !== function () {}
+
+ +

NaN can also be used as a key. Even though every NaN is not equal to itself (NaN !== NaN is true), the following example works, because NaNs are indistinguishable from each other:

+ +
var myMap = new Map();
+myMap.set(NaN, "not a number");
+
+myMap.get(NaN); // "not a number"
+
+var otherNaN = Number("foo");
+myMap.get(otherNaN); // "not a number"
+
+ +

Also note that JavaScript has two zero values, +0 and -0. These two zero values are treated as different keys in Maps:

+ +
var myMap = new Map();
+myMap.set(0, "positive zero");
+myMap.set(-0, "negative zero");
+
+0 === -0; // true
+
+myMap.get(-0); // "negative zero"
+myMap.get(0);  // "positive zero"
+
+ +

Maps can be iterated using a for..of loop:

+ +
var myMap = new Map();
+myMap.set(0, "zero");
+myMap.set(1, "one");
+for (var [key, value] of myMap) {
+  alert(key + " = " + value);
+}
+// Will show 2 alerts; first with "0 = zero" and second with "1 = one"
+
+ +

Objects and maps compared

+ +

Objects are similar to Maps in that both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. Because of this, Objects have been used as Maps historically; however, there are important differences between Objects and Maps that make using a Map better.

+ + + +

Use maps over objects when keys are unknown until run time, and when all keys are the same type and all values are the same type.

+ +

Use objects when there is logic that operates on individual elements.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31 [1]{{ CompatGeckoDesktop("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
iterable{{ CompatNo() }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Map.clear()31 [1]{{CompatGeckoDesktop("19")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("13") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
iterable{{ CompatNo() }}{{ CompatGeckoDesktop("17") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
Map.clear(){{ CompatNo() }}{{CompatGeckoMobile("19")}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

[1] The feature is available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

+ +

See also

+ + diff --git a/files/ja/orphaned/mcd/getting_started/index.html b/files/ja/orphaned/mcd/getting_started/index.html new file mode 100644 index 0000000000..2e0fe5e9f2 --- /dev/null +++ b/files/ja/orphaned/mcd/getting_started/index.html @@ -0,0 +1,54 @@ +--- +title: Mozilla 製品の集中管理 - 基本編 +slug: MCD/Getting_Started +tags: + - Administration + - Configuration management + - enterprise +--- +

Firefox や Thunderbird などの Mozilla アプリケーションには、設定項目を集中管理する機能が備わっています。この機能は Netscape Communicator から引き継がれたものです。今のところ、Netscape Mission Control Desktop (MCD) のような管理者向けツールはありませんが、Mozilla アプリケーションの設定項目に詳しい方であれば、いくつかのテキストファイルを用意するだけで、簡単にこの機能を利用できます。

+

準備

+

以下は Firefox の例で説明しますが、Thunderbird でも同様です。

+

クライアントサイド

+

autoconfig.cfg と autoconfig.js という 2 つのプレーンテキストファイルをアプリケーションディレクトリ以下に追加します。ここでは Windows での標準的なパスを想定しますが、必要に応じて読み替えてください。

+

C:\Program Files\Mozilla Firefox\autoconfig.cfg

+

中身は空白にします。

+

C:\Program Files\Mozilla Firefox\defaults\pref\autoconfig.js

+

以下の 3 つの設定項目を記述します。

+
// サーバ上に置く jsc ファイルの URL (適宜変更してください)
+pref("autoadmin.global_config_url", "http://myserver/mozilla/firefox/autoconfig.jsc");
+
+// ローカルに置く cfg ファイルのファイル名
+pref("general.config.filename", "autoconfig.cfg");
+
+// 上記ファイル名の拡張子を除いた名前
+pref("general.config.vendor", "autoconfig");
+
+

サーバサイド

+

サーバ上に以下の 2 つのファイルを置きます。

+

http://myserver/mozilla/firefox/.htaccess

+

これは jsc ファイルの適切な MIME タイプを設定するものです。不明な場合はサーバ管理者に問い合わせてください。

+
AddType application/x-javascript-config jsc
+
+

http://myserver/mozilla/firefox/autoconfig.jsc

+

これが、実際に設定を記述するファイルです。ファイルの拡張子は js ではなく jsc とします。

+
// クライアントの js ファイルと同じ内容をここにも記述します。
+// ただし、lockPref によって設定項目をロックしていることに注意してください。
+lockPref("autoadmin.global_config_url", "http://myserver/mozilla/firefox/autoconfig.jsc");
+lockPref("general.config.filename", "autoconfig.cfg");
+lockPref("general.config.vendor", "autoconfig");
+
+// 以下、任意の設定項目を追加していきます。
+// 例えば以下の行ではアドオンのインストールを無効化しています。
+lockPref("xpinstall.enabled", false);
+    :
+    :
+    :
+
+

使い方

+

準備が終わったら、クライアント側でアプリケーションを起動すれば、サーバから自動的に設定項目が読み込まれ、適用されます。

+

関連記事

+

jsc ファイルでは、特定の設定項目をロックするだけでなく、環境変数の取得と条件分岐、規定値の設定、LDAP サポート (Thunderbird のみ) など、他にもいくつかの機能を利用できます。詳細は以下の記事を参照してください。

+ diff --git a/files/ja/orphaned/mcd/index.html b/files/ja/orphaned/mcd/index.html new file mode 100644 index 0000000000..628772cfb5 --- /dev/null +++ b/files/ja/orphaned/mcd/index.html @@ -0,0 +1,56 @@ +--- +title: MCD +slug: MCD +tags: + - MDC Project + - NeedsEditorialReview + - NeedsTechnicalReview +--- +
+

Mozillaを企業に配備する方法についての寄稿ドキュメンテーション記事です。

+
+ + + + + + + +
+

ドキュメンテーション

+
+
+ ガイド
+
+ + 		+

リンク

+
+
+ 関連 bugzilla
+
+ +
+
+ リファレンス
+
+ +
+

{{ languages( { "en": "en/MCD" } ) }}

diff --git a/files/ja/orphaned/mdn/about/linking_to_mdn/index.html b/files/ja/orphaned/mdn/about/linking_to_mdn/index.html new file mode 100644 index 0000000000..c7b7e87623 --- /dev/null +++ b/files/ja/orphaned/mdn/about/linking_to_mdn/index.html @@ -0,0 +1,88 @@ +--- +title: MDN にリンクするには +slug: MDN/About/Linking_to_MDN +tags: + - Documentation + - Guide + - MDN +translation_of: MDN/About/Linking_to_MDN +--- +
{{MDNSidebar}}

MDN にリンクするガイドラインやそもそもリンクして良いのか聞かれることがありますが、もちろん OK です。MDN にリンクして頂いて構いません。その際のガイドラインやベストプラクティスが必要であれば続けて読んでください。

+ +

MDN にリンクして良いですか？

+ +

はい！是非どうぞ！ハイパーテキストリンクは Web の本質的な機能であるだけでなく、ユーザに価値あるリソースを指し示す方法であると共に、私たちのコミュニティの成果に対する信頼を示すことでもあります。

+ +

ですから、MDN のコンテンツへのリンクは是非遠慮なくしてください。MDN のフロントページ、あるいは必要に応じて MDN 内の特定ページにリンクしてください。リンク先ページ選択のベストプラクティスは以下の通りです。

+ +

どのページにリンクすべきですか？

+ +

リンクすべき特定のページは決まっていません。あなたの読者に役立つのがどのページかというのが大事です。

+ + + +

いずれにしても、リンク元ページや読者にとって最適なページにリンクしてください。リンクや私たちではなく、読者こそが大事なのですから。

+ +

良いリンクの仕方は？

+ +

リンクの仕方は自明ですが、良いリンクの仕方は少々難しいこともあります。リンクの仕方はいくつかあります:

+ +

テキスト内でのリンク

+ +

これが最も便利なリンク方法です。特定の話題に対して読者に更なる情報をリンクで提供するのです。多くの場合、このようなリンクはユーザを個別の関連情報ページにリンクするもので、Web サイトのホームページにリンクするものではありません (例外もありますが)。

+ +
+

… IndexedDB API を使えば、ローカルのデータベースにデータを格納できます…

+
+ +

このようなリンクはワンクリックでより詳しい情報が得られるユーザにとっても、的確な文脈で紹介してくれたことで気に入ってもらえるだろう MND にとっても、両方にとってとても価値あるものです。私たちのミッションは読者にできる限り速やかに必要な情報を届けることで、これは明らかにステキなやり方です。

+ +

テキスト中のリンクで避けるべきこと

+ +

テキスト中のリンクはステキで便利なものですが、留意すべき事がいくつかあります:

+ + + +

バナーや画像をサイトに追加するには

+ +

本文中からのリンク以外に、例えばサイドバーの画像から MDN にリンクしていただくこともできます。テキスト中のリンクはあなたが読者に情報を保管する目的でリンクするものですが、この場合は意味合いが異なります。サイドバーなどにリンク画像を追加するのは、あなたの MDN プロジェクトへの支援を表明するものであったり、MDN を宣伝するものであったり、総合的な情報源として MDN を紹介するものになります。

+ +

支援を表明するのに遠慮しないでください。MDN を宣伝するには ページであなたのサイトに合わせたボタンを作ってください。ランディングページなど他のページへのリンクにしていただくのも自由です。

+ +

WordPress から MDN に自動リンクするには

+ +

ブログポストから用語を選んで MDN の適切なページに自動的にリンクする WordPress plugin を用意しています。このプラグインでは上記のガイドラインに沿ったかたちでリンクしながら Web 技術についてブログを書るよう助けてくれます。試しにインストールしてみて、良ければご利用ください。

+ +

ご支援ありがとうございます！

+ +
+

Cross-Origin Resource Sharing

+ +

私達はMDNの公開する全てのデータで CORS を有効にしているつもりです。これにはほぼ全てのものが当てはまるはずです。もしあなたがなにかcross-origin requestsが使えない状態を発見したら、それは修正すべきバグです。

+
+ +
+
 
+
diff --git a/files/ja/orphaned/mdn/community/conversations/index.html b/files/ja/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..2ed336eecc --- /dev/null +++ b/files/ja/orphaned/mdn/community/conversations/index.html @@ -0,0 +1,53 @@ +--- +title: MDN コミュニティでの対話 +slug: MDN/Community/Conversations +tags: + - Community + - Guide + - MDN Meta +translation_of: MDN/Community/Conversations +--- +
{{MDNSidebar}}
+ +

MDN での"作業"は MDN のサイトで行われますが、"コミュニティ" はまた、(非同期の) ディスカッションと(同期的な) オンラインチャット、ミーティングも行っています。

+ +

非同期のディスカッション

+ +

情報を共有し、ディスカッションを行うため、Mozilla Discourse forum に専用のカテゴリー ("MDN") があります。ドキュメントのコンテンツ作成・翻訳・メンテナンス、MDN プラットフォームの開発、計画、目標設定、進捗管理といった、MDN に関するすべてのトピックでこのカテゴリーを使用します。

+ + + +

歴史的なアーカイブ

+ +

2017 年 6 月より前は MDN 関連のディスカッションを、Google グループを経由して保存されていたメーリングリストで行っていました。これら過去のディスカッションを検索したい場合は、Google グループで対応する古いメーリングリストを閲覧できます。(はい、これらの名前が重複していて混乱を招いていることは承知しています。歴史的アクシデントによるものです。申し訳ございません。)

+ +
+
mozilla.dev.mdc 別名 dev-mdc
+
このメーリングリストは MDN 上のドキュメントについて議論する場でした。
+
mozilla.dev.mdn 別名 dev-mdn
+
このフォーラムは Kuma プラットフォームを支えている MDN での開発作業についての議論を行うところでした。
+
mozilla.mdn 別名 mdn@
+
これは MDN ウェブサイトや関連した取り組みに対する、ハイレベルな計画と優先順位についての議論のためのフォーラムでした。
+
+ +

同期のチャット

+ +

Mozilla のリアルタイムで議論を行うためののプラットフォームは Matrix で、 Mozilla 自身がサーバーを持っているチャット手法です。

+ +

MDN Web docs のチャットルームは、 MDN のコンテンツを議論するための主要なチャンネルです。私たちは執筆やコンテンツの構成などについて話し合っています。また、「ウォータークーラー」のような会話もしています。この部屋は北米とヨーロッパの平日に活動している可能性が高いです。

+ +

Mozilla での Matrix の使い方をもっと知りたいかもしれませんし、もしあなたが本当に興味を持っているのであれば、 Riot.im のようなスタンドアロンの Matrix アプリケーションをインストールしてみてはいかがでしょうか。

+ +

IRC とは

+ +

長年にわたり、 Mozilla はリアルタイムの議論のために Internet Relay Chat (IRC) を使用していました。2020年初頭の時点で、 IRC は Matrix に取って代わられて非推奨となっています。 MDN を含む多くの場所で IRC チャンネルへの言及を目にするかもしれません。 MDNで見つけた IRC チャンネルへのリンクを更新して、代わりに対応する Matrix ルームを指すようにしてください。トピックのマトリックスルームがわからない場合は、 General ルームで質問してください。アクティブでなくなったプロジェクトやトピックには Matrix ルームがないかもしれません。その場合はリンクを削除してください。

+ +

ミーティングやその他のイベントに参加する

+ +

MDN チームは、MDN コミュニティに開放している定期ミーティングをいくつか催しています。スケジュールやアジェンダ、過去と今後のミーティングの記録といった詳細は Mozilla Wiki の MDN Meetings のページをご覧ください。

+ +

ここで紹介したものやその他のミーティング、ミートアップ、その他のイベントについては MDN イベントカレンダーをご覧ください。定期開催のミーティングは MDN ミーティングの Wiki ページにまとめられています。

diff --git a/files/ja/orphaned/mdn/community/doc_sprints/index.html b/files/ja/orphaned/mdn/community/doc_sprints/index.html new file mode 100644 index 0000000000..5af4cd4a75 --- /dev/null +++ b/files/ja/orphaned/mdn/community/doc_sprints/index.html @@ -0,0 +1,121 @@ +--- +title: Doc sprints +slug: MDN/Community/Doc_sprints +translation_of: MDN/Community/Doc_sprints +--- +
{{MDNSidebar}}

{{ draft() }}

+ +
+

Note: The MDN community often held doc sprints during 2010-2013. Starting in 2014, these events were broadened in scope to "Hack on MDN" events that include code hacking as well as documentation projects. Most of the advice below applies equally well to "Hack" sprints and documentation sprints.

+
+ +

これは、Doc sprint（集中的な文書関連イベントを実施する短い期間）を組織化するためのガイドです。Doc sprint を組織化した経験者からのアドバイス、コツを含み、あなたが同じことがをする助けとなるものです。このガイドはまた、FLOSS Manuals Book Sprints という書籍からのアイディアを引用しています。

+ +

Doc sprint とは?

+ +

Doc sprint とは、短い期間に、集まってドキュメントを作成することを指します。実際に、もしくは仮想的に集まって、決められたトピックや、それに関連した文書を協力して作成します。

+ +

スプリントの種類

+ +

Sprints can be virtual or in-person, or some combination. For a virtual sprint, everyone participates from wherever they happen to be located, communicating solely through mediated channels. For an in-person sprint, participants gather in the same location for the duration of the sprint, so that they can communicate face-to-face. Hybrid sprints can be mostly-in-person with some remote participants, or mostly-virtual with some local gatherings. In-person sprints require more logistical planning, to secure a meeting location, to get everybody there, and to house and feed them during the sprint.

+ +

Another way to categorize sprints is by topical focus. For example, a sprint might focus on a particular subject area, such as Web development, or translation into a particular language.

+ +

スプリントを計画する

+ +

目標を決める

+ +

コミュニティとコンテンツに関して明確な目標を設定しましょう。次のようなことについて決めておくことによって、doc sprint の詳細を決めやすくなります。

+ + + +

種類と想定参加者を決める

+ +

決定した目標に応じて、スプリントの形式を決めましょう（仮想的に集まるのか、実際に集まるのか、それともその組み合わせなのか）。想定する参加者も、併せて決めておきましょう。

+ +

例えば、コミュニティメンバーを増やすことが目的なら、その地域の人が、実際に集まって行う形が最適でしょう。なぜなら長距離の移動も必要ありませんし、参加者がお互いに会って親睦を深められるからです。また特定の領域のトピックに焦点をあてたスプリントで、想定される参加者がお互いをよく知っているけれども、地理的に分散している場合は、仮想的に集まる形式をとると良いでしょう。

+ +

日時を決める

+ +

長距離の移動が必要な参加者のいるスプリントの場合、開催期間を 3 日間（例：週末 2 日と平日 1 日）はとったほうが良いでしょう。ただし長すぎないように注意が必要です。公開の、ローカルな、実際に集まるsプリントの場合は、多くの人が参加できると思われる日に、1 日だけ開催すると良いでしょう。仮想的に集まるなら、平日 1 日と休日 1日の 2 日開催とすることが多いです。例えばパリの Mozilla オフィスでは、毎水曜日に、ローカルなドックスプリントが開催されています。実際にオフィスに来る参加者が大半ですが、モントリオールからリモートで参加する人もいます。

+ +

参加者が全員参加するカンファレンスがあるなら、その後に開催するのも良いでしょう。その場合は、参加者がカンファレンス後にスプリントへ参加する時間を取れることを確認しておきましょう。またカンファレンスの期間中にスプリントを開催するのは避けたほうがよいでしょう。

+ +

仮想的に集まる形式をとるなら十分な作業時間を取れるように、タイムゾーンに気をつけましょう。ヨーロッパとアメリカやアメリカとアジアのように、異なるタイムゾーンからの参加者がいる場合は、参加者が起きていられる時間に計画しましょう。ただし全員にとって都合のよい時間はありえないことにも留意が必要です。

+ +

また、仮想的に集まる形式の場合には、2-3 週前に日程を設定できます。実際に集まる場合は、予定や移動の調整が必要なので、2-3 週よりも前に日程を決めておく必要があります。

+ +

スプリントを広報する

+ +

スプリントを公開し、参加者を広く募ることもできます。その際には、必ず参加できることがわかっている参加者が何人かいるようにしましょう。彼らが全員参加できるように日時を設定しましょう。非公開のスプリントの場合は、参加者を招待するだけでよいでしょう。ただし招待状は個別に送信し、なぜ参加者として選ばれたのかを詳細に説明するものである必要があります。

+ +

公開のスプリントの場合は、トピックに興味のある既存グループを見つけておくと良いでしょう。例えば、特定の地域を対象とした集合型スプリントの場合、その地域で活動している Web 開発者のミートアップを見つけておくと良いでしょう。告知は送るグループにとって適切な手段でおこないましょう。告知文には、スプリントの詳細と参加登録方法が記載された Web ページへのリンクもつけておくと良いでしょう。Eventbrite と Lanyrd は参加登録も行えるサイトの例です。Mozilla の開発者向けイベントに、実際に参加するのは登録者の半数程度となっています。

+ +

ターゲットとする人々に適切にリーチできるなら、SNS も利用しましょう。Web 開発者をターゲットとするなら、まず Twitter、次いで Google Plus が、Facebook や LinkedIn と比べて効果がありました。しかし地域によって SNS の利用は異なります（例えばブラジルでは Orkut の利用者が多い）。ターゲット層に多くのフォロワーを持つ人に、イベント告知のポストをシェアしてもらえるようにしておきましょう。

+ +

人が集まるスプリントで必要な手配

+ +

Logistics for in-person sprints are greater for longer sprints and those where sprinters travel to attend. A short or locals-only sprint need relatively little logistical support.

+ +

予算と資金

+ +

You need to figure out how much the event is going to cost, and where the money is going to come from.

+ +

Costs to consider in your budget include:

+ + + +

Some of these costs can be self-funded by participants, meaning that they pay for their own costs. There are a variety of ways to save money, which are mentioned in the following sections.

+ +

It may be possible to get sponsorship from Mozilla to fund some of the costs of your event. It helps to have a clear focus for your event, and a specific plan and budget. If there is a Mozilla Rep in your area, work with them to request budget and swag through the Reps program. Otherwise, you can submit a developer events request in Bugzilla.

+ +
+
会場
+
There are lots of options for meeting space. If you are in a city with a Mozilla office, you can use the community space in that office. Elsewhere, options include meeting rooms in libraries, churches, coffee shops, or businesses where you have contacts. Many cities now have coworking spaces that rent their conference rooms for a reasonable fee.
+
資源
+
Be sure that your venue has good chairs and tables, and reliable power and Internet access. Sitting all day on a bad chair is not just uncomfortable; it can lead to injury. Make sure that the number of sprinters and their computers and devices does not overwhelm the power supply and available Internet bandwidth. Be generous (but not dangerous) with extension cords, and if necessary, international plug adapters. A projector for shared viewing can be very helpful. Whiteboards and sticky notes are great for brainstorming and planning.
+
移動
+
Travel is relevant only if the sprinters do not all live close to the sprint venue. The usual strategies for saving on travel apply, and are not specific to doc sprints.
+
宿泊
+
Where sprinters stay should not be inconveniently far from the meeting venue. It can be cheaper (and possibly more fun) to split the cost of a vacation house or flat, rather than paying for individual hotel rooms. If you have a mix of visitors and (willing) locals, the visitors can stay in the homes of local community members.
+
食料
+
Sprinters need to eat! Make arrangements for food during the sprint, and inform sprinters if certain meals will not be arranged. If the group is staying in a home, you can save money by buying and cooking food rather than going out to eat. Even if food is self-funded, it can reduce hassle to pitch into a common fund for food, rather than splitting every restaurant bill. If your venue allows, have snacks (some healthy and some not) available between meals.
+
楽しみ
+
Make time for non-writing social activities. These can be informal, like going for a hike together, or more formal, like a tourist excursion. Going out for beer (at the end of the day, of course) is usually a winner. On the other hand, don't plan every hour of every day. Everybody needs some down time, especially introverts.
+
+ +

sprint の期間中

+ +

作業を計画する

+ +

 

+ +

タスクを追跡する

+ +

Have a way to track what tasks need to be worked on, who is doing what, and what has been completed. For MDN doc sprints, we use a wiki page for advance planning, and an etherpad for tracking work during the sprint.

+ +

Often, people want to help but don't know where to start, and deciding among many options takes too much mental effort. For any given participant, give them a couple of possible tasks ("you could do A, or B"); this simplifies their choice, without making them feel like they're being bossed around.

+ +

協力する

+ +

One of the benefits of in-person sprints is that people can work together in ways that they might not be able to when they're not in the same place, for example, by working out ideas together on a whiteboard or by brainstorming with sticky notes. Still, there are opportunities for collaboration and camaraderie in any type of sprint. Chatting via IRC is essential for virtual sprints, and still very helpful for in-person sprints (for example, for sharing links). For a greater sense of "virtual presence", consider using a video conferencing service, such as Google Hangout.

+ +

As an organizer, look for common interests among the participants and for ways that they can work together.

+ +

達成したことを祝う

+ +

Be sure to take time to celebrate accomplishments at the end of the sprint. This gives participants a better feeling than when the sprint just ends without any summary. If possible, have people "demo" what they have done, even if it is just showing a new article page.

+ +

Also, share the sprint accomplishments via a blog post, to celebrate publicly as well. This is important for any kind of sprint, but especially for virtual sprints, where the participants might not all be online at the official end of the sprint for a wrap-up session.

+ +

 

diff --git a/files/ja/orphaned/mdn/community/index.html b/files/ja/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..7fdf95ca12 --- /dev/null +++ b/files/ja/orphaned/mdn/community/index.html @@ -0,0 +1,54 @@ +--- +title: MDN Web Docs コミュニティに参加しましょう +slug: MDN/Community +tags: + - Community + - Guide + - Landing + - MDN Meta +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +
+

MDN Web Docs は wiki 以上のものです。つまりオープンなウェブ技術を利用する開発者たちのための素晴らしいリソースとして MDN を共に作り上げる、開発者たちによるコミュニティなのです。

+
+ +

MDN に貢献していただけるのはもちろん大歓迎ですが、 MDN コミュニティに参加していただけるとよりありがたいです。コミュニティとつながりを持つには、こちらの簡単な3ステップを踏んでください。

+ +
    +
  1. MDN アカウントを作成する。
    2. +
  2. ディスカッションに参加する。
    3. +
  3. 何が起きているのかを知り、対応する。
    4. +
+ +

コミュニティはどのように機能するのか

+ +

以下は、 MDN のコミュニティを説明する他の記事です。

+ +
+
+
+
コミュニティでの役割
+
MDN コミュニティ内には特定の役割を持つたくさんの役割があります。
+
Doc sprints
+
これはドキュメンテーションスプリントを開催するためのガイドです。ここには doc sprints を開催した人からの助言や tips があり、あなたの開催にも役立ちます。
+
何が起きているのかを知り対応する
+
MDN は Mozilla Developer Network community によってもたらされています。ここに我々が行っていることの情報を共有する方法があります。
+
+ +
+
+
+ +
+
+
MDN コミュニティでの会話
+
MDN の「成果」は MDN サイトに現れますが、「コミュニティ」も (非同期の) 議論と (同期の) オンラインチャットやミーティングで行われます。
+
コミュニティでの作業
+
MDN の文書化にかなりの量で貢献する部分は、 MDN コミュニティの役割として作業する方法を知ることです。この記事では他のライターや開発チームの両方とやりとりすることを活用するのに役立つ tips を置いています。
+
+
+
diff --git a/files/ja/orphaned/mdn/community/whats_happening/index.html b/files/ja/orphaned/mdn/community/whats_happening/index.html new file mode 100644 index 0000000000..097057a686 --- /dev/null +++ b/files/ja/orphaned/mdn/community/whats_happening/index.html @@ -0,0 +1,42 @@ +--- +title: 何が起きているかを追跡する +slug: MDN/Community/Whats_happening +tags: + - Beginner + - Community + - Guide + - MDN Meta +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}
+ +

MDN は MDN コミュニティ によって運営されています。私たちが何をしているのかについて、私たちが情報を共有する方法をいくつか紹介します。

+ +

ブログ

+ +
+
Mozilla Hacks
+
Web と Mozilla のテクノロジーと機能を詳細にカバーしたニュース。
+
Engaging Developers
+
Mozilla の MDN に関連するコミュニティの間でのプロモーション活動や議論。
+
+ +

短期的な情報の発信

+ + + +

ステータスボードとダッシュボード

+ +

Documentation status ページを見て、MDN コンテンツをすべて横断的に見て何が起きているかを理解します。どの記事が書いたり更新したりする必要があり、どのトピックが手助けが要るのかや、もっと多くのことを見ることができます。

+ +

MDN ミーティング

+ +

MDN 関連のさまざまなプロジェクトとブロセスに関する進捗を追ったり共有したりする、多くの通常ミーティングがあります。MDN ミーティング wiki ページに記載されています。

+ +

何が起こっているかを感じるのに、最も良いのは 2週間に 1 回水曜日の 10:00 に (10月-3月は UTC-0800、3月-10月は UTC-0700) #mdn IRC チャンネルで行われる MDN コミュニティミーティングに参加することです。MDN コミュニティミーティング wiki ページを見て、過去のアジェンダと記録を確認してください。

+ +

Public MDN Events のカレンダーには MDN コミュニティミーティング、doc sprints、その他 MDN 関連イベントが含まれています。Vidyo テレビ会議システムの「mdn」チャンネルでミーティングを見たら、ウェブで会話に参加できます。

diff --git a/files/ja/orphaned/mdn/community/working_in_community/index.html b/files/ja/orphaned/mdn/community/working_in_community/index.html new file mode 100644 index 0000000000..662d2321f4 --- /dev/null +++ b/files/ja/orphaned/mdn/community/working_in_community/index.html @@ -0,0 +1,114 @@ +--- +title: コミュニティでの作業 +slug: MDN/Community/Working_in_community +tags: + - Community + - Guide + - MDN Meta +translation_of: MDN/Community/Working_in_community +--- +
{{MDNSidebar}}
+ +

MDN の文書に関連して行われる、意味をなす規模での貢献の大部分は、いかに MDN コミュニティの一員として作業するかを知ることだといえます。この記事ではあなたが行う他の文書作成者、開発チームとのやりとりの多くで役に立つコツを紹介します。

+ +

一般的なエチケットのガイドライン

+ +

Mozilla コミュニティで作業する際の品行に関する、一般的なガイドラインを紹介します。

+ + + +

機転を利かせること

+ +

他者とのコミュニケーションでは、常に機転を利かせて敬意を表してください。

+ +

礼儀正しくミスを指摘する

+ +

誰かに連絡を取る目的が、その人たちに何か別のことをするように頼むことである場合、あるいはその人たちが行った誤り (特に、何度も行っている場合) を指摘することである場合は、メッセージを肯定的なコメントで始めてください。これはいわば打撃を和らげて、相手を悪者扱いするのではなく助けようとしていることを示します。

+ +

例えば新しい貢献者がタグをつけずに多くのページを作成しており、あなたがその問題を指摘したい場合は、相手へのメッセージを以下のようにするとよいでしょう (それぞれのケースで変更しなければならない箇所に下線をつけています):

+ +
+

Hi, MrBigglesworth, I've been noticing your contributions to the Wormhole API documentation, and it's fantastic to have your help! I particularly like the way you balanced your level of detail with readability. That said, though, you could make these articles even better and more helpful if you added the correct tags to the pages as you go.

+ +

See the MDN tagging guide (https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag) for details.

+ +

Thanks again, and I look forward to your future contributions!

+
+ +

知識を共有する

+ +

MDN プロジェクトに参加していると、何が行われているかや、コミュニティの他のメンバーが何に関わっているかを知ると役に立ちます。コミュニティ内で他者と対話することで、アイデア、更新状況などを得る (そして共有する) ことができます。また、誰が何を行ったかを知るのに役立つツールや情報リソースもあります。

+ +

コミュニケーションチャネル

+ +

コミュニティのメンバー (開発者と文書作成者のどちらも) と交流できる手段がいくつかあり、それぞれに固有のエチケットに関する決まりがいくらかあります。

+ +

Discourse

+ +

MDN Discourse フォーラムは、 MDN への協力についての一般的な質問を行い、議論を始めるのによい場所です。

+ +

Chat

+ +

Matrix チャットシステムを使用して、リアルタイムで連絡を取ることができます。 MDN のスタッフは MDN Web Docs ルーム におり、ヨーロッパと北米の勤務日に活動しています。他のチャットルームを見て、興味のあるトピックに関わっている人を見つけましょう。

+ +

GitHub

+ +

MDN で問題を見つけたり、質問したりしたい場合は GitHub sprints repo issues に問題を提出してください。これらの問題は、将来のある時点でトリアージされ、対処されることになります。

+ +

Email

+ +

電子メールアドレスを持っている場合は、他の人々とプライベートなメール交換をすることもあります。

+ +
+

注記: 一般的に、あなたが文書化している技術に関する文書に誰かが電子メールアドレスを投稿した場合、個人的に電子メールアドレスを示された場合、あるいは広く知られた電子メールである場合は、受け入れ可能な "最初の連絡手段" が電子メールになります。あなたがそれを探し出さなければならない場合は、他に試みる連絡手段がまったくない場合を除いて、始めに Matrix やメーリングリストを使用する許可を得ることを試みましょう。

+
+ +

コンテンツの状態を示すツール

+ +

文書化の状態に関する情報を提供する、役に立つツールがいくつかあります。

+ +
+
リビジョンダッシュボード
+
リビジョンダッシュボードは、MDN のコンテンツの変更点を確認するためのすばらしいツールです。最近の履歴を見る、確認する期間を選択する、あるいはロケールや貢献者名やトピックでフィルタリングすることができます。リビジョンのセットを見ると、それぞれのリビジョンの変更点を調べる、ページをすばやく開く、全体の履歴を調べる、あるいは変更を取り消す (権限がある場合) ことができます。
+
文書化状態の概観
+
文書化状態の概観 ページは、状態を追跡するために設定された MDN の全領域のリストを、そこにさまざまな作業が必要なページがいくつあるかという情報とともに提供します。特定のトピック領域をクリックすると、タグがないページや特定の作業が必要であることを示すタグがついたページなど、作業が必要なコンテンツの詳しい一覧を確認できます。また、長期間更新されていないページや陳腐化したと思われるページ、その領域の文書に影響があると位置づけられているバグの一覧を見ることもできます。
+
文書化プロジェクトの計画
+
私たちは計画段階の、あるいは大規模で進行中の文書作成プロジェクトをいくつか抱えており、何を行う必要があるかを追跡し続けることを支援する計画文書を作成しました。
+
MDN Taiga
+
MDN のスタッフである執筆者は、現在および将来の文書化プロジェクトを管理するために Taiga と呼ばれるツールを使用します。私たちが何をしており、またどのように進めているかを見ることができます。さらに、すぐに起こしたプロジェクトが何であるかを見ることもできます。それらのいくつかはスタッフの執筆者が引き受けますが、希望であればあなたが引き受けることも自由です! MDN チームが従っているアジャイルプロセスについて、詳しくは Mozilla wiki のプロセスのページ をご覧ください。
+
+ +

開発コミュニティ

+ +

MDN 文書作成コミュニティのメンバーとして、開発者と管理者の関係でもっとも重要であると思われることは、開発者とともに開発および維持することです。開発者は私たちが開発するソフトウェアを作成しますが、もっとも役に立つ情報源でもあります。開発者とよい関係を維持することはとても重要です。彼らに好かれていれば、質問に早く、正確に、また徹底的に答える可能性が高まります!

+ +

また、あなたは MDN の文書作成コミュニティを代表しています。文書作成チームとのすべての交流を良好にすることで、開発チームとのすばらしい作業場の関係を維持するようにしてください。

+ +

関連して、適切な話し相手を見つけるための手段が、モジュールオーナーの一覧 を見ることです。

+ +

文書作成者たちのコミュニティ

+ +

文書作成やのコミュニティは大規模です。きわめて頻繁に、あるいは大規模に貢献する方は比較的少数ですが、ときどき貢献する人々は数十人から数百人います。幸い、この方々は全体的にウェブ、Mozilla、文書化が純粋に好きなすばらしい人たちであり、交流することはほぼ容易です。

+ +

MDN コミュニティについて詳しくは、MDN コミュニティに参加する の記事をご覧ください。

+ +

他の執筆者と直接対話する機会が最も多い場所は Discourse フォーラムです。

+ +

{{anch("General etiquette guidelines", "一般的なエチケットのガイドライン")}} を覚えておくことで、たいていの物事がとてもスムーズに進むことがわかるでしょう。

+ +

関連項目

+ + diff --git a/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..70b2843e40 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,46 @@ +--- +title: MDN アカウントを作成するには +slug: MDN/Contribute/Howto/Create_an_MDN_account +tags: + - Beginner + - Documentation + - Guide + - Howto + - MDN Meta + - ガイド + - 初心者 +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}
+ +

MDN 上にあるコンテンツを編集するには、 MDN プロフィールが必要です。 MDN を読んだり、検索したりするだけの場合はプロフィールは不要です。このガイドは、 MDN のプロフィールをセットアップする手助けをします。

+ +
+
MDN に登録するにはなぜメールアドレスが必要なのか
+
+メールアドレスはアカウントの回復に使用されます。また MDN の管理者がアカウントやサイトでの活動などについて連絡とる場合に必要となります。
+
+また、 (特定のページが変更されたときのような) 通知やメッセージ (例えば、ベータテストチームに参加し、テストが必要な新しい機能についてのメールを受信できます) にサインアップできます。
+
+メールアドレスは、 MDN では決して表示されず、プライバシーポリシーに従ってのみ使用されます。 + +
GitHub 経由でログインしている場合、そして GitHub でメールアドレスを ”通知しない” に設定している場合、MDN からメッセージ（あなたがページを購読した時などの通知も含まれます）は受信されないでしょう。
+
+
+ +
    +
  1. MDN の各ページの上部にログインと書かれたボタンがあります。ここにマウスをポイント (モバイル端末の場合はタップ) すると、 MDN へのサインインに対応している認証サービスの一覧が表示されます。
    2. +
  2. ログインするサービスを選択します。現在は、 GitHub のみ利用できます。 GitHub を利用すると、 GitHub プロファイルへのリンクが MDN プロファイルの公開ページに追加されることに注意してください。 ユーザーがサインアップの詳細を入力するところ
    3. +
  3. サービスのプロンプトに従って、 GitHub のアカウントに接続します。 ユーザーがログインしたりアカウントを作成したりしているところ
    4. +
  4. 認証サービスから MDN に戻ると、ユーザー名とメールアドレスの入力を求められます。ユーザ名はあなたが貢献したページなどにクレジットとして公開されます。ユーザー名にメールアドレスを使用しないでください。 ユーザーがログインしたりアカウントを作成したりしているところｓ
    5. +
  5. MDN プロフィールを作成するをクリックします。
    6. +
  6. ステップ 4 で指定したメールアドレスが、認証サービスで使用しているものと同じでない場合、メールを確認し、メール内にあるリンクをクリックする必要があります。
    7. +
+ +

以上です。これで MDN アカウントができました。すぐにページを編集することができます。

+ +

MDN ページの上部にある自分のユーザー名をクリックすると、プロフィールを確認できます。そこで編集ボタンをクリックすると、プロフィールを変更できます。

+ +
+

ユーザー名に空白や "@" を含めてはいけません。ユーザー名は、あなたが貢献したページなどに表示されることを覚えておいてください。

+
diff --git a/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html b/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html new file mode 100644 index 0000000000..d82d0877f2 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/create_learning_pathways/index.html @@ -0,0 +1,70 @@ +--- +title: 学習パスの作成方法 +slug: MDN/Contribute/Howto/Create_learning_pathways +tags: + - MDN Meta + - ガイド + - 学習 + - 方法 +translation_of: MDN/Contribute/Howto/Create_learning_pathways +--- +
{{MDNSidebar}}
+ +

学習領域で可能なさまざまなタスクの中で、最も重要なのは学習パスを設計することです。学習パスは基本的に、何かを学ぶために、通常は特定の順序で、読み、実行するための一連の記事です。 しかし良い・効率的なパスを作るには、いくつかの作業が必要です。このガイドは MDN の学習パスの計画と作成方法を学ぶのに役立ちます。

+ +

学習パスは実際にはチュートリアルのように見えますが、その通りでそれは非常に似ています。違いは、チュートリアルは、学習の道が青写真である具体的な結果だということです。MDN で素晴らしい学習コンテンツを作成するために必要なことの詳細を見てみましょう。

+ +

処方箋

+ +

学習パスの設計の冒頭には、常にあなたのアイデアを定式化する時があります。そのような道筋のデザイナーとして、あなたは先生の立場にあるので、教えているレッスンを正式なものにする必要があります。要するに、あなたは次の質問に答えなければなりません：

+ +
+
何を教えたいですか？
+
+

一般的な知識 (例えば、オブジェクト指向プログラミング、{{Glossary("HTML")}}、Web デザイン) もしくはより具体的な実行するタスク (例えば、Web サイトを構築する方法、ナビゲーションを設計する方法 メニュー) かもしれません。これは本当にあなた次第ですが、集中しておくことが重要です。Web はかなり大きな獣で、学ぶべきことがたくさんあります。あなたのパスから学ぶ人に明確な洞察を与えるために、教えたいことを絞り込んでください。

+
+
オーディエンスは誰ですか？
+
学習スタイル、したがって教授のアプローチは、誰が学習をしているかによって大きく異なります。あなたが子供たちに教えたいのであれば、大人を教えるときとは異なるアプローチを取ります。初心者に対して教えるときは、熟練した開発者はすぐにはっきりと分かる基本的なことに集中する必要があります。その質問に答えることで、パスに入れる必要のある情報の深みと深さを定義するのに役立ちます。
+
事前知識が必要ですか？
+
これはパスの使いやすさを定義するために重要です。パスに多くの前提条件がある場合は、難しいパスです。つまり、非常に熟練した人だけが始めることができます。初心者を対象とするパスは、前提条件が比較的少数である必要があります。たとえば、{{Glossary("WebGL")}} を教えるための学習経路を作成したい場合、その経路から学ぶ人は既に {{Glossary("JavaScript")}} を知っていなければなりません。したがって、平均的または熟練した Web 開発者だけがそのようなパスに入ることができます。 これは大丈夫ですが、最初からそれを明確にする方が良いです。
+
+ +
+

プロのヒント: これを単独で行うことは困難な時があります。 あなたのアイデアを共有し、フィードバックを収集することをお勧めします。それはあなたのアイデアをテストし、物事を忘れるのを助けるでしょう。これを行うには、MDN ディスカッションフォーラム (テクニカルコンテンツについて話す) と Mozilla ラーニングフォーラム (さまざまな教授法について話す) であなたのアイデアをすべて話すことができます。また、シンプルなメモ帳ツール (Etherpad など) を使用して簡単に情報を共有したり収集したりすることもできます。

+
+ +

概念

+ +

あなたが誰に何を教えたいのか分かったので、それを行う方法を定義しましょう。

+ +

最初に行うことは、チュートリアルのレッスンを小さな個別の部分に分割することです。
+ 基本的には、画像を持っていて、ジグソーを使用してパズルのピースを作成するようなものです。小さければ小さいほど良いです。
+ 一度それらのすべての作品を持っていたら、それらをグループ化して論理インクリメンタルグループにソートするときです。
+ ゼロから完了までの包括的な方法を生み出すために必要なだけ繰り返します。

+ +

There is no magic way to acheive this. Each lesson has its own requirement and each teacher has their own teaching method. The way you want to teach something will have a huge impact on how you'll break things into smaller parts. As a reminder, for MDN, ultimately it will be about writing articles and providing exercises for people who will learn by themselves.

+ +

Also remember that there is no hard constraint on how to sort things out. If you want to build straight forward learning pathways that's fine. But if you want to build conditional pathways, that's fine too. What is important is to make things clear. You have to put yourself into the learners' shoes. Conception of a learning pathway is not very complicated but can take quite some time.

+ +
+

Pro tip: When going to conception, it can be helpfull to discuss things with others (as for the ideation part, see above). Since creating a learning pathway is about structuring information, it can be very helpfull to use some of the techniques that come from UX design such as card sorting. As an example, card sorting was used to figure out how to structure the "How to build a web site" pathway. It helped us break up and sort things out by producing a clear tree of knowledge.

+
+ +

作成

+ +

Ultimately once you get a clear view of the pathway itself, it is important to start defining the type of content needed for each step of the pathway. On MDN, at a minimum there should be a learning article. Such articles can be associated with various active learning content (basically: exercises). Of course, you can also imagine other types of content such as videos, assessments and tests to validate knowledge, etc.

+ +

Once you are clear on those various content requirements, you are ready to shape you pathway on MDN. This is very simple create a new landing page for your pathway under /Learn/tutorial. This landing page must clearly state what the reader will learn as well as any prerequisites necessary to follow that pathway. It also must contain the full list of articles to read with an excerpt for each article. Active learning content can also be listed here but it's not mandatory if they are linked directly inside the related articles.

+ +

Once the landing page is ready, it "just" requires creating the necessary content. For that, you have two options:

+ + +

Contact us

+ + diff --git a/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..4896a6fd7d --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,60 @@ +--- +title: 技術レビューを行う方法 +slug: MDN/Contribute/Howto/Do_a_technical_review +tags: + - Documentation + - Guide + - Howto + - MDN Meta + - Review + - レビュー +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +

技術レビューは技術的な正確さと記事の完全性の確認と、必要に応じて修正する作業から成ります。記事の執筆者が他人に記事の技術的なコンテンツをチェックしてほしい場合、編集時に「技術レビュー」チェックボックスをチェックします。執筆者が特定の技術者に技術レビューを行うよう依頼することもありますが、その分野の技術に詳しい人は誰でも行うことができます。

+ +

この記事は、技術レビューを行う方法について説明します。技術レビューをすることで、MDN のコンテンツを正確にする手助けができます。

+ +
+
どのような作業か
+
記事の技術的な正確性と完全性の確認と修正です。
+
行う必要があるものはどれか
+
特に技術レビューが必要だとマークされている記事です。
+
作業を行う上で必要な知識
+
+
    +
  • レビューをする記事の話題に関するエキスパートとしての知識。もしその記事を読んで特に新しい知識が得られないようであれば、自分はエキスパートだと考えてください。
    • +
  • MDN のウィキの記事を編集する方法。
    • +
+
+
作業のステップ
+
+
    +
  1. レビューする記事を選んでください。 +
      +
    1. 技術レビューが必要なページの一覧に行きましょう。この一覧には、技術レビューが必要なページがすべて掲載されています。
      2. +
    2. 自分が詳しい話題のページを選択しましょう。
      3. +
    3. 記事のリンクをクリックしてページを読み込んでください。
      4. +
    +
    2. +
  2. 技術的な詳細に注意を払いながら、記事を読んでください。記事は正しいでしょうか？抜けていることはないでしょうか？最初に選択したページが自分に合わないようであれば、ためらわずに他のページに切り替えましょう。
    3. +
  3. エラーがなければ、レビューを完了するために記事を編集する必要はありません。ページの左のサイドバーにある「クイックレビュー」ボックスを見てください。この黄色いボックスでは、レビュー待ち項目の一覧が表示されており、レビューリクエストフラグを解除することができます。技術レビューがリクエストされていると、以下のようになります。
    + サイドバーに表示されるクイックレビューボックスに技術レビューが表示されている様子
    4. +
  4. 「技術面」のチェックを外し、［保存］をクリックしてください。
    5. +
  5. エラーを見つけて修正しなければならないときは、嬉しいことにレビューリクエストの状態をエディターから変更することができます。手順は以下の通りです。 +
      +
    1. ページを編集するために、ページの先頭付近にある［編集］ボタンを押してください。これで MDN エディター に入ります。
      2. +
    2. 正しくない技術情報を修正したり、欠けている情報を補ったりしてください。
      3. +
    3. 記事の下にあるリビジョンのコメントを入力してください。ここにはどのような編集を行ったかを短いメッセージで、「技術レビュー完了」のように書きます。情報を修正した場合は、それを「技術レビューを行い、引数の説明を修正した」のようにコメントに書いてください。これは他の協力者やサイトの編集者がなぜ変更されたのかを知る手掛かりになります。レビューの品質に達していないと感じた場合は、それを書いてもいいでしょう。
      4. +
    4. ページのリビジョンのコメントのすぐ上、「レビューが必要ですか？」下にある「技術レビュー」ボックスのチェックを外します。
      5. +
    5. ［公開］ボタンを押してください。
      6. +
    +
    6. +
+ +

おめでとうございます！これで最初の技術レビューが完了しました。ご協力ありがとうございました。

+
+
diff --git a/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..fbcbb03e99 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,58 @@ +--- +title: 編集レビューを行う方法 +slug: MDN/Contribute/Howto/Do_an_editorial_review +tags: + - Documentation + - Editorial Review + - Guide + - Howto + - MDN Meta + - 文書化 + - 編集レビュー +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +

編集レビューは、記事内の誤植、言葉遣い、文法、用法などの間違いの修正などの作業です。 MDN の技術文書に価値ある協力を行うためには執筆の専門家である必要はありませんが、記事には校正や精読が必要です。これが編集レビューで行われます。

+ +

この記事は、編集レビューを行う方法について記述します。編集レビューをすることで、 MDN のコンテンツを正確かつ、良く書けたものにする手助けができます。

+ +
+
何をすればいいですか？
+
編集レビューが必要であるとマークされた記事の校正と精読です。
+
レビューが必要な記事はどこにありますか？
+
記事内に、編集レビューが必要とマークされています。
+
編集レビューをするには、何を知っておく必要がありますか？
+
日本語の文法と語彙についてよく知っている必要があります。編集レビューとは、正しくわかりやすい文法や言葉を選択する作業です。また、 MDN 執筆スタイルガイドにも従ってください。
+
レビューする手順は？
+
+
    +
  1. レビューする記事を選びます。 +
      +
    1. 編集レビューが必要な記事の一覧に行ってください。この一覧には、編集レビューがリクエストされたすべてのページが表示します。
      2. +
    2. 記事のリンクをクリックしてページを読み込みます。
      + 注: この一覧は自動的に生成されますが、あまり頻繁的ではないので、編集レビューが必要なくなった記事が載っていることもあります。選択した記事に「この記事は編集レビューが必要です」というバナーが表示されていなければ、飛ばして別な記事を選んでください。
      3. +
    +
    2. +
  2. 記事を注意深く読み、誤植、言葉遣い、文法、用法などの間違いがないか確認します。選んだ記事が自分のやりたいものと違っていたら、気にせず別のページに移動してください。
    3. +
  3. これ以上直すべきところがなければ、編集はせずに、レビュー済みとしてマークしてください。ページ左のサイドバーにある「クイックレビュー」ボックスを見てください。
    + レビューリクエストボックス(日本語版)
    4. +
  4. 編集レビューのチェックボックスのチェックを解除して、保存をクリックします。
    5. +
  5. 直すべきところを見つけた場合には、次の手順に従います。 +
      +
    1. 上部にある編集ボタンをクリックします。クリックすると、MDN エディターが開きます。
      2. +
    2. 誤植、言葉遣い、文法、用法などの間違いを見つけたら修正します。一度にすべての箇所を修正しなくても構いません。ただしその場合には、記事全体のレビューが完全に終わったと考えられない限り、編集レビューのリクエストはそのままにしておいてください。
      3. +
    3. 記事の下部にある リビジョンのコメント 欄に 「編集レビュー: 誤植、文法の修正。」のようなコメントを入力します。このようなコメントを書いておけば、他の協力者やサイトの編集者たちが、どの部分がどんな理由で変更されたのかを簡単に知ることができます。
      4. +
    4. レビューが必要ですか？ の下にある 編集レビュー のチェックボックスのチェックを外します。このボックスは、ページの「リビジョンのコメント」セクションのすぐ下にあります。
      5. +
    5. 公開ボタンをクリックします。
      6. +
    +
    6. +
+ +
+

あなたが行った変更は、保存直後には表示されないことがあります。背後で行っているページの処理や保存に時間がかかることがあるためです。

+
+
+
diff --git a/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html b/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html new file mode 100644 index 0000000000..90c42d4705 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/remove_experimental_macros/index.html @@ -0,0 +1,48 @@ +--- +title: 実験的なマクロをいつどのように削除するか +slug: MDN/Contribute/Howto/Remove__Experimental__Macros +tags: + - MDN Meta + - ガイド + - 方法 +translation_of: MDN/Contribute/Howto/Remove_Experimental_Macros +--- +
{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}
+ +

MDN 上のページには、ページによって記述された Web 技術機能が実験的でまだ標準化されていないことを読者に通知するための KumaScript マクロが含まれています。しかし、実験的としてフラグが設定されている項目は標準化されている可能性がありますが、そのページはマクロを削除するために再訪されません。これらの「実験的な」マクロを含むページを見直し、実験的でないアイテムからマクロを削除することで、MDN の改善に役立てることができます。

+ +

問題のマクロはページ内の特定の項目にフラグを立てる {{TemplateLink("experimental_inline")}} と、ページ全体にフラグを立てる {{TemplateLink("SeeCompatTable")}} です。

+ +
+

Warning: SeeCompatTableの使用は推奨しません。互換性に関するすべてのデータは、ブラウザの互換性表とその中の脚注内に表示されることが期待されています。

+
+ +

Here is the definition of "experimental" from the MDN Definitions and Conventions article:

+ +

{{page("/en-US/docs/MDN/Contribute/Guidelines/Conventions_definitions", "Experimental")}}

+ +
+
Where does this task need to be done?
+
+

Pages in the following lists:

+ + +
+
What do you need to know to do the task?
+
Knowledge of the standardization or implementation status of the relevant item.
+
What are the steps to do the task?
+
+
    +
  1. Review the page to see what item or items the macro is associated with.
    2. +
  2. Determine whether each item is still experimental or not. The compatibility table on the page may be more current than the the macros; you can also test using the item in multiple browsers.
    3. +
  3. If an item is no longer experimental, remove the "experimental" macro call associated with it. (Note: an item on a summary page that has the {{TemplateLink("experimental_inline")}} macro next to it is often a link to a full reference page, containing the {{TemplateLink("SeeCompatTable")}} macro.
    4. +
  4. Save the page with a comment about what you did.
    5. +
  5. If you have removed all "experimental" macros from a page (for inline macros, you might remove only some of them), force a refresh (Shift+Refresh) on the relevant search results page (linked above) to ensure that the list is updated.
    6. +
+
+
diff --git a/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html b/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html new file mode 100644 index 0000000000..f268a9957b --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/resolve_a_mentored_developer_doc_request/index.html @@ -0,0 +1,34 @@ +--- +title: 世話人のいる開発者文書リクエストの解決方法 +slug: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request +tags: + - Beginner + - Documentation + - Guide + - MDN Meta +translation_of: MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request +--- +
{{MDNSidebar}}
+ +

MDN Web Docs プロジェクトには、 Mozilla の Bugzilla インスタンスに、変更をリクエストする大きなバックログがあります。問題を修正してリクエストを閉じていただくことによって MDN を改善することができます。

+ +

どこにで実施する必要があるのか

+ +

Mentored MDN bugs on Codetribute から見つけることができます。 Bugzilla の課題は、改善のリクエストや新しい素材や機能のアイディアも含めて、すべて「バグ」と呼ばれています。このリストのバグは MDN に初めて協力している人にとって良いものと判断されたものであり、問題を解決する上でガイダンスやアドバイスを行ってくれる世話人が割り当てられています。

+ +

タスクを実行するのに知っておく必要があることは何か

+ +

選択した作業のリクエストの主題に詳しい必要があります。MDN の編集や Bugzilla の利用にいくらか馴染んでおくといいでしょう。

+ +

どのようなステップで行うのか

+ +
    +
  1. 関心のありそうで、自分の知識の範囲内にあるリクエストを選択してください。完全に分かっていないものを選択しても、その中で必要なことを合理的に学ぶことができるのであれば構いません。
    2. +
  2. リクエストを注意深く読んで、何がリクエストされているかを確認してください。また、 Mentors (世話人) フィールドに挙がっている名前に注意してください。世話人は、あなたのような人がリクエストを処理することを助けるために打ち込んでいる人です。
    3. +
  3. まだ済んでいないのであれば、 Bugzilla のアカウントを作成してください。
    4. +
  4. 処理するリクエストを決めたら、リクエストを自分自身に割り当ててください。 Assigned To フィールド (名前やメールアドレスを入れるところ) の隣にある "take" リンクをクリックし、それから Save Changes ボタンをクリックしてください。世話人はリクエストの所有権をあなたが取ったことを知ります。
    5. +
  5. MDN でリクエストを満たすために必要な作業を行います。世話人に質問する必要があれば、リクエストにコメントを追加してください。仕事が基本的に終わったか、世話人にレビューを依頼するのもいいでしょう。
    6. +
  6. リクエストが満たされたことをあなたと世話人が確認したら、 Status を RESOLVED に変更し、解決状況を FIXED にして Save Changes をクリックしてください。
    7. +
+ +

以上です。文書のバグ修正は完了です。

diff --git a/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..0c560dbc04 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,116 @@ +--- +title: ページに概要を設定するには +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - Documentation + - Guide + - Howto + - MDN Meta + - SEO + - Summaries + - Summary +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +

この記事では、 MDN Web Docs サイトにおける SEO summary (description または単に summary とも) を設定する方法を示します。この概要はいくつもの用途で使用されます。

+ + + +

したがって、概要は記事自体の文脈でも、他の文脈内に単独で表示された場合でも、意味が分かるようにしてください。また、概要のテキストを書く際には MDN 執筆スタイルガイドを意識しておいてください。

+ +

既定の概要

+ +

概要のないページは、既定の概要が明確に設定されます。既定では、概要のテキストは、 {{Glossary("HTML")}} の最初の題名ではなくテキストの内容と見られるブロックのテキスト全体です。しかし、これが使用するのに最適なテキストとはならない可能性がいくつもあり得ます。

+ + + +

明示的にページの概要を設定し、概要ができるだけ有益になるようにするのが最善です。

+ +

概要の設定

+ +

ページの概要の設定についての方法を見てみましょう。

+ +
訳注: 以下の説明は、英語版における操作方法です。英語からの翻訳ページの場合は、まず英語版の概要を修正した上で、日本語版ページ翻訳を反映してください。
+ +

どのような作業か

+ +

他の文脈で概要として使用するページ内のテキストをマークします。適切なテキストが利用できない場合は、適切な短いテキストを書く作業も含まれるかもしれません。

+ +

どこで行う必要があるのか

+ +

概要のないページ、概要があるが有益ではないページ、概要が推奨されるガイドラインに合っていないページです。

+ +

この作業で必要なスキル

+ +

MDN エディターが使えること。英語でよい文章を書くスキル。良い要約を書くために、主題に十分通じていること。

+ +

作業のステップ

+ +
    +
  1. 概要を設定するページを選択してください。すでにあるのであれば、素晴らしい！ステップ2まで飛ばしてください。そうでなければ、修正するページを探します。 +
      +
    1. MDN 文書化状況のページで、よく知っている主題 (例えば HTML) の Sections の下のセクションをクリックします。
      +
      2. +
    2. 主題についての文書化ステータスのページで、Summary 表の Pages をクリックします。その主題の節にあるすべてのページの索引が表示されます。左の列にはページへのリンクが、タグと概要は右の列に表示されます。
      +
      3. +
    3. 概要がないか、概要が良くないページを選択します。
      +
      4. +
    4. リンクをクリックしてそのページへ移動します。
      5. +
    +
    2. +
  2. 概要を追加したいページに来たら、 編集 をクリックして、ページを MDN エディター内に開きます。エディターの使用についての情報が必要であれば、 MDN エディター UI のガイドを参照してください。
    3. +
  3. 文脈の外に出しても概要として使える1～2文を探します。必要であれば、1～2文でよい概要として選択できる文になるようテキストを作成または変更します。{{anch("Crafting a good summary", "よい概要の作成")}}を見ると、適切な概要を選択したり作成したりするのに役立ちます。
    4. +
  4. 概要として使用するテキストを選択します。
    5. +
  5. エディタツールバーの Styles ウィジェットで、 SEO Summary を選択します。ページのソースでは、選択したテキストが、 class="seoSummary" をつけた {{HTMLElement("span")}} 要素で囲まれます。
    +
    6. +
  6. リビジョンのコメントをつけて変更を保存します。コメントは必須ではありませんが、付けることを強く推奨します。そうすることで、他の人が変更を追跡しやすくなります。付けるのを勧める。「SEO summary を設定」のようなものでも充分です。
    7. +
+ +

よい概要の作成

+ +

概要は以下のような、多数の異なるシナリオで使用されます。

+ + + +

概要を作成する上で、これらのシナリオを念頭に置いておくことが重要です。これらの場面のすべてで概要がよく機能することを保証できるように、以下のガイドラインに従ってみてください。

+ +
+

メモ: 他に特別に示されていない限り、これらはガイドラインであり、杓子定規の規則ではありません。これらのガイドラインに合うようにするべきですが、時には避けられない例外もあります。

+
+ + + +

この概要は、本の裏表紙または表紙の内側の宣伝文句 ({{interwiki("wikipedia", "en:blurb")}}) に似ていると考えてください。この短いテキストは、すばやく読者の注意を惹き、読み進める気を起させるものです。読者の注意をすばやくキャッチし、読者に読み進めてもらう必要があります。

+ +

検索エンジンの結果ページと記事テキスト自体の両方でうまく機能する概要を書くことは少し難しいかもしれませんが、現在 MDN はページの内容とは別に SEO 用の概要を作成する方法を提供していませんので、できる範囲でやってください。

+ +

関連情報

+ + diff --git a/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..22a77ce10c --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html @@ -0,0 +1,76 @@ +--- +title: JavaScript ページのタグ付け方法 +slug: MDN/Contribute/Howto/Tag_JavaScript_pages +tags: + - Guide + - Howto + - JavaScript + - MDN Meta + - ガイド + - 入門 +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}
+ +

タグ付けはページにメタ情報を追加することであり、検索ツール等において関連するコンテンツをグループ化することができます。

+ +
+
どこに設定すべき？
+
JavaScript 関連のページでタグの無いもの (日本語版)のどれか{{訳注("日本語版のステータスページにはタグの無いページのリストがありません")}}
+
タグ付けするために知っておくべきことは？
+
メソッドやプロパティとは何か、というような、基本的な JavaScript コーディングの知識。
+
どんな手順でやればいいの？
+
+
    +
  1. 上記リンクにあるリストから、対象のページを選びます。
    2. +
  2. 記事のリンクをクリックして、ページをロードします。
    3. +
  3. ページがロードできたら、上の方にある 編集 ボタンを押します。するとMDNエディターが始まります。
    4. +
  4. 最低でも JavaScript タグは付けるべきです。以下のようなタグも付けましょう。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    タグ使う対象のページ
    Methodメソッドのページ
    Propertyプロパティのページ
    prototypeプロトタイプのページ
    オブジェクトの型名オブジェクトのメソッドのページ。例えば、 String.fromCharCode には String タグをつけるべき
    ECMAScript6 と Experimental新しい ECMAScript バージョンで追加される機能のページ
    Deprecated非推奨の (deprecated) 機能のページ (使うことが推奨されないが、まだサポートされている機能)
    Obsolete廃止された (obsolete) 機能のページ (最近のブラウザーがサポートしない機能)
    その他これ以外にどんなタグがあるのかは、 MDN タグ付け標準をご覧ください。
    +
    5. +
  5. コメントを付けて保存します。
    6. +
  6. 完了です！
    7. +
+
+
diff --git a/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html b/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html new file mode 100644 index 0000000000..c618e45ccb --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/use_navigation_sidebars/index.html @@ -0,0 +1,91 @@ +--- +title: ナビゲーションサイドバーの使い方 +slug: MDN/Contribute/Howto/Use_navigation_sidebars +tags: + - Documentation + - Draft + - HTML + - MDN + - MDN Meta + - MDN Web Docs + - Macros + - Meta + - NeedsContent + - Tutorial + - sidebars + - マクロ +translation_of: MDN/Contribute/Howto/Use_navigation_sidebars +--- +

{{MDNSidebar}}{{Draft}}

+ +

MDN の操作はよくサイドバーを用いて行われ、これは一連の記事や、同じ系列のドキュメントと MDN の他の領域の両方における関連コンテンツを列挙します。 MDN のサイドバーは自動的には生成されません。ページにサイドバーを入れるには、いくらかのマクロを作成し使用する必要があります。この記事では、 MDN サイドバーマクロの作成と記事内での使用方法の両方の手順を確認します。

+ +

現在の MDN のサイドバーマクロ

+ +

MDN には既に、サイドバーを生成するたくさんのマクロがあります。多くは MDN の特定のセクションに特化していますが、他に、特化したものがない文書領域のための一般的なサイドバーを生成するためのものがあります。

+ +
+
{{TemplateLink("AddonSidebar")}}
+
アドオンの文書を操作するためのサイドバーを挿入します。これは主にブラウザー拡張機能の作成についてのコンテンツです。
+
{{TemplateLink("APIRef")}}
+
API インターフェイスのリファレンスページおよびサブページで使用されるサイドバーを挿入します。
+
{{TemplateLink("CanvasSidebar")}}
+
HTML/DOM Canvas の文書の中で使用されるサイドバーを挿入します。
+
{{TemplateLink("DefaultAPISidebar")}}
+
特化したサイドバーのタイプがない API の API 概要ページで使用することができる既定のサイドバーを挿入します。
+
{{TemplateLink("FirefoxSidebar")}}
+
Firefox に特化した文書で使用されるサイドバーを挿入します。
+
{{TemplateLink("GamesSidebar")}}
+
ウェブ技術を使ったゲーム開発に関する MDN のコンテンツを操作するサイドバーを挿入します。
+
{{TemplateLink("HTMLSidebar")}}
+
MDN の HTML 文書で使用されるサイドバーを挿入します。
+
{{TemplateLink("HTTPSidebar")}}
+
MDN の HTTP 文書内のページで使用するためのサイドバーを挿入します。
+
{{TemplateLink("JSSidebar")}}
+
JavaScript 文書で使用するためのサイドバーを挿入します。
+
{{TemplateLink("LearnSidebar")}}
+
学習エリアのサイドバーを挿入します。
+
{{TemplateLink("MDNSidebar")}}
+
MDN の「メタ文書」、つまり、 MDN Web Docs サイト自体の利用や編集に関する文書を操作するサイドバーを挿入します。このページで実際にマクロが使われているのを見ることができます。
+
{{TemplateLink("ServiceWorkerSidebar")}}
+
サービスワーカーについての文書で使用されるサイドバーを挿入します。
+
{{TemplateLink("SpiderMonkeySidebar")}}
+
SpiderMonkey (Mozilla の JavaScript エンジン) のページに使用するサイドバーを挿入します。
+
{{TemplateLink("ToolsSidebar")}}
+
Firefox 開発ツールについてのページを列挙するサイドバーを挿入します。
+
{{TemplateLink("WebAssemblySidebar")}}
+
WebAssembly に関するリンクを含むサイドバーを挿入します。
+
{{TemplateLink("WebExtAPISidebar")}}
+
ブラウザー拡張 (WebExtension) についての API リファレンス文書を操作するために使われるサイドバーを挿入します。
+
{{TemplateLink("WebGLSidebar")}}
+
WebGL に関するコンテンツの操作を提供するサイドバーを挿入します。
+
{{TemplateLink("WebRTCSidebar")}}
+
MDN の WebRTC 文書の操作を提供するコンテンツのサイドバーを挿入します。
+
{{TemplateLink("XSLTRef")}}
+
XSLT, EXSLT, XPath についての文書のサイドバーを挿入します。
+
+ +

サイドバーの使用

+ +

サイドバーをページに追加するには、正しいマクロを探し、それから、サイドバーを挿入したいページで、「編集」ボタンをクリックしてください。ページに {{HTMLElement("p")}} ブロックを追加して、中身はマクロを呼ぶだけにしてください。そうすれば、マクロ呼び出しを追加することができます。通常、サイドバーマクロは引数を必要としませんので、単に次のように書くことができます。

+ +
<p>\{{MDNSidebar}}</p>
+ +

通常は、これを文書の最初の行に入れてください。一部の文書では、代わりに末尾に入っています。これはうまく動作しますが、一貫性を保証するために、できれば先頭に配置してみてください。

+ +

すでにマクロを呼び出す {{HTMLElement("p")}} ブロックがページの先頭にある場合、例えばバナーを生成する \{{Non-standard_Header}} などがある場合は、次のように同じ {{HTMLElement("p")}} の中にサイドバーのマクロを入れることができます。

+ +
<p>\{{HTTPSidebar}}\{{Non-standard_Header}}</p>
+ +

サイドバーの作成

+ +

詳細は執筆中

+ +

{{TemplateLink("SidebarUtilities")}} について触れておきます。

+ +

サイドバーの構築に役立つマクロがいくつかあります。

+ +
+
{{TemplateLink("ListSubpagesForSidebar")}}
+
指定されたページのサブページを使用して、サイドバー内で利用するために構築されたリンクのツリーを生成します。
+
diff --git a/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..6f8ae106d1 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html @@ -0,0 +1,113 @@ +--- +title: ウェブ学習者に役立つ記事を書く方法 +slug: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +tags: + - Guide + - Howto + - Learn + - MDN Meta +translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web +--- +
{{MDNSidebar}}
+ +

MDN の学習エリアには、ウェブ開発の初心者向けの記事がまとまっています。ほとんどの内容が初心者向けであるため、知識を共有したりウェブへの入門者を手助けするのに良い場所となっています。ウェブ開発初心者でも内容を理解できることが大事なので、それについて特に注意を払っています。

+ +

この記事は学習エリアのページの書き方を説明しています。

+ +
+

訳注: この記事は英語の学習エリア記事を新規作成する方法について述べています。日本語の記事は英語記事を翻訳して作成してください。英語ページに該当する記事がない場合は、まず英語記事を作成してください。

+
+ +

学習エリアの記事の書き方

+ +

知識を持って協力を始めるには、大きな緑色のボタンをクリックし、以下の5つのステップに従ってください。アイディアを探しているのであれば、 Trello のチームのボードを参考にしてみてください。

+ +
学習エリアの記事を書く
+ +

この記事の場所は正しくないかもしれませんが、少なくとも MDN 上にあります。もし正しい場所へ移動するために誰かと連絡を取りたい場合、ご連絡ください。

+ +

ステップ 1: 最初の2文を書く

+ +

記事の1文目には、書こうとしている主題の要約を書く必要があります。2文目には記事に書こうとしている項目をもう少し具体的に書きましょう。例えば下記のようになります。

+ +
+

{{glossary("HTML")}} ファイルが構造的なコンテンツを持つ一方、もうひとつの主要なウェブ技術である {{Glossary("CSS")}} は、コンテンツを望み通りの外見にします。この記事では、この技術がどのように動いているのかと、基本的な書き方のサンプルを紹介します。

+
+ +

上記の例では、CSS がページをスタイルするためのウェブ技術の核であることを簡潔に説明しています。これにより、読者は記事が対象とする範囲を予想するのに十分な情報を得ることができます。

+ +

学習エリアの主な対象者は初心者です。そのため個々の記事は、読者があまりにも多い情報に圧倒されないように、1 つの単刀直入なテーマを対象にすべきです。もし要約が 1行に収まらない場合、1 つの記事に過剰な内容を書こうとしているかもしれません！

+ +

ステップ 2: 上部ボックスを追加する

+ +

上部ボックスを追加して、読者が学習プロセスのどこにいるのか理解しやすくしてください。これは「URL とは何か」の上部ボックスの例です。記事を書く際に、この記事をモデルとして使用することができます。

+ + + + + + + + + + + + +
前提知識:まずインターネットの仕組み、ウェブサーバーとは何か、および ウェブ上のリンクの背後にある概念を知っておく必要があります。
到達目標:URL の内容とウェブ上での URL の仕組みを学習します。
+ +
+
前提知識
+
読者が記事を読む際に事前に知っておくべきことを書きます。可能なら、個々の前提知識に、その概念を網羅する他の学習エリア記事のリンクをつけます (本当に初歩の記事で、前提知識を網羅する要求しない場合を除く)。
+
到達目標
+
読者が記事を読んだ後に何を学べるかを簡潔に書きます。記事の冒頭に書く要約とは少し違って、この到達目標の節では、読者が記事を読むことで達成を期待されるものを具体的に示します。
+
+ +
+

メモ: この表を作るには、上記の例をコピーして貼り付けるか、 MDN エディターの表ツールを使用してください。表ツールを使う場合は、 CSS に learn-box クラスを、既定値の standard-table クラスに加えて追加する必要があります。このために、表のプロパティを作成または編集する際に、「高度な設定」パネルに行きスタイルシートクラス欄に "standard-table learn-box" を設定してください。

+
+ +

ステップ 3: 詳細説明を書く

+ +

次に、記事で最も強調したい概念についての徹底的な概要となるような、もっと長くて詳細な説明を書きましょう。なぜ読者が時間を費やしてこの記事を読み、その内容を学ぶべきかについての説明を忘れないように！

+ +

ステップ 4: 深掘りする

+ +

これまでの部分をやり終えたら、トピックを深掘りしましょう。記事を好きなように構造化して問題ありません (ただし、スタイルガイドを気軽に参照ください)。この部分はあなたの記事を輝かせるチャンスです！書こうとしている内容を詳しく説明しましょう。参考情報へのリンクを加え、その技術がどのように動くのかを詳しく説明し、文法や使い方の詳細などを書きましょう。すべてあなた次第です！

+ +

ガイドとして、以下は初心者向けの書き方のコツです。

+ + + +

関数 — 再利用可能なコードブロックの記事には良い説明が含まれています。参考にしてみてください。

+ +

ステップ 5: 「アクティブラーニング」の教材を提供する

+ +

記事を解説し読者の理解を助けるために、実習、チュートリアル、達成すべきタスクを提供しましょう。読者は記事で説明されている概念を実際に使ったり、実験したりしてみることで、脳内に情報を強く結びつけることができます。

+ +

用例はライブデモのように記事に直接含めることもできますし、リンクすることもできます。もしそういった価値のある教材の作成に興味があるなら、インタラクティブな学習用教材を作成する方法の記事を読んでみてください。

+ +

もしアクティブラーニング教材へのリンクを提供できない (知らない・時間がなくて作れない) 場合は、記事に {{Tag("NeedsActiveLearning")}} タグを追加してください。そうすれば、他の協力者が、アクティブラーニングを必要とする記事を見つけやすくなり、収集するのを手伝うことができます。

+ +

実習: 別な要素の選択 をインタラクティブな学習用教材として、 アクティブラーニング: scopeで遊んでみよう をファイルをダウンロードし、編集するステップを踏みながら学んでいくような、別のスタイルの実習サンプルとして参考にしてください。

+ +

ステップ 6: 記事のレビューを受け、ナビゲーションメニューに追加する

+ +

記事を書き終えたら、我々が確認とレビューを行ない、改善点を提案できるように教えてください。再掲になりますが、連絡を取るための最善の方法は連絡方法の節をご覧ください。

+ +

記事を完了するためのもうひとつのタスクは、その記事を学習エリアのメインナビゲーションメニューに追加することです。このメニューは、編集するのに特別な許可が必要な LearnSidebar macro によって生成されています。そのため、追加するには我々のチームにご連絡ください。

+ +

メニューは少なくとも、あなたの記事には追加すべきです。 — マクロの \{{LearnSidebar}} をページ最上部の段落に加えましょう。

+ + + +

おすすめの記事

+ +

何か記事を書きたいけど、何を書けばいいか分からないでしょうか？

+ +

学習エリアのチームは書くべき記事のアイデアを Trello のボードで管理しています。好きなものを選んで取りかかってください！

diff --git a/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html b/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html new file mode 100644 index 0000000000..5ac438ec39 --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/howto/write_interface_reference_documentation/index.html @@ -0,0 +1,99 @@ +--- +title: Mozilla インターフェイスのリファレンス文書の書き方 +slug: MDN/Contribute/Howto/Write_interface_reference_documentation +tags: + - Guide + - Howto + - MDN Meta +translation_of: MDN/Contribute/Howto/Write_interface_reference_documentation +--- +

{{MDNSidebar}}

+ +

この記事では、 Mozilla のインターフェイスのために、適切にフォーマットされた有用なドキュメントを作成する方法を示します。それぞれのインターフェイスは、記事のタイトルをインターフェイスの名前にして、個別の記事で文書化されなければなりません。

+ +
+

重要: 私たちは、Mozilla 内部のインターフェイス (ほとんどが nsI で始まる) を MDN 上で積極的にドキュメント化することはもうありません。これらのドキュメントが将来どこに置かれるべきかの最終決定はまだ検討中ですが、それまでの間、あなたの時間を使って MDN にドキュメントを書くことは一般的にお勧めしません。

+
+ +

Learn by example

+ +

See our sample interface document for a fictional interface that implements all the features of a complete interface reference document. This article can serve as a helpful template when documenting an interface.

+ +

Interface reference sections

+ +

Each interface reference article has at least an introduction section (which has no heading). The introduction should provide an overview of what the interface is used for.

+ +

Following the table of contents, use the {{TemplateLink("IFSummary")}} macro to describe the location and status of the interface in the source tree.

+ +

The parameters to the IFSummary macro are:

+ +
+
Path of the IDL file defining the interface
+
This is used to create a link to the interface's IDL on MXR so the reader can refer to it if they wish.
+
Parent interface
+
This is the name of the interface upon which the interface being documented is based. This will be turned into a link to that interface in the interface reference and displayed.
+
scriptable/not scriptable
+
A string indicating whether the interface is scriptable or not. You must use either "scriptable" or "not scriptable" (these are, however, case insensitive). This will be turned into an appropriate indicator in the box, colored green for scriptable interfaces or red for non-scriptable ones. The indicator will also include a link to an article explaining what this means.
+
Last changed in what Gecko version
+
This is a string indicating the version of Gecko in which the interface was last changed. It should be a string in standard Gecko version format, such as "1.9" or "1.9.2" or even "1.9.1.6".
+
Summary{{Optional_Inline}}
+
A brief textual summary of what the interface does. Should be just a sentence or two. This is only optional for backward compatibility with old interface documents using the now deprecated InterfaceStatus macro (which now calls through to this one). You should always provide this.
+
Version introduced{{Optional_Inline}}
+
If you know the version of Gecko in which the interface was introduced, include that here. This will trigger the inclusion of a version timeline diagram showing the availability of the interface in relation to the history of Gecko.
+
Version deprecated{{Optional_Inline}}
+
If the interface is deprecated, include that here. This will be used when drawing the version timeline diagram.
+
Version obsoleted{{Optional_Inline}}
+
Similarly, if the interface is obsolete and no longer available at all, include the Gecko version in which that took effect.
+
+ +
+
{{todo("Should describe the 'Implemented by' section here")}}
+
+ +

All other sections are usually optional, but may be necessary depending on the interface. The optional sections are:

+ +

Method overview

+ +

The method overview is a table that simply lists all the method signatures for each method provided by the interface. The method's name should be a clickable link to the method description itself. Ideally, the methods should be listed in alphabetical order.

+ +

If a method supports multiple types for a given input parameter, you can list them using the format [type1, type2, ..., typeN].

+ +

Attributes

+ +

The attributes section consists of a three column table. The first column contains the names of each attribute offered by the interface. The second column indicates the types of each attribute; these types should be links for non-simple types. The third column should describe the attribute, explaining its use and providing any details needed. Please list the attributes in alphabetical order; you can sort the table after the fact by right-clicking in it; there's a "Sort Table" option in the contextual menu.

+ +

定数

+ +

Each group of constants should have a sub-section containing a table describing the relevant constants. The table should have three columns: Constant (the names of the constants), Value (their values), and Description (descriptive text explaining the use of the constant).

+ +

Methods

+ +

The methods section provides detailed documentation for each method offered by the interface. Within the methods section should be a subsection for each method. Each method's subsection name should include closing parentheses (such as "parseAsync()" in the {{Interface("nsIFeedProcessor")}} interface reference.

+ +

The methods should be listed in the same order in which they appear in the "Method overview" section.

+ +

Each method's subsection should begin with a description of what the method does, followed by the actual method signature itself. Each parameter to the method should be on a separate line for clarity.

+ +

After the method signature should come a "Parameters" subsection. In order to avoid cluttering the table of contents for the page, we use <h5>Parameters</h5> to define the Parameters subsection's heading.

+ +

The parameters are then listed with descriptions of each parameter using definition list format. If there are no parameters, write the word 'None' under the Parameters heading.

+ +

If the method has a return value, include a "Return value" subsection, using the form <h5>Return value</h5>. This subsection should simply explain the return value, its type, and if applicable its possible values.

+ +

If the method can throw exceptions, a similar "Exceptions thrown" subsection should be included, containing a definition list style list for each possible exception.

+ +

Remarks

+ +

Any general comments that apply to the interface as a whole may be placed in the Remarks section.

+ +

See also

+ +

If links to other interfaces, or to any other documents, might be helpful to the reader, these should be listed in the "See also" section.

+ +

Categorizing articles

+ +

Each article that documents an interface needs to be added to the Interfaces category by adding the "Interfaces" tag. Likewise, the article should have any other appropriate tags.

+ +

Finding articles that need help

+ +

Look through the interface list and see if any are marked as being in the category NeedsMarkupWork. These are interfaces that we know need to be reformatted into our new layout. If you clean one up, remove the line that adds it to that category.

diff --git a/files/ja/orphaned/mdn/contribute/onboarding/index.html b/files/ja/orphaned/mdn/contribute/onboarding/index.html new file mode 100644 index 0000000000..097e2bd38b --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/onboarding/index.html @@ -0,0 +1,99 @@ +--- +title: 'MDN web docs: 搭乗ガイド' +slug: MDN/Contribute/Onboarding +tags: + - MDN Meta + - ガイド + - ドキュメント + - 初心者 + - 書き方 +translation_of: MDN/Contribute/Onboarding +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +

この文書では、 MDN でフルタイムで作業するプロのライターが、始めるにあたって知っておくべきトピックについて説明します。気軽な態度で MDN に協力する場合は、気にする必要はありません。いきなり始めることができます。また、興味があるのであれば暇な時に読んでいただいても構いません。

+ +

MDN web docs とは

+ + + +

ガイドライン

+ +

以下は、プロのライターが一般的に新しい環境で働き始める前に知りたいと思うことです。

+ + + +

MDN wiki の基本的な使い方

+ +

以下の記事は、 MDN でコンテンツの作成を始めるのに必要な基本的な情報を説明しています。

+ + + +

高度な使い方

+ +

以下の記事では、 MDN wiki の機能のうち、すぐには必要ないかもしれませんが、最終的には遭遇する可能性のある機能について説明しています。

+ + + +

プロセスとコミュニケーション

+ +

この節では、 MDN コミュニティで使用されているチャンネルや、 Mozilla MDN スタッフチームで使用されているプロセスについて解説します。

+ + + +

MDN web docs トピックエリア

+ + diff --git a/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html b/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html new file mode 100644 index 0000000000..9338fc48eb --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/processes/browser_information_resources/index.html @@ -0,0 +1,67 @@ +--- +title: ブラウザー特有の情報源 +slug: MDN/Contribute/Processes/Browser_information_resources +tags: + - Guide + - MDN Meta + - Processes + - ガイド + - プロセス +translation_of: MDN/Contribute/Processes/Browser_information_resources +--- +

{{MDNSidebar}}

+ +

各ブラウザーの開発元では、ソフトウェアの開発、課題の追跡、議論の記録のために、様々なツールや手法を用いています。この記事では、 MDN のドキュメントを書いたり、互換性に関するデータを MDN に提供したりする際に役立つ、主要なブラウザーごとのツールや情報源を列挙しています。

+ +

Chrome

+ +

コンテンツ作成中...

+ +

Edge

+ +

コンテンツ作成中...

+ +

Firefox

+ +

Mozilla は常にすべての詳細を簡単に見つけられるようにしているわけではありませんが、 Firefox プロジェクトに関する基本的なことはすべてオープンな状態で行われているので、すべてのものが公開されています。 Firefox のすべてのリリースのソースコードには、昔、 Netscape から最初にフォークされたときまでさかのぼって完全にアクセスすることができます。 Mozilla のバグデータベースにもアクセスすることができます。メーリングリストや Mozilla の Discourse サーバー、 IRC チャンネルでの議論にアクセスできます。ソフトウェアの更新が作成され、議論され、最終的にソースリポジトリにマージされたときに、レビューノートの交換にアクセスすることができます。

+ +

重要なのは、必要な情報をすべての情報から正確に切り分けることです。目の前に広がっているのは、 Mozillian たちが皮肉を込めて「Mozilla の火の海」と呼んでいる、広大なものです。利用可能な様々なリソースのそれぞれから何を学べるのかを説明するのではなく、学ぶことができるようになるために必要なものを見つけ、求める答えを見つけることができる利用可能なリソースを通る道を特定してみましょう。

+ +

ソースコード

+ +

Mercurial を介してソースコードにアクセスする通常の方法に加えて、ローカルコピーを手元に置かずにソースコード内の情報を検索する方法があります。

+ +

DXR

+ +

ソースコードに素早くアクセスする最も簡単な方法は DXR を使うことで、これは Mozilla のソースツリー全体を閲覧して強力な検索を行うことができます。他のツリーに切り替えるオプションもあるので、過去のブランチにさかのぼって見ることができ、たとえば mozilla1.9.2 は Firefox 3.6 に対応します。また、 Firefox ESR の各リリースのコードを見ることもできます。

+ +

検索は特殊な演算子に対応しています。例えば、"connect" という単語を検索することはできますが、 "connect file:.webidl" を使うと、 WebIDL ファイルのみを考慮して検索することができます。

+ +

Firefox の統合リポジトリ

+ +

Firefox のソースコードにアクセスするもう一つの便利な方法が Mozilla 統合リポジトリ (mozilla-unified リポジトリ) です。このリポジトリには、Firefox 3 に対応する Gecko 1.9 までの Firefox のソース履歴があります。興味のあるバージョンに対応する Mercurial タグを見つけることで、特定のバージョンの Firefox のソースコードを見ることができます。 DXR では、いくつかの非常に古いバージョンの Firefox を見ることができますが、ほとんどのバージョンを見る方法は提供されていないので、これは貴重なものです。このリポジトリではすべてのリリースを見ることができます。

+ +

タグの命名システムは時間の経過とともにあちこちで変更されているので、探しているものを見つけるにはちょっとした探索が必要になります。原則として、次のようなタグを探してください。

+ + + +

特定のリリースを確認したら、通常のツールを使ってコードを閲覧したり検索したり、 changelog と pushlog オプションを使って、リリースにどのような変更が加えられたかを確認することができます。

+ +

Searchfox

+ +

Searchfox のウェブサイトでは、Firefox のソースコードを検索するための別の方法を提供しています。 Searchfox は Firefox のリポジトリをインデックス化するツールです (最も便利なのは、メインの mozilla-central ソースコード と、興味深いことに WHATWG HTML 仕様書もインデックス化されていることです)。

+ +

Opera

+ +

コンテンツ作成中...

+ +

Safari

+ +

コンテンツ作成中...

diff --git a/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html b/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html new file mode 100644 index 0000000000..70ca0612ad --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html @@ -0,0 +1,64 @@ +--- +title: 文書作成のためのチーム間協力作戦 +slug: MDN/Contribute/Processes/Cross-team_collaboration_tactics +tags: + - Collaborating + - Guide + - MDN Meta + - Processes +translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics +--- +
{{MDNSidebar}}
+ +

私たちが MDN で学んだことのひとつは、開発チームと文書作成チームが共にあるプロジェクト、API、またはある技術について密接に協力して文書を作成した場合、その文書の品質が素晴らしいということです。このガイドは開発者と文書作成者が手と手を取って協力するための戦略を示唆するものです。

+ +
+

この記事は今も作成中の、生きた文書です。もしもあなたの関わる開発者/文書作成者の協力の過程で別の方法を見出したなら、是非ここにそのアイディアを追加してください!

+
+ +

つながり始める

+ +

理想的には、新しいテクノロジーやプロジェクトが開発され始める時に、開発チームはライターチームに対し文書化の必要のある何かが出てくると知らせるでしょう。ときどきそうはならず、MDNチームはBugzillaを監視して文書化が必要な成果がないのか見ています。しかし完全な世界では、直接的な方法で進歩していきます。

+ +

MDN チームに新プロジェクトを知らせるための最良な方法は文書化リクエストのバグを報告することです。 質問の問い合わせ先のリストがあると助かります! プロジェクトに関連するバグのリンクが入っていてもとても助かります。

+ +

情報を共有する

+ +

情報共有の便利な方法がいくつかあります。このようなものです。

+ +

バグ

+ +

単に文書化チームに文書化に影響するバグでフラグを立てることですごく助かります。dev-doc-needed キーワードとコメントタグを適切に使すうのは長くかかることもあります。詳細は文書を最新化するを見てください。

+ +

ミーティング

+ +

開発チームは通常ミーティングをします。それが可能で役立つときには (役立つ場面は多いです)、MDN チームはミーティングに誰かを出席させようとします。何が起きているか、スケジュールはどうか、などを知るのは良い方法です。

+ +

加えて、ライターは大きな文書化エリア(例えば Web API 文書)で作業し、その文書化の状況のためだけにミーティングすることもしばしばあります。ライターは開発チーム代表がこうしたミーティングに出るのを好感します; 関係する全員にとって極めて有益です。

+ +

典型的にこれは短いチェックインのミーティングで、次のようなアジェンダを伴います:

+ +
    +
  1. 貢献するライターの短い状況更新。
    2. +
  2. 開発チームからライターへの質問/更新: 特定文書の状況の質問や、特に急ぐ特定コンテンツの情報や、既存コンテンツの問題への注意などを含みます。
    3. +
  3. ライターから開発チームへの質問/更新: 特定のバグがもうすぐ解決しそうか否かとか、特定の文書のレビューが可能になったりするかとか、ある API の質問に答えられるエンジニアがいるのかどうかとか、ライターがそんな種類の質問をできるチャンスです。
    4. +
+ +

Developer Content Coordination Meeting は毎週火曜日の太平洋時間 9 AM に、Vidyo テレビ会議システムの "mdn" チャンネル (音声のみもあり)で開催されます。このミーティングでは、MDNライターコミュニティ、開発関係チーム、API ドキュメントチーム、その他が集まって作業がどこまで進んだかや、何が出てきたかや、開発者と共有すべき最重要事項は何かといった情報交換を行います。これにより、全員がプロモーションの優先度やトピックの文書化のための同じページに乗ることができて、開発者にとって役立つ方法で知らせることのできるフィートバックを返すことにもなります。全員がそこから多くを得て、通常は30分か、少ないかくらいの時間で終わります。

+ +

集中作業週間

+ +

開発チームに集中作業週間やミートアップがあれば、関連ドキュメントのライターの招待を真剣に考えるべきです。これは多くの利益があり、次のようなものです:

+ + + +

集中作業週間があって、あなたのトピック領域の担当のライターがいるかどうかわからない場合、ドキュメントチームのリーダーにeメールしてください(Jean-Yves Perrier まで)、そして彼が誰か派遣できるか確認します。行ける人を探します (あるいは、もっと良い場合、あなたのプロジェクト担当のライターのことも)! ただ覚えてほしいのは、しかしライティングチームは小さく、集中作業週間に参加できる人がちょっとした注意で見つかることはトリッキーです。

+ +

文書化の状態を表示するページ

+ +

MDN の大き目の文書化プロジェクトでは文書化ステータスページを使って、作業を完了させるのに何をしないといけないか、また何がすでに完了しているか、追跡しています。このページは達成する必要があるタスクと、各タスクのステータスとを一覧にしています。

diff --git a/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html b/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html new file mode 100644 index 0000000000..85cce731eb --- /dev/null +++ b/files/ja/orphaned/mdn/contribute/processes/requesting_elevated_privileges/index.html @@ -0,0 +1,24 @@ +--- +title: 上位権限の申請 +slug: MDN/Contribute/Processes/Requesting_elevated_privileges +tags: + - Guide + - MDN Meta + - Processes + - ガイド + - 手続 +translation_of: MDN/Contribute/Processes/Requesting_elevated_privileges +--- +
{{MDNSidebar}}
+ +

MDN の一部のツールや操作では、通常のユーザーでは利用できない昇格したアクセス権限が必要です。

+ +

ツール使用の権限が欲しい、または必要な場合には以下の手順に従ってください。

+ +
    +
  1. mdn-admins@mozilla.org へ (英語で) メールを書き、何が必要かと、その理由をも説明してください。 MDN アカウント名を書いてください。
    2. +
  2. 権限を求めるそれぞれのツールについて、なぜあなたがその権限を得る条件を満たしているのかを説明していることを確認してください。分からない点は、そのツールの「この権限を得る条件」の節を参照してください。
    3. +
  3. 申請が承認されると、 MDN 管理者の一人がそのツールに必要な権限を付与します。
    4. +
+ +

誤った使用、濫用、重大な問題 (ツールに危険なバグが新たに発見された等) があった場合は、管理者がツールへのアクセスを停止することがあります。

diff --git a/files/ja/orphaned/mdn/dashboards/editors/index.html b/files/ja/orphaned/mdn/dashboards/editors/index.html new file mode 100644 index 0000000000..5001a43f0c --- /dev/null +++ b/files/ja/orphaned/mdn/dashboards/editors/index.html @@ -0,0 +1,21 @@ +--- +title: 編集者 +slug: MDN/Dashboards/Editors +tags: + - MDN Meta + - MDN プロジェクト + - ダッシュボード + - ドキュメンテーション +translation_of: MDN/Dashboards/Editors +--- +
{{MDNSidebar}}
+ +

編集者の総数

+ +

The amount of editors grows quickly at the beginning of the MDN history from 2005-2007, then went down and stayed flat until 2010 where it started to grow a bit. A complete changed happened in 2012 and the line grows steadily to more than 1000 editors.

+ +

タイプ別エディタ

+ +

+ +

diff --git a/files/ja/orphaned/mdn/dashboards/index.html b/files/ja/orphaned/mdn/dashboards/index.html new file mode 100644 index 0000000000..a78d68bf76 --- /dev/null +++ b/files/ja/orphaned/mdn/dashboards/index.html @@ -0,0 +1,17 @@ +--- +title: ダッシュボード +slug: MDN/Dashboards +tags: + - Draft + - MDN Meta + - ダッシュボード + - 概要 +translation_of: MDN/Dashboards +--- +
{{MDNSidebar}}{{Draft}}
+ +

いくつかの指標を表示するダッシュボードがいくつかあります。

+ +

編集者の詳細について詳細を知る

+ +

{{SubpagesWithSummaries}}

diff --git a/files/ja/orphaned/mdn/editor/basics/attachments/index.html b/files/ja/orphaned/mdn/editor/basics/attachments/index.html new file mode 100644 index 0000000000..3c9b5bf8af --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/attachments/index.html @@ -0,0 +1,79 @@ +--- +title: MDN エディターの添付ファイル +slug: MDN/Editor/Basics/Attachments +tags: + - Beginner + - Guide + - MDN Meta + - editor + - エディター + - ガイド + - 初心者 +translation_of: MDN/Editor/Basics/Attachments +--- +
{{MDNSidebar}}
+ +

MDN エディターの添付ファイルの節では、現在の文書でどのファイルが使用されているのかを確認できるとともに、MDN コンテンツで使用するファイルを MDN にアップロードすることができます。

+ +
+

この節は、ページにファイルを添付するのに必要な権限を持っている場合にのみ表示されます。既定ではユーザーはこの権限を持っていませんので、ファイルを添付する必要がある場合は、 MDN 管理者にメールで権限を申請してください。

+
+ +

添付ファイルの節が表示されるのは、既存の文書を編集する場合だけです。新しい記事を編集するためのエディターには表示されません。

+ +

添付ファイルのワークフロー

+ +

添付ファイルアップロード機能の動作は、それぞれのアップロード後に再表示されるページの中に結果が表示されます。この時点でページに行った保存前の編集があった場合は、失われる可能性があります。したがって、添付ファイルをアップロードする前にまず編集結果を保存するのがいいでしょう。

+ +

良いワークフローは以下の通りです。

+ +
    +
  1. 編集を行い、画像を挿入したい場所にプレイスホルダーのテキストを作成する。
    2. +
  2. 編集を保存する。
    3. +
  3. 画像を添付する。
    4. +
  4. プレイスホルダーの場所に画像を挿入する。
    5. +
  5. 作業を再び保存して確認する。
    6. +
+ +

添付ファイルをアップロードする際に未公開の編集がある場合は、下書きとして保存され、編集ボックスの上部にある下書きを復元リンクをクリックすることで復元することができます。また、添付ファイルをアップロードする前に公開して編集を継続をクリックしても構いません。しかし、時間が長すぎたり復元を忘れたりすると失われる可能性があるので、上記のワークフローをお勧めします。

+ +

添付ファイルのユーザーインターフェイス

+ +

ページに添付ファイルを追加するには、ファイルをアップロードボタンをクリックしてください。添付ファイルの節はこのように表示されます。

+ +

エディターの添付ファイルの節のスクリーンショット、ファイルのアップロードのためのコントロール付き

+ +

ご覧のとおり表があり、アップロードするファイルを選択し、タイトルと、任意で概要および追加のコメントを設定することができます。タイトルは必須で、ファイルを説明して文脈との関連付けが理解できるようにしてください。欄を埋めたらファイルを選択し、アップロードボタンを押して MDN に送信してください。

+ +

添付ファイルの最も一般的な利用法は、ページへの画像の追加です。画像をアップロードする際は、画像最適化ツールを使用してファイルのダウンロードができるだけ小さくなるようにしてください。これはページの読み込み時間を改善し、全体的な MDN の性能を助けます。お持ちであればお好みのツールを使用してください。そうでなければ、手軽なウェブツールとして TinyPNG を提案します。

+ +
+

MDN の添付ファイルとして許可されているのは、 GIF, JPEG, PN , HTML などのわずかなファイルタイプのみです。 Photoshop 画像は許可されていますが、非常に特殊な場合を除いて避けてください。他のファイルタイプはアップロードフォームで許可されていません。 SVG ファイルのアップロードには特殊な権限が必要ですので、 SVG ファイルをアップロードする必要があるのであれば、 MDN 執筆チームに相談してください。

+
+ +

気軽にこのページをエディターで開き、最下部の添付ファイル一覧を見てみてください。

+ +

ファイルが添付されると、記事に画像を追加する際に画像のプロパティダイアログボックスに (フォームで指定したタイトルで) 現れます。このインターフェイスの詳細は、画像を参照してください。

+ +

アクセス制限

+ +

MDN Web Docs に属さない画像のアップロードは、破壊行為やスパムにつながる可能性があることは明らかですので、このツールはすべてのユーザーが利用できる訳ではありません。

+ +

この権限を持つロール

+ + + +

この権限を得るための条件

+ +

以下の条件を満たせば、このツールへのアクセス権を得ることができます。

+ + + +

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/orphaned/mdn/editor/basics/index.html b/files/ja/orphaned/mdn/editor/basics/index.html new file mode 100644 index 0000000000..0dda9a4017 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/index.html @@ -0,0 +1,73 @@ +--- +title: エディターの UI 要素 +slug: MDN/Editor/Basics +tags: + - Beginner + - Documentation + - Guide + - MDN + - MDN Meta + - editor + - 要更新 +translation_of: MDN/Editor/Basics +--- +
{{MDNSidebar}}
+ +

MDN に組み込まれた WYSIWYG エディターは、記事やサイト内のほとんどの作成、編集、改良ができるだけ楽になるように設計されています。エディターウィンドウには、8つのキーエリアがあります。このページは、全ての編集環境の使い方がわかるように、各セクションの情報を提供します。

+ +
+

私たちは常に MDN を改良しているため、この文書やスクリーンショットがやや時代遅れになる事もあります。定期的にこの文書を更新して、使い物にならないほど遅れるのを防ぐつもりです。

+
+ +

Screenshot of the editor UI (August 2017) with each section labeled

+ +

上に示した通り、エディター UI は下記の部分から成っています。エディターの各部分については、下記のリンクをクリックして読んでください。

+ + + +

編集ボックス

+ +

編集ボックスは、もちろん、あなたが実際に執筆をするところです。

+ +

編集ボックスを右クリックすると、クリックの状況に応じて適切な追加オプションが表示されます。たとえば、テーブル内を右クリックするとテーブル関連のオプションが表示され、リスト内を右クリックするとリスト関連のオプションが表示されます。既定では、エディターを右クリックしたときに独自のコンテキストメニューを使用します。(Firefox のスペルチェッカーの推奨修正リストにアクセスするためなど) ブラウザーの既定のコンテキストメニューにアクセスするには、 Shift キーまたは Control キー (Mac OS X では Command キー) を押しながらクリックしてください。

+ +

編集ボックスで作業するときは、キーボードショートカットを使用できます。

+ +

リビジョンコメント

+ +

記事を編集した後、リビジョン (変更) にコメントを追加することを強く推奨します。これはページのリビジョン履歴に表示され、同様にあなたのリビジョンダッシュボードにも表示されます。これは作業を後でレビューする可能性がある人に、自分の変更の説明や正当化をするのに有用です。リビジョンコメントを追加するには、ページ最上部か最下部の公開ボタンを押す前に、リビジョンのコメントボックスにコメントを入力するだけです。

+ +

これが役立つ理由がいくつかあります。

+ + + +

レビュー要求

+ +

MDN コミュニティは MDN のコンテンツの監視や品質の向上の為に、レビューを使用しています。これは記事にフラグを設定することで動作し、この記事がレビューを必要としているということを知らせます。技術レビューや編集レビューについては、 How to ガイドで知ることができます。

+ +

作業している記事にレビューを求めるには、必要なレビューの隣のチェックボックスをオンにします。技術レビューは技術的なものがどのように動作するのかの説明を変更した場合に要求するべきであり、編集レビューは変更を行い、誰かに記述やスタイルの選択についてレビューしてほしい時に要求するのが良い考えでしょう。

+ +

レビューのチェックボックスを選択して、記事が技術レビュー待ちや編集レビュー待ちのリストに追加されても、誰かが記事を直ちにレビューしてくれる保証はありません。技術レビューについては、関連する技術領域の主題のエキスパートに直接連絡を取るのが良いでしょう。編集レビューについては、 MDN discussion forum (英語) に投稿して、誰かに変更をレビューするよう求めることができます。

+ +

レビューの要求を確定するには、チェックを入れた後に必ず公開ボタンのどれかを押してください。

+ +

関連情報

+ + + + diff --git a/files/ja/orphaned/mdn/editor/basics/page_controls/index.html b/files/ja/orphaned/mdn/editor/basics/page_controls/index.html new file mode 100644 index 0000000000..577473bc91 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/page_controls/index.html @@ -0,0 +1,37 @@ +--- +title: MDN エディターページコントロール +slug: MDN/Editor/Basics/Page_controls +tags: + - Beginner + - Guide + - MDN Meta + - editor +translation_of: MDN/Editor/Basics/Page_controls +--- +
{{MDNSidebar}}

ページコントロールはページ全体に影響を与えるいくつかのボタンです。エディタービューの最上部と最下部の両方にあって、過度のスクロールを省きます。4つのページコントロールボタンがあります:

+ +
+

If you try to save your page and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should email the writing team for help getting your content posted.

+
+ +
+
公開して編集を続行
+
Saves and publishes the page without closing the editor; this lets you periodically save your work, creating an entry in the page history that you can revert to if you need to, or in case you need to stop working and come back to it later. This option is not available when creating new pages. See The revision comment box to learn how to include a revision comment on your saved article.
+
公開
+
Saves and publishes the page and closes the editor, returning you to view the page in standard browsing mode. See The revision comment box to learn how to include a revision comment on your saved article.
+
プレビュー
+
Opens a new tab or window showing the page as it exists in your private editor, but rendered as it would appear if you were browsing to it if it were public. This includes executing any macros and templates you use within the content. Note that your work is not saved yet when you use this option. This button lets you check, before your changes are made public, that you haven't made any errors in your macros, templates, or formatting that may prevent the page from rendering correctly. If you do see scripting errors, refer to Troubleshooting scripting error while previewing a page.
+
+
+

Warning: Currently some macros and templates don't execute properly in Preview-mode, leaving the Preview page missing some of its content (such as sidebars), and thus with somewhat distorted page layout; i.e. not totally WYSIWYG.  Further, if SCAYT (Spell-Check As You Type) is enabled (and possibly if the page contains certain valid macros or templates), Preview mode may still give a scripting error.

+
+
+

+ 破棄
+
Cancels your edit, disposing of any changes you've made without saving them. You're returned to the page in standard browsing mode.
+
+
+

Warning: Occasionally Discard can malfunction and start acting more like a partial "discard," undoing many of your changes without exiting the editor. If this happens to you, you should save, exit, and re-enter the editor.

+
+
+
diff --git a/files/ja/orphaned/mdn/editor/basics/page_info/index.html b/files/ja/orphaned/mdn/editor/basics/page_info/index.html new file mode 100644 index 0000000000..46b3cbbaba --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/page_info/index.html @@ -0,0 +1,48 @@ +--- +title: エディターUIのページ情報部 +slug: MDN/Editor/Basics/Page_info +tags: + - Beginner + - Guide + - MDN Meta + - editor +translation_of: MDN/Editor/Basics/Page_info +--- +
{{MDNSidebar}}

ページ情報部分にはページの情報を含みますが、追加の情報を拡張することも出来ます。

+ +

このページは英語版のUIを説明しています

+ +

既存のページ

+ +

既定では、既存のページを編集する時、ページタイトルを表示します。

+ +

Edit Page Title and Properties のリンクをクリックして、追加のページコントロールの表示を切り替えることができます。この表示は次のようなものです:

+ +

Page info fields for an existing article

+ +

この表示は次の設定を変更できます:

+ +
+
Title
+
ブラウザーのタイトルバー (やタブバー) に表示されるタイトルと、記事の最上部とパンくずリストにあるページのタイトル。これはページの URL には影響しません。
+
TOC(目次)
+
記事の見出しレベルが、目次でどれだけ深くページに自動表示されるかを決めるレベル。既定では、見出しレベル<h2> から<h4> が目次となり、よって目次は3段階の深さになります。しかし、これをどのようにも設定できて、"No TOC" (目次を全く表示しない、例えばランディングページのように) でも、目次を全レベル表示するようにもできます。
+
Rendering max age
+
このページが自動的に再レンダリングされる頻度を決めます。大半の場合において、この設定はゼロのままにします。
+
Lookup
+
ローカライズされたページでは、この項目はページの正統版から「みなしご」になったページを再度関連付けるのに役立ちます。英語が MDN ではデファクトの正統な言語であるため、英語のページでは役立ちません。
+
+ +

新規のページ

+ +

ページ作成権限 を取得している場合、新規のページを作成できます。ページを作成/編集する方法を見て、ページ作成のさまざまなテクニックを見てください。新規のページでは、ページ情報欄はこのようになります:

+ +

Page info fields for a new page

+ +

ここに、Title(タイトル) とTOC(目次) フィールドを、既存ページと同様にセットできて、ページの Slug もセットできます。slug はページを表現する URL の最後の部分です。(Parent(親ページ) が読み取り専用項目として表示され、URL のサイトのルート以降の残りで表現します) テキスト項目に入力すると、Slug 項目はタイトルと同じテキストで、スペースをアンダースコアに置換しつつ自動入力されます。

+ +
+

短い slug と詳しいタイトルに価値があります; 例えば、エディターページコントロールのタイトルは "MDN editor page controls" ですがその URL は MDN/Contribute/Editor/Basics/Page_controls であり、Page_controls がページを表現する slug です。

+
+ +

 

diff --git a/files/ja/orphaned/mdn/editor/basics/tags/index.html b/files/ja/orphaned/mdn/editor/basics/tags/index.html new file mode 100644 index 0000000000..0b9b11d04b --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/tags/index.html @@ -0,0 +1,41 @@ +--- +title: MDN エディターのタグ +slug: MDN/Editor/Basics/Tags +tags: + - Beginner + - Guide + - MDN Meta +translation_of: MDN/Editor/Basics/Tags +--- +
{{MDNSidebar}}

Page tags help categorize and organize information for searching and index pages, and they help identify pages that need special attention. Tags are also used to mark pages that are obsolete and may need to be deprecated or even deleted. It's incredibly useful to have good, clean tags on pages, so be sure to have good tags on articles you contribute to.

+ +

The tag box is near the bottom of the editor page. It displays any existing tags on the page, as well as an empty box in which you can type a new tag:

+ +

+ +

タグを追加する

+ +

To add a new tag, click in the "New tag" box and start typing:

+ +

+ +

As you type, the editor displays existing tags that match the characters you have typed so far. You can save a few key strokes by selecting one of the displayed tags, or just use it as a reference to ensure that you spell the tag the same way as it appears on other pages.

+ +

When you press Enter or Tab key (or comma), the new tag is committed to the list, and a new "New Tag" box appears:

+ +

+ +

For a list of recommended tags, as well as a usage guide for specific tags, please see MDN tagging standards.

+ +

タグを削除する

+ +

There are two ways to remove a tag:

+ + + +

変更をコミットする

+ +

Your changes are not saved until you click one of the Publish buttons.

diff --git a/files/ja/orphaned/mdn/editor/basics/toolbar/index.html b/files/ja/orphaned/mdn/editor/basics/toolbar/index.html new file mode 100644 index 0000000000..6076640c10 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/basics/toolbar/index.html @@ -0,0 +1,257 @@ +--- +title: MDN エディターのツールバー +slug: MDN/Editor/Basics/Toolbar +tags: + - Beginner + - MDN Meta + - Reference + - editor +translation_of: MDN/Editor/Basics/Toolbar +--- +
{{MDNSidebar}}

エディターのツールバーは、作業時に記事の見た目や流れを調整する機能を提供します。この記事ではツールバーの各コントロールについて記述します。

+ +

2行のボタンがあり、3列目はあなたがどこにいるかを導くHTML要素があります。下記のスクリーンショットでは、例えば、トップレベルの <p> ブロックを編集しています。

+ +

Screenshot of the toolbar, with labels for the button groupsツールバーボタンは9つのグループに別れます。それぞれ見ていきましょう; 各グループのボタンを左から順に詳しく見ていきます。

+ + + +

ドキュメント(Document)グループ

+ +

ドキュメントグループはドキュメントレベルの操作オプションを提供します。

+ +
+
ソース
+
The Source button lets you toggle between editing using the WYSIWYG interface and editing in raw HTML source mode. We strongly request that you try to avoid using source mode, as it's very easy to wind up with content that doesn't match our style guide or, worse, doesn't work right at all. Currently, though, the editor has some quirks that make it impossible to do certain things without resorting to source mode. See Using source mode in the MDN editor for details on how to use source mode and the dos and don'ts involved.
+
公開
+
メインの 公開 ボタンと同様
+
+ +
+

If you try to save your edit and your changes are rejected as invalid, but the content is in fact appropriate for MDN, you should email the writing team for help getting your content posted.

+
+ +
+
プレビュー
+
メインの プレビュー ボタンと同様
+
+ +

編集機能(Edit functions)グループ

+ +

編集機能はよくあるアプリケーションの編集メニューの対応オプションに似ています。

+ +
+
貼り付け
+
システムクリップボードの中身をエディターペインに貼り付ける
+
プレーンテキストとして貼り付け
+
テキスト貼り付けのダイアログを表示する; テキストは全てスタイリングがはがされ、その結果気づかずに望まないスタイリングをサイトのコンテンツに入れることがなくなります。テキストを貼り付けたら、(追加で) 変更もできて、次にボタンをクリックして作業中の記事に挿入します。
+
+
+

When pasting content into MDN, please be aware that, if pasting styled content (including, for example, syntax highlighting in code being copied from another site), you may be bringing along unwanted and unneeded additional styles or classes. Please be careful not to do this; if necessary, review your edit in source mode to remove these unnecessary styles and classes (or check it before pasting, or use the "Paste as plain text" option instead).

+
+
+
元に戻す
+
最後の操作を元に戻します
+
やり直す
+
最後にもとに戻した操作をやり直します
+
+ +

テキスト処理(Text processing)グループ

+ +

テキスト処理グループではテキスト操作のオプションを提供します。

+ +
+
検索
+
Opens the Find dialog box in "Find" mode, which lets you search your document for a specified string.
+
置換
+
Opens the Find dialog box in "Find and replace" mode, allowing you to find strings and replace them with new ones.
+
+ +

The Find and Replace buttons both take you to the same dialog box, which offers several configurable options for finding and optionally replacing text.

+ +
+
スペルチェック
+
This button opens a menu with several items: +
+
Enable SCAYT/Disable SCAYT
+
Activates or deactivates Spell Check As You Type (SCAYT)
+
Options
+
If SCAYT is activated, this opens the SCAYT dialog box to the tab containing options you can configure for SCAYT.
+
Languages
+
If SCAYT is activated, this opens the SCAYT dialog box to the Languages tab, where you can select what language to use for spell-checking dictionary.
+
Dictionaries
+
If SCAYT is activated, this opens the SCAYT dialog box to the Dictionaries tab, where you can specify a personal dictionary to use with SCAYT.
+
About SCAYT
+
If SCAYT is activated, this opens the SCAYT dialog box to the About tab.
+
Check Spelling
+
This opens a Spell Checker dialog box, in which you can check spelling in batch mode on an entire document. You can use the Grammar tab to check for grammar mistakes, or use the Thesaurus tab to search for synonyms of words in the document.
+
+
+
+ +

表示(Display)グループ

+ +

表示グループはエディター画面の表示に影響するオプションを提供します。

+ +
+
最大化
+
このボタンは、エディターインターフェイス(つまり、ツールバーと編集ボックス) をブラウザーウィンドウ全体に拡大し、記述スペースを最大限使えます。
+
ブロック表示
+
このボタンは、文書内のブロック要素の外枠を出現させます。これはソースモードを使わずに文書構造を手軽にチェックする方法です。
+
+ +

インラインスタイル(Inline styles)グループ

+ +

インラインスタイルグループは、テキストの塊に対して適用する、よくあるインラインスタイルを含みます。

+ +
+
太字
+
Toggles boldface text mode. It creates a {{htmlelement("strong")}} element.
+
斜体
+
Toggles italic text mode. It creates an {{htmlelement("em")}} element.
+
下線
+
Toggles underlined text mode. It creates a {{htmlelement("u")}} element.
+
打ち消し線
+
Toggles strikethrough mode. It creates an {{htmlelement("s")}} element.
+
下付き
+
Toggles subscript mode. It creates a {{htmlelement("sub")}} element.
+
上付き
+
Toggles superscript mode. It creates a {{htmlelement("sup")}} element. Please note that we don't use footnotes on MDN, so you should rarely if ever need this button.
+
書式を解除
+
Removes the current inline styles from the selection.
+
コード
+
Toggles code mode. It creates a {{htmlelement("code")}} element. This is used for inline presentation of variable names, function names, object names, filenames, and so forth.
+
+ +

ハイパーリンク(Hyperlinking)グループ

+ +

ハイパーリンクグループは、ハイパーリンクに関するオプションを提供します。

+ +
+
リンク挿入/編集
+
Creates a new link. This button opens the link editor dialog, which is covered in Links using the toolbar.
+
リンクを削除
+
Removes the link at the insertion point.
+
アンカー挿入/編集
+
Creates an anchor at the insertion point. Note that you don't need an anchor to link to a heading; the MDN editor automatically creates an {{htmlattrxref("id")}} for each heading that is the same as the heading text, with spaces replaced by underscores. For example, the heading of this section has an id whose value is Hyperlinking_group.
+
リダイレクトを作成
+
Inserts a redirect from this page to another. See Creating redirects for further information.
+
+ +

カスタムスタイル(Custom styles)グループ

+ +

Styles ボタンは、特別なフォーマットオプションの選択を提供するドロップダウンメニューです。

+ +

Block styles

+ +
+
None
+
現ブロックの全てのスタイリングを削除します
+
Note box
+
下記のような註記のボックスを作ります。註記ボックスでは太字の "註記:" で開始します。
+
+ +
+

This is a note box.

+
+ +
+
Warning box
+
下記のような警告ボックスを作成します。太字の "警告:" で開始します。
+
+ +
+

Warning: This is a warning box.

+
+ +
+
Two columns
+
選択テキストや現ブロックのを1カラムから2カラムに、これをサポートするブラウザーでは、変更します。
+
Three columns
+
選択テキストや現ブロックのを1カラムから3カラムに、これをサポートするブラウザーでは、変更します。
+
Article summary
+
This style places its contents in a specially formatted call-out block that should contain a summary of the article. See the first paragraph of this article for an example.
+
Syntax box
+
Creates a syntax box, such as the one shown below. You need to use the "PRE" button as well, to create a <pre> block inside it. You probably won't see the yellow box until you do.
+
Hidden when reading
+
Creates a block that is visible only in edit mode, not when normally displayed. This is not the same as an HTML comment, which is visible only in source mode.
+
+ +

Inline styles

+ +
+
SEO summary
+
This special style is used to indicate a sentence or two that should be used as the article's summary for SEO purposes. It's also used by macros that automatically construct landing pages. If you don't specify this, MDN automatically uses the first paragraph of your article, but sometimes that's not the optimal text (or it's too much text), so this lets you override that.
+
+ +

ブロック(Blocks)グループ

+ +

ブロックグループは、HTML標準や、Kuma 独自となる、その他のブロックスタイルを提供します。

+ +
+
ブロック引用文
+
Inserts a blockquote. Please do not use this. Blockquotes are not part of our standard style guide, and this button will be removed in the near future.
+
Preformatted Text
+
Inserts a {{htmlelement("pre")}} block, or turns the current block into one. All code samples or examples of text output to a terminal should be in one of these blocks.
+
Headings
+
The heading buttons let you insert a heading. Click one of these buttons to create a new heading at the corresponding depth. By default, H2 through H4 are included in the table of contents, but you can change this, as described in the page info box.
+
構文ハイライター
+
The syntax highlighter lets you choose a language for which to apply syntax highlighting to the {{htmlelement("pre")}} (preformatted text) block; if you're not already in such a block, this will create one for you.  Choose the language used in the  block, and it will be highlighted appropriately.
+
コードサンプルテンプレートを挿入
+
This button is used by the live sample system to help you quickly insert a new live sample. You don't need to use it, but it's there for convenience. See Using the live sample system for details on using this and other live sample features.
+
コードサンプルの iFrame を挿入
+
Inserts into the document the appropriate macro to display a given live sample. See Using the live sample system for details on using this and other live sample features.
+
+ +

Lists and flow group

+ +

このブロック構造グループは、標準のブロック構造を作成、編集するオプションを提供します。

+ +
+
番号つきリスト
+
Creates or removes a numbered list from your article. Once you're working in a numbered list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit numbered list mode. Right-clicking the list offers the option to open the properties dialog for the list; the properties include the style of the numbers (numbers, letters, Roman numerals, etc, and what number to start with).
+
番号なしリスト
+
Creates or removes a bulleted list from your article. Once you're working in a bulleted list, each time you press return, you will start a new bullet. The Tab key can be used to indent a level, and Shift + Tab will outdent a level. Pressing return on an empty bullet will exit bullet list mode. Right-clicking on the list lets you choose to edit the list's properties (specifically, the shapes of the bullets).
+
Definition List
+
Creates a new definition list. Definition lists consist of a series of titles and definitions (this list you're reading right now is an example).
+
Definition Term
+
Creates a new term block in a definition list. If you're not already editing a definition list, a new one is created for you. Pressing return after entering a definition title automatically starts you editing a definition description.
+
Definition Value
+
Creates a new value block in a definition list. Pressing return on a description line automatically starts a new title. Pressing return twice will exit definition list mode.
+
インデント解除
+
Shifts the indentation level to the left once; this is the same as pressing  Shift + Tab while in a list.
+
インデント
+
Shifts the indentation level to the right once; this is the same as pressing tab while in a list.
+
テキストの向き：左から右へ
+
Sets LTR as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an Arabic document, you might use this to display some English text.
+
テキストの向き：右から左へ
+
Sets RTL as the current text typing direction. Used only when covering localization/internationalization topics. For example, if you are working in an English text, you might use this to display some Arabic text.
+
+ +

メディア(Media)グループ

+ +

メディアグループはメディアを表示・フォーマットするオプションを提供します。

+ +
+
イメージ
+
Inserts a new image into the article. See Images  for details on how to use this option.
+
表
+
Inserts a table into the article. See Tables for more information on tables in articles.
+
YouTube 動画を埋め込み
+
Opens a dialog box in which you can specify a YouTube URL. From this information it creates a call to the EmbedYouTube macro. This is a secure way to embed video content.
+
Insert MathML based on (La)TeX
+
Opens a dialog box in which you can insert code in TeX or LaTeX. This code will be converted into MathML and inserted into the document in a {{htmlelement("math")}} block.
+
+ +

 

diff --git a/files/ja/orphaned/mdn/editor/images/index.html b/files/ja/orphaned/mdn/editor/images/index.html new file mode 100644 index 0000000000..5efe16a213 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/images/index.html @@ -0,0 +1,70 @@ +--- +title: 画像 +slug: MDN/Editor/Images +tags: + - Guide + - MDN Meta +translation_of: MDN/Editor/Images +--- +
{{MDNSidebar}}
+ +

記事に画像を混ぜるのはしばしば便利です。画像は例えば、スクリーンショットや、レンダリングがどのようになるかの例や、プログラムフローのSVG図です。この記事ではMDNのコンテンツに画像を使う方法を記します。

+ +
Note: When uploading an image, please be sure to use an image optimization tool to make the file as small to download as possible. This improves page load time and helps MDN's performance overall. You may use your preferred tool, if you have one. Otherwise, we suggest TinyPNG, a handy Web tool.
+ +

いったん画像をページに添付したら ({{SectionOnPage("/en-US/docs/MDN/Contribute/Editor/Basics", "The attachments box")}} を見てください)、記事内で使用できます。MDN上のどこの画像にもリンクできます。画像を挿入するには、ツールバーの "イメージ" ボタンを使用し、それはこのようなものです:

+ +

画像のプロパティダイアログが、次のように出てきます:

+ +

+ +

3つのタブがあります。最初 (で最もよく使う) は画像情報タブです。残り2つはリンクと、高度な設定タブです。

+ +

画像情報

+ +

ここにはたくさんのオプションがあります:

+ +
+
添付ファイル
+
このポップアップメニューはページの添付ファイル一覧を表示します。現在の編集セッションでアップロードしたものか、既にページの他の場所で使われているものだけが表示されます。
+
URL
+
添付ファイル一覧にない画像を使いたい場合 (例えば、MDNの他の場所で使われているものや、以前の編集セッションでアップロードされたもの)、この欄にURLを入力できます。
+
代替テキスト
+
画像が表示されない場合に表示される代替テキスト。このテキストは、スクリーンリーダーでも使われるので、アクセシビリティのためにも、適切な記述を入れてください。
+
幅 / 高さ
+
記事に表示される画像の幅と高さをここで調整できます。デフォルトでは、比率がロックされていますが、ロックアイコンをクリックして解除できます。
+
枠線の幅
+
オプションとして、画像の周りに黒い枠線を指定できます。ここには 0 (や未入力のまま) または 1 を入れてください、そうすると画像の背景が透明で、記事の背景から目立たせる場合に、枠線を使うかどうかの選択になります。
+
水平間隔 / 垂直間隔
+
これは、画像を囲む空白の長さを、水平/垂直それぞれ指定するものです。通常は、下記の行揃えオプションを使う場合にのみ必要となるでしょう。
+
行揃え
+
デフォルトでは、画像は独自ブロックに単独で表示されます。しかし、テキストをラップ可能にすることで、ここでは画像をフロートとして左/右寄せできます。めったにこうしません。つまり画像がとても小さく(またはとても幅が狭く縦が長い)て、その横に整形するのに十分な長さのテキストがある、特別な場合のみ使われます。少し判断が要ります。このオプションを使った場合、たぶんテキストと画像が近づき過ぎないように、水平間隔と垂直間隔をセットしたくなるでしょう。通常はそれぞれを6か8とするとうまくいきます。
+
+ +

プレビューボックスは、今の設定で画像がどうなるかを例示します。

+ +

リンク

+ +

The Link options tab for images lets you set a URL to go to when the image is clicked on. This is most commonly used to simply link to a larger version of the image itself (by providing the same URL as in the Image Info tab). The Link panel looks like this:

+ +

+ +

Other than the URL field, in which you place the URL of the link's destination, you can set a target. However, please do not do so. We prefer all links to open in the same tab.

+ +

サポートされる画像の種類

+ +

You may upload GIF, JPEG, and PNG images, as well as SVG diagrams. For screenshots, we prefer PNG, and we're trying to transition to using SVG for diagrams because they can be translated into other languages more easily than other image types.

+ +

Photoshop files may also be uploaded. However, they may not be used as images inline in content. They are only available for download.

+ +

画像を削除/変更する

+ +

To remove an image from the article, you can simply select it and press your delete key, or place the cursor after it and press delete.

+ +
+

Note: You cannot delete attachments on MDN; we will eventually have a mechanism for this, but at this time, they remain on the server for potential later re-use.

+
+ +

You can also revise the image properties for an image by double-clicking it, or right-clicking on it and choosing "Image Properties" from the context menu that appears. This will present the same dialog as above.

+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ja/orphaned/mdn/editor/index.html b/files/ja/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..ab597839dc --- /dev/null +++ b/files/ja/orphaned/mdn/editor/index.html @@ -0,0 +1,21 @@ +--- +title: MDN エディター UI のガイド +slug: MDN/Editor +tags: + - Documentation + - Guide + - Landing + - MDN + - MDN Meta + - ガイド +translation_of: MDN/Editor +--- +
{{MDNSidebar}}
+ +

MDN Web Docs Wiki が提供する WYSIWYG (what-you-see-is-what-you-get) エディターで、簡単に新しいコンテンツの協力ができます。 MDN エディターガイドでは、エディターの使い方とともに、あなたの生産性を改善する有用な特徴についての情報を提供します。編集や新規ページ作成をする前に、Mozilla ウェブサイトの利用規約を読んで (そして従って) 下さい。

+ +

MDN スタイルガイドは、コンテンツそのものの書式やスタイルの作り方について、推奨する文法や記述の規則も含めて、情報を提供します。

+ +

{{LandingPageListSubpages}}

+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ja/orphaned/mdn/editor/keyboard_shortcuts/index.html b/files/ja/orphaned/mdn/editor/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..7d0926b4fa --- /dev/null +++ b/files/ja/orphaned/mdn/editor/keyboard_shortcuts/index.html @@ -0,0 +1,141 @@ +--- +title: MDN エディターのショートカットキー +slug: MDN/Editor/Keyboard_shortcuts +tags: + - MDN Meta + - Reference + - Reference + - editor + - エディター + - エディター +translation_of: MDN/Editor/Keyboard_shortcuts +--- +

作業中にキーボードから手を離さなくて済むように、多数の便利なキーボードショートカットが利用できます。ショートカットは Windows と Linux 用の一覧で、Mac では Control キーの代わりに Command キーを使用できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ショートカット説明
Ctrl + A全て選択
Ctrl + Cクリップボードにコピー
Ctrl + Vクリップボードから貼り付け
Ctrl + Shift + Vクリップボードから整形されていないプレーンテキストとして貼り付け
Ctrl + Xカット
Ctrl + Zやり直し
Ctrl + Y再実行
Ctrl + Kリンクエディターを開く/新しいリンクを追加
Ctrl + Shift + K現在のカーソル位置からリンクを削除する
Ctrl + B太字
Ctrl + Iイタリック
Ctrl + O<code> スタイルをトグルする
Ctrl + Shift + O +

ソース表示モードの切り替え

+ +
ソースモードでの編集は注意してください; コンテンツ標準に引き続き従う必要があります。詳しくはエディターのソースモードのガイドを見て、ソースモードの使い方と、どの場面に使用すべき/でないのか、との両方を見てください。
+
Ctrl + P現在ブロックの <pre> スタイルのオン/オフをトグルする
Ctrl + U下線
Ctrl + S変更を保存してエディターを閉じる
Ctrl + Shift + Sエディターを閉じないで変更を保存する
Ctrl + 0選択エリアのフォーマットを削除する ("O"の文字ではなくて、数字のゼロです).
Ctrl + 2 から Ctrl + 62 から 6 で見出しをつける。レベル 1 の見出しは、記事の最上部に表示されるページタイトルに予約されている。
Ctrl + Shift + L段落のフォーマットとして、黒丸リストと番号つきリストを切り替える。
Tabインデントモードではインデントレベルを増やし、それ以外では 2 つのスペースをタブとして挿入する。テーブル内では、次のセルにカーソルを移動するか、次のセルがなければ新しい行を追加する。カーソルがページタイトルか見出しにある場合、次のパラグラフにジャンプする。
Shift + Tabインデントモードではインデントを減らす。テーブル内では、前のセルにジャンプするか、前のセルがなければ新しい行を追加する。カーソルがページタイトルか見出しにある場合、次のパラグラフにジャンプする。
Shift + Spaceノーブレークスペース (&nbsp;) を挿入する。
Shift + Enter +

現在のブロックを抜ける。例えば、<pre> ブロックを編集している場合、Shift + Enter でブロックを抜けて、記事の本文に戻る。

+ +
+

現在は実装されていません; {{bug('780055')}} を見てください。

+
+
+ +

関連情報

+ + + +
{{MDNSidebar}}
diff --git a/files/ja/orphaned/mdn/editor/links/index.html b/files/ja/orphaned/mdn/editor/links/index.html new file mode 100644 index 0000000000..87fff92133 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/links/index.html @@ -0,0 +1,182 @@ +--- +title: リンク +slug: MDN/Editor/Links +tags: + - Guide + - MDN Meta + - editor + - ガイド + - 編集者 +translation_of: MDN/Editor/Links +--- +
{{MDNSidebar}}
+ + + +
+

メモ: 特にリンクの推奨される方法があります。これらは MDN 書式ガイドで説明されています。

+
+ +

ツールバーの使用

+ +

リンクを作成するのに最も分かりやすい方法は、ツールバーの「リンク」ボタンをクリックするか、 Ctl+K (Mac では Command-K) を押してリンク作成することです。リンクボタンは The link button (as of 2015-12-04) のような外見です。この機能を使用して、最初からリンクを作成したり、既存の選択したテキストにリンクを追加したりすることができます。

+ + + +

リンクボタンをクリックすると、次のようなハイパーリンクエディターのダイアログが表示されます。

+ +

Screenshot of the Link dialog box, showing the Link Info tab

+ +

ここで新規のリンクを作ることができます。ダイアログ内のコントロールは次の通りです。

+ +
+
リンクタイプ
+
作成しているリンクのタイプ。既定は「URL」で、 MDN またはサイト外のウェブ上のどこかの URL です。「ページ内のアンカー」または「E-Mail」を選択することもできます。「ページ内のアンカー」を使用すると、ツールバーのアンカーボタンを使用して以前に挿入したアンカーにリンクすることができます。「E-Mail」を使用すると、受信者の電子メールアドレス、件名、および既定のメッセージ内容を入力して mailto: URL を設定できます。ほとんどの場合は「URL」を使用します。
+
記事タイトル検索/リンクテキスト
+
このフィールドには2つの目的があります。まず、リンク先として使用される特定のテキストを指定します (または、ダイアログボックスを開く前にドキュメント内のテキストを選択していた場合、そのテキストがリンク先として表示されます)。ここに入力されたテキストは、入力した内容と一致する MDN 上の記事を検索して、可能な宛先ページを見つけるために使用されます。たとえば、このボックスに "Array" と入力すると、次のように表示されます。
+ Screenshot of the Link dialog box, showing a lookup menu for the text "Array"
+
+ +
+
ここに、入力したテキストがタイトルに含まれる MDN のすべてのページのリストが表示されます。リストをスクロールしてそれらのページの1つを選択するか、入力を続けてリストを絞り込むことができます。一覧の項目にはロケールが表示されます(この場合、"[en-US]")。そのテキストはリンク先のテキストでは使用されませんが、編集中のロケールと同じロケールの記事にリンクしていることを確認するのに役立ちます。
+
添付ファイル
+
また、このリストから添付ファイルを選択して、リンクを現在のページに添付されているファイルのいずれかへのリンクにすることもできます。これはコードサンプルなどをダウンロードするためのリンクを提供する素晴らしい方法です。
+
URL
+
最後に、 URL フィールドで実際に URL を直接入力できます。「記事タイトル検索」または「添付ファイル」メニューで選択した URL も表示されます。一般的な方法は、 MDN の他の場所で作業しているページに URL を貼り付けることです。 MDN の別の記事にリンクする場合は、 URL の先頭からドメイン名 ("https://developer.mozilla.org") を削除してください。
+
+ +

リンクを設定したら、 OK ボタンをクリックしてそれを挿入します。

+ +
+

注意していると、ハイパーリンクエディターダイアログに2番目のタブ (Advanced、高度な設定) があることがわかります。少なくとも現時点では、定期的に使用することをお勧めするオプションはありません。将来はリンクのための代替スタイルが存在する可能性がありますが、新しいツールバーウィジェットを追加して、それらの機能が利用可能になったらそれを使用する可能性があります。

+
+ +

既存テキストのリンク

+ +

既存のテキストをリンクにする場合は、プロセスをいくらか簡略化することができます。ハイパーリンクエディタを開く前に、リンクにするテキストを選択します。記事タイトル検索/リンクテキストフィールドに選択したテキストがあらかじめ入力されます。たとえば、次のテキストがあるとします。

+ +
+

このプロジェクトの作業中に JavaScript 配列を使用すると便利です。

+
+ +

"arrays" を適切なコンテンツへのリンクにする必要があります。その単語を選択してリンクエディタを起動するだけです。前のケースと同様の事前入力済みのダイアログが表示されます。提案された記事の上にマウスを「ホバーする」と、相対スラグ (developer.mozilla.orgを基準にした相対 URL) が表示され、その場所と記事の種類をより正確に把握できます。

+ +

ルックアップメニューとURLのツールチップを表示する[Link]ダイアログボックスのスクリーンショット

+ +

ここでは一致候補として提案された記事のうち、"Arrays" は良い選択のように見えるので、それを選択することができます。これは自動的に URL フィールドに入力されるので、 OK をクリックすれば、テキストは次のようなリンクに変わります。

+ +
+

このプロジェクトの作業中に JavaScript の配列を使用すると便利です。

+
+ + + +

MDN はマクロを大量に使用しており、与えられた用語に適切なコンテンツへのリンクを自動的に作成したり、スタイルガイドに従ってスタイルを設定したりしています。これを考えてみましょう。私たちのスタイルガイドは、API の用語名、HTML の要素と属性、 CSS のプロパティ、関数名などは {{HTMLElement("code")}} 要素でスタイリングする必要があることを示しています。それらはまた、通常は、 MDN の適切なページへのリンクにする必要があります。

+ +

マクロを使用してこれらのリンクを作成するには少し慣れが必要ですが、多くの利点があります。

+ + + +

これらのマクロはたくさんありますが、ここではそれらをすべて見ないようにします。代わりに、最も一般的なもののいくつかの特定の例を見ていきます。詳細なリストについては、 MDN のカスタムマクロガイドのハイパーリンクの作成を参照してください。これらのマクロのいずれかの KumaScript ソースコードをいつでも見ることができます。ほとんどは、どのように動作するのか、もしあれば、さまざまなパラメータが何であるかを説明するコメントを先頭に付けています。

+ +

API 文書へのリンク

+ +

API へのスタイル付きリンクを作成するために非常に役立つマクロが多数あります。ここには最も有用なものがいくつかあります。いずれの場合も、 (<code> スタイリングの自動追加を抑制するなど) 出力をより詳細に制御できるようにパラメータを追加することができます。下の各マクロ名をクリックすると、マクロコード自体を読むことができます。それらはすべて、どのように動作するのか、すべてのパラメータが何であるかを説明するコメントを先頭に付けています。

+ +
+
{{TemplateLink("HTMLElement")}}
+
適切にスタイル付けされ、リンクされた HTML 要素の名前を挿入します。たとえば、 \{{HTMLElement("table")}} は {{HTMLElement("table")}} を生成します。
+
{{TemplateLink("cssxref")}}
+
CSS リファレンスの CSS プロパティ、 @-規則、セレクターの文書を挿入します。たとえば、 \{{cssxref("background-color")}} は {{cssxref("background-color")}} になります。
+
{{TemplateLink("domxref")}}
+
指定された API 用語の Web API リファレンスへのリンクを挿入します。たとえば、 \{{domxref("window")}} は {{domxref("window")}} を生成し、 \{{domxref("window.scrollBy()")}} は {{domxref("window.scrollBy()")}} を挿入します。テキストをオーバーライドする追加のパラメータを指定することもでき、 \{{domxref("window.scrollBy", "scrollBy()")}} は {{domxref("window.scrollBy", "scrollBy()")}} になります。
+
{{TemplateLink("SVGElement")}}
+
SVG 要素の名前を適切にスタイル付けしてリンクしたものを挿入します。たとえば、 \{{SVGElement("circle")}} は {{SVGElement("circle")}} を生成します。
+
+ +

同じ記事のセクションにリンクする

+ +

同じ記事内のセクションにリンクするには、anch マクロを使用できます。構文は簡単です: \{{anch("宛先セクション名")}}。デフォルトでは、表示されているリンクテキストはそのセクションのタイトルですが、代わりに使用する代替テキストを示す2番目のオプションのパラメータを追加できます。いくつかの例を示します。

+ + + +

バグにリンクする

+ +

{{TemplateLink("bug")}} マクロを使って、Mozilla の Bugzilla データベースのバグにリンクすることができます。このマクロは、リンクするバグ番号という単一のパラメータを受け入れます。たとえば、\{{bug(765642)}} は {{bug(765642)}} のようになります。

+ +

同様に、他のブラウザーやウェブエンジンのバグへのリンクを作成することもできます。

+ +
+
WebKit (Safari, etc.)
+
{{TemplateLink("WebkitBug")}}: \{{webkitbug(31277)}} は {{webkitbug(31277)}} を生成します。
+
+ +

RFCにリンクする

+ +

インターネットがコアレベルで動作する方法の多くは、 RFC に文書化されています。 {{TemplateLink("RFC")}} マクロを使用して簡単に RFC を参照できます。たとえば、 \{{RFC(2616)}} は {{RFC(2616)}} になります。オプションで、記事の選択されたテキスト部分、および/またはリンク先の仕様内のセクション番号の代わりに、使用する代替リンクテキストを提供することもできます。

+ +

XPCOM インターフェイスに関する情報へリンクする

+ +
+

MDN スタッフはもはや XPCOM の文書を積極的に管理していませんが、ボランティアの貢献は歓迎します。

+
+ +

Mozilla の内部を文書化している場合は、 XPCOM のインタフェース文書へのリンクを簡単に作成できることが役立ちます。これにはいくつかのマクロが使われています。

+ +

XPCOM インターフェイスの文書全体にリンクするための構文は、 \{{interface("interfacename")}} です。たとえば、次のように書くことができます。

+ +
+

When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.

+
+ +

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

+ +
+

When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.

+
+ +

XPCOM インターフェイス上の特定のメソッドまたは属性に関する情報にリンクする必要がある場合は、 {{TemplateLink("ifmethod")}} および {{TemplateLink("ifattribute")}} マクロが必要です。これらは、インターフェイスの名前と、参照したいメソッドまたは属性の名前を引数として受け入れます。 {{TemplateLink("ifmethod")}} マクロは、メソッドの名前の後にスタイルガイドに必須のカッコを追加することによって特別なフォーマットを行うので、特に興味深いです。たとえば、 \{{ifmethod("nsIIOService", "newURI")}} の結果は {{ifmethod("nsIIOService", "newURI")}} になります。それは、あなたが将来的にスタイルガイドの変更の可能性から保護されているケースです！

+ +

Mozilla 設定文書へのリンク

+ +

Mozilla プリファレンスの名前を挿入し、プリファレンスリファレンスの対応するページにリンクするには、 {{TemplateLink("pref")}} マクロを使用します。これには1つのパラメータ、つまりリンク先のプリファレンスのフルネームが指定されています。たとえば、 \{{pref("javascript.options.showInConsole")}} を使用すると、 {{pref("javascript.options.showInConsole")}} を作成できます。

+ +

Mozilla ソースファイルへリンクする

+ +

source マクロを使用して、 Mozilla のソースツリー内のファイルにリンクすることができます (おそらくこれは頻繁ではありません)。ファイルの完全な URL を指定する代わりに、単に /source/ ディレクトリを基準にしたパスを指定することができます。例: \{{source("browser/Makefile.in")}} は {{source("browser/Makefile.in")}} というリンクを生成します。

+ +

オプションで、リンクに使用する代替テキストを指定することもできます。たとえば、 \{{source("browser/Makefile.in", "ブラウザーの makefile")}} を使用すると、 {{source("browser/Makefile.in", "ブラウザーの makefile")}} のような結果になります。

+ +
+

マクロの使用方法について詳しく知りたい場合は、 {{anch("Using macros")}} のドキュメントを参照してください。また、マクロシステムの詳細については、 KumaScript のドキュメントを参照してください。

+
+ +

推奨コンテンツのリンク

+ +

関連ページやその他のお勧め資料のリストを作成する場合は、サイドバーにクイックリンクボックスを作成してください。このメカニズムは、記事の末尾にある古い「関連情報」の見出しを置き換えるものです。クイックリンクボックスの作成方法の詳細については、クイックリンクを参照してください。

+ +

URL スキーム

+ +

セキュリティ上の理由から、作成するのは以下のスキームを使用するリンクのみにしてください。

+ + + +

他のものは動作するかもしれないし、動作しないかもしれませんが、対応しておらず、おそらく編集スタッフによって削除されます。

+ +
+

about: や chrome: のような特別な URL スキームは、 Firefox、 Google Chrome、その他のブラウザーで、設定、デバッグ情報などの特別なコンテンツへのアクセスを提供するために使用されます。これらのリンクは記事のコンテンツからは機能しませんので、 MDN の記事内でこれらのスキームを使用してリンクを作成しないでください。同様のことは javascript: と jar: スキームにも適用され、これらはセキュリティ上の予防策から、最新のブラウザーではブロックされています。

+
+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ja/orphaned/mdn/editor/redirects/index.html b/files/ja/orphaned/mdn/editor/redirects/index.html new file mode 100644 index 0000000000..80a1d7268b --- /dev/null +++ b/files/ja/orphaned/mdn/editor/redirects/index.html @@ -0,0 +1,29 @@ +--- +title: リダイレクト +slug: MDN/Editor/Redirects +tags: + - Guide + - MDN Meta +translation_of: MDN/Editor/Redirects +--- +
{{MDNSidebar}}
+ +

時々、単純にほかのページやほかのセクションへリダイレクトするためのページが必要なことがあります。この記事ではリダイレクトについて説明します。

+ +

リダイレクトを作成する

+ +

たとえば、あるページを作成した後にほかのページにマージした場合など、リダイレクトは必要になってくるでしょう。リダイレクトを作成するには、単純にこのような ツールバー上のリダイレクトボタンをクリックするだけです。

+ +

そうすると、転送先の URL と名前を聞くダイアログボックスが表示されます。名前はそれほど重要ではありません。リダイレクトページ自体を見てどこのページへリダイレクトしているかを知りたいときにだけ利用します。URL は "/en-US/docs/foo" のように完全なパスである必要があります。相対 URL は動作しません。しかし、"/destination/url/here#section_name" のように、ハッシュマーク("#") 文字を含んだターゲットを使って、セクションを指定することが可能です。これでターゲットページのセクションへ直接ユーザーをリダイレクトさせることができます。

+ +

リダイレクトページの内容は、リダイレクト指示のみとするべきです。それ以外の内容はリダイレクトを作成する前に、すべて新しいページへ移してください。また、オリジナルページのあらゆるレビューフラグをクリアしておき、要レビューの一覧に不思議なエントリーがあることを避けるようにします。

+ +
+

注: 最も重要なことは、リダイレクトページからすべてのタグを削除することです。そうしないと、リダイレクトページは (同じタグを持っていると仮定して) 目的のページと一緒に検索結果に表示され、読者を混乱させ、検索結果ページの貴重なスペースを使ってしまいます。また、 SEO にも悪影響を及ぼす可能性があります。

+
+ +

ページを削除するとき

+ +

ページの削除を依頼する前に、MDN 上のほかのページにリダイレクトをすべきではないか考えてください。もしユーザーが古いリンクからこのページに来た場合には、404("page not found") エラーを返すよりも正しいページへリダイレクトさせた方がよいです。ページの完全な削除は最終手段です。スパムやその他まったく適切でない内容に対処するための手段として予約されたものです。

+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ja/orphaned/mdn/editor/source_mode/index.html b/files/ja/orphaned/mdn/editor/source_mode/index.html new file mode 100644 index 0000000000..b78db66714 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/source_mode/index.html @@ -0,0 +1,137 @@ +--- +title: ソースモード +slug: MDN/Editor/Source_mode +tags: + - Guide + - Intermediate + - MDN Meta + - editor + - ガイド +translation_of: MDN/Editor/Source_mode +--- +
{{MDNSidebar}}
+ +

MDN のエディターには、ソース編集モードへ切り替えられる目立つボタンがあります。このモードでは、編集している本文の基礎となる HTML を見ることができます。このガイドでは MDN の wiki コンテンツのソース編集モードで何ができるか、これで何をすべきか、また最も重要なこととして何をすべきでないのかを理解するのに役立ちます。

+ +
+

ソースモードを使用することを考える前に、使用しないことを私たちが強く主張していることにご注意ください。やっていることがスタイルガイドに合わせるための単純なことでない限り (残念ながらまだソースモードでないと作成できないものが必要とされています)、ソースモードを使用する必要はないはずです。下記の{{anch("Warnings and caveats", "警告")}}をご覧ください。

+
+ +

ソースモードにアクセスする

+ +

ソースモードに移るのは簡単です。エディターツールバーの左上隅にあるソースボタンをクリックしてください。

+ +

ソースモードボタンが強調表示されたエディタツールバーの部分的なスクリーンショット

+ +

整形や画像などによって、ソースは WYSIWYG コンテンツより (縦方向に) 短く、ソースを編集ボックス内で見つけるのに上にスクロールしないといけないことがよくあります。

+ +

警告と抗議

+ +

上述の通り、ソースモードを使う必要があることは滅多にありません。ソースをいじらないとできないことは少ししかありません。最終的には編集インターフェイスがこれを扱えるように更新されるでしょう。

+ +

MDN 貢献者ガイドのどこにも記述されていないことはソースに追加してはいけません。つまり、

+ + + +

ソースモードで作業する

+ +

ソースモードでは、 Wiki ページを構成する生の HTML を編集できます。エディターでの制約を受けなくなりますが、行ったすべての作業がスタイルガイドに適合していて、安全かつ確実であることを確認してください。

+ +
+

ソースモードでの編集時間を長くするのではなく、微修正のみを行うべきです。

+
+ +

残念ながら、Tab キーは、ソースモードでは動作しません。 Tab キーを使用する場所では、半角スペースを 2 つ挿入してください。

+ +

MDN が許可しない HTML 要素や属性を使用すると、ドキュメントが保存されるときに HTML から削除されます。加えて、ドキュメントの HTML は、適度に読みやすく一貫性を保つために再整形されます。

+ +

ソースモードを正しく使用する

+ +

MDN のスタイルガイドに従う唯一の方法は、いくつかの具体的な例でソースモードの使用を頼ることです。 このセクションでは、これらのケースと、他のものを壊すことなくこれらの機能を適切に実装する方法について説明します。

+ +

サンプルコードの行を強調表示する

+ +

ツールバーのブロックグループの PRE または 構文ハイライター ボタンを使用して設定されたサンプルコードスニペットのブロック内で、特定のコード行に特別な注意を向けることができます。これを行う唯一の方法は、ソースモードを開いてコードを含む {{HTMLElement("pre")}} ブロックを探し、<pre> タグの {{HTMLAttrxRef("class")}} 属性を編集して、次のような highlight コンポーネントを組み込むことです。

+ + + +
"hightlight[" <line-number-list> "]"
+
+Where:
+<line-number-list> = [ <line-number> | <line-range> ]#
+<line-range> = <line-number> - <line-number>
+<line-number> = <number-token>
+ +

たとえば、既存のタグが <pre class="brush: js"> で、4行目と7行目にハイライトを追加する場合は、それを <pre class="brush:js; highlight:[4,7]"> に変更します。

+ +

より完全な例を見てみましょう。

+ +
+ + + + + + + + + + + + + +
ハイライト前ハイライト後
+ 
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var path1 = new Path2D();
+path1.rect(10, 10, 100, 100);
+
+var path2 = new Path2D(path1);
+path2.moveTo(220, 60);
+path2.arc(170, 60, 50, 0, 2 * Math.PI);
+
+ctx.stroke(path2);
+
+ +

ここで、 {{HTMLElement("pre")}} タグは <pre class="brush: js;">

+ 		+ 
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+var path1 = new Path2D();
+path1.rect(10, 10, 100, 100);
+
+var path2 = new Path2D(path1);
+path2.moveTo(220, 60);
+path2.arc(170, 60, 50, 0, 2 * Math.PI);
+
+ctx.stroke(path2);
+ +

ここで <pre> タグは <pre class="brush: js; highlight:[4,7]">に変更されました。

+
+
+ +

ツールバーボタンにないスタイル

+ +

私たちは MDN で使用するいくつかのスタイルを持っていますが、通常のユーザーインターフェイスでは使用できません。 幸いにも、これらはあまり頻繁には使用されません。 いくつかの例があります。

+ + diff --git a/files/ja/orphaned/mdn/editor/syntax_highlighting/index.html b/files/ja/orphaned/mdn/editor/syntax_highlighting/index.html new file mode 100644 index 0000000000..d369e0d239 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/syntax_highlighting/index.html @@ -0,0 +1,45 @@ +--- +title: シンタックスハイライト +slug: MDN/Editor/Syntax_highlighting +tags: + - Guide + - Howto + - MDN Meta +translation_of: MDN/Editor/Syntax_highlighting +--- +
{{MDNSidebar}}

この機能は、MDNの記事にコードの例を追加するとき、構文の強調表現を可能にし、適切な部分をコードから視覚的に見つけやすくするように手助けをします。コードにシンタックスハイライトを行うには、

+ +
    +
  1. +

    記事にコードを記述します。

    + +

    void main(int argc, char **argv) {

    + +

    printf("Hello world\n");

    + +

    }

    +
    2. +
  2. +

    コード部分を選択し、ツールバーの PRE アイコンをクリックします。

    + + 
    void main(int argc, char **argv) {
+
+printf("Hello world\n");
+
+}
+
    +
    3. +
  3. +

    Syntax Highlighter アイコンをクリックし、コードに適したプログラミング言語を選択します。以下の例ではC/C++を選択しています。

    + + 
    void main(int argc, char **argv) {
+
+printf("Hello world\n");
+
+}
    +
    4. +
+ +
+

Note: エディタ上ではシンタックスハイライトが行われません。プレビューを表示するか、変更を保存して記事を表示することでシンタックスハイライトを確認できます。

+
diff --git a/files/ja/orphaned/mdn/editor/tables/index.html b/files/ja/orphaned/mdn/editor/tables/index.html new file mode 100644 index 0000000000..88278dbeb3 --- /dev/null +++ b/files/ja/orphaned/mdn/editor/tables/index.html @@ -0,0 +1,160 @@ +--- +title: 表 +slug: MDN/Editor/Tables +tags: + - Guide + - MDN Meta + - editor +translation_of: MDN/Editor/Tables +--- +
{{MDNSidebar}}
+ +

表は情報を表現する便利な方法です。この記事では MDN の表を作成し、維持する方法と、いつ作るべきでいつ作るべきでないのかをカバーします。

+ +

MDNでは、主にデータ点ごとに2つを超える情報のリストを表す時に表を使います。名前と値のあるリストを作成している場合は、ふつうは表の代わりにリストを使います。つまり2列の表の使用は避けた方が良いです。これは主にモバイル端末では表の表示が難しく読みにくいことがあるためで、このためなるべく使用を避けています。

+ +

表の使い方や適切な書式の詳細は MDN スタイルガイドを読んでください。しかし、表の挿入や編集の実用テクニックを見ていきましょう。

+ +

表を作成する

+ +

新しい表を挿入するには、ツールバーの表ボタンを押してください。外見は as of Aug-2017 のようにになっています。

+ +

表のプロパティダイアログボックスが開きます。

+ +

表のプロパティダイアログボックスの表のプロパティタブのスクリーンショットb

+ +

ここには表のプロパティと高度な設定の2つのタブがあります。

+ +

表のプロパティタブ

+ +

This tab is where you'll do most of your work configuring the table, as there are very few items in the Advanced tab that we recommend using. The options here are:

+ +
+
行数
+
The number of rows in your table. You may add more rows while in the editor, but this lets you quickly configure your table.
+
列数
+
The number of columns in your table.
+
ヘッダ
+
Lets you configure where your headers are, if any. By default, no header cells are added to your table; however, we generally prefer that tables have headers, so you should change this most of the time. The possible values are None, First row, First column, and Both.
+
行揃え
+
Lets you align the table along the left, right, or center of the article. Please do not use this option. Our style guide specifies that tables should always be left-aligned. There are very few exceptions to this rule.
+
キャプション
+
You may choose to add a caption to your table; however, we do not usually do so on MDN, so you will probably leave this blank.
+
表の概要
+
You should typically leave this blank, as you should be providing appropriate explanatory text adjacant to your table.
+
+ +

高度な設定タブ

+ +

The Advanced tab provides a few additional options, most of which we don't use on MDN and will likely remove in the future.

+ +

Screenshot of the Table Properites dialog box's Advanced tab

+ +

As you see here, there are only four options; they are:

+ +
+
Id
+
The {{HTMLElement("table")}} element's id. We generally do not use IDs on tables on MDN.
+
文字表記の方向
+
Lets you establish the writing direction used in the table. This should be used only when localizing content.
+
スタイル
+
This field lets you hand-enter custom CSS. Do not use this field! We will probably remove your table if you do. We are trying to eliminate all uses of custom styles outside what's provided by our stylesheets.
+
スタイルシートクラス
+
This lets you specify a stylesheet class to use for the table. This should nearly always be "standard-table", which is our standard table class.
+
+ +

Once you've finished configuring your table, click the OK button to create it.

+ +

表を保守する

+ +

Once a table has been created, working with it is very much like in any table editor, entering data into its cells. Pressing the tab key will advance you to the next cell in the table, wrapping to the next row if you're in the last cell in the row you're currently working on. If you're in the last cell of the last row when you press tab, a new row will be added to the end of the table, and the cursor will be placed in the first cell of the new row.

+ +

You may right-click on the table to get an assortment of options for adjusting the cells, rows, columns, and the table itself:

+ +

Screenshot of the Table context menu

+ +
+
Paste
+
On browsers that support pasting via script (some, including Firefox, do not, for security purposes), selecting this option pastes the contents of the clipboard at the current point in the table.
+
Cell
+
This submenu offers options related to the selected cell or cells. See {{anch("Cell options")}}.
+
Row
+
This submenu offers options related to the selected row or rows. See {{anch("Row options")}}.
+
Column
+
This submenu offers options related to the selected column or columns. See {{anch("Column options")}}.
+
Delete Table
+
Deletes the entire table.
+
Sort Table
+
Opens a dialog box providing options for sorting the contents of the table. See {{anch("Sorting tables")}} below.
+
Table Properties
+
Opens the same table properties dialog used to create a new table.
+
+ +

セルのサブメニュー

+ +

The Cell submenu offers options related to manipulating and editing cells in your table, and looks like this:

+ +

Screenshot of the Table context menu's Cell submenu

+ +

These options should be fairly self-explanatory, with the exception that Merge Cells is available only if you have selected multiple cells; you can then use this option to combine them into a single cell. The Merge Right and Merge Down options merge the current cell with the one to the right, or below, respectively.

+ +

セルプロパティのダイアログボックス

+ +

The Cell Properties option opens a dialog box that gives you control over the details of a cell:

+ +

Screenshot of the Cell Properties dialog box

+ +

The options you can configure here are:

+ +
+
Width
+
The width of the cell; you may change the units used for this value using the adjacent drop-down. Please don't use this. You shouldn't need to adjust widths of cells except in rare cases involving nesting images or example code within tables.
+
Height
+
The cell's height; this is always in pixels. Please don't use this. We prefer for cell sizes to be determined automatically, except in exceptionally rare cases.
+
Word Wrap
+
Specifies whether or not the cell's contents should be permitted to wrap. This should almost always be left at "Yes", the default.
+
Horizontal Alignment
+
Allows you to set the horizontal alignment for the cell's or cells' contents. This should almost always be left at the default.
+
Vertical Alignment
+
Lets you set the vertical alignment of the cell or cells. This should nearly always be left at the default, but may be adjusted if necessary.
+
Cell Type
+
Lets you specify whether the cell or cells contain data or header information. Making a row a header row gives it header styling that stands out from the data within the table.
+
Rows Span
+
Lets you specify how many rows the cell should take up within the table. Rarely needed, but useful for certain types of table.
+
Columns Span
+
Lets you indicate how many columns the cell should occupy within the table. You should rarely need to use this option.
+
Background Color
+
Lets you specify a background color for the cell. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.
+
Border Color
+
Lets you specify a border color for the cel. Please try to avoid using this; the rare cases in which changing the colors in a table are acceptable are covered by CSS classes.
+
+ +

行のサブメニュー

+ +

The Row submenu gives you options you may use to adjust and refine the rows in your table:

+ +

Screenshot of the Table context menu's Row submenu

+ +

These options are all straightforward:

+ + + +

列のサブメニュー

+ +

The Column submenu lets you edit the columns in your table:

+ +

Screenshot of the Table context menu's Column submenu

+ +

These options mirror those in the row options menu:

+ + + +

{{EditorGuideQuicklinks}}

diff --git a/files/ja/orphaned/mdn/kuma/server_charts/index.html b/files/ja/orphaned/mdn/kuma/server_charts/index.html new file mode 100644 index 0000000000..d8664c5fa9 --- /dev/null +++ b/files/ja/orphaned/mdn/kuma/server_charts/index.html @@ -0,0 +1,63 @@ +--- +title: サーバーチャート +slug: MDN/Kuma/Server_charts +tags: + - Kuma + - MDN Meta +translation_of: MDN/Kuma/Server_charts +--- +
{{MDNSidebar}}{{IncludeSubnav("/ja/docs/MDN")}}
+ +

このページには MDN サーバのステータスチャートが一覧表示されます。

+ +

直近の 30 分

+ +

エラーレート

+ +

{{EmbedNewRelicChart("2fKQPvMkSwU", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (平均)

+ +

{{EmbedNewRelicChart("43yJ3xwUecU", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (パーセンタイル)

+ +

{{EmbedNewRelicChart("6NzEi7ZBdoN", 300)}}

+ +

直近の 24 時間

+ +

エラーレート

+ +

{{EmbedNewRelicChart("kVeeXx52g0l", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (平均)

+ +

{{EmbedNewRelicChart("2yWkQ9WbEZW", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (パーセンタイル)

+ +

{{EmbedNewRelicChart("aeFnbLonmvx", 300)}}

+ +

直近の 3 日間

+ +

エラーレート

+ +

{{ EmbedNewRelicChart("iv2F4gQYjFX", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (平均)

+ +

{{EmbedNewRelicChart("ddTq7AKgyaG", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (パーセンタイル)

+ +

{{EmbedNewRelicChart("bRmyM6ujKA8", 300)}}

+ +

直近の 3 ヶ月

+ +

エラーレート

+ +

{{EmbedNewRelicChart("fjJ7HnGYNLd", 300)}}

+ +

Kuma Web アプリのレスポンス時間 (平均)

+ +

{{EmbedNewRelicChart("sIaVOeAxNx", 300)}}

diff --git a/files/ja/orphaned/mdn/structures/api_references/index.html b/files/ja/orphaned/mdn/structures/api_references/index.html new file mode 100644 index 0000000000..c1d806b234 --- /dev/null +++ b/files/ja/orphaned/mdn/structures/api_references/index.html @@ -0,0 +1,58 @@ +--- +title: API リファレンス +slug: MDN/Structures/API_references +tags: + - API + - Contribute + - Guide + - Reference +translation_of: MDN/Structures/API_references +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ja/docs/MDN")}}
+ +

クライアント側の JavaScript API は、ウェブ上で利用可能な技術の大部分を占めています。MDN には、これらの API で使用できる機能とその使用方法を説明する広範囲な参考資料が含まれています。このガイドセットでは MDN で API リファレンス資料を作成する方法について説明します。

+ +

事前に準備するリソース

+ +

API の文書化を開始する前に、次のものが必要です。

+ +
    +
  1. 最新の仕様: W3C 勧告か初期の編集者の草稿かどうかに関わらず、その API をカバーする仕様の最新の草稿 (またはその仕様を参照) を参照する必要があります。通常それはウェブ検索で見つかります。最新のバージョンは「最新草稿」、またはそれに類するものの下にリストされている仕様のすべてのバージョンからリンクされることがよくあります。
    2. +
  2. 最新のウェブブラウザー: Firefox Nightly/Chrome Canary のような実験的/アルファ版のものが、あなたが文書化している機能をサポートする可能性が高いはずです。これは初期の/実験的な API を文書化している場合に特に関係します。
    3. +
  3. デモ/ブログ記事/その他の情報: できるだけ多くの情報を探しましょう。主なインターフェイス/プロパティ/メソッドが何であるか、主要な用途は何であるか、そしてそれを使って簡単な機能を書く方法を学ぶことで、API の仕組みに慣れるための時間を費やすことから始めておくと便利です。
    4. +
  4. 有益なエンジニアリングの連絡先: 仕様、API の標準化に携わっている人、またはブラウザでの実装について質問するためのフレンドリーなエンジニアリング担当者を見つけることは本当に便利です。見つけるのに適した場所は次のとおりです。 +
      +
    • 関連会社に勤めている場合は、社内のアドレス帳。
      • +
    • Mozilla の dev-platform や dev-webapi のリスト、public-webapps のような W3C のリストなど、その API の議論に関係する公開メーリングリスト。
      • +
    • 仕様そのもの。たとえば、 Web Audio API の仕様書では著者とその連絡先の詳細が上部に表示されています。
      • +
    +
    5. +
+ +

高水準の構造

+ +
+
What does an API reference need?
+
この記事では完全な API リファレンスに必要なページについて説明します。
+
Page types
+
MDN に繰り返し使用されるいくつかの種類のページがあります。この記事では、これらのページ種別とその目的、および新しいページを作成するときに使用する各テンプレートとテンプレートの例について説明します。
+
+ +

個々のページの特徴

+ +

これらの記事では、API リファレンスページに必要な個々のページの特徴を作成する方法について説明します。

+ +
+
API リファレンスサイドバー
+
MDN API リファレンス記事にサイドバーを含めると、その API に関連する関連インタフェース、チュートリアル、その他のリソースへのリンクが表示されるようにカスタマイズできます。この記事では、この方法について説明します。
+
構文の節
+
MDN リファレンスページの構文の節には、その機能が持つ正確な構文 (例えば、どのような引数を受け付けるか、どの引数がオプションかなど) を定義する構文ボックスが含まれています。
+
コード例
+
MDN には、ウェブプラットフォーム機能の使用方法を示すために、ページ全体に挿入された多数のコード例があります。この記事ではコードの例をページに追加する際に使用できるさまざまなメカニズムと、使用する必要があるものとそのタイミングについて説明します。
+
仕様書一覧表
+
MDN のすべてのリファレンスページは、その API または技術が定義されている仕様または仕様に関する情報を提供する必要があります。この資料では、これらのテーブルの外観とその構成方法について説明します。
+
互換性一覧表
+
MDN には、公開されているウェブ文書の互換性一覧表の標準フォーマットがあります。つまり、すべてのブラウザーで共有されているDOM、HTML、CSS、JavaScript、SVG などの技術の文書です。この記事では、機能を使用して MDN ページに互換性データを追加する方法について説明します。
+
diff --git a/files/ja/orphaned/mdn/structures/api_references/what_does_an_api_reference_need/index.html b/files/ja/orphaned/mdn/structures/api_references/what_does_an_api_reference_need/index.html new file mode 100644 index 0000000000..952c49ed70 --- /dev/null +++ b/files/ja/orphaned/mdn/structures/api_references/what_does_an_api_reference_need/index.html @@ -0,0 +1,168 @@ +--- +title: API リファレンスには何が必要ですか？ +slug: MDN/Structures/API_references/What_does_an_API_reference_need +tags: + - API + - ページ + - リファレンス +translation_of: MDN/Structures/API_references/What_does_an_API_reference_need +--- +
{{MDNSidebar}}
+ +

この記事では、完全な API リファレンスに必要なページについて説明します。

+ +
+

メモ: API リファレンスで作業しているときに書いたり更新したりする必要があるドキュメントのリストを作成し、完了したらチェックを外すことをお勧めします。

+
+ +

API ページの概要

+ +

An API reference will generally contain the following pages. You can find more details of what each page contains, examples, and templates, in our Page types article.

+ +
    +
  1. Overview page
    2. +
  2. Interface pages
    3. +
  3. Constructor pages
    4. +
  4. Method pages
    5. +
  5. Property pages (including event handlers properties)
    6. +
  6. Event pages
    7. +
  7. Concept/guide pages
    8. +
  8. Examples
    9. +
+ +
+

Note: We'll be referring to the Web Audio API for examples in this article.

+
+ +
+

Note: To create a page as specified below, the easiest way is to go to the parent page you want it to hang off, and choose Cog icon > New sub-article. If you haven't got this option available on your MDN interface, you'll need to request this privilege (ask at mdn-admins@mozilla.org), or ask another MDN contributor to create them for you.

+
+ +

概要ページ

+ +

A single API overview page is used to describe the role of the API, its top-level interfaces, related features contained in other interfaces, and other high level details. Its name and slug should be the name of the API plus "API" on the end. It is placed at the top level of the API reference, as a child of https://developer.mozilla.org/en-US/docs/Web/API.

+ +

例:

+ + + +

インターフェイスページ

+ +

Each interface will have its own page too, describing the purpose of the interface, listing any members (constructors, methods, properties, etc. it contains), and showing what browsers it is compatible with. A page's name and slug should be the name of the interface, exactly as written in the spec. Each page is placed at the top level of the API reference, as a child of https://developer.mozilla.org/en-US/docs/Web/API.

+ +

例:

+ + + + + +
+

Note: We document every member appearing in the interface. You should bear the following rules in mind:

+ +
    +
  • We document methods defined on the prototype of an object implementing this interface (instance methods), and methods defined on the actual class itself (static methods). On the rare occasions that they both exist on the same interface, you should list them in separate sections on the page (Static methods/Instance methods). Usually only instance methods exist, in which case you can put these under the title "Methods".
    • +
  • We do not document inherited properties and methods of the interface: they are listed on the respective parent interface. We do hint at their existence though.
    • +
  • We do document properties and methods defined in mixins, though we use the mixin name as interface name. (This is not optimal as the mixin name will not appear in the console, but it prevents the duplication of documentation. We may revisit this in the future.)
    • +
  • Special methods like the stringfier (toString()) and the jsonizier (toJSON()) are also listed if they do exist.
    • +
  • Named constructors (like Image()  for {{domxref("HTMLImageElement")}} ) are also listed, if relevant.
    • +
+
+ +

コンストラクタページ

+ +

Each interface has 0 or 1 constructors, documented on a subpage of the interface's page. It describes the purpose of the constructor and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the constructor, which is exactly the same as the interface name, and the title is interface name, dot, constructor name, then parentheses on the end.

+ +

Example:

+ + + +

プロパティページ

+ +

Each interface has zero or more properties, documented on subpages of the interface's page. each page describes the purpose of the property and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the property, and the title is interface name, dot, then property name.

+ +

Examples:

+ + + + + +
+

Note: Event handler properties are treated in the same way as regular properties; they are generally listed in a separate section on the interface page though.

+
+ + + +

メソッドページ

+ +

Each interface has zero or more methods, documented on subpages of the interface's page. each page describes the purpose of the method and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug is the name of the method, and the title is interface name, dot, method name, then parentheses.

+ +

Examples:

+ + + + + +

イベントページ

+ +

Each event handler property you create will have a corresponding event page, describing the event that causes the handler to fire, documented on a subpage of https://developer.mozilla.org/en-US/docs/Web/Events. Each page describes the purpose of the event and shows what its syntax looks like, usage examples, browser compatibility information, etc. Its slug and title is the name of the event.

+ +

Example:

+ + + +

Concept/guide pages

+ +

Most API references have at least one guide and sometimes also a concept page to accompany it. At minimum, an API reference should contain a guide called "Using the name-of-api", which will provide a basic guide to how to use the API. More complex APIs may require multiple usage guides to explain how to use different aspects of the API.

+ +

If required, you can also including a concepts article called "name-of-api concepts", which will provide explanation of the theory behind any concepts related to the API that developers should understand to effectively use it.

+ +

These articles should all be created as subpages of the API overview page. For example, the Web Audio has four guides and a concept article:

+ + + +

例

+ +

You should create some examples that demonstrate at least the most common use cases of the API. You can put these anywhere that is appropriate, although the recommended place is the MDN GitHub repo.

diff --git a/files/ja/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html b/files/ja/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html new file mode 100644 index 0000000000..9e550d81ac --- /dev/null +++ b/files/ja/orphaned/mdn/structures/live_samples/simple_live_sample_demo/index.html @@ -0,0 +1,37 @@ +--- +title: ライブコードサンプルの簡単なデモ +slug: MDN/Structures/Live_samples/Simple_live_sample_demo +tags: + - MDN Meta + - Structures + - 例 +translation_of: MDN/Structures/Live_samples/Simple_live_sample_demo +--- +
{{MDNSidebar}}
+ +

例

+ +

これは、MDN でライブデモを行う方法を示す非常に簡単な例です。詳細については、ライブサンプルを参照してください。

+ +
<form>
+  <label>Try me<input type="text" name="name"></label>
+  <input type="submit" value="go">
+</form>
+ +
form {
+  border-radius: 10px;
+  background: powderblue;
+}
+ +
var f = document.querySelector('form');
+
+f.addEventListener('submit', function(ev) {
+  ev.preventDefault();
+  document.querySelectorAll('input')[1].value = 'sending';
+}, false);
+ +

{{ EmbedLiveSample('The_example', '', '', '') }}

+ +
+

注: ローカライズしたページでは、最初の引数の値は、サンプルを含む見出しの ID と同じにしてください．

+
diff --git a/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html b/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html new file mode 100644 index 0000000000..a22ce9c70e --- /dev/null +++ b/files/ja/orphaned/mdn/structures/macros/commonly-used_macros/creating_templates_for_multi-languages/index.html @@ -0,0 +1,12 @@ +--- +title: creating templates for multi-languages +slug: >- + MDN/Structures/Macros/Commonly-used_macros/creating_templates_for_multi-languages +--- +
{{MDNSidebar}}
+
註：　このページは執筆中です。
+

執筆用memo

+ +

テンプレートの 2 つのタイプ

+

page.langage を使わない

diff --git a/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html b/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html new file mode 100644 index 0000000000..d89e8efbdb --- /dev/null +++ b/files/ja/orphaned/mdn/tools/add-ons_and_plug-ins/index.html @@ -0,0 +1,33 @@ +--- +title: MDN に関連するアドオンとプラグイン +slug: MDN/Tools/Add-ons_and_plug-ins +tags: + - Landing + - MDN Meta + - Site-wide + - Tools +translation_of: MDN/Tools/Add-ons_and_plug-ins +--- +
{{MDNSidebar}}

MDN コミュニティのメンバーは多くの楽しく、便利なプロジェクトを立ち上げています。 MDN の利用や、内容への貢献を簡単にする、ツール、アドオン、ユーテリティを作成するものがあります。

+ +

こうした数々のプロジェクトのリンクがここにあります。これらの多くは完成まで手助けも要るため、あなたが助けるものを探しているコーダーである場合、ここに機会が見つかるかもしれません!

+ +
+
+
MDN doc tests add-on
+
MDNの編集中に表示されるサイドバーを作成する Firefox アドオンで、コンテンツのテストと妥当性チェックを提供します。これは作業途中なので、より多くのテストを歓迎します!
+
MDN automatic translation
+
{{Glossary("Regular_expression", "正規表現")}}ベースのルールを使って、自動的によくある用語を翻訳された形に置き換える。
+
MDN Search
+
URLバーで "mdn <searchterm>" とタイプすることですばやくMDN のリファレンス素材を検索することができる WebExtension。 組み込みのMDN 検索をベースにしているが、より良い結果を出すようにロジックが追加されている。JavaScript と CSS リファレンスを探すのに最適化されている。
+
MDN Interface Documentation Generator
+
この Firefox アドオンは、XPCOM インターフェイス用に、適切にフォーマットされたスケルトン生成に役立ちます。しばらく更新されてないので、バージョン互換性の情報を正しく表示しませんが、いろいろと便利です。いくつか更新されたら、またかけがえないものに戻るでしょう。
+
 
+
Save with comment hotkey addon
+
MDNエディタのリビジョンコメント欄にすぐにスクロールさせる Firefox アドオン。つまりこれによって、あなたが編集したことに対する、小さな情報を簡単に追加できます。
+
Sublime Text MDN search plug-in
+
コーディング中にドキュメントを得るのに、MDNをすぐに検索できる Sublime Text のプラグイン。
+
Lazarus
+
定期的にフォームデータをlocal storageに自動保存する Firefox 拡張機能で、すべてのデータをクラッシュやエラーから保護します。これは MDN で作業する時に便利で、なぜなら MDN エディターのコンテンツも保存し、成果を保存する前に何か失敗した場合に戻すことができるためです。
+
+
diff --git a/files/ja/orphaned/mdn/tools/feeds/index.html b/files/ja/orphaned/mdn/tools/feeds/index.html new file mode 100644 index 0000000000..6d30d1a342 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/feeds/index.html @@ -0,0 +1,53 @@ +--- +title: MDN の Feeds API について +slug: MDN/Tools/Feeds +tags: + - Kuma + - MDN Meta + - Site-wide + - ツール + - リファレンス +translation_of: MDN/Tools/Feeds +--- +
{{MDNSidebar}}

MDN の wiki では、サイトの更新内容を追跡する為にフィード API が提供されています。この API はまだ作成中であるかもしれませんが、この情報は役立つかもしれません。

+ +

フィードへのアクセス

+ +

フィードは次の様な形式の ベース URL から始まります。

+ +
https://developer.mozilla.org/<locale>/docs/feeds/<format>/
+ +

ベース URL 内の各プレースホルダーはそれぞれ次の意味を持ちます。

+ + + +

json 形式を使用する場合、オプションとして the JSONP convention で JavaScript としてデータを読み込むための ?callback=<callback name> クエリパラメーターが指定可能です。

+ +

購読可能フィード

+ +
+
all
+
最近の記事の変更すべてを編集日付順で。新規に作成された記事も含む。すべての変更は各記事のフィードのエントリーに結ばれています。例えば: https://developer.mozilla.org/ja/docs/feeds/rss/all
+
revisions
+
特定の記事のリビジョンを編集日付順で。新規作成も含む。各リビジョンはフィードの別々のエントリーを持ちます。例えば: https://developer.mozilla.org/ja/docs/feeds/atom/revisions
+
tag/<tagname>
+
フィードの指定タグの付いた記事の更新情報のみを編集日付順で取得。例えば: https://developer.mozilla.org/ja/docs/feeds/json/tag/CSS?callback=loadFeed
+
files
+
最近のファイルのアップロードまたは変更。例えば: https://developer.mozilla.org/ja/docs/feeds/atom/files
+
l10n-updates
+
翻訳ページの最終更新時以降に翻訳の元となる言語の記事が変更された記事のリスト (つまり、他の言語から翻訳された記事で、元の言語の記事が変更された場合)。例えば: https://developer.mozilla.org/fr/docs/feeds/atom/l10n-updates
+
needs-review[/<reviewtype>]
+
要レビューとされた記事のリスト。technical 、editorial 、kumascript の何れかに絞って取得する事も可能。 + +
+
+ +

 

diff --git a/files/ja/orphaned/mdn/tools/page_deletion/index.html b/files/ja/orphaned/mdn/tools/page_deletion/index.html new file mode 100644 index 0000000000..e6ebdd1910 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/page_deletion/index.html @@ -0,0 +1,61 @@ +--- +title: ページの削除 +slug: MDN/Tools/Page_deletion +tags: + - Guide + - MDN + - MDN Project + - Page-level +translation_of: MDN/Tools/Page_deletion +--- +
{{MDNSidebar}}
+ +

MDN からページを完全に削除することは滅多にありません。もっともよくある理由は、ページがスパムによって作成された、または間違って作成された場合です。かつては有用であったページが時代遅れの技術の記述となった場合には、削除するのではなく MDN の /Archive セクションに移動することでアーカイブされます。

+ +

ページの削除の申請

+ +

MDN の管理者だけがページを削除することができます。管理者以外のユーザーは、ページの削除をリクエストすることができます。

+ +

ページを削除するには次のようにしてください。

+ +
    +
  1. ページコンテンツの削除や変更はしないでください。ページ削除時にはその時点のコンテンツを記録しておきます。
    2. +
  2. ページに "Junk" タグを追加してください。他のタグは削除しないでください。
    3. +
  3. ページの削除に緊急を要する場合 (例えばコンテンツが不適切、攻撃的、あるいは技術的に危険なものである場合など) は、 MDN 管理者にお知らせください。
    4. +
+ +

管理者は削除が適切かどうか判断した上で、随時ページを削除していきます。

+ +

ページを削除するには

+ +

ページを削除すると決めた管理者は、以下のようにしてください。

+ +
    +
  1. 削除したいページの右上隅付近にある詳細メニューを開いてください。
    2. +
  2. このページを削除をクリックしてください。「ページの削除」画面が次のように現れます。
    +
    + 削除しようと選択したページのタイトルと、関連する一部のメタデータが表示されます。
    3. +
  3. 理由欄に "Spam" や "Junk" や "Created by mistake" など、適切な理由を入力してください。
    4. +
  4. 削除ボタンをクリックしてください。「文書が削除されました」画面が表示され、このページへのリンクがあれば表示されます。 (権限のないユーザーには、この文書を復元ボタンが表示されません。)
    5. +
+ +

アクセス制限

+ +

ページ削除ツールには文書の構造を破壊する可能性が存在するため、アクセスには上位の権限を必要とします。

+ +

この権限を持つロール

+ + + +

この権限を得るための条件

+ +

このツールにアクセスする権限を得るための条件は以下のとおりです。

+ + + +

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/orphaned/mdn/tools/page_moving/index.html b/files/ja/orphaned/mdn/tools/page_moving/index.html new file mode 100644 index 0000000000..920c6f299c --- /dev/null +++ b/files/ja/orphaned/mdn/tools/page_moving/index.html @@ -0,0 +1,57 @@ +--- +title: ページの移動 +slug: MDN/Tools/Page_moving +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_moving +--- +
{{MDNSidebar}}
+ +

なぜページ (またはページのツリー) を移動するのでしょう。サイトの階層の適切な場所ではなく、サイトの最上位に作成してしまったのかもしれません。あるいは既存の文書を整頓しているのかもしれませんね。古い内容をアーカイブする必要があるのかもしれません。このような理由で MDN はページを移動する機能を持っており、1つのページを移動するだけではなく、その下位のページをまとめて移動することもできます。

+ +

ページ移動ツールにより、編集者は MDN ツリー内の文書およびそのすべてのサブページの URL またはスラッグを変更することができます。ページを整頓したり、間違った位置にあるページを修正したりするときに、とても手軽で強力なツールです。

+ +
+

メモ: 特別な権限を持つユーザーだけが MDN でページを移動することができます。この記事を移動という選択肢が詳細 メニューに表示されない場合、使用するのに権限が必要です。この権限を得る方法については、下にあるアクセス制限 を見てください。

+
+ +

ページを移動するには

+ +

ページまたはページのツリーを移動するには、以下のようにします。

+ +
    +
  1. MDN で移動したいページの右上の角にある詳細 メニューを開いてください。
    +
    2. +
  2. この記事を移動 をクリックしてください。下のような「ページの移動」画面が表示されます。
    +
    + 一番上には、すべて (アルファベットが) 大文字で、移動しようとしているページのタイトルが表示され、続いてページを移動するためのフォームを正しく記入する方法についての注意書きの一覧が表示されます。ページタイトルは編集可能となっていますが、ここで変更しても反映されません。この問題の状態については、 {{bug(828533)}} を参照してください。
    3. +
  3. 新しい URL スラグの隣の枠に、ページの移動先としたいスラグを入力してください。この行の上にあるのは URL のプレビューで、ここに、新しい URL スラグの値を反映した、ページ移動後のフルパスの URL が表示されます。
    4. +
  4. この移動操作によって影響を受ける全てのサブページの一覧が表示されます。N ページを移動ボタンとキャンセルボタンの下にあります。サブページがなければ、その旨が表示されます。この一覧は、ページの移動が予測しなかった副作用を与えるのか判断するのに役立つかもしれません。閲覧の多いコンテンツの移動や、一度に大量のページを移動するのには注意を払ってください。
    5. +
  5. すべてが望み通り設定されていると分かったら、 N ページを移動するボタンをクリックします。非同期のバックグラウンドプロセスが始まり、各ページを移動してかつ元のページにリダイレクトを設置します。ですので、古い URL もリダイレクトによって動作し続けます。移動のプロセスが完了したらメールが届きます。そのメールには、ページの新しい場所にクリックして移動できるリンクが含まれています。
    6. +
+ +

アクセス制限

+ +

内容をおかしな場所に移動することで害となる明らかな可能性が存在するため、このツールは誰もが使えるようにはなっていません。

+ +

この権限を持つロール

+ + + +

この権限を得るための条件

+ +

このツールにアクセスする権限を得るための条件は以下のとおりです。

+ + + +

この権限を取得する手続については、上位権限の申請を参照してください。

diff --git a/files/ja/orphaned/mdn/tools/page_regeneration/index.html b/files/ja/orphaned/mdn/tools/page_regeneration/index.html new file mode 100644 index 0000000000..590eda0260 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/page_regeneration/index.html @@ -0,0 +1,34 @@ +--- +title: MDN 上のページのレンダリング +slug: MDN/Tools/Page_regeneration +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_regeneration +--- +
{{MDNSidebar}}
+ +

MDN サイトは性能上の理由でページをキャッシュしています。 この結果、ページに対する保存済みの変更が、次回リロード時に反映されない場合があります。常にではないがしばしば、ページがの更新が処理中であることを示すバナーが表示されます。ブラウザーで強制リフレッシュしてサーバーからページをリロードできますが、サーバー上の更新が完了しないと効果がないことがあります。

+ +

いくつかのページ (特に Landing ページ【訳注: 階層下のページの一覧を列挙するページ】) では、マクロを使って自動的に内容の生成と更新を行っています。Landing ページのためにこれを行うことで、作者が手動で更新しなくても、新しい記事が自動的にページに載ることが保証されます。これは長期間の貢献者には便利であり、新参者にはサイトの階層のどこにリンクすべきか分からずに成果を見失うことを避けるのに役立ちます。

+ +

またあるページを別のページにトランスクルージョンする(例えば {{TemplateLink("Page")}} マクロを使って)のにも使います。

+ +

MDN は性能上の理由でレンダリングしたコンテンツをキャッシュしているため、元の素材（たとえばマクロの出力や引用されるページ）に加わった変更は自動的にはページに反映されません。そのような元の素材に頻繁に変更が加わることがわかっているならば、ページの自動生成を有効にすることを検討したくなるかもしれません。

+ +

自動生成を有効にするには: 【訳注: この機能は現在、英語版のページでのみ設定できます】

+ +
    +
  1. EDIT ボタンをクリックし、編集モードに入ります。
    2. +
  2. ページタイトルの下にある  Edit page title and properties をクリックします。ページのメタデータフィールドが現れます。
    3. +
  3. Rendering max age に値を設定します。この値が、キャッシュされたページが(マクロの再実行も含めて)再生成されるスケジュールを決定します。普通は 4 または 8 Hours を指定します。 文書が頻繁に変更される技術に関しては、より少ない数値を指定しても良いでしょう。
    4. +
  4. 変更を保存します。リビジョンコメントに、設定内容を記録しておくのは良い習慣です。例: "Rendering max age を 4 Hours に設定"
    5. +
+ +

ページは指定したスケジュールに従って再生成されます。

+ +
+

注: "Edit page title and properties" オプションは、文書の作成時には現れませんので、一度保存してから開き直す必要があります。

+
diff --git a/files/ja/orphaned/mdn/tools/page_watching/index.html b/files/ja/orphaned/mdn/tools/page_watching/index.html new file mode 100644 index 0000000000..fe7b3a7f45 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/page_watching/index.html @@ -0,0 +1,49 @@ +--- +title: ページやページ群を監視・購読する +slug: MDN/Tools/Page_watching +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_watching +--- +
{{MDNSidebar}}
+ +

MDN ページを購読することで、そのページが更新・変更された時はいつでもメールで通知を受け取ることができます。すべての MDN ページの右上の隅に、監視ボタンがあります。購読のオプションにアクセスするには、監視ボタンの上にポインターを動かして監視メニューを開くいてください。

+ +

MDN の監視メニューのスクリーンショット

+ +

そのページだけを購読するか、サブページも一緒に購読するかをオプションで選択してください。

+ +

ページを購読する

+ +

ユーザーがそのページを編集するたびにメール通知を受け取るには、ページの上部にある詳細メニューの最初のオプション「この記事を購読」をクリックします。

+ +

ページとすべてのサブページを購読する

+ +

2つ目のオプション「この記事と全サブ記事を購読」をクリックすると、ユーザーがそのページとすべてのサブページを編集するたびにメール通知を受け取るようになります。これは購読を要求した後に追加されたサブページも含むため、将来多くのサブページが作られた場合、その通知も同様に受け取ります。

+ +

ページの購読解除

+ +

購読を解除してページの監視をやめる場合は、再び監視メニューを開いて「この記事の購読を中止」をクリックしてください。ページを購読していると「この記事の購読を中止」とだけ表示されています。ページが変更されるたびにメール通知を受けることはなくなります。

+ +

ページ変更のメール

+ +

ページを購読すると、ページが保存されるたびにメールを受け取ります。このメールは notifications@developer.mozilla.org から MDN アカウントに登録されたメールアドレスに送信されます。各メッセージにはこの形のタイトルがあります:

+ +
[MDN] ページ "ページタイトル" が ユーザー名 によって変更されました
+ +

メッセージはタイトル情報の繰り返しで始まり、つぎにコンテンツの標準差分を表示して、正確に何が変更されたかを示します。変更は HTML ソースコードで表示され、 MDN のコンテンツに慣れていない場合少し読みにくいかもしれません。

+ +

差分の下には、変更に対応するのに役立つ、次のようなリンクの一覧があります:

+ + + +

メールの最後には、"HTML element reference とその全サブ記事に対する編集の購読を開始しました" といった、どんな購読でメールが生成されたかの通知や、購読をやめるためのリンクがあります。購読をやめるリンクをクリックすると、その監視リクエストのメッセージを受け取らなくなります。

diff --git a/files/ja/orphaned/mdn/tools/put_api/index.html b/files/ja/orphaned/mdn/tools/put_api/index.html new file mode 100644 index 0000000000..6e05522016 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/put_api/index.html @@ -0,0 +1,208 @@ +--- +title: PUT API +slug: MDN/Tools/PUT_API +tags: + - Advanced + - Automation + - Documentation + - Draft + - Guide + - MDN Meta + - PUT API + - Page-level + - Tools +translation_of: MDN/Tools/PUT_API +--- +
{{MDNSidebar}}
+ +
 {{draft}}
+ +

MDN Wiki はページの全体、または一部の更新のための実験的な HTTP PUT API を提供しています。この機能は、次のような時に便利です:

+ + + +

アプリケーションをテストする

+ +

MDN を実行するソフトウェアを開発する中で、次のようにいろいろなステージ上のサイトインスタンスをホストしています:

+ + + +

プロダクションサイトを無駄にしないようにするには、まずステージングに対してアプリケーションを開発する必要があります。それから、あなたが望むことを合理的に実行することができたら、それをプロダクションに反映するように再構成します。また、開発に取り組むこともできますが、問題が発生する可能性があります。

+ +

API キーを作成する

+ +

APIキーを使うと、毎回 Persona ログインするような介入を要求せずに、アプリケーションを代理人として動作させることができます。SSL 上の HTTP ベーシック認証を使ってユーザー名とパスワードを提供します。基本的な使用のトラッキングを集めて、どのように使われているかがわかるようにします。そして、たまたま持つべきでない人々に渡った場合は、アクセスを無効にするよう API キーを削除できます。

+ +

If you have the correct privileges to do so, to create an API key, sign into MDN and visit the API keys management page. This page lets you create and delete API keys, as well as inspect recent usage history.  Only Mozillians in good standing can currently get API keys, since they grant abilities to automate changes to content rapidly, so unprivileged users must request the ability by filing a bug.

+ +

{{NoteStart}}The above link goes to the Production site, and the same keys do not work between Production and Staging. You can also get to this page by visiting your profile on the respective site: Click on your username in the upper right of the site. On your profile page, you should see a "Manage API Keys" button.{{NoteEnd}}

+ +

From there, clicking on the "Create a new API key" button should take you to an entry form so you can submit a request for an API key.

+ +

After filling out and submitting the form, you will receive a key ID and secret. These are your username and password, respectively. Copy these down somewhere safe (eg. to your application's configuration settings); the site will never display them again, and there is no recovery method. If you lose them, simply delete the API key and create another.

+ +

PUT リクエストを作成する

+ +

Since the PUT API works by way of HTTP, it should be compatible with the application environment and libraries of your choice. This first example uses the command-line tool cURL and a UNIX shell to demonstrate how to issue a simple PUT request to MDN.

+ +

リクエスト

+ +
# Base URL and API key from staging (example only; substitute your own)
+MDN_BASE_URL="https://developer.allizom.org"
+MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI"
+MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs"
+
+# Document-specific details
+DOC_USERNAME="lmorchard"  # Change this to your name
+DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample"
+DOC_TYPE="text/html"
+DOC_DATA="<b>HELLO WORLD</b>"
+
+# Putting it all together...
+curl -si -X PUT -H"Content-Type: $DOC_TYPE" -d"$DOC_DATA" -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH"
+ +

Since there's a lot going on in this cURL invocation, the example is broken into variables:

+ + + +

So, along with the variables, here are some general notes on the example and its use of the PUT API:

+ + + +

レスポンス

+ +

There are several responses you may see if you try this example: 403, 404, 201, or 205. (You may see others, but those suggest something has gone wrong with the site. That will, hopefully, be rare.)

+ +

403 Forbidden

+ +

If either the key ID or secret are incorrect, you'll see a 403 Forbidden response. Double check your key details and that you're using the right pair for the right server. Create a new API key, if necessary.

+ +

404 Not Found

+ +

If you've never created a document at the URL path /en-US/docs/User:$MDN_USERNAME, you'll see a 404 Not Found response.

+ +

{{NoteStart}}The PUT API will not automatically create parent documents. If you're creating a number of documents intended to comprise a subsection of MDN, make sure to create parent documents first from the top down in the hierarchy.{{NoteEnd}}

+ +

201 Created

+ +

If the parent document exists, but the path itself doesn't, you should see a 201 Created response. This signifies that a new document was created, as opposed to an existing one having been updated.

+ +

205 Reset Content

+ +

In the case of an updated document, you'll see a 205 Reset Content response. This means that the document content has been updated, and that you should reload the document if you happen to need to see the results.

+ +

{{NoteStart}}MDN performs certain filtering and processing steps on content, so what you put in may not be exactly what gets served back.{{NoteEnd}}

+ +

サポートされるコンテンツのタイプ

+ +

The PUT API accepts one of several content types in the request body.

+ +

text/html

+ +

There are actually two forms of text/html accepted: fragment and document.

+ +

Fragment

+ +

An HTML fragment is just an arbitrary chunk of markup, and is used as-is to revise document content. This is the simplest way to update documents.

+ +

Document

+ +

However, if the request body consists of an <html> element containing <head> and <body> elements, it's treated as a full HTML document. In this case, the following processing happens:

+ + + +

This is a more complex way to update documents, but is intended as a convenience to accomodate submission of existing HTML pages.

+ +

application/json

+ +

Although the text/html content type is handy, there are more fields belonging to documents that are useful to manage. These include the following:

+ + + +

These fields can be supplied as string values in a JSON-encoded object with the application/json content-type in a PUT request.

+ +
# Auth Stuff
+DOC_USERNAME="lmorchard"  # Change this to your name
+MDN_KEY_ID="frsNFFR3w0yEALRE9IA9oN1KwoDno8vVGrzsBNvCofI"
+MDN_SECRET="423PdCvnvraH0FkCDTKnizTmKGNkEdgQTi6RlEFTiWs"
+
+# Base Settings (for Staging Env)
+MDN_BASE_URL="https://developer.allizom.org"
+DOC_PATH=/ja//docs/User:$DOC_USERNAME/PutExample"
+DOC_TYPE="application/json"
+
+# Doc Content
+echo '{"content": "<b>Hello World</b>", "title": "New Sample Title", "show_toc": 1, "tags": "Beginner, Tutorial", "review_tags": "editorial, technical", "summary": "Sample JSON update from the API"}' > /tmp/mdn.json
+
+# Submitting Content
+curl -X PUT -H "Content-Type: $DOC_TYPE" -d @/tmp/mdn.json -u"$MDN_KEY_ID:$MDN_SECRET" "$MDN_BASE_URL$DOC_PATH"
+
+ +

multipart/form-data

+ +

This content type is handled basically like application/json - the same fields are accepted. But, it might be less useful than JSON and is supported mainly for testing purposes.

+ +

1 つのセクションを更新する

+ +

Normally, an HTTP PUT request replaces the entirety of a document with the submitted content in a new revision. However, you can use the query parameter ?section to constrain revision to a single section of the document and leave the rest of the content as-is. This is handy for automating changes to one part of a document that is otherwise managed by hand, or even for aggregating changes from many sources or scripts into one document.

+ +

文書のセクションを作成する

+ +

Documents on MDN can be broken up into sections. These sections are useful for building a table of contents, linking to specific parts, and editing subsets of document content.

+ +

Using headers

+ +

Headers (ie. <h2> .. <h6>) make sections in MDN documents. The text of each header is transformed automatically into an ID, and that's used for anchor links in the table of contents sidebar on most documents. Those auto-generated IDs can be overriden with the name attribute on headers. Either way, looking at the table of contents is the easiest way to see how a document is broken up into sections, and to discover the IDs for those sections.

+ +

The contents of a section include its header and everything following the header up to (but not including) another header of the same or higher level. So, a section that starts with an <h2> continues until the next <h2>, including any subsections started by <h3> .. <h6>. That also means sections can be nested: An <h3> appearing after an <h2> creates a subsection, including any further nested subsections started by <h4> .. <h6>, up to the next <h3> or <h2>.

+ +

@@TODO: Show an HTML example with headers, here. This is a bit confusing.

+ +

Using container elements

+ +

Setting an id attribute on a container element (eg. a <div> or <span> or <section>) in the source editor also creates a section, at least with respect to the PUT API. This is a bit more advanced and requires manual changes to raw HTML, rather than using the WYSIWYG editor. But, if you want to update a chunk of the page without the need for headers, this is how to do it.

+ +

セクションを指定する

+ + diff --git a/files/ja/orphaned/mdn/tools/revision_dashboard/index.html b/files/ja/orphaned/mdn/tools/revision_dashboard/index.html new file mode 100644 index 0000000000..10c96bfa07 --- /dev/null +++ b/files/ja/orphaned/mdn/tools/revision_dashboard/index.html @@ -0,0 +1,117 @@ +--- +title: リビジョンダッシュボード +slug: MDN/Tools/Revision_dashboard +tags: + - Guide + - MDN Meta + - Site-wide + - Tools +translation_of: MDN/Tools/Revision_dashboard +--- +
{{MDNSidebar}}
+ +

リビジョンダッシュボード は MDN Web Docs Wiki の機能で MDN での最近の更新と追加を見たり、何が変更されたのか詳細を確認したり、それらの更新に対して様々な方法で行動することができます。 この記事では、リビジョンダッシュボードの使い方を説明します。

+ +

外観

+ +

リビジョンダッシュボードのインターフェイスは多くの要素を持ち、便利な機能が満載です。まずはインターフェイスの主要な部分の概観から始めましょう。

+ +

Annotated screenshot of main revision dashboard view

+ +

ここで注意すべき最も大事なことは履歴のリストで、ここでフィルターにマッチする履歴や、履歴の差分 (クリックした履歴で変更された内容が見られます) を一通り見ることができます。

+ +

リビジョン一覧

+ +

リビジョンダッシュボードウィンドウの中ほどにあるリビジョン一覧は、最近なされた変更を提供します。この一覧は、最近変更された記事が最初に来るように順序付けられていて、先に進むともっと古い履歴になります。

+ +

リビジョン一覧のすぐ下にあるのは、検索クエリーにマッチしたページがどれくらいあり、そのうちのどこを見ているのかを示すインジゲーターです。何もフィルターをかけていない場合、MDN wiki になされたすべての履歴のページ数が見えます。

+ +

一覧の各行は wiki への 1 つの変更に対応しています。"変更" とは次のいずれかからなっています:

+ + + +

各行は 4 つの列からなります: リビジョン、タイトル、コメント、著者です。

+ +

リビジョン列

+ +

リビジョン列はなされた変更の情報が与えられます。この列ではいくつかの情報が提供されます:

+ +
+
タイムスタンプ
+
リビジョンが保存された正確な日付と時間。これはリビジョン詳細ページへのリンクで、そこではリビジョンのメタデータとコンテンツが表示されます。
+
ロケール
+
記事のロケールが列のタグとして示されます。これは言語の省略コードで表示され、例えば英語では "en-US" です。
+
ファイル変更インジゲーター
+
これまで存在しない新しい記事には new のタグが表示されます。ページが削除されたことを示す場合は、deleted タグが出てきます。ページが 1 回の改訂だけで削除された場合、new と deleted タグの両方が表示されることもありえます。
+
+

タイトル列

+
+
+ +
+
記事のタイトル
+
記事のタイトルは、ページにセットされているため、列に表示されます。タイトルは、直接移動して素早く簡単に見られるような、wiki 記事へのリンクでもあります。
+
記事のパス
+
記事のタイトルの下に、記事のパスが表示されます。これは記事の URL の一部分で、http://developer.mozilla.org/<locale>/docs/ の後に来るものです。
+
+

コメント列

+
+
+ +
+
リビジョンコメント
+
変更の著者がリビジョンコメントを変更の保存時に追加していた場合、そこにあります。これは小さめのイタリックなテキストで表示されます。
+
移動の情報
+
リビジョンがページの移動を表す場合、wiki 上の移動元と行き先のパスが表示されます。
+
+

著者列

+
+
+ +

著者の列はそのリビジョンを保存した人のユーザー名が表示されます。それをクリックしてユーザーのプロフィールページをすぐに見ることができます。

+ +
+

管理者のみ: 管理者権限を持つ MDN ユーザーは著者列の見出しに Toggle IPs ボタンもあります。これをクリックするとそれぞれの著者の IP アドレスが表示され、不正なユーザーを IP アドレスによって禁止することができます。ユーザーが禁止されたら、ユーザー名の下に印が出ますが、これは管理者のみに見えます。

+
+ +

フィルター

+ +

MDN はいくつかの便利なフィルターオプションを提供しており、あなたのニーズに応じてリビジョンの「物」の量を削減できます。フィルターを調整して、絞り込み ボタンを押して適用します。しばらくすると、ディスプレイはフィルター結果を更新します。いくつかのフィルターを利用できます:

+ +
+
ロケール
+
You may filter so that you only see changes in a specific locale. 既定では, you see changes across all locales, but this may not be useful to you. Indeed, if you're a member of a localization team, 例えば、the only locales you're likely to care about are your own and English. You can specify the locale to filter by in the URL when going to the revision dashboard by adding "locale=<localename>" to the query string. 例えば、: https://developer.mozilla.org/ja/dashboards/revisions?locale=en-US filters to show only changes to English documents.
+
ユーザー
+
Interested in what a specific user has been up to? You can look at the revisions submitted by a single user by entering it in this field. You can specify a user in the URL when going to the revision dashboard by adding "user=<username>" to the query string. 例えば、you can see changes by the user Sheppy with https://developer.mozilla.org/ja/dashboards/revisions?user=Sheppy. This box will offer suggestions as you type, to help you find exactly the person you're looking for.
+
トピック
+
If you'd like to see changes only about a given topic area, you can specify a topic string. This will be matched against the URLs of articles that have been changed and show only those whose titles include this string. You can specify the parameter "topic=<topic>" in the URL's query string to filter on this, as well. 例えば、if you'd like to see only JavaScript-related changes: https://developer.mozilla.org/ja/dashboards/revisions?topic=JavaScript.
+
開始日と終了日
+
You can specify that you want to see only revisions in a certain range of dates, or with a certain starting or ending date. The dashboard UI provides date selection widgets for these fields. You can specify these parameters in the URL's query string, but you must use your system locale's version of the date string. 例えば、: https://developer.mozilla.org/ja/dashboards/revisions?start_date=09%2F01%2F2015 for revisions starting with September 2, 2015 in the en-US locale.
+
先行期間
+
Rather than typing or selecting start or end dates, you can specify that you want to see revisions from a selected period prior to the present time, such as the last hour, day, week, or 30 days.
+
+ +

フィルターを組み合わせて使うのにも注目すぺきで、ユーザーインターフェイスや URL のクエリーストリングの両方でそれは言えます。かなり複雑な検索も実効できます。例えば、ユーザー{{UserLink("evilpie")}} が書いた英語の JavaScript 記事を見つけるには、このようにします https://developer.mozilla.org/ja/dashboards/revisions?locale=en-US&user=evilpie&topic=JavaScript.

+ + + +

更新の差分

+ +

ページのあるリビジョンと前のリビジョンの違いを表示する「差分」を見ることができます。あるリビジョンの差分を見るには、リンクではない行のいずれかをクリックします (つまり、タイムスタンプ、記事のタイトル、著者のユーザー名以外)。この行はリビジョンの差分とリビジョンコントロールを説明します。

+ +

Annotated screenshot of revision dashboard view

+ +

リビジョンコントロールは次の記事操作を許可します:

+ + diff --git a/files/ja/orphaned/mdn/tools/template_editing/index.html b/files/ja/orphaned/mdn/tools/template_editing/index.html new file mode 100644 index 0000000000..d32794f82e --- /dev/null +++ b/files/ja/orphaned/mdn/tools/template_editing/index.html @@ -0,0 +1,38 @@ +--- +title: テンプレートの編集 +slug: MDN/Tools/Template_editing +tags: + - Page-level +translation_of: MDN/Tools/Template_editing +--- +
{{MDNSidebar}}

MDNでは、 KumaScript で書かれたテンプレートがコンテンツの自動生成、およびページのカスタマイズに使われています。 それぞれのテンプレートは、別々の Wiki ページに置かれていて、ページ名は以下のとおりです:
+ /en-US/docs/Template:テンプレートの名前

+ +

MDN の Wikiを編集している人なら誰でも、マクロを通じてテンプレートを呼び出すことができます。KumaScript は強力なので、テンプレートの作成と編集のための権限は、必要な経験を持ち合わせた信頼できるユーザーのみに与えられています。

+ +

この権限を持つ役割の人

+ + + +

この権限を得るための条件

+ +

このツールにアクセスする権限を得るための条件は以下のとおりです:

+ + + +

この権限を得るためのプロセスについては、上位権限のリクエスト を見てください。

+ +

テンプレート編集の権限を持っている人（peer）たち

+ + diff --git a/files/ja/orphaned/mdn/troubleshooting/index.html b/files/ja/orphaned/mdn/troubleshooting/index.html new file mode 100644 index 0000000000..48b431b4b6 --- /dev/null +++ b/files/ja/orphaned/mdn/troubleshooting/index.html @@ -0,0 +1,86 @@ +--- +title: トラブルシューティング +slug: MDN/Troubleshooting +tags: + - Documentation + - MDN + - Writing Documentation + - troubleshooting +translation_of: MDN/Troubleshooting +--- +
{{MDNSidebar}}
+ +

この記事では、 MDN を利用して起こる問題と、その対処法を記します。

+ +

私の古いアカウントでログインできない

+ +
+
現象
+
数年前に MDN アカウントを持っていたが、今は唯一のログイン方法が GitHub なのでログインできない。あるいは GitHub でプロファイルを作成済みだが、古いアカウントに接続できない。
+
原因
+
GitHub認証 以外のログイン方法 のサポートは2016年11月1日以来削除されました。MDNプロファイルとGitHubアカウントをそれ以前にリンクさせてない場合、古いアカウントではログインできません。
+
対処法
+
Bugzillaで "Account Help" bug を提出します。古いアカウントについての情報(パスワード以外!)を提供して、新アカウントがあればそれも書きます。MDN エンジニアが反応して手助けします。
+
+ +

ページを保存できない

+ +
+
現象
+
あなたが変更したものを保存しようとして、変更が保存できないというメッセージを受けている。
+
原因
+
変更が MDN のスパムトラップに捕捉されています。我々の知る限り、これはときどき間違えます。
+
対処法
+
エラーメッセージに指示されいてるように、リビジョンのコピーを保存して、MDN サイト管理者 にメール送信します。管理者の1人が実際に正当な変更であることを検証して、あなたの変更と同様なものをブロックしないようにスパムフィルターを訓練して、今後はこの問題に会わないように、あなたをホワイトリストに追加します。
+
+ +

公開した変更がページに出てこない

+ +
+
現象
+
記事にいくらかの変更をして 公開 をクリックする。たった今行った変更が通常のページの見た目に反映されない。
+
原因
+
ページコンテンツがサーバーにキャッシュされていて、ページが変更されて以来リフレッシュされていません。
+
対処法
+
ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新されたコンテンツが見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。
+
+ +

マクロで生成したコンテンツが古い

+ +
+
現象
+
マクロで生成されるコンテンツを含むページを見ている。このマクロが更新されて製品に置かれているのが分かっているが、ページは古い値を表示している。
+
原因
+
マクロの出力がキャッシュされていて、マクロが更新されて以来リフレッシュされていません。このとき、マクロコードへの変更は、そのマクロを使うページに対して自動更新が強制されません。
+
対処法
+
ブラウザーで強制リフレッシュします (例えば Shift+再読み込み)。更新された出力が見えるか、ページ更新が処理されているメッセージが見えるでしょう。2番目の場合、数分間待ってからページが更新されたかを見るために通常のリフレッシュをします。
+
+ +

ページのスクリプトエラー

+ +
+
現象
+
ページ上にこんな恐ろしい赤いボックスが見える:
+ There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below. More information about this error
+
原因
+
ページ内のマクロでの KumaScript エラーが原因です。マクロが GitHub に保存されて、製品に移される前にレビューやテストを通るようになった今は、この問題は製品ではさほど起こりません。自分自身でマクロを編集したり、マクロを破たんさせる引数と共にマクロを呼び出したりしたら見られる時もあります。ローカルでMDNプラットホームをビルドした場合でも見られるかもしれません。
+
対処法
+
マクロ呼び出しを変更した場合、マクロの引数名を KumaScript GitHub repo と見比べます。疑問のマクロを修正途中の場合、KumaScript エラーのトラブルシューティング が役立つかもしれません。
+
+ +

ページプレビュー時のスクリプトエラー

+ +
+
現象
+
ページを編集していて、プレビューボタンをクリックする。ページのプレビュー内に(前の節に載っている)スクリプトエラーがある。
+
原因
+
編集しているページ内に既存のスクリプトエラーがあるか、あるいはあなたがマクロの引数を変えたりすることでエラーを導入した。
+
対処法
+
+

あなたがページ内のマクロやテンプレートを修正していないのが本当に確実なとき、このエラーを無視できます。編集したページが最終的に保存されて再度通常表示されたときにエラーが消えるのが期待できます (通常表示でエラーがない限り)。

+ +

あなたがエラーを導入したかどうかわからない場合、新しいウィンドウで同じページのコピーを開きます (そのページの最後に保存された版が出てきます)。編集モードに入り、すぐにプレビュー をクリックします。ここでエラーが起こった場合は、自信をもってあなたは原因ではないですし、その前に記述されたものでは消えている可能性が高いでしょう。

+ +

あなたの変更について、古いウィンドウからの古いエラーと同じく新しいエラーが出ている場合、新しいウィンドウを閉じて古いウィンドウで作業を続けます。しかしながら、これらが別のエラーの場合、古いウィンドウで本当に何か壊したのかもそれませんので、注意して新しいウィンドウに変更をコピーして、そのたびにプレビュー をクリックします。古いエラーがすぐにここにも出る場合、あなたが最後に行った変更がエラーを起こした可能性が高く、その成果をよく調べるべきでしょう。最終的に、副作用として、プレビューを何度もクリックして常にプレビューウィンドウを残している場合、エディターが失敗したり成果が失われる(破棄するときに起こりかねない)場合にも、素早くて未保存のままの大半の変更のコピーが残るでしょう。

+
+
diff --git a/files/ja/orphaned/microsummary_xml_grammar_reference/index.html b/files/ja/orphaned/microsummary_xml_grammar_reference/index.html new file mode 100644 index 0000000000..42dba6b59c --- /dev/null +++ b/files/ja/orphaned/microsummary_xml_grammar_reference/index.html @@ -0,0 +1,174 @@ +--- +title: Microsummary XML grammar reference +slug: Microsummary_XML_grammar_reference +tags: + - Microsummaries +--- +

 

+

はじめに

+

マイクロサマリジェネレータとは、ウェブページから特定の情報を抜き出し、そのページの内容に基づいてそのタイトルが変わるブックマークとして概要を表示するための方法を記述した XML 文書のことです。

+

この記事では各要素とその属性について説明しつつ、マイクロサマリジェネレータの組み立てに使用する XML の文法に関する詳細情報を提供します。マイクロサマリの作成方法についての入門記事は マイクロサマリの作成 です。

+

例

+

マイクロサマリの作成 のチュートリアルで作成したマイクロサマリジェネレータは次のものです。

+
<?xml version="1.0" encoding="UTF-8"?>
+<generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="Firefox Download Count">
+  <template>
+    <transform xmlns="http://www.w3.org/1999/XSL/Transform" version="1.0">
+      <output method="text"/>
+      <template match="/">
+        <value-of select="id('download-count')"/>
+        <text> Fx downloads</text>
+      </template>
+    </transform>
+  </template>
+  <pages>
+    <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include>
+  </pages>
+</generator>
+
+

名前空間

+

マイクロサマリジェネレータの XML 文書で使用する名前空間 URI は次のものです。

+
http://www.mozilla.org/microsummaries/0.1
+
+

マイクロサマリジェネレータ文書におけるすべての要素はこの名前空間内になければなりません。ただし <template> 要素の子孫は例外であり、次の XSLT 名前空間内になければなりません。

+
http://www.w3.org/1999/XSL/Transform
+
+

<generator> 要素

+

<generator> 要素は全マイクロサマリジェネレータのルートタグであり、ジェネレータを記述する XML コードの残りを格納していなければなりません。

+

属性：

+
+
+ name（必須）
+
+ ジェネレータによって作成されるマイクロサマリに付ける、説明的かつ人間が読める名前。
+
+ uri（オプション）
+
+ ジェネレータを一意的に識別する妥当な URI。Firefox のコードおよび拡張機能によって動的に作成されるジェネレータにのみ該当。nsSidebar::addMicrosummaryGenerator を通じてウェブからインストールされるジェネレータはそれがダウンロードされたリモート URL で識別される。また、そのような動作のために Firefox はこの属性の値を無視する。
+
+

子要素：

+
+
+ <template>（必須）
+
+ ページをマイクロサマリに変換する方法を定義する。
+
+ <pages>（必須）
+
+ ジェネレータがサマリを作成できるページの集合を指定する。
+
+ <update>（オプション）
+
+ Firefox がマイクロサマリを更新する頻度を指定する。
+
+

<template> 要素

+

<template> 要素にはウェブページをマイクロサマリに変換する XSLT スタイルシートを格納します。

+

属性：

+

+ + なし。 +

+

子要素：

+
+
+ <stylesheet> または <transform>（必須）
+
+ 変換を行う XSLT スタイルシート。
+
+

各 XSLT について、<stylesheet> あるいは <transform> タグのどちらかを用いたスタイルシート子要素を指定します。これらはどちらも同じ機能を果たします。

+
+

注意：<template> 要素は必ずマイクロサマリ名前空間 (http://www.mozilla.org/microsummaries/0.1) 内になければなりませんが、その <stylesheet>/<transform> 子要素は必ず XSLT 名前空間 (http://www.w3.org/1999/XSL/Transform) 内になければなりません。

+
+

<pages> 要素

+

<pages> 要素はジェネレータがサマリを作成できるページの集合を指定します。

+

属性：

+

+ + なし。 +

+

子要素：

+
+
+ <include>（オプション）
+
+ ジェネレータがサマリを作成できるページの URL にマッチする正規表現。
+
+ <exclude>（オプション）
+
+ ジェネレータがサマリを作成できないページの URL にマッチする正規表現。
+
+

<pages> 要素にはゼロ個以上の <include> および <exclude> 子要素を含めることができます。そのそれぞれは JavaScript と互換性のある妥当な正規表現を含んでいなければなりません。また、他のどんな要素も含んではなりません。属性は全くありません。

+

ページからサマリを作成できるかどうかを決定するためにジェネレータがチェックされる際、子要素で指定された正規表現がそのページの URL に対して評価されます。少なくとも 1 つの <include> の正規表現がページの URL にマッチし、かつ <exclude> の正規表現がページの URL にマッチしなかった場合、ジェネレータはそのページのサマリを作成可能であると判断されます。

+

<pages> 要素内に子要素が現れる順番には特に重要ではありません。子要素のタグとその中の正規表現の間のホワイトスペースも特に重要ではありません。つまり、それは正規表現の一部とは見なされず、その正規表現の評価には影響を及ぼしません。

+

次の例では www.example.com のウェブサイトにおいて about.html という名前のページ以外の全ページのサマリを作成できるジェネレータができます。

+
<pages>
+  <include>
+    ^http://www\.example\.com/
+  </include>
+  <exclude>/about\.html</exclude>
+</pages>
+
+
+ 注意：マッチさせたい URL をただ含んでいるだけの URL にマッチしてしまわないようにするためにも、ページの URL の先頭にマッチさせたい正規表現はキャレット (^) から始めなければなりません。例えば、http://www\.example\.com/ という正規表現は http://www.example.com/ という URL にも http://www.evil.com/http://www.example.com/ という URL にもマッチします。しかし、^http://www\.example\.com/ という正規表現は前者の URL にしかマッチしません。
+

ジェネレータにとって妥当な正規表現の構文の詳細については Core_JavaScript_1.5_Reference:Global_Objects:RegExp のリファレンスを参照してください。また、マイクロサマリジェネレータ用正規表現の作成 では URL にマッチする正規表現の書き方を一歩一歩解説しています。

+

<include> 要素

+

<include> 要素はジェネレータがサマリを作成できるページの集合を指定します。これは <pages> 要素の子でなければなりません。また、JavaScript 互換の正規表現を含んでいなければなりません。

+

この要素の使用についての詳細は <pages> 要素 を参照してください。

+

<exclude> 要素

+

<exclude> 要素はジェネレータがサマリを作成できないページの集合を指定します。これは <pages> 要素の子でなければなりません。また、JavaScript 互換の正規表現を含んでいなければなりません。

+

この要素の使用についての詳細は <pages> 要素 を参照してください。

+

<update> 要素

+

オプションである <update> 要素はジェネレータによって作成されるマイクロサマリを Firefox が更新する頻度を指定します。この要素には絶対的な更新間隔を指定することも、サマリを作成するページの内容に基づいた一連の条件付きの間隔を指定することもできます。

+

属性：

+
+
+ interval（オプション）
+
+ 更新間で経過しなければならない絶対的な時間間隔。単位は分。
+
+

子要素：

+
+
+ <condition>（オプション）
+
+ XPath の論理式、およびその式が true に評価された場合に更新間で経過しなければならない分単位の条件付き時間間隔。
+
+

interval 属性は絶対的な間隔を分単位で定義します。その値は 1 以上の数でなければなりません。あまり実用的ではないでしょうが、小数値（例：5.5 分）も使えます。

+

<update> 要素には <condition> 子要素をいくつでも含めることができます。

+

以下のルールに従って、ジェネレータが作成するマイクロサマリにどの間隔を適用すべきかを Firefox は決定します。

+
    +
  1. Firefox は文書での順番どおりに各 <condition> 子要素を処理する。各要素について、サマリを作成するページに対してその要素の XPath の論理式を Firefox は評価する。その式が true に評価されれば Firefox はその要素の間隔を適用し、子要素の処理を停止する。このようにして、最初にマッチした <condition> によって更新間隔が決まる。
    2. +
  2. <condition> 子要素がない場合、あるいは true に評価される式がない場合、Firefox は <update> 要素の interval 属性の値を適用する。
    3. +
  3. <update> 要素に interval 属性が含まれていない場合、Firefox は browser.microsummary.updateInterval という設定項目で指定された間隔を適用する。
    4. +
  4. その設定項目が未設定の場合、Firefox はそのデフォルトの更新間隔である 30 分を適用する。
    5. +
+

注意：

+ +

<condition> 要素

+

オプションである <condition> 要素は XPath の論理式、およびサマリを作成するページに対してその式が true に評価された場合に更新間で経過しなければならない分単位の条件付き時間間隔を指定します。<update> 要素の子でなければなりません。

+

属性：

+
+
+ expression（必須）
+
+ サマリを作成するページに対して評価する XPath の論理式。
+
+ interval（必須）
+
+ 式が true に評価された場合に更新間で経過しなければならない時間間隔。単位は分。
+
+

子要素：

+

+ + なし。 +

+

この要素の使用についての詳細は <update> 要素 を参照してください。

+

関連項目

+ diff --git a/files/ja/orphaned/migrate_apps_from_internet_explorer_to_mozilla/index.html b/files/ja/orphaned/migrate_apps_from_internet_explorer_to_mozilla/index.html new file mode 100644 index 0000000000..5ed7c8dd6c --- /dev/null +++ b/files/ja/orphaned/migrate_apps_from_internet_explorer_to_mozilla/index.html @@ -0,0 +1,1235 @@ +--- +title: Migrate apps from Internet Explorer to Mozilla +slug: Migrate_apps_from_Internet_Explorer_to_Mozilla +tags: + - 要更新 +--- +

イントロダクション

+ +

Netscape が Mozilla ブラウザを始めたときには、W3C 標準をサポートすると明確に決めていました。その結果、Mozilla は Netscape Navigator 4.x 系や Microsoft Internet Explorer のレガシコードと完全に後方互換ではなくなっています。たとえば、Mozilla は、後述する <layer> タグをサポートしません。W3C 標準というコンセプトがもたらされる前に開発された Internet Explorer 4 のようなブラウザは、さまざまな特異な仕様を引き継いでいます。この記事では、Internet Explorer やその他のレガシブラウザとの強力な HTML 後方互換を実現するための Mozilla の quirks モードについて解説します。
+
+ さらに、ここでは、当時 W3C と同等のものがなかったために Mozilla がサポートしている XMLHttpRequest やリッチテキスト編集などのなどの非標準技術についても触れます。そこには次のものが含まれます:

+ + + +

一般的なクロスブラウザコーディングの tips

+ +

Web 標準は存在しているものの、ブラウザごとに挙動は違いますす(実際には、同じブラウザもプラットフォームによって挙動が変わります)。Internet Explorer を含む多くのブラウザは、W3C 以前の API をサポートし、W3C を遵守した拡張を行わずにいます。

+ +

Mozilla と Internet Explorer の違いに触れる前に、新たなブラウザをサポートするために Web アプリを拡張しやすくする方法の基本を説明しましょう。

+ +

同じ機能でもブラウザごとに異なる API を使うことがあるので、ブラウザごとに処理を変えるために if() else() ブロックをあちこちに含んだコードをしばしば見かけます。次のコードは、Internet Explorer を指定したブロックを含んでいます:

+ +
. . .
+
+var elm;
+
+if (ns4)
+  elm = document.layers["myID"];
+else if (ie4)
+  elm = document.all["myID"]
+ +

このコードは、拡張性に欠けています。新たなブラウザをサポートしたくなったときに、Web アプリケーション全体のこういったブロックを修正する必要が出てくるからです。

+ +

新たなブラウザをサポートするときの修正を不要にするための最も簡単な方法として、処理部分を関数として抽出するというのがあります。何箇所も if() else() ブロックを書くよりも、こういった共通の処理を探して独自の関数として抽出してしまうほうがずっと効率的です。これはコードの可読性を高めるだけでなく、新たなクライアントを簡単に追加できるようにします。

+ +
var elm = getElmById("myID");
+
+function getElmById(aID){
+  var element = null;
+
+  if (isMozilla || isIE5)
+    element = document.getElementById(aID);
+  else if (isNetscape4)
+    element = document.layers[aID];
+  else if (isIE4)
+    element = document.all[aID];
+
+  return element;
+}
+
+ +

それでもまだ上記のコードはブラウザ判定を行っています。ブラウザ判定はしばしば次のようにユーザエージェント情報を使って行われます:

+ +
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.5) Gecko/20031016
+
+ +

ブラウザ判定のためにユーザエージェント情報を使うと、使用中のブラウザについての詳細な情報を扱うことになり、ユーザエージェント情報を使ったコードは、新たなブラウザのバージョンが加わったときにミスが発生しやすくなり、コードの修正が必要になってきます。

+ +

ブラウザの能力やオブジェクトの機能のサポート状況を使ってブラウザを判定した方がずっと良く、信頼性も上がります。 これは、必要な機能が実装されているかどうかを JavaScript で確認すればできます。たとえば、こんな風に書くよりも

+ +
if (isMozilla || isIE5)
+
+ +

こうした方がいいでしょう

+ +
if (document.getElementById)
+
+ +

こうすることで、W3C 標準のメソッドをサポートした Opera や Safari でも、変更することなく動くようになります。

+ +

ユーザエージェント判定が有効なのは、たとえば特定のブラウザの特定のバージョンでのバグに対処する場合など、ごく限られたケースだけです。それ以外の目的ならば、想定しているブラウザがその機能をサポートするかどうかではなく、必要な機能が実際に使えるかをチェックすればよいのです。

+ +

JavaScript では、コードの可読性を良くする三項演算子が使えます:

+ +
var foo = (condition) ? conditionIsTrue : conditionIsFalse;
+
+ +

例えば、要素を取得するのに、次のような書き方をします:

+ +
function getElement(aID){
+  return (document.getElementById) ? document.getElementById(aID)
+                                   : document.all[aID]);
+}
+
+ +

 

+ +

Mozilla と Internet Explorer の違い

+ +

まず最初に、Mozilla と Internet Explorer の HTML のふるまいの違いを比較してみます。

+ +

ツールチップ

+ +

レガシブラウザは、リンクの上に alt 属性値を表示するツールチップを HTML に導入しました。最新の W3C HTML の仕様では、リンクの詳しい記述を含めることを目的とした title 属性が作られています。新しめのブラウザはツールチップの表示に title 属性値を使います。Mozilla も、alt ではなく、この title 属性を表示するようなツールチップのサポートをしています。

+ +

エンティティ

+ +

HTML マークアップには、W3C web standards body の定めているいくつかのエンティティを使うことができます。これらのエンティティは、数字または文字による参照によって利用することができます。たとえば、ノーブレークスペース文字は &#160; もしくは同等の文字列参照 &nbsp; で参照します。

+ +

Internet Explorer のような古いブラウザは、末尾の ; (セミコロン) のかわりに通常文字が来るような実体参照を許してしまうという特異な挙動をします:

+ +
&nbsp Foo
+&nbsp&nbsp Foo
+
+ +

Internet Explorer は、W3C 仕様に反して、上のほうの &nbsp をホワイトスペースとして表示します。ブラウザは、直後に通常文字が続くような &nbsp という記述をパースしないはずです。たとえば次のような表記です:

+ +
&nbsp12345
+
+ +

このコードは Mozilla では動きません。これは W3C web 標準に反するからです。ブラウザ間の挙動が変わらないよう、常に正しい形式 (&nbsp;) を使ってください。

+ +

DOM の相違

+ +

ドキュメントオブジェクトモデル (DOM) は、ドキュメントの要素を含んだ木構造です。W3C の標準化した JavaScript API を用いてこれを操作することができます。しかし、W3C による標準化よりも前に、Netscape 4 と Internet Explorer 1は同様に API 1を実装しました。Mozilla は、W3C ウェブスタンダードでは達成できない場合についてのみ、レガシ API を実装しています。

+ +

要素へのアクセス

+ +

クロスブラウザなアプローチによって要素にアクセスするには、Internet Explorer 5.0 以上、Mozilla ベースのブラウザ、およびその他 W3C 互換のブラウザで利用可能で、DOM Level 1 の機能に含まれる document.getElementById(aID)を使用します。
+
+ Mozilla は、Internet Explorer で利用可能な document.elementName や要素の name による要素へのアクセス (グローバル名前空間の汚染ともいわれています) をサポートしていません。また、Mozilla は、Netscape 4 の document.layers メソッドや Internet Explorer の document.all をサポートしません。 Netscape 4 document.layers method and Internet Explorer's document.all. While document.getElementById lets you retrieve one element, you can also use document.layers and document.all to obtain a list of all document elements with a certain tag name, such as all <div> elements.
+
+ W3C DOM Level 1 のメソッドは、getElementsByTagName() によって、同じ name の要素をすべて取得します。このメソッドは、JavaScript で配列を返し、document 要素やその他のノードに対して実行することで、その要素以下に連なる木構造のみに含まれる要素を検索することができます。DOM 木構造に含まれるすべての要素の配列を取得するには、getElementsByTagName("*") を使用します。

+ +

The DOM Level 1 methods, as shown in Table 1, are commonly used to move an element to a certain position and toggle its visibility (menus, animations). Netscape 4 used the <layer> tag, which Mozilla does not support, as an HTML element that can be positioned anywhere. In Mozilla, you can position any element using the <div> tag, which Internet Explorer uses as well and which you'll find in the HTML specification.

+ + + + + + + + + + + + + + + + + +
Table 1. Methods used to access elements
MethodDescription
document.getElementById( aId )Returns a reference to the element with the specified ID.
document.getElementsByTagName( aTagName )Returns an array of elements with the specified name in the document.
+ +

Traverse the DOM

+ +

Mozilla supports the W3C DOM APIs for traversing the DOM tree through JavaScript (see Table 2). The APIs exist for each node in the document and allow walking the tree in any direction. Internet Explorer supports these APIs as well, but it also supports its legacy APIs for walking a DOM tree, such as the children property.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 2. Methods used to traverse the DOM
Property/MethodDescription
childNodesReturns an array of all child nodes of the element.
firstChildReturns the first child node of the element.
getAttribute( aAttributeName )Returns the value for the specified attribute.
hasAttribute( aAttributeName )Returns a boolean stating if the current node has an attribute defined with the specified name.
hasChildNodes()Returns a boolean stating whether the current node has any child nodes.
lastChildReturns the last child node of the element.
nextSiblingReturns the node immediately following the current one.
nodeNameReturns the name of the current node as a string.
nodeTypeReturns the type of the current node. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDescription
1Element Node
2Attribute Node
3Text Node
4CDATA Section Node
5Entity Reference Node
6Entity Node
7Processing Instruction Node
8Comment Node
9Document Node
10Document Type Node
11Document Fragment Node
12Notation Node
+
nodeValueReturns the value of the current node. For nodes that contain text, such as text and comment nodes, it will return their string value. For attribute nodes, the attribute value is returned. For all other nodes, null is returned.
ownerDocumentReturns the document object containing the current node.
parentNodeReturns the parent node of the current node.
previousSiblingReturns the node immediately preceding the current one.
removeAttribute( aName )Removes the specified attribute from the current node.
setAttribute( aName, aValue )Sets the value of the specified attribute with the specified value.
+ +

Internet Explorer has a nonstandard quirk, where many of these APIs will skip white space text nodes that are generated, for example, by new line characters. Mozilla will not skip these, so sometimes you need to distinguish these nodes. Every node has a nodeType property specifying the node type. For example, an element node has type 1, while a text node has type 3 and a comment node is type 8. The best way to only process element nodes is to iterate over all child nodes and only process those with a nodeType of 1:

+ +
HTML:
+  <div id="foo">
+    <span>Test</span>
+  </div>
+
+JavaScript:
+  var myDiv = document.getElementById("foo");
+  var myChildren = myDiv.childNodes;
+  for (var i = 0; i < myChildren.length; i++) {
+    if (myChildren[i].nodeType == 1){
+      // element node
+    };
+  };
+
+ +

Generate and manipulate content

+ +

Mozilla supports the legacy methods for adding content into the DOM dynamically, such as document.write, document.open and document.close. Mozilla also supports Internet Explorer's innerHTML method, which it can call on almost any node. It does not, however, support outerHTML (which adds markup around an element, and has no standard equivalent) and innerText (which sets the text value of the node, and which you can achieve in Mozilla by using textContent).

+ +

Internet Explorer has several content manipulation methods that are nonstandard and unsupported in Mozilla, including retrieving the value, inserting text and inserting elements adjacent to a node, such as getAdjacentElement and insertAdjacentHTML. Table 3 shows how the W3C standard and Mozilla manipulate content, all of which are methods of any DOM node.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 3. Methods Mozilla uses to manipulate content
MethodDescription
appendChild( aNode )Creates a new child node. Returns a reference to the new child node.
cloneNode( aDeep )Makes a copy of the node it is called on and returns the copy. If aDeep is true, it copies over the node's entire subtree.
createElement( aTagName )Creates and returns a new and parentless DOM node of the type specified by aTagName.
createTextNode( aTextValue )Creates and returns a new and parentless DOM textnode with the data value specified by aTextValue.
insertBefore( aNewNode, aChildNode )Inserts aNewNode before aChildNode, which must be a child of the current node.
removeChild( aChildNode )Removes aChildNode and returns a reference to it.
replaceChild( aNewNode, aChildNode )Replaces aChildNode with aNewNode and returns a reference to the removed node.
+ +

Document fragments

+ +

For performance reasons, you can create documents in memory, rather than working on the existing document's DOM. DOM Level 1 Core introduced document fragments, which are lightweight documents that contain a subset of a normal document's interfaces. For example, getElementById does not exist, but appendChild does. You can also easily add document fragments to existing documents.

+ +

Mozilla creates document fragments through document.createDocumentFragment(), which returns an empty document fragment.

+ +

Internet Explorer's implementation of document fragments, however, does not comply with the W3C web standards and simply returns a regular document.

+ +

JavaScript の相違

+ +

Most differences between Mozilla and Internet Explorer are usually blamed on JavaScript. However, the issues usually lie in the APIs that a browser exposes to JavaScript, such as the DOM hooks. The two browsers possess few core JavaScript differences; issues encountered are often timing related.

+ +

JavaScript の date の相違

+ +

Date にかかわる唯一の相違点は、getYear メソッドです。As per the ECMAScript specification (which is the specification JavaScript follows), running new Date().getYear() in 2004 will return "104". Per the ECMAScript specification, getYear returns the year minus 1900, originally meant to return "98" for 1998. getYear was deprecated in ECMAScript Version 3 and replaced with getFullYear(). Internet Explorer uses an obsolete behavior for getYear(), similar to Netscape 4 and earlier, returning the year minus 1900 for years 1900-1999, and the full year for any other year. (i.e. for 1999, getYear() returns 99, for 2000, it returns 2000).

+ +

JavaScript execution differences

+ +

Different browsers execute JavaScript differently. For example, the following code assumes that the div node already exists in the DOM by the time the script block executes:

+ +
...
+<div id="foo">Loading...</div>
+
+<script>
+  document.getElementById("foo").innerHTML = "Done.";
+</script>
+
+ +

However, this is not guaranteed. To be sure that all elements exist, you should use the onload event handler on the <body> tag:

+ +
<body onload="doFinish();">
+
+<div id="foo">Loading...</div>
+
+<script>
+  function doFinish() {
+    var element = document.getElementById("foo");
+    element.innerHTML = "Done.";
+  }
+</script>
+...
+
+ +

Such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. One concrete example is window.open, which opens a new window:

+ +
<script>
+  function doOpenWindow(){
+    var myWindow = window.open("about:blank");
+    myWindow.location.href = "http://www.ibm.com";
+  }
+</script>
+
+ +

The problem with the code is that window.open is asynchronous -- it does not block the JavaScript execution until the window has finished loading. Therefore, you may execute the line after the window.open line before the new window has finished. You can deal with this by having an onload handler in the new window and then call back into the opener window (using window.opener).

+ +

Differences in JavaScript-generating HTML

+ +

JavaScript can, through document.write, generate HTML on the fly from a string. The main issue here is when JavaScript, embedded inside an HTML document (thus, inside an <script> tag), generates HTML that contains a <script> tag. If the document is in strict rendering mode, it will parse the </script> inside the string as the closing tag for the enclosing <script>. The following code illustrates this best:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text/javascript'>alert('Hello');</script>")
+</script>
+
+ +

Since the page is in strict mode, Mozilla's parser will see the first <script> and parse until it finds a closing tag for it, which would be the first </script>. This is because the parser has no knowledge about JavaScript (or any other language) when in strict mode. In quirks mode, the parser is aware of JavaScript when parsing (which slows it down). Internet Explorer is always in quirks mode, as it does not support true XHTML. To make this work in strict mode in Mozilla, separate the string into two parts:

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+...
+<script>
+  document.write("<script type='text\/javascript'>alert('Hello');</" + "script>")
+</script>
+
+ +

Debug JavaScript

+ +

Mozilla provides several ways to debug JavaScript-related issues found in applications created for Internet Explorer. The first tool is the built-in JavaScript console, shown in Figure 1, where errors and warnings are logged. You can access it in Mozilla by going to Tools -> Web Development -> JavaScript Console or in Firefox (the standalone browser product from Mozilla) at Tools -> JavaScript Console.

+ +

Figure 1. JavaScript console

+ +

Javascript Console

+ +

The JavaScript console can show the full log list or just errors, warnings, and messages. The error message in Figure 1 says that at aol.com, line 95 tries to access an undefined variable called is_ns70. Clicking on the link will open Mozilla's internal view source window with the offending line highlighted.

+ +

The console also allows you to evaluate JavaScript. To evaluate the entered JavaScript syntax, type in 1+1 into the input field and press Evaluate, as Figure 2 shows.

+ +

Figure 2. JavaScript console evaluating

+ +

JavaScript Console evaluating

+ +

Mozilla's JavaScript engine has built-in support for debugging, and thus can provide powerful tools for JavaScript developers. Venkman, shown in Figure 3, is a powerful, cross-platform JavaScript debugger that integrates with Mozilla. It is usually bundled with Mozilla releases; you can find it at Tools -> Web Development -> JavaScript Debugger. For Firefox, the debugger isn't bundled; instead, you can download and install it from the Venkman Project Page. You can also find tutorials at the development page, located at the Venkman Development Page.

+ +

Figure 3. Mozilla's JavaScript debugger

+ +

Mozilla's JavaScript debugger

+ +

The JavaScript debugger can debug JavaScript running in the Mozilla browser window. It supports such standard debugging features as breakpoint management, call stack inspection, and variable/object inspection. All features are accessible through the user interface or through the debugger's interactive console. With the console, you can execute arbitrary JavaScript in the same scope as the JavaScript currently being debugged.

+ +

CSS の相違

+ +

Internet Explorer やその他のブラウザと比べ、Mozilla ベースの製品は、CSS1 のほとんど、CSS2.1、および CSS3 の一部を含んだカスケーディングスタイルシート (CSS)  のサポートでは最も強力です。

+ +

下記で言及するような問題が発生した場合、Mozilla  は JavaScript コンソールにエラーまたは警告を表示します。CSS 関連の問題に遭遇したとは、JavaScript コンソールを開いて確認するとよいでしょう。

+ +

Mimetypes (when CSS files are not applied)

+ +

The most common CSS-related issue is that CSS definitions inside referenced CSS files are not applied. This is usually due to the server sending the wrong mimetype for the CSS file. The CSS specification states that CSS files should be served with the text/css mimetype. Mozilla will respect this and only load CSS files with that mimetype if the Web page is in strict standards mode. Internet Explorer will always load the CSS file, no matter with which mimetype it is served. Web pages are considered in strict standards mode when they start with a strict doctype. To solve this problem, you can make the server send the right mimetype or remove the doctype. I'll discuss more about doctypes in the next section.

+ +

CSS and units

+ +

Many Web applications do not use units with their CSS, especially when you use JavaScript to set the CSS. Mozilla tolerates this, as long as the page is not rendered in strict mode. Since Internet Explorer does not support true XHTML, it does not care if no units are specified. If the page is in strict standards mode, and no units are used, then Mozilla ignores the style:

+ +
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+  "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+   <title>CSS and units example</title>
+  </head>
+  <body>
+    // works in strict mode
+    <div style="width: 40px; border: 1px solid black;">
+      Text
+    </div>
+
+    // will fail in strict mode
+    <div style="width: 40; border: 1px solid black;">
+      Text
+    </div>
+  </body>
+</html>
+
+ +

Since the above example has a strict doctype, the page is rendered in strict standards mode. The first div will have a width of 40px, since it uses units, but the second div won't get a width, and thus will default to 100% width. The same would apply if the width were set through JavaScript.

+ +

JavaScript and CSS

+ +

Since Mozilla supports the CSS standards, it also supports the CSS DOM standard for setting CSS through JavaScript. You can access, remove, and change an element's CSS rules through the element's style member:

+ +
<div id="myDiv" style="border: _fckstyle="border: 1px solid black;">
+  Text
+</div>
+
+<script>
+  var myElm = document.getElementById("myDiv");
+  myElm.style.width = "40px";
+</script>
+
+ +

You can reach every CSS attribute that way. Again, if the Web page is in strict mode, you must set a unit or else Mozilla will ignore the command. When you query a value, say through .style.width, in Mozilla and Internet Explorer, the returned value will contain the unit, meaning a string is returned. You can convert the string into a number through parseFloat("40px").

+ +

CSS overflow differences

+ +

CSS added the notion of overflow, which allows you to define how to handle overflow; for example, when the contents of a div with a specified height are taller than that height. The CSS standard defines that if no overflow behavior is set in this case, the div contents will overflow. However, Internet Explorer does not comply with this and will expand the div beyond its set height in order to hold the contents. Below is an example that shows this difference:

+ +
<div style="height: _fckstyle="height: 100px; border: 1px solid black;">
+  <div style="height: 150px; border: 1px solid red; margin: 10px;">
+    a
+  </div>
+</div>
+
+ +

As you can see in Figure 4, Mozilla acts like the W3C standard specifies. The W3C standard says that, in this case, the inner div overflows to the bottom since the inner content is taller than its parent. If you prefer the Internet Explorer behavior, simply do not specify a height on the outer element.

+ +

Figure 4. DIV overflow

+ +

DIV Overflow

+ +

hover differences

+ +

The nonstandard CSS hover behavior in Internet Explorer occurs on quite a few web sites. It usually manifests itself by changing text style when hovered over in Mozilla, but not in Internet Explorer. This is because the a:hover CSS selector in Internet Explorer matches <a href="">...</a> but not <a name="">...</a>, which sets anchors in HTML. The text changes occur because authors encapsulate the areas with the anchor-setting markup:

+ +
CSS:
+  a:hover {color: green;}
+
+HTML:
+  <a href="foo.com">This text should turn green when you hover over it.</a>
+
+  <a name="anchor-name">
+    This text should change color when hovered over, but doesn't
+    in Internet Explorer.
+  </a>
+
+ +

Mozilla follows the CSS specification correctly and will change the color to green in this example. You can use two ways to make Mozilla behave like Internet Explorer and not change the color of the text when hovered over:

+ + + +

Quirks versus standards mode

+ +

Older legacy browsers, such as Internet Explorer 4, rendered with so-called quirks under certain conditions. While Mozilla aims to be a standards-compliant browser, it has three modes that support older Web pages created with these quirky behaviors. The page's content and delivery determine which mode Mozilla will use. Mozilla will indicate the rendering mode in View -> Page Info (or Ctrl+I) ; Firefox will list the rendering mode in Tools -> Page Info. The mode in which a page is located depends on its doctype.

+ +

Doctypes (short for document type declarations) look like this:

+ +

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+ +

The section in blue is called the public identifier, the green part is the system identifier, which is a URI.

+ +

Standards mode

+ +

Standards mode is the strictest rendering mode -- it will render pages per the W3C HTML and CSS specifications and will not support any quirks. Mozilla uses it for the following conditions:

+ + + +

Almost standards mode

+ +

Mozilla introduced almost standards mode for one reason: a section in the CSS 2 specification breaks designs based on a precise layout of small images in table cells. Instead of forming one image to the user, each small image ends up with a gap next to it. The old IBM homepage shown in Figure 5 offers an example.

+ +

Figure 5. Image gap

+ +

Image Gap

+ +

Almost standards mode behaves almost exactly as standards mode, except when it comes to an image gap issue. The issue occurs often on standards-compliant pages and causes them to display incorrectly.

+ +

Mozilla uses almost standards mode for the following conditions:

+ + + +

You can read more about the image gap issue.

+ +

Quirks mode

+ +

Currently, the Web is full of invalid HTML markup, as well as markup that only functions due to bugs in browsers. The old Netscape browsers, when they were the market leaders, had bugs. When Internet Explorer arrived, it mimicked those bugs in order to work with the content at that time. As newer browsers came to market, most of these original bugs, usually called quirks, were kept for backwards compatibility. Mozilla supports many of these in its quirks rendering mode. Note that due to these quirks, pages will render slower than if they were fully standards-compliant. Most Web pages are rendered under this mode.

+ +

Mozilla uses quirks mode for the following conditions:

+ + + +

For further reading, check out: Mozilla Quirks Mode Behavior and Mozilla's DOCTYPE sniffing.

+ +

Event differences

+ +

Mozilla and Internet Explorer are almost completely different in the area of events. The Mozilla event model follows the W3C and Netscape model. In Internet Explorer, if a function is called from an event, it can access the event object through window.event. Mozilla passes an event object to event handlers. They must specifically pass the object on to the function called through an argument.

+ +

A cross-browser event handling example follows (note that it means you can't define a global variable named event in your code):

+ +
<div onclick="handleEvent(event);">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    var myEvent = window.event ? window.event : aEvent;
+  }
+</script>
+
+ +

The properties and functions that the event object exposes are also often named differently in Mozilla and Internet Explorer, as Table 4 shows.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 4. Event properties differences between Mozilla and Internet Explorer
Internet Explorer NameMozilla NameDescription
altKeyaltKeyBoolean property that returns whether the alt key was pressed during the event.
cancelBubblestopPropagation()Used to stop the event from bubbling farther up the tree.
clientXclientXThe X coordinate of the event, in relation to the element viewport.
clientYclientYThe Y coordinate of the event, in relation to the element viewport.
ctrlKeyctrlKeyBoolean property that returns whether the Ctrl key was pressed during the event.
fromElementrelatedTargetFor mouse events, this is the element from which the mouse moved away.
keyCodekeyCodeFor keyboard events, this is a number representing the key that was pressed. It is 0 for mouse events. For keypress events (not keydown/keyup) of keys that produce output, the Mozilla equivalent is charCode, not keyCode.
returnValuepreventDefault()Used to prevent the event's default action from occurring.
screenXscreenXThe X coordinate of the event, in relation to the screen.
screenYscreenYThe Y coordinate of the event, in relation to the screen.
shiftKeyshiftKeyBoolean property that returns whether the Shift key was pressed during the event.
srcElementtargetThe element to which the event was originally dispatched.
toElementcurrentTargetFor mouse events, this is the element to which the mouse moved.
typetypeReturns the name of the event.
+ +

Attach event handlers

+ +

Mozilla supports two ways to attach events through JavaScript. The first, supported by all browsers, sets event properties directly on objects. To set a click event handler, a function reference is passed to the object's onclick property:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+  function handleEvent(aEvent) {
+    // if aEvent is null, means the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad(){
+    document.getElementById("myDiv").onclick = handleEvent;
+  }
+</script>
+
+ +

Mozilla fully supports the W3C standard way of attaching listeners to DOM nodes. You use the addEventListener() and removeEventListener() methods, and have the benefit of being able to set multiple listeners for the same event type. Both methods require three parameters: the event type, a function reference, and a boolean denoting whether the listener should catch events in their capture phase. If the boolean is set to false, it will only catch bubbling events. W3C events have three phases: capturing, at target, and bubbling. Every event object has an eventPhase attribute indicating the phase numerically (0 indexed). Every time you trigger an event, the event starts at the DOM's outermost element, the element at the top of the DOM tree. It then walks the DOM using the most direct route toward the target, which is the capturing phase. When the event reaches the target, the event is in the target phase. After arriving at the target, it walks up the DOM tree back to the outermost node; this is bubbling. Internet Explorer's event model only has the bubbling phase; therefore, setting the third parameter to false results in Internet Explorer-like behavior:

+ +
<div id="myDiv">Click me!</div>
+
+<script>
+
+  function handleEvent(aEvent) {
+    // if aEvent is null, it is the Internet Explorer event model,
+    // so get window.event.
+    var myEvent = aEvent ? aEvent : window.event;
+  }
+
+  function onPageLoad() {
+    var element = document.getElementById("myDiv");
+    element.addEventListener("click", handleEvent, false);
+  }
+</script>
+
+ +

One advantage of addEventListener() and removeEventListener() over setting properties is that you can have multiple event listeners for the same event, each calling another function. Thus, to remove an event listener requires all three parameters be the same as the ones you use when adding the listener.

+ +

Mozilla does not support Internet Explorer's method of converting <script> tags into event handlers, which extends <script> with for and event attributes (see Table 5). It also does not support the attachEvent and detachEvent methods. Instead, you should use the addEventListener and removeEventListener methods. Internet Explorer does not support the W3C events specification. However, IE can be remediated to support addEventListener and removeEventListener.

+ + + + + + + + + + + + + + + + + + + + +
Table 5. Event method differences between Mozilla and Internet Explorer
Internet Explorer MethodMozilla MethodDescription
attachEvent(aEventType, aFunctionReference)addEventListener(aEventType, aFunctionReference, aUseCapture)Adds an event listener to a DOM element.
detachEvent(aEventType, aFunctionReference)removeEventListener(aEventType, aFunctionReference, aUseCapture)Removes an event listener to a DOM element.
+ +

Rich text editing

+ +

While Mozilla prides itself with being the most W3C web standards compliant browser, it does support nonstandard functionality, such as innerHTML and rich text editing, if no W3C equivalent exists.

+ +

Mozilla 1.3 introduced an implementation of Internet Explorer's designMode feature, which turns an HTML document into a rich text editor field. Once turned into the editor, commands can run on the document through the execCommand command. Mozilla also supports Internet Explorer's contentEditable attribute for making any widget editable. Alternatively, you could use an iframe to add a rich text editor.

+ +

Rich text differences

+ +

Mozilla supports the W3C standard of accessing iframe's document object through IFrameElmRef.contentDocument, while Internet Explorer requires you to access it through document.frames{{ mediawiki.external('\"IframeName\"') }} and then access the resulting document:

+ +
<script>
+function getIFrameDocument(aID) {
+  var rv = null;
+
+  // if contentDocument exists, W3C compliant (Mozilla)
+  if (document.getElementById(aID).contentDocument){
+    rv = document.getElementById(aID).contentDocument;
+  } else {
+    // IE
+    rv = document.frames[aID].document;
+  }
+  return rv;
+}
+</script>
+
+ +

Another difference between Mozilla and Internet Explorer is the HTML that the rich text editor creates. Mozilla defaults to using CSS for the generated markup. However, Mozilla allows you to toggle between HTML and CSS mode using the useCSS execCommand and toggling it between true and false. Internet Explorer always uses HTML markup.

+ +
Mozilla (CSS):
+  <span style="color: blue;">Big Blue</span>
+
+Mozilla (HTML):
+  <font color="blue">Big Blue</font>
+
+Internet Explorer:
+  <FONT color="blue">Big Blue</FONT>
+
+ +

Below is a list of commands that execCommand in Mozilla supports:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 6. Rich text editing commands
Command NameDescriptionArgument
boldToggles the selection's bold attribute.---
createlinkGenerates an HTML link from the selected text.The URL to use for the link
deleteDeletes the selection.---
fontnameChanges the font used in the selected text.The font name to use (Arial, for example)
fontsizeChanges the font size used in the selected text.The font size to use
fontcolorChanges the font color used in the selected text.The color to use
indentIndents the block where the caret is.---
inserthorizontalruleInserts an <hr> element at the cursor's position.---
insertimageInserts an image at the cursor's position.URL of the image to use
insertorderedlistInserts an ordered list (<ol>) element at the cursor's position.---
insertunorderedlistInserts an unordered list (<ul>) element at the cursor's position.---
italicToggles the selection's italicize attribute.---
justifycenterCenters the content at the current line.---
justifyleftJustifies the content at the current line to the left.---
justifyrightJustifies the content at the current line to the right.---
outdentOutdents the block where the caret is.---
redoRedoes the previous undo command.---
removeformatRemoves all formatting from the selection.---
selectallSelects everything in the rich text editor.---
strikethroughToggles the strikethrough of the selected text.---
subscriptConverts the current selection into subscript.---
superscriptConverts the current selection into superscript.---
underlineToggles the underline of the selected text.---
undoUndoes the last executed command.---
unlinkRemoves all link information from the selection.---
useCSSToggles the usage of CSS in the generated markup.Boolean value
+ +

For more information, visit Rich-Text Editing in Mozilla.

+ +

XML differences

+ +

Mozilla has strong support for XML and XML-related technologies, such as XSLT and Web services. It also supports some non-standard Internet Explorer extensions, such as XMLHttpRequest.

+ +

How to handle XML

+ +

As with standard HTML, Mozilla supports the W3C XML DOM specification, which allows you to manipulate almost any aspect of an XML document. Differences between Internet Explorer's XML DOM and Mozilla are usually caused by Internet Explorer's nonstandard behaviors. Probably the most common difference is how they handle white space text nodes. Often when XML generates, it contains white spaces between XML nodes. Internet Explorer, when using Node.childNodes, will not contain these white space nodes. In Mozilla, those nodes will be in the array.

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  alert(myXMLDoc.childNodes.length);
+
+ +

The first line of JavaScript loads the XML document and accesses the root element (myXMLDoc) by retrieving the documentElement. The second line simply alerts the number of child nodes. Per the W3C specification, the white spaces and new lines merge into one text node if they follow each other. For Mozilla, the myXMLdoc node has three children: a text node containing a new line and two spaces; the myns:foo node; and another text node with a new line. Internet Explorer, however, does not abide by this and will return "1" for the above code, namely only the myns:foo node. Therefore, to walk the child nodes and disregard text nodes, you must distinguish such nodes.

+ +

As mentioned earlier, every node has a nodeType property representing the node type. For example, an element node has type 1, while a document node has type 9. To disregard text nodes, you must check for types 3 (text node) and 8 (comment node).

+ +
XML:
+  <?xml version="1.0"?>
+  <myXMLdoc xmlns:myns="http://myfoo.com">
+    <myns:foo>bar</myns:foo>
+  </myXMLdoc>
+
+JavaScript:
+  var myXMLDoc = getXMLDocument().documentElement;
+  var myChildren = myXMLDoc.childNodes;
+
+  for (var run = 0; run < myChildren.length; run++){
+    if ( (myChildren[run].nodeType != 3) &&
+          myChildren[run].nodeType != 8) ){
+      // not a text or comment node
+    };
+  };
+
+ +

See Whitespace in the DOM for more detailed discussion and a possible solution.

+ +

XML data islands

+ +

Internet Explorer has a nonstandard feature called XML data islands, which allow you to embed XML inside an HTML document using the nonstandard HTML tag <xml>. Mozilla does not support XML data islands and handles them as unknown HTML tags. You can achieve the same functionality using XHTML; however, because Internet Explorer's support for XHTML is weak, this is usually not an option.

+ +

IE XML data island:

+ +
<xml id="xmldataisland">
+  <foo>bar</foo>
+</xml>
+
+ +

One cross-browser solution is to use DOM parsers, which parse a string that contains a serialized XML document and generates the document for the parsed XML. Mozilla uses the DOMParser object, which takes the serialized string and creates an XML document out of it. In Internet Explorer, you can achieve the same functionality using ActiveX. The object created using new ActiveXObject("Microsoft.XMLDOM") has a loadXML method that can take in a string and generate a document from it. The following code shows you how:

+ +
var xmlString = "<xml id=\"xmldataisland\"><foo>bar</foo></xml>";
+var myDocument;
+
+if (window.DOMParser) {
+  // This browser appears to support DOMParser
+  var parser = new DOMParser();
+  myDocument = parser.parseFromString(xmlString, "text/xml");
+} else if (window.ActiveXObject){
+  // Internet Explorer, create a new XML document using ActiveX
+  // and use loadXML as a DOM parser.
+  myDocument = new ActiveXObject("Microsoft.XMLDOM");
+  myDocument.async = false;
+
+  myDocument.loadXML(xmlString);
+} else {
+  // Not supported.
+}
+
+ +

See Using XML Data Islands in Mozilla for an alternative approach.

+ +

XMLHttpRequest

+ +

Internet Explorer allows you to send and retrieve XML files using MSXML's XMLHTTP class, which is instantiated through ActiveX using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP"). Since there is no standard method of doing this, Mozilla provides the same functionality in the global JavaScript XMLHttpRequest object. Since version 7 IE also supports the "native" XMLHttpRequest object.

+ +

After instantiating the object using new XMLHttpRequest(), you can use the open method to specify what type of request (GET or POST) you use, which file you load, and if it is asynchronous or not. If the call is asynchronous, then give the onload member a function reference, which is called once the request has completed.

+ +

Synchronous request:

+ +
var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "data.xml", false);
+
+myXMLHTTPRequest.send(null);
+
+var myXMLDocument = myXMLHTTPRequest.responseXML;
+
+ +

Asynchronous request:

+ +
var myXMLHTTPRequest;
+
+function xmlLoaded() {
+  var myXMLDocument = myXMLHTTPRequest.responseXML;
+}
+
+function loadXML(){
+  myXMLHTTPRequest = new XMLHttpRequest();
+  myXMLHTTPRequest.open("GET", "data.xml", true);
+  myXMLHTTPRequest.onload = xmlLoaded;
+  myXMLHTTPRequest.send(null);
+}
+
+ +

Table 7 features a list of available methods and properties for Mozilla's XMLHttpRequest.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 7. XMLHttpRequest methods and properties
NameDescription
void abort()Stops the request if it is still running.
string getAllResponseHeaders()Returns all response headers as one string.
string getResponseHeader(string headerName)Returns the value of the specified header.
functionRef onerrorIf set, the references function will be called whenever an error occurs during the request.
functionRef onloadIf set, the references function will be called when the request completes successfully and the response has been received. Use when an asynchronous request is used.
void open (string HTTP_Method, string URL)
+
+ void open (string HTTP_Method, string URL, boolean async, string userName, string password)		Initializes the request for the specified URL, using either GET or POST as the HTTP method. To send the request, call the send() method after initialization. If async is false, the request is synchronous, else it defaults to asynchronous. Optionally, you can specify a username and password for the given URL needed.
int readyStateState of the request. Possible values: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ValueDescription
0UNINITIALIZED - open() has not been called yet.
1LOADING - send() has not been called yet.
2LOADED - send() has been called, headers and status are available.
3INTERACTIVE - Downloading, responseText holds the partial data.
4COMPLETED - Finished with all operations.
+
string responseTextString containing the response.
DOMDocument responseXMLDOM Document containing the response.
void send(variant body)Initiates the request. If body is defined, it is sent as the body of the POST request. body can be an XML document or a string serialized XML document.
void setRequestHeader (string headerName, string headerValue)Sets an HTTP request header for use in the HTTP request. Has to be called after open() is called.
string statusThe status code of the HTTP response.
+ +

XSLT differences

+ +

Mozilla supports XSL Transformations (XSLT) 1.0. It also allows JavaScript to perform XSLT transformations and allows running XPath on a document.

+ +

Mozilla requires that you send the XML and XSLT files with an XML mimetype (text/xml or application/xml). This is the most common reason why XSLT won't run in Mozilla but will in Internet Explorer. Mozilla is strict in that way.

+ +

Internet Explorer 5.0 and 5.5 supported XSLT's working draft, which is substantially different than the final 1.0 recommendation. The easiest way to distinguish what version an XSLT file was written against is to look at the namespace. The namespace for the 1.0 recommendation is http://www.w3.org/1999/XSL/Transform, while the working draft's namespace is http://www.w3.org/TR/WD-xsl. Internet Explorer 6 supports the working draft for backwards compatibility, but Mozilla does not support the working draft, only the final recommendation.

+ +

If XSLT requires you to distinguish the browser, you can query the "xsl:vendor" system property. Mozilla's XSLT engine will report itself as "Transformiix" and Internet Explorer will return "Microsoft".

+ +
<xsl:if test="system-property('xsl:vendor') = 'Transformiix'">
+  <!-- Mozilla specific markup -->
+</xsl:if>
+<xsl:if test="system-property('xsl:vendor') = 'Microsoft'">
+  <!-- Internet Explorer specific markup -->
+</xsl:if>
+
+ +

Mozilla also provides JavaScript interfaces for XSLT, allowing a Web site to complete XSLT transformations in memory. You can do this using the global XSLTProcessor JavaScript object. XSLTProcessor requires you to load the XML and XSLT files, because it needs their DOM documents. The XSLT document, imported by the XSLTProcessor, allows you to manipulate XSLT parameters.

+ +

XSLTProcessor can generate a standalone document using transformToDocument(), or it can create a document fragment using transformToFragment(), which you can easily append into another DOM document. Below is an example:

+ +
var xslStylesheet;
+var xsltProcessor = new XSLTProcessor();
+
+// load the xslt file, example1.xsl
+var myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xsl", false);
+myXMLHTTPRequest.send(null);
+
+// get the XML document and import it
+xslStylesheet = myXMLHTTPRequest.responseXML;
+
+xsltProcessor.importStylesheet(xslStylesheet);
+
+// load the xml file, example1.xml
+myXMLHTTPRequest = new XMLHttpRequest();
+myXMLHTTPRequest.open("GET", "example1.xml", false);
+myXMLHTTPRequest.send(null);
+
+var xmlSource = myXMLHTTPRequest.responseXML;
+
+var resultDocument = xsltProcessor.transformToDocument(xmlSource);
+
+ +

After creating an XSLTProcessor, you load the XSLT file using XMLHttpRequest. The XMLHttpRequest's responseXML member contains the XML document of the XSLT file, which is passed to importStylesheet. You then use the XMLHttpRequest again to load the source XML document that must be transformed; that document is then passed to the transformToDocument method of XSLTProcessor. Table 8 features a list of XSLTProcessor methods.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table 8. XSLTProcessor methods
MethodDescription
void importStylesheet(Node styleSheet)Imports the XSLT stylesheet. The styleSheet argument is the root node of an XSLT stylesheet's DOM document.
DocumentFragment transformToFragment(Node source, Document owner)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and generates a DocumentFragment. owner specifies what DOM document the DocumentFragment should belong to, making it appendable to that DOM document.
Document transformToDocument(Node source)Transforms the Node source by applying the stylesheet imported using the importStylesheet method and returns a standalone DOM document.
void setParameter(String namespaceURI, String localName, Variant value)Sets a parameter in the imported XSLT stylesheet.
Variant getParameter(String namespaceURI, String localName)Gets the value of a parameter in the imported XSLT stylesheet.
void removeParameter(String namespaceURI, String localName)Removes all set parameters from the imported XSLT stylesheet and makes them default to the XSLT-defined defaults.
void clearParameters()Removes all set parameters and sets them to defaults specified in the XSLT stylesheet.
void reset()Removes all parameters and stylesheets.
+ +
+

Original Document Information

+ + +
diff --git a/files/ja/orphaned/monitoring_http_activity/index.html b/files/ja/orphaned/monitoring_http_activity/index.html new file mode 100644 index 0000000000..6fd97a5a38 --- /dev/null +++ b/files/ja/orphaned/monitoring_http_activity/index.html @@ -0,0 +1,41 @@ +--- +title: HTTP アクティビティのモニタリング +slug: Monitoring_HTTP_activity +--- +

 {{ gecko_minversion_header("1.9.2") }}

+

Gecko は {{ interface("nsIHttpActivityObserver") }} インターフェースを含んでおり、コールバックを受け取る形でHTTPトランザクションをリアルタイムにモニタすることができます。

+

HTTP activity observer を作る

+

HTTP上のアクティビティを観察するには、コード内で {{ interface("nsIHttpActivityObserver") }} を実装する必要があります。このインターフェースはとても単純で、 {{ ifmethod("nsIHttpActivityObserver", "observeActivity") }} という1つのメソッドを実装するだけです。このメソッドはHTTPチャンネルで対象となるアクションが発生するごとに呼び出されます。

+
// インターフェースへの参照を定義する
var nsIHttpActivityObserver = Components.interfaces.nsIHttpActivityObserver;
+
+var httpObserver =
+{
+    observeActivity: function(aHttpChannel, aActivityType, aActivitySubtype, aTimestamp, aExtraSizeData, aExtraStringData)
+    {
+      if (aActivityType == nsIHttpActivityObserver.ACTIVITY_TYPE_HTTP_TRANSACTION) {
+        switch(aActivitySubtype) {
+          case nsIHttpActivityObserver.ACTIVITY_SUBTYPE_RESPONSE_HEADER:
+            // received response header
+            break;
+          case nsIHttpActivityObserver.ACTIVITY_SUBTYPE_RESPONSE_COMPLETE:
+            // received complete HTTP response
+            break;
+        }
+      }
+    }
+};
+
+

次に、activity observer を実際に組み込む必要があります。これは {{ interface("nsIHttpActivityDistributor") }} の{{ ifmethod("nsIHttpActivityDistributor", "addObserver") }} メソッドを用いて行います：

+
var activityDistributor = Components.classes["@mozilla.org/network/http-activity-distributor;1"]
+                                    .getService(Components.interfaces.nsIHttpActivityDistributor);
+activityDistributor.addObserver(httpObserver);
+
+

アクティビティを観察する

+

観察可能なクラスは2つあります： ソケットレベルで発生するものと、HTTPトランザクションレベルで発生するものです。

+

観察可能なソケットのアクティビティ

+

{{ interface("nsIHttpActivityDistributor") }} メソッドに報告された アクティビティが ACTIVITY_TYPE_SOCKET_TRANSPORT の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは socket transport status code となります。

+

観察可能な HTTP のアクティビティ

+

アクティビティタイプ が ACTIVITY_TYPE_HTTP_TRANSACTION の場合、アクティビティサブタイプは activity subtype 定数 のうちの1つとなります。これらは送信されるHTTPリクエストヘッダやボディ、受信するHTTPヘッダなどを含むHTTPトランザクション全体を観察するための機能も含みます。

+

参照

+ diff --git a/files/ja/orphaned/monitoring_wifi_access_points/index.html b/files/ja/orphaned/monitoring_wifi_access_points/index.html new file mode 100644 index 0000000000..90ae306903 --- /dev/null +++ b/files/ja/orphaned/monitoring_wifi_access_points/index.html @@ -0,0 +1,77 @@ +--- +title: WiFi アクセスポイントのモニタリング +slug: Monitoring_WiFi_access_points +--- +

{{ gecko_minversion_header("1.9.1") }}

+

UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた geolocation サービスのために導入されました。

+

例

+

この例では、利用可能なアクセスポイントの一覧を出力します。

+
注意: wiki の仕様上、 21 行目の表示がおかしくなることがあります。最初の "dd" は単純に "d" ですが、どういうわけか余分な1文字が付いてしまうようです。
+
<html>
+<head>
+<title>WiFi Monitor Example</title>
+<script>
+
+var count = 0;
+
+function test() {
+}
+
+test.prototype =
+{
+  onChange: function (accessPoints)
+  {
+    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
+    var d = document.getElementById("d");
+    d.innerHTML = "";
+
+    for (var i=0; i<accessPoints.length; i++) {
+      var a = accessPoints[i];
+      d.innerHTML += "<p>" + a.mac + " " + a.ssid + " " + a.signal + "</p>";
+    }
+
+    var c = document.getElementById("c");
+    c.innerHTML = "<p>" + count++ + "</p>";
+
+  },
+
+  onError: function (value) {
+     alert("error: " +value);
+  },
+
+  QueryInterface: function(iid) {
+        netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
+        if (iid.equals(Components.interfaces.nsIWifiListener) ||
+            iid.equals(Components.interfaces.nsISupports))
+            return this;
+        throw Components.results.NS_ERROR_NO_INTERFACE;
+   },
+}
+
+  netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
+
+  var listener = new test();
+  var wifi_service = Components.classes["@mozilla.org/wifi/monitor;1"].getService(Components.interfaces.nsIWifiMonitor);
+
+  wifi_service.startWatching(listener);
+
+</script>
+</head>
+
+<body>
+<div id="d"><p></p></div>
+<div id="c"><p></p></div>
+</body>
+</html>
+
+

nsIWifiListener オブジェクト

+

上述のコードでは、まずアクセスポイントの一覧に変更が起こった時点で通知を受け取るリスナーオブジェクトのプロトタイプが作成されます。このオブジェクトは11行目から40行目にかけての部分に相当します。

+

onChange() メソッド(13～27行目)は UniversalXPConnect 特権を有効にすることから始まり、次にアクセスポイントの一覧を表示する div (d) の内部 HTML を消去します。19～22行目の for ループ部分では、 accessPoints 配列に渡されたアクセスポイントの一覧を、 MAC アドレス、 SSID 、信号強度に分けて div 要素内に HTML として出力します。

+

そして、 div (c) は一覧が読み込まれるたびに更新されます。

+

onError() メソッドは、単に受け取ったエラーコードを表示するメッセージボックスを開きます。

+

アクセスポイントのモニタリングを始める

+

アクセスポイントのモニタリングを始めるためには、まず44行目のようにリスナーオブジェクトのインスタンスを作成しなければなりません。その後、45行目で示すように WiFi モニターインターフェースへアクセスを行い、47行目で WiFi モニタリングサービスの startWatching() メソッドを呼び出すことでモニタリングが始まります。

+

参考文献

+ +

 

diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html new file mode 100644 index 0000000000..8b78f7bf11 --- /dev/null +++ b/files/ja/orphaned/mozilla/add-ons/webextensions/package_your_extension_/index.html @@ -0,0 +1,68 @@ +--- +title: 拡張機能をパッケージ化する +slug: Mozilla/Add-ons/WebExtensions/Publishing_your_WebExtension +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Package_your_extension_ +--- +
{{AddonSidebar}}
+ +

 

+ +
+
+

Firefox ではパッケージされた拡張機能を "XPI ファイル" と呼び、これは単に色々な拡張機能を集めた ZIP ファイルです。

+ +

AMO にアップロードする時に、XPI 拡張機能を使う必要はありません。

+
+
+ +

 

+ +

開発期間中、拡張機能は manifest.json ファイルとその他の必要なファイル—スクリプト、アイコン、HTML 文書などを含む 1 つのディレクトリで構成されるでしょう。AMO にアップロードするにはこれを 1 つの zip ファイルにまとめる必要があります。

+ +

web-ext を使っている場合、拡張機能をパッケージ化するのに web-ext build を使います。その他の場合、下記の OS ごとの手順に従ってください。

+ +
+

Tip. ZIP ファイルは拡張機能を構成するファイル自身でなくてはならず、これらを含んだディレクトリであってはいけません。

+
+ +

Windows

+ +
    +
  1. あなたの拡張機能を格納したフォルダを開きます。
    2. +
  2. すべてのファイルを選択します。
    3. +
  3. 右クリックメニューの「送る」 から zip圧縮を選びます。
    4. +
+ +

+ +

Mac OS X

+ +
    +
  1. あなたの拡張機能を格納したディレクトリを開きます。
    2. +
  2. すべてのファイルを選択します。
    3. +
  3. 右クリックメニューから圧縮を選びます。
    4. +
+ +

+ +
+
コマンドについて http://www.info-zip.org/mans/zip.html.
+
+ +

Linux / Mac OS X ターミナル

+ +
    +
  1. ターミナルを開きます。
    2. +
  2. 拡張機能を含むディレクトリを開きます、そのコマンドは
    + cd path/to/my-extension/
    3. +
  3. ディレクトリの中身を ZIP します、そのコマンドは
    + zip -r -FS ../my-extension.zip *
    4. +
+ +

 

+ +

 

+ +

 

diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html new file mode 100644 index 0000000000..3baef65043 --- /dev/null +++ b/files/ja/orphaned/mozilla/add-ons/webextensions/porting_a_google_chrome_extension/index.html @@ -0,0 +1,24 @@ +--- +title: Google Chrome からの移行 +slug: Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension +--- +
{{AddonSidebar}}
+ +

WebExtension API で開発する拡張機能は、ブラウザー間で互換性が維持されるように設計されており、大半は Google Chrome や Opera でサポートされている extension API とコード互換性があります。これらのブラウザー向けに書かれた拡張機能はほとんどの場合、少しの変更を加えるだけで Firefox でも動くようになります。ほぼすべての WebExtension API は、Chrome と同様に chrome 名前空間のコールバック関数を使ってサポートされています。chrome 名前空間でサポートされない唯一の API は、わざと Chrome と互換性がないものです。こうしたまれな場合は、API ドキュメントページでは明示的に、browser 名前空間だけでサポートされることを述べています。Chrome や Opera から拡張機能を移行する手順は下記の通り:

+ +
    +
  1. manifest.json の設定項目や使用している WebExtensionAPI が Chrome との非互換性リファレンスに載っているか確認します。もし Firefox でサポートされていない設定項目や API を利用している場合、まだ移行できないかもしれません。 Mozilla はこの手順を自動化するサービスを次にて提供しています: https://www.extensiontest.com/.
    2. +
  2. 拡張機能を Firefox にインストールしてテストします。
    3. +
  3. もし何か問題が見つかったら、 dev-addons mailing list または IRC の  #webextensions に連絡してください。
    4. +
  4. アドオンの署名と配布を行うため、アドオンを AMO に送ります。
    5. +
+ +

展開された拡張機能をロードするのに Chrome のコマンドラインオプションを使用していた場合、開発用に Firefox へ自動的に仮インストールを行う web-ext ツールを使用してみてください。  

+ + + +
diff --git a/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html b/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html new file mode 100644 index 0000000000..4afb4fe00e --- /dev/null +++ b/files/ja/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html @@ -0,0 +1,219 @@ +--- +title: パッケージ化とインストール +slug: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox +translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation +--- +
{{AddonSidebar}}
+ +

この記事では、WebExtension を Firefox にインストールする方法を 2 つ紹介します。

+ + + +

{{英語版章題("Loading from disk")}}

+ +

ディスクから読み込む

+ +

WebExtension を Firefox で動作させるには、この方法が最もシンプルです。また、ブートストラップ型拡張機能 や Add-on SDK を使ったアドオン といった、再起動の要らないアドオンはすべてこの方法でインストールできます。

+ +

ここでは Firefox 45 以降が必要となります。

+ +

ディスクから読み込むには、

+ + + +

これでアドオンがインストールされ、Firefox を再起動するまで有効になります。

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

{{英語版章題("Updating a temporary add-on")}}

+ +

一時的なアドオンの更新

+ +

この方法でアドオンをインストールした場合、アドオンのファイルを更新すると何が起きるでしょうか？

+ +

{{英語版章題("Before Firefox 48")}}

+ +

Firefox 47 以前

+ + + +
+

Firefox 47 以前では、Firefox を再起動せずに「一時的なアドオンを読み込む」をクリックしても更新は反映されない ことに注意してください。

+
+ +

{{英語版章題("Firefox 48 onwards")}}

+ +

Firefox 48 以降

+ + + +
+

Firefox 48 のみに関する注意点として、about:debugging と about:addons に表示されるアドオンの名前と説明文は、「リロード」ボタンをクリックしても更新されません。この問題は Firefox 49 で修正されます。

+
+ +

{{英語版章題("Package and install")}}

+ +

パッケージ化してインストールする

+ +

ディスクからの読込は 開発 / テスト / デバッグ のサイクルにおいては有効です。しかし、アドオンを他の人と共有したい場合は、アドオンを インストール可能な形式にパッケージ化する必要があります。

+ +

{{英語版章題("Packaging")}}

+ +

パッケージ化

+ +

Firefox のアドオンは XPI ファイルでパッケージ化されます。XPI ファイルとは単なる ZIP ファイルですが、ファイルの拡張子は ".xpi" となります。

+ +

一つ注意しなければならないのは、アドオンのファイルを含んだディレクトリの ZIP ファイルではなく、アドオンのファイルを直接含んだ ZIP ファイルとする必要がある点です。

+ +

Windows

+ +
    +
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. +
  2. ファイルすべてを選択します。
    3. +
  3. 右クリックして "送る" → "圧縮（zip 形式）フォルダー" を選択します。
    4. +
  4. 作成されたファイルの名前を "something.zip" から "something.xpi" に変更します。
    5. +
+ +

+ +

Mac OS X

+ +
    +
  1. アドオンのファイルが含まれているフォルダを開きます。
    2. +
  2. ファイルすべてを選択します。
    3. +
  3. 右クリックして "n 項目を圧縮" を選択します。
    4. +
  4. 作成されたファイルの名前を Archive.zip から something.xpi に変更します。
    5. +
+ +

+ +

Linux / Mac OS X Terminal

+ +
    +
  1. cd path/to/my-addon/
    2. +
  2. zip -r ../my-addon.xpi *
    3. +
+ +

{{英語版章題("Installation")}}

+ +

インストール

+ +

XPI ファイルをインストールする前に、次のどちらかの手順を踏む必要があります。

+ + + +

{{英語版章題("Getting your add-on signed")}}

+ +

アドオンに署名する

+ +

XPI ファイルに署名するには、Signing and distributing your Add-on の記事を参照してください。

+ +

{{英語版章題("Enabling unsigned add-ons")}}

+ +

未署名のアドオンを有効にする

+ +

未署名のアドオンを有効にするには、以下の手順に従ってください。

+ + + +

{{EmbedYouTube("HgtBYDWtH4w")}}

+ +

{{英語版章題("Installing an XPI in Firefox")}}

+ +

XPI ファイルを Firefox にインストールする

+ +

XPI ファイルに署名した場合でも、署名の制約を無効化した場合でも、XPI ファイルをインストールする手順はどちらも同じです。

+ +
    +
  1. about:addons に移動します。
    2. +
  2. XPI ファイルをページにドラッグ & ドロップするか、歯車アイコンのメニューを開いて "ファイルからアドオンをインストール" を選択します。
    3. +
  3. 表示されたダイアログで "インストール" をクリックします。
    4. +
+ +

他にも、"ファイル" → "開く" から XPI ファイルを選択したり、Control+O (Command+O) で選択することも可能です。

+ +

{{英語版章題("Installing your extension of Firefox OS")}}

+ +

アドオンを Firefox OS にインストールする

+ +

USB か Wifi で接続されたデスクトップ PC で WebIDE を起動すれば、WebIDE からアドオンをインストールすることができます。WebIDE で "path/to/my-extension" をパッケージ型アプリとして開いてください。

+ +

manifest.json の認証状況が正しければ、接続されたデバイス（Firefox OS の nightly ビルドで動作しているもの）にアドオンをインストールし、実行することができます。

+ +

このアドオンの初回実行時は、Firefox OS のデバイスで Settings → Add-ons で有効にする必要があります。

+ +

{{英語版章題("Troubleshooting")}}

+ +

トラブルシューティング

+ +

起こりやすい問題には以下のようなものがあります。

+ +

"This add-on could not be installed because it has not been verified."

+ + + +

"This add-on could not be installed because it appears to be corrupt."

+ + + +

{{英語版章題("Nothing happens")}}

+ +

何も起こらない

+ + + +

{{英語版章題("Check the console")}}

+ +

コンソールを確認する

+ +

アドオンが解凍されたり読み込まれる過程に関して、他のエラーメッセージが ブラウザコンソール に表示されている場合があります。

diff --git a/files/ja/orphaned/mozilla_modules_and_module_ownership/index.html b/files/ja/orphaned/mozilla_modules_and_module_ownership/index.html new file mode 100644 index 0000000000..eec08886fc --- /dev/null +++ b/files/ja/orphaned/mozilla_modules_and_module_ownership/index.html @@ -0,0 +1,62 @@ +--- +title: Mozilla Modules and Module Ownership +slug: Mozilla_Modules_and_Module_Ownership +tags: + - Developing Mozilla +--- +

Mozilla モジュールの特徴、モジュールオーナーの役割、モジュール所有者の基準、モジュールオーナーの指名。 +

+

意思決定の分散

+

コードの適切性、品質、または CVS ソースレポジトリにチェックインされる準備が整っているのかという点に関して mozilla.org のスタッフメンバーが決定を下していない事項が多数あります。スタッフがこのような作業を行うには Mozilla プロジェクトがあまりに大きすぎるためです。プロジェクトにはコアテクノロジーセット (レイアウトエンジン、ネットワークライブラリ、クロスプラットフォームコンポーネントモデルなど)とこれらのテクノロジーで構築されたアプリケーションセット (ブラウザ、メール/ニュースリーダー、Internet Relay Chat クライアント) の両方が含まれています。mozilla.org のスタッフは、現行の開発に必要な大量の決定を下すための態勢が整っていません。ひとつには、mozilla.org スタッフがコードのあらゆる分野の専門家であると思うのはおこがましいことだと考えるからです。間違いなくそんなことはありません。もうひとつには、スタッフが少人数であることが挙げられます。特定のコードに関する大半の決定を mozilla.org のスタッフが下そうとしたならばプロジェクトはなかなか進捗しなくなってしまいます。 +

この代わりとして、mozilla.org は「モジュール」およびモジュールオーナーシップを通じて広範な参加者に意思決定を分散しています。モジュールとは、合理的に定義された境界を持つ機能の一部分を実装するファイルセットです。モジュールは、アクセシビリティのための「accessible」などディレクトリ内のファイルセットの場合があります。または「スタイルシート」などのようにより概念的な場合があります。このような場合、モジュールにはソースツリーのさまざまな領域内に多数のファイルが含まれます。モジュールが C または C++ で記述されている場合には、.h ファイルと、.c または .cpp ファイルの 2 ファイルのみを含むことができます (一例は xpcom/ds/pldhash.{{ mediawiki.external('ch') }} で、これは xpcom の他の要素とは個別に処理されます)。 +

「合理的に定義された境界」といっても、絶対的に明確ではないのは当然です。特定の機能が終了し別の機能が開始する場合に重複やあいまいさがある場合、この定義自体がコードを反映するため、私たちはこの定義を使用します。絶対的な定義を作成しようとすると、複雑なルールや例外が要求されますが、これらはほとんどの場合必要とされません。このような定義を考案するためにエネルギーを使うよりも、必要に応じて mozilla.org のスタッフが仲介となってモジュールオーナーに重複または共有したオーナーシップを可能であれば管理していただきたいと考えています。 +

+

モジュールオーナーシップの役割

+

「モジュールオーナー」は mozilla.org のスタッフがモジュールの開発のリーダーシップを委ねた人を指します。モジュールオーナーの責任範囲は、コードの品質を改善する、適宜改訂と刷新を実施する、残りのコードベースの開発との調整を図る、モジュールの方向性に関する共通の理解を構築および維持する、適宜 API を開発する、可能な限り多くの文書を作成する、コードの貢献に適切に対応する、提言を策定したり、コミュニティから述べられたニーズをまとめる、有能な新規参加者を喜んで受け入れる環境を作るなど、広範囲に及びます。 +

コードをそのモジュールにチェックインするためには、モジュールオーナーの承認が必要です。これと引き換えに、私たちはモジュールオーナーに対して、受け取るものに注意を払う、他の人によって実行されたパッチに対応する、そして他の人によって開発されたコードを正当に評価することを期待しています。この役割を果たす方法についてはかなりの柔軟性がモジュールオーナーに与えられています。mozilla.org のスタッフは、モジュールオーナーがモジュールを管理する方法についての複雑なルールや手順を規定しません。作業がうまくいき、コミュニティ全体が満足すれば、これに越したことはありません。そうでない場合には、うまくいくように問題点を見つけて正していけばいいのです。 +

モジュールオーナーはモジュールの管理作業すべてを自分で行う必要はありません。モジュールオーナーは、モジュールにチェックインするためにコードを認可する能力のある他の人を指名することができます。これらの開発者は「ピア」と呼ばれ、優れたモジュールオーナーに求められる資質の多くを持つ人がその任に就くべきです。モジュールオーナーは、自分自身が作成したコードを評価する場合、ピアを指名して評価してもらわなければなりません。モジュールオーナー自身が自分のコードのレビューをすることは許されません。モジュールオーナーがいない場合には、そのモジュールをコードにチェックインするためにピアの承認があれば十分です。 +

モジュールオーナーは専制的な支配者ではありません。コミュニティからの入力を基に、そしてコミュニティの利益を最優先にして決定する権限を与えられています。コードの記述はコミュニティが行うので、モジュールオーナーに記述は求められません (もちろん、他の人たちと同じように、モジュールオーナーの雇用者やコミュニティが記述を求めるなどさまざまな理由から、モジュールオーナーがコードを記述してもかまいません)。モジュールオーナーはそのモジュールに実行されるパッチに注意を払う必要があります。といっても、「注意を払う」ということはすべてのパッチに同意することを意味するわけではありません。Mozilla にとって意味のないパッチもあれば、実装してもうまくいかないパッチもあるかもしれません。モジュールオーナーにはパッチを拒否する権限が与えられています。これはモジュールオーナーの不可欠な役割のひとつです。mozilla.org はモジュールオーナーに、パッチへの変更を求める理由、パッチを拒否する理由、または一定期間レビューを延期する理由など該当するバグのレポートをお願いしています。使えるパッチにするためにパッチをリライトすることはお願いも期待もしていません。同様に、次回の期日を考慮するとある有望なパッチのレビューを延期しなければならない場合があります。たとえば、パッチに関心はあるが、次のマイルストーンに向かないという場合です。このような場合には、マイルストーンに必要な状況が整うまでパッチのレビューを延期する方が得策です。該当するバグのレポートにその旨を記述してください。そして当然のことですが、mozilla.org スタッフによるレビューを行わずに頻繁にまた長期間にわたって延期し続けることはできません。 +

+

mozilla.org スタッフのレビュー

+

論争に発展した場合やその他の方法で解決できない場合には、mozilla.org が関与します。モジュールオーナーが特定のアクションに同意する公式見解を mozilla.org に求める場合もあれば、モジュールオーナーが改善できるであろう方法をその他の貢献者が提案する場合もあります。現在論争が展開されている場合もあります。可能であればこれらの問題をコミュニティが解決するのが望ましいと考えますが、常にそうはいかないということも分かっています。「こうでなければならない」というような絶対的な決定は避けようと努めますが、必要な場合には絶対的な決定を下します。 +

+

モジュールオーナーシップの基準

+

優れたモジュールオーナーシップにとって重要な要素は多数あります。もちろん第一は問題のコードに対する個人の専門的な知識です。しかしこれまでの経験から、付加的な基準も重要であること、また優れたハッカーがモジュールオーナーに適しているとは限らないことが分かっています。優れたモジュールオーナーのための基準は以下のとおりです。 +

+
  1. モジュールのコードに対する専門知識 +
  2. そのモジュールに現在関与している +
  3. モジュールの進むべき方向性を深く理解し、ビジョンを持っている +
  4. Mozilla コードベース全体、ならびにコードベースとモジュールの関係を正しく理解している +
  5. パッチや新機能への貢献を含み、そのモジュールのコードを評価する能力 +
  6. コードベースの他の部分に対するコードの影響を評価する能力 +
  7. 多様で地理的に分散しているコミュニティとのコミュニケーション能力 +
  8. 出処に関係なく (つまり「ここで開発されたものではない」シンドロームに罹っていない)、真価で貢献を評価しようとする姿勢 +
  9. そのモジュールの対象となるさまざまなコンシューマの多様な視点とニーズを考慮する能力 +
  10. 適宜ファクタリングやその他の抽出技法によってさまざまなニーズを解決する能力 +
+

モジュールオーナーの指名

+

ある個人が一定期間モジュールで作業を行い、モジュールを完了させるまでの間、基準のほとんど (完璧を求めるほど世間知らずではありません) を満たすことができる能力を証明し、そしてこの人をモジュールオーナーとして指名することへの総意が生まれることが望ましいと考えています。このように、指名は任命というよりはむしろ確認です。これまで常にそうしてきたわけではなく、また常にこの方法がうまくいったわけでもありませんが、今後よりよい仕事をしていこうと思っています。 +

これは、モジュールオーナーが不在の時があるということを意味します。特にほとんど注目されてなかったモジュールや廃り始めたモジュール、また勇敢な人が状況を把握し再び軌道に乗せるために尽力してくれる場合には、モジュールオーナーが不在です。これらの人たちの取り組みに対して大いに感謝するものです。ただし、これらの人たちをモジュールオーナーに指名することはすぐにはできません。当然のことながら、このモジュールの作業に相応の時間を費やさないと、この人が基準のいくつか、特に 1 から 5 の基準を満たしていることを証明することは困難です。この作業を行うことができるだけの幅広いそして深い専門知識をある人が持っているというのは十分にあり得ることですが、これはどちらかといえば例外だと思います。 +

モジュールオーナーを決定する際、上記の基準が各モジュールに対して同じ重要性を持っているとは限りません。モジュールごとに特定の要素の重要性は変わります。たとえば、基準 4 (Mozilla コードベース全体、ならびにコードベースとモジュールの関係を正しく理解している) と 6 (コードベースの他の部分に対するコードの影響を評価する能力) は自己完結型のモジュールにはあまり重要ではありませんが、コードの他の部分に多大な影響を及ぼすコアテクノロジーを含むモジュールにとっては非常に重要です。同様に、基準 9 (そのモジュールの対象となるさまざまなコンシューマの多様な視点とニーズを考慮する能力) と 10 (適宜ファクタリングやその他の抽出技法によってさまざまなニーズを解決する能力) は、少人数の貢献者のために明確に定義された機能を果たすモジュールにはあまり重要ではありませんが、さまざまな用途と広範な貢献者グループをサポートするモジュールには不可欠です。 +

+

Despot によるモジュールオーナーとピアデータの追跡

+

mozilla.org は「Despot」(despot.mozilla.org) として知られているデータベースを使用してモジュール、モジュールオーナーおよびピアを追跡しています。データは www.mozilla.org/owners.html をご覧ください。このページには、各モジュールを構成するコードの指示も記載されています。 +

+

モジュールオーナーシップの譲渡

+

モジュールオーナーシップの譲渡は mozilla.org を通じて行われます。モジュールオーナーを辞任するためには、staff@mozilla.org にメールを送信してください。遠慮なく新しいモジュールオーナーの推薦をメールに記載してください。モジュールによっては、モジュールオーナーシップの基準を満たしていることが証明済みで、モジュールオーナーになることに興味を持っており、継承者となることを概ね了承しているピアがいる場合もあります。このような場合には、mozilla.org のスタッフが Despot にオーナーシップの変更を行います。それ以外の場合には、そのモジュールに関するオーナーシップの基準を満たしていることを証明済みの人はいないでしょう。このような場合には、オーナーが育つまでオーナー不在でモジュールを進行し、モジュールのピアがそのモジュールにチェックインするために必要なレビューと承認を行います。 +

+

Bugzilla コンポーネントオーナーシップとの関係

+

モジュールオーナー/ピアの役割と Bugzilla コンポーネントの既定のオーナーの役割が不明瞭な場合があります。しかし役割は全く異なっています。コンポーネントオーナーは、特定のコンポーネントに対するバグレポートの受け取りに最も適した人のことで、モジュールの方向性やコードのレビューに関しての決定を下すために最適な人とは限りません。これにはいくつかの理由があります。第一に、Bugzilla コンポーネントはモジュールに正確に対応してはいません。これは、コンポーネントがバグを確認および経験する方法を反映しているが、コードの構造を必ずしも反映していないためです。第二に、バグの管理は、モジュールのコード管理とは異なる作業です。必要となるスキルが異なります。したがって、非常に優れたハッカーであっても、バグレポートを定期的にレビューする、進捗状況を追跡する、正しいオーナーにバグを再度割り当てる、テストケースが存在することを確認するなどの作業を得意としない場合があります。これらのスキルに優れていてもモジュールオーナーにふさわしくない貢献者もいます。Bugzilla コンポーネントオーナーとモジュールオーナーが同一人物の場合もありますが、多くの場合、別の人物がそれぞれのオーナーです。 +

+

モジュールのメンテナンス不良

+

モジュールのメンテナンス状態が悪く、残りのコードベースとうまく動かない場合があります。モジュールオーナーが不在である、または指名されたモジュールオーナーが他の作業に忙しくてそのモジュールのメンテナンスができない場合に発生します。あるいはモジュールオーナーはいるが、コミュニティ全般が不適切だと考えるモジュールへのアプローチをとった場合にも発生する可能性があります。mozilla.org のスタッフは、開発コミュニティがこのようなモジュールを確認し、解決策を提案して改善策を実施することを望んでいます。何らかの理由で不可能な場合には、mozilla.org のスタッフが可能な限り最善の解決策を見つけ出すために尽力させていただきます。 +

+
+

原文書の情報

+
  • 最終更新日: September 3, 2006 +
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 +
+
+
+
+{{ languages( { "en": "en/Mozilla_Modules_and_Module_Ownership" } ) }} diff --git a/files/ja/orphaned/mozistorageservice/index.html b/files/ja/orphaned/mozistorageservice/index.html new file mode 100644 index 0000000000..51f9fdce73 --- /dev/null +++ b/files/ja/orphaned/mozistorageservice/index.html @@ -0,0 +1,155 @@ +--- +title: mozIStorageService +slug: mozIStorageService +--- +

このインタフェースを使うことでデータベースへのmozIStorageConnectionを開くことができます、また開かれていないデータベースファイルのバックアップを作成することもできます。

+

+
storage/public/mozIStorageService.idlScriptable
+ + +Please add a summary to this article. + + +
+  +最終更新: Gecko 1.9 (Firefox 3)
+

+

継承元: nsISupports

+

メソッド概要

+ + + + + + + + + + + + + + + +
nsIFile backupDatabaseFile(in nsIFile aDBFile, in AString aBackupFileName, [optional] in nsIFile aBackupParentDirectory);
mozIStorageConnection openDatabase(in nsIFile aDatabaseFile);
mozIStorageConnection openSpecialDatabase(in string aStorageKey);
mozIStorageConnection openUnsharedDatabase(in nsIFile aDatabaseFile);
+

メソッド

+

backupDatabaseFile()

+

指定されたファイルのバックアップを作成します。データベースは開かれていない必要があります、またはこのメソッドを呼び出す際にデータベースに対する操作が行われないことが確かである必要があります。指定されたファイル名はあくまでもサジェスチョンになります。すでにファイル名が使われている場合、ユニークなファイル名になるように処理されます。実際のバックアップファイルは戻り値になり、実際のファイル名もそこから取得することができます。

+
nsIFile backupDatabaseFile(
+  in nsIFile aDBFile,
+  in AString aBackupFileName,
+  [optional] in nsIFile aBackupParentDirectory
+);
+
+
引数
+
+
+ aDBFile
+
+ バックアップを取るデータベースファイル
+
+ aBackupFileName
+
+ 新しく作成するバックアップファイルの名前
+
+ aBackupParentDirectory
+
+ バックアップファイルを格納するディレクトリの名前。この引数が指定されない場合はオリジナルのデータベースファイルと同じ場所にバックアップファイルが作成されます。
+
+
戻り値
+

新しいバックアップデータベースファイルを意味するnsIFileオブジェクト

+

openSpecialDatabase()

+

要求されたストレージのタイプを特定する命名された特別なデータベースストレージへの接続を開きます。

+

註: プロファイルデータベースへはメインスレッドからのみアクセスしてください。(他の呼び出しが利用している可能性があります。)

+
引数
+
+
+ aStorageKey
+
+ 要求されたストレージタイプを特定するキー文字列。"profile"および"memory"が有効です。
+
+
戻り値
+

指定されたデータベースへの接続を提供する新しいmozIStorageConnectionオブジェクト

+
例外
+
+
+ NS_ERROR_INVALID_ARG
+
+ aStorageKeyが不正な場合
+
+

openDatabase()

+

指定されたファイルへのデータベース接続を開きます。このメソッドがNS_ERROR_FILE_CORRUPTED例外をスローする場合、mozIStorageService.backupDatabaseFile()メソッドをデータベースをバックアップするために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)

+

+

警告: 単一のファイルに対して複数の接続を確立する場合、必ず毎回大文字小文字を含め正確に同じ名前を使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは破損してしまうでしょう。

+

+

もし、仮想テーブルをデータベース中に含むのであれば(例えば、全文インデックスなど)、mozIStorageService.openUnsharedDatabase()を開く際に使うべきです。なぜならばこのようなテーブルは共有キャッシュが使えないためです。このメソッドを仮想テーブルを含むデータベースへの接続を開くために用いた場合、データベースの破損とNS_ERROR_FILE_CORRUPTED例外のスローが発生するでしょう。

+
mozIStorageConnection openDatabase(
+  in nsIFile aDatabaseFile
+);
+
+
引数
+
+
+ aDatabaseFile
+
+ データベースとして開くためのnsIFileオブジェクト
+
+
戻り値
+

開かれたデータベース接続であるmozIStorageConnectionオブジェクト

+
例外
+
+
+ NS_ERROR_FAILURE
+
+ データベースを開こうとした際にエラーが起こった場合発生
+
+ NS_ERROR_FILE_CORRUPTED
+
+ データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生
+
+ NS_ERROR_OUT_OF_MEMORY
+
+ 新しいストレージオブジェクトの割り当てが失敗した場合に発生
+
+

openUnsharedDatabase()

+

共有キャッシュを使わずに指定されたファイルへのデータベース接続を開きます。このメソッドがNS_ERROR_FILE_CORRUPTED例外をスローする場合、mozIStorageService.backupDatabaseFile()メソッドをデータベースバックアップのために呼び出すことが推奨されます。こうすることでユーザデータの喪失を防ぐことができます。(現在失われたデータを復旧する手段はありません。)

+

+

警告: 単一のファイルに対して複数の接続を確立する場合、必ず毎回大文字小文字を含め正確に同じ名前を使用してください。SQLiteのプログラムは既に接続が開かれているかどうかを調べるために、単純な文字列比較によって判断しています。"Foo.sqlite" と "foo.sqlite" により接続を開いた場合はあなたのデータベースは破損してしまうでしょう。

+

+
mozIStorageConnection openUnsharedDatabase(
+  in nsIFile aDatabaseFile
+);
+
+
引数
+
+
+ aDatabaseFile
+
+ データベースとして開くためのnsIFileオブジェクト
+
+
戻り値
+

開かれたデータベース接続であるmozIStorageConnectionオブジェクト

+
例外
+
+
+ NS_ERROR_FAILURE
+
+ データベースを開こうとした際にエラーが起こった場合発生
+
+ NS_ERROR_FILE_CORRUPTED
+
+ データベースファイルが破損した場合、またはデータベースが(このメソッドでは対応していない)仮想テーブルを含む場合に発生
+
+ NS_ERROR_OUT_OF_MEMORY
+
+ 新しいストレージオブジェクトの割り当てが失敗した場合に発生
+
+

参照

+ +
+
+  
+
diff --git a/files/ja/orphaned/mozmill/index.html b/files/ja/orphaned/mozmill/index.html new file mode 100644 index 0000000000..8d143acee0 --- /dev/null +++ b/files/ja/orphaned/mozmill/index.html @@ -0,0 +1,47 @@ +--- +title: Mozmill +slug: Mozmill +tags: + - MozMill +--- +

MozMill はテストツールであり、Gecko ベースのアプリケーション (Firefox, Thunderbird, Songbird 等) の自動テストを書くためのフレームワークです。これは、拡張機能 としてビルドされており、IDE (integrated development environment) も含まれています。また、コマンドライン版のクライアントもあり、テストを書いたり実行したり、テストのデバッグの助けにもなります。MozMill には、ユーザとの対話をシミュレートする機能的なテストを書く助けとなる、大規模な API が用意されています。同様に、完全な ユニットテスト API もあります。

+

Mozmill テスト自動化プロジェクト は、2009 年 1 月に開始され、Firefox のための自動テスト作業をカバーしています。プロジェクトのページをご覧になるか、Mozmill Tests のドキュメントを見て、テスト書きへの貢献や MozMill テストの実行についてのイメージをつかんでください。既存のテストは、新しい Firefox のリリースのための リリーステストのサイクルで実行されます。

+

また、Mozilla Messaging チームには、MozMill による Thunderbird のテストを扱うアクティブなプロジェクトがあります。

+

インストール

+

Mozmill は、2 通りの異なる方法でインストールできます。多くの場合は、add-ons.mozilla.org からダウンロードできる Mozmill Extension をお勧めします。この拡張機能には統合された開発環境といくつかのオーサリングツール、テストを実行するためのグラフィカルなインタフェースが含まれています。再起動テストとオペレーティングシステムの対話に興味のある上級ユーザには、python pip (or setuptools) パッケージインストーラを使用した コマンドライン版のクライアント のインストールをお勧めします。

+

拡張機能版

+

拡張機能版をインストールするには、アドオンマネージャの "アドオンを入手" タブを開いて Mozmill を検索し、インストールするだけです。addons.mozilla.org の Web サイトから直接インストールすることもできます。アプリケーションを再起動してインストールを完了してください。

+

コマンドライン版のクライアント

+

コマンドライン版の MozMill をインストールするには、さらにいくつかの手順が必要になります。この手順はオペレーティングシステムにより多少異なります。

+

Windows

+

MozMill の前に、MozillaBuildSetup パッケージをシステムにインストールしてください。このパッケージの 最新ビルドを入手し、手動でインストールしてください。l10n.bat ファイルを実行した後、MozMill コマンドライン版のクライアントをインストールしてください。

+
$ easy_install pip
+$ pip install mozmill
+$ pip install mercurial     (Visual Studio がインストールされていない環境では、この レジストリファイル をダウンロードして適用し、MozMill のバイナリパッケージ を手動でインストール (setup ファイルまたは setup.cmd をコマンドプロンプトで実行) してください。)
+
+

Mac OS X

+

Mac OS X 10.4 の環境の場合は、先に python.org から Python 2.5 以降のバージョンをダウンロードしてインストールする必要があります。その後、MozMill を setuptools でインストールしてください。

+
$ curl -O http://peak.telecommunity.com/dist/ez_setup.py
+$ sudo python ez_setup.py
+$ sudo easy_install pip
+$ sudo pip install mozmill mercurial
+
+

Ubuntu

+

MozMill を Ubuntu にインストールするには、ターミナルで次の 2 つのコマンドを実行するだけです:

+
$ sudo apt-get install python-pip python-dev
+$ sudo pip install mozmill mercurial
+

MozMill の更新

+

MozMill を拡張機能としてインストールした場合は、新しいバージョンがリリースされた時に、アプリケーションから自動的に通知されます。コマンドライン版のクライアントを更新するには、次のコマンドを実行してください (sudo は Windows 環境では不要です):

+
$ sudo pip install --upgrade mozmill
+
+

さらに読むべきもの

+

他にも、いくつかの MozMill の概要を説明するページがあります。後で参照するため、これらのページをブックマークに追加しておくと良いでしょう。

+ +

リファレンスデスク

+ +

バグ

+

Mozmill は、Mozilla プロジェクト内の多くのテストシステムと同様に、開発段階にあります。バグを見つけたときは、既知のバグ のリストですでに報告されていないか確認してください。まだ報告されていない場合は、"Testing" の製品カテゴリの "Mozmill" コンポーネント下に 新たなバグとして報告してください。バグ報告の際は、バグを再現するためのできるだけ詳細な情報と MozMill のテストを添付してください。よろしくお願いします！

+

{{ languages( { "en": "en/Mozmill" } ) }}

+
diff --git a/files/ja/orphaned/my_chrome_oven/index.html b/files/ja/orphaned/my_chrome_oven/index.html new file mode 100644 index 0000000000..4e24f2512a --- /dev/null +++ b/files/ja/orphaned/my_chrome_oven/index.html @@ -0,0 +1,5 @@ +--- +title: My Chrome Oven +slug: My_Chrome_Oven +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/new_in_javascript_1.8/index.html b/files/ja/orphaned/new_in_javascript_1.8/index.html new file mode 100644 index 0000000000..f8eb147290 --- /dev/null +++ b/files/ja/orphaned/new_in_javascript_1.8/index.html @@ -0,0 +1,94 @@ +--- +title: New in JavaScript 1.8 +slug: New_in_JavaScript_1.8 +tags: + - JavaScript + - JavaScript_version_overviews +--- +
+ {{Fx_minversion_header(3)}}
+

JavaScript 1.8 は（Firefox 3 に組み込まれている） Gecko 1.9 の一部分です。これは JavaScript 1.7 よりは大きな更新ではありませんが、ECMAScript 4/JavaScript 2 の進歩に追随するための更新がいくつか含まれています。このリリースは JavaScript 1.6 および JavaScript 1.7 で仕様化された新機能の全てを含んでいます。

+

JavaScript 1.8 の開発状況を追うためには、{{Bug(380236)}} を参照してください。この文書の地位については {{Bug(421027)}} を参照してください。

+
+ {{英語版章題("Using JavaScript 1.8")}}
+

JavaScript 1.8 の使用

+

JavaScript 1.8 のいくつかの新機能を HTML で使用するためには、以下のようにしてください:

+
<script type="application/javascript;version=1.8"> ... あなたのコード ... </script>
+

もう 1 つの（推奨されない）方法として、<script> の非推奨の language 属性を使い、"JavaScript1.8" と定義することでもできます。

+

JavaScript shell や JavaScript XPCOM コンポーネント、XUL の <script> 要素を使うときは、JS の最新バージョン（Mozilla 1.9 では JS1.8）が自動的に使われます（{{Bug(381031)}}, {{Bug(385159)}}）。

+

新たなキーワードである "yield" と "let" を使う必要がある機能は、バージョン 1.7 以上を指定しなければなりません。 なぜなら、既存のコードがそれらのキーワードを変数や関数の名前として使っているかもしれないからです。新しいキーワードを導入していない機能（例えばジェネレータ式）は、JavaScript のバージョンを指定することなく使うことができます。

+
+ {{英語版章題("Expression Closures")}}
+

式クロージャ

+

この追加機能は、典型的な ラムダ記法（日本語版）に似た表現を与える、単純な関数を書くための簡略表現に過ぎません。

+

JavaScript 1.7 以前:

+
function(x) { return x * x; }
+

JavaScript 1.8:

+
function(x) x * x
+

この構文を使うことによって、中括弧と 'return' 文を省くことができます（それらは暗黙的に補われます）。この方式でコードを書くことには、コードを構文的に短くするメリットしかありません。

+

例:

+

イベントリスナーを渡す簡略表現:

+
document.addEventListener("click", function() false, true);
+

JavaScript 1.6 からの array のメソッドである some とともにこの記法を使うと:

+
elems.some(function(elem) elem.type == "text");
+
+ {{英語版章題("Generator Expressions")}}
+

ジェネレータ式

+

この追加により、ジェネレータ（JavaScript 1.7 で導入されたものです）を簡単に作成することが可能になります。ジェネレータを生成するには、通常は内部に yield を含むカスタム関数を作成しなければなりませんでしたが、この追加により、配列内包に似た構文を使って同じ性質のジェネレータ文を作成することができるようになります。

+

JavaScript 1.7 では、あるオブジェクトのためのカスタムジェネレータを作成するために、以下のようなものを書くことでしょう:

+
function add3(obj) {
+  for ( let i in obj )
+    yield i + 3;
+}
+
+let it = add3(someObj);
+
+try {
+  while (true) {
+    document.write(it.next() + "<br>\n");
+  }
+} catch (err if err instanceof StopIteration) {
+  document.write("End of record.<br>\n");
+}
+
+

JavaScript 1.8 では、ジェネレータ式を代わりに使うことで、カスタムジェネレータ関数を作成する必要性が無くなります:

+
let it = (i + 3 for (i in someObj));
+
+try {
+  while (true) {
+    document.write(it.next() + "<br>\n");
+  }
+} catch (err if err instanceof StopIteration) {
+  document.write("End of record.<br>\n");
+}
+
+

ジェネレータ式は、関数に値として渡すこともできます。これは配列があらかじめ生成される典型的な配列内包の場合と違って、本当に必要とされるまでジェネレータが実行されないので、特に注目に値します。その違いの例を挙げます:

+

JavaScript 1.7 の配列内包を使った場合

+
handleResults([ i for ( i in obj ) if ( i > 3 ) ]);
+
+function handleResults( results ) {
+  for ( let i in results )
+    // ...
+}
+
+

JavaScript 1.8 のジェネレータ式を使った場合

+
handleResults( i for ( i in obj ) if ( i > 3 ) );
+
+function handleResults( results ) {
+  for ( let i in results )
+    // ...
+}
+
+

この 2 つの例の大きな違いは、配列内包を使った場合には配列を内包するときと繰り返し処理を行うときの 2 度 "obj" 構造に対してループが実行されるのに対して、ジェネレータ式を使った場合には 1 度しかループが実行されずに済むという点です。

+
+ {{英語版章題("More Array Extras")}}
+

さらなる Array の拡張

+

JavaScript 1.8 では、 Array オブジェクトに 2 つの新しい繰り返しのメソッドが導入されました:

+ +
+ {{英語版章題("Changes in destructuring for..in")}}
+

for..in の分配方法の変更

+

JavaScript 1.8 のリリースで生じた変更に、JavaScript 1.7 で導入された配列のキー/値の組への分割代入に関連するバグ修正があります。これまでは for ( var [key, value] in array ) を使うことで、配列のキー/値の組を分割代入することができました。しかしこのせいで、配列の配列において値を分割代入することが不可能になっていました。現在この問題は解決しています。({{Bug("366941")}})

diff --git a/files/ja/orphaned/nsidomhtmlmediaelement/index.html b/files/ja/orphaned/nsidomhtmlmediaelement/index.html new file mode 100644 index 0000000000..34450a8b9b --- /dev/null +++ b/files/ja/orphaned/nsidomhtmlmediaelement/index.html @@ -0,0 +1,345 @@ +--- +title: nsIDOMHTMLMediaElement +slug: NsIDOMHTMLMediaElement +--- +

+ +

nsIDOMHTMLMediaElement インターフェースは HTML 5 における audio および video 要素の実装に用いられています。

+ +
注意: cue ranges 機能の仕様は現在流動的な状況にあり、 HTML 5 標準においては大幅に改訂が加えられるか、置き換えられてしまう可能性があります。そのため、現時点では Firefox ではこの機能に対応していません。
+ +

+
dom/public/idl/html/nsIDOMHTMLMediaElement.idlScriptable
+ + +Please add a summary to this article. + + +
+  +最終更新: Gecko 1.9.1 (Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)
+

+ +

Inherits from: nsIDOMHTMLElement

+ +

メソッド概要 (Method Overview)

+ + + + + + + + + + + + + + + + + + + + + + +
void addCueRange(in DOMString className, in float start, in float end, in boolean pauseOnExit, in nsIDOMHTMLVoidCallback enterCallback, in nsIDOMHTMLVoidCallback exitCallback);
DOMString canPlayType(in DOMString type);
void load();
void pause();
void play();
void removeCueRanges(in DOMString className);
+ +

属性 (Attributes)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性型意味
autoplaybooleantrue if playback should automatically begin as soon as enough media is available to do so without interruption.
bufferedTimeRangesA static, normalized TimeRanges object describing the time ranges of the media that have been buffered.  Read only.  未実装
bufferedBytesByteRangesA static, normalized ByteRanges object describing the byte ranges of the media that have been buffered.  Read only.  未実装
bufferingRatefloatThe average number of bits per second for the current download over the past few seconds.  If there is no download in progress, this value is 0.0.  Read only.  未実装
bufferingThrottledbooleantrue if Firefox is intentionally throttling the bandwidth used by the download (such as when the download is paused), otherwise false. Read only.  未実装
controlsbooleantrue if user interface for controlling the media should be presented.
currentSrcDOMStringThe absolute URL of the chosen media resource (if, for example, the server selects a media file based on the resolution of the user's display), or an empty string if the networkState is EMPTY. Read only.
currentTimefloatThe current playback time, in seconds.  Setting this value will seek the media to the new time.
defaultPlaybackRatefloatThe default playback rate for the media.  The Ogg backend does not support this.  1.0 is "normal speed," values lower than 1.0 make the media play slower than normal, higher values make it play faster.  The value 0.0 is invalid and throws a NOT_SUPPORTED_ERR exception.
durationfloatThe length of the media in seconds, or zero if no media data is available.  If the media data is available but the length is unknown, this value is NaN.  If the media is streamed and has no predefined length, the value is Inf.  Read only.
endedbooleantrue if playback has finished.  Read only.
errornsIDOMHTMLMediaErrorThe media's error status.  Read only.
mutedbooleantrue if the audio is muted, otherwise false.
networkStateunsigned short +

The current state of the fetch of the media. Read only.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定数値意味
EMPTY0There is no data yet.  The readyState will also be HAVE_NOTHING.
LOADING1The media is loading.
LOADED_METADATA2The media's metadata has been loaded.
LOADED_FIRST_FRAME3The media's first frame has been loaded.
LOADED4The media has been fully loaded.
+
pausedbooleantrue if the media playback is currently paused.  Read only.
playbackRatefloatThe current rate at which the media is being played back.  This is used to implement user controls for fast forward, slow motion, and so forth.  The normal playback rate is multiplied by this value to obtain the current rate, so a value of 1.0 indicates normal speed.  Not supported by the Ogg backend.
readyStateunsigned short +

The media's current readiness state.  Read only.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定数値意味
HAVE_NOTHING0No information is available about the media resource.
HAVE_METADATA1Enough of the media resource has been retrieved that the metadata attributes are initialized.  Seeking will no longer raise an exception.
HAVE_SOME_DATA2Data for the current playback position is not available, but there is at least one playback position for which data is available.
HAVE_CURRENT_DATA3Data is available for the current playback position, but not enough to actually play more than one frame.
HAVE_FUTURE_DATA4Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).
HAVE_ENOUGH_DATA5Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.
+
seekingbooleantrue if the media is in the process of seeking to a new position, otherwise false. Read only.
srcDOMStringThe URL of the media to present.
totalBytesunsigned longThe length, in bytes, of the media resource.  If the length is unknown, or the content is streamed and therefore has no specified length, this value is 0.  Read only.
volumefloatThe current audio volume, from 0.0 (silent) to 1.0 (maximum).
+ +

メソッド (Methods)

+ +

addCueRange()

+ +
Note: This method is not yet implemented, as its definition is in flux in the HTML 5 standard.
+ +

Adds a cue range to the media element.

+ +
void addCueRange(
+  in DOMString className,
+  in float start,
+  in float end,
+  in boolean pauseOnExit,
+  in nsIDOMHTMLVoidCallback enterCallback,
+  in nsIDOMHTMLVoidCallback exitCallback
+);
+
+ +
Parameters
+ +

xxx

+ +

canPlayType()

+ +

Determines whether or not the specified media type can be played back.

+ +
DOMString canPlayType(
+  in DOMString type
+);
+ +
Parameters
+ +
+
type
+
The media type to test for, such as "video/ogg".
+
+ +
Return value
+ + + +

Because media formats are complicated, and it's impossible to judge every possible detail from the type string, there is no such thing as 100% certain that the specified type can be played; the best you can do is "probably".

+ +

load()

+ +

Begins loading the media content from the server.

+ +
 void load();
+ +
Parameters
+ +

None.

+ +

pause()

+ +

Pauses the media playback.

+ +
 void pause();
+
+ +
Parameters
+ +

None.

+ +

play()

+ +

Begins playback of the media.

+ +
 void play();
+
+ +
Parameters
+ +

None.

+ +

removeCueRanges()

+ +
Note: This function is not yet implemented, as its definition in the HTML 5 standard is in flux.
+ +
void removeCueRanges(
+  in DOMString className
+);
+
+ +
Parameters
+ +

xxx

+ +

参考資料

+ + diff --git a/files/ja/orphaned/nsidynamiccontainer/index.html b/files/ja/orphaned/nsidynamiccontainer/index.html new file mode 100644 index 0000000000..ce38f086b4 --- /dev/null +++ b/files/ja/orphaned/nsidynamiccontainer/index.html @@ -0,0 +1,87 @@ +--- +title: nsIDynamicContainer +slug: nsIDynamicContainer +tags: + - Developing Mozilla + - Extensions + - Interfaces + - 'Interfaces:Scriptable' + - Places + - XPCOM + - XPCOM API Reference +--- +

nsIDynamicContainerインタフェースは一時的なコンテンツのコンテナを提供するベースクラスを提供します。この機能はコンテナがオープンされたタイミングで、ノードを直接満たすことができます。すべてのリザルトノードのプロパティをそれぞれのアイテムに関連したデータを保存するのに利用できます。（例えばディスク上でのフルパスなど)また、それぞれのコンテナに対してサービスに関連付けられた追加のコンテナを作成することができます。
+
+

+
toolkit/components/places/public/nsIDynamicContainer.idlScriptable
+ + +Please add a summary to this article. + + +
+  +最終更新: Gecko 1.9 (Firefox 3)
+

+

継承元: nsISupports

+


+ メソッドの概要

+

void onContainerNodeOpening(in nsINavHistoryContainerResultNode aContainer, in nsINavHistoryQueryOptions aOptions);
+ void onContainerNodeClosed(in nsINavHistoryContainerResultNode aContainer);
+ void onContainerRemoving(in long long aItemId);
+ void onContainerMoved(in long long aItemId, in long long aNewParent, in long aNewIndex);

+

メソッド

+

onContainerNodeOpening()

+

与えられたコンテナノードが新たにノードが作成されようとするときに呼ばれます。
+ 必要であればノードの作成を実行することができます。

+

註: 状態を保存したい場合は全てのリザルトノードはプロパティバッグをインプリメントします

+
void onContainerNodeOpening(
+  in nsINavHistoryContainerResultNode aContainer,
+  in nsINavHistoryQueryOptions aOptions
+);
+
+
引数
+
+
+ aContainer
+
+ これから開かれようとしているコンテナノード
+
+ aOptions
+
+ このクエリを生成するために使われるオプション。コンテナは可能ならばこれらに従います。もしクエリとフォルダノードをコンテナに追加しようとしている場合、実装は可能ならばこの値を使用しないといけません。この値を変更してはいけません。
+
+

onContainerNodeClosed()

+

与えられたコンテナがなくなるときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドが呼びだされることは保証されていません。具体的にはクエリがどこかへ行ってしまったときには呼ばれません。この現象はコンテナ自身がopen状態からclose状態へ遷移したときにのみ起こります。実際の処理ではかなり大量の動的に生成されたノードがこのメソッドをクリーンアップ処理のために呼び出します。

+
void onTainerNodeClosed(
+  in nsINavHistoryContainerResultNode aContainer
+);
+
+
引数
+
+
+ aContainer
+
+ hoge
+
+

onContainerRemoving()

+

与えられたコンテナがブックマークテーブルから削除されようとするときに呼ばれます。従って、必要なクリーンアップ処理を実行することができます。このメソッドはコンテナが削除される前に呼ばれます、従って処理では依然としてコンテナを参照することができます。

+
void onContainerRemoving(
+  in long long aItemId
+);
+
+
引数
+
+
+ aItemId
+
+ コンテナアイテムのアイテムID。
+
+

onContainerMoved()

+

与えられたコンテナが丁度移動されようとしているときに呼ばれます。bookkeepingを行う処理に備えて存在します。このメソッドはコンテナが移動された後に呼ばれます。

+

関連記事

+ diff --git a/files/ja/orphaned/participating_in_the_mozilla_project/index.html b/files/ja/orphaned/participating_in_the_mozilla_project/index.html new file mode 100644 index 0000000000..608cb6f2f3 --- /dev/null +++ b/files/ja/orphaned/participating_in_the_mozilla_project/index.html @@ -0,0 +1,12 @@ +--- +title: Mozilla プロジェクトに参加する +slug: Participating_in_the_Mozilla_project +--- +

もしあなたが Mozilla プラットフォームに関連するコードでのバグの修正やその他の仕事を手伝うことに興味があるのなら、あなたに適切な方向を指し示すであろう文書がここで見つけられます。

+ +

ドキュメンテーショントピックス

+
Mozilla 開発者ガイド
Mozilla のコードベースに貢献するための開発 Tips とガイド。
Mozilla ソースコード
ダウンロードもしくはバージョン管理システムを通してMozilla のコードを手に入れる方法とあなたのコードをツリーに入れる方法についての情報。
ビルドに関するドキュメンテーション
Firefox と Thunderbird を含む、Mozilla プロジェクトのビルド方法についての情報。このページは内容の整理を必要としています。
Mozilla プラットフォーム
Mozilla プラットフォームについての情報。その API 群と技術のすべて、そして、あなた自身のプロジェクトでそれらを利用する方法など。
Mozilla を文書化する
Mozilla のためおよび開かれた Web のために私たちのドキュメンテーションの作成と改善に協力してください。
デバッグ
Mozilla のコードをデバッグするときに従うべき、役に立つTips とガイドライン。
品質保証（QA)
テストおよびバグトラッキングについての情報。
ローカライゼーション
Mozilla プロジェクトやドキュメンテーションなどを複数の言語に翻訳することに関する情報。
+

ツール

+
Bugzilla
Mozilla プロジェクトのための問題を追跡するために使われている Bugzilla データベース。
MXR
Web 上で Mozilla のソースコードレポジトリをブラウズ、検索できます。
Bonsai
Bonsai ツールを使えば、レポジトリ上のどのファイルを誰が変更し、そして、いつそれがなされたのかを見つけられます。
Tinderbox
Tinderbox はツリーのステータス（現在ビルドが成功しているかどうか）を示します。作業ツリーでの作業を確実にするために、チェックインとチェックアウトの前にチェックしてください。
クラッシュトラッキング
Socorro および Talkback クラッシュ報告システムについての情報。
パフォーマンストラッキング
Mozilla プロジェクトのパフォーマンス情報が見られます。
開発者フォーラム
Mozilla の開発上の問題について話すことができるディスカッションフォーラムのトピック別リスト。
+
+

 {{ languages( { "en": "en/Participating_in_the_Mozilla_project"} ) }}

diff --git a/files/ja/orphaned/reftest_opportunities_files/index.html b/files/ja/orphaned/reftest_opportunities_files/index.html new file mode 100644 index 0000000000..222ebff05c --- /dev/null +++ b/files/ja/orphaned/reftest_opportunities_files/index.html @@ -0,0 +1,2245 @@ +--- +title: reftest opportunities files +slug: reftest_opportunities_files +tags: + - Automated testing + - Developing Mozilla +--- +

Introduction

+

reftest に便利かもしれない Mozilla のソース内のファイルです。それぞれのファイルがチェックインされた理由は常に明白ではありませんが、チェックされるなんらかの必要が推測されます。これらの多くは レイアウトリグレッション テストツールでチェックされました。そのテストツールは使うには難しく書かれ、一見エラーではなかった大量のリグレッションを報告しました +

あなたがこれらのページの 1 つの HTML を考察でき、同じ視覚的な出力を手に入れる方法がわかるなら、reftest する明確なチャンスです。 例えば、何らかの HTML が予期されない場所にあり、無視されるべきなら、私たちは追加のマークアップがない HTML ファイルに対して適応させることができます {{ 訳注("For example, if some HTML is in an unexpected place and is supposed to be ignored, then we can match against an html file that is missing that extra mark-up.") }}。他の場合では、リファレンスページのデザインはより緻密になるかもしれません。 +

このリストの中のファイルを指摘し、出力を比較するのに使う HTML リファレンスを添付できるなら、さしあたり、Bugzilla の Core プロダクトの Testing コンポーネントにバグを作ってください。疑問がありましたら、news.mozilla.org の mozilla.dev.quality ニューズグループ (Google Groups で見る)へ投稿してください。 +

+

dbaron のテスト

+ +

Mozilla のソースツリーのテスト

+ diff --git a/files/ja/orphaned/setting_up_extension_development_environment/index.html b/files/ja/orphaned/setting_up_extension_development_environment/index.html new file mode 100644 index 0000000000..0a8c89a122 --- /dev/null +++ b/files/ja/orphaned/setting_up_extension_development_environment/index.html @@ -0,0 +1,56 @@ +--- +title: Setting up extension development environment +slug: Setting_up_extension_development_environment +tags: + - Add-ons + - Extensions +--- +

この記事では、あなたの Mozilla アプリケーションにおいて拡張機能の開発を容易にするためのノウハウを提案します。

+

{{ 英語版章題("Development preferences") }}

+

開発用の設定

+

これらの設定はパフォーマンスの低下と引き換えにデバッグを簡単にします。

+

設定を変更するための情報は 設定ファイルの編集 を参照して下さい。これらの設定の中にはデフォルトで about:config にリストアップされていないものもあり、新しい (真偽値) エントリを作成しなければならない場合があるので注意して下さい。

+

これらの変更を行う前に、下記の「開発用のプロファイル」を参考にして別個の開発用プロファイルを作成してください。

+ +

{{ 英語版章題("Development extensions") }}

+

開発のための拡張機能

+

これらの拡張機能はあなたの開発の手助けとなるでしょう。

+ +

{{ 英語版章題("Development profile") }}

+

開発用のプロファイル

+

開発用の設定や開発用の拡張機能によるパフォーマンスの低下や、個人データの漏洩を防ぐためには、開発作業のための別個のプロファイルを作成するのがいいでしょう。

+

-no-remote パラメータを付けて Firefox を起動すると、別々のプロファイルを使った二つの Firefox インスタンスを起動させることが出来ます。例えば、次のコマンドを使うことで、「通常の」 Firefox がすでに起動しているかどうかに関わらず、開発用のプロファイルで Firefox を起動させることが出来ます。 (あなたの開発用プロファイルの名前が "dev" であると仮定しています)

+
start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+
+

既定のプロファイルで Firefox を起動させるには、通常どおり "firefox" または "firefox -P default" を実行します。

+

{{ 英語版章題("Custom code location") }}

+

コード置き場の変更

+

変更を加えるたびに拡張機能を何度も再インストールしたり、アンインストールの際に誤ってソースファイルを削除してしまうのを防ぐために、ソースファイルをプロファイルの外の任意の場所に置く事が出来ます。

+
    +
  1. 拡張機能に含まれる install.rdf から拡張機能の ID を見つける
    2. +
  2. プロファイルディレクトリ/extensions/ に、ファイル名をその ID にしたファイルを作成する (例: `your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}`) (http://kb.mozillazine.org/Profile_folder プロファイルディレクトリの場所])
    3. +
  3. そのファイルの内容に install.rdf ファイルを格納するフォルダへのパスを書き込む (例: `/full/path/to/yourExtension` Windows ユーザはスラッシュではなくバックスラッシュを使ってください。 例: `\full\path\to\yourExtension`)
    4. +
  4. ファイルをプロファイルの extensions フォルダに置いて、アプリケーションを再起動する
    5. +
+

{{ 英語版章題("Using directories rather than JARs") }}

+

JAR ファイルの代わりにディレクトリを使用

+

拡張機能の chrome を JAR ファイルとディレクトリのどちらにパッケージングするかは自由ですが、ディレクトリを使った方が開発は簡単です。リリースする時のために JAR 構造を選んだとしても、chrome.manifest ファイルを編集すればディレクトリ構造で開発することが出来ます。例えばこうなっているのを

+
content	myExtension	jar:chrome/myExtension.jar!/content/
+
+

こうします。

+
content	myExtension	chrome/content/
+
diff --git a/files/ja/orphaned/the_importance_of_correct_html_commenting/index.html b/files/ja/orphaned/the_importance_of_correct_html_commenting/index.html new file mode 100644 index 0000000000..333ddbb0a0 --- /dev/null +++ b/files/ja/orphaned/the_importance_of_correct_html_commenting/index.html @@ -0,0 +1,75 @@ +--- +title: The Importance of Correct HTML Commenting +slug: The_Importance_of_Correct_HTML_Commenting +tags: + - HTML +--- +

HTML を 標準モード で記述する場合、不正確に書かれたコメントによってページの表示が崩れ、コンテンツの一部または全体がコメントアウトされた状態になってしまいます。XHTML や XML を記述する場合、不正確なコメントが含まれると、ドキュメントそのものが表示できなくなります。

+ +

HTML 4.01

+ +

W3C HTML 4.01 Recommendation Section 3.2.4 - Comments より引用:

+ +
マークアップ宣言の開始区切り文字 ("<!") とコメント開始区切り文字 ("--") の間に空白を含むことはできませんが、コメント終了区切り文字 ("--") とマークアップ宣言の終了区切り文字 (">") の間に含めることはできます。一般的な間違いとして、ハイフンの連続 ("---") をコメント内に含んでしまうことがあります。ページ作者は、コメント内に 2 つ以上の連続するハイフンを含めないよう注意すべきです。
+ +

例

+ +

以下のコメントは HTML では適切なコメントです。

+ +
<!-- valid html comment -->
+<!-- valid html comment -- >
+
+ +

以下のコメントは HTML では不適切なコメントです。

+ +
<!-- invalid -- html comment -->
+
+ +

XML

+ +

W3C XML 1.0 Recommendation Section 2.5 - Comments より:

+ +
定義: コメントは、ドキュメント内で他のマークアップの外側のどの箇所にも出現することができます。さらに、文法によって許可されている場所であれば、ドキュメントタイプ宣言の内部に出現することも可能です。コメントはドキュメントの文字データには含まれません。XML プロセッサは、アプリケーションがコメント内のテキストを取得できるようにする場合がありますが、それは必須ではありません。互換性のため、文字列 "--" (二重ハイフン) をコメント内に含めることはできません。パラメータ実体参照はコメント内では認識されるべきではありません。 + +
[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->'
+
+
+ +

XML におけるコメントの文法に書かれている通り、コメントは以下のような形式になります。

+ +
<!-- characters excluding adjacent dashes -->
+
+ +

例

+ +

以下のコメントは XML および XHTML では適切なコメントです。

+ +
<!-- valid xml/xhtml comment -->
+
+ +

以下のコメントは XML および XHTML では不適切なコメントです。

+ +
<!-- invalid -- xml comment -->
+<!-- invalid xml comment --->
+<!-- invalid xml comment -- >
+
+ +

参考資料

+ + + +
+

原文書の情報

+ +
    +
  • 最終更新日: May 19th, 2003
    • +
  • 著作権: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
+
+ +
 
diff --git a/files/ja/orphaned/toolkit_api/official_references/index.html b/files/ja/orphaned/toolkit_api/official_references/index.html new file mode 100644 index 0000000000..b70888bdb4 --- /dev/null +++ b/files/ja/orphaned/toolkit_api/official_references/index.html @@ -0,0 +1,15 @@ +--- +title: Official References +slug: Toolkit_API/Official_References +tags: + - Toolkit API +--- +

Official References. Do not add to this list without contacting Benjamin Smedberg. Note that this page is included from the pages listed below. So: Don't Add Breadcrumbs! +

+ diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html new file mode 100644 index 0000000000..1ed0f6d538 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/dom_inspector_faq/index.html @@ -0,0 +1,44 @@ +--- +title: DOM Inspector FAQ +slug: DOM_Inspector_FAQ +tags: + - DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector/DOM_Inspector_FAQ +--- +
{{ToolsSidebar}}

Web サイトを調べるには？

+ +

Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の {{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('URL を Inspect') }} を選びます。開いている XUL ウィンドウを調べたいのであれば、{{ mediawiki.external('ファイル') }} メニューから {{ mediawiki.external('ウィンドウを Inspect') }} を選びます。

+ +

ドキュメントの DOM ノードビューで一部のノードが赤色表示されるのはなぜ？

+ +

これらのノードは 無名コンテントノード であり、元のドキュメントによって生成されて DOM にあるものではないのです。

+ +

なるほど。では、これらの無名ノードを表示したくない場合はどうすればいいのでしょう？

+ +

{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('無名コンテントを表示') }} からチェックを外せば Inspector の中で無名ノードを隠せます。

+ +

元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？ どうして存在して、どうすれば取り除けるのでしょう？

+ +

これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は {{ Bug(26179) }} で行われています。

+ +

都合の良いことに、{{ mediawiki.external('表示') }} メニューの {{ mediawiki.external('ホワイトスペースノードを表示') }} からチェックを外せば、Inspector の中でこれらの ホワイトスペースノード を隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の white-space プロパティの値で制限しているノードが隠されることはありません。

+ +

DOM ツリー中の特定のノードを探すのが大変です。ツリー中を探す以外にもっと手早くできる方法はありませんか？

+ +

ご心配なく。ノード名、ID、あるいは属性と値の組み合わせで検索できます。検索したいドキュメントを調べている Inspector ウィンドウの {{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('ノードを検索') }} を選んで検索条件を入力すればよいのです。

+ +

ノードについて何も分かっていないなら、それをクリックして選択してみることもできます。そのノードをビューの中に表示させておいて、{{ mediawiki.external('検索') }} メニューから {{ mediawiki.external('クリックで要素を選択') }} を選び、それから調べたい要素をクリックするのです。

+ +
+

原文書の情報

+ +
    +
  • 著者: Christopher Aillon
    • +
  • 最終更新日: November 11, 2003
    • +
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細
    • +
+
+ +
 
+ +

{{ languages( { "en": "en/DOM_Inspector_FAQ" } ) }}

diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..24db8f727c --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,69 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +tags: + - DOM + - 'DOM:Tools' + - DOM_Inspector + - Extensions + - 'Extensions:Tools' + - Themes + - 'Themes:Tools' + - Tools + - Web Development + - 'Web Development:Tools' + - XUL + - 'XUL:Tools' +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

DOM Inspector（別名 DOMi）は、文書（普通はウェブページまたは XUL ウィンドウ）の Document Object Model を調査、ブラウズ、編集することができる開発ツールです。ドキュメントとその中のすべてのノードを様々な視点から見ることができる二分割ウィンドウを用いて DOM の階層を探索することができます。

+ +
+

このツールは Firefox や Thunderbird のような XUL ベースのアプリケーションのためのアドオンです。 Firefox の中に組み込まれた DOM インスペクターについては、 Page Inspector のドキュメントをご覧ください。

+
+ +

ドキュメンテーション

+ +
+
DOM Inspector 入門
+
DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。
+
+ +
+
DOM Inspector FAQ
+
DOM Inspector に関するよくある質問への解答です。
+
+ +
+
MozillaZine の DOM Inspector ページ (英語)
+
DOM Inspector に関するさらなる情報が載っています。
+
DOM Inspector をビルドするには (英語)
+
ソースファイルから DOM Inspector をビルドするブログの投稿です。
+
+ +

DOM Inspector の入手

+ +
+
Firefox と Thunderbird
+
DOM Inspector は AMO のウェブサイトからダウンロードしてインストールできます。（AMO を Firefox で閲覧している Thunderbird のユーザーはインストールのリンクを保存するか、 DOM Inspector for Thunderbird のページに移動してください。）
+
+ +
+
Thunderbird 2
+
DOM Inspector for Thunderbird 2 が Thunderbird Add-ons から利用できます。または、以下のオプションで自分自身で Thunderbird をビルドしてください。
+
+ +
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite と SeaMonkey
+
{{ mediawiki.external('ツール') }} メニューから {{ mediawiki.external('Web 開発') }} > {{ mediawiki.external('DOM Inspector') }} を選択してください。{{ mediawiki.external('編集') }} > {{ mediawiki.external('設定') }} > {{ mediawiki.external('詳細') }} > {{ mediawiki.external('DOM Inspector') }} でサイドバーパネルをインストールすれば、インスペクタパネルを開いたまま Web サイトを訪れるだけで DOM を検査できます。
+
+ +

DOM Inspector のバグを報告する

+ +

便利なように、Bugzilla の "DOM Inspector" と名付けられたコンポーネントを使用してください。

+ +

そこにいる DOM Inspector のコード を知っている人を探すには、 DOM Inspector module listing 参照してください。

diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html new file mode 100644 index 0000000000..c67e458229 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/internals/index.html @@ -0,0 +1,245 @@ +--- +title: DOM インスペクタの内部構造 +slug: DOM_Inspector/Internals +tags: + - コード + - ソース + - ツール + - 組織 +translation_of: Tools/Add-ons/DOM_Inspector/Internals +--- +
{{ToolsSidebar}}
+ +

DOMインスペクタには3つの主要な面があります。 あなたが最も慣れ親しんでいるのは、inspector.xulベースの主UIです。これは、DOM Inspectorが明示的にサポートしているアプリケーション（オーバーレイを介して配置されたメニューアイテム）からCtrl + Shift + I（またはCmd + Shift + I）を押すと表示される2ペインのインスペクタです。

+ +

DOM Inspector primary UI inspecting browser.xul

+ +

DOMインスペクタのプライマリUIに加えて、若干異なる（オブジェクトインスペクタとSeaMonkeyで使用されるDOMインスペクタのサイドバー）2つのトップレベルのインスペクタがあります。最初に、inspector.xulとそのエントリポイントに焦点を当て、後でこれらの他のインスペクタがどのように異なるかを説明するために焦点を絞ります。

+ +

高水準の観点からのDOMインスペクタ

+ +

DOMインスペクタのプライマリUIは、いくつかのツールバーとパネルセットで構成されています。パネルセットには2つのパネルが含まれています。 一方のパネルは検査された文書の変更に反応し、他方のパネルは第1パネルの選択の変化に反応する。これらはそれぞれドキュメントパネルとオブジェクトパネルです。（内部的には、パネルは「ペイン」と呼ばれることがありますが、パネルセットは常に「パネルセット」と呼ばれます）。

+ +

パネルの目的は利用可能なビューアを管理することです。各パネルの上部には、ビューアリストから表示するビューア、現在アクティブなビューアの名前を表示するラベル、ビューア固有のコマンドを発行するための別のメニューボタンを選択できるメニューボタンが含まれているツールバーがあります 。

+ +

ビューアは動的にロードされます。 パネルをあるビューアから別のビューアに切り替えると、古いビューアが破棄され、新しいビューアがその場所にロードされます。このようにして、パネルセットとパネルはフレームセットとフレームのように機能します。各パネルには実際には匿名のbrowserが含まれており、個々のビューアはブラウザに読み込まれた別々のドキュメントに存在するため、この比較は非常に適切です。 この分離により、視聴者はXUL、CSS、またはJSの衝突を心配することなく、ビューアのXULを独自のドキュメントで定義し、独自のスコープでロードすることができます。 これのもう1つの便利な結果は、適切に設定された開発プロファイルを使用すると、現在のビューアから戻って戻るだけで、開発の変更の影響をほとんど見ることができるということです。

+ +

ビューアが書かれている方法についてこれを知っているので、私たちはDOMインスペクタのソースがどのように整理されているかを見ることができます。

+ +

ソースコードの構成

+ +

DOM インスペクタリポジトリの最上位ディレクトリの内容は次のようになります

+ + + +

ほとんどすべての興味深いものは resources/content/ にあります。その内容は次のようになります。

+ + + +

オーバーレイ

+ +

オーバーレイがたくさんあることに気付くでしょう。 いくつかのオーバーレイは、ホスト統合オーバーレイとして記述することも、共有構造オーバーレイとして記述することもできます。

+ +

ホスト統合オーバーレイ

+ +

DOM Inspectorは汎用の拡張機能であり、Mozillaツールキットホストアプリケーションでの使用に適しています。 しかし、DOM Inspectorをホストアプリケーションで使用するには、メニュー項目やCtrl + Shift + I（またはCmd + Shiftなどの省略可能なキーボードショートカットなど）でDOM Inspectorを起動する方法が必要です + I）。 ホストアプリケーションはこれらの機能を提供する必要があります（通常、DOM Inspectorにはアプリケーションもバンドルされています）。または、DOM Inspectorは、ホスト統合オーバーレイで独自のメニュー項目とキーボードショートカットを提供することによって明示的にサポートする必要があります。

+ +

DOM インスペクタは、独自のホスト統合オーバーレイを提供することにより、いくつかのMozillaプロジェクトアプリケーションを明示的にサポートしています。 これらのオーバーレイは次のとおりです。

+ + + +

chrome manifest をさらに調べると、DOM インスペクタはそのプライマリウィンドウで条件付きオーバーレイも使用することがわかります。

+ +
overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utilityOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
+overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
+
+ +
overlay chrome://inspector/content/inspector.xul chrome://browser/content/baseMenuOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+
+ +

これらのホスト提供のオーバーレイにより、DOM インスペクタはホストアプリケーションと同様のルックアンドフィールを採用することができます。(上記はそれぞれ SeaMonkey と Firefox)

+ +

resources/contents/ ディレクトリには、ホスト統合オーバーレイのカテゴリに該当しないオーバーレイがいくつかあります。これは、DOM インスペクタも共有オーバーレイを使用して独自のUIを構築するためです。

+ +

共有構造オーバーレイ

+ +

DOM インスペクタのメインのUIであるinspector.xulの内容を見てみると、目に見える要素はほとんどないことがわかります。この記事の執筆時点では、空のmenubarと空のtoolbarを含むtoolboxと、空のvboxがあります。

+ +
  <toolbox id="tbxInsToolbox">
+    <menubar id="mbrInspectorMain"/>
+    <toolbar id="tbInspectorPrimary"/>
+  </toolbox>
+
+  <vbox id="bxInspectorMain" flex="1"/>
+
+ +

ここで定義されているメニュー、ツールバー項目などはありません。key や commandset など、表示されない要素のほとんどは inspector.xul で定義されていません。これらは一連のオーバーレイから取り込まれ、DOMインスペクタの UI を定義する XUL を個別のユニットに編成することができます。inspector.xul 自体は主な DOM インスペクタウィンドウの基本的な構造とレイアウトを説明するスケルトンであり、ほとんどのコンテンツはオーバーレイによって追加されたままになっています。

+ +

モジュラーオーバーレイを使用すると、すべてのオーバーレイが複数のコンシューマによって共有されるわけではありませんが、一般的なXULをDOM インスペクタのUIを構成するさまざまなドキュメントで共有することもできます。単一コンシューマオーバレイは、組織専用です。

+ +

場合によっては、オーバーレイは他のオーバーレイによってオーバーレイされます。ホスト統合に使用されるオーバーレイを無視して、オーバーレイをオーバーレイするファイルにオーバーレイを子として接続することによって得られるツリー構造を想像すると、特定のファイルのホストに依存しないオーバーレイツリーを視覚化できます。inspector.xul用に拡張されたホストに依存しないオーバーレイツリーがあります：

+ + + +

(ビューアのサブディレクトリ (viewers/dom およびviewers/styleRules) からのオーバーレイは、オーバーレイされたファイル内の xul-overlay 処理命令を使用して明示的にインポートされるのではなく、DOM インスペクタのクロムマニフェストで overlay ディレクティブ の結果としてロードされることに注意してください。)

+ +
+
inspectorOverlay.xul
+
+

これは、依存関係を含む最上位のインスペクタが必要とするスクリプトをインポートします。 さらに、DOMインスペクタウィンドウの本体、つまり、パネルセット、ドキュメントおよびオブジェクトビューアパネル、およびドキュメントブラウザペインのコンテンツを定義します。 （ブラウザー・ペインは、文書およびオブジェクト・パネルが存在するという意味ではビューアー・パネルではなく、パネル・セットに関して上で定義したパネルの種類であり、ここでは「ペイン」がブラウザー・ペインに関して緩やかな意味で使用されています 一般的なUIフィクスチャについて説明します）。

+
+
toolboxOverlay.xul
+
+

このオーバーレイは、ツールバーのボタン、ロケーションバー、および「Inspect」ボタンを含むインスペクタツールボックスに表示されます。 toolboxOverlay.xulは、メニュー自体の内容を定義することなく、メニューバーの構造も定義します。

+
+
popupOverlay.xul
+
+

このオーバーレイは、メニューバーのメニューの静的構造の大部分を定義していますが、いくつかの例外があります。明らかな理由から、動的メニューの内容はここでは定義されていません。動的メニューには、[ファイル]メニューの[インスペクション]メニュー（[コンテンツドキュメントの検査]および[クロムドキュメントの検査]）ポップアップ、[表示]メニューの[ドキュメントビューア]および[オブジェクトビューア]メニューがあります。そのビューアのポップアップオーバーレイ（resources / content / viewer / dom / popupOverlay.xul）によって、DOMノードビューア（「Blink Selected Element」など）のみに影響を与える「表示」メニューの設定メニューが追加されます。 DOMメニュービューア以外の他のビューアはこれらの機能をサポートしていないので、[編集]メニューの[検索]メニューと[クリックして要素を選択]メニュー項目でも同じことが当てはまります。
+
+ 他の編集メニュー項目は、複数のビューアのコンテキストメニューでも使用されます。そのため、ここでは menuitems の ID だけが参照され、 editingOverlay.xul から完全な定義がインポートされます。コンテキストメニューにこれらのメニューアイテムの1つまたは複数を含むビューアは、同じプラクティスに従います。
+
+ インスペクタメニューに使用されるツールチップ（文書のタイトル（存在する場合）とそのメニューアイテムのURIを示すために使用されるもの）もここで定義されます。

+
+
commandOverlay.xul
+
外部 command 要素に委譲する popupOverlay.xul で提供されるメニュー項目には、ここで定義されたコマンドがあります。
+
keysetOverlay.xul
+
いくつかの popupOverlay.xul 提供のメニュー項目には、ここで定義された key があります。この記事の執筆時点では、編集メニュー項目に対応するキーはすべて正当な理由でeditingOverlayに存在します。
+
statusbarOverlay.xul
+
これは、DOM インスペクタのステータスバーの内容を定義します。 DOM インスペクタにはステータスバーがありませんので、これはまったく役に立たないものです。
+
diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html new file mode 100644 index 0000000000..8cbdc19ec0 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/introduction_to_dom_inspector/index.html @@ -0,0 +1,96 @@ +--- +title: DOMインスペクタのイントロダクション +slug: DOM_Inspector/Introduction_to_DOM_Inspector +tags: + - DOM インスペクタ +translation_of: Tools/Add-ons/DOM_Inspector/Introduction_to_DOM_Inspector +--- +
{{ToolsSidebar}}
+ +

DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の Tools > Web Development メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、DOMの状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。

+ +
メモ: Firefox 3以降、FirefoxではデフォルトでDOMインスペクタは含まれていません。MozillaアドオンWebサイトからダウンロードしてインストールする必要があります。
+ +

最初にDOM Inspectorを起動すると、Mozillaのメインブラウザのような2つのウィンドウのアプリケーションウィンドウが表示されます。 ブラウザと同様、DOMインスペクタにはアドレスバーと同じメニューがあります。 SeaMonkeyでは、追加のグローバルメニューが利用可能になります。

+ +

domi.png

+ +

ドキュメントの検査

+ +

DOMインスペクタが開くと、ホストアプリケーションに応じて関連付けられたドキュメントが読み込まれる場合と読み込まれない場合があります。 DOM インスペクタが自動的に文書を読み込んでいない場合や、検査したい文書以外の文書を読み込んでいない場合は、目的の文書をいくつか選択することができます。

+ +

コンテンツ文書の検査

+ +

Inspect Content DocumentのmenupopupはFileメニューからアクセスでき、現在ロードされているコンテンツドキュメントを一覧表示します。 FirefoxとSeaMonkeyブラウザでは、これらはタブで開いたWebページになります。ThunderbirdとSeaMonkey Mail and Newsでは、表示しているメッセージはここに表示されます。domi-inspect-content-popup.png

+ +

Chromeドキュメントの検査

+ +

Inspect Chromeドキュメントのmenupopupには[ファイル]メニューからアクセスでき、現在ロードされているChromeウィンドウとサブドキュメントのリストが表示されます。ブラウザウィンドウとDOMインスペクタはすでに開いてこのリストに表示されている可能性があります。DOMインスペクタは、開いているすべてのウィンドウを追跡します。そのため、DOMインスペクタで特定のウィンドウのDOMを検査するには、通常通りにそのウィンドウにアクセスし、動的に更新されるmenulistからタイトルを選択します。

+ +

domi-inspect-chrome-popup.png

+ +

任意のURLの検査

+ +

また、FileメニューのURL menuitemのInspectを使用するか、DOM InspectorのアドレスバーにURLを入力してInspectをクリックするかenterを押して、任意のURLのDOMを調べることもできます。 たとえば、アドレスバーにhttp://www.mozilla.orgを入力し、mozilla.orgホームページのDOM構造を確認できます。
+
+ このアプローチを使用してクロム文書を検査しないでください。 代わりに、ドキュメントが通常の手段でロードされていることを確認し、検査のためにInspect Chromeドキュメントのmenupopupを使用して選択します。

+ +

domi-inspect-chrome-popup.png

+ +

この方法でWebページを検査すると、DOM Inspectorウィンドウの下部にあるブラウザペインが開き、Webページが表示されます。 これにより、別のブラウザウィンドウを使用せずに、またはアプリケーションにブラウザをまったく埋め込まなくても、DOMインスペクタを使用することができます。 ブラウザペインに余分なスペースが必要な場合は、ブラウザペインを閉じることができますが、操作の視覚的な影響を監視することはできません。

+ +

DOM インスペクタの使用

+ +

興味のあるページまたはクロムのドキュメントを開くと、ドキュメントペインにDOMノードビューアがロードされ、オブジェクトペインにDOMノードビューアが読み込まれます。 DOM Nodesビューアには、DOMの構造化された階層的なビューが必要です。 ドキュメントペインをクリックすると、ビューアがリンクされていることがわかります。 DOMノードビューアから新しいノードを選択するたびに、DOMノードビューアが自動的に更新され、そのノードの情報が反映されます。 リンクされたビューアは、DOMインスペクタの使用方法を学ぶときに理解した最初の主要な側面です。

+ +

DOM インスペクタビューワー

+ +

これらのビューアは、DOMインスペクタが提供する2人の視聴者に過ぎないことに注意してください。他のビューアを使用することは可能ですが、今のところDOMノードビューアとDOMノードビューアの説明に固執します。
+
+ DOM InspectorのドキュメントペインにあるDOM Nodesビューアを使用して、興味のあるノードを見つけて調べることができます。これがあなたのウェブとアプリケーションの開発にもたらした最大かつ最も直接的な利点の1つは、ページの興味ある部分またはユーザインターフェースの部分が定義されているマークアップおよびノー​​ドを含む。 DOMインスペクタの一般的な使い方の1つは、ユーザインターフェイスで使用されている特定のアイコンの名前と場所を見つけることです。これは簡単な作業ではありません。クロムドキュメントを調べている場合、DOMノードビューアでノードを選択すると、それらのノードのレンダリングされたバージョンがユーザーインターフェイス自体で強調表示されます。 （DOM Inspector APIのフラッシャーが特定のプラットフォームで正しく機能しないようにするバグがあることに注意してください）。
+
+ たとえば、メインブラウザウィンドウを調べて、DOMノードビューアでノードを選択した場合（browser.xulにロードされているスクリプト要素の無限リストの場合のように、表示可能なUIを持たない要素を除く）、ブラウザインターフェイスのさまざまな部分が赤く点滅して強調表示されています。構造をトラバースして、DOMツリーの最上部の部分から、ユーザーが選択した検索エンジンを使用してクエリを実行できるようにする "search-go-button"アイコンなど、下位レベルのノードに移動できます。

+ +

domi-edit-search-onclick.png

+ +

ここで、「検索 - 移動 - ボタン」ノードのようなノードを選択すると、複数のビューアのいずれかを選択して、そのノードに関する情報をDOM Inspectorアプリケーションウィンドウのオブジェクトペインに表示できます。 menupopupはオブジェクトペインの左上隅からアクセスします。

+ +

domi-object-viewers.png

+ +

検索の実行アイコンを表示するためにファイルの実際の名前が使用されているかどうかを確認するには、このメニューからCSSルールビューアを選択して、適用されているさまざまなセレクタとルールを確認します。要素に検索アイコンを適用するルールは、クラス単純セレクタを使用し、list-style-imageプロパティを使用して現在のテーマのファイルを指し示します。
+
+ ビューアメニューから利用可能なビューアのリストは、DOMインスペクタの検査能力がどれだけ広範囲であるかを示しています。以下の説明は、これらの視聴者の概要を示しています。
+
+ DOMノードビューアには、ノードノードの属性、またはテキストノード、コメント、処理命令のテキストコンテンツが表示されます。属性とテキストの内容を編集することもできます。
+
+ Box Modelビューアは、配置とサイズを含むXULとHTML要素に関するさまざまな指標を提供します。
+
+ XBLバインディングビューアには、要素に添付されたXBLバインディングが一覧表示されます。バインディングが別のバインディングを拡張する場合、バインディングmenulistは、それらを「ルート」バインディングに降順でリストします。
+
+ CSSルールビューアには、ノードに適用されるCSSルールが表示されます。また、スタイルシートビューアと組み合わせて使用​​すると、CSSルールビューアには、そのスタイルシートから認識されたすべてのルールが順番にリストされます。プロパティを編集することもできます。擬似要素に適用されるルールは表示されません。
+
+ JavaScript Objectビューアは、オブジェクトペインのサブジェクトの階層ツリーを提供します。 JavaScriptオブジェクトビューアでは、コンテキストメニューで適切なメニュー項目を選択することによってJavaScriptを評価することもできます。

+ +

DOM ノードビューワーの基本的なアクション

+ +

クリックで要素を選択する

+ +

DOM インスペクタのもう一つの強力なインタラクティブな機能は、DOM インスペクタを開いてこの機能を有効にしたときに、Edit > Select Element をクリックして選択するか、DOM インスペクタアプリケーションの左上にある小さな虫めがねのアイコンをクリックすると、 ロードされたWebページのどこかをクリックするか、クロム文書を調べると、クリックした要素がDOMノードビューアのドキュメントペインに表示され、オブジェクトペインに表示されます。

+ +

DOM内のノードの検索

+ +

DOMを検査するもう1つの方法は、ID、クラス、または属性で興味のある特定の要素を検索することです。 Edit > Find Nodes... を選択するか Ctrl + F を押すと、DOM Inspectorには、さまざまな方法で要素を検索できる検索ダイアログが表示され、<F3> ショートカットキーを使用して段階的に検索します。

+ +

domi-find-appcontent.png

+ +

動的にDOMを更新する

+ +

この序論で言及するもう1つの機能は、DOM Inspectorが、Webページ、ユーザーインターフェイス、およびその他の要素についてDOMに反映された情報を動的に更新できることです。 DOM Inspectorが特定のノードまたはサブツリーに関する情報を表示すると、個々のノードとその値が表示されます（DOMでは、属性は通常、要素のサブノードです）。 これらの属性の値を編集できるメニュー項目があるコンテキストメニューと編集メニューから、このリスト内の個々の項目に対してアクションを実行できます。

+ +

domi-edit-search-onclick.png

+ +

このインタラクティビティを使用すると、ディスク上のファイルに定義されているDOMを実際に変更することなく、要素のサイズを縮小したり、サイズを変更したり、アイコンを変更したり、レイアウトを微調整したりすることができます。

+ +

Loving the Inspector

+ +

DOM インスペクタは何かを理解することができますが、慣れてくると、Webページやインタフェースのこれらの構造化されたビューは、自分のアプリケーション開発の欠点であったことに気付くかもしれません。DOM インスペクタは、ページに関するすべての情報を明確かつ構造化された方法で提示するだけでなく、それらの構造を見つけて更新する方法を提供し、 Mozilla ブラウザで既に利用可能なショートカットやメニューから簡単にアクセスできます。Venkman (JavaScriptデバッガ) などのMozillaツールと連携して使用されるDOM Inspectorは、WebページやDOMベースのアプリケーションインターフェイスの完全な表示を提供します。

diff --git a/files/ja/orphaned/tools/add-ons/index.html b/files/ja/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..9478dd0d88 --- /dev/null +++ b/files/ja/orphaned/tools/add-ons/index.html @@ -0,0 +1,18 @@ +--- +title: アドオン +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}
+ +

Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。

+ +
+
WebSocket Monitor
+
WebSocket接続でやりとりされるデータを調べます。
+
diff --git a/files/ja/orphaned/tools/css_coverage/index.html b/files/ja/orphaned/tools/css_coverage/index.html new file mode 100644 index 0000000000..cf45c2988e --- /dev/null +++ b/files/ja/orphaned/tools/css_coverage/index.html @@ -0,0 +1,149 @@ +--- +title: CSSカバレッジ +slug: Tools/CSS_Coverage +tags: + - Experimental + - Firefox + - ガイド + - ツール + - 初心者 +translation_of: Tools/CSS_Coverage +--- +

{{ToolsSidebar}}

+ +
+

この機能は実験的なもので、Firefoxではまだ利用できません。

+
+ +

CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。

+ +

これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。

+ +

それらが一般的に使用される方法は次のとおりです。

+ + + +

もう1つのコマンド("csscoverage oneshot")では、効果的に実行("csscoverage start; csscoverage stop")できます。

+ +

「使用」が意味するのは?

+ +

TL;DR:

+ +

CSSカバレッジは、以下の例のtag#id.classセレクタが一連のWebページに存在するかどうかを確認します。

+ +
@media thing {
+  tag#id.class:hover {
+    foo: bar;
+  }
+}
+ +

なぜ?

+ +

あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？

+ +
<style>
+  span:hover {
+    color: purple;
+  }
+</style>
+
+<span>Test</span>
+
+ +

技術的には span:hover は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また span:hover は明らかにページとの関連性があります。

+ +

同様に、あなたのCSSが次のものを持っているとします：

+ +
<style>
+  @media tv {
+    span {
+      color: purple;
+    }
+  }
+</style>
+
+<span>Test</span>
+
+ +

関連性を測定するには、テレビを自分の環境に接続する必要がありますか？

+ +

しかし、「使用」は関連性だけではありません...
+ 次のルールは適切ですか？

+ +
<style>
+  span { }
+</style>
+
+<span>Test</span>
+
+ +

ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。

+ +

しかし、次のものはどうでしょうか？

+ +
<style>
+  span {
+    -o-text-curl: minor;
+  }
+</style>
+
+<span>Test</span>
+
+ +

それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。

+ +

以下の例で div ルールが "used" とみなされる理由についても説明します。

+ +
<style>
+  div { color: red; }
+  span { color: blue; }
+</style>
+
+<div><span>Test</span></div>
+
+ +

div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：

+ +
<style>
+  div { color: red; border: none; }
+  span { color: blue; }
+</style>
+
+ +

ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。

+ +

明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。

+ +

警告

+ +

知っておくべきこと：

+ + + +

バグ

+ +

私たちはいくつかの重要なバグに取り組んでいます：

+ + + +

代替候補

+ +

Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。

+ + diff --git a/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html b/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html new file mode 100644 index 0000000000..b6ef21e414 --- /dev/null +++ b/files/ja/orphaned/tools/debugger/limitations_of_the_new_debugger/index.html @@ -0,0 +1,29 @@ +--- +title: 新しいデバッガーの制限事項 +slug: Tools/Debugger/Limitations_of_the_new_debugger +translation_of: Tools/Debugger/Limitations_of_the_new_debugger +--- +
{{ToolsSidebar}}

バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。

+ +

しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。

+ +

これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。

+ +

これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定すると、旧デバッガーに戻すことができます。

+ +

以下の機能は、新しいデバッガーでまったくサポートしていません。

+ + + +

検索機能 は部分的にサポートしています。ファイル名の検索やファイル内の文字列の検索 は可能です。しかし、以下の検索は未サポートです:

+ + diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html new file mode 100644 index 0000000000..88d3b0d7bb --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html @@ -0,0 +1,18 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints +--- +
{{ToolsSidebar}}
+ +

ブレークポイントを無効にするには、ソースリストペインでブレークポイントのエントリの横にあるチェックボックスをオフにします。

+ +

+ +

または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。

+ +

ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。

+ +

すべてのブレークポイントを無効/有効にするには、ソースリストペインで"Toggle all breakpoints"ボタンを使用します。

+ +

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html new file mode 100644 index 0000000000..573456e364 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html @@ -0,0 +1,32 @@ +--- +title: アドオンでデバッグにアクセスする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +
+

このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。

+
+ +

以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:

+ + + +

関連ファイル:

+ + + +

残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ 653545 をご覧ください)

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html new file mode 100644 index 0000000000..f16826cf46 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html @@ -0,0 +1,28 @@ +--- +title: ソースをブラックボックス化する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

+ +

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

+ +

+ +

開発ツールバー を開いて dbg blackbox コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:

+ +

+ +

ソースをブラックボックス化すると以下のようになります:

+ + diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html new file mode 100644 index 0000000000..706d844280 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html @@ -0,0 +1,22 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

+ +

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

+ +

+ +

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

+ +

イベントが発生すると、リスナーの始点でコードがブレークします。

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..bbd25b285e --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html @@ -0,0 +1,36 @@ +--- +title: eval ソースをデバッグする +slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。

+ +

これを行うために、//# sourceURL ディレクティブを使用してソースに名前をつけなければなりません:

+ +
var button = document.getElementById("clickme");
+button.addEventListener("click", evalFoo, false);
+
+var script = "function foo() {" +
+             "  console.log('called foo');" +
+             "}" +
+             "foo();//# sourceURL=my-foo.js";
+
+function evalFoo() {
+  eval(script);
+}
+ +

これは、スクリプトに "my-foo.js" という名前をつけます。

+ +

文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを 整形 できます:

+ +

{{EmbedYouTube("nFm8F8Anmic")}}

+ +

ソースにつけた名前は、ウェブコンソール に現れるスタックトレースでも表示されます。

+ +

また、無名の eval ソース内にある debugger; 文でもデバッガーが停止します。

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..73595678bf --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html @@ -0,0 +1,22 @@ +--- +title: ブレークポイントの無効化 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:

+ +

+ +

または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。

+ +

ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。

+ +

すべてのブレークポイントのオン/オフを切り替えるには、ソースリストペイン で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:

+ +

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html new file mode 100644 index 0000000000..7d08b706a5 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html @@ -0,0 +1,46 @@ +--- +title: 変数を調査、編集、ウォッチする +slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

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/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html new file mode 100644 index 0000000000..da2ab1e637 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html @@ -0,0 +1,16 @@ +--- +title: DOM ノードのハイライトと調査 +slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。

+ +

また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した インスペクター が開きます。

+ +

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html new file mode 100644 index 0000000000..b792199c59 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Debugger_(before_Firefox_52)/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger_(before_Firefox_52)/How_to +--- +
{{ToolsSidebar}}
+ +

これらの記事では、デバッガの使用方法について説明します。

+ +

{{ ListSubpages () }}

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..2408127b78 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html @@ -0,0 +1,21 @@ +--- +title: デバッガーを開く +slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

メニューボタン ( new fx menu ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:

+ + + +

インスペクターがアクティブになっている ツールボックス が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:

+ +

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..13146945a0 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html @@ -0,0 +1,18 @@ +--- +title: 圧縮されたファイルを整形する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:

+ +

+ +

ファイルを読みやすい形式で表示します。

+ +

デバッガーの設定 で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html new file mode 100644 index 0000000000..881571f63e --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html @@ -0,0 +1,74 @@ +--- +title: 検索とフィルター +slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

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

+ +

+ +

接頭辞をつけずに文字列を入力すると、ソースリストペイン に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。

+ +

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

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

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

+ +

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

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

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

+ +

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

+ + + + + + + + + + + + +
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..cb8ae2d4bf --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html @@ -0,0 +1,29 @@ +--- +title: ブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。

+ + + +

それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:

+ + + +

以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:

+ +

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html new file mode 100644 index 0000000000..3a3958596c --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html @@ -0,0 +1,22 @@ +--- +title: 条件付きブレークポイントを設置する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:

+ +

+ +

条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:

+ +

+ +

条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:

+ +

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html new file mode 100644 index 0000000000..634315dd13 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html @@ -0,0 +1,21 @@ +--- +title: コードをステップ実行する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます:

+ +

ボタンは順に以下のとおりです:

+ + diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..1f41177f80 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html @@ -0,0 +1,20 @@ +--- +title: ソースマップを使用する +slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。

+ +

デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[デバッガーのオプション] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:

+ +

+ +

もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:

+ +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html new file mode 100644 index 0000000000..404974a00f --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/index.html @@ -0,0 +1,55 @@ +--- +title: デバッガー (Firefox 52 より前) +slug: Tools/Debugger_(before_Firefox_52) +translation_of: Tools/Debugger_(before_Firefox_52) +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。

+ +

Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、リモートデバッグ のページをご覧ください。

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

ユーザーインターフェイスツアー

+ +

デバッガーについてひととおり理解するために、 UI のクイックツアー を用意しました。

+ +
+

使い方

+ +

デバッガーで何ができるかを知るために、以下のガイドをご覧ください:

+ +
+ +
+ +
+

リファレンス

+ +
+ +
diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..8625bb75bb --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: キーボードショートカット +slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}

+ +

共通ショートカット

+ +

{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}

diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html new file mode 100644 index 0000000000..a9f0a505b3 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/settings/index.html @@ -0,0 +1,63 @@ +--- +title: オプション +slug: Tools/Debugger_(before_Firefox_52)/Settings +translation_of: Tools/Debugger_(before_Firefox_52)/Settings +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます:

+ +

+ +

それぞれのオプションは、オン/オフの切り替え式になっています:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
圧縮されたソースを自動的に整形表示このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して 整形 します。
例外発生で停止このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。
キャッチした例外を無視 +

このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。

+ +

これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。

+
起動時にデバッガを開くこのオプションが有効であるときは、始めにデバッガーを起動した時点で 変数ペイン が開くようになります。
計算可能なプロパティのみ表示{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。
変数フィルターボックスを表示このオプションを有効にすると 変数ペイン に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。
元のソースを表示このオプションを有効にすると、デバッガーは可能であれば ソースマップ を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。
圧縮されたソースを自動的にブラックボックス化する +
+

Firefox 33 の新機能

+
+ +

URL の末尾が ".min.js" であるソースファイルを自動的に ブラックボックス化 します。デフォルトで有効です。

+
diff --git a/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html new file mode 100644 index 0000000000..8a8b6645f3 --- /dev/null +++ b/files/ja/orphaned/tools/debugger_(before_firefox_52)/ui_tour/index.html @@ -0,0 +1,129 @@ +--- +title: UI ツアー +slug: Tools/Debugger_(before_Firefox_52)/UI_Tour +translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour +--- +
{{ToolsSidebar}}
+

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

+ +

Firefox 52 以降のデバッガーを確認します。

+
+ +

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:

+ + + +

+ +

ツールバー

+ +

ツールバーは 4 つのセクションで構成されます:

+ + + +

+ +

左側にある 4 つのボタンは、以下の機能を実行します:

+ + + +

コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。

+ +

ソースリストペイン

+ +

ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと コールスタックペイン は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。

+ +

+ +

ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは ソースペイン に読み込みます。

+ +


+ ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:

+ + + +

ソースリストの下部にある 3 個のアイコンで、ソースのブラックボックス化、圧縮された JS ファイルの整形、すべてのブレークポイントの有効/無効 の切り替えが可能です。

+ +

ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:

+ +

+ +

コールスタックペイン

+ +

デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:

+ +

+ +

各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。

+ +

ソースペイン

+ +

+ +

ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:

+ +

ソースペインでは、コンテキストメニューで以下の操作が可能です:

+ + + +

Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。control キー (Mac OS X では command キー) を押下しながら、関数名をクリックしてください。

+ +

変数のポップアップ

+ +

ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:

+ +

+ +

この機能により 変数ペイン を開いて検索することなく、すばやく変数の値を確認できます。

+ +

変数ペイン

+ +

変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:

+ +

+ +

変数ペインは画面領域を イベントペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

+ +

イベントペイン

+ +

イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:

+ +

+ +

これは画面領域を 変数ペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

+ +

イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:

+ +
[イベント名] on [イベントターゲット] in [ソースファイル]
+ +

イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。

diff --git a/files/ja/orphaned/tutorials/index.html b/files/ja/orphaned/tutorials/index.html new file mode 100644 index 0000000000..5d0c46fe7b --- /dev/null +++ b/files/ja/orphaned/tutorials/index.html @@ -0,0 +1,172 @@ +--- +title: チュートリアル +slug: Tutorials +--- +

SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。

+
+

はじめに

+
+
+
+
+ インストール
+
+ Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。
+
+
+
+ トラブルシューティング
+
+ よくある問題を解決する場合や、支援を求める場合のヒントを説明します。
+
+
+
+
+
+ 入門
+
+ シンプルなアドオンを作成を始めるための手順の概略です。
+
+  
+
+
+
+

ユーザーインターフェイスの作成

+
+
+
+
+ ツールバーボタンの追加
+
+ Firefox アドオンツールバーにボタンを追加します。
+
+ Firefoxへのメニュー項目の追加
+
+ Firefox のメインメニューにアイテムを追加します。
+
+
+
+
+
+ ポップアップの表示
+
+ HTML および JavaScript を使用して実装したポップアップダイアログを表示します。
+
+ コンテキストメニュー項目の追加
+
+ Firefox のコンテキストメニューに項目を追加します。
+
+
+
+
+

ブラウザの操作

+
+
+
+
+ Webページを開く
+
+ tabsモジュールを用いて、新しいタブまたはウィンドウでWebページを開き、そのコンテンツにアクセスします。
+
+ ページの読み込みを確認する
+
+ tabsモジュールを用いて、新しい Web ページが読み込まれたときに通知を受け取り、それらの Web ページのコンテンツにアクセスします。
+
+
+
+
+
+ 開いているタブの一覧を表示する
+
+ tabsモジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。
+
+  
+
+
+
+

Webページの変更

+
+
+
+
+ URLに基づいたWebページの変更
+
+ URL に基づいて Web ページを検索するフィルタを作成します。フィルタに一致する URL の Web ページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。
+
+
+
+
+
+ アクティブなWebページの変更
+
+ 現在アクティブな Web ページに、動的にスクリプトを読み込みます。
+
+
+
+
+

開発テクニック

+
+
+
+
+ ログの出力
+
+ 診断を行うために、メッセージをコンソールにログとして出力します。
+
+ 再利用可能なモジュールの作成
+
+ アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。
+
+ ユニットテスト
+
+ SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。
+
+ Chrome 権限
+
+ この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。
+
+ イベントターゲットの作成
+
+ 定義したオブジェクトがイベントを発生させられるようにします。
+
+
+
+
+
+ 読み込みと読み込み解除の確認
+
+ Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。
+
+ サードパーティーモジュールの使用
+
+ SDK 自体に含まれていない追加のモジュールをインストールして使用します。
+
+ ローカライゼーション
+
+ ローカライズ可能なコードを作成します。
+
+ モバイル開発
+
+ Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。
+
+
+
+ アドオン用のデバッガー
+
+ アドオン内のJavaScriptのデバッグを行います。
+
+
+
+
+

応用 

+
+
+
+
+ アノテーターアドオン
+
+ より複雑なアドオンの開発作業を順を追って説明します。
+
+
+
+

 

diff --git a/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html b/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html new file mode 100644 index 0000000000..62f6879ebe --- /dev/null +++ b/files/ja/orphaned/web/api/audiocontext/mozaudiochanneltype/index.html @@ -0,0 +1,95 @@ +--- +title: AudioContext.mozAudioChannelType +slug: Web/API/AudioContext/mozAudioChannelType +translation_of: Web/API/AudioContext/mozAudioChannelType +--- +

{{APIRef("Web Audio API")}} {{Non-standard_header}}

+ +

{{domxref("AudioContext")}}インターフェースのmozAudioChannelType読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。

+ +

これはAudioChannels APIに定義された非標準のプロパティです。詳細はUsing the AudioChannels APIを参照してください。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var myAudioChannelType = audioCtx.mozAudioChannelType;
+
+ +

AudioContextのオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。

+ +
var audioCtx = new AudioContext('ringer');
+ +

値

+ +

{{domxref("DOMString")}}

+ +

例

+ +

TBD

+ +

仕様

+ +

現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細はhttps://wiki.mozilla.org/WebAPI/AudioChannelsを参照してください。

+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}1.2{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参考

+ + diff --git a/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html b/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html new file mode 100644 index 0000000000..16574bebce --- /dev/null +++ b/files/ja/orphaned/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html @@ -0,0 +1,107 @@ +--- +title: ReadableStreamDefaultController.ReadableStreamDefaultController() +slug: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController +tags: + - API + - Constructor + - ReadableStreamDefaultController + - Reference + - Streams +translation_of: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController +--- +
{{APIRef("Streams")}}
+ +

ReadableStreamDefaultController() コンストラクターは、ReadableStreamDefaultController オブジェクトのインスタンスを作成して返します。

+ +
+

注: このコンストラクターを手動で使用することはありません — これは、{{domxref("ReadableStream")}} オブジェクトの構築中に使用されます。

+
+ +

構文

+ +
var readableStreamDefaultController = new ReadableStreamDefaultController(stream, underlyingSource, size, highWaterMark);
+ +

パラメーター

+ +
+
stream
+
制御される {{domxref("ReadableStream")}}。
+
underlyingSource
+
構築されたストリームインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 詳細については、ReadableStream() コンストラクターのパラメーター定義を参照してください。
+
size
+
 パラメーター chunk を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
+
highWaterMark
+
負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。
+
+ +

戻り値

+ +

{{domxref("ReadableStreamDefaultController")}} オブジェクトのインスタンス。

+ +

例外

+ +
+
TypeError
+
指定された stream パラメーターは {{domxref("ReadableStream")}} ではないか、既にコントローラーが関連付けられています。
+
+ +

例

+ +

次の単純な例では、コンストラクターを使用してカスタムの ReadableStream を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 start() 関数は、1秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための cancel() 関数も提供します。

+ +

{{domxref("ReadableStreamDefaultController")}} オブジェクトは、start() 関数および pull() 関数のパラメーターとして提供されることに注意してください。

+ +

ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。

+ +
const stream = new ReadableStream({
+  start(controller) {
+    interval = setInterval(() => {
+      let string = randomChars();
+
+      // ストリームに文字列を追加
+      controller.enqueue(string);
+
+      // それを画面に表示
+      let listItem = document.createElement('li');
+      listItem.textContent = string;
+      list1.appendChild(listItem);
+    }, 1000);
+
+    button.addEventListener('click', function() {
+      clearInterval(interval);
+      fetchStream();
+      controller.close();
+    })
+  },
+  pull(controller) {
+    // この例では実際には pull は必要ありません
+  },
+  cancel() {
+    // リーダーがキャンセルされた場合に呼び出されるため、
+    // 文字列の生成を停止する必要があります
+    clearInterval(interval);
+  }
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("Streams","#rs-default-controller-constructor","ReadableStreamDefaultController()")}}{{Spec2('Streams')}}初期定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.ReadableStreamDefaultController.ReadableStreamDefaultController")}}

diff --git a/files/ja/orphaned/web/api/window/getattention/index.html b/files/ja/orphaned/web/api/window/getattention/index.html new file mode 100644 index 0000000000..4376715018 --- /dev/null +++ b/files/ja/orphaned/web/api/window/getattention/index.html @@ -0,0 +1,25 @@ +--- +title: window.getAttention +slug: Web/API/Window/getAttention +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/Window/getAttention +--- +
+ {{ApiRef}}
+

概要

+

ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。

+

構文

+
window.getAttention();
+
+

注記

+

Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。

+

Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。

+

Macintosh では、デスクトップの右上端のアイコンが点滅します。

+

この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。getAttention は、Gecko アプリケーションでの chrome から利用したときには、いまだに動作します。

+

仕様

+

{{DOM0}}

diff --git a/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html new file mode 100644 index 0000000000..32dc4a39a4 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/broken_table_layout.html/index.html @@ -0,0 +1,67 @@ +--- +title: テーブルのレイアウトが崩れている +slug: Web/Compatibility_FAQ/Broken_Table_Layout.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。

+ +
　　
+ +

左：Firefox　右：他ブラウザ

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    　テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

    　上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。
    +  

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルのセル幅の未指定

    + +

    テーブルの配置指定に table-layout: fixed; を適用させます。
    + table-layout: fixed; の指定により、横並びのセル幅が左右均等になります。

    + + 
    　　#maincontent section.category .list div{
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+	border-top: #b2b2b2 1px solid;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・細かいpxの指定をせずにテーブルの見た目を整えることができます。
+ 　・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、
+ 　　発生したセルに対してoverflowプロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。

+ +


+ 戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html new file mode 100644 index 0000000000..9824d3d62d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/cut_off_text.html/index.html @@ -0,0 +1,60 @@ +--- +title: 文字列の一部が表示されずに見切れる +slug: Web/Compatibility_FAQ/Cut_Off_Text.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　検索等のテキストボックス内のプレースホルダーが見切れています。
+ 　プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。

+ +

　　　表示画面

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。
    + テキストを全て表示させるには、テキストよりも大きなwidthプロパティの値を設定する必要があります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width:165px;
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    表示領域が足りていない
    + 表示領域のwidthプロパティを要素のテキストに合わせて、再設定することで正しく表示されます。
    + 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。

    + + 
    　　input[type=text] {
+	margin:0 6px;
+	width: 200px;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない調整で正しく表示を行えるようになります。
+ 　・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html new file mode 100644 index 0000000000..0574ed49ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/empty_background_color.html/index.html @@ -0,0 +1,58 @@ +--- +title: 'アイコン,バナーの色が抜けている' +slug: Web/Compatibility_FAQ/Empty_Background_Color.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　a.button_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　a.button_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみで対応可能です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/index.html b/files/ja/orphaned/web/compatibility_faq/index.html new file mode 100644 index 0000000000..752ad7c6ff --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/index.html @@ -0,0 +1,91 @@ +--- +title: サイト表示互換性に関するノウハウ +slug: Web/Compatibility_FAQ +tags: + - Compatibility +--- +
+

モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。
+ 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。

+ +

目次

+ +
+

1. 画面レイアウトが崩れる

+ + + +

2. 装飾が抜ける

+ + + +

3. 画面要素の一部が表示されない

+ + + +
+

TIPS

+ + + +
diff --git a/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html new file mode 100644 index 0000000000..520c573e75 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/invalid_icon_size.html/index.html @@ -0,0 +1,92 @@ +--- +title: アイコン、画像が期待と異なるサイズで表示される +slug: Web/Compatibility_FAQ/Invalid_Icon_Size.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンや画像が期待と異なるサイズで表示されます。
+ 　他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。
+ 　結果、他の要素と並んだ場合に不自然な表示となってしまいます。

+ +
+

　　表示画面

+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。
    + -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　input[type="submit"] {
+	position: absolute;
+	right: 15px;
+	width: 40px;
+	border-radius: 5px;
+	padding: 6px 19px;
+	margin-top: 10px;
+	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。
    + インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。

    + + + 
    　　インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;}
+　　インライン {float: right; clear: both;}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-linear-gradient()関数の場合は、linear-gradient()関数を追記することでFirefoxでも指定を行うことができます。
    + ただし、-webkit-linear-gradient()関数とlinear-gradient()関数は、伴う引数が異なる為、例に従って記載してください。

    + + 
    　　input[type="submit"] {
+	position: absolute;
+	right: 15px;
+	width: 40px;
+	border-radius: 5px;
+	padding: 6px 19px;
+	margin-top: 10px;
+	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+	background: url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
+　　}
    + +

     

    +
    2. +
  2. +

    各アイコンの配置指定方法が統一されていない
    + 各アイコンの配置指定方法を統一することで解消されます。
    + インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html new file mode 100644 index 0000000000..f3fbfffcca --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_icon.html/index.html @@ -0,0 +1,128 @@ +--- +title: アイコン、画像の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンや画像の表示位置がずれて表示されてしまいます。
+ 　他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。

+ +

 　

+ +

+ +
 
+ +

 

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。
    + ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても
    + Firefoxで表示すると折り返され、縦並びに表示されてしまいます。

    + + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.2%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティが使用されている場合、Firefoxでは適応されません。
    + 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。
    + よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。

    + + + 
    　　.menu {
+	display:　block;
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	zoom: 0.5;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。
    + 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+　　}
    + +

     

    +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンや画像が横幅に収まらず、折り返されている
    + 各ブロックの横幅を調整することで解消されます。
    + ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。

    + + 
    　　.btn-pulldown-main {
+	box-sizing: border-box;
+	width: 49.0%;
+	display: inline-block;
+	padding: 9px 0;
+　　}
    + +

     

    +
    2. +
  2. +

    zoomプロパティが使用されている
    + zoomプロパティはFirefoxでは適応されないため、heightプロパティで位置を指定するのがよいです。
    + その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。

    + + 
    　　インライン { height: 80px;}
+
+　　.menu {
+	display: block;
+	position: absolute;
+	top: -15px;
+	right: -10px;
+　　}
    + +

     

    +
    3. +
  3. +

    ブラウザの解像度の違いによる表示差異
    + アイコンの位置をpaddingプロパティで再調整することで正しく表示させることが可能となります。

    + + + 
    　　img.message {
+	position: relative;
+	margin-top: -52px;
+	padding: 0 0 6px 0;
+　　}
    + +

     

    +
    4. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html new file mode 100644 index 0000000000..fe57d3e89a --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text.html/index.html @@ -0,0 +1,116 @@ +--- +title: 文字列の表示位置がずれる +slug: Web/Compatibility_FAQ/Misaligned_Text.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。
+ 　その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + ブラウザ毎でデフォルト値を持っています。 line-height: normal; 等で指定するとデフォルト値で表示されます。
    + しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。

    + + 
    　　.recommended {
+	text-decoration: none;
+	display: inline;
+	width: auto;
+	height: auto;
+	line-height: normal;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 様々なアイコン上の文字列をCSSのpaddingプロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。
    + これは、ブラウザ間でpx指定の差異があるために発生しています。

    + + 
    　　.gender-type {
+	padding-top: 3px;
+　　}
    + + +
    4. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ブラウザ間でのデフォルト値の差異
    + デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、
    + 明示的に値を指定することで正しく表示できます。

    + + 
    　　.recommended {
+	text-decoration: none; display: inline;
+	width: auto;
+	height: auto;
+	line-height: 1;
+	vertical-align: baseline;
+　　}
    + + +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。
    + -webkit-box-sizingプロパティの場合は、box-sizingプロパティを追記することでFirefoxでも指定を行うことができます。

    + + 
    　　#button-06 {
+	display: table;
+	width: 99.9%;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+　　}
    + + +
    3. +
  3. +

    ブラウザ間でのpx指定の差異
    + 指定に差異が出てしまっているものに関しては、個々の要素にpaddingプロパティ指定を追記し、
    + それぞれで調整を行うことで、想定の表示を行うことが可能となります。

    + + 
    　　.gender-type.blc-hdr-rgt {
+	float: right;
+	padding: 1.5px;
+　　}
    + + +
    4. +
+ +

メリット

+ +

　・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html new file mode 100644 index 0000000000..bb9afac07e --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/misaligned_text_inside_icon.html/index.html @@ -0,0 +1,100 @@ +--- +title: アイコンの中身が外側にはみ出すなどして形が壊れている +slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンの中身が外にはみ出して形が崩れてしまいます。

+ +
表示画面
+ +

+ +

要因

+ +

　複数の要因が考えられますが、代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。
    + 横幅にmax-widthプロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    + -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、width: 100%; に修正することで縦画面表示のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    +
    2. +
  2. +

    ベンダープレフィックス
    + webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    + -webkit-background-sizeプロパティの場合は、background-sizeプロパティを追記することでFirefoxでも指定を行うことができます。
    + 引数は同様のものが使用可能です。

    + + + 
    　　h3 {
+	padding: 10px 40px 10px 10px;
+	background: url(/images/open.gif) no-repeat 98% 50%;
+	-webkit-background-size: 21px 21px;
+	background-size: 21px 21px;
+	font-weight: bold;
+	font-size: 12px;
+	cursor: pointer;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズの可変に対応可能となります。
+ 　・他のブラウザでも互換性を維持することができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html new file mode 100644 index 0000000000..a89fb50986 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_background_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: ページの背景色が抜けている +slug: Web/Compatibility_FAQ/No_Background_Shown.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。
+ 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。

+ +
+
表示画面
+ +

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+　　}
    + +

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    + また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + CSS3準拠の backgound: linear-gradient(); を追記します。

    + + 
    　　.bg_hoge {
+	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
+	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
+　　}
    + +

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html new file mode 100644 index 0000000000..2a00bcebe7 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_border_line_shown.html/index.html @@ -0,0 +1,60 @@ +--- +title: 罫線が表示されない +slug: Web/Compatibility_FAQ/No_Border_Line_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + 例えば、Chromeではブラウザ独自のCSSにて、hr要素にbackground-colorプロパティを指定することができます。
    + そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。
    + 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    他ブラウザで独自のCSSが適応されている
    + Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。
    + まず、表示させたい要素のインラインに罫線(border-top: thin solid;)を指定します。
    + そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(background-colorプロパティを利用)にて非表示にします。

    + + + 
    　　インライン {
+	border-top: thin solid;
+　　}
+
+　　hr {
+	display: block;
+	height: 1px;
+	border: 0;
+	border-top: 1px solid #cccccc;
+	margin: 1em 0;
+	padding: 0;
+	background-color: rgb(255,255,255);
+　　}
    + 上記の修正にて、他ブラウザとの互換がとれるようになります。
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html new file mode 100644 index 0000000000..df2f8d3625 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_checkbox_check_shown.html/index.html @@ -0,0 +1,54 @@ +--- +title: チェックボックスのレ点が表示されない +slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。

+ +

+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。
    + または、Firefox用にlinear-gradient()関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。

    + + 
    　　input[type="checkbox"]:checked {
+	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
+	background-image: url(../contents/bg_08.png), linear-gradient(top, #00397b 0%, #01afeb 100%);
+　　}
    + +

     

    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するためにlinear-gradient()関数を使用します。
    + その場合、第一引数には例のように「to top」を指定することで正しく表示されます。

    + + 
    　　input[type="checkbox"]:checked  {
+	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
+	background-image: url(../contents/bg_08.png), linear-gradient(to top, #00397b 0%, #01afeb 100%);
+　　}
    +
    2. +
+ +

メリット

+ +

　・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html new file mode 100644 index 0000000000..e41d42f33d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_decoreation_shown.html/index.html @@ -0,0 +1,82 @@ +--- +title: 枠のシャドウや角丸が抜けている +slug: Web/Compatibility_FAQ/No_Decoreation_Shown.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。

+ +
+

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkitブラウザ向けの記述がされている場合、この現象が発生します。
    + 例えば、以下のような場合です。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

解決策

+ +

　要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 他ブラウザで互換性を維持する為に、以下のようなbox-shadowプロパティ、border-radiusプロパティの記述を追加します。

    + +
      +
    • +

      シャドウの場合

      + + 
      　　.hoge {
+	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
+	box-shadow: 0 1px 2px rgba(0,0,0,.4);
+　　}
      +
      • +
    • +

      角丸の場合

      + + 
      　　.hoge {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	border-radius: 6px;
+　　}
      +
      • +
    +
    2. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・追記のみの対応のため改修が容易です。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html new file mode 100644 index 0000000000..5845f90804 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_icon_shown.html/index.html @@ -0,0 +1,147 @@ +--- +title: アイコンが表示されない +slug: Web/Compatibility_FAQ/No_Icon_Shown.html +tags: + - Compatibility + - Invisible element +--- +

概要

+ +

　一部のアイコンやバナーが表示されません。
+ 　メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。

+ +
+

+
+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。
    + また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。
    + 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。

    +  下記は、描画指定の例になります。 + + 
    　　top li{
+	font-size: 90%;
+	-webkit-border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));
+	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	-webkit-border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	-webkit-transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。
    + floatプロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    ベンダープレフィックス
    + webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。

    + + + +

    詳しくは、「mobile版Firefox向けベンダープレフィックス対処方法まとめ」をご覧ください。

    + +

    下記は、描画指定の例になります。

    + + 
    　　navtop li {
+	font-size:90%;
+	border-radius: 3px;
+	border: 1px solid #e5e5e5;
+	background-color: #ffffff;
+	background: linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	margin: 0 0 0 5px;
+	position: relative;
+	bottom: 15px;
+　　}
+
+　　.icn_search a:before {
+	content: "" "";
+	width: 7px;
+	height: 7px;
+	border: 2px solid #e4006f;
+	background: transparent;
+	border-radius: 12px;
+　　}
+
+　　.icn_search a:after {
+	content: "" "";
+	left: 18px;
+	width: 2px;
+	height: 7px;
+	margin-top: 0;
+	transform: rotate(-45deg);
+　　}
    + +

    下記は、サイズ指定の例になります。

    + + 
    　　single_02 {
+	background: url(http://common/icon.png) no-repeat 0 -625px;
+	-webkit-background-size: 26px auto;
+	background-size: 26px auto;
+　　}
    + +

     

    +
    2. +
  2. +

    全体のレイアウトに誤りがある
    + 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。

    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。
+ 　・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html new file mode 100644 index 0000000000..c36f167bfe --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/no_wrap.html/index.html @@ -0,0 +1,122 @@ +--- +title: 画面外に不要な空白が発生する +slug: Web/Compatibility_FAQ/No_Wrap.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。
+ 　その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。

+ +
+
表示画面
+ +

+
+ +

 

+ +

要因

+ +

　複数要因がありますが、代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。
    + よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。

    + +

    なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。
    + 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。
    + アイテムの横幅指定は、widthプロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。

    + +

    下記の指定方法は、max-widthプロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。
    + その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。

    + + + 
    　　img {
+	max-width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

    なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。

    + +

     

    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅指定がされていない
    + 画面全体に table-layout: fixed; を指定します。
    + この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。

    + + + 
    　　html, body, div, span... {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	vertical-align: top;
+	table-layout: fixed;
+　　}
    + +

     

    + +

    また、テーブルの幅指定を display: table; で行っている場合、Firefoxでは認識できません。
    + 他ブラウザ互換のために display: inline-block; を追記することで、画面幅に指定することができます。

    + + + 
    　　#navigation ul {
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

     

    +
    2. +
  2. +

    アイテムの横幅指定が誤っている
    + max-width: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 width: 100%; に修正することで縦画面表示時のサイズにも対応できます。

    + + + 
    　　img {
+	width: 100%;
+	height: auto;
+	vertical-align: middle;
+	border: 0px none;
+　　}
    + +

     

    + +

    display:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、display: inline-block; に修正することで指定できます。

    + + + 
    　　box li {
+	width: 100%;
+	display: box;
+	display: inline-block;
+　　}
    + +

     

    +
    3. +
+ +

メリット

+ +

　・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。
+ 　・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html new file mode 100644 index 0000000000..d6ccdc4655 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_icon.html/index.html @@ -0,0 +1,62 @@ +--- +title: アイコンが隣接する他のアイコンと重なってしまう +slug: Web/Compatibility_FAQ/Overwrapped_Icon.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。
+ 　隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。

+ +
+
表示画面
+ +

 

+
+ +

要因

+ +

　要因の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。
    + 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。

    + + + 
    　　.icon {width: 100px !important;}
    + +

     

    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    アイコンの表示領域が足りていない
    + アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。
    + その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。

    + + 
    　　.icon {width: 120px !important;}
    + +

    また、widthプロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。
    + ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンをmarginプロパティ等で表示位置を調整する必要があります。

    + + 
    　　.icon {width: auto;}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。
+ 　・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html new file mode 100644 index 0000000000..4e8a4bd9c5 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/overwrapped_navigation.html/index.html @@ -0,0 +1,83 @@ +--- +title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう +slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html +tags: + - Compatibility + - Layout +--- +

概要

+ +

　他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。
+ 　一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。
+
+
+ 　
+  

+ +

要因

+ +

　要因の代表例としては以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + display: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。
    + 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。

    + + 
    　　navigation ul {
+	display: table;
+	width: 99.9%;
+　　}
    + +

    また、display: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	-webkit-box-pack: center !important;
+	-moz-box-pack: center !important;
+	width: 100%;
+　　}
    +
    2. +
+ +

解決策

+ +

　解決策の代表例として以下があります。

+ +
    +
  1. +

    テーブルの列幅が指定されていない
    + Firefoxでは、display: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定にdisplay: inline-block; やdisplay: flex; を追記します。

    + +

    display: inline-block; の場合

    + + 
    　　navigation ul{
+	display: table;
+	display: inline-block;
+	width: 99.9%;
+　　}
    + +

    また、親要素をflex設定にした場合、自動的に子要素はflexアイテムになります。flexアイテム用に横方向寄せを設定しているプロパティをjustify-contentプロパティに変更します。
    + 縦方向寄せを設定しているプロパティもalign-itemsプロパティに変更します。

    + +

    display: flex; の場合

    + + 
    　　.go_contents_btn {
+	display: -webkit-box !important;
+	display: -moz-box !important;
+	display: flex !important;
+	-webkit-box-pack: center !important;
+	justify-content: center !important;
+	width: 100%;
+　　}
    + +

     

    +
    2. +
+ +

メリット

+ +

　・少ない修正で他ブラウザとの互換性が取れます。

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html new file mode 100644 index 0000000000..4285cff266 --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_default_style_difference.html/index.html @@ -0,0 +1,62 @@ +--- +title: ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異) +slug: Web/Compatibility_FAQ/Tips_Default_Style_Difference.html +tags: + - Compatibility + - StyleSheet +--- +

概要

+ +

　ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。
+ 　多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。

+ +

例

+ +
    +
  1. +

    デフォルトのフォントが異なる
    + ブラウザ毎でデフォルトのフォントが異なる場合があります。font-styleプロパティを明示的に指定すると統一できますが、font-style: normal; で指定した場合は、表示が多少異なります。
    + 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。

    + + 
    　　body {
+	margin: 0;
+	padding: 0;
+	font-style: normal;
+　　}
    + +

    +
    2. +
  2. +

    テキストの太さが異なる
    + 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。

    + +

    +
    3. +
  3. +

    チェックボックスのデザインが異なる
    + チェックボックスの表示がブラウザ間で異なる場合があります。
    + チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。
    + 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。

    + +

    注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットするappearanceプロパティが使用できない不具合があります。

    + +

    +
    4. +
  4. +

    プルダウンメニューのデザインが異なる
    + プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。

    + +

    +
    5. +
+ +

ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。

+ +
　　.ipt_select_01 {
+	width: 100%;
+	color: #000;
+	background-color: ButtonFase;
+	border-color: #A9A9A9;
+　　}
+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html new file mode 100644 index 0000000000..cb1475537f --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/tips_vendor_prefix.html/index.html @@ -0,0 +1,198 @@ +--- +title: mobile版Firefox向けベンダープレフィックス対処方法まとめ +slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html +tags: + - Compatibility + - Vendor prefix +--- +

概要

+ +

　ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。
+ 　例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。
+ 　本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。

+ +

　以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。

+ +
+

Mozilla CSS 拡張仕様 (-moz-)

+ +

詳細は、Mozilla 独自の CSS 拡張 をご覧ください。

+ +

＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味PC版Firefox向け記述例mobile版Firefox向け対処法
-moz-box要素をボックス配置するdisplay: -moz-box;display: inline-block;
-moz-border-radius枠線の角丸を設定する-moz-border-radius: 10px;border-radius: 10px;
-moz-linear-gradientグラデーション装飾を付与するbackground: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);background: linear-gradient(to top, #F0F0F0 0%, #ccc);
+ +
+

Webkit CSS 拡張仕様 (-webkit-)

+ +

詳細は、WebKit 独自の CSS 拡張 をご覧ください。

+ +

＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プロパティ・値意味mobile版Chrome向け記述例mobile版Firefox向け対処法
-webkit-appearanceブラウザデフォルトの装飾設定を適用する-webkit-appearance: none;代替指定が存在しないため、明示的にスタイル指定する
-webkit-background-size背景サイズを指定する-webkit-background-size: 26px auto;background-size: 26px auto;
-webkit-border-radius枠線の角丸を設定する-webkit-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow領域のシャドーを設定する-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing領域のサイズを設定する-webkit-box-sizing: border-box;box-sizing: border-box;
-webkit-gradientグラデーション装飾を付与するbackground: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));background: linear-gradient(to bottom, #ffffff, #f6f6f6);
-webkit-linear-gradientグラデーション装飾を付与するbackground: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);background: linear-gradient(to top, #00397b 0%, #01afeb 100%);
-webkit-transform要素を移動、回転、スケーリング、傾斜させる-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
-webkit-transition-durationトランジションによるアニメーションが完了するまでの所要時間を指定する-webkit-transition-duration: 100ms;JavaScriptで実装する
-webkit-transition-propertyトランジションさせるプロパティを指定する-webkit-transition-property: opacity;JavaScriptで実装する
-webkit-transition-timing-functionトランジション実行中の値の変更速度を操作する-webkit-transition-timing-function: ease-in-out;JavaScriptで実装する
+ +
+

考察

+ +

　・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。
+ 　　そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。

+ +

　・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。

+ +

注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。
+ 　　　以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。

+ +


+ ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ブラウザ/バージョン構文
Chrome/3-9-webkit-gradient();
Chrome/10-25-webkit-linear-gradient();
Chrome/26以降linear-gradient();
Firefox/3.6-15-moz-linear-gradient();
Firefox/16(2012.10リリース)以降linear-gradient();
+ +

　mobile版FirefoxはCSS3準拠のため、MDN等のリファレンスを参照し、適正な設定を行うことが必要です。

+ +

参考

+ +

　・CSS グラデーションの利用 - Web developer guide | MDN
+ 　　https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

+ +

戻る

diff --git a/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html new file mode 100644 index 0000000000..2df04e427d --- /dev/null +++ b/files/ja/orphaned/web/compatibility_faq/underline_color_diffrence.html/index.html @@ -0,0 +1,77 @@ +--- +title: 下線の色が相違している +slug: Web/Compatibility_FAQ/Underline_Color_Diffrence.html +tags: + - Compatibility + - Decoration +--- +

概要

+ +

　mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。

+ +
+

+
+ +

要因

+ +

　以下のような要因が考えられます。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合
    + text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。
    + なお、text-decoration-colorは非推奨APIですのでCSS3準拠に書き替えが必要です。

    + + 
    　　text-decoration-color: -moz-use-text-color;
    +
    3. +
+ +

解決策

+ +

　各要因の解決策の代表例として以下があります。

+ +
    +
  1. +

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合

    + +

    例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。
    + そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。

    + + 
    　　インライン {
+	text-decoration: underline;
+	-moz-text-decoration-color: -moz-use-text-color;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    2. +
  2. +

    色指定の方法に間違えている場合
    + text-decoration-color: -moz-use-text-color; を border-color: currentColor; に書き換えます。
    + なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。

    + + 
    　　インライン {
+	text-decoration: underline;
+	border-color: currentColor;
+	-moz-text-decoration-line: underline;
+	-moz-text-decoration-style: solid;
+　　}
    +
    3. +
+ +

メリット

+ +

　・他のブラウザでも互換性を維持することができます。

+ +

戻る

diff --git a/files/ja/orphaned/web/css/@media/index/index.html b/files/ja/orphaned/web/css/@media/index/index.html new file mode 100644 index 0000000000..b8b8d56198 --- /dev/null +++ b/files/ja/orphaned/web/css/@media/index/index.html @@ -0,0 +1,12 @@ +--- +title: 索引 +slug: Web/CSS/@media/Index +tags: + - '@media' + - CSS + - 索引 +translation_of: Web/CSS/@media/Index +--- +

{{CSSRef}}

+ +

{{Index("/ja/docs/Web/CSS/@media")}}

diff --git a/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html b/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html new file mode 100644 index 0000000000..be215a2997 --- /dev/null +++ b/files/ja/orphaned/web/css/_colon_-moz-alt-text/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-alt-text' +slug: 'Web/CSS/:-moz-alt-text' +tags: + - CSS + - CSS Reference + - Non-standard +--- +

{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}

+ +

概要

+ +

:-moz-alt-text は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。

+ +

このセレクタは主にテーマ開発者によって使用されるものです。

+ +

Bugzilla

+ +

{{ Bug(11011) }}

diff --git a/files/ja/orphaned/web/css/index/index.html b/files/ja/orphaned/web/css/index/index.html new file mode 100644 index 0000000000..20ef75d74b --- /dev/null +++ b/files/ja/orphaned/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: CSS 関連ドキュメントの索引 +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +

{{Index("/ja/docs/Web/CSS")}}

diff --git a/files/ja/orphaned/web/guide/ajax/other_resources/index.html b/files/ja/orphaned/web/guide/ajax/other_resources/index.html new file mode 100644 index 0000000000..1475956d30 --- /dev/null +++ b/files/ja/orphaned/web/guide/ajax/other_resources/index.html @@ -0,0 +1,21 @@ +--- +title: AJAX に関するその他の資料 +slug: Web/Guide/AJAX/Other_Resources +tags: + - AJAX +translation_of: Web/Guide/AJAX/Other_Resources +--- + diff --git a/files/ja/orphaned/web/html/element/command/index.html b/files/ja/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..ff02ae0e96 --- /dev/null +++ b/files/ja/orphaned/web/html/element/command/index.html @@ -0,0 +1,109 @@ +--- +title: ': HTML コマンド要素' +slug: Web/HTML/Element/command +tags: + - Command + - HTML + - HTML commands + - HTML5 + - 'HTML:Element' + - 'HTML:Element Reference' + - Obsolete +translation_of: Web/HTML/Element/command +--- +
{{obsolete_header()}}
+ +

HTML のコマンド要素 (<command>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。しかし、ページ上のどこでも使用できます。

+ +
+

<command> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, メタデータコンテンツ
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略開始タグは必須です。終了タグは、空要素であるため使用できません。
許可されている親要素{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。
DOM インターフェイス{{domxref("HTMLCommandElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +
+
{{htmlattrdef("checked")}}
+
コマンドが選択されているかを示します。 type 属性が checkbox または radio でなければ指定できません。
+
{{htmlattrdef("disabled")}}
+
コマンドが使用不可であることを示します。
+
{{htmlattrdef("icon")}}
+
コマンドを表す画像を与えます。
+
{{htmlattrdef("label")}}
+
ユーザに対して表示する、コマンドの名称です。
+
{{htmlattrdef("radiogroup")}}
+
この属性はコマンド自身を切り替えた時に切り替えられる、 type が radio であるコマンドのグループ名を与えます。この属性は、 type 属性が radio でなければ指定できません。
+
{{htmlattrdef("type")}}
+
この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 +
    +
  • +

    command または空文字列はデフォルトの状態で、通常のコマンドを示します。

    +
    • +
  • +

    checkbox は、コマンドがチェックボックスで切り替え可能であることを示します。

    +
    • +
  • +

    radio は、コマンドがラジオボタンで切り替え可能であることを示します。

    +
    • +
+
+
+ +

例

+ +
<command type="command" label="Save"
+    icon="icons/save.png" onclick="save()">
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.command")}}

+ +

{{ HTMLRef }}

diff --git a/files/ja/orphaned/web/html/element/element/index.html b/files/ja/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..5bc66fccb6 --- /dev/null +++ b/files/ja/orphaned/web/html/element/element/index.html @@ -0,0 +1,64 @@ +--- +title: ': カスタム要素 (廃止)' +slug: Web/HTML/Element/element +tags: + - Element + - HTML + - Obsolete + - Web Components + - custom elements + - shadow dom +translation_of: Web/HTML/Element/element +--- +
{{HTMLRef}}{{obsolete_header}}
+ +

廃止された HTML の <element> 要素は、ウェブコンポーネントの仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。

+ +
+

メモ: この要素は仕様書から削除されました。仕様書の編集者からの情報はこちらを参照してください。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリー透過的コンテンツ
許可されているコンテンツ???
タグの省略{{no_tag_omission}}
許可されている親コンテンツ???
DOM インターフェイス{{domxref("HTMLElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +

仕様書

+ +

<element> 要素は以前、カスタム要素の仕様書の草稿に含まれていましたが、削除されました。

+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.element")}}

+ +

関連情報

+ +
    +
  • ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}
    • +
diff --git a/files/ja/orphaned/web/html/global_attributes/dropzone/index.html b/files/ja/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..290b577040 --- /dev/null +++ b/files/ja/orphaned/web/html/global_attributes/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Global_attributes/dropzone +tags: + - Deprecated + - Global attributes + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
+ +

dropzone グローバル属性 は、 HTML Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。

+ +
    +
  • copy: ドロップにより、ドロップした要素のコピーを生成することを示す
    • +
  • move: ドロップされた要素は新しい場所に移動されることを示す
    • +
  • link: ドラッグしたデータへのリンクを生成する
    • +
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.dropzone")}}

+ +

関連情報

+ + diff --git a/files/ja/orphaned/web/html/html_extensions/index.html b/files/ja/orphaned/web/html/html_extensions/index.html new file mode 100644 index 0000000000..6e0d715d5d --- /dev/null +++ b/files/ja/orphaned/web/html/html_extensions/index.html @@ -0,0 +1,12 @@ +--- +title: HTML Extensions +slug: Web/HTML/HTML_Extensions +tags: + - HTML +--- +

Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。

+ +
+

{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}

+
diff --git a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html new file mode 100644 index 0000000000..800f222ea4 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html @@ -0,0 +1,25 @@ +--- +title: Class-Based vs. Prototype-Based Languages +slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +--- +

クラスベース言語とプロトタイプベース言語

+

Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。

+
  • クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。
  • 一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。
    • +
+

JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。

+

クラスの定義

+

クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。

+

JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。

+

サブクラスと継承

+

クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。

+

JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。

+

プロパティの追加と削除

+

クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。

+

違いの概要

+

次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。

+ +
クラスベース (Java) プロトタイプベース (JavaScript)
クラスとインスタンスは異なる実体である。 すべてのオブジェクトはインスタンスである。
クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。 コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。
new 演算子を用いて単一のオブジェクトを作成する。 同じ。
既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。 コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。
クラスチェーンに従ってプロパティを継承する。 プロトタイプチェーンに従ってプロパティを継承する。
クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。 コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。
+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}

+
+

{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}

diff --git a/files/ja/orphaned/web/javascript/guide/core_language_features/index.html b/files/ja/orphaned/web/javascript/guide/core_language_features/index.html new file mode 100644 index 0000000000..2161ec589e --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/core_language_features/index.html @@ -0,0 +1,10 @@ +--- +title: Core Language Features +slug: Web/JavaScript/Guide/Core_Language_Features +--- +
+{{page("/ja/docs/Core_JavaScript_1.5_Guide/Values()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Variables()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Constants()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Literals()")}} +{{page("/ja/docs/Core_JavaScript_1.5_Guide/Unicode()")}}
diff --git a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html new file mode 100644 index 0000000000..19935b8b55 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html @@ -0,0 +1,31 @@ +--- +title: 正規表現の作成 +slug: Web/JavaScript/Guide/Creating_a_Regular_Expression +--- +

正規表現の作成

+

正規表現は 2 つの方法で作ることができます。

+
    +
  • 次のように、正規表現リテラルを使用する。
    • +
+
var re = /ab+c/;
+
+
+
+
+ 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。
+
+
+
+
    +
  • 次のように、RegExp オブジェクトのコンストラクタ関数を呼び出す。
    • +
+
var re = new RegExp("ab+c");
+
+
+
+
+ コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。
+
+
+
+

{{ PreviousNext("JavaScript/Guide/Operators/Special_Operators", "JavaScript/Guide/Writing_a_Regular_Expression_Pattern") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html new file mode 100644 index 0000000000..8ee9381575 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html @@ -0,0 +1,89 @@ +--- +title: ゲッターとセッターの定義 +slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters +--- +

ゲッターとセッターの定義

+ +

ゲッターはある属性の値を取得するメソッドです。セッターは属性に値を設定するメソッドです。全ての定義済みコアオブジェクトと、新しいプロパティの追加をサポートしているユーザ定義オブジェクトに対してゲッターとセッターを定義できます。ゲッターとセッターの定義にはオブジェクトリテラル構文を使用します。

+ +

以下の例では、ユーザ定義オブジェクト o についてゲッターとセッターがどのように機能するかを説明します。JavaScript シェル とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。

+ +

o オブジェクトのプロパティは以下のとおりです。

+ +
    +
  • o.a - 数値
    • +
  • o.b - o.a に 1 を加えて返すゲッター
    • +
  • o.c - o.a の値にその値の 1/2 の値をセットするセッター
    • +
+ +
js> o = new Object;
+[object Object]
+js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
+[object Object]
+js> o.a
+7
+js> o.b
+8
+js> o.c = 50
+js> o.a
+25
+js>
+
+ +

次の例では、 Date プロトタイプを拡張して定義済み Date クラスの全インスタンスに year プロパティを追加する様子を表しています。Date クラスの既存の getFullYear および setFullYear メソッドを使用して year プロパティのゲッターとセッターを実装します。

+ +

これらの文は year プロパティに対するゲッターとセッターを定義しています。

+ +
js> var d = Date.prototype;
+js> d.__defineGetter__("year", function() { return this.getFullYear(); });
+js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });
+
+ +

これらの文は Date オブジェクトで定義したゲッターとセッターを使用しています。

+ +
js> var now = new Date;
+js> print(now.year);
+2000
+js> now.year=2001;
+987617605170
+js> print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +
JavaScript 1.5 の開発期間中に getter = や setter = といった式を使用して新しいゲッターやセッターを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください
+ +

 

+ +

概要

+ +

原則的にゲッターとセッターは次のどちらかに属します。

+ +
    +
  • オブジェクト初期化子 を用いて定義されたもの
    • +
  • ゲッターやセッターを追加するメソッドを用いてオブジェクトに後から追加されたもの
    • +
+ +

オブジェクト初期化子 を用いてゲッターやセッターを定義する際には、ゲッターメソッドの先頭に get を、セッターメソッドの先頭に set をそれぞれ付けなくてはなりません。セッターメソッドはセットする新しい値を受けわたすための引数を 1 つだけ持ちます。ゲッターメソッドはパラメータを受け取るようにしてはいけません。

+ +
o = {
+  a:7,
+  get b() { return this.a+1; },
+  set c(x) { this.a = x/2; }
+};
+
+ +

ゲッターもセッターも、__defineGetter__ および __defineSetter__ という 2 つの特別なメソッドを用いて、オブジェクト作成後でも、そのオブジェクトに追加することができます。両メソッドの第 1 引数にはそのゲッターやセッターの名前を文字列で指定します。第 2 引数にはゲッターやセッターとして呼び出す関数を指定します。前の例を別の方法で実装したものを以下に示します。

+ +
o.__defineGetter__("b", function() { return this.a+1; });
+o.__defineSetter__("c", function(x) { this.a = x/2; });
+
+ +

2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルや、目の前の課題次第によります。プロトタイプの定義時にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。ゲッターやセッターを後から追加する必要がある場合は、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表していますが、コードが可読性が下がったり、理解しづらいものとなることがあります。

+ +
+

Firefox 3.0 より前のバージョンではゲッターとセッターが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し (HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)、例外を投げるようにして回避してください。

+ +

Firefox 3.0 では、定義済みのプロパティでゲッターとセッターを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。

+
+ +

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References", "JavaScript/Guide/Creating_New_Objects/Deleting_Properties") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html new file mode 100644 index 0000000000..74731a99d1 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_methods/index.html @@ -0,0 +1,39 @@ +--- +title: メソッドの定義 +slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods +--- +

メソッドの定義

+

メソッドとはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。

+
object.methodname = function_name
+
+

ここで、object は既存のオブジェクトを、methodname はメソッドに割り当てる名前を、function_name は関数の名前をそれぞれ表しています。

+

すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。

+
object.methodname(params);
+
+

オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。

+
function displayCar() {
+   var result = "A Beautiful " + this.year + " " + this.make
+      + " " + this.model;
+   pretty_print(result);
+}
+
+

pretty_print は水平方向の罫線と文字列を表示する関数です。this を使用してそのメソッドを抱えているオブジェクトを参照しています。

+

次の文

+
this.displayCar = displayCar;
+
+

をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、car の完全な定義は次のようになります。

+
function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+   this.displayCar = displayCar;
+}
+
+

すると、次のようにして各オブジェクトについて displayCar メソッドを呼び出すことができます。

+
car1.displayCar()
+car2.displayCar()
+
+

こうすると次の図のような出力が得られます。

+

Image:obja.gif 図 7.1：メソッドの出力の表示

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type", "JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html new file mode 100644 index 0000000000..b5136b203e --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html @@ -0,0 +1,13 @@ +--- +title: Defining Properties for an Object Type +slug: >- + Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type +--- +

あるオブジェクトの種類に対するプロパティの定義

+

prototype プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは color プロパティを car という種類の全オブジェクトに追加し、値をオブジェクト car1 の color プロパティに代入します。

+
car.prototype.color=null;
+car1.color="black";
+
+

詳しくは コア JavaScript リファレンス 内の Function オブジェクトの prototype プロパティ を参照してください。

+ +

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties", "JavaScript/Guide/Creating_New_Objects/Defining_Methods") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html new file mode 100644 index 0000000000..749ee722f5 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/deleting_properties/index.html @@ -0,0 +1,20 @@ +--- +title: プロパティの削除 +slug: Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties +--- +

プロパティの削除

+

delete 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。

+
// 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。
+myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// a プロパティを除去。myobj には b プロパティだけが残っている。
+delete myobj.a;
+
+

delete を使用することでグローバル変数を削除することもできます。ただし、これは var キーワードを使用せずにその変数を宣言した場合のみです。

+
g = 17;
+delete g;
+
+

さらなる情報については delete をご覧ください。

+

{{PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters", "JavaScript/Guide/Predefined_Core_Objects")}}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html new file mode 100644 index 0000000000..0cbbc1753c --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/index.html @@ -0,0 +1,17 @@ +--- +title: 新しいオブジェクトの作成 +slug: Web/JavaScript/Guide/Creating_New_Objects +--- +

新しいオブジェクトの作成

+

JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。

+ +

{{ PreviousNext("JavaScript/Guide/Objects_and_Properties", "JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html new file mode 100644 index 0000000000..024de85654 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html @@ -0,0 +1,9 @@ +--- +title: オブジェクトのプロパティに対するインデックス付け +slug: Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties +--- +

オブジェクトのプロパティのインデックス付け

+

JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。

+

先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：myCar.color = "red"）に、これは適用されます。そのため、myCar{{ mediawiki.external(5) }} = "25 mpg" のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、myCar{{ mediawiki.external(5) }} のようにそのプロパティを後から参照できるようになります。

+

このルールの例外は、forms 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <FORM> タグが "myForm" という NAME 属性を持っている場合、document.forms{{ mediawiki.external(1) }} や document.forms{{ mediawiki.external('\"myForm\"') }} や document.myForm とすることでそのフォームを参照できます。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function", "JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html new file mode 100644 index 0000000000..f3abc30e89 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html @@ -0,0 +1,57 @@ +--- +title: コンストラクタ関数の使用 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function +--- +

コンストラクタ関数の使用

+

もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。

+
    +
  1. コンストラクタ関数を書くことでオブジェクトの種類を定義する。
    2. +
  2. new を用いてそのオブジェクトのインスタンスを作成する。
    3. +
+

オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに car という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。

+
function car(make, model, year) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+}
+
+

関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために this を使用しています。

+

すると、次のようにして mycar というオブジェクトを作成することができるようになります。

+
mycar = new car("Eagle", "Talon TSi", 1993);
+
+

この文は mycar を作成し、そのプロパティ用に指定した値を代入します。その結果、mycar.make の値は "Eagle" という文字列、mycar.year は 1993 という整数というようになります。

+

new を呼び出すことで car オブジェクトをいくらでも作ることができます。

+
kenscar = new car("Nissan", "300ZX", 1992);
+vpgscar = new car("Mazda", "Miata", 1990);
+
+

それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように person というオブジェクトを定義するとします。

+
function person(name, age, sex) {
+   this.name = name;
+   this.age = age;
+   this.sex = sex;
+}
+
+

そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。

+
rand = new person("Rand McKinnon", 33, "M");
+ken = new person("Ken Jones", 39, "M");
+
+

次のようにして、car の定義を書き換えて、person オブジェクトをとる owner プロパティを持たせることができます。

+
function car(make, model, year, owner) {
+   this.make = make;
+   this.model = model;
+   this.year = year;
+   this.owner = owner;
+}
+
+

新しいオブジェクトのインスタンスを作成するために、次のようにします。

+
car1 = new car("Eagle", "Talon TSi", 1993, rand);
+car2 = new car("Nissan", "300ZX", 1992, ken);
+
+

新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト rand および ken を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。

+
car2.owner.name
+
+

以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文

+
car1.color = "black"
+
+

はプロパティ color を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers", "JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html new file mode 100644 index 0000000000..0a817b5407 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_object_initializers/index.html @@ -0,0 +1,23 @@ +--- +title: オブジェクト初期化子の使用 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers +--- +

オブジェクト初期化子の使用

+

コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。

+

オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。

+
var obj = { property_1:   value_1,   // property_# は識別子でもよい
+            2:            value_2,   // あるいは数値でもよい
+            ...,
+            "property_n": value_n }; // あるいは文字列でもよい
+
+

ここで、obj は新しいオブジェクトの名前を、各 property_i は識別子（名前、数値、文字列リテラルのいずれか）を、各 value_i はその値を property_i に代入する式をそれぞれ表しています。obj および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。）

+

トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。

+

次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 x に代入します。

+
if (cond) x = {hi:"there"};
+
+

次の例は 3 つのプロパティを持つ myHonda を作成します。engine プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。

+
myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};
+
+

オブジェクト初期化子を使用して配列を作成することもできます。配列リテラル を参照してください。

+

JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。コンストラクタ関数の使用 をご覧ください。

+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects", "JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function") }}

diff --git a/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html new file mode 100644 index 0000000000..5fbd3b8aff --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html @@ -0,0 +1,25 @@ +--- +title: this を用いたオブジェクト参照 +slug: Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References +--- +

this を用いたオブジェクト参照

+

JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する validate という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。

+
function validate(obj, lowval, hival) {
+   if ((obj.value < lowval) || (obj.value > hival))
+      alert("Invalid Value!");
+}
+
+

各フォーム要素の onchange イベントハンドラにおいて validate を呼び出します。this を使うことで form 要素を渡すことができます。次の例をご覧ください。

+
<input type="text" name="age" size="3"
+   onChange="validate(this, 18, 99)">
+
+

一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。

+

form プロパティと組み合わせることで、this はカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onclick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

+
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+      onclick="this.form.text1.value=this.form.name">
+</p>
+</form>
+
+

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Methods", "JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters") }}

diff --git a/files/ja/orphaned/web/javascript/guide/expressions/index.html b/files/ja/orphaned/web/javascript/guide/expressions/index.html new file mode 100644 index 0000000000..4feb2b1aa8 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/expressions/index.html @@ -0,0 +1,16 @@ +--- +title: Expressions +slug: Web/JavaScript/Guide/Expressions +--- +
{{ 英語版章題("Expressions") }}
+

式

+

式とは、リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです。この値には数値、文字列、論理値が使用できます。

+

概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、x = 7 という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では代入演算子を用います。一方、3 + 4 という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に演算子と呼ばれます。

+

JavaScript には以下の種類の式があります。

+
    +
  • 算術式：数値に評価する。例えば 3.14159。（一般に 算術演算子 を使用）
    • +
  • 文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に 文字列演算子 を使用）
    • +
  • 論理式：true または false に評価する。（よく 論理演算子 を用いる)
    • +
  • オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については 特殊演算子 を参照）
    • +
+

{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html new file mode 100644 index 0000000000..35cc94abdf --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/break_statement/index.html @@ -0,0 +1,24 @@ +--- +title: break 文 +slug: Web/JavaScript/Guide/Loop_Statements/break_Statement +--- +

break 文

+

break 文は loop 文や switch 文、label 文から抜け出すために使用します。

+
    +
  • break にラベルを使用しないと、最も内側にある while や do-while、for、switch から抜け、続く文にコントロールを移します。
    • +
  • break にラベルを使用すると、指定されたラベルの付いた文から抜けます。
    • +
+

break 文は次のように使用します。

+
    +
  1. break;
    2. +
  2. break label;
    3. +
+

１番目の形式の構文は最も内側のループもしくは switch から抜けます。２番目の形式の構文は指定した label 文から抜けます。

+

例
+ 次の例は、その値が theValue である要素のインデックスが見つかるまで、配列の要素について繰り返します。

+
for (i = 0; i < a.length; i++) {
+   if (a[i] == theValue)
+      break;
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/label_Statement", "JavaScript/Guide/Loop_Statements/continue_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html new file mode 100644 index 0000000000..f7a5697eeb --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/continue_statement/index.html @@ -0,0 +1,46 @@ +--- +title: continue 文 +slug: Web/JavaScript/Guide/Loop_Statements/continue_Statement +--- +

continue 文

+

continue 文は while 文、do-while 文、for 文、label 文をリスタートさせるために用います。

+
    +
  • ラベルを用いずに continue を使用した場合、現在繰り返している最も内側にある while 文 do-while 文、for 文を終了し、次の反復の実行に移ります。break 文とは異なり、continue はループ全体の実行を終了しません。while ループでは条件比較部分に戻ります。for ループではインクリメントの式に移ります。
    • +
  • ラベルを用いて continue を使用した場合、label で指定されたループ文に移ります。
    • +
+

continue 文は次のように使用します。

+
    +
  1. continue
    2. +
  2. continue label
    3. +
+

例 1
+ 次の例では、i の値が 3 のときに実行される continue 文を用いた while ループを示します。こうすることで n は順に 1、3、7、12 という値をとります。

+
i = 0;
+n = 0;
+while (i < 5) {
+   i++;
+   if (i == 3)
+      continue;
+   n += i;
+}
+
+

例 2
+ checkiandj というラベルの付いた文の中に checkj というラベルの付いた文があります。continue に出くわすと、プログラムは checkj の現在の反復を終了し、次の反復を始めます。continue に出くわすたびに、条件が false になるまで checkj を繰り返します。false が返されると checkiandj 文の残りを完了し、条件が false を返すまで checkiandj を繰り返します。false が返されると checkiandj に続く文が実行されます。

+

continue が checkiandj というラベルを持っているとプログラムは checkiandj 文の最初から続けます。

+
checkiandj :
+   while (i < 4) {
+      document.write(i + "<br/>");
+      i += 1;
+      checkj :
+         while (j > 4) {
+            document.write(j + "<br/>");
+            j -= 1;
+            if ((j % 2) == 0)
+               continue checkj;
+            document.write(j + " is odd.<br/>");
+         }
+      document.write("i = " + i + "<br/>");
+      document.write("j = " + j + "<br/>");
+   }
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/break_Statement", "JavaScript/Guide/Object_Manipulation_Statements") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html new file mode 100644 index 0000000000..6e1df1e586 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/do...while_statement/index.html @@ -0,0 +1,19 @@ +--- +title: do...while 文 +slug: Web/JavaScript/Guide/Loop_Statements/do...while_Statement +--- +

do...while 文

+

do...while 文は指定した条件が false に評価されるまで繰り返します。do...while 文は次のように使用します。

+
do
+   statement
+while (condition);
+
+

statement は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。condition が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが do...while の後に続く文に渡されます。

+

例
+ 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。

+
do {
+   i += 1;
+   document.write(i);
+} while (i < 5);
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/for_Statement", "JavaScript/Guide/Loop_Statements/while_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html new file mode 100644 index 0000000000..b2dccec25b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/for_statement/index.html @@ -0,0 +1,50 @@ +--- +title: for 文 +slug: Web/JavaScript/Guide/Loop_Statements/for_Statement +--- +

for 文

+

for ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。for 文は次のように使用します。

+
for ([initialExpression]; [condition]; [incrementExpression])
+   statement
+
+

for ループを実行すると以下のことが起こります。

+
    +
  1. 初期化式 initialExpression があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。
    2. +
  2. condition 式が評価されます。condition の値が true であればループ文が実行されます。condition が false の場合は for ループは終了します。condition 式が完全に省略されている場合、条件は true であると仮定されます。
    3. +
  3. statement が実行されます。複数の式を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。
    4. +
  4. 更新式 incrementExpression があれば実行されます。そしてコントロールがステップ 2 に戻ります。
    5. +
+

例
+ 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える for 文が含まれています。for 文では変数 i が宣言され、それが 0 に初期化されています。i が Select オブジェクトのオプションの個数より小さいかをチェックし、続く if 文を実行し、ループが 1 回りしたら i を 1 だけ増加させます。

+
<script type="text/javascript">//<![CDATA[
+
+function howMany(selectObject) {
+   var numberSelected = 0;
+   for (var i = 0; i < selectObject.options.length; i++) {
+      if (selectObject.options[i].selected)
+         numberSelected++;
+   }
+   return numberSelected;
+}
+
+//]]></script>
+<form name="selectForm">
+   <p>
+      <strong>Choose some music types, then click the button below:</strong>
+      <br/>
+      <select name="musicTypes" multiple="multiple">
+         <option selected="selected">R&B</option>
+         <option>Jazz</option>
+         <option>Blues</option>
+         <option>New Age</option>
+         <option>Classical</option>
+         <option>Opera</option>
+      </select>
+   </p>
+   <p>
+      <input type="button" value="How many are selected?"
+         onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/>
+   </p>
+</form>
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements", "JavaScript/Guide/Loop_Statements/do...while_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html new file mode 100644 index 0000000000..54ef32d2c9 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html @@ -0,0 +1,17 @@ +--- +title: ループ文 +slug: Web/JavaScript/Guide/Loop_Statements +--- +

ループ文

+

ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、break および continue 文をループ文の中で使うことができます。

+

さらに for...in 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。オブジェクト操作文 をご覧ください。

+

ループ文は以下のとおりです。

+ +

{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html new file mode 100644 index 0000000000..d0b878455b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/label_statement/index.html @@ -0,0 +1,19 @@ +--- +title: label 文 +slug: Web/JavaScript/Guide/Loop_Statements/label_Statement +--- +

label 文

+

label を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、break 文や continue 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。

+

label 文は次のように使用します。

+
label :
+   statement
+
+

label の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける statement はどんな文でも結構です。

+

例
+ この例では markLoop というラベルを用いて while ループに名前を付けています。

+
markLoop:
+while (theMark == true)
+   doSomething();
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/while_Statement", "JavaScript/Guide/Loop_Statements/break_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html new file mode 100644 index 0000000000..77fd191f75 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/while_statement/index.html @@ -0,0 +1,35 @@ +--- +title: while 文 +slug: Web/JavaScript/Guide/Loop_Statements/while_Statement +--- +

while 文

+

while 文は、指定した条件が true に評価される限り文を実行します。while 文は次のように使用します。

+
while (condition)
+   statement
+
+

条件が false になるとループ内の statement の実行が停止し、ループの後に続く文にコントロールが渡されます。

+

ループの statement を実行する前に条件がテストされます。条件が true を返すと statement が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、while の後に続く文にコントロールが渡されます。

+

複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。

+

例 1
+ 次の while ループでは n が 3 より小さい限り反復されます。

+
n = 0;
+x = 0;
+while (n < 3) {
+   n++;
+   x += n;
+}
+
+

それぞれの反復で、ループは n をインクリメントし、その値を x に加えています。その結果、x と n は次の値をとります。

+
    +
  • 第 1 段階終了後：n = 1、x = 1
    • +
  • 第 2 段階終了後：n = 2、x = 3
    • +
  • 第 3 段階終了後：n = 3、x = 6
    • +
+

第 3 段階が完了すると条件 n < 3 が true ではなくなっているため、ループは終了します。

+

例 2
+ 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の while ループ内の文は永久に実行されます。条件が決して false にならないためです。

+
while (true) {
+   alert("Hello, world");
+}
+
+

{{ PreviousNext("JavaScript/Guide/Loop_Statements/do...while_Statement", "JavaScript/Guide/Loop_Statements/label_Statement") }}

diff --git a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html new file mode 100644 index 0000000000..ddf781e031 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html @@ -0,0 +1,51 @@ +--- +title: Object Manipulation Statements +slug: Web/JavaScript/Guide/Object_Manipulation_Statements +--- +

オブジェクト操作文

+

JavaScript はオブジェクトの操作に for...in、for each...in および with 文を使用します。

+

for...in 文

+

for...in 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。for...in 文は次のように使用します。

+
for (variable in object) {
+   statements
+}
+
+

例
+ 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。

+
function dump_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj) {
+      result += obj_name + "." + i + " = " + obj[i] + "<br>";
+   }
+   result += "<hr>";
+   return result;
+}
+
+

make および model というプロパティを持つ car というオブジェクトでは次のような結果が得られます。

+
car.make = Ford
+car.model = Mustang
+
+

配列
+ Array の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、for...in 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると for...in 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の for ループを使用したほうがいいでしょう。

+

for each...in 文

+

for each...in は JavaScript 1.6 で導入されるループ文です。これは for...in に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。

+

with 文

+

with 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。

+

with 文は次のように使用します。

+
with (object) {
+   statements
+}
+
+

例
+ 次の with 文では Math オブジェクトがデフォルトのオブジェクトに指定されています。with 文内の文は PI プロパティや cos および sin メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は Math オブジェクトへのものであると想定します。

+
var a, x, y;
+var r = 10;
+with (Math) {
+   a = PI * r * r;
+   x = r * cos(PI);
+   y = r * sin(PI/2);
+}
+
+

注意：with 文を使うことでプログラムをより簡潔にすることができますが、with の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。Core JavaScript 1.5 Reference:Statements:with を参照してください。

+ +

{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}

diff --git a/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html b/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html new file mode 100644 index 0000000000..f2679c1d00 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/objects_and_properties/index.html @@ -0,0 +1,32 @@ +--- +title: オブジェクトとプロパティ +slug: Web/JavaScript/Guide/Objects_and_Properties +--- +

オブジェクトとプロパティ

+

JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。

+
objectName.propertyName
+
+

オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、myCar という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに make、model、year という名前のプロパティをそれぞれ作成することができます。

+
myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+
+

配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして myCar オブジェクトのプロパティにアクセスすることができます。

+
myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+
+

この手の配列は連想配列として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。

+
function show_props(obj, obj_name) {
+   var result = "";
+   for (var i in obj)
+      result += obj_name + "." + i + " = " + obj[i] + "\n";
+   return result;
+}
+
+

関数 show_props(myCar, "myCar") を呼び出すと以下の結果が返されます。

+
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions", "JavaScript/Guide/Creating_New_Objects") }}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..4aa9662292 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/arithmetic_operators/index.html @@ -0,0 +1,47 @@ +--- +title: 算術演算子 +slug: Web/JavaScript/Guide/Operators/Arithmetic_Operators +--- +

算術演算子

+

算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、NaN になることにも注意してください）。

+
1 / 2 // JavaScript では 0.5 を返す
+1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない）
+
+1.0 / 2.0  // JavaScript でも Java でも 0.5 を返す
+
+

さらに、JavaScript では以下の表で示された算術演算子も使用できます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
演算子説明例
%
+ （モジュロ）		2 項演算子。2 つのオペランドで除算したときの整数の余りを返す。12 % 5 は 2 を返す。
++
+ （インクリメント）		単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。x が 3 のとき、++x は x に 4 をセットし、4 を返す。一方、x++ は x に 4 をセットし、3 を返す。
--
+ （デクリメント）		単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。x が 3 のとき、--x は x に 2 をセットし、2 を返す。一方、x-- は x に 2 をセットし、3 を返す。
-
+ （符号反転）		単項演算子。オペランドの符号を反転してその値を返す。x が 3 のとき、-x は -3 を返す。
+

表 3.4：算術演算子

+

{{ PreviousNext("JavaScript/Guide/Operators/Comparison_Operators", "JavaScript/Guide/Operators/Bitwise_Operators") }}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html new file mode 100644 index 0000000000..88a0b0beb7 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/assignment_operators/index.html @@ -0,0 +1,61 @@ +--- +title: 代入演算子 +slug: Web/JavaScript/Guide/Operators/Assignment_Operators +--- +

代入演算子

+

代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。

+

他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
短縮表記した演算子意味
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
+

表 3.2：代入演算子

+

{{ PreviousNext("JavaScript/Guide/Operators", "JavaScript/Guide/Operators/Comparison_Operators") }}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html new file mode 100644 index 0000000000..182802bb5a --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/comparison_operators/index.html @@ -0,0 +1,67 @@ +--- +title: 比較演算子 +slug: Web/JavaScript/Guide/Operators/Comparison_Operators +--- +

比較演算子

+

This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="... 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は === および !== であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。

+
var var1 = 3, var2 = 4;
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
演算子説明true を返す例
等しい (==)オペランドが等しい場合に true を返す。3 == var1
+

"3" == var1

+ 3 == '3'
等しくない (!=)オペランドが等しくない場合に true を返す。var1 != 4
+ var2 != "3"
厳密に等しい (===)オペランドが等しく、かつ同じ型である場合に true を返す。3 === var1
厳密には等しくない (!==)オペランドが等しくなく、かつ/または同じ型でない場合に true を返す。var1 !== "3"
+ 3 !== '3'
より大きい (>)左のオペランドが右のオペランドよりも大きい場合に true を返す。var2 > var1
+ "12" > 2
以上 (>=)左のオペランドが右のオペランド以上である場合に true を返す。var2 >= var1
+ var1 >= 3
より小さい (<)左のオペランドが右のオペランドよりも小さい場合に true を返す。var1 < var2
+ "12" < "2"
以下 (<=)左のオペランドが右のオペランド以下である場合に true を返す。var1 <= var2
+ var2 <= 5
+

表 3.3：比較演算子

+

{{ PreviousNext("JavaScript/Guide/Operators/Assignment_Operators", "JavaScript/Guide/Operators/Arithmetic_Operators")}}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html new file mode 100644 index 0000000000..fa6fa08068 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/logical_operators/index.html @@ -0,0 +1,63 @@ +--- +title: 論理演算子 +slug: Web/JavaScript/Guide/Operators/Logical_Operators +--- +

論理演算子

+

論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。

+ + + + + + + + + + + + + + + + + + + + + + + +
演算子使用法説明
&&expr1 && expr2（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す。
||expr1 || expr2（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は || は true を返し、両方とも false の場合は false を返す。
!!expr（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す。
+

表 3.7：論理演算子

+

false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。

+

以下のコードで &&（論理 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）演算子の例を示します。

+
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）演算子の例を示します。

+
n1=!true              // !t は false を返す
+n2=!false             // !f は true を返す
+n3=!"Cat"             // !t は false を返す
+
+

ショートサーキット評価

+

論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。

+
    +
  • false && anything は false にショートサーキット評価する。
    • +
  • true || anything は true ショートサーキット評価する。
    • +
+

論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の anything の部分は評価されないため、何らかの副作用が生じないように注意してください。

+

{{ PreviousNext("JavaScript/Guide/Operators/Bitwise_Operators", "JavaScript/Guide/Operators/String_Operators") }}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html new file mode 100644 index 0000000000..226faf2b3c --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/special_operators/index.html @@ -0,0 +1,197 @@ +--- +title: 特殊演算子 +slug: Web/JavaScript/Guide/Operators/Special_Operators +--- +

特殊演算子

+

JavaScript は以下の特殊演算子があります。

+
    +
  • {{ Anch("条件演算子") }}
    • +
  • {{ Anch("コンマ演算子") }}
    • +
  • {{ Anch("delete") }}
    • +
  • {{ Anch("in") }}
    • +
  • {{ Anch("instanceof") }}
    • +
  • {{ Anch("new") }}
    • +
  • {{ Anch("this") }}
    • +
  • {{ Anch("typeof") }}
    • +
  • {{ Anch("void") }}
    • +
+

条件演算子

+

条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。

+
condition ? val1 : val2
+
+

condition が true の場合、演算子は val1 の値を選択します。そうでない場合は val2 の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。

+

例えば、

+
status = (age >= 18) ? "adult" : "minor"
+
+

この文では、age が 18 以上の場合 "adult" という値を変数 status に代入します。そうでない場合は "minor" という値を status に代入します。

+

コンマ演算子

+

コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に for ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。

+

例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。

+
for (var i=0, j=9; i <= 9; i++, j--)
+   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
+
+

delete

+

delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。

+
delete objectName
+delete objectName.property
+delete objectName[index]
+delete property // with 文内でのみ有効
+
+

ここで、objectName はオブジェクトの名前を、property は既存のプロパティを、index は配列の要素の位置を表す整数をそれぞれ表しています。

+

4 番目の形式は with 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。

+

delete 演算子を使うことで暗黙的に宣言された変数を削除することができますが、var 文を用いて宣言された変数は削除できません。

+

delete 演算子が成功すると、そのプロパティや要素には undefined がセットされます。また、演算が可能な場合は delete 演算子は true を返します。演算が不可能な場合は false を返します。

+
x=42
+var y= 43
+myobj=new Number()
+myobj.h=4      // プロパティ h を作成
+delete x       // true を返す（暗黙的に宣言されているならば削除可能）
+delete y       // false を返す（var 付きで宣言されているなら削除不可能）
+delete Math.PI // false を返す（定義済みプロパティは削除不可能）
+delete myobj.h // true を返す（ユーザ定義プロパティは削除可能）
+delete myobj   // true を返す（暗黙的に宣言されているならば削除可能）
+
+

配列要素の削除
+ 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a{{ mediawiki.external(3) }} を削除したとき、a{{ mediawiki.external(4) }} は依然 a{{ mediawiki.external(4) }} のままで、a{{ mediawiki.external(3) }} は undefined になります。

+

delete 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree{{ mediawiki.external(3) }} は delete によって除去されます。

+
trees=new Array("redwood","bay","cedar","oak","maple")
+delete trees[3]
+if (3 in trees) {
+   // ここは実行されない
+}
+
+

配列要素は存在させたいが、値は未定義にしたいという場合は、delete 演算子の代わりに undefined キーワードを使用してください。次の例では trees{{ mediawiki.external(3) }} には undefined という値が代入されますが、その配列要素は存在したままになります。

+
trees=new Array("redwood","bay","cedar","oak","maple")
+trees[3]=undefined
+if (3 in trees) {
+   // ここは実行される
+}
+
+

in

+

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。

+
propNameOrNumber in objectName
+
+

ここで、propNameOrNumber はプロパティ名か配列のインデックスを表す文字列式または数値式を、objectName はオブジェクトの名前をそれぞれ表しています。

+

次の例では in 演算子の使用法を示します。

+
// 配列
+trees=new Array("redwood","bay","cedar","oak","maple")
+0 in trees        // true を返す
+3 in trees        // true を返す
+6 in trees        // false を返す
+"bay" in trees    // false を返す（インデックスの指す値ではなく、
+                  // インデックスの数字を指定しなければならない）
+"length" in trees // true を返す（length は Array のプロパティ）
+
+// 定義済みオブジェクト
+"PI" in Math          // true を返す
+myString=new String("coral")
+"length" in myString  // true を返す
+
+// ユーザ定義オブジェクト
+mycar = {make:"Honda",model:"Accord",year:1998}
+"make" in mycar  // true を返す
+"model" in mycar // true を返す
+
+

instanceof

+

instanceof 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。

+
objectName instanceof objectType
+
+

ここで、objectName は objectType と比較するオブジェクトの名前を、objectType は Date や Array のようなオブジェクトの種類をそれぞれ表しています。

+

実行時にオブジェクトの種類を確認する必要があるときは instanceof を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。

+

例えば、次のコードでは instanceof を使用することで theDay が Date オブジェクトであるかどうかを決定しています。theDay は Date オブジェクトなので if 文の中の文は実行されます。

+
theDay=new Date(1995, 12, 17)
+if (theDay instanceof Date) {
+   // 実行される文
+}
+
+

new

+

new 演算子は、ユーザ定義オブジェクトや、Array、Boolean、Date、Function、Image、Number、Object、Option、RegExp、String といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは DbPool、Lock、File、SendMail といったオブジェクトも使用できます。new の使用法は以下のとおりです。

+
objectName = new objectType ( param1 [,param2] ...[,paramN] )
+
+

オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子の使用 にて説明しています。

+

詳しくはコア JavaScript リファレンスの new 演算子 のページを参照してください。

+

this

+

this キーワードを使うことでカレントオブジェクトを参照することができます。一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。

+
this[.propertyName]
+
+

例 1
+ あるオブジェクトの value プロパティの妥当性を確認する validate という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。

+
function validate(obj, lowval, hival) {
+   if ((obj.value < lowval) || (obj.value > hival))
+      alert("Invalid Value!")
+}
+
+

各フォーム要素の onChange イベントハンドラにおいて validate を呼び出します。this を使うことでフォーム要素を渡すことができます。次の例をご覧ください。

+
<B>Enter a number between 18 and 99:</B>
+<INPUT TYPE = "text" NAME = "age" SIZE = 3
+   onChange="validate(this, 18, 99)">
+
+

例 2
+ form プロパティと組み合わせると this でカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onClick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

+
<FORM NAME="myForm">
+Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
+<P>
+<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
+   onClick="this.form.text1.value=this.form.name">
+</FORM>
+
+

typeof

+

typeof 演算子は次の方法のうち、どちらかの方法で使用します。

+
1. typeof operand
+2. typeof (operand)
+
+

typeof 演算子は、未評価のオペランドの型を指す文字列を返します。operand は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。

+

以下の変数を定義することを想定します。

+
var myFun = new Function("5+2")
+var shape="round"
+var size=1
+var today=new Date()
+
+

typeof 演算子はこれらの変数に対して以下の結果を返します。

+
typeof myFun is function
+typeof shape is string
+typeof size is number
+typeof today is object
+typeof dontExist is undefined
+
+

true や null というキーワードに対して、typeof 演算子は以下の結果を返します。

+
typeof true is boolean
+typeof null is object
+
+

数値や文字列に対して、typeof 演算子は以下の結果を返します。

+
typeof 62 is number
+typeof 'Hello world' is string
+
+

プロパティ値に対して、typeof 演算子はプロパティ値の型を返します。

+
typeof document.lastModified is string
+typeof window.length is number
+typeof Math.LN2 is number
+
+

メソッドや関数に対して、typeof 演算子は以下の結果を返します。

+
typeof blur is function
+typeof eval is function
+typeof parseInt is function
+typeof shape.split is function
+
+

定義済みオブジェクトに対して、typeof 演算子は以下の結果を返します。

+
typeof Date is function
+typeof Function is function
+typeof Math is function
+typeof Option is function
+typeof String is function
+
+

void

+

void 演算子は次の方法のうち、どちらかの方法で使用します。

+
1. void (expression)
+2. void expression
+
+

void 演算子は値を返さずに評価する式を指定します。expression は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。

+

void 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。

+

以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると void(0) は undefined に評価され、JavaScript としては影響を及ぼしません。

+
<A HREF="javascript:void(0)">Click here to do nothing</A>
+
+

以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。

+
<A HREF="javascript:void(document.form.submit())">
+Click here to submit</A>
+
+

{{ PreviousNext("JavaScript/Guide/Operators/String_Operators", "JavaScript/Guide/Creating_a_Regular_Expression") }}

diff --git a/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html b/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html new file mode 100644 index 0000000000..41bf8bbc44 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/operators/string_operators/index.html @@ -0,0 +1,8 @@ +--- +title: 文字列演算子 +slug: Web/JavaScript/Guide/Operators/String_Operators +--- +

文字列演算子

+

比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、"my " + "string" は "my string" という文字列を返します。

+

短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 mystring に "alpha" という値が格納されているとき、式 mystring += "bet" の評価結果は "alphabet" となり、この値を mystring に代入します。

+

{{ PreviousNext("JavaScript/Guide/Operators/Logical_Operators", "JavaScript/Guide/Operators/Special_Operators") }}

diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html new file mode 100644 index 0000000000..aecb8a81f1 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html @@ -0,0 +1,14 @@ +--- +title: escape 関数と unescape 関数 +slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions +--- +
+

escape および unescape 関数

+

escape および unescape 関数は文字列をエンコードしたりデコードしたりします。escape 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。unescape は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。

+

これらの関数の構文は以下のとおりです。

+ 
escape(string)
+unescape(string)
+
+

これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。

+ escape および unescape 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では encodeURI、decodeURI、encodeURIComponent および decodeURIComponent を使用してください。
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}

diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html new file mode 100644 index 0000000000..3945955e86 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/eval_function/index.html @@ -0,0 +1,12 @@ +--- +title: eval 関数 +slug: Web/JavaScript/Guide/Predefined_Functions/eval_Function +--- +
+

eval 関数

+

eval 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。

+ 
eval(expr)
+
+

ここで expr は評価される文字列です。

+ 文字列が式を表している場合は eval はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。eval のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために eval を呼び出さないでください。JavaScript は自動的に演算式を評価します。
+

{{ PreviousNext("JavaScript/Guide/Predefined_Functions", "JavaScript/Guide/Predefined_Functions/isFinite_Function") }}

diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html new file mode 100644 index 0000000000..758c6f22a0 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html @@ -0,0 +1,17 @@ +--- +title: 定義済み関数 +slug: Web/JavaScript/Guide/Predefined_Functions +--- +
+

定義済み関数

+

JavaScript にはトップレベルの定義済み関数がいくつかあります。

+ +
+

{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}

diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html new file mode 100644 index 0000000000..2340536ff7 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html @@ -0,0 +1,134 @@ +--- +title: Creating the Hierarchy +slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy +--- +

階層の作成

+

Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。

+

このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。

+

実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは より柔軟なコンストラクタ を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。

+

Image:hier02.gif
+ 図 8.2：Employee オブジェクトの定義

+

以下に示すように、Java と JavaScript の Employee の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function Employee () {
+this.name = "";
+this.dept = "general";
+}
+
+ 		+ 
+public class Employee {
+   public String name;
+   public String dept;
+   public Employee () {
+      this.name = "";
+      this.dept = "general";
+   }
+}
+
+
+

Manager および WorkerBee の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の prototype プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function Manager () {
+this.reports = [];
+}
+Manager.prototype = new Employee;
+
+function WorkerBee () {
+this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ 		+ 
+public class Manager extends Employee {
+   public Employee[] reports;
+   public Manager () {
+      this.reports = new Employee[0];
+   }
+}
+
+public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this.projects = new String[0];
+   }
+}
+
+
+

Engineer および SalesPerson の定義は、WorkerBee の子孫、それゆえに Employee の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は dept プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。

+ + + + + + + + + + + +
JavaScriptJava
+ 
+function SalesPerson () {
+   this.dept = "sales";
+   this.quota = 100;
+}
+SalesPerson.prototype = new WorkerBee;
+
+function Engineer () {
+   this.dept = "engineering";
+   this.machine = "";
+}
+Engineer.prototype = new WorkerBee;
+
+ 		+ 
+public class SalesPerson extends WorkerBee {
+   public double quota;
+   public SalesPerson () {
+      this.dept = "sales";
+      this.quota = 100.0;
+   }
+}
+
+public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      this.dept = "engineering";
+      this.machine = "";
+   }
+}
+
+
+

これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。

+

注意：インスタンスという用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、jane は Engineer のインスタンスであると砕けた言い方をすることもできます。同様に、親、子、祖先、そして子孫という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。

+

Image:hier03.gif
+ 図 8.3：単純な定義を用いたオブジェクトの作成

+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties") }}

+
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html new file mode 100644 index 0000000000..63176fa7e2 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html @@ -0,0 +1,31 @@ +--- +title: The Employee Example +slug: Web/JavaScript/Guide/The_Employee_Example +--- +

従業員の例

+

この章の残りは次の図で示す従業員の階層を使用していきます。

+

Image:hier01.gif

+

図 8.1：単純なオブジェクト階層

+

これの例では以下のオブジェクトを使用しています。

+
    +
  • Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。
    • +
  • Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。
    • +
  • WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。
    • +
  • SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。
    • +
  • Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。
    • +
+

残りの例：

+ +
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}

+
+

 

diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html new file mode 100644 index 0000000000..c6d536602b --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html @@ -0,0 +1,19 @@ +--- +title: Adding Properties +slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Adding_Properties +--- +

プロパティの追加

+

JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。

+
mark.bonus = 3000;
+
+

すると、mark オブジェクトには bonus プロパティができます。しかし、他のどの WorkerBee にもこのプロパティは存在しません。

+

あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると specialty プロパティをすべての従業員に対して追加することができます。

+
Employee.prototype.specialty = "none";
+
+

JavaScript がこの文を実行するとすぐに mark オブジェクトも "none" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに Engineer プロトタイプに対するそれを上書きしたときの効果を示します。

+

Image:hier04.gif
+ 図 8.4：プロパティの追加

+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties", "Core_JavaScript_1.5_Guide:The_Employee_Example:More_Flexible_Constructors") }}

+
+

 

diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html new file mode 100644 index 0000000000..e529b8bb52 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html @@ -0,0 +1,13 @@ +--- +title: Object Properties +slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties +--- +

オブジェクトのプロパティ

+

このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。

+ +
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}

+
diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html new file mode 100644 index 0000000000..798746ead6 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html @@ -0,0 +1,24 @@ +--- +title: Inheriting Properties +slug: >- + Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties +--- +

プロパティの継承

+

次の文を用いて（図 8.3 で示したように）mark オブジェクトを WorkerBee として作成するとします。

+
mark = new WorkerBee;
+
+

JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを this キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に projects プロパティの値をセットします。さらに、内部的な __proto__ プロパティの値として WorkerBee.prototype の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）__proto__ プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 mark にそのオブジェクトをセットします。

+

このプロセスでは mark がプロトタイプチェーンから継承するプロパティとして明示的には mark オブジェクトに値（ローカルの値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（__proto__ プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、mark オブジェクトには次のようなプロパティと値が入ることになります。

+
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+
+

mark オブジェクトは mark.__proto__ の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは プロパティの継承、再び にて議論します。

+

これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして mark に固有の情報を与えます。

+
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+
+
+

{{ PreviousNext("Core JavaScript 1.5 Guide:The Employee Example:Object Properties", "Core JavaScript 1.5 Guide:The Employee Example:Object Properties:Adding Properties") }}

+
diff --git a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html new file mode 100644 index 0000000000..10c2d9e3ff --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html @@ -0,0 +1,36 @@ +--- +title: arguments オブジェクトの使用 +slug: Web/JavaScript/Guide/Using_the_arguments_object +--- +
+

arguments オブジェクトの使用

+

関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。

+ 
arguments[i]
+
+

ここで i は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は arguments{{ mediawiki.external(0) }} となります。引数のトータルの数は arguments.length で示されます。

+

arguments オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。arguments.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、arguments オブジェクトを使用することで各引数を扱うことができます。

+

例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。

+ 
function myConcat(separator) {
+   var result = ""; // リストを初期化する
+   // 引数について繰り返し
+   for (var i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+

この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。

+ 
// "red, orange, blue, " を返す
+myConcat(", ", "red", "orange", "blue");
+
+// "elephant; giraffe; lion; cheetah; " を返す
+myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
+
+// "sage. basil. oregano. pepper. parsley. " を返す
+myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
+
+

さらなる情報については、コア JavaScript リファレンスの Function オブジェクト をご覧ください。

+

JavaScript 1.3 以前のバージョン
+ arguments オブジェクトは Function オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。

+ functionName.arguments{{ mediawiki.external('i') }}
+

{{ PreviousNext("JavaScript/Guide/Calling_Functions", "JavaScript/Guide/Predefined_Functions") }}

diff --git a/files/ja/orphaned/web/javascript/guide/variables/index.html b/files/ja/orphaned/web/javascript/guide/variables/index.html new file mode 100644 index 0000000000..cebaecc949 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/variables/index.html @@ -0,0 +1,62 @@ +--- +title: 変数 +slug: Web/JavaScript/Guide/Variables +--- +

{{ 英語版章題("Variables") }}

+

変数

+

アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は識別子とも呼ばれます。

+

JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。

+

JavaScript 1.5 からは å や ü といった ISO 8859-1 や Unicode のアルファベットも識別子に使えます。Unicode エスケープシーケンス のページに列挙されている \uXXXX 形式の Unicode エスケープシーケンスも識別子に使用できます。

+

Number_hits や temp99 や _name が使用できる名前の例です。

+

{{ 英語版章題("Declaring Variables") }}

+

変数の宣言

+

2 つの方法で変数を宣言できます。

+
    +
  • var というキーワードを使う。例えば、var x = 42。この構文は ローカルおよびグローバル 変数どちらの宣言にも使用可能です。
    • +
  • 単に値を代入する。例えば、x = 42。これはいつでも グローバル変数 を宣言できますが、{{ 原語併記("厳格な JavaScript 警告", "strict JavaScript warning") }}が発生します。この方法は使用すべきではありません。
    • +
+

{{ 英語版章題("Evaluating Variables") }}

+

変数の評価

+

var 文を使用し、初期化せずに宣言された変数は undefined の値をとります。

+

未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます。

+
var a;
+print("a の値は " + a); // "a の値は undefined" を出力
+print("b の値は " + b); // ReferenceError 例外を投げる
+
+

undefined を使うと変数に値が入っているかどうかを確かめられます。以下のコードでは、変数 input には値が代入されておらず、if 文での評価結果は true です。

+
var input;
+if(input === undefined){
+  doThis();
+} else {
+  doThat();
+}
+
+

Not sure how the following is related to "Variables" section undefined は真偽値コンテキストで使用されると false として振る舞います。例えば以下のコードでは、myArray の要素が未定義であるために関数 myFunction が実行されます。

+
var myArray = new Array();
+if (!myArray[0]) myFunction();
+
+

null 変数を評価すると、数値コンテキストにおいては null 値は 0 として振る舞います。また、真偽値コンテキストでは false として振る舞います。

+
var n = null;
+print(n * 32); // prints 0
+
+

{{ 英語版章題("Variable Scope") }}

+

変数のスコープ

+

変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、グローバル（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、ローカル（局所）変数と呼ばれます。

+

JavaScript には ブロック文 のスコープがありません。むしろ、そのブロックを内包しているコードに対して局所化されます。例えば以下のコードは condition が false のとき、例外を投げずに 0 が出力されます。

+
if (condition) {
+  var x = 5;
+}
+print(x ? x : 0);
+
+

JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます。

+
print(x === undefined); // "true" を出力
+var x = 3;
+
+

{{ 英語版章題("Global Variables") }}

+

グローバル変数

+

need links to pages discussing scope chains and the global object グローバル変数は実際にはグローバルオブジェクトのプロパティです。ウェブページではグローバルオブジェクトは window です。そのため、window.variable という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます。

+

したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、phoneNumber という変数を FRAMESET 文書内で宣言すると、子フレームから parent.phoneNumber としてこの変数を参照することができます。

+

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

+

関連項目

+

JavaScript のシャープ変数

+

{{ PreviousNext("JavaScript/Guide/Values", "JavaScript/Guide/Constants") }}

diff --git a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html new file mode 100644 index 0000000000..64da075317 --- /dev/null +++ b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html @@ -0,0 +1,193 @@ +--- +title: 正規表現パターンの記述 +slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern +--- +

正規表現パターンを書く

+ +

正規表現パターンは、/abc/ のような単純な文字、または /ab*c/ や /Chapter (\d+)\.\d*/ のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは 括弧で囲まれた部分文字列のマッチの使用 を参照してください。

+ +

単純なパターンの使用

+ +

単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。

+ +

特殊文字の使用

+ +

1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば /ab*c/ というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。

+ +

以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
文字意味
\次のうちのどちらか。 +
    +
  • 通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、/b/ は 'b' という文字にマッチする。b の前にバックスラッシュを置き、/\b/ とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。
    • +
  • 通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば /a*/ は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、/a\*/ は 'a*' にマッチする。
    • +
+
^入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、/^A/ は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする。
$入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、/t$/ は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする。
*直前の文字の 0 回以上の繰り返しにマッチする。 例えば、/bo*/ は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない。
+直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、/a+/ は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする。
?直前の文字の 0 回か 1 回の繰り返しにマッチする。 +

例えば、/e?le?/ は "angel" の 'el' や "angle" の 'le' にマッチする。

+ +

*、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。

+ 先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明。
.小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、/.n/ は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない。
(x)'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、/(foo)/ は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 1, ..., b から参照できる。
(?:x)'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 1, ..., n から参照することはできない。
x(?=y)'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、/Jack(?=Sprat)/ は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。/Jack(?=Sprat|Frost)/ は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない。
x(?!y)'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、/\d+(?!\.)/ はある数に小数点が続かない場合のみその数にマッチする。正規表現 /\d+(?!\.)/.exec("3.141") は 141 にはマッチするが 3.141 にはマッチしない。
x|y'x' または 'y' にマッチする。 例えば、/green|red/ は "green apple" の "green' や "red apple" の 'red' にマッチする。
{n}n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、/a{2}/ は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする。
{n,}n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、/a{2,}/ は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする。
{n,m}n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、/a{1,3}/ は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意。
[xyz]文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[abcd]/ は /[a-d]/ と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする。
[^xyz]文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[^abc]/ は /[^a-c]/ と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする。
[\b]後退にマッチする。（\b と混同してはならない。）
\bスペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、/\bn\w/ は "noonday" の 'no' にマッチする。また、/\wy\b/ は "possibly yesterday" の 'ly' にマッチする。
\B単語の区切り以外の文字にマッチする。 例えば、/\w\Bn/ は "noonday" の 'on' にマッチする。また、/y\B\w/ は "possibly yesterday" の 'ye' にマッチする。
\cXX には制御文字が入る。文字列中の制御文字にマッチする。 例えば、/\cM/ は文字列中の control-M にマッチする。
\d数字にマッチする。[0-9] と同等。 例えば、/\d/ や /[0-9]/ は "B2 is the suite number" の '2' にマッチする。
\D数字以外の文字にマッチする。[^0-9] と同等。 例えば、/\D/ や /[^0-9]/ は "B2 is the suite number" の 'B' にマッチする。
\f改ページにマッチする。
\n改行にマッチする。
\r復帰にマッチする。
\sスペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。 [ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\s\w*/ は "foo bar" の ' bar' にマッチする。
\Sホワイトスペース以外の 1 文字にマッチする。[^ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\S\w*/ は "foo bar" の 'foo' にマッチする。
\tタブにマッチする。
\v垂直タブにマッチする。
\wアンダースコアを含むどの英数字にもマッチする。[A-Za-z0-9_] と同等。 例えば、/\w/ は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする。
\W前述以外の文字にマッチする。[^A-Za-z0-9_] と同等。 例えば、/\W/ や /[^$A-Za-z0-9_]/ は "50%" の '%' にマッチする。
\nn には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、/apple(,)\sorange\1/ は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする。
\0NUL 文字にマッチする。この後ろに他の数字を続けてはならない。
\xhhhh（2 桁の 16 進数）というコードを持つ文字にマッチする。
\uhhhhhhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。
+ +

表 4.1正規表現における特殊文字

+ +

括弧の使用

+ +

正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては 括弧で囲まれた部分文字列のマッチの使用 で説明しています。

+ +

例えば、/Chapter (\d+)\.\d*/ というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。

+ +

このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。

+ +

マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に ?: を付けてください。例えば、(?:\d+) は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。

+ +

{{ PreviousNext("JavaScript/Guide/Creating_a_Regular_Expression", "JavaScript/Guide/Working_with_Regular_Expressions") }}

diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html new file mode 100644 index 0000000000..1d2e7a4797 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/index/index.html @@ -0,0 +1,22 @@ +--- +title: index +slug: Web/JavaScript/Reference/Global_Objects/Array/index +--- +

概要

+

正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。

+ + + + + + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョンJavaScript 1.2
diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html new file mode 100644 index 0000000000..166ed28656 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/input/index.html @@ -0,0 +1,25 @@ +--- +title: input +slug: Web/JavaScript/Reference/Global_Objects/Array/input +--- +

+

{{ 英語版章題("Summary") }} +

+

概要

+

正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 +

+ + + + + + + + + + + +
Array のプロパティ
静的
実装されたバージョン:JavaScript 1.2, NES 3.0
+
+
+{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Array/input", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/input", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Array/input" } ) }} diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html new file mode 100644 index 0000000000..dc20c31a41 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/array/prototype/index.html @@ -0,0 +1,176 @@ +--- +title: Array.prototype +slug: Web/JavaScript/Reference/Global_Objects/Array/prototype +tags: + - Array + - JavaScript + - Junk + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype +--- +
{{JSRef}}
+ +

解説

+ +

{{jsxref("Array")}} インスタンスは、 Array.prototype を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての Array オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。

+ +

ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 JavaScript への機能の追加の際に問題が発生することがあります。

+ +

豆知識: Array.prototype はそれ自体が {{jsxref("Array")}} です。

+ +
Array.isArray(Array.prototype); // true
+
+ +

{{js_property_attributes(0, 0, 0)}}

+ +

プロパティ

+ +
+
Array.prototype.constructor
+
オブジェクトの prototype を生成する関数を指定します。
+
{{jsxref("Array.prototype.length")}}
+
配列内の要素数を反映します。
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
with バインディングのスコープから除外されるプロパティ名を保持するシンボル。
+
+ +

メソッド

+ +

Mutator メソッド

+ +

これらのメソッドは、配列を書き換えます。

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
配列内で配列内の連続した要素をコピーします。
+
{{jsxref("Array.prototype.fill()")}}
+
配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
+
{{jsxref("Array.prototype.pop()")}}
+
配列から最後の要素を取り除き、戻り値として返します。
+
{{jsxref("Array.prototype.push()")}}
+
配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。
+
{{jsxref("Array.prototype.reverse()")}}
+
配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。
+
{{jsxref("Array.prototype.shift()")}}
+
配列から最初の要素を取り除き、その要素を返します。
+
{{jsxref("Array.prototype.sort()")}}
+
配列内で要素を整列し、配列を返します。
+
{{jsxref("Array.prototype.splice()")}}
+
配列に対して複数の要素を追加したり取り除いたりします。
+
{{jsxref("Array.prototype.unshift()")}}
+
配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。
+
+ +

アクセサーメソッド

+ +

これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。

+ +
+
{{jsxref("Array.prototype.concat()")}}
+
この配列に他の配列や値を結合して新しい配列を返します。
+
{{jsxref("Array.prototype.includes()")}}
+
この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。
+
{{jsxref("Array.prototype.indexOf()")}}
+
指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.join()")}}
+
配列のすべての要素を結合した文字列を返します。
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。
+
{{jsxref("Array.prototype.slice()")}}
+
配列の一部を取り出して新しい配列として返します。
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toString()")}}
+
配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。
+
+ +

反復メソッド

+ +

いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の length 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。

+ +
+
{{jsxref("Array.prototype.entries()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。
+
{{jsxref("Array.prototype.every()")}}
+
指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.filter()")}}
+
指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.find()")}}
+
指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。
+
{{jsxref("Array.prototype.findIndex()")}}
+
指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。
+
{{jsxref("Array.prototype.forEach()")}}
+
配列中のそれぞれの要素について関数を呼び出します。
+
{{jsxref("Array.prototype.keys()")}}
+
新しい Array Iterator を返します。このオブジェクトは配列中の各インデックスのキーを保持します。
+
{{jsxref("Array.prototype.map()")}}
+
配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
+
{{jsxref("Array.prototype.reduce()")}}
+
アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.reduceRight()")}}
+
アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。
+
{{jsxref("Array.prototype.some()")}}
+
指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。
+
{{jsxref("Array.prototype.values()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+
+ +

ジェネリックメソッド (非標準)

+ +

JavaScript の Array オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも length プロパティを持ち、数値プロパティ名を使う (array[5] のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの length や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや length が変更可能であることを要求するため、length プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('ES1')}}{{Spec2('ES1')}}初回定義
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() メソッドを追加
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}includes() メソッドを追加
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}
+ +

ブラウザーの対応

+ + + +

{{Compat("javascript.builtins.Array.prototype")}}

+ +

関連情報

+ +
    +
  • {{jsxref("Array")}}
    • +
  • {{jsxref("Function.prototype")}}
    • +
diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html new file mode 100644 index 0000000000..46bf817819 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/asyncfunction/prototype/index.html @@ -0,0 +1,109 @@ +--- +title: AsyncFunction.prototype +slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +tags: + - Experimental + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +--- +
{{JSRef}}
+ +

AsyncFunction.prototype プロパティは、{{jsxref("AsyncFunction")}} プロトタイプオブジェクトを表します。

+ +

説明

+ +

{{jsxref("AsyncFunction")}} オブジェクトは、AsyncFunction.prototype を継承します。AsyncFunction.prototype は修正できません。

+ +

プロパティ

+ +
+
AsyncFunction.constructor
+
初期値は {{jsxref("AsyncFunction")}}。
+
AsyncFunction.prototype[@@toStringTag]
+
"AsyncFunction" を返す。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Async Function', '#async-function-definitions', 'async function')}}{{Spec2('Async Function')}}提案
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet Explorer EdgeOperaSafari (WebKit)
基本サポート{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

関連項目

+ +
    +
  • {{jsxref("AsyncFunction")}}
    • +
  • {{jsxref("Function")}}
    • +
diff --git a/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html b/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html new file mode 100644 index 0000000000..c25d3dd476 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html @@ -0,0 +1,74 @@ +--- +title: FinalizationRegistry.prototype.cleanupSome() +slug: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome +tags: + - FinalizationRegistry + - JavaScript + - Method + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome +--- +
{{JSRef}}
+ +

cleanupSome() メソッドは、 {{jsxref("FinalizationRegistry")}} 内のオブジェクトのうち、まだコールバックが呼ばれていないが回収されているオブジェクトの数が実装で選択された場合に、クリーンアップコールバックを起動します。このメソッドはオプションです。

+ +

構文

+ +
registry.cleanupSome([callback]);
+
+ +

引数

+ +
+
callback {{optional_inline}}
+
この cleanupSome への呼び出しによって起動されるコールバックだけに使用するコールバックを指定します。指定した場合、このコールバックは FinalizationRegistry で作成されたものの代わりに使用されます。
+
+ +

返値

+ +

undefined です。

+ +

注

+ +

通常、この関数を呼び出すことはありません。コールバックを適切に行うためには、 JavaScript エンジンのガベージコレクターに任せてください。この関数は主に、イベントループを発生させない、通常の JavaScript コードよりも WebAssembly で出てくる可能性の高い、長期に実行されるコードに対応するために存在します。また、コールバックが呼び出されない場合があることにも注意してください (例えば、ターゲットが回収されたレジストリ項目が存在しない場合)。

+ +

レジストリからクリーンアップされる (クリーンアップコールバックを呼び出す) 回収オブジェクトの項目数は、実装で定義されています。実装によっては、対象となる項目を一つだけ削除したり、対象となるすべての項目を削除したり、あるいはその間のどこかで削除したりすることもあります。

+ +

例

+ +

cleanupSome の使用

+ +
registry.cleanupSome?.(heldValue => {
+  // ...
+});
+
+ +

このメソッドはオプションであり、実装によってはこのメソッドを持たない場合があります。詳細は HTML issue #5446 を参照してください。このメソッドはオプションなので、それを呼び出す前にそのメソッドが存在することを確認する必要があります。そのための一つの方法は、上の例のようにオプション連結 (?.) を使用することです。

+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('WeakRefs', '#sec-finalization-registry.prototype.cleanupSome', 'FinalizationRegistry.prototype.cleanupSome')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("javascript.builtins.FinalizationRegistry.cleanupSome")}}

+ +

関連情報

+ +
    +
  • {{jsxref("FinalizationRegistry")}}
    • +
diff --git a/files/ja/orphaned/web/javascript/reference/operators/special/index.html b/files/ja/orphaned/web/javascript/reference/operators/special/index.html new file mode 100644 index 0000000000..cb220a008d --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/operators/special/index.html @@ -0,0 +1,5 @@ +--- +title: Special +slug: Web/JavaScript/Reference/Operators/Special +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html b/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html new file mode 100644 index 0000000000..febf3ac3d6 --- /dev/null +++ b/files/ja/orphaned/web/javascript/reference/operators/special_operators/index.html @@ -0,0 +1,5 @@ +--- +title: Special Operators +slug: Web/JavaScript/Reference/Operators/Special_Operators +--- +This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/orphaned/web/manifest/serviceworker/index.html b/files/ja/orphaned/web/manifest/serviceworker/index.html new file mode 100644 index 0000000000..7215a877d7 --- /dev/null +++ b/files/ja/orphaned/web/manifest/serviceworker/index.html @@ -0,0 +1,77 @@ +--- +title: serviceworker +slug: Web/Manifest/serviceworker +tags: + - Manifest + - ServiceWorker + - Web + - マニフェスト +translation_of: Web/Manifest/serviceworker +--- +
{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
+ +
{{obsolete_header}}
+ + + + + + + + + + + + +
型Object
必須いいえ
+ +

serviceworker メンバーは開発者が PWA を制御するためにインストールするサービスワーカーを記述します。

+ +

例

+ +
"serviceworker": {
+  "src": "./serviceworker.js",
+  "scope": "/app",
+  "type": "",
+  "update_via_cache": "none"
+}
+
+ +

値

+ +

サービスワーカーには以下の値が含まれます (src のみが必須です)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
メンバー説明
srcサービスワーカーのスクリプトのダウンロード元となる URL。これだけが serviceworker メンバーで必須です。
scopeサービスワーカーの登録スコープを定義する URL を表す文字列で、サービスワーカーが制御できる URL の範囲を表します。これは通常、アプリケーションのベース URL からの相対 URL です。既定では、サービスワーカー登録のスコープ値は、サービスワーカーのスクリプトが置かれているディレクトリに設定されています。
type?
update_via_cache +

ユーザーエージェントがサービスワーカーを読み込むときにキャッシュを回避するかどうかです。

+
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.manifest.serviceworker")}}

diff --git a/files/ja/orphaned/web/security/information_security_basics/index.html b/files/ja/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..4eaeff0350 --- /dev/null +++ b/files/ja/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,39 @@ +--- +title: 情報セキュリティの基本 +slug: Web/Security/Information_Security_Basics +tags: + - Beginner + - Landing + - Security + - セキュリティ +translation_of: Web/Security/Information_Security_Basics +--- +

情報セキュリティを基本的に理解しておくことは、ソフトウェアやサイトが危険で脆弱なままで、資産を奪ったりその他の悪意の理由のために弱点を悪用されるのを防ぐのに役立ちます。これらの記事は知るべきことを学ぶのに役立ちます。 この情報から、ウェブ開発を通じて、またそれ以外のコンテンツのデプロイにおいても、セキュリティの役割と重要性に気づくでしょう。

+ +
+
機密性、完全性、可用性
+
セキュリティを理解する上で絶対的な基礎となる、セキュリティの第一の目的を説明します。
+
セキュリティの制御
+
セキュリティ制御の主要なカテゴリを定義し、潜在的な欠点を議論します。
+
TCP/IP セキュリティ
+
SSL のセキュリティの考慮事項に焦点を当てた TCP/IP モデルの概要です。
+
脅威
+
主要な脅威の概念を簡単に案内します。
+
+ +
+
脆弱性
+
主要な分野の脆弱性を定義し、すべてのソフトウェアの脆弱性の存在を議論します。
+
+ +

関連情報

+ + + +

{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}

diff --git a/files/ja/orphaned/web/specification_list/index.html b/files/ja/orphaned/web/specification_list/index.html new file mode 100644 index 0000000000..fb1ee99700 --- /dev/null +++ b/files/ja/orphaned/web/specification_list/index.html @@ -0,0 +1,614 @@ +--- +title: Specification List +slug: Web/Specification_list +translation_of: Web/Specification_list +--- +

Open Webの基盤は幾つもの仕様書によって定義されています。このページではそれらの仕様書をリストしています。

+ +

The Open Web Platform is defined in numerous specifications. This page lists these specifications, as well as links to MDN's documentation (including both tutorials and reference content), and links to status documentation about how complete our documentation project is in that topic.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Specification状態API Introduction & Landing pagesTutorialReferenceDoc status
HTML (one page)
+ {{ SpecName("HTML WHATWG") }}
+  		{{ Spec2("HTML WHATWG") }}  + + +

The HTML Elements.
+ HTML element-related interfaces:
+ {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableCellElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)
+ Other DOM-related interfaces/events/... :
+ {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("CanvasImageSource")}} {{domxref("WindowEventHandlers")}}  {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} Document getter? {{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}}  {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (Event|Document) {{event("load")}} (Event|XMLDocument, HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("load")}} (ProgressEvent|HTMLImageElement){{event("click")}} (Event|any interactive element) {{event("error")}} (Event|HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("beforescriptexecute")}} (Event|HTMLScriptElement) {{event("afterscriptexecute")}} (Event|HTMLScriptElement) {{event("loadstart")}} (ProgressEvent|HTMLImageElement) {{event("loadend")}} (Event|HTMLImageElement) {{event("loadend")}} (ProgressEvent|HTMLImageElement) {{domxref("Window")}} {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}}  {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ValidityState")}} {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatorStorageUtils")}} {{domxref("NavigatorPlugins")}} {{domxref("PluginArray")}} {{domxref("MimeTypeArray")}} {{domxref("Plugin")}} {{domxref("MimeType")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}}  {{domxref("Transferable")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)
+ Events on any HTML*Element, Document and Window objects:
+ {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}
+ Events on any HTML*Element (except HTMLBodyElement and HTMLFrameSetElement), Document and Window objects:
+ {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}
+ Events on the Window objects:
+ {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}
+ Events on the Document objects: {{event("readystatechange")}}

+ 		HTML API
 CSSVariableGetting StartedCSS TutorialsThe CSS3 page list them & the CSS Reference has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.
+ {{SpecName("CSS3 Fonts")}}: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)
+ {{SpecName("CSS3 Transitions")}}: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)
+ {{SpecName("CSS3 Animations")}}: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}
+ {{SpecName("CSS3 Conditional")}}: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}
+ {{SpecName("CSS3 Device")}}: {{domxref("CSSViewportRule")}}
+ {{SpecName("CSS3 Variables")}}: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}		CSSOM
{{SpecName("HTML5 Web Messaging")}} (also in WHATWG HTML){{Spec2("HTML5 Web Messaging")}}  {{domxref("MessageEvent")}} {{domxref("Window.postMessage")}}HTML API
{{SpecName("ES5.1")}}
+ {{SpecName("ES6")}}
+ {{SpecName("ES Int 1.0")}}		{{Spec2('ES5.1')}}
+ {{Spec2('ES6')}}
+ {{Spec2('ES Int 1.0')}}		  JavaScript referenceJavaScript
+

{{SpecName("SVG1.1")}}

+ 		    SVG
WebGL    HTML API
{{SpecName("MathML3")}}    MathML
{{SpecName("DOM WHATWG") }}{{ Spec2("DOM WHATWG") }}DOM Reference  {{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Promise")}} {{ domxref("PromiseResolver")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}} {{ domxref("Range") }}DOM
{{SpecName("UI Events")}}{{Spec2("UI Events")}}  {{domxref("UIEvent")}} {{domxref("FocusEvent")}} {{domxref("MouseEvent")}} {{domxref("WheelEvent")}} {{domxref("KeyboardEvent")}} {{domxref("CompositionEvent")}}DOM
{{SpecName("CSSOM")}}{{ Spec2("CSSOM")}}CSSOM {{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}} +

{{domxref("CSSMarginRule")}}

+ 		CSSOM
{{SpecName("CSSOM View")}}{{ Spec2("CSSOM View")}}  {{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}CSSOM
{{SpecName("Geometry Interfaces")}}{{Spec2("Geometry Interfaces")}}  {{domxref("DOMPointReadOnly")}} {{domxref("DOMPoint")}} {{domxref("DOMRect")}} {{domxref("DOMRectReadOnly")}} {{domxref("DOMRectList")}} {{domxref("DOMQuad")}} {{domxref("DOMMatrixReadOnly")}} {{domxref("DOMMatrix")}}DOM
{{SpecName("DOM Parsing")}}{{ Spec2("DOM Parsing")}}  {{domxref("DOMParser")}} {{domxref("XMLSerializer")}} {{domxref("Element.innerHTML")}} {{domxref("Element.outerHTML")}} {{domxref("Element.insertAdjacentHTML")}} {{domxref("Text.serializeAsCDATA")}} {{domxref("Range.createContextualFragment")}}DOM
{{SpecName("Web Workers")}} (also in WHATWG HTML){{ Spec2("Web Workers")}} Using web workers{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}WebWorkers
{{SpecName("Element Traversal")}}{{Spec2("Element Traversal")}}  {{domxref("ElementTraversal")}} {{domxref("Element")}} (new inheritance)DOM
{{SpecName("File API")}}{{Spec2("File API")}}  {{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}} {{domxref("URL.createObjectURL")}} {{domxref("URL.revokeObjectURL")}}File API
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}} Using fullscreen mode{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}}  {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)HTML API
{{SpecName("IndexedDB")}}{{Spec2("IndexedDB")}}IndexedDBUsing IndexedDB Using IndexedDB in chrome{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}IndexedDB
{{SpecName("Web Audio API")}}{{Spec2("Web Audio API")}}  {{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} {{domxref("AudioDestinationNode")}} {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} {{domxref("ChannelMergerNode")}} {{domxref("ChannelSplitterNode")}} {{event("complete")}} (event) {{domxref("ConvolverNode")}} {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} {{event("ended_(Web_Audio)", "ended")}} (event) {{domxref("GainNode")}} {{domxref("MediaElementAudioSourceNode")}} {{domxref("MediaStreamAudioDestinationNode")}} {{domxref("MediaStreamAudioSourceNode")}} {{domxref("OfflineAudioCompletionEvent")}} {{domxref("OfflineAudioContext")}} {{domxref("OscillatorNode")}} {{domxref("PannerNode")}}{{domxref("PeriodicWave")}} {{domxref("ScriptProcessorNode")}} {{domxref("WaveShaperNode")}}WebAudio
{{SpecName("WebRTC 1.0")}}{{Spec2("WebRTC 1.0")}}  {{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}WebRTC
{{SpecName("Media Capture")}}{{Spec2("Media Capture")}}  {{event("addtrack")}} (event) {{domxref("AudioStreamTrack")}} {{domxref("BlobEvent")}} {{event("ended (MediaStream)")}} (event) {{event("ended (MediaStreamTrack)")}} (event) {{domxref("MediaStream")}} {{domxref("MediaStreamConstraints")}} {{domxref("MediaStreamTrack")}} {{domxref("MediaStreamTrackEvent")}} {{domxref("MediaStreamTrackList")}} {{domxref("MediaTrackConstraints")}} {{event("muted")}} (event) {{domxref("NavigatorUserMedia")}} {{domxref("NavigatorUserMediaError")}} {{event("overconstrained")}} (event) {{event("removetrack")}} (event) {{event("started")}} (event) {{event("unmuted")}} (event) {{domxref("URL")}} {{domxref("VideoStreamTrack")}}WebRTC
{{SpecName("MediaStream Recording")}}{{Spec2("MediaStream Recording")}}  {{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}WebRTC
{{SpecName("Media Source Extensions")}}{{Spec2("Media Source Extensions")}}  {{domxref("MediaSource")}} {{domxref("SourceBuffer")}} {{event("updatestart")}} (event) {{event("update")}} (event) {{event("updateevent")}} (event) {{event("error")}} (event) {{event("abort")}} (event) {{domxref("SourceBufferList")}} {{event("addsourcebuffer")}} (event) {{event("removesourcebuffer")}} (event) {{domxref("VideoPlaybackQuality")}} {{domxref("URL.createObjectURL(MediaSource)")}} {{domxref("HTMLVideoElement.getVideoPlaybackQuality")}} {{domxref("AudioTrack.kind")}} {{domxref("AudioTrack.language")}} {{domxref("AudioTrack.sourceBuffer")}} {{domxref("VideoTrack.kind")}} {{domxref("VideoTrack.language")}} {{domxref("VideoTrack.sourceBuffer")}} {{domxref("TextTrack.kind")}} {{domxref("TextTrack.language")}} {{domxref("TextTrack.sourceBuffer")}} 
{{SpecName("Pointer Lock")}}{{Spec2("Pointer Lock")}} Pointer Lock API{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}}  {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}DOM
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}} Vibration API{{domxref("Navigator.vibrate()")}}Device API
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Battery Status API {{domxref("Navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)Device API
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}} Using geolocation{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("Navigator")}} (implements NavigatorGeolocation) {{domxref("Position")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}}Device API
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}  {{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}Device API
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}}  {{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)CSSOM
{{SpecName("Web Notifications")}}{{Spec2("Web Notifications")}} Using Web notifications{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)HTML API
{{SpecName("AmbientLight")}}{{Spec2("AmbientLight")}} Using light events{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)Device API
{{SpecName("Proximity Events")}}{{Spec2("Proximity Events")}}Proximity Events {{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)Device API
{{SpecName("WebIDL")}}{{Spec2("WebIDL")}}    
{{SpecName("XMLHttpRequest")}}{{Spec2("XMLHttpRequest")}} Using FormData objects{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}HTML API
{{SpecName("Highres Time")}}{{Spec2("Highres Time")}}  {{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}DOM
{{SpecName("Websockets")}} (also in WHATWG HTML){{Spec2("Websockets")}}WebSockets WebSockets referenceWriting WebSocket client applications{{domxref("WebSocket")}} {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}}WebSockets
{{SpecName("Page Visibility API")}}{{Spec2("Page Visibility API")}} Using the Page Visibility API{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)DOM
{{SpecName("RequestAnimationFrame")}}{{Spec2("RequestAnimationFrame")}}  {{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}HTML API
{{SpecName("Server-sent events")}} (also in WHATWG HTML){{Spec2("Server-sent events")}}  {{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)HTML API
{{SpecName("Network Information")}}{{Spec2("Network Information")}} Network Information{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{domxref("Navigator")}} (implements NetworkInformation) {{event("change")}} (event)Device API
{{SpecName("Web Storage")}} (also in WHATWG HTML){{Spec2("Web Storage")}} DOM Storage Guide{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}WebStorage
{{SpecName("Selectors API Level 1")}}{{Spec2("Selectors API Level 1")}}  {{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}DOM
{{SpecName("Selectors API Level 2")}}{{Spec2("Selectors API Level 2")}}  {{cssxref(":scope")}} {{domxref("Document.find()")}} {{domxref("Document.findAll()")}} {{domxref("DocumentFragment.find()")}} {{domxref("DocumentFragment.findAll()")}}
+ {{domxref("Element.find()")}} {{domxref("Element.findAll()")}} {{domxref("Element.matches()")}}		DOM
{{SpecName("Progress Events")}}{{Spec2("Progress Events")}}  {{domxref("ProgressEvent")}}DOM
{{SpecName("Typed Array")}}{{Spec2("Typed Array")}} JavaScript Typed arrays{{domxref("Int8Array")}} {{domxref("Int16Array")}} {{domxref("Int32Array")}} {{domxref("Uint8Array")}} {{domxref("Uint16Array")}} {{domxref("Uint32Array")}} {{domxref("Uint8ClampedArray")}} {{domxref("Float32Array")}} {{domxref("Float64Array")}}, {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("TypedArray")}}, {{domxref("DataView")}}JavaScript
{{SpecName("Gamepad")}}{{Spec2("Gamepad")}}  {{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}Device API
{{SpecName("Navigation Timing")}}{{Spec2("Navigation Timing")}}Navigation Timing APINavigation Timing{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}DOM
{{SpecName("WOFF1.0")}}{{Spec2("WOFF1.0")}}About the Web Open Font Format   
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}WebVTT {{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}HTML API
{{SpecName("Custom Elements")}} aka WebComponents{{Spec2("Custom Elements")}}  {{domxref("document.register()")}} {{cssxref(":unresolved")}} {{domxref("document.createElement()")}}  (new optional argument) {{domxref("document.createElementNS()")}} (new optional argument)Web Components
{{SpecName("Shadow DOM")}}, part of WebComponents{{Spec2("Shadow DOM")}}  Still in flux (lists what looks stable enough).
+ {{HTMLElement("shadow")}} {{domxref("ShadowRoot")}} {{domxref("HTMLShadowElement")}} {{HTMLElement("content")}} {{domxref("HTMLContentElement")}} {{domxref("Element.createShadowRoot()")}} {{domxref("Element.shadowRoot")}}		Web Components
{{SpecName("HTML Templates")}}, part of WebComponents{{Spec2("HTML Templates")}}  {{HTMLElement("template")}} {{domxref("HTMLTemplateElement")}}Web Components
{{SpecName("Touch Events")}}{{Spec2("Touch Events")}} Touch Events{{domxref("Touch")}} {{domxref("TouchList")}} {{domxref("TouchEvent")}} {{event("touchstart")}} (event) {{event("touchend")}} (event) {{event("touchmove")}} (event) {{event("touchcancel")}} (event) {{domxref("Document.createTouch()")}} {{domxref("Document.createTouchList()")}}DOM
{{SpecName("Pointer Events")}}{{Spec2("Pointer Events")}}  {{domxref("PointerEvent")}} {{event("pointerdown")}} (event) {{event("pointerup")}} (event) {{event("pointercancel")}} (event) {{event("pointermove")}} (event) {{event("pointerover")}} (event) {{event("pointerout")}} (event) {{event("pointerenter")}} (event) {{event("pointerleave")}} (event) {{event("gotpointercapture")}} (event) {{event("lostpointercapture")}} (event) {{domxref("Element.ongotpointercapture")}} {{domxref("Element.onlostpointercapture")}} {{domxref("Element.setPointerCapture()")}} {{domxref("Element.releasePointerCapture()")}} {{domxref("GlobalEventHandlers.onpointerdown")}} {{domxref("GlobalEventHandlers.onpointerup")}} {{domxref("GlobalEventHandlers.onpointercancel")}} {{domxref("GlobalEventHandlers.onpointermove")}} {{domxref("GlobalEventHandlers.onpointerover")}} {{domxref("GlobalEventHandlers.onpointerout")}} {{domxref("GlobalEventHandlers.onpointerenter")}} {{domxref("GlobalEventHandlers.onpointerleave")}} {{domxref("Navigator.pointerEnabled")}} {{domxref("Navigator.maxTouchPoints")}} {{cssxref("touch-action")}}DOM
 {{SpecName("HTML Editing")}}{{Spec2("HTML Editing")}}  {{domxref("Selection")}} {{domxref("Document.getSelection()")}} {{domxref("Window.getSelection()")}} {{domxref("EditingBeforeInputEvent")}} {{domxref("EditingInputEvent")}}HTML API
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}  {{domxref("Key")}} {{domxref("CryptoOperation")}} {{event("abort")}} (event) {{event("error")}} (event) {{event("progress")}} (event) {{event("complete")}} (event) {{domxref("KeyOperation")}} {{domxref("Crypto")}} {{domxref("SubtleCrypto")}} {{domxref("Window.crypto")}} {{domxref("WorkerCrypto")}} {{domxref("WorkerGlobalScope.crypto")}} {{domxref("KeyPair")}}Web Crypto
{{SpecName("Undo Manager")}}{{Spec2("Undo Manager")}}  {{domxref("UndoManager")}} {{domxref("Element.undoScope")}} {{domxref("Element.undoManager")}} {{domxref("DOMTransaction")}} {{domxref("DOMTransactionEvent")}}DOM
WebSocket Protocol     
{{SpecName("CORS")}}{{Spec2("CORS")}}    
HTTP HTTP   
TLS     
MediaFragment     
Link: header     
Content-Disposition: header     
{{SpecName("URL")}}{{Spec2("URL")}}  {{domxref("URL")}} {{domxref("URLUtils")}} (no interface object) {{domxref("URLUtilsReadOnly")}} (no interface object) {{domxref("URLQuery")}}DOM
{{SpecName("Encoding")}}{{Spec2("Encoding")}}Encoding API {{domxref("TextDecoder")}} {{domxref("TextEncoder")}}DOM
{{SpecName("Clipboard API")}}{{Spec2("Clipboard API")}}  {{domxref("ClipboardEvent")}} {{event("cut")}} (event) {{event("copy")}} (event) {{event("paste")}} (event)DOM
{{SpecName("Selection API")}}{{Spec2("Selection API")}}    
+ +

 

diff --git a/files/ja/orphaned/web/web_components/status_in_firefox/index.html b/files/ja/orphaned/web/web_components/status_in_firefox/index.html new file mode 100644 index 0000000000..0fa1b2248b --- /dev/null +++ b/files/ja/orphaned/web/web_components/status_in_firefox/index.html @@ -0,0 +1,58 @@ +--- +title: Firefox での Web Components のサポート状況 +slug: Web/Web_Components/Status_in_Firefox +tags: + - API + - Experimental + - Firefox + - Guide + - Web Components + - status +translation_of: Web/Web_Components/Status_in_Firefox +--- +

{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}

+ +

Web Components は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている Gecko での実装状況の一覧を示します。

+ +
+
+

ネイティブサポート

+ +

Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:

+ +
    +
  • {{HTMLElement("template")}}
    • +
+ +

今後実装予定の機能

+ +
    +
  • 新しい同意に基づいた Shadow DOM の実装は、2016 年 Q1 にリリース予定です。Anne と Wilson のブログ投稿に詳細が記述されています。しかし、まだ仕様について 多くの議論や課題 があり、すべてのブラウザへの実装は将来となるでしょう。
    • +
  • Custom elements は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。 +
      +
    • 古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。
      • +
    +
    • +
  • これらの問題について、2016 年 1 月の会議 でベンダが議論するでしょう。
    • +
+ +

放棄された機能

+ +

これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。

+ +
    +
  • HTML imports の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。{{bug(568953)}} をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。
    • +
+ +

Firefox でポリフィルを使用する

+ +

Firefox でポリフィルを使用する際に考慮すべき注意事項があります:

+ +
    +
  • about:config の {{pref("dom.webcomponents.enabled")}} 設定を true に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。
    • +
  • webcomponents.js ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を サポートした 環境と異なる見た目になることに注意してください。
    • +
  • Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。
    • +
  • Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの webcomponents-lite.js バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。
    • +
+
+
diff --git a/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html b/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html new file mode 100644 index 0000000000..8ec467310c --- /dev/null +++ b/files/ja/orphaned/web_content_accessibility_guidelines_1.0/index.html @@ -0,0 +1,25 @@ +--- +title: Web Content Accessibility Guidelines 1.0 +slug: Web_Content_Accessibility_Guidelines_1.0 +tags: + - Accessibility + - Web Development +--- +

+WCAG 1.0 は、W3C の Web Accessibility Inisiative(WAI) によって公開されています。 +

+ +

日本語参考訳(ZSPC訳)： +

+ +

その他の翻訳は 各国語版へのリンク集 を参照のこと。 +


+現在ワーキングドラフトが公開されている [WCAG 2.0] とは、基本的な課題は同じです。WCAG 1.0 に適合していれば大きな変更は必要ありませんが、WCAG 2.0 ではより明確な基準が設けられており、アプローチの仕方も違います。 +

日本においては、WCAG 1.0 のガイドラインの多くが JIS X8341-3 に取り込まれています。 +

diff --git a/files/ja/orphaned/working_with_windows_in_chrome_code/index.html b/files/ja/orphaned/working_with_windows_in_chrome_code/index.html new file mode 100644 index 0000000000..f026024047 --- /dev/null +++ b/files/ja/orphaned/working_with_windows_in_chrome_code/index.html @@ -0,0 +1,7 @@ +--- +title: window.arguments +slug: Web/API/Window/arguments +translation_of: Working_with_windows_in_chrome_code#Passing_data_between_windows +translation_of_original: Web/API/Window.arguments +--- +

『chrome コードでウィンドウを取り扱う』の頁の『ウィンドウ間でのデータのやり取り』の章をご覧下さい。

diff --git a/files/ja/orphaned/xpcom_components_list/index.html b/files/ja/orphaned/xpcom_components_list/index.html new file mode 100644 index 0000000000..16c218290b --- /dev/null +++ b/files/ja/orphaned/xpcom_components_list/index.html @@ -0,0 +1,19 @@ +--- +title: XPCOM components list +slug: XPCOM_components_list +tags: + - Components + - NeedsContent + - XPCOM + - XPCOM API Reference +--- +

ここにはInterfaces一覧のようなコンポーネントの包括的な一覧を必要としています。 +

+

コンポーネントのアルファベット順の一覧 (未完成)

+ +
+
+{{ languages( { "en": "en/XPCOM_components_list", "fr": "fr/Liste_des_composants_XPCOM", "ko": "ko/XPCOM_components_list", "pl": "pl/Lista_komponent\u00f3w_XPCOM" } ) }} diff --git a/files/ja/orphaned/xpcom_part_1/index.html b/files/ja/orphaned/xpcom_part_1/index.html new file mode 100644 index 0000000000..63b340fb59 --- /dev/null +++ b/files/ja/orphaned/xpcom_part_1/index.html @@ -0,0 +1,5 @@ +--- +title: XPCOM Part 1 +slug: XPCOM_Part_1 +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/xpcom_part_2/index.html b/files/ja/orphaned/xpcom_part_2/index.html new file mode 100644 index 0000000000..7866ab4b6c --- /dev/null +++ b/files/ja/orphaned/xpcom_part_2/index.html @@ -0,0 +1,5 @@ +--- +title: XPCOM Part 2 +slug: XPCOM_Part_2 +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/xpcom_part_3/index.html b/files/ja/orphaned/xpcom_part_3/index.html new file mode 100644 index 0000000000..da0fc2b7bf --- /dev/null +++ b/files/ja/orphaned/xpcom_part_3/index.html @@ -0,0 +1,5 @@ +--- +title: XPCOM Part 3 +slug: XPCOM_Part_3 +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/xpcom_part_4/index.html b/files/ja/orphaned/xpcom_part_4/index.html new file mode 100644 index 0000000000..9a2dbb1498 --- /dev/null +++ b/files/ja/orphaned/xpcom_part_4/index.html @@ -0,0 +1,5 @@ +--- +title: XPCOM Part 4 +slug: XPCOM_Part_4 +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/xpcom_part_5/index.html b/files/ja/orphaned/xpcom_part_5/index.html new file mode 100644 index 0000000000..f255b32722 --- /dev/null +++ b/files/ja/orphaned/xpcom_part_5/index.html @@ -0,0 +1,5 @@ +--- +title: XPCOM Part 5 +slug: XPCOM_Part_5 +--- +{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/orphaned/xpcom_plans/index.html b/files/ja/orphaned/xpcom_plans/index.html new file mode 100644 index 0000000000..df1de9d364 --- /dev/null +++ b/files/ja/orphaned/xpcom_plans/index.html @@ -0,0 +1,32 @@ +--- +title: XPCOM plans +slug: XPCOM_plans +tags: + - XPCOM +--- +

{{ Outdated("このページは 2001 年 8 月を最後に更新されておらず、歴史的重要性を残すにとどまるでしょう。") }}

+

もっとも重要な目標: Mozilla の船出。

+

完了

+

XPCOM のもっとも重要な目標は、何年も前から述べられているとおり、ブラウザを船出させることでした。そこまでこぎつけました。そして今、私たちは複数のバージョンの Mozilla ブラウザを得ています。 Netscape 6.x、Galleon、など。最近数週間を通して、次に何をすべきかについて XPCOM を使っているさまざまなグループと意見交換をしました。使用者たちは API セットの変更に追従するための労力を費やしたくない、というひとつのことが、くっきりと明瞭になりました。これらの議論から、私たちは Mozilla 1.0 リリースへの迅速なアプローチとして、要求される XPCOM インタフェースに対して 最小主義的なアプローチをすべきだと信じます (例：どうしても必要な最小限の API だけをフリーズ (固定) する)。

+

安定した API を危機的なほど必要としている二つの利用者は、プラグインと組み込みです。いずれも XPCOM の初期化、停止、コンポーネントとサービスの管理を可能とする XPCOM の API のセットに興味を持っています。 Mozilla 1.0 のためには、XPCOM は最低限としてこの機能性を得られる API をフリーズすべきと信じています。

+

私たちは組み込みグループで作業してきています。そして 必要と考えられるインタフェースのこのリストを提示しました。(これらのインタフェースのいくつかは XPCOM には当てはまらないことに注意) もし、必要と思われるのにこのリストから抜け落ちている XPCOM インタフェースが見つかったら、私 Doug Turner 宛にメールをするか、XPCOM ニュースグループ に投稿するかをぜひお願いします。

+

XPCOM の Mozilla 1.0 への道

+

もっとも重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。

+

私たちのリスト上の現在のインタフェースリストは、基本的な COM の機能を含んでいます。スレッド処理、リフレクション、多くのデータ構造など、ほとんどの XPCOM の機能は Mozilla 1.0 を前にしたこの時間枠において、フリーズされないでしょう。

+

この SDK はインタフェースのセットと接続ライブラリをフリーズすることも含むでしょう。このインタフェースのセットは、組み込みとプラグインの要求によって定義されてきました。これらのインタフェースは以下のものを含んでいます:

+
  • nsIClassInfo
  • nsIComponentManager
  • nsIDirectoryService
  • nsIDirectoryServiceProvider
  • nsIFactory
  • nsIFile
  • nsIInputStream
  • nsIInterfaceRequestor
  • nsILocalFile
  • nsIMemory
  • nsIModule
  • nsIObserver
  • nsIOutputStream
  • nsIProperties
  • nsIServiceManager
  • nsISimpleEnumerator
  • nsISupports
  • nsIWeakReference
    • +
+

接続ライブラリは、気軽に使えるクラスとマクロのセット、そしてフリーズされていないクラスで構成されます。これをコンポーネント開発者は、例えば XPCOM にリンクしなくてよい nsCOMPtr の構成要素を活用することができます。次に重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。

+

ひとたび、フリーズされたインタフェースのセットを得ました。これらのインタフェースの実装の内部の起動・終了・スレッド処理などの問題に言及しなくてはいけません。トラッキングバグ {{ Bug(101976) }} の追跡で言及されるべき知られた問題を一覧とすることができます。

+

Mozilla 1.0 以降: XPCOM の改良

+

XPCOM 改良のための全体的な計画は、小さくすること、シンプルにすること、クリーンにすること、必要な機能によりチューニングすること、より関係する標準に沿わせること、などを中心に展開しています。 XPCOM を軽く保つほど、XPCOM のデバッグ、移植、保守が楽になり、アプリケーションの組み込みの手間が減ります。そのためには、それほどには活用されない XPCOM の機能はもう必要ないでしょう。単独のクライアントが使うためだけに存在するものは、検証済みでなくてはならず、願わくば根絶されるべきです。

+

XPCOM の機能の大きな部分が、C++ クライアントへ向けられています。標準 C++ ライブラリを使った組み込みアプリケーションを期待することができます。 XPCOM の機能が標準 C++ ライブラリによって提供される類似のサービスと重なっている場所では、 API と機能を標準ライブラリのそれへ変換したいです。いずれは、クライアントは標準ライブラリから実装を入手できるようになり、API が取り除かれるようになります。

+

標準ライブラリから提供されるのではないこれらの機能のために、私たちは適切に標準ライブラリと互換を持った API を作りたいのです。例えば、XPCOM の container は標準アルゴリズムとともに働くべきでしょう。

+

参考資料

+
  • 既知の作業
  • {{ Bug(98278) }} - XPCOM API 変更についてのメタバグ
    • +
+
+

原文書の情報

+
  • 著者: 不明
  • 最終日: October 30, 2001
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細.
    • +
+
diff --git a/files/ja/participating_in_the_mozilla_project/index.html b/files/ja/participating_in_the_mozilla_project/index.html deleted file mode 100644 index 608cb6f2f3..0000000000 --- a/files/ja/participating_in_the_mozilla_project/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Mozilla プロジェクトに参加する -slug: Participating_in_the_Mozilla_project ---- -

もしあなたが Mozilla プラットフォームに関連するコードでのバグの修正やその他の仕事を手伝うことに興味があるのなら、あなたに適切な方向を指し示すであろう文書がここで見つけられます。

- -

ドキュメンテーショントピックス

-
Mozilla 開発者ガイド
Mozilla のコードベースに貢献するための開発 Tips とガイド。
Mozilla ソースコード
ダウンロードもしくはバージョン管理システムを通してMozilla のコードを手に入れる方法とあなたのコードをツリーに入れる方法についての情報。
ビルドに関するドキュメンテーション
Firefox と Thunderbird を含む、Mozilla プロジェクトのビルド方法についての情報。このページは内容の整理を必要としています。
Mozilla プラットフォーム
Mozilla プラットフォームについての情報。その API 群と技術のすべて、そして、あなた自身のプロジェクトでそれらを利用する方法など。
Mozilla を文書化する
Mozilla のためおよび開かれた Web のために私たちのドキュメンテーションの作成と改善に協力してください。
デバッグ
Mozilla のコードをデバッグするときに従うべき、役に立つTips とガイドライン。
品質保証（QA)
テストおよびバグトラッキングについての情報。
ローカライゼーション
Mozilla プロジェクトやドキュメンテーションなどを複数の言語に翻訳することに関する情報。
-

ツール

-
Bugzilla
Mozilla プロジェクトのための問題を追跡するために使われている Bugzilla データベース。
MXR
Web 上で Mozilla のソースコードレポジトリをブラウズ、検索できます。
Bonsai
Bonsai ツールを使えば、レポジトリ上のどのファイルを誰が変更し、そして、いつそれがなされたのかを見つけられます。
Tinderbox
Tinderbox はツリーのステータス（現在ビルドが成功しているかどうか）を示します。作業ツリーでの作業を確実にするために、チェックインとチェックアウトの前にチェックしてください。
クラッシュトラッキング
Socorro および Talkback クラッシュ報告システムについての情報。
パフォーマンストラッキング
Mozilla プロジェクトのパフォーマンス情報が見られます。
開発者フォーラム
Mozilla の開発上の問題について話すことができるディスカッションフォーラムのトピック別リスト。
-
-

 {{ languages( { "en": "en/Participating_in_the_Mozilla_project"} ) }}

diff --git a/files/ja/plugins/guide/constants/index.html b/files/ja/plugins/guide/constants/index.html new file mode 100644 index 0000000000..3553d98300 --- /dev/null +++ b/files/ja/plugins/guide/constants/index.html @@ -0,0 +1,13 @@ +--- +title: Constants +slug: NPAPI/Constants +translation_of: Plugins/Guide/Constants +translation_of_original: NPAPI/Constants +--- +

このセクションはプラグイン API で使用されるプログラム定義のリファレンスです。すべてのプラグイン定義は npapi.h にあります。 +


+

+

エラーコード

+ +
コード 値 説明
NPERR_NO_ERROR 0 エラーは起こりませんでした
NPERR_GENERIC_ERROR 1 特定のエラーコードを持たないエラーが起こりました
NPERR_INVALID_INSTANCE_ERROR 2 プラグインへ無効なインスタンスが渡されました
NPERR_INVALID_FUNCTABLE_ERROR 3 関数表が無効です
NPERR_MODULE_LOAD_FAILED_ERROR 4 プラグインの読み込みに失敗しました
NPERR_OUT_OF_MEMORY_ERROR 5 メモリの割り当てに失敗しました
NPERR_INVALID_PLUGIN_ERROR 6 プラグインが見つからないか無効です
NPERR_INVALID_PLUGIN_DIR_ERROR 7 プラグインディレクトリが見つからないか無効です
NPERR_INCOMPATIBLE_VERSION_ERROR 8 プラグインと Communicator のバージョンが一致しません
NPERR_INVALID_PARAM 9 パラメータが無いか無効です
NPERR_INVALID_URL 10 URL が見つからないか無効です
NPERR_FILE_NOT_FOUND 11 ファイルが見つからないか無効です
NPERR_NO_DATA 12 ストリームにデータが含まれていません
NPERR_STREAM_NOT_SEEKABLE 13 シークできるストリームが期待されます
+{{ languages( { "en": "en/NPAPI/Constants" } ) }} diff --git a/files/ja/reftest_opportunities_files/index.html b/files/ja/reftest_opportunities_files/index.html deleted file mode 100644 index 222ebff05c..0000000000 --- a/files/ja/reftest_opportunities_files/index.html +++ /dev/null @@ -1,2245 +0,0 @@ ---- -title: reftest opportunities files -slug: reftest_opportunities_files -tags: - - Automated testing - - Developing Mozilla ---- -

Introduction

-

reftest に便利かもしれない Mozilla のソース内のファイルです。それぞれのファイルがチェックインされた理由は常に明白ではありませんが、チェックされるなんらかの必要が推測されます。これらの多くは レイアウトリグレッション テストツールでチェックされました。そのテストツールは使うには難しく書かれ、一見エラーではなかった大量のリグレッションを報告しました -

あなたがこれらのページの 1 つの HTML を考察でき、同じ視覚的な出力を手に入れる方法がわかるなら、reftest する明確なチャンスです。 例えば、何らかの HTML が予期されない場所にあり、無視されるべきなら、私たちは追加のマークアップがない HTML ファイルに対して適応させることができます {{ 訳注("For example, if some HTML is in an unexpected place and is supposed to be ignored, then we can match against an html file that is missing that extra mark-up.") }}。他の場合では、リファレンスページのデザインはより緻密になるかもしれません。 -

このリストの中のファイルを指摘し、出力を比較するのに使う HTML リファレンスを添付できるなら、さしあたり、Bugzilla の Core プロダクトの Testing コンポーネントにバグを作ってください。疑問がありましたら、news.mozilla.org の mozilla.dev.quality ニューズグループ (Google Groups で見る)へ投稿してください。 -

-

dbaron のテスト

- -

Mozilla のソースツリーのテスト

-
  • {{ Source("parser/htmlparser/tests/html/xmp005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/value001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/utf8001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/usascii.html") }} -
  • {{ Source("parser/htmlparser/tests/html/title01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/title.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tiny.html") }} -
  • {{ Source("parser/htmlparser/tests/html/thead001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/text003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/text002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/text001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tbody001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/target01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag008.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag007.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag006.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag004.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tag001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/tableall.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table205.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table204.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table203.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table202.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table201.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table200.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table07.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05o.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05n.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05m.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05l.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05k.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05d.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05c.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05b.html") }} -
  • {{ Source("parser/htmlparser/tests/html/table05a.html") }} -
  • {{ Source("parser/htmlparser/tests/html/strike008.html") }} -
  • {{ Source("parser/htmlparser/tests/html/strike007.html") }} -
  • {{ Source("parser/htmlparser/tests/html/strike006.html") }} -
  • {{ Source("parser/htmlparser/tests/html/strike005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/strike002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/span003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/span002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/span001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/residual.html") }} -
  • {{ Source("parser/htmlparser/tests/html/quote003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/quote002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/quote001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/q001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre016.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre015.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre012.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre007.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre006.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre004.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/pre001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/param002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/param001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/option.html") }} -
  • {{ Source("parser/htmlparser/tests/html/obj003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/obj002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/obj001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/nulltest.html") }} -
  • {{ Source("parser/htmlparser/tests/html/newlines.html") }} -
  • {{ Source("parser/htmlparser/tests/html/list003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/list002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/list001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/layer01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/layer003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/layer002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/layer001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/java.html") }} -
  • {{ Source("parser/htmlparser/tests/html/insdel02.html") }} -
  • {{ Source("parser/htmlparser/tests/html/insdel01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/ins003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/ins002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/ins001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/imgmap001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/html001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/home01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/head03.html") }} -
  • {{ Source("parser/htmlparser/tests/html/head02.html") }} -
  • {{ Source("parser/htmlparser/tests/html/head01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/form002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/form001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/fieldset003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/fieldset002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/fieldset001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/entity_list.html") }} -
  • {{ Source("parser/htmlparser/tests/html/entity_attrlist.html") }} -
  • {{ Source("parser/htmlparser/tests/html/entity001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/endswithcr.html") }} -
  • {{ Source("parser/htmlparser/tests/html/doc002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/doc001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del011.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del010.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del009.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del008.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del007.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del006.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del004.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/del001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/comments.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col016.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col015.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col014.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col013.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col012.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col011.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col010.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col009.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col008.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col007.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col006.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col005.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col004.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/col001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/center002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/center001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/button002.html") }} -
  • {{ Source("parser/htmlparser/tests/html/button001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug991.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug9563.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug9536.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8996.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8913.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8771.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8738.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8681.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8080.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug8056.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug7889.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug7823.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug7724.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug7723.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug7447.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug6925.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug6233.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug5859.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug4956.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug4825.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug4814.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug4809.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug466.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug3073.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug256731.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug2447.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug2419.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug24003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug23831.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug23780.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug23680.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug23529.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug22157.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug22142.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug22025.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21779.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21692.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21689.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21424.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21318.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug21186.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug20199.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug20178.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug20030.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug19194.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug19172.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug18865.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug18403.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug18185.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug18159.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug14918.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug14636.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug14276.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug13107.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug12632.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug1259.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug12468.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug12269.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug12118.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug11381.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug10324.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bug10049.html") }} -
  • {{ Source("parser/htmlparser/tests/html/br001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bigtxt.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bigscript.html") }} -
  • {{ Source("parser/htmlparser/tests/html/bdo001.html") }} -
  • {{ Source("parser/htmlparser/tests/html/badscript.html") }} -
  • {{ Source("parser/htmlparser/tests/html/attribute_quote_bug1.html") }} -
  • {{ Source("parser/htmlparser/tests/html/atoi01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/aname01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/acronym1.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table_illegal_2.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table_illegal_1.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table06.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05j.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05i.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05h.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05g.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05f.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05e.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table05.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table04.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table03.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table02.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Table01.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Entity.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Bug1239.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Bug1220.html") }} -
  • {{ Source("parser/htmlparser/tests/html/Bug1203.html") }} -
  • {{ Source("parser/htmlparser/tests/html/96130.html") }} -
  • {{ Source("parser/htmlparser/tests/html/94208.html") }} -
  • {{ Source("parser/htmlparser/tests/html/93365.html") }} -
  • {{ Source("parser/htmlparser/tests/html/92530.html") }} -
  • {{ Source("parser/htmlparser/tests/html/91051.html") }} -
  • {{ Source("parser/htmlparser/tests/html/88992.html") }} -
  • {{ Source("parser/htmlparser/tests/html/88746.html") }} -
  • {{ Source("parser/htmlparser/tests/html/84491.html") }} -
  • {{ Source("parser/htmlparser/tests/html/84000.html") }} -
  • {{ Source("parser/htmlparser/tests/html/79492.html") }} -
  • {{ Source("parser/htmlparser/tests/html/78848.html") }} -
  • {{ Source("parser/htmlparser/tests/html/78444.html") }} -
  • {{ Source("parser/htmlparser/tests/html/77746.html") }} -
  • {{ Source("parser/htmlparser/tests/html/77352.html") }} -
  • {{ Source("parser/htmlparser/tests/html/70148.html") }} -
  • {{ Source("parser/htmlparser/tests/html/69576.html") }} -
  • {{ Source("parser/htmlparser/tests/html/67874.html") }} -
  • {{ Source("parser/htmlparser/tests/html/67569.html") }} -
  • {{ Source("parser/htmlparser/tests/html/65467.html") }} -
  • {{ Source("parser/htmlparser/tests/html/6148.html") }} -
  • {{ Source("parser/htmlparser/tests/html/58809.html") }} -
  • {{ Source("parser/htmlparser/tests/html/58455.html") }} -
  • {{ Source("parser/htmlparser/tests/html/56245_3.html") }} -
  • {{ Source("parser/htmlparser/tests/html/56245_2.html") }} -
  • {{ Source("parser/htmlparser/tests/html/56245_1.html") }} -
  • {{ Source("parser/htmlparser/tests/html/54845.html") }} -
  • {{ Source("parser/htmlparser/tests/html/54651.html") }} -
  • {{ Source("parser/htmlparser/tests/html/53112.html") }} -
  • {{ Source("parser/htmlparser/tests/html/51161.html") }} -
  • {{ Source("parser/htmlparser/tests/html/50050.html") }} -
  • {{ Source("parser/htmlparser/tests/html/48351.html") }} -
  • {{ Source("parser/htmlparser/tests/html/48256.html") }} -
  • {{ Source("parser/htmlparser/tests/html/47535.html") }} -
  • {{ Source("parser/htmlparser/tests/html/44791.html") }} -
  • {{ Source("parser/htmlparser/tests/html/44479.html") }} -
  • {{ Source("parser/htmlparser/tests/html/43678.html") }} -
  • {{ Source("parser/htmlparser/tests/html/40855.html") }} -
  • {{ Source("parser/htmlparser/tests/html/40809_LF.html") }} -
  • {{ Source("parser/htmlparser/tests/html/40809_CR.html") }} -
  • {{ Source("parser/htmlparser/tests/html/40713.html") }} -
  • {{ Source("parser/htmlparser/tests/html/40143.html") }} -
  • {{ Source("parser/htmlparser/tests/html/35806.html") }} -
  • {{ Source("parser/htmlparser/tests/html/32782.html") }} -
  • {{ Source("parser/htmlparser/tests/html/3248.html") }} -
  • {{ Source("parser/htmlparser/tests/html/30487.html") }} -
  • {{ Source("parser/htmlparser/tests/html/27490.html") }} -
  • {{ Source("parser/htmlparser/tests/html/26853.html") }} -
  • {{ Source("parser/htmlparser/tests/html/26347.html") }} -
  • {{ Source("parser/htmlparser/tests/html/24462.html") }} -
  • {{ Source("parser/htmlparser/tests/html/24184.html") }} -
  • {{ Source("parser/htmlparser/tests/html/22596.html") }} -
  • {{ Source("parser/htmlparser/tests/html/22480.html") }} -
  • {{ Source("parser/htmlparser/tests/html/22263.html") }} -
  • {{ Source("parser/htmlparser/tests/html/20087.html") }} -
  • {{ Source("parser/htmlparser/tests/html/19116.html") }} -
  • {{ Source("parser/htmlparser/tests/html/187790.html") }} -
  • {{ Source("parser/htmlparser/tests/html/184029_iframe.html") }} -
  • {{ Source("parser/htmlparser/tests/html/184029.html") }} -
  • {{ Source("parser/htmlparser/tests/html/183711.html") }} -
  • {{ Source("parser/htmlparser/tests/html/18308.html") }} -
  • {{ Source("parser/htmlparser/tests/html/17003.html") }} -
  • {{ Source("parser/htmlparser/tests/html/15204.html") }} -
  • {{ Source("parser/htmlparser/tests/html/149877.html") }} -
  • {{ Source("parser/htmlparser/tests/html/142965_1.html") }} -
  • {{ Source("parser/htmlparser/tests/html/142965.html") }} -
  • {{ Source("parser/htmlparser/tests/html/124788.html") }} -
  • {{ Source("parser/htmlparser/tests/html/102370.html") }} -
  • {{ Source("parser/htmlparser/tests/html/100466.html") }} -
  • {{ Source("parser/htmlparser/tests/html/100397.html") }} -
  • {{ Source("layout/mathml/tests/test.html") }} -
  • {{ Source("layout/mathml/tests/symbol.html") }} -
  • {{ Source("layout/html/tests/tags/xmp/2.html") }} -
  • {{ Source("layout/html/tests/tags/xmp/1.html") }} -
  • {{ Source("layout/html/tests/tags/title/3.html") }} -
  • {{ Source("layout/html/tests/tags/title/2.html") }} -
  • {{ Source("layout/html/tests/tags/title/1.html") }} -
  • {{ Source("layout/html/tests/tags/textarea/1.html") }} -
  • {{ Source("layout/html/tests/tags/plaintext/1.html") }} -
  • {{ Source("layout/html/tests/tags/blockquote/2.html") }} -
  • {{ Source("layout/html/tests/tags/blockquote/1.html") }} -
  • {{ Source("layout/html/tests/tags/base/1.html") }} -
  • {{ Source("layout/html/tests/table/testcases/wf_table_index.html") }} -
  • {{ Source("layout/html/tests/table/testcases/wa_table_tr_align.html") }} -
  • {{ Source("layout/html/tests/table/testcases/wa_table_thtd_rowspan.html") }} -
  • {{ Source("layout/html/tests/table/testcases/slashlogo.html") }} -
  • {{ Source("layout/html/tests/table/testcases/nestedTables.html") }} -
  • {{ Source("layout/html/tests/table/printing/theadtfoot.html") }} -
  • {{ Source("layout/html/tests/table/printing/thead.html") }} -
  • {{ Source("layout/html/tests/table/printing/tfoot.html") }} -
  • {{ Source("layout/html/tests/table/printing/splitCell-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/splitCell-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/split3Rows.html") }} -
  • {{ Source("layout/html/tests/table/printing/split2Rows.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug92215.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug85738.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug82401.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug80966.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug66804.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug61663.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug59280-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug59280-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug58665.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug57467.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug57378.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug54829.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug53690.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug362348.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug26792.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug24000-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug24000-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug165772-5.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug165772-4.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug165772-3.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug165772-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug165772-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug153785-5.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug153785-4.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug153785-3.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug153785-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug153785-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug145842.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug138349-2.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug138349-1.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug126118.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug125543.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug124041_iframe.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug124041.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug123983.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug111028Top.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug111028Middle.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug111028Bottom.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug111028.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug105166.html") }} -
  • {{ Source("layout/html/tests/table/printing/bug102784.html") }} -
  • {{ Source("layout/html/tests/table/other/wf_table_index.html") }} -
  • {{ Source("layout/html/tests/table/other/wa_table_tr_align.html") }} -
  • {{ Source("layout/html/tests/table/other/wa_table_thtd_rowspan.html") }} -
  • {{ Source("layout/html/tests/table/other/table-intrinsic-cases-standards.html") }} -
  • {{ Source("layout/html/tests/table/other/table-intrinsic-cases-quirks.html") }} -
  • {{ Source("layout/html/tests/table/other/slashlogo.html") }} -
  • {{ Source("layout/html/tests/table/other/padding.html") }} -
  • {{ Source("layout/html/tests/table/other/nestedTables.html") }} -
  • {{ Source("layout/html/tests/table/other/nested2.html") }} -
  • {{ Source("layout/html/tests/table/other/ms.html") }} -
  • {{ Source("layout/html/tests/table/other/move_row.html") }} -
  • {{ Source("layout/html/tests/table/other/empty_cells.html") }} -
  • {{ Source("layout/html/tests/table/other/cellspacing.html") }} -
  • {{ Source("layout/html/tests/table/other/cell_widths.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_yellow_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_yellow.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_white_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_white.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_teal_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_teal.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_silver_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_silver.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_red_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_red.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_purple_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_purple.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_olive_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_olive.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_navy_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_navy.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_maroon_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_maroon.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_lime_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_lime.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_green_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_green.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_gray_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_gray.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_fuchsia_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_fuchsia.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_blue_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_blue.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_black_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_black.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tr_bgcolor_aqua_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_align_justify.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_align_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/thead_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/th_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/th_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/th_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/th_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_align_justify.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_align_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tfoot_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/td_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/td_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/td_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/td_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_align_justify.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_align_char.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tbody_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_width_px.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_width_percent.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_width.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_rowspan.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_height.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_colspan.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_th_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_width.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_rowspan.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_nowrap.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_height.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_colspan.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_td_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_style.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_row_th_nowrap.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onmouseup.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onmouseover.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onmouseout.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onmousemove.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onmousedown.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onkeyup.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onkeypress.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onkeydown.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_ondblclick.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_onclick.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_id.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_default.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_class.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_cellspacing_pct.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_cellspacing.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_cellpadding_pct.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_cellpadding.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_caption_align_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_caption_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_caption_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_caption_align_bot.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_border_3.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_border_2.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_border_1.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_border_0.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_yellow_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_yellow.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_white_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_white.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_teal_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_teal.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_silver_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_silver.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_red_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_red.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_purple_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_purple.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_olive_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_olive.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_navy_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_navy.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_maroon_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_maroon.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_lime_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_lime.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_green_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_green.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_gray_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_gray.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_fuchsia_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_fuchsia.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_blue_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_blue.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_black_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_black.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_aqua_rgb.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_bgcolor_aqua.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/tables_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_rules_rows.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_rules_none.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_rules_groups.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_rules_cols.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_rules_all.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_row_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_row_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_row_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_dynamic_deactivate.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_dynamic_activate.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_td_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_tbody_sibling.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_tbody.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_table_caption.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_row_sibling.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_row.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_cell_sibling.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_style_reflow_cell.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_hidden_tr.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_hidden_td.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_hidden_tbody.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_hidden_table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_dirty_reflow_tbody.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_dirty_reflow_table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_dirty_reflow_row.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_dirty_reflow.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_hidden_table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_hidden.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_overflow_caption.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_vsides.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_void.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_rhs.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_lhs.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_hsides.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_box.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_border.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_below.html") }} -
  • {{ Source("layout/html/tests/table/marvin/table_frame_above.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_width_px.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_width_pct.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_valign_top.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_valign_middle.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_valign_bottom.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_valign_baseline.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_span.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_align_right.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_align_left.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_align_justify.html") }} -
  • {{ Source("layout/html/tests/table/marvin/colgroup_align_center.html") }} -
  • {{ Source("layout/html/tests/table/marvin/col_span.html") }} -
  • {{ Source("layout/html/tests/table/marvin/body_thead.html") }} -
  • {{ Source("layout/html/tests/table/marvin/body_tfoot.html") }} -
  • {{ Source("layout/html/tests/table/marvin/body_tbody.html") }} -
  • {{ Source("layout/html/tests/table/marvin/body_col.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table-row.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table-row-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table-column.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table-column-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_simple-table-cell.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table-row.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table-row-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table-column.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table-column-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_position-table-cell.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_layers-show.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_layers-opacity.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_layers-hide.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_index.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_fixed-bg.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-row.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-row-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-quirks.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-column.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-column-group.html") }} -
  • {{ Source("layout/html/tests/table/marvin/backgr_border-table-cell.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug94341.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug92647.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug91934.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug91443.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug90960.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug9043.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug8950.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug86314.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug8398.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug80817.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug77982.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug7522.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug72181.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug66804.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug52598.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug52531.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug47252.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug44148.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug43732.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug42643.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug40721.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug39209.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug27124.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug19535.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug175455-3.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug175455-2.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug175455-1.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug151230.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug144024-3_printing.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug144024-2_printing.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug144024-1_printing.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug138292.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug135112.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug130550.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug1295.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug127471.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug127022.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug11479.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug114706.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug113659.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug1128.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug111872.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug110523.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug107857.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug106024.html") }} -
  • {{ Source("layout/html/tests/table/interactive/bug105268.html") }} -
  • {{ Source("layout/html/tests/table/interactive/TableIncrementalReflow.html") }} -
  • {{ Source("layout/html/tests/table/images/adforce_imgis_com.html") }} -
  • {{ Source("layout/html/tests/table/dom/tableDom.js") }} -
  • {{ Source("layout/html/tests/table/dom/tableDom.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertTbodyRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertTbodyExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertRowsRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertRowsExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCols5.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCols4.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCols3.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCols2.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCols1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertColGroups2.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertColGroups1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCellsRebuild2.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCellsRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCellsExpand2.html") }} -
  • {{ Source("layout/html/tests/table/dom/insertCellsExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteTbodyRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteTbodyExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteRowsShrink1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteRowsRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteColGroup2.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteColGroup1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCol3.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCol2.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCol1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCellsShrink2.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCellsShrink1.html") }} -
  • {{ Source("layout/html/tests/table/dom/deleteCellsRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendTbodyExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendRowsExpand1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendColGroup1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendCol2.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendCol1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendCellsRebuild1.html") }} -
  • {{ Source("layout/html/tests/table/dom/appendCells1.html") }} -
  • {{ Source("layout/html/tests/table/core/table_widths.html") }} -
  • {{ Source("layout/html/tests/table/core/table_rules.html") }} -
  • {{ Source("layout/html/tests/table/core/table_heights.html") }} -
  • {{ Source("layout/html/tests/table/core/table_frame.html") }} -
  • {{ Source("layout/html/tests/table/core/standards1.html") }} -
  • {{ Source("layout/html/tests/table/core/row_span.html") }} -
  • {{ Source("layout/html/tests/table/core/one_row.html") }} -
  • {{ Source("layout/html/tests/table/core/nested1.html") }} -
  • {{ Source("layout/html/tests/table/core/misc.html") }} -
  • {{ Source("layout/html/tests/table/core/margins.html") }} -
  • {{ Source("layout/html/tests/table/core/conflicts.html") }} -
  • {{ Source("layout/html/tests/table/core/columns.html") }} -
  • {{ Source("layout/html/tests/table/core/cols1.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_per.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_fixPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_fix.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_autoPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_autoFixPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_autoFix.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_fix_auto.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_per.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_fixPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_fix.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_autoPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_autoFixPer.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_autoFix.html") }} -
  • {{ Source("layout/html/tests/table/core/col_widths_auto_auto.html") }} -
  • {{ Source("layout/html/tests/table/core/col_span2.html") }} -
  • {{ Source("layout/html/tests/table/core/col_span.html") }} -
  • {{ Source("layout/html/tests/table/core/cell_heights.html") }} -
  • {{ Source("layout/html/tests/table/core/captions3.html") }} -
  • {{ Source("layout/html/tests/table/core/captions2.html") }} -
  • {{ Source("layout/html/tests/table/core/captions1.html") }} -
  • {{ Source("layout/html/tests/table/core/captions.html") }} -
  • {{ Source("layout/html/tests/table/core/box_sizing.html") }} -
  • {{ Source("layout/html/tests/table/core/borders.html") }} -
  • {{ Source("layout/html/tests/table/core/bloomberg.html") }} -
  • {{ Source("layout/html/tests/table/core/backgrounds.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-6.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-5.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-4.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-3.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-2.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug41262-1.html") }} -
  • {{ Source("layout/html/tests/table/collapsing_borders/bug127040.html") }} -
  • {{ Source("layout/html/tests/table/bugs/helloWorld.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug99948.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug99923.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9879.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9879-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug98196.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug97383.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug97138.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug965.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug96343.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug96334.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug963.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug93363.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug92868_1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug92868.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9271-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9271-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug92647-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug92647-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug92143.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9123-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9123-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug91057.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9072.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug9024.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8950.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug89315.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8858.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug88524.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug88035-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug88035-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug86708.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug86220.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug85016.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8499.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8381.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug83786.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8361.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug82946-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug82946-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug81934.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug80762-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug80762-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8032-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug8032-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug78162.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7714.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug75250.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7471.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug73629.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7342.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug73321.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug727.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7243.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug72393.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7121-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7121-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7113.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7112-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug7112-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug709.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug69382-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug69382-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug6933.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug69187.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug68998.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug68912.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug67915-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug67915-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug67864.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug6674.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug65372.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug650.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug647.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug641-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug641-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug6404.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug63785.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug6304.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug625.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug6184.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug61042-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug61042-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug60992.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug60807.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug60804.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug60749.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug60013.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug59354.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug59252.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug58402-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug58402-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5838.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5835.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5799.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5798.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5797.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug57828.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug57828-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug57378.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug57300.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug56563.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug56405.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug56201.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug56024.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug55789.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug55694.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug55545.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug55527.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5538.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug54450.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug53891.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug53690-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug53690-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug53663.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug52506.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug52505.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug5188.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug51727.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug51140.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug51037.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug51000.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug50695-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug50695-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug48827.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4849.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4849-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4803.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug48028-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug48028-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug47432.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4739.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug47163.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46944.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46924.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46623-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46623-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46480-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46480-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46368-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46368-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268-5.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug46268-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4576.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug45621.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug45486.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug45350.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4527.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4523.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4520.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug45055.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug45055-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4501.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug44523.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug44505.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4429.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4427.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug43854-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug43854-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4385.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4382.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug43204.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug43039.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4294.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4284.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug42443.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug42187.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug42043.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug41890.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug4093.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug40828.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3977.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug39209.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug38916.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3718.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3681-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3681-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug35662.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3517.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3454.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug34538.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug34176.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug33855.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug33784.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug33137.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3309-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3309-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32841.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3263.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3260.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32447.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32205-5.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32205-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32205-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32205-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug32205-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3191.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-9.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-8.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-7.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-6.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-5.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-18.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-17.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-16.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-15.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-14.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-13.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-12.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-11.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-10.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3166-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug312770.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3105.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3103.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30985.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30692.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30559.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30418.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3037-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug3037-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30332-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30332-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug30273.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug299723.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2997.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2981-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2981-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2973.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2962.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2954.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug294823.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2947.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29429.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29326.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29314.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29157.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29058-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29058-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug29058-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug28933.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug28928.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2886.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2886-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug286137.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug28341.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug282172.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug280217.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug280009.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug27993-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug27993-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug278385.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug278266.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2773.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug277062.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2763.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2757.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug275625.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug27038-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug27038-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug27038-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug269566.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2684.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug26553.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug263050.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug26178.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2585.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25707.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25663.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug253781.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25367.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2516.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2509.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25086.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25074.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug25004.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24880.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24880-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2479-5.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2479-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2479-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2479-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2479-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2469.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24661.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24627.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24503.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug24200.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug240248.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23994.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23847.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug234593.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23299.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23235.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23151.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug23072.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2296.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2267.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22513.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug222846.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug222467.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22246-3a.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22246-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22246-2a.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22246-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug222336.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug221784-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug221784-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22122.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug220653.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug220536.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug22019.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug219693-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug219693-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug21918.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug217527.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug215629.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug21518.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug21299.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2123.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug20804.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2065.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug20579.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug2050.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug196870.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug19599.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug19526.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug194024.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug19356.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug19061-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug19061-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18955.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18770.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18664.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18558.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18440.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug18359.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1828.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-6.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-5.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1818-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1809.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1802s.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1802.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1800.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug178762.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug178739.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17826.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17587.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17548.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug175455-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug174470.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1725.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17168.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17138.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17130-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug17130-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1647.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug16252.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug16012.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug15933.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug159108.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug157890.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug15544.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug154780.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug15247.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14929.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug149275-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug149275-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1474.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug145572.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14489.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14323.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1430.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug141818.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14159-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14159-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14159-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14007-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug14007-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug139843.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug139524-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug139524-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug139524-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug139524-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug138725.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug137388-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug137388-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug137388-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13526.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13484.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug133948.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug133756-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug133756-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13196.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1318.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13169.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13118.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug13105.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug131020_iframe.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug131020.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug131020-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug131020-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1302.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1296.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12910.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12910-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12908-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12908-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug128876.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug128229.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug127267.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1271.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12709.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug126742.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1262.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1261.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug123862.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12384.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12268.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1224.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1220.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug120364.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12012.js") }} -
  • {{ Source("layout/html/tests/table/bugs/bug120107.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug12008.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug119786.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11945.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11944.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1188.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1164.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1163-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11384s.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11384q.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug113424.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11331.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug113235-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug113235-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug113235-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11321.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1128.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug110566.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug11026.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug109043.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug108340.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106966.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106816.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106795.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1067-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1067-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106336.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10633.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106158-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug106158-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10565.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1055-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1055-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug104898.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug103533.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10296-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10296-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10269-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10269-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10216.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug102145-4.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug102145-3.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug102145-2.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug102145-1.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug101759.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug101674.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10140.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug101201.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug1010.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10039.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10036.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug100334.html") }} -
  • {{ Source("layout/html/tests/table/bugs/bug10009.html") }} -
  • {{ Source("layout/html/tests/table/bugs/adforce_imgis_com.html") }} -
  • {{ Source("layout/html/tests/table/bugs/97619.html") }} -
  • {{ Source("layout/html/tests/table/bugs/45621.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug84400-3.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug84400-2.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug84400-1.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-9.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-8.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-7.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-6.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-5.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-4.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-3.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-2.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-14.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-13.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-12.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-11.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-10.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug348809-1.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-9.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-8.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-7.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-6.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-5.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-4.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-3.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-2.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-16.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-15.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-14.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-13.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-12.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-11.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-10.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug302186-1.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug273719.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug224737.html") }} -
  • {{ Source("layout/html/tests/style/bugs/bug224188.html") }} -
  • {{ Source("layout/html/tests/style/base/base.html") }} -
  • {{ Source("layout/html/tests/printer/zeropos_iframes/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/zeropos_iframes/index.html") }} -
  • {{ Source("layout/html/tests/printer/table/table2.html") }} -
  • {{ Source("layout/html/tests/printer/table/table1.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test7/simple_sub3.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test7/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test7/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test7/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test6/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test6/index.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test5/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test5/simple_sub3.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test5/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test5/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test5/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test4/index.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test3/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test2/simple_sub3.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test2/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test2/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test2/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test1/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test1/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/shrink_to_fit/test1/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/printing_checklist.html") }} -
  • {{ Source("layout/html/tests/printer/noframes/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/noframes/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/more_iframes/iframe_in_iframe/the_iframe2.html") }} -
  • {{ Source("layout/html/tests/printer/more_iframes/iframe_in_iframe/the_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/more_iframes/iframe_in_iframe/index.html") }} -
  • {{ Source("layout/html/tests/printer/misc/scaled_scrollbars.html") }} -
  • {{ Source("layout/html/tests/printer/misc/page_with_long_title.html") }} -
  • {{ Source("layout/html/tests/printer/misc/font_size_scaling.html") }} -
  • {{ Source("layout/html/tests/printer/misc/embed_obj_tag.html") }} -
  • {{ Source("layout/html/tests/printer/misc/abs_pos2.html") }} -
  • {{ Source("layout/html/tests/printer/misc/abs_pos.html") }} -
  • {{ Source("layout/html/tests/printer/long_pages/8_pages.html") }} -
  • {{ Source("layout/html/tests/printer/long_pages/2_pages.html") }} -
  • {{ Source("layout/html/tests/printer/long_pages/105_pages.html") }} -
  • {{ Source("layout/html/tests/printer/js/print_from_script.html") }} -
  • {{ Source("layout/html/tests/printer/js/print_from_onload.html") }} -
  • {{ Source("layout/html/tests/printer/js/print_from_js.html") }} -
  • {{ Source("layout/html/tests/printer/js/load_print_reload_page2.html") }} -
  • {{ Source("layout/html/tests/printer/js/load_print_reload.html") }} -
  • {{ Source("layout/html/tests/printer/js/load_print_close_page2.html") }} -
  • {{ Source("layout/html/tests/printer/js/load_print_close.html") }} -
  • {{ Source("layout/html/tests/printer/js/load_new_site_from_js.html") }} -
  • {{ Source("layout/html/tests/printer/js/js_pp_timer.html") }} -
  • {{ Source("layout/html/tests/printer/js/change_while_in printdialog.html") }} -
  • {{ Source("layout/html/tests/printer/index.html") }} -
  • {{ Source("layout/html/tests/printer/images/test2.html") }} -
  • {{ Source("layout/html/tests/printer/images/imagejpg.html") }} -
  • {{ Source("layout/html/tests/printer/images/imagegif.html") }} -
  • {{ Source("layout/html/tests/printer/images/animatedgif.html") }} -
  • {{ Source("layout/html/tests/printer/iframe_2nd_page/the_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/iframe_2nd_page/index.html") }} -
  • {{ Source("layout/html/tests/printer/iframe_2nd_page/iframe_example.html") }} -
  • {{ Source("layout/html/tests/printer/hidden_iframe/the_iframe3.html") }} -
  • {{ Source("layout/html/tests/printer/hidden_iframe/the_iframe2.html") }} -
  • {{ Source("layout/html/tests/printer/hidden_iframe/the_iframe1.html") }} -
  • {{ Source("layout/html/tests/printer/hidden_iframe/the_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/hidden_iframe/index.html") }} -
  • {{ Source("layout/html/tests/printer/general/test6.html") }} -
  • {{ Source("layout/html/tests/printer/general/test5.html") }} -
  • {{ Source("layout/html/tests/printer/general/test4.html") }} -
  • {{ Source("layout/html/tests/printer/general/test3.html") }} -
  • {{ Source("layout/html/tests/printer/general/test2.html") }} -
  • {{ Source("layout/html/tests/printer/general/test1.html") }} -
  • {{ Source("layout/html/tests/printer/general/test0.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset8/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset8/js_pp_timer.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset8/index.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset7/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset7/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset7/index.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset6/the_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset6/root.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset6/frame3.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset6/frame2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset6/frame1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/the_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/subroot.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/root.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/frame3.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/frame2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset5/frame1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset4/root.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset4/frame3.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset4/frame2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset4/frame1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset3/subroot.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset3/root.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset3/frame3.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset3/frame2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset3/frame1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset2/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset2/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset2/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset2/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset1/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset1/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/frameset/frameset1/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/right.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/portrait.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/pagesizeauto.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/page8x11marginhalfin.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/page8x11margin254cm.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/page8x11margin10percent.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/marginleftautoright1in.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/marginauto.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/margin10percent.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/landscape.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset2/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset2/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset2/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset2/simple_main.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset1/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset1/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/printer/CSSPage/frameset1/simple_main.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/t.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/iframe_tst.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/foo.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Itfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/It.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ipht.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/IphpwtphpwMC.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Iph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifht.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtphpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtphfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtph.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtfhpw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtfhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwtfh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfwt.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifhfw.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/Ifh.html") }} -
  • {{ Source("layout/html/tests/frameset/iframe/I.html") }} -
  • {{ Source("layout/html/tests/frameset/core/yellow.html") }} -
  • {{ Source("layout/html/tests/frameset/core/world.html") }} -
  • {{ Source("layout/html/tests/frameset/core/white.html") }} -
  • {{ Source("layout/html/tests/frameset/core/visible.html") }} -
  • {{ Source("layout/html/tests/frameset/core/toptarg.html") }} -
  • {{ Source("layout/html/tests/frameset/core/topfr.html") }} -
  • {{ Source("layout/html/tests/frameset/core/testindex.html") }} -
  • {{ Source("layout/html/tests/frameset/core/test2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/test1.html") }} -
  • {{ Source("layout/html/tests/frameset/core/test0.html") }} -
  • {{ Source("layout/html/tests/frameset/core/targ.html") }} -
  • {{ Source("layout/html/tests/frameset/core/simple2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/simple.html") }} -
  • {{ Source("layout/html/tests/frameset/core/scrolling.html") }} -
  • {{ Source("layout/html/tests/frameset/core/scrollcrash.html") }} -
  • {{ Source("layout/html/tests/frameset/core/repaint.html") }} -
  • {{ Source("layout/html/tests/frameset/core/r4.html") }} -
  • {{ Source("layout/html/tests/frameset/core/r3.html") }} -
  • {{ Source("layout/html/tests/frameset/core/pixelsize.html") }} -
  • {{ Source("layout/html/tests/frameset/core/noframescript.html") }} -
  • {{ Source("layout/html/tests/frameset/core/narrowframe.html") }} -
  • {{ Source("layout/html/tests/frameset/core/maps.html") }} -
  • {{ Source("layout/html/tests/frameset/core/imagerender.html") }} -
  • {{ Source("layout/html/tests/frameset/core/imagebr2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/imagebr.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframexulscroll.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframescroll.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframeoverflowhidden.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframeheight.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframecache.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframeboxmodel.html") }} -
  • {{ Source("layout/html/tests/frameset/core/iframealign.html") }} -
  • {{ Source("layout/html/tests/frameset/core/hideiframe2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/hideiframe.html") }} -
  • {{ Source("layout/html/tests/frameset/core/framesetgap.html") }} -
  • {{ Source("layout/html/tests/frameset/core/frameborderzero.html") }} -
  • {{ Source("layout/html/tests/frameset/core/foo.html") }} -
  • {{ Source("layout/html/tests/frameset/core/fixedbg.html") }} -
  • {{ Source("layout/html/tests/frameset/core/extrawebshell.html") }} -
  • {{ Source("layout/html/tests/frameset/core/emptybody.html") }} -
  • {{ Source("layout/html/tests/frameset/core/dumper.html") }} -
  • {{ Source("layout/html/tests/frameset/core/display.html") }} -
  • {{ Source("layout/html/tests/frameset/core/dev2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/dev1.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border_space.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border_none.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border_full.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border4.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border3.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/border1.html") }} -
  • {{ Source("layout/html/tests/frameset/core/blankin.html") }} -
  • {{ Source("layout/html/tests/frameset/core/blank2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/black.html") }} -
  • {{ Source("layout/html/tests/frameset/core/bigfalseborder.html") }} -
  • {{ Source("layout/html/tests/frameset/core/basic.html") }} -
  • {{ Source("layout/html/tests/frameset/core/bar.html") }} -
  • {{ Source("layout/html/tests/frameset/core/align2.html") }} -
  • {{ Source("layout/html/tests/frameset/core/align.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/bug5437.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/bar.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0033699_whitespace_size.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0031482_extra_comma.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0021268_zero_percent_size.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0020459_zero_size.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0016346_overflow_hidden.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0016346_noscroll.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0005437.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0004849.html") }} -
  • {{ Source("layout/html/tests/frameset/bugs/0003943_noscript.html") }} -
  • {{ Source("layout/html/tests/formctls/interactive/bug180805.html") }} -
  • {{ Source("layout/html/tests/formctls/interactive/bug132334.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug98918.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug96604.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug96506.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug95937.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug95703.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug94268.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug92647.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug91789.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug88849.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug8665.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug81448.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug79927-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug79927-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug79927-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug79863.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug77068.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug7549.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug7543.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug74069.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug73081.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug70251-4.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug70251-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug70251-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug70251-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug7025-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug7025-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug69984.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug68963.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug67207.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug65275.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug63309.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug62954.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug62568.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug59294.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug58299.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug58220.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug58190.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug55063.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug53259-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug53259-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug53259-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug50419.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug48237.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug46224.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug46099.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug45670.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug45625.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug45562.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug45152.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug45095.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug44000.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug43771.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug42481.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug41050.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug41049.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-7.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-6.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-5.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-4.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug40596-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug4050.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug39425.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug37459.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug37261.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug36964.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug36364-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug36364-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug36130.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug35934.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug358408.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug357449.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug342531.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug33327.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug305705.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug300474-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug300474-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug297389.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug28598.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug26650.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug26644.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug231574.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug22708.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug222864.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug20322.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug180085-4.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug180085-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug180085-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug180085-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug17474-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug17474-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug17474-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug17450.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-9.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-8.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-7.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-6.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-5.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-4.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-3.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-16.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-15.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-14.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-13.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-12.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-11.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-10.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug167236-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug138403-2.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug138403-1.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug117606.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug113245.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug109368.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug109316.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug108526.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug10410.html") }} -
  • {{ Source("layout/html/tests/formctls/bugs/bug101122.html") }} -
  • {{ Source("layout/html/tests/formctls/base/textarea_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/textarea_sizes.html") }} -
  • {{ Source("layout/html/tests/formctls/base/testarea_wrap.html") }} -
  • {{ Source("layout/html/tests/formctls/base/selectsize3_js.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_small_sizes2.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_small_sizes.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_onchange.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_listbox_sizing_quirks.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_listbox_sizing.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_jsadd.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_js.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_init.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_disabled.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select_combobox_basics.html") }} -
  • {{ Source("layout/html/tests/formctls/base/select1_js.html") }} -
  • {{ Source("layout/html/tests/formctls/base/radio_onchange.html") }} -
  • {{ Source("layout/html/tests/formctls/base/radio_jsadd.html") }} -
  • {{ Source("layout/html/tests/formctls/base/radio_init.html") }} -
  • {{ Source("layout/html/tests/formctls/base/radio_disabled.html") }} -
  • {{ Source("layout/html/tests/formctls/base/legend_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/isindex_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/inputtext_sizes.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_text_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_submit_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_reset_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_radio_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_password_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_image_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_hidden_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_file_strict2.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_file_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_checkbox_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_button_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_button_overconstrained_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/input_button_overconstrained.html") }} -
  • {{ Source("layout/html/tests/formctls/base/index.html") }} -
  • {{ Source("layout/html/tests/formctls/base/form_overview.html") }} -
  • {{ Source("layout/html/tests/formctls/base/fieldset_strict2.html") }} -
  • {{ Source("layout/html/tests/formctls/base/fieldset_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_with_margin_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_with_margin.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_submit_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_small_avail_width_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_small_avail_width.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_reset_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_overconstrained_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_overconstrained.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_no_margin_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_no_margin.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_min_max_widths_strict.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_min_max_widths.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_css_sizing.html") }} -
  • {{ Source("layout/html/tests/formctls/base/button_button_strict.html") }} -
  • {{ Source("layout/html/tests/block/printing/179683-2.html") }} -
  • {{ Source("layout/html/tests/block/printing/179683-1.html") }} -
  • {{ Source("layout/html/tests/block/printing/163614.html") }} -
  • {{ Source("layout/html/tests/block/printing/150652.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-9.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-8.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-7.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-6.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-5.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-4.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-3.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-21.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-20.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-2.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-19.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-18.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-17.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-16.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-15.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-14.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-13.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-12.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-11.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-10.html") }} -
  • {{ Source("layout/html/tests/block/printing/145305-1.html") }} -
  • {{ Source("layout/html/tests/block/printing/127286-2.html") }} -
  • {{ Source("layout/html/tests/block/printing/127286-1.html") }} -
  • {{ Source("layout/html/tests/block/printing/127145-3.html") }} -
  • {{ Source("layout/html/tests/block/printing/127145-2.html") }} -
  • {{ Source("layout/html/tests/block/printing/127145-1.html") }} -
  • {{ Source("layout/html/tests/block/interactive/quicksearch.js") }} -
  • {{ Source("layout/html/tests/block/interactive/localconfig.js") }} -
  • {{ Source("layout/html/tests/block/interactive/bug128804.html") }} -
  • {{ Source("layout/html/tests/block/interactive/bug105742-3.html") }} -
  • {{ Source("layout/html/tests/block/interactive/bug105742-2.html") }} -
  • {{ Source("layout/html/tests/block/interactive/bug105742-1.html") }} -
  • {{ Source("layout/html/tests/block/interactive/179209.html") }} -
  • {{ Source("layout/html/tests/block/interactive/161644.html") }} -
  • {{ Source("layout/html/tests/block/interactive/154924.html") }} -
  • {{ Source("layout/html/tests/block/interactive/148399.html") }} -
  • {{ Source("layout/html/tests/block/images/black_1pix.html") }} -
  • {{ Source("layout/html/tests/block/dummy.html") }} -
  • {{ Source("layout/html/tests/block/dom/testlogic.js") }} -
  • {{ Source("layout/html/tests/block/dom/first-letter.html") }} -
  • {{ Source("layout/html/tests/block/dom/block-in-inline.html") }} -
  • {{ Source("layout/html/tests/block/bugs/97383.html") }} -
  • {{ Source("layout/html/tests/block/bugs/97383-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/9601.html") }} -
  • {{ Source("layout/html/tests/block/bugs/94468.html") }} -
  • {{ Source("layout/html/tests/block/bugs/9282.html") }} -
  • {{ Source("layout/html/tests/block/bugs/9237-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/9100.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8905.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8878.html") }} -
  • {{ Source("layout/html/tests/block/bugs/87543.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8749.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8683.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8466.html") }} -
  • {{ Source("layout/html/tests/block/bugs/8438.html") }} -
  • {{ Source("layout/html/tests/block/bugs/82221.js") }} -
  • {{ Source("layout/html/tests/block/bugs/82221.html") }} -
  • {{ Source("layout/html/tests/block/bugs/81776.html") }} -
  • {{ Source("layout/html/tests/block/bugs/81118.html") }} -
  • {{ Source("layout/html/tests/block/bugs/7993.html") }} -
  • {{ Source("layout/html/tests/block/bugs/7806.html") }} -
  • {{ Source("layout/html/tests/block/bugs/7352.html") }} -
  • {{ Source("layout/html/tests/block/bugs/7282.html") }} -
  • {{ Source("layout/html/tests/block/bugs/71594.html") }} -
  • {{ Source("layout/html/tests/block/bugs/7093.html") }} -
  • {{ Source("layout/html/tests/block/bugs/69960.html") }} -
  • {{ Source("layout/html/tests/block/bugs/67690.html") }} -
  • {{ Source("layout/html/tests/block/bugs/63785.html") }} -
  • {{ Source("layout/html/tests/block/bugs/6155.html") }} -
  • {{ Source("layout/html/tests/block/bugs/6126.html") }} -
  • {{ Source("layout/html/tests/block/bugs/60992.html") }} -
  • {{ Source("layout/html/tests/block/bugs/6097.html") }} -
  • {{ Source("layout/html/tests/block/bugs/6093.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59834.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59790.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59200-e.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59200-d.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59200-c.html") }} -
  • {{ Source("layout/html/tests/block/bugs/59200-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/58674-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/58674-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/58652.js") }} -
  • {{ Source("layout/html/tests/block/bugs/58652.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5859-d.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5859-c.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5859-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5859-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5847.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5821.html") }} -
  • {{ Source("layout/html/tests/block/bugs/57554.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5688.html") }} -
  • {{ Source("layout/html/tests/block/bugs/56563_1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/56335.html") }} -
  • {{ Source("layout/html/tests/block/bugs/56265.html") }} -
  • {{ Source("layout/html/tests/block/bugs/56102.html") }} -
  • {{ Source("layout/html/tests/block/bugs/55961.html") }} -
  • {{ Source("layout/html/tests/block/bugs/55874.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5537.html") }} -
  • {{ Source("layout/html/tests/block/bugs/55317.html") }} -
  • {{ Source("layout/html/tests/block/bugs/55250.html") }} -
  • {{ Source("layout/html/tests/block/bugs/55095.html") }} -
  • {{ Source("layout/html/tests/block/bugs/54876.html") }} -
  • {{ Source("layout/html/tests/block/bugs/54833.html") }} -
  • {{ Source("layout/html/tests/block/bugs/54618.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5418.html") }} -
  • {{ Source("layout/html/tests/block/bugs/54005.html") }} -
  • {{ Source("layout/html/tests/block/bugs/53974.html") }} -
  • {{ Source("layout/html/tests/block/bugs/53960.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5375.html") }} -
  • {{ Source("layout/html/tests/block/bugs/53690.html") }} -
  • {{ Source("layout/html/tests/block/bugs/53259.html") }} -
  • {{ Source("layout/html/tests/block/bugs/52773.html") }} -
  • {{ Source("layout/html/tests/block/bugs/52307.html") }} -
  • {{ Source("layout/html/tests/block/bugs/52265.html") }} -
  • {{ Source("layout/html/tests/block/bugs/52242.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5196.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5119.html") }} -
  • {{ Source("layout/html/tests/block/bugs/5114.html") }} -
  • {{ Source("layout/html/tests/block/bugs/50758.html") }} -
  • {{ Source("layout/html/tests/block/bugs/50480.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4956.html") }} -
  • {{ Source("layout/html/tests/block/bugs/48653.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4831-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4831-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/48057.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4803.html") }} -
  • {{ Source("layout/html/tests/block/bugs/47456_1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/47456.html") }} -
  • {{ Source("layout/html/tests/block/bugs/46918.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4677.html") }} -
  • {{ Source("layout/html/tests/block/bugs/45621.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4519.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4515.html") }} -
  • {{ Source("layout/html/tests/block/bugs/44709.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4468.html") }} -
  • {{ Source("layout/html/tests/block/bugs/44264-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/44264-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/44264-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-9.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-8.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-7.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-6.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-5.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-4.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-16.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-15.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-14.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-13.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-12.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-11.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-10.html") }} -
  • {{ Source("layout/html/tests/block/bugs/43882-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/4324.html") }} -
  • {{ Source("layout/html/tests/block/bugs/42495.html") }} -
  • {{ Source("layout/html/tests/block/bugs/41777.html") }} -
  • {{ Source("layout/html/tests/block/bugs/41521.html") }} -
  • {{ Source("layout/html/tests/block/bugs/40129.html") }} -
  • {{ Source("layout/html/tests/block/bugs/40038-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/39683.html") }} -
  • {{ Source("layout/html/tests/block/bugs/39211.html") }} -
  • {{ Source("layout/html/tests/block/bugs/39211-c.html") }} -
  • {{ Source("layout/html/tests/block/bugs/39211-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/39211-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/38157-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/38157-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/37511_1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/37083-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/37083-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/37083-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/36401.html") }} -
  • {{ Source("layout/html/tests/block/bugs/36401-c.html") }} -
  • {{ Source("layout/html/tests/block/bugs/36401-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/36401-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/317961.html") }} -
  • {{ Source("layout/html/tests/block/bugs/310124.html") }} -
  • {{ Source("layout/html/tests/block/bugs/306534.html") }} -
  • {{ Source("layout/html/tests/block/bugs/304004.html") }} -
  • {{ Source("layout/html/tests/block/bugs/299148.html") }} -
  • {{ Source("layout/html/tests/block/bugs/28811.html") }} -
  • {{ Source("layout/html/tests/block/bugs/282754.html") }} -
  • {{ Source("layout/html/tests/block/bugs/282754-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/282754-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/277420.html") }} -
  • {{ Source("layout/html/tests/block/bugs/276602.html") }} -
  • {{ Source("layout/html/tests/block/bugs/276286.html") }} -
  • {{ Source("layout/html/tests/block/bugs/27211.html") }} -
  • {{ Source("layout/html/tests/block/bugs/265566.html") }} -
  • {{ Source("layout/html/tests/block/bugs/264914-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/264914-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/263406-7.html") }} -
  • {{ Source("layout/html/tests/block/bugs/263406-4.html") }} -
  • {{ Source("layout/html/tests/block/bugs/262624.html") }} -
  • {{ Source("layout/html/tests/block/bugs/239079.html") }} -
  • {{ Source("layout/html/tests/block/bugs/228172.html") }} -
  • {{ Source("layout/html/tests/block/bugs/22496.html") }} -
  • {{ Source("layout/html/tests/block/bugs/22413.html") }} -
  • {{ Source("layout/html/tests/block/bugs/223394-4.html") }} -
  • {{ Source("layout/html/tests/block/bugs/223394-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/223394-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/223394-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/22037.html") }} -
  • {{ Source("layout/html/tests/block/bugs/217369-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/217369-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/216303.html") }} -
  • {{ Source("layout/html/tests/block/bugs/215857.html") }} -
  • {{ Source("layout/html/tests/block/bugs/215857-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/215857-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/20582.html") }} -
  • {{ Source("layout/html/tests/block/bugs/199673-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/199673-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/199673-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/196919.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18754.html") }} -
  • {{ Source("layout/html/tests/block/bugs/185411-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/185411-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/185411-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18445_4.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18445_3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18445_2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18445_1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/18445.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17844.html") }} -
  • {{ Source("layout/html/tests/block/bugs/177331.html") }} -
  • {{ Source("layout/html/tests/block/bugs/176423.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17636.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17532.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17518.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17372.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17331.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17318.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17130-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17130-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/17054.html") }} -
  • {{ Source("layout/html/tests/block/bugs/169620.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16889.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16656.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16580.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16417.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16173.html") }} -
  • {{ Source("layout/html/tests/block/bugs/161644.html") }} -
  • {{ Source("layout/html/tests/block/bugs/16053.html") }} -
  • {{ Source("layout/html/tests/block/bugs/15933-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/15933-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/15882-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/15882-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/155333-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/155333-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/154741.html") }} -
  • {{ Source("layout/html/tests/block/bugs/153429c.html") }} -
  • {{ Source("layout/html/tests/block/bugs/153429b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/153429a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/15340.html") }} -
  • {{ Source("layout/html/tests/block/bugs/151620.html") }} -
  • {{ Source("layout/html/tests/block/bugs/148245.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14489.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14459.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14363.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14161.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14140.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14118-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/14118-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13940.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13869.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13599.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13553.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13481.html") }} -
  • {{ Source("layout/html/tests/block/bugs/134580-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/134580-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13258.html") }} -
  • {{ Source("layout/html/tests/block/bugs/13196.html") }} -
  • {{ Source("layout/html/tests/block/bugs/131065-4.html") }} -
  • {{ Source("layout/html/tests/block/bugs/131065-3.html") }} -
  • {{ Source("layout/html/tests/block/bugs/131065-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/131065-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12760.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12709.html") }} -
  • {{ Source("layout/html/tests/block/bugs/126213-2.html") }} -
  • {{ Source("layout/html/tests/block/bugs/126213-1.html") }} -
  • {{ Source("layout/html/tests/block/bugs/125506.html") }} -
  • {{ Source("layout/html/tests/block/bugs/124637.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12451.html") }} -
  • {{ Source("layout/html/tests/block/bugs/124167.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12233.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12072.html") }} -
  • {{ Source("layout/html/tests/block/bugs/12003.html") }} -
  • {{ Source("layout/html/tests/block/bugs/11589.html") }} -
  • {{ Source("layout/html/tests/block/bugs/11566.html") }} -
  • {{ Source("layout/html/tests/block/bugs/11435.html") }} -
  • {{ Source("layout/html/tests/block/bugs/111255.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10777.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10675.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10509.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10490-b.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10490-a.html") }} -
  • {{ Source("layout/html/tests/block/bugs/10458.html") }} -
  • {{ Source("layout/html/tests/block/base/width-percent.html") }} -
  • {{ Source("layout/html/tests/block/base/width-fixed.html") }} -
  • {{ Source("layout/html/tests/block/base/pre1.html") }} -
  • {{ Source("layout/html/tests/block/base/pre.html") }} -
  • {{ Source("layout/html/tests/block/base/margin1.html") }} -
  • {{ Source("layout/html/tests/block/base/jlbtest1.html") }} -
  • {{ Source("layout/html/tests/block/base/intrinsic-with-box-sizing.html") }} -
  • {{ Source("layout/html/tests/block/base/intrinsic-with-box-sizing-strict.html") }} -
  • {{ Source("layout/html/tests/block/base/intrinsic-cases-standards.html") }} -
  • {{ Source("layout/html/tests/block/base/intrinsic-cases-quirks.html") }} -
  • {{ Source("layout/html/tests/attributes/ul_li.html") }} -
  • {{ Source("layout/html/tests/attributes/pre.html") }} -
  • {{ Source("layout/html/tests/attributes/ol_li.html") }} -
  • {{ Source("layout/html/tests/attributes/map_area.html") }} -
  • {{ Source("layout/html/tests/attributes/hr.html") }} -
  • {{ Source("layout/html/tests/attributes/font.html") }} -
  • {{ Source("layout/html/tests/attributes/div_p_heading.html") }} -
  • {{ Source("layout/html/tests/attributes/br.html") }} -
  • {{ Source("layout/html/tests/attributes/br-standard.html") }} -
  • {{ Source("layout/html/tests/absolute.html") }} -
  • {{ Source("layout/html/tests/TestTextDOM.js") }} -
  • {{ Source("layout/html/tests/TestInsert.js") }} -
  • {{ Source("layout/html/tests/TestInline2.html") }} -
  • {{ Source("layout/html/tests/TestInline.js") }} -
  • {{ Source("layout/html/tests/TestInline.html") }} -
  • {{ Source("layout/html/tests/TestFloaters.html") }} -
  • {{ Source("layout/html/tests/TestDelete.js") }} -
  • {{ Source("layout/html/tests/TestAppend.js") }} -
  • {{ Source("layout/html/tests/SlideShow/show.js") }} -
  • {{ Source("layout/html/tests/SlideShow/show.html") }} -
  • {{ Source("layout/html/tests/Rotate.js") }} -
  • {{ Source("layout/html/tests/Rotate.html") }} -
  • {{ Source("layout/html/tests/ImageMap.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/tabinx_noIFrame.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/tabinx_IFrame.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/subdoc_tabindex_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/notabinx_IFrame.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/no_tabinx_noIFrame.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/index.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset9/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset9/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset9/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset9/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset8/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset8/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset8/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset8/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset7/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset7/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset7/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset7/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset6/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset6/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset6/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset6/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset5/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset5/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset5/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset5/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset4/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset4/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset4/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset4/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset3/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset3/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset3/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset3/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset2/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset2/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset2/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset2/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset15/sub_iframe2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset15/sub_iframe.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset15/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset15/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset15/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset14/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset14/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset14/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset13/simple.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset12/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset11/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset10/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset10/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset10/simple_main.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset1/simple_sub2.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset1/simple_sub1.html") }} -
  • {{ Source("layout/html/tests/FrameSetNav/frameset1/simple_main.html") }} -
diff --git a/files/ja/setting_up_extension_development_environment/index.html b/files/ja/setting_up_extension_development_environment/index.html deleted file mode 100644 index 0a8c89a122..0000000000 --- a/files/ja/setting_up_extension_development_environment/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Setting up extension development environment -slug: Setting_up_extension_development_environment -tags: - - Add-ons - - Extensions ---- -

この記事では、あなたの Mozilla アプリケーションにおいて拡張機能の開発を容易にするためのノウハウを提案します。

-

{{ 英語版章題("Development preferences") }}

-

開発用の設定

-

これらの設定はパフォーマンスの低下と引き換えにデバッグを簡単にします。

-

設定を変更するための情報は 設定ファイルの編集 を参照して下さい。これらの設定の中にはデフォルトで about:config にリストアップされていないものもあり、新しい (真偽値) エントリを作成しなければならない場合があるので注意して下さい。

-

これらの変更を行う前に、下記の「開発用のプロファイル」を参考にして別個の開発用プロファイルを作成してください。

-
    -
  • javascript.options.showInConsole = true。chrome ファイルでのエラーを エラーコンソール に出力します。
    • -
  • nglayout.debug.disable_xul_cache = true。XUL キャッシュを無効にして、再起動しなくてもウィンドウとダイアログの変更が反映されるようにします。これは JAR ファイルの代わりにディレクトリを使用 している事が前提です。この設定が有効であっても、XUL オーバーレイに対する変更を反映させるにはオーバーレイされているドキュメントを再読み込みする必要があります。
    • -
  • browser.dom.window.dump.enabled = true。標準コンソールへの出力をする為の dump() 文の使用を可能にします。詳しくは {{ Domxref("window.dump") }} を参照してください。特権スクリプトからならば {{ Interface("nsIConsoleService") }} を使用することも出来ます。
    • -
  • javascript.options.strict = true。エラーコンソールでの厳密な警告を有効にします。開発の際にこの設定を無効にしている人は多いので、あなた自身の拡張機能の警告に加えて彼らのコードによる警告が大量に表示されるようになるでしょうから注意が必要です。Console2 を使えばそれらをフィルタリングできます。
    • -
-

{{ 英語版章題("Development extensions") }}

-

開発のための拡張機能

-

これらの拡張機能はあなたの開発の手助けとなるでしょう。

- -

{{ 英語版章題("Development profile") }}

-

開発用のプロファイル

-

開発用の設定や開発用の拡張機能によるパフォーマンスの低下や、個人データの漏洩を防ぐためには、開発作業のための別個のプロファイルを作成するのがいいでしょう。

-

-no-remote パラメータを付けて Firefox を起動すると、別々のプロファイルを使った二つの Firefox インスタンスを起動させることが出来ます。例えば、次のコマンドを使うことで、「通常の」 Firefox がすでに起動しているかどうかに関わらず、開発用のプロファイルで Firefox を起動させることが出来ます。 (あなたの開発用プロファイルの名前が "dev" であると仮定しています)

-
start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
-
-

既定のプロファイルで Firefox を起動させるには、通常どおり "firefox" または "firefox -P default" を実行します。

-

{{ 英語版章題("Custom code location") }}

-

コード置き場の変更

-

変更を加えるたびに拡張機能を何度も再インストールしたり、アンインストールの際に誤ってソースファイルを削除してしまうのを防ぐために、ソースファイルをプロファイルの外の任意の場所に置く事が出来ます。

-
    -
  1. 拡張機能に含まれる install.rdf から拡張機能の ID を見つける
    2. -
  2. プロファイルディレクトリ/extensions/ に、ファイル名をその ID にしたファイルを作成する (例: `your_profile_directory/extensions/{46D1B3C0-DB7A-4b1a-863A-6EE6F77ECB58}`) (http://kb.mozillazine.org/Profile_folder プロファイルディレクトリの場所])
    3. -
  3. そのファイルの内容に install.rdf ファイルを格納するフォルダへのパスを書き込む (例: `/full/path/to/yourExtension` Windows ユーザはスラッシュではなくバックスラッシュを使ってください。 例: `\full\path\to\yourExtension`)
    4. -
  4. ファイルをプロファイルの extensions フォルダに置いて、アプリケーションを再起動する
    5. -
-

{{ 英語版章題("Using directories rather than JARs") }}

-

JAR ファイルの代わりにディレクトリを使用

-

拡張機能の chrome を JAR ファイルとディレクトリのどちらにパッケージングするかは自由ですが、ディレクトリを使った方が開発は簡単です。リリースする時のために JAR 構造を選んだとしても、chrome.manifest ファイルを編集すればディレクトリ構造で開発することが出来ます。例えばこうなっているのを

-
content	myExtension	jar:chrome/myExtension.jar!/content/
-
-

こうします。

-
content	myExtension	chrome/content/
-
diff --git a/files/ja/svg_improvements_in_firefox_3/index.html b/files/ja/svg_improvements_in_firefox_3/index.html deleted file mode 100644 index 268528b155..0000000000 --- a/files/ja/svg_improvements_in_firefox_3/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: SVG improvements in Firefox 3 -slug: SVG_improvements_in_Firefox_3 -tags: - - Firefox 3 - - SVG -translation_of: Mozilla/Firefox/Releases/3/SVG_improvements ---- -

{{ Fx_minversion_header(3) }} -

Firefox 3 では、以前のバージョンの Firefox よりも改善された Scalable Vector Graphics (SVG) サポートが追加されました。これらの機能は、別の場所で文書化されていますが、この記事は、便利な一覧を提供することで、どの機能が Firefox 3 で追加されたのかを判別しやすくします。 -

-
  • foreignObject 要素のサポート ({{ Bug(326966) }}, 仕様, 参考)
  • pattern 要素のサポート (仕様) -
  • mask 要素のサポート (仕様) -
  • SVG フィルタのサポート (仕様) -
    • filter -
    • feDistantLight -
    • fePointLight -
    • feSpotLight -
    • feBlend -
    • feColorMatrix -
    • feConvolveMatrix -
    • feComponentTransfer, feFuncR, feFuncG, feFuncB, feFuncA -
    • feComposite -
    • feConvolveMatrix -
    • feDiffuseLighting -
    • feDistantLight -
    • feFlood -
    • feGaussianBlur -
    • feMerge, feMergeNode -
    • feMorphology -
    • feOffset -
    • fePointLight -
    • feSpecularLighting -
    • feTurbulence -
    • feTile -
    -
  • <a> element handling in SVG has had several bugs fixed; see {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }} and {{ Bug(320724) }}. -
  • The SVG DOM Methods getNumberOfChars(), getComputedTextLength(), getSubStringLength(), getStartPositionOfChar(), getEndPositionOfChar(), getRotationOfChar(), and getCharNumAtPosition() have been implemented. -
  • xml:space 属性の実装 (仕様) -
  • fallback fill/stroke are now supported (spec) -
  • em and ex units are now supported for indicating lengths ({{ Bug(305859) }}). -
-

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

-

参照

- -


-


-


-

-
-
-{{ languages( { "en": "en/SVG_improvements_in_Firefox_3", "es": "es/Mejoras_SVG_en_Firefox_3", "fr": "fr/Am\u00e9liorations_SVG_dans_Firefox_3", "pl": "pl/Poprawki_SVG_w_Firefoksie_3" } ) }} diff --git a/files/ja/svg_in_firefox/index.html b/files/ja/svg_in_firefox/index.html deleted file mode 100644 index 8def32aa25..0000000000 --- a/files/ja/svg_in_firefox/index.html +++ /dev/null @@ -1,781 +0,0 @@ ---- -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/the_add-on_bar/index.html b/files/ja/the_add-on_bar/index.html deleted file mode 100644 index 2fd58a9985..0000000000 --- a/files/ja/the_add-on_bar/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: アドオンバー -slug: The_add-on_bar -tags: - - Add-ons - - Extensions - - Firefox 4 - - Toolbar - - 要更新 -translation_of: Mozilla/Firefox/Releases/4/The_add-on_bar ---- -
{{fx_minversion_header("4")}} {{draft}}
-

Firefox 4 よりウィンドウの下部に新しいツールバーを実装する為、ブラウザウィンドウの下部からステータスバーが削除されます。この新しいツールバーは ID "addon-bar" を持った、標準の XUL {{XULElem("toolbar")}} です。アドオンはこのバーにコンテンツを挿入することが可能であり、また、ユーザーはツールバーのカスタマイズ中にボタンをアドオンバーにドラッグすることができます。これがアドオンバーと旧ステータスバーの間の主な相違点です。標準のツールバーであるため、どの XUL 要素でもアドオンバーに配置することができます。

-
- 注記: 当面は、Firefox にはステータスバーが存在することを期待するアドオンがうまく動作するようにするためのシムが噛ませてあります。但しこれは一時的な措置であり、じきに削除されます。アドオンをアップデートしてください。
-

アドオンバーに要素を加える

-

アドオンバーは ID "addon-bar" を持つ XUL ツールバーです。次のコードは、一番最近使われたウィンドウを探し出し、XUL {{XULElem("label")}} 要素を用いて単に "Hello world!" のテキストを表示する新しいアイテムをアドオンバーに加えます。

-
// 一番最近使われたウィンドウを探す
-
-var mediator = Components.classes['@mozilla.org/appshell/window-mediator;1']
-                  .getService(Components.interfaces.nsIWindowMediator);
-var doc = mediator.getMostRecentWindow("navigator:browser").document;
-
-// そのウィンドウのアドオンバーを取得する
-var addonBar = doc.getElementById("addon-bar");
-
-// 新しいツールバーアイテムを構築する
-var newItem = doc.createElement("toolbaritem");
-var itemLabel = doc.createElement("label");
-
-// アイテムをツールバーに追加しテキストラベルをセットする
-newItem.appendChild(itemLabel);
-addonBar.appendChild(newItem);
-itemLabel.value = "Hello world!";
-
-

To add the button only once create a bool pref to check if it is the first run. For example:

-
var firstrun = Services.prefs.getBoolPref("extensions.YOUREXT.firstrun");
-
-var curVersion = "0.0.0";
-
-if (firstrun) {
-  Services.prefs.setBoolPref("extensions.YOUREXT.firstrun", false);
-  Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
-  /* Code related to firstrun */
-} else {
-  try {
-    var installedVersion = Services.prefs.getCharPref("extensions.YOUREXT.installedVersion");
-    if (curVersion > installedVersion) {
-      Services.prefs.setCharPref("extensions.YOUREXT.installedVersion", curVersion);
-      /* Code related to upgrade */
-    }
-  } catch (ex) {
-    /* Code related to a reinstall */
-  }
-}
-
-

Firefox の各バージョンでのオーバーレイの使用方法

-

Firefox 3.6 とそれ以前のバージョンとの互換性を保持したままアドオンバーのサポートを追加するには、2 つのオーバーレイを使用する必要があります。
- The chrome.manifest file can specify which file is used by which Firefox version by using manifest flags:

-
overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlayold.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<4.0
-overlay chrome://browser/content/browser.xul chrome://myaddon/content/myaddon/overlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} appversion>=4.0
-
-

注記: the appversion has to be at least 2 digits long or it won't work with versions of Gecko before 1.8.0.13 and 1.8.1.5.

-

デフォルトでボタンを追加

-

参照 : Adding a button by default

-

見た目の違い

-
    -
  • ブラウザーがステータス情報によりバー領域の大半を占拠することがなくなるので、すべての領域をアドオンが使えるようになります。
    • -
  • 既定ではアドオンバーは空 (empty) であり、隠されています (hidden) 。ユーザーがこれを可視状態にするには、明示的にそうしなければなりません。
    • -
  • 再起動不要のアドオンがアドオンバーに直接インストールされたとき、アドオンバーが可視でなければアドオンバーは自動的に可視になります。
    • -
  • 再起動不要のアドオンがアンインストールされてアドオンバー内のアイテムの数がゼロになったときには、アドオンバーは自動的に隠されます。
    • -
-

関連情報

- diff --git a/files/ja/the_importance_of_correct_html_commenting/index.html b/files/ja/the_importance_of_correct_html_commenting/index.html deleted file mode 100644 index 333ddbb0a0..0000000000 --- a/files/ja/the_importance_of_correct_html_commenting/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: The Importance of Correct HTML Commenting -slug: The_Importance_of_Correct_HTML_Commenting -tags: - - HTML ---- -

HTML を 標準モード で記述する場合、不正確に書かれたコメントによってページの表示が崩れ、コンテンツの一部または全体がコメントアウトされた状態になってしまいます。XHTML や XML を記述する場合、不正確なコメントが含まれると、ドキュメントそのものが表示できなくなります。

- -

HTML 4.01

- -

W3C HTML 4.01 Recommendation Section 3.2.4 - Comments より引用:

- -
マークアップ宣言の開始区切り文字 ("<!") とコメント開始区切り文字 ("--") の間に空白を含むことはできませんが、コメント終了区切り文字 ("--") とマークアップ宣言の終了区切り文字 (">") の間に含めることはできます。一般的な間違いとして、ハイフンの連続 ("---") をコメント内に含んでしまうことがあります。ページ作者は、コメント内に 2 つ以上の連続するハイフンを含めないよう注意すべきです。
- -

例

- -

以下のコメントは HTML では適切なコメントです。

- -
<!-- valid html comment -->
-<!-- valid html comment -- >
-
- -

以下のコメントは HTML では不適切なコメントです。

- -
<!-- invalid -- html comment -->
-
- -

XML

- -

W3C XML 1.0 Recommendation Section 2.5 - Comments より:

- -
定義: コメントは、ドキュメント内で他のマークアップの外側のどの箇所にも出現することができます。さらに、文法によって許可されている場所であれば、ドキュメントタイプ宣言の内部に出現することも可能です。コメントはドキュメントの文字データには含まれません。XML プロセッサは、アプリケーションがコメント内のテキストを取得できるようにする場合がありますが、それは必須ではありません。互換性のため、文字列 "--" (二重ハイフン) をコメント内に含めることはできません。パラメータ実体参照はコメント内では認識されるべきではありません。 - -
[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->'
-
-
- -

XML におけるコメントの文法に書かれている通り、コメントは以下のような形式になります。

- -
<!-- characters excluding adjacent dashes -->
-
- -

例

- -

以下のコメントは XML および XHTML では適切なコメントです。

- -
<!-- valid xml/xhtml comment -->
-
- -

以下のコメントは XML および XHTML では不適切なコメントです。

- -
<!-- invalid -- xml comment -->
-<!-- invalid xml comment --->
-<!-- invalid xml comment -- >
-
- -

参考資料

- - - -
-

原文書の情報

- -
    -
  • 最終更新日: May 19th, 2003
    • -
  • 著作権: Copyright © 2001-2003 Netscape. All rights reserved.
    • -
-
- -
 
diff --git a/files/ja/tips_for_authoring_fast-loading_html_pages/index.html b/files/ja/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index 1a41de9469..0000000000 --- a/files/ja/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Tips for Authoring Fast-loading HTML Pages -slug: Tips_for_Authoring_Fast-loading_HTML_Pages -tags: - - HTML ---- -

-


-Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. -これらの秘訣は、よく知られた知識や実験を元にしています。ウェブページの読込のパフォーマンスを向上させる助けとなる、さらなる助言をお持ちであれば、Discussion page of this articleにて提案してください。 -

最適化されたウェブページは、訪問者により素早く反応するサイトをもたらすだけでなく、ウェブサーバやインターネットへの接続負荷を軽減します。これは、大規模なサイト、あるいはニュース速報などの例外的な状況によってトラフィックが急増するサイトにとって、とても重大なことです。 -

ページの読込パフォーマンスの最適化とは、単に、低速なダイアルアップ回線の訪問者が見るであろうコンテンツを用意することではありません。高速回線向けのコンテンツについても同じくらい重要であり、最高速の回線を持つ訪問者にとってさえ、劇的な向上をもたらすことができます。 -


-

-

早く読み込まれるHTMLページを作成する秘訣

-

ページ容量を減らしましょう

-

ページ容量は、ページの読込パフォーマンスにおいて圧倒的に最重要の要因です。 -

不要な空白やコメントを除去したり、HTMLに直接書き込まれたスクリプトやCSSを外部ファイルに移すことで、ページの構造の変化は最小限で、ダウンロードのパフォーマンスを向上できます。 -

HTML Tidyのようなツールは、validなHTMLソースから、先頭の空白や余計な空行を自動的に取り除きます。そのほかのツールは、JavaScriptを、再フォーマット、あるいはソースの難読化や長い識別子を短いものへ縮めることにより、「圧縮」することができます。 -


-

-

ファイルの数をできるだけ少なくしましょう

-

一つのページ内で参照されるファイルの数を減らせば、ページのダウンロードに必要なHTTP接続の数が減ります。 -

ブラウザのキャッシュの設定によっては、CSS、JavaScriptあるいは画像ファイルのそれぞれについて、最後にダウンロードされたときから更新されているかどうかを確かめるため、サーバにIf-Modified-Sinceリクエストを送信するかもしれません。 -

ウェブページ内で参照されるファイルの数を減らすことにより、ブラウザからこれらのリクエストが送られ、それに対する返答が届くまでに必要となる時間が減ります。 -

ファイルの最終更新日時についての問い合わせに多くの時間が費やされると、ウェブページの最初の表示が遅れます。ブラウザはページのレンダリングを行う前に、CSSやJavaScriptファイルそれぞれの更新日時を問い合わせねばならないためです。 -


-

-

ドメイン検査を減らしましょう

-

分割された別々のドメイン一つ一つについてDNS検査するのは時間がかかるため、CSS、JavaScript、または画像を参照するのに用いる異なるドメインの数を減らすことで、ページ読込の時間が減ります。 -

これは必ずしも実用的であるとは限りません。しかしながら、ページにおける異なるドメインの数は、可能な限り最小で使うよう常に気をつけておくべきです。 -

-

再利用されるコンテンツをキャッシュしましょう

-

キャッシュされうるどのようなコンテンツでも、適切な期限切れまでの間、キャッシュされているかを確かめてください。 -

具体的にはLast-Modifiedヘッダに注意してください。これは効率的なページのキャッシュを可能にします。このヘッダを用いると、ロードしようとしているファイルが最後にいつ更新されたかについての情報が、ユーザ・エージェントに伝えられます。ほとんどのウェブサーバーは、静的なページ（例えば.htmlや.css）については、ファイルシステムに記録されている最終更新日時に基づき、自動的にLast-Modified headerを付加します。 -動的なページ（例えば.phpや.aspx）については、これは行われず、ヘッダは送られません。 -

従って、特に動的に生成されるページでは、この件について少し調べるだけでも有益です。多少複雑になることもありますが、通常はキャッシュされえないページへの多くのリクエストを抑えてくれるでしょう。 -

さらなる情報: -

-
  1. HTTP Conditional Get for RSS Hackers -
  2. HTTP 304: Not Modified -
  3. On HTTP Last-Modified and ETag -
-

ページの構成要素を並べ替えましょう

-

初めにページの内容をダウンロードさせることで、利用者はページ読込のさい明白に最も早い応答を得られます。 -

最初の表示に必要ないかなるCSSやJavaScriptよりも、ページの内容が第一にダウンロードされるべきです。この内容は通常は本文（htmlファイル）であり、これを圧縮することで、利用者に素早い応答を返すという恩恵が得られます。 -

どのようなDHTMLの機能も、それが実行される前にページが完全に読み込まれている必要があるので、初めは無効にしておき、読込の後になって有効にするべきです。 -


-

-

インラインスクリプトの数を減らしましょう

-

インラインスクリプト（HTMLに直接書き込まれたスクリプト）は、パーサが「インラインスクリプトはページ構造を修正する」と仮定してしまうので、ページの読込に高くつきます。一般に、インラインスクリプトわけても内容を出力するdocument.write()の利用を減らすことは、総合的なページの読込を向上させます。 -

最新のブラウザでページの内容を操作するには、document.write()に基づいた古い手法ではなく、 -最新のW3C DOMメソッドを用いましょう。 -

-

最新のCSSと妥当なマークアップを用いましょう

-

最新のCSSの利用は、マークアップの量を減らし、レイアウトに関する画像の必要性を減らすことができます。また、実質的には文章を画像にしただけで、それと同等の見た目を得られるCSSと文章よりも負担の大きい画像を、多くの場合に差し替えることができます。 -

妥当なマークアップの利用には、そのほかの利点があります。妥当なマークアップは、ブラウザがHTMLを構文解析する際に「誤り訂正」を行わせないばかりでなく、ウェブページの前処理を行うことができる他のツールを自由に利用することも可能にします。例えば、HTML Tidyは、空白や任意の終了タグを省略することができますが、深刻なマークアップの誤りのあるページでは動作するのを拒みます。 -

-

コンテンツを分割しましょう

-

ページの内容が完全にダウンロードされる前にページを表示できるように、<table>で作られたレイアウトを<div>のブロックに置き換えるか、表をより小さな表に分割しましょう。 -

次のような、深く入れ子になったtableよりも、 -

-
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-

次のような、入れ子になっていないtableやdivを使いましょう。 -

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-

画像や表のサイズを指定しましょう

-

もしブラウザが画像や表の高さか幅あるいはその両方を即座に決定できたら、内容をリフローする必要なくウェブページを表示することができるでしょう。これはページの表示を早めるだけでなく、読み込みが完了するときにページのレイアウトがうっとうしく変化するのを防ぎます。 -

画像（img）は、heightやwidthを指定されるべきです。 -

表（table）は、CSSのtable-layout: fixed規則を用い、縦列の幅をCOLやCOLGROUPタグを用いることで指定しておくべきです。 -

-

ユーザー・エージェントの必要条件を賢く選びましょう

-

ページデザインで最大の改善を達成するために、そのプロジェクトに適切なユーザー・エージェントの必要条件が特定されているかを確かめてください。 -

コンテンツが、すべてのブラウザとりわけ下位のブラウザで、１ピクセルのずれもなく同じに見えるようには要求しないでください。 -

理想的には、必要最小限の環境は、同じ標準に対応している現代的なブラウザに基づくべきです。それには次のブラウザが含まれます。すべてのプラットフォームのNetscape 7/Gecko 1.0.2+、WindowsのInternet Explorer（バージョン5.5以上）、WindowsのOpera（バージョン7以上）、Mac OS XのSafariです。 -

しかしながら、この技術文書に列挙されている秘訣の多くが、常識的な技法であることを気にとめておいてください。これらは、どのようなユーザー・エージェントにも適用されるし、あるページがブラウザの必要条件を満たしているかどうかに関係なく、どのようなページにも適用されうるのです。 -

-

ページ構造の例

-

· HTML -

-
· HEAD -
-
· LINK ...
ページの外観に必要なCSSファイル。ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないCSSは、保全のため別々のファイルにしておきましょう。 -
-
-
· SCRIPT ...
ページ読込の間に「必要」な機能のためのJavaScriptファイル。ただし、ページが読み込まれたあとでようやく動作できるDHTMLではありません。 -
·ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。 -
-
-
· BODY -
小さな塊（複数のtable / 複数のdiv）に分けられた、ページの内容。ページ全体がダウンロードされるのを待たずに表示されます。 -
-
· SCRIPT ...
DHTMLを実行するために使われうる、あらゆるスクリプト。DHTMLは通常は、ページが完全に読み込まれ、全ての必要なオブジェクトが初期化された後に、ようやく動作できます。ページ内容の前にこれらのスクリプトを読み込む必要はありません。読込の初期のページ表示を遅くするだけです。 -
ファイルの数は、パフォーマンスのために最小限に抑えましょう。ただし関連のないJavaScriptは、保全のため別々のファイルにしておきましょう。 -
ロールオーバー効果のために画像を用いるときは、ページ内容がダウンロードされた後に、ここでそれらを先読みしておくべきです。 -
-
-

関連リンク

- -
-

元になった文書の情報

-
  • Author(s): Bob Clary, Technology Evangelist, Netscape Communications -
  • Last Updated Date: Published 04 Apr 2003 -
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved. -
  • Note: This reprinted article was originally part of the DevEdge site. -
-
-
-
-{{ languages( { "en": "en/Tips_for_Authoring_Fast-loading_HTML_Pages", "pl": "pl/Porady_odno\u015bnie_tworzenia_szybko_\u0142aduj\u0105cych_si\u0119_stron_HTML", "zh-cn": "cn/Tips_for_Authoring_Fast-loading_HTML_Pages" } ) }} diff --git a/files/ja/title/index.html b/files/ja/title/index.html deleted file mode 100644 index ab170f7d35..0000000000 --- a/files/ja/title/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: title -slug: title -tags: - - Disambiguation -translation_of: Web/HTML/Element/title -translation_of_original: title ---- -

title は、その文脈により異なるものを指す場合があります。

- -
    -
  • DOM:{{ domxref("element.title")}} - 要素の title 属性の値を取得 / 設定
    • -
  • DOM:{{domxref("document.title")}} - 文書の title 要素の値を取得 / 設定
    • -
  • <title> (HTML) - HTML の title 要素
    • -
  • <title> (SVG)   - SVG の title 要素
    • -
  • <title> (RSS)   - RSS の title 要素
    • -
- -

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

diff --git a/files/ja/toolkit_api/official_references/index.html b/files/ja/toolkit_api/official_references/index.html deleted file mode 100644 index b70888bdb4..0000000000 --- a/files/ja/toolkit_api/official_references/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: Official References -slug: Toolkit_API/Official_References -tags: - - Toolkit API ---- -

Official References. Do not add to this list without contacting Benjamin Smedberg. Note that this page is included from the pages listed below. So: Don't Add Breadcrumbs! -

- diff --git a/files/ja/tools/3d_view/index.html b/files/ja/tools/3d_view/index.html new file mode 100644 index 0000000000..daac55be01 --- /dev/null +++ b/files/ja/tools/3d_view/index.html @@ -0,0 +1,103 @@ +--- +title: 3D ビュー +slug: Tools/Page_Inspector/3D_view +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+

Firefox 47 より、3D ビューは使用できません。

+ +

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

+
+ +

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

+ +

+ +

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネル や スタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

+ +

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

+ +

3D ビューのコントロール

+ +

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能キーボードマウス
ズームイン/アウト+ / -ホイールの上回転/下回転
左右の回転a / d左右へのドラッグ
上下の回転w / s上下へのドラッグ
左右の移動← / →左右へのドラッグ
上下の移動↑ / ↓上下へのドラッグ
ズームレベルの初期化0ズームレベルを既定の状態に初期化します。
選択したノードへフォーカスf選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}
ビューの初期化rズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}
選択中のノードを隠すx現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}
+ +

3D ビューの用途

+ +

さまざまな状況で 3D ビューは役に立ちます:

+ +
    +
  • 壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。
    • +
  • コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。
    • +
  • レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。
    • +
  • また、3D ビューの表示は印象的です。
    • +
+ +

関連情報

+ + diff --git a/files/ja/tools/add-ons/index.html b/files/ja/tools/add-ons/index.html deleted file mode 100644 index 9478dd0d88..0000000000 --- a/files/ja/tools/add-ons/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: アドオン -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}
- -

Firefoxには組み込まれていないが、別々のアドオンとして提供される開発ツールです。

- -
-
WebSocket Monitor
-
WebSocket接続でやりとりされるデータを調べます。
-
diff --git a/files/ja/tools/css_coverage/index.html b/files/ja/tools/css_coverage/index.html deleted file mode 100644 index cf45c2988e..0000000000 --- a/files/ja/tools/css_coverage/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: CSSカバレッジ -slug: Tools/CSS_Coverage -tags: - - Experimental - - Firefox - - ガイド - - ツール - - 初心者 -translation_of: Tools/CSS_Coverage ---- -

{{ToolsSidebar}}

- -
-

この機能は実験的なもので、Firefoxではまだ利用できません。

-
- -

CSSカバレッジは、Firefox開発者向けのコマンドセットで、使い古されていないCSSを指摘し、初期レンダリングに必要なCSSファイルの部分を示すことで、乱雑なCSSを解くのに役立ちます。

- -

これらのツールは、「使用」の定義が複雑であるため、多少実験的ですが、実際に何が起こっているかを理解する手助けとなることが期待されます。

- -

それらが一般的に使用される方法は次のとおりです。

- -
    -
  • カバレッジトラッカーを開始("csscoverage start")する
    • -
  • あなたのウェブサイトの代表的なページにアクセスする
    • -
  • トラッカーを停止("csscoverage stop")し、スタイルエディタで未使用のルールを表示する
    • -
  • 各ページに表示されるルールを含むレポートを表示("csscoverage report")する
    • -
- -

もう1つのコマンド("csscoverage oneshot")では、効果的に実行("csscoverage start; csscoverage stop")できます。

- -

「使用」が意味するのは?

- -

TL;DR:

- -

CSSカバレッジは、以下の例のtag#id.classセレクタが一連のWebページに存在するかどうかを確認します。

- -
@media thing {
-  tag#id.class:hover {
-    foo: bar;
-  }
-}
- -

なぜ?

- -

あなたのCSSに次のものが設定されているとします。テスト中にマウスがスパンに入っていない場合。 ルールは使用されるでしょうか？

- -
<style>
-  span:hover {
-    color: purple;
-  }
-</style>
-
-<span>Test</span>
-
- -

技術的には span:hover は、「テスト」という言葉がいつも紫色ではなかったという点で使われていませんでした。しかしながら CSS のカバレッジは実際にルールが関連性があるか無関係かを調べることです。また span:hover は明らかにページとの関連性があります。

- -

同様に、あなたのCSSが次のものを持っているとします：

- -
<style>
-  @media tv {
-    span {
-      color: purple;
-    }
-  }
-</style>
-
-<span>Test</span>
-
- -

関連性を測定するには、テレビを自分の環境に接続する必要がありますか？

- -

しかし、「使用」は関連性だけではありません...
- 次のルールは適切ですか？

- -
<style>
-  span { }
-</style>
-
-<span>Test</span>
-
- -

ページに影響を及ぼさず安全に削除できるため、関連性がないと主張することができます。

- -

しかし、次のものはどうでしょうか？

- -
<style>
-  span {
-    -o-text-curl: minor;
-  }
-</style>
-
-<span>Test</span>
-
- -

それが使用されているかどうかを知っているかどうかは、おそらく検索エンジンと分析技術の使用を必要とし、おそらくサイトのサポートされているブラウザのバージョンに関する知識です。 これらはすべて特異点までこのツールの範囲を超えているとみなされます。

- -

以下の例で div ルールが "used" とみなされる理由についても説明します。

- -
<style>
-  div { color: red; }
-  span { color: blue; }
-</style>
-
-<div><span>Test</span></div>
-
- -

div ルールはページの最終的なレンダリングには影響しないので未使用だと主張できますが、この代替定義を検討してください：

- -
<style>
-  div { color: red; border: none; }
-  span { color: blue; }
-</style>
-
- -

ボーダールールが使用されているかどうかを知ることは難しく、他にもさまざまなバリエーションがあります。 「使用」の定義をさらに複雑にする不透明度、可視性および色変換を考慮する。 物事を単純にするために、 "use"はセレクタが要素にマッチすることを意味します。

- -

明らかに、テスト中にタッチしたスタイルシートに、テスト中に見られない特定のページだけのルールが含まれている場合は、そのルールが使用されているにもかかわらず、そのルールを「未使用」としてマークします。 実際にCSSファイルからルールを削除する前に、二重チェックの価値があります。

- -

警告

- -

知っておくべきこと：

- -
    -
  • URL はテストの期間を通して参照されるたびに同じバイトセットを返すものとします。
    • -
  • 代替スタイルシートをトラッキングしません。
    • -
- -

バグ

- -

私たちはいくつかの重要なバグに取り組んでいます：

- -
    -
  • 現在、スタイルシートを追加するなど、JavaScript による CSSOM の変更を追跡していません。bug 1007533 を参照してください。
    • -
  • スタイルエディタのマークアップはライン単位で行われていますが、現在はソースマップを処理していないため、圧縮された CSS でこれを実行すると混乱します。bug 1007073 を参照してください。
    • -
  • @keyframe の情報はプリロード要約に含まれません。bug 1034062 を参照してください。
    • -
- -

代替候補

- -

Firefox を使わずに未使用のCSSを見つけるのに役立つ複数のツールがあります。

- -
    -
  • Unused CSS は再帰的にサイトをクロールして未使用の CSS セレクタを検出します。広告のない無料のオンラインツールです。
    • -
  • PurifyCSS はインストール後にコンソールツールとして使用できる NPM パッケージです
    • -
  • unused-css.com 別のオンラインツール。これは無料ではありません。
    • -
diff --git a/files/ja/tools/debugger/break_on_dom_mutation/index.html b/files/ja/tools/debugger/break_on_dom_mutation/index.html new file mode 100644 index 0000000000..4aca9399f6 --- /dev/null +++ b/files/ja/tools/debugger/break_on_dom_mutation/index.html @@ -0,0 +1,23 @@ +--- +title: DOM イベントでブレークする +slug: Tools/Debugger/How_to/Break_on_a_DOM_event +translation_of: Tools/Debugger/Break_on_DOM_mutation +translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event +--- +
{{ToolsSidebar}}
+

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

+ +

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

+
+ +

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

+ +

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、"イベント" タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

+ +

+ +

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

+ +

イベントが発生すると、リスナーの始点でコードがブレークします。

+ +

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/tools/debugger/how_to/black_box_a_source/index.html b/files/ja/tools/debugger/how_to/black_box_a_source/index.html deleted file mode 100644 index 0378307727..0000000000 --- a/files/ja/tools/debugger/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ソースをブラックボックス化する -slug: Tools/Debugger/How_to/Black_box_a_source -translation_of: Tools/Debugger/How_to/Ignore_a_source ---- -

{{ToolsSidebar}}

- -

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

- -

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

- -

- -

ソースをブラックボックス化すると以下のようになります:

- -
    -
  • すべてのブレークポイントが無効になります。
    • -
  • デバッガーオプション で“例外発生で停止”が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。
    • -
  • ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。
    • -
diff --git a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html deleted file mode 100644 index 4aca9399f6..0000000000 --- a/files/ja/tools/debugger/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: DOM イベントでブレークする -slug: Tools/Debugger/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger/Break_on_DOM_mutation -translation_of_original: Tools/Debugger/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

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

- -

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

-
- -

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

- -

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、"イベント" タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

- -

- -

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

- -

イベントが発生すると、リスナーの始点でコードがブレークします。

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 74c0db4345..0000000000 --- a/files/ja/tools/debugger/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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/tools/debugger/how_to/ignore_a_source/index.html b/files/ja/tools/debugger/how_to/ignore_a_source/index.html new file mode 100644 index 0000000000..0378307727 --- /dev/null +++ b/files/ja/tools/debugger/how_to/ignore_a_source/index.html @@ -0,0 +1,20 @@ +--- +title: ソースをブラックボックス化する +slug: Tools/Debugger/How_to/Black_box_a_source +translation_of: Tools/Debugger/How_to/Ignore_a_source +--- +

{{ToolsSidebar}}

+ +

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

+ +

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

+ +

+ +

ソースをブラックボックス化すると以下のようになります:

+ +
    +
  • すべてのブレークポイントが無効になります。
    • +
  • デバッガーオプション で“例外発生で停止”が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。
    • +
  • ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。
    • +
diff --git a/files/ja/tools/debugger/how_to/search_and_filter/index.html b/files/ja/tools/debugger/how_to/search_and_filter/index.html deleted file mode 100644 index 4f3391c8b1..0000000000 --- a/files/ja/tools/debugger/how_to/search_and_filter/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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/tools/debugger/limitations_of_the_new_debugger/index.html b/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html deleted file mode 100644 index b6ef21e414..0000000000 --- a/files/ja/tools/debugger/limitations_of_the_new_debugger/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: 新しいデバッガーの制限事項 -slug: Tools/Debugger/Limitations_of_the_new_debugger -translation_of: Tools/Debugger/Limitations_of_the_new_debugger ---- -
{{ToolsSidebar}}

バージョン 52 より、新しいデバッガーを Firefox に内蔵しています。現在、新しいデバッガーは Firefox Developer Edition および Firefox Nightly のみ有効化しています。新しいデバッガーは旧デバッガーより高速かつ信頼性が高く、将来の開発のための基盤を提供します。

- -

しかし、旧デバッガーの一部機能をまだサポートしていません。このページでは、新しいデバッガーで未サポートである、旧デバッガーの機能を掲載します。

- -

これらの機能のほとんどは将来のリリースでサポートする予定であり、このページは適宜更新しますので注意してください。

- -

これらの機能のいずれかが必要である場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定すると、旧デバッガーに戻すことができます。

- -

以下の機能は、新しいデバッガーでまったくサポートしていません。

- - - -

検索機能 は部分的にサポートしています。ファイル名の検索やファイル内の文字列の検索 は可能です。しかし、以下の検索は未サポートです:

- -
    -
  • すべてのファイルにわたって検索する
    • -
  • すべてのファイルにわたって関数の定義を検索する
    • -
  • 特定の行に移動する
    • -
  • 表示されている変数をフィルタリングする
    • -
diff --git a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html deleted file mode 100644 index 88d3b0d7bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: ブレークポイントの無効化 -slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -
{{ToolsSidebar}}
- -

ブレークポイントを無効にするには、ソースリストペインでブレークポイントのエントリの横にあるチェックボックスをオフにします。

- -

- -

または、マウスポインタがソースリストペインのブレークポイントのエントリの上にあるときにコンテキストメニューをアクティブにし、"Disable breakpoint"を選択します。

- -

ブレークポイントを表す矢印をクリックするだけでブレークポイントを削除することもできます。

- -

すべてのブレークポイントを無効/有効にするには、ソースリストペインで"Toggle all breakpoints"ボタンを使用します。

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html deleted file mode 100644 index 573456e364..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/access_debugging_in_add-ons/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: アドオンでデバッグにアクセスする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Access_debugging_in_add-ons ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -
-

このドキュメントで説明する方法を Firefox のアドオンで使用することは、非推奨にする予定です。これらの方法を使用する新たなアドオンを作成しないでください。

-
- -

以下のアイテムは、chrome://browser/content/debugger.xul (バージョン 23 以降では chrome://browser/content/devtools/debugger.xul) のコンテキストにアクセスできます:

- -
    -
  • window.addEventListener("Debugger:EditorLoaded") - 読み取り専用のスクリプトパネルが読み込まれたときに呼び出されます。
    • -
  • window.addEventListener("Debugger:EditorUnloaded")
    • -
- -

関連ファイル:

- -
    -
  • chrome://browser/content/devtools/debugger-controller.js
    • -
  • chrome://browser/content/devtools/debugger-toolbar.js
    • -
  • chrome://browser/content/devtools/debugger-view.js
    • -
  • chrome://browser/content/devtools/debugger-panes.js
    • -
- -

残念ながらデバッグを行っている範囲内のウォッチ/式を評価する API や、デバッグを行っている範囲内の変数として参照されている、ページ内の要素をハイライトする API はまだありません。(現在作業中であり、バグ 653545 をご覧ください)

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html deleted file mode 100644 index f16826cf46..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/black_box_a_source/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: ソースをブラックボックス化する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Black_box_a_source ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

現在のウェブ開発では jQuery、Ember、Angular のようなライブラリーに頼ることが多く、ライブラリーを実行する時間の 99% は“正しく働く”と考えても問題ありません。私たちは、これらのライブラリーの内部実装を気にしません。それらは ブラックボックス のように扱います。しかし自身のコードへ達するためにスタックフレームのステップ実行を行っているとき、ライブラリーから抽出されたものがデバッグセッション内に見えてしまいます。ブラックボックス化により、選択したソースの詳細をデバッガーに無視させることができます。

- -

ソースリストペイン でソースを選択して、左下にある目玉のアイコンをクリックすると、ブラックボックス化を有効または無効にできます:

- -

- -

開発ツールバー を開いて dbg blackbox コマンドを使用すると、複数のソースをまとめてブラックボックス化できます:

- -

- -

ソースをブラックボックス化すると以下のようになります:

- -
    -
  • すべてのブレークポイントが無効になります。
    • -
  • デバッガーオプション で [例外発生で停止] が有効であるとき、デバッガーはブラックボックス化したソース内で例外が発生しても停止しません。代わりに、スタックが (存在する場合は) ブラックボックス化していないソース内にあるフレームに戻るまで待ちます。
    • -
  • ステップ実行するとき、デバッガーはブラックボックス化したソースをスキップします。
    • -
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html deleted file mode 100644 index 706d844280..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/break_on_a_dom_event/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM イベントでブレークする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Break_on_a_DOM_event ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

特定の DOM イベントをリッスンしている場合は、リスナーを探し出して手動でブレークポイントを設定することなく、イベントが発生したときにデバッガーにブレークさせることができます。

- -

始めに ツールバー 上の変数/イベントペインを開くボタンをクリックして、イベントペイン を開きます。そして、[イベント] タブをクリックします。イベントペインは、リスナーを割り当てているすべてのイベントを列挙します:

- -

- -

そして、ブレークさせたいイベントの隣にあるボックスにチェックを入れてください。

- -

イベントが発生すると、リスナーの始点でコードがブレークします。

- -

{{EmbedYouTube("f-tbR8kj0K0")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html deleted file mode 100644 index bbd25b285e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/debug_eval_sources/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: eval ソースをデバッグする -slug: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Debug_eval_sources ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

eval() に渡される文字列や Function コンストラクターに渡される文字列といった、動的に評価される JavaScript コードをデバッグできます。

- -

これを行うために、//# sourceURL ディレクティブを使用してソースに名前をつけなければなりません:

- -
var button = document.getElementById("clickme");
-button.addEventListener("click", evalFoo, false);
-
-var script = "function foo() {" +
-             "  console.log('called foo');" +
-             "}" +
-             "foo();//# sourceURL=my-foo.js";
-
-function evalFoo() {
-  eval(script);
-}
- -

これは、スクリプトに "my-foo.js" という名前をつけます。

- -

文字列が評価されるとデバッガーでは別のソースとして表示され、他のソースと同様にデバッグできます。また、ソースを 整形 できます:

- -

{{EmbedYouTube("nFm8F8Anmic")}}

- -

ソースにつけた名前は、ウェブコンソール に現れるスタックトレースでも表示されます。

- -

また、無名の eval ソース内にある debugger; 文でもデバッガーが停止します。

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html deleted file mode 100644 index 73595678bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/disable_breakpoints/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: ブレークポイントの無効化 -slug: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Disable_breakpoints ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

ソースリストペイン で、ブレークポイントの項目の隣にあるチェックボックスのチェックを外すと、ブレークポイントが無効になります:

- -

- -

または、ソースリストペインのブレークポイントの項目にマウスポインターを載せてコンテキストメニューを開き、[ブレークポイントを無効にする] を選択します。

- -

ブレークポイントを示す矢印をクリックして、ブレークポイントを削除することもできます。

- -

すべてのブレークポイントのオン/オフを切り替えるには、ソースリストペイン で [すべてのブレークポイントを有効化/無効化] ボタンをクリックしてください:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html deleted file mode 100644 index 7d08b706a5..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/examine,_modify,_and_watch_variables/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: 変数を調査、編集、ウォッチする -slug: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' -translation_of: 'Tools/Debugger_(before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables' ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

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/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html deleted file mode 100644 index da2ab1e637..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/highlight_and_inspect_dom_nodes/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: DOM ノードのハイライトと調査 -slug: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

変数ペイン で DOM ノードにマウスポインターを載せると、ページ上でそのノードをハイライト表示します。

- -

また、変数の隣に標的のアイコンが表示されます。このアイコンをクリックすると、その DOM ノードを選択した インスペクター が開きます。

- -

{{EmbedYouTube("0JWxXp2Qql8")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html deleted file mode 100644 index b792199c59..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: How to -slug: Tools/Debugger_(before_Firefox_52)/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger_(before_Firefox_52)/How_to ---- -
{{ToolsSidebar}}
- -

これらの記事では、デバッガの使用方法について説明します。

- -

{{ ListSubpages () }}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html deleted file mode 100644 index 2408127b78..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: デバッガーを開く -slug: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Open_the_debugger ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

メニューボタン ( new fx menu ) をクリックして [開発ツール]、 [デバッガー] の順にクリックすると、デバッガーが開きます。あるいは、以下のキーボードショートカットを使用します:

- -
    -
  • Windows および Linux では Control-Shift-S
    • -
  • Mac では Command-Option-S
    • -
- -

インスペクターがアクティブになっている ツールボックス が、ブラウザーのウィンドウ下部に現れます。こちらが始めにデバッガーを開いたときの様子です:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html deleted file mode 100644 index 13146945a0..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/pretty-print_a_minified_file/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: 圧縮されたファイルを整形する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Pretty-print_a_minified_file ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

圧縮された (minified) ファイルを整形するには、ファイルを開いてから波括弧のペアが描かれたアイコンをクリックしてください:

- -

- -

ファイルを読みやすい形式で表示します。

- -

デバッガーの設定 で [圧縮されたソースを自動的に整形表示] を選択すると、デバッガーが圧縮されたソースを検出して自動的に整形するように指定できます。

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html deleted file mode 100644 index 881571f63e..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/search_and_filter/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 検索とフィルター -slug: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Search_and_filter ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

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

- -

- -

接頭辞をつけずに文字列を入力すると、ソースリストペイン に一覧表示されているソースのファイル名から検索します。Enter キーや矢印キーを押下して、マッチしたファイル名のソースを表示します。

- -

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

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

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

- -

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

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

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

- -

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

- - - - - - - - - - - - -
file.js:12"file.js" を開いて 12 行目へ移動します。
mod#onLoadファイル名に "mod" を含むすべてのファイルから、文字列 "onLoad" を検索します。
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html deleted file mode 100644 index cb8ae2d4bf..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: ブレークポイントを設置する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_breakpoint ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

デバッガーで JavaScript コードにブレークポイントを設定する方法は、以下のとおり複数あります。

- -
    -
  • ソースペイン で、実行を停止したい行の行番号をクリックします。
    • -
  • ソースペイン で、実行を停止したい行でコンテキストメニューを開いて、[ブレークポイントを設置] を選択します。
    • -
  • ソースペイン で、ブレークポイントを設置したい行をハイライトして Ctrl+B (Windows/Linux) または Command+B (Mac OS X) を押下します。
    • -
- -

それぞれのブレークポイントは、デバッガー内の 2 カ所に表示します:

- - - -

以下のスクリーンショットでは、ファイルの 20 行目と 28 行目にブレークポイントがあります。また、20 行目のブレークポイントにヒットしています:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html deleted file mode 100644 index 3a3958596c..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/set_a_conditional_breakpoint/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 条件付きブレークポイントを設置する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Set_a_conditional_breakpoint ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

条件付きブレークポイントを設置するには ソースペイン で、設置したい行でコンテキストメニューを開いて [条件付きブレークポイントを設置] を選択します。そして、表示されたポップアップに条件式を入力します:

- -

- -

条件付きブレークポイントは、ソースペインで橙色の矢印がつきます:

- -

- -

条件を編集したり通常のブレークポイントに条件を追加したりするには、コンテキストメニューを開いて [条件付きブレークポイントを設定する] を選択します:

- -

diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html deleted file mode 100644 index 634315dd13..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/step_through_code/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: コードをステップ実行する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Step_through_code ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

コードがブレークポイントで止まったときは、ツールバー の左側にある 4 つのボタンを使用してステップ実行を実施できます:

- -

ボタンは順に以下のとおりです:

- -
    -
  • 復帰: 次のブレークポイントまで実行します。
    • -
  • ステップオーバー: 同一関数内で次の行へ進みます。
    • -
  • ステップイン: 当該行が関数の呼び出しでなければ、関数内で次の行へ進みます。関数の呼び出しである場合は、呼び出した関数に入ります。
    • -
  • ステップアウト: 現在の関数の終端まで実行します。
    • -
diff --git a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html b/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html deleted file mode 100644 index 1f41177f80..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: ソースマップを使用する -slug: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map -translation_of: Tools/Debugger_(before_Firefox_52)/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

JavaScript のソースは、より効率よくサーバーから提供するためにコンバインあるいはミニファイされることがよくあります。さらに CoffeeScript や TypeScript のような言語からコンパイルするように、ページで実行する JavaScript は次第にプログラムによって作られる傾向があります。ソースマップ の使用によって、デバッグをとても容易にするために、デバッガーが実行中のコードを元のソースファイルと対応づけることができます。

- -

デフォルトでは、デバッガーは使用可能であればソースマップを使用します。ソースマップのサポートが有効かを確認する、あるいは必要に応じて無効化する場合は、[デバッガーのオプション] ボタンをクリックして、ポップアップした設定一覧で [元のソースを表示] を確認してください:

- -

- -

もちろん、これを動作させるためにはページで実行する JavaScript にソースマップを与えることが必要です。ソースファイルにコメントディレクティブを追加してください:

- -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
diff --git a/files/ja/tools/debugger_(before_firefox_52)/index.html b/files/ja/tools/debugger_(before_firefox_52)/index.html deleted file mode 100644 index 404974a00f..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: デバッガー (Firefox 52 より前) -slug: Tools/Debugger_(before_Firefox_52) -translation_of: Tools/Debugger_(before_Firefox_52) ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

JavaScript デバッガーでは、バグを追究するために JavaScript コードのステップ実行やコードの状態の調査または変更が可能です。

- -

Firefox でローカル実行しているコードや、例えば Firefox OS デバイスや Android 版 Firefox などのリモートで実行しているコードのデバッグに使用できます。特定のブラウザーに接続する手順については、リモートデバッグ のページをご覧ください。

- -

{{EmbedYouTube("sK8KU8oiF8s")}}

- -
-

ユーザーインターフェイスツアー

- -

デバッガーについてひととおり理解するために、 UI のクイックツアー を用意しました。

- -
-

使い方

- -

デバッガーで何ができるかを知るために、以下のガイドをご覧ください:

- -
- -
- -
-

リファレンス

- -
- -
diff --git a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html b/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html deleted file mode 100644 index 8625bb75bb..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/keyboard_shortcuts/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: キーボードショートカット -slug: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts -translation_of: Tools/Debugger_(before_Firefox_52)/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "デバッガー(Firefox_52より前)")}}

- -

共通ショートカット

- -

{{Page ("ja/docs/tools/Keyboard_shortcuts", "all-toolbox-tools")}}

diff --git a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html b/files/ja/tools/debugger_(before_firefox_52)/settings/index.html deleted file mode 100644 index a9f0a505b3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/settings/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: オプション -slug: Tools/Debugger_(before_Firefox_52)/Settings -translation_of: Tools/Debugger_(before_Firefox_52)/Settings ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

デバッガーには独自の設定メニューがあり、ツールバー 上のアイコンからアクセスできます:

- -

- -

それぞれのオプションは、オン/オフの切り替え式になっています:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
圧縮されたソースを自動的に整形表示このオプションを有効にすると、デバッガーは圧縮された JS ファイルを自動的に検出して 整形 します。
例外発生で停止このオプションが有効であるときは、JavaScript の例外が発生した際にスクリプトの実行が自動的に停止します。
キャッチした例外を無視 -

このオプションを有効 (デフォルトで有効) にして [例外発生で停止] も有効にすると、キャッチされていない例外だけで実行が停止します。

- -

これは通常、望ましい動作です。例外がキャッチされたということは通常、プログラムが例外を適切に扱っていることを示しますので、一般的にそのような例外での停止は望まれません。

-
起動時にデバッガを開くこのオプションが有効であるときは、始めにデバッガーを起動した時点で 変数ペイン が開くようになります。
計算可能なプロパティのみ表示{{原語併記("列挙可能", "enumerable")}} ではない JavaScript プロパティを表示しません。
変数フィルターボックスを表示このオプションを有効にすると 変数ペイン に [変数を検索] ボックスが表示されますので、表示されている変数一覧をフィルターできます。
元のソースを表示このオプションを有効にすると、デバッガーは可能であれば ソースマップ を使用します。これはコンバイン、ミニファイ、あるいは CoffeeScript のような言語からコンパイルした JavaScript の、元のソースコードを表示するためのオプションです。デフォルトで有効です。
圧縮されたソースを自動的にブラックボックス化する -
-

Firefox 33 の新機能

-
- -

URL の末尾が ".min.js" であるソースファイルを自動的に ブラックボックス化 します。デフォルトで有効です。

-
diff --git a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html b/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html deleted file mode 100644 index 8a8b6645f3..0000000000 --- a/files/ja/tools/debugger_(before_firefox_52)/ui_tour/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: UI ツアー -slug: Tools/Debugger_(before_Firefox_52)/UI_Tour -translation_of: Tools/Debugger_(before_Firefox_52)/UI_Tour ---- -
{{ToolsSidebar}}
-

このページは、Firefox 52 より前の JavaScript デバッガーについて説明します。

- -

Firefox 52 以降のデバッガーを確認します。

-
- -

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。デバッガーの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:

- - - -

- -

ツールバー

- -

ツールバーは 4 つのセクションで構成されます:

- - - -

- -

左側にある 4 つのボタンは、以下の機能を実行します:

- -
    -
  • 停止/復帰 (F8): デバッグ中のスクリプトの実行を停止および再開します。上図のようにボタンが青色で "押し込まれている" ときは、ボタンを押して停止したかブレークポイントにヒットしたことにより、スクリプトが停止していることを表します。
    • -
  • ステップオーバー (F10): JavaScript コードで現在の行をステップ実行します。
    • -
  • ステップイン (F11): JavaScript で現在の行にある関数呼び出しにスキップします。
    • -
  • ステップアウト (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。
    • -
- -

コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。

- -

ソースリストペイン

- -

ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインと コールスタックペイン は画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。

- -

- -

ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルは ソースペイン に読み込みます。

- -


- ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:

- -
    -
  • 当該ブレークポイント、すべてのブレークポイント、あるいは他のブレークポイントを有効化、無効化、あるいは削除する
    • -
  • 当該ブレークポイントを条件付きにする (すでに条件付きである場合は、条件を変更する)
    • -
- -

ソースリストの下部にある 3 個のアイコンで、ソースのブラックボックス化、圧縮された JS ファイルの整形、すべてのブレークポイントの有効/無効 の切り替えが可能です。

- -

ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:

- -

- -

コールスタックペイン

- -

デバッガーの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:

- -

- -

各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。

- -

ソースペイン

- -

- -

ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:

- -

ソースペインでは、コンテキストメニューで以下の操作が可能です:

- -
    -
  • ブレークポイントを設置
    • -
  • 条件付きブレークポイントを設置
    • -
  • 選択範囲のウォッチ式を追加
    • -
  • スクリプトフィルター を使用して検索やフィルターを行う
    • -
- -

Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。control キー (Mac OS X では command キー) を押下しながら、関数名をクリックしてください。

- -

変数のポップアップ

- -

ソースペインで変数にマウスポインターを載せると、現在の変数の値を表示するポップアップが現れます:

- -

- -

この機能により 変数ペイン を開いて検索することなく、すばやく変数の値を確認できます。

- -

変数ペイン

- -

変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:

- -

- -

変数ペインは画面領域を イベントペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

- -

イベントペイン

- -

イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:

- -

- -

これは画面領域を 変数ペイン と共有しており、ペイン上部のタブでそれらを切り替えることができます。

- -

イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナーが存在するすべてのイベントを以下の構文で列挙します:

- -
[イベント名] on [イベントターゲット] in [ソースファイル]
- -

イベント名の隣にあるチェックボックスにチェックを入れると、デバッガーはイベントリスナーの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガーはタイプの下に列挙しているすべてのイベントでブレークします。

diff --git a/files/ja/tools/memory/comparing_heap_snapshots/index.html b/files/ja/tools/memory/comparing_heap_snapshots/index.html deleted file mode 100644 index 74fa47f372..0000000000 --- a/files/ja/tools/memory/comparing_heap_snapshots/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -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/tools/page_inspector/3d_view/index.html b/files/ja/tools/page_inspector/3d_view/index.html deleted file mode 100644 index daac55be01..0000000000 --- a/files/ja/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 3D ビュー -slug: Tools/Page_Inspector/3D_view -tags: - - HTML - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/3D_View ---- -
{{ToolsSidebar}}
-

Firefox 47 より、3D ビューは使用できません。

- -

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

-
- -

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

- -

- -

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネル や スタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

- -

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

- -

3D ビューのコントロール

- -

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能キーボードマウス
ズームイン/アウト+ / -ホイールの上回転/下回転
左右の回転a / d左右へのドラッグ
上下の回転w / s上下へのドラッグ
左右の移動← / →左右へのドラッグ
上下の移動↑ / ↓上下へのドラッグ
ズームレベルの初期化0ズームレベルを既定の状態に初期化します。
選択したノードへフォーカスf選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}
ビューの初期化rズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}
選択中のノードを隠すx現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}
- -

3D ビューの用途

- -

さまざまな状況で 3D ビューは役に立ちます:

- -
    -
  • 壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。
    • -
  • コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。
    • -
  • レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。
    • -
  • また、3D ビューの表示は印象的です。
    • -
- -

関連情報

- - diff --git a/files/ja/tools/page_inspector/how_to/edit_fonts/index.html b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html new file mode 100644 index 0000000000..dc20a581e8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html @@ -0,0 +1,233 @@ +--- +title: フォントを確認する +slug: Tools/Page_Inspector/How_to/View_fonts +tags: + - Fonts + - Guide + - Inspector + - Tools + - variable fonts +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}
+ +

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

+ +
+

注記: この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。

+
+ +

フォントタブ

+ +

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

+ +
    +
  1. インスペクターを開きます。
    2. +
  2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。
    3. +
+ +

+ +

フォントタブは 3 つの主要なセクションに分かれています:

+ +
    +
  • "Fonts used" : 現在調査中の要素で使用しているフォント。
    • +
  • 新しいフォントエディター。Firefox 61 および 62 では、このセクションがありません。
    • +
  • "All fonts on page" : このセクションは、ページで使用しているすべてのフォントを表示します。Firefox 61 および 62 ではこの領域が "ページ内の他のフォント" という名前であり、"Fonts used" セクションにあるフォントが含まれません。
    • +
+ +

Fonts used

+ +

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

+ +

+ +

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

+ +

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

+ +
    +
  • 要素の font-family CSS 宣言の値に指定されている。
    • +
  • ブラウザーのデフォルトスタイル (ラテン文字ではほとんどのブラウザーで Times New Roman) が要素に適用されており、作者が定義したフォントは与えらえていない。
    • +
  • フォントが適用されたテキストコンテンツを持つほかの要素を包含しているなど、調査中の要素の子孫でフォントが使用されている。
    • +
  • font-family CSS 宣言で指定されたフォントがないため、システムの既定のフォントが使用されている。
    • +
+ +

フォントエディター

+ +

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

+ +

+ +

通常の (静的な) フォントでは、以下の設定を変更できます。

+ +

サイズ

+ +

調査中の要素の {{cssxref("font-size")}} です。

+ +

+ +

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +
+

注記: pt など、ほかの単位を font-size や line-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

+
+ +

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

+ +

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

+ +

Line height

+ +

調査中の要素の {{cssxref("line-height")}} です。

+ +

+ +

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +

単位を変更すると、font-size の設定に応じて値を変換します。

+ +

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

+ +

太さ

+ +

調査中の要素の {{cssxref("font-weight")}} です。

+ +

Font weight setting

+ +

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

+ +
+

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

+
+ +

イタリック

+ +

調査中の要素の {{cssxref("font-style")}} です。

+ +

+ +

この設定は、font-style プロパティの値 italic と normal を切り替えます。

+ +
+

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

+
+ +

All fonts on page

+ +

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

+ +

+ +

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

+ +

このセクションでは、それぞれのフォントで以下の情報を提供します:

+ +
    +
  • フォントの、font-family における識別子と正式名称。
    • +
  • システムで使用できないウェブフォントである場合は、フォントファイルの URL。あるいはコンピューターから読み込んだフォント (既定のシステムフォント、または以前システムにインストールしたウェブフォント) である場合は "システム" と表示します。URL の右にあるアイコンをクリックすると、フォントファイルの URL をコピーします。
    • +
  • ウェブフォントである場合に、フォントをページに読み込む際の {{cssxref("@font-face")}} ディスクリプター。ディスクリプターは展開可能であり、展開するとスタイルシートで定義されたすべての構文を表示します。
    • +
  • フォントをレンダリングした結果を理解するための文字列サンプル。既定のサンプル文字列は "Abc" ですが、セクションの最上部にある入力フィールドをクリックして新しい値を入力することで、編集可能です。入力した文字列は、すべてのサンプル文字列に設定されます。
    • +
+ +

Firefox 開発ツールでバリアブルフォントをサポート

+ +

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

+ +

バリアブルフォントとは?

+ +

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

+ +

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

+ +

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

+ +

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の {{cssxref("font-variation-settings")}} プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:

+ +
font-variation-settings: "wght" 350;
+ +

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

+ +
+

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

+
+ +

登録済みの軸と対応する CSS プロパティを以下に示します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
軸タグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

+ +
+

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

+
+ +
+

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

+
+ +

フォントエディターでバリアブルフォントを扱う

+ +

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

+ +

+ +

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

+ +

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

+ +

+ +

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

+ +

+ +

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

+ +

+ +
    +
+ +

ヒント

+ +

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

+ +
    +
  • インスペクターの 3 ペインモード を使用しているとき、フォントタブの隣に調査中の要素の CSS ルールを同時に表示します。
    • +
  • ルールビューで {{cssxref("font-family")}} プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します: +

    +
    • +
  • 上のスクリーンショットでは、font-family のフォントの羅列で、調査中の要素へ実際に適用されたフォントに下線が引かれていることにも気づくでしょう。これは、指定された多くのフォントでどれが適用されたかを簡単に発見できるようにします。
    • +
diff --git a/files/ja/tools/page_inspector/how_to/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/view_fonts/index.html deleted file mode 100644 index dc20a581e8..0000000000 --- a/files/ja/tools/page_inspector/how_to/view_fonts/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -title: フォントを確認する -slug: Tools/Page_Inspector/How_to/View_fonts -tags: - - Fonts - - Guide - - Inspector - - Tools - - variable fonts -translation_of: Tools/Page_Inspector/How_to/Edit_fonts ---- -
{{ToolsSidebar}}
- -

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

- -
-

注記: この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。

-
- -

フォントタブ

- -

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

- -
    -
  1. インスペクターを開きます。
    2. -
  2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。
    3. -
- -

- -

フォントタブは 3 つの主要なセクションに分かれています:

- -
    -
  • "Fonts used" : 現在調査中の要素で使用しているフォント。
    • -
  • 新しいフォントエディター。Firefox 61 および 62 では、このセクションがありません。
    • -
  • "All fonts on page" : このセクションは、ページで使用しているすべてのフォントを表示します。Firefox 61 および 62 ではこの領域が "ページ内の他のフォント" という名前であり、"Fonts used" セクションにあるフォントが含まれません。
    • -
- -

Fonts used

- -

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

- -

- -

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

- -

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

- -
    -
  • 要素の font-family CSS 宣言の値に指定されている。
    • -
  • ブラウザーのデフォルトスタイル (ラテン文字ではほとんどのブラウザーで Times New Roman) が要素に適用されており、作者が定義したフォントは与えらえていない。
    • -
  • フォントが適用されたテキストコンテンツを持つほかの要素を包含しているなど、調査中の要素の子孫でフォントが使用されている。
    • -
  • font-family CSS 宣言で指定されたフォントがないため、システムの既定のフォントが使用されている。
    • -
- -

フォントエディター

- -

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

- -

- -

通常の (静的な) フォントでは、以下の設定を変更できます。

- -

サイズ

- -

調査中の要素の {{cssxref("font-size")}} です。

- -

- -

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

- -
-

注記: pt など、ほかの単位を font-size や line-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

-
- -

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

- -

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

- -

Line height

- -

調査中の要素の {{cssxref("line-height")}} です。

- -

- -

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

- -

単位を変更すると、font-size の設定に応じて値を変換します。

- -

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

- -

太さ

- -

調査中の要素の {{cssxref("font-weight")}} です。

- -

Font weight setting

- -

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

- -
-

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

-
- -

イタリック

- -

調査中の要素の {{cssxref("font-style")}} です。

- -

- -

この設定は、font-style プロパティの値 italic と normal を切り替えます。

- -
-

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

-
- -

All fonts on page

- -

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

- -

- -

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

- -

このセクションでは、それぞれのフォントで以下の情報を提供します:

- -
    -
  • フォントの、font-family における識別子と正式名称。
    • -
  • システムで使用できないウェブフォントである場合は、フォントファイルの URL。あるいはコンピューターから読み込んだフォント (既定のシステムフォント、または以前システムにインストールしたウェブフォント) である場合は "システム" と表示します。URL の右にあるアイコンをクリックすると、フォントファイルの URL をコピーします。
    • -
  • ウェブフォントである場合に、フォントをページに読み込む際の {{cssxref("@font-face")}} ディスクリプター。ディスクリプターは展開可能であり、展開するとスタイルシートで定義されたすべての構文を表示します。
    • -
  • フォントをレンダリングした結果を理解するための文字列サンプル。既定のサンプル文字列は "Abc" ですが、セクションの最上部にある入力フィールドをクリックして新しい値を入力することで、編集可能です。入力した文字列は、すべてのサンプル文字列に設定されます。
    • -
- -

Firefox 開発ツールでバリアブルフォントをサポート

- -

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

- -

バリアブルフォントとは?

- -

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

- -

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

- -

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

- -

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の {{cssxref("font-variation-settings")}} プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:

- -
font-variation-settings: "wght" 350;
- -

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

- -
-

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

-
- -

登録済みの軸と対応する CSS プロパティを以下に示します:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
軸タグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" -

{{cssxref("font-optical-sizing")}}

-
- -

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

- -
-

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

-
- -
-

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

-
- -

フォントエディターでバリアブルフォントを扱う

- -

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

- -

- -

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

- -

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

- -

- -

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

- -

- -

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

- -

- -
    -
- -

ヒント

- -

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

- -
    -
  • インスペクターの 3 ペインモード を使用しているとき、フォントタブの隣に調査中の要素の CSS ルールを同時に表示します。
    • -
  • ルールビューで {{cssxref("font-family")}} プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します: -

    -
    • -
  • 上のスクリーンショットでは、font-family のフォントの羅列で、調査中の要素へ実際に適用されたフォントに下線が引かれていることにも気づくでしょう。これは、指定された多くのフォントでどれが適用されたかを簡単に発見できるようにします。
    • -
diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..3f0900fd07 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html @@ -0,0 +1,86 @@ +--- +title: アニメーションインスペクタの例：CSS トランジション +slug: Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +
{{ToolsSidebar}}
+ +

firefox-logo-animation

+ +

CSS トランジションを使用したアニメーションの例。

+ +

HTML コンテンツ

+ +
<div class="channel">
+  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
+  <span class="note">Firefox Developer Edition</span>
+</div>
+ +

CSS コンテンツ

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+  transition: transform 750ms ease-in, filter 750ms ease-in-out;
+}
+
+.note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+
+  opacity: 0;
+  width: 0;
+  transition: opacity 500ms 150ms, width 500ms 150ms;
+}
+
+.icon#selected {
+  filter: grayscale(0%);
+  transform: scale(1.5);
+}
+
+.icon#selected+span {
+  opacity: 1;
+  width: 300px;
+}
+
+ +

JavaScript コンテンツ

+ +
function toggleSelection(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.classList.contains("icon")) {
+    var wasSelected = (e.target.getAttribute("id") == "selected");
+    clearSelection();
+    if (!wasSelected) {
+      e.target.setAttribute("id", "selected");
+    }
+  }
+}
+
+function clearSelection() {
+  var selected = document.getElementById("selected");
+  if (selected) {
+    selected.removeAttribute("id");
+  }
+}
+
+document.addEventListener("click", toggleSelection);
diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html deleted file mode 100644 index 3f0900fd07..0000000000 --- a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: アニメーションインスペクタの例：CSS トランジション -slug: Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples -translation_of: >- - Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions ---- -
{{ToolsSidebar}}
- -

firefox-logo-animation

- -

CSS トランジションを使用したアニメーションの例。

- -

HTML コンテンツ

- -
<div class="channel">
-  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
-  <span class="note">Firefox Developer Edition</span>
-</div>
- -

CSS コンテンツ

- -
.channel {
-  padding: 2em;
-  margin: 0.5em;
-  box-shadow: 1px 1px 5px #808080;
-  margin: 1.5em;
-}
-
-.channel > * {
-  vertical-align: middle;
-  line-height: normal;
-}
-
-.icon {
-  width: 50px;
-  height: 50px;
-  filter: grayscale(100%);
-  transition: transform 750ms ease-in, filter 750ms ease-in-out;
-}
-
-.note {
-  margin-left: 1em;
-  font: 1.5em "Open Sans",Arial,sans-serif;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-
-  opacity: 0;
-  width: 0;
-  transition: opacity 500ms 150ms, width 500ms 150ms;
-}
-
-.icon#selected {
-  filter: grayscale(0%);
-  transform: scale(1.5);
-}
-
-.icon#selected+span {
-  opacity: 1;
-  width: 300px;
-}
-
- -

JavaScript コンテンツ

- -
function toggleSelection(e) {
-  if (e.button != 0) {
-    return;
-  }
-  if (e.target.classList.contains("icon")) {
-    var wasSelected = (e.target.getAttribute("id") == "selected");
-    clearSelection();
-    if (!wasSelected) {
-      e.target.setAttribute("id", "selected");
-    }
-  }
-}
-
-function clearSelection() {
-  var selected = document.getElementById("selected");
-  if (selected) {
-    selected.removeAttribute("id");
-  }
-}
-
-document.addEventListener("click", toggleSelection);
diff --git a/files/ja/tools/page_inspector/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html deleted file mode 100644 index 3210682298..0000000000 --- a/files/ja/tools/page_inspector/html_panel/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -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/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html deleted file mode 100644 index bbfb74ccca..0000000000 --- a/files/ja/tools/page_inspector/style_panel/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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/tools/performance/profiler_walkthrough/index.html b/files/ja/tools/performance/profiler_walkthrough/index.html deleted file mode 100644 index 858b944015..0000000000 --- a/files/ja/tools/performance/profiler_walkthrough/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -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 つあります:

- -
    -
  • click イベントのリスナである testPrimes()
    • -
  • timedIsPrime() 内の setTimeout() の引数で指定した、無名のコールバック関数
    • -
- -

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 つの主要な分岐の終端で発生しています。

- -

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

- -
    -
  • コストが 0 より大きいスタックフレーム、つまり、サンプルを取得したとき実際に実行していたスタックフレームのリストを作成します。
    • -
  • リストは、スタックフレームで取得したサンプル数の順に並べ替えられます。
    • -
  • リスト内の各項目で、コールスタックをトップレベル関数に向かって逆向きに表示します。
    • -
- -

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

- -

- -

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

- -

- -

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

diff --git a/files/ja/tools/profiler/index.html b/files/ja/tools/profiler/index.html deleted file mode 100644 index c05f177c25..0000000000 --- a/files/ja/tools/profiler/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -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 つあります。ストップウォッチのボタンは新たなプロファイルの記録を、インポート... ボタンは以前に保存したデータのインポートを行います。プロファイルを選択しているときは、保存ボタンをクリックするとデータを JSON ファイルとして保存できます。
    • -
  • 右側は現在読み込んでいるプロファイルを表示します。
    • -
- -

プロファイルの分析

- -

プロファイルは 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/tools/release_notes/index.html b/files/ja/tools/release_notes/index.html deleted file mode 100644 index 8067ad603e..0000000000 --- a/files/ja/tools/release_notes/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -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

- -

ハイライト:

- - - -

さらに:

- -
    -
  • ツールに HiDPI 画像を追加
    • -
  • インスペクターで、display:none が設定されているノードを異なる書式で表示
    • -
- -

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/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html new file mode 100644 index 0000000000..a2f726cd33 --- /dev/null +++ b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -0,0 +1,68 @@ +--- +title: WebIDE を使用した Firefox for Android のデバッグ +slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +tags: + - ガイド + - ツール + - デバッグ +translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone +--- +
{{ToolsSidebar}}
+ +

この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。

+ +

長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。

+ +
+

これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、デベロッパーツールを Android 用 Firefox に接続するための古い手順を参照してください。

+
+ +

+ +

このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。

+ +

前提条件

+ +

まず、次のものが必要です。

+ +
    +
  • Firefox 36 以降が動作するデスクトップまたはラップトップコンピュータ
    • +
  • Android 35 以上の Android 用 Firefox を搭載した Android 用 Firefox を実行できる Android デバイス
    • +
  • 2つのデバイスを接続する USB ケーブル
    • +
+ +

ADB ヘルパー

+ +

デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに about:addons と入力すると、ADB が表示されます。

+ +

ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：

+ +

「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。

+ +

Android 端末のセットアップ

+ +

まず、このリンクの手順 2 と 3 を実行して、USB デバッグを有効にします。

+ +

次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。

+ +

+ +

ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。

+ +

接続する

+ +

Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。

+ +

+ +

それを選択してください。Android 搭載端末では警告メッセージが表示されます。

+ +

+ +

[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。

+ +

+ +

開発ツールを添付するタブを選択する：

+ +

これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細についてはリモートデバッグのページを参照してください。

diff --git a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html b/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html deleted file mode 100644 index a2f726cd33..0000000000 --- a/files/ja/tools/remote_debugging/debugging_firefox_for_android_with_webide_clone/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: WebIDE を使用した Firefox for Android のデバッグ -slug: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone -tags: - - ガイド - - ツール - - デバッグ -translation_of: Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE_clone ---- -
{{ToolsSidebar}}
- -

この記事では、Firefox開発ツールを Firefox 36 以降の Android 用 Firefox に接続する方法について説明します。

- -

長い間、Firefox Developer Tools を Android 用 Firefox に接続してモバイル Web サイトをデバッグすることは可能でした。これまでは、かなり複雑でエラーが発生しやすいプロセスでした。Firefox 36 では、このプロセスをもっと簡単にしました。特に、adb ツールをまったく直接処理する必要はありません。これで WebIDE を使用して接続します。これは舞台裏での adb の設定を担当します。

- -
-

これを行うには、デスクトップに Firefox 36 以上、モバイルデバイスに Firefox 35 が必要です。以前のバージョンを使用する必要がある場合は、デベロッパーツールを Android 用 Firefox に接続するための古い手順を参照してください。

-
- -

- -

このガイドは2つの部分に分かれています。最初の部分「前提条件」は、1回だけ行う必要のあるものをカバーし、2番目の部分の「接続する」は、デバイスを接続するたびに行う必要がある作業をカバーします。

- -

前提条件

- -

まず、次のものが必要です。

- -
    -
  • Firefox 36 以降が動作するデスクトップまたはラップトップコンピュータ
    • -
  • Android 35 以上の Android 用 Firefox を搭載した Android 用 Firefox を実行できる Android デバイス
    • -
  • 2つのデバイスを接続する USB ケーブル
    • -
- -

ADB ヘルパー

- -

デスクトップ上の Firefox には、ADB ヘルパーアドオンのバージョン 0.7.1 以上が必要です。これは、初めて WebIDE を開くときに自動的にインストールされます。バージョンを確認するには、ブラウザのアドレスバーに about:addons と入力すると、ADB が表示されます。

- -

ADB ヘルパーのバージョンが 0.7.1 以上でない場合は、「Projects」メニューから「Extra Components を管理」を選択すると、「Extra Components」ウィンドウが表示されます。このウィンドウには ADB ヘルパーのエントリが含まれています：

- -

「アンインストール」をクリックし、「インストール」をクリックすると、最新のバージョンになります。

- -

Android 端末のセットアップ

- -

まず、このリンクの手順 2 と 3 を実行して、USB デバッグを有効にします。

- -

次に Firefox for Android でリモートデバッグを有効にします。ブラウザを開き、メニューを開き、[設定]、[デベロッパーツール] を選択します (一部の Android 搭載端末では、[詳細] を選択して [設定] オプションを表示する必要があります)。[リモートデバッグ] チェックボックスをオンにします。

- -

- -

ブラウザはポート転送を設定することを通知する通知を表示することがありますが、無視することができます。

- -

接続する

- -

Android 端末を USB ケーブルでデスクトップに接続し、WebIDE を開き、「ランタイム」メニューを開きます。「USBデバイス」の下に Android 用 Firefox がデバッグ対象として表示されます。

- -

- -

それを選択してください。Android 搭載端末では警告メッセージが表示されます。

- -

- -

[OK] をクリックします。WebIDE の「アプリケーションを開く」メニューをクリックします。デバイス上に開いているすべてのタブのリストが表示されます。

- -

- -

開発ツールを添付するタブを選択する：

- -

これでリモートデバッグをサポートするすべての Firefox 開発ツールを使用できるようになります。詳細についてはリモートデバッグのページを参照してください。

diff --git a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html b/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html deleted file mode 100644 index 90596180ce..0000000000 --- a/files/ja/tools/responsive_design_mode_(before_firefox_52)/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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 つあります:

- -
    -
  • Firefox メニュー (メニューバーを表示している場合や OS X ではツールメニュー) のウェブ開発サブメニューで [レスポンシブデザインモード] を選択する
    • -
  • ツールボックスのツールバー で [レスポンシブデザインモード] ボタンを押す
    • -
  • Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)
    • -
- -

また、レスポンシブデザインモードを無効化する方法も 3 つあります:

- -
    -
  • [レスポンシブデザインモード] メニュー項目を再度選択する
    • -
  • ウィンドウの左上隅にある [終了] ボタンをクリックする
    • -
  • Ctrl + Shift + M を押下する (OS X では Cmd + Opt + M)。Firefox 34 より前では、Esc キーでもレスポンシブデザインモードが閉じました。
    • -
- -

リサイズ

- -

コンテンツエリアのサイズを変更する方法は 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/tools/using_the_source_editor/index.html b/files/ja/tools/using_the_source_editor/index.html deleted file mode 100644 index f546812c77..0000000000 --- a/files/ja/tools/using_the_source_editor/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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/tools/view_source/index.html b/files/ja/tools/view_source/index.html new file mode 100644 index 0000000000..30a3793e5c --- /dev/null +++ b/files/ja/tools/view_source/index.html @@ -0,0 +1,75 @@ +--- +title: ソースを表示 +slug: View_source +tags: + - DevTools + - Firefox + - view page source +translation_of: Tools/View_source +--- +
{{ToolsSidebar}}

ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです:

+ +
    +
  • ページ上でコンテキストクリックして、"ページのソースを表示" を選択する
    • +
  • Ctrl+U または macOS で Cmd+U を押下する
    • +
+ +

Firefox 42 より前のバージョンでは、ページのソースを表示する新しいウィンドウが開いていました。

+ +

Firefox 42 から、(新しいウィンドウに代わり) 新しいタブでソースを表示します。以前のウィンドウ表示を望む場合は、about:config を開いて設定項目 view_source.tab を false に設定してください。

+ +

Firefox 60 で設定項目 view_source.tab が削除されました ({{bug(1418403)}}) ので、ソース表示モードを切り替えできなくなりました。ソースは常に新しいタブで表示します。

+ +

ソース表示で提供する機能

+ +

ソース表示機能には 3 つの付加機能があり、Firefox 40 よりソース表示タブのコンテキストメニューからアクセスできます:

+ +
    +
  • 指定行へ移動
    • +
  • 長い行を折り返す (切り替え式)
    • +
  • 構文を強調表示 (切り替え式)
    • +
+ +

構文のハイライト機能を有効にすると、パースエラーが発生した箇所を赤色で表示します。エラー箇所にマウスポインタを載せると、エラー内容を説明するツールチップを表示します。

+ +

キーボードで指定行へ移動するには、Mac では Control + Option + L、Windows や Linux では Alt + Shift + L を押下してください。

+ +

選択した部分のソースを表示

+ +

Web ページの一部分を選択してコンテキストクリックすると、"選択した部分のソースを表示" というメニュー項目があります。これは "ページのソースを表示" と同様の機能ですが、選択した部分のソースだけを表示する点が異なります。

+ +

MathML のソースを表示

+ +

MathML 上にマウスポインタがある状態でコンテキストクリックすると、"MathML のソースを表示" というメニュー項目があります。この項目を選択すると、MathML のソースを確認できます。

+ +

ソース表示の制限事項

+ +

以下に、ソース表示が提供する機能について知っておくべき制限事項を挙げます。

+ +

エラー報告機能は検証ツールではない

+ +

ソース表示はパース処理のエラーを報告するだけであり、HTML の妥当性のエラーは報告しません。たとえば、{{HTMLElement("ul")}} 要素の子要素に {{HTMLElement("div")}} 要素を挿入することはパースエラーではありませんが、妥当な HTML でもありません。そのため、ソース表示ではこのエラーを報告しません。HTML が妥当かを確認したい場合は HTML 検証ツール、例えば W3C が提供するツール を使用しましょう。

+ +

報告されないエラーがある

+ +

ソース表示で報告されたエラーはすべて HTML 仕様書に関するパースエラーですが、報告されないパースエラーもあります。下記のエラーは報告されません:

+ +
    +
  • ドキュメントのエンコーディングに関して不正なバイトはエラー報告されません。
    • +
  • 禁止された文字はエラー報告されません。
    • +
  • ファイルの終端 (end-of-file) に関するエラーは報告されません。
    • +
  • (タグ、コメント、doctype に対する) テキストに関する木構造構築のエラーは報告されません。
    • +
  • xmlns 属性に関するパースエラーは報告されません。
    • +
+ +

XML 構文のハイライト

+ +

ソース表示では、XML ソースのハイライト表示に HTML トークン化プログラムを使用します。トークン化プログラムは XML ソースのハイライト時にプロセッシングインストラクションをサポートしますが、それは XML 固有の機能のみ提供されます。このため、内部サブセットを持つ doctype やカスタムエンティティへの実体参照は正しくハイライト表示されません。

+ +

誤ったハイライト表示は、(XUL ドキュメントのような) Firefox の chrome ファイルのソースを表示すると見ることができます。しかし実際のところ、典型的な XML ファイルを閲覧する際は問題にならいでしょう。

+ +

関連情報

+ + diff --git a/files/ja/tools/web_console/opening_the_web_console/index.html b/files/ja/tools/web_console/opening_the_web_console/index.html deleted file mode 100644 index a71b4568e1..0000000000 --- a/files/ja/tools/web_console/opening_the_web_console/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: ウェブコンソールを開く -slug: Tools/Web_Console/Opening_the_Web_Console -translation_of: Tools/Web_Console/UI_Tour ---- -
{{ToolsSidebar}}
- -

ウェブコンソールを開く方法は以下のとおりです:

- -
    -
  • Firefox メニュー (メニューバーがある場合や Mac OS X では、ツールメニュー) のウェブ開発サブメニューで "ウェブコンソール" を選択する。
    • -
  • または、キーボードショートカット CtrlShiftK (OS X では CommandOptionK) を押下します。
    • -
- -

ウェブコンソールがアクティブになっている ツールボックス がブラウザーウィンドウの下部に現れます (開発ツールのツールバー では "コンソール" という名称です):

- -

- -

ウェブコンソールのインターフェイスは 3 つに分けられます:

- -
    -
  • ツールバー: 上段にボタンを 2 つ置いているツールバーがあります。ゴミ箱のボタンをクリックすると、コンソールの内容を消去できます。漏斗のアイコンをクリックすると、コンソールに表示されているメッセージをフィルターできます。
    • -
  • コマンドライン: コマンドラインは、二重山かっこ (>>) で始まります。ここに JavaScript の式を入力します。
    • -
  • メッセージ表示ペイン: ページ内のコードやコマンドラインに入力したコマンドによって生成されたメッセージです。コマンドによって生成されメッセージは、それぞれのコマンドに続いて表示します。
    • -
diff --git a/files/ja/tools/web_console/ui_tour/index.html b/files/ja/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..a71b4568e1 --- /dev/null +++ b/files/ja/tools/web_console/ui_tour/index.html @@ -0,0 +1,25 @@ +--- +title: ウェブコンソールを開く +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

ウェブコンソールを開く方法は以下のとおりです:

+ +
    +
  • Firefox メニュー (メニューバーがある場合や Mac OS X では、ツールメニュー) のウェブ開発サブメニューで "ウェブコンソール" を選択する。
    • +
  • または、キーボードショートカット CtrlShiftK (OS X では CommandOptionK) を押下します。
    • +
+ +

ウェブコンソールがアクティブになっている ツールボックス がブラウザーウィンドウの下部に現れます (開発ツールのツールバー では "コンソール" という名称です):

+ +

+ +

ウェブコンソールのインターフェイスは 3 つに分けられます:

+ +
    +
  • ツールバー: 上段にボタンを 2 つ置いているツールバーがあります。ゴミ箱のボタンをクリックすると、コンソールの内容を消去できます。漏斗のアイコンをクリックすると、コンソールに表示されているメッセージをフィルターできます。
    • +
  • コマンドライン: コマンドラインは、二重山かっこ (>>) で始まります。ここに JavaScript の式を入力します。
    • +
  • メッセージ表示ペイン: ページ内のコードやコマンドラインに入力したコマンドによって生成されたメッセージです。コマンドによって生成されメッセージは、それぞれのコマンドに続いて表示します。
    • +
diff --git a/files/ja/tutorials/index.html b/files/ja/tutorials/index.html deleted file mode 100644 index 5d0c46fe7b..0000000000 --- a/files/ja/tutorials/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: チュートリアル -slug: Tutorials ---- -

SDK を使用したアドオンの開発方法を実践的に説明したページの一覧です。

-
-

はじめに

-
-
-
-
- インストール
-
- Windows、OS X および Linux 上で、SDK をダウンロード、インストール、および初期化します。
-
-
-
- トラブルシューティング
-
- よくある問題を解決する場合や、支援を求める場合のヒントを説明します。
-
-
-
-
-
- 入門
-
- シンプルなアドオンを作成を始めるための手順の概略です。
-
-  
-
-
-
-

ユーザーインターフェイスの作成

-
-
-
-
- ツールバーボタンの追加
-
- Firefox アドオンツールバーにボタンを追加します。
-
- Firefoxへのメニュー項目の追加
-
- Firefox のメインメニューにアイテムを追加します。
-
-
-
-
-
- ポップアップの表示
-
- HTML および JavaScript を使用して実装したポップアップダイアログを表示します。
-
- コンテキストメニュー項目の追加
-
- Firefox のコンテキストメニューに項目を追加します。
-
-
-
-
-

ブラウザの操作

-
-
-
-
- Webページを開く
-
- tabsモジュールを用いて、新しいタブまたはウィンドウでWebページを開き、そのコンテンツにアクセスします。
-
- ページの読み込みを確認する
-
- tabsモジュールを用いて、新しい Web ページが読み込まれたときに通知を受け取り、それらの Web ページのコンテンツにアクセスします。
-
-
-
-
-
- 開いているタブの一覧を表示する
-
- tabsモジュールを用いて、現在開いているすべてのタブに対して反復処理を行い、それらのコンテンツにアクセスします。
-
-  
-
-
-
-

Webページの変更

-
-
-
-
- URLに基づいたWebページの変更
-
- URL に基づいて Web ページを検索するフィルタを作成します。フィルタに一致する URL の Web ページを読み込んだときに、フィルタ内の指定したスクリプトを実行します。
-
-
-
-
-
- アクティブなWebページの変更
-
- 現在アクティブな Web ページに、動的にスクリプトを読み込みます。
-
-
-
-
-

開発テクニック

-
-
-
-
- ログの出力
-
- 診断を行うために、メッセージをコンソールにログとして出力します。
-
- 再利用可能なモジュールの作成
-
- アドオンを別個のモジュールとして体系化し、開発、デバッグ、およびメンテナンスを容易にします。 また、作成したモジュールが入った再利用可能なパッケージを作成し、他の開発者もそのモジュールを使用できるようにします。
-
- ユニットテスト
-
- SDK のテストフレームワークを使用して、ユニットテストを作成し実行します。
-
- Chrome 権限
-
- この権限を使用すると、アドオンが Components オブジェクトにアクセスできるので、どんな XPCOM オブジェクトでも読み込んで使用できるようになります。
-
- イベントターゲットの作成
-
- 定義したオブジェクトがイベントを発生させられるようにします。
-
-
-
-
-
- 読み込みと読み込み解除の確認
-
- Firefox にアドオンが読み込まれたり、読み込み解除されたりしたときに通知を受け取ります。またコマンドラインからアドオンに引数を渡します。
-
- サードパーティーモジュールの使用
-
- SDK 自体に含まれていない追加のモジュールをインストールして使用します。
-
- ローカライゼーション
-
- ローカライズ可能なコードを作成します。
-
- モバイル開発
-
- Android 用 Firefox モバイルのアドオン開発を始める手順を説明します。
-
-
-
- アドオン用のデバッガー
-
- アドオン内のJavaScriptのデバッグを行います。
-
-
-
-
-

応用 

-
-
-
-
- アノテーターアドオン
-
- より複雑なアドオンの開発作業を順を追って説明します。
-
-
-
-

 

diff --git a/files/ja/updating_extensions_for_firefox_2/index.html b/files/ja/updating_extensions_for_firefox_2/index.html deleted file mode 100644 index 546bd25562..0000000000 --- a/files/ja/updating_extensions_for_firefox_2/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Updating extensions for Firefox 2 -slug: Updating_extensions_for_Firefox_2 -tags: - - Add-ons - - Extensions -translation_of: Mozilla/Firefox/Releases/2/Updating_extensions ---- -

この記事は、開発者が彼らの拡張機能を更新して Firefox 2 で動作させるために役立つ情報を提供しています。 -

{{ 英語版章題("Step 1: Update the install manifest") }} -

-

ステップ 1: インストール定義ファイルの更新

-

最初のステップ -- ほとんどの拡張機能で唯一必要なこと -- は、インストール定義ファイル <tt>install.rdf</tt> を更新し、Firefox 2 との互換性を持たせることです。 -

単純に、Firefox の最大互換バージョンを指示する行を探します (次のように Firefox 1.5 向けになっています): -

-
 <em:maxVersion>1.5.0.*</em:maxVersion>
-
-

これを変更して Firefox 2 と互換性を持たせます: -

-
 <em:maxVersion>2.0.0.*</em:maxVersion>
-
-

そして、拡張機能を再インストールしてみます。 -

{{ 英語版章題("Step 2: Update XUL overlays") }} -

-

ステップ 2: XUL オーバーレイの更新

-

Firefox 2 はデフォルトのテーマに変更を加えています。さらに、一部のユーザインタフェース要素が変更、または移動されているため、あなたの拡張機能の XUL オーバーレイに依存する部分が影響を受けます。 -

拡張機能の XUL オーバーレイに影響する変更箇所について学ぶには、Firefox 2 におけるテーマの変更点の記事に目を通してください。 -

{{ 英語版章題("Step 3: Test") }} -

-

ステップ 3: テスト

-

公式にリリースする前に、必ず拡張機能を Firefox 2 上でテストしてください。最後にすることは、Firefox のリリース時に起こる問題報告のラッシュに、あなたの拡張機能の新バージョンが責任を持つことです。 -

{{ 英語版章題("Step 4: Release") }} -

-

ステップ 4: リリース

-

http://addons.mozilla.org 上のあなたの拡張機能のエントリを更新してください。ユーザが更新を見つけられるようになります。 -

さらに、あなたの拡張機能のインストール定義ファイルで updateURL を提供している場合は、必ず update manifest を更新し、Firefox が自動的に拡張機能の新バージョンを見つけられるようにしてください。こうすることによって、ユーザが Firefox 2 にアップグレードした後で最初にあなたの拡張機能を実行した時、新バージョンを自動的にインストールさせることができます。 -

{{ languages( { "en": "en/Updating_extensions_for_Firefox_2", "fr": "fr/Mise_\u00e0_jour_des_extensions_pour_Firefox_2", "ko": "ko/Updating_extensions_for_Firefox_2", "pl": "pl/Aktualizacja_rozszerze\u0144_do_Firefoksa_2" } ) }} diff --git a/files/ja/updating_extensions_for_firefox_3.1/index.html b/files/ja/updating_extensions_for_firefox_3.1/index.html deleted file mode 100644 index a644ae451a..0000000000 --- a/files/ja/updating_extensions_for_firefox_3.1/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Updating extensions for Firefox 3.1 -slug: Updating_extensions_for_Firefox_3.1 ---- -

{{ fx_minversion_header(3.1) }}

-

この記事は、自分の拡張機能を Firefox 3.1 で正しく動作するよう更新しようとしている拡張機能開発者のために役立つ情報を提供します。

-

更新の基本

-

この節では、Firefox の新しいバージョンに向けて拡張機能を更新する際に必ず行わなければならないことの基本を説明します。

-

拡張機能のテスト

-

まずはじめに、拡張機能の install.rdf ファイルを編集して、(Firefox 3.1 beta 2 でテストを行っている場合は) maxVersion を 3.1b2 に更新し、それに合わせて version を上げましょう。

-

Firefox のプロファイルを新規作成し、テストが常用のプロファイルに影響しないようにします。 Firefox が含まれるディレクトリに移動して、以下のコマンドを実行します。

-
firefox -createProfile testBeta2
-
-

Mac では、Firefox のアプリケーションバンドル内へはるばる移動する必要があります。

-
cd /Applications/Firefox.app/Contents/MacOS/
-firefox -createProfile testBeta2
-
-

コマンドライン上で以下のコマンドを実行し、新規プロファイルで Firefox を起動します。

-
firefox -P testBeta2
-
-

自分の拡張機能を徹底的にテストします。 JavaScript のあらゆる警告や例外を通知するために、以下の設定項目を true に設定しておくことをお勧めします。

-
  • javascript.options.strict
  • javascript.options.showInConsole
    • -
-

拡張機能の更新

-

テスト中に何か問題を発見した場合は、コードを更新して問題を修正しましょう。 この記事には、若干の更新作業が必要な箇所についての役立つ情報が載っています。

-

テストが完了したら、今度は常用のプロファイルを使って、再度その拡張機能を使ってみます。 この作業は、保存されている既存のデータとの互換性を確認するのに役立ちます。

-

addons.mozilla.org に登録されている拡張機能の更新

-

ついに、更新した拡張機能を公開するときが来ました。 もし自分の拡張機能に一切コードの変更が必要ない場合は、AMO のダッシュボードにログインして、互換性のあるバージョンを更新するだけで済みます。 何らかの変更を加えた場合は、新しいバージョンを AMO にアップロードする必要があります。

-

詳しくは AMO へのアドオンの登録 を参照してください。

-

Places データベースへのアクセス

-

Firefox 3.1 以前は、Storage API を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。

-
var places = Components.classes["@mozilla.org/file/directory_service;1"].
-                        getService(Components.interfaces.nsIProperties).
-                        get("ProfD", Components.interfaces.nsIFile);
-places.append("places.sqlite");
-var db = Components.classes["@mozilla.org/storage/service;1"].
-                    getService(Components.interfaces.mozIStorageService).openDatabase(places);
-
-

これは places.sqlite データベースファイルへのパスを自力で作成し、Storage アクセスのためのファイルを開くものでした。

-

Firefox 3.1 には、Places データベースへアクセスするための便利な方法を提供する、専用のサービスが追加されており、上記の方法は Firefox 3.1 以降では機能しません。

-
var db = Components.classes["@mozilla.org/browser/nav-history-service;1"].
-                    getService(Components.interfaces.nsPIPlacesDatabase).DBConnection;
-
-

テキストボックスの検索

-

textbox の種類のひとつ、timed は廃止予定となりました。代わりに search を使ってください。

-

Firefox 3 では、以下のようなコードが使われていたはずです。

-
<textbox type="timed" timeout="1000" oncommand="alert(this.value);"/>
-
-

Firefox 3.1 では、これを以下のように書き換える必要があります。

-
<textbox type="search" timeout="1000" oncommand="alert(this.value);"/>
-
-

JSON

-

JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、Firefox で JSON を使用する をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、JSON のページからリンクされている記事を参照してください。

-

Firefox 3 と Firefox 3.1 の両方について互換性を確保するには、以下のように記述します。

-
if (typeof(JSON) == "undefined") {
-  Components.utils.import("resource://gre/modules/JSON.jsm");
-  JSON.parse = JSON.fromString;
-  JSON.stringify = JSON.toString;
-}
-
-

JSON がネイティブサポートされていない場合は JSON.jsm JavaScript モジュールをインポートして、そのモジュールによって提供されているメソッドをネイティブ JSON で使われているものにマッピングします。これによって、同じ呼び出しが可能になります。

-

また、{{ interface("nsIJSON") }} インタフェースを直接利用することでも、この問題を回避できます。

-

クローム登録に関する変更

-

Firefox 3.1 では、リモートのクロームを利用可能にするセキュリティホールが修正されています。 これは、chrome.manifest ファイルに Web サイトを参照するリソースが含まれているすべてのアドオンに影響します。

-

この問題は {{ Bug(466582) }} で詳しく説明されています。{{ interface("nsIProtocolHandler") }} インタフェースに追加された新しいフラグ URI_IS_LOCAL_RESOURCE によって、そのプロトコルがクロームとして登録しても安全であることを示すことができます。 独自のプロトコルハンドラを作成し、それを chrome.manifest 内で登録しようとするアドオンは、正しく動作するようにこのフラグを追加する必要があります。

-

カスタマイズ可能なツールバー

-

Firefox 3.1 では、カスタマイズ可能なツールバーの挙動が次のように変更されました。<xul:toolbar/> バインディングは、関連付けられた <xul:toolbarpalette/> からツールバー削除、もしくはツールバーへ追加するようになりました。これまでは、項目を複製してツールバーへコピーしていました。 つまり、パレットには、ツールバー上に存在しないアイテムしか含めることができません。これまでの挙動では、ツールバー上に表示されているかどうかに関わらず、カスタマイズ可能なすべての要素が含まれていました。 これは、<xul:toolbarpalette/> からカスタマイズ可能なすべてのツールバー項目を取得できることに依存した処理を行っていたり、ツールバーのカスタマイズ中に動的にパレットへ項目を挿入し、それらを利用可能にしようとしているアドオンで問題となる可能性があります。 詳しくは、{{ Bug(407725) }} と {{ Bug(467045) }} をご覧ください。

-

興味深い新機能

-

すべてのタブのイベントを監視する

-

Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、すべてのタブのイベントを監視する をご覧ください。

-

テーマ開発者の方へ

-
  • Firefox 3.1 でのテーマ関連の変更 を確認してください。
  • Mozillazine フォーラムの Theme changes for FF3.1 を参照して、3.0 から 3.1 の間に行われた、テーマ開発者に影響するすべての変更の概要、一覧を確認してください。 このスレッドでは、CSS の新機能 (nth-child、-moz-box-shadow など)、既存の UI 部品への変更、UI 全体の改善、Firefox 3.1 の新機能 (audio/video のサポート、プライベートブラウジング、セッション復元機能の拡張、ボックス・ウィンドウ・テキストシャドウ) が議論されています。
    • -
diff --git a/files/ja/updating_extensions_for_firefox_3/index.html b/files/ja/updating_extensions_for_firefox_3/index.html deleted file mode 100644 index f4237195d7..0000000000 --- a/files/ja/updating_extensions_for_firefox_3/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: Updating extensions for Firefox 3 -slug: Updating_extensions_for_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_extensions ---- -

このドキュメントは、拡張機能を更新して Firefox 3 に対応させたいと考える開発者のために役立つ情報を提供します。

- -

読み進める前に、私たちからひとつだけ参考になるヒントをお教えしましょう。もしあなたの拡張機能に必要な変更がインストール定義ファイル内の maxVersion 項目の更新だけで、なおかつ addons.mozilla.org に拡張機能を登録している場合、新しいバージョンの拡張機能をアップロードする必要はありません！ AMO 上の「開発者用コントロールパネル」を使って maxVersion を更新するだけで作業は完了です。この方法なら、拡張機能が再度レビューに回ることもありません。

- -

Step 1: インストール定義ファイルを更新する

- -

最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために インストール定義ファイル (install.rdf) を更新する作業です。

- -

ファイルを開いて、互換性がある Firefox の最高バージョンを示す行を見つけます。Firefox 2 向けの拡張機能であれば、以下のように書かれているはずです。

- -
 <em:maxVersion>2.0.*</em:maxVersion>
-
- -

これを Firefox 3 との互換性を示すように変更します。

- -
 <em:maxVersion>3.0.*</em:maxVersion>
-
- -

次にアドオンを再インストールします。

- -

なお、Firefox 3 ではバージョン番号の余計な「.0」が廃止されますので、「3.0.0.*」の代わりに「3.0.*」と書くだけで済みます。

- -

これまでに、一部の拡張機能に影響すると思われる API の変更がいくつも行われています (まだ今後も変更は行われるでしょう)。私たちは現在、これらの変更の完全なリストを作成中です。

- -
註: もしあなたの拡張機能が、インストール定義ファイル の代わりに、まだ Install.js スクリプトを使っている場合は、今回インストール定義ファイルに移行していただく必要があります。Firefox 3 は XPI ファイル内の install.js スクリプトをサポートしません。
- -

インストール定義ファイルに翻訳を追加する

- -

Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは 拡張機能の説明の翻訳 をご覧ください。

- -

Step 2: 安全な更新を提供しているか確認する

- -

あなたが独自にアドオンを配布していて、addons.mozilla.org のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは 安全な更新 をご覧ください。

- -

Step 3: 変更された API に対応する

- -

いくつかの API は様々な方法で変更が行われています。それらの中で、多くの拡張機能に影響を与えることが予想される最も大幅な変更を以下にまとめました。

- -

DOM

- -

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは - document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については - W3C DOM FAQ を参照してください。

- -

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 - 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

- -

ブックマークと履歴

- -

あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、Places という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、Places への移行ガイド で詳しく解説しています。

- -

ダウンロードマネージャ

- -

RDF データ形式から Storage API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは nsIDownloadManager、nsIDownloadProgressListener、ダウンロードの監視 を参照してください。

- -

パスワードマネージャ

- -

あなたの拡張機能からパスワードマネージャを利用してユーザのログイン情報にアクセスしている場合、新しいログインマネージャ API を利用するように更新する必要があります。

- -
    -
  • nsILoginManager の使い方 という記事には、パスワードマネージャとログインマネージャの両方を用いることで、Firefox 3 とそれ以前のバージョンの両方で機能拡張を動作させるデモなど、コードサンプルが載っています。
    • -
  • nsILoginInfo
    • -
  • nsILoginManager
    • -
- -

あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは ログインマネージャ用ストレージモジュールの作成 をご覧ください。

- -

ポップアップ (メニュー、コンテキストメニュー、ツールチップ、パネル)

- -

XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては ポップアップの使用 ガイドをご覧ください。特筆すべき点は、popup.showPopup が非推奨となり、新しい popup.openPopup と popup.openPopupAtScreen に置き換えられたことです。

- -

自動補完

- -

nsIAutoCompleteController インタフェースの handleEnter() メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。

- -

DOMParser

- -
    -
  • When a DOMParser is instantiated, it inherits the calling code's principal and the documentURI and baseURI of the window the constructor came from.
    • -
  • If the caller has UniversalXPConnect privileges, it can pass parameters to new DOMParser(). If fewer than three parameters are passed, the remaining parameters will default to null. -
      -
    • The first parameter is the principal to use; this overrides the default principal normally inherited.
      • -
    • The second parameter is the documentURI to use.
      • -
    • The third parameter is the baseURI to use.
      • -
    -
    • -
  • If you initialize a DOMParser using a contract, such as by calling createInstance(), and you don't call the DOMParser's init() method, attempting to initiate a parsing operation will automatically create and initialize the DOMParser with a null principal and null pointers for documentURI and baseURI.
    • -
- -

削除されたインタフェース

- -

以下のインタフェースは、Firefox 3 の基盤である Gecko 1.9 から削除されました。あなたの拡張機能でいずれかを使用している場合、コードを更新する必要があるでしょう。

- -
    -
  • nsIDOMPaintListener
    • -
  • nsIDOMScrollListener
    • -
  • nsIDOMMutationListener
    • -
  • nsIDOMPageTransitionListener
    • -
  • nsICloseAllWindows (バグ 386200 参照)
    • -
- -

Step 4: 関連するクローム周りの変更を確認する

- -

あなたのコードに修正を加える必要があるかもしれない小さな変更がクロームに対して行われました。「browser-bottombox」と呼ばれる新しい vbox が追加されました。これは、ブラウザウィンドウの下部にあるページ内検索バーとステータスバーを含むものです。この変更は見た目には影響しませんが、あなたの拡張機能がこれらの要素に関するクロームにオーバーレイを行っている場合、影響を受ける可能性があります。

- -

例えばこれまで、次のように、ステータスバーの直前にクロームをオーバーレイしていた場合、

- -
<window id="main-window">
-<something insertbefore="status-bar" />
-</window>
-
- -

今後は次のようにオーバーレイを行う必要があります。

- -
<vbox id="browser-bottombox">
-<something insertbefore="status-bar" />
-</vbox>
-
- -

その他の変更

- -

もし、拡張機能を Firefox 3 対応にするために必要な小さい変更があったら、ここに追加してください。

- -
    -
  • chrome://browser/base/utilityOverlay.js は、セキュリティ上の理由からサポートされなくなりました。これまでこのスクリプトを利用していた場合は、chrome://browser/content/utilityOverlay.js へ切り替えてください。
    • -
  • nsIAboutModule の実装には、getURIFlags メソッドのサポートが必要になりました。詳しくは nsIAboutModule.idl を参照してください。これは新しい about: URI を提供する拡張機能に影響します (バグ 337746)。
    • -
  • tabbrowser 要素は「ツールキット」の一部ではなくなりました (バグ 339964)。このため、この要素は今後 XUL アプリケーションや拡張機能の中では利用できません。ただし、Firefox のメインウィンドウ (browser.xul) では今後も使われます。
    • -
  • nsISupports プロキシ の変更と、おそらくスレッド関連インタフェースへの変更については、ドキュメントを用意する必要があります。
    • -
  • XUL ファイル内で <?xml-stylesheet ?> などの XML 処理命令を用いている場合、バグ 319654 で行われた以下の変更に注意してください。 -
      -
    1. XML PI が XUL ドキュメントの DOM に追加されました。これは、document.firstChild が必ずしもルート要素を返すとは限らない、ということを意味します。スクリプト内でルートドキュメントを得るには、代わりに document.documentElement を用いてください。
      2. -
    2. <?xml-stylesheet ?> と <?xul-overlay ?> 処理命令は、ドキュメントの前文以外の場所に書かれた場合、動作しなくなりました。
      3. -
    -
    • -
  • window.addEventListener("load", myFunc, true) が、Web コンテンツが読み込まれた際 (ブラウザのページ読み込み時) に呼び出されなくなりました。これは、inner ウィンドウと outer ウィンドウの関係が変わったことによります (バグ 296639)。簡単な修正方法は、ここ に書かれているように gBrowser.addEventListener("load", myFunc, true) を使うことです。この方法は Firefox 2 でも有効です。
    • -
  • content.window.getSelection() は、文字列を返す、非推奨となった content.document.getSelection() とは異なり、オブジェクトを返します (toString() を使えば文字列に変換できます)。
    • -
  • event.preventBubble() は Firefox 3 で非推奨となり、Firefox 3 で削除されました。Firefox 2 でも動作する event.stopPropagation() を使ってください。
    • -
  • setTimeout() を使って開始されるタイマーは、バグ 52209 のために行われた修正によって、モーダル形式のウィンドウではブロックされるようになりました。代わりに nsITimer を使ってください。
    • -
  • 信頼できないソース（例：Web サイト）が拡張のクロームにアクセスできるようにする必要がある場合は、新しい contentaccessible フラグ を使わなければなりません。
    • -
- -

  

- -

  

- -
- -
- -

 

diff --git a/files/ja/updating_web_applications_for_firefox_3/index.html b/files/ja/updating_web_applications_for_firefox_3/index.html deleted file mode 100644 index 1ea0118570..0000000000 --- a/files/ja/updating_web_applications_for_firefox_3/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Updating web applications for Firefox 3 -slug: Updating_web_applications_for_Firefox_3 -tags: - - Firefox 3 - - 要更新 -translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications ---- -

{{ Fx_minversion_header(3) }} 来たる Firefox 3 では、あなたが利用したいであろう新機能と同様に、ウェブサイトやウェブアプリケーションに影響するであろう多くの変更が施されています。この記事は Firefox 3 を最大限活用するためにあなたのコンテンツを更新する作業の出発点となるでしょう。

- -

{{ 英語版章題("DOM changes") }}

- -

DOM の変更

- -

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは - document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については - W3C DOM FAQ を参照してください。

- -

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 - 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

- -

{{ 英語版章題("HTML changes") }}

- -

HTML の変更

- -

{{ 英語版章題("Changes to character set inheritance") }}

- -

キャラクタセット継承に対する変更

- -

Firefox 3 では、frame や iframe が親のキャラクタセットを継承できてしまうセキュリティ上のバグが修正されています。これにより、場合によっては問題が起こる可能性があります。フレームが親のキャラクタセットを継承できるのは、フレームと親がともに同じサーバーから読み込まれている場合に限られます。もしあなたのページが、他のサーバーから読み込まれたフレームが同じキャラクタセットを継承することを前提に作られているなら、フレームの HTML を更新してキャラクタセットを明確に指定するべきです。

- -

{{ 英語版章題("Change to the SCRIPT element") }}

- -

SCRIPT 要素に対する変更

- -

text/html 文書における <script> 要素は、たとえ 間に内容を含めなくても、HTML 4 文書における 閉じ タグである </script> を必要とするようになりました。以前のバージョンの Firefox では、以下のようにすることが可能でした。：

- -
<script ... />
-
- -

今バージョンからマークアップは HTML の仕様に従わなければならず（それが実際に HTML である場合）、以下のように実際に閉じなければなりません。：

- -
<script ...></script>
-
- -

これは互換性とセキュリティの両方を改善します。

- -

{{ 英語版章題("CSS changes") }}

- -

CSS の変更

- -

{{ 英語版章題("Change to font-size based on em, ex units") }}

- -

em、ex 単位に基づいた font-size に対する変更

- -

em、ex 単位での font-size の値はユーザの最小フォントサイズ設定の影響を受けていました。例えば、フォントが最小フォントサイズより大きく表示されるなら、em と ex 単位で font-size を指定されたフォントは最小フォントサイズ設定に従って拡大されるでしょう。これは割合に基づいたフォントサイズの振る舞いと矛盾していました。

- -

em 及び ex 単位での font-size の値は、ユーザの最小フォントサイズの影響を受けることなく、"意図されたフォントサイズ" に基づくようになりました。言い換えれば、フォントサイズは常にデザイナーの意図に従って計算され、その後に最小フォントサイズのための調整が行われるようになったということです。

- -

デモは https://bugzilla.mozilla.org/attachment.cgi?id=322943 を参照してください（違いを知るためには最小フォントサイズを 6 以上にして見る必要があります。二つの箱のカスケードは Firefox 2 では異なった振る舞いをします。なぜなら、em ベースのフォントサイズは最小フォントサイズの "影響を受ける" からです）。

- -

{{ 英語版章題("Security changes") }}

- -

セキュリティに関する変更

- -

{{ 英語版章題("Chrome access") }}

- -

クロームへのアクセス

- -

Firefox のこれまでのバージョンでは、Web ページは chrome:// プロトコルを使ってクロームからスクリプトや画像を読み込むことが可能でした。特に、このような仕様によって、アドオンがインストールされているかどうかをサイトが判別することが可能でした。これは、ブラウザにセキュリティ機能を追加するアドオンを回避して、ユーザのセキュリティを侵害するのに利用される恐れがありました。

- -

Firefox 3 では、Web コンテンツは chrome://browser/ および chrome://toolkit/ 以下にあるコンテンツに限ってアクセスできます。これらのファイルは Web コンテンツからアクセスされることを意図したものです。他のクロームコンテンツはすべて、Web からのアクセスが禁止されます。

- -

ただし、拡張機能が、内部のコンテンツを Web からアクセス可能にする方法があります。その方法とは、以下のように、chrome.manifest ファイルに特別なフラグを指定することです。

- -

content mypackage location/ contentaccessible=yes

- -

これは頻繁に必要となるものではありませんが、Web からのアクセスが必要な、まれなケースのために用意されています。Firefox はユーザに拡張が contentaccessible フラグをこのような方法で用いることで潜在的セキュリティリスクになることを警告するかもしれないことに注意してください。

- -
注意: Firefox 2 では contentaccessible フラグが認識されない (フラグを含む行全体が無視されてしまう) ことから、アドオンを Firefox 2 と Firefox 3 の両方に対応させたい場合は、以下のように指定します。 - -
content mypackage location/
-content mypackage location/ contentaccessible=yes
-
-
- -

{{ 英語版章題("File upload fields") }}

- -

ファイルアップロード用フォーム項目

- -

Firefox のこれまでのバージョンでは、ユーザがファイルをアップロードするために送信する際、そのファイルのフルパスが Web アプリケーションに公開されてしまう場合がありました。このプライバシーの懸念は、Firefox 3 で、ファイル名のみをWeb アプリケーションに公開するよう仕様を変更することで解決されました。

- -

{{ 英語版章題("JavaScript changes") }}

- -

JavaScript の変更

- -

Firefox 3 は JavaScript 1.8 をサポートします。あなたの Web サイトや Web アプリケーションの更新が必要となりうる重要な変更点としては、時代遅れであり非標準の Script オブジェクトがサポートされなくなることが挙げられます。これは <script> タグではなく、標準化されることのなかった JavaScript オブジェクトのことです。どちらにしてもあなたが使用していた可能性は低いでしょうから、これが問題になることは恐らくないでしょう。

- -

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

- -

参考

- - diff --git a/files/ja/user_agent_strings_reference/index.html b/files/ja/user_agent_strings_reference/index.html deleted file mode 100644 index c14a549f89..0000000000 --- a/files/ja/user_agent_strings_reference/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -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:

-
    -
  • There is concern that the attempt to separate Platform and OS-or-CPU on Windows and Macintosh is not backwards compatible and the user-agent strings should return to their old-fashioned form.
    • -
  • There is concern that giving the operating system version on Windows reveals too much information about a system (such as potential security holes).
    • -
  • There is concern that revealing localization information is a violation of privacy.
    • -
-

目標点

-

元の目標は:

-
    -
  • RFC 1945 や RFC 2068 で述べられている規格に従う。
    • -
  • 現存の Web サーバーを破壊しない。
    • -
  • 現存のログファイル解析ソフトや、user-agent 分析コードを破壊しない。
    • -
  • user-agent のバージョン文字列を適切な短い長さにとどめる。
    • -
  • 一貫した、見てすぐ分かる、そして解析しやすい形式を用いる。
    • -
-

議論の中で出てきた他の事項は:

-
    -
  • 日付に基づいたバージョン情報を提供する。
    • -
  • バージョン修飾語の問題点に焦点を絞る。
    • -
  • アプリケーションに、Gecko のように Mozilla の技術が含まれていることを知らせる。しかし、Mozilla ではないので、区別できるようにする。
    • -
-

提議

-

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:

-
    -
  • pref("general.useragent.extra.megabrowser", "MegaCorpBrowser/1.0 (MegaCorp, Inc.)");
    • -
  • pref("general.useragent.extra.tinydistro", "TinyDistroLinux/2.3");
    • -
-
-

これに対するコメントは netscape.public.mozilla.netlib または dbaron@dbaron.org まで

diff --git a/files/ja/using_firefox_1.5_caching/index.html b/files/ja/using_firefox_1.5_caching/index.html deleted file mode 100644 index a2c0c54ea7..0000000000 --- a/files/ja/using_firefox_1.5_caching/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Using Firefox 1.5 caching -slug: Using_Firefox_1.5_caching -tags: - - Add-ons - - DOM - - Extensions - - HTML - - JavaScript - - Web Development -translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching ---- -

{{FirefoxSidebar}}

- -

はじめに

- -

Firefox 1.5 ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は bfcache（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。

- -

Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。

- -
    -
  • ページが unload ハンドラを使用している
    • -
  • ページが "cache-control: no-store" をセットしている
    • -
  • ページが "cache-control: no-cache" をセットしていて、サイトが HTTPS である
    • -
  • ページが完全にはロードされないまま、ユーザがそのページから去るナビゲートをする
    • -
  • トップレベルのページにキャッシュ不可能なフレームがある
    • -
  • ページがフレーム内にあり、ユーザがそのフレーム内に新しいページをロードする（この場合、ユーザがそのページから去るナビゲートをするとそのフレームに最後にロードされたコンテンツがキャッシュされる）
    • -
- -

この新しいキャッシュ機能により、ページロードの挙動が変わります。ウェブ作者は次のことをしたいと思うことがあるでしょう。

- -
    -
  • ナビゲートされたことがあるページであることを知ること（そのページがユーザのキャッシュからロードされるとき）
    • -
  • ユーザがそのページを去るときのページの挙動を定義すること（ページがキャッシュされるようになっている間）
    • -
- -

ブラウザの 2 つの新しいイベントによってウェブ作者はそのどちらもできるようになります。

- -

ブラウザの新しいイベント

- -

これらの新しいイベントを使用すると、そのページは他のブラウザでは今までどおりにきちんと表示され（過去の Firefox、Internet Explorer、Opera、Safari でテスト済み）、Firefox 1.5 でロードしたときにこの新しいキャッシュ機能が使用されるようになります。

- -

ウェブページの標準的な挙動は次のとおりです。

- -
    -
  1. ユーザがページにナビゲートする。
    2. -
  2. ページロード時にインラインスクリプトが実行される。
    3. -
  3. ページがロードされると onload ハンドラが実行される。
    4. -
- -

4 ステップ目があるページもあります。ページが unload ハンドラを使用していると、ユーザがそのページから去るナビゲートをするときにそれが実行されます。unload ハンドラが存在しているとそのページはキャッシュされません。

- -

ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません（ステップ 2 および 3）。ほとんどの場合、これらのスクリプトの効果が保存されているためです。

- -

そのページにユーザがナビゲートするたびにロード中に実行されるようにしたいスクリプトや他の動作がそのページに含まれている場合、あるいはいつユーザがキャッシュされたページにナビゲートしたかを知りたい場合は、新しい pageshow イベントを使用します。

- -

ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。

- -

pageshow イベント

- -

このイベントは load イベントと同じように動作しますが、ページがロードされるたびに実行される点で異なります（一方、Firefox 1.5 ではページがキャッシュからロードされたときには load イベントは発動しません）。初めてページがロードされるとき、load イベントの発動直後に pageshow イベントが発動します。pageshow イベントは 初回ロード時には false がセットされる persisted という真偽値プロパティを使用します。初回ロードでなければ true がセットされます（つまり、そのページがキャッシュされているときに true がセットされます）。

- -

ページロードのたびに実行したい JavaScript は pageshow イベントの発動時に実行されるようにセットします。

- -

この記事で後に示すサンプルのように、JavaScript の関数を pageshow イベントの一部として呼び出す場合、pageshow イベントを load イベントの一部として呼び出すことで、ページが Firefox 1.5 以外のブラウザでロードされたときにもその関数を呼び出せるようになります。

- -

pagehide イベント

- -

ユーザがそのページから去るナビゲートをするときに実行する動作を定義したいものの、unload イベント（そのページがキャッシュされなくなる）を使用したくないという場合は、新しい pagehide イベントを使用することができます。pageshow のように、pagehide イベントは persisted という真偽値プロパティを使用します。このプロパティは、ブラウザがそのページをキャッシュしていなければ false がセットされ、ブラウザがそのページをキャッシュしていれば true がセットされます。このプロパティに false がセットされているとき、unload があれば pagehide イベントの直後にそれが発動します。

- -

Firefox 1.5 は、そのページの初回ロード時と同じ順番でロードに関するイベントをシミュレートします。フレームはトップレベルの文書と同じように扱われます。そのページにフレームがあると、キャッシュされたページがロードされるときに次のことが起こります。

- -
    -
  • メイン文書で pageshow イベントが発動する前に、各フレームから pageshow イベントが発動する。
    • -
  • ユーザがキャッシュされたページから去るナビゲートをすると、メイン文書で pagehide イベントが発動する前に、各フレームから pagehide イベントが発動する。
    • -
  • 単一のフレーム内でのナビゲーションについては、影響を受けるフレームでのみイベントが発動する。
    • -
- -

サンプルコード

- -

下のサンプルは load イベントと pageshow イベントの両方を使用したページです。このサンプルページは次のような挙動をとります。

- -
    -
  • Firefox 1.5 以外のブラウザでは、次のことがページロードのたびに起こる：load イベントが onLoad 関数をトリガする。onLoad 関数は onPageShow 関数を呼び出す（付随する関数はもちろんのこと）。
    • -
- -
    -
  • Firefox 1.5 では、初めてそのページがロードされるときに他のブラウザと同じように load イベントが発動する。さらに pageshow イベントが発動し、persisted に false がセットされるために他のアクションは生じない。
    • -
- -
    -
  • Firefox 1.5 では、キャッシュからページがロードされるときは pageshow イベントだけが発動する。persisted には true がセットされるため、onPageShow 関数内の JavaScript アクションだけがトリガされる。
    • -
- -

この例では次のことが起こります。

- -
    -
  • ページはロードされるたびに現在日時を算出し、表示する。この計算には秒とミリ秒が含まれるため、機能のテストが簡単になる。
    • -
  • ページの初回ロード時にカーソルがフォームの Name フィールドに移動する。Firefox 1.5 では、ユーザがそのページに戻るナビゲートをすると、カーソルはユーザがそのページから去るナビゲートをしたときにあったフィールドに残る。他のブラウザではカーソルは Name フィールドに戻る。
    • -
- -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-   "http://www.w3.org/TR/html4/loose.dtd">
-<HTML>
-<head>
-<title>Order query : Firefox 1.5 Example</title>
-<style type="text/css">
-body, p {
-	font-family: Verdana, sans-serif;
-	font-size: 12px;
-   	}
-</style>
-<script type="text/javascript">
-function onLoad() {
-	loadOnlyFirst();
-	onPageShow();
-}
-
-function onPageShow() {
-// 現在時刻の算出
-
-	var currentTime= new Date();
-	var year=currentTime.getFullYear();
-	var month=currentTime.getMonth()+1;
-	var day=currentTime.getDate();
-	var hour=currentTime.getHours();
-	var min=currentTime.getMinutes();
-	var sec=currentTime.getSeconds();
-	var mil=currentTime.getMilliseconds();
-	var displayTime = (month + "/" + day + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value=displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-<body onload="onLoad();" onpageshow="if (event.persisted) onPageShow();">
-<h2>Order query</h2>
-
-<form name="zipForm" action="http://www.example.com/formresult.html" method="get">
-<label for="timefield">Date and time:</label>
-<input type="text" id="timefield"><br>
-<label for="name">Name:</label>
-<input type="text" id="name"><br>
-<label for="address">Email address:</label>
-<input type="text" id="address"><br>
-<label for="order">Order number:</label>
-<input type="text" id="order"><br>
-<input type="submit" name="submit" value="Submit Query">
-</form>
-</body>
-</html>
-
- -

一方、上記のページが pageshow イベントをリスンせず、すべての計算を load イベントの一部として扱う（そして代わりに下のサンプルコード片で置き換える）ものだとすると、ユーザがそのページから去るナビゲーションをするとカーソル位置も日時も Firefox 1.5 にキャッシュされます。ユーザがそのページに戻ると、キャッシュされた日時が表示されます。

- -
<script>
-function onLoad() {
-	loadOnlyFirst();
-
-// 現在時刻の算出
-	var currentTime= new Date();
-	var year = currentTime.getFullYear();
-	var month = currentTime.getMonth()+1;
-	var day = currentTime.getDate();
-	var hour=currentTime.getHours();
-	var min=currentTime.getMinutes();
-	var sec=currentTime.getSeconds();
-	var mil=currentTime.getMilliseconds();
-	var displayTime = (month + "/" + day + "/" + year + " " +
-		hour + ":" + min + ":" + sec + ":" + mil);
-	document.getElementById("timefield").value=displayTime;
-}
-
-function loadOnlyFirst() {
-	document.zipForm.name.focus();
-}
-</script>
-</head>
-
-<body onload="onLoad();">
-
- -

Firefox 用拡張機能の開発

- -

Firefox 1.5 の 拡張機能 はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては load イベントをリスンし、キャッシュされないようにするトリガについては pageshow イベントをリスンしてください。

- -

例えば Firefox 用 Google ツールバーは、1.5 とそれより前のバージョンの両方と互換性を持たせるためには、autolink 関数については load イベントをリスンすべきであり、PageRank 関数については pageshow イベントをリスンすべきです。

diff --git a/files/ja/using_native_json/index.html b/files/ja/using_native_json/index.html deleted file mode 100644 index a4f38307ea..0000000000 --- a/files/ja/using_native_json/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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 文字列は関数の返値に応じて次のようになります:

- -
    -
  • Number が返されると、プロパティの値としてその数値に対応する文字列が JSON 文字列に出力されます。
    • -
  • String が返されると、プロパティの値としてその文字列が JSON 文字列に出力されます。
    • -
  • Boolean が返されると、プロパティの値として "true" もしくは "false" が JSON 文字列に出力されます。
    • -
  • その他のオブジェクトが返されると、各プロパティについて replacer を呼び出し、再帰的に JSON 文字列化されます。但し関数が返された場合には JSON 文字列には何も追加されません。
    • -
  • undefined が返されると、プロパティは 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/using_url_values_for_the_cursor_property/index.html b/files/ja/using_url_values_for_the_cursor_property/index.html deleted file mode 100644 index fc56bb1de6..0000000000 --- a/files/ja/using_url_values_for_the_cursor_property/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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/using_xpath/index.html b/files/ja/using_xpath/index.html deleted file mode 100644 index 9186a55b76..0000000000 --- a/files/ja/using_xpath/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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" } ) }}

diff --git a/files/ja/view_source/index.html b/files/ja/view_source/index.html deleted file mode 100644 index 30a3793e5c..0000000000 --- a/files/ja/view_source/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ソースを表示 -slug: View_source -tags: - - DevTools - - Firefox - - view page source -translation_of: Tools/View_source ---- -
{{ToolsSidebar}}

ソース表示機能を使用して、表示しているページの HTML や XML を閲覧できます。ソースを表示する方法は以下のとおりです:

- -
    -
  • ページ上でコンテキストクリックして、"ページのソースを表示" を選択する
    • -
  • Ctrl+U または macOS で Cmd+U を押下する
    • -
- -

Firefox 42 より前のバージョンでは、ページのソースを表示する新しいウィンドウが開いていました。

- -

Firefox 42 から、(新しいウィンドウに代わり) 新しいタブでソースを表示します。以前のウィンドウ表示を望む場合は、about:config を開いて設定項目 view_source.tab を false に設定してください。

- -

Firefox 60 で設定項目 view_source.tab が削除されました ({{bug(1418403)}}) ので、ソース表示モードを切り替えできなくなりました。ソースは常に新しいタブで表示します。

- -

ソース表示で提供する機能

- -

ソース表示機能には 3 つの付加機能があり、Firefox 40 よりソース表示タブのコンテキストメニューからアクセスできます:

- -
    -
  • 指定行へ移動
    • -
  • 長い行を折り返す (切り替え式)
    • -
  • 構文を強調表示 (切り替え式)
    • -
- -

構文のハイライト機能を有効にすると、パースエラーが発生した箇所を赤色で表示します。エラー箇所にマウスポインタを載せると、エラー内容を説明するツールチップを表示します。

- -

キーボードで指定行へ移動するには、Mac では Control + Option + L、Windows や Linux では Alt + Shift + L を押下してください。

- -

選択した部分のソースを表示

- -

Web ページの一部分を選択してコンテキストクリックすると、"選択した部分のソースを表示" というメニュー項目があります。これは "ページのソースを表示" と同様の機能ですが、選択した部分のソースだけを表示する点が異なります。

- -

MathML のソースを表示

- -

MathML 上にマウスポインタがある状態でコンテキストクリックすると、"MathML のソースを表示" というメニュー項目があります。この項目を選択すると、MathML のソースを確認できます。

- -

ソース表示の制限事項

- -

以下に、ソース表示が提供する機能について知っておくべき制限事項を挙げます。

- -

エラー報告機能は検証ツールではない

- -

ソース表示はパース処理のエラーを報告するだけであり、HTML の妥当性のエラーは報告しません。たとえば、{{HTMLElement("ul")}} 要素の子要素に {{HTMLElement("div")}} 要素を挿入することはパースエラーではありませんが、妥当な HTML でもありません。そのため、ソース表示ではこのエラーを報告しません。HTML が妥当かを確認したい場合は HTML 検証ツール、例えば W3C が提供するツール を使用しましょう。

- -

報告されないエラーがある

- -

ソース表示で報告されたエラーはすべて HTML 仕様書に関するパースエラーですが、報告されないパースエラーもあります。下記のエラーは報告されません:

- -
    -
  • ドキュメントのエンコーディングに関して不正なバイトはエラー報告されません。
    • -
  • 禁止された文字はエラー報告されません。
    • -
  • ファイルの終端 (end-of-file) に関するエラーは報告されません。
    • -
  • (タグ、コメント、doctype に対する) テキストに関する木構造構築のエラーは報告されません。
    • -
  • xmlns 属性に関するパースエラーは報告されません。
    • -
- -

XML 構文のハイライト

- -

ソース表示では、XML ソースのハイライト表示に HTML トークン化プログラムを使用します。トークン化プログラムは XML ソースのハイライト時にプロセッシングインストラクションをサポートしますが、それは XML 固有の機能のみ提供されます。このため、内部サブセットを持つ doctype やカスタムエンティティへの実体参照は正しくハイライト表示されません。

- -

誤ったハイライト表示は、(XUL ドキュメントのような) Firefox の chrome ファイルのソースを表示すると見ることができます。しかし実際のところ、典型的な XML ファイルを閲覧する際は問題にならいでしょう。

- -

関連情報

- - diff --git a/files/ja/web/accessibility/accessibility_faq/index.html b/files/ja/web/accessibility/accessibility_faq/index.html deleted file mode 100644 index 75086f73e4..0000000000 --- a/files/ja/web/accessibility/accessibility_faq/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Accessibility FAQ -slug: Web/Accessibility/Accessibility_FAQ -tags: - - Accessibility -translation_of: Web/Accessibility/FAQ ---- -

Mozilla のアクセシビリティについて、どこから始めたらよいですか?
-Mozilla Accessibility Project
-


-現在ブラウザでサポートされている組み込みアクセシビリティ機能は何ですか?
-Firefox's Built-in Accessibility Features
-


-どの支援技術が Firefox や Thunderbird をサポートしていますか?
-Assistive Technology Compatibility - Windows, Linux, UNIX, Mac OS X のための支援技術についてのドキュメントと、Firefox 1.5.0.5 以降および Thunderbird 1.5.0.5 以降での互換性。
-


-わたしの Mozilla 拡張機能をアクセシブルにするには何をしたらよいですか?
-一般的には、Accessible Toolkit Checklist を使用します。XUL によるインタフェースデザインについては、XUL accessibility guidelines -{{ mediawiki.external('http://www.mozilla.org/access/xul-guidelines Accessibile XUL Authoring Guidelines') }}をご覧ください。
-


-わたしは、Firefox が提供する良いアクセシビリティ機能の促進を手助けすることに興味があります。どうしたらよいですか?
-Firefox Accessibility Advocates に参加してください。
-

-
-
-{{ languages( { "en": "en/Accessibility_FAQ" } ) }} diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html deleted file mode 100644 index b17fe32b00..0000000000 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_button_role/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ボタンロールの使用 -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role -tags: - - ARIA - - Accessibility - - NeedsContent -translation_of: Web/Accessibility/ARIA/Roles/button_role ---- -

ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。role="button" だけで、どんな要素 (例えば {{HTMLElement("p")}}、{{HTMLElement("span")}} や {{HTMLElement("div")}}) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために aria-pressed と組み合わせて使うことが出来ます。

- -
注記: できれば、button ロールよりもネイティブ HTML ボタン (<button>、<input type="button" />、<input type="submit" />、<input type="reset" />や<input type="image" />) を使うことをおすすめします。ネイティブ HTML ボタンは古いユーザーエージェントや支援技術から広くサポートされています。ネイティブ HTML ボタンは追加のカスタマイズなしに、キーボードやフォーカスの要件をサポートしています。
- -

キーボードとフォーカス

- -

ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし button ロールがそれ自身ではフォーカス可能でない要素 (<span>、<div> もしくは <p> のような) に追加されたら、tabindex 属性がフォーカス可能なボタンを作るために使用されなければなりません。

- -

ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <button> 要素では、ボタンの onclick イベントはマウスクリックとフォーカスされている間に Space もしくは Enter が押されたときに発火します。しかし他のタグがカスタムボタンを作成するために使用されていたら、role="button" が使われていたとしても onclick イベントはマウスカーソルにクリックされたときにだけに発火するでしょう。このため、開発者は Space もしくは Enter キーが押されたときにトリガーされるために別のキーイベントハンドラを要素に追加しなければなりません。

- -

警告: リンクをボタンロールによりマークアップする際は注意してください。ボタンは Space もしくは Enter キーを使ってトリガーされることが期待されますが、リンクは Enter キーが期待されます。 言い換えれば、リンクがボタンのように振る舞うようときは、role="button" が追加されるだけでは不十分です。ネイティブのボタンと矛盾しないために、Space キーをリッスンするキーイベントハンドラを追加する必要があります。

- -

トグルボタン

- -

role="button" を使う利点は、トグルボタンの作成が許可されていることです。トグルボタンには、押された状態と押されていない状態の2つの状態があります。ボタンがトグルボタンであるかどうかは、 button ロールに加えて aria-pressed 属性で指定することができます。

- -
    -
  • aria-pressed が使用されていない場合、ボタンはトグルボタンではありません。
    • -
  • aria-pressed="false" が使用されている場合、ボタンは現在押されていないトグルボタンです。
    • -
  • aria-pressed="true" が使用されている場合、ボタンは現在押されているトグルボタンです。
    • -
  • aria-pressed="mixed" が使用されている場合、ボタンは部分的に押したとみなされます。
    • -
- -

ボタンのラベリング

- -

ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は aria-label または aria-labelledby 属性を通して提供することができます。

- -

ユーザーエージェントと支援技術への影響

- -

button ロールが使用されているとき、ユーザーエージェントはその要素をオペレーティングシステムのアクセシビリティAPIにおけるボタンコントロールとして公開すべきです。スクリーンリーダーはその要素をボタンとして通知し、そのアクセシブルな名前を言述すべきです。音声認識ソフトウェアは「クリック」に続けてボタンのアクセシブルな名前を発声することでボタンを有効にすべきです。

- -
Note: 支援技術がどのようにこの手法を扱うべきかについての意見は異なる場合があります。上記の情報はこれらの意見のひとつであり、従って規範的ではありません。
- -

例

- -

ARIA ベーシックボタン

- -

以下のスニペットでは、 span 要素に button ロールが与えられています。 <span> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために tabindex 属性が必要です。このスニペットは、 <span> 要素をボタンのように見せるための CSS スタイルが提供され、 handleBtnClick と handleBtnKeyPress は、クリックされたときや Space  もしくは Enter  キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。

- -
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
-
- -

ARIA トグルボタン

- -

このスニペットでは {{HTMLElement("span")}} 要素が button ロールと aria-pressed 属性によってトグルボタンに変更されています。ボタンが作動したとき、 aria-pressed の値を true と false で切り替え続けます。

- -

HTML

- -
<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
-  Native button toggle
-</button>
-
-<span role="button" tabindex="0"
- aria-pressed="false" onclick="handleBtnClick(event)"
- onKeyPress="handleBtnKeyPress(event)">
-  Span button toggle
-</span>
- -

CSS

- -
button,
-[role="button"] {
-    padding: 3px;
-    border: 1px solid #CCC;
-}
-
-button:active,
-button:focus,
-[role="button"][aria-pressed="true"] {
-    border: 2px solid #000;
-}
-
- -

JavaScript

- -
function handleBtnClick(event) {
-  toggleButton(event.target);
-}
-
-function handleBtnKeyPress(event) {
-  // スペースかエンターが押されているかを確認
-  if (event.key === " " || event.key === "Enter") {
-    // スペースが押されたときにスクロールさせないためにデフォルトの振る舞いをキャンセル
-    event.preventDefault();
-    toggleButton(event.target);
-  }
-}
-
-function toggleButton(element) {
-  // ボタンが押されているかを確認
-  var pressed = (element.getAttribute("aria-pressed") === "true");
-  // aria-pressed をの状態を反転
-  element.setAttribute("aria-pressed", !pressed);
-}
- -

結果

- -

{{EmbedLiveSample('ARIA_Toggle_Button')}}

- -

注記

- -

使用された ARIA 属性

- - - -

その他のリソース

- - diff --git a/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html b/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html deleted file mode 100644 index 13f3fa4b10..0000000000 --- a/files/ja/web/accessibility/aria/aria_techniques/using_the_checkbox_role/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: チェックボックスロールの使用 -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role -tags: - - ARIA - - Accessibility - - NeedsContent - - Role(2) - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/checkbox_role ---- -

チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が role="checkbox" を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox 要素は aria-checked を通して３つのステートを公開できます:

- -
    -
  • aria-checked="true": チェックボックスはチェックされています
    • -
  • aria-checked="false": チェックボックスはチェックされていません
    • -
  • aria-checked="mixed": チェックボックスは部分的にチェックされています
    • -
- -

開発者はチェックボックスが作動した際に、 aria-checked 属性を動的に変更する必要があります。

- -

チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。

- -

ユーザーエージェントと支援技術への影響 

- -

チェックボックスロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:

- -
    -
  • チェックボックスを持っている要素を、オペレーティングシステムのアクセシビリティAPIへ公開します。
    • -
  • aria-checked の値が変わった際に、アクセシブルなす～手との変更イベントを送信します。
    • -
- -

支援技術製品は次のように振る舞わなければなりません:

- -
    -
  • スクリーンリーダーは要素をチェックボックスとしてアナウンスしなければなりません。またオプションでチェックボックスを動作させる方法を提供します。
    • -
- -
注記: 支援技術がこの技術をどう扱うべきかについて、意見は分かれています。上記の情報はこれらの意見の一つであり、標準的なものではありません。
- -

例

- -

例1: ARIA によるチェックボックスロールの追加

- -
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
-<label for="chk1">Remember my preferences</label>
- -

注記 

- -

使用された ARIA 属性

- - - -

関連する ARIA 技術

- -

互換性

- -

TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加

- -

その他のリソース

diff --git a/files/ja/web/accessibility/aria/roles/button_role/index.html b/files/ja/web/accessibility/aria/roles/button_role/index.html new file mode 100644 index 0000000000..b17fe32b00 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/button_role/index.html @@ -0,0 +1,123 @@ +--- +title: ボタンロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role +tags: + - ARIA + - Accessibility + - NeedsContent +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +

ボタンロールはユーザーが操作した際にレスポンスをトリガーするクリック可能な要素に使用されなければなりません。role="button" だけで、どんな要素 (例えば {{HTMLElement("p")}}、{{HTMLElement("span")}} や {{HTMLElement("div")}}) でもボタンコントロールとしてスクリーンリーダーへ認識させることができます。さらにこのロールは、トグルボタンを作るために aria-pressed と組み合わせて使うことが出来ます。

+ +
注記: できれば、button ロールよりもネイティブ HTML ボタン (<button>、<input type="button" />、<input type="submit" />、<input type="reset" />や<input type="image" />) を使うことをおすすめします。ネイティブ HTML ボタンは古いユーザーエージェントや支援技術から広くサポートされています。ネイティブ HTML ボタンは追加のカスタマイズなしに、キーボードやフォーカスの要件をサポートしています。
+ +

キーボードとフォーカス

+ +

ボタンはインタラクティブなコントールでなのでフォーカス可能です。もし button ロールがそれ自身ではフォーカス可能でない要素 (<span>、<div> もしくは <p> のような) に追加されたら、tabindex 属性がフォーカス可能なボタンを作るために使用されなければなりません。

+ +

ボタンはマウスユーザーとキーボードユーザーの両方が操作できます。ネイティブ HTML <button> 要素では、ボタンの onclick イベントはマウスクリックとフォーカスされている間に Space もしくは Enter が押されたときに発火します。しかし他のタグがカスタムボタンを作成するために使用されていたら、role="button" が使われていたとしても onclick イベントはマウスカーソルにクリックされたときにだけに発火するでしょう。このため、開発者は Space もしくは Enter キーが押されたときにトリガーされるために別のキーイベントハンドラを要素に追加しなければなりません。

+ +

警告: リンクをボタンロールによりマークアップする際は注意してください。ボタンは Space もしくは Enter キーを使ってトリガーされることが期待されますが、リンクは Enter キーが期待されます。 言い換えれば、リンクがボタンのように振る舞うようときは、role="button" が追加されるだけでは不十分です。ネイティブのボタンと矛盾しないために、Space キーをリッスンするキーイベントハンドラを追加する必要があります。

+ +

トグルボタン

+ +

role="button" を使う利点は、トグルボタンの作成が許可されていることです。トグルボタンには、押された状態と押されていない状態の2つの状態があります。ボタンがトグルボタンであるかどうかは、 button ロールに加えて aria-pressed 属性で指定することができます。

+ +
    +
  • aria-pressed が使用されていない場合、ボタンはトグルボタンではありません。
    • +
  • aria-pressed="false" が使用されている場合、ボタンは現在押されていないトグルボタンです。
    • +
  • aria-pressed="true" が使用されている場合、ボタンは現在押されているトグルボタンです。
    • +
  • aria-pressed="mixed" が使用されている場合、ボタンは部分的に押したとみなされます。
    • +
+ +

ボタンのラベリング

+ +

ボタンには常にアクセシブルな名前があるべきです。多くのボタンでは、この名前はボタンの中にあるテキストと同じです。場合によっては、例えばアイコンボタンでは、アクセシブルな名前は aria-label または aria-labelledby 属性を通して提供することができます。

+ +

ユーザーエージェントと支援技術への影響

+ +

button ロールが使用されているとき、ユーザーエージェントはその要素をオペレーティングシステムのアクセシビリティAPIにおけるボタンコントロールとして公開すべきです。スクリーンリーダーはその要素をボタンとして通知し、そのアクセシブルな名前を言述すべきです。音声認識ソフトウェアは「クリック」に続けてボタンのアクセシブルな名前を発声することでボタンを有効にすべきです。

+ +
Note: 支援技術がどのようにこの手法を扱うべきかについての意見は異なる場合があります。上記の情報はこれらの意見のひとつであり、従って規範的ではありません。
+ +

例

+ +

ARIA ベーシックボタン

+ +

以下のスニペットでは、 span 要素に button ロールが与えられています。 <span> 要素が使用されているため、ボタンをフォーカス可能にし、タブナビゲーション順の一部にするために tabindex 属性が必要です。このスニペットは、 <span> 要素をボタンのように見せるための CSS スタイルが提供され、 handleBtnClick と handleBtnKeyPress は、クリックされたときや Space  もしくは Enter  キーが押されたときにボタンのアクションを実行するイベントハンドラであることを示しています。

+ +
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
+
+ +

ARIA トグルボタン

+ +

このスニペットでは {{HTMLElement("span")}} 要素が button ロールと aria-pressed 属性によってトグルボタンに変更されています。ボタンが作動したとき、 aria-pressed の値を true と false で切り替え続けます。

+ +

HTML

+ +
<button type="button" aria-pressed="false" onclick="handleBtnClick(event)">
+  Native button toggle
+</button>
+
+<span role="button" tabindex="0"
+ aria-pressed="false" onclick="handleBtnClick(event)"
+ onKeyPress="handleBtnKeyPress(event)">
+  Span button toggle
+</span>
+ +

CSS

+ +
button,
+[role="button"] {
+    padding: 3px;
+    border: 1px solid #CCC;
+}
+
+button:active,
+button:focus,
+[role="button"][aria-pressed="true"] {
+    border: 2px solid #000;
+}
+
+ +

JavaScript

+ +
function handleBtnClick(event) {
+  toggleButton(event.target);
+}
+
+function handleBtnKeyPress(event) {
+  // スペースかエンターが押されているかを確認
+  if (event.key === " " || event.key === "Enter") {
+    // スペースが押されたときにスクロールさせないためにデフォルトの振る舞いをキャンセル
+    event.preventDefault();
+    toggleButton(event.target);
+  }
+}
+
+function toggleButton(element) {
+  // ボタンが押されているかを確認
+  var pressed = (element.getAttribute("aria-pressed") === "true");
+  // aria-pressed をの状態を反転
+  element.setAttribute("aria-pressed", !pressed);
+}
+ +

結果

+ +

{{EmbedLiveSample('ARIA_Toggle_Button')}}

+ +

注記

+ +

使用された ARIA 属性

+ + + +

その他のリソース

+ + diff --git a/files/ja/web/accessibility/aria/roles/checkbox_role/index.html b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html new file mode 100644 index 0000000000..13f3fa4b10 --- /dev/null +++ b/files/ja/web/accessibility/aria/roles/checkbox_role/index.html @@ -0,0 +1,63 @@ +--- +title: チェックボックスロールの使用 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role +tags: + - ARIA + - Accessibility + - NeedsContent + - Role(2) + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +--- +

チェックボックスロールはチェック可能なインタラクティブなコントロールに使用されます。もし要素が role="checkbox" を使っていたら 、支援技術へチェックボックスのステートを公開するためにaria-checked 属性も持つ必要があります。ネイティブHTMLのチェックボックスフォームコントロールが２つののみ（ "checked" もしくは "not checked" ）をもてる一方で、role=checkbox 要素は aria-checked を通して３つのステートを公開できます:

+ +
    +
  • aria-checked="true": チェックボックスはチェックされています
    • +
  • aria-checked="false": チェックボックスはチェックされていません
    • +
  • aria-checked="mixed": チェックボックスは部分的にチェックされています
    • +
+ +

開発者はチェックボックスが作動した際に、 aria-checked 属性を動的に変更する必要があります。

+ +

チェックボックスはインタラクティブなコントロールなので、フォーカス可能かつキーボードからアクセス可能でなければなりません。 ロールがフォーカス可能ではない要素に適応されたとしたら、フォーカスを可能にするために tabindex 要素が使用されなければなりません。チェックボックスを動作させるために期待されるキーボードショートカットはスペースキーです。

+ +

ユーザーエージェントと支援技術への影響 

+ +

チェックボックスロールが要素に付与されたときに、ユーザーエージェントは次のように振る舞わなければなりません:

+ +
    +
  • チェックボックスを持っている要素を、オペレーティングシステムのアクセシビリティAPIへ公開します。
    • +
  • aria-checked の値が変わった際に、アクセシブルなす～手との変更イベントを送信します。
    • +
+ +

支援技術製品は次のように振る舞わなければなりません:

+ +
    +
  • スクリーンリーダーは要素をチェックボックスとしてアナウンスしなければなりません。またオプションでチェックボックスを動作させる方法を提供します。
    • +
+ +
注記: 支援技術がこの技術をどう扱うべきかについて、意見は分かれています。上記の情報はこれらの意見の一つであり、標準的なものではありません。
+ +

例

+ +

例1: ARIA によるチェックボックスロールの追加

+ +
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
+<label for="chk1">Remember my preferences</label>
+ +

注記 

+ +

使用された ARIA 属性

+ + + +

関連する ARIA 技術

+ +

互換性

+ +

TBD: 一般的なUAとAT製品の組み合わせサポート情報の追加

+ +

その他のリソース

diff --git a/files/ja/web/accessibility/faq/index.html b/files/ja/web/accessibility/faq/index.html new file mode 100644 index 0000000000..75086f73e4 --- /dev/null +++ b/files/ja/web/accessibility/faq/index.html @@ -0,0 +1,26 @@ +--- +title: Accessibility FAQ +slug: Web/Accessibility/Accessibility_FAQ +tags: + - Accessibility +translation_of: Web/Accessibility/FAQ +--- +

Mozilla のアクセシビリティについて、どこから始めたらよいですか?
+Mozilla Accessibility Project
+


+現在ブラウザでサポートされている組み込みアクセシビリティ機能は何ですか?
+Firefox's Built-in Accessibility Features
+


+どの支援技術が Firefox や Thunderbird をサポートしていますか?
+Assistive Technology Compatibility - Windows, Linux, UNIX, Mac OS X のための支援技術についてのドキュメントと、Firefox 1.5.0.5 以降および Thunderbird 1.5.0.5 以降での互換性。
+


+わたしの Mozilla 拡張機能をアクセシブルにするには何をしたらよいですか?
+一般的には、Accessible Toolkit Checklist を使用します。XUL によるインタフェースデザインについては、XUL accessibility guidelines +{{ mediawiki.external('http://www.mozilla.org/access/xul-guidelines Accessibile XUL Authoring Guidelines') }}をご覧ください。
+


+わたしは、Firefox が提供する良いアクセシビリティ機能の促進を手助けすることに興味があります。どうしたらよいですか?
+Firefox Accessibility Advocates に参加してください。
+

+
+
+{{ languages( { "en": "en/Accessibility_FAQ" } ) }} diff --git a/files/ja/web/api/ambient_light_events/index.html b/files/ja/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..be70ad2612 --- /dev/null +++ b/files/ja/web/api/ambient_light_events/index.html @@ -0,0 +1,68 @@ +--- +title: Ambient Light Events +slug: WebAPI/Using_Light_Events +tags: + - Ambient Light +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

ambient light event は、光の強さの変化をウェブページやアプリケーションに気づかせるのに便利な手段です。これによりユーザーインターフェイスのコントラストを変えたり写真を撮るために必要な露出時間を変えたりするなど、ウェブページやアプリケーションが光量の変化に対応できるようになります。

+ +

Light Event

+ +

端末の光センサーが光量の変化を検出すると、それをブラウザーに通知します。ブラウザーがその通知を受け取ると、正確な光の強度に関する情報を提供する {{domxref("DeviceLightEvent")}} イベントを発生させます。

+ +

このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("devicelight")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondevicelight")}} プロパティに接続することにより、 window オブジェクトレベルで取得できます。

+ +

イベントを取得するとイベントオブジェクトの {{domxref("DeviceLightEvent.value")}} プロパティを通して、{{interwiki("wikipedia", "ルクス")}}で表した照度にアクセスできます。

+ +

例

+ +
if ('ondevicelight' in window) {
+  window.addEventListener('devicelight', function(event) {
+    var body = document.querySelector('body');
+    if (event.value < 50) {
+      body.classList.add('darklight');
+      body.classList.remove('brightlight');
+    } else {
+      body.classList.add('brightlight');
+      body.classList.remove('darklight');
+    }
+  });
+} else {
+  console.log('devicelight event not supported');
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.DeviceLightEvent")}}

+ +

関連情報

+ +
    +
  • {{domxref("DeviceLightEvent")}}
    • +
  • {{event("devicelight")}}
    • +
diff --git a/files/ja/web/api/audiobuffersourcenode/onended/index.html b/files/ja/web/api/audiobuffersourcenode/onended/index.html deleted file mode 100644 index 22f8b05ba3..0000000000 --- a/files/ja/web/api/audiobuffersourcenode/onended/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: AudioBufferSourceNode.onended -slug: Web/API/AudioBufferSourceNode/onended -translation_of: Web/API/AudioScheduledSourceNode/onended -translation_of_original: Web/API/AudioBufferSourceNode/onended ---- -

{{ APIRef("AudioBufferSourceNode") }}

- -
AudioBufferSourceNodeの onended イベントハンドラーは{{event("ended_(Web_Audio)", "ended")}} イベントに関するコ−ルバック関数を格納します。これによりオーディオトラックの再生終了時に実行するコードを設定することができます。
- -
-

注: onended ハンドラーは loop プロパティーがtrueに設定されている場合はオーディオが再生終了することが無いので効果がありません。このような場合にこの機能を有効にするには {{ domxref("AudioBufferSourceNode.stop()") }}　を使用してください。

-
- -

構文

- -
var source = audioCtx.createBufferSource();
-source.onended = function() { ... };
-
- -

用例

- -
source.start();
-source.onended = function() {
-  console.log('Your audio has finished playing');
-}
- -

プロパティ

- -

有りません。

- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-onended', 'onended')}}{{Spec2('Web Audio API')}} 
- -

ブラウザー互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
- 22 (unprefixed)		6 {{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
-
- -

関連情報

- - diff --git a/files/ja/web/api/audiobuffersourcenode/stop/index.html b/files/ja/web/api/audiobuffersourcenode/stop/index.html deleted file mode 100644 index 2163d86379..0000000000 --- a/files/ja/web/api/audiobuffersourcenode/stop/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: AudioBufferSourceNode.stop() -slug: Web/API/AudioBufferSourceNode/stop -translation_of: Web/API/AudioScheduledSourceNode/stop -translation_of_original: Web/API/AudioBufferSourceNode/stop ---- -

{{ APIRef("Web Audio API") }}

- -
-

インターフェースのstop()メソッドは、オーディオバッファの再生を停止させるために使われます。

-
- -

構文

- -
var source = audioCtx.createBufferSource();
-source.stop(when);
-
- -

例

- -

最も単純なオーディオバッファ再生の停止方法—この場合は何もパラメータを指定する必要はありません。

- -
source.stop();
- -

しばらく後に停止させたい場合は、引数として秒数を指定します。

- -
source.stop(3);
- -
-

注: stop()の使い方の完全な例はAudioContext.decodeAudioDataを参照してください。コードをすぐに実行することや、ソースコードを閲覧することもできます。

-
- -

引数

- -
-
when
-
whenパラメータは、再生をいつ停止するかを決定します。指定の時間を経過すると、再生はすぐに停止します。このメソッドが2回以上呼ばれると、例外が発生します
-
- -

戻り値

- -

なし

- -

使用

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-stop-void-double-when', 'stop()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
- 22 (unprefixed)		6 {{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createanalyser/index.html b/files/ja/web/api/audiocontext/createanalyser/index.html deleted file mode 100644 index c186d1029c..0000000000 --- a/files/ja/web/api/audiocontext/createanalyser/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: AudioContext.createAnalyser() -slug: Web/API/AudioContext/createAnalyser -translation_of: Web/API/BaseAudioContext/createAnalyser ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateAnalyser()メソッドは、音声の時間と周波数を解析する{{ domxref("AnalyserNode") }}を生成します。これはデータの可視化などで使えます。

-
- -
-

注: このノードの詳しい説明は、{{domxref("AnalyserNode")}}のページを参照してください。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var analyser = audioCtx.createAnalyser();
- -

戻り値

- -

{{domxref("AnalyserNode")}}

- -

例

- -

次のサンプルでは、基本的なAudioContextのAnalyserNodeの生成、requestAnimationFrame()による時間データの周期的な収集と「オシロスコープのように」現在の音声を出力する方法を示しています。より完全な例と情報は、Voice-change-O-maticデモ(app.jsの128–205行目)を参照してください。

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var analyser = audioCtx.createAnalyser();
-
-  ...
-
-analyser.fftSize = 2048;
-var bufferLength = analyser.fftSize;
-var dataArray = new Uint8Array(bufferLength);
-analyser.getByteTimeDomainData(dataArray);
-
-// 現在の音のオシロスコープのように描く
-
-function draw() {
-
-      drawVisual = requestAnimationFrame(draw);
-
-      analyser.getByteTimeDomainData(dataArray);
-
-      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
-      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
-
-      canvasCtx.lineWidth = 2;
-      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
-
-      canvasCtx.beginPath();
-
-      var sliceWidth = WIDTH * 1.0 / bufferLength;
-      var x = 0;
-
-      for(var i = 0; i < bufferLength; i++) {
-
-        var v = dataArray[i] / 128.0;
-        var y = v * HEIGHT/2;
-
-        if(i === 0) {
-          canvasCtx.moveTo(x, y);
-        } else {
-          canvasCtx.lineTo(x, y);
-        }
-
-        x += sliceWidth;
-      }
-
-      canvasCtx.lineTo(canvas.width, canvas.height/2);
-      canvasCtx.stroke();
-    };
-
-    draw();
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createAnalyser-AnalyserNode', 'createAnalyser()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createbiquadfilter/index.html b/files/ja/web/api/audiocontext/createbiquadfilter/index.html deleted file mode 100644 index 136557bea5..0000000000 --- a/files/ja/web/api/audiocontext/createbiquadfilter/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: AudioContext.createBiquadFilter() -slug: Web/API/AudioContext/createBiquadFilter -translation_of: Web/API/BaseAudioContext/createBiquadFilter ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateBiquadFilter()メソッドは、いくつかの一般的なフィルタを設定できる二次フィルターを表す{{ domxref("BiquadFilterNode") }}を生成します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var biquadFilter = audioCtx.createBiquadFilter();
- -

戻り値

- -

{{domxref("BiquadFilterNode")}}

- -

例

- -

次の例はAudioContextのBiquadFilterNodeの使い方を説明しています。完全に動作する例は、voice-change-o-maticデモ(ソースコードもあります)を参照してください。

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-
-// このアプリで使う2つのノードを設定する
-var analyser = audioCtx.createAnalyser();
-var distortion = audioCtx.createWaveShaper();
-var gainNode = audioCtx.createGain();
-var biquadFilter = audioCtx.createBiquadFilter();
-var convolver = audioCtx.createConvolver();
-
-// ノードを接続する
-
-source = audioCtx.createMediaStreamSource(stream);
-source.connect(analyser);
-analyser.connect(distortion);
-distortion.connect(biquadFilter);
-biquadFilter.connect(convolver);
-convolver.connect(gainNode);
-gainNode.connect(audioCtx.destination);
-
-// 二次フィルターで操作する
-
-biquadFilter.type = "lowshelf";
-biquadFilter.frequency.value = 1000;
-biquadFilter.gain.value = 25;
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBiquadFilter-BiquadFilterNode', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
- 22		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参照

- - diff --git a/files/ja/web/api/audiocontext/createbuffer/index.html b/files/ja/web/api/audiocontext/createbuffer/index.html deleted file mode 100644 index e94a5a18be..0000000000 --- a/files/ja/web/api/audiocontext/createbuffer/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: AudioContext.createBuffer() -slug: Web/API/AudioContext/createBuffer -translation_of: Web/API/BaseAudioContext/createBuffer ---- -

{{ APIRef("Web Audio API") }}

- -
-

インターフェースのcreateBuffer()メソッドは、新規の空の{{ domxref("AudioBuffer") }}オブジェクトを生成します。そこにデータを書きこめば、{{ domxref("AudioBufferSourceNode") }}で再生できます。

-
- -
-

Note: createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution. The asynchronous method decodeAudioData() does the same thing — takes compressed audio, say, an MP3 file, and directly gives you back an {{ domxref("AudioBuffer") }} that you can then set to play via in an {{ domxref("AudioBufferSourceNode") }}. For simple uses like playing an MP3, decodeAudioData() is what you should be using.

-
- -

構文

- -
var audioCtx = new AudioContext();
-var buffer = audioCtx.createBuffer(numOfChannels, length, sampleRate);
- -

引数

- -
-

Note: For an in-depth explanation of how audio buffers work, and what these parameters mean, read Audio buffers: frames, samples and channels from our Basic concepts guide.

-
- -
-
numOfChannels
-
integerで現されたバッファのチャンネルの数。実装は少なくとも32チャンネルに対応している
-
length
-
integerで表されたバッファのサンプルフレームの数
-
sampleRate
-
1秒あたりのサンプルフレームの数。実装は少なくとも22050から96000の範囲に対応している
-
- -

戻り値

- -

{{domxref("AudioBuffer")}}

- -

例

- -

まずは2つの小さな例で、引数をどのように設定するかを説明します:

- -
var audioCtx = new AudioContext();
-var buffer = audioCtx.createBuffer(2, 22050, 44100);
- -

このようにすると、ステレオ(2チャンネル)のバッファが生成され、44100Hz(極めて一般的で、多くの通常のサウンドカードはこのレートで動作します)のAudioContextで再生すると、0.5秒間(22050フレーム / 44100Hz )となります。

- -
var audioCtx = new AudioContext();
-var buffer = audioCtx.createBuffer(1, 22050, 22050);
- -

このようにすると、モノラル(1チャンネル)のバッファが生成され、44100HzのAudioContextで再生すると、自動的に44100Hzに再サンプリングされ(そして結果として44100フレームとなり)、1秒間(44100フレーム / 44100Hz)となります。

- -
-

Note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. Resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound).

-
- -

次は少し複雑なcreateBuffer()の例を見てみましょう。2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コードをすぐに実行することや、ソースコードを閲覧することもできます。

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var button = document.querySelector('button');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-
-pre.innerHTML = myScript.innerHTML;
-
-// ステレオ
-var channels = 2;
-// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
-var frameCount = audioCtx.sampleRate * 2.0;
-
-var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
-
-button.onclick = function() {
-  // バッファにホワイトノイズを書き込む;
-  // 単なる-1.0から1.0の間の乱数の値である
-  for (var channel = 0; channel < channels; channel++) {
-   // 実際のデータの配列を得る
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random()は[0; 1.0]である
-     // 音声は[-1.0; 1.0]である必要がある
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
-  }
-
-  // AudioBufferSourceNodeを得る
-  // これはAudioBufferを再生するときに使うAudioNodeである
-  var source = audioCtx.createBufferSource();
-  // AudioBufferSourceNodeにバッファを設定する
-  source.buffer = myArrayBuffer;
-  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
-  source.connect(audioCtx.destination);
-  // 音源の再生を始める
-  source.start();
-}
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBuffer-AudioBuffer-unsigned-long-numberOfChannels-unsigned-long-length-float-sampleRate', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
- 22		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createbuffersource/index.html b/files/ja/web/api/audiocontext/createbuffersource/index.html deleted file mode 100644 index 24f65061c6..0000000000 --- a/files/ja/web/api/audiocontext/createbuffersource/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: AudioContext.createBufferSource() -slug: Web/API/AudioContext/createBufferSource -translation_of: Web/API/BaseAudioContext/createBufferSource ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateBufferSource()メソッドは、{{ domxref("AudioBuffer") }}オブジェクトに書き込まれた音声データを再生する{{ domxref("AudioBufferSourceNode") }}を生成します。{{ domxref("AudioBuffer") }}は{{domxref("AudioContext.createBuffer")}}を使った場合や、{{domxref("AudioContext.decodeAudioData")}}でオーディオトラックをデコードしたときに生成されます。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var source = audioCtx.createBufferSource();
- -

戻り値

- -

{{domxref("AudioBufferSourceNode")}}

- -

例

- -

この例では、2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コメントは何をしているかを簡単に説明しています。

- -
-

注: コードの実行とソースの閲覧もできます。

-
- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var button = document.querySelector('button');
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-
-pre.innerHTML = myScript.innerHTML;
-
-// ステレオ
-var channels = 2;
-// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
-var frameCount = audioCtx.sampleRate * 2.0;
-
-var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
-
-button.onclick = function() {
-  // バッファにホワイトノイズを書き込む;
-  // 単なる-1.0から1.0の間の乱数の値である
-  for (var channel = 0; channel < channels; channel++) {
-   // 実際のデータの配列を得る
-   var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
-     // Math.random()は[0; 1.0]である
-     // 音声は[-1.0; 1.0]である必要がある
-     nowBuffering[i] = Math.random() * 2 - 1;
-   }
-  }
-
-  // AudioBufferSourceNodeを得る
-  // これはAudioBufferを再生するときに使うAudioNodeである
-  var source = audioCtx.createBufferSource();
-  // AudioBufferSourceNodeにバッファを設定する
-  source.buffer = myArrayBuffer;
-  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
-  source.connect(audioCtx.destination);
-  // 音源の再生を始める
-  source.start();
-}
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBufferSource-AudioBufferSourceNode', 'createBufferSource()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createchannelmerger/index.html b/files/ja/web/api/audiocontext/createchannelmerger/index.html deleted file mode 100644 index e79b116642..0000000000 --- a/files/ja/web/api/audiocontext/createchannelmerger/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: AudioContext.createChannelMerger() -slug: Web/API/AudioContext/createChannelMerger -translation_of: Web/API/BaseAudioContext/createChannelMerger ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateChannelMerger()メソッドは、複数のオーディオストリームを1つに混合する{{domxref("ChannelMergerNode")}}を生成します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var merger = audioCtx.createChannelMerger(numberOfInputs);
- -

引数

- -
-
numberOfInputs
-
入力オーディオストリームのチャンネルの数。指定がない場合は6になる。
-
- -

戻り値

- -

{{domxref("ChannelMergerNode")}}

- -

例

- -

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

- -
var ac = new AudioContext();
-ac.decodeAudioData(someStereoBuffer, function(data) {
- var source = ac.createBufferSource();
- source.buffer = data;
- var splitter = ac.createChannelSplitter(2);
- source.connect(splitter);
- var merger = ac.createChannelMerger(2);
-
- // 左チャンネルのボリュームのみ小さくする
- var gain = ac.createGain();
- gain.value = 0.5;
- splitter.connect(gain, 0);
-
- // splitterをmergerの2番目の入力にして戻す
- // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
- gain.connect(merger, 0, 1);
- splitter.connect(merger, 1, 0);
-
- var dest = ac.createMediaStreamDestination();
-
- // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
- // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
- merger.connect(dest);
-});
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelMerger-ChannelMergerNode-unsigned-long-numberOfInputs', 'createChannelMerger()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参照

- - diff --git a/files/ja/web/api/audiocontext/createchannelsplitter/index.html b/files/ja/web/api/audiocontext/createchannelsplitter/index.html deleted file mode 100644 index 07444c49d0..0000000000 --- a/files/ja/web/api/audiocontext/createchannelsplitter/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: AudioContext.createChannelSplitter() -slug: Web/API/AudioContext/createChannelSplitter -translation_of: Web/API/BaseAudioContext/createChannelSplitter ---- -

{{ APIRef("Web Audio API") }}

- -
-

インターフェースのcreateChannelSplitter()メソッドは、オーディオストリームを個別に処理するためにチャンネルを分離する{{domxref("ChannelSplitterNode")}}を生成します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var splitter = audioCtx.createChannelSplitter(numberOfOutputs);
- -

引数

- -
-
numberOfOutputs
-
入力オーディオストリームを分ける数。引数の指定がなければ6。
-
- -

Returns

- -

{{domxref("ChannelSplitterNode")}}

- -

例

- -

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

- -
var ac = new AudioContext();
-ac.decodeAudioData(someStereoBuffer, function(data) {
- var source = ac.createBufferSource();
- source.buffer = data;
- var splitter = ac.createChannelSplitter(2);
- source.connect(splitter);
- var merger = ac.createChannelMerger(2);
-
- // 左チャンネルのボリュームのみ小さくする
- var gain = ac.createGain();
- gain.value = 0.5;
- splitter.connect(gain, 0);
-
- // splitterをmergerの2番目の入力にして戻す
- // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
- gain.connect(merger, 0, 1);
- splitter.connect(merger, 1, 0);
-
- var dest = ac.createMediaStreamDestination();
-
- // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
- // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
- merger.connect(dest);
-});
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelSplitter-ChannelSplitterNode-unsigned-long-numberOfOutputs', 'createChannelSplitter()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createconvolver/index.html b/files/ja/web/api/audiocontext/createconvolver/index.html deleted file mode 100644 index ae5acf59c8..0000000000 --- a/files/ja/web/api/audiocontext/createconvolver/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: AudioContext.createConvolver() -slug: Web/API/AudioContext/createConvolver -translation_of: Web/API/BaseAudioContext/createConvolver ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateConvolver()メソッドは、音声にリバーブ効果などを適用する{{ domxref("ConvolverNode") }}を生成します。詳細はspec definition of Convolutionを参照してください。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var convolver = audioCtx.createConvolver();
- -

戻り値

- -

{{domxref("ConvolverNode")}}

- -

例

- -

次の例は畳み込みノードを生成する基礎的なAudioContextの使い方を示しています。まず、畳み込み(インパルス応答)が適用される音声が書き込まれたAudioBufferを生成し、そしてそれに畳み込みを適用します。例ではコンサートホールの群集の短い音声を使っていて、深く音響したリバーブ効果がかかっています。

- -

例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var convolver = audioCtx.createConvolver();
-
-  ...
-
-// XHRで畳み込みノードのための音声トラックを得る
-
-var soundSource, concertHallBuffer;
-
-ajaxRequest = new XMLHttpRequest();
-ajaxRequest.open('GET', 'concert-crowd.ogg', true);
-ajaxRequest.responseType = 'arraybuffer';
-
-ajaxRequest.onload = function() {
-  var audioData = ajaxRequest.response;
-  audioCtx.decodeAudioData(audioData, function(buffer) {
-      concertHallBuffer = buffer;
-      soundSource = audioCtx.createBufferSource();
-      soundSource.buffer = concertHallBuffer;
-    }, function(e){"Error with decoding audio data" + e.err});
-}
-
-ajaxRequest.send();
-
-  ...
-
-convolver.buffer = concertHallBuffer;
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createConvolver-ConvolverNode', 'createConvolver()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createdelay/index.html b/files/ja/web/api/audiocontext/createdelay/index.html deleted file mode 100644 index 709a8a375b..0000000000 --- a/files/ja/web/api/audiocontext/createdelay/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: AudioContext.createDelay() -slug: Web/API/AudioContext/createDelay -translation_of: Web/API/BaseAudioContext/createDelay ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateDelay()メソッドは、入力音声信号を一定時間遅らせる{{domxref("DelayNode")}}を生成します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var synthDelay = audioCtx.createDelay(maxDelayTime);
- -

引数

- -
-
maxDelayTime
-
音声信号の最大遅れ時間の秒数。デフォルトは0
-
- -

戻り値

- -

{{domxref("DelayNode")}}

- -

例

- -

ループする3つの異なる簡単な例を用意しました。create-delayを見てください。(ソースコードも閲覧できます。)ただPlayボタンを押すと、ループはすぐ始まります。スライダーを右に動かしPlayボタンを押すと、待ち時間が挿入され、少し時間が過ぎるまで再生が始まりません。

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var synthDelay = audioCtx.createDelay(5.0);
-
-  ...
-
-var synthSource;
-
-playSynth.onclick = function() {
-  synthSource = audioCtx.createBufferSource();
-  synthSource.buffer = buffers[2];
-  synthSource.loop = true;
-  synthSource.start();
-  synthSource.connect(synthDelay);
-  synthDelay.connect(destination);
-  this.setAttribute('disabled', 'disabled');
-}
-
-stopSynth.onclick = function() {
-  synthSource.disconnect(synthDelay);
-  synthDelay.disconnect(destination);
-  synthSource.stop();
-  playSynth.removeAttribute('disabled');
-}
-
-...
-
-var delay1;
-rangeSynth.oninput = function() {
-delay1 = rangeSynth.value;
-synthDelay.delayTime.value = delay1;
-}
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDelay-DelayNode-double-maxDelayTime', 'createDelay()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参照

- - diff --git a/files/ja/web/api/audiocontext/createdynamicscompressor/index.html b/files/ja/web/api/audiocontext/createdynamicscompressor/index.html deleted file mode 100644 index 2fa5ca43ed..0000000000 --- a/files/ja/web/api/audiocontext/createdynamicscompressor/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: AudioContext.createDynamicsCompressor() -slug: Web/API/AudioContext/createDynamicsCompressor -translation_of: Web/API/BaseAudioContext/createDynamicsCompressor ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateDynamicsCompressor()メソッドは、音声信号にコンプレッサーを適用する{{domxref("DynamicsCompressorNode")}}を生成します。

-
- -

コンプレッサーは、音声信号の最大部分の音量を小さくし、最小部分の音量を大きくします。一般的に、より大きく、豊かで、高密度な音になります。これはゲームや音楽アプリケーションでたくさんの別々の音を同時に再生する場合に特に重要です。このような場合、全体の音量の操作したり、出力音声のクリッピング(ひずみ)を避けたいはずです。

- -

構文

- -
var audioCtx = new AudioContext();
-var compressor = audioCtx.createDynamicsCompressor();
- -

戻り値

- -

{{domxref("DynamicsCompressorNode")}}

- -

例

- -

音声トラックにコンプレッサーを追加するためにcreateDynamicsCompressor()を使う簡単なデモコードです。より完全なサンプルは、basic Compressor example (ソースコードの閲覧)を参照してください。

- -
// MediaElementAudioSourceNodeを生成する
-// そこにHTMLMediaElementを入れる
-var source = audioCtx.createMediaElementSource(myAudio);
-
-// コンプレッサーノードを生成する
-var compressor = audioCtx.createDynamicsCompressor();
-compressor.threshold.value = -50;
-compressor.knee.value = 40;
-compressor.ratio.value = 12;
-compressor.reduction.value = -20;
-compressor.attack.value = 0;
-compressor.release.value = 0.25;
-
-// AudioBufferSourceNodeを行き先(destination)につなげる
-source.connect(audioCtx.destination);
-
-button.onclick = function() {
-  var active = button.getAttribute('data-active');
-  if(active == 'false') {
-    button.setAttribute('data-active', 'true');
-    button.innerHTML = 'Remove compression';
-
-    source.disconnect(audioCtx.destination);
-    source.connect(compressor);
-    compressor.connect(audioCtx.destination);
-  } else if(active == 'true') {
-    button.setAttribute('data-active', 'false');
-    button.innerHTML = 'Add compression';
-
-    source.disconnect(compressor);
-    compressor.disconnect(audioCtx.destination);
-    source.connect(audioCtx.destination);
-  }
-}
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/creategain/index.html b/files/ja/web/api/audiocontext/creategain/index.html deleted file mode 100644 index c536a0621c..0000000000 --- a/files/ja/web/api/audiocontext/creategain/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: AudioContext.createGain() -slug: Web/API/AudioContext/createGain -translation_of: Web/API/BaseAudioContext/createGain ---- -

{{ APIRef("Web Audio API") }}

- -
-

インターフェースのcreateGain()メソッドは、音声の全体的なボリュームを操作する{{ domxref("GainNode") }}を生成します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var gainNode = audioCtx.createGain();
- -

戻り値

- -

{{domxref("GainNode")}}

- -

例

- -

次の例では{{domxref("AudioContext")}}、GainNodeを生成する基本的な使い方を示しています。生成したGainNodeは、Muteボタンを押したときにgainプロパティの値を設定することで、無音・無音解除するために使っています。完全な例と情報は、Voice-change-O-maticデモ(ソースの閲覧)をクリックしてください。

- -
<div>
-  <a class="mute">Mute button</a>
-</div>
- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var gainNode = audioCtx.createGain();
-var mute = document.querySelector('.mute');
-
-source.connect(gainNode);
-gainNode.connect(audioCtx.destination);
-
-  ...
-
-mute.onclick = voiceMute;
-
-function voiceMute() {
-  if(mute.id == "") {
-    gainNode.gain.value = 0;
-    mute.id = "activated";
-    mute.innerHTML = "Unmute";
-  } else {
-    gainNode.gain.value = 1;
-    mute.id = "";
-    mute.innerHTML = "Mute";
-  }
-}
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createoscillator/index.html b/files/ja/web/api/audiocontext/createoscillator/index.html deleted file mode 100644 index e971400f5d..0000000000 --- a/files/ja/web/api/audiocontext/createoscillator/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: AudioContext.createOscillator() -slug: Web/API/AudioContext/createOscillator -translation_of: Web/API/BaseAudioContext/createOscillator ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateOscillator()メソッドは、周期的な波形を発生源である{{ domxref("OscillatorNode") }}を生成します。これは基礎的な音源です。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var oscillator = audioCtx.createOscillator();
- -

戻り値

- -

{{domxref("OscillatorNode")}}

- -

例

- -

次の例はオシレーターノードを生成する基礎的なAudioContextの使い方を示しています。例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。また、{{ domxref("OscillatorNode") }}にはより詳細な情報があります。

- -
// webオーディオAPIコンテキストを生成する
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-
-// オシレーターノードを生成する
-var oscillator = audioCtx.createOscillator();
-
-oscillator.type = 'square';
-oscillator.frequency.value = 3000; // 値はHz(ヘルツ)
-oscillator.start();
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createpanner/index.html b/files/ja/web/api/audiocontext/createpanner/index.html deleted file mode 100644 index 1b30c60a03..0000000000 --- a/files/ja/web/api/audiocontext/createpanner/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: AudioContext.createPanner() -slug: Web/API/AudioContext/createPanner -translation_of: Web/API/BaseAudioContext/createPanner ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }} の createPanner() を利用すると、新しい {{domxref("PannerNode")}} を作成できます。これは空間音響を実現するために利用されます。

- -

作成された PannerNode は、音声の聴取者の位置と向きから空間的な再生を行います。聴取者の位置と向きは、 {{domxref("AudioListener") }} オブジェクトとして表現され、{{domxref("AudioContext.listener") }} で参照できます。

-
- -

記法

- -
var audioCtx = new AudioContext();
-var panner = audioCtx.createPanner();
- -

返り値

- -

{{domxref("PannerNode")}} を返します。

- -

利用例

- -

以下の例では、createPanner() メソッドの利用方法と、 {{domxref("AudioListener")}} と{{domxref("PannerNode")}} による空間音響のコントロール方法について解説します。一般的には、聴取者と音源の 3 次元空間上での位置を決め、アプリケーションの動きに合わせてそれらを更新することになります。これを利用することで、キャラクターが世界の中を動き回るようなゲームで、近づくと聞こえ、遠ざかると聞こえなくなるステレオを実現できます。 以下の例では moveRight() や moveLeft()、PositionPanner() などを利用して、位置をコントロールしています。

- -

完全な実装例は panner-node example (ソースコード) を確認してください。このデモでは 2.5 次元上の「メタルの部屋」上で、曲を再生するラジカセの位置を変更させることで変化する音声を体験できます。

- -

付記：以下の例では比較的新しい属性を利用するために、ブラウザの機能を調べています。例えば位置を設定する {{domxref("AudioListener.forwardX")}}) などです。これらが利用できる場合は利用し、そうでない場合は{{domxref("AudioListener.setOrientation()")}}) のような古いメソッドを利用しています。

- -
// set up listener and panner position information
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
-
-var xPos = Math.floor(WIDTH/2);
-var yPos = Math.floor(HEIGHT/2);
-var zPos = 295;
-
-// define other variables
-
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var panner = audioCtx.createPanner();
-panner.panningModel = 'HRTF';
-panner.distanceModel = 'inverse';
-panner.refDistance = 1;
-panner.maxDistance = 10000;
-panner.rolloffFactor = 1;
-panner.coneInnerAngle = 360;
-panner.coneOuterAngle = 0;
-panner.coneOuterGain = 0;
-
-if(panner.orientationX) {
-  panner.orientationX.value = 1;
-  panner.orientationY.value = 0;
-  panner.orientationZ.value = 0;
-} else {
-  panner.setOrientation(1,0,0);
-}
-
-var listener = audioCtx.listener;
-
-if(listener.forwardX) {
-  listener.forwardX.value = 0;
-  listener.forwardY.value = 0;
-  listener.forwardZ.value = -1;
-  listener.upX.value = 0;
-  listener.upY.value = 1;
-  listener.upZ.value = 0;
-} else {
-  listener.setOrientation(0,0,-1,0,1,0);
-}
-
-var source;
-
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-var boomBox = document.querySelector('.boom-box');
-
-var listenerData = document.querySelector('.listener-data');
-var pannerData = document.querySelector('.panner-data');
-
-leftBound = (-xPos) + 50;
-rightBound = xPos - 50;
-
-xIterator = WIDTH/150;
-
-// listener will always be in the same place for this demo
-
-if(listener.positionX) {
-  listener.positionX.value = xPos;
-  listener.positionY.value = yPos;
-  listener.positionZ.value = 300;
-} else {
-  listener.setPosition(xPos,yPos,300);
-}
-
-listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
-
-// panner will move as the boombox graphic moves around on the screen
-function positionPanner() {
-  if(panner.positionX) {
-    panner.positionX.value = xPos;
-    panner.positionY.value = yPos;
-    panner.positionZ.value = zPos;
-  } else {
-    panner.setPosition(xPos,yPos,zPos);
-  }
-  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}
- -
-

listener と panner に設定された位置が正しく機能するためには、それらがスクリーン上の位置を正しく反映している必要があります。そのためには少し面倒な計算が必要となりますが、すこしやれば慣れる類のものです。

-
- -

仕様

- - - - - - - - - - - - - - -
仕様状況コメント
{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザー互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

関連情報

- - diff --git a/files/ja/web/api/audiocontext/createperiodicwave/index.html b/files/ja/web/api/audiocontext/createperiodicwave/index.html deleted file mode 100644 index 825a1a8de5..0000000000 --- a/files/ja/web/api/audiocontext/createperiodicwave/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: AudioContext.createPeriodicWave() -slug: Web/API/AudioContext/createPeriodicWave -translation_of: Web/API/BaseAudioContext/createPeriodicWave ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreatePeriodicWave()メソッドは、周期的な波形を定義するために使われる{{domxref("PeriodicWave")}}を生成します。これは{{ domxref("OscillatorNode") }}の出力を決めるために使われます。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var wave = audioCtx.createPeriodicWave(real, imag);
- -

戻り値

- -

{{domxref("PeriodicWave")}}

- -

引数

- -
-
real
-
余弦項の配列 (伝統的なA項)
-
imag
-
正弦項の配列 (伝統的なB項)
-
- -

例

- -

The following example illustrates simple usage of createPeriodicWave(), to create a {{domxref("PeriodicWave")}} object containing a simple sine wave.

- -
var real = new Float32Array(2);
-var imag = new Float32Array(2);
-var ac = new AudioContext();
-var osc = ac.createOscillator();
-
-real[0] = 0;
-imag[0] = 0;
-real[1] = 1;
-imag[1] = 0;
-
-var wave = ac.createPeriodicWave(real, imag);
-
-osc.setPeriodicWave(wave);
-
-osc.connect(ac.destination);
-
-osc.start();
-osc.stop(2);
- -

This works because a sound that contains only a fundamental tone is by definition a sine wave.
-
- Here, we create a PeriodicWave with two values. The first value is the DC offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range.

- -

The second and subsequent values are sine and cosine components. You can think of it as the result of a Fourier transform, where you get frequency domain values from time domain value. Here, with createPeriodicWave(), you specify the frequencies, and the browser performs a an inverse Fourier transform to get a time domain buffer for the frequency of the oscillator. Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

- -

The coefficients of the Fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}   etc.) and can be positive or negative.  A simple way of manually obtaining such coefficients (though not the best) is to use a graphing calculator.

- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createPeriodicWave-PeriodicWave-Float32Array-real-Float32Array-imag', 'createPeriodicWave')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/createscriptprocessor/index.html b/files/ja/web/api/audiocontext/createscriptprocessor/index.html deleted file mode 100644 index d3c80ae2cb..0000000000 --- a/files/ja/web/api/audiocontext/createscriptprocessor/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: AudioContext.createScriptProcessor() -slug: Web/API/AudioContext/createScriptProcessor -translation_of: Web/API/BaseAudioContext/createScriptProcessor ---- -

{{ APIRef("AudioContext") }}

-
-

{{ domxref("AudioContext") }} の createScriptProcessor() メソッドを利用することで、ダイレクトな音声処理ができる {{domxref("ScriptProcessorNode")}} オブジェクトを作成できます。

-
-
-

注意: このノードの利用方法に関しては {{domxref("ScriptProcessorNode")}} をご覧ください。

-
-

構文

-
 ScriptProcessorNode             createScriptProcessor (optional unsigned long bufferSize = 0 , optional unsigned long numberOfInputChannels = 2 , optional unsigned long numberOfOutputChannels = 2 );
-

例

-

createScriptProcessor()の利用例は以下の通りになります。Web Audio API が提供する機能では望む音声処理を実現できない場合に、このメソッドを利用します。これを利用することで、どの様な音声処理でも記述できます。

-
SineWave = function(context) {
-  var that = this;
-  this.x = 0; // Initial sample number
-  this.context = context;
-  this.node = context.createScriptProcessor(1024, 1, 1);
-  this.node.onaudioprocess = function(e) { that.process(e) };
-}
-
-SineWave.prototype.process = function(e) {
-  var data = e.outputBuffer.getChannelData(0);
-  for (var i = 0; i < data.length; ++i) {
-    data[i] = Math.sin(this.x++);
-  }
-}
-
-SineWave.prototype.play = function() {
-  this.node.connect(this.context.destination);
-}
-
-SineWave.prototype.pause = function() {
-  this.node.disconnect();
-}
-

引数

-
-
- bufferSize
-
- サンプルフレームを単位としたバッファのサイズです。指定する場合は、次のいずれかの値でなくてはなりません: 256, 512, 1024, 2048, 4096, 8192, 16384 。指定されない場合、もしくは 0 が指定された場合、環境における最適な値が設定されます。この値はノードが生存する限り同じ値が利用され、その値は 2 の冪上です。
-
- この値は audioprocess イベントの発生頻度と、イベントごとに渡されるサンプルフレームの大きさを決めます。小さい値を指定すると低遅延となり、大きな値を指定すると音声の破損やグリッチを避けられます。この値は自分で決めず、実装に決めさせることが遅延と品質の面から推奨されます。
-
- numberOfInputChannels
-
- 入力のチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
-
- numberOfOutputChannels
-
- 出力するチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
-
-
-

Important: Webkit currently (version 31) requires that a valid bufferSize be passed when calling this method.

-
-
-

注意: numberOfInputChannels と numberOfOutputChannels の両方に 0 を指定することはできません。

-
-

返り値

-

A {{domxref("ScriptProcessorNode")}}.

-

ブラウザ互換性

-

{{page("/en-US/docs/Web/API/AudioContext","Browser_compatibility")}}

-

仕様

-

{{page("/en-US/docs/Web/API/AudioContext","Specifications")}}

-

関連情報

-

{{page("/en-US/docs/Web/API/AudioContext","See_also")}}

diff --git a/files/ja/web/api/audiocontext/createstereopanner/index.html b/files/ja/web/api/audiocontext/createstereopanner/index.html deleted file mode 100644 index c77689aa90..0000000000 --- a/files/ja/web/api/audiocontext/createstereopanner/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: AudioContext.createStereoPanner() -slug: Web/API/AudioContext/createStereoPanner -translation_of: Web/API/BaseAudioContext/createStereoPanner ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcreateStereoPanner()メソッドは、音源にステレオパンニングを適用する{{ domxref("StereoPannerNode") }}を生成します。入力されたオーディオストリームは、低コストなequal-powerパンニングアルゴリズムで位置が決められます。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var panNode = audioCtx.createStereoPanner();
- -

戻り値

- -

{{domxref("StereoPannerNode")}}

- -

例

- -

このStereoPannerNodeサンプル(ソースコード)のHTMLには、{{htmlelement("audio")}}要素と、パン値を増減させるスライダー{{domxref("input")}}しかありません。JavaScpriptでは、{{domxref("MediaElementAudioSourceNode")}}と{{domxref("StereoPannerNode")}}を生成し、この2つをconnect()メソッドで接続しています。そして、スライダーを動かすと、oninputイベントハンドラで{{domxref("StereoPannerNode.pan")}}パラメータの値を変更し、ディスプレイのパン値を更新しています。

- -

スライダーを左から右に動かすと、音楽のスピーカーからの出力が左から右にパンされます。

- -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var myAudio = document.querySelector('audio');
-
-var panControl = document.querySelector('.panning-control');
-var panValue = document.querySelector('.panning-value');
-
-pre.innerHTML = myScript.innerHTML;
-
-// MediaElementAudioSourceNodeを生成し、そこにHTMLMediaElementを入れる
-var source = audioCtx.createMediaElementSource(myAudio);
-
-// ステレオパンナーを生成する
-var panNode = audioCtx.createStereoPanner();
-
-// イベントハンドラ関数で、スライダーが動いたとき左右のパンの値を左右する
-
-panControl.oninput = function() {
-  panNode.pan.value = panControl.value;
-  panValue.innerHTML = panControl.value;
-}
-
-// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
-// これでこのコントロールで音楽をパンを調整することができる
-source.connect(panNode);
-panNode.connect(audioCtx.destination);
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createStereoPanner-StereoPannerNode', 'createStereoPanner()')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}37.02.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/currenttime/index.html b/files/ja/web/api/audiocontext/currenttime/index.html deleted file mode 100644 index 0d2a92b3ea..0000000000 --- a/files/ja/web/api/audiocontext/currenttime/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: AudioContext.currentTime -slug: Web/API/AudioContext/currentTime -translation_of: Web/API/BaseAudioContext/currentTime ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのcurrentTime読み取り専用プロパティは、再生、タイムラインの可視化などのスケジューリングで使用できる単純増加するハードウェア時間をdoubleの秒数で返します。0から始まります。

-
- -

構文

- -
var audioCtx = new AudioContext();
-console.log(audioCtx.currentTime);
- -

値

- -

double

- -

例

- -
-

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.currentTimeをあなたのブラウザで使ってみてください。

-
- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// 古いwebkit/blinkブラウザではプレフィックスが必要です
-
-...
-
-console.log(audioCtx.currentTime);
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/decodeaudiodata/index.html b/files/ja/web/api/audiocontext/decodeaudiodata/index.html deleted file mode 100644 index db9c106e52..0000000000 --- a/files/ja/web/api/audiocontext/decodeaudiodata/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: AudioContext.decodeAudioData() -slug: Web/API/AudioContext/decodeAudioData -tags: - - API - - Audio - - AudioContext - - BaseAudioContext - - Method - - Reference - - Web Audio API - - decodeAudioData -translation_of: Web/API/BaseAudioContext/decodeAudioData ---- -

{{ APIRef("Web Audio API") }}

- -

decodeAudioData() は {{ domxref("BaseAudioContext") }} のメソッドで、 {{domxref("ArrayBuffer")}} に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 ArrayBuffer は {{domxref("XMLHttpRequest")}} と {{domxref("FileReader")}} から読み込まれます。デコードされた {{domxref("AudioBuffer")}} は {{domxref("AudioContext")}} のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

- -

この方法は、オーディオトラックから Web Audio API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。

- -

構文

- -

古いコールバック構文:

- -
baseAudioContext.decodeAudioData(ArrayBuffer, successCallback, errorCallback);
- -

新しいプロミスベースの構文:

- -
Promise<decodedData> baseAudioContext.decodeAudioData(ArrayBuffer);
- -

引数

- -
-
ArrayBuffer
-
デコードする音声データが入った ArrayBuffer です。通常は{{domxref("XMLHttpRequest")}}, {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, {{domxref("FileReader")}} から取得します。
-
successCallback
-
デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は1つで、 decodedData (デコードされた PCM 音声データ) を表す {{domxref("AudioBuffer")}} です。通常は、デコードされたデータを {{domxref("AudioBufferSourceNode")}} に入れて、そこから再生したり、好きなように操作したりすることができます。
-
errorCallback
-
任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。
-
- -

返値

- -

なし、または decodedData で満足する {{domxref("Promise") }} オブジェクトで.

- -

例

- -

ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。

- -

古いコールバックベースの構文

- -

この例では、 getData() 関数は XHR を使用して音声トラックを読み込み、リクエストの responseType を arraybuffer に設定して、レスポンスとして配列バッファーを返すようにして、それを audioData 変数に格納しています。それからこのバッファーを decodeAudioData() 関数に渡します。成功したコールバックは、デコードに成功した PCM データを受け取り、 {{ domxref("AudioContext.createBufferSource()") }} で作成した {{ domxref("AudioBufferSourceNode") }} に入れ、ソースを {{domxref("AudioContext.destination") }} に接続してループするように設定します。

- -

ボタンは単に getData() を実行して、それぞれトラックの読み込みと再生、停止を行うだけです。ソースの stop() メソッドが呼ばれると、ソースは消滅します。

- -
-

注: ライブ例の実行 (またはソースの閲覧) もできます。

-
- -
// 変数の定義
-
-var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
-var source;
-
-var pre = document.querySelector('pre');
-var myScript = document.querySelector('script');
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-// 音声トラックの読み込みには XHR を使い、
-// decodeAudioData でデコードし、バッファーに格納する
-// そして、そのバッファーを source に設定する
-
-function getData() {
-  source = audioCtx.createBufferSource();
-  var request = new XMLHttpRequest();
-
-  request.open('GET', 'viper.ogg', true);
-
-  request.responseType = 'arraybuffer';
-
-
-  request.onload = function() {
-    var audioData = request.response;
-
-    audioCtx.decodeAudioData(audioData, function(buffer) {
-        source.buffer = buffer;
-
-        source.connect(audioCtx.destination);
-        source.loop = true;
-      },
-
-      function(e){ console.log("Error with decoding audio data" + e.err); });
-
-  }
-
-  request.send();
-}
-
-// 音声の停止と再生を行うボタン
-
-play.onclick = function() {
-  getData();
-  source.start(0);
-  play.setAttribute('disabled', 'disabled');
-}
-
-stop.onclick = function() {
-  source.stop(0);
-  play.removeAttribute('disabled');
-}
-
-
-// pre要素にスクリプトを設定する
-
-pre.innerHTML = myScript.innerHTML;
- -

新しいプロミスベースの構文

- -
ctx.decodeAudioData(audioData).then(function(decodedData) {
- // デコードしたデータをここで使う
-});
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様状態備考
{{SpecName('Web Audio API', '#dom-baseaudiocontext-decodeaudiodata', 'decodeAudioData()')}}{{Spec2('Web Audio API')}}
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.BaseAudioContext.decodeAudioData")}}

-
- -

関連情報

- - diff --git a/files/ja/web/api/audiocontext/destination/index.html b/files/ja/web/api/audiocontext/destination/index.html deleted file mode 100644 index f93e8682f1..0000000000 --- a/files/ja/web/api/audiocontext/destination/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: AudioContext.destination -slug: Web/API/AudioContext/destination -translation_of: Web/API/BaseAudioContext/destination ---- -

{{ APIRef("Web Audio API") }}

- -
-

インターフェースのdestinationプロパティは、コンテキストの全ての音声の最終的な行き先を表す{{ domxref("AudioDestinationNode") }} を戻します。これは、あなたのコンピュータのスピーカーのような、オーディオレンダリングデバイスと考えることができます。

-
- -

構文

- -
var audioCtx = new AudioContext();
-gainNode.connect(audioCtx.destination);
- -

値

- -

{{ domxref("AudioDestinationNode") }}

- -

例

- -
-

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。

-
- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// 古いwebkit/blinkブラウザではプレフィックスが必要です
-
-var oscillatorNode = audioCtx.createOscillator();
-var gainNode = audioCtx.createGain();
-
-oscillatorNode.connect(gainNode);
-gainNode.connect(audioCtx.destination);
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-destination', 'destination')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/listener/index.html b/files/ja/web/api/audiocontext/listener/index.html deleted file mode 100644 index 7b4f394727..0000000000 --- a/files/ja/web/api/audiocontext/listener/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: AudioContext.listener -slug: Web/API/AudioContext/listener -translation_of: Web/API/BaseAudioContext/listener ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのlistenerプロパティは、3次元音声を実装するために使う{{ domxref("AudioListener") }}オブジェクトを返します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var myListener = audioCtx.listener;
- -

値

- -

{{ domxref("AudioListener") }}

- -

例

- -
-

注: 完全な実装の例は、panner-nodeを参照してください。

-
- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// 古いwebkit/blinkブラウザではプレフィックスが必要です
-
-...
-
-var myListener = audioCtx.listener;
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-listener', 'listener')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html b/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html deleted file mode 100644 index 62f6879ebe..0000000000 --- a/files/ja/web/api/audiocontext/mozaudiochanneltype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: AudioContext.mozAudioChannelType -slug: Web/API/AudioContext/mozAudioChannelType -translation_of: Web/API/AudioContext/mozAudioChannelType ---- -

{{APIRef("Web Audio API")}} {{Non-standard_header}}

- -

{{domxref("AudioContext")}}インターフェースのmozAudioChannelType読み取り専用プロパティは、Firefox OS デバイスで、オーディオコンテキスト要素で再生される音声を再生するオーディオチャンネルを設定するために使えます。

- -

これはAudioChannels APIに定義された非標準のプロパティです。詳細はUsing the AudioChannels APIを参照してください。

- -

構文

- -
var audioCtx = new AudioContext();
-var myAudioChannelType = audioCtx.mozAudioChannelType;
-
- -

AudioContextのオーディオチャンネルタイプを設定できるのは、次のコンストラクタを使う場合のみです。

- -
var audioCtx = new AudioContext('ringer');
- -

値

- -

{{domxref("DOMString")}}

- -

例

- -

TBD

- -

仕様

- -

現在はAudioChannels APIには公式の仕様はありません。実装、WebIDLなどの詳細はhttps://wiki.mozilla.org/WebAPI/AudioChannelsを参照してください。

- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
General support{{CompatNo}}{{CompatNo}}{{CompatNo}}1.2{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/onstatechange/index.html b/files/ja/web/api/audiocontext/onstatechange/index.html deleted file mode 100644 index 5ce3ecaf26..0000000000 --- a/files/ja/web/api/audiocontext/onstatechange/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: AudioContext.onstatechange -slug: Web/API/AudioContext/onstatechange -translation_of: Web/API/BaseAudioContext/onstatechange ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのonstatechangeプロパティは、{{Event("statechange")}}イベントが発火した(これはオーディオコンテキストの状態が変わったとき発生します)とき呼ばれるイベントハンドラ関数を定義します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-audioCtx.onstatechange = function() { ... };
- -

例

- -

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

- -
audioCtx.onstatechange = function() {
-  console.log(audioCtx.state);
-}
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-onstatechange', 'onstatechange')}}{{Spec2('Web Audio API')}} 
- -

互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(43.0)}}{{CompatGeckoDesktop(40.0)}} {{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/samplerate/index.html b/files/ja/web/api/audiocontext/samplerate/index.html deleted file mode 100644 index 8715d8ae39..0000000000 --- a/files/ja/web/api/audiocontext/samplerate/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: AudioContext.sampleRate -slug: Web/API/AudioContext/sampleRate -translation_of: Web/API/BaseAudioContext/sampleRate ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのsampleRateプロパティは、このオーディオコンテキストの全てのノードで使われるサンプルレート(1秒あたりのサンプル数)を浮動小数点で返します。

-
- -

構文

- -
var audioCtx = new AudioContext();
-var mySampleRate = audioCtx.sampleRate;
- -

値

- -

浮動小数点

- -

例

- -
-

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.sampleRateをあなたのブラウザで使ってみてください。

-
- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-// 古いwebkit/blinkブラウザではプレフィックスが必要です
-
-...
-
-console.log(audioCtx.sampleRate);
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
- 22 (unprefixed)		6.0{{property_prefix("webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
-
- -

参考

- - diff --git a/files/ja/web/api/audiocontext/state/index.html b/files/ja/web/api/audiocontext/state/index.html deleted file mode 100644 index a19d03f9af..0000000000 --- a/files/ja/web/api/audiocontext/state/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: AudioContext.state -slug: Web/API/AudioContext/state -translation_of: Web/API/BaseAudioContext/state ---- -

{{ APIRef("Web Audio API") }}

- -
-

{{ domxref("AudioContext") }}インターフェースのstate読取専用プロパティは、現在のAudioContextの状態を返します。

-
- -

構文

- -
baseAudioContext.state;
- -

値

- -

{{domxref("DOMString")}}。取りうる値は:

- -
    -
  • suspended: オーディオコンテキストは({{domxref("AudioContext.suspend()")}}によって)一時停止中
    • -
  • running: オーディオコンテキストは通常動作中
    • -
  • closed: オーディオコンテキストは({{domxref("AudioContext.close()")}}によって)閉じられた
    • -
- -

例

- -

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

- -
audioCtx.onstatechange = function() {
-  console.log(audioCtx.state);
-}
-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-state', 'state')}}{{Spec2('Web Audio API')}} 
- -

ブラウザ互換性

- -
-
- - -

{{Compat("api.BaseAudioContext.state")}}

-
-
- -

参考

- - diff --git a/files/ja/web/api/audioscheduledsourcenode/onended/index.html b/files/ja/web/api/audioscheduledsourcenode/onended/index.html new file mode 100644 index 0000000000..22f8b05ba3 --- /dev/null +++ b/files/ja/web/api/audioscheduledsourcenode/onended/index.html @@ -0,0 +1,108 @@ +--- +title: AudioBufferSourceNode.onended +slug: Web/API/AudioBufferSourceNode/onended +translation_of: Web/API/AudioScheduledSourceNode/onended +translation_of_original: Web/API/AudioBufferSourceNode/onended +--- +

{{ APIRef("AudioBufferSourceNode") }}

+ +
AudioBufferSourceNodeの onended イベントハンドラーは{{event("ended_(Web_Audio)", "ended")}} イベントに関するコ−ルバック関数を格納します。これによりオーディオトラックの再生終了時に実行するコードを設定することができます。
+ +
+

注: onended ハンドラーは loop プロパティーがtrueに設定されている場合はオーディオが再生終了することが無いので効果がありません。このような場合にこの機能を有効にするには {{ domxref("AudioBufferSourceNode.stop()") }}　を使用してください。

+
+ +

構文

+ +
var source = audioCtx.createBufferSource();
+source.onended = function() { ... };
+
+ +

用例

+ +
source.start();
+source.onended = function() {
+  console.log('Your audio has finished playing');
+}
+ +

プロパティ

+ +

有りません。

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-onended', 'onended')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザー互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/audioscheduledsourcenode/stop/index.html b/files/ja/web/api/audioscheduledsourcenode/stop/index.html new file mode 100644 index 0000000000..2163d86379 --- /dev/null +++ b/files/ja/web/api/audioscheduledsourcenode/stop/index.html @@ -0,0 +1,120 @@ +--- +title: AudioBufferSourceNode.stop() +slug: Web/API/AudioBufferSourceNode/stop +translation_of: Web/API/AudioScheduledSourceNode/stop +translation_of_original: Web/API/AudioBufferSourceNode/stop +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのstop()メソッドは、オーディオバッファの再生を停止させるために使われます。

+
+ +

構文

+ +
var source = audioCtx.createBufferSource();
+source.stop(when);
+
+ +

例

+ +

最も単純なオーディオバッファ再生の停止方法—この場合は何もパラメータを指定する必要はありません。

+ +
source.stop();
+ +

しばらく後に停止させたい場合は、引数として秒数を指定します。

+ +
source.stop(3);
+ +
+

注: stop()の使い方の完全な例はAudioContext.decodeAudioDataを参照してください。コードをすぐに実行することや、ソースコードを閲覧することもできます。

+
+ +

引数

+ +
+
when
+
whenパラメータは、再生をいつ停止するかを決定します。指定の時間を経過すると、再生はすぐに停止します。このメソッドが2回以上呼ばれると、例外が発生します
+
+ +

戻り値

+ +

なし

+ +

使用

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-stop-void-double-when', 'stop()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support14 {{property_prefix("webkit")}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}28 {{property_prefix("webkit")}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createanalyser/index.html b/files/ja/web/api/baseaudiocontext/createanalyser/index.html new file mode 100644 index 0000000000..c186d1029c --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createanalyser/index.html @@ -0,0 +1,154 @@ +--- +title: AudioContext.createAnalyser() +slug: Web/API/AudioContext/createAnalyser +translation_of: Web/API/BaseAudioContext/createAnalyser +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateAnalyser()メソッドは、音声の時間と周波数を解析する{{ domxref("AnalyserNode") }}を生成します。これはデータの可視化などで使えます。

+
+ +
+

注: このノードの詳しい説明は、{{domxref("AnalyserNode")}}のページを参照してください。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var analyser = audioCtx.createAnalyser();
+ +

戻り値

+ +

{{domxref("AnalyserNode")}}

+ +

例

+ +

次のサンプルでは、基本的なAudioContextのAnalyserNodeの生成、requestAnimationFrame()による時間データの周期的な収集と「オシロスコープのように」現在の音声を出力する方法を示しています。より完全な例と情報は、Voice-change-O-maticデモ(app.jsの128–205行目)を参照してください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+
+  ...
+
+analyser.fftSize = 2048;
+var bufferLength = analyser.fftSize;
+var dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// 現在の音のオシロスコープのように描く
+
+function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createAnalyser-AnalyserNode', 'createAnalyser()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html new file mode 100644 index 0000000000..136557bea5 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -0,0 +1,126 @@ +--- +title: AudioContext.createBiquadFilter() +slug: Web/API/AudioContext/createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateBiquadFilter()メソッドは、いくつかの一般的なフィルタを設定できる二次フィルターを表す{{ domxref("BiquadFilterNode") }}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var biquadFilter = audioCtx.createBiquadFilter();
+ +

戻り値

+ +

{{domxref("BiquadFilterNode")}}

+ +

例

+ +

次の例はAudioContextのBiquadFilterNodeの使い方を説明しています。完全に動作する例は、voice-change-o-maticデモ(ソースコードもあります)を参照してください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// このアプリで使う2つのノードを設定する
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+var convolver = audioCtx.createConvolver();
+
+// ノードを接続する
+
+source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(biquadFilter);
+biquadFilter.connect(convolver);
+convolver.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+// 二次フィルターで操作する
+
+biquadFilter.type = "lowshelf";
+biquadFilter.frequency.value = 1000;
+biquadFilter.gain.value = 25;
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBiquadFilter-BiquadFilterNode', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/baseaudiocontext/createbuffer/index.html b/files/ja/web/api/baseaudiocontext/createbuffer/index.html new file mode 100644 index 0000000000..e94a5a18be --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createbuffer/index.html @@ -0,0 +1,174 @@ +--- +title: AudioContext.createBuffer() +slug: Web/API/AudioContext/createBuffer +translation_of: Web/API/BaseAudioContext/createBuffer +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateBuffer()メソッドは、新規の空の{{ domxref("AudioBuffer") }}オブジェクトを生成します。そこにデータを書きこめば、{{ domxref("AudioBufferSourceNode") }}で再生できます。

+
+ +
+

Note: createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution. The asynchronous method decodeAudioData() does the same thing — takes compressed audio, say, an MP3 file, and directly gives you back an {{ domxref("AudioBuffer") }} that you can then set to play via in an {{ domxref("AudioBufferSourceNode") }}. For simple uses like playing an MP3, decodeAudioData() is what you should be using.

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(numOfChannels, length, sampleRate);
+ +

引数

+ +
+

Note: For an in-depth explanation of how audio buffers work, and what these parameters mean, read Audio buffers: frames, samples and channels from our Basic concepts guide.

+
+ +
+
numOfChannels
+
integerで現されたバッファのチャンネルの数。実装は少なくとも32チャンネルに対応している
+
length
+
integerで表されたバッファのサンプルフレームの数
+
sampleRate
+
1秒あたりのサンプルフレームの数。実装は少なくとも22050から96000の範囲に対応している
+
+ +

戻り値

+ +

{{domxref("AudioBuffer")}}

+ +

例

+ +

まずは2つの小さな例で、引数をどのように設定するかを説明します:

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(2, 22050, 44100);
+ +

このようにすると、ステレオ(2チャンネル)のバッファが生成され、44100Hz(極めて一般的で、多くの通常のサウンドカードはこのレートで動作します)のAudioContextで再生すると、0.5秒間(22050フレーム / 44100Hz )となります。

+ +
var audioCtx = new AudioContext();
+var buffer = audioCtx.createBuffer(1, 22050, 22050);
+ +

このようにすると、モノラル(1チャンネル)のバッファが生成され、44100HzのAudioContextで再生すると、自動的に44100Hzに再サンプリングされ(そして結果として44100フレームとなり)、1秒間(44100フレーム / 44100Hz)となります。

+ +
+

Note: audio resampling is very similar to image resizing: say you've got a 16 x 16 image, but you want it to fill a 32x32 area: you resize (resample) it. the result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, and the resized image takes up less space. Resampled audio is exactly the same — you save space, but in practice you will be unable to properly reproduce high frequency content (treble sound).

+
+ +

次は少し複雑なcreateBuffer()の例を見てみましょう。2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コードをすぐに実行することや、ソースコードを閲覧することもできます。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// ステレオ
+var channels = 2;
+// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(channels, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // バッファにホワイトノイズを書き込む;
+  // 単なる-1.0から1.0の間の乱数の値である
+  for (var channel = 0; channel < channels; channel++) {
+   // 実際のデータの配列を得る
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random()は[0; 1.0]である
+     // 音声は[-1.0; 1.0]である必要がある
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // AudioBufferSourceNodeを得る
+  // これはAudioBufferを再生するときに使うAudioNodeである
+  var source = audioCtx.createBufferSource();
+  // AudioBufferSourceNodeにバッファを設定する
+  source.buffer = myArrayBuffer;
+  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
+  source.connect(audioCtx.destination);
+  // 音源の再生を始める
+  source.start();
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBuffer-AudioBuffer-unsigned-long-numberOfChannels-unsigned-long-length-float-sampleRate', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0 {{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createbuffersource/index.html b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html new file mode 100644 index 0000000000..24f65061c6 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createbuffersource/index.html @@ -0,0 +1,143 @@ +--- +title: AudioContext.createBufferSource() +slug: Web/API/AudioContext/createBufferSource +translation_of: Web/API/BaseAudioContext/createBufferSource +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateBufferSource()メソッドは、{{ domxref("AudioBuffer") }}オブジェクトに書き込まれた音声データを再生する{{ domxref("AudioBufferSourceNode") }}を生成します。{{ domxref("AudioBuffer") }}は{{domxref("AudioContext.createBuffer")}}を使った場合や、{{domxref("AudioContext.decodeAudioData")}}でオーディオトラックをデコードしたときに生成されます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var source = audioCtx.createBufferSource();
+ +

戻り値

+ +

{{domxref("AudioBufferSourceNode")}}

+ +

例

+ +

この例では、2秒間のバッファを生成し、ホワイトノイズを書き込み、{{ domxref("AudioBufferSourceNode") }}で再生します。コメントは何をしているかを簡単に説明しています。

+ +
+

注: コードの実行とソースの閲覧もできます。

+
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var button = document.querySelector('button');
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+
+pre.innerHTML = myScript.innerHTML;
+
+// ステレオ
+var channels = 2;
+// AudioContextのサンプルレートで2秒間の空のステレオバッファを生成する
+var frameCount = audioCtx.sampleRate * 2.0;
+
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+
+button.onclick = function() {
+  // バッファにホワイトノイズを書き込む;
+  // 単なる-1.0から1.0の間の乱数の値である
+  for (var channel = 0; channel < channels; channel++) {
+   // 実際のデータの配列を得る
+   var nowBuffering = myArrayBuffer.getChannelData(channel);
+   for (var i = 0; i < frameCount; i++) {
+     // Math.random()は[0; 1.0]である
+     // 音声は[-1.0; 1.0]である必要がある
+     nowBuffering[i] = Math.random() * 2 - 1;
+   }
+  }
+
+  // AudioBufferSourceNodeを得る
+  // これはAudioBufferを再生するときに使うAudioNodeである
+  var source = audioCtx.createBufferSource();
+  // AudioBufferSourceNodeにバッファを設定する
+  source.buffer = myArrayBuffer;
+  // AudioBufferSourceNodeを出力先に接続すると音声が聞こえるようになる
+  source.connect(audioCtx.destination);
+  // 音源の再生を始める
+  source.start();
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createBufferSource-AudioBufferSourceNode', 'createBufferSource()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html new file mode 100644 index 0000000000..e79b116642 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createchannelmerger/index.html @@ -0,0 +1,133 @@ +--- +title: AudioContext.createChannelMerger() +slug: Web/API/AudioContext/createChannelMerger +translation_of: Web/API/BaseAudioContext/createChannelMerger +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateChannelMerger()メソッドは、複数のオーディオストリームを1つに混合する{{domxref("ChannelMergerNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var merger = audioCtx.createChannelMerger(numberOfInputs);
+ +

引数

+ +
+
numberOfInputs
+
入力オーディオストリームのチャンネルの数。指定がない場合は6になる。
+
+ +

戻り値

+ +

{{domxref("ChannelMergerNode")}}

+ +

例

+ +

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

+ +
var ac = new AudioContext();
+ac.decodeAudioData(someStereoBuffer, function(data) {
+ var source = ac.createBufferSource();
+ source.buffer = data;
+ var splitter = ac.createChannelSplitter(2);
+ source.connect(splitter);
+ var merger = ac.createChannelMerger(2);
+
+ // 左チャンネルのボリュームのみ小さくする
+ var gain = ac.createGain();
+ gain.value = 0.5;
+ splitter.connect(gain, 0);
+
+ // splitterをmergerの2番目の入力にして戻す
+ // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
+ gain.connect(merger, 0, 1);
+ splitter.connect(merger, 1, 0);
+
+ var dest = ac.createMediaStreamDestination();
+
+ // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
+ // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
+ merger.connect(dest);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelMerger-ChannelMergerNode-unsigned-long-numberOfInputs', 'createChannelMerger()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html new file mode 100644 index 0000000000..07444c49d0 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createchannelsplitter/index.html @@ -0,0 +1,133 @@ +--- +title: AudioContext.createChannelSplitter() +slug: Web/API/AudioContext/createChannelSplitter +translation_of: Web/API/BaseAudioContext/createChannelSplitter +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateChannelSplitter()メソッドは、オーディオストリームを個別に処理するためにチャンネルを分離する{{domxref("ChannelSplitterNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var splitter = audioCtx.createChannelSplitter(numberOfOutputs);
+ +

引数

+ +
+
numberOfOutputs
+
入力オーディオストリームを分ける数。引数の指定がなければ6。
+
+ +

Returns

+ +

{{domxref("ChannelSplitterNode")}}

+ +

例

+ +

この例ではステレオトラックを分け、左右のチャンネルをそれぞれ別に処理する方法を示しています。これを使うためには、{{domxref("AudioNode.connect(AudioNode)") }}メソッドの2番目と3番目の引数を使い、接続元と接続先のチャンネルの番号を指定する必要があります。

+ +
var ac = new AudioContext();
+ac.decodeAudioData(someStereoBuffer, function(data) {
+ var source = ac.createBufferSource();
+ source.buffer = data;
+ var splitter = ac.createChannelSplitter(2);
+ source.connect(splitter);
+ var merger = ac.createChannelMerger(2);
+
+ // 左チャンネルのボリュームのみ小さくする
+ var gain = ac.createGain();
+ gain.value = 0.5;
+ splitter.connect(gain, 0);
+
+ // splitterをmergerの2番目の入力にして戻す
+ // ここではチャンネルを入れ替えることで、ステレオ音声の左右を逆にしている
+ gain.connect(merger, 0, 1);
+ splitter.connect(merger, 1, 0);
+
+ var dest = ac.createMediaStreamDestination();
+
+ // ChannelMergerNodeを使ったのでステレオのMediaStreamとなった
+ // webオーディオグラフのWebRTCやMediaRecorderなどに渡す
+ merger.connect(dest);
+});
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createChannelSplitter-ChannelSplitterNode-unsigned-long-numberOfOutputs', 'createChannelSplitter()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createconvolver/index.html b/files/ja/web/api/baseaudiocontext/createconvolver/index.html new file mode 100644 index 0000000000..ae5acf59c8 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createconvolver/index.html @@ -0,0 +1,131 @@ +--- +title: AudioContext.createConvolver() +slug: Web/API/AudioContext/createConvolver +translation_of: Web/API/BaseAudioContext/createConvolver +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateConvolver()メソッドは、音声にリバーブ効果などを適用する{{ domxref("ConvolverNode") }}を生成します。詳細はspec definition of Convolutionを参照してください。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var convolver = audioCtx.createConvolver();
+ +

戻り値

+ +

{{domxref("ConvolverNode")}}

+ +

例

+ +

次の例は畳み込みノードを生成する基礎的なAudioContextの使い方を示しています。まず、畳み込み(インパルス応答)が適用される音声が書き込まれたAudioBufferを生成し、そしてそれに畳み込みを適用します。例ではコンサートホールの群集の短い音声を使っていて、深く音響したリバーブ効果がかかっています。

+ +

例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var convolver = audioCtx.createConvolver();
+
+  ...
+
+// XHRで畳み込みノードのための音声トラックを得る
+
+var soundSource, concertHallBuffer;
+
+ajaxRequest = new XMLHttpRequest();
+ajaxRequest.open('GET', 'concert-crowd.ogg', true);
+ajaxRequest.responseType = 'arraybuffer';
+
+ajaxRequest.onload = function() {
+  var audioData = ajaxRequest.response;
+  audioCtx.decodeAudioData(audioData, function(buffer) {
+      concertHallBuffer = buffer;
+      soundSource = audioCtx.createBufferSource();
+      soundSource.buffer = concertHallBuffer;
+    }, function(e){"Error with decoding audio data" + e.err});
+}
+
+ajaxRequest.send();
+
+  ...
+
+convolver.buffer = concertHallBuffer;
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createConvolver-ConvolverNode', 'createConvolver()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createdelay/index.html b/files/ja/web/api/baseaudiocontext/createdelay/index.html new file mode 100644 index 0000000000..709a8a375b --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createdelay/index.html @@ -0,0 +1,143 @@ +--- +title: AudioContext.createDelay() +slug: Web/API/AudioContext/createDelay +translation_of: Web/API/BaseAudioContext/createDelay +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateDelay()メソッドは、入力音声信号を一定時間遅らせる{{domxref("DelayNode")}}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var synthDelay = audioCtx.createDelay(maxDelayTime);
+ +

引数

+ +
+
maxDelayTime
+
音声信号の最大遅れ時間の秒数。デフォルトは0
+
+ +

戻り値

+ +

{{domxref("DelayNode")}}

+ +

例

+ +

ループする3つの異なる簡単な例を用意しました。create-delayを見てください。(ソースコードも閲覧できます。)ただPlayボタンを押すと、ループはすぐ始まります。スライダーを右に動かしPlayボタンを押すと、待ち時間が挿入され、少し時間が過ぎるまで再生が始まりません。

+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var synthDelay = audioCtx.createDelay(5.0);
+
+  ...
+
+var synthSource;
+
+playSynth.onclick = function() {
+  synthSource = audioCtx.createBufferSource();
+  synthSource.buffer = buffers[2];
+  synthSource.loop = true;
+  synthSource.start();
+  synthSource.connect(synthDelay);
+  synthDelay.connect(destination);
+  this.setAttribute('disabled', 'disabled');
+}
+
+stopSynth.onclick = function() {
+  synthSource.disconnect(synthDelay);
+  synthDelay.disconnect(destination);
+  synthSource.stop();
+  playSynth.removeAttribute('disabled');
+}
+
+...
+
+var delay1;
+rangeSynth.oninput = function() {
+delay1 = rangeSynth.value;
+synthDelay.delayTime.value = delay1;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDelay-DelayNode-double-maxDelayTime', 'createDelay()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参照

+ + diff --git a/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html new file mode 100644 index 0000000000..2fa5ca43ed --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createdynamicscompressor/index.html @@ -0,0 +1,138 @@ +--- +title: AudioContext.createDynamicsCompressor() +slug: Web/API/AudioContext/createDynamicsCompressor +translation_of: Web/API/BaseAudioContext/createDynamicsCompressor +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateDynamicsCompressor()メソッドは、音声信号にコンプレッサーを適用する{{domxref("DynamicsCompressorNode")}}を生成します。

+
+ +

コンプレッサーは、音声信号の最大部分の音量を小さくし、最小部分の音量を大きくします。一般的に、より大きく、豊かで、高密度な音になります。これはゲームや音楽アプリケーションでたくさんの別々の音を同時に再生する場合に特に重要です。このような場合、全体の音量の操作したり、出力音声のクリッピング(ひずみ)を避けたいはずです。

+ +

構文

+ +
var audioCtx = new AudioContext();
+var compressor = audioCtx.createDynamicsCompressor();
+ +

戻り値

+ +

{{domxref("DynamicsCompressorNode")}}

+ +

例

+ +

音声トラックにコンプレッサーを追加するためにcreateDynamicsCompressor()を使う簡単なデモコードです。より完全なサンプルは、basic Compressor example (ソースコードの閲覧)を参照してください。

+ +
// MediaElementAudioSourceNodeを生成する
+// そこにHTMLMediaElementを入れる
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// コンプレッサーノードを生成する
+var compressor = audioCtx.createDynamicsCompressor();
+compressor.threshold.value = -50;
+compressor.knee.value = 40;
+compressor.ratio.value = 12;
+compressor.reduction.value = -20;
+compressor.attack.value = 0;
+compressor.release.value = 0.25;
+
+// AudioBufferSourceNodeを行き先(destination)につなげる
+source.connect(audioCtx.destination);
+
+button.onclick = function() {
+  var active = button.getAttribute('data-active');
+  if(active == 'false') {
+    button.setAttribute('data-active', 'true');
+    button.innerHTML = 'Remove compression';
+
+    source.disconnect(audioCtx.destination);
+    source.connect(compressor);
+    compressor.connect(audioCtx.destination);
+  } else if(active == 'true') {
+    button.setAttribute('data-active', 'false');
+    button.innerHTML = 'Add compression';
+
+    source.disconnect(compressor);
+    compressor.disconnect(audioCtx.destination);
+    source.connect(audioCtx.destination);
+  }
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createDynamicsCompressor-DynamicsCompressorNode', 'createDynamicsCompressor()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/creategain/index.html b/files/ja/web/api/baseaudiocontext/creategain/index.html new file mode 100644 index 0000000000..c536a0621c --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/creategain/index.html @@ -0,0 +1,128 @@ +--- +title: AudioContext.createGain() +slug: Web/API/AudioContext/createGain +translation_of: Web/API/BaseAudioContext/createGain +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのcreateGain()メソッドは、音声の全体的なボリュームを操作する{{ domxref("GainNode") }}を生成します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var gainNode = audioCtx.createGain();
+ +

戻り値

+ +

{{domxref("GainNode")}}

+ +

例

+ +

次の例では{{domxref("AudioContext")}}、GainNodeを生成する基本的な使い方を示しています。生成したGainNodeは、Muteボタンを押したときにgainプロパティの値を設定することで、無音・無音解除するために使っています。完全な例と情報は、Voice-change-O-maticデモ(ソースの閲覧)をクリックしてください。

+ +
<div>
+  <a class="mute">Mute button</a>
+</div>
+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var gainNode = audioCtx.createGain();
+var mute = document.querySelector('.mute');
+
+source.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+  ...
+
+mute.onclick = voiceMute;
+
+function voiceMute() {
+  if(mute.id == "") {
+    gainNode.gain.value = 0;
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1;
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createoscillator/index.html b/files/ja/web/api/baseaudiocontext/createoscillator/index.html new file mode 100644 index 0000000000..e971400f5d --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createoscillator/index.html @@ -0,0 +1,111 @@ +--- +title: AudioContext.createOscillator() +slug: Web/API/AudioContext/createOscillator +translation_of: Web/API/BaseAudioContext/createOscillator +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateOscillator()メソッドは、周期的な波形を発生源である{{ domxref("OscillatorNode") }}を生成します。これは基礎的な音源です。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var oscillator = audioCtx.createOscillator();
+ +

戻り値

+ +

{{domxref("OscillatorNode")}}

+ +

例

+ +

次の例はオシレーターノードを生成する基礎的なAudioContextの使い方を示しています。例と情報の応用は、Voice-change-O-maticデモ(ソースコード)をチェックしてください。また、{{ domxref("OscillatorNode") }}にはより詳細な情報があります。

+ +
// webオーディオAPIコンテキストを生成する
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
+// オシレーターノードを生成する
+var oscillator = audioCtx.createOscillator();
+
+oscillator.type = 'square';
+oscillator.frequency.value = 3000; // 値はHz(ヘルツ)
+oscillator.start();
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createOscillator-OscillatorNode', 'createOscillator')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createpanner/index.html b/files/ja/web/api/baseaudiocontext/createpanner/index.html new file mode 100644 index 0000000000..1b30c60a03 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createpanner/index.html @@ -0,0 +1,198 @@ +--- +title: AudioContext.createPanner() +slug: Web/API/AudioContext/createPanner +translation_of: Web/API/BaseAudioContext/createPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }} の createPanner() を利用すると、新しい {{domxref("PannerNode")}} を作成できます。これは空間音響を実現するために利用されます。

+ +

作成された PannerNode は、音声の聴取者の位置と向きから空間的な再生を行います。聴取者の位置と向きは、 {{domxref("AudioListener") }} オブジェクトとして表現され、{{domxref("AudioContext.listener") }} で参照できます。

+
+ +

記法

+ +
var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();
+ +

返り値

+ +

{{domxref("PannerNode")}} を返します。

+ +

利用例

+ +

以下の例では、createPanner() メソッドの利用方法と、 {{domxref("AudioListener")}} と{{domxref("PannerNode")}} による空間音響のコントロール方法について解説します。一般的には、聴取者と音源の 3 次元空間上での位置を決め、アプリケーションの動きに合わせてそれらを更新することになります。これを利用することで、キャラクターが世界の中を動き回るようなゲームで、近づくと聞こえ、遠ざかると聞こえなくなるステレオを実現できます。 以下の例では moveRight() や moveLeft()、PositionPanner() などを利用して、位置をコントロールしています。

+ +

完全な実装例は panner-node example (ソースコード) を確認してください。このデモでは 2.5 次元上の「メタルの部屋」上で、曲を再生するラジカセの位置を変更させることで変化する音声を体験できます。

+ +

付記：以下の例では比較的新しい属性を利用するために、ブラウザの機能を調べています。例えば位置を設定する {{domxref("AudioListener.forwardX")}}) などです。これらが利用できる場合は利用し、そうでない場合は{{domxref("AudioListener.setOrientation()")}}) のような古いメソッドを利用しています。

+ +
// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.value = 1;
+  panner.orientationY.value = 0;
+  panner.orientationZ.value = 0;
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.value = 0;
+  listener.forwardY.value = 0;
+  listener.forwardZ.value = -1;
+  listener.upX.value = 0;
+  listener.upY.value = 1;
+  listener.upZ.value = 0;
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.value = xPos;
+  listener.positionY.value = yPos;
+  listener.positionZ.value = 300;
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.value = xPos;
+    panner.positionY.value = yPos;
+    panner.positionZ.value = zPos;
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +
+

listener と panner に設定された位置が正しく機能するためには、それらがスクリーン上の位置を正しく反映している必要があります。そのためには少し面倒な計算が必要となりますが、すこしやれば慣れる類のものです。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状況コメント
{{SpecName('Web Audio API', '#widl-AudioContext-createPanner-PannerNode', 'createPanner()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザー互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html new file mode 100644 index 0000000000..825a1a8de5 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createperiodicwave/index.html @@ -0,0 +1,139 @@ +--- +title: AudioContext.createPeriodicWave() +slug: Web/API/AudioContext/createPeriodicWave +translation_of: Web/API/BaseAudioContext/createPeriodicWave +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreatePeriodicWave()メソッドは、周期的な波形を定義するために使われる{{domxref("PeriodicWave")}}を生成します。これは{{ domxref("OscillatorNode") }}の出力を決めるために使われます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var wave = audioCtx.createPeriodicWave(real, imag);
+ +

戻り値

+ +

{{domxref("PeriodicWave")}}

+ +

引数

+ +
+
real
+
余弦項の配列 (伝統的なA項)
+
imag
+
正弦項の配列 (伝統的なB項)
+
+ +

例

+ +

The following example illustrates simple usage of createPeriodicWave(), to create a {{domxref("PeriodicWave")}} object containing a simple sine wave.

+ +
var real = new Float32Array(2);
+var imag = new Float32Array(2);
+var ac = new AudioContext();
+var osc = ac.createOscillator();
+
+real[0] = 0;
+imag[0] = 0;
+real[1] = 1;
+imag[1] = 0;
+
+var wave = ac.createPeriodicWave(real, imag);
+
+osc.setPeriodicWave(wave);
+
+osc.connect(ac.destination);
+
+osc.start();
+osc.stop(2);
+ +

This works because a sound that contains only a fundamental tone is by definition a sine wave.
+
+ Here, we create a PeriodicWave with two values. The first value is the DC offset, which is the value at which the oscillator starts. 0 is good here, because we want to start the curve at the middle of the [-1.0; 1.0] range.

+ +

The second and subsequent values are sine and cosine components. You can think of it as the result of a Fourier transform, where you get frequency domain values from time domain value. Here, with createPeriodicWave(), you specify the frequencies, and the browser performs a an inverse Fourier transform to get a time domain buffer for the frequency of the oscillator. Here, we only set one component at full volume (1.0) on the fundamental tone, so we get a sine wave.

+ +

The coefficients of the Fourier transform should be given in ascending order (i.e. (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}   etc.) and can be positive or negative.  A simple way of manually obtaining such coefficients (though not the best) is to use a graphing calculator.

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createPeriodicWave-PeriodicWave-Float32Array-real-Float32Array-imag', 'createPeriodicWave')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(33.0)}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html new file mode 100644 index 0000000000..d3c80ae2cb --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createscriptprocessor/index.html @@ -0,0 +1,69 @@ +--- +title: AudioContext.createScriptProcessor() +slug: Web/API/AudioContext/createScriptProcessor +translation_of: Web/API/BaseAudioContext/createScriptProcessor +--- +

{{ APIRef("AudioContext") }}

+
+

{{ domxref("AudioContext") }} の createScriptProcessor() メソッドを利用することで、ダイレクトな音声処理ができる {{domxref("ScriptProcessorNode")}} オブジェクトを作成できます。

+
+
+

注意: このノードの利用方法に関しては {{domxref("ScriptProcessorNode")}} をご覧ください。

+
+

構文

+
 ScriptProcessorNode             createScriptProcessor (optional unsigned long bufferSize = 0 , optional unsigned long numberOfInputChannels = 2 , optional unsigned long numberOfOutputChannels = 2 );
+

例

+

createScriptProcessor()の利用例は以下の通りになります。Web Audio API が提供する機能では望む音声処理を実現できない場合に、このメソッドを利用します。これを利用することで、どの様な音声処理でも記述できます。

+
SineWave = function(context) {
+  var that = this;
+  this.x = 0; // Initial sample number
+  this.context = context;
+  this.node = context.createScriptProcessor(1024, 1, 1);
+  this.node.onaudioprocess = function(e) { that.process(e) };
+}
+
+SineWave.prototype.process = function(e) {
+  var data = e.outputBuffer.getChannelData(0);
+  for (var i = 0; i < data.length; ++i) {
+    data[i] = Math.sin(this.x++);
+  }
+}
+
+SineWave.prototype.play = function() {
+  this.node.connect(this.context.destination);
+}
+
+SineWave.prototype.pause = function() {
+  this.node.disconnect();
+}
+

引数

+
+
+ bufferSize
+
+ サンプルフレームを単位としたバッファのサイズです。指定する場合は、次のいずれかの値でなくてはなりません: 256, 512, 1024, 2048, 4096, 8192, 16384 。指定されない場合、もしくは 0 が指定された場合、環境における最適な値が設定されます。この値はノードが生存する限り同じ値が利用され、その値は 2 の冪上です。
+
+ この値は audioprocess イベントの発生頻度と、イベントごとに渡されるサンプルフレームの大きさを決めます。小さい値を指定すると低遅延となり、大きな値を指定すると音声の破損やグリッチを避けられます。この値は自分で決めず、実装に決めさせることが遅延と品質の面から推奨されます。
+
+ numberOfInputChannels
+
+ 入力のチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
+
+ numberOfOutputChannels
+
+ 出力するチャンネル数を整数で指定します。デフォルト値は 2 で、最大 32 チャンネルまでサポートします。
+
+
+

Important: Webkit currently (version 31) requires that a valid bufferSize be passed when calling this method.

+
+
+

注意: numberOfInputChannels と numberOfOutputChannels の両方に 0 を指定することはできません。

+
+

返り値

+

A {{domxref("ScriptProcessorNode")}}.

+

ブラウザ互換性

+

{{page("/en-US/docs/Web/API/AudioContext","Browser_compatibility")}}

+

仕様

+

{{page("/en-US/docs/Web/API/AudioContext","Specifications")}}

+

関連情報

+

{{page("/en-US/docs/Web/API/AudioContext","See_also")}}

diff --git a/files/ja/web/api/baseaudiocontext/createstereopanner/index.html b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html new file mode 100644 index 0000000000..c77689aa90 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/createstereopanner/index.html @@ -0,0 +1,128 @@ +--- +title: AudioContext.createStereoPanner() +slug: Web/API/AudioContext/createStereoPanner +translation_of: Web/API/BaseAudioContext/createStereoPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcreateStereoPanner()メソッドは、音源にステレオパンニングを適用する{{ domxref("StereoPannerNode") }}を生成します。入力されたオーディオストリームは、低コストなequal-powerパンニングアルゴリズムで位置が決められます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var panNode = audioCtx.createStereoPanner();
+ +

戻り値

+ +

{{domxref("StereoPannerNode")}}

+ +

例

+ +

このStereoPannerNodeサンプル(ソースコード)のHTMLには、{{htmlelement("audio")}}要素と、パン値を増減させるスライダー{{domxref("input")}}しかありません。JavaScpriptでは、{{domxref("MediaElementAudioSourceNode")}}と{{domxref("StereoPannerNode")}}を生成し、この2つをconnect()メソッドで接続しています。そして、スライダーを動かすと、oninputイベントハンドラで{{domxref("StereoPannerNode.pan")}}パラメータの値を変更し、ディスプレイのパン値を更新しています。

+ +

スライダーを左から右に動かすと、音楽のスピーカーからの出力が左から右にパンされます。

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var myAudio = document.querySelector('audio');
+
+var panControl = document.querySelector('.panning-control');
+var panValue = document.querySelector('.panning-value');
+
+pre.innerHTML = myScript.innerHTML;
+
+// MediaElementAudioSourceNodeを生成し、そこにHTMLMediaElementを入れる
+var source = audioCtx.createMediaElementSource(myAudio);
+
+// ステレオパンナーを生成する
+var panNode = audioCtx.createStereoPanner();
+
+// イベントハンドラ関数で、スライダーが動いたとき左右のパンの値を左右する
+
+panControl.oninput = function() {
+  panNode.pan.value = panControl.value;
+  panValue.innerHTML = panControl.value;
+}
+
+// AudioBufferSourceNodeをpanNodeに接続し、panNodeを行き先(destination)に接続する
+// これでこのコントロールで音楽をパンを調整することができる
+source.connect(panNode);
+panNode.connect(audioCtx.destination);
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-createStereoPanner-StereoPannerNode', 'createStereoPanner()')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(37.0)}} {{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}37.02.2{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/currenttime/index.html b/files/ja/web/api/baseaudiocontext/currenttime/index.html new file mode 100644 index 0000000000..0d2a92b3ea --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/currenttime/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.currentTime +slug: Web/API/AudioContext/currentTime +translation_of: Web/API/BaseAudioContext/currentTime +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのcurrentTime読み取り専用プロパティは、再生、タイムラインの可視化などのスケジューリングで使用できる単純増加するハードウェア時間をdoubleの秒数で返します。0から始まります。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+console.log(audioCtx.currentTime);
+ +

値

+ +

double

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.currentTimeをあなたのブラウザで使ってみてください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+console.log(audioCtx.currentTime);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-currentTime', 'currentTime')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html new file mode 100644 index 0000000000..db9c106e52 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/decodeaudiodata/index.html @@ -0,0 +1,155 @@ +--- +title: AudioContext.decodeAudioData() +slug: Web/API/AudioContext/decodeAudioData +tags: + - API + - Audio + - AudioContext + - BaseAudioContext + - Method + - Reference + - Web Audio API + - decodeAudioData +translation_of: Web/API/BaseAudioContext/decodeAudioData +--- +

{{ APIRef("Web Audio API") }}

+ +

decodeAudioData() は {{ domxref("BaseAudioContext") }} のメソッドで、 {{domxref("ArrayBuffer")}} に書き込まれた音声ファイルデータを非同期にデコードするために使用されます。この場合、 ArrayBuffer は {{domxref("XMLHttpRequest")}} と {{domxref("FileReader")}} から読み込まれます。デコードされた {{domxref("AudioBuffer")}} は {{domxref("AudioContext")}} のサンプリングレートにリサンプリングされ、コールバックやプロミスに渡されます。

+ +

この方法は、オーディオトラックから Web Audio API 用のオーディオソースを作成する際に推奨される方法です。この方法は、音声ファイルの断片的なデータではなく、完全なファイルデータに対してのみ動作します。

+ +

構文

+ +

古いコールバック構文:

+ +
baseAudioContext.decodeAudioData(ArrayBuffer, successCallback, errorCallback);
+ +

新しいプロミスベースの構文:

+ +
Promise<decodedData> baseAudioContext.decodeAudioData(ArrayBuffer);
+ +

引数

+ +
+
ArrayBuffer
+
デコードする音声データが入った ArrayBuffer です。通常は{{domxref("XMLHttpRequest")}}, {{domxref("WindowOrWorkerGlobalScope.fetch()")}}, {{domxref("FileReader")}} から取得します。
+
successCallback
+
デコードが完了すると呼び出されるコールバック関数です。このコールバックの引数は1つで、 decodedData (デコードされた PCM 音声データ) を表す {{domxref("AudioBuffer")}} です。通常は、デコードされたデータを {{domxref("AudioBufferSourceNode")}} に入れて、そこから再生したり、好きなように操作したりすることができます。
+
errorCallback
+
任意のエラーコールバックで、音声データのデコードでエラーが発生すると呼び出されます。
+
+ +

返値

+ +

なし、または decodedData で満足する {{domxref("Promise") }} オブジェクトで.

+ +

例

+ +

ここでは最初に古いコールバックベースのシステムを、次に新しいプロミスベースの構文を取り上げます。

+ +

古いコールバックベースの構文

+ +

この例では、 getData() 関数は XHR を使用して音声トラックを読み込み、リクエストの responseType を arraybuffer に設定して、レスポンスとして配列バッファーを返すようにして、それを audioData 変数に格納しています。それからこのバッファーを decodeAudioData() 関数に渡します。成功したコールバックは、デコードに成功した PCM データを受け取り、 {{ domxref("AudioContext.createBufferSource()") }} で作成した {{ domxref("AudioBufferSourceNode") }} に入れ、ソースを {{domxref("AudioContext.destination") }} に接続してループするように設定します。

+ +

ボタンは単に getData() を実行して、それぞれトラックの読み込みと再生、停止を行うだけです。ソースの stop() メソッドが呼ばれると、ソースは消滅します。

+ +
+

注: ライブ例の実行 (またはソースの閲覧) もできます。

+
+ +
// 変数の定義
+
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var source;
+
+var pre = document.querySelector('pre');
+var myScript = document.querySelector('script');
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+// 音声トラックの読み込みには XHR を使い、
+// decodeAudioData でデコードし、バッファーに格納する
+// そして、そのバッファーを source に設定する
+
+function getData() {
+  source = audioCtx.createBufferSource();
+  var request = new XMLHttpRequest();
+
+  request.open('GET', 'viper.ogg', true);
+
+  request.responseType = 'arraybuffer';
+
+
+  request.onload = function() {
+    var audioData = request.response;
+
+    audioCtx.decodeAudioData(audioData, function(buffer) {
+        source.buffer = buffer;
+
+        source.connect(audioCtx.destination);
+        source.loop = true;
+      },
+
+      function(e){ console.log("Error with decoding audio data" + e.err); });
+
+  }
+
+  request.send();
+}
+
+// 音声の停止と再生を行うボタン
+
+play.onclick = function() {
+  getData();
+  source.start(0);
+  play.setAttribute('disabled', 'disabled');
+}
+
+stop.onclick = function() {
+  source.stop(0);
+  play.removeAttribute('disabled');
+}
+
+
+// pre要素にスクリプトを設定する
+
+pre.innerHTML = myScript.innerHTML;
+ +

新しいプロミスベースの構文

+ +
ctx.decodeAudioData(audioData).then(function(decodedData) {
+ // デコードしたデータをここで使う
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様状態備考
{{SpecName('Web Audio API', '#dom-baseaudiocontext-decodeaudiodata', 'decodeAudioData()')}}{{Spec2('Web Audio API')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.BaseAudioContext.decodeAudioData")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/baseaudiocontext/destination/index.html b/files/ja/web/api/baseaudiocontext/destination/index.html new file mode 100644 index 0000000000..f93e8682f1 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/destination/index.html @@ -0,0 +1,114 @@ +--- +title: AudioContext.destination +slug: Web/API/AudioContext/destination +translation_of: Web/API/BaseAudioContext/destination +--- +

{{ APIRef("Web Audio API") }}

+ +
+

インターフェースのdestinationプロパティは、コンテキストの全ての音声の最終的な行き先を表す{{ domxref("AudioDestinationNode") }} を戻します。これは、あなたのコンピュータのスピーカーのような、オーディオレンダリングデバイスと考えることができます。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+gainNode.connect(audioCtx.destination);
+ +

値

+ +

{{ domxref("AudioDestinationNode") }}

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+var oscillatorNode = audioCtx.createOscillator();
+var gainNode = audioCtx.createGain();
+
+oscillatorNode.connect(gainNode);
+gainNode.connect(audioCtx.destination);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-destination', 'destination')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/listener/index.html b/files/ja/web/api/baseaudiocontext/listener/index.html new file mode 100644 index 0000000000..7b4f394727 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/listener/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.listener +slug: Web/API/AudioContext/listener +translation_of: Web/API/BaseAudioContext/listener +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのlistenerプロパティは、3次元音声を実装するために使う{{ domxref("AudioListener") }}オブジェクトを返します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var myListener = audioCtx.listener;
+ +

値

+ +

{{ domxref("AudioListener") }}

+ +

例

+ +
+

注: 完全な実装の例は、panner-nodeを参照してください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+var myListener = audioCtx.listener;
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-listener', 'listener')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/onstatechange/index.html b/files/ja/web/api/baseaudiocontext/onstatechange/index.html new file mode 100644 index 0000000000..5ce3ecaf26 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/onstatechange/index.html @@ -0,0 +1,101 @@ +--- +title: AudioContext.onstatechange +slug: Web/API/AudioContext/onstatechange +translation_of: Web/API/BaseAudioContext/onstatechange +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのonstatechangeプロパティは、{{Event("statechange")}}イベントが発火した(これはオーディオコンテキストの状態が変わったとき発生します)とき呼ばれるイベントハンドラ関数を定義します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+audioCtx.onstatechange = function() { ... };
+ +

例

+ +

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

+ +
audioCtx.onstatechange = function() {
+  console.log(audioCtx.state);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-onstatechange', 'onstatechange')}}{{Spec2('Web Audio API')}} 
+ +

互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(43.0)}}{{CompatGeckoDesktop(40.0)}} {{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/samplerate/index.html b/files/ja/web/api/baseaudiocontext/samplerate/index.html new file mode 100644 index 0000000000..8715d8ae39 --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/samplerate/index.html @@ -0,0 +1,112 @@ +--- +title: AudioContext.sampleRate +slug: Web/API/AudioContext/sampleRate +translation_of: Web/API/BaseAudioContext/sampleRate +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのsampleRateプロパティは、このオーディオコンテキストの全てのノードで使われるサンプルレート(1秒あたりのサンプル数)を浮動小数点で返します。

+
+ +

構文

+ +
var audioCtx = new AudioContext();
+var mySampleRate = audioCtx.sampleRate;
+ +

値

+ +

浮動小数点

+ +

例

+ +
+

注: 完全な実装の例は、MDN Github repoのpanner-nodeなどを参照してください。audioCtx.sampleRateをあなたのブラウザで使ってみてください。

+
+ +
var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+// 古いwebkit/blinkブラウザではプレフィックスが必要です
+
+...
+
+console.log(audioCtx.sampleRate);
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-AudioContext-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22 (unprefixed)		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

参考

+ + diff --git a/files/ja/web/api/baseaudiocontext/state/index.html b/files/ja/web/api/baseaudiocontext/state/index.html new file mode 100644 index 0000000000..a19d03f9af --- /dev/null +++ b/files/ja/web/api/baseaudiocontext/state/index.html @@ -0,0 +1,66 @@ +--- +title: AudioContext.state +slug: Web/API/AudioContext/state +translation_of: Web/API/BaseAudioContext/state +--- +

{{ APIRef("Web Audio API") }}

+ +
+

{{ domxref("AudioContext") }}インターフェースのstate読取専用プロパティは、現在のAudioContextの状態を返します。

+
+ +

構文

+ +
baseAudioContext.state;
+ +

値

+ +

{{domxref("DOMString")}}。取りうる値は:

+ +
    +
  • suspended: オーディオコンテキストは({{domxref("AudioContext.suspend()")}}によって)一時停止中
    • +
  • running: オーディオコンテキストは通常動作中
    • +
  • closed: オーディオコンテキストは({{domxref("AudioContext.close()")}}によって)閉じられた
    • +
+ +

例

+ +

次のスニペットはAudioContext states デモの一部です(すぐに実行)。{{domxref("AudioContext.onstatechange")}}ハンドラは、状態が変わるたびにコンソールにログを出力するために使われています。

+ +
audioCtx.onstatechange = function() {
+  console.log(audioCtx.state);
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-state', 'state')}}{{Spec2('Web Audio API')}} 
+ +

ブラウザ互換性

+ +
+
+ + +

{{Compat("api.BaseAudioContext.state")}}

+
+
+ +

参考

+ + diff --git a/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html b/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html deleted file mode 100644 index be09a119f7..0000000000 --- a/files/ja/web/api/canvas_api/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,213 +0,0 @@ ---- -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/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..d8cf43a362 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: 高度なアニメーション +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Canvas + - Graphics + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

前の章では、いくつかの基本的なアニメーションを作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。

+
+ +

ボールを描く

+ +

アニメーションの勉強のために、ボールを使おうと思うので、最初にボールを canvas 上に描きましょう。次のコードは私たちの準備をしてくれるでしょう。

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

普通は、まず描画コンテキストが必要になります。 ボールを描くため、 プロパティと canvas にボールを描くための draw() メソッドを持つ ball オブジェクトを作りましょう。

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

ここでは特別なことはなく、ball は本当に単純な円で、{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} メソッドの助けを借りて描かれています。

+ +

速度の追加

+ +

ボールが手に入りましたので、このチュートリアルの前の章で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e){
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

境界線

+ +

Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the draw method:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

最初のデモ

+ +

これまでで、実際にどのように動くか見てみましょう。canvas にマウスを移動させて、アニメーションを開始してます。

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

加速

+ +

動きをよりリアルにするために、このような速度で再生できます。たとえば：

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

This slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

後引きの効果

+ +

Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect.

+ +
ctx.fillStyle = 'rgba(255,255,255,0.3)';
+ctx.fillRect(0,0,canvas.width,canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

マウスコントロールの追加

+ +

ボールに対するちょっとした制御をするために、たとえば mousemove イベントを使用してボールをマウスの動きに従わせる。といったことができます。click イベントでボールを開放して、またバウンドさせる。といったことも可能です。

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255,255,255,0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e){
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener("click",function(e){
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener("mouseout",function(e){
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

マウスを使ってボールを動かして、クリックで開放してください。

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

ブロック崩し

+ +

This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a Breakout game? Checkout our Game development area for more gaming related articles.

+ +

関連項目

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..c23a5e1ce1 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,725 @@ +--- +title: スタイルと色を適用する +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

「canvas に図形を描く」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。

+
+ +

色

+ +

これまでは描画コンテキストの方法についてのみ見てきました。色を図形に適用するために、"fillStyle"と"strokeStyle"という2つの重要なプロパティを利用することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
図形の塗りつぶしのスタイルを記述する
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
図形のアウトラインのスタイルを記述する。
+
+ +

colorの部分にはCSSでの{{cssxref("<color>")}}表現やグラデーションオブジェクトまたはパターンオブジェクトが入ります。グラデーションオブジェクトとパターンオブジェクトについては後ほど学ぶことにします。 デフォルトでは、輪郭線・塗りつぶしの色は黒に設定されています。 (CSS色では#000000)

+ +
+

注記: strokeStyleおよびfillStyleプロパティを設定すると、その設定した値がデフォルトとなって、それ以降に描かれる図形の線や塗りはその色で行なわれるようになります。それぞれの図形をそれぞれ別の色で描きたい場合は、シェイプを描くごとにstrokeStyleおよびfillStyleプロパティを設定する必要があります。

+
+ +

入力できる有効な文字列は、CSS {{cssxref("<color>")}}表現の値である必要があります。 下記の例では同じ色について説明しています。

+ +
// これらは全てfillStyleにオレンジ色を代入します
+
+ctx.fillStyle = "orange";
+ctx.fillStyle = "#FFA500";
+ctx.fillStyle = "rgb(255,165,0)";
+ctx.fillStyle = "rgba(255,165,0,1)";
+
+ +

プロパティ fillStyle の例

+ +

この例では二重のforループを使って正方形からなるグリッドを作ってみたい。そしてその正方形の一つひとつは違った色になるようにしたい。結果は下のスクリーンショットのようになるだろう。かなり面白い画像ができているだろう。それぞれのブロックで別々な色を表現するために、２つの変数i,jを用いている。変数iは赤成分を、変数jは緑成分を変化させている。青成分は固定されている。By modifying the channels, you can generate all kinds of palettes. By increasing the steps, you can achieve something that looks like the color palettes Photoshop uses.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)}, ${Math.floor(255-42.5*j)}, 0)`;
+      ctx.fillRect(j*25, i*25, 25, 25);
+    }
+  }
+}
+ + + +

結果は以下のようになる:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

プロパティ strokeStyle の例

+ +

This example is similar to the one above, but uses the strokeStyle property to change the colors of the shapes' outlines. We use the arc() method to draw circles instead of squares.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i=0;i<6;i++){
+      for (var j=0;j<6;j++){
+        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
+                         Math.floor(255-42.5*j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

透明度のコントロール

+ +

canvasに不透明な形状を描画するだけでなく、半透明の形状を描画することもできます。 これは、globalAlphaプロパティを設定するか、輪郭線や塗りつぶしのスタイルに半透明の色を割り当てることによって行われます。

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
代入された透明度の値を、代入後にcanvasに描画されるすべての図形に適用します。値は0.0（完全に透明）から1.0（完全に不透明）の間でなければなりません。デフォルトでは1.0（完全に不透明）が設定されています。
+
+ +

globalAlphaプロパティは、同様の透明度でcanvasにいくつもの図形を描画する場合に役に立ちますが、それ以外の場合は、色を設定するときにそれぞれの図形に透明度を設定する方が一般的に便利です。

+ +

strokeStyleプロパティとfillStyleプロパティはCSSのrgba表現を利用できるため、次のような表記を使用して透明な色を割り当てることもできます。

+ +
// 輪郭線と塗りつぶしの色に透明色を割り当てる
+
+ctx.strokeStyle = "rgba(255,0,0,0.5)";
+ctx.fillStyle = "rgba(255,0,0,0.5)";
+
+ +

rgba()関数はrgb()関数によく似ていますが、1つ引数が増加します。最後の引数には、この色の透明度の値を設定します。有効な値の範囲は、0.0（完全に透明）から1.0（完全に不透明）です。

+ +

プロパティ globalAlpha の例

+ +

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0,0,75,75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75,0,75,75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0,75,75,75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75,75,75,75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (i=0;i<7;i++){
+    ctx.beginPath();
+    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

An example using rgba()

+ +

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255,221,0)';
+  ctx.fillRect(0,0,150,37.5);
+  ctx.fillStyle = 'rgb(102,204,0)';
+  ctx.fillRect(0,37.5,150,37.5);
+  ctx.fillStyle = 'rgb(0,153,255)';
+  ctx.fillRect(0,75,150,37.5);
+  ctx.fillStyle = 'rgb(255,51,0)';
+  ctx.fillRect(0,112.5,150,37.5);
+
+  // Draw semi transparent rectangles
+  for (var i=0;i<10;i++){
+    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
+    for (var j=0;j<4;j++){
+      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

There are several properties which allow us to style lines.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Sets the width of lines drawn in the future.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Sets the appearance of the ends of lines.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Sets the appearance of the "corners" where lines meet.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Specifies where to start a dash array on a line.
+
+ +

You'll get a better understanding of what these do by looking at the examples below.

+ +

A lineWidth example

+ +

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

+ +

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

+ +

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++){
+    ctx.lineWidth = 1+i;
+    ctx.beginPath();
+    ctx.moveTo(5+i*14,5);
+    ctx.lineTo(5+i*14,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

+ +

+ +

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

+ +

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

+ +
+

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

+ +

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

+
+ +

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

+ +

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

+ +

A lineCap example

+ +

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

+ +

+ +
+
butt
+
The ends of lines are squared off at the endpoints.
+
round
+
The ends of lines are rounded.
+
square
+
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
+
+ +

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

+ +

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt','round','square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10,10);
+  ctx.lineTo(140,10);
+  ctx.moveTo(10,140);
+  ctx.lineTo(140,140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i=0;i<lineCap.length;i++){
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25+i*50,10);
+    ctx.lineTo(25+i*50,140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

A lineJoin example

+ +

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

+ +

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

+ +

+ +
+
round
+
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
+
bevel
+
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
+
miter
+
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
+
+ +

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round','bevel','miter'];
+  ctx.lineWidth = 10;
+  for (var i=0;i<lineJoin.length;i++){
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5,5+i*40);
+    ctx.lineTo(35,45+i*40);
+    ctx.lineTo(75,5+i*40);
+    ctx.lineTo(115,45+i*40);
+    ctx.lineTo(155,5+i*40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

A demo of the miterLimit property

+ +

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

+ +

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

+ +

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

+ +
    +
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • +
  • The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
    • +
  • A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.
    • +
  • A miter limit equal to 1.0 is valid but will disable all miters.
    • +
  • Values below 1.0 are invalid for the miter limit.
    • +
+ +

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

+ +

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0,0,150,150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5,50,160,50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0,100);
+  for (i=0;i<24;i++){
+    var dy = i%2==0 ? 25 : -25 ;
+    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Using line dashes

+ +

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

+ +

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10,10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0,0,150,150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0,0,0,150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10,10,130,130);
+  ctx.strokeRect(50,50,50,50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
+
+  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
+
+  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
+
+  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0,0,150,150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img,'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function(){
+
+    // create pattern
+    var ptrn = ctx.createPattern(img,'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0,0,150,150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+
+  ctx.font = "20px Times New Roman";
+  ctx.fillStyle = "Black";
+  ctx.fillText("Sample String", 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
+  ctx.fill("evenodd");
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/basic_animations/index.html b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..1690518a7d --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,711 @@ +--- +title: Basic animations +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +tags: + - Canvas + - Graphics + - HTML + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

私たちが {{HTMLElement("canvas")}} 要素の操作に JavaScript を使うのは、とても簡単にインタラクティブなアニメーションを作成できるからです！本章では、いくつかの基本的なアニメーションで、その概要をつかんでいきます。

+
+ +

おそらく最大の制約は、キャンバスに図形を一度描画すると、その状態が維持されることです。アニメーションさせる場合にも、移動する部分と以前に描いた部分をすべて再描画する必要があります。複雑なフレームの再描画には時間がかかり、パフォーマンスは、実行しているコンピューターの速度に大きく依存します。

+ +

基本的なアニメーションの手順

+ +

フレームを描画させる手順は、このようになります。

+ +
    +
  1. キャンバスをクリアする
    + 描画する図形がキャンバス全体 (たとえば、背景画像) に収まらない限り、以前に描画した図形をすべてクリアする必要があります。それを行う最も簡単な方法は、{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} メソッドを使うことです。
    2. +
  2. キャンバスの状態を保存する
    + キャンバスの状態に影響を与える設定(スタイル、変形など)を変更していて、フレームを描画するたびに元の状態を使用したい場合は、その状態を保存する必要があります。
    3. +
  3. アニメ―ションさせる図形を描画する
    + 実際に、フレームの描画を行います。
    4. +
  4. キャンバスの状態を復元する
    + 状態を保存した場合は、新しいフレームを描画する前に状態を復元します。
    5. +
+ +

アニメーションの制御

+ +

図形は、canvas のメソッドを直接使用するか、カスタム関数を呼び出すことによって描画されます。通常は、スクリプトの実行が終了したときにのみ、これらの結果がキャンバスに表示されます。たとえば、for ループ内からアニメーションを実行することはできません。

+ +

つまり、一定の期間ごとに描画関数を実行する方法が必要です。このようなアニメーションを制御するには、2 つの方法があります。

+ +

スケジュールの更新

+ +

まず、{{domxref("window.setInterval()")}}、{{domxref("window.setTimeout()")}} があります。それから、{{domxref("window.requestAnimationFrame()")}} 関数があります。これらは、特定の関数を一定時間で呼び出すために使用できます。

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
function で指定した関数を delay ミリ秒ごとに繰り返し実行します。
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
function で指定した関数を delay ミリ秒後に実行します。
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。
+
+ +

ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する setInterval() 関数を使用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用してアニメーションを制御するため setTimeout() を使用できます。{{domxref( "EventListener")}}を設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。

+ +
+

以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。requestAnimationFrame メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、ゲーム開発のビデオゲームの解剖学を参照してください。

+
+ +

アニメーションする太陽系

+ +

この例は、太陽系の小さなモデルをアニメーションさせます。

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // clear canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // Earth
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Shadow
+  ctx.drawImage(earth,-12,-12);
+
+  // Moon
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

アニメ―ションする時計

+ +

この例は、アニメーションする時計で現在時間を表示します。

+ +
function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Hour marks
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Minute marks
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // write Hours
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // write Minutes
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // Write seconds
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

ループする風景

+ +

この例は、左から右へ風景写真をスクロールさせます。Wikipedia からヨセミテ国立公園の画像を使いましたが、キャンバスよりも大きな任意の画像を使用できます。

+ +
var img = new Image();
+
+// User Variables - customize these to change the image being scrolled, its
+// direction, and the speed.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; // lower is faster
+var scale = 1.05;
+var y = -4.5; // vertical offset
+
+// Main program
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) {
+        // image larger than canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // image width larger than canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // image height larger than canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // get canvas context
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // set refresh rate
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // if image is <= Canvas Size
+    if (imgW <= CanvasXSize) {
+        // reset, start from beginning
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // draw additional image1
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // draw additional image2
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // image is > Canvas Size
+    else {
+        // reset, start from beginning
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // draw aditional image
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // draw image
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // amount to move
+    x += dx;
+}
+
+ +

以下は、画像をスクロールする {{HTMLElement("canvas")}} です。ここで指定する幅と高さは、JavaScript コードの CanvasXZSize および CanvasYSize 変数の値と一致する必要があることに注意してください。

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

+ +

マウス追跡アニメーション

+ +
<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Document</title>
+        <script>
+            var cn;
+            //= document.getElementById('cw');
+            var c;
+            var u = 10;
+            const m = {
+                x: innerWidth / 2,
+                y: innerHeight / 2
+            };
+            window.onmousemove = function(e) {
+                m.x = e.clientX;
+                m.y = e.clientY;
+
+            }
+            function gc() {
+                var s = "0123456789ABCDEF";
+                var c = "#";
+                for (var i = 0; i < 6; i++) {
+                    c += s[Math.ceil(Math.random() * 15)]
+                }
+                return c
+            }
+            var a = [];
+            window.onload = function myfunction() {
+                cn = document.getElementById('cw');
+                c = cn.getContext('2d');
+
+                for (var i = 0; i < 10; i++) {
+                    var r = 30;
+                    var x = Math.random() * (innerWidth - 2 * r) + r;
+                    var y = Math.random() * (innerHeight - 2 * r) + r;
+                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
+                    a.push(t);
+                }
+                //cn.style.backgroundColor = "#700bc8";
+
+                c.lineWidth = "2";
+                c.globalAlpha = 0.5;
+                resize();
+                anim()
+            }
+            window.onresize = function() {
+
+                resize();
+
+            }
+            function resize() {
+                cn.height = innerHeight;
+                cn.width = innerWidth;
+                for (var i = 0; i < 101; i++) {
+                    var r = 30;
+                    var x = Math.random() * (innerWidth - 2 * r) + r;
+                    var y = Math.random() * (innerHeight - 2 * r) + r;
+                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
+
+                }
+                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
+                //a[0].dr();
+            }
+            function ob(x, y, r, cc, o, s) {
+                this.x = x;
+                this.y = y;
+                this.r = r;
+                this.cc = cc;
+                this.theta = Math.random() * Math.PI * 2;
+                this.s = s;
+                this.o = o;
+                this.t = Math.random() * 150;
+
+                this.o = o;
+                this.dr = function() {
+                    const ls = {
+                        x: this.x,
+                        y: this.y
+                    };
+                    this.theta += this.s;
+                    this.x = m.x + Math.cos(this.theta) * this.t;
+                    this.y = m.y + Math.sin(this.theta) * this.t;
+                    c.beginPath();
+                    c.lineWidth = this.r;
+                    c.strokeStyle = this.cc;
+                    c.moveTo(ls.x, ls.y);
+                    c.lineTo(this.x, this.y);
+                    c.stroke();
+                    c.closePath();
+
+                }
+            }
+            function anim() {
+                requestAnimationFrame(anim);
+                c.fillStyle = "rgba(0,0,0,0.05)";
+                c.fillRect(0, 0, cn.width, cn.height);
+                a.forEach(function(e, i) {
+                    e.dr();
+                });
+
+            }
+        </script>
+        <style>
+            #cw {
+                position: fixed;
+                z-index: -1;
+            }
+
+            body {
+                margin: 0;
+                padding: 0;
+                background-color: rgba(0,0,0,0.05);
+            }
+        </style>
+    </head>
+    <body>
+        <canvas id="cw"></canvas>
+    </body>
+</html>
+
+ +
表示例
+ + + + + + + +
+

beyblade

+
+ +

スネークゲーム

+ +
<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Nokia 1100:snake..Member berries</title>
+</head>
+
+<body>
+    <div class="keypress hide">
+        <div class="up" onclick="emit(38)">&#8593;</div>
+        <div class="right" onclick="emit(39)">&#8594;</div>
+        <div class="left" onclick="emit(37)">&#8592;</div>
+        <div class="down" onclick="emit(40)">&#8595;</div>
+    </div>
+    <div class="banner" id="selector">
+        <div>
+            Time :<span id="time">0</span>
+        </div>
+        <div>LousyGames ©</div>
+        <div>
+            Score :<span id="score">0</span>
+        </div>
+        <div class="touch off" onclick="touch(this)">touch</div>
+    </div>
+    <canvas id="main"></canvas>
+</body>
+<style>
+    body {
+        margin: 0;
+        overflow: hidden;
+        background: #000
+    }
+
+    .banner {
+        text-align: center;
+        color: #fff;
+        background: #3f51b5;
+        line-height: 29px;
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+        font-family: monospace;
+        height: 30px;
+        opacity: .4;
+        display: flex;
+        transition: .5s
+    }
+
+    .banner:hover {
+        opacity: 1
+    }
+
+    div#selector>div {
+        flex-basis: 30%
+    }
+
+    @keyframes diss {
+        from {
+            opacity: 1
+        }
+
+        to {
+            opacity: 0
+        }
+    }
+
+    .keypress>div {
+        border: dashed 3px #fff;
+        height: 48%;
+        width: 48%;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        align-self: center;
+        align-items: center;
+        font-size: -webkit-xxx-large;
+        font-weight: 900;
+        color: #fff;
+        transition: .5s;
+        opacity: .1;
+        border-radius: 7px
+    }
+
+    .keypress {
+        position: fixed;
+        width: 100vw;
+        height: 100vh;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        opacity: 1;
+        user-select: none
+    }
+
+    .keypress>div:hover {
+        opacity: 1
+    }
+
+    .touch {
+        background: #8bc34a
+    }
+
+    .off {
+        background: #f44336
+    }
+
+    .hide {
+        opacity: 0
+    }
+</style>
+</html>
+ +

Javascript

+ +
function tmz() {
+        var e = new Date(t),
+            i = new Date,
+            n = Math.abs(i.getMinutes() - e.getMinutes()),
+            o = Math.abs(i.getSeconds() - e.getSeconds());
+        return n + " : " + o
+    }
+
+    function coll(t, e) {
+        return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y
+    }
+
+    function snake() {
+        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
+        for (var t = {
+            x: w / 2,
+            y: h / 2
+        }, e = 0; e < 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
+        this.draw = function () {
+            var t = d && d.search("Arrow") > -1,
+                e = -1;
+            if (t) {
+                var i = {
+                    ...this.sn[0]
+                };
+                if ("ArrowUp" == d && (i.y -= this.h), "ArrowDown" == d && (i.y += this.h), "ArrowLeft" == d && (i.x -= this.w), "ArrowRight" == d && (i.x += this.w), i.x >= w ? i.x = 0 : i.x < 0 && (i.x = w - this.w), i.y > h ? i.y = 0 : i.y < 0 && (i.y = h), e = fa.findIndex(t => coll({
+                    ...this.sn[0],
+                    h: this.h,
+                    w: this.w
+                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
+                this.sn.pop(), console.log(6)
+            }
+            this.sn.forEach((t, e, i) => {
+                if (0 == e || i.length - 1 == e) {
+                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
+                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
+                } else c.fillStyle = "#8BC34A";
+                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e && 0 != e && c.strokeRect(t.x, t.y, this.w, this.h), 0 == e && (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
+            })
+        }
+    }
+
+    function gc() {
+        for (var t = "0123456789ABCDEF", e = "#", i = 0; i < 6; i++) e += t[Math.ceil(15 * Math.random())];
+        return e
+    }
+
+    function food() {
+        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
+            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
+        }, this.renew(), this.put = (() => {
+            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
+        })
+    }
+
+    function init() {
+        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
+        for (var t = 0; t < 10; t++) fa.push(new food);
+        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
+    }
+
+    function anima() {
+        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t => t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() => {
+            requestAnimationFrame(anima)
+        }, fw)
+    }
+
+    function emit(t) {
+        key.keydown(t)
+    }
+
+    function touch(t) {
+        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
+    }
+    var t = new Date + "",
+        d = void 0,
+        cc = document.getElementsByTagName("canvas")[0],
+        c = cc.getContext("2d");
+    key = {}, key.keydown = function (t) {
+        var e = document.createEvent("KeyboardEvent");
+        Object.defineProperty(e, "keyCode", {
+            get: function () {
+                return this.keyCodeVal
+            }
+        }), Object.defineProperty(e, "key", {
+            get: function () {
+                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
+            }
+        }), Object.defineProperty(e, "which", {
+            get: function () {
+                return this.keyCodeVal
+            }
+        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t && alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
+    };
+    var o, s, h = innerHeight,
+        w = innerWidth,
+        fw = 60,
+        fa = [];
+    window.onkeydown = function (t) {
+        var e = t.key;
+        (e.search("Arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "I" != e || (console.log("inc"), fw -= 10), "d" != e && "D" != e || (console.log("dec"), fw += 10)
+    }, init();
+
+ +
表示例
+ + + + + + + +
+

Snake game

+
+ +

その他のサンプル

+ +
+
A basic ray-caster
+
キーボードを使ってアニメーションをどのように制御するか説明した良いサンプルです。
+
Advanced animations
+
高度なアニメーション技術と物の動きについて見ていきます。
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..c9bc6c17f4 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,152 @@ +--- +title: Basic usage of canvas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
+ +
+

まずチュートリアルの最初として {{HTMLElement("canvas")}} {{Glossary("HTML")}} 要素を説明します。このページを読めば、canvas 要素に 2D の画像を描けるようになります。

+
+ +

<canvas> 要素

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。src 属性と alt 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} 属性を利用できます。 width と height 属性が指定されなかった場合、canvas は幅 300 ピクセル、高さ 150 ピクセルの要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。

+ +
+

付記: 画像が歪んでいると感じた時は、<canvas> の width と height 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。

+
+ +

id 属性は 全ての要素が持つ属性 で <canvas> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。

+ +

<canvas> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては専用のページを設けています。詳細は、そちらをご覧ください。

+ +
+

代替コンテンツ

+ +

<canvas> 要素は対応していないブラウザ、例えば Internet Explorer 9 以前、で表示するための代替コンテンツを定義できます。これは {{HTMLElement("img")}} というよりは、むしろ {{HTMLElement("video")}} や {{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素に似ています。

+ +

代替コンテンツの定義方法はシンプルで、<canvas> 要素の内部に代わりに表示するコンテンツを記述します。対応していないブラウザは <canvas> を無視するため、その内部のコンテンツが表示されるというわけです。

+ +

次の例では JavaScript によって canvas に対して、代替テキストが設定されています：

+ +
<canvas id="stockGraph" width="150" height="150">
+  現在の株価: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは make the canvas more accessible をご覧ください。

+ +

</canvas>：閉じタグが必須です

+ +

代替コンテンツを内部に持つ関係上、{{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (</canvas>) が必須となっています。タグを閉じなかった場合は、残りのページ全てが代替コンテンツとして処理され、その結果としてそれらが表示されなくなります。

+ +

代替コンテンツが必要でない場合は、単に <canvas id="foo" ...></canvas> と書けば対応するブラウザで動作します。

+ +

描画コンテキスト

+ +

{{HTMLElement("canvas")}} は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の描画コンテキストとして表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説しますが、これ以外の描画コンテキストも存在します。その典型例が WebGL です。これは OpenGL ES に基づいた 3 次元グラフィックスを扱える描画コンテキストです。

+ +

初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素の {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。"2d" を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。これで取得されたコンテキストの詳細は {{domxref("CanvasRenderingContext2D")}} をご覧ください。

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

最初の行では {{domxref("document.getElementById()")}} メソッドを呼んで、DOM 中から {{HTMLElement("canvas")}} 要素をあらわすノードを探しています。2 行目では見つけた要素の getContext() メソッドを呼んで、描画コンテキストを取得しています。

+ +
+

対応しているかどうかの確認

+ +

{{HTMLElement("canvas")}} 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは getContext() メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります：

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

サンプルコード

+ +

以上の点をまとめたサンプルコードは以下のようになります。このサンプルコードは、後の説明でも利用します。

+ +
+

付記：スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。

+
+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

スクリプト中の draw() 関数はページのロード完了時に一度だけ呼び出されます。これは、document の {{event("load")}} イベントを利用しているためです。他の関数同様 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}} や {{domxref("WindowTimers.setInterval", "window.setInterval()")}}、他のイベントハンドラから呼び出すことができますが、今の所ページがロードされた時にのみ呼び出されます。

+ +

このサンプルコードでは何も描画されない領域が表示されます。実際の動作は次で確認できます：

+ +

{{EmbedLiveSample("サンプルコード", 160, 160)}}

+ +

単純な描画

+ +

手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、次のページで解説します。

+ +
<!DOCTYPE html>
+<html>
+ <head>
+  <meta charset="utf-8"/>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 50, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 50, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

この例は次のように動作します：

+ +

{{EmbedLiveSample("単純な描画", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..99e2c55b69 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,577 @@ +--- +title: canvas に図形を描く +slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes +tags: + - Canvas + - Graphics + - HTML + - HTML Canvas + - HTML5 + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

canvas の環境をセットアップしましたので、canvas に描画する方法を詳しく見ていくことができます。この記事を読み終わると矩形、三角形、線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。canvas にオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。

+
+ +

グリッド

+ +

+ +

描き始める前に、canvas のグリッドもしくは 座標空間 について話す必要があります。前のページの HTML テンプレートは幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。右の図に、この画像とデフォルトのグリッドを重ねて描きました。普通 グリッド上の 1 単位は canvas 上の 1 ピクセルに相当します。このグリッドの原点は左上の角 ( 座標 (0,0) ) に位置します。全ての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセル (座標 (x,y) ) に来ます。このチュートリアルの後半で原点を他の位置へずらす方法、グリッドを回転したり、伸縮したりする方法を見ることになります。今はデフォルトで我慢しましょう。

+ +

矩形を描く

+ +

{{Glossary("SVG")}} とは異なり、{{HTMLElement("canvas")}} は 2 つの原始図形「矩形」「パス（複数の点が線によって結ばれている）」のみをサポートしています。他の全ての図形は 1 つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。

+ +

最初に矩形を見ていきましょう。canvas に矩形を描く 3 つの関数があります:

+ +
+
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
+
塗りつぶされた矩形を描きます。
+
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
+
矩形の輪郭を描きます。
+
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
+
指定された領域を消去し、完全な透明にします。
+
+ +

3 つの関数は同じパラメータをとります。x と y は矩形の左上の角の canvas 上での位置 (原点から相対的) を指定します。width と height は矩形のサイズを指定します。

+ +

下は、前のページの draw() 関数ですが、この 3 つの関数を追加しました。

+ +

矩形の例

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25, 25, 100, 100);
+    ctx.clearRect(45, 45, 60, 60);
+    ctx.strokeRect(50, 50, 50, 50);
+  }
+}
+ +

結果は以下のように見えるはずです。

+ +
{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}
+ +

fillRect() 関数は 100x100 ピクセルの大きな黒色正方形を描きます。clearRect() 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に strokeRect() が消去された正方形の中に 50x50 ピクセルの矩形の輪郭を描きます。

+ +

後のページで clearRect() の代わりのメソッドを 2 つ見て、描く図形の色と輪郭のスタイルを変更する方法を見ます。

+ +

次の節でみるパス関数と異なり、全ての 3 つの矩形関数は直ちに canvas に描きます。

+ +

パスを描く

+ +

パスについて見ていきましょう。パスは点のリストであり、それらは曲線かそうでない形状、およびさまざまな幅や色を設定可能な線分で結ばれます。パスやサブパスは、閉じることができます。パスを使って図形を描くには、 いくつかの余分な作業が必要です。

+ +
    +
  1. 始めに、パスを作成します。
    2. +
  2. 次に、パスへ描画するために描画コマンドを使用します。
    3. +
  3. パスが作成されたら、描画するための stroke または fill を実行できます。
    4. +
+ +

これらのステップで使用する関数を以下に示します:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
新しいパスを作成します。パスを作成すると以降の描画コマンドは、そのパスを構築するために直接作用します。
+
パスのメソッド
+
オブジェクトのためにさまざまなパスを設定するメソッド群です。
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
直線をパスに追加し、現在のサブパスの開始地点につなぎます。
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
輪郭をなぞる方式で、図形を描きます。
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
パスの内部エリアを塗りつぶして、単色の図形を描きます。
+
+ +

パスを作る最初の作業は beginPath() メソッドを呼び出すことです。内部では、パスは図形を一緒に作るサブパス (線、円弧など) のリストとして保存されます。このメソッドが呼び出される毎に、リストはリセットされ新しい図形を始めることができます。

+ +
注記: beginPath() を呼び出した直後や canvas を新規作成した直後など、現在のパスが空であるときに最初にパスを構築するコマンドは、実際は何であるかにかかわらず常に moveTo() として扱われます。このためパスをリセットした後はほぼ必ず、開始位置を明示することが必要になるでしょう。
+ +

2 番目の作業は描かれる実際のパスを定義するメソッドを呼び出すことです。まもなくみることになります。

+ +

3 番目は任意の作業ですが、closePath() メソッドを呼び出すことです。このメソッドは現在の点から始点に向けて直線を描くことで図形を閉じようとします。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしません。

+ +
注記: fill() メソッドが呼ばれるときは開いている図形は自動的に閉じられ、closePath() メソッドを使う必要はありません。これは、stroke() を呼び出すときはあてはまりません。
+ +

三角形の描画

+ +

単純な図形 (三角形) を描くコードはこのようになります。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+ +

表示結果は以下の様になります。

+ +
{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}
+ +

ペンの移動

+ +

とても役に立つ関数である moveTo() は、自身は何も描画しませんが、上述のパスリストの一部になります。 1 枚の紙の上の 1 つの場所からペンか鉛筆を持ち上げてそれを次の場所に置くと考えるとよいでしょう。

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
x と y で指定した座標に、ペンを移動します。
+
+ +

canvas が初期化されるか beginPath() メソッドが呼ばれたとき、ほとんどの場合 moveTo() メソッドを始点を他の場所に置くために使います。moveTo() メソッドを繋がっていないパスを描くために使うこともできます。下のスマイリーを見てください。

+ +

これをあなた自身で試すには、以下のコードを使うことができます。さきほど見た draw() 関数に貼り付けるだけです。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外の円
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // 口 (時計回り)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左目
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右目
+    ctx.stroke();
+  }
+}
+ +

表示結果は以下の様になります。

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

繋がっている線を見るには moveTo() メソッドを取り除いてください。

+ +
注記: arc() 関数とそのパラメータの解説は {{anch("Arcs","円弧")}} の節をご覧下さい。
+ +

線

+ +

直線を描くには lineTo() メソッドを使います。

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
現在の描画位置から x と y で指定した位置に、線を描きます。
+
+ +

このメソッドは 2 つの引数 x と y を取ります。それらは線の終点の座標です。始点は前回のパスに依存します。前回のパスの終点が始点になる、など。始点は moveTo() メソッドを使って変更することもできます。

+ +

次の例では 2 つの三角形が描かれています。 1 つは塗られ、もう 1 つは輪郭線が描かれています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

最初に新しい図形のパスを始めるために beginPath() メソッドが呼ばれています。次に 始点を望む位置に移動するために moveTo() メソッドが呼ばれています。三角形の 両側の辺を作る 2 つの線が描かれています。

+ +
{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}
+ +
+ +

あなたは塗られた三角形と輪郭線の描かれたものとの違いに気がつくでしょう。上で述べたように、これはパスが塗られる( fill される) と図形は自動的に閉じられ、stroke されるときはそうでないからです。輪郭の描かれた三角形で closePath() を行わないと 2 つの線しか描かれず、三角形は完成しません。

+ +

円弧

+ +

円弧や円を描くために arc() または arcTo() メソッドを使います。

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
(x, y) を中心の位置、radius を半径、startAngle を開始角度、endAngle を終了角度、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します。
+
+ +

arc メソッドを詳しく見ていきましょう。このメソッドは 6 つのパラメーターをとります。x と y は、円弧を描く円の中心座標です。radius はそのまま、半径です。startAngle と endAngle パラメーターは円弧の始まりと終わりをラジアンで定義します。始まりと終わりの角度は x 軸から計算します。anticlockwise パラメーターは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値です。

+ +
+

注記: arc 関数の角度は度ではなく、ラジアンで計算されます。度からラジアンに変換するには以下の JavaScript 式を使うことができます : radians = (Math.PI/180)*degrees

+
+ +

以下の例は上で見てきた例よりすこし複雑です。全て異なる角度と塗り方で 12 の異なる円弧を描きます。

+ +

2 つの for ループは円弧の行と列のループです。全ての円弧毎に beginPath() を使って新しいパスを始めます。コードの中で、次に何が行われているか読みやすくするために全てのパラメーターを変数として書きましたが、いつもこのようにする必要はありません。

+ +

x と y 座標は充分明確です。radius と startAngle は固定です。endAngle は最初の列が 180 度 (半円) から始まって、最後の列で完全な円を作るように 90 度ずつ増加します。

+ +

clockwise パラメーターの文は最初と 3 番目の列では時計回りの円弧として 2 番目と 4 番目の列では反時計回りの円弧という結果になります。最後に、if 文は上半分は輪郭を描画された円弧を、下半分は塗られた円弧を作ります。

+ +
+

注記: この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルの canvas が必要です。

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0;i < 4;i++) {
+      for(var j = 0;j < 3;j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x 座標
+        var y = 25 + i * 50; // y 座標
+        var radius = 20; // 円弧の半径
+        var startAngle = 0; // 円孤の始点
+        var endAngle = Math.PI + (Math.PI * j) / 2; // 円孤の終点
+        var anticlockwise = i % 2 !== 0; // 時計回りまたは反時計回り
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +
{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
+ +

ベジェと二次曲線

+ +

次に見ていく種類のパスはベジェ曲線です。三次および二次の種類が利用可能です。通常複雑な自然の図形を描くのに使われます。

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
現在のペンの位置から x および y で指定した終端へ、cp1x および cp1y で指定した制御点を使用して二次ベジェ曲線を描きます。
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
現在のペンの位置から x および y で指定した終端へ、(cp1x, cp1y) および (cp2x, cp2y) で指定した制御点を使用して三次ベジェ曲線を描きます。
+
+ +

これらの違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点 (青い点) と 1 つの制御点 (赤い点) を持つのに対して、三次ベジェ曲線は 2 つの制御点を持ちます。

+ +

それらのメソッドの両方の x と y パラメータは終点の座標です。cp1x と cp1y は最初の制御点、cp2x と cp2y は 2 番目の制御点の座標です。

+ +

Adobe Illustrator のようなベクタードローイングソフトとは違い、何をやっているのかの直接の視覚的フィードバックが得られないので、二次および三次ベジェ曲線を使うことはとても挑戦的です。このことは複雑な図形を描くことをとても難しくします。以下の例で、いくつかの単純で基本的な図形を描きます、しかしもしあなたに時間と特に忍耐があればはるかに複雑な図形を作ることができます。

+ +

これらの例で非常に難しいものは何もありません。 どちらの場合も、最終的に描かれた一連の曲線が完全な図形となるのを見ることになります。

+ +

二次ベジェ曲線

+ +

この例では、吹き出しをレンダリングするために複数の二次ベジェ曲線を使用しています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // 二次曲線の例
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +
{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}
+ +

三次ベジェ曲線

+ +

この例では、三次ベジェ曲線を使ってハートを描画します。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // 三次ベジェ曲線の例
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +
{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}
+ +

矩形

+ +

canvas に直接矩形を描く例 ({{anch("Drawing rectangles","矩形を描く")}}) で見た 3 つのメソッドのほかに、開いているパスリストに矩形を追加する rect() メソッドがあります。

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
(x, y) で指定した位置を左上の角にして、width および height で指定した幅および高さの矩形を描きます。
+
+ +

このメソッドが実行される前に、パラメーターに (x,y) を持った moveTo() メソッドが自動的に呼ばれます。すなわち、始点が標準の位置に置かれます。

+ +

組み合わせ

+ +

このページの全ての例で図形につき一種類のパス関数のみを使ってきました。しかし、図形を作るのに使用できるパスの種類の制限は一切ありません。そこで、この最後の例では非常に有名なゲームのキャラクタを作るために全てのパス関数を組み合わせてみましょう。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0;i < 8;i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for(i = 0;i < 6;i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for(i = 0;i < 8;i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// 角丸の四角形を描画するためのユーティリティ関数
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+
+ +

以下の様な表示結果となります。

+ +
{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}
+ +

これらは非常に単純な例ですので、詳細は割愛します。ポイントは fillStyle を使用している点と、独自関数 roundedRect() を定義している点です。この様に繰り返し利用する可能性のある処理を関数化しておくと、コード量を減らすことができます。

+ +

fillStyle の詳細についてはこのチュートリアルの後半で説明します。プロパティで、塗りの色を初期値の黒から白に、そしてもう一度黒に変更しています。

+ +

Path2D オブジェクト

+ +

最後の例で見たように、オブジェクトを描くための一連のパスや描画コマンドを、canvas に置くことができます。コードをシンプルにしてパフォーマンスを向上させるために最近のバージョンのブラウザで使用できる {{domxref("Path2D")}} オブジェクトは、描画コマンドをキャッシュあるいは記録することを可能にしています。これにより、パスをすばやく再実行できます。Path2D オブジェクトの構築方法を見ていきましょう:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Path2D() コンストラクタは、新たにインスタンス化した Path2D オブジェクトを返します。任意で別のパス (コピーを作成)、あるいは SVG パスデータを構成する文字列を引数に指定できます。
+
+ +
new Path2D();     // 空のパスオブジェクトを作成する
+new Path2D(path); // 別の Path2D オブジェクトを複製する
+new Path2D(d);    // SVG パスデータからパスを作成する
+ +

これまで見てきた moveTo、rect、arc、quadraticCurveTo など、あらゆるパスメソッドを Path2D オブジェクトで使用できます。

+ +

また Path2D API には、パスを結合するための addPath メソッドが追加されています。これは、複数の部品を組み合わせてオブジェクトを構築したい場合などに役立ちます。

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
現在のパスに、変換行列 (任意指定) とともに、パスを追加します。
+
+ +

Path2D の例

+ +

この例では、矩形と円を作成します。どちらも Path2D オブジェクトとして保存しており、後で使用することができます。新たな Path2D API に合わせて、いくつかのメソッドが現在のパスに代わり任意で Path2D を受け入れられるように更新されました。ここでは、canvas に両方のオブジェクトを描くため、1つの path 引数を stroke および fill で使用しています。

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

SVG パスを使用する

+ +

canvas の新たな Path2D API の、もうひとつの強力な機能が、canvas でパスを初期化するために SVG パスデータを使用できることです。これにより、SVG と canvas の両方でパスデータを使い回すことができるでしょう。

+ +

パスはある点に移動して (M10 10) 、そこから右へ水平に 80 ポイント移動 (h 80)、下へ 80 ポイント移動 (v 80) 、80ポイント 左へ移動 (h -80) 、そして始点へ戻ります (z)。この例は Path2D コンストラクタのページで確認できます。

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..d99101e457 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,174 @@ +--- +title: 文字を描く +slug: Drawing_text_using_a_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

前の章でスタイルや色を適用する方法を見た後は、canvas にテキストを描画する方法を見ていきます。

+
+ +

テキストを描く

+ +

canvas のレンダリングコンテキストでは、2 種類のテキスト描画方法を提供します:

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
(x,y) で指定した位置にテキストを塗りつぶして描画します。任意で最大描画幅を指定できます。
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
(x,y) で指定した位置にテキストの輪郭を描画します。任意で最大描画幅を指定できます。
+
+ +

fillText の例

+ +

現在の fillStyle を使用して、テキストを塗りつぶして描画します。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.fillText("Hello world", 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

strokeText の例

+ +

現在の strokeStyle を使用して、テキストの輪郭を描画します。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = "48px serif";
+  ctx.strokeText("Hello world", 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

テキストのスタイルを設定する

+ +

上記の例ではテキストをデフォルトのサイズより若干大きくするため、すでに font プロパティを使用していました。canvas にテキストを表示する形式を調整できるプロパティは、さらにいくつかあります:

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
テキストを描画する際に使用するテキストのスタイルです。CSS の {{cssxref("font")}} プロパティと同じ構文にのっとった文字列です。デフォルトのフォントは 10px sans-serif です。
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
テキストの配置を設定します。使用できる値は start、end、left、right、center です。デフォルト値は start です。
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
ベースラインの位置ぞろえを設定します。使用できる値は top、hanging、middle、alphabetic、ideographic、bottom です。デフォルト値は alphabetic です。
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
書字方向を設定します。使用できる値は ltr、rtl、inherit です。デフォルト値は inherit です。
+
+ +

以前に CSS を扱ったことがあれば、これらのプロパティも見慣れているでしょう。

+ +

以下は WHATWG 提供の、textBaseline 属性によってサポートされている様々なベースラインを示した図です。The top of the em square is + +roughly at the top of the glyphs in a font, the hanging baseline is + +where some glyphs like आ are anchored, the middle is half-way + +between the top of the em square and the bottom of the em square, + +the alphabetic baseline is where characters like Á, ÿ, + +f, and Ω are anchored, the ideographic baseline is + +where glyphs like 私 and 達 are anchored, and the bottom + +of the em square is roughly at the bottom of the glyphs in a + +font. The top and bottom of the bounding box can be far from these + +baselines, due to glyphs extending far outside the em square.

+ +

textBaseline の例

+ +

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

+ +
ctx.font = "48px serif";
+ctx.textBaseline = "hanging";
+ctx.strokeText("Hello world", 0, 100);
+
+ + + +

{{EmbedLiveSample('Playable_code', 700, 360)}}

+ +

高度なテキスト測定

+ +

テキストのより詳細な情報を得る必要がある場合は、以下のメソッドでそれを測定できます。

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、{{domxref("TextMetrics")}} オブジェクトを返します。
+
+ +

以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText("foo"); // TextMetrics オブジェクト
+  text.width; // 16;
+}
+
+ +

Gecko 固有の注意事項

+ +

Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の接頭辞付き API で、早期バージョンのテキスト描画法を実装しています。これらは非推奨化または削除されており、動作を保証しません。

+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/finale/index.html b/files/ja/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..e28beb611e --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: 最後に +slug: Web/Guide/HTML/Canvas_tutorial/Finale +tags: + - キャンバス + - グラウフィックス + - チュートリアル +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

おめでとう! Canvas tutorialは終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。

+
+ +

他の例とチュートリアル

+ +

ここでは様々なデモや更なるcanvasについての例を紹介します。

+ +
+
Codepen.io
+
ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。
+
HTML5 Canvas Tutorials
+
Canvas APIsの例です。
+
Game development
+
ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。
+
+ +

他の Web APIs

+ +

これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます

+ +
+
WebGL
+
複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。
+
SVG
+
スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。
+
Web Audio
+
WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。
+
+ +

質問

+ +
+
Stackoverflow
+
質問のタグは"canvas"となります。
+
Comments about this tutorial – the MDN documentation community
+
このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..0975cec653 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,118 @@ +--- +title: canvas の最適化 +slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas +tags: + - Advanced + - Canvas + - Graphics + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}} 要素は、ウェブで 2D グラフィックスを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリが Canvas API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、 canvas 要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

+
+ +

パフォーマンスに関する TIPS

+ +

キャンバスのパフォーマンスを向上させるための TIPS 集を以下に掲載します。

+ +

同様のプリミティブや繰り返し使用するオブジェクトをオフスクリーン canvas で事前にレンダリングする

+ +

アニメーションフレーム毎に同じ描画操作を繰り返していることに気づいたら、あらかじめオフスクリーンキャンバスに描画しておくことを検討しましょう。そして、必要な時に本来のキャンバスにオフスクリーン画像を、最初の場所で生成したときのステップなしで描画することができます。

+ +
myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+
+ +

浮動小数点数値の座標を避けて整数を使用する

+ +

canvas で整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

これはアンチエイリアス効果を生成するために、ブラウザーに追加の計算処理を強制します。これを避けるために、たとえば {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を呼び出す際に {{jsxref("Math.floor()")}} を使用して、すべての座標で端数処理を行ってください。

+ +

drawImage で画像のスケーリングを行わない

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} でいつも画像のスケーリング処理を行うのではなく、さまざまなサイズの画像をオフスクリーン canvas でキャッシュしてください。

+ +

複雑なシーンでは複数レイヤーの canvas を使用する

+ +

アプリケーションでは、一部のオブジェクトは頻繁に動かしたり変更したりする必要があるのに対し、他のものは比較的静止していることが分かるかもしれません。この場合に可能な最適化は、複数の <canvas> 要素を使用してアイテムをレイヤー化することです。

+ +

例えば、 UI があるゲームが最上位にあり、中間にゲームプレイの動作があり、最下位に静止した背景があるとします。この場合、ゲームを３つの <canvas> レイヤーに分割することができます。 UI はユーザーの入力のみに基づいて変化し、ゲームプレイレイヤーはフレーム毎に変化し、背景は基本的に変化しないままでいます。

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+</style>
+
+ +

大きな背景画像に CSS を使用する

+ +

静止した背景画像がある場合は、ただの {{HTMLElement("div")}} に CSS の {{cssxref("background")}} プロパティを使用し、 canvas の下に配置することで描画することができます。これにより、大きな画像を毎回 canvas に描画する処理を避けます。

+ +

CSS transforms を使用して canvas をスケーリングする

+ +

CSS 変形 は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きな canvas を縮小するよりも小さな canvas を拡大したほうが良好です。

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

透過をやめる

+ +

アプリケーションが canvas を使用していて背後のものを透過させる必要がない場合は、 {{domxref("HTMLCanvasElement.getContext()")}} で描画コンテキストを生成する際に alpha オプションを false に設定しましょう。この情報を使用してブラウザーが描画を最適化する可能性があります。

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

その他の TIPS

+ +
    +
  • canvas の呼び出しをひとまとめにします。たとえば、複数に分割した線分ではなくポリラインを描画します。
    • +
  • 不必要な canvas の状態変更を避けます。
    • +
  • 新しい状態の全体を描画せずに、スクリーンの差分だけを描画します。
    • +
  • 可能な限り {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} プロパティを避けます。
    • +
  • 可能な限り テキストレンダリング を避けます。
    • +
  • canvas をクリアーする別の方法を試します ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} 対 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 対 canvas のリサイズ)
    • +
  • アニメーションで {{domxref("window.setInterval()")}} の代わりに {{domxref("window.requestAnimationFrame()")}} を使用します。
    • +
  • 高負荷な物理演算ライブラリーに注意してください。
    • +
+ +

関連情報

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..33e9ef3e21 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,264 @@ +--- +title: Canvas とピクセル操作 +slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas +tags: + - Canvas + - Graphics + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

これまで、canvas の実際のピクセルは見てきませんでした。ImageData オブジェクトを使用して、ピクセルデータを操作するためにデータ配列へ直接読み取りや書き込みを行うことが可能です。また、画像のスムージング (アンチエイリアシング) の制御方法や canvas の画像を保存する方法も見ていきます。

+
+ +

ImageData オブジェクト

+ +

{{domxref("ImageData")}} オブジェクトは、canvas オブジェクトの領域にあるピクセルデータを表します。これは以下の読み取り専用プロパティを持ちます:

+ +
+
width
+
画像の幅をピクセル数で表します。
+
height
+
画像の高さをピクセル数で表します。
+
data
+
0 から 255 の間の (両端の値を含む) 整数データを RGBA の順で収めた一次元配列を表す {{jsxref("Uint8ClampedArray")}} です。
+
+ +

data プロパティは、生のピクセルデータを参照するためにアクセス可能な {{jsxref("Uint8ClampedArray")}} を返します。それぞれのピクセルは 4 つの 1 バイト値 (赤、緑、青、アルファの順、すなわち "RGBA" 形式) で表します。また、それぞれの色成分は 0 から 255 の間の整数で表します。さらに、それぞれの成分は配列内で連続した添字が割り当てられており、左上のピクセルの赤色成分が配列の添え字 0 になります。配列の中でピクセルは左から右へ進み、さらに下へと進んでいきます。

+ +

{{jsxref("Uint8ClampedArray")}} は height × width × 4 バイトのデータがあり、添字の範囲は 0 から (height×width×4)-1 になります。

+ +

例えば画像の 50 行目の 200 列目にあるピクセルから青色成分の値を読み取るには、以下のようにします:

+ +
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];
+ +

Uint8ClampedArray.length 属性を読み取ると、ピクセル配列のサイズをバイト数で知ることができます:

+ +
var numBytes = imageData.data.length;
+
+ +

ImageData オブジェクトを作成する

+ +

新たに空の ImageData オブジェクトを作成するには、{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドを使用します。createImageData() メソッドは 2 種類の形式があります:

+ +
var myImageData = ctx.createImageData(width, height);
+ +

これは、特定の寸法の新たな ImageData オブジェクトを作成します。すべてのピクセルは透明な黒色に設定されます。

+ +

anotherImageData で指定したオブジェクトと同じ寸法の、新たな ImageData オブジェクトを作成することもできます。新しいオブジェクトのピクセルは、すべて透明な黒色に設定されます。画像データはコピーされません!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

コンテキストのピクセルデータを取得する

+ +

canvas コンテキストのピクセルデータの複製を持つ ImageData オブジェクトを取得するには、getImageData() メソッドを使用します:

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

このメソッドは (left,top)、(left+width, top)、(left, top+height)、(left+width, top+height) の点で四隅を表した canvas の領域のピクセルデータを表す ImageData オブジェクトを返します。点の座標は、canvas の座標空間の単位で指定します。

+ +
+

注記: 返される ImageData オブジェクトで、canvas の外部にあるピクセルはすべて透明な黒色になります。

+
+ +

このメソッドは、Manipulating video using canvas の記事でも説明しています。

+ +

カラーピッカー

+ +

この例では、マウスカーソルの下にある色を表示するために getImageData() メソッドを使用しています。ここでは現在のマウスカーソルの位置を layerX と layerY で求めて、getImageData() が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための <div> で背景色とテキストを設定するために、配列データを使用します。

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ',' + data[1] +
+             ',' + data[2] + ',' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{EmbedLiveSample('A_color_picker', 610, 240)}}

+ +

コンテキストにピクセルデータを描く

+ +

putImageData() メソッドを使用して、コンテキストにピクセルデータを描くことができます:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

引数 dx と dy は、描画したいピクセルデータの左上の隅を描く位置を、コンテキストのデバイス座標で示します。

+ +

例えば myImageData が表す画像全体をコンテキストの左上の隅から描くには、単純に以下のようにします:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

色のグレースケール化と反転

+ +

この例ではすべてのピクセルの値を変更するためにイテレートを行って、putImageData() を使用して変更後のピクセル配列を canvas に書き戻しています。invert 関数は、単純に最大値の 255 からそれぞれの色の値を減算します。grayscale 関数は、単純に赤、緑、青の平均値を使用します。また、例えば x = 0.299r + 0.587g + 0.114b といった式による加重平均も使用できます。詳しくは Wikipedia の Grayscale (日本語版) をご覧ください。

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270)}}

+ +

ズームとアンチエイリアシング

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} メソッド、第 2 の canvas、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティの力を借りて、画像をズームアップして詳しく見ることができます。

+ +

マウスカーソルの位置を取得して、そこから上下左右に 5 ピクセルの範囲の画像を切り取ります。そして切り取った画像を別の canvas にコピーして、望むサイズにリサイズします。ズーム用の canvas では、元の canvas から切り取った 10×10 ピクセルの画像を 200×200 ピクセルにリサイズしています。

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

アンチエイリアシングはデフォルトで有効ですので、ピクセルをはっきりさせるためにスムージングを無効化したいと考えるかもしれません。チェックボックスを切り替えると、imageSmoothingEnabled プロパティ (さまざまなブラウザ向けに接頭辞が必要です) の効果を確認できます。

+ + + + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{EmbedLiveSample('Zoom_example', 620, 490)}}

+ +

画像を保存する

+ +

{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ toDataURL() メソッドを提供します。これは、引数 type で指定した形式 (既定値は PNG) で表した画像を持つ data URI を返します。返される画像の解像度は 96 dpi です。

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
既定の設定。PNG 画像を作成します。
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
JPG 画像を作成します。オプションで、品質を 0 から 1 の範囲で指定できます。1 は最高品質、0 はほとんど見分けがつかなくなりますがファイルサイズを小さくできます。
+
+ +

canvas から生成した data URI は、例えば任意の {{HTMLElement("image")}} のソースとして使用したり、ディスクに保存するために download 属性を持つハイパーリンクに投入することができます。

+ +

また、canvas から {{domxref("Blob")}} を生成することもできます。

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
canvas に含まれる画像を表す Blob オブジェクトを作成します。
+
+ +

関連情報

+ + + +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/transformations/index.html b/files/ja/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..066b5d2b84 --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,282 @@ +--- +title: Transformations +slug: Web/Guide/HTML/Canvas_tutorial/Transformations +tags: + - Canvas + - Graphics + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
これまでのチュートリアルで、canvas のグリッドや座標空間について学びました。今まではデフォルトのグリッドしか使用しておらず、また必要に応じて canvas 全体のサイズを変更していました。変換 (transformations) には、元の canvas を別の場所に移す、回転する、拡大縮小するといった、より強力な手段があります。
+ +

状態を保存および復元する

+ +

変換のメソッドを見ていく前に、より複雑な描画を始めたときに不可欠になメソッドを 2 つ見ておきましょう。

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
canvas 全体の状態を保存します。
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
直近に保存した canvas の状態を復元します。
+
+ +

canvas の状態は、スタックに保存されます。save() メソッドを呼び出すたびに、現在の描画状態をスタックにプッシュします。描画状態は以下の情報で構成されます:

+ +
    +
  • 適用された変換操作 (すなわち、後述する translate、rotate、scale)。
    • +
  • 以下の属性の、現在の値: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}、{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}、{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}、{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}、{{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}、{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}、{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}、{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}、{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}、{{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction", "direction")}}、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}
    • +
  • 現在のクリッピングパス。これは次の章で説明します。
    • +
+ +

save() メソッドは、何回でも呼び出すことができます。restore() メソッドを呼び出すたびに、最後に保存された状態をスタックからポップして、すべての保存済み設定を復元します。

+ +

save および restore の例

+ +

この例は、連続した矩形のセットを描画するときに、描画状態のスタックがどのように機能するかを示します。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0,0,150,150);   // 既定の設定で矩形を描画
+  ctx.save();                  // 既定の状態を保存
+
+  ctx.fillStyle = '#09F';      // 設定変更
+  ctx.fillRect(15,15,120,120); // 新たな設定で矩形を描画
+
+  ctx.save();                  // 現在の状態を保存
+  ctx.fillStyle = '#FFF';      // 設定変更
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30,30,90,90);   // 新たな設定で矩形を描画
+
+  ctx.restore();               // 以前の状態を復元
+  ctx.fillRect(45,45,60,60);   // 復元した設定で矩形を描画
+
+  ctx.restore();               // 以前の状態を復元
+  ctx.fillRect(60,60,30,30);   // 復元した設定で矩形を描画
+}
+ + + +

最初のステップで、大きな矩形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、2 番目のやや小さい青色の矩形を描いて、状態を保存します。もう一度描画設定を変更して、3 番目の半透明な白色の矩形を描きます。

+ +

ここまでは、これまでの章で行ってきたことによく似ています。しかし最初に restore() 文を呼び出したとき、スタックの先頭の描画状態が削除されて、その設定が復元されます。save() を使用して状態を保存しなければ、前の状態に戻すために塗りつぶし色や透過性を手動で変更しなければなりません。ここではプロパティが 2 つであり容易ですが、プロパティが多ければコードが一気にとても長くなります。

+ +

2 番目の restore() 文を呼び出すと、元の状態 (1 番目の save を呼び出す前に設定した状態) を復元して、最後の矩形を再び黒色で描きます。

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

移動

+ +

1 番目の変換メソッドとして、translate() を見ていきましょう。このメソッドは、canvas や canvas の原点をグリッド内の別の位置へ移動するために使用します。

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
canvas や canvas の原点をグリッド上で移動します。x は水平方向の移動距離、y はグリッドを垂直方向の移動距離を示します。
+
+ +

変換を行う前に canvas の状態を保存しておくことは、よいアイデアです。ほとんどの場合、元の状態に戻すためには逆の変換を行うよりも restore メソッドを呼び出すほうが簡単です。また、ループ内で変換を行っているときに canvas の状態の保存や復元を行わなければ、canvas の端の外側に描画したために、描いたものの一部を失ってしまうかもしれません。

+ +

translate の例

+ +

この例は、canvas の原点を移動する利点をいくつか示しています。translate() メソッドを使用しなければ、すべての矩形が同じ位置 (0,0) に描かれます。また translate() によって、fillRect() 関数で座標を手動で調整する必要なく、どこにでも自由に矩形を置くことができます。これにより若干理解しやすく、また使いやすくなります。

+ +

draw() 関数で、for ループを使用して fillRect() 関数を 9 回呼び出しています。それぞれのループで canvas を移動して矩形を描き、その後に元の状態を復元します。描画位置を調節する translate() を頼って、fillRect() は毎回同じ座標を使用していることに注目してください。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i=0;i<3;i++) {
+    for (var j=0;j<3;j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
+      ctx.translate(10+j*50,10+i*50);
+      ctx.fillRect(0,0,25,25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

回転

+ +

2 番目の変換メソッドは rotate() です。現在の原点を中心にして canvas を回転させるために使用します。

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
現在の原点を中心にしてラジアンで示した angle の分、canvas を時計回りに回転します。
+
+ +

回転の中心は、常に canvas の原点です。中心を変更するには、translate() メソッドを使用して canvas を移動しなければなりません。

+ +

rotate の例

+ +

この例は、まずは canvas の原点で矩形を回転するために rotate() メソッドを使用して、次に矩形自身の中心で回転するために translate() の助けを借りています。

+ +
+

備忘: 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは以下の方法で変換できます: radians = (Math.PI/180)*degrees

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 左の矩形を canvas の原点で回転する
+  ctx.save();
+  // blue rect
+  ctx.fillStyle = "#0095DD";
+  ctx.fillRect(30,30, 100, 100);
+  ctx.rotate((Math.PI/180)*25);
+  // 灰色の矩形
+  ctx.fillStyle = "#4D4E53";
+  ctx.fillRect(30,30, 100, 100);
+  ctx.restore();
+
+  // 右の矩形を矩形の中心で回転する
+  // draw blue rect
+  ctx.fillStyle = "#0095DD";
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // 矩形の中心に移動する
+                          // x = x + 0.5 * 幅
+                          // y = y + 0.5 * 高さ
+  ctx.rotate((Math.PI/180)*25); // 回転する
+  ctx.translate(-200, -80); // 元の位置に移動する
+
+  // 灰色の矩形を描く
+  ctx.fillStyle = "#4D4E53";
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

矩形を中心で回転するために、canvas を矩形の中心へ移動した後に canvas を回転します。そして canvas を 0,0 へ移動した後に矩形を描きます。

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

スケーリング

+ +

次の変換メソッドはスケーリングです。canvas のグリッドの単位を増減するために使用します。これは、図形やビットマップを縮小または拡大して描くために使用できます。

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
canvas の単位を x (水平方向) または y (垂直方向) で指定した分スケーリングします。どちらの引数も実数です。1.0 より小さい値は単位あたりのサイズが減少、1.0 より大きい値は単位あたりのサイズが増加します。1.0 では単位あたりのサイズが変わりません。
+
+ +

負数を使用すると軸を反転できます (例えば translate(0,canvas.height); scale(1,-1); で、原点が左下の隅にある有名なデカルト座標系になります)。

+ +

デフォルトでは、canvas の 1 単位は 1 ピクセルとまったく同じです。例えば、スケーリング係数に 0.5 を適用すると 1 単位が 0.5 ピクセルになり、図形が半分のサイズで描かれます。同様にスケーリング係数を 2.0 に設定すると単位あたりのサイズが増えて、1 単位あたり 2 ピクセルになります。この結果、図形は 2 倍の大きさで描かれます。

+ +

scale の例

+ +

この例は、図形をさまざまなスケーリング係数で描きます。

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // シンプルな図形を描いて、スケーリングする
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1,10,10,10);
+  ctx.restore();
+
+  // 水平方向に反転する
+  ctx.scale(-1, 1);
+  ctx.font = "48px serif";
+  ctx.fillText("MDN", -135, 120);
+}
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

変形

+ +

最後に、以下の変換メソッドで、変換行列によって直接変更することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
引数で表した行列と、現在の変換行列で乗算を行います。変換行列は以下のとおりです: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
いずれかの引数が Infinity になる場合は、メソッドで例外を発生させるのではなく行列を infinite としてマークしなければなりません。
+
+ +

この関数の引数は以下のとおりです:

+ +
+
a (m11)
+
水平方向のスケーリング。
+
b (m12)
+
水平方向のスキュー。
+
c (m21)
+
垂直方向のスキュー。
+
d (m22)
+
垂直方向のスケーリング。
+
e (dx)
+
水平方向の移動。
+
f (dy)
+
垂直方向の移動。
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
現在の変形を単位行列にリセットして、同じ引数で transform() メソッドを呼び出します。これは基本的に、現在の変形をアンドゥしてから指定した変形を行う操作を一度に行うものです。
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
現在の変形を単位行列にリセットします。これは ctx.setTransform(1, 0, 0, 1, 0, 0); を呼び出すことと同じです。
+
+ +

transform と setTransform の例

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI/6);
+  var cos = Math.cos(Math.PI/6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i=0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
diff --git a/files/ja/web/api/canvas_api/tutorial/using_images/index.html b/files/ja/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..588a662e5b --- /dev/null +++ b/files/ja/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,337 @@ +--- +title: 画像を使う +slug: Web/Guide/HTML/Canvas_tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

これまで、図形を作成してスタイルを適用する方法を見てきました。{{HTMLElement("canvas")}} のより面白い機能のひとつが、画像を扱えることです。これは動的な画像合成を行う、グラフの背景として使用する、ゲームのスプライトとして使用するなどといったことが可能です。PNG、GIF、JPEG といった、ブラウザがサポートする形式の外部画像を使用できます。同じページ上の別の canvas 要素によって生成された画像も、ソースとして使用できます!

+
+ +

基本的には 2 ステップの手続きによって、画像を canvas にインポートします:

+ +
    +
  1. {{domxref("HTMLImageElement")}} オブジェクトまたは別の canvas 要素への参照を、ソースとして取得します。URL を与えることでも、画像を使用できます。
    2. +
  2. drawImage() 関数を使用して、画像を canvas に描きます。
    3. +
+ +

これを行う方法を見ていきましょう。

+ +

描く画像を取得する

+ +

canvas API は、以下のデータ形式を画像ソースとして使用できます:

+ +
+
{{domxref("HTMLImageElement")}}
+
{{HTMLElement("img")}} 要素だけでなく、Image() コンストラクタを使用して作成した画像も含みます。
+
{{domxref("HTMLVideoElement")}}
+
HTML の {{HTMLElement("video")}} 要素を画像ソースとして使用すると、現在のフレームを動画から取得して、画像として使用します。
+
{{domxref("HTMLCanvasElement")}}
+
別の {{HTMLElement("canvas")}} 要素を画像ソースとして使用できます。
+
+ +

これらのソースは集約的に、{{domxref("CanvasImageSource")}} 型から参照されています。

+ +

canvas で使用する画像を取得する方法がいくつかあります。

+ +

同一ページ上の画像を使用する

+ +

以下のいずれかを使用して、canvas として同一ページ上の画像への参照を取得できます:

+ +
    +
  • {{domxref("document.images")}} コレクション
    • +
  • {{domxref("document.getElementsByTagName()")}} メソッド
    • +
  • 使用したい特定の画像の ID がわかる場合は、特定の画像を取得するために {{domxref("document.getElementById()")}} を使用できます。
    • +
+ +

ほかのドメインにある画像を使用する

+ +

{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、drawImage() を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると canvas を汚染します。

+ +

ほかの canvas 要素を使用する

+ +

通常の画像と同様に、{{domxref("document.getElementsByTagName()")}} または {{domxref("document.getElementById()")}} メソッドを使用してほかの canvas 要素にアクセスできます。対象の canvas を使用する前に、そのキャンバスで描画を終えるようにしてください。

+ +

より実践的な使用法のひとつが、別の大きな canvas のサムネイルビューとして第 2 の canvas を使用することです。

+ +

最初から画像を作成する

+ +

もうひとつの方法は、スクリプト内で新たな {{domxref("HTMLImageElement")}} オブジェクトを作成することです。そのために、便利な Image() コンストラクタを使用できます:

+ +
var img = new Image();   // 新たな img 要素を作成
+img.src = 'myImage.png'; // ソースのパスを設定
+
+ +

このスクリプトを実行すると、画像の読み込みが始まります。

+ +

画像の読み込みが完了する前に drawImage() を呼び出しても、何も行いません (あるいは、古いブラウザでは例外が発生するかもしれません)。よって画像を読み込む前に描画しないようにするために、load イベントを使用する必要があります:

+ +
var img = new Image();   // 新たな img 要素を作成
+img.addEventListener("load", function() {
+  // drawImage を実行する文をここに置く
+}, false);
+img.src = 'myImage.png'; // ソースのパスを設定
+
+ +

これは、外部の画像を 1 つしか使用しない場合はよい方法ですが、複数の画像を追跡しなければならない場合は、より器用な方法に頼らなければなりません。画像の事前読み込み法を見ていくことはこのチュートリアルの対象を超えますが、心に留めておいてください。

+ +

data: URL で画像を埋め込む

+ +

画像を埋め込む別の方法が、data: url です。Data URL によって、画像を Base64 でエンコードした文字列として、コード内で完全に定義できます。

+ +
var img = new Image();   // 新たな img 要素を作成
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

data URL の利点のひとつが、別にサーバとの通信を行うことなく即座に結果の画像を使用できることです。ほかに潜在的な利点として CSS、JavaScript、HTML、画像をひとつのファイルにカプセル化することもでき、ほかの場所へ持ち運びやすくなります。

+ +

この方法の欠点は画像がキャッシュされないことと、大きな画像をエンコードした URL がとても長くなることです。

+ +

動画のフレームを使用する

+ +

{{HTMLElement("video")}} 要素が提供する動画のフレームも (動画が非表示であっても) 使用できます。例えば ID が "myvideo" である {{HTMLElement("video")}} 要素があるとき、以下のようなことができます:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

これは動画の {{domxref("HTMLVideoElement")}} オブジェクトを返します。このオブジェクトは先に述べたとおり、CanvasImageSource として使用できるオブジェクトのひとつです。

+ +

画像を描く

+ +

ソース画像オブジェクトへの参照を取得したら、drawImage() メソッドを使用して画像を canvas に描画できます。後ほど見るように、drawImage() メソッドをオーバーロードした派生形がいくつかあります。もっとも基本的な形式は以下のようなものです:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
引数 image で指定した CanvasImageSource を、座標 (x, y) に描画します。
+
+ +
+

SVG 画像は、ルート <svg> 要素で幅と高さを指定しなければなりません。

+
+ +

例: シンプルな折れ線グラフ

+ +

以下の例は、小さな折れ線グラフの背景として外部の画像を使用しています。背景画像を使用すると背景を生成するコードが不要になりますので、スクリプトをかなり小さくすることができます。この例では画像を 1 つしか使用しませんので、描画する文を実行するために image オブジェクトの load イベントハンドラを使用しています。drawImage() メソッドは背景画像を座標 (0, 0) に配置します。これは canvas の左上の隅です。

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    ctx.drawImage(img,0,0);
+    ctx.beginPath();
+    ctx.moveTo(30,96);
+    ctx.lineTo(70,66);
+    ctx.lineTo(103,76);
+    ctx.lineTo(170,15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

結果のグラフは以下のようになります:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

スケーリング

+ +

drawImage() メソッドの第 2 の形式は引数が 2 つ追加されており、canvas に拡大・縮小した画像を配置することができます。

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
これは引数 width および height を追加しており、画像を canvas に描画する際のサイズを示します。
+
+ +

例: 画像をタイリングする

+ +

以下の例は画像を壁紙として使用して、canvas 上で数回繰り返して貼り付けています。ループ処理によって、さまざまな場所に縮小した画像を貼り付けました。以下のコードでは、最初の for ループで行の繰り返し処理を行います。2 番目の for ループで列の繰り返し処理を行います。画像は元のサイズの 3 分の 1 である、50x38 ピクセルに縮小しています。

+ +
+

注記: 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function(){
+    for (var i=0;i<4;i++){
+      for (var j=0;j<3;j++){
+        ctx.drawImage(img,j*50,i*38,50,38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

canvas の結果は以下のようになります:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

切り抜き

+ +

drawImage() メソッドの第 3 かつ最後の形式は、画像ソースについて 8 個の引数が追加されています。これはソース画像の一部を切り抜いて、サイズ変更および canvas への描画を行います。

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
この関数は、image から左上の隅が (sx, sy)、幅と高さが sWidth および sHeight である矩形で指定されるソース画像の領域を取得して、canvas の (dx, dy) で示した位置に配置して、dWidth および dHeight で指定したサイズに拡大・縮小します。
+
+ +

何を行っているかを正しく理解するために、右の画像を見ると役に立つでしょう。始めの 4 つの引数は、ソース画像を切り抜く場所とサイズを定義します。最後の 4 つの引数は、描画先 canvas で画像を描画する矩形を定義します。

+ +

切り抜きは、画像を合成する際に役に立つでしょう。ひとつの画像ファイルにすべての要素を置いておき、このメソッドを使用して完成形の描画結果に合成します。例えばチャートを作成したいときに、すべての必要なテキストをひとつのファイルに収めた PNG 画像を用意して、データに応じてチャートの目盛りをとても簡単に変更できるでしょう。ほかの利点として、すべての画像を個別に読み込む必要がありませんので、読み込みパフォーマンスが向上するでしょう。

+ +

例: 画像をフレームに収める

+ +

以下の例では前の例と同じサイの画像を使用していますが、頭の部分を切り抜いて額縁の中に合成しています。額縁の画像は、ドロップシャドウを含む 24 ビット PNG 画像です。GIF や 8 ビット PNG 画像と異なり、24 ビット PNG 画像は 8 ビットのアルファチャンネルが含まれていますので、マットカラーに悩まされることなく背景に重ねることができます。

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // スライス画像を描く
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // フレームを描く
+  ctx.drawImage(document.getElementById('frame'),0,0);
+}
+ +

この例では、画像の読み込みに別の方法を使用しています。新しい {{domxref("HTMLImageElement")}} オブジェクトを作成して画像を読み込む代わりに、画像を HTML ソース内の {{HTMLElement("img")}} タグとして直接含めておき、そこから画像を取り込んでいます。この画像は、CSS の {{cssxref("display")}} プロパティを none に設定して隠しています。

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

スクリプト自体はとてもシンプルです。それぞれの {{HTMLElement("img")}} に ID 属性を割り当てており、{{domxref("document.getElementById()")}} を使用して簡単に選択できます。最初の画像からサイを切り抜いて canvas 上でサイズを調整するため単純に drawImage() を使用して、その後に第 2 の drawImage() を呼び出して枠を描きます。

+ + + +

この章の最後の例では、小さなアートギャラリーを作ります。いくつかの画像を持つテーブルで、ギャラリーを構成します。ページを読み込むとそれぞれの画像のために {{HTMLElement("canvas")}} 要素を挿入して、そこに画像と額縁を描画します。

+ +

ここでは、周囲に描く額縁を含むすべての画像が一定の幅および高さです。額縁をぴったり合わせるために画像の幅と高さを使用するよう、スクリプトを改良することができるでしょう。

+ +

以下のコードは自明でしょう。{{domxref("document.images")}} コンテナに対するループ処理を行って、適宜新たな canvas 要素を追加します。おそらく、DOM についてあまり詳しくない場合に注意したほうがよいことは、{{domxref("Node.insertBefore")}} メソッドを使用していることです。insertBefore() は、ある要素 (image) の前に新たな要素 (canvas 要素) を挿入したいときに使用する、親ノード (テーブルのセル) のメソッドです。

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

こちらが、見栄えをよくするための CSS です:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

額縁付き画像を描く JavaScript が、すべてを結びつけます:

+ +
function draw() {
+
+  // すべての画像に対するループ処理
+  for (var i=0;i<document.images.length;i++){
+
+    // 額縁の画像用の canvas は追加しない
+    if (document.images[i].getAttribute('id')!='frame'){
+
+      // canvas 要素を作成
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width',132);
+      canvas.setAttribute('height',150);
+
+      // 画像の前に挿入
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // canvas に画像を描く
+      ctx.drawImage(document.images[i],15,20);
+
+      // 額縁を追加
+      ctx.drawImage(document.getElementById('frame'),0,0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

画像のサイズ変更の動作を制御する

+ +

先に述べたとおり、サイズを変更した画像は変更処理の影響で、不鮮明またはブロック状のアーティファクトが発生します。描画コンテキスト内で画像のサイズを変更する際に使用する画像スムージングアルゴリズムを制御するために、描画コンテキストの {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティを使用できます。デフォルトではこれが true であり、画像のサイズを変更する際にスムージングを行います。以下のように、この機能は無効化できます:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
diff --git a/files/ja/web/api/css_painting_api/guide/index.html b/files/ja/web/api/css_painting_api/guide/index.html new file mode 100644 index 0000000000..af90696aac --- /dev/null +++ b/files/ja/web/api/css_painting_api/guide/index.html @@ -0,0 +1,540 @@ +--- +title: CSS Painting APIを使用する +slug: Web/API/CSS_Painting_API/ガイド +tags: + - CSS + - CSS Paint API + - Canvas + - Houdini + - Learn +translation_of: Web/API/CSS_Painting_API/Guide +--- +

CSS Paint API を用いると開発者がプログラムで画像を定義できます。CSS の background-image, border-image, mask-image など CSS 画像を呼び出せる場所ならどこでも使用できるように設計されています。

+ +

CSS スタイルシートで使用される画像をプログラムで作成するには、いくつかのステップを踏む必要があります:

+ +
    +
  1. registerPaint() 関数を用いたペイント Worklet を定義します
    2. +
  2. その Worklet を登録します
    3. +
  3. {{cssxref('paint()','paint()')}} という CSS 関数を読み込みます
    4. +
+ +

これらの手順を詳しく説明するために、このヘッダーのようなハーフハイライトの背景を作成することから始めます:

+ +

Text reading 'My Cool Header' with a solid yellow background image block on the bottom left two thirds of the header

+ +

CSS paint worklet

+ +

外部スクリプトファイルでは、registerPaint() 関数を使用して CSS Paint worklet の名前をつけています。この関数には 2 つの引数が必要です。最初の引数はその Worklet の名前です — これは CSS で要素にスタイルを適用する際に paint() 関数のパラメーターとして渡されます。2 つ目の引数は、すべての魔法を行うクラスで、その中でコンテキストオプションと、イメージとなる 2 次元キャンバスに何を描画するかを定義します。

+ +
registerPaint('headerHighlight', class {
+
+  /*
+       アルファ透明度を許可するかどうかを定義します。既定では true にします。
+       false に設定した場合、すべてのキャンバスに
+       使用されている色は完全に不透明になります。
+    */
+  static get contextOptions() {
+           return { alpha: true };
+    }
+
+    /*
+        ctx は 2D の描画コンテキストで
+        HTML5 Canvas API のサブセットです。
+    */
+  paint(ctx) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect(0, 15, 200, 20);     /* 順序: x, y, w, h */
+  }
+});
+ +

このクラスの例では、contextOptions() を用いて 1 つだけコンテキストオプションを定義しています。そこではアルファ透明度を許可するシンプルなオブジェクトを返しています。

+ +

それでは paint() 関数を用いてキャンバスに描画していきます。

+ +

paint() 関数は 3 つの引数を持てます。ここでは最初の引数だけ渡していて、それはレンダリングコンテキスト(後ほど詳しく説明します)といい、ふつう ctx という変数名で表されます。2D レンダリングコンテキストは HTML5 Canvas API のサブセットで、Houdini (PaintRenderingContext2Dと呼ばれる) で利用可能なバージョンはCanvas APIのほとんどすべての機能を含むサブセットですが、そのうち CanvasImageData, CanvasUserInterface, CanvasText, CanvasTextDrawingStyles の各 API は 除かれています。

+ +

黄色の影をつくるために fillStyle を hsla(55, 90%, 60%, 1.0) と定義し、その色の矩形を作成するために fillRect() を呼び出します。fillRect() のパラメータは、順に x 軸原点、y 軸原点、幅、高さです。fillRect(0, 15, 200, 20) は、幅 200 単位、高さ 20 単位の矩形を、コンテンツボックスの左端から 0 単位、上端から 15 単位に作成します。

+ +

CSS の background-size と background-position プロパティを使用して、この背景画像のサイズを変更したり、再配置したりすることができますが、これは描画 Worklet で作成した黄色のボックスのデフォルトのサイズと配置です。

+ +

この例はシンプルなものにしてみました。より多くのオプションについては、canvas のドキュメントを参照してください。また、このチュートリアルの後半では、少し複雑さを追加しています。

+ +

描画 Worklet を使用する

+ +

描画 Worklet を使用するためには、addModule() を用いて登録し、HTML 内の目的の DOM ノードに適用される CSS セレクターのスタイルに含める必要があります。

+ +

Worklet を登録する

+ +

描画 Worklet とデザインは、上に示した外部スクリプトで行われました。この Worklet をメインスクリプトから登録する必要があります。

+ +
CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');
+ +

これは、メイン HTML 内の <script> またはドキュメントからリンクされた外部 JavaScript ファイル内の、描画 Worklet の addModule() メソッドを使用して行うことができます。

+ +

以下の例では、描画 Worklet は Github でホストしています。

+ +
+
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');
+ +

CSSで描画 Worklet を参照する

+ +

登録された描画 Worklet ができたら、それをCSSで使用することができます。他の <image> タイプと同様に CSS の paint() 関数を使用し、 描画 Worklet の registerPaint() 関数でセットしたのと同じ文字列識別子を使用してください。

+ +
.fancy {
+  background-image: paint(headerHighlight);
+}
+ +

一緒につかう

+ +

そして、ページ上の任意の要素に fancy クラスを追加して、背景として黄色のボックスを追加することができます。

+ +
<h1 class="fancy">My Cool Header</h1>
+ +

以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。

+
+ +

{{EmbedLiveSample("paintapi", 120, 120)}}

+ +

ワークレットのスクリプトを弄ることはできませんが、背景画像のサイズと位置を変更するために、background-size と background-position を変更することができます。

+ +

PaintSize

+ +

上の例では、20×200 の単位のボックスを作成し、要素の上端から 15 単位を塗りつぶしました。これは要素の大きさに関係なく同じです。テキストが小さい場合、黄色のボックスは巨大なアンダーラインのように見えます。文字が大きい場合は、最初の 3 文字の上にバーがあるように見えるかもしれません。 背景画像が要素のサイズと相対的なものであればより良いでしょう — 要素の paintSize プロパティを使用して、背景画像が要素のボックスモデルのサイズに比例するようにすることができます。

+ +

The background is 50% of the height and 60% of the width of the element

+ +

上の画像では、背景は要素の大きさに比例しています。3 番目の例では、ブロックレベルの要素に width: 50%; を設定しているため、要素が狭くなり、その結果、背景画像が狭くなります。

+ +

これを行うためのコードは次のようになります:

+ +
registerPaint('headerHighlight', class {
+
+  static get contextOptions() {
+           return { alpha: true };
+  }
+
+    /*
+        ctx は 2D 描画コンテキスト
+        size は paintSize, 描画するボックスの高さ(height)と幅(width)を持つ
+    */
+
+  paint(ctx, size) {
+        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
+        ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
+  }
+});
+ +

このコード例は、最初の例とは 2 つの違いがあります:

+ +
    +
  1. paint() の第 2 引数として描画サイズを使用しています。
    2. +
  2. 矩形の寸法と位置を、絶対値ではなく、要素ボックスのサイズに相対するように変更しました。
    3. +
+ +

paint() に第 2 引数を渡すことで、.width と .height プロパティを使って要素の幅と高さにアクセスすることができます。

+ +

私たちのヘッダーは、サイズに応じてハイライトが変化するようになりました。

+ + + +

Worklet のスクリプトをいじることはできませんが、要素の font-size と width を変更して背景画像のサイズを変更できます。

+ +

以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。

+ +

{{EmbedLiveSample("example2", 300, 300)}}

+ +

カスタムプロパティ

+ +

Worklet は、要素のサイズにアクセスするだけでなく、CSS のカスタムプロパティや通常のCSS プロパティにもアクセスすることができます。

+ +
registerPaint('cssPaintFunctionName', class {
+     static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; }
+     static get inputArguments() { return ['<color>']; }
+     static get contextOptions() { return {alpha: true}; }
+
+     paint(drawingContext, elementSize, styleMap) {
+         // 描画コードはここに書く
+});
+
+ +

paint() 関数の 3 つの引数には、描画コンテキスト、描画サイズ、プロパティが含まれます。プロパティにアクセスできるようにするために、静的な inputProperties() メソッドをインクルードしています。これは、通常のプロパティやカスタムプロパティを含む CSS プロパティへの動的なアクセスを提供し、プロパティ名の array を返します。最後にinputArguments について見ていきます。

+ +

例

+ +
+

3 種類の色と 3 種類の幅の間で周回する背景画像を使って、項目一覧を作成してみましょう。

+ +

The width and color of the background image changes based on the custom properties

+ +

この CSS では、--boxColor と --widthSubtractor のカスタム プロパティを使用して、作成した背景ボックスの色と幅の減算器を指定しています。

+ + + + + +
li {
+   background-image: paint(boxbg);
+   --boxColor: hsla(55, 90%, 60%, 1.0);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(155, 90%, 60%, 1.0);
+   --widthSubtractor: 20;
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(255, 90%, 60%, 1.0);
+   --widthSubtractor: 40;
+}
+
+ +

Worklet ではこれらのカスタムプロパティを参照することができます。

+ +
registerPaint('boxbg', class {
+
+  static get contextOptions() { return {alpha: true}; }
+
+  /*
+     この関数を使用して、要素に対して定義されているカスタムプロパティ (または 'height' のような
+     通常のプロパティ) を取得します。指定された配列で返します。
+  */
+  static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
+
+  paint(ctx, size, props) {
+    /*
+       ctx -> 描画コンテキスト
+       size -> paintSize: 幅と高さ
+       props -> properties: get() メソッド
+    */
+
+    ctx.fillStyle = props.get('--boxColor');
+    ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
+  }
+});
+ +

registerPaint() に渡すクラスの inputProperties() メソッドを使用して、boxbg が適用されている要素に設定されている 2 つのカスタムプロパティの値を取得しました。そしてそれらを paint() 関数内で使用します。inputProperties() メソッドは、カスタムプロパティだけでなく、要素に影響するすべてのプロパティを返すことができます。

+ +

<script> 内で Worklet を登録するには以下のようにします:

+ +
+
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');
+
+ +

{{EmbedLiveSample("example3", 300, 300)}}

+ +

Worklet のスクリプトをいじることはできませんが、カスタムプロパティの値を変更して背景画像の色や幅を変更することはできます。

+ +

より複雑にしてみる

+ +

これまでの例は、例えば装飾的に生成されたコンテンツを ::before で配置したり、background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; とするなど、既存のCSSプロパティを使用する方法で再現することができるので、あまり刺激的には見えないかもしれません。CSS Painting API が面白くて強力なのは、変数を渡して自動的にサイズを変更する複雑な画像を作成できることです。

+ +

それではもっと複雑な例を見てみましょう。

+ +
registerPaint('headerHighlight', class {
+  static get inputProperties() { return ['--highColour']; }
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props) {
+
+		/* どの場所からハイライトを始めるか、寸法をセットする */
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const highlightHeight = size.height * 0.85;
+        const color = props.get('--highColour');
+
+		ctx.fillStyle = color;
+
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
+		ctx.lineTo( x, highlightHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+
+		/* 破線を作成 */
+		for (let i = 0; i < 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20, y );
+			ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight );
+			ctx.lineTo( (blockWidth) + (start * 10) + 10, y );
+			ctx.closePath();
+			ctx.fill();
+		}
+  } // paint
+});
+ +
+

ここで作られる画像を背景とする小さな HTML を用意します:

+ +
<h1 class="fancy">Largest Header</h1>
+<h3 class="fancy">Medium size header</h3>
+<h6 class="fancy">Smallest Header</h6>
+ +

それぞれのヘッダーは、それぞれ異なった値の --highColor カスタムプロパティを持つことができます。

+ +
.fancy {
+  background-image: paint(headerHighlight);
+}
+h1 { --highColour: hsla(155, 90%, 60%, 0.7); }
+h3 { --highColour: hsla(255, 90%, 60%, 0.5); }
+h6 { --highColour: hsla(355, 90%, 60%, 0.3); }
+ +

そして、Worklet を登録します

+ +
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');
+ +

{{EmbedLiveSample("example4", 300, 300)}}

+ +

この Worklet そのものを編集することはできませんが、CSS や HTML をいじることはできます。ヘッダーの float と clear を試してみるのはどうでしょう？

+ +

上記の背景画像を CSS paint API を使わずに作ってみるのもいいかもしれません。これは可能ですが、作成したい色ごとに異なる、かなり複雑な線形グラデーションを宣言しなければなりません。CSS paint API を使えば、1 つの Worklet を再利用することができ、その場合でも異なる色を渡すことができます。

+
+ +

パラメーターを渡す

+ +

CSS Paint API を使用すると、カスタムプロパティや通常のプロパティにアクセスできるだけでなく、カスタム引数を paint() 関数に渡すこともできます。

+ +

CSS で関数を呼び出すときに、これらの引数を追加することができます。例えばある時、背景を塗りつぶすのではなく、背景をなぞるようにしたいとしましょう — そのために追加の引数を加えておきましょう。

+ +
li {
+	background-image: paint(hollowHighlights, stroke);
+}
+
+ +

これで、registerPaint() に渡されるクラスの inputArguments() メソッドを使用して、paint() 関数に追加したカスタム引数にアクセスできるようになりました。

+ +
static get inputArguments() { return ['*']; }
+
+ +

実際にアクセスするにはこうします。

+ +
paint(ctx, size, props, args) {
+
+	// カスタム引数を使う
+	const hasStroke = args[0].toString();
+
+	// stroke 引数が 'stroke' の場合は塗りつぶしはしません
+	if (hasStroke === 'stroke') {
+		ctx.fillStyle = 'transparent';
+		ctx.strokeStyle = colour;
+	}
+	...
+}
+ +

2 つ以上の引数も渡せます。

+ +
li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+
+ +

また、特定のタイプの引数を指定することもできます。引数の値をリストで get する際に、特に <length> で単位を指定します。

+ +
static get inputArguments() { return ['*', '<length>']; }
+ +

この場合は <length> 属性を要求しました。返される配列の最初の要素は CSSUnparsedValue です。2 番目の要素は CSSStyleValue です。

+ +

カスタム引数がユニットなどの CSS 値である場合、registerPaint() 関数で取得する際にvalue type キーワードを使用することで、Typed OM CSSStyleValue クラス (およびサブクラス) を呼び出すことができます。

+ +

それではストロークの幅を何ピクセルにするか、2 番目の引数を追加してみましょう:

+ +
li {
+	background-image: paint(hollowHighlights, stroke, 10px);
+}
+
+ +

引数の値をリストで get する際に、<length> 単位を要求します。

+ +
static get inputArguments() { return ['*', '<length>']; }
+
+ +

これで型と値のプロパティにアクセスできるようになりました。つまり箱から出してすぐにピクセル数と数値型を取得できるということです。(確かに ctx.lineWidth は、長さの単位を持つ値ではなく float を値として受け取りますが、これは例ですから...)

+ +
paint(ctx, size, props, args) {
+
+		const strokeWidth = args[1];
+
+		if (strokeWidth.unit === 'px') {
+			ctx.lineWidth = strokeWidth.value;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+
+	...
+}
+
+ +

この Worklet のさまざまな部分を制御するためにカスタムプロパティを使用することと、ここに記載されている引数との違いに注目する価値があります。カスタムプロパティ (および実際にはスタイルマップ上のすべてのプロパティ) はグローバルなもので、CSS (および JS) 内の他の場所で使用することができます。

+ +

例えば paint() 関数内で色を設定するために --mainColor を用意するのは便利ですが、これは CSS の他の場所で色を設定するのにも使えます。これを paint のためだけに特別に変更したい場合は、かなり難しいかもしれません。そこで便利なのがカスタム引数です。もう一つの考え方としては、引数は実際に描画するものを制御するために設定され、プロパティはスタイルを制御するために設定されるということです。

+ +

The list items have a background image that is either pink, purple or green, with different stroke widths, and the green one being filled.

+ +

これでこの API の本当のメリットが見えてきました。カスタムプロパティと paint() 関数の引数の両方を使って CSS から無数の描画パラメータを制御できるようになれば、再利用可能で制御性の高いスタイリング関数を作り始めることができます。

+ +
registerPaint('hollowHighlights', class {
+
+  static get inputProperties() { return ['--boxColor']; }
+  // `paint` 関数に渡されるカスタム引数
+  static get inputArguments() { return ['*','']; }
+
+  static get contextOptions() { return {alpha: true}; }
+
+  paint(ctx, size, props, args) {
+    // ctx   -> 描画コンテキスト
+    // size  -> 描画したいボックスの大きさ
+    // props -> 要素に存在するカスタププロパティのリスト
+	// args  -> cssから paint() 関数を呼ばれた際のカスタム引数のリスト
+
+		// どの場所からハイライトを始めるか、寸法
+		const x = 0;
+		const y = size.height * 0.3;
+		const blockWidth = size.width * 0.33;
+		const blockHeight = size.height * 0.85;
+
+		// CSS から paint() 関数に渡された値
+		const colour = props.get( '--boxColor' );
+		const strokeType = args[0].toString();
+		const strokeWidth = parseInt(args[1]);
+
+
+		// 線幅を設定する
+		if ( strokeWidth ) {
+			ctx.lineWidth = strokeWidth;
+		} else {
+			ctx.lineWidth = 1.0;
+		}
+		// 塗りつぶしタイプを設定する
+		if ( strokeType === 'stroke' ) {
+			ctx.fillStyle = 'transparent';
+			ctx.strokeStyle = colour;
+		} else if ( strokeType === 'filled' ) {
+			ctx.fillStyle = colour;
+			ctx.strokeStyle = colour;
+		} else {
+			ctx.fillStyle = 'none';
+			ctx.strokeStyle = 'none';
+		}
+
+		// 四角
+		ctx.beginPath();
+		ctx.moveTo( x, y );
+		ctx.lineTo( blockWidth, y );
+		ctx.lineTo( blockWidth + blockHeight, blockHeight );
+		ctx.lineTo( x, blockHeight );
+		ctx.lineTo( x, y );
+		ctx.closePath();
+		ctx.fill();
+		ctx.stroke();
+		// 破線
+		for (let i = 0; i < 4; i++) {
+			let start = i * 2;
+			ctx.beginPath();
+			ctx.moveTo( blockWidth + (start * 10) + 10, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20, y);
+			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
+			ctx.lineTo( blockWidth + (start * 10) + 10, y);
+			ctx.closePath();
+			ctx.fill();
+			ctx.stroke();
+		}
+
+  } // paint
+});
+
+ +

私たちは、異なる色、線幅を設定し、背景画像が塗りつぶされるべきか、中空になるべきかを選択することができます:

+ +
+
li {
+   --boxColor: hsla(155, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 5px);
+}
+
+li:nth-of-type(3n) {
+   --boxColor: hsla(255, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, filled,  3px);
+}
+
+li:nth-of-type(3n+1) {
+   --boxColor: hsla(355, 90%, 60%, 0.5);
+   background-image: paint(hollowHighlights, stroke, 1px);
+}
+ + + +

私たちの作った Worklet を登録するには以下のようにします:

+ +
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');
+
+ +

{{EmbedLiveSample("example5", 300, 300)}}

+ +

関連情報

+ + diff --git "a/files/ja/web/api/css_painting_api/\343\202\254\343\202\244\343\203\211/index.html" "b/files/ja/web/api/css_painting_api/\343\202\254\343\202\244\343\203\211/index.html" deleted file mode 100644 index af90696aac..0000000000 --- "a/files/ja/web/api/css_painting_api/\343\202\254\343\202\244\343\203\211/index.html" +++ /dev/null @@ -1,540 +0,0 @@ ---- -title: CSS Painting APIを使用する -slug: Web/API/CSS_Painting_API/ガイド -tags: - - CSS - - CSS Paint API - - Canvas - - Houdini - - Learn -translation_of: Web/API/CSS_Painting_API/Guide ---- -

CSS Paint API を用いると開発者がプログラムで画像を定義できます。CSS の background-image, border-image, mask-image など CSS 画像を呼び出せる場所ならどこでも使用できるように設計されています。

- -

CSS スタイルシートで使用される画像をプログラムで作成するには、いくつかのステップを踏む必要があります:

- -
    -
  1. registerPaint() 関数を用いたペイント Worklet を定義します
    2. -
  2. その Worklet を登録します
    3. -
  3. {{cssxref('paint()','paint()')}} という CSS 関数を読み込みます
    4. -
- -

これらの手順を詳しく説明するために、このヘッダーのようなハーフハイライトの背景を作成することから始めます:

- -

Text reading 'My Cool Header' with a solid yellow background image block on the bottom left two thirds of the header

- -

CSS paint worklet

- -

外部スクリプトファイルでは、registerPaint() 関数を使用して CSS Paint worklet の名前をつけています。この関数には 2 つの引数が必要です。最初の引数はその Worklet の名前です — これは CSS で要素にスタイルを適用する際に paint() 関数のパラメーターとして渡されます。2 つ目の引数は、すべての魔法を行うクラスで、その中でコンテキストオプションと、イメージとなる 2 次元キャンバスに何を描画するかを定義します。

- -
registerPaint('headerHighlight', class {
-
-  /*
-       アルファ透明度を許可するかどうかを定義します。既定では true にします。
-       false に設定した場合、すべてのキャンバスに
-       使用されている色は完全に不透明になります。
-    */
-  static get contextOptions() {
-           return { alpha: true };
-    }
-
-    /*
-        ctx は 2D の描画コンテキストで
-        HTML5 Canvas API のサブセットです。
-    */
-  paint(ctx) {
-        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
-        ctx.fillRect(0, 15, 200, 20);     /* 順序: x, y, w, h */
-  }
-});
- -

このクラスの例では、contextOptions() を用いて 1 つだけコンテキストオプションを定義しています。そこではアルファ透明度を許可するシンプルなオブジェクトを返しています。

- -

それでは paint() 関数を用いてキャンバスに描画していきます。

- -

paint() 関数は 3 つの引数を持てます。ここでは最初の引数だけ渡していて、それはレンダリングコンテキスト(後ほど詳しく説明します)といい、ふつう ctx という変数名で表されます。2D レンダリングコンテキストは HTML5 Canvas API のサブセットで、Houdini (PaintRenderingContext2Dと呼ばれる) で利用可能なバージョンはCanvas APIのほとんどすべての機能を含むサブセットですが、そのうち CanvasImageData, CanvasUserInterface, CanvasText, CanvasTextDrawingStyles の各 API は 除かれています。

- -

黄色の影をつくるために fillStyle を hsla(55, 90%, 60%, 1.0) と定義し、その色の矩形を作成するために fillRect() を呼び出します。fillRect() のパラメータは、順に x 軸原点、y 軸原点、幅、高さです。fillRect(0, 15, 200, 20) は、幅 200 単位、高さ 20 単位の矩形を、コンテンツボックスの左端から 0 単位、上端から 15 単位に作成します。

- -

CSS の background-size と background-position プロパティを使用して、この背景画像のサイズを変更したり、再配置したりすることができますが、これは描画 Worklet で作成した黄色のボックスのデフォルトのサイズと配置です。

- -

この例はシンプルなものにしてみました。より多くのオプションについては、canvas のドキュメントを参照してください。また、このチュートリアルの後半では、少し複雑さを追加しています。

- -

描画 Worklet を使用する

- -

描画 Worklet を使用するためには、addModule() を用いて登録し、HTML 内の目的の DOM ノードに適用される CSS セレクターのスタイルに含める必要があります。

- -

Worklet を登録する

- -

描画 Worklet とデザインは、上に示した外部スクリプトで行われました。この Worklet をメインスクリプトから登録する必要があります。

- -
CSS.paintWorklet.addModule('nameOfPaintWorkletFile.js');
- -

これは、メイン HTML 内の <script> またはドキュメントからリンクされた外部 JavaScript ファイル内の、描画 Worklet の addModule() メソッドを使用して行うことができます。

- -

以下の例では、描画 Worklet は Github でホストしています。

- -
-
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/01partOne/header-highlight.js');
- -

CSSで描画 Worklet を参照する

- -

登録された描画 Worklet ができたら、それをCSSで使用することができます。他の <image> タイプと同様に CSS の paint() 関数を使用し、 描画 Worklet の registerPaint() 関数でセットしたのと同じ文字列識別子を使用してください。

- -
.fancy {
-  background-image: paint(headerHighlight);
-}
- -

一緒につかう

- -

そして、ページ上の任意の要素に fancy クラスを追加して、背景として黄色のボックスを追加することができます。

- -
<h1 class="fancy">My Cool Header</h1>
- -

以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。

-
- -

{{EmbedLiveSample("paintapi", 120, 120)}}

- -

ワークレットのスクリプトを弄ることはできませんが、背景画像のサイズと位置を変更するために、background-size と background-position を変更することができます。

- -

PaintSize

- -

上の例では、20×200 の単位のボックスを作成し、要素の上端から 15 単位を塗りつぶしました。これは要素の大きさに関係なく同じです。テキストが小さい場合、黄色のボックスは巨大なアンダーラインのように見えます。文字が大きい場合は、最初の 3 文字の上にバーがあるように見えるかもしれません。 背景画像が要素のサイズと相対的なものであればより良いでしょう — 要素の paintSize プロパティを使用して、背景画像が要素のボックスモデルのサイズに比例するようにすることができます。

- -

The background is 50% of the height and 60% of the width of the element

- -

上の画像では、背景は要素の大きさに比例しています。3 番目の例では、ブロックレベルの要素に width: 50%; を設定しているため、要素が狭くなり、その結果、背景画像が狭くなります。

- -

これを行うためのコードは次のようになります:

- -
registerPaint('headerHighlight', class {
-
-  static get contextOptions() {
-           return { alpha: true };
-  }
-
-    /*
-        ctx は 2D 描画コンテキスト
-        size は paintSize, 描画するボックスの高さ(height)と幅(width)を持つ
-    */
-
-  paint(ctx, size) {
-        ctx.fillStyle = 'hsla(55, 90%, 60%, 1.0)';
-        ctx.fillRect( 0, size.height / 3, size.width * 0.4, size.height * 0.6 );
-  }
-});
- -

このコード例は、最初の例とは 2 つの違いがあります:

- -
    -
  1. paint() の第 2 引数として描画サイズを使用しています。
    2. -
  2. 矩形の寸法と位置を、絶対値ではなく、要素ボックスのサイズに相対するように変更しました。
    3. -
- -

paint() に第 2 引数を渡すことで、.width と .height プロパティを使って要素の幅と高さにアクセスすることができます。

- -

私たちのヘッダーは、サイズに応じてハイライトが変化するようになりました。

- - - -

Worklet のスクリプトをいじることはできませんが、要素の font-size と width を変更して背景画像のサイズを変更できます。

- -

以下の例は、CSS Painting API をサポートしているブラウザーでは上の画像のようになります。

- -

{{EmbedLiveSample("example2", 300, 300)}}

- -

カスタムプロパティ

- -

Worklet は、要素のサイズにアクセスするだけでなく、CSS のカスタムプロパティや通常のCSS プロパティにもアクセスすることができます。

- -
registerPaint('cssPaintFunctionName', class {
-     static get inputProperties() { return ['PropertyName1', '--customPropertyName2']; }
-     static get inputArguments() { return ['<color>']; }
-     static get contextOptions() { return {alpha: true}; }
-
-     paint(drawingContext, elementSize, styleMap) {
-         // 描画コードはここに書く
-});
-
- -

paint() 関数の 3 つの引数には、描画コンテキスト、描画サイズ、プロパティが含まれます。プロパティにアクセスできるようにするために、静的な inputProperties() メソッドをインクルードしています。これは、通常のプロパティやカスタムプロパティを含む CSS プロパティへの動的なアクセスを提供し、プロパティ名の array を返します。最後にinputArguments について見ていきます。

- -

例

- -
-

3 種類の色と 3 種類の幅の間で周回する背景画像を使って、項目一覧を作成してみましょう。

- -

The width and color of the background image changes based on the custom properties

- -

この CSS では、--boxColor と --widthSubtractor のカスタム プロパティを使用して、作成した背景ボックスの色と幅の減算器を指定しています。

- - - - - -
li {
-   background-image: paint(boxbg);
-   --boxColor: hsla(55, 90%, 60%, 1.0);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(155, 90%, 60%, 1.0);
-   --widthSubtractor: 20;
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(255, 90%, 60%, 1.0);
-   --widthSubtractor: 40;
-}
-
- -

Worklet ではこれらのカスタムプロパティを参照することができます。

- -
registerPaint('boxbg', class {
-
-  static get contextOptions() { return {alpha: true}; }
-
-  /*
-     この関数を使用して、要素に対して定義されているカスタムプロパティ (または 'height' のような
-     通常のプロパティ) を取得します。指定された配列で返します。
-  */
-  static get inputProperties() { return ['--boxColor', '--widthSubtractor']; }
-
-  paint(ctx, size, props) {
-    /*
-       ctx -> 描画コンテキスト
-       size -> paintSize: 幅と高さ
-       props -> properties: get() メソッド
-    */
-
-    ctx.fillStyle = props.get('--boxColor');
-    ctx.fillRect(0, size.height/3, size.width*0.4 - props.get('--widthSubtractor'), size.height*0.6);
-  }
-});
- -

registerPaint() に渡すクラスの inputProperties() メソッドを使用して、boxbg が適用されている要素に設定されている 2 つのカスタムプロパティの値を取得しました。そしてそれらを paint() 関数内で使用します。inputProperties() メソッドは、カスタムプロパティだけでなく、要素に影響するすべてのプロパティを返すことができます。

- -

<script> 内で Worklet を登録するには以下のようにします:

- -
-
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklet/boxbg.js');
-
- -

{{EmbedLiveSample("example3", 300, 300)}}

- -

Worklet のスクリプトをいじることはできませんが、カスタムプロパティの値を変更して背景画像の色や幅を変更することはできます。

- -

より複雑にしてみる

- -

これまでの例は、例えば装飾的に生成されたコンテンツを ::before で配置したり、background: linear-gradient(yellow, yellow) 0 15px / 200px 20px no-repeat; とするなど、既存のCSSプロパティを使用する方法で再現することができるので、あまり刺激的には見えないかもしれません。CSS Painting API が面白くて強力なのは、変数を渡して自動的にサイズを変更する複雑な画像を作成できることです。

- -

それではもっと複雑な例を見てみましょう。

- -
registerPaint('headerHighlight', class {
-  static get inputProperties() { return ['--highColour']; }
-  static get contextOptions() { return {alpha: true}; }
-
-  paint(ctx, size, props) {
-
-		/* どの場所からハイライトを始めるか、寸法をセットする */
-		const x = 0;
-		const y = size.height * 0.3;
-		const blockWidth = size.width * 0.33;
-		const highlightHeight = size.height * 0.85;
-        const color = props.get('--highColour');
-
-		ctx.fillStyle = color;
-
-		ctx.beginPath();
-		ctx.moveTo( x, y );
-		ctx.lineTo( blockWidth, y );
-		ctx.lineTo( blockWidth + highlightHeight, highlightHeight );
-		ctx.lineTo( x, highlightHeight );
-		ctx.lineTo( x, y );
-		ctx.closePath();
-		ctx.fill();
-
-		/* 破線を作成 */
-		for (let i = 0; i < 4; i++) {
-			let start = i * 2;
-			ctx.beginPath();
-			ctx.moveTo( (blockWidth) + (start * 10) + 10, y );
-			ctx.lineTo( (blockWidth) + (start * 10) + 20, y );
-			ctx.lineTo( (blockWidth) + (start * 10) + 20 + (highlightHeight), highlightHeight );
-			ctx.lineTo( (blockWidth) + (start * 10) + 10 + (highlightHeight), highlightHeight );
-			ctx.lineTo( (blockWidth) + (start * 10) + 10, y );
-			ctx.closePath();
-			ctx.fill();
-		}
-  } // paint
-});
- -
-

ここで作られる画像を背景とする小さな HTML を用意します:

- -
<h1 class="fancy">Largest Header</h1>
-<h3 class="fancy">Medium size header</h3>
-<h6 class="fancy">Smallest Header</h6>
- -

それぞれのヘッダーは、それぞれ異なった値の --highColor カスタムプロパティを持つことができます。

- -
.fancy {
-  background-image: paint(headerHighlight);
-}
-h1 { --highColour: hsla(155, 90%, 60%, 0.7); }
-h3 { --highColour: hsla(255, 90%, 60%, 0.5); }
-h6 { --highColour: hsla(355, 90%, 60%, 0.3); }
- -

そして、Worklet を登録します

- -
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/03partThree/header-highlight.js');
- -

{{EmbedLiveSample("example4", 300, 300)}}

- -

この Worklet そのものを編集することはできませんが、CSS や HTML をいじることはできます。ヘッダーの float と clear を試してみるのはどうでしょう？

- -

上記の背景画像を CSS paint API を使わずに作ってみるのもいいかもしれません。これは可能ですが、作成したい色ごとに異なる、かなり複雑な線形グラデーションを宣言しなければなりません。CSS paint API を使えば、1 つの Worklet を再利用することができ、その場合でも異なる色を渡すことができます。

-
- -

パラメーターを渡す

- -

CSS Paint API を使用すると、カスタムプロパティや通常のプロパティにアクセスできるだけでなく、カスタム引数を paint() 関数に渡すこともできます。

- -

CSS で関数を呼び出すときに、これらの引数を追加することができます。例えばある時、背景を塗りつぶすのではなく、背景をなぞるようにしたいとしましょう — そのために追加の引数を加えておきましょう。

- -
li {
-	background-image: paint(hollowHighlights, stroke);
-}
-
- -

これで、registerPaint() に渡されるクラスの inputArguments() メソッドを使用して、paint() 関数に追加したカスタム引数にアクセスできるようになりました。

- -
static get inputArguments() { return ['*']; }
-
- -

実際にアクセスするにはこうします。

- -
paint(ctx, size, props, args) {
-
-	// カスタム引数を使う
-	const hasStroke = args[0].toString();
-
-	// stroke 引数が 'stroke' の場合は塗りつぶしはしません
-	if (hasStroke === 'stroke') {
-		ctx.fillStyle = 'transparent';
-		ctx.strokeStyle = colour;
-	}
-	...
-}
- -

2 つ以上の引数も渡せます。

- -
li {
-	background-image: paint(hollowHighlights, stroke, 10px);
-}
-
- -

また、特定のタイプの引数を指定することもできます。引数の値をリストで get する際に、特に <length> で単位を指定します。

- -
static get inputArguments() { return ['*', '<length>']; }
- -

この場合は <length> 属性を要求しました。返される配列の最初の要素は CSSUnparsedValue です。2 番目の要素は CSSStyleValue です。

- -

カスタム引数がユニットなどの CSS 値である場合、registerPaint() 関数で取得する際にvalue type キーワードを使用することで、Typed OM CSSStyleValue クラス (およびサブクラス) を呼び出すことができます。

- -

それではストロークの幅を何ピクセルにするか、2 番目の引数を追加してみましょう:

- -
li {
-	background-image: paint(hollowHighlights, stroke, 10px);
-}
-
- -

引数の値をリストで get する際に、<length> 単位を要求します。

- -
static get inputArguments() { return ['*', '<length>']; }
-
- -

これで型と値のプロパティにアクセスできるようになりました。つまり箱から出してすぐにピクセル数と数値型を取得できるということです。(確かに ctx.lineWidth は、長さの単位を持つ値ではなく float を値として受け取りますが、これは例ですから...)

- -
paint(ctx, size, props, args) {
-
-		const strokeWidth = args[1];
-
-		if (strokeWidth.unit === 'px') {
-			ctx.lineWidth = strokeWidth.value;
-		} else {
-			ctx.lineWidth = 1.0;
-		}
-
-	...
-}
-
- -

この Worklet のさまざまな部分を制御するためにカスタムプロパティを使用することと、ここに記載されている引数との違いに注目する価値があります。カスタムプロパティ (および実際にはスタイルマップ上のすべてのプロパティ) はグローバルなもので、CSS (および JS) 内の他の場所で使用することができます。

- -

例えば paint() 関数内で色を設定するために --mainColor を用意するのは便利ですが、これは CSS の他の場所で色を設定するのにも使えます。これを paint のためだけに特別に変更したい場合は、かなり難しいかもしれません。そこで便利なのがカスタム引数です。もう一つの考え方としては、引数は実際に描画するものを制御するために設定され、プロパティはスタイルを制御するために設定されるということです。

- -

The list items have a background image that is either pink, purple or green, with different stroke widths, and the green one being filled.

- -

これでこの API の本当のメリットが見えてきました。カスタムプロパティと paint() 関数の引数の両方を使って CSS から無数の描画パラメータを制御できるようになれば、再利用可能で制御性の高いスタイリング関数を作り始めることができます。

- -
registerPaint('hollowHighlights', class {
-
-  static get inputProperties() { return ['--boxColor']; }
-  // `paint` 関数に渡されるカスタム引数
-  static get inputArguments() { return ['*','']; }
-
-  static get contextOptions() { return {alpha: true}; }
-
-  paint(ctx, size, props, args) {
-    // ctx   -> 描画コンテキスト
-    // size  -> 描画したいボックスの大きさ
-    // props -> 要素に存在するカスタププロパティのリスト
-	// args  -> cssから paint() 関数を呼ばれた際のカスタム引数のリスト
-
-		// どの場所からハイライトを始めるか、寸法
-		const x = 0;
-		const y = size.height * 0.3;
-		const blockWidth = size.width * 0.33;
-		const blockHeight = size.height * 0.85;
-
-		// CSS から paint() 関数に渡された値
-		const colour = props.get( '--boxColor' );
-		const strokeType = args[0].toString();
-		const strokeWidth = parseInt(args[1]);
-
-
-		// 線幅を設定する
-		if ( strokeWidth ) {
-			ctx.lineWidth = strokeWidth;
-		} else {
-			ctx.lineWidth = 1.0;
-		}
-		// 塗りつぶしタイプを設定する
-		if ( strokeType === 'stroke' ) {
-			ctx.fillStyle = 'transparent';
-			ctx.strokeStyle = colour;
-		} else if ( strokeType === 'filled' ) {
-			ctx.fillStyle = colour;
-			ctx.strokeStyle = colour;
-		} else {
-			ctx.fillStyle = 'none';
-			ctx.strokeStyle = 'none';
-		}
-
-		// 四角
-		ctx.beginPath();
-		ctx.moveTo( x, y );
-		ctx.lineTo( blockWidth, y );
-		ctx.lineTo( blockWidth + blockHeight, blockHeight );
-		ctx.lineTo( x, blockHeight );
-		ctx.lineTo( x, y );
-		ctx.closePath();
-		ctx.fill();
-		ctx.stroke();
-		// 破線
-		for (let i = 0; i < 4; i++) {
-			let start = i * 2;
-			ctx.beginPath();
-			ctx.moveTo( blockWidth + (start * 10) + 10, y);
-			ctx.lineTo( blockWidth + (start * 10) + 20, y);
-			ctx.lineTo( blockWidth + (start * 10) + 20 + blockHeight, blockHeight);
-			ctx.lineTo( blockWidth + (start * 10) + 10 + blockHeight, blockHeight);
-			ctx.lineTo( blockWidth + (start * 10) + 10, y);
-			ctx.closePath();
-			ctx.fill();
-			ctx.stroke();
-		}
-
-  } // paint
-});
-
- -

私たちは、異なる色、線幅を設定し、背景画像が塗りつぶされるべきか、中空になるべきかを選択することができます:

- -
-
li {
-   --boxColor: hsla(155, 90%, 60%, 0.5);
-   background-image: paint(hollowHighlights, stroke, 5px);
-}
-
-li:nth-of-type(3n) {
-   --boxColor: hsla(255, 90%, 60%, 0.5);
-   background-image: paint(hollowHighlights, filled,  3px);
-}
-
-li:nth-of-type(3n+1) {
-   --boxColor: hsla(355, 90%, 60%, 0.5);
-   background-image: paint(hollowHighlights, stroke, 1px);
-}
- - - -

私たちの作った Worklet を登録するには以下のようにします:

- -
CSS.paintWorklet.addModule('https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hollow.js');
-
- -

{{EmbedLiveSample("example5", 300, 300)}}

- -

関連情報

- - diff --git a/files/ja/web/api/cssmatrix/index.html b/files/ja/web/api/cssmatrix/index.html deleted file mode 100644 index 756a3c4cb2..0000000000 --- a/files/ja/web/api/cssmatrix/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: CSSMatrix -slug: Web/API/CSSMatrix -tags: - - API - - NeedsBrowserCompatibility - - Reference -translation_of: Web/API/DOMMatrix -translation_of_original: Web/API/CSSMatrix ---- -
{{APIRef("CSSOM")}}{{Non-standard_header}}
- -

CSSMatrix は、2D または 3D の変形が適用できる同次の 4x4 行列を表しています。このクラスは、ある時点で CSS Transitions モジュールレベル 3 の一部ということになっていましたが、現在のワーキングドラフトで存在しません。代わりに DOMMatrix を使用してください。

- -

仕様

- - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('Compat', '#webkitcssmatrix-interface', 'WebKitCSSMatrix')}}{{Spec2('Compat')}}WebKit プレフィックス付きバージョン、WebKitCSSMatrix の初期の標準化。
- -

ブラウザー互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatUnknown}}{{CompatUnknown}}10[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
-
- -
- - - - - - - - - - - - - - - - - - - -
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}11[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
-
- -

[1] Internet Explorer は、MSCSSMatrix としてこの API を実行します。バージョン 11 で、WebKitCSSMatrix が追加されました。

- -

[2] WebKit は、WebKitCSSMatrix としてこの API を実行します。

- -

関連情報

- - diff --git a/files/ja/web/api/deviceacceleration/index.html b/files/ja/web/api/deviceacceleration/index.html deleted file mode 100644 index 982499c4a8..0000000000 --- a/files/ja/web/api/deviceacceleration/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: DeviceAcceleration -slug: Web/API/DeviceAcceleration -tags: - - API - - Device - - Experimental - - Interface - - Orienttation - - Reference - - events -translation_of: Web/API/DeviceMotionEventAcceleration -translation_of_original: Web/API/DeviceAcceleration ---- -
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
- -

DeviceAccelerationオブジェクトは、3つの軸に沿って発生しているデバイスの加速度についての情報を提供します。

- -

プロパティ

- -
-
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
-
X軸に沿った加速度の大きさ。読み取り専用。
-
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
-
Y軸に沿った加速度の大きさ。読み取り専用。
-
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
-
 Z軸に沿った加速度の大きさ。読み取り専用。
-
- -

仕様

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Initial definition
diff --git a/files/ja/web/api/devicemotioneventacceleration/index.html b/files/ja/web/api/devicemotioneventacceleration/index.html new file mode 100644 index 0000000000..982499c4a8 --- /dev/null +++ b/files/ja/web/api/devicemotioneventacceleration/index.html @@ -0,0 +1,47 @@ +--- +title: DeviceAcceleration +slug: Web/API/DeviceAcceleration +tags: + - API + - Device + - Experimental + - Interface + - Orienttation + - Reference + - events +translation_of: Web/API/DeviceMotionEventAcceleration +translation_of_original: Web/API/DeviceAcceleration +--- +
{{ ApiRef("Device Orientation Events") }}{{SeeCompatTable}}
+ +

DeviceAccelerationオブジェクトは、3つの軸に沿って発生しているデバイスの加速度についての情報を提供します。

+ +

プロパティ

+ +
+
{{domxref("DeviceAcceleration.x")}} {{readonlyInline}}
+
X軸に沿った加速度の大きさ。読み取り専用。
+
{{domxref("DeviceAcceleration.y")}} {{readonlyInline}}
+
Y軸に沿った加速度の大きさ。読み取り専用。
+
{{domxref("DeviceAcceleration.z")}} {{readonlyInline}}
+
 Z軸に沿った加速度の大きさ。読み取り専用。
+
+ +

仕様

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Device Orientation", "#device_acceleration", "DeviceAcceleration")}}{{Spec2("Device Orientation")}}Initial definition
diff --git a/files/ja/web/api/document/activeelement/index.html b/files/ja/web/api/document/activeelement/index.html deleted file mode 100644 index 31c1b2bc7f..0000000000 --- a/files/ja/web/api/document/activeelement/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: document.activeElement -slug: Web/API/Document/activeElement -tags: - - DOM - - Focus - - Gecko - - HTML5 - - NeedsTranslation - - 要更新 -translation_of: Web/API/DocumentOrShadowRoot/activeElement -translation_of_original: Web/API/Document/activeElement ---- -
{{ApiRef}}
- -

概要

- -

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

- -

Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time.  If so, you can get more detail by using the element's selectionStart and selectionEnd properties.  Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of type button, checkbox or radio.

- -
注記: On Mac, elements that aren't text input elements tend not to get focus assigned to them.
- -

Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).

- -

Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See {{domxref("window.getSelection()")}} for that.

- -

When there is no selection, the active element is the page's {{HTMLElement("body")}}.

- -

{{Note("This attribute is part of the in-development HTML 5 specification.")}}

- -

構文

- -
var curElement = document.activeElement;
-
- -

例

- -
<!DOCTYPE HTML>
-<html>
-<head>
-    <script type="text/javascript" charset="utf-8">
-    function init() {
-
-        function onMouseUp(e) {
-            console.log(e);
-            var outputElement = document.getElementById('output-element');
-            var outputText = document.getElementById('output-text');
-            var selectedTextArea = document.activeElement;
-            var selection = selectedTextArea.value.substring(
-            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
-            outputElement.innerHTML = selectedTextArea.id;
-            outputText.innerHTML = selection;
-        }
-
-        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
-        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
-    }
-    </script>
-</head>
-<body onload="init()">
-<div>
-    Select some text from one of the Textareas below:
-</div>
-<form id="frm-example" action="#" accept-charset="utf-8">
-<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
-This is Textarea Example One:
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
-</textarea>
-<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
-This is Textarea Example Two:
-Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
-</textarea>
-</form>
-Active Element Id: <span id="output-element"></span><br/>
-Selected Text: <span id="output-text"></span>
-
-</body>
-</html>
-
- -

JSFiddle で確認

- -

注記

- -

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

- -

仕様

- - - -

ブラウザ実装状況

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート23.049.64.0
-
- -
- - - - - - - - - - - - - - - - - - - -
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

 

diff --git a/files/ja/web/api/document/async/index.html b/files/ja/web/api/document/async/index.html deleted file mode 100644 index 00d0b0724c..0000000000 --- a/files/ja/web/api/document/async/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: XMLDocument.async -slug: Web/API/Document/async -tags: - - API - - DOM - - DOM Reference - - Deprecated - - Document - - Non-standard - - Property - - Reference - - async -translation_of: Web/API/XMLDocument/async ---- -

{{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}}

- -

document.async は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 true が初期値であり、これは文書を非同期的に読み込むよう要求するものです。

- -

(1.4 アルファから、同期的に文書を読み込めるようになりました。)

- -

例

- -
function loadXMLData(e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // querydata.xml の内容を文字列として取得
-}
-
-var xmlDoc = document.implementation.createDocument("", "test", null);
-
-xmlDoc.async = false;
-xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');
- -

ブラウザーの互換性

- - - -

{{Compat("api.XMLDocument.async")}}

- -

関連情報

- - diff --git a/files/ja/web/api/document/elementfrompoint/index.html b/files/ja/web/api/document/elementfrompoint/index.html deleted file mode 100644 index a24f1ce63a..0000000000 --- a/files/ja/web/api/document/elementfrompoint/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: document.elementFromPoint -slug: Web/API/Document/elementFromPoint -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint ---- -
- {{ApiRef()}} {{Fx_minversion_header(3)}}
-

概要

-

文書の左上を基点として指定された座標上にある要素を返します。

-

構文

-
element = document.elementFromPoint(x,y);
-
    -
  • element には element オブジェクトが入ります。
    • -
  • x と y には取得したい要素の座標を指定してください。
    • -
-

例

-
<!DOCTYPE html>
-<html lang="ja">
-<head>
-<title>elementFromPoint の使用例</title>
-
-<script>
-function changeColor(newColor) {
-  elem = document.elementFromPoint(2, 2);
-  elem.style.color = newColor;
-}
-</script>
-</head>
-
-
-<body>
-<p id="para1">色は匂へど　散りぬるを……</p>
-<button onclick="changeColor('blue');">blue</button>
-<button onclick="changeColor('red');">red</button>
-</body>
-</html>
-
-

注記

-

指定された座標にある要素が別のドキュメント(例えば iframe　内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。

-

指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は NULL を返します。

-

{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}

-

仕様

- diff --git a/files/ja/web/api/document/getanimations/index.html b/files/ja/web/api/document/getanimations/index.html deleted file mode 100644 index eeb45f404e..0000000000 --- a/files/ja/web/api/document/getanimations/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Document.getAnimations() -slug: Web/API/Document/getAnimations -tags: - - API - - Animation - - CSS - - CSS Animations - - CSS Transitions - - Document - - Experimental - - Method - - Reference - - Transitions - - Web Animations - - getAnimations - - waapi - - web animations api -translation_of: Web/API/DocumentOrShadowRoot/getAnimations ---- -

{{ SeeCompatTable() }}{{APIRef("Web Animations")}}

- -

getAnimations() メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。

- -

構文

- -
var allAnimations = Document.getAnimations();
-
- -

引数

- -

なし。

- -

返値

- -

{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。

- -

例

- -

次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。

- -
document.getAnimations().forEach(
-  function (animation) {
-    animation.playbackRate *= .5;
-  }
-);
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}{{Spec2('Web Animations')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.Document.getAnimations")}}

- -

関連情報

- - diff --git a/files/ja/web/api/document/getselection/index.html b/files/ja/web/api/document/getselection/index.html deleted file mode 100644 index 740d006c66..0000000000 --- a/files/ja/web/api/document/getselection/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -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/web/api/document/inputencoding/index.html b/files/ja/web/api/document/inputencoding/index.html deleted file mode 100644 index bc128b09e8..0000000000 --- a/files/ja/web/api/document/inputencoding/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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;
-
    -
  • inputEncoding : {{readOnlyInline}}
    • -
-

仕様書

-
    -
  • DOM Level 3 Core
    • -
  • ※ {{spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD")}} で削除されています。
    • -
diff --git a/files/ja/web/api/document/onselectionchange/index.html b/files/ja/web/api/document/onselectionchange/index.html deleted file mode 100644 index 9793bde3fa..0000000000 --- a/files/ja/web/api/document/onselectionchange/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Document.onselectionchange -slug: Web/API/Document/onselectionchange -tags: - - API - - Document - - Experimental - - Reference - - イベントハンドラー - - プロパティ -translation_of: Web/API/GlobalEventHandlers/onselectionchange -translation_of_original: Web/API/Document/onselectionchange ---- -
{{ApiRef('DOM')}}{{SeeCompatTable}}
- -

Document.onselectionchange プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。

- -

構文

- -
obj.onselectionchange = function;
-
- -
    -
  • function はユーザー定義の関数の名前を、末尾の () や引数を付けない形、または無名関数の宣言です。
    • -
- -

例

- -
document.onselectionchange = function() { console.log("Selection changed!"); };
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Selection API','','Document.onselectionchange')}}{{Spec2('Selection API')}}初回定義
- -

ブラウザーの対応

- - - -

{{Compat("api.Document.onselectionchange")}}

- -

関連情報

- -
    -
  • {{event("selectionchange")}}
    • -
  • {{domxref("GlobalEventHandlers.onselectstart")}} および {{event('selectstart')}}
    • -
diff --git a/files/ja/web/api/document_object_model/preface/index.html b/files/ja/web/api/document_object_model/preface/index.html deleted file mode 100644 index 4a390b9177..0000000000 --- a/files/ja/web/api/document_object_model/preface/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -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/web/api/documentorshadowroot/activeelement/index.html b/files/ja/web/api/documentorshadowroot/activeelement/index.html new file mode 100644 index 0000000000..31c1b2bc7f --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/activeelement/index.html @@ -0,0 +1,144 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Focus + - Gecko + - HTML5 + - NeedsTranslation + - 要更新 +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +--- +
{{ApiRef}}
+ +

概要

+ +

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

+ +

Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time.  If so, you can get more detail by using the element's selectionStart and selectionEnd properties.  Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of type button, checkbox or radio.

+ +
注記: On Mac, elements that aren't text input elements tend not to get focus assigned to them.
+ +

Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).

+ +

Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See {{domxref("window.getSelection()")}} for that.

+ +

When there is no selection, the active element is the page's {{HTMLElement("body")}}.

+ +

{{Note("This attribute is part of the in-development HTML 5 specification.")}}

+ +

構文

+ +
var curElement = document.activeElement;
+
+ +

例

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Select some text from one of the Textareas below:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+Active Element Id: <span id="output-element"></span><br/>
+Selected Text: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

JSFiddle で確認

+ +

注記

+ +

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

+ +

仕様

+ + + +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート23.049.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

diff --git a/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..a24f1ce63a --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,50 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +--- +
+ {{ApiRef()}} {{Fx_minversion_header(3)}}
+

概要

+

文書の左上を基点として指定された座標上にある要素を返します。

+

構文

+
element = document.elementFromPoint(x,y);
+
    +
  • element には element オブジェクトが入ります。
    • +
  • x と y には取得したい要素の座標を指定してください。
    • +
+

例

+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<title>elementFromPoint の使用例</title>
+
+<script>
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+</script>
+</head>
+
+
+<body>
+<p id="para1">色は匂へど　散りぬるを……</p>
+<button onclick="changeColor('blue');">blue</button>
+<button onclick="changeColor('red');">red</button>
+</body>
+</html>
+
+

注記

+

指定された座標にある要素が別のドキュメント(例えば iframe　内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。

+

指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は NULL を返します。

+

{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}

+

仕様

+ diff --git a/files/ja/web/api/documentorshadowroot/getanimations/index.html b/files/ja/web/api/documentorshadowroot/getanimations/index.html new file mode 100644 index 0000000000..eeb45f404e --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/getanimations/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getAnimations() +slug: Web/API/Document/getAnimations +tags: + - API + - Animation + - CSS + - CSS Animations + - CSS Transitions + - Document + - Experimental + - Method + - Reference + - Transitions + - Web Animations + - getAnimations + - waapi + - web animations api +translation_of: Web/API/DocumentOrShadowRoot/getAnimations +--- +

{{ SeeCompatTable() }}{{APIRef("Web Animations")}}

+ +

getAnimations() メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。

+ +

構文

+ +
var allAnimations = Document.getAnimations();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。

+ +

例

+ +

次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}{{Spec2('Web Animations')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getAnimations")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html deleted file mode 100644 index a7953136e6..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -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")}}

- -

関連情報

- -
    -
  • {{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}}
    • -
  • {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}
    • -
diff --git a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html deleted file mode 100644 index d3f79b8d11..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -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")}}

- -

関連情報

- -
    -
  • {{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}}
    • -
  • {{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}
    • -
diff --git a/files/ja/web/api/dommatrix/index.html b/files/ja/web/api/dommatrix/index.html new file mode 100644 index 0000000000..756a3c4cb2 --- /dev/null +++ b/files/ja/web/api/dommatrix/index.html @@ -0,0 +1,94 @@ +--- +title: CSSMatrix +slug: Web/API/CSSMatrix +tags: + - API + - NeedsBrowserCompatibility + - Reference +translation_of: Web/API/DOMMatrix +translation_of_original: Web/API/CSSMatrix +--- +
{{APIRef("CSSOM")}}{{Non-standard_header}}
+ +

CSSMatrix は、2D または 3D の変形が適用できる同次の 4x4 行列を表しています。このクラスは、ある時点で CSS Transitions モジュールレベル 3 の一部ということになっていましたが、現在のワーキングドラフトで存在しません。代わりに DOMMatrix を使用してください。

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Compat', '#webkitcssmatrix-interface', 'WebKitCSSMatrix')}}{{Spec2('Compat')}}WebKit プレフィックス付きバージョン、WebKitCSSMatrix の初期の標準化。
+ +

ブラウザー互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatUnknown}}{{CompatUnknown}}10[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}11[1]{{CompatUnknown}}{{CompatVersionUnknown}}[2]
+
+ +

[1] Internet Explorer は、MSCSSMatrix としてこの API を実行します。バージョン 11 で、WebKitCSSMatrix が追加されました。

+ +

[2] WebKit は、WebKitCSSMatrix としてこの API を実行します。

+ +

関連情報

+ + diff --git a/files/ja/web/api/element/accesskey/index.html b/files/ja/web/api/element/accesskey/index.html deleted file mode 100644 index 82738c792f..0000000000 --- a/files/ja/web/api/element/accesskey/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -
Element.accessKeyは、ユーザが他の要素へジャンプする時に押す、キーストロークを設定します。
- -
 
- -
-

Element.accessKey は、ブラウザの既定のキーバインディングと競合する為、めったに使われません。この競合を回避するために、ブラウザはアクセスキーの挙動を他の「最適な」キーと一緒に押されたときに動くように実装しています。（ Alt + アクセスキー、の様に。）

-
- -

See also 

- - diff --git a/files/ja/web/api/element/name/index.html b/files/ja/web/api/element/name/index.html deleted file mode 100644 index e069431e6e..0000000000 --- a/files/ja/web/api/element/name/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -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/web/api/event/button/index.html b/files/ja/web/api/event/button/index.html deleted file mode 100644 index 572f611ebc..0000000000 --- a/files/ja/web/api/event/button/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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 を変えたボタンを示す整数値を返します。

-
    -
  • 0 は普通の'クリック'であり、通常は左クリック
    • -
  • 1 は中ボタンであり、通常はホイールのクリック
    • -
  • 2 は右ボタンであり、通常は右クリック
    • -
-

ボタンの順序はどのようにポインティングデバイスが設定されているかによります。

-

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/web/api/event/createevent/index.html b/files/ja/web/api/event/createevent/index.html deleted file mode 100644 index d9dc6aef3f..0000000000 --- a/files/ja/web/api/event/createevent/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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/web/api/gamepad_api/using_the_gamepad_api/index.html b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.html new file mode 100644 index 0000000000..1cd391adb2 --- /dev/null +++ b/files/ja/web/api/gamepad_api/using_the_gamepad_api/index.html @@ -0,0 +1,347 @@ +--- +title: ゲームパッド API の使用 +slug: Web/Guide/API/Gamepad +tags: + - API + - Advanced + - Gamepad API + - Games + - Guide +translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API +--- +

{{DefaultAPISidebar("Gamepad API")}}

+ +

HTML5 はリッチでインタラクティブなゲームを開発するために必要なコンポーネントを多く搭載しています。 <canvas> や WebGL、 <audio> に <video> などの技術は、今までネイティブコードを書く必要のあった機能をサポートできるほどに成長しました。ゲームパッド API は開発者とデザイナーにゲームパッドやコントローラーへのアクセスを提供するものです。

+ +

ゲームパッドAPI は {{ domxref("Window") }} オブジェクトにゲームパッドとコントローラー (以下、ゲームパッド) の状態を読み取る新しいイベントをいくつか追加します。さらに、 {{ domxref("Gamepad") }} というゲームパッドの接続状態が得られるオブジェクトと {{ domxref("navigator.getGamepads") }} というゲームパッドの一覧を取得できるメソッドが追加されます。

+ +

ゲームパッドの接続

+ +

新しいゲームパッドが接続された時、アクティブなページは {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを受け取ります。ページ読み込み時にゲームパッドがすでに接続されている場合、ゲームパッドのボタンを押すなどの操作をした時に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントがアクティブなページに対して発生します。

+ +
+

Firefox では、ページが見える状態でかつユーザーによるゲームパッドの操作を受け付けたときにのみ、ゲームパッドが利用可能になります。これによって、ユーザーを特定する Fingerprinting に利用されることを防止しています。一度一つのコントローラーが操作されれば、他のコントローラーも自動で接続され利用可能になります。

+
+ +

以下のようにして {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} を使用します:

+ +
window.addEventListener("gamepadconnected", function(e) {
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    e.gamepad.index, e.gamepad.id,
+    e.gamepad.buttons.length, e.gamepad.axes.length);
+});
+
+ +

ゲームパッドはそれぞれ固有の ID を gamepad プロパティの中に持っています。

+ +

ゲームパッドの切断

+ +

ゲームパッドが切断されると、ゲームパッドが以前に受信したデータ(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )があると、2番目のイベント(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )がフォーカスされたウィンドウにディスパッチします:

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  console.log("Gamepad disconnected from index %d: %s",
+    e.gamepad.index, e.gamepad.id);
+});
+ +

ゲームパッドの {{domxref("Gamepad.index", "index")}} というプロパティは同じタイプの複数のコントローラーが使用されている場合であっても、システムに接続されたデバイスごとにユニークになります。 Index プロパティもまた {{ domxref("Navigator.getGamepads()") }} として戻される {{jsxref("Array")}} の index として機能します。

+ +
var gamepads = {};
+
+function gamepadHandler(event, connecting) {
+  var gamepad = event.gamepad;
+  // Note:
+  // gamepad === navigator.getGamepads()[gamepad.index]
+
+  if (connecting) {
+    gamepads[gamepad.index] = gamepad;
+  } else {
+    delete gamepads[gamepad.index];
+  }
+}
+
+window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
+window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
+
+ +

この前の例ではイベントが完了した後に gamepad プロパティがどのように保持できるかを示しています - 後でデバイスの状態照会のために使用する技術となります。

+ +

Gamepad オブジェクトの問い合わせ

+ +

ご覧のように、上述の gamepad イベントは {{ domxref("Gamepad") }} オブジェクトを返すイベントオブジェクト、上の gamepad のプロパティが含まれています。複数のゲームパッド(すなわち、そのID ) を一度に接続される可能性があるため、イベントを発生させたのはどのゲームパッドを決定するためにこれらを使用することができます。それへの参照を保持し、それがボタンや軸のいずれかの時点で押されているかを知るために照会するなど、{{ domxref("Gamepad") }} オブジェクトから様々なことを行うことができます。そうすることで、多くの場合、今回と次回のイベント発生とゲームパッドの状態を知っておく必要があり、ゲームやその他のインタラクティブな Web ページであることが望ましいです。

+ +

このようなチェックを実行すると、開発者はゲームパッドやゲームパッドの状態に基づいて、現在のフレームのための意思決定を行うために必要なアニメーションループ (例 : {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) と一緒に {{ domxref("Gamepad") }} オブジェクトを使用して関与する傾向があります。

+ +

{{ domxref("Navigator.getGamepads()") }} メソッドは現在 Web ページから見える {{ domxref("Gamepad") }} オブジェクト (ゲームパッドが繋がっていない時は毎回 null が返される ) のような、すべてのデバイスを配列として戻します。これは、同じ情報を得るために使用することができます。例えば、 以下に示すように上記の最初のコード例を書き換えます。

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
+    gp.index, gp.id,
+    gp.buttons.length, gp.axes.length);
+});
+ +

{{ domxref("Gamepad") }} オブジェクトの機能は以下の通りです。

+ +
    +
  • id: コントローラーに関する情報を含んだ文字列です。これは厳密には指定されていなく、Firefox では、コントローラーのUSBベンダと製品IDを含んでいる2つの4桁16進数字列、およびドライバーから提供されるようなコントローラーの名前といった3つの情報が、ダッシュ (-) により分離され含まれています。この情報はユーザーへの有益なフィードバックを表示するとともに、デバイスのコントロールのマッピングを見つけることができるようにします。
    • +
  • index: 現在システムに接続されているゲームパッドごとに固有の整数。この値は複数のコントローラーを区別するために使用できます。デバイスを切断してから新しいデバイスを接続すると、以前のインデックスが再利用されることに注意してください。
    • +
  • mapping: ブラウザがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - 標準のゲームパッドは1つしかありません。ブラウザがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 mapping プロパティは文字列 standard に設定されます。
    • +
  • connected:ゲームパッドがシステムに接続されているかどうかを示すブール値。もし接続されている場合は True。接続されていない場合は False が設定されます。
    • +
  • buttons: デバイス上に存在するボタンを表す {{ domxref("GamepadButton") }} オブジェクトの配列。各 {{ domxref("GamepadButton") }} には、pressed プロパティと value のプロパティがあります。 +
      +
    • pressed プロパティは、ボタンが現在押されている (true) か押されていない (false) かを示すブール値です。>
      • +
    • value プロパティは、現代の多くのゲームパッドのトリガなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0..1.0 の範囲に正規化され、 0.0 は押されていないボタンを表し、 1.0 は完全に押されたボタンを表します。
      • +
    +
    • +
  • axes: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリは-1.0〜1.0の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
    • +
  • timestamp: このゲームパッドのデータが最後に更新された時刻を表す {{ domxref("DOMHighResTimeStamp") }} を返します。この値により、開発者は axes と button のデータがハードウェアから更新されたかどうかを判断できます。 値は、 {{ domxref("PerformanceTiming") }} インターフェースの navigationStart 属性との相対値でなければなりません。 値は単調に増加します。つまり、更新の順序を決定するために比較することができます。新しい値は常に古い値よりも大きいか等しいためです。このプロパティは現在 Firefox ではサポートされていません。
    • +
+ +
+

注: Gamepadオブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度リファレンスを取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。

+
+ +

ボタン情報の使用

+ +

1つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある4つのゲームパッドボタンを使用してボールを画面の周りに移動できます。デモをライブで見ることができことができ、Githubでソースコードを見つけることができます。

+ +

まず、いくつかの変数を宣言します: 接続情報が書き込まれる gamepadInfo のパラグラフ、移動する ball、requestAnimation Frame の ID として機能する start 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、　{{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。

+ +
var gamepadInfo = document.getElementById("gamepad-info");
+var ball = document.getElementById("ball");
+var start;
+var a = 0;
+var b = 0;
+
+ +

次に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを使用して、接続されているゲームパッドを確認します。接続されると {{ domxref("Navigator.getGamepads()") }}[0] を使用してゲームパッドを取得し、ゲームパッドに関する情報をゲームパッドの情報 div に出力し、全体のボールの動きが始まる gameLoop() 関数が呼び出されます。

+ +
window.addEventListener("gamepadconnected", function(e) {
+  var gp = navigator.getGamepads()[e.gamepad.index];
+  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+
+  gameLoop();
+});
+ +

これで {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用して、ゲームパッドが再び切断されたかどうかを確認します。 もしそうならば、 {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} ループ (下記参照) を停止し、ゲームパッドの情報を元の状態に戻します。

+ +
window.addEventListener("gamepaddisconnected", function(e) {
+  gamepadInfo.innerHTML = "Waiting for gamepad.";
+
+  cancelRequestAnimationFrame(start);
+});
+ +

Chrome では異なる挙動になります。変数にゲームパッドの最新の状態を常に保存するのではなく、スナップショットを保存するだけなので、 Chrome で同じことを行うにはポーリングしてから {{ domxref("Gamepad") }} オブジェクトをコードで使用する必要があり、それは利用可能です。私たちはこれを {{ domxref("Window.setInterval()") }} オブジェクトが利用可能になると、ゲームパッド情報が出力され、ゲームループが開始され、 {{ domxref("Window.clearInterval()") }} を使用して間隔がクリアされます。 Chrome {{ domxref("Navigator.getGamepads()") }} の古いバージョンでは、 Webkit 接頭辞を使用して実装されています。下位互換性のために、接頭辞付きのバージョンと関数の標準バージョンの両方を検出して処理しようとします。

+ +
var interval;
+
+if (!('ongamepadconnected' in window)) {
+  // No gamepad events available, poll instead.
+  interval = setInterval(pollGamepads, 500);
+}
+
+function pollGamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    var gp = gamepads[i];
+    if (gp) {
+      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
+        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
+      gameLoop();
+      clearInterval(interval);
+    }
+  }
+}
+ +

今度はメインのゲームループです。ループが実行されるたびに、4つのボタンの1つが押されているかどうかがチェックされます。そうすると、a と b の移動変数の値を適切に更新し、 {{ cssxref("left") }} と {{ cssxref("top") }} のプロパティを更新し、その値を a および b とする。これはボールを画面の周りに動かす効果があります。 現在のバージョンの Chrome (この記事の執筆時点ではバージョン34) では、ボタンの値は {{ domxref("GamepadButton") }} オブジェクトではなく、 double 値の配列として保存されます。

+ +

この作業がすべて完了したら、 requestAnimationFrame() を使用して gameLoop() を再び実行して次のアニメーションフレームを要求します。

+ +
function buttonPressed(b) {
+  if (typeof(b) == "object") {
+    return b.pressed;
+  }
+  return b == 1.0;
+}
+
+function gameLoop() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
+  if (!gamepads) {
+    return;
+  }
+
+  var gp = gamepads[0];
+  if (buttonPressed(gp.buttons[0])) {
+    b--;
+  } else if (buttonPressed(gp.buttons[2])) {
+    b++;
+  }
+  if (buttonPressed(gp.buttons[1])) {
+    a++;
+  } else if (buttonPressed(gp.buttons[3])) {
+    a--;
+  }
+
+  ball.style.left = a * 2 + "px";
+  ball.style.top = b * 2 + "px";
+
+  start = requestAnimationFrame(gameLoop);
+}
+ +

完全な例: ゲームパッドの状態を表示する

+ +

この例では、 {{ domxref("Gamepad") }} オブジェクト、 {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベント、 {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用してシステムに接続されているすべてのゲームパッドの状態を表示します。デモを見て、Githubの完全なソースコードを見ることができます。

+ +
var haveEvents = 'ongamepadconnected' in window;
+var controllers = {};
+
+function connecthandler(e) {
+  addgamepad(e.gamepad);
+}
+
+function addgamepad(gamepad) {
+  controllers[gamepad.index] = gamepad;
+
+  var d = document.createElement("div");
+  d.setAttribute("id", "controller" + gamepad.index);
+
+  var t = document.createElement("h1");
+  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
+  d.appendChild(t);
+
+  var b = document.createElement("div");
+  b.className = "buttons";
+  for (var i = 0; i < gamepad.buttons.length; i++) {
+    var e = document.createElement("span");
+    e.className = "button";
+    //e.id = "b" + i;
+    e.innerHTML = i;
+    b.appendChild(e);
+  }
+
+  d.appendChild(b);
+
+  var a = document.createElement("div");
+  a.className = "axes";
+
+  for (var i = 0; i < gamepad.axes.length; i++) {
+    var p = document.createElement("progress");
+    p.className = "axis";
+    //p.id = "a" + i;
+    p.setAttribute("max", "2");
+    p.setAttribute("value", "1");
+    p.innerHTML = i;
+    a.appendChild(p);
+  }
+
+  d.appendChild(a);
+
+  // See https://github.com/luser/gamepadtest/blob/master/index.html
+  var start = document.getElementById("start");
+  if (start) {
+    start.style.display = "none";
+  }
+
+  document.body.appendChild(d);
+  requestAnimationFrame(updateStatus);
+}
+
+function disconnecthandler(e) {
+  removegamepad(e.gamepad);
+}
+
+function removegamepad(gamepad) {
+  var d = document.getElementById("controller" + gamepad.index);
+  document.body.removeChild(d);
+  delete controllers[gamepad.index];
+}
+
+function updateStatus() {
+  if (!haveEvents) {
+    scangamepads();
+  }
+
+  var i = 0;
+  var j;
+
+  for (j in controllers) {
+    var controller = controllers[j];
+    var d = document.getElementById("controller" + j);
+    var buttons = d.getElementsByClassName("button");
+
+    for (i = 0; i < controller.buttons.length; i++) {
+      var b = buttons[i];
+      var val = controller.buttons[i];
+      var pressed = val == 1.0;
+      if (typeof(val) == "object") {
+        pressed = val.pressed;
+        val = val.value;
+      }
+
+      var pct = Math.round(val * 100) + "%";
+      b.style.backgroundSize = pct + " " + pct;
+
+      if (pressed) {
+        b.className = "button pressed";
+      } else {
+        b.className = "button";
+      }
+    }
+
+    var axes = d.getElementsByClassName("axis");
+    for (i = 0; i < controller.axes.length; i++) {
+      var a = axes[i];
+      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
+      a.setAttribute("value", controller.axes[i] + 1);
+    }
+  }
+
+  requestAnimationFrame(updateStatus);
+}
+
+function scangamepads() {
+  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
+  for (var i = 0; i < gamepads.length; i++) {
+    if (gamepads[i]) {
+      if (gamepads[i].index in controllers) {
+        controllers[gamepads[i].index] = gamepads[i];
+      } else {
+        addgamepad(gamepads[i]);
+      }
+    }
+  }
+}
+
+window.addEventListener("gamepadconnected", connecthandler);
+window.addEventListener("gamepaddisconnected", disconnecthandler);
+
+if (!haveEvents) {
+ setInterval(scangamepads, 500);
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Gamepad")}}

diff --git a/files/ja/web/api/globaleventhandlers/onreset/index.html b/files/ja/web/api/globaleventhandlers/onreset/index.html new file mode 100644 index 0000000000..c9862667e8 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onreset/index.html @@ -0,0 +1,57 @@ +--- +title: window.onreset +slug: Web/API/Window/onreset +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onreset +--- +
+ {{ApiRef}}
+

概要

+

フォームの reset イベントに対応するイベントハンドラです。

+

構文

+
window.onreset = funcRef;
+
+

引数

+
    +
  • funcRef : 関数への参照、または関数式
    • +
+

例

+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8" />
+<title>onreset のテスト</title>
+
+<script>
+function reg() {
+  window.onreset = hit;
+}
+
+function hit() {
+ alert('リセットイベントが発生しました。');
+}
+</script>
+
+</head>
+<body onload="reg();">
+
+<form>
+  <div>
+    <textarea></textarea>
+  </div>
+  <div>
+    <input type="reset" value="reset" />
+  </div>
+</form>
+
+</body>
+</html>
+
+

注記

+

reset イベントは、ユーザがフォーム内のリセットボタン (<input type="reset"/>) をクリックした際に発生します。

+

仕様

+

標準仕様書には含まれていません。

diff --git a/files/ja/web/api/globaleventhandlers/onresize/index.html b/files/ja/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..db2b2bbae9 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,78 @@ +--- +title: window.onresize +slug: Web/API/Window/onresize +tags: + - DOM + - Gecko + - Property + - Window +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

GlobalEventHandlers.onresize プロパティは、{{event("resize")}} イベントを受信するとトリガーされる {{domxref("EventHandler")}} を含みます。

+ +

構文

+ +
window.onresize = funcRef;
+
+ +

引数

+ +
    +
  • funcRef: 関数への参照
    • +
+ +

例

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize test</title>
+
+</head>
+
+<body>
+<p>Resize the browser window to fire the resize event.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

注記

+ +

ブラウザウィンドウのサイズが変更された後に resize イベントが発生します。

+ +

仕様

+ + + + + + + + + + + + + + +
使用ステータスコメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/ja/web/api/globaleventhandlers/onselectionchange/index.html b/files/ja/web/api/globaleventhandlers/onselectionchange/index.html new file mode 100644 index 0000000000..9793bde3fa --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onselectionchange/index.html @@ -0,0 +1,62 @@ +--- +title: Document.onselectionchange +slug: Web/API/Document/onselectionchange +tags: + - API + - Document + - Experimental + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onselectionchange +translation_of_original: Web/API/Document/onselectionchange +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

Document.onselectionchange プロパティは、 {{event("selectionchange")}} イベントがこのオブジェクトに到達したときに呼び出されるイベントハンドラーを表します。

+ +

構文

+ +
obj.onselectionchange = function;
+
+ +
    +
  • function はユーザー定義の関数の名前を、末尾の () や引数を付けない形、または無名関数の宣言です。
    • +
+ +

例

+ +
document.onselectionchange = function() { console.log("Selection changed!"); };
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Selection API','','Document.onselectionchange')}}{{Spec2('Selection API')}}初回定義
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Document.onselectionchange")}}

+ +

関連情報

+ +
    +
  • {{event("selectionchange")}}
    • +
  • {{domxref("GlobalEventHandlers.onselectstart")}} および {{event('selectstart')}}
    • +
diff --git a/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..4739714e52 --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,350 @@ +--- +title: ドラッグ操作 +slug: DragDrop/Drag_Operations +tags: + - Advanced + - Guide + - HTML + - HTML5 + - XUL + - ドラッグ＆ドロップ +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

以下は、ドラッグ＆ドロップ操作が行われる時の各段階についての解説です。

+ +

この文書で記述されているドラッグ操作は {{domxref("DataTransfer")}} インターフェイスを使用します。この文書では {{domxref("DataTransferItem")}} インターフェイスや {{domxref("DataTransferItemList")}} インターフェイスは説明しません。

+ +

draggable 属性

+ +

ウェブページにおいては、既定のドラッグ＆ドロップの挙動が使われる場合がいくつかあります。文字列の選択範囲、画像、リンクなどのドラッグなどがこれにあたります。画像かリンクがドラッグされた時は、画像もしくはリンク先の URL がドラッグデータとして設定され、ドラッグ操作が始まります。その他の要素は、既定のドラッグ操作が行われるためには選択範囲に含まれていなければなりません。実際の様子を確認するには、ウェブページの一部を選択して、その上でマウスのボタンを押下し、そのまま選択範囲をドラッグしてください。ドラッグ中、選択範囲の内容を半透明で描画した物がマウスポインターに伴って表示されるでしょう。ただしこの挙動は、ドラッグされたデータを加工するイベントリスナーが存在しない場合の、既定のドラッグの挙動によるものです。

+ +

HTML では、画像、リンク、選択範囲の上での既定の動作を除くと、他の要素は初期状態ではドラッグできません。 XUL では、すべての要素がドラッグ可能です。

+ +

上記以外の他の HTML 要素をドラッグできるようにするには、以下の3つの事をしなくてはなりません。

+ +
    +
  • ドラッグできるようにしたい要素の {{htmlattrxref("draggable")}} 属性の値を true に設定する。
    • +
  • {{event("dragstart")}} イベントにリスナーを設定し、そのリスナーの中でドラッグデータを設定する。
    • +
  • 上記で定義されたリスナーの中で{{domxref("DataTransfer.setData","ドラッグデータを設定する")}}。
    • +
+ +

以下は、コンテンツの一部がドラッグできるようにする例です。

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
+  この文字列はドラッグが<strong>できます</strong>。
+</div>
+
+ +

{{htmlattrxref("draggable")}} 属性を true に設定すると、その要素はドラッグできるようになります。この属性が設定されていない、あるいは false に設定されている場合、その要素をドラッグする事はできず、代わりにテキストが選択されるでしょう。 {{htmlattrxref("draggable")}} 属性は画像やリンクを含めてあらゆる要素に設定できます。ただし、画像とリンクについてだけは初期値がtrueとなっていますので、実際にこれらの要素で使う場合は、要素をドラッグできないようにするために {{htmlattrxref("draggable")}} 属性に false を設定するという場合がほとんどでしょう。

+ +

要素がドラッグ可能になった場合、文字列やその要素に含まれている他の要素が、マウスによるクリックやドラッグなどの通常の操作では選択する事ができなくなることに注意してください。ユーザーが文字列を選択するには、通常の操作の代わりに、 Alt キーを押しながらマウスで選択するか、キーボードで操作を行う必要があります。

+ +

XUL 要素では、 {{htmlattrxref("draggable")}} 属性を使う必要はありません。全ての XUL 要素はドラッグ可能です。

+ +
<button label="ドラッグしてください" ondragstart="event.dataTransfer.setData('text/plain', '「ドラッグしてください」ボタン');">
+
+ +

ドラッグ操作の開始

+ +

この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性を使って、 {{event("dragstart")}} イベントのためのリスナーが追加されています。

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'この文字列はドラッグができます')">
+  この文字列はドラッグが<strong>できます</strong>。
+</div>
+
+ +

ユーザーがドラッグを開始しようとした時、 {{event("dragstart")}} イベントが発行されます。この例では {{event("dragstart")}} のリスナーは、ドラッグされる要素自身に追加されていますが、他の多くのイベントがそうであるようにドラッグイベントもバブリングしますので、より上位の祖先要素でイベントを監視することもできます。 {{event("dragstart")}} イベントでは、以下で解説している「ドラッグデータ」「フィードバック画像」「ドラッグの種類」を設定することができます。ドラッグデータの指定は必須ですが、多くの状況では、フィードバック画像とドラッグの種類は既定のもので問題ありません。

+ +

ドラッグデータ

+ +

全ての{{domxref("DragEvent","ドラッグイベント")}}は、ドラッグデータを保持するための {{domxref("DragEvent.dataTransfer","dataTransfer")}} と呼ばれるプロパティを持っています（dataTransfer は {{domxref("DataTransfer")}} オブジェクトの一つです）。

+ +

ドラッグが行われた時には、何がドラッグされているのかを識別するデータが、そのドラッグに対して関連付けられなくてはなりません。例えば、テキストボックスの中の選択された文字列がドラッグされた時は、ドラッグに関連付けられたデータは、文字列それ自体となります。同様に、ウェブページの中のリンクがドラッグされた時は、リンク先の URL がドラッグデータとなります。

+ +

ドラッグデータは、データの型（データの形式）と、データの値の、2つの情報を含んでいます。データの形式はタイプ文字列（テキストデータを示すtext/plainなどのような）で指定し、データの値は文字列で指定します。ドラッグが開始された時、あなたはデータを型と値の設定で指定するでしょう。ドラッグが行われている間、dragenterおよびdragoverイベントのイベントリスナーにおいて、あなたはデータの型を、ドロップが許可されているかどうかの判定に使うでしょう。具体例としては、リンクのドロップを受け付けるドロップターゲットは、リンクの型である text/uri-list かどうかを確認するでしょう。dropイベントにおいてはリスナーは、この型の情報を元にドラッグされたデータを取得して、ドロップ位置に挿入するでしょう。

+ +

型は、 text/plain や image/jpeg などのような、 MIME-type に似た形式の文字列で、独自の型を作ることもできます。広く一般的に使われている型の一覧がドラッグ型のページにあります。

+ +

一つのドラッグ操作で、複数の異なる形式のデータを提供できます。この仕組みにより、独自の形式や、その形式のデータを受け取れない要素向けのフォールバック用の形式など、データをより適切な形式で引き渡すことができます。通常、最後のフォールバック先として使われる形式は、 text/plain 型として表される普通のテキストデータです。このデータは元のテキストの単純な文字列となるでしょう。

+ +

データを {{domxref("DragEvent.dataTransfer","dataTransfer")}} に設定するには、 {{domxref("DataTransfer.setData","setData()")}} メソッドを使います。このメソッドは、データの型とデータの値の、2つの引数を取ります。例：

+ +
event.dataTransfer.setData("text/plain", "ドラッグされたテキスト");
+
+ +

この例では、データの値は「ドラッグされたテキスト」で、形式は text/plain です。

+ +

データは複数の形式で提供できます。これを実現するには、異なる形式を指定して {{domxref("DataTransfer.setData","setData()")}} メソッドを複数回呼び出します。最も具体的な形式から、具体的でない形式に向けて呼び出します。

+ +
var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+ +

これは、3つの異なる型のデータを追加する例です。最初の型の「application/x-bookmark」は独自の形式です。他のアプリケーションはこの形式をサポートしていないでしょうが、同じウェブサイトやアプリケーションの中の領域同士でのドラッグでは、このような独自の形式を利用できます。また、他の型でもデータを提供することで、このような独自形式をサポートしていない他のアプリケーション向けにも、代替の形式でドラッグできるようになります。「application/x-bookmark」型はそのアプリケーションの中ではより使いやすく詳細な情報を提供できますが、他の型で渡されるデータは、単純な1つの URL もしくは文字列となります。

+ +

なお、この例では text/uri-list も text/plain も同じデータを含んでいます。このようにすることが多いのですが、こうしなければならない訳ではありません。

+ +

同じ形式で2回データを登録すると、古いデータは新しいデータによって置き換えられますが、データの形式の登録の順番自体は古いデータを登録した時のままになります。

+ +

登録したデータは {{domxref("DataTransfer.clearData","clearData()")}} メソッドによって削除できます。このメソッドは、削除するデータの形式を引数として求めます。

+ +
event.dataTransfer.clearData("text/uri-list");
+
+ +

{{domxref("DataTransfer.clearData","clearData()")}} メソッドの引数によるデータ形式の指定は省略可能です。データの形式が指定されなかった時は、全ての型のデータが削除されます。ドラッグ開始時にデータが1つも登録されなかった場合、もしくは後の処理で全てのデータが削除された場合、ドラッグ操作は発生しません。

+ +

ドラッグフィードバック画像の設定

+ +

ドラッグが行われた時、ドラッグ元（dragstartイベントが発行された要素）を元にして OS によって画像が生成され（例えば Windows では半透明の画像になります）、ドラッグしている間マウスポインターに伴って表示されます。この画像は自動的に生成されるため、あなたが用意する必要はありません。しかし、 {{domxref("DataTransfer.setDragImage","setDragImage()")}} によって、独自のドラッグ中のフィードバック画像を指定することができます。

+ +
event.dataTransfer.setDragImage(image, xOffset, yOffset);
+
+ +

このメソッドは3つの引数を要求します。第1引数は一般的には画像の要素ですが、 canvas 要素やその他の要素を指定することもできます。フィードバック画像は、その画像が画面上で表示される場合と同じ形・原寸大で生成されます。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} の第2、第3引数は画像を表示するマウスポインターからの相対オフセットです。

+ +

文書中に存在しないものをフィードバック画像として使うために、以下の例のようにして、画像や canvas を利用することもできます。

+ +
function dragWithCustomImage(event) {
+  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'ドラッグされるデータ');
+  dt.setDragImage(canvas, 25, 25);
+}
+
+ +

この例では、 canvas の大きさは幅50ピクセル・高さ50ピクセルで、オフセット値はそれぞれの半分の値（各25ピクセル）となっており、画像はマウスポインターの中央に表示されます（マウスポインターが画像の中央に表示されます）。

+ +

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

+ +

Gecko の開発者（アドオンまたは Mozilla アプリケーションコードのどちらかを開発している人）の場合、 Gecko 9.0 {{geckoRelease("9.0")}} は XUL {{XULElem("panel")}} 要素をドラッグフィードバック画像として使用することの対応を追加します。 {{domxref("DataTransfer.setDragImage","setDragImage()")}} に {{XULElem("panel")}} 要素に渡すだけです。

+ +

この XUL {{XULElem("panel")}} を考えてみてください。

+ +
<panel id="panel" style="opacity: 0.6">
+  <description id="pb">Drag Me</description>
+</panel>
+
+<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
+  <description>Drag Me</description>
+</vbox>
+
+ +

ユーザーが上記の {{XULElem("vbox")}} をクリックしてドラッグを始めると、以下の startDrag() 関数が呼び出されます。

+ +
function startDrag(event) {
+  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
+  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
+}
+
+ +

これは "<strong>Body</strong>" という文字列が HTML 形式で入った panel をドラッグ画像として使用します。パネルをテキストエディタ―にドロップすると、 "Body" という文字列がテキスト中のドロップした場所に挿入されます。

+ +

ドラッグの種類

+ +

ドラッグを行う時の操作には、いくつかの種類があります。 copy （コピー）はドラッグされているデータが現在の場所からドロップ先の場所にコピーされることを示します。 move （移動）はドラッグされているデータがドロップ先に移動されることを示し、 link （リンク）はドラッグ元とドロップ先の場所との間に何らかの形での関連付けや繋がりが作られることを示します。

+ +

{{event("dragstart")}} イベントのリスナーにおいて、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティに値を設定することで、 ドラッグ元について上記の3つの操作のうちどれが許可されているのかを示すことができます。

+ +
event.dataTransfer.effectAllowed = "copy";
+
+ +

この例では、コピーのみが許可されています。複数の種類の操作を組み合わせることもできます。

+ +
+
none
+
どの操作も許可されていない（ドロップを禁止）。
+
copy
+
コピーのみが許可されている。
+
move
+
移動のみが許可されている。
+
link
+
リンクのみが許可されている。
+
copyMove
+
コピーまたは移動のみが許可されている。
+
copyLink
+
コピーまたはリンクのみが許可されている。
+
linkMove
+
リンクまたは移動のみが許可されている。
+
all
+
コピー、移行、リンクの全ての操作が許可されている。
+
+ +

上に列挙されている値のいずれかと全く等しい値だけが利用可能であることに注意してください。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを copyMove に設定すると、コピーや移動の操作を許可しますが、ユーザーがリンク操作を行うことを防ぐことができます。 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを変更しない場合、「all」が指定された時と同様に、全ての操作が許可されます。ですので、特定の種類の操作を除外したい場合を除いて、プロパティの値を手動で設定する必要はありません。

+ +

ドラッグ操作の間、 {{event("dragenter")}} または {{event("dragover")}} イベントのリスナーは、操作が許可されているかどうかを確かめるために {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティを参照できます。これらのイベントにおいて、関連するプロパティである {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティへ、実際に行われる操作の種類1つだけが指定されるべきです。 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値として妥当な物は、none、copy、move、またはlinkのみです。このプロパティへは、複数の操作を組み合わせた値は指定できません。

+ +

{{event("dragenter")}} および {{event("dragover")}} イベントにおいて、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティはユーザーが要求している操作に初期化されます。ユーザーは操作の種類を修飾キーを押すことにより変更することができます。実際に使用されるキーはプラットフォームごとに異なりますが、大抵の場合は Shift キーと Control キーが、コピー・移動・リンクの各操作の切り替えに使われるでしょう。マウスポインターはどの操作が望まれているのかを示すために、例えばコピーならカーソルの横に「＋」記号が表示される、といった風に変化するでしょう。

+ +

{{event("dragenter")}} または {{event("dragover")}} イベントの間に {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値を変更すると、ユーザーが選択した操作の種類を上書きし、特定のドロップ操作を強制することができます。この時に指定できる操作の種類は、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} プロパティの値として列挙されている操作に含まれていなくてはならないことに注意してください。それ以外の値を設定した場合は、許可されている操作の中から代わりの値が設定されます。

+ +
event.dataTransfer.dropEffect = "copy";
+
+ +

この例では、「コピー」が行なわれる効果です。

+ +

その場所へのドロップが禁止されていることを示すために、値として none を設定することもできます。

+ +

{{event("drop")}} および {{event("dragend")}} イベントの中では、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティをチェックすることで最終的に選択されている効果を特定できます。選択された効果が「move」であれば、 {{event("dragend")}} イベントの中でドラッグ元から元のデータを削除するべきです。

+ +

ドロップ先の指定

+ +

{{event("dragenter")}} および {{event("dragover")}} イベントのリスナーは、ドラッグされている項目がどの場所にドロップされようとしているのかを正確に示す働きをすることが多いです。ウェブページやアプリケーションのほとんどの領域は、ドロップデータを受け取る場所としては不適切です。従って、これらのイベントに対する既定の動作はドロップを禁止する働きをします。

+ +

ドロップを許可したい場合、イベントをキャンセルして既定の動作を無効化する必要があります。属性値として定義されたイベントリスナーで false を返すか、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼ぶことで、既定の動作を無効にできます。別のファイルに分けられたスクリプトで機能を定義する場合は、後者の方が便利でしょう。

+ +
<div ondragover="return false">
+<div ondragover="event.preventDefault()">
+
+ +

{{event("dragenter")}} および {{event("dragover")}} イベントのどちらにおいても、 {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すと、その場所がドロップ可能な場所であるということを示します。多くの場合は、例えばリンクがドラッグされている時だけなど、特定の状況でのみ {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出したいと思うでしょう。これを実現するには、条件を確かめて、条件が満たされている時だけイベントをキャンセルするような関数を使って下さい。条件が満たされていない時はイベントをキャンセルしないでおけば、ユーザーがマウスのボタンを放してもその場所へのドロップは行われません。

+ +

ドロップを受け付けるか拒絶するかを決める最も一般的な方法は、データ転送の仕組みに含まれているドラッグデータの型を判別するものです。例えば、画像やリンク、もしくはその両方のみを受け付けるといった事ができます。これを実現するには、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} （プロパティ）の {{domxref("DataTransfer.types","types")}} プロパティを確認します。 {{domxref("DataTransfer.types","types")}} プロパティはドラッグが開始された時に登録されたタイプ文字列のリストで、最も適切なものから最も適切でないものの順で並んでいます。

+ +
function contains(list, value) {
+    for( var i = 0; i < list.length; ++i ) {
+        if(list[i] === value) return true;
+    }
+    return false;
+}
+
+function doDragOver(event) {
+  var isLink = contains( event.dataTransfer.types, "text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}
+ +

この例では、型のリストの中に text/uri-list 型があるかどうかを確認するために contains メソッドを使用しています。もし条件が真であれば、イベントはキャンセルされて、ドロップが許可されるでしょう。もしドラッグデータがリンクを含んでいなければ、イベントはキャンセルされず、その場所でのドロップも行われません。

+ +

実際に行われる処理の種類をより適切に示すために、 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} や {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティのいずれか、あるいはその両方に値を指定したいと思う事もあるでしょう。当然ですが、イベントをキャンセルするのを忘れると、これらのプロパティの値を変えても何も起こりません。

+ +

DataTransfer.types の更新

+ +

なお、最新の仕様書では {{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく {{domxref("DOMString")}} の凍結した配列を返すべきだとしています（Firefox 52 以降で対応されました）。

+ +

結果として、 contains メソッドはこのプロパティでは動作しなくなりました。特定の種類のデータが提供されているかをチェックするためには、代わりに includes メソッドを使用してください。以下のようなコードを使用します。

+ +
if ([...event.dataTransfer.types].includes('text/html')) {
+  // Do something
+}
+ +

types がどちらのメソッドに対応しているかを判別する機能を使用すれば、適切なコードを実行できます。

+ +

ドロップのフィードバック

+ +

その場所へのドロップが許可されていることをユーザーに示す方法はいくつかあります。マウスポインターは {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値に応じて適切なものに変化します。実際の正確な表示のされ方はユーザーのプラットフォームに依存しますが、通常は例えば「コピー」に対しては「＋」記号が表示され、また、ドロップが許可されていない時は「ここにはドロップできません」という意味のアイコンが表示されるでしょう。多くの場合において、このポインターによるフィードバックは十分に役立ちます。

+ +

それ以外にも必要に応じて、ユーザーインターフェースを更新して挿入箇所を示したりハイライト表示したりすることもできます。単にハイライト表示するだけであれば、ドロップ対象においてCSSの-moz-drag-over疑似クラスが利用できます。

+ +
.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+
+ +

この例においてdropareaクラスの要素は、 {{event("dragenter")}} イベントの中で {{domxref("Event.preventDefault","preventDefault()")}} メソッドが呼ばれて有効なドロップ対象となっている間、1ピクセルの黒い枠が表示されます。この疑似クラスは {{event("dragover")}} イベントでの状態の変化には反応しませんので、この疑似クラスでの指定を適用させるには {{event("dragenter")}} イベントをキャンセルしなくてはならない事に注意してください。

+ +

より凝った視覚効果のために、例えばドロップが行われる位置に要素を挿入するなど、 {{event("dragenter")}} イベントの間に他の操作をすることもできます。この例なら、挿入される要素は、挿入箇所を示すマーカーあるいはドラッグされている要素が新しい位置に挿入された時の状態のプレビューなどとして利用できるでしょう。このような効果は、例えば image や separator を生成して、 {{event("dragenter")}} イベントの処理中にドキュメント中に単に挿入するだけで実現できます。

+ +

{{event("dragover")}} イベントは、マウスポインターが現在指している要素において発行されます。挿入点のマーカーを {{event("dragover")}} イベントの発行に応じて移動させたいと思うのは自然な欲求でしょう。そのような場合には、他のマウスイベントでマウスポインターの位置を取得するために使われるのと同じ要領で、イベントの {{domxref("MouseEvent.clientX","clientX")}} と {{domxref("MouseEvent.clientY","clientY")}} プロパティを利用できます。

+ +

最後に、ドラッグ中にマウスポインターが要素の上を離れる時、 {{event("dragleave")}} イベントが発行されます。これは挿入点のマーカーやハイライト表示を消すのにちょうどいいタイミングです。このイベントをキャンセルする必要はありません。 -moz-drag-over 疑似クラスを使って指定されたハイライト表示やその他の視覚効果は、すべて自動的に消去されます。 {{event("dragleave")}} イベントは、ドラッグがキャンセルされた時でも常に発行されますので、このイベントによって、挿入点の消去などを確実に行うことができます。

+ +

ドロップの実行

+ +

ユーザーがマウスのボタンを放した時、ドラッグ＆ドロップの操作は終了します。有効なドロップ対象となっている要素の上でマウスのボタンが放された場合、最後の {{event("dragenter")}} と {{event("dragover")}} イベントはキャンセルされて、ドロップが成功し、 {{event("drop")}} イベントがそのドロップ対象において発行されます。それ以外の場所でボタンが放された場合は、ドラッグ操作はキャンセルされ、 {{event("drop")}} イベントは発行されません。

+ +

{{event("drop")}} イベントの間、あなたはドロップされたデータをイベントから取得して、ドロップ位置に挿入することになります。どのドラッグ＆ドロップ操作が望まれていたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティで判別することができます。

+ +

すべてのドラッグ＆ドロップ関連のイベントにおいて、イベントの {{domxref("DragEvent.dataTransfer","dataTransfer")}} プロパティはドラッグされた対象に関するデータを保持しています。データの取得には {{domxref("DataTransfer.getData","getData()")}} メソッドを利用することになるでしょう。

+ +
function onDrop(event) {
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+
+ +

{{domxref("DataTransfer.getData","getData()")}} メソッドは、取得したいデータの型を引数として取ります。実行すると、ドラッグ操作の開始時に {{domxref("DataTransfer.setData","setData()")}} メソッドによって登録された値が文字列として返されます。その型に対するデータが存在しない場合は、空文字が返されます。当然ながら、直前の {{event("dragover")}} イベントでの処理においてチェックした時と同様に、あなたはデータの正しい形式が利用可能かどうかを知りたいと思うでしょう。

+ +

上記の例では、まずデータを取得し、ドロップ対象の内容テキストとしてそれを挿入しています。これは p 要素や div 要素がドロップ対象の領域として使われる事を想定しており、ドラッグされたテキストをドロップ位置に挿入するという効果をもたらします。

+ +

ウェブページにおいては、ドロップを受け付けた場合、イベントの {{domxref("Event.preventDefault","preventDefault()")}} メソッドを呼び出すべきです。これによって、ブラウザ内でのドロップ時の既定の挙動がキャンセルされます。例えば、リンクがウェブページにドロップされた場合、 Firefox はそのリンク先を読み込もうとします。イベントをキャンセルすることで、この動作は抑止されます。

+ +

他の形式でデータを取得することもできます。データがリンクであった場合、そのデータは text/uri-list 型でも提供されているでしょう。その場合、リンクを内容に挿入することができます。

+ +
function doDrop(event) {
+  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  for (let line of lines) {
+    if (line.startsWith("#"))
+      continue;
+
+    let link = document.createElement("a");
+    link.href = line;
+    link.textContent = line;
+    event.target.appendChild(link);
+  }
+  event.preventDefault();
+}
+
+ +

この例は、ドラッグされたデータからリンクを挿入します。名前から想像できる通り、 text/uri-list 型は実際に複数のURLの改行区切りのリストを含んでいる場合があります。このコードでは、 split を使って文字列を行ごとに分割し、各行に繰り返し処理を行って、それぞれをリンクとして文書中に挿入しています。ナンバー記号（#）で始まる物はコメントとして除外していることに注意してください。

+ +

単純な使い方として、リストの中の最初の有効なURLを取得するために、特別な型 URL も利用できます。例：

+ +
var link = event.dataTransfer.getData("URL");
+
+ +

これによって、コメントの除外などの処理は一切不要になります。しかし、これはリストの中の最初の URL だけしか取得できないという制限があります。

+ +

URL 型は特別な省略表記用の型で、 {{domxref("DataTransfer.types","types")}} プロパティで取得できる型のリストには列挙されません。

+ +

時には、複数の形式をサポートして、そのうち最も適切な形式で提供されたデータを取得したいと思う事もあるでしょう。以下の例では、3つの形式がドロップ対象によってサポートされています。

+ +

以下の例は、提供されたデータの中で最も適切なデータを返す例です。

+ +
function doDrop(event) {
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter((value) => types.includes(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+
+ +

この例は Firefox 3 で利用可能な JavaScript の拡張された機能を使って書かれていますが、他の環境でも動作する様に書き換えることもできます。

+ +

ドラッグの終了

+ +

1回のドラッグ操作が終了すると、 {{event("dragend")}} イベントがドラッグ元（ {{event("dragstart")}} イベントが発行されるのと同じ要素）において発行されます。このイベントは、ドラッグ操作が成功したかキャンセルされたかに関わらず発行されます。どの操作が行われたのかは、 {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティを参照して知ることができます。

+ +

{{event("dragend")}} イベントにおいて {{domxref("DataTransfer.dropEffect","dropEffect")}} プロパティの値がnoneである場合、ドラッグ操作がキャンセルされたことを意味します。それ以外の場合は、プロパティの値は実際に行われた操作の種類を示します。ドラッグ元はこの情報に基づいて、ドラッグされた項目を「移動」の操作の後に元の場所から削除することができます。 {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} プロパティの値は、ユーザーが（Escapeキーを押すなどして）ドラッグ操作をキャンセルした場合は true となり、不正なドロップ先だった場合などの他の理由でドラッグ操作がキャンセルされた場合や、ドロップに成功した場合はfalseとなります。

+ +

ドロップ操作は同じウィンドウの中または他のアプリケーションの上で行われ得ます。いずれの場合も常に {{event("dragend")}} イベントは発行されます。このイベントの {{domxref("MouseEvent.screenX","screenX")}} および {{domxref("MouseEvent.screenY","screenY")}} プロパティの値には、ドロップが行われたときの画面上での座標が設定されます。

+ +

{{event("dragend")}} イベントの伝搬が終了した後、ドラッグ＆ドロップの操作は完了します。

+ +

[1] Gecko では、元のノードがドラッグ中（例えばドロップ中や {{event("dragover")}}）に移動したり削除されたりした場合、 {{event("dragend")}} が発行されません。 bug 460801

+ +

関連情報

+ + diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html new file mode 100644 index 0000000000..aadaeb095d --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -0,0 +1,108 @@ +--- +title: 複数の項目のドラッグ＆ドロップ +slug: DragDrop/Dragging_and_Dropping_Multiple_Items +translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items +--- +

{{ Fx_minversion_header(3.5) }} Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能はtypesプロパティやgetData、setData、clearDataの各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。

+

mozSetDataAtを使うと、dragstartイベントで複数の項目を登録することができます。これはsetDataメソッドとよく似た働きをします。

+
var dt = event.dataTransfer;
+dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0);
+dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1);
+
+

この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、setDataメソッドを呼んだのと等しく扱われます。

+

mozClearDataAtメソッドを使って、指定した項目を削除することもできます。

+
event.dataTransfer.mozClearDataAt("text/plain", 1);
+
+

あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、

+
var dt = event.dataTransfer;
+dt.mozSetDataAt("text/uri-list", "URL1", 0);
+dt.mozSetDataAt("text/plain",    "URL1", 0);
+dt.mozSetDataAt("text/uri-list", "URL2", 1);
+dt.mozSetDataAt("text/plain",    "URL2", 1);
+dt.mozSetDataAt("text/uri-list", "URL3", 2);
+dt.mozSetDataAt("text/plain",    "URL3", 2);
+// [item1] data=URL1, index=0
+// [item2] data=URL2, index=1
+// [item3] data=URL3, index=2
+
+

このように2つの形式で提供されたデータを持つ3つの項目を登録した後で、

+
dt.mozClearDataAt("text/uri-list", 1);
+dt.mozClearDataAt("text/plain", 1);
+
+

このように2番目の項目についてすべての形式のデータを削除すると、3番目だった項目が繰り上がって2番目の項目になり、インデックスが2から1に変わります。

+
// [item1] data=URL1, index=0
+// [item2] data=URL3, index=1
+
+

幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。

+

複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。

+

複数のファイルがドラッグされているかどうかを確認するには、mozItemCountプロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、effectAllowedプロパティにnoneを指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。

+

ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様にgetDataを使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。

+

それに対して、任意のインデックスの項目をデータトランスファーから取得するにはmozGetDataAtメソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。

+
function onDrop(event)
+{
+  var files = [];
+  var dt = event.dataTransfer;
+  for (var i = 0; i < dt.mozItemCount; i++)
+    files.push(dt.mozGetDataAt("application/x-moz-file", i));
+}
+
+

mozTypesAtメソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。typesプロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。typesプロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。

+
var types = event.dataTransfer.mozTypesAt(1);
+
+

文字列でないデータのドラッグ

+

上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルはapplication/x-moz-file型でnsIFileのオブジェクトとして保持されてドラッグされます。setDataメソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりにmozSetDataAtメソッドを使わなくてはなりません。

+
dt.mozSetDataAt("application/x-moz-file", file, 0);
+
+

複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。

+

同様に、ファイルやその他のオブジェクトを取得するにはmozGetDataAtメソッドを使う必要があります。もしgetDataを使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合はgetDataを使っても問題ありません。

+

複数項目のドロップの例

+

以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。

+
<html>
+<head>
+<script>
+
+function dodrop(event)
+{
+  var dt = event.dataTransfer;
+  var count = dt.mozItemCount;
+  output("Items: " + count + "\n");
+
+  for (var i = 0; i < count; i++) {
+    output(" Item " + i + ":\n");
+    var types = dt.mozTypesAt(i);
+    for (var t = 0; t < types.length; t++) {
+      output("  " + types[t] + ": ");
+      try {
+        var data = dt.mozGetDataAt(types[t], i);
+        output("(" + (typeof data) + ") : <" + data + " >\n");
+      } catch (ex) {
+        output("<<error>>\n");
+        dump(ex);
+      }
+    }
+  }
+}
+
+function output(text)
+{
+  document.getElementById("output").textContent += text;
+  dump(text);
+}
+
+</script>
+</head>
+<body>
+
+<div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;"
+     ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
+     ondragover="event.stopPropagation(); event.preventDefault();"
+     ondrop="event.stopPropagation(); event.preventDefault(); dodrop(event);">
+<div>
+
+</body>
+</html>
+
+

この例は、preventDefaultメソッドによってdragenterイベントとdragoverイベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。

+

項目をドロップした時に、dodrop関数が呼ばれます。この関数はmozItemCountプロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るためにmozTypesAtメソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。

+

この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。

+

{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}

diff --git a/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html new file mode 100644 index 0000000000..eb8487d158 --- /dev/null +++ b/files/ja/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -0,0 +1,228 @@ +--- +title: 推奨されるドラッグのデータ型 +slug: DragDrop/Recommended_Drag_Types +tags: + - Guide + - drag and drop +translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

HTML Drag and Drop API は、プレーンテキスト、URL、HTML コード、ファイルなど、さまざまな形式のデータのドラッグをサポートしています。このドキュメントでは、一般的なドラッグ可能なデータ形式のベストプラクティスについて説明しています。

+ +
+

注意事項:
+ mozSetDataAt() のような moz プレフィックスを持つこのドキュメントのすべてのメソッドとプロパティは、Gecko ベースのブラウザでのみ動作します。

+
+ +

テキストのドラッグ

+ +

テキストをドラッグする時は、text/plain 型を使用します。2番目の引数には、ドラッグした文字列を指定します。例えば、以下のようになります。

+ +
event.dataTransfer.setData("text/plain", "これはドラッグされるテキストです");
+
+ +

Web ページのテキストボックスや選択範囲の文字列のドラッグは、ブラウザが自動的に処理を行うので、自分で処理する必要はありません。

+ +

そのデータが代替テキストでは表現できない物である場合を除いて、他のデータ形式をサポートしないアプリケーションやドロップ対象のためのフォールバック用に、常に text/plain 型のデータを提供することをおすすめします。そのために、データを追加する時には最後に text/plain 型のデータを登録しておいてください。

+ +

注: 古いコードにおいて、text/unicode や text といった型の記述を見かけることがあるかもしれません。これらはどちらも text/plain と等しく扱われ、プレーンテキスト型のデータとして登録・取得されます。

+ + + +

ドラッグされたハイパーリンクには、text/uri-list と text/plain の2種類のデータを含める必要があります。どちらの形式もリンクの URL をデータに使用しなければなりません。例えば、以下のようになります。

+ +
var dt = event.dataTransfer;
+dt.setData("text/uri-list", "https://www.mozilla.org");
+dt.setData("text/plain", "https://www.mozilla.org");
+
+ +

text/uri-list 型のフォールバックとして、text/plain 型を最後に設定します。

+ +

注:URL 用の型は uri-list-list で、L ではなく I であることに注意してください。

+ +

複数のリンクをドラッグするには、それぞれのリンクを text/uri-list データ内で CRLF 改行で区切ってください。ナンバー記号 (#) で始まる行はコメントで、有効な URL として扱われません。コメントは、リンクの目的を示したり、リンクに関連づけられたタイトルを保持したりする目的で利用できます

+ +
+

複数のリンクのための text/plain 型のフォールバックは、すべての URL を含むべきですが、コメントを含めるべきではありません。

+
+ +

例えば、以下のサンプル text/uri-list データには、2つのリンクと1つのコメントが含まれています。

+ +
http://www.mozilla.org
+#2つ目のリンク
+http://www.example.com
+
+ +

ドロップされたリンクを取得する時は、コメントを含めて複数のリンクをドラッグした場合の処理を確実に行ってください。便宜上、text/uri-list 型のデータ内の最初の有効なリンクを参照するために、特別な型として URL を使用することができます。

+ +
+

URL 型でデータを追加しないでください - それを行うと、代わりに text/uri-list 型のデータとして登録されます。

+
+ +
var url = event.dataTransfer.getData("URL");
+
+ +

Mozilla 特有の型として、text/x-moz-url 型のデータを見かけることがあるかもしれません。この型が表示される場合は、text/uri-list 型の前に表示されるはずです。この型のデータは、リンクの URL に続いてリンクのタイトルが保持されており。例えば、以下のようになります。

+ +
http://www.mozilla.org
+Mozilla
+http://www.example.com
+Example
+
+ +

HTMLとXMLのドラッグ

+ +

HTML の内容は text/html 型を使用します。この型のデータはドラッグされる HTML をシリアライズしたものであるべきです。具体的には、この型のデータとして登録されるのに適した値は、要素の {{domxref("Element.innerHTML","innerHTML")}} プロパティの値です。

+ +

XML の内容は text/xml 型を使用することができますが、内容は整形式の XML に変換しておくべきです。

+ +

また、text/plain 型を使用して、HTML または XML のプレーンテキストでの表現を提供することもできます。その場合のデータは単純なテキストであるべきで、タグや属性などのソース文字列を含めるべきではありません。例えば、以下のようになります。

+ +
var dt = event.dataTransfer;
+dt.setData("text/html", "こんにちは、<strong>見知らぬ人</strong>");
+dt.setData("text/plain", "こんにちは、見知らぬ人");
+
+ +

ファイルのドラッグ

+ +

ローカルのファイルは application/x-moz-file 型で、 nsIFile のオブジェクトとしてドラッグされます。特権を持っていない Web ページでは、この型のデータを取得することも変更することもできません。

+ +

ファイルを文字列にはできないため、データを登録するには {{domxref("DataTransfer.mozSetDataAt","mozSetDataAt()")}} メソッドを使用する必要があります。同様に、データを取得するには {{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドを使わなくてはなりません。

+ +
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+
+ +

可能であれば、text/uri-list 型と text/plain 型の両方を使ってファイルの URL を含めてください。これらの型は最後に登録されるべきで、それによって、 application/x-moz-file 型は優先度の高い、より適切な型となります。

+ +

複数のファイルは、データ転送中に複数のアイテムとしてドロップ中に受信されます。これについての詳細は、複数の項目のドラッグ＆ドロップを参照してください。

+ +

以下の例は、ドロップしたファイルを受信するための領域を作成する方法を示しています。

+ +
<listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/>
+
+<script>
+function checkDrag(event) {
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event) {
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile) {
+    event.currentTarget.appendItem(file.leafName);
+  }
+}
+</script>
+
+ +

この例では、データ転送に application/x-moz-file 型が含まれている場合にのみ、イベントが false を返します。ドロップイベントの間、ファイル型に関連付けられたデータが取得され、ファイルのファイル名がリストボックスに追加されます。{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、nsISupports を返すので、nsIFile 型に変換するために、ここでは instanceof 演算子を使用していることに注意してください。これは、誤ってファイルではない型のデータを登録した場合のためのチェックとしても有効です。

+ +

DataTransfer.types の更新

+ +

最新の仕様では、{{domxref("DataTransfer.types")}} は {{domxref("DOMStringList")}} ではなく、{{domxref("DOMString")}} で固定した配列を返すようになっています（これは Firefox 52 以上でサポートされています）。

+ +

その結果、contains メソッドはもう機能しません。代わりに includes メソッドを使用し、以下のようなコードで特定の形式のデータが提供されているかどうかを確認する必要があります。

+ +
if ([...event.dataTransfer.types].includes('text/html')) {
+  // 実行するコード
+}
+ +

特徴検出を使用して、どのメソッドがサポートされている型なのかを判断し、適切なコードを実行することができます。

+ +

画像のドラッグ

+ +

画像の直接のドラッグは一般的ではありません。そのため、Mozilla は Mac と Linux での画像の直接のドラッグをサポートしていません。その代わり、画像は通常その URL としてドラッグされます。そのためには、他の URL と同様に text/uri-list 型を使用します。データは、画像の URL、または画像がWeb上やディスク上に無い場合は データ URL である必要があります。

+ +

リンクと同様に、text/plain 型のデータには URL も含まれている必要があります。しかし、データ URL は通常のテキストの内容には有用ではないので、このような状況では text/plain 型のデータを除外した方がよいでしょう。

+ +

Chrome などの特権的なコードでは、画像の種類に応じて、image/jpeg、image/png、image/gif のいずれかの形式を使用することもできます。データは、nsIInputStream インターフェースを実装したオブジェクトでなければなりません。このストリームが読み込まれる時には、そのファイル形式での画像のデータビットを提供しなければなりません。

+ +

画像がディスク上にある場合は、application/x-moz-file 型も含める必要があります。実際に、これは画像ファイルをドラッグする一般的なやり方です。

+ +

最も適切なデータ形式からそうでない形式まで、正しい順序でデータを登録することが重要です。最初に image/jpeg のような標準的な画像型を設定し、次に application/x-moz-file 型を設定します。次に、text/uri-list 型を設定し、最後に text/plain 型を設定します。例えば、以下のようになります。

+ +
var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+
+ +

{{domxref("DataTransfer.mozGetDataAt","mozGetDataAt()")}} メソッドは、テキスト以外のデータに使用されることに注意してください。内容によっては、これらの型の一部しか含まれていない場合があるので、ドロップされた画像を受信する時には、どの型が利用可能になっているかを確認することが重要です。

+ +

ノードのドラッグ

+ +

ドキュメント内のノードや要素は、application/x-moz-node 型を使ってドラッグすることができます。型のデータは DOM ノードでなければなりません。これにより、ドロップ対象はドラッグが開始された実際のノードを受け取ることができます。ノードがドロップされていても、異なるドメインからの呼び出し元はそのノードにアクセスできないことに注意してください。

+ +

ノードの内容は常に text/plain 型の代替文字列で提供するべきです。

+ +

独自データのドラッグ

+ +

独自の目的のために、他の型を使うこともできます。そのデータが特定のサイトやアプリケーションに固有のものでない限り、常に text/plain 型の代替文字列を含めるようにしてください。代替テキストを用意しなかった場合は、他の場所にドロップできなくなります。

+ +

OS のフォルダにファイルをドラッグ

+ +

既存のドラッグイベントセッションにファイルを追加したり、コードが対象フォルダーの場所の通知を受信したときに、オペレーティングシステム内のフォルダーに対してのドロップ操作だった場合、ファイルをディスクに書き出したい場合があります。これは拡張機能（またはその他の特権コード）でのみ動作し、application/moz-file-promise 型を使用する必要があります。次のサンプルでは、この高度なケースの概要を説明します。

+ +
// currentEvent is an existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-dest-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data;
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dest-filename', namePrimitive, dataSize);
+       var name = namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString).data;
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself…
+    }
+  }
+}
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/accesskey/index.html b/files/ja/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..82738c792f --- /dev/null +++ b/files/ja/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +
Element.accessKeyは、ユーザが他の要素へジャンプする時に押す、キーストロークを設定します。
+ +
 
+ +
+

Element.accessKey は、ブラウザの既定のキーバインディングと競合する為、めったに使われません。この競合を回避するために、ブラウザはアクセスキーの挙動を他の「最適な」キーと一緒に押されたときに動くように実装しています。（ Alt + アクセスキー、の様に。）

+
+ +

See also 

+ + diff --git a/files/ja/web/api/installtrigger/index.html b/files/ja/web/api/installtrigger/index.html new file mode 100644 index 0000000000..6b2353e403 --- /dev/null +++ b/files/ja/web/api/installtrigger/index.html @@ -0,0 +1,15 @@ +--- +title: InstallTrigger オブジェクト +slug: XPInstall_API_Reference/InstallTrigger_Object +--- +

 

+

InstallTrigger

+

ソフトウェアのダウンロードとインストールをする引き金となる Web ページ上のスクリプトには、InstallTrigger オブジェクトを使用します。

+

概要

+

とても簡単なインストール方法は、インストールスクリプトに必要な InstallTrigger オブジェクトを使用するだけです。

+

複雑なインストール方法では、 Install オブジェクトや File オブジェクトを使用する必要があります。どちらの場合も Web ページスクリプトを作成してインストール処理の引き金にします。そのページ内の InstallTrigger メソッドが、指定した XPI ファイルをダウンロードし、その XPI ファイルのトップレベルに置かれた install.js スクリプトを起動する "引き金" になります。

+

InstallTrigger オブジェクト上の最初のメソッドは install です。これは、XPI ファイル形式にまとめられた一つまたはそれ以上のソフトウェアパッケージをダウンロードし、インストールします。以下は、Web ページ上からインストールする引き金の基本的な例です:

+
xpi={'XPInstall Dialog Display Name':'simple.xpi'};
+InstallTrigger.install(xpi);
+
+

また、InstallTrigger オブジェクトをソフトウェアのバージョンチェックに使用したり、Netscape 6 や Mozilla のテーマ、言語パックをインストールしたり、 install オブジェクトを使用して複数のパッケージをインストールすることもできます。

diff --git a/files/ja/web/api/mediarecorder_api/index.html b/files/ja/web/api/mediarecorder_api/index.html deleted file mode 100644 index a2e3ec8eaf..0000000000 --- a/files/ja/web/api/mediarecorder_api/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -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/web/api/node/baseuriobject/index.html b/files/ja/web/api/node/baseuriobject/index.html deleted file mode 100644 index 1de7600c48..0000000000 --- a/files/ja/web/api/node/baseuriobject/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -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/web/api/node/nodeprincipal/index.html b/files/ja/web/api/node/nodeprincipal/index.html deleted file mode 100644 index 41547615f2..0000000000 --- a/files/ja/web/api/node/nodeprincipal/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -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/web/api/page_visibility_api/index.html b/files/ja/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..524153a17e --- /dev/null +++ b/files/ja/web/api/page_visibility_api/index.html @@ -0,0 +1,272 @@ +--- +title: Page Visibility API +slug: Web/Guide/User_experience/Using_the_Page_Visibility_API +tags: + - DOM + - Intermediate + - Tutorials +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +

タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。

+ +
+

メモ: The Page Visibility API は、文書が表示されていない時に不必要なタスクの実行を抑止することで、リソースを節約したり実行効率を上げたりするために特に有用です。

+
+ +

ユーザーがウィンドウを最小化したり他のタブに切り替えたりした時、 API は {{event("visibilitychange")}} イベントを送信してリスナーにページの状態が変化したことを知らせます。イベントを検出していくつかの操作を実行したり、様々な動作をしたりすることができます。例えば、ウェブアプリで動画を再生している場合、ユーザーがタブをバックグラウンドにした場合に動画を一時停止させ、ユーザーがこのタブに戻ったときに再生を再開させたりすることができます。ユーザーは動画の位置に迷うことがなく、動画の音声が新しく前景になったタブの音声を邪魔せず、ユーザーがその間に動画を見落とすことがなくなります。

+ +

{{HTMLElement("iframe")}} の可視状態は、親文書と同じになります。 CSS プロパティにより ({{cssxref("display", "display: none;")}} のように) <iframe> を隠しても visibility のイベントは発生せず、またフレームに含まれる文書の状態も変わりません。

+ +

使用例

+ +

Page Visibility API の使用例をいくつか考えてみましょう。

+ +
    +
  • 画像のスライドショーがあるサイトで、ユーザーが見ていない間に次のスライドに進むべきではないもの
    • +
  • 情報をダッシュボードに表示するアプリケーションで、ページが見えていないときは更新情報をサーバーへ問い合わせてほしくないもの
    • +
  • 正確なページビューをカウントできるよう、ページがプリレンダリングされている状態を検出したい。
    • +
  • デバイスがスタンバイモードである (ユーザーが電源ボタンを押して、画面を消灯している) ときに、音声を止めたいサイト。
    • +
+ +

以前、開発者はこれを検出するために不完全な代替手段を使用していました。例えば window で onblur/onfocus ハンドラーを登録することでページがアクティブではないときを知る助けになりますが、ページがユーザーから隠された状態であることは知らせてくれません。 Page Visibility API はこれを解決します。

+ +
+

メモ: {{domxref("GlobalEventHandlers.onblur", "onblur")}} 及び {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} はユーザーがウィンドウを切り替えたことを教えてくれますが、非表示にしたという意味になるとは限りません。ページが非表示になるのは、ユーザーがタブを切り替えたり、タブを含むブラウザーウィンドウを最小化したりした時だけです。

+
+ +

Policies in place to aid background page performance

+ +

Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:

+ +
    +
  • Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.
    • +
  • Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See Reasons for delays longer than specified for more details.
    • +
  • Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows: +
      +
    • In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.
      • +
    • Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
      • +
    • Timer tasks are only permitted when the budget is non-negative.
      • +
    • Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.
      • +
    • The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.
      • +
    +
    • +
+ +

Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.

+ +
    +
  • Tabs which are playing audio are considered foreground and aren’t throttled.
    • +
  • Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
    • +
  • IndexedDB processes are also left unthrottled in order to avoid timeouts.
    • +
+ +

例

+ +

ライブサンプルをご覧ください (音声つき動画あり)。

+ +

この例では別のタブに切り替えたときに動画再生を一時停止、また元のタブに戻った時に再生を再開しており、以下のコードで作られました:

+ +
// hidden プロパティおよび可視性の変更イベントの名前を設定
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 や Firefox 18 以降でサポート
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// ページが隠れたとき、動画再生を一時停止する。
+// ページが表示されたとき、動画を再生する。
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// ブラウザーが addEventListener または Page Visibility API をサポートしない場合に警告
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Page Visibility の変更を扱う
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // 動画が一時停止されたときに、タイトルを設定する。
+  // 一時停止したことを示す。
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // 動画を再生するときに、タイトルを設定する。
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Document インターフェイスに追加されたプロパティ

+ +

The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
ページがユーザーから隠された状態であると思われる場合に true を、そうでない場合に false を返します。
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
文書の現在の可視状態を示す {{domxref("DOMString")}} です。取りうる値は以下の通りです。 +
+
visible
+
ページのコンテンツは少なくとも部分的に可視状態です。実際は、最小化されていないウィンドウのフォアグラウンドのタブにページがあることを意味します。
+
hidden
+
ページのコンテンツはユーザーから見えていません。実際は、文書がバックグラウンドのタブか最小化されているウィンドウにある、あるいは OS のスクリーンがロックされていることを意味します。
+
prerender
+
ページのコンテンツはプリレンダリングされており、ユーザーから見えていません (document.hidden では隠されているとみなされます)。文書は prerender の状態から始まるかもしれませんが、プリレンダリングは1つの文書は1回しか行われないので、他の状態からこの状態に移ることはありません。 +
メモ: すべてのブラウザーがプリレンダリングに対応しているわけではありません。
+
+
unloaded
+
ページがメモリからアンロードされている途中です。 +
メモ: すべてのブラウザーが unloaded の値に対応しているわけではありません。
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
{{event("visibilitychange")}} イベントが発生したときに呼び出されるコードを提供する {{domxref("EventListener")}} です。
+
+ +
//startSimulation および pauseSimulation は別途定義される
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}初回定義
+ +

ブラウザーの対応

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本対応13 {{property_prefix("webkit")}}
+ 33		{{CompatGeckoDesktop(18)}}[2]1012.10[1]7
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoDesktop(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling57{{CompatGeckoDesktop(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本対応5.0[3]{{CompatGeckoMobile(18)}}[2]1012.10[1]7[4]
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoMobile(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling{{CompatNo}}{{CompatGeckoMobile(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] ブラウザーウィンドウを最小化しても visibilitychange イベントは発生せず、また hidden は true に変わりません。

+ +

[2] Firefox 10 から Firefox 51 まで、このプロパティは -moz- 接頭辞を使用することができました。

+ +

[3] Android 4.4 はこの機能に webkit の接頭辞付きで対応しています。

+ +

[4] From iOS 11.0.2 onwards, the values are not correct in standalone mode (when you press "Add to Homescreen") and when the screen is locked (you pressed the power button). The value for hidden is false and visibilityState is visible.

+ +

関連情報

+ + diff --git a/files/ja/web/api/proximity_events/index.html b/files/ja/web/api/proximity_events/index.html new file mode 100644 index 0000000000..633d2a7cfb --- /dev/null +++ b/files/ja/web/api/proximity_events/index.html @@ -0,0 +1,84 @@ +--- +title: Proximity Events +slug: WebAPI/Proximity +tags: + - API + - Experimental + - Proximity Events + - Reference +translation_of: Web/API/Proximity_Events +--- +

{{DefaultAPISidebar("Proximity Events")}}{{ SeeCompatTable }}

+ +

proximity events は、ユーザーが端末の近くにいるときを知るのに便利な手段です。これらのイベントは近接度の変化への対応、例えばユーザーがスマートフォンを耳の近くに持ってきて電話をしているときにスクリーンを休止することを可能にします。

+ +
+

メモ: この API は端末に近接センサーを必要とすることが明らかです。近接センサーは、たいていモバイル端末のみで使用できます。センサーを搭載していない端末もイベントをサポートするかもしれませんが、イベントは発生しません。

+
+ +

Proximity Event

+ +

端末の近接センサーが端末と物体との距離の変化を検出すると、それをブラウザーに通知します。ブラウザーが通知を受けると、あらゆる変化について {{domxref("DeviceProximityEvent")}} イベントが、またよりおおざっぱな変化の場合に {{domxref("UserProximityEvent")}} イベントが発生します。

+ +

このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("deviceproximity")}} または {{event("userproximity")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondeviceproximity")}} プロパティまたは {{domxref("window.onuserproximity")}} プロパティに接続することにより、window オブジェクトレベルで取得できます。

+ +

イベントを取得すると、イベントオブジェクトでさまざまな種類の情報にアクセスできます。

+ +
    +
  • {{domxref("DeviceProximityEvent")}} イベントは、端末と物体との距離に一致する値を {{domxref("DeviceProximityEvent.value","value")}} プロパティで提供します。また、端末が何らかの物体を検出できる最短距離および最長距離を、{{domxref("DeviceProximityEvent.min","min")}} プロパティおよび {{domxref("DeviceProximityEvent.max","max")}} プロパティで提供します。
    • +
  • {{domxref("UserProximityEvent")}} イベントは、距離の大まかな近さを真偽値で表します。{{domxref("UserProximityEvent.near")}} は物体が近いときに true に、また物体が遠いときに false になります。
    • +
+ +

例

+ +
window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // スクリーンの電源を切る
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // スクリーンの電源を入れる
+    navigator.mozPower.screenEnabled = true;
+  }
+});
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Proximity Events', '', 'Proximity Events')}}{{Spec2('Proximity Events')}}初回定義
+ +

ブラウザーの対応

+ +

DeviceProximityEvent

+ + + +

{{Compat("api.DeviceProximityEvent")}}

+ +

UserProximityEvent

+ + + +

{{Compat("api.UserProximityEvent")}}

+ +

関連情報

+ +
    +
  • {{domxref("DeviceProximityEvent")}}
    • +
  • {{domxref("UserProximityEvent")}}
    • +
  • {{event("deviceproximity")}}
    • +
  • {{event("userproximity")}}
    • +
diff --git a/files/ja/web/api/randomsource/index.html b/files/ja/web/api/randomsource/index.html deleted file mode 100644 index 5972564d98..0000000000 --- a/files/ja/web/api/randomsource/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -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 から利用可能でした。

- -

関連情報

- -
    -
  • {{domxref("Crypto")}} オブジェクトを取得する {{ domxref("Window.crypto") }}。
    • -
  • {{jsxref("Math.random")}}、意味不明ではない乱数値。
    • -
diff --git a/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html b/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html deleted file mode 100644 index 16574bebce..0000000000 --- a/files/ja/web/api/readablestreamdefaultcontroller/readablestreamdefaultcontroller/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ReadableStreamDefaultController.ReadableStreamDefaultController() -slug: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController -tags: - - API - - Constructor - - ReadableStreamDefaultController - - Reference - - Streams -translation_of: Web/API/ReadableStreamDefaultController/ReadableStreamDefaultController ---- -
{{APIRef("Streams")}}
- -

ReadableStreamDefaultController() コンストラクターは、ReadableStreamDefaultController オブジェクトのインスタンスを作成して返します。

- -
-

注: このコンストラクターを手動で使用することはありません — これは、{{domxref("ReadableStream")}} オブジェクトの構築中に使用されます。

-
- -

構文

- -
var readableStreamDefaultController = new ReadableStreamDefaultController(stream, underlyingSource, size, highWaterMark);
- -

パラメーター

- -
-
stream
-
制御される {{domxref("ReadableStream")}}。
-
underlyingSource
-
構築されたストリームインスタンスの動作を定義するメソッドとプロパティを含むオブジェクト。 詳細については、ReadableStream() コンストラクターのパラメーター定義を参照してください。
-
size
-
 パラメーター chunk を含むメソッド — これは、各チャンクに使用するサイズをバイト単位で示します。
-
highWaterMark
-
負でない整数 — これは、バックプレッシャーが適用される前に内部キューに含めることができるチャンクの総数を定義します。
-
- -

戻り値

- -

{{domxref("ReadableStreamDefaultController")}} オブジェクトのインスタンス。

- -

例外

- -
-
TypeError
-
指定された stream パラメーターは {{domxref("ReadableStream")}} ではないか、既にコントローラーが関連付けられています。
-
- -

例

- -

次の単純な例では、コンストラクターを使用してカスタムの ReadableStream を作成します（完全なコードについては、単純なランダムストリームの例を参照）。 start() 関数は、1秒ごとにテキストのランダムな文字列を生成し、それをストリームのキューに入れます。 {{domxref("ReadableStream.cancel()")}} が何らかの理由で呼び出された場合、生成を停止するための cancel() 関数も提供します。

- -

{{domxref("ReadableStreamDefaultController")}} オブジェクトは、start() 関数および pull() 関数のパラメーターとして提供されることに注意してください。

- -

ボタンが押されると、生成を停止し、{{domxref("ReadableStreamDefaultController.close()")}} を使用してストリームを閉じ、ストリームからデータを読み取る別の関数を実行します。

- -
const stream = new ReadableStream({
-  start(controller) {
-    interval = setInterval(() => {
-      let string = randomChars();
-
-      // ストリームに文字列を追加
-      controller.enqueue(string);
-
-      // それを画面に表示
-      let listItem = document.createElement('li');
-      listItem.textContent = string;
-      list1.appendChild(listItem);
-    }, 1000);
-
-    button.addEventListener('click', function() {
-      clearInterval(interval);
-      fetchStream();
-      controller.close();
-    })
-  },
-  pull(controller) {
-    // この例では実際には pull は必要ありません
-  },
-  cancel() {
-    // リーダーがキャンセルされた場合に呼び出されるため、
-    // 文字列の生成を停止する必要があります
-    clearInterval(interval);
-  }
-});
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName("Streams","#rs-default-controller-constructor","ReadableStreamDefaultController()")}}{{Spec2('Streams')}}初期定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.ReadableStreamDefaultController.ReadableStreamDefaultController")}}

diff --git a/files/ja/web/api/slotable/index.html b/files/ja/web/api/slotable/index.html deleted file mode 100644 index 859be5e107..0000000000 --- a/files/ja/web/api/slotable/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -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/web/api/vibration_api/index.html b/files/ja/web/api/vibration_api/index.html new file mode 100644 index 0000000000..49ab486128 --- /dev/null +++ b/files/ja/web/api/vibration_api/index.html @@ -0,0 +1,101 @@ +--- +title: Vibration API +slug: Web/Guide/API/Vibration +tags: + - API + - Beginner + - Mobile + - Vibration +translation_of: Web/API/Vibration_API +--- +
{{DefaultAPISidebar("Vibration API")}}
+ +

現代のモバイル端末は、たいていバイブレーションハードウェアを内蔵しており、ソフトウェアのコードが端末を振動させることによりユーザーに物理的なフィードバックを与えることができます。 Vibration API はウェブアプリに、このハードウェアが存在すればアクセスすることができるようにし、端末が対応していない場合は何もしません。

+ +

バイブレーションの表現

+ +

バイブレーションはオン・オフのパルスのパターンで表され、様々な長さになることがあります。パターンは振動するミリ秒数を示す整数 1 つ、あるいはバイブレーションと休止時間のパターンを示す整数の配列で構成します。バイブレーションは {{domxref("Navigator.vibrate()")}} という単一のメソッドで制御します。

+ +

1 回のバイブレーション

+ +

1 個の値、または 1 個だけの値で構成される配列を指定することにより、バイブレーションハードウェアを 1 回振動させることができます:

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

どちらの例も、デバイスを 200 ミリ秒間振動させます。

+ +

バイブレーションパターン

+ +

値の配列は、デバイスが振動する時間と振動しない時間を交互に示します。配列内の各値は整数値に変換されて、デバイスを振動させるミリ秒数および振動させないミリ秒数として交互に解釈されます。例えば以下のようにします。

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

これはデバイスを 200 ミリ秒間振動させて、その後再び 200 ミリ秒間振動させる前に 100 ミリ秒間振動を止めます。

+ +

バイブレーション/休止のペアは好きなだけ多く指定でき、またエントリ数は偶数・奇数のどちらでも可能です。各バイブレーション時間の終端で自動的にバイブレーションを止めますので、休止時間を最後のエントリとして与えなくてもよいことは注目に値します。

+ +

実行中のバイブレーションを取り消す

+ +

値 0、空の配列、あるいはすべての値が 0 の配列 を指定して {{domxref("Navigator.vibrate()")}} を呼び出すと、現在進行中のバイブレーションパターンを取り消します。

+ +

継続的なバイブレーション

+ +

基本的な setInterval および clearInterval のアクションにより、継続的なバイブレーションを生成できます:

+ +
var vibrateInterval;
+
+// 渡されたレベルでバイブレーションを開始
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// バイブレーションを停止
+function stopVibrate() {
+    // インターバルをクリアして継続的なバイブレーションを停止
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// 与えられた時間とインターバルによる継続的なバイブレーションを開始
+// 数値が与えられるものとする
+function startPersistentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}
+ +

当然ながら、上記のコードスニペットは配列によるバイブレーションを考慮していません。配列に基づく継続的なバイブレーションでは、配列のアイテムの総数を計算して、その値を基にしてインターバル (おそらく、遅延時間を付加して) を作成することが必要でしょう。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}}リンク先は最新の編集者草稿です。 W3C 版は勧告になりました。
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Navigator.vibrate")}}

+ +

関連情報

+ +
    +
  • {{DOMxRef("Navigator.vibrate()")}}
    • +
diff --git a/files/ja/web/api/vrdevice/cancelanimationframe/index.html b/files/ja/web/api/vrdevice/cancelanimationframe/index.html deleted file mode 100644 index 51d0f31164..0000000000 --- a/files/ja/web/api/vrdevice/cancelanimationframe/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: VRDisplay.cancelAnimationFrame() -slug: Web/API/VRDevice/cancelAnimationFrame -translation_of: Web/API/VRDisplay/cancelAnimationFrame ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの cancelAnimationFrame() メソッドは， {{domxref("Window.cancelAnimationFrame")}} の特別な実装で， {{domxref("VRDisplay.requestAnimationFrame()")}} で登録したコールバックを登録解除します．

- -

シンタックス

- -
vrDisplayInstance.cancelAnimationFrame(handle);
-
- -

パラメータ

- -
-
handle
-
登録解除したいハンドルを与えます．ハンドルは {{domxref("VRDisplay.requestAnimationFrame()")}} を呼出した時に戻り値として取得できます．
-
- -

戻り値

- -

void．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-cancelanimationframe', 'cancelAnimationFrame()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/capabilities/index.html b/files/ja/web/api/vrdevice/capabilities/index.html deleted file mode 100644 index 8aa2d49549..0000000000 --- a/files/ja/web/api/vrdevice/capabilities/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: VRDisplay.capabilities -slug: Web/API/VRDevice/capabilities -tags: - - API - - Experimental - - Property - - Reference - - VR - - VRDisplay - - Virtual Reality - - WebVR - - capabilities -translation_of: Web/API/VRDisplay/capabilities ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの capabilities 読取専用プロパティは，VRDisplay の様々な利用可能な機能を示す {{domxref("VRDisplayCapabilities")}} オブジェクトを返します。

- -

構文

- -
var myCapabilities = vrDisplayInstance.capabilities;
- -

値

- -

{{domxref("VRDisplayCapabilities")}} オブジェクト。

- -

例

- -

{{page("/Web/API/VRDisplayCapabilities", "Examples")}}

- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-capabilities', 'capabilities')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{Compat("api.VRDisplay.capabilities")}}

- -
- -
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/depthfar/index.html b/files/ja/web/api/vrdevice/depthfar/index.html deleted file mode 100644 index dc1c8a44e2..0000000000 --- a/files/ja/web/api/vrdevice/depthfar/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: VRDisplay.depthFar -slug: Web/API/VRDevice/depthFar -translation_of: Web/API/VRDisplay/depthFar ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの depthFar プロパティは，eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のfar平面を定義しているz-depthの取得と設定を行います．

- -

シンタックス

- -
var mydepthFar = vrDisplayInstance.depthFar;
-
-vrDisplayInstance.depthFar = 7500.0;
-
- -

値

- -

z-depth をメートル単位で表すdouble値; 初期値は 10000.0 です．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-depthfar', 'depthFar')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/depthnear/index.html b/files/ja/web/api/vrdevice/depthnear/index.html deleted file mode 100644 index bbb4e9f739..0000000000 --- a/files/ja/web/api/vrdevice/depthnear/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: VRDisplay.depthNear -slug: Web/API/VRDevice/depthNear -translation_of: Web/API/VRDisplay/depthNear ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの depthNear プロパティは， eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のnear平面を定義しているz-depthの取得と設定を行います．

- -

シンタックス

- -
var mydepthNear = vrDisplayInstance.depthNear;
-
-vrDisplayInstance.depthNear = 1.0;
-
- -

値

- -

z-depth をメートル単位で表すdouble値; 初期値は 0.01 です．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-depthnear', 'depthNear')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/displayid/index.html b/files/ja/web/api/vrdevice/displayid/index.html deleted file mode 100644 index 8b1dd9b244..0000000000 --- a/files/ja/web/api/vrdevice/displayid/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: VRDisplay.displayId -slug: Web/API/VRDevice/displayId -tags: - - API - - Experimental - - Property - - Reference - - VR - - VRDisplay - - Virtual Reality - - WebVR - - displayId -translation_of: Web/API/VRDisplay/displayId ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの displayId 読み取り専用プロパティは、この特定の VRDisplay の識別子を返します。これは、 Gamepad API の関連付けポイントとしても使用されます( {{domxref("Gamepad.displayId")}} を参照)。

- -

構文

- -
var myDisplayID = vrDisplayInstance.displayId;
- -

値

- -

特定の VRDisplay のIDを表す番号。

- -

例

- -

{{page("/Web/API/VRDisplayCapabilities", "Examples")}}

- -

仕様

- - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrdisplay-displayid', 'displayId')}}{{Spec2('WebVR 1.1')}}初回定義
- -

ブラウザー実装状況

- -

{{Compat("api.VRDisplay.displayId")}}

- -

関連項目

- - diff --git a/files/ja/web/api/vrdevice/geteyeparameters/index.html b/files/ja/web/api/vrdevice/geteyeparameters/index.html deleted file mode 100644 index 1f7240d523..0000000000 --- a/files/ja/web/api/vrdevice/geteyeparameters/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: VRDisplay.getEyeParameters() -slug: Web/API/VRDevice/getEyeParameters -translation_of: Web/API/VRDisplay/getEyeParameters ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの getEyeParameters() メソッドは，指定下側の眼のeyeパラメータを持っている {{domxref("VREyeParameters")}} オブジェクトを返します．

- -

シンタックス

- -
var myEyeParameters = vrDisplayInstance.getEyeParameters(whichEye);
-
- -

パラメータ

- -
-
whichEye
-
取得したい側のeyeパラメータの眼を表す {{domxref("DOMString")}} です．指定できる値は (VREye enum で定義されている) left と right です．
-
- -

戻り値

- -

 {{domxref("VREyeParameters")}} オブジェクトか，VRコンテンツを表示できない場合(例えば {{domxref("VRDisplayCapabilities.canPresent")}} が false を返す場合)は null です．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-geteyeparameters', 'getEyeParameters()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/getimmediatepose/index.html b/files/ja/web/api/vrdevice/getimmediatepose/index.html deleted file mode 100644 index c0a11c9363..0000000000 --- a/files/ja/web/api/vrdevice/getimmediatepose/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: VRDisplay.getImmediatePose() -slug: Web/API/VRDevice/getImmediatePose -translation_of: Web/API/VRDisplay/getImmediatePose ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの getImmediatePose() メソッドは，予測が適用されていない状態の VRDisplay の現在のポーズを決める  {{domxref("VRPose")}} オブジェクトを返します．

- -

シンタックス

- -
var myImmediatePose = vrDisplayInstance.getImmediatePose();
-
- -

パラメータ

- -

なし．

- -

戻り値

- -

{{domxref("VRPose")}} オブジェクト．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getimmediatepose', 'getImmediatePose()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/getlayers/index.html b/files/ja/web/api/vrdevice/getlayers/index.html deleted file mode 100644 index 01062a2e52..0000000000 --- a/files/ja/web/api/vrdevice/getlayers/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: VRDisplay.getLayers() -slug: Web/API/VRDevice/getLayers -translation_of: Web/API/VRDisplay/getLayers ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの getLayers() メソッドは，VRDisplay で現在表示されているレイヤを返します．

- -

シンタックス

- -
var myLayers = vrDisplayInstance.getLayers();
-
- -

パラメータ

- -

なし．

- -

戻り値

- -

{{domxref("VRLayer")}} オブジェクトの配列．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getlayers', 'getLayers()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{Compat("api.VRDisplay.getLayers")}}

- -

参照

- - diff --git a/files/ja/web/api/vrdevice/getpose/index.html b/files/ja/web/api/vrdevice/getpose/index.html deleted file mode 100644 index d0457edd10..0000000000 --- a/files/ja/web/api/vrdevice/getpose/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: VRDisplay.getPose() -slug: Web/API/VRDevice/getPose -translation_of: Web/API/VRDisplay/getPose ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの getPose() メソッドは，現在のフレームが実際に描画される時点の未来の VRDisplay の予測ポーズを決める {{domxref("VRPose")}} オブジェクトを返します．

- -

シンタックス

- -
var myPose = vrDisplayInstance.getPose();
-
- -

パラメータ

- -

なし．

- -

戻り値

- -

{{domxref("VRPose")}} オブジェクト．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getpose', 'getPose()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/index.html b/files/ja/web/api/vrdevice/index.html deleted file mode 100644 index 7bf154bccf..0000000000 --- a/files/ja/web/api/vrdevice/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: VRDisplay -slug: Web/API/VRDevice -tags: - - API - - DOM - - Experimental - - Interface - - Media - - Reference - - VR - - VRDisplay - - Virtual Reality - - WebVR -translation_of: Web/API/VRDisplay ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

WebVR API の VRDisplay インターフェイスは，このAPIがサポートしているVRデバイスを現します．VRDisplayにはデバイスIDやデスクリプションのような汎用的な情報が含まれていて，VRシーンの表示を開始するためのメソッドや，目のパラメータやディスプレイの備える機能の取得，その他の重要な機能を含んでいます。

- -

{{domxref("Navigator.getVRDisplays()")}} を呼び出すことで，すべての接続されているVRのデバイスの配列が返されます。

- -

プロパティ

- -
-
{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}
-
VRDisplayの備える機能を示す {{domxref("VRDisplayCapabilities")}} オブジェクトを返します．
-
{{domxref("VRDisplay.depthFar")}}
-
eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のfar平面を定義しているz-depthの取得と設定を行います．
-
{{domxref("VRDisplay.depthNear")}}
-
eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のnear平面を定義しているz-depthの取得と設定を行います．
-
{{domxref("VRDisplay.displayId")}} {{readonlyInline}}
-
このVRDisplay固有のIDを返します．このIDはGamepad API (参照 {{domxref("Gamepad.displayId")}}) の関連付けのために使用されます．
-
{{domxref("VRDisplay.displayName")}} {{readonlyInline}}
-
VRDisplayを識別するための人間が読める形式の名前を返します．
-
{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}
-
VRDisplayがコンピュータに接続されているか否かを示す {{domxref("Boolean")}} を返します．
-
{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}
-
VRDisplayが現在コンテンツを表示中であるか否かを示す {{domxref("Boolean")}} を返します．
-
{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}
-
VRDisplayがルームスケール体験をサポートしている場合に，ルームスケールパラメータを含んだ {{domxref("VRStageParameters")}} オブジェクトを返します．
-
- -

メソッド

- -
-
{{domxref("VRDisplay.getEyeParameters()")}}
-
指定した側の眼のパラメータを含む {{domxref("VREyeParameters")}} オブジェクトを返します．
-
{{domxref("VRDisplay.getLayers()")}}
-
VRDisplay に表示中のレイヤーを返します．
-
{{domxref("VRDisplay.getPose()")}}
-
現在のフレームが実際に描画される時点の未来の VRDisplay の予測ポーズを決める {{domxref("VRPose")}} オブジェクトを返します．
-
{{domxref("VRDisplay.getImmediatePose()")}}
-
（予測なしの）VRDisplay のポーズを決める {{domxref("VRPose")}} オブジェクトを返します．
-
{{domxref("VRDisplay.resetPose()")}}
-
現在の {{domxref("VRPose.position")}} と {{domxref("VRPose.orientation")}} を"原点/ゼロ"位置の値として扱うように，VRDisplay のポーズをリセットします．
-
{{domxref("VRDisplay.cancelAnimationFrame()")}}
-
{{domxref("Window.cancelAnimationFrame")}} の特別な実装で，{{domxref("VRDisplay.requestAnimationFrame()")}} を未登録状態にすることをコールバック可能にしています．
-
{{domxref("VRDisplay.requestAnimationFrame()")}}
-
{{domxref("Window.requestAnimationFrame")}} の特別な実装で，VRDisplayの新しいフレームが描画される際に毎回呼出されるコールバック関数を持っています．
-
{{domxref("VRDisplay.requestPresent()")}}
-
VRDisplay へのシーン描画を開始します．
-
{{domxref("VRDisplay.exitPresent()")}}
-
VRDisplay のシーン描画を停止します．
-
{{domxref("VRDisplay.submitFrame()")}}
-
{{domxref("VRLayer")}} の現在の状態をキャプチャし，VRDisplay 上にそれを表示します．
-
-

非推奨のメソッド

-
-
{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}
-
Returns a {{domxref("VRPose")}} object defining the future predicted pose of the VRDisplay as it will be when the current frame is actually presented. This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.
-
-

廃止されたメソッド

-
-
{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}
-
Returns a {{domxref("VRPose")}} object defining the current pose of the VRDisplay, with no prediction applied. This is no longer needed, and has been removed from the spec.
-
{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}
-
Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.
-
- -

例

- -
if(navigator.getVRDisplays) {
-  console.log('WebVR 1.1 supported');
-  // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
-    // If a display is available, use it to present the scene
-    if(displays.length > 0) {
-      vrDisplay = displays[0];
-      // Now we have our VRDisplay object and can do what we want with it
-    }
-  });
-}
- -
-

Note: この完全なコードは raw-webgl-example で確認できます。

-
- -

仕様

- - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName('WebVR', '#interface-vrdisplay', 'VRDisplay')}}{{Spec2('WebVR')}}初回定義
- -

ブラウザー実装状況

- -

{{Compat("api.VRDisplay")}}

- - - -
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/isconnected/index.html b/files/ja/web/api/vrdevice/isconnected/index.html deleted file mode 100644 index c8739dc720..0000000000 --- a/files/ja/web/api/vrdevice/isconnected/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: VRdisplay.isConnected -slug: Web/API/VRDevice/isConnected -translation_of: Web/API/VRDisplay/isConnected ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの isConnected 読取専用プロパティは， VRDisplay がコンピュータに接続されているかどうかを示す {{domxref("Boolean")}} を返します．

- -

シンタックス

- -
var isItConnected = vrDisplayInstance.isConnected;
-
- -

値

- -

{{domxref("Boolean")}}; true の場合はディスプレイが接続されていることを意味します;  それ以外は false.

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-isconnected', 'isConnected')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/ispresenting/index.html b/files/ja/web/api/vrdevice/ispresenting/index.html deleted file mode 100644 index 4fe6132069..0000000000 --- a/files/ja/web/api/vrdevice/ispresenting/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: VRDisplay.isPresenting -slug: Web/API/VRDevice/isPresenting -translation_of: Web/API/VRDisplay/isPresenting ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの isPresenting 読取専用プロパティは， VRDisplay が現在コンテンツを表示中かどうかを示します．

- -

シンタックス

- -
var isItPresenting = vrDisplayInstance.isPresenting;
-
- -

値

- -

{{domxref("Boolean")}}; true の場合はそのディスプレイが表示中であることを意味します;  false は表示されていないことを意味します．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-ispresenting', 'isPresenting')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/requestanimationframe/index.html b/files/ja/web/api/vrdevice/requestanimationframe/index.html deleted file mode 100644 index 0865966016..0000000000 --- a/files/ja/web/api/vrdevice/requestanimationframe/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: VRDisplay.requestAnimationFrame() -slug: Web/API/VRDevice/requestAnimationFrame -translation_of: Web/API/VRDisplay/requestAnimationFrame ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの requestAnimationFrame() メソッドは，{{domxref("Window.requestAnimationFrame")}} の特別な実装です．このメソッドは VRDisplay がレンダリングされている間，新しいフレーム毎に呼出されるコールバック関数を持ちます:

- -
    -
  • VRDisplay がシーンを表示していないときは， {{domxref("Window.requestAnimationFrame")}} と等価な働きをします．
    • -
  • VRDisplay が表示されている場合は，VRDisplay のネイティブなリフレッシュレートでコールバックが呼び出されます．
    • -
- -

シンタックス

- -
var handle = vrDisplayInstance.requestAnimationFrame(callback);
-
- -

パラメータ

- -
-
callback
-
描画されている VRDisplay の新しいフレーム描画の度に呼出されるコールバック関数．
-
- -

戻り値

- -

requestAnimationFrame()呼出しのハンドルを表す long値．この値は，コールバックを登録解除するために {{domxref("VRDisplay.cancelAnimationFrame()")}} 呼出しへ渡すのに使えます．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/requestpresent/index.html b/files/ja/web/api/vrdevice/requestpresent/index.html deleted file mode 100644 index 3429a3e6a8..0000000000 --- a/files/ja/web/api/vrdevice/requestpresent/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: VRDisplay.requestPresent() -slug: Web/API/VRDevice/requestPresent -tags: - - API - - Experimental -translation_of: Web/API/VRDisplay/requestPresent ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの requestPresent() メソッドは，VRDisplay へのシーン表示を開始します．

- -

シンタックス

- -
vrDisplayInstance.requestPresent(layers).then(function() {
-  // Do something after the presentation has begun
-});
-
- -

パラメータ

- -
-
layers
-
表示したいシーンを表す {{domxref("VRLayer")}} オブジェクトの配列．なお現時点では，指定できるのは最小0要素，最大1要素です．
-
- -

戻り値

- -

表示が開始されたかを解決するpromise．

- -
-

注記: {{domxref("VRDisplayCapabilities.canPresent")}} が false，あるいは VRLayer 配列数が {{domxref("VRDisplayCapabilities.maxLayers")}} レイヤより多い場合, promiseはリジェクトされます．

-
- -
-

注記:   requestPresent() を呼出した時にVRDisplay が表示中の場合，VRDisplay は表示する VRLayer 配列を更新します．VRDisplayが表示中で requestPresent() がリジェクトされたら，VRDisplay は表示を終了します．

-
- -

例

- -
if(navigator.getVRDisplays) {
-  console.log('WebVR 1.1 supported');
-  // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
-    // If a display is available, use it to present the scene
-    if(displays.length > 0) {
-      vrDisplay = displays[0];
-      console.log('Display found');
-      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
-        if(btn.textContent === 'Start VR display') {
-          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
-            console.log('Presenting to WebVR display');
-
-            // Set the canvas size to the size of the vrDisplay viewport
-
-            var leftEye = vrDisplay.getEyeParameters('left');
-            var rightEye = vrDisplay.getEyeParameters('right');
-
-            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
-            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
-
-            // stop the normal presentation, and start the vr presentation
-            window.cancelAnimationFrame(normalSceneFrame);
-            drawVRScene();
-
-            btn.textContent = 'Exit VR display';
-          });
-        } else {
-          vrDisplay.exitPresent();
-          console.log('Stopped presenting to WebVR display');
-
-          btn.textContent = 'Start VR display';
-
-          // Stop the VR presentation, and start the normal presentation
-          vrDisplay.cancelAnimationFrame(vrSceneFrame);
-          drawScene();
-        }
-      });
-    }
-  });
-}
- -
-

Note: You can see this complete code at raw-webgl-example.

-
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/resetpose/index.html b/files/ja/web/api/vrdevice/resetpose/index.html deleted file mode 100644 index ae067cf0db..0000000000 --- a/files/ja/web/api/vrdevice/resetpose/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: VRDevice.resetPose() -slug: Web/API/VRDevice/resetPose -translation_of: Web/API/VRDisplay/resetPose ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの resetPose() メソッドは，VRDisplay のポーズをリセットして，現在の {{domxref("VRPose.position")}} と {{domxref("VRPose.orientation")}} を "原点/ゼロ位置" の値として扱います．

- -

resetPost() を呼出した後は， {{domxref("VRDisplay.getPose()")}}/{{domxref("VRDisplay.getImmediatePose()")}}  から返された未来予測ポーズは，resetPose() が最後に呼び出された時点からの相対的な VRDisplay の位置になります．また，resetPose() が最後に呼び出された時点のVRディスプレイのヨー(yaw)を前方として扱います．

- -

重力の方向に対して決まるので，resetPose() が呼び出されたとしてもVRDisplayのレポートするロール(roll)とピッチ(pitch)は変更されません．resetPose() の呼出しによって {{domxref("VRStageParameters.sittingToStandingTransform")}} 行列が変化する場合があります．

- -

シンタックス

- -
vrDisplayInstance.resetPose();
-
- -

パラメータ

- -

なし．

- -

戻り値

- -

void．

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-resetpose', 'resetPose()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdevice/stageparameters/index.html b/files/ja/web/api/vrdevice/stageparameters/index.html deleted file mode 100644 index dcd10d86b6..0000000000 --- a/files/ja/web/api/vrdevice/stageparameters/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: VRDisplay.stageParameters -slug: Web/API/VRDevice/stageParameters -translation_of: Web/API/VRDisplay/stageParameters ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの stageParameters 読取専用プロパティは， VRDisplay がルームスケール体験をサポートしている場合に，ルームスケールパラメータを持つ {{domxref("VRStageParameters")}} オブジェクトを返します． 

- -

シンタックス

- -
var myStageParameters = vrDisplayInstance.stageParameters;
-
- -

値

- -

VRDisplay のルームスケールパラメータを持つ {{domxref("VRStageParameters")}} オブジェクトです．ルームスケール体験をサポートしていないVRDisplayでは null です．

- -

例

- -

{{page("/Web/API/VRStageParameters", "Examples")}}

- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-stageparameters', 'stageParameters')}}{{Spec2('WebVR 1.1')}}Initial definition
- -

ブラウザの互換性

- -

{{Compat("api.VRDisplay.stageParameters")}}

- -

参照

- - diff --git a/files/ja/web/api/vrdevice/submitframe/index.html b/files/ja/web/api/vrdevice/submitframe/index.html deleted file mode 100644 index 28eea26910..0000000000 --- a/files/ja/web/api/vrdevice/submitframe/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: VRDisplay.submitFrame() -slug: Web/API/VRDevice/submitFrame -translation_of: Web/API/VRDisplay/submitFrame ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRDisplay")}} インターフェイスの submitFrame() メソッドは，VRDisplay 内に現在表示中の {{domxref("VRLayer")}} の現在の状態をキャプチャします．

- -

オプションとして，{{domxref("VRLayer")}} をレンダリングするのに使うポーズの表す {{domxref("VRPose")}} を提供することもできます．この{{domxref("VRLayer")}} は，ブラウザが遅延を低減するためにレイヤコンテンツの操作に使われます． VRPose を与えない場合は， {{domxref("VRDisplay.getPose()")}} で最後に返されたポーズが代わりに使われます．

- -

シンタックス

- -
vrDisplayInstance.submitFrame(pose);
-
- -

引数

- -
-
pose {{optional_inline()}}
-
A {{domxref("VRPose")}} オブジェクト．これはレイヤ操作や遅延の低減のためにブラウザによって使用されます．
-
- -

戻り値

- -

Void.

- -

例

- -
TBD.
- -

仕様

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-submitframe', 'submitFrame()')}}{{Spec2('WebVR')}}Initial definition
- -

ブラウザの互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

参照

- - diff --git a/files/ja/web/api/vrdisplay/cancelanimationframe/index.html b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html new file mode 100644 index 0000000000..51d0f31164 --- /dev/null +++ b/files/ja/web/api/vrdisplay/cancelanimationframe/index.html @@ -0,0 +1,104 @@ +--- +title: VRDisplay.cancelAnimationFrame() +slug: Web/API/VRDevice/cancelAnimationFrame +translation_of: Web/API/VRDisplay/cancelAnimationFrame +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの cancelAnimationFrame() メソッドは， {{domxref("Window.cancelAnimationFrame")}} の特別な実装で， {{domxref("VRDisplay.requestAnimationFrame()")}} で登録したコールバックを登録解除します．

+ +

シンタックス

+ +
vrDisplayInstance.cancelAnimationFrame(handle);
+
+ +

パラメータ

+ +
+
handle
+
登録解除したいハンドルを与えます．ハンドルは {{domxref("VRDisplay.requestAnimationFrame()")}} を呼出した時に戻り値として取得できます．
+
+ +

戻り値

+ +

void．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-cancelanimationframe', 'cancelAnimationFrame()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/capabilities/index.html b/files/ja/web/api/vrdisplay/capabilities/index.html new file mode 100644 index 0000000000..8aa2d49549 --- /dev/null +++ b/files/ja/web/api/vrdisplay/capabilities/index.html @@ -0,0 +1,62 @@ +--- +title: VRDisplay.capabilities +slug: Web/API/VRDevice/capabilities +tags: + - API + - Experimental + - Property + - Reference + - VR + - VRDisplay + - Virtual Reality + - WebVR + - capabilities +translation_of: Web/API/VRDisplay/capabilities +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの capabilities 読取専用プロパティは，VRDisplay の様々な利用可能な機能を示す {{domxref("VRDisplayCapabilities")}} オブジェクトを返します。

+ +

構文

+ +
var myCapabilities = vrDisplayInstance.capabilities;
+ +

値

+ +

{{domxref("VRDisplayCapabilities")}} オブジェクト。

+ +

例

+ +

{{page("/Web/API/VRDisplayCapabilities", "Examples")}}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-capabilities', 'capabilities')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+ +
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/depthfar/index.html b/files/ja/web/api/vrdisplay/depthfar/index.html new file mode 100644 index 0000000000..dc1c8a44e2 --- /dev/null +++ b/files/ja/web/api/vrdisplay/depthfar/index.html @@ -0,0 +1,99 @@ +--- +title: VRDisplay.depthFar +slug: Web/API/VRDevice/depthFar +translation_of: Web/API/VRDisplay/depthFar +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの depthFar プロパティは，eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のfar平面を定義しているz-depthの取得と設定を行います．

+ +

シンタックス

+ +
var mydepthFar = vrDisplayInstance.depthFar;
+
+vrDisplayInstance.depthFar = 7500.0;
+
+ +

値

+ +

z-depth をメートル単位で表すdouble値; 初期値は 10000.0 です．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-depthfar', 'depthFar')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/depthnear/index.html b/files/ja/web/api/vrdisplay/depthnear/index.html new file mode 100644 index 0000000000..bbb4e9f739 --- /dev/null +++ b/files/ja/web/api/vrdisplay/depthnear/index.html @@ -0,0 +1,99 @@ +--- +title: VRDisplay.depthNear +slug: Web/API/VRDevice/depthNear +translation_of: Web/API/VRDisplay/depthNear +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの depthNear プロパティは， eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のnear平面を定義しているz-depthの取得と設定を行います．

+ +

シンタックス

+ +
var mydepthNear = vrDisplayInstance.depthNear;
+
+vrDisplayInstance.depthNear = 1.0;
+
+ +

値

+ +

z-depth をメートル単位で表すdouble値; 初期値は 0.01 です．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-depthnear', 'depthNear')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/displayid/index.html b/files/ja/web/api/vrdisplay/displayid/index.html new file mode 100644 index 0000000000..8b1dd9b244 --- /dev/null +++ b/files/ja/web/api/vrdisplay/displayid/index.html @@ -0,0 +1,58 @@ +--- +title: VRDisplay.displayId +slug: Web/API/VRDevice/displayId +tags: + - API + - Experimental + - Property + - Reference + - VR + - VRDisplay + - Virtual Reality + - WebVR + - displayId +translation_of: Web/API/VRDisplay/displayId +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの displayId 読み取り専用プロパティは、この特定の VRDisplay の識別子を返します。これは、 Gamepad API の関連付けポイントとしても使用されます( {{domxref("Gamepad.displayId")}} を参照)。

+ +

構文

+ +
var myDisplayID = vrDisplayInstance.displayId;
+ +

値

+ +

特定の VRDisplay のIDを表す番号。

+ +

例

+ +

{{page("/Web/API/VRDisplayCapabilities", "Examples")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrdisplay-displayid', 'displayId')}}{{Spec2('WebVR 1.1')}}初回定義
+ +

ブラウザー実装状況

+ +

{{Compat("api.VRDisplay.displayId")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/vrdisplay/geteyeparameters/index.html b/files/ja/web/api/vrdisplay/geteyeparameters/index.html new file mode 100644 index 0000000000..1f7240d523 --- /dev/null +++ b/files/ja/web/api/vrdisplay/geteyeparameters/index.html @@ -0,0 +1,104 @@ +--- +title: VRDisplay.getEyeParameters() +slug: Web/API/VRDevice/getEyeParameters +translation_of: Web/API/VRDisplay/getEyeParameters +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの getEyeParameters() メソッドは，指定下側の眼のeyeパラメータを持っている {{domxref("VREyeParameters")}} オブジェクトを返します．

+ +

シンタックス

+ +
var myEyeParameters = vrDisplayInstance.getEyeParameters(whichEye);
+
+ +

パラメータ

+ +
+
whichEye
+
取得したい側のeyeパラメータの眼を表す {{domxref("DOMString")}} です．指定できる値は (VREye enum で定義されている) left と right です．
+
+ +

戻り値

+ +

 {{domxref("VREyeParameters")}} オブジェクトか，VRコンテンツを表示できない場合(例えば {{domxref("VRDisplayCapabilities.canPresent")}} が false を返す場合)は null です．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-geteyeparameters', 'getEyeParameters()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/getimmediatepose/index.html b/files/ja/web/api/vrdisplay/getimmediatepose/index.html new file mode 100644 index 0000000000..c0a11c9363 --- /dev/null +++ b/files/ja/web/api/vrdisplay/getimmediatepose/index.html @@ -0,0 +1,101 @@ +--- +title: VRDisplay.getImmediatePose() +slug: Web/API/VRDevice/getImmediatePose +translation_of: Web/API/VRDisplay/getImmediatePose +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの getImmediatePose() メソッドは，予測が適用されていない状態の VRDisplay の現在のポーズを決める  {{domxref("VRPose")}} オブジェクトを返します．

+ +

シンタックス

+ +
var myImmediatePose = vrDisplayInstance.getImmediatePose();
+
+ +

パラメータ

+ +

なし．

+ +

戻り値

+ +

{{domxref("VRPose")}} オブジェクト．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getimmediatepose', 'getImmediatePose()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/getlayers/index.html b/files/ja/web/api/vrdisplay/getlayers/index.html new file mode 100644 index 0000000000..01062a2e52 --- /dev/null +++ b/files/ja/web/api/vrdisplay/getlayers/index.html @@ -0,0 +1,53 @@ +--- +title: VRDisplay.getLayers() +slug: Web/API/VRDevice/getLayers +translation_of: Web/API/VRDisplay/getLayers +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの getLayers() メソッドは，VRDisplay で現在表示されているレイヤを返します．

+ +

シンタックス

+ +
var myLayers = vrDisplayInstance.getLayers();
+
+ +

パラメータ

+ +

なし．

+ +

戻り値

+ +

{{domxref("VRLayer")}} オブジェクトの配列．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getlayers', 'getLayers()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{Compat("api.VRDisplay.getLayers")}}

+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/getpose/index.html b/files/ja/web/api/vrdisplay/getpose/index.html new file mode 100644 index 0000000000..d0457edd10 --- /dev/null +++ b/files/ja/web/api/vrdisplay/getpose/index.html @@ -0,0 +1,101 @@ +--- +title: VRDisplay.getPose() +slug: Web/API/VRDevice/getPose +translation_of: Web/API/VRDisplay/getPose +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの getPose() メソッドは，現在のフレームが実際に描画される時点の未来の VRDisplay の予測ポーズを決める {{domxref("VRPose")}} オブジェクトを返します．

+ +

シンタックス

+ +
var myPose = vrDisplayInstance.getPose();
+
+ +

パラメータ

+ +

なし．

+ +

戻り値

+ +

{{domxref("VRPose")}} オブジェクト．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-getpose', 'getPose()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/index.html b/files/ja/web/api/vrdisplay/index.html new file mode 100644 index 0000000000..7bf154bccf --- /dev/null +++ b/files/ja/web/api/vrdisplay/index.html @@ -0,0 +1,129 @@ +--- +title: VRDisplay +slug: Web/API/VRDevice +tags: + - API + - DOM + - Experimental + - Interface + - Media + - Reference + - VR + - VRDisplay + - Virtual Reality + - WebVR +translation_of: Web/API/VRDisplay +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

WebVR API の VRDisplay インターフェイスは，このAPIがサポートしているVRデバイスを現します．VRDisplayにはデバイスIDやデスクリプションのような汎用的な情報が含まれていて，VRシーンの表示を開始するためのメソッドや，目のパラメータやディスプレイの備える機能の取得，その他の重要な機能を含んでいます。

+ +

{{domxref("Navigator.getVRDisplays()")}} を呼び出すことで，すべての接続されているVRのデバイスの配列が返されます。

+ +

プロパティ

+ +
+
{{domxref("VRDisplay.capabilities")}} {{readonlyInline}}
+
VRDisplayの備える機能を示す {{domxref("VRDisplayCapabilities")}} オブジェクトを返します．
+
{{domxref("VRDisplay.depthFar")}}
+
eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のfar平面を定義しているz-depthの取得と設定を行います．
+
{{domxref("VRDisplay.depthNear")}}
+
eye view frustum(ビューフラスタム；つまりシーンの可視領域の境界) のnear平面を定義しているz-depthの取得と設定を行います．
+
{{domxref("VRDisplay.displayId")}} {{readonlyInline}}
+
このVRDisplay固有のIDを返します．このIDはGamepad API (参照 {{domxref("Gamepad.displayId")}}) の関連付けのために使用されます．
+
{{domxref("VRDisplay.displayName")}} {{readonlyInline}}
+
VRDisplayを識別するための人間が読める形式の名前を返します．
+
{{domxref("VRDisplay.isConnected")}} {{readonlyInline}}
+
VRDisplayがコンピュータに接続されているか否かを示す {{domxref("Boolean")}} を返します．
+
{{domxref("VRDisplay.isPresenting")}} {{readonlyInline}}
+
VRDisplayが現在コンテンツを表示中であるか否かを示す {{domxref("Boolean")}} を返します．
+
{{domxref("VRDisplay.stageParameters")}} {{readonlyInline}}
+
VRDisplayがルームスケール体験をサポートしている場合に，ルームスケールパラメータを含んだ {{domxref("VRStageParameters")}} オブジェクトを返します．
+
+ +

メソッド

+ +
+
{{domxref("VRDisplay.getEyeParameters()")}}
+
指定した側の眼のパラメータを含む {{domxref("VREyeParameters")}} オブジェクトを返します．
+
{{domxref("VRDisplay.getLayers()")}}
+
VRDisplay に表示中のレイヤーを返します．
+
{{domxref("VRDisplay.getPose()")}}
+
現在のフレームが実際に描画される時点の未来の VRDisplay の予測ポーズを決める {{domxref("VRPose")}} オブジェクトを返します．
+
{{domxref("VRDisplay.getImmediatePose()")}}
+
（予測なしの）VRDisplay のポーズを決める {{domxref("VRPose")}} オブジェクトを返します．
+
{{domxref("VRDisplay.resetPose()")}}
+
現在の {{domxref("VRPose.position")}} と {{domxref("VRPose.orientation")}} を"原点/ゼロ"位置の値として扱うように，VRDisplay のポーズをリセットします．
+
{{domxref("VRDisplay.cancelAnimationFrame()")}}
+
{{domxref("Window.cancelAnimationFrame")}} の特別な実装で，{{domxref("VRDisplay.requestAnimationFrame()")}} を未登録状態にすることをコールバック可能にしています．
+
{{domxref("VRDisplay.requestAnimationFrame()")}}
+
{{domxref("Window.requestAnimationFrame")}} の特別な実装で，VRDisplayの新しいフレームが描画される際に毎回呼出されるコールバック関数を持っています．
+
{{domxref("VRDisplay.requestPresent()")}}
+
VRDisplay へのシーン描画を開始します．
+
{{domxref("VRDisplay.exitPresent()")}}
+
VRDisplay のシーン描画を停止します．
+
{{domxref("VRDisplay.submitFrame()")}}
+
{{domxref("VRLayer")}} の現在の状態をキャプチャし，VRDisplay 上にそれを表示します．
+
+

非推奨のメソッド

+
+
{{domxref("VRDisplay.getPose()")}} {{deprecated_inline}}
+
Returns a {{domxref("VRPose")}} object defining the future predicted pose of the VRDisplay as it will be when the current frame is actually presented. This method is deprecated — instead, you should use {{domxref("VRDisplay.getFrameData()")}}, which also provides a {{domxref("VRPose")}} object.
+
+

廃止されたメソッド

+
+
{{domxref("VRDisplay.getImmediatePose()")}} {{obsolete_inline}}
+
Returns a {{domxref("VRPose")}} object defining the current pose of the VRDisplay, with no prediction applied. This is no longer needed, and has been removed from the spec.
+
{{domxref("VRDisplay.hardwareUnitId")}} {{obsolete_inline}}
+
Returns a {{domxref("DOMString")}} defining the shared ID of the display, and any other devices that are part of that hardware set (e.g. controllers). This is no longer needed, and has been removed from the spec. Displays now use {{domxref("VRDisplay.displayId")}}, and corresponsing controllers will now return the same ID under {{domxref("Gamepad.displayId")}}.
+
+ +

例

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      // Now we have our VRDisplay object and can do what we want with it
+    }
+  });
+}
+ +
+

Note: この完全なコードは raw-webgl-example で確認できます。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('WebVR', '#interface-vrdisplay', 'VRDisplay')}}{{Spec2('WebVR')}}初回定義
+ +

ブラウザー実装状況

+ +

{{Compat("api.VRDisplay")}}

+ + + +
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/isconnected/index.html b/files/ja/web/api/vrdisplay/isconnected/index.html new file mode 100644 index 0000000000..c8739dc720 --- /dev/null +++ b/files/ja/web/api/vrdisplay/isconnected/index.html @@ -0,0 +1,97 @@ +--- +title: VRdisplay.isConnected +slug: Web/API/VRDevice/isConnected +translation_of: Web/API/VRDisplay/isConnected +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの isConnected 読取専用プロパティは， VRDisplay がコンピュータに接続されているかどうかを示す {{domxref("Boolean")}} を返します．

+ +

シンタックス

+ +
var isItConnected = vrDisplayInstance.isConnected;
+
+ +

値

+ +

{{domxref("Boolean")}}; true の場合はディスプレイが接続されていることを意味します;  それ以外は false.

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-isconnected', 'isConnected')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/ispresenting/index.html b/files/ja/web/api/vrdisplay/ispresenting/index.html new file mode 100644 index 0000000000..4fe6132069 --- /dev/null +++ b/files/ja/web/api/vrdisplay/ispresenting/index.html @@ -0,0 +1,97 @@ +--- +title: VRDisplay.isPresenting +slug: Web/API/VRDevice/isPresenting +translation_of: Web/API/VRDisplay/isPresenting +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの isPresenting 読取専用プロパティは， VRDisplay が現在コンテンツを表示中かどうかを示します．

+ +

シンタックス

+ +
var isItPresenting = vrDisplayInstance.isPresenting;
+
+ +

値

+ +

{{domxref("Boolean")}}; true の場合はそのディスプレイが表示中であることを意味します;  false は表示されていないことを意味します．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-ispresenting', 'isPresenting')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/requestanimationframe/index.html b/files/ja/web/api/vrdisplay/requestanimationframe/index.html new file mode 100644 index 0000000000..0865966016 --- /dev/null +++ b/files/ja/web/api/vrdisplay/requestanimationframe/index.html @@ -0,0 +1,109 @@ +--- +title: VRDisplay.requestAnimationFrame() +slug: Web/API/VRDevice/requestAnimationFrame +translation_of: Web/API/VRDisplay/requestAnimationFrame +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの requestAnimationFrame() メソッドは，{{domxref("Window.requestAnimationFrame")}} の特別な実装です．このメソッドは VRDisplay がレンダリングされている間，新しいフレーム毎に呼出されるコールバック関数を持ちます:

+ +
    +
  • VRDisplay がシーンを表示していないときは， {{domxref("Window.requestAnimationFrame")}} と等価な働きをします．
    • +
  • VRDisplay が表示されている場合は，VRDisplay のネイティブなリフレッシュレートでコールバックが呼び出されます．
    • +
+ +

シンタックス

+ +
var handle = vrDisplayInstance.requestAnimationFrame(callback);
+
+ +

パラメータ

+ +
+
callback
+
描画されている VRDisplay の新しいフレーム描画の度に呼出されるコールバック関数．
+
+ +

戻り値

+ +

requestAnimationFrame()呼出しのハンドルを表す long値．この値は，コールバックを登録解除するために {{domxref("VRDisplay.cancelAnimationFrame()")}} 呼出しへ渡すのに使えます．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-requestanimationframe', 'requestAnimationFrame()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/requestpresent/index.html b/files/ja/web/api/vrdisplay/requestpresent/index.html new file mode 100644 index 0000000000..3429a3e6a8 --- /dev/null +++ b/files/ja/web/api/vrdisplay/requestpresent/index.html @@ -0,0 +1,162 @@ +--- +title: VRDisplay.requestPresent() +slug: Web/API/VRDevice/requestPresent +tags: + - API + - Experimental +translation_of: Web/API/VRDisplay/requestPresent +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの requestPresent() メソッドは，VRDisplay へのシーン表示を開始します．

+ +

シンタックス

+ +
vrDisplayInstance.requestPresent(layers).then(function() {
+  // Do something after the presentation has begun
+});
+
+ +

パラメータ

+ +
+
layers
+
表示したいシーンを表す {{domxref("VRLayer")}} オブジェクトの配列．なお現時点では，指定できるのは最小0要素，最大1要素です．
+
+ +

戻り値

+ +

表示が開始されたかを解決するpromise．

+ +
+

注記: {{domxref("VRDisplayCapabilities.canPresent")}} が false，あるいは VRLayer 配列数が {{domxref("VRDisplayCapabilities.maxLayers")}} レイヤより多い場合, promiseはリジェクトされます．

+
+ +
+

注記:   requestPresent() を呼出した時にVRDisplay が表示中の場合，VRDisplay は表示する VRLayer 配列を更新します．VRDisplayが表示中で requestPresent() がリジェクトされたら，VRDisplay は表示を終了します．

+
+ +

例

+ +
if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      console.log('Display found');
+      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+      btn.addEventListener('click', function() {
+        if(btn.textContent === 'Start VR display') {
+          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+            console.log('Presenting to WebVR display');
+
+            // Set the canvas size to the size of the vrDisplay viewport
+
+            var leftEye = vrDisplay.getEyeParameters('left');
+            var rightEye = vrDisplay.getEyeParameters('right');
+
+            canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
+            canvas.height = Math.max(leftEye.renderHeight, rightEye.renderHeight);
+
+            // stop the normal presentation, and start the vr presentation
+            window.cancelAnimationFrame(normalSceneFrame);
+            drawVRScene();
+
+            btn.textContent = 'Exit VR display';
+          });
+        } else {
+          vrDisplay.exitPresent();
+          console.log('Stopped presenting to WebVR display');
+
+          btn.textContent = 'Start VR display';
+
+          // Stop the VR presentation, and start the normal presentation
+          vrDisplay.cancelAnimationFrame(vrSceneFrame);
+          drawScene();
+        }
+      });
+    }
+  });
+}
+ +
+

Note: You can see this complete code at raw-webgl-example.

+
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-requestpresent', 'requestPresent()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/resetpose/index.html b/files/ja/web/api/vrdisplay/resetpose/index.html new file mode 100644 index 0000000000..ae067cf0db --- /dev/null +++ b/files/ja/web/api/vrdisplay/resetpose/index.html @@ -0,0 +1,105 @@ +--- +title: VRDevice.resetPose() +slug: Web/API/VRDevice/resetPose +translation_of: Web/API/VRDisplay/resetPose +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの resetPose() メソッドは，VRDisplay のポーズをリセットして，現在の {{domxref("VRPose.position")}} と {{domxref("VRPose.orientation")}} を "原点/ゼロ位置" の値として扱います．

+ +

resetPost() を呼出した後は， {{domxref("VRDisplay.getPose()")}}/{{domxref("VRDisplay.getImmediatePose()")}}  から返された未来予測ポーズは，resetPose() が最後に呼び出された時点からの相対的な VRDisplay の位置になります．また，resetPose() が最後に呼び出された時点のVRディスプレイのヨー(yaw)を前方として扱います．

+ +

重力の方向に対して決まるので，resetPose() が呼び出されたとしてもVRDisplayのレポートするロール(roll)とピッチ(pitch)は変更されません．resetPose() の呼出しによって {{domxref("VRStageParameters.sittingToStandingTransform")}} 行列が変化する場合があります．

+ +

シンタックス

+ +
vrDisplayInstance.resetPose();
+
+ +

パラメータ

+ +

なし．

+ +

戻り値

+ +

void．

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-resetpose', 'resetPose()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/stageparameters/index.html b/files/ja/web/api/vrdisplay/stageparameters/index.html new file mode 100644 index 0000000000..dcd10d86b6 --- /dev/null +++ b/files/ja/web/api/vrdisplay/stageparameters/index.html @@ -0,0 +1,49 @@ +--- +title: VRDisplay.stageParameters +slug: Web/API/VRDevice/stageParameters +translation_of: Web/API/VRDisplay/stageParameters +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの stageParameters 読取専用プロパティは， VRDisplay がルームスケール体験をサポートしている場合に，ルームスケールパラメータを持つ {{domxref("VRStageParameters")}} オブジェクトを返します． 

+ +

シンタックス

+ +
var myStageParameters = vrDisplayInstance.stageParameters;
+
+ +

値

+ +

VRDisplay のルームスケールパラメータを持つ {{domxref("VRStageParameters")}} オブジェクトです．ルームスケール体験をサポートしていないVRDisplayでは null です．

+ +

例

+ +

{{page("/Web/API/VRStageParameters", "Examples")}}

+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR 1.1', '#dom-vrdisplay-stageparameters', 'stageParameters')}}{{Spec2('WebVR 1.1')}}Initial definition
+ +

ブラウザの互換性

+ +

{{Compat("api.VRDisplay.stageParameters")}}

+ +

参照

+ + diff --git a/files/ja/web/api/vrdisplay/submitframe/index.html b/files/ja/web/api/vrdisplay/submitframe/index.html new file mode 100644 index 0000000000..28eea26910 --- /dev/null +++ b/files/ja/web/api/vrdisplay/submitframe/index.html @@ -0,0 +1,106 @@ +--- +title: VRDisplay.submitFrame() +slug: Web/API/VRDevice/submitFrame +translation_of: Web/API/VRDisplay/submitFrame +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRDisplay")}} インターフェイスの submitFrame() メソッドは，VRDisplay 内に現在表示中の {{domxref("VRLayer")}} の現在の状態をキャプチャします．

+ +

オプションとして，{{domxref("VRLayer")}} をレンダリングするのに使うポーズの表す {{domxref("VRPose")}} を提供することもできます．この{{domxref("VRLayer")}} は，ブラウザが遅延を低減するためにレイヤコンテンツの操作に使われます． VRPose を与えない場合は， {{domxref("VRDisplay.getPose()")}} で最後に返されたポーズが代わりに使われます．

+ +

シンタックス

+ +
vrDisplayInstance.submitFrame(pose);
+
+ +

引数

+ +
+
pose {{optional_inline()}}
+
A {{domxref("VRPose")}} オブジェクト．これはレイヤ操作や遅延の低減のためにブラウザによって使用されます．
+
+ +

戻り値

+ +

Void.

+ +

例

+ +
TBD.
+ +

仕様

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebVR', '#dom-vrdisplay-submitframe', 'submitFrame()')}}{{Spec2('WebVR')}}Initial definition
+ +

ブラウザの互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

参照

+ + diff --git a/files/ja/web/api/vrlayer/index.html b/files/ja/web/api/vrlayer/index.html deleted file mode 100644 index b0edd0d577..0000000000 --- a/files/ja/web/api/vrlayer/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: VRLayer -slug: Web/API/VRLayer -translation_of: Web/API/VRLayerInit ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

WebVR API の VRLayer インターフェイス (ディクショナリ)は，VRHMDへ表示したいコンテンツレイヤー( {{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}})を表します。

- -

{{domxref("VRDisplay.requestPresent()")}} メソッドを使うことでレイヤーを表示することができます。

- -

プロパティ

- -
-
{{domxref("VRLayer.leftBounds")}}
-
{{domxref("VRDisplay")}} に表示されるキャンバスの左側テクスチャ境界を定義します。
-
{{domxref("VRLayer.rightBounds")}}
-
{{domxref("VRDisplay")}} に表示されるキャンバスの右側テクスチャ境界を定義します。
-
{{domxref("VRLayer.source")}}
-
{{domxref("VRDisplay")}} に表示されるコンテンツの対象となるキャンバスを定義します。
-
- -

例

- -
// currently returns an empty array
-var layers = vrDisplay.getLayers();
-
-if(navigator.getVRDisplays) {
-  console.log('WebVR 1.1 supported');
-  // Then get the displays attached to the computer
-  navigator.getVRDisplays().then(function(displays) {
-    // If a display is available, use it to present the scene
-    if(displays.length > 0) {
-      vrDisplay = displays[0];
-      console.log('Display found');
-      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
-      btn.addEventListener('click', function() {
-        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
-          console.log('Presenting to WebVR display');
-
-          // Here it returns an array of VRLayerInit objects
-          var layers = vrDisplay.getLayers();
-
-          ...
-        });
-      });
-    }
-  });
-}
- -

{{domxref("VRLayerInit")}} objects look something like this:

- -
{
-  leftBounds : [ ... ],
-  rightBounds: [ ... ],
-  source: canvasReference
-}
- -
-

Note: The canvasReference refers to the {{htmlelement("canvas")}} element itself, not the WebGL context associated with the canvas. The other two members are arrays

-
- -

仕様

- - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName('WebVR', '#interface-vrlayer', 'VRLayer')}}{{Spec2('WebVR')}}初回定義
- -

ブラウザの互換性

- -

{{Compat("api.VRLayerInit")}}

- -
- -

参照

- - diff --git a/files/ja/web/api/vrlayer/rightbounds/index.html b/files/ja/web/api/vrlayer/rightbounds/index.html deleted file mode 100644 index 944013d6d7..0000000000 --- a/files/ja/web/api/vrlayer/rightbounds/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: VRLayerInit.rightBounds -slug: Web/API/VRLayer/rightBounds -tags: - - API - - Experimental - - Property - - Refe - - VR - - VRLayerInit - - Virtual Reality - - WebVR - - rightBounds -translation_of: Web/API/VRLayerInit/rightBounds ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRLayerInit")}} インターフェイス (辞書) の rightBounds プロパティは、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスの右のテクスチャ境界を定義します。

- -

構文

- -
var myVRLayerInit = { };
-myVRLayerInit.rightBounds = [0.5, 0.0, 0.5, 1.0];
- -

値

- -

4つの浮動小数点値の配列で 0.0–1.0 の値を取ることができます:

- -
    -
  1. 境界の左オフセット。
    2. -
  2. 境界の上オフセット。
    3. -
  3. 境界の幅。
    4. -
  4. 境界の高さ。
    5. -
- -

辞書で leftBounds が指定されていない場合、使用されるデフォルト値は [0.5, 0.0, 0.5, 1.0] です。

- -

例

- -

{{page("/Web/API/VRLayerInit", "Examples")}}

- -

仕様

- - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrlayerinit-rightbounds', 'rightBounds')}}{{Spec2('WebVR 1.1')}}初回定義
- -

ブラウザー実装状況

- -

{{Compat("api.VRLayerInit.rightBounds")}}

- -

関連項目

- - diff --git a/files/ja/web/api/vrlayer/source/index.html b/files/ja/web/api/vrlayer/source/index.html deleted file mode 100644 index 94ab4eaa39..0000000000 --- a/files/ja/web/api/vrlayer/source/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: VRLayerInit.source -slug: Web/API/VRLayer/source -tags: - - API - - Experimental - - Property - - Reference - - VR - - VRLayerInit - - Virtual Reality - - WebVR - - source -translation_of: Web/API/VRLayerInit/source ---- -
{{APIRef("WebVR API")}}{{SeeCompatTable}}
- -

{{domxref("VRLayerInit")}} インターフェイス（ディクショナリ）の source プロパティは、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスを定義します。

- -

構文

- -
var myVRLayerInit = { };
-myVRLayerInit.source = myCanvas;
- -

値

- -

{{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}} オブジェクト。

- -

例

- -

{{page("/Web/API/VRLayerInit", "Examples")}}

- -

仕様

- - - - - - - - - - - - - - -
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrlayerinit-source', 'source')}}{{Spec2('WebVR 1.1')}}初回定義
- -

ブラウザー実装状況

- -

{{Compat("api.VRLayerInit.source")}}

- -

関連項目

- - diff --git a/files/ja/web/api/vrlayerinit/index.html b/files/ja/web/api/vrlayerinit/index.html new file mode 100644 index 0000000000..b0edd0d577 --- /dev/null +++ b/files/ja/web/api/vrlayerinit/index.html @@ -0,0 +1,91 @@ +--- +title: VRLayer +slug: Web/API/VRLayer +translation_of: Web/API/VRLayerInit +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

WebVR API の VRLayer インターフェイス (ディクショナリ)は，VRHMDへ表示したいコンテンツレイヤー( {{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}})を表します。

+ +

{{domxref("VRDisplay.requestPresent()")}} メソッドを使うことでレイヤーを表示することができます。

+ +

プロパティ

+ +
+
{{domxref("VRLayer.leftBounds")}}
+
{{domxref("VRDisplay")}} に表示されるキャンバスの左側テクスチャ境界を定義します。
+
{{domxref("VRLayer.rightBounds")}}
+
{{domxref("VRDisplay")}} に表示されるキャンバスの右側テクスチャ境界を定義します。
+
{{domxref("VRLayer.source")}}
+
{{domxref("VRDisplay")}} に表示されるコンテンツの対象となるキャンバスを定義します。
+
+ +

例

+ +
// currently returns an empty array
+var layers = vrDisplay.getLayers();
+
+if(navigator.getVRDisplays) {
+  console.log('WebVR 1.1 supported');
+  // Then get the displays attached to the computer
+  navigator.getVRDisplays().then(function(displays) {
+    // If a display is available, use it to present the scene
+    if(displays.length > 0) {
+      vrDisplay = displays[0];
+      console.log('Display found');
+      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
+      btn.addEventListener('click', function() {
+        vrDisplay.requestPresent([{ source: canvas }]).then(function() {
+          console.log('Presenting to WebVR display');
+
+          // Here it returns an array of VRLayerInit objects
+          var layers = vrDisplay.getLayers();
+
+          ...
+        });
+      });
+    }
+  });
+}
+ +

{{domxref("VRLayerInit")}} objects look something like this:

+ +
{
+  leftBounds : [ ... ],
+  rightBounds: [ ... ],
+  source: canvasReference
+}
+ +
+

Note: The canvasReference refers to the {{htmlelement("canvas")}} element itself, not the WebGL context associated with the canvas. The other two members are arrays

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('WebVR', '#interface-vrlayer', 'VRLayer')}}{{Spec2('WebVR')}}初回定義
+ +

ブラウザの互換性

+ +

{{Compat("api.VRLayerInit")}}

+ +
+ +

参照

+ + diff --git a/files/ja/web/api/vrlayerinit/rightbounds/index.html b/files/ja/web/api/vrlayerinit/rightbounds/index.html new file mode 100644 index 0000000000..944013d6d7 --- /dev/null +++ b/files/ja/web/api/vrlayerinit/rightbounds/index.html @@ -0,0 +1,68 @@ +--- +title: VRLayerInit.rightBounds +slug: Web/API/VRLayer/rightBounds +tags: + - API + - Experimental + - Property + - Refe + - VR + - VRLayerInit + - Virtual Reality + - WebVR + - rightBounds +translation_of: Web/API/VRLayerInit/rightBounds +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRLayerInit")}} インターフェイス (辞書) の rightBounds プロパティは、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスの右のテクスチャ境界を定義します。

+ +

構文

+ +
var myVRLayerInit = { };
+myVRLayerInit.rightBounds = [0.5, 0.0, 0.5, 1.0];
+ +

値

+ +

4つの浮動小数点値の配列で 0.0–1.0 の値を取ることができます:

+ +
    +
  1. 境界の左オフセット。
    2. +
  2. 境界の上オフセット。
    3. +
  3. 境界の幅。
    4. +
  4. 境界の高さ。
    5. +
+ +

辞書で leftBounds が指定されていない場合、使用されるデフォルト値は [0.5, 0.0, 0.5, 1.0] です。

+ +

例

+ +

{{page("/Web/API/VRLayerInit", "Examples")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrlayerinit-rightbounds', 'rightBounds')}}{{Spec2('WebVR 1.1')}}初回定義
+ +

ブラウザー実装状況

+ +

{{Compat("api.VRLayerInit.rightBounds")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/vrlayerinit/source/index.html b/files/ja/web/api/vrlayerinit/source/index.html new file mode 100644 index 0000000000..94ab4eaa39 --- /dev/null +++ b/files/ja/web/api/vrlayerinit/source/index.html @@ -0,0 +1,59 @@ +--- +title: VRLayerInit.source +slug: Web/API/VRLayer/source +tags: + - API + - Experimental + - Property + - Reference + - VR + - VRLayerInit + - Virtual Reality + - WebVR + - source +translation_of: Web/API/VRLayerInit/source +--- +
{{APIRef("WebVR API")}}{{SeeCompatTable}}
+ +

{{domxref("VRLayerInit")}} インターフェイス（ディクショナリ）の source プロパティは、 {{domxref("VRDisplay")}} によってコンテンツが表示されるキャンバスを定義します。

+ +

構文

+ +
var myVRLayerInit = { };
+myVRLayerInit.source = myCanvas;
+ +

値

+ +

{{domxref("HTMLCanvasElement")}} または {{domxref("OffscreenCanvas")}} オブジェクト。

+ +

例

+ +

{{page("/Web/API/VRLayerInit", "Examples")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName('WebVR 1.1', '#dom-vrlayerinit-source', 'source')}}{{Spec2('WebVR 1.1')}}初回定義
+ +

ブラウザー実装状況

+ +

{{Compat("api.VRLayerInit.source")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/webgl_api/cross-domain_textures/index.html b/files/ja/web/api/webgl_api/cross-domain_textures/index.html deleted file mode 100644 index 15dcbf30e3..0000000000 --- a/files/ja/web/api/webgl_api/cross-domain_textures/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -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/web/api/websockets_api/websockets_reference/index.html b/files/ja/web/api/websockets_api/websockets_reference/index.html deleted file mode 100644 index d924ac2328..0000000000 --- a/files/ja/web/api/websockets_api/websockets_reference/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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/web/api/window.opener/index.html b/files/ja/web/api/window.opener/index.html deleted file mode 100644 index c1f7152c9c..0000000000 --- a/files/ja/web/api/window.opener/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: window.opener -slug: Web/API/window.opener -tags: - - DOM - - DOM_0 - - Gecko - - Window -translation_of: Web/API/Window/opener ---- -
{{ApiRef}}
- -

概要

- -

現在のウィンドウを開いたウィンドウへの参照を返します。

- -

構文

- -
objRef = window.opener;
-
- -

例

- -
if (window.opener != indexWin) {
-  referToTop(window.opener);
-}
-
- -

注記

- -

別のウィンドウから（{{domxref("Window.open")}} を使用して）開かれたウィンドウは、主ウィンドウへの参照を window.opener として保持します。現在のウィンドウが別のウィンドウから開かれたものではない場合、このメソッドは NULL を返します。

- -

Windows Phone ブラウザは window.opener をサポートしていません（Edge 25.10586.36.0 でテストしました）。opener が異なるセキュリティゾーンにある場合、IE でもサポートされていません。

diff --git a/files/ja/web/api/window.stop/index.html b/files/ja/web/api/window.stop/index.html deleted file mode 100644 index a32bbd359a..0000000000 --- a/files/ja/web/api/window.stop/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: window.stop -slug: Web/API/window.stop -tags: - - API - - DOM - - Gecko - - HTML DOM -translation_of: Web/API/Window/stop ---- -
{{ApiRef}}
- -

概要

- -

このメソッドは、ウィンドウの読み込みを停止します。

- -

構文

- -
window.stop()
-
- -

例

- -
<script>
-stop();
-</script>
-
-<p>このパラグラフは読み込まれないでしょう。</p>​
- -

注記

- -

stop() メソッドは、ブラウザの停止ボタンをクリックすることと全く同じです。スクリプトが読み込まれる順番のために、stop() メソッドは文書の読み込みを停止できない可能性がありますが、巨大な画像、新しいウィンドウなど、読み込みを遅延させるオブジェクトの読み込みを停止することはできるでしょう。

- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}{{Spec2('HTML5 W3C')}}
- -

互換性

- -

stop() メソッドは、Internet Explorer でサポートされません。

diff --git a/files/ja/web/api/window/arguments/index.html b/files/ja/web/api/window/arguments/index.html deleted file mode 100644 index f026024047..0000000000 --- a/files/ja/web/api/window/arguments/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: window.arguments -slug: Web/API/Window/arguments -translation_of: Working_with_windows_in_chrome_code#Passing_data_between_windows -translation_of_original: Web/API/Window.arguments ---- -

『chrome コードでウィンドウを取り扱う』の頁の『ウィンドウ間でのデータのやり取り』の章をご覧下さい。

diff --git a/files/ja/web/api/window/escape/index.html b/files/ja/web/api/window/escape/index.html deleted file mode 100644 index 48ab4cab3b..0000000000 --- a/files/ja/web/api/window/escape/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -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);
-
-
    -
  • escaped は、エンコードされた文字列です。
    • -
  • 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/web/api/window/getattention/index.html b/files/ja/web/api/window/getattention/index.html deleted file mode 100644 index 4376715018..0000000000 --- a/files/ja/web/api/window/getattention/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: window.getAttention -slug: Web/API/Window/getAttention -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/Window/getAttention ---- -
- {{ApiRef}}
-

概要

-

ユーザの注意を引きつける動作をします。これがどのような動作になるかは、OS と ウィンドウマネージャー次第で変化します。

-

構文

-
window.getAttention();
-
-

注記

-

Windows では、ウィンドウのタスクバーのボタンが点滅します（ユーザがこれを無効化していない場合）。

-

Linux では、挙動はウィンドウマネージャーによって変化します。タスクバーボタンが点滅するのもあれば、直ちにウィンドウにフォーカスするものもあります。これは調整可能であるかもしれません。

-

Macintosh では、デスクトップの右上端のアイコンが点滅します。

-

この関数は、Web コンテンツでは、無効化されています。Gecko も Internet Explorer も、現在はこの機能を Web コンテンツに対してはサポートしていません。getAttention は、Gecko アプリケーションでの chrome から利用したときには、いまだに動作します。

-

仕様

-

{{DOM0}}

diff --git a/files/ja/web/api/window/onafterprint/index.html b/files/ja/web/api/window/onafterprint/index.html deleted file mode 100644 index 162c81e8c6..0000000000 --- a/files/ja/web/api/window/onafterprint/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: WindowEventHandlers.onafterprint -slug: Web/API/Window/onafterprint -tags: - - API - - DOM - - Event Handler - - HTML DOM - - Property - - Reference - - WindowEventHandlers - - printing -translation_of: Web/API/WindowEventHandlers/onafterprint ---- -
{{ApiRef}}
- -

{{domxref("WindowEventHandlers")}} ミックスインの onafterprint プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。

- -

{{event("beforeprint")}} イベントと afterprint イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、@media print CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。

- -

構文

- -
window.addEventListener("afterprint", function(event) { ... });
-window.onafterprint = function(event) { ... };
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}{{Spec2('HTML WHATWG')}}
- -

ブラウザーの互換性

- - - -

{{Compat("api.WindowEventHandlers.onafterprint")}}

- -

関連情報

- -
    -
  • {{domxref("Window.print()")}}
    • -
  • {{domxref("WindowEventHandlers.onbeforeprint")}}
    • -
  • 印刷
    • -
diff --git a/files/ja/web/api/window/onappinstalled/index.html b/files/ja/web/api/window/onappinstalled/index.html new file mode 100644 index 0000000000..40c22b7cec --- /dev/null +++ b/files/ja/web/api/window/onappinstalled/index.html @@ -0,0 +1,57 @@ +--- +title: Window.onappinstalled +slug: Web/API/Window/oninstall +tags: + - API + - Event Handler + - Property + - Reference + - Window + - web manifest +translation_of: Web/API/Window/onappinstalled +--- +
{{APIRef}}
+ +

{{domxref("Window")}} オブジェクトの onappinstalled プロパティは、appinstalled イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが プログレッシブウェブアプリ (PWA) としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。

+ +

構文

+ +
window.onappinstalled = function(event) { ... };
+
+ +

例

+ +
window.onappinstalled = function(ev) {
+  console.log('アプリケーションがインストールされました。');
+};
+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}{{Spec2('Manifest')}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.Window.onappinstalled")}}

+ +

関連項目

+ +
    +
  • {{ event("install") }}
    • +
diff --git a/files/ja/web/api/window/onclick/index.html b/files/ja/web/api/window/onclick/index.html deleted file mode 100644 index ac36968fa6..0000000000 --- a/files/ja/web/api/window/onclick/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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;
-
-
    -
  • 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/web/api/window/oninstall/index.html b/files/ja/web/api/window/oninstall/index.html deleted file mode 100644 index 40c22b7cec..0000000000 --- a/files/ja/web/api/window/oninstall/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Window.onappinstalled -slug: Web/API/Window/oninstall -tags: - - API - - Event Handler - - Property - - Reference - - Window - - web manifest -translation_of: Web/API/Window/onappinstalled ---- -
{{APIRef}}
- -

{{domxref("Window")}} オブジェクトの onappinstalled プロパティは、appinstalled イベントのイベントハンドラーとして扱われます。これは、ウェブアプリケーションが プログレッシブウェブアプリ (PWA) としてインストールに成功すると発行されます。この発生したイベントは、{{domxref("Event")}} インターフェイスを実装する「単純なイベント」です。

- -

構文

- -
window.onappinstalled = function(event) { ... };
-
- -

例

- -
window.onappinstalled = function(ev) {
-  console.log('アプリケーションがインストールされました。');
-};
- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName('Manifest', '#onappinstalled-attribute', 'Window.onappinstalled')}}{{Spec2('Manifest')}}初期定義
- -

ブラウザー実装状況

- - - -

{{Compat("api.Window.onappinstalled")}}

- -

関連項目

- -
    -
  • {{ event("install") }}
    • -
diff --git a/files/ja/web/api/window/onmousedown/index.html b/files/ja/web/api/window/onmousedown/index.html deleted file mode 100644 index b5f947f8be..0000000000 --- a/files/ja/web/api/window/onmousedown/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -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;
-
-
    -
  • 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/web/api/window/onmouseup/index.html b/files/ja/web/api/window/onmouseup/index.html deleted file mode 100644 index f7133126a9..0000000000 --- a/files/ja/web/api/window/onmouseup/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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;
-
-
    -
  • 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/web/api/window/onreset/index.html b/files/ja/web/api/window/onreset/index.html deleted file mode 100644 index c9862667e8..0000000000 --- a/files/ja/web/api/window/onreset/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: window.onreset -slug: Web/API/Window/onreset -tags: - - DOM - - Gecko - - Gecko DOM Reference - - Window -translation_of: Web/API/GlobalEventHandlers/onreset ---- -
- {{ApiRef}}
-

概要

-

フォームの reset イベントに対応するイベントハンドラです。

-

構文

-
window.onreset = funcRef;
-
-

引数

-
    -
  • funcRef : 関数への参照、または関数式
    • -
-

例

-
<!DOCTYPE html>
-<html lang="ja">
-<head>
-<meta charset="UTF-8" />
-<title>onreset のテスト</title>
-
-<script>
-function reg() {
-  window.onreset = hit;
-}
-
-function hit() {
- alert('リセットイベントが発生しました。');
-}
-</script>
-
-</head>
-<body onload="reg();">
-
-<form>
-  <div>
-    <textarea></textarea>
-  </div>
-  <div>
-    <input type="reset" value="reset" />
-  </div>
-</form>
-
-</body>
-</html>
-
-

注記

-

reset イベントは、ユーザがフォーム内のリセットボタン (<input type="reset"/>) をクリックした際に発生します。

-

仕様

-

標準仕様書には含まれていません。

diff --git a/files/ja/web/api/window/onresize/index.html b/files/ja/web/api/window/onresize/index.html deleted file mode 100644 index db2b2bbae9..0000000000 --- a/files/ja/web/api/window/onresize/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: window.onresize -slug: Web/API/Window/onresize -tags: - - DOM - - Gecko - - Property - - Window -translation_of: Web/API/GlobalEventHandlers/onresize ---- -

{{ ApiRef() }}

- -

GlobalEventHandlers.onresize プロパティは、{{event("resize")}} イベントを受信するとトリガーされる {{domxref("EventHandler")}} を含みます。

- -

構文

- -
window.onresize = funcRef;
-
- -

引数

- -
    -
  • funcRef: 関数への参照
    • -
- -

例

- -
window.onresize = doFunc;
-
- -
<html>
-<head>
-
-<title>onresize test</title>
-
-</head>
-
-<body>
-<p>Resize the browser window to fire the resize event.</p>
-
-<p>Window height: <span id="height"></span></p>
-<p>Window width: <span id="width"></span></p>
-
-<script type="text/javascript">
-  var heightOutput = document.querySelector('#height');
-  var widthOutput = document.querySelector('#width');
-
-  function resize() {
-    heightOutput.textContent = window.innerHeight;
-    widthOutput.textContent = window.innerWidth;
-  }
-
-  window.onresize = resize;
-</script>
-</body>
-</html>
-
- -

注記

- -

ブラウザウィンドウのサイズが変更された後に resize イベントが発生します。

- -

仕様

- - - - - - - - - - - - - - -
使用ステータスコメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/ja/web/api/window/opener/index.html b/files/ja/web/api/window/opener/index.html new file mode 100644 index 0000000000..c1f7152c9c --- /dev/null +++ b/files/ja/web/api/window/opener/index.html @@ -0,0 +1,33 @@ +--- +title: window.opener +slug: Web/API/window.opener +tags: + - DOM + - DOM_0 + - Gecko + - Window +translation_of: Web/API/Window/opener +--- +
{{ApiRef}}
+ +

概要

+ +

現在のウィンドウを開いたウィンドウへの参照を返します。

+ +

構文

+ +
objRef = window.opener;
+
+ +

例

+ +
if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+
+ +

注記

+ +

別のウィンドウから（{{domxref("Window.open")}} を使用して）開かれたウィンドウは、主ウィンドウへの参照を window.opener として保持します。現在のウィンドウが別のウィンドウから開かれたものではない場合、このメソッドは NULL を返します。

+ +

Windows Phone ブラウザは window.opener をサポートしていません（Edge 25.10586.36.0 でテストしました）。opener が異なるセキュリティゾーンにある場合、IE でもサポートされていません。

diff --git a/files/ja/web/api/window/restore/index.html b/files/ja/web/api/window/restore/index.html deleted file mode 100644 index 1510d2870e..0000000000 --- a/files/ja/web/api/window/restore/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -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/web/api/window/stop/index.html b/files/ja/web/api/window/stop/index.html new file mode 100644 index 0000000000..a32bbd359a --- /dev/null +++ b/files/ja/web/api/window/stop/index.html @@ -0,0 +1,58 @@ +--- +title: window.stop +slug: Web/API/window.stop +tags: + - API + - DOM + - Gecko + - HTML DOM +translation_of: Web/API/Window/stop +--- +
{{ApiRef}}
+ +

概要

+ +

このメソッドは、ウィンドウの読み込みを停止します。

+ +

構文

+ +
window.stop()
+
+ +

例

+ +
<script>
+stop();
+</script>
+
+<p>このパラグラフは読み込まれないでしょう。</p>​
+ +

注記

+ +

stop() メソッドは、ブラウザの停止ボタンをクリックすることと全く同じです。スクリプトが読み込まれる順番のために、stop() メソッドは文書の読み込みを停止できない可能性がありますが、巨大な画像、新しいウィンドウなど、読み込みを遅延させるオブジェクトの読み込みを停止することはできるでしょう。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG','browsers.html#dom-window-stop','Window.stop()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'browsers.html#dom-window-stop', 'Window.stop')}}{{Spec2('HTML5 W3C')}}
+ +

互換性

+ +

stop() メソッドは、Internet Explorer でサポートされません。

diff --git a/files/ja/web/api/window/unescape/index.html b/files/ja/web/api/window/unescape/index.html deleted file mode 100644 index 07564a02ee..0000000000 --- a/files/ja/web/api/window/unescape/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -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)
-
    -
  • regular : 通常の文字列
    • -
  • encoded : エンコードされた文字列
    • -
-

例

-
alert( unescape("%5C") );  // 表示結果: "\"
-
-alert( unescape("https%3A//developer.mozilla.org") );  // 表示結果: "https://developer.mozilla.org"
-
-

仕様

-

{{DOM0}} 但し、ECMA-262 の非標準化セクションで言及されています。

-

関連情報

- diff --git a/files/ja/web/api/window/url/index.html b/files/ja/web/api/window/url/index.html deleted file mode 100644 index ac758d1b3b..0000000000 --- a/files/ja/web/api/window/url/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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/web/api/windowbase64/atob/index.html b/files/ja/web/api/windowbase64/atob/index.html deleted file mode 100644 index e36c89b054..0000000000 --- a/files/ja/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowBase64/atob -tags: - - API - - HTML DOM - - Method - - Reference - - WindowOrWorkerGlobalScope - - atob -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -

{{APIRef("HTML DOM")}}

- -

WindowOrWorkerGlobalScope.atob() 関数は、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に atob() メソッドを使用して再度デコードすることができます。例えば、ASCII の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。

- -

Unicode や UTF-8 文字列の使用については、 {{domxref("WindowOrWorkerGlobalScope.btoa", "btoa()")}} の「Uncode 文字列」の節を参照してください。

- -

構文

- -
var decodedData = scope.atob(encodedData);
- -

引数

- -
-
encodedData
-
エンコードされたデータが入っているバイナリ文字列です。
-
- -

返値

- -

encodedData をデコードしたデータを含む ASCII 文字列です。

- -

例外

- -
-
{{domxref("DOMException")}} (name: InvalidCharacterError)
-
encodedData が妥当な base64 ではない場合に発行されます。
-
- -

例

- -
const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
-const decodedData = window.atob(encodedData); // 文字列をデコード
- -

ポリフィル

- -

対応していないブラウザーでは、 https://github.com/MaxArt2501/base64-js/blob/master/base64.js のポリフィルを利用することができます。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-atob', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}最新の仕様で、メソッドを WindowOrWorkerGlobalScope ミックスインに移動。
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}{{SpecName("HTML WHATWG")}} のスナップショット。 WindowBase64 の作成 (以前の対象だったプロパティ)。
- -

ブラウザーの互換性

- -
- - -

{{Compat("api.WindowOrWorkerGlobalScope.atob")}}

-
- -

関連情報

- - diff --git a/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html b/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html deleted file mode 100644 index 6e0e4f28db..0000000000 --- a/files/ja/web/api/windowbase64/base64_encoding_and_decoding/index.html +++ /dev/null @@ -1,558 +0,0 @@ ---- -title: Base64 のエンコードとデコード -slug: Web/API/WindowBase64/Base64_encoding_and_decoding -tags: - - Advanced - - Base64 - - JavaScript - - Typed Arrays - - URI - - URL - - Unicode Problem - - atob() - - btoa() -translation_of: Glossary/Base64 ---- -

Base64 とは、バイナリーからテキストへの符号化を行う手法のグループであり、64 を基数とする表現に変換することで、バイナリーデータを ASCII 文字列で表すことができます。Base64 という呼び方は、MIME の Content-Transfer-Encoding における特定の符号化方式の名前に由来します。

- -

Base64 符号化方式がよく使われるのは、テキストデータを扱うよう設計されたメディア上で、バイナリーデータを格納または転送する必要がある場合です。Base64 符号化により、転送中に変換されることなく、バイナリーデータがそのままであることを保証できます。Base64 は、MIME による電子メールや XML における複合型データの格納など、多くのアプリケーションで幅広く使われています。

- -

JavaScript には、Base64 文字列のエンコードとデコードのそれぞれに対応した、次の 2 つの関数があります。

- -
    -
  • {{domxref("WindowBase64.atob","atob()")}}
    • -
  • {{domxref("WindowBase64.btoa","btoa()")}}
    • -
- -

atob() 関数は、Base64 符号化方式によりエンコードされている文字列をデコードしてバイナリー文字列を作ります。逆に btoa() 関数は、バイナリー文字列から Base64 でエンコードされた ASCII 文字列を作ります。

- -

atob() と btoa() のどちらも、文字列に対して動作します。もし ArrayBuffer に対して動作させたい場合は、この段落 を読んでください。

- -

符号化によるサイズ増加

- -

Base64 の 1 文字はデータのちょうど 6 ビット分を表します。そのため、入力される文字列やバイナリーファイルに含まれる 3 バイト (3×8 ビット = 24 ビット) は、4 桁の Base64 で表されます (4×6 = 24 ビット)。

- -

このことにより、Base64 で表された文字列またはファイルは、元のサイズの 133% の大きさになると言えます (33% の増加)。エンコードされるデータが小さい場合は、さらに増加幅が大きくなります。例えば、length === 1 である文字列 "a" は、エンコードされて length === 4 の文字列 "YQ==" になり、これは 300% の増加です。

- - - - - - - - -
-

参考文書

- -
-
データ URL
-
データ URL は、RFC 2397 により定義されており、 これにより文書中に小さなファイルを埋め込むことができます。
-
Base64
-
ウィキペディアの Base64 符号化方式に関する記事です。
-
WindowOrWorkerGlobalScope ミックスイン
-
atob と btoa を規定し、これらは RFC 4648 により規定された Base64 にエンコードすると定めています。
-
RFC 4648
-
セクション 4 で Base64 のアルゴリズムを規定し、またセクション 5 で URL 向けの "base64url" アルゴリズム (こちらは atob や btoa では使われない) も定義しています。
-
{{domxref("WindowBase64.atob","atob()")}}
-
Base64 によりエンコードされている ASCII 文字列をデコードして、バイナリー文字列を作ります。
-
{{domxref("WindowBase64.btoa","btoa()")}}
-
バイナリー文字列から、Base64 によりエンコードされた ASCII 文字列を作ります。
-
あの「Unicode の問題」
-
ほとんどのブラウザーでは、Unicode 文字列を使って btoa() を実行すると、Character Out Of Range 例外が発生します。この段落では、これに対するいくつかの対策を説明しています。
-
URIScheme
-
Mozilla のサポートした URI スキームのリスト
-
StringView
-
この記事では、次を狙いとしたライブラリーを公開しています -
    -
  • 文字列に対する C 言語に似たインターフェイス (すなわち文字のコードの配列であり、JavaScript では ArrayBufferView) を JavaScript の ArrayBuffer インターフェイスを使って作ること
    • -
  • 文字列に似たオブジェクト (これからは stringView) 向けの、不変である JavaScript 文字列に対してではなく必ず数値の配列に対して働く、メソッドのコレクションを作ること
    • -
  • JavaScript デフォルトである UTF-16 の DOMString 以外の Unicode でも動作すること
    • -
-
-
- -

全て表示...

- 		-

ツール

- - - -

全て表示...

- - - - -
- -

あの「Unicode の問題」

- -

DOMString は 16 ビットで符号化された文字列であるので、Unicode 文字列を使って window.btoa を実行すると、8 ビットの範囲 (0x00~0xFF) を超えた文字がある場合に、ほとんどのブラウザーで Character Out Of Range 例外が発生します。以下は、この問題を解決するための 5 つの方法です。

- -
    -
  • 最初の方法は、JavaScript のネイティブ UTF-16 文字列を直接 Base64 にエンコードします (高速で、移植性があり、クリーン)
    • -
  • 2 番目の方法は、JavaScript のネイティブ UTF-16 文字列を UTF-8 に変換し、その後 Base64 にエンコードします (比較的高速で、移植性があり、クリーン)
    • -
  • 3 番目の方法は、JavaScript のネイティブ UTF-16 文字列を、バイナリー文字列経由で、Base64 にエンコードします (非常に高速で、比較的移植性があり、非常にコンパクト)
    • -
  • 4 番目の方法は、文字列全体をエスケープし (UTF-8 を使う。{{jsxref("encodeURIComponent")}} を参照)、そしてエンコードします (移植性はあるが、非標準的)
    • -
  • 5 番目の方法は、2 番目の方法と似ていますが、サードパーティのライブラリを使います
    • -
- -

方法 1 – JavaScript の UTF-16 => Base64

- -

Unicode 問題を解決する、非常に高速で幅広く使われている方法は、JavaScript のネイティブ UTF-16 文字列を直接 Base64 にエンコードすることです。デモのために URL data:text/plain;charset=utf-16;base64,OCY5JjomOyY8Jj4mPyY= を開いてください (このデータ URL をコピーし、新しいタブを開き、データ URL をアドレスバーに貼り付け、エンターをを押す)。この方法は、文字列を配列に割り当てるところを除き、どのような種類の変換も必要としないため、特に効率的です。次のコードは、Base64 文字列から ArrayBuffer に変換したり、その逆変換をするのにも便利です (下記参照)。

- -
"use strict";
-
-/*\
-|*|
-|*|  Base64 / binary data / UTF-8 strings utilities (#1)
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
-|*|
-|*|  Author: madmurphy
-|*|
-\*/
-
-/* Array of bytes to base64 string decoding */
-
-function b64ToUint6 (nChr) {
-
-  return nChr > 64 && nChr < 91 ?
-      nChr - 65
-    : nChr > 96 && nChr < 123 ?
-      nChr - 71
-    : nChr > 47 && nChr < 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlockSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
-    nMod4 = nInIdx & 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
-        aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
-      }
-      nUint24 = 0;
-    }
-  }
-
-  return aBytes;
-}
-
-/* Base64 string to array encoding */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 < 26 ?
-      nUint6 + 65
-    : nUint6 < 52 ?
-      nUint6 + 71
-    : nUint6 < 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = "";
-
-  for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    /* Uncomment the following line in order to split the output in lines 76-character long: */
-    /*
-    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    */
-    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
-      nUint24 = 0;
-    }
-  }
-
-  return  eqLen === 0 ?
-      sB64Enc
-    :
-      sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "==");
-
-}
-
- -

テスト

- -
var myString = "☸☹☺☻☼☾☿";
-
-/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */
-
-var aUTF16CodeUnits = new Uint16Array(myString.length);
-Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = myString.charCodeAt(idx); });
-var sUTF16Base64 = base64EncArr(new Uint8Array(aUTF16CodeUnits.buffer));
-
-/* 出力を表示する */
-
-alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY="
-
-/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */
-
-var sDecodedString = String.fromCharCode.apply(null, new Uint16Array(base64DecToArr(sUTF16Base64, 2).buffer));
-
-/* 出力を表示する */
-
-alert(sDecodedString); // "☸☹☺☻☼☾☿"
- -

生成された Base64 文字列はどこでも使えますが、UTF-16 で表現されています。もし UTF-8 を望む場合は次の方法を参照してください。

- -

方法 1 に対する補足: Base64 文字列を Uint8Array や ArrayBuffer にデコードする

- -

上記の関数を使って、Base64 でエンコードされた文字列から Uint8Array や ArrayBuffer を作ることもできます。

- -
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8)
-
-var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" (as UTF-8)
-
-alert(myBuffer.byteLength);
- -
注意: 関数 base64DecToArr(sBase64[, nBlockSize]) は、8 ビットの Uint8Array を返します。もし 16 ビット / 32 ビット / 64 ビットの生データのバッファを作ることが目的であれば、引数 nBlockSize を使ってください。これはバイト数であり、Uint8Array.buffer.bytesLength プロパティはその倍数になります (1 や省略された場合は ASCII、バイナリーデータ、バイナリー文字列、UTF-8 文字列向けです。2 は UTF-16 文字列向け、4 は UTF-32 文字列向けです)。
- -

完全なライブラリーは StringView – 型付き配列に基づく C 言語に似た文字列表現 を参照してください (ソースコードは GitHub で利用できます)。

- -

方法 2 – JavaScript の UTF-16 => UTF-8 => Base64

- -

この方法は、JavaScript ネイティブの UTF-16 文字列を UTF-8 文字列に変換し、それを Base64 でエンコードします。これにより、純粋な ASCII 文字列から Base64 への変換は、ネイティブの btoa() のように、常に同じ結果を出力します。

- -
"use strict";
-
-/*\
-|*|
-|*|  Base64 / binary data / UTF-8 strings utilities (#2)
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
-|*|
-|*|  Author: madmurphy
-|*|
-\*/
-
-/* Array of bytes to base64 string decoding */
-
-function b64ToUint6 (nChr) {
-
-  return nChr > 64 && nChr < 91 ?
-      nChr - 65
-    : nChr > 96 && nChr < 123 ?
-      nChr - 71
-    : nChr > 47 && nChr < 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlockSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlockSize ? Math.ceil((nInLen * 3 + 1 >>> 2) / nBlockSize) * nBlockSize : nInLen * 3 + 1 >>> 2, aBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
-    nMod4 = nInIdx & 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
-        aBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
-      }
-      nUint24 = 0;
-    }
-  }
-
-  return aBytes;
-}
-
-/* Base64 string to array encoding */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 < 26 ?
-      nUint6 + 65
-    : nUint6 < 52 ?
-      nUint6 + 71
-    : nUint6 < 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var eqLen = (3 - (aBytes.length % 3)) % 3, sB64Enc = "";
-
-  for (var nMod3, nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    /* Uncomment the following line in order to split the output in lines 76-character long: */
-    /*
-    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    */
-    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
-      nUint24 = 0;
-    }
-  }
-
-  return  eqLen === 0 ?
-      sB64Enc
-    :
-      sB64Enc.substring(0, sB64Enc.length - eqLen) + (eqLen === 1 ? "=" : "==");
-
-}
-
-/* UTF-8 array to DOMString and vice versa */
-
-function UTF8ArrToStr (aBytes) {
-
-  var sView = "";
-
-  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
-    nPart = aBytes[nIdx];
-    sView += String.fromCharCode(
-      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
-        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
-        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
-        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
-        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
-        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
-        (nPart - 192 << 6) + aBytes[++nIdx] - 128
-      : /* nPart < 127 ? */ /* one byte */
-        nPart
-    );
-  }
-
-  return sView;
-
-}
-
-function strToUTF8Arr (sDOMStr) {
-
-  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
-
-  /* mapping... */
-
-  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
-    nChr = sDOMStr.charCodeAt(nMapIdx);
-    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
-  }
-
-  aBytes = new Uint8Array(nArrLen);
-
-  /* transcription... */
-
-  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
-    nChr = sDOMStr.charCodeAt(nChrIdx);
-    if (nChr < 128) {
-      /* one byte */
-      aBytes[nIdx++] = nChr;
-    } else if (nChr < 0x800) {
-      /* two bytes */
-      aBytes[nIdx++] = 192 + (nChr >>> 6);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x10000) {
-      /* three bytes */
-      aBytes[nIdx++] = 224 + (nChr >>> 12);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x200000) {
-      /* four bytes */
-      aBytes[nIdx++] = 240 + (nChr >>> 18);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x4000000) {
-      /* five bytes */
-      aBytes[nIdx++] = 248 + (nChr >>> 24);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else /* if (nChr <= 0x7fffffff) */ {
-      /* six bytes */
-      aBytes[nIdx++] = 252 + (nChr >>> 30);
-      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    }
-  }
-
-  return aBytes;
-
-}
- -

テスト

- -
/* テスト */
-
-var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
-
-var aMyUTF8Input = strToUTF8Arr(sMyInput);
-
-var sMyBase64 = base64EncArr(aMyUTF8Input);
-
-alert(sMyBase64); // "QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="
-
-var aMyUTF8Output = base64DecToArr(sMyBase64);
-
-var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
-
-alert(sMyOutput); // "Base 64 — Mozilla Developer Network"
- -

方法 3 – JavaScript の UTF-16 => バイナリー文字列 => Base64

- -

これは、最も速く最もコンパクトな方法です。出力は方法 1 (UTF-16 ででエンコードされた文字列) のものと全く同じですが、{{domxref("WindowBase64.atob","atob()")}} と {{domxref("WindowBase64.btoa","btoa()")}} を書き直すのではなく、ネイティブのものを使います。この方法はエンコードまたはデコードの入力として、型付き配列の代わりに、中間フォーマットであるバイナリー文字列を使います。方法 1 (バイナリー文字列 は灰色の領域です) に比べると、これは「汚い」回避策ではありますが、問題なく動作し、必要なコードはわずか数行です。

- -
"use strict";
-
-/*\
-|*|
-|*|  Base64 / binary data / UTF-8 strings utilities (#3)
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
-|*|
-|*|  Author: madmurphy
-|*|
-\*/
-
-function btoaUTF16 (sString) {
-
-	var aUTF16CodeUnits = new Uint16Array(sString.length);
-	Array.prototype.forEach.call(aUTF16CodeUnits, function (el, idx, arr) { arr[idx] = sString.charCodeAt(idx); });
-	return btoa(String.fromCharCode.apply(null, new Uint8Array(aUTF16CodeUnits.buffer)));
-
-}
-
-function atobUTF16 (sBase64) {
-
-	var sBinaryString = atob(sBase64), aBinaryView = new Uint8Array(sBinaryString.length);
-	Array.prototype.forEach.call(aBinaryView, function (el, idx, arr) { arr[idx] = sBinaryString.charCodeAt(idx); });
-	return String.fromCharCode.apply(null, new Uint16Array(aBinaryView.buffer));
-
-}
- -

テスト

- -
var myString = "☸☹☺☻☼☾☿";
-
-/* Part 1: `myString` をネイティブの UTF-16 を使って Base64 にエンコードする */
-
-var sUTF16Base64 = btoaUTF16(myString);
-
-/* 出力を表示する */
-
-alert(sUTF16Base64); // "OCY5JjomOyY8Jj4mPyY="
-
-/* Part 2: `sUTF16Base64` を UTF-16 にデコードする */
-
-var sDecodedString = atobUTF16(sUTF16Base64);
-
-/* 出力を表示する */
-
-alert(sDecodedString); // "☸☹☺☻☼☾☿"
-
- -

バイナリー文字列の代わりに型付き配列を使う、よりクリーンな方法については、方法 1 と方法 2 を参照してください。

- -

方法 4 – エンコード前に文字列をエスケープ処理する

- -
function b64EncodeUnicode(str) {
-    // 最初に encodeURIComponent を使って "%" でエンコードされた UTF-8 文字列を取得し、
-    // 次に "%" でエンコードされた文字列をバイナリー文字列に変換し、
-    // それを btoa に与えます。
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
-        function toSolidBytes(match, p1) {
-            return String.fromCharCode('0x' + p1);
-    }));
-}
-
-b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-b64EncodeUnicode('\n'); // "Cg=="
-
- -

Base64 でエンコードされた値を元の文字列に戻すには、次のようにします。

- -
function b64DecodeUnicode(str) {
-    // 逆変換: バイナリー文字列から "%" エンコードへ、そしてオリジナルの文字列へ。
-    return decodeURIComponent(atob(str).split('').map(function(c) {
-        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-    }).join(''));
-}
-
-b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
-b64DecodeUnicode('Cg=='); // "\n"
-
- -

Unibabel は、この方法を使った共通の変換を実装しています。

- -

方法 5 – DOM の atob() や btoa() を JavaScript の TypedArray と UTF-8 を使って書き換える

- -

TextEncoder のポリフィル、例えば TextEncoding (レガシーの Windows、Mac、ISO のエンコーディングも含む) や TextEncoderLite を、モダンブラウザーと Node.js の両方で使える Buffer または base64-js や TypeScript 版の base64-js のような Base64 実装とを、組み合わせて使います。

- -

ネイティブの TextEncoder 実装がない場合、最も軽量な方法は 方法 3 でしょう。なぜなら、とても高速であることに加え、方法 3 は標準状態の IE9 でも動作するからです。 もう一つの方法は、TextEncoderLite と base64-js を使うことです。可能な場合はブラウザーの実装を使ってください。

- -

次の関数は、この考えを実装したものです。これは、base64-js が <script type="text/javascript" src="base64js.min.js"/> のようにインポートされていることを前提にしています。TextEncoderLite は UTF-8 でのみ機能することに注意してください。

- -
function Base64Encode(str, encoding = 'utf-8') {
-    var bytes = new (typeof TextEncoder === "undefined" ? TextEncoderLite : TextEncoder)(encoding).encode(str);
-    return base64js.fromByteArray(bytes);
-}
-
-function Base64Decode(str, encoding = 'utf-8') {
-    var bytes = base64js.toByteArray(str);
-    return new (typeof TextDecoder === "undefined" ? TextDecoderLite : TextDecoder)(encoding).decode(bytes);
-}
-
- -

Note: TextEncoderLite は、4 バイトの UTF-8 文字、つまり '\uD842\uDFB7' や '\u{20BB7}' のような文字を誤って解釈します。この Issue を参照してください。
- あるいは、代わりに text-encoding を使ってください。

- -

いくつかの場合には、UTF-8 に変換した後 Base64 にする上記の方法は、記憶領域に対してとても非効率的です。U+0800 から U+FFFF の範囲にある文字は、UTF-8 では 3 バイトにエンコードされますが UTF-16 では 2 バイトであり、これらがテキストの大部分を占める場合、UTF-8 の出力長は UTF-16 よりも長くなります。均等に分散した UTF-16 コードポイントを含む JavaScript 文字列の場合、Base64 の変換の前のエンコードを UTF-8 ではなく UTF-16 にすることで、サイズを 40% 減少できます。

diff --git a/files/ja/web/api/windowbase64/index.html b/files/ja/web/api/windowbase64/index.html deleted file mode 100644 index 760541b9c5..0000000000 --- a/files/ja/web/api/windowbase64/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -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

- -
    -
  • Base64 encoding and decoding
    • -
  • {{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}
    • -
diff --git a/files/ja/web/api/windoweventhandlers/onafterprint/index.html b/files/ja/web/api/windoweventhandlers/onafterprint/index.html new file mode 100644 index 0000000000..162c81e8c6 --- /dev/null +++ b/files/ja/web/api/windoweventhandlers/onafterprint/index.html @@ -0,0 +1,55 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/Window/onafterprint +tags: + - API + - DOM + - Event Handler + - HTML DOM + - Property + - Reference + - WindowEventHandlers + - printing +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +
{{ApiRef}}
+ +

{{domxref("WindowEventHandlers")}} ミックスインの onafterprint プロパティは、現在のウィンドウの {{event("afterprint")}} イベントを処理するための {{domxref("EventHandler")}} です。 このイベントは、ユーザーが印刷した後や、ユーザーが印刷ダイアログで中止した場合に発生します。

+ +

{{event("beforeprint")}} イベントと afterprint イベントを使用すると、印刷を開始する前にページでコンテンツを変更し（例えば、バナーを削除するなど）、印刷の完了後にそれらの変更を元に戻すことができます。 一般に、@media print CSS @-規則の使用を好むはずですが、場合によってはこれらのイベントを使用する必要があるかもしれません。

+ +

構文

+ +
window.addEventListener("afterprint", function(event) { ... });
+window.onafterprint = function(event) { ... };
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.WindowEventHandlers.onafterprint")}}

+ +

関連情報

+ +
    +
  • {{domxref("Window.print()")}}
    • +
  • {{domxref("WindowEventHandlers.onbeforeprint")}}
    • +
  • 印刷
    • +
diff --git a/files/ja/web/api/windoworworkerglobalscope/atob/index.html b/files/ja/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..e36c89b054 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,93 @@ +--- +title: WindowOrWorkerGlobalScope.atob() +slug: Web/API/WindowBase64/atob +tags: + - API + - HTML DOM + - Method + - Reference + - WindowOrWorkerGlobalScope + - atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef("HTML DOM")}}

+ +

WindowOrWorkerGlobalScope.atob() 関数は、 {{glossary("Base64")}} エンコーディングでエンコードされたデータの文字列をデコードします。 {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} メソッドを使用して、通信に問題が発生する可能性のあるデータをエンコードして送信し、送信した後に atob() メソッドを使用して再度デコードすることができます。例えば、ASCII の 0 から 31 までのコードような制御文字をエンコードして送信し、デコードすることができます。

+ +

Unicode や UTF-8 文字列の使用については、 {{domxref("WindowOrWorkerGlobalScope.btoa", "btoa()")}} の「Uncode 文字列」の節を参照してください。

+ +

構文

+ +
var decodedData = scope.atob(encodedData);
+ +

引数

+ +
+
encodedData
+
エンコードされたデータが入っているバイナリ文字列です。
+
+ +

返値

+ +

encodedData をデコードしたデータを含む ASCII 文字列です。

+ +

例外

+ +
+
{{domxref("DOMException")}} (name: InvalidCharacterError)
+
encodedData が妥当な base64 ではない場合に発行されます。
+
+ +

例

+ +
const encodedData = window.btoa('Hello, world'); // 文字列をエンコード
+const decodedData = window.atob(encodedData); // 文字列をデコード
+ +

ポリフィル

+ +

対応していないブラウザーでは、 https://github.com/MaxArt2501/base64-js/blob/master/base64.js のポリフィルを利用することができます。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-atob', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}最新の仕様で、メソッドを WindowOrWorkerGlobalScope ミックスインに移動。
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}{{SpecName("HTML WHATWG")}} のスナップショット、変更なし。
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}{{SpecName("HTML WHATWG")}} のスナップショット。 WindowBase64 の作成 (以前の対象だったプロパティ)。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.WindowOrWorkerGlobalScope.atob")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/windoworworkerglobalscope/caches/index.html b/files/ja/web/api/windoworworkerglobalscope/caches/index.html new file mode 100644 index 0000000000..5d4002bd19 --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/caches/index.html @@ -0,0 +1,82 @@ +--- +title: WorkerGlobalScope.caches +slug: Web/API/WorkerGlobalScope/caches +tags: + - API + - Experimental + - Property + - Read-only + - Reference + - Service Workers + - Web Workers + - Window + - WindowOrWorkerGlobalScope +translation_of: Web/API/WindowOrWorkerGlobalScope/caches +--- +
{{APIRef()}}{{SeeCompatTable}}
+ +

{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの caches 読み取り専用プロパティは、現在のワーカーコンテキストに関連する {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトにより、オフライン利用のために資産 (assets、アセット) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。

+ +

構文

+ +
var myCacheStorage = self.caches; // または単に caches
+
+ +

値

+ +

{{domxref("CacheStorage")}}。

+ +

例

+ +

次の例では、アセットをオフラインで利用できるようにするために、ServiceWorker コンテキストでキャッシュを使う方法を示しています。

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll(
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      );
+    })
+  );
+});
+ +

仕様

+ + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}初期定義。
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html new file mode 100644 index 0000000000..ceb7c2ebbe --- /dev/null +++ b/files/ja/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -0,0 +1,122 @@ +--- +title: window.clearInterval +slug: Web/API/WindowTimers/clearInterval +tags: + - DOM + - DOM_0 + - Gecko + - JavaScript timers + - Window +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
{{ApiRef}}
+ +

概要

+ +

{{domxref("window.setInterval", "setInterval")}} を使用して設定された繰り返し動作をキャンセルします。

+ +

構文

+ +
window.clearInterval(intervalID)
+
+ +
    +
  • intervalID: キャンセルする繰り返し動作の識別子。この ID は setInterval() の戻り値です。
    • +
+ +

例

+ +

{{domxref("window.setInterval", "setInterval()", "example")}} の例を参照して下さい。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'webappapis.html#dom-setInterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}{{Spec2("HTML WHATWG")}}最新の仕様で、メソッドを WindowOrWorkerGlobalScope ミックスインに移動。
{{SpecName("HTML WHATWG", "webappapis.html#dom-setInterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}} 
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}
+ {{CompatGeckoDesktop("52")}}[1]		4.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid 版 ChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート1.01.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}
+ {{CompatGeckoMobile("52")}}[1]		6.06.01.0
+
+ +

[1] clearInterval() は現在継承され{{domxref("WindowOrWorkerGlobalScope")}}に定義されています.

+ +

関連情報

+ +
    +
  • JavaScript timers
    • +
  • {{domxref("window.setTimeout")}}
    • +
  • {{domxref("window.setInterval")}}
    • +
  • {{domxref("window.clearTimeout")}}
    • +
  • {{domxref("window.requestAnimationFrame")}}
    • +
  • Daemons management
    • +
diff --git a/files/ja/web/api/windowtimers/clearinterval/index.html b/files/ja/web/api/windowtimers/clearinterval/index.html deleted file mode 100644 index ceb7c2ebbe..0000000000 --- a/files/ja/web/api/windowtimers/clearinterval/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: window.clearInterval -slug: Web/API/WindowTimers/clearInterval -tags: - - DOM - - DOM_0 - - Gecko - - JavaScript timers - - Window -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval ---- -
{{ApiRef}}
- -

概要

- -

{{domxref("window.setInterval", "setInterval")}} を使用して設定された繰り返し動作をキャンセルします。

- -

構文

- -
window.clearInterval(intervalID)
-
- -
    -
  • intervalID: キャンセルする繰り返し動作の識別子。この ID は setInterval() の戻り値です。
    • -
- -

例

- -

{{domxref("window.setInterval", "setInterval()", "example")}} の例を参照して下さい。

- -

仕様

- - - - - - - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('HTML WHATWG', 'webappapis.html#dom-setInterval', 'WindowOrWorkerGlobalScope.clearInterval()')}}{{Spec2("HTML WHATWG")}}最新の仕様で、メソッドを WindowOrWorkerGlobalScope ミックスインに移動。
{{SpecName("HTML WHATWG", "webappapis.html#dom-setInterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}} 
- -

ブラウザー実装状況

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}
- {{CompatGeckoDesktop("52")}}[1]		4.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
機能AndroidAndroid 版 ChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート1.01.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}
- {{CompatGeckoMobile("52")}}[1]		6.06.01.0
-
- -

[1] clearInterval() は現在継承され{{domxref("WindowOrWorkerGlobalScope")}}に定義されています.

- -

関連情報

- -
    -
  • JavaScript timers
    • -
  • {{domxref("window.setTimeout")}}
    • -
  • {{domxref("window.setInterval")}}
    • -
  • {{domxref("window.clearTimeout")}}
    • -
  • {{domxref("window.requestAnimationFrame")}}
    • -
  • Daemons management
    • -
diff --git a/files/ja/web/api/windowtimers/index.html b/files/ja/web/api/windowtimers/index.html deleted file mode 100644 index 549969232f..0000000000 --- a/files/ja/web/api/windowtimers/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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

- -
    -
  • {{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}
    • -
diff --git a/files/ja/web/api/workerglobalscope/caches/index.html b/files/ja/web/api/workerglobalscope/caches/index.html deleted file mode 100644 index 5d4002bd19..0000000000 --- a/files/ja/web/api/workerglobalscope/caches/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WorkerGlobalScope.caches -slug: Web/API/WorkerGlobalScope/caches -tags: - - API - - Experimental - - Property - - Read-only - - Reference - - Service Workers - - Web Workers - - Window - - WindowOrWorkerGlobalScope -translation_of: Web/API/WindowOrWorkerGlobalScope/caches ---- -
{{APIRef()}}{{SeeCompatTable}}
- -

{{domxref("WindowOrWorkerGlobalScope")}} インターフェイスの caches 読み取り専用プロパティは、現在のワーカーコンテキストに関連する {{domxref("CacheStorage")}} オブジェクトを返します。このオブジェクトにより、オフライン利用のために資産 (assets、アセット) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。

- -

構文

- -
var myCacheStorage = self.caches; // または単に caches
-
- -

値

- -

{{domxref("CacheStorage")}}。

- -

例

- -

次の例では、アセットをオフラインで利用できるようにするために、ServiceWorker コンテキストでキャッシュを使う方法を示しています。

- -
this.addEventListener('install', function(event) {
-  event.waitUntil(
-    caches.open('v1').then(function(cache) {
-      return cache.addAll(
-        '/sw-test/',
-        '/sw-test/index.html',
-        '/sw-test/style.css',
-        '/sw-test/app.js',
-        '/sw-test/image-list.js',
-        '/sw-test/star-wars-logo.jpg',
-        '/sw-test/gallery/',
-        '/sw-test/gallery/bountyHunters.jpg',
-        '/sw-test/gallery/myLittleVader.jpg',
-        '/sw-test/gallery/snowTroopers.jpg'
-      );
-    })
-  );
-});
- -

仕様

- - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}初期定義。
- -

ブラウザー実装状況

- - - -

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

- -

関連項目

- - diff --git a/files/ja/web/api/xmldocument/async/index.html b/files/ja/web/api/xmldocument/async/index.html new file mode 100644 index 0000000000..00d0b0724c --- /dev/null +++ b/files/ja/web/api/xmldocument/async/index.html @@ -0,0 +1,45 @@ +--- +title: XMLDocument.async +slug: Web/API/Document/async +tags: + - API + - DOM + - DOM Reference + - Deprecated + - Document + - Non-standard + - Property + - Reference + - async +translation_of: Web/API/XMLDocument/async +--- +

{{APIRef("DOM")}}{{Non-standard_header}}{{Deprecated_header}}

+ +

document.async は、 {{DOMxRef("XMLDocument.load()")}} の呼び出しを同期で行うか、または非同期で行うかの指示を真偽値で設定します。 true が初期値であり、これは文書を非同期的に読み込むよう要求するものです。

+ +

(1.4 アルファから、同期的に文書を読み込めるようになりました。)

+ +

例

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // querydata.xml の内容を文字列として取得
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.XMLDocument.async")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html new file mode 100644 index 0000000000..685fdcc100 --- /dev/null +++ b/files/ja/web/api/xmlserializer/index.html @@ -0,0 +1,101 @@ +--- +title: XMLSerializer +slug: XMLSerializer +tags: + - Converting + - DOM Parsing + - Interface + - Parsing + - Reference + - Serialization + - Serializing + - XML + - XML Serializer + - conversion +translation_of: Web/API/XMLSerializer +--- +
{{APIRef("XMLSerializer")}}
+ +

XMLSerializer インターフェースは、{{Glossary("DOM")}} ツリーを表す XML 文字列を構築するための {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} メソッドを提供します。

+ +

メソッド

+ +
+
{{domxref("XMLSerializer.serializeToString", "serializeToString()")}}
+
文字列の形にシリアライズされたサブツリーを返します。
+
{{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}
+
指定した要素をルートとするサブツリーが、指定した文字セットを使ったバイトストリームにシリアライズされます。
+
+ +

例

+ +

XML を文字列にシリアライズ

+ +

最初の基本的な例は、ドキュメント全体を XML を含む文字列にシリアライズするだけです。

+ +
 var s = new XMLSerializer();
+ var d = document;
+ var str = s.serializeToString(d);
+ saveXML(str);
+ +

このコードは、新しい XMLSerializer オブジェクトを作成し、シリアライズされる {{domxref("Document")}} を {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} に渡します。これは、渡した document と同等の XML を返します。

+ +

XML を基にした DOM にノードを挿入する

+ +

この例は、{{domxref("Element.insertAdjacentHTML()")}} メソッドを使用して新しい DOM {{domxref("Node")}} を {{domxref("Document")}} の body に挿入します。これは、{{domxref("Element")}} オブジェクトをシリアライズすることにより作成された XML を基にしています。

+ +
+

注記: 実際は、{{domxref("Document.importNode", "importNode()")}} メソッドを呼び出して新しいノードを DOM に挿入する代わりに、以下のいずれかのメソッドを呼び出して DOM ツリーに追加することになるでしょう:

+ +
    +
  • {{domxref("Document")}} および {{domxref("Element")}} メソッド {{domxref("ParentNode.append", "append()")}} および {{domxref("ParentNode.prepend", "prepend()")}}
    • +
  • {{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} メソッド (既存のノードを新しいノードと置き換えるため)
    • +
  • {{domxref("Document.insertAdjacentElement()")}} および {{domxref("Element.insertAdjacentElement()")}} メソッド
    • +
+
+ +

insertAdjacentHTML() は文字列を受け入れるが、2 番目の引数として Node を受け入れないため、XMLSerializer を使用して先にノードを文字列に変換します。

+ +
var inp = document.createElement('input');
+var XMLS = new XMLSerializer();
+var inp_xmls = XMLS.serializeToString(inp); // まず DOM ノードを文字列に変換
+
+// 新たに作成されたノードを document の body に挿入
+document.body.insertAdjacentHTML('afterbegin', inp_xmls);
+ +

このコードは、{{domxref("Document.createElement()")}} を呼び出して新しい {{HTMLElement("input")}} 要素を作成し、{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} を使用して XML にシリアライズします。

+ +

完了したら、insertAdjacentHTML() を使用して <input> 要素を DOM に挿入します。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('DOM Parsing', '#the-xmlserializer-interface', 'XMLSerializer')}}{{Spec2('DOM Parsing')}}
+ +

ブラウザーの実装状況

+ +
+ + +

{{Compat("api.XMLSerializer")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html b/files/ja/web/compatibility_faq/broken_table_layout.html/index.html deleted file mode 100644 index 32dc4a39a4..0000000000 --- a/files/ja/web/compatibility_faq/broken_table_layout.html/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: テーブルのレイアウトが崩れている -slug: Web/Compatibility_FAQ/Broken_Table_Layout.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　テーブルのセル幅に統一性がなく、テーブル全体のレイアウトが崩れます。

- -
　　
- -

左：Firefox　右：他ブラウザ

- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    テーブルのセル幅の未指定

    - -

    　テーブルのセル幅が明示的に指定されていないため、セルの横幅がテーブル各行左側のセルのサイズに合わせて伸縮しています。

    - - 
    　　#maincontent section.category .list div{
-	display: table;
-	width: 100%;
-	border-top: #b2b2b2 1px solid;
-　　}
    - -

    　上記のようなテーブル指定に加えて、更に横並びのセルが左右均等となるような配置指定が必要となります。
    -  

    -
    2. -
- -

解決策

- -

　解決策の代表例として以下があります。

- -
    -
  1. -

    テーブルのセル幅の未指定

    - -

    テーブルの配置指定に table-layout: fixed; を適用させます。
    - table-layout: fixed; の指定により、横並びのセル幅が左右均等になります。

    - - 
    　　#maincontent section.category .list div{
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-	border-top: #b2b2b2 1px solid;
-　　}
    - -

     

    -
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・細かいpxの指定をせずにテーブルの見た目を整えることができます。
- 　・また、後続するセルのコンテンツが用意された列幅をオーバーフロー(はみ出し)した場合にも、
- 　　発生したセルに対してoverflowプロパティを用いればはみ出したセルの内容を表示できるようになるなど、セルの内容変更にも柔軟に対応できます。

- -


- 戻る

diff --git a/files/ja/web/compatibility_faq/cut_off_text.html/index.html b/files/ja/web/compatibility_faq/cut_off_text.html/index.html deleted file mode 100644 index 9824d3d62d..0000000000 --- a/files/ja/web/compatibility_faq/cut_off_text.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 文字列の一部が表示されずに見切れる -slug: Web/Compatibility_FAQ/Cut_Off_Text.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　検索等のテキストボックス内のプレースホルダーが見切れています。
- 　プレースホルダーの文字列が全て表示できず、途中で見切れている場合があります。

- -

　　　表示画面

- -

- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    表示領域が足りていない
    - 表示領域のwidthプロパティの値が表示させるテキストの文字数分のpx数より小さいことで見切れています。
    - テキストを全て表示させるには、テキストよりも大きなwidthプロパティの値を設定する必要があります。

    - - 
    　　input[type=text] {
-	margin:0 6px;
-	width:165px;
-　　}
    - -

     

    -
    2. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    表示領域が足りていない
    - 表示領域のwidthプロパティを要素のテキストに合わせて、再設定することで正しく表示されます。
    - 表示するテキストが長すぎてテキストボックスを超えてしまう場合は、テキストボックスの横幅の調整も必要となります。

    - - 
    　　input[type=text] {
-	margin:0 6px;
-	width: 200px;
-　　}
    - -

     

    -
    2. -
- -

メリット

- -

　・少ない調整で正しく表示を行えるようになります。
- 　・要素内のpx指定の変更のみなので、他ブラウザへの影響がありません。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/empty_background_color.html/index.html b/files/ja/web/compatibility_faq/empty_background_color.html/index.html deleted file mode 100644 index 0574ed49ff..0000000000 --- a/files/ja/web/compatibility_faq/empty_background_color.html/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'アイコン,バナーの色が抜けている' -slug: Web/Compatibility_FAQ/Empty_Background_Color.html -tags: - - Compatibility - - Decoration ---- -

概要

- -

　他ブラウザで表示されるアイコンやバナーの色が、mobile版Firefoxでは表示されません。
- 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示される場合があります。

- -
-

-
- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - 表示に必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    - - 
    　　a.button_hoge {
-	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
-　　}
    - -

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    - また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいました。

    -
    2. -
- -

解決策

- -

　要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - CSS3準拠の backgound: linear-gradient(); を追記します。

    - - 
    　　a.button_hoge {
-	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
-	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
-　　}
    - -

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    -
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・追記のみで対応可能です。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/index.html b/files/ja/web/compatibility_faq/index.html deleted file mode 100644 index 752ad7c6ff..0000000000 --- a/files/ja/web/compatibility_faq/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: サイト表示互換性に関するノウハウ -slug: Web/Compatibility_FAQ -tags: - - Compatibility ---- -
-

モバイルデバイスを利用する上で、特定のデバイス／ブラウザに依存せず、どのブラウザでもサイトが正常表示可能な環境が理想的と考えています。
- 本稿では、主にAndroid版Firefoxで発生しているよくあるサイト表示不具合をパターン毎に分類し、Web標準に従ったコンテンツ記載によりブラウザ間の表示互換性を保てるノウハウをご紹介します。

- -

目次

- -
-

1. 画面レイアウトが崩れる

- - - -

2. 装飾が抜ける

- - - -

3. 画面要素の一部が表示されない

- - - -
-

TIPS

- - - -
diff --git a/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html b/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html deleted file mode 100644 index 520c573e75..0000000000 --- a/files/ja/web/compatibility_faq/invalid_icon_size.html/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: アイコン、画像が期待と異なるサイズで表示される -slug: Web/Compatibility_FAQ/Invalid_Icon_Size.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　アイコンや画像が期待と異なるサイズで表示されます。
- 　他のブラウザと比較した場合や、同ページで複数使用されている同アイコンで比較した場合に、画像が小さく表示されたり、大きく表示されたりします。
- 　結果、他の要素と並んだ場合に不自然な表示となってしまいます。

- -
-

　　表示画面

- -

 

-
- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - 他のブラウザで正しく表示出来ている場合でもFirefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることがあります。
    - -webkit-linear-gradient()関数等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    - - - 
    　　input[type="submit"] {
-	position: absolute;
-	right: 15px;
-	width: 40px;
-	border-radius: 5px;
-	padding: 6px 19px;
-	margin-top: 10px;
-	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
-　　}
    - -

     

    -
    2. -
  2. -

    各アイコンの配置指定方法が統一されていない
    - 各アイコンの配置指定方法が統一されていない為、各アイコンの表示状態が異なってしまう場合があります。
    - インラインでの装飾指定とそれぞれのアイコンにおける%指定やfloatなどの指定が統一していない場合に、ブラウザによっては、表示サイズや配置が異なってしまうことがあります。

    - - - 
    　　インライン {background: url('/images/shared/arw_r_black_01.png') no-repeat scroll 97.5% 50% #EFEFEF !important;}
-　　インライン {float: right; clear: both;}
    - -

     

    -
    3. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    - -webkit-linear-gradient()関数の場合は、linear-gradient()関数を追記することでFirefoxでも指定を行うことができます。
    - ただし、-webkit-linear-gradient()関数とlinear-gradient()関数は、伴う引数が異なる為、例に従って記載してください。

    - - 
    　　input[type="submit"] {
-	position: absolute;
-	right: 15px;
-	width: 40px;
-	border-radius: 5px;
-	padding: 6px 19px;
-	margin-top: 10px;
-	background: url(../images/icon_serach.png) no-repeat center center, -webkit-linear-gradient(top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
-	background: url(../images/icon_serach.png) no-repeat center center, linear-gradient(to top, #ffffff 1%, #e5c21f 2%, #e6a227 90%, #e6a026);
-　　}
    - -

     

    -
    2. -
  2. -

    各アイコンの配置指定方法が統一されていない
    - 各アイコンの配置指定方法を統一することで解消されます。
    - インラインで各アイコンの指定を行うと統一できていない場合があるので、別途CSSファイルを作成し、統一した指定を定義するとよいでしょう。

    -
    3. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・HTML全体の指定を出来る限り統一し、CSSファイルで定義することで変更修正が容易になります。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/misaligned_icon.html/index.html b/files/ja/web/compatibility_faq/misaligned_icon.html/index.html deleted file mode 100644 index f3fbfffcca..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_icon.html/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: アイコン、画像の表示位置がずれる -slug: Web/Compatibility_FAQ/Misaligned_Icon.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　アイコンや画像の表示位置がずれて表示されてしまいます。
- 　他のブラウザと比較した場合、上下左右にずれて表示されたり、横並びに表示されるべきアイコンや画像が縦並びに表示されたりします。

- -

 　

- -

- -
 
- -

 

- -

要因

- -

　複数の要因が考えられますが、代表例として以下があります。

- -
    -
  1. -

    アイコンや画像が横幅に収まらず、折り返されている
    - span要素等のブロックが横幅に収まらずに折り返されて表示されている場合があります。
    - ブラウザの違いによりインラインブロック間にできる間隔が異なる事がありますので、他のブラウザで横並びに表示できていても
    - Firefoxで表示すると折り返され、縦並びに表示されてしまいます。

    - - - 
    　　.btn-pulldown-main {
-	box-sizing: border-box;
-	width: 49.2%;
-	display: inline-block;
-	padding: 9px 0;
-　　}
    - -

     

    -
    2. -
  2. -

    zoomプロパティが使用されている
    - zoomプロパティが使用されている場合、Firefoxでは適応されません。
    - 他のブラウザでは、適応されているプロパティがFirefoxでは適応されていない場合、見栄えに差異が出てしまいます。
    - よって、他のブラウザで調整した表示位置が、Firefoxでは誤った表示となってしまいます。

    - - - 
    　　.menu {
-	display:　block;
-	position: absolute;
-	top: 0px;
-	right: 0px;
-	zoom: 0.5;
-　　}
    - -

     

    -
    3. -
  3. -

    ブラウザの解像度の違いによる表示差異
    - ブラウザの解像度の違いによって、px指定されているマージンが表示上、異なってしまう場合があります。
    - 結果、アイコンや画像の表示位置がブラウザ間でずれて表示されてしまいます。

    - - - 
    　　img.message {
-	position: relative;
-	margin-top: -52px;
-　　}
    - -

     

    -
    4. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    アイコンや画像が横幅に収まらず、折り返されている
    - 各ブロックの横幅を調整することで解消されます。
    - ブラウザによってインラインブロック間のマージンが異なる場合があるため、実際に表示させながら、横幅に各ブロックが収まる(折り返されない)様に調整していきます。

    - - 
    　　.btn-pulldown-main {
-	box-sizing: border-box;
-	width: 49.0%;
-	display: inline-block;
-	padding: 9px 0;
-　　}
    - -

     

    -
    2. -
  2. -

    zoomプロパティが使用されている
    - zoomプロパティはFirefoxでは適応されないため、heightプロパティで位置を指定するのがよいです。
    - その他の指定もpx指定で調整することで、他のブラウザとの表示差異はなくなります。

    - - 
    　　インライン { height: 80px;}
-
-　　.menu {
-	display: block;
-	position: absolute;
-	top: -15px;
-	right: -10px;
-　　}
    - -

     

    -
    3. -
  3. -

    ブラウザの解像度の違いによる表示差異
    - アイコンの位置をpaddingプロパティで再調整することで正しく表示させることが可能となります。

    - - - 
    　　img.message {
-	position: relative;
-	margin-top: -52px;
-	padding: 0 0 6px 0;
-　　}
    - -

     

    -
    4. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/misaligned_text.html/index.html b/files/ja/web/compatibility_faq/misaligned_text.html/index.html deleted file mode 100644 index fe57d3e89a..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_text.html/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: 文字列の表示位置がずれる -slug: Web/Compatibility_FAQ/Misaligned_Text.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　文字列の表示位置が上下左右にずれて表示されたり、プルダウンメニュー等の表示領域をはみ出して表示したりすることがあります。
- 　その場合、横スクロールが行えないことを想定したモバイル向けwebページで横スクロールが可能となってしまいます。

- -
表示画面
- -

- -

要因

- -

　複数の要因が考えられますが、代表例として以下があります。

- -
    -
  1. -

    ブラウザ間でのデフォルト値の差異
    - ブラウザ毎でデフォルト値を持っています。 line-height: normal; 等で指定するとデフォルト値で表示されます。
    - しかし、ブラウザによってはデフォルト値が異なるため、同じようにnormalで指定してもブラウザ比較すると異なる表示となってしまうことがあります。

    - - 
    　　.recommended {
-	text-decoration: none;
-	display: inline;
-	width: auto;
-	height: auto;
-	line-height: normal;
-	vertical-align: baseline;
-　　}
    - - -
    2. -
  2. -

    ベンダープレフィックス
    - 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    - -webkit-box-sizingプロパティ等で指定している場合、Firefoxでは認識できないため、表示崩れが発生します。

    - - 
    　　#button-06 {
-	display: table;
-	width: 99.9%;
-	-webkit-box-sizing: border-box;
-　　}
    - - -
    3. -
  3. -

    ブラウザ間でのpx指定の差異
    - 様々なアイコン上の文字列をCSSのpaddingプロパティ等を使用して、配置を指定している場合、ブラウザ間で表示がずれてしまう場合があります。
    - これは、ブラウザ間でpx指定の差異があるために発生しています。

    - - 
    　　.gender-type {
-	padding-top: 3px;
-　　}
    - - -
    4. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ブラウザ間でのデフォルト値の差異
    - デフォルト値で設定するとそれぞれのブラウザで解釈の差異が生まれてしまう可能性があるため、
    - 明示的に値を指定することで正しく表示できます。

    - - 
    　　.recommended {
-	text-decoration: none; display: inline;
-	width: auto;
-	height: auto;
-	line-height: 1;
-	vertical-align: baseline;
-　　}
    - - -
    2. -
  2. -

    ベンダープレフィックス
    - webkit指定が入っている場合は、他のブラウザとの互換用に別途指定を行う必要があります。
    - -webkit-box-sizingプロパティの場合は、box-sizingプロパティを追記することでFirefoxでも指定を行うことができます。

    - - 
    　　#button-06 {
-	display: table;
-	width: 99.9%;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-　　}
    - - -
    3. -
  3. -

    ブラウザ間でのpx指定の差異
    - 指定に差異が出てしまっているものに関しては、個々の要素にpaddingプロパティ指定を追記し、
    - それぞれで調整を行うことで、想定の表示を行うことが可能となります。

    - - 
    　　.gender-type.blc-hdr-rgt {
-	float: right;
-	padding: 1.5px;
-　　}
    - - -
    4. -
- -

メリット

- -

　・デフォルト値ではなく、明示的に値を指定することで、他のブラウザで差異があった場合にも対応できます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html b/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html deleted file mode 100644 index bb9afac07e..0000000000 --- a/files/ja/web/compatibility_faq/misaligned_text_inside_icon.html/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: アイコンの中身が外側にはみ出すなどして形が壊れている -slug: Web/Compatibility_FAQ/Misaligned_Text_Inside_Icon.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　アイコンの中身が外にはみ出して形が崩れてしまいます。

- -
表示画面
- -

- -

要因

- -

　複数の要因が考えられますが、代表例として以下があります。

- -
    -
  1. -

    アイコンの横幅指定が誤っている
    - アイコンの横幅指定が画面横幅を超えて指定されている為、画面の外にアイコンがはみ出してしまい、形が崩れています。
    - 横幅にmax-widthプロパティを指定した場合、横画面表示時のサイズで指定されてしまうため、横幅が可変した場合に対応できません。

    - - - 
    　　img {
-	max-width: 100%;
-	height: auto;
-	vertical-align: middle;
-	border: 0px none;
-　　}
    - -

     

    -
    2. -
  2. -

    ベンダープレフィックス
    - 他のブラウザで正しく表示出来ているが、Firefoxで表示が崩れている場合は、ベンダープレフィックスの指定が入っていることが考えられます。
    - -webkit-background-sizeプロパティ等の指定で表示領域を設定していると、Firefoxでは認識できず、指定されていない状態になっています。

    - - - 
    　　h3 {
-	padding: 10px 40px 10px 10px;
-	background: url(/images/open.gif) no-repeat 98% 50%;
-	-webkit-background-size: 21px 21px;
-	font-weight: bold;
-	font-size: 12px;
-	cursor: pointer;
-　　}
    - -

     

    -
    3. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    アイコンの横幅指定が誤っている
    - max-width: 100%; で指定されている場合は、横画面表示時のサイズで指定されてしまうため、width: 100%; に修正することで縦画面表示のサイズにも対応できます。

    - - - 
    　　img {
-	width: 100%;
-	height: auto;
-	vertical-align: middle;
-	border: 0px none;
-　　}
    - -

     

    -
    2. -
  2. -

    ベンダープレフィックス
    - webkit指定が入っている場合は、他ブラウザ互換用に別途指定を行う必要があります。
    - -webkit-background-sizeプロパティの場合は、background-sizeプロパティを追記することでFirefoxでも指定を行うことができます。
    - 引数は同様のものが使用可能です。

    - - - 
    　　h3 {
-	padding: 10px 40px 10px 10px;
-	background: url(/images/open.gif) no-repeat 98% 50%;
-	-webkit-background-size: 21px 21px;
-	background-size: 21px 21px;
-	font-weight: bold;
-	font-size: 12px;
-	cursor: pointer;
-　　}
    - -

     

    -
    3. -
- -

メリット

- -

　・画面サイズの可変に対応可能となります。
- 　・他のブラウザでも互換性を維持することができます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_background_shown.html/index.html b/files/ja/web/compatibility_faq/no_background_shown.html/index.html deleted file mode 100644 index a89fb50986..0000000000 --- a/files/ja/web/compatibility_faq/no_background_shown.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: ページの背景色が抜けている -slug: Web/Compatibility_FAQ/No_Background_Shown.html -tags: - - Compatibility - - Decoration ---- -

概要

- -

　他ブラウザにて表示される背景色が、mobile版Firefoxにて表示されません。
- 　領域が真っ白な表示になっていたり、下レイヤーの要素の背景が表示されたりします。

- -
-
表示画面
- -

-
- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - 必要なベンダープレフィックス付きプロパティが記述されていない場合があります。

    - - 
    　　.bg_hoge {
-	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
-　　}
    - -

    上記の backgound: -webkit-gradient(); は、webkitブラウザ用の記述となります。
    - また、gradient値を指定する代替の記述もないため、結果として、背景からグラデーション装飾が抜けてしまいます。

    -
    2. -
- -

解決策

- -

　要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - CSS3準拠の backgound: linear-gradient(); を追記します。

    - - 
    　　.bg_hoge {
-	background: -webkit-gradient( linear, center top, center bottom, from(#ff4466), color-stop(0.9, #ff4466), to(rgba(255,255,255,0.0)));
-	background: linear-gradient(to bottom, #ff4466 90%, #ffffff);
-　　}
    - -

    注意：gradient値やlinear-gradient()関数はブラウザやバージョンごとに構文が異なりますので注意が必要です。

    -
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・追記のみの対応のため改修が容易です。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html b/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html deleted file mode 100644 index 2a00bcebe7..0000000000 --- a/files/ja/web/compatibility_faq/no_border_line_shown.html/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 罫線が表示されない -slug: Web/Compatibility_FAQ/No_Border_Line_Shown.html -tags: - - Compatibility - - Invisible element ---- -

概要

- -

　他ブラウザで表示されている罫線が、Firefoxで表示されない場合があります。

- -

- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    他ブラウザで独自のCSSが適応されている
    - 例えば、Chromeではブラウザ独自のCSSにて、hr要素にbackground-colorプロパティを指定することができます。
    - そのため、Firefoxで表示されていない罫線がChromeでは表示されるということが起きてしまいます。
    - 特に、コンテンツの記述やFirefoxの動作が問題になっているわけではありません。

    -
    2. -
- -

解決策

- -

　要因の解決策の代表例として以下があります。

- -
    -
  1. -

    他ブラウザで独自のCSSが適応されている
    - Firefox側のコンテンツの記述、動作に問題はありませんが、下記の方法で統一することが可能です。
    - まず、表示させたい要素のインラインに罫線(border-top: thin solid;)を指定します。
    - そして、他ブラウザ(この場合はChrome)で入っている指定をリセット記述(background-colorプロパティを利用)にて非表示にします。

    - - - 
    　　インライン {
-	border-top: thin solid;
-　　}
-
-　　hr {
-	display: block;
-	height: 1px;
-	border: 0;
-	border-top: 1px solid #cccccc;
-	margin: 1em 0;
-	padding: 0;
-	background-color: rgb(255,255,255);
-　　}
    - 上記の修正にて、他ブラウザとの互換がとれるようになります。
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・作成者の把握できていないブラウザ独自の装飾をリセットすることで作成時の想定に近いコンテンツが作成できます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html b/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html deleted file mode 100644 index df2f8d3625..0000000000 --- a/files/ja/web/compatibility_faq/no_checkbox_check_shown.html/index.html +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: チェックボックスのレ点が表示されない -slug: Web/Compatibility_FAQ/No_Checkbox_Check_Shown.html -tags: - - Compatibility - - Invisible element ---- -

概要

- -

　チェックボックスをタップし、チェックを入れる操作を行ってもレ点が表示されません。

- -

- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - チェックボックスの装飾をwebkit指定で行っている場合、Firefoxでは認識できないため、正しく表示が行えません。
    - または、Firefox用にlinear-gradient()関数を記述している場合は、引数の指定方法が-webkit-linear-gradient()関数と異なるため、注意が必要です。

    - - 
    　　input[type="checkbox"]:checked {
-	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
-	background-image: url(../contents/bg_08.png), linear-gradient(top, #00397b 0%, #01afeb 100%);
-　　}
    - -

     

    -
    2. -
- -

解決策

- -

　要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - -webkit-linear-gradient()関数の第一引数に「top」が指定されている時に、他ブラウザとの互換性を維持するためにlinear-gradient()関数を使用します。
    - その場合、第一引数には例のように「to top」を指定することで正しく表示されます。

    - - 
    　　input[type="checkbox"]:checked  {
-	background-image: url(../contents/bg_08.png), -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);
-	background-image: url(../contents/bg_08.png), linear-gradient(to top, #00397b 0%, #01afeb 100%);
-　　}
    -
    2. -
- -

メリット

- -

　・プロパティを正しく使用することで各ブラウザでの表示差異がなくなります。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html b/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html deleted file mode 100644 index e41d42f33d..0000000000 --- a/files/ja/web/compatibility_faq/no_decoreation_shown.html/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 枠のシャドウや角丸が抜けている -slug: Web/Compatibility_FAQ/No_Decoreation_Shown.html -tags: - - Compatibility - - Decoration ---- -

概要

- -

　枠のシャドウ(影付け装飾)や角丸(アイコンやボタンの角の丸み)が表示されません。

- -
-

-
- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - webkitブラウザ向けの記述がされている場合、この現象が発生します。
    - 例えば、以下のような場合です。

    - -
      -
    • -

      シャドウの場合

      - - 
      　　.hoge {
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-　　}
      -
      • -
    • -

      角丸の場合

      - - 
      　　.hoge {
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-　　}
      -
      • -
    -
    2. -
- -

解決策

- -

　要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - 他ブラウザで互換性を維持する為に、以下のようなbox-shadowプロパティ、border-radiusプロパティの記述を追加します。

    - -
      -
    • -

      シャドウの場合

      - - 
      　　.hoge {
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-	box-shadow: 0 1px 2px rgba(0,0,0,.4);
-　　}
      -
      • -
    • -

      角丸の場合

      - - 
      　　.hoge {
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	border-radius: 6px;
-　　}
      -
      • -
    -
    2. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・追記のみの対応のため改修が容易です。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_icon_shown.html/index.html b/files/ja/web/compatibility_faq/no_icon_shown.html/index.html deleted file mode 100644 index 5845f90804..0000000000 --- a/files/ja/web/compatibility_faq/no_icon_shown.html/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: アイコンが表示されない -slug: Web/Compatibility_FAQ/No_Icon_Shown.html -tags: - - Compatibility - - Invisible element ---- -

概要

- -

　一部のアイコンやバナーが表示されません。
- 　メニューのボタンや、検索実行ボタン、バナーなどがFirefoxのみで非表示となってしまいます。

- -
-

-
- -

要因

- -

　複数要因がありますが、代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - 描画やサイズ指定でwebkit指定を使用している場合は、Firefoxでは認識できないため、非表示となってしまう場合があります。
    - また、背景色をwebkit指定で行い、白抜きのアイコンを描画していた場合も背景色が認識できません。
    - 背景色が白で表示されると、白文字を指定した場合、同色となり非表示となるケースもあります。

    -  下記は、描画指定の例になります。 - - 
    　　top li{
-	font-size: 90%;
-	-webkit-border-radius: 3px;
-	border: 1px solid #e5e5e5;
-	background-color: #ffffff;
-	background: -webkit-gradient(linear, left bottom, left top, from(#f6f6f6), to(#ffffff));
-	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-	margin: 0 0 0 5px;
-	position: relative;
-	bottom: 15px;
-　　}
-
-　　.icn_search a:before {
-	content: "" "";
-	width: 7px;
-	height: 7px;
-	border: 2px solid #e4006f;
-	background: transparent;
-	-webkit-border-radius: 12px;
-　　}
-
-　　.icn_search a:after {
-	content: "" "";
-	left: 18px;
-	width: 2px;
-	height: 7px;
-	margin-top: 0;
-	-webkit-transform: rotate(-45deg);
-　　}
    - -

    下記は、サイズ指定の例になります。

    - - 
    　　single_02 {
-	background: url(http://common/icon.png) no-repeat 0 -625px;
-	-webkit-background-size: 26px auto;
-　　}
    - -

     

    -
    2. -
  2. -

    全体のレイアウトに誤りがある
    - 全体のレイアウトに誤りがあり、結果一部のバナー等が非表示となっている場合があります。
    - floatプロパティ等の配置指定に誤りがあり、結果、一部の要素が画面に収まりきれずに表示できていません。

    -
    3. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    ベンダープレフィックス
    - webkit指定の描画やサイズ指定を他ブラウザでも互換性を維持できるよう下記記載のものに修正することで正しく表示可能となります。

    - - - -

    詳しくは、「mobile版Firefox向けベンダープレフィックス対処方法まとめ」をご覧ください。

    - -

    下記は、描画指定の例になります。

    - - 
    　　navtop li {
-	font-size:90%;
-	border-radius: 3px;
-	border: 1px solid #e5e5e5;
-	background-color: #ffffff;
-	background: linear-gradient(to bottom, #f6f6f6 0%, #ffffff 100%);
-	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-	margin: 0 0 0 5px;
-	position: relative;
-	bottom: 15px;
-　　}
-
-　　.icn_search a:before {
-	content: "" "";
-	width: 7px;
-	height: 7px;
-	border: 2px solid #e4006f;
-	background: transparent;
-	border-radius: 12px;
-　　}
-
-　　.icn_search a:after {
-	content: "" "";
-	left: 18px;
-	width: 2px;
-	height: 7px;
-	margin-top: 0;
-	transform: rotate(-45deg);
-　　}
    - -

    下記は、サイズ指定の例になります。

    - - 
    　　single_02 {
-	background: url(http://common/icon.png) no-repeat 0 -625px;
-	-webkit-background-size: 26px auto;
-	background-size: 26px auto;
-　　}
    - -

     

    -
    2. -
  2. -

    全体のレイアウトに誤りがある
    - 表示されていない部分のみが問題ではない場合もありますので、ページ全体のレイアウトを見直し、部品の一つ一つが想定の位置に正しく配置されていることを確認してください。

    -
    3. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。
- 　・全体のレイアウトを見直すことにより、その後の変更修正も容易になります。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/no_wrap.html/index.html b/files/ja/web/compatibility_faq/no_wrap.html/index.html deleted file mode 100644 index c36f167bfe..0000000000 --- a/files/ja/web/compatibility_faq/no_wrap.html/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 画面外に不要な空白が発生する -slug: Web/Compatibility_FAQ/No_Wrap.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　一部のコンテンツが画面の右側にはみ出して表示されることにより、はみ出していないコンテンツの右側に空白が出来てしまう場合があります。
- 　その場合、横スクロールが行えない想定のモバイル向けwebページで横スクロールが可能となってしまいます。

- -
-
表示画面
- -

-
- -

 

- -

要因

- -

　複数要因がありますが、代表例として以下があります。

- -
    -
  1. -

    テーブルの列幅指定がされていない
    - テーブルの列幅が指定されていないため、一部要素が画面右側に流れ出してしまっています。
    - よって、画面に表示されていない部分を表示するため、横スクロールが可能となり、要素が流れ出していない部分に空白ができています。

    - -

    なお、要素が流れ出さないため、テーブルの列幅は画面サイズに合わせて指定する必要があります。
    - 指定されていない理由としては、そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性があります。

    -
    2. -
  2. -

    アイテムの横幅指定が誤っている
    - アイテムの横幅指定が画面横幅を超えて指定されているため、その他の要素の右側に空白ができています。
    - アイテムの横幅指定は、widthプロパティの指定方法または値の誤り、アイテムを表示しているブロックの指定の誤り等があります。

    - -

    下記の指定方法は、max-widthプロパティ等で、横画面切替表示時の横幅で指定されてしまうため、縦画面に対応されなくなってしまう例になります。
    - その他に、テーブル同様そもそも指定を行っていないか、もしくは表示するブラウザに対応していないタグを使用している可能性もあります。

    - - - 
    　　img {
-	max-width: 100%;
-	height: auto;
-	vertical-align: middle;
-	border: 0px none;
-　　}
    - -

    なお、ブロックの指定誤りとしては、様々ありますが、その他の表示しているアイテムの幅も考慮した上で、px指定または%指定する必要があります。

    - -

     

    -
    3. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    テーブルの列幅指定がされていない
    - 画面全体に table-layout: fixed; を指定します。
    - この指定により、テーブルの列幅が画面に合わされますので、画面右側の空白はなくなります。

    - - - 
    　　html, body, div, span... {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	outline: 0;
-	vertical-align: top;
-	table-layout: fixed;
-　　}
    - -

     

    - -

    また、テーブルの幅指定を display: table; で行っている場合、Firefoxでは認識できません。
    - 他ブラウザ互換のために display: inline-block; を追記することで、画面幅に指定することができます。

    - - - 
    　　#navigation ul {
-	display: table;
-	display: inline-block;
-	width: 99.9%;
-　　}
    - -

     

    -
    2. -
  2. -

    アイテムの横幅指定が誤っている
    - max-width: 100%; で指定されている場合は、横画面表示時のサイズで表示されてしまうため、 width: 100%; に修正することで縦画面表示時のサイズにも対応できます。

    - - - 
    　　img {
-	width: 100%;
-	height: auto;
-	vertical-align: middle;
-	border: 0px none;
-　　}
    - -

     

    - -

    display:-moz-box; 等、mobile版ブラウザで対応されていないタグを使用している場合や、そもそも指定がない場合は、display: inline-block; に修正することで指定できます。

    - - - 
    　　box li {
-	width: 100%;
-	display: box;
-	display: inline-block;
-　　}
    - -

     

    -
    3. -
- -

メリット

- -

　・画面サイズに列幅を合わせることにより、様々な画面サイズのデバイスに対応可能となります。
- 　・また、アイテム一つ一つの幅を正しく指定することで、他のコンテンツの表示崩れ等の併発を防ぐことができます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html b/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html deleted file mode 100644 index d6ccdc4655..0000000000 --- a/files/ja/web/compatibility_faq/overwrapped_icon.html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: アイコンが隣接する他のアイコンと重なってしまう -slug: Web/Compatibility_FAQ/Overwrapped_Icon.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　アイコンが隣接する他のアイコンと重なってしまい、正しく表示できません。
- 　隣のアイコンと重なっている部分が、欠けてしまったり、隣のアイコンの上に表示されてしまう場合があります。

- -
-
表示画面
- -

 

-
- -

要因

- -

　要因の代表例として以下があります。

- -
    -
  1. -

    アイコンの表示領域が足りていない
    - アイコン内の数値が変動する(桁数が変わる)場合は、最大桁数が考慮されていないと、桁数によっては隣のアイコンと被ってしまうことがあります。
    - 表示領域をpx指定していると、他のアイコンが押し出される等の問題は発生しませんが、指定しているアイコン自身の表示欠け等が発生します。

    - - - 
    　　.icon {width: 100px !important;}
    - -

     

    -
    2. -
- -

解決策

- -

　解決策の代表例として以下があります。

- -
    -
  1. -

    アイコンの表示領域が足りていない
    - アイコン内の数値の最大桁数を考慮し、表示領域の横幅を再設定することで正しく表示されます。
    - その時に、全体の横幅が画面サイズを超えて指定してしまうと、横並びになっていたアイコンが折り返されてしまうことがあるので、全体の横幅に注意し、表示領域の再設定を行ってください。

    - - 
    　　.icon {width: 120px !important;}
    - -

    また、widthプロパティを「auto」で指定し、数値の変動に合わせ、表示領域も変動するように指定する方法もよいです。
    - ただし、「auto」で指定した場合は、他のアイコンが折り返される可能性があるので、他のアイコンをmarginプロパティ等で表示位置を調整する必要があります。

    - - 
    　　.icon {width: auto;}
    - -

     

    -
    2. -
- -

メリット

- -

　・px指定した場合は、少ない修正で横幅の変動するアイコンに対応できます。
- 　・「auto」で指定した場合は、他のアイコンの表示位置指定を全体的に見直す必要がありますが、桁数の少ない場合と多い場合で、それぞれ合った表示を行うことが可能となります。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html b/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html deleted file mode 100644 index 4e8a4bd9c5..0000000000 --- a/files/ja/web/compatibility_faq/overwrapped_navigation.html/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: ナビゲーションメニューが他のアイコンと重なって表示されたり、画面からはみ出たりしてしまう -slug: Web/Compatibility_FAQ/Overwrapped_Navigation.html -tags: - - Compatibility - - Layout ---- -

概要

- -

　他のブラウザで正しく表示されているナビゲーションメニューが、Firefoxで表示すると大幅に崩れてしまう場合があります。
- 　一列に並ぶべきアイコンが画面横幅に収まっておらず、他のアイコンと重なって表示されてしまい、周辺のアイコンが全体的に配置崩れを起こしてしまいます。
-
-
- 　
-  

- -

要因

- -

　要因の代表例としては以下があります。

- -
    -
  1. -

    テーブルの列幅が指定されていない
    - display: table; でテーブルの列幅を指定している場合、Firefoxでは認識できていません。
    - 列幅を指定していないことで、アイコンが画面の横幅に収まらず、配置崩れを起こしてしまいます。

    - - 
    　　navigation ul {
-	display: table;
-	width: 99.9%;
-　　}
    - -

    また、display: -moz-box; が指定されている場合も、mobile版Firefoxでは認識できませんので、同様の現象が発生します。

    - - 
    　　.go_contents_btn {
-	display: -webkit-box !important;
-	display: -moz-box !important;
-	-webkit-box-pack: center !important;
-	-moz-box-pack: center !important;
-	width: 100%;
-　　}
    -
    2. -
- -

解決策

- -

　解決策の代表例として以下があります。

- -
    -
  1. -

    テーブルの列幅が指定されていない
    - Firefoxでは、display: table; の指定(mobile版Firefoxでは「-moz-box」も含む)は動作しないため、テーブルの列幅の指定にdisplay: inline-block; やdisplay: flex; を追記します。

    - -

    display: inline-block; の場合

    - - 
    　　navigation ul{
-	display: table;
-	display: inline-block;
-	width: 99.9%;
-　　}
    - -

    また、親要素をflex設定にした場合、自動的に子要素はflexアイテムになります。flexアイテム用に横方向寄せを設定しているプロパティをjustify-contentプロパティに変更します。
    - 縦方向寄せを設定しているプロパティもalign-itemsプロパティに変更します。

    - -

    display: flex; の場合

    - - 
    　　.go_contents_btn {
-	display: -webkit-box !important;
-	display: -moz-box !important;
-	display: flex !important;
-	-webkit-box-pack: center !important;
-	justify-content: center !important;
-	width: 100%;
-　　}
    - -

     

    -
    2. -
- -

メリット

- -

　・少ない修正で他ブラウザとの互換性が取れます。

- -

戻る

diff --git a/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html b/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html deleted file mode 100644 index 4285cff266..0000000000 --- a/files/ja/web/compatibility_faq/tips_default_style_difference.html/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: ブラウザごとの表示の違い(User-Agent-Stylesheetによる表示差異) -slug: Web/Compatibility_FAQ/Tips_Default_Style_Difference.html -tags: - - Compatibility - - StyleSheet ---- -

概要

- -

　ブラウザ毎で独自のスタイルシートを持っており、使用するタグによっては、ブラウザ毎で表示が異なる場合があります。
- 　多少デザインが異なる程度の為、ユーザー観点や操作上の問題はない場合が多いですが、代表的な例を紹介します。

- -

例

- -
    -
  1. -

    デフォルトのフォントが異なる
    - ブラウザ毎でデフォルトのフォントが異なる場合があります。font-styleプロパティを明示的に指定すると統一できますが、font-style: normal; で指定した場合は、表示が多少異なります。
    - 部分的に細かいpx指定をしていると、稀にレイアウトの崩れを起こすことがありますので、その場合は、明示的に指定を行う必要があります。

    - - 
    　　body {
-	margin: 0;
-	padding: 0;
-	font-style: normal;
-　　}
    - -

    -
    2. -
  2. -

    テキストの太さが異なる
    - 見出しのテキストで使用するh要素ですが、同様の要素(h2要素など)で指定しても、ブラウザによっては僅かな差異が発生する場合があります。

    - -

    -
    3. -
  3. -

    チェックボックスのデザインが異なる
    - チェックボックスの表示がブラウザ間で異なる場合があります。
    - チェックボックスには、ブラウザ毎で独自のCSSが適応されるため、多少デザインが異なります。
    - 統一させる為には、デフォルトの装飾をリセットし、別途スタイル指定を行う必要があります。

    - -

    注意：2014/12現在、mobile版Firefoxでは、ブラウザ側のスタイルをリセットするappearanceプロパティが使用できない不具合があります。

    - -

    -
    4. -
  4. -

    プルダウンメニューのデザインが異なる
    - プルダウンメニューに関しても、チェックボックスのデザインと同様に、ブラウザ毎でデザインが異なる場合があります。

    - -

    -
    5. -
- -

ブラウザ毎で独自のCSSが適応されていますが、下記のような方法でデザインを指定することで、統一することも可能です。

- -
　　.ipt_select_01 {
-	width: 100%;
-	color: #000;
-	background-color: ButtonFase;
-	border-color: #A9A9A9;
-　　}
- -

戻る

diff --git a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html b/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html deleted file mode 100644 index cb1475537f..0000000000 --- a/files/ja/web/compatibility_faq/tips_vendor_prefix.html/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: mobile版Firefox向けベンダープレフィックス対処方法まとめ -slug: Web/Compatibility_FAQ/Tips_Vendor_Prefix.html -tags: - - Compatibility - - Vendor prefix ---- -

概要

- -

　ベンダープレフィックス(接頭辞)付きのプロパティや値は、Firefox、Chrome等のブラウザ毎に実装が異なり、またPC版とmobile版でも異なるため、細かな配慮が必要です。
- 　例えば、PC版Firefoxでは有効な接頭辞-moz-がmobile版Firefoxではサポートされていません。
- 　本稿では、mobile版Chromeと同Firefoxとの実装方法の比較、Firefoxにて適用されないベンダープレフィックス付きプロパティの一覧、その書き換えの方法等の情報をまとめます。

- -

　以下、PC版Firefox、mobile版Chrome向けの記述とmobile版Firefox向けの記述を比較した表です。

- -
-

Mozilla CSS 拡張仕様 (-moz-)

- -

詳細は、Mozilla 独自の CSS 拡張 をご覧ください。

- -

＜表1 : -moz-指定された値とmobile版Firefox向け対処法＞

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
プロパティ・値意味PC版Firefox向け記述例mobile版Firefox向け対処法
-moz-box要素をボックス配置するdisplay: -moz-box;display: inline-block;
-moz-border-radius枠線の角丸を設定する-moz-border-radius: 10px;border-radius: 10px;
-moz-linear-gradientグラデーション装飾を付与するbackground: -moz-linear-gradient(top, #F0F0F0 0%, #ccc);background: linear-gradient(to top, #F0F0F0 0%, #ccc);
- -
-

Webkit CSS 拡張仕様 (-webkit-)

- -

詳細は、WebKit 独自の CSS 拡張 をご覧ください。

- -

＜表2 : -webkit-指定された値とmobile版Firefox向け対処法＞

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
プロパティ・値意味mobile版Chrome向け記述例mobile版Firefox向け対処法
-webkit-appearanceブラウザデフォルトの装飾設定を適用する-webkit-appearance: none;代替指定が存在しないため、明示的にスタイル指定する
-webkit-background-size背景サイズを指定する-webkit-background-size: 26px auto;background-size: 26px auto;
-webkit-border-radius枠線の角丸を設定する-webkit-border-radius: 5px;border-radius: 5px;
-webkit-box-shadow領域のシャドーを設定する-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-sizing領域のサイズを設定する-webkit-box-sizing: border-box;box-sizing: border-box;
-webkit-gradientグラデーション装飾を付与するbackground: -webkit-gradient(linear, left bottom, left top, from(#ffffff), to(#f6f6f6));background: linear-gradient(to bottom, #ffffff, #f6f6f6);
-webkit-linear-gradientグラデーション装飾を付与するbackground: -webkit-linear-gradient(top, #00397b 0%, #01afeb 100%);background: linear-gradient(to top, #00397b 0%, #01afeb 100%);
-webkit-transform要素を移動、回転、スケーリング、傾斜させる-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
-webkit-transition-durationトランジションによるアニメーションが完了するまでの所要時間を指定する-webkit-transition-duration: 100ms;JavaScriptで実装する
-webkit-transition-propertyトランジションさせるプロパティを指定する-webkit-transition-property: opacity;JavaScriptで実装する
-webkit-transition-timing-functionトランジション実行中の値の変更速度を操作する-webkit-transition-timing-function: ease-in-out;JavaScriptで実装する
- -
-

考察

- -

　・ベンダープレフィックスの使用は互換性を損なうため、Web標準であるCSS3での記述に統一すべきです。
- 　　そうすることで、一つのコンテンツ記述でマルチ・ブラウザ対応が可能となります。

- -

　・appearanceプロパティ、transitionプロパティ等(アニメーション系のCSS指定)は代替要素がないため、JavaScriptで実装し直す方が容易で確実と考えられます。

- -

注意：backgrouond: gradient; 系統のスタイル指定については、たびたび構文が変更されており、特に注意が必要です。
- 　　　以下のように、PC版ChromeとPC版Firefoxを比較してみても、目まぐるしく仕様変更されています。

- -


- ＜表3 : ブラウザとバージョンごとに異なるgradientプロパティの構文＞

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ブラウザ/バージョン構文
Chrome/3-9-webkit-gradient();
Chrome/10-25-webkit-linear-gradient();
Chrome/26以降linear-gradient();
Firefox/3.6-15-moz-linear-gradient();
Firefox/16(2012.10リリース)以降linear-gradient();
- -

　mobile版FirefoxはCSS3準拠のため、MDN等のリファレンスを参照し、適正な設定を行うことが必要です。

- -

参考

- -

　・CSS グラデーションの利用 - Web developer guide | MDN
- 　　https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_gradients

- -

戻る

diff --git a/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html b/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html deleted file mode 100644 index 2df04e427d..0000000000 --- a/files/ja/web/compatibility_faq/underline_color_diffrence.html/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 下線の色が相違している -slug: Web/Compatibility_FAQ/Underline_Color_Diffrence.html -tags: - - Compatibility - - Decoration ---- -

概要

- -

　mobile版Firefoxと他ブラウザで、文字列の下に引かれる下線の色が相違します。

- -
-

-
- -

要因

- -

　以下のような要因が考えられます。

- -
    -
  1. -

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合
    - text-decoration-color, text-decoration-line, text-decoration-styleに相当するプロパティが他ブラウザには存在しないため、表示の差異が発生します。

    - - 
    　　インライン {
-	text-decoration: underline;
-	-moz-text-decoration-color: -moz-use-text-color;
-	-moz-text-decoration-line: underline;
-	-moz-text-decoration-style: solid;
-　　}
    -
    2. -
  2. -

    色指定の方法に間違えている場合
    - 例えば、以下のように記述されていると、下線の色は文字色となります。文字色の指定方法が間違っていた場合、下線の色が期待通りに設定されなくなります。
    - なお、text-decoration-colorは非推奨APIですのでCSS3準拠に書き替えが必要です。

    - - 
    　　text-decoration-color: -moz-use-text-color;
    -
    3. -
- -

解決策

- -

　各要因の解決策の代表例として以下があります。

- -
    -
  1. -

    mobile版Firefoxで適用されるプロパティが他ブラウザで反映されない場合

    - -

    例えば、Chromeでは下線色は文字色と等しくなり、個別設定ができません。
    - そのため、コンテンツタグの記述はFirefoxと他ブラウザとの見た目の統一が図れるよう、どのブラウザでもサポートしている装飾のみを用いる等の対処が必要です。

    - - 
    　　インライン {
-	text-decoration: underline;
-	-moz-text-decoration-color: -moz-use-text-color;
-	-moz-text-decoration-line: underline;
-	-moz-text-decoration-style: solid;
-　　}
    -
    2. -
  2. -

    色指定の方法に間違えている場合
    - text-decoration-color: -moz-use-text-color; を border-color: currentColor; に書き換えます。
    - なお、記載を修正してもまだ下線色が期待通りにならない場合は、フォント色の設定状態を確認することをお勧めします。

    - - 
    　　インライン {
-	text-decoration: underline;
-	border-color: currentColor;
-	-moz-text-decoration-line: underline;
-	-moz-text-decoration-style: solid;
-　　}
    -
    3. -
- -

メリット

- -

　・他のブラウザでも互換性を維持することができます。

- -

戻る

diff --git a/files/ja/web/css/-moz-box-ordinal-group/index.html b/files/ja/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 147bdbd9b4..0000000000 --- a/files/ja/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -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/web/css/-ms-high-contrast/index.html b/files/ja/web/css/-ms-high-contrast/index.html deleted file mode 100644 index f98c01bc68..0000000000 --- a/files/ja/web/css/-ms-high-contrast/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: '-ms-high-contrast' -slug: Web/CSS/-ms-high-contrast -tags: - - '@media' - - CSS - - Microsoft 拡張 - - Reference - - メディア特性 - - 標準外 -translation_of: Web/CSS/@media/-ms-high-contrast ---- -
{{CSSRef}}{{Non-standard_header}}
- -

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

- -

高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。

- -

このメディア特性はビットマップメディア型に適用されます。 min/max 接頭辞は受け付けません。

- -

構文

- -

-ms-high-contrast メディア特性は以下の値のうちの一つで指定します。

- -

値

- -
-
none {{Deprecated_Inline}}
-
...
- Microsoft Edge 18 で対応がなくなりました。
-
active
-
-

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

-
-
black-on-white
-
-

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

-
-
white-on-black
-
-

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

-
-
- -

形式文法

- -
{{CSSSyntax}}
- -

例

- -

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

- -
@media screen and (-ms-high-contrast: active) {
-  /* すべての高コントラストの整形規則 */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
- -

アクセシビリティの考慮事項

- -

テーマ

- -

高コントラストモードのテーマカラーは、非推奨となったの CSS2 システムカラーの限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。

- -
    -
  • windowText: テキストコンテンツの色を制御します。
    • -
  • highlightText: 選択されたテキストの色を制御します。
    • -
  • highlight: 選択されたテキストの背景色を制御します。
    • -
  • buttonFace: {{HTMLElement("button")}} 要素のテキストの色を制御します。
    • -
  • window: 背景色を制御します。
    • -
  • {{HTMLElement("a")}} 要素でリンクの色を制御します。
    • -
- -

高コントラストモードのテーマは動的なので、他の CSS カラー値の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。

- -

コンテンツ

- -

可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。

- -

仕様書

- -

何れかの仕様書の一部ではありません。

- -

注釈

- -

Microsoft Edge 18 で、 -ms-high-contrast: none は対応がなくなりました。 Microsoft Edge バージョン18以降では、代わりに forced-colors メディア特性が使用される予定ですが、 forced-colors メディア特性の仕様は現在も作業中です。

- -

-ms-high-contrast メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。

- -

-ms-high-contrast メディア特性は Windows 8 で導入されました。

diff --git a/files/ja/web/css/@media/-ms-high-contrast/index.html b/files/ja/web/css/@media/-ms-high-contrast/index.html new file mode 100644 index 0000000000..f98c01bc68 --- /dev/null +++ b/files/ja/web/css/@media/-ms-high-contrast/index.html @@ -0,0 +1,94 @@ +--- +title: '-ms-high-contrast' +slug: Web/CSS/-ms-high-contrast +tags: + - '@media' + - CSS + - Microsoft 拡張 + - Reference + - メディア特性 + - 標準外 +translation_of: Web/CSS/@media/-ms-high-contrast +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の -ms-high-contrast メディア特性は Microsoft 拡張で、アプリケーションが高コントラストモードで表示されているかどうか、どの配色で表示されているかを記述します。

+ +

高コントラストモードとは、前景色と背景色をユーザーが指定したテーマに動的に置き換えることで、コンテンツを可能な限り見やすくすることを優先した表示モードです。ウェブコンテンツの場合、テーマカラーはコンテンツタイプに対応付けられます。

+ +

このメディア特性はビットマップメディア型に適用されます。 min/max 接頭辞は受け付けません。

+ +

構文

+ +

-ms-high-contrast メディア特性は以下の値のうちの一つで指定します。

+ +

値

+ +
+
none {{Deprecated_Inline}}
+
...
+ Microsoft Edge 18 で対応がなくなりました。
+
active
+
+

配下の整形規則は、システムが任意の配色の高コントラストモードの時に適用されることを示します。

+
+
black-on-white
+
+

配下の整形規則は、システムが白地に黒の高コントラストモードの時に適用されることを示します。

+
+
white-on-black
+
+

配下の整形規則は、システムが黒地に白の高コントラストモードの時に適用されることを示します。

+
+
+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

以下の宣言は、それぞれ任意の配色、白地に黒、黒地に白の高コントラストモードで表示されているアプリケーションに一致します。

+ +
@media screen and (-ms-high-contrast: active) {
+  /* すべての高コントラストの整形規則 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+ +

アクセシビリティの考慮事項

+ +

テーマ

+ +

高コントラストモードのテーマカラーは、非推奨となったの CSS2 システムカラーの限られたサブセットに由来しています。利用可能な色のキーワードは以下の通りです。

+ +
    +
  • windowText: テキストコンテンツの色を制御します。
    • +
  • highlightText: 選択されたテキストの色を制御します。
    • +
  • highlight: 選択されたテキストの背景色を制御します。
    • +
  • buttonFace: {{HTMLElement("button")}} 要素のテキストの色を制御します。
    • +
  • window: 背景色を制御します。
    • +
  • {{HTMLElement("a")}} 要素でリンクの色を制御します。
    • +
+ +

高コントラストモードのテーマは動的なので、他の CSS カラー値の代わりにこれらのカラーキーワードを使用してください。これにより、コンテンツが常に認識できるようになります。

+ +

コンテンツ

+ +

可能な限り、 CSS2 システムカラーのキーワードを使用してコンテンツを変更するよりも、 HTML マークアップを更新することをお勧めします。これは、コンテンツをより予測しやすくするのに役立ちます。

+ +

仕様書

+ +

何れかの仕様書の一部ではありません。

+ +

注釈

+ +

Microsoft Edge 18 で、 -ms-high-contrast: none は対応がなくなりました。 Microsoft Edge バージョン18以降では、代わりに forced-colors メディア特性が使用される予定ですが、 forced-colors メディア特性の仕様は現在も作業中です。

+ +

-ms-high-contrast メディア特性は、 {{CSSxRef("-ms-high-contrast-adjust")}} プロパティと共に動作します。

+ +

-ms-high-contrast メディア特性は Windows 8 で導入されました。

diff --git a/files/ja/web/css/@media/aural/index.html b/files/ja/web/css/@media/aural/index.html new file mode 100644 index 0000000000..ac66215e3c --- /dev/null +++ b/files/ja/web/css/@media/aural/index.html @@ -0,0 +1,41 @@ +--- +title: aural +slug: Web/CSS/aural +tags: + - CSS + - リファレンス + - 非推奨 +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}
+ +

CSS の aural メディア種別は、音声出力の能力を持った機器に使用されます。

+ +
+

メモ: このメディア種別は speech に置き換えられ、非推奨になりました。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
CSS Level 2非推奨初回定義
+ +

関連情報

+ + diff --git a/files/ja/web/css/@media/index/index.html b/files/ja/web/css/@media/index/index.html deleted file mode 100644 index b8b8d56198..0000000000 --- a/files/ja/web/css/@media/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: 索引 -slug: Web/CSS/@media/Index -tags: - - '@media' - - CSS - - 索引 -translation_of: Web/CSS/@media/Index ---- -

{{CSSRef}}

- -

{{Index("/ja/docs/Web/CSS/@media")}}

diff --git a/files/ja/web/css/@viewport/height/index.html b/files/ja/web/css/@viewport/height/index.html deleted file mode 100644 index 38f093896b..0000000000 --- a/files/ja/web/css/@viewport/height/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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")}}

- -

関連情報

- -
    -
  • {{cssxref("@viewport")}}
    • -
diff --git a/files/ja/web/css/@viewport/max-height/index.html b/files/ja/web/css/@viewport/max-height/index.html deleted file mode 100644 index 0e9f9079f0..0000000000 --- a/files/ja/web/css/@viewport/max-height/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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/web/css/@viewport/max-zoom/index.html b/files/ja/web/css/@viewport/max-zoom/index.html deleted file mode 100644 index 483e5c214f..0000000000 --- a/files/ja/web/css/@viewport/max-zoom/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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

- -
    -
  • {{cssxref("@viewport")}}
    • -
diff --git a/files/ja/web/css/@viewport/min-zoom/index.html b/files/ja/web/css/@viewport/min-zoom/index.html deleted file mode 100644 index 01b0ae54b2..0000000000 --- a/files/ja/web/css/@viewport/min-zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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/web/css/@viewport/viewport-fit/index.html b/files/ja/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 97814ca702..0000000000 --- a/files/ja/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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")}}

- -

関連情報

- -
    -
  • {{CSSxRef("env", "env()")}}
    • -
diff --git a/files/ja/web/css/@viewport/zoom/index.html b/files/ja/web/css/@viewport/zoom/index.html deleted file mode 100644 index f05447a501..0000000000 --- a/files/ja/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -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")}}

- -

関連情報

- -
    -
  • {{cssxref("@viewport")}}
    • -
diff --git a/files/ja/web/css/_colon_-moz-alt-text/index.html b/files/ja/web/css/_colon_-moz-alt-text/index.html deleted file mode 100644 index be215a2997..0000000000 --- a/files/ja/web/css/_colon_-moz-alt-text/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: ':-moz-alt-text' -slug: 'Web/CSS/:-moz-alt-text' -tags: - - CSS - - CSS Reference - - Non-standard ---- -

{{Non-standard_header}}{{ CSSRef() }}{{ Fx_minversion_header(3) }}

- -

概要

- -

:-moz-alt-text は読み込まれなかった画像のための代替テキストを提供する要素にマッチします。

- -

このセレクタは主にテーマ開発者によって使用されるものです。

- -

Bugzilla

- -

{{ Bug(11011) }}

diff --git a/files/ja/web/css/_colon_-moz-placeholder/index.html b/files/ja/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index f9e7367a09..0000000000 --- a/files/ja/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -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") }} のリリース時に、全く異なる目的 から間違って作られていました。
- -

参考

- -
    -
  • Forms in HTML5
    • -
  • {{ HTMLElement("input") }}
    • -
  • {{ HTMLElement("textarea") }}
    • -
diff --git a/files/ja/web/css/_colon_-webkit-autofill/index.html b/files/ja/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 2e8ba6c793..0000000000 --- a/files/ja/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - Non-standard - - Reference - - 擬似クラス -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

CSS の :-webkit-autofill 疑似クラスは、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。

- -

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。

- -

仕様書

- -

どの仕様書でも定義されていません。

- -

ブラウザーの対応

- - - -

{{Compat("css.selectors.-webkit-autofill")}}

- -

関連情報

- - diff --git a/files/ja/web/css/_colon_autofill/index.html b/files/ja/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..2e8ba6c793 --- /dev/null +++ b/files/ja/web/css/_colon_autofill/index.html @@ -0,0 +1,34 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - Non-standard + - Reference + - 擬似クラス +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

CSS の :-webkit-autofill 疑似クラスは、 {{HTMLElement("input")}} 要素の値がブラウザーによって自動補完されている時に一致します。

+ +

メモ: 多くのブラウザーのユーザーエージェントスタイルシートでは、 :-webkit-autofill スタイル定義に !important を使用しており、 JavaScript によるハックで解決しない限り、ウェブページから上書きすることができません。

+ +

仕様書

+ +

どの仕様書でも定義されていません。

+ +

ブラウザーの対応

+ + + +

{{Compat("css.selectors.-webkit-autofill")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/aural/index.html b/files/ja/web/css/aural/index.html deleted file mode 100644 index ac66215e3c..0000000000 --- a/files/ja/web/css/aural/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: aural -slug: Web/CSS/aural -tags: - - CSS - - リファレンス - - 非推奨 -translation_of: Web/CSS/@media/aural ---- -
{{CSSRef}} {{deprecated_header}} {{obsolete_header("6.0")}}
- -

CSS の aural メディア種別は、音声出力の能力を持った機器に使用されます。

- -
-

メモ: このメディア種別は speech に置き換えられ、非推奨になりました。

-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
CSS Level 2非推奨初回定義
- -

関連情報

- - diff --git a/files/ja/web/css/auto/index.html b/files/ja/web/css/auto/index.html deleted file mode 100644 index cae634e45a..0000000000 --- a/files/ja/web/css/auto/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - CSS Reference -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -
- {{CSSRef}}
-

概要

-

ユーザエージェントによって自動的に計算される値です。その具体的な効果は auto が適用されたプロパティ毎にそれぞれ異なります。

-

auto 値の使用が可能なプロパティ

-
    -
  • {{Cssxref("overflow")}}
    • -
  • {{Cssxref("overflow-x")}}
    • -
  • {{Cssxref("overflow-y")}}
    • -
  • {{Cssxref("cursor")}}
    • -
  • {{Cssxref("width")}}
    • -
  • {{Cssxref("marker-offset")}}
    • -
  • {{Cssxref("margin")}}
    • -
  • margin-* (left|bottom|top|right|start|end)
    • -
  • {{Cssxref("bottom")}}
    • -
  • {{Cssxref("left")}}
    • -
  • {{Cssxref("table-layout")}}
    • -
  • {{Cssxref("z-index")}}
    • -
  • {{Cssxref("column-width")}}
    • -
diff --git a/files/ja/web/css/common_css_questions/index.html b/files/ja/web/css/common_css_questions/index.html deleted file mode 100644 index 4307266923..0000000000 --- a/files/ja/web/css/common_css_questions/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: CSS の一般的な質問 -slug: Web/CSS/Common_CSS_Questions -tags: - - CSS - - FAQ - - Web - - questions - - ガイド - - 例 -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。

- -

なぜ CSS が妥当なのに正しくレンダリングされないのか？

- -

ブラウザーは DOCTYPE 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい DOCTYPE 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

- -

現代のブラウザーは、2つの主要なレンダリングモードを備えています。

- -
    -
  • Quirks Mode: 後方互換モードとも呼ばれます。古いウェブページが制作者の意図したとおりにレンダリングされるようにして、古いブラウザーが用いていた非標準のレンダリング規則に従います。 DOCTYPE 宣言が不完全、不正確、あるいは存在しない、または 2001 年より前に一般的であった既知の DOCTYPE 宣言であるドキュメントは、 Quirks Mode でレンダリングされます。
    • -
  • Standards Mode: ブラウザーは W3C 標準へ厳密に従おうとします。新しい HTML ページは標準に準拠したブラウザー向けに設計されていると考えられるため、新しい DOCTYPE 宣言を持つページは Standards Mode でレンダリングされます。
    • -
- -

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードでありますAlmost Standards Mode があります。

- -

以下は Standards Mode または Almost Standards Mode になる DOCTYPE 宣言で、もっとも一般的に使用されるものの一覧です:

- -
<!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
-                   この doctype が推奨されます */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
- -

可能な限り、 HTML5 の doctype を使用するべきです。

- -

なぜ CSS が妥当なのにまったくレンダリングされないのか?

- -

以下のような可能性があります。

- -
    -
  • CSS ファイルへのパスが間違っている。
    • -
  • 適用されるためには、 CSS スタイルシートを MIME タイプ text/css で提供しなければなりません。ウェブサーバがこのタイプで提供していない場合、スタイルシートは適用されません。
    • -
- -

id と class の違いは何か?

- -

HTML の要素は、 id 属性と class 属性の片方または両方を持つことができます。 id 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 class 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の id または class 名に対してスタイルを設定できます。

- -
    -
  • ページ内のたくさんのブロックや要素にスタイルのルールを適用したい場合や、スタイルを適用したい要素が1つしかないものの、後で追加したい場合は、 class 指定によるスタイルを使用してください。
    • -
  • 適用されるスタイルのルールを1つの特定のブロックや要素に限定する必要がある場合は、 id 指定によるスタイルを使用してください。このスタイルは特定の id を持った特定の要素にのみ使用されます。
    • -
- -

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。

- -
    -
  • class を使用するとスタイルの用途が広げられるようになり、現在は特定のルールセットのスタイルを1つの要素にしか適用しなくても、後から追加したくなる可能性があります
    • -
  • class を使用すると、複数の要素のスタイルを設定できるため、id セレクタを使用する複数のルールで同じスタイル設定情報を書き出す必要がなくなり、より短いスタイルシートを作成できます。より短いスタイルシートはより高性能です
    • -
  • class セレクタは id セレクタよりも特異性が低いため、必要に応じてオーバーライドする方が簡単です
    • -
- -
-

注: 詳しくは Selectors もご覧ください。

-
- -

プロパティの既定値に戻すにはどうすればよいのか?

- -

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

- -
/* 見出しの既定の色は黒 */
-h1 { color: red; }
-h1 { color: black; }
- -

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

- -
/* 見出しの既定の色は黒 */
-h1 { color: red; }
-h1 { color: initial; }
- -

スタイルを他のスタイルから派生させるにはどうすればよいか?

- -

CSS では、あるスタイルが他の表現で定義されることを許可していません (Working Group のスタンスに関する、Eric Meyer 氏のコメントをご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 CSS 変数 が導入されました。

- -

ひとつの要素に複数のクラスを割り当てる方法は?

- -

HTML の要素は class 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。class 属性内のクラスの順序は関係がありません。

- -

なぜ私のスタイル規則は正しく動作しないのか?

- -

構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために DOM Inspector の CSS Style Rules ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。

- -

HTML 要素の階層

- -

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。

- -
.news { color: black; }
-.corpName { font-weight: bold; color: red; }
-
-<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
-<div class="news">
-   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
-</div>
-
- -

複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

- -

明示的に再定義されたスタイル規則

- -

CSS スタイルシートでは、順序こそが重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。

- -
#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  他の規則             */
-/*  他の規則             */
-/*  他の規則             */
-.stockSymbol { font-weight: normal; }
-
-<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。

- -

ショートハンドプロパティの使用

- -

ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。

- -
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序こそが重要であるためです。

- -
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana;  /* font-weight is now set to normal */
-}
-
- -

* セレクタの使用

- -

ワイルドカードセレクタ * はすべての要素を参照するものであり、特に注意して使用しなければなりません。

- -
body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</div>
-
- -

この例では、body * セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した font-weight: bold; は、body 内の全要素に適用した font-weight: normal; にオーバーライドされます。

- -

特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

- -

CSS の詳細度

- -

ある要素に複数の規則を適用すると、スタイルの詳細さに従って規則が選ばれます。インラインスタイル（HTML の style 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。

- -
div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
- -

セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは CSS 2.1 Specification chapter 6.4.3 でご覧いただけます。

- -

-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?

- -

これらのプロパティは接頭辞付きプロパティと呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

- -

本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの -webkit- 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが -webkit- プレフィックスエイリアスを実装し始めました。

- -

実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。

- -

作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：

- -
-ms-transform: rotate(90deg);
--webkit-transform: rotate(90deg);
-transform: rotate(90deg);
- -
-

メモ: 接頭辞付きプロパティの処理の詳細については、クロスブラウザテストモジュールの一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理を参照してください。

-
- -
-

メモ: Mozilla をプレフィックスとする CSS プロパティの詳細については、CSS の Mozilla 拡張ページを参照してください。

-
- -

z-index は位置指定へどのように関係するのか?

- -

z-index プロパティは、要素を積み重ねる順序を指定します。

- -

z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (position:absolute、position:relative、または  position:fixed) を持つ要素に対してのみ機能します。

- -
-

メモ: 詳細については、ポジショニング学習の記事、特に z-index の紹介セクションを参照してください。

-
diff --git a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 4c7327f6c1..0000000000 --- a/files/ja/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -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/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..dde72afbab --- /dev/null +++ b/files/ja/web/css/css_backgrounds_and_borders/resizing_background_images/index.html @@ -0,0 +1,143 @@ +--- +title: 背景画像の拡大縮小 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Scale + - Scaling + - Web + - dimensions + - height + - resize + - width +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{cssref}}
+ +

{{cssxref("background-size")}} は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

+ +

巨大な画像を並べて表示

+ +

巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 background-size に固定値の150ピクセルの値を使用すると、このようにすることができます。

+ +

HTML

+ +
<div class="tiledBackground">
+</div>
+ +

CSS

+ +
.tiledBackground {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: 150px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  color: pink;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}

+ +

画像の拡大縮小

+ +

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。

+ +
background-size: 300px 150px;
+
+ +

結果は以下のようになります。

+ +

引き伸ばされた新しい Firefox のロゴ

+ +

画像の拡大

+ +

一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。

+ +

拡大された MDN ロゴ

+ +
.square2 {
+  background-image: url(favicon.png);
+  background-size: 300px;
+  width: 300px;
+  height: 300px;
+  border: 2px solid;
+  text-shadow: white 0px 0px 2px;
+  font-size: 16px;
+}
+
+ +

見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。

+ +

特殊な値: "contain" と "cover"

+ +

{{cssxref("<length>")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは contain と cover という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

+ +

contain

+ +

contain の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

+ +

HTML

+ +
<div class="bgSizeContain">
+  <p>この要素の寸法を変更してみてください！</p>
+</div>
+ +

CSS

+ +
.bgSizeContain {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: contain;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

{{ EmbedLiveSample('contain', 250, 250) }}

+ +

cover

+ +

cover の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

+ +

HTML

+ +
<div class="bgSizeCover">
+  <p>この要素の寸法を変更してみてください！</p>
+</div>
+ +

CSS

+ +
.bgSizeCover {
+  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
+  background-size: cover;
+  width: 160px;
+  height: 160px;
+  border: 2px solid;
+  color: pink;
+  resize: both;
+  overflow: scroll;
+}
+ +

結果

+ +

{{ EmbedLiveSample('cover', 250, 250) }}

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html deleted file mode 100644 index dde72afbab..0000000000 --- a/files/ja/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: 背景画像の拡大縮小 -slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate - - Reference - - Scale - - Scaling - - Web - - dimensions - - height - - resize - - width -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images ---- -
{{cssref}}
- -

{{cssxref("background-size")}} は CSS のプロパティで、要素の背景画像の大きさを変更し、画像の幅や高さから見た完全な大きさの画像をタイル表示するという既定の動作を変更することができます。こうすることで、画像を必要に応じて拡大したり縮小したりすることができます。

- -

巨大な画像を並べて表示

- -

巨大な画像、2982x2808の Firefox のロゴ画像を想像してください。この画像を300x300ピクセルの要素の中に4枚並べて表示したいとします (いくつかの理由で恐ろしく悪いサイトデザインですが)。 background-size に固定値の150ピクセルの値を使用すると、このようにすることができます。

- -

HTML

- -
<div class="tiledBackground">
-</div>
- -

CSS

- -
.tiledBackground {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: 150px;
-  width: 300px;
-  height: 300px;
-  border: 2px solid;
-  color: pink;
-}
-
- -

結果

- -

{{EmbedLiveSample("Tiling_a_large_image", 340, 340)}}

- -

画像の拡大縮小

- -

以下のように、画像の水平と垂直の両方の寸法を指定することもできます。

- -
background-size: 300px 150px;
-
- -

結果は以下のようになります。

- -

引き伸ばされた新しい Firefox のロゴ

- -

画像の拡大

- -

一方で、背景の画像を拡大することができます。ここでは32x32ピクセルのファビコンを300x300ピクセルに拡大します。

- -

拡大された MDN ロゴ

- -
.square2 {
-  background-image: url(favicon.png);
-  background-size: 300px;
-  width: 300px;
-  height: 300px;
-  border: 2px solid;
-  text-shadow: white 0px 0px 2px;
-  font-size: 16px;
-}
-
- -

見てのとおり、 CSS は実際には基本的に同一で、画像ファイルの名前を保存してください。

- -

特殊な値: "contain" と "cover"

- -

{{cssxref("<length>")}} の値以外に、 CSS の {{ cssxref("background-size") }} プロパティは contain と cover という二つの特殊な寸法の値を提供しています。これらを見てみましょう。

- -

contain

- -

contain の値は、包含ボックスの寸法にかかわらず、背景画像をそれぞれの方向にできるだけ大きくなるように、ただしコンテナーの対応する辺の長さを超えないように拡大します。以下の例の大きさを変えて試してみてください。

- -

HTML

- -
<div class="bgSizeContain">
-  <p>この要素の寸法を変更してみてください！</p>
-</div>
- -

CSS

- -
.bgSizeContain {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: contain;
-  width: 160px;
-  height: 160px;
-  border: 2px solid;
-  color: pink;
-  resize: both;
-  overflow: scroll;
-}
- -

結果

- -

{{ EmbedLiveSample('contain', 250, 250) }}

- -

cover

- -

cover の値は、背景画像が対応する方向のコンテナーの寸法より大きいか同じであることを保証しつつ、できるだけ画像が小さくなるように拡大縮小することを指定します。以下の例の大きさを変えて試してみてください。

- -

HTML

- -
<div class="bgSizeCover">
-  <p>この要素の寸法を変更してみてください！</p>
-</div>
- -

CSS

- -
.bgSizeCover {
-  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
-  background-size: cover;
-  width: 160px;
-  height: 160px;
-  border: 2px solid;
-  color: pink;
-  resize: both;
-  overflow: scroll;
-}
- -

結果

- -

{{ EmbedLiveSample('cover', 250, 250) }}

- -

関連情報

- - diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index 42426babe4..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,368 +0,0 @@ ---- -title: クロスブラウザのフレックスボックスのミックスイン -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS - - CSS フレックスボックス - - ミックスイン - - リファレンス -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -
{{cssref}}
- -

この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。

- -

このセットは次のものを使用します。

- -
    -
  • 2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)
    • -
  • 最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)
    • -
- -

原文:

- - - -

参考文献:

- - - -
メモ: ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに 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/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html deleted file mode 100644 index 4458dddff2..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -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 種類の値のいずれかを使用するでしょう:

- -
    -
  • ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、flex: none を使用します。この値は 0 0 auto に展開されます。
    • -
  • 要素のサイズを明示したい場合は、flex: 0 0 size を使用します。例: flex 0 0 60px
    • -
  • 使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、flex: auto を使用します。この値は 1 1 auto に展開されます。
    • -
- -

もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。

- -

ページ内の中央に要素を配置する

- -

このような使い方でもっとも簡単な方法は、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/web/css/index/index.html b/files/ja/web/css/index/index.html deleted file mode 100644 index 20ef75d74b..0000000000 --- a/files/ja/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: CSS 関連ドキュメントの索引 -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -

{{Index("/ja/docs/Web/CSS")}}

diff --git a/files/ja/web/css/media/index.html b/files/ja/web/css/media/index.html deleted file mode 100644 index 5bf2140f1d..0000000000 --- a/files/ja/web/css/media/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Media -slug: Web/CSS/Media ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/web/css/media/visual/index.html b/files/ja/web/css/media/visual/index.html deleted file mode 100644 index 87ca6f864c..0000000000 --- a/files/ja/web/css/media/visual/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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/web/css/none/index.html b/files/ja/web/css/none/index.html deleted file mode 100644 index 562347725e..0000000000 --- a/files/ja/web/css/none/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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 プロパティ

-
    -
  • {{ Cssxref("float") }}
    - 要素はフロートしません。
    • -
  • {{ Cssxref("text-decoration") }}
    - 要素の装飾を行いません。
    • -
  • {{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}
    - 高さ・幅を特定値で制限しません。
    • -
  • {{ Cssxref("background-image") }}
    • -
  • {{ Cssxref("border-style") }}
    • -
  • {{ Cssxref("clear") }}
    • -
  • {{ Cssxref("content") }}
    • -
  • {{ Cssxref("counter-increment") }}
    • -
  • {{ Cssxref("counter-reset") }}
    • -
  • {{ Cssxref("display") }}
    • -
  • {{ Cssxref("list-style-type") }}
    • -
  • {{ Cssxref("quotes") }}
    • -
  • {{ Cssxref("text-transform") }}
    • -
diff --git a/files/ja/web/css/normal/index.html b/files/ja/web/css/normal/index.html deleted file mode 100644 index 4f1a3acf6b..0000000000 --- a/files/ja/web/css/normal/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -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 が指定可能です。

-
    -
  • {{Cssxref("font-variant")}}
    • -
  • {{Cssxref("letter-spacing")}}
    • -
  • {{Cssxref("white-space")}}
    • -
  • {{Cssxref("speak")}}
    • -
  • {{Cssxref("unicode-bidi")}}
    • -
  • {{Cssxref("line-height")}}
    • -
  • {{Cssxref("content")}}
    • -
diff --git a/files/ja/web/css/other_resources/index.html b/files/ja/web/css/other_resources/index.html deleted file mode 100644 index fe471649c2..0000000000 --- a/files/ja/web/css/other_resources/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -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/web/css/scaling_background_images/index.html b/files/ja/web/css/scaling_background_images/index.html deleted file mode 100644 index fa7ce58677..0000000000 --- a/files/ja/web/css/scaling_background_images/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -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;
-
- -

関連情報

- -
    -
  • {{cssxref("background-size")}}
    • -
  • {{cssxref("background")}}
    • -
diff --git a/files/ja/web/css/url/index.html b/files/ja/web/css/url/index.html deleted file mode 100644 index 2ca334be5a..0000000000 --- a/files/ja/web/css/url/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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")}}
- -

関連情報

- -
    -
  • {{cssxref("<gradient>")}}
    • -
  • {{cssxref("element()")}}
    • -
  • {{cssxref("_image","image()")}}
    • -
  • {{cssxref("image-set","image-set()")}}
    • -
  • {{cssxref("cross-fade")}}
    • -
diff --git a/files/ja/web/events/compositionstart/index.html b/files/ja/web/events/compositionstart/index.html deleted file mode 100644 index e02e6c35ef..0000000000 --- a/files/ja/web/events/compositionstart/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -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 では編集を始めた直後に発生します。
-
    -
  • インターフェース:{{ domxref('CompositionEvent') }}
    • -
  • 同期・非同期 :同期
    • -
  • バブルフェーズ :有り
    • -
  • ターゲット : {{ domxref('Element') }}
    • -
  • キャンセル : 可能 (ただし、下記のブラウザ固有の事情を参照)
    • -
  • 既定動作 : 無し
    • -
-

仕様書

-

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/web/guide/ajax/other_resources/index.html b/files/ja/web/guide/ajax/other_resources/index.html deleted file mode 100644 index 1475956d30..0000000000 --- a/files/ja/web/guide/ajax/other_resources/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: AJAX に関するその他の資料 -slug: Web/Guide/AJAX/Other_Resources -tags: - - AJAX -translation_of: Web/Guide/AJAX/Other_Resources ---- - diff --git a/files/ja/web/guide/api/gamepad/index.html b/files/ja/web/guide/api/gamepad/index.html deleted file mode 100644 index 1cd391adb2..0000000000 --- a/files/ja/web/guide/api/gamepad/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: ゲームパッド API の使用 -slug: Web/Guide/API/Gamepad -tags: - - API - - Advanced - - Gamepad API - - Games - - Guide -translation_of: Web/API/Gamepad_API/Using_the_Gamepad_API ---- -

{{DefaultAPISidebar("Gamepad API")}}

- -

HTML5 はリッチでインタラクティブなゲームを開発するために必要なコンポーネントを多く搭載しています。 <canvas> や WebGL、 <audio> に <video> などの技術は、今までネイティブコードを書く必要のあった機能をサポートできるほどに成長しました。ゲームパッド API は開発者とデザイナーにゲームパッドやコントローラーへのアクセスを提供するものです。

- -

ゲームパッドAPI は {{ domxref("Window") }} オブジェクトにゲームパッドとコントローラー (以下、ゲームパッド) の状態を読み取る新しいイベントをいくつか追加します。さらに、 {{ domxref("Gamepad") }} というゲームパッドの接続状態が得られるオブジェクトと {{ domxref("navigator.getGamepads") }} というゲームパッドの一覧を取得できるメソッドが追加されます。

- -

ゲームパッドの接続

- -

新しいゲームパッドが接続された時、アクティブなページは {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを受け取ります。ページ読み込み時にゲームパッドがすでに接続されている場合、ゲームパッドのボタンを押すなどの操作をした時に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントがアクティブなページに対して発生します。

- -
-

Firefox では、ページが見える状態でかつユーザーによるゲームパッドの操作を受け付けたときにのみ、ゲームパッドが利用可能になります。これによって、ユーザーを特定する Fingerprinting に利用されることを防止しています。一度一つのコントローラーが操作されれば、他のコントローラーも自動で接続され利用可能になります。

-
- -

以下のようにして {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} を使用します:

- -
window.addEventListener("gamepadconnected", function(e) {
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    e.gamepad.index, e.gamepad.id,
-    e.gamepad.buttons.length, e.gamepad.axes.length);
-});
-
- -

ゲームパッドはそれぞれ固有の ID を gamepad プロパティの中に持っています。

- -

ゲームパッドの切断

- -

ゲームパッドが切断されると、ゲームパッドが以前に受信したデータ(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )があると、2番目のイベント(例: {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} )がフォーカスされたウィンドウにディスパッチします:

- -
window.addEventListener("gamepaddisconnected", function(e) {
-  console.log("Gamepad disconnected from index %d: %s",
-    e.gamepad.index, e.gamepad.id);
-});
- -

ゲームパッドの {{domxref("Gamepad.index", "index")}} というプロパティは同じタイプの複数のコントローラーが使用されている場合であっても、システムに接続されたデバイスごとにユニークになります。 Index プロパティもまた {{ domxref("Navigator.getGamepads()") }} として戻される {{jsxref("Array")}} の index として機能します。

- -
var gamepads = {};
-
-function gamepadHandler(event, connecting) {
-  var gamepad = event.gamepad;
-  // Note:
-  // gamepad === navigator.getGamepads()[gamepad.index]
-
-  if (connecting) {
-    gamepads[gamepad.index] = gamepad;
-  } else {
-    delete gamepads[gamepad.index];
-  }
-}
-
-window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false);
-window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false);
-
- -

この前の例ではイベントが完了した後に gamepad プロパティがどのように保持できるかを示しています - 後でデバイスの状態照会のために使用する技術となります。

- -

Gamepad オブジェクトの問い合わせ

- -

ご覧のように、上述の gamepad イベントは {{ domxref("Gamepad") }} オブジェクトを返すイベントオブジェクト、上の gamepad のプロパティが含まれています。複数のゲームパッド(すなわち、そのID ) を一度に接続される可能性があるため、イベントを発生させたのはどのゲームパッドを決定するためにこれらを使用することができます。それへの参照を保持し、それがボタンや軸のいずれかの時点で押されているかを知るために照会するなど、{{ domxref("Gamepad") }} オブジェクトから様々なことを行うことができます。そうすることで、多くの場合、今回と次回のイベント発生とゲームパッドの状態を知っておく必要があり、ゲームやその他のインタラクティブな Web ページであることが望ましいです。

- -

このようなチェックを実行すると、開発者はゲームパッドやゲームパッドの状態に基づいて、現在のフレームのための意思決定を行うために必要なアニメーションループ (例 : {{ domxref("Window.requestAnimationFrame","requestAnimationFrame") }}) と一緒に {{ domxref("Gamepad") }} オブジェクトを使用して関与する傾向があります。

- -

{{ domxref("Navigator.getGamepads()") }} メソッドは現在 Web ページから見える {{ domxref("Gamepad") }} オブジェクト (ゲームパッドが繋がっていない時は毎回 null が返される ) のような、すべてのデバイスを配列として戻します。これは、同じ情報を得るために使用することができます。例えば、 以下に示すように上記の最初のコード例を書き換えます。

- -
window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
-    gp.index, gp.id,
-    gp.buttons.length, gp.axes.length);
-});
- -

{{ domxref("Gamepad") }} オブジェクトの機能は以下の通りです。

- -
    -
  • id: コントローラーに関する情報を含んだ文字列です。これは厳密には指定されていなく、Firefox では、コントローラーのUSBベンダと製品IDを含んでいる2つの4桁16進数字列、およびドライバーから提供されるようなコントローラーの名前といった3つの情報が、ダッシュ (-) により分離され含まれています。この情報はユーザーへの有益なフィードバックを表示するとともに、デバイスのコントロールのマッピングを見つけることができるようにします。
    • -
  • index: 現在システムに接続されているゲームパッドごとに固有の整数。この値は複数のコントローラーを区別するために使用できます。デバイスを切断してから新しいデバイスを接続すると、以前のインデックスが再利用されることに注意してください。
    • -
  • mapping: ブラウザがデバイス上のコントロールを既知のレイアウトに再マップしたかどうかを示す文字列。現在、サポートされている既知のレイアウト - 標準のゲームパッドは1つしかありません。ブラウザがデバイス上のコントロールをそのレイアウトにマッピングできる場合、 mapping プロパティは文字列 standard に設定されます。
    • -
  • connected:ゲームパッドがシステムに接続されているかどうかを示すブール値。もし接続されている場合は True。接続されていない場合は False が設定されます。
    • -
  • buttons: デバイス上に存在するボタンを表す {{ domxref("GamepadButton") }} オブジェクトの配列。各 {{ domxref("GamepadButton") }} には、pressed プロパティと value のプロパティがあります。 -
      -
    • pressed プロパティは、ボタンが現在押されている (true) か押されていない (false) かを示すブール値です。>
      • -
    • value プロパティは、現代の多くのゲームパッドのトリガなど、アナログボタンの表示を有効にするために使用される浮動小数点値です。値は 0.0..1.0 の範囲に正規化され、 0.0 は押されていないボタンを表し、 1.0 は完全に押されたボタンを表します。
      • -
    -
    • -
  • axes: デバイス上に軸があるコントロールを表す配列 (例：アナログサムスティック)。 配列の各エントリは-1.0〜1.0の範囲の浮動小数点値で、最小値 (-1.0) から最大値 (1.0) までの軸の位置を表します。
    • -
  • timestamp: このゲームパッドのデータが最後に更新された時刻を表す {{ domxref("DOMHighResTimeStamp") }} を返します。この値により、開発者は axes と button のデータがハードウェアから更新されたかどうかを判断できます。 値は、 {{ domxref("PerformanceTiming") }} インターフェースの navigationStart 属性との相対値でなければなりません。 値は単調に増加します。つまり、更新の順序を決定するために比較することができます。新しい値は常に古い値よりも大きいか等しいためです。このプロパティは現在 Firefox ではサポートされていません。
    • -
- -
-

注: Gamepadオブジェクトは、セキュリティ上の理由から {{ domxref("Window") }} オブジェクトではなく {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントで使用できます。一度リファレンスを取得すると、そのプロパティでゲームパッドの現在の状態に関する情報を照会できます。 このオブジェクトは、ゲームパッドの状態が変わるたびに更新されます。

-
- -

ボタン情報の使用

- -

1つのゲームパッドの接続情報を表示する簡単な例を見てみましょう (後続のゲームパッド接続を無視します)。ゲームパッドの右側にある4つのゲームパッドボタンを使用してボールを画面の周りに移動できます。デモをライブで見ることができことができ、Githubでソースコードを見つけることができます。

- -

まず、いくつかの変数を宣言します: 接続情報が書き込まれる gamepadInfo のパラグラフ、移動する ball、requestAnimation Frame の ID として機能する start 変数、ボールを移動するための位置変更子として機能する a および b 変数、および短縮形変数 これは、　{{ domxref("Window.requestAnimationFrame", "requestAnimationFrame()") }} および {{ domxref("Window.cancelAnimationFrame", "cancelAnimationFrame()") }} クロスブラウザフォークで使用されます。

- -
var gamepadInfo = document.getElementById("gamepad-info");
-var ball = document.getElementById("ball");
-var start;
-var a = 0;
-var b = 0;
-
- -

次に {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベントを使用して、接続されているゲームパッドを確認します。接続されると {{ domxref("Navigator.getGamepads()") }}[0] を使用してゲームパッドを取得し、ゲームパッドに関する情報をゲームパッドの情報 div に出力し、全体のボールの動きが始まる gameLoop() 関数が呼び出されます。

- -
window.addEventListener("gamepadconnected", function(e) {
-  var gp = navigator.getGamepads()[e.gamepad.index];
-  gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id + ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-
-  gameLoop();
-});
- -

これで {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用して、ゲームパッドが再び切断されたかどうかを確認します。 もしそうならば、 {{DOMxRef("Window.requestAnimationFrame", "requestAnimationFrame()")}} ループ (下記参照) を停止し、ゲームパッドの情報を元の状態に戻します。

- -
window.addEventListener("gamepaddisconnected", function(e) {
-  gamepadInfo.innerHTML = "Waiting for gamepad.";
-
-  cancelRequestAnimationFrame(start);
-});
- -

Chrome では異なる挙動になります。変数にゲームパッドの最新の状態を常に保存するのではなく、スナップショットを保存するだけなので、 Chrome で同じことを行うにはポーリングしてから {{ domxref("Gamepad") }} オブジェクトをコードで使用する必要があり、それは利用可能です。私たちはこれを {{ domxref("Window.setInterval()") }} オブジェクトが利用可能になると、ゲームパッド情報が出力され、ゲームループが開始され、 {{ domxref("Window.clearInterval()") }} を使用して間隔がクリアされます。 Chrome {{ domxref("Navigator.getGamepads()") }} の古いバージョンでは、 Webkit 接頭辞を使用して実装されています。下位互換性のために、接頭辞付きのバージョンと関数の標準バージョンの両方を検出して処理しようとします。

- -
var interval;
-
-if (!('ongamepadconnected' in window)) {
-  // No gamepad events available, poll instead.
-  interval = setInterval(pollGamepads, 500);
-}
-
-function pollGamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  for (var i = 0; i < gamepads.length; i++) {
-    var gp = gamepads[i];
-    if (gp) {
-      gamepadInfo.innerHTML = "Gamepad connected at index " + gp.index + ": " + gp.id +
-        ". It has " + gp.buttons.length + " buttons and " + gp.axes.length + " axes.";
-      gameLoop();
-      clearInterval(interval);
-    }
-  }
-}
- -

今度はメインのゲームループです。ループが実行されるたびに、4つのボタンの1つが押されているかどうかがチェックされます。そうすると、a と b の移動変数の値を適切に更新し、 {{ cssxref("left") }} と {{ cssxref("top") }} のプロパティを更新し、その値を a および b とする。これはボールを画面の周りに動かす効果があります。 現在のバージョンの Chrome (この記事の執筆時点ではバージョン34) では、ボタンの値は {{ domxref("GamepadButton") }} オブジェクトではなく、 double 値の配列として保存されます。

- -

この作業がすべて完了したら、 requestAnimationFrame() を使用して gameLoop() を再び実行して次のアニメーションフレームを要求します。

- -
function buttonPressed(b) {
-  if (typeof(b) == "object") {
-    return b.pressed;
-  }
-  return b == 1.0;
-}
-
-function gameLoop() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
-  if (!gamepads) {
-    return;
-  }
-
-  var gp = gamepads[0];
-  if (buttonPressed(gp.buttons[0])) {
-    b--;
-  } else if (buttonPressed(gp.buttons[2])) {
-    b++;
-  }
-  if (buttonPressed(gp.buttons[1])) {
-    a++;
-  } else if (buttonPressed(gp.buttons[3])) {
-    a--;
-  }
-
-  ball.style.left = a * 2 + "px";
-  ball.style.top = b * 2 + "px";
-
-  start = requestAnimationFrame(gameLoop);
-}
- -

完全な例: ゲームパッドの状態を表示する

- -

この例では、 {{ domxref("Gamepad") }} オブジェクト、 {{ domxref("Window/gamepadconnected_event", "gamepadconnected") }} イベント、 {{domxref("Window/gamepaddisconnected_event", "gamepaddisconnected")}} イベントを使用してシステムに接続されているすべてのゲームパッドの状態を表示します。デモを見て、Githubの完全なソースコードを見ることができます。

- -
var haveEvents = 'ongamepadconnected' in window;
-var controllers = {};
-
-function connecthandler(e) {
-  addgamepad(e.gamepad);
-}
-
-function addgamepad(gamepad) {
-  controllers[gamepad.index] = gamepad;
-
-  var d = document.createElement("div");
-  d.setAttribute("id", "controller" + gamepad.index);
-
-  var t = document.createElement("h1");
-  t.appendChild(document.createTextNode("gamepad: " + gamepad.id));
-  d.appendChild(t);
-
-  var b = document.createElement("div");
-  b.className = "buttons";
-  for (var i = 0; i < gamepad.buttons.length; i++) {
-    var e = document.createElement("span");
-    e.className = "button";
-    //e.id = "b" + i;
-    e.innerHTML = i;
-    b.appendChild(e);
-  }
-
-  d.appendChild(b);
-
-  var a = document.createElement("div");
-  a.className = "axes";
-
-  for (var i = 0; i < gamepad.axes.length; i++) {
-    var p = document.createElement("progress");
-    p.className = "axis";
-    //p.id = "a" + i;
-    p.setAttribute("max", "2");
-    p.setAttribute("value", "1");
-    p.innerHTML = i;
-    a.appendChild(p);
-  }
-
-  d.appendChild(a);
-
-  // See https://github.com/luser/gamepadtest/blob/master/index.html
-  var start = document.getElementById("start");
-  if (start) {
-    start.style.display = "none";
-  }
-
-  document.body.appendChild(d);
-  requestAnimationFrame(updateStatus);
-}
-
-function disconnecthandler(e) {
-  removegamepad(e.gamepad);
-}
-
-function removegamepad(gamepad) {
-  var d = document.getElementById("controller" + gamepad.index);
-  document.body.removeChild(d);
-  delete controllers[gamepad.index];
-}
-
-function updateStatus() {
-  if (!haveEvents) {
-    scangamepads();
-  }
-
-  var i = 0;
-  var j;
-
-  for (j in controllers) {
-    var controller = controllers[j];
-    var d = document.getElementById("controller" + j);
-    var buttons = d.getElementsByClassName("button");
-
-    for (i = 0; i < controller.buttons.length; i++) {
-      var b = buttons[i];
-      var val = controller.buttons[i];
-      var pressed = val == 1.0;
-      if (typeof(val) == "object") {
-        pressed = val.pressed;
-        val = val.value;
-      }
-
-      var pct = Math.round(val * 100) + "%";
-      b.style.backgroundSize = pct + " " + pct;
-
-      if (pressed) {
-        b.className = "button pressed";
-      } else {
-        b.className = "button";
-      }
-    }
-
-    var axes = d.getElementsByClassName("axis");
-    for (i = 0; i < controller.axes.length; i++) {
-      var a = axes[i];
-      a.innerHTML = i + ": " + controller.axes[i].toFixed(4);
-      a.setAttribute("value", controller.axes[i] + 1);
-    }
-  }
-
-  requestAnimationFrame(updateStatus);
-}
-
-function scangamepads() {
-  var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
-  for (var i = 0; i < gamepads.length; i++) {
-    if (gamepads[i]) {
-      if (gamepads[i].index in controllers) {
-        controllers[gamepads[i].index] = gamepads[i];
-      } else {
-        addgamepad(gamepads[i]);
-      }
-    }
-  }
-}
-
-window.addEventListener("gamepadconnected", connecthandler);
-window.addEventListener("gamepaddisconnected", disconnecthandler);
-
-if (!haveEvents) {
- setInterval(scangamepads, 500);
-}
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Gamepad", "#gamepad-interface", "Gamepad")}}{{Spec2("Gamepad")}}初回定義
- -

ブラウザーの互換性

- - - -

{{Compat("api.Gamepad")}}

diff --git a/files/ja/web/guide/api/vibration/index.html b/files/ja/web/guide/api/vibration/index.html deleted file mode 100644 index 49ab486128..0000000000 --- a/files/ja/web/guide/api/vibration/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Vibration API -slug: Web/Guide/API/Vibration -tags: - - API - - Beginner - - Mobile - - Vibration -translation_of: Web/API/Vibration_API ---- -
{{DefaultAPISidebar("Vibration API")}}
- -

現代のモバイル端末は、たいていバイブレーションハードウェアを内蔵しており、ソフトウェアのコードが端末を振動させることによりユーザーに物理的なフィードバックを与えることができます。 Vibration API はウェブアプリに、このハードウェアが存在すればアクセスすることができるようにし、端末が対応していない場合は何もしません。

- -

バイブレーションの表現

- -

バイブレーションはオン・オフのパルスのパターンで表され、様々な長さになることがあります。パターンは振動するミリ秒数を示す整数 1 つ、あるいはバイブレーションと休止時間のパターンを示す整数の配列で構成します。バイブレーションは {{domxref("Navigator.vibrate()")}} という単一のメソッドで制御します。

- -

1 回のバイブレーション

- -

1 個の値、または 1 個だけの値で構成される配列を指定することにより、バイブレーションハードウェアを 1 回振動させることができます:

- -
window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-
- -

どちらの例も、デバイスを 200 ミリ秒間振動させます。

- -

バイブレーションパターン

- -

値の配列は、デバイスが振動する時間と振動しない時間を交互に示します。配列内の各値は整数値に変換されて、デバイスを振動させるミリ秒数および振動させないミリ秒数として交互に解釈されます。例えば以下のようにします。

- -
window.navigator.vibrate([200, 100, 200]);
-
- -

これはデバイスを 200 ミリ秒間振動させて、その後再び 200 ミリ秒間振動させる前に 100 ミリ秒間振動を止めます。

- -

バイブレーション/休止のペアは好きなだけ多く指定でき、またエントリ数は偶数・奇数のどちらでも可能です。各バイブレーション時間の終端で自動的にバイブレーションを止めますので、休止時間を最後のエントリとして与えなくてもよいことは注目に値します。

- -

実行中のバイブレーションを取り消す

- -

値 0、空の配列、あるいはすべての値が 0 の配列 を指定して {{domxref("Navigator.vibrate()")}} を呼び出すと、現在進行中のバイブレーションパターンを取り消します。

- -

継続的なバイブレーション

- -

基本的な setInterval および clearInterval のアクションにより、継続的なバイブレーションを生成できます:

- -
var vibrateInterval;
-
-// 渡されたレベルでバイブレーションを開始
-function startVibrate(duration) {
-    navigator.vibrate(duration);
-}
-
-// バイブレーションを停止
-function stopVibrate() {
-    // インターバルをクリアして継続的なバイブレーションを停止
-    if(vibrateInterval) clearInterval(vibrateInterval);
-    navigator.vibrate(0);
-}
-
-// 与えられた時間とインターバルによる継続的なバイブレーションを開始
-// 数値が与えられるものとする
-function startPersistentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
-        startVibrate(duration);
-    }, interval);
-}
- -

当然ながら、上記のコードスニペットは配列によるバイブレーションを考慮していません。配列に基づく継続的なバイブレーションでは、配列のアイテムの総数を計算して、その値を基にしてインターバル (おそらく、遅延時間を付加して) を作成することが必要でしょう。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}}リンク先は最新の編集者草稿です。 W3C 版は勧告になりました。
- -

ブラウザーの互換性

- - - -

{{Compat("api.Navigator.vibrate")}}

- -

関連情報

- -
    -
  • {{DOMxRef("Navigator.vibrate()")}}
    • -
diff --git a/files/ja/web/guide/css/getting_started/boxes/index.html b/files/ja/web/guide/css/getting_started/boxes/index.html deleted file mode 100644 index 379b38949d..0000000000 --- a/files/ja/web/guide/css/getting_started/boxes/index.html +++ /dev/null @@ -1,331 +0,0 @@ ---- -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/web/guide/css/getting_started/color/index.html b/files/ja/web/guide/css/getting_started/color/index.html deleted file mode 100644 index 4d080bc3a4..0000000000 --- a/files/ja/web/guide/css/getting_started/color/index.html +++ /dev/null @@ -1,349 +0,0 @@ ---- -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/web/guide/css/getting_started/javascript/index.html b/files/ja/web/guide/css/getting_started/javascript/index.html deleted file mode 100644 index fc2fa7a3b4..0000000000 --- a/files/ja/web/guide/css/getting_started/javascript/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -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 つの方法があります:

-
    -
  • 文書内のスタイルシートの一覧を扱う方法—例: スタイルシートの追加、削除、編集
    • -
  • スタイルシート内のルールを扱う方法—例: ルールの追加、削除、編集
    • -
  • DOM 内の 個々の要素を扱う方法—文書のスタイルシートと関係なしに、スタイルシートを編集します
    • -
- - - - - - - -
- さらに詳しく
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

-
 
-
-
- この実演についての重要な補足: -
    -
  • HTML 文書からは、いつものようにスタイルシートがリンクされ、スクリプトもリンクされています
    • -
  • スクリプトは DOM の個々の要素を扱います。正方形のスタイルを直接編集しています。ボタンのスタイルは属性を変更することで、間接的に編集しています。
    • -
  • JavaScript では、document.getElementById("square") は CSS セレクタ #square と、機能的に同義です。
    • -
  • JavaScript では、backgroundColor は CSSのプロパティ background-color に相当します。JavaScriptでは名前にハイフンを含めることができないので、"キャメルケース" が代わりに使われます。
    • -
  • ブラウザ内蔵の CSS ルールには
    - button{{mediawiki.external('disabled=\"true\"')}} に対するものがあり、ボタンが使用不可にされるとボタンの外見を変更します。
    • -
-
- - - - - - - -
- チャレンジ
スクリプトを変更して、色が変わるときに正方形が右に 20 em 跳び、その後元の位置に跳んで戻るようにしてください。
-

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

-

さて次は？

-

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

-

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

diff --git a/files/ja/web/guide/css/getting_started/layout/index.html b/files/ja/web/guide/css/getting_started/layout/index.html deleted file mode 100644 index e8bd18d944..0000000000 --- a/files/ja/web/guide/css/getting_started/layout/index.html +++ /dev/null @@ -1,285 +0,0 @@ ---- -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/web/guide/css/getting_started/lists/index.html b/files/ja/web/guide/css/getting_started/lists/index.html deleted file mode 100644 index 212947f4f6..0000000000 --- a/files/ja/web/guide/css/getting_started/lists/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -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種類のマーカーがあり、ブラウザは次のように表示します:

-
    -
  • disc
    • -
  • circle
    • -
  • square
    • -
-

もしくは、画像の 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") }} プロパティを使ってください:

-
    -
  • decimal
    • -
  • lower-roman
    • -
  • upper-roman
    • -
  • lower-latin
    • -
  • upper-latin
    • -
-
-
- 例
-

これは 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/web/guide/css/getting_started/tables/index.html b/files/ja/web/guide/css/getting_started/tables/index.html deleted file mode 100644 index 1f0905d1ec..0000000000 --- a/files/ja/web/guide/css/getting_started/tables/index.html +++ /dev/null @@ -1,478 +0,0 @@ ---- -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/web/guide/css/media_queries/index.html b/files/ja/web/guide/css/media_queries/index.html deleted file mode 100644 index 961536b070..0000000000 --- a/files/ja/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -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/web/guide/dom/index.html b/files/ja/web/guide/dom/index.html deleted file mode 100644 index dcee4acf84..0000000000 --- a/files/ja/web/guide/dom/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -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/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index d8cf43a362..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: 高度なアニメーション -slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations -tags: - - Canvas - - Graphics - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

前の章では、いくつかの基本的なアニメーションを作成して、物の動かし方を学びました。このパートでは、 運動そのものをより詳細に見て、 アニメーションをより高度にするための物理を追加していきましょう。

-
- -

ボールを描く

- -

アニメーションの勉強のために、ボールを使おうと思うので、最初にボールを canvas 上に描きましょう。次のコードは私たちの準備をしてくれるでしょう。

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

普通は、まず描画コンテキストが必要になります。 ボールを描くため、 プロパティと canvas にボールを描くための draw() メソッドを持つ ball オブジェクトを作りましょう。

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

ここでは特別なことはなく、ball は本当に単純な円で、{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} メソッドの助けを借りて描かれています。

- -

速度の追加

- -

ボールが手に入りましたので、このチュートリアルの前の章で習ったように、基本的なアニメーションを加えていきましょう。また {{domxref("window.requestAnimationFrame()")}} がアニメーションの制御を手助けしてくれます。The ball gets moving by adding a velocity vector to the position. For each frame, we also {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} the canvas to remove old circles from prior frames.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

境界線

- -

Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the draw method:

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

最初のデモ

- -

これまでで、実際にどのように動くか見てみましょう。canvas にマウスを移動させて、アニメーションを開始してます。

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

加速

- -

動きをよりリアルにするために、このような速度で再生できます。たとえば：

- -
ball.vy *= .99;
-ball.vy += .25;
- -

This slows down the vertical velocity each frame, so that the ball will just bounce on the floor in the end.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

後引きの効果

- -

Until now we have made use of the {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} method when clearing prior frames. If you replace this method with a semi-transparent {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, you can easily create a trailing effect.

- -
ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

マウスコントロールの追加

- -

ボールに対するちょっとした制御をするために、たとえば mousemove イベントを使用してボールをマウスの動きに従わせる。といったことができます。click イベントでボールを開放して、またバウンドさせる。といったことも可能です。

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e){
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener("click",function(e){
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

マウスを使ってボールを動かして、クリックで開放してください。

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

ブロック崩し

- -

This short chapter only explains some techniques to create more advanced animations. There are many more! How about adding a paddle, some bricks, and turn this demo into a Breakout game? Checkout our Game development area for more gaming related articles.

- -

関連項目

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index c23a5e1ce1..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,725 +0,0 @@ ---- -title: スタイルと色を適用する -slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

「canvas に図形を描く」の章ではデフォルトの線と塗りのスタイルのみを使いました。ここではより魅力的に描くために使うことのできるcanvasのオプションについて見ていきます。具体的には、色、線のスタイル、グラデーション、パターンや影を追加する方法について学びます。

-
- -

色

- -

これまでは描画コンテキストの方法についてのみ見てきました。色を図形に適用するために、"fillStyle"と"strokeStyle"という2つの重要なプロパティを利用することができます。

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
図形の塗りつぶしのスタイルを記述する
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
図形のアウトラインのスタイルを記述する。
-
- -

colorの部分にはCSSでの{{cssxref("<color>")}}表現やグラデーションオブジェクトまたはパターンオブジェクトが入ります。グラデーションオブジェクトとパターンオブジェクトについては後ほど学ぶことにします。 デフォルトでは、輪郭線・塗りつぶしの色は黒に設定されています。 (CSS色では#000000)

- -
-

注記: strokeStyleおよびfillStyleプロパティを設定すると、その設定した値がデフォルトとなって、それ以降に描かれる図形の線や塗りはその色で行なわれるようになります。それぞれの図形をそれぞれ別の色で描きたい場合は、シェイプを描くごとにstrokeStyleおよびfillStyleプロパティを設定する必要があります。

-
- -

入力できる有効な文字列は、CSS {{cssxref("<color>")}}表現の値である必要があります。 下記の例では同じ色について説明しています。

- -
// これらは全てfillStyleにオレンジ色を代入します
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255,165,0)";
-ctx.fillStyle = "rgba(255,165,0,1)";
-
- -

プロパティ fillStyle の例

- -

この例では二重のforループを使って正方形からなるグリッドを作ってみたい。そしてその正方形の一つひとつは違った色になるようにしたい。結果は下のスクリーンショットのようになるだろう。かなり面白い画像ができているだろう。それぞれのブロックで別々な色を表現するために、２つの変数i,jを用いている。変数iは赤成分を、変数jは緑成分を変化させている。青成分は固定されている。By modifying the channels, you can generate all kinds of palettes. By increasing the steps, you can achieve something that looks like the color palettes Photoshop uses.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle = `rgb(${Math.floor(255-42.5*i)}, ${Math.floor(255-42.5*j)}, 0)`;
-      ctx.fillRect(j*25, i*25, 25, 25);
-    }
-  }
-}
- - - -

結果は以下のようになる:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

プロパティ strokeStyle の例

- -

This example is similar to the one above, but uses the strokeStyle property to change the colors of the shapes' outlines. We use the arc() method to draw circles instead of squares.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i=0;i<6;i++){
-      for (var j=0;j<6;j++){
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
-                         Math.floor(255-42.5*j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

透明度のコントロール

- -

canvasに不透明な形状を描画するだけでなく、半透明の形状を描画することもできます。 これは、globalAlphaプロパティを設定するか、輪郭線や塗りつぶしのスタイルに半透明の色を割り当てることによって行われます。

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
代入された透明度の値を、代入後にcanvasに描画されるすべての図形に適用します。値は0.0（完全に透明）から1.0（完全に不透明）の間でなければなりません。デフォルトでは1.0（完全に不透明）が設定されています。
-
- -

globalAlphaプロパティは、同様の透明度でcanvasにいくつもの図形を描画する場合に役に立ちますが、それ以外の場合は、色を設定するときにそれぞれの図形に透明度を設定する方が一般的に便利です。

- -

strokeStyleプロパティとfillStyleプロパティはCSSのrgba表現を利用できるため、次のような表記を使用して透明な色を割り当てることもできます。

- -
// 輪郭線と塗りつぶしの色に透明色を割り当てる
-
-ctx.strokeStyle = "rgba(255,0,0,0.5)";
-ctx.fillStyle = "rgba(255,0,0,0.5)";
-
- -

rgba()関数はrgb()関数によく似ていますが、1つ引数が増加します。最後の引数には、この色の透明度の値を設定します。有効な値の範囲は、0.0（完全に透明）から1.0（完全に不透明）です。

- -

プロパティ globalAlpha の例

- -

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0,0,75,75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75,0,75,75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0,75,75,75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75,75,75,75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i=0;i<7;i++){
-    ctx.beginPath();
-    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

An example using rgba()

- -

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // Draw semi transparent rectangles
-  for (var i=0;i<10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j<4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Line styles

- -

There are several properties which allow us to style lines.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Sets the width of lines drawn in the future.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Sets the appearance of the ends of lines.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Sets the appearance of the "corners" where lines meet.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Returns the current line dash pattern array containing an even number of non-negative numbers.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Sets the current line dash pattern.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Specifies where to start a dash array on a line.
-
- -

You'll get a better understanding of what these do by looking at the examples below.

- -

A lineWidth example

- -

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

- -

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

- -

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++){
-    ctx.lineWidth = 1+i;
-    ctx.beginPath();
-    ctx.moveTo(5+i*14,5);
-    ctx.lineTo(5+i*14,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

- -

- -

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

- -

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

- -
-

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

- -

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

-
- -

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

- -

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

- -

A lineCap example

- -

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

- -

- -
-
butt
-
The ends of lines are squared off at the endpoints.
-
round
-
The ends of lines are rounded.
-
square
-
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
-
- -

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

- -

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10,10);
-  ctx.lineTo(140,10);
-  ctx.moveTo(10,140);
-  ctx.lineTo(140,140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i=0;i<lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25+i*50,10);
-    ctx.lineTo(25+i*50,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

A lineJoin example

- -

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

- -

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

- -

- -
-
round
-
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
-
bevel
-
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
-
miter
-
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
-
- -

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round','bevel','miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i<lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5,5+i*40);
-    ctx.lineTo(35,45+i*40);
-    ctx.lineTo(75,5+i*40);
-    ctx.lineTo(115,45+i*40);
-    ctx.lineTo(155,5+i*40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

A demo of the miterLimit property

- -

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

- -

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

- -

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
    • -
  • A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.
    • -
  • A miter limit equal to 1.0 is valid but will disable all miters.
    • -
  • Values below 1.0 are invalid for the miter limit.
    • -
- -

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

- -

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0,0,150,150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i<24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Using line dashes

- -

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

- -

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradients

- -

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
-
- -

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

- -
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

A createLinearGradient example

- -

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0,0,0,150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10,10,130,130);
-  ctx.strokeRect(50,50,50,50);
-
-}
-
- - - -

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

- -

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

A createRadialGradient example

- -

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-
- - - -

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

- -

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Patterns

- -

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
-
- -

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

- -
-
repeat
-
Tiles the image in both vertical and horizontal directions.
-
repeat-x
-
Tiles the image horizontally but not vertically.
-
repeat-y
-
Tiles the image vertically but not horizontally.
-
no-repeat
-
Doesn't tile the image. It's used only once.
-
- -

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
-
- -
-

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

-
- -

A createPattern example

- -

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function(){
-
-    // create pattern
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Shadows

- -

Using shadows involves just four properties:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
-
- -

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

- -

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

- -

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

- -
-

Note: Shadows are only drawn for source-over compositing operations.

-
- -

A shadowed text example

- -

This example draws a text string with a shadowing effect.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

We will look at the font property and fillText method in the next chapter about drawing text.

- -

Canvas fill rules

- -

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
-
- Two values are possible:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
-  ctx.fill("evenodd");
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 1690518a7d..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,711 +0,0 @@ ---- -title: Basic animations -slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations -tags: - - Canvas - - Graphics - - HTML - - HTML5 - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

私たちが {{HTMLElement("canvas")}} 要素の操作に JavaScript を使うのは、とても簡単にインタラクティブなアニメーションを作成できるからです！本章では、いくつかの基本的なアニメーションで、その概要をつかんでいきます。

-
- -

おそらく最大の制約は、キャンバスに図形を一度描画すると、その状態が維持されることです。アニメーションさせる場合にも、移動する部分と以前に描いた部分をすべて再描画する必要があります。複雑なフレームの再描画には時間がかかり、パフォーマンスは、実行しているコンピューターの速度に大きく依存します。

- -

基本的なアニメーションの手順

- -

フレームを描画させる手順は、このようになります。

- -
    -
  1. キャンバスをクリアする
    - 描画する図形がキャンバス全体 (たとえば、背景画像) に収まらない限り、以前に描画した図形をすべてクリアする必要があります。それを行う最も簡単な方法は、{{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} メソッドを使うことです。
    2. -
  2. キャンバスの状態を保存する
    - キャンバスの状態に影響を与える設定(スタイル、変形など)を変更していて、フレームを描画するたびに元の状態を使用したい場合は、その状態を保存する必要があります。
    3. -
  3. アニメ―ションさせる図形を描画する
    - 実際に、フレームの描画を行います。
    4. -
  4. キャンバスの状態を復元する
    - 状態を保存した場合は、新しいフレームを描画する前に状態を復元します。
    5. -
- -

アニメーションの制御

- -

図形は、canvas のメソッドを直接使用するか、カスタム関数を呼び出すことによって描画されます。通常は、スクリプトの実行が終了したときにのみ、これらの結果がキャンバスに表示されます。たとえば、for ループ内からアニメーションを実行することはできません。

- -

つまり、一定の期間ごとに描画関数を実行する方法が必要です。このようなアニメーションを制御するには、2 つの方法があります。

- -

スケジュールの更新

- -

まず、{{domxref("window.setInterval()")}}、{{domxref("window.setTimeout()")}} があります。それから、{{domxref("window.requestAnimationFrame()")}} 関数があります。これらは、特定の関数を一定時間で呼び出すために使用できます。

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
function で指定した関数を delay ミリ秒ごとに繰り返し実行します。
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
function で指定した関数を delay ミリ秒後に実行します。
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。
-
- -

ユーザーの操作が必要ない場合は、提供されたコードを繰り返し実行する setInterval() 関数を使用できます。ゲームを作成したい場合、キーボードまたはマウスのイベントを使用してアニメーションを制御するため setTimeout() を使用できます。{{domxref( "EventListener")}}を設定することで、ユーザーの操作を取得し、アニメーション関数を実行します。

- -
-

以下の例では、{{domxref("window.requestAnimationFrame()")}} メソッドを使用してアニメーションを制御します。requestAnimationFrame メソッドは、フレームを描画する準備ができた時にシステムがアニメーションフレームを呼び出すことで、よりスムーズで効率的な方法でアニメーションを提供します。通常、コールバック回数は 1 秒あたり 60 回となり、バックグラウンドタブで実行している場合は、レートが低くなることがあります。特にゲームのアニメーションループの詳細については、ゲーム開発のビデオゲームの解剖学を参照してください。

-
- -

アニメーションする太陽系

- -

この例は、太陽系の小さなモデルをアニメーションさせます。

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

アニメ―ションする時計

- -

この例は、アニメーションする時計で現在時間を表示します。

- -
function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Hour marks
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // write Hours
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

ループする風景

- -

この例は、左から右へ風景写真をスクロールさせます。Wikipedia からヨセミテ国立公園の画像を使いましたが、キャンバスよりも大きな任意の画像を使用できます。

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) {
-        // image larger than canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW > CanvasXSize) {
-        // image width larger than canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH > CanvasYSize) {
-        // image height larger than canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        // reset, start from beginning
-        if (x > CanvasXSize) {
-            x = -imgW + x;
-        }
-        // draw additional image1
-        if (x > 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // draw additional image2
-        if (x - imgW > 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // image is > Canvas Size
-    else {
-        // reset, start from beginning
-        if (x > (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // draw aditional image
-        if (x > (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-
- -

以下は、画像をスクロールする {{HTMLElement("canvas")}} です。ここで指定する幅と高さは、JavaScript コードの CanvasXZSize および CanvasYSize 変数の値と一致する必要があることに注意してください。

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

マウス追跡アニメーション

- -
<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-        <title>Document</title>
-        <script>
-            var cn;
-            //= document.getElementById('cw');
-            var c;
-            var u = 10;
-            const m = {
-                x: innerWidth / 2,
-                y: innerHeight / 2
-            };
-            window.onmousemove = function(e) {
-                m.x = e.clientX;
-                m.y = e.clientY;
-
-            }
-            function gc() {
-                var s = "0123456789ABCDEF";
-                var c = "#";
-                for (var i = 0; i < 6; i++) {
-                    c += s[Math.ceil(Math.random() * 15)]
-                }
-                return c
-            }
-            var a = [];
-            window.onload = function myfunction() {
-                cn = document.getElementById('cw');
-                c = cn.getContext('2d');
-
-                for (var i = 0; i < 10; i++) {
-                    var r = 30;
-                    var x = Math.random() * (innerWidth - 2 * r) + r;
-                    var y = Math.random() * (innerHeight - 2 * r) + r;
-                    var t = new ob(innerWidth / 2,innerHeight / 2,5,"red",Math.random() * 200 + 20,2);
-                    a.push(t);
-                }
-                //cn.style.backgroundColor = "#700bc8";
-
-                c.lineWidth = "2";
-                c.globalAlpha = 0.5;
-                resize();
-                anim()
-            }
-            window.onresize = function() {
-
-                resize();
-
-            }
-            function resize() {
-                cn.height = innerHeight;
-                cn.width = innerWidth;
-                for (var i = 0; i < 101; i++) {
-                    var r = 30;
-                    var x = Math.random() * (innerWidth - 2 * r) + r;
-                    var y = Math.random() * (innerHeight - 2 * r) + r;
-                    a[i] = new ob(innerWidth / 2,innerHeight / 2,4,gc(),Math.random() * 200 + 20,0.02);
-
-                }
-                //  a[0] = new ob(innerWidth / 2, innerHeight / 2, 40, "red", 0.05, 0.05);
-                //a[0].dr();
-            }
-            function ob(x, y, r, cc, o, s) {
-                this.x = x;
-                this.y = y;
-                this.r = r;
-                this.cc = cc;
-                this.theta = Math.random() * Math.PI * 2;
-                this.s = s;
-                this.o = o;
-                this.t = Math.random() * 150;
-
-                this.o = o;
-                this.dr = function() {
-                    const ls = {
-                        x: this.x,
-                        y: this.y
-                    };
-                    this.theta += this.s;
-                    this.x = m.x + Math.cos(this.theta) * this.t;
-                    this.y = m.y + Math.sin(this.theta) * this.t;
-                    c.beginPath();
-                    c.lineWidth = this.r;
-                    c.strokeStyle = this.cc;
-                    c.moveTo(ls.x, ls.y);
-                    c.lineTo(this.x, this.y);
-                    c.stroke();
-                    c.closePath();
-
-                }
-            }
-            function anim() {
-                requestAnimationFrame(anim);
-                c.fillStyle = "rgba(0,0,0,0.05)";
-                c.fillRect(0, 0, cn.width, cn.height);
-                a.forEach(function(e, i) {
-                    e.dr();
-                });
-
-            }
-        </script>
-        <style>
-            #cw {
-                position: fixed;
-                z-index: -1;
-            }
-
-            body {
-                margin: 0;
-                padding: 0;
-                background-color: rgba(0,0,0,0.05);
-            }
-        </style>
-    </head>
-    <body>
-        <canvas id="cw"></canvas>
-    </body>
-</html>
-
- -
表示例
- - - - - - - -
-

beyblade

-
- -

スネークゲーム

- -
<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Nokia 1100:snake..Member berries</title>
-</head>
-
-<body>
-    <div class="keypress hide">
-        <div class="up" onclick="emit(38)">&#8593;</div>
-        <div class="right" onclick="emit(39)">&#8594;</div>
-        <div class="left" onclick="emit(37)">&#8592;</div>
-        <div class="down" onclick="emit(40)">&#8595;</div>
-    </div>
-    <div class="banner" id="selector">
-        <div>
-            Time :<span id="time">0</span>
-        </div>
-        <div>LousyGames ©</div>
-        <div>
-            Score :<span id="score">0</span>
-        </div>
-        <div class="touch off" onclick="touch(this)">touch</div>
-    </div>
-    <canvas id="main"></canvas>
-</body>
-<style>
-    body {
-        margin: 0;
-        overflow: hidden;
-        background: #000
-    }
-
-    .banner {
-        text-align: center;
-        color: #fff;
-        background: #3f51b5;
-        line-height: 29px;
-        position: fixed;
-        left: 0;
-        top: 0;
-        right: 0;
-        font-family: monospace;
-        height: 30px;
-        opacity: .4;
-        display: flex;
-        transition: .5s
-    }
-
-    .banner:hover {
-        opacity: 1
-    }
-
-    div#selector>div {
-        flex-basis: 30%
-    }
-
-    @keyframes diss {
-        from {
-            opacity: 1
-        }
-
-        to {
-            opacity: 0
-        }
-    }
-
-    .keypress>div {
-        border: dashed 3px #fff;
-        height: 48%;
-        width: 48%;
-        display: flex;
-        align-content: center;
-        justify-content: center;
-        align-self: center;
-        align-items: center;
-        font-size: -webkit-xxx-large;
-        font-weight: 900;
-        color: #fff;
-        transition: .5s;
-        opacity: .1;
-        border-radius: 7px
-    }
-
-    .keypress {
-        position: fixed;
-        width: 100vw;
-        height: 100vh;
-        top: 0;
-        left: 0;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
-        opacity: 1;
-        user-select: none
-    }
-
-    .keypress>div:hover {
-        opacity: 1
-    }
-
-    .touch {
-        background: #8bc34a
-    }
-
-    .off {
-        background: #f44336
-    }
-
-    .hide {
-        opacity: 0
-    }
-</style>
-</html>
- -

Javascript

- -
function tmz() {
-        var e = new Date(t),
-            i = new Date,
-            n = Math.abs(i.getMinutes() - e.getMinutes()),
-            o = Math.abs(i.getSeconds() - e.getSeconds());
-        return n + " : " + o
-    }
-
-    function coll(t, e) {
-        return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y
-    }
-
-    function snake() {
-        this.w = 15, this.h = 15, this.dx = 1, this.dy = 1, this.xf = 1, this.yf = 1, this.sn = [];
-        for (var t = {
-            x: w / 2,
-            y: h / 2
-        }, e = 0; e < 5; e++) this.sn.push(Object.assign({}, t)), t.x += this.w;
-        this.draw = function () {
-            var t = d && d.search("Arrow") > -1,
-                e = -1;
-            if (t) {
-                var i = {
-                    ...this.sn[0]
-                };
-                if ("ArrowUp" == d && (i.y -= this.h), "ArrowDown" == d && (i.y += this.h), "ArrowLeft" == d && (i.x -= this.w), "ArrowRight" == d && (i.x += this.w), i.x >= w ? i.x = 0 : i.x < 0 && (i.x = w - this.w), i.y > h ? i.y = 0 : i.y < 0 && (i.y = h), e = fa.findIndex(t => coll({
-                    ...this.sn[0],
-                    h: this.h,
-                    w: this.w
-                }, t)), this.sn.unshift(i), -1 != e) return console.log(e), fa[e].renew(), void (document.getElementById("score").innerText = Number(document.getElementById("score").innerText) + 1);
-                this.sn.pop(), console.log(6)
-            }
-            this.sn.forEach((t, e, i) => {
-                if (0 == e || i.length - 1 == e) {
-                    var n = c.createLinearGradient(t.x, t.y, t.x + this.w, t.y + this.h);
-                    i.length - 1 == e ? (n.addColorStop(0, "black"), n.addColorStop(1, "#8BC34A")) : (n.addColorStop(0, "#8BC34A"), n.addColorStop(1, "white")), c.fillStyle = n
-                } else c.fillStyle = "#8BC34A";
-                c.fillRect(t.x, t.y, this.w, this.h), c.strokeStyle = "#E91E63", c.font = "30px serif", c.strokeStyle = "#9E9E9E", i.length - 1 != e && 0 != e && c.strokeRect(t.x, t.y, this.w, this.h), 0 == e && (c.beginPath(), c.fillStyle = "#F44336", c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill()), c.arc(t.x + 10, t.y + 2, 5, 360, 0), c.fill(), c.beginPath()
-            })
-        }
-    }
-
-    function gc() {
-        for (var t = "0123456789ABCDEF", e = "#", i = 0; i < 6; i++) e += t[Math.ceil(15 * Math.random())];
-        return e
-    }
-
-    function food() {
-        this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () {
-            this.x = Math.floor(Math.random() * (w - 200) + 10), this.y = Math.floor(Math.random() * (h - 200) + 30), this.color = gc()
-        }, this.renew(), this.put = (() => {
-            c.fillStyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * Math.PI), c.fill(), c.beginPath(), c.arc(this.x, this.y, this.b - 5, 0, Math.PI), c.strokeStyle = "green", c.lineWidth = 10, c.stroke(), c.beginPath(), c.lineWidth = 1
-        })
-    }
-
-    function init() {
-        cc.height = h, cc.width = w, c.fillRect(0, 0, w, innerHeight);
-        for (var t = 0; t < 10; t++) fa.push(new food);
-        s = new snake(w / 2, h / 2, 400, 4, 4), anima()
-    }
-
-    function anima() {
-        c.fillStyle = "rgba(0,0,0,0.11)", c.fillRect(0, 0, cc.width, cc.height), fa.forEach(t => t.put()), s.draw(), document.getElementById("time").innerText = tmz(), setTimeout(() => {
-            requestAnimationFrame(anima)
-        }, fw)
-    }
-
-    function emit(t) {
-        key.keydown(t)
-    }
-
-    function touch(t) {
-        t.classList.toggle("off"), document.getElementsByClassName("keypress")[0].classList.toggle("hide")
-    }
-    var t = new Date + "",
-        d = void 0,
-        cc = document.getElementsByTagName("canvas")[0],
-        c = cc.getContext("2d");
-    key = {}, key.keydown = function (t) {
-        var e = document.createEvent("KeyboardEvent");
-        Object.defineProperty(e, "keyCode", {
-            get: function () {
-                return this.keyCodeVal
-            }
-        }), Object.defineProperty(e, "key", {
-            get: function () {
-                return 37 == this.keyCodeVal ? "ArrowLeft" : 38 == this.keyCodeVal ? "ArrowUp" : 39 == this.keyCodeVal ? "ArrowRight" : "ArrowDown"
-            }
-        }), Object.defineProperty(e, "which", {
-            get: function () {
-                return this.keyCodeVal
-            }
-        }), e.initKeyboardEvent ? e.initKeyboardEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, t) : e.initKeyEvent("keydown", !0, !0, document.defaultView, !1, !1, !1, !1, t, 0), e.keyCodeVal = t, e.keyCode !== t && alert("keyCode mismatch " + e.keyCode + "(" + e.which + ")"), document.dispatchEvent(e)
-    };
-    var o, s, h = innerHeight,
-        w = innerWidth,
-        fw = 60,
-        fa = [];
-    window.onkeydown = function (t) {
-        var e = t.key;
-        (e.search("Arrow") > -1 || "1" == e) && (d = t.key), "i" != e && "I" != e || (console.log("inc"), fw -= 10), "d" != e && "D" != e || (console.log("dec"), fw += 10)
-    }, init();
-
- -
表示例
- - - - - - - -
-

Snake game

-
- -

その他のサンプル

- -
-
A basic ray-caster
-
キーボードを使ってアニメーションをどのように制御するか説明した良いサンプルです。
-
Advanced animations
-
高度なアニメーション技術と物の動きについて見ていきます。
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html deleted file mode 100644 index c9bc6c17f4..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/basic_usage/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Basic usage of canvas -slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

まずチュートリアルの最初として {{HTMLElement("canvas")}} {{Glossary("HTML")}} 要素を説明します。このページを読めば、canvas 要素に 2D の画像を描けるようになります。

-
- -

<canvas> 要素

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

{{HTMLElement("canvas")}} は {{HTMLElement("img")}} と似ています。src 属性と alt 属性がない点が明確に異なりますが、{{htmlattrxref("width", "canvas")}} と {{htmlattrxref("height", "canvas")}} の属性がある点などは共通しています。 これらの属性は必ず指定しなければならないものではありません。このほかに様々な {{Glossary("DOM")}} 属性を利用できます。 width と height 属性が指定されなかった場合、canvas は幅 300 ピクセル、高さ 150 ピクセルの要素として初期化されます。画面上の大きさは {{Glossary("CSS")}} によって変更できますが、その場合 canvas に描画される画像は CSS の指定に合わせて拡大 / 縮小されます。この際、元の画像のアスペクト比は考慮されないため、指定の仕方によっては画像が歪んで表示されます。

- -
-

付記: 画像が歪んでいると感じた時は、<canvas> の width と height 属性の値を設定して、CSS によるサイズの変更をしないようにしましょう。

-
- -

id 属性は 全ての要素が持つ属性 で <canvas> に固有なものではありません。これを利用することで、ユニークな ID を要素に持たせられます。ID を持たせることで、JavaScript の中から、その要素を探すのが簡単になります。

- -

<canvas> 要素は通常の画像と同じようにレイアウトされます。({{cssxref("margin")}} や {{cssxref("border")}}、 {{cssxref("background")}} といったルールも利用可能ですが、これらは実際に描画される画像には影響を与えません。スタイルが何も設定されていない場合、canvas は最初透明なものとして描画されます。スタイルとレイアウトに関しては専用のページを設けています。詳細は、そちらをご覧ください。

- -
-

代替コンテンツ

- -

<canvas> 要素は対応していないブラウザ、例えば Internet Explorer 9 以前、で表示するための代替コンテンツを定義できます。これは {{HTMLElement("img")}} というよりは、むしろ {{HTMLElement("video")}} や {{HTMLElement("audio")}}、{{HTMLElement("picture")}} 要素に似ています。

- -

代替コンテンツの定義方法はシンプルで、<canvas> 要素の内部に代わりに表示するコンテンツを記述します。対応していないブラウザは <canvas> を無視するため、その内部のコンテンツが表示されるというわけです。

- -

次の例では JavaScript によって canvas に対して、代替テキストが設定されています：

- -
<canvas id="stockGraph" width="150" height="150">
-  現在の株価: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

使用するブラウザを変更するよう利用者に伝えることは、利用者のために全くなりません。どのような代替テキスト / コンテンツを設定するのが適切かは make the canvas more accessible をご覧ください。

- -

</canvas>：閉じタグが必須です

- -

代替コンテンツを内部に持つ関係上、{{HTMLElement("img")}} 要素と異なって {{HTMLElement("canvas")}} 要素は閉じタグ (</canvas>) が必須となっています。タグを閉じなかった場合は、残りのページ全てが代替コンテンツとして処理され、その結果としてそれらが表示されなくなります。

- -

代替コンテンツが必要でない場合は、単に <canvas id="foo" ...></canvas> と書けば対応するブラウザで動作します。

- -

描画コンテキスト

- -

{{HTMLElement("canvas")}} は固定された大きさの描画可能領域を作成できます。この領域は、1 つ以上の描画コンテキストとして表現され、そのコンテキストを通じて描画領域を操作します。このチュートリアルでは、2 次元グラフィックスを描画するためのコンテキストについてのみ解説しますが、これ以外の描画コンテキストも存在します。その典型例が WebGL です。これは OpenGL ES に基づいた 3 次元グラフィックスを扱える描画コンテキストです。

- -

初期状態での canvas には何も描画されていません。ここに描画を行うには、まず JavaScript で描画コンテキストを取得する必要があります。 {{HTMLElement("canvas")}} 要素の {{domxref("HTMLCanvasElement.getContext", "getContext()")}} を呼ぶことで、描画コンテキストは取得できます。呼び出す際の引数によって、取得されるコンテキストの種類が変わります。"2d" を指定することで、2 次元のグラフィックスを扱える描画コンテキストが取得できます。これで取得されたコンテキストの詳細は {{domxref("CanvasRenderingContext2D")}} をご覧ください。

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

最初の行では {{domxref("document.getElementById()")}} メソッドを呼んで、DOM 中から {{HTMLElement("canvas")}} 要素をあらわすノードを探しています。2 行目では見つけた要素の getContext() メソッドを呼んで、描画コンテキストを取得しています。

- -
-

対応しているかどうかの確認

- -

{{HTMLElement("canvas")}} 要素に対応していないブラウザでは、代替コンテンツが表示されます。JavaScript からは getContext() メソッドの有無を調査することで、ブラウザが対応しているかどうかを確認できます。確認するためのコードは以下のようになります：

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

サンプルコード

- -

以上の点をまとめたサンプルコードは以下のようになります。このサンプルコードは、後の説明でも利用します。

- -
-

付記：スクリプトを HTML に埋め込むのは、よいやり方ではありません。この例では分かりやすさのために、仕方なく埋め込んでいます。

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

スクリプト中の draw() 関数はページのロード完了時に一度だけ呼び出されます。これは、document の {{event("load")}} イベントを利用しているためです。他の関数同様 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}} や {{domxref("WindowTimers.setInterval", "window.setInterval()")}}、他のイベントハンドラから呼び出すことができますが、今の所ページがロードされた時にのみ呼び出されます。

- -

このサンプルコードでは何も描画されない領域が表示されます。実際の動作は次で確認できます：

- -

{{EmbedLiveSample("サンプルコード", 160, 160)}}

- -

単純な描画

- -

手始めに単純な例を見てみましょう。次の例では重なり合う 2 つの四角形が描画されます。そのうちの 1 つは透明度が設定されており、下の色が透けて見えます。この例がどのように動作しているかは、次のページで解説します。

- -
<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8"/>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 50, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 50, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

この例は次のように動作します：

- -

{{EmbedLiveSample("単純な描画", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html b/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html deleted file mode 100644 index 99e2c55b69..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: canvas に図形を描く -slug: Web/Guide/HTML/Canvas_tutorial/Drawing_shapes -tags: - - Canvas - - Graphics - - HTML - - HTML Canvas - - HTML5 - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

canvas の環境をセットアップしましたので、canvas に描画する方法を詳しく見ていくことができます。この記事を読み終わると矩形、三角形、線、円弧、曲線を描く方法を学び、基本的な図形について理解できます。canvas にオブジェクトを描く際はパスを扱うことが不可欠ですので、その方法を見ていきます。

-
- -

グリッド

- -

- -

描き始める前に、canvas のグリッドもしくは 座標空間 について話す必要があります。前のページの HTML テンプレートは幅 150 ピクセル、高さ 150 ピクセルの canvas 要素を持っていました。右の図に、この画像とデフォルトのグリッドを重ねて描きました。普通 グリッド上の 1 単位は canvas 上の 1 ピクセルに相当します。このグリッドの原点は左上の角 ( 座標 (0,0) ) に位置します。全ての要素がこの原点から相対的に配置されます。よって青い正方形の左上の場所は左から x ピクセル、上から y ピクセル (座標 (x,y) ) に来ます。このチュートリアルの後半で原点を他の位置へずらす方法、グリッドを回転したり、伸縮したりする方法を見ることになります。今はデフォルトで我慢しましょう。

- -

矩形を描く

- -

{{Glossary("SVG")}} とは異なり、{{HTMLElement("canvas")}} は 2 つの原始図形「矩形」「パス（複数の点が線によって結ばれている）」のみをサポートしています。他の全ての図形は 1 つ以上のパスを組み合わせて作らなくてはなりません。幸いなことに、パスを描く一連の関数があり、とても複雑な図形を作ることができます。

- -

最初に矩形を見ていきましょう。canvas に矩形を描く 3 つの関数があります:

- -
-
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
-
塗りつぶされた矩形を描きます。
-
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
-
矩形の輪郭を描きます。
-
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
-
指定された領域を消去し、完全な透明にします。
-
- -

3 つの関数は同じパラメータをとります。x と y は矩形の左上の角の canvas 上での位置 (原点から相対的) を指定します。width と height は矩形のサイズを指定します。

- -

下は、前のページの draw() 関数ですが、この 3 つの関数を追加しました。

- -

矩形の例

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

結果は以下のように見えるはずです。

- -
{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}
- -

fillRect() 関数は 100x100 ピクセルの大きな黒色正方形を描きます。clearRect() 関数は中心から 60x60 ピクセルの正方形を取り除き、最後に strokeRect() が消去された正方形の中に 50x50 ピクセルの矩形の輪郭を描きます。

- -

後のページで clearRect() の代わりのメソッドを 2 つ見て、描く図形の色と輪郭のスタイルを変更する方法を見ます。

- -

次の節でみるパス関数と異なり、全ての 3 つの矩形関数は直ちに canvas に描きます。

- -

パスを描く

- -

パスについて見ていきましょう。パスは点のリストであり、それらは曲線かそうでない形状、およびさまざまな幅や色を設定可能な線分で結ばれます。パスやサブパスは、閉じることができます。パスを使って図形を描くには、 いくつかの余分な作業が必要です。

- -
    -
  1. 始めに、パスを作成します。
    2. -
  2. 次に、パスへ描画するために描画コマンドを使用します。
    3. -
  3. パスが作成されたら、描画するための stroke または fill を実行できます。
    4. -
- -

これらのステップで使用する関数を以下に示します:

- -
-
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
-
新しいパスを作成します。パスを作成すると以降の描画コマンドは、そのパスを構築するために直接作用します。
-
パスのメソッド
-
オブジェクトのためにさまざまなパスを設定するメソッド群です。
-
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
-
直線をパスに追加し、現在のサブパスの開始地点につなぎます。
-
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
-
輪郭をなぞる方式で、図形を描きます。
-
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
-
パスの内部エリアを塗りつぶして、単色の図形を描きます。
-
- -

パスを作る最初の作業は beginPath() メソッドを呼び出すことです。内部では、パスは図形を一緒に作るサブパス (線、円弧など) のリストとして保存されます。このメソッドが呼び出される毎に、リストはリセットされ新しい図形を始めることができます。

- -
注記: beginPath() を呼び出した直後や canvas を新規作成した直後など、現在のパスが空であるときに最初にパスを構築するコマンドは、実際は何であるかにかかわらず常に moveTo() として扱われます。このためパスをリセットした後はほぼ必ず、開始位置を明示することが必要になるでしょう。
- -

2 番目の作業は描かれる実際のパスを定義するメソッドを呼び出すことです。まもなくみることになります。

- -

3 番目は任意の作業ですが、closePath() メソッドを呼び出すことです。このメソッドは現在の点から始点に向けて直線を描くことで図形を閉じようとします。もし図形がすでに閉じられているかリストに点がひとつしかない場合はこの関数は何もしません。

- -
注記: fill() メソッドが呼ばれるときは開いている図形は自動的に閉じられ、closePath() メソッドを使う必要はありません。これは、stroke() を呼び出すときはあてはまりません。
- -

三角形の描画

- -

単純な図形 (三角形) を描くコードはこのようになります。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}
- -

表示結果は以下の様になります。

- -
{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}
- -

ペンの移動

- -

とても役に立つ関数である moveTo() は、自身は何も描画しませんが、上述のパスリストの一部になります。 1 枚の紙の上の 1 つの場所からペンか鉛筆を持ち上げてそれを次の場所に置くと考えるとよいでしょう。

- -
-
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
-
x と y で指定した座標に、ペンを移動します。
-
- -

canvas が初期化されるか beginPath() メソッドが呼ばれたとき、ほとんどの場合 moveTo() メソッドを始点を他の場所に置くために使います。moveTo() メソッドを繋がっていないパスを描くために使うこともできます。下のスマイリーを見てください。

- -

これをあなた自身で試すには、以下のコードを使うことができます。さきほど見た draw() 関数に貼り付けるだけです。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 外の円
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // 口 (時計回り)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左目
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右目
-    ctx.stroke();
-  }
-}
- -

表示結果は以下の様になります。

- -

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

繋がっている線を見るには moveTo() メソッドを取り除いてください。

- -
注記: arc() 関数とそのパラメータの解説は {{anch("Arcs","円弧")}} の節をご覧下さい。
- -

線

- -

直線を描くには lineTo() メソッドを使います。

- -
-
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
-
現在の描画位置から x と y で指定した位置に、線を描きます。
-
- -

このメソッドは 2 つの引数 x と y を取ります。それらは線の終点の座標です。始点は前回のパスに依存します。前回のパスの終点が始点になる、など。始点は moveTo() メソッドを使って変更することもできます。

- -

次の例では 2 つの三角形が描かれています。 1 つは塗られ、もう 1 つは輪郭線が描かれています。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

最初に新しい図形のパスを始めるために beginPath() メソッドが呼ばれています。次に 始点を望む位置に移動するために moveTo() メソッドが呼ばれています。三角形の 両側の辺を作る 2 つの線が描かれています。

- -
{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}
- -
- -

あなたは塗られた三角形と輪郭線の描かれたものとの違いに気がつくでしょう。上で述べたように、これはパスが塗られる( fill される) と図形は自動的に閉じられ、stroke されるときはそうでないからです。輪郭の描かれた三角形で closePath() を行わないと 2 つの線しか描かれず、三角形は完成しません。

- -

円弧

- -

円弧や円を描くために arc() または arcTo() メソッドを使います。

- -
-
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
-
(x, y) を中心の位置、radius を半径、startAngle を開始角度、endAngle を終了角度、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。
-
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
-
指定した制御点と半径によって円弧を描き、その前の描画位置と直線で接続します。
-
- -

arc メソッドを詳しく見ていきましょう。このメソッドは 6 つのパラメーターをとります。x と y は、円弧を描く円の中心座標です。radius はそのまま、半径です。startAngle と endAngle パラメーターは円弧の始まりと終わりをラジアンで定義します。始まりと終わりの角度は x 軸から計算します。anticlockwise パラメーターは true の時には円弧を反時計回りに、それ以外は時計回りの方向に描くブーリアン値です。

- -
-

注記: arc 関数の角度は度ではなく、ラジアンで計算されます。度からラジアンに変換するには以下の JavaScript 式を使うことができます : radians = (Math.PI/180)*degrees

-
- -

以下の例は上で見てきた例よりすこし複雑です。全て異なる角度と塗り方で 12 の異なる円弧を描きます。

- -

2 つの for ループは円弧の行と列のループです。全ての円弧毎に beginPath() を使って新しいパスを始めます。コードの中で、次に何が行われているか読みやすくするために全てのパラメーターを変数として書きましたが、いつもこのようにする必要はありません。

- -

x と y 座標は充分明確です。radius と startAngle は固定です。endAngle は最初の列が 180 度 (半円) から始まって、最後の列で完全な円を作るように 90 度ずつ増加します。

- -

clockwise パラメーターの文は最初と 3 番目の列では時計回りの円弧として 2 番目と 4 番目の列では反時計回りの円弧という結果になります。最後に、if 文は上半分は輪郭を描画された円弧を、下半分は塗られた円弧を作ります。

- -
-

注記: この例では、ほかの例より若干大きなサイズである 150 x 200 ピクセルの canvas が必要です。

-
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0;i < 4;i++) {
-      for(var j = 0;j < 3;j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x 座標
-        var y = 25 + i * 50; // y 座標
-        var radius = 20; // 円弧の半径
-        var startAngle = 0; // 円孤の始点
-        var endAngle = Math.PI + (Math.PI * j) / 2; // 円孤の終点
-        var anticlockwise = i % 2 !== 0; // 時計回りまたは反時計回り
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i > 1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
- -
{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}
- -

ベジェと二次曲線

- -

次に見ていく種類のパスはベジェ曲線です。三次および二次の種類が利用可能です。通常複雑な自然の図形を描くのに使われます。

- -
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
-
現在のペンの位置から x および y で指定した終端へ、cp1x および cp1y で指定した制御点を使用して二次ベジェ曲線を描きます。
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
-
現在のペンの位置から x および y で指定した終端へ、(cp1x, cp1y) および (cp2x, cp2y) で指定した制御点を使用して三次ベジェ曲線を描きます。
-
- -

これらの違いは右の画像を使うことで説明することができます。二次ベジェ曲線は始点と終点 (青い点) と 1 つの制御点 (赤い点) を持つのに対して、三次ベジェ曲線は 2 つの制御点を持ちます。

- -

それらのメソッドの両方の x と y パラメータは終点の座標です。cp1x と cp1y は最初の制御点、cp2x と cp2y は 2 番目の制御点の座標です。

- -

Adobe Illustrator のようなベクタードローイングソフトとは違い、何をやっているのかの直接の視覚的フィードバックが得られないので、二次および三次ベジェ曲線を使うことはとても挑戦的です。このことは複雑な図形を描くことをとても難しくします。以下の例で、いくつかの単純で基本的な図形を描きます、しかしもしあなたに時間と特に忍耐があればはるかに複雑な図形を作ることができます。

- -

これらの例で非常に難しいものは何もありません。 どちらの場合も、最終的に描かれた一連の曲線が完全な図形となるのを見ることになります。

- -

二次ベジェ曲線

- -

この例では、吹き出しをレンダリングするために複数の二次ベジェ曲線を使用しています。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // 二次曲線の例
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
-
- -
{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}
- -

三次ベジェ曲線

- -

この例では、三次ベジェ曲線を使ってハートを描画します。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // 三次ベジェ曲線の例
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
-
- -
{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}
- -

矩形

- -

canvas に直接矩形を描く例 ({{anch("Drawing rectangles","矩形を描く")}}) で見た 3 つのメソッドのほかに、開いているパスリストに矩形を追加する rect() メソッドがあります。

- -
-
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
-
(x, y) で指定した位置を左上の角にして、width および height で指定した幅および高さの矩形を描きます。
-
- -

このメソッドが実行される前に、パラメーターに (x,y) を持った moveTo() メソッドが自動的に呼ばれます。すなわち、始点が標準の位置に置かれます。

- -

組み合わせ

- -

このページの全ての例で図形につき一種類のパス関数のみを使ってきました。しかし、図形を作るのに使用できるパスの種類の制限は一切ありません。そこで、この最後の例では非常に有名なゲームのキャラクタを作るために全てのパス関数を組み合わせてみましょう。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0;i < 8;i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for(i = 0;i < 6;i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for(i = 0;i < 8;i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// 角丸の四角形を描画するためのユーティリティ関数
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
-
- -

以下の様な表示結果となります。

- -
{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}
- -

これらは非常に単純な例ですので、詳細は割愛します。ポイントは fillStyle を使用している点と、独自関数 roundedRect() を定義している点です。この様に繰り返し利用する可能性のある処理を関数化しておくと、コード量を減らすことができます。

- -

fillStyle の詳細についてはこのチュートリアルの後半で説明します。プロパティで、塗りの色を初期値の黒から白に、そしてもう一度黒に変更しています。

- -

Path2D オブジェクト

- -

最後の例で見たように、オブジェクトを描くための一連のパスや描画コマンドを、canvas に置くことができます。コードをシンプルにしてパフォーマンスを向上させるために最近のバージョンのブラウザで使用できる {{domxref("Path2D")}} オブジェクトは、描画コマンドをキャッシュあるいは記録することを可能にしています。これにより、パスをすばやく再実行できます。Path2D オブジェクトの構築方法を見ていきましょう:

- -
-
{{domxref("Path2D.Path2D", "Path2D()")}}
-
Path2D() コンストラクタは、新たにインスタンス化した Path2D オブジェクトを返します。任意で別のパス (コピーを作成)、あるいは SVG パスデータを構成する文字列を引数に指定できます。
-
- -
new Path2D();     // 空のパスオブジェクトを作成する
-new Path2D(path); // 別の Path2D オブジェクトを複製する
-new Path2D(d);    // SVG パスデータからパスを作成する
- -

これまで見てきた moveTo、rect、arc、quadraticCurveTo など、あらゆるパスメソッドを Path2D オブジェクトで使用できます。

- -

また Path2D API には、パスを結合するための addPath メソッドが追加されています。これは、複数の部品を組み合わせてオブジェクトを構築したい場合などに役立ちます。

- -
-
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
-
現在のパスに、変換行列 (任意指定) とともに、パスを追加します。
-
- -

Path2D の例

- -

この例では、矩形と円を作成します。どちらも Path2D オブジェクトとして保存しており、後で使用することができます。新たな Path2D API に合わせて、いくつかのメソッドが現在のパスに代わり任意で Path2D を受け入れられるように更新されました。ここでは、canvas に両方のオブジェクトを描くため、1つの path 引数を stroke および fill で使用しています。

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var circle = new Path2D();
-    circle.moveTo(125, 35);
-    circle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(circle);
-  }
-}
-
- -

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

- -

SVG パスを使用する

- -

canvas の新たな Path2D API の、もうひとつの強力な機能が、canvas でパスを初期化するために SVG パスデータを使用できることです。これにより、SVG と canvas の両方でパスデータを使い回すことができるでしょう。

- -

パスはある点に移動して (M10 10) 、そこから右へ水平に 80 ポイント移動 (h 80)、下へ 80 ポイント移動 (v 80) 、80ポイント 左へ移動 (h -80) 、そして始点へ戻ります (z)。この例は Path2D コンストラクタのページで確認できます。

- -
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/finale/index.html b/files/ja/web/guide/html/canvas_tutorial/finale/index.html deleted file mode 100644 index e28beb611e..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/finale/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 最後に -slug: Web/Guide/HTML/Canvas_tutorial/Finale -tags: - - キャンバス - - グラウフィックス - - チュートリアル -translation_of: Web/API/Canvas_API/Tutorial/Finale ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
- -
-

おめでとう! Canvas tutorialは終了です! ここでのナレッジはWebで2Dグラフィックスを作成する際に役立つでしょう。

-
- -

他の例とチュートリアル

- -

ここでは様々なデモや更なるcanvasについての例を紹介します。

- -
-
Codepen.io
-
ブラウザ上のフロントエンドディベロッパー向けのプレイグラウンドとコードエディターです。
-
HTML5 Canvas Tutorials
-
Canvas APIsの例です。
-
Game development
-
ゲームは最も人気な活動の一つです。標準に準拠したWebブラウザで実行できる、より良くより強力なゲームを開発するための新しい技術が定期的に登場しています。
-
- -

他の Web APIs

- -

これらのAPIはcanvasとグラフィックスを更に動かす際におそらく使われます

- -
-
WebGL
-
複雑なグラフィックスや3Dを含んだレンダリングのためのアドバンスドなAPIです。
-
SVG
-
スケーラブル・ベクター・グラフィックスを使用すると、スムーズなスケールを行うために描画されるサイズには関係なく、ベクター(ライン)とシェイプのセットとして画像を描画します。
-
Web Audio
-
WebAudioAPIは、Web上のオーディオを制御したり、ディベロッパーがオーディオのリソースを選択したり、エフェクトをオーディオに追加したり、オーディオ・ビジュアライザーを作成したり、空間的エフェクト(音響のような)を適用したり、他にも様々な処理を行うためのオーディオの多目的なシステムを提供します。
-
- -

質問

- -
-
Stackoverflow
-
質問のタグは"canvas"となります。
-
Comments about this tutorial – the MDN documentation community
-
このチュートリアルに対するコメントや感謝の言葉があるなら、是非我々に届けてほしいです。
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/index.html b/files/ja/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index b84af866ef..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -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/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html deleted file mode 100644 index 0975cec653..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: canvas の最適化 -slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas -tags: - - Advanced - - Canvas - - Graphics - - HTML - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

{{HTMLElement("canvas")}} 要素は、ウェブで 2D グラフィックスを描画するためにもっとも広く使用されているツールのひとつです。しかし、ウェブサイトやアプリが Canvas API の限界付近まで使用するようになって、パフォーマンスが悪化するようになりました。この記事では、 canvas 要素の使用を最適化して、グラフィックを確実に改善するための提案を行います。

-
- -

パフォーマンスに関する TIPS

- -

キャンバスのパフォーマンスを向上させるための TIPS 集を以下に掲載します。

- -

同様のプリミティブや繰り返し使用するオブジェクトをオフスクリーン canvas で事前にレンダリングする

- -

アニメーションフレーム毎に同じ描画操作を繰り返していることに気づいたら、あらかじめオフスクリーンキャンバスに描画しておくことを検討しましょう。そして、必要な時に本来のキャンバスにオフスクリーン画像を、最初の場所で生成したときのステップなしで描画することができます。

- -
myCanvas.offscreenCanvas = document.createElement('canvas');
-myCanvas.offscreenCanvas.width = myCanvas.width;
-myCanvas.offscreenCanvas.height = myCanvas.height;
-
-myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
-
- -

浮動小数点数値の座標を避けて整数を使用する

- -

canvas で整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

これはアンチエイリアス効果を生成するために、ブラウザーに追加の計算処理を強制します。これを避けるために、たとえば {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} を呼び出す際に {{jsxref("Math.floor()")}} を使用して、すべての座標で端数処理を行ってください。

- -

drawImage で画像のスケーリングを行わない

- -

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} でいつも画像のスケーリング処理を行うのではなく、さまざまなサイズの画像をオフスクリーン canvas でキャッシュしてください。

- -

複雑なシーンでは複数レイヤーの canvas を使用する

- -

アプリケーションでは、一部のオブジェクトは頻繁に動かしたり変更したりする必要があるのに対し、他のものは比較的静止していることが分かるかもしれません。この場合に可能な最適化は、複数の <canvas> 要素を使用してアイテムをレイヤー化することです。

- -

例えば、 UI があるゲームが最上位にあり、中間にゲームプレイの動作があり、最下位に静止した背景があるとします。この場合、ゲームを３つの <canvas> レイヤーに分割することができます。 UI はユーザーの入力のみに基づいて変化し、ゲームプレイレイヤーはフレーム毎に変化し、背景は基本的に変化しないままでいます。

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black;
-  }
-
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3; }
-  #game-layer { z-index: 2; }
-  #background-layer { z-index: 1; }
-</style>
-
- -

大きな背景画像に CSS を使用する

- -

静止した背景画像がある場合は、ただの {{HTMLElement("div")}} に CSS の {{cssxref("background")}} プロパティを使用し、 canvas の下に配置することで描画することができます。これにより、大きな画像を毎回 canvas に描画する処理を避けます。

- -

CSS transforms を使用して canvas をスケーリングする

- -

CSS 変形 は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きな canvas を縮小するよりも小さな canvas を拡大したほうが良好です。

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

透過をやめる

- -

アプリケーションが canvas を使用していて背後のものを透過させる必要がない場合は、 {{domxref("HTMLCanvasElement.getContext()")}} で描画コンテキストを生成する際に alpha オプションを false に設定しましょう。この情報を使用してブラウザーが描画を最適化する可能性があります。

- -
var ctx = canvas.getContext('2d', { alpha: false });
- -

その他の TIPS

- -
    -
  • canvas の呼び出しをひとまとめにします。たとえば、複数に分割した線分ではなくポリラインを描画します。
    • -
  • 不必要な canvas の状態変更を避けます。
    • -
  • 新しい状態の全体を描画せずに、スクリーンの差分だけを描画します。
    • -
  • 可能な限り {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} プロパティを避けます。
    • -
  • 可能な限り テキストレンダリング を避けます。
    • -
  • canvas をクリアーする別の方法を試します ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} 対 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} 対 canvas のリサイズ)
    • -
  • アニメーションで {{domxref("window.setInterval()")}} の代わりに {{domxref("window.requestAnimationFrame()")}} を使用します。
    • -
  • 高負荷な物理演算ライブラリーに注意してください。
    • -
- -

関連情報

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html deleted file mode 100644 index 33e9ef3e21..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Canvas とピクセル操作 -slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas -tags: - - Canvas - - Graphics - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
- -
-

これまで、canvas の実際のピクセルは見てきませんでした。ImageData オブジェクトを使用して、ピクセルデータを操作するためにデータ配列へ直接読み取りや書き込みを行うことが可能です。また、画像のスムージング (アンチエイリアシング) の制御方法や canvas の画像を保存する方法も見ていきます。

-
- -

ImageData オブジェクト

- -

{{domxref("ImageData")}} オブジェクトは、canvas オブジェクトの領域にあるピクセルデータを表します。これは以下の読み取り専用プロパティを持ちます:

- -
-
width
-
画像の幅をピクセル数で表します。
-
height
-
画像の高さをピクセル数で表します。
-
data
-
0 から 255 の間の (両端の値を含む) 整数データを RGBA の順で収めた一次元配列を表す {{jsxref("Uint8ClampedArray")}} です。
-
- -

data プロパティは、生のピクセルデータを参照するためにアクセス可能な {{jsxref("Uint8ClampedArray")}} を返します。それぞれのピクセルは 4 つの 1 バイト値 (赤、緑、青、アルファの順、すなわち "RGBA" 形式) で表します。また、それぞれの色成分は 0 から 255 の間の整数で表します。さらに、それぞれの成分は配列内で連続した添字が割り当てられており、左上のピクセルの赤色成分が配列の添え字 0 になります。配列の中でピクセルは左から右へ進み、さらに下へと進んでいきます。

- -

{{jsxref("Uint8ClampedArray")}} は height × width × 4 バイトのデータがあり、添字の範囲は 0 から (height×width×4)-1 になります。

- -

例えば画像の 50 行目の 200 列目にあるピクセルから青色成分の値を読み取るには、以下のようにします:

- -
blueComponent = imageData.data[((50*(imageData.width*4)) + (200*4)) + 2];
- -

Uint8ClampedArray.length 属性を読み取ると、ピクセル配列のサイズをバイト数で知ることができます:

- -
var numBytes = imageData.data.length;
-
- -

ImageData オブジェクトを作成する

- -

新たに空の ImageData オブジェクトを作成するには、{{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} メソッドを使用します。createImageData() メソッドは 2 種類の形式があります:

- -
var myImageData = ctx.createImageData(width, height);
- -

これは、特定の寸法の新たな ImageData オブジェクトを作成します。すべてのピクセルは透明な黒色に設定されます。

- -

anotherImageData で指定したオブジェクトと同じ寸法の、新たな ImageData オブジェクトを作成することもできます。新しいオブジェクトのピクセルは、すべて透明な黒色に設定されます。画像データはコピーされません!

- -
var myImageData = ctx.createImageData(anotherImageData);
- -

コンテキストのピクセルデータを取得する

- -

canvas コンテキストのピクセルデータの複製を持つ ImageData オブジェクトを取得するには、getImageData() メソッドを使用します:

- -
var myImageData = ctx.getImageData(left, top, width, height);
- -

このメソッドは (left,top)、(left+width, top)、(left, top+height)、(left+width, top+height) の点で四隅を表した canvas の領域のピクセルデータを表す ImageData オブジェクトを返します。点の座標は、canvas の座標空間の単位で指定します。

- -
-

注記: 返される ImageData オブジェクトで、canvas の外部にあるピクセルはすべて透明な黒色になります。

-
- -

このメソッドは、Manipulating video using canvas の記事でも説明しています。

- -

カラーピッカー

- -

この例では、マウスカーソルの下にある色を表示するために getImageData() メソッドを使用しています。ここでは現在のマウスカーソルの位置を layerX と layerY で求めて、getImageData() が提供するピクセル配列で該当位置のピクセルデータを探します。最後に、色を表示するための <div> で背景色とテキストを設定するために、配列データを使用します。

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ',' + data[1] +
-             ',' + data[2] + ',' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);
-
- -

{{EmbedLiveSample('A_color_picker', 610, 240)}}

- -

コンテキストにピクセルデータを描く

- -

putImageData() メソッドを使用して、コンテキストにピクセルデータを描くことができます:

- -
ctx.putImageData(myImageData, dx, dy);
-
- -

引数 dx と dy は、描画したいピクセルデータの左上の隅を描く位置を、コンテキストのデバイス座標で示します。

- -

例えば myImageData が表す画像全体をコンテキストの左上の隅から描くには、単純に以下のようにします:

- -
ctx.putImageData(myImageData, 0, 0);
-
- -

色のグレースケール化と反転

- -

この例ではすべてのピクセルの値を変更するためにイテレートを行って、putImageData() を使用して変更後のピクセル配列を canvas に書き戻しています。invert 関数は、単純に最大値の 255 からそれぞれの色の値を減算します。grayscale 関数は、単純に赤、緑、青の平均値を使用します。また、例えば x = 0.299r + 0.587g + 0.114b といった式による加重平均も使用できます。詳しくは Wikipedia の Grayscale (日本語版) をご覧ください。

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
-  var data = imageData.data;
-
-  var invert = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      data[i]     = 255 - data[i];     // red
-      data[i + 1] = 255 - data[i + 1]; // green
-      data[i + 2] = 255 - data[i + 2]; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var grayscale = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      var avg = (data[i] + data[i +1] + data[i +2]) / 3;
-      data[i]     = avg; // red
-      data[i + 1] = avg; // green
-      data[i + 2] = avg; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var invertbtn = document.getElementById('invertbtn');
-  invertbtn.addEventListener('click', invert);
-  var grayscalebtn = document.getElementById('grayscalebtn');
-  grayscalebtn.addEventListener('click', grayscale);
-}
-
- -

{{EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270)}}

- -

ズームとアンチエイリアシング

- -

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} メソッド、第 2 の canvas、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティの力を借りて、画像をズームアップして詳しく見ることができます。

- -

マウスカーソルの位置を取得して、そこから上下左右に 5 ピクセルの範囲の画像を切り取ります。そして切り取った画像を別の canvas にコピーして、望むサイズにリサイズします。ズーム用の canvas では、元の canvas から切り取った 10×10 ピクセルの画像を 200×200 ピクセルにリサイズしています。

- -
zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);
- -

アンチエイリアシングはデフォルトで有効ですので、ピクセルをはっきりさせるためにスムージングを無効化したいと考えるかもしれません。チェックボックスを切り替えると、imageSmoothingEnabled プロパティ (さまざまなブラウザ向けに接頭辞が必要です) の効果を確認できます。

- - - - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var zoomctx = document.getElementById('zoom').getContext('2d');
-
-  var smoothbtn = document.getElementById('smoothbtn');
-  var toggleSmoothing = function(event) {
-    zoomctx.imageSmoothingEnabled = this.checked;
-    zoomctx.mozImageSmoothingEnabled = this.checked;
-    zoomctx.webkitImageSmoothingEnabled = this.checked;
-    zoomctx.msImageSmoothingEnabled = this.checked;
-  };
-  smoothbtn.addEventListener('change', toggleSmoothing);
-
-  var zoom = function(event) {
-    var x = event.layerX;
-    var y = event.layerY;
-    zoomctx.drawImage(canvas,
-                      Math.abs(x - 5),
-                      Math.abs(y - 5),
-                      10, 10,
-                      0, 0,
-                      200, 200);
-  };
-
-  canvas.addEventListener('mousemove', zoom);
-}
- -

{{EmbedLiveSample('Zoom_example', 620, 490)}}

- -

画像を保存する

- -

{{domxref("HTMLCanvasElement")}} は、画像を保存する際に役に立つ toDataURL() メソッドを提供します。これは、引数 type で指定した形式 (既定値は PNG) で表した画像を持つ data URI を返します。返される画像の解像度は 96 dpi です。

- -
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
-
既定の設定。PNG 画像を作成します。
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
-
JPG 画像を作成します。オプションで、品質を 0 から 1 の範囲で指定できます。1 は最高品質、0 はほとんど見分けがつかなくなりますがファイルサイズを小さくできます。
-
- -

canvas から生成した data URI は、例えば任意の {{HTMLElement("image")}} のソースとして使用したり、ディスクに保存するために download 属性を持つハイパーリンクに投入することができます。

- -

また、canvas から {{domxref("Blob")}} を生成することもできます。

- -
-
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
-
canvas に含まれる画像を表す Blob オブジェクトを作成します。
-
- -

関連情報

- - - -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html b/files/ja/web/guide/html/canvas_tutorial/transformations/index.html deleted file mode 100644 index 066b5d2b84..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/transformations/index.html +++ /dev/null @@ -1,282 +0,0 @@ ---- -title: Transformations -slug: Web/Guide/HTML/Canvas_tutorial/Transformations -tags: - - Canvas - - Graphics - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial/Transformations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
- -
これまでのチュートリアルで、canvas のグリッドや座標空間について学びました。今まではデフォルトのグリッドしか使用しておらず、また必要に応じて canvas 全体のサイズを変更していました。変換 (transformations) には、元の canvas を別の場所に移す、回転する、拡大縮小するといった、より強力な手段があります。
- -

状態を保存および復元する

- -

変換のメソッドを見ていく前に、より複雑な描画を始めたときに不可欠になメソッドを 2 つ見ておきましょう。

- -
-
{{domxref("CanvasRenderingContext2D.save", "save()")}}
-
canvas 全体の状態を保存します。
-
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
-
直近に保存した canvas の状態を復元します。
-
- -

canvas の状態は、スタックに保存されます。save() メソッドを呼び出すたびに、現在の描画状態をスタックにプッシュします。描画状態は以下の情報で構成されます:

- -
    -
  • 適用された変換操作 (すなわち、後述する translate、rotate、scale)。
    • -
  • 以下の属性の、現在の値: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}、{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}、{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}、{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}、{{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}、{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}、{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}、{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}、{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}、{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}、{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}、{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}、{{domxref("CanvasRenderingContext2D.font", "font")}}、{{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}、{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}、{{domxref("CanvasRenderingContext2D.direction", "direction")}}、{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}
    • -
  • 現在のクリッピングパス。これは次の章で説明します。
    • -
- -

save() メソッドは、何回でも呼び出すことができます。restore() メソッドを呼び出すたびに、最後に保存された状態をスタックからポップして、すべての保存済み設定を復元します。

- -

save および restore の例

- -

この例は、連続した矩形のセットを描画するときに、描画状態のスタックがどのように機能するかを示します。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillRect(0,0,150,150);   // 既定の設定で矩形を描画
-  ctx.save();                  // 既定の状態を保存
-
-  ctx.fillStyle = '#09F';      // 設定変更
-  ctx.fillRect(15,15,120,120); // 新たな設定で矩形を描画
-
-  ctx.save();                  // 現在の状態を保存
-  ctx.fillStyle = '#FFF';      // 設定変更
-  ctx.globalAlpha = 0.5;
-  ctx.fillRect(30,30,90,90);   // 新たな設定で矩形を描画
-
-  ctx.restore();               // 以前の状態を復元
-  ctx.fillRect(45,45,60,60);   // 復元した設定で矩形を描画
-
-  ctx.restore();               // 以前の状態を復元
-  ctx.fillRect(60,60,30,30);   // 復元した設定で矩形を描画
-}
- - - -

最初のステップで、大きな矩形を既定の設定で描きます。次にこの状態を保存して、塗りつぶし色を変更します。そして、2 番目のやや小さい青色の矩形を描いて、状態を保存します。もう一度描画設定を変更して、3 番目の半透明な白色の矩形を描きます。

- -

ここまでは、これまでの章で行ってきたことによく似ています。しかし最初に restore() 文を呼び出したとき、スタックの先頭の描画状態が削除されて、その設定が復元されます。save() を使用して状態を保存しなければ、前の状態に戻すために塗りつぶし色や透過性を手動で変更しなければなりません。ここではプロパティが 2 つであり容易ですが、プロパティが多ければコードが一気にとても長くなります。

- -

2 番目の restore() 文を呼び出すと、元の状態 (1 番目の save を呼び出す前に設定した状態) を復元して、最後の矩形を再び黒色で描きます。

- -

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

- -

移動

- -

1 番目の変換メソッドとして、translate() を見ていきましょう。このメソッドは、canvas や canvas の原点をグリッド内の別の位置へ移動するために使用します。

- -
-
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
-
canvas や canvas の原点をグリッド上で移動します。x は水平方向の移動距離、y はグリッドを垂直方向の移動距離を示します。
-
- -

変換を行う前に canvas の状態を保存しておくことは、よいアイデアです。ほとんどの場合、元の状態に戻すためには逆の変換を行うよりも restore メソッドを呼び出すほうが簡単です。また、ループ内で変換を行っているときに canvas の状態の保存や復元を行わなければ、canvas の端の外側に描画したために、描いたものの一部を失ってしまうかもしれません。

- -

translate の例

- -

この例は、canvas の原点を移動する利点をいくつか示しています。translate() メソッドを使用しなければ、すべての矩形が同じ位置 (0,0) に描かれます。また translate() によって、fillRect() 関数で座標を手動で調整する必要なく、どこにでも自由に矩形を置くことができます。これにより若干理解しやすく、また使いやすくなります。

- -

draw() 関数で、for ループを使用して fillRect() 関数を 9 回呼び出しています。それぞれのループで canvas を移動して矩形を描き、その後に元の状態を復元します。描画位置を調節する translate() を頼って、fillRect() は毎回同じ座標を使用していることに注目してください。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i=0;i<3;i++) {
-    for (var j=0;j<3;j++) {
-      ctx.save();
-      ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';
-      ctx.translate(10+j*50,10+i*50);
-      ctx.fillRect(0,0,25,25);
-      ctx.restore();
-    }
-  }
-}
-
- - - -

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

- -

回転

- -

2 番目の変換メソッドは rotate() です。現在の原点を中心にして canvas を回転させるために使用します。

- -
-
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
-
現在の原点を中心にしてラジアンで示した angle の分、canvas を時計回りに回転します。
-
- -

回転の中心は、常に canvas の原点です。中心を変更するには、translate() メソッドを使用して canvas を移動しなければなりません。

- -

rotate の例

- -

この例は、まずは canvas の原点で矩形を回転するために rotate() メソッドを使用して、次に矩形自身の中心で回転するために translate() の助けを借りています。

- -
-

備忘: 角度はラジアン (radians) で表しており、度数 (degrees) ではありません。これは以下の方法で変換できます: radians = (Math.PI/180)*degrees

-
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 左の矩形を canvas の原点で回転する
-  ctx.save();
-  // blue rect
-  ctx.fillStyle = "#0095DD";
-  ctx.fillRect(30,30, 100, 100);
-  ctx.rotate((Math.PI/180)*25);
-  // 灰色の矩形
-  ctx.fillStyle = "#4D4E53";
-  ctx.fillRect(30,30, 100, 100);
-  ctx.restore();
-
-  // 右の矩形を矩形の中心で回転する
-  // draw blue rect
-  ctx.fillStyle = "#0095DD";
-  ctx.fillRect(150, 30, 100, 100);
-
-  ctx.translate(200, 80); // 矩形の中心に移動する
-                          // x = x + 0.5 * 幅
-                          // y = y + 0.5 * 高さ
-  ctx.rotate((Math.PI/180)*25); // 回転する
-  ctx.translate(-200, -80); // 元の位置に移動する
-
-  // 灰色の矩形を描く
-  ctx.fillStyle = "#4D4E53";
-  ctx.fillRect(150, 30, 100, 100);
-}
-
- -

矩形を中心で回転するために、canvas を矩形の中心へ移動した後に canvas を回転します。そして canvas を 0,0 へ移動した後に矩形を描きます。

- - - -

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

- -

スケーリング

- -

次の変換メソッドはスケーリングです。canvas のグリッドの単位を増減するために使用します。これは、図形やビットマップを縮小または拡大して描くために使用できます。

- -
-
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
-
canvas の単位を x (水平方向) または y (垂直方向) で指定した分スケーリングします。どちらの引数も実数です。1.0 より小さい値は単位あたりのサイズが減少、1.0 より大きい値は単位あたりのサイズが増加します。1.0 では単位あたりのサイズが変わりません。
-
- -

負数を使用すると軸を反転できます (例えば translate(0,canvas.height); scale(1,-1); で、原点が左下の隅にある有名なデカルト座標系になります)。

- -

デフォルトでは、canvas の 1 単位は 1 ピクセルとまったく同じです。例えば、スケーリング係数に 0.5 を適用すると 1 単位が 0.5 ピクセルになり、図形が半分のサイズで描かれます。同様にスケーリング係数を 2.0 に設定すると単位あたりのサイズが増えて、1 単位あたり 2 ピクセルになります。この結果、図形は 2 倍の大きさで描かれます。

- -

scale の例

- -

この例は、図形をさまざまなスケーリング係数で描きます。

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // シンプルな図形を描いて、スケーリングする
-  ctx.save();
-  ctx.scale(10, 3);
-  ctx.fillRect(1,10,10,10);
-  ctx.restore();
-
-  // 水平方向に反転する
-  ctx.scale(-1, 1);
-  ctx.font = "48px serif";
-  ctx.fillText("MDN", -135, 120);
-}
-
- - - -

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

- -

変形

- -

最後に、以下の変換メソッドで、変換行列によって直接変更することができます。

- -
-
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
-
引数で表した行列と、現在の変換行列で乗算を行います。変換行列は以下のとおりです: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
-
- -
-
いずれかの引数が Infinity になる場合は、メソッドで例外を発生させるのではなく行列を infinite としてマークしなければなりません。
-
- -

この関数の引数は以下のとおりです:

- -
-
a (m11)
-
水平方向のスケーリング。
-
b (m12)
-
水平方向のスキュー。
-
c (m21)
-
垂直方向のスキュー。
-
d (m22)
-
垂直方向のスケーリング。
-
e (dx)
-
水平方向の移動。
-
f (dy)
-
垂直方向の移動。
-
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
-
現在の変形を単位行列にリセットして、同じ引数で transform() メソッドを呼び出します。これは基本的に、現在の変形をアンドゥしてから指定した変形を行う操作を一度に行うものです。
-
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
-
現在の変形を単位行列にリセットします。これは ctx.setTransform(1, 0, 0, 1, 0, 0); を呼び出すことと同じです。
-
- -

transform と setTransform の例

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  var sin = Math.sin(Math.PI/6);
-  var cos = Math.cos(Math.PI/6);
-  ctx.translate(100, 100);
-  var c = 0;
-  for (var i=0; i <= 12; i++) {
-    c = Math.floor(255 / 12 * i);
-    ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
-    ctx.fillRect(0, 0, 100, 10);
-    ctx.transform(cos, sin, -sin, cos, 0, 0);
-  }
-
-  ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
-  ctx.fillRect(0, 50, 100, 100);
-}
-
- - - -

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
diff --git a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html b/files/ja/web/guide/html/canvas_tutorial/using_images/index.html deleted file mode 100644 index 588a662e5b..0000000000 --- a/files/ja/web/guide/html/canvas_tutorial/using_images/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: 画像を使う -slug: Web/Guide/HTML/Canvas_tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
- -
-

これまで、図形を作成してスタイルを適用する方法を見てきました。{{HTMLElement("canvas")}} のより面白い機能のひとつが、画像を扱えることです。これは動的な画像合成を行う、グラフの背景として使用する、ゲームのスプライトとして使用するなどといったことが可能です。PNG、GIF、JPEG といった、ブラウザがサポートする形式の外部画像を使用できます。同じページ上の別の canvas 要素によって生成された画像も、ソースとして使用できます!

-
- -

基本的には 2 ステップの手続きによって、画像を canvas にインポートします:

- -
    -
  1. {{domxref("HTMLImageElement")}} オブジェクトまたは別の canvas 要素への参照を、ソースとして取得します。URL を与えることでも、画像を使用できます。
    2. -
  2. drawImage() 関数を使用して、画像を canvas に描きます。
    3. -
- -

これを行う方法を見ていきましょう。

- -

描く画像を取得する

- -

canvas API は、以下のデータ形式を画像ソースとして使用できます:

- -
-
{{domxref("HTMLImageElement")}}
-
{{HTMLElement("img")}} 要素だけでなく、Image() コンストラクタを使用して作成した画像も含みます。
-
{{domxref("HTMLVideoElement")}}
-
HTML の {{HTMLElement("video")}} 要素を画像ソースとして使用すると、現在のフレームを動画から取得して、画像として使用します。
-
{{domxref("HTMLCanvasElement")}}
-
別の {{HTMLElement("canvas")}} 要素を画像ソースとして使用できます。
-
- -

これらのソースは集約的に、{{domxref("CanvasImageSource")}} 型から参照されています。

- -

canvas で使用する画像を取得する方法がいくつかあります。

- -

同一ページ上の画像を使用する

- -

以下のいずれかを使用して、canvas として同一ページ上の画像への参照を取得できます:

- -
    -
  • {{domxref("document.images")}} コレクション
    • -
  • {{domxref("document.getElementsByTagName()")}} メソッド
    • -
  • 使用したい特定の画像の ID がわかる場合は、特定の画像を取得するために {{domxref("document.getElementById()")}} を使用できます。
    • -
- -

ほかのドメインにある画像を使用する

- -

{{HTMLElement("img")}} 要素の {{htmlattrxref("crossorigin", "img")}} 属性 ({{domxref("HTMLImageElement.crossOrigin")}} プロパティに反映されます) を使用して、drawImage() を呼び出してほかのドメインから画像を読み込む許可を求めることができます。ホスティングドメインが画像のクロスドメインアクセスを許可している場合は、canvas を汚染せずに画像を使用できます。そうでない場合は、画像を使用すると canvas を汚染します。

- -

ほかの canvas 要素を使用する

- -

通常の画像と同様に、{{domxref("document.getElementsByTagName()")}} または {{domxref("document.getElementById()")}} メソッドを使用してほかの canvas 要素にアクセスできます。対象の canvas を使用する前に、そのキャンバスで描画を終えるようにしてください。

- -

より実践的な使用法のひとつが、別の大きな canvas のサムネイルビューとして第 2 の canvas を使用することです。

- -

最初から画像を作成する

- -

もうひとつの方法は、スクリプト内で新たな {{domxref("HTMLImageElement")}} オブジェクトを作成することです。そのために、便利な Image() コンストラクタを使用できます:

- -
var img = new Image();   // 新たな img 要素を作成
-img.src = 'myImage.png'; // ソースのパスを設定
-
- -

このスクリプトを実行すると、画像の読み込みが始まります。

- -

画像の読み込みが完了する前に drawImage() を呼び出しても、何も行いません (あるいは、古いブラウザでは例外が発生するかもしれません)。よって画像を読み込む前に描画しないようにするために、load イベントを使用する必要があります:

- -
var img = new Image();   // 新たな img 要素を作成
-img.addEventListener("load", function() {
-  // drawImage を実行する文をここに置く
-}, false);
-img.src = 'myImage.png'; // ソースのパスを設定
-
- -

これは、外部の画像を 1 つしか使用しない場合はよい方法ですが、複数の画像を追跡しなければならない場合は、より器用な方法に頼らなければなりません。画像の事前読み込み法を見ていくことはこのチュートリアルの対象を超えますが、心に留めておいてください。

- -

data: URL で画像を埋め込む

- -

画像を埋め込む別の方法が、data: url です。Data URL によって、画像を Base64 でエンコードした文字列として、コード内で完全に定義できます。

- -
var img = new Image();   // 新たな img 要素を作成
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

data URL の利点のひとつが、別にサーバとの通信を行うことなく即座に結果の画像を使用できることです。ほかに潜在的な利点として CSS、JavaScript、HTML、画像をひとつのファイルにカプセル化することもでき、ほかの場所へ持ち運びやすくなります。

- -

この方法の欠点は画像がキャッシュされないことと、大きな画像をエンコードした URL がとても長くなることです。

- -

動画のフレームを使用する

- -

{{HTMLElement("video")}} 要素が提供する動画のフレームも (動画が非表示であっても) 使用できます。例えば ID が "myvideo" である {{HTMLElement("video")}} 要素があるとき、以下のようなことができます:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

これは動画の {{domxref("HTMLVideoElement")}} オブジェクトを返します。このオブジェクトは先に述べたとおり、CanvasImageSource として使用できるオブジェクトのひとつです。

- -

画像を描く

- -

ソース画像オブジェクトへの参照を取得したら、drawImage() メソッドを使用して画像を canvas に描画できます。後ほど見るように、drawImage() メソッドをオーバーロードした派生形がいくつかあります。もっとも基本的な形式は以下のようなものです:

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
-
引数 image で指定した CanvasImageSource を、座標 (x, y) に描画します。
-
- -
-

SVG 画像は、ルート <svg> 要素で幅と高さを指定しなければなりません。

-
- -

例: シンプルな折れ線グラフ

- -

以下の例は、小さな折れ線グラフの背景として外部の画像を使用しています。背景画像を使用すると背景を生成するコードが不要になりますので、スクリプトをかなり小さくすることができます。この例では画像を 1 つしか使用しませんので、描画する文を実行するために image オブジェクトの load イベントハンドラを使用しています。drawImage() メソッドは背景画像を座標 (0, 0) に配置します。これは canvas の左上の隅です。

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    ctx.drawImage(img,0,0);
-    ctx.beginPath();
-    ctx.moveTo(30,96);
-    ctx.lineTo(70,66);
-    ctx.lineTo(103,76);
-    ctx.lineTo(170,15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

結果のグラフは以下のようになります:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

スケーリング

- -

drawImage() メソッドの第 2 の形式は引数が 2 つ追加されており、canvas に拡大・縮小した画像を配置することができます。

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
-
これは引数 width および height を追加しており、画像を canvas に描画する際のサイズを示します。
-
- -

例: 画像をタイリングする

- -

以下の例は画像を壁紙として使用して、canvas 上で数回繰り返して貼り付けています。ループ処理によって、さまざまな場所に縮小した画像を貼り付けました。以下のコードでは、最初の for ループで行の繰り返し処理を行います。2 番目の for ループで列の繰り返し処理を行います。画像は元のサイズの 3 分の 1 である、50x38 ピクセルに縮小しています。

- -
-

注記: 画像を拡大しすぎると不鮮明に、あるいは縮小しすぎると荒くなります。読みやすくしておかなければならない文字列が画像内にある場合は、サイズを変更しないほうがよいでしょう。

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    for (var i=0;i<4;i++){
-      for (var j=0;j<3;j++){
-        ctx.drawImage(img,j*50,i*38,50,38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

canvas の結果は以下のようになります:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

切り抜き

- -

drawImage() メソッドの第 3 かつ最後の形式は、画像ソースについて 8 個の引数が追加されています。これはソース画像の一部を切り抜いて、サイズ変更および canvas への描画を行います。

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-
この関数は、image から左上の隅が (sx, sy)、幅と高さが sWidth および sHeight である矩形で指定されるソース画像の領域を取得して、canvas の (dx, dy) で示した位置に配置して、dWidth および dHeight で指定したサイズに拡大・縮小します。
-
- -

何を行っているかを正しく理解するために、右の画像を見ると役に立つでしょう。始めの 4 つの引数は、ソース画像を切り抜く場所とサイズを定義します。最後の 4 つの引数は、描画先 canvas で画像を描画する矩形を定義します。

- -

切り抜きは、画像を合成する際に役に立つでしょう。ひとつの画像ファイルにすべての要素を置いておき、このメソッドを使用して完成形の描画結果に合成します。例えばチャートを作成したいときに、すべての必要なテキストをひとつのファイルに収めた PNG 画像を用意して、データに応じてチャートの目盛りをとても簡単に変更できるでしょう。ほかの利点として、すべての画像を個別に読み込む必要がありませんので、読み込みパフォーマンスが向上するでしょう。

- -

例: 画像をフレームに収める

- -

以下の例では前の例と同じサイの画像を使用していますが、頭の部分を切り抜いて額縁の中に合成しています。額縁の画像は、ドロップシャドウを含む 24 ビット PNG 画像です。GIF や 8 ビット PNG 画像と異なり、24 ビット PNG 画像は 8 ビットのアルファチャンネルが含まれていますので、マットカラーに悩まされることなく背景に重ねることができます。

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // スライス画像を描く
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // フレームを描く
-  ctx.drawImage(document.getElementById('frame'),0,0);
-}
- -

この例では、画像の読み込みに別の方法を使用しています。新しい {{domxref("HTMLImageElement")}} オブジェクトを作成して画像を読み込む代わりに、画像を HTML ソース内の {{HTMLElement("img")}} タグとして直接含めておき、そこから画像を取り込んでいます。この画像は、CSS の {{cssxref("display")}} プロパティを none に設定して隠しています。

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

スクリプト自体はとてもシンプルです。それぞれの {{HTMLElement("img")}} に ID 属性を割り当てており、{{domxref("document.getElementById()")}} を使用して簡単に選択できます。最初の画像からサイを切り抜いて canvas 上でサイズを調整するため単純に drawImage() を使用して、その後に第 2 の drawImage() を呼び出して枠を描きます。

- - - -

この章の最後の例では、小さなアートギャラリーを作ります。いくつかの画像を持つテーブルで、ギャラリーを構成します。ページを読み込むとそれぞれの画像のために {{HTMLElement("canvas")}} 要素を挿入して、そこに画像と額縁を描画します。

- -

ここでは、周囲に描く額縁を含むすべての画像が一定の幅および高さです。額縁をぴったり合わせるために画像の幅と高さを使用するよう、スクリプトを改良することができるでしょう。

- -

以下のコードは自明でしょう。{{domxref("document.images")}} コンテナに対するループ処理を行って、適宜新たな canvas 要素を追加します。おそらく、DOM についてあまり詳しくない場合に注意したほうがよいことは、{{domxref("Node.insertBefore")}} メソッドを使用していることです。insertBefore() は、ある要素 (image) の前に新たな要素 (canvas 要素) を挿入したいときに使用する、親ノード (テーブルのセル) のメソッドです。

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

こちらが、見栄えをよくするための CSS です:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

額縁付き画像を描く JavaScript が、すべてを結びつけます:

- -
function draw() {
-
-  // すべての画像に対するループ処理
-  for (var i=0;i<document.images.length;i++){
-
-    // 額縁の画像用の canvas は追加しない
-    if (document.images[i].getAttribute('id')!='frame'){
-
-      // canvas 要素を作成
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width',132);
-      canvas.setAttribute('height',150);
-
-      // 画像の前に挿入
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // canvas に画像を描く
-      ctx.drawImage(document.images[i],15,20);
-
-      // 額縁を追加
-      ctx.drawImage(document.getElementById('frame'),0,0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

- -

画像のサイズ変更の動作を制御する

- -

先に述べたとおり、サイズを変更した画像は変更処理の影響で、不鮮明またはブロック状のアーティファクトが発生します。描画コンテキスト内で画像のサイズを変更する際に使用する画像スムージングアルゴリズムを制御するために、描画コンテキストの {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} プロパティを使用できます。デフォルトではこれが true であり、画像のサイズを変更する際にスムージングを行います。以下のように、この機能は無効化できます:

- -
ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-
- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}
diff --git a/files/ja/web/guide/html/event_attributes/index.html b/files/ja/web/guide/html/event_attributes/index.html deleted file mode 100644 index 0c2047bce5..0000000000 --- a/files/ja/web/guide/html/event_attributes/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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/web/guide/html/html5/html5_element_list/index.html b/files/ja/web/guide/html/html5/html5_element_list/index.html deleted file mode 100644 index b5da7466db..0000000000 --- a/files/ja/web/guide/html/html5/html5_element_list/index.html +++ /dev/null @@ -1,585 +0,0 @@ ---- -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/web/guide/html/obsolete_things_to_avoid/index.html b/files/ja/web/guide/html/obsolete_things_to_avoid/index.html deleted file mode 100644 index 1c8a7cc261..0000000000 --- a/files/ja/web/guide/html/obsolete_things_to_avoid/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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" />
-
- -

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

- -
    -
  • HTML5 ではこの挙動を元にして、この構文が正式に採用されたという経緯があります。HTML5 で用いるのが良いでしょう。また、HTML5 で以前の構文を利用する事もできます。
    • -
  • Web 開発者の中には、適切なセマンティクスやユーザビリティを持つ HTML となっているかチェックする為に Lynx というテキストブラウザを利用する人がいます。新しい構文を用いると Lynx での表示に支障が出る場合がある点に注意して下さい。
    • -
- -

存在しない <meta> 要素

- -

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

- -
    -
  • <meta name="MSSmartTagsPreventParsing" content="true">。これは Internet Explorer 6 のベータ版でしか役に立ちません。このバージョンはもはや使用されず、またスマートタグ機能は削除されており復活することはないでしょう。
    • -
  • <meta name="robots" content="all">。robots 値が存在して、また正当であれば、all のような存在しない値を使用してはいけません。既定値は index, follow であり、これは基本的に、存在しない値 all で想定される動作です。<meta> 全体を削除してください。
    • -
  • <meta name="copyright" content="…">。この meta は存在しません。このタグは削除して著作権表示のページまたは箇所を作成して、それに rel="copyright" 値を持つ {{HTMLElement("link")}} HTML 要素でリンクしてください。
    • -
  • <meta name="rating" content="…">。この meta は存在しません。<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/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html b/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html deleted file mode 100644 index 08f5330b89..0000000000 --- a/files/ja/web/guide/html/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -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/web/guide/user_experience/using_the_page_visibility_api/index.html b/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html deleted file mode 100644 index 524153a17e..0000000000 --- a/files/ja/web/guide/user_experience/using_the_page_visibility_api/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Page Visibility API -slug: Web/Guide/User_experience/Using_the_Page_Visibility_API -tags: - - DOM - - Intermediate - - Tutorials -translation_of: Web/API/Page_Visibility_API ---- -
{{DefaultAPISidebar("Page Visibility API")}}
- -

タブを使って閲覧している場合、どのウェブページもバックグラウンドにあってユーザーから見えていない場合があります。 Page Visibility API では、現在ページが見えているかどうかを調べる機能とともに、文書が表示されたり非表示になったりした時を監視することができるイベントを提供します。

- -
-

メモ: The Page Visibility API は、文書が表示されていない時に不必要なタスクの実行を抑止することで、リソースを節約したり実行効率を上げたりするために特に有用です。

-
- -

ユーザーがウィンドウを最小化したり他のタブに切り替えたりした時、 API は {{event("visibilitychange")}} イベントを送信してリスナーにページの状態が変化したことを知らせます。イベントを検出していくつかの操作を実行したり、様々な動作をしたりすることができます。例えば、ウェブアプリで動画を再生している場合、ユーザーがタブをバックグラウンドにした場合に動画を一時停止させ、ユーザーがこのタブに戻ったときに再生を再開させたりすることができます。ユーザーは動画の位置に迷うことがなく、動画の音声が新しく前景になったタブの音声を邪魔せず、ユーザーがその間に動画を見落とすことがなくなります。

- -

{{HTMLElement("iframe")}} の可視状態は、親文書と同じになります。 CSS プロパティにより ({{cssxref("display", "display: none;")}} のように) <iframe> を隠しても visibility のイベントは発生せず、またフレームに含まれる文書の状態も変わりません。

- -

使用例

- -

Page Visibility API の使用例をいくつか考えてみましょう。

- -
    -
  • 画像のスライドショーがあるサイトで、ユーザーが見ていない間に次のスライドに進むべきではないもの
    • -
  • 情報をダッシュボードに表示するアプリケーションで、ページが見えていないときは更新情報をサーバーへ問い合わせてほしくないもの
    • -
  • 正確なページビューをカウントできるよう、ページがプリレンダリングされている状態を検出したい。
    • -
  • デバイスがスタンバイモードである (ユーザーが電源ボタンを押して、画面を消灯している) ときに、音声を止めたいサイト。
    • -
- -

以前、開発者はこれを検出するために不完全な代替手段を使用していました。例えば window で onblur/onfocus ハンドラーを登録することでページがアクティブではないときを知る助けになりますが、ページがユーザーから隠された状態であることは知らせてくれません。 Page Visibility API はこれを解決します。

- -
-

メモ: {{domxref("GlobalEventHandlers.onblur", "onblur")}} 及び {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} はユーザーがウィンドウを切り替えたことを教えてくれますが、非表示にしたという意味になるとは限りません。ページが非表示になるのは、ユーザーがタブを切り替えたり、タブを含むブラウザーウィンドウを最小化したりした時だけです。

-
- -

Policies in place to aid background page performance

- -

Separately from the Page Visibility API, user agents typically have a number of policies in place to mitigate the performance impact of background or hidden tabs. These may include:

- -
    -
  • Most browsers stop sending {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} callbacks to background tabs or hidden {{ HTMLElement("iframe") }}s in order to improve performance and battery life.
    • -
  • Timers such as {{domxref("WindowOrWorkerGlobalScope.setTimeout", "setTimeout()")}} are throttled in background/inactive tabs to help improve performance. See Reasons for delays longer than specified for more details.
    • -
  • Budget-based background timeout throttling is now available in modern browsers (Firefox 58+, Chrome 57+), placing an additional limit on background timer CPU usage. This operates in a similar way across modern browsers, with the details being as follows: -
      -
    • In Firefox, windows in background tabs each have their own time budget in milliseconds — a max and a min value of +50 ms and -150 ms, respectively. Chrome is very similar except that the budget is specified in seconds.
      • -
    • Windows are subjected to throttling after 30 seconds, with the same throttling delay rules as specified for window timers (again, see Reasons for delays longer than specified). In Chrome, this value is 10 seconds.
      • -
    • Timer tasks are only permitted when the budget is non-negative.
      • -
    • Once a timer's code has finished running, the duration of time it took to execute is subtracted from its window's timeout budget.
      • -
    • The budget regenerates at a rate of 10 ms per second, in both Firefox and Chrome.
      • -
    -
    • -
- -

Some processes are exempt from this throttling behavior. In these cases, you can use the Page Visibility API to reduce the tabs' performance impact while they're hidden.

- -
    -
  • Tabs which are playing audio are considered foreground and aren’t throttled.
    • -
  • Tabs running code that's using real-time network connections (WebSockets and WebRTC) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
    • -
  • IndexedDB processes are also left unthrottled in order to avoid timeouts.
    • -
- -

例

- -

ライブサンプルをご覧ください (音声つき動画あり)。

- -

この例では別のタブに切り替えたときに動画再生を一時停止、また元のタブに戻った時に再生を再開しており、以下のコードで作られました:

- -
// hidden プロパティおよび可視性の変更イベントの名前を設定
-var hidden, visibilityChange;
-if (typeof document.hidden !== "undefined") { // Opera 12.10 や Firefox 18 以降でサポート
-  hidden = "hidden";
-  visibilityChange = "visibilitychange";
-} else if (typeof document.msHidden !== "undefined") {
-  hidden = "msHidden";
-  visibilityChange = "msvisibilitychange";
-} else if (typeof document.webkitHidden !== "undefined") {
-  hidden = "webkitHidden";
-  visibilityChange = "webkitvisibilitychange";
-}
-
-var videoElement = document.getElementById("videoElement");
-
-// ページが隠れたとき、動画再生を一時停止する。
-// ページが表示されたとき、動画を再生する。
-function handleVisibilityChange() {
-  if (document[hidden]) {
-    videoElement.pause();
-  } else {
-    videoElement.play();
-  }
-}
-
-// ブラウザーが addEventListener または Page Visibility API をサポートしない場合に警告
-if (typeof document.addEventListener === "undefined" || hidden === undefined) {
-  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
-} else {
-  // Page Visibility の変更を扱う
-  document.addEventListener(visibilityChange, handleVisibilityChange, false);
-
-  // 動画が一時停止されたときに、タイトルを設定する。
-  // 一時停止したことを示す。
-  videoElement.addEventListener("pause", function(){
-    document.title = 'Paused';
-  }, false);
-
-  // 動画を再生するときに、タイトルを設定する。
-  videoElement.addEventListener("play", function(){
-    document.title = 'Playing';
-  }, false);
-
-}
-
- -

Document インターフェイスに追加されたプロパティ

- -

The Page Visibility API adds the following properties to the {{domxref("Document")}} interface:

- -
-
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
-
ページがユーザーから隠された状態であると思われる場合に true を、そうでない場合に false を返します。
-
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
-
文書の現在の可視状態を示す {{domxref("DOMString")}} です。取りうる値は以下の通りです。 -
-
visible
-
ページのコンテンツは少なくとも部分的に可視状態です。実際は、最小化されていないウィンドウのフォアグラウンドのタブにページがあることを意味します。
-
hidden
-
ページのコンテンツはユーザーから見えていません。実際は、文書がバックグラウンドのタブか最小化されているウィンドウにある、あるいは OS のスクリーンがロックされていることを意味します。
-
prerender
-
ページのコンテンツはプリレンダリングされており、ユーザーから見えていません (document.hidden では隠されているとみなされます)。文書は prerender の状態から始まるかもしれませんが、プリレンダリングは1つの文書は1回しか行われないので、他の状態からこの状態に移ることはありません。 -
メモ: すべてのブラウザーがプリレンダリングに対応しているわけではありません。
-
-
unloaded
-
ページがメモリからアンロードされている途中です。 -
メモ: すべてのブラウザーが unloaded の値に対応しているわけではありません。
-
-
-
-
{{domxref("Document.onvisibilitychange")}}
-
{{event("visibilitychange")}} イベントが発生したときに呼び出されるコードを提供する {{domxref("EventListener")}} です。
-
- -
//startSimulation および pauseSimulation は別途定義される
-function handleVisibilityChange() {
-  if (document.hidden) {
-    pauseSimulation();
-  } else  {
-    startSimulation();
-  }
-}
-
-document.addEventListener("visibilitychange", handleVisibilityChange, false);
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}初回定義
- -

ブラウザーの対応

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本対応13 {{property_prefix("webkit")}}
- 33		{{CompatGeckoDesktop(18)}}[2]1012.10[1]7
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoDesktop(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling57{{CompatGeckoDesktop(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本対応5.0[3]{{CompatGeckoMobile(18)}}[2]1012.10[1]7[4]
onvisibilitychange{{CompatVersionUnknown}}{{CompatGeckoMobile(56)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Budget-based background timeout throttling{{CompatNo}}{{CompatGeckoMobile(58)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] ブラウザーウィンドウを最小化しても visibilitychange イベントは発生せず、また hidden は true に変わりません。

- -

[2] Firefox 10 から Firefox 51 まで、このプロパティは -moz- 接頭辞を使用することができました。

- -

[3] Android 4.4 はこの機能に webkit の接頭辞付きで対応しています。

- -

[4] From iOS 11.0.2 onwards, the values are not correct in standalone mode (when you press "Add to Homescreen") and when the screen is locked (you pressed the power button). The value for hidden is false and visibilityState is visible.

- -

関連情報

- - diff --git a/files/ja/web/guide/using_formdata_objects/index.html b/files/ja/web/guide/using_formdata_objects/index.html deleted file mode 100644 index 605885878f..0000000000 --- a/files/ja/web/guide/using_formdata_objects/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -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/web/guide/writing_forward-compatible_websites/index.html b/files/ja/web/guide/writing_forward-compatible_websites/index.html new file mode 100644 index 0000000000..aa0e54539d --- /dev/null +++ b/files/ja/web/guide/writing_forward-compatible_websites/index.html @@ -0,0 +1,81 @@ +--- +title: Writing forward-compatible websites +slug: Web_Development/Writing_forward-compatible_websites +tags: + - CSS + - Compatibility + - DOM + - HTML + - JavaScript + - Web Development +translation_of: Web/Guide/Writing_forward-compatible_websites +--- +

このページでは、新しいバージョンのブラウザが公開されても壊れることのない Web サイトを記述する方法を説明します。
+
+ これはイントラネットや公衆向けでない Web サイトで特に重要です。私たちがあなたのコードを見ることができないので、それが壊れていることを確認できないのです。これらのすべてに従うことができない場合もありますが、可能な限り多くの事項に従うことで、Web サイトを将来にわたって有用な状態にすることの助けになります。

+

JavaScript

+

onfoo 属性でグローバル変数へアクセスする際に "window." 接頭辞を付加する

+

HTML の要素でイベントハンドラのコンテンツ属性 (onclick、 onmouseover など) が使用されているとき、それら属性でのすべての名前探索は始めに要素自身、次にフォームコントロール要素の場合はそのフォーム、そして document、さらに (あなたがグローバル変数を定義した) window の順に行われます。例えば、以下のマークアップがある場合は:

+
<div onclick="alert(ownerDocument)">Click me</div>
+
+

文字列をクリックすると div の ownerDocument をアラートで表示します。これは、var ownerDocument がグローバルスコープで宣言されている場合でも動作します。

+

これが意味することは、イベントハンドラのコンテンツ属性でグローバル変数にアクセスするときやグローバルに宣言された任意の関数を呼び出すとき、あなたの関数や変数と同じ名前の新たな DOM プロパティが仕様書で要素やドキュメントに追加され、またそれをブラウザが実装した場合に、常に名前が衝突した時点で探索が終わってしまいます。これが起きると、突如関数が呼び出されなくなります。この現象は HTML5 の進展に伴い、さまざまなサイトで何度も発生しています。

+

これを防ぐには、以下のように "window." を用いてグローバル変数にアクセスするのが最適です:

+
<script>
+  function localName() {
+    alert('Function localName has been called');
+  }
+</script>
+<div onclick="window.localName()">Clicking me should show an alert<div>
+
+

自身で管理しないスクリプトを連結しない

+

ファイルレベルで使用される ECMAScript の "use strict;" ディレクティブは、ファイル全体に適用されます。このため、非 Strict モードの動作に依存するスクリプトを Strict モードのスクリプトに付加すると、スクリプトが動作しなくなります。

+

使用する JavaScript ライブラリの作者に、上記のガイドラインに従っているかを確認する

+

好みのライブラリの開発者に、上記のガイドラインに従うことを提案しましょう。彼らが従わない場合、ライブラリが将来も問題を起こさないとは信頼できません。残念ながら、ライブラリはこれらのガイドラインに逆らっています。

+

検出

+

特定の機能の検出

+

ある機能を用いようとするとき、可能であればその機能を見つけるためにオブジェクト検出を行ってください。簡単な例として、body.style に "filter" があるかのテストが真になるブラウザは必ず Microsoft Internet Explorer であり、それゆえ例えばイベントハンドラで window.event オブジェクトが利用できるとは考えないでください。また、ある一定の DOM 機能をサポートしているブラウザは他の機能、特に非標準の DOM 機能もサポートしているとは考えないでください。あるいは逆に、他の機能をサポートしないとも考えないでください。例えば、script 要素で onload をサポートするブラウザは onreadystatechange をサポートしないと考えてはいけません。各ブラウザの動作が収束することにより、機能は追加や削除されます。また、不具合の修正も行います。これら 3 点は過去に発生しており、また今後も発生するでしょう。

+

従ってある機能の存在有無と別の機能の存在有無に関連はありませんので、ある機能やオブジェクトの検出結果から別のことを予測しないでください。

+

UA 検出を行わない

+

これはある機能 (ユーザエージェント (UA) 文字列内に特定の文字列が含まれていること) が別の機能の有無を暗に示すと考えられている、特に一般的な実例です。

+

UA 検出が必要な場合は、過去のブラウザのバージョンにのみ行う

+

UA 検出に頼る必要がある場合は、特定のブラウザの過去のバージョンに対して用いてください。始めに、未知のブラウザおよびあなたがテストで用いているブラウザの現行バージョンと将来のバージョン向けのデフォルトのコードパスがあります。そして、デフォルトのコードパスが特定のブラウザの過去のバージョンで動作せず、またそのコードパスで機能の欠落を検出することで問題点を発見できないときは、該当する過去のバージョンのブラウザを検出することでそのブラウザ向けのハックを追加してかまいません。

+

この提案において、"現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。例えばあなたのデフォルトのコードパスが Firefox Aurora で適切に動作するが、Firefox Beta や最新の release 版では不具合があるためにコードが動作しない場合は、テストを行った Aurora の Firefox バージョン番号を "現行" とみなし、一般向けに公開されていないものであっても Beta のバージョンを "過去" のバージョンと考えてください。

+

異なるブラウザ向けに分離したコードパスはむやみに作成しない

+

関係のあるコードパスの一つがすべてのブラウザで正しく動作するのに、わざわざオブジェクト検出や UA 検出に基づいて異なるコードを実行することは行わないでください。各ブラウザの動作がお互い収束するように変更され、そのために代替のコードパスを設定していたあなたのサイトが正常に動作しなくなってしまう可能性があります。

+

テストの実施

+

すべての主要なエンジンについてテストを行う

+

コードは少なくとも Firefox、Chrome または Safari (これらは同じ WebKit エンジンを基にしているため)、Opera、Internet Explorer でテストを行ってください。すべての現行ブラウザや未知のブラウザ向けに単一のコードパスを持つためこの提案に従えば、そのコードパスがすべての主要なエンジンで動作することをテストすることで、コードが将来にわたって動作する可能性がとても高くなります。

+

時々、各ブラウザがある機能を若干異なる形で実装します。主要なエンジンすべてで動作する単一のコードパスが得られた場合は、あなたが使用している機能の動作は各ブラウザ間で既に収束していることを意味します。一方、各ブラウザの動作が完全には収束していない場合は、どのエンジンの標準動作を支持するかが判明することに関係なくコードが動作します。

+

ブラウザ独自の機能や接頭辞

+

現行あるいは将来のバージョンのブラウザを目標にするハックを行わない

+

これは、現在ある不具合間の相関関係が将来の不具合間の相関関係を暗に示すと考えられている一般的な事例です。現行バージョンでは解決している不具合に関するハックを、過去のバージョンのブラウザに対して適用することは問題ありません。ブラウザが不具合 X を修正すると、不具合 X が存在するリリースすべてには不具合 Y もあることが確実にわかり、不具合 X が存在することを不具合 Y の回避策の適用基準として用いることができます。

+

この提案において、前出の UA 検出でのアドバイスのように "現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。

+

最新の非標準機能に依存することを避ける

+

接頭辞ありの機能であっても、それを使用することは危険です。仕様書の進展に伴い、ブラウザの接頭辞ありの実装が仕様書に追随して変更されることがあります。またその機能が標準化されると、接頭辞ありのバージョンは削除されるでしょう。

+

接頭辞が付加された非標準の機能は、実験やフィードバックを行うためにブラウザの開発者が提供しているものであり、一般に展開することを意味していません。これらの機能を使うことを選択した場合は、機能の変更に伴って頻繁にサイトの更新が必要であることを覚悟してください。

+

(標準化されていても) 広く実装されていない最新機能を用いる際は縮退処理のテストを行う

+

あなたが用いている機能を実装していないブラウザ でどう動作するか (そのようなブラウザを Web サイトの業務で日常使用していない場合は特に)、必ずテストを行ってください。

+

ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない

+

ベンダー接頭辞が付加されている機能は、その動作が将来変更されるかもしれません。ブラウザがある機能を接頭辞なしで公開しても、利用可能であれば接頭辞なし版を常に使用するようにすることで、過去のリリース向けに接頭辞あり版を使用することができます。良い例として、make-it-pretty プロパティの "sometimes" 値について接頭辞あり版とは異なる動作を接頭辞なし版に実装して公開した、-vnd CSS 接頭辞を用いるブラウザベンダー向けの記述を示します:

+
<style>
+  .pretty-element {
+    -vnd-make-it-pretty: sometimes;
+    make-it-pretty: sometimes;
+  }
+</style>
+
+

上記の例で、規則中の宣言の順番は重要です。接頭辞のないものは、最後に置くことが必要です。

+

少なくとも一つのブラウザがサポートするまで、接頭辞のない CSS プロパティや API は使用しない

+

何らかの機能について接頭辞なし版がある程度広くサポートされるまでは、その動作が突然変更されることがあります。特に、実際に接頭辞なし版をサポートしているブラウザがない機能は使用しないでください。接頭辞あり版の文法と完成版の文法が同じであると考えてはいけません。

+

良好なコード

+

> の欠落を防ぐ

+

検証ツールを用いることがこれを確実にする方法の一つですが、あなたの Web サイト全体を検証しないとしてもすべての > 文字が置かれていることを確認してください。> が欠落していると、後ろのタグの名前が前のタグの属性であると判断されて予期せぬ状況に陥る場合があります。これはしばらくの間は動作するかもしれませんが、仕様書でその属性に意味が与えられると動作しなくなります。以下の例は HTML5 をサポートしないブラウザでは動作しますが、HTML5 をサポートするブラウザでは動作しません:

+
<form action="http://www.example.com">
+  <input type="submit" value="Submit the form"
+</form>
+
+

これは input タグで > が欠落しているためです。

+

コード中で動作しない実験的な部分は残さない

+

何か行いたいことがあって CSS プロパティを使用してみたが効果がなかった場合、そのプロパティは削除してください。将来、予期しない動作が発生する可能性があります。

+

{{ languages( { "en": "en/Web_development/Writing_forward-compatible_websites"} ) }}

diff --git a/files/ja/web/html/element/command/index.html b/files/ja/web/html/element/command/index.html deleted file mode 100644 index ff02ae0e96..0000000000 --- a/files/ja/web/html/element/command/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: ': HTML コマンド要素' -slug: Web/HTML/Element/command -tags: - - Command - - HTML - - HTML commands - - HTML5 - - 'HTML:Element' - - 'HTML:Element Reference' - - Obsolete -translation_of: Web/HTML/Element/command ---- -
{{obsolete_header()}}
- -

HTML のコマンド要素 (<command>) はユーザーが実行することができるコマンドを表します。コマンドは普通、メニューやツールバーのコンテンツの一部として使われます。しかし、ページ上のどこでも使用できます。

- -
-

<command> 要素は W3C の仕様書に含まれていますが、 WHATWG の仕様書には含まれておらず、ブラウザーの互換性もありません。非標準で Edge と Firefox でしか対応していませんが、代わりに {{HTMLElement("menuitem")}} 要素を使用してください。

-
- - - - - - - - - - - - - - - - - - - - - - - - -
コンテンツカテゴリフローコンテンツ, 記述コンテンツ, メタデータコンテンツ
許可されている内容なし。これは{{Glossary("empty element", "空要素")}}です。
タグの省略開始タグは必須です。終了タグは、空要素であるため使用できません。
許可されている親要素{{HTMLElement("colgroup")}} のみですが、これは開始要素が必須ではないので暗黙的に定義されることがあります。 {{HTMLElement("colgroup")}} は {{HTMLElement("span")}} を子として持ってはなりません。
DOM インターフェイス{{domxref("HTMLCommandElement")}}
- -

属性

- -

この要素にはグローバル属性があります。

- -
-
{{htmlattrdef("checked")}}
-
コマンドが選択されているかを示します。 type 属性が checkbox または radio でなければ指定できません。
-
{{htmlattrdef("disabled")}}
-
コマンドが使用不可であることを示します。
-
{{htmlattrdef("icon")}}
-
コマンドを表す画像を与えます。
-
{{htmlattrdef("label")}}
-
ユーザに対して表示する、コマンドの名称です。
-
{{htmlattrdef("radiogroup")}}
-
この属性はコマンド自身を切り替えた時に切り替えられる、 type が radio であるコマンドのグループ名を与えます。この属性は、 type 属性が radio でなければ指定できません。
-
{{htmlattrdef("type")}}
-
この属性は、コマンドの種類を示します。以下の3つの値のうち1つが使用できます。 -
    -
  • -

    command または空文字列はデフォルトの状態で、通常のコマンドを示します。

    -
    • -
  • -

    checkbox は、コマンドがチェックボックスで切り替え可能であることを示します。

    -
    • -
  • -

    radio は、コマンドがラジオボタンで切り替え可能であることを示します。

    -
    • -
-
-
- -

例

- -
<command type="command" label="Save"
-    icon="icons/save.png" onclick="save()">
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}}
- -

ブラウザーの互換性

- - - -

{{Compat("html.elements.command")}}

- -

{{ HTMLRef }}

diff --git a/files/ja/web/html/element/element/index.html b/files/ja/web/html/element/element/index.html deleted file mode 100644 index 5bc66fccb6..0000000000 --- a/files/ja/web/html/element/element/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ': カスタム要素 (廃止)' -slug: Web/HTML/Element/element -tags: - - Element - - HTML - - Obsolete - - Web Components - - custom elements - - shadow dom -translation_of: Web/HTML/Element/element ---- -
{{HTMLRef}}{{obsolete_header}}
- -

廃止された HTML の <element> 要素は、ウェブコンポーネントの仕様書の一部でした。新しいカスタム DOM 要素を定義するために使用することを意図していました。これは JavaScript からの新しいカスタム要素を生成する方法に取って代わられ、削除されました。

- -
-

メモ: この要素は仕様書から削除されました。仕様書の編集者からの情報はこちらを参照してください。

-
- - - - - - - - - - - - - - - - - - - - - - - - -
コンテンツカテゴリー透過的コンテンツ
許可されているコンテンツ???
タグの省略{{no_tag_omission}}
許可されている親コンテンツ???
DOM インターフェイス{{domxref("HTMLElement")}}
- -

属性

- -

この要素にはグローバル属性があります。

- -

仕様書

- -

<element> 要素は以前、カスタム要素の仕様書の草稿に含まれていましたが、削除されました。

- -

ブラウザーの互換性

- - - -

{{Compat("html.elements.element")}}

- -

関連情報

- -
    -
  • ウェブコンポーネント: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}
    • -
diff --git a/files/ja/web/html/forms_in_html/index.html b/files/ja/web/html/forms_in_html/index.html deleted file mode 100644 index abf99e2af7..0000000000 --- a/files/ja/web/html/forms_in_html/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Forms in HTML5 -slug: Web/HTML/Forms_in_HTML -translation_of: Learn/HTML/Forms/HTML5_updates ---- -

{{ gecko_minversion_header("2") }}

-

HTML5 のフォーム関連要素/属性は HTML4 よりも幅広いマークアップを提供し、また HTML4 時代に必要とされた長たらしいスクリプトやスタイルシートを書く手間を省いてくれます。HTML5 のフォーム機能は、Web サイトごとに異なっている入力へのフィードバックに今より優れた一貫性をもたらし、より良いユーザエクスペリエンスを提供します。また、スクリプトを無効化したブラウザでも同様の体験を提供します。

-

このページでは、Gecko/Firefox がサポートするフォーム機能のうち、新しいもの、もしくは変更されたものについて紹介します。

-

<input> 要素

-

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("type", "input") }} 属性に新しい値が追加されました。

-
  • search: 検索フィールドを表します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。
  • tel: 電話番号を入力します。改行が入力されても自動的に取り除かれますが、それ以外に値の制約はありません。これは電話番号の表記が国によって異なることにあります。ユーザーが入力する値に制約を与えたい場合は {{ htmlattrxref("pattern", "input") }} 属性や {{ htmlattrxref("maxlength", "input") }} 属性を利用できます。
  • url: URL を入力します。改行や値の最初と最後に空白が入力されると自動的に取り除かれます。

  • email: メールアドレスを入力します。改行が入力されても自動的に取り除かれます。非妥当なメールアドレスが入力されるとフォームは送信されません。メールアドレスの形式は、次の ABNF 記法 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) を満たさなければなりません（atext は RFC 5322 の section 3.2.3 で、ldh-str は RFC 1034 の section 3.5 で定義されています）。

    Note: {{ htmlattrxref("multiple", "input") }} 属性がこの {{ HTMLElement("input") }} 要素に指定された場合、複数のメールアドレスをカンマで区切り入力することができます。しかし、この機能はまだ Firefox に実装されていません。
    • -
-

{{ HTMLElement("input") }} 要素には新しい属性も追加されています。

-
  • {{ htmlattrxref("list", "input") }}: {{ HTMLElement("datalist") }} 要素の ID を指定します。datalist 要素の内容は {{ HTMLElement("option") }} 要素で、この内容がフィールドのサジェスト領域にヒントとして表示されます。
  • {{ htmlattrxref("pattern", "input") }}: フィールドがとりうる値の入力形式を正規表現で記述します。この属性は {{ htmlattrxref("type", "input") }} 属性が text, tel, search, url, email のいずれかである場合に利用可能です。
  • {{ htmlattrxref("formmethod", "input") }}: 送信時の HTTP メソッド (GET もしくは POST) を指定します。この属性は {{ HTMLElement("form") }} 要素の {{ htmlattrxref("method", "form") }} 属性を上書きします。{{ htmlattrxref("formmethod", "input") }} 属性は {{ htmlattrxref("type", "input") }} 属性が image もしくは submit の場合に利用可能です。
  • {{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: 検証を通らなかった際に表示されるテキストを指定します。この属性は Mozilla の固有拡張であり、非標準なものです。
    • -

<form> 要素

-

{{ HTMLElement("form") }} 要素に新しい属性が追加されました。

-
  • {{ htmlattrxref("novalidate", "form") }}: フォーム送信時に実行される検証機能を無効化します。
    • -
-

<datalist> 要素

-

{{ HTMLElement("datalist") }} 要素は {{ HTMLElement("option") }} 要素を内容に持つ、{{ HTMLElement("input") }} フィールドのサジェストを定義します。

-

{{ HTMLElement("input") }} 要素の {{ htmlattrxref("list", "input") }} 属性から、特定の {{ HTMLElement("datalist") }} 要素を指定します。

-

<output> 要素

-

{{ HTMLElement("output") }} 要素は計算結果を表示します。

-

{{ htmlattrxref("for", "output") }} 属性を使って、output 要素と計算に利用する文書内の他の要素 (入力や変数など) とを関連づけることができます。{{ htmlattrxref("for", "output") }} 属性の値は計算に利用する要素の ID を空白で区切り入力します。

-

{{ non-standard_inline() }} Gecko 2.0 では {{ HTMLElement("output") }} 要素に任意のフォーム検証とエラーメッセージを定義でき、また {{ Cssxref(":invalid") }}, {{ Cssxref(":valid") }}, {{ Cssxref(":-moz-ui-invalid") }}, {{ Cssxref(":-moz-ui-valid") }} といった CSS 擬似クラスを適用することができます。これにより、特定の入力値ではないがビジネスルールに抵触するような計算結果の制約 (例: 「パーセンテージの合計が 100 を超えてはいけない」) を検証することができます。

-

placeholder 属性

-

{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("placeholder", "input") }} 属性は、フィールドに入力できる値のヒントを提示します。プレースホルダに指定するテキストには CR や LF を記述することはできません。

-

autofocus 属性

-

{{ htmlattrxref("autofocus", "input") }} 属性はページのロード時に自動的にフォーカスのあたるべきフォームコントロールを指定します。ユーザーの行動が優先されるため、すでに別のコントロールに入力している場合などには自動的にフォーカスされません。autofocus 属性を与えられる要素は文書中でただ 1 つです。この属性は真偽値属性であり、{{ HTMLElement("input") }}, {{ HTMLElement("button") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素に指定可能です。ただし、{{ htmlattrxref("autofocus", "input") }} 要素の {{ htmlattrxref("type", "input") }} 属性が hidden を値にもつ場合、この属性を利用することができません (つまり、隠れたコントロールへ自動的にフォーカスさせることはできません)。

-

label.control DOM プロパティ

-

HTMLLabelElement DOM インターフェースは HTML の {{ HTMLElement("label") }} 要素が持つ属性に加えて、新しいプロパティを備えています。control プロパティは、ラベルに結びついたコントロールを返します。つまり、このラベルがどの要素のコントロールなのかを知ることができます。コントロールは要素の {{ htmlattrxref("for", "label") }} 属性もしくは要素の最初の子孫コントロール要素から決定されます。

-

フォーム検証

-

HTML5 はフォームに入力された値をクライアントサイドで検証するための構文及び API を提供しています。この検証機能はサーバーサイドの検証を置き換えるものではありません。セキュリティやデータの整合性といった点からサーバーサイドの検証は必要です。しかし、入力したデータについてユーザーにすぐフィードバックできるため、クライアントサイドの検証はより良いユーザーエクスペリエンスを提供します。

-

{{ HTMLElement("input") }} 要素に title 属性が指定されている場合、その内容が検証に失敗した際のエラーメッセージとして表示されます。属性値が空の場合、ツールチップは表示されません。属性が指定されていない場合は、標準の検証メッセージ ({{ htmlattrxref("x-moz-errormessage") }} 属性もしくは setCustomValidity() メソッドで指定) が使用されます。

-
Note: フォームの検証はフォーム中の {{ HTMLElement("button") }} 要素ではサポートされていません。フォームの妥当状態と連動するスタイルをボタンに与えたい場合は {{ cssxref(":-moz-submit-invalid") }} 擬似クラスを利用してください。
-

フォーム検証の HTML 構文

-

次の HTML5 構文によって、フォームに入力する内容に制約をかけることができます。

-
  • {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("required", "input") }} 属性は、その要素が入力必須なことを示します。({{ HTMLElement("input") }} 要素の場合、{{ htmlattrxref("type", "input") }} 属性の値によって適用可能かどうかが異なります。)
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("pattern", "input") }} 属性は、入力された値がとりうるべき値の形式を正規表現で指定します。
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性は、要素に入力可能な値の最小値/最大値を指定します。
  • {{ HTMLElement("input") }} 要素の {{ htmlattrxref("step", "input") }} 属性は、({{ htmlattrxref("min", "input") }}, {{ htmlattrxref("max", "input") }} 属性と使うことで) 入力可能な値の粒度に制約を設けます。指定可能な値にそぐわない値が入力された場合、その値は検証を通りません。
  • {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 要素の {{ htmlattrxref("maxlength", "input") }} 属性は、ユーザーがそのフィールドに入力できる最大文字数 (Unicode のコードポイント) を指定します。
  • {{ htmlattrxref("type", "input") }} 属性の値 url, email は、入力された値がそれぞれ妥当な URL、もしくはメールアドレスなのかを検証します。
    • -
-

{{ HTMLElement("form") }} 要素の {{ htmlattrxref("novalidate", "form") }} 属性、{{ HTMLElement("button") }} 要素の {{ htmlattrxref("formnovalidate", "button") }} 属性、{{ htmlattrxref("type", "input") }} に submit もしくは image を持つ {{ HTMLElement("input") }} 要素の {{ htmlattrxref("formnovalidate", "input") }} 属性を使用すれば、検証を行わないようにすることも可能です。これらの属性は、フォーム送信時に検証を行わないことを示します。

-

フォーム検証 API

-

次の DOM プロパティとメソッドにより、クライアントサイドのスクリプトから検証をかけることが可能です。

-
  • HTMLFormElement オブジェクトの checkValidity() メソッドは、フォームが検証を通ったかそうでないかを返します。フォームに関連づけられた要素すべてが制約を満たす場合に true を、そうでない場合は false を返します。
  • フォーム連携要素に、次のプロパティとメソッドが用意されています。
    • willValidate プロパティは、要素が制約の設定対象ではない場合に false を返します。
    • validity プロパティは、要素の妥当性状態を表す ValidityState オブジェクトを返します。
    • validationMessage プロパティは、制約を満たせない場合その要素に関連するメッセージを返します。
    • checkValidity() メソッドは、その要素が制約を満たせない場合に false を、そうでない場合は true を返します。
    • setCustomValidity() メソッドは、独自の検証メッセージを設定します。このメソッドにより、定義済みのメッセージよりもさらに細かく制約について説明できます。
    • -
-

{{ languages({"en": "en/HTML/HTML5/Forms_in_HTML5"}) }}

-

{{ HTML5ArticleTOC() }}

diff --git a/files/ja/web/html/global_attributes/dropzone/index.html b/files/ja/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 290b577040..0000000000 --- a/files/ja/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
- -

dropzone グローバル属性 は、 HTML Drag and Drop API を使用して要素上にどのようなコンテンツをドロップできるかを示す列挙型属性です。以下の値を使用できます。

- -
    -
  • copy: ドロップにより、ドロップした要素のコピーを生成することを示す
    • -
  • move: ドロップされた要素は新しい場所に移動されることを示す
    • -
  • link: ドラッグしたデータへのリンクを生成する
    • -
- -

仕様書

- - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義。
- -

ブラウザーの互換性

- - - -

{{Compat("html.global_attributes.dropzone")}}

- -

関連情報

- - diff --git a/files/ja/web/html/html_extensions/index.html b/files/ja/web/html/html_extensions/index.html deleted file mode 100644 index 6e0d715d5d..0000000000 --- a/files/ja/web/html/html_extensions/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: HTML Extensions -slug: Web/HTML/HTML_Extensions -tags: - - HTML ---- -

Mozilla ブラウザは、標準を拡張するいくつかの HTML タグをサポートしています。その一部がドキュメント化されています。

- -
-

{{ languages( { "en": "en/HTML/HTML_Extensions" } ) }}

-
diff --git a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html deleted file mode 100644 index ccd6c1125f..0000000000 --- a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_(pac)_file/index.html +++ /dev/null @@ -1,731 +0,0 @@ ---- -title: プロキシ自動設定ファイル -slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file -tags: - - Necko - - Networking - - PAC - - Proxy -translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file ---- -
{{HTTPSidebar}}
- -
プロキシ自動設定 (Proxy Auto-Configuration, PAC) ファイルは、ウェブブラウザーのリクエスト (HTTP, HTTPS, FTP 等) を直接宛先に送るか、ウェブプロキシサーバーに転送するか決める JavaScript の関数です。次の JavaScript 関数を PAC ファイル内に記述します。
- -
function FindProxyForURL(url, host) {
-  // ...
-}
- -

構文

- -
function FindProxyForURL(url, host)
- -

引数

- -
-
url
-
アクセスする URL です。 https:// の URL ではパスとクエリの部分が削除されます。 Chrome (バージョン52～73) ではポリシーで PacHttpsUrlStrippingEnabled を false に設定するか、コマンドラインで --unsafe-pac-url フラグを指定することで無効にすることができます (Chrome 74では、フラグのみが動作します。75以降では、パスの削除を無効にする方法はありません。 Chrome 81 では、パスの削除は HTTP の URL では適用されませんが、 HTTPS に合わせて変更される予定です。)。 Firefox では、設定値は network.proxy.autoconfig_url.include_path です。
-
host
-
URL から抽出したホスト名です。これは利便性のみのためのものです。 :// とそのあとに最初に現れる : または / と同じ文字列です。この引数にはポート番号は含まれません。必要ならば URL から取り出してください。
-
- -

解説

- -

構成を表す文字列を返します。この文字列の書式は後述の返値の形式で定義されています。

- -

返値の形式

- -
    -
  • この JavaScript の関数は1つの文字列を返す
    • -
  • 文字列が null である場合、プロキシは使用されない
    • -
  • 文字列にはセミコロン区切りで、以下の構成ブロックを任意の数だけ含むことができる
    • -
- -
-
DIRECT
-
接続はプロキシを使用せずに、直接行われる
-
PROXY host:port
-
指定されたプロキシを使用する
-
SOCKS host:port
-
指定された SOCKS サーバーを使用する
-
- -

最近の Firefox のバージョンでは次の書き方にも対応しています。

- -
-
HTTP host:port
-
指定されたプロキシを使用する
-
HTTPS host:port
-
指定された HTTPS プロキシを使用する
-
SOCKS4 host:port
-
SOCKS5 host:port
-
指定された SOCKS サーバーを (指定された SOCK バージョンで) 使用する
-
- -

セミコロン区切りで複数の設定があった場合、 最も左の設定が、 Firefox がプロキシへの接続の確立に失敗しない限り使用されます。この場合は、その次の設定が使用されます。

- -

ブラウザーは応答がなかったプロキシに対して、30分後に再接続を試みます。その次は１時間後に試行し、試行のたびに間隔を30分追加します。

- -

すべてのプロキシが使用できず、 DIRECT オプションが設定されていない場合、ブラウザーは一時的にプロキシを無視して直接接続するか尋ねます。20分後ブラウザーはプロキシが使えるか再確認するかを尋ね、その40分後に再度尋ねます。この動作は間隔を20分ずつ長くして続きます。

- -

例

- -
-
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081
-
1番目のプロキシは w3proxy:8080 です。1番目のプロキシが使用できない場合は再度使用できるようになるまで mozilla:8081 を使用します。
-
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT
-
上と同じですが、両方使用できない場合に自動的に直接接続します。 (上記の最初の例では、 Netscape はユーザーに直接接続するか確認しますが、この例では確認されません。)
-
PROXY w3proxy.netscape.com:8080; SOCKS socks:1080
-
1番目のプロキシが使用できない場合 SOCKS サーバを使います。
-
- -

自動設定ファイルは .pac の拡張子で保存しなければなりません。

- -
proxy.pac
- -

MIME タイプは以下のように設定してください。

- -
application/x-ns-proxy-autoconfig
- -

次に、 .pac 拡張子をこの MIME タイプに結び付けるようサーバーを設定してください。

- -
-

注:

- -
    -
  • JavaScript 関数は常に単体のファイルで保存し、 HTML ファイルやその他のファイルに埋め込まないでください。
    • -
  • この文書の最後にある例は完全なものです。ファイルを保存して使用するのに追加する必要がある構文はありません。 (もちろん、 JavaScript を編集して自分のサイトのドメイン名やサブネットマスクに合わせる必要があります。)
    • -
-
- -

定義済みの関数と環境

- -

PAC ファイルを作成するために、以下の関数を使用できます。

- - - -
-

注: 以下の例をテストするために、 pactester (pacparserパッケージの一部) を使用しました。

- -
    -
  • PAC ファイルは proxy.pac という名前です
    • -
  • コマンドライン: pactester -p ~/pacparser-master/tests/proxy.pac -u http://www.mozilla.org (引数 host に www.mozilla.org を、引数 url に http://www.mozilla.org を渡します)
    • -
-
- -

isPlainHostName()

- -

構文

- -
isPlainHostName(host)
- -

引数

- -
-
host
-
URLから取り出したホスト名 (ポート番号を除いたもの)
-
- -

解説

- -

ホスト名にドメイン名が含まれていない (=ドットを含まない) 場合は true になります。

- -

例

- -
isPlainHostName("www.mozilla.org") // false
-isPlainHostName("www") // true
-
- -

dnsDomainIs()

- -

構文

- -
dnsDomainIs(host, domain)
- -

引数

- -
-
host
-
URL から取り出したホスト名
-
domain
-
ホストが所属しているか確認したいドメイン名
-
- -

解説

- -

ホスト名のドメインが一致する場合にのみ true を返します。

- -

例

- -
dnsDomainIs("www.mozilla.org", ".mozilla.org") // true
-dnsDomainIs("www", ".mozilla.org") // false
-
- -

localHostOrDomainIs()

- -

構文

- -
localHostOrDomainIs(host, hostdom)
- -

引数

- -
-
host
-
URLから取り出したホスト名です。
-
hostdom
-
比較対象の完全修飾ホスト名です。
-
- -

解説

- -

ホスト名が完全に指定されたホスト名と一致した場合、またはホスト名にドメイン名の部分がなく、修飾されていないホスト名が一致する場合に true を返します。

- -

例

- -
localHostOrDomainIs("www.mozilla.org" , "www.mozilla.org") // true (exact match)
-localHostOrDomainIs("www"             , "www.mozilla.org") // true (hostname match, domain not specified)
-localHostOrDomainIs("www.google.com"  , "www.mozilla.org") // false (domain name mismatch)
-localHostOrDomainIs("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch)
- -

isResolvable()

- -

構文

- -
isResolvable(host)
- -

引数

- -
-
host
-
URLから取り出したホスト名です。
-
- -

ホスト名の解決を試みます。成功すれば true を返します。

- -

例:

- -
isResolvable("www.mozilla.org") // true
-
- -

isInNet()

- -

構文

- -
isInNet(host, pattern, mask)
- -

Parameters

- -
-
host
-
a DNS hostname, or IP address. If a hostname is passed, it will be resolved into an IP address by this function.
-
pattern
-
an IP address pattern in the dot-separated format.
-
mask
-
mask for the IP address pattern informing which parts of the IP address should be matched against. 0 means ignore, 255 means match.
-
- -

True if and only if the IP address of the host matches the specified IP address pattern.

- -

Pattern and mask specification is done the same way as for SOCKS configuration.

- -

Examples:

- -
function alert_eval(str) { alert(str + ' is ' + eval(str)) }
-function FindProxyForURL(url, host) {
-  alert_eval('isInNet(host, "63.245.213.24", "255.255.255.255")')
-  // "PAC-alert: isInNet(host, "63.245.213.24", "255.255.255.255") is true"
-}
-
- -

dnsResolve()

- -
dnsResolve(host)
- -

Parameters

- -
-
host
-
hostname to resolve.
-
- -

Resolves the given DNS hostname into an IP address, and returns it in the dot-separated format as a string.

- -

Example

- -
dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"
- -

convert_addr()

- -

Syntax

- -
convert_addr(ipaddr)
- -

Parameters

- -
-
ipaddr
-
Any dotted address such as an IP address or mask.
-
- -

Concatenates the four dot-separated bytes into one 4-byte word and converts it to decimal.

- -

Example

- -
convert_addr("104.16.41.2"); // returns the decimal number 1745889538
- -

myIpAddress()

- -

Syntax

- -
myIpAddress()
- -

Parameters

- -

(none)

- -

Returns the server IP address of the machine Firefox is running on, as a string in the dot-separated integer format.

- -
-

myIpAddress() returns the same IP address as the server address returned by nslookup localhost on a Linux machine. It does not return the public IP address.

-
- -

Example

- -
myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost
- -

dnsDomainLevels()

- -

Syntax

- -
dnsDomainLevels(host)
- -

Parameters

- -
-
host
-
is the hostname from the URL.
-
- -

Returns the number (integer) of DNS domain levels (number of dots) in the hostname.

- -

Examples:

- -
dnsDomainLevels("www");             // 0
-dnsDomainLevels("mozilla.org");     // 1
-dnsDomainLevels("www.mozilla.org"); // 2
-
- -

shExpMatch()

- -

Syntax

- -
shExpMatch(str, shexp)
- -

Parameters

- -
-
str
-
is any string to compare (e.g. the URL, or the hostname).
-
shexp
-
is a shell expression to compare against.
-
- -

Returns true if the string matches the specified shell expression.

- -

Note that the patterns are shell glob expressions, not regular expressions. * and ? are always supported, while [characters] and [^characters] are supported by some implmentations including Firefox. This is mainly because the expression is translated to a RegExp via subsitution of [.*?]. For a reliable way to use these RegExp syntaxes, just use RegExp instead.

- -

Examples

- -
shExpMatch("http://home.netscape.com/people/ari/index.html"     , "*/ari/*"); // returns true
-shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false
- -

weekdayRange()

- -

Syntax

- -
weekdayRange(wd1, wd2, [gmt])
- -
-

Note: (Before Firefox 49) wd1 must be less than wd2 if you want the function to evaluate these parameters as a range. See the warning below.

-
- -

Parameters

- -
-
wd1 and wd2
-
One of the ordered weekday strings:
-
- 
"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"
-
-
gmt
-
Is either the string "GMT" or is left out.
-
- -

Only the first parameter is mandatory. Either the second, the third, or both may be left out.

- -

If only one parameter is present, the function returns a value of true on the weekday that the parameter represents. If the string "GMT" is specified as a second parameter, times are taken to be in GMT. Otherwise, they are assumed to be in the local timezone.

- -

If both wd1 and wd1 are defined, the condition is true if the current weekday is in between those two ordered weekdays. Bounds are inclusive, but the bounds are ordered. If the "GMT" parameter is specified, times are taken to be in GMT. Otherwise, the local timezone is used.

- -
-

The order of the days matters; Before Firefox 49, weekdayRange("SUN", "SAT") will always evaluate to true. Now weekdayRange("WED", "SUN") will only evaluate true if the current day is Wednesday or Sunday.

-
- -

Examples

- -
weekdayRange("MON", "FRI");        // returns true Monday through Friday (local timezone)
-weekdayRange("MON", "FRI", "GMT"); // returns true Monday through Friday (GMT timezone)
-weekdayRange("SAT");               // returns true on Saturdays local time
-weekdayRange("SAT", "GMT");        // returns true on Saturdays GMT time
-weekdayRange("FRI", "MON");        // returns true Friday and Monday only (note, order does matter!)
- -

dateRange()

- -

Syntax

- -
dateRange(<day> | <month> | <year>, [gmt])  // ambiguity is resolved by assuming year is greater than 31
-dateRange(<day1>, <day2>, [gmt])
-dateRange(<month1>, <month2>, [gmt])
-dateRange(<year1>, <year2>, [gmt])
-dateRange(<day1>, <month1>, <day2>, <month2>, [gmt])
-dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
-dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
- -
-

Note: (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.

-
- -

Parameters

- -
-
day
-
Is the ordered day of the month between 1 and 31 (as an integer).
-
- -
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31
- -
-
month
-
Is one of the ordered month strings below.
-
- -
"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"
- -
-
year
-
Is the ordered full year integer number. For example, 2016 (not 16).
-
gmt
-
Is either the string "GMT", which makes time comparison occur in GMT timezone, or is left out. If left unspecified, times are taken to be in the local timezone.
-
- -

If only a single value is specified (from each category: day, month, year), the function returns a true value only on days that match that specification. If both values are specified, the result is true between those times, including bounds, but the bounds are ordered.

- -
-

The order of the days, months, and years matter; Before Firefox 49, dateRange("JAN", "DEC") will always evaluate to true. Now dateRange("DEC", "JAN") will only evaluate true if the current month is December or January.

-
- -

Examples

- -
dateRange(1);            // returns true on the first day of each month, local timezone
-dateRange(1, "GMT")      // returns true on the first day of each month, GMT timezone
-dateRange(1, 15);        // returns true on the first half of each month
-dateRange(24, "DEC");    // returns true on 24th of December each year
-dateRange("JAN", "MAR"); // returns true on the first quarter of the year
-
-dateRange(1, "JUN", 15, "AUG");
-// returns true from June 1st until August 15th, each year
-// (including June 1st and August 15th)
-
-dateRange(1, "JUN", 1995, 15, "AUG", 1995);
-// returns true from June 1st, 1995, until August 15th, same year
-
-dateRange("OCT", 1995, "MAR", 1996);
-// returns true from October 1995 until March 1996
-// (including the entire month of October 1995 and March 1996)
-
-dateRange(1995);
-// returns true during the entire year of 1995
-
-dateRange(1995, 1997);
-// returns true from beginning of year 1995 until the end of year 1997
- -

timeRange()

- -

Syntax

- -
// The full range of expansions is analogous to dateRange.
-timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
- -
-

Note: (Before Firefox 49) the category hour1, min1, sec1 must be less than the category hour2, min2, sec2 if you want the function to evaluate these parameters as a range. See the warning below.

-
- -

Parameters

- -
-
hour
-
Is the hour from 0 to 23. (0 is midnight, 23 is 11 pm.)
-
min
-
Minutes from 0 to 59.
-
sec
-
Seconds from 0 to 59.
-
gmt
-
Either the string "GMT" for GMT timezone, or not specified, for local timezone.
-
- -

If only a single value is specified (from each category: hour, minute, second), the function returns a true value only at times that match that specification. If both values are specified, the result is true between those times, including bounds, but the bounds are ordered.

- -
-

The order of the hour, minute, second matter; Before Firefox 49, timeRange(0, 23) will always evaluate to true. Now timeRange(23, 0) will only evaluate true if the current hour is 23:00 or midnight.

-
- -

Examples

- -
timerange(12);                // returns true from noon to 1pm
-timerange(12, 13);            // returns true from noon to 1pm
-timerange(12, "GMT");         // returns true from noon to 1pm, in GMT timezone
-timerange(9, 17);             // returns true from 9am to 5pm
-timerange(8, 30, 17, 00);     // returns true from 8:30am to 5:00pm
-timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds past midnight
- -

Example 1

- -

Use proxy for everything except local hosts

- -
-

Note: Since all of the examples that follow are very specific, they have not been tested.

-
- -

All hosts which aren't fully qualified, or the ones that are in local domain, will be connected to directly. Everything else will go through w3proxy.mozilla.org:8080. If the proxy goes down, connections become direct automatically:

- -
function FindProxyForURL(url, host) {
-  if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) {
-    return "DIRECT";
-  } else {
-    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
-  }
-}
- -
-

Note: This is the simplest and most efficient autoconfig file for cases where there's only one proxy.

-
- -

Example 2

- -

As above, but use proxy for local servers which are outside the firewall

- -

If there are hosts (such as the main Web server) that belong to the local domain but are outside the firewall and are only reachable through the proxy server, those exceptions can be handled using the localHostOrDomainIs() function:

- -
function FindProxyForURL(url, host) {
-  if (
-    (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) &&
-    !localHostOrDomainIs(host, "www.mozilla.org") &&
-    !localHostOrDoaminIs(host, "merchant.mozilla.org")
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
-  }
-}
- -

The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts www.mozilla.org and merchant.mozilla.org will go through the proxy.

- -
-

Note the order of the above exceptions for efficiency: localHostOrDomainIs() functions only get executed for URLs that are in local domain, not for every URL. Be careful to note the parentheses around the or expression before the and expression to achieve the above-mentioned efficient behaviour.

-
- -

Example 3

- -

Use proxy only if cannot resolve host

- -

This example will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

- -
function FindProxyForURL(url, host) {
-  if (isResolvable(host))
-    return "DIRECT";
-  else
-    return "PROXY proxy.mydomain.com:8080";
-}
- -

The above requires consulting the DNS every time; it can be grouped intelligently with other rules so that DNS is consulted only if other rules do not yield a result:

- -
function FindProxyForURL(url, host) {
-  if (
-    isPlainHostName(host) ||
-    dnsDomainIs(host, ".mydomain.com") ||
-    isResolvable(host)
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY proxy.mydomain.com:8080";
-  }
-}
- -

Example 4

- -

Subnet based decisions

- -

In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:

- -
function FindProxyForURL(url, host) {
-  if (isInNet(host, "198.95.0.0", "255.255.0.0"))
-    return "DIRECT";
-  else
-    return "PROXY proxy.mydomain.com:8080";
-}
- -

Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:

- -
function FindProxyForURL(url, host) {
-  if (
-    isPlainHostName(host) ||
-    dnsDomainIs(host, ".mydomain.com") ||
-    isInNet(host, "198.95.0.0", "255.255.0.0")
-  ) {
-    return "DIRECT";
-  } else {
-    return "PROXY proxy.mydomain.com:8080";
-  }
-}
- -

Example 5

- -

Load balancing/routing based on URL patterns

- -

This example is more sophisticated. There are four (4) proxy servers; one of them is a hot stand-by for all of the other ones, so if any of the remaining three goes down the fourth one will take over. Furthermore, the three remaining proxy servers share the load based on URL patterns, which makes their caching more effective (there is only one copy of any document on the three servers - as opposed to one copy on each of them). The load is distributed like this:

- - - - - - - - - - - - - - - - - - - - - - - - -
ProxyPurpose
#1.com domain
#2.edu domain
#3all other domains
#4hot stand-by
- -

All local accesses are desired to be direct. All proxy servers run on the port 8080 (they don't need to, you can just change your port but remember to modify your configuations on both side). Note how strings can be concatenated with the + operator in JavaScript.

- -
function FindProxyForURL(url, host) {
-
-  if (isPlainHostName(host) || dnsDomainIs(host, ".mydomain.com"))
-    return "DIRECT";
-
-  else if (shExpMatch(host, "*.com"))
-    return "PROXY proxy1.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-
-  else if (shExpMatch(host, "*.edu"))
-    return "PROXY proxy2.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-
-  else
-    return "PROXY proxy3.mydomain.com:8080; " +
-           "PROXY proxy4.mydomain.com:8080";
-}
- -

Example 6

- -

Setting a proxy for a specific protocol

- -

Most of the standard JavaScript functionality is available for use in the FindProxyForURL() function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:

- -
function FindProxyForURL(url, host) {
-
-  if (url.startsWith("http:"))
-    return "PROXY http-proxy.mydomain.com:8080";
-
-  else if (url.startsWith("ftp:"))
-    return "PROXY ftp-proxy.mydomain.com:8080";
-
-  else if (url.startsWith(“gopher:"))
-    return "PROXY gopher-proxy.mydomain.com:8080";
-
-  else if (url.startsWith("https:") || url.startsWith("snews:"))
-    return "PROXY security-proxy.mydomain.com:8080";
-
-  else
-    return "DIRECT";
-
-}
- -
-

Note: The same can be accomplished using the shExpMatch() function described earlier.

-
- -

For example:

- -
// ...
-if (shExpMatch(url, "http:*")) {
-  return "PROXY http-proxy.mydomain.com:8080";
-}
-// ...
- -
-

The autoconfig file can be output by a CGI script. This is useful, for example, when making the autoconfig file act differently based on the client IP address (the REMOTE_ADDR environment variable in CGI).

- -

Usage of isInNet(), isResolvable() and dnsResolve() functions should be carefully considered, as they require the DNS server to be consulted. All the other autoconfig-related functions are mere string-matching functions that don't require the use of a DNS server. If a proxy is used, the proxy will perform its DNS lookup which would double the impact on the DNS server. Most of the time these functions are not necessary to achieve the desired result.

-
- -

History and implementation

- -

Proxy auto-config was introduced into Netscape Navigator 2.0 in the late 1990s, at the same time when JavaScript was introduced. Open-sourcing Netscape eventually lead to Firefox itself.

- -

The most "original" implementation of PAC and its JavaScript libraries is, therefore, nsProxyAutoConfig.js found in early versions of Firefox. These utilities are found in many other open-source systems including Chromium. Firefox later integrated the file into ProxyAutoConfig.cpp as a C++ string literal. To extract it into its own file, it suffices to copy the chunk into JavaScript with a console.log directive to print it.

- -

Microsoft in general made its own implementation. There used to be some problems with their libraries, but most are resolved by now. They have defined some new "Ex" suffixed functions around the address handling parts to support IPv6. The feature is supported by Chromium, but not yet by Firefox (bugzilla #558253).

diff --git a/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html new file mode 100644 index 0000000000..ccd6c1125f --- /dev/null +++ b/files/ja/web/http/proxy_servers_and_tunneling/proxy_auto-configuration_pac_file/index.html @@ -0,0 +1,731 @@ +--- +title: プロキシ自動設定ファイル +slug: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +tags: + - Necko + - Networking + - PAC + - Proxy +translation_of: Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file +--- +
{{HTTPSidebar}}
+ +
プロキシ自動設定 (Proxy Auto-Configuration, PAC) ファイルは、ウェブブラウザーのリクエスト (HTTP, HTTPS, FTP 等) を直接宛先に送るか、ウェブプロキシサーバーに転送するか決める JavaScript の関数です。次の JavaScript 関数を PAC ファイル内に記述します。
+ +
function FindProxyForURL(url, host) {
+  // ...
+}
+ +

構文

+ +
function FindProxyForURL(url, host)
+ +

引数

+ +
+
url
+
アクセスする URL です。 https:// の URL ではパスとクエリの部分が削除されます。 Chrome (バージョン52～73) ではポリシーで PacHttpsUrlStrippingEnabled を false に設定するか、コマンドラインで --unsafe-pac-url フラグを指定することで無効にすることができます (Chrome 74では、フラグのみが動作します。75以降では、パスの削除を無効にする方法はありません。 Chrome 81 では、パスの削除は HTTP の URL では適用されませんが、 HTTPS に合わせて変更される予定です。)。 Firefox では、設定値は network.proxy.autoconfig_url.include_path です。
+
host
+
URL から抽出したホスト名です。これは利便性のみのためのものです。 :// とそのあとに最初に現れる : または / と同じ文字列です。この引数にはポート番号は含まれません。必要ならば URL から取り出してください。
+
+ +

解説

+ +

構成を表す文字列を返します。この文字列の書式は後述の返値の形式で定義されています。

+ +

返値の形式

+ +
    +
  • この JavaScript の関数は1つの文字列を返す
    • +
  • 文字列が null である場合、プロキシは使用されない
    • +
  • 文字列にはセミコロン区切りで、以下の構成ブロックを任意の数だけ含むことができる
    • +
+ +
+
DIRECT
+
接続はプロキシを使用せずに、直接行われる
+
PROXY host:port
+
指定されたプロキシを使用する
+
SOCKS host:port
+
指定された SOCKS サーバーを使用する
+
+ +

最近の Firefox のバージョンでは次の書き方にも対応しています。

+ +
+
HTTP host:port
+
指定されたプロキシを使用する
+
HTTPS host:port
+
指定された HTTPS プロキシを使用する
+
SOCKS4 host:port
+
SOCKS5 host:port
+
指定された SOCKS サーバーを (指定された SOCK バージョンで) 使用する
+
+ +

セミコロン区切りで複数の設定があった場合、 最も左の設定が、 Firefox がプロキシへの接続の確立に失敗しない限り使用されます。この場合は、その次の設定が使用されます。

+ +

ブラウザーは応答がなかったプロキシに対して、30分後に再接続を試みます。その次は１時間後に試行し、試行のたびに間隔を30分追加します。

+ +

すべてのプロキシが使用できず、 DIRECT オプションが設定されていない場合、ブラウザーは一時的にプロキシを無視して直接接続するか尋ねます。20分後ブラウザーはプロキシが使えるか再確認するかを尋ね、その40分後に再度尋ねます。この動作は間隔を20分ずつ長くして続きます。

+ +

例

+ +
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081
+
1番目のプロキシは w3proxy:8080 です。1番目のプロキシが使用できない場合は再度使用できるようになるまで mozilla:8081 を使用します。
+
PROXY w3proxy.netscape.com:8080; PROXY mozilla.netscape.com:8081; DIRECT
+
上と同じですが、両方使用できない場合に自動的に直接接続します。 (上記の最初の例では、 Netscape はユーザーに直接接続するか確認しますが、この例では確認されません。)
+
PROXY w3proxy.netscape.com:8080; SOCKS socks:1080
+
1番目のプロキシが使用できない場合 SOCKS サーバを使います。
+
+ +

自動設定ファイルは .pac の拡張子で保存しなければなりません。

+ +
proxy.pac
+ +

MIME タイプは以下のように設定してください。

+ +
application/x-ns-proxy-autoconfig
+ +

次に、 .pac 拡張子をこの MIME タイプに結び付けるようサーバーを設定してください。

+ +
+

注:

+ +
    +
  • JavaScript 関数は常に単体のファイルで保存し、 HTML ファイルやその他のファイルに埋め込まないでください。
    • +
  • この文書の最後にある例は完全なものです。ファイルを保存して使用するのに追加する必要がある構文はありません。 (もちろん、 JavaScript を編集して自分のサイトのドメイン名やサブネットマスクに合わせる必要があります。)
    • +
+
+ +

定義済みの関数と環境

+ +

PAC ファイルを作成するために、以下の関数を使用できます。

+ + + +
+

注: 以下の例をテストするために、 pactester (pacparserパッケージの一部) を使用しました。

+ +
    +
  • PAC ファイルは proxy.pac という名前です
    • +
  • コマンドライン: pactester -p ~/pacparser-master/tests/proxy.pac -u http://www.mozilla.org (引数 host に www.mozilla.org を、引数 url に http://www.mozilla.org を渡します)
    • +
+
+ +

isPlainHostName()

+ +

構文

+ +
isPlainHostName(host)
+ +

引数

+ +
+
host
+
URLから取り出したホスト名 (ポート番号を除いたもの)
+
+ +

解説

+ +

ホスト名にドメイン名が含まれていない (=ドットを含まない) 場合は true になります。

+ +

例

+ +
isPlainHostName("www.mozilla.org") // false
+isPlainHostName("www") // true
+
+ +

dnsDomainIs()

+ +

構文

+ +
dnsDomainIs(host, domain)
+ +

引数

+ +
+
host
+
URL から取り出したホスト名
+
domain
+
ホストが所属しているか確認したいドメイン名
+
+ +

解説

+ +

ホスト名のドメインが一致する場合にのみ true を返します。

+ +

例

+ +
dnsDomainIs("www.mozilla.org", ".mozilla.org") // true
+dnsDomainIs("www", ".mozilla.org") // false
+
+ +

localHostOrDomainIs()

+ +

構文

+ +
localHostOrDomainIs(host, hostdom)
+ +

引数

+ +
+
host
+
URLから取り出したホスト名です。
+
hostdom
+
比較対象の完全修飾ホスト名です。
+
+ +

解説

+ +

ホスト名が完全に指定されたホスト名と一致した場合、またはホスト名にドメイン名の部分がなく、修飾されていないホスト名が一致する場合に true を返します。

+ +

例

+ +
localHostOrDomainIs("www.mozilla.org" , "www.mozilla.org") // true (exact match)
+localHostOrDomainIs("www"             , "www.mozilla.org") // true (hostname match, domain not specified)
+localHostOrDomainIs("www.google.com"  , "www.mozilla.org") // false (domain name mismatch)
+localHostOrDomainIs("home.mozilla.org", "www.mozilla.org") // false (hostname mismatch)
+ +

isResolvable()

+ +

構文

+ +
isResolvable(host)
+ +

引数

+ +
+
host
+
URLから取り出したホスト名です。
+
+ +

ホスト名の解決を試みます。成功すれば true を返します。

+ +

例:

+ +
isResolvable("www.mozilla.org") // true
+
+ +

isInNet()

+ +

構文

+ +
isInNet(host, pattern, mask)
+ +

Parameters

+ +
+
host
+
a DNS hostname, or IP address. If a hostname is passed, it will be resolved into an IP address by this function.
+
pattern
+
an IP address pattern in the dot-separated format.
+
mask
+
mask for the IP address pattern informing which parts of the IP address should be matched against. 0 means ignore, 255 means match.
+
+ +

True if and only if the IP address of the host matches the specified IP address pattern.

+ +

Pattern and mask specification is done the same way as for SOCKS configuration.

+ +

Examples:

+ +
function alert_eval(str) { alert(str + ' is ' + eval(str)) }
+function FindProxyForURL(url, host) {
+  alert_eval('isInNet(host, "63.245.213.24", "255.255.255.255")')
+  // "PAC-alert: isInNet(host, "63.245.213.24", "255.255.255.255") is true"
+}
+
+ +

dnsResolve()

+ +
dnsResolve(host)
+ +

Parameters

+ +
+
host
+
hostname to resolve.
+
+ +

Resolves the given DNS hostname into an IP address, and returns it in the dot-separated format as a string.

+ +

Example

+ +
dnsResolve("www.mozilla.org"); // returns the string "104.16.41.2"
+ +

convert_addr()

+ +

Syntax

+ +
convert_addr(ipaddr)
+ +

Parameters

+ +
+
ipaddr
+
Any dotted address such as an IP address or mask.
+
+ +

Concatenates the four dot-separated bytes into one 4-byte word and converts it to decimal.

+ +

Example

+ +
convert_addr("104.16.41.2"); // returns the decimal number 1745889538
+ +

myIpAddress()

+ +

Syntax

+ +
myIpAddress()
+ +

Parameters

+ +

(none)

+ +

Returns the server IP address of the machine Firefox is running on, as a string in the dot-separated integer format.

+ +
+

myIpAddress() returns the same IP address as the server address returned by nslookup localhost on a Linux machine. It does not return the public IP address.

+
+ +

Example

+ +
myIpAddress() //returns the string "127.0.1.1" if you were running Firefox on that localhost
+ +

dnsDomainLevels()

+ +

Syntax

+ +
dnsDomainLevels(host)
+ +

Parameters

+ +
+
host
+
is the hostname from the URL.
+
+ +

Returns the number (integer) of DNS domain levels (number of dots) in the hostname.

+ +

Examples:

+ +
dnsDomainLevels("www");             // 0
+dnsDomainLevels("mozilla.org");     // 1
+dnsDomainLevels("www.mozilla.org"); // 2
+
+ +

shExpMatch()

+ +

Syntax

+ +
shExpMatch(str, shexp)
+ +

Parameters

+ +
+
str
+
is any string to compare (e.g. the URL, or the hostname).
+
shexp
+
is a shell expression to compare against.
+
+ +

Returns true if the string matches the specified shell expression.

+ +

Note that the patterns are shell glob expressions, not regular expressions. * and ? are always supported, while [characters] and [^characters] are supported by some implmentations including Firefox. This is mainly because the expression is translated to a RegExp via subsitution of [.*?]. For a reliable way to use these RegExp syntaxes, just use RegExp instead.

+ +

Examples

+ +
shExpMatch("http://home.netscape.com/people/ari/index.html"     , "*/ari/*"); // returns true
+shExpMatch("http://home.netscape.com/people/montulli/index.html", "*/ari/*"); // returns false
+ +

weekdayRange()

+ +

Syntax

+ +
weekdayRange(wd1, wd2, [gmt])
+ +
+

Note: (Before Firefox 49) wd1 must be less than wd2 if you want the function to evaluate these parameters as a range. See the warning below.

+
+ +

Parameters

+ +
+
wd1 and wd2
+
One of the ordered weekday strings:
+
+ 
"SUN"|"MON"|"TUE"|"WED"|"THU"|"FRI"|"SAT"
+
+
gmt
+
Is either the string "GMT" or is left out.
+
+ +

Only the first parameter is mandatory. Either the second, the third, or both may be left out.

+ +

If only one parameter is present, the function returns a value of true on the weekday that the parameter represents. If the string "GMT" is specified as a second parameter, times are taken to be in GMT. Otherwise, they are assumed to be in the local timezone.

+ +

If both wd1 and wd1 are defined, the condition is true if the current weekday is in between those two ordered weekdays. Bounds are inclusive, but the bounds are ordered. If the "GMT" parameter is specified, times are taken to be in GMT. Otherwise, the local timezone is used.

+ +
+

The order of the days matters; Before Firefox 49, weekdayRange("SUN", "SAT") will always evaluate to true. Now weekdayRange("WED", "SUN") will only evaluate true if the current day is Wednesday or Sunday.

+
+ +

Examples

+ +
weekdayRange("MON", "FRI");        // returns true Monday through Friday (local timezone)
+weekdayRange("MON", "FRI", "GMT"); // returns true Monday through Friday (GMT timezone)
+weekdayRange("SAT");               // returns true on Saturdays local time
+weekdayRange("SAT", "GMT");        // returns true on Saturdays GMT time
+weekdayRange("FRI", "MON");        // returns true Friday and Monday only (note, order does matter!)
+ +

dateRange()

+ +

Syntax

+ +
dateRange(<day> | <month> | <year>, [gmt])  // ambiguity is resolved by assuming year is greater than 31
+dateRange(<day1>, <day2>, [gmt])
+dateRange(<month1>, <month2>, [gmt])
+dateRange(<year1>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <day2>, <month2>, [gmt])
+dateRange(<month1>, <year1>, <month2>, <year2>, [gmt])
+dateRange(<day1>, <month1>, <year1>, <day2>, <month2>, <year2>, [gmt])
+ +
+

Note: (Before Firefox 49) day1 must be less than day2, month1 must be less than month2, and year1 must be less than year2 if you want the function to evaluate these parameters as a range. See the warning below.

+
+ +

Parameters

+ +
+
day
+
Is the ordered day of the month between 1 and 31 (as an integer).
+
+ +
1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31
+ +
+
month
+
Is one of the ordered month strings below.
+
+ +
"JAN"|"FEB"|"MAR"|"APR"|"MAY"|"JUN"|"JUL"|"AUG"|"SEP"|"OCT"|"NOV"|"DEC"
+ +
+
year
+
Is the ordered full year integer number. For example, 2016 (not 16).
+
gmt
+
Is either the string "GMT", which makes time comparison occur in GMT timezone, or is left out. If left unspecified, times are taken to be in the local timezone.
+
+ +

If only a single value is specified (from each category: day, month, year), the function returns a true value only on days that match that specification. If both values are specified, the result is true between those times, including bounds, but the bounds are ordered.

+ +
+

The order of the days, months, and years matter; Before Firefox 49, dateRange("JAN", "DEC") will always evaluate to true. Now dateRange("DEC", "JAN") will only evaluate true if the current month is December or January.

+
+ +

Examples

+ +
dateRange(1);            // returns true on the first day of each month, local timezone
+dateRange(1, "GMT")      // returns true on the first day of each month, GMT timezone
+dateRange(1, 15);        // returns true on the first half of each month
+dateRange(24, "DEC");    // returns true on 24th of December each year
+dateRange("JAN", "MAR"); // returns true on the first quarter of the year
+
+dateRange(1, "JUN", 15, "AUG");
+// returns true from June 1st until August 15th, each year
+// (including June 1st and August 15th)
+
+dateRange(1, "JUN", 1995, 15, "AUG", 1995);
+// returns true from June 1st, 1995, until August 15th, same year
+
+dateRange("OCT", 1995, "MAR", 1996);
+// returns true from October 1995 until March 1996
+// (including the entire month of October 1995 and March 1996)
+
+dateRange(1995);
+// returns true during the entire year of 1995
+
+dateRange(1995, 1997);
+// returns true from beginning of year 1995 until the end of year 1997
+ +

timeRange()

+ +

Syntax

+ +
// The full range of expansions is analogous to dateRange.
+timeRange(<hour1>, <min1>, <sec1>, <hour2>, <min2>, <sec2>, [gmt])
+ +
+

Note: (Before Firefox 49) the category hour1, min1, sec1 must be less than the category hour2, min2, sec2 if you want the function to evaluate these parameters as a range. See the warning below.

+
+ +

Parameters

+ +
+
hour
+
Is the hour from 0 to 23. (0 is midnight, 23 is 11 pm.)
+
min
+
Minutes from 0 to 59.
+
sec
+
Seconds from 0 to 59.
+
gmt
+
Either the string "GMT" for GMT timezone, or not specified, for local timezone.
+
+ +

If only a single value is specified (from each category: hour, minute, second), the function returns a true value only at times that match that specification. If both values are specified, the result is true between those times, including bounds, but the bounds are ordered.

+ +
+

The order of the hour, minute, second matter; Before Firefox 49, timeRange(0, 23) will always evaluate to true. Now timeRange(23, 0) will only evaluate true if the current hour is 23:00 or midnight.

+
+ +

Examples

+ +
timerange(12);                // returns true from noon to 1pm
+timerange(12, 13);            // returns true from noon to 1pm
+timerange(12, "GMT");         // returns true from noon to 1pm, in GMT timezone
+timerange(9, 17);             // returns true from 9am to 5pm
+timerange(8, 30, 17, 00);     // returns true from 8:30am to 5:00pm
+timerange(0, 0, 0, 0, 0, 30); // returns true between midnight and 30 seconds past midnight
+ +

Example 1

+ +

Use proxy for everything except local hosts

+ +
+

Note: Since all of the examples that follow are very specific, they have not been tested.

+
+ +

All hosts which aren't fully qualified, or the ones that are in local domain, will be connected to directly. Everything else will go through w3proxy.mozilla.org:8080. If the proxy goes down, connections become direct automatically:

+ +
function FindProxyForURL(url, host) {
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +
+

Note: This is the simplest and most efficient autoconfig file for cases where there's only one proxy.

+
+ +

Example 2

+ +

As above, but use proxy for local servers which are outside the firewall

+ +

If there are hosts (such as the main Web server) that belong to the local domain but are outside the firewall and are only reachable through the proxy server, those exceptions can be handled using the localHostOrDomainIs() function:

+ +
function FindProxyForURL(url, host) {
+  if (
+    (isPlainHostName(host) || dnsDomainIs(host, ".mozilla.org")) &&
+    !localHostOrDomainIs(host, "www.mozilla.org") &&
+    !localHostOrDoaminIs(host, "merchant.mozilla.org")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY w3proxy.mozilla.org:8080; DIRECT";
+  }
+}
+ +

The above example will use the proxy for everything except local hosts in the mozilla.org domain, with the further exception that hosts www.mozilla.org and merchant.mozilla.org will go through the proxy.

+ +
+

Note the order of the above exceptions for efficiency: localHostOrDomainIs() functions only get executed for URLs that are in local domain, not for every URL. Be careful to note the parentheses around the or expression before the and expression to achieve the above-mentioned efficient behaviour.

+
+ +

Example 3

+ +

Use proxy only if cannot resolve host

+ +

This example will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable:

+ +
function FindProxyForURL(url, host) {
+  if (isResolvable(host))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

The above requires consulting the DNS every time; it can be grouped intelligently with other rules so that DNS is consulted only if other rules do not yield a result:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isResolvable(host)
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 4

+ +

Subnet based decisions

+ +

In this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy:

+ +
function FindProxyForURL(url, host) {
+  if (isInNet(host, "198.95.0.0", "255.255.0.0"))
+    return "DIRECT";
+  else
+    return "PROXY proxy.mydomain.com:8080";
+}
+ +

Again, use of the DNS server in the above can be minimized by adding redundant rules in the beginning:

+ +
function FindProxyForURL(url, host) {
+  if (
+    isPlainHostName(host) ||
+    dnsDomainIs(host, ".mydomain.com") ||
+    isInNet(host, "198.95.0.0", "255.255.0.0")
+  ) {
+    return "DIRECT";
+  } else {
+    return "PROXY proxy.mydomain.com:8080";
+  }
+}
+ +

Example 5

+ +

Load balancing/routing based on URL patterns

+ +

This example is more sophisticated. There are four (4) proxy servers; one of them is a hot stand-by for all of the other ones, so if any of the remaining three goes down the fourth one will take over. Furthermore, the three remaining proxy servers share the load based on URL patterns, which makes their caching more effective (there is only one copy of any document on the three servers - as opposed to one copy on each of them). The load is distributed like this:

+ + + + + + + + + + + + + + + + + + + + + + + + +
ProxyPurpose
#1.com domain
#2.edu domain
#3all other domains
#4hot stand-by
+ +

All local accesses are desired to be direct. All proxy servers run on the port 8080 (they don't need to, you can just change your port but remember to modify your configuations on both side). Note how strings can be concatenated with the + operator in JavaScript.

+ +
function FindProxyForURL(url, host) {
+
+  if (isPlainHostName(host) || dnsDomainIs(host, ".mydomain.com"))
+    return "DIRECT";
+
+  else if (shExpMatch(host, "*.com"))
+    return "PROXY proxy1.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else if (shExpMatch(host, "*.edu"))
+    return "PROXY proxy2.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+
+  else
+    return "PROXY proxy3.mydomain.com:8080; " +
+           "PROXY proxy4.mydomain.com:8080";
+}
+ +

Example 6

+ +

Setting a proxy for a specific protocol

+ +

Most of the standard JavaScript functionality is available for use in the FindProxyForURL() function. As an example, to set different proxies based on the protocol the {{jsxref("String.prototype.startsWith()", "startsWith()")}} function can be used:

+ +
function FindProxyForURL(url, host) {
+
+  if (url.startsWith("http:"))
+    return "PROXY http-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("ftp:"))
+    return "PROXY ftp-proxy.mydomain.com:8080";
+
+  else if (url.startsWith(“gopher:"))
+    return "PROXY gopher-proxy.mydomain.com:8080";
+
+  else if (url.startsWith("https:") || url.startsWith("snews:"))
+    return "PROXY security-proxy.mydomain.com:8080";
+
+  else
+    return "DIRECT";
+
+}
+ +
+

Note: The same can be accomplished using the shExpMatch() function described earlier.

+
+ +

For example:

+ +
// ...
+if (shExpMatch(url, "http:*")) {
+  return "PROXY http-proxy.mydomain.com:8080";
+}
+// ...
+ +
+

The autoconfig file can be output by a CGI script. This is useful, for example, when making the autoconfig file act differently based on the client IP address (the REMOTE_ADDR environment variable in CGI).

+ +

Usage of isInNet(), isResolvable() and dnsResolve() functions should be carefully considered, as they require the DNS server to be consulted. All the other autoconfig-related functions are mere string-matching functions that don't require the use of a DNS server. If a proxy is used, the proxy will perform its DNS lookup which would double the impact on the DNS server. Most of the time these functions are not necessary to achieve the desired result.

+
+ +

History and implementation

+ +

Proxy auto-config was introduced into Netscape Navigator 2.0 in the late 1990s, at the same time when JavaScript was introduced. Open-sourcing Netscape eventually lead to Firefox itself.

+ +

The most "original" implementation of PAC and its JavaScript libraries is, therefore, nsProxyAutoConfig.js found in early versions of Firefox. These utilities are found in many other open-source systems including Chromium. Firefox later integrated the file into ProxyAutoConfig.cpp as a C++ string literal. To extract it into its own file, it suffices to copy the chunk into JavaScript with a console.log directive to print it.

+ +

Microsoft in general made its own implementation. There used to be some problems with their libraries, but most are resolved by now. They have defined some new "Ex" suffixed functions around the address handling parts to support IPv6. The feature is supported by Chromium, but not yet by Firefox (bugzilla #558253).

diff --git a/files/ja/web/http/public_key_pinning/index.html b/files/ja/web/http/public_key_pinning/index.html new file mode 100644 index 0000000000..4741133a6b --- /dev/null +++ b/files/ja/web/http/public_key_pinning/index.html @@ -0,0 +1,163 @@ +--- +title: HTTP Public Key Pinning (HPKP) +slug: Web/Security/Public_Key_Pinning +tags: + - Deprecated + - Guide + - HPKP + - HTTP + - Obsolete + - Security +translation_of: Web/HTTP/Public_Key_Pinning +--- +

{{HTTPSidebar}}{{deprecated_header}}

+ +
注: Public Key Pinning の仕組みは Certificate Transparency および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
+ +

HTTP Public Key Pinning ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。

+ +

{{Glossary("TLS")}} セッションで用いられるサーバーの公開鍵の真正性を担保するため、通常その公開鍵は認証局 ({{GLossary("CA")}}) の証明書でラップされます。ブラウザーなどのウェブクライアントがこれらの認証局を信頼することで、認証局は任意のドメイン名に対する証明書を作成できます。攻撃者が1つの認証局を危殆化させることができれば、様々な TLS コネクションで中間者攻撃を仕掛けることが可能になってしまいます。 HPKP はこの {{Glossary("HTTPS")}} プロトコルへの脅威を、そのウェブサーバーにどの公開鍵が所属するのかをクライアントに伝えることで回避することができます。

+ +

HPKP は Trust on First Use ({{Glossary("TOFU")}}) 技術の1つです。 HPKP の HTTP ヘッダーがウェブサーバーからクライアントへ最初に送信されて以降、そのウェブサーバーに紐付く公開鍵はクライアントで一定期間記憶されます。クライアントが再びそのサーバーを訪れた際は、既に HPKP で記憶したフィンガープリントと一致する公開鍵が、証明書チェインにおいて最低 1 つの証明書に含まれていることを確認します。そのサーバーから送信されてきた公開鍵が不明なものだった場合、クライアントはユーザーに警告を表示します。

+ +

Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) ユーザー定義の証明書であった場合、ピン留めによる認証を無効化します。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。

+ +

HPKP の有効化

+ +

サイトでこの機能を有効化するには、サイトに HTTPS でアクセスされたとに、 HTTP の {{HTTPHeader("Public-Key-Pins")}} ヘッダーを返す必要があります。

+ +
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains][; report-uri="reportURI"]
+ +
+
pin-sha256
+
二重引用符で囲まれた文字列で、 Base64 符号化された Subject Public Key Information ({{Glossary("SPKI")}}) のフィンガープリントです。異なる公開鍵に対する複数のピンを指定することが出来ます。将来のブラウザーでは SHA-256 以外のハッシュアルゴリズムが許容されるかもしれません。証明書や鍵ファイルからこの情報を抽出する方法は次の項で説明します。
+
max-age
+
このサイトへのアクセス時に必要となる（唯一ピン留めされた）鍵について、この鍵をブラウザーが記憶するべき時間を指定します。この値は秒単位で表現します。
+
includeSubDomains {{optional_inline}}
+
このパラメータは省略可能です。サイトにおけるすべてのサブドメインにもこのルールが適用されます。
+
report-uri {{optional_inline}}
+
このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。
+
+ +
+

注: 現在の仕様では、本番系で運用されていないバックアップ用の第2のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。

+
+ +

Base64 エンコードされた公開鍵情報を抽出するには

+ +
+

注: 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。

+
+ +

まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。

+ +

次に示す便利なコマンドで、鍵ファイルや証明書署名要求 (CSR)、または証明書から Base64 エンコードされた情報を抽出できます。

+ +
openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +
openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +

以下のコマンドを用いると、ウェブサイト向けに情報を抽出することができます。

+ +
openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
+ +

HPKP ヘッダーの例

+ +
Public-Key-Pins:
+  pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
+  pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
+  max-age=5184000; includeSubDomains;
+  report-uri="https://www.example.org/hpkp-report"
+ +

この例では、 pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" で本番系で使用されるサーバーの公開鍵をピン止めします。２番目のピン宣言である pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" も、バックアップキーをピン止めします。 max-age=5184000 はクライアントにこの情報を２か月間保存するように伝え、これは IETF RFC によれば合理的な期間です。このキーのピン止めは、 includeSubDomains 宣言で指示されているように、すべてのサブドメインでも有効です。最後に、 report-uri="https://www.example.net/hpkp-report" はピンの検証の失敗を報告する場所を説明します。

+ +

Report-Only ヘッダー

+ +

{{HTTPHeader("Public-Key-Pins")}} ヘッダーを用いる代わりに、 {{HTTPHeader("Public-Key-Pins-Report-Only")}} ヘッダーを利用することも可能です。このヘッダーを用いた場合、ピン留めの認証に失敗した場合でも指定した report-uri にレポートが送信されるのみで、ブラウザーがウェブサーバーへ接続することは可能となります。

+ +

HPKP ヘッダーを送信するためのウェブサーバーの設定

+ +

HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。

+ +
+

注: 以下の例では、2か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。

+
+ +
+

HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります！バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。

+
+ +

Apache

+ +

次のような行をウェブサーバーの config に追加すると Apache で HPKP が有効になります。 mod_headers モジュールがインストールされている必要があります。

+ +
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
+ +

Nginx

+ +

次のような行を追加し、適切な pin-sha256="..." の値を設定すると nginx で HPKP が有効になります。 ngx_http_headers_module がインストールされている必要があります。

+ +
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains' always;
+ +

Lighttpd

+ +

鍵に関する次のような情報 (pin-sha256="..." フィールド) を含む行を追加すると、 lighttpd で HPKP が有効になります。

+ +
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
+ +

注: 以下のように server.module で mod_setenv をあらかじめ読み込んでおく必要があります。

+ +
server.modules += ( "mod_setenv" )
+ +

IIS

+ +

IIS から Public-Key-Pins ヘッダーを送信するには、以下のような数行を Web.config ファイルに追加してください。

+ +
<system.webServer>
+  ...
+
+  <httpProtocol>
+    <customHeaders>
+      <add name="Public-Key-Pins" value="pin-sha256=&quot;base64+primary==&quot;; pin-sha256=&quot;base64+backup==&quot;; max-age=5184000; includeSubDomains" />
+    </customHeaders>
+  </httpProtocol>
+
+  ...
+</system.webServer>
+
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書題名
{{RFC("7469", "Public-Key-Pins", "2.1")}}Public Key Pinning Extension for HTTP
+ +

ブラウザーの互換性

+ + + +

{{Compat("http.headers.Public-Key-Pins")}}

+ +

関連情報

+ +
    +
  • {{HTTPHeader("Public-Key-Pins")}}
    • +
  • {{HTTPHeader("Public-Key-Pins-Report-Only")}}
    • +
  • Browser test site: HSTS and HPKP test
    • +
  • {{HTTPHeader("Expect-CT")}}
    • +
diff --git a/files/ja/web/javascript/getting_started/index.html b/files/ja/web/javascript/getting_started/index.html deleted file mode 100644 index b87febbe05..0000000000 --- a/files/ja/web/javascript/getting_started/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -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:

-
    -
  • Click - issued when a user clicks the mouse
    • -
  • DblClick - issued when a user double-clicks the mouse
    • -
  • MouseDown - issued when a user depresses a mouse button (the first half of a click)
    • -
  • MouseUp - issued when a user releases a mouse button (the second half of a click)
    • -
  • MouseOut - issued when the mouse pointer leaves the graphical bounds of the object
    • -
  • MouseOver - issued when the mouse pointer enters the graphical bounds of the object
    • -
  • MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object
    • -
  • ContextMenu - issued when the user clicks using the right mouse button
    • -
-

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:

-
    -
  • KeyPress - issued when a key is depressed and released
    • -
  • KeyDown - issued when a key is depressed but hasn't yet been released
    • -
  • KeyUp - issued when a key is released
    • -
  • TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by pasting, speaking, or keyboard. This event will not be covered in this article.
    • -
-

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/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 800f222ea4..0000000000 --- a/files/ja/web/javascript/guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages ---- -

クラスベース言語とプロトタイプベース言語

-

Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。

-
  • クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。
  • 一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。
    • -
-

JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。

-

クラスの定義

-

クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。

-

JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。

-

サブクラスと継承

-

クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。

-

JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。

-

プロパティの追加と削除

-

クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。

-

違いの概要

-

次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。

- -
クラスベース (Java) プロトタイプベース (JavaScript)
クラスとインスタンスは異なる実体である。 すべてのオブジェクトはインスタンスである。
クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。 コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。
new 演算子を用いて単一のオブジェクトを作成する。 同じ。
既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。 コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。
クラスチェーンに従ってプロパティを継承する。 プロトタイプチェーンに従ってプロパティを継承する。
クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。 コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}

-
-

{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}

diff --git a/files/ja/web/javascript/guide/core_language_features/index.html b/files/ja/web/javascript/guide/core_language_features/index.html deleted file mode 100644 index 2161ec589e..0000000000 --- a/files/ja/web/javascript/guide/core_language_features/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Core Language Features -slug: Web/JavaScript/Guide/Core_Language_Features ---- -
-{{page("/ja/docs/Core_JavaScript_1.5_Guide/Values()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Variables()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Constants()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Literals()")}} -{{page("/ja/docs/Core_JavaScript_1.5_Guide/Unicode()")}}
diff --git a/files/ja/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/web/javascript/guide/creating_a_regular_expression/index.html deleted file mode 100644 index 19935b8b55..0000000000 --- a/files/ja/web/javascript/guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: 正規表現の作成 -slug: Web/JavaScript/Guide/Creating_a_Regular_Expression ---- -

正規表現の作成

-

正規表現は 2 つの方法で作ることができます。

-
    -
  • 次のように、正規表現リテラルを使用する。
    • -
-
var re = /ab+c/;
-
-
-
-
- 正規表現リテラルでは、スクリプトが評価されるときにその正規表現をコンパイルします。正規表現を定数として残しておくときは、この方法を使用するとよりよいパフォーマンスが得られます。
-
-
-
-
    -
  • 次のように、RegExp オブジェクトのコンストラクタ関数を呼び出す。
    • -
-
var re = new RegExp("ab+c");
-
-
-
-
- コンストラクタ関数を使用すると、実行時にその正規表現をコンパイルします。正規表現パターンが変わることがわかっている場合や、パターンがわからない場合、ユーザが入力するなど、別のソースからパターンを取得する場合はコンストラクタ関数を使用してください。
-
-
-
-

{{ PreviousNext("JavaScript/Guide/Operators/Special_Operators", "JavaScript/Guide/Writing_a_Regular_Expression_Pattern") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 8ee9381575..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: ゲッターとセッターの定義 -slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -

ゲッターとセッターの定義

- -

ゲッターはある属性の値を取得するメソッドです。セッターは属性に値を設定するメソッドです。全ての定義済みコアオブジェクトと、新しいプロパティの追加をサポートしているユーザ定義オブジェクトに対してゲッターとセッターを定義できます。ゲッターとセッターの定義にはオブジェクトリテラル構文を使用します。

- -

以下の例では、ユーザ定義オブジェクト o についてゲッターとセッターがどのように機能するかを説明します。JavaScript シェル とは JavaScript コードをバッチモードで、またはインタラクティブにテストすることができる、開発者向けのアプリケーションのことです。

- -

o オブジェクトのプロパティは以下のとおりです。

- -
    -
  • o.a - 数値
    • -
  • o.b - o.a に 1 を加えて返すゲッター
    • -
  • o.c - o.a の値にその値の 1/2 の値をセットするセッター
    • -
- -
js> o = new Object;
-[object Object]
-js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
-[object Object]
-js> o.a
-7
-js> o.b
-8
-js> o.c = 50
-js> o.a
-25
-js>
-
- -

次の例では、 Date プロトタイプを拡張して定義済み Date クラスの全インスタンスに year プロパティを追加する様子を表しています。Date クラスの既存の getFullYear および setFullYear メソッドを使用して year プロパティのゲッターとセッターを実装します。

- -

これらの文は year プロパティに対するゲッターとセッターを定義しています。

- -
js> var d = Date.prototype;
-js> d.__defineGetter__("year", function() { return this.getFullYear(); });
-js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });
-
- -

これらの文は Date オブジェクトで定義したゲッターとセッターを使用しています。

- -
js> var now = new Date;
-js> print(now.year);
-2000
-js> now.year=2001;
-987617605170
-js> print(now);
-Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -
JavaScript 1.5 の開発期間中に getter = や setter = といった式を使用して新しいゲッターやセッターを既存のオブジェクトで定義するようになっていた時期がありました。この構文は現在は廃止予定であり、現行の JS 1.5 エンジンでは警告を発します。また、将来的には構文エラーになります。使用を避けるようにしてください
- -

 

- -

概要

- -

原則的にゲッターとセッターは次のどちらかに属します。

- -
    -
  • オブジェクト初期化子 を用いて定義されたもの
    • -
  • ゲッターやセッターを追加するメソッドを用いてオブジェクトに後から追加されたもの
    • -
- -

オブジェクト初期化子 を用いてゲッターやセッターを定義する際には、ゲッターメソッドの先頭に get を、セッターメソッドの先頭に set をそれぞれ付けなくてはなりません。セッターメソッドはセットする新しい値を受けわたすための引数を 1 つだけ持ちます。ゲッターメソッドはパラメータを受け取るようにしてはいけません。

- -
o = {
-  a:7,
-  get b() { return this.a+1; },
-  set c(x) { this.a = x/2; }
-};
-
- -

ゲッターもセッターも、__defineGetter__ および __defineSetter__ という 2 つの特別なメソッドを用いて、オブジェクト作成後でも、そのオブジェクトに追加することができます。両メソッドの第 1 引数にはそのゲッターやセッターの名前を文字列で指定します。第 2 引数にはゲッターやセッターとして呼び出す関数を指定します。前の例を別の方法で実装したものを以下に示します。

- -
o.__defineGetter__("b", function() { return this.a+1; });
-o.__defineSetter__("c", function(x) { this.a = x/2; });
-
- -

2 つの形式のうちどちらを選択するかはあなたのプログラミングスタイルや、目の前の課題次第によります。プロトタイプの定義時にオブジェクト初期化子を使用しているのであれば、最初の形式を選択するのがよいでしょう。この形式はよりコンパクトかつ自然です。ゲッターやセッターを後から追加する必要がある場合は、プロトタイプや特定のオブジェクトを書いていないため、第 2 の形式しか使用できません。第 2 の形式は JavaScript の動的性質をおそらく最もよく表していますが、コードが可読性が下がったり、理解しづらいものとなることがあります。

- -
-

Firefox 3.0 より前のバージョンではゲッターとセッターが DOM 要素に対してサポートされていません。古いバージョンの Firefox では例外を投げることなく失敗します。そのときに例外が必要であれば、HTMLElement のプロトタイプを変更し (HTMLElement.prototype.__define{{ mediawiki.external('SG') }}etter__)、例外を投げるようにして回避してください。

- -

Firefox 3.0 では、定義済みのプロパティでゲッターとセッターを定義すると例外が投げられます。そのプロパティは事前に削除しておく必要があります。これは古いバージョンの Firefox には当てはまりません。

-
- -

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References", "JavaScript/Guide/Creating_New_Objects/Deleting_Properties") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index 74731a99d1..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: メソッドの定義 -slug: Web/JavaScript/Guide/Creating_New_Objects/Defining_Methods ---- -

メソッドの定義

-

メソッドとはあるオブジェクトに結びつけられた関数のことです。メソッドは、通常の関数の定義と同じ方法で定義します。既存のオブジェクトに関数を結びつけるには次の構文を使用します。

-
object.methodname = function_name
-
-

ここで、object は既存のオブジェクトを、methodname はメソッドに割り当てる名前を、function_name は関数の名前をそれぞれ表しています。

-

すると、次のようにしてオブジェクトのコンテキストでそのメソッドを呼び出すことができます。

-
object.methodname(params);
-
-

オブジェクトのコンストラクタ関数にメソッドの定義を含めることで、あるオブジェクトの種類についてのメソッドを定義することができます。例えば、以前に定義した car オブジェクトのプロパティを整形して表示する関数を定義します。

-
function displayCar() {
-   var result = "A Beautiful " + this.year + " " + this.make
-      + " " + this.model;
-   pretty_print(result);
-}
-
-

pretty_print は水平方向の罫線と文字列を表示する関数です。this を使用してそのメソッドを抱えているオブジェクトを参照しています。

-

次の文

-
this.displayCar = displayCar;
-
-

をオブジェクトの定義に加えることで、この関数を car のメソッドにすることができます。そうすると、car の完全な定義は次のようになります。

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-   this.displayCar = displayCar;
-}
-
-

すると、次のようにして各オブジェクトについて displayCar メソッドを呼び出すことができます。

-
car1.displayCar()
-car2.displayCar()
-
-

こうすると次の図のような出力が得られます。

-

Image:obja.gif 図 7.1：メソッドの出力の表示

-

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type", "JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index b5136b203e..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - Web/JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -

あるオブジェクトの種類に対するプロパティの定義

-

prototype プロパティを用いて、定義済みのオブジェクトの種類にプロパティを追加することができます。この方法では、指定した種類のすべてのオブジェクトで共有されるプロパティを定義することになります。そのオブジェクトのあるインスタンス 1 つだけということではありません。次のコードは color プロパティを car という種類の全オブジェクトに追加し、値をオブジェクト car1 の color プロパティに代入します。

-
car.prototype.color=null;
-car1.color="black";
-
-

詳しくは コア JavaScript リファレンス 内の Function オブジェクトの prototype プロパティ を参照してください。

- -

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties", "JavaScript/Guide/Creating_New_Objects/Defining_Methods") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html b/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index 749ee722f5..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: プロパティの削除 -slug: Web/JavaScript/Guide/Creating_New_Objects/Deleting_Properties ---- -

プロパティの削除

-

delete 演算子を用いることでプロパティを除去することができます。次のコードでプロパティの除去方法を示します。

-
// 新しいオブジェクト myobj を作成。2 つのプロパティ、a および b を持つ。
-myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// a プロパティを除去。myobj には b プロパティだけが残っている。
-delete myobj.a;
-
-

delete を使用することでグローバル変数を削除することもできます。ただし、これは var キーワードを使用せずにその変数を宣言した場合のみです。

-
g = 17;
-delete g;
-
-

さらなる情報については delete をご覧ください。

-

{{PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters", "JavaScript/Guide/Predefined_Core_Objects")}}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/index.html b/files/ja/web/javascript/guide/creating_new_objects/index.html deleted file mode 100644 index 0cbbc1753c..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 新しいオブジェクトの作成 -slug: Web/JavaScript/Guide/Creating_New_Objects ---- -

新しいオブジェクトの作成

-

JavaScript には多くの定義済みオブジェクトがあります。さらに、自分でオブジェクトを作り出すことができます。JavaScript 1.2 以降では、オブジェクト初期化子を用いてオブジェクトを作成できます。もう 1 つの方法として、まずコンストラクタ関数を作成し、それからその関数と new 演算子を用いてオブジェクトのインスタンスを作成することもできます。

- -

{{ PreviousNext("JavaScript/Guide/Objects_and_Properties", "JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html b/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 024de85654..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: オブジェクトのプロパティに対するインデックス付け -slug: Web/JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties ---- -

オブジェクトのプロパティのインデックス付け

-

JavaScript 1.0 では、オブジェクトのプロパティを、そのプロパティ名や順序のインデックスで参照できます。しかしながら、JavaScript 1.1 以降では、最初にプロパティをその名前で定義すると、常にその名前で参照しなければならず、また、最初にプロパティをインデックスで定義すると、常にそのインデックスで参照しなければなりません。

-

先の Car というオブジェクトの種類の例のようにコンストラクタ関数を用いてオブジェクトとそのプロパティを作成したとき、また、それぞれのプロパティを明示的に定義したとき（例：myCar.color = "red"）に、これは適用されます。そのため、myCar{{ mediawiki.external(5) }} = "25 mpg" のように、最初にインデックスを用いてオブジェクトのプロパティを定義した場合、myCar{{ mediawiki.external(5) }} のようにそのプロパティを後から参照できるようになります。

-

このルールの例外は、forms 配列のように HTML から反映されたオブジェクトです。これらの配列内のオブジェクトは、その順番を表す数（文書内のどこにあるかに基づく）か、またはその名前（定義されている場合）のどちらかで常に参照できます。例えば、文書内の 2 番目の <FORM> タグが "myForm" という NAME 属性を持っている場合、document.forms{{ mediawiki.external(1) }} や document.forms{{ mediawiki.external('\"myForm\"') }} や document.myForm とすることでそのフォームを参照できます。

-

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function", "JavaScript/Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index f3abc30e89..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: コンストラクタ関数の使用 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -

コンストラクタ関数の使用

-

もう 1 つの方法として、次の 2 つのステップでオブジェクトを作成することができます。

-
    -
  1. コンストラクタ関数を書くことでオブジェクトの種類を定義する。
    2. -
  2. new を用いてそのオブジェクトのインスタンスを作成する。
    3. -
-

オブジェクトの種類を定義するために、その名前、プロパティ、メソッドを定義する関数を作成する必要があります。例えば、車についてのオブジェクトの種類を作成したいとします。そしてこの種類のオブジェクトに car という名前を付け、make、model、および year というプロパティを持たせたいとします。こうするためには次のような関数を書きます。

-
function car(make, model, year) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-}
-
-

関数に渡された値に基づいてオブジェクトのプロパティに値を代入するために this を使用しています。

-

すると、次のようにして mycar というオブジェクトを作成することができるようになります。

-
mycar = new car("Eagle", "Talon TSi", 1993);
-
-

この文は mycar を作成し、そのプロパティ用に指定した値を代入します。その結果、mycar.make の値は "Eagle" という文字列、mycar.year は 1993 という整数というようになります。

-

new を呼び出すことで car オブジェクトをいくらでも作ることができます。

-
kenscar = new car("Nissan", "300ZX", 1992);
-vpgscar = new car("Mazda", "Miata", 1990);
-
-

それ自身別のオブジェクトであるというようなプロパティを持つオブジェクトを作ることができます。例えば、次のように person というオブジェクトを定義するとします。

-
function person(name, age, sex) {
-   this.name = name;
-   this.age = age;
-   this.sex = sex;
-}
-
-

そして、次のように 2 つの新しい person オブジェクトのインスタンスを作成します。

-
rand = new person("Rand McKinnon", 33, "M");
-ken = new person("Ken Jones", 39, "M");
-
-

次のようにして、car の定義を書き換えて、person オブジェクトをとる owner プロパティを持たせることができます。

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-}
-
-

新しいオブジェクトのインスタンスを作成するために、次のようにします。

-
car1 = new car("Eagle", "Talon TSi", 1993, rand);
-car2 = new car("Nissan", "300ZX", 1992, ken);
-
-

新しいオブジェクトの作成時に文字列リテラルや整数値を渡す代わりに、上記の文ではオブジェクト rand および ken を所有者を表す引数として渡しています。car2 の所有者の名前を知りたい場合は次のプロパティにアクセスすることで可能になります。

-
car2.owner.name
-
-

以前に定義したオブジェクトにいつでもプロパティを追加できることに注意してください。例えば次の文

-
car1.color = "black"
-
-

はプロパティ color を car1 に追加し、それに "black" という値を代入します。しかしながら、この方法では他のどのオブジェクトにも影響を与えません。同じ種類の全オブジェクトに新しいプロパティを追加するには、そのプロパティを car というオブジェクトの種類の定義に追加する必要があります。

-

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers", "JavaScript/Guide/Creating_New_Objects/Indexing_Object_Properties") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html deleted file mode 100644 index 0a817b5407..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_object_initializers/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: オブジェクト初期化子の使用 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_Object_Initializers ---- -

オブジェクト初期化子の使用

-

コンストラクタ関数を使用してオブジェクトを作成する方法だけではなく、オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子を使うことはリテラル表示を用いてオブジェクトを作成するということです。「オブジェクト初期化子」は C++ でも同じ意味で使用されている用語です。

-

オブジェクト初期化子を使用したオブジェクトの構文は次のとおりです。

-
var obj = { property_1:   value_1,   // property_# は識別子でもよい
-            2:            value_2,   // あるいは数値でもよい
-            ...,
-            "property_n": value_n }; // あるいは文字列でもよい
-
-

ここで、obj は新しいオブジェクトの名前を、各 property_i は識別子（名前、数値、文字列リテラルのいずれか）を、各 value_i はその値を property_i に代入する式をそれぞれ表しています。obj および代入部分はなくてもかまいません。このオブジェクトを別の場所で参照する必要がないのであれば変数に代入する必要はありません。（文が期待されているところにオブジェクトリテラルを置く場合、リテラルを丸括弧で囲み、ブロック文と間違われないようにする必要があるかもしれません。）

-

トップレベルのスクリプトでオブジェクト初期化子を使用してオブジェクトを作成した場合、JavaScript はオブジェクトリテラルを含む式を評価するたびにそのオブジェクトを解釈します。さらに、関数内で使用された初期化子はその関数が呼び出されるたびに作成されます。

-

次の文は、式 cond が true の場合かつその場合に限り、あるオブジェクトを作成し、それを変数 x に代入します。

-
if (cond) x = {hi:"there"};
-
-

次の例は 3 つのプロパティを持つ myHonda を作成します。engine プロパティは自らもプロパティを持つオブジェクトでもあることに注意してください。

-
myHonda = {color:"red",wheels:4,engine:{cylinders:4,size:2.2}};
-
-

オブジェクト初期化子を使用して配列を作成することもできます。配列リテラル を参照してください。

-

JavaScript 1.1 以前ではオブジェクト初期化子を使用することはできません。コンストラクタ関数を使用するか、他のオブジェクトが備えているそのような用途の関数を使用しないとオブジェクトを作成できません。コンストラクタ関数の使用 をご覧ください。

-

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects", "JavaScript/Guide/Creating_New_Objects/Using_a_Constructor_Function") }}

diff --git a/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html b/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 5fbd3b8aff..0000000000 --- a/files/ja/web/javascript/guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: this を用いたオブジェクト参照 -slug: Web/JavaScript/Guide/Creating_New_Objects/Using_this_for_Object_References ---- -

this を用いたオブジェクト参照

-

JavaScript にはカレントオブジェクトを参照するメソッド内で使用できる特殊なキーワード、this があります。例えば、あるオブジェクトの value プロパティの妥当性を確認する validate という関数があるとします。関数にはそのオブジェクトと、上限および下限の値を渡します。

-
function validate(obj, lowval, hival) {
-   if ((obj.value < lowval) || (obj.value > hival))
-      alert("Invalid Value!");
-}
-
-

各フォーム要素の onchange イベントハンドラにおいて validate を呼び出します。this を使うことで form 要素を渡すことができます。次の例をご覧ください。

-
<input type="text" name="age" size="3"
-   onChange="validate(this, 18, 99)">
-
-

一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。

-

form プロパティと組み合わせることで、this はカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onclick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

-
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-      onclick="this.form.text1.value=this.form.name">
-</p>
-</form>
-
-

{{ PreviousNext("JavaScript/Guide/Creating_New_Objects/Defining_Methods", "JavaScript/Guide/Creating_New_Objects/Defining_Getters_and_Setters") }}

diff --git a/files/ja/web/javascript/guide/expressions/index.html b/files/ja/web/javascript/guide/expressions/index.html deleted file mode 100644 index 4feb2b1aa8..0000000000 --- a/files/ja/web/javascript/guide/expressions/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Expressions -slug: Web/JavaScript/Guide/Expressions ---- -
{{ 英語版章題("Expressions") }}
-

式

-

式とは、リテラル、変数、演算子、そして単一の値に評価する式からなる有効なセットです。この値には数値、文字列、論理値が使用できます。

-

概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、x = 7 という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では代入演算子を用います。一方、3 + 4 という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に演算子と呼ばれます。

-

JavaScript には以下の種類の式があります。

-
    -
  • 算術式：数値に評価する。例えば 3.14159。（一般に 算術演算子 を使用）
    • -
  • 文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に 文字列演算子 を使用）
    • -
  • 論理式：true または false に評価する。（よく 論理演算子 を用いる)
    • -
  • オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については 特殊演算子 を参照）
    • -
-

{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/break_statement/index.html b/files/ja/web/javascript/guide/loop_statements/break_statement/index.html deleted file mode 100644 index 35cc94abdf..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/break_statement/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: break 文 -slug: Web/JavaScript/Guide/Loop_Statements/break_Statement ---- -

break 文

-

break 文は loop 文や switch 文、label 文から抜け出すために使用します。

-
    -
  • break にラベルを使用しないと、最も内側にある while や do-while、for、switch から抜け、続く文にコントロールを移します。
    • -
  • break にラベルを使用すると、指定されたラベルの付いた文から抜けます。
    • -
-

break 文は次のように使用します。

-
    -
  1. break;
    2. -
  2. break label;
    3. -
-

１番目の形式の構文は最も内側のループもしくは switch から抜けます。２番目の形式の構文は指定した label 文から抜けます。

-

例
- 次の例は、その値が theValue である要素のインデックスが見つかるまで、配列の要素について繰り返します。

-
for (i = 0; i < a.length; i++) {
-   if (a[i] == theValue)
-      break;
-}
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements/label_Statement", "JavaScript/Guide/Loop_Statements/continue_Statement") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html b/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html deleted file mode 100644 index f7a5697eeb..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/continue_statement/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: continue 文 -slug: Web/JavaScript/Guide/Loop_Statements/continue_Statement ---- -

continue 文

-

continue 文は while 文、do-while 文、for 文、label 文をリスタートさせるために用います。

-
    -
  • ラベルを用いずに continue を使用した場合、現在繰り返している最も内側にある while 文 do-while 文、for 文を終了し、次の反復の実行に移ります。break 文とは異なり、continue はループ全体の実行を終了しません。while ループでは条件比較部分に戻ります。for ループではインクリメントの式に移ります。
    • -
  • ラベルを用いて continue を使用した場合、label で指定されたループ文に移ります。
    • -
-

continue 文は次のように使用します。

-
    -
  1. continue
    2. -
  2. continue label
    3. -
-

例 1
- 次の例では、i の値が 3 のときに実行される continue 文を用いた while ループを示します。こうすることで n は順に 1、3、7、12 という値をとります。

-
i = 0;
-n = 0;
-while (i < 5) {
-   i++;
-   if (i == 3)
-      continue;
-   n += i;
-}
-
-

例 2
- checkiandj というラベルの付いた文の中に checkj というラベルの付いた文があります。continue に出くわすと、プログラムは checkj の現在の反復を終了し、次の反復を始めます。continue に出くわすたびに、条件が false になるまで checkj を繰り返します。false が返されると checkiandj 文の残りを完了し、条件が false を返すまで checkiandj を繰り返します。false が返されると checkiandj に続く文が実行されます。

-

continue が checkiandj というラベルを持っているとプログラムは checkiandj 文の最初から続けます。

-
checkiandj :
-   while (i < 4) {
-      document.write(i + "<br/>");
-      i += 1;
-      checkj :
-         while (j > 4) {
-            document.write(j + "<br/>");
-            j -= 1;
-            if ((j % 2) == 0)
-               continue checkj;
-            document.write(j + " is odd.<br/>");
-         }
-      document.write("i = " + i + "<br/>");
-      document.write("j = " + j + "<br/>");
-   }
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements/break_Statement", "JavaScript/Guide/Object_Manipulation_Statements") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html b/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html deleted file mode 100644 index 6e1df1e586..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/do...while_statement/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: do...while 文 -slug: Web/JavaScript/Guide/Loop_Statements/do...while_Statement ---- -

do...while 文

-

do...while 文は指定した条件が false に評価されるまで繰り返します。do...while 文は次のように使用します。

-
do
-   statement
-while (condition);
-
-

statement は条件がチェックされる前に一度実行されます。複数の文を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。condition が true の場合、その文が再び実行されます。毎回実行された後に条件がチェックされます。条件が false ときは実行が停止され、コントロールが do...while の後に続く文に渡されます。

-

例
- 次の例では do ループは最低 1 回は反復され、i が 5 より小さくなくなるまで反復されます。

-
do {
-   i += 1;
-   document.write(i);
-} while (i < 5);
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements/for_Statement", "JavaScript/Guide/Loop_Statements/while_Statement") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/for_statement/index.html b/files/ja/web/javascript/guide/loop_statements/for_statement/index.html deleted file mode 100644 index b2dccec25b..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/for_statement/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: for 文 -slug: Web/JavaScript/Guide/Loop_Statements/for_Statement ---- -

for 文

-

for ループは指定した条件が false に評価されるまで繰り返します。JavaScript の for ループは Java や C の for ループに似ています。for 文は次のように使用します。

-
for ([initialExpression]; [condition]; [incrementExpression])
-   statement
-
-

for ループを実行すると以下のことが起こります。

-
    -
  1. 初期化式 initialExpression があれば実行されます。この式は通常、1 つかそれ以上のループカウンタを初期化しますが、構文的にはある程度複雑な式も指定できます。また、この式は変数を宣言することもできます。
    2. -
  2. condition 式が評価されます。condition の値が true であればループ文が実行されます。condition が false の場合は for ループは終了します。condition 式が完全に省略されている場合、条件は true であると仮定されます。
    3. -
  3. statement が実行されます。複数の式を実行するにはブロック文 ({ ... }) を使用して文をグループ化してください。
    4. -
  4. 更新式 incrementExpression があれば実行されます。そしてコントロールがステップ 2 に戻ります。
    5. -
-

例
- 次の関数には、スクローリングリスト（複数選択できる Select オブジェクト）で選択されたオプションの数を数える for 文が含まれています。for 文では変数 i が宣言され、それが 0 に初期化されています。i が Select オブジェクトのオプションの個数より小さいかをチェックし、続く if 文を実行し、ループが 1 回りしたら i を 1 だけ増加させます。

-
<script type="text/javascript">//<![CDATA[
-
-function howMany(selectObject) {
-   var numberSelected = 0;
-   for (var i = 0; i < selectObject.options.length; i++) {
-      if (selectObject.options[i].selected)
-         numberSelected++;
-   }
-   return numberSelected;
-}
-
-//]]></script>
-<form name="selectForm">
-   <p>
-      <strong>Choose some music types, then click the button below:</strong>
-      <br/>
-      <select name="musicTypes" multiple="multiple">
-         <option selected="selected">R&B</option>
-         <option>Jazz</option>
-         <option>Blues</option>
-         <option>New Age</option>
-         <option>Classical</option>
-         <option>Opera</option>
-      </select>
-   </p>
-   <p>
-      <input type="button" value="How many are selected?"
-         onclick="alert ('Number of options selected: ' + howMany(document.selectForm.musicTypes))"/>
-   </p>
-</form>
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements", "JavaScript/Guide/Loop_Statements/do...while_Statement") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/index.html b/files/ja/web/javascript/guide/loop_statements/index.html deleted file mode 100644 index 54ef32d2c9..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: ループ文 -slug: Web/JavaScript/Guide/Loop_Statements ---- -

ループ文

-

ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、break および continue 文をループ文の中で使うことができます。

-

さらに for...in 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。オブジェクト操作文 をご覧ください。

-

ループ文は以下のとおりです。

- -

{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/label_statement/index.html b/files/ja/web/javascript/guide/loop_statements/label_statement/index.html deleted file mode 100644 index d0b878455b..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/label_statement/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: label 文 -slug: Web/JavaScript/Guide/Loop_Statements/label_Statement ---- -

label 文

-

label を使うと、そのプログラムのどこからでも参照できる、識別子を持った文を作ることができます。例えば、ラベルを使用してあるループに名前を付けると、break 文や continue 文を使用してプログラムがループを脱出するべきかそのまま実行を継続するべきかを示すことができます。

-

label 文は次のように使用します。

-
label :
-   statement
-
-

label の値は予約語でなければどんな JavaScript の識別子でも使用できます。ラベルを用いて名前を付ける statement はどんな文でも結構です。

-

例
- この例では markLoop というラベルを用いて while ループに名前を付けています。

-
markLoop:
-while (theMark == true)
-   doSomething();
-}
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements/while_Statement", "JavaScript/Guide/Loop_Statements/break_Statement") }}

diff --git a/files/ja/web/javascript/guide/loop_statements/while_statement/index.html b/files/ja/web/javascript/guide/loop_statements/while_statement/index.html deleted file mode 100644 index 77fd191f75..0000000000 --- a/files/ja/web/javascript/guide/loop_statements/while_statement/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: while 文 -slug: Web/JavaScript/Guide/Loop_Statements/while_Statement ---- -

while 文

-

while 文は、指定した条件が true に評価される限り文を実行します。while 文は次のように使用します。

-
while (condition)
-   statement
-
-

条件が false になるとループ内の statement の実行が停止し、ループの後に続く文にコントロールが渡されます。

-

ループの statement を実行する前に条件がテストされます。条件が true を返すと statement が実行され、再び条件がテストされます。条件が false を返すと、実行が停止され、while の後に続く文にコントロールが渡されます。

-

複数の文を実行するにはブロック文 ({ ... }) を用いて文をグループ化してください。

-

例 1
- 次の while ループでは n が 3 より小さい限り反復されます。

-
n = 0;
-x = 0;
-while (n < 3) {
-   n++;
-   x += n;
-}
-
-

それぞれの反復で、ループは n をインクリメントし、その値を x に加えています。その結果、x と n は次の値をとります。

-
    -
  • 第 1 段階終了後：n = 1、x = 1
    • -
  • 第 2 段階終了後：n = 2、x = 3
    • -
  • 第 3 段階終了後：n = 3、x = 6
    • -
-

第 3 段階が完了すると条件 n < 3 が true ではなくなっているため、ループは終了します。

-

例 2
- 無限ループは避けてください。ループの条件が最終的には false になることを確認してください。そうしないとループが終了しなくなります。次の while ループ内の文は永久に実行されます。条件が決して false にならないためです。

-
while (true) {
-   alert("Hello, world");
-}
-
-

{{ PreviousNext("JavaScript/Guide/Loop_Statements/do...while_Statement", "JavaScript/Guide/Loop_Statements/label_Statement") }}

diff --git a/files/ja/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/web/javascript/guide/object_manipulation_statements/index.html deleted file mode 100644 index ddf781e031..0000000000 --- a/files/ja/web/javascript/guide/object_manipulation_statements/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Object Manipulation Statements -slug: Web/JavaScript/Guide/Object_Manipulation_Statements ---- -

オブジェクト操作文

-

JavaScript はオブジェクトの操作に for...in、for each...in および with 文を使用します。

-

for...in 文

-

for...in 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。for...in 文は次のように使用します。

-
for (variable in object) {
-   statements
-}
-
-

例
- 次の関数は、あるオブジェクトとそのオブジェクトの名前を引数にとります。そしてそのオブジェクトの全プロパティに対して反復し、プロパティ名とその値のリストにした文字列を返します。

-
function dump_props(obj, obj_name) {
-   var result = "";
-   for (var i in obj) {
-      result += obj_name + "." + i + " = " + obj[i] + "<br>";
-   }
-   result += "<hr>";
-   return result;
-}
-
-

make および model というプロパティを持つ car というオブジェクトでは次のような結果が得られます。

-
car.make = Ford
-car.model = Mustang
-
-

配列
- Array の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、for...in 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると for...in 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の for ループを使用したほうがいいでしょう。

-

for each...in 文

-

for each...in は JavaScript 1.6 で導入されるループ文です。これは for...in に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。

-

with 文

-

with 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。

-

with 文は次のように使用します。

-
with (object) {
-   statements
-}
-
-

例
- 次の with 文では Math オブジェクトがデフォルトのオブジェクトに指定されています。with 文内の文は PI プロパティや cos および sin メソッドを参照していますが、オブジェクトは指定していません。JavaScript はこれらの参照は Math オブジェクトへのものであると想定します。

-
var a, x, y;
-var r = 10;
-with (Math) {
-   a = PI * r * r;
-   x = r * cos(PI);
-   y = r * sin(PI/2);
-}
-
-

注意：with 文を使うことでプログラムをより簡潔にすることができますが、with の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。Core JavaScript 1.5 Reference:Statements:with を参照してください。

- -

{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}

diff --git a/files/ja/web/javascript/guide/objects_and_properties/index.html b/files/ja/web/javascript/guide/objects_and_properties/index.html deleted file mode 100644 index f2679c1d00..0000000000 --- a/files/ja/web/javascript/guide/objects_and_properties/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: オブジェクトとプロパティ -slug: Web/JavaScript/Guide/Objects_and_Properties ---- -

オブジェクトとプロパティ

-

JavaScript のオブジェクトには、それに結びつけられたプロパティがあります。簡単な記法でオブジェクトのプロパティにアクセスできます。

-
objectName.propertyName
-
-

オブジェクト名もプロパティ名も大文字と小文字を区別します。プロパティの定義は、そのプロパティに値を代入することで行います。例えば、myCar という名前のオブジェクトがあるとします（今回はオブジェクトが既に存在していると仮定）。次のようにして、そのオブジェクトに make、model、year という名前のプロパティをそれぞれ作成することができます。

-
myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-
-

配列はある単一の変数名に結びつけられた値の順序集合です。JavaScript におけるプロパティと配列は密接に関連しています。事実、それらは同一のデータ構造への異なるインタフェースなのです。そのため、例えば次のようにして myCar オブジェクトのプロパティにアクセスすることができます。

-
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1969;
-
-

この手の配列は連想配列として知られています。それぞれのインデックスの要素が文字列にも結びつけられているからです。これがどう動作するかというと、次の関数は引数としてオブジェクトとそのオブジェクトの名前を渡すとオブジェクトのプロパティを表示します。

-
function show_props(obj, obj_name) {
-   var result = "";
-   for (var i in obj)
-      result += obj_name + "." + i + " = " + obj[i] + "\n";
-   return result;
-}
-
-

関数 show_props(myCar, "myCar") を呼び出すと以下の結果が返されます。

-
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969
-
-

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions", "JavaScript/Guide/Creating_New_Objects") }}

diff --git a/files/ja/web/javascript/guide/obsolete_pages/index.html b/files/ja/web/javascript/guide/obsolete_pages/index.html deleted file mode 100644 index 88bf9acbe7..0000000000 --- a/files/ja/web/javascript/guide/obsolete_pages/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -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/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html b/files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html deleted file mode 100644 index 79c30b670a..0000000000 --- a/files/ja/web/javascript/guide/obsolete_pages/predefined_core_objects/function_object/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -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'
-}
-
-

関数を変数に代入することは関数を宣言することと似ていますが、異なる点もあります。

-
    -
  • var setBGColor = new Function("...") のようにして関数を変数に代入すると、setBGColor は new Function() を用いて作成した関数への参照がその値であるような変数になります。
    • -
  • function setBGColor() {...} のようにして関数を作成すると、setBGColor は変数ではなく関数の名前になります。
    • -
-

関数を関数の中に入れ子にすることができます。内側の関数は外側の関数に対してプライベートになります。

-
    -
  • 内側の関数には外側の関数の文からしかアクセスできません。
    • -
  • 内側の関数は外側の関数の引数や変数を使用できます。外側の関数は内側の関数の引数や変数を使用できません。
    • -
-

{{ 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/web/javascript/guide/operators/arithmetic_operators/index.html b/files/ja/web/javascript/guide/operators/arithmetic_operators/index.html deleted file mode 100644 index 4aa9662292..0000000000 --- a/files/ja/web/javascript/guide/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: 算術演算子 -slug: Web/JavaScript/Guide/Operators/Arithmetic_Operators ---- -

算術演算子

-

算術演算子は、そのオペランドに数値（リテラルか変数）をとり、1 つの数値を返します。標準的な算術演算子は、加算 (+)、減算 (-)、乗算 (*)、除算 (/) です。これらの演算子は他のほとんどのプログラミング言語と同じように機能しますが、そのときの数値は、浮動小数点数として扱われます（0 で除算した結果は、NaN になることにも注意してください）。

-
1 / 2 // JavaScript では 0.5 を返す
-1 / 2 // Java では 0 を返す（どちらの数も浮動小数点数として明記されていない）
-
-1.0 / 2.0  // JavaScript でも Java でも 0.5 を返す
-
-

さらに、JavaScript では以下の表で示された算術演算子も使用できます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
演算子説明例
%
- （モジュロ）		2 項演算子。2 つのオペランドで除算したときの整数の余りを返す。12 % 5 は 2 を返す。
++
- （インクリメント）		単項演算子。オペランドに 1 を加える。前置演算子 (++x) を使った場合、オペランドに 1 を加えた後にその値を返す。後置演算子 (x++) を使った場合、オペランドに 1 を加える前にその値を返す。x が 3 のとき、++x は x に 4 をセットし、4 を返す。一方、x++ は x に 4 をセットし、3 を返す。
--
- （デクリメント）		単項演算子。オペランドから 1 を引く。戻り値はインクリメント演算子のものと同様。x が 3 のとき、--x は x に 2 をセットし、2 を返す。一方、x-- は x に 2 をセットし、3 を返す。
-
- （符号反転）		単項演算子。オペランドの符号を反転してその値を返す。x が 3 のとき、-x は -3 を返す。
-

表 3.4：算術演算子

-

{{ PreviousNext("JavaScript/Guide/Operators/Comparison_Operators", "JavaScript/Guide/Operators/Bitwise_Operators") }}

diff --git a/files/ja/web/javascript/guide/operators/assignment_operators/index.html b/files/ja/web/javascript/guide/operators/assignment_operators/index.html deleted file mode 100644 index 88a0b0beb7..0000000000 --- a/files/ja/web/javascript/guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 代入演算子 -slug: Web/JavaScript/Guide/Operators/Assignment_Operators ---- -

代入演算子

-

代入演算子は、右のオペランドの値に基づいた値を左のオペランドに代入します。基本的な代入演算子はイコール (=) ですが、これは右のオペランドの値を左のオペランドに代入します。すなわち、x = y では y の値を x に代入します。

-

他の代入演算子は標準的な演算をするための短縮表記があります。次の表でそれを示します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
短縮表記した演算子意味
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
-

表 3.2：代入演算子

-

{{ PreviousNext("JavaScript/Guide/Operators", "JavaScript/Guide/Operators/Comparison_Operators") }}

diff --git a/files/ja/web/javascript/guide/operators/comparison_operators/index.html b/files/ja/web/javascript/guide/operators/comparison_operators/index.html deleted file mode 100644 index 182802bb5a..0000000000 --- a/files/ja/web/javascript/guide/operators/comparison_operators/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 比較演算子 -slug: Web/JavaScript/Guide/Operators/Comparison_Operators ---- -

比較演算子

-

This seems to me kind of poorly explained, mostly the diference betwen "==" and "==="... 比較演算子は、オペランドを比較し、比較結果に基づいた論理値を返します。オペランドには数値、文字列、論理値、オブジェクトが使用できます。文字列は、Unicode 値を用いて標準的な辞書順に基づいて比較されます。ほとんどの場合、2 つのオペランドが異なる型ならば JavaScript はそのオペランドを比較に適した型に変換しようとします（このルールの唯一の例外は === および !== であり、これらは厳密に等値か否かを判断し、等値性をチェックする前にオペランドを適合する型に変換するということはありません）。これは一般に数値の比較が実行されることになります。次の表では比較演算子について説明します。次のコードで考えます。

-
var var1 = 3, var2 = 4;
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
演算子説明true を返す例
等しい (==)オペランドが等しい場合に true を返す。3 == var1
-

"3" == var1

- 3 == '3'
等しくない (!=)オペランドが等しくない場合に true を返す。var1 != 4
- var2 != "3"
厳密に等しい (===)オペランドが等しく、かつ同じ型である場合に true を返す。3 === var1
厳密には等しくない (!==)オペランドが等しくなく、かつ/または同じ型でない場合に true を返す。var1 !== "3"
- 3 !== '3'
より大きい (>)左のオペランドが右のオペランドよりも大きい場合に true を返す。var2 > var1
- "12" > 2
以上 (>=)左のオペランドが右のオペランド以上である場合に true を返す。var2 >= var1
- var1 >= 3
より小さい (<)左のオペランドが右のオペランドよりも小さい場合に true を返す。var1 < var2
- "12" < "2"
以下 (<=)左のオペランドが右のオペランド以下である場合に true を返す。var1 <= var2
- var2 <= 5
-

表 3.3：比較演算子

-

{{ PreviousNext("JavaScript/Guide/Operators/Assignment_Operators", "JavaScript/Guide/Operators/Arithmetic_Operators")}}

diff --git a/files/ja/web/javascript/guide/operators/logical_operators/index.html b/files/ja/web/javascript/guide/operators/logical_operators/index.html deleted file mode 100644 index fa6fa08068..0000000000 --- a/files/ja/web/javascript/guide/operators/logical_operators/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 論理演算子 -slug: Web/JavaScript/Guide/Operators/Logical_Operators ---- -

論理演算子

-

論理演算子では基本的に真偽（論理）値を用います。そのような値があると真偽値を返します。しかし、&& および || 演算子は実際には指定されたオペランドの一方の値を返します。そのため、非真偽値とともに論理演算子が使われると非真偽値を返します。論理演算子について次の表で説明します。

- - - - - - - - - - - - - - - - - - - - - - - -
演算子使用法説明
&&expr1 && expr2（論理 AND）expr1 を false と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、両オペランドが true の場合は && は true を返し、そうでない場合は false を返す。
||expr1 || expr2（論理 OR）expr1 を true と見ることができる場合は expr1 を返す。そうでない場合は expr2 を返す。したがって、真偽値が使われた場合、どちらかのオペランドが true の場合は || は true を返し、両方とも false の場合は false を返す。
!!expr（論理 NOT）オペランドを true と見ることができる場合は false を返す。そうでない場合は true を返す。
-

表 3.7：論理演算子

-

false と見ることができる式とは、null、0、空文字列 ("")、または undefined に評価される式のことです。

-

以下のコードで &&（論理 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）演算子の例を示します。

-
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）演算子の例を示します。

-
n1=!true              // !t は false を返す
-n2=!false             // !f は true を返す
-n3=!"Cat"             // !t は false を返す
-
-

ショートサーキット評価

-

論理式は左から右に評価されるため、以下のルールを用いることで「ショートサーキット」評価ができるようになっています。

-
    -
  • false && anything は false にショートサーキット評価する。
    • -
  • true || anything は true ショートサーキット評価する。
    • -
-

論理のルールはこれらの評価が常に正確であることを保証しています。上記の式の anything の部分は評価されないため、何らかの副作用が生じないように注意してください。

-

{{ PreviousNext("JavaScript/Guide/Operators/Bitwise_Operators", "JavaScript/Guide/Operators/String_Operators") }}

diff --git a/files/ja/web/javascript/guide/operators/special_operators/index.html b/files/ja/web/javascript/guide/operators/special_operators/index.html deleted file mode 100644 index 226faf2b3c..0000000000 --- a/files/ja/web/javascript/guide/operators/special_operators/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: 特殊演算子 -slug: Web/JavaScript/Guide/Operators/Special_Operators ---- -

特殊演算子

-

JavaScript は以下の特殊演算子があります。

-
    -
  • {{ Anch("条件演算子") }}
    • -
  • {{ Anch("コンマ演算子") }}
    • -
  • {{ Anch("delete") }}
    • -
  • {{ Anch("in") }}
    • -
  • {{ Anch("instanceof") }}
    • -
  • {{ Anch("new") }}
    • -
  • {{ Anch("this") }}
    • -
  • {{ Anch("typeof") }}
    • -
  • {{ Anch("void") }}
    • -
-

条件演算子

-

条件演算子は JavaScript では唯一の 3 つのオペランドをとる演算子です。演算子は条件に基づいて 2 つの値のうち、1 つを選択します。構文は次のとおりです。

-
condition ? val1 : val2
-
-

condition が true の場合、演算子は val1 の値を選択します。そうでない場合は val2 の値を選択します。標準的な演算子が使用できる場所でならどこででも条件演算子を使用することができます。

-

例えば、

-
status = (age >= 18) ? "adult" : "minor"
-
-

この文では、age が 18 以上の場合 "adult" という値を変数 status に代入します。そうでない場合は "minor" という値を status に代入します。

-

コンマ演算子

-

コンマ演算子 (,) は単に両方のオペランドを評価し、第 2 のオペランドの値を返します。この演算子は主に for ループ内で使用されます。このことでループのたびに複数の変数を更新できるようになります。

-

例えば、a が一辺が 10 要素の 2 次元配列のとき、以下のコードではコンマ演算子を用いることで 2 変数を同時にインクリメントしています。このコードでは配列の対角成分の値を出力します。

-
for (var i=0, j=9; i <= 9; i++, j--)
-   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
-
-

delete

-

delete 演算子はオブジェクトやオブジェクトのプロパティ、配列の指定されたインデックスの要素を削除します。構文は以下のとおりです。

-
delete objectName
-delete objectName.property
-delete objectName[index]
-delete property // with 文内でのみ有効
-
-

ここで、objectName はオブジェクトの名前を、property は既存のプロパティを、index は配列の要素の位置を表す整数をそれぞれ表しています。

-

4 番目の形式は with 文内でのみ有効で、これはあるオブジェクトからプロパティを削除します。

-

delete 演算子を使うことで暗黙的に宣言された変数を削除することができますが、var 文を用いて宣言された変数は削除できません。

-

delete 演算子が成功すると、そのプロパティや要素には undefined がセットされます。また、演算が可能な場合は delete 演算子は true を返します。演算が不可能な場合は false を返します。

-
x=42
-var y= 43
-myobj=new Number()
-myobj.h=4      // プロパティ h を作成
-delete x       // true を返す（暗黙的に宣言されているならば削除可能）
-delete y       // false を返す（var 付きで宣言されているなら削除不可能）
-delete Math.PI // false を返す（定義済みプロパティは削除不可能）
-delete myobj.h // true を返す（ユーザ定義プロパティは削除可能）
-delete myobj   // true を返す（暗黙的に宣言されているならば削除可能）
-
-

配列要素の削除
- 配列要素を削除したとき、配列の長さには影響を及ぼしません。例えば a{{ mediawiki.external(3) }} を削除したとき、a{{ mediawiki.external(4) }} は依然 a{{ mediawiki.external(4) }} のままで、a{{ mediawiki.external(3) }} は undefined になります。

-

delete 演算子で配列要素を除去すると、もうその要素はその配列からなくなります。次の例では tree{{ mediawiki.external(3) }} は delete によって除去されます。

-
trees=new Array("redwood","bay","cedar","oak","maple")
-delete trees[3]
-if (3 in trees) {
-   // ここは実行されない
-}
-
-

配列要素は存在させたいが、値は未定義にしたいという場合は、delete 演算子の代わりに undefined キーワードを使用してください。次の例では trees{{ mediawiki.external(3) }} には undefined という値が代入されますが、その配列要素は存在したままになります。

-
trees=new Array("redwood","bay","cedar","oak","maple")
-trees[3]=undefined
-if (3 in trees) {
-   // ここは実行される
-}
-
-

in

-

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。構文は以下のとおりです。

-
propNameOrNumber in objectName
-
-

ここで、propNameOrNumber はプロパティ名か配列のインデックスを表す文字列式または数値式を、objectName はオブジェクトの名前をそれぞれ表しています。

-

次の例では in 演算子の使用法を示します。

-
// 配列
-trees=new Array("redwood","bay","cedar","oak","maple")
-0 in trees        // true を返す
-3 in trees        // true を返す
-6 in trees        // false を返す
-"bay" in trees    // false を返す（インデックスの指す値ではなく、
-                  // インデックスの数字を指定しなければならない）
-"length" in trees // true を返す（length は Array のプロパティ）
-
-// 定義済みオブジェクト
-"PI" in Math          // true を返す
-myString=new String("coral")
-"length" in myString  // true を返す
-
-// ユーザ定義オブジェクト
-mycar = {make:"Honda",model:"Accord",year:1998}
-"make" in mycar  // true を返す
-"model" in mycar // true を返す
-
-

instanceof

-

instanceof 演算子は、指定されたオブジェクトが指定されたオブジェクトの種類である場合に true を返します。構文は次のとおりです。

-
objectName instanceof objectType
-
-

ここで、objectName は objectType と比較するオブジェクトの名前を、objectType は Date や Array のようなオブジェクトの種類をそれぞれ表しています。

-

実行時にオブジェクトの種類を確認する必要があるときは instanceof を使用してください。例えば、例外を受け取るとき、投げられた例外の種類によって別々の例外を扱うコードに分岐させることができます。

-

例えば、次のコードでは instanceof を使用することで theDay が Date オブジェクトであるかどうかを決定しています。theDay は Date オブジェクトなので if 文の中の文は実行されます。

-
theDay=new Date(1995, 12, 17)
-if (theDay instanceof Date) {
-   // 実行される文
-}
-
-

new

-

new 演算子は、ユーザ定義オブジェクトや、Array、Boolean、Date、Function、Image、Number、Object、Option、RegExp、String といった定義済みオブジェクトのインスタンスを作成するのに使用します。サーバでは DbPool、Lock、File、SendMail といったオブジェクトも使用できます。new の使用法は以下のとおりです。

-
objectName = new objectType ( param1 [,param2] ...[,paramN] )
-
-

オブジェクト初期化子を使用してもオブジェクトを作成することができます。オブジェクト初期化子の使用 にて説明しています。

-

詳しくはコア JavaScript リファレンスの new 演算子 のページを参照してください。

-

this

-

this キーワードを使うことでカレントオブジェクトを参照することができます。一般に this はあるメソッド内でそのメソッドを呼び出したオブジェクトを参照します。使用法は以下のとおりです。

-
this[.propertyName]
-
-

例 1
- あるオブジェクトの value プロパティの妥当性を確認する validate という関数を想定します。関数にはそのオブジェクトと、上限および下限の値を渡します。

-
function validate(obj, lowval, hival) {
-   if ((obj.value < lowval) || (obj.value > hival))
-      alert("Invalid Value!")
-}
-
-

各フォーム要素の onChange イベントハンドラにおいて validate を呼び出します。this を使うことでフォーム要素を渡すことができます。次の例をご覧ください。

-
<B>Enter a number between 18 and 99:</B>
-<INPUT TYPE = "text" NAME = "age" SIZE = 3
-   onChange="validate(this, 18, 99)">
-
-

例 2
- form プロパティと組み合わせると this でカレントオブジェクトの親のフォームを参照できます。次の例では、myForm というフォームに Text オブジェクトとボタンが格納されています。ユーザがボタンをクリックすると、Text オブジェクトの値にフォーム名がセットされます。ボタンの onClick イベントハンドラは this.form を利用して親のフォームである myForm を参照します。

-
<FORM NAME="myForm">
-Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
-<P>
-<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
-   onClick="this.form.text1.value=this.form.name">
-</FORM>
-
-

typeof

-

typeof 演算子は次の方法のうち、どちらかの方法で使用します。

-
1. typeof operand
-2. typeof (operand)
-
-

typeof 演算子は、未評価のオペランドの型を指す文字列を返します。operand は返される型を調べる対象となる文字列、変数、キーワード、オブジェクトです。括弧はあってもなくてもかまいません。

-

以下の変数を定義することを想定します。

-
var myFun = new Function("5+2")
-var shape="round"
-var size=1
-var today=new Date()
-
-

typeof 演算子はこれらの変数に対して以下の結果を返します。

-
typeof myFun is function
-typeof shape is string
-typeof size is number
-typeof today is object
-typeof dontExist is undefined
-
-

true や null というキーワードに対して、typeof 演算子は以下の結果を返します。

-
typeof true is boolean
-typeof null is object
-
-

数値や文字列に対して、typeof 演算子は以下の結果を返します。

-
typeof 62 is number
-typeof 'Hello world' is string
-
-

プロパティ値に対して、typeof 演算子はプロパティ値の型を返します。

-
typeof document.lastModified is string
-typeof window.length is number
-typeof Math.LN2 is number
-
-

メソッドや関数に対して、typeof 演算子は以下の結果を返します。

-
typeof blur is function
-typeof eval is function
-typeof parseInt is function
-typeof shape.split is function
-
-

定義済みオブジェクトに対して、typeof 演算子は以下の結果を返します。

-
typeof Date is function
-typeof Function is function
-typeof Math is function
-typeof Option is function
-typeof String is function
-
-

void

-

void 演算子は次の方法のうち、どちらかの方法で使用します。

-
1. void (expression)
-2. void expression
-
-

void 演算子は値を返さずに評価する式を指定します。expression は評価する JavaScript の式です。式の周りの括弧はあってもなくてもかまいませんが、使用したほうが見た目はいいです。

-

void 演算子を使用することで式をハイパーテキストリンクとして指定することができます。式は評価されますが、開いている文書の代わりに読み込まれるということはありません。

-

以下のコードはユーザがクリックしても何も起こらないハイパーテキストリンクを作成します。ユーザがリンクをクリックすると void(0) は undefined に評価され、JavaScript としては影響を及ぼしません。

-
<A HREF="javascript:void(0)">Click here to do nothing</A>
-
-

以下のコードはユーザがクリックするとフォームが送信されるハイパーテキストリンクを作成します。

-
<A HREF="javascript:void(document.form.submit())">
-Click here to submit</A>
-
-

{{ PreviousNext("JavaScript/Guide/Operators/String_Operators", "JavaScript/Guide/Creating_a_Regular_Expression") }}

diff --git a/files/ja/web/javascript/guide/operators/string_operators/index.html b/files/ja/web/javascript/guide/operators/string_operators/index.html deleted file mode 100644 index 41bf8bbc44..0000000000 --- a/files/ja/web/javascript/guide/operators/string_operators/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: 文字列演算子 -slug: Web/JavaScript/Guide/Operators/String_Operators ---- -

文字列演算子

-

比較演算子は文字列に使用できますが、これに加えて 2 つの文字列を結合する結合演算子 (+) も使用できます。これは 2 つのオペランドの文字列を結合した文字列を返します。例えば、"my " + "string" は "my string" という文字列を返します。

-

短縮表記した代入演算子 += も文字列の結合に使用できます。例えば、変数 mystring に "alpha" という値が格納されているとき、式 mystring += "bet" の評価結果は "alphabet" となり、この値を mystring に代入します。

-

{{ PreviousNext("JavaScript/Guide/Operators/Logical_Operators", "JavaScript/Guide/Operators/Special_Operators") }}

diff --git a/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html deleted file mode 100644 index aecb8a81f1..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: escape 関数と unescape 関数 -slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Functions ---- -
-

escape および unescape 関数

-

escape および unescape 関数は文字列をエンコードしたりデコードしたりします。escape 関数は ISO Latin 文字セットで表された引数の 16 進エンコーディングを返します。unescape は指定した 16 進エンコーディングの値に対する ASCII 文字列を返します。

-

これらの関数の構文は以下のとおりです。

- 
escape(string)
-unescape(string)
-
-

これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。

- escape および unescape 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では encodeURI、decodeURI、encodeURIComponent および decodeURIComponent を使用してください。
-

{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}

diff --git a/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html b/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html deleted file mode 100644 index 3945955e86..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/eval_function/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: eval 関数 -slug: Web/JavaScript/Guide/Predefined_Functions/eval_Function ---- -
-

eval 関数

-

eval 関数は JavaScript のコードの文字列を特定のオブジェクトを参照することなく評価します。eval の構文は次のとおりです。

- 
eval(expr)
-
-

ここで expr は評価される文字列です。

- 文字列が式を表している場合は eval はその式を評価します。また、1 つ以上の JavaScript の文を表している場合は eval はその式を実行します。eval のコードのスコープは呼び出し元コードのスコープと同じです。演算式を評価するために eval を呼び出さないでください。JavaScript は自動的に演算式を評価します。
-

{{ PreviousNext("JavaScript/Guide/Predefined_Functions", "JavaScript/Guide/Predefined_Functions/isFinite_Function") }}

diff --git a/files/ja/web/javascript/guide/predefined_functions/index.html b/files/ja/web/javascript/guide/predefined_functions/index.html deleted file mode 100644 index 758c6f22a0..0000000000 --- a/files/ja/web/javascript/guide/predefined_functions/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: 定義済み関数 -slug: Web/JavaScript/Guide/Predefined_Functions ---- -
-

定義済み関数

-

JavaScript にはトップレベルの定義済み関数がいくつかあります。

- -
-

{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}

diff --git a/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html deleted file mode 100644 index 2340536ff7..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Creating the Hierarchy -slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy ---- -

階層の作成

-

Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。

-

このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。

-

実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは より柔軟なコンストラクタ を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。

-

Image:hier02.gif
- 図 8.2：Employee オブジェクトの定義

-

以下に示すように、Java と JavaScript の Employee の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。

- - - - - - - - - - - -
JavaScriptJava
- 
-function Employee () {
-this.name = "";
-this.dept = "general";
-}
-
- 		- 
-public class Employee {
-   public String name;
-   public String dept;
-   public Employee () {
-      this.name = "";
-      this.dept = "general";
-   }
-}
-
-
-

Manager および WorkerBee の定義では、継承の連鎖において上である次のオブジェクトの指定方法に違いがあります。JavaScript では原型的なインスタンスをコンストラクタ関数の prototype プロパティとして追加します。コンストラクタを定義した後ならいつでもそれをすることができます。Java ではクラス定義内でスーパークラスを指定します。クラス定義の外部でスーパークラスを変更することはできません。

- - - - - - - - - - - -
JavaScriptJava
- 
-function Manager () {
-this.reports = [];
-}
-Manager.prototype = new Employee;
-
-function WorkerBee () {
-this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- 		- 
-public class Manager extends Employee {
-   public Employee[] reports;
-   public Manager () {
-      this.reports = new Employee[0];
-   }
-}
-
-public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this.projects = new String[0];
-   }
-}
-
-
-

Engineer および SalesPerson の定義は、WorkerBee の子孫、それゆえに Employee の子孫であるオブジェクトを作成します。これらの種類のオブジェクトは連鎖において上にある全オブジェクトのプロパティを持ちます。さらに、これらの定義は dept プロパティの継承された値をこれらのオブジェクト固有の新しい値で上書きします。

- - - - - - - - - - - -
JavaScriptJava
- 
-function SalesPerson () {
-   this.dept = "sales";
-   this.quota = 100;
-}
-SalesPerson.prototype = new WorkerBee;
-
-function Engineer () {
-   this.dept = "engineering";
-   this.machine = "";
-}
-Engineer.prototype = new WorkerBee;
-
- 		- 
-public class SalesPerson extends WorkerBee {
-   public double quota;
-   public SalesPerson () {
-      this.dept = "sales";
-      this.quota = 100.0;
-   }
-}
-
-public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      this.dept = "engineering";
-      this.machine = "";
-   }
-}
-
-
-

これらの定義を使用して、そのプロパティのデフォルト値を取得するこれらのオブジェクトのインスタンスを作成することができます。図 8.3 ではこれらの JavaScript の定義を使用して新しいオブジェクトを作成する方法を示しています。また、新しいオブジェクトに対するプロパティの値も示しています。

-

注意：インスタンスという用語はクラスベース言語においてはある特定の技術的な意味を持っています。これらの言語では、インスタンスとはクラスの個々のメンバであり、クラスとは根本的に異なるものです。JavaScript では「インスタンス」はこの技術的な意味を持っていません。なぜならば JavaScript にはクラスとインスタンスとの間のこの違いがないからです。しかしながら、JavaScript について話す際に、「インスタンス」をある特定のコンストラクタ関数を用いて作成したオブジェクトを意味する言葉として正式ではない形で使用することがあります。例えば、jane は Engineer のインスタンスであると砕けた言い方をすることもできます。同様に、親、子、祖先、そして子孫という用語は JavaScript において正式な意味を持ちませんが、プロトタイプチェーンにおいて上や下にあるオブジェクトについて言及する際にそれらを正式ではない形で使用してもかまいません。

-

Image:hier03.gif
- 図 8.3：単純な定義を用いたオブジェクトの作成

-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties") }}

-
diff --git a/files/ja/web/javascript/guide/the_employee_example/index.html b/files/ja/web/javascript/guide/the_employee_example/index.html deleted file mode 100644 index 63176fa7e2..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: The Employee Example -slug: Web/JavaScript/Guide/The_Employee_Example ---- -

従業員の例

-

この章の残りは次の図で示す従業員の階層を使用していきます。

-

Image:hier01.gif

-

図 8.1：単純なオブジェクト階層

-

これの例では以下のオブジェクトを使用しています。

-
    -
  • Employee はプロパティ name（デフォルトの値は空文字列）および dept（デフォルトの値は "general"）を持つ。
    • -
  • Manager は Employee をベースとしている。これは reports プロパティ（デフォルトの値は空の配列、その値として Employee オブジェクトの配列を持たせる）を追加する。
    • -
  • WorkerBee も Employee をベースとしている。これは projects プロパティ（デフォルトの値は空の配列、その値として文字列の配列を持たせる）を追加する。
    • -
  • SalesPerson は WorkerBee をベースとしている。これは quota プロパティ（デフォルトの値は 100）を追加する。さらに dept プロパティを "sales" という値で上書きする。これは販売員は全員同じ部署に所属していることを示す。
    • -
  • Engineer は WorkerBee をベースとしている。これは machine プロパティ（デフォルトの値は空文字列）を追加し、さらに dept プロパティを "engineering" という値で上書きする。
    • -
-

残りの例：

- -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}

-
-

 

diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html deleted file mode 100644 index c6d536602b..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/adding_properties/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Adding Properties -slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Adding_Properties ---- -

プロパティの追加

-

JavaScript では実行時にどんなオブジェクトにもプロパティを追加することができます。コンストラクタ関数で与えられるプロパティだけを使う必要はありません。ある 1 つのオブジェクト固有のプロパティを追加するには、次のようにしてオブジェクトに値を代入します。

-
mark.bonus = 3000;
-
-

すると、mark オブジェクトには bonus プロパティができます。しかし、他のどの WorkerBee にもこのプロパティは存在しません。

-

あるコンストラクタ関数に対するプロトタイプとして使用されているオブジェクトに新しいプロパティを追加する場合、プロトタイプからプロパティを継承する全オブジェクトへそのプロパティを追加することになります。例えば、次の文を使用すると specialty プロパティをすべての従業員に対して追加することができます。

-
Employee.prototype.specialty = "none";
-
-

JavaScript がこの文を実行するとすぐに mark オブジェクトも "none" という値を持つ specialty プロパティを持つようになります。次の図ではこのプロパティを Employee プロトタイプに追加し、さらに Engineer プロトタイプに対するそれを上書きしたときの効果を示します。

-

Image:hier04.gif
- 図 8.4：プロパティの追加

-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties", "Core_JavaScript_1.5_Guide:The_Employee_Example:More_Flexible_Constructors") }}

-
-

 

diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html deleted file mode 100644 index e529b8bb52..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Object Properties -slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties ---- -

オブジェクトのプロパティ

-

このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。

- -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}

-
diff --git a/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html deleted file mode 100644 index 798746ead6..0000000000 --- a/files/ja/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Inheriting Properties -slug: >- - Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties ---- -

プロパティの継承

-

次の文を用いて（図 8.3 で示したように）mark オブジェクトを WorkerBee として作成するとします。

-
mark = new WorkerBee;
-
-

JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを this キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に projects プロパティの値をセットします。さらに、内部的な __proto__ プロパティの値として WorkerBee.prototype の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）__proto__ プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 mark にそのオブジェクトをセットします。

-

このプロセスでは mark がプロトタイプチェーンから継承するプロパティとして明示的には mark オブジェクトに値（ローカルの値）を格納しません。プロパティの値を使用するとき、JavaScript はまずその値がそのオブジェクトに存在しているかどうかを確認します。存在している場合はその値が返されます。値がローカルには存在していない場合、JavaScript はプロトタイプチェーンを確認します（__proto__ プロパティを使用）。プロトタイプチェーン内のオブジェクトがそのプロパティの値を持っている場合、その値が返されます。そのようなプロパティが見つからない場合は JavaScript はそのオブジェクトにはそのプロパティがないと報告します。このようにして、mark オブジェクトには次のようなプロパティと値が入ることになります。

-
mark.name = "";
-mark.dept = "general";
-mark.projects = [];
-
-

mark オブジェクトは mark.__proto__ の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは プロパティの継承、再び にて議論します。

-

これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして mark に固有の情報を与えます。

-
mark.name = "Doe, Mark";
-mark.dept = "admin";
-mark.projects = ["navigator"];
-
-
-

{{ PreviousNext("Core JavaScript 1.5 Guide:The Employee Example:Object Properties", "Core JavaScript 1.5 Guide:The Employee Example:Object Properties:Adding Properties") }}

-
diff --git a/files/ja/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/web/javascript/guide/using_the_arguments_object/index.html deleted file mode 100644 index 10c2d9e3ff..0000000000 --- a/files/ja/web/javascript/guide/using_the_arguments_object/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: arguments オブジェクトの使用 -slug: Web/JavaScript/Guide/Using_the_arguments_object ---- -
-

arguments オブジェクトの使用

-

関数の引数は配列のようなオブジェクトで管理されます。関数内では、次のようにして渡された引数を指すことができます。

- 
arguments[i]
-
-

ここで i は引数の順序を表す数を指します。これは 0 から始まります。関数に渡された第 1 引数は arguments{{ mediawiki.external(0) }} となります。引数のトータルの数は arguments.length で示されます。

-

arguments オブジェクトを使用すると、宣言時の仮引数の数よりも多くの引数を使って関数を呼び出すことができます。これはその関数に渡す引数の数が前もってわかっていない場合に役立ちます。arguments.length を使用することで実際にその関数に渡された引数の数を特定することができます。また、arguments オブジェクトを使用することで各引数を扱うことができます。

-

例えば、複数の文字列を連結する関数を考えます。この関数の仮引数は、連結するアイテムを区切るのに用いる文字列のみです。この関数は次のように定義されています。

- 
function myConcat(separator) {
-   var result = ""; // リストを初期化する
-   // 引数について繰り返し
-   for (var i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
-

この関数に引数をいくつも渡すことができます。そして各引数を文字列のリストに連結します。

- 
// "red, orange, blue, " を返す
-myConcat(", ", "red", "orange", "blue");
-
-// "elephant; giraffe; lion; cheetah; " を返す
-myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
-
-// "sage. basil. oregano. pepper. parsley. " を返す
-myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
-
-

さらなる情報については、コア JavaScript リファレンスの Function オブジェクト をご覧ください。

-

JavaScript 1.3 以前のバージョン
- arguments オブジェクトは Function オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。

- functionName.arguments{{ mediawiki.external('i') }}
-

{{ PreviousNext("JavaScript/Guide/Calling_Functions", "JavaScript/Guide/Predefined_Functions") }}

diff --git a/files/ja/web/javascript/guide/variables/index.html b/files/ja/web/javascript/guide/variables/index.html deleted file mode 100644 index cebaecc949..0000000000 --- a/files/ja/web/javascript/guide/variables/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 変数 -slug: Web/JavaScript/Guide/Variables ---- -

{{ 英語版章題("Variables") }}

-

変数

-

アプリケーションで値を識別する名前として変数を使用します。変数の名前はあるルールに従って付けなくてはなりません。変数の名前は識別子とも呼ばれます。

-

JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。

-

JavaScript 1.5 からは å や ü といった ISO 8859-1 や Unicode のアルファベットも識別子に使えます。Unicode エスケープシーケンス のページに列挙されている \uXXXX 形式の Unicode エスケープシーケンスも識別子に使用できます。

-

Number_hits や temp99 や _name が使用できる名前の例です。

-

{{ 英語版章題("Declaring Variables") }}

-

変数の宣言

-

2 つの方法で変数を宣言できます。

-
    -
  • var というキーワードを使う。例えば、var x = 42。この構文は ローカルおよびグローバル 変数どちらの宣言にも使用可能です。
    • -
  • 単に値を代入する。例えば、x = 42。これはいつでも グローバル変数 を宣言できますが、{{ 原語併記("厳格な JavaScript 警告", "strict JavaScript warning") }}が発生します。この方法は使用すべきではありません。
    • -
-

{{ 英語版章題("Evaluating Variables") }}

-

変数の評価

-

var 文を使用し、初期化せずに宣言された変数は undefined の値をとります。

-

未宣言の変数にアクセスしようとすると、ReferenceError 例外が投げられます。

-
var a;
-print("a の値は " + a); // "a の値は undefined" を出力
-print("b の値は " + b); // ReferenceError 例外を投げる
-
-

undefined を使うと変数に値が入っているかどうかを確かめられます。以下のコードでは、変数 input には値が代入されておらず、if 文での評価結果は true です。

-
var input;
-if(input === undefined){
-  doThis();
-} else {
-  doThat();
-}
-
-

Not sure how the following is related to "Variables" section undefined は真偽値コンテキストで使用されると false として振る舞います。例えば以下のコードでは、myArray の要素が未定義であるために関数 myFunction が実行されます。

-
var myArray = new Array();
-if (!myArray[0]) myFunction();
-
-

null 変数を評価すると、数値コンテキストにおいては null 値は 0 として振る舞います。また、真偽値コンテキストでは false として振る舞います。

-
var n = null;
-print(n * 32); // prints 0
-
-

{{ 英語版章題("Variable Scope") }}

-

変数のスコープ

-

変数を関数の外側で宣言すると、その変数はその文書のどのコードからも使用できるようになるため、グローバル（大域）変数と呼ばれます。変数を関数の内部で宣言すると、その変数はその関数の中でしか使用できないため、ローカル（局所）変数と呼ばれます。

-

JavaScript には ブロック文 のスコープがありません。むしろ、そのブロックを内包しているコードに対して局所化されます。例えば以下のコードは condition が false のとき、例外を投げずに 0 が出力されます。

-
if (condition) {
-  var x = 5;
-}
-print(x ? x : 0);
-
-

JavaScript の変数に関する独特なこととして、後に宣言される変数を例外を発生させることなく参照できるというのも挙げられます。

-
print(x === undefined); // "true" を出力
-var x = 3;
-
-

{{ 英語版章題("Global Variables") }}

-

グローバル変数

-

need links to pages discussing scope chains and the global object グローバル変数は実際にはグローバルオブジェクトのプロパティです。ウェブページではグローバルオブジェクトは window です。そのため、window.variable という構文を使うことでグローバル変数をセットしたり、グローバル変数にアクセスしたりすることができます。

-

したがって、あるウィンドウやフレームで宣言したグローバル変数に、そのウィンドウやフレームの名前を指定すれば別のウィンドウやフレームからアクセスできます。例えば、phoneNumber という変数を FRAMESET 文書内で宣言すると、子フレームから parent.phoneNumber としてこの変数を参照することができます。

-

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

-

関連項目

-

JavaScript のシャープ変数

-

{{ PreviousNext("JavaScript/Guide/Values", "JavaScript/Guide/Constants") }}

diff --git a/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html deleted file mode 100644 index 64da075317..0000000000 --- a/files/ja/web/javascript/guide/writing_a_regular_expression_pattern/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: 正規表現パターンの記述 -slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern ---- -

正規表現パターンを書く

- -

正規表現パターンは、/abc/ のような単純な文字、または /ab*c/ や /Chapter (\d+)\.\d*/ のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは 括弧で囲まれた部分文字列のマッチの使用 を参照してください。

- -

単純なパターンの使用

- -

単純なパターンは、直接マッチしている部分を見つけたい文字で構成されます。例えば、/abc/ というパターンは、実際に 'abc' という文字が一緒にその順で存在しているときにだけ、文字列中の文字の組み合わせにマッチします。"Hi, do you know your abc's?" や "The latest airplane designs evolved from slabcraft." といった文字列でのマッチは成功します。どちらの場合でも 'abc' という部分文字列にマッチします。"Grab crab" という文字列では 'abc' という部分文字列が含まれていないためマッチしません。

- -

特殊文字の使用

- -

1 つ以上の b を見つけたり、ホワイトスペースを見つけたりといった直接マッチより高度なマッチの検索では、パターンに特殊文字を使用します。例えば /ab*c/ というパターンでは 1 つの 'a' とその後ろに続く 0 個以上の 'b'（* は直前のアイテムの 0 回以上の出現を意味する）とそのすぐ後ろに続く 'c' からなる文字の組み合わせにマッチします。"cbbabbbbcdebc" という文字列ではこのパターンは 'abbbbc' という部分文字列にマッチします。

- -

以下の表で正規表現で使用できる特殊文字とその意味を詳しく説明します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
文字意味
\次のうちのどちらか。 -
    -
  • 通常は文字どおり扱われる文字に対して、次の文字は特殊であり、文字どおりに解釈すべきではないと指示する。例えば、/b/ は 'b' という文字にマッチする。b の前にバックスラッシュを置き、/\b/ とすると、その文字は単語の区切りにマッチすることを意味する特殊文字になる。
    • -
  • 通常は特殊文字として扱われる文字に対して、次の文字は特殊ではなく、文字どおりに解釈すべきであると指示する。例えば、* は直前のアイテムの 0 回以上の出現にマッチさせることを意味する特殊文字である。つまり、例えば /a*/ は a の 0 文字以上の a へのマッチを意味する。* という文字そのものにマッチさせるには、その直前にバックスラッシュを置く。例えば、/a\*/ は 'a*' にマッチする。
    • -
-
^入力の先頭にマッチする。複数行フラグが true にセットされている場合は、改行文字直後にもマッチする。 例えば、/^A/ は "an A" の 'A' にはマッチしないが、"An A" の最初の 'A' にはマッチする。
$入力の末尾にマッチする。複数行フラグが true にセットされている場合は、改行文字直前にもマッチする。 例えば、/t$/ は "eater" の 't' にはマッチしないが、"eat" の 't' にはマッチする。
*直前の文字の 0 回以上の繰り返しにマッチする。 例えば、/bo*/ は "A ghost booooed" の 'boooo' や "A bird warbled" の 'b' にはマッチするが、"A goat grunted" ではマッチしない。
+直前の文字の 1 回以上の繰り返しにマッチする。{1,} と同等。 例えば、/a+/ は "candy" の 'a' や、"caaaaaaandy" のすべての a にマッチする。
?直前の文字の 0 回か 1 回の繰り返しにマッチする。 -

例えば、/e?le?/ は "angel" の 'el' や "angle" の 'le' にマッチする。

- -

*、+、?、{} といった量指定子の直後に使用した場合、その量指定子をスキップ優先（最小回数にマッチ）にする。これはデフォルトとは逆であり、デフォルトは繰り返し優先（最大回数にマッチ）。例えば、/\d+/ は非グローバルで "123abc" の "123" にマッチするが、/\d+?/ の場合、"1" だけにマッチする。

- 先読み表現内でも使用できるが、これはこの表の x(?=y) および x(?!y) にて説明。
.小数点は改行文字以外のどの 1 文字にもマッチする。 例えば、/.n/ は "nay, an apple is on the tree" の 'an' や 'on' にはマッチするが、'nay' にはマッチしない。
(x)'x' にマッチし、マッチしたものを記憶しておく。これはキャプチャする括弧と呼ぶ。 例えば、/(foo)/ は "foo bar" の 'foo' にマッチし、これを記憶する。マッチした部分文字列は結果として生成される配列の要素 1, ..., b から参照できる。
(?:x)'x' にマッチするが、マッチしたものは記憶しない。これはキャプチャしない括弧と呼ぶ。マッチした部分文字列は先程のような配列の要素 1, ..., n から参照することはできない。
x(?=y)'x' に 'y' が続く場合のみ 'x' にマッチする。例えば、/Jack(?=Sprat)/ は 'Jack' の後ろに 'Sprat' が続く場合のみ 'Jack' にマッチする。/Jack(?=Sprat|Frost)/ は 'Jack' の後ろに 'Sprat' または 'Frost' が続く場合のみ 'Jack' にマッチする。しかしながら、'Sprat' も 'Frost' もマッチの結果には現れない。
x(?!y)'x' に 'y' が続かない場合のみ 'x' にマッチする。例えば、/\d+(?!\.)/ はある数に小数点が続かない場合のみその数にマッチする。正規表現 /\d+(?!\.)/.exec("3.141") は 141 にはマッチするが 3.141 にはマッチしない。
x|y'x' または 'y' にマッチする。 例えば、/green|red/ は "green apple" の "green' や "red apple" の 'red' にマッチする。
{n}n には正の整数が入る。直前の文字がちょうど n 回出現するものにマッチする。 例えば、/a{2}/ は "candy" の 'a' にはマッチしないが、"caandy" の すべての a にマッチする。また、"caaandy" の最初の 2 つの a にマッチする。
{n,}n には正の整数が入る。直前の文字が少なくとも n 回出現するものにマッチする。 例えば、/a{2,}/ は "candy" の 'a' にはマッチしないが、"caandy" や "caaaaaaandy" の すべての a にマッチする。
{n,m}n および m には正の整数が入る。直前の文字が少なくとも n 回、多くとも m 回出現するものにマッチする。 例えば、/a{1,3}/ は "cndy" ではマッチせず、"candy" の 'a'、"caandy" の最初の 2 つの a、"caaaaaaandy" の最初の 3 つの a にマッチする。"caaaaaaandy" では元の文字列に a が 4 つ以上あるが、マッチするのは "aaa" であることに注意。
[xyz]文字の集合。囲まれた文字のどれにでもマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[abcd]/ は /[a-d]/ と同じ。これは "brisket" の 'b' や "city" の 'c' にマッチする。
[^xyz]文字の集合の否定または補集合。角括弧で囲まれていないものにマッチする。ハイフンを用いて文字の範囲を指定することも可能。 例えば、/[^abc]/ は /[^a-c]/ と同じ。これは "brisket" の 'r' や "chop" の 'h' にマッチする。
[\b]後退にマッチする。（\b と混同してはならない。）
\bスペースや改行文字のような単語の区切りにマッチする。（[\b] と混同してはならない。） 例えば、/\bn\w/ は "noonday" の 'no' にマッチする。また、/\wy\b/ は "possibly yesterday" の 'ly' にマッチする。
\B単語の区切り以外の文字にマッチする。 例えば、/\w\Bn/ は "noonday" の 'on' にマッチする。また、/y\B\w/ は "possibly yesterday" の 'ye' にマッチする。
\cXX には制御文字が入る。文字列中の制御文字にマッチする。 例えば、/\cM/ は文字列中の control-M にマッチする。
\d数字にマッチする。[0-9] と同等。 例えば、/\d/ や /[0-9]/ は "B2 is the suite number" の '2' にマッチする。
\D数字以外の文字にマッチする。[^0-9] と同等。 例えば、/\D/ や /[^0-9]/ は "B2 is the suite number" の 'B' にマッチする。
\f改ページにマッチする。
\n改行にマッチする。
\r復帰にマッチする。
\sスペース、タブ、改ページ、改行を含む、1 つのホワイトスペース文字にマッチする。 [ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\s\w*/ は "foo bar" の ' bar' にマッチする。
\Sホワイトスペース以外の 1 文字にマッチする。[^ \f\n\r\t\v\u00A0\u1680\u180E\u2000-\u200A\u2028\u2029\u202F\u205F\u3000\uFEFF] と同等。 例えば、/\S\w*/ は "foo bar" の 'foo' にマッチする。
\tタブにマッチする。
\v垂直タブにマッチする。
\wアンダースコアを含むどの英数字にもマッチする。[A-Za-z0-9_] と同等。 例えば、/\w/ は "apple" の 'a' や "$5.28" の '5' や "3D" の '3' にマッチする。
\W前述以外の文字にマッチする。[^A-Za-z0-9_] と同等。 例えば、/\W/ や /[^$A-Za-z0-9_]/ は "50%" の '%' にマッチする。
\nn には正の整数が入る。その正規表現の n 番目の括弧の部分にマッチする最後の部分文字列への後方参照（左括弧をカウントする）。 例えば、/apple(,)\sorange\1/ は "apple, orange, cherry, peach" の 'apple, orange,' にマッチする。
\0NUL 文字にマッチする。この後ろに他の数字を続けてはならない。
\xhhhh（2 桁の 16 進数）というコードを持つ文字にマッチする。
\uhhhhhhhh（4 桁の 16 進数）というコードを持つ文字にマッチする。
- -

表 4.1正規表現における特殊文字

- -

括弧の使用

- -

正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては 括弧で囲まれた部分文字列のマッチの使用 で説明しています。

- -

例えば、/Chapter (\d+)\.\d*/ というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。

- -

このパターンは "Open Chapter 4.3, paragraph 6" という文字列で見つかり、'4' が記憶されます。このパターンは "Chapter 3 and 4" では見つかりません。この文字列は '3' の後ろにピリオドがないためです。

- -

マッチした部分を記憶させることなく部分文字列にマッチさせたい場合は、その括弧においてパターンの前に ?: を付けてください。例えば、(?:\d+) は 1 文字以上の数字にマッチしますが、マッチした文字は記憶されません。

- -

{{ PreviousNext("JavaScript/Guide/Creating_a_Regular_Expression", "JavaScript/Guide/Working_with_Regular_Expressions") }}

diff --git a/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index cbe9e10a0a..0000000000 --- a/files/ja/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,381 +0,0 @@ ---- -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/web/javascript/introduction_to_using_xpath_in_javascript/index.html b/files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index 8d63ce70da..0000000000 --- a/files/ja/web/javascript/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -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つのパラメータを取ります。

- -
    -
  • xpathExpression: 評価される XPath 式を含む文字列
    • -
  • contextNode: xpathExpression が評価されるべきドキュメント内のノード。Document ノードが最も一般的に使用されます
    • -
  • namespaceResolver: xpathExpression 内に含まれる名前空間接頭辞を渡す関数で、その接頭辞に関連付けられた名前空間 URI を表す文字列を返します。これにより、XPath 式で使用されている接頭辞とドキュメント内で使用されている可能性のある異なる接頭辞との変換が可能になります。この関数は、以下のいずれかの方法で利用できます -
      -
    • XPathEvaluator オブジェクトの createNSResolver メソッドを使用して作成します。事実上、これを使用する必要があります
      • -
    • nullです。これは、HTML ドキュメントや名前空間プレフィックスが使用されていない場合に使用することができます。xpathExpressionに 名前空間プレフィックスが含まれている場合、NAMESPACE_ERR というコードで DOMException がスローされることに注意してください
      • -
    • カスタムのユーザ定義関数。詳細は、付録の ユーザー定義名前空間リゾルバの使用法 を参照してください
      • -
    -
    • -
  • resultType: 評価の結果として返される結果の型を指定する定数です。最も一般的に渡される定数は XPathResult.ANY_TYPE で、これは XPath 式の結果を最も自然な型として返します。付録には、利用可能な定数の完全なリストを含むセクションがあります。これらの定数は以下の「戻り値の型の指定」のセクションで説明されています
    • -
  • result: 既存の XPathResult オブジェクトを指定すると、そのオブジェクトが再利用されて結果が返されます。null を指定すると、新しい XPathResult オブジェクトが作成されます
    • -
- -

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 に希望する結果タイプがどちらかに指定されている場合。

- -
    -
  • NUMBER_TYPE - a double
    • -
  • STRING_TYPE - 文字列
    • -
  • BOOLEAN_TYPE - 真偽値
    • -
- -

XPathResult オブジェクトの以下のプロパティにそれぞれアクセスして、式の戻り値を取得します。

- -
    -
  • numberValue
    • -
  • stringValue
    • -
  • booleanValue
    • -
- -
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:

- -
    -
  • UNORDERED_NODE_ITERATOR_TYPE
    • -
  • ORDERED_NODE_ITERATOR_TYPE
    • -
- -

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:

- -
    -
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • -
  • ORDERED_NODE_SNAPSHOT_TYPE
    • -
- -

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:

- -
    -
  • ANY_UNORDERED_NODE_TYPE
    • -
  • FIRST_ORDERED_NODE_TYPE
    • -
- -

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/web/javascript/reference/global_objects/array/index/index.html b/files/ja/web/javascript/reference/global_objects/array/index/index.html deleted file mode 100644 index 1d2e7a4797..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/index/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: index -slug: Web/JavaScript/Reference/Global_Objects/Array/index ---- -

概要

-

正規表現マッチにより作成された配列において、文字列中での一致部分の、0 から始まるインデックス。

- - - - - - - - - - - - - - - -
Array のプロパティ
静的
実装されたバージョンJavaScript 1.2
diff --git a/files/ja/web/javascript/reference/global_objects/array/input/index.html b/files/ja/web/javascript/reference/global_objects/array/input/index.html deleted file mode 100644 index 166ed28656..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/input/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: input -slug: Web/JavaScript/Reference/Global_Objects/Array/input ---- -

-

{{ 英語版章題("Summary") }} -

-

概要

-

正規表現マッチにより作成された配列において、正規表現がマッチを行った元の文字列を反映します。 -

- - - - - - - - - - - -
Array のプロパティ
静的
実装されたバージョン:JavaScript 1.2, NES 3.0
-
-
-{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Global_Objects/Array/input", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/input", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Obiekty/Array/input" } ) }} diff --git a/files/ja/web/javascript/reference/global_objects/array/prototype/index.html b/files/ja/web/javascript/reference/global_objects/array/prototype/index.html deleted file mode 100644 index dc20c31a41..0000000000 --- a/files/ja/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Junk - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -
{{JSRef}}
- -

解説

- -

{{jsxref("Array")}} インスタンスは、 Array.prototype を継承しています。すべてのコンストラクターと同様に、コンストラクターの prototype オブジェクトを変更して、すべての {{jsxref("Array")}} インスタンスを変更することができます。例えば、新しいメソッドやプロパティを追加して、すべての Array オブジェクトを拡張することができます。例えば、これは{{Glossary("Polyfill", "ポリフィル")}}に使用されます。

- -

ただし、配列オブジェクトに標準外メソッドを追加すると、後で独自のコードに問題が発生したり、 JavaScript への機能の追加の際に問題が発生することがあります。

- -

豆知識: Array.prototype はそれ自体が {{jsxref("Array")}} です。

- -
Array.isArray(Array.prototype); // true
-
- -

{{js_property_attributes(0, 0, 0)}}

- -

プロパティ

- -
-
Array.prototype.constructor
-
オブジェクトの prototype を生成する関数を指定します。
-
{{jsxref("Array.prototype.length")}}
-
配列内の要素数を反映します。
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
with バインディングのスコープから除外されるプロパティ名を保持するシンボル。
-
- -

メソッド

- -

Mutator メソッド

- -

これらのメソッドは、配列を書き換えます。

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
配列内で配列内の連続した要素をコピーします。
-
{{jsxref("Array.prototype.fill()")}}
-
配列内の指定した開始位置から終了位置までの要素を固定値で埋めます。
-
{{jsxref("Array.prototype.pop()")}}
-
配列から最後の要素を取り除き、戻り値として返します。
-
{{jsxref("Array.prototype.push()")}}
-
配列の最後に 1 個以上の要素を追加し、新しい配列の長さを返します。
-
{{jsxref("Array.prototype.reverse()")}}
-
配列の要素の順番を逆転させます (最初の要素は最後に、最後の要素は最初になります)。
-
{{jsxref("Array.prototype.shift()")}}
-
配列から最初の要素を取り除き、その要素を返します。
-
{{jsxref("Array.prototype.sort()")}}
-
配列内で要素を整列し、配列を返します。
-
{{jsxref("Array.prototype.splice()")}}
-
配列に対して複数の要素を追加したり取り除いたりします。
-
{{jsxref("Array.prototype.unshift()")}}
-
配列の最初に 1 個以上の要素を追加し、配列の変更後の長さを返します。
-
- -

アクセサーメソッド

- -

これらのメソッドは呼び出し対象の配列を書き換えず、配列を何らかの形で表したものを返します。

- -
-
{{jsxref("Array.prototype.concat()")}}
-
この配列に他の配列や値を結合して新しい配列を返します。
-
{{jsxref("Array.prototype.includes()")}}
-
この配列が特定の要素を含むかどうか判定し、その結果を true または false で返します。
-
{{jsxref("Array.prototype.indexOf()")}}
-
指定された値と等しい値を持つ最初の (添字の一番小さい) 要素の添字を返します。見つからない場合、-1 を返します。
-
{{jsxref("Array.prototype.join()")}}
-
配列のすべての要素を結合した文字列を返します。
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、-1 を返します。
-
{{jsxref("Array.prototype.slice()")}}
-
配列の一部を取り出して新しい配列として返します。
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
指定された配列を表す配列リテラルを返します。この値を使って新しい配列を作れます。{{jsxref("Object.prototype.toSource()")}} メソッドを上書きしています。
-
{{jsxref("Array.prototype.toString()")}}
-
配列とその要素を表す文字列を返します。{{jsxref("Object.prototype.toString()")}} メソッドを上書きしています。
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
配列とその要素を表すロケールに従った文字列を返します。{{jsxref("Object.prototype.toLocaleString()")}} メソッドを上書きしています。
-
- -

反復メソッド

- -

いくつかのメソッドは、配列を処理する際にコールバックされる関数を引数に取ります。これらのメソッドが呼ばれる時、配列の length 値を一時記憶するため、コールバック中にこの長さを超えて追加された要素にはアクセスしません。配列に対するその他の変更 (要素の値の書き換えや削除) は、変更された要素にメソッドが後でアクセスした場合の操作結果に影響を及ぼす可能性があります。そのような場合におけるこれらのメソッドの振る舞いは正確に定義されていますが、コードの読者を混乱させないよう、その振る舞いに依存すべきではありません。配列を変化させなければならない場合は、代わりに新しい配列にコピーしてください。

- -
-
{{jsxref("Array.prototype.entries()")}}
-
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスに対する key/value ペアを保持しています。
-
{{jsxref("Array.prototype.every()")}}
-
指定したテスト関数を配列中のすべての要素が満たした場合に true を返します。
-
{{jsxref("Array.prototype.filter()")}}
-
指定したフィルタリング関数が true を返す、配列中の要素を格納した新しい配列を生成します。
-
{{jsxref("Array.prototype.find()")}}
-
指定したテスト関数を満たす、配列中の要素の値を返します。1 個も見つからない場合は undefined を返します。
-
{{jsxref("Array.prototype.findIndex()")}}
-
指定したテスト関数を満たす、配列中の要素のインデックスを返します。1 個も見つからない場合は -1 を返します。
-
{{jsxref("Array.prototype.forEach()")}}
-
配列中のそれぞれの要素について関数を呼び出します。
-
{{jsxref("Array.prototype.keys()")}}
-
新しい Array Iterator を返します。このオブジェクトは配列中の各インデックスのキーを保持します。
-
{{jsxref("Array.prototype.map()")}}
-
配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
-
{{jsxref("Array.prototype.reduce()")}}
-
アキュムレータと配列内のすべての要素に対して (左から右の順で) 関数を適用し、単一の値に還元します。
-
{{jsxref("Array.prototype.reduceRight()")}}
-
アキュムレータと配列内のすべての要素に対して (右から左の順で) 関数を適用し、単一の値に還元します。
-
{{jsxref("Array.prototype.some()")}}
-
指定したテスト関数を配列中の少なくとも 1 個の要素が満たした場合に true を返します。
-
{{jsxref("Array.prototype.values()")}}
-
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-
新しい Array Iterator オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
-
- -

ジェネリックメソッド (非標準)

- -

JavaScript の Array オブジェクト上の多くのメソッドは、配列型 (array-like) のあらゆるオブジェクトに対し広く適用されるよう設計されています。すなわち、どんなオブジェクトでも length プロパティを持ち、数値プロパティ名を使う (array[5] のような) アクセスが有効なら、それらを適用できます。{{jsxref("Array.join", "join")}} のような一部のメソッドは、呼び出し対象オブジェクトの length や数値プロパティを読み取るだけです。 一方、{{jsxref("Array.reverse", "reverse")}} のようなメソッドは、対象オブジェクトの数値プロパティや length が変更可能であることを要求するため、length プロパティや設定される合成数値プロパティの変更を許さない {{jsxref("String")}} のようなオブジェクトに対して呼び出すことができません。

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('ES1')}}{{Spec2('ES1')}}初回定義
{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES6')}}copyWithin(), fill(), entries(), keys(), values(), find(), findIndex() メソッドを追加
{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ES7')}}includes() メソッドを追加
{{SpecName('ESDraft', '#sec-array.prototype', 'Array.prototype')}}{{Spec2('ESDraft')}}
- -

ブラウザーの対応

- - - -

{{Compat("javascript.builtins.Array.prototype")}}

- -

関連情報

- -
    -
  • {{jsxref("Array")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html b/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html deleted file mode 100644 index 46bf817819..0000000000 --- a/files/ja/web/javascript/reference/global_objects/asyncfunction/prototype/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: AsyncFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype -tags: - - Experimental - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype ---- -
{{JSRef}}
- -

AsyncFunction.prototype プロパティは、{{jsxref("AsyncFunction")}} プロトタイプオブジェクトを表します。

- -

説明

- -

{{jsxref("AsyncFunction")}} オブジェクトは、AsyncFunction.prototype を継承します。AsyncFunction.prototype は修正できません。

- -

プロパティ

- -
-
AsyncFunction.constructor
-
初期値は {{jsxref("AsyncFunction")}}。
-
AsyncFunction.prototype[@@toStringTag]
-
"AsyncFunction" を返す。
-
- -

仕様

- - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('Async Function', '#async-function-definitions', 'async function')}}{{Spec2('Async Function')}}提案
- -

ブラウザー実装状況

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
機能ChromeFirefox (Gecko)Internet Explorer EdgeOperaSafari (WebKit)
基本サポート{{CompatUnknown}}{{CompatGeckoDesktop("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
機能AndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

関連項目

- -
    -
  • {{jsxref("AsyncFunction")}}
    • -
  • {{jsxref("Function")}}
    • -
diff --git a/files/ja/web/javascript/reference/global_objects/atomics/notify/index.html b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.html new file mode 100644 index 0000000000..be17a5f891 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/atomics/notify/index.html @@ -0,0 +1,142 @@ +--- +title: Atomics.wake() +slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake +translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify +--- +
{{JSRef}} {{SeeCompatTable}}
+ +

静的メソッドである Atomics.wake() は待ち行列中のいくつかのエージェントを起こします。

+ +
+

付記：この操作は共有された {{jsxref("Int32Array")}} に対してのみ許可されています。

+
+ +

構文

+ +
Atomics.wake(typedArray, index, count)
+
+ +

引数

+ +
+
typedArray
+
共有された {{jsxref("Int32Array")}}。
+
index
+
起こす対象となる typedArray 中の位置。
+
count
+
起こすエージェントの数。既定値は {{jsxref("Infinity", "+Infinity")}} である。
+
+ +

返り値

+ +

起きたエージェントの数。

+ +

例外

+ +
    +
  • typedArray が共有されている {{jsxref("Int32Array")}} でない場合、{{jsxref("TypeError")}} が送出される。
    • +
  • index が typedArray の範囲を超えている場合 {{jsxref("RangeError")}} が送出される。
    • +
+ +

例

+ +

共有された Int32Array を用意します：

+ +
var sab = new SharedArrayBuffer(1024);
+var int32 = new Int32Array(sab);
+
+ +

読み手のスレッドは、0 番目の値が 0 であることを期待してスリープします。それが満たされている間、この場合は 0 番目の値が 0 である間は処理が進みません。しかし書き手のスレッドが新しい値 (この場合は 123)をストアした場合、読み手のスレッドは読み手のスレッドによって起こされ、新しい値 (123)を取得します。

+ +
Atomics.wait(int32, 0, 0);
+console.log(int32[0]); // 123
+ +

書き手のスレッドは新しい値をストアし、待っているスレッドを起こします：

+ +
console.log(int32[0]); // 0;
+Atomics.store(int32, 0, 123);
+Atomics.wake(int32, 0, 1);
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Shared Memory', '#Atomics.wake', 'Atomics.wake')}}{{Spec2('Shared Memory')}}初期定義
+ +

ブラウザ互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [2]{{CompatNo}}{{CompatGeckoDesktop("46")}} [1] [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("46")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] 設定で無効になっています。about:config で javascript.options.shared_memory を true に設定することで利用できます。

+ +

[2] 現在実装中で、利用には次のオプションをつけて起動する必要があります：--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer

+ +

[3] バージョン 46 と 47 では Atomics.futexWake() という名前で利用できます。また引数 count の既定値は 0 となっています。列の代わりに Atomics.OK、Atomics.TIMEDOUT、Atomics.NOTEQUAL を返します

+ +

関連情報

+ +
    +
  • {{jsxref("Atomics")}}
    • +
  • {{jsxref("Atomics.wait()")}}
    • +
diff --git a/files/ja/web/javascript/reference/global_objects/atomics/wake/index.html b/files/ja/web/javascript/reference/global_objects/atomics/wake/index.html deleted file mode 100644 index be17a5f891..0000000000 --- a/files/ja/web/javascript/reference/global_objects/atomics/wake/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: Atomics.wake() -slug: Web/JavaScript/Reference/Global_Objects/Atomics/wake -translation_of: Web/JavaScript/Reference/Global_Objects/Atomics/notify ---- -
{{JSRef}} {{SeeCompatTable}}
- -

静的メソッドである Atomics.wake() は待ち行列中のいくつかのエージェントを起こします。

- -
-

付記：この操作は共有された {{jsxref("Int32Array")}} に対してのみ許可されています。

-
- -

構文

- -
Atomics.wake(typedArray, index, count)
-
- -

引数

- -
-
typedArray
-
共有された {{jsxref("Int32Array")}}。
-
index
-
起こす対象となる typedArray 中の位置。
-
count
-
起こすエージェントの数。既定値は {{jsxref("Infinity", "+Infinity")}} である。
-
- -

返り値

- -

起きたエージェントの数。

- -

例外

- -
    -
  • typedArray が共有されている {{jsxref("Int32Array")}} でない場合、{{jsxref("TypeError")}} が送出される。
    • -
  • index が typedArray の範囲を超えている場合 {{jsxref("RangeError")}} が送出される。
    • -
- -

例

- -

共有された Int32Array を用意します：

- -
var sab = new SharedArrayBuffer(1024);
-var int32 = new Int32Array(sab);
-
- -

読み手のスレッドは、0 番目の値が 0 であることを期待してスリープします。それが満たされている間、この場合は 0 番目の値が 0 である間は処理が進みません。しかし書き手のスレッドが新しい値 (この場合は 123)をストアした場合、読み手のスレッドは読み手のスレッドによって起こされ、新しい値 (123)を取得します。

- -
Atomics.wait(int32, 0, 0);
-console.log(int32[0]); // 123
- -

書き手のスレッドは新しい値をストアし、待っているスレッドを起こします：

- -
console.log(int32[0]); // 0;
-Atomics.store(int32, 0, 123);
-Atomics.wake(int32, 0, 1);
- -

仕様

- - - - - - - - - - - - - - -
仕様状態コメント
{{SpecName('Shared Memory', '#Atomics.wake', 'Atomics.wake')}}{{Spec2('Shared Memory')}}初期定義
- -

ブラウザ互換性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}} [2]{{CompatNo}}{{CompatGeckoDesktop("46")}} [1] [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("46")}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] 設定で無効になっています。about:config で javascript.options.shared_memory を true に設定することで利用できます。

- -

[2] 現在実装中で、利用には次のオプションをつけて起動する必要があります：--js-flags=--harmony-sharedarraybuffer --enable-blink-feature=SharedArrayBuffer

- -

[3] バージョン 46 と 47 では Atomics.futexWake() という名前で利用できます。また引数 count の既定値は 0 となっています。列の代わりに Atomics.OK、Atomics.TIMEDOUT、Atomics.NOTEQUAL を返します

- -

関連情報

- -
    -
  • {{jsxref("Atomics")}}
    • -
  • {{jsxref("Atomics.wait()")}}
    • -
diff --git a/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html b/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html deleted file mode 100644 index c25d3dd476..0000000000 --- a/files/ja/web/javascript/reference/global_objects/finalizationregistry/cleanupsome/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: FinalizationRegistry.prototype.cleanupSome() -slug: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome -tags: - - FinalizationRegistry - - JavaScript - - Method - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/FinalizationRegistry/cleanupSome ---- -
{{JSRef}}
- -

cleanupSome() メソッドは、 {{jsxref("FinalizationRegistry")}} 内のオブジェクトのうち、まだコールバックが呼ばれていないが回収されているオブジェクトの数が実装で選択された場合に、クリーンアップコールバックを起動します。このメソッドはオプションです。

- -

構文

- -
registry.cleanupSome([callback]);
-
- -

引数

- -
-
callback {{optional_inline}}
-
この cleanupSome への呼び出しによって起動されるコールバックだけに使用するコールバックを指定します。指定した場合、このコールバックは FinalizationRegistry で作成されたものの代わりに使用されます。
-
- -

返値

- -

undefined です。

- -

注

- -

通常、この関数を呼び出すことはありません。コールバックを適切に行うためには、 JavaScript エンジンのガベージコレクターに任せてください。この関数は主に、イベントループを発生させない、通常の JavaScript コードよりも WebAssembly で出てくる可能性の高い、長期に実行されるコードに対応するために存在します。また、コールバックが呼び出されない場合があることにも注意してください (例えば、ターゲットが回収されたレジストリ項目が存在しない場合)。

- -

レジストリからクリーンアップされる (クリーンアップコールバックを呼び出す) 回収オブジェクトの項目数は、実装で定義されています。実装によっては、対象となる項目を一つだけ削除したり、対象となるすべての項目を削除したり、あるいはその間のどこかで削除したりすることもあります。

- -

例

- -

cleanupSome の使用

- -
registry.cleanupSome?.(heldValue => {
-  // ...
-});
-
- -

このメソッドはオプションであり、実装によってはこのメソッドを持たない場合があります。詳細は HTML issue #5446 を参照してください。このメソッドはオプションなので、それを呼び出す前にそのメソッドが存在することを確認する必要があります。そのための一つの方法は、上の例のようにオプション連結 (?.) を使用することです。

- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('WeakRefs', '#sec-finalization-registry.prototype.cleanupSome', 'FinalizationRegistry.prototype.cleanupSome')}}
- -

ブラウザーの互換性

- - - -

{{Compat("javascript.builtins.FinalizationRegistry.cleanupSome")}}

- -

関連情報

- -
    -
  • {{jsxref("FinalizationRegistry")}}
    • -
diff --git a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 5705852c36..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -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")}}

-
- -

関連情報

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html deleted file mode 100644 index fedccef945..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/instance/prototype/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -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/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html deleted file mode 100644 index 6d837f2f73..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/prototype/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -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/web/javascript/reference/global_objects/webassembly/table/prototype/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html deleted file mode 100644 index 84709eb736..0000000000 --- a/files/ja/web/javascript/reference/global_objects/webassembly/table/prototype/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -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/web/javascript/reference/operators/comparison_operators/index.html b/files/ja/web/javascript/reference/operators/comparison_operators/index.html deleted file mode 100644 index 5010c8eb89..0000000000 --- a/files/ja/web/javascript/reference/operators/comparison_operators/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -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 つの文字列が厳密に等しくなるのは、字の順序が等しく、長さが等しく、対応する位置の文字が等しいときです。
    • -
  • 2 つの数字が厳密に等しくなるのは、数値的に等しいとき (数字の値が等しいとき) です。NaN は、どんなものとも (Nan とさえも) 等しくなりません。プラスゼロとマイナスゼロは互いと等しくなります。
    • -
  • 2 つの論理オペランドが厳密に等しくなるのは、どちらも true か、どちらも false のときです。
    • -
  • 2 つの異なるオブジェクトは、厳密な比較でも抽象的な比較でも等しくなりません。
    • -
  • オブジェクト比較が等しくなるのは、オペランドが同じオブジェクトを参照しているときだけです。
    • -
  • Null と Undefined 型は、自分自身と厳密に等しく、また互いに抽象的に等しくなります。
    • -
- -

等価演算子

- -

等価 (==)

- -

等価演算子は、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")}} 型のオペランドを変換します。

- -
    -
  • 数値と文字列を比較するとき、文字列は数値に変換されます。 JavaScript は文字列の数値リテラルを Number 型の値に変換しようとします。まず、文字列の数値リテラルから数学的な値を引き出します。次に、その値を最も近い Number 型に丸めます。
    • -
  • もしオペランドの片方が Boolean ならば、その Boolean オペランドが true の場合 1 に、false の場合は +0 に変換されます。
    • -
  • オブジェクトを数値または文字列と比較すると、 JavaScript はそのオブジェクトの既定値を返そうとします。演算子は、オブジェクトの valueOf や toString といったメソッドを用いて、プリミティブな値、 String か Number の値に変換しようとします。変換に失敗したら、ランタイムエラーが発生します。
    • -
  • オブジェクトがプリミティブ値に変換されるのは、比較対象がプリミティブ値であるときだけです。両方のオペランドがオブジェクトなら、オブジェクトとして比較され、両方が同じオブジェクトを参照するときだけ真となります。
    • -
- -
メモ: 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/web/javascript/reference/operators/logical_operators/index.html b/files/ja/web/javascript/reference/operators/logical_operators/index.html deleted file mode 100644 index 8b43c3de26..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_operators/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -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がどうであるかについてはチェックしません。:

- -
    -
  • false && (anything) をショートサーキット評価すると、false になります。
    • -
  • true || (anything) をショートサーキット評価すると、true になります。
    • -
- -

　上記の式の 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/web/javascript/reference/operators/special/index.html b/files/ja/web/javascript/reference/operators/special/index.html deleted file mode 100644 index cb220a008d..0000000000 --- a/files/ja/web/javascript/reference/operators/special/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Special -slug: Web/JavaScript/Reference/Operators/Special ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/web/javascript/reference/operators/special_operators/index.html b/files/ja/web/javascript/reference/operators/special_operators/index.html deleted file mode 100644 index febf3ac3d6..0000000000 --- a/files/ja/web/javascript/reference/operators/special_operators/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Special Operators -slug: Web/JavaScript/Reference/Operators/Special_Operators ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/ja/web/javascript/reference/reserved_words/index.html b/files/ja/web/javascript/reference/reserved_words/index.html deleted file mode 100644 index fabc275890..0000000000 --- a/files/ja/web/javascript/reference/reserved_words/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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/web/javascript/reference/statements/yield/index.html b/files/ja/web/javascript/reference/statements/yield/index.html deleted file mode 100644 index 69be44e8d9..0000000000 --- a/files/ja/web/javascript/reference/statements/yield/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -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/web/manifest/serviceworker/index.html b/files/ja/web/manifest/serviceworker/index.html deleted file mode 100644 index 7215a877d7..0000000000 --- a/files/ja/web/manifest/serviceworker/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: serviceworker -slug: Web/Manifest/serviceworker -tags: - - Manifest - - ServiceWorker - - Web - - マニフェスト -translation_of: Web/Manifest/serviceworker ---- -
{{QuickLinksWithSubpages("/ja/docs/Web/Manifest")}}
- -
{{obsolete_header}}
- - - - - - - - - - - - -
型Object
必須いいえ
- -

serviceworker メンバーは開発者が PWA を制御するためにインストールするサービスワーカーを記述します。

- -

例

- -
"serviceworker": {
-  "src": "./serviceworker.js",
-  "scope": "/app",
-  "type": "",
-  "update_via_cache": "none"
-}
-
- -

値

- -

サービスワーカーには以下の値が含まれます (src のみが必須です)。

- - - - - - - - - - - - - - - - - - - - - - - - - - -
メンバー説明
srcサービスワーカーのスクリプトのダウンロード元となる URL。これだけが serviceworker メンバーで必須です。
scopeサービスワーカーの登録スコープを定義する URL を表す文字列で、サービスワーカーが制御できる URL の範囲を表します。これは通常、アプリケーションのベース URL からの相対 URL です。既定では、サービスワーカー登録のスコープ値は、サービスワーカーのスクリプトが置かれているディレクトリに設定されています。
type?
update_via_cache -

ユーザーエージェントがサービスワーカーを読み込むときにキャッシュを回避するかどうかです。

-
- -

ブラウザーの互換性

- - - -

{{Compat("html.manifest.serviceworker")}}

diff --git a/files/ja/web/opensearch/index.html b/files/ja/web/opensearch/index.html new file mode 100644 index 0000000000..91cf05bed8 --- /dev/null +++ b/files/ja/web/opensearch/index.html @@ -0,0 +1,145 @@ +--- +title: Creating OpenSearch plugins for Firefox +slug: Creating_OpenSearch_plugins_for_Firefox +tags: + - Add-ons + - Search plugins +translation_of: Web/OpenSearch +--- +

OpenSearch

+

Firefox 2 は検索プラグインとして OpenSearch 記述フォーマットをサポートしています。OpenSearch 記述シンタックスを使ったプラグインは IE 7 と Firefox で互換性があります。このため、ウェブでの利用で推奨されたフォーマットです。

+

Firefox は{{ 訳語("検索サジェスト", "search suggestions") }}と SearchForm 要素のような OpenSearch 記述シンタックスに含まれていない追加の検索機能もサポートします。この記事では Firefox 特有の機能をサポートした OpenSearch 互換の検索プラグインの作成にフォーカスをあてていきます。

+

OpenSearch 記述ファイルは検索プラグインの自動検出に書かれているように通知でき、Web ページから検索エンジンを追加するに書かれているようにプログラム的にインストールできます。

+

OpenSearch 記述ファイル

+

検索エンジンを記述した XML ファイルはとてもシンプルで、以下の基本的なテンプレートに従います。あなたが書いている検索エンジンに応じて、斜体になっている箇所をカスタマイズする必要があります。

+
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+<ShortName>engineName</ShortName>
+<Description>engineDescription</Description>
+<InputEncoding>inputEncoding</InputEncoding>
+<Image width="16" height="16">data:image/x-icon;base64,imageData</Image>
+<Url type="text/html" method="method" template="searchURL">
+  <Param name="paramName1" value="paramValue1"/>
+  ...
+  <Param name="paramNameN" value="paramValueN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggestionURL"/>
+<moz:SearchForm>searchFormURL</moz:SearchForm>
+</OpenSearchDescription>
+
+
+
+ ShortName
+
+ 検索エンジンの短い名前。
+
+
+
+ Description
+
+ 検索エンジンの簡単な説明。
+
+
+
+ InputEncoding
+
+ 検索エンジンがデータの入力に使っているエンコーディング。
+
+
+
+ Image
+
+ 検索エンジンを表す Base-64 でエンコードされた 16x16 のアイコン。ここに置くためのデータを作成するのに使える便利なツールの一つはここで見付かります: The data: URI kitchen。
+
+
+
+ Url
+
+ 検索に使う 1 つまたは複数の URL を記述します。method 属性は結果を得るために GET と POST リクエストのどちらを使うか指定します。template 属性は検索クエリのベースとなる URL を指定します。
+
+
+ 注意: Internet Explorer 7 は POST リクエストをサポートしていません。
+
+
+
+
+ Firefox がサポートしている URL タイプは 2 つです:
+
+
    +
  • type="text/html" は実際の検索結果そのものの URL を設定するために使われます。
    • +
  • type="application/x-suggestions+json" は検索サジェストを得るために使われる URL を設定するために使われます。
    • +
+
+
+ どちらの URL のタイプでも、ユーザが検索バーに入力した検索語句に置き換えられる {searchTerms} を使うことができます。サポートしている他の動的な検索パラメータは OpenSearch 1.1 パラメータに記述されています。
+
+
+
+ 検索サジェストのクエリに指定された URL のテンプレートは JavaScript Object Notation (JSON) フォーマットで補完リストを取得するために使われます。サーバ上で検索サジェストのサポートを実装する方法の詳細は 検索プラグインでの検索サジェストのサポートを見てください。
+
+

Image:SearchSuggestionSample.png

+
+
+ Param
+
+ 検索クエリともに通過させるために必要なキー/値のペアのパラメータです。この値を指定する際にはユーザが検索バーに入力した検索語句を挿入するための {searchTerms} を使うことができます。
+
+
+ 注意: Internet Explorer 7 はこの要素をサポートしていません。
+
+
+
+
+ SearchForm
+
+ プラグインのサイトの検索ページを開くための URL。これは Firefox にユーザが直接 Web サイトを訪れる方法を提供します。
+
+
+ 注意: この要素は Firefox 特有で OpenSearch 仕様の一部ではないため、この要素をサポートしていない他のユーザエージェントが安全に無視できるようにするために、上の例では "moz:" XML 名前空間接頭辞を使っています。
+
+
+

検索プラグインの{{ 訳語("自動検出", "Autodiscovery") }}

+

検索プラグインを提供しているウェブサイトは Firefox ユーザがプラグインを簡単にダウンロードしてインストールできるように通知することができます。

+

自動検出をサポートするには、ウェブページの <HEAD> セクションに単に一行追加するだけです。

+
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
+
+

斜体の項目を以下で説明されているように置き換えてください。

+
+
+ searchTitle
+
+ "MDC を検索" や 'Yahoo! 検索" のような実行する検索の名前です。この値は、プラグインファイルの ShortName と一致させる必要があります。
+
+
+
+ pluginURL
+
+ ブラウザがダウンロードできる XML 検索プラグインの URL です。
+
+

もしあなたのサイトが複数の検索プラグインを提供しているなら、それら全ての自動検出をサポートすることができます。例:

+
<link rel="search" type="application/opensearchdescription+xml" title="MySite: 著者" href="http://www.mysite.com/mysiteauthor.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="MySite: タイトル" href="http://www.mysite.com/mysitetitle.xml">
+
+

この方法であなたのサイトは著者による検索とタイトルによる検索を行うプラグインを別々のものとしてを提供することができます。

+

トラブルシューティングのヒント

+

検索プラグインの XML に問題があると、検出されたプラグインを Firefox 2 に追加する際にエラーが発生するでしょう。エラーメッセージは完全な参考になるわけではありません、しかし、以下のヒントが問題を探す手助けになるでしょう。

+
    +
  • 検索プラグインが{{ 原語併記("整形式", "well formed") }}か確認してください。
    • +
+

ファイルを Firefox に直接読みこませることによって確認できます。テンプレート URL の中のアンパサンド(&)は &amp; でエスケープされている必要があり、タグは最後のスラッシュか一致する終了タグで閉じられている必要があります。

+
    +
  • xmlns 属性が重要です。xmlns 属性無しでは "Firefox は次の場所から検索エンジンをダウンロードできませんでした:(URL)" というエラーメッセージを受け取るでしょう。
    • +
  • text/html URL を含めなくてはならない ことに注意してください — Atom や RSS URL タイプしか含まない検索エンジン(それは妥当なのですが、Firefox はサポートしていません) は "検索エンジンをダウンロードできませんでした"というエラーを引き起こします。
    • +
+


+ さらに、検索プラグインサービスはプラグイン開発者が使うであろうログの仕組みを提供します。about:config を使い 'browser.search.log' を true にしてください。検索プラグインが追加されるとログ情報が Firefox のエラーコンソール(ツール -> エラーコンソール)に表示されます。

+

参考資料

+ diff --git a/files/ja/web/progressive_web_apps/advantages/index.html b/files/ja/web/progressive_web_apps/advantages/index.html deleted file mode 100644 index b7d3a2dc7b..0000000000 --- a/files/ja/web/progressive_web_apps/advantages/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -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 でアプリにリンクできることです — アプリストアは不要で、複雑なインストールプロセスも不要です。 これこそがいつものことです。

- -

ネットワーク非依存

- -

最新のウェブアプリは、ネットワークの信頼性が低い場合、または存在しない場合でも機能します。 ネットワークの独立性の背景にある基本的な考え方は、次のことができるようにすることです。

- -
    -
  • ネットワークにアクセスできない場合でも、サイトを再訪してそのコンテンツを取得する。
    • -
  • 接続性が悪い状況でも、ユーザーが以前に少なくとも1回アクセスしたことがある、あらゆる種類のコンテンツを閲覧する。
    • -
  • 接続がない状況下でユーザーに見せるものを制御する。
    • -
- -

これは技術の組み合わせによって達成されます — ページ要求を制御するサービスワーカー（オフラインでの保存など）、ネットワーク要求への応答をオフラインで保存するための 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/web/security/information_security_basics/index.html b/files/ja/web/security/information_security_basics/index.html deleted file mode 100644 index 4eaeff0350..0000000000 --- a/files/ja/web/security/information_security_basics/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 情報セキュリティの基本 -slug: Web/Security/Information_Security_Basics -tags: - - Beginner - - Landing - - Security - - セキュリティ -translation_of: Web/Security/Information_Security_Basics ---- -

情報セキュリティを基本的に理解しておくことは、ソフトウェアやサイトが危険で脆弱なままで、資産を奪ったりその他の悪意の理由のために弱点を悪用されるのを防ぐのに役立ちます。これらの記事は知るべきことを学ぶのに役立ちます。 この情報から、ウェブ開発を通じて、またそれ以外のコンテンツのデプロイにおいても、セキュリティの役割と重要性に気づくでしょう。

- -
-
機密性、完全性、可用性
-
セキュリティを理解する上で絶対的な基礎となる、セキュリティの第一の目的を説明します。
-
セキュリティの制御
-
セキュリティ制御の主要なカテゴリを定義し、潜在的な欠点を議論します。
-
TCP/IP セキュリティ
-
SSL のセキュリティの考慮事項に焦点を当てた TCP/IP モデルの概要です。
-
脅威
-
主要な脅威の概念を簡単に案内します。
-
- -
-
脆弱性
-
主要な分野の脆弱性を定義し、すべてのソフトウェアの脆弱性の存在を議論します。
-
- -

関連情報

- - - -

{{QuickLinksWithSubpages("/ja/docs/Web/Security")}}

diff --git a/files/ja/web/security/public_key_pinning/index.html b/files/ja/web/security/public_key_pinning/index.html deleted file mode 100644 index 4741133a6b..0000000000 --- a/files/ja/web/security/public_key_pinning/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: HTTP Public Key Pinning (HPKP) -slug: Web/Security/Public_Key_Pinning -tags: - - Deprecated - - Guide - - HPKP - - HTTP - - Obsolete - - Security -translation_of: Web/HTTP/Public_Key_Pinning ---- -

{{HTTPSidebar}}{{deprecated_header}}

- -
注: Public Key Pinning の仕組みは Certificate Transparency および {{HTTPHeader("Expect-CT")}} ヘッダーに置き換えられ、非推奨になりました。
- -

HTTP Public Key Pinning ({{Glossary("HPKP")}}) は、ウェブクライアントに特定の公開鍵をあるウェブサーバーに関連付けさせることで、偽造された証明書による{{Glossary("MITM", "中間者攻撃")}}のリスクを減少させるためのセキュリティ機能でした。これは最近のブラウザーでは削除され、対応がなくなりました。

- -

{{Glossary("TLS")}} セッションで用いられるサーバーの公開鍵の真正性を担保するため、通常その公開鍵は認証局 ({{GLossary("CA")}}) の証明書でラップされます。ブラウザーなどのウェブクライアントがこれらの認証局を信頼することで、認証局は任意のドメイン名に対する証明書を作成できます。攻撃者が1つの認証局を危殆化させることができれば、様々な TLS コネクションで中間者攻撃を仕掛けることが可能になってしまいます。 HPKP はこの {{Glossary("HTTPS")}} プロトコルへの脅威を、そのウェブサーバーにどの公開鍵が所属するのかをクライアントに伝えることで回避することができます。

- -

HPKP は Trust on First Use ({{Glossary("TOFU")}}) 技術の1つです。 HPKP の HTTP ヘッダーがウェブサーバーからクライアントへ最初に送信されて以降、そのウェブサーバーに紐付く公開鍵はクライアントで一定期間記憶されます。クライアントが再びそのサーバーを訪れた際は、既に HPKP で記憶したフィンガープリントと一致する公開鍵が、証明書チェインにおいて最低 1 つの証明書に含まれていることを確認します。そのサーバーから送信されてきた公開鍵が不明なものだった場合、クライアントはユーザーに警告を表示します。

- -

Firefox および Chrome は、認証された証明書チェーンが (内蔵の証明書ではなく) ユーザー定義の証明書であった場合、ピン留めによる認証を無効化します。つまり、独自のルート証明書をインポートしたユーザーに対しては、ピン留めによる警告が表示されません。

- -

HPKP の有効化

- -

サイトでこの機能を有効化するには、サイトに HTTPS でアクセスされたとに、 HTTP の {{HTTPHeader("Public-Key-Pins")}} ヘッダーを返す必要があります。

- -
Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubDomains][; report-uri="reportURI"]
- -
-
pin-sha256
-
二重引用符で囲まれた文字列で、 Base64 符号化された Subject Public Key Information ({{Glossary("SPKI")}}) のフィンガープリントです。異なる公開鍵に対する複数のピンを指定することが出来ます。将来のブラウザーでは SHA-256 以外のハッシュアルゴリズムが許容されるかもしれません。証明書や鍵ファイルからこの情報を抽出する方法は次の項で説明します。
-
max-age
-
このサイトへのアクセス時に必要となる（唯一ピン留めされた）鍵について、この鍵をブラウザーが記憶するべき時間を指定します。この値は秒単位で表現します。
-
includeSubDomains {{optional_inline}}
-
このパラメータは省略可能です。サイトにおけるすべてのサブドメインにもこのルールが適用されます。
-
report-uri {{optional_inline}}
-
このパラメータは省略可能です。ピンの検証に失敗した際に、失敗した旨を報告する URL を指定します。
-
- -
-

注: 現在の仕様では、本番系で運用されていないバックアップ用の第2のピンを指定することが必須になっています。これにより、既にピンを持っているクライアントからのアクセス性を損なうことなく、サーバの公開鍵を変更することが可能になります。例えば、本番系の鍵が危殆化したときなどに重要となります。

-
- -

Base64 エンコードされた公開鍵情報を抽出するには

- -
-

注: 以下の例ではサーバ証明書をピン留めする方法を説明していますが、証明書の更新やローテーションを容易にするため、サーバ証明書を発行した CA の中間証明書もピン留めすることを推奨します。

-
- -

まずは証明書や鍵ファイルから公開鍵情報を抽出し、それを Base64 でエンコードする必要があります。

- -

次に示す便利なコマンドで、鍵ファイルや証明書署名要求 (CSR)、または証明書から Base64 エンコードされた情報を抽出できます。

- -
openssl rsa -in my-rsa-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl ec -in my-ecc-key-file.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl req -in my-signing-request.csr -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -
openssl x509 -in my-certificate.crt -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -

以下のコマンドを用いると、ウェブサイト向けに情報を抽出することができます。

- -
openssl s_client -servername www.example.com -connect www.example.com:443 | openssl x509 -pubkey -noout | openssl pkey -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64
- -

HPKP ヘッダーの例

- -
Public-Key-Pins:
-  pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=";
-  pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=";
-  max-age=5184000; includeSubDomains;
-  report-uri="https://www.example.org/hpkp-report"
- -

この例では、 pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs=" で本番系で使用されるサーバーの公開鍵をピン止めします。２番目のピン宣言である pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE=" も、バックアップキーをピン止めします。 max-age=5184000 はクライアントにこの情報を２か月間保存するように伝え、これは IETF RFC によれば合理的な期間です。このキーのピン止めは、 includeSubDomains 宣言で指示されているように、すべてのサブドメインでも有効です。最後に、 report-uri="https://www.example.net/hpkp-report" はピンの検証の失敗を報告する場所を説明します。

- -

Report-Only ヘッダー

- -

{{HTTPHeader("Public-Key-Pins")}} ヘッダーを用いる代わりに、 {{HTTPHeader("Public-Key-Pins-Report-Only")}} ヘッダーを利用することも可能です。このヘッダーを用いた場合、ピン留めの認証に失敗した場合でも指定した report-uri にレポートが送信されるのみで、ブラウザーがウェブサーバーへ接続することは可能となります。

- -

HPKP ヘッダーを送信するためのウェブサーバーの設定

- -

HPKP ヘッダーを送信するのに必要な具体的な手順はウェブサーバーによって異なります。

- -
-

注: 以下の例では、2か月間の max-age と includeSubDomains を指定しています。自身のサーバに合った適切な設定をしてください。

-
- -
-

HPKP の設定を間違えると、ユーザーが長期間接続できなくなってしまう可能性があります！バックアップの証明書を用意したり、CA の証明書をピン留めすることを推奨します。

-
- -

Apache

- -

次のような行をウェブサーバーの config に追加すると Apache で HPKP が有効になります。 mod_headers モジュールがインストールされている必要があります。

- -
Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains"
- -

Nginx

- -

次のような行を追加し、適切な pin-sha256="..." の値を設定すると nginx で HPKP が有効になります。 ngx_http_headers_module がインストールされている必要があります。

- -
add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains' always;
- -

Lighttpd

- -

鍵に関する次のような情報 (pin-sha256="..." フィールド) を含む行を追加すると、 lighttpd で HPKP が有効になります。

- -
setenv.add-response-header  = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains")
- -

注: 以下のように server.module で mod_setenv をあらかじめ読み込んでおく必要があります。

- -
server.modules += ( "mod_setenv" )
- -

IIS

- -

IIS から Public-Key-Pins ヘッダーを送信するには、以下のような数行を Web.config ファイルに追加してください。

- -
<system.webServer>
-  ...
-
-  <httpProtocol>
-    <customHeaders>
-      <add name="Public-Key-Pins" value="pin-sha256=&quot;base64+primary==&quot;; pin-sha256=&quot;base64+backup==&quot;; max-age=5184000; includeSubDomains" />
-    </customHeaders>
-  </httpProtocol>
-
-  ...
-</system.webServer>
-
- -

仕様書

- - - - - - - - - - - - - - -
仕様書題名
{{RFC("7469", "Public-Key-Pins", "2.1")}}Public Key Pinning Extension for HTTP
- -

ブラウザーの互換性

- - - -

{{Compat("http.headers.Public-Key-Pins")}}

- -

関連情報

- -
    -
  • {{HTTPHeader("Public-Key-Pins")}}
    • -
  • {{HTTPHeader("Public-Key-Pins-Report-Only")}}
    • -
  • Browser test site: HSTS and HPKP test
    • -
  • {{HTTPHeader("Expect-CT")}}
    • -
diff --git a/files/ja/web/specification_list/index.html b/files/ja/web/specification_list/index.html deleted file mode 100644 index fb1ee99700..0000000000 --- a/files/ja/web/specification_list/index.html +++ /dev/null @@ -1,614 +0,0 @@ ---- -title: Specification List -slug: Web/Specification_list -translation_of: Web/Specification_list ---- -

Open Webの基盤は幾つもの仕様書によって定義されています。このページではそれらの仕様書をリストしています。

- -

The Open Web Platform is defined in numerous specifications. This page lists these specifications, as well as links to MDN's documentation (including both tutorials and reference content), and links to status documentation about how complete our documentation project is in that topic.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Specification状態API Introduction & Landing pagesTutorialReferenceDoc status
HTML (one page)
- {{ SpecName("HTML WHATWG") }}
-  		{{ Spec2("HTML WHATWG") }}  - - -

The HTML Elements.
- HTML element-related interfaces:
- {{domxref("HTMLElement")}} {{domxref("HTMLUnknownElement")}} {{domxref("HTMLHtmlElement")}} {{domxref("HTMLHeadElement")}} {{domxref("HTMLTitleElement")}} {{domxref("HTMLBaseElement")}} {{domxref("HTMLLinkElement")}} {{domxref("HTMLMetaElement")}} {{domxref("HTMLStyleElement")}} {{domxref("HTMLScriptElement")}} {{domxref("HTMLBodyElement")}} {{domxref("HTMLHeadingElement")}} {{domxref("HTMLParagraphElement")}} {{domxref("HTMLHRElement")}} {{domxref("HTMLPreElement")}} {{domxref("HTMLQuoteElement")}} {{domxref("HTMLOListElement")}} {{domxref("HTMLUListElement")}} {{domxref("HTMLLIElement")}} {{domxref("HTMLDListElement")}} {{domxref("HTMLDivElement")}} {{domxref("HTMLAnchorElement")}} {{domxref("HTMLDataElement")}} {{domxref("HTMLTimeElement")}} {{domxref("HTMLSpanElement")}} {{domxref("HTMLBRElement")}} {{domxref("HTMLModElement")}} {{domxref("HTMLImageElement")}} {{domxref("HTMLIFrameElement")}} {{domxref("HTMLEmbedElement")}} {{domxref("HTMLObjectElement")}} {{domxref("HTMLParamElement")}} {{domxref("HTMLVideoElement")}} {{domxref("HTMLAudioElement")}} {{domxref("HTMLMediaElement")}} {{domxref("HTMLSourceElement")}} {{domxref("HTMLTrackElement")}} {{domxref("HTMLCanvasElement")}} {{domxref("HTMLMapElement")}} {{domxref("HTMLAreaElement")}} {{domxref("HTMLTableElement")}} {{domxref("HTMLTableCaptionElement")}} {{domxref("HTMLTableCellElement")}} {{domxref("HTMLTableColElement")}} {{domxref("HTMLTableSectionElement")}} {{domxref("HTMLTableRowElement")}} {{domxref("HTMLTableDataCellElement")}} {{domxref("HTMLTableHeaderCellElement")}} {{domxref("HTMLFormElement")}} {{domxref("HTMLFieldSetElement")}} {{domxref("HTMLLegendElement")}} {{domxref("HTMLInputElement")}} {{domxref("HTMLButtonElement")}} {{domxref("HTMLSelectElement")}} {{domxref("HTMLDataListElement")}} {{domxref("HTMLOptGroupElement")}} {{domxref("HTMLOptionElement")}} {{domxref("HTMLTextAreaElement")}} {{domxref("HTMLKeygenElement")}} {{domxref("HTMLOutputElement")}} {{domxref("HTMLProgressElement")}} {{domxref("HTMLMeterElement")}} {{domxref("HTMLDetailsElement")}} {{domxref("HTMLMenuElement")}} {{domxref("HTMLMenuItemElement")}} {{domxref("HTMLDialogElement")}} {{domxref("HTMLAppletElement")}} (obsolete) {{domxref("HTMLMarqueeElement")}} (obsolete) {{domxref("HTMLFrameSetElement")}} (obsolete) {{domxref("HTMLFrameElement")}} (obsolete) {{domxref("HTMLDirectoryElement")}} (obsolete) {{domxref("HTMLFontElement")}} (obsolete)
- Other DOM-related interfaces/events/... :
- {{domxref("HTMLAllCollection")}} {{domxref("HTMLFormControlsCollection")}} {{domxref("HTMLOptionsCollection")}} {{domxref("HTMLPropertiesCollection")}} {{domxref("RadioNodeList")}} {{domxref("DOMStringMap")}} {{domxref("DOMElementMap")}} {{domxref("ImageData")}} {{domxref("ImageBitmap")}} {{domxref("CanvasImageSource")}} {{domxref("WindowEventHandlers")}}  {{domxref("Document.location")}} {{domxref("Document.domain")}} {{domxref("Document.referrer")}} {{domxref("Document.cookie")}} {{domxref("Document.lastModified")}} {{domxref("Document.readyState")}} Document getter? {{domxref("Document.title")}} {{domxref("Document.dir")}} {{domxref("Document.body")}} {{domxref("Document.head")}} {{domxref("Document.images")}} {{domxref("Document.embeds")}} {{domxref("Document.plugins")}} {{domxref("Document.forms")}}  {{domxref("Document.scripts")}} {{domxref("Document.getElementsByName()")}} {{domxref("Document.getItems()")}} {{domxref("Document.cssElementMap")}} {{domxref("Document.currentScript")}} {{domxref("Document.open()")}} (2x) {{domxref("Document.close()")}} {{domxref("Document.write()")}} {{domxref("Document.writeln()")}} {{domxref("Document.defaultView")}} {{domxref("Document.activeElement")}} {{domxref("Document.hasFocus()")}} {{domxref("Document.designMode")}} {{domxref("Document.execCommand()")}} {{domxref("Document.queryCommandEnabled()")}} {{domxref("Document.queryCommandIndeterm()")}} {{domxref("Document.queryCommandState()")}} {{domxref("Document.queryCommandValue()")}} {{domxref("Document.commands")}} {{domxref("Document.onreadystatechange")}} (+Document obsolete members) {{event("readystatechange")}} (Event|Document) {{event("load")}} (Event|XMLDocument, HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("load")}} (ProgressEvent|HTMLImageElement){{event("click")}} (Event|any interactive element) {{event("error")}} (Event|HTMLLinkElement, HTMLStyleElement, HTMLScriptElement, HTMLImageElement) {{event("beforescriptexecute")}} (Event|HTMLScriptElement) {{event("afterscriptexecute")}} (Event|HTMLScriptElement) {{event("loadstart")}} (ProgressEvent|HTMLImageElement) {{event("loadend")}} (Event|HTMLImageElement) {{event("loadend")}} (ProgressEvent|HTMLImageElement) {{domxref("Window")}} {{domxref("GlobalEventHandlers")}} {{domxref("MediaError")}} {{domxref("AudioTrackList")}} {{domxref("VideoTrackList")}} {{domxref("AudioTrack")}} {{domxref("VideoTrack")}} {{domxref("MediaController")}} {{event("playing")}} (event) {{event("waiting")}} (event) {{event("ended")}} (event) {{event("emptied")}} (event) {{event("loadedmetadata")}} (event) {{event("loadeddata")}} (event) {{event("canplay")}} (event) {{event("canplaythrough")}} (event) {{event("durationchange")}} (event) {{event("timeupdate")}} (event) {{event("play")}} (event) {{event("pause")}} (event) {{event("ratechange")}} (event) {{event("valuechange")}} (event) {{domxref("TextTrackList")}} {{event("addtrack")}} (event) {{event("removetrack")}} (event) {{domxref("TextTrack")}} {{event("cuechange")}} (event) {{domxref("TextTrackCueList")}} {{domxref("TextTrackCue")}} {{event("enter")}} (event) {{event("exit")}} (event) {{domxref("TimeRanges")}} {{domxref("TrackEvent")}} {{domxref("CanvasProxy")}} {{domxref("CanvasRenderingContext2D")}} {{domxref("CanvasGradient")}} {{domxref("CanvasPattern")}} {{domxref("TextMetrics")}} {{domxref("DrawingStyle")}} {{domxref("CanvasDrawingStyles")}} {{domxref("Path")}} {{domxref("CanvasPathMethods")}} {{domxref("Screen.canvasResolution")}} {{domxref("RelatedEvent")}} {{cssxref("anchor-point")}}  {{domxref("BarProp")}} {{domxref("Location")}} {{domxref("History")}} {{domxref("PopStateEvent")}} {{event("popstate")}} (event) {{domxref("PageTransitionEvent")}} {{event("pageshow")}} (event) {{event("pagehide")}} (event) {{domxref("HashChangeEvent")}} {{event("hashchange")}} (event) {{domxref("BeforeUnloadEvent")}} {{event("checking")}} (event, manifest) {{event("noupdate")}} (event, manifest) {{event("downloading")}} (event, manifest) {{event("progress")}} (event, manifest) {{event("cached")}} (event, manifest) {{event("updateready")}} (event, manifest) {{event("obsolete")}} (event, manifest) {{event("error")}} (event, manifest) {{domxref("WindowProxy")}} (special) {{domxref("ValidityState")}} {{domxref("ApplicationCache")}} {{domxref("NavigatorOnLine")}} {{domxref("WindowTimers")}} {{domxref("WindowBase64")}} {{domxref("WindowModal")}} {{domxref("Navigator")}} {{domxref("NavigatorID")}} {{domxref("NavigatorLanguage")}} {{domxref("NavigatorContentUtils")}} {{domxref("NavigatorStorageUtils")}} {{domxref("NavigatorPlugins")}} {{domxref("PluginArray")}} {{domxref("MimeTypeArray")}} {{domxref("Plugin")}} {{domxref("MimeType")}} {{domxref("External")}} {{domxref("ImageBitmapFactories")}}  {{domxref("Transferable")}} {{domxref("DataTransfer")}} {{domxref("DataTransferItemList")}} {{domxref("DataTransferItem")}} {{domxref("DragEvent")}} {{domxref("ErrorEvent")}} {{domxref("MessageEvent")}} {{domxref("MessageChannel")}} {{domxref("MessagePort")}} {{event("message")}} (event)
- Events on any HTML*Element, Document and Window objects:
- {{event("abort")}} {{event("cancel")}} {{event("canplay")}} {{event("canplaythrough")}} {{event("change")}} {{event("click")}} {{event("close")}} {{event("contextmenu")}} {{event("cuechange")}} {{event("dblclick")}} {{event("drag")}} {{event("dragend")}} {{event("dragenter")}} {{event("dragexit")}} {{event("dragleave")}} {{event("dragover")}} {{event("dragstart")}} {{event("drop")}} {{event("durationchange")}} {{event("emptied")}} {{event("ended")}} {{event("input")}} {{event("invalid")}} {{event("keydown")}} {{event("keypress")}} {{event("keyup")}} {{event("loadeddata")}} {{event("loadedmetadata")}} {{event("loadstart")}} {{event("mousedown")}} {{event("mouseenter")}} {{event("mouseleave")}} {{event("mousemove")}} {{event("mouseout")}} {{event("mouseover")}} {{event("mouseup")}} {{event("mousewheel")}} {{event("pause")}} {{event("play")}} {{event("playing")}} {{event("progress")}} {{event("ratechange")}} {{event("reset")}} {{event("seeked")}} {{event("seeking")}} {{event("select")}} {{event("show")}} {{event("sort")}} {{event("stalled")}} {{event("submit")}} {{event("submit")}} {{event("suspend")}} {{event("timeupdate")}} {{event("volumechange")}} {{event("waiting")}}
- Events on any HTML*Element (except HTMLBodyElement and HTMLFrameSetElement), Document and Window objects:
- {{event("blur")}} {{event("error")}} {{event("focus")}} {{event("load")}} {{event("scroll")}}
- Events on the Window objects:
- {{event("afterprint")}} {{event("beforeprint")}} {{event("beforeunload")}} {{event("hashchange")}} {{event("message")}} {{event("offline")}} {{event("online")}} {{event("pagehide")}} {{event("pageshow")}} {{event("popstate")}} {{event("resize")}} {{event("storage")}} {{event("unload")}}
- Events on the Document objects: {{event("readystatechange")}}

- 		HTML API
 CSSVariableGetting StartedCSS TutorialsThe CSS3 page list them & the CSS Reference has the list of properties, functions, pseudo-classes and pseudo-elements. Some specifications also add APIs.
- {{SpecName("CSS3 Fonts")}}: {{domxref("CSSFontFaceRule")}} {{domxref("CSSFontFeatureValuesRule")}} {{domxref("Document.fontLoader")}} {{domxref("CSSFontFaceLoadEvent")}} {{domxref("FontLoader")}} {{event("loading")}} (event) {{event("loadingdone")}} (event) {{event("loadstart")}} (event) {{event("load")}} (evnet) {{event("error")}} (event)
- {{SpecName("CSS3 Transitions")}}: {{domxref("TransitionEvent")}} {{event("transitionend")}} (event)
- {{SpecName("CSS3 Animations")}}: {{domxref("AnimationEvent")}} {{event("animationstart")}} (event) {{event("animationend")}} (event) {{event("animationiteration")}} (event) {{domxref("CSSKeyframeRule")}} {{domxref("CSSKeyframesRule")}}
- {{SpecName("CSS3 Conditional")}}: {{domxref("CSSGroupingRule")}} {{domxref("CSSConditionRule")}} {{domxref("CSSMediaRule")}} (new inheritance) {{domxref("CSSSupportsRule")}} {{domxref("CSS")}}
- {{SpecName("CSS3 Device")}}: {{domxref("CSSViewportRule")}}
- {{SpecName("CSS3 Variables")}}: {{domxref("CSSStyleDeclaration.CSSVariablesDeclaration")}} {{domxref("CSSVariablesDeclaration")}}		CSSOM
{{SpecName("HTML5 Web Messaging")}} (also in WHATWG HTML){{Spec2("HTML5 Web Messaging")}}  {{domxref("MessageEvent")}} {{domxref("Window.postMessage")}}HTML API
{{SpecName("ES5.1")}}
- {{SpecName("ES6")}}
- {{SpecName("ES Int 1.0")}}		{{Spec2('ES5.1')}}
- {{Spec2('ES6')}}
- {{Spec2('ES Int 1.0')}}		  JavaScript referenceJavaScript
-

{{SpecName("SVG1.1")}}

- 		    SVG
WebGL    HTML API
{{SpecName("MathML3")}}    MathML
{{SpecName("DOM WHATWG") }}{{ Spec2("DOM WHATWG") }}DOM Reference  {{ domxref("Attr") }} {{ domxref("CharacterData") }} {{ domxref("ChildNode") }} {{ domxref("Comment") }} {{ domxref("CustomEvent") }} {{ domxref("Document")}} {{ domxref("DocumentFragment") }} {{ domxref("DocumentType") }} {{ domxref("DOMError") }} {{ domxref("DOMImplementation") }} {{ domxref("DOMSettableTokenList") }} {{ domxref("DOMTokenList") }} {{ domxref("Element")}} {{ domxref("Event")}} {{ domxref("EventTarget")}} {{ domxref("Promise")}} {{ domxref("PromiseResolver")}} {{ domxref("HTMLCollection") }} {{ domxref("MutationObserver")}} {{ domxref("MutationRecord")}} {{ domxref("Node") }} {{ domxref("NodeFilter") }} {{ domxref("NodeIterator") }} {{ domxref("NodeList") }} {{ domxref("ParentNode")}} {{ domxref("ProcessingInstruction") }} {{ domxref("Text") }} {{ domxref("TimeRanges") }} {{ domxref("Treewalker") }} {{ domxref("XMLDocument")}} {{ domxref("Range") }}DOM
{{SpecName("UI Events")}}{{Spec2("UI Events")}}  {{domxref("UIEvent")}} {{domxref("FocusEvent")}} {{domxref("MouseEvent")}} {{domxref("WheelEvent")}} {{domxref("KeyboardEvent")}} {{domxref("CompositionEvent")}}DOM
{{SpecName("CSSOM")}}{{ Spec2("CSSOM")}}CSSOM {{domxref("MediaList")}} {{domxref("Stylesheet")}} {{domxref("CSSStylesheet")}} {{domxref("StylesheetList")}} {{domxref("Document.styleSheets")}} {{domxref("Document.selectedStyleSheetSet")}} {{domxref("Document.lastStyleSheetSet")}} {{domxref("Document.preferredStyleSheetSet")}} {{domxref("Document.styleSheetSets")}} {{domxref("Document.enableStyleSheetsForSet()")}} {{domxref("LinkStyle")}} {{domxref("CSSRuleList")}} {{domxref("CSSRule")}} {{domxref("CSSCharsetRule")}} {{domxref("CSSImportRule")}} {{domxref("CSSMediaRule")}} {{domxref("CSSFontFaceRule")}} {{domxref("CSSPageRule")}} {{domxref("CSSNamespaceRule")}} {{domxref("CSSStyleDeclaration")}} {{domxref("ElementCSSInlineStyle")}} {{domxref("Window.getComputedStyle()")}} {{domxref("Window.getDefaultComputedStyle()")}} -

{{domxref("CSSMarginRule")}}

- 		CSSOM
{{SpecName("CSSOM View")}}{{ Spec2("CSSOM View")}}  {{domxref("Window.matchMedia()")}} {{domxref("Window.screen")}} {{domxref("Window.innerHeight")}} {{domxref("Window.innerWidth")}} {{domxref("Window.scrollX")}} {{domxref("Window.scrollY")}} {{domxref("Window.pageXOffset")}} {{domxref("Window.pageYOffset")}} {{domxref("Window.scroll()")}} {{domxref("Window.scrollTo()")}} {{domxref("Window.scrollBy()")}} {{domxref("Window.screenX")}} {{domxref("Window.screenY")}} {{domxref("Window.outerWidth")}} {{domxref("Window.outerHeight")}} {{domxref("MediaQueryList")}} {{domxref("Screen")}} {{domxref("Document.elementFromPoint()")}} {{domxref("Document.caretPositionFromPoint()")}} {{domxref("CaretPosition")}} {{domxref("MediaList")}} {{domxref("MediaQueryListListener")}} {{domxref("HTMLElement.offsetParent")}} {{domxref("HTMLElement.offsetTop")}} {{domxref("HTMLElement.offsetLeft")}} {{domxref("HTMLElement.offsetWidth")}} {{domxref("HTMLElement.offsetRight")}} {{domxref("Element.getClientRects()")}} {{domxref("Element.getBoundingClientRect()")}} {{domxref("Element.scrollIntoView()")}} {{domxref("Element.scrollTop")}} {{domxref("Element.scrollLeft")}} {{domxref("Element.scrollWidth")}} {{domxref("Element.scrollHeight")}} {{domxref("Element.clientTop")}} {{domxref("Element.clientLeft")}} {{domxref("Element.clientWidth")}} {{domxref("Element.clientHeight")}} {{domxref("Range.getClientRects()")}} {{domxref("Range.getBoundingClientRect()")}} {{domxref("MouseEvent.screenX")}} {{domxref("MouseEvent.screenY")}} {{domxref("MouseEvent.pageX")}} {{domxref("MouseEvent.pageY")}} {{domxref("MouseEvent.clientX")}} {{domxref("MouseEvent.clientY")}} {{domxref("MouseEvent.x")}} {{domxref("MouseEvent.y")}} {{domxref("MouseEvent.offsetX")}} {{domxref("MouseEvent.offsetY")}} {{domxref("ClientRectList")}} {{domxref("ClientRect")}}CSSOM
{{SpecName("Geometry Interfaces")}}{{Spec2("Geometry Interfaces")}}  {{domxref("DOMPointReadOnly")}} {{domxref("DOMPoint")}} {{domxref("DOMRect")}} {{domxref("DOMRectReadOnly")}} {{domxref("DOMRectList")}} {{domxref("DOMQuad")}} {{domxref("DOMMatrixReadOnly")}} {{domxref("DOMMatrix")}}DOM
{{SpecName("DOM Parsing")}}{{ Spec2("DOM Parsing")}}  {{domxref("DOMParser")}} {{domxref("XMLSerializer")}} {{domxref("Element.innerHTML")}} {{domxref("Element.outerHTML")}} {{domxref("Element.insertAdjacentHTML")}} {{domxref("Text.serializeAsCDATA")}} {{domxref("Range.createContextualFragment")}}DOM
{{SpecName("Web Workers")}} (also in WHATWG HTML){{ Spec2("Web Workers")}} Using web workers{{domxref("WorkerGlobalScope")}} {{domxref("DedicatedWorkerGlobalScope")}} {{domxref("SharedWorkerGlobalScope")}} {{domxref("AbstractWorker")}} {{domxref("Worker")}} {{domxref("SharedWorker")}} {{domxref("WorkerNavigator")}} {{domxref("WorkerUtils")}} {{domxref("WorkerLocation")}}WebWorkers
{{SpecName("Element Traversal")}}{{Spec2("Element Traversal")}}  {{domxref("ElementTraversal")}} {{domxref("Element")}} (new inheritance)DOM
{{SpecName("File API")}}{{Spec2("File API")}}  {{domxref("File")}} {{domxref("Blob")}} {{domxref("FileList")}} {{domxref("FileReader")}} {{domxref("FileReaderSync")}} {{domxref("URL.createObjectURL")}} {{domxref("URL.revokeObjectURL")}}File API
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}} Using fullscreen mode{{cssxref(":fullscreen")}} {{cssxref("::backdrop")}} {{domxref("Element.requestFullscreen()")}}  {{domxref("Document.fullscreenEnabled")}} {{domxref("Document.fullscreenElement")}} {{domxref("Document.exitFullscreen()")}} {{domxref("Document.onfullscreenchange()")}} {{domxref("Document.onfullscreenerror()")}} {{event("fullscreenchange")}} (event) {{event("fullscreenerror")}} (event)HTML API
{{SpecName("IndexedDB")}}{{Spec2("IndexedDB")}}IndexedDBUsing IndexedDB Using IndexedDB in chrome{{domxref("IDBDatabase")}} {{domxref("IDBObjectStore")}} {{domxref("IDBIndex")}} {{domxref("IDBRequest")}} {{domxref("IDBTransaction")}} {{domxref("IDBFactory")}} {{domxref("IDBKeyRange")}} {{domxref("IDBCursor")}} {{domxref("IDBObjectStoreParameters")}} {{domxref("IDBIndexParameters")}} {{domxref("IDBOpenDBRequest")}} {{domxref("IDBVersionChangeEvent")}} {{domxref("IDBEnvironment")}} {{domxref("Window")}} (new inheritance) {{domxref("WorkerUtils")}} (new inheritance) {{domxref("IDBCursorWithValue")}} {{domxref("IDBTransactionMode")}} {{domxref("IDBCursorWithValueSync")}}IndexedDB
{{SpecName("Web Audio API")}}{{Spec2("Web Audio API")}}  {{domxref("AnalyserNode")}} {{domxref("AudioBuffer")}} {{domxref("AudioBufferSourceNode")}} {{domxref("AudioContext")}} {{domxref("AudioDestinationNode")}} {{domxref("AudioListener")}} {{domxref("AudioNode")}} {{domxref("AudioParam")}} {{event("audioprocess")}} (event) {{domxref("AudioProcessingEvent")}} {{domxref("BiquadFilterNode")}} {{domxref("ChannelMergerNode")}} {{domxref("ChannelSplitterNode")}} {{event("complete")}} (event) {{domxref("ConvolverNode")}} {{domxref("DelayNode")}}{{domxref("DynamicsCompressorNode")}} {{event("ended_(Web_Audio)", "ended")}} (event) {{domxref("GainNode")}} {{domxref("MediaElementAudioSourceNode")}} {{domxref("MediaStreamAudioDestinationNode")}} {{domxref("MediaStreamAudioSourceNode")}} {{domxref("OfflineAudioCompletionEvent")}} {{domxref("OfflineAudioContext")}} {{domxref("OscillatorNode")}} {{domxref("PannerNode")}}{{domxref("PeriodicWave")}} {{domxref("ScriptProcessorNode")}} {{domxref("WaveShaperNode")}}WebAudio
{{SpecName("WebRTC 1.0")}}{{Spec2("WebRTC 1.0")}}  {{domxref("RTCConfiguration")}} {{domxref("RTCIceServer")}} {{domxref("RTCPeerConnection")}} {{domxref("RTCError")}} {{domxref("RTCSdpError")}} {{domxref("RTCSessionDescription")}} {{domxref("RTCIceCandidate")}} {{domxref("RTCPeerConnectionIceEvent")}} {{domxref("RTCDataChannel")}} {{domxref("RTCDataChannelEvent")}} {{domxref("RTCDTMFSender")}} {{domxref("RTCToneChangeEvent")}} {{domxref("MediaStreamEvent")}}WebRTC
{{SpecName("Media Capture")}}{{Spec2("Media Capture")}}  {{event("addtrack")}} (event) {{domxref("AudioStreamTrack")}} {{domxref("BlobEvent")}} {{event("ended (MediaStream)")}} (event) {{event("ended (MediaStreamTrack)")}} (event) {{domxref("MediaStream")}} {{domxref("MediaStreamConstraints")}} {{domxref("MediaStreamTrack")}} {{domxref("MediaStreamTrackEvent")}} {{domxref("MediaStreamTrackList")}} {{domxref("MediaTrackConstraints")}} {{event("muted")}} (event) {{domxref("NavigatorUserMedia")}} {{domxref("NavigatorUserMediaError")}} {{event("overconstrained")}} (event) {{event("removetrack")}} (event) {{event("started")}} (event) {{event("unmuted")}} (event) {{domxref("URL")}} {{domxref("VideoStreamTrack")}}WebRTC
{{SpecName("MediaStream Recording")}}{{Spec2("MediaStream Recording")}}  {{domxref("MediaRecorder")}} {{event("start")}} (event) {{event("stop")}} (event) {{event("dataavailable")}} (event) {{event("pause")}} (event) {{event("resume")}} (event) {{event("error")}} (event) {{event("warning")}} (event) {{domxref("BlobEvent")}} {{domxref("RecordingError")}}WebRTC
{{SpecName("Media Source Extensions")}}{{Spec2("Media Source Extensions")}}  {{domxref("MediaSource")}} {{domxref("SourceBuffer")}} {{event("updatestart")}} (event) {{event("update")}} (event) {{event("updateevent")}} (event) {{event("error")}} (event) {{event("abort")}} (event) {{domxref("SourceBufferList")}} {{event("addsourcebuffer")}} (event) {{event("removesourcebuffer")}} (event) {{domxref("VideoPlaybackQuality")}} {{domxref("URL.createObjectURL(MediaSource)")}} {{domxref("HTMLVideoElement.getVideoPlaybackQuality")}} {{domxref("AudioTrack.kind")}} {{domxref("AudioTrack.language")}} {{domxref("AudioTrack.sourceBuffer")}} {{domxref("VideoTrack.kind")}} {{domxref("VideoTrack.language")}} {{domxref("VideoTrack.sourceBuffer")}} {{domxref("TextTrack.kind")}} {{domxref("TextTrack.language")}} {{domxref("TextTrack.sourceBuffer")}} 
{{SpecName("Pointer Lock")}}{{Spec2("Pointer Lock")}} Pointer Lock API{{event("pointerlockchange")}} (event) {{event("pointerlockerror")}} (event) {{domxref("Element.requestPointerLock")}}  {{domxref("Document.onpointerlockchange")}} {{domxref("Document.onpointerlockerror")}} {{domxref("Document.pointerLockElement")}} {{domxref("Document.exitPointerLock()")}} {{domxref("MouseEvent.movementX")}} {{domxref("MouseEvent.movementY")}}DOM
{{SpecName("Vibration API")}}{{Spec2("Vibration API")}} Vibration API{{domxref("Navigator.vibrate()")}}Device API
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Battery Status API {{domxref("Navigator.battery")}} {{domxref("BatteryManager")}} {{event("chargingchange")}} (event) {{event("chargingtimechange")}} (event) {{event("dischargingtimechange")}} (event) {{event("levelchange")}} (event)Device API
{{SpecName("Geolocation")}}{{Spec2("Geolocation")}} Using geolocation{{domxref("NavigatorGeolocation")}} {{domxref("Geolocation")}} {{domxref("Navigator")}} (implements NavigatorGeolocation) {{domxref("Position")}} {{domxref("PositionOptions")}} {{domxref("Coordinates")}} {{domxref("PositionError")}}Device API
{{SpecName("Device Orientation")}}{{Spec2("Device Orientation")}}  {{event("deviceorientation")}} (event){{domxref("DeviceOrientationEvent")}} {{event("compassneedscalibration")}} (event) {{event("devicemotion")}} (event) {{domxref("DeviceMotionEvent")}} {{domxref("DeviceAcceleration")}} {{domxref("DeviceRotationRate")}}Device API
{{SpecName("Screen Orientation")}}{{Spec2("Screen Orientation")}}  {{domxref("Screen.orientation")}} {{domxref("Screen.lockOrientation()")}}{{domxref("Screen.unlockOrientation()")}} {{domxref("Screen.onorientationchange")}} {{event("orientationchange")}} (event)CSSOM
{{SpecName("Web Notifications")}}{{Spec2("Web Notifications")}} Using Web notifications{{domxref("Notification")}} {{event("click")}} (event) {{event("show")}} (event) {{event("error")}} (event) {{event("close")}} (event)HTML API
{{SpecName("AmbientLight")}}{{Spec2("AmbientLight")}} Using light events{{domxref("window.ondevicelight")}} {{domxref("DeviceLightEvent")}} {{event("devicelight")}} (event)Device API
{{SpecName("Proximity Events")}}{{Spec2("Proximity Events")}}Proximity Events {{domxref("window.ondeviceproximity")}} {{domxref("DeviceProximityEvent")}} {{event("deviceproximity")}} (event) {{domxref("window.onuserproximity")}} {{domxref("UserProximityEvent")}} {{event("userproximity")}} (event)Device API
{{SpecName("WebIDL")}}{{Spec2("WebIDL")}}    
{{SpecName("XMLHttpRequest")}}{{Spec2("XMLHttpRequest")}} Using FormData objects{{domxref("XMLHttpRequest")}} {{domxref("XMLHttpRequestEventTarget")}} {{domxref("XMLHttpRequestUpload")}} {{event("loadstart")}} (event) {{event("error")}} (event) {{event("timeout")}} (event) {{event("progress")}} (event) {{event("abort")}} (event) {{event("load")}} (event) {{event("loadend")}} (event) {{event("readystatechange")}} (event) {{domxref("FormData")}}HTML API
{{SpecName("Highres Time")}}{{Spec2("Highres Time")}}  {{domxref("DOMHighResTimestamp")}} {{domxref("Performance.now()")}}DOM
{{SpecName("Websockets")}} (also in WHATWG HTML){{Spec2("Websockets")}}WebSockets WebSockets referenceWriting WebSocket client applications{{domxref("WebSocket")}} {{event("open")}} (event) {{event("message")}} (event) {{event("error")}} (event) {{event("close")}} (event) {{domxref("CloseEvent")}}WebSockets
{{SpecName("Page Visibility API")}}{{Spec2("Page Visibility API")}} Using the Page Visibility API{{domxref("Document.hidden")}} {{domxref("Document.visibilityState")}} {{event("visibilitychange")}} (event)DOM
{{SpecName("RequestAnimationFrame")}}{{Spec2("RequestAnimationFrame")}}  {{domxref("Window.requestAnimationFrame()")}} {{domxref("Window.cancelAnimationFrame()")}}HTML API
{{SpecName("Server-sent events")}} (also in WHATWG HTML){{Spec2("Server-sent events")}}  {{domxref("EventSource")}} {{event("open")}} (event) {{event("error")}} (event) {{event("message")}} (event)HTML API
{{SpecName("Network Information")}}{{Spec2("Network Information")}} Network Information{{domxref("NetworkInformation")}} {{domxref("Connection")}} {{domxref("Navigator")}} (implements NetworkInformation) {{event("change")}} (event)Device API
{{SpecName("Web Storage")}} (also in WHATWG HTML){{Spec2("Web Storage")}} DOM Storage Guide{{domxref("Storage")}} {{domxref("WindowSessionStorage")}} {{domxref("WindowLocalStorage")}} {{event("storage")}} {{domxref("StorageEvent")}}WebStorage
{{SpecName("Selectors API Level 1")}}{{Spec2("Selectors API Level 1")}}  {{domxref("Document.querySelector()")}} {{domxref("Document.querySelectorAll()")}} {{domxref("DocumentFragment.querySelector()")}} {{domxref("DocumentFragment.querySelectorAll()")}} {{domxref("Element.querySelector()")}} {{domxref("Element.querySelectorAll()")}}DOM
{{SpecName("Selectors API Level 2")}}{{Spec2("Selectors API Level 2")}}  {{cssxref(":scope")}} {{domxref("Document.find()")}} {{domxref("Document.findAll()")}} {{domxref("DocumentFragment.find()")}} {{domxref("DocumentFragment.findAll()")}}
- {{domxref("Element.find()")}} {{domxref("Element.findAll()")}} {{domxref("Element.matches()")}}		DOM
{{SpecName("Progress Events")}}{{Spec2("Progress Events")}}  {{domxref("ProgressEvent")}}DOM
{{SpecName("Typed Array")}}{{Spec2("Typed Array")}} JavaScript Typed arrays{{domxref("Int8Array")}} {{domxref("Int16Array")}} {{domxref("Int32Array")}} {{domxref("Uint8Array")}} {{domxref("Uint16Array")}} {{domxref("Uint32Array")}} {{domxref("Uint8ClampedArray")}} {{domxref("Float32Array")}} {{domxref("Float64Array")}}, {{domxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("TypedArray")}}, {{domxref("DataView")}}JavaScript
{{SpecName("Gamepad")}}{{Spec2("Gamepad")}}  {{domxref("Gamepad")}} {{domxref("window.navigator.getGamepads()")}} {{domxref("GamepadEvent")}} {{event("gamepadconnected")}} (event) {{event("gamepaddisconnected")}}Device API
{{SpecName("Navigation Timing")}}{{Spec2("Navigation Timing")}}Navigation Timing APINavigation Timing{{domxref("PerformanceTiming")}} {{domxref("PerformanceNavigation")}} {{domxref("Performance")}} {{domxref("window.performance")}}DOM
{{SpecName("WOFF1.0")}}{{Spec2("WOFF1.0")}}About the Web Open Font Format   
{{SpecName("WebVTT")}}{{Spec2("WebVTT")}}WebVTT {{cssxref("::cue")}} {{cssxref(":past")}} {{cssxref(":future")}} {{domxref("WebVTTCue")}}HTML API
{{SpecName("Custom Elements")}} aka WebComponents{{Spec2("Custom Elements")}}  {{domxref("document.register()")}} {{cssxref(":unresolved")}} {{domxref("document.createElement()")}}  (new optional argument) {{domxref("document.createElementNS()")}} (new optional argument)Web Components
{{SpecName("Shadow DOM")}}, part of WebComponents{{Spec2("Shadow DOM")}}  Still in flux (lists what looks stable enough).
- {{HTMLElement("shadow")}} {{domxref("ShadowRoot")}} {{domxref("HTMLShadowElement")}} {{HTMLElement("content")}} {{domxref("HTMLContentElement")}} {{domxref("Element.createShadowRoot()")}} {{domxref("Element.shadowRoot")}}		Web Components
{{SpecName("HTML Templates")}}, part of WebComponents{{Spec2("HTML Templates")}}  {{HTMLElement("template")}} {{domxref("HTMLTemplateElement")}}Web Components
{{SpecName("Touch Events")}}{{Spec2("Touch Events")}} Touch Events{{domxref("Touch")}} {{domxref("TouchList")}} {{domxref("TouchEvent")}} {{event("touchstart")}} (event) {{event("touchend")}} (event) {{event("touchmove")}} (event) {{event("touchcancel")}} (event) {{domxref("Document.createTouch()")}} {{domxref("Document.createTouchList()")}}DOM
{{SpecName("Pointer Events")}}{{Spec2("Pointer Events")}}  {{domxref("PointerEvent")}} {{event("pointerdown")}} (event) {{event("pointerup")}} (event) {{event("pointercancel")}} (event) {{event("pointermove")}} (event) {{event("pointerover")}} (event) {{event("pointerout")}} (event) {{event("pointerenter")}} (event) {{event("pointerleave")}} (event) {{event("gotpointercapture")}} (event) {{event("lostpointercapture")}} (event) {{domxref("Element.ongotpointercapture")}} {{domxref("Element.onlostpointercapture")}} {{domxref("Element.setPointerCapture()")}} {{domxref("Element.releasePointerCapture()")}} {{domxref("GlobalEventHandlers.onpointerdown")}} {{domxref("GlobalEventHandlers.onpointerup")}} {{domxref("GlobalEventHandlers.onpointercancel")}} {{domxref("GlobalEventHandlers.onpointermove")}} {{domxref("GlobalEventHandlers.onpointerover")}} {{domxref("GlobalEventHandlers.onpointerout")}} {{domxref("GlobalEventHandlers.onpointerenter")}} {{domxref("GlobalEventHandlers.onpointerleave")}} {{domxref("Navigator.pointerEnabled")}} {{domxref("Navigator.maxTouchPoints")}} {{cssxref("touch-action")}}DOM
 {{SpecName("HTML Editing")}}{{Spec2("HTML Editing")}}  {{domxref("Selection")}} {{domxref("Document.getSelection()")}} {{domxref("Window.getSelection()")}} {{domxref("EditingBeforeInputEvent")}} {{domxref("EditingInputEvent")}}HTML API
{{SpecName("Web Crypto API")}}{{Spec2("Web Crypto API")}}  {{domxref("Key")}} {{domxref("CryptoOperation")}} {{event("abort")}} (event) {{event("error")}} (event) {{event("progress")}} (event) {{event("complete")}} (event) {{domxref("KeyOperation")}} {{domxref("Crypto")}} {{domxref("SubtleCrypto")}} {{domxref("Window.crypto")}} {{domxref("WorkerCrypto")}} {{domxref("WorkerGlobalScope.crypto")}} {{domxref("KeyPair")}}Web Crypto
{{SpecName("Undo Manager")}}{{Spec2("Undo Manager")}}  {{domxref("UndoManager")}} {{domxref("Element.undoScope")}} {{domxref("Element.undoManager")}} {{domxref("DOMTransaction")}} {{domxref("DOMTransactionEvent")}}DOM
WebSocket Protocol     
{{SpecName("CORS")}}{{Spec2("CORS")}}    
HTTP HTTP   
TLS     
MediaFragment     
Link: header     
Content-Disposition: header     
{{SpecName("URL")}}{{Spec2("URL")}}  {{domxref("URL")}} {{domxref("URLUtils")}} (no interface object) {{domxref("URLUtilsReadOnly")}} (no interface object) {{domxref("URLQuery")}}DOM
{{SpecName("Encoding")}}{{Spec2("Encoding")}}Encoding API {{domxref("TextDecoder")}} {{domxref("TextEncoder")}}DOM
{{SpecName("Clipboard API")}}{{Spec2("Clipboard API")}}  {{domxref("ClipboardEvent")}} {{event("cut")}} (event) {{event("copy")}} (event) {{event("paste")}} (event)DOM
{{SpecName("Selection API")}}{{Spec2("Selection API")}}    
- -

 

diff --git a/files/ja/web/svg/svg_1.1_support_in_firefox/index.html b/files/ja/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..7dcb1173e2 --- /dev/null +++ b/files/ja/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,30 @@ +--- +title: Mozilla SVG Status +slug: Mozilla_SVG_Status +tags: + - SVG +--- +
+

この文書は現在の開発バージョン ("trunk") の Mozilla SVG の現状を取り扱っています。もし Firefox 2 の SVG 機能に関する情報をお探しの場合、別のページ に情報があります。 +

+
+

要素の実装状況

+

SVG 1.1 の要素とネイティブサポートの状況の概略です。章は現在の状態 (サポート済み、サポート中、現在未サポート) によってマークされています。未実装部分のほとんどは 3 つの大きなモジュール (フォントとフィルタ、アニメーション) に該当します。 +

+ + +
要素 備考
Structure モジュール {{ 訳注("日本語訳") }}
svg {{ 訳注() }}
  • 実装済み。
  • DOM 属性 currentScale と currentTranslate は実装されていますが、パンとズームのユーザーインターフェースはありません。
  • SVGSVGElement
    • 未実装の属性: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
    • 未実装のバインディング: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, getElementById
g {{ 訳注("日本語訳") }}
  • 実装済み。
defs {{ 訳注("日本語訳") }}
  • 実装済み。
desc {{ 訳注("日本語訳") }}
  • 実装済み。
  • DOM に保存されるのみでユーザインタフェースなし。
title {{ 訳注("日本語訳") }}
  • 実装済み。
metadata {{ 訳注("日本語訳") }}
  • 実装済み。
  • DOM に保存されるのみでユーザインタフェースなし。
symbol {{ 訳注("日本語訳") }}
  • 実装済み。
use {{ 訳注("日本語訳") }}
  • 実装済み。
  • ドキュメント内の参照のみ動作 ({{ Bug(269482) }}).
  • <svg:use> カスケーディング規則に完全に従っていない ({{ Bug(265894) }}).
  • SVGElementInstance ツリーにイベントを伝えない ({{ Bug(265895) }}).
Conditional Processing モジュール {{ 訳注("日本語訳") }}
switch {{ 訳注("日本語訳") }}
  • 実装済み。
Image モジュール {{ 訳注("日本語訳") }}
image {{ 訳注("日本語訳") }}
  • 実装済み。
  • ラスタ画像のみ動作 ({{ Bug(272288) }})。
Style モジュール {{ 訳注("日本語訳") }}
style {{ 訳注("日本語訳") }}
  • 実装済み。
Shape モジュール {{ 訳注("日本語訳") }}
path {{ 訳注("日本語訳") }}
  • 実装済み。
  • SVGPathElement
    • 未実装の属性: normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
rect {{ 訳注("日本語訳") }}
  • 実装済み。
circle {{ 訳注("日本語訳") }}
  • 実装済み。
line {{ 訳注("日本語訳") }}
  • 実装済み。
ellipse {{ 訳注("日本語訳") }}
  • 実装済み。
polyline {{ 訳注("日本語訳") }}
  • 実装済み。
polygon {{ 訳注("日本語訳") }}
  • 実装済み。
Text モジュール {{ 訳注("日本語訳") }}
text {{ 訳注("日本語訳") }}
  • 実装済み。
  • フォントフェイスの選択はフェイスの候補リストの最初の項目しか試しません。
  • SVGTextElement
    • 未実装の属性: rotate, textLength, lengthAdjust
    • 未実装のバインディング: selectSubString
tspan {{ 訳注("日本語訳") }}
  • 実装済み。
  • SVGTSpanElement
    • 未実装の属性: rotate, textLength, lengthAdjust
    • 未実装のバインディング: selectSubString
tref {{ 訳注("日本語訳") }}
  • 未実装。
textPath {{ 訳注("日本語訳") }}
  • 実装済み。
  • 未実装のバインディング: selectSubString
altGlyph {{ 訳注("日本語訳") }}
  • 未実装。
altGlyphDef {{ 訳注("日本語訳") }}
  • 未実装。
altGlyphItem {{ 訳注("日本語訳") }}
  • 未実装。
glyphRef {{ 訳注("日本語訳") }}
  • 未実装。
Marker モジュール {{ 訳注("日本語訳") }}
marker {{ 訳注("日本語訳") }}
  • 実装済み。
Color Profile モジュール {{ 訳注("日本語訳") }}
color-profile {{ 訳注("日本語訳") }}
  • 未実装。
Gradient モジュール {{ 訳注("日本語訳") }}
linearGradient {{ 訳注("日本語訳") }}
  • 実装済み。
radialGradient {{ 訳注("日本語訳") }}
  • 実装済み。
stop {{ 訳注("日本語訳") }}
  • 実装済み。
Pattern モジュール {{ 訳注("日本語訳") }}
pattern {{ 訳注("日本語訳") }}
  • 実装済み。
Clip モジュール {{ 訳注("日本語訳") }}
clipPath {{ 訳注("日本語訳") }}
  • 実装済み。
Mask モジュール {{ 訳注("日本語訳") }}
mask {{ 訳注("日本語訳") }}
  • 実装済み。
Filter モジュール {{ 訳注("日本語訳") }}
filter {{ 訳注("日本語訳") }}
  • 実装済み。
  • 擬似画像入力は SourceGraphic and SourceAlpha のみ実装。
  • 未実装の擬似画像入力かフィルタ要素を使うとそのフィルタは無視され、参照された画像はフィルタ無しで表示されます。
feBlend {{ 訳注("日本語訳") }}
  • 実装済み。
feColorMatrix {{ 訳注("日本語訳") }}
  • 実装済み。
feComponentTransfer {{ 訳注("日本語訳") }}
  • 実装済み。
feComposite {{ 訳注("日本語訳") }}
  • 実装済み。
feConvolveMatrix {{ 訳注("日本語訳") }}
  • 実装済み。
feDiffuseLighting {{ 訳注("日本語訳") }}
  • 実装済み。
feDisplacementMap {{ 訳注("日本語訳") }}
  • {{ Bug(389746) }}
feFlood {{ 訳注("日本語訳") }}
  • 実装済み。
feGaussianBlur {{ 訳注("日本語訳") }}
  • 実装済み。
feImage {{ 訳注("日本語訳") }}
  • {{ Bug(390379) }}
feMerge {{ 訳注("日本語訳") }}
  • 実装済み。
feMergeNode {{ 訳注("日本語訳") }}
  • 実装済み。
feMorphology {{ 訳注("日本語訳") }}
  • 実装済み。
feOffset {{ 訳注("日本語訳") }}
  • 実装済み。
feSpecularLighting {{ 訳注("日本語訳") }}
  • 実装済み。
feTile {{ 訳注("日本語訳") }}
  • 実装済み。
feTurbulence {{ 訳注("日本語訳") }}
  • 実装済み。
feDistantLight {{ 訳注("日本語訳") }}
  • 実装済み。
fePointLight {{ 訳注("日本語訳") }}
  • 実装済み。
feSpotLight {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncR {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncG {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncB {{ 訳注("日本語訳") }}
  • 実装済み。
feFuncA {{ 訳注("日本語訳") }}
  • 実装済み。
Cursor モジュール {{ 訳注("日本語訳") }}
cursor {{ 訳注("日本語訳") }}
  • 未実装。
Hyperlinking モジュール {{ 訳注("日本語訳") }}
a {{ 訳注("日本語訳") }}
  • xlink:href と xlink:show 属性のみ実装済み。
View モジュール {{ 訳注("日本語訳") }}
view {{ 訳注("日本語訳") }}
  • 未実装。
Scripting モジュール {{ 訳注("日本語訳") }}
script {{ 訳注("日本語訳") }}
  • 実装済み。
Animation モジュール {{ 訳注("日本語訳") }}
animate {{ 訳注("日本語訳") }}
  • {{ Bug(216462) }}
set {{ 訳注("日本語訳") }}
  • 未実装。
animateMotion {{ 訳注("日本語訳") }}
  • 未実装。
animateTransform {{ 訳注("日本語訳") }}
  • {{ Bug(216462) }}
animateColor {{ 訳注("日本語訳") }}
  • 未実装。
mpath {{ 訳注("日本語訳") }}
  • 未実装。
Font モジュール {{ 訳注("日本語訳") }}
font {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
font-face {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
glyph {{ 訳注("日本語訳") }}
  • {{ Bug(119490) }}
missing-glyph {{ 訳注("日本語訳") }}
  • 未実装。
hkern {{ 訳注("日本語訳") }}
  • 未実装。
vkern {{ 訳注("日本語訳") }}
  • 未実装。
font-face-src {{ 訳注("日本語訳") }}
  • 未実装。
font-face-uri {{ 訳注("日本語訳") }}
  • 未実装。
font-face-format {{ 訳注("日本語訳") }}
  • 未実装。
font-face-name {{ 訳注("日本語訳") }}
  • 未実装。
definition-src {{ 訳注("日本語訳") }}
  • 未実装。
Extensibility モジュール {{ 訳注("日本語訳") }}
foreignObject {{ 訳注("日本語訳") }}
  • 実装済み。
+

実装のその他の注意

+

onload イベントは externalResourcesRequired 属性を考慮しません ({{ Bug(277955) }})。 +

+
+

原文書の情報

+
  • 著者: Tim Rowley +
  • 貢献者: Jonathan Watt, Steffen Wilberg +
  • 最終更新日: July 31, 2007 +
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細 +
+
+
+
+{{ languages( { "en": "en/Mozilla_SVG_Status" } ) }} diff --git a/files/ja/web/web_components/status_in_firefox/index.html b/files/ja/web/web_components/status_in_firefox/index.html deleted file mode 100644 index 0fa1b2248b..0000000000 --- a/files/ja/web/web_components/status_in_firefox/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Firefox での Web Components のサポート状況 -slug: Web/Web_Components/Status_in_Firefox -tags: - - API - - Experimental - - Firefox - - Guide - - Web Components - - status -translation_of: Web/Web_Components/Status_in_Firefox ---- -

{{DefaultAPISidebar("Web Components")}}{{SeeCompatTable}}

- -

Web Components は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている Gecko での実装状況の一覧を示します。

- -
-
-

ネイティブサポート

- -

Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:

- -
    -
  • {{HTMLElement("template")}}
    • -
- -

今後実装予定の機能

- -
    -
  • 新しい同意に基づいた Shadow DOM の実装は、2016 年 Q1 にリリース予定です。Anne と Wilson のブログ投稿に詳細が記述されています。しかし、まだ仕様について 多くの議論や課題 があり、すべてのブラウザへの実装は将来となるでしょう。
    • -
  • Custom elements は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。 -
      -
    • 古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、{{domxref("Element.attachShadow()")}} に対して {{domxref("Element.createShadowRoot()")}})、しかし、Firefox ではネイティブでは動作しないでしょう。
      • -
    -
    • -
  • これらの問題について、2016 年 1 月の会議 でベンダが議論するでしょう。
    • -
- -

放棄された機能

- -

これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。

- -
    -
  • HTML imports の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。{{bug(568953)}} をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。
    • -
- -

Firefox でポリフィルを使用する

- -

Firefox でポリフィルを使用する際に考慮すべき注意事項があります:

- -
    -
  • about:config の {{pref("dom.webcomponents.enabled")}} 設定を true に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。
    • -
  • webcomponents.js ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を サポートした 環境と異なる見た目になることに注意してください。
    • -
  • Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。
    • -
  • Shadow DOM を使用する必要がない場合、webcomponents.js ポリフィルの webcomponents-lite.js バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。
    • -
-
-
diff --git a/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..c73f0a1a51 --- /dev/null +++ b/files/ja/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,440 @@ +--- +title: Introduction to using XPath in JavaScript +slug: Introduction_to_using_XPath_in_JavaScript +tags: + - Add-ons + - DOM + - Extensions + - Transforming_XML_with_XSLT + - Web Development + - XML + - XPath + - XSLT +--- +

この文書では拡張機能や Web サイトから JavaScript 内で XPath を使うためのインターフェースについて解説します。Mozilla は DOM 3 XPath のかなりの部分を実装しており、HTML 文書と XML 文書の双方に対して XPath 式を実行することができます。

+ +

XPath を利用するための主となるインターフェースは document オブジェクトの evaluate 関数です。

+ +

{{ 英語版章題("document.evaluate") }}

+ +

document.evaluate

+ +

このメソッドは HTML を含む XML ベースの文書に対して XPath 式を評価し、XPathResult オブジェクトを返します。 XPathResult オブジェクトは単一のノード、もしくはノードの集合になります。このメソッドの情報は DOM:document.evaluate にありますが、このメソッドの解説のためには内容が薄いため、以下でさらに詳しく説明します。

+ +
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+
+ +

{{ 英語版章題("Parameters") }}

+ +

パラメータ

+ +

evaluate 関数は 5 つのパラメータを取ります。

+ +
    +
  • xpathExpression: 評価する XPath 式を文字列で指定します。
    • +
+ +
    +
  • contextNode: xpathExpression を評価する対象となる文書内のノードを指定します。指定されたノードの全ての子ノードに対しても評価が行われます。もっともよく指定される値は document です。
    • +
+ +
    +
  • namespaceResolver: xpathExpression に含まれるあらゆる名前空間接頭辞を渡され、その接頭辞に対応する名前空間 URI を表す文字列を返す関数です。この関数により、XPath 式で使われている接頭辞と文書内で使われている接頭辞が異なっていたとしてもそれを変換する事が可能になります。この関数は次のいずれかです。 + +
      +
    • XPathEvaluator オブジェクトの createNSResolver メソッドにより作成されたもの。ほとんどの場合はこれを使うべきでしょう。
      • +
    • HTML 文書の場合や、名前空間接頭辞が使われていない場合は null 。xpathExpression に名前空間接頭辞が含まれている場合に null を使うと、NAMESPACE_ERR コードと共に DOMException が投げられるので注意してください。
      • +
    • ユーザ定義のカスタム関数。詳しくは付録のユーザ定義名前空間リゾルバの使用の節を参照して下さい。
      • +
    +
    • +
+ +
    +
  • resultType: 評価の結果返してほしい値の型を示す定数です。もっとも良く指定される定数は XPathResult.ANY_TYPE で、この場合、指定された XPath 式に対して一番適切な型で結果が返されます。指定できる定数の一覧は付録の定数一覧の節を参照してください。それぞれの定数の使い方は戻り値の型の指定の節を参考にしてください。
    • +
+ +
    +
  • result: 既存の XPathResult オブジェクトまたは null を指定します。 XPathResult オブジェクトが指定された場合には、そのオブジェクトが再利用されます。 null が指定された場合には新しい XPathResult オブジェクトが生成されます。
    • +
+ +

{{ 英語版章題("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> それから 変数 nsResolver を パラメータ namespaceResolver として document.evaluate に渡します。

+ +

注意すべきなのは、XPath では接頭辞のない QName は名前空間が null の要素にのみマッチすると定義されているという点です。XPath にはデフォルト名前空間を取得する手段はありません。名前空間が null ではない要素や属性にマッチさせるには、接頭辞付きの名前テストを使い、その接頭辞を名前空間にマッピングする名前空間リゾルバを作成する必要があります。詳しくは下記のユーザ定義の名前空間リゾルバを作成する方法を参照して下さい。

+ +

{{ 英語版章題("Specifying the Return Type") }}

+ +

戻り値の型を指定する

+ +

document.evaluate から返される変数 xpathResult は、単一のノード (単純型) もしくはノードのコレクション (ノード集合型) から成ります。

+ +

{{ 英語版章題("Simple Types") }}

+ +

単純型

+ +

resultType で要求された結果型が次のうちのどれかであった場合、

+ +
    +
  • NUMBER_TYPE - 倍精度浮動小数点数 (double)
    • +
  • STRING_TYPE - 文字列
    • +
  • BOOLEAN_TYPE - 真偽値
    • +
+ +

それぞれ以下の XPathResult オブジェクトのプロパティにアクセスする事で式の戻り値を得る事ができます。

+ +
    +
  • numberValue
    • +
  • stringValue
    • +
  • booleanValue
    • +
+ +

{{ 英語版章題("Example") }}

+ +
例
+ +

下の例では XPath 式 count(//p) によって HTML 文書内の <p> 要素の数を取得しています。

+ +
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'この文書には ' + paragraphCount.numberValue + ' 個の段落要素が含まれています' );
+
+ +

JavaScript では数値を表示しようとすると文字列に変換されますが、XPath インターフェイスは stringValue プロパティを要求しても数値の結果を自動的に変換しないので、下のコードは動作しません。

+ +
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'この文書には ' + paragraphCount.stringValue + ' 個の段落要素が含まれています' );
+
+ +

これを実行すると NS_DOM_TYPE_ERROR コードの例外が返されます。

+ +

{{ 英語版章題("Node-Set Types") }}

+ +

ノード集合型

+ +

XPathResult オブジェクトが返すノード集合には主として 3 種類の型があります。

+ + + +

{{ 英語版章題("Iterators") }}

+ +
イテレータ
+ +

パラメータ resultType で指定された結果型が次のどちらかの場合、

+ +
    +
  • UNORDERED_NODE_ITERATOR_TYPE
    • +
  • ORDERED_NODE_ITERATOR_TYPE
    • +
+ +

マッチしたノードのノード集合がXPathResult オブジェクトとして返されます。これはイテレータのようにふるまい、 XPathResult の iterateNext() メソッドを使ってその中に含まれる個々のノードにアクセスできます。

+ +

マッチしたノードに対する反復が全て終了すると、iterateNext() は null を返します。

+ +

ただし、反復処理中に文書が変異した (文書ツリーが改変された) 場合、反復処理は無効化され、XPathResult の invalidIteratorState プロパティが true に設定され、NS_ERROR_DOM_INVALID_STATE_ERR 例外が投げられます。

+ +

{{ 英語版章題("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) {
+  dump( 'Error: Document tree modified during iteraton ' + e );
+}
+
+ +

{{ 英語版章題("Snapshots") }}

+ +
スナップショット
+ +

パラメータ resultType で指定された結果型が次のどちらかの場合、

+ +
    +
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • +
  • ORDERED_NODE_SNAPSHOT_TYPE
    • +
+ +

返される XPathResult オブジェクトはマッチしたノードの静的なノード集合となり、XPathResult オブジェクトの snapshotItem(itemNumber) メソッドによってそれぞれのノードにアクセス出来ます。itemNumber は取り出すノードのインデックスです。含まれるノードの総数は snapshotLength プロパティから得られます。

+ +

スナップショットは文書が変異しても変更されず、イテレータと違って無効になることはありませんが、スナップショットは現在の文書に対応しません。ノードが移動されていたり、既に存在しないノードが含まれていたり、新しいノードが追加されている可能性もあります。

+ +

{{ 英語版章題("Snapshot Example") }}

+ +
スナップショットの使用例
+ +
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+
+ +

{{ 英語版章題("First Node") }}

+ +
ファーストノード
+ +

パラメータ resultType で指定された結果型が次のどちらかの場合、

+ +
    +
  • ANY_UNORDERED_NODE_TYPE
    • +
  • FIRST_ORDERED_NODE_TYPE
    • +
+ +

XPath 式にマッチした最初のノードのみが XPathResult オブジェクトとして返されます。このノードには XPathResult オブジェクトの singleNodeValue プロパティによってアクセスできます。ノード集合が空ならばこのプロパティは null になります。

+ +

ただし、ordered サブタイプの場合は文書順において最初にマッチしたノードであることが保証されますが、unordered サブタイプの場合、返される単一のノードは文書順において最初のものではない可能性があるので注意が必要です。

+ +

{{ 英語版章題("First Node Example") }}

+ +
ファーストノードの使用例
+ +
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+
+ +

{{ 英語版章題("The ANY_TYPE Constant") }}

+ +

ANY_TYPE 定数

+ +

パラメータ resultType に指定された結果型が ANY_TYPE である場合、返される XPathResult オブジェクトは、式を評価した結果から導き出される適切な型になります。

+ +

返される結果型は単純型 ( NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE ) のうちのいずれにもなり得ますが、もしノード集合であった場合には、UNORDERED_NODE_ITERATOR_TYPE にしかなり得ません。

+ +

評価の後に型を判断するには、XPathResult オブジェクトの resultType プロパティを使います。このプロパティの定数値は付録に記載されています。 None Yet {{ 英語版章題("Any_Type Example") }}

+ +

Any_Type Example

+ +

{{ 英語版章題("Examples") }}

+ +

例

+ +

{{ 英語版章題("Within a HTML Document") }}

+ +

HTML 文書内で

+ +

下のコードは、 XPath 式を評価する対象となる HTML 文書の内部や、それにリンクされた JavaScript 内に設置するためのものです。

+ +

XPath を使って HTML 文書内の全ての <h2> 見出し要素を抽出したければ、xpathExpression は単に '//h2' となります。 // は再帰下降演算子 (Recursive Descent Operator)なので、この式は文書ツリー内のあらゆる位置にある、nodeName が h2 である要素にマッチします。 link to introductory xpath doc

+ +
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+
+ +

HTML は名前空間を持っていないため、パラメータ namespaceResolver には null を渡している事に注目してください。

+ +

文書全体から見出し要素を探すため、ここでは document オブジェクト自体を contextNode として使っています。

+ +

この式の結果は XPathResult オブジェクトです。返された結果の型を知りたければ、返されたオブジェクトの resultType プロパティを評価します。この場合は 4 、つまり UNORDERED_NODE_ITERATOR_TYPE と評価されるでしょう。これは XPath 式の結果がノード集合であった場合のデフォルトの結果型です。この型はノードに一つずつアクセスする事ができ、返されるノードの順序は決まっていません。返されたノードにアクセスするには、返されたオブジェクトの iterateNext() メソッドを使います。

+ +
var thisHeading = headings.iterateNext();
+
+var alertText = 'この文書内のレベル 2 の見出しは、\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+
+ +

反復によってノードを得られれば、そのノードの全ての標準 DOM インターフェイスにアクセスできます。式によって返される h2 要素に対する反復処理が全て終了すると、それ以降は iterateNext() を何度呼び出しても null が返されます。

+ +

{{ 英語版章題("Evaluating against an XML document within an Extension") }}

+ +

拡張機能内の XML 文書に対して評価する

+ +

例として XML 文書が chrome://yourextension/content/peopleDB.xml にあるとします。

+ +
<?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>
+
+ +

拡張機能内で XML 文書の内容を取得できるようにするため、XMLHttpRequest オブジェクトを作成して文書を同期的に読み込みます。変数 xmlDoc には文書が XMLDocument オブジェクトとして格納されるので、それに対して evaluate メソッドを使う事ができます。

+ +

拡張機能の xul/js 文書で使用する JavaScript は以下の通りです。

+ +
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 );
+
+ +

{{ 英語版章題("Appendix") }}

+ +

付録

+ +

{{ 英語版章題("Implementing a User Defined Namespace Resolver") }}

+ +

ユーザ定義の名前空間リゾルバの実装

+ +

この例は説明のためだけのものです。 この関数は、xpathExpression から名前空間接頭辞を取り、その接頭辞に対応する URI を返さなければなりません。例えば、この式は、

+ +
'//xhtml:td/mathml:math'
+
+ +

(X)HTML のテーブルデータセル要素の子要素である全ての MathML 式を選択します。

+ +

接頭辞 'mathml:' と 名前空間 URI 'http://www.w3.org/1998/Math/MathML' を、接頭辞 'xhtml:' と URI 'http://www.w3.org/1999/xhtml' をそれぞれ関連付けるため、関数を用意します。

+ +
function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+
+ +

そうすると document.evaluate をこのようにして呼び出せます。

+ +
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

{{ 英語版章題("Implementing a default namespace for XML documents") }}

+ +

XML 文書のデフォルト名前空間を実装する

+ +

デフォルト名前空間リゾルバの実装で述べたように、デフォルトリゾルバは XML 文書のデフォルト名前空間を処理しません。たとえばこの文書では、

+ +
<?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) は、nsResolver が createNSResolver によって返されたリゾルバである場合、空集合を返します。リゾルバとして null を渡しても同じです。

+ +

正しいデフォルト名前空間 (この場合は Atom 名前空間) を返すカスタムリゾルバを作成すれば、この問題を解決できます。この時、XPath 式の中ではなんらかの名前空間接頭辞を使わなければならないことに注意してください。これはリゾルバ関数がその接頭辞を指定した名前空間に変換できるようにするためです。例えばこのようにします。

+ +
function resolver() {
+    return 'http://www.w3.org/2005/Atom';
+}
+doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
+
+ +

文書で複数の名前空間が使われている場合には、より複雑なリゾルバが必要になります。

+ +

{{ 英語版章題("XPathResult Defined Constants") }}

+ +

XPathResult の定義済み定数

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
定義済みの結果型定数値解説
ANY_TYPE0式の評価によって導き出される適切な型を格納した結果の集合。結果がノード集合ならば、結果の型は常に UNORDERED_NODE_ITERATOR_TYPE となるので注意が必要。
NUMBER_TYPE1一つの数値を格納した結果。 count() 関数を使用した XPath 式などで有用。
STRING_TYPE2一つの文字列を格納した結果。
BOOLEAN_TYPE3一つの真偽値を格納した結果。 not() 関数を使用した XPath 式などで有用。
UNORDERED_NODE_ITERATOR_TYPE4式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。
ORDERED_NODE_ITERATOR_TYPE5式にマッチした全てのノードを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。
UNORDERED_NODE_SNAPSHOT_TYPE6式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番と必ずしも一致しない。
ORDERED_NODE_SNAPSHOT_TYPE7式にマッチした全てのノードのスナップショットを格納した結果ノード集合。ノードの順番は文書内に現れる順番に一致する。
ANY_UNORDERED_NODE_TYPE8式にマッチしたノードのうちのどれか一つを格納した結果ノード集合。これは必ずしも文書内で式にマッチした最初のノードというわけではない。
FIRST_ORDERED_NODE_TYPE9文書内で式にマッチした最初のノードを格納した結果ノード集合。
+ +
+

{{ 英語版章題("Original Document Information") }}

+ +

原文情報

+ +
    +
  • 原文 Mozilla XPath Tutorial に基づいて作成されています。
    • +
  • 原文の著者: James Graham
    • +
  • その他の貢献者: James Thompson
    • +
  • 最終更新日: 2006 年 3 月 25 日
    • +
+
+ +

 

diff --git a/files/ja/web_content_accessibility_guidelines_1.0/index.html b/files/ja/web_content_accessibility_guidelines_1.0/index.html deleted file mode 100644 index 8ec467310c..0000000000 --- a/files/ja/web_content_accessibility_guidelines_1.0/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Web Content Accessibility Guidelines 1.0 -slug: Web_Content_Accessibility_Guidelines_1.0 -tags: - - Accessibility - - Web Development ---- -

-WCAG 1.0 は、W3C の Web Accessibility Inisiative(WAI) によって公開されています。 -

- -

日本語参考訳(ZSPC訳)： -

- -

その他の翻訳は 各国語版へのリンク集 を参照のこと。 -


-現在ワーキングドラフトが公開されている [WCAG 2.0] とは、基本的な課題は同じです。WCAG 1.0 に適合していれば大きな変更は必要ありませんが、WCAG 2.0 ではより明確な基準が設けられており、アプローチの仕方も違います。 -

日本においては、WCAG 1.0 のガイドラインの多くが JIS X8341-3 に取り込まれています。 -

diff --git a/files/ja/web_development/index.html b/files/ja/web_development/index.html deleted file mode 100644 index 534c441e19..0000000000 --- a/files/ja/web_development/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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/web_development/introduction_to_web_development/index.html b/files/ja/web_development/introduction_to_web_development/index.html deleted file mode 100644 index 73086c9207..0000000000 --- a/files/ja/web_development/introduction_to_web_development/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -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/web_development/mobile/index.html b/files/ja/web_development/mobile/index.html deleted file mode 100644 index cc288a9c45..0000000000 --- a/files/ja/web_development/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -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/web_development/mobile/responsive_design/index.html b/files/ja/web_development/mobile/responsive_design/index.html deleted file mode 100644 index 36724f3ba5..0000000000 --- a/files/ja/web_development/mobile/responsive_design/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -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/web_development/writing_forward-compatible_websites/index.html b/files/ja/web_development/writing_forward-compatible_websites/index.html deleted file mode 100644 index aa0e54539d..0000000000 --- a/files/ja/web_development/writing_forward-compatible_websites/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Writing forward-compatible websites -slug: Web_Development/Writing_forward-compatible_websites -tags: - - CSS - - Compatibility - - DOM - - HTML - - JavaScript - - Web Development -translation_of: Web/Guide/Writing_forward-compatible_websites ---- -

このページでは、新しいバージョンのブラウザが公開されても壊れることのない Web サイトを記述する方法を説明します。
-
- これはイントラネットや公衆向けでない Web サイトで特に重要です。私たちがあなたのコードを見ることができないので、それが壊れていることを確認できないのです。これらのすべてに従うことができない場合もありますが、可能な限り多くの事項に従うことで、Web サイトを将来にわたって有用な状態にすることの助けになります。

-

JavaScript

-

onfoo 属性でグローバル変数へアクセスする際に "window." 接頭辞を付加する

-

HTML の要素でイベントハンドラのコンテンツ属性 (onclick、 onmouseover など) が使用されているとき、それら属性でのすべての名前探索は始めに要素自身、次にフォームコントロール要素の場合はそのフォーム、そして document、さらに (あなたがグローバル変数を定義した) window の順に行われます。例えば、以下のマークアップがある場合は:

-
<div onclick="alert(ownerDocument)">Click me</div>
-
-

文字列をクリックすると div の ownerDocument をアラートで表示します。これは、var ownerDocument がグローバルスコープで宣言されている場合でも動作します。

-

これが意味することは、イベントハンドラのコンテンツ属性でグローバル変数にアクセスするときやグローバルに宣言された任意の関数を呼び出すとき、あなたの関数や変数と同じ名前の新たな DOM プロパティが仕様書で要素やドキュメントに追加され、またそれをブラウザが実装した場合に、常に名前が衝突した時点で探索が終わってしまいます。これが起きると、突如関数が呼び出されなくなります。この現象は HTML5 の進展に伴い、さまざまなサイトで何度も発生しています。

-

これを防ぐには、以下のように "window." を用いてグローバル変数にアクセスするのが最適です:

-
<script>
-  function localName() {
-    alert('Function localName has been called');
-  }
-</script>
-<div onclick="window.localName()">Clicking me should show an alert<div>
-
-

自身で管理しないスクリプトを連結しない

-

ファイルレベルで使用される ECMAScript の "use strict;" ディレクティブは、ファイル全体に適用されます。このため、非 Strict モードの動作に依存するスクリプトを Strict モードのスクリプトに付加すると、スクリプトが動作しなくなります。

-

使用する JavaScript ライブラリの作者に、上記のガイドラインに従っているかを確認する

-

好みのライブラリの開発者に、上記のガイドラインに従うことを提案しましょう。彼らが従わない場合、ライブラリが将来も問題を起こさないとは信頼できません。残念ながら、ライブラリはこれらのガイドラインに逆らっています。

-

検出

-

特定の機能の検出

-

ある機能を用いようとするとき、可能であればその機能を見つけるためにオブジェクト検出を行ってください。簡単な例として、body.style に "filter" があるかのテストが真になるブラウザは必ず Microsoft Internet Explorer であり、それゆえ例えばイベントハンドラで window.event オブジェクトが利用できるとは考えないでください。また、ある一定の DOM 機能をサポートしているブラウザは他の機能、特に非標準の DOM 機能もサポートしているとは考えないでください。あるいは逆に、他の機能をサポートしないとも考えないでください。例えば、script 要素で onload をサポートするブラウザは onreadystatechange をサポートしないと考えてはいけません。各ブラウザの動作が収束することにより、機能は追加や削除されます。また、不具合の修正も行います。これら 3 点は過去に発生しており、また今後も発生するでしょう。

-

従ってある機能の存在有無と別の機能の存在有無に関連はありませんので、ある機能やオブジェクトの検出結果から別のことを予測しないでください。

-

UA 検出を行わない

-

これはある機能 (ユーザエージェント (UA) 文字列内に特定の文字列が含まれていること) が別の機能の有無を暗に示すと考えられている、特に一般的な実例です。

-

UA 検出が必要な場合は、過去のブラウザのバージョンにのみ行う

-

UA 検出に頼る必要がある場合は、特定のブラウザの過去のバージョンに対して用いてください。始めに、未知のブラウザおよびあなたがテストで用いているブラウザの現行バージョンと将来のバージョン向けのデフォルトのコードパスがあります。そして、デフォルトのコードパスが特定のブラウザの過去のバージョンで動作せず、またそのコードパスで機能の欠落を検出することで問題点を発見できないときは、該当する過去のバージョンのブラウザを検出することでそのブラウザ向けのハックを追加してかまいません。

-

この提案において、"現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。例えばあなたのデフォルトのコードパスが Firefox Aurora で適切に動作するが、Firefox Beta や最新の release 版では不具合があるためにコードが動作しない場合は、テストを行った Aurora の Firefox バージョン番号を "現行" とみなし、一般向けに公開されていないものであっても Beta のバージョンを "過去" のバージョンと考えてください。

-

異なるブラウザ向けに分離したコードパスはむやみに作成しない

-

関係のあるコードパスの一つがすべてのブラウザで正しく動作するのに、わざわざオブジェクト検出や UA 検出に基づいて異なるコードを実行することは行わないでください。各ブラウザの動作がお互い収束するように変更され、そのために代替のコードパスを設定していたあなたのサイトが正常に動作しなくなってしまう可能性があります。

-

テストの実施

-

すべての主要なエンジンについてテストを行う

-

コードは少なくとも Firefox、Chrome または Safari (これらは同じ WebKit エンジンを基にしているため)、Opera、Internet Explorer でテストを行ってください。すべての現行ブラウザや未知のブラウザ向けに単一のコードパスを持つためこの提案に従えば、そのコードパスがすべての主要なエンジンで動作することをテストすることで、コードが将来にわたって動作する可能性がとても高くなります。

-

時々、各ブラウザがある機能を若干異なる形で実装します。主要なエンジンすべてで動作する単一のコードパスが得られた場合は、あなたが使用している機能の動作は各ブラウザ間で既に収束していることを意味します。一方、各ブラウザの動作が完全には収束していない場合は、どのエンジンの標準動作を支持するかが判明することに関係なくコードが動作します。

-

ブラウザ独自の機能や接頭辞

-

現行あるいは将来のバージョンのブラウザを目標にするハックを行わない

-

これは、現在ある不具合間の相関関係が将来の不具合間の相関関係を暗に示すと考えられている一般的な事例です。現行バージョンでは解決している不具合に関するハックを、過去のバージョンのブラウザに対して適用することは問題ありません。ブラウザが不具合 X を修正すると、不具合 X が存在するリリースすべてには不具合 Y もあることが確実にわかり、不具合 X が存在することを不具合 Y の回避策の適用基準として用いることができます。

-

この提案において、前出の UA 検出でのアドバイスのように "現行" とはあなたがテストを行った最新のバージョンのブラウザを指します。

-

最新の非標準機能に依存することを避ける

-

接頭辞ありの機能であっても、それを使用することは危険です。仕様書の進展に伴い、ブラウザの接頭辞ありの実装が仕様書に追随して変更されることがあります。またその機能が標準化されると、接頭辞ありのバージョンは削除されるでしょう。

-

接頭辞が付加された非標準の機能は、実験やフィードバックを行うためにブラウザの開発者が提供しているものであり、一般に展開することを意味していません。これらの機能を使うことを選択した場合は、機能の変更に伴って頻繁にサイトの更新が必要であることを覚悟してください。

-

(標準化されていても) 広く実装されていない最新機能を用いる際は縮退処理のテストを行う

-

あなたが用いている機能を実装していないブラウザ でどう動作するか (そのようなブラウザを Web サイトの業務で日常使用していない場合は特に)、必ずテストを行ってください。

-

ベンダー接頭辞が付加されている機能は、過去のバグが多いバージョンを目的とする場合を除き使用しない

-

ベンダー接頭辞が付加されている機能は、その動作が将来変更されるかもしれません。ブラウザがある機能を接頭辞なしで公開しても、利用可能であれば接頭辞なし版を常に使用するようにすることで、過去のリリース向けに接頭辞あり版を使用することができます。良い例として、make-it-pretty プロパティの "sometimes" 値について接頭辞あり版とは異なる動作を接頭辞なし版に実装して公開した、-vnd CSS 接頭辞を用いるブラウザベンダー向けの記述を示します:

-
<style>
-  .pretty-element {
-    -vnd-make-it-pretty: sometimes;
-    make-it-pretty: sometimes;
-  }
-</style>
-
-

上記の例で、規則中の宣言の順番は重要です。接頭辞のないものは、最後に置くことが必要です。

-

少なくとも一つのブラウザがサポートするまで、接頭辞のない CSS プロパティや API は使用しない

-

何らかの機能について接頭辞なし版がある程度広くサポートされるまでは、その動作が突然変更されることがあります。特に、実際に接頭辞なし版をサポートしているブラウザがない機能は使用しないでください。接頭辞あり版の文法と完成版の文法が同じであると考えてはいけません。

-

良好なコード

-

> の欠落を防ぐ

-

検証ツールを用いることがこれを確実にする方法の一つですが、あなたの Web サイト全体を検証しないとしてもすべての > 文字が置かれていることを確認してください。> が欠落していると、後ろのタグの名前が前のタグの属性であると判断されて予期せぬ状況に陥る場合があります。これはしばらくの間は動作するかもしれませんが、仕様書でその属性に意味が与えられると動作しなくなります。以下の例は HTML5 をサポートしないブラウザでは動作しますが、HTML5 をサポートするブラウザでは動作しません:

-
<form action="http://www.example.com">
-  <input type="submit" value="Submit the form"
-</form>
-
-

これは input タグで > が欠落しているためです。

-

コード中で動作しない実験的な部分は残さない

-

何か行いたいことがあって CSS プロパティを使用してみたが効果がなかった場合、そのプロパティは削除してください。将来、予期しない動作が発生する可能性があります。

-

{{ languages( { "en": "en/Web_development/Writing_forward-compatible_websites"} ) }}

diff --git a/files/ja/webapi/index.html b/files/ja/webapi/index.html deleted file mode 100644 index 1df9691cb1..0000000000 --- a/files/ja/webapi/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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/webapi/proximity/index.html b/files/ja/webapi/proximity/index.html deleted file mode 100644 index 633d2a7cfb..0000000000 --- a/files/ja/webapi/proximity/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Proximity Events -slug: WebAPI/Proximity -tags: - - API - - Experimental - - Proximity Events - - Reference -translation_of: Web/API/Proximity_Events ---- -

{{DefaultAPISidebar("Proximity Events")}}{{ SeeCompatTable }}

- -

proximity events は、ユーザーが端末の近くにいるときを知るのに便利な手段です。これらのイベントは近接度の変化への対応、例えばユーザーがスマートフォンを耳の近くに持ってきて電話をしているときにスクリーンを休止することを可能にします。

- -
-

メモ: この API は端末に近接センサーを必要とすることが明らかです。近接センサーは、たいていモバイル端末のみで使用できます。センサーを搭載していない端末もイベントをサポートするかもしれませんが、イベントは発生しません。

-
- -

Proximity Event

- -

端末の近接センサーが端末と物体との距離の変化を検出すると、それをブラウザーに通知します。ブラウザーが通知を受けると、あらゆる変化について {{domxref("DeviceProximityEvent")}} イベントが、またよりおおざっぱな変化の場合に {{domxref("UserProximityEvent")}} イベントが発生します。

- -

このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("deviceproximity")}} または {{event("userproximity")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondeviceproximity")}} プロパティまたは {{domxref("window.onuserproximity")}} プロパティに接続することにより、window オブジェクトレベルで取得できます。

- -

イベントを取得すると、イベントオブジェクトでさまざまな種類の情報にアクセスできます。

- -
    -
  • {{domxref("DeviceProximityEvent")}} イベントは、端末と物体との距離に一致する値を {{domxref("DeviceProximityEvent.value","value")}} プロパティで提供します。また、端末が何らかの物体を検出できる最短距離および最長距離を、{{domxref("DeviceProximityEvent.min","min")}} プロパティおよび {{domxref("DeviceProximityEvent.max","max")}} プロパティで提供します。
    • -
  • {{domxref("UserProximityEvent")}} イベントは、距離の大まかな近さを真偽値で表します。{{domxref("UserProximityEvent.near")}} は物体が近いときに true に、また物体が遠いときに false になります。
    • -
- -

例

- -
window.addEventListener('userproximity', function(event) {
-  if (event.near) {
-    // スクリーンの電源を切る
-    navigator.mozPower.screenEnabled = false;
-  } else {
-    // スクリーンの電源を入れる
-    navigator.mozPower.screenEnabled = true;
-  }
-});
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Proximity Events', '', 'Proximity Events')}}{{Spec2('Proximity Events')}}初回定義
- -

ブラウザーの対応

- -

DeviceProximityEvent

- - - -

{{Compat("api.DeviceProximityEvent")}}

- -

UserProximityEvent

- - - -

{{Compat("api.UserProximityEvent")}}

- -

関連情報

- -
    -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{event("deviceproximity")}}
    • -
  • {{event("userproximity")}}
    • -
diff --git a/files/ja/webapi/using_light_events/index.html b/files/ja/webapi/using_light_events/index.html deleted file mode 100644 index be70ad2612..0000000000 --- a/files/ja/webapi/using_light_events/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Ambient Light Events -slug: WebAPI/Using_Light_Events -tags: - - Ambient Light -translation_of: Web/API/Ambient_Light_Events ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

ambient light event は、光の強さの変化をウェブページやアプリケーションに気づかせるのに便利な手段です。これによりユーザーインターフェイスのコントラストを変えたり写真を撮るために必要な露出時間を変えたりするなど、ウェブページやアプリケーションが光量の変化に対応できるようになります。

- -

Light Event

- -

端末の光センサーが光量の変化を検出すると、それをブラウザーに通知します。ブラウザーがその通知を受け取ると、正確な光の強度に関する情報を提供する {{domxref("DeviceLightEvent")}} イベントを発生させます。

- -

このイベントは {{domxref("EventTarget.addEventListener","addEventListener")}} メソッド (イベント名 {{event("devicelight")}} を使用) を使用するか、イベントハンドラーを {{domxref("window.ondevicelight")}} プロパティに接続することにより、 window オブジェクトレベルで取得できます。

- -

イベントを取得するとイベントオブジェクトの {{domxref("DeviceLightEvent.value")}} プロパティを通して、{{interwiki("wikipedia", "ルクス")}}で表した照度にアクセスできます。

- -

例

- -
if ('ondevicelight' in window) {
-  window.addEventListener('devicelight', function(event) {
-    var body = document.querySelector('body');
-    if (event.value < 50) {
-      body.classList.add('darklight');
-      body.classList.remove('brightlight');
-    } else {
-      body.classList.add('brightlight');
-      body.classList.remove('darklight');
-    }
-  });
-} else {
-  console.log('devicelight event not supported');
-}
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("AmbientLight", "", "Ambient Light Events")}}{{Spec2("AmbientLight")}}初回定義
- -

ブラウザーの対応

- - - -

{{Compat("api.DeviceLightEvent")}}

- -

関連情報

- -
    -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{event("devicelight")}}
    • -
diff --git a/files/ja/width/index.html b/files/ja/width/index.html deleted file mode 100644 index aad9d6d606..0000000000 --- a/files/ja/width/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: width -slug: width -tags: - - Disambiguation -translation_of: Web/CSS/width -translation_of_original: width ---- -

width は多くの文脈で用いられます。

- -

CSS

- -
    -
  • CSS {{cssxref("width")}} プロパティ
    • -
- -

DOM

- -
    -
  • {{domxref("document.width")}}
    • -
  • {{domxref("table.width")}}
    • -
  • {{domxref("element.style","element.style.width")}}
    • -
- -

SVG

- - - -

XUL

- - - -

これはあいまい性除去のページです — 同じ題名を共有している可能性のあるページをリストして案内を補助します。 記事のリンクからここに来たのであれば、戻って意図するページに直接行くように修正することもできます。

diff --git a/files/ja/xmlserializer/index.html b/files/ja/xmlserializer/index.html deleted file mode 100644 index 685fdcc100..0000000000 --- a/files/ja/xmlserializer/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: XMLSerializer -slug: XMLSerializer -tags: - - Converting - - DOM Parsing - - Interface - - Parsing - - Reference - - Serialization - - Serializing - - XML - - XML Serializer - - conversion -translation_of: Web/API/XMLSerializer ---- -
{{APIRef("XMLSerializer")}}
- -

XMLSerializer インターフェースは、{{Glossary("DOM")}} ツリーを表す XML 文字列を構築するための {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} メソッドを提供します。

- -

メソッド

- -
-
{{domxref("XMLSerializer.serializeToString", "serializeToString()")}}
-
文字列の形にシリアライズされたサブツリーを返します。
-
{{domxref("XMLSerializer.serializeToStream", "serializeToStream()")}} {{ non-standard_inline }}{{ deprecated_inline }}
-
指定した要素をルートとするサブツリーが、指定した文字セットを使ったバイトストリームにシリアライズされます。
-
- -

例

- -

XML を文字列にシリアライズ

- -

最初の基本的な例は、ドキュメント全体を XML を含む文字列にシリアライズするだけです。

- -
 var s = new XMLSerializer();
- var d = document;
- var str = s.serializeToString(d);
- saveXML(str);
- -

このコードは、新しい XMLSerializer オブジェクトを作成し、シリアライズされる {{domxref("Document")}} を {{domxref("XMLSerializer.serializeToString", "serializeToString()")}} に渡します。これは、渡した document と同等の XML を返します。

- -

XML を基にした DOM にノードを挿入する

- -

この例は、{{domxref("Element.insertAdjacentHTML()")}} メソッドを使用して新しい DOM {{domxref("Node")}} を {{domxref("Document")}} の body に挿入します。これは、{{domxref("Element")}} オブジェクトをシリアライズすることにより作成された XML を基にしています。

- -
-

注記: 実際は、{{domxref("Document.importNode", "importNode()")}} メソッドを呼び出して新しいノードを DOM に挿入する代わりに、以下のいずれかのメソッドを呼び出して DOM ツリーに追加することになるでしょう:

- -
    -
  • {{domxref("Document")}} および {{domxref("Element")}} メソッド {{domxref("ParentNode.append", "append()")}} および {{domxref("ParentNode.prepend", "prepend()")}}
    • -
  • {{domxref("ChildNode.replaceWith", "Node.replaceWith()")}} メソッド (既存のノードを新しいノードと置き換えるため)
    • -
  • {{domxref("Document.insertAdjacentElement()")}} および {{domxref("Element.insertAdjacentElement()")}} メソッド
    • -
-
- -

insertAdjacentHTML() は文字列を受け入れるが、2 番目の引数として Node を受け入れないため、XMLSerializer を使用して先にノードを文字列に変換します。

- -
var inp = document.createElement('input');
-var XMLS = new XMLSerializer();
-var inp_xmls = XMLS.serializeToString(inp); // まず DOM ノードを文字列に変換
-
-// 新たに作成されたノードを document の body に挿入
-document.body.insertAdjacentHTML('afterbegin', inp_xmls);
- -

このコードは、{{domxref("Document.createElement()")}} を呼び出して新しい {{HTMLElement("input")}} 要素を作成し、{{domxref("XMLSerializer.serializeToString", "serializeToString()")}} を使用して XML にシリアライズします。

- -

完了したら、insertAdjacentHTML() を使用して <input> 要素を DOM に挿入します。

- -

仕様

- - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName('DOM Parsing', '#the-xmlserializer-interface', 'XMLSerializer')}}{{Spec2('DOM Parsing')}}
- -

ブラウザーの実装状況

- -
- - -

{{Compat("api.XMLSerializer")}}

-
- -

関連項目

- - diff --git a/files/ja/xpcom_components_list/index.html b/files/ja/xpcom_components_list/index.html deleted file mode 100644 index 16c218290b..0000000000 --- a/files/ja/xpcom_components_list/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: XPCOM components list -slug: XPCOM_components_list -tags: - - Components - - NeedsContent - - XPCOM - - XPCOM API Reference ---- -

ここにはInterfaces一覧のようなコンポーネントの包括的な一覧を必要としています。 -

-

コンポーネントのアルファベット順の一覧 (未完成)

- -
-
-{{ languages( { "en": "en/XPCOM_components_list", "fr": "fr/Liste_des_composants_XPCOM", "ko": "ko/XPCOM_components_list", "pl": "pl/Lista_komponent\u00f3w_XPCOM" } ) }} diff --git a/files/ja/xpcom_part_1/index.html b/files/ja/xpcom_part_1/index.html deleted file mode 100644 index 63b340fb59..0000000000 --- a/files/ja/xpcom_part_1/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: XPCOM Part 1 -slug: XPCOM_Part_1 ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/xpcom_part_2/index.html b/files/ja/xpcom_part_2/index.html deleted file mode 100644 index 7866ab4b6c..0000000000 --- a/files/ja/xpcom_part_2/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: XPCOM Part 2 -slug: XPCOM_Part_2 ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/xpcom_part_3/index.html b/files/ja/xpcom_part_3/index.html deleted file mode 100644 index da0fc2b7bf..0000000000 --- a/files/ja/xpcom_part_3/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: XPCOM Part 3 -slug: XPCOM_Part_3 ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/xpcom_part_4/index.html b/files/ja/xpcom_part_4/index.html deleted file mode 100644 index 9a2dbb1498..0000000000 --- a/files/ja/xpcom_part_4/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: XPCOM Part 4 -slug: XPCOM_Part_4 ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/xpcom_part_5/index.html b/files/ja/xpcom_part_5/index.html deleted file mode 100644 index f255b32722..0000000000 --- a/files/ja/xpcom_part_5/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: XPCOM Part 5 -slug: XPCOM_Part_5 ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ja/xpcom_plans/index.html b/files/ja/xpcom_plans/index.html deleted file mode 100644 index df1de9d364..0000000000 --- a/files/ja/xpcom_plans/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: XPCOM plans -slug: XPCOM_plans -tags: - - XPCOM ---- -

{{ Outdated("このページは 2001 年 8 月を最後に更新されておらず、歴史的重要性を残すにとどまるでしょう。") }}

-

もっとも重要な目標: Mozilla の船出。

-

完了

-

XPCOM のもっとも重要な目標は、何年も前から述べられているとおり、ブラウザを船出させることでした。そこまでこぎつけました。そして今、私たちは複数のバージョンの Mozilla ブラウザを得ています。 Netscape 6.x、Galleon、など。最近数週間を通して、次に何をすべきかについて XPCOM を使っているさまざまなグループと意見交換をしました。使用者たちは API セットの変更に追従するための労力を費やしたくない、というひとつのことが、くっきりと明瞭になりました。これらの議論から、私たちは Mozilla 1.0 リリースへの迅速なアプローチとして、要求される XPCOM インタフェースに対して 最小主義的なアプローチをすべきだと信じます (例：どうしても必要な最小限の API だけをフリーズ (固定) する)。

-

安定した API を危機的なほど必要としている二つの利用者は、プラグインと組み込みです。いずれも XPCOM の初期化、停止、コンポーネントとサービスの管理を可能とする XPCOM の API のセットに興味を持っています。 Mozilla 1.0 のためには、XPCOM は最低限としてこの機能性を得られる API をフリーズすべきと信じています。

-

私たちは組み込みグループで作業してきています。そして 必要と考えられるインタフェースのこのリストを提示しました。(これらのインタフェースのいくつかは XPCOM には当てはまらないことに注意) もし、必要と思われるのにこのリストから抜け落ちている XPCOM インタフェースが見つかったら、私 Doug Turner 宛にメールをするか、XPCOM ニュースグループ に投稿するかをぜひお願いします。

-

XPCOM の Mozilla 1.0 への道

-

もっとも重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。

-

私たちのリスト上の現在のインタフェースリストは、基本的な COM の機能を含んでいます。スレッド処理、リフレクション、多くのデータ構造など、ほとんどの XPCOM の機能は Mozilla 1.0 を前にしたこの時間枠において、フリーズされないでしょう。

-

この SDK はインタフェースのセットと接続ライブラリをフリーズすることも含むでしょう。このインタフェースのセットは、組み込みとプラグインの要求によって定義されてきました。これらのインタフェースは以下のものを含んでいます:

-
  • nsIClassInfo
  • nsIComponentManager
  • nsIDirectoryService
  • nsIDirectoryServiceProvider
  • nsIFactory
  • nsIFile
  • nsIInputStream
  • nsIInterfaceRequestor
  • nsILocalFile
  • nsIMemory
  • nsIModule
  • nsIObserver
  • nsIOutputStream
  • nsIProperties
  • nsIServiceManager
  • nsISimpleEnumerator
  • nsISupports
  • nsIWeakReference
    • -
-

接続ライブラリは、気軽に使えるクラスとマクロのセット、そしてフリーズされていないクラスで構成されます。これをコンポーネント開発者は、例えば XPCOM にリンクしなくてよい nsCOMPtr の構成要素を活用することができます。次に重要な目標は XPCOM 中核の機能へのインタフェースのフリーズです。

-

ひとたび、フリーズされたインタフェースのセットを得ました。これらのインタフェースの実装の内部の起動・終了・スレッド処理などの問題に言及しなくてはいけません。トラッキングバグ {{ Bug(101976) }} の追跡で言及されるべき知られた問題を一覧とすることができます。

-

Mozilla 1.0 以降: XPCOM の改良

-

XPCOM 改良のための全体的な計画は、小さくすること、シンプルにすること、クリーンにすること、必要な機能によりチューニングすること、より関係する標準に沿わせること、などを中心に展開しています。 XPCOM を軽く保つほど、XPCOM のデバッグ、移植、保守が楽になり、アプリケーションの組み込みの手間が減ります。そのためには、それほどには活用されない XPCOM の機能はもう必要ないでしょう。単独のクライアントが使うためだけに存在するものは、検証済みでなくてはならず、願わくば根絶されるべきです。

-

XPCOM の機能の大きな部分が、C++ クライアントへ向けられています。標準 C++ ライブラリを使った組み込みアプリケーションを期待することができます。 XPCOM の機能が標準 C++ ライブラリによって提供される類似のサービスと重なっている場所では、 API と機能を標準ライブラリのそれへ変換したいです。いずれは、クライアントは標準ライブラリから実装を入手できるようになり、API が取り除かれるようになります。

-

標準ライブラリから提供されるのではないこれらの機能のために、私たちは適切に標準ライブラリと互換を持った API を作りたいのです。例えば、XPCOM の container は標準アルゴリズムとともに働くべきでしょう。

-

参考資料

-
  • 既知の作業
  • {{ Bug(98278) }} - XPCOM API 変更についてのメタバグ
    • -
-
-

原文書の情報

-
  • 著者: 不明
  • 最終日: October 30, 2001
  • 著作権: Portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a Creative Commons license | 詳細.
    • -
-
diff --git a/files/ja/xpinstall_api_reference/installtrigger_object/index.html b/files/ja/xpinstall_api_reference/installtrigger_object/index.html deleted file mode 100644 index 6b2353e403..0000000000 --- a/files/ja/xpinstall_api_reference/installtrigger_object/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: InstallTrigger オブジェクト -slug: XPInstall_API_Reference/InstallTrigger_Object ---- -

 

-

InstallTrigger

-

ソフトウェアのダウンロードとインストールをする引き金となる Web ページ上のスクリプトには、InstallTrigger オブジェクトを使用します。

-

概要

-

とても簡単なインストール方法は、インストールスクリプトに必要な InstallTrigger オブジェクトを使用するだけです。

-

複雑なインストール方法では、 Install オブジェクトや File オブジェクトを使用する必要があります。どちらの場合も Web ページスクリプトを作成してインストール処理の引き金にします。そのページ内の InstallTrigger メソッドが、指定した XPI ファイルをダウンロードし、その XPI ファイルのトップレベルに置かれた install.js スクリプトを起動する "引き金" になります。

-

InstallTrigger オブジェクト上の最初のメソッドは install です。これは、XPI ファイル形式にまとめられた一つまたはそれ以上のソフトウェアパッケージをダウンロードし、インストールします。以下は、Web ページ上からインストールする引き金の基本的な例です:

-
xpi={'XPInstall Dialog Display Name':'simple.xpi'};
-InstallTrigger.install(xpi);
-
-

また、InstallTrigger オブジェクトをソフトウェアのバージョンチェックに使用したり、Netscape 6 や Mozilla のテーマ、言語パックをインストールしたり、 install オブジェクトを使用して複数のパッケージをインストールすることもできます。

diff --git a/files/ja/xsltprocessor/index.html b/files/ja/xsltprocessor/index.html deleted file mode 100644 index ca2a707fb7..0000000000 --- a/files/ja/xsltprocessor/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: XSLTProcessor -slug: XSLTProcessor -translation_of: Web/API/XSLTProcessor -translation_of_original: XSLTProcessor ---- -

XSLTProcesor は、Mozilla の XSLT エンジンへのインタフェースを提供するオブジェクトです。特権のない JavaScript で利用可能です。

- - -- cgit v1.2.3-54-g00ecf