Merge pull request #2325 from mDuo13/migrate-interactive-tutorials

Migrate interactive tutorials

content/@i18n/ja/_snippets/interactive-tutorials/connect-step.md

@@ -1,20 +1,17 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set ws_url = "wss://s.altnet.rippletest.net:51233" %}
-  {% set explorer_url = "https://testnet.xrpl.org" %}
-  {% set use_network = "Testnet" %}
-{% elif use_network == "Devnet" %}
-  {% set ws_url = "wss://s.devnet.rippletest.net:51233" %}
-  {% set explorer_url = "https://devnet.xrpl.org" %}
-{% elif use_network == "Mainnet" %}
-  {% set ws_url = "wss://xrplcluster.com" %}
-  {% set explorer_url = "https://livenet.xrpl.org" %}
-{% endif %}
+<!-- Interactive tutorials are hard-coded to Testnet for now due to Redocly 
+     limitations. They'll be replaced with new-style tutorials next anyway.
+     Localized step names don't currently work due to problems with unicode
+     in regexes. -->
 
-{{ start_step("Connect") }}
-<button id="connect-button" class="btn btn-primary" data-wsurl="{{ws_url}}" data-explorer="{{explorer_url}}">{{use_network}}に接続する</button>
+{% interactive-block label=default($label, "Connect") steps=$frontmatter.steps %}
+
+<button id="connect-button" class="btn btn-primary" data-wsurl="wss://s.altnet.rippletest.net:51233" data-explorer="https://testnet.xrpl.org">Testnetに接続する</button>
 <div>
   <strong>接続ステータス：</strong>
   <span id="connection-status">接続されていません</span>
-  <div class="loader collapse" id="loader-connect"><img class="throbber" src="assets/img/xrp-loader-96.png"></div>
+
+  {% loading-icon /%}
+
 </div>
-{{ end_step() }}
+
+{% /interactive-block %}

content/@i18n/ja/_snippets/interactive-tutorials/generate-step.md

