ホーム
WEB制作
WEBサイトをテンプレート化する方法

Scriptでサイトをテンプレート化する方法とそのデメリット

前のページで、インラインフレームでサイトをテンプレート化しようとしたけど断念した、それでPHPサイトを作ることになったと言う話を書きました。

【紆余曲折】 サイトをテンプレート化することを決意した

【難問解決】 PHPでテンプレートをincludeした

でも、それ以外に何かやり方はないかと探していたら Script でテキストファイルを読み込む方法を見つけました。

Scriptでテキストファイルを読み込む方法

１．　jQuery コード配布サイトから、最新のjqueryファイルをダウンロード

これはScriptコードを読み込むための素地のようなもの。
これがないと、Scriptコードだけでは作動しない。

jQuery

上記ページのダウンロードボタンをクリックすると、以下の様なリンクが表示される。
このリンクは英語で書かれてあるが、日本語に直すと以下の通り。

Download the compressed, production jQuery *.*.*
圧縮、生産 jQuery の *.*.* (バージョン名)  をダウンロード

コードがすべて圧縮保存されている jQuery。
圧縮されているのでデータ量が少ない。
普通はこれを選ぶ。

Download the uncompressed, development jQuery *.*.*
圧縮されていない、開発jQueryの *.*.* (バージョン名) をダウンロード

開発段階の、コードが全く圧縮されていない jQuery。
圧縮されてないのでカスタマイズには向いているが、そのまま利用するとデータ量が多くなってしまうので、普通は上の圧縮された方を使う。

Download the map file for jQuery *.*.*
jQueryの *.*.* (バージョン名) のマップファイルをダウンロード

jQuery *.*.* release notes
jQueryの *.*.* (バージョン名)  のリリースノート

jQuery *.*.* release notes と Download the map file for jQuery*.*.* は、単にマップファイルとリリースノートなので、これら2つは関係ない。

２．　サーバーのルートフォルダの中に jsフォルダ を作成する
３．　ダウンロードしてきたjqueryファイルをサーバーにアップロードする

４．　<head></head>内に以下のどちらかのコードを記入

<!-- サーバーにJQueryファイルをアップロードする場合 -->
<script type="text/javascript" src="/jquery-バージョン数.min.js"></script>

<!-- Google API のコードを使わせてもらう場合 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/*.*.*（バージョン名を変更する）/jquery.min.js"></script>

GoogleAPIのコード例については、Google APIのサイトに載っていますので、そちらをご覧ください。

Hosted Libraries | Hosted Libraries | Google Developers

※　ファイルをダウンロード＆サーバーにアップロードせず、Google API などのJSファイルの提供元へのリンクを貼っても良いのですが、それだとサイト表示が遅くなるので注意が必要です。

５．　読み込みたいテキストファイルを用意する
（Scriptのファイル名さえ変更すれば、HTMLファイルでもPHPファイルでも読み込める）

６．　テキストファイルをサーバーにアップする
７．　テキストファイルを読み込む場所に以下のコードを入力する

<script>
$(function() {
$("#●●●").load("https://□□□.□□□/■■■.txt");
});
</script>
<noscript><p>▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</p></noscript>

<div id="●●●"></div>

６．　$("#●●●")と<div id="●●●">の中の ●●● の部分に、自分の好きなIDを書く

ID名は英数字であれば何でも良い。
両者は同じIDにする。

８．　https://□□□.□□□/■■■.txtに、読み込みたいテンプレートのURL（ファイル名付き）を書く

９．　<noscript><p>▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</p></noscript>の中に好きな文言を入れる

『 Java Script が無効になっています。<br>このページの記事は Java Script で読み込んでいます 』などの文言を入れる。
改行は<br>タグで反映させる。

例に書くとこんな感じ

<script>
$(function() {
$("#test").load("https://exe.com/test.txt");
});
</script>
<noscript><p>Java Script が無効になっています。<br>このページの記事は Java Script で読み込んでいます</p></noscript>

<div id="test"></div>

ブラウザの Scriptの設定がOFF になっている場合は、<noscript></noscript>の中に書いた文章が表示されます。
<noscript></noscript>の中は、画像でもOKです。

<!-- 画像で表示する場合 -->
<noscript><p><img src="https://***.***/***.png" width="***" height="***"></p></noscript>

この jQuery を使用したテキストデータの読み込み（ load ）の方法は、UTF-8以外の文字コードのテキストデータでは文字化けして上手く行きません。

