diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index 420ece9b848453..db6aa54875f824 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -32,7 +32,7 @@ jobs: run: | # Use the GitHub API to get the list of changed files # documentation: https://docs.github.com/rest/commits/commits#compare-two-commits - DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${BASE_SHA}...${HEAD_SHA} \ --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') # filter out files that are not markdown DIFF_DOCUMENTS=$(echo "${DIFF_DOCUMENTS}" | egrep -i ".*\.md$" | xargs) @@ -96,7 +96,7 @@ jobs: # https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#multiline-strings EOF="$(openssl rand -hex 8)" - files_to_lint="${{ env.DIFF_DOCUMENTS }}" + files_to_lint="${DIFF_DOCUMENTS}" echo "Running markdownlint --fix" MD_LINT_FAILED=false @@ -160,7 +160,7 @@ jobs: env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | - echo "${{ env.MD_LINT_LOG }}" | \ + echo "${MD_LINT_LOG}" | \ reviewdog \ -efm="%f:%l:%c %m" \ -efm="%f:%l %m" \ @@ -172,8 +172,8 @@ jobs: if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' run: | echo -e "\nLogs from markdownlint:" - echo "${{ env.MD_LINT_LOG }}" + echo "${MD_LINT_LOG}" echo -e "\nLogs from front-matter linter:" - echo "${{ env.FM_LINT_LOG }}" + echo "${FM_LINT_LOG}" echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments." exit 1 diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 9d764782ab2c92..2f9710626f4117 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -42,7 +42,7 @@ jobs: run: | # Use the GitHub API to get the list of changed files # documentation: https://docs.github.com/rest/commits/commits#compare-two-commits - DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }} \ + DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${BASE_SHA}...${HEAD_SHA} \ --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename') # filter out files that are not markdown files @@ -112,23 +112,23 @@ jobs: working-directory: ${{ github.workspace }}/mdn/content run: | - mkdir -p ${{ env.BUILD_OUT_ROOT }} + mkdir -p ${BUILD_OUT_ROOT} # Don't use `yarn build` (from mdn/content) because that one hardcodes # the BUILD_OUT_ROOT and CONTENT_ROOT env vars. - node node_modules/@mdn/yari/build/cli.js ${{ env.GIT_DIFF_CONTENT }} + node node_modules/@mdn/yari/build/cli.js ${GIT_DIFF_CONTENT} echo "Disk usage size of build" - du -sh ${{ env.BUILD_OUT_ROOT }} + du -sh ${BUILD_OUT_ROOT} # Save the PR number into the build - echo ${{ github.event.number }} > ${{ env.BUILD_OUT_ROOT }}/NR + echo ${{ github.event.number }} > ${BUILD_OUT_ROOT}/NR # Download the raw diff blob and store that inside the build # directory. # The purpose of this is for the PR Review Companion to later # be able to use this raw diff file for the benefit of analyzing. - wget https://github.com/${{ github.repository }}/compare/${{ env.BASE_SHA }}...${{ env.HEAD_SHA }}.diff -O ${{ env.BUILD_OUT_ROOT }}/DIFF + wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF # Set the output variable so the next job could skip if there are no assets echo "has_assets=true" >> "$GITHUB_OUTPUT" @@ -137,9 +137,9 @@ jobs: if: ${{ env.GIT_DIFF_CONTENT }} run: | # Exclude the .map files, as they're used for debugging JS and CSS. - rsync -a --exclude "*.map" ${{ github.workspace }}/mdn/content/node_modules/@mdn/yari/client/build/ ${{ env.BUILD_OUT_ROOT }} + rsync -a --exclude "*.map" ${{ github.workspace }}/mdn/content/node_modules/@mdn/yari/client/build/ ${BUILD_OUT_ROOT} # Show the final disk usage size of the build. - du -sh ${{ env.BUILD_OUT_ROOT }} + du -sh ${BUILD_OUT_ROOT} - uses: actions/upload-artifact@v4 if: ${{ env.GIT_DIFF_CONTENT }} @@ -154,9 +154,9 @@ jobs: CONTENT_TRANSLATED_ROOT: ${{ github.workspace }}/files working-directory: ${{ github.workspace }}/mdn/content run: | - echo ${{ env.GIT_DIFF_FILES }} + echo ${GIT_DIFF_FILES} - yarn filecheck ${{ env.GIT_DIFF_FILES }} + yarn filecheck ${GIT_DIFF_FILES} review: needs: tests diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8568bf437711a7..8513c932dedfb0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -34,7 +34,7 @@ See the [Creating a pull request](#creating-a-pull-request) for more details on If you're not certain of the changes that you want to make, [get in touch with us][]! -> **Note:** You can click the **View the source on GitHub** or **Edit the page on GitHub** link at the bottom of an MDN page to jump directly to the page source on GitHub. +> **Note:** You may click the **View this page on GitHub** or **Report a problem with this content** link at the bottom of an MDN page, to either jump directly to the page source or raise an issue on GitHub. ### Forking and cloning the repository diff --git a/docs/ko/guides/macro-guide.md b/docs/ko/guides/macro-guide.md index 2ccd4d0ac066c1..a874074acb4f31 100644 --- a/docs/ko/guides/macro-guide.md +++ b/docs/ko/guides/macro-guide.md @@ -29,5 +29,3 @@ EmbedLiveSample/MacroLiveSampleError 오류 찾는 [스크립트 링크 참고]( ## 매크로 수정 및 번역 MDN은 초창기에 [kuma](https://github.com/mdn/kuma) 플랫폼으로 MDN 웹 문서를 구동해왔습니다. 그 당시 사용한 많은 매크로들이 레거시로 남아 있습니다. 레거시로 남은 매크로를 [Kumascript](https://github.com/mdn/kumascript)라고 부릅니다. 현재는 [yari 저장소 내의 kumascript 폴더](https://github.com/mdn/yari/tree/main/kumascript)로 대체되어 사용되고 있습니다([참고](https://egas.tistory.com/168#%EB%AF%B8%EC%82%AC%EC%9A%A9-macro-%EC%A0%9C%EA%B1%B0)). - -만약 `{{DOMAttributeMethods}}` 매크로를 수정하자고 한다면 `kumascript/macros/DOMAttributeMethods.ejs`를 확인하면 됩니다([관련 PR](https://github.com/mdn/yari/pull/10502)). diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index ad5291f6fb8ce4..808aa78ab3c224 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -1721,10 +1721,10 @@ /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_server /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket /es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers /es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API /es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API -/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/clearTimeout +/es/docs/Web/API/Window.clearTimeout /es/docs/Web/API/Window/clearTimeout /es/docs/Web/API/Window.navigator /es/docs/Web/API/Window/navigator /es/docs/Web/API/Window.onbeforeunload /es/docs/Web/API/Window/beforeunload_event -/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/setTimeout +/es/docs/Web/API/Window.setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/API/Window/applicationCache /es/docs/orphaned/Web/API/Window/applicationCache /es/docs/Web/API/Window/dialogArguments /es/docs/orphaned/Web/API/Window/dialogArguments /es/docs/Web/API/WindowBase64.atob /es/docs/Web/API/Window/atob @@ -1736,18 +1736,18 @@ /es/docs/Web/API/WindowEventHandlers/onpopstate /es/docs/Web/API/Window/popstate_event /es/docs/Web/API/WindowOrWorkerGlobalScope/atob /es/docs/Web/API/Window/atob /es/docs/Web/API/WindowOrWorkerGlobalScope/caches /es/docs/Web/API/Window/caches -/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /es/docs/Web/API/clearInterval -/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/clearTimeout -/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /es/docs/Web/API/createImageBitmap +/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /es/docs/Web/API/Window/clearTimeout +/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /es/docs/Web/API/Window/createImageBitmap /es/docs/Web/API/WindowOrWorkerGlobalScope/fetch /es/docs/Web/API/Window/fetch /es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /es/docs/Web/API/Window/indexedDB /es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /es/docs/Web/API/Window/isSecureContext -/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /es/docs/Web/API/setInterval -/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /es/docs/Web/API/setTimeout -/es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/clearInterval -/es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/clearTimeout -/es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/setInterval -/es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/setTimeout +/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /es/docs/Web/API/Window/setTimeout +/es/docs/Web/API/WindowTimers/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/WindowTimers/clearTimeout /es/docs/Web/API/Window/clearTimeout +/es/docs/Web/API/WindowTimers/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/WindowTimers/setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/API/XMLDocument/async /es/docs/Web/API/XMLDocument /es/docs/Web/API/XMLHttpRequest/FormData /es/docs/Web/API/FormData /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest /es/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest @@ -1755,6 +1755,8 @@ /es/docs/Web/API/atob /es/docs/Web/API/Window/atob /es/docs/Web/API/btoa /es/docs/Web/API/Window/btoa /es/docs/Web/API/caches /es/docs/Web/API/Window/caches +/es/docs/Web/API/clearInterval /es/docs/Web/API/Window/clearInterval +/es/docs/Web/API/clearTimeout /es/docs/Web/API/Window/clearTimeout /es/docs/Web/API/console/assert /es/docs/Web/API/console/assert_static /es/docs/Web/API/console/count /es/docs/Web/API/console/count_static /es/docs/Web/API/console/dir /es/docs/Web/API/console/dir_static @@ -1767,12 +1769,15 @@ /es/docs/Web/API/console/timeEnd /es/docs/Web/API/console/timeEnd_static /es/docs/Web/API/console/trace /es/docs/Web/API/console/trace_static /es/docs/Web/API/console/warn /es/docs/Web/API/console/warn_static +/es/docs/Web/API/createImageBitmap /es/docs/Web/API/Window/createImageBitmap /es/docs/Web/API/crypto_property /es/docs/Web/API/Window/crypto /es/docs/Web/API/event.defaultPrevented /es/docs/Web/API/Event/defaultPrevented /es/docs/Web/API/event.which /es/docs/Web/API/UIEvent/which /es/docs/Web/API/fetch /es/docs/Web/API/Window/fetch /es/docs/Web/API/indexedDB /es/docs/Web/API/Window/indexedDB /es/docs/Web/API/isSecureContext /es/docs/Web/API/Window/isSecureContext +/es/docs/Web/API/setInterval /es/docs/Web/API/Window/setInterval +/es/docs/Web/API/setTimeout /es/docs/Web/API/Window/setTimeout /es/docs/Web/Accesibilidad /es/docs/Web/Accessibility /es/docs/Web/Accesibilidad/Comunidad /es/docs/conflicting/Web/Accessibility /es/docs/Web/Accesibilidad/Understanding_WCAG /es/docs/Web/Accessibility/Understanding_WCAG @@ -2199,13 +2204,17 @@ /es/docs/Web/HTML/microformatos /es/docs/Web/HTML/microformats /es/docs/Web/HTML/Índice /es/docs/Web/HTML /es/docs/Web/HTTP/Access_control_CORS /es/docs/Web/HTTP/CORS +/es/docs/Web/HTTP/Basics_of_HTTP /es/docs/conflicting/Web/HTTP /es/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs /es/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs /es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs /es/docs/Web/URI/Schemes/data /es/docs/Web/HTTP/Basics_of_HTTP/Data_URLs /es/docs/Web/URI/Schemes/data /es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs /es/docs/Web/URI/Schemes/data +/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP /es/docs/Web/HTTP/Evolution_of_HTTP /es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web /es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web /es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web -/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types /es/docs/Web/HTTP/MIME_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types /es/docs/Web/HTTP/MIME_types/Common_types +/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME /es/docs/Web/HTTP/MIME_types/Common_types /es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x /es/docs/Web/HTTP/Connection_management_in_HTTP_1.x /es/docs/Web/HTTP/Peticiones_condicionales /es/docs/Web/HTTP/Conditional_requests /es/docs/Web/HTTP/Sesión /es/docs/Web/HTTP/Session diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 4c761971946439..6f362a29aaf10f 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -5460,6 +5460,14 @@ "modified": "2019-03-23T22:30:46.211Z", "contributors": ["khrizenriquez"] }, + "Web/API/Window/clearInterval": { + "modified": "2019-03-23T22:56:16.485Z", + "contributors": ["Guitxo"] + }, + "Web/API/Window/clearTimeout": { + "modified": "2019-06-18T10:20:27.972Z", + "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"] + }, "Web/API/Window/close": { "modified": "2020-10-15T21:37:07.614Z", "contributors": ["SphinxKnight", "dgrizzla", "Siro_Diaz"] @@ -5472,6 +5480,10 @@ "modified": "2019-03-23T22:45:47.266Z", "contributors": ["julian3xl"] }, + "Web/API/Window/createImageBitmap": { + "modified": "2020-10-15T22:14:17.553Z", + "contributors": ["Bumxu"] + }, "Web/API/Window/crypto": { "modified": "2020-02-12T20:26:38.795Z", "contributors": ["joseluisq", "AlePerez92", "victorjavierss"] @@ -5635,6 +5647,21 @@ "modified": "2019-03-23T22:57:50.655Z", "contributors": ["svera", "pedromagnus", "develasquez"] }, + "Web/API/Window/setInterval": { + "modified": "2020-08-24T18:02:23.092Z", + "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"] + }, + "Web/API/Window/setTimeout": { + "modified": "2019-03-23T23:17:29.378Z", + "contributors": [ + "BubuAnabelas", + "vltamara", + "nauj27", + "fscholz", + "AshfaqHossain", + "VictorArias" + ] + }, "Web/API/Window/showModalDialog": { "modified": "2019-03-18T20:58:55.311Z", "contributors": ["SphinxKnight", "BubuAnabelas", "Grijander81"] @@ -5707,14 +5734,6 @@ "inma_610" ] }, - "Web/API/clearInterval": { - "modified": "2019-03-23T22:56:16.485Z", - "contributors": ["Guitxo"] - }, - "Web/API/clearTimeout": { - "modified": "2019-06-18T10:20:27.972Z", - "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"] - }, "Web/API/console": { "modified": "2019-08-30T08:42:12.082Z", "contributors": ["ajuanjojjj", "fcanellas", "vlguerrero", "chrisdavidmills"] @@ -5767,10 +5786,6 @@ "modified": "2020-10-15T21:53:36.780Z", "contributors": ["juanluisrp", "oderflaj"] }, - "Web/API/createImageBitmap": { - "modified": "2020-10-15T22:14:17.553Z", - "contributors": ["Bumxu"] - }, "Web/API/notification/icon": { "modified": "2019-03-23T22:59:32.492Z", "contributors": ["joxhker"] @@ -5783,21 +5798,6 @@ "modified": "2019-03-23T22:50:37.341Z", "contributors": ["MarkelCuesta", "jezdez", "Davdriver"] }, - "Web/API/setInterval": { - "modified": "2020-08-24T18:02:23.092Z", - "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"] - }, - "Web/API/setTimeout": { - "modified": "2019-03-23T23:17:29.378Z", - "contributors": [ - "BubuAnabelas", - "vltamara", - "nauj27", - "fscholz", - "AshfaqHossain", - "VictorArias" - ] - }, "Web/Accessibility": { "modified": "2020-09-22T14:24:03.363Z", "contributors": [ @@ -9415,34 +9415,6 @@ "DavidPeniafiel" ] }, - "Web/HTTP/Basics_of_HTTP": { - "modified": "2020-04-20T02:59:31.392Z", - "contributors": [ - "obed3113", - "sanxofon", - "Sergio_Gonzalez_Collado", - "cissoid" - ] - }, - "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": { - "modified": "2019-03-23T22:10:11.567Z", - "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"] - }, - "Web/HTTP/Basics_of_HTTP/MIME_types": { - "modified": "2019-11-18T08:03:54.325Z", - "contributors": [ - "IsaacAaron", - "sanxofon", - "Sergio_Gonzalez_Collado", - "kevinmont", - "juanrarodriguez18", - "strattadb" - ] - }, - "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": { - "modified": "2020-02-28T13:10:45.613Z", - "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"] - }, "Web/HTTP/CORS": { "modified": "2020-08-10T16:23:20.546Z", "contributors": [ @@ -9521,6 +9493,10 @@ "omertafox" ] }, + "Web/HTTP/Evolution_of_HTTP": { + "modified": "2019-03-23T22:10:11.567Z", + "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"] + }, "Web/HTTP/Headers": { "modified": "2019-12-10T13:29:15.931Z", "contributors": [ @@ -9719,6 +9695,21 @@ "modified": "2020-10-15T21:59:06.897Z", "contributors": ["JulioMoreyra", "francinysalles", "tonialfaro"] }, + "Web/HTTP/MIME_types": { + "modified": "2019-11-18T08:03:54.325Z", + "contributors": [ + "IsaacAaron", + "sanxofon", + "Sergio_Gonzalez_Collado", + "kevinmont", + "juanrarodriguez18", + "strattadb" + ] + }, + "Web/HTTP/MIME_types/Common_types": { + "modified": "2020-02-28T13:10:45.613Z", + "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"] + }, "Web/HTTP/Messages": { "modified": "2019-11-12T11:40:26.816Z", "contributors": [ @@ -14288,6 +14279,15 @@ "Nukeador" ] }, + "conflicting/Web/HTTP": { + "modified": "2020-04-20T02:59:31.392Z", + "contributors": [ + "obed3113", + "sanxofon", + "Sergio_Gonzalez_Collado", + "cissoid" + ] + }, "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": { "modified": "2019-01-16T15:43:53.805Z", "contributors": [ diff --git a/files/es/web/http/basics_of_http/index.md b/files/es/conflicting/web/http/index.md similarity index 98% rename from files/es/web/http/basics_of_http/index.md rename to files/es/conflicting/web/http/index.md index 89eb19f963bab5..0725dbfefbb528 100644 --- a/files/es/web/http/basics_of_http/index.md +++ b/files/es/conflicting/web/http/index.md @@ -1,6 +1,7 @@ --- title: Conceptos básicos de HTTP -slug: Web/HTTP/Basics_of_HTTP +slug: conflicting/Web/HTTP +original_slug: Web/HTTP/Basics_of_HTTP --- {{HTTPSidebar}} diff --git a/files/es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md b/files/es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md index 99d13a1cb97e16..30191759ae307f 100644 --- a/files/es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md +++ b/files/es/learn/common_questions/design_and_accessibility/common_web_layouts/index.md @@ -1,28 +1,30 @@ --- title: ¿Qué contienen los diseños web comunes? slug: Learn/Common_questions/Design_and_accessibility/Common_web_layouts +l10n: + sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa --- {{QuicklinksWithSubPages("Learn/Common_questions")}} -Cuando diseña páginas para su sitio web es bueno tener una idea de los diseños más comunes. +Cuando diseñas páginas para tú sitio web es bueno tener una idea de los diseños más comunes. - +
@@ -30,9 +32,9 @@ Cuando diseña páginas para su sitio web es bueno tener una idea de los diseño ## Resumen -Existe una razón para que hablemos sobre diseño web. Se comienza con una página en blanco, y se pueden tomar muchas direcciones. Si no tienes mucha experiencia, comenzar con una página en blanco pudiera ser un poco temible. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. +Existe una razón para que hablemos sobre diseño web. Comienzas con una página en blanco, y puedes tomar muchas direcciones. Y si no tienes mucha experiencia, comenzar con una página en blanco puede ser un poco intimidante. Nosotros tenemos alrededor de 25 años de experiencia y te daremos algunas reglas básicas para ayudarte a diseñar tu sitio. -Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web principales son construídas a partir de las siguientes partes: +Aún ahora con el nuevo enfoque de la web para móviles, la mayoría de las páginas web convencionales son construídas a partir de las siguientes partes: - Encabezado - : Visible en la parte superior de cada página de un sitio. Contiene información relevante para todas las páginas (como el nombre del sitio o el logo) y un sistema de navegación fácil de usar. @@ -63,11 +65,11 @@ La verdadera diversión comienza cuando empiezas a mezclarlos todos juntos. Estos son solo ejemplos y eres bastante libre de diseñar las cosas como quieras. Puedes notar que mientras el contenido se puede mover alrededor de la pantalla, siempre se mantiene el encabezado (1) en la parte superior y el pie de página (2) en la parte inferior. Además, el contenido principal (A) es lo más importante, así que dale la mayor parte del espacio. -Estas son reglas del juego que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian en dependencia del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. +Estas son reglas generales que puedes aprovechar. Desde luego, existen diseños complejos y excepciones. En otros artículos discutiremos cómo diseñar sitios responsivos (sitios que cambian dependiendo del tamaño de la pantalla) y sitios cuyos diseños varían entre las páginas. Por ahora, es mejor mantener tu diseño consistente en todo tu sitio. ## Aprendizaje activo -_Aún no hay aprendizaje activo disponible. [Por favor, considere contribuir](/es/docs/MDN/Getting_started)._ +_Aún no hay aprendizaje activo disponible. [Por favor, considere contribuir](/es/docs/MDN/Community/Contributing/Getting_started)._ ## Profundización @@ -83,7 +85,7 @@ Bastante sencillo. Sólo recuerda que muchas personas navegarán por tu sitio de ### Diseño de dos columnas -**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un simple diseño de blog. Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). +Los blogs usualmente tienen dos columnas, una para el contenido principal que es más ancha y otra más estrecha para el contenido secundario (como widgets, niveles de navegación secundarios y anuncios). ![Example of a 2 column layout for a blog](screenshot-blog.jpg) ![A 2 column layout with the main content on the left column](screenshot-blog-overlay.jpg) @@ -91,11 +93,11 @@ En este ejemplo, mira la imagen (B1) justo debajo del encabezado. Está relacion ### Es una trampa -**[MICA](http://www.mica.edu/About_MICA.html)**. Este es un poco más complicado. Parece un diseño de tres columnas... +**[MICA](http://www.mica.edu/About_MICA.html)**. Este es un poco más complicado. Parece un diseño de tres columnas: ![Example of a false 3 columns layout](screenshot-education.jpg) ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg) -...pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}. +Pero no lo es. B1 y B2 flotan alrededor del contenido principal. Recuerda esa palabra "float"--te acordarás cuando empieces a aprender sobre {{Glossary("CSS")}}. ¿Por qué pensarías que es un diseño de tres columnas? Porque la imagen en la parte superior derecha está en forma de L, porque B1 parece una columna sosteniendo el conenido principal desplazado, y porque la "M" y la "I" del logo MICA crean una línea de fuerza vertical. @@ -103,10 +105,10 @@ Este es un buen ejemplo de diseño clásico que admite cierta creatividad. Los d ### Un diseño mucho más complicado -**La [Opera de Paris](https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini).** +**La Opera de Paris**. ![An example of a tricky layout.](screenshot-opera.jpg) ![This is a 2 column layout but the header is overlaping the main content.](screenshot-opera-overlay.jpg) -Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que rompen visualmente el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. +Básicamente un diseño de dos columnas, pero notarás muchos ajustes por aquí y por allá que visualmente rompen el diseño. Especialmente, el encabezado se superposiciona a la imagen del contenido principal. La manera en que la curva del menú del encabezado se une con la curva en el fondo de la imagen, hacen que el encabezado y el contenido principal parezcan un solo componente a pesar de que son técnicamente completamente distintos. El ejemplo de la Opera parece más complejo que el de MICA, pero en realidad es más fácil de implementar (bueno, "fácil" es un concepto relativo). -Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus propios sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. +Como ves, puedes crear maravillosos sitios web incluso sólo con diseños básicos. Échale una mirada a tus sitos web favoritos y pregúntate a ti mismo, ¿dónde está el encabezado, el pie de página, el contenido principal y el contenido secundario? Esto te inspirará para tu propio diseño y te dará buenas pistas sobre para cuáles diseños funciona y para cuáles no. diff --git a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index 636f1e1d72f122..a85ab0474f4bfe 100644 --- a/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/es/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -227,7 +227,7 @@ Obtén más información sobre la consola de JavaScript en diferentes navegadore - [Consola Web de Firefox.](/es/docs/Tools/Web_Console) - [Consola de JavaScript Edge.](https://docs.microsoft.com/es-es/microsoft-edge/devtools-guide-chromium) -- [Consola JavaScript de Chrome.](https://developer.chrome.com/devtools/docs/console) (el inspector de Opera funciona de la misma manera) +- [Consola JavaScript de Chrome.](https://developer.chrome.com/docs/devtools/console/) (el inspector de Opera funciona de la misma manera) - [Consola en Safari.](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1) ## Ve también diff --git a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md index 5cabfcf8c6735e..7c5a0e24cc4b5a 100644 --- a/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md +++ b/files/es/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.md @@ -14,7 +14,13 @@ El objetivo de esta prueba de habilidad es evaluar si has comprendido el artícu ## Texto básico HTML 1 -En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. Intenta actualizando el código más abajo para recrear el ejemplo terminado: +En esta tarea queremos que etiquetes el HTML entregado utilizando elementos semánticos de encabezado y párrafo. + +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1-finished.html", '100%', 300)}} + +Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}} @@ -24,6 +30,10 @@ En esta tarea queremos que etiquetes el HTML entregado utilizando elementos sem En esta tarea necesitamos que cambies la primera lista no marcada en una lista no ordenada, y la segunda en una lista ordenada. +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2-finished.html", '100%', 400)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}} @@ -34,6 +44,10 @@ Intenta actualizando el código más abajo para recrear el ejemplo terminado: En esta tarea se te entrega un párrafo, y tu objetivo es usar algunos elementos en línea para marcar algunas palabras con importancia, y otras con énfasis +El ejemplo terminado debería de tener este aspecto: + +{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3-finished.html", '100%', 120)}} + Intenta actualizando el código más abajo para recrear el ejemplo terminado: {{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}} diff --git a/files/es/learn/javascript/first_steps/silly_story_generator/index.md b/files/es/learn/javascript/first_steps/silly_story_generator/index.md index 92a0268ed8a11b..cc7785cc0ab89e 100644 --- a/files/es/learn/javascript/first_steps/silly_story_generator/index.md +++ b/files/es/learn/javascript/first_steps/silly_story_generator/index.md @@ -1,40 +1,57 @@ --- title: Generador de historias absurdas slug: Learn/JavaScript/First_steps/Silly_story_generator +l10n: + sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa --- {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} En esta evaluación, deberás tomar parte del conocimiento que has aprendido en los artículos de este módulo y aplicarlo a la creación de una aplicación divertida que genere historias aleatorias. ¡Que te diviertas! -| Prerrequisitos: | Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo. | -| --------------- | --------------------------------------------------------------------------------------------------------------- | -| Objetivo: | Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y matrices | +
Prerrequisitos: - Asegúrese que usted ya ha pensado sobre - lo que quiere lograrlo que quieres lograr - con su proyecto web. + con tú proyecto web.
Objetivo: - Aprender dónde colocar las cosas en sus páginas web, y cómo hacerlo. + Aprender dónde colocar las cosas en tus páginas web, y cómo hacerlo.
+ + + + + + + + + + +
Prerrequisitos: + Antes de intentar esta evaluación, deberías haber revisado todos los artículos de este módulo. +
Objetivo: + Probar la comprensión de los fundamentos de JavaScript, como variables, números, operadores, cadenas y arreglos. +
## Punto de partida -Para iniciar esta evaluación, debe: +Para iniciar esta evaluación, debes: -- Vaya y [tome el archivo HTML](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) para el ejemplo y guarde una copia local de este como `index.html` en un directorio nuevo en algún lugar de su computadora. Esto también tiene el CSS para estilizar el ejemplo que contiene. -- Vaya a la [página que contiene el texto sin procesar](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) y manténgalo abierto en una pestaña separada del navegador en algún lugar. Lo necesitarás más tarde. +- Ir y [tomar el archivo HTML](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) para el ejemplo y guarda una copia local de este, como `index.html` en un directorio nuevo en algún lugar de tú computadora. Esto también tiene el CSS para estilizar el ejemplo que contiene. +- Ve a la [página que contiene el texto sin procesar](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt) y mantenlo abierto en una pestaña separada del navegador en algún lugar. Lo necesitarás más tarde. + +Alternativamente, puede usar un sitio como [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). Puedes pegar el HTML, CSS y JavaScript en uno de estos editores en línea. Si el editor en línea que estas utilizando no tiene un panel de JavaScript separado, no dude en colocarlo en línea en un elemento ` + + + + + +

