tailwindcss と bootstrap の共存のために
bootstrap 5 で 作成したページの中に tailwindcss で作成した
部品を使いたくなって
tailwindcss には tailwind.config.js に
module.exports = {
prefix: 'tw-',
という定義を書くと
<div class="tw-px-8 tw-mx-auto">
</div>
のように すべてのクラスに tw- をつけて
Bootstrap 5 の サイト内に持ち込み可能だと判明した。
よしがんばって 取り込むぞ、と思ったけど あまりに数が多くて「大変だな・・これは・・」と思いました。
Github Copilot の出番
ああそうだ、こんなめんどくさいプログラムは Github Copilot にお願いしよう。
コマンドプロンプトで
mkdir tailwind-css-change
cd tailwind-css-change
dotnet new console
code .
開いた Program.cs ファイルに
// 入力ファイル
string inHtml = "../tailwind-bs5/wwwroot/html/page1.html";
string outHtml = "../tailwind-bs5/wwwroot/html/page1_fix.html";
を書いて
html ファイルを 読み込み HTML として 解析して
その中に含まれる class を取り出し
class を 文字列の配列に置き換え
それぞれの class の 文字列の先頭に tw-
をつけて class を 置き換える。
このコードを C# で Html Agility Pack を使って 書いて
とお願いしたら
下記のような回答をもらった。
まず、Html Agility Packをプロジェクトに追加する必要があります。
これは、NuGetパッケージマネージャを使用して行うことができます。
dotnet add package HtmlAgilityPack
using System;
using System.IO;
using HtmlAgilityPack;
class Program
{
static void Main(string[] args)
{
string inHtml = "../tailwind-bs5/wwwroot/html/page1.html";
string outHtml = "../tailwind-bs5/wwwroot/html/page1_fix.html";
// HtmlAgilityPack を使用して HTML ファイルを読み込む
HtmlDocument doc = new HtmlDocument();
doc.Load(inHtml);
// すべての要素を走査
foreach (HtmlNode node in doc.DocumentNode.SelectNodes("//*[@class]"))
{
// class 属性の値を取得
string classes = node.GetAttributeValue("class", "");
// 空白で分割して配列にする
string[] classList = classes.Split(' ');
// 各クラス名の先頭に "tw-" を追加
for (int i = 0; i < classList.Length; i++)
{
classList[i] = "tw-" + classList[i];
}
// 変更されたクラス名を元に戻す
node.SetAttributeValue("class", String.Join(" ", classList));
}
// 変更を加えた HTML を新しいファイルに保存
doc.Save(outHtml);
}
}
すごい、ほぼ完ぺきに html の置き換えができた。
たくさんの HTMLがあったから かなりの時間節約になった・・。
動作確認したら hover:bg-blue-500 がちゃんと動いてない事を発見。
tailwindcss 公式サイト prefix の説明部分
を確認したら
<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
のように sm: や hover: の 場合は : の後ろに tw- をつけるらしい。
また -mt-8 の場合には -tw-mt-8 のように書くらしい。
Copilot に次のお願い
tw- を class の先頭につける場合 class の中に : が含まれていたら : の前と後に分割して
後の文字列の前に tw- をつけて文字列を生成して。
例えば sm:bg-blue-500 の場合は sm:tw-blue-500 のように。
また class が - （マイナス記号）で始まる場合は -tw をつけて。
例えば -mt-8 の場合には -tw-mt-8 のように。
そうしたら 次の回答
クラス名に : が含まれている場合に : の前後に分割し、
後ろの文字列の前に tw- をつける処理と、
クラス名が - で始まる場合に -tw をつける処理を
組み合わせたコードを以下に示します。
for (int i = 0; i < classList.Length; i++)
{
// クラス名が "-" で始まる場合
if (classList[i].StartsWith("-"))
{
classList[i] = "-tw" + classList[i].Substring(1);
}
// クラス名に ":" が含まれている場合
else if (classList[i].Contains(":"))
{
// 先頭の ":" でのみ分割する
string[] parts = classList[i].Split(new char[] { ':' }, 2);
// 後ろ側の文字列の前に "tw-" を追加
classList[i] = parts[0] + ":tw-" + parts[1];
}
// それ以外の場合、先頭に "tw-" を追加
else
{
classList[i] = "tw-" + classList[i];
}
}
このコードでは、まずクラス名が - で始まるかどうかを StartsWith("-") でチェックし、
その場合は先頭に -tw を追加します。
クラス名に : が含まれている場合は、Split メソッドを使用して
先頭の : でのみ分割し、
後ろ側の文字列の前に tw- を追加します。
どちらの条件にも当てはまらない場合は、
単純にクラス名の先頭に tw- を追加します。
かなり高精度に 置き換えができている。
あれ？ もし hover:-mt-8 の場合はどうなる？
実験してみた結果 hover:-tw-mt-8 となることが分かった。
次のお願い。
class に tw- をつける処理で 追加の条件があります。
文字列の中に : が含まれて なおかつ : の後ろ側の文字が - (マイナス記号) で始まる場合には
: で 文字列を分割した後ろ側の文字の先頭に -tw を加えてください。
その回答が以下
for (int i = 0; i < classList.Length; i++)
{
// クラス名が "-" で始まる場合
if (classList[i].StartsWith("-"))
{
classList[i] = "-tw" + classList[i].Substring(1);
}
// クラス名に ":" が含まれている場合
else if (classList[i].Contains(":"))
{
// 先頭の ":" でのみ分割する
string[] parts = classList[i].Split(new char[] { ':' }, 2);
// ":" の後ろ側の文字が "-" で始まる場合
if (parts[1].StartsWith("-"))
{
// 後ろ側の文字列の先頭に "-tw" を追加
classList[i] = parts[0] + ":-tw" + parts[1].Substring(1);
}
else
{
// 後ろ側の文字列の前に "tw-" を追加
classList[i] = parts[0] + ":tw-" + parts[1];
}
}
// それ以外の場合、先頭に "tw-" を追加
else
{
classList[i] = "tw-" + classList[i];
}
}
ああ、階層が増えてきたので tw を加える部分を 改造しようかなと思い、次の指示
class にtw 文字列を付け加える処理を見直します。
１）tw を付加する関数 文字列の先頭が - （マイナス）で始まる場合は -tw をつける。
それ以外は tw- をつける。
２）class の文字列に : が含まれている場合は : の前後で文字列を分割して
後ろ側の文字に １） の tw を付加する処理を行う。
: が含まれていない場合は
class 文字列全体に 1) の tw を付加する処理を行う。
例えば
mt-8 は tw-mt-8 に
-mt-8 は -tw-mt-8 に
hover:mt-8 は hover-tw-mt-8 に
hover:-mt-8 は hover:-tw-mt-8 に なります。
その Github Copilot の回答が以下
// 1) tw を付加する関数
string AddTwPrefix(string className)
{
if (className.StartsWith("-"))
{
return "-tw" + className.Substring(1);
}
else
{
return "tw-" + className;
}
}
// 2) class の文字列を処理する関数
string ProcessClassName(string className)
{
if (className.Contains(":"))
{
// ":" の前後で文字列を分割
var parts = className.Split(new[] { ':' }, 2);
// 後ろ側の文字に AddTwPrefix 関数を適用
return parts[0] + ":" + AddTwPrefix(parts[1]);
}
else
{
// class 文字列全体に AddTwPrefix 関数を適用
return AddTwPrefix(className);
}
}
// 使用例
Console.WriteLine(ProcessClassName("mt-8")); // 出力: tw-mt-8
Console.WriteLine(ProcessClassName("-mt-8")); // 出力: -tw-mt-8
Console.WriteLine(ProcessClassName("hover:mt-8")); // 出力: hover:tw-mt-8
Console.WriteLine(ProcessClassName("hover:-mt-8")); // 出力: hover:-tw-mt-8
コメントが 簡潔で 必要な場所にさりげなくついていて
関数名も勝手に考えてくれて きれいな処理になっているし。
いやーーすごいな・・と感心して コードを実行したら
tw-mt-8
-twmt-8
hover:tw-mt-8
hover:-twmt-8
あれ？？ ちがうよね。-mt-8 の処理が間違ってるよ。
具体例を出して認識齟齬しないように指示したつもりなのに。
マイナスという記号を取り除くという勘違いがあったようですね。
AddTwPrefix 関数の
return "-tw" + className.Substring(1);
は
return "-tw" + className;
ですね。
最後に
inDir 配下にある html ファイルを HtmlReplace 関数を呼び出して
HTML の中身を置き換えて ファイル名に _fix をつけて
同じディレクトリ保存するコードを書いてください。
とお願いして 生成されたコードが 下記。
using System;
using System.IO;
using System.Linq;
class Program
{
static void Main(string[] args)
{
string inDir = "../tailwind-bs5/wwwroot/html"; // 入力ディレクトリ
ReplaceHtmlFiles(inDir);
}
static void ReplaceHtmlFiles(string directoryPath)
{
// 指定ディレクトリ内のすべての .html ファイルを取得
var htmlFiles = Directory.GetFiles(directoryPath, "*.html", SearchOption.TopDirectoryOnly);
foreach (var filePath in htmlFiles)
{
// ファイルの内容を読み込む
string content = File.ReadAllText(filePath);
// HtmlReplace 関数を使用して内容を置き換える
string replacedContent = HtmlReplace(content);
// 新しいファイル名を生成 (_fix を付ける)
string newFilePath = Path.Combine(Path.GetDirectoryName(filePath), Path.GetFileNameWithoutExtension(filePath) + "_fix" + Path.GetExtension(filePath));
// 置き換えた内容を新しいファイルに保存
File.WriteAllText(newFilePath, replacedContent);
}
}
// HTML の中身を置き換える関数 (ダミー実装)
static string HtmlReplace(string htmlContent)
{
// ここに HTML 内容を置き換える実際のロジックを実装
return htmlContent; // 仮実装
}
}
ファイル名に _fix をつけて の部分を誤解するかな？
と思ったけどちゃんと input.html を input_fix.html に変換している。
今までに作成した関数をすべてマージして出来上がった最終コードが下記。
using HtmlAgilityPack;
class Program
{
static void Main(string[] args)
{
string inDir = "../tailwind-bs5/wwwroot/html"; // 入力ディレクトリ
ReplaceHtmlFiles(inDir);
}
static void ReplaceHtmlFiles(string directoryPath)
{
// 指定ディレクトリ内のすべての .html ファイルを取得
var htmlFiles = Directory.GetFiles(directoryPath, "*.html", SearchOption.TopDirectoryOnly);
foreach (var filePath in htmlFiles)
{
// HtmlReplace 関数を使用して内容を置き換える
string replacedContent = HtmlReplace(filePath);
// 新しいファイル名を生成 (_fix を付ける)
string newFilePath = Path.Combine(Path.GetDirectoryName(filePath), Path.GetFileNameWithoutExtension(filePath) + "_fix" + Path.GetExtension(filePath));
// 置き換えた内容を新しいファイルに保存
File.WriteAllText(newFilePath, replacedContent);
}
}
// HTML の中身を置き換える関数
static string HtmlReplace(string inHtmlFile)
{
// HtmlAgilityPack を使用して HTML ファイルを読み込む
HtmlDocument doc = new HtmlDocument();
doc.Load(inHtmlFile);
// すべての要素を走査
foreach (HtmlNode node in doc.DocumentNode.SelectNodes("//*[@class]"))
{
// class 属性の値を取得
string classes = node.GetAttributeValue("class", "");
// 空白で分割して配列にする
string[] classList = classes.Split(' ');
// 各クラス名の先頭に "tw-" を追加
for (int i = 0; i < classList.Length; i++)
{
// class の文字列を処理する関数
classList[i] = ProcessClassName(classList[i]);
}
// 変更されたクラス名を元に戻す
node.SetAttributeValue("class", String.Join(" ", classList));
}
// 変更を加えた HTML 文字列を応答する
return doc.DocumentNode.OuterHtml;
}
// 1) tw を付加する関数
static string AddTwPrefix(string className)
{
if (className.StartsWith("-"))
{
return "-tw" + className;
}
else
{
return "tw-" + className;
}
}
// 2) class の文字列を処理する関数
static string ProcessClassName(string className)
{
if (className.Contains(":"))
{
// ":" の前後で文字列を分割
var parts = className.Split(new[] { ':' }, 2);
// 後ろ側の文字に AddTwPrefix 関数を適用
return parts[0] + ":" + AddTwPrefix(parts[1]);
}
else
{
// class 文字列全体に AddTwPrefix 関数を適用
return AddTwPrefix(className);
}
}
}
単純にコピー＆ペーストしたらエラーが出たので
static 宣言に変更したり、HTML は 直接ファイルから読み込むように修正して実行。
dotnet add package HtmlAgilityPack
dotnet run
無事に スタイルのクラス名に tw- がついた HTML が生成されました。
追記
sm:hover:bg-200 の 場合には
sm:hover:tw-bg-200 のように書くようです。
Github Copilot に訂正のお願い。
前に書いた ProcessClassName 関数で
class 文字列を : で 分解して tw を付加する処理の修正をお願いします。
: が複数含まれている場合 : で 複数の文字列に分割した後 最後の文字の先頭に
tw- を付加するようなコードに変更してください。
その回答が以下
// 2) class の文字列を処理する関数
static string ProcessClassName(string className)
{
// ":" で文字列を分割
var parts = className.Split(':');
if (parts.Length > 1)
{
// 最後の文字列に AddTwPrefix 関数を適用
parts[parts.Length - 1] = AddTwPrefix(parts[parts.Length - 1]);
// 分割された文字列を ":" で結合
return string.Join(":", parts);
}
else
{
// class 文字列全体に AddTwPrefix 関数を適用
return AddTwPrefix(className);
}
}
まとめ
Github Copilot を使って対話的にコード生成した時の例を書きました。
作業内容をタスクに分類してみましたが、★１，★３、★４ の部分は プログラム作成の 急所であり、まだ 生成AI ででは代用できないようです。
コードでやりたい事と、その具体的な方法の概要が見えている。（★１）
おおざっぱに手順を指示すると それを実現するプログラムコードを生成してくれる（★２）
そのコードをテストする（★３）
予想と違う動きをしたので調査（★４）
コード生成の条件を変更を指示する（★５）
生成AI が 新しい指示でコードを生成する（★６）
生成したコードを動かして再度、動作確認（★７）
作成したコードを今回限りで捨てるか、再利用するのか、
誰でも使えるように体裁を整えるのか、今後のメンテナンス方針を検討する。（★８ 今回は WEBに公開して完了。自分も将来もしかすると使う事があるかも。）
すべての仕様を網羅しているか、いろいろなバリエーションで正しく動作するのか？
ちゃんときっちり仕様と照らし合わせてバリエーションテストを行う。（★９ 未実施。WEB に公開する事で誰かが不具合を発見して報告してくれる事を期待）
あとがき
そのうち 生成AI に 「私は ホームページは得意です。いくつかの質問に回答するだけで素敵なページを作成できます。」と言い出す時が来るのかな。
そんな時代に 人間がクリエイティブな仕事としてできるのは 農業かな。
無肥料、無農薬の野菜づくりもっとがんばろう！！