メインコンテンツへスキップ
見出し画像

ChatGPT Sites !! ChatGPTに「HTML版を作るか」と言ったら、本当にWebサイトが生えた件 軽い記事ヴァージョン😆



    こんにちは黒パグです🐾

    ChatGPTに「驚き屋さん構文クリエイターHTML版作るか」と書きました。

    文章を入力すると、「令和最新版」「乗り遅れるな」「今がチャンス」などを混ぜながら、何となく大ニュースに見える文章へ変換するだけのサイトです。冷風扇と入れれば、「冷風扇はわずか7分で夏を制するの正体とは?」のような、意味は分からないのに勢いだけはある文章を返します。

    画像
    わずか2分で納品してきた


    なくても困らない。

    むしろ、ない方が世の中は少し静かかもしれない。

    そんな話をしていたら、本当にできました。

    画像



    入力欄がある。煽り強度を変えるスライダーもある。ボタンを押すたび文章が変わり、結果はコピーできる。iPadで開いても普通に動いています。私がHTMLを保存してサーバーへアップロードしたわけではありません。会話の途中でWebサイトが作られ、URLまで発行されていました。

    画像
    鉄拳チャンスっておい、お前どこから拾ってきた



    うわあああいう😨😆

    驚き屋を作っていた私が、いちばん驚き屋になりました。

    今回初めて知った「ChatGPT Sites」

    画面上で起きたことだけを見ると、ChatGPTがHTMLを書いて公開したように見えます。調べてみると、これはChatGPTの「Sites」という機能でした。

    OpenAIの説明では、プロンプトや対応する既存プロジェクトからWebサイト、Webアプリ、ゲームを作り、ホストして共有できます。作成だけでなく、修正やデプロイもChatGPT内で扱います。

    公式ページ
    https://learn.chatgpt.com/docs/sites

    ここで一度、公開という言葉にブレーキ。今回のサイトには本番URLがありますが、記事を書いている時点では所有者だけが見られる設定です。URLができた瞬間に全世界へ放流されるわけではありません。招待した人だけ、ワークスペース内、インターネット全体など、公開範囲は別に設定します。

    画像



    私は最初、この機能をHTMLの置き場所くらいに思っていました。違いました。入力して結果を返す。ボタンを押したら表示が変わる。内容を記録する。画像やファイルを扱う。ここまで来ると、ホームページ作成というより、ブラウザで動く小さな道具を会話で作る機能です。

    何が作れるのか

    いちばん分かりやすいのは、入力したものを別の形に変えるサイトです。

    冷蔵庫にある食材から夕食候補を出す。文章の文字数と読了時間を数える。旅行先と日数から持ち物表を作る。名前を入れて当番を抽選する。質問に答えると結果が変わる診断を作る。勉強用の四択クイズを出す。見積額を試算する。

    この程度なら、生成AIを毎回呼ばなくてもブラウザ内の計算で動かせるものがあります。驚き屋さん構文クリエイターも今のところこちらです。入力した単語と、あらかじめ用意した怪しい言い回しを組み合わせているだけなので、押すたびに根拠は増えませんが勢いは変わります。立派です。何が立派なのかは不明です。

    画像



    見るためのサイトも作れます。作品一覧、イベント案内、ポートフォリオ、よくある質問、家族の予定表、ゲームの攻略メモ、研究資料の索引。画像と文章を並べるだけなら普通のホームページですが、検索や絞り込みを付けると急に道具らしくなります。

    記録を残すものもあります。ToDo、読書記録、学習進捗、在庫メモ、習慣チェック、アンケート結果。Sitesには構造化した情報を保存するD1と、画像や文書などを置くR2が用意されています。名前は急に開発者向けですが、読者側が最初から仕組みを覚える必要はありません。「入力した内容を次に開いたときも残したい」と伝えるところから始められます。

    OpenAIによる社内アプリの作例と保存機能の説明
    https://learn.chatgpt.com/use-cases/build-and-deploy-internal-apps

    遊びも作れます。おみくじ、四択クイズ、クリックゲーム、簡単な育成ゲーム、分岐する読み物。ファミコンでも麻雀は動いたので、現代のブラウザならもう少し頑張ってもらいましょう。私は別件で育成クイズを作っている最中ですが、その横から驚き屋が先に完成しました。順番がおかしい。


    頼み方は普通でよかった

    今回、最初から細かな仕様書を書いたわけではありません。「文章を入れると驚き屋さん構文へ変換できるHTML版」「ランダム文字生成」「変なアルゴリズムで、あたかもそれっぽいやつ」。だいたいこの程度です。

    もちろん、仕事に使うものならもう少し書いた方が楽です。誰が使うのか。何を入力するのか。押したあと何を表示するのか。スマートフォンで使うのか。記録を残すのか。この辺を伝えると、最初の形がかなり近づきます。

    たとえば献立サイトなら、こう頼めます。

    「冷蔵庫にある食材を入力すると、作れそうな夕食を出すWebサイトを作ってください。調理時間と難しさも表示し、結果をコピーできるようにしてください。iPhoneとiPadで押しやすい画面にしてください。最初は限定公開にしてください」

    これで完成するとは限りません。そこは普通に壊れます。

    文字が巨大になる。横画面で妙な空白ができる。ボタンが背景と同化する。コピーしたら余計な文字まで付いてくる。私の画面でも、上から通知が降ってきてタイトルを豪快に隠しました。通知はSitesの責任ではありません。miyaさん、その節はスキをありがとうございます。

    完成画面を見て、「文字を小さく」「iPadの横画面に合わせて」「結果だけコピー」「もう少し胡散臭く」と言えば直せます。コードの何行目を触ればよいか知らなくても、目の前の完成物について注文できる。ここがHTML生成との大きな違いでした。

    画像



    以前からChatGPTにHTMLを書かせることはできました

    この反論は正しいです。

    HTMLやJavaScriptの生成そのものは新しくありません。私も以前から使っています。GitHub Pages、Cloudflare Pages、Vercelなど、公開先もすでにあります。開発に慣れている人なら、そちらの方が構成を管理しやすい場面もあります。

    Sitesで短くなったのは、その後です。ファイルを保存し、公開先を決め、設定し、デプロイし、URLを確認する。この間にあった作業をChatGPT側へ寄せています。革命という言葉を付けるとまた驚き屋が戻ってくるのでやめますが、「作って」で終わらず「人に触ってもらえる場所」まで進む距離はかなり短くなりました。

    GPTsの代わりなのか

    この原稿を書いていたら、別の人が公開している「無料:AI漫画作成ツール by AI漫画Studio」というGPTを見つけました。


    おるやん。

    私はちょうど、記事本文を六つに分け、キャラクターシートを二枚渡し、縦四コマを六本作っていました。二十四コマです。生成後はキャラクターの髪、衣装、コマ数、日本語、掲載位置を確認し、本文へ画像マーカーを差し込みました。向こうのGPTが内部でどこまで処理しているかは、公開ページの外からは分かりません。少なくとも「漫画を作る」という発想自体は、すでにGPTsで公開されています。

    ではSitesはGPTsを終わらせるのか。

    触った範囲では、同じものではありません。

    GPTsは会話が中心です。「こんな漫画を作りたい」と相談し、画像を渡し、返ってきたものへ追加注文を出す。ChatGPTの中で使うなら、この形が素直です。

    Sitesでは、漫画制作専用の画面を作れます。キャラクター画像の登録欄、縦四コマか横四コマかを選ぶボタン、セリフ入力、生成履歴、ダウンロード。実装すれば、利用者は長い指示を書かず、決められた欄を埋めて使えます。これは今回見つけたGPTにその機能がある、という意味ではありません。同じ「漫画を作る」をWebアプリへ持っていくなら、そういう形にできるという話です。

    毎回自由に相談したいならGPTs。操作を決め、専用画面から使わせたいならSites。競合というより出口が違います。

    そして独立した道具として人に使ってもらおうとすると、急に現実が来ます。料金です。

    代金は誰が払うのか

    Sitesは現在パブリックベータで、OpenAI公式ではPlus、Pro、Business、Enterprise、Eduが対象とされています。利用できるかどうかは地域やワークスペースの設定にも左右され、ベータ中はプランごとの上限があります。上限へ達すると、新しいサイトを作れない、保存領域を追加できない、アクセスの多いサイトを公開状態に保てない、といった制限が起こり得ます。

    サイトの中で生成AIや別会社のサービスを呼び出す場合は、さらに別です。APIキーを設定して呼び出せば、その利用料金は通常、そのキーを持っている側へ請求されます。訪問者がChatGPTへログインしたから、その人の契約分で何でも動く、という説明は公式ページにはありません。

    静的な案内ページや、ブラウザだけで計算する小さなツールなら追加料金なしで動く構成もあります。生成AIを一回呼ぶたび原価が発生する構成もあります。無料で公開したサイトが人気になり、拍手していたら請求だけ育っていた。これは笑い話にならないので、外部APIを使う場合は利用回数と支出上限を先に確認した方がよさそうです。

    画像



    公開前に見るところ

    作成が簡単になっても、確認まで自動で正しくなるわけではありません。

    スマートフォンで押せるか。入力した情報がどこへ保存されるか。公開範囲は合っているか。計算結果は正しいか。名前、住所、社内資料を入れていないか。外部APIのキーを画面やファイルへ直接書いていないか。

    OpenAIはSitesで保護対象の医療情報やカード情報を扱ったり、金融取引に使ったりしないよう案内しています。データ所在地や推論処理の所在地にも対応していないため、何でも放り込める箱ではありません。家族の買い物表と患者情報は同じ箱へ入れない。これはさすがに分けましょう。

    で、誰向けなのか

    コードを書ける人だけの機能ではありません。むしろ、「こんな道具が欲しい」は分かるけれど、サーバーやデプロイと言われた時点でそっと画面を閉じていた人が試しやすい機能です。

    美容室なら料金シミュレーター。先生なら復習クイズ。地域の集まりならイベント案内。創作者なら登場人物検索。家庭なら旅行の持ち物表。noteを書く人ならタイトル候補の抽選機。役に立つものでも、どうでもいいものでも構いません。

    どうでもいいものを作れる余裕は案外大事です。驚き屋さん構文クリエイターを外注しようと思う人はいないでしょう。自分で一から組むなら、たぶん私は途中で別の記事を書き始めます。それが会話のついでに動いたから、「なら、あれも作れるのでは」と発想の方が後から増えてきました。

    ChatGPT Sitesのニュースは、AIがHTMLを書けるようになったことではありません。そこは前からできました。

    思いつきと、他人がブラウザで触れるものとの間にあった作業が、かなり減った。今回確認できたのはそこです。

    令和最新版。

    乗り遅れるな。

    今がチャンス。

    何を作るか思いつかない場合、チャンスは特に何もしてくれません。

    それではまた!

    画像
    最近スロットやってねえなー😎



    参考

    OpenAI「Sites」
    https://learn.chatgpt.com/docs/sites

    OpenAI「Build and deploy internal apps」
    https://learn.chatgpt.com/use-cases/build-and-deploy-internal-apps

    #ChatGPT #ChatGPTSites #GPTs #生成AI #AI活用 #Webサイト制作 #Webアプリ #ノーコード #バイブコーディング #AI漫画 #四コマ漫画 #ChatGPTCreateClub



    おまけ

    画像
    画像
    同一人物

    ※追記:昨日までエージェント機能の週間上限は残り11%でしたが、Codexの2,000万人突破記念リセットで99%まで復活していました。先週追加課金した黒パグです。詫び石ください。

    画像
     
     
    昭和生まれのAI技術者。生成AIの公式発表・論文・新機能を、実際に触って検証しています。難しいことを面白く、一次ソースは原文まで。画像、創作、黒パグも。PR・レビューのご相談はXかDMへ。AI使用率:記事平均30%、画像100%。パグ好きに悪い人はいないと思うよ🤧🐶

    あなたへのおすすめ