Category : a-blog cms
Tags : TextExpander a-blogcms
TextExpanderが半額セール中 ( ソフトウェア ) :: ハブろぐ - havelog.ayumusato.com
以前にも紹介しましたが、TextExpanderです。今回は、a-blog cms用スニペットの最新版を公開します。キーボードのほうが好きな人や、モジュールの構造を暗記できている方は、こちらのほうがオススメなぐらいです。
参考@Text Expanderの紹介はこちら：シゴタノ！ — 寿命ものびるかも？ タイピング速度を劇的に向上させる TextExpander を使い込む幸せ
http://ayumusato.com/souvenir/acms.textexpander
このURLをコピーしてください。これがスニペットデータへのアドレスになります。
a-blog cmsのv1.3.0から本格的に実装されそうなLPO関連の機能について簡単に。検索エンジンからアクセスがあったときに、検索に使われていたキーワードを利用して、動的にランディングページのコンテンツを変える機能です。たとえば、弊社で制作中のサイトの404ページには、検索エンジンから404にきてしまったときに、検索に使われていたキーワードでサイト内検索した結果を表示するという実装(Ajax)がされています。
公開済みの例だと、株式会社マールさんが制作された、株式会社 JUNIOR【ジュニアー】さんのサイト（参考: 事例紹介）でも有名な機能です。このサイトのトップページに、検索エンジンからブランド名でランディングしたときは、そのブランドに関するコンテンツが表示されます。
そんな便利な一連の機能も、そもそも検索エンジンからアクセスしない限り、正常に動作しているかどうかは確認しようがありません。制作中のサイトでソレでは困ることも多いはず。
LPO機能の中核を成す、グローバル変数%{SEARCH_ENGINE_KEYWORD}には、検索エンジン（Google, Yahoo, Bing）からのアクセスがあった場合、検索に使用されていたキーワードが格納されます。この変数自体は、アクセス時のリファラを参照しているだけなので、リファラを任意の文字列に設定してしまえば、好きなように%{SEARCH_ENGINE_KEYWORD}の値を操作できるというわけです。
前置きが長くなりましたが、そんな事情により今回はリファラを任意に設定できるFirefoxのアドオンを紹介します。
リンク：refspoof :: Add-ons for Firefox
このrefspoofというアドオンは、任意のリファラーになりすましてサイトにアクセスできる機能を持っています。（別に悪いことしてるわけじゃないですよ！）スクリーンキャプチャの「ここでGoogleで検索したときのURLなどをセットします」という部分に、下のような検索ページのURLを貼り付けてみます。
おいしいりんご、というキーワードで検索したときのURLを貼り付けます。上のリンクをコピーするか、リンク先に飛んでからURLをコピーします。
さて、a-blogcmsのサイトトップの下部にも検索ワードに反応する部分があります。これも、検索エンジンからアクセスがあると、使われたキーワードでサイト内検索をした結果を表示するようになっています。なので、手っ取り早くa-blog cmsのサイトで検証してみましょう！以下手順。
もちろんそんなキーワードのコンテンツはありませんでしたが、検索エンジンから飛んでるわけでもないのに、リファラーを操作してなりすますことができました。
これで、LPO関連機能の検証もバッチリですね！a-blog cmsで本格的に使うのは、v1.3.0からになりそうですが、今のうちにゼヒ導入してみてください。お役立ちツールです。
Category : カスタマイズ < a-blog cms
HTTPリクエストを減らすための手段として、ちょっと着目していたのがData URI（データスキーム）という方法。Data URIは、画像や音声などの色々なファイルをbase64エンコードを通して文字列(URI)に変換する技術です。技術のある人が極まると、えらいことできるらしいですが、今回は画像ファイルとHTMLを一体化させるために使います。
ACMS_GET_Plugin_DataUri(仮)
<?php
require_once ACMS_LIB_DIR.'GET.php';
class ACMS_GET_Plugin_DataUri extends ACMS_GET
{
function get()
{
// 変換対象を正規表現パターンで定義
$regex = '@<img.*?src="(/'.DIR_OFFSET.ARCHIVES_DIR.'.*?|/'.DIR_OFFSET.THEMES_DIR.'.*?)"@';
preg_match_all($regex, $this->tpl, $matches);
if ( empty($matches[1]) ) return $this->tpl;
foreach ( $matches[1] as $src ) {
// 拡張子を取得
$ext = pathinfo($src, PATHINFO_EXTENSION);
// ファイル取得後、base64エンコード
$pair[$src] = 'data:image/'.$ext.';base64,'.base64_encode(file_get_contents(DOCUMENT_ROOT.$src));
}
$pair = array_unique($pair);
$raw = array_keys($pair);
$data = array_values($pair);
//ズバっと置き換え
$this->tpl = str_replace($raw, $data, $this->tpl);
return $this->tpl;
}
}
?>
このソースコードを、DataUri.phpとして、/php/ACMS/GET/Plugin/内に配置します。アップデートとかには一切対応しないワンタイムモジュールですが、興味のある方はどうぞ。
今回は、%{ARCHIVES_DIR}{path}のような、archivesディレクトリからの参照が確実である画像ファイルパスを対象にして、いい加減に正規表現マッチングをしています。
ウェブページを表示する中で、HTTP通信の時間的コストはかなり高いです。Data URIとして、画像がHTMLの中に文字列として混ざることで、HTTP通信のコストが減少します。細かいファイルをチマチマと個別で読み込むのは想像以上に読み込み時間を食い散らかしています。
a-blog cmsの場合はHTMLと一緒に、キャッシュもバッチリされてしまいますが、そこまで大きな問題にはならないはず。サイトのページ数によってはDBのcacheテーブルの内容積がモリモリ増えてしまいそうですけど。DBの容量に自信がなかったり、サイトのページ数に自信がある場合は要注意です。
以下、plainやvicuna等、index.htmlのテンプレート1枚で完結しているようなテーマを対象にした説明です。
当ハブろぐの場合は、既存のindex.htmlをindex_raw.htmlにリネームし、新しいindex.htmlとして下記のようなテンプレートを作成しました。
<!-- BEGIN_MODULE Plugin_DataUri --> <!--#include file="index_raw.html" --> <!-- END_MODULE Plugin_DataUri -->
元のindex_raw.htmlの出力結果を、最後の最後でDataUriモジュールのフィルターにかけているという感じです。対象にできるimgパスがあれば、片っ端からData URIの文字列に置き換えていきます。
変換された画像は下のようなコードに変換されます。下のコードは、サブカラムの鳥さんの写真の場合です。…連続の英数字なのでハミ出ますが気にしない。
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA8Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gMTAwCv/bAEMAAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/bAEMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAH4AfgMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAA（以下略！）" width="126" height="126" alt="北端のとり" id="profileImg" />
IEは8以降でないとData URIを表示できません。よって、ルールを使ってUser AgentからInternet Explorerには、すべて元のテンプレートである、index_raw.htmlを直接表示するように設定します。8は対応してますけど、現状のルールにはそんな器用な項目はないので全部ナシです。
そうそう滅多なことは起こらないと思いますが、なんかあったら教えてもらえると助かります。判定をもうちょっと賢くかけばもっと遊べそうですね。ちゃんと速くなるかなー？