今回のブログ担当は石川です。最近新しくベータ版がリリースされたSlidevというMarkdownベースのスライド作成ツールを紹介します。
※ Slidev公式サイトにSlidev is still under heavy development. API and usages are not set in stone yet.
と明記されているとおりSlidevはまだベータ版で、このブログに書いてある内容についても仕様が変わる可能性があります。
Markdown記法で書いたテキストをスライドに変換するツールです。
こういったツールは他にもいろいろありますが、Slidevはnpx slidev
コマンドで起動した状態でhttp://localhost:3030
にブラウザでアクセスすると、slides.mdファイル内のMarkdownテキストを元に変換したスライドを表示するという手元で動かすタイプ。
http://localhost:3030/presenter
にアクセスするとKeynoteやPowerpointのようにプレゼンター用のページがあり、残り時間やコメントを確認することができるかなりカスタマイズ性が高いので、「Markdownから簡単にスライドを作る」という使い方だけで無く 「Gitでバージョン管理できるテキストファイルによって凝ったスライドを作る」 という使い方もできるんじゃないでしょうか。
シンタックスハイライターとしてPrismとShikiの両方をサポートしていて、好きな方を選べます。
また、次のようにコードブロックを書くと、指定した一部の行を強調することができます。 コードの意図や動きを一つ一つ説明していくときに使えそうです。
{all|1-3|4-5}
のようにパイプ(|)でつなげれば、最初は全体を強調、次は1〜3行目を強調、次は4〜5行目を強調というように分割することもできて便利。
(これを一般的なプレゼンテーションツールでやろうとすると、3枚のコードの画像をそれぞれ独立したページとして表示して切り替える必要があります。)
iframeを埋め込んだときもそのまま動くため、Youtubeの動画やTwitterのつぶやき、CodePenの埋め込みまでできます。いろいろ遊べそうですね。
ちなみに、YoutubeやTwitterについては<Tweet/>
や <Youtube/>
などの記法でも使えます。 <Youtube id="<動画のid>" />
プレゼンテーションを開始してから終了するまでの
を収録し、出力することができます。
最近はオンラインセッションなどでも事前に録画した映像を提出することがありますが、音声と映像を別の機能で撮った場合タイミングを合わせるのに手間がかかります。 この機能なら、同じタイミングで収録を開始するので組み合わせて1つの動画にするのも簡単ですね。
収録機能でインカメラの映像も収録できると書きましたが、スライド上にリアルタイムでインカメラの映像を表示する機能まであります。
基本はMarkdownですが、HTMLやCSSなどを書くことで凝ったレイアウトにもできるようになっています。
とはいえ、せっかくならシンプルに書きたいですよね。SlidevにはWindi CSSが標準で組み込まれているため、Windi CSSで用意されているクラスを利用することができます。
特にグリッド関係は便利そうです。
https://windicss.org/utilities/grid.html
VSCode上でMarkdownを書き、それをVSCode上でプレビューしたりページを切り替えたりできる拡張機能も開発されています。
VSCodeユーザーなのでこれも嬉しいです。
https://marketplace.visualstudio.com/items?itemName=antfu.slidev&ssr=false#overview
プレビューについても、カーソルの位置に合わせてページを追従する機能もあります。
サンプルを見ると <img border="rounded" src="https://github.com/slidevjs/themes/blob/main/screenshots/theme-default/01.png?raw=true">
のようなタグで画像を埋め込んでいる。
試しにsrcのところを画像ファイルを示す相対パスや絶対パスに置き換えてみたが... [vite]: Rollup failed to resolve import "image.png" from "../../../../../@slidev/slides/1.md"
でビルドに失敗した。
→ publicディレクトリを作り、そこにイメージを置けばdistディレクトリにコピーされてslides.mdから指定できるようになることがわかった。
public/image.pngのような画像ファイルを配置したとき、slides.mdでは<img src="/issue.png">
のようにルートパスで書く。
参考情報:
https://sli.dev/custom/directory-structure.html#public
https://vitejs.dev/guide/assets.html#importing-script-as-a-worker
開発がとても活発で勢いがあります。(最近のリリース履歴を見てもほぼ毎日複数のリリースが作られている)
まだベータ版でも使っていてとても楽しめるツールなので、今後が楽しみです。
HTMLとMarkdownで手早く発表用スライドを作れる reveal.js HTMLとMarkdownで手早く発表用スライドを作れる reveal.js を初めて使ってみました。 |
|
RedMica(Redmine互換のオープンソースウェア)のユーザーズガイドを作りました RedMicaの管理機能のリファレンス「RedMica ユーザーズガイド」を公開しました。 |
|
スマートフォン2台持ちになりました 2台のスマホを使い分けることで、よりスマホを安全に使える安心感を得られます。 |
|
AWS Amplify のサンドボックスを試してみた AWSアカウント無しで利用できる、AWS Amplifyのサンドボックスを試してみました。 |
|
2020年2月にシンガポールの海底ケーブル陸揚げ局を見に行った インターネットを支える海底ケーブル陸揚げ局の外観を見ることができました。 |
2024年5月11日 オライリー本の全冊公開日のお知らせ(もくもく勉強会も同時開催) ファーエンドテクノロジーが所蔵するオライリー本(全冊)公開日のご案内です。公開日には「もくもく勉強会」も同時開催します。 |
|
入門Redmine 第6版 出版記念企画セミナー「Redmineのアクセス制御」【2024/5/30開催】 入門Redmine 第6版(2024年3月23日発売)の書籍から「Redmineのアクセス制御」について解説します。 |
|
My Redmine 初回ご契約で「入門Redmine 第6版」プレゼントのお知らせ Redmineのクラウドサービス「My Redmine」を初めてご契約いただいたお客様にRedmine解説書「入門Redmine 第6版」を進呈いたします。 |
|
2024年度ブランドパートナーに島根県在住のモデル ユイさんを継続起用 ユイさん(モデルスタジオミューズ所属)をファーエンドテクノロジーの2024年度ブランドパートナーとして継続して起用します。 |
|
Redmineの最新情報をメールでお知らせする「Redmine News」配信中 新バージョンやセキュリティ修正のリリース情報、そのほか最新情報を迅速にお届け |