mt5 Archive

2 of 3

MT：encode_js でエスケープ文字が差し込まれる文字列

Posted by: maRk
2012年4月17日 10:24
Last update: Jan 12, 2015 23:12
mt5

MTOS 5.13の環境でencode_js の出力に関してのテストテンプレート。

scriptという文字列があったときに、バックスラッシュによるエスケープ文字が挿入されることに最近気がついたので、テキトーなテンプレートを作ってみてみました。

<mt:Var name="var[0]" value="script">
<mt:Var name="var[1]" value="javascript">
<mt:Var name="var[2]" value="applescript">
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>encode js test</title>
</head>
<body>
<p><$mt:GetVar name="var" encode_js="1"$></p>
<script>
(function(){
var i;
var a=new Array( <mt:loop name="var" strip_linefeeds="1">
<mt:Unless name="__last__">
<mt:Var name="__value__" encode_js="1" regex_replace='/(.*)/','"$1",'>
<mt:Else><mt:Var name="__value__" encode_js="1" regex_replace='/(.*)/','"$1"'>
</mt:Unless></mt:loop> );
for (i=0; i<3; i++){
     document.write('<' + a[i] +'>' + 'test' + '</' + a[i] + '>' );
}
})()
</script>

Comments
TrackBack Closed

MT5.1のImageDriverにImagerを設定してみる(ローカル環境)

Posted by: maRk
2011年5月24日 21:50
Last update: May 24, 2016 07:46
mt5

Movable Type 5.1で画像処理ライブラリとしてImagerを設定できるようになっていましたので、その設定と動作を確認してみました。

なんか5.1のリリース近しとか囁かれていたりしますが、やや見切り発車？でのレポートです。動作テストはRC版でおこないました。

環境変数リファレンスをみますと、ImageDriverとしてImagerが追加されています（ただし、ヴァージョン5.1以降）

ImageDriver | 環境変数リファレンス

Imagerのインストール

Mac OS XでMAMP下でインストールをおこなってみました。

Imagerの説明については以下のページが丁寧に解説されていて参考になりました。サンプルコードもありますので、インストール後に動作確認してみるといいでしょう。

use Imager; - 今日のCPANモジュール（跡地）

jpeglibとかlibpngとかいったライブラリが必要となっているとのことですが、自分の環境では既に画像処理ライブラリにNetpbmをMacportsからインストールしておりまして、そのあたりはスキップしております（一部ないものもあるけど）。

インストールはcpan経由にておこないました。cpanプロンプトに入って、Imagerをインストール。

cpan> install Imager

インストールに成功したら、先ほどの参考元サイトさまで示されているように、%Imager::formatsハッシュをみてみます。

最低限JPEGとPNGが対応できていればいいかなと。

環境変数をmt-config.cgiに記載

追記：　新しめのヴァージョンですと　Imager インストール済でかつ、 Image::Magick 未インストールという環境でウィザードからインストールをおこなった場合にmt-config.cgi にImageDriverにImager が書き込まれる事は確認しております。

準備が整ったら、あとは簡単でmt-config.cgiにImageDriver ImageMagickとかなっているのをImageDriver Imagerと書き換えるだけです。書き換えたら上書き保存します。

ImageDriverの指定がなかった場合に画面上部に警告メッセージが表示されています。＊キャプチャは5.1RCのものです。

ImageDriverをImagerにして書き換えます。

これで再びログインしなおしますと警告メッセージも消えてアイテムで画像アップロードなどするとサムネイル表示されるようになります。

Comments
TrackBack Closed

メモ：Movable Type 5.1でのtrim_toオプション

Posted by: maRk
2011年5月20日 21:17
Last update: May 24, 2016 07:46
mt5

Movable Type5.1でtrim_toモディファイアでtrim_to=5+...の書き方の動作確認です。

MTでtrim_toを使って省略されたテキストのあとに三点リーダなどを付与する方法ですがMT5.1ではモディファイアにて簡単に表現できるようになっています。

MT5.1リリースノート（本記事作成の時点では[RC4]）の「MT 5.1で実装された機能」の項目にtrim_to="5+..." モディファイアを追加する。と記載されています。

