1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FTPでHTMLをアップロードする人に朗報!AIと作った、コピペで高機能スライドショーが作れるツールを公開します

Posted at

承知いたしました。ご依頼の構成案に基づき、Qiitaに投稿する記事の全文を作成します。

AI(Gemini)に作ってもらったものであるという一文を冒頭に入れて、読者に開発の背景を明確に伝えます。


Qiita投稿記事(全文)


FTPでHTMLをアップロードする人に朗報!AIと作った、コピペで高機能スライドショーが作れるツールを公開します

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

はじめに

WordPressなどのCMSを使わずに、FTPでHTMLを直接アップロードしてサイトを作っている皆さん、こんにちは。

スライドショーをWebサイトに追加したいとき、HTMLをひとつひとつ手書きで編集するのは面倒ですよね。画像の枚数が増えると、コードの管理も大変になります。

そんな悩みを解決するために、AIアシスタントのGeminiと一緒に、画像ファイルをリストアップするだけで、高機能なHTMLスライドショーを自動で生成するツールを開発しました。

✨ ツールのデモと機能

まずは、このツールで何ができるのか、完成したスライドショーのデモをご覧ください。

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

  • 遅延ロード (Lazy Loading): 大量の画像でもページが素早く表示されます。
  • キーボード操作: PCでは左右の矢印キーでスライドを切り替えられます。
  • スワイプ操作: スマートフォンやタブレットで直感的にスワイプ操作が可能です。
  • 全画面表示・自動再生: ユーザーが自由にスライドショーを制御できます。
  • スタンドアロン: 生成されたHTMLファイル単体で動作するため、サーバーの複雑な設定は不要です。

🚀 使い方ガイド(たったの3ステップ!)

FTPユーザーの皆さんが、慣れ親しんだ環境で簡単に使えるように工夫しました。

  1. ツールを起動
    以下のURLからツールにアクセスします。

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

    入力例:

    0001.jpg
    0002.jpg
    0003.jpg
    ...
    
  3. ソースコードを作成・保存
    「作成」ボタンを押すと、下側のエリアにHTMLソースコードが出力されます。次に「保存」ボタンを押して、slideshow-v017.htmlというファイル名でダウンロードしてください。

これで、高機能なスライドショーのHTMLファイルが手に入ります。ダウンロードしたHTMLファイルを、画像ファイルと同じフォルダにアップロードするだけで、すぐにスライドショーが使えます。

🤖 開発の舞台裏:AIと作ったメリット

このツール開発のすべての過程は、私とAI(Gemini)との対話を通じて行われました。

当初は「シンプルなスライドショーが欲しい」という漠然としたアイデアからスタートしましたが、Geminiに相談することで、遅延ロードキーボード/スワイプ操作といった、思いもしなかった高機能なアイデアを提案してもらうことができました。

技術的な知識がなくても、**「こういう機能を追加したい」**という言葉を伝えるだけで、Geminiが具体的なコードを生成してくれます。今回の開発を通して、AIが個人開発の強力なパートナーになることを実感しました。

まとめと今後の展望

今回公開したスライドショー作成ツールは、FTPでWebサイトを管理している皆さんの手助けになることを願って作りました。

今後は、ファイル名のリストを自動で読み込むドラッグ&ドロップ機能などを追加していく予定です。もしバグを見つけたり、改善点があれば、ぜひGitHubのIssuesでフィードバックをいただけると嬉しいです!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?