AMP(Accelerated Mobile Pages) は、モバイル環境で高速表示を実現するプロジェクトです。これに対応する Movable Type用のテンプレートを作ってみることにしました。

AMPに関する詳細は以下にあります。

• GitHub - ampproject/amphtml: AMP HTML source code, samples, and documentation. See below for more info.

Movable Type で対応させたといった記事です。

• Google AMP HTML に対応してみた件 - LIQUID BLOG
• AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話 | WWW WATCH

基本としては、個別アーカイブにテンプレート組んで、AMPの決まりごとに沿うように出力の調整をかけるというものです。

その際に、アーカイブマッピングでAMP用のパーマリンク設定となるよう、設定を行い、記事アーカイブのメインと同時にAMP用アーカイブテンプレートが作成されるという形です。

個人的には、出力については、ダイナミックパブリッシングにしておくことで、再構築などに負担がかからないのではないかと思ってます（キャッシュが効いてるという前提ならば）。

以上踏まえて、サンプルというか、実際ブログで使ってるものベースのテンプレートを以下においてあります。

（Google Analytics や アドセンスなど付随するモジュール群は入ってません）

あと、定期的に変更したり元が変更したら反映するようにしますのであくまでもサンプルとしてです。mt:Ignoreのコメントは説明のためのもので、実際のテンプレートには入れていません。

• 個別記事アーカイブAMPのサンプル（仮） -- Bitbucket

以下、作った時点の方針のようなものです。

• 編集画面で管理するものとして、なるべく手間のいらないように、include テンプレートしない作りにした
• 禁止属性等は正規表現にて、置換・削除し、マッチパターン、リプレイスメントは変数代入にした
• ダイナミック動作想定で極力DBアクセスが少ないよう最低限なテンプレートタグで組んだ
• CSS や JSON は出力時に、改行・空白を詰めるようにした（編集画面で見やすく、サイズ縮小出力できる、よくある手法です）。

Movable Type で古いプラグインを使用していると、表題のような警告がプラグインリストに出ていることがあります

そのままでも動作するのがあったりしますが、今後のことも考えると、似た機能の別のプラグインを探すか、修正するとかいう選択を迫られることとおもいます。

今回は、この警告の対処について、メモとして書いてみますが、あくまでも個人的な使用前提での話ということですので、本番環境で複数ユーザ運営システムの環境は考慮していません。

名指しで申し訳ないのですが、伏せた状態で説明しても分かりにくいので、古めのプラグインの例として TBPingLinkLookup を選ばせてもらいました。

参照：

• Movable Type で言及リンクのない TrackBack ping を弾くプラグイン - naoyaのはてなダイアリー

メッセージに書かれているとおりなのですが、変更の実際をやってみます。

このプラグインは、.pl に書かれているタイプのものですので、tb-link-lookup.pl ファイルを編集することにします。（Movable Type の推奨するYAML形のプラグインに直す手もあるのですが雛形とか用意できてないと、手間だったりするので、今回は直接修正する形をとります）

MT->register_junk_filterはコメントにします。

# MT->register_junk_filter({
#    name   => $PluginName,
#    plugin => $plugin,
#    code   => sub { $plugin->handler(.@_) },
#});

my $plugin = という箇所に、registry(junk_filters)になおします。

registry => {
    junk_filters => {
        $PluginName => {
            label => $PluginName,
            code  => \&handler,
        },
    },
},

以上が追加するコードになるかと(インデントは適当なので、元のコードにあわせるほうが視覚的はいいです)。 プラグイン名は元のMT::register_junkfilter のほうが、プラグイン名($PluginNameにて登録ずみ)を使用しているので、そのまま利用します。

label には、このプラグイン名、 code にハンドラを指定。このプラグインだと、 handlerというサブルーチンがそれに該当。

このコードの追加場所ですが、プラグインを登録する、my $plugin の最後（});の前）に追加します。

