便利なWebアプリを、 ChatGPTと Googleサイト（無料）で作ろう！！ （ひとくち技術）


# 大変です！！
いまさら なんですが、、、
ChatGPTって、ほぼ完璧にプログラム作れるんですね。
C言語、Java、Python、、、いろんな言語に対応してます。
###
これは、もうプログラマーとかでなくても、
誰でも、アプリを簡単に作れるということです。

![Screenshot 2024-02-23 18.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/cd2e72ba-072e-55fd-5290-18e82d4fb343.png)


## で、今回は、、、
Webアプリを作ります。
しかも、GoogleSite で、無料で簡単にWebサイトを作り、公開します。


皆さんも、お仕事や趣味などで、面倒くさい作業や、単純な作業を、自動　化したいと思ったことはありませんか？

それに、新しいサービスや コンテンツを作るのにも良いでしょう。
###
なぜ、Webアプリなのかというと、、、

>#### ・ネット上で、簡単に、多くの人に公開できる

>#### ・ユーザーが使う時、インストールの必要がない

>#### ・自分のWebページにリンクでつながる

　　―と、すぐに拡散でき、フットワークが軽いですね。


実際に作ってみなくてもいいので、
どれだけ簡単にアプリを作れるのか 観ていきましょう！！



# >>作っていこう！
###
基本的な手順は、
### １，Chat GPT に、JavascriptとHTMLで、プログラムを作ってもらう
### ２，それを、Googleサイトに挿入する。
###
この２ステップで、できてしまいます。

今回は、何も用意のないところから
アカウントを作ったり、ページの準備をしたり手順がありますが、

難しい操作はないですし、
一度作れば流用できて簡単ですよ。
###  
### 　
まず、**Google Site**のページに行って、新しいサイトを作ります。

![Screenshot 2024-02-18 14.05.35 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/63d548ce-6f8a-63b7-1015-cc689bcc1364.png)

Google site ホーム画面
ここにある、**"空白のサイト"** をクリックすると、新しいサイトが作れます。
適当に名前をつけて、、、
これで、サイト側の準備はOKです。



こんな画面が出ます。この時点で、**このサイトは、公開されていません。**

### 　
次に、ChatGPT の準備。
　Chat GPT にログインしてください。
　ログインは簡単です。Googleアカウントでも作れますし、何より無料ってところが良いですね。

　料金は、Vr.3.5 は無料、すこし高機能なVr.4.0は有料です。が、無料のVr.3.5 でも、プログラム書けます。
　
　ホーム画面に、こんなことを書いてみましょう。

~~~
<html><body> に続いて、ローカルファイルを開き、
ローカルファイル内の特定の画像をユーザーに選んでもらい、
その画像を表示するプログラムをHTMLとジャバスプリクト（JS）を用いて作ってください。
~~~


入力画面。
すると、、、
ChatGPT から返答がきます。

![Screenshot 2024-02-23 18.20.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/77b5ab61-1507-ca14-6e6b-cb3754893409.png)


ChatGPT から返答。この下に具体的なプログラムが表示されます。

とにかく、
ChatGPTが、プログラムのような物を書きました。
（意味はわかりませんが、、、）
###
### 　

ではこれを、**GoogleSite のページに挿入**します。
　ここで、先程作っておいた、サイトの編集画面に行きます〜。

#### ①挿入をクリック。


ここの、、、
![Screenshot 2024-02-23 18.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/e0c6419d-b76e-9ee5-4436-106f80e08a33.png)


ここを、クリック！
そうすると、、
こんなのが出てきます。
**コードの挿入**をクリックして、コピペしたコードを挿入しましょう。

![Screenshot 2024-02-23 18.54.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/3232d089-6761-697a-f581-8e278383654e.png)

**埋め込みコード**を選択し、コードを入れてください。


![Screenshot 2024-02-23 19.04.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/7a8891c9-32d3-06fe-cb75-4190e24d1165.png)

コピペするとこんな感じ。
**次へ**を押します。
すると、
###
**挿入**を押します。
すると、ページに挿入されました！！

![Screenshot 2024-02-23 19.09.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/17d11520-cf23-a52b-bc36-e95a732002fe.png)


###
でも、ここを押しても、なんにも起こりませんよ？
ここは、編集画面なので、プログラムがどう動くかはわかりません。

どんな動きをするのかは、
**プレビュー**で見ることができます。

![Screenshot 2024-02-23 19.11.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/aab38f9a-2583-ae64-c73c-c5ce195d0982.png)

　Webページがどう動くか、見ることができます。
　これで、動作を確認しましょう！
 
