てがろぐでオリジナルのスキンを作る方法
てがろぐ、してますか？
いいですね、てがろぐ。てがろぐは今いちばんナウいインターネットですからね。
https://log.chaos-cuttle.com/てなことで、これがが私のてがろぐです。
スキンどうする問題
てがろぐをやるにあたって、スキンを選ぶ作業があります。まあ、デザインを着せ替えできるんですよ。配布しているありがたい方々もいらっしゃって、それはそれはきれいで高機能なスキンがいっぱいあります。
いろいろ見て回って、ここの部分は自分では使わないからカスタマイズで削除するか、とか、色味を変更するか、とか色々やりたくなります。
自分はあくまでシンプルな機能しかないスキンを求めているので、それではオリジナルでいきますか、と。
しかしながら昔、公式のスキンの大幅なカスタマイズをやりましたが、すこぶる面倒なんですよね。
公式のドキュメントはとってもとっても詳しいんですが、読み解く自信がない。
で、今回ははやりのAIでどうにかする方法を取ってみました。
やること
HTMLとかCSSとかをいじるのは久々なんで、自分の備忘録を兼ねてやったことを書いていきます。
VScodeをインストール
ここは各自どうにかしましょう。私の環境はChromebookでLinuxのソフトを動かす感じなので、ちょっとめんどい。Windowsなんかだとすんなりいくと思います。
というか、Chromebook環境だからVScode使っているだけで、Cursorとか使ったほうが良さげな気はする。自分がやった作業の記録なので、VScodeの環境で突き進みます。
VScodeにAIが使える拡張機能をインストール
Continue – open-source AI code agentを入れるとGitHub CopilotがVScode内で使えるようになり、コードを書いてくれます。
あとは必要そうなものを、各自必要なものをググって入れてください。Japanese Language Pack for Visual Studio Codeは入れといてください。あとは沼なので、必要なものを厳選してください。私はもうあんまり書かないので、この2つしか入れてませんが。
GitHubのアカウントを作る
Continue – open-source AI code agentを使うのに必要なので、アカウントを持っていない場合は作ってください。
月50回までの会話は無料で、上限に達してしまうと使えなくなります。ちょろちょろとライトに作業して、すぐ上限に達しました。マジで全部AIに作ってもらうぴょんという方は課金しましょう。私はしていないです。
PC内にskin-〇〇という名前のフォルダを作る
任意の場所にスキン名を決めてフォルダを作ります。Windowsならマイドキュメントあたりにでもフォルダを作ってください。中身は空っぽで問題ないです。
〇〇の部分はあとからでも変更できるので、適当でいいです。「skin-〇〇」ってのが、そのままてがろぐの管理画面に表示されます。
VScodeで作成したフォルダを開く
ファイル→フォルダを開くでさっき作ったフォルダを開きます。中身はこれからAIに作ってもらいますよ。
Continue – open-source AI code agentでハムスターに賄賂を渡す
てがろぐは、基本的にガワとなるskin-cover.html、投稿を表示させるskin-onelog.html、見た目を整えるCSSの3ファイルがあれば動くはずです。まだフォルダの中には何もないですが、ファイルを作るところからやってもらいましょう。
Continue – open-source AI code agentを入れると、VScodeの画面の右横にチャットできるスペースが現れたと思います。
GitHubの認証が求められるので、認証してください。
あとは思いのままに指示します。
私は最初に「てがろぐのオリジナルスキンを作ります。https://www.nishishi.com/cgi/tegalog/custom/このページを参考に、まずはskin-cover.htmlを作成します。skin-cover.htmlでは、サイト名、カテゴリ、タグ、ページネーションを含めてください。」とプロンプトを入力しました。何を含めたいかは、各自指示したとおりにやってくれます。逆に言うと、指示してないことはやらない。ただしあとから追加もできるので問題ないでしょう。本当ならここで「２カラムにする」とかもっと具体的な指示を出したほうがいい気がします。
公式のカスタマイズ方法を渡して作業してもらいました。
https://www.nishishi.com/cgi/tegalog/custom/あとは流れに身を任せていると、skin-onelog.htmlを作ったり、CSSで見た目を整えたりしてくれます。ちょっと違うなーと思う部分があったり、なんか反映されてないんだが、というときはツッコミを入れるとどうにかしてくれます。
GitHub Copilotは、たまにハムスターに賄賂を渡しているようです。
私の環境下は、なぜか現在VScodeで日本語入力ができません。そのためテキストエディタで書いてからチャット欄に貼り付けるという無駄な作業をしていましたが、推敲のうえ自分の要求を伝えられるので、案外これがうまくいきました。
FTPソフトでアップロード
skin-〇〇のフォルダごとアップロードします。
てがろぐを使う人なら説明不要でしょう。
枠組みができたあたりでさっさとアップロードして、表示を確かめて、ブラッシュアップします。
本番環境でテストするタイプなので、ここで表示を確かめて、また指示を出し、訂正したらまたアップロードし直すという、あまりよろしくはないやり方で作業していました。
そうこうしているうちにGitHub Copilotの月間の上限に達してしまいました。あっという間ですね。
人力＋ChatGPTでブラッシュアップ
GitHub Copilotでコードを書いてもらうと万能感で恍惚となるので好きですが、だからといって課金するほど何かを作り出すほどでもなく。自分にはオーバースペックなので、課金はしないでおきます。
やっぱり上記の公式のドキュメントが役に立ちます。ここに来てから必要な部分を読むのでも良い気はします。
あとはちまちまと人力でこねくり回しますよ。
ChatGPT（やっぱり無料版）に、吐き出されてるHTMLとCSSを伝えてこうしたいと伝えると書いてくれますんで、差し替えていきます。うまくいかないときも、なんでー？と聞けば対処法を教えてくれるので、全自動でやってくれる万能感はないですが、いい相棒にはなってくれます。GeminiとケンカしてChatGPTに移ったんですが、これはこれでクセがあるな。「わたしならこうします」じゃないんよ。誰？って思う。色々提案してくるのはいいんですが、先走りがすぎる。それが面倒で仕事で使うAIは余計なことを喋らないように言い聞かせながら使っているので良い関係が保てている。
ただしChatGPTもCSSをファイルごとアップして確認してもらうのは、一日に上限があるっぽいので、そんなにいい感じにはできません。
そうしてできたのがこのスキンです
上のリンクから飛べるのがそれです。
まだ色々直したいんですが、まあ自分のやりたいことに近いものができたかな。
正直、あっと驚くような素敵なものはできません。必要最低限。すごいアイディアとかもない。指示する側のもんだいかもしれない。
何もわかっていない素人が無料の範囲でなにかしようとするとこんなものですかね。
また月が変わったらGitHub Copilotが使えるようになるので、ちょっと改装するかもですが、今のところはこれでいいのでは？と思っています。