movabletype4.1の最近のブログ記事

Movabletype4.2x 静的ページにてLPO対策してみました。GoogleAjaxFeedAPIを使うことで手軽で簡単に実装対応することが可能です。その方法について紹介しています。

Movabletype4.2x静的ページでLPO[Landing Page Optimization（ランディングページ最適化）]対策してみました。Google AJAX Feed API - Google Codeを使えば、結構簡単に実装・対応できます。（ただし、検索機能を使います。最新エントリー順に表示されてしまいます。）

PHP化でのプラグインしかないようなので、ajax使えば静的ページでも簡単に対応できるだろうと思い、jQuery ajaxで試すも、パースがうまくできず、最後の手段で考えていたGoogle AJAX Feed APIを使うことにしました。

実際にLPO対策したページを見てもらうには以下のGoogle検索のテキストリンクから当ブログに訪問してもらえばわかります。記事右手の検索ボックスの下にLPO対策の関連記事が表示されます。

• photoshop 合成 - Google 検索
• greasemonkey fastlookupalc - Google 検索
• firefox vimperator 最速 - Google 検索

あと、サイト内検索でのリファラーにも対応しています。一度、このサイト内でお好きなキーワードで検索してみてください。検索結果後からの選択記事先でもリファラー取得できますので、LPO対策の関連記事リストが生成されます。

MovableType4を勉強するのに最適なサイトの紹介と最近のMTを勉強するための環境構築などについて書いてみました。自サーバを構築して、mtdeinfoで紹介されているサンプルコードを試しながら学ぶのがいいかと思います。

つい昨日MT4.2がリリースされてましたね。Movable Type 4.2 を発表しました | MovableType.jp。早速自サーバ（UbuntuServerEdition)に入れてみました。テンプレート画面の見通しが良くなって、管理しやすくなったと思います（正直、そんなに触っていないので詳しくその良さがわかっていませんｗ。）

最近MTのタグなどを勉強するのにこちらのサイトmtde.infoを利用しています。

とてもきれいに情報が整理されていて、尚且つ手に届きやすいリンク配置、サンプルコードによるテンプレートタグの解説といった感じでとても参考になります。

テンプレートタグリファレンス | MovableType.jpと併せて頻繁に行ったり来たりしています。firefoxを使っている方は、Movable Type 4 に対応したタグリファレンスを活用する | MovableType.jpでも紹介されているように、検索にテンプレートタグ検索を追加することで、mtdeinfoを読みながら、タグリファレンスを読みたい時に、キーワードを選択して、右クリックでコンテキストメニューを表示し、[MT テンプレートタグ検索]を選択実行することで別タブでバックグランド（設定いるような・・）で開くことができます。

あとは、サイトで開設されているサンプルコードを自サーバ（MTOS）にこのブログのバックアップを流し込んで、その上でサンプルコードをwidgetにして、テンプレートに入れてどんな動きができるのかを試してみたりしています。

変数の動きだけのサンプルコードは、新しいブログを開設して軽い状態で確認表示したりしています。

そんな感じで勉強しています。とても難しいです。サイトに限らず、設計できてないとたぶん使いこなせないかも。なんて感じてます。エンジニア向けだなって。

サイト運営者の方の個人ブログでmtde.info の、できる経緯も合わせて読まれるといいですよ。

MT4.1をAutopagerizeに対応させるためのclass設定コードの紹介です。movabletype.jpと同じように古いエントリーから読むとページ末尾に新しい記事が追加されるように設定します。

MovableType4.1をAutoPagerizeに対応させるコードを紹介しておきます。

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事（次ページ）が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ（トップページ）で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

MT4.1 では、MTElse ブロックタグも拡張され、テンプレートでより複雑な条件式を作成することができます。それを使ってリストをストライプ表示させる方法を紹介します。

MovableType4.1でエントリーリストはじめ、コメントトラックバックなどのリスト表示をストライプにする変数設定について紹介します。

MT3.3xでは、MTRoundRobin:一覧表示で交互に背景・文字色をかえるで紹介していたMTRoundRobinというプラグインを使って、記事リストをストライプにして表示させていました。

新しいMovableType4.1では、そうしたプラグインは必要なく、変数を設定し条件分岐させることで、対象の要素に奇数偶数回数目で設定内容を指定してページ生成することが可能です。この変数指定での条件分岐を使って、奇数、偶数の要素に対してclass指定を交互に変えて生成するようにすれば、cssの設定だけでストライプ表示をさせることが可能となります。

参考になるエントリーは、こちらの拡張された MTElse タグを利用した複雑な条件分岐 | MovableType.jpを読んでみるとその内容がわかると思います。

また、サンプルページは、MovableType.jpにて最近のブログ記事リストがこの方法を使って、ストライプ表示をさせていると思われます。

MT4.1デフォルトテンプレートにおいて、インデックステンプレートの構成内容並びに、ヘッダーモジュールタグとの関係をイメージしてみました。新しく追加されたテンプレートタグの把握にお役立てください。

新しいシステムMovableType4.1でのコンテンツ構築・デザイン変更で、知っておかなければならないのが新しく追加されたテンプレートタグとテンプレートです。タグリファレンスやブログを読んで、新しいMTタグについて勉強してみたのですが、やはり実際に使って動作させてみないとわからない。また、もう少し全体的に比べてみたりしないと理解しづらいなんてことで、まず、テンプレートの相関図みたいなものを個々に作っていこうと考え、実際にインデックステンプレート（トップページ）の構成内容とヘッダーテンプレートとの関係をイメージにして表してみました。ご参考にどうぞご覧になってください。

左図がヘッダーテンプレートコードになります。右図がインデックステンプレートでの変数設定についての詳細です。

クリックでイメージ拡大されます。またドラッグで移動もできますので、大きな画像を見るときにスクロールで移動してもいいですが、ドラッグでイメージを移動させた方がみやすいです。highslideJSもこうした使い方をすると機能的ですね。

尚、こうしたイメージをつなぎ合わせて一つのPDFなんかを作っていきたいとも考えています。新しいタグを覚えるのには、こうした全体の関係を表してみて、部分部分でのテンプレートタグの機能役割なんかを見てみると理解しやすいかと思います。

今回、実際にデフォルトで設定されているテンプレートタグを取り出して、どういったフローでページ生成（HTMLタグ生成）されるのかを個々に取り上げて、解析してみたいと思います。このテンプレートタグについて、シリーズで取り上げていきます（勉強するための時間があまり取れない状況にありますので、長いインターバルでアップしていきます）。今回のテンプレートについての詳細解説は、後日いたします（このエントリー追記部分にて）。とりあえず、イメージを。