Page Top

Movable Type(MT)アイテム画像の「高さ」を抽出する方法

October 13, 2014

Movable Typeでアイテム画像の「高さ」を抽出する方法には2通りあります(それ以上あるかもしれませんが、今のところ知っているのは2通りなので2通りにしておきたいと思います。)

1つはMTタグである「MTAssetProperty」を用い、そのモディファイアとして「image_height」を指定して「高さ」を抽出する方法。(以下、<>は全角にしています。)

<MTAssets>
<$MTAssetProperty property="image_height"$>
</MTAssets>

2つ目は、「MTAssetThumbnailLink」を用いて、グローバルモディファイアの「sanitize」 と正規表現を用いて「高さ」を抽出する方法です。(以下、<>は全角にしています。)

<MTAssets>
<$MTAssetThumbnailLink sanitize="img height" regex_replace='/(.*?height=")(.*?)(".*)/g','$2' strip_linefeeds="1" trim="1"$>
</MTAssets>

通常であれば、1つ目の方法でいとも簡単に「高さ」を取得する事ができるので、2番目の方法は必要ないと思うのですが、、ひょんなことから、このような方法を取ってしまった為に、少し苦悩しましたので・・、ここに書き記して置きたいなと思いました。

2つ目の方法での正規表現は、「かたつむりくんのWWW」様の記事「ブログ記事本文中の最初のimgのURLを取得する」を参考にさせていただきました。ありがとうございます!

この正規表現、やはり勉強して理解しないことには、と思い、自分なりにネットで初歩を学びました。その初歩なりの理解で、となりますが、この正規表現の意味するところを解釈してみたいと思います。

まず、MTにおけるグローバルモディファイアの「regex_replace」の役割をここでおさらいします。movabletype.jpの「regex_replace」より引用。(以下、<>は全角にしています。)

<引用開始>
--------------------------------------------------
regex_replace

/pattern_foo/ と replacement_foo を設定することで、Movable Type タグの値の正規表現による置換が行えます。例えば Movable Type タグの値に含まれる foo を bar に置換したい場合は以下のように書きます。

<mt:entrybody regex_replace="/foo/","bar">

使い方

<mt:entrybody regex_replace="/foo/","bar">
--------------------------------------------------
<引用終了>

とあるように、「regex_replace」を使って、「/foo/」というパターンを「bar」にすることが出来ます。ちなみに「foo」は、「//」で挟んで使用します。(←これは、Perlのパターンマッチ演算子というものの書き方のようです。)

そして、この「//」の中に来る正規表現が、以下となります。
--------------------------------------------------
(.*?height=")(.*?)(".*)
--------------------------------------------------

まず、「()」で3箇所、グループ化されています。「(.*?height=")」と「(.*?)」と「(".*)」です。このメタ文字「()」は、「グループ化」という正規表現上の意味があるようです。(参考URL:「Perl基礎入門」様の「第7章 正規表現」)

そして、上記サイト様の「第7章 正規表現」より引用させていただきますと、このグループ化させるメタ文字「()」を使用して、

<引用開始>
--------------------------------------------------
「複数の文字列をまとめた形でパターンマッチを行います。
またこのパターングループでマッチした文字列は、特殊変数 ( $ + 数字 ) に、マッチした順に代入することができます。( ex. $1, $2, $3, ... ) 」
--------------------------------------------------
<引用終了>

と、あります。つまり、
--------------------------------------------------
regex_replace='/(.*?height=")(.*?)(".*)/g','$2'
--------------------------------------------------
の意味するところは、大まかに言うと、「//」で囲まれた、3つにグループ化された文字列のパターンの2番目「$2」、つまり、高さの数字のみの部分「(.*?)」が、グループ化された文字の2番目が代入される変数「$2」に代入され、置き換えられる、ということになります。

ここで気になる「//」の後ろにある「g」ですが、これは、先ほどの「第7章 正規表現」によりますと、「置換演算子には、置換えを行う際のオプションとして、修飾子が用意されており、「g」には、繰り返しマッチする (global)」の意味があるようです。ですので、1度だけ出現するheightの値だけでなく、2度目、3度目、と、繰り返し出現するheightの値もチェックする、という意味になります。

「//」の中の正規表現の中身をもっと詳しく見て行きますと、「(.*?height=")」の中の「.*」は、「何でも良い1文字が全く無いか、連続するか」の意で、その後ろの「?」は、「直前の文字が全く無いか1つだけある」という意味になります。

大局して大雑把に言ってしまうと、以下の意味は、
--------------------------------------------------
<$MTAssetThumbnailLink sanitize="img height" regex_replace='/(.*?height=")(.*?)(".*)/g','$2' strip_linefeeds="1" trim="1"$>
--------------------------------------------------
「MTAssetThumbnailLink」でアイテム画像のXHTML タグを出力し、それを「sanitize」することで、「img」という要素とその属性の「height」だけを抽出し、そのうち、「regex_replace」で、実際の値が「height="700"」などであれば、その中の「700」だけを取得する、ということになります。

最後、説明がちょっと力尽きてしまいましたが、、こんな感じです。1つ目の方法が簡単なので、そちらを使用するのが良いと思います。場合によっては2番目の方法も、カスタマイズなどして使うケースもあるかもしれませんので、このような方法もあるのだと頭の片隅に覚えておくのも良いかもしれません。

MTタグとjQueryを使って、特定の時だけ背景画像をnoneにする。

October 10, 2014

