Laravel News で紹介されていましたが、Laravel+Vue+PosgreSQL で構築されているテキストファーストのプレゼンテーションツール Simple Slides をローカル環境で使ってみました。
Simple Slides とは
ブラウザ上で動作する、レスポンシブでテキストファーストのプレゼンテーションツールです。
Googleスライドをテキスト主体にした超簡易版といったところでしょうか。
スライドのデータは単一のMarkdown形式で保存されるので、
太字やリンク、画像等、ある程度 Markdown形式が反映されます。
空行で改ページとなるので、その辺が Markdown反映の限界になります。
※コードブロックが意図しない箇所で分解されたりします。
※Markdownの表は反映されません。
WEB上のMarkdownファイルを指定してスライド作成が可能です。
ログインすると、複数のスライド用Markdownファイルの管理が可能です。
Simple Slides 自体は、X11アプリケーションのDesktop用プレゼンテーションツール「Sent」からインスピレーションを得たようです。
管理画面には filament が使用されています。
前提条件
- Laravel11を使っていきます
- Dockerインストール済
- Composerインストール済
- Ubuntu24.04(WSL2)上で作業しています
※筆者の場合、DockerはWindows用のDocker Desktopをインストールしています。
※Windows上でDocker Desktopを起動すると、WSL2上のUbuntuでDockerサービスが起動されます。
環境構築
Github上のSimple Slidesのリポジトリをクローンします。
git clone https://github.com/alkrauss48/simple-slides.git
プロジェクトフォルダに入って、Composerで依存関係をインストールします。
cd simple-slides
composer install
「.env.example」をコピーして「.env」を作成します。
cp .env.example .env
sailを起動します。
./vendor/bin/sail up
※コンテナ群の構築に数分かかります。
sailの起動が完了したら、
sail 経由でnpmの依存関係をインストールします。
./vendor/bin/sail npm install
※今回はローカル環境での稼働なのでセキュリティ警告は無視します。
次に、アプリケーションキーを生成します。
./vendor/bin/sail artisan key:generate
マイグレーションをシーダーオプション付きで実行します。
※ログインユーザー「test@example.com」が作成されます。
./vendor/bin/sail artisan migrate:fresh --seed
別ターミナルで VITE を起動します。
./vendor/bin/sail npm run dev
WEBブラウザで http://localhost/ にアクセスします。
デフォルトのスライドが表示されました。
サムネイルを作成する場合、追加の設定が必要です。
PuppeteerとBrowsershotのインストールが必要です。
./vendor/bin/sail root-shell ./docker/sail-extra.sh少し時間がかかります。
./vendor/bin/sail npx puppeteer browsers install chrome
新規スライド作成
デフォルトスライドの右上にある歯車アイコンをクリックすると設定ページが表示されます。
中央のテキストエリアにMarkdownのURLを入力して「Present」ボタンを押下するとスライドが表示されます。
試しに、Laravel公式ドキュメントの「installation.md」を指定してみます。
スライドが作成されました。
スライドの操作
スライドの表示切替は、マウスとキーボードの両方で可能です。
| 操作 | 方法 |
|---|---|
| １スライド進める | [→]キー [SPACE]キー [Enter]キー [j](ジェイ)キー [l](エル)キー (画面右下)▶アイコン |
| １スライド戻す | [←]キー [Backspace]キー [k](ケイ)キー [h](エイチ)キー (画面右下)◀アイコン |
| ５スライド進める | [f](エフ)キー |
| ５スライド戻す | [b](ビー)キー |
| 最初に戻す | [0](ゼロ)キー |
| 最後に進める | [$](ドル)キー |
※現スライド番号、全スライド数の表示があればいいのに
※スライド番号指定で移動できればいいのに
※プログレスバークリック or ドラッグでスライド移動できればいいのに
ユーザーログイン
ユーザーログイン画面 http://localhost/login にアクセスします。
マイグレーション時に作成された「test@example.com」でログインしてみます。
「Email」＝「test@example.com」
「Password」＝「password」
でログインします。
filamentで作成されたダッシュボードが表示されます。
左上のハンバーガーメニューで表示されるサイドメニューから「Presentations」を選択します。
デフォルトで登録されているサンプルのスライドが３種類リスト表示されます。
リスト右端のアイコンから「表示」「編集」「複製」が可能です。
リストをクリックしても編集画面に遷移します。
画面右上の「More」から「表示」「URLコピー」「サムネイル作成」「削除」が可能です。
「Presentation」のリストに戻り「New presentation」ボタンからスライドの新規作成画面に移動します。
画面下部の「Details」の項目を埋めて「Create」ボタンを押下します。
※「Slug」はスライド表示時のURLの識別子になります。
※URLの形式は「http(s)://[HOSTNAME]/[USER]/[Slug](?index=[INDEX])」となります。
画面右上の「More」から「View」を選択してスライドを表示させてみます。
表示されました。
最後に
今回はお試しということで、使えた箇所だけ掲載しています。
今回、サムネイルの生成はできなかったので記載していません。
また、メニューの中でもエラーが出た箇所は飛ばしています。
以上です。
- 0
- 0
- 0
- 0
コメント