Movable Type MTをカスタマイズ 『メモメモ』改造日記

　
　MovableType2.xxなど以前のバージョンではファイルのアップロード機能に、イメージタグにborderを指定してあったのですが、MT3.0から、アップロードでイメージのborder指定がなくなったようでかなり不便になってしまいました。今回3.11にバージョンアップした機会に、そこでちょと改造（カスタマイズ）したので、その概要をメモメモ。
　
　
　早速、改造したポイント
　
　■ファイルのアップロードを簡単にする　border="0"　を追加
　
　画像ファイルのアップロードなど行う際に、リンクをセットするときに、Borderが気になりますので、これを解消し、イメージを使う際にセンタリングが多いので、編集の手間を省く意味でMTを改造していました。今回3.33にバージョンアップしましたので、追記しておきます。以前のバージョン、3.01D-jaと3.11〜3.33までの改造箇所は以下のようになります。
　
MT3.01D ：　/lib/MT/App/CMS.pm 1808行
　
<a href="$url"＞＜img alt="$fname" src="$thumb" width="$thumb_width" height="$thum b_height" border="0" /＞＜/a＞
　
　
MT3.11 ：　/lib/MT/App/CMS.pm 2003行
MT3.12 ：　/lib/MT/App/CMS.pm 2017行
MT3.2 ：　/lib/MT/App/CMS.pm 3772行
MT3.33 ：　/lib/MT/App/CMS.pm 5031,5036行
border="0" と　＜center＞＜center＞部分を追加しました。
　
＜center＞＜img alt="$fname" src="$url" width="$width" height="$height" border="0"/＞＜/center＞
　
　
　■改良されたポイント　blockquoteが簡単になった。。
　
　エントリー作成の際、他サイトの記事やコメントを引用するとき＜blockquote＞タグでくくることがありますが、このタグがMT3.11から標準ではセットされました。
　
　

コメントの引用

　
　以前のバージョンでは、エントリーを入力する際に都度タグを入れていたり、そのうちにMTのエントリーに機能ボタンを追加していましが、3.11からは標準でタグが用意されてます。
　

　
　
参考までに、以前のバージョンでは、mtディレクトリ内のtmpl内のcmsディレクトリ内の「edit_entry.tmpl」というファイルをダウンロードして、エディタで開き、384行目と385行目の間に以下スクリプトを挿入します。
　
有志が改造していた部分が、285行目以降に、以下のようにコードを追加します。
<br /> <!-- トラックバック表示 --><br /> document.write('<td width="24"><a href="javascript:formatStr(\'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/blockquote.gif" alt="blockquote" width="24" height="18" border="0"></a></td>');
　
　
　Amazonリンク「クイックリンク ウィジェット」をMTに組み込み
　
　mtディレクトリ内のtmpl内のcmsディレクトリ内の「edit_entry.tmpl」
　MT3.33-ja ：　/tmpl/cms/edit_entry.tmpl 632〜635
　MT3.33-ja ：　/tmpl/cms/edit_entry.tmpl 707〜710
<br /> write('<img title="<MT_TRANS phrase="Amazon Link">" onclick="return insertLink(document.entry_form.text)" src="<TMPL_VAR NAME=STATIC_URI>images/formatting-icons/link.gif" alt="<MT_TRANS phrase="Amazon Link">" width="26" height="19" />');<br /> 　

　MT3.33-ja ：　/lib/MT/L10n/ja.pm 1815
　 'Amazon Link' => 'Amazonリンク',を追加
　
　■MTのカスタマイズを行うリスクよりも、導入が簡単なPlug-inの導入をお勧めします。
　
　MTの編集ボタンを追加・改造（3.3対応プラグイン版）ここで開発・配布されているプラグインを導入して、Amazonクイックリンクを使えるように、小改造すれば、タグと同じ感覚でクイックリンクを導入できます。
　
　また、FireFoxで悩まされてきた、編集画面でタグを利用した際にページがTOPまで戻ってっしまう問題も改修されていますので、このPlug-inの導入は効果も大きくおススメです。
　
　
　サムネイル画像を拡大表示させるスクリプトを導入
　
　イメージファイルを扱う際に、大きなイメージは画像をアップロード前にペイントなどソフトで縮小するか、ファイルアップロード時に、MTでサイズを指定してアップロードしていますが、Windows標準のペイントは、WindowsXPまでは画像圧縮の際の能力が低く画質が目に見えて低下します。WindowsVistaになってこのペイントソフトもアップグレードされたようで、圧縮時の画質の低下は減りましたが、それでもMT標準の画像処理の方が品質の低下が少ないようです。
　
　MTでイメージファイルをアップロードして、サイズを指定する場合、元の画像とサムネイルの両方がサーバーに保存されますが、元が大きなファイルの場合には、容量が無駄になるため避けてきました。
　
　しかし、大きな画像で見たいものもあるので、今まではMTに組み込まれた画像の切り替えを使ってきましたが、画面が直接画像ファイルに切り替わるため見にくく使いにくいので、これを見やすくするために、今回Javaスクリプトを導入してみました。
　
　Lightbox JSやLiteboxを多く見かけますが、画面が黒く画像表示だけに切り替わるスクリプトのため、参考までみるには使い勝手がわるくほかに無いかと探してHighslide JS?を使うことにしました。
　

