feat: add ja-jp

Author: crazywoola

docs.json

@@ -1551,7 +1551,8 @@
                                         "pages": [
                                             "ja-jp/workshop/basic/README",
                                             "ja-jp/workshop/basic/build-ai-image-generation-app",
-                                            "ja-jp/workshop/basic/travel-assistant"
+                                            "ja-jp/workshop/basic/travel-assistant",
+                                            "ja-jp/workshop/basic/the-right-way-of-markdown"
                                         ]
                                     },
                                     {

ja-jp/workshop/basic/the-right-way-of-markdown.mdx

@@ -0,0 +1,234 @@
+---
+title: Markdown の正しい使い方
+---
+
+[Markdown](https://www.markdownguide.org/basic-syntax/) は、Dify アプリの出力をプレーンテキストから、適切に整形されたプロフェッショナルなレスポンスに変換することができます。Answer や End ノードで Markdown を使うことで、見出し・リスト・コードブロック・表などをレンダリングし、エンドユーザーにとって分かりやすい視覚的階層を構築できます。
+
+## Dify における基本的な Markdown 構文
+
+Answer / End ノード内で以下のような要素を Markdown で描画できます：
+
+* 見出し
+* 太字、斜体、取り消し線
+* リスト
+* 表
+* 複数行のコードブロック
+* オーディオとビデオ
+
+### 見出し
+
+`#` を使って見出しを作成します。`#` の数が見出しの階層を表します：
+
+```markdown
+# 見出し 1
+## 見出し 2
+### 見出し 3
+```
+
+### 太字・斜体・取り消し線
+
+以下のような構文でテキストのスタイルを変更できます：
+
+```markdown
+**太字テキスト**
+*斜体テキスト*
+~~取り消し線テキスト~~
+```
+
+### リスト
+
+順序付きおよび順序なしリストを作成できます：
+
+```markdown
+- 順序なし項目 1
+- 順序なし項目 2
+  - ネストされた項目
+1. 順序付き項目 1
+2. 順序付き項目 2
+   1. ネストされた項目
+```
+
+### 表
+
+パイプ（|）とハイフン（-）を使って表を作成します：
+
+```markdown
+| ヘッダー 1 | ヘッダー 2 |
+|------------|------------|
+| 行 1 列 1  | 行 1 列 2  |
+| 行 2 列 1  | 行 2 列 2  |
+```
+
+### 複数行のコードブロック
+
+3つのバッククォート（\`\`\`）を使ってコードブロックを作成します：
+
+```python
+def hello_world():
+    print("Hello, World!")
+```
+
+### オーディオとビデオ
+
+以下の構文を使用して、音声および動画を埋め込むことができます：
+
+```markdown
+<video controls>
+  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
+</video>
+<audio controls>
+  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+</audio>
+```
+
+<Note>
+Markdown の使い方についてさらに詳しく知りたい場合は、[Markdown Guide](https://www.markdownguide.org/basic-syntax/) をご参照ください。
+</Note>
+
+---
+
+## Dify における高度な Markdown 機能
+
+### ボタンとリンク
+
+LLM が自動生成したフォローアップ質問が不満な場合、Markdown のボタンやリンクを使って会話の流れをコントロールすることができます。
+
+<img src="/images/screenshot-20250714-134035.png" className="mr-auto"/>
+
+以下の構文でボタンとリンクを作成できます：
+
+```
+<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
+<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
+```
+
+ボタンには次の2つの属性が必要です：
+
+* `data-variant`: ボタンのスタイル。`primary`、`secondary`、`warning`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary` など
+* `data-message`: ボタンがクリックされたときに送信されるメッセージ
+
+リンクの構文はよりシンプルです：
+
+```
+<a href="https://dify.ai" target="_blank">Dify</a>
+```
+
+会話内で特定のアクションをトリガーする省略リンク (`abbr`) も使えます：
+
+```
+[特別リンク](abbr:special-link)
+```
+
+---
+
+### フォーム（Form）
+
+フォームを使用する際には `data-format` 属性を設定する必要があります。`json` または `text` を指定でき、デフォルトは `text` です。`data-format="json"` に設定すると JSON 形式で送信されます。
+
+<img src="/images/screenshot-20250714-134150.png" className="mr-auto"/>
+
+#### サポートされている入力タイプ
+
+Dify では以下の入力タイプをフォームで利用できます：
+
+* text（テキスト）
+* textarea（複数行テキスト）
+* password（パスワード）
+* time（時間）
+* date（日付）
+* datetime（日付と時間）
+* select（セレクトボックス）
+* checkbox（チェックボックス）
+* hidden（非表示フィールド）
+
+以下のような構文で会話中にフォームを描画できます：
+
+```
+<form data-format="json"> // デフォルトは text
+  <label for="username">ユーザー名：</label>
+  <input type="text" name="username" />
+  <label for="hidden_input">非表示項目：</label>
+  <input type="hidden" name="hidden_input" value="hidden_value" />
+  <label for="password">パスワード：</label>
+  <input type="password" name="password" />
+  <label for="content">内容：</label>
+  <textarea name="content"></textarea>
+  <label for="date">日付：</label>
+  <input type="date" name="date" />
+  <label for="time">時間：</label>
+  <input type="time" name="time" />
+  <label for="datetime">日時：</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">選択：</label>
+  <input type="select" name="select" data-options='["hello","world"]'/>
+  <input type="checkbox" name="check" data-tip="チェックすることで同意と見なされます"/>
+  <button data-variant="primary">ログイン</button>
+</form>
+```
+
+<Note>
+  `hidden` タイプの入力はユーザーに表示されず、ユーザーの操作なしにデータを渡すのに使用されます。
+</Note>
+
+---
+
+### グラフ（Chart）
+
+Markdown 内で [echarts](https://dify.ai/docs/guides/tools/chart) を使ってグラフを描画できます。以下のような構文を使用します：
+
+<img src="/images/screenshot-20250714-134238.png" className="mr-auto"/>
+
+<Note>
+  グラフを描画するには、<code>\`\`\`echarts</code> でコードブロックを開始し、その中に設定を記述してください。
+</Note>
+
+```echarts
+{
+  "title": {
+    "text": "ECharts 入門例"
+  },
+  "tooltip": {},
+  "legend": {
+    "data": ["売上"]
+  },
+  "xAxis": {
+    "data": ["シャツ", "カーディガン", "シフォン", "ズボン", "ヒール", "靴下"]
+  },
+  "yAxis": {},
+  "series": [{
+    "name": "売上",
+    "type": "bar",
+    "data": [5, 20, 36, 10, 10, 20]
+  }]
+}
+```
+
+---
+
+### 音楽（譜面）
+
+Markdown では譜面も描画できます。[ABC 記譜法](https://paulrosen.github.io/abcjs/) に対応しており、以下のような構文で利用します：
+
+<img src="/images/screenshot-20250714-134431.png" className="mr-auto"/>
+
+<Note>
+  譜面を描画するには、<code>\`\`\`abc</code> でコードブロックを開始し、ABC 記譜内容を記述してください。
+</Note>
+
+```abc
+X: 1
+T: Cooley's
+M: 4/4
+L: 1/8
+K: Emin
+|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
+EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
+|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
+eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
+```
+
+---
+
+## ベストプラクティス
+
+Markdown コンテンツを事前に定義しておきたい場合は、Dify の [テンプレート機能](/en/guides/workflow/node/template) を活用しましょう。これにより、下流のノードでもテンプレート内容を再利用でき、効率と一貫性を高めることができます。