Home > MovableType > mt4 Archive

mt4 Archive

1 of 7

Next Page >

Select Pages:

TemplateShelfプラグインの「All Templates」の選択がワナらしいので

Movale TypeのTemplateShelfプラグインですがAll Templatesを選択時にテンプレートの数が多いと動作が重くなるとのことなので使えないようにする改造とグローバルテンプレートのIDについてです

Movable Type 5で「TemplateShelfプラグイン」が動作できるとの情報がWolaWolaさまにて紹介されています。不具合の修正や改造方法も掲載されていますので参考になります。

ヴァージョンを4.2にしてから動作しなくなったので放置してしまったのですが、4.2以降でも動作するようにヴァージョンアップされていたようですね。さっそく使ってみましたところ4.261においても動作することを確認しました。

さて、「All Templates」を選択した際に動作が重いとのことです（JSON形式のデータの書き出しか読み込みで時間がかかるのか？？）。すべてのテンプレートのショートカットを表示させたい場面は滅多にありませんので要らないものは使わなくて済むように以下のように変更してみました。なお以下のカスタマイズはMovable Type 4.261にて確認をおこないました

<option value="" disabled="disabled"><__trans phrase="All Templates"></option>

template_shelf.tmplファイルのoption要素で当該の箇所にdisabled属性を追加して選択できないようにしています。

余談ではありますが、書いておきますとoption要素のdisabled属性がIE6では選択不可にならなかったとおもいます。その前にIE自体でこのプラグインが動かないですので。。(参考：「Template Shelf」プラグインがIE6では動かない？ - ElectricBrain Standard)上記はワタくシがやった方法ですから、その部分を削除するなり、コメントにするなりお好みの方法でよろしいかと。

それと、グローバルテンプレート時の振り分け（blog_id=0のパラメタが機能していない件の対処）についてなのですが、実はモーダルボックスでグローバルテンプレートの表示を試してみると（MT4.261の場合です）、コチラのほうはいちおう表示されているんですね、これが。

ソースを見るとどうやらtmpl.idの値が求めているものそのものらしいです。で、問題の箇所は以下のように変更してみました。createRow()関数の箇所でmt:var name="blog_id"の部分をtmpl.blog_idに置き換えます。そういう意味とは違うようでしたら御免なさい。


?__mode=view&amp;_type=template&amp;blog_id='+ tmpl.blog_id + '&id=' + tmpl.id + '">'

改造後はいつもの如しで、MTシステムディレクトリ/plugins/TemplateShelf/tmpl以下にアップロードして管理ページから確認して終了です。これで「むきょー！」の仲間入りですね。

Movable Typeのjsファイル内の関数を利用したShow-Hideのカスタマイズ

Movable Typeが生成する、インデックステンプレートのjsファイルに登録されている関数を利用して特定IDの要素の表示や非表示を実現するカスタマイズです。

ページ内の一部分をクリックで表示させたり、非表示にしたりするのに、自分でJavaScriptを書いて用意するか、prototype.jsやjQueryを利用するなどの方法があります。

さて、ほんの小ネタなのですが、MTのインデックステンプレートのJavaScriptテンプレートには、簡単な要素の表示・非表示をおこなう関数があらかじめ用意されています。簡素な表示切り替えでしたら、このJSファイルを利用する、という手もあります。

今回使う関数は、mtShow()とmtHide()です。

なお、上記の関数はMovable Type 4のヴァージョンによってはこの関数が導入されていませんので注意願います。ということで、以下のカスタマイズは、JavaScriptテンプレート内に、function mtHide(id)といったコードが記述されていることを前提として説明していきます。

mtShow()を利用した例

例として、簡単なテンプレートで示します。<$mt:Link template="javascript"$>を使ってMTのJSファイルを呼び出していますが、これはあくまでも例としてのテンプレートです。実際の使用は、individualアーカイブテンプレートのように作りこまれたテンプレート内で利用することを想定しています。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
#show { display: none; }
</style>
<title>MT Template test Show(ID)</title>
<script type="text/javascript" src="<$mt:Link template="javascript"$>"></script>
</head>
<body>
<p><a href="./" onclick="mtShow('show'); return false;">Show List</a></p>
     <div id="show">
     <ul>
         <li>list - 1</li>
         <li>list - 2</li>
         <li>list - 3</li>
     </ul>
     </div>
</body>
</html>

mtShow('show')で表示したい要素のID、showを渡します。記事ページのコメント一覧の表示とか、トラックバックURIを表示させるなどに使えるかと思います。

mtHide()を利用した例

以下は、画面上部に表示された要素を消すボタン用に関数を利用した例です。サイドバーやページの最上部に簡単なお知らせを表示するような場合などに。


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
body *{ margin:0; padding:0; }
#hide { display: block;
 margin     : 0;
 border     : 1px solid #CCCCCC;
 background : #FFFFE0 none;
 text-align : right; }
</style>
<title>MT Template test Hide(ID)</title>
<script type="text/javascript" src="<mt:Link template="javascript">"></script>
</head>
<body>
     <p id="hide">This is a test of MT Template !! <a title="Click to hide this message" href="./" onclick="mtHide('hide'); return false;">[ X ]</a></p>
<ul>
<li>list - 1</li>
<li>list - 2</li>
<li>list - 3</li>
</ul>
</body>
</html>

以上です。もっと複雑なことをされたいようなときは、自前で用意されたほうがいいかと思います。

これらのテンプレートをセットしたものは以下にあります。

解凍後の、templatesフォルダ内のファイルをインデックステンプレートで作成すれば試すことができます。

Download

MT：ついでにエディタのツールバーもドラッグ可能にしてみる

Movable Typeの記事編集画面のツールバーをドラッグできるようにしてみました。

