Turboハンドブックのdriveを最新化 #65

yasu551 · 2024-05-07T01:44:49Z

refs: #58

差分: https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5
本家のコミットハッシュ: c397c31

https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R18-R19

yasu551 · 2024-05-07T01:45:33Z

turbo/handbook/drive.md

+描画中、Turbo ドライブはリクエストしているドキュメントの`<body>`の内容をレスポンスのドキュメントの`<body>`で置き換えます。`<head>`の内容もマージし、必要に応じて`<html>`要素の`lang`属性を更新します。`<head>`要素を置き換える代わりにマージするポイントは、`<title>`または`<meta>`タグが変わった時にそれらは期待どおり更新され、アセットのリンクが変わらない時にそのリンクに対して再び処理しないところです。
+


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R18-R19

yasu551 · 2024-06-17T12:15:13Z

turbo/handbook/drive.md

+## 描画のカスタム
+
+ドキュメント全体に対して `turbo:before-render` イベントリスナーを追加し、 `event.detail.render` プロパティをオーバーライドすることで、アプリケーションの描画プロセスをカスタマイズできます。
+
+例えば、[morphdom]で、リクエストを投げたドキュメントの `<body>` 要素を、レスポンスのドキュメントにある `<body>` 要素にマージできます。
+
+```javascript
+import morphdom from "morphdom"
+
+addEventListener("turbo:before-render", (event) => {
+  event.detail.render = (currentElement, newElement) => {
+    morphdom(currentElement, newElement)
+  }
+})
+```
+
+[morphdom]: https://github.com/patrick-steele-idem/morphdom
+
+<details>
+<summary>原文</summary>
+
+Applications can customize the rendering process by adding a document-wide `turbo:before-render` event listener and overriding the `event.detail.render` property.
+
+For example, you could merge the response document's `<body>` element into the requesting document's `<body>` element with [morphdom](https://github.com/patrick-steele-idem/morphdom):
+
+```javascript
+import morphdom from "morphdom"
+
+addEventListener("turbo:before-render", (event) => {
+  event.detail.render = (currentElement, newElement) => {
+    morphdom(currentElement, newElement)
+  }
+})
+```
+
+</details>
+


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R78-R93

yasu551 · 2024-06-17T12:33:59Z

turbo/handbook/drive.md

+## アクセス前に確認ダイアログを表示する
+
+リンクに `data-turbo-confirm` 属性を付けると、アクセス前に確認ダイアログが表示できます。
+
+```html
+<a href="/articles" data-turbo-confirm="このページから離れますか？">Back to articles</a>
+<a href="/articles/54" data-turbo-method="delete" data-turbo-confirm="本当に記事を削除しますか？">Delete the article</a>
+```
+
+確認時に呼ぶメソッドは `Turbo.setConfirmMethod` を使って、変更できます。確認時に呼ぶメソッドのデフォルトは、ブラウザに組み込まれてる `confirm` です。
+
+<details>
+<summary>原文</summary>
+
+Decorate links with `data-turbo-confirm`, and confirmation will be required for a visit to proceed.
+
+```html
+<a href="/articles" data-turbo-confirm="Do you want to leave this page?">Back to articles</a>
+<a href="/articles/54" data-turbo-method="delete" data-turbo-confirm="Are you sure you want to delete the article?">Delete the article</a>
+```
+
+Use `Turbo.setConfirmMethod` to change the method that gets called for confirmation. The default is the browser's built in `confirm`.
+
+</details>
+


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R141-R151

yasu551 · 2024-06-17T13:36:09Z

turbo/handbook/drive.md

+## ビュートランジション
+
+[ビュートランジション API]を[サポートしているブラウザ]では、Turboはページ間を移動するときにビュートランジションをトリガーします。
+
+Turbo は、現在と次のページの両方に以下の `<meta>` 要素があるときに、ビュートランジションをトリガーします。
+
+```html
+<meta name="view-transition" content="same-origin" />
+```
+
+Turbo は `<html>` 要素に `data-turbo-visit-direction` 属性を追加することで、トランジションの方向を指定できます。その属性の値として以下のものを使えます。
+
+- `forward`: ページを全て変える方向
+- `back`: ページを前のページに戻す方向
+- `none`: ページの一部を置き換える方向
+
+この属性を使えば、トランジション中で実行されるアニメーションをカスタマイズできます。
+
+```css
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
+  animation: slide-to-right 0.5s ease-out;
+}
+```
+
+[サポートしているブラウザ]: https://caniuse.com/?search=View%20Transition%20API
+[ビュートランジション API]: https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API
+
+<details>
+<summary>原文</summary>
+
+In [browsers that support](https://caniuse.com/?search=View%20Transition%20API) the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) Turbo can trigger view transitions when navigating between pages.
+
+Turbo triggers a view transition when both the current and the next page have this meta tag:
+
+```
+<meta name="view-transition" content="same-origin" />
+```
+
+Turbo also adds a `data-turbo-visit-direction` attribute to the `<html>` element to indicate the direction of the transition. The attribute can have one of the following values:
+
+- `forward` in advance visits.
+- `back` in restoration visits.
+- `none` in replace visits.
+
+You can use this attribute to customize the animations that are performed during a transition:
+
+```css
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
+  animation: slide-to-right 0.5s ease-out;
+}
+```
+
+</details>


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R189-R212

yasu551 · 2024-06-17T16:28:50Z

turbo/handbook/drive.md

+
+## ホバーでリンク先のプリフェッチ
+
+Turbo は、ユーザーがリンクをクリックする前に発生した`mouseenter` イベントでリンク先を自動で読み込みます。これにより、リンク・ナビゲーションの待ち時間が短縮されます。通常、クリック・ナビゲーション単位で500から800ミリ秒の速度が向上します。
+
+リンク先のプリフェッチは、Turbo v8からデフォルトで有効になっています。ただ、以下のメタタグをページに追加すれば、無効化できます。
+
+```html
+<meta name="turbo-prefetch" content="false">
+```
+
+ユーザーが少しの間だけリンクをホバーしただけでリンク先をプリフェッチしないように、Turbo はリンク先をプリフェッチする前に100ミリ秒待ちます。
+
+HTML要素、あるいは、その祖先に `data-turbo-prefetch="false"`をつけることで、プリフェッチ機能を要素ごとに無効化できます。
+
+```html
+<html>
+  <head>
+    <meta name="turbo-prefetch" content="true">
+  </head>
+  <body>
+    <a href="/articles">Articles</a> <!-- このリンク先はプリフェッチされます -->
+    <a href="/about" data-turbo-prefetch="false">About</a> <!-- このリンク先はプリフェッチされません -->
+    <div data-turbo-prefetch="false"`>
+      <!-- このdiv内のリンクはプリフェッチされません -->
+    </div>
+  </body>
+</html>
+```
+
+`turbo:before-prefetch` イベントをインターセプトして `event.preventDefault()` を呼ぶことで、プログラムでプリフェッチ機能を無効化できます。
+
+```javascript
+document.addEventListener("turbo:before-prefetch", (event) => {
+  if (isSavingData() || hasSlowInternet()) {
+    event.preventDefault()
+  }
+})
+
+function isSavingData() {
+  return navigator.connection?.saveData
+}
+
+function hasSlowInternet() {
+  return navigator.connection?.effectiveType === "slow-2g" ||
+         navigator.connection?.effectiveType === "2g"
+}
+```
+
+
+<details>
+<summary>原文</summary>
+
+Turbo can also speed up perceived link navigation latency by automatically loading links on `mouseenter` events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.
+
+Prefetching links is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:
+
+```html
+<meta name="turbo-prefetch" content="false">
+```
+
+To avoid prefetching links that the user is briefly hovering, Turbo waits 100ms after the user hovers over the link before prefetching it. But you may want to disable the prefetching behavior on certain links leading to pages with expensive rendering.
+
+You can disable the behavior on a per-element basis by annotating the element or any of its ancestors with `data-turbo-prefetch="false"`.
+
+```html
+<html>
+  <head>
+    <meta name="turbo-prefetch" content="true">
+  </head>
+  <body>
+    <a href="/articles">Articles</a> <!-- This link is prefetched -->
+    <a href="/about" data-turbo-prefetch="false">About</a> <!-- Not prefetched -->
+    <div data-turbo-prefetch="false"`>
+      <!-- Links inside this div will not be prefetched -->
+    </div>
+  </body>
+</html>
+```
+
+You can also disable the behaviour programatically by intercepting the `turbo:before-prefetch` event and calling `event.preventDefault()`.
+
+```javascript
+document.addEventListener("turbo:before-prefetch", (event) => {
+  if (isSavingData() || hasSlowInternet()) {
+    event.preventDefault()
+  }
+})
+
+function isSavingData() {
+  return navigator.connection?.saveData
+}
+
+function hasSlowInternet() {
+  return navigator.connection?.effectiveType === "slow-2g" ||
+         navigator.connection?.effectiveType === "2g"
+}
+```
+</details>


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R330-R378

yasu551 · 2024-06-18T00:03:10Z

turbo/handbook/drive.md

+
+## リンク先をキャッシュにプリロード
+
+[data-turbo-preload] 属性を使えば、リンク先をTurbo ドライブのキャッシュにプリロードできます。
+
+これにより、ページに初めてアクセスする前でもページのプレビューが提供され、ページアクセスが高速に感じられます。これはアプリケーション上で最も重要なページのプリロードに使えます。過剰な使用は、不要なコンテントを読み込むことになるので、避けてください。
+
+すべての `<a>` 要素がプリロードされるわけではありません。以下のような `[data-turbo-preload]` 属性を持つリンクはプリロードされません。
+
+* 他のドメインにアクセスするリンク
+* ある `<turbo-frame>` 要素に対して適用される `[data-turbo-frame]` 属性を持つリンク
+* 先祖要素の `<turbo-frame>` に対して適用されるリンク
+* `[data-turbo="false"]` 属性を持つリンク
+* `[data-turbo-stream]` 属性を持つリンク
+* `[data-turbo-method]` 属性を持つリンク
+* 先祖要素が `[data-turbo="false"]` 属性を持つリンク
+* 先祖要素が `[data-turbo-prefetch="false"]` 属性を持つリンク
+
 <br><br>
+
+プリロードされた `<a>` 要素は [turbo:before-fetch-request] と [turbo:before-fetch-response] イベントをディスパッチすることに注意してください。`turbo:before-fetch-request` イベントがプリロードにより発生したのかそれとも他のメカニズムにより発生したのかの区別は、リクエストの `X-Sec-Purpose` ヘッダーに `"prefetch"`がセットされているかどうかで確認できます（`X-Sec-Purpose` ヘッダーの値は `event.detail.fetchOptions.headers["X-Sec-Purpose"]` プロパティから取得できます）。
+
+```js
+addEventListener("turbo:before-fetch-request", (event) => {
+  if (event.detail.fetchOptions.headers["X-Sec-Purpose"] === "prefetch") {
+    // 追加のプリロード設定を行う
+  } else {
+    // 何かを行う
+  }
+})
+```
+
+
+[data-turbo-preload]: /hotwire_ja/turbo/reference/attributes#data-attributes
+[turbo:before-fetch-request]: /hotwire_ja/turbo/reference/events#turbo%3Abefore-fetch-request
+[turbo:before-fetch-response]: /hotwire_ja/turbo/reference/events#turbo%3Abefore-fetch-response
+
+<details>
+<summary>原文</summary>
+
+Preload links into Turbo Drive's cache using the [data-turbo-preload][] boolean attribute.
+
+This will make page transitions feel lightning fast by providing a preview of a page even before the first visit. Use it to preload the most important pages in your application. Avoid over usage, as it will lead to loading content that is not needed.
+
+Not every `<a>` element can be preloaded. The `[data-turbo-preload]` attribute
+won't have any effect on links that:
+
+* navigate to another domain
+* have a `[data-turbo-frame]` attribute that drives a `<turbo-frame>` element
+* drive an ancestor `<turbo-frame>` element
+* have the `[data-turbo="false"]` attribute
+* have the `[data-turbo-stream]` attribute
+* have a `[data-turbo-method]` attribute
+* have an ancestor with the `[data-turbo="false"]` attribute
+* have an ancestor with the `[data-turbo-prefetch="false"]` attribute
+
+It also dovetails nicely with pages that leverage [Eager-Loading Frames](/reference/frames#eager-loaded-frame) or [Lazy-Loading Frames](/reference/frames#lazy-loaded-frame). As you can preload the structure of the page and show the user a meaningful loading state while the interesting content loads.
+<br><br>
+
+Note that preloaded `<a>` elements will dispatch [turbo:before-fetch-request](/reference/events) and [turbo:before-fetch-response](/reference/events) events. To distinguish a preloading `turbo:before-fetch-request` initiated event from an event initiated by another mechanism, check whether the request's `X-Sec-Purpose` header (read from the `event.detail.fetchOptions.headers["X-Sec-Purpose"]` property) is set to `"prefetch"`:
+
+```js
+addEventListener("turbo:before-fetch-request", (event) => {
+  if (event.detail.fetchOptions.headers["X-Sec-Purpose"] === "prefetch") {
+    // do additional preloading setup…
+  } else {
+    // do something else…
+  }
+})
+```
+</details>


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R379-R412

turbo/handbook/drive.md

yasu551 · 2024-06-18T01:27:41Z

turbo/handbook/drive.md

 ## 描画の一時停止

-アプリケーションは描画を一時停止して、実行前に追加で下準備をすることができます。
+アプリケーションは描画を一時停止して、続行する前に追加で下準備をすることができます。


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R96

yasu551 · 2024-06-18T01:54:36Z

turbo/handbook/drive.md

@@ -198,11 +316,9 @@ Turbo.session.drive = false

 ## アセット変更時のリロード

+前述した通り、Turbo ドライブは `<head>` 要素のコンテントをマージします。しかし、CSS または JavaScript が変更された場合、これらCSS、JavaScriptのマージは既存のものを評価した上で行われます。大抵、このマージは厄介なコンフリクトを引き起こします。そのような場合、Ajaxではない標準のリクエストで新しいドキュメントを完全な形で取得する必要があります。


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R244

yasu551 · 2024-06-18T01:55:50Z

turbo/handbook/drive.md

-
-
-アセット要素を `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
+これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。


https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R246

akira888

front matter に order の追加をお願いします！

order : 2

turbo/handbook/drive.md

akira888 · 2024-08-27T01:55:24Z

turbo/handbook/drive.md

+
+Turbo は `<html>` 要素に `data-turbo-visit-direction` 属性を追加することで、トランジションの方向を指定できます。その属性の値として以下のものを使えます。
+
+- `forward`: ページを全て変える方向


すべて変えるかどうかは、わからない？
新規ページというか、ページが進んだとき（戻ってないとき）のdirectionなのかなと思ったのですがどうでしょうか。
（良くわからないので、手元で動作確認してみます）

確かにそうですね。
トランジションの方向については、正確に理解できていないので、実際に使ってみてから修正します。

ちょっと試してみました。
ページの進む(or 戻る)というような方向ではなく、TurboのVisitアクションのタイプ(advance, replace, or restore)によってビュートランジションを実行するかを指定できる、ということらしいです。

fef0b92

動作確認ありがとうございます！なるほど、、勉強になりました

turbo/handbook/drive.md

akira888 · 2024-09-10T02:02:39Z

turbo/handbook/drive.md

+* `[data-turbo-method]` 属性を持つリンク
+* 先祖要素が `[data-turbo="false"]` 属性を持つリンク
+* 先祖要素が `[data-turbo-prefetch="false"]` 属性を持つリンク
+


https://github.com/everyleaf/hotwire_ja/pull/65/files#diff-035a8e57b1c8014d17b31b3b57e9d8670e594a097c959b3755f544d23fbd5aa2R876 の訳がぬけていそうです！ 🙏🏻

It also dovetails nicely with pages that leverage [Eager-Loading Frames](/reference/frames#eager-loaded-frame) or [Lazy-Loading Frames](/reference/frames#lazy-loaded-frame). As you can preload the structure of the page and show the user a meaningful loading state while the interesting content loads.

追加しました！
5cc6824

akira888 · 2024-11-15T01:02:41Z

turbo/handbook/drive.md

+* 先祖要素が `[data-turbo="false"]` 属性を持つリンク
+* 先祖要素が `[data-turbo-prefetch="false"]` 属性を持つリンク
+
+また、[フレームの事前読み込み]や[フレームの遅延読み込み]を使ったページでも、プリロードはうまく噛み合います。ページの構造をプリロードし、興味があるコンテンツを読み込んでいる間、読み込んでいる状態を示すことができるからです。


a meaningfulの表現がないように思いましたので提案です

Suggested change

また、[フレームの事前読み込み]や[フレームの遅延読み込み]を使ったページでも、プリロードはうまく噛み合います。ページの構造をプリロードし、興味があるコンテンツを読み込んでいる間、読み込んでいる状態を示すことができるからです。

また、[フレームの事前読み込み]や[フレームの遅延読み込み]を使ったページでも、プリロードはうまく噛み合います。ページの構造をプリロードし、興味があるコンテンツを読み込んでいる間、ユーザーに意味のある読み込み状態を示すことができるからです。

otegami

翻訳ありがとうございます。細かい点で気になったところをコメントしました。
強い意見ではないので、良さそうなところだけ取り入れてもらえればと思います。

otegami · 2024-11-21T12:21:42Z

turbo/handbook/drive.md

既存の原文の入っていないところにも、原文を追加していただきありがとうございます 🙏🏾 (すごく助かります。)

細かいのですが、原文側のセクションタイトルの部分が抜けてしまっているようなので、
合わせて追加していただけると嬉しいです。

otegami · 2024-11-21T12:29:38Z

turbo/handbook/drive.md

+
+</details>
+
+## 描画のカスタム


[nits] 動詞 + 名詞の形なので、そのニュアンスを出してみるのはどうでしょう？

Suggested change

## 描画のカスタム

## 描画処理をカスタマイズする

otegami · 2024-11-21T12:30:51Z

turbo/handbook/drive.md

+
+## 描画のカスタム
+
+ドキュメント全体に対して `turbo:before-render` イベントリスナーを追加し、 `event.detail.render` プロパティをオーバーライドすることで、アプリケーションの描画プロセスをカスタマイズできます。


overrideは、上書きと訳されている例のほうが多いので合わせてあげると良さそうです。

processは、処理みたいに訳してあげると統一性がありそうでしょうか？

otegami · 2024-11-21T12:39:04Z

turbo/handbook/drive.md

@@ -97,6 +221,23 @@ document.addEventListener('turbo:before-render', async (event) => {
 })
 ```

+<details>
+<summary>原文</summary>
+


Suggested change

## Pausing Rendering

Applications can pause rendering and make additional preparations before continuing.

追加していただいた原文の部分が抜けていそうです。

otegami · 2024-11-21T12:41:04Z

turbo/handbook/drive.md

 ## 異なるメソッドでアクセスを行う

 デフォルトでは、リンクのクリックはサーバへ `GET` リクエストを送ります。しかし、これを `data-turbo-method` で変更することができます。

 ```html
-<a href="/articles/54" data-turbo-method="delete">Delete the article</a>
+<a href="/articles/54" data-turbo-method="delete">記事を削除する</a>


👍🏾 Good catch!

otegami · 2024-11-21T12:46:00Z

turbo/handbook/drive.md

+
+</details>
+
+## ビュートランジション


少し違和感を感じなくもないのですが、「ビュー遷移 API」と訳されているようなので、合わせてあげると良さそうですかね。

https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API

otegami · 2024-11-21T12:51:25Z

turbo/handbook/drive.md

+
+## ビュートランジション
+
+[ビュートランジション API]を[サポートしているブラウザ]では、Turbo はページ間を移動するときにビュートランジションをトリガーします。


[nits]
triggerを発火と訳すと他の部分と一貫性があって良さそうに思いました。

otegami · 2024-11-21T13:11:39Z

turbo/handbook/drive.md


- Turbo ドライブは、あるページから別のページへの遷移時に `<head>` 内のアセット要素のURLを追跡し、URLが変更されていればフル・リロードを発行します。これによってユーザーは、最新のアプリケーションのスクリプトやスタイルを入手できます。
+これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。


Suggested change

これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。

これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、次の例のようにアセットの内容のダイジェストならもっといいでしょう。

Turboドライブの挙動についての説明を追加

77f2857

https://github.com/hotwired/turbo-site/compare/3b06afbf5470af387902e5dd1470c9cefcdc1735..c397c3157a26844bac57995896f06c5fbde02d0b#diff-bbdef0a885cb8943c969dbffeb1a982a34a085722b7a77dfcde431b3249c28e5R18-R19

yasu551 commented May 7, 2024

View reviewed changes

Custom Renderingの章を追加

3111a3f

yasu551 commented Jun 17, 2024

View reviewed changes

Requiring Confirmation for a Visitの章を追加

2c53449

yasu551 commented Jun 17, 2024

View reviewed changes

View transitionsの章を追加

06a555e

yasu551 commented Jun 17, 2024

View reviewed changes

Prefetching Links on Hoverの章を追加

104ac55

yasu551 commented Jun 17, 2024

View reviewed changes

Preload Links Into the Cacheの章を追加

d6e754e

yasu551 commented Jun 18, 2024

View reviewed changes

yasu551 marked this pull request as ready for review June 18, 2024 00:08

yasu551 marked this pull request as draft June 18, 2024 01:11

yakitorii reviewed Jun 18, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

リクエストの一時停止の文言を修正

6c07d6e

yasu551 commented Jun 18, 2024

View reviewed changes

yasu551 added 2 commits June 18, 2024 10:31

文字列にはダブルクォテーションを使うように

36aa142

アセット変更時のリロードの章の文章を最新化

815156c

yasu551 commented Jun 18, 2024

View reviewed changes

原文を追加

ebe80a3

yasu551 marked this pull request as ready for review July 9, 2024 01:28

わかりやすい文章に

d841473

akira888 reviewed Aug 13, 2024

View reviewed changes

akira888 reviewed Aug 20, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Aug 20, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

順番の情報を追加

5def414

akira888 reviewed Aug 27, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

コード内の英文を日本語に

b9dcc48

akira888 reviewed Aug 27, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

yasu551 added 3 commits August 27, 2024 10:45

送り仮名の用法をフォーマルに

3c003b9

空白がなったので

1f9cf69

１つだけセットできることがわかりやすいように

044b56e

akira888 reviewed Aug 27, 2024

View reviewed changes

akira888 reviewed Sep 3, 2024

View reviewed changes

turbo/handbook/drive.md Show resolved Hide resolved

akira888 reviewed Sep 3, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 3, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 3, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 10, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 10, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 10, 2024

View reviewed changes

turbo/handbook/drive.md Outdated Show resolved Hide resolved

akira888 reviewed Sep 10, 2024

View reviewed changes

yasu551 added 9 commits October 8, 2024 10:43

数値の左右にスペースが入るように

1a3d1dd

一まとまりの用語であることがわかりやすいように

7f2c1f5

英語の用語の左右にスペースが空いていなかったので

404c6d4

Merge branch 'main' into update-drive-of-handbook

b0a54a5

真偽属性であるという情報が抜けていたので

4f2d3ce

非常に高速であることがわかるように

e33dae4

data-turbo-preload属性をつけることでプリロードしないと思われないように

cce6e3c

翻訳し忘れていた文章を追加

5cc6824

ビュートランジションを実行する条件がわかりやすいように

fef0b92

akira888 reviewed Nov 15, 2024

View reviewed changes

otegami reviewed Nov 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Turboハンドブックのdriveを最新化 #65

Turboハンドブックのdriveを最新化 #65

yasu551 commented May 7, 2024 •

edited

Loading

yasu551 May 7, 2024

yasu551 Jun 17, 2024

yasu551 Jun 17, 2024

yasu551 Jun 17, 2024 •

edited

Loading

yasu551 Jun 17, 2024

yasu551 Jun 18, 2024

yasu551 Jun 18, 2024

yasu551 Jun 18, 2024

yasu551 Jun 18, 2024

akira888 left a comment

akira888 Aug 27, 2024

yasu551 Oct 8, 2024

yasu551 Nov 4, 2024

akira888 Nov 15, 2024

akira888 Sep 10, 2024

yasu551 Nov 3, 2024

akira888 Nov 15, 2024

otegami left a comment

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

otegami Nov 21, 2024

		描画中、Turbo ドライブはリクエストしているドキュメントの`<body>`の内容をレスポンスのドキュメントの`<body>`で置き換えます。`<head>`の内容もマージし、必要に応じて`<html>`要素の`lang`属性を更新します。`<head>`要素を置き換える代わりにマージするポイントは、`<title>`または`<meta>`タグが変わった時にそれらは期待どおり更新され、アセットのリンクが変わらない時にそのリンクに対して再び処理しないところです。

		@@ -198,11 +316,9 @@ Turbo.session.drive = false

		## アセット変更時のリロード

		前述した通り、Turbo ドライブは `<head>` 要素のコンテントをマージします。しかし、CSS または JavaScript が変更された場合、これらCSS、JavaScriptのマージは既存のものを評価した上で行われます。大抵、このマージは厄介なコンフリクトを引き起こします。そのような場合、Ajaxではない標準のリクエストで新しいドキュメントを完全な形で取得する必要があります。



		アセット要素を `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
		これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。


		Turbo は `<html>` 要素に `data-turbo-visit-direction` 属性を追加することで、トランジションの方向を指定できます。その属性の値として以下のものを使えます。

		- `forward`: ページを全て変える方向

	また、[フレームの事前読み込み]や[フレームの遅延読み込み]を使ったページでも、プリロードはうまく噛み合います。ページの構造をプリロードし、興味があるコンテンツを読み込んでいる間、読み込んでいる状態を示すことができるからです。
	また、[フレームの事前読み込み]や[フレームの遅延読み込み]を使ったページでも、プリロードはうまく噛み合います。ページの構造をプリロードし、興味があるコンテンツを読み込んでいる間、ユーザーに意味のある読み込み状態を示すことができるからです。

	## 描画のカスタム
	## 描画処理をカスタマイズする


		## 描画のカスタム

		ドキュメント全体に対して `turbo:before-render` イベントリスナーを追加し、 `event.detail.render` プロパティをオーバーライドすることで、アプリケーションの描画プロセスをカスタマイズできます。


	## Pausing Rendering

	Applications can pause rendering and make additional preparations before continuing.


		## ビュートランジション

		[ビュートランジション API]を[サポートしているブラウザ]では、Turbo はページ間を移動するときにビュートランジションをトリガーします。


		Turbo ドライブは、あるページから別のページへの遷移時に `<head>` 内のアセット要素のURLを追跡し、URLが変更されていればフル・リロードを発行します。これによってユーザーは、最新のアプリケーションのスクリプトやスタイルを入手できます。
		これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。


		</details>

		## 描画のカスタム


		</details>

		## ビュートランジション

Turboハンドブックのdriveを最新化 #65

Are you sure you want to change the base?

Turboハンドブックのdriveを最新化 #65

Conversation

yasu551 commented May 7, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yasu551 Jun 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

akira888 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

otegami left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yasu551 commented May 7, 2024 •

edited

Loading

yasu551 Jun 17, 2024 •

edited

Loading