Page title

+ +
+
最初の節
+
二番目の節
+
+ + +``` + +その結果、リードコンテンツである `
` が解釈できるまで、文書内のレンダリングがブロックされ、一貫したビュー遷移を保証できます。 + +また、 [`media`](/ja/docs/Web/HTML/Element/link#media) 属性を `` 要素に指定することもできます。例えば、画面が狭い端末でページを読み込んだ際には、広い画面の端末で読み込む場合よりも、コンテンツのレンダリングをブロックしたい場合があるかもしれません。これは理にかなっています。モバイル端末では、デスクトップの場合よりも、ページが最初に読み込まれた際にはコンテンツが少なく表示されるからです。 + +これは、次の HTML で実現できます。 + +```html + + +``` diff --git a/files/ja/web/api/viewtransition/finished/index.md b/files/ja/web/api/viewtransition/finished/index.md index 5cafe9e9a4130a..5ba5f537edf362 100644 --- a/files/ja/web/api/viewtransition/finished/index.md +++ b/files/ja/web/api/viewtransition/finished/index.md @@ -8,7 +8,7 @@ l10n: {{APIRef("View Transitions API")}}{{SeeCompatTable}} -**`finished`** は {{domxref("ViewTransition")}} インターフェイスの読み取り専用のプロパティで、ビュートランジションのアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス ({{jsxref("Promise")}}) です。 +**`finished`** は {{domxref("ViewTransition")}} インターフェイスの読み取り専用のプロパティで、ビュー遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス ({{jsxref("Promise")}}) です。 `finished` は {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} に渡されたコールバックが例外を発生するか、拒否されてページの新しい状態が作成されなかったことを示すプロミスを返した場合にのみ拒否されます。 @@ -22,7 +22,7 @@ l10n: ### 様々な操作に様々なトランジション -特定のナビゲーションで、固有のトランジションが要求されることがあります。例えば、「戻る」ナビゲーションは「進む」ナビゲーションとは異なるトランジションが必要かもしれません。このようなケースを処理する最良の方法は、 `` 要素にクラス名を設定し、ビュートランジションのアニメーションを使用しながらトランジションを処理し、トランジションが完了したらクラス名を除去することです。 +特定のナビゲーションで、固有のトランジションが要求されることがあります。例えば、「戻る」ナビゲーションは「進む」ナビゲーションとは異なるトランジションが必要かもしれません。このようなケースを処理する最良の方法は、 `` 要素にクラス名を設定し、ビュー遷移のアニメーションを使用しながらトランジションを処理し、トランジションが完了したらクラス名を除去することです。 ```js async function handleTransition() { diff --git a/files/ja/web/api/viewtransition/index.md b/files/ja/web/api/viewtransition/index.md index f4d7fd96973c4c..29e60b32304e32 100644 --- a/files/ja/web/api/viewtransition/index.md +++ b/files/ja/web/api/viewtransition/index.md @@ -7,9 +7,9 @@ l10n: {{APIRef("View Transitions API")}}{{SeeCompatTable}} -**`ViewTransition`** は{{domxref("View Transitions API", "ビュートランジション API", "", "nocode")}} のインターフェースで、ビュートランジションを表し、トランジションが様々な状態（例えば、アニメーションを実行する準備ができている、またはアニメーションが終了した）に達したときに反応する機能、またはトランジションを完全にスキップする機能を提供します。 +**`ViewTransition`** は{{domxref("View Transitions API", "ビュー遷移 API", "", "nocode")}} のインターフェースで、ビュー遷移を表し、トランジションが様々な状態（例えば、アニメーションを実行する準備ができている、またはアニメーションが終了した）に達したときに反応する機能、またはトランジションを完全にスキップする機能を提供します。 -このオブジェクト型は {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} メソッドが返します。 `startViewTransition()` が呼び出されると、[ビュートランジションのプロセス](/ja/docs/Web/API/View_Transitions_API#ビュートランジションのプロセス)で説明されている一連のステップに従います。これは様々なプロミスが履行されるタイミングについても説明しています。 +このオブジェクト型は {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} メソッドが返します。 `startViewTransition()` が呼び出されると、[ビュー遷移のプロセス](/ja/docs/Web/API/View_Transitions_API/Using#ビュー遷移のプロセス)で説明されている一連のステップに従います。これは様々なプロミスが履行されるタイミングについても説明しています。 {{InheritanceDiagram}} @@ -25,11 +25,11 @@ l10n: ## インスタンスメソッド - {{domxref("ViewTransition.skipTransition", "skipTransition()")}} {{Experimental_Inline}} - - : ビュートランジションのアニメーション部分をスキップします。ただし、 DOM を更新する {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} コールバックの実行はスキップしません。 + - : ビュー遷移のアニメーション部分をスキップします。ただし、 DOM を更新する {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} コールバックの実行はスキップしません。 ## 例 -次の例では、 {{domxref("ViewTransition.ready")}} プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュートランジションを発生させ、 {{domxref("Web Animations API", "ウェブアニメーション API", "", "nocode")}} によってアニメーションが指定されています。 +次の例では、 {{domxref("ViewTransition.ready")}} プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュー遷移を発生させ、 {{domxref("Web Animations API", "ウェブアニメーション API", "", "nocode")}} によってアニメーションが指定されています。 ```js // 最後のクリックイベントを保存 @@ -78,7 +78,7 @@ function spaNavigate(data) { } ``` -このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュートランジションの遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。 +このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュー遷移の遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。 ```css ::view-transition-image-pair(root) { diff --git a/files/ja/web/api/viewtransition/ready/index.md b/files/ja/web/api/viewtransition/ready/index.md index ff9ff1feb1d23c..1f4396337bbce9 100644 --- a/files/ja/web/api/viewtransition/ready/index.md +++ b/files/ja/web/api/viewtransition/ready/index.md @@ -8,7 +8,7 @@ l10n: {{APIRef("View Transitions API")}}{{SeeCompatTable}} -**`ready`** は {{domxref("ViewTransition")}} インターフェイスの読み取り専用プロパティで、擬似要素ツリーが作成され、ビュートランジションのアニメーションが始まるときに履行される {{jsxref("Promise")}} です。 +**`ready`** は {{domxref("ViewTransition")}} インターフェイスの読み取り専用プロパティで、擬似要素ツリーが作成され、ビュー遷移のアニメーションが始まるときに履行される {{jsxref("Promise")}} です。 `ready` はトランジションを始められない場合に拒否されます。これは、例えば {{cssxref("view-transition-name")}} が重複していたり、{{domxref("Document.startViewTransition()")}} に渡されたコールバックが拒否されたプロミスを発生させたり返したりするなど、設定ミスが原因である可能性があります。 @@ -18,7 +18,7 @@ l10n: ## 例 -次の例では、 {{domxref("ViewTransition.ready")}} プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュートランジションを発生させ、 {{domxref("Web Animations API", "ウェブアニメーション API", "", "nocode")}} によってアニメーションが指定されています。 +次の例では、 {{domxref("ViewTransition.ready")}} プロミスを使用して、クリック時のユーザーカーソルの位置から発生する独自の円形表示ビュー遷移を発生させ、 {{domxref("Web Animations API", "ウェブアニメーション API", "", "nocode")}} によってアニメーションが指定されています。 ```js // 最後のクリックイベントを保存 @@ -67,7 +67,7 @@ function spaNavigate(data) { } ``` -このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュートランジションの遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。 +このアニメーションには以下の CSS も必要です。既定のアニメーションをオフにし、古いビューと新しいビューの状態が混ざり合わないようにします（新しい状態はビュー遷移の遷移ではなく、古い状態のすぐ上に「ワイプ」されます）。 ```css ::view-transition-image-pair(root) { diff --git a/files/ja/web/api/viewtransition/skiptransition/index.md b/files/ja/web/api/viewtransition/skiptransition/index.md index dc4ba2894e1f1d..74764559673aac 100644 --- a/files/ja/web/api/viewtransition/skiptransition/index.md +++ b/files/ja/web/api/viewtransition/skiptransition/index.md @@ -8,7 +8,7 @@ l10n: {{APIRef("View Transitions API")}}{{SeeCompatTable}} -**`skipTransition()`** は {{domxref("ViewTransition")}} インターフェイスのメソッドで、ビュートランジションのアニメーション部分をスキップしますが、 DOM を更新する {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} コールバックの実行はスキップしません。 +**`skipTransition()`** は {{domxref("ViewTransition")}} インターフェイスのメソッドで、ビュー遷移のアニメーション部分をスキップしますが、 DOM を更新する {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} コールバックの実行はスキップしません。 ## 構文 @@ -27,7 +27,7 @@ skipTransition() ## 例 ```js -// 新しいビュートランジションを開始 +// 新しいビュー遷移を開始 const transition = document.startViewTransition(() => displayNewImage()); // アニメーションをスキップし、DOM を更新する diff --git a/files/ja/web/api/viewtransition/updatecallbackdone/index.md b/files/ja/web/api/viewtransition/updatecallbackdone/index.md index 3a0aca0ee3f3ca..bf86ef4d25e993 100644 --- a/files/ja/web/api/viewtransition/updatecallbackdone/index.md +++ b/files/ja/web/api/viewtransition/updatecallbackdone/index.md @@ -10,7 +10,7 @@ l10n: **`updateCallbackDone`** は {{domxref("ViewTransition")}} インターフェイスの読み取り専用のプロパティで、 {{domxref("Document.startViewTransition()", "document.startViewTransition()")}} のコールバックが返すプロミスが履行されると履行され、拒否されると拒否されるプロミス ({{jsxref("Promise")}}) です。 -`updateCallbackDone` は、ビュートランジションのアニメーションの成否を気にせず、 DOM が更新されたかどうか、いつ更新されたかを知りたい場合に有益です。 +`updateCallbackDone` は、ビュー遷移のアニメーションの成否を気にせず、 DOM が更新されたかどうか、いつ更新されたかを知りたい場合に有益です。 ## 値 @@ -19,7 +19,7 @@ l10n: ## 例 ```js -// 新しいビュートランジションを開始 +// 新しいビュー遷移を開始 const transition = document.startViewTransition(() => displayNewImage()); transition.updateCallbackDone.then(() => { diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md index c4ff470469687a..ad4b952863f50d 100644 --- a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md +++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -177,7 +177,7 @@ Web Audio API は、音声処理に適することを理由に、平面的なバ 2 (Stereo) 1 (Mono) - モノラルからステレオへのダウンミックス。
(L + ステレオからモノラルへのダウンミックス。
(L と R の)両入力チャンネルは等しく結合され、単一出力チャンネル(M)になります。
[!NOTE] + > カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。 + +- **自律型カスタム要素** (Autonomous custom element) は HTML 要素の基底クラスである {{domxref("HTMLElement")}} を継承します。一から動作を実装する必要があります。 -- **自律カスタム要素** (Autonomous custom element) はスタンドアロンです。標準の HTML 要素を継承しません。 HTML 要素としてページ内で記述して使います。例えば、`` あるいは `document.createElement("popup-info")` などです。 -- **カスタマイズされた組み込み要素** (Customized built-in element) は、基礎となる HTML 要素を継承します。これらを作成するには、どの要素を拡張するかを指定する必要があり（上記の例で示した通り）、基本要素を記述し、カスタム要素の名前を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性（またはプロパティ）で指定することで使用します。例えば、 `

` や `document.createElement("p", { is: "word-count" })` のようにします。 +## カスタム要素の実装 -例えば、**カスタマイズされた組み込み要素**である [word-count 要素](https://mdn.github.io/web-components-examples/word-count-web-component/)を定義するには次のようにします。 +カスタム要素は、{{domxref("HTMLElement")}} を拡張する[クラス](/ja/docs/Web/JavaScript/Reference/Classes)（自立型要素の場合）またはカスタマイズするインターフェイス（カスタム組み込み要素の場合）として実装されます。 + +以下は、最小限のカスタム要素で、{{HTMLElement("p")}} 要素をカスタマイズする実装例です。 ```js -customElements.define("word-count", WordCount, { extends: "p" }); +class WordCount extends HTMLParagraphElement { + constructor() { + super(); + } + // 要素の機能をここに書く +} ``` -この要素は `word-count` と呼ばれ、クラスオブジェクトは `WordCount` であり、 {{htmlelement("p")}} 要素を拡張したものになります。これは拡張された要素内で `is` 属性を設定することでのみ構築することができます。例えば、 `

` または -`document.createElement("p", { is: "word-count" })` のようにします。 +最小限の自律型カスタム要素の実装は次のとおりです。 + +```js +class PopupInfo extends HTMLElement { + constructor() { + super(); + } + // 要素の機能をここに書く +} +``` + +クラスの[コンストラクター](/ja/docs/Web/JavaScript/Reference/Classes/constructor)では、初期状態や既定値の設定、イベントリスナーの登録、シャドウルートを作成することなどが可能です。この時点では、要素の属性や子要素を検査したり、新しい属性や子要素を追加したりしないでください。要件のすべてについては、[Requirements for custom element constructors and reactions](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance) を参照してください。 + +### カスタム要素のライフサイクルコールバック -カスタム要素のクラスのオブジェクトは `class` 構文で実装します。例えば、 `WordCount` は次のように構成します。 +カスタム要素が登録されると、ページのコードがカスタム要素と特定の方法でやり取りを行う際に、ブラウザーがそのクラスの特定のメソッドを呼び出します。 仕様書ではこれらのメソッドの実装を「ライフサイクルコールバック」と呼んでいますが、これらのメソッドを提供することで、これらのイベントに応答してコードを実行することができます。 + +カスタム要素のライフサイクルコールバックには、以下のものが含まれます。 + +- `connectedCallback()`: 要素が文書に追加されるたびに呼び出されます。仕様では、開発者は可能な限り、カスタム要素の設定をコンストラクターではなく、このコールバックで実装することを推奨しています。 +- `disconnectedCallback()`: 要素が文書から削除されるたびに呼び出されます。 +- `adoptedCallback()`: 要素が新しい文書に移動されるたびに呼び出されます。 +- `attributeChangedCallback()`: 属性が変更、追加、削除、置換されたときに呼び出されます。このコールバックの詳細については、[属性の変更への応答](#属性の変更への応答)を参照してください。 + +これらのライフサイクルイベントを記録する最小限のカスタム要素は次のとおりです。 ```js -class WordCount extends HTMLParagraphElement { +// 要素のためのクラスを作成 +class MyCustomElement extends HTMLElement { + static observedAttributes = ["color", "size"]; + constructor() { - // コンストラクターでは常に super を最初に呼び出してください + // コンストラクターでは、常に super を最初に呼び出す super(); + } + + connectedCallback() { + console.log("カスタム要素がページに追加されました。"); + } + + disconnectedCallback() { + console.log("カスタム要素がページから除去されました。"); + } - // ここに要素の機能を記述します + adoptedCallback() { + console.log("カスタム要素が新しいページへ移動されました。"); + } + + attributeChangedCallback(name, oldValue, newValue) { + console.log(`属性 ${name} が変更されました。`); } } + +customElements.define("my-custom-element", MyCustomElement); ``` -> **メモ:** [JavaScript のソース全体](https://github.com/mdn/web-components-examples/blob/main/word-count-web-component/main.js)があります。 +## カスタム要素の登録 -これはごく簡単な例ですが、ここでできることはもっとあります。クラスの中でライフサイクルコールバックを定義することにより、要素のライフサイクルの特定の時点で実行することができます。例えば、 `connectedCallback` は文書に接続された要素にカスタム要素が追加されるたびに実行されます。一方 `attributeChangedCallback` はカスタム要素に属性が追加、削除、変更される時に実行されます。 +カスタム要素をページで利用できるようにするには、{{domxref("Window.customElements")}} の {{domxref("CustomElementRegistry.define()", "define()")}} メソッドを呼び出します。 -これらについては、下記の[ライフサイクルコールバックの使用](#ライフサイクルコールバックの使用)の節で詳しく学ぶことができます。 +`define()` メソッドは、以下の引数を取ります。 -## 簡単な例での作業 +- `name` + - : 要素の名前。これは小文字で始まり、ハイフンを含み、仕様書の [definition of a valid name](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) に記載されているその他の特定のルールを満たす必要があります。 +- `constructor` + - : カスタム要素のコンストラクター関数。 +- `options` + - : カスタム組み込み要素のみに含まれ、これは単一のプロパティ `extends` を含むオブジェクトです。これは、拡張する組み込み要素の名前を指定する文字列です。 -ここで、もう少し簡単な例で、カスタム要素の作成方法をより詳しく説明しましょう。 +例えば、このコードはカスタム組み込み要素である `WordCount` を登録します。 -### 自律カスタム要素 +```js +customElements.define("word-count", WordCount, { extends: "p" }); +``` -自律カスタム要素の例を見てみましょう。[``](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) ([ライブ例](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)も参照) です。これは画像とテキストを受け取り、ページにアイコンを埋め込みます。アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。 +このコードは、`PopupInfo` という自律型カスタム要素を登録します。 -最初に汎用的な {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。 +```js +customElements.define("popup-info", PopupInfo); +``` + +## カスタム要素の使用 + +カスタム要素を定義し登録すると、コードで使用できるようになります。 + +カスタム組み込み要素を使用するには、組み込み要素を使用しますが、カスタム名を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性の値として使用します。 + +```html +

+``` + +自律型カスタム要素を独自に作成して使用するには、組み込みの HTML 要素と同様にカスタム名を使用します。 + +```html + + + +``` + +## 属性の変更への応答 + +組み込み要素と同様に、カスタム要素も HTML 属性を使用して要素の動作を設定することができます。属性を効果的に使用するには、要素が属性値の変更に対応できなければなりません。これを実現するには、カスタム要素を実装するクラスに以下のメンバーを追加する必要があります。 + +- `observedAttributes` という名前の静的プロパティ。これは、その要素が変更通知を必要とするすべての属性の名前を含む配列でなければなりません。 +- `attributeChangedCallback()` ライフサイクルコールバックの実装。 + +`attributeChangedCallback()` コールバックは、要素の `observedAttributes` プロパティにリストされた名前の属性が追加、修正、削除、置換されるたびに呼び出されます。 + +コールバックには 3 つの引数が渡されます。 + +- 変更された属性の名前。 +- 属性の古い値。 +- 属性の新しい値。 + +例えば、この自律的な要素は `size` 属性を監視し、値が変更された際に新旧の値を記録します。 ```js -class PopupInfo extends HTMLElement { +// 要素のためのクラスを作成 +class MyCustomElement extends HTMLElement { + static observedAttributes = ["size"]; + constructor() { - // コンストラクターでは常に super を最初に呼び出してください super(); + } - // ここに要素の機能を記述します + attributeChangedCallback(name, oldValue, newValue) { + console.log( + `Attribute ${name} has changed from ${oldValue} to ${newValue}.`, + ); } } + +customElements.define("my-custom-element", MyCustomElement); +``` + +要素の HTML 宣言に監視される属性が含まれている場合、その属性が初期化された後に、要素の宣言が最初に解釈された時点で `attributeChangedCallback()` が呼び出されることに +注意してください。 したがって、以下の例では、たとえ属性がその後変更されることがなかったとしても、DOM が解釈された時点で `attributeChangedCallback()` が呼び出されます。 + +```html + ``` -前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。 +`attributeChangedCallback()` の使用を示す完全な例については、このページの[ライフサイクルコールバック](#ライフサイクルコールバックの使用)を参照してください。 + +### カスタム状態と CSS のカスタム状態擬似クラスセレクター + +HTML 要素に組み込まれた要素は、「ホバー」、「無効」、「読み取り専用」など、様々な状態を取ります。。 +これらの状態の一部は、HTML または JavaScript を使用して属性として設定できますが、内部的なものもあり、設定できないものもあります。 +外部または内部に関わらず、これらの状態には通常、特定の状態にある要素を選択し、スタイルを適用するために使用できる対応する [CSS 擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)が存在します。 + +また、自律型カスタム要素（組み込み要素をベースにした要素を除く）では、擬似クラス関数 `:state()` を使用して状態を定義し、それに対して選択を行うこともできます。 +以下のコードでは、内部状態 "`collapsed`" を持つ自律型カスタム要素の例を使用して、その動作を示しています。 -コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。 +`collapsed` の状態は、要素の外からは見えない論理値プロパティ（セッターとゲッターメソッド付き）として表現されます。 +この状態を CSS で選択できるようにするために、カスタム要素は最初のコンストラクターで {{domxref("HTMLElement.attachInternals()")}} を呼び出し、{{domxref("ElementInternals")}} オブジェクトを装着します。これにより、{{domxref("ElementInternals.states")}} プロパティを通じて {{domxref("CustomStateSet")}} にアクセスできるようになります。 +（内部で）折りたたまれた状態のセッターは、状態が `true` であれば `CustomStateSet` に識別子 `hidden` を追加し、状態が `false` であれば除去します。 識別子は単なる文字列です。この場合、`hidden` と呼びましたが、`collapsed` と読んでも同じように機能します。 ```js -// シャドウルートを生成 -this.attachShadow({ mode: "open" }); // 'this.shadowRoot' を設定して返す - -//（内部の）span 要素を生成 -const wrapper = document.createElement("span"); -wrapper.setAttribute("class", "wrapper"); -const icon = wrapper.appendChild(document.createElement("span")); -icon.setAttribute("class", "icon"); -icon.setAttribute("tabindex", 0); -// アイコンを、定義された属性または既定のアイコンから挿入 -const img = icon.appendChild(document.createElement("img")); -img.src = this.hasAttribute("img") - ? this.getAttribute("img") - : "img/default.png"; -// 画像を追加する際には、常に説明文を含めるようする -img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : ""; - -const info = wrapper.appendChild(document.createElement("span")); -info.setAttribute("class", "info"); -// 属性の中身を取得し、 info の span の中に入れる -info.textContent = this.getAttribute("data-text"); - -// CSS を作成しシャドウ DOM に割り当てる -const style = document.createElement("style"); -style.textContent = `.wrapper { - /* 簡略化のために CSS は省略 */ -}`; +class MyCustomElement extends HTMLElement { + constructor() { + super(); + this._internals = this.attachInternals(); + } -// 生成された要素をシャドウ DOM に添付する -this.shadowRoot.append(style, wrapper); + get collapsed() { + return this._internals.states.has("hidden"); + } + + set collapsed(flag) { + if (flag) { + // Existence of identifier corresponds to "true" + this._internals.states.add("hidden"); + } else { + // Absence of identifier corresponds to "false" + this._internals.states.delete("hidden"); + } + } +} + +// Register the custom element +customElements.define("my-custom-element", MyCustomElement); +``` + +カスタム要素の `CustomStateSet` (`this._internals.states`) に追加された識別子を使用して、要素のカスタム状態と照合することができます。 +これは、[`:state()`](/ja/docs/Web/CSS/:state) 擬似クラスに識別子を渡すと照合されます。 +例えば、下記では、`hidden` セレクターを使用して、`hidden` 状態が `true`（したがって、要素が`collapsed` 状態）であることを選択し、境界線を削除します。 + +```css +my-custom-element { + border: dashed red; +} +my-custom-element:state(hidden) { + border: none; +} +``` + +`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用すると、[カスタム要素のシャドウ DOM 内の](/ja/docs/Web/CSS/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom)カスタム状態と照合することもできます。 +さらに、`:state()` 擬似クラスを [`::part()`](/ja/docs/Web/CSS/::part) 擬似要素の後で使用することで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することもできます。 + +{{domxref("CustomStateSet")}} には、これがどのように動作するのかを示すいくつかのライブサンプルがあります。 + +## 例 + +このガイドの残りの部分では、いくつかのカスタム要素の例を見ていきます。 これらの例のすべて、およびその他のソースは、[web-components-examples](https://github.com/mdn/web-components-examples) リポジトリーで参照できます。また、すべてをライブで確認するには、 にアクセスしてください。 + +### 自律カスタム要素 + +まず、自律カスタム要素の例を見てみましょう。`` カスタム要素は、画像アイコンとテキスト文字列を属性として取り、アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。 + +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-web-component/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) + +最初に {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。 + +```js +// 要素のためのクラスを作成 +class PopupInfo extends HTMLElement { + constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + } + + connectedCallback() { + // シャドウルートを生成 + const shadow = this.attachShadow({ mode: "open" }); + + // span 要素を生成 + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + + const icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); + + const info = document.createElement("span"); + info.setAttribute("class", "info"); + + // 属性の中身を取得し、情報 span の中に入れる + const text = this.getAttribute("data-text"); + info.textContent = text; + + // アイコンを挿入 + let imgUrl; + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); + } else { + imgUrl = "img/default.png"; + } + + const img = document.createElement("img"); + img.src = imgUrl; + icon.appendChild(img); + + // いくらかの CSS を生成してシャドウ DOM に適用 + const style = document.createElement("style"); + console.log(style.isConnected); + + style.textContent = ` + .wrapper { + position: relative; + } + + .info { + font-size: 0.8rem; + width: 200px; + display: inline-block; + border: 1px solid black; + padding: 10px; + background: white; + border-radius: 10px; + opacity: 0; + transition: 0.6s all; + position: absolute; + bottom: 20px; + left: 10px; + z-index: 3; + } + + img { + width: 1.2rem; + } + + .icon:hover + .info, .icon:focus + .info { + opacity: 1; + } + `; + + // 生成要素をシャドウ DOM に結びつける + shadow.appendChild(style); + console.log(style.isConnected); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} ``` +前述のコードスニペットはクラスのコンストラクター（[`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)）の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。 + +`connectedCallback()` メソッド内で、要素が DOM に接続された際にその要素が持つすべての機能を定義します。この例では、シャドウルートをカスタム要素に割り当て、DOM 操作を使用して要素の内部シャドウルート構造を作成します（そしてシャドウルートに割り当てます）。最後に、シャドウルートにいくつかの CSS を割り当ててスタイル設定します。要素の属性は DOM に接続されるまで利用できないため、コンストラクターでは処理はうまくいきません。 + 最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。 ```js @@ -126,55 +354,157 @@ customElements.define("popup-info", PopupInfo); back of your card."> ``` -> [!NOTE] -> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。 - ### 内部スタイルと外部スタイル -上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。 +上記の例では、{{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。この例では、外部スタイルシートを使用するように `` カスタム要素を変更します。 -例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。 +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-external-stylesheet) + +こちらがクラス定義です。 ```js -// 外部スタイルシートをシャドウ DOM に適用 -const linkElem = document.createElement("link"); -linkElem.setAttribute("rel", "stylesheet"); -linkElem.setAttribute("href", "style.css"); +// 要素のためのクラスを作成 +class PopupInfo extends HTMLElement { + constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + } + + connectedCallback() { + // シャドウルートを生成 + const shadow = this.attachShadow({ mode: "open" }); + + // span 要素を生成 + const wrapper = document.createElement("span"); + wrapper.setAttribute("class", "wrapper"); + + const icon = document.createElement("span"); + icon.setAttribute("class", "icon"); + icon.setAttribute("tabindex", 0); + + const info = document.createElement("span"); + info.setAttribute("class", "info"); + + // 属性の中身を取得し、情報 span の中に入れる + const text = this.getAttribute("data-text"); + info.textContent = text; + + // アイコンを挿入 + let imgUrl; + if (this.hasAttribute("img")) { + imgUrl = this.getAttribute("img"); + } else { + imgUrl = "img/default.png"; + } -// 生成された要素をシャドウ DOM に添付 -shadow.appendChild(linkElem); + const img = document.createElement("img"); + img.src = imgUrl; + icon.appendChild(img); + + // 外部スタイルシートをシャドウ DOM に適用 + const linkElem = document.createElement("link"); + linkElem.setAttribute("rel", "stylesheet"); + linkElem.setAttribute("href", "style.css"); + + // 生成した要素をシャドウ DOM に結びつける + shadow.appendChild(linkElem); + shadow.appendChild(wrapper); + wrapper.appendChild(icon); + wrapper.appendChild(info); + } +} ``` +これは、元の `` の例とほぼ同じですが、外部スタイルシートにリンクするために、シャドウ DOM に追加する {{HTMLElement("link")}} 要素を使用している点が異なります。 + なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。 最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。 -### カスタマイズされた組み込み要素 +### カスタム組み込み要素 -ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) です。（[ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)） これにより番号なしリストが展開・収納するメニューになります。 +ここで、もう 1 つの組み込み要素の例を見てみましょう。この例は、組み込みの {{HTMLElement("ul")}} 要素を拡張して、リストアイテムが展開・収納するするようにします。 + +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/expanding-list-web-component/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) + +> [!NOTE] +> カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。 まず始めに、これまでと同様の方法でクラス要素を定義します。 ```js +// 要素のためのクラスを作成 class ExpandingList extends HTMLUListElement { constructor() { - // コンストラクターでは常に super を最初に呼び出してください - super(); + // コンストラクターでは super を常に最初に呼び出す + // super() の返値はこの要素への参照 + self = super(); + } - // ここに要素の機能を記述します + connectedCallback() { + // このカスタム ul 要素の子である ul および li 要素を取得する + // li 要素は、その中に ul がある場合、コンテナーとして機能する + const uls = Array.from(self.querySelectorAll("ul")); + const lis = Array.from(self.querySelectorAll("li")); + // すべての子の ul を隠す + // これらのリストは、ユーザーが上位レベルのコンテナーをクリックしたときに表示される + uls.forEach((ul) => { + ul.style.display = "none"; + }); + + // ul内のli要素をそれぞれ見ていく + lis.forEach((li) => { + // この li に ul が子要素としてある場合、クリックハンドラーを追加する + if (li.querySelectorAll("ul").length > 0) { + // スタイル設定で使用できる属性を追加し、 + // 開く・閉じるアイコンを表示させる + li.setAttribute("class", "closed"); + + // li 要素のテキストを新しい span 要素で囲むことで、 + // span にスタイルやイベントハンドラーを割り当てることができる + const childText = li.childNodes[0]; + const newSpan = document.createElement("span"); + + // li から span にテキストをコピーし、カーソルスタイルを設定 + newSpan.textContent = childText.textContent; + newSpan.style.cursor = "pointer"; + + // この span にクリックハンドラーを追加 + newSpan.addEventListener("click", (e) => { + // span 要素の次兄弟要素は ul であるはず + const nextul = e.target.nextElementSibling; + + // 表示状態を切り替え、ul の class 属性を更新 + if (nextul.style.display == "block") { + nextul.style.display = "none"; + nextul.parentNode.setAttribute("class", "closed"); + } else { + nextul.style.display = "block"; + nextul.parentNode.setAttribute("class", "open"); + } + }); + // span を追加し、li から裸のテキストノードを除去 + childText.parentNode.insertBefore(newSpan, childText); + childText.parentNode.removeChild(childText); + } + }); } } ``` -ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。 +なお、今回は {{domxref("HTMLElement")}} ではなく、{{domxref("HTMLUListElement")}} を拡張しています。 つまり、リストの既定の動作が得られ、独自のカスタマイズのみを実装すればよいということです。 + +前回と同様に、コードのほとんどは `connectedCallback()` ライフサイクルコールバック内にあります。 -次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。 +次に、前回と同様に `define()` メソッドを使用して要素を登録しますが、今回は、カスタム要素が継承する要素の詳細を記載した options オブジェクトも含めます。 ```js customElements.define("expanding-list", ExpandingList, { extends: "ul" }); ``` -ウェブ文書内で組み込み要素を使用する場合とはやや異なります。 +ウェブ文書内で組み込み要素を使用すると、また少し違った見え方になります。 ```html
    @@ -184,48 +514,45 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" }); 通常のように `
      ` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。 -> [!NOTE] -> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。 - -## ライフサイクルコールバックの使用 - -カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。 +この場合、DOM が完全に解釈された後にカスタム要素を定義するスクリプトが実行されるように保証する必要があります。`connectedCallback()` は展開されたリストが DOM に追加されると同時に呼び出されますが、その時点では子要素はまだ追加されていないため、`querySelectorAll()` の呼び出しでは何も見つかりません。これを保証する一つの方法は、スクリプトを記載する行に [defer](/ja/docs/Web/HTML/Element/script#defer) 属性を追加することです。 -- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。 - - > **メモ:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。 +```html + +``` -- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。 -- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。 -- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、静的な get `observedAttributes()` メソッドで指定されます。 +## ライフサイクルコールバック -これらの使用例を見てみましょう。以下のコードは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) の例から引用しています（[実行可能なライブでも確認してください](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)）。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。 +これまでは、`connectedCallback()` というライフサイクルコールバックが 1 つだけ動作しているのを見てきました。最後の例である `` では、他にもいくつか見ていきます。この例では、自律型のカスタム要素 `` を紹介します。これは、名前付きの 2 つの属性 `"size"` および `"color"` によってサイズと色が決定される四角形を描画します。 -```html - -``` +- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/) +- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) -クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。 +クラスのコンストラクターでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。 ```js +constructor() { + // コンストラクターでは super を常に最初に呼び出す + super(); + const shadow = this.attachShadow({ mode: "open" }); const div = document.createElement("div"); const style = document.createElement("style"); shadow.appendChild(style); shadow.appendChild(div); +} ``` -この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その ` + I'm in the shadow DOM + + +
      +I'm not in the shadow DOM ``` -### 内部スタイルと外部スタイル +JavaScript で、シャドウ DOM を作成し、そこに `