　**ファイルを選択**を押すと、ファイルが開きます。
　自分の好きな画像を選択してみましょう！



![Screenshot 2024-02-23 19.15.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/227bef2a-caf7-df36-34c5-685976a00d38.png)

こんな画面。『ファイルを選択』をクリック。
　

![Screenshot 2024-02-23 21.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/5c35ab08-814a-8df4-499f-bf56277b3290.png)

ファイルアプリが開きます。
![Screenshot 2024-02-23 21.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/0cb5bb85-175f-42a7-a7a2-1678160ac06a.png)

　ジャジャーン！　選択した画像が表示されました。
どうです？
簡単に、アプリを作れたでしょ。



## ＞＞うまく行かないとき
###
### ①指示語を具体的な「主語」にする

「それを」「あの」「さっきの」「さきほどの」etc…
これは、指示語です。
よってChat GPT はその言葉が、何を意味するか文脈から判断します。
###
たしかに指示語を使っても、通じることはありますが、
Chat GPT は文脈からでしかユーザーの考えを理解できないので、私達が考えをはっきりと伝えるならば、指示語もわかりやすいよう、主語に変換しましょう。

### ②箇条書きにして要点整理

長い文だと、Chat GPT が意味を理解できなかったりします。
「何を」「どうするか」をセットにして、
箇条書きで伝えてあげましょう。

また、「なぜ」そうする必要があるかを
伝える事で、より自分の考えを理解してくれます。

よって、「なぜ」「なにを」「どうするのか」
これを１セットで書いてください。

### ③英語でお願いする

Chat GPT が学習したデータは
英語のものが多いため、英語で聞いてあげるといいです。
###
ただ、いちいち翻訳機にかけるのは 大変なので、
少しChat GPT への質問を工夫します。

~~~
今からチャットに書く内容を、
1.英訳し、2.英訳した内容を実行し、3.実行結果を日本語訳して返してください。
~~~
こうすることで、英訳した内容を実行し、日本語に訳して返してくれます。



## もっと複雑なものを！！

こんどは、もっとアプリっぽい
実用的なものを作りましょう。
###
せっかく画像を表示できたので、つぎは
画像処理です。

こんなことを注文しました。

~~~
さきほどのプログラムを、
表示した画像を、画像処理して、
（モノクロにする等）再度表示するプログラムに修正してください。
~~~

すると、、、

![Screenshot 2024-03-03 16.57.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/fa017a42-21e0-baed-e1c6-d30d4804e3d3.png)

入力画像

![Screenshot 2024-03-03 16.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/5dac93c8-11aa-29ea-4781-57ef872cdd7e.png)

出力画像。

白黒にはなってるけど、、、
おかしいですね、、、
ちゃんと白黒（グレースケール）にはなっていますが、なんか拡大されていますね。
###
Chat GPT に聞いてみると、
はじめ表示したカラーの画像は、ちゃんとフレーム（キャンバス要素）に入るよう、自動的に縮小して表示していたようです。
###
しかし、白黒に処理した画像は、そのままのザイズのまま表示したため、このように切れてしまったんです。
###
もう一度、修正してもらいます。

~~~
いまのコードでは、元の画像の大きさのまま、高さ３００pxの<img>要素のなかに表示され、
画像が切れています。
収まるようにするには、どのように変更する必要がありますか。
~~~

こんな感じで注文をつけると、
やっとちゃんと動きました。
みてください！！

![Screenshot 2024-02-29 14.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3658140/07a834fe-026d-c14a-b4a3-c783876b08d7.png)

ちゃんとした、白黒画像が出来ました！


## 終わりに
###### 　
自分で言うのもなんですが、
こんなに長く、単調な文をよく読んでいただきました。
ありがとうございます。
###
まあ、私達は、Chat GPT と会話し、試行錯誤を重ね、
このように成果が実った、、、という感動的なラストだったわけですが、
### 
**画像を白黒にして、何すんの？**
### 
―という切実な疑問が残ります。
まあ、この画像をダウンロードできたり、他の画像処理ができるようになれば、それっぽいアプリになるでしょう！
###
### 　
もちろん、画像処理以外のアプリも作れますよ。

#### ・占いアプリ（サイト）

#### ・時計（ただ時間を表示）

#### ・今日の天気（気象庁のAPIから情報を自動で入手）

#### ・ファイル形式一括変換アプリ
###

とかとか、、、
まだ無限の可能性があります。
なんか作ったり、アイデアが浮かんだら、コメントとかで教えてください。
### 　

おわり。

### 　　
### 　
###