D○Mの商品一覧を拡大する拡張機能
サイトによってレイアウトが違うと見づらいと。
amazonはやけにでかい。
DMM(の電子書籍など)はやけに小さい。
などなど。
それを拡大して見やすくするのは完全に趣味のお話ですが、
そういうのもAI生成を使ってサッと出力できたらいいよね
どこまでAIに頼るか
サイト構造を解析してJSを構築していきますが、それをAIに任せるとなるとまずサイトのソースコードを学習させる必要があります。
その上で
・ここを広げたい
・ここの高さの制限をなくしたい
・ここの画像の幅を100%に
・etc
と指定していくのが一般的なのでしょうかわかりません。
元よりHTMLコーダーからすれば、
デベロッパーツールでstyleを弄くって見た目を変更するのはよくやることです。
であれば、その変更したい内容をjavascriptとしてAI生成させればよいのでは？
と考えて以下のプロンプトにまとめました。
以下のjavascriptのコードを作成してください。
ページの中に次のセレクタの要素が存在するか確認します。
「.listPage .productList」または「.apcgameList .productList」
存在しなければここで終了します。
次にその要素がグリッドレイアウトかを確認します。
グリッドレイアウトであれば、
sytle「grid-template-columns」
を
「repeat(auto-fill,minmax(calc(100% / 5),1fr))」
に変更します。
次に以下の子要素のliタグをすべて取得します。
その要素の中に以下のセレクタで取得できる要素が含まれる場合
「.component-cardProductBuy__packageImage」
styleに「height:auto;」を設定し、
子要素の画像のsrc属性の末尾「ps.jpg」を「pl.jpg」に変更します。
なお上記に至る前に3回プロンプトを直していますが、
3回とも変更しなくていい部分も変更したJSを出してきました。
動作するとは言え安定しないのはAIの性質。
これは毎度0から出力してるためですが、安定させたいならそこを指定しないといけませんよと。
なお私は最終的に自分の気に入るようにコードを修正しています。
因みにこれはdlsoft.dmmの商品一覧をいい感じに広げるJSです。
ご利用は自己責任で。
プロンプトの作成
以下のjavascriptのコードを作成してください。
ページの中に次のセレクタの要素が存在するか確認します。
「.m-boxListBookProduct2.fn-user-campaign」
存在しなければここで終了します。
次にその要素がフレックスレイアウトか確認します。
フレックスレイアウトであれば以下のセレクタの要素をすべて取得します。
「.m-boxListBookProduct2.fn-user-campaign > li」
そのliタグのstyle「width」を「calc((100% - 7px)/4)」に変更し、
子要素「.m-boxListBookProductTmbImg__box__img」のstyle「position」を「relative」に変更し、
子要素「.m-bookImage__img」が含まれる場合
その画像のsrc属性の末尾「ps.webp」を「pl.webp」に変更し、
styleを「width: 100%; height:auto; max-width:inherit; max-height: inherit;」に変更します。
またliタグから画像の間にある要素全てに
「width: 100%; height:auto; max-width:inherit; max-height: inherit;」を設定します。
あとは出力されたこれらのJSを拡張機能で自動実行するように組み込めば
いい感じの拡張機能の出来上がり。
というのがHTMLとCSSのわかる人間が作るプロンプトのお話です。
つまりJSがわからなくても変更したい箇所を言語化できれば
誰でもいい感じのコードが作れるということですね。
すごい時代になったものです。
プロンプトの作成(文字のみ)
ではわからない人はどうするのかと。あくまで予想ですが、まずサイトのソースを学習させることからはじめ
以下のjavascriptのコードを作成してください。
横に8つ並んでいる商品を横4つに変更し、
画像を幅いっぱいまで大きくしてください。
上記命令での懸念事項は
・そもそもHTMLソースをレンダリングした上で判断できるのか
・商品という単語で判断できるか(ソースを学習させる時に商品一覧と覚えさせれば可能か)
・画像を幅いっぱいにしても高さが決められているので色々追加指示が必要
などなど
業種や部署に合わせた最適なプロンプトの書き方というのもあるのでしょうね。