データベースを活用した用語集の作り方
以前に用語集のページを作成しましたが、掲載用語数が100を超えたあたりからファイルサイズが大きくなり、サイトの表示が重くなってきました。このような情報量が膨大になるページをHTMLソースに直接記述するのは限界があると感じています。
そのため、現在は各用語をデータベースに登録した上で、その都度、動的にデータを引き出してサイトに表示しています。この場合、用語の解説文などはHTMLソースに記載する必要がないため、ファイルサイズを大幅に削減することができます。
また、データベースを活用することにより、単純にHTMLを返すだけの静的なホームページから、訪問者のアクションに応じてサイトを動的に生成する動的なホームページとなり、より複雑な操作の実現も可能になりました。
例えば、当サイトの用語集のページでは、リンクにカーソルを重ねるとリンク先の内容を表示するプレビュー機能なども実装しています。
この方法のデメリットは、HTMLソースからテキストを削除するため、SEO対策上はネガティブな影響が出て来る可能性があります。ただ、最近のGoogleクローラーはJavaScriptも読めるようですし、SEOにどの程度の影響があるのかは不明ですが、当サイトではユーザビリティーを優先させることにしました。
動的に機能する用語集ページの作成手順
この動的に機能する用語集の作り方は以下の手順になります。
①レンタルサーバーでMySQLの新規データベースを作成
まずは、レンタルサーバーの管理画面で新規データベースを作成します。作成が完了しましたら、phpMyAdminからログインすると空のデータベースが確認できるはずです。
②phpMyadminから用語名、読み方、解説文、タグなどの新規テーブルを作成
「テーブル」はExcellのシートのようなものですが、行列を表示するための新規テーブルを作成し、縦の列に用語のIDや名前、解説文、タグなどの項目を設定します。生成AIに用語のHTMLソースを提示して相談すれば、最適な形でSQLコードを作成してくれるため、上部の「SQL」の箇所からそのコードを実行すれば簡単です。
ちなみに、IDはその用語を一義的に判別できる値が適切ですが、自サイトでは用語を定義する<dfnタグのid属性を設定しました。varcharは文字列、intは整数などの意味がありますが、詳細はここでは省略します。
③Pythonで既存の用語集から各データを抽出してSQLコードを作成
次に、上記のデータベースに登録する各用語のデータについて、パソコン上のPythonでサイトから抽出してSQLコードを作成します。Pythonのコードについては生成AIに書いてもらえば簡単です。
単にINSERT INTO テーブル名 () VALUES ('')の形式でSQLコードを作成して実行すればよいため、必ずしもPythonでなくてもよいと思います。
④作成したSQLコードをphpMyadminで実行して用語データを登録
次に、作成したSQLコードをphpMyAdminの「SQL」にて実行し、各用語をデータベースに登録します。
これで用語集をデータベースに登録することができました。あとは、サイト側からこの用語集のデータを引っ張ってきて、サイト上で表示するだけです。
⑤バックアップを取った上で解説文などをサイトのHTMLソースから削除
用語集はデータベースへ移動させたので、必要な項目以外はHTMLソースから削除します。自サイトでは<dt>タグは残した上で、<dd>タグの中身のみ削除しました。<dt>タグの用語名をクリックした際に<dd>タグの説明文をデータベースから取得し、その都度表示する仕組みにしました。
失敗した際に復元できるよう、バックアップのコピーを取っておくことをおすすめします。
⑥データベースと通信するためのPHPファイルを作成
次に、データベースと通信するためのPHPファイルをウェブサイトに作成します。書く内容としては、データベースに接続するためのIDやパスワード、用語集のデータを取得するためのSQLコードなどです。
このPHPファイルも生成AIに書いてもらうとよいでしょう。PHPファイルは、HTMLやCSSとは違い、ブラウザでアクセスしてもソースコードの表示はできないため、パスワードが知られる心配はありません。
⑦用語名のクリックで解説文をデータベースから取得するJavaScriptを作成
あとはJavaScriptにて、用語名がクリックされたら、解説文をデータベースから取得して表示するように設定します。その際、上記で作成したPHPファイルと連携してデータベースにアクセスすることになります。
つまり、JavaScript → PHPファイル → データベースの流れで各用語のデータを取得することになります。
まずは単純な機能から実装していき、正常に動くのを確認した上で、より複雑なタグ機能やプレビュー機能などをJavaScriptに追加していくとよいでしょう。
このJavaScriptは思ったようには動かず、時間がかかるかもしれません。具体的なコードについては、ChatGPTやGeminiなどの生成AIにコードを作成してもらうことをおすすめします。
以上となりますが、Python、SQL、HTML/CSS、PHP、JavaScriptなど、多様なプログラミング言語の連携プレーとなるため、プログラミングのスキルアップにも役立つかと思います。
- Python: 既存サイトからの用語データの抽出とSQLコードの作成に必要。
- SQL: データベースへの用語登録にSQLコードが必要。PHPにも記載が必要。
- PHP: データベースに格納した各用語データの取得に必要。
- JavaScript: 用語名をクリックした際の解説文の表示などに必要。
- HTML/CSS: サイトの表示に必須。
ちなみに、新規の用語をデータベースに登録するには、phpMyAdminにて直接編集するか、もしくはPythonで登録専用のデスクトップアプリを作成して対応することをおすすめします。
ただ、上記の方法でも、このまま用語数が増え続けるとファイルサイズが大きくなるため、ゆくゆくは「あ行」や「か行」などでページを分割していくしかないのかもしれません。