@@ -1,15 +1,9 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set use_network = "Testnet" %}
-  {% set faucet_url = "https://faucet.altnet.rippletest.net/accounts" %}
-{% elif use_network == "Devnet" %}
-  {% set faucet_url = "https://faucet.devnet.rippletest.net/accounts" %}
-{# No faucet for Mainnet! #}
-{% endif %}
+{% interactive-block label=default($label, "Generate") steps=$frontmatter.steps %}
 
-{{ start_step("Generate") }}
-<button id="generate-creds-button" class="btn btn-primary" data-fauceturl="{{faucet_url}}">{{use_network}}の暗号鍵を作成する</button>
-<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png">暗号鍵を作成しています…</div>
+<button id="generate-creds-button" class="btn btn-primary" data-fauceturl="https://faucet.altnet.rippletest.net/accounts">Testnetの暗号鍵を作成する</button>
+{% loading-icon message="暗号鍵を作成しています…" /%}
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 **注意:** Rippleは[TestnetとDevnet](../../concepts/networks-and-servers/parallel-networks.md)をテストの目的でのみ運用しており、その状態とすべての残高を定期的にリセットしています。予防措置として、Testnet、DevnetとMainnetで同じアドレスを使用**しない**ことをお勧めします。

content/@i18n/ja/_snippets/interactive-tutorials/wait-step.md

@@ -1,12 +1,6 @@
-{% if use_network is undefined or use_network == "Testnet" %}
-  {% set explorer_url = "https://testnet.xrpl.org" %}
-{% elif use_network == "Devnet" %}
-  {% set explorer_url = "https://devnet.xrpl.org" %}
-{% elif use_network == "Mainnet" %}
-  {% set explorer_url = "https://livenet.xrpl.org" %}
-{% endif %}
+{% interactive-block label=default($label, "Wait") steps=$frontmatter.steps %}
 
-<table class="wait-step" data-explorerurl="{{explorer_url}}">
+<table class="wait-step" data-explorerurl="https://testnet.xrpl.org">
   <tr>
     <th>トランザクションのID:</th>
     <td class="waiting-for-tx">(無）</td>
@@ -25,3 +19,5 @@
   <tr class="tx-validation-status">
   </tr>
 </table>
+
+{% /interactive-block %}

content/@i18n/ja/introduction/what-is-xrp.md

@@ -60,7 +60,7 @@ XRP Ledgerは、2011年から2012年初頭にかけて、Jed McCaleb、Arthur Br
 
 | XRPの"X"ロゴ                          | Ripple社のトリスケリオン                      |
 |:-------------------------------------|:-------------------------------------------|
-| !["X"ロゴ](assets/img/xrp-x-logo.png) | ![トリスケリオン](/img/ripple-triskelion.png) |
+| !["X"ロゴ](/img/xrp-x-logo.png) | ![トリスケリオン](/img/ripple-triskelion.png) |
 
 
 ### 商標

content/@i18n/ja/references/protocol/ledger-data/index.md

@@ -2,6 +2,8 @@
 html: ledger-data-formats.html
 parent: protocol-reference.html
 blurb: XRP Ledgerの共有状態を構成する個別のデータオブジェクトについて説明します。
+metadata:
+  indexPage: true
 ---
 # レジャーのデータ型
 
@@ -16,5 +18,4 @@ XRP Ledgerに各レジャーバージョンは3つの要素で構成されてい
 
 {% partial file="/_snippets/ledger-objects-intro.md" /%}
 
-{% from '_snippets/macros/page-children.md' import page_children with context %}
-{{ page_children(pages|selectattr("html", "eq", "ledger-object-types.html")|first, 1, 1, True) }}
+{% child-pages /%}

content/@i18n/ja/tutorials/get-started/monitor-incoming-payments-with-websocket.md

@@ -22,8 +22,8 @@ WebSocketは、クライアントとサーバーが1つの接続を確立し、
 - 丸め方によるエラーを発生させることなくXRPの価値を適切に処理するには、64ビット符号なし整数で計算できる数値タイプを使用できる必要があります。このチュートリアルの例では、[big.js](https://github.com/MikeMcl/big.js/)を使用しています。[トークン](../../concepts/tokens/index.md)を使用する場合は、さらに高い精度が求められます。詳細は、[通貨の精度](../../references/protocol/data-types/currency-formats.md#xrpの精度)を参照してください。
 
 <!-- Helper for interactive tutorial breadcrumbs -->
-<script type="application/javascript" src="assets/vendor/big.min.js"></script>
-<script type="application/javascript" src="assets/js/interactive-tutorial.js"></script>
+<script type="application/javascript" src="/vendor/big.min.js"></script>
+<script type="application/javascript" src="/js/interactive-tutorial.js"></script>
 <script type="application/javascript">
 // Helper stuff for this interactive tutorial specifically
 
@@ -36,9 +36,7 @@ function writeToConsole(console_selector, message) {
 
 </script>
 
-{% set n = cycler(* range(1,99)) %}
-
-## {{n.next()}}. XRP Ledgerへの接続
+## 1. XRP Ledgerへの接続
 
 着信ペイメントを監視する最初のステップとして、XRP Ledger、つまり`rippled`サーバーに接続します。
 
@@ -75,13 +73,15 @@ const socket = new WebSocket('ws://localhost:6006')
 
 例:
 
-{{ start_step("Connect") }}
+{% interactive-block label="Connect" steps=$frontmatter.steps %}
+
 <button id="connect-socket-button" class="btn btn-primary">Connect</button>
 <strong>Connection status:</strong>
 <span id="connection-status">Not connected</span>
 <h5>Console:</h5>
 <div class="ws-console" id="monitor-console-connect"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 let socket;
@@ -113,7 +113,7 @@ $("#connect-socket-button").click((event) => {
 </script>
 
 
-## {{n.next()}}. ハンドラーへの着信メッセージのディスパッチ
+## 2. ハンドラーへの着信メッセージのディスパッチ
 
 WebSocket接続では、複数のメッセージをどちらの方向にも送信することが可能で、要求と応答の間に厳密な1:1の相互関係がないため、各着信メッセージに対応する処理を識別する必要があります。この処理をコーディングする際の優れたモデルとして、「ディスパッチャー」関数の設定が挙げられます。この関数は着信メッセージを読み取り、各メッセージを正しいコードのパスに中継して処理します。メッセージを適切にディスパッチできるように、`rippled`サーバーでは、すべてのWebSocketメッセージで`type`フィールドを使用できます。
 
@@ -190,12 +190,14 @@ async function pingpong() {
 pingpong()
 ```
 
-{{ start_step("Dispatch Messages") }}
+{% interactive-block label="Dispatch Messages" steps=$frontmatter.steps %}
+
 <button id="enable_dispatcher" class="btn btn-primary" disabled="disabled">Enable Dispatcher</button>
 <button id="dispatch_ping" class="btn btn-primary" disabled="disabled">Ping!</button>
 <h5>Responses</h5>
 <div class="ws-console" id="monitor-console-ping"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 const AWAITING = {}
@@ -259,7 +261,7 @@ $("#dispatch_ping").click((event) => {
 })
 </script>
 
-## {{n.next()}}. アカウントのサブスクライブ
+## 3. アカウントのサブスクライブ
 
 トランザクションがアカウントに影響を及ぼすたびに即座に通知を取得するには、[subscribeメソッド][]を使用してアカウントをサブスクライブします。実際には、このアカウントはあなた自身のアカウントでなくてもかまいません。すべてのトランザクションは公開されているため、任意のアカウントで、または複数のアカウントでもサブスクライブできます。
 
@@ -293,13 +295,15 @@ WS_HANDLERS["transaction"] = log_tx
 
 以下の例では、別のウィンドウまたは別のデバイスで[Transaction Sender](/resources/dev-tools/tx-sender)を開くことと、サブスクライブしているアドレスへのトランザクションの送信を試みます。
 
-{{ start_step("Subscribe") }}
+{% interactive-block label="Subscribe" steps=$frontmatter.steps %}
+
 <label for="subscribe_address">Test Net Address:</label>
 <input type="text" class="form-control" id="subscribe_address" value="rUCzEr6jrEyMpjhs4wSdQdz4g8Y382NxfM">
 <button id="tx_subscribe" class="btn btn-primary" disabled="disabled">Subscribe</button>
 <h5>Transactions</h5>
 <div class="ws-console" id="monitor-console-subscribe"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 async function do_subscribe() {
@@ -332,7 +336,7 @@ const log_tx = function(tx) {
 WS_HANDLERS["transaction"] = log_tx
 </script>
 
-## {{n.next()}}. 着信ペイメントの読み取り
+## 4. 着信ペイメントの読み取り
 
 アカウントをサブスクライブすると、 _アカウントへのすべてのトランザクションとアカウントからのすべてのトランザクション_ 、および _アカウントに間接的に影響を及ぼすトランザクション_ に関するメッセージが表示されます。この例として、[トークン](../../concepts/tokens/index.md)の取引があります。アカウントが着信ペイメントを受け取った日時を認識することを目的とする場合、トランザクションストリームを絞り込んで、実際に支払われた額に基づいて支払いを処理する必要があります。以下の情報を探します。
 
@@ -364,11 +368,13 @@ WS_HANDLERS["transaction"] = log_tx
 
 {% code-snippet file="/_code-samples/monitor-payments-websocket/js/read-amount-received.js" language="js" /%}
 
-{{ start_step("Read Payments") }}
+{% interactive-block label="Read Payments" steps=$frontmatter.steps %}
+
 <button id="tx_read" class="btn btn-primary" disabled="disabled">Start Reading</button>
 <h5>Transactions</h5>
 <div class="ws-console" id="monitor-console-read"><span class="placeholder">(Log is empty)</span></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 <script type="application/javascript">
 function CountXRPDifference(affected_nodes, address) {

content/@i18n/ja/tutorials/get-started/send-xrp.md

@@ -10,6 +10,7 @@ labels:
   - 支払い
   - XRP
 top_nav_grouping: 人気ページ
+steps: ['Generate', 'Connect', 'Prepare', 'Sign', 'Submit', 'Wait', 'Check']
 ---
 # XRPの送金
 
@@ -18,8 +19,8 @@ top_nav_grouping: 人気ページ
 ## 前提条件
 
 <!-- このチュートリアルのインタラクティブ部分のソースコード： -->
-<script type="application/javascript" src="assets/js/tutorials/send-xrp.js"></script>
-{% set use_network = "Testnet" %}
+<script type="application/javascript" src="/js/interactive-tutorial.js"></script>
+<script type="application/javascript" src="/js/tutorials/send-xrp.js"></script>
 
 - このページでは、xrpl.jsライブラリーを使用するJavaScriptの例を紹介します。[xrpl.js入門ガイド](get-started-using-javascript.md)に、xrpl.jsを使用してJavaScriptからXRP Ledgerデータにアクセスする方法の説明があります。
 
@@ -28,9 +29,8 @@ top_nav_grouping: 人気ページ
 {% partial file="/_snippets/interactive-tutorials/generate-step.md" /%}
 
 ## Testnetでの送金
-{% set n = cycler(* range(1,99)) %}
 
-### {{n.next()}}. Testnetサーバーへの接続
+### 1. Testnetサーバーへの接続
 
 必須の自動入力可能フィールドに入力されるようにするために、ripple-libを、アカウントの現在のステータスと共有レジャー自体を取得できるサーバーに接続する必要があります。（セキュリティを高めるために、トランザクションの署名はオフライン中に行うことを推奨します。ただしその場合は、自動入力可能フィールドに手動で入力する必要があります。）トランザクションの送信先となるネットワークに接続する必要があります。
 
@@ -58,7 +58,7 @@ top_nav_grouping: 人気ページ
 {% partial file="/_snippets/interactive-tutorials/connect-step.md" /%}
 
 
-### {{n.next()}}. トランザクションの準備
+### 2. トランザクションの準備
 
 通常は、XRP LedgerトランザクションをオブジェクトとしてJSON[トランザクションフォーマット](../../references/protocol/transactions/index.md)で作成します。以下の例に、必要最小限の送金仕様を示します。
 
@@ -96,7 +96,8 @@ XRP送金に対して指定する必要がある必要最小限の指示は次
 
 {% /tabs %}
 
-{{ start_step("Prepare") }}
+{% interactive-block label="Prepare" steps=$frontmatter.steps %}
+
 <div class="input-group mb-3">
   <div class="input-group-prepend">
     <span class="input-group-text">送金する額：</span>
@@ -110,9 +111,10 @@ XRP送金に対して指定する必要がある必要最小限の指示は次
 </div>
 <button id="prepare-button" class="btn btn-primary previous-steps-required">サンプルトランザクションを準備する</button>
 <div class="output-area"></div>
-{{ end_step() }}
 
-### {{n.next()}}. トランザクションの指示への署名
+{% /interactive-block %}
+
+### 3. トランザクションの指示への署名
 
 xrpl.jsの[Wallet.sign()メソッド](https://js.xrpl.org/classes/Wallet.html#sign)を使用して、トランザクションに署名します。最初の引数は、署名するJSONトランザクションの文字列バージョンです。
 
@@ -137,13 +139,15 @@ xrpl.jsの[Wallet.sign()メソッド](https://js.xrpl.org/classes/Wallet.html#si
 
 署名APIは、トランザクションのID、つまり識別用ハッシュを返します。この識別用ハッシュは、後でトランザクションを検索する際に使用します。識別用ハッシュは、このトランザクションに固有の64文字の16進文字列です。
 
-{{ start_step("Sign") }}
+{% interactive-block label="Sign" steps=$frontmatter.steps %}
+
 <button id="sign-button" class="btn btn-primary previous-steps-required">サンプルトランザクションに署名する</button>
 <div class="output-area"></div>
-{{ end_step() }}
 
+{% /interactive-block %}
 
-### {{n.next()}}. 署名済みブロブの送信
+
+### 4. 署名済みブロブの送信
 
 トランザクションをネットワークに送信します。
 
@@ -174,13 +178,17 @@ xrpl.jsの[Wallet.sign()メソッド](https://js.xrpl.org/classes/Wallet.html#si
 
 他の可能性については、[トランザクション結果](../../references/protocol/transactions/transaction-results/transaction-results.md)の完全なリストを参照してください。
 
-{{ start_step("Submit") }}
+{% interactive-block label="Submit" steps=$frontmatter.steps %}
+
 <button id="submit-button" class="btn btn-primary previous-steps-required" data-tx-blob-from="#signed-tx-blob" data-wait-step-name="Wait">サンプルトランザクションを送信する</button>
-<div class="loader collapse"><img class="throbber" src="assets/img/xrp-loader-96.png"> 送信中...</div>
+
+{% loading-icon message=" 送信中..." /%}
+
 <div class="output-area"></div>
-{{ end_step() }}
 
-### {{n.next()}}. 検証の待機
+{% /interactive-block %}
+
+### 5. 検証の待機
 
 ほとんどのトランザクションは送信後の次のレジャーバージョンに承認されます。つまり、4～7秒でトランザクションの結果が最終的なものになる可能性があります。XRP Ledgerがビジーになっているか、ネットワーク接続の品質が悪いためにトランザクションをネットワーク内で中継する処理が遅延した場合は、トランザクション確定までにもう少し時間がかかることがあります。（トランザクションの有効期限を設定する方法については、[信頼できるトランザクションの送信](../../concepts/transactions/reliable-transaction-submission.md)を参照してください。）
 
@@ -200,12 +208,10 @@ xrpl.jsの[Wallet.sign()メソッド](https://js.xrpl.org/classes/Wallet.html#si
 
 {% /tabs %}
 
-{{ start_step("Wait") }}
 {% partial file="/_snippets/interactive-tutorials/wait-step.md" /%}
-{{ end_step() }}
 
 
-### {{n.next()}}. トランザクションステータスの確認
+### 6. トランザクションステータスの確認
 
 トランザクションが行った内容を正確に把握するために、トランザクションが検証済みレジャーバージョンに記録されたときにトランザクションの結果を調べる必要があります。例えば、[txメソッド][]を使用して、トランザクションのステータスを確認できます。
 
@@ -228,10 +234,12 @@ xrpl.jsの[Wallet.sign()メソッド](https://js.xrpl.org/classes/Wallet.html#si
 
 **注意:** APIは、まだ検証されていないレジャーバージョンからの暫定的な結果を返す場合があります。例えば、`rippled` APIの[txメソッド][]を使用した場合は、応答内の`"validated": true`を探して、データが検証済みレジャーバージョンからのものであることを確認してください。検証済みレジャーバージョンからのものではないトランザクション結果は、変わる可能性があります。詳細は、[結果のファイナリティー](../../concepts/transactions/finality-of-results/index.md)を参照してください。
 
-{{ start_step("Check") }}
+{% interactive-block label="Check" steps=$frontmatter.steps %}
+
 <button id="get-tx-button" class="btn btn-primary previous-steps-required">トランザクションステータスを確認する</button>
 <div class="output-area"></div>
-{{ end_step() }}
+
+{% /interactive-block %}
 
 
 ## 本番環境の場合の相違点