はじめに
ｶﾞﾀｶﾞﾀﾌﾞﾙﾌﾞﾙ… どうもbockringです。
まぁ個人のWebサイトって欲しいじゃないですか(唐突)
しかし私はHTMLが分からないんですよ。だからGitHub Copilotを使って作ったら色々驚きだったよ、というお話です。
GitHub Pages
GitHub Pages、これすなわち最強なものです。ソフト使用料無料かつ、サーバー代まで無料って、ホント金欠の味方です。
今回はそのGitHub PagesとGitHub Copilotを使ってちゃちゃっとWebページを作っていきましょう。
最終成果物
まずは、最終成果物です。
これ、ベースはAIが作成して、詳しい内容だけ僕が書いているんですよね(メインページ)。
最初にご自慢ポイントも言っておきましょう(※HTMLもCSSもJSも知らない人が作ったサイトです)
↑初回訪問時に表示されます。また同意後90日経過あるいはCookieを消去すると再度表示されます。
↑この表は横スクロールができます。(上が初期状態、下がスクロール後)
使用した物・ツール
まずは、開発を行うハードです。まさかのiPadで開発しました。このうえなくバカですね。しかし、逆にいえばAIを使えばiPadですら開発できてしまうということでもあります。
そして、開発プラットフォームはGitHub、そしてデプロイにはGitHub Pagesを用いました。開発には今回のテーマ、GitHub Copilotを使用します。コード編集は、GitHub上ではなく、VScode系のエディタを使用します。この方が使いやすいので。
これはどういうことかというと、全てiPadのSafariブラウザ上で作業をしたということなんですね。自分がコワイ。
作成手順
- GitHubにアクセス
- サインインあるいはサインアップ
- 新しいリポジトリを公開(
Public)モードとして作成
(この時、リポジトリ名はサイト名となります) -
index.htmlを含め、Webサイトを構築
この時、GitHub Copilot(無料)を使って構築すれば早い - GitHub Pagesを用いて公開する
この流れは、GitHub Copilotに全て聞けば良いと思います。
サイトの目的
このWebサイトの目的はQiitaでは書けないようなしょうもないことを書くことです。Qiitaにはコーディング関係の内容が相応しいとされているので、それに適さない工作記録や購入記録などを残すつもりです。
サイトの自己紹介ページでも書いていますが、HobbuyというのはHobbyとBuyの造語です。つまり、基本は趣味関連で買ったもののレビューになります。
実際の作成手順
ここでは、僕がGitHub Copilotに渡したプロンプトを編集したものを一部紹介します。要約してるので、このまま入れても多分サイトは完成しません
- 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.
- 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.
- Now, I published my website. How can I connect to Google Analytics? Give me a code.
- 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.
ここで挙げた以上の質問を投げかけ、今のサイトは作成されましたが、大まかな流れとしては上記のとおりです。ここまでで大体の形はできました。このプロンプトの日本語訳したのを載せときます。(※日本語訳はふざけてます)
- HTMLでゴシック系フォントを使ったWebサイトを作りたいんだけどよ。コードを作ってくれぃ(ベースを作らせる)
- 生成してくれてありがとさん。次は、スクロールできる表が作りたいんだけど、コードをくれない？スクロールの方向は水平方向やで。(商品リストを作る)
- ほんで、サイトを公開してきたわ。んじゃどうやったらGoogle Analytics(以降、GA)と繋げれる？教えて。(GA連携)
- 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リポジトリ
おわりに
最近のAIの強さを実感するために、Webサイトを作ってみました。今後も公開/更新し続ける予定です。是非、定期的に見に来ていただけたらな、と思います。
にしても、ここまでとは。これからも更新(Qiita/Twitter/はてなブログ/今回の自作(?)Webサイト)を頑張っていこうと思います。