実験モジュール：俺Twitterタイムライン

※キャッシュの都合で完全リアルタイムではありません。

あほむ ( )
@mistair だいすき
あほむ ( )
スマック
あほむ ( )
あ、伊達眼鏡忘れた
あほむ ( )
朝になってもやはりモデムは沈黙を守っている。しばらくはダメだな。
あほむ ( )
山の手線でラーメンって、なにかと思ったらw

YSlowを参考にした高速化

Category : サーバー < ウェブ開発

Tags : htaccess 高速化 YSlow

自分がYSlowでよく引っかかるポイント

manifestに引き続き、今回はレガシーなウェブの技術仕様の中で高速化をがんばります。みんな大好きYSlow先生に色々訊いてみました。

今回書いたことをやったら、a-blog cmsのサイトのYSlowでのGrade判定がDからBに向上しました。ファイル数減らしたり、cssにもExpiresを設定するかとかの微妙なラインは問題を先送りしてますが。

FとかEのランクで、先生に怒られ気味な項目

Make fewer HTTP requests
HTTPリクエストの数を減らします。単純に読み込みファイル数を減らすということ。CSSの数を減らして、画像はCSS Spriteでゴニョる。CSS SpriteってRPGツクールを思い出す。
Add Expires headers
コンテンツキャッシュの賞味期限を長めに設定する。CSSとかはよく微調整するので、画像とJSに合わせるとこんなん。
Compress components with gzip
Lolipopはもしかしてサーバーが対応してない？.htaccessに、SetOutputFilter DEFLATEって書いただけで500になる。参考：YSlowでウェブサイトのパフォーマンスを改善： gzip圧縮を有効にする
Put CSS at top
CSSはhead要素内でも上のほうに置く。CSSは並列取得できるからさっさと読ませる。
Put CSS at bottom
Javascriptはhead要素内の最下部に置く。Javascriptは並列取得できない＆解釈が先に進まない。シーケンシャルに1つずつ解釈するため、Jsの数が多くてもパフォーマンスが下がる。
Configure entity tags (ETags)
ETag自体はファイルのIDみたいなもの。基本的には一切無くていい。ETagをちゃんと活用するなら話は別だけど。

.htaccessで出来ること

Expires, ETags, gzipあたりはhtaccessから制御できる。ただし、ロリポのgzipのように許可されていない記述を書くと、500エラーを噴出し始めるのでご注意。

### Add Expires headers
<filesmatch "\.(jpg|gif|png|js)$">
  ExpiresActive on
  ExpiresDefault "access plus 1 month"
</filesmatch>

### Compress components with gzip
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

### Configure entity tags
FileETag None

ハジっこは囓っておいたほうが？

Webページの高速化については、なるべくメンバー全員が知っておいたほうが良さそう。その上で、パフォーマンスの目標ラインをコントロールする主導者も必要になる。

Googleが検索結果の評価に、ページの表示速度を加味するとかいう話があったりなかったりというところで、いつまでも無頓着なままではいられない領域な気がしている。

v1.2.2の新機能：共用モジュールID

Category : a-blog cms

Tags : a-blogcms

v1.2.2の新機能

a-blog cms 1.2.2 の新しく予定されている機能 | kazumich.log

弊社代表が、v1.2.2の新機能について公表しています。そして、今回それを見ていて思い出したのですが。

共用モジュールID

という機能も追加されます。これまで親ブログで作成したモジュールIDは、下階層の子ブログは利用（参照）することができませんでした。

ひとつのサイト内で、内部設定的に子ブログを含んでいるときに、ヘッダーやグローバルナビゲーションのようなサイト全体の共通パーツが存在します。そのような共通パーツに含まれる親ブログのモジュールIDは、子ブログで読み込んだときに機能しないという仕様になっています。

しかし、親ブログと子ブログに同じモジュールを設定するのは非常に手間であり、運用上の不都合になってしまいます。そのようなときに、今回追加される共用モジュールIDの設定が活躍します。

モジュールIDの設定画面に「下の階層のブログが利用することを許可する」という項目が追加されます。この項目にチェックがついているモジュールIDは、子ブログからも利用できるようになります。実質的に、片っ端から共用にしてしまえば、すべてのモジュールIDを親ブログで設定・管理することも可能になります。

地味に利用者のほぼ全員にメリットがある、すばらしいアップデートです。グローバルモジュールIDと呼んでいますが、個人的に熱望していた機能だったので嬉しいです。

さよならacmsパス

bid1として、include/header.html を読み込む
<!--#include file="acms://bid/1/tpl/include/header.html" -->