以上で、ファイルを反映させ、プラグインリストを表示させると、警告が消えて、ジャンクフィルタとしてフィルタ名が表示されるはずです。

アーカイブマッピングのところで、MTタグにモディファイアを入れたときの出力を検証した記事です。 実際の運用とかは全く考慮していません。

＊将来的に仕様変更というか、制限がかかるようになったら、同じ動作にはならないとおもわれます。

検証をおこなった日

2013 年 5 月 10 日

動作環境

• MTOS 5.2.2 + MAMP バージョン 2.1.1
• 今回はウェブページにてマッピングを作成
• テーマは、Rainier 1.01 を使用

グローバルモディファイアには、MD5 変換するものを自前で用意して使いました。

以下のように、アーカイブマッピングの設定で新規にアーカイブマッピングを追加します。

PageBaseName ファンクションタグに対して、md5 というモディファイアを与えた出力を試みました。

md5/about フォルダ以下に設定したファイルが生成されています。

mi で Movable Type などの config.yaml ファイル向けのモードを作成してみました

モードの編集の設定で、インデント時にタブでなく、スペースを使うようになっていればよかったので、ツールとかあまり細かなところまでサポートしてません。

以下にファイルを置きました。

• mi-mode-config_yaml -- Bitbucket

右カラムの（download）のリンクで最新のファイルです。

モード追加のところで、モードファイルからインポートより、Config yaml のモードファイルアイコンを指定します。

追記（2013/05/27）mi テキストエディタ v3 向けのものも用意してみました（注意：現時点で miテキストエディタのv3系はベータ版です）

新規モード追加のところで、"Config yaml"フォルダを指定します。なお、カラースキームファイルを同梱してあります。Color Scheme フォルダのcsvファイルをmi のスキームフォルダ内に移動して適用します。

• mi-mode-config_yaml_v3 -- Bitbucket

mt.Vicuna Simple プラグインテーマにMovable Type 5.2 から使うことのできる、エディタへの独自CSSを適用してみるテストをやってみました。

Movable Type 5.2からは、リッチテキストエディタを使った編集画面(ウェブページ、ブログ記事共)に、任意のCSSを指定することができます。CSSの指定を行うと、編集時にCSSによる装飾が有効となります。ウェブサイト、ブログごとに、それぞれ異なるCSSを設定することが可能です。

