#1 便利なWebアプリを、 ChatGPTと Googleサイト（無料）で作ろう!!
大変です！！
いまさらなんですが、、、 ChatGPTって、ほぼ完璧にプログラム作れるんですね。 C言語、Java、Python、、、いろんな言語に対応してます。
これは、もうプログラマーとかでなくても、 誰でも、アプリを簡単に作れるということです。
で、今回は、、、
Webアプリを作ります。 しかも、GoogleSite で、無料で簡単にWebサイトを作り、公開します。
皆さんも、お仕事や趣味などで、面倒くさい作業や、単純な作業を、自動化したいと思ったことはありませんか？
それに、新しいサービスや コンテンツを作るのにも良いでしょう。
なぜ、Webアプリなのかというと、、、
・ネット上で、簡単に、多くの人に公開できる
・ユーザーが使う時、インストールの必要がない
・自分のWebページにリンクでつながる
―と、すぐに拡散でき、フットワークが軽いですね。
実際に作ってみなくてもいいので、 どれだけ簡単にアプリを作れるのか 観ていきましょう！！
>>作っていこう！
基本的な手順は、
１，Chat GPT に、JavascriptとHTMLで、プログラムを作ってもらう
２，それを、Googleサイトに挿入する。
この２ステップで、できてしまいます。
今回は、何も用意のないところから始めるため、
アカウントを作ったり、ページの準備をしたり手順がありますが、難しい操作はないですし、
一度作れば流用できて簡単ですよ。
まず、Google Siteのページに行って、新しいサイトを作ります。
Google site ホーム画面
ここにある、"空白のサイト" をクリックすると、新しいサイトが作れます。
適当に名前をつけて、、、
これで、サイト側の準備はOKです。
こんな画面が出ます。この時点で、このサイトは、公開されていません。
次に、ChatGPT の準備。
Chat GPT にログインしてください。
ログインは簡単です。Googleアカウントでも作れますし、何より無料ってところが良いですね。
料金は、Vr.3.5 は無料、すこし高機能なVr.4.0は有料です。が、無料のVr.3.5 でも、プログラム書けます。
ホーム画面に、こんなことを書いてみましょう。
< html >< body > に続いて、ローカルファイルを開き、ローカルファイル内の特定の画像をユーザーに選んでもらい、
その画像を表示するプログラムをHTMLとジャバスプリクト（JS）を用いて作ってください。
入力画面
すると、、、
ChatGPT から返答がきます。
ChatGPTからの返答。この下に具体的なプログラムが表示されます。
とにかく、
ChatGPTが、プログラムのような物を書きました。
ではこれを、GoogleSite のページに挿入します。
ここで、先程作っておいた、サイトの編集画面に行きます〜。
①挿入をクリック。
ここの、、、
ここを、クリック！
そうすると、、
こんなのが出てきます。
『コードの挿入』をクリックして、コピペしたコードを挿入しましょう。
埋め込みコードを選択し、コードを入れてください。
コピペするとこんな感じ。
『次へ』を押します。
次に『挿入』を押します。
すると、ページに挿入されました！！
挿入の完了です。
でも、ここを押しても、なんにも起こりませんよ？
ここは、編集画面なので、プログラムがどう動くかはわかりません。
どんな動きをするのかは、
『プレビュー』で見ることができます。
Webページがどう動くか、見ることができます。
これで、動作を確認しましょう！
『ファイルを選択』を押すと、ファイルが開きます。
自分の好きな画像を選択してみましょう！
こんな画面。『ファイルを選択』をクリック。
ファイルアプリが開きます。
ジャジャーン！ 選択した画像が表示されました。
どうです？
簡単に、アプリを作れたでしょ。
＞＞うまく行かないとき
①指示語を具体的な「主語」にする
「それを」「あの」「さっきの」「さきほどの」etc…
これは、指示語です。
よってChat GPT はその言葉が、何を意味するか文脈から判断します。
たしかに指示語を使っても、通じることはありますが、
Chat GPT は文脈からでしかユーザーの考えを理解できないので、
私達が考えをはっきりと伝えるならば、指示語もわかりやすいよう、主語に変換しましょう。
②箇条書きにして要点整理
長い文だと、Chat GPT が意味を理解できなかったりします。
「何を」「どうするか」をセットにして、
箇条書きで伝えてあげましょう。
また、「なぜ」そうする必要があるかを
伝える事で、より自分の考えを理解してくれます。
よって、「なぜ」「なにを」「どうするのか」
これを１セットで書いてください。
③英語でお願いする
Chat GPT が学習したデータは
英語のものが多いため、英語で聞いてあげるといいです。
ただ、いちいち翻訳機にかけるのは 大変なので、
少しChat GPT への質問を工夫します。
今からチャットに書く内容を、1.英訳し、2.英訳した内容を実行し、3.実行結果を日本語訳して返してください。
こうすることで、英訳した内容を実行し、日本語に訳して返してくれます。
もっと複雑なものを！！
こんどは、もっとアプリっぽい
実用的なものを作りましょう。
せっかく画像を表示できたので、つぎは画像処理です。
こんなことを注文しました。
さきほどのプログラムを、
表示した画像を、画像処理して、（モノクロにする等）再度表示するプログラムに修正してください。
すると、、、
入力画像
出力画像。白黒にはなってるけど、、、
おかしいですね、、、
ちゃんと白黒（グレースケール）にはなっていますが、なんか拡大されていますね。
Chat GPT に聞いてみると、
はじめ表示したカラーの画像は、ちゃんとフレーム（キャンバス要素）に入るよう、自動的に縮小して表示していたようです。
しかし、白黒に処理した画像は、そのままのザイズのまま表示したため、このように切れてしまったんです。
もう一度、修正してもらいます。
いまのコードでは、元の画像の大きさのまま、高さ３００pxの要素のなかに表示され、画像が切れています。
収まるようにするにはどのように変更する必要がありますか。
こんな感じで注文をつけると、
やっとちゃんと動きました。
ちゃんとした、白黒画像が出来ました！
終わりに
自分で言うのもなんですが、
こんなに長く、単調な文をよく読んでいただきました。
ありがとうございます。
まあ、私達は、Chat GPT と会話し、試行錯誤を重ね、
このように成果が実った、、、という感動的なラストだったわけですが、
画像を白黒にして、何すんの？
―という切実な疑問が残ります。
まあ、この画像をダウンロードできたり、他の画像処理ができるようになれば、それっぽいアプリになるでしょう！
もちろん、画像処理以外のアプリも作れますよ。
・占いアプリ（サイト）
・時計（ただ時間を表示）
・今日の天気（気象庁のAPIから情報を自動で入手）
・ファイル形式一括変換アプリ
とかとか、、、
まだ無限の可能性があります。
なんか作ったり、アイデアが浮かんだら、コメントとかで教えてください。
おわり。