なぜ個人的に熱望していたかというと、今まで前項であげたような、子ブログから親ブログの情報を参照するという問題(仕様?)の解決策にacmsパスによるインクルードを利用していたからです。

acmsパスでbidを指定してインクルードすれば、指定したbidから参照したのと同じ扱いになり、親ブログのモジュールIDが含まれていても子ブログ内で問題なくインクルードできます。

それも致命的な弱点があって、HTTPリクエストがacmsパスを1度使うごとに毎回発生するという仕様になっています。HTTPリクエストが増えるというのは、Webサイトのパフォーマンス的にそれなりの代償を支払うことになります。

それが今回のアップデートで解決すれば、今まで無理していた部分のパフォーマンスが劇的に改善することになります。( ※ もちろんキャッシュの期間にもよるので、キャッシュが長めの設定ならあまり関係ないのですが )

a-blog cmsでそこそこの規模のサイトを組んだ事がある方なら、きっと分かってもらえる話じゃないかなーと思います。そんでは、色々と楽しみにしつつ、v1.2.2のリリースまで今暫くお待ちくださいマセ。

manifestファイルとかの続き

Category : HTML < ウェブ開発

Tags : HTML5 manifest

制約というか仕様というか

HTML5的にmanifestファイルをゴニョった ( HTML )の続き

そもそもアプリケーションキャッシュって何よ、って話ですがブラウザが勝手にするキャッシュの超強いヤツと捉えればOKです。強すぎて、ミスったときに消しづらいです。HTML5からの実装です。

manifestの指定はドメイン単位で効果があるので、サブドメイン含めてドメインが異なれば効果がありません。Safariは問答無用に適用されますが、Firefox3.6の場合だと「This website ( ayumusato.com ) is asking to store data on your computer for offline use.　Allow | Never for This Site | Not Now」と洋風に訊いてくれます。不具合ありそうならここで拒否ればOKなわけですね。

いまのところ主要ブラウザではSafariとFirefoxがサポートしている模様。そもそもDOCTYPEの宣言が、「<!DOCTYPE html>」でないと無視されるようなのでご注意を。XHTMLのまま味見することはできないみたい。

manifestファイル記述の謎

CACHEのみ（非明示含む）
リロード動作でSafariが発狂。キャッシュしてないコンテンツを全て見失う。
CACHE + NETWORK
大体ちゃんと効いてる感じ。

NETWORKの宣言自体が、Firefox3.6ではサポートしてないとか見た覚えがあるわけですが、サポートしてるSafari的には全部きちんと明示しやがれコノヤロウとおっしゃっているように見えます。CACHEはキャッシュ対象コンテンツ、NETWORKはキャッシュしない対象のコンテンツです。

参考：今回のmanifestファイル例

キャッシュさせたいコンテンツだけ書けば、あとはブラウザがよろしくやってくれると思い込んでいましたが、そうもいきませんでした。キャッシュをあてにせずサーバーを見に行くことも明示しないといけないようです。

超強いキャッシュ

強すぎて本当に消せません。とりあえず自分が分かっている消し方について以下に。

Safari 4
アプリケーションメニューから"Reset Safari"・・・。
Firefox 3.6
Preferences -> Advanced -> NetworkタブのOffline Storageグループからドメインを選んでremeove。唯一まともな削除方法。
iPhone
消し方わからない or2

強すぎて散々です。ひどい。

a-blog cms的に

a-blog cms他、動的生成でURLはmod_rewrite使ってチョロまかしているシステムの場合は、なるべく実存パスを書いたほうがよさそうです。仮想パスでアクセスするようにmanifest内に書いたら、SafariもFirefoxも微妙な感じの動作でした。たぶんキャッシュできてない。

よって、manifest内のパスは実存パスと同じように記述したほうが確実そうです。manifestファイル自身はあまり関係ないようなので、/havelog.manifestのように仮想パスで通してシステムを仲介させてもOKっぽいです。manifestファイルを動的に生成するのは便利そう。

a-blog cmsの管理ページとかも、そうそう変わるもんでは無いはずなので、うまいことコントロールしてやればajax以上に軽快に動作するんじゃないかなーと思います。

参考

今回のmanifest事変は、以下のURLを参考にしました。その他名も分からないリソースもいくつかありましたが割愛します。

このまま、HTML5の未来的実装方面から、Javasciprtのほうに遊んでいきたいと思っています。今のところ、Javascriptまともに書いたことないんですよねー。PHPばっか！

面白いことできたら、またブログに書いてみます。