movabletype.jp (http://www.movabletype.jp/documentation/mt5/design/cssoneditor.html)

Tutorial がないと分かりにくいという人もいるかとおもいまして（自分がそうなだけ）、やってみたことを順にメモしていきます。

確認した mt.Vcuna テーマセットのヴァージョンは、1.03 で最新でなかったですが、手を加える箇所は config.yaml だけなのでそれほどヴァージョンによる違いはないとおもいます。 Movable Type は MTOS 5.2 ja により、同梱のTinyMCEプラグイン以外にエディタに関わるプラグインは使用していません。

まず、整理しておきたいことがあるのでまとめておきます。

• Movable Type 5.2 から使える機能である
• テーマの.yamlファイルで編集画面に適用するスタイルシートを指定しておく方法と、投稿設定のフィールドに直接入力する方法とがある (今回は前者の方法)
• mt.Vicuna は、Movable Type.jp の説明にある、theme.yamlを使わずに config.yaml によるテーマ指定を採用している （今の時点のヴァージョンまで）
• 適用する CSSファイルまでのパスのほか、 {{theme_static}}変数を使うことが出来る。なお、{{theme_static}} 変数にパスに注意（後述）

作業手順
まず適用するCSSファイルを作成します。 前述の解説ページにある、サンプルファイルを参考に以下のとおりにしました。ファイル名は editor.css

body {
    font-family: serif;
}

body.entry {
    background: pink;
}

body.page {
    background: green;
}

（エディタの背景色が変更されます。ちなみにサンプルCSSファイルのほうは、このほかにある画像がつくようになっていますが、「お楽しみに」とありますのでここでも一往伏せておきます）

作成したCSSファイルは、今回はとりあえず path/to/mt-static/support/theme_static/mtVicunaSimple 直下に置きます。
mt.Vicunaの config.yaml ファイルを任意のエディタで開きます。そして、適用するCSSのパスを追記します。
追記する場所の階層は説明によれば、    elements: ＞default_prefs: ＞ data: のところですが、ここは mt.VIcuna テーマセットでは既に他の設定がありますから、CSSファイルまでのパスをdate: の階層のところに追記するだけでよいのです。

具体的に示すと以下の場所です

        data:
          file_extension: html
          convert_paras: __default__
          convert_paras_comments: __default__
          archive_type_preferred: Individual
          entries_on_index: 10
# エディタへのスタイルの追記 (この行は書かなくてもよい)
          content_css: '{{theme_static}}editor.css'
#  追記ここまで　(この行は書かなくてもよい)

以上で上書き保存します（ローカルとかターミナルからでない場合上書アップロードするなど）。

パスについてですが、 {{theme_static}} のとる値が support/theme_static/止まりでなくテーマセットまで含まれるようなので注意します（これで結構嵌りました）。

{{theme_static}}　= (path to)/mt/mt-static/support/theme_static/mtVicunaSimple/  = {{support}}theme_static/mtVicunaSimple/

ブログのデザイン ＞ テーマ を開き、 mt.Vicuna Simple テーマを適用するか、あるいは適用済の場合は [再適用] をクリックします（テーマセットで指定しないというときはこの行程はパスして次の手順のところで手動入力します）。

次に、設定 ＞ 投稿 をみてみましょう（設定できていればすぐに記事編集にいっても問題ないのですが）。

WYSIWYGエディタの設定のフォームに config.yaml に記述した、{{theme_static}}editor.css　が入っていれば、記事編集のところでリッチテキストのモードにしたときに、CSSが適用されます。なお、先の行程で再適用しないか yamlファイルに記述しなかった場合は初期のサンプルのリンクのままですから、手動で入力してみます。

この場合は「変更を保存」しておきます。これで、記事の編集画面にてリッチテキストを使ったときに、スタイルが反映されています

Movable Typeのコミュニティサイト、MTQで質問のあったケースの演習をおこないました。

すでに模範解答がでているようですので、詳細はそちらに譲ります。このような場合は剰余演算を使って行なうのが通例のようです。

• サブカテゴリ一覧をn個ずつhtmlタグで囲む - MTQ | Movable Type 5 ユーザーコミュニティ

__counter__、__last__ といった特殊な変数が利用できないケースでは、変数をセットして自前のカウンターを用意する必要があるのでこれがプログラミング的要素がでてきて厄介なのであります。

ここでは、余りを求めないでおこなうというやり方でやってみるという課題にしておきます。

考えたこと

• ループの４回目の先頭に</ul> がつくというルールにすればいい（わりとこういう考え方がポイント）。
• カウント数は変数なので使い回していく
• リストを出力させるごとに、カウンターを 0・1・ 2 ...という具合に振っていく
• カウンターが 3（つぎのグループの先頭）　になったら </ul>をつけて カウンター0　からスタートさせる

作成したテンプレートサンプル

• ※テスト環境用のモノなので実際の運用のための最適化をしていません。
• ※先の命題のとおりで、ある親カテゴリ下に属する子カテゴリのみをリスト表示するためだけのテンプレートです。
• ※ 条件判断のMT:Unlessは好みでそうしているだけなので、MT:Ifでnot equal な判断でも同じです

<h3>サブカテゴリのリスト</h3>
<mt:Setvar name="cont" value="0">
<MTSubCategories category="サブカテゴリの親のカテゴリ">
          <mt:If name="cont" eq="0">
          <ul class="group">
          </mt:If>
          <li><$mt:CategoryLabel$> （$contの値＝<$mt:Var name="cont"$>）</li>
          <mt:Unless name="cont" eq="3"><mt:SetVar name="cont" value="1" op="+"></mt:Unless>

          <mt:If name="cont" eq="3">
          <mt:SetVar name="cont" value="0">
          </ul>
          </mt:If>
          <mt:SubCatIsLast></ul></mt:SubCatIsLast>
</MTSubCategories>

処理の流れを文章化してみた

カウンターを 0　にセットしておく

==ここからループ開始 ==

カウンターが 0 であるか ? 　Yes  ->  </ul> をつける
 ↓
No  -> カテゴリラベルを表示 
 　　　↓
カウンターが　3　ではない　？  Yes ->  カウンターに1を足す
 　　　↓
カウンターは 3 である(== 4番目のリストである ) ?  Yes -> 　カウンターを 0 にもどす　</ul> をつける
 ↓
No
 ↓
サブカテゴリリストの最後か？  No -> ループのはじめに戻る ==>
↓
 Yes　-> 　</ul> をつける。ループの終了

一見、子カテゴリがちょうど3の倍数であったときに、リストの閉じタグ（</ul>）が重複するのでないか、という風に見えますけれども、先にいったとおりに、次のグループの先頭に</ul> を入れるというルールにしてあるので、ループが子カテゴリの最後になったときは次のグループが存在しないために</ul>は振られません。その代わりとしてmt:SubCatIsLastの条件において</ul>を振るということにしてあります。

但し。。

この方法だと、セットした変数にリセットをかけていますから、カウントの変数の値を使ってユニークなIDを振るといった処理には適用できません。

そのような時は、普通にカウントをインクリメントにして剰余を求めたほうがいいです。

MovableTypeの5.13からのセキュリティ強化の一機能、アカウント認証のロックアウトについてです。

• 不正ログインに対するアカウントのロック : Movable Type 5 ドキュメント

セキュリティを強化するため、Movable Type 5.13から、アカウントの認証ロックアウト機能が追加されています。

今回は、テストとして新たにユーザーを作成して、そのユーザーの管理ページログイン時にロックされるかを動作確認しました。環境はMacにインストールしたローカルによるものです。

デフォルトでは、1800秒の間に6回の認証失敗でロックされる条件となっています。これは機械的なログオンをおこなわなくとも達成される時間であります。

このユーザーはロックがかかったので、システム管理者にてログインしてユーザー一覧をみます。

テストで作成したユーザーの状態をみてみます。

「ロックを解除する」をクリックして解除できます。

あるclass名がついたリンクにGoogle Analyticsのイベントトラッキングをいれるというもの。

自分でだましだまし使っている状態なので、動作は保証できませんが。

外部スクリプトファイルで読み込ませてその中身。

(function (){
var a = document.getElementsByTagName('a');
for (var i=0; i<a.length; i++) {
  if (a[i].className=='event_link') {
       　a[i].addEventListener ? a[i].addEventListener( 'click' , tkevent_link , false ):a[i].attachEvent('onclick',tkevent_link);
     }
  if (a[i].className=='event_file') {
       　a[i].addEventListener ? a[i].addEventListener( 'click' , tkevent_file , false ):a[i].attachEvent('onclick',tkevent_file);
     }
}

function tkevent_link(){
try {
 var that=this;
_gaq.push(['_trackEvent','link','external', this.href ]);
	setTimeout(function(){window.location.href=that.href}, 300)
}catch(err){};
return false;
}

function tkevent_file(){
try {
 var that=this;
_gaq.push(['_trackEvent','download','file', this.href ]);
    setTimeout(function(){window.location.href=that.href}, 300)
}catch(err){};
return false;
}
})()

外部リンクなときに、event_linkとclassを振った場合にイベントにあわせたトラッキングを実行という形。href属性がある場合にタイミングでトラッキングがおこなえないことがあるので、setTimeoutでページ移動を遅らせてみたり。タイマーの値が大きすぎると、ファイルなど2重ダウンロードになるので注意

追記

割り込み時間が短すぎてもだめなときがあるようなので様子見で。冗長な感じはするけどダウンロードファイルは特にページ遷移をおこさないようにしてみたり。外部ページのほうは一旦hrefを削除してそもそものリンクが先に移動しないような感じに。href属性値が無しというか'#'とか'javascript:'のようなhttpでないようなのでないと正確に計測できないような気がします。

(function (){
var a = document.getElementsByTagName('a');
for (var i=0; i<a.length; i++) {
  if (a[i].className=='event_link') {
      a[i].addEventListener ? a[i].addEventListener( 'click' , recordOutboundLink, false ):a[i].attachEvent('onclick',recordOutboundLink);
     }

  if (a[i].className=='event_file') {
      a[i].addEventListener ? a[i].addEventListener( 'click' , tkevent_file , false ):a[i].attachEvent('onclick',tkevent_file);
     }
}

function tkevent_file(){
try {
    if(window.event.srcElement){
    var that = event.srcElement.href;
    } else { var htat=this.href; };
  _gaq.push(['_trackEvent','download','file',that]);
 setTimeout(function(){return;},300);
}catch(err){};
}

function recordOutboundLink() {
  try {
var msie = navigator.appVersion.toLowerCase();
msie=(msie.indexOf('msie')>-1)?parseInt(msie.replace(/.*msie[ ]/,'').match(/^[0-9]+/)):0;
// Browser checker  
 if(msie<9 && msie!=0){
    var that = event.srcElement.href;
      } else { var that=this.href; };
    _gaq.push(['_trackEvent','link','external',that]);
    this.removeAttribute('href');
    setTimeout(function(){ location.href=that; }, 800);
  }catch(err){}
}
})()
// 111007 www.markdiary.com
// Browser Checher by http://www.losttechnology.jp/WebDesign/2011/ieversion.html

IE 8以下でthatの値がとれないようなので event.srcElementを使ってみることに。Safari Opera Chromeが対応しているようで、window.event.srcElement?で振り分けてもいいのかな、という気がしないでもないけどいちおう。

つかわせてもらってるmtVicuna SimpleでSiteMap 0.9のところで、テンプレートタグのエラーがでていたのでちょっと回避技をやってみました。

エラーのメッセージは、<MTGoogleSitemapsPing>は存在しません(3行目)といったものです。

これはそのタグを提供する、MTGoogleSitemapsPingというプラグイン自体がないもので、MTIfタグでタグの値の有無の判断がプラグインがないためできないみたいです。

以下のMTQでやりとりがありまして、プラグインをいれるというのが解決策のようです。

• MT5でgooglesitemapテンプレート - MTQ | Movable Type 5 ユーザーコミュニティ

それでは、プラグインは使わないけどメッセージが鬱陶しいので出さないようにするようなときの改造です。

理屈からいうと、知らないタグだといわれたタグをダミーで登録してしまうというものです。バッドノウハウなのですけども、ローカル環境での作業ならこれでも十分な感じです。（実際にプラグインをいれてテンプレート更新すると無駄にPing送信されてしまうので）

config.yamlの修正

mtVicuna Simpleはテーマセットですが、プラグインによって提供されています。その設定はconfig.yamlにほとんどが集約されています。

tags:
function:のところに、以下を追加してダミーのファンクションタグとして登録しておきます。修正には空白のインデント位置に注意します。

    GoogleSitemapsPing: $mtVicunaSimple::mtVicunaSimple::Plugin::_google_site_map_ping

これだけでタグが登録されていちおうはテンプレート編集でエラーメッセージはでなくなります。

きちんとやろうとすれば、_google_site_map_pingのサブルーチンをvicunaのPlugin.pmにでもおけばいいのですが、ここにGoogleにPing送信するコードがあればそのような動作も可能でしょう。しかしながらテンプレートセットがそこまでサポートするほどでもないのかなとは思っています（別のプラグインが必要だったとしてバンドルするのにライセンスとかも考えないといけないだろうし）。あるプラグインがはいっているかどうかの判断が容易であればいいような気もしますね