HTML静的ページで部分的な別ファイルのソースを読み込む方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

ホームページを制作する時に、色々な構成で構築する事ができますが、wordpressは、index.phpを基準にして、PHPで全て管理する方式ですが、データベース構成や、あまりにも無駄なPHPプログラムフローになっているため、構築直後は問題ありませんが、アクセスが据えてきた時に、いきなりWEBページが遅くなる事はよく聞く話です。
 

やはり静的ページのスピードが一番効率がいいのではないかと思い、自社のWEBページを作ってみたのですが、それでもやはりページ内の構成を効率的に行いたいのが正直なところです。
 

http://myntinc.com
 

やりたい事

静的ページの構成ではHTMLファイル毎にデータを管理すればいいのですが、ヘッダやフッタなど、どのページも同じ事を書いている情報の部分が、ページの追加をした時や、書き直しが発生した時に全てのファイルを書き直すというのが非常に非効率に感じるはずです。
 

スクリーンショット 2018-03-19 12.01.52
 

この図のようにHTMLに同じ要素を個別に保持している状態が一般的ですが、
 

スクリーンショット 2018-03-19 15.51.06
 

参照できるようになると、修正が楽になります。
形としてはタグマネージャーに近い状態ですね。
 

やればいいじゃん

タグマネージャーを使ってこれらを行う事は可能ですが、他のシステムを組み込むというのが非常に無駄に感じるので、ここでの制約はHTML静的ページでローカル環境で行える事を前提にしたいと思います。
 

そして、これができる方法は以下の通り。
 

1. SSIを使ってincludeする。(ただしサーバー側で対応している必要があります。)
2. jQueryのload関数を使う。(そもそもjqueryを読み込みたい)
3. OSSのJSライブラリを使う。(不具合が発症している例も数多くあるらしい)
4. 独自のJSライブラリを使って簡易に読み込む

 

かつてHTML3ぐらいまでの王道はSSIでしたが、nginxなど最近の趣向としてSSIはFRAMESETと同じレベルで使わない方向のようです。
 

なんでかって?・・・たぶん、サーバーのデフォルト設定でSSIが有効になっていないから、環境構築時の制約が増えるのと、いざ本番にセットし忘れたら事故になる確率が高いからでしょうね。
 

jQyeryは、安定してますが、実は今回のこのやり方は、jQueryを含めたBootstrapモジュールを読み込む事を前提に考えたやり方なので、そもそもjqueryを張っているのであれば、loadを使うのが一番安定的でいいしょう。
しかし、jqueryモジュールほどの容量は重すぎると判断するエンジニアもいるので、4番の自己ライブラリがおすすめという事になります。
 

3番は書いてある通り、不具合のあるものが多いらしいですね。あまり関わらない方がいいかもしれません。

ソースコード

自己ライブラリのソースコードは以下になります。
 

 

これは過去に記事に書いた自己ajax.jsを改良したものです。
 

[Javascript] Ajaxライブラリ
 

追加ポイントは「$$ajax.prototype.loadHTML」関数と「$$ajax.prototype.orderScript」の2つです。

実行と考え方と躓きポイント

javascriptで他のファイルをajaxで読み込んでそのファイルの中のテキストを概要のエレメントにappendするだけでいいと最初は簡単に考えていたのだが、いくつか躓きポイントがありました。
 

躓きポイント

1. scriptタグは、読み込んだテキストをappendするだけでは、実行(src読み込み)されない。
2. 読み込みタイミングが常に非同期になってしまうため、bootstrapのjqueryが読み込まれていないエラーが発生

 

1番の解消は、読み込んだscriptタグをcreateElementする事で、実行可能なエレメントに変換する事ができます。
 

2番解消法は、javascriptに関して読み込み順番を厳密に行う。
 

これらを踏襲した形のソースコードになっています。
 

HTMLファイルを以下のように記述します。
 

 

それに対して、head.htmlは以下のようになっています。
 

 

使い方

ページ内のHEADタグのできるだけ上位でajax.jsを読み込みます。
 

 
次に、読み込みたいファイルと、適用する場所(CSSのセレクタ記述)を引数にします。※下記は、headタグ内にソースコードを挿入する例
 

冒頭に張ってあるリンクのページはこれでheadタグ内のソースが読み込まれ、メニュー部分とフッタ部分も別ファイル読み込みでサイト内の複数の静的ページで動作しています。
 

あら効率的!!!

最後に

ajaxコードは以前のオレオレコードですが、基本的にどのブラウザでも問題なく動いています。
安心してお使いください。
 

一番苦労した点は、JSの読み込み順番のところで、scriptタグのみ読み込みが完了したら、次のscriptタグを取り込む流れで行なっています。
 

さほど難しい書き方はしていないので、ソース解析してもらえれば、リレー方式は理解してもらえると思います。
 

あと気になるのは、CSSモジュールが読み込まれる前にHTMLソースが読み込まれると、style適合前の画面がチラッと見えてしまうところですね。
 

今後こういうのにも対応できる機能を持たせてみましょう。
 

実は、これができると、サーバー側はCGIを一切使わずに、静的ページを効率的に管理する事ができるようになるでしょう。
 

信じるか信じないかはあなた次第です。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です