コンテンツをクライアント側でレンダリングする件

公開:2014-08-17 20:51
更新:2017-07-29 13:17
カテゴリ:html5,wordpressから静的htmlへ,ブログ

クライアントレンダリングのアイデア

ちょっと放置気味の過去のWordpressコンテンツの静的HTML化の話である。
静的HTMLそのものをデータとしたいがためにできる限りセマンティックなタグやメタ情報のみとしたい。 静的HTMLはモデル、外部css,jsはビューという考え方である。 デザイン的なタグやCSSをHTMLに書いてしまうと、デザイン変更したとき静的HTMLを変換しなければならなくなるからだ。 Wordpressがテーマファイルを自由に差し替えて変更できるのはサーバー側で都度コンテンツをリアルタイムに生成しているからである。静的HTMLではそうはいかない。 あとjqueryなどのライブラリもあとで差し替えることができるようにしたい。knockout.jsからanguler.jsへの差し替えが、静的HTMLを再生成しなくてもできるようにしたい。 そこで以下のようにクライアント側でWebページをレンダリングしたいと考えている。
  1. HTMLで読み込むcssファイル・jsファイルはmain.css,main.jsのみとする。インラインCSS,scriptはできる限り含まないようにする。
  2. main.css内で関連する外部cssファイルを@importする。これは静的HTMLが特定のスタイルシートに依存しないようにするためである。
  3. main.js内では必要なjsファイルを読み込む。これはjqueryやknockout.jsなどのライブラリも含む。これは静的HTMLが特定のjsライブラリに依存しないようにするためである。
  4. Webページのレンダリングはすべてmain.js内で行う。
つまりmain.xxxファイルをフックとして、そこにレンダリングコードやデザインコードを入れていく。フック部分でカスタマイズはどのようにでもできる。 コンテンツをjsonデータとして、クライアント側でテンプレート化した単一HTMLをknockout.jsやAnguler.jsでレンダリングするというアイデアもあるが、検索エンジンのクローラ対応という点でちとまずい。何せコンテンツ検索はGoogleに任せようとしているので。SEO的によろしくないのである。私の場合SEOよりもコンテンツの内容とか文章能力を高めるほうが効果があると思うが。 しかし問題がある。2.の外部CSSファイルを@importする方法はページ読み込みスピードが遅くなるという。さらにmain.js内で必要なjsファイルを読み込むのはどうやろうか。

外部CSSファイルを@importするとページ読み込みスピードが遅くなる件

例えば5つ外部CSSファイルがあるとする。<link>タグで外部cssファイル5個書いて読み込ませると同時に読み込まれるが、1つの<link>タグ@importで書くと個々のファイルが順に読み込まれるため、結果その分ページ読み込み速度が遅くなる。
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IO」の実験結果だと
  1. まずlinkファイルのcssが読まれる。
  2. 次に@importのファイルが並行して読み込まれる。
となっているようだ。@importで書くとそのファイルたちが順に読み込まれるのではないようだ。2.はまあまあ平行動作するのだが、1.の処理分待つためその分ロードが遅くなるということらしい。
一番速いのはsassで@import分も含めて1つのファイルにまとめてしまうことである。
sassやLESSで事前にファイルを作成して置いておき、それを読み込ませるようにするのが一番よさそうだ。そうしようかな。sassやLESSの使い方は知らないが勉強するとして。 しかしそうするとライブラリはCDN経由で読み込むことができなくなるな。どうしたものか。。

外部jsファイルの読み込みについて

<script>タグを動的生成するしかないかな?とか考えていた。が、こういうことをするためのライブラリとして「RequireJS」というのがあって、これを静的HTMLに<script>タグに外部jsファイルとして指定する。data-main属性に最初に読み込みたいファイルを指定(今回だとmain.js)しておけばそのファイルが最初にインクルードされるらしい。そのあとmain.js内で以下の記述を行えばよいとのこと。 js require([&quot;helper/util&quot;], function(util) { }); しかしこのやり方だと「RequireJS」に依存してしまう。それは仕方がないかな。。いちからこういうコード書くの面倒だしね。