5.1 リリースノート | Movable Type 5 ドキュメント

モディファイアについては特に解説なしでいきなり使ってみましょう。当方はRC2にて検証をおこないました。このテストでは三点リーダでなくピリオド３つ並べたものでおこなっています。

テスト用テンプレート

<mt:SetVar name="text" value="1234567abc" />
<!DOCTYPE html>
<meta charset="utf-8">
<title>trim to option test</title>
<p><mt:var name="text" trim_to="5+..." /></p>
<p><mt:var name="text" trim_to="7+（ry" /></p>

結果

出力


12345...

1234567（ry

出力されたページのソース

<!DOCTYPE html> 
<meta charset="utf-8"> 
<title>trim to option test</title> 
 
<p>12345...</p> 
<p>1234567（ry</p>

正式版リリースを前になんかしょうもないエントリですみません。

Comments
TrackBack Closed

メモ：MTOS5 インストール後のmt-check.cgi

Posted by: maRk
2011年3月11日 10:25
Last update: Jul 19, 2013 23:40
mt5

Movable Type 5インストール後にmt-check.cgiを見に行くと、無効化されています。

わかっていそうで実は知らなかったのでメモです。環境はMTOS　5.1b2 によるものですので、ヴァージョンによって違う動作となるかも。

MTOSをインストールする前に、１回mt-check.cgiを開いて必要なモジュールなどが揃ってるかチェックするわけです。

そのあとインストールは常の如しでおこないまして、ダッシュボードが表示されるまでできたとします。

この後、再びmt-check.cgiにアクセスしますと、以下のようなメッセージが表示されています。

The MT-Check report is disabled when Movable Type has a valid configuration file (mt-config.cgi)

?__lang=jaというパラメタつきですと、以下のメッセージです。

構成ファイル(mt-config.cgi)がすでに存在するため、'mt-check.cgi' スクリプトは無効になっています。

というわけで、インストールしたあとはMovable Typeの管理画面の[ システム ]　>　[ ツール ]　> [ システム情報 ]と進みますと情報をみることができます。

【追記：２０１１年３月14日】説明が不足していましたので補足します。　「管理画面から確認できる」というのは、インストール完了後にmt-check.cgiファイルに対してパーミッションの設定で実行可になっている条件においての話です。セキュリティ対策等で削除やパーミッション変更していた場合ではあてはまりません。（ローカルで確認したものでしたのでこの辺り失念してました）　　あと、記事タイトルのほうでファイル名が間違ってましたので訂正しました。

Comments
TrackBack Closed

MT：メモ：alt templateを使い変数jq_js_includeにappendする場合について

Posted by: maRk
2010年7月21日 05:41
Last update: Jan 12, 2015 22:28
JavaScript | MTカスタマイズ | mt5

Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。

MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする（append=1として変数に追加する）という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示（テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか）したときにも追加されることがあるのを確認できました（MTOS 5.02）。

追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。

なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。

（１）footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする

先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。

つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。

/MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
（コピー先の）footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
編集後はサーヴァにローカルと同じ構成でアップロードします

footer.tmplに追加するコード。

追加の場所は</body>の上に。ここでは変数名をjq_custom_includeとした。

<script type="text/javascript">
jQuery(function($){
<mt:var name="jq_custom_include">
});
</script>
<!-- 追加コードここまで -->
    </body>
</html>

勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます（このエントリではプラグイン等でappendを利用することを想定したつもりですが）。scriptタグ自体を追加側（setvarblock内）のコードに委ねるというのであれば変数の呼び出し（mt:var name=）だけ置けばよいことになるでしょう。

ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。

jQueryのコードの追加

あとは、setvarblockで任意のコードをappendです。