谷村奈南 Say Good-bye(DVD付)
　
　このHighslide JS?は、サムネールをクリックすると同一ウィンドウ上に画像を重ねて表示、そして画像をクリックするとサムネイル画像に戻ります。
　
　
　画像拡大・縮小のスクリプトをMovable Type（ムーバルタイプ）に導入
　
　サンプルコードの組み込みなど、下記のサイトを参考にさせていただきました。
　
　WEBデザインをはじめMT・Firefox・WEB2.0関連情報等の備忘録
　Highslide JS-サムネール画像を拡大表示するスマートなjavascript ...
　
　１：Highslide JSからコードをダウンロード入手。
　２：ftpでmtがページをアーカイブするフォルダーへスクリプトをアップロード。
　３：ページヘッダーに以下のコードを追加。

<!-- 画像拡大・縮小のスクリプト -->document.write('<script type="text/javascript" src="<$MTBlogURL$>highslide.js"></script><br /> <script type="text/javascript"> <br /> hs.graphicsDir = '<$MTBlogURL$>graphics/';<br /> window.onload = function() {<br /> hs.preloadImages();<br /> }<br /> </script>');
　
　４：cssに表示させる枠のカラーなどをセットする。styles-site.cssなどに組み込む
　
<!-- 画像拡大・縮小のcss -->document.write('.highslide {<br /> cursor: url(../blog/graphics/zoomin.cur), pointer;<br /> outline: none;<br /> }<br /> .highslide img {<br /> border: 2px solid white;<br /> }<br /> .highslide:hover img {<br /> border: 2px solid white;<br /> }</p> <p>.highslide-image {<br /> border: 10px solid white;<br /> cursor: pointer; /* opera */<br /> cursor: url(../blog/graphics/zoomout.cur), pointer;<br /> }<br /> .highslide-image-blur {<br /> cursor: pointer;<br /> cursor: hand;<br /> }<br /> .highslide-caption {<br /> display: none;<br /> border: 5px solid white;<br /> border-top: none;<br /> padding: 5px;<br /> background-color: white;<br /> }<br /> .highslide-display-block {<br /> display: block;<br /> }<br /> .highslide-display-none {<br /> display: none;<br /> }<br /> .highslide-loading {<br /> display: block;<br /> color: white;<br /> font-style: 'MS Sans Serif';<br /> font-size: 9px;<br /> font-weight: bold;<br /> text-transform: uppercase;<br /> text-decoration: none;<br /> padding: 3px;<br /> opacity: 0.60; /* w3c */<br /> filter: alpha(opacity=60); /* ie */<br /> border-top: 1px solid white;<br /> border-bottom: 1px solid white;<br /> background-color: black;<br /> <br /> padding-left: 22px;<br /> background-image: url(../blog/graphics/loader.gif);<br /> background-repeat: no-repeat;<br /> background-position: 3px 1px;<br /> <br /> }<br /> a.highslide-credits,<br /> a.highslide-credits i {<br /> padding: 2px;<br /> color: silver;<br /> text-decoration: none;<br /> font-size: 10px;<br /> }<br /> a.highslide-credits:hover,<br /> a.highslide-credits:hover i {<br /> color: white;<br /> background-color: gray;<br /> }');
　
　以上で、このスクリプトを使う準備はできました。
　
　MTで拡大画像を扱うには、拡大画像とサムネイルを扱えるようにします。
　
　
<!-- 画像拡大・縮小のスクリプト -->document.write('<div id="highslide-container"></div><br /> <a href="元画像のファイル指定" class="highslide" onclick="return hs.expand(this)"><img src="サムネイル画像ファイル指定" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="xxx" heigh="yyy" id='thumb1' /></a><br /> 　');<br />
　
　同一ページ内で複数の画像を扱う時には、id='thumb1' を1〜２・３と数値を変える必要があります。
　
　拡大画像の下に、テキストを表示させたい場合には、下記のコードを組み込みます。
　
<!-- キャプション追加 -->document.write('<div class='highslide-caption' id='caption-for-thumb1'><br /> <p> 好きなテキストを</p><br /> </div>');
　
　ここまでで画像の拡大と縮小の機能を扱うことはできますが、このままでは使い勝手が良くありません。MTの基本機能の画像のアップロードとサムネイル表示にこの機能を簡単に扱えるように、組み込みまで行えば完璧です。
　
　そのためには、MTのスクリプトを改造する必要があります。
　
　改造するスクリプトはMTのcgiフォルダーにある、lib/MT/App/CMS.pmの4803行目を改造しなければいけません。これは自己責任で、必ず元ファイルのコピーを残してから作業してください。
　
　
<br /> <!-- lib/MT/App/CMS.pmを改造 --><br /> document.write('<center><a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" /></a></center>');
　
　すでに、画像を扱う際の改造

やborder="0"を追加してある部分に、下記のようにコードを追加します。
　
<br /> <!-- lib/MT/App/CMS.pmコードを追加 --><br /> document.write('<center><div id="highslide-container"></div><br /> <a href="$url" class="highslide" onclick="return hs.expand(this)"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" id='thumb1' /></a>');
　
　MTのファイルアップロードを行い、スクリプトが組み込まれているか確認してください。もちろんですが、FTPファイルのアップロード時には管理者権限が必要です。
　
　


　
　
2004-10-23 15:16:59
2006-11-20 23:54:59
2007-11-18 13:23:59