これをこうして・・・おぉ、ちゃんと動いたぞ！
なんだか楽しそうですね！いったい何を盛り上がっているのですか？
やぁ、赤トマト君じゃないか。いやね、AIを使ったら、ブログ「やすりとのり」で使う「ページ送りナビゲーター」を上手く作ることが出来たのだ。
「やすりとのり」っていうのは青木鳥さんがやっているプラモとかのブログですね！（以下をご覧ください。新しいタブで開きます。）
そして、記事の下に配置してあるボタンみたいなやつが「ページ送りナビゲーター」という訳ですね。
わざわざ自作しなくても既存のパーツで何とかなりそうなものですけど、どうにかならなかったのですか？
それを説明するために、まずブログ「やすりとのり」のページ構成から順に説明していくのだ。
ページ送りの機能をめぐる試行錯誤
ブログ「やすりとのり」のページ構成
ブログ「やすりとのり」はWordPressでCocoonを利用してブログを作成しています。
その内容としてプラモデルの製作過程を公開しています。実際にプラモデルを製作して製作過程の写真を多数撮影。その製作過程を複数の記事で順に紹介しているのです。
そして、プラモデルが完成した後は製作過程などをギャラリー記事にまとめています。
それぞれの記事の間には前後関係があります。そのため、一つ前の記事や次の記事へのリンクを設置することでスムーズに前後のページを見てもらうことが出来ます。
当初はこのリンクをテキストで作成していましたが、見た目を改良するために試行錯誤を繰り返しました。
ページ送りのリンクで試行錯誤を繰り返した。
ブログ「やすりとのり」では関連するページへのリンクを記事の上部と下部に配置しています。
そのうち下部に配置したリンクについて説明します。
ブログを始めた当初は、ページ間をつなぐためにテキストリンクを使用していました。リンク先の記事のタイトルをテキストリンクとして2カラムのカラムブロックに配置したのです。
しかし、テキストリンクの文字数が多く、これがリンクであることやリンク先がどこなのかが伝わりにくいように感じました。
そこで、テキストを太文字にしてみました。
これにより、テキストリンクの存在感は増したのですが、それに伴い見た目の煩雑さも上がってしまったように感じました。
リンク先の記事のタイトルをテキストリンクとしたため、文字数が多くなりすぎたことが原因と思われます。そこで、テキストリンクの代わりにCocoonのブログカードを使用してみました。
タイトルは途中までしか表示されていませんが、すっきりとまとまったと思います。
Cocoonのブログカードで上手くいったのなら、「ページ送りナビゲーター」を作る必要はなかったのでは？？？
ウム。そのつもりだったのだが、意外な落とし穴があったのだ。では、その落とし穴について説明しよう。
なぜ「ページ送りナビゲーター」を作らないといけなくなったのか？
問題は、ブログカードを記事の下部以外の場所でも使用していることにありました。
ある記事の中で、参考として別の記事へのリンクを貼っておきたい場合があります。この場合は、リンク先を新しいタブで開くことで、元の記事に容易に戻れるようにしたいと考えました。
一方で、記事の下部のリンクは、元の記事を読み終えた場合に続きの記事を読むために使用します。この場合に新しいタブを開いてしまうと、ブラウザがタブだらけになってしまいます。
そのため、記事の下部のリンクでは新しいタブを開かないようにしたいです。
テキストリンクの場合は、各リンク毎に新しいタブで開くかどうかを設定できます。
Cocoonのブログカードでも、同様にリンクに対して「新しいタブで開く」という設定を行うことが出来るのですが、ここでの設定は実際のブログには反映されません。
代わりに、Cocoon設定の「ブログカード」タブに、内部リンク用と外部リンク用のブログカードの設定がまとめられています。
つまり、新しいタブで開くかどうかを各ブログカードごとに設定することは出来ないのです。
ブログ「やすりとのり」では、本文中のブログカードを「新しいタブで開く」設定としていたのだ。
「前の記事」や「次の記事」を開くのに、いちいち新しいタブで開かれるのはちょっと嫌ですね・・・
だから、「ページ送りナビゲーター」を作ることにしたのデ～ス。
AIコーディングで「ページ送りナビゲーター」を作成した！
どんなものを作ったのか？
これまで述べてきたように、「ページ送りナビゲーター」は前後関係がある記事をリンクでつなぐための仕組みです。
記事にショートコードを配置することで利用できます。
複数の記事の間のリンク関係を設定するため、専用の管理画面を用意しました。
対象となる記事にショートコードを配置し、管理画面でリンク先の記事IDを指定することで、Cocoonのブログカード風のリンクカードが表示されます。
これらの機能をプラグインにまとめ、WordPressに簡単に組み込めるようにしました。
プラグインに「カルガモ・ページ送りナビゲーター」という名前を付けました。そして他のプラグインとの競合を避けるため、名前空間、プレフィックスなどの仕組みを利用しました。
ところで、アイキャッチの女の子は誰なんですか？
カルガモ・ガールのカルモちゃんなのだ。このプラグインのマスコットをお願いしたのだ。
カルガモのカルモです！よろしくね♪
どんな技術が必要か？
HTML
今回作成した「ページ送りナビゲーター」は、ブログ「やすりとのり」の記事の中に表示されます。
ブログの記事のようなWebページは「HTML」により組み立てられています。そのため、ブログの記事の中に何かを表示するためには、「HTML」により表示したいものを組み立てる必要があるのです。
このようにWebページを組み立てるための機能を「マークアップ言語」と言います。
CSS
「HTML」により組み立てられたWebページは、「CSS」という機能によりデザインやレイアウトなど、見た目を細かく整えることが出来ます。
「ページ送りナビゲーター」の見た目も「CSS」によって整えられています。
「CSS」のようにWebページの見た目を整えるための機能を「スタイルシート言語」と言います。
PHP
「ページ送りナビゲーター」には、リンク先の記事のタイトルやアイキャッチ画像が表示されています。これらは、指定されたリンク先のURLに基づき、自動的に設定されます。
これを実現するためにはWordPressの「ショートコード」という仕組みを利用することが出来ます。
「ショートコード」は、あらかじめ用意しておいたプログラムをサーバーに配置して利用するための仕組みです。「ショートコード」で利用するプログラムは、「PHP」というプログラミング言語で作成します。
PHPは、もともと「Personal Home Page（パーソナル・ホーム・ページ）」の略として作られました。現在は「PHP: Hypertext Preprocessor」という再帰的名称の略として定義されています。
AIコーディングであっという間に実装できた！
「PHP」、「HTML」や「CSS」とかは、マイコンのプログラムばかり作っている青木鳥さんには、荷が重かったのじゃないですか？
うむ。よく分からなかったので、試しにGoogleのAIモードにアドバイスを求めたら、ソースコードを作ってくれたのだ。
ソースコードっていうのは、プログラムのことですね！AIモードが作ったプログラムを参考にした、ということですか？
いやいや、AIモードのソースコードをそのまま使ったら上手くいったので、さらにAIモードへの指示を続けて改良を加えたのサ。
え、そうなんですか！じゃぁ、自分では作っていないってことですよね？ずるくないですか？
まぁ、それはそうなんだが・・・
ずるいですよ！僕にもやり方を教えてくださいよ！
分かったのだ！やり方は次回説明するのだ！
今回のまとめ
今回はAIコーディングで作成した「ページ送りナビゲーター」を紹介したのだ。
次回はいよいよ「ページ送りナビゲーター」の作り方ですね！
という訳で、次回をお楽しみに～ナノだ！
コメント