以下の内容は、Movable Type 4系に関するものです

Movable Type 4では記事の内容のエリアの縦サイズは可変になるようになっています。ところが、ワタくシのように記事の「続き（extend）」を使わずに、ほとんどが「本文」のみで書いており、長い記事の編集中にテキスト部分をスクロールバーが出ないように長くしていると、ツールバー（テキスト編集のためのボタン群）が上のほうに送られることで画面から隠れてしまうケースがあります。

これを解決する方法で思いつくのはこのようなところです。

そこで、MTのツールバーもドラッグで任意の位置にもっていくことができるようにしてみたというわけです（というのはタテマエでdraggableのオプションを試すのが目的だと言う話もあります）。

方法ですが、先般書いた、「メモ：MTでファイルアップロード等のダイアログが画面内に収まり切らない時の対処」の記事内のダイアログをドラッグする方法にコードを追加します。追加する（している）コードは以下のようになります。

jQuery(function(){
     //  エディタツールバーにz-index設定し、テキスト部分に潜り込まないようにする
       $('#editor-content-toolbar').css("z-index","1");
     //  draggable の設定をする
       $('#editor-content-toolbar').draggable({
        snap: ".tab",
        cursor: "move",
        containment: "#content-inner",
        drag: function(event, ui){$(".field-buttons-formatting").css("visibility","hidden");},
        stop: function(event, ui){$(".field-buttons-formatting").css("visibility","visible");}
        });
});

導入までの手順の簡単なオサライです。

  1. http://www.movabletype.jp/faq/modal-dialog.htmlの代替テンプレートをダウンロード
  2. /alt-tmpl/ディレクトリ以下に指定された箇所にアップ。ダイアログの動作を確認。
  3. jQuery本体、jQuery UI（ui.core.js、ui.draggable.js）を用意する
  4. 代替テンプレートを書き換えて再びアップする

動作確認はMTOS4.3-jaとおよびこのブログでのMovable Type Pro 4.261、ブラウザはFirefox3.0.13とIE7です。動作的にはFirefoxのほうを推奨します。

あと、特定の要素を指定していますから、テンプレートの構造とか要素が変更になると動作しなくなります。なお、draggableのオプション設定については以下を参考にしました。

4.261でYahoo!のIDによる認証の動作確認

Movable Typeのコメント認証で、Yahoo!のIDを利用されたときの動作の確認です。

Movable Type4.5から認証可能となるサービスが追加されています。そのなかで、Yahoo!のIDを使った場合の動作を確認してみます。なお、Movable Type 4.261にて確認をおこなっていますが、4.25でも動作は同じだと思います。という書きかたをすると信用ならないでしょうから、念のため言っておきますと、ここのブログで4.25であった時分に同様の動作確認をおこなっています。

MTの認証サーヴィスとして、yahoo.comとyahoo.co.jpの2種類が用意されているのですが、本記事では双方の動作をまとめて紹介しておきます。

注意事項

  • Movable Typeの各CGIファイルのパーミッションの確認をあらかじめ済ませておいてください。
  • 認証ユーザーの設定でYahoo!のサーヴィスが使えるようにしておいてください。参考：「認証ユーザーとしてサインインできるアカウントの設定」（movabletype.jp）
  • Yahoo!のOpenIDの取得についての説明はそれぞれの説明ページを参照してください。この記事では、ワタくシが先にOpenIDを取得済みである状態から動作確認した関係で、Yahoo!のOpenIDの取得についての説明は省略されています。

これから「Yahoo! OpenID」を取得されるかた向けにいっておきますと、Yahoo!で取得したOpenIDは、あとから変更ができない仕様のようです。ひとつのYahoo！IDから取得されたOpenIDはそのIDがある限り発行されたIDを使いつづけるということです。詳しいことは、以下のページを参照されるとよいでしょう。

なお将来的に、Movable Typeの仕様変更、もしくはYahoo!側のOpenIDの仕様変更等で挙動が変わったり、本記事で紹介されている動作どおりにならない可能性があります。

yahoo.comの場合

www.yahoo.comのIDのあるかたは、以下のように認証をおこないます。Yahoo! JAPANのIDのかたは次のセクションを参照してください。

コメント欄の「サインイン」のリンクをクリックすると認証画面に遷移しますので、そこで「Yahoo!」を選択します。

mt-signin_yahoocom01.gif

Yahoo!のログイン画面に遷移します。

mt-signin_yahoocom02.gif

Yahoo!にログインすると、OpenIDの確認画面に移動します。表示されているドメインを確認したうえで、Continueボタンを押下します。

mt-signin_yahoocom03.gif

認証が成功すると、元のページに戻ります。

mt-signin_yahoocom04.gif

Yahoo! JAPAN IDの場合

基本的には、表記が英語か日本語かというくらいで動作としてはそれほどの違いはありません。認証サーヴィスの選択画面でYahoo! JAPANを選択します。

mt-signin_yahoocojp01.gif

Yahoo! JAPANのいつものログイン画面に移ります。ここではキャプチャを省略します。Yahoo! JAPANのログイン認証が済むと、OpenIDの確認画面に遷移します。

mt-signin_yahoocojp02.gif

「続ける」ボタン押下後、認証が成功すると元のページに戻ります。なお画面上には「Yahoo! JAPANのOpenIDのリンク」がでていますが、リンク先は個人のプロフィールページではなく、Yahoo! OpenIDのページです。

Index of all entries

Home > MovableType > mt4 Archive

Categories
Search

Powered by 暴想 & Dakiny&Digiclo

Feeds
Elsewhere

Action Streams

logo

Mozilla Firefox ブラウザ無料ダウンロード

TypePad AntiSpam

Return to page top