« | »

MTOS導入日誌 2009年12月03日(番外編MT4i)

追記 2010/11/04
MT4i Ver3.1βから、サムネイル表示ができるようになりました。
本日現在まだβ版ですが、面倒な改造をするより、最新版をダウンロードした方がいいのではないかと思います。
追記ここまで

MTをお手軽に携帯対応させてくれるツールのMT4i
本文中に画像を表示するよにいじってみました。

imgタグ→縮小表示ページにリンクした「<画像>」の文字
に置換している部分を
imgタグのままで、src要素部分を
画像ファイルのURL→縮小表示cgiのURL
に置換するように直しただけです。

MTの携帯対応方法を探すと、まずでてくるMT4i
携帯用にレイアウトするだけでなくて、パケ代節約のためにいろいろ変換して表示してくれます。
たとえば画像表示の imgタグを、画像表示ページにリンクした「<画像>」の文字に変換してくれます。

で、うちでも使ってんだけど絵文字いれた時なんかにも、この変換が効いちゃうのね。
これをなんとかしたいので本文中に画像表示するようにしたいなぁと。
昔と違って今はパケホーダイもアタリマエみたいだし回線も高速化してるから、絵文字に限らず画像が出ても問題なさそだし。
でかい画像張ってるとつらいけど。

つーわけで、MT4iで本文中にリサイズした画像をそのまま表示するよにしてみました。

まずはMT4iに元々そういう機能がないのか確認。
MT4iのwikiみると作者さんから「実装を検討中」とのこと。
つーことは今は入ってないのね。
今の機能も選べるよにするとか、画像の縮小に外部サイト使うとか、いろんな条件で使えるように追加するとなると大変なんでしょうね。
でもうちの場合、限定された環境で動けばいいので、直接プログラムいじることにしました。

次は、同じように中身いじった方がいないか検索。
あっさりアッキーさんという方のblog発見
MT4iのバージョンはうちのと違うけど、とりあえず書いてある通りに直してみたらあっさりOK

・・・かと思ったら、表示されない画像もある。

表示されない画像があるエントリ内容をいくつか見て見ると
「1つのエントリの中に、どこかにリンクした画像と、リンクしていない画像があると、リンクのない方の画像が表示されない」事が判明
MT4i(改)が吐き出すHTMLソース見て見ると

リンクあり:<img src="mt4i.cgi?mode=img_cut......">
リンクなし:<img src="http:%3a%2f%2f....">

つまりリンクしてたimgタグのsrc属性値は縮小表示用のURLになってるけど、リンクの無いimgタグのsrc属性値は元のファイルのURLがエンコードされたものになってる」
みたい。

ここでやっと、元のプログラムとアッキーさんの直したのをちゃんと読んでみた。
(最初に読んで理解してから試せよ>俺)

元のMT4iは、

  1. リンクありで imgタグの属性値が src→altの順で指定されたimgタグを、【画像の縮小表示ページにリンクした「<画像:>」文字列】に置換(元のリンクは削除)
  2. リンクありで imgタグの属性値が alt→srcの順で指定されたimgタグを、【画像の縮小表示にリンクした「<画像:alt>」文字列】に置換(元のリンクは削除)
  3. リンクなしで imgタグの属性値が src→altの順で指定されたimgタグを、【画像の縮小表示にリンクした「<画像:alt>」文字列】に置換
  4. リンクなしで imgタグの属性値が alt→srcの順で指定されたimgタグを、【画像の縮小表示にリンクした「<画像:alt>」文字列】に置換
  5. リンクあり・alt属性値なしのimgタグを、画像の縮小表示にリンクした「<画像>」文字列に置換(元のリンクは削除)
  6. リンクなし・alt属性値なしのimgタグを、画像の縮小表示にリンクした「<画像>」文字列に置換

と6回置換してるのね。

で、アッキーさんのは元のMT4i
【縮小画像にリンクした「<画像>」文字列】又は【縮小画像にリンクした「<画像:alt>」文字列】
に置換してた部分を
【src="縮小した画像表示のURL"とするimgタグ】
に置換するよにしてある。
でも、6つの置換のうち1度置換したら、それより後の置換は行わないよにしてある。
1)で置換されたimgタグがまた5)と6)で置換されちゃうのを避けるためみたい。

(元のmt4iでは、1)の置換で>img って文字はなくなるんで、それより下の置換には関係なくなるのね)

この「後の置換をしない」処理があるため、まず1)でリンクしてるimgタグを置換すると、2)3)のリンクの無いimgタグの置換が行われなくて、URLエンコードされたままになっちゃうので表示されないって症状がでちゃうんだね。

私も正規表現はよくわかんないので、小手先でどうにかなんないか考えてみました。
→6回の置換ぢゃ「img」以外の文字にしといて、最後に「img」にすりゃいいんぢゃないか?
つーわけで、各置換は<image にしておいて最後に<img にもどしてみたら、思った通りになりました。

