ページの中に共通の要素を読み出す４つの方法

●ページの中に共通の要素を読み出す４つの方法

htmlの製作で、複数のページに同じ要素を読み出したい時がありますよね。メニューの共通リンク帯だったり、バナー情報だったり、アフィリのリンクだったり。HPの全ページで共通に表示したいものです。

もちろん、全ページに同じ内容を、htmlの中に記述してもいいんですが。でも修正が出た時には結構大変です。全htmlをコピペや置換で対処するにしても、なんか危険だし面倒。

そんな時には、共通の部分だけのhtmlを別ファイルにしておいて、自動的に読み出せるようにしておいた方がラクチンです。よく使う方法は以下の４つ。因みに、読み込みファイルの名前は仮に「aa.txt」とします。

▼ SSIを使う

SSIとは、Server Side Includeの略で、ほとんどのレンタルサーバーで使えます。ただし、それなり設定が必要なサーバーもありますから、契約しているサーバー会社のヘルプ等を参照してみて下さい。

「AddHandler server-parsed html」
等の文字列を記述した「.htaccess」というファイルの設置が必要なサーバーもあれば、htmlの拡張子を「.shtml」にしなければならないサーバーもあります。（サーバー会社によって「.htaccess」の中身は微妙に変化しますので要注意）

読み出したいhtmlの位置に、
「」
といったような文字列を挿入します。そうすると、「aa.txt」のファイルの内容が表示されます。

▼ PHPを使う

PHPとは、Perlと共に双璧をなす、WEBシーンではお馴染みのインタープリタ型のプログラム言語です。（インタープリタとは「.EXE」のような実行型ファイルを必要としない言語のこと。要するにコンパイルが必要ありません）

PHPも、ほとんどのレンタルサーバーで使えます。しかも、htmlの中に直接書くことも可能です。その際には、
「AddType application/x-httpd-php .php .html」
等の文字列が記述された「.htaccess」ファイルの設置が必要だったり、「.php」という拡張子を付ける必要があったりします。（サーバー会社によって「.htaccess」の中身は微妙に変化しますので要注意）

読み出したいhtmlの位置に、
「<?php include('aa.txt'); ?>」
といったような文字列を挿入します。そうすると「aa.txt」のファイルの内容が表示されます。

▼ Javaスクリプトを使う

Javaスクリプトもここ数年、htmlと仲良く共存する言語になっています。最大の長所は、SSIやPHPとは違い、特別な設定無くしてhtmlの中に直接書くことが出来るフレンドリーな言語です。

もちろん、お使いのブラウザでJavaスクリプトの動作が許可されていることが条件ですが、今のWEB環境ではJavaスクリプトを拒否すると成立しないサイトばかりですし、どのブラウザでもデフォルトでJavaスクリプトを許可しているので、特に問題はないでしょう。

余談ですが、よく、Javaスクリプトと、通常のJavaを同じものと理解している方がいますが、コードの様子は似ていますが、全く違うものですので。

Javaスクリプトを使用して、外部のファイルをhtmlの中に呼び出す方法は、いくつかあるのですが、僕のオススメは、jQueryを使う方法です。シンプルな記述で済みますので。

※Google Hosted Libraries のjQueryを使用し、
<script src="http://ajax.googleapis.com/
…/li…/jquery/1.11.1/jquery.min.js"></script>

※.load()でテキストファイル「aa.txt」を読込み
<script>
$(function() { $("‪#‎read_text‬").load("aa.txt"); } );
</script>

※CSSで制御し、
<style>
#read_text { margin:0; padding:0; }
</style>

※こんな感じでhtmlに書き出します。
<p><div id="read_text"></div></p>

※参照
http://ghweb.info/post-2976.html
注意点としては、jQueryを使うので文字コードの一致に気をつけましょう。出来れば、htmlもUTF-8で書いておくのがいいと思います。

▼ インナーフレームや、objectタグを使う

方法は、ネットの創成期からあるシンプルな方法です。インナーフレームとは、htmlページの中に小窓のようなフレームを設置して、その中に違うhtmlページを表示する方法です。

このインナーフレームで読み出すファイルは、テキストファイルでも可能なんですが、読み出すファイルの中にhtmlのタグが含まれる場合は、「<html>」で始まり「</html>」で終わる完全なhtmlファイルでなくてはなりません。（タグ自体が文字として表示されてしまうので）

▼ ４つのうち何を使うか？

上記の４つの方法。何を使っても同じような効果が得られます。呼び込むファイルが、単純なhtmlやTXTファイルなら、どれでもいいと思います。

ただし、読み込むファイルがプログラムだったりする場合は、Perlで書かれたプログラムの場合はSSI、PHPで書かれたプログラムの場合は、PHPを使って読み出すのが一般的です。Javaスクリプトは万能選手で、多種多用なプログラムファイルの呼び出しに使われます。インナーフレームの場合は、プログラムを起動、読み出す事も出来ますが、今となっては、あまり一般的ではありません。

▼▼▼▼
PPCアフィリエイトの必須ソフト
PPCアフィリエイトは、数年前にGoogle AdWordsでは、ほぼ禁止状態に。
しかし最近は、Yahoo!では、物販だけではなく、昔はNGだった情報商材も
PPCアフィリの規制が緩くなっています。
このソフトを使うと、PPCサイトの量産と、Yahoo!へのPPC出稿が
ホント、異常にラクになりますよ。