最近のAIはすごい！　AIにブログサイトを作らせた話。

## はじめに
ｶﾞﾀｶﾞﾀﾌﾞﾙﾌﾞﾙ… どうもbockringです。
まぁ個人のWebサイトって欲しいじゃないですか(唐突)

しかし私はHTMLが分からないんですよ。だからGitHub Copilotを使って作ったら色々驚きだったよ、というお話です。

## GitHub Pages
GitHub Pages、これすなわち最強なものです。ソフト使用料無料かつ、**サーバー代まで無料**って、ホント金欠の味方です。

今回はそのGitHub PagesとGitHub Copilotを使って**ちゃちゃっとWebページを作っていきましょう**。

## 最終成果物
まずは、最終成果物です。

https://hobbuy-blog.github.io/hobbuying/

これ、ベースはAIが作成して、詳しい内容だけ僕が書いているんですよね(メインページ)。

最初にご自慢ポイントも言っておきましょう(※HTMLもCSSもJSも知らない人が作ったサイトです)

![IMG_0052.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777721/85df9227-ee46-44fa-b9e2-39c75706ce04.jpeg)
↑初回訪問時に表示されます。また同意後90日経過あるいはCookieを消去すると再度表示されます。

![IMG_0054.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777721/509ff76b-1826-4b53-914a-a8b984543039.jpeg)
![IMG_0055.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777721/6963f50b-ee72-49a1-ba65-ba326eec9e81.jpeg)
↑この表は横スクロールができます。(上が初期状態、下がスクロール後)

## 使用した物・ツール
まずは、開発を行うハードです。**まさかのiPadで開発しました**。**このうえなくバカ**ですね。しかし、逆にいえばAIを使えば**iPadですら開発できてしまう**ということでもあります。

そして、開発プラットフォームはGitHub、そしてデプロイにはGitHub Pagesを用いました。開発には今回のテーマ、GitHub Copilotを使用します。コード編集は、GitHub上ではなく、[VScode系のエディタ](https://github.dev)を使用します。この方が使いやすいので。

これはどういうことかというと、全て**iPadのSafariブラウザ上で作業をした**ということなんですね。自分がコワイ。

## 作成手順
1. [GitHub](https://github.com)にアクセス
1. サインインあるいはサインアップ
1. 新しいリポジトリを公開(`Public`)モードとして作成<br>(この時、リポジトリ名はサイト名となります)
1. `index.html`を含め、Webサイトを構築<br><font color=red>**この時、GitHub Copilot(無料)を使って構築すれば早い**</font>
1. GitHub Pagesを用いて公開する

この流れは、**GitHub Copilotに全て聞けば良い**と思います。

## サイトの目的
このWebサイトの目的は**Qiitaでは書けないようなしょうもないことを書くこと**です。Qiitaにはコーディング関係の内容が相応しいとされているので、それに適さない工作記録や購入記録などを残すつもりです。

サイトの自己紹介ページでも書いていますが、`Hobbuy`というのは`Hobby`と`Buy`の造語です。つまり、基本は**趣味関連で買ったもののレビュー**になります。

## 実際の作成手順
ここでは、僕がGitHub Copilotに渡したプロンプトを編集したものを一部紹介します。要約してるので、このまま入れても多分サイトは完成しません

> 1. I want to create my blog website by html. And I want to use Gothic-family font on it. Please give me a basic code.
> 2. Thank you for generating. Next, I want to add a table which visitor can scroll. Please give me a code. Direction of scrolling is horizontal direction.
> 3. Now, I published my website. How can I connect to Google Analytics? Give me a code.
> 4. I connected Google Analytics to the website. Finally, I want visitors to accept that the website is using Google Analytics, and cookie for saving the status of accepting. And I want its acceptment to show as overlay. Give me a code.

ここで挙げた以上の質問を投げかけ、今のサイトは作成されましたが、大まかな流れとしては上記のとおりです。ここまでで大体の形はできました。このプロンプトの日本語訳したのを載せときます。(※日本語訳はふざけてます)

> 1. HTMLでゴシック系フォントを使ったWebサイトを作りたいんだけどよ。コードを作ってくれぃ(ベースを作らせる)
> 2. 生成してくれてありがとさん。次は、スクロールできる表が作りたいんだけど、コードをくれない？スクロールの方向は水平方向やで。(商品リストを作る)
> 3. ほんで、サイトを公開してきたわ。んじゃどうやったらGoogle Analytics(以降、GA)と繋げれる？教えて。(GA連携)
> 4. GAと連携してきたわ。最後に、閲覧者にGAを使ってることと、その承諾状況の保存のためにCookieを使ってることに同意させたいんやけど。その確認はページをオーバーレイ出したいんや。コードくれ。

実際にはこれより多いプロンプトを順に出して作成しましたが、大まかなな流れとしては以上のとおりです。

## AIに全投げしたところ
まず、フォントの設定を含む`<HEAD>`の部分は全てAIが生成しています。このファイルの中には後述する確認画面のスタイル設定も入っているのですが、その辺りも全てAIです。確認画面に関しては少しだけ弄りましたが、**ほぼ無に等しい**です。

また、確認画面です。このサイトはGAでデータを収集しているのですが、ある種の**行動分析となる**ので、**確認と同意をさせたい**のです。しかし、サイト訪問の度に確認されたら**面倒**じゃないですか。そこで**Cookie**を使うことにします。しかし、**HTMLを初めて触る人がCookie関連を実装できる訳がない**んですよね。ここでAIの力を借ります。これがプロンプトの4番です。

HTMLがままならないのにJavaScriptができる訳ないので、そういう部分をAIに作らせた、そのような感じです。

## 逆に自分で頑張って実装/変更したところ
もちろん、自分で作ったところはあります。

Google Formとスクロール表の部分です。後者はAIも活用しましたが、**細かい書式の修正には時間をかけました**。

この2つは、どうやら横幅の設定が難しいみたいで、タブレット/PCでは正しく表示できてもスマホだとどうか分からないんです。Google Formは未確認ですが、表の部分は多分、修正できています。

しかも、その幅が表示可能領域より広いと、Cookie同意を裏技的にパスできてしまうんです。これは意にそぐわないので、時間をかけて修正しました(しています)。

## AIを使ってもどうしようもないところ
**AIは有能です(断言)**

ですが、対処できない問題もあります。特に、表示域の調整ですね。こればっかりは**デプロイしては修正してを繰り返し**ました。

あとは内容の表示のされ方の調整です。正直、MarkDownから変換してコピペでも良かったんですが、**最低限HTMLは使えるようにしておきたい**のです。

また、ブログの管理ファイル(ソース/画像)はしっかりフォルダ化する必要があります。そうでないとソースが**スパゲッティなことになる**ので、**頭が破裂します**。

## GitHubリポジトリ
https://github.com/hobbuy-blog/hobbuying.git

## おわりに
最近のAIの強さを実感するために、Webサイトを作ってみました。今後も公開/更新し続ける予定です。是非、定期的に見に来ていただけたらな、と思います。

にしても、ここまでとは。これからも更新(Qiita/Twitter/はてなブログ/今回の自作(?)Webサイト)を頑張っていこうと思います。