こんにちはAtaroです。この頃暑いですね。とある事情で自転車を30分間こいだのですが、汗びっしょりになってしまいました。昔の6月って暑かったっけ...?
そんなことはさておき、今回は近頃自分が実践しているLLMを用いたカンタンなWebツールの自作について解説していきたいと思います
カンタンなWebツールならAIで作れる時代
ちょっとした物事とかを解決してくれるWebツールってインターネットにあふれてますよね
文章の文字数を数えてくれるアプリとか、1GBって何MBだっけとか、MarkDownのテーブルをHTMLのテーブルに変換したいとか...etc
今までだったらWebツールをググって使用したりしてたと思うんですが、Webツールってオフラインだと使えなかったり、そもそも業務の機密データを入れたいから使えないなんてことがあってちょっと不便があったかもしれません
でも、令和7年にはそんな悩みはAIによって解消できます！
上記であげた文字数を数えるアプリとかはAIで超カンタンに作れるんです！
Webツールの作り方
基本的の考え方
- AIにHTMLとピュアなJavaScriptでアプリのコードを書いてもらう
- それをHTMLファイルにしてブラウザで開く
実際のプロンプトを伝授します！
基本的な考え方のまんまをプロンプトとして与えればOK
プロンプト
以下のツールをHTMLとピュアなJavaScriptで作成して
（ここに作りたいツールの内容を書く）
実際に簡単なWebツールを作ってみよう
1. 文字数をカウントするツールを作成する
以下のプロンプトを作成して適当なAIに投げ込んでください、大体一発で出来ます
以下のツールをHTMLとピュアなJavaScriptで作成して
文字数を数えるツール
ChatGPT4oの例
あとは、できたファイルをメモ帳などでテキストファイルとして保存してから拡張子をhtmlに変えてダブルクリックするだけ
リアルタイムで文字数を書いてくれるツールがすぐにできました
2. Youtubeのプレイリストループ再生ツールを作る
Youtubeで特定の音楽動画を複数プレイリストにしてループ再生したいことありますよね
Youtubeの標準機能でプレイリストを作成してループ再生できますが、ちょっと面倒
でもこういうツールもAIならすぐに作れます!
ChatGPT4oの例
https://chatgpt.com/share/6853fab0-6024-8013-be96-49deec9b8d68
以下のツールをHTMLとピュアなJavaScriptで作成して
Youtubeで動画のプレイリストを作成して自動でループ再生するツール
ちょっとこれはすごいですよね...
ものによっては再生できないこともありますが、それは無料の自作ツールの宿命ということで
あとがき
今回の記事いかがだったでしょうか？
もし、気に入ってくださったり、こんなツールをつくりました！ とかあればコメントやXのDMで教えてくれるとありがたいです
それでは