で直したのが↓
元のMT4i.cgi(757行目あたり、うちは自前ImageMagic使ってるので、"$imk == 2"の場合は無視してelse以降だけ)

} else {
$href = &make_href("image", 0, 0, $eid, 0);
$text =~ s/<a[^>]*><img[^>]*src=\n*["']([^"'>]*)["'][^>]*alt=\n*["']([^"'>]*)["'][^>]*><\/a>/&lt;<a href="$href&amp;img=$1">画像:$2<\/a>&gt;/ig;
$text =~ s/<a[^>]*><img[^>]*alt=\n*["']([^"'>]*)["'][^>]*src=\n*["']([^"'>]*)["'][^>]*><\/a>/&lt;<a href="$href&amp;img=$2">画像:$1<\/a>&gt;/ig;
# imgタグのみの除去、ALTの表示、画像へのリンク
$text =~ s/<img[^>]*src=\n*["']([^"'>]*)["'][^>]*alt=\n*["']([^"'>]*)["'][^>]*>/&lt;<a href="$href&amp;img=$1">画像:$2<\/a>&gt;/ig;
$text =~ s/<img[^>]*alt=\n*["']([^"'>]*)["'][^>]*src=\n*["']([^"'>]*)["'][^>]*>/&lt;<a href="$href&amp;img=$2">画像:$1<\/a>&gt;/ig;
# aタグを含めた除去、画像へのリンク
$text =~ s/<a[^>]*><img[^>]*src=\n*["']([^"'>]*)["'][^>]*><\/a>/&lt;<a href="$href&amp;img=$1">画像<\/a>&gt;/ig;
# imgタグのみの除去、画像へのリンク
$text =~ s/<img[^>]*src=\n*["']([^"'>]*)["'][^>]*>/&lt;<a href="$href&amp;img=$1">画像<\/a>&gt;/ig;
}

直したcgiスクリプト↓
(うちでは元の画像からのリンクは生かしておきたいので、リンク外す部分はコメントにしてあります。)

} else {       #自前ImageMagic の場合
#          $href = &make_href("image", 0, 0, $eid, 0);      #画像表示ページ
$href = &make_href("img_cut", 0, 0, $eid, 0);   #縮小画像ファイル
#------- image タグの置換 ----
#リンクあり・altありの場合:aタグ削除、画像は縮小 alt付き
#          #  imgタグが src →altの順の場合
#          $text =~ s/<a[^>]*><img[^>]*src=\n*["']([^"'>]*)["'][^>]*alt=\n*["']([^"'>]*)["'][^>]*><\/a>/<image src="$href&amp;img=$1" alt="$2">/ig;
#          #  imgタグが alt →src の順の場合
#          $text =~ s/<a[^>]*><img[^>]*alt=\n*["']([^"'>]*)["'][^>]*src=\n*["']([^"'>]*)["'][^>]*><\/a>/<image src="$href&amp;img=$2" alt="$1">/ig;
#リンクなし・altありの場合:画像は縮小 alt付き
#  imgタグが src →altの順の場合
$text =~ s/<img[^>]*src=\n*["']([^"'>]*)["'][^>]*alt=\n*["']([^"'>]*)["'][^>]*>/<image src="$href&amp;img=$1" alt="$2">/ig;
#  imgタグが alt →srcの順の場合
$text =~ s/<img[^>]*alt=\n*["']([^"'>]*)["'][^>]*src=\n*["']([^"'>]*)["'][^>]*>/<image src="$href&amp;img=$2" alt="$1">/ig;
#リンクあり・altなしの場合:aタグ削除、画像は縮小 alt=""
#          $text =~ s/<a[^>]*><img[^>]*src=\n*["']([^"'>]*)["'][^>]*><\/a>/<image src="$href&amp;img=$1" alt="">/ig;
#リンクなし・altなしの場合:画像は縮小 alt""
$text =~ s/<img[^>]*src=\n*["']([^"'>]*)["'][^>]*>/<img src="$href&amp;img=$1" alt=""\/>/ig;
#<image を <imgに置換
$text =~ s/<image/<img/ig;
}

これでひとまず満足。あとは

  • インライン表示/画像へのリンクを設定で変更可能に
  • 元リンクをはずす/外さないを設定で変更可能に
  • 元のリンク先が自分のサイトの画像ファイルだったら縮小画像表示ページへのリンクにする

なんてできるといいなぁ。

       

レスポンス

MT4iで本文(エントリー)と画像の両方を表示

うちのブログは Movable Type を利用しています。で、一応携帯からも見…

携帯サイトの本文中に画像表示

休日前夜はつい夜更かししてブログワー苦。 先日、つくった携帯サイトの色々とカスタ…

コメントする





Trackback URL