<mt:setvarblock name="jq_custom_include" append="1">
/* append code
 $("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>

（２）スクリプトがダイアログのとき動作しないようにする

コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。

これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します（ヴァージョンアップ等でなくなる可能性はあるかもです）。

以下は、jQuery('#dialog')でIDをgetして分岐するコードです。＊else{以降は適当な（動作に影響をおよぼさない）コードを。

<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;} 
else {
//  Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>

この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。（Firebug等のツールで確認します）

追記（2010.07.22）プラグインでの追加方法の対策で微妙ですが公開しておきます。

（３）プラグインで対策してみる

例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。

   my $old = qq(<mt:setvarblock name="related_content">);
   my $new = <<EOT;
#
# ここにappend予定のsetvarblock !
#
<mt:setvarblock name="related_content">
EOT

   $$tmpl_ref =~ s/$old/$new/;

あとこまかな事など

cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。

以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。

個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。

おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。

Comments
TrackBack Closed

MT5の管理画面でテーブルの行ハイライト

Posted by: maRk
2010年4月27日 08:03
Last update: Jan 13, 2015 14:40
MTカスタマイズ | mt5

Movable Type5 (MTOS5)の管理画面で各テーブルにてマウスオーバー時に行をハイライトするというカスタマイズです

tableの行ハイライトのデザインに慣れてしまうと、どうもどこでも実装してみたくなってしまいこのとおりでございます。

「ブログテンプレートの管理」とかtableで構成されているリストのあるページでマウスオーバーの時にハイライトになるというものです。

其レ、CSSで出来るよ（・∀・）というかたはその様にされて構わないのですけれど（んだども、セレクタが使える部分は大きいかなあとかなんとか）。

MTOS5.01-jaにて確認をおこないました（jQueryを使うのでMT5以降用です）。alt-tmplで代替テンプレートとして使用します。

{mtシステム}/alt-tmpl/CMS/include/ 以下に、{mtシステム}/tmpl/cms/include/footer.tmpl のコピーを置いて、以下のコードをfooter.tmplの先頭に追記します。

追記：すみません、selectedのときの背景色を考慮してなかったので書き直しました

【追記：2010/04/28 】クラスを(付加/削除)するタイプにコードを変更しました。＞旧コード

<mt:setvarblock name="jq_js_include" append="1">
var addCss='';
addCss += '<style type="text/css">\n'
addCss += '.listTableHighlight { background-color : #e5ecf3 !important; }\n';
addCss += '</style>\n';

jQuery("head").append(addCss);

jQuery('table[id*=listing] tbody tr').hover(function(){
       jQuery(this).addClass("listTableHighlight");
}, function() {
       jQuery(this).removeClass("listTableHighlight");
});

</mt:setvarblock>

tableの縞々の背景色は手抜きでハイライト前の元の色を取得せずclass名、odd、evenに指定されていた背景色を使うことにしてるので、自分で好きな配色にされてるかたは（いるのか？）適宜変更が必要になるでしょう。

あ、いちおうプラグインらしきものも用意してみました。こういうの初めて作ったような気が。上のalt-tmpl使うのと同じです。footerに上記のコードを追加するだけです。それ以上の機能はありません。

http://www.markdiary.com/sample/haifu/ListTableHighlight.zip (zip)

markdiarycom / ShowHideLeftMenu

メモ的に。SetVarBlock（+append）を使った書き方をするのは好みの問題ですので直に代替テンプレートにjQueryのコードとか書き込んでも構わないと思います（自分が使う分には、という前提だけど）。SetVarBlockを使う方法でやってるのは、止めにしたいときに、SetVarBlockタグと中身をまるっと削除すればその部分はなかったことになるので。

そのような関係で、テンプレートに追加したいところに空要素書き込んでおいて流し込ませなくて、jQueryで要素を作って{append()/prepend()}するようなのをしばしばおこないます。

Comments
TrackBack Closed

MT5管理画面でjQueryを使って左メニューを折りたたむ

Posted by: maRk
2010年4月 9日 18:38
Last update: Mar 16, 2016 22:53
MTカスタマイズ | mt5

Movable Type 5のテンプレート編集画面において、左ペインのメニュー（以下省略して「メニュー」とします）を表示させたり隠したりするボタンをjQueryを使って作成

MT5では管理画面に3カラムが採用されました。テンプレートの編集画面では、XGAな環境には（テキストエリアの横幅がせまくて）一寸厳しい部分があります。

編集するテキストエリアを全画面表示されるプラグインはありますが、メニューを表示させないだけでも少しは違います。

スクリーンショット

メニューが開いている状態
メニューが閉じられている状態

ということで、FirefoxのアドオンStylishで確認して作成してみたのが以下のカスタムスタイルです。

下記に示すコードは当方が普段使っているモニタの解像度に基づいてるものですので、もし使われる場合は各自で（Stylish使うなど）確認しながら調整をおこなわれたほうがよいでしょう。

#menu{
clear:left !important;
position:absolute;
left:-170px;!important
}

#content{
width: 115%!important;
clear:left!important;
position:relative!important;
left:0!important;
}

そのままStylishにいれて、有効・無効を切り替えて使ってもいいのですが、折角ですので管理画面上に切り替えボタンがあればそのほうが使いやすそうですよね。

テンプレート編集画面の代替テンプレートを使って、このボタンを作成してみたいとおもいます。

注意点です。Movable Typeのヴァージョンが変わった際、構造が変更となった場合はその都度代替テンプレートの変更が必要となります。
＊この記事では、MTOS 5.01 jaを元にカスタマイズしております。

代替テンプレートの作成

先にCSSファイルを用意します。下記のファイルを（任意のファイル名でいいのですが）ここではeditor-toggle.cssとして（mt-static/css/editor）以下に保存します


.wide_view_menu{
 clear:left !important;
 position:absolute;
 left:-170px;!important
}

.wide_view_content{
 width: 115%!important;
 clear:left!important;
 position:relative!important;
 left:0!important;
}

#toggle_view{
 display: block;
 position:relative;
 padding-left: 4px;
 left: 0px;
 width: 145px;
 text-align : center;
 background-color:#ccc;
 cursor: default;
}

#toggle_view:hover { background-color: #eee; }

mt/tmpl/cms/ のedit_template.tmplファイルを開きます
edit_template_tmplを任意のエディタで開き全選択してコピーし、エディタの新規作成に貼り付けします

貼り付けしたほうで、<mt:include name="include/footer.tmpl">という記述の上に以下のようなコードを追記します。

<mt:setvarblock name="jq_js_include" append="1">
 var toggle_htm= '<a href="#" id="toggle_view"> &#62;&#62; </a>';
 jQuery("#container").prepend(toggle_htm);

// toggle view actions

 jQuery("#toggle_view").toggle(
  function () {
    jQuery(this).text(" \u003E\u003E ");
    jQuery("#menu").addClass("wide_view_menu");
    jQuery("#content").addClass("wide_view_content");
  },
  function () {
    jQuery(this).text(" \u003C\u003C ");
    jQuery("#menu").removeClass("wide_view_menu");
    jQuery("#content").removeClass("wide_view_content");
  }
);

</mt:setvarblock>

先に保存しておいた、editor-toggle.cssがテンプレート内に呼び出されるように、以下のコードも追記しておきます


<mt:setvarblock name="html_head" append="1">
<link rel="stylesheet" type="text/css" href="<mt:var name="static_uri">css/editor/editor-toggle.css" />
</mt:setvarblock>

以上書き換えが済んだら、edit_template.tmplとファイル名にして、mt/alt-tmpl/CMS/以下にファイルを設置します
設定を終えたら、MT管理画面にログインしますと、先に示しましたスクリーンショットのとおりです

【追記：2010・04・30】プラグインを作ってみました。展開して、pluginsディレクトリ、mt-staticディレクトリそれぞれ対応するフォルダ・ファイルを入れます。mt-staticフォルダ内のcssファイルでスタイルを調整できます。

~~http://www.markdiary.com/sample/haifu/ShowHideLeftMenu.zip" class="event_file">ShowHideLeftMenu.zip~~

5.1x 以降は、以下にあります。

https://bitbucket.org/markdiarycom/showhideleftmenu/downloads

Comments
TrackBack Closed

Index of all entries

BlogTop > MovableType > mt5 Archive

Search

Ajax BlogSearch

Categories

Feeds

Atom

Elsewhere

Action Streams

logo

Return to page top