例えば、枠線の付いているボックス内に、タイトルと概要があり、そのタイトルには、h2などのヘッディングタグが使用され、また、タイトルの前にはアイコンがcssで背景画像として指定されており、そのタイトルの下には下線がcssで画像として指定されてあり(概要部分のboxに対しての上部位置への指定)、その下に概要が表示される、というようなコンテンツがあるとします。そして、そのタイトルは、自分のデザインの仕方により、表示したり、しなかったりを、MTのプライベートタグを利用してコントロールしたり、はたまた、タイトルに何も入力しないことにより表示しない、という事をMTタグとjQueryで実現します。ポイントは、タイトルが消えると、概要部分のbox上部に指定している画像の線も一緒に消す、というところです。つまり、タイトルの下線も一緒に消す、ということです。
mt_jquery_bg_none.png

以前の記事、「jQueryで要素の高さを取得し、body要素に記述している背景画像(パターン)のポジション(高さ)を変更する」の応用版になったので覚書として記載してみます。コードとしては、以下となります。(<>は全角にしています。)

<MTSetVar name="page_title_exist" value="0">
<MTSetVar name="no_title_tagged" value="0">

<MTIfNonEmpty tag="MTPageTitle">
<MTSetVar name="page_title_exist" value="1">
</MTIfNonEmpty>
<MTPageIfTagged tag="@no_title" include_private="1">
<MTSetVar name="no_title_tagged" value="1">
</MTPageIfTagged>

<MTIf name="page_title_exist">
<MTUnless name="no_title_tagged">
<h3 class="title"><MTIfNonEmpty tag="MTCFPageTitleLinkUrl"><a href="<$MTCFPageTitleLinkUrl remove_html="1" trim="1"$>" title="<$MTPageTitle remove_html="1" decode_html="1" encode_html="1" trim="1"$>"></MTIfNonEmpty><$MTPageTitle remove_html="1" decode_html="1" encode_html="1" trim="1"$><MTIfNonEmpty tag="MTCFPageTitleLinkUrl"></a></MTIfNonEmpty></h3>
</MTUnless>
</MTIf>
<div class="body pkg">
<$MTPageBody$>
</div>

<MTIf name="page_title_exist">
<MTIf name="no_title_tagged">
<script type="text/javascript">
$('#content .intro-box .row ul li.col .body').css('background', 'none');
</script>
</MTIf>
<MTElse>
<script type="text/javascript">
$('#content .intro-box .row ul li.col .body').css('background', 'none');
</script>
</MTIf>

当初、タイトルを記述している判別のところに一緒にjQueryも記載していたのですが(コードを一石二鳥にしようとして・・)、全然反応がなく(概要上部に背景画像として指定している線が一緒に消えない・・)、おかしいな~と思って何度も確認して分かったのは、そのタイトルの下に概要の来るboxがあることでした・・。jQueryでもhtmlでもコードが上から読み込まれて行くので、消したいbox上部の背景画像のコードの前にjQueryのコードを持ってきても意味が無い、という初心者エラーでした。。

Movable Type(MT)の「本文」エリアにTinyMCEでテーブル(表)を挿入

October 6, 2014

Movable TypeにはMT5.2からTinyMCEというリッチエディタが搭載されていますが、そのMT用の標準装備にはテーブル(表)作成用のエディタは付いていません。

でも、movabletype.jpの「リッチエディタの機能を拡張するプラグイン」という記事に、TinyMCEにテーブル(表)機能を追加させるプラグインの紹介がされています。ここのページでプラグインを入手し、記載の指定箇所にファイルをアップロードするだけで、私のMTでもテーブル(表)の作成が可能になりました(祝)。
mt_table_insert.png

普通に記事を書くだけならテーブル(表)の作成などは必要ないかもしれませんが、でも、何かの告知など、ちょっとしたことにテーブル(表)は簡単に使えるので便利だと思います。

10年選手のアラビアンジャスミン(マツリカ)

October 4, 2014

20140531_jasmin.jpg

10年選手のアラビアンジャスミン(マツリカ)は、室内に入れているからか、冬でも良く花を付けてくれます(花が咲くと、もの凄く良い甘い香りを出してくれます)。でも、最近は昔のような勢いは無く、ちょっと年老いた感じもしないでもありません。と言うのも、アラビアンジャスミンは蔦性の植物なのですが、年数が経つにつれ、古い蔦は木の枝のように茶色く固くなってしまうので、そこから新しい芽はなかなか出てきてくれません。まだ緑色の蔦の部分からは良く芽が出てきてくれますが、それも最近は昔と比べ少なくなったような気がします。やはり日照が少ないからかもしれませんし、getting old なのでしょうか・?私と身長が同じ、横はジャスミンの方が太いです。このジャスミンを元に挿し木した子ジャスミンは全部で7鉢あり、そのうち2鉢は知っている方にプレゼントしましたが、残りの5鉢は皆元気に育っています。多分、鉢を大きくしたら、この親ジャスミンのように大きくなると思われます。場所が無いので今はしませんが。。

Walking in the Central Park in Burnaby

October 4, 2014

5月、バーナビーのセントラルパークへウォーキングに行きました。この時は、腰痛が良くなりかけて調子が良くなっていた頃に、長時間のウォーキングをしてしまい、この後、坐骨神経痛になってしまいました・・。無理はいけませんでした。

20140531_centralpark_01.jpg

20140531_centralpark_02.jpg

20140531_centralpark_03.jpg