2026

アプリ・Web

Gaming Slide

背景がゲーミングデバイスのように光り続ける、スライド作成ツールです。ブラウザ版と、ファイル保存やPDF出力に対応したデスクトップ版があります。

担当
企画・設計・実装
人数
1人
道具
HTML・CSS・JavaScript・Canvas API・Electron・Jules・Gemini

帯を引くと、ここで動かせます。

ブラウザ版です。PCでの操作を想定しています。編集した内容は、このブラウザの中にだけ保存されます。

別のタブで開く

ゼミでの自己紹介を少しでも印象に残るものにしたくて作った、プレゼン用のスライド作成ツールです。背景のアニメーションが、編集中も発表中も動き続けます。

見た目は遊びですが、スライドをきれいに作るための編集機能はひととおり実装しました。複数選択と整列、グループ化、元に戻す・やり直す、23種類の書体と行間の調整、画像の差し替えとトリミング、スライドごとのBGMの切り替えなどです。

最初はブラウザだけで動くツールでしたが、その後、デスクトップ版「Cyber Deck Studio」(Windows・macOS)を作りました。プロジェクトをファイルとして保存・再読込でき、各スライドを1ページとしてPDFに出力できます。

実装にはAIコーディングエージェント(Jules、Gemini)を併用しています。

工夫した点

  • 動き続ける背景を軽くする

    背景のアニメーションは、編集中も発表中も動き続けます。重くならないよう、背景の描画を軽くし、スライド一覧の縮小表示は、変わったところだけを描き直しています。

  • 途中で落ちても戻せる

    編集途中のデータは自動で退避し、強制終了のあとに復元できます。プロジェクトは、画像やBGMも含めて1つのファイルに保存します。

  • 実際の画面を動かして確かめる

    文字の編集・行間・整列・書体・グループ化・トリミング・スライドの並べ替えは、実際の画面を動かす自動テストで確かめています。PDFの出力にも、専用のテストがあります。