Zenn
📖

画像リストから、自動でスライドショーを生成するWebツールを開発しました

に公開
AI
HTML
JavaScript
zennfes2025ai
スライドショー
idea

承知いたしました。Zennに投稿する記事を作成します。

Zennはデザイン性を重視したシンプルなプラットフォームなので、Qiitaの記事よりも見出しや構成をより洗練されたものに調整します。AI（Gemini）に作ってもらったものであるという一文も冒頭に含めます。

Zenn投稿記事（全文）

画像リストから、自動でスライドショーを生成するWebツールを開発しました

この記事は、AIアシスタントのGeminiとの対話を通じて作成されました。

はじめに

もしあなたが「WordPressは使わない、もっとシンプルなWebサイトを作りたい」と考えているなら、こんな悩みを抱えていませんか？

  • 写真の枚数が多いスライドショーをHTMLで書くのが面倒
  • 画像を1枚追加するたびに、HTMLコードを編集するのが大変

この課題を解決するため、AIと協力して**「画像ファイルのリストからHTMLスライドショーを自動で生成するWebツール」**を開発しました。ローカルでもサーバーにアップロードしても使えます。

機能紹介

このツールが生成するスライドショーは、シンプルながらも使いやすい機能を備えています。

  • 遅延ロード: 大量の画像があっても、ページを素早く表示します。
  • キーボード操作: PCでは矢印キーでスライドを切り替えられます。
  • スワイプ操作: スマートフォンやタブレットで直感的にスワイプ操作が可能です。
  • 全画面表示: 迫力のあるスライドショーを全画面で楽しめます。
  • スタンドアロン: 生成されたHTMLファイル単体で動作します。

使い方

  1. ツールを起動

    以下のURLにアクセスします。

  2. ファイル名を入力

    テキストエリアに、スライドショーにしたい画像ファイルのファイル名を1行に1つずつ入力してください。

    0001.jpg
0002.jpg
0003.jpg

  3. 作成・保存

    「作成」ボタンを押すと、下側のエリアにHTMLソースコードが出力されます。「保存」ボタンを押して、slideshow-v017.htmlとしてダウンロードしてください。

デモ

まずは、このツールで生成されたスライドショーがどのようなものか、デモでご確認ください。

開発の舞台裏

このプロジェクトは、AIアシスタントのGeminiと対話しながら進めました。

当初のアイデアは「シンプルなスライドショー」でしたが、Geminiからの提案で、遅延ロードやスワイプ操作といった高機能な要素が加わりました。AIは単なるコード生成ツールではなく、まるで開発パートナーのようでした。

まとめ

このツールが、あなたのWebサイト開発を少しでも楽にできれば幸いです。

今後は、ドラッグ＆ドロップでファイルリストを読み込む機能などを追加する予定です。もし興味を持っていただけたら、GitHubのIssuesでぜひフィードバックをお願いします！

Discussion