hextra_mirror/exampleSite/content/docs/guide/shortcodes/asciinema.ja.md

title, linktitle, sidebar

title	linktitle	sidebar
Asciinema Player コンポーネント	Asciinema Player	exclude true

asciinema shortcode を使用すると、asciinema で作成されたターミナル録画を Hugo サイトに埋め込むことができます。再生制御、速度調整、テーマカスタマイズなどの機能を備えたリッチなターミナルプレイヤーを提供します。

基本的な使用方法

asciinema shortcode はローカルの .cast ファイルとリモート URL の両方をサポートしています。ローカルファイルを使用する方法は以下の通りです：

ローカルファイル

方法 1：Assets ディレクトリ（推奨） cast ファイルを Hugo サイトの assets/ ディレクトリに配置：

your-site/
├── assets/
│   └── demo.cast
└── content/
    └── my-page.md

markdown ファイル内：

{{</* asciinema file="demo.cast" */>}}

方法 2：Static ディレクトリ cast ファイルを static/ ディレクトリに配置：

your-site/
├── static/
│   └── demo.cast
└── content/
    └── my-page.md

markdown ファイル内：

{{</* asciinema file="demo.cast" */>}}

方法 3：ページバンドル ページバンドルの場合、cast ファイルを markdown ファイルと一緒に配置：

your-site/
└── content/
    └── my-page/
        ├── index.md
        └── demo.cast

markdown ファイル内：

{{</* asciinema file="demo.cast" */>}}

{{< asciinema file="casts/demo.cast" >}}

リモートファイル

任意のリモート URL からの cast ファイルも使用できます：

{{</* asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" */>}}
{{</* asciinema file="https://example.com/demo.cast" */>}}

{{< asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" >}}

ファイル検索の仕組み

shortcode は以下の順序で cast ファイルを自動的に検索します：

1. ページバンドルリソース（ページバンドルを使用している場合）
2. グローバル assets ディレクトリ（assets/）
3. Static ディレクトリ（static/）
4. リモート URL（パスが http:// または https:// で始まる場合）

ファイルが見つからない場合、Hugo はファイルをどこに配置すべきかを示す有用なエラーメッセージを表示します。

高度なデモ

利用可能なすべてのパラメータを紹介する高度な例：

{{</* asciinema 
  file="demo.cast"
  theme="dracula"
  speed="2"
  autoplay="true"
  loop="true"
  markers="1.5:Installation,3.2:Configuration,5.8:Testing"
*/>}}

{{< asciinema file="casts/demo.cast" theme="dracula" speed="2" autoplay="true" loop="true" markers="1.5:Installation,3.2:Configuration,5.8:Testing"

}}

パラメータ

パラメータ	型	デフォルト	説明
file	string	-	.cast ファイルパス（必須）。ローカルファイル、絶対パス、リモート URL をサポート
theme	string	"asciinema"	プレイヤーテーマ
speed	number	1	再生速度倍率
autoplay	boolean	false	自動再生
loop	boolean	false	ループ再生
poster	string	""	再生開始前に表示されるポスター（プレビューフレーム）。NPT表記法をサポート（例："npt:1:23"）
markers	string	""	カンマ区切りの時間マーカー。形式："時間:ラベル" または "時間"のみ（例："1.5:Installation,3.2:Configuration,5.8"）