「ページ送りナビゲーター」はWordPressのブログで使えるブロックなのだ。前後関係がある記事を順番にリンクでつなぐことが出来るのだ。
わざわざ自作した理由も前回の記事で説明しましたね。
この「ページ送りナビゲーター」をAIによるプログラミングで簡単に実現することが出来たのだ。
AIでどうやってプログラミングしたのか・・・がっつりと聞かせてもらいましょう！
AIを利用して「ページ送りナビゲーター」を実現
開発の流れについて
「ページ送りナビゲーター」はWordPressのテーマ「Cocoon」で使うものとして作成しました。
始めに、AIに以下の2つの機能を有するものを作ってもらい、これを少しずつ改良していきました。
- ブログカードのイメージでリンク先を指定できる。
- リンク先の開き方としてブログカードと異なる設定を行える。
こちらからの要望に応じてAIが提案する実現方法も「カスタムHTML」から「ショートコード」そして「プラグイン」と変化していきました。
今回は開発に使用したAIと「カスタムHTML」の段階での開発の流れについて説明します。
「Google Chrome」の「AIモード」を利用
具体的な開発の流れに入る前に、どのようなAIを使ったのかを説明しておきましょう。
AIコーディングで用いられるツールとしては「GitHub Copilot」、「Cursor」や「Claude Code」などが良く使われています。本格的な開発ではこれらを適宜組み合わせて使用するのが一般的です。
しかし、初心者がいきなりこれらの本格的なツールを使用するのはハードルが高いです。
そこで、今回はもっと手軽に使うことが出来るGoogle ChromeのAIモードを使用してみました。
Google Chromeはグーグルが提供しているブラウザで、基本的には無料で使用することが出来ます。「Google Chrome公式」で検索して公式サイトにアクセスするとダウンロードできます。
（以下をクリックすると、新しいタブで「Google Chromeの公式サイト」を開きます。）
Google Chromeをインストールして起動すると、画面の中央に検索キーワードやURLを入力する欄が表示されます。その右端に、「AIモード」という文字が表示されています。
この「AIモード」をクリックすることでAIモードに切り替わります。中央の入力欄にAIへの質問や指示を入力することで様々な回答を得ることが出来ます。
そして、AIにプログラムの作成を指示すると出来上がったプログラムを表示してくれるのです。
AIモードに質問や指示を入力するときには、エンターキーを押すタイミングに注意が必要だ。
へぇ、そうなんですか！コツのようなものがあるのですね。
そうなのだ。不用意にエンターキーを押すと質問の途中でも回答が始まってしまうのだよ。
じゃぁ、質問が長くなっても改行とかできないですね・・・
その通りだ。それと、漢字変換した直後もエンターキーを押しすぎないように注意が必要だ。
ウ～ム、何か良い対策はないのでしょうか？
そうだね。間違えてエンターを押してしまった場合は、質問を入力し直すのが良いようだね。あと、落ち着いて入力することかな。
質問をしっかり考えて、落ち着いて入力するのが良いのですね。
AIとの対話で「カスタムHTML」として作成した。
とにかく作ってみた。
「ページ送りナビゲーター」は、前後関係のある記事について、「前回のページ」と「続きのページ」へのリンクを見栄え良く表示できるものを目指しました。
2項目のカラムのそれぞれの項目にブログカードを配置し、前回の記事と続きの記事へのリンクを設定したものをイメージしました。
これを実現するため、以下の機能を持つブロックの作成をAIに指示しました。
- Cocoonのブログカード風のデザインで前回の記事と続きの記事へのリンクを表示する。
- リンクにはブログカードのラベルに相当する表示も追加する。
- リンクを左右に並べて表示する。
すると、以下の「カスタムHTML」を出力してくれました。（AIが出力してくれたものを記事に組み込んでプレビューしました。）
AIが出力してくれたHTMLとCSSのソースコードは、以下をご覧ください。（新しいタブで開きます。）
一応四角い枠でリンクが囲まれており、またアイキャッチも表示することも出来ています。しかし、まだ見た目がブログカードと大きく異なっています。
そこで、これをベースに改良することにしました。
デザインをCocoonのスキン「カラフルライン」風に変更した。
ところでテーマ「Cocoon」では、「スキン」を指定することでデザインを切り替えることが出来ます。ブログ「やすりとのり」で使用している「カラフルライン」のイメージでの改良を指示することにしました。
また、カードの上部に表示されている「PREV」をブログカードの「ラベル」風に表示することで、よりブログカードのイメージに近づきそうです。
これらを踏まえて、以下の修正を加えるように指示を行いました。
- スキン「カラフルライン」のイメージで色や文字の見た目などを設定する。
- タイトルは3行に収まる範囲で表示する。
- 「前回の記事」、「続きの記事」をブログカードのラベル風に表示する。
- 「前回の記事」にはタイトルの左に「＜」を、「続きの記事」には右に「＞」を表示する。
これにより生成されたものに対して、さらに色の調整を指示して、以下に示すものが出来上がりました。
AIが出力してくれたHTMLとCSSのソースコードは、以下をご覧ください。（新しいタブで開きます。）
ブログカードとは見た目の違いはありますが、全体の雰囲気にはなじんだものが出来上がりました。
特にアイキャッチが小さめに表示されることで、タイトルが長めに表示されるようになりました。また高さが抑えられ、より見やすくなったのではないかと思います。
そしてさらに、ここに掲載した画像では分からないですが、リンクのカード部分にマウスポインタを重ねるとカードがホバー（少し浮きあがったようなエフェクト）する機能までAIが追加してくれました。
（ラベルの文字が「PREV」と「NEXT」ですが、これは最後に調整することにしました。）
ここで、さらにリンクとしての便利さを追求するため、機能を追加することとしました。
リンク先が訪問済みのページの場合はグレーで表示するようにした。
テキストリンクでは、訪問済みのページの場合にリンクがグレーで表示されます。これにより、リンク先を訪問済みかどうか一目で区別することが出来ます。
「ページ送りナビゲーター」にも同様の機能があると便利です。
これを踏まえて、以下の修正を加えるように指示しました。
- リンク先が訪問済みの場合は、カードの背景をライトグレーに変更する。
これにより、リンク先が訪問済みの場合はカードの背景がライトグレーで表示されるようになりました。
また、マウスポインタを重ねると、グレーが少し暗く変化する機能まで追加してくれました。
このように痒い所に手が届くAIの提案力には、驚きを禁じ得ないですね！
ちなみにこの修正では、CSSを少し追加するだけで対応することが出来ました。CSSの追加部分は以下をご覧ください。（新しいタブで開きます。）
「アジャイル」って何のこと？
AIに指示を行うと、たちまちプログラムが出来上がるのは凄いことだと思うのだ。
そうですね。それで、作ったことがないCSSも簡単に作れたのですね！
ウム。それに、少しづつ作っては動かして確認し改良を繰り返す、という方法でもスムーズにカスタムHTMLを作ることが出来たのだ。
そういえば、プログラムを作って試しては修正していくやり方を「アジャイル」というんでしたっけ？
ウムム・・・アジャイル？いったいどこでそんな言葉を覚えてきたんだ？
ということは、AIを使えば一人でアジャイルが出来る、ってことになりませんか？
そう言われてみれば、そんな気がするような、しなくもないような・・・
これすなわち、「ひとりアジャイル」ですね！
ガ、ガホーン！
今回のまとめ
本格的なAIツールを使わなくても、Google ChromeのAIモードで手軽にAIコーディングを行うことが出来るのだ。
実際に作ったものを動かしては改良していくやり方は、まさに「アジャイル」ですね！
AIコーディングによって、あっという間にプログラムが出来上がるので、一人でもどんどん作り込むことが出来たぞ！
次回はさらに「ページ送りナビゲーター」を使いやすくするのですね♪
ウム！次回も、おッたのしみに～！
コメント