ハブろぐ - havelog.ayumusato.com

チョコをつくった

ドライフルーツとナッツ類を、適当なビターブレンド気味チョコと混ぜ合わせてコロコロして固めて粉まぶして。写真暗いですけど、実物の断面はもうちょっとキュートな感じだったと主張させていただく。

チョコを作るのはいいんですけど、余るんですよね。無塩バターが。普段料理しないのに、バターだけが大量に取り残される。きっと全国で同じような境遇の無塩バターが、そこらじゅうに溢れていると思う。そして消費されきれないまま忘れ去られていく....。ちょっと切ない感じ。

だから使ったよ！

かんせいひーん

こねこねこね

ぷっはー

少しでもバターを消費するべく、追加でスイートポテトを製造。酒を飲みながら材料を潰し混ぜ合わせて、ぐりぐりぐりぐりぐりぐりぐりぐりぐりぐり。それでも余るんですけどね。

ラッピングもした

用意してたラッピング容器に入り切らなくなったので、途中で東急ハンズに個包装を買い出しにでかけて。やっぱりバレンタインコーナーがすごい人混み。みんな大変だ。

別に今回が初めてなわけでもなく、この時期にバレンタインコーナーに乗り込んで材料やラッピングを買うぐらい、何てことはありません。挙動不審になることすらなく、堂々とラッピングを選ぶ自分がキモイ。その場にいること自体が不審だし。

あとは個包装をまとめ直して用意しましたとさー。さて、来年はどうするかな。毎年バリエーションを変えていかないと...。

自分が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の新機能

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のリリースまで今暫くお待ちくださいマセ。