カテゴリ：ブログ作成～公開後～

ブログ作成 第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', () => {

• documentは「今表示されているウェブページ全体のHTML構造」を意味します。
• addEventListenerは「何かが起きたときに、処理を実行する」関数です。
• 'DOMContentLoaded'は「ページのHTMLが読み終わったタイミング」を意味します。
• () => { ... }は「そのときに行う処理」のかたまり（アロー関数）です。

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

• const links は「linksという変数を作るよ」という意味。
• document.querySelectorAll(...) は、ページの中から特定の要素を全部探す命令です。
• 'a[data-autotitle]' は、<a data-autotitle> という属性を持ったリンクを探します。

links.forEach(link => {

• linksは上で作った変数です。
• forEach は「リンク一つ一つに対して順番に処理する」ための命令です。
• link => { ... } で、個々のリンクについて行う処理をまとめています。

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

• link.getAttribute('href') は、そのリンクが指しているURL（ファイルの場所）を取得します。
• たとえば <a href="posts/post1.html"> なら "posts/post1.html" という文字列になります。

fetch(url)

• fetch() は、URLの先にあるファイルの中身を読み込む命令です。
• この時点では「読み込みを始めた」だけで、完了はしていません。

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

• .then() は「時間がかかる処理（読み込み）が終わったあとに、次の処理を続けて実行するよ」という仕組みです。
• response.text() は、取得したファイルを「ただのテキスト（HTML）」として読み込む命令です。

.then(html => {

• 前の行で取り出したHTMLテキストを、html という変数で受け取ります。
• このブロックで次の処理を実行します。

const parser = new DOMParser();

• DOMParser は、HTML文字列を「実際のHTML構造」として読み込める特別な機能です。
• new DOMParser() でその機能を使えるようにします。

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

• parser.parseFromString(...) は、HTML文字列を仮想のHTMLドキュメントとして読み込む命令です。
• 'text/html' は「これはHTMLですよ」と教えています。

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

• doc.querySelector('title') は、取得したHTMLの中から <title> タグを探しています。

if (title) {

• if は「もし～なら」という条件です。
• title(前の行で定義した、タイトルを取得する処理)が見つかった（＝存在する）場合だけ処理を続けます。

link.textContent = title.textContent;

• link.textContent は、リンクの表示されている文字を意味します。
• title.textContent は、タイトルタグの中に書いてある文字です。

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

• title がなかったときは「(タイトルなし)」と表示する処理です。

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

• .catch(...) は「エラーが起きたときの処理」です。
• console.error(...) で開発者向けにエラー内容を表示します。
• リンクの表示は「取得エラー」とします。

ということでコードを一通り理解した(つもりな)ので次は.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ファイルを作成すると編集が楽ですね！

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

カテゴリ：ブログ作成～公開後～

←ブログ一覧に戻る