カテゴリ:ブログ作成~公開後~

リンク先のテキストを取得しよう!

ブログ作成 第13回
リンク先のテキストを取得しよう!

投稿日:2025年5月28日

13回目となる今回は、JavaScriptを活用してリンクを貼る際にリンク先の特定のタグ(今回は<h1>)からテキスト情報を取得し、リンクテキストに自動的に入力されるようにします!

※セキュリティ制限(CORS)のため、同一ドメイン(自分のブログ内のHTML)からしか取得できません。

現在の問題点

現状はページ下部の前の記事次の記事、トップページの記事一覧などの各リンクテキストは全て記事タイトル等を確認しながら手入力しています。
1記事増えるたびに次の記事、記事一覧、更新履歴、カテゴリ一覧の項目にリンクを追加し、テキストを入力したものをコピーしています。

トップページの記事一覧。この作業のリンクテキストの入力が無くなるだけで楽になりますよね!
第10回ではトップページでのみ使用するJavaScriptだったのでページの中にコードを書きましたが、今回のコードは全記事に貼り付けるため、.jsファイルを作成してそれを読み込むようにします。

導入方法をChatGPTに聞く

やりたいことが決まったので、どうすれば導入できるかChatGPTに聞いてみます!

JavaScript(+fetch API)で導入できるみたいです!
セキュリティ制限のため、自分のブログ内のファイルにしかアクセスできないので注意です!

fetch APIとは

fetchは第10回で出てきた、指定のデータにアクセスするメソッドですね!
前回はHTMLにアクセスしましたが今回はURLにアクセスします。

APIとはApplication Programing Interfaceの略で、
アプリが別のサービスと会話するための窓口です。
よく使われる例としては天気APIで今日の天気を取得したり、Google Maps APIで地図を表示したり、
現在位置を取得したりするのに使われているようです。

fetch APIについてChatGPTに質問したときに、図解でも紹介できますよ!
とのことだったので作ってもらいました。優秀すぎる!!!

HTMLコードの解説

では実際にどのようなコードを使用するのか見てみましょう!

まずは本文に貼るリンクに属性を付与します。
<ul>タグにclass=auto-title-listを付与し、<li>タグのリンクにdata-autotitleを付与します。

classとdataの違い(属性)

classはCSSを適用させるときに属性の指定に使いました。
ではdata-〇〇とは何なのでしょうか!ChatGPTに聞いてみました。

結論から言うとclassはCSSでスタイルを当てるために使う。
data-〇〇はJavaScriptにデータを渡すために使うものです。

JavaScriptのコードの解説

次はHTMLの最後などに追加するJavaScriptのコードを見てみましょう。

では1行ずつ解説します。by ChatGPTに聞いた

document.addEventListener('DOMContentLoaded', () => {

まとめると、ページのHTMLが読み込まれたら、中の処理を実行する準備をしているということです。

const links = document.querySelectorAll('a[data-autotitle]');

要約すると、a data-autotitleという属性を持ったリンクをページの中から全部探す命令のことを、linksって言うことにするよ!ってことです。
属性a data-autotitleは上のHTMLに貼るコードの時に作りましたね!
自動でタイトルを取得したいリンクをまとめて取得します。

links.forEach(link => {

取得したリンクたちに、ひとつずつ処理をしていく命令です。

const url = link.getAttribute('href');

どのHTMLファイルを読み込めばいいか確認するコードで、link要素からhref属性を取りだす事をurlって呼ぶことにするよ!ってことです。

fetch(url)

(url)とは、上で定義した変数「url」のことで、url には href の文字列(例: "posts/post1.html")が入っていて、fetch(url) はそれを読み込むよ!という意味です。

.then(response => response.text())

HTML全体のテキストを取りだします。

.then(html => {

const parser = new DOMParser();

HTMLの文字列を「タグごとに」扱えるようにします。

const doc = parser.parseFromString(html, 'text/html');

取得したHTMLをちゃんと解析できる形に変換しています。

const title = doc.querySelector('title');

HTMLのタイトル部分を取得しています。この処理をtitleと呼ぶことにするよ!ってことです。

if (title) {

link.textContent = title.textContent;

リンク要素に表示されている文字を、タイトル要素の中に書いてある文字にするよ!ってことです。

} else {
link.textContent = '(タイトルなし)';
}

elseは「それ以外」という意味なので、見つからなかった場合の処理です。

})
.catch(error => {
console.error('取得失敗:', error);
link.textContent = '(取得エラー)';
});

エラーがでた際にブラウザの開発者ツール(Windowsの場合はF12キー)のコンソールに赤い文字でエラー内容がでるようにするコードのようです。
今のところはこの程度の認識で次に進みます!

ということでコードを一通り理解した(つもりな)ので次は.jsファイルを作成しましょう!

.jsファイルを作成する

ブログプロジェクトにjsフォルダを作成し、autoTitle.jsファイルを新しく作ります。

そのファイルにJavaScriptコードを貼り付けます。

これで準備完了です!!

実際にコードを貼り付けてみる

前回の記事にHTMLコードを貼り付けてみましょう。

ページの一番下に配置しました。
この段階ではリンク先のテキストを入れ込む箱を作っただけです。
どうなっているかというと

無。なにも無い。ここにテキストを入れるためのJavaScriptを読み込むコードを貼りましょう。
<script src="js/autoTitle.js" defer>を</body>タグの直前に貼り付けます。

</body>タグの直前に置きました!jsファイルのパスを正しく指定しなおしました。

するとどうでしょう。。。無事リンク先のタイトルを勝手に取得してきましたね!
あとはスタイルを適用させるためにpost-nav属性を付与して

ついでにリンクを<p>タグで囲んで、前の記事は←、次の記事は→矢印を付け足します。

うまくいきました~~~!!!これでいちいちタイトルを手入力しなくて済みますね~

トップページにも適用したいのですが、こちらは第〇回も表示してほしいので、見出し1である<h1>を取得する.jsファイルを作ります。
作り方は簡単。jsフォルダにautoh1.jsファイルを作成してautoTitleの中身をコピー。

赤枠部分を選択し、titleをh1に書き換えます。

JavaScriptを読み込む際にautoh1.jsを指定します。

リンクのタグを書き換えて、テキストを消します(消さなくても問題なかったですが一応。)

↓↓↓   ↓↓↓

するとどうでしょう。

トップページには見出し1を取得し、ブログ作成 第〇回まで含んだものが表示されています!!!
成功~~~~!!!!!
今回のように複数ページにJavascriptを使用する場合や、編集したいときなどはページに書き込むのではなく、.jsファイルを作成すると編集が楽ですね!

ということで今回はここまで!

カテゴリ:ブログ作成~公開後~

←ブログ一覧に戻る