県内図書所蔵マップの初回表示速度をやや改善しました
全面書き換え予定の県内図書所蔵マップですが、一度にリニューアルというのもなかなかしんどいので目立つところだけ修正してみた。
変更前はページ下部の天気予報を表示させるのに、クライアントからサーバを叩いてJSONでもらってDOMを組み立てるというやり方をしていたが、
別にそんな事をしなくても最初に表示されるhtmlにその情報が予め記述してあればそれで済む話。
実現する方法として調べたもの
トライ＆エラー
- SSI
- 借りているサーバ（さくら）だと拡張子が.shtmlであればSSIが動作する
- .shtmlに変名すると広報面倒だし、リダイレクトもちょっと
- .htaccessに記述すれば.htmlでも動作する
- 上記記述をするとすべて一回SSIの判断をするので遅くなる
- Xbithackを記述すると、実行権のあるものだけSSIが動作
.htaccessにXbithack fullを記述したらWPも動作しなくなったので、AddType text/html .shtmlでお茶を濁す事にした。
- Template-Toolkit(以下TTと記述)とスクリプト
最終的に以下のイメージで表示されて欲しい
一つ目の地方へのリンク、当日の日付、予報画像、翌日の日付、予報画像、翌々日の画像、二つ目の地方のリンク、予報画像、予報画像、予報画像・・・
読み込むデータ(RSS)が、地方毎、日付（当日、翌日、翌々日）
-
- TT側で頑張らないなら、スプリプト側でゴリゴリ判定を入れて初回だったら日付をセットとかゴリゴリする必要がある
- TT側で頑張るなら、スクリプト側はベタなテーブルで良い
結果的に第二案でこんなTTとデータ構造に
<div id="Weather"> [% FOREACH d = data -%] [% IF loop.first %] [% FOREACH l = d.loc -%] [% IF loop.first %] <a href="#" onClick="return GB_showFullScreen( '[% l.title %]', '[% l.link %]')"> [% l.title %] </a> [% END %] [% l.date %]<img src="[% l.img %]"/> [% END %] [% ELSE %] [% FOREACH l = d.loc -%] [% IF loop.first %] <a href="#" onClick="return GB_showFullScreen( '[% l.title %]', '[% l.link %]')"> [% l.title %] </a> [% END %] <img src="[% l.img %]"/> [% END -%] [% END -%] [% END -%] <br>[% desc %] </div>
$VAR1 = [ { 'loc' => [ { 'link' => 'http://weather.livedoor.com/area/5/20.html?v=1', 'date' => '31(Sun)', 'img' => 'http://natu-n.sakura.ne.jp/img/10.gif', 'title' => '秋田' }, { 'link' => 'http://weather.livedoor.com/area/5/20.html?v=1', 'date' => '01(Mon)', 'img' => 'http://natu-n.sakura.ne.jp/img/10.gif', 'title' => '秋田' }, { 'link' => 'http://weather.livedoor.com/area/5/20.html?v=1', 'date' => '02(Tue)', 'img' => 'http://natu-n.sakura.ne.jp/img/9.gif', 'title' => '秋田' } ] }, { 'loc' => [ { 'link' => 'http://weather.livedoor.com/area/5/21.html?v=1', 'date' => '31(Sun)', 'img' => 'http://natu-n.sakura.ne.jp/img/10.gif', 'title' => '横手' }, { 'link' => 'http://weather.livedoor.com/area/5/21.html?v=1', 'date' => '01(Mon)', 'img' => 'http://natu-n.sakura.ne.jp/img/10.gif', 'title' => '横手' }, { 'link' => 'http://weather.livedoor.com/area/5/21.html?v=1', 'date' => '02(Tue)', 'img' => 'http://natu-n.sakura.ne.jp/img/9.gif', 'title' => '横手' } ] } ];