そのため、UTF-8以外の（Shift_JISなど）文字コードのテキストデータを読み込むには、上記のスクリプトを変更する必要があります。
（詳しくは、jQuery で外部ファイルを読み込んだ時に文字化けするのを解消する方法をご覧ください）

Scriptでサイトをテンプレート化する方法のデメリット

サーバーへの負荷

Scriptでサイトをテンプレート化すると、ブラウザがテンプレート用のファイルを読み出す度にサーバーに負荷がかかります。

本当は、サーバーが一発で表示してしまえばよいのですが、個別にバラバラ読み込ませるので、その都度負荷がかかります。

アクセス数や読み込ませるファイル数とファイルサイズにもよりますが、使用中のレンタルサーバーが現時点でキツキツの場合、この方法でテンプレート化すると、５０３エラーが頻出したり、サーバーの使用制限を受ける可能性があります。
（アクセスにもよりますが、そこそこのサーバーを使わないとです。(；´∀｀)）

そのようなわけで、もし今後テンプレート化する場合は、サーバーの状態を見つつ、慎重にテンプレート化していった方がよいかもしれません。

色々考えてみたものの、どうしても大きな負荷が避けられない場合は、今よりも性能の良いレンタルサーバーへ移転するか、今のコースよりも上位のコースに鞍替えすると良いです。

資金的には少し大変になってしまいますが、月額千円〜千数百円程度の負担増であれば大丈夫な方は、一度、検討されてみても良いかもしれません。

ブラウザの問題

Script でサイトをテンプレート化すると、ブラウザの設定で ScriptをOFF にしていると、レイアウト崩れを起こす可能性があります。

ただし、これを上手く利用すると 『 コピペ防止 』 ができます。
（Java Script をOFFにしていると表示できないので）

ディベロッパーツールなどでソースコードごと全部コピペしてしまう方法もありますので、完全にコピペ防止ができるわけではないですが、そう言うのを知らない人が安易にポチポチポチポチとコピペしてしまうのは防止できます。

個人的には、Script は OFF でも動く方がありがたいなあと思ったりします。
（昔は、一時的に自分でもサイトの一部を Script で読み込んでいましたが。(￣ｍ￣)）

なぜなら、Script が ON の設定のままネットサーフィンしてしまうと、表示するだけで感染してしまうウイルスや、勝手に変なファイルをダウンロードさせられたり、サイトやフィッシングサイトに転送されてしまう可能性があるからです。

もうすでに、信頼できるとわかっているサイトであれば良いのですが、そうでないとやはりウイルス感染が怖いと言うのがあります。

PHP で テンプレートをincludeする場合、Script が OFFの設定にしてあってもちゃんと表示できますので、PHPでincludeする方が無難なのではないかと思います。

【難問解決】 PHPでテンプレートをincludeした

スパム認定の危険性

実は、この Script OFF で文章や画像を表示するやり方は、Script OFF で検索クローラーとユーザーに全く違うページを見せると言う古典的なスパム手法と同じやり方です。

そのようなわけで、これをやるとクローラーからスパム認定されてしまう可能性が微粒子レベルで存在します。

現在の Googleクローラー は Script にも対応していますので、故意に見せないと言うのでない限りは、スパム認定までいかないとは思いますが、一応、記憶の片隅にでも置いておいた方が無難かもしれません。

今回のこれはユーザーには見えない隠し文字として <noscript></noscript> 内に大量の文字を見せるやり方ではないので、多分問題にはならないです。

ちなみに、Googleクローラー が Scriptでテンプレートや記事を読み込んだサイトをどのように認識するかと言う問題ですが、以前、実験して Fetch as Google にかけたものがありますのでご覧ください。
（テンプレートではなく、中の文章を読み込ませています）

ユーザーに見えるものと、Googleに見えるものはほぼ同一です。
ですので、これは問題にならないのではないかと思います。

ちなみに、ダウンロードされたファイルを見ると、スクリプトコードが書かれてあるだけで、Scriptで読み込んだテキストファイルの表示はできていません。

ですので、テキストファイルを読み込めており、クローラーはちゃんとテキストファイルを認識できてはいるけれど、クローラーが認識したページファイルにはスクリプトコードしか書かれていないと言うことになっています。

次ページ

【使い回し】 複数サイトのテンプレートの共有化について

前ページ

PHPとScriptによるテンプレートファイルの表示の違い

広告

このカテゴリの記事
その